From c2498911abe94e820dc1dcd8cd189f009b16facf Mon Sep 17 00:00:00 2001
From: qwer-xyz <50532012+qwer-xyz@users.noreply.github.com>
Date: Sat, 20 Jun 2026 14:22:31 +0800
Subject: [PATCH] first commit

---
 .dockerignore                                 |   56 +
 .env.example                                  |  185 +
 .gitattributes                                |   14 +
 .github/workflows/agent-release.yml           |  190 +
 .github/workflows/ci.yml                      |   81 +
 .github/workflows/docker.yml                  |   65 +
 .github/workflows/release.yml                 |  257 +
 .gitignore                                    |   93 +
 Dockerfile                                    |   85 +
 LICENSE                                       |   28 +
 README.md                                     |  194 +
 TransparentProxy.md                           |  104 +
 agent/.gitignore                              |    4 +
 agent/README.md                               |  174 +
 agent/VERSION                                 |    1 +
 agent/cmd/incudal-agent/main.go               |  110 +
 agent/config.example.yaml                     |    8 +
 agent/go.mod                                  |    3 +
 agent/internal/config/config.go               |  158 +
 agent/internal/config/config_test.go          |   51 +
 agent/internal/panel/client.go                |  119 +
 agent/internal/protocol/signing.go            |   52 +
 agent/internal/protocol/signing_test.go       |   49 +
 agent/internal/report/incus.go                |  362 +
 agent/internal/report/report.go               |  298 +
 agent/internal/report/report_test.go          |  166 +
 agent/internal/upgrade/upgrade.go             |  400 +
 agent/internal/upgrade/upgrade_test.go        |  230 +
 agent/scripts/build-release.sh                |   82 +
 client/eslint.config.js                       |  106 +
 client/index.html                             |   53 +
 client/package.json                           |   54 +
 client/postcss.config.js                      |    7 +
 client/public/badges/dark/abyss.svg           |  102 +
 client/public/badges/dark/aether.svg          |  102 +
 client/public/badges/dark/apex.svg            |  102 +
 client/public/badges/dark/aquarius.svg        |   80 +
 client/public/badges/dark/ares.svg            |  102 +
 client/public/badges/dark/aries.svg           |   80 +
 client/public/badges/dark/astral.svg          |  102 +
 client/public/badges/dark/barrage.svg         |  102 +
 client/public/badges/dark/barrier.svg         |  102 +
 client/public/badges/dark/bastion.svg         |  102 +
 client/public/badges/dark/blackhole.svg       |  102 +
 client/public/badges/dark/cancer.svg          |   80 +
 client/public/badges/dark/capricorn.svg       |   80 +
 client/public/badges/dark/citadel.svg         |  102 +
 client/public/badges/dark/core.svg            |  102 +
 client/public/badges/dark/cronus.svg          |  102 +
 client/public/badges/dark/crosshair.svg       |  102 +
 client/public/badges/dark/defender.svg        |  102 +
 client/public/badges/dark/dog.svg             |   80 +
 client/public/badges/dark/dragon.svg          |   80 +
 client/public/badges/dark/dynamo.svg          |  102 +
 client/public/badges/dark/earth.svg           |  102 +
 client/public/badges/dark/elite.svg           |  102 +
 client/public/badges/dark/enigma.svg          |  102 +
 client/public/badges/dark/fission.svg         |  102 +
 client/public/badges/dark/fortress.svg        |  102 +
 client/public/badges/dark/fusion.svg          |  102 +
 client/public/badges/dark/galaxy.svg          |  102 +
 client/public/badges/dark/gemini.svg          |   80 +
 client/public/badges/dark/genesis.svg         |  102 +
 client/public/badges/dark/glyph.svg           |  102 +
 client/public/badges/dark/goat.svg            |   80 +
 client/public/badges/dark/guardian.svg        |  102 +
 client/public/badges/dark/horse.svg           |   80 +
 client/public/badges/dark/ignition.svg        |  102 +
 client/public/badges/dark/intercept.svg       |  102 +
 client/public/badges/dark/jupiter.svg         |  102 +
 client/public/badges/dark/leo.svg             |   80 +
 client/public/badges/dark/libra.svg           |   80 +
 client/public/badges/dark/lockon.svg          |  102 +
 client/public/badges/dark/matrix.svg          |  102 +
 client/public/badges/dark/mercury.svg         |  102 +
 client/public/badges/dark/monkey.svg          |   80 +
 client/public/badges/dark/moon.svg            |  102 +
 client/public/badges/dark/mystic.svg          |  102 +
 client/public/badges/dark/nebula.svg          |  102 +
 client/public/badges/dark/neptune.svg         |  102 +
 client/public/badges/dark/nexus.svg           |  102 +
 client/public/badges/dark/omega.svg           |  102 +
 client/public/badges/dark/oracle.svg          |  102 +
 client/public/badges/dark/overload.svg        |  102 +
 client/public/badges/dark/overwatch.svg       |  102 +
 client/public/badges/dark/ox.svg              |   80 +
 client/public/badges/dark/paladin.svg         |  102 +
 client/public/badges/dark/paradox.svg         |  102 +
 client/public/badges/dark/phalanx.svg         |  102 +
 client/public/badges/dark/pig.svg             |   80 +
 client/public/badges/dark/pisces.svg          |   80 +
 client/public/badges/dark/plasma.svg          |  102 +
 client/public/badges/dark/pluto.svg           |  102 +
 client/public/badges/dark/pulsar.svg          |  102 +
 client/public/badges/dark/pulse.svg           |  102 +
 client/public/badges/dark/quantum.svg         |  102 +
 client/public/badges/dark/rabbit.svg          |   80 +
 client/public/badges/dark/radar.svg           |  102 +
 client/public/badges/dark/radiance.svg        |  102 +
 client/public/badges/dark/rat.svg             |   80 +
 client/public/badges/dark/recon.svg           |  102 +
 client/public/badges/dark/rooster.svg         |   80 +
 client/public/badges/dark/rune.svg            |  102 +
 client/public/badges/dark/sagittarius.svg     |   80 +
 client/public/badges/dark/scorpio.svg         |   80 +
 client/public/badges/dark/sentinel.svg        |  102 +
 client/public/badges/dark/sigil.svg           |  102 +
 client/public/badges/dark/snake.svg           |   80 +
 client/public/badges/dark/sniper.svg          |  102 +
 client/public/badges/dark/solaris.svg         |  102 +
 client/public/badges/dark/strike.svg          |  102 +
 client/public/badges/dark/taurus.svg          |   80 +
 client/public/badges/dark/tiger.svg           |   80 +
 client/public/badges/dark/titan.svg           |  102 +
 client/public/badges/dark/tracer.svg          |  102 +
 client/public/badges/dark/ultra.svg           |  102 +
 client/public/badges/dark/uranus.svg          |  102 +
 client/public/badges/dark/vanguard.svg        |  102 +
 client/public/badges/dark/virgo.svg           |   80 +
 client/public/badges/dark/vortex.svg          |  102 +
 client/public/badges/dark/ward.svg            |  102 +
 client/public/badges/dark/wormhole.svg        |  102 +
 client/public/badges/light/abyss.svg          |  102 +
 client/public/badges/light/aether.svg         |  102 +
 client/public/badges/light/apex.svg           |  102 +
 client/public/badges/light/aquarius.svg       |   80 +
 client/public/badges/light/ares.svg           |  102 +
 client/public/badges/light/aries.svg          |   80 +
 client/public/badges/light/astral.svg         |  102 +
 client/public/badges/light/barrage.svg        |  102 +
 client/public/badges/light/barrier.svg        |  102 +
 client/public/badges/light/bastion.svg        |  102 +
 client/public/badges/light/blackhole.svg      |  102 +
 client/public/badges/light/cancer.svg         |   80 +
 client/public/badges/light/capricorn.svg      |   80 +
 client/public/badges/light/citadel.svg        |  102 +
 client/public/badges/light/core.svg           |  102 +
 client/public/badges/light/cronus.svg         |  102 +
 client/public/badges/light/crosshair.svg      |  102 +
 client/public/badges/light/defender.svg       |  102 +
 client/public/badges/light/dog.svg            |   80 +
 client/public/badges/light/dragon.svg         |   80 +
 client/public/badges/light/dynamo.svg         |  102 +
 client/public/badges/light/earth.svg          |  102 +
 client/public/badges/light/elite.svg          |  102 +
 client/public/badges/light/enigma.svg         |  102 +
 client/public/badges/light/fission.svg        |  102 +
 client/public/badges/light/fortress.svg       |  102 +
 client/public/badges/light/fusion.svg         |  102 +
 client/public/badges/light/galaxy.svg         |  102 +
 client/public/badges/light/gemini.svg         |   80 +
 client/public/badges/light/genesis.svg        |  102 +
 client/public/badges/light/glyph.svg          |  102 +
 client/public/badges/light/goat.svg           |   80 +
 client/public/badges/light/guardian.svg       |  102 +
 client/public/badges/light/horse.svg          |   80 +
 client/public/badges/light/ignition.svg       |  102 +
 client/public/badges/light/intercept.svg      |  102 +
 client/public/badges/light/jupiter.svg        |  102 +
 client/public/badges/light/leo.svg            |   80 +
 client/public/badges/light/libra.svg          |   80 +
 client/public/badges/light/lockon.svg         |  102 +
 client/public/badges/light/matrix.svg         |  102 +
 client/public/badges/light/mercury.svg        |  102 +
 client/public/badges/light/monkey.svg         |   80 +
 client/public/badges/light/moon.svg           |  102 +
 client/public/badges/light/mystic.svg         |  102 +
 client/public/badges/light/nebula.svg         |  102 +
 client/public/badges/light/neptune.svg        |  102 +
 client/public/badges/light/nexus.svg          |  102 +
 client/public/badges/light/omega.svg          |  102 +
 client/public/badges/light/oracle.svg         |  102 +
 client/public/badges/light/overload.svg       |  102 +
 client/public/badges/light/overwatch.svg      |  102 +
 client/public/badges/light/ox.svg             |   80 +
 client/public/badges/light/paladin.svg        |  102 +
 client/public/badges/light/paradox.svg        |  102 +
 client/public/badges/light/phalanx.svg        |  102 +
 client/public/badges/light/pig.svg            |   80 +
 client/public/badges/light/pisces.svg         |   80 +
 client/public/badges/light/plasma.svg         |  102 +
 client/public/badges/light/pluto.svg          |  102 +
 client/public/badges/light/pulsar.svg         |  102 +
 client/public/badges/light/pulse.svg          |  102 +
 client/public/badges/light/quantum.svg        |  102 +
 client/public/badges/light/rabbit.svg         |   80 +
 client/public/badges/light/radar.svg          |  102 +
 client/public/badges/light/radiance.svg       |  102 +
 client/public/badges/light/rat.svg            |   80 +
 client/public/badges/light/recon.svg          |  102 +
 client/public/badges/light/rooster.svg        |   80 +
 client/public/badges/light/rune.svg           |  102 +
 client/public/badges/light/sagittarius.svg    |   80 +
 client/public/badges/light/scorpio.svg        |   80 +
 client/public/badges/light/sentinel.svg       |  102 +
 client/public/badges/light/sigil.svg          |  102 +
 client/public/badges/light/snake.svg          |   80 +
 client/public/badges/light/sniper.svg         |  102 +
 client/public/badges/light/solaris.svg        |  102 +
 client/public/badges/light/strike.svg         |  102 +
 client/public/badges/light/taurus.svg         |   80 +
 client/public/badges/light/tiger.svg          |   80 +
 client/public/badges/light/titan.svg          |  102 +
 client/public/badges/light/tracer.svg         |  102 +
 client/public/badges/light/ultra.svg          |  102 +
 client/public/badges/light/uranus.svg         |  102 +
 client/public/badges/light/vanguard.svg       |  102 +
 client/public/badges/light/virgo.svg          |   80 +
 client/public/badges/light/vortex.svg         |  102 +
 client/public/badges/light/ward.svg           |  102 +
 client/public/badges/light/wormhole.svg       |  102 +
 client/public/icons/peer.svg                  |  115 +
 client/public/icons/prime.svg                 |  144 +
 client/public/icons/pro.svg                   |  114 +
 client/public/incudal_logo.webp               |  Bin 0 -> 56512 bytes
 client/public/sw.js                           |  138 +
 client/public/tos/en.md                       |    3 +
 client/public/tos/zh.md                       |    3 +
 client/src/App.vue                            |  187 +
 client/src/api/index.ts                       | 5250 +++++++++++
 client/src/components/BackupManager.vue       |  996 ++
 client/src/components/BadgeImage.vue          |   61 +
 client/src/components/CheckinModal.vue        |  841 ++
 client/src/components/FlagIcon.vue            |   37 +
 client/src/components/InstanceDisplayIcon.vue |   32 +
 client/src/components/InstanceSelector.vue    |  193 +
 client/src/components/LazyImage.vue           |   92 +
 client/src/components/LoadingSpinner.vue      |   61 +
 client/src/components/NotificationBell.vue    |  272 +
 .../components/PackageQuotaReleaseModal.vue   |  414 +
 .../src/components/PopupAnnouncementModal.vue |  414 +
 .../components/SensitiveVerificationModal.vue |  270 +
 client/src/components/Skeleton.vue            |  131 +
 client/src/components/SkeletonLoader.vue      |  306 +
 client/src/components/SnapshotManager.vue     |  442 +
 client/src/components/TermsOfServiceModal.vue |  282 +
 client/src/components/Toast.vue               |   86 +
 client/src/components/ToastContainer.vue      |   23 +
 client/src/components/TurnstileWidget.vue     |  106 +
 client/src/components/UserAvatar.vue          |  131 +
 client/src/components/VirtualList.vue         |  130 +
 .../components/admin/BillingOverviewIcon.vue  |  181 +
 .../admin/VipBenefitHallSettings.vue          |  486 +
 .../components/admin/VipLevelRulesEditor.vue  |  399 +
 .../entertainment/BadgeBatchRewardModal.vue   |  103 +
 .../components/entertainment/BadgeCenter.vue  |  609 ++
 .../entertainment/BadgeRewardModal.vue        |  130 +
 .../entertainment/VipBenefitHall.vue          |  453 +
 .../extensions/InitCommandDetailModal.vue     |  227 +
 .../extensions/InitCommandModal.vue           |  325 +
 .../extensions/InitCommandSelector.vue        |  268 +
 .../src/components/host/BatchConfigModal.vue  |  793 ++
 client/src/components/host/HostCaddyTab.vue   |  595 ++
 .../components/host/HostCreateInstanceTab.vue |  714 ++
 client/src/components/host/HostImagesTab.vue  |  294 +
 client/src/components/host/HostInfoTab.vue    | 1039 ++
 .../src/components/host/HostInstancesList.vue |  329 +
 .../src/components/host/HostInstancesTab.vue  | 2034 ++++
 client/src/components/host/HostOpsTab.vue     | 2080 ++++
 .../components/host/HostRedeemCodesTab.vue    |  928 ++
 client/src/components/host/HostStorageTab.vue |  801 ++
 .../src/components/host/MigrateHostModal.vue  |  480 +
 .../src/components/host/MyHostConfigTab.vue   |  667 ++
 .../src/components/icons/AnnouncementIcon.vue |  128 +
 client/src/components/icons/DistroIcon.vue    |   95 +
 .../components/instance/ChangeHostCard.vue    |  325 +
 .../src/components/instance/HostSelector.vue  |  182 +
 .../src/components/instance/ImageSelector.vue |  245 +
 .../instance/InstanceBadgeModal.vue           |  451 +
 .../components/instance/InstanceConfigTab.vue |  685 ++
 .../components/instance/InstanceInfoTab.vue   |  655 ++
 .../components/instance/InstanceLogsTab.vue   |  424 +
 .../instance/InstanceNetworkTab.vue           |  696 ++
 .../components/instance/InstanceOrderMenu.vue |  409 +
 .../components/instance/InstanceQuotaTab.vue  |  125 +
 .../components/instance/InstanceSitesTab.vue  |  989 ++
 .../components/instance/PackageSelector.vue   |  428 +
 .../src/components/instance/PlanSelector.vue  |  374 +
 .../components/instance/RegionSelector.vue    |  227 +
 .../components/instance/ResourceSlider.vue    |  281 +
 .../components/instance/ResourceSliders.vue   |  185 +
 .../components/instance/SSHKeySelector.vue    |  151 +
 .../instance/TerminalAccessoryBar.vue         |  296 +
 .../instance/TerminalContextMenu.vue          |  192 +
 .../src/components/instance/TerminalModal.vue | 1802 ++++
 .../src/components/instance/TrafficStats.vue  |  357 +
 .../instance/modals/AddPortModal.vue          |  380 +
 .../instance/modals/ApplyAffCodeModal.vue     |  177 +
 .../instance/modals/ChangePlanModal.vue       |  696 ++
 .../instance/modals/ConfigEditModal.vue       |  425 +
 .../instance/modals/DestroyInstanceModal.vue  |  478 +
 .../instance/modals/PortConflictModal.vue     |  265 +
 .../instance/modals/RebuildModal.vue          |  361 +
 .../instance/modals/RecreateModal.vue         |  357 +
 .../components/instance/modals/RenewModal.vue |  396 +
 .../instance/modals/TransferModal.vue         |  303 +
 client/src/components/layout/AppLayout.vue    |  348 +
 client/src/components/layout/SideNav.vue      |  385 +
 .../src/components/profile/AccountSection.vue |  214 +
 .../src/components/profile/BillingSection.vue |  653 ++
 .../components/profile/ChangeEmailModal.vue   |  468 +
 .../profile/LoginHistorySection.vue           |  232 +
 .../profile/NotificationSection.vue           |  456 +
 .../src/components/profile/OAuthSection.vue   |  224 +
 .../components/profile/PasswordSection.vue    |  170 +
 .../src/components/profile/SSHKeysSection.vue |  383 +
 .../src/components/profile/StorageSection.vue |  331 +
 .../profile/TelegramBindingSection.vue        |  191 +
 .../components/profile/TwoFactorSection.vue   |  344 +
 .../src/components/public/PublicAuthShell.vue |   39 +
 .../components/public/PublicSiteFooter.vue    |  173 +
 .../components/public/PublicSiteHeader.vue    |  315 +
 .../components/public/PublicSiteLayout.vue    |   44 +
 .../terminal/TerminalSavedCommandsSidebar.vue |  448 +
 .../tickets/TicketImageLightbox.vue           |  212 +
 .../tickets/TicketImageUploader.vue           |  164 +
 .../tickets/TicketInstanceOwnerCard.vue       |  874 ++
 client/src/composables/useBrand.ts            |   17 +
 client/src/composables/useM3Auth.ts           |   69 +
 client/src/composables/usePageSeo.ts          |  136 +
 client/src/composables/useTerminal.ts         |  705 ++
 client/src/composables/useTurnstile.ts        |  311 +
 client/src/constants/adminSettings.ts         |   62 +
 client/src/data/funnyQuotes.ts                |  625 ++
 client/src/env.d.ts                           |    8 +
 client/src/lib/terminal-core.ts               |  214 +
 client/src/locales/en.ts                      | 7443 +++++++++++++++
 client/src/locales/index.ts                   |   88 +
 client/src/locales/zh-CN.ts                   | 7460 +++++++++++++++
 client/src/locales/zh-TW.ts                   | 7777 +++++++++++++++
 client/src/main.ts                            |   81 +
 client/src/router/index.ts                    |  551 ++
 client/src/stores/auth.ts                     |  149 +
 client/src/stores/badges.ts                   |   62 +
 client/src/stores/config.ts                   |  104 +
 client/src/stores/inbox.ts                    |  100 +
 client/src/stores/restoreTask.ts              |  219 +
 client/src/stores/terminal.ts                 |  332 +
 client/src/stores/theme.ts                    |   81 +
 client/src/stores/toast.ts                    |   59 +
 client/src/styles/main.css                    | 1433 +++
 client/src/types/api.ts                       | 1729 ++++
 client/src/types/router.ts                    |   17 +
 client/src/types/store.ts                     |   29 +
 client/src/utils/billing.ts                   |   70 +
 client/src/utils/countryDisplay.ts            |  132 +
 client/src/utils/errorHandler.ts              |   61 +
 client/src/utils/formatters.ts                |  166 +
 client/src/utils/freeSiteFun.ts               |  112 +
 client/src/utils/inboxHelper.ts               |  261 +
 client/src/utils/markdown.ts                  |  587 ++
 client/src/utils/publicCatalog.ts             |  136 +
 client/src/utils/turnstile.ts                 |   52 +
 client/src/utils/validation.ts                |  403 +
 client/src/utils/vipBadge.ts                  |   56 +
 client/src/views/DashboardView.vue            |  799 ++
 client/src/views/EntertainmentView.vue        | 2044 ++++
 client/src/views/ExtensionsView.vue           |  339 +
 client/src/views/ForgotPasswordView.vue       |  305 +
 client/src/views/FriendsView.vue              | 1297 +++
 client/src/views/HelpView.vue                 |  750 ++
 client/src/views/HostingWalletView.vue        | 1492 +++
 client/src/views/InboxView.vue                |  434 +
 client/src/views/InstanceCreateView.vue       | 1373 +++
 client/src/views/InstanceDetailView.vue       | 3606 +++++++
 client/src/views/InstancesView.vue            | 2645 ++++++
 client/src/views/InvitesView.vue              |  331 +
 client/src/views/LoginView.vue                |  415 +
 client/src/views/LogsView.vue                 |  356 +
 client/src/views/MailDomainView.vue           |  428 +
 client/src/views/MailView.vue                 |  864 ++
 client/src/views/MarketView.vue               | 1146 +++
 client/src/views/NotFoundView.vue             |   28 +
 client/src/views/PortalView.vue               |  575 ++
 client/src/views/ProfileView.vue              |   63 +
 client/src/views/RegisterView.vue             |  607 ++
 client/src/views/TerminalView.vue             | 2167 +++++
 client/src/views/TicketsView.vue              | 1198 +++
 client/src/views/TransfersView.vue            |  703 ++
 client/src/views/WalletView.vue               | 2273 +++++
 .../views/admin/AdminInstanceCreateView.vue   |  833 ++
 client/src/views/admin/AdminMailView.vue      |  942 ++
 client/src/views/admin/AffReviewView.vue      |  292 +
 client/src/views/admin/BillingView.vue        | 2577 +++++
 client/src/views/admin/BroadcastView.vue      |  366 +
 client/src/views/admin/EntertainmentView.vue  | 1637 ++++
 client/src/views/admin/HelpManageView.vue     | 1125 +++
 client/src/views/admin/HostingView.vue        |  635 ++
 client/src/views/admin/ImagesView.vue         |  449 +
 client/src/views/admin/OAuthConfigView.vue    |  348 +
 .../src/views/admin/PaymentProvidersView.vue  |  744 ++
 client/src/views/admin/StatisticsView.vue     |  679 ++
 client/src/views/admin/SystemConfigView.vue   | 1828 ++++
 client/src/views/admin/TelegramConfigView.vue | 1261 +++
 client/src/views/admin/UsersView.vue          | 2806 ++++++
 .../src/views/resources/MyHostCreateView.vue  |  596 ++
 .../src/views/resources/MyHostDetailView.vue  |  658 ++
 client/src/views/resources/MyHostsView.vue    |  677 ++
 client/src/views/resources/MyPackagesView.vue | 1862 ++++
 .../src/views/resources/PackageFormView.vue   | 1501 +++
 client/tailwind.config.js                     |   85 +
 client/tsconfig.json                          |   44 +
 client/tsconfig.node.json                     |   13 +
 client/vite.config.ts                         |  109 +
 docker-compose.dev.yml                        |   76 +
 docker-compose.yml                            |   74 +
 package-lock.json                             |  332 +
 package.json                                  |   22 +
 pnpm-lock.yaml                                | 8322 +++++++++++++++++
 pnpm-workspace.yaml                           |    4 +
 scripts/generate-badges-from-html.mjs         |  315 +
 scripts/init-env.sh                           |   97 +
 scripts/install-docker.sh                     |  759 ++
 scripts/install-panel.sh                      | 1155 +++
 scripts/local-ci-macos.sh                     |   73 +
 scripts/local-ci.ps1                          |   74 +
 scripts/watch-migrations.mjs                  |  122 +
 server/certs/.gitkeep                         |    4 +
 server/docker-entrypoint.sh                   |   10 +
 server/package-lock.json                      | 6829 ++++++++++++++
 server/package.json                           |   77 +
 server/prisma.config.ts                       |   15 +
 .../migration.sql                             |   17 +
 .../20251206045256_init/migration.sql         |  535 ++
 .../migration.sql                             |    3 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   18 +
 .../migration.sql                             |   16 +
 .../migration.sql                             |   52 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   30 +
 .../migration.sql                             |   61 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   38 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |  107 +
 .../migration.sql                             |    6 +
 .../migration.sql                             |   63 +
 .../migration.sql                             |   14 +
 .../migration.sql                             |   67 +
 .../migration.sql                             |   11 +
 .../migration.sql                             |   59 +
 .../migration.sql                             |   76 +
 .../migration.sql                             |   60 +
 .../migration.sql                             |    1 +
 .../migration.sql                             |   14 +
 .../migration.sql                             |    1 +
 .../migration.sql                             |   32 +
 .../migration.sql                             |   56 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   12 +
 .../migration.sql                             |    7 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   51 +
 .../migration.sql                             |   85 +
 .../migration.sql                             |   31 +
 .../migration.sql                             |    8 +
 .../migration.sql                             |    3 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   27 +
 .../migration.sql                             |   46 +
 .../migration.sql                             |   39 +
 .../migration.sql                             |   12 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |    4 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    7 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   22 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |   40 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   24 +
 .../migration.sql                             |   11 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |   99 +
 .../migration.sql                             |    1 +
 .../migration.sql                             |   57 +
 .../migration.sql                             |   64 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |   11 +
 .../migration.sql                             |   18 +
 .../migration.sql                             |   26 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../20260111_add_billing_system/migration.sql |  209 +
 .../migration.sql                             |    9 +
 .../migration.sql                             |  152 +
 .../migration.sql                             |   18 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   18 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |  145 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    6 +
 .../migration.sql                             |    3 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   47 +
 .../migration.sql                             |    8 +
 .../migration.sql                             |   29 +
 .../migration.sql                             |   53 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   13 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    4 +
 .../migration.sql                             |    4 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |  112 +
 .../migration.sql                             |   32 +
 .../migration.sql                             |   28 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |   26 +
 .../migration.sql                             |   29 +
 .../migration.sql                             |   73 +
 .../migration.sql                             |    4 +
 .../migration.sql                             |    7 +
 .../migration.sql                             |    6 +
 .../migration.sql                             |   18 +
 .../migration.sql                             |   32 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    4 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |   36 +
 .../migration.sql                             |    3 +
 .../migration.sql                             |    3 +
 .../migration.sql                             |  234 +
 .../migration.sql                             |   21 +
 .../migration.sql                             |   25 +
 .../migration.sql                             |    1 +
 .../migration.sql                             |    3 +
 .../migration.sql                             |   46 +
 .../migration.sql                             |    9 +
 .../migration.sql                             |    9 +
 .../migration.sql                             |  103 +
 .../migration.sql                             |   27 +
 .../migration.sql                             |   47 +
 .../migration.sql                             |    1 +
 .../migration.sql                             |    7 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |    2 +
 .../migration.sql                             |  157 +
 .../migration.sql                             |   20 +
 .../migration.sql                             |   10 +
 .../migration.sql                             |   19 +
 .../migration.sql                             |   12 +
 .../migration.sql                             |   21 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |    4 +
 .../migration.sql                             |   38 +
 .../migration.sql                             |   11 +
 .../migration.sql                             |  182 +
 .../migration.sql                             |   86 +
 .../migration.sql                             |   11 +
 .../migration.sql                             |  157 +
 server/prisma/migrations/migration_lock.toml  |    3 +
 server/prisma/schema.prisma                   | 2978 ++++++
 .../backfill-instance-network-addresses.ts    |  164 +
 .../scripts/fix-migrated-instance-billing.ts  |  122 +
 server/scripts/seed-bulk-local-data.ts        | 1690 ++++
 server/scripts/seed-test-data.ts              |  975 ++
 server/scripts/test-agent-auth.ts             |   47 +
 server/scripts/test-security-config.ts        |   79 +
 server/src/app.ts                             |  951 ++
 server/src/config/badges.generated.json       | 1426 +++
 server/src/config/badges.generated.ts         | 1426 +++
 server/src/config/badges.ts                   |   26 +
 server/src/config/rate-limit.ts               |  710 ++
 server/src/config/system-images.ts            |  297 +
 server/src/db/advisory-locks.ts               |   36 +
 server/src/db/aff.ts                          | 1127 +++
 server/src/db/announcements.ts                |  170 +
 server/src/db/backup-upload-tasks.ts          |  227 +
 server/src/db/backups.ts                      |  202 +
 server/src/db/badges.ts                       | 1121 +++
 server/src/db/balance.ts                      |  427 +
 server/src/db/billing-operations.ts           | 1481 +++
 server/src/db/billing-records.ts              |  502 +
 server/src/db/checkin.ts                      |  524 ++
 server/src/db/custom-init-commands.ts         |  309 +
 server/src/db/email-verification.ts           |  116 +
 server/src/db/friendships.ts                  |  503 +
 server/src/db/help.ts                         |  270 +
 server/src/db/host-addresses.ts               |  319 +
 .../src/db/host-notification-email-tasks.ts   |  239 +
 server/src/db/hosting-blocks.ts               |  135 +
 server/src/db/hosts.ts                        |  922 ++
 server/src/db/images.ts                       |  539 ++
 server/src/db/inbox.ts                        |  338 +
 server/src/db/index.ts                        |  186 +
 server/src/db/init-prisma.ts                  |  233 +
 server/src/db/instance-suspend.ts             |  266 +
 server/src/db/instance-tasks.ts               |  210 +
 server/src/db/instances.ts                    |  753 ++
 server/src/db/invite-codes.ts                 |  313 +
 server/src/db/ip-addresses.ts                 |  220 +
 server/src/db/ipv6-subnets.ts                 |   88 +
 server/src/db/login-records.ts                |  454 +
 server/src/db/logs.ts                         |  388 +
 server/src/db/lottery.ts                      |  759 ++
 server/src/db/mail.ts                         |  556 ++
 server/src/db/notifications.ts                |  292 +
 server/src/db/oauth.ts                        |  250 +
 server/src/db/optimizations.ts                |  321 +
 server/src/db/package-hosts.ts                |  135 +
 server/src/db/package-plans.ts                |  388 +
 server/src/db/package-shares.ts               |  687 ++
 server/src/db/packages.ts                     | 1459 +++
 server/src/db/pagination.ts                   |  845 ++
 server/src/db/payment-providers.ts            |  385 +
 server/src/db/points.ts                       |  316 +
 server/src/db/port-mappings.ts                |  389 +
 server/src/db/prisma.ts                       |  186 +
 server/src/db/proxy-sites.ts                  |  229 +
 server/src/db/quota-operations.ts             |  559 ++
 server/src/db/recharge-records.ts             |  532 ++
 server/src/db/redeem-codes.ts                 |  392 +
 server/src/db/reset-database.ts               |  142 +
 server/src/db/resource-pool.ts                |  283 +
 server/src/db/restore-tasks.ts                |   72 +
 server/src/db/snapshots.ts                    |  178 +
 server/src/db/ssh-keys.ts                     |   78 +
 server/src/db/storage-configs.ts              |  142 +
 server/src/db/storage-pools.ts                |  229 +
 server/src/db/system-config.ts                |  337 +
 server/src/db/terminal-saved-commands.ts      |  307 +
 server/src/db/tickets.ts                      | 1170 +++
 server/src/db/traffic.ts                      |  850 ++
 server/src/db/transfers.ts                    |  556 ++
 server/src/db/users.ts                        |  798 ++
 server/src/lib/action-ticket.ts               |  174 +
 server/src/lib/agent-auth.ts                  |  168 +
 server/src/lib/architecture.ts                |   20 +
 server/src/lib/billing-calc.ts                |  314 +
 server/src/lib/caddy-client.ts                |  279 +
 server/src/lib/cloud-init-status.ts           |  293 +
 server/src/lib/config-cache.ts                |  108 +
 server/src/lib/cookie-config.ts               |  136 +
 server/src/lib/cpu-allowance.ts               |   70 +
 server/src/lib/distributed-lock.ts            |  267 +
 server/src/lib/download-token.ts              |  167 +
 server/src/lib/email-domain.ts                |  111 +
 server/src/lib/epay.ts                        |  441 +
 server/src/lib/errors.ts                      |  674 ++
 server/src/lib/geoip.ts                       |  233 +
 server/src/lib/heleket.ts                     |  352 +
 server/src/lib/host-agent-credentials.ts      |  202 +
 server/src/lib/hosting-access.ts              |  164 +
 server/src/lib/incus-config-container.ts      |  635 ++
 server/src/lib/incus-config-generator.ts      |   56 +
 server/src/lib/incus-config-vm.ts             |  656 ++
 server/src/lib/incus/host-health.ts           |  147 +
 server/src/lib/incus/incus-backups.ts         |  176 +
 server/src/lib/incus/incus-client.ts          |  217 +
 server/src/lib/incus/incus-images.ts          |  205 +
 server/src/lib/incus/incus-instances.ts       |  982 ++
 server/src/lib/incus/incus-network.ts         |   21 +
 server/src/lib/incus/incus-pool.ts            |  227 +
 server/src/lib/incus/incus-restore.ts         |  188 +
 server/src/lib/incus/incus-snapshots.ts       |   79 +
 server/src/lib/incus/incus-storage.ts         |  109 +
 server/src/lib/incus/incus-traffic.ts         |  241 +
 server/src/lib/incus/incus-utils.ts           |  119 +
 server/src/lib/incus/index.ts                 |   43 +
 server/src/lib/instance-audit.ts              |  502 +
 server/src/lib/instance-network-sync.ts       |  376 +
 server/src/lib/instance-swap.ts               |   43 +
 server/src/lib/invite-pricing.ts              |  273 +
 server/src/lib/ip-calculator.ts               |  256 +
 server/src/lib/log-sanitizer.ts               |  188 +
 server/src/lib/lottery-notifier.ts            |  249 +
 server/src/lib/lsky.ts                        |  361 +
 server/src/lib/mailer.ts                      | 2097 +++++
 server/src/lib/managed-instance-provision.ts  |  156 +
 server/src/lib/network-address.ts             |   92 +
 server/src/lib/network-payload-builder.ts     |  441 +
 server/src/lib/notifier.ts                    | 1531 +++
 server/src/lib/operation-verification.ts      |  394 +
 server/src/lib/outbound-security.ts           |  165 +
 server/src/lib/permission.ts                  |  437 +
 server/src/lib/proxy/IProxyStrategy.ts        |   31 +
 server/src/lib/proxy/KvmProxyStrategy.ts      |   81 +
 server/src/lib/proxy/LxcProxyStrategy.ts      |   38 +
 server/src/lib/proxy/index.ts                 |   14 +
 server/src/lib/recharge-payment-details.ts    |  165 +
 server/src/lib/recharge-provider-snapshot.ts  |   62 +
 server/src/lib/redirect-validator.ts          |   60 +
 server/src/lib/release-notifier.ts            |   91 +
 server/src/lib/retry.ts                       |  288 +
 server/src/lib/security-config.ts             |   90 +
 server/src/lib/security.ts                    | 1573 ++++
 server/src/lib/terminal-proxy.ts              |  828 ++
 server/src/lib/timezone.ts                    |  168 +
 server/src/lib/traffic-multiplier.ts          |   71 +
 server/src/lib/turnstile.ts                   |  134 +
 server/src/lib/vm-network-identifiers.ts      |   32 +
 server/src/lib/websocket-security.ts          |  217 +
 server/src/routes/admin-billing.ts            | 3879 ++++++++
 server/src/routes/admin-entertainment.ts      | 1190 +++
 server/src/routes/admin-hosting.ts            |  547 ++
 .../src/routes/admin-notification-channels.ts |  236 +
 server/src/routes/admin-statistics.ts         |  326 +
 server/src/routes/aff.ts                      |  458 +
 server/src/routes/agent.ts                    | 1300 +++
 server/src/routes/announcements.ts            |  106 +
 server/src/routes/auth.ts                     | 1369 +++
 server/src/routes/backups.ts                  | 1358 +++
 server/src/routes/balance.ts                  |  355 +
 server/src/routes/batch-config.ts             |  647 ++
 server/src/routes/checkin.ts                  |  362 +
 server/src/routes/custom-init-commands.ts     |  298 +
 server/src/routes/entertainment.ts            |  709 ++
 server/src/routes/friends.ts                  |  516 +
 server/src/routes/help.ts                     |  418 +
 server/src/routes/hosting.ts                  |  792 ++
 server/src/routes/hosts.ts                    | 8102 ++++++++++++++++
 server/src/routes/images.ts                   |  194 +
 server/src/routes/inbox.ts                    |  555 ++
 server/src/routes/instance-billing.ts         | 1150 +++
 server/src/routes/instance-destroy.ts         | 1273 +++
 server/src/routes/instances.ts                | 6375 +++++++++++++
 server/src/routes/ip-addresses.ts             |  813 ++
 server/src/routes/logs.ts                     |   89 +
 server/src/routes/mail.ts                     | 1363 +++
 server/src/routes/notifications.ts            |  462 +
 server/src/routes/oauth.ts                    |  585 ++
 server/src/routes/packages.ts                 | 2543 +++++
 server/src/routes/proxy-sites.ts              | 1017 ++
 server/src/routes/recharge.ts                 | 2192 +++++
 server/src/routes/redeem-codes.ts             |  401 +
 server/src/routes/resource-pool.ts            |  249 +
 server/src/routes/snapshots.ts                |  428 +
 server/src/routes/ssh-keys.ts                 |  312 +
 server/src/routes/storage-configs.ts          |  366 +
 server/src/routes/system-config.ts            |  661 ++
 server/src/routes/telegram.ts                 |  977 ++
 server/src/routes/terminal-saved-commands.ts  |  163 +
 server/src/routes/terminal.ts                 |  409 +
 server/src/routes/tickets.ts                  |  934 ++
 server/src/routes/traffic.ts                  |  431 +
 server/src/routes/transfers.ts                | 1083 +++
 server/src/routes/user-invites.ts             |  198 +
 server/src/routes/users.ts                    | 1655 ++++
 server/src/routes/verification.ts             |  266 +
 server/src/routes/vip-benefits.ts             |  123 +
 server/src/routes/vip-levels.ts               |   81 +
 server/src/services/agent-instance-report.ts  |  398 +
 server/src/services/auto-policy-scheduler.ts  |  296 +
 server/src/services/billing-scheduler.ts      |  627 ++
 server/src/services/cranemail.ts              |  222 +
 server/src/services/host-address-monitor.ts   |  480 +
 server/src/services/hosting-scheduler.ts      |  177 +
 .../services/instance-traffic-collector.ts    |  273 +
 server/src/services/mail-expiry-scheduler.ts  |   76 +
 server/src/services/smartermail.ts            |  235 +
 server/src/services/status-scheduler.ts       |  394 +
 server/src/services/system-monitor.ts         |  246 +
 .../services/ticket-auto-close-scheduler.ts   |   98 +
 server/src/services/traffic-bandwidth.ts      |   66 +
 server/src/services/traffic-notifier.ts       |  300 +
 server/src/services/traffic-scheduler.ts      |  694 ++
 server/src/services/traffic-utils.ts          |  176 +
 server/src/services/vip-benefits.ts           |  733 ++
 server/src/services/vip-levels.ts             |  777 ++
 server/src/storage/factory.ts                 |   70 +
 server/src/storage/index.ts                   |    9 +
 server/src/storage/providers/FtpProvider.ts   |   98 +
 server/src/storage/providers/SftpProvider.ts  |  104 +
 .../src/storage/providers/WebDavProvider.ts   |   97 +
 server/src/storage/types.ts                   |   51 +
 server/src/types/api.ts                       |  324 +
 server/src/types/database.ts                  |  395 +
 server/src/types/fastify.d.ts                 |   46 +
 server/src/types/incus.ts                     |  246 +
 server/src/workers/backupUploadWorker.ts      |  418 +
 server/src/workers/db-failure-backoff.ts      |   48 +
 .../workers/hostNotificationEmailWorker.ts    |  109 +
 server/src/workers/instanceTaskWorker.ts      | 2595 +++++
 server/src/workers/restoreTaskWorker.ts       |  536 ++
 server/templates/agent-install.sh             |  375 +
 server/templates/caddy.sh                     |  139 +
 server/templates/install.sh                   | 2818 ++++++
 server/tsconfig.json                          |   33 +
 793 files changed, 291660 insertions(+)
 create mode 100644 .dockerignore
 create mode 100644 .env.example
 create mode 100644 .gitattributes
 create mode 100644 .github/workflows/agent-release.yml
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 .github/workflows/docker.yml
 create mode 100644 .github/workflows/release.yml
 create mode 100644 .gitignore
 create mode 100644 Dockerfile
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 TransparentProxy.md
 create mode 100644 agent/.gitignore
 create mode 100644 agent/README.md
 create mode 100644 agent/VERSION
 create mode 100644 agent/cmd/incudal-agent/main.go
 create mode 100644 agent/config.example.yaml
 create mode 100644 agent/go.mod
 create mode 100644 agent/internal/config/config.go
 create mode 100644 agent/internal/config/config_test.go
 create mode 100644 agent/internal/panel/client.go
 create mode 100644 agent/internal/protocol/signing.go
 create mode 100644 agent/internal/protocol/signing_test.go
 create mode 100644 agent/internal/report/incus.go
 create mode 100644 agent/internal/report/report.go
 create mode 100644 agent/internal/report/report_test.go
 create mode 100644 agent/internal/upgrade/upgrade.go
 create mode 100644 agent/internal/upgrade/upgrade_test.go
 create mode 100644 agent/scripts/build-release.sh
 create mode 100644 client/eslint.config.js
 create mode 100644 client/index.html
 create mode 100644 client/package.json
 create mode 100644 client/postcss.config.js
 create mode 100644 client/public/badges/dark/abyss.svg
 create mode 100644 client/public/badges/dark/aether.svg
 create mode 100644 client/public/badges/dark/apex.svg
 create mode 100644 client/public/badges/dark/aquarius.svg
 create mode 100644 client/public/badges/dark/ares.svg
 create mode 100644 client/public/badges/dark/aries.svg
 create mode 100644 client/public/badges/dark/astral.svg
 create mode 100644 client/public/badges/dark/barrage.svg
 create mode 100644 client/public/badges/dark/barrier.svg
 create mode 100644 client/public/badges/dark/bastion.svg
 create mode 100644 client/public/badges/dark/blackhole.svg
 create mode 100644 client/public/badges/dark/cancer.svg
 create mode 100644 client/public/badges/dark/capricorn.svg
 create mode 100644 client/public/badges/dark/citadel.svg
 create mode 100644 client/public/badges/dark/core.svg
 create mode 100644 client/public/badges/dark/cronus.svg
 create mode 100644 client/public/badges/dark/crosshair.svg
 create mode 100644 client/public/badges/dark/defender.svg
 create mode 100644 client/public/badges/dark/dog.svg
 create mode 100644 client/public/badges/dark/dragon.svg
 create mode 100644 client/public/badges/dark/dynamo.svg
 create mode 100644 client/public/badges/dark/earth.svg
 create mode 100644 client/public/badges/dark/elite.svg
 create mode 100644 client/public/badges/dark/enigma.svg
 create mode 100644 client/public/badges/dark/fission.svg
 create mode 100644 client/public/badges/dark/fortress.svg
 create mode 100644 client/public/badges/dark/fusion.svg
 create mode 100644 client/public/badges/dark/galaxy.svg
 create mode 100644 client/public/badges/dark/gemini.svg
 create mode 100644 client/public/badges/dark/genesis.svg
 create mode 100644 client/public/badges/dark/glyph.svg
 create mode 100644 client/public/badges/dark/goat.svg
 create mode 100644 client/public/badges/dark/guardian.svg
 create mode 100644 client/public/badges/dark/horse.svg
 create mode 100644 client/public/badges/dark/ignition.svg
 create mode 100644 client/public/badges/dark/intercept.svg
 create mode 100644 client/public/badges/dark/jupiter.svg
 create mode 100644 client/public/badges/dark/leo.svg
 create mode 100644 client/public/badges/dark/libra.svg
 create mode 100644 client/public/badges/dark/lockon.svg
 create mode 100644 client/public/badges/dark/matrix.svg
 create mode 100644 client/public/badges/dark/mercury.svg
 create mode 100644 client/public/badges/dark/monkey.svg
 create mode 100644 client/public/badges/dark/moon.svg
 create mode 100644 client/public/badges/dark/mystic.svg
 create mode 100644 client/public/badges/dark/nebula.svg
 create mode 100644 client/public/badges/dark/neptune.svg
 create mode 100644 client/public/badges/dark/nexus.svg
 create mode 100644 client/public/badges/dark/omega.svg
 create mode 100644 client/public/badges/dark/oracle.svg
 create mode 100644 client/public/badges/dark/overload.svg
 create mode 100644 client/public/badges/dark/overwatch.svg
 create mode 100644 client/public/badges/dark/ox.svg
 create mode 100644 client/public/badges/dark/paladin.svg
 create mode 100644 client/public/badges/dark/paradox.svg
 create mode 100644 client/public/badges/dark/phalanx.svg
 create mode 100644 client/public/badges/dark/pig.svg
 create mode 100644 client/public/badges/dark/pisces.svg
 create mode 100644 client/public/badges/dark/plasma.svg
 create mode 100644 client/public/badges/dark/pluto.svg
 create mode 100644 client/public/badges/dark/pulsar.svg
 create mode 100644 client/public/badges/dark/pulse.svg
 create mode 100644 client/public/badges/dark/quantum.svg
 create mode 100644 client/public/badges/dark/rabbit.svg
 create mode 100644 client/public/badges/dark/radar.svg
 create mode 100644 client/public/badges/dark/radiance.svg
 create mode 100644 client/public/badges/dark/rat.svg
 create mode 100644 client/public/badges/dark/recon.svg
 create mode 100644 client/public/badges/dark/rooster.svg
 create mode 100644 client/public/badges/dark/rune.svg
 create mode 100644 client/public/badges/dark/sagittarius.svg
 create mode 100644 client/public/badges/dark/scorpio.svg
 create mode 100644 client/public/badges/dark/sentinel.svg
 create mode 100644 client/public/badges/dark/sigil.svg
 create mode 100644 client/public/badges/dark/snake.svg
 create mode 100644 client/public/badges/dark/sniper.svg
 create mode 100644 client/public/badges/dark/solaris.svg
 create mode 100644 client/public/badges/dark/strike.svg
 create mode 100644 client/public/badges/dark/taurus.svg
 create mode 100644 client/public/badges/dark/tiger.svg
 create mode 100644 client/public/badges/dark/titan.svg
 create mode 100644 client/public/badges/dark/tracer.svg
 create mode 100644 client/public/badges/dark/ultra.svg
 create mode 100644 client/public/badges/dark/uranus.svg
 create mode 100644 client/public/badges/dark/vanguard.svg
 create mode 100644 client/public/badges/dark/virgo.svg
 create mode 100644 client/public/badges/dark/vortex.svg
 create mode 100644 client/public/badges/dark/ward.svg
 create mode 100644 client/public/badges/dark/wormhole.svg
 create mode 100644 client/public/badges/light/abyss.svg
 create mode 100644 client/public/badges/light/aether.svg
 create mode 100644 client/public/badges/light/apex.svg
 create mode 100644 client/public/badges/light/aquarius.svg
 create mode 100644 client/public/badges/light/ares.svg
 create mode 100644 client/public/badges/light/aries.svg
 create mode 100644 client/public/badges/light/astral.svg
 create mode 100644 client/public/badges/light/barrage.svg
 create mode 100644 client/public/badges/light/barrier.svg
 create mode 100644 client/public/badges/light/bastion.svg
 create mode 100644 client/public/badges/light/blackhole.svg
 create mode 100644 client/public/badges/light/cancer.svg
 create mode 100644 client/public/badges/light/capricorn.svg
 create mode 100644 client/public/badges/light/citadel.svg
 create mode 100644 client/public/badges/light/core.svg
 create mode 100644 client/public/badges/light/cronus.svg
 create mode 100644 client/public/badges/light/crosshair.svg
 create mode 100644 client/public/badges/light/defender.svg
 create mode 100644 client/public/badges/light/dog.svg
 create mode 100644 client/public/badges/light/dragon.svg
 create mode 100644 client/public/badges/light/dynamo.svg
 create mode 100644 client/public/badges/light/earth.svg
 create mode 100644 client/public/badges/light/elite.svg
 create mode 100644 client/public/badges/light/enigma.svg
 create mode 100644 client/public/badges/light/fission.svg
 create mode 100644 client/public/badges/light/fortress.svg
 create mode 100644 client/public/badges/light/fusion.svg
 create mode 100644 client/public/badges/light/galaxy.svg
 create mode 100644 client/public/badges/light/gemini.svg
 create mode 100644 client/public/badges/light/genesis.svg
 create mode 100644 client/public/badges/light/glyph.svg
 create mode 100644 client/public/badges/light/goat.svg
 create mode 100644 client/public/badges/light/guardian.svg
 create mode 100644 client/public/badges/light/horse.svg
 create mode 100644 client/public/badges/light/ignition.svg
 create mode 100644 client/public/badges/light/intercept.svg
 create mode 100644 client/public/badges/light/jupiter.svg
 create mode 100644 client/public/badges/light/leo.svg
 create mode 100644 client/public/badges/light/libra.svg
 create mode 100644 client/public/badges/light/lockon.svg
 create mode 100644 client/public/badges/light/matrix.svg
 create mode 100644 client/public/badges/light/mercury.svg
 create mode 100644 client/public/badges/light/monkey.svg
 create mode 100644 client/public/badges/light/moon.svg
 create mode 100644 client/public/badges/light/mystic.svg
 create mode 100644 client/public/badges/light/nebula.svg
 create mode 100644 client/public/badges/light/neptune.svg
 create mode 100644 client/public/badges/light/nexus.svg
 create mode 100644 client/public/badges/light/omega.svg
 create mode 100644 client/public/badges/light/oracle.svg
 create mode 100644 client/public/badges/light/overload.svg
 create mode 100644 client/public/badges/light/overwatch.svg
 create mode 100644 client/public/badges/light/ox.svg
 create mode 100644 client/public/badges/light/paladin.svg
 create mode 100644 client/public/badges/light/paradox.svg
 create mode 100644 client/public/badges/light/phalanx.svg
 create mode 100644 client/public/badges/light/pig.svg
 create mode 100644 client/public/badges/light/pisces.svg
 create mode 100644 client/public/badges/light/plasma.svg
 create mode 100644 client/public/badges/light/pluto.svg
 create mode 100644 client/public/badges/light/pulsar.svg
 create mode 100644 client/public/badges/light/pulse.svg
 create mode 100644 client/public/badges/light/quantum.svg
 create mode 100644 client/public/badges/light/rabbit.svg
 create mode 100644 client/public/badges/light/radar.svg
 create mode 100644 client/public/badges/light/radiance.svg
 create mode 100644 client/public/badges/light/rat.svg
 create mode 100644 client/public/badges/light/recon.svg
 create mode 100644 client/public/badges/light/rooster.svg
 create mode 100644 client/public/badges/light/rune.svg
 create mode 100644 client/public/badges/light/sagittarius.svg
 create mode 100644 client/public/badges/light/scorpio.svg
 create mode 100644 client/public/badges/light/sentinel.svg
 create mode 100644 client/public/badges/light/sigil.svg
 create mode 100644 client/public/badges/light/snake.svg
 create mode 100644 client/public/badges/light/sniper.svg
 create mode 100644 client/public/badges/light/solaris.svg
 create mode 100644 client/public/badges/light/strike.svg
 create mode 100644 client/public/badges/light/taurus.svg
 create mode 100644 client/public/badges/light/tiger.svg
 create mode 100644 client/public/badges/light/titan.svg
 create mode 100644 client/public/badges/light/tracer.svg
 create mode 100644 client/public/badges/light/ultra.svg
 create mode 100644 client/public/badges/light/uranus.svg
 create mode 100644 client/public/badges/light/vanguard.svg
 create mode 100644 client/public/badges/light/virgo.svg
 create mode 100644 client/public/badges/light/vortex.svg
 create mode 100644 client/public/badges/light/ward.svg
 create mode 100644 client/public/badges/light/wormhole.svg
 create mode 100644 client/public/icons/peer.svg
 create mode 100644 client/public/icons/prime.svg
 create mode 100644 client/public/icons/pro.svg
 create mode 100644 client/public/incudal_logo.webp
 create mode 100644 client/public/sw.js
 create mode 100644 client/public/tos/en.md
 create mode 100644 client/public/tos/zh.md
 create mode 100644 client/src/App.vue
 create mode 100644 client/src/api/index.ts
 create mode 100644 client/src/components/BackupManager.vue
 create mode 100644 client/src/components/BadgeImage.vue
 create mode 100644 client/src/components/CheckinModal.vue
 create mode 100644 client/src/components/FlagIcon.vue
 create mode 100644 client/src/components/InstanceDisplayIcon.vue
 create mode 100644 client/src/components/InstanceSelector.vue
 create mode 100644 client/src/components/LazyImage.vue
 create mode 100644 client/src/components/LoadingSpinner.vue
 create mode 100644 client/src/components/NotificationBell.vue
 create mode 100644 client/src/components/PackageQuotaReleaseModal.vue
 create mode 100644 client/src/components/PopupAnnouncementModal.vue
 create mode 100644 client/src/components/SensitiveVerificationModal.vue
 create mode 100644 client/src/components/Skeleton.vue
 create mode 100644 client/src/components/SkeletonLoader.vue
 create mode 100644 client/src/components/SnapshotManager.vue
 create mode 100644 client/src/components/TermsOfServiceModal.vue
 create mode 100644 client/src/components/Toast.vue
 create mode 100644 client/src/components/ToastContainer.vue
 create mode 100644 client/src/components/TurnstileWidget.vue
 create mode 100644 client/src/components/UserAvatar.vue
 create mode 100644 client/src/components/VirtualList.vue
 create mode 100644 client/src/components/admin/BillingOverviewIcon.vue
 create mode 100644 client/src/components/admin/VipBenefitHallSettings.vue
 create mode 100644 client/src/components/admin/VipLevelRulesEditor.vue
 create mode 100644 client/src/components/entertainment/BadgeBatchRewardModal.vue
 create mode 100644 client/src/components/entertainment/BadgeCenter.vue
 create mode 100644 client/src/components/entertainment/BadgeRewardModal.vue
 create mode 100644 client/src/components/entertainment/VipBenefitHall.vue
 create mode 100644 client/src/components/extensions/InitCommandDetailModal.vue
 create mode 100644 client/src/components/extensions/InitCommandModal.vue
 create mode 100644 client/src/components/extensions/InitCommandSelector.vue
 create mode 100644 client/src/components/host/BatchConfigModal.vue
 create mode 100644 client/src/components/host/HostCaddyTab.vue
 create mode 100644 client/src/components/host/HostCreateInstanceTab.vue
 create mode 100644 client/src/components/host/HostImagesTab.vue
 create mode 100644 client/src/components/host/HostInfoTab.vue
 create mode 100644 client/src/components/host/HostInstancesList.vue
 create mode 100644 client/src/components/host/HostInstancesTab.vue
 create mode 100644 client/src/components/host/HostOpsTab.vue
 create mode 100644 client/src/components/host/HostRedeemCodesTab.vue
 create mode 100644 client/src/components/host/HostStorageTab.vue
 create mode 100644 client/src/components/host/MigrateHostModal.vue
 create mode 100644 client/src/components/host/MyHostConfigTab.vue
 create mode 100644 client/src/components/icons/AnnouncementIcon.vue
 create mode 100644 client/src/components/icons/DistroIcon.vue
 create mode 100644 client/src/components/instance/ChangeHostCard.vue
 create mode 100644 client/src/components/instance/HostSelector.vue
 create mode 100644 client/src/components/instance/ImageSelector.vue
 create mode 100644 client/src/components/instance/InstanceBadgeModal.vue
 create mode 100644 client/src/components/instance/InstanceConfigTab.vue
 create mode 100644 client/src/components/instance/InstanceInfoTab.vue
 create mode 100644 client/src/components/instance/InstanceLogsTab.vue
 create mode 100644 client/src/components/instance/InstanceNetworkTab.vue
 create mode 100644 client/src/components/instance/InstanceOrderMenu.vue
 create mode 100644 client/src/components/instance/InstanceQuotaTab.vue
 create mode 100644 client/src/components/instance/InstanceSitesTab.vue
 create mode 100644 client/src/components/instance/PackageSelector.vue
 create mode 100644 client/src/components/instance/PlanSelector.vue
 create mode 100644 client/src/components/instance/RegionSelector.vue
 create mode 100644 client/src/components/instance/ResourceSlider.vue
 create mode 100644 client/src/components/instance/ResourceSliders.vue
 create mode 100644 client/src/components/instance/SSHKeySelector.vue
 create mode 100644 client/src/components/instance/TerminalAccessoryBar.vue
 create mode 100644 client/src/components/instance/TerminalContextMenu.vue
 create mode 100644 client/src/components/instance/TerminalModal.vue
 create mode 100644 client/src/components/instance/TrafficStats.vue
 create mode 100644 client/src/components/instance/modals/AddPortModal.vue
 create mode 100644 client/src/components/instance/modals/ApplyAffCodeModal.vue
 create mode 100644 client/src/components/instance/modals/ChangePlanModal.vue
 create mode 100644 client/src/components/instance/modals/ConfigEditModal.vue
 create mode 100644 client/src/components/instance/modals/DestroyInstanceModal.vue
 create mode 100644 client/src/components/instance/modals/PortConflictModal.vue
 create mode 100644 client/src/components/instance/modals/RebuildModal.vue
 create mode 100644 client/src/components/instance/modals/RecreateModal.vue
 create mode 100644 client/src/components/instance/modals/RenewModal.vue
 create mode 100644 client/src/components/instance/modals/TransferModal.vue
 create mode 100644 client/src/components/layout/AppLayout.vue
 create mode 100644 client/src/components/layout/SideNav.vue
 create mode 100644 client/src/components/profile/AccountSection.vue
 create mode 100644 client/src/components/profile/BillingSection.vue
 create mode 100644 client/src/components/profile/ChangeEmailModal.vue
 create mode 100644 client/src/components/profile/LoginHistorySection.vue
 create mode 100644 client/src/components/profile/NotificationSection.vue
 create mode 100644 client/src/components/profile/OAuthSection.vue
 create mode 100644 client/src/components/profile/PasswordSection.vue
 create mode 100644 client/src/components/profile/SSHKeysSection.vue
 create mode 100644 client/src/components/profile/StorageSection.vue
 create mode 100644 client/src/components/profile/TelegramBindingSection.vue
 create mode 100644 client/src/components/profile/TwoFactorSection.vue
 create mode 100644 client/src/components/public/PublicAuthShell.vue
 create mode 100644 client/src/components/public/PublicSiteFooter.vue
 create mode 100644 client/src/components/public/PublicSiteHeader.vue
 create mode 100644 client/src/components/public/PublicSiteLayout.vue
 create mode 100644 client/src/components/terminal/TerminalSavedCommandsSidebar.vue
 create mode 100644 client/src/components/tickets/TicketImageLightbox.vue
 create mode 100644 client/src/components/tickets/TicketImageUploader.vue
 create mode 100644 client/src/components/tickets/TicketInstanceOwnerCard.vue
 create mode 100644 client/src/composables/useBrand.ts
 create mode 100644 client/src/composables/useM3Auth.ts
 create mode 100644 client/src/composables/usePageSeo.ts
 create mode 100644 client/src/composables/useTerminal.ts
 create mode 100644 client/src/composables/useTurnstile.ts
 create mode 100644 client/src/constants/adminSettings.ts
 create mode 100644 client/src/data/funnyQuotes.ts
 create mode 100644 client/src/env.d.ts
 create mode 100644 client/src/lib/terminal-core.ts
 create mode 100644 client/src/locales/en.ts
 create mode 100644 client/src/locales/index.ts
 create mode 100644 client/src/locales/zh-CN.ts
 create mode 100644 client/src/locales/zh-TW.ts
 create mode 100644 client/src/main.ts
 create mode 100644 client/src/router/index.ts
 create mode 100644 client/src/stores/auth.ts
 create mode 100644 client/src/stores/badges.ts
 create mode 100644 client/src/stores/config.ts
 create mode 100644 client/src/stores/inbox.ts
 create mode 100644 client/src/stores/restoreTask.ts
 create mode 100644 client/src/stores/terminal.ts
 create mode 100644 client/src/stores/theme.ts
 create mode 100644 client/src/stores/toast.ts
 create mode 100644 client/src/styles/main.css
 create mode 100644 client/src/types/api.ts
 create mode 100644 client/src/types/router.ts
 create mode 100644 client/src/types/store.ts
 create mode 100644 client/src/utils/billing.ts
 create mode 100644 client/src/utils/countryDisplay.ts
 create mode 100644 client/src/utils/errorHandler.ts
 create mode 100644 client/src/utils/formatters.ts
 create mode 100644 client/src/utils/freeSiteFun.ts
 create mode 100644 client/src/utils/inboxHelper.ts
 create mode 100644 client/src/utils/markdown.ts
 create mode 100644 client/src/utils/publicCatalog.ts
 create mode 100644 client/src/utils/turnstile.ts
 create mode 100644 client/src/utils/validation.ts
 create mode 100644 client/src/utils/vipBadge.ts
 create mode 100644 client/src/views/DashboardView.vue
 create mode 100644 client/src/views/EntertainmentView.vue
 create mode 100644 client/src/views/ExtensionsView.vue
 create mode 100644 client/src/views/ForgotPasswordView.vue
 create mode 100644 client/src/views/FriendsView.vue
 create mode 100644 client/src/views/HelpView.vue
 create mode 100644 client/src/views/HostingWalletView.vue
 create mode 100644 client/src/views/InboxView.vue
 create mode 100644 client/src/views/InstanceCreateView.vue
 create mode 100644 client/src/views/InstanceDetailView.vue
 create mode 100644 client/src/views/InstancesView.vue
 create mode 100644 client/src/views/InvitesView.vue
 create mode 100644 client/src/views/LoginView.vue
 create mode 100644 client/src/views/LogsView.vue
 create mode 100644 client/src/views/MailDomainView.vue
 create mode 100644 client/src/views/MailView.vue
 create mode 100644 client/src/views/MarketView.vue
 create mode 100644 client/src/views/NotFoundView.vue
 create mode 100644 client/src/views/PortalView.vue
 create mode 100644 client/src/views/ProfileView.vue
 create mode 100644 client/src/views/RegisterView.vue
 create mode 100644 client/src/views/TerminalView.vue
 create mode 100644 client/src/views/TicketsView.vue
 create mode 100644 client/src/views/TransfersView.vue
 create mode 100644 client/src/views/WalletView.vue
 create mode 100644 client/src/views/admin/AdminInstanceCreateView.vue
 create mode 100644 client/src/views/admin/AdminMailView.vue
 create mode 100644 client/src/views/admin/AffReviewView.vue
 create mode 100644 client/src/views/admin/BillingView.vue
 create mode 100644 client/src/views/admin/BroadcastView.vue
 create mode 100644 client/src/views/admin/EntertainmentView.vue
 create mode 100644 client/src/views/admin/HelpManageView.vue
 create mode 100644 client/src/views/admin/HostingView.vue
 create mode 100644 client/src/views/admin/ImagesView.vue
 create mode 100644 client/src/views/admin/OAuthConfigView.vue
 create mode 100644 client/src/views/admin/PaymentProvidersView.vue
 create mode 100644 client/src/views/admin/StatisticsView.vue
 create mode 100644 client/src/views/admin/SystemConfigView.vue
 create mode 100644 client/src/views/admin/TelegramConfigView.vue
 create mode 100644 client/src/views/admin/UsersView.vue
 create mode 100644 client/src/views/resources/MyHostCreateView.vue
 create mode 100644 client/src/views/resources/MyHostDetailView.vue
 create mode 100644 client/src/views/resources/MyHostsView.vue
 create mode 100644 client/src/views/resources/MyPackagesView.vue
 create mode 100644 client/src/views/resources/PackageFormView.vue
 create mode 100644 client/tailwind.config.js
 create mode 100644 client/tsconfig.json
 create mode 100644 client/tsconfig.node.json
 create mode 100644 client/vite.config.ts
 create mode 100644 docker-compose.dev.yml
 create mode 100644 docker-compose.yml
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 scripts/generate-badges-from-html.mjs
 create mode 100644 scripts/init-env.sh
 create mode 100644 scripts/install-docker.sh
 create mode 100644 scripts/install-panel.sh
 create mode 100644 scripts/local-ci-macos.sh
 create mode 100644 scripts/local-ci.ps1
 create mode 100644 scripts/watch-migrations.mjs
 create mode 100644 server/certs/.gitkeep
 create mode 100644 server/docker-entrypoint.sh
 create mode 100644 server/package-lock.json
 create mode 100644 server/package.json
 create mode 100644 server/prisma.config.ts
 create mode 100644 server/prisma/migrations/20241209000000_add_email_verification_codes/migration.sql
 create mode 100644 server/prisma/migrations/20251206045256_init/migration.sql
 create mode 100644 server/prisma/migrations/20251206110301_add_2fa_fields/migration.sql
 create mode 100644 server/prisma/migrations/20251206120241_add_2fa_recovery_codes/migration.sql
 create mode 100644 server/prisma/migrations/20251207072151_add_host_init_fields/migration.sql
 create mode 100644 server/prisma/migrations/20251207123655_add_system_config/migration.sql
 create mode 100644 server/prisma/migrations/20251208050057_add_traffic_quota/migration.sql
 create mode 100644 server/prisma/migrations/20251208054106_add_package_traffic_limit/migration.sql
 create mode 100644 server/prisma/migrations/20251208072207_add_restore_task_model/migration.sql
 create mode 100644 server/prisma/migrations/20251208084341_add_storage_and_upload_tasks/migration.sql
 create mode 100644 server/prisma/migrations/20251208090039_add_storage_config_index/migration.sql
 create mode 100644 server/prisma/migrations/20251208120000_add_instance_transfer/migration.sql
 create mode 100644 server/prisma/migrations/20251208140941_add_avatar_style/migration.sql
 create mode 100644 server/prisma/migrations/20251208154011_add_port_mapping_remark/migration.sql
 create mode 100644 server/prisma/migrations/20251209000000_add_user_ownership_and_friendship/migration.sql
 create mode 100644 server/prisma/migrations/20251209022207_add_friendship_remark_and_rejected/migration.sql
 create mode 100644 server/prisma/migrations/20251209064035_add_package_shares/migration.sql
 create mode 100644 server/prisma/migrations/20251209073625_add_host_install_config/migration.sql
 create mode 100644 server/prisma/migrations/20251209110000_refactor_quota_system/migration.sql
 create mode 100644 server/prisma/migrations/20251209120000_cleanup_old_quota_configs/migration.sql
 create mode 100644 server/prisma/migrations/20251210133511_replace_node_group_with_package_host/migration.sql
 create mode 100644 server/prisma/migrations/20251211000000_simplify_host_images/migration.sql
 create mode 100644 server/prisma/migrations/20251211045923_add_package_advanced_config/migration.sql
 create mode 100644 server/prisma/migrations/20251211045937_add_package_advanced_config/migration.sql
 create mode 100644 server/prisma/migrations/20251211060512_remove_host_images/migration.sql
 create mode 100644 server/prisma/migrations/20251211060523_remove_host_images/migration.sql
 create mode 100644 server/prisma/migrations/20251211071708_add_ip_address_table/migration.sql
 create mode 100644 server/prisma/migrations/20251211145415_add_token_invalidation/migration.sql
 create mode 100644 server/prisma/migrations/20251211151239_add_friendship_removed_status/migration.sql
 create mode 100644 server/prisma/migrations/20251212152400_remove_cpu_memory_disk_total_fields/migration.sql
 create mode 100644 server/prisma/migrations/20251212205000_add_queue_progress_and_retry/migration.sql
 create mode 100644 server/prisma/migrations/20251212221500_add_cert_download_count/migration.sql
 create mode 100644 server/prisma/migrations/20251212221600_add_operation_verification_and_locks/migration.sql
 create mode 100644 server/prisma/migrations/20251213000000_add_network_mode_and_system_images/migration.sql
 create mode 100644 server/prisma/migrations/20251213100000_refactor_auto_policy_intervals/migration.sql
 create mode 100644 server/prisma/migrations/20251214084943_add_port_mapping_unique_constraint/migration.sql
 create mode 100644 server/prisma/migrations/20251214090959_add_package_share_quota_fields/migration.sql
 create mode 100644 server/prisma/migrations/20251214115302_add_package_instance_type/migration.sql
 create mode 100644 server/prisma/migrations/20251214200000_add_system_image_instance_type/migration.sql
 create mode 100644 server/prisma/migrations/20251215081921_ipv6_routed_mode/migration.sql
 create mode 100644 server/prisma/migrations/20251216162514_add_storage_pools/migration.sql
 create mode 100644 server/prisma/migrations/20251217135047_add_caddy_proxy_sites/migration.sql
 create mode 100644 server/prisma/migrations/20251217142200_add_site_limit/migration.sql
 create mode 100644 server/prisma/migrations/20251218042321_add_https_enabled_to_proxy_sites/migration.sql
 create mode 100644 server/prisma/migrations/20251221104032_add_package_quota_and_update_defaults/migration.sql
 create mode 100644 server/prisma/migrations/20251221125025_add_global_shared_to_package/migration.sql
 create mode 100644 server/prisma/migrations/20251221135737_add_allow_instance_deletion_to_package/migration.sql
 create mode 100644 server/prisma/migrations/20251221141834_change_allow_instance_deletion_default_to_false/migration.sql
 create mode 100644 server/prisma/migrations/20251221194038_remove_instance_quota_and_add_pinned/migration.sql
 create mode 100644 server/prisma/migrations/20251227014516_add_ban_reason/migration.sql
 create mode 100644 server/prisma/migrations/20251227054559_add_inbox_message/migration.sql
 create mode 100644 server/prisma/migrations/20251227063752_add_package_release_channel/migration.sql
 create mode 100644 server/prisma/migrations/20251227085332_add_instance_task/migration.sql
 create mode 100644 server/prisma/migrations/20251227113416_add_proxy_site_remark/migration.sql
 create mode 100644 server/prisma/migrations/20251227123500_add_login_record/migration.sql
 create mode 100644 server/prisma/migrations/20251227151951_add_last_synced_at/migration.sql
 create mode 100644 server/prisma/migrations/20251228075452_add_ssh_key_id_to_instance_task/migration.sql
 create mode 100644 server/prisma/migrations/20251229000000_add_transfer_processing_status/migration.sql
 create mode 100644 server/prisma/migrations/20260101100908_add_ticket_system/migration.sql
 create mode 100644 server/prisma/migrations/20260101100917_add_ticket_system/migration.sql
 create mode 100644 server/prisma/migrations/20260101163409_add_checkin_system/migration.sql
 create mode 100644 server/prisma/migrations/20260103130305_add_redeem_codes/migration.sql
 create mode 100644 server/prisma/migrations/20260103140651_add_redeem_code_batch_id/migration.sql
 create mode 100644 server/prisma/migrations/20260103141836_add_batch_id_to_usage/migration.sql
 create mode 100644 server/prisma/migrations/20260103_add_billing_and_suspend_fields/migration.sql
 create mode 100644 server/prisma/migrations/20260106000000_add_custom_init_commands/migration.sql
 create mode 100644 server/prisma/migrations/20260106190000_add_last_ipv6_reassign_at/migration.sql
 create mode 100644 server/prisma/migrations/20260110000000_add_host_transfer_enabled/migration.sql
 create mode 100644 server/prisma/migrations/20260111_add_billing_system/migration.sql
 create mode 100644 server/prisma/migrations/20260113000000_replace_stock_with_sla_guarantee/migration.sql
 create mode 100644 server/prisma/migrations/20260115000000_add_aff_system/migration.sql
 create mode 100644 server/prisma/migrations/20260117000000_add_payment_callback_table/migration.sql
 create mode 100644 server/prisma/migrations/20260117000000_ticket_optional_host/migration.sql
 create mode 100644 server/prisma/migrations/20260118000000_add_last_plan_change_at/migration.sql
 create mode 100644 server/prisma/migrations/20260121000000_add_global_aff_code/migration.sql
 create mode 100644 server/prisma/migrations/20260130000000_add_host_traffic_reset_day/migration.sql
 create mode 100644 server/prisma/migrations/20260130200000_add_entertainment_lottery_tables/migration.sql
 create mode 100644 server/prisma/migrations/20260202000000_add_checkin_to_points_log_type/migration.sql
 create mode 100644 server/prisma/migrations/20260210000000_add_recreate_task_type/migration.sql
 create mode 100644 server/prisma/migrations/20260210000001_add_recreate_operation_type/migration.sql
 create mode 100644 server/prisma/migrations/20260222140000_add_transfer_fee/migration.sql
 create mode 100644 server/prisma/migrations/20260222150000_add_transfer_fee_to_billing_record_type/migration.sql
 create mode 100644 server/prisma/migrations/20260222160000_add_host_announcement/migration.sql
 create mode 100644 server/prisma/migrations/20260222170000_add_resource_pool/migration.sql
 create mode 100644 server/prisma/migrations/20260222180000_add_lottery_resource_prizes_and_system_redeem/migration.sql
 create mode 100644 server/prisma/migrations/20260222190000_add_user_destroy_record/migration.sql
 create mode 100644 server/prisma/migrations/20260222200000_add_hosting_balance_system/migration.sql
 create mode 100644 server/prisma/migrations/20260222210000_add_hosting_deduction_type/migration.sql
 create mode 100644 server/prisma/migrations/20260222220000_add_hosting_deduction_enum/migration.sql
 create mode 100644 server/prisma/migrations/20260309000000_add_hosting_action_type/migration.sql
 create mode 100644 server/prisma/migrations/20260310000000_add_host_enable_resource_pool/migration.sql
 create mode 100644 server/prisma/migrations/20260311000000_add_hosting_withdraw_balance_log_type/migration.sql
 create mode 100644 server/prisma/migrations/20260312000000_add_admin_adjust_action_type/migration.sql
 create mode 100644 server/prisma/migrations/20260312000001_add_host_probe_url/migration.sql
 create mode 100644 server/prisma/migrations/20260313000000_add_mail_module/migration.sql
 create mode 100644 server/prisma/migrations/20260314000000_add_mail_aff_support/migration.sql
 create mode 100644 server/prisma/migrations/20260318000000_add_hosting_log_snapshot_fields/migration.sql
 create mode 100644 server/prisma/migrations/20260324000000_add_notification_channel_is_global/migration.sql
 create mode 100644 server/prisma/migrations/20260328000000_add_io_limit_mode/migration.sql
 create mode 100644 server/prisma/migrations/20260406090000_add_host_architecture_and_allowed_images/migration.sql
 create mode 100644 server/prisma/migrations/20260406110000_add_host_notification_email_queue/migration.sql
 create mode 100644 server/prisma/migrations/20260407100000_add_host_address_registry/migration.sql
 create mode 100644 server/prisma/migrations/20260407103000_add_host_notification_preferences/migration.sql
 create mode 100644 server/prisma/migrations/20260409123000_add_instance_cloud_init_state/migration.sql
 create mode 100644 server/prisma/migrations/20260410093000_add_instance_swap_support/migration.sql
 create mode 100644 server/prisma/migrations/20260412093000_add_terminal_saved_commands/migration.sql
 create mode 100644 server/prisma/migrations/20260412113000_add_badge_system/migration.sql
 create mode 100644 server/prisma/migrations/20260413143000_add_lottery_badge_prize_type/migration.sql
 create mode 100644 server/prisma/migrations/20260413150000_expand_network_mode_enum/migration.sql
 create mode 100644 server/prisma/migrations/20260414040844_add_host_nat_public_ipv6/migration.sql
 create mode 100644 server/prisma/migrations/20260416000000_add_storage_pool_selection/migration.sql
 create mode 100644 server/prisma/migrations/20260417110000_add_ticket_message_attachments/migration.sql
 create mode 100644 server/prisma/migrations/20260421090000_add_host_bind_addresses/migration.sql
 create mode 100644 server/prisma/migrations/20260424103000_relax_ip_address_uniqueness/migration.sql
 create mode 100644 server/prisma/migrations/20260424113000_restore_scoped_ip_uniqueness/migration.sql
 create mode 100644 server/prisma/migrations/20260424114000_add_hosting_feature_visibility/migration.sql
 create mode 100644 server/prisma/migrations/20260425114500_add_hosting_user_blocks/migration.sql
 create mode 100644 server/prisma/migrations/20260426102000_add_heleket_payment_provider_type/migration.sql
 create mode 100644 server/prisma/migrations/20260426134000_add_recharge_snapshot_and_payment_details/migration.sql
 create mode 100644 server/prisma/migrations/20260427090000_add_telegram_user_binding/migration.sql
 create mode 100644 server/prisma/migrations/20260427143000_add_telegram_group_join_configs/migration.sql
 create mode 100644 server/prisma/migrations/20260427170000_add_telegram_vip_group_configs/migration.sql
 create mode 100644 server/prisma/migrations/20260427190000_add_instance_audit_tables/migration.sql
 create mode 100644 server/prisma/migrations/20260427193000_add_instance_audit_builtin_rule_overrides/migration.sql
 create mode 100644 server/prisma/migrations/20260428110000_add_host_agent_identity/migration.sql
 create mode 100644 server/prisma/migrations/20260428233000_add_change_host_task_type/migration.sql
 create mode 100644 server/prisma/migrations/20260429080000_add_host_agent_install_token/migration.sql
 create mode 100644 server/prisma/migrations/20260429120000_add_package_plan_sold_out/migration.sql
 create mode 100644 server/prisma/migrations/20260501090000_add_package_host_traffic_multiplier/migration.sql
 create mode 100644 server/prisma/migrations/20260501133000_add_log_instance_id/migration.sql
 create mode 100644 server/prisma/migrations/20260504120000_add_hosting_zones/migration.sql
 create mode 100644 server/prisma/migrations/20260504123000_rename_hosting_zone_logo_url/migration.sql
 create mode 100644 server/prisma/migrations/20260504160000_add_instance_display_order/migration.sql
 create mode 100644 server/prisma/migrations/20260505090000_add_package_prerequisite/migration.sql
 create mode 100644 server/prisma/migrations/20260505170000_harden_instance_destroy_idempotency/migration.sql
 create mode 100644 server/prisma/migrations/20260522090000_add_user_invite_costs/migration.sql
 create mode 100644 server/prisma/migrations/20260522100000_enable_package_instance_deletion_default/migration.sql
 create mode 100644 server/prisma/migrations/20260614120000_add_vip_level_rules/migration.sql
 create mode 100644 server/prisma/migrations/20260615090000_add_user_vip_metric_config/migration.sql
 create mode 100644 server/prisma/migrations/20260616120000_add_vip_benefit_hall/migration.sql
 create mode 100644 server/prisma/migrations/20260619193000_refresh_default_system_images/migration.sql
 create mode 100644 server/prisma/migrations/20260619210000_add_hosting_market_entry_config/migration.sql
 create mode 100644 server/prisma/migrations/20260620110000_add_dynamic_badge_catalog/migration.sql
 create mode 100644 server/prisma/migrations/migration_lock.toml
 create mode 100644 server/prisma/schema.prisma
 create mode 100644 server/scripts/backfill-instance-network-addresses.ts
 create mode 100644 server/scripts/fix-migrated-instance-billing.ts
 create mode 100644 server/scripts/seed-bulk-local-data.ts
 create mode 100644 server/scripts/seed-test-data.ts
 create mode 100644 server/scripts/test-agent-auth.ts
 create mode 100644 server/scripts/test-security-config.ts
 create mode 100644 server/src/app.ts
 create mode 100644 server/src/config/badges.generated.json
 create mode 100644 server/src/config/badges.generated.ts
 create mode 100644 server/src/config/badges.ts
 create mode 100644 server/src/config/rate-limit.ts
 create mode 100644 server/src/config/system-images.ts
 create mode 100644 server/src/db/advisory-locks.ts
 create mode 100644 server/src/db/aff.ts
 create mode 100644 server/src/db/announcements.ts
 create mode 100644 server/src/db/backup-upload-tasks.ts
 create mode 100644 server/src/db/backups.ts
 create mode 100644 server/src/db/badges.ts
 create mode 100644 server/src/db/balance.ts
 create mode 100644 server/src/db/billing-operations.ts
 create mode 100644 server/src/db/billing-records.ts
 create mode 100644 server/src/db/checkin.ts
 create mode 100644 server/src/db/custom-init-commands.ts
 create mode 100644 server/src/db/email-verification.ts
 create mode 100644 server/src/db/friendships.ts
 create mode 100644 server/src/db/help.ts
 create mode 100644 server/src/db/host-addresses.ts
 create mode 100644 server/src/db/host-notification-email-tasks.ts
 create mode 100644 server/src/db/hosting-blocks.ts
 create mode 100644 server/src/db/hosts.ts
 create mode 100644 server/src/db/images.ts
 create mode 100644 server/src/db/inbox.ts
 create mode 100644 server/src/db/index.ts
 create mode 100644 server/src/db/init-prisma.ts
 create mode 100644 server/src/db/instance-suspend.ts
 create mode 100644 server/src/db/instance-tasks.ts
 create mode 100644 server/src/db/instances.ts
 create mode 100644 server/src/db/invite-codes.ts
 create mode 100644 server/src/db/ip-addresses.ts
 create mode 100644 server/src/db/ipv6-subnets.ts
 create mode 100644 server/src/db/login-records.ts
 create mode 100644 server/src/db/logs.ts
 create mode 100644 server/src/db/lottery.ts
 create mode 100644 server/src/db/mail.ts
 create mode 100644 server/src/db/notifications.ts
 create mode 100644 server/src/db/oauth.ts
 create mode 100644 server/src/db/optimizations.ts
 create mode 100644 server/src/db/package-hosts.ts
 create mode 100644 server/src/db/package-plans.ts
 create mode 100644 server/src/db/package-shares.ts
 create mode 100644 server/src/db/packages.ts
 create mode 100644 server/src/db/pagination.ts
 create mode 100644 server/src/db/payment-providers.ts
 create mode 100644 server/src/db/points.ts
 create mode 100644 server/src/db/port-mappings.ts
 create mode 100644 server/src/db/prisma.ts
 create mode 100644 server/src/db/proxy-sites.ts
 create mode 100644 server/src/db/quota-operations.ts
 create mode 100644 server/src/db/recharge-records.ts
 create mode 100644 server/src/db/redeem-codes.ts
 create mode 100644 server/src/db/reset-database.ts
 create mode 100644 server/src/db/resource-pool.ts
 create mode 100644 server/src/db/restore-tasks.ts
 create mode 100644 server/src/db/snapshots.ts
 create mode 100644 server/src/db/ssh-keys.ts
 create mode 100644 server/src/db/storage-configs.ts
 create mode 100644 server/src/db/storage-pools.ts
 create mode 100644 server/src/db/system-config.ts
 create mode 100644 server/src/db/terminal-saved-commands.ts
 create mode 100644 server/src/db/tickets.ts
 create mode 100644 server/src/db/traffic.ts
 create mode 100644 server/src/db/transfers.ts
 create mode 100644 server/src/db/users.ts
 create mode 100644 server/src/lib/action-ticket.ts
 create mode 100644 server/src/lib/agent-auth.ts
 create mode 100644 server/src/lib/architecture.ts
 create mode 100644 server/src/lib/billing-calc.ts
 create mode 100644 server/src/lib/caddy-client.ts
 create mode 100644 server/src/lib/cloud-init-status.ts
 create mode 100644 server/src/lib/config-cache.ts
 create mode 100644 server/src/lib/cookie-config.ts
 create mode 100644 server/src/lib/cpu-allowance.ts
 create mode 100644 server/src/lib/distributed-lock.ts
 create mode 100644 server/src/lib/download-token.ts
 create mode 100644 server/src/lib/email-domain.ts
 create mode 100644 server/src/lib/epay.ts
 create mode 100644 server/src/lib/errors.ts
 create mode 100644 server/src/lib/geoip.ts
 create mode 100644 server/src/lib/heleket.ts
 create mode 100644 server/src/lib/host-agent-credentials.ts
 create mode 100644 server/src/lib/hosting-access.ts
 create mode 100644 server/src/lib/incus-config-container.ts
 create mode 100644 server/src/lib/incus-config-generator.ts
 create mode 100644 server/src/lib/incus-config-vm.ts
 create mode 100644 server/src/lib/incus/host-health.ts
 create mode 100644 server/src/lib/incus/incus-backups.ts
 create mode 100644 server/src/lib/incus/incus-client.ts
 create mode 100644 server/src/lib/incus/incus-images.ts
 create mode 100644 server/src/lib/incus/incus-instances.ts
 create mode 100644 server/src/lib/incus/incus-network.ts
 create mode 100644 server/src/lib/incus/incus-pool.ts
 create mode 100644 server/src/lib/incus/incus-restore.ts
 create mode 100644 server/src/lib/incus/incus-snapshots.ts
 create mode 100644 server/src/lib/incus/incus-storage.ts
 create mode 100644 server/src/lib/incus/incus-traffic.ts
 create mode 100644 server/src/lib/incus/incus-utils.ts
 create mode 100644 server/src/lib/incus/index.ts
 create mode 100644 server/src/lib/instance-audit.ts
 create mode 100644 server/src/lib/instance-network-sync.ts
 create mode 100644 server/src/lib/instance-swap.ts
 create mode 100644 server/src/lib/invite-pricing.ts
 create mode 100644 server/src/lib/ip-calculator.ts
 create mode 100644 server/src/lib/log-sanitizer.ts
 create mode 100644 server/src/lib/lottery-notifier.ts
 create mode 100644 server/src/lib/lsky.ts
 create mode 100644 server/src/lib/mailer.ts
 create mode 100644 server/src/lib/managed-instance-provision.ts
 create mode 100644 server/src/lib/network-address.ts
 create mode 100644 server/src/lib/network-payload-builder.ts
 create mode 100644 server/src/lib/notifier.ts
 create mode 100644 server/src/lib/operation-verification.ts
 create mode 100644 server/src/lib/outbound-security.ts
 create mode 100644 server/src/lib/permission.ts
 create mode 100644 server/src/lib/proxy/IProxyStrategy.ts
 create mode 100644 server/src/lib/proxy/KvmProxyStrategy.ts
 create mode 100644 server/src/lib/proxy/LxcProxyStrategy.ts
 create mode 100644 server/src/lib/proxy/index.ts
 create mode 100644 server/src/lib/recharge-payment-details.ts
 create mode 100644 server/src/lib/recharge-provider-snapshot.ts
 create mode 100644 server/src/lib/redirect-validator.ts
 create mode 100644 server/src/lib/release-notifier.ts
 create mode 100644 server/src/lib/retry.ts
 create mode 100644 server/src/lib/security-config.ts
 create mode 100644 server/src/lib/security.ts
 create mode 100644 server/src/lib/terminal-proxy.ts
 create mode 100644 server/src/lib/timezone.ts
 create mode 100644 server/src/lib/traffic-multiplier.ts
 create mode 100644 server/src/lib/turnstile.ts
 create mode 100644 server/src/lib/vm-network-identifiers.ts
 create mode 100644 server/src/lib/websocket-security.ts
 create mode 100644 server/src/routes/admin-billing.ts
 create mode 100644 server/src/routes/admin-entertainment.ts
 create mode 100644 server/src/routes/admin-hosting.ts
 create mode 100644 server/src/routes/admin-notification-channels.ts
 create mode 100644 server/src/routes/admin-statistics.ts
 create mode 100644 server/src/routes/aff.ts
 create mode 100644 server/src/routes/agent.ts
 create mode 100644 server/src/routes/announcements.ts
 create mode 100644 server/src/routes/auth.ts
 create mode 100644 server/src/routes/backups.ts
 create mode 100644 server/src/routes/balance.ts
 create mode 100644 server/src/routes/batch-config.ts
 create mode 100644 server/src/routes/checkin.ts
 create mode 100644 server/src/routes/custom-init-commands.ts
 create mode 100644 server/src/routes/entertainment.ts
 create mode 100644 server/src/routes/friends.ts
 create mode 100644 server/src/routes/help.ts
 create mode 100644 server/src/routes/hosting.ts
 create mode 100644 server/src/routes/hosts.ts
 create mode 100644 server/src/routes/images.ts
 create mode 100644 server/src/routes/inbox.ts
 create mode 100644 server/src/routes/instance-billing.ts
 create mode 100644 server/src/routes/instance-destroy.ts
 create mode 100644 server/src/routes/instances.ts
 create mode 100644 server/src/routes/ip-addresses.ts
 create mode 100644 server/src/routes/logs.ts
 create mode 100644 server/src/routes/mail.ts
 create mode 100644 server/src/routes/notifications.ts
 create mode 100644 server/src/routes/oauth.ts
 create mode 100644 server/src/routes/packages.ts
 create mode 100644 server/src/routes/proxy-sites.ts
 create mode 100644 server/src/routes/recharge.ts
 create mode 100644 server/src/routes/redeem-codes.ts
 create mode 100644 server/src/routes/resource-pool.ts
 create mode 100644 server/src/routes/snapshots.ts
 create mode 100644 server/src/routes/ssh-keys.ts
 create mode 100644 server/src/routes/storage-configs.ts
 create mode 100644 server/src/routes/system-config.ts
 create mode 100644 server/src/routes/telegram.ts
 create mode 100644 server/src/routes/terminal-saved-commands.ts
 create mode 100644 server/src/routes/terminal.ts
 create mode 100644 server/src/routes/tickets.ts
 create mode 100644 server/src/routes/traffic.ts
 create mode 100644 server/src/routes/transfers.ts
 create mode 100644 server/src/routes/user-invites.ts
 create mode 100644 server/src/routes/users.ts
 create mode 100644 server/src/routes/verification.ts
 create mode 100644 server/src/routes/vip-benefits.ts
 create mode 100644 server/src/routes/vip-levels.ts
 create mode 100644 server/src/services/agent-instance-report.ts
 create mode 100644 server/src/services/auto-policy-scheduler.ts
 create mode 100644 server/src/services/billing-scheduler.ts
 create mode 100644 server/src/services/cranemail.ts
 create mode 100644 server/src/services/host-address-monitor.ts
 create mode 100644 server/src/services/hosting-scheduler.ts
 create mode 100644 server/src/services/instance-traffic-collector.ts
 create mode 100644 server/src/services/mail-expiry-scheduler.ts
 create mode 100644 server/src/services/smartermail.ts
 create mode 100644 server/src/services/status-scheduler.ts
 create mode 100644 server/src/services/system-monitor.ts
 create mode 100644 server/src/services/ticket-auto-close-scheduler.ts
 create mode 100644 server/src/services/traffic-bandwidth.ts
 create mode 100644 server/src/services/traffic-notifier.ts
 create mode 100644 server/src/services/traffic-scheduler.ts
 create mode 100644 server/src/services/traffic-utils.ts
 create mode 100644 server/src/services/vip-benefits.ts
 create mode 100644 server/src/services/vip-levels.ts
 create mode 100644 server/src/storage/factory.ts
 create mode 100644 server/src/storage/index.ts
 create mode 100644 server/src/storage/providers/FtpProvider.ts
 create mode 100644 server/src/storage/providers/SftpProvider.ts
 create mode 100644 server/src/storage/providers/WebDavProvider.ts
 create mode 100644 server/src/storage/types.ts
 create mode 100644 server/src/types/api.ts
 create mode 100644 server/src/types/database.ts
 create mode 100644 server/src/types/fastify.d.ts
 create mode 100644 server/src/types/incus.ts
 create mode 100644 server/src/workers/backupUploadWorker.ts
 create mode 100644 server/src/workers/db-failure-backoff.ts
 create mode 100644 server/src/workers/hostNotificationEmailWorker.ts
 create mode 100644 server/src/workers/instanceTaskWorker.ts
 create mode 100644 server/src/workers/restoreTaskWorker.ts
 create mode 100644 server/templates/agent-install.sh
 create mode 100644 server/templates/caddy.sh
 create mode 100644 server/templates/install.sh
 create mode 100644 server/tsconfig.json

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..125e57a
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,56 @@
+# Dependencies (will be installed in container)
+node_modules/
+**/node_modules/
+
+# Build outputs (will be built in container)
+dist/
+**/dist/
+!agent/dist/
+!agent/dist/incudal-agent-linux-amd64
+!agent/dist/incudal-agent-linux-amd64.gz
+!agent/dist/incudal-agent-linux-arm64
+!agent/dist/incudal-agent-linux-arm64.gz
+!agent/dist/manifest.json
+
+# Git
+.git/
+.gitignore
+
+# IDE
+.vscode/
+.idea/
+.cursor/
+.kiro/
+
+# Environment files
+.env
+.env.*
+server/.env
+
+# Certificates
+server/certs/*.key
+server/certs/*.crt
+server/certs/*.pem
+
+# Docs
+docs/
+*.md
+!README.md
+
+# Tests
+coverage/
+*.test.ts
+*.spec.ts
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Temporary
+tmp/
+temp/
+.cache/
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..bdd2288
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,185 @@
+
+根据分析 `docker-compose.yml`、`.env.example` 和代码中使用的环境变量，以下是完整的环境变量清单：
+
+---
+
+## Docker Compose 部署环境变量
+
+### 必需变量（必须配置）
+
+| 变量名 | 说明 | 示例值 | 生成方式 |
+|--------|------|--------|----------|
+| `POSTGRES_PASSWORD` | PostgreSQL 数据库密码 | `BJ4hbYQTLsz97zzJUGg8RFiq` | `openssl rand -base64 24` |
+| `JWT_SECRET` | JWT 签名密钥（≥32字符，至少 3 类字符） | `A1!b7e9c4d0...` | `printf 'A1!%s\n' "$(openssl rand -hex 48)" \| cut -c1-64` |
+| `ENCRYPTION_KEY` | 敏感数据加密密钥（≥32字符，需稳定保存） | `XpPc3tcVSmy4/...` | `openssl rand -base64 32` |
+
+---
+
+### 可选变量（有默认值）
+
+| 变量名 | 说明 | 默认值 |
+|--------|------|--------|
+| `POSTGRES_USER` | 数据库用户名 | `incudal` |
+| `POSTGRES_DB` | 数据库名称 | `incudal` |
+| `REDIS_PASSWORD` | Redis 密码 | 空（无密码） |
+| `APP_PORT` | 外部暴露端口 | `3000` |
+| `ADMIN_PASSWORD` | 首次初始化管理员密码 | `admin123` |
+| `LOG_LEVEL` | 日志级别 | `info` |
+| `DISABLE_REQUEST_LOG` | 禁用请求日志 | `true` |
+| `COOKIE_SECRET` | Cookie 签名密钥 | 空 |
+| `FRONTEND_URL` | 前端 URL（CORS 白名单 + 页面跳转） | 空 |
+| `PAYMENT_CALLBACK_BASE_URL` | 支付回调使用的后端公网 URL | 空（默认回退到 `FRONTEND_URL`） |
+| `PAYMENT_CALLBACK_IP_WHITELIST` | 支付回调来源 IP 白名单（逗号分隔，留空时 Heleket 默认收紧到官方 IP） | 空 |
+| `PAYMENT_CALLBACK_SKIP_IP_WHITELIST` | 跳过支付回调 IP 白名单校验（仅开发调试） | `false` |
+| `ALERT_WEBHOOK_URL` | 系统告警 Webhook URL | 空 |
+| `DB_POOL_MAX` | PostgreSQL 连接池最大连接数 | `20` |
+| `DB_POOL_MIN` | PostgreSQL 连接池最小连接数 | `5` |
+| `DB_CONNECTION_TIMEOUT` | 获取数据库连接超时（毫秒） | `5000` |
+| `DB_IDLE_TIMEOUT` | 数据库空闲连接超时（毫秒） | `30000` |
+| `DB_STATEMENT_TIMEOUT` | PostgreSQL 语句超时（毫秒） | `30000` |
+| `DB_QUERY_TIMEOUT` | PostgreSQL 查询超时（毫秒） | `30000` |
+| `TRAFFIC_CONCURRENCY_PER_HOST` | 每宿主机流量采集并发数 | `10` |
+| `TRAFFIC_HOST_CONCURRENCY` | 同时处理宿主机数量 | `3` |
+| `DB_WORKER_BACKOFF_MS` | worker 遇到数据库异常后的退避时间（毫秒） | `15000` |
+
+---
+
+### 最小 .env 配置示例
+
+可以直接自动生成或补齐缺失项：
+
+```bash
+bash scripts/init-env.sh
+```
+
+脚本只补齐缺失或空值的变量，不覆盖已有非空配置。
+
+```bash
+# ============ 必需配置 ============
+# 数据库密码 - 使用 openssl rand -base64 24 生成
+POSTGRES_PASSWORD=your_strong_password_here
+
+# JWT 密钥 - 使用下面命令生成：
+# printf 'A1!%s\n' "$(openssl rand -hex 48)" | cut -c1-64
+JWT_SECRET=your_mixed_64_char_secret_here
+
+# 敏感数据加密密钥 - 使用 openssl rand -base64 32 生成
+# 注意：上线后必须稳定保存，不能随意更换
+ENCRYPTION_KEY=your_base64_32_byte_encryption_key_here
+
+# ============ 建议配置 ============
+# 管理员初始密码（首次启动后建议立即修改）
+ADMIN_PASSWORD=your_admin_password
+
+# Redis 密码（可选但推荐）
+REDIS_PASSWORD=your_redis_password
+```
+
+---
+
+### 完整 .env 配置示例（生产环境推荐）
+
+```bash
+# ============ 数据库配置 ============
+POSTGRES_USER=incudal
+POSTGRES_PASSWORD=BJ4hbYQTLsz97zzJUGg8RFiq
+POSTGRES_DB=incudal
+
+# ============ Redis 配置 ============
+REDIS_PASSWORD=redis_password_here
+
+# ============ 安全配置（必须修改！）============
+# JWT 密钥 - 生成方式:
+# printf 'A1!%s\n' "$(openssl rand -hex 48)" | cut -c1-64
+JWT_SECRET=A1!b7e9c4d0f2a8e6b9d1c3f5a7b8d0e2c4f6a9b1d3e5c7a8f0b2d4e6c8
+
+# Cookie 签名密钥（可选，增强安全性）
+COOKIE_SECRET=another_random_string_here
+
+# 敏感数据加密密钥（2FA 等）- 生成方式: openssl rand -base64 32
+ENCRYPTION_KEY=XpPc3tcVSmy4/pxpLL40jVfMDJyayR+bE1ibamEWlys=
+
+# ============ 应用配置 ============
+APP_PORT=3000
+ADMIN_PASSWORD=QpXEZrBkDosvu7TFMcAJjbv7
+LOG_LEVEL=info
+DISABLE_REQUEST_LOG=true
+
+# ============ CORS 配置 + 页面跳转（必配！）============
+FRONTEND_URL=https://your-domain.com
+
+# ============ 支付回调（前后端分域时必配）============
+# 第三方支付平台回调到后端时使用的公网地址
+# 例如前端为 https://panel.example.com，后端为 https://api.example.com
+# 则这里应配置为 https://api.example.com
+PAYMENT_CALLBACK_BASE_URL=https://api.your-domain.com
+
+# 支付回调来源 IP 白名单（逗号分隔）
+# 留空时 Heleket 默认仅允许官方文档中的 webhook IP：31.133.220.8
+# PAYMENT_CALLBACK_IP_WHITELIST=31.133.220.8
+
+# 仅开发调试时可临时跳过支付回调 IP 白名单校验
+# PAYMENT_CALLBACK_SKIP_IP_WHITELIST=false
+
+# ============ 监控告警（可选）============
+# 系统异常时发送 Webhook 告警
+# ALERT_WEBHOOK_URL=https://your-webhook-url
+
+# ============ 数据库稳定性调优（可选）============
+DB_POOL_MAX=30
+DB_POOL_MIN=2
+DB_CONNECTION_TIMEOUT=10000
+DB_IDLE_TIMEOUT=15000
+DB_STATEMENT_TIMEOUT=30000
+DB_QUERY_TIMEOUT=30000
+TRAFFIC_CONCURRENCY_PER_HOST=10
+TRAFFIC_HOST_CONCURRENCY=3
+DB_WORKER_BACKOFF_MS=15000
+```
+
+---
+
+### 部署命令
+
+```bash
+# 1. 创建 .env 文件
+cp .env.example .env
+
+# 2. 编辑 .env，配置上述变量
+nano .env
+
+# 3. 启动服务
+docker-compose up -d
+
+# 4. 查看日志
+docker-compose logs -f app
+```
+
+---
+
+### 变量来源说明
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                    环境变量流向图                                │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  .env 文件                                                      │
+│     │                                                           │
+│     ├─── POSTGRES_* ──────► db 容器 (PostgreSQL)               │
+│     │                                                           │
+│     ├─── REDIS_PASSWORD ──► redis 容器                          │
+│     │                                                           │
+│     └─── 其他变量 ────────► app 容器 (Incudal)                  │
+│              │                                                  │
+│              ├── DATABASE_URL (自动组装)                        │
+│              ├── REDIS_URL (自动组装)                           │
+│              ├── JWT_SECRET                                     │
+│              ├── ENCRYPTION_KEY                                 │
+│              ├── ADMIN_PASSWORD                                 │
+│              └── LOG_LEVEL 等                                   │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**重点**：`DATABASE_URL` 和 `REDIS_URL` 由 docker-compose.yml 自动组装，无需在 .env 中配置。
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..96407ee
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,14 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Shell scripts must always use LF
+*.sh text eol=lf
+
+# Docker files must use LF
+Dockerfile text eol=lf
+docker-compose*.yml text eol=lf
+
+# Keep Windows batch files with CRLF
+*.bat text eol=crlf
+*.cmd text eol=crlf
+*.ps1 text eol=crlf
diff --git a/.github/workflows/agent-release.yml b/.github/workflows/agent-release.yml
new file mode 100644
index 0000000..2f0ac4e
--- /dev/null
+++ b/.github/workflows/agent-release.yml
@@ -0,0 +1,190 @@
+name: Agent Build & Release
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+    paths:
+      - 'agent/**'
+      - 'server/templates/agent-install.sh'
+      - 'server/src/routes/agent.ts'
+      - 'server/src/lib/agent-auth.ts'
+      - 'server/src/lib/host-agent-credentials.ts'
+      - 'server/src/services/agent-instance-report.ts'
+      - '.github/workflows/agent-release.yml'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'agent/**'
+      - 'server/templates/agent-install.sh'
+      - 'server/src/routes/agent.ts'
+      - 'server/src/lib/agent-auth.ts'
+      - 'server/src/lib/host-agent-credentials.ts'
+      - 'server/src/services/agent-instance-report.ts'
+      - '.github/workflows/agent-release.yml'
+  workflow_dispatch:
+    inputs:
+      publish_release:
+        description: 'Publish an Agent GitHub Release using the version in agent/VERSION.'
+        required: false
+        default: false
+        type: boolean
+
+env:
+  GO_VERSION: '1.22.x'
+
+jobs:
+  version:
+    name: Resolve Agent Version
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+      version_changed: ${{ steps.changed.outputs.version_changed }}
+      should_release: ${{ steps.release.outputs.should_release }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Read Agent version
+        id: version
+        shell: bash
+        run: |
+          set -euo pipefail
+          VERSION="$(tr -d '[:space:]' < agent/VERSION)"
+
+          if [[ ! "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+(-[0-9A-Za-z.-]+)?$ ]]; then
+            echo "Invalid Agent version: ${VERSION}" >&2
+            echo "Expected vMAJOR.MINOR.PATCH or vMAJOR.MINOR.PATCH-suffix" >&2
+            exit 1
+          fi
+
+          echo "version=${VERSION}" >> "${GITHUB_OUTPUT}"
+          echo "Agent version: ${VERSION}"
+
+      - name: Detect agent/VERSION change
+        id: changed
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          VERSION_CHANGED=false
+          if [[ "${GITHUB_EVENT_NAME}" == "push" ]]; then
+            BEFORE="${{ github.event.before }}"
+            AFTER="${{ github.sha }}"
+
+            if [[ -z "${BEFORE}" || "${BEFORE}" =~ ^0+$ ]]; then
+              VERSION_CHANGED=true
+            elif git diff --name-only "${BEFORE}" "${AFTER}" | grep -qx 'agent/VERSION'; then
+              VERSION_CHANGED=true
+            fi
+          fi
+
+          echo "version_changed=${VERSION_CHANGED}" >> "${GITHUB_OUTPUT}"
+          echo "agent/VERSION changed: ${VERSION_CHANGED}"
+
+      - name: Decide release publishing
+        id: release
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          SHOULD_RELEASE=false
+          if [[ "${GITHUB_EVENT_NAME}" == "push" && "${{ steps.changed.outputs.version_changed }}" == "true" ]]; then
+            SHOULD_RELEASE=true
+          elif [[ "${GITHUB_EVENT_NAME}" == "workflow_dispatch" && "${{ inputs.publish_release }}" == "true" ]]; then
+            SHOULD_RELEASE=true
+          fi
+
+          echo "should_release=${SHOULD_RELEASE}" >> "${GITHUB_OUTPUT}"
+          echo "should release: ${SHOULD_RELEASE}"
+
+  build-agent:
+    name: Build Agent
+    runs-on: ubuntu-latest
+    needs:
+      - version
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ env.GO_VERSION }}
+          cache-dependency-path: agent/go.mod
+
+      - name: Test Agent
+        working-directory: agent
+        run: go test ./...
+
+      - name: Build Agent release files
+        run: VERSION="${{ needs.version.outputs.version }}" bash agent/scripts/build-release.sh
+
+      - name: Prepare release assets
+        shell: bash
+        run: |
+          set -euo pipefail
+          VERSION="${{ needs.version.outputs.version }}"
+          mkdir -p agent/release
+
+          cp agent/dist/incudal-agent-linux-amd64 "agent/release/incudal-agent-x86_64-${VERSION}"
+          cp agent/dist/incudal-agent-linux-arm64 "agent/release/incudal-agent-aarch64-${VERSION}"
+
+      - name: Verify release assets
+        shell: bash
+        run: |
+          set -euo pipefail
+          VERSION="${{ needs.version.outputs.version }}"
+          test -s "agent/release/incudal-agent-x86_64-${VERSION}"
+          test -s "agent/release/incudal-agent-aarch64-${VERSION}"
+
+      - name: Upload Agent artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: incudal-agent-${{ needs.version.outputs.version }}
+          path: |
+            agent/release/incudal-agent-x86_64-${{ needs.version.outputs.version }}
+            agent/release/incudal-agent-aarch64-${{ needs.version.outputs.version }}
+          retention-days: 30
+
+  release-agent:
+    name: Publish Agent Release
+    runs-on: ubuntu-latest
+    needs:
+      - version
+      - build-agent
+    if: needs.version.outputs.should_release == 'true'
+    permissions:
+      contents: write
+
+    steps:
+      - name: Download Agent artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: incudal-agent-${{ needs.version.outputs.version }}
+          path: agent-release
+
+      - name: Publish GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: agent-${{ needs.version.outputs.version }}
+          target_commitish: ${{ github.sha }}
+          name: Incudal Agent ${{ needs.version.outputs.version }}
+          files: |
+            agent-release/incudal-agent-x86_64-${{ needs.version.outputs.version }}
+            agent-release/incudal-agent-aarch64-${{ needs.version.outputs.version }}
+          generate_release_notes: true
+          draft: false
+          prerelease: ${{ contains(needs.version.outputs.version, '-') }}
+          fail_on_unmatched_files: true
+          overwrite_files: true
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..1d0ae42
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,81 @@
+name: CI
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint-and-typecheck:
+    name: Lint & Type Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+
+      - name: Generate Prisma Client
+        run: pnpm --filter server exec prisma generate
+        env:
+          DATABASE_URL: postgresql://user:pass@localhost:5432/db
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Type check (client)
+        run: pnpm --filter client type-check
+
+      - name: Type check (server)
+        run: pnpm --filter server type-check
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.22.x'
+          cache-dependency-path: agent/go.mod
+
+      - name: Test Agent
+        working-directory: agent
+        run: go test ./...
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: lint-and-typecheck
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+
+      - name: Generate Prisma Client
+        run: pnpm --filter server exec prisma generate
+        env:
+          DATABASE_URL: postgresql://user:pass@localhost:5432/db
+
+      - name: Build
+        run: pnpm build
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
new file mode 100644
index 0000000..0799b0b
--- /dev/null
+++ b/.github/workflows/docker.yml
@@ -0,0 +1,65 @@
+name: Docker Build & Push
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Image tag (e.g., latest, v1.0.0)'
+        required: false
+        default: 'latest'
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    name: Build & Push Docker Image
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            # For tags: v1.0.0 -> 1.0.0, latest
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            # For manual trigger
+            type=raw,value=${{ github.event.inputs.tag }},enable=${{ github.event_name == 'workflow_dispatch' }}
+            # Always tag latest for version tags
+            type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: linux/amd64
+          
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..c448902
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,257 @@
+# ============================================================================
+# Incudal 预构建产物包发布工作流
+# 在推送版本 tag (v*) 或手动触发时，自动构建前后端并打包为 .tar.gz 发行包
+# 支持 amd64 和 arm64 双架构
+# ============================================================================
+
+name: Build & Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: '发行版本号（例如 v1.0.0），留空则使用 git SHA 作为预览版'
+        required: false
+        default: ''
+
+env:
+  NODE_VERSION: '22'
+
+jobs:
+  # ===== 构建发行包（多架构矩阵） =====
+  build:
+    name: 构建 (${{ matrix.arch }})
+    runs-on: ${{ matrix.runner }}
+    strategy:
+      matrix:
+        include:
+          - arch: amd64
+            runner: ubuntu-latest
+          - arch: arm64
+            runner: ubuntu-24.04-arm
+    permissions:
+      contents: write
+
+    steps:
+      - name: 检出代码
+        uses: actions/checkout@v4
+
+      - name: 安装 pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: 安装 Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+
+      # ===== 安装依赖 =====
+      - name: 安装全部依赖
+        run: pnpm install --frozen-lockfile --ignore-scripts
+
+      - name: 重新构建 esbuild（Vite 构建需要）
+        run: pnpm rebuild esbuild
+
+      # ===== 生成 Prisma Client =====
+      - name: 生成 Prisma Client
+        run: pnpm --filter server exec prisma generate
+        env:
+          DATABASE_URL: postgresql://user:pass@localhost:5432/db
+
+      # ===== 构建前端 =====
+      - name: 构建前端 (Vite)
+        run: pnpm --filter client build
+
+      # ===== 构建后端 =====
+      - name: 编译后端 (TypeScript)
+        run: pnpm --filter server build
+
+      # ===== 准备发行目录 =====
+      - name: 准备发行目录结构
+        run: |
+          mkdir -p release/client/dist
+          mkdir -p release/server
+
+          # 复制前端构建产物
+          cp -r client/dist/* release/client/dist/
+
+          # 复制后端构建产物
+          cp -r server/dist release/server/
+          cp -r server/prisma release/server/
+          cp server/prisma.config.ts release/server/
+          cp server/package.json release/server/
+          cp -r server/templates release/server/
+
+          # 复制根配置文件
+          cp package.json release/
+          cp pnpm-workspace.yaml release/
+
+      # ===== 安装生产依赖 =====
+      - name: 安装后端生产依赖
+        working-directory: release/server
+        run: |
+          # 在发行目录中只安装生产依赖
+          npm install --omit=dev --ignore-scripts
+
+          # 在当前架构的 runner 上原生生成 Prisma Client
+          DATABASE_URL="postgresql://user:pass@localhost:5432/db" npx prisma generate
+
+      # ===== 创建启动辅助脚本 =====
+      - name: 创建管理脚本
+        run: |
+          cat > release/incudal.sh << 'SCRIPT'
+          #!/bin/bash
+          # Incudal 快捷管理脚本
+          set -e
+          APP_DIR="$(cd "$(dirname "$0")" && pwd)"
+
+          case "${1:-}" in
+            start)
+              echo "🚀 启动 Incudal..."
+              cd "$APP_DIR/server"
+              npx prisma migrate deploy
+              cd "$APP_DIR"
+              exec node server/dist/app.js
+              ;;
+            migrate)
+              echo "🔄 执行数据库迁移..."
+              cd "$APP_DIR/server"
+              npx prisma migrate deploy
+              echo "✅ 迁移完成"
+              ;;
+            version)
+              echo "Incudal $(node -e "console.log(require('./package.json').version)")"
+              ;;
+            *)
+              echo "用法: $0 {start|migrate|version}"
+              exit 1
+              ;;
+          esac
+          SCRIPT
+          chmod +x release/incudal.sh
+
+      # ===== 确定版本号 =====
+      - name: 确定版本号
+        id: version
+        run: |
+          if [[ "${{ github.event_name }}" == "push" && "${{ github.ref_type }}" == "tag" ]]; then
+            VERSION="${{ github.ref_name }}"
+          elif [[ -n "${{ github.event.inputs.tag }}" ]]; then
+            VERSION="${{ github.event.inputs.tag }}"
+          else
+            VERSION="preview-$(echo ${{ github.sha }} | head -c 7)"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "📦 版本号: $VERSION"
+
+      # ===== 打包 =====
+      - name: 打包为 tar.gz
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          cd release
+          tar -czf "../incudal-${VERSION}-linux-${{ matrix.arch }}.tar.gz" .
+          cd ..
+          ls -lh "incudal-${VERSION}-linux-${{ matrix.arch }}.tar.gz"
+          echo "📦 发行包大小: $(du -h "incudal-${VERSION}-linux-${{ matrix.arch }}.tar.gz" | cut -f1)"
+
+      # ===== 上传构建产物 =====
+      - name: 上传构建产物
+        uses: actions/upload-artifact@v4
+        with:
+          name: incudal-${{ steps.version.outputs.version }}-linux-${{ matrix.arch }}
+          path: incudal-${{ steps.version.outputs.version }}-linux-${{ matrix.arch }}.tar.gz
+          retention-days: 30
+
+  # ===== 发布 Release（等待所有架构构建完成） =====
+  release:
+    name: 发布 Release
+    needs:
+      - build
+    if: startsWith(github.ref, 'refs/tags/v')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: 确定版本号
+        id: version
+        run: echo "version=${{ github.ref_name }}" >> $GITHUB_OUTPUT
+
+      # 下载所有架构的构建产物
+      - name: 下载 amd64 产物
+        uses: actions/download-artifact@v4
+        with:
+          name: incudal-${{ steps.version.outputs.version }}-linux-amd64
+
+      - name: 下载 arm64 产物
+        uses: actions/download-artifact@v4
+        with:
+          name: incudal-${{ steps.version.outputs.version }}-linux-arm64
+
+      - name: 列出发行文件
+        run: ls -lh incudal-*.tar.gz
+
+      # 创建 Release 并上传所有架构的产物
+      - name: 创建 GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            incudal-*.tar.gz
+          generate_release_notes: true
+          draft: false
+          prerelease: ${{ contains(github.ref_name, 'alpha') || contains(github.ref_name, 'beta') || contains(github.ref_name, 'rc') }}
+
+  # ===== 构建并推送 Docker 镜像（多架构） =====
+  docker:
+    name: 构建 Docker 镜像
+    if: startsWith(github.ref, 'refs/tags/v')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: 检出代码
+        uses: actions/checkout@v4
+
+      # 设置 QEMU（用于跨架构构建 arm64）
+      - name: 设置 QEMU
+        uses: docker/setup-qemu-action@v3
+
+      # 设置 Docker Buildx（多架构构建引擎）
+      - name: 设置 Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # 登录 GitHub Container Registry
+      - name: 登录 GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # 提取版本号和元数据
+      - name: 提取 Docker 元数据
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=raw,value=latest
+
+      # 构建并推送多架构镜像
+      - name: 构建并推送 Docker 镜像
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..348dd9e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,93 @@
+# =====================================================
+# Incudal 项目 .gitignore
+# =====================================================
+
+# ==================== 依赖 ====================
+node_modules/
+.pnpm-store/
+
+# ==================== 构建产物 ====================
+dist/
+build/
+client/dist/
+server/dist/
+!agent/dist/
+!agent/dist/incudal-agent-linux-amd64
+!agent/dist/incudal-agent-linux-amd64.gz
+!agent/dist/incudal-agent-linux-arm64
+!agent/dist/incudal-agent-linux-arm64.gz
+
+# ==================== 环境变量 ====================
+.env
+.env.local
+.env.*.local
+server/.env
+
+# ==================== Prisma ====================
+server/src/generated/
+**/generated/prisma/
+
+# ==================== 日志 ====================
+logs/
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ==================== IDE/编辑器 ====================
+.vscode/
+.idea/
+*.swp
+*.swo
+*.sublime-workspace
+*.sublime-project
+
+# ==================== 操作系统 ====================
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+
+# ==================== 证书 (敏感) ====================
+server/certs/*.key
+server/certs/*.crt
+server/certs/*.pem
+!server/certs/.gitkeep
+
+# ==================== 数据库 ====================
+*.db
+*.sqlite
+*.sqlite3
+
+# ==================== Docker ====================
+.docker/
+
+# ==================== 临时文件 ====================
+tmp/
+temp/
+.cache/
+*.tmp
+*.temp
+*.pid
+
+# ==================== Vite ====================
+client/node_modules/.vite/
+client/node_modules/.vite-temp/
+
+# ==================== TypeScript ====================
+*.tsbuildinfo
+
+# ==================== 测试覆盖率 ====================
+coverage/
+.nyc_output/
+
+# ==================== 文档 (内部) ====================
+docs/
+SDK/
+SDKNEW/
+namecrane_modules/
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..941ccbb
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,85 @@
+# =====================================================
+# Incudal 多阶段构建 Dockerfile
+# =====================================================
+
+# Stage 1: 依赖安装
+FROM node:22-alpine AS deps
+RUN corepack enable && corepack prepare pnpm@9 --activate
+WORKDIR /app
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY client/package.json ./client/
+COPY server/package.json ./server/
+
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+# esbuild 依赖安装脚本不能被跳过，否则 Vite 在构建阶段无法启动二进制
+RUN pnpm rebuild esbuild
+
+# Stage 2: 构建前端
+FROM node:22-alpine AS builder-client
+RUN corepack enable && corepack prepare pnpm@9 --activate
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/client/node_modules ./client/node_modules
+COPY client ./client
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+RUN pnpm --filter client build
+
+# Stage 3: 构建后端
+FROM node:22-alpine AS builder-server
+RUN corepack enable && corepack prepare pnpm@9 --activate
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/server/node_modules ./server/node_modules
+COPY server ./server
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+# 生成 Prisma Client 并构建
+WORKDIR /app/server
+RUN DATABASE_URL="postgresql://user:pass@localhost:5432/db" npx prisma generate
+WORKDIR /app
+RUN pnpm --filter server build
+
+# Stage 4: 生产镜像
+FROM node:22-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+# 创建非 root 用户
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 incudal
+
+# 复制依赖 (包含生成的 Prisma Client)
+COPY --from=builder-server /app/node_modules ./node_modules
+COPY --from=builder-server /app/server/node_modules ./server/node_modules
+
+# 复制构建产物
+COPY --from=builder-server /app/server/dist ./server/dist
+COPY --from=builder-client /app/client/dist ./client/dist
+
+# 复制必要配置文件
+COPY server/package.json ./server/
+COPY server/prisma.config.ts ./server/
+COPY server/prisma ./server/prisma
+COPY server/templates ./server/templates
+COPY server/scripts ./server/scripts
+COPY server/src ./server/src
+COPY package.json pnpm-workspace.yaml ./
+
+# 复制启动脚本
+COPY server/docker-entrypoint.sh ./server/
+RUN chmod +x ./server/docker-entrypoint.sh
+
+# 创建证书目录
+RUN mkdir -p server/certs && chown -R incudal:nodejs server/certs
+
+USER incudal
+
+EXPOSE 3000
+
+ENTRYPOINT ["./server/docker-entrypoint.sh"]
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..68fc42b
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2026, qwer-xyz
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1fed7b7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,194 @@
+<h1 align="center"><img src="./client/public/incudal_logo.webp" width="100" align="absmiddle" alt="Incudal logo"> Incudal</h1>
+
+<p align="center">基于 Incus 的 LXC / KVM NAT VPS 销售、交付与管理面板。</p>
+
+## 项目简介
+
+Incudal 基于 Incus 的 NAT VPS 销售与管理面板。
+项目支持 LXC / KVM 实例、套餐与镜像管理、账务计费、节点托管、用户后台、管理员后台以及宿主机 Agent。
+
+> 演示站：https://demo.incudal.com<br/>
+> <strong>仅供学习与参考，本项目存在诸多不完善之处。有任何问题建议 Fork 后使用 AI 解决。</strong><br/>
+
+## 主要功能
+
+- 实例交付：基于 Incus 创建和管理 LXC / KVM 实例，支持 NAT 网络、系统镜像、套餐资源和节点绑定。
+- 平台运营：提供用户端与管理员后台，覆盖用户、套餐、镜像、节点、工单、公告、日志和系统配置等管理流程。
+- 计费与权益：支持余额、充值、消费记录、托管收益、支付渠道、积分、VIP 等级和会员福利。
+- 节点与扩展：通过宿主机 Agent 上报资源与状态，并支持托管节点、反代建站、邮箱服务等扩展能力。
+
+## 目录结构
+
+```text
+client/                 Vue 3 + Vite 前端
+server/                 Fastify + Prisma 后端
+agent/                  Go 宿主机 Agent
+server/prisma/          数据库 schema 与 migrations
+server/templates/       安装脚本、邮件等模板
+.github/workflows/      CI、Docker、Agent Release 工作流
+scripts/                本地开发和检查脚本
+```
+
+## 搭建教程
+
+当前无论使用哪种部署方式，都需要在 `server/certs` 目录下生成或放置证书与密钥，并确保 Docker 容器具有读取权限。
+
+### 方式一：Docker Compose 开发环境
+
+适合本地试跑和开发预览。该方式会自动启动 Node、PostgreSQL 和 Redis，并自动安装依赖、执行数据库迁移。
+
+```bash
+git clone https://github.com/qwer-xyz/incudal.git
+cd incudal
+docker compose -f docker-compose.dev.yml up
+```
+
+启动后访问：
+
+```text
+前端：http://127.0.0.1:43173
+后端：http://127.0.0.1:8888
+```
+
+停止服务：
+
+```bash
+docker compose -f docker-compose.dev.yml down
+```
+
+如需同时删除本地开发数据库卷：
+
+```bash
+docker compose -f docker-compose.dev.yml down -v
+```
+
+### 方式二：生产镜像部署
+
+生产环境建议准备独立 PostgreSQL 和 Redis，然后构建并运行镜像。
+
+```bash
+docker build -t incudal:local .
+docker run -d --name incudal \
+  -p 3000:3000 \
+  --env-file .env \
+  incudal:local
+```
+
+生产环境至少需要配置：
+
+```env
+NODE_ENV=production
+PORT=3000
+DATABASE_URL=postgresql://user:password@postgres:5432/incudal
+REDIS_URL=redis://redis:6379
+JWT_SECRET=please-change-to-a-long-random-secret
+FRONTEND_URL=https://your-domain.example
+```
+
+容器启动时会执行 `prisma migrate deploy`，然后启动后端服务。生产部署前请确保数据库可连接、`JWT_SECRET` 足够随机、反向代理和 HTTPS 已配置好。
+
+Agent 正式二进制不存放在面板仓库内，面板运行时会从 GitHub Release 查询和代理下载。如部署在私有仓库或 fork，可按需配置：
+
+```env
+INCUDAL_AGENT_RELEASE_REPOSITORY=qwer-xyz/incudal
+INCUDAL_AGENT_RELEASE_TOKEN=github_pat_xxx
+```
+
+## 开发教程
+
+### 本地依赖
+
+- Node.js 20 或更高版本
+- pnpm 9.14.2
+- PostgreSQL
+- Redis
+- Go 1.22 或更高版本，仅开发 Agent 时需要
+
+启用 pnpm：
+
+```bash
+corepack enable
+corepack prepare pnpm@9.14.2 --activate
+pnpm install
+```
+
+配置本地环境变量后执行数据库迁移：
+
+```bash
+pnpm --filter server exec prisma migrate deploy
+```
+
+启动前后端开发服务：
+
+```bash
+pnpm dev
+```
+
+默认开发端口：
+
+```text
+client: http://127.0.0.1:5173
+server: http://127.0.0.1:8888
+```
+
+### 常用命令
+
+```bash
+pnpm --filter client type-check
+pnpm --filter server type-check
+pnpm build
+pnpm lint
+```
+
+本地检查：
+
+```shell
+# Windows
+.\scripts\local-ci.ps1
+# macOS
+.\scripts\local-ci-macos.sh
+```
+
+### 数据库开发
+
+Prisma schema 位于 `server/prisma/schema.prisma`，迁移文件位于 `server/prisma/migrations/`。修改数据库结构后，应生成迁移并确认前后端类型检查通过。
+
+常用命令：
+
+```bash
+pnpm --filter server exec prisma generate
+pnpm --filter server exec prisma migrate dev
+pnpm --filter server exec prisma migrate deploy
+```
+
+### Agent 开发与发布
+
+Agent 位于 `agent/`，版本号统一由 `agent/VERSION` 控制。
+
+本地测试：
+
+```bash
+cd agent
+go test ./...
+go run ./cmd/incudal-agent -config ./config.example.yaml -once
+```
+
+本地构建双架构产物：
+
+```bash
+bash agent/scripts/build-release.sh
+```
+
+`agent/dist` 只是本地临时构建目录，不提交到 Git。正式发布由 GitHub Actions `Agent Build & Release` 完成：当 `agent/VERSION` 变动并推送后，会发布 GitHub Release，并生成：
+
+```text
+incudal-agent-x86_64-v0.0.1
+incudal-agent-aarch64-v0.0.1
+```
+
+## 开发约定
+
+- 前端新增文案需要同步维护 `client/src/locales/` 下的多语言键。
+- 后端新增管理接口应使用登录鉴权和管理员鉴权，并补充必要的字段校验和速率限制。
+- 数据库变更需要提交 Prisma migration，不直接修改生产库结构。
+- 不提交构建产物、临时文件、密钥、数据库 dump 或本地 `.env`。
diff --git a/TransparentProxy.md b/TransparentProxy.md
new file mode 100644
index 0000000..2fac5ca
--- /dev/null
+++ b/TransparentProxy.md
@@ -0,0 +1,104 @@
+针对 Incus/LXC 容器环境的 dae 透明代理。
+
+这套方案实现了：宿主机自身流量直连、接管容器出站流量走出口节点、兼容容器入站端口映射、规避节点不支持 UDP 导致的断网。
+
+---
+
+### 部署流程 (适用于 Ubuntu 24.04 + Incus)
+
+#### 第一步
+
+默认情况下，Incus 容器网桥内的流量走的是二层转发，会绕过大多的网络层探针。为了让 `dae` 能抓到容器发出的 TCP 握手包，必须开启网桥的三层过滤。
+
+在宿主机执行以下命令：
+
+```bash
+# 1. 确保 Incus 网桥保持默认的 NAT 开启状态 (保证入站映射正常)
+incus network set incusbr0 ipv4.nat=true
+
+# 2. 加载网桥过滤模块
+sudo modprobe br_netfilter
+
+# 3. 写入内核参数，强制网桥流量经过 iptables (进而被 dae 的 eBPF 探针捕获)
+echo "net.bridge.bridge-nf-call-iptables = 1" | sudo tee /etc/sysctl.d/99-bridge-nf.conf
+echo "net.bridge.bridge-nf-call-ip6tables = 1" | sudo tee -a /etc/sysctl.d/99-bridge-nf.conf
+echo "net.bridge.bridge-nf-call-arptables = 1" | sudo tee -a /etc/sysctl.d/99-bridge-nf.conf
+
+# 4. 生效配置
+sudo sysctl -p /etc/sysctl.d/99-bridge-nf.conf
+```
+
+#### 第二步：安装 dae
+
+```bash
+sudo apt update && sudo apt install curl -y
+sudo bash -c "$(curl -sL https://github.com/daeuniverse/dae-installer/raw/main/installer.sh)"
+```
+
+#### 第三步
+
+清空并编辑 `/usr/local/etc/dae/config.dae`，将以下内容粘贴进去。
+
+```dae
+global {
+  tproxy_port: 8321
+  tproxy_port_protect: true
+  wan_interface: auto
+
+  # 绑定 Incus 网桥
+  lan_interface: incusbr0
+
+  auto_config_kernel_parameter: true
+}
+
+node {
+  # 落地节点
+  node1: ''
+}
+
+group {
+  my_upstream {
+    filter: name(node1)
+    policy: fixed(0)
+  }
+}
+
+dns {
+  upstream {
+    # 强制使用 tcp 协议查 DNS，完美解决代理节点不支持 UDP 导致的 DNS 解析超时黑洞
+    cloudflare: 'tcp://1.1.1.1:53'
+  }
+  routing {
+    request {
+      fallback: cloudflare
+    }
+  }
+}
+
+routing {
+  # 1. 内网互通与组播放行
+  dip(224.0.0.0/3, 'ff00::/8') -> direct
+  dip(geoip:private) -> direct
+
+  # 2. 宿主机防失联 (SSH)
+  dport(22, 2551) -> must_direct
+  sport(22, 2551) -> must_direct
+
+  # 3. 兼容 NAT 端口映射的回程放行
+  sport(80, 443, 3306) -> must_direct
+
+  # 4. 劫持容器网段
+  sip(10.10.0.0/22) -> my_upstream
+
+  # 5. 宿主机自身流量及未匹配流量兜底直连
+  fallback: direct
+}
+```
+
+#### 第四步：启动
+
+```bash
+sudo systemctl daemon-reload
+sudo systemctl restart dae
+sudo systemctl enable dae
+```
diff --git a/agent/.gitignore b/agent/.gitignore
new file mode 100644
index 0000000..bb8a5e0
--- /dev/null
+++ b/agent/.gitignore
@@ -0,0 +1,4 @@
+/incudal-agent
+/dist/*
+*.test
+coverage.out
diff --git a/agent/README.md b/agent/README.md
new file mode 100644
index 0000000..228c915
--- /dev/null
+++ b/agent/README.md
@@ -0,0 +1,174 @@
+# Incudal Host Agent
+
+宿主机 Agent 客户端实现。
+
+当前阶段负责读取配置、向面板上报 HMAC 签名心跳，并按面板心跳响应执行自动升级。
+
+## 配置
+
+默认配置路径：
+
+```bash
+/etc/incudal-agent/config.yaml
+```
+
+示例：
+
+```yaml
+panel_url: "https://idev.bitpd.com"
+agent_id: "agt_xxx"
+agent_secret: "ias_xxx"
+heartbeat_interval_seconds: 30
+request_timeout_seconds: 10
+```
+
+也可以使用环境变量覆盖：
+
+```bash
+INCUDAL_PANEL_URL=
+INCUDAL_AGENT_ID=
+INCUDAL_AGENT_SECRET=
+INCUDAL_HEARTBEAT_INTERVAL_SECONDS=
+INCUDAL_REQUEST_TIMEOUT_SECONDS=
+```
+
+## 运行
+
+单次心跳测试：
+
+```bash
+go run ./cmd/incudal-agent -config ./config.example.yaml -once
+```
+
+循环心跳：
+
+```bash
+go run ./cmd/incudal-agent -config /etc/incudal-agent/config.yaml
+```
+
+## 当前能力
+
+- 读取 Agent 配置
+- 采集 CPU 数量和内存总量
+- 探测常见 Incus/LXD Unix socket
+- 生成 canonical JSON body hash
+- 生成 HMAC-SHA256 签名
+- 调用 `POST /api/agent/heartbeat`
+- 读取心跳响应中的 `upgrade` 指令并自动升级自身
+
+当前不执行实例创建、销毁、启停等下发任务。
+
+## 自动升级
+
+面板会在 Agent 心跳响应中返回升级指令：
+
+```json
+{
+  "upgrade": {
+    "available": true,
+    "version": "v1.0.1",
+    "url": "https://<panel>/api/agent/binary/incudal-agent-linux-amd64?v=v1.0.1",
+    "sha256": "<sha256>",
+    "gzip": false
+  }
+}
+```
+
+Agent 只接受当前 `panel_url` 同源下载地址。下载后先校验 SHA-256，再解包、写入临时文件、备份旧二进制、原子替换并执行 `systemctl restart incudal-agent`。
+
+`-once` 单次心跳测试模式不会执行自动升级，避免安装前置检测阶段替换正在测试的二进制。
+
+旧版本 Agent 不包含升级执行器，首次启用自动升级时仍需要通过面板安装命令或重新安装按钮部署一次新版 Agent；之后才会按心跳响应自动升级。
+
+## Release 构建与发布
+
+本地构建双架构二进制：
+
+```bash
+cd ..
+bash agent/scripts/build-release.sh
+```
+
+Agent 版本统一从 `agent/VERSION` 读取，格式固定为 `vMAJOR.MINOR.PATCH`。
+需要发布新版 Agent 时，先递增 `agent/VERSION`，再构建 release 产物。
+
+产物：
+
+```text
+agent/dist/incudal-agent-linux-amd64
+agent/dist/incudal-agent-linux-arm64
+agent/dist/manifest.json
+```
+
+`agent/dist` 是本地临时构建目录，不再纳入 Git。正式发布由 GitHub Actions `Agent Build & Release` 完成。
+
+推送中只要 `agent/VERSION` 发生变化，Actions 会读取该版本号，构建并发布 GitHub Release：
+
+```text
+tag: agent-v0.0.1
+assets:
+  incudal-agent-x86_64-v0.0.1
+  incudal-agent-aarch64-v0.0.1
+```
+
+面板运行时不会读取本地 `agent/dist`。它会从 GitHub Release 查询最新 Agent 版本，动态生成 `/api/agent/manifest.json`，并通过 `/api/agent/binary/*` 代理下载对应 Release 资产。
+
+默认 GitHub Release 仓库为 `qwer-xyz/incudal_classic`。如果部署到 fork 或私有仓库，可设置：
+
+```bash
+INCUDAL_AGENT_RELEASE_REPOSITORY="owner/repo"
+INCUDAL_AGENT_RELEASE_TOKEN="github_pat_xxx" # 私有仓库需要
+```
+
+## 安装脚本
+
+面板提供通用安装脚本：
+
+```bash
+curl -fsSL "$PANEL_URL/api/agent/install.sh" | sudo env \
+  INCUDAL_PANEL_URL="$PANEL_URL" \
+  INCUDAL_AGENT_INSTALL_TOKEN="$AGENT_INSTALL_TOKEN" \
+  INCUDAL_AGENT_BINARY_URL="$BINARY_URL" \
+  bash
+```
+
+`INCUDAL_AGENT_INSTALL_TOKEN` 由面板生成，30 分钟内有效且只能使用一次。
+安装脚本会调用 `/api/agent/install-config/:token` 拉取 `agent_id` 和 `agent_secret`。
+旧的 `INCUDAL_AGENT_ID` / `INCUDAL_AGENT_SECRET` 直传方式仍保留兼容。
+
+安装脚本会：
+
+- 下载 `incudal-agent` 二进制
+- 写入 `/etc/incudal-agent/config.yaml`
+- 写入 systemd service
+- 执行一次心跳测试
+- 启动或重启 `incudal-agent.service`
+
+如果没有传入 `INCUDAL_AGENT_BINARY_URL`，默认从当前面板下载：
+
+```text
+https://<panel>/api/agent/binary/incudal-agent-linux-amd64
+https://<panel>/api/agent/binary/incudal-agent-linux-arm64
+```
+
+默认下载会先读取面板的 manifest：
+
+```text
+https://<panel>/api/agent/manifest.json
+```
+
+安装脚本会按当前 OS/ARCH 取出文件名和 SHA-256，下载后先校验摘要，再解包安装。
+
+如果手动传入 `INCUDAL_AGENT_BINARY_URL`，可同时传入 `INCUDAL_AGENT_BINARY_SHA256` 开启校验；未传 SHA-256 时仍保留兼容安装，但会输出 warning。
+
+安装脚本会先下载到临时文件，再原子替换 `/usr/local/bin/incudal-agent`。
+重复安装或升级时，会执行 `systemctl restart incudal-agent` 确保立即切换到最新二进制。
+
+dry-run 验证：
+
+```bash
+INCUDAL_AGENT_DRY_RUN=1 \
+INCUDAL_PANEL_URL="http://127.0.0.1:8888" \
+INCUDAL_AGENT_INSTALL_TOKEN="ait_testtoken_abcdefghijklmnopqrstuvwxyz123456" \
+bash server/templates/agent-install.sh
+```
diff --git a/agent/VERSION b/agent/VERSION
new file mode 100644
index 0000000..45c7a58
--- /dev/null
+++ b/agent/VERSION
@@ -0,0 +1 @@
+v0.0.1
diff --git a/agent/cmd/incudal-agent/main.go b/agent/cmd/incudal-agent/main.go
new file mode 100644
index 0000000..5c326fe
--- /dev/null
+++ b/agent/cmd/incudal-agent/main.go
@@ -0,0 +1,110 @@
+package main
+
+import (
+	"context"
+	"flag"
+	"log"
+	"os"
+	"os/signal"
+	"sync/atomic"
+	"syscall"
+	"time"
+
+	"incudal-agent/internal/config"
+	"incudal-agent/internal/panel"
+	"incudal-agent/internal/report"
+	"incudal-agent/internal/upgrade"
+)
+
+var version = "dev"
+
+func main() {
+	configPath := flag.String("config", "/etc/incudal-agent/config.yaml", "agent config file")
+	once := flag.Bool("once", false, "send one heartbeat and exit")
+	flag.Parse()
+
+	cfg, err := config.Load(*configPath)
+	if err != nil {
+		log.Fatalf("load config: %v", err)
+	}
+
+	ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt, syscall.SIGTERM)
+	defer stop()
+
+	client := panel.New(cfg)
+	if *once {
+		if _, err := sendHeartbeat(ctx, client, cfg.HeartbeatIntervalSeconds); err != nil {
+			log.Fatalf("heartbeat: %v", err)
+		}
+		return
+	}
+
+	log.Printf("incudal-agent started: panel=%s interval=%s", cfg.PanelURL, cfg.HeartbeatInterval)
+	upgradeRunner := upgrade.DefaultRunner(cfg)
+	var upgradeInProgress atomic.Bool
+	if result, err := sendHeartbeat(ctx, client, cfg.HeartbeatIntervalSeconds); err != nil {
+		log.Printf("heartbeat failed: %v", err)
+	} else {
+		scheduleAgentUpgrade(ctx, upgradeRunner, result, &upgradeInProgress)
+	}
+
+	ticker := time.NewTicker(cfg.HeartbeatInterval)
+	defer ticker.Stop()
+	for {
+		select {
+		case <-ctx.Done():
+			log.Printf("incudal-agent stopped")
+			return
+		case <-ticker.C:
+			if result, err := sendHeartbeat(ctx, client, cfg.HeartbeatIntervalSeconds); err != nil {
+				log.Printf("heartbeat failed: %v", err)
+			} else {
+				scheduleAgentUpgrade(ctx, upgradeRunner, result, &upgradeInProgress)
+			}
+		}
+	}
+}
+
+func sendHeartbeat(ctx context.Context, client *panel.Client, heartbeatIntervalSeconds int) (panel.HeartbeatResult, error) {
+	result, err := client.Heartbeat(ctx, report.HeartbeatPayload(version, heartbeatIntervalSeconds))
+	if err != nil {
+		return result, err
+	}
+	upgradeAvailable := result.Upgrade != nil && result.Upgrade.Available
+	log.Printf("heartbeat ok: status=%d latencyMs=%d upgrade=%t", result.StatusCode, result.LatencyMs, upgradeAvailable)
+	return result, nil
+}
+
+func scheduleAgentUpgrade(ctx context.Context, runner *upgrade.Runner, result panel.HeartbeatResult, upgradeInProgress *atomic.Bool) {
+	if result.Upgrade == nil || !result.Upgrade.Available {
+		return
+	}
+	if !upgradeInProgress.CompareAndSwap(false, true) {
+		log.Printf("agent upgrade already scheduled: version=%s", result.Upgrade.Version)
+		return
+	}
+
+	instruction := *result.Upgrade
+	log.Printf("agent upgrade scheduled: version=%s", instruction.Version)
+	go func() {
+		defer upgradeInProgress.Store(false)
+
+		if delay := upgrade.RandomJitter(5 * time.Minute); delay > 0 {
+			timer := time.NewTimer(delay)
+			select {
+			case <-ctx.Done():
+				timer.Stop()
+				return
+			case <-timer.C:
+			}
+		}
+
+		upgradeCtx, cancel := context.WithTimeout(context.Background(), 10*time.Minute)
+		defer cancel()
+		if err := runner.Apply(upgradeCtx, instruction, version); err != nil {
+			log.Printf("agent upgrade failed: version=%s error=%v", instruction.Version, err)
+			return
+		}
+		log.Printf("agent upgrade applied: version=%s", instruction.Version)
+	}()
+}
diff --git a/agent/config.example.yaml b/agent/config.example.yaml
new file mode 100644
index 0000000..8113d57
--- /dev/null
+++ b/agent/config.example.yaml
@@ -0,0 +1,8 @@
+# Incudal Host Agent minimal config.
+# 首版仅支持简单 key: value 格式，不支持嵌套 YAML。
+
+panel_url: "https://idev.bitpd.com"
+agent_id: "agt_replace_me"
+agent_secret: "ias_replace_me"
+heartbeat_interval_seconds: 30
+request_timeout_seconds: 10
diff --git a/agent/go.mod b/agent/go.mod
new file mode 100644
index 0000000..87932fb
--- /dev/null
+++ b/agent/go.mod
@@ -0,0 +1,3 @@
+module incudal-agent
+
+go 1.19
diff --git a/agent/internal/config/config.go b/agent/internal/config/config.go
new file mode 100644
index 0000000..1e32d4a
--- /dev/null
+++ b/agent/internal/config/config.go
@@ -0,0 +1,158 @@
+package config
+
+import (
+	"bufio"
+	"errors"
+	"fmt"
+	"net/url"
+	"os"
+	"strconv"
+	"strings"
+	"time"
+)
+
+const (
+	DefaultHeartbeatIntervalSeconds = 30
+	MinHeartbeatIntervalSeconds     = 5
+	MaxHeartbeatIntervalSeconds     = 3600
+)
+
+type Config struct {
+	PanelURL                 string
+	AgentID                  string
+	AgentSecret              string
+	HeartbeatInterval        time.Duration
+	RequestTimeout           time.Duration
+	HeartbeatIntervalSeconds int
+	RequestTimeoutSeconds    int
+}
+
+func Load(path string) (Config, error) {
+	values := map[string]string{}
+	if path != "" {
+		fileValues, err := readKeyValueFile(path)
+		if err != nil && !errors.Is(err, os.ErrNotExist) {
+			return Config{}, err
+		}
+		for key, value := range fileValues {
+			values[key] = value
+		}
+	}
+
+	overlayEnv(values, "panel_url", "INCUDAL_PANEL_URL")
+	overlayEnv(values, "agent_id", "INCUDAL_AGENT_ID")
+	overlayEnv(values, "agent_secret", "INCUDAL_AGENT_SECRET")
+	overlayEnv(values, "heartbeat_interval_seconds", "INCUDAL_HEARTBEAT_INTERVAL_SECONDS")
+	overlayEnv(values, "request_timeout_seconds", "INCUDAL_REQUEST_TIMEOUT_SECONDS")
+
+	heartbeatSeconds := clampInt(
+		parsePositiveInt(values["heartbeat_interval_seconds"], DefaultHeartbeatIntervalSeconds),
+		MinHeartbeatIntervalSeconds,
+		MaxHeartbeatIntervalSeconds,
+	)
+	timeoutSeconds := parsePositiveInt(values["request_timeout_seconds"], 10)
+	cfg := Config{
+		PanelURL:                 strings.TrimRight(values["panel_url"], "/"),
+		AgentID:                  values["agent_id"],
+		AgentSecret:              values["agent_secret"],
+		HeartbeatIntervalSeconds: heartbeatSeconds,
+		RequestTimeoutSeconds:    timeoutSeconds,
+		HeartbeatInterval:        time.Duration(heartbeatSeconds) * time.Second,
+		RequestTimeout:           time.Duration(timeoutSeconds) * time.Second,
+	}
+
+	if err := cfg.Validate(); err != nil {
+		return Config{}, err
+	}
+	return cfg, nil
+}
+
+func (cfg Config) Validate() error {
+	if cfg.PanelURL == "" {
+		return errors.New("panel_url is required")
+	}
+	parsed, err := url.Parse(cfg.PanelURL)
+	if err != nil || parsed.Scheme == "" || parsed.Host == "" {
+		return fmt.Errorf("panel_url is invalid: %s", cfg.PanelURL)
+	}
+	if parsed.Scheme != "http" && parsed.Scheme != "https" {
+		return fmt.Errorf("panel_url scheme must be http or https: %s", parsed.Scheme)
+	}
+	if cfg.AgentID == "" {
+		return errors.New("agent_id is required")
+	}
+	if cfg.AgentSecret == "" {
+		return errors.New("agent_secret is required")
+	}
+	if cfg.HeartbeatInterval < time.Duration(MinHeartbeatIntervalSeconds)*time.Second {
+		return fmt.Errorf("heartbeat interval must be at least %d seconds", MinHeartbeatIntervalSeconds)
+	}
+	if cfg.RequestTimeout < time.Second {
+		return errors.New("request timeout must be at least 1 second")
+	}
+	return nil
+}
+
+func readKeyValueFile(path string) (map[string]string, error) {
+	file, err := os.Open(path)
+	if err != nil {
+		return nil, err
+	}
+	defer file.Close()
+
+	values := map[string]string{}
+	scanner := bufio.NewScanner(file)
+	lineNumber := 0
+	for scanner.Scan() {
+		lineNumber++
+		line := strings.TrimSpace(scanner.Text())
+		if line == "" || strings.HasPrefix(line, "#") {
+			continue
+		}
+		key, value, ok := strings.Cut(line, ":")
+		if !ok {
+			return nil, fmt.Errorf("invalid config line %d: expected key: value", lineNumber)
+		}
+		key = strings.TrimSpace(key)
+		value = trimConfigValue(value)
+		if key == "" {
+			return nil, fmt.Errorf("invalid config line %d: empty key", lineNumber)
+		}
+		values[key] = value
+	}
+	if err := scanner.Err(); err != nil {
+		return nil, err
+	}
+	return values, nil
+}
+
+func trimConfigValue(value string) string {
+	trimmed := strings.TrimSpace(value)
+	trimmed = strings.Trim(trimmed, `"`)
+	trimmed = strings.Trim(trimmed, `'`)
+	return trimmed
+}
+
+func overlayEnv(values map[string]string, key string, envName string) {
+	if value := strings.TrimSpace(os.Getenv(envName)); value != "" {
+		values[key] = value
+	}
+}
+
+func parsePositiveInt(value string, fallback int) int {
+	parsed, err := strconv.Atoi(strings.TrimSpace(value))
+	if err != nil || parsed <= 0 {
+		return fallback
+	}
+	return parsed
+}
+
+func clampInt(value int, min int, max int) int {
+	if value < min {
+		return min
+	}
+	if value > max {
+		return max
+	}
+	return value
+}
diff --git a/agent/internal/config/config_test.go b/agent/internal/config/config_test.go
new file mode 100644
index 0000000..53e4b08
--- /dev/null
+++ b/agent/internal/config/config_test.go
@@ -0,0 +1,51 @@
+package config
+
+import (
+	"os"
+	"path/filepath"
+	"testing"
+	"time"
+)
+
+func TestLoadClampsHeartbeatInterval(t *testing.T) {
+	tests := []struct {
+		name     string
+		value    string
+		expected int
+	}{
+		{name: "too low", value: "1", expected: MinHeartbeatIntervalSeconds},
+		{name: "too high", value: "7200", expected: MaxHeartbeatIntervalSeconds},
+		{name: "valid", value: "60", expected: 60},
+		{name: "invalid", value: "invalid", expected: DefaultHeartbeatIntervalSeconds},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			configPath := writeTestConfig(t, tt.value)
+			cfg, err := Load(configPath)
+			if err != nil {
+				t.Fatalf("load config: %v", err)
+			}
+			if cfg.HeartbeatIntervalSeconds != tt.expected {
+				t.Fatalf("heartbeat seconds mismatch: got=%d want=%d", cfg.HeartbeatIntervalSeconds, tt.expected)
+			}
+			if cfg.HeartbeatInterval != time.Duration(tt.expected)*time.Second {
+				t.Fatalf("heartbeat interval mismatch: got=%s want=%s", cfg.HeartbeatInterval, time.Duration(tt.expected)*time.Second)
+			}
+		})
+	}
+}
+
+func writeTestConfig(t *testing.T, heartbeatInterval string) string {
+	t.Helper()
+
+	path := filepath.Join(t.TempDir(), "config.yaml")
+	content := "panel_url: \"https://panel.example\"\n" +
+		"agent_id: \"agt_test\"\n" +
+		"agent_secret: \"ias_test\"\n" +
+		"heartbeat_interval_seconds: " + heartbeatInterval + "\n"
+	if err := os.WriteFile(path, []byte(content), 0600); err != nil {
+		t.Fatalf("write config: %v", err)
+	}
+	return path
+}
diff --git a/agent/internal/panel/client.go b/agent/internal/panel/client.go
new file mode 100644
index 0000000..99f9840
--- /dev/null
+++ b/agent/internal/panel/client.go
@@ -0,0 +1,119 @@
+package panel
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"strings"
+	"time"
+
+	"incudal-agent/internal/config"
+	"incudal-agent/internal/protocol"
+)
+
+const heartbeatPath = "/api/agent/heartbeat"
+
+type Client struct {
+	panelURL    string
+	agentID     string
+	agentSecret string
+	httpClient  *http.Client
+}
+
+type HeartbeatResult struct {
+	StatusCode int
+	Body       string
+	OK         bool
+	Upgrade    *UpgradeInstruction
+	LatencyMs  int64
+}
+
+type UpgradeInstruction struct {
+	Available bool   `json:"available"`
+	Version   string `json:"version"`
+	URL       string `json:"url"`
+	SHA256    string `json:"sha256"`
+	Gzip      bool   `json:"gzip"`
+	Size      int64  `json:"size"`
+}
+
+type heartbeatResponse struct {
+	Upgrade *UpgradeInstruction `json:"upgrade"`
+}
+
+func New(cfg config.Config) *Client {
+	return &Client{
+		panelURL:    strings.TrimRight(cfg.PanelURL, "/"),
+		agentID:     cfg.AgentID,
+		agentSecret: cfg.AgentSecret,
+		httpClient: &http.Client{
+			Timeout: cfg.RequestTimeout,
+		},
+	}
+}
+
+func (client *Client) Heartbeat(ctx context.Context, payload map[string]any) (HeartbeatResult, error) {
+	body, err := protocol.CanonicalJSON(payload)
+	if err != nil {
+		return HeartbeatResult{}, err
+	}
+
+	timestamp := protocol.NewTimestamp()
+	nonce, err := protocol.NewNonce()
+	if err != nil {
+		return HeartbeatResult{}, err
+	}
+	bodyHash := protocol.BodySHA256(body)
+	signingPayload := protocol.SigningPayload(http.MethodPost, heartbeatPath, timestamp, nonce, bodyHash)
+	signature := protocol.Signature(client.agentSecret, signingPayload)
+
+	request, err := http.NewRequestWithContext(ctx, http.MethodPost, client.panelURL+heartbeatPath, bytes.NewReader(body))
+	if err != nil {
+		return HeartbeatResult{}, err
+	}
+	request.Header.Set("Content-Type", "application/json")
+	request.Header.Set("x-incudal-agent-id", client.agentID)
+	request.Header.Set("x-incudal-timestamp", timestamp)
+	request.Header.Set("x-incudal-nonce", nonce)
+	request.Header.Set("x-incudal-body-sha256", bodyHash)
+	request.Header.Set("x-incudal-signature", signature)
+
+	startedAt := time.Now()
+	response, err := client.httpClient.Do(request)
+	if err != nil {
+		return HeartbeatResult{}, err
+	}
+	defer response.Body.Close()
+
+	responseBody, err := io.ReadAll(io.LimitReader(response.Body, 1024*1024))
+	if err != nil {
+		return HeartbeatResult{}, err
+	}
+
+	result := HeartbeatResult{
+		StatusCode: response.StatusCode,
+		Body:       string(responseBody),
+		OK:         response.StatusCode >= 200 && response.StatusCode < 300,
+		LatencyMs:  time.Since(startedAt).Milliseconds(),
+	}
+	if !result.OK {
+		return result, fmt.Errorf("heartbeat failed: status=%d body=%s", response.StatusCode, result.Body)
+	}
+
+	var parsedResponse heartbeatResponse
+	if err := json.Unmarshal(responseBody, &parsedResponse); err == nil {
+		result.Upgrade = parsedResponse.Upgrade
+	}
+
+	var parsed map[string]any
+	if err := json.Unmarshal(responseBody, &parsed); err == nil {
+		parsed["latencyMs"] = result.LatencyMs
+		if compact, err := json.Marshal(parsed); err == nil {
+			result.Body = string(compact)
+		}
+	}
+	return result, nil
+}
diff --git a/agent/internal/protocol/signing.go b/agent/internal/protocol/signing.go
new file mode 100644
index 0000000..3b85345
--- /dev/null
+++ b/agent/internal/protocol/signing.go
@@ -0,0 +1,52 @@
+package protocol
+
+import (
+	"crypto/hmac"
+	"crypto/rand"
+	"crypto/sha256"
+	"encoding/base64"
+	"encoding/hex"
+	"encoding/json"
+	"fmt"
+	"strings"
+	"time"
+)
+
+// CanonicalJSON 使用 Go 标准库的 JSON 编码。
+// map key 会按字典序输出，必须与面板端 stableStringify 规则保持一致。
+func CanonicalJSON(value any) ([]byte, error) {
+	return json.Marshal(value)
+}
+
+func BodySHA256(body []byte) string {
+	sum := sha256.Sum256(body)
+	return hex.EncodeToString(sum[:])
+}
+
+func SigningPayload(method string, path string, timestamp string, nonce string, bodyHash string) string {
+	return strings.Join([]string{
+		strings.ToUpper(method),
+		path,
+		timestamp,
+		nonce,
+		strings.ToLower(bodyHash),
+	}, "\n")
+}
+
+func Signature(secret string, payload string) string {
+	mac := hmac.New(sha256.New, []byte(secret))
+	mac.Write([]byte(payload))
+	return hex.EncodeToString(mac.Sum(nil))
+}
+
+func NewTimestamp() string {
+	return fmt.Sprintf("%d", time.Now().UnixMilli())
+}
+
+func NewNonce() (string, error) {
+	var raw [18]byte
+	if _, err := rand.Read(raw[:]); err != nil {
+		return "", err
+	}
+	return base64.RawURLEncoding.EncodeToString(raw[:]), nil
+}
diff --git a/agent/internal/protocol/signing_test.go b/agent/internal/protocol/signing_test.go
new file mode 100644
index 0000000..2f7d4f5
--- /dev/null
+++ b/agent/internal/protocol/signing_test.go
@@ -0,0 +1,49 @@
+package protocol
+
+import "testing"
+
+func TestCanonicalJSONIsStableForMapOrder(t *testing.T) {
+	bodyA := map[string]any{
+		"version": "0.1.0",
+		"resources": map[string]any{
+			"memory": 1024,
+			"cpu":    8,
+		},
+		"capabilities": []any{"heartbeat", "report"},
+	}
+	bodyB := map[string]any{
+		"capabilities": []any{"heartbeat", "report"},
+		"resources": map[string]any{
+			"cpu":    8,
+			"memory": 1024,
+		},
+		"version": "0.1.0",
+	}
+
+	jsonA, err := CanonicalJSON(bodyA)
+	if err != nil {
+		t.Fatalf("canonical json A: %v", err)
+	}
+	jsonB, err := CanonicalJSON(bodyB)
+	if err != nil {
+		t.Fatalf("canonical json B: %v", err)
+	}
+
+	if string(jsonA) != string(jsonB) {
+		t.Fatalf("canonical json mismatch:\nA=%s\nB=%s", jsonA, jsonB)
+	}
+	if BodySHA256(jsonA) != BodySHA256(jsonB) {
+		t.Fatalf("body hash mismatch")
+	}
+}
+
+func TestSignatureChangesWithPath(t *testing.T) {
+	secret := "ias_test_secret"
+	bodyHash := BodySHA256([]byte(`{"ok":true}`))
+	payloadA := SigningPayload("POST", "/api/agent/heartbeat", "1777380000000", "nonce-123456", bodyHash)
+	payloadB := SigningPayload("POST", "/api/agent/report", "1777380000000", "nonce-123456", bodyHash)
+
+	if Signature(secret, payloadA) == Signature(secret, payloadB) {
+		t.Fatalf("signature should change when request path changes")
+	}
+}
diff --git a/agent/internal/report/incus.go b/agent/internal/report/incus.go
new file mode 100644
index 0000000..79a1853
--- /dev/null
+++ b/agent/internal/report/incus.go
@@ -0,0 +1,362 @@
+package report
+
+import (
+	"bytes"
+	"context"
+	"crypto/sha256"
+	"encoding/hex"
+	"encoding/json"
+	"fmt"
+	"net"
+	"net/http"
+	"net/url"
+	"regexp"
+	"strconv"
+	"strings"
+	"sync"
+	"time"
+)
+
+const (
+	maxReportedIncusInstances = 1000
+	incusStateConcurrency     = 8
+)
+
+var externalGuestInterfacePattern = regexp.MustCompile(`^(eth[0-9]+|en(?:o|p|s|x)[a-z0-9]+)$`)
+
+type incusAPIResponse struct {
+	Type     string          `json:"type"`
+	Status   string          `json:"status"`
+	Error    string          `json:"error"`
+	Metadata json.RawMessage `json:"metadata"`
+}
+
+type incusInstanceSummary struct {
+	Name       string `json:"name"`
+	Status     string `json:"status"`
+	StatusCode int    `json:"status_code"`
+	Type       string `json:"type"`
+}
+
+type incusInstanceState struct {
+	Status  string                        `json:"status"`
+	Network map[string]incusNetworkDevice `json:"network"`
+}
+
+type incusNetworkDevice struct {
+	Addresses []incusNetworkAddress `json:"addresses"`
+	Hwaddr    string                `json:"hwaddr"`
+	Counters  incusNetworkCounters  `json:"counters"`
+	State     string                `json:"state"`
+}
+
+type incusNetworkAddress struct {
+	Family  string `json:"family"`
+	Address string `json:"address"`
+}
+
+type incusNetworkCounters struct {
+	BytesReceived json.Number `json:"bytes_received"`
+	BytesSent     json.Number `json:"bytes_sent"`
+}
+
+type trafficCounters struct {
+	rx uint64
+	tx uint64
+}
+
+func collectIncusInstanceReport() map[string]any {
+	reportedAt := time.Now().UTC().Format(time.RFC3339)
+	socketPath, ok := detectIncusSocket()
+	if !ok {
+		return map[string]any{
+			"available":  false,
+			"reportedAt": reportedAt,
+			"total":      0,
+			"items":      []any{},
+		}
+	}
+
+	// 只通过本机 Unix socket 做只读采集，不要求宿主机开放额外 Agent 端口。
+	client := newIncusUnixHTTPClient(socketPath)
+	instances, err := listIncusInstances(client)
+	if err != nil {
+		return map[string]any{
+			"available":  false,
+			"reportedAt": reportedAt,
+			"total":      0,
+			"items":      []any{},
+			"error":      truncateReportError(err),
+		}
+	}
+
+	limitedInstances := instances
+	if len(limitedInstances) > maxReportedIncusInstances {
+		limitedInstances = limitedInstances[:maxReportedIncusInstances]
+	}
+
+	items := make([]map[string]any, len(limitedInstances))
+	var wg sync.WaitGroup
+	semaphore := make(chan struct{}, incusStateConcurrency)
+
+	for index, instance := range limitedInstances {
+		wg.Add(1)
+		go func(index int, instance incusInstanceSummary) {
+			defer wg.Done()
+			semaphore <- struct{}{}
+			defer func() { <-semaphore }()
+
+			items[index] = buildIncusInstanceReportItem(client, instance)
+		}(index, instance)
+	}
+	wg.Wait()
+
+	normalizedItems := make([]any, 0, len(items))
+	for _, item := range items {
+		if item != nil {
+			normalizedItems = append(normalizedItems, item)
+		}
+	}
+
+	return map[string]any{
+		"available":  true,
+		"reportedAt": reportedAt,
+		"total":      len(instances),
+		"truncated":  len(instances) > len(limitedInstances),
+		"items":      normalizedItems,
+	}
+}
+
+func newIncusUnixHTTPClient(socketPath string) *http.Client {
+	transport := &http.Transport{
+		DialContext: func(ctx context.Context, _network string, _addr string) (net.Conn, error) {
+			var dialer net.Dialer
+			return dialer.DialContext(ctx, "unix", socketPath)
+		},
+		DisableCompression: true,
+		DisableKeepAlives:  true,
+	}
+
+	return &http.Client{
+		Transport: transport,
+		Timeout:   8 * time.Second,
+	}
+}
+
+func listIncusInstances(client *http.Client) ([]incusInstanceSummary, error) {
+	return incusRequest[[]incusInstanceSummary](client, "/1.0/instances?recursion=1")
+}
+
+func getIncusInstanceState(client *http.Client, name string) (incusInstanceState, error) {
+	return incusRequest[incusInstanceState](client, "/1.0/instances/"+url.PathEscape(name)+"/state")
+}
+
+func incusRequest[T any](client *http.Client, path string) (T, error) {
+	var zero T
+	request, err := http.NewRequest(http.MethodGet, "http://incus"+path, nil)
+	if err != nil {
+		return zero, err
+	}
+
+	response, err := client.Do(request)
+	if err != nil {
+		return zero, err
+	}
+	defer response.Body.Close()
+
+	if response.StatusCode < 200 || response.StatusCode >= 300 {
+		return zero, fmt.Errorf("incus request failed: path=%s status=%d", path, response.StatusCode)
+	}
+
+	var envelope incusAPIResponse
+	decoder := json.NewDecoder(response.Body)
+	decoder.UseNumber()
+	if err := decoder.Decode(&envelope); err != nil {
+		return zero, err
+	}
+	if envelope.Type == "error" {
+		if envelope.Error != "" {
+			return zero, fmt.Errorf("incus error: %s", envelope.Error)
+		}
+		return zero, fmt.Errorf("incus error: status=%s", envelope.Status)
+	}
+
+	metadataDecoder := json.NewDecoder(bytes.NewReader(envelope.Metadata))
+	metadataDecoder.UseNumber()
+	if err := metadataDecoder.Decode(&zero); err != nil {
+		return zero, err
+	}
+	return zero, nil
+}
+
+func buildIncusInstanceReportItem(client *http.Client, instance incusInstanceSummary) map[string]any {
+	item := map[string]any{
+		"name":       instance.Name,
+		"status":     instance.Status,
+		"statusCode": instance.StatusCode,
+		"type":       instance.Type,
+	}
+
+	if instance.Name == "" {
+		return item
+	}
+
+	state, err := getIncusInstanceState(client, instance.Name)
+	if err != nil {
+		item["error"] = truncateReportError(err)
+		return item
+	}
+	if state.Status != "" {
+		item["status"] = state.Status
+	}
+
+	counters := getTrafficCountersFromIncusState(instance.Name, state)
+	item["traffic"] = map[string]any{
+		"rxBytes": strconv.FormatUint(counters.rx, 10),
+		"txBytes": strconv.FormatUint(counters.tx, 10),
+	}
+
+	if ipv4, ipv6 := firstRoutableAddresses(state.Network); ipv4 != "" || ipv6 != "" {
+		network := map[string]any{}
+		if ipv4 != "" {
+			network["ipv4"] = ipv4
+		}
+		if ipv6 != "" {
+			network["ipv6"] = ipv6
+		}
+		item["network"] = network
+	}
+
+	return item
+}
+
+func getTrafficCountersFromIncusState(instanceName string, state incusInstanceState) trafficCounters {
+	billableVmMacs := generateBillableVmMacs(instanceName)
+	totals := trafficCounters{}
+	fallbackInterfaces := make([]incusNetworkDevice, 0)
+	hasStrictBillableInterface := false
+
+	// 与面板旧采集口径保持一致，避免 guest 内部 bridge/veth 被重复计费。
+	for ifName, ifData := range state.Network {
+		if isBillableNetworkInterface(ifName, ifData, billableVmMacs) {
+			hasStrictBillableInterface = true
+			addNetworkCounters(&totals, ifData.Counters)
+			continue
+		}
+
+		if isLikelyExternalGuestInterface(ifName) {
+			fallbackInterfaces = append(fallbackInterfaces, ifData)
+		}
+	}
+
+	if !hasStrictBillableInterface {
+		for _, ifData := range fallbackInterfaces {
+			addNetworkCounters(&totals, ifData.Counters)
+		}
+	}
+
+	return totals
+}
+
+func isBillableNetworkInterface(ifName string, ifData incusNetworkDevice, billableVmMacs map[string]struct{}) bool {
+	if ifName == "lo" {
+		return false
+	}
+	if ifName == "eth0" || ifName == "eth1" {
+		return true
+	}
+
+	hwaddr := strings.ToLower(strings.TrimSpace(ifData.Hwaddr))
+	if hwaddr == "" {
+		return false
+	}
+	_, ok := billableVmMacs[hwaddr]
+	return ok
+}
+
+func isLikelyExternalGuestInterface(ifName string) bool {
+	return externalGuestInterfacePattern.MatchString(strings.ToLower(ifName))
+}
+
+func addNetworkCounters(totals *trafficCounters, counters incusNetworkCounters) {
+	totals.rx += jsonNumberToUint64(counters.BytesReceived)
+	totals.tx += jsonNumberToUint64(counters.BytesSent)
+}
+
+func jsonNumberToUint64(value json.Number) uint64 {
+	raw := strings.TrimSpace(value.String())
+	if raw == "" {
+		return 0
+	}
+	parsed, err := strconv.ParseUint(raw, 10, 64)
+	if err == nil {
+		return parsed
+	}
+	return 0
+}
+
+func generateBillableVmMacs(seed string) map[string]struct{} {
+	return map[string]struct{}{
+		generateVmNicMac(seed, "eth0"): {},
+		generateVmNicMac(seed, "eth1"): {},
+	}
+}
+
+func generateVmNicMac(seed string, nicLabel string) string {
+	hash := sha256.Sum256([]byte("incudal-vm-nic:" + seed + ":" + nicLabel))
+	bytes := []byte{0x02, hash[0], hash[1], hash[2], hash[3], hash[4]}
+	encoded := hex.EncodeToString(bytes)
+	return strings.Join([]string{
+		encoded[0:2],
+		encoded[2:4],
+		encoded[4:6],
+		encoded[6:8],
+		encoded[8:10],
+		encoded[10:12],
+	}, ":")
+}
+
+func firstRoutableAddresses(network map[string]incusNetworkDevice) (string, string) {
+	var ipv4 string
+	var ipv6 string
+
+	for _, ifData := range network {
+		for _, address := range ifData.Addresses {
+			if address.Address == "" {
+				continue
+			}
+			ip := net.ParseIP(address.Address)
+			if ip == nil || !isRoutableGuestIP(ip) {
+				continue
+			}
+			if ipv4 == "" && ip.To4() != nil && strings.EqualFold(address.Family, "inet") {
+				ipv4 = address.Address
+				continue
+			}
+			if ipv6 == "" && ip.To4() == nil && strings.EqualFold(address.Family, "inet6") {
+				ipv6 = address.Address
+			}
+		}
+	}
+
+	return ipv4, ipv6
+}
+
+func isRoutableGuestIP(ip net.IP) bool {
+	return !ip.IsLoopback() &&
+		!ip.IsUnspecified() &&
+		!ip.IsLinkLocalUnicast() &&
+		!ip.IsLinkLocalMulticast() &&
+		!ip.IsMulticast()
+}
+
+func truncateReportError(err error) string {
+	if err == nil {
+		return ""
+	}
+	message := err.Error()
+	if len(message) > 200 {
+		return message[:200]
+	}
+	return message
+}
diff --git a/agent/internal/report/report.go b/agent/internal/report/report.go
new file mode 100644
index 0000000..d99d735
--- /dev/null
+++ b/agent/internal/report/report.go
@@ -0,0 +1,298 @@
+package report
+
+import (
+	"os"
+	"runtime"
+	"strconv"
+	"strings"
+	"syscall"
+	"time"
+)
+
+var incusSocketCandidates = []string{
+	"/var/lib/incus/unix.socket",
+	"/var/snap/incus/common/lxd/unix.socket",
+	"/var/lib/lxd/unix.socket",
+}
+
+func HeartbeatPayload(version string, heartbeatIntervalSeconds int) map[string]any {
+	return map[string]any{
+		"version":      version,
+		"capabilities": []any{"heartbeat", "report", "host-metrics", "instance-status", "traffic-counters"},
+		"runtime": map[string]any{
+			"goos":   runtime.GOOS,
+			"goarch": runtime.GOARCH,
+		},
+		"incus":     detectIncus(),
+		"instances": collectIncusInstanceReport(),
+		"resources": collectResources(),
+		"metrics":   collectMetrics(heartbeatIntervalSeconds),
+	}
+}
+
+func collectResources() map[string]any {
+	resources := map[string]any{
+		"cpuTotal": runtime.NumCPU(),
+	}
+	if cpuUsagePercent := readCPUUsagePercent(); cpuUsagePercent >= 0 {
+		resources["cpuUsagePercent"] = cpuUsagePercent
+	}
+	for key, value := range readMemoryStats() {
+		resources[key] = value
+	}
+	for key, value := range readDiskStats("/") {
+		resources[key] = value
+	}
+	if processCount := readProcessCount(); processCount >= 0 {
+		resources["processCount"] = processCount
+	}
+	return resources
+}
+
+func collectMetrics(heartbeatIntervalSeconds int) map[string]any {
+	switch {
+	case heartbeatIntervalSeconds <= 0:
+		heartbeatIntervalSeconds = 30
+	case heartbeatIntervalSeconds < 5:
+		heartbeatIntervalSeconds = 5
+	case heartbeatIntervalSeconds > 3600:
+		heartbeatIntervalSeconds = 3600
+	}
+
+	metrics := map[string]any{
+		"reportedAt":               time.Now().UTC().Format(time.RFC3339),
+		"heartbeatIntervalSeconds": heartbeatIntervalSeconds,
+	}
+	if uptimeSeconds := readUptimeSeconds(); uptimeSeconds > 0 {
+		metrics["uptimeSeconds"] = uptimeSeconds
+	}
+	for key, value := range readLoadAverage() {
+		metrics[key] = value
+	}
+	return metrics
+}
+
+func detectIncus() map[string]any {
+	socketPath, ok := detectIncusSocket()
+	if ok {
+		return map[string]any{
+			"available": true,
+			"socket":    socketPath,
+		}
+	}
+	return map[string]any{
+		"available": false,
+		"socket":    "",
+	}
+}
+
+func detectIncusSocket() (string, bool) {
+	for _, socketPath := range incusSocketCandidates {
+		if info, err := os.Stat(socketPath); err == nil && !info.IsDir() {
+			return socketPath, true
+		}
+	}
+	return "", false
+}
+
+type cpuStat struct {
+	idle  uint64
+	total uint64
+}
+
+func readCPUUsagePercent() float64 {
+	before, ok := readCPUStat()
+	if !ok {
+		return -1
+	}
+	time.Sleep(200 * time.Millisecond)
+	after, ok := readCPUStat()
+	if !ok {
+		return -1
+	}
+
+	totalDelta := after.total - before.total
+	idleDelta := after.idle - before.idle
+	if totalDelta == 0 || idleDelta > totalDelta {
+		return -1
+	}
+
+	return roundPercent(float64(totalDelta-idleDelta) / float64(totalDelta) * 100)
+}
+
+func readCPUStat() (cpuStat, bool) {
+	content, err := os.ReadFile("/proc/stat")
+	if err != nil {
+		return cpuStat{}, false
+	}
+	for _, line := range strings.Split(string(content), "\n") {
+		if !strings.HasPrefix(line, "cpu ") {
+			continue
+		}
+		fields := strings.Fields(line)
+		if len(fields) < 5 {
+			return cpuStat{}, false
+		}
+
+		var values []uint64
+		for _, field := range fields[1:] {
+			value, err := strconv.ParseUint(field, 10, 64)
+			if err != nil {
+				return cpuStat{}, false
+			}
+			values = append(values, value)
+		}
+
+		var total uint64
+		for _, value := range values {
+			total += value
+		}
+		idle := values[3]
+		if len(values) > 4 {
+			idle += values[4]
+		}
+		return cpuStat{idle: idle, total: total}, true
+	}
+	return cpuStat{}, false
+}
+
+func readMemoryStats() map[string]any {
+	meminfo := readMeminfoKB()
+	stats := map[string]any{}
+	memTotal := meminfo["MemTotal"]
+	memAvailable := meminfo["MemAvailable"]
+	if memTotal > 0 {
+		memUsed := memTotal - memAvailable
+		if memUsed < 0 {
+			memUsed = 0
+		}
+		stats["memoryTotalMb"] = memTotal / 1024
+		stats["memoryAvailableMb"] = memAvailable / 1024
+		stats["memoryUsedMb"] = memUsed / 1024
+		stats["memoryUsagePercent"] = roundPercent(float64(memUsed) / float64(memTotal) * 100)
+	}
+
+	swapTotal := meminfo["SwapTotal"]
+	swapFree := meminfo["SwapFree"]
+	if swapTotal > 0 {
+		swapUsed := swapTotal - swapFree
+		if swapUsed < 0 {
+			swapUsed = 0
+		}
+		stats["swapTotalMb"] = swapTotal / 1024
+		stats["swapUsedMb"] = swapUsed / 1024
+		stats["swapUsagePercent"] = roundPercent(float64(swapUsed) / float64(swapTotal) * 100)
+	} else {
+		stats["swapTotalMb"] = int64(0)
+		stats["swapUsedMb"] = int64(0)
+		stats["swapUsagePercent"] = float64(0)
+	}
+
+	return stats
+}
+
+func readMeminfoKB() map[string]int64 {
+	content, err := os.ReadFile("/proc/meminfo")
+	if err != nil {
+		return map[string]int64{}
+	}
+
+	values := map[string]int64{}
+	for _, line := range strings.Split(string(content), "\n") {
+		key, rest, ok := strings.Cut(line, ":")
+		if !ok {
+			continue
+		}
+		fields := strings.Fields(rest)
+		if len(fields) == 0 {
+			continue
+		}
+		kb, err := strconv.ParseInt(fields[0], 10, 64)
+		if err != nil {
+			continue
+		}
+		values[key] = kb
+	}
+	return values
+}
+
+func readDiskStats(path string) map[string]any {
+	var stat syscall.Statfs_t
+	if err := syscall.Statfs(path, &stat); err != nil {
+		return map[string]any{}
+	}
+
+	blockSize := uint64(stat.Bsize)
+	total := stat.Blocks * blockSize
+	free := stat.Bfree * blockSize
+	if total == 0 || free > total {
+		return map[string]any{}
+	}
+
+	used := total - free
+	return map[string]any{
+		"diskMountpoint":     path,
+		"diskTotalBytes":     total,
+		"diskUsedBytes":      used,
+		"diskAvailableBytes": stat.Bavail * blockSize,
+		"diskUsagePercent":   roundPercent(float64(used) / float64(total) * 100),
+	}
+}
+
+func readLoadAverage() map[string]any {
+	content, err := os.ReadFile("/proc/loadavg")
+	if err != nil {
+		return map[string]any{}
+	}
+	fields := strings.Fields(string(content))
+	if len(fields) < 3 {
+		return map[string]any{}
+	}
+
+	loads := map[string]any{}
+	keys := []string{"load1", "load5", "load15"}
+	for index, key := range keys {
+		value, err := strconv.ParseFloat(fields[index], 64)
+		if err == nil {
+			loads[key] = value
+		}
+	}
+	return loads
+}
+
+func readProcessCount() int {
+	entries, err := os.ReadDir("/proc")
+	if err != nil {
+		return -1
+	}
+	count := 0
+	for _, entry := range entries {
+		if !entry.IsDir() {
+			continue
+		}
+		if _, err := strconv.Atoi(entry.Name()); err == nil {
+			count++
+		}
+	}
+	return count
+}
+
+func readUptimeSeconds() int64 {
+	content, err := os.ReadFile("/proc/uptime")
+	if err != nil {
+		return 0
+	}
+	fields := strings.Fields(string(content))
+	if len(fields) == 0 {
+		return 0
+	}
+	value, err := strconv.ParseFloat(fields[0], 64)
+	if err != nil {
+		return 0
+	}
+	return int64(value)
+}
+
+func roundPercent(value float64) float64 {
+	return float64(int(value*10+0.5)) / 10
+}
diff --git a/agent/internal/report/report_test.go b/agent/internal/report/report_test.go
new file mode 100644
index 0000000..ce02d2e
--- /dev/null
+++ b/agent/internal/report/report_test.go
@@ -0,0 +1,166 @@
+package report
+
+import "testing"
+
+func TestHeartbeatPayloadIncludesHostMetrics(t *testing.T) {
+	payload := HeartbeatPayload("test-version", 30)
+
+	capabilities, ok := payload["capabilities"].([]any)
+	if !ok {
+		t.Fatalf("capabilities missing or invalid: %#v", payload["capabilities"])
+	}
+	if !containsCapability(capabilities, "host-metrics") {
+		t.Fatalf("host-metrics capability missing: %#v", capabilities)
+	}
+	if !containsCapability(capabilities, "instance-status") {
+		t.Fatalf("instance-status capability missing: %#v", capabilities)
+	}
+	if !containsCapability(capabilities, "traffic-counters") {
+		t.Fatalf("traffic-counters capability missing: %#v", capabilities)
+	}
+
+	instances, ok := payload["instances"].(map[string]any)
+	if !ok {
+		t.Fatalf("instances report missing or invalid: %#v", payload["instances"])
+	}
+	for _, key := range []string{"available", "reportedAt", "total", "items"} {
+		if _, ok := instances[key]; !ok {
+			t.Fatalf("instances key %s missing: %#v", key, instances)
+		}
+	}
+
+	runtimeInfo, ok := payload["runtime"].(map[string]any)
+	if !ok {
+		t.Fatalf("runtime missing or invalid: %#v", payload["runtime"])
+	}
+	for _, key := range []string{"goos", "goarch"} {
+		if _, ok := runtimeInfo[key]; !ok {
+			t.Fatalf("runtime key %s missing: %#v", key, runtimeInfo)
+		}
+	}
+
+	resources, ok := payload["resources"].(map[string]any)
+	if !ok {
+		t.Fatalf("resources missing or invalid: %#v", payload["resources"])
+	}
+	for _, key := range []string{
+		"cpuTotal",
+		"cpuUsagePercent",
+		"memoryTotalMb",
+		"memoryUsedMb",
+		"memoryUsagePercent",
+		"swapTotalMb",
+		"swapUsedMb",
+		"swapUsagePercent",
+		"diskTotalBytes",
+		"diskUsedBytes",
+		"diskUsagePercent",
+		"processCount",
+	} {
+		if _, ok := resources[key]; !ok {
+			t.Fatalf("resource key %s missing: %#v", key, resources)
+		}
+	}
+
+	metrics, ok := payload["metrics"].(map[string]any)
+	if !ok {
+		t.Fatalf("metrics missing or invalid: %#v", payload["metrics"])
+	}
+	for _, key := range []string{"reportedAt", "heartbeatIntervalSeconds", "uptimeSeconds", "load1", "load5", "load15"} {
+		if _, ok := metrics[key]; !ok {
+			t.Fatalf("metric key %s missing: %#v", key, metrics)
+		}
+	}
+	if metrics["heartbeatIntervalSeconds"] != 30 {
+		t.Fatalf("heartbeat interval mismatch: %#v", metrics["heartbeatIntervalSeconds"])
+	}
+}
+
+func TestHeartbeatPayloadClampsHeartbeatInterval(t *testing.T) {
+	tests := []struct {
+		name     string
+		input    int
+		expected int
+	}{
+		{name: "zero falls back", input: 0, expected: 30},
+		{name: "too low clamps to min", input: 1, expected: 5},
+		{name: "too high clamps to max", input: 7200, expected: 3600},
+		{name: "valid stays unchanged", input: 60, expected: 60},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			payload := HeartbeatPayload("test-version", tt.input)
+			metrics, ok := payload["metrics"].(map[string]any)
+			if !ok {
+				t.Fatalf("metrics missing or invalid: %#v", payload["metrics"])
+			}
+			if metrics["heartbeatIntervalSeconds"] != tt.expected {
+				t.Fatalf("heartbeat interval mismatch: got=%#v want=%d", metrics["heartbeatIntervalSeconds"], tt.expected)
+			}
+		})
+	}
+}
+
+func TestTrafficCountersFromIncusStateUsesBillableInterfaces(t *testing.T) {
+	state := incusInstanceState{
+		Network: map[string]incusNetworkDevice{
+			"lo": {
+				Counters: incusNetworkCounters{
+					BytesReceived: "999",
+					BytesSent:     "999",
+				},
+			},
+			"eth0": {
+				Counters: incusNetworkCounters{
+					BytesReceived: "100",
+					BytesSent:     "200",
+				},
+			},
+			"docker0": {
+				Counters: incusNetworkCounters{
+					BytesReceived: "300",
+					BytesSent:     "400",
+				},
+			},
+		},
+	}
+
+	counters := getTrafficCountersFromIncusState("vm-test", state)
+	if counters.rx != 100 || counters.tx != 200 {
+		t.Fatalf("traffic counters mismatch: got=%+v", counters)
+	}
+}
+
+func TestTrafficCountersFromIncusStateFallsBackToExternalInterfaces(t *testing.T) {
+	state := incusInstanceState{
+		Network: map[string]incusNetworkDevice{
+			"lo": {
+				Counters: incusNetworkCounters{
+					BytesReceived: "999",
+					BytesSent:     "999",
+				},
+			},
+			"enp5s0": {
+				Counters: incusNetworkCounters{
+					BytesReceived: "123",
+					BytesSent:     "456",
+				},
+			},
+		},
+	}
+
+	counters := getTrafficCountersFromIncusState("vm-test", state)
+	if counters.rx != 123 || counters.tx != 456 {
+		t.Fatalf("traffic counters mismatch: got=%+v", counters)
+	}
+}
+
+func containsCapability(capabilities []any, expected string) bool {
+	for _, capability := range capabilities {
+		if capability == expected {
+			return true
+		}
+	}
+	return false
+}
diff --git a/agent/internal/upgrade/upgrade.go b/agent/internal/upgrade/upgrade.go
new file mode 100644
index 0000000..1a091ba
--- /dev/null
+++ b/agent/internal/upgrade/upgrade.go
@@ -0,0 +1,400 @@
+package upgrade
+
+import (
+	"bytes"
+	"compress/gzip"
+	"context"
+	"crypto/rand"
+	"crypto/sha256"
+	"encoding/hex"
+	"errors"
+	"fmt"
+	"io"
+	"math/big"
+	"net/http"
+	"net/url"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"time"
+
+	"incudal-agent/internal/config"
+	"incudal-agent/internal/panel"
+)
+
+const (
+	defaultServiceName      = "incudal-agent"
+	defaultMaxDownloadBytes = 64 * 1024 * 1024
+)
+
+var ErrUpgradeInProgress = errors.New("agent upgrade already in progress")
+var systemdServiceNamePattern = regexp.MustCompile(`^[A-Za-z0-9_.@-]+$`)
+
+type RestartFunc func(ctx context.Context, serviceName string) error
+
+type Runner struct {
+	BinaryPath       string
+	BackupPath       string
+	LockPath         string
+	ServiceName      string
+	AllowedBaseURL   string
+	HTTPClient       *http.Client
+	Restart          RestartFunc
+	MaxDownloadBytes int64
+}
+
+func DefaultRunner(cfg config.Config) *Runner {
+	binaryPath, err := os.Executable()
+	if err != nil || binaryPath == "" {
+		binaryPath = "/usr/local/bin/incudal-agent"
+	}
+
+	return &Runner{
+		BinaryPath:       binaryPath,
+		BackupPath:       binaryPath + ".bak",
+		LockPath:         defaultLockPath(),
+		ServiceName:      defaultServiceName,
+		AllowedBaseURL:   cfg.PanelURL,
+		HTTPClient:       &http.Client{Timeout: cfg.RequestTimeout},
+		Restart:          restartSystemdService,
+		MaxDownloadBytes: defaultMaxDownloadBytes,
+	}
+}
+
+func RandomJitter(max time.Duration) time.Duration {
+	if max <= 0 {
+		return 0
+	}
+	limit := big.NewInt(int64(max))
+	value, err := rand.Int(rand.Reader, limit)
+	if err != nil {
+		return 0
+	}
+	return time.Duration(value.Int64())
+}
+
+func (runner *Runner) Apply(ctx context.Context, instruction panel.UpgradeInstruction, currentVersion string) error {
+	if !instruction.Available {
+		return nil
+	}
+	if instruction.Version == "" {
+		return errors.New("upgrade version is required")
+	}
+	if instruction.Version == currentVersion {
+		return nil
+	}
+	if instruction.URL == "" {
+		return errors.New("upgrade URL is required")
+	}
+	if instruction.SHA256 == "" {
+		return errors.New("upgrade sha256 is required")
+	}
+	if err := runner.validateUpgradeURL(instruction.URL); err != nil {
+		return err
+	}
+
+	unlock, err := acquireLock(runner.lockPath())
+	if err != nil {
+		return err
+	}
+	defer unlock()
+
+	packageBytes, err := runner.download(ctx, instruction.URL)
+	if err != nil {
+		return err
+	}
+	if err := verifySHA256(packageBytes, instruction.SHA256); err != nil {
+		return err
+	}
+
+	binaryBytes := packageBytes
+	if instruction.Gzip {
+		binaryBytes, err = gunzip(packageBytes)
+		if err != nil {
+			return err
+		}
+	}
+
+	tempPath, err := runner.writeTempBinary(binaryBytes)
+	if err != nil {
+		return err
+	}
+	if err := runner.replaceBinary(tempPath); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+
+	if err := runner.restart(ctx); err != nil {
+		return fmt.Errorf("restart agent after upgrade: %w", err)
+	}
+	return nil
+}
+
+func (runner *Runner) validateUpgradeURL(rawURL string) error {
+	upgradeURL, err := url.Parse(rawURL)
+	if err != nil || upgradeURL.Scheme == "" || upgradeURL.Host == "" {
+		return fmt.Errorf("upgrade URL is invalid: %s", rawURL)
+	}
+	if upgradeURL.Scheme != "http" && upgradeURL.Scheme != "https" {
+		return fmt.Errorf("upgrade URL scheme is not allowed: %s", upgradeURL.Scheme)
+	}
+
+	baseURL, err := url.Parse(strings.TrimRight(runner.AllowedBaseURL, "/"))
+	if err != nil || baseURL.Scheme == "" || baseURL.Host == "" {
+		return fmt.Errorf("panel URL is invalid: %s", runner.AllowedBaseURL)
+	}
+	if !strings.EqualFold(upgradeURL.Scheme, baseURL.Scheme) || !strings.EqualFold(upgradeURL.Host, baseURL.Host) {
+		return errors.New("upgrade URL is outside panel origin")
+	}
+	return nil
+}
+
+func (runner *Runner) download(ctx context.Context, rawURL string) ([]byte, error) {
+	client := runner.HTTPClient
+	if client == nil {
+		client = &http.Client{Timeout: 30 * time.Second}
+	}
+
+	request, err := http.NewRequestWithContext(ctx, http.MethodGet, rawURL, nil)
+	if err != nil {
+		return nil, err
+	}
+	response, err := client.Do(request)
+	if err != nil {
+		return nil, err
+	}
+	defer response.Body.Close()
+
+	if response.StatusCode < 200 || response.StatusCode >= 300 {
+		body, _ := io.ReadAll(io.LimitReader(response.Body, 4096))
+		return nil, fmt.Errorf("download upgrade failed: status=%d body=%s", response.StatusCode, string(body))
+	}
+
+	limit := runner.MaxDownloadBytes
+	if limit <= 0 {
+		limit = defaultMaxDownloadBytes
+	}
+	body, err := io.ReadAll(io.LimitReader(response.Body, limit+1))
+	if err != nil {
+		return nil, err
+	}
+	if int64(len(body)) > limit {
+		return nil, fmt.Errorf("upgrade package exceeds %d bytes", limit)
+	}
+	return body, nil
+}
+
+func (runner *Runner) writeTempBinary(binaryBytes []byte) (string, error) {
+	binaryPath := runner.binaryPath()
+	tempFile, err := os.CreateTemp(filepath.Dir(binaryPath), ".incudal-agent-upgrade-*")
+	if err != nil {
+		return "", err
+	}
+	tempPath := tempFile.Name()
+	defer tempFile.Close()
+
+	if _, err := tempFile.Write(binaryBytes); err != nil {
+		_ = os.Remove(tempPath)
+		return "", err
+	}
+	if err := tempFile.Chmod(0755); err != nil {
+		_ = os.Remove(tempPath)
+		return "", err
+	}
+	return tempPath, nil
+}
+
+func (runner *Runner) replaceBinary(tempPath string) error {
+	binaryPath := runner.binaryPath()
+	backupPath := runner.backupPath()
+
+	if _, err := os.Stat(binaryPath); err == nil {
+		_ = os.Remove(backupPath)
+		if err := copyFile(binaryPath, backupPath); err != nil {
+			return fmt.Errorf("backup current agent: %w", err)
+		}
+	}
+
+	if err := os.Rename(tempPath, binaryPath); err != nil {
+		return fmt.Errorf("replace agent binary: %w", err)
+	}
+	return nil
+}
+
+func (runner *Runner) rollback() error {
+	backupPath := runner.backupPath()
+	if _, err := os.Stat(backupPath); err != nil {
+		return err
+	}
+	return os.Rename(backupPath, runner.binaryPath())
+}
+
+func (runner *Runner) restart(ctx context.Context) error {
+	if runner.Restart == nil {
+		return nil
+	}
+	serviceName := runner.ServiceName
+	if serviceName == "" {
+		serviceName = defaultServiceName
+	}
+	return runner.Restart(ctx, serviceName)
+}
+
+func (runner *Runner) binaryPath() string {
+	if runner.BinaryPath != "" {
+		return runner.BinaryPath
+	}
+	return "/usr/local/bin/incudal-agent"
+}
+
+func (runner *Runner) backupPath() string {
+	if runner.BackupPath != "" {
+		return runner.BackupPath
+	}
+	return runner.binaryPath() + ".bak"
+}
+
+func (runner *Runner) lockPath() string {
+	if runner.LockPath != "" {
+		return runner.LockPath
+	}
+	return defaultLockPath()
+}
+
+func defaultLockPath() string {
+	if info, err := os.Stat("/run"); err == nil && info.IsDir() {
+		return "/run/incudal-agent-upgrade.lock"
+	}
+	return filepath.Join(os.TempDir(), "incudal-agent-upgrade.lock")
+}
+
+func acquireLock(lockPath string) (func(), error) {
+	file, err := os.OpenFile(lockPath, os.O_CREATE|os.O_EXCL|os.O_WRONLY, 0600)
+	if err != nil {
+		if errors.Is(err, os.ErrExist) {
+			return nil, ErrUpgradeInProgress
+		}
+		return nil, err
+	}
+	_, _ = fmt.Fprintf(file, "%d\n", os.Getpid())
+	_ = file.Close()
+
+	return func() {
+		_ = os.Remove(lockPath)
+	}, nil
+}
+
+func verifySHA256(payload []byte, expected string) error {
+	sum := sha256.Sum256(payload)
+	actual := hex.EncodeToString(sum[:])
+	if !strings.EqualFold(actual, expected) {
+		return fmt.Errorf("upgrade sha256 mismatch: expected=%s actual=%s", expected, actual)
+	}
+	return nil
+}
+
+func gunzip(payload []byte) ([]byte, error) {
+	reader, err := gzip.NewReader(bytes.NewReader(payload))
+	if err != nil {
+		return nil, err
+	}
+	defer reader.Close()
+	return io.ReadAll(reader)
+}
+
+func copyFile(source string, target string) error {
+	sourceFile, err := os.Open(source)
+	if err != nil {
+		return err
+	}
+	defer sourceFile.Close()
+
+	info, err := sourceFile.Stat()
+	if err != nil {
+		return err
+	}
+	mode := info.Mode().Perm()
+	if mode == 0 {
+		mode = 0755
+	}
+
+	targetFile, err := os.OpenFile(target, os.O_CREATE|os.O_TRUNC|os.O_WRONLY, mode)
+	if err != nil {
+		return err
+	}
+	defer targetFile.Close()
+
+	if _, err := io.Copy(targetFile, sourceFile); err != nil {
+		return err
+	}
+	return targetFile.Chmod(mode)
+}
+
+func restartSystemdService(ctx context.Context, serviceName string) error {
+	if !systemdServiceNamePattern.MatchString(serviceName) {
+		return fmt.Errorf("invalid systemd service name: %s", serviceName)
+	}
+
+	if err := scheduleSystemdRestart(ctx, serviceName); err == nil {
+		return nil
+	}
+
+	systemctlPath, err := exec.LookPath("systemctl")
+	if err != nil {
+		return err
+	}
+
+	// 不等待 systemctl 完成。Agent 正在重启自身，等待子进程会在服务停止时
+	// 收到 SIGTERM，旧逻辑会误判失败并回滚已替换的新二进制。
+	command := exec.CommandContext(ctx, systemctlPath, "restart", serviceName)
+	return command.Start()
+}
+
+func scheduleSystemdRestart(ctx context.Context, serviceName string) error {
+	systemdRunPath, err := exec.LookPath("systemd-run")
+	if err != nil {
+		return err
+	}
+	systemctlPath, err := exec.LookPath("systemctl")
+	if err != nil {
+		return err
+	}
+
+	unitName := fmt.Sprintf("incudal-agent-restart-%d", os.Getpid())
+	args := []string{
+		"--unit", unitName,
+		"--description", "Restart Incudal Agent after self-upgrade",
+		"--on-active=2s",
+		"--collect",
+		systemctlPath, "restart", serviceName,
+	}
+
+	command := exec.CommandContext(ctx, systemdRunPath, args...)
+	output, err := command.CombinedOutput()
+	if err == nil {
+		return nil
+	}
+
+	// 老版本 systemd 可能不支持 --collect，降级重试一次。
+	if strings.Contains(string(output), "unrecognized option '--collect'") ||
+		strings.Contains(string(output), "Unknown option --collect") {
+		args = []string{
+			"--unit", unitName,
+			"--description", "Restart Incudal Agent after self-upgrade",
+			"--on-active=2s",
+			systemctlPath, "restart", serviceName,
+		}
+		command = exec.CommandContext(ctx, systemdRunPath, args...)
+		output, err = command.CombinedOutput()
+	}
+	if err != nil {
+		trimmedOutput := strings.TrimSpace(string(output))
+		if trimmedOutput == "" {
+			return err
+		}
+		return fmt.Errorf("%w: %s", err, trimmedOutput)
+	}
+	return nil
+}
diff --git a/agent/internal/upgrade/upgrade_test.go b/agent/internal/upgrade/upgrade_test.go
new file mode 100644
index 0000000..f889111
--- /dev/null
+++ b/agent/internal/upgrade/upgrade_test.go
@@ -0,0 +1,230 @@
+package upgrade
+
+import (
+	"bytes"
+	"compress/gzip"
+	"context"
+	"crypto/sha256"
+	"encoding/hex"
+	"errors"
+	"net/http"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"testing"
+
+	"incudal-agent/internal/panel"
+)
+
+func TestApplyUpgradeReplacesBinaryAndRestarts(t *testing.T) {
+	tempDir := t.TempDir()
+	binaryPath := filepath.Join(tempDir, "incudal-agent")
+	if err := os.WriteFile(binaryPath, []byte("old-binary"), 0755); err != nil {
+		t.Fatalf("write current binary: %v", err)
+	}
+
+	nextBinary := []byte("new-binary")
+	packageBytes := gzipBytes(t, nextBinary)
+	sha := sha256Hex(packageBytes)
+	server := httptest.NewServer(http.HandlerFunc(func(response http.ResponseWriter, request *http.Request) {
+		response.WriteHeader(http.StatusOK)
+		_, _ = response.Write(packageBytes)
+	}))
+	defer server.Close()
+
+	restarted := false
+	runner := Runner{
+		BinaryPath:       binaryPath,
+		BackupPath:       binaryPath + ".bak",
+		LockPath:         filepath.Join(tempDir, "upgrade.lock"),
+		ServiceName:      "incudal-agent",
+		AllowedBaseURL:   server.URL,
+		HTTPClient:       server.Client(),
+		MaxDownloadBytes: 1024 * 1024,
+		Restart: func(_ context.Context, serviceName string) error {
+			if serviceName != "incudal-agent" {
+				t.Fatalf("unexpected service name: %s", serviceName)
+			}
+			restarted = true
+			return nil
+		},
+	}
+
+	err := runner.Apply(context.Background(), panel.UpgradeInstruction{
+		Available: true,
+		Version:   "v2",
+		URL:       server.URL + "/incudal-agent-linux-amd64.gz",
+		SHA256:    sha,
+		Gzip:      true,
+	}, "v1")
+	if err != nil {
+		t.Fatalf("apply upgrade: %v", err)
+	}
+	if !restarted {
+		t.Fatalf("restart was not called")
+	}
+
+	actual, err := os.ReadFile(binaryPath)
+	if err != nil {
+		t.Fatalf("read replaced binary: %v", err)
+	}
+	if string(actual) != string(nextBinary) {
+		t.Fatalf("binary mismatch: %q", string(actual))
+	}
+
+	backup, err := os.ReadFile(binaryPath + ".bak")
+	if err != nil {
+		t.Fatalf("read backup binary: %v", err)
+	}
+	if string(backup) != "old-binary" {
+		t.Fatalf("backup mismatch: %q", string(backup))
+	}
+}
+
+func TestApplyUpgradeRejectsBadSHA(t *testing.T) {
+	tempDir := t.TempDir()
+	binaryPath := filepath.Join(tempDir, "incudal-agent")
+	if err := os.WriteFile(binaryPath, []byte("old-binary"), 0755); err != nil {
+		t.Fatalf("write current binary: %v", err)
+	}
+
+	server := httptest.NewServer(http.HandlerFunc(func(response http.ResponseWriter, request *http.Request) {
+		response.WriteHeader(http.StatusOK)
+		_, _ = response.Write([]byte("payload"))
+	}))
+	defer server.Close()
+
+	restarted := false
+	runner := Runner{
+		BinaryPath:       binaryPath,
+		BackupPath:       binaryPath + ".bak",
+		LockPath:         filepath.Join(tempDir, "upgrade.lock"),
+		AllowedBaseURL:   server.URL,
+		HTTPClient:       server.Client(),
+		MaxDownloadBytes: 1024 * 1024,
+		Restart: func(context.Context, string) error {
+			restarted = true
+			return nil
+		},
+	}
+
+	err := runner.Apply(context.Background(), panel.UpgradeInstruction{
+		Available: true,
+		Version:   "v2",
+		URL:       server.URL + "/incudal-agent-linux-amd64.gz",
+		SHA256:    "0000000000000000000000000000000000000000000000000000000000000000",
+		Gzip:      true,
+	}, "v1")
+	if err == nil {
+		t.Fatalf("expected sha mismatch")
+	}
+	if restarted {
+		t.Fatalf("restart should not be called")
+	}
+
+	current, err := os.ReadFile(binaryPath)
+	if err != nil {
+		t.Fatalf("read current binary: %v", err)
+	}
+	if string(current) != "old-binary" {
+		t.Fatalf("current binary should stay unchanged: %q", string(current))
+	}
+}
+
+func TestApplyUpgradeDoesNotRollbackWhenSelfRestartIsInterrupted(t *testing.T) {
+	tempDir := t.TempDir()
+	binaryPath := filepath.Join(tempDir, "incudal-agent")
+	if err := os.WriteFile(binaryPath, []byte("old-binary"), 0755); err != nil {
+		t.Fatalf("write current binary: %v", err)
+	}
+
+	nextBinary := []byte("new-binary")
+	packageBytes := gzipBytes(t, nextBinary)
+	sha := sha256Hex(packageBytes)
+	server := httptest.NewServer(http.HandlerFunc(func(response http.ResponseWriter, request *http.Request) {
+		response.WriteHeader(http.StatusOK)
+		_, _ = response.Write(packageBytes)
+	}))
+	defer server.Close()
+
+	runner := Runner{
+		BinaryPath:       binaryPath,
+		BackupPath:       binaryPath + ".bak",
+		LockPath:         filepath.Join(tempDir, "upgrade.lock"),
+		ServiceName:      "incudal-agent",
+		AllowedBaseURL:   server.URL,
+		HTTPClient:       server.Client(),
+		MaxDownloadBytes: 1024 * 1024,
+		Restart: func(context.Context, string) error {
+			return errors.New("signal: terminated")
+		},
+	}
+
+	err := runner.Apply(context.Background(), panel.UpgradeInstruction{
+		Available: true,
+		Version:   "v2",
+		URL:       server.URL + "/incudal-agent-linux-amd64.gz",
+		SHA256:    sha,
+		Gzip:      true,
+	}, "v1")
+	if err == nil {
+		t.Fatalf("expected restart error")
+	}
+
+	actual, err := os.ReadFile(binaryPath)
+	if err != nil {
+		t.Fatalf("read replaced binary: %v", err)
+	}
+	if string(actual) != string(nextBinary) {
+		t.Fatalf("binary should stay replaced after restart interruption: %q", string(actual))
+	}
+}
+
+func TestApplyUpgradeRejectsDifferentOrigin(t *testing.T) {
+	tempDir := t.TempDir()
+	binaryPath := filepath.Join(tempDir, "incudal-agent")
+	if err := os.WriteFile(binaryPath, []byte("old-binary"), 0755); err != nil {
+		t.Fatalf("write current binary: %v", err)
+	}
+
+	runner := Runner{
+		BinaryPath:     binaryPath,
+		BackupPath:     binaryPath + ".bak",
+		LockPath:       filepath.Join(tempDir, "upgrade.lock"),
+		AllowedBaseURL: "https://panel.example",
+		Restart: func(context.Context, string) error {
+			t.Fatalf("restart should not be called")
+			return nil
+		},
+	}
+
+	err := runner.Apply(context.Background(), panel.UpgradeInstruction{
+		Available: true,
+		Version:   "v2",
+		URL:       "https://evil.example/incudal-agent-linux-amd64.gz",
+		SHA256:    "0000000000000000000000000000000000000000000000000000000000000000",
+		Gzip:      true,
+	}, "v1")
+	if err == nil {
+		t.Fatalf("expected origin validation error")
+	}
+}
+
+func gzipBytes(t *testing.T, payload []byte) []byte {
+	t.Helper()
+
+	var buffer bytes.Buffer
+	writer := gzip.NewWriter(&buffer)
+	if _, err := writer.Write(payload); err != nil {
+		t.Fatalf("gzip write: %v", err)
+	}
+	if err := writer.Close(); err != nil {
+		t.Fatalf("gzip close: %v", err)
+	}
+	return buffer.Bytes()
+}
+
+func sha256Hex(payload []byte) string {
+	sum := sha256.Sum256(payload)
+	return hex.EncodeToString(sum[:])
+}
diff --git a/agent/scripts/build-release.sh b/agent/scripts/build-release.sh
new file mode 100644
index 0000000..36f4dc5
--- /dev/null
+++ b/agent/scripts/build-release.sh
@@ -0,0 +1,82 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+DIST_DIR="${DIST_DIR:-${ROOT_DIR}/dist}"
+VERSION_FILE="${VERSION_FILE:-${ROOT_DIR}/VERSION}"
+VERSION_PATTERN='^v[0-9]+\.[0-9]+\.[0-9]+(-[0-9A-Za-z.-]+)?$'
+
+default_version() {
+  if [ ! -f "${VERSION_FILE}" ]; then
+    echo "Agent version file not found: ${VERSION_FILE}" >&2
+    exit 1
+  fi
+
+  tr -d '[:space:]' < "${VERSION_FILE}"
+}
+
+VERSION="${VERSION:-$(default_version)}"
+if [[ ! "${VERSION}" =~ ${VERSION_PATTERN} ]]; then
+  echo "Invalid Agent version: ${VERSION}" >&2
+  echo "Expected format: vMAJOR.MINOR.PATCH or vMAJOR.MINOR.PATCH-suffix" >&2
+  exit 1
+fi
+
+mkdir -p "${DIST_DIR}"
+
+build_one() {
+  local goarch="$1"
+  local output="${DIST_DIR}/incudal-agent-linux-${goarch}"
+
+  echo "Building ${output} (version=${VERSION})"
+  (
+    cd "${ROOT_DIR}"
+    CGO_ENABLED=0 GOOS=linux GOARCH="${goarch}" \
+      go build \
+        -trimpath \
+        -buildvcs=false \
+        -gcflags "all=-l" \
+        -ldflags "-s -w -X main.version=${VERSION}" \
+        -o "${output}" \
+        ./cmd/incudal-agent
+  )
+  chmod +x "${output}"
+  gzip -9 -c "${output}" > "${output}.gz"
+}
+
+build_one amd64
+build_one arm64
+
+sha256_file() {
+  sha256sum "$1" | awk '{print $1}'
+}
+
+size_file() {
+  wc -c < "$1" | tr -d ' '
+}
+
+GENERATED_AT="$(date -u +"%Y-%m-%dT%H:%M:%SZ")"
+AMD64_GZ="${DIST_DIR}/incudal-agent-linux-amd64.gz"
+ARM64_GZ="${DIST_DIR}/incudal-agent-linux-arm64.gz"
+cat > "${DIST_DIR}/manifest.json" <<EOF_MANIFEST
+{
+  "version": "${VERSION}",
+  "generatedAt": "${GENERATED_AT}",
+  "files": {
+    "linux-amd64": {
+      "name": "incudal-agent-linux-amd64.gz",
+      "sha256": "$(sha256_file "${AMD64_GZ}")",
+      "size": $(size_file "${AMD64_GZ}"),
+      "gzip": true
+    },
+    "linux-arm64": {
+      "name": "incudal-agent-linux-arm64.gz",
+      "sha256": "$(sha256_file "${ARM64_GZ}")",
+      "size": $(size_file "${ARM64_GZ}"),
+      "gzip": true
+    }
+  }
+}
+EOF_MANIFEST
+
+ls -lh "${DIST_DIR}"/incudal-agent-linux-* "${DIST_DIR}/manifest.json"
diff --git a/client/eslint.config.js b/client/eslint.config.js
new file mode 100644
index 0000000..c246a72
--- /dev/null
+++ b/client/eslint.config.js
@@ -0,0 +1,106 @@
+import js from '@eslint/js'
+import vue from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsparser from '@typescript-eslint/parser'
+
+export default [
+  // 忽略文件
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      '*.config.js',
+      '*.config.ts',
+      'vite.config.ts'
+    ]
+  },
+
+  // JavaScript/TypeScript 文件配置
+  js.configs.recommended,
+
+  // Vue 文件配置
+  ...vue.configs['flat/recommended'],
+
+  // TypeScript 文件配置
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tseslint
+    },
+    rules: {
+      // TypeScript 规则（放宽限制，因为项目中有很多 API 响应使用 any）
+      '@typescript-eslint/no-unused-vars': ['warn', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_'
+      }],
+      '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any（API 响应等场景需要）
+      'no-undef': 'off', // TypeScript 会处理
+      'no-unused-vars': 'off', // 使用 TypeScript 版本
+      'no-useless-escape': 'error' // 保留这个错误检查
+    }
+  },
+
+  // Vue 文件配置（包含 TypeScript）
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: tsparser // 使用 TypeScript 解析器解析 <script lang="ts">
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tseslint
+    },
+    rules: {
+      // Vue 特定规则
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off', // 项目中使用了 markdown 渲染，需要 v-html
+      'vue/require-default-prop': 'off',
+      'vue/require-explicit-emits': 'warn',
+      'vue/html-self-closing': 'off',
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+
+      // TypeScript 规则（放宽限制）
+      '@typescript-eslint/no-unused-vars': ['warn', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_'
+      }],
+      '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any（API 响应等场景需要）
+
+      // 通用规则
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+      'no-undef': 'off', // TypeScript 会处理
+      'no-unused-vars': 'off', // 使用 TypeScript 版本
+      'no-useless-escape': 'error' // 保留这个错误检查
+    }
+  },
+
+  // JavaScript 文件配置
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn'
+    }
+  }
+]
+
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 0000000..fca0a8d
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="精选全球多节点 LXC / KVM 套餐，配置丰富、方案齐全，持续提供高性价比 NAT VPS 选择。">
+  <meta name="keywords" content="Incus, NAT VPS, LXC, KVM, VPS 面板, 云服务器, NAT云主机">
+  <meta name="robots" content="index,follow">
+  <meta name="theme-color" content="#0a0a0a">
+  <meta property="og:site_name" content="Incus">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="基于 Incus 的低价 NAT VPS 平台">
+  <meta property="og:description" content="精选全球多节点 LXC / KVM 套餐，配置丰富、方案齐全，持续提供高性价比 NAT VPS 选择。">
+  <meta property="og:image" content="/incudal_logo.webp">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="基于 Incus 的低价 NAT VPS 平台">
+  <meta name="twitter:description" content="精选全球多节点 LXC / KVM 套餐，配置丰富、方案齐全，持续提供高性价比 NAT VPS 选择。">
+  <meta name="twitter:image" content="/incudal_logo.webp">
+  <link rel="icon" type="image/webp" href="/incudal_logo.webp">
+  <link rel="apple-touch-icon" href="/incudal_logo.webp">
+  <title>基于 Incus 的低价 NAT VPS 平台</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <script>
+    (function () {
+      const theme = localStorage.getItem('theme') || 'system';
+      let resolved = theme;
+      if (theme === 'system') {
+        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+      document.documentElement.classList.add(resolved);
+      document.querySelector('meta[name="theme-color"]').setAttribute('content', resolved === 'dark' ? '#0a0a0a' : '#ffffff');
+    })();
+  </script>
+  <style>
+    html.dark body {
+      background: #0a0a0a;
+    }
+
+    html.light body {
+      background: #ffffff;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/client/package.json b/client/package.json
new file mode 100644
index 0000000..186826d
--- /dev/null
+++ b/client/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "description": "Incudal 前端客户端",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --fix",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@vueuse/core": "^12.0.0",
+    "@xterm/addon-clipboard": "^0.2.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-image": "^0.9.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-serialize": "^0.14.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
+    "axios": "^1.7.9",
+    "flag-icons": "^7.5.0",
+    "marked": "^17.0.1",
+    "pinia": "^2.2.8",
+    "simple-icons": "^16.1.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.2.2",
+    "vue-router": "^4.5.0",
+    "vue-turnstile": "^1.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.16.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@types/node": "^24.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.16.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "javascript-obfuscator": "^5.0.1",
+    "postcss": "^8.4.49",
+    "rollup-plugin-obfuscator": "^1.1.0",
+    "tailwindcss": "^3.4.17",
+    "terser": "^5.44.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.3",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^3.1.6"
+  }
+}
diff --git a/client/postcss.config.js b/client/postcss.config.js
new file mode 100644
index 0000000..75af576
--- /dev/null
+++ b/client/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
+
diff --git a/client/public/badges/dark/abyss.svg b/client/public/badges/dark/abyss.svg
new file mode 100644
index 0000000..d1b74d7
--- /dev/null
+++ b/client/public/badges/dark/abyss.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#fbbf24" stroke-width="2" stroke-dasharray="5 20" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="70" fill="url(#bg-arcane-d)" stroke="#fcd34d" stroke-width="4" filter="url(#glow-neon-d)"></circle><g stroke="#fcd34d" fill="none" stroke-width="4" filter="url(#glow-intense-d)"><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" class="a1"></polygon><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" class="a1" style="animation-delay:1s"></polygon><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" class="a1" style="animation-delay:2s"></polygon></g><circle cx="120" cy="120" r="10" fill="#000" stroke="#fcd34d" stroke-width="2" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/aether.svg b/client/public/badges/dark/aether.svg
new file mode 100644
index 0000000..7d48d84
--- /dev/null
+++ b/client/public/badges/dark/aether.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}</style><g class="a1" stroke="#6366f1" fill="none" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="10 15 40 15"></circle><polygon points="120,15 194.2,45.8 225,120 194.2,194.2 120,225 45.8,194.2 15,120 45.8,45.8" stroke-width="1" opacity=".6"></polygon></g><circle cx="120" cy="120" r="65" fill="url(#bg-arcane-d)" stroke="#818cf8" stroke-width="6" filter="url(#glow-neon-d)"></circle><g stroke="#818cf8" stroke-width="2" fill="none" opacity=".5" filter="url(#glow-neon-d)"><path d="M120 55v130M55 120h130"></path></g><g fill="#818cf8" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="18"></circle><circle cx="120" cy="55" r="4" class="a2"></circle><circle cx="120" cy="185" r="4" class="a2" style="animation-delay:1s"></circle><circle cx="55" cy="120" r="4" class="a2" style="animation-delay:.5s"></circle><circle cx="185" cy="120" r="4" class="a2" style="animation-delay:1.5s"></circle></g></svg>
diff --git a/client/public/badges/dark/apex.svg b/client/public/badges/dark/apex.svg
new file mode 100644
index 0000000..8c589b6
--- /dev/null
+++ b/client/public/badges/dark/apex.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}</style><g class="a1" stroke="#ffaa00" fill="none"><polygon points="120,10 230,120 120,230 10,120" stroke-width="1" stroke-dasharray="10 10" opacity=".6"></polygon><circle cx="120" cy="120" r="85" stroke-width="4" stroke-dasharray="40 80" filter="url(#glow-intense-d)"></circle></g><polygon points="120,40 200,120 120,200 40,120" fill="url(#bg-supreme-d)" stroke="#ffaa00" stroke-width="5" filter="url(#glow-neon-d)"></polygon><polygon points="120,75 165,120 120,165 75,120" fill="none" stroke="#ffaa00" stroke-width="3" filter="url(#glow-neon-d)"></polygon><polygon points="120,95 145,120 120,145 95,120" fill="#ffaa00" filter="url(#glow-intense-d)"></polygon></svg>
diff --git a/client/public/badges/dark/aquarius.svg b/client/public/badges/dark/aquarius.svg
new file mode 100644
index 0000000..abb30f5
--- /dev/null
+++ b/client/public/badges/dark/aquarius.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#8b5cf6" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px;animation:art 4s linear infinite"><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(45 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(-45 120 120)"></ellipse></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-air-d)" opacity="0.9" stroke="#0ea5e9" stroke-width="2"></circle><line key="l0" x1="70" y1="100" x2="100" y2="80" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l1" x1="100" y1="80" x2="140" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l2" x1="140" y1="120" x2="170" y2="100" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l3" x1="70" y1="140" x2="100" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l4" x1="100" y1="120" x2="140" y2="160" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l5" x1="140" y1="160" x2="170" y2="140" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><g key="n0"><circle cx="70" cy="100" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0s"></circle><circle cx="70" cy="100" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="100" cy="80" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.2s"></circle><circle cx="100" cy="80" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="140" cy="120" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.4s"></circle><circle cx="140" cy="120" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="170" cy="100" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.6000000000000001s"></circle><circle cx="170" cy="100" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="70" cy="140" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.8s"></circle><circle cx="70" cy="140" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="100" cy="120" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:1s"></circle><circle cx="100" cy="120" r="3" fill="#fff"></circle></g><g key="n6"><circle cx="140" cy="160" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:1.2000000000000002s"></circle><circle cx="140" cy="160" r="3" fill="#fff"></circle></g><g key="n7"><circle cx="170" cy="140" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:1.4000000000000001s"></circle><circle cx="170" cy="140" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/ares.svg b/client/public/badges/dark/ares.svg
new file mode 100644
index 0000000..f5764d0
--- /dev/null
+++ b/client/public/badges/dark/ares.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}</style><g class="a1" stroke="#ff2200" fill="none" filter="url(#glow-intense-d)"><path d="M20 60V20h40m120 0h40v40m0 120v40h-40M60 220H20v-40" stroke-width="6"></path><circle cx="120" cy="120" r="100" stroke-width="2" stroke-dasharray="1 10"></circle></g><polygon points="120,40 189,80 189,160 120,200 51,160 51,80" fill="url(#bg-supreme-d)" stroke="#ff4400" stroke-width="4" filter="url(#glow-neon-d)"></polygon><circle cx="120" cy="120" r="40" stroke="#ff2200" stroke-width="2" fill="none"></circle><circle cx="120" cy="120" r="10" fill="#ff2200" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/aries.svg b/client/public/badges/dark/aries.svg
new file mode 100644
index 0000000..dc633c6
--- /dev/null
+++ b/client/public/badges/dark/aries.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#f59e0b" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px;animation:f-flow 2s linear infinite"><circle cx="120" cy="120" r="100" stroke-dasharray="10 40" stroke-width="4"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="40 10" stroke-width="2"></circle></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-fire-d)" opacity="0.9" stroke="#ef4444" stroke-width="2"></circle><line key="l0" x1="80" y1="80" x2="120" y2="140" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l1" x1="160" y1="80" x2="120" y2="140" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l2" x1="120" y1="140" x2="120" y2="180" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><g key="n0"><circle cx="80" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0s"></circle><circle cx="80" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="160" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.2s"></circle><circle cx="160" cy="80" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="120" cy="140" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.4s"></circle><circle cx="120" cy="140" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="120" cy="180" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.6000000000000001s"></circle><circle cx="120" cy="180" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/astral.svg b/client/public/badges/dark/astral.svg
new file mode 100644
index 0000000..e1f1492
--- /dev/null
+++ b/client/public/badges/dark/astral.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}</style><g stroke="#ec4899" fill="none" stroke-width="2" filter="url(#glow-neon-d)"><ellipse cx="120" cy="120" rx="100" ry="30" class="a1"></ellipse><ellipse cx="120" cy="120" rx="100" ry="30" class="a2" transform="rotate(60 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="30" class="a3" transform="rotate(120 120 120)"></ellipse></g><circle cx="120" cy="120" r="50" fill="url(#bg-arcane-d)" stroke="#f472b6" stroke-width="4" filter="url(#glow-neon-d)"></circle><g fill="#f472b6" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="15"></circle><circle cx="220" cy="120" r="6" class="a1"></circle><circle cx="20" cy="120" r="8" class="a2"></circle><circle cx="120" cy="20" r="5" class="a3"></circle></g></svg>
diff --git a/client/public/badges/dark/barrage.svg b/client/public/badges/dark/barrage.svg
new file mode 100644
index 0000000..4d439ae
--- /dev/null
+++ b/client/public/badges/dark/barrage.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}</style><rect x="20" y="20" width="200" height="200" fill="none" stroke="#14b8a6" stroke-width="2" opacity=".3" filter="url(#glow-neon-d)"></rect><rect x="80" y="80" width="80" height="80" fill="url(#bg-tactical-d)" stroke="#2dd4bf" stroke-width="4" filter="url(#glow-intense-d)"></rect><g stroke="#2dd4bf" fill="none" stroke-width="3" filter="url(#glow-intense-d)"><g class="t1" transform-origin="50px 50px"><rect x="30" y="30" width="40" height="40"></rect><path d="M50 20v60M20 50h60"></path></g><g class="t1" style="animation-delay:.5s" transform-origin="190px 60px"><rect x="170" y="40" width="40" height="40"></rect><circle cx="190" cy="60" r="10" fill="#2dd4bf"></circle></g><g class="t1" style="animation-delay:1s" transform-origin="60px 190px"><circle cx="60" cy="190" r="25"></circle><circle cx="60" cy="190" r="5" fill="#2dd4bf"></circle></g><polygon points="180,155 205,205 155,205" class="t1" style="animation-delay:1.5s" transform-origin="180px 180px"></polygon></g></svg>
diff --git a/client/public/badges/dark/barrier.svg b/client/public/badges/dark/barrier.svg
new file mode 100644
index 0000000..35ce681
--- /dev/null
+++ b/client/public/badges/dark/barrier.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}</style><g stroke="#3b82f6" fill="none" stroke-width="4" filter="url(#glow-neon-d)"><line x1="20" y1="60" x2="220" y2="60" stroke-dasharray="20 20"></line><line x1="20" y1="180" x2="220" y2="180" stroke-dasharray="20 20"></line></g><rect x="40" y="80" width="160" height="80" fill="url(#bg-aegis-d)" stroke="#60a5fa" stroke-width="6" filter="url(#glow-intense-d)"></rect><g fill="#60a5fa" filter="url(#glow-intense-d)"><rect x="60" y="90" width="30" height="60" class="b1"></rect><rect x="105" y="90" width="30" height="60" class="b2"></rect><rect x="150" y="90" width="30" height="60" class="b1"></rect></g></svg>
diff --git a/client/public/badges/dark/bastion.svg b/client/public/badges/dark/bastion.svg
new file mode 100644
index 0000000..28afc4b
--- /dev/null
+++ b/client/public/badges/dark/bastion.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}</style><g filter="url(#glow-neon-d)"><polygon class="a1" points="120,10 215,65 120,110 25,65" fill="none" stroke="#38bdf8" stroke-width="4"></polygon><polygon class="a2" points="120,230 215,175 120,130 25,175" fill="none" stroke="#38bdf8" stroke-width="4"></polygon></g><polygon points="120,40 189,80 189,160 120,200 51,160 51,80" fill="url(#bg-aegis-d)" stroke="#0ea5e9" stroke-width="2"></polygon><g class="a3" filter="url(#glow-intense-d)"><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" fill="none" stroke="#38bdf8" stroke-width="4"></polygon><circle cx="120" cy="120" r="20" fill="#38bdf8" opacity=".8"></circle><rect x="110" y="110" width="20" height="20" fill="#fff" transform="rotate(45 120 120)"></rect></g></svg>
diff --git a/client/public/badges/dark/blackhole.svg b/client/public/badges/dark/blackhole.svg
new file mode 100644
index 0000000..05f2d91
--- /dev/null
+++ b/client/public/badges/dark/blackhole.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}</style><g class="b1" stroke="#aa00ff" fill="none" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="95" stroke-width="8" stroke-dasharray="10 40 80 20" opacity=".8"></circle></g><g class="b2" stroke="#d400ff" fill="none" filter="url(#glow-neon-d)"><path d="M120 30q60 30 0 90M120 210q-60-30 0-90" stroke-width="4"></path></g><circle cx="120" cy="120" r="45" fill="url(#bg-void-d)" stroke="#8800ff" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="43" fill="#000" stroke="none"></circle><circle cx="120" cy="120" r="20" fill="none" stroke="#440088" stroke-width="2" stroke-dasharray="2 6" class="b1"></circle></svg>
diff --git a/client/public/badges/dark/cancer.svg b/client/public/badges/dark/cancer.svg
new file mode 100644
index 0000000..ccd67d8
--- /dev/null
+++ b/client/public/badges/dark/cancer.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#3b82f6" fill="none" filter="url(#glow-neon-d)" opacity="0.5" style="transform-origin:120px 120px"><circle cx="120" cy="120" class="node-water-ripple"></circle><circle cx="120" cy="120" class="node-water-ripple" style="animation-delay:1s"></circle><g style="animation:art 15s linear infinite"><circle cx="120" cy="120" r="90" stroke-dasharray="20 40" stroke-width="2"></circle><circle cx="120" cy="120" r="70" stroke-dasharray="10 30" stroke-width="1"></circle></g></g><g class="wrap-water" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-water-d)" opacity="0.9" stroke="#8b5cf6" stroke-width="2"></circle><line key="l0" x1="100" y1="80" x2="140" y2="100" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l1" x1="140" y1="100" x2="100" y2="140" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l2" x1="100" y1="140" x2="140" y2="160" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><g key="n0"><circle cx="100" cy="80" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0s"></circle><circle cx="100" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="140" cy="100" r="6" fill="#3b82f6" class="node-water" style="animation-delay:0.2s"></circle><circle cx="140" cy="100" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="100" cy="140" r="6" fill="#3b82f6" class="node-water" style="animation-delay:0.4s"></circle><circle cx="100" cy="140" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="160" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/capricorn.svg b/client/public/badges/dark/capricorn.svg
new file mode 100644
index 0000000..9f10d6c
--- /dev/null
+++ b/client/public/badges/dark/capricorn.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px"><g class="e-rot-box"><rect x="20" y="20" width="200" height="200" stroke-width="1" stroke-dasharray="10 10"></rect><rect x="40" y="40" width="160" height="160" stroke-width="1" stroke-dasharray="5 15"></rect></g><path d="M120 20v200M20 120h200" stroke-width="2"></path><line x1="20" y1="120" x2="220" y2="120" stroke="#14b8a6" stroke-width="4" class="e-scan-line" opacity="0.6"></line></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-earth-d)" opacity="0.9" stroke="#22c55e" stroke-width="2"></circle><line key="l0" x1="80" y1="80" x2="120" y2="140" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l1" x1="120" y1="140" x2="160" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l2" x1="160" y1="100" x2="140" y2="160" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l3" x1="140" y1="160" x2="120" y2="140" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><g key="n0"><circle cx="80" cy="80" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0s"></circle><circle cx="80" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="120" cy="140" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0.2s"></circle><circle cx="120" cy="140" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="160" cy="100" r="10" fill="#14b8a6" class="node-earth" style="animation-delay:0.4s"></circle><circle cx="160" cy="100" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="160" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/citadel.svg b/client/public/badges/dark/citadel.svg
new file mode 100644
index 0000000..6411f37
--- /dev/null
+++ b/client/public/badges/dark/citadel.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}</style><g class="c2" stroke="#0ea5e9" fill="none" stroke-width="6" filter="url(#glow-neon-d)"><polygon points="120,10 198,42 230,120 198,198 120,230 42,198 10,120 42,42" stroke-dasharray="30 20"></polygon></g><polygon points="120,35 180,60 205,120 180,180 120,205 60,180 35,120 60,60" fill="url(#bg-aegis-d)" stroke="#38bdf8" stroke-width="4" filter="url(#glow-intense-d)"></polygon><g class="c1" stroke="#38bdf8" fill="none" stroke-width="4" filter="url(#glow-intense-d)"><rect x="80" y="80" width="80" height="80"></rect><rect x="80" y="80" width="80" height="80" transform="rotate(45 120 120)"></rect></g><circle cx="120" cy="120" r="20" fill="#38bdf8" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/core.svg b/client/public/badges/dark/core.svg
new file mode 100644
index 0000000..05d7b6f
--- /dev/null
+++ b/client/public/badges/dark/core.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}</style><circle cx="120" cy="120" r="80" fill="none" stroke="#ec4899" class="r2" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="60" fill="url(#bg-reactor-d)" stroke="#f472b6" stroke-width="4" filter="url(#glow-neon-d)"></circle><g class="r1" fill="#f472b6" filter="url(#glow-intense-d)"><polygon points="120,80 155,140 85,140"></polygon><polygon points="120,160 85,100 155,100"></polygon><circle cx="120" cy="120" r="15" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/dark/cronus.svg b/client/public/badges/dark/cronus.svg
new file mode 100644
index 0000000..e4ba305
--- /dev/null
+++ b/client/public/badges/dark/cronus.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}</style><g transform="rotate(-25 120 120)"><ellipse class="c1" cx="120" cy="120" rx="110" ry="30" stroke="#e8c396" stroke-width="4" fill="none" stroke-dasharray="40 20" filter="url(#glow-intense-d)"></ellipse><ellipse class="c2" cx="120" cy="120" rx="95" ry="20" stroke="#fff0d4" stroke-width="2" fill="none" stroke-dasharray="5 10" filter="url(#glow-neon-d)"></ellipse><ellipse cx="120" cy="120" rx="120" ry="40" stroke="#b08d57" stroke-width="1" fill="none" opacity=".4"></ellipse></g><circle cx="120" cy="120" r="55" fill="url(#bg-supreme-d)" stroke="#e8c396" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="18" fill="none" stroke="#e8c396" stroke-width="2" stroke-dasharray="4 4"></circle><circle cx="120" cy="120" r="8" fill="#e8c396" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/crosshair.svg b/client/public/badges/dark/crosshair.svg
new file mode 100644
index 0000000..8db88be
--- /dev/null
+++ b/client/public/badges/dark/crosshair.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}</style><g class="t1" stroke="#ef4444" fill="none" stroke-width="4" filter="url(#glow-neon-d)"><path d="M60 40a100 100 0 01120 0M60 200a100 100 0 00120 0"></path></g><circle cx="120" cy="120" r="60" fill="url(#bg-tactical-d)" stroke="#f87171" stroke-width="2" filter="url(#glow-neon-d)"></circle><g class="t2" stroke="#f87171" fill="none" filter="url(#glow-intense-d)"><path d="M120 50v50M120 140v50M50 120h50M140 120h50"></path></g><circle cx="120" cy="120" r="10" fill="#f87171" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/defender.svg b/client/public/badges/dark/defender.svg
new file mode 100644
index 0000000..ac48dfc
--- /dev/null
+++ b/client/public/badges/dark/defender.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}</style><g class="d2" stroke="#8b5cf6" fill="none" stroke-width="4" filter="url(#glow-neon-d)"><polygon points="120,20 206,170 34,170" stroke-dasharray="20 40"></polygon><polygon points="120,220 34,70 206,70" stroke-dasharray="20 40"></polygon></g><polygon points="120,40 190,160 50,160" fill="url(#bg-aegis-d)" stroke="#a78bfa" stroke-width="6" class="d1" filter="url(#glow-intense-d)"></polygon><path d="M120 70l40 70H80z" fill="#a78bfa" class="d1" filter="url(#glow-intense-d)"></path></svg>
diff --git a/client/public/badges/dark/dog.svg b/client/public/badges/dark/dog.svg
new file mode 100644
index 0000000..08c1975
--- /dev/null
+++ b/client/public/badges/dark/dog.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}</style><g class="zdg1" stroke="#ec4899" fill="none" stroke-width="6" filter="url(#glow-intense-d)"><path d="M60 40 L40 40 L40 60"></path><path d="M180 40 L200 40 L200 60"></path><path d="M60 200 L40 200 L40 180"></path><path d="M180 200 L200 200 L200 180"></path></g><g filter="url(#glow-intense-d)"><polygon points="120,60 180,90 160,180 120,200 80,180 60,90" fill="url(#bg-z-earth-d)" stroke="#a855f7" stroke-width="4"></polygon><polygon points="100,120 140,120 120,150" fill="#ec4899"></polygon><circle cx="120" cy="120" r="30" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="100" class="zdg2"></circle></g></svg>
diff --git a/client/public/badges/dark/dragon.svg b/client/public/badges/dark/dragon.svg
new file mode 100644
index 0000000..bff6ee8
--- /dev/null
+++ b/client/public/badges/dark/dragon.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}</style><g stroke="#ec4899" fill="none" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="105" stroke-width="4" stroke-dasharray="40 20" class="zd1"></circle><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="10 10" class="zd2" transform="rotate(45 120 120)"></circle></g><path d="M40 160 Q80 80 120 120 T200 80 L180 140 Q120 200 80 160 Z" fill="url(#bg-z-earth-d)" stroke="#a855f7" stroke-width="4" filter="url(#glow-neon-d)"></path><circle cx="120" cy="120" r="20" fill="#ec4899" filter="url(#glow-intense-d)" class="zd2"></circle></svg>
diff --git a/client/public/badges/dark/dynamo.svg b/client/public/badges/dark/dynamo.svg
new file mode 100644
index 0000000..9aa9e45
--- /dev/null
+++ b/client/public/badges/dark/dynamo.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#eab308" stroke-width="4" stroke-dasharray="10 20" filter="url(#glow-neon-d)"></circle><g fill="none" stroke="#facc15" stroke-width="8" filter="url(#glow-intense-d)"><line x1="120" y1="20" x2="120" y2="220" class="r2"></line><line x1="20" y1="120" x2="220" y2="120" class="r1"></line></g><circle cx="120" cy="120" r="50" fill="url(#bg-reactor-d)" stroke="#facc15" stroke-width="6" filter="url(#glow-intense-d)"></circle><rect x="105" y="105" width="30" height="30" fill="#fff" filter="url(#glow-intense-d)"></rect></svg>
diff --git a/client/public/badges/dark/earth.svg b/client/public/badges/dark/earth.svg
new file mode 100644
index 0000000..986d93f
--- /dev/null
+++ b/client/public/badges/dark/earth.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}</style><g class="e1" stroke="#00e5ff" fill="none"><circle cx="120" cy="120" r="110" stroke-width="1" stroke-dasharray="4 8" opacity=".6"></circle><circle cx="120" cy="10" r="6" fill="#00e5ff" filter="url(#glow-intense-d)"></circle></g><g class="e2" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="75" fill="url(#bg-supreme-d)" stroke="#0088ff" stroke-width="4"></circle><ellipse cx="120" cy="120" rx="75" ry="25" fill="none" stroke="#0088ff" stroke-width="2" opacity=".7"></ellipse><ellipse cx="120" cy="120" rx="25" ry="75" fill="none" stroke="#0088ff" stroke-width="2" opacity=".7"></ellipse></g><circle cx="120" cy="120" r="12" fill="#00e5ff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/elite.svg b/client/public/badges/dark/elite.svg
new file mode 100644
index 0000000..62821ff
--- /dev/null
+++ b/client/public/badges/dark/elite.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}</style><g class="e1" stroke="#ff3366" fill="none"><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="10 20 40 10" filter="url(#glow-neon-d)"></circle><path d="M120 5v20M120 215v20M5 120h20M215 120h20" stroke-width="4"></path></g><g class="e2" stroke="#ff0044" fill="none" opacity=".8"><circle cx="120" cy="120" r="90" stroke-width="3" stroke-dasharray="30 60" filter="url(#glow-intense-d)"></circle></g><g class="e3"><polygon points="120,40 180,85 180,155 120,200 60,155 60,85" fill="url(#bg-supreme-d)" stroke="#ff3366" stroke-width="4" filter="url(#glow-neon-d)"></polygon><polygon points="120,55 165,90 165,140 120,175 75,140 75,90" fill="none" stroke="#ff3366" stroke-width="2" opacity=".6"></polygon><circle cx="120" cy="120" r="20" fill="none" stroke="#ff3366" stroke-width="3" stroke-dasharray="5 5"></circle><circle cx="120" cy="120" r="8" fill="#ff3366" filter="url(#glow-intense-d)"></circle></g></svg>
diff --git a/client/public/badges/dark/enigma.svg b/client/public/badges/dark/enigma.svg
new file mode 100644
index 0000000..75b5725
--- /dev/null
+++ b/client/public/badges/dark/enigma.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}</style><g fill="none" stroke="#6366f1" stroke-width="6" stroke-linecap="round" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="100" stroke-dasharray="50 30 10 40" class="a1"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="30 50 80 20" class="a2"></circle><circle cx="120" cy="120" r="60" stroke-dasharray="20 40 10 50" class="a3"></circle></g><circle cx="120" cy="120" r="40" fill="url(#bg-arcane-d)" stroke="#818cf8" stroke-width="4" filter="url(#glow-neon-d)"></circle><path d="M120 90q30 30 0 60q-30-30 0-60" fill="#818cf8" opacity=".8" class="a1" filter="url(#glow-intense-d)"></path><circle cx="120" cy="120" r="10" fill="#fff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/fission.svg b/client/public/badges/dark/fission.svg
new file mode 100644
index 0000000..318bcea
--- /dev/null
+++ b/client/public/badges/dark/fission.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#22c55e" stroke-width="2" stroke-dasharray="10 10" class="r3" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="65" fill="url(#bg-reactor-d)" stroke="#22c55e" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="30" fill="#4ade80" class="r1" style="mix-blend-mode:screen" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="30" fill="#4ade80" class="r2" style="mix-blend-mode:screen" filter="url(#glow-intense-d)"></circle><line x1="120" y1="60" x2="120" y2="180" stroke="#fff" stroke-width="4" opacity=".8" filter="url(#glow-intense-d)"></line></svg>
diff --git a/client/public/badges/dark/fortress.svg b/client/public/badges/dark/fortress.svg
new file mode 100644
index 0000000..f8d8d51
--- /dev/null
+++ b/client/public/badges/dark/fortress.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}</style><g class="f1" stroke="#6366f1" fill="none" stroke-width="4" filter="url(#glow-neon-d)"><polygon points="120,10 230,120 120,230 10,120" stroke-dasharray="60 40"></polygon><rect x="20" y="20" width="200" height="200" stroke-width="2" opacity=".3"></rect></g><polygon points="120,35 205,120 120,205 35,120" fill="url(#bg-aegis-d)" stroke="#818cf8" stroke-width="2"></polygon><g class="f2" stroke="#818cf8" fill="none" stroke-width="6" filter="url(#glow-intense-d)"><polygon points="120,60 180,120 120,180 60,120"></polygon><line x1="120" y1="60" x2="120" y2="180"></line><line x1="60" y1="120" x2="180" y2="120"></line></g><rect x="100" y="100" width="40" height="40" fill="#818cf8" transform="rotate(45 120 120)" filter="url(#glow-intense-d)"></rect></svg>
diff --git a/client/public/badges/dark/fusion.svg b/client/public/badges/dark/fusion.svg
new file mode 100644
index 0000000..611dc52
--- /dev/null
+++ b/client/public/badges/dark/fusion.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#22c55e" stroke-width="15" opacity=".3"></circle><circle cx="120" cy="120" r="100" fill="none" stroke="#4ade80" stroke-width="6" class="r1" stroke-linecap="round" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="70" fill="url(#bg-reactor-d)" stroke="#4ade80" stroke-width="3" filter="url(#glow-neon-d)"></circle><g class="r2" filter="url(#glow-intense-d)"><path d="M120 70q30 50 0 100q-30-50 0-100" fill="#4ade80" opacity=".8"></path><path d="M70 120q50 30 100 0q-50-30-100 0" fill="#4ade80" opacity=".8"></path><circle cx="120" cy="120" r="20" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/dark/galaxy.svg b/client/public/badges/dark/galaxy.svg
new file mode 100644
index 0000000..c4f3b05
--- /dev/null
+++ b/client/public/badges/dark/galaxy.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}</style><g class="g1" fill="none" filter="url(#glow-intense-d)"><path d="M120 120q60-20 90 40M120 120q20 60-40 90M120 120q-60 20-90-40M120 120q-20-60 40-90" stroke="#fbbf24" stroke-width="4" stroke-linecap="round" stroke-dasharray="10 10"></path><path d="M120 120q20 60-40 90" stroke="#60a5fa" stroke-width="4" stroke-linecap="round" stroke-dasharray="5 15"></path><path d="M120 120q-20-60 40-90" stroke="#60a5fa" stroke-width="4" stroke-linecap="round" stroke-dasharray="5 15"></path></g><circle cx="120" cy="120" r="40" fill="url(#bg-supreme-d)" stroke="#fbbf24" stroke-width="3" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="15" fill="#fbbf24" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/gemini.svg b/client/public/badges/dark/gemini.svg
new file mode 100644
index 0000000..df0193b
--- /dev/null
+++ b/client/public/badges/dark/gemini.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#8b5cf6" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px;animation:art 4s linear infinite"><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(45 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(-45 120 120)"></ellipse></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-air-d)" opacity="0.9" stroke="#0ea5e9" stroke-width="2"></circle><line key="l0" x1="90" y1="60" x2="90" y2="180" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l1" x1="150" y1="60" x2="150" y2="180" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l2" x1="90" y1="120" x2="150" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><g key="n0"><circle cx="90" cy="60" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0s"></circle><circle cx="90" cy="60" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="90" cy="180" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.2s"></circle><circle cx="90" cy="180" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="150" cy="60" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.4s"></circle><circle cx="150" cy="60" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="150" cy="180" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.6000000000000001s"></circle><circle cx="150" cy="180" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="90" cy="120" r="4" fill="#8b5cf6" class="node-air" style="animation-delay:0.8s"></circle><circle cx="90" cy="120" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="150" cy="120" r="4" fill="#8b5cf6" class="node-air" style="animation-delay:1s"></circle><circle cx="150" cy="120" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/genesis.svg b/client/public/badges/dark/genesis.svg
new file mode 100644
index 0000000..44626be
--- /dev/null
+++ b/client/public/badges/dark/genesis.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}</style><g class="g1" stroke="#ffffff" fill="none" opacity=".6" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="110" stroke-width="2" stroke-dasharray="10 30"></circle><polygon points="120,10 215.2,65 215.2,175 120,230 24.8,175 24.8,65" stroke-width="1"></polygon></g><g class="g2" stroke="#facc15" fill="none" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="85" stroke-width="3" stroke-dasharray="100 50"></circle><polygon points="120,35 193.6,77.5 193.6,162.5 120,205 46.4,162.5 46.4,77.5" stroke-width="2"></polygon></g><circle cx="120" cy="120" r="50" fill="url(#bg-platinum-d)" stroke="#ffffff" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="100" r="15" fill="none" stroke="#facc15" stroke-width="2" filter="url(#glow-intense-d)"></circle><circle cx="103" cy="130" r="15" fill="none" stroke="#facc15" stroke-width="2" filter="url(#glow-intense-d)"></circle><circle cx="137" cy="130" r="15" fill="none" stroke="#facc15" stroke-width="2" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="8" fill="#ffffff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/glyph.svg b/client/public/badges/dark/glyph.svg
new file mode 100644
index 0000000..44eed37
--- /dev/null
+++ b/client/public/badges/dark/glyph.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}</style><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-d)"><rect x="20" y="20" width="200" height="200" stroke-width="2" stroke-dasharray="20 40" class="a1"></rect><rect x="40" y="40" width="160" height="160" stroke-width="4" opacity=".5"></rect><circle cx="120" cy="120" r="90" stroke-width="1"></circle></g><rect x="65" y="65" width="110" height="110" fill="url(#bg-arcane-d)" stroke="#2dd4bf" stroke-width="6" class="a1" style="animation-direction:reverse" filter="url(#glow-intense-d)"></rect><g class="a2" fill="#2dd4bf" filter="url(#glow-intense-d)"><path d="M120 85l35 35-35 35-35-35z"></path><circle cx="120" cy="120" r="10" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/dark/goat.svg b/client/public/badges/dark/goat.svg
new file mode 100644
index 0000000..952ad8a
--- /dev/null
+++ b/client/public/badges/dark/goat.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#a855f7" class="zg2" filter="url(#glow-intense-d)"></circle><g class="zg1" filter="url(#glow-intense-d)"><path d="M60 100 A60 60 0 0 1 180 100 L120 200 Z" fill="url(#bg-z-earth-d)" stroke="#a855f7" stroke-width="4"></path><path d="M60 100 Q40 40 80 40 Q100 40 100 80" fill="none" stroke="#ec4899" stroke-width="8" stroke-linecap="round"></path><path d="M180 100 Q200 40 160 40 Q140 40 140 80" fill="none" stroke="#ec4899" stroke-width="8" stroke-linecap="round"></path><circle cx="120" cy="140" r="15" fill="#ec4899"></circle></g></svg>
diff --git a/client/public/badges/dark/guardian.svg b/client/public/badges/dark/guardian.svg
new file mode 100644
index 0000000..b0a0a81
--- /dev/null
+++ b/client/public/badges/dark/guardian.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#8b5cf6" stroke-width="2" filter="url(#glow-neon-d)"></circle><g class="g1" stroke="#a78bfa" fill="none" stroke-width="8" filter="url(#glow-intense-d)"><path d="M120 15a105 105 0 01105 105M120 225A105 105 0 0115 120"></path></g><g class="g2" stroke="#8b5cf6" fill="none" stroke-width="12" filter="url(#glow-neon-d)"><path d="M205 120a85 85 0 01-85 85M35 120a85 85 0 0185-85"></path></g><circle cx="120" cy="120" r="65" fill="url(#bg-aegis-d)" stroke="#a78bfa" stroke-width="4" filter="url(#glow-neon-d)"></circle><polygon points="120,65 167,147.5 73,147.5" fill="#a78bfa" class="g3" filter="url(#glow-intense-d)"></polygon><polygon points="120,175 73,92.5 167,92.5" fill="#a78bfa" class="g3" style="animation-delay:1s" filter="url(#glow-intense-d)"></polygon></svg>
diff --git a/client/public/badges/dark/horse.svg b/client/public/badges/dark/horse.svg
new file mode 100644
index 0000000..cfd18da
--- /dev/null
+++ b/client/public/badges/dark/horse.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}</style><g stroke="#f97316" fill="none" stroke-width="4" class="zh2" filter="url(#glow-intense-d)"><line x1="-50" y1="40" x2="290" y2="40" opacity="0.3"></line><line x1="-50" y1="200" x2="290" y2="200" opacity="0.3"></line><line x1="-50" y1="120" x2="290" y2="120" stroke-width="1"></line></g><g class="zh1" filter="url(#glow-intense-d)"><polygon points="60,180 100,60 180,60 140,180" fill="url(#bg-z-fire-d)" stroke="#f43f5e" stroke-width="6"></polygon><path d="M100 60 L140 20 L180 60" fill="none" stroke="#f97316" stroke-width="6" stroke-linecap="round"></path><line x1="120" y1="60" x2="100" y2="180" stroke="#f43f5e" stroke-width="4"></line></g></svg>
diff --git a/client/public/badges/dark/ignition.svg b/client/public/badges/dark/ignition.svg
new file mode 100644
index 0000000..572c66f
--- /dev/null
+++ b/client/public/badges/dark/ignition.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}</style><g class="r1" stroke="#fb923c" fill="none" filter="url(#glow-intense-d)"><path d="M20 120l60-20 20-80 40 200 20-80 60-20" stroke-width="6" stroke-linejoin="miter"></path><path d="M40 160l60 20 20 40V20l20 40 60 20" stroke-width="3" opacity=".5"></path></g><circle cx="120" cy="120" r="40" fill="url(#bg-reactor-d)" stroke="#f97316" stroke-width="6" class="r2" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="20" fill="#fff" class="r1" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/intercept.svg b/client/public/badges/dark/intercept.svg
new file mode 100644
index 0000000..4e384ee
--- /dev/null
+++ b/client/public/badges/dark/intercept.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}</style><polygon points="120,20 206,170 34,170" fill="none" stroke="#e11d48" stroke-width="2" class="t2" filter="url(#glow-neon-d)"></polygon><circle cx="120" cy="120" r="50" fill="url(#bg-tactical-d)" stroke="#f43f5e" stroke-width="4" filter="url(#glow-neon-d)"></circle><g stroke="#f43f5e" stroke-width="6" stroke-linecap="round" stroke-dasharray="100" class="t1" filter="url(#glow-intense-d)"><path d="M120 20v80M206 170l-71-40M34 170l71-40"></path></g><circle cx="120" cy="120" r="15" fill="#f43f5e" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/jupiter.svg b/client/public/badges/dark/jupiter.svg
new file mode 100644
index 0000000..f4c69bc
--- /dev/null
+++ b/client/public/badges/dark/jupiter.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}</style><g class="j1" stroke="#d48a4a" fill="none" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="105" stroke-width="4" stroke-dasharray="10 30"></circle></g><circle cx="120" cy="120" r="75" fill="url(#bg-gold-d)" stroke="#c27a3c" stroke-width="3" filter="url(#glow-neon-d)"></circle><g class="j2" stroke="#a6652c" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray="30 20" filter="url(#glow-neon-d)"><path d="M50 90q70 20 140 0M45 120q75 20 150 0" stroke-width="12" stroke="#d48a4a"></path><path d="M50 150q70 20 140 0"></path></g><ellipse cx="150" cy="135" rx="15" ry="8" fill="#8c3a1a" filter="url(#glow-intense-d)"></ellipse></svg>
diff --git a/client/public/badges/dark/leo.svg b/client/public/badges/dark/leo.svg
new file mode 100644
index 0000000..2bd9877
--- /dev/null
+++ b/client/public/badges/dark/leo.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#f59e0b" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px;animation:f-flow 2s linear infinite"><circle cx="120" cy="120" r="100" stroke-dasharray="10 40" stroke-width="4"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="40 10" stroke-width="2"></circle></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-fire-d)" opacity="0.9" stroke="#ef4444" stroke-width="2"></circle><line key="l0" x1="140" y1="60" x2="100" y2="80" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l1" x1="100" y1="80" x2="90" y2="120" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l2" x1="90" y1="120" x2="110" y2="160" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l3" x1="110" y1="160" x2="160" y2="160" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><g key="n0"><circle cx="140" cy="60" r="6" fill="#f59e0b" class="node-fire" style="animation-delay:0s"></circle><circle cx="140" cy="60" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="100" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.2s"></circle><circle cx="100" cy="80" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="90" cy="120" r="10" fill="#f59e0b" class="node-fire" style="animation-delay:0.4s"></circle><circle cx="90" cy="120" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="110" cy="160" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.6000000000000001s"></circle><circle cx="110" cy="160" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="160" cy="160" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.8s"></circle><circle cx="160" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/libra.svg b/client/public/badges/dark/libra.svg
new file mode 100644
index 0000000..f00cc32
--- /dev/null
+++ b/client/public/badges/dark/libra.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#8b5cf6" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px;animation:art 4s linear infinite"><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(45 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(-45 120 120)"></ellipse></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-air-d)" opacity="0.9" stroke="#0ea5e9" stroke-width="2"></circle><line key="l0" x1="120" y1="70" x2="80" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l1" x1="120" y1="70" x2="160" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l2" x1="80" y1="120" x2="120" y2="170" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l3" x1="160" y1="120" x2="120" y2="170" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><g key="n0"><circle cx="120" cy="70" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0s"></circle><circle cx="120" cy="70" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="80" cy="120" r="6" fill="#8b5cf6" class="node-air" style="animation-delay:0.2s"></circle><circle cx="80" cy="120" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="160" cy="120" r="6" fill="#8b5cf6" class="node-air" style="animation-delay:0.4s"></circle><circle cx="160" cy="120" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="120" cy="170" r="10" fill="#8b5cf6" class="node-air" style="animation-delay:0.6000000000000001s"></circle><circle cx="120" cy="170" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/lockon.svg b/client/public/badges/dark/lockon.svg
new file mode 100644
index 0000000..2665868
--- /dev/null
+++ b/client/public/badges/dark/lockon.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#f97316" stroke-width="4" stroke-dasharray="10 20" filter="url(#glow-neon-d)"></circle><g class="t1" fill="none" stroke="#fb923c" filter="url(#glow-intense-d)"><rect x="60" y="60" width="120" height="120" rx="10"></rect><polygon points="120,80 160,120 120,160 80,120" class="t2" fill="#fb923c"></polygon></g><circle cx="120" cy="120" r="10" fill="#fb923c" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/matrix.svg b/client/public/badges/dark/matrix.svg
new file mode 100644
index 0000000..eed6082
--- /dev/null
+++ b/client/public/badges/dark/matrix.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}</style><g class="m1" stroke="#00cc33" fill="none" stroke-width="2"><rect x="20" y="20" width="200" height="200" opacity=".3"></rect><rect x="40" y="40" width="160" height="160" opacity=".5" transform="rotate(45 120 120)"></rect><circle cx="120" cy="120" r="100" stroke-dasharray="5 15" filter="url(#glow-neon-d)"></circle></g><rect x="60" y="60" width="120" height="120" fill="url(#bg-matrix-d)" stroke="#00ff44" stroke-width="4" filter="url(#glow-neon-d)" rx="10"></rect><g stroke="#00ff44" fill="none" stroke-width="4" class="m2" filter="url(#glow-intense-d)"><line x1="80" y1="60" x2="80" y2="180"></line><line x1="120" y1="60" x2="120" y2="180" style="animation-delay:.5s"></line><line x1="160" y1="60" x2="160" y2="180" style="animation-delay:1s"></line></g><rect x="100" y="100" width="40" height="40" fill="#00ff44" filter="url(#glow-intense-d)" rx="5"></rect></svg>
diff --git a/client/public/badges/dark/mercury.svg b/client/public/badges/dark/mercury.svg
new file mode 100644
index 0000000..39ff9f1
--- /dev/null
+++ b/client/public/badges/dark/mercury.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}</style><g stroke="#e2e8f0" fill="none" filter="url(#glow-intense-d)"><ellipse class="m1" cx="120" cy="120" rx="100" ry="20" stroke-width="2" stroke-dasharray="40 100" transform="rotate(45 120 120)"></ellipse><ellipse class="m2" cx="120" cy="120" rx="110" ry="15" stroke-width="3" stroke-dasharray="60 150" transform="rotate(-30 120 120)"></ellipse></g><circle cx="120" cy="120" r="50" fill="url(#bg-platinum-d)" stroke="#94a3b8" stroke-width="3" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="25" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4 8" class="m1"></circle></svg>
diff --git a/client/public/badges/dark/monkey.svg b/client/public/badges/dark/monkey.svg
new file mode 100644
index 0000000..0faa226
--- /dev/null
+++ b/client/public/badges/dark/monkey.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#eab308" stroke-width="4" stroke-dasharray="20 40" class="zm2" filter="url(#glow-neon-d)"></circle><g class="zm1" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="60" fill="url(#bg-z-metal-d)" stroke="#f59e0b" stroke-width="4"></circle><circle cx="90" cy="100" r="25" fill="none" stroke="#eab308" stroke-width="6"></circle><circle cx="150" cy="100" r="25" fill="none" stroke="#eab308" stroke-width="6"></circle><path d="M100 150 Q120 170 140 150" fill="none" stroke="#f59e0b" stroke-width="6" stroke-linecap="round"></path></g></svg>
diff --git a/client/public/badges/dark/moon.svg b/client/public/badges/dark/moon.svg
new file mode 100644
index 0000000..4e0d1a6
--- /dev/null
+++ b/client/public/badges/dark/moon.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}</style><g class="m1" stroke="#cbd5e1" fill="none"><circle cx="120" cy="120" r="105" stroke-width="1" stroke-dasharray="2 8" opacity=".6"></circle></g><circle cx="120" cy="120" r="75" fill="url(#bg-moon-d)" stroke="#94a3b8" stroke-width="3" filter="url(#glow-neon-d)"></circle><g fill="none" stroke="#94a3b8" stroke-width="2" opacity="0.5"><circle cx="100" cy="90" r="12"></circle><circle cx="145" cy="140" r="18"></circle><circle cx="95" cy="145" r="8"></circle></g><circle cx="120" cy="120" r="20" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4"></circle><circle cx="120" cy="120" r="8" fill="#cbd5e1" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/mystic.svg b/client/public/badges/dark/mystic.svg
new file mode 100644
index 0000000..4d67beb
--- /dev/null
+++ b/client/public/badges/dark/mystic.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#ec4899" stroke-width="2" filter="url(#glow-neon-d)"></circle><g class="a1" stroke="#f472b6" stroke-width="4" fill="none" filter="url(#glow-intense-d)"><polygon points="120,20 206.6,170 33.4,170" class="a2" fill="#f472b6"></polygon><polygon points="120,220 33.4,70 206.6,70" class="a2" fill="#f472b6" style="animation-delay:.2s"></polygon></g><circle cx="120" cy="120" r="40" fill="url(#bg-arcane-d)" stroke="#f472b6" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="15" fill="#f472b6" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/nebula.svg b/client/public/badges/dark/nebula.svg
new file mode 100644
index 0000000..382f634
--- /dev/null
+++ b/client/public/badges/dark/nebula.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}</style><g class="n1" filter="url(#glow-intense-d)" opacity=".6"><circle cx="100" cy="100" r="50" fill="#d946ef"></circle><circle cx="140" cy="140" r="60" fill="#06b6d4"></circle><circle cx="150" cy="90" r="45" fill="#d946ef"></circle><circle cx="90" cy="150" r="55" fill="#06b6d4"></circle></g><circle cx="120" cy="120" r="55" fill="url(#bg-nebula-d)" stroke="none" filter="url(#glow-neon-d)" opacity=".9"></circle><path d="M120 100v40M100 120h40" stroke="#fff" stroke-width="2" class="n2" filter="url(#glow-intense-d)"></path></svg>
diff --git a/client/public/badges/dark/neptune.svg b/client/public/badges/dark/neptune.svg
new file mode 100644
index 0000000..d3e5e8f
--- /dev/null
+++ b/client/public/badges/dark/neptune.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}</style><g class="n1" stroke="#0055ff" fill="none" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="100" stroke-width="4" stroke-dasharray="60 40"></circle></g><circle cx="120" cy="120" r="70" fill="url(#bg-ice-d)" stroke="#0088ff" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="45" fill="none" stroke="#00aaff" class="n2" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="8" fill="#00aaff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/nexus.svg b/client/public/badges/dark/nexus.svg
new file mode 100644
index 0000000..23c4ac3
--- /dev/null
+++ b/client/public/badges/dark/nexus.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}</style><g class="n2" stroke="#b700ff" fill="none" stroke-width="2" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="105" stroke-dasharray="5 15"></circle><path d="M120 15v35M120 190v35M15 120h35M190 120h35" stroke-width="4" stroke="#00e5ff" filter="url(#glow-intense-d)"></path></g><g class="n1" stroke="#00e5ff" stroke-width="3" fill="none" filter="url(#glow-intense-d)"><line x1="60" y1="60" x2="100" y2="100"></line><line x1="180" y1="60" x2="140" y2="100"></line><line x1="60" y1="180" x2="100" y2="140"></line><line x1="180" y1="180" x2="140" y2="140"></line></g><polygon points="120,50 170,120 120,190 70,120" fill="url(#bg-supreme-d)" stroke="#b700ff" stroke-width="4" filter="url(#glow-neon-d)"></polygon><circle cx="120" cy="120" r="25" fill="#00e5ff" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="10" fill="#fff"></circle></svg>
diff --git a/client/public/badges/dark/omega.svg b/client/public/badges/dark/omega.svg
new file mode 100644
index 0000000..54a64d2
--- /dev/null
+++ b/client/public/badges/dark/omega.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}</style><g class="o2" stroke="#ff0033" fill="none"><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="5 20 50 20" filter="url(#glow-neon-d)"></circle><polygon points="120,10 135,40 105,40" fill="#ff0033"></polygon><polygon points="120,230 105,200 135,200" fill="#ff0033"></polygon></g><circle cx="120" cy="120" r="85" fill="url(#bg-omega-d)" stroke="#cc0000" stroke-width="6" stroke-dasharray="40 10" class="o2" style="animation-direction:reverse;animation-duration:20s" filter="url(#glow-intense-d)"></circle><g class="o1"><path d="M70 160c-20 0-10-60 30-60s40 0 40 20 50 60 30 60-30-20-30-20H100c0 0-10 20-30 20z" fill="#ff0033" filter="url(#glow-intense-d)"></path><circle cx="120" cy="120" r="15" fill="#fff" filter="url(#glow-intense-d)"></circle></g></svg>
diff --git a/client/public/badges/dark/oracle.svg b/client/public/badges/dark/oracle.svg
new file mode 100644
index 0000000..7675e81
--- /dev/null
+++ b/client/public/badges/dark/oracle.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#a855f7" stroke-width="4" stroke-dasharray="1 12" class="a2" filter="url(#glow-neon-d)"></circle><g class="a1" stroke="#c084fc" fill="none" stroke-width="3" filter="url(#glow-intense-d)"><rect x="65" y="65" width="110" height="110"></rect><rect x="65" y="65" width="110" height="110" transform="rotate(45 120 120)"></rect><circle cx="120" cy="120" r="77" opacity=".5"></circle></g><circle cx="120" cy="120" r="30" fill="url(#bg-arcane-d)" stroke="#c084fc" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="10" fill="#fff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/overload.svg b/client/public/badges/dark/overload.svg
new file mode 100644
index 0000000..5fa0f3e
--- /dev/null
+++ b/client/public/badges/dark/overload.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}</style><circle cx="120" cy="120" r="95" fill="none" stroke="#84cc16" stroke-dasharray="15 35 50 10 5 40" class="r1" filter="url(#glow-intense-d)"></circle><polygon points="120,40 189,80 189,160 120,200 51,160 51,80" fill="url(#bg-reactor-d)" stroke="#a3e635" stroke-width="4" filter="url(#glow-neon-d)"></polygon><path d="M120 70l30 80H90z" fill="#a3e635" class="r2" filter="url(#glow-intense-d)"></path><circle cx="120" cy="120" r="10" fill="#fff" class="r1"></circle></svg>
diff --git a/client/public/badges/dark/overwatch.svg b/client/public/badges/dark/overwatch.svg
new file mode 100644
index 0000000..b959dab
--- /dev/null
+++ b/client/public/badges/dark/overwatch.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}</style><path d="M40 120a80 80 0 01160 0" stroke="#22c55e" fill="none" stroke-width="6" stroke-dasharray="20 20" filter="url(#glow-neon-d)"></path><circle cx="120" cy="120" r="60" fill="url(#bg-tactical-d)" stroke="#4ade80" stroke-width="4" filter="url(#glow-neon-d)"></circle><g class="t1" fill="none" filter="url(#glow-intense-d)"><path d="M120 120L60 40a100 100 0 01120 0z" fill="#4ade80" opacity=".3"></path><path d="M120 120L60 40M120 120l60-80" stroke="#4ade80" stroke-width="3"></path></g><circle cx="120" cy="120" fill="none" stroke="#4ade80" stroke-width="2" class="t2" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="10" fill="#4ade80"></circle></svg>
diff --git a/client/public/badges/dark/ox.svg b/client/public/badges/dark/ox.svg
new file mode 100644
index 0000000..5e7422e
--- /dev/null
+++ b/client/public/badges/dark/ox.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}</style><rect x="20" y="20" width="200" height="200" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="10 20" filter="url(#glow-neon-d)"></rect><g class="zo1" filter="url(#glow-intense-d)"><path d="M50 60 Q120 120 190 60 L160 180 L80 180 Z" fill="url(#bg-z-earth-d)" stroke="#a855f7" stroke-width="6"></path><path d="M50 60 Q80 20 120 60 Q160 20 190 60" fill="none" stroke="#ec4899" stroke-width="6" stroke-linecap="round"></path><rect x="100" y="100" width="40" height="40" fill="#ec4899" rx="5"></rect></g><line x1="120" y1="140" x2="120" y2="220" stroke="#a855f7" class="zo2" filter="url(#glow-intense-d)"></line></svg>
diff --git a/client/public/badges/dark/paladin.svg b/client/public/badges/dark/paladin.svg
new file mode 100644
index 0000000..4b7fe7c
--- /dev/null
+++ b/client/public/badges/dark/paladin.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#14b8a6" stroke-width="2" stroke-dasharray="4 8" filter="url(#glow-neon-d)"></circle><g class="p2" stroke="#14b8a6" fill="none" stroke-width="12" filter="url(#glow-neon-d)"><path d="M120 20a100 100 0 01100 100M120 220a100 100 0 01-100-100" stroke-dasharray="20 40"></path></g><polygon points="120,40 180,70 180,150 120,200 60,150 60,70" fill="url(#bg-aegis-d)" stroke="#2dd4bf" stroke-width="4" filter="url(#glow-neon-d)"></polygon><g class="p1" fill="#2dd4bf" filter="url(#glow-intense-d)"><polygon points="120,60 140,110 120,170 100,110"></polygon><polygon points="70,120 110,105 170,120 110,135"></polygon></g></svg>
diff --git a/client/public/badges/dark/paradox.svg b/client/public/badges/dark/paradox.svg
new file mode 100644
index 0000000..823dc10
--- /dev/null
+++ b/client/public/badges/dark/paradox.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}</style><g class="a1" stroke="#14b8a6" fill="none" stroke-width="4" filter="url(#glow-neon-d)"><rect x="40" y="40" width="160" height="160"></rect><rect x="55" y="55" width="130" height="130" transform="rotate(45 120 120)"></rect><rect x="70" y="70" width="100" height="100" transform="rotate(15 120 120)"></rect></g><circle cx="120" cy="120" r="50" fill="url(#bg-arcane-d)" stroke="#2dd4bf" stroke-width="4" filter="url(#glow-neon-d)"></circle><g class="a2" fill="none" stroke="#2dd4bf" filter="url(#glow-intense-d)"><polygon points="120,80 148,140 92,140"></polygon><polygon points="120,160 92,100 148,100"></polygon></g><circle cx="120" cy="120" r="8" fill="#2dd4bf" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/phalanx.svg b/client/public/badges/dark/phalanx.svg
new file mode 100644
index 0000000..0ff6485
--- /dev/null
+++ b/client/public/badges/dark/phalanx.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}</style><g class="p1" filter="url(#glow-neon-d)"><rect x="30" y="30" width="180" height="180" fill="none" stroke="#14b8a6" stroke-width="2" stroke-dasharray="30 60"></rect><rect x="45" y="45" width="150" height="150" fill="none" stroke="#2dd4bf" stroke-width="4"></rect><rect x="60" y="60" width="120" height="120" fill="url(#bg-aegis-d)" stroke="#2dd4bf" stroke-width="2"></rect><g class="p2" fill="none" stroke="#2dd4bf" filter="url(#glow-intense-d)"><rect x="80" y="80" width="80" height="80"></rect><line x1="120" y1="80" x2="120" y2="160"></line><line x1="80" y1="120" x2="160" y2="120"></line></g><circle cx="120" cy="120" r="15" fill="#2dd4bf" filter="url(#glow-intense-d)"></circle></g></svg>
diff --git a/client/public/badges/dark/pig.svg b/client/public/badges/dark/pig.svg
new file mode 100644
index 0000000..189e268
--- /dev/null
+++ b/client/public/badges/dark/pig.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}</style><circle cx="120" cy="120" fill="none" stroke="#3b82f6" class="zpg1" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#3b82f6" class="zpg1" style="animation-delay:1s" filter="url(#glow-intense-d)"></circle><g class="zpg2" transform-origin="120 120" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="70" fill="url(#bg-z-water-d)" stroke="#06b6d4" stroke-width="6"></circle><ellipse cx="120" cy="120" rx="40" ry="25" fill="none" stroke="#3b82f6" stroke-width="6"></ellipse><circle cx="100" cy="120" r="8" fill="#3b82f6"></circle><circle cx="140" cy="120" r="8" fill="#3b82f6"></circle></g></svg>
diff --git a/client/public/badges/dark/pisces.svg b/client/public/badges/dark/pisces.svg
new file mode 100644
index 0000000..fdc8ee9
--- /dev/null
+++ b/client/public/badges/dark/pisces.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#3b82f6" fill="none" filter="url(#glow-neon-d)" opacity="0.5" style="transform-origin:120px 120px"><circle cx="120" cy="120" class="node-water-ripple"></circle><circle cx="120" cy="120" class="node-water-ripple" style="animation-delay:1s"></circle><g style="animation:art 15s linear infinite"><circle cx="120" cy="120" r="90" stroke-dasharray="20 40" stroke-width="2"></circle><circle cx="120" cy="120" r="70" stroke-dasharray="10 30" stroke-width="1"></circle></g></g><g class="wrap-water" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-water-d)" opacity="0.9" stroke="#8b5cf6" stroke-width="2"></circle><line key="l0" x1="80" y1="100" x2="100" y2="150" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l1" x1="100" y1="150" x2="140" y2="150" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l2" x1="140" y1="150" x2="160" y2="100" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l3" x1="80" y1="100" x2="70" y2="110" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l4" x1="160" y1="100" x2="170" y2="110" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><g key="n0"><circle cx="80" cy="100" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0s"></circle><circle cx="80" cy="100" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="100" cy="150" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.2s"></circle><circle cx="100" cy="150" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="140" cy="150" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.4s"></circle><circle cx="140" cy="150" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="160" cy="100" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.6000000000000001s"></circle><circle cx="160" cy="100" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="70" cy="110" r="4" fill="#3b82f6" class="node-water" style="animation-delay:0.8s"></circle><circle cx="70" cy="110" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="170" cy="110" r="4" fill="#3b82f6" class="node-water" style="animation-delay:1s"></circle><circle cx="170" cy="110" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/plasma.svg b/client/public/badges/dark/plasma.svg
new file mode 100644
index 0000000..9408ead
--- /dev/null
+++ b/client/public/badges/dark/plasma.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#84cc16" stroke-width="2" stroke-dasharray="4 8" filter="url(#glow-neon-d)"></circle><g stroke="#a3e635" fill="none" stroke-width="6" stroke-linecap="round" filter="url(#glow-intense-d)"><path class="r1" d="M20 120q50-100 100 0t100 0"></path><path class="r2" d="M20 120q50 100 100 0t100 0"></path></g><circle cx="120" cy="120" r="50" fill="url(#bg-reactor-d)" stroke="#a3e635" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="25" fill="#a3e635" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/pluto.svg b/client/public/badges/dark/pluto.svg
new file mode 100644
index 0000000..3765e29
--- /dev/null
+++ b/client/public/badges/dark/pluto.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}</style><g class="p1" stroke="#a0a0b0" fill="none"><ellipse cx="120" cy="120" rx="100" ry="60" stroke-width="1" stroke-dasharray="4 6" opacity=".6" transform="rotate(30 120 120)"></ellipse><circle cx="215" cy="175" r="5" fill="#a0a0b0" filter="url(#glow-intense-d)"></circle></g><polygon points="120,60 170,90 170,150 120,180 70,150 70,90" fill="url(#bg-supreme-d)" stroke="#c0c0d0" stroke-width="3" filter="url(#glow-neon-d)"></polygon><path d="M120 140q20-40 0-50q-20 10 0 50" fill="#e0e0f0" opacity=".8" filter="url(#glow-intense-d)"></path></svg>
diff --git a/client/public/badges/dark/pulsar.svg b/client/public/badges/dark/pulsar.svg
new file mode 100644
index 0000000..3fbd696
--- /dev/null
+++ b/client/public/badges/dark/pulsar.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}</style><g class="p2" stroke="#38bdf8" fill="none" filter="url(#glow-neon-d)"><ellipse cx="120" cy="120" rx="90" ry="15" stroke-width="2" stroke-dasharray="10 20"></ellipse><ellipse cx="120" cy="120" rx="60" ry="10" stroke-width="4"></ellipse></g><line x1="120" y1="10" x2="120" y2="230" stroke="#ffffff" class="p1" filter="url(#glow-intense-d)" stroke-linecap="round"></line><circle cx="120" cy="120" r="30" fill="url(#bg-void-d)" stroke="#38bdf8" stroke-width="3" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="10" fill="#ffffff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/pulse.svg b/client/public/badges/dark/pulse.svg
new file mode 100644
index 0000000..6a3b3e7
--- /dev/null
+++ b/client/public/badges/dark/pulse.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#eab308" stroke-width="4" stroke-dasharray="2 10" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#facc15" class="r1" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#facc15" class="r1" style="animation-delay:.75s" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="60" fill="url(#bg-reactor-d)" stroke="#eab308" stroke-width="4" filter="url(#glow-neon-d)"></circle><g class="r2" fill="#facc15" filter="url(#glow-intense-d)"><circle cx="120" cy="70" r="10"></circle><circle cx="120" cy="170" r="10"></circle><circle cx="70" cy="120" r="10"></circle><circle cx="170" cy="120" r="10"></circle></g><circle cx="120" cy="120" r="20" fill="#fff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/quantum.svg b/client/public/badges/dark/quantum.svg
new file mode 100644
index 0000000..d567b27
--- /dev/null
+++ b/client/public/badges/dark/quantum.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}</style><g stroke="#a200ff" fill="none" filter="url(#glow-intense-d)"><ellipse class="q1" cx="120" cy="120" rx="110" ry="35" stroke-width="3"></ellipse><ellipse class="q2" cx="120" cy="120" rx="110" ry="35" stroke-width="3" transform="rotate(60 120 120)"></ellipse><ellipse class="q3" cx="120" cy="120" rx="110" ry="35" stroke-width="3" transform="rotate(120 120 120)"></ellipse></g><circle cx="120" cy="120" r="60" fill="url(#bg-supreme-d)" stroke="#d400ff" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="15" fill="none" stroke="#d400ff" stroke-width="3" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="6" fill="#fff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/rabbit.svg b/client/public/badges/dark/rabbit.svg
new file mode 100644
index 0000000..3316794
--- /dev/null
+++ b/client/public/badges/dark/rabbit.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#10b981" stroke-width="1" stroke-dasharray="4 8" filter="url(#glow-neon-d)"></circle><g class="zrb1" filter="url(#glow-intense-d)"><path d="M90 160 Q60 160 60 120 Q60 40 100 40 Q110 80 120 120 Q130 80 140 40 Q180 40 180 120 Q180 160 150 160 Z" fill="url(#bg-z-wood-d)" stroke="#10b981" stroke-width="4"></path><ellipse cx="90" cy="80" rx="10" ry="30" fill="#84cc16" opacity="0.8"></ellipse><ellipse cx="150" cy="80" rx="10" ry="30" fill="#84cc16" opacity="0.8"></ellipse></g><circle cx="120" cy="180" fill="none" stroke="#84cc16" stroke-width="4" class="zrb2" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/radar.svg b/client/public/badges/dark/radar.svg
new file mode 100644
index 0000000..1d0096a
--- /dev/null
+++ b/client/public/badges/dark/radar.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#22c55e" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="70" fill="none" stroke="#22c55e" stroke-width="1" stroke-dasharray="5 5"></circle><circle cx="120" cy="120" r="35" fill="none" stroke="#22c55e" stroke-width="1" stroke-dasharray="5 5"></circle><path d="M15 120h210M120 15v210" stroke="#22c55e" stroke-width="2" opacity=".6"></path><circle cx="120" cy="120" r="105" fill="url(#bg-tactical-d)" opacity=".9"></circle><g class="t1"><path d="M120 120V15a105 105 0 01105 105z" fill="#4ade80" opacity=".4" filter="url(#glow-neon-d)"></path><line x1="120" y1="120" x2="120" y2="15" stroke="#4ade80" stroke-width="4" filter="url(#glow-intense-d)"></line></g><g fill="#4ade80" filter="url(#glow-intense-d)"><circle cx="170" cy="70" r="6" class="t2" style="animation-delay:.3s"></circle><circle cx="60" cy="150" r="5" class="t2" style="animation-delay:1.5s"></circle><circle cx="150" cy="180" r="8" class="t2" style="animation-delay:.8s"></circle></g></svg>
diff --git a/client/public/badges/dark/radiance.svg b/client/public/badges/dark/radiance.svg
new file mode 100644
index 0000000..1df6f76
--- /dev/null
+++ b/client/public/badges/dark/radiance.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="4 8" filter="url(#glow-neon-d)"></circle><g class="r2" stroke="#fb923c" fill="none" stroke-width="4" stroke-linecap="round" filter="url(#glow-intense-d)"><path d="M120 20v40M120 180v40M20 120h40M180 120h40M50 50l30 30M190 190l-30-30M190 50l-30 30M50 190l30-30"></path></g><circle cx="120" cy="120" r="50" fill="url(#bg-reactor-d)" stroke="#fb923c" stroke-width="6" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="50" fill="none" stroke="#fb923c" class="r1" transform-origin="120px 120px" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="15" fill="#fb923c"></circle></svg>
diff --git a/client/public/badges/dark/rat.svg b/client/public/badges/dark/rat.svg
new file mode 100644
index 0000000..2b0581c
--- /dev/null
+++ b/client/public/badges/dark/rat.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#3b82f6" stroke-width="4" stroke-dasharray="1 15 5 30" class="zr1" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="95" fill="none" stroke="#06b6d4" stroke-width="1" stroke-dasharray="4 8" filter="url(#glow-neon-d)"></circle><polygon points="120,40 180,160 120,180 60,160" fill="url(#bg-z-water-d)" stroke="#06b6d4" stroke-width="4" class="zr2" filter="url(#glow-neon-d)"></polygon><path d="M120 40L120 180 M90 100L150 100" stroke="#3b82f6" stroke-width="4" class="zr2" filter="url(#glow-intense-d)"></path><circle cx="120" cy="140" r="10" fill="#3b82f6" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/recon.svg b/client/public/badges/dark/recon.svg
new file mode 100644
index 0000000..87a3c96
--- /dev/null
+++ b/client/public/badges/dark/recon.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}</style><g stroke="#14b8a6" fill="none" stroke-width="2" filter="url(#glow-neon-d)"><rect x="30" y="30" width="180" height="180"></rect><rect x="45" y="45" width="150" height="150" stroke-dasharray="10 10"></rect></g><rect x="60" y="60" width="120" height="120" fill="url(#bg-tactical-d)" stroke="#2dd4bf" stroke-width="4" class="t2" filter="url(#glow-intense-d)"></rect><g fill="#2dd4bf" filter="url(#glow-intense-d)"><rect x="115" y="50" width="10" height="20"></rect><rect x="115" y="170" width="10" height="20"></rect><rect x="50" y="115" width="20" height="10"></rect><rect x="170" y="115" width="20" height="10"></rect></g><g class="t1" filter="url(#glow-intense-d)"><line x1="30" y1="0" x2="210" y2="0" stroke="#2dd4bf" stroke-width="4"></line><rect x="30" y="-30" width="180" height="30" fill="#2dd4bf" opacity=".2"></rect></g></svg>
diff --git a/client/public/badges/dark/rooster.svg b/client/public/badges/dark/rooster.svg
new file mode 100644
index 0000000..64d4d96
--- /dev/null
+++ b/client/public/badges/dark/rooster.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}</style><g class="zro2" stroke="#eab308" fill="none" stroke-width="4" stroke-linecap="round" filter="url(#glow-intense-d)"><line x1="120" y1="10" x2="120" y2="40"></line><line x1="120" y1="200" x2="120" y2="230"></line><line x1="10" y1="120" x2="40" y2="120"></line><line x1="200" y1="120" x2="230" y2="120"></line><line x1="42" y1="42" x2="63" y2="63"></line><line x1="198" y1="198" x2="177" y2="177"></line><line x1="198" y1="42" x2="177" y2="63"></line><line x1="42" y1="198" x2="63" y2="177"></line></g><g class="zro1" filter="url(#glow-intense-d)"><path d="M120 80 L180 140 L60 140 Z" fill="url(#bg-z-metal-d)" stroke="#f59e0b" stroke-width="4"></path><path d="M120 80 L100 40 L120 60 L140 40 Z" fill="#eab308"></path><circle cx="120" cy="120" r="12" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/dark/rune.svg b/client/public/badges/dark/rune.svg
new file mode 100644
index 0000000..12f1bd2
--- /dev/null
+++ b/client/public/badges/dark/rune.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}</style><g class="a1" stroke="#fbbf24" fill="none" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="105" stroke-width="4" stroke-dasharray="15 30 5 10"></circle><circle cx="120" cy="120" r="90" stroke-width="2" stroke-dasharray="60 40"></circle></g><circle cx="120" cy="120" r="75" fill="url(#bg-arcane-d)" stroke="#fcd34d" stroke-width="4" filter="url(#glow-neon-d)"></circle><g class="a2" stroke="#fcd34d" fill="none" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" filter="url(#glow-intense-d)"><path d="M120 60v120M120 75l45-15v50l-45 25M120 135l-45-25v55l45 15"></path><circle cx="120" cy="120" r="8" fill="#fcd34d"></circle></g></svg>
diff --git a/client/public/badges/dark/sagittarius.svg b/client/public/badges/dark/sagittarius.svg
new file mode 100644
index 0000000..6da6ff2
--- /dev/null
+++ b/client/public/badges/dark/sagittarius.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#f59e0b" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px;animation:f-flow 2s linear infinite"><circle cx="120" cy="120" r="100" stroke-dasharray="10 40" stroke-width="4"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="40 10" stroke-width="2"></circle></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-fire-d)" opacity="0.9" stroke="#ef4444" stroke-width="2"></circle><line key="l0" x1="80" y1="160" x2="120" y2="120" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l1" x1="120" y1="120" x2="160" y2="80" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l2" x1="160" y1="80" x2="120" y2="80" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l3" x1="160" y1="80" x2="160" y2="120" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><g key="n0"><circle cx="80" cy="160" r="6" fill="#f59e0b" class="node-fire" style="animation-delay:0s"></circle><circle cx="80" cy="160" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="120" cy="120" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.2s"></circle><circle cx="120" cy="120" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="160" cy="80" r="10" fill="#f59e0b" class="node-fire" style="animation-delay:0.4s"></circle><circle cx="160" cy="80" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="120" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.6000000000000001s"></circle><circle cx="120" cy="80" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="160" cy="120" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.8s"></circle><circle cx="160" cy="120" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/scorpio.svg b/client/public/badges/dark/scorpio.svg
new file mode 100644
index 0000000..a653484
--- /dev/null
+++ b/client/public/badges/dark/scorpio.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#3b82f6" fill="none" filter="url(#glow-neon-d)" opacity="0.5" style="transform-origin:120px 120px"><circle cx="120" cy="120" class="node-water-ripple"></circle><circle cx="120" cy="120" class="node-water-ripple" style="animation-delay:1s"></circle><g style="animation:art 15s linear infinite"><circle cx="120" cy="120" r="90" stroke-dasharray="20 40" stroke-width="2"></circle><circle cx="120" cy="120" r="70" stroke-dasharray="10 30" stroke-width="1"></circle></g></g><g class="wrap-water" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-water-d)" opacity="0.9" stroke="#8b5cf6" stroke-width="2"></circle><line key="l0" x1="80" y1="80" x2="110" y2="100" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l1" x1="110" y1="100" x2="100" y2="140" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l2" x1="100" y1="140" x2="140" y2="170" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l3" x1="140" y1="170" x2="170" y2="140" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l4" x1="170" y1="140" x2="160" y2="110" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><g key="n0"><circle cx="80" cy="80" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0s"></circle><circle cx="80" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="110" cy="100" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.2s"></circle><circle cx="110" cy="100" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="100" cy="140" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.4s"></circle><circle cx="100" cy="140" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="170" r="6" fill="#3b82f6" class="node-water" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="170" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="170" cy="140" r="10" fill="#3b82f6" class="node-water" style="animation-delay:0.8s"></circle><circle cx="170" cy="140" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="160" cy="110" r="6" fill="#3b82f6" class="node-water" style="animation-delay:1s"></circle><circle cx="160" cy="110" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/sentinel.svg b/client/public/badges/dark/sentinel.svg
new file mode 100644
index 0000000..292f4c3
--- /dev/null
+++ b/client/public/badges/dark/sentinel.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}</style><path d="M120 10c60 0 110 50 110 110s-50 110-110 110S10 180 10 120 60 10 120 10z" fill="url(#bg-aegis-d)" stroke="#60a5fa" stroke-width="4" filter="url(#glow-neon-d)"></path><circle cx="120" cy="120" r="105" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="10 40 80 20" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#60a5fa" class="s2" filter="url(#glow-intense-d)"></circle><g class="s1" filter="url(#glow-intense-d)"><path d="M120 120V20a100 100 0 01100 100z" fill="#60a5fa" opacity=".3"></path><line x1="120" y1="120" x2="120" y2="20" stroke="#60a5fa" stroke-width="6" stroke-linecap="round"></line></g><circle cx="120" cy="120" r="25" fill="#60a5fa" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/sigil.svg b/client/public/badges/dark/sigil.svg
new file mode 100644
index 0000000..f9fe656
--- /dev/null
+++ b/client/public/badges/dark/sigil.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#a855f7" stroke-width="4" stroke-dasharray="2 15" class="a1" filter="url(#glow-neon-d)"></circle><g class="a2" stroke="#c084fc" fill="none" stroke-width="4" filter="url(#glow-intense-d)"><polygon points="120,40 189,160 51,160"></polygon><polygon points="120,200 51,80 189,80"></polygon></g><circle cx="120" cy="120" r="45" fill="url(#bg-arcane-d)" stroke="#c084fc" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="20" fill="none" stroke="#c084fc" stroke-width="2" stroke-dasharray="5 5" class="a1" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="5" fill="#fff"></circle></svg>
diff --git a/client/public/badges/dark/snake.svg b/client/public/badges/dark/snake.svg
new file mode 100644
index 0000000..1b21ec3
--- /dev/null
+++ b/client/public/badges/dark/snake.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#f43f5e" stroke-width="1" stroke-dasharray="2 6" class="zs2" filter="url(#glow-neon-d)"></circle><path d="M160 60 Q200 60 200 100 Q200 140 160 140 Q80 140 80 180 Q80 220 120 220 Q160 220 160 180" fill="none" stroke="#f43f5e" stroke-width="12" stroke-linecap="round" class="zs1" filter="url(#glow-intense-d)"></path><path d="M80 180 Q40 180 40 140 Q40 100 80 100 Q160 100 160 60 Q160 20 120 20 Q80 20 80 60" fill="none" stroke="#f97316" stroke-width="6" stroke-linecap="round" class="zs1" style="animation-direction:reverse" filter="url(#glow-intense-d)"></path><circle cx="120" cy="120" r="30" fill="url(#bg-z-fire-d)" stroke="#f43f5e" stroke-width="2"></circle><circle cx="120" cy="120" r="10" fill="#f97316" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/sniper.svg b/client/public/badges/dark/sniper.svg
new file mode 100644
index 0000000..1468881
--- /dev/null
+++ b/client/public/badges/dark/sniper.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}</style><g class="t2" fill="none" stroke="#ef4444" stroke-width="2" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="105" stroke-dasharray="2 10 20 5"></circle><circle cx="120" cy="120" r="60" fill="url(#bg-tactical-d)"></circle></g><g class="t1" stroke="#f87171" fill="none" stroke-width="6" filter="url(#glow-intense-d)"><path d="M60 100V60h40M140 60h40v40M180 140v40h-40M100 180H60v-40"></path><circle cx="120" cy="120" r="4" fill="#f87171"></circle><path d="M120 80v80M80 120h80" stroke-width="2"></path></g></svg>
diff --git a/client/public/badges/dark/solaris.svg b/client/public/badges/dark/solaris.svg
new file mode 100644
index 0000000..4ff31ed
--- /dev/null
+++ b/client/public/badges/dark/solaris.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}</style><g class="s1" stroke="#ff4500" fill="none" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="105" stroke-width="6" stroke-dasharray="1 15" stroke-linecap="round"></circle><circle cx="120" cy="120" r="90" stroke-width="4" stroke-dasharray="20 40"></circle></g><g class="s2" stroke="#ffcc00" fill="none" filter="url(#glow-neon-d)"><circle cx="120" cy="120" r="115" stroke-width="3" stroke-dasharray="2 30" stroke-linecap="round"></circle><circle cx="120" cy="120" r="75" stroke-width="2" stroke-dasharray="50 50"></circle></g><circle cx="120" cy="120" r="60" fill="#ff2a00" stroke="#ffaa00" stroke-width="4" class="s3" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="50" fill="url(#bg-supreme-d)" stroke="none"></circle><circle cx="120" cy="120" r="15" fill="#ffaa00" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/strike.svg b/client/public/badges/dark/strike.svg
new file mode 100644
index 0000000..e8c863e
--- /dev/null
+++ b/client/public/badges/dark/strike.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}</style><polygon points="120,20 210,160 30,160" fill="none" stroke="#e11d48" stroke-width="4" stroke-dasharray="10 15" filter="url(#glow-neon-d)"></polygon><polygon points="120,50 180,150 60,150" fill="url(#bg-tactical-d)" stroke="#f43f5e" stroke-width="6" filter="url(#glow-intense-d)"></polygon><g class="t1" stroke="#f43f5e" fill="none" stroke-width="8" stroke-linecap="round" filter="url(#glow-intense-d)"><line x1="120" y1="30" x2="120" y2="120"></line><polygon points="120,140 135,120 105,120" fill="#f43f5e"></polygon></g><rect x="110" y="170" width="20" height="20" fill="#f43f5e" class="t2" filter="url(#glow-intense-d)"></rect></svg>
diff --git a/client/public/badges/dark/taurus.svg b/client/public/badges/dark/taurus.svg
new file mode 100644
index 0000000..37d35b4
--- /dev/null
+++ b/client/public/badges/dark/taurus.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px"><g class="e-rot-box"><rect x="20" y="20" width="200" height="200" stroke-width="1" stroke-dasharray="10 10"></rect><rect x="40" y="40" width="160" height="160" stroke-width="1" stroke-dasharray="5 15"></rect></g><path d="M120 20v200M20 120h200" stroke-width="2"></path><line x1="20" y1="120" x2="220" y2="120" stroke="#14b8a6" stroke-width="4" class="e-scan-line" opacity="0.6"></line></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-earth-d)" opacity="0.9" stroke="#22c55e" stroke-width="2"></circle><line key="l0" x1="70" y1="60" x2="100" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l1" x1="170" y1="60" x2="140" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l2" x1="100" y1="100" x2="140" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l3" x1="120" y1="100" x2="120" y2="160" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><g key="n0"><circle cx="70" cy="60" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0s"></circle><circle cx="70" cy="60" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="170" cy="60" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0.2s"></circle><circle cx="170" cy="60" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="100" cy="100" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.4s"></circle><circle cx="100" cy="100" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="100" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="100" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="120" cy="160" r="10" fill="#14b8a6" class="node-earth" style="animation-delay:0.8s"></circle><circle cx="120" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/tiger.svg b/client/public/badges/dark/tiger.svg
new file mode 100644
index 0000000..6d904ab
--- /dev/null
+++ b/client/public/badges/dark/tiger.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}</style><polygon points="120,20 220,120 120,220 20,120" fill="none" stroke="#84cc16" stroke-width="2" filter="url(#glow-neon-d)"></polygon><g class="zt1" filter="url(#glow-intense-d)" transform-origin="120 120"><rect x="60" y="60" width="120" height="120" fill="url(#bg-z-wood-d)" stroke="#10b981" stroke-width="4" rx="20"></rect><line x1="120" y1="60" x2="120" y2="180" stroke="#10b981" stroke-width="6"></line></g><g stroke="#84cc16" stroke-width="10" stroke-linecap="round" class="zt2" filter="url(#glow-intense-d)"><line x1="180" y1="40" x2="40" y2="100"></line><line x1="200" y1="80" x2="60" y2="140" style="animation-delay:0.1s"></line><line x1="220" y1="120" x2="80" y2="180" style="animation-delay:0.2s"></line></g></svg>
diff --git a/client/public/badges/dark/titan.svg b/client/public/badges/dark/titan.svg
new file mode 100644
index 0000000..9a88787
--- /dev/null
+++ b/client/public/badges/dark/titan.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#00ff66" stroke-width="12" stroke-dasharray="15 15" class="t1" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="85" fill="none" stroke="#00ff66" stroke-width="3" stroke-dasharray="50 100" class="t2" filter="url(#glow-intense-d)"></circle><path d="M50 80L120 40l70 40v80l-70 40-70-40z" fill="url(#bg-supreme-d)" stroke="#00ff66" stroke-width="5" filter="url(#glow-neon-d)"></path><rect x="105" y="90" width="30" height="60" fill="none" stroke="#00ff66" stroke-width="3" filter="url(#glow-neon-d)"></rect><rect x="110" y="105" width="20" height="30" fill="#00ff66" filter="url(#glow-intense-d)"></rect></svg>
diff --git a/client/public/badges/dark/tracer.svg b/client/public/badges/dark/tracer.svg
new file mode 100644
index 0000000..612e886
--- /dev/null
+++ b/client/public/badges/dark/tracer.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}</style><rect x="30" y="30" width="180" height="180" fill="none" stroke="#f97316" stroke-width="2" opacity=".5" filter="url(#glow-neon-d)"></rect><rect x="60" y="60" width="120" height="120" fill="url(#bg-tactical-d)" stroke="#fb923c" stroke-width="4" filter="url(#glow-intense-d)"></rect><path d="M40 40l40 60 80-20 20 80" fill="none" stroke="#fb923c" stroke-width="3" stroke-dasharray="400" class="t1" filter="url(#glow-intense-d)"></path><g fill="#fb923c" filter="url(#glow-intense-d)"><circle cx="80" cy="100" r="6" class="t2"></circle><circle cx="160" cy="80" r="6" class="t2" style="animation-delay:.5s"></circle><circle cx="180" cy="160" r="8" class="t2" style="animation-delay:.8s"></circle></g></svg>
diff --git a/client/public/badges/dark/ultra.svg b/client/public/badges/dark/ultra.svg
new file mode 100644
index 0000000..4c32809
--- /dev/null
+++ b/client/public/badges/dark/ultra.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}</style><g class="u1" stroke="#00f0ff" fill="none"><path d="M20 120a100 100 0 01100-100m100 100a100 100 0 01-100 100" stroke-width="6" stroke-linecap="round" filter="url(#glow-intense-d)"></path></g><circle cx="120" cy="120" r="85" fill="none" stroke="#0088ff" stroke-width="3" stroke-dasharray="15 30 5 10" class="u2" filter="url(#glow-neon-d)"></circle><polygon points="120,45 185,82.5 185,157.5 120,195 55,157.5 55,82.5" fill="url(#bg-supreme-d)" stroke="#00f0ff" stroke-width="4" filter="url(#glow-neon-d)"></polygon><path d="M90 120h60M120 90v60" stroke="#00f0ff" stroke-width="3" filter="url(#glow-neon-d)"></path><rect x="115" y="115" width="10" height="10" fill="#00f0ff" filter="url(#glow-intense-d)"></rect></svg>
diff --git a/client/public/badges/dark/uranus.svg b/client/public/badges/dark/uranus.svg
new file mode 100644
index 0000000..6d2ce12
--- /dev/null
+++ b/client/public/badges/dark/uranus.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}</style><g transform="rotate(80 120 120)"><ellipse class="u1" cx="120" cy="120" rx="105" ry="15" stroke="#99ffff" stroke-width="3" fill="none" stroke-dasharray="20 10" filter="url(#glow-intense-d)"></ellipse></g><circle cx="120" cy="120" r="60" fill="url(#bg-ice-d)" stroke="#66ccff" stroke-width="4" filter="url(#glow-neon-d)"></circle><path d="M80 80q40-20 80 0M80 160q40 20 80 0" stroke="#99ffff" stroke-width="2" fill="none" opacity=".6"></path><circle cx="120" cy="120" r="10" fill="#99ffff" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/vanguard.svg b/client/public/badges/dark/vanguard.svg
new file mode 100644
index 0000000..2ea4dd9
--- /dev/null
+++ b/client/public/badges/dark/vanguard.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}</style><g class="v2" stroke="#ffffff" fill="none" opacity=".4"><polygon points="120,10 130,50 120,30 110,50" fill="#ffffff" filter="url(#glow-intense-d)"></polygon><polygon points="120,230 130,190 120,210 110,190" fill="#ffffff"></polygon><circle cx="120" cy="120" r="105" stroke-width="1" stroke-dasharray="2 10"></circle></g><g class="v1"><path d="M120 40l70 140-70-30-70 30z" fill="url(#bg-platinum-d)" stroke="#ffffff" stroke-width="4" filter="url(#glow-neon-d)"></path><path d="M120 40v110" stroke="#00e5ff" stroke-width="4" filter="url(#glow-intense-d)"></path><polygon points="120,70 140,120 120,110 100,120" fill="#00e5ff" filter="url(#glow-intense-d)"></polygon></g></svg>
diff --git a/client/public/badges/dark/virgo.svg b/client/public/badges/dark/virgo.svg
new file mode 100644
index 0000000..a30a8c3
--- /dev/null
+++ b/client/public/badges/dark/virgo.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-d)" opacity="0.4" style="transform-origin:120px 120px"><g class="e-rot-box"><rect x="20" y="20" width="200" height="200" stroke-width="1" stroke-dasharray="10 10"></rect><rect x="40" y="40" width="160" height="160" stroke-width="1" stroke-dasharray="5 15"></rect></g><path d="M120 20v200M20 120h200" stroke-width="2"></path><line x1="20" y1="120" x2="220" y2="120" stroke="#14b8a6" stroke-width="4" class="e-scan-line" opacity="0.6"></line></g><g class="" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-earth-d)" opacity="0.9" stroke="#22c55e" stroke-width="2"></circle><line key="l0" x1="150" y1="70" x2="120" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l1" x1="120" y1="100" x2="90" y2="130" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l2" x1="90" y1="130" x2="130" y2="170" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l3" x1="120" y1="100" x2="160" y2="140" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><g key="n0"><circle cx="150" cy="70" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0s"></circle><circle cx="150" cy="70" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="120" cy="100" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.2s"></circle><circle cx="120" cy="100" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="90" cy="130" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.4s"></circle><circle cx="90" cy="130" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="130" cy="170" r="10" fill="#14b8a6" class="node-earth" style="animation-delay:0.6000000000000001s"></circle><circle cx="130" cy="170" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="160" cy="140" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.8s"></circle><circle cx="160" cy="140" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/dark/vortex.svg b/client/public/badges/dark/vortex.svg
new file mode 100644
index 0000000..0c83859
--- /dev/null
+++ b/client/public/badges/dark/vortex.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#ec4899" stroke-width="2" stroke-dasharray="10 30" filter="url(#glow-neon-d)"></circle><g class="r1" stroke="#f472b6" fill="none" stroke-width="6" stroke-linecap="round" filter="url(#glow-intense-d)"><path d="M20 120q100-20 100-100M220 120q-100 20-100 100M120 220q-20-100-100-100M120 20q20 100 100 100"></path></g><circle cx="120" cy="120" r="45" fill="url(#bg-reactor-d)" stroke="#f472b6" stroke-width="4" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="20" fill="#f472b6" class="r2" transform-origin="120px 120px" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/ward.svg b/client/public/badges/dark/ward.svg
new file mode 100644
index 0000000..f3c8a3a
--- /dev/null
+++ b/client/public/badges/dark/ward.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}</style><g class="w2" stroke="#6366f1" fill="none" stroke-width="2" filter="url(#glow-neon-d)"><ellipse cx="120" cy="120" rx="100" ry="40"></ellipse><ellipse cx="120" cy="120" rx="100" ry="40" transform="rotate(60 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="40" transform="rotate(120 120 120)"></ellipse></g><circle cx="120" cy="120" r="60" fill="url(#bg-aegis-d)" stroke="#818cf8" stroke-width="4" class="w1" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="30" fill="none" stroke="#818cf8" stroke-width="6" stroke-dasharray="10 10" class="w2" style="animation-direction:reverse" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" r="10" fill="#818cf8" filter="url(#glow-intense-d)"></circle></svg>
diff --git a/client/public/badges/dark/wormhole.svg b/client/public/badges/dark/wormhole.svg
new file mode 100644
index 0000000..ab3a053
--- /dev/null
+++ b/client/public/badges/dark/wormhole.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}</style><g class="w1" fill="none" filter="url(#glow-intense-d)"><path d="M120 10q60 50 0 110M120 230q-60-50 0-110M10 120q50-60 110 0M230 120q-50 60-110 0" stroke="#2dd4bf" stroke-width="3"></path></g><circle cx="120" cy="120" fill="none" stroke="#2dd4bf" class="w2" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#818cf8" class="w2" style="animation-delay:1s" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#2dd4bf" class="w2" style="animation-delay:2s" filter="url(#glow-neon-d)"></circle><circle cx="120" cy="120" r="30" fill="url(#bg-void-d)" stroke="none" filter="url(#glow-neon-d)"></circle></svg>
diff --git a/client/public/badges/light/abyss.svg b/client/public/badges/light/abyss.svg
new file mode 100644
index 0000000..660bac3
--- /dev/null
+++ b/client/public/badges/light/abyss.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#b45309" stroke-width="2" stroke-dasharray="5 20" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="70" fill="url(#bg-arcane-l)" stroke="#d97706" stroke-width="4" filter="url(#glow-neon-l)"></circle><g stroke="#d97706" fill="none" stroke-width="4" filter="url(#glow-intense-l)"><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" class="a1"></polygon><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" class="a1" style="animation-delay:1s"></polygon><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" class="a1" style="animation-delay:2s"></polygon></g><circle cx="120" cy="120" r="10" fill="#000" stroke="#d97706" stroke-width="2" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/aether.svg b/client/public/badges/light/aether.svg
new file mode 100644
index 0000000..8b262db
--- /dev/null
+++ b/client/public/badges/light/aether.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}</style><g class="a1" stroke="#4338ca" fill="none" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="10 15 40 15"></circle><polygon points="120,15 194.2,45.8 225,120 194.2,194.2 120,225 45.8,194.2 15,120 45.8,45.8" stroke-width="1" opacity=".6"></polygon></g><circle cx="120" cy="120" r="65" fill="url(#bg-arcane-l)" stroke="#4f46e5" stroke-width="6" filter="url(#glow-neon-l)"></circle><g stroke="#4f46e5" stroke-width="2" fill="none" opacity=".5" filter="url(#glow-neon-l)"><path d="M120 55v130M55 120h130"></path></g><g fill="#4f46e5" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="18"></circle><circle cx="120" cy="55" r="4" class="a2"></circle><circle cx="120" cy="185" r="4" class="a2" style="animation-delay:1s"></circle><circle cx="55" cy="120" r="4" class="a2" style="animation-delay:.5s"></circle><circle cx="185" cy="120" r="4" class="a2" style="animation-delay:1.5s"></circle></g></svg>
diff --git a/client/public/badges/light/apex.svg b/client/public/badges/light/apex.svg
new file mode 100644
index 0000000..2077836
--- /dev/null
+++ b/client/public/badges/light/apex.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}</style><g class="a1" stroke="#ff8800" fill="none"><polygon points="120,10 230,120 120,230 10,120" stroke-width="1" stroke-dasharray="10 10" opacity=".6"></polygon><circle cx="120" cy="120" r="85" stroke-width="4" stroke-dasharray="40 80" filter="url(#glow-intense-l)"></circle></g><polygon points="120,40 200,120 120,200 40,120" fill="url(#bg-supreme-l)" stroke="#ff8800" stroke-width="5" filter="url(#glow-neon-l)"></polygon><polygon points="120,75 165,120 120,165 75,120" fill="none" stroke="#ff8800" stroke-width="3" filter="url(#glow-neon-l)"></polygon><polygon points="120,95 145,120 120,145 95,120" fill="#ff8800" filter="url(#glow-intense-l)"></polygon></svg>
diff --git a/client/public/badges/light/aquarius.svg b/client/public/badges/light/aquarius.svg
new file mode 100644
index 0000000..e0d17d6
--- /dev/null
+++ b/client/public/badges/light/aquarius.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#8b5cf6" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px;animation:art 4s linear infinite"><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(45 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(-45 120 120)"></ellipse></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-air-l)" opacity="0.9" stroke="#0ea5e9" stroke-width="2"></circle><line key="l0" x1="70" y1="100" x2="100" y2="80" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l1" x1="100" y1="80" x2="140" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l2" x1="140" y1="120" x2="170" y2="100" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l3" x1="70" y1="140" x2="100" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l4" x1="100" y1="120" x2="140" y2="160" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l5" x1="140" y1="160" x2="170" y2="140" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><g key="n0"><circle cx="70" cy="100" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0s"></circle><circle cx="70" cy="100" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="100" cy="80" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.2s"></circle><circle cx="100" cy="80" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="140" cy="120" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.4s"></circle><circle cx="140" cy="120" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="170" cy="100" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.6000000000000001s"></circle><circle cx="170" cy="100" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="70" cy="140" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.8s"></circle><circle cx="70" cy="140" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="100" cy="120" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:1s"></circle><circle cx="100" cy="120" r="3" fill="#fff"></circle></g><g key="n6"><circle cx="140" cy="160" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:1.2000000000000002s"></circle><circle cx="140" cy="160" r="3" fill="#fff"></circle></g><g key="n7"><circle cx="170" cy="140" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:1.4000000000000001s"></circle><circle cx="170" cy="140" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/ares.svg b/client/public/badges/light/ares.svg
new file mode 100644
index 0000000..6293dc7
--- /dev/null
+++ b/client/public/badges/light/ares.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}</style><g class="a1" stroke="#ee1100" fill="none" filter="url(#glow-intense-l)"><path d="M20 60V20h40m120 0h40v40m0 120v40h-40M60 220H20v-40" stroke-width="6"></path><circle cx="120" cy="120" r="100" stroke-width="2" stroke-dasharray="1 10"></circle></g><polygon points="120,40 189,80 189,160 120,200 51,160 51,80" fill="url(#bg-supreme-l)" stroke="#cc1100" stroke-width="4" filter="url(#glow-neon-l)"></polygon><circle cx="120" cy="120" r="40" stroke="#ee1100" stroke-width="2" fill="none"></circle><circle cx="120" cy="120" r="10" fill="#ee1100" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/aries.svg b/client/public/badges/light/aries.svg
new file mode 100644
index 0000000..13df493
--- /dev/null
+++ b/client/public/badges/light/aries.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#f59e0b" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px;animation:f-flow 2s linear infinite"><circle cx="120" cy="120" r="100" stroke-dasharray="10 40" stroke-width="4"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="40 10" stroke-width="2"></circle></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-fire-l)" opacity="0.9" stroke="#ef4444" stroke-width="2"></circle><line key="l0" x1="80" y1="80" x2="120" y2="140" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l1" x1="160" y1="80" x2="120" y2="140" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l2" x1="120" y1="140" x2="120" y2="180" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><g key="n0"><circle cx="80" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0s"></circle><circle cx="80" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="160" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.2s"></circle><circle cx="160" cy="80" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="120" cy="140" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.4s"></circle><circle cx="120" cy="140" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="120" cy="180" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.6000000000000001s"></circle><circle cx="120" cy="180" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/astral.svg b/client/public/badges/light/astral.svg
new file mode 100644
index 0000000..411abf6
--- /dev/null
+++ b/client/public/badges/light/astral.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}</style><g stroke="#be185d" fill="none" stroke-width="2" filter="url(#glow-neon-l)"><ellipse cx="120" cy="120" rx="100" ry="30" class="a1"></ellipse><ellipse cx="120" cy="120" rx="100" ry="30" class="a2" transform="rotate(60 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="30" class="a3" transform="rotate(120 120 120)"></ellipse></g><circle cx="120" cy="120" r="50" fill="url(#bg-arcane-l)" stroke="#db2777" stroke-width="4" filter="url(#glow-neon-l)"></circle><g fill="#db2777" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="15"></circle><circle cx="220" cy="120" r="6" class="a1"></circle><circle cx="20" cy="120" r="8" class="a2"></circle><circle cx="120" cy="20" r="5" class="a3"></circle></g></svg>
diff --git a/client/public/badges/light/barrage.svg b/client/public/badges/light/barrage.svg
new file mode 100644
index 0000000..d2d8381
--- /dev/null
+++ b/client/public/badges/light/barrage.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}</style><rect x="20" y="20" width="200" height="200" fill="none" stroke="#115e59" stroke-width="2" opacity=".3" filter="url(#glow-neon-l)"></rect><rect x="80" y="80" width="80" height="80" fill="url(#bg-tactical-l)" stroke="#0f766e" stroke-width="4" filter="url(#glow-intense-l)"></rect><g stroke="#0f766e" fill="none" stroke-width="3" filter="url(#glow-intense-l)"><g class="t1" transform-origin="50px 50px"><rect x="30" y="30" width="40" height="40"></rect><path d="M50 20v60M20 50h60"></path></g><g class="t1" style="animation-delay:.5s" transform-origin="190px 60px"><rect x="170" y="40" width="40" height="40"></rect><circle cx="190" cy="60" r="10" fill="#0f766e"></circle></g><g class="t1" style="animation-delay:1s" transform-origin="60px 190px"><circle cx="60" cy="190" r="25"></circle><circle cx="60" cy="190" r="5" fill="#0f766e"></circle></g><polygon points="180,155 205,205 155,205" class="t1" style="animation-delay:1.5s" transform-origin="180px 180px"></polygon></g></svg>
diff --git a/client/public/badges/light/barrier.svg b/client/public/badges/light/barrier.svg
new file mode 100644
index 0000000..39bb419
--- /dev/null
+++ b/client/public/badges/light/barrier.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}</style><g stroke="#1d4ed8" fill="none" stroke-width="4" filter="url(#glow-neon-l)"><line x1="20" y1="60" x2="220" y2="60" stroke-dasharray="20 20"></line><line x1="20" y1="180" x2="220" y2="180" stroke-dasharray="20 20"></line></g><rect x="40" y="80" width="160" height="80" fill="url(#bg-aegis-l)" stroke="#2563eb" stroke-width="6" filter="url(#glow-intense-l)"></rect><g fill="#2563eb" filter="url(#glow-intense-l)"><rect x="60" y="90" width="30" height="60" class="b1"></rect><rect x="105" y="90" width="30" height="60" class="b2"></rect><rect x="150" y="90" width="30" height="60" class="b1"></rect></g></svg>
diff --git a/client/public/badges/light/bastion.svg b/client/public/badges/light/bastion.svg
new file mode 100644
index 0000000..2641e0e
--- /dev/null
+++ b/client/public/badges/light/bastion.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}</style><g filter="url(#glow-neon-l)"><polygon class="a1" points="120,10 215,65 120,110 25,65" fill="none" stroke="#0284c7" stroke-width="4"></polygon><polygon class="a2" points="120,230 215,175 120,130 25,175" fill="none" stroke="#0284c7" stroke-width="4"></polygon></g><polygon points="120,40 189,80 189,160 120,200 51,160 51,80" fill="url(#bg-aegis-l)" stroke="#0369a1" stroke-width="2"></polygon><g class="a3" filter="url(#glow-intense-l)"><polygon points="120,60 172,90 172,150 120,180 68,150 68,90" fill="none" stroke="#0284c7" stroke-width="4"></polygon><circle cx="120" cy="120" r="20" fill="#0284c7" opacity=".8"></circle><rect x="110" y="110" width="20" height="20" fill="#fff" transform="rotate(45 120 120)"></rect></g></svg>
diff --git a/client/public/badges/light/blackhole.svg b/client/public/badges/light/blackhole.svg
new file mode 100644
index 0000000..7235bd8
--- /dev/null
+++ b/client/public/badges/light/blackhole.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}</style><g class="b1" stroke="#8800ff" fill="none" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="95" stroke-width="8" stroke-dasharray="10 40 80 20" opacity=".8"></circle></g><g class="b2" stroke="#b700ff" fill="none" filter="url(#glow-neon-l)"><path d="M120 30q60 30 0 90M120 210q-60-30 0-90" stroke-width="4"></path></g><circle cx="120" cy="120" r="45" fill="url(#bg-void-l)" stroke="#6600cc" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="43" fill="#000" stroke="none"></circle><circle cx="120" cy="120" r="20" fill="none" stroke="#330088" stroke-width="2" stroke-dasharray="2 6" class="b1"></circle></svg>
diff --git a/client/public/badges/light/cancer.svg b/client/public/badges/light/cancer.svg
new file mode 100644
index 0000000..ac70a73
--- /dev/null
+++ b/client/public/badges/light/cancer.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#3b82f6" fill="none" filter="url(#glow-neon-l)" opacity="0.5" style="transform-origin:120px 120px"><circle cx="120" cy="120" class="node-water-ripple"></circle><circle cx="120" cy="120" class="node-water-ripple" style="animation-delay:1s"></circle><g style="animation:art 15s linear infinite"><circle cx="120" cy="120" r="90" stroke-dasharray="20 40" stroke-width="2"></circle><circle cx="120" cy="120" r="70" stroke-dasharray="10 30" stroke-width="1"></circle></g></g><g class="wrap-water" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-water-l)" opacity="0.9" stroke="#8b5cf6" stroke-width="2"></circle><line key="l0" x1="100" y1="80" x2="140" y2="100" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l1" x1="140" y1="100" x2="100" y2="140" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l2" x1="100" y1="140" x2="140" y2="160" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><g key="n0"><circle cx="100" cy="80" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0s"></circle><circle cx="100" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="140" cy="100" r="6" fill="#3b82f6" class="node-water" style="animation-delay:0.2s"></circle><circle cx="140" cy="100" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="100" cy="140" r="6" fill="#3b82f6" class="node-water" style="animation-delay:0.4s"></circle><circle cx="100" cy="140" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="160" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/capricorn.svg b/client/public/badges/light/capricorn.svg
new file mode 100644
index 0000000..c60ecad
--- /dev/null
+++ b/client/public/badges/light/capricorn.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px"><g class="e-rot-box"><rect x="20" y="20" width="200" height="200" stroke-width="1" stroke-dasharray="10 10"></rect><rect x="40" y="40" width="160" height="160" stroke-width="1" stroke-dasharray="5 15"></rect></g><path d="M120 20v200M20 120h200" stroke-width="2"></path><line x1="20" y1="120" x2="220" y2="120" stroke="#14b8a6" stroke-width="4" class="e-scan-line" opacity="0.6"></line></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-earth-l)" opacity="0.9" stroke="#22c55e" stroke-width="2"></circle><line key="l0" x1="80" y1="80" x2="120" y2="140" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l1" x1="120" y1="140" x2="160" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l2" x1="160" y1="100" x2="140" y2="160" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l3" x1="140" y1="160" x2="120" y2="140" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><g key="n0"><circle cx="80" cy="80" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0s"></circle><circle cx="80" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="120" cy="140" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0.2s"></circle><circle cx="120" cy="140" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="160" cy="100" r="10" fill="#14b8a6" class="node-earth" style="animation-delay:0.4s"></circle><circle cx="160" cy="100" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="160" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/citadel.svg b/client/public/badges/light/citadel.svg
new file mode 100644
index 0000000..e4884cf
--- /dev/null
+++ b/client/public/badges/light/citadel.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}</style><g class="c2" stroke="#0369a1" fill="none" stroke-width="6" filter="url(#glow-neon-l)"><polygon points="120,10 198,42 230,120 198,198 120,230 42,198 10,120 42,42" stroke-dasharray="30 20"></polygon></g><polygon points="120,35 180,60 205,120 180,180 120,205 60,180 35,120 60,60" fill="url(#bg-aegis-l)" stroke="#0284c7" stroke-width="4" filter="url(#glow-intense-l)"></polygon><g class="c1" stroke="#0284c7" fill="none" stroke-width="4" filter="url(#glow-intense-l)"><rect x="80" y="80" width="80" height="80"></rect><rect x="80" y="80" width="80" height="80" transform="rotate(45 120 120)"></rect></g><circle cx="120" cy="120" r="20" fill="#0284c7" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/core.svg b/client/public/badges/light/core.svg
new file mode 100644
index 0000000..12bd06c
--- /dev/null
+++ b/client/public/badges/light/core.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}</style><circle cx="120" cy="120" r="80" fill="none" stroke="#be185d" class="r2" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="60" fill="url(#bg-reactor-l)" stroke="#db2777" stroke-width="4" filter="url(#glow-neon-l)"></circle><g class="r1" fill="#db2777" filter="url(#glow-intense-l)"><polygon points="120,80 155,140 85,140"></polygon><polygon points="120,160 85,100 155,100"></polygon><circle cx="120" cy="120" r="15" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/light/cronus.svg b/client/public/badges/light/cronus.svg
new file mode 100644
index 0000000..7534ae8
--- /dev/null
+++ b/client/public/badges/light/cronus.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}</style><g transform="rotate(-25 120 120)"><ellipse class="c1" cx="120" cy="120" rx="110" ry="30" stroke="#d4a373" stroke-width="4" fill="none" stroke-dasharray="40 20" filter="url(#glow-intense-l)"></ellipse><ellipse class="c2" cx="120" cy="120" rx="95" ry="20" stroke="#cc8b45" stroke-width="2" fill="none" stroke-dasharray="5 10" filter="url(#glow-neon-l)"></ellipse><ellipse cx="120" cy="120" rx="120" ry="40" stroke="#a06a33" stroke-width="1" fill="none" opacity=".4"></ellipse></g><circle cx="120" cy="120" r="55" fill="url(#bg-supreme-l)" stroke="#d4a373" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="18" fill="none" stroke="#d4a373" stroke-width="2" stroke-dasharray="4 4"></circle><circle cx="120" cy="120" r="8" fill="#d4a373" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/crosshair.svg b/client/public/badges/light/crosshair.svg
new file mode 100644
index 0000000..7c0743a
--- /dev/null
+++ b/client/public/badges/light/crosshair.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}</style><g class="t1" stroke="#991b1b" fill="none" stroke-width="4" filter="url(#glow-neon-l)"><path d="M60 40a100 100 0 01120 0M60 200a100 100 0 00120 0"></path></g><circle cx="120" cy="120" r="60" fill="url(#bg-tactical-l)" stroke="#b91c1c" stroke-width="2" filter="url(#glow-neon-l)"></circle><g class="t2" stroke="#b91c1c" fill="none" filter="url(#glow-intense-l)"><path d="M120 50v50M120 140v50M50 120h50M140 120h50"></path></g><circle cx="120" cy="120" r="10" fill="#b91c1c" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/defender.svg b/client/public/badges/light/defender.svg
new file mode 100644
index 0000000..4592fd9
--- /dev/null
+++ b/client/public/badges/light/defender.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}</style><g class="d2" stroke="#6d28d9" fill="none" stroke-width="4" filter="url(#glow-neon-l)"><polygon points="120,20 206,170 34,170" stroke-dasharray="20 40"></polygon><polygon points="120,220 34,70 206,70" stroke-dasharray="20 40"></polygon></g><polygon points="120,40 190,160 50,160" fill="url(#bg-aegis-l)" stroke="#7c3aed" stroke-width="6" class="d1" filter="url(#glow-intense-l)"></polygon><path d="M120 70l40 70H80z" fill="#7c3aed" class="d1" filter="url(#glow-intense-l)"></path></svg>
diff --git a/client/public/badges/light/dog.svg b/client/public/badges/light/dog.svg
new file mode 100644
index 0000000..9472ff7
--- /dev/null
+++ b/client/public/badges/light/dog.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}</style><g class="zdg1" stroke="#ec4899" fill="none" stroke-width="6" filter="url(#glow-intense-l)"><path d="M60 40 L40 40 L40 60"></path><path d="M180 40 L200 40 L200 60"></path><path d="M60 200 L40 200 L40 180"></path><path d="M180 200 L200 200 L200 180"></path></g><g filter="url(#glow-intense-l)"><polygon points="120,60 180,90 160,180 120,200 80,180 60,90" fill="url(#bg-z-earth-l)" stroke="#a855f7" stroke-width="4"></polygon><polygon points="100,120 140,120 120,150" fill="#ec4899"></polygon><circle cx="120" cy="120" r="30" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="100" class="zdg2"></circle></g></svg>
diff --git a/client/public/badges/light/dragon.svg b/client/public/badges/light/dragon.svg
new file mode 100644
index 0000000..f2e934b
--- /dev/null
+++ b/client/public/badges/light/dragon.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}</style><g stroke="#ec4899" fill="none" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="105" stroke-width="4" stroke-dasharray="40 20" class="zd1"></circle><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="10 10" class="zd2" transform="rotate(45 120 120)"></circle></g><path d="M40 160 Q80 80 120 120 T200 80 L180 140 Q120 200 80 160 Z" fill="url(#bg-z-earth-l)" stroke="#a855f7" stroke-width="4" filter="url(#glow-neon-l)"></path><circle cx="120" cy="120" r="20" fill="#ec4899" filter="url(#glow-intense-l)" class="zd2"></circle></svg>
diff --git a/client/public/badges/light/dynamo.svg b/client/public/badges/light/dynamo.svg
new file mode 100644
index 0000000..7457980
--- /dev/null
+++ b/client/public/badges/light/dynamo.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#a16207" stroke-width="4" stroke-dasharray="10 20" filter="url(#glow-neon-l)"></circle><g fill="none" stroke="#ca8a04" stroke-width="8" filter="url(#glow-intense-l)"><line x1="120" y1="20" x2="120" y2="220" class="r2"></line><line x1="20" y1="120" x2="220" y2="120" class="r1"></line></g><circle cx="120" cy="120" r="50" fill="url(#bg-reactor-l)" stroke="#ca8a04" stroke-width="6" filter="url(#glow-intense-l)"></circle><rect x="105" y="105" width="30" height="30" fill="#fff" filter="url(#glow-intense-l)"></rect></svg>
diff --git a/client/public/badges/light/earth.svg b/client/public/badges/light/earth.svg
new file mode 100644
index 0000000..4f38d8f
--- /dev/null
+++ b/client/public/badges/light/earth.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}</style><g class="e1" stroke="#00aaff" fill="none"><circle cx="120" cy="120" r="110" stroke-width="1" stroke-dasharray="4 8" opacity=".6"></circle><circle cx="120" cy="10" r="6" fill="#00aaff" filter="url(#glow-intense-l)"></circle></g><g class="e2" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="75" fill="url(#bg-supreme-l)" stroke="#0055ff" stroke-width="4"></circle><ellipse cx="120" cy="120" rx="75" ry="25" fill="none" stroke="#0055ff" stroke-width="2" opacity=".7"></ellipse><ellipse cx="120" cy="120" rx="25" ry="75" fill="none" stroke="#0055ff" stroke-width="2" opacity=".7"></ellipse></g><circle cx="120" cy="120" r="12" fill="#00aaff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/elite.svg b/client/public/badges/light/elite.svg
new file mode 100644
index 0000000..97d39b6
--- /dev/null
+++ b/client/public/badges/light/elite.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}</style><g class="e1" stroke="#ff0044" fill="none"><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="10 20 40 10" filter="url(#glow-neon-l)"></circle><path d="M120 5v20M120 215v20M5 120h20M215 120h20" stroke-width="4"></path></g><g class="e2" stroke="#d90036" fill="none" opacity=".8"><circle cx="120" cy="120" r="90" stroke-width="3" stroke-dasharray="30 60" filter="url(#glow-intense-l)"></circle></g><g class="e3"><polygon points="120,40 180,85 180,155 120,200 60,155 60,85" fill="url(#bg-supreme-l)" stroke="#ff0044" stroke-width="4" filter="url(#glow-neon-l)"></polygon><polygon points="120,55 165,90 165,140 120,175 75,140 75,90" fill="none" stroke="#ff0044" stroke-width="2" opacity=".6"></polygon><circle cx="120" cy="120" r="20" fill="none" stroke="#ff0044" stroke-width="3" stroke-dasharray="5 5"></circle><circle cx="120" cy="120" r="8" fill="#ff0044" filter="url(#glow-intense-l)"></circle></g></svg>
diff --git a/client/public/badges/light/enigma.svg b/client/public/badges/light/enigma.svg
new file mode 100644
index 0000000..f28d58a
--- /dev/null
+++ b/client/public/badges/light/enigma.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}</style><g fill="none" stroke="#4338ca" stroke-width="6" stroke-linecap="round" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="100" stroke-dasharray="50 30 10 40" class="a1"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="30 50 80 20" class="a2"></circle><circle cx="120" cy="120" r="60" stroke-dasharray="20 40 10 50" class="a3"></circle></g><circle cx="120" cy="120" r="40" fill="url(#bg-arcane-l)" stroke="#4f46e5" stroke-width="4" filter="url(#glow-neon-l)"></circle><path d="M120 90q30 30 0 60q-30-30 0-60" fill="#4f46e5" opacity=".8" class="a1" filter="url(#glow-intense-l)"></path><circle cx="120" cy="120" r="10" fill="#fff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/fission.svg b/client/public/badges/light/fission.svg
new file mode 100644
index 0000000..75e491c
--- /dev/null
+++ b/client/public/badges/light/fission.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#15803d" stroke-width="2" stroke-dasharray="10 10" class="r3" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="65" fill="url(#bg-reactor-l)" stroke="#15803d" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="30" fill="#16a34a" class="r1" style="mix-blend-mode:screen" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="30" fill="#16a34a" class="r2" style="mix-blend-mode:screen" filter="url(#glow-intense-l)"></circle><line x1="120" y1="60" x2="120" y2="180" stroke="#fff" stroke-width="4" opacity=".8" filter="url(#glow-intense-l)"></line></svg>
diff --git a/client/public/badges/light/fortress.svg b/client/public/badges/light/fortress.svg
new file mode 100644
index 0000000..369f406
--- /dev/null
+++ b/client/public/badges/light/fortress.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}</style><g class="f1" stroke="#4338ca" fill="none" stroke-width="4" filter="url(#glow-neon-l)"><polygon points="120,10 230,120 120,230 10,120" stroke-dasharray="60 40"></polygon><rect x="20" y="20" width="200" height="200" stroke-width="2" opacity=".3"></rect></g><polygon points="120,35 205,120 120,205 35,120" fill="url(#bg-aegis-l)" stroke="#4f46e5" stroke-width="2"></polygon><g class="f2" stroke="#4f46e5" fill="none" stroke-width="6" filter="url(#glow-intense-l)"><polygon points="120,60 180,120 120,180 60,120"></polygon><line x1="120" y1="60" x2="120" y2="180"></line><line x1="60" y1="120" x2="180" y2="120"></line></g><rect x="100" y="100" width="40" height="40" fill="#4f46e5" transform="rotate(45 120 120)" filter="url(#glow-intense-l)"></rect></svg>
diff --git a/client/public/badges/light/fusion.svg b/client/public/badges/light/fusion.svg
new file mode 100644
index 0000000..73ee2f6
--- /dev/null
+++ b/client/public/badges/light/fusion.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#15803d" stroke-width="15" opacity=".3"></circle><circle cx="120" cy="120" r="100" fill="none" stroke="#16a34a" stroke-width="6" class="r1" stroke-linecap="round" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="70" fill="url(#bg-reactor-l)" stroke="#16a34a" stroke-width="3" filter="url(#glow-neon-l)"></circle><g class="r2" filter="url(#glow-intense-l)"><path d="M120 70q30 50 0 100q-30-50 0-100" fill="#16a34a" opacity=".8"></path><path d="M70 120q50 30 100 0q-50-30-100 0" fill="#16a34a" opacity=".8"></path><circle cx="120" cy="120" r="20" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/light/galaxy.svg b/client/public/badges/light/galaxy.svg
new file mode 100644
index 0000000..95c55c5
--- /dev/null
+++ b/client/public/badges/light/galaxy.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}</style><g class="g1" fill="none" filter="url(#glow-intense-l)"><path d="M120 120q60-20 90 40M120 120q20 60-40 90M120 120q-60 20-90-40M120 120q-20-60 40-90" stroke="#d97706" stroke-width="4" stroke-linecap="round" stroke-dasharray="10 10"></path><path d="M120 120q20 60-40 90" stroke="#2563eb" stroke-width="4" stroke-linecap="round" stroke-dasharray="5 15"></path><path d="M120 120q-20-60 40-90" stroke="#2563eb" stroke-width="4" stroke-linecap="round" stroke-dasharray="5 15"></path></g><circle cx="120" cy="120" r="40" fill="url(#bg-supreme-l)" stroke="#d97706" stroke-width="3" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="15" fill="#d97706" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/gemini.svg b/client/public/badges/light/gemini.svg
new file mode 100644
index 0000000..01ecd9e
--- /dev/null
+++ b/client/public/badges/light/gemini.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#8b5cf6" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px;animation:art 4s linear infinite"><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(45 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(-45 120 120)"></ellipse></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-air-l)" opacity="0.9" stroke="#0ea5e9" stroke-width="2"></circle><line key="l0" x1="90" y1="60" x2="90" y2="180" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l1" x1="150" y1="60" x2="150" y2="180" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l2" x1="90" y1="120" x2="150" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><g key="n0"><circle cx="90" cy="60" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0s"></circle><circle cx="90" cy="60" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="90" cy="180" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.2s"></circle><circle cx="90" cy="180" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="150" cy="60" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.4s"></circle><circle cx="150" cy="60" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="150" cy="180" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0.6000000000000001s"></circle><circle cx="150" cy="180" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="90" cy="120" r="4" fill="#8b5cf6" class="node-air" style="animation-delay:0.8s"></circle><circle cx="90" cy="120" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="150" cy="120" r="4" fill="#8b5cf6" class="node-air" style="animation-delay:1s"></circle><circle cx="150" cy="120" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/genesis.svg b/client/public/badges/light/genesis.svg
new file mode 100644
index 0000000..d9325ff
--- /dev/null
+++ b/client/public/badges/light/genesis.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}</style><g class="g1" stroke="#334155" fill="none" opacity=".6" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="110" stroke-width="2" stroke-dasharray="10 30"></circle><polygon points="120,10 215.2,65 215.2,175 120,230 24.8,175 24.8,65" stroke-width="1"></polygon></g><g class="g2" stroke="#ca8a04" fill="none" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="85" stroke-width="3" stroke-dasharray="100 50"></circle><polygon points="120,35 193.6,77.5 193.6,162.5 120,205 46.4,162.5 46.4,77.5" stroke-width="2"></polygon></g><circle cx="120" cy="120" r="50" fill="url(#bg-platinum-l)" stroke="#334155" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="100" r="15" fill="none" stroke="#ca8a04" stroke-width="2" filter="url(#glow-intense-l)"></circle><circle cx="103" cy="130" r="15" fill="none" stroke="#ca8a04" stroke-width="2" filter="url(#glow-intense-l)"></circle><circle cx="137" cy="130" r="15" fill="none" stroke="#ca8a04" stroke-width="2" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="8" fill="#334155" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/glyph.svg b/client/public/badges/light/glyph.svg
new file mode 100644
index 0000000..997e2bd
--- /dev/null
+++ b/client/public/badges/light/glyph.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}</style><g stroke="#115e59" fill="none" filter="url(#glow-neon-l)"><rect x="20" y="20" width="200" height="200" stroke-width="2" stroke-dasharray="20 40" class="a1"></rect><rect x="40" y="40" width="160" height="160" stroke-width="4" opacity=".5"></rect><circle cx="120" cy="120" r="90" stroke-width="1"></circle></g><rect x="65" y="65" width="110" height="110" fill="url(#bg-arcane-l)" stroke="#0f766e" stroke-width="6" class="a1" style="animation-direction:reverse" filter="url(#glow-intense-l)"></rect><g class="a2" fill="#0f766e" filter="url(#glow-intense-l)"><path d="M120 85l35 35-35 35-35-35z"></path><circle cx="120" cy="120" r="10" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/light/goat.svg b/client/public/badges/light/goat.svg
new file mode 100644
index 0000000..12a185d
--- /dev/null
+++ b/client/public/badges/light/goat.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#a855f7" class="zg2" filter="url(#glow-intense-l)"></circle><g class="zg1" filter="url(#glow-intense-l)"><path d="M60 100 A60 60 0 0 1 180 100 L120 200 Z" fill="url(#bg-z-earth-l)" stroke="#a855f7" stroke-width="4"></path><path d="M60 100 Q40 40 80 40 Q100 40 100 80" fill="none" stroke="#ec4899" stroke-width="8" stroke-linecap="round"></path><path d="M180 100 Q200 40 160 40 Q140 40 140 80" fill="none" stroke="#ec4899" stroke-width="8" stroke-linecap="round"></path><circle cx="120" cy="140" r="15" fill="#ec4899"></circle></g></svg>
diff --git a/client/public/badges/light/guardian.svg b/client/public/badges/light/guardian.svg
new file mode 100644
index 0000000..811a92c
--- /dev/null
+++ b/client/public/badges/light/guardian.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#6d28d9" stroke-width="2" filter="url(#glow-neon-l)"></circle><g class="g1" stroke="#7c3aed" fill="none" stroke-width="8" filter="url(#glow-intense-l)"><path d="M120 15a105 105 0 01105 105M120 225A105 105 0 0115 120"></path></g><g class="g2" stroke="#6d28d9" fill="none" stroke-width="12" filter="url(#glow-neon-l)"><path d="M205 120a85 85 0 01-85 85M35 120a85 85 0 0185-85"></path></g><circle cx="120" cy="120" r="65" fill="url(#bg-aegis-l)" stroke="#7c3aed" stroke-width="4" filter="url(#glow-neon-l)"></circle><polygon points="120,65 167,147.5 73,147.5" fill="#7c3aed" class="g3" filter="url(#glow-intense-l)"></polygon><polygon points="120,175 73,92.5 167,92.5" fill="#7c3aed" class="g3" style="animation-delay:1s" filter="url(#glow-intense-l)"></polygon></svg>
diff --git a/client/public/badges/light/horse.svg b/client/public/badges/light/horse.svg
new file mode 100644
index 0000000..a5bb4af
--- /dev/null
+++ b/client/public/badges/light/horse.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}</style><g stroke="#f97316" fill="none" stroke-width="4" class="zh2" filter="url(#glow-intense-l)"><line x1="-50" y1="40" x2="290" y2="40" opacity="0.3"></line><line x1="-50" y1="200" x2="290" y2="200" opacity="0.3"></line><line x1="-50" y1="120" x2="290" y2="120" stroke-width="1"></line></g><g class="zh1" filter="url(#glow-intense-l)"><polygon points="60,180 100,60 180,60 140,180" fill="url(#bg-z-fire-l)" stroke="#f43f5e" stroke-width="6"></polygon><path d="M100 60 L140 20 L180 60" fill="none" stroke="#f97316" stroke-width="6" stroke-linecap="round"></path><line x1="120" y1="60" x2="100" y2="180" stroke="#f43f5e" stroke-width="4"></line></g></svg>
diff --git a/client/public/badges/light/ignition.svg b/client/public/badges/light/ignition.svg
new file mode 100644
index 0000000..334d575
--- /dev/null
+++ b/client/public/badges/light/ignition.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}</style><g class="r1" stroke="#c2410c" fill="none" filter="url(#glow-intense-l)"><path d="M20 120l60-20 20-80 40 200 20-80 60-20" stroke-width="6" stroke-linejoin="miter"></path><path d="M40 160l60 20 20 40V20l20 40 60 20" stroke-width="3" opacity=".5"></path></g><circle cx="120" cy="120" r="40" fill="url(#bg-reactor-l)" stroke="#9a3412" stroke-width="6" class="r2" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="20" fill="#fff" class="r1" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/intercept.svg b/client/public/badges/light/intercept.svg
new file mode 100644
index 0000000..f48d3a9
--- /dev/null
+++ b/client/public/badges/light/intercept.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}</style><polygon points="120,20 206,170 34,170" fill="none" stroke="#be123c" stroke-width="2" class="t2" filter="url(#glow-neon-l)"></polygon><circle cx="120" cy="120" r="50" fill="url(#bg-tactical-l)" stroke="#e11d48" stroke-width="4" filter="url(#glow-neon-l)"></circle><g stroke="#e11d48" stroke-width="6" stroke-linecap="round" stroke-dasharray="100" class="t1" filter="url(#glow-intense-l)"><path d="M120 20v80M206 170l-71-40M34 170l71-40"></path></g><circle cx="120" cy="120" r="15" fill="#e11d48" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/jupiter.svg b/client/public/badges/light/jupiter.svg
new file mode 100644
index 0000000..dece832
--- /dev/null
+++ b/client/public/badges/light/jupiter.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}</style><g class="j1" stroke="#d35400" fill="none" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="105" stroke-width="4" stroke-dasharray="10 30"></circle></g><circle cx="120" cy="120" r="75" fill="url(#bg-gold-l)" stroke="#a04000" stroke-width="3" filter="url(#glow-neon-l)"></circle><g class="j2" stroke="#873600" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray="30 20" filter="url(#glow-neon-l)"><path d="M50 90q70 20 140 0M45 120q75 20 150 0" stroke-width="12" stroke="#d35400"></path><path d="M50 150q70 20 140 0"></path></g><ellipse cx="150" cy="135" rx="15" ry="8" fill="#6e2c00" filter="url(#glow-intense-l)"></ellipse></svg>
diff --git a/client/public/badges/light/leo.svg b/client/public/badges/light/leo.svg
new file mode 100644
index 0000000..7a02ecc
--- /dev/null
+++ b/client/public/badges/light/leo.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#f59e0b" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px;animation:f-flow 2s linear infinite"><circle cx="120" cy="120" r="100" stroke-dasharray="10 40" stroke-width="4"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="40 10" stroke-width="2"></circle></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-fire-l)" opacity="0.9" stroke="#ef4444" stroke-width="2"></circle><line key="l0" x1="140" y1="60" x2="100" y2="80" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l1" x1="100" y1="80" x2="90" y2="120" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l2" x1="90" y1="120" x2="110" y2="160" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l3" x1="110" y1="160" x2="160" y2="160" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><g key="n0"><circle cx="140" cy="60" r="6" fill="#f59e0b" class="node-fire" style="animation-delay:0s"></circle><circle cx="140" cy="60" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="100" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.2s"></circle><circle cx="100" cy="80" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="90" cy="120" r="10" fill="#f59e0b" class="node-fire" style="animation-delay:0.4s"></circle><circle cx="90" cy="120" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="110" cy="160" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.6000000000000001s"></circle><circle cx="110" cy="160" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="160" cy="160" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.8s"></circle><circle cx="160" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/libra.svg b/client/public/badges/light/libra.svg
new file mode 100644
index 0000000..7a2dc0a
--- /dev/null
+++ b/client/public/badges/light/libra.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#8b5cf6" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px;animation:art 4s linear infinite"><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(45 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="20" stroke-width="2" transform="rotate(-45 120 120)"></ellipse></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-air-l)" opacity="0.9" stroke="#0ea5e9" stroke-width="2"></circle><line key="l0" x1="120" y1="70" x2="80" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l1" x1="120" y1="70" x2="160" y2="120" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l2" x1="80" y1="120" x2="120" y2="170" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><line key="l3" x1="160" y1="120" x2="120" y2="170" stroke="#0ea5e9" stroke-width="4" class="line-air" opacity="0.8"></line><g key="n0"><circle cx="120" cy="70" r="8" fill="#8b5cf6" class="node-air" style="animation-delay:0s"></circle><circle cx="120" cy="70" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="80" cy="120" r="6" fill="#8b5cf6" class="node-air" style="animation-delay:0.2s"></circle><circle cx="80" cy="120" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="160" cy="120" r="6" fill="#8b5cf6" class="node-air" style="animation-delay:0.4s"></circle><circle cx="160" cy="120" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="120" cy="170" r="10" fill="#8b5cf6" class="node-air" style="animation-delay:0.6000000000000001s"></circle><circle cx="120" cy="170" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/lockon.svg b/client/public/badges/light/lockon.svg
new file mode 100644
index 0000000..9b77107
--- /dev/null
+++ b/client/public/badges/light/lockon.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#9a3412" stroke-width="4" stroke-dasharray="10 20" filter="url(#glow-neon-l)"></circle><g class="t1" fill="none" stroke="#c2410c" filter="url(#glow-intense-l)"><rect x="60" y="60" width="120" height="120" rx="10"></rect><polygon points="120,80 160,120 120,160 80,120" class="t2" fill="#c2410c"></polygon></g><circle cx="120" cy="120" r="10" fill="#c2410c" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/matrix.svg b/client/public/badges/light/matrix.svg
new file mode 100644
index 0000000..7e47fdf
--- /dev/null
+++ b/client/public/badges/light/matrix.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}</style><g class="m1" stroke="#15803d" fill="none" stroke-width="2"><rect x="20" y="20" width="200" height="200" opacity=".3"></rect><rect x="40" y="40" width="160" height="160" opacity=".5" transform="rotate(45 120 120)"></rect><circle cx="120" cy="120" r="100" stroke-dasharray="5 15" filter="url(#glow-neon-l)"></circle></g><rect x="60" y="60" width="120" height="120" fill="url(#bg-matrix-l)" stroke="#16a34a" stroke-width="4" filter="url(#glow-neon-l)" rx="10"></rect><g stroke="#16a34a" fill="none" stroke-width="4" class="m2" filter="url(#glow-intense-l)"><line x1="80" y1="60" x2="80" y2="180"></line><line x1="120" y1="60" x2="120" y2="180" style="animation-delay:.5s"></line><line x1="160" y1="60" x2="160" y2="180" style="animation-delay:1s"></line></g><rect x="100" y="100" width="40" height="40" fill="#16a34a" filter="url(#glow-intense-l)" rx="5"></rect></svg>
diff --git a/client/public/badges/light/mercury.svg b/client/public/badges/light/mercury.svg
new file mode 100644
index 0000000..9ff324b
--- /dev/null
+++ b/client/public/badges/light/mercury.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}</style><g stroke="#94a3b8" fill="none" filter="url(#glow-intense-l)"><ellipse class="m1" cx="120" cy="120" rx="100" ry="20" stroke-width="2" stroke-dasharray="40 100" transform="rotate(45 120 120)"></ellipse><ellipse class="m2" cx="120" cy="120" rx="110" ry="15" stroke-width="3" stroke-dasharray="60 150" transform="rotate(-30 120 120)"></ellipse></g><circle cx="120" cy="120" r="50" fill="url(#bg-platinum-l)" stroke="#64748b" stroke-width="3" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="25" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4 8" class="m1"></circle></svg>
diff --git a/client/public/badges/light/monkey.svg b/client/public/badges/light/monkey.svg
new file mode 100644
index 0000000..234dcc7
--- /dev/null
+++ b/client/public/badges/light/monkey.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#eab308" stroke-width="4" stroke-dasharray="20 40" class="zm2" filter="url(#glow-neon-l)"></circle><g class="zm1" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="60" fill="url(#bg-z-metal-l)" stroke="#f59e0b" stroke-width="4"></circle><circle cx="90" cy="100" r="25" fill="none" stroke="#eab308" stroke-width="6"></circle><circle cx="150" cy="100" r="25" fill="none" stroke="#eab308" stroke-width="6"></circle><path d="M100 150 Q120 170 140 150" fill="none" stroke="#f59e0b" stroke-width="6" stroke-linecap="round"></path></g></svg>
diff --git a/client/public/badges/light/moon.svg b/client/public/badges/light/moon.svg
new file mode 100644
index 0000000..59e96bf
--- /dev/null
+++ b/client/public/badges/light/moon.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}</style><g class="m1" stroke="#64748b" fill="none"><circle cx="120" cy="120" r="105" stroke-width="1" stroke-dasharray="2 8" opacity=".6"></circle></g><circle cx="120" cy="120" r="75" fill="url(#bg-moon-l)" stroke="#475569" stroke-width="3" filter="url(#glow-neon-l)"></circle><g fill="none" stroke="#475569" stroke-width="2" opacity="0.8"><circle cx="100" cy="90" r="12"></circle><circle cx="145" cy="140" r="18"></circle><circle cx="95" cy="145" r="8"></circle></g><circle cx="120" cy="120" r="20" fill="none" stroke="#64748b" stroke-width="2" stroke-dasharray="4 4"></circle><circle cx="120" cy="120" r="8" fill="#64748b" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/mystic.svg b/client/public/badges/light/mystic.svg
new file mode 100644
index 0000000..1f6d1c6
--- /dev/null
+++ b/client/public/badges/light/mystic.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#be185d" stroke-width="2" filter="url(#glow-neon-l)"></circle><g class="a1" stroke="#db2777" stroke-width="4" fill="none" filter="url(#glow-intense-l)"><polygon points="120,20 206.6,170 33.4,170" class="a2" fill="#db2777"></polygon><polygon points="120,220 33.4,70 206.6,70" class="a2" fill="#db2777" style="animation-delay:.2s"></polygon></g><circle cx="120" cy="120" r="40" fill="url(#bg-arcane-l)" stroke="#db2777" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="15" fill="#db2777" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/nebula.svg b/client/public/badges/light/nebula.svg
new file mode 100644
index 0000000..a4856b7
--- /dev/null
+++ b/client/public/badges/light/nebula.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}</style><g class="n1" filter="url(#glow-intense-l)" opacity=".6"><circle cx="100" cy="100" r="50" fill="#c026d3"></circle><circle cx="140" cy="140" r="60" fill="#0891b2"></circle><circle cx="150" cy="90" r="45" fill="#c026d3"></circle><circle cx="90" cy="150" r="55" fill="#0891b2"></circle></g><circle cx="120" cy="120" r="55" fill="url(#bg-nebula-l)" stroke="none" filter="url(#glow-neon-l)" opacity=".9"></circle><path d="M120 100v40M100 120h40" stroke="#fff" stroke-width="2" class="n2" filter="url(#glow-intense-l)"></path></svg>
diff --git a/client/public/badges/light/neptune.svg b/client/public/badges/light/neptune.svg
new file mode 100644
index 0000000..049eacb
--- /dev/null
+++ b/client/public/badges/light/neptune.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}</style><g class="n1" stroke="#0033ee" fill="none" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="100" stroke-width="4" stroke-dasharray="60 40"></circle></g><circle cx="120" cy="120" r="70" fill="url(#bg-ice-l)" stroke="#0055ff" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="45" fill="none" stroke="#0088ff" class="n2" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="8" fill="#0088ff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/nexus.svg b/client/public/badges/light/nexus.svg
new file mode 100644
index 0000000..d8e9ccc
--- /dev/null
+++ b/client/public/badges/light/nexus.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}</style><g class="n2" stroke="#7e22ce" fill="none" stroke-width="2" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="105" stroke-dasharray="5 15"></circle><path d="M120 15v35M120 190v35M15 120h35M190 120h35" stroke-width="4" stroke="#0284c7" filter="url(#glow-intense-l)"></path></g><g class="n1" stroke="#0284c7" stroke-width="3" fill="none" filter="url(#glow-intense-l)"><line x1="60" y1="60" x2="100" y2="100"></line><line x1="180" y1="60" x2="140" y2="100"></line><line x1="60" y1="180" x2="100" y2="140"></line><line x1="180" y1="180" x2="140" y2="140"></line></g><polygon points="120,50 170,120 120,190 70,120" fill="url(#bg-supreme-l)" stroke="#7e22ce" stroke-width="4" filter="url(#glow-neon-l)"></polygon><circle cx="120" cy="120" r="25" fill="#0284c7" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="10" fill="#fff"></circle></svg>
diff --git a/client/public/badges/light/omega.svg b/client/public/badges/light/omega.svg
new file mode 100644
index 0000000..482a8f1
--- /dev/null
+++ b/client/public/badges/light/omega.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}</style><g class="o2" stroke="#dc2626" fill="none"><circle cx="120" cy="120" r="105" stroke-width="2" stroke-dasharray="5 20 50 20" filter="url(#glow-neon-l)"></circle><polygon points="120,10 135,40 105,40" fill="#dc2626"></polygon><polygon points="120,230 105,200 135,200" fill="#dc2626"></polygon></g><circle cx="120" cy="120" r="85" fill="url(#bg-omega-l)" stroke="#991b1b" stroke-width="6" stroke-dasharray="40 10" class="o2" style="animation-direction:reverse;animation-duration:20s" filter="url(#glow-intense-l)"></circle><g class="o1"><path d="M70 160c-20 0-10-60 30-60s40 0 40 20 50 60 30 60-30-20-30-20H100c0 0-10 20-30 20z" fill="#dc2626" filter="url(#glow-intense-l)"></path><circle cx="120" cy="120" r="15" fill="#fff" filter="url(#glow-intense-l)"></circle></g></svg>
diff --git a/client/public/badges/light/oracle.svg b/client/public/badges/light/oracle.svg
new file mode 100644
index 0000000..1a929d6
--- /dev/null
+++ b/client/public/badges/light/oracle.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#7e22ce" stroke-width="4" stroke-dasharray="1 12" class="a2" filter="url(#glow-neon-l)"></circle><g class="a1" stroke="#9333ea" fill="none" stroke-width="3" filter="url(#glow-intense-l)"><rect x="65" y="65" width="110" height="110"></rect><rect x="65" y="65" width="110" height="110" transform="rotate(45 120 120)"></rect><circle cx="120" cy="120" r="77" opacity=".5"></circle></g><circle cx="120" cy="120" r="30" fill="url(#bg-arcane-l)" stroke="#9333ea" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="10" fill="#fff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/overload.svg b/client/public/badges/light/overload.svg
new file mode 100644
index 0000000..d75d239
--- /dev/null
+++ b/client/public/badges/light/overload.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}</style><circle cx="120" cy="120" r="95" fill="none" stroke="#4d7c0f" stroke-dasharray="15 35 50 10 5 40" class="r1" filter="url(#glow-intense-l)"></circle><polygon points="120,40 189,80 189,160 120,200 51,160 51,80" fill="url(#bg-reactor-l)" stroke="#65a30d" stroke-width="4" filter="url(#glow-neon-l)"></polygon><path d="M120 70l30 80H90z" fill="#65a30d" class="r2" filter="url(#glow-intense-l)"></path><circle cx="120" cy="120" r="10" fill="#fff" class="r1"></circle></svg>
diff --git a/client/public/badges/light/overwatch.svg b/client/public/badges/light/overwatch.svg
new file mode 100644
index 0000000..99f2e91
--- /dev/null
+++ b/client/public/badges/light/overwatch.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}</style><path d="M40 120a80 80 0 01160 0" stroke="#15803d" fill="none" stroke-width="6" stroke-dasharray="20 20" filter="url(#glow-neon-l)"></path><circle cx="120" cy="120" r="60" fill="url(#bg-tactical-l)" stroke="#16a34a" stroke-width="4" filter="url(#glow-neon-l)"></circle><g class="t1" fill="none" filter="url(#glow-intense-l)"><path d="M120 120L60 40a100 100 0 01120 0z" fill="#16a34a" opacity=".3"></path><path d="M120 120L60 40M120 120l60-80" stroke="#16a34a" stroke-width="3"></path></g><circle cx="120" cy="120" fill="none" stroke="#16a34a" stroke-width="2" class="t2" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="10" fill="#16a34a"></circle></svg>
diff --git a/client/public/badges/light/ox.svg b/client/public/badges/light/ox.svg
new file mode 100644
index 0000000..e186d81
--- /dev/null
+++ b/client/public/badges/light/ox.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}</style><rect x="20" y="20" width="200" height="200" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="10 20" filter="url(#glow-neon-l)"></rect><g class="zo1" filter="url(#glow-intense-l)"><path d="M50 60 Q120 120 190 60 L160 180 L80 180 Z" fill="url(#bg-z-earth-l)" stroke="#a855f7" stroke-width="6"></path><path d="M50 60 Q80 20 120 60 Q160 20 190 60" fill="none" stroke="#ec4899" stroke-width="6" stroke-linecap="round"></path><rect x="100" y="100" width="40" height="40" fill="#ec4899" rx="5"></rect></g><line x1="120" y1="140" x2="120" y2="220" stroke="#a855f7" class="zo2" filter="url(#glow-intense-l)"></line></svg>
diff --git a/client/public/badges/light/paladin.svg b/client/public/badges/light/paladin.svg
new file mode 100644
index 0000000..a85b0db
--- /dev/null
+++ b/client/public/badges/light/paladin.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#115e59" stroke-width="2" stroke-dasharray="4 8" filter="url(#glow-neon-l)"></circle><g class="p2" stroke="#115e59" fill="none" stroke-width="12" filter="url(#glow-neon-l)"><path d="M120 20a100 100 0 01100 100M120 220a100 100 0 01-100-100" stroke-dasharray="20 40"></path></g><polygon points="120,40 180,70 180,150 120,200 60,150 60,70" fill="url(#bg-aegis-l)" stroke="#0f766e" stroke-width="4" filter="url(#glow-neon-l)"></polygon><g class="p1" fill="#0f766e" filter="url(#glow-intense-l)"><polygon points="120,60 140,110 120,170 100,110"></polygon><polygon points="70,120 110,105 170,120 110,135"></polygon></g></svg>
diff --git a/client/public/badges/light/paradox.svg b/client/public/badges/light/paradox.svg
new file mode 100644
index 0000000..5812165
--- /dev/null
+++ b/client/public/badges/light/paradox.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}</style><g class="a1" stroke="#115e59" fill="none" stroke-width="4" filter="url(#glow-neon-l)"><rect x="40" y="40" width="160" height="160"></rect><rect x="55" y="55" width="130" height="130" transform="rotate(45 120 120)"></rect><rect x="70" y="70" width="100" height="100" transform="rotate(15 120 120)"></rect></g><circle cx="120" cy="120" r="50" fill="url(#bg-arcane-l)" stroke="#0f766e" stroke-width="4" filter="url(#glow-neon-l)"></circle><g class="a2" fill="none" stroke="#0f766e" filter="url(#glow-intense-l)"><polygon points="120,80 148,140 92,140"></polygon><polygon points="120,160 92,100 148,100"></polygon></g><circle cx="120" cy="120" r="8" fill="#0f766e" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/phalanx.svg b/client/public/badges/light/phalanx.svg
new file mode 100644
index 0000000..652fe4b
--- /dev/null
+++ b/client/public/badges/light/phalanx.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}</style><g class="p1" filter="url(#glow-neon-l)"><rect x="30" y="30" width="180" height="180" fill="none" stroke="#115e59" stroke-width="2" stroke-dasharray="30 60"></rect><rect x="45" y="45" width="150" height="150" fill="none" stroke="#0f766e" stroke-width="4"></rect><rect x="60" y="60" width="120" height="120" fill="url(#bg-aegis-l)" stroke="#0f766e" stroke-width="2"></rect><g class="p2" fill="none" stroke="#0f766e" filter="url(#glow-intense-l)"><rect x="80" y="80" width="80" height="80"></rect><line x1="120" y1="80" x2="120" y2="160"></line><line x1="80" y1="120" x2="160" y2="120"></line></g><circle cx="120" cy="120" r="15" fill="#0f766e" filter="url(#glow-intense-l)"></circle></g></svg>
diff --git a/client/public/badges/light/pig.svg b/client/public/badges/light/pig.svg
new file mode 100644
index 0000000..40ba238
--- /dev/null
+++ b/client/public/badges/light/pig.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}</style><circle cx="120" cy="120" fill="none" stroke="#3b82f6" class="zpg1" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" fill="none" stroke="#3b82f6" class="zpg1" style="animation-delay:1s" filter="url(#glow-intense-l)"></circle><g class="zpg2" transform-origin="120 120" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="70" fill="url(#bg-z-water-l)" stroke="#06b6d4" stroke-width="6"></circle><ellipse cx="120" cy="120" rx="40" ry="25" fill="none" stroke="#3b82f6" stroke-width="6"></ellipse><circle cx="100" cy="120" r="8" fill="#3b82f6"></circle><circle cx="140" cy="120" r="8" fill="#3b82f6"></circle></g></svg>
diff --git a/client/public/badges/light/pisces.svg b/client/public/badges/light/pisces.svg
new file mode 100644
index 0000000..f75290b
--- /dev/null
+++ b/client/public/badges/light/pisces.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#3b82f6" fill="none" filter="url(#glow-neon-l)" opacity="0.5" style="transform-origin:120px 120px"><circle cx="120" cy="120" class="node-water-ripple"></circle><circle cx="120" cy="120" class="node-water-ripple" style="animation-delay:1s"></circle><g style="animation:art 15s linear infinite"><circle cx="120" cy="120" r="90" stroke-dasharray="20 40" stroke-width="2"></circle><circle cx="120" cy="120" r="70" stroke-dasharray="10 30" stroke-width="1"></circle></g></g><g class="wrap-water" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-water-l)" opacity="0.9" stroke="#8b5cf6" stroke-width="2"></circle><line key="l0" x1="80" y1="100" x2="100" y2="150" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l1" x1="100" y1="150" x2="140" y2="150" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l2" x1="140" y1="150" x2="160" y2="100" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l3" x1="80" y1="100" x2="70" y2="110" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l4" x1="160" y1="100" x2="170" y2="110" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><g key="n0"><circle cx="80" cy="100" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0s"></circle><circle cx="80" cy="100" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="100" cy="150" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.2s"></circle><circle cx="100" cy="150" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="140" cy="150" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.4s"></circle><circle cx="140" cy="150" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="160" cy="100" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.6000000000000001s"></circle><circle cx="160" cy="100" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="70" cy="110" r="4" fill="#3b82f6" class="node-water" style="animation-delay:0.8s"></circle><circle cx="70" cy="110" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="170" cy="110" r="4" fill="#3b82f6" class="node-water" style="animation-delay:1s"></circle><circle cx="170" cy="110" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/plasma.svg b/client/public/badges/light/plasma.svg
new file mode 100644
index 0000000..c9e67db
--- /dev/null
+++ b/client/public/badges/light/plasma.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#4d7c0f" stroke-width="2" stroke-dasharray="4 8" filter="url(#glow-neon-l)"></circle><g stroke="#65a30d" fill="none" stroke-width="6" stroke-linecap="round" filter="url(#glow-intense-l)"><path class="r1" d="M20 120q50-100 100 0t100 0"></path><path class="r2" d="M20 120q50 100 100 0t100 0"></path></g><circle cx="120" cy="120" r="50" fill="url(#bg-reactor-l)" stroke="#65a30d" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="25" fill="#65a30d" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/pluto.svg b/client/public/badges/light/pluto.svg
new file mode 100644
index 0000000..1ac80f3
--- /dev/null
+++ b/client/public/badges/light/pluto.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}</style><g class="p1" stroke="#8b9bb4" fill="none"><ellipse cx="120" cy="120" rx="100" ry="60" stroke-width="1" stroke-dasharray="4 6" opacity=".6" transform="rotate(30 120 120)"></ellipse><circle cx="215" cy="175" r="5" fill="#8b9bb4" filter="url(#glow-intense-l)"></circle></g><polygon points="120,60 170,90 170,150 120,180 70,150 70,90" fill="url(#bg-supreme-l)" stroke="#6c7a9c" stroke-width="3" filter="url(#glow-neon-l)"></polygon><path d="M120 140q20-40 0-50q-20 10 0 50" fill="#cbd5e1" opacity=".8" filter="url(#glow-intense-l)"></path></svg>
diff --git a/client/public/badges/light/pulsar.svg b/client/public/badges/light/pulsar.svg
new file mode 100644
index 0000000..1a3a30a
--- /dev/null
+++ b/client/public/badges/light/pulsar.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}</style><g class="p2" stroke="#0284c7" fill="none" filter="url(#glow-neon-l)"><ellipse cx="120" cy="120" rx="90" ry="15" stroke-width="2" stroke-dasharray="10 20"></ellipse><ellipse cx="120" cy="120" rx="60" ry="10" stroke-width="4"></ellipse></g><line x1="120" y1="10" x2="120" y2="230" stroke="#0ea5e9" class="p1" filter="url(#glow-intense-l)" stroke-linecap="round"></line><circle cx="120" cy="120" r="30" fill="url(#bg-void-l)" stroke="#0284c7" stroke-width="3" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="10" fill="#0ea5e9" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/pulse.svg b/client/public/badges/light/pulse.svg
new file mode 100644
index 0000000..0913e30
--- /dev/null
+++ b/client/public/badges/light/pulse.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#a16207" stroke-width="4" stroke-dasharray="2 10" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" fill="none" stroke="#ca8a04" class="r1" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" fill="none" stroke="#ca8a04" class="r1" style="animation-delay:.75s" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="60" fill="url(#bg-reactor-l)" stroke="#a16207" stroke-width="4" filter="url(#glow-neon-l)"></circle><g class="r2" fill="#ca8a04" filter="url(#glow-intense-l)"><circle cx="120" cy="70" r="10"></circle><circle cx="120" cy="170" r="10"></circle><circle cx="70" cy="120" r="10"></circle><circle cx="170" cy="120" r="10"></circle></g><circle cx="120" cy="120" r="20" fill="#fff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/quantum.svg b/client/public/badges/light/quantum.svg
new file mode 100644
index 0000000..3832d1e
--- /dev/null
+++ b/client/public/badges/light/quantum.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}</style><g stroke="#9900ff" fill="none" filter="url(#glow-intense-l)"><ellipse class="q1" cx="120" cy="120" rx="110" ry="35" stroke-width="3"></ellipse><ellipse class="q2" cx="120" cy="120" rx="110" ry="35" stroke-width="3" transform="rotate(60 120 120)"></ellipse><ellipse class="q3" cx="120" cy="120" rx="110" ry="35" stroke-width="3" transform="rotate(120 120 120)"></ellipse></g><circle cx="120" cy="120" r="60" fill="url(#bg-supreme-l)" stroke="#cc00ff" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="15" fill="none" stroke="#cc00ff" stroke-width="3" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="6" fill="#eebbff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/rabbit.svg b/client/public/badges/light/rabbit.svg
new file mode 100644
index 0000000..9a77916
--- /dev/null
+++ b/client/public/badges/light/rabbit.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#10b981" stroke-width="1" stroke-dasharray="4 8" filter="url(#glow-neon-l)"></circle><g class="zrb1" filter="url(#glow-intense-l)"><path d="M90 160 Q60 160 60 120 Q60 40 100 40 Q110 80 120 120 Q130 80 140 40 Q180 40 180 120 Q180 160 150 160 Z" fill="url(#bg-z-wood-l)" stroke="#10b981" stroke-width="4"></path><ellipse cx="90" cy="80" rx="10" ry="30" fill="#84cc16" opacity="0.8"></ellipse><ellipse cx="150" cy="80" rx="10" ry="30" fill="#84cc16" opacity="0.8"></ellipse></g><circle cx="120" cy="180" fill="none" stroke="#84cc16" stroke-width="4" class="zrb2" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/radar.svg b/client/public/badges/light/radar.svg
new file mode 100644
index 0000000..4ea319f
--- /dev/null
+++ b/client/public/badges/light/radar.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#15803d" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="70" fill="none" stroke="#15803d" stroke-width="1" stroke-dasharray="5 5"></circle><circle cx="120" cy="120" r="35" fill="none" stroke="#15803d" stroke-width="1" stroke-dasharray="5 5"></circle><path d="M15 120h210M120 15v210" stroke="#15803d" stroke-width="2" opacity=".6"></path><circle cx="120" cy="120" r="105" fill="url(#bg-tactical-l)" opacity=".9"></circle><g class="t1"><path d="M120 120V15a105 105 0 01105 105z" fill="#16a34a" opacity=".4" filter="url(#glow-neon-l)"></path><line x1="120" y1="120" x2="120" y2="15" stroke="#16a34a" stroke-width="4" filter="url(#glow-intense-l)"></line></g><g fill="#16a34a" filter="url(#glow-intense-l)"><circle cx="170" cy="70" r="6" class="t2" style="animation-delay:.3s"></circle><circle cx="60" cy="150" r="5" class="t2" style="animation-delay:1.5s"></circle><circle cx="150" cy="180" r="8" class="t2" style="animation-delay:.8s"></circle></g></svg>
diff --git a/client/public/badges/light/radiance.svg b/client/public/badges/light/radiance.svg
new file mode 100644
index 0000000..176787f
--- /dev/null
+++ b/client/public/badges/light/radiance.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#9a3412" stroke-width="2" stroke-dasharray="4 8" filter="url(#glow-neon-l)"></circle><g class="r2" stroke="#c2410c" fill="none" stroke-width="4" stroke-linecap="round" filter="url(#glow-intense-l)"><path d="M120 20v40M120 180v40M20 120h40M180 120h40M50 50l30 30M190 190l-30-30M190 50l-30 30M50 190l30-30"></path></g><circle cx="120" cy="120" r="50" fill="url(#bg-reactor-l)" stroke="#c2410c" stroke-width="6" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="50" fill="none" stroke="#c2410c" class="r1" transform-origin="120px 120px" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="15" fill="#c2410c"></circle></svg>
diff --git a/client/public/badges/light/rat.svg b/client/public/badges/light/rat.svg
new file mode 100644
index 0000000..1ba7b70
--- /dev/null
+++ b/client/public/badges/light/rat.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#3b82f6" stroke-width="4" stroke-dasharray="1 15 5 30" class="zr1" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="95" fill="none" stroke="#06b6d4" stroke-width="1" stroke-dasharray="4 8" filter="url(#glow-neon-l)"></circle><polygon points="120,40 180,160 120,180 60,160" fill="url(#bg-z-water-l)" stroke="#06b6d4" stroke-width="4" class="zr2" filter="url(#glow-neon-l)"></polygon><path d="M120 40L120 180 M90 100L150 100" stroke="#3b82f6" stroke-width="4" class="zr2" filter="url(#glow-intense-l)"></path><circle cx="120" cy="140" r="10" fill="#3b82f6" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/recon.svg b/client/public/badges/light/recon.svg
new file mode 100644
index 0000000..af9f57b
--- /dev/null
+++ b/client/public/badges/light/recon.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}</style><g stroke="#115e59" fill="none" stroke-width="2" filter="url(#glow-neon-l)"><rect x="30" y="30" width="180" height="180"></rect><rect x="45" y="45" width="150" height="150" stroke-dasharray="10 10"></rect></g><rect x="60" y="60" width="120" height="120" fill="url(#bg-tactical-l)" stroke="#0f766e" stroke-width="4" class="t2" filter="url(#glow-intense-l)"></rect><g fill="#0f766e" filter="url(#glow-intense-l)"><rect x="115" y="50" width="10" height="20"></rect><rect x="115" y="170" width="10" height="20"></rect><rect x="50" y="115" width="20" height="10"></rect><rect x="170" y="115" width="20" height="10"></rect></g><g class="t1" filter="url(#glow-intense-l)"><line x1="30" y1="0" x2="210" y2="0" stroke="#0f766e" stroke-width="4"></line><rect x="30" y="-30" width="180" height="30" fill="#0f766e" opacity=".2"></rect></g></svg>
diff --git a/client/public/badges/light/rooster.svg b/client/public/badges/light/rooster.svg
new file mode 100644
index 0000000..a186e56
--- /dev/null
+++ b/client/public/badges/light/rooster.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}</style><g class="zro2" stroke="#eab308" fill="none" stroke-width="4" stroke-linecap="round" filter="url(#glow-intense-l)"><line x1="120" y1="10" x2="120" y2="40"></line><line x1="120" y1="200" x2="120" y2="230"></line><line x1="10" y1="120" x2="40" y2="120"></line><line x1="200" y1="120" x2="230" y2="120"></line><line x1="42" y1="42" x2="63" y2="63"></line><line x1="198" y1="198" x2="177" y2="177"></line><line x1="198" y1="42" x2="177" y2="63"></line><line x1="42" y1="198" x2="63" y2="177"></line></g><g class="zro1" filter="url(#glow-intense-l)"><path d="M120 80 L180 140 L60 140 Z" fill="url(#bg-z-metal-l)" stroke="#f59e0b" stroke-width="4"></path><path d="M120 80 L100 40 L120 60 L140 40 Z" fill="#eab308"></path><circle cx="120" cy="120" r="12" fill="#fff"></circle></g></svg>
diff --git a/client/public/badges/light/rune.svg b/client/public/badges/light/rune.svg
new file mode 100644
index 0000000..d7f99dd
--- /dev/null
+++ b/client/public/badges/light/rune.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}</style><g class="a1" stroke="#b45309" fill="none" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="105" stroke-width="4" stroke-dasharray="15 30 5 10"></circle><circle cx="120" cy="120" r="90" stroke-width="2" stroke-dasharray="60 40"></circle></g><circle cx="120" cy="120" r="75" fill="url(#bg-arcane-l)" stroke="#d97706" stroke-width="4" filter="url(#glow-neon-l)"></circle><g class="a2" stroke="#d97706" fill="none" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" filter="url(#glow-intense-l)"><path d="M120 60v120M120 75l45-15v50l-45 25M120 135l-45-25v55l45 15"></path><circle cx="120" cy="120" r="8" fill="#d97706"></circle></g></svg>
diff --git a/client/public/badges/light/sagittarius.svg b/client/public/badges/light/sagittarius.svg
new file mode 100644
index 0000000..cb09c78
--- /dev/null
+++ b/client/public/badges/light/sagittarius.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#f59e0b" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px;animation:f-flow 2s linear infinite"><circle cx="120" cy="120" r="100" stroke-dasharray="10 40" stroke-width="4"></circle><circle cx="120" cy="120" r="80" stroke-dasharray="40 10" stroke-width="2"></circle></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-fire-l)" opacity="0.9" stroke="#ef4444" stroke-width="2"></circle><line key="l0" x1="80" y1="160" x2="120" y2="120" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l1" x1="120" y1="120" x2="160" y2="80" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l2" x1="160" y1="80" x2="120" y2="80" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><line key="l3" x1="160" y1="80" x2="160" y2="120" stroke="#ef4444" stroke-width="4" class="line-fire" opacity="0.8"></line><g key="n0"><circle cx="80" cy="160" r="6" fill="#f59e0b" class="node-fire" style="animation-delay:0s"></circle><circle cx="80" cy="160" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="120" cy="120" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.2s"></circle><circle cx="120" cy="120" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="160" cy="80" r="10" fill="#f59e0b" class="node-fire" style="animation-delay:0.4s"></circle><circle cx="160" cy="80" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="120" cy="80" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.6000000000000001s"></circle><circle cx="120" cy="80" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="160" cy="120" r="8" fill="#f59e0b" class="node-fire" style="animation-delay:0.8s"></circle><circle cx="160" cy="120" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/scorpio.svg b/client/public/badges/light/scorpio.svg
new file mode 100644
index 0000000..ff94d62
--- /dev/null
+++ b/client/public/badges/light/scorpio.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#3b82f6" fill="none" filter="url(#glow-neon-l)" opacity="0.5" style="transform-origin:120px 120px"><circle cx="120" cy="120" class="node-water-ripple"></circle><circle cx="120" cy="120" class="node-water-ripple" style="animation-delay:1s"></circle><g style="animation:art 15s linear infinite"><circle cx="120" cy="120" r="90" stroke-dasharray="20 40" stroke-width="2"></circle><circle cx="120" cy="120" r="70" stroke-dasharray="10 30" stroke-width="1"></circle></g></g><g class="wrap-water" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-water-l)" opacity="0.9" stroke="#8b5cf6" stroke-width="2"></circle><line key="l0" x1="80" y1="80" x2="110" y2="100" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l1" x1="110" y1="100" x2="100" y2="140" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l2" x1="100" y1="140" x2="140" y2="170" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l3" x1="140" y1="170" x2="170" y2="140" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><line key="l4" x1="170" y1="140" x2="160" y2="110" stroke="#8b5cf6" stroke-width="4" class="line-water" opacity="0.8"></line><g key="n0"><circle cx="80" cy="80" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0s"></circle><circle cx="80" cy="80" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="110" cy="100" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.2s"></circle><circle cx="110" cy="100" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="100" cy="140" r="8" fill="#3b82f6" class="node-water" style="animation-delay:0.4s"></circle><circle cx="100" cy="140" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="170" r="6" fill="#3b82f6" class="node-water" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="170" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="170" cy="140" r="10" fill="#3b82f6" class="node-water" style="animation-delay:0.8s"></circle><circle cx="170" cy="140" r="3" fill="#fff"></circle></g><g key="n5"><circle cx="160" cy="110" r="6" fill="#3b82f6" class="node-water" style="animation-delay:1s"></circle><circle cx="160" cy="110" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/sentinel.svg b/client/public/badges/light/sentinel.svg
new file mode 100644
index 0000000..3aeab18
--- /dev/null
+++ b/client/public/badges/light/sentinel.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}</style><path d="M120 10c60 0 110 50 110 110s-50 110-110 110S10 180 10 120 60 10 120 10z" fill="url(#bg-aegis-l)" stroke="#2563eb" stroke-width="4" filter="url(#glow-neon-l)"></path><circle cx="120" cy="120" r="105" fill="none" stroke="#1d4ed8" stroke-width="8" stroke-dasharray="10 40 80 20" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" fill="none" stroke="#2563eb" class="s2" filter="url(#glow-intense-l)"></circle><g class="s1" filter="url(#glow-intense-l)"><path d="M120 120V20a100 100 0 01100 100z" fill="#2563eb" opacity=".3"></path><line x1="120" y1="120" x2="120" y2="20" stroke="#2563eb" stroke-width="6" stroke-linecap="round"></line></g><circle cx="120" cy="120" r="25" fill="#2563eb" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/sigil.svg b/client/public/badges/light/sigil.svg
new file mode 100644
index 0000000..1aaadb3
--- /dev/null
+++ b/client/public/badges/light/sigil.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#7e22ce" stroke-width="4" stroke-dasharray="2 15" class="a1" filter="url(#glow-neon-l)"></circle><g class="a2" stroke="#9333ea" fill="none" stroke-width="4" filter="url(#glow-intense-l)"><polygon points="120,40 189,160 51,160"></polygon><polygon points="120,200 51,80 189,80"></polygon></g><circle cx="120" cy="120" r="45" fill="url(#bg-arcane-l)" stroke="#9333ea" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="20" fill="none" stroke="#9333ea" stroke-width="2" stroke-dasharray="5 5" class="a1" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="5" fill="#fff"></circle></svg>
diff --git a/client/public/badges/light/snake.svg b/client/public/badges/light/snake.svg
new file mode 100644
index 0000000..2c1437e
--- /dev/null
+++ b/client/public/badges/light/snake.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#f43f5e" stroke-width="1" stroke-dasharray="2 6" class="zs2" filter="url(#glow-neon-l)"></circle><path d="M160 60 Q200 60 200 100 Q200 140 160 140 Q80 140 80 180 Q80 220 120 220 Q160 220 160 180" fill="none" stroke="#f43f5e" stroke-width="12" stroke-linecap="round" class="zs1" filter="url(#glow-intense-l)"></path><path d="M80 180 Q40 180 40 140 Q40 100 80 100 Q160 100 160 60 Q160 20 120 20 Q80 20 80 60" fill="none" stroke="#f97316" stroke-width="6" stroke-linecap="round" class="zs1" style="animation-direction:reverse" filter="url(#glow-intense-l)"></path><circle cx="120" cy="120" r="30" fill="url(#bg-z-fire-l)" stroke="#f43f5e" stroke-width="2"></circle><circle cx="120" cy="120" r="10" fill="#f97316" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/sniper.svg b/client/public/badges/light/sniper.svg
new file mode 100644
index 0000000..a2ecc99
--- /dev/null
+++ b/client/public/badges/light/sniper.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}</style><g class="t2" fill="none" stroke="#991b1b" stroke-width="2" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="105" stroke-dasharray="2 10 20 5"></circle><circle cx="120" cy="120" r="60" fill="url(#bg-tactical-l)"></circle></g><g class="t1" stroke="#b91c1c" fill="none" stroke-width="6" filter="url(#glow-intense-l)"><path d="M60 100V60h40M140 60h40v40M180 140v40h-40M100 180H60v-40"></path><circle cx="120" cy="120" r="4" fill="#b91c1c"></circle><path d="M120 80v80M80 120h80" stroke-width="2"></path></g></svg>
diff --git a/client/public/badges/light/solaris.svg b/client/public/badges/light/solaris.svg
new file mode 100644
index 0000000..bfaab05
--- /dev/null
+++ b/client/public/badges/light/solaris.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}</style><g class="s1" stroke="#e63900" fill="none" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="105" stroke-width="6" stroke-dasharray="1 15" stroke-linecap="round"></circle><circle cx="120" cy="120" r="90" stroke-width="4" stroke-dasharray="20 40"></circle></g><g class="s2" stroke="#e69900" fill="none" filter="url(#glow-neon-l)"><circle cx="120" cy="120" r="115" stroke-width="3" stroke-dasharray="2 30" stroke-linecap="round"></circle><circle cx="120" cy="120" r="75" stroke-width="2" stroke-dasharray="50 50"></circle></g><circle cx="120" cy="120" r="60" fill="#cc2200" stroke="#ff8800" stroke-width="4" class="s3" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="50" fill="url(#bg-supreme-l)" stroke="none"></circle><circle cx="120" cy="120" r="15" fill="#ff8800" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/strike.svg b/client/public/badges/light/strike.svg
new file mode 100644
index 0000000..a22afc7
--- /dev/null
+++ b/client/public/badges/light/strike.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}</style><polygon points="120,20 210,160 30,160" fill="none" stroke="#be123c" stroke-width="4" stroke-dasharray="10 15" filter="url(#glow-neon-l)"></polygon><polygon points="120,50 180,150 60,150" fill="url(#bg-tactical-l)" stroke="#e11d48" stroke-width="6" filter="url(#glow-intense-l)"></polygon><g class="t1" stroke="#e11d48" fill="none" stroke-width="8" stroke-linecap="round" filter="url(#glow-intense-l)"><line x1="120" y1="30" x2="120" y2="120"></line><polygon points="120,140 135,120 105,120" fill="#e11d48"></polygon></g><rect x="110" y="170" width="20" height="20" fill="#e11d48" class="t2" filter="url(#glow-intense-l)"></rect></svg>
diff --git a/client/public/badges/light/taurus.svg b/client/public/badges/light/taurus.svg
new file mode 100644
index 0000000..a6d5699
--- /dev/null
+++ b/client/public/badges/light/taurus.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px"><g class="e-rot-box"><rect x="20" y="20" width="200" height="200" stroke-width="1" stroke-dasharray="10 10"></rect><rect x="40" y="40" width="160" height="160" stroke-width="1" stroke-dasharray="5 15"></rect></g><path d="M120 20v200M20 120h200" stroke-width="2"></path><line x1="20" y1="120" x2="220" y2="120" stroke="#14b8a6" stroke-width="4" class="e-scan-line" opacity="0.6"></line></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-earth-l)" opacity="0.9" stroke="#22c55e" stroke-width="2"></circle><line key="l0" x1="70" y1="60" x2="100" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l1" x1="170" y1="60" x2="140" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l2" x1="100" y1="100" x2="140" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l3" x1="120" y1="100" x2="120" y2="160" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><g key="n0"><circle cx="70" cy="60" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0s"></circle><circle cx="70" cy="60" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="170" cy="60" r="6" fill="#14b8a6" class="node-earth" style="animation-delay:0.2s"></circle><circle cx="170" cy="60" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="100" cy="100" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.4s"></circle><circle cx="100" cy="100" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="140" cy="100" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.6000000000000001s"></circle><circle cx="140" cy="100" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="120" cy="160" r="10" fill="#14b8a6" class="node-earth" style="animation-delay:0.8s"></circle><circle cx="120" cy="160" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/tiger.svg b/client/public/badges/light/tiger.svg
new file mode 100644
index 0000000..ff22606
--- /dev/null
+++ b/client/public/badges/light/tiger.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}</style><polygon points="120,20 220,120 120,220 20,120" fill="none" stroke="#84cc16" stroke-width="2" filter="url(#glow-neon-l)"></polygon><g class="zt1" filter="url(#glow-intense-l)" transform-origin="120 120"><rect x="60" y="60" width="120" height="120" fill="url(#bg-z-wood-l)" stroke="#10b981" stroke-width="4" rx="20"></rect><line x1="120" y1="60" x2="120" y2="180" stroke="#10b981" stroke-width="6"></line></g><g stroke="#84cc16" stroke-width="10" stroke-linecap="round" class="zt2" filter="url(#glow-intense-l)"><line x1="180" y1="40" x2="40" y2="100"></line><line x1="200" y1="80" x2="60" y2="140" style="animation-delay:0.1s"></line><line x1="220" y1="120" x2="80" y2="180" style="animation-delay:0.2s"></line></g></svg>
diff --git a/client/public/badges/light/titan.svg b/client/public/badges/light/titan.svg
new file mode 100644
index 0000000..0e961da
--- /dev/null
+++ b/client/public/badges/light/titan.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}</style><circle cx="120" cy="120" r="105" fill="none" stroke="#00cc44" stroke-width="12" stroke-dasharray="15 15" class="t1" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="85" fill="none" stroke="#00cc44" stroke-width="3" stroke-dasharray="50 100" class="t2" filter="url(#glow-intense-l)"></circle><path d="M50 80L120 40l70 40v80l-70 40-70-40z" fill="url(#bg-supreme-l)" stroke="#00cc44" stroke-width="5" filter="url(#glow-neon-l)"></path><rect x="105" y="90" width="30" height="60" fill="none" stroke="#00cc44" stroke-width="3" filter="url(#glow-neon-l)"></rect><rect x="110" y="105" width="20" height="30" fill="#00cc44" filter="url(#glow-intense-l)"></rect></svg>
diff --git a/client/public/badges/light/tracer.svg b/client/public/badges/light/tracer.svg
new file mode 100644
index 0000000..ec1c7d2
--- /dev/null
+++ b/client/public/badges/light/tracer.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}</style><rect x="30" y="30" width="180" height="180" fill="none" stroke="#9a3412" stroke-width="2" opacity=".5" filter="url(#glow-neon-l)"></rect><rect x="60" y="60" width="120" height="120" fill="url(#bg-tactical-l)" stroke="#c2410c" stroke-width="4" filter="url(#glow-intense-l)"></rect><path d="M40 40l40 60 80-20 20 80" fill="none" stroke="#c2410c" stroke-width="3" stroke-dasharray="400" class="t1" filter="url(#glow-intense-l)"></path><g fill="#c2410c" filter="url(#glow-intense-l)"><circle cx="80" cy="100" r="6" class="t2"></circle><circle cx="160" cy="80" r="6" class="t2" style="animation-delay:.5s"></circle><circle cx="180" cy="160" r="8" class="t2" style="animation-delay:.8s"></circle></g></svg>
diff --git a/client/public/badges/light/ultra.svg b/client/public/badges/light/ultra.svg
new file mode 100644
index 0000000..122c4bd
--- /dev/null
+++ b/client/public/badges/light/ultra.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}</style><g class="u1" stroke="#00aaff" fill="none"><path d="M20 120a100 100 0 01100-100m100 100a100 100 0 01-100 100" stroke-width="6" stroke-linecap="round" filter="url(#glow-intense-l)"></path></g><circle cx="120" cy="120" r="85" fill="none" stroke="#0066cc" stroke-width="3" stroke-dasharray="15 30 5 10" class="u2" filter="url(#glow-neon-l)"></circle><polygon points="120,45 185,82.5 185,157.5 120,195 55,157.5 55,82.5" fill="url(#bg-supreme-l)" stroke="#00aaff" stroke-width="4" filter="url(#glow-neon-l)"></polygon><path d="M90 120h60M120 90v60" stroke="#00aaff" stroke-width="3" filter="url(#glow-neon-l)"></path><rect x="115" y="115" width="10" height="10" fill="#00aaff" filter="url(#glow-intense-l)"></rect></svg>
diff --git a/client/public/badges/light/uranus.svg b/client/public/badges/light/uranus.svg
new file mode 100644
index 0000000..3f00d15
--- /dev/null
+++ b/client/public/badges/light/uranus.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}</style><g transform="rotate(80 120 120)"><ellipse class="u1" cx="120" cy="120" rx="105" ry="15" stroke="#00aaff" stroke-width="3" fill="none" stroke-dasharray="20 10" filter="url(#glow-intense-l)"></ellipse></g><circle cx="120" cy="120" r="60" fill="url(#bg-ice-l)" stroke="#0088cc" stroke-width="4" filter="url(#glow-neon-l)"></circle><path d="M80 80q40-20 80 0M80 160q40 20 80 0" stroke="#00aaff" stroke-width="2" fill="none" opacity=".6"></path><circle cx="120" cy="120" r="10" fill="#00aaff" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/vanguard.svg b/client/public/badges/light/vanguard.svg
new file mode 100644
index 0000000..ff3727c
--- /dev/null
+++ b/client/public/badges/light/vanguard.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}</style><g class="v2" stroke="#475569" fill="none" opacity=".4"><polygon points="120,10 130,50 120,30 110,50" fill="#475569" filter="url(#glow-intense-l)"></polygon><polygon points="120,230 130,190 120,210 110,190" fill="#475569"></polygon><circle cx="120" cy="120" r="105" stroke-width="1" stroke-dasharray="2 10"></circle></g><g class="v1"><path d="M120 40l70 140-70-30-70 30z" fill="url(#bg-platinum-l)" stroke="#475569" stroke-width="4" filter="url(#glow-neon-l)"></path><path d="M120 40v110" stroke="#0284c7" stroke-width="4" filter="url(#glow-intense-l)"></path><polygon points="120,70 140,120 120,110 100,120" fill="#0284c7" filter="url(#glow-intense-l)"></polygon></g></svg>
diff --git a/client/public/badges/light/virgo.svg b/client/public/badges/light/virgo.svg
new file mode 100644
index 0000000..e19e9f8
--- /dev/null
+++ b/client/public/badges/light/virgo.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
+    /* 全局星座基础动画 */
+    .node-fire { animation: f-flicker 0.2s infinite alternate; }
+    .line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
+    .node-air { animation: a-pulse 1s infinite alternate; }
+
+    /* 水象专属强化 */
+    .wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
+    .node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
+    .line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
+    .node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
+
+    /* 土象专属强化 */
+    .node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    .line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
+    .e-scan-line { animation: e-scan 3s linear infinite; }
+    .e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
+
+    @keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
+    @keyframes f-flow { 100% { stroke-dashoffset: -20; } }
+    @keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
+
+    /* 新增水象/土象关键帧 */
+    @keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
+    @keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
+    @keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
+    @keyframes w-flow { 100% { stroke-dashoffset: -36; } }
+
+    @keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
+    @keyframes e-flow { 100% { stroke-dashoffset: -60; } }
+    @keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
+    @keyframes e-rot { 100% { transform: rotate(90deg); } }
+{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
+{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
+{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
+{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
+{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
+{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
+{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
+{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
+{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
+{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
+{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><g stroke="#14b8a6" fill="none" filter="url(#glow-neon-l)" opacity="0.4" style="transform-origin:120px 120px"><g class="e-rot-box"><rect x="20" y="20" width="200" height="200" stroke-width="1" stroke-dasharray="10 10"></rect><rect x="40" y="40" width="160" height="160" stroke-width="1" stroke-dasharray="5 15"></rect></g><path d="M120 20v200M20 120h200" stroke-width="2"></path><line x1="20" y1="120" x2="220" y2="120" stroke="#14b8a6" stroke-width="4" class="e-scan-line" opacity="0.6"></line></g><g class="" filter="url(#glow-intense-l)"><circle cx="120" cy="120" r="65" fill="url(#bg-a-earth-l)" opacity="0.9" stroke="#22c55e" stroke-width="2"></circle><line key="l0" x1="150" y1="70" x2="120" y2="100" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l1" x1="120" y1="100" x2="90" y2="130" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l2" x1="90" y1="130" x2="130" y2="170" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><line key="l3" x1="120" y1="100" x2="160" y2="140" stroke="#22c55e" stroke-width="4" class="line-earth" opacity="0.8"></line><g key="n0"><circle cx="150" cy="70" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0s"></circle><circle cx="150" cy="70" r="3" fill="#fff"></circle></g><g key="n1"><circle cx="120" cy="100" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.2s"></circle><circle cx="120" cy="100" r="3" fill="#fff"></circle></g><g key="n2"><circle cx="90" cy="130" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.4s"></circle><circle cx="90" cy="130" r="3" fill="#fff"></circle></g><g key="n3"><circle cx="130" cy="170" r="10" fill="#14b8a6" class="node-earth" style="animation-delay:0.6000000000000001s"></circle><circle cx="130" cy="170" r="3" fill="#fff"></circle></g><g key="n4"><circle cx="160" cy="140" r="8" fill="#14b8a6" class="node-earth" style="animation-delay:0.8s"></circle><circle cx="160" cy="140" r="3" fill="#fff"></circle></g></g></svg>
diff --git a/client/public/badges/light/vortex.svg b/client/public/badges/light/vortex.svg
new file mode 100644
index 0000000..d38b3c8
--- /dev/null
+++ b/client/public/badges/light/vortex.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}</style><circle cx="120" cy="120" r="100" fill="none" stroke="#be185d" stroke-width="2" stroke-dasharray="10 30" filter="url(#glow-neon-l)"></circle><g class="r1" stroke="#db2777" fill="none" stroke-width="6" stroke-linecap="round" filter="url(#glow-intense-l)"><path d="M20 120q100-20 100-100M220 120q-100 20-100 100M120 220q-20-100-100-100M120 20q20 100 100 100"></path></g><circle cx="120" cy="120" r="45" fill="url(#bg-reactor-l)" stroke="#db2777" stroke-width="4" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="20" fill="#db2777" class="r2" transform-origin="120px 120px" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/ward.svg b/client/public/badges/light/ward.svg
new file mode 100644
index 0000000..b0eccaa
--- /dev/null
+++ b/client/public/badges/light/ward.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}</style><g class="w2" stroke="#4338ca" fill="none" stroke-width="2" filter="url(#glow-neon-l)"><ellipse cx="120" cy="120" rx="100" ry="40"></ellipse><ellipse cx="120" cy="120" rx="100" ry="40" transform="rotate(60 120 120)"></ellipse><ellipse cx="120" cy="120" rx="100" ry="40" transform="rotate(120 120 120)"></ellipse></g><circle cx="120" cy="120" r="60" fill="url(#bg-aegis-l)" stroke="#4f46e5" stroke-width="4" class="w1" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="30" fill="none" stroke="#4f46e5" stroke-width="6" stroke-dasharray="10 10" class="w2" style="animation-direction:reverse" filter="url(#glow-intense-l)"></circle><circle cx="120" cy="120" r="10" fill="#4f46e5" filter="url(#glow-intense-l)"></circle></svg>
diff --git a/client/public/badges/light/wormhole.svg b/client/public/badges/light/wormhole.svg
new file mode 100644
index 0000000..90b5574
--- /dev/null
+++ b/client/public/badges/light/wormhole.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s, color 0.3s; }
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 6s linear infinite reverse}.e3{animation:ep 1.5s ease-in-out infinite alternate}@keyframes es{100%{transform:rotate(360deg)}}@keyframes ep{0%{opacity:.7;transform:scale(.98)}100%{opacity:1;transform:scale(1.02)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 3s cubic-bezier(.4,0,.2,1) infinite}.u2{transform-origin:120px 120px;animation:us 2s linear infinite reverse}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 4s linear infinite}.a2{animation:ap 2s ease-in-out infinite alternate}@keyframes as{100%{transform:rotate(360deg)}}@keyframes ap{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1}}`}
+{`.q1{transform-origin:120px 120px;animation:qs 2.5s linear infinite}.q2{transform-origin:120px 120px;animation:qs 3s linear infinite reverse}.q3{transform-origin:120px 120px;animation:qs 4s linear infinite}@keyframes qs{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:ts 6s steps(60) infinite}.t2{transform-origin:120px 120px;animation:ts 3s linear infinite reverse}@keyframes ts{100%{transform:rotate(360deg)}}`}
+{`.o1{transform-origin:120px 120px;animation:op 1s ease-in-out infinite alternate}.o2{transform-origin:120px 120px;animation:os 10s linear infinite}@keyframes op{0%{transform:scale(.9)}100%{transform:scale(1.1);filter:brightness(1.5)}}@keyframes os{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 20s linear infinite}.m2{stroke-dasharray:20 200;animation:mf 2s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}@keyframes mf{100%{stroke-dashoffset:-220}}`}
+{`.v1{transform-origin:120px 120px;animation:vp 1.5s cubic-bezier(.4,0,.2,1) infinite alternate}.v2{transform-origin:120px 120px;animation:vr 8s linear infinite}@keyframes vp{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes vr{100%{transform:rotate(360deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 30s linear infinite}.g2{transform-origin:120px 120px;animation:gs 40s linear infinite reverse}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.n1{animation:np 2s cubic-bezier(.4,0,.6,1) infinite alternate}.n2{transform-origin:120px 120px;animation:ns 15s linear infinite}@keyframes np{0%{opacity:.4}100%{opacity:1}}@keyframes ns{100%{transform:rotate(360deg)}}`}
+{`.s1{transform-origin:120px 120px;animation:ss 5s linear infinite}.s2{transform-origin:120px 120px;animation:ss 8s linear infinite reverse}.s3{transform-origin:120px 120px;animation:spl 1s ease-in-out infinite alternate}@keyframes ss{100%{transform:rotate(360deg)}}@keyframes spl{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.05);opacity:1}}`}
+{`.e1{transform-origin:120px 120px;animation:es 4s linear infinite}.e2{transform-origin:120px 120px;animation:es 20s linear infinite}@keyframes es{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 15s linear infinite}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:as 3s cubic-bezier(.68,-.55,.265,1.55) infinite}@keyframes as{100%{transform:rotate(90deg)}}`}
+{`.j1{transform-origin:120px 120px;animation:js 8s linear infinite}.j2{animation:jf 4s linear infinite}@keyframes js{100%{transform:rotate(360deg)}}@keyframes jf{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}`}
+{`.c1{transform-origin:120px 120px;animation:cs 4s linear infinite}.c2{transform-origin:120px 120px;animation:cs 6s linear infinite reverse}@keyframes cs{100%{transform:rotate(360deg)}}`}
+{`.u1{transform-origin:120px 120px;animation:us 6s linear infinite}@keyframes us{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 3s cubic-bezier(.4,0,.2,1) infinite}.n2{animation:npl 2s infinite alternate}@keyframes ns{100%{transform:rotate(360deg)}}@keyframes npl{0%{stroke-width:2;opacity:.5}100%{stroke-width:6;opacity:1}}`}
+{`.p1{transform-origin:120px 120px;animation:ps 10s linear infinite}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.b1{transform-origin:120px 120px;animation:bs 2s linear infinite}.b2{transform-origin:120px 120px;animation:bs 1.5s cubic-bezier(.5,0,.5,1) infinite reverse}@keyframes bs{100%{transform:rotate(360deg)}}`}
+{`.m1{transform-origin:120px 120px;animation:ms 1s linear infinite}.m2{transform-origin:120px 120px;animation:ms 1.5s linear infinite reverse}@keyframes ms{100%{transform:rotate(360deg)}}`}
+{`.n1{transform-origin:120px 120px;animation:ns 20s ease-in-out infinite alternate}.n2{animation:np 2s ease-in-out infinite alternate}@keyframes ns{100%{transform:scale(1.1) rotate(45deg)}}@keyframes np{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}`}
+{`.p1{animation:pp .15s linear infinite alternate}.p2{transform-origin:120px 120px;animation:ps 2s linear infinite}@keyframes pp{0%{opacity:.8;stroke-width:6}100%{opacity:1;stroke-width:14}}@keyframes ps{100%{transform:rotate(360deg)}}`}
+{`.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}`}
+{`.g1{transform-origin:120px 120px;animation:gs 15s linear infinite}@keyframes gs{100%{transform:rotate(360deg)}}`}
+{`.a1{animation:a1a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a2{animation:a2a 2s cubic-bezier(.68,-.55,.265,1.55) infinite alternate}.a3{transform-origin:120px 120px;animation:a3a 4s steps(2) infinite}@keyframes a1a{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a2a{0%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes a3a{0%{transform:scale(.8)}50%{transform:scale(1.1);stroke-width:6}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 4s ease-in-out infinite}.p2{animation:p2a 2s infinite alternate}@keyframes p1a{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(45deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}@keyframes p2a{0%{opacity:.3;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
+{`.s1{transform-origin:120px 120px;animation:s1a 2s linear infinite}.s2{animation:s2a 1s ease-out infinite}@keyframes s1a{100%{transform:rotate(360deg)}}@keyframes s2a{0%{r:30px;opacity:1;stroke-width:6}100%{r:90px;opacity:0;stroke-width:1}}`}
+{`.f1{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite}.f2{transform-origin:120px 120px;animation:f1a 4s cubic-bezier(.68,-.55,.265,1.55) infinite reverse}@keyframes f1a{100%{transform:rotate(90deg)}}`}
+{`.g1{transform-origin:120px 120px;animation:g1a 10s linear infinite}.g2{transform-origin:120px 120px;animation:g1a 7s linear infinite reverse}.g3{animation:g3a 2s infinite alternate}@keyframes g1a{100%{transform:rotate(360deg)}}@keyframes g3a{0%{fill-opacity:.2}100%{fill-opacity:1}}`}
+{`.c1{transform-origin:120px 120px;animation:c1a 10s cubic-bezier(.68,-.55,.265,1.55) infinite}.c2{transform-origin:120px 120px;animation:c2a 15s linear infinite}@keyframes c1a{100%{transform:rotate(90deg)}}@keyframes c2a{100%{transform:rotate(-360deg)}}`}
+{`.p1{transform-origin:120px 120px;animation:p1a 2s infinite alternate}.p2{transform-origin:120px 120px;animation:p2a 8s linear infinite}@keyframes p1a{0%{transform:scale(.9)}100%{transform:scale(1.05);stroke-width:6}}@keyframes p2a{100%{transform:rotate(360deg)}}`}
+{`.b1{animation:b1a 3s ease-in-out infinite alternate}.b2{animation:b2a 3s ease-in-out infinite alternate}@keyframes b1a{0%{transform:translateY(10px);opacity:.5}100%{transform:translateY(-10px);opacity:1}}@keyframes b2a{0%{transform:translateY(-10px);opacity:.5}100%{transform:translateY(10px);opacity:1}}`}
+{`.w1{transform-origin:120px 120px;animation:w1a 2s infinite alternate}.w2{transform-origin:120px 120px;animation:w2a 12s linear infinite}@keyframes w1a{0%{transform:scale(.9)}100%{transform:scale(1);stroke-width:4}}@keyframes w2a{100%{transform:rotate(360deg)}}`}
+{`.d1{transform-origin:120px 120px;animation:d1a 1.5s cubic-bezier(.8,0,.2,1) infinite alternate}.d2{transform-origin:120px 120px;animation:d2a 5s linear infinite}@keyframes d1a{0%{transform:scale(.95) translateY(5px)}100%{transform:scale(1.05) translateY(-5px)}}@keyframes d2a{100%{transform:rotate(360deg)}}`}
+{`.r1{stroke-dasharray:20 60;animation:r1a 1.5s linear infinite}.r2{transform-origin:120px 120px;animation:r2a .3s infinite alternate}@keyframes r1a{100%{stroke-dashoffset:-80}}@keyframes r2a{100%{transform:scale(1.08);filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1s cubic-bezier(.4,0,.2,1) infinite alternate}.r2{transform-origin:120px 120px;animation:r1a 1.2s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}@keyframes r1a{0%{transform:scale(.9) rotate(-15deg)}100%{transform:scale(1.15) rotate(15deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 3s steps(8) infinite}@keyframes r1a{0%{r:30px;opacity:1;stroke-width:10}100%{r:110px;opacity:0;stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .5s ease-out infinite alternate;transform-origin:120px 120px}@keyframes r1a{0%{transform:translate(3px,-3px) skewX(5deg)}100%{transform:translate(-3px,3px) skewX(-5deg)}}@keyframes r2a{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.1);opacity:1;filter:brightness(1.5)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a .8s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a .8s ease-out infinite}@keyframes r1a{0%{transform:scale(.8)}15%{transform:scale(1.2);filter:brightness(1.8)}30%{transform:scale(.9)}45%{transform:scale(1.05)}100%{transform:scale(.8)}}@keyframes r2a{0%{transform:scale(.5);opacity:1;stroke-width:10}100%{transform:scale(1.8);opacity:0;stroke-width:1}}`}
+{`.r1{animation:r1a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r2{animation:r2a .8s cubic-bezier(.5,0,.5,1) infinite alternate}.r3{transform-origin:120px 120px;animation:r3a 3s linear infinite}@keyframes r1a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-30px);opacity:.8}}@keyframes r2a{0%{transform:translateX(0);opacity:1}100%{transform:translateX(30px);opacity:.8}}@keyframes r3a{100%{transform:rotate(360deg) scale(1.1)}}`}
+{`.r1{animation:r1a .1s steps(2) infinite;transform-origin:120px 120px}.r2{animation:r2a .3s infinite alternate}@keyframes r1a{0%{transform:translate(2px,-3px) rotate(1deg);stroke-width:4}100%{transform:translate(-2px,3px) rotate(-1deg);stroke-width:12}}@keyframes r2a{0%{opacity:.3;transform:scale(.9)}100%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}}`}
+{`.r1{animation:r1a 1s steps(4) infinite alternate}.r2{animation:r2a 1s steps(4) infinite alternate}@keyframes r1a{0%{transform:translateY(-20px)}100%{transform:translateY(20px)}}@keyframes r2a{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}`}
+{`.r1{animation:r1a 1s ease-out infinite}.r2{transform-origin:120px 120px;animation:r2a 6s linear infinite}@keyframes r1a{0%{opacity:1;transform:scale(.8);stroke-width:10}100%{opacity:0;transform:scale(1.5);stroke-width:1}}@keyframes r2a{100%{transform:rotate(360deg)}}`}
+{`.r1{transform-origin:120px 120px;animation:r1a 1.5s cubic-bezier(.5,0,.5,1) infinite}.r2{animation:r2a .8s infinite alternate}@keyframes r1a{100%{transform:rotate(-360deg) scale(.9);opacity:.5}}@keyframes r2a{100%{transform:scale(1.2)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2s steps(4) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{0%{transform:translate(-15px,-15px)}25%{transform:translate(15px,-15px)}50%{transform:translate(15px,15px)}75%{transform:translate(-15px,15px)}100%{transform:translate(0,0)}}@keyframes t2a{0%{transform:scale(.8)}100%{transform:scale(1.1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1.5s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a 1.5s infinite}@keyframes t1a{0%{transform:scale(2);opacity:0;stroke-width:2}40%{transform:scale(1);opacity:1;stroke-width:6}80%{transform:scale(.9);stroke-width:10}100%{transform:scale(1.5);opacity:0}}@keyframes t2a{0%,40%,100%{fill-opacity:0}50%,80%{fill-opacity:.5}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 2.5s linear infinite}.t2{animation:t2a 2.5s ease-out infinite}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%,20%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(1)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite}.t2{animation:t2a .2s steps(2) infinite}@keyframes t1a{0%{transform:translateY(-100px) scaleY(2);opacity:0}50%,100%{transform:translateY(0) scaleY(1);opacity:1}}@keyframes t2a{0%{opacity:.5}100%{opacity:1}}`}
+{`.t1{animation:t1a 2s linear infinite}.t2{transform-origin:120px 120px;animation:t2a 4s steps(4) infinite}@keyframes t1a{0%{transform:translateY(30px);opacity:0}10%,90%{opacity:1}100%{transform:translateY(210px);opacity:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 12s steps(60) infinite}.t2{transform-origin:120px 120px;animation:t2a 2s ease-in-out infinite alternate}@keyframes t1a{100%{transform:rotate(360deg)}}@keyframes t2a{0%{transform:scale(1.1);stroke-width:2}100%{transform:scale(.9);stroke-width:6}}`}
+{`.t1{animation:t1a 3s linear infinite}.t2{animation:t2a 1s steps(2) infinite}@keyframes t1a{0%{stroke-dashoffset:400}100%{stroke-dashoffset:0}}@keyframes t2a{100%{opacity:0}}`}
+{`.t1{transform-origin:120px 120px;animation:t1a 4s ease-in-out infinite alternate}.t2{animation:t2a 2s infinite}@keyframes t1a{0%{transform:rotate(-45deg)}100%{transform:rotate(45deg)}}@keyframes t2a{0%{r:10px;opacity:1}100%{r:50px;opacity:0}}`}
+{`.t1{animation:t1a 1s cubic-bezier(.8,0,.2,1) infinite alternate}.t2{transform-origin:120px 120px;animation:t2a 8s steps(3) infinite}@keyframes t1a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}@keyframes t2a{100%{transform:rotate(360deg)}}`}
+{`.t1{animation:t1a 2s steps(2) infinite}@keyframes t1a{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 4s ease-in-out infinite alternate}.a2{transform-origin:120px 120px;animation:a2a 10s linear infinite}@keyframes a1a{0%{transform:scale(.6) rotate(0deg);opacity:.5}100%{transform:scale(1.3) rotate(90deg);opacity:1}}@keyframes a2a{100%{transform:rotate(-360deg)}}`}
+{`.a1{stroke-dasharray:400;stroke-dashoffset:400;animation:a1a 4s cubic-bezier(.4,0,.2,1) infinite}.a2{animation:a2a 4s cubic-bezier(.4,0,.2,1) infinite}@keyframes a1a{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}@keyframes a2a{0%,40%,80%,100%{fill-opacity:0}50%,70%{fill-opacity:.3}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a2a 4s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{transform:translateY(-10px) scale(.9)}100%{transform:translateY(10px) scale(1.1);filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 12s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(90deg)}}@keyframes a2a{0%{opacity:.6}100%{opacity:1}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 20s linear infinite}.a2{animation:a2a 2s ease-in-out infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{r:2px;opacity:.4}100%{r:12px;opacity:1;filter:brightness(1.5)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 8s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 12s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 16s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 3s linear infinite}@keyframes a1a{0%{transform:scale(1.5) rotate(0deg);opacity:0}50%{opacity:1}100%{transform:scale(.1) rotate(180deg);opacity:0}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 10s cubic-bezier(.5,0,.5,1) infinite}.a2{animation:a2a 2s infinite alternate}@keyframes a1a{100%{transform:rotate(360deg)}}@keyframes a2a{0%{opacity:.6;stroke-width:2}100%{opacity:1;stroke-width:6}}`}
+{`.a1{transform-origin:120px 120px;animation:a1a 15s linear infinite}.a2{transform-origin:120px 120px;animation:a1a 10s linear infinite reverse}.a3{transform-origin:120px 120px;animation:a1a 20s linear infinite}@keyframes a1a{100%{transform:rotate(360deg)}}`}</style><defs>
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.w1{transform-origin:120px 120px;animation:ws 10s linear infinite}.w2{animation:wz 3s linear infinite}@keyframes ws{100%{transform:rotate(-360deg)}}@keyframes wz{0%{r:100px;opacity:0;stroke-width:1}50%{opacity:1;stroke-width:4}100%{r:10px;opacity:0;stroke-width:8}}</style><g class="w1" fill="none" filter="url(#glow-intense-l)"><path d="M120 10q60 50 0 110M120 230q-60-50 0-110M10 120q50-60 110 0M230 120q-50 60-110 0" stroke="#0d9488" stroke-width="3"></path></g><circle cx="120" cy="120" fill="none" stroke="#0d9488" class="w2" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" fill="none" stroke="#4f46e5" class="w2" style="animation-delay:1s" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" fill="none" stroke="#0d9488" class="w2" style="animation-delay:2s" filter="url(#glow-neon-l)"></circle><circle cx="120" cy="120" r="30" fill="url(#bg-void-l)" stroke="none" filter="url(#glow-neon-l)"></circle></svg>
diff --git a/client/public/icons/peer.svg b/client/public/icons/peer.svg
new file mode 100644
index 0000000..824e52b
--- /dev/null
+++ b/client/public/icons/peer.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="70 80 260 260" width="200" height="200">
+  <defs>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="2.5" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+    <filter id="glow-strong" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="4" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+    
+    <linearGradient id="data-stream" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" stop-color="#00E5FF" stop-opacity="0" />
+      <stop offset="50%" stop-color="#00E5FF" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="#00E5FF" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+
+  <g transform="translate(0, 10)">
+    
+    <g id="base-platform">
+      <polygon points="200,275 90,220 90,245 200,300" fill="#282B30" />
+      <polygon points="200,275 310,220 310,245 200,300" fill="#1C1E22" />
+      <polygon points="200,275 90,220 200,165 310,220" fill="#3E434A" />
+      
+      <polygon points="200,274 91,220 200,166 309,220" fill="none" stroke="#00E5FF" stroke-width="2" filter="url(#glow)">
+        <animate attributeName="opacity" values="0.2; 0.8; 0.2" dur="3s" repeatCount="indefinite" />
+      </polygon>
+    </g>
+
+    <g transform="translate(200, 210)">
+      <polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.5)">
+        <animate attributeName="opacity" values="0.6; 0.2; 0.6" dur="4s" repeatCount="indefinite" />
+      </polygon>
+    </g>
+    
+    <g id="node-back">
+      <animateTransform attributeName="transform" type="translate" values="200,210; 200,198; 200,210" dur="4s" repeatCount="indefinite" />
+      
+      <line x1="0" y1="0" x2="0" y2="40" stroke="url(#data-stream)" stroke-width="4" stroke-dasharray="8,4">
+        <animate attributeName="stroke-dashoffset" from="24" to="0" dur="1s" repeatCount="indefinite" />
+        <animate attributeName="opacity" values="0.3; 1; 0.3" dur="2s" repeatCount="indefinite" />
+      </line>
+
+      <polygon points="0,0 -40,-20 -40,-65 0,-45" fill="#E2E5E9" stroke="#111214" stroke-width="2" stroke-linejoin="round" />
+      <polygon points="0,0 40,-20 40,-65 0,-45" fill="#C9CDD3" stroke="#111214" stroke-width="2" stroke-linejoin="round" />
+      <polygon points="0,-45 -40,-65 0,-85 40,-65" fill="#FFFFFF" stroke="#111214" stroke-width="2" stroke-linejoin="round" />
+    </g>
+
+    <g transform="translate(154, 233)">
+      <polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.4)">
+        <animate attributeName="opacity" values="0.5; 0.2; 0.5" dur="3.5s" repeatCount="indefinite" />
+      </polygon>
+    </g>
+
+    <g id="node-left">
+      <animateTransform attributeName="transform" type="translate" values="154,233; 154,225; 154,233" dur="3.5s" repeatCount="indefinite" />
+      <polygon points="0,0 -40,-20 -40,-65 0,-45" fill="#18191C" />
+      <polygon points="0,0 40,-20 40,-65 0,-45" fill="#0D0D10" />
+      <polygon points="0,-45 -40,-65 0,-85 40,-65" fill="#2A2B2F" />
+
+      <polyline points="-40,-20 -40,-65 0,-85" fill="none" stroke="#00E5FF" stroke-width="2.5" stroke-dasharray="15 80" filter="url(#glow)">
+        <animate attributeName="stroke-dashoffset" from="95" to="-95" dur="2.5s" repeatCount="indefinite" />
+      </polyline>
+    </g>
+
+    <g transform="translate(246, 233)">
+      <polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.4)">
+        <animate attributeName="opacity" values="0.5; 0.2; 0.5" dur="4.2s" repeatCount="indefinite" />
+      </polygon>
+    </g>
+
+    <g id="node-right">
+      <animateTransform attributeName="transform" type="translate" values="246,233; 246,223; 246,233" dur="4.2s" repeatCount="indefinite" />
+      <polygon points="0,0 -40,-20 -40,-65 0,-45" fill="#18191C" />
+      <polygon points="0,0 40,-20 40,-65 0,-45" fill="#0D0D10" />
+      <polygon points="0,-45 -40,-65 0,-85 40,-65" fill="#2A2B2F" />
+
+      <polyline points="40,-20 40,-65 0,-85" fill="none" stroke="#00E5FF" stroke-width="2.5" stroke-dasharray="15 80" filter="url(#glow)">
+        <animate attributeName="stroke-dashoffset" from="-95" to="95" dur="3s" repeatCount="indefinite" />
+      </polyline>
+    </g>
+
+    <g transform="translate(200, 256)">
+      <polygon points="0,0 -40,-20 0,-40 40,-20" fill="rgba(0,0,0,0.3)">
+        <animate attributeName="opacity" values="0.4; 0.1; 0.4" dur="3.8s" repeatCount="indefinite" />
+      </polygon>
+    </g>
+
+    <g id="node-front">
+      <animateTransform attributeName="transform" type="translate" values="200,256; 200,246; 200,256" dur="3.8s" repeatCount="indefinite" />
+
+      <line x1="-40" y1="-20" x2="0" y2="-40" stroke="#111214" stroke-width="2" opacity="0.4" stroke-dasharray="3,3" />
+      <line x1="40" y1="-20" x2="0" y2="-40" stroke="#111214" stroke-width="2" opacity="0.4" stroke-dasharray="3,3" />
+      <line x1="0" y1="-40" x2="0" y2="-85" stroke="#111214" stroke-width="2" opacity="0.4" stroke-dasharray="3,3" />
+
+      <polygon points="0,0 -40,-20 -40,-65 0,-45" fill="rgba(200,200,200,0.1)" />
+      <polygon points="0,0 40,-20 40,-65 0,-45" fill="rgba(200,200,200,0.05)" />
+      <polygon points="0,-45 -40,-65 0,-85 40,-65" fill="rgba(200,200,200,0.15)" />
+
+      <g stroke="#3E434A" stroke-width="2" stroke-linejoin="round" fill="none" stroke-dasharray="6,4">
+        <animate attributeName="stroke-dashoffset" from="20" to="0" dur="1s" repeatCount="indefinite" />
+        <polygon points="0,0 -40,-20 -40,-65 0,-45" />
+        <polygon points="0,0 40,-20 40,-65 0,-45" />
+        <polygon points="0,-45 -40,-65 0,-85 40,-65" />
+      </g>
+
+      <polygon points="0,0 -40,-20 0,-40 40,-20" fill="#00E5FF" opacity="0.5" filter="url(#glow-strong)">
+        <animateTransform attributeName="transform" type="translate" values="0,-5; 0,-45; 0,-5" dur="2.5s" repeatCount="indefinite" />
+        <animate attributeName="opacity" values="0; 0.6; 0.6; 0" keyTimes="0; 0.2; 0.8; 1" dur="2.5s" repeatCount="indefinite" />
+      </polygon>
+    </g>
+
+  </g>
+</svg>
\ No newline at end of file
diff --git a/client/public/icons/prime.svg b/client/public/icons/prime.svg
new file mode 100644
index 0000000..8e0ecca
--- /dev/null
+++ b/client/public/icons/prime.svg
@@ -0,0 +1,144 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <defs>
+
+    <style>
+
+      @keyframes orbitRotate {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+
+      @keyframes nebulaPulse {
+        0%, 100% {
+          transform: scale(1);
+          filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.6));
+        }
+        50% {
+          transform: scale(1.02);
+          filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.8));
+        }
+      }
+
+
+      @keyframes dataStream {
+        to { stroke-dashoffset: -40; }
+      }
+
+
+      @keyframes float {
+        0%, 100% { transform: translateY(0); opacity: 0.8; }
+        50% { transform: translateY(-4px); opacity: 1; }
+      }
+
+      .orbit-ring {
+        transform-origin: 100px 100px;
+        animation: orbitRotate 12s linear infinite;
+      }
+
+      .orbit-ring-reverse {
+        transform-origin: 100px 100px;
+        animation: orbitRotate 8s linear infinite reverse;
+      }
+
+      .prime-core {
+        transform-origin: 100px 100px;
+        animation: nebulaPulse 4s ease-in-out infinite;
+      }
+
+      .stream-line {
+        stroke-dasharray: 6 6;
+        animation: dataStream 1.5s linear infinite;
+      }
+
+      .crown-dot {
+        animation: float 2s ease-in-out infinite;
+      }
+      .crown-dot:nth-child(2) { animation-delay: 0.5s; }
+      .crown-dot:nth-child(3) { animation-delay: 1s; }
+
+      .prime-text {
+        font-family: 'Courier New', monospace;
+        letter-spacing: 3px;
+
+      }
+    </style>
+
+
+
+
+    <linearGradient id="platinumGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f8fafc" />
+      <stop offset="40%" stop-color="#e2e8f0" />
+      <stop offset="100%" stop-color="#94a3b8" /> 
+    </linearGradient>
+
+
+    <linearGradient id="royalGradient" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#7c3aed" />
+      <stop offset="100%" stop-color="#d946ef" />
+    </linearGradient>
+
+
+    <linearGradient id="voidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#2e1065" />
+      <stop offset="100%" stop-color="#0f172a" />
+    </linearGradient>
+  </defs>
+
+
+
+
+  <path d="M20 50 V20 H50 M150 20 H180 V50 M180 150 V180 H150 M50 180 H20 V150"
+        stroke="#475569" stroke-width="1" fill="none" opacity="0.5"/>
+
+
+  <circle cx="100" cy="100" r="85" stroke="#334155" stroke-width="0.5" fill="none" opacity="0.3"/>
+
+
+  <g class="orbit-ring">
+      <circle cx="100" cy="100" r="78" fill="none" stroke="url(#royalGradient)" stroke-width="1.5"
+              stroke-dasharray="20 120" stroke-linecap="round" />
+      <circle cx="100" cy="100" r="78" fill="none" stroke="url(#royalGradient)" stroke-width="0.5"
+              stroke-dasharray="2 10" opacity="0.5"/>
+  </g>
+
+
+  <g class="orbit-ring-reverse">
+      <circle cx="100" cy="100" r="62" fill="none" stroke="#e2e8f0" stroke-width="1"
+              stroke-dasharray="40 80" opacity="0.4" />
+
+      <circle cx="100" cy="38" r="2" fill="#d946ef" />
+      <circle cx="100" cy="162" r="2" fill="#d946ef" />
+  </g>
+
+
+  <g class="prime-core">
+
+      <path d="M100 50 L145 75 V125 L100 150 L55 125 V75 Z"
+            fill="url(#voidGradient)" stroke="url(#platinumGradient)" stroke-width="2" />
+
+
+      <path d="M55 75 L100 85 M145 75 L100 85 M100 150 V120"
+            stroke="#a855f7" stroke-width="1" opacity="0.6"/>
+
+
+      <g transform="translate(0, -5)">
+          <circle cx="100" cy="40" r="3" fill="#f8fafc" class="crown-dot" />
+          <circle cx="85" cy="46" r="2" fill="#d946ef" class="crown-dot" />
+          <circle cx="115" cy="46" r="2" fill="#d946ef" class="crown-dot" />
+      </g>
+
+
+      <path d="M80 135 H120" stroke="#d946ef" stroke-width="3" stroke-linecap="round"
+            class="stream-line" />
+  </g>
+
+
+  <text x="100" y="108" text-anchor="middle" font-size="36" font-weight="900"
+        fill="url(#platinumGradient)" class="prime-text">KVM</text>
+
+
+  <rect x="90" y="122" width="20" height="2" rx="1" fill="#a855f7" opacity="0.8" />
+
+</svg>
diff --git a/client/public/icons/pro.svg b/client/public/icons/pro.svg
new file mode 100644
index 0000000..50fb10e
--- /dev/null
+++ b/client/public/icons/pro.svg
@@ -0,0 +1,114 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <defs>
+
+    <style>
+
+      @keyframes spinSlow {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      @keyframes spinReverse {
+        from { transform: rotate(360deg); }
+        to { transform: rotate(0deg); }
+      }
+
+
+      @keyframes corePulse {
+        0%, 100% {
+          transform: scale(1);
+          filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.5));
+        }
+        50% {
+          transform: scale(1.05);
+          filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.9));
+        }
+      }
+
+
+      @keyframes circuitFlow {
+        to { stroke-dashoffset: -20; }
+      }
+
+
+      @keyframes glitchText {
+        0%, 90%, 100% { opacity: 1; transform: translate(0); }
+        92% { opacity: 0.8; transform: translate(-2px, 1px); }
+        94% { opacity: 1; transform: translate(2px, -1px); }
+        96% { opacity: 0.5; transform: translate(0); }
+      }
+
+
+      .ring-outer {
+        transform-origin: 100px 100px;
+        animation: spinSlow 10s linear infinite;
+      }
+
+      .ring-inner {
+        transform-origin: 100px 100px;
+        animation: spinReverse 6s linear infinite;
+      }
+
+      .core-hex {
+        transform-origin: 100px 100px;
+        animation: corePulse 3s ease-in-out infinite;
+      }
+
+      .circuit-line {
+        stroke-dasharray: 4 4;
+        animation: circuitFlow 1s linear infinite;
+      }
+
+      .pro-text {
+        font-family: 'Courier New', monospace;
+        animation: glitchText 4s infinite;
+      }
+    </style>
+
+
+    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#fde047" />
+      <stop offset="100%" stop-color="#eab308" />
+    </linearGradient>
+  </defs>
+
+
+  <path d="M20 100 H180 M100 20 V180" stroke="#334155" stroke-width="1" />
+  <circle cx="100" cy="100" r="80" stroke="#334155" stroke-width="1" fill="none"/>
+
+
+  <circle cx="100" cy="100" r="75" fill="none" stroke="#0e7490" stroke-width="2"
+          stroke-dasharray="20 40" stroke-opacity="0.5" class="ring-outer" />
+
+  <circle cx="100" cy="100" r="65" fill="none" stroke="#0ea5e9" stroke-width="1.5"
+          stroke-dasharray="60 100" class="ring-outer" style="animation-duration: 15s; opacity: 0.3;" />
+
+
+  <g class="ring-inner">
+      <circle cx="100" cy="100" r="55" fill="none" stroke="#64748b" stroke-width="1" stroke-dasharray="2 8" />
+      <rect x="98" y="42" width="4" height="4" fill="#22d3ee" />
+      <rect x="98" y="154" width="4" height="4" fill="#22d3ee" />
+  </g>
+
+
+  <g class="core-hex">
+
+      <path d="M100 55 L138.9 77.5 L138.9 122.5 L100 145 L61.1 122.5 L61.1 77.5 Z"
+            fill="#0f172a" stroke="url(#goldGradient)" stroke-width="3" />
+
+
+      <path d="M100 60 L134 80 L134 120 L100 140 L66 120 L66 80 Z"
+            fill="url(#goldGradient)" opacity="0.1" />
+
+
+      <path d="M61.1 77.5 L40 65 M138.9 77.5 L160 65 M100 145 L100 165"
+            stroke="#eab308" stroke-width="2" class="circuit-line" />
+  </g>
+
+
+  <text x="100" y="108" text-anchor="middle" font-size="32" font-weight="900"
+        fill="url(#goldGradient)" class="pro-text" letter-spacing="2">LXC</text>
+
+
+  <rect x="80" y="125" width="40" height="4" rx="2" fill="#22d3ee" opacity="0.8" />
+
+</svg>
diff --git a/client/public/incudal_logo.webp b/client/public/incudal_logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1bd5fc3be84b44eeb19b937073b84383f1dd5d70
GIT binary patch
literal 56512
zcmd42_g7QT7dD!N79a>xqzQy7f<k}~(n;uDiXbYziPC#72~B#CB27R+T2P8eZxN(7
z1?jy@4ZV}ReBZn7Z}$(lYt30_tyyQzo|!$f_kNz)W1yj`T0aW_7^^7iJ=c?bK>+{&
zXl@@t(*G3&Z9VmxrvLzu5Lx2PI=D0(;Cm(wxch!3eRc{O5go0Z%&(Dbp!u-Spm6N-
z12y-VCyC93$zJh|X)!K7WC`Kv)-UojlU<7f218_Ze^p`X8zT7vcCV;d$nejacCQPc
z`}#u({bSP_>1Fzq|CTZ0b%lgI_nBJzr{8y*h8$my2=av8y_=99#?n;sqB4%cnz73F
z>!)ZgD2O7=D|Mbe$vjzGRBXb3XNE)K=UE7Sd#YH)-J3iB*?XR*SjmsqpU7mGcUlmQ
zgv5p0YUDpS;pqQoh49W>$cLNv%d4jH+{s)Pa?UZ2H8WS?OYgDlI<t8ev{w@ImHQLd
z#a?IsI&Se~h1tJHvl41#3eda-2|{b)u{w$ST;a3O-W3H>sNhb(%GUZ1*7u)+`woH4
zi0i?f(~3qhZtD8Prj6^ruKr0tT1CEOr6c>39|?~ZMQw5kqel|FQK_8Y%W#gGXy{^A
z-n`paB(2_iKqfi4Kk1oJ>*w(V$l^#rQFHBB1pfyf01*+e{V*;sV{%m$;C7PUIw~j&
z-G@A+BjrPp|6J5XOGq)E$EhvcjJbAGA`jq<D!o{|D{dP@e$nYoXKv~}Kp9Uk0rC-!
z93{N|5?`4fu?dm^b_h?A3g5TO$V*`s4%)+EY%g8eg%Jc98+9x5NHNDeCS#6S&&;Ci
zJPU8dk0#eR?>oTg1$c8s!IL{%o#J!CyDF9;{0E@|`a2|~myT;4&hC;GKG$FDC$3|<
z`R@@nl4JK5MN$?-&Q7&PteOo6PlPL;MgXj$s6G=Y5g>Go_2-j3GYiIdIMYFK+*f&$
zWs66!%eukV=JCkg<x7#XM>wM4w&`%FRF%t9W1IVxTH;UrLv<BF=b<TB*`CC&dGl!$
zV+~o37B{^_pkr4S1NP?AP~U|@A?0+J#??KGD~K3W;S_fOjXkowP~tF~Vj|lx?O)M4
zB8jCNZZj7pf+*nYB)Yq-8tON@rdY}3{2*A!O&m|ue^~Cs5FbLC_foy#P2n>M>VT+w
zV7wVL2?1!&do??1zS8b?FxlO@kaG61jwBMbOIiHiyG4UtIpLeEbV)Qhcj)U5$`qCr
ztcfXn{ZDX=WCe=&e6{D<ATy&|9IMNP?V3*>QgXN-0<U-M{rbnf<ni3>&3@ej-U$Ee
z3oUxq#iPJ=(}gUGs)pk=v5CNaKg7ocl6E3_snf21UVe|~@Qdw_?L~;x5kBUE_n2OM
z5A7A4%dE^QV<!BaRtDPwmV<D>4(u<yFpee7ed$O2$$H*Zy&J22NMoT?()w1nyol=x
zxzJ+!<#_PH`DB))-@1YGL`(MLo}G4Hn)#vDnb8j(R@L?RTx#k&0W^$mM5yEzjyWSb
z(Ks=)iffNw+|6E`bc<ApUqgJfrz888YqK}9$!I1?Age$W&O);4CrR(}2a|<MIy5ks
zvKgQY(s0?{Da$r}GcZ<bLFg^w<^z)c1M%_5BANd!Vm2Q9R~&9#Ub_*l!>$y)WbZOJ
zP%e3Y-Qj_3owSIyU({!Iw(Irx?xnDd{vQiRN>6~yNRALo*!hI7gm@9i(!Kv1&ZVDA
zdr_f-n#d}6#vZK|*}A+QBYeFMjOR>PDj`m~+WUM!CA7#e;Wdc=X6d(|!Mym6J1P~>
zi*0;2Eh_YT&4I7AVc89c#sYYv3a#Iix?UNh<9#@Vj01bwD6i-ML`pq?>wTp~1u(R3
zdu*>uvOW#dX1An|rs;6hu(xRYk8M2mR<Ccy+-;bmQg;Y@g=LOrFu^fd{AZ&nVseq|
zd#g`_<~%i&?ssW=2Op~4Ly>*9Vq~XyKDlqL1ui?7PG`K)M?kSmiGh$r0=}2qtj0<(
z-J$j5omdZ+QKLgN0+QUpG5h<2&yv7|+fg4K5h-nl9~zYubh?Os#_|k>G2HeR{?-$a
zB=Q5%0sBn@%`>~&5`SC@Nb8RewthM9DYB_B*?u*%vS`@2f<L(lCudBfWtuAJ-+SxD
zSz6!f*|)vz2~Caz6MZHo4b2>zV<IasH5;BNMiHaTWC5ZBvgc!HpCXWcfvcapD;Kfo
zZ<Pp0!3%oQCqqmobRiz%Y@_MBM~jijh&VMgN_!E7YRS`n+h1Rq;@EKYj>sGk1-Vv<
zNMf{vBCl(G`NkTN&jS7$9g)Ezh}nUSepvo{?KI$-<HIx^_l({`*79I~yYbwG>MyJB
zm{-Kyqf7BwQ`rG>m$|g+J!~)WJCoXP9=c?nuL_fQb<*>Yp5rTU_095MR!0hQr=%Bw
zyg@Tj_7lswsg!&T`o3*#y+pK=XQ@nlF#cnq&{i2bRZa1PP-jLa(fSfaFgek{y@e-5
zKO@m2Hs%XPG@Z%uac?x(u{3%;_~SPPl&lR!+x8)?6#z?iNOBxMY#&6;B;A5fXp$LO
z;!0=sp74FC8I@mYv(Av<UQ*(|+@3R^eupNq+Qhtt=g!?ustH*U0=Q6_^I_ddj>+`M
zXU_DuIo~_?&qqL{y+fO9;_iC<dqGR-bM{p6Bl&7CPSFV#rp6nJ3gtyd<-T=m3Zj}Z
zpnclIDIEK@i<bh_c;?3F9!%+lfq^<;38*zL`+Kn+zWG50J{R-|2-{C(qT=MSwf6}P
zH1-tux3YY>oqMxZ38UfFZM&RuG%*mGTp1}S{-z}h)u$cA1=t5k|6XzE8hp{{3j+cL
zP#LK*-!CJ#Uzz%K7tRF8&x^lVB*|BH_zu6P!;#~T%BkOM6+XKsSxo%=avz$6f8`VU
z?EZ*`xY^A#uKQ<rdM1Bb7NFX8o2<@ftPzo@WrjaS&qJuAtzT*=FaAVC>UdU^#f3{A
z6b=gwu_CQLabYz%`DmEF&kk32jYYbO?$V{Rb0Aa-U+I68X<V)vYQ*ZuE_FKlE0-FB
zbaBIH6OC><v;X;bi4qZ6@!m%fllKm#^F3*VCTL0MX4E!Vvg?*k5GPy3Jgo@)UM=FY
zl=*k^?D_GU2*6*1_r3<mAA3kP(Jab$XYiL!UGu>^1z-w4khL?)HiWQohOVIM{gtVY
zb~@t%ihMC_zYDbj>F*FOT@0Rekyx9~Ui=GVliL5p#aTH*MY}u;IwWF+w-xh3o{j!F
z>Z%15I&U7M#U9k!nf~h>Gr#!bZu`7FISDl^FH`=9#LV=@Igbzod(Z!tGHKQKagL{w
z^z8Ch7rZe5OPp-j4kBji{aNAiHpc8zAs)5sAHnaQ9Yxc=ag^uti}S;ANok&IA9pP8
zS1*!eKqm4=%e<*o{ztM)tIxQrIh064m3)R33XEc?T#3WsN@9ov%GcM0?~tQVOa_I5
zSmLOC<bLso+0iA%hvhEU9~p@JHBV_<Smm3m<?iJF`X&*a+QGk81~AFxFxd`!P~N&R
zssN!Vlp%+ZO3Y6%ywh2})WDTX#X~<w2qRvH92NWe{%y33i4)GO9ieQ72`-_?X;?C3
zJ`a&-Itclnrvo{OqeohrQN&DBW4ab5j8J#+$LL41645|K%fcpWBF?3$>g9u47Dgs_
zDv8#X3QI5#jVk#<cmxESaxC0XC3PpJe)^!owb<$5%;i&Ellv4gVk@~8{?qBg$ZC`I
z`M*hb!fg2lUim1$VCJUo-5hkCf5D1>Q-7GN5)9R4e#V3Fxll?UYy6~!!J`J%m_;92
zfU%Iv3HaY+kDqspWi|__UQ+YvuOA~63FE`;du~>DCSWdoiqt%S=UquCZ20?y!^86;
zN$e5}`>ZTD*P7W*hYpN_wGlS|l>SyV^*u6aJLW9dalqFNzc$?hu?UU*=d%^t%zwIe
zZ*_N3(Cp+PV_yj?JQOztQm3^uVgSmYO*~j}Y-dWKvmb!(NEP=9C<USjj(-Mvsf7IQ
zPAr_-aIh06^AA&qoqTJod%O~MuiR&3EBv;3G^bI>0i+Za4ws*$t&HAo%)6YI1?~65
zf5!{~=dp-liRP)%j~)sX>FnM(YI_ly<&Q<8eGBwp1Q)X(Mr;K{Ut^PJ8qDt+{k;mc
z|8Ani%gposhv@AY9DZMdT9x^wrQ(I0h1~2|>K*m^#u%+?gyPGWA7uzPqs~I~chOC|
z;Y2rlfFnB|7%JidMZ_^X@_|C(_Cr^K2Mh2pf8Y_2U5~JyUg4ll!m&K0CP7cb1A-XJ
zi^kgd@mk)%hwpE+-*Ml_5gbhBO49eahXm*XsU9`hIdw&{E{~tp-Gd;a0Mr74C}I#Q
zW_7?MeVl}K_Sae9-8E0Eck;XCo>ozpj__n<=DG0WajH#N$2T~;Xx}D#$N5oB7gT90
z(Y$A+-`>*l5i<uFlj)6@cIp%_Q+<U9mZq+i`o-t?brBl;w*z3*K)s52{?}Zn@OjAt
zte(u~14Ky>9|Ur>7{X}&Cdir_$=_Cy!EWtmYo;$1(jQOLLFCx)9hgf2`%n9((9{>!
z<AxLd^nG@zcm>cgSJv;XW>3nrRs1zyd*RFgtFTu0)7aGS^WG@~GHuNqO$4c9D7~K^
z$o<Q08@<+eoy{3#@`01TzlFj2-vuznBPi+fX;-I;Kz9q9b^V@+<(G&o$9t*Uqze=<
zTfU&j%2FZwyEGl=7u*j`PyHKQpudvXkE-~G$(Rk;aOvCMT_c&M7hbPM)So1Hn1v>N
z_P?XZ!ui?V=dRuPyo4fzsv>p!=`guyGr#@^_{FQ}&-e?ExfrNY$D_VuRFr+cPjxs%
ztlztMotXJGvd_cbf?8CT2-<0~z=|T(|3EGF7j9O*9qP#wxf4x6q!1Nl-{&2ED{?DO
zXku-iU4xVGH2U+>9}lyo7J@4@{cY2atF5xeSEhvqjc<4A_uO-8%2|4Dy{qrdJpTH7
zw_4MYmd%uqKS6e7t4r?iW*wggZ>@b;ei_4B5wbKB{E}A#7d!F5&b0HrmTpjRq(sUT
zCSBSQ6S&-1br$3^8xFK>Yb=#22OMnB{m<8ih3S7hH^W)X&>J7re=rH@3mAZ+K)s7I
z1uI8tqc*pb8tlg2YkKAW6RQV=5soNx${mW2h9>TvF_S`xbItPPL^wU!KY!;Qlii#u
zB#GceFzw*IGy^d#-FC0?UWo&iXGv8({>7DTjqF|TztNY%*S1F0zaIF@5Z)tM$EjZ1
z;-R91+2R}XSeS-G4t(EP!mhgQ>1Kwg(Ll`Xo4i)b^!Lai6227pVSk`;w~=`H`p84i
z5RC{#C=m>$dnZUHSn<aH)5QVBoe95_qc;Df-wR2^>|T}!ySopK#aA54KQ<BZW*ig3
zh(F22Jt&-OD_@K8nDgEo>KuF~0pV&!oi~vtzf;@`CqJnwODtu(IzBBRp&_6ZLF86X
z>NmgjkL+2DpYqsU;+Icn;B#qY1?RY40P+2+iw4#$vy-^8-NuVKXL6<t#HlY$r=s8P
zl~dnj*ZD#!%LzRO>sFeWookY<2Y7V%Fth_;n-53|3Lc(pte-A?z3h8~WcK4ZAn>Eq
zpkGEQi^sbOMTyL7jan9){qqB?NNwc#%<@N7pnir#X=`I)NPGO?OEe$?II;k9e@d?B
z5is-a8J{g)d{boj!|r;b!Cdu++@yU=OGU*{EmB&rl60-l&|HF%pu0`?P2L_o!SZ37
z$5Y?nEsNv^rw@AmE}NZ&EUq_v3fJMmAss}!Z;jJvCE!0W3+H64Oi#{_v~~~L3f3{{
z0K+Jmv*oQu#$$zc_ym#0g08Q`^St_~?4qC+U%gMEcbKr)Jc|X{qSFPvz&Sxs+S<C%
za#t_ztL{KJUaAM?!8)HQ`eYZQu{>SG3SUS<^57dtKM^PE;7<Q`?&bM*H~|@G-GjU7
znkb{lR`LYNWmoYZWvU*s8KZy9pDbZQ&@_{9GAnl3<$);lgYoN?Etim#SaRPrM|iF{
zM0*n6jezcV*9CdG7L?s_|K=-ObxGezy3DZyj6j+a8Xr{bMH610JeyZYUCZ_?)qmEC
z*J7eozfR$$vsCrj{Tee^x<#E{9%^ZKr`d{>9<LA<){8~F@LAK!d3dJl5Ol8eRlDv7
z!$e}BurB-3&kndIbRXPNz0{jnKiyGt(%isl&yGkUyYbwIM$waA!0*jXWa7!h;a5^1
z!49)&Ov`3RULw$s#_~M$9$5b)Wbf7aa$!~3yj$iUW8H-pu%VQw1wz-CD(}6#k;^_=
zAphdJk7?1$yphyUw!nSA?V=%4<8SXb{lvAbr7fV;_V>Id>O<9MSSg9~A)zm)OS7A0
z-wknqpN7n(l=el>6b*fB3jOVgKSm~pQ*vx$F6@7_U70oPO>4?-eWnf>MCHJ>+fRi8
zTV-}JkC(gLsc&Eze$7K1P}|9>VZJ(BJbA&qg%eVMVfj)p7p@0bX?9?jJRQ@ywL^{8
zvjvn_+C4=7WI4$pK|V*u#!aE^@A?hDIEOiAk7pN4hRTb;6!8Dhqbz0ov%J1--z5c!
zlVCsa!BD!+i-M!#gbGiBJqLj}|Na6}%Uk|%^A!z`<pv{c35~xV`j$|N0W(e{goHph
zey%Efgxdi`AzyvxcXi&Lg&r>nRK^ldc#SoM@>=@QNQY)10OXMC%YPA<^_M@#EX0F1
zpOf3D%b@8gVX{0ALJ0>`2i^n;99}kJdAIg?pI7LAPyh-mna2V~KtqCkgG|>JS-R#3
zr;Q54EL%Z)b<MtKlPqU#j-ifnim6M(S_#_Q5icpJQ8XKYf;)M>!@T0<u|LJ1UiLtQ
zXe=LWcu&+5=2%&2J|VLOzjVQC##s*+haEw-tJOGNhxoF4uZo5)50Eg_uL}!3$@=vK
zaveh1xUq!3X_QQwXZll%thKNg#JORF-Id&0L-DY(TT^`fEt<145{td&;Ft^6$hpe<
zA=_5yB*CC5t`lS*_(7SJ>HKI)D$*ld%c8aDVY$4z#gR@J<6-{fP$*Q1t8NSb>I|NF
zzzXf#FEp@WpE3au4bU(uEBPfG4SN@rQJ4noB<Mbd>u|vUnUVxb$bgeuNA|NOF+zBz
z44{m@$4l<`1|UkriOm)QFp+*o@t%2)8&cJ4AKB>!wX`5<NY_dJUE71`kZ0TQdJNwU
zVdS#i93=oUZQL9mu6vM-h1ims0-E`s+}iX&EzfBqvcI$Y?T6vyU~(A3l!*=o1#T~#
zkF3=YgsTau0>oRc0XA)CmOb41kK8%`gJD<5e49NTl}s--w)kenT(j$cvqlCl$a;HM
zU&%Zc#xWw7ofi|@Hdx9tYVP_AEh;jFj5^ZE7%+smE1f-vIkRMhkrU@u!{=v`JwjJ9
ziBdPI2k<gNE}@q0@UV6g2qgY`akwH;qd~LvQe#*M9?4lr$*95}zmwRIVlpeWg`0hh
zHjFYkL&~H(HsLygRl~^4dU#}$?q4kb6e-ngsdwL*v)Du3Px2F*RRlp6kEiRJwxci&
zK4f;6=&l^@QCa*qDt4H*DV9pMNBj4g_wXdCaSUVK>_M<_6pZ?xViY-yI^TD&<8e8^
zm{s^!Szk}3|7-{AH+-_lsKKL=lteVh9$Z$a*0-`|R!^MFj4U~=A~~Z^uPik7O1@c^
zPDTHSI}p(OE?Y=TMSs;HFqa^&5Ct11nGe@iOorBZbQztL=L?PfmfAk62E!D9JBsVT
z2u_r7vYAxb<5=m|i+)%iZX_arapH&W%ajaG7*Wa&h%f3Ms5yvmC?maPwr1+^_v=Zx
zsyhgz)QBX90Ik)lHX2yPjBnBkw9odvYn;!5rngn96hO<0LOj~geL&yt_1;fuW9AKq
z2lB_$^0FPznMW#gTXVG#Mc-M2PR7MtA&bmI0pH7V+pG*tFYei^>Rh&R#9MvUJ`a=7
zFG}x)MO7&xT+X)5#H-5O9Ct3>n2pCReWd~GPR;W`l9woZh{N9*w@sLt^nP$?K0UCr
zmxEH-AQah?`aD4$@k?beSVwYr-hy0tt-;{f54l`%B9Q@cfJW*r)&86FFf1iXvewqR
z&*)2Mx^`Zh5&M3|e;<L(pMva3yDFbUVd$W}<1F6?MP`MWaVCuxbGc-h092H46iS<3
zD^>zV{oM-kdhy}Caf!C#>e}|NuLsm(BzTC32AIaP__rxxQPrfRQ4rz%DLc7M3egF#
zvuv$1{T7T(*+OFh_cP`X4*vpdZBP!+V}5#zRXBO2S<=l<OCSvg!>~_xgK)|9?frIL
za)iNh(AYN+j<e1YZ<9V@>`|D-7b*=FEpq@8!F~{KvRQ15Kd(8sX3V@(t}4wUfh9d6
zbbrt7s;BKA)Baffx&r7YhIvVKOV;&K35B|Q1Y(v2MnjJJK9Z%-SYph9L@1h`<iX*D
z-uhUK-%fv7$@CzH#ns>X%f3>>(G%C*eq-Dsna^NgNdaGZ(pE<6+yldt%j+1NtE)$v
zu8`;MM-mfKWrhk_?Be)YfU1#X!?b=%n-J9hYXF(>QWc(q!@0tpLA(6qv+JExR`TdA
zGa@m>bld(=fN^Q+Uj5aa1$7{idgT^d5>{*V+SRjsGhXn$={kndmyZdFD$bf90-+{i
z85<4Cm-+Y1D^K;t!}aByEP39g%ZrxRe&_e>WwZFm@@4wPB4-}K^Wd-6w%M8<=4vhl
za5!&h#sfUR5!@^HO;Zr^?u_TS!xL4a`Gk`qeA_%{c1r;1ARQn-J5B~geR1Go1|!@8
zI(DkOtIGCETaL2vVL@Rf(odr9y;kpy5f}C?6!14)adyQA{a*d~o5tWIDVB$v7>d94
z*jmff%&D(E%GG&^CX*#qH)O~b`C|Vj<)+HRn$IUq@}S;0R6au-Q$iA1%{t#&UUXRW
zdgmt3Nrt;}OQ68b=}(7o?XR@|gv#6Ya#F}?^BXafq^Hd==@o(325e#<oTXBWFJHAc
zSI+La=CY+@;$vh2%;&P0pkk%5njfF(ov+Nr>{gW_nU6Z<u{2}jA-D9J7DYH^<4Bs&
zrj~t>@9GcYs0c$H5>X&Kgh{e?f6OG?ltioOrmOCjX=aLca0G&GUn^xCOrxn7Lyd(7
zC)d2<08<v(s+Bp%WzE#{<Qemu3qN)vG`XJ3L|C`XXnFgu!lren|1yg)rhGjo!+Q?#
zf|?^XuPd&~IEaqMY>~I;2R8+*j)H0<>9Z$$d&H1|67~ri^G_|5#R+et1(jyc(LT>$
z3>rqZmN5Vz{k_v44Sm$<o4H3ve?~zz>ScVa27c<27c+IbKc4&5ckPvWqNzb3t7rjF
zau`I}rGs+CVTIz3F=4$5m{O9+c(aXji4znzFdLPh`*22Ubo8X&=Agq&+?_<#G<2{j
zn@-7axL@h}Nz06hSosLoT#XxH3Rr?6Vm`)&9(`zxr7&LbUa%)iSl*Ie<&-+ycBI>S
zmPRWy7cetB$HbH?5O4&7{l+H0WqW9R_b%Gs>0-#{rM{uJE5Mvbtu4gK$@C)0p>6G3
z%?E%YxGbLzM7*eRdG@&BbM+siCtp-UeWb}i`X{b8d9#_NwmtEo4x9LoRCfXN-Nr3$
z!Oo_ci=xgF!IcTtk)TR^9&Y!|QzNdwI<F3m%Rg};F!&BVPUaVfeJ_mNe+SHbTzlsU
zR#Kt?q@o^PY=_Tu{e4bb@3pdGqDujbx~Bku(M%ELnN4JrGeu{!&%6EmDgn9Rq$kBD
zNkFCW{fu(r<y_EF?}hEMcx$B$FewFu+=}Iel((WIX6M#K2L<LMX{?kqw#`{h7}L)j
z$^$OapIs1h`|<P2v}KQ(S#*^#!*^3!+5wNeke}T4a~>8vTWcK9xuPI}fnvxluNckr
za~<n_PP0M^CL=&#OZL$HrsA&Gea_{t2ZAlwem?Lkn7pNbLA=HDdoKN{6Am1+!Lov!
zQTI5NnPY%ca`306-gaUWKHDE_q*4H^?N~Azh!Qlp+R;2iR@&&E=Vszd_=ZSW0&UXQ
z>_3@4YZYGIW!ZPm1a*JwtDa(ob?b`zO*hLQ;`W|D<zKZ#q6p4D!~e9U1Y38?<U}Er
zNFva{{(ZkQ3gg;7)6>2!?r^5|FG;slxp@QJc$nE@yHBs&XJ;38!`lp&W4T3Fy+c7B
zzG}f!y>{%T!H+np!M2=aG@XYatMEA27_*lTJ?G-l6S;k$C@c|$6cT|%d@o>y@06qa
zRo!n+`tLj-7K}UzJ##bW6Qb^9!|e{<1HYt@xfnhE<IY^Nm-P-lpMLfNtH?A?xC(2U
z5wl}YZ?GD)x?7vdNrC<F(%8OF`XmKDH4l%L2*QGBELB6U`fbcIy9%XULjwMkHY1Rc
zf)Ft!K={?Yr*8-AMdQnuWe8652yiplEI^wygs`2$YBp7P@E)DcaSTH7fEa1>C&L$R
zP7`j`MsF;(^`0%59Fpcdjcr6%I1ki+*Vs-yv43P04Jdw@Y)0rD%RE${^~YVc9dn1V
zbxL2|$k~Y6B@IkY1?r|SK@okD%}Xh4u4r^WM|!!`M;_8BuvZoqDkW*}RWz`)#j!gW
zPNrL>cpvPKWE1Q9ASLSiShJa&4yhbHDhqAKnM^!ee{;Tr0D)sZKVATIa94`erAxhf
zZbu#!`=xl`Pa_}W9R)jdt+xi^*Y%(sH3!Z6w(1?LB^s-<G?{Th{zJD08>JVk?>)LN
zkzj)<8yocq!gV_DWT?^PejcIq%R9o+!rqq?ZozZHS4+;jfva%B0muJa@&=sGheNLf
z#|ay4I(pjy@G!-hfUDuq>+b)L66*6LLfMv@umQ)fv~kqS9p(|v(S&nX^jz0_hGPqc
z#Q(KAqiZ_)zrWx7JIHY7e>HX0w!wNl{{L65!}+J44#EYRply>wqP(h>YC^~(JW;$H
z4$b~Vb&uvJ{Qvo9$YO5?!RRwAUlITLJ-x@Ms-E87Pmk`dPd&G%soeZOTu+y1Y}{UD
z7C3Wr{`pDP&z2pGP;Pi@m-s=4Sozz&TV_FU4v1^DpUpWN#Kq;`o+hE{{KGBU%GJxR
zk9m-KhZ`!;w!hZDe5kUO7JkEd_cl^^_N`oY$$>Apz9kP?Le6@96RtsJ7hUf%zy@D!
zS?b^fm+ntYJd<|pqbe0a6WrbaXcX=uT0({LlHJ!L>eq60CkVXc%_Pd${jS9-qv{8B
zU2CB9hSjB$mk<Q8GA|AC0%do5jJ0xzxca(wb=4BVqbEsBB$f%43jUWa(QT(0y7@t)
z;>O1m3Q&qrB_a6)tMuF>vKirRJ)Yd4rbc38+lzYhEYN5zKOr%z%jK4vC&~aLd;F`T
z^)CU&S)M00#RGFbMF8+aWSDwl$W70AQ9ZqJ;BfL!5PK3dA{ogfTYb~1Uus}7>(?FV
zNB{{Fb43fprijV3hHUj|KYTpqHuXdN0Ufr0>ob7jHF7n@EYD(sDZS4$V5FE8eTRiz
z<jWT*1rx|=f9F*A!QT(ROs}Y_@8NJNph`|?bUqiFhUNMw`(>T?7fmxEIfwNvpz@-T
z-oFKcrg4to+cEFq3-8bhX5fo{YIeMT*P8pLz^MNMW0NP8=-EFK=H4i3mtFOSk<=!y
zc_0d<!Szo7$ipvn(^;QoU>Gn!sik`wKm&XM1gj^*)7t_q$^=CUvnujDB}Gu_5(tXM
zk25QsOFClR5=EMtEAx1{bO1eolN;cuTJ>;q4!>nrZb*-Absw*j8P;4>h_<F|RtK;H
zRd0bgx;8z+^!03fnmp$l!M|<3&uw%}4`XI>37c*l?PN~c{5WdY;N45Fw-4rgwzEwF
zsDweaqKI~%kgLCGROPlS1~&FCJ%JD_ib<sMvWn<=f2zKF44)W&Z7p!Porc&6YXdOw
zI6ZT<U^9z-+qj-feR@m|V<2&ggjpefX3kZZKHt!M>@CdpPmGwIT<<q2Gn6OdvR22@
zqcGL0yXC0%B$E*YB&C=^lJU2neY*-87k_Ka6_Z^a_?CfdRxp4%_>Y*tt|n(``NdVh
z;G<dYaK(l9!{ucUga2AQamIiC2m{Fjy2?9+bugZVkaU-pt7^Fz6!=2DJpyMkHk$0g
zOF7|()1A?UfXL++!<Ql}g9t;zdrpsy{?iHAd-s!AmWk6s#5RmprujJ1G0Tj+eN6s4
z-?jpDpwf*Rd>c>=?FD-onmVZ0$Q{q^JtL0>R5C(2BZ7Q37^xEl9)4k|2zJlWh=>_$
z+A1t#G3$l49@kKXCxhu(FLvHDZZD4@ifk_1=Zf!g+T8BBqwdCSA-sXkL~G*&Ypz>W
zQt6`aaGSqjLQ{QQ(}uH@I1<bfh_qcCK;epinEh%f+I!F{a~rpEz-W`mXk~s_`{))l
zsmEpG2z&960ssXQa}0n;vUL~L^`i;wdGf67;wF_BoMg4cMGJ!{X<nW_YAhQxbLw<X
z$-UV0GLJ}Aac^~<ic6Uu-OG3Qn=L~H334OX-TO^uR>P>9DT011?KYx?1Zg6PGlq99
zo?NX@#}#N_4OaW!p#ZABX#i)Q+idQBd+U3U(&#_cdjEAh|MOg)p|^U_z@W{V8b+z|
z&8+kgNfCY`PMEIVOQmRQ3&}>mp_YO<746r@N(*O~#49+yOj@W$&py-rnZxVJsB^B)
zF?h>s0`o1Mi4X<#(T0u!^qC~TuU!Z($G!hs(p&LuTPdP|<agUe99g5mo;A0)&uJGi
z9fcYS(vyb|2uf%w>G5i5Jw%%eD~^ha_21N-rj$}KQlG5s-Mk4M3QqzV&~_?H|FBjy
zR@%zP78W^6Km3oF|2|0%Pm*nKYq9j~zVMvfP0HYdqiAdYyNOTmwZqOAhwl@u%x5Lv
z&gX`q-b3jYJM@vaBopmZoS&7UvuwN;`o>B333UvNrU$GOXAK-#?428(Sy_6ud;X4b
zhm{8Cy!IqmvZd*@<h=>)+&W=3^%>Zak9F^_^>|j7F&%tBe`#|s=#`RyRL#{DqbgOI
zX}|brn^YQi<zu4EO1c^IyvfBV9rv3R)*)-+dMX-N{l-#}pI@p&gU`BdF)2_C8}<s>
zt!L#n$~Y?XPT}Am>uaG&AH{acTgjY65LD1Y(L{w)^gF4&k+tB9U)f9spWN<&ArQ`0
zvZsS@wW#bz3OKITGc+Q8eyiLrv#-#lGG6Z5HlK>tAa0MmNTICw=G~E^WxNN^T_lg9
zT>FMQo0u`^NIEv+IA%x!$5<Uknz@=;tVFT8PxQ?b%W}F?M=KtV{mQaZ4Z8B}Zl<A#
zK|#1fy$0*8RJU?c{IL-rYtX))q?CKcd%QLhoJh%&*Ah~H5E<j<PpIMM11EfhzLi`i
zvSY~&lK-wq%Wq>#62+Ux5M~EaTVIFJ^K%EzRr2V`-@ov4<4=g*|AVNHx9WKp96}s<
zHXQ#cDPY4^G^~B5n~ou}_Z>$C+Yr$k+X!RAeT}8gn})mexiexf==nK924=-!VeO+c
zWC(7aU%F0%iJ$iW72z#2qd3uDx0Q(d#IG}IU-Lv>h3>H_EafuTtLbGNu4LY&-+K`d
zWqAQx{eaUYVqyMy5)^nR0ZFrPJgCvW)`4bajQ_OA7b>3I{>7hLAjsXCIC2|KsGwxI
zYc*o8!lf;LU2iqtdzU_-m05wa)$Y&3|23Mqm&dNKbXsWtJDS`VFPYqKCODM%31+wU
z5{uyGoW1fC{&bgi&%!eida=K<bP~+XFI(FX3celts_WG4h%Q^A@6zVZKS8Q$sxw6P
zS5Ht&<W9*ax5u*q#ctju=5Rk8n3YRzuMSi-@UwD#iVU;0tzdO&_JVfzkXPIvK!4ib
zTH*xVc4Q)vUR5u{^DBUblk;Z1)RsRXV*hmNJ-z%t@w<;WLV_mY$?a-Wgs;B|77X(2
zOd3{umi5}l7BU0s!Lo0_$w?U~&Iq{7tzL7pbs!LuUo;sJK{z+=lM$eBGpgMxe^O~-
zsQ(@F!Q%xEMoTXKbrs;u*;s~^s^LU+Kk+$|NfgO*;bJi7#*Jxno<9hw{KS-Ti$Ure
zp0N8UA4F6<;TWc+Nw54lzcAm_%*T@0bus}bn9R3ZSzd5!1!Nigfr-mqe%AH<NDH>$
zsl<Lj(J-BV@x3V)EB_V~RaNdh<Qhy0C5rh}8)GdTQR?QjZId9xGT)UjH+;R?vJcs%
zd(2~tB)=1U)Klm!#B$p8%{R1Wtwdt={oUVBXb{OIZVopxDJ%t69$T#(=m+cw{$X0s
zezc8az?Rv6PUU&~JrdoN$q{QWEqf|=*3XI(D-xnc%lD=$p0I5_D0xiW$98^@S+4!x
zY@!&Q`NiY+BtH=Rbw_jh4;iUCMsr5j3GW#|x6>F|MC?aP6wgz)x$-u>{!K=1Cd_x@
zKw<T#*cY%KE0QNizWF3mYx&LO-tuMH>u)_=8kT%_KaA5@M)~h%h?lkqB}SdNU$MDX
z$cgs+22pBIJyiPLMCg8*llkTxH}dQQ$AKt04`>9WT=mv%MvYGNPp6f$@vsS*hb4%l
zDE4u0MSzEOV3!$>vcAKPpjK@j35-&W>Kji};1p4UyO+r3a$<K#Z$DU@G8wg7QCD0L
zH(0;fSR675*W<w|J`E!#ibtiy<+fJIB?>8;4JPF6$-W2QDtENuvG4Jjio|%sKQ8gH
zfHR3;60EF(y%<l*!i|+~pmd|3w~n#=^;qIFT26a9WL-gj-hGRW{J2@Ijq8x{{d+E;
z%pm;vVQ%BUWeJxo$?dZcCC&#w><_|i#P+!OV+{&8Zk%@YAO7XZo2#)Lr%DiNeB;u*
z5~zXVgP(6`o!s_(*P$ZV=E#zrSdssYEmW42k5pGE*u@|vPU!n68~X8rZzB|j-~n>S
ze3m0>$!=?InNnd~a^Eh1pHXmTf?4`+o$HU~+;uN6_q|sS<W6o59)W|f>g|a0+0VGV
zTN|ApcQ!DnRm<L+9g|drq8++_<s71G<K>>`Q15ZM4r&Lfg7a8SFaOnF{%Gon%dg+9
z;tkEEVrKrZeYHE9`$1BGyr?@g*b++4*n8dEQvJ$6zZ5q2<ZYL5g90s$x(dZ5kEJD3
zJ4JU}(DGrFqyT4^^R0{DokTLfPJ(jp3&z^^<(k6JqApARW;pnJb-o==BBeN258>bM
zvViNp)ln%_n~=ok3Zw0H)`9eUKn>{X%^vk$%h#VOg}r~%^1i`G&}tMH(bnjbo0_*n
zlUXHRn_J}p?po%^yZhn@`pb#7sW~P!-a)U8zr$z80rZDJL;h>&jZ+b3#x&_?IUKu^
zIo<7YiW;Zqc(v{25_%R1?I4>JG89dFy96zGNd&vSe>QABwwO=*7PI|+I7H@sw;l-k
z1)1<G3AE33wefu-K($k!d`$c)VOQIlJt+x1g^b{VxhCB|Uyt=NwDwL|!DU_<Kj$Nc
zk~m8ir_MC3qW*~MZ;p*U^>gmU6)U`kw%5=ilXRc%T8K0ia|#SL`u+Vo)(U{O*V0CR
z3EdqKsSy&GDq`VlX^`8FtgNI;S{)y1D1Dr$*;x9g;_J;yyaau@2%>j0yiI<JU9HgE
z_%>+w4UUPxC(;M~p;1&vEbaFdOFNhuf_!vREbyBz?x7(;cNdj}tkpSVQ+D#;Lk*wD
zR0@{|*tE{hc)=(hB6<(0VnoIiw)H|{Os#M=>raZsOs+VVE|!6owAOcu?J={lL2UkU
zMmM7i{52BraFHvC7<7&OY2@ir8mIZkdDsO;9$#4|S+{l+I@D4mB%sqhNM~X0$;Sy1
z)E%jNb9quAR<6vTQo8=GZNYci=2KD}aWD4$<9^p~zWN$6W2f!YUnPjadg`6rw+w+@
zUFa>d!6)F|becQW_Hl3Hqe7as7;WYJoF|TbhDMEdzy1Kva20T+1Ag>rIWB3x!G?8V
zPhExABmHg5(UA=~*AEAE%Lbha--%mAwHzF($zSc31nH?D@@HG~<{Rn++0v%7^Ilod
z7$8*C8;FhqNA$_(#l7HdPbdxeNyI{z`vavN^GAX(yGyQ5@?g)Pg`Zj<=UJF=r0tn?
zgu~C?f`On%kE|_w_Q5&xH@2Sl(+<sS&f@K+WY-mv!Lgd^QGlR5tnaY4lb3$Xg7|!^
zU;q1$<k(02VF0W1TP%=(vsj=>BU))Jv&S)HJb1JvLKM-wn;Yma?PG`H?~C_;y}5Kh
ziYHPjN*fyLGt+$4WT4Mnh413Ms`hWsk7EAq>vXi!FRK6YPvI+<%sOEOc_<e^=3w+|
zS+=#Yd31isdSh|hoLC02auP*xT}a5pKS=?tqG`CaC_hbm1kGz86&+L0P$ay1yZ2O5
zz_{pD6UTYuL|_M&lKbmJZ2+kG?53?ntguWZu`i?CWqDRd?Gg#fAmjL*1dx3V_6Ws`
zt|V(4?s*-E=i!9?_L0hnQ3T{+zrF8pQ_+x$-R~@S-?po(DPrM){iXQNgSW6kxEjZl
z9n<&4y}Q2*|F46X>(fJ&0)Al6h`Odr|KhJ*BfCXrHx|Td4q?CEn%8nPGkl(4!q?J#
z=r=?+`D3*QJ?t&fsn2{`&hU<u_I8OxU=`^=9SEjm9Q=EL2cN+3YiZYuf0IaZ8YN9m
zat4M#V$#T;yPm}f-`wr8dd5r-MwZQrZIMgBFK)jU{)6z_QVVBI&Hc;wC}$P7313pF
zf+*5=s(M_PiIkSiX1lbU?CuhQg<;%}N;x4~*NwieICT}f#p8_hP$@r6Xi_9^)PKqI
za&UO?TLA&;Cc|#ZZ4ZAQWj}*|=UvPNj;4lB5@iC-Uj=fBeEA&_<Y7ISEm7B4@^#07
z<3-DvmjW0@!bS{&@MsO~ygYsLF0OA-Xf$AD=AAl>_}uehGoVKstUoD&%l%X1ZkSlk
z2KSum4FM2QN@j?B;SCka7XLi2vbJ^nC6D?+jG9sj|1bU|jgbAxuo!QBDH*ZGjn2WB
zwz;1Q;=lNI_S2~qn!OZ^HQ1#Vp7g$V;TBF#l{<Mj`1e-t;Y}YH>yA;e^wtQ0`zBJ~
z<k-@>=SsGV2!4Dbpo9+}UtDPW+T2eYG@IMis^vIir|SWb+%dHE)4pgmiz}{GT|22i
z*t;NWK@szOazouN8&qA}bNF<ok6kT41{boG-FB&bS2Qe2@fOw+ZVI}~9b*bSf-W(x
zr^kF5kk4+YbU?W6;@=_0td$beJcnlQy{8rca!N)3Z4&%)_gF(mNML2+X-329@Xuc~
zONw*|{Becr{NF4eeSf&;Mf)g;uDm6Z{NJ3vaZX$xUTE&m(L7(pCt&Yq23>TSr@o4%
z!|aNdMD8OVBqxM-ESOdujEaC)*`JU-%PQzoNN=@U`ur;#0L;K#BcQyC)q?CeOhQ3y
z`{iCH{5~r^yMndhML&-Ms1JWRy;@{w=sr1F{bnQcz6!|b;MVu@5UEKFIBBUcL<<@D
z-lR9}FGhZir6y0}yz~u{teRJ0h^?8^eI)tY9;C;>p&oXP?Ycnw7MdA0WNZf54{s_Q
z8Xg74rs3vpW-}x)Z@fy^-Oqx@9t1IPSWf;K6qDXwDOvtArgQmk13sJuu~N#wtjJn|
zpW&*g^0Xb}1h~xxy>Ymw5LyJimXVV*V>{q5QYo(JM}3L)_oAC|iBNb703@a?ezid4
z8glc|r2B8TKCd0-sMGFh2uw`>(mR`nrbv;HxBc4dOTMNSBii4pM%E9Y&sK3AV`0H=
zypc~aP~T!d6on_2eIfqQX>s4T+U0(lkG@?|S!l?Lg*_m`sHyjGYVN3FSUK(EEescy
zaZxmE671!8@#GsfosrKitx`Ask?9wJ&Okg98_v^{Gb<gsPW4y_bM7VX>nyb_g2tBc
zN!Yxx_-7{JX()gJd)K7P9?x-NiC-JpDrsrBj8z+pcj<S&@f@CUOtcl@#B`I8_E9@s
zo#Ia=F+AQi#=`PRfO%syRp}R8-OI<NB_ltI9Q*nm11LXXMBcwy{5|q=qOPF?B<>Py
zJ2lSjU-}Aic)@n$;v6qvXok7C^u;F|^77?e+@L<BmKnz6^Na0uGE6noM4|K;(ik+r
z#PfH)1yvVIVVu0Fo=IG%4U*G9rzA;eq1c`?4pTpqV8es0kph=1FIP@9kPlO$QZ-<E
zzOX(w{oXxISf75(Ov<yDBYaV$x$7Z<bkQ@kJZs8qJ706^d_>rX5yISsa8@+P-`OOQ
zm{3dmQL3Mk_cE7>FX5ReV4-fUU`EE#Oht#j^V`|usnP6$##bS33)H$g>M9KNn;%|g
z4`-1IC|E5xt~liP&DNh3ZCY?J1AvO)uUYB>$q_Vup^G!dE)KeCX-%0Ld9HFPjJIj4
z7(NgWpyT&qsdL`K3l5{xu9LdQli3-lc<VBD+Kp7;)UL(6hya7p^|%lGqVv?8E?L>T
zikx^cMQ#Bu-YS$RfLa-!V%4R}0zNn6NrG1Wd}i^qPdTmKedU~t@t7B2AbuBYdm|&?
zYGWvkf%=?Gw4ID{1gnZy5l6wRPOCSKZA}fWcFOUG=r0&B=kU~E-QQd7NQtfY;u1Fy
zOtgFu+c7cecM-raMXQZ4`v+r9C87-nr@|6>EIc9z0H1!EpvL5)h2z4<Sz0xQe)rK-
z1~OV0kw4PmBQepE=R0{e3&y6Bu&FU$xV*1PoBbQ2vevtN1Fi&z>B%2)0y)oeDqLiP
zy7~e7X^uQCq0Tv;I?@=VkGu0m&QSo6$S`5$h9j=1cH(wJY))%fl*5UlN*dEVx{U`L
zJ_}*KB+j^8;lYMWJwdoE6V`l+?fUYS_qx6|>XsQ86NoH$z(+VFKryH6M{IscNc+yN
z{o&%z2#j$AP*m4y|96(Ji%Wb#tdp_KMHxJjS#NL|n2AJjAC;G)1!~QlCsK_kG|xG|
zY|%GER)@=jH-?7d%VuNq`Nys&E6B)_02spor0D|QNY|&aWMpP6G0<fYS&SLGTHUV@
zzRgS0U#rtfXkF@LXeq)l=u2MTcuLe1n;J5+Pb^d|BYql}@z|q7eZ9>L74}ASo_)xn
zW#XeLnO2HQLg|JO&Ra#8jWzD6=yy<wwaTqh(O4RB^k^mZ@13vrl2f@G`sePM|9wEW
zNP^i)V(xt6_QuELzR{N^?JFJJ?k}PY{mzF(wjcUkvL);c?;Cx!=aUr+^_^cWU8h&%
zVxFzJPK(JbNuC=^^!I+op=flU6r3|HU%<VR-{*6irM%m3a+r@9-R~Z67Pm9p$?rS!
z`+H;IJoxe?O7FY<Uh0q}CLX;#&2BQc@qS-L@zWLw(A<xh9XnJW^8N8jeyqR5*69OA
zJ3FK;NEpLpM^A~u)&>VUJKr}NpYUmG;)Sb&n2Ztyp2%jrC+uGA>AM@g#W}Dv*;n+~
zup`DGv`P=S2pba;;>G!~*M|L6IM;s?Jcuz$h#hU{<2>=(MSuEC$2YXv9=Ys5dV9si
z^@Q8TF<&!eLh`irf{c_G!xRbhar^VNpLJ9}vaPIbIZ{XJE9Pf7T=FdIvV`ULn6_W2
z888Bcu*9s6HeA!pL)$h+WmKC=G%H{4<hT+>@+?UeL6v=S2wKr3ZT=}~!sqf!Lqj<x
zbimG4@Jkvj4Q4TgsS&_0b#+CVUX;J3n9dyBtriK&kU%M~wGu-S8Ea=ln=Y{h7^Mlx
zy+4sNmrRYxuIhCBO9SKn=medn66u5QQh}80y!q`GAPOFP3Hh=0d`xHkZV`3jDquk1
zj2J}wU66xqfktgC{xO}oS->ZYXwA0SO>x}p?~k#V`zzCXx;__Nz#`95&{L2V7;P82
z^VUoMq@avhe6zvm<~a{Pm`7lVL^O8LXDHas^jjQ;d$a(TeYSm<wj*x2Pf`h~cHyjL
z{&A8?%_!ye;JUl{Bk;xDPkj<JqJP`gdTSeh#9<zqbr^}I-{G6*Hu@dYUdk}M0P9mR
zN_SsLjcj{Bj#TDt#@g2n<&DrA*)=wv28Pa}foUGn_5bz~wM}#Gs_0+o2tOKLSFvkO
z#2*igQ3+v|y-p;Ac1gZ)YGZiBAP^YjuwgiWC0{_-7=C$rn`sUpqGqu3<4l6d)NCG^
zsEyS-p#O)?*<S>`(POeSOl9>$ut*+{u{paNvTZqZ58}nip4&3mf~=TsSo1j2-Sulq
z`n{e8_@8`AFX7RJKz8=0>s%fBm5mC^FHZesNaZvIy0OY3mbmmYuV4B#rDe<~i*+W4
zhDq7VR@>=k34_1%88EEDH{AVq&ih0Ld<OFZj7+34&j-CigT5>tM4<qsVSO}UV)lsP
zo7>&OU{uxU)y;-;)y6(^B7H7JQUWH9$uYYb8vIsT(kNceL6{744vrciW-#Kr9c=Ya
zDvqbD#@qQ@6UQYFLI?e0*Hlz$v_Y$$ti}Iz>w7!R{%6%S@^PuO@)Q)|)GaZr<CIu{
znX2C%@;AAXjS;{kK}hf5kEas`tKu+k%!>T`^26D+(+vH-R$k=@W*G=!zI!Lo;etaQ
z6Ez(=D7NLB?6td8#_BW6r{KH&egCCK>5;tuFCv!syuCcnJj0OAXuIpg3|%2=B?{rx
z*Kh*d=G)Qowv^d>*VyI@%-7d!B-Grni~UN%+@}R&!z+2}c6Mi^Z^i8C)I41<?cvt$
zG^Fp3#U`Egv$M0Q8MO(yY~|MCAzevDnp_CJ%4-YwLa2(TG=}09@tVI1`2kS1t3rTI
z2>3ZciMsldSCgGJDU41yqSBEbCHcC`H1Y%?44+Q|9bf3RJ^O86QTpeedsH@#D<#vC
z;sIUD1@j0dkgdw|_XV60q^H8cuY;s9s)>%>E&Bx$L<~#@v<&r8R$y)WkYIOHrTaz?
zng&X?;R{b-ZxCE!z*Z0$Fs3KZT<WG#>lO>N>}26yR?6TWe|}+^CK=TowD3W<(J|j)
zL%X}cVo%hHPaVM^>F4COn=OGJR3004`Aa4C9CGJ2rzA~+?=Y~fwW3Ta5tDB=_r>)|
zsa~pHO!n#o94^gfq|;rKBQg9^EZVB%@U>fq30=00u^fYn{w~Aly&c(2AcfL->^-Wr
zpLuf)`!Qvr`ZYD431^Q6xB$YsDrHeLNek7ht@>{njjWn3%W_Rd9#Au#YkuI2ydYZ8
z#@#wAf!+GeQ&-<r3U(TXuLgHDPSL`A5~@bCLUVps#eu2FugN5~Zf|;9*xnis-bx)c
zLI*YOLR8l<*!`x~j6ZY9v6!~e^Z~rxr%!zhSn9pdtG>$;f!V^X?x!zP4J*%gaGvEZ
z+D%)P{IRBUI-V0}eKfDZhJQGTI3Y>b*vnyd*6dhJ-)KRu*#tEyQ#8dNVv2Vm!QaK$
zjIxVg@eN&yh^PYwzIrHGwnsn`h5VbFq!^4o7k6o2IPGQ<+ZuYsS_31i%gnR?Zsl)z
z884h-lg;Q6FG#wR4!P>inr77OObu)HURC5Cj?XI~Fsn%r3K@9o*)3;<anVKl-*gAJ
z<mZn<r5aABsxnJ1<;(&v2JA>Iesa=M?PP~~7Q|tepY2LCfA8gX;wRU$3rD?2T3O<U
zaU9!y%40_-zQNx2lB~eVv80*$kH{fC&Y6FVR`LY`CVrm`d{;o*zhNkG`;Ukx^}gwe
zxvrKp=DY8paa+}6M{-5-7bM{bD6Hp%aQbI=*WECZW8&=5WHPwm1p|Z@N;g?9?CO$G
zAaGOU?i+j<cqgeiSszNYRu>|6b2u%DnXlLlaoI&$8H)CWzneWU602}YEN}>6oIr=V
zM4~Dz5thdU`9Ra)oqPvE*6GZ=g#`kNq5&&00HTs;zPDPmWsTp4`C!=S#cHh0Yegm~
zd5oq4QJ&2AV^kG0V<a%AjP>eV;@zR;?LMsltMl0ITx|W++I}WPLDu*o+uR&)5BDSH
z`wGGWUhXYorY4>=^27c)@P#%l1STOY*WeKT`{((^QWP|eS$`y&e~23c1Tlcr(#p*o
znXbQ`oMHU2x3@N5{8&+bZv;x3A&kbCvoMlS=CI1$q=TTP*Ajk<3H{rq^#8?Ym-}B9
zSF>Y@1S-g_pvs(QS2HQ9_W6sS9qS#JqRcbZMA6Fw2mop1PA;za|FHMYL6Sx5zF^t5
zZQHilUAAo-U9K)0U0tp&+qSFAwz_O1C(nCFZ|=G0OvL;#F%dT-W5v#l%(eHzr{9O=
zIjjmZYo1lgAiO)2AT*8Bk8nq=DZI9bBb`5ZWJ~n6yP_=un|O(8G_oY*sVL6}M{7}?
z-P4x9J$@3-GHQ;kWbL7<HM_{A?C0B&-ohg;vOB7b?729k>cu+GdzkDG4$+Pa9q8rk
zVoDH(J71Wm|0A9~5utk?sPG$^wtMf{>fS=Khy>-=Cz<^uV}7_YU}<7MEJ!dFc-^W2
z{NYAGDac^}N7+FQl};1l1)BH4Bds3iF=tQ-h~{*}n7#<G?>phgBg=!T&$GpRz6N@;
z&|Xn&4G>_{m(M$C&0jDg-5vz<ss*)wY8{f3qHG-_2fV#!e8GrwI~kT`t|0;`tYo-8
zdJ6OfWVC<5NK^RUe)R?pUQ&;S)1fI4_|=~vjGBGlV10K&7L2lOxkjdgM&e{nF?oB<
zhzbR!h%E*L9jc$)&gkjb)4in7$ozF~B>i$67Q!G!`|B6Geip=Yz)2e{Clj1jdsdt!
z_Y*!^&=(ERNwa>Dg!QM>*2WmH^j~RF%Kjc8*HCJ_k|g0=gzNXO_J!=KFb$Wd@hwEO
zK~cBm2nkUK_n(r=hG^2klV8>q?~so2H^4H2Ti7Q`+=}!uCS%W-dX7UGLwAy0qI<;y
zw&#v(Y-J>kr|vVf@s;t+zamRrJ$eGY92gt1_`^N*69Ps?;k_XA!Y~3}C|kq;H#J*6
zIG17l`K|Q?pu|QHDImx!<zdY=cseOGwbjEojm6J9R|X+Hfc$wIDzYUK$k19Uh#4lZ
z|0p|C&6|9jBc-htbTU|C$yDK~y2HN6`LJpD2K@~}jaRJX8+lJRf77Dmu5!9Vo9QkQ
zEJ7_C#7@JVgI!D^i`9m}=jT-%)y@Q}+MaK^u#b0WOn-h8y1}Xw9(XD~1tGwE8WE8R
zF1iH2=FLu7R7?_zZWHz!Nbplww`aAZTpJC`sf~k=)8Q-_k>k7l$CgYljYgkkpie=?
zk|gQeLM!eWG$SZ`vYZzQjfmJ4bB*$3D~(DPP(;?b)o>RUF&lnM)CcShE;Yu46f+UA
zdp|ZaY{~h6cppA~T&wsJKq~E*bYLCR{+uHWr#$HPxlaQAu=H0NeQ98ec#@olTD|L5
z^8VR86I}jqu5wTNtJdDv0{Pn!t}X!}(2@TIo7?bVDO{9PCLD#%eiemChNJdyDjRQ)
zrU-92w(a5})tk2OI*7&?KS(u)f?A`?d1QqTJ4|E$@mIwso48DP5*pSm*rdeebG#?#
zkZL4n^_7o>B6B}V@%cB`H&c3|4i0qb;HB2PIPPwKt)QYJ$S9DPP<n%N>+gjLwijOw
z0hwMZu<{^e!mWRf6fnHpGnaI`H!NkX=|#aijyLBMJ@V6OqHU<ApMA1_rAQiIwan;g
zpB0c)R-EJ{Gm<Fa$ONT2LBN;+b2<aBA8vr#c(`QE_lIHf6!|VI4UA#CC{_49iTd{A
zlLIi{CZxW4|C71p$OV|DN~s5)APc4rxXKgeCfzUSwbNUF?2QjJg1OsCp8MVlkq|`u
zY%Zs3PXK8J#E04Cl}ADDQam8N%p%fzJjAPF#G0mB{Oa0*V1e1orlV#?$0IGxgQ~4u
z)jjv!sg^W!hj?D2#QJU{K&1q3ZP?zkv-Q9#N_yvFaP4@wR3D?;zIB%{vzOx=s0JCT
z1xV8N^DHCq>34_S3v0aX{h4=ANti__5oP<?i@f<8ou>!m)@U-$q?BL0bhpUAfl$b0
zq79MtDXcO&DqB0N$}AW2Um31hdL@_@q|k<A;gmEOZnM#0hIy#lYbw2&x&9>$dM&}s
zD}MWJo_@2*8Dp=i=X5A9J~-2?pokV!Y_+Q9iDOtbW4RcgYI=1CcTNr%C3EDuZrD*m
zxnE#ZQ-LphSjY(3Nn;NOw`zY!jH7;5Q0usHZMAKrW(MO&EBZ5^C2##!uQaB=r}|}$
z_ska&IlLAP42&iAU~(y)x@k}qW~F#UnB^+H6Wgf3jYb4)|M{qf_)le&SRd2oL+_e^
z*FZWJM27WLqsDPTkW>4wvt7wR6&(yOhOw%=S$$&Z{N3T~?YG09-iCZ2m~L*HA=dVp
zGy>;y_M5J6qI8%Uqj~Q~M@McLR34em>c^KXza&I<cQoUH@#i#pIhO$^%iy6f6c8&z
zDdA{DwFke~W*o*PjQ17piW|5d3m^p8YGbH_5xz;+_djZOWX~}<VMyMT{Wwm`yG{bV
z)sui{36h}Z?%{TKqk|*s2*>Xs29bqoj}(KVNT8tqaTQyrQeT1Z|Ay`REx09y8WiR>
zB3%i8JtIzRylGjm&gh9`c&Pc|^I_gs(A^nBE6$cV(A&KSc*_B}1MZ$cQ~7bpKJ)a;
ztmpIbtr(i3{$OQaDQ@6;tOA2Kye4qjS$ZY*n1R*-iwKP0<Ma6PNNIsn!$jl8!^;ww
zi41Z{OoRzLinxx$gzYA<e>ab*eWI7k8PNF2-q;w~I}i&mfsuf0esecPjDYD_e`j3{
z7y<0;TdBI+t{5VRm_ib_@_^g79*Tot32am}@hrqkZNAbDD$K9~_WeuUR!!I-eF39z
z1-Zv}7T4Q93K&UB@jm%8zAQ{c-$|1Nnf24+#O6=Z&V+OfTgy-)gQtkMIq3)?%l2Vs
z7+%O7aflMaf7i-^Q6SvmjOT4NUl097-l%nC&Bk94uz;xALE$Oos)Im|TBdJt@*Nha
zG{t07b-mo}LIl%r0Sj(qOs+IN51rxd)7S~V)<JeacR_br;xLhZ`?LMHRfXt`(H>{Z
zcln%;O%dK`oC;x-@esh<#&}o&;<4d$(O~GnZ5AH2+eoAIXZz+uezS=Q&b)M_tBoHT
z4BumH)baKD6%RYCLBITFF1<NRV8AxmF91Nlufxs+XWJ16-Mzy5C+2{aqmxyHgum`)
zo?5ztrZ<=9Zmt;&7BYIKcvqSX1au23(9h0|AgpcvV!69b@K}_JwUU$N_sLh}cv~gO
zzRTzO((a86P7%CrFO&@7j-zB>;9w32mt%jlGsIYG*@C6K9c@joNCsbhnNXZhqxKd~
z2`2|;LLENEI?79uUQf1S2TaIG4yfn7*&bHPtE<uoEc#5O^LHU?R(j5#+X8zdAmTQ-
zTk*8KgAou5Vlo0l1`B53ZQa?LR=~iCADMo32a%`))_-9af$|y+@C8shV-P7f>3xik
z`-g+Lk+QQEQQy3E`#+Yy^1vl_+^_g<uP;T6ku#m6k!-hEPb*fP&}d!a)d1M2NfPy2
z5qht~&d-5`Q83uzZEO52`r;(?M#FlQ95ead71kt!U6+^cj!MXRU*NI5Tp|K<Si83*
zcU{wMTK5(WUE71A-e-Uc*sv<jW-<SzpW~uPA}I<KUp%aWILyJviQ#s47iS#UDG;Jt
z{18GN0uwj}J|0LSf18hwB^_MF2x7Wm7i;<s>-C-hb0(;ahuQ2$`qHqfli;Ec02+T9
z7<cskG9iMIy_|T+yrptnz~Z~?pM4h&B74ltf+F&HzNc$bXyn^|b4wk_=OE)XeM}^P
zxAJx(nCs58fhFlYk>aUIm?+H`hzka!gZJ~VO{#wc7x_-`^PGgZ6EK^5mQtNnpEnov
zJ+80=F^Wk25?S7`PaI`%Nb)`&Qhz+UVMHn$-W^33T8si~Bfa+=Z$N>)i#$Gg$H&GM
zI{B42zvKHtgCZpN{_ar-BAtXA!BRdciz)o+SN<{W*<x;vfsb}9882La8+G&GjFF?<
zwAD3=HsCApGtdz1pgGV*9w>b7oi|%8xsigPPyB)&KI?X-<!uU7{L4S8Tbj*os6IcE
zF5WJqs$*lo9;;8{lwF~o19M-#0>fqXF`DD?M}$82XF;8n-lSm>5=Qe@8+PJ`dEmA?
zCI?%Zk$etWZ)ULASV#g*X4TV|B#hr%ch@wV)$CS;X+gow{0$W@%AyL50`!ml?>v!A
z-V4J>NS~IoJgdvT7yb;e*wdwdMQ{X=48Y&M33YV=wPFACU&Mh|1$IRD@t`T|k8@w`
zaj_wv)vJ;%YJ|Qde6oHXOj9bm0aeq$qotXKq)*a%clMEC)!yyJ*pti-=9u6XvJXOQ
z7-Pxts|>+kw1i<F`Zn*Al<U)3(8<q%9Iz~AIcrVtt3a3P^LDY6^14m}bi!vG4Ht!~
z*2ld$Clekji$m+}%_6m6knyot6m)RCuz;7jE*~Cm?dKM==l%XmU^;Wo%Hu^Y=WJvM
zlk3<5C9lLSH-yD_-s>qa7K3BXsQlp-JMDaCe+JTI=lb0`eOa0uwPc;>N6#2f3(W!7
zOb63`K_cvaiEW-i4i1a}!sksNB2b#+)v*X3#qpla$YC(>w(lfPoE0P@?w5=#-BS}a
z`?1vxOOg`~SM59GumT1$mt)JFXJsOt?d5G<>F`)*B>^va|KGmNKtX`@>_|4ggMeIf
zK;(kbF+edu2_?$>RG=*CsU>wO8@NV;wRQkhw7?lAnX7SkB=Uo}7ihbTAOZ8b$D)JO
zj5sjK5Zn1?(*TR^fVwxLBSF8Kcj*VfHF1q$-S&r2+xz^p@D<?u_FB&!;M>*f6L$Uf
zPT-4w^v?EPNA{=k2lor|WlwvLXixh`>5cHw=TF1%K+MmU58rp<*Z9kA0>^<r!bd)!
zzQzyR&w%y7Zr?FQ-CN}cUl2enAm&v0(-C4E#G41;{U&<6eaZ|Vz6=2A$pbh6;y-oQ
z<pJA(z!2j0Kmg#vkNfiq000bPKGt6*FF~dttdbr6PxC)>@c*NIu#&6W1?JvN5XZuj
zUoSa9gZm#F>P}m;<e=eDC**D8)9U#cb4)9Ef6$#x_OE+!u&)P4n*Xtfzuu(S_-fe%
zdiA3sHw2QZI~58ry_bmx2@(b?BI??asWf%~%S;%&Wmn+IclZB{wqTCdp4)1T9rs*p
zTmWTA>9tAj)+$kly;88~+TM(UeMZVP5ve?{IxQt2+DD8^-{ww4rjnSn|5K9~q=Rn@
zl?*sHZ53wW1a<zL)@dTco5z-jZmFT+dEU;f3-d?xVblGVTV0ydD_}8(&G7TzHs2Rl
z)yq0l19psb7Z7LW<;ZBibj^%sWBWrM@vafxAv8DkBPDPryyxGiNY}@=Ncmp>=hdkb
z(E0Mr!=!mL(GWC&B0Q{jqk5pX|EIvwwq8QdrQ1S`yi;5g`w42%o$nHJBza>LMK9He
z-7F?e<=-@s_~TTY{&{OiRmmxctn=;D8kyR&eG<thMSuC9N&CjD0TW*rtCBC6MM1Tp
zvi-M$E3NQ<Km5VdBlr56_{&2L4!c9tcC#I1KFiJpBH~d&BOf;|nWkq&K<d)ttKeR_
z3d+*7ZDe^X-!{DEEz7@~($N7Fc_QWg_#ehc!BBZ_wBN5pJarqhmD4L|aO-TQSy)lj
z-+wBWNBFa;(hz50k)0jpmvYu-qz0RVbIG**tH#WieZC6Ruq^Km_tA%lSYf<D`Z@QO
zNe2tT1ckM?Oeydd)Vncsuri3cMIHK4We2f}iT>Yh(!>ian4kL@0Y-Gm(lb~^V;;4S
z9TtW?g-~`n4e_*?iOIImhdUq<fX}aJZ>J+VYig`RwE-?F|E)NgE4^nkdly$Uv1})H
z`K?9l#Wi|E*k`=3g~y%F<`&|i=gb(cT@t!V2jb0c1Ow1ijE8~kYlx__aIg<KXqli~
zgQ9h#%m@Bk(85IHzsjw-(w80tY5<+UHegMh-?%lVpZjx4aTk}9Uqn1Ot2dALceH*>
zCg_M7yS6qv<sl`0Ng%AXZpv9U-}fcR0nxm@C*QX#*P<A}TfrZ#dy8i^qivHwh7k|j
zO&7idP+J$l8vRTat!lr}e?iwPDLY-uw2T*QZp8yxm})9EoBOqJj}`X!Z}Hn*T%}~m
zunfJ-Nfwlh=g%cZNG4DHxtckM4KIL@9FUjRb&`P~!XS!#mt{O%EV4g+9#W0QU9HO`
zeTIu1tQ|XL`W4VaznC{JMcOlAhsSGY4gTxqPu=k8Hn2Kji=B~9i)bkvbNu;4Ym?xE
zL~+?kDW;K<8s92~1+s%wEqD5TkEc$s(m1}?e7FD+@;e9d5rm*FZAe`IJ>anWx-M$~
z9-(QZpmj_6mi^Cth-jUxj+&AIoxf0kHcUvw7>0seZ+&n!h2GyA9dDvkhT7TgLcm+=
zuaj*_XW40Ok>T9nCX{6Agn}z?*u+c-Q!=#92=D{dgHYBG3RyqL`qQ7XBv>2$e49_d
z-^gQz;|bnWKzi;-*q~pi>HWp*s?wDhI(6jR{9%JK!v><0+z4%lZv1_%#HD}#@R*B=
z(!%;@`ZsZR*lUO)eqxvY@WY_=m9d*99u*$%-~sE2V_t9;%3cyrP=L%kVTuub$Kzr6
zmGF}g7B<c|CaBW^kgZKZIIm1^9zGuMMoE@LNC}e}iE&cpd<MAUW@qJ5R>R}YxYS8J
zgYLlBE=Y;@y4*<lKWNX)p}PN88t5((!`v?dvo||EqOsGNr<I{OhobHA=kQZ_DUrxo
z@Aulr&6StObt#cHecb<Us7q!@_v(H4AY1|2%nT3}Q<<6Yw%+GrP%qb{$MO|U<qAht
zbd~h_XD(0T(D$UnY*@uMKgwQFqCet}jzMAc(scRd`2IODqXUh*E+yVc-;K#L7#Lxv
zcBH4YMoa!qRyq1;a3*JhtcAHiWNPIMesX&DEl?)%X8})d|KB(sed}#}AdIsa05EpR
zA8*!>N?D<$Bo7?Bpdo{2z@EFmw!To4+n>~x8p3|R6Bv6O4=zS8`4117rZAPI0TnD2
zHg=QGdM#Yx_Vben=UW|BR(h~;D7!?LaVSZpV15BDbMayPt_R_uA6d%vw|H_$KO=4)
z+9l!jvOiWmKjl6s+dRJ5<s<R$S+?HAIGj6YD;PA4h4=P<Ye0TMmS{=A=FvZR3=|SQ
z`)jWdITZ5@R|KZd@OYdEt5o(2^U7sLqD?z@d5VWq!anO9K@@fj2hQpinv#B1Ts~7t
zdANz~ViI~RAS{Xnp_we}){1n7QhDkB`w{IDZ8Aza!f9|GAu$^;{wQsyL!&Imqv9G%
zip|wD^U{c;{h)1ZW#Ac7eB7mt1E7;};u>~HQ_{V;c$>ILR6!{2{!R}Pw2ZS0>i;`a
zI*{~o;du$xgKqnh8{$U;yu}@4L^DAk!4)mrMKJ1^7!HyLPX{Qs`{xY(jz5WWYIR$4
zRHE5E$<l--!H9aNcw$0QE%M(~n(^ByY$ets5D>4k`T*!rntt%oALS?%I55U9X^`&&
zYm~}#30!5Xs^k%AUT*TSa!K!(*gCZhQm~L_Nov%U>ZiZi=Vg`fe#86goK^7mey)$h
zNDNlO|1WKZy3YWuh}ICoyxDI9G8Q74ntWk4#<eE`R)3Ipx;2|<Db7E68R?|m{OegH
zVlv(r`#_cxDh5Z0;0-53CM4&n&D}U!5B~m$Y<O$jvV24#l<mO46)Z;8(!;*LvIrd;
zGZ4aWbB$KcZq|E`6_8D#gX8Rg*f-?nAP|<*l1c#7;x?dZzXtoJ{&sqFtoeu8@^W5z
zavW?~qvFPI-v<9AoGe%M@#4FvgcdvH&;^@k{nF&~fb_W#!?##?tg`vroxhR^qdEpT
z4LZxKmPh=+3j3dit`dnf!FQ7M1r;c}@5LzG*-~UxCtimxMb{opS=F_7@82Y@abZV_
zaZPR&8@JbyK+%T08nhx&!5I%TBh(u;W6F+FYkzAgkp`l}ce7tD7_SOEC@ET^)&5PU
zXU5M^@J5ma=OSpgU8Y^SK9$uIUs~j6Ib0uR_NqPjmm#D2S2wgw4zbeGni@SUEsR#0
z6BCFEoXJ8{dB<-EZXfd?gBlz&AD<12d5_KtkuS}T|G~xfy;OXE0LplM`uX2Jf8(`@
z8+@RkA+m?70kfKQB@NkR04GhUhYQHgWWl4^Q6cx?u}q?1Sg7*mk10i8comOC?tp>*
zehc4+gZ7=;?4EjR{d?$|<BGe^rPaSMPZy#`b<n?S5aEiL`&`SS!4^$kqeiTqiW;Jf
z0)aHu?C<K4y(trs1%iDBJe|vZ^Q*66WInGaPCphIo3~o8yutPjq#K%A)jIwn4HB=+
zS^mzIBh7#^%A`X-G2fUTCD%dFqN$G%8jrFqkE8jOMfSQcGlnM}hQLuJs^~EQ-14Vh
z&NT(JWr*o)GB_L*uuerjkk%n`c!U1V0X5UCYH;hN$Wmj~eksXauAR6K6{S^L>^=nr
z;XnVP5SRI^HSeA^3Y_Dhw4`t*VyrkOe?>+k@tR@E_}0UIkYjm8n5~Qwj=`0Mw(+up
z8DswPS8g)8sh`RhGlsuHvFFY>LG&J+V{-b6P5`e6V~gu5>Z)&Z_wG6vcVlU71H(#B
z_~j|IKB8X2CZll8pL`(`hQqLDw^uz{_#>0+#xYE(nOdm572KX7q2HM3THj?SGZm2u
zQGwVHQ}vA$-YY4o_cn4L91j04vqi9yR=qi6!Se34nA3hzFOX|<p6GJXxR5N~-3!xo
z#r6P!V}c@6*o3daXRL!)7tN8MEW5KT;WfU9&m-{KPEM~47!uZ*eiN~`mL8$FeJW4&
zpCA#Gmx=S)3nr?k?RQH+(wIJZ{NJ<@XJ6CQvz!(9*h|QCXRK=_E{+4Fn&fjgPLEPn
zW?F@;Fc}X1=FeN@?^nr#v~V!QnlK21cAgkVlW>s8TzB+Xq#l1%)kwE-Aw8e%srWFe
zj_A!48n|R)5>GT2xx^--X)t~s&A(JJ{w9e(dZnT?(iR+diI1=iq|~eEVnC=d%@AWn
zAHVILxHct-QxT)=AyW*QYWp_wxVn6~s?P(A6A{aK2^=Wxg#d{8y=)#!dm%N914|gb
zVfO&aLMO9QC@x2SL`AtUNOtm%C|jhBo&;^eU-=Ov1~wI?k;fv?NGeU6zcLc=1m0Av
zvqg8B$TAdUMaMxo?sZ#?&TJkVKi-C*3gsanF^SFmjMJ#v77Mq8o8X5i@<+EwL6;DM
z0=&+70_s#5azo*JKAPJ~Q~c-PlW>Dep>*@*@Km7<R~izn!D*X&mcNEXyl+;W*;43L
zzj^A3{*Gn!wt$zjwJxWksn7X3|0}>m?Cj3H65)I2&u{Vx%je|pqexeNN>rv0<<N~7
zX1WxaU3(aASm1_aK1L4u7s!=RqTFvHc?r9mBRvz|_F7(HZOvC%T##<KxCJ9egm^&n
zH1|o#-$;y_CTf=?qQ8jCu`1=BCeiAtb7*UAa<JTO)IGSIh~mdl=$^d{rY4>Q;-*Oe
zCa;iu>LFYMB$aIvG?~X8GD{lli-p#kVJi=a0{?a$@ujIag)8aBg)mnhKnhuN@ivE&
zaF!<(<AOu6d#VdC_jUinAmVsb4g0tf?m>euK|jbEY5d2FT;Z-;OW?D-a}dz5%koi>
z1hJ*etLBM62wBza>T%?jifyt4R&q+opk;YcnBmG`e_)nI`AsHZX6nj;AePbrBYB{O
zM=b7^y;*+DXt=57tW+=dfp0zUeGPUfzKahGWW7b!%9e2m5MFcw@CBMXV<XQLxw;dy
zc7YY9Agug~f3Kkn5xv>{3^0o#i2KOapXIZvnXuLn37FY+jqXh*^GiN8i1=(9wo8(O
zY{cUdJOJ(aft59Ik%@^&#1D!AB@>5i3k@p5WRvSy6y{PE?q4mBII{zF#Wu~MdxoR*
z68#7C!gDYEK8)Bl(fp1@e8U>|)?~<+LN9WbY+scx(%AXb?6I6V&0J@2=QJ;hBDVy}
zts#|>yHkmx8O3)wdsTtFmVVJEhs$GAD&0{-ggFLq$!0k6V1@Mgt>@view?dRH>7W$
zybN_8uHFcicGEwK5=<KO9p+?$=kUX@hUQj|l`ejUK7!3wA3A)lmXzuFJqrLpvskEo
zy*nVPNzM?VSFp`k|K7)}sztR<UFk%vpl;>YcH_4Ir6Uol|80Sa7(~>fZK%oK(3#XD
zZi9?~lkmY2w5;@Qa?twIW*Fc5&X7HBM6O%A^biptGJ;Fp#-BTHUeqSW>p@`PvbF76
zG}dc1$IAt*?li;*ldoh?=T_OEHf>^Nr>xNVl@O^e9e47p;dEw0<)mzcZ^JLN&}(bW
z@N_(K=ot=j*vjY%Br!hnfd?CGozJRzE&`<sSV?4|YC3PF?_WE{2j+5E4p%`EtUk|C
z&yKoK->iA^rC&YFIkyS9bt1_H(@fM^8vLj+jEKy9SvE4i?2|@3!!$*F6)Z{b-Q4C@
zY)!@1h&3K~TKp7NR!EC%0jIfG7a1u@3YOy`Ri+(GZ3yZ1VQFSJ<>v*;IOQ<4Zj*SS
z3Xq&%^7QHA+)jJ3Nm1T5r_?`Sq>R6XuXqr9!nbU~v16`xcD1{fsr1L&l=S!{YRv;>
zb{l`D^&#0o@OEV!1dFTz&vZ&FAkcc%9|wEoRW@kbVx*YUdA}soLqkp0f-P_tX&Xu-
z$;QyC*QfG`e;2XQqoN+yetXM0V^tQ1sA#Ogv<Gk#B_mwJLdohC92|z2#3WJ9JWX{P
zR1Nt#2{($0M8|DrTlh$oq|Vxz9ccqIH-!Fyp{hIuO#-I$j3D4G6j9+Vgci^z;h6|n
zVWyjs8k9=bjPz#Z`zed8DXSuHOV6WK=5QwpvMrpQhBS?-*6GX&cKCfU&NX9m?q~i+
z?BXt&tKwB0VI+Q$i5-z$nd4ZxAy=N^!hplU|HAxWrK-+)s+kywR9c?CbrGz1%C{;Z
zzWH?9lre@0H00X0iBq#1v>(N-vPi>s(V=<;R?x1~4#2%mA(xW|*zCvDJt)QoEcR_E
z8S1!$4rS8uwIt%gN=vwqCS<>gjK=(-ol8f+;MfcT&jy?`9pM>&gcAJ4Jot-^08yw(
zIW3(3QSPx=DXn=MDIGsI&e0|pf`j+Fft5EsV=#G>y^S;z7W^vNBsj?=_b^!_kj8C3
zKueQYIgW5;yzsS3H6q^#gY#qPWWuO689h9m!f3N8Fn)ZIv&(|=3x(-iKKRw){>x`A
z$=~h?W%u>#s=vTpKEX?gP=>42ACL%{#LLq%P9oFYyC~(!=H^0D=@LrM$EPm!m)_Z!
zKR+KrWQI+{$QR3VB5Xi@SX>Bj-z3ABAO4QL8~^w*N0OkHw2>QF7kshg(SJbB6l4z9
z@wA!uu6P4s9QQZ%^e=!NN6^|@q`^UPC-e7@O8eDP%Z5PlX#m56n>Q9sG*+?*L&Q5I
zo6d5I%k`neFV_acA6;G!)hbjb4j_CF=?(<2f_T3STKG@54~}ltK1vz%W4`TgSMd!5
z0-0kL6m_2bd^f47&Li6z5Rv)^KGZ}boO8?iayBl&0?YQ^jz0+@3?hU)FPtg5*)(-Q
zPNQ&B5R!e$UXfX{h=RC^d;D_xno+n=o`b=bb>Z#<I3$Lhu2@fF9si8js&0FW)`v^9
zdmcxpKhdWFKOS*Y@xjRZ7(M#uQ3A0^VjW{Fvu~ZGXQ0DJVtkbgWG?FJAuwDb4&5cN
z@R8rv$Drfy8@c@)4t-$aZc=bL9mXNSIveB-MV=PSdFK7UBle!&JlHL8k(cx{Wa}uk
zczoef(O)z$#0CIa2}M`U!7(dos@4Au1z{8Z%v{f}F{df^1`$}`@w0KOfBZU!o8xrd
z^<6%&{3J0s`3RPXp@L3gr2cSev5?{Uinu$4bk`uDrXSFW{}E>SEu?*+C4=m6TpRAu
z3x?M4WaeI?al)~PAUlRR>i+jp*b)MfYt65}Zr#5bkid`9fY~s;4~GiQ>;BTYV}z4O
zq74zV?i_~>b+rCnClKJ_1qG~<xBjiYbo!BHV@D<}uWeV(D@o-0?R+Y6Jiil!h(BGJ
znr1%HN!QbFBOAK7f)jcz9gjRXL)-h`6D9P11pM6+_^Vx|SMPhkpbG|!OrMn4D764T
zu3X0+dLyV;^6MCCefse#{-Gc7qyblK#b=v@Fb*5}-8Jmp1zCx2)eiJK^4o)$QhiJa
z|MSG#jiHNa>0$nl@4}NO-B9S-0#)r+f{Ki$*Kxb_{}N`6bk0>eQEV*xqN#>4agvp>
zvD{9w!_s~3_{<f@?WL^AE(JD!7XsmJjed9C4li*^fQvRsqpaJAEL3VhfImd=kzyd8
zYjc}UC<e-9aaNoiNlBMaPLvAMnQrv?5s>g-$N3kqsfIT<KZLA2xo+kL{sF1pUhY?E
z*kqTvPzXbZrOXTDyfl%GJk)j>X7V{CtX1qNVpdB7MRe(T5_)oBXkBf?)9chThRnfD
zB9gO%n5nRnk|_E_=s(lQKT(VB&I*RIKD}COVsGnIet@^PsZhfpIR*Rk*{qP+wWE_<
z1{HCfXQwjY*l8MFv|BlP;}UN94=3r!f(1XMtlobQq06y+bEEn_s-{d94SLFH1TD+u
z7Z<aWX$7;R7P4GAL6C~wwECGGWZsuk++g14>d?}HmuEEjd85qq-}_}&%3EwS;v&X_
zdH5Prq@0hfzo1V_ED6Ouo)D|P>oOmO^(z8G9RUGNE_9~@P60V051aANEM0$vXZ{yP
z^Isa9)<9?}E@8{n1Y+Y~z_JvU2Pn}Q=E74G*%xgbq$Z0?04)(ttD+29K{crxRY7JZ
zK*ps3E=K6_+`sq3uyLLM@(ibn@ySWi;la%-5eO>vIy<}wrw6h|%jW%bN@EgrAnaDY
z&;YXk1ZBMT#kipar2ZAB`0xBXqp1{os+LvIf<ed~!Svr+%SFPCxx0)s%`o|DhQG3Q
zAPI69Ed3v7<v(!Ce_V;j9wFS~>k3q(uodhrED;lK<R`z9#{eX5iJgCarGAfS)BexS
zLEuvOQY|Ij@jKOz#Skus>R%q3&SE?Lgxk9HdeCmtHX!;8MWPh=J6!Q^95_OllCzhz
zM^lo9Lqfj=bsJf`oJd8VUNo_$38XJt8~%Z>{g<`-C(hJ)xM_c)!GhO$p|&q;yvGIt
z6aSrnh`i#O@&dg1pTxsIw*J4kqN`d#THu3DU7cb492fe!vwOP&Wc|V-PxSu;0RLkm
z|J9XFwE+HKjo!bruK&0q|Ei<^`R;$_@9$2Bf8Go%ARr%Wc)%kF|6jjAW5y616tunt
zFJ-dw6i(azvFjv5EDZwod$(7!`q}1PB71!IoA`43Nn>R`ll@mi*%-6bpg)!QTm<*D
zy|qr;Z%%m>A)fQXsSv6q5BS3_AW%@6$>r*Y&_B<>(P;dx`g}k$BRr=)(f1sm7aH@a
z`WQ;@A4gOADd`J<#r-UPhr`~0X|G;JNfK-!7iI}Z6>&82-J}U~{UKq^V;0mH=Tc<c
z{@i`V1;x(t#^azeT)-V-)(vy?M%@zBEb5=OW>ZM2d>^jn;tU7kO7Pk<j5<Shv_%uD
zy9as;90jDZFh~;;xG1}$BCf>`1qa8Umw@6zxburh0bxr7bj2kjx(_+!O`6HJF9NgB
zN{W6#!<qS!Mi!u@!ph#n;CpQbfpBL?7gc-&T5YCRM7x?g7rqc=V9KLJf(TtKuE{wR
zNtS=!&jk7%lk4Ji^`ky?A=u8Ji9Oml!sFXeQC7rGhr4U7JRAUmXZL^BzQp@?;%G-T
zqk#m@kNe%|`v?5_yfgB!+Jne0XQ0X{U5}*Za}zFCmHy$lGf4w?#|PHWEp|iy088x>
zv#4Yj&7!eheRY-sIc<I`!)W&<(2Uz|Gg#UBTBLnroYtuT@(l6#79FIMTE22m8AgAe
zJ69iMTBnE4{*Epqp{-Xma)|m~g3!M@Q3PvE05~}io(>u<hCj)Px8?hatjGE`#KtwX
z6cPHCz5Qs?n~2Gig=Xv=4u1P?lT@OCE@<U_8~cH5XU}}&n6P<CNnq$6<;>vxdpX-8
z1z-)*fKwZijsyYMlGrcwo76LUlHAhjKKojDHr-_V1CtH1HNNLYb@Bx)W$X;u!BK>G
zIBSOXPjb2-`m$GhLJ%FjVXVTZjU~#}_1AYH_Z(;E!u6kkt}}VnG`ZaoV2!TxIy6vs
z{m~NzVZp(jiN{`ZH?4k=O4pV^-;RFcx2)stpDOdF)d}Uy<A94E#(-ysB0CTVK-ll{
zrETmMvyhj|#3iSh8u&t?qoHJYc1AMCQ;rQ6UnY~+iE=boTAU$EMYP%(0Q)aZPahEp
z;M9OzO@+ZWju>cxP$tt0J;_Y(1K~Vqs4hMiS3&BTDsXO8E8AhLWeBRaKxwGHhYi$K
zPL@hfA|Wm6<+gIn=wC;*M}_0EFNV@bjxRxIx~HO@A7WykX3~aToeZ2jaK*&x$$npP
zu<AvBNlV&=s|T_!j5=*E9mW$oDc9=W)#7(5992b~v3%qL=FZ#*q0Cv7GTHE9W42;c
zkc$_0A&f$J?T$XF8TQyvg<7okBNhf1g%VeEKwQEg{&a3V91=+wRADKllw9U)$Cc+k
zLK8ifIiffnafd%QUzHTkJhRGEF*#5+>HfACO0%3HqZIEMo_IoaVBZDk`<yWB=+$uN
z(KodUjatHr%SSoJ_9yJ1Gj!xgs?N-dD4BX*kG`0lYXSEUwXYWs_~rA>iGG&`_jn(_
zU7_nPJ!6O=2zly<9bmrYvS-lVchHnEYFlJNo}&xXYTDp{Z|y+!Uf^3g%9A4`6L{G7
z8`iKI>Kc$k+1zanEGr?LL>#yp9_vMj@KINF_hHi)*)LVlZWuGy1342dM~$wE=Hs`m
zT?Kke>-8v7R0@zc&1*eRX@VB*M!cxPBDuM={V=Prfrtr^?PHL-<R~M<;B2U?w-SEe
zN7a_S74F0+(CZ_)R%=HO4BSS~l@;w!&85H_)40%Cj>Gmu*1m226ddFpvtg!g8GGRG
zbzK`C&KC$PB74tDn!>FonB5yN-J@GYagcnTT%jZyi82_VQfg+QDN6PoTI4Pr3o^Xn
z+ho3Cpbn;{X*2=>;bB}&J{Fao@vF(eAztgbm<g>A05RtnTM_1&<3jSSIN_`(sxEp(
zn%u?ts$ErA>|B)42C-~Y1w~IKOfsIXssl=62aVYB99_=R?9#1A8zLPrdhbPYNMhIs
z%)FlA%!WEDdX}0V=Vm>6St9%yQjV36XtY<k?M!c<N%}MUCpfdc`xi|GM(gJ-EG)`S
zmEyegQ~TgCbsGv9ELCU0FpL-+P$+n~<yeZZzinLi{Gur&9K8DXWNWW?ta)hfyVgvZ
zUc}F!4abw18Ik-uTv6eFNJ<OhfKrT*mIH1gn1hhUFF8VW81B+;N)ipc=qi7ehaM#V
zP>+SuNNmiyCu{N$-%4@2;=X3T@RLMkIR7PqW|qs>Q9)1nnt*qlaBi3Yq_n1!F$@6+
zyOY4t))ts#K3IVe2gykVWs|C2b-iuOQX6>F%T0v@c-K(#-j$hne~IlWyZ)*EVB*WX
zhB`tGaVUow{{4dBw2vUYhi{v1?sbEish^3H6cs<+Qb8^jP-5wMG5E~OqjDGv`a9XD
zci7R|d|SA>`S3;g%p=Nwd_}I*{>pSp{)6`s=N5QU3uK5M^Cxb0QB6n1R0Ro~pC2+Q
z<hp^l?R{_PToCMRH0=YZ6t_5{Pw*pZO)}&6snelk@_|_BQ4BpFxC$kIvFl>i;%tk(
zG4C1DmR_?;!$oiM1My^eo?tk6@ehqF##dXjH)QUF{gF3czps<7)r&u3n1}P}?Xt~k
zdTNHWZgNH2LyAUyZf6C9&=e|{;acs_rP7nIeJU*Gxs|_@&<l0~>29-j`ZI9gLp$9b
zw;op-!0u{}xMr)^yz13Zfht+<H-cVO)OKJ0SZwm;DR7(D`aJ{p6`H|3)BzMTIg&~-
z+t5lB4_SY=DlbE;Yz*>Bo0{jk04<~ExiI7_PZ+bho?<rH+;h*FbcB<BC;P7OtW$H#
zn=80^RLZAdsp)I;qm7|_4gc?3E$Q*_Gkm`bF4Bo+bfFWP^MK+`e+W0Xz2jdv)7t$W
z-IfXXEMRxD$%`dfDR$6S65KNMvLq&)+kf=a<r=3{)j-!AnMm-kH*TcHAk?}=o6Ktn
z#c_MxZCkFATRASAy1!nl-@^G{yEEF?$>Uv8i7FPt?Z15e$<amp{2kf<&#?S0QgD{4
zP2)8!r5os&;~P=Gb>gRgKFKoetA_0v7_5<$+-jE7PBLk(Jq6o!&_EDy>NNVFT~-0;
z$94<stB7YO7iXbUm|r1L-s*FW0xPdrI?jQC*SY4d=!N8>SqAiD;;q<1B4>ewbP?E4
ztV@s`R+F81VptY2Jpi%Q_S5Q616;}>U^R)p@aZKIS~cjv#MYW4<r0_*;^0)_k>%%H
z@9DD2cLm$UX4d3C1ckWgeT$8@*I@Tw&}(fc{j3Fof-tDh<wZrLcGAYH*MqXA8OGtK
zbh~QqzI}cp(2s*l`Geq8wSoAmUGuHwA?8??T>9vMX)<0Zxv<2<#O(_O$7Qq03|1q;
z)0}#C>Rpssu46YG)JLTdYD3v}nWK)0bX6FPr;9FMEmtrG2nZUH$?(T$mItM{{*dU)
zo5`q8d~GtUOlb5pedo4gtVZ`FBTxq;!3}bx(FrtgH_bAFO*yWjH>o%Nl442F8)dW9
z1ae=lYjI7|!D_V5p<1G7*};x)I*BM!fjMu^LJO56xzHu3zBNIkGrXR&qm-X3A#EJ4
zS1_yvO`PrPL?x{Q!4T{*HO}_k6r;rG<2J17_dHKp@dLTg7dop#+)tkAa%$nqTJy{I
zQOja*s`QItaz%>`IDWuHozqcgLW4tFw$%zn$Bdg(#gL-~8JHfyYF2<7L+tHkS}OTI
zWsqld9frwmd4DhMWvml$tpke)f62^TIawj9b~TP=qs3~`L1(wiCUZgW)(~~U<C4uc
zNXt;`?rF2`GkG=cKoNwR(tmC<;G#upk#`XC5>`w&miPTECnPt7p)jB?igbC|VmU83
zR^eSdpQ;Vobg%Ku)#UE<`(;yipq}^6F833E)Jd5{D^+G{FJnX?%p)3S7IE_XNV2&|
z+#TpjOv}V__rv(<p9xV3@fp5cjNdo`4O~R`V)V#)k019qy)3f$f*e<}bJxTIfoMwl
z{@JAE8VwT`BjAx}Zj4n}met#?hBxU&ypwixk{25=7U91vmch1@C9|@0u+CD72%Qc~
zzlu8ObPp)v9f9Qgwy-;yFLQMv8E+%ocH>xLWvg=d>_6MQ!}h2pYBVivNEJzefOssS
zzp`ntZ@ZhbMTQ^o)&Bt_I8|u3+Mn8N{7CiODftsYiT}<@ENmoqKH|)pO42Gj5i~qj
z<<+1!aVe23&0rGYHZxF^63jrsJIjyq&E<H$>Tb?N{Ly0|zkp-8Jz$HUIOLGukD56<
zUoXGdig^#*`pRKIMFO=Q%EdB>CQj(LbA+kRp#3*;*j4-5AsQE8AeeSWII5v?U4UR@
zULe9Bk;H5MqA^QdZ?uvb&grW@C5#}5+U~YS<_|_V%XIbWeD{bDF%hF6jCN`_Up^K1
z0Xk|fn>^Y`hbvNY|KH+5?c2ceu*Tof%14SO^xm?wTliii(eiK=4G~VCqIXVo)ws18
zpLTLx$dXDQcW^e2%C7INiuT_PMw}n})F!;YMsX<ML#Riaiu^EKI6pZ#-+;rr_%_u4
zm>emgxshEt<YgIH=Be+T(Egs2b=^Q49Em2`@_I;ZlGF7&NW9&U`nuZ$X?xGs*8I}x
zj6669w1+D1@|A!D%wkhBesRdstGo4}rXTKFuJ2?i2n5_Vv6?wd$h8Uexs%K*L>Vky
zN!-lawWFb~Q>J&k73gk!2=o}D^BwVqn9f8l{ZtsH$K3c*LY@M9N_S1NG3B<n3yqFk
zp3DC2nK)c7r@4+UPTZmbNB;rcX``h9bx)@r^+%RLUFy5b;uw6h8<PN7*m4!G$K<;E
zZNPV9g?cs2LCb;#0tNek0I3e7ZfmNmM<#9_Wt4QBQC_>qn^WD}Ez6{QLFv%4l?OqF
zIWtgeZQ-*dUCgY6%na@>JvM{i5BoPI)y`-+i5|!t`07<QUvE`XNDoeTOPE<HWd-If
z#Hswtf**RwwsD<KULHD3bo=f%W2wq%PdwonSzScbq?tOsE$r_T!M^4Kf-2=m&JfFV
zItsN64-xut9OvV4a-HHuG~t#Je-K!SSL)@a&;2S@j&av%zv*G#Y~EyDeV#=rvDnqf
zVCYEc6Ri<A-70-?xFY|_9mU%sUD;Pu<mnt>hx-F!>v3kSg^5Bs+;^s`Mr%e&b>8up
z<PNl86IzN8sds+;heoZ~!-r?9XN6B3@@_Te>B0l8zLh<~>;|yj>T8rUg|Anu>LmoP
zn2AODl>>-T=Y<P?s(|LsG{*x;Tz%V{J52&o-JP+BM?OMWu+*q=Y#woAN$0dNDBQB<
zcYZ8TN34;uZ>`ztP}0Xs#-4?A^FHru7cnxeh=VXb?DBU5d1grbR0=W@xEQ)yw9qns
z+P;8sc8CPRfZ6fdNV1^fV>liZ4;d!^a%#nUscmz37-3>mnjGp<o~M9`kG^Ejj*2XO
ztAkBu-`93l*Gw)yy|#S3rwSKpTF&C>9aH>;A()PuTA}Wfu}gu*z&~pla~>yUHXlM|
zl3iT_;phHgm}Z&3Pg_`&uMs}Q!V*$9NGT^*GE5I9usgJkVnQSuO6Q9y={ar(tqa;k
zNI;3x?D3{Ug+Lk#WREPB@k-<mrcqo>GOOr)NQdCdh_KeFsP1v17(a`#?vYgLPcOc0
zm$6fZe1$6J{eUIc{DR4Up#!n}@Cm|Vxuc67%5C|6qRfJ4#w$TB*C0EZgWlg|=FGdB
zu&BnKdl3vXvhuy}JYS2U<?VV3JRptlqUjuz4B$V4Xz{a9&MCXEWc<&(@dO|GOAwN#
znL(Q9#q-9^a8)x@PWbY}%?%+np;?qP&D)n4GRL!RN1uF)FgQ8M_2?Vi&4B_R{5a(l
zE7j;}xG^F~XIHna38UmF|5~H3Ok3?<L$0q!AxQPj5jQzeR6nBiv?q{bb2~`*!9u{n
zK{voa%|&9u3P_K+W#B-~+7Y*ce$AkD0+LGdZJJ?Mm=Wj+d9o%&l8Xnmt>v$xA%5FV
z{WvllrC_THzu?bzRex3e3%d*1eB)YhAFrf%*MasQ+G^|OjyfiAN^*^mJd9JEYVN{o
zDC&ZD9Ke8tt@H~_5R>AB8D<TD#_#&!=8;I~+yJxoUU7BCM!-*X?Av1-ElN;&ifE!w
z&l9eX%@C_sO6X7)G_0JQR`z<nDmg$W+QdPFXSfU?lh+Rl=|r<{xbR9Nq11FwlZ?aH
z1FJ}wFkescsLA+sPN84zeW2onUl+(;U`|{`zOZXW^SeST?4=IXB4>zd*<G9G;iNGF
z<+up+4D!paF?ZpCD<7?E6M5eE<eL-Po_2rt!pz5clmbj?T|{Ls@>qkz{6Jpq&<<`e
ze~xjt+-LRDur(Zb<gokfWcZu8d&W~sqvFDw$#Z36Is+!&AeoAzwPDCBBCT9-DnCh6
zW>^Uk);VFu@20u&yM-%g`1~X@2;1F7FB;XwR=H`V7Va0+jWykHDHSf_@X&&B8=MVh
z;8*$B=OVg<Ut<>T)Euiwt#s(<1C~em-d{IQlYRPInV7oA8*%e>R7UAQprj?RLgB=M
zeC`+_Vrtm@x!|3@K$CaKT;hrbr@}$c$E&Zfdd*)I<)b?nl{R&EA$|Es#(fja&X18)
zcyA4az`T<c7GNeMf@y#l86&NVT^s$A&eU1lCyr@meEviq&hHaiAT=YaoxU=4OICup
z?c7Uy^NR97>$jF&h5p(4VU&GpIb1$d*E~+>$;KwPe?4fdD4M^!AfMOZ73a$>bJ>(I
zk5H;Od(!13h{OLQPSHqyq3?zXaLvB6V0K+39WTvesauCQZ>(?Bw#9oEDb*Mc9maAY
zlu2D&a~qE-WPmhOrj~aozAP}yIc(9#5%xzxs>Utc3>z91nN|lq48ZK0y3oRfU?4sx
zZN_DzLey`vBlPR?NumJyN8HaKH^&+`b3;0AbjE<!jtU*JBcbbG(w{hg9(TVh8ac$c
zVT3wl7RNI3HZO&{RuAEQ4_|uJ;7Qw}@5i!-dVDhEY@H6dP!UkMp@?|Y&Q9+5TBkav
zZ13Ht((>B4Jw_B7m<k0Kg}z}UvkVWLLxkwnx916?Jsd2K_;ol&e7Git{#UE|?Q?GC
zJ_*4HyLKq@+lD;&X3-GWQ>G~?>xW{;OZq%&X3@3Vqy?wM%eF&9jKLtyL9W-7OJja5
z-`ZO;WXrJXB~^`OVBRF?g~F;)18v@=c8}ab!137L=u0N;tS?(qUVP(8F++qe^{<DE
z;*Z>s@jX3E`S)yCp$-Ni!=o(2LCf9V`i56in|T3Bs|OWCR&z0pc7=WTq@Ra03-+a#
z&kxAWuSqE$FA?rRjZ-D1Y80sHSBU1m%!_rYEASYXW+0dJl%yeeo^P?arw5>o*`~kz
zuVY37L=|k(@teF5kKX^lyw7SUiu_?URE@w40w0N?>Ad+O1=hzhVmB<<REZhxA9q-;
zfV4bNRJDUfI3~`igLU42Lh`UfRi<oc&aRPW=(wZGmxDg8%^wM?WgN?)<72XjbipI)
z6ZU&E*7vBIUzGiW<ZEXoch1f4Z5N}eNk|-5oEeHObrC}&fAT3qSydaQ<Uj2W60}sU
zhyohy(q171+G03A72Ty=#axewG;Wv>!B(+Q$MRKGXxxhi^GL+Q3DzLYd=tmlhGH=i
zO`=-jz^)wwDkirP9PMOGmErBQiBNjLC=1I7)-P!oojv9p2*qSiC?VZ;>7B2PC@A4i
zelyj@+9(cBN=gR807&g!SEnMUKrJ1&@^YF}*;(c|-U&3-g-9_8Ehep8?Ohm>knLnX
z-z9Xz_rP|igTS$eP{M#`2TK`o7Jsyz@#je6ht%A&s3}}ER8+dYt_{lX8}Q?GjyIfi
z{*<%j)N%N31mR!7lh?My73f&5dnCgT5&GSQq$nd)iZWP}ywYb<UYl06e58<ElVwuo
zGqVMv@5kyc!kv1Y$9emcorItc6r-eVWhvqm9%r_+Q^igR&46E>W|=oa+@$9v8__Ga
zyhMmPUwC}ncWyi<S$N=)7Ax_+5^Qu;i$TcCn|e=5@T$MCBXwgXb_Ma9Ju<7XJuogS
zgnymxKXyh|l~sCTqT=vtwteumSlFo^RTs%mPB|M{^ek40bqpi){g4~<Hh<|;&YRp-
zGeWo~<^GjTG)Bcq5*>S7@ZIzWQU%0&`eVEmuaMM_G;fVtJJ@P+<===}%BV(N+|k`m
zsQDAPs~{i?)97Q3Bca-Tw0iLipwa|!c>~ctTZ6GND@aSW6rY1lr#}0LTBL2l(@a)R
z>~m4z1gtAYPYy&;;;csOuy~K=(8Y1n`)OdD>?#<I;Sd4q>R<)+>vBRl6%g}Av~1P`
zy7;bWNjQ%2Dz$@HDS>;@u1`v^x&|6c)+0_>Q_b-SB~iv8Zfza}((h<5N%L$LC%Q{t
zuEoU*iBQ2au3p?fGRluU8QS}fJRXSQcWvv*a+xz)nuJ+Jz2tEB(eA3Xu(@888P1sQ
z7sGFi&9rPu?0IplVRYPc$!xt_I}U3EH`q;Gqa&<os4~~MDr7RgCE9<TOibcEOf+Yu
znuh?42NbqSVpN-z_u}j~-yF*NM*j}bHvb8!Qa>!SU|PywqRn&ng>R=XfRz%(8E&|K
zA~HSVd)+1VncMkf5FHHH*M<1uIYKid?J-EuS}%d^+6?vsg$A=TTc~(P&EaT~YVv8%
z0IZSQm8cTs7ty5*$i}i)hPj=+-RoEVJu@l8!9kZ+Et^5-I=X{8vy(%HnA6&43&<sS
zuY0wpMP%0Tx5Ms`RIetD*P}`4J`Qv*r#>Hx&fHqh9Wc)y?&tXU9aq?sRm<)hB?L5*
zNp&n@uvXLFmirTgeF=&FRd@N#8o5Fsi>I*?@d5`_0v62Km>t}pI+j_5LyPP0ZP4^c
zq(S?J(I|syB9pwJlwSxf%J|~(2+6R-ElkMk<wZk(agg4MO(Bq5f=O^LSMo`GyZ1Id
z<*>uvBt>EA*Pye25s{YTAeL>DAtUvVkUJ3^*Lo;mHo#V9{UXi%DhjNS336aU2jY2d
z2-zmAvQt4$`H35ko7XmYE!N1fwHkP*?SfIekK_T<)MqQk8jc3`ku+r`vkkCU4cLJn
zOJEn_QOgx=lp%EHLgsVAeESaC`N6A2Hu0TkIT2toYhRem^79mzk$<Ga_0#g`lMDx9
zxA20@Sdgq9q5AQU<pIrZQ5D;oG|J4Fp(*zH!52-#O(p_wFzyf0!JBj5aobV-ms3Sx
zotjv1_JmUFn$_G)Crq3jso1;oG}?-<aYShc;p>78=%uay7XUv%z`r6hUGD(lH7Ai`
zhTuT0;P(BjsryFNX1AoCepNFON}4BxVen-Bqk?Bg%mXSbiGLN<Yrl*}b!ubGP`&;C
zQP7WLnSod~P-hlBH3D%QQpWpDF8568&OXG(H&b8{${=HmgXP&0BM-W%Z`0j=FX^QQ
z<GLOOn09YW2_J3Y+jy4bV4SC$U=Je1TQ=+=?}_A^EqDTxHUDVpO=DXbqJs1p)5<ni
zELc%qubx~dl<sqbP|GR@bA$dy0mpS;d1^$7b`TuQ?QA9B<JCc5Zvrbab6<tLgiM-a
zy=ZPWh=Ug+;zJJ#6Yo$L;IO`8>PuwTJ?p83hd@wY*o{Qi9+~H2UdodUH-B0<4~;wr
z*hoC?o_IlIp_o__z%H+isp;%Dc0J4AR??5~)(s%GfD%7?Giko-(Dw^hDA~O_&Wii)
z*$m`&L4P+RLg{2Y_nPFJk?s77lJPw{e0sHb?XWCR07_7sjgX-L%u~JPhJ6W1yYlOv
z>=<W#$!T^w{<Vk35HX?tI|a#*iaNgr?P);ZAbVOu0w5}GcX4D`G>_P#Rmg+&&j*Hl
zk)3@=TWeqKu;Xhm<1y)~6#%+wL^zHw<0sjfzZys!cc-bF+Kf@CJepZcFw$ams^p9q
zpTtb;#2j?<{OH&Z3V-`{HIa9G50pw9;hPTVL3W+DSfPxZC3Z@U=6k@2#qG4VDfk1Z
zpL+fGqlwW293t)Ap(xAk`td;*7xiU@xi!NT?6$c2BtPb%!J^e3{vN=;L5kWl1PtR_
zh?AXr(y-*br#l~tUvTtp+Tk6g1VtZ9D?W5=n^?>!1Ku~pl(s+PtJ;k-r`=mdNg|+z
z2{pV$wrHHn@^Jy++NJUj#CW}nG>i-MK&qHaxJ>Lv$^NN;9J;<Q;C+z1ks7d4ao_dY
zXqo(iR*69Ar%@PU;7OtGJ_UgK&Q)&e87P8;w5RzP-8G&A{u-*_Ize-&5^XZ+>zwLr
z8p0^(g|X3U_W5$LL&nbAMw&o#pCF_P(#Qav(wvMke;lqMVgY6x$<ih-^(=)JV83Bv
zG<6yKA|>(^KOSo~+)VI%fm1G<1WX^YAL$E))^<L{BBHggUFRkk^*>cCd^Gn>t^m?q
zF&Y@r&9l;AW>VVFGbbY!DS=Rsu`c6dmtU18B;2Mfruqhmg^}M#SY3)SS5+X)B(9tw
zZOK#F&Tikv5*-#V#frU9v_&0lFoX8GxOdo+rA{`Cl2`QGK1Ct+M8(8z&=(IqnpPZ?
zrb7f`2q=2;yBh7qaPX|u%Mkg%3j7Z+DFP_%uC8o#0<JRpF~6to=;SSSwCUR4i$wBW
z{;$n&><<Z2V>cO=tDpxIT<ul9%MfE^>rF?a^ag<vnnvw?W-oR5XD-(6?8N^d=goxq
zy~dkI!FG|~hZIR?bQC9*T9*VTkD2Zg<LXc>=n|5VbFai^B<ZTe+H{;l!@yf}TY)+Y
zKN6=5RnWsN?H0KJ>IiGz`g&p+XDb_`3kRJLaa=*pN29A%9rk?x3-`_tIzL@!;;Ec@
zPf5l7Pz&aG5SF%FtGG^8Ls{qfJowAj8rj#gvrvb5!{qb875VtKLKfSAQlGGfl|q9x
zW$!fRlFT?}_o!@A-Op7rdxUZnpU0i^&7sJvPHp~9M4}KTq}ejLnOG7*_+g&5QZt2S
z3ra3dqWGUN&yIJS_kcO`)zj6L>TG%H&lVp>Bv`P00eMnK{{3wI;wB7^)PoRe9B{>2
z3lUD0cMeMX$&qRRYH4wL%3|F2%hv7R&(%pA2_u~N{@Ts3;sv-IOI}DJJ_PAXoJTe!
zUtt<g^&fM2JRABorbr^C^!~?ZQn9qS45QETq7WY@zy~arP6ehp|2C-qf;BOm7rMMH
zJ%EL6=$&T&ab;W-Tkn~_kv)oUe^V)j&Pj*{mZ#+i0#B~x=I-oyhd2;Ok;0^v!0Upw
zes|KuNLdJ41|1wSnc%l&@7V%)$@8UQMm+zd+)MnMXxA=TQRUPhVf^HYvb+I<dG{AB
z<e1Z|ggc*>nr6K?R${3JN`8#mf7cSyr~z^gK;7Ias?u*G@W9`8gr*JsmsuvN>%xg2
zY))1h4*Y>dj}|Q*h%6w*FqsG{?!6hZe`ClL)f1EmRcJqFH`Ly?q)eiQ{?myT14saK
zO}5_)kSqOrJ4Bipp>B3epta*GpX<66FC37Eu=5(M;g@$|3m98CVjlCMfCl{K293_f
z3VsvK1x^uX{*Ymae=^S<;{XUtrKP7n(Oop1p;7WFZ+NB1gt|mZ$oPGMt)ohZfAy$c
zt*5jGq<5X7Rjvz>CGhXz_q5*!E;xsjgnU-xmpjp4ed<wiw5~(2=$}zzUi^+<_UOK1
z{ve~7?g0VH56qN4huT0Si%PKPG|?%fsSCDQsI+&PuoH7)Ok}^Op}1Ez%2$dbuSo0z
zc}cYX7go~d{Qta=Kxj1&rSem#_gS~kNSGRg$;+KZh<#*7LI`nmN`O!3Y@7Nd`YGlb
zPwE$a2R0=De)lAZ)VXr7f$4Zn+cn==Vt8I)KfUYfWHSj)rda^ISd~i%50kk7wbFHs
zHRb5*Im=bldAylY)a&+alR@$W!~9HpD6woei3JBAB}i*SqlQwc!}u);h9*%$pg_|>
zYKDtS`;%I5%Qk<DUN15md<N?$L!(Fob~q*ykUNf#4;12tuTY06@G4Xf5b1map!cxI
zOA;@Z6htz~rR%?=*5gv50uQdFlRCMz8yU)W#@p|^t#&(nbZzTq5TPW~CnlxUB!(m&
zk!Eym{06R99310k$)P)J#-keC)lj%4Lu@U+ExeK^Ggt^ucO4*|Tl&4PYh<Q3pFg4N
z!ET`^x%aW(L)FijnVqEl`S8f{M$^II2~88N{FGa>-f>;UVX&otIgs5d#9^HN+<~ms
z#p9E=A~6Q)kgL&|5lhbG);mGJ>4kvK|0#;E9w(6Dx#WQn%cTBqb-P{od8StRmXCf!
zwATdY$_)Y?Cm&jK!zHQA)r)a9L^=}GpSxI@cuxdRC7_La0t_JpAMO>g@Q!%J4J0NX
zZdYjQfnv^|1NvclX||~2vxsZ2iJLAgA=B<-4~@V2OB7|C!%WD4sA?oUid&HsVZ|6(
zLxI<-3=Rzf*G-!|VBqz{mZ4T3NjZ2p2PcBC+yS7&RRxEeneuC@y_$+k!FT;a6DkN~
zL>x5L<NN=_dM)=#acFN*;5DRKjvEX186IrIK08_t@|K7!m=qf~=@7{M7|lrih#u4y
zeK`6ydjp1HN>;d~M+_>`YOt>(tt3-J%ZOM40Hu7@KM~m~#ONcp$6Sq9O0n3l@P~%L
z2Swl(!G`_tqo)lO{nCxJvRKoIT2dM-F=u2{w)dF3L|rRZsfVmO>wabB)we#cd2OTx
zUg5%VK(Htb^pRss6a)t_2GeTyRhS)RTGlX-LVl1mA}W%JlUcz`m+_}t@GnBbI*qhG
zsy)iKx-CuH?3&zYF?x8GeU(-Xhe%_Y2mAk&P<U*5TCTIMoB`?K#`=6T_wLulN$K3N
zA#=xrrVvjh{#_5YuDkj@iN0Xwq@LXu&l%dHqhMpEDb2pAI6J}xl_B;_wWDL`g}Y~C
zEz$LdovR@nGOPzW79i|p`~(N-vXx0aKW2U}8ZzEOSG;Fedw00sCey+?EG(XV`Um?W
zW=couYY}35(0u--vs+wT7Fsy`d7M*t6iqr5Z$INq?oAo=Dc-ne$mQ0uEb5GX%92^?
z5h(OX=_==g)0M`QZX?>&WinDi7aTii6{~73uG}-mE@y@r#bf%Dx9aM^H+$r#dWY5c
zA=R-z_PEMBQkc87)%)DH?!g?C1OK1ny^SJEH#oovh|?aIwjN8XL>@Srmam8Bk>JzL
zh$1RMrDUx;`L@*bS-J7YzL*}+&SUQI9>S9uJ|U#?OwSHd;Wjgo$-v}Uu$G0;$0WrF
zVuaVRN8-v)OALaJ$`JyPyedh`6<!XbB(}NSEF#{u+oqYyPI8MqGO`1Y#}Cr)>t#NE
zu;{K~&irHCRjgI-m+%$p7xWvnEl~EX79|f28L2!lVsVgDqQnFsObH>X1J8#(2fb6E
zCkNEUViKOc#+@f`c!CEO>67b3f-Y(_6dA)ivkYHsYtOW2fh1T7H=U~rb)+FjL4aGB
zvDNdqNbzfmIxV=vInCvwdh&RX#W>y5b5ZBxn8`zowoMw9j?Q#UIY}XS^8|;>UtX*}
zPp#LMuBDJXw5>=s>5CUf*1tRUoeD<rqWyp>iSF<=E0-4|@pU+P%&B+wDpFwAz>+19
zd_+zL5yo51o!Smh)P{d)Wk$QFSduU-(251?tx+jRKj}`NYxoLrx7dPn1Rs-T62CX9
zNBt`@R%;SZOB4|;SX@RY6>T7Rov3B!<0D=5IokG<lq_uG@5#YW2qX79u+~nea9z#I
z$5^pRV0vpfX@f<poWn($^_5V^03C;;KE=0gX#7Z!to|T62XCKY!j@Hqmhg)sOnP+W
z+-jnA7lpfcnET{L|Ke<ts3!(}WV$B>BKXS;f;8K`UVj+->JP(vdun=NLOs7bAqFXj
zHB>o^KN&+dAO&5KqZ$Au{Z2+E-JgfjYp(sr%N##<G7n#e{`-hLz@H^y*ta&Xo9kUB
zm#d!V>2=0A=i%fxE}thC$gudqw)qv`x*rw-wp@JHrjEshj<PO$oIi#gp>sofV7{vp
zKBj5YJBS5q`_GJd+y6;l(6l}X3kD0<z?nw0(jjUR^*HkBXKssa6;TvGS98~x!P|GK
zIN3XlDmja9S5GZe3~l;F1<I@g=br$l%{X;Ee3fcm>}g@8hCZAoU_K)CboYotvEt)b
zZ2IyrAiYAZ`V4tB)_Pg56`Zo3-Qcoi{l0cQ%tdOqQjt+imJY1IV9@-qQn_1&V@E_l
zRW}|}{57S7=`~3#zAuiEkTGk}@|0$MfFD5zg%%D!1DY=t$nyIKl3Q~?ElkV*CJ9A!
z+b`xmsMRP*GX-D8ns5qMrjtyJX7vr==4rc1tOnp)Ec`KZ*Bi3%B0et)Y4jxA&K;So
zJ4B}X%pMS;0+9}L>x{<7+G2XDQ+)vmLE4GViQ{$d3Swp_AyvC%aULxX*la?Wv;NA0
zb^=YmYTDW9RHV+Wy|QIv7dK*cgmp8LR`7#~5d`9}$#_9d9)2rOp%1yR3-i^$GXifB
ziU)5&G+m}s$qA+kbOZ2BHw7o?g%l?Q<XQ~w7+*czZnFBq>>`mNnz(l>8D<#By|lBp
z`zG(J_TmhVlicCxqVd4r;FOLFV&yzO?O{vzwUICEs5@|R^l*yZ6r8PW)8Zkl?N`N2
zX!?Or9|7a7s!68&Z&&$t-G6Tzv%tg3-R2ZnNdW?dg4;`(4$h1Sh#;3EUbbxrsS`C1
zjxX<+BTC52Z$crZw%x{fxdL)$Nta}&Jfld>P3Jlg0AK7jOnzn}09ZAX@A;R99>>I8
zu^O~(rjY2orjV=RQA2yem<g=XVeVj=Q%vvqf!MWem2H;y;bvx$wz*Y!FOV20Xes2M
zGAm&zZ+?4ixVN8IPXkE3HPHA6AB4C_)71WYr#yoWI+!a0IGCBO3c$(hoMSL~p0K%E
zGwR3D$UdTSVnYIA*^(d%Ol$Ku5Ug&}c<&m&s07QQ@Jt8O4iCqiAU=9Q=*zXOnM+mS
z7PXPuO}%dl@*S9#^EF;j?T>ojve9cQ?n*UDWhx(09F)m<)o+l5_?&O0$hjQ5c#F2G
z(hn>{Ld+ahn9`voa!(+Wt5+mv2HFJQhA!8fE5Pyy|KqRqu<!Wo%9FpXM;3HJg%tvI
zoij&8EC7dT(?jtdn?`f3rBCJ~+jN_%Hv!r_&O#EJEJ%wr89$bezo{l-q0E~G$O;uC
zHiOI8I_jFEiQp-R^*LIbry2aT-)nl6vDw-o(hwD*W<xKYsX^_vDt6VN_3`oVosT8!
zLL}%f3ttAT4uT50H)^pY-3^U6C)>E})SzK>=V^7eC0Bf>GcHhI9DY)2-$eOsRpYW$
z%;=FtZ4tm7lM-&wXDC#VUZ(jngbcM#?aY+{FTr%sJz}g&_`Y$7-Wbs|avHD7#I;t5
zOq8SH_yXl4rwy#(9K|1B=!0&P-3h<~m~n6ueUAmxm40WinmZ%ySiE`bI{$WwS6#@A
z3PYj!<OYiF?gu66v&7K||2SToIVyWaE^vw{;0eAgH`rL!==Iq$ZJQ1uTFkj4cGo}o
z&pB)nJQdlTSSEd;&{c>Dg_3;t&Pkoh#b^vZwXXJeTPQ7bfu?YUvSg4m<1q%*vU2kD
zuNj%zK!?3^m?|cw)74I|{%tlns|?)D$K|r?z?4mPf>(SQaqutUqS^itPki`yd%z=P
z1J63nj<zv`g%fEXhObkYb{Mt4`blb<XiPZp$N(MdN*e%K5YaR=!!~rk?Aj4_Hs$#B
zuF%R<C~SLVZjjiGHzKA_bX(xbnHT(l!!`3SqbV{Hc;B~Sm=*V<8{16#Sh%6Q8v*f6
zSk9Qt%>ISxI28+HhWo_?oZfwdCl4i`z=}(e-cFGCqHaq!1wUl#|4;Y-y%-1sR=bk{
zK$0ni8lIS)^bHYw=pUFMp?(d0R74$T5KOKcU!$%d!NB1bu+E<_!lFW<n9e#jI|>Xg
zL62O^J6i6B^Sb<7r3hh$XzKz<nGq5P(4OpQaLSv^egwR1<Q<zPtt}%_XdkH%w~#(*
zhb5Y9IcGwD7`X?lDWNa+??W3zfucLm<tup6OgErqMHbzD;+tdjI6lS7fg^yF?I_n}
z@j~kch^;CK)I<xd*q|*_XGrrFzME$+I>#dN)u<EbKx^Z?uPVzOJ#!z>BwDL2X6mG}
z0TWVeq4yO2%DCusfH&EeHEvy>(nvm@G(Hwjh;sgz!B2i~*3wYSx?xf#!)=8Nmcu<9
z1uOX$p;cX!EUGQB5y&ncl>Xb@9*9-fXt-6Xb2ge~J**tIkvf|xtdu&2rsM!zqn%mE
z>|@T=BD>aFXGaMHL-CCf0~ywZD<gi^|4ezrb5CvK6uAUdxGlp;=*DKF0hl4i-RVrm
z6Ks~fX*SSsZ%mb>ZgSE2UhBbmD*qK37!O@*jw=xlFObek&w!?_2>Q$Rk={-x<q-ls
z`7#mY9a1KS*fD2(-WHUZlLQGLl47%7Gno064DZr@oxLK?_`E5HgUawr5A21gMn1GK
z^&~W0ZVg^V6lRzy4DbpcPo=!<giG3xv(w+GL=pHQH0|HPkDJ*?o8ACX(;o%@pQO({
zX;M8(Az_`{$!J;LDrq+3eA~=8QI8T7Nctx`1&wp4#)Vy#IbThOt}P}v01^l50$sX&
z_LK8&?m!<FxMtiLDgnEN_HK)5FH%}sz{C=2XL?V~w$9!X6C15|R)z-&5d#!Y<veD8
z9IKDAZ`i7@g}=>90m+Aw>uNQF{(^tE^Qu&vbhz=yt<{YG|D^OOknl^kH)t;aAHQcf
zaD5?G?}g-=vSpe!t-8_#uIth##h@uWBO>5#qcm{ImEs^prY<aY0)_kWovqXn&{fWd
zTLktsbQj*&Z;ttUb^42FX)@RFwOs!C4s<}Mq*Dhq>_w&rN4nA6DAzqCjtIF-++tlz
z#=+zQj3~$N5`a)p?<3A(4(X%tsM4%+GObH7+#oWxVB9qSvjz81qW2Fu@|jhtX>Dpv
zn+bSkYr@$T+v|0hywG(H^$Q&{Ef8B>PY)c#AI+^_!K&)q#CnOjd<%lBD%Gs}Z)fUU
zOOeaAv{?NcpM=z*pzqmR$*Pg|41U#k*p7%s#MG<jPO*1bclR?^gcpBNDMA+Lhm7X^
zq#1I7u(^5M!U#Z^qfhI~P_XR+yk_9I@pDX{P?L&KQNUEUsz)^D1_uPNkeeCMmIf=w
zSbQ8hTVAbj&9262XOB-74ExFWzL{6Y*yr3$m)s1WUZ&6(xy1xyyRay#ITj%x8$uDz
zTDd(Fyb#Un2bo<%i?v;5x|xaLgrqW@L_cqM^!|1c$O9rS=s7Ge76{i9M<)gLaXpUF
zP1_;JsaQg;<?1r7r<AN6aC~bEacZeN_F&WecEg}rqO7dQAbY9s+;FOggGU4u<^gnt
zH6=8?0LSGGl1<q(Yv^bWujb2qFsN-&{l;gM=GVH`$TQ}z#D{exA`*xNrlwH6g6l5}
z9o5i5Q;kZ=yyixYeU&_r*UORwrJ4)gag8V=TN6Iu<H$-;cbwZ2h_63L7`t*8{#Zol
z4kD}P*-bKnyJ5)o&x+4Q3_uY+s+~J5P;lA?ykzJ?^{rS<tF0&Pl5_x%V*=ZQT}`Pb
zFIjiH4JF>G-K3~p3!-~KV74g%A$#eY>x@W<UU-ixzorZT)uneyXKiOl1j4e+&_ZHt
zvZ)wXhN%rtAIFWPetL=zES8W%JO>BEXct~E8z@{omzj8Cu^1U3JtlYx=U#K--|;X6
zO965o;ic#S1*TwR!8w9*RFVt$&$XpaiUEW9gih1|{B>!=(L|83Z2}zER1~u1wX>1Y
zB174HPoy%bzC;;*JUH0i7*R-?HnPiFvNP}kGhD0<)IhB#cyo<}(_aMEFYX|(Rr^mQ
z+;FvrYT0^F3fM~U3s#6;AcWI$<h^b+4OP8tkrg92OKWH0&bFG^BAo_I)K;xPg;5~>
zaX@|mUl0IOly0QlU|ZVK7g6Eyi<@&2t+F`kn-Qx!e~U?&l<r7|4YhnXcM{LOBL=xd
zXFlaE5VMt1@oN<O5y09BesfeT(kcx?5Pv~le~YylRqDVvjuUeKs)!;&v1XAPzVZfU
zvtmsgpxA`-GavZ)f)yks`|7D&l9g6Y3OKdic&3S`LQoRQ5&YGIzS+V0QJV)xU2aYm
zaCi#HGD+1v#6X$V@F<$_g%1QXdzMn||8}>y%Uckj!4Mw=`G{2_2QBB!44W|nr_H;<
z1zG=Z84^PMIt<>)ij17`rS$}^i>z6K3s8Lha_4}c82(%uMl^f*&qKq}3}Z*StEbgd
z9YI}P`{mpkrp_Oh(6VV;Ma6ZcSr;Wh@KMnK`lD%I1|)z0aX{Z#HnaU2&31OH=P5zZ
zHqJAMaY7HLQGLi3&Tt&&YwLc`WIl2JgguS^?{R(wn=b+XJM&3ND+7^YgUuc%dkSHV
z^c|UQ+lws{1SCz^JqT+$Tuf;Ih{T>S%{aQ-GFXfntVcCST=^JL!`fJmq$&0|;Xr4X
zpjr4{#f8+^n+KKH-|{WZC?tI>eCa)h(pahzL63+#LuQGeCqDVK2Z0%Wq~V1XBxfwf
z5Zq>TUGT4cs7CE<ZqboC2Jua=iX<}f0W@gm*6O)3O_LDJ2}VQAmOeoNAl9Ir2Wmz7
z2S3--^Ig??kwW&+9yir)Mw|dhUOXQ(+<m?5<f-AReC)cV^2?n6a%K^?ZU3Zf_2edX
zDK8ClS?i6td@QyL#lPI+dzJ4tM6!dK;dN=E`K#d`DS+*1qokVNt|>4f;*7OyqR`&S
zr0Ypsx8WOd0d53rNUCVm-5N^&M{HMbef18F&u6>O>p4$1^&4x>MnJirDH-fq?Z<rg
z5yrOXs+P1Y=?#G>-s-m%b^AB~x5Gj@XV`B>X~4!)_(%|>^>4$SgSA*T;M>{~w>8RX
z$?ToJzl||e(iZz{2)c2#hgXX+hzerr?#n{o(oD9n6Q%zEh(zZ7A+V{X&OJa~G^F)r
z8}eLjCH9mxAfNCSK1-+3fRMx84MflFdd0D31=<=cPpFhN=ap^Lpm4&q2m^yHdXI5i
zpHl<SeE$9cx348u>h*=6_0GoRzby#Nl}@7`l$zknWLGAjeC+*Z1LbwZaM7Q2569GT
zxF|lNe_^Z5CBqq(P+>}$hwK?A$neax79(=R{0OHpKvsMG${QGsnENc-O!TWZmJtTk
z2+26%zk{XqfND6$o2&VWIV4;CRDp`Y2ndKqOUFs6dy=eFhB+#u#hW`jWeyjgT02CG
z1T#XTo+f?Jy^BZNbF8#VKKkDPPOq(mhZI?Wy{rE{DWV~%B_s$GiU7?QrhZpDn5jDG
zGCserZ5u>TepArB<Rum4aBWx9{m}o`PL-wkIO*sN!$(a=+ukmC9%#R*0Y5)pu&WSC
z@kd$N8~wbHy)3QK{5%KIc~VCSOoZTlh4hx5=$AleDxNGheKWW=;hE)bZyD*0dDvO~
z!yBU-OY{&59NWEZhXmabJ=ub$Gz<$tV|u8P<5l-aW5WfQrhDiX12%9=CC=&%7=PB@
zPuK%oOHxTrz=5mmjY{E-ybo|4VB9x7hN8bC7!}oY07WPdotQE=*gyM=Ln#?QRMTJ6
ztdj)~`V3M_>wb6~S>AQPEL3n)k!l~-rVR=8%@R#-leoG%QXt({XE^j}7`d7ClthY7
zpIw2X-|j4&m%X8cpkNm*k{}v!lR4yB(razDn^Am;nOVG1a+1(tI}o<hf8TX`VAs~_
zJ8o%$@)7Ng=f(2{Kd@3uZpX+e{NHcw6<ceqm;{?((X+_mK>pu&zTKi7<uaF4g^+C>
zi6Gi^{TV@XR7q{tW3-?H!1A4Y@1mFckhaI#={tAPq{0;xa{(aphdo250wAF~-WmB@
z*`BqNOFP|65~8=X&cfY-rrpZ($X_s62M|L){1;vYbCxs>I?z3`vQ4Rmo?{A|IGTY;
zE%o9t+kT$i9-gE8eL#YE`293-frew8v<dS6nZfxZN%L$gN=ntOdID(`P-bJ}8Uswx
zMoy+}SmysPIs)e};NfnHCW=-p#pWzwlw1ua^n!$wv6B6IDF9QK|AycZqV|j{0w8nJ
zs(>WixNb>liMZ*ak?me9?2T*+3;v1W(*Qf0im`5csB=#dKaswgtAJK+AqK-iyfMa(
zB30hQ@zH5fof+GjNHmk3faQ^17x3IxXNTQk%0oa7Y%i0)`AqkJYr`-F!Oi~^jG3$1
z^F`B2AVL?asdpk-=_S@M+?`C{T%ar7&a+)hx_sR!<x8H^k`N<4Pr;7j1jUku6o`q_
zSL(F}jBeu~x~$$0FJwF|WDmwZ?l9wbv$VrSkp&m*zEPDKkU__5s!7HBs(Q{`G!{go
z-?XXNtmAxOOso#Ms*u~Vsn)w0K|HfD|Ci5`BzR3mw}%l{zM{SDw_(yhOf#uBPzsO^
zdn&MhxH*}MR&qwdl&?qjRNPM@)4bKSXKm>Whiz?W;q=?E1CV#l@If{^qM6Ork>iFx
z18q7rM>5hm>%n()nuPf9+TTYEen#Xu!7VH)@HM)Xv_g><#zb%E%xsEsXcfxnxG~*i
zE#k986UY4N6N)`VZp`xipzu8TtaOw(CvBIN71=*)`twT@$mwVmoRfP!?4r1U*+5Zm
zZt(U7oN_93`Zsl~aH7gg{g~`pLo0kTe1a4pZu5Ngh!o_4B<40n0$W9{ii;CKs>#`$
zB2lw+YE%Q5iil}(#N}%CTL?k4n-!HK&0mZZU^;Kc^_g|GHJ>xd$GG(=Wn~t_U75Io
z+pWeZh!Yx(uo*nByp8nMz~!SzF0T^$D|RnHrME)DE7!xH;neVb?u+(Sj2rZS|06x{
zGYpCk`BD4g@1FvDcO$P5WGasNZ71vOM!?X|U}kw>(cqjIAMP@nWz~jS(4!JZBLX*W
z!eu(@{HYc%2KihLO-xjp6juV8KwD;aaoni8kX-(yJ%u8@l$o78XA#H`Za7j4C8`nw
zKN`)c(8#ed`HThUq+EA1lD>nhD$6}xD1i3NK4^>!vpy0=SAC2EU|hdS4EB1XUrmA=
zj~3ACd5qx=BtWZ4XXdBi)pBb@op206Y!AlZfgBV&HJSv-@(c$uHhmAkod(GDSMeN@
zI&SJ~Zo_&m%tGKG%hMsLBW9w#9fX$2);{18qvm~{!{-yB4c{kJgCXL_OVLJ;INmS7
z%el`lAyJ9^{VVW$j=c<4>y)jBY^Zi!RQ|=`>0#EHoDzAggCmAb9^8<S+EQDp9kVEj
zu1#3VLCFA0Wa$L%`n@z#%I%R(Sl^}mtpQTv-K@b>WMbvX>3TT!><mY-kFA0HG{t8%
zy$cs!yqZT%=<3DB-3SZ2>kK$Qg1_0e*LR%N5Eocgx?vMIy{hv96PsZS&A$rNSjW15
zw%JmRi$vs&2t&PXPAr>SudpT_>6rRaZ8YQM-+=l1h;?i*bdoOi&AY(xe_rN`mH?CG
zw2p<{kZydJ@I<QWHcR%$@SR+p0#QWs%%Xxf?$cm6^!5YaHh^obNMfttT7zp~c?pCf
z9xtifhVH+Y`z?ih6(IYX`8&Go*TX_QOJ2|0w-ybuGrVb&aZ_>J5PBIZ;xLb{+#oJM
z11l?>fGtuYxNR?Aeq@cqOx{C$#AQZZ4nx^4o_+F{aQOyV==T&6d_v0VmHuHPGEU#o
z?D5(X^*7gZ92j>iZq5@fw;U8YwysPTWmE}!wvZne+LRFj1TWKi5e!LmMu0gR%sLZ3
z+nOL-Yd^LmxeZV4g1*2aIITzy!Xv8;v~ZgqM7dNZD$-%`(~P8#{D-)Na3d;<qCiE~
z+@Dzc1E}<1F5i!<T?LN6$NC*%``~{%8f#OljOQ`MXH3JCp!clbtvI}nZ$S@`&M1nI
z>maLSPCOZoneHkR#SGui@)2D4ZJJ@BQ(A&lri{UF1L+Mi4Q6nwaz3l#THjz@6NkZC
zIDtaSr2^G0(v*R=WtcQiNyKMqprq4Sy+Fn}-}Svo&+~Pvmb!-cI3S8}y^Ym``aWL?
zgO6x?t@qzeiUrp}6eJ>F@?CeMYUa_4g3v#=7dxiObu(k<n0w{<sA>HLY$ctn?0r<c
z9d2>&v_~?I({@e}c^Eq$7W%FB<n~){vdqP{Msn+FgkMWO0(^TUv1kzLub9)$=Uyfh
z*3Kb%hTgs30FxOh&s0?(90n!hcQRkS-wi5CWHy!Ii#a>xl&>1e(I|q9;IqTmy1mq*
zlW~=v?6f=UC1zx)gz;Bif6B0ur9$zJuR}hv(+gv+)7?BW@gj2}iEfTFY_1L%D{O+y
zgC+XUsy02sGyXSlTJs$bfRkMLNIcQb3RA7hJ~9{GYt~QCodu%B`Ud@{eV7*M_a3H0
z2L>+P`7)z&hK&*C;7E{QzVv#)T_`x2M3~QBPMp#yl|mt;2hW|MDAN7q)86q}<Y&uK
zrq;!iMFu$(cu%g5Vt6E?*9?7-yx4>=rVp2s7cAT=??*I`r)<g1l{<yc9^ID&LSqd#
za63mE<wp{3W&1cd%b6P=v8Hs<CWaFO%UPF&111d2QSf%<UuK!nNV>HrFWs}ZSkQZ(
z)^q~M(4@|?AXkeY3~ei{+i=t_Xsf!m<M02MoXdf@)J&$SW_$WMKJjPh5-X-%v7^A#
zv%=+QHOQc`B8<s~L{2GbfhWaTW0k)MVp&8IhmdaSD$GNw-m&yaV?s<qIIdyBD1{r)
zgeb8#ss(cD7oRhI0IkC!R6GUK5a)`(jUKxJ{PMBBwOIQN)Pbu;rnER<(!D{_e7n^h
zNw#22Mqq~L#MbStt*(M}75{~9;Oyqr4^$k&mm=AX&3TBHvo4agxnl&SuQQ|?)zs1H
z(vb4dF}x28zVNbETHbL>)PlZDaZQT?h88m4oFW6}ZvXI3$YV>WcLE54z!c`&RMv=N
zWT@QQ(Cz5Fvs;9g2f=ei;~l)+l3A&Kzs~Da)F~k~R#cm657TRq4O6IO$4!)zDxj*&
zMK)Qo?;1%GuPQ1g8=hxj@{&2!>D855uEe8{tHgQ$nU$G)cNTWI%*<}Y<REIO>&hmp
zZPD+rC1|*!e{u=oQw8V~#gqlb5Tine{bKSGe>Id=R4px5^<}w+){cGTY&n>pFtkM0
zF*xNDr-|(e$jcow+-CxFu6Y*5By{RD)XgnG>3@M-RuNE#+9s5!C$JNn(e}eH;tMqN
zQ5y+d(eX=&-xkOOno|iw6navsz|2YEheTxlKsQDc#1iX=jNu9@!In^C{`7c_&D7iG
zaB7?n)`ys6=^nM?Wm~xw*O;2A@!#%^yAhA&tdya9>#TQbxS;N<T{443JC#N^mBn=#
z$re4Uiy`g>Ux}CsE##e&<Y%H9m#i_3XSh*sb&g4KCB$xdEPL>@g#h~(SG)E}Kfp`a
zQk$B5Z2^EX@`tL!N+L3h)3ZyC%lr6PX%wK<yf(uhPn)tM>33E3+&+W}-w0C^mPI}h
zKa7eI*6Wtu>T4U0a4?A8({9=r7T!i@0shN!;vyBsFwn>(2gE)5xU)L3*Gw@8z~$CL
zBVvp&Ms7~7QNz-dRl~6(i83Cll!Ur*hp%dJy4yCDt1PrO&s^BzQVpgk65idVHfE(z
z7FTBc_whx7VV#gWqj(?F1Z!K#f}?|Z%D_K@byBF;(eBUj1ED@>;}Gz6`cEZFs_s;A
z$RvwYVz!=O?iRv@FnXIchECcOCVXHAG!F09hfdvBimoHuF}cqiDFYs!ZQrRtFXU@g
zV-T)|3jS1OnwCk@`ptW;KykX{BT>M+4to9ia$>mos3JbH(p--@y3|>$OQ_8J3*`Fk
zB%D0JdRBw9q=T?WCov_foNgffaQtt=u9j~n?(<2h6v+*YngQNz0*#V3eW3c*w|v@e
zwqLB70r@s1v2=*AorOonxuo1+(v3vNU-%1a7b~Od!MlFtqB46VBy!P}liFefd_^Lm
zCt?!<@fjab!cWC!B^cQHNsa}jCYETsgPwf4BS>>57Od2&P|dP7<IDl&=BL;M#r%qO
z2UeX;AO;>)+axThumt%Y7V*r%rOGbqzKzjiA7Inl9!W$ebxlo#!UE=jw4%s7&&e2~
zj)Ryph<rgiQD1Etbj1qPf{RhPhx{!@U1|2S-xYR+)Z#wav48@8O#m|6x<NQ?jr)8&
z_*e8-B|^h%AodT)#ad5ZAhOK1%1mmb!-;~g77bF@3YH^!247TM%*#Q4&`YmZz8SgZ
zyr%DYAZJdtdWoLbE?KPZaLUNwijjZLzj9ZgAnT>l-1?Cg=qq%2(9=#VHUU`+M`!~=
zzP1A-XM4G!{X53R_{A-M46YH_NYHBCa#8w<Il<d+WbJE4XT9A?$ikw!fG=YS7#%1#
zc9A8m&=F!9_nK@)D=MF6Bq3|Rdl}&_ya0_u-Auz^BKMMPnYLZJax%8nHS2gyFK8{w
zZi&<$igzGp7UqWS!F9+j>w7kA{!uOeZQ&vaSZa<5cWdVDR4Y_cU*y_TJ0V?hM_{UF
zRjFRVBBm4*r54I=07GeJ^{`cuUnC3TBUt7wmhi5FIm-*Sci{^qTa?<UlH*^Rh#?sQ
zn*V+^_0P5*G%`*EL>`OF&bG)jdt_2L-oBRiyi3e1;d*)^LIFBZ`=gJtnTO(dV+5wy
zKN$^K!3<%P$qWy<rVBL_BchAu+B>;k_Fu=ZXKSs(gI=#X-${>J#0^D`tfFjjjKbd%
zHlrYg?x)OsU<L{5d2-ha>qF<V?k1n0P(~<uU9tEL7cG_y2=}Z8J)`fHYWI);2bH==
z8M5sWm+41`m9{4ZVx}iCRwgg5Qb2P{W-#9Fm$+ID^@H76pPL*s3kjg<;FC?mNoGhT
zCV-Ec%hh!$s$C^6(gs<l3S;WE@9E%k&c;GbYVl78?sAVa5_#8S!z9HA$Us~7$a+Nb
zn+l%A#M()QMW-2mP{=BZtuKk#R{RKGVMdN+wqH}V`=2a6c)fzZYI-|^;iA_NGAuIK
zh(!c;S~HaJgWTPkhSZJtR!S3?s<Kn#Zk?=hEcC?f{JT6NK_^}vS=%%g1HKx;-n*+w
zn?@FhsmYV>8>LkHD@&q(tZpA=RxrF%80`P;V=j{LIU8*c`&fBb!BI#rDXlAUHefme
ztmNax1aiS1KERGOZ|ce}9W#HXrg(2OD1M2$Q&tI1w?v97KUFwuE#X}z9|9VwZj}Kj
z@R_$d6vtp{JyQJJr+5kRZv~|Q4**9F7K&g>a*G=T!<D5TUVGFte6P#?d@`asZidb1
zQ4*g1&3Edk4vu6q?vz#*NorM)qLIk6|5cE**@BRviD<u(lxZ4Wn*1(A_l~Ly?aVo~
zkqHRp|LKv7o9fOmvFl?{se~q^-H*79nMR>4bwv@a{rf~q{7Pp0{13q=_1}Biclr1B
z@3OH9^zvSLW<uwRL9x_DJnAgjN$`&)3pLFWwK18o;^G#vj-@~ml=XX`BH>!_%!g(l
z1&?}%QP@A$wEuJoVH6=F!rP>f0HEA>ZK)T0R%x6$%9|${L)V5!gJ=iNN@s-}@u3`~
zq&@dYqm)mR81u;!4(ss4NbGSR!~j<>J!%+Wbva6h91x!lMP9Hdxij9T+3HwGoP-L0
zkhbV~>RufA<NGt*!!SX>VFq&x<WnHg6EKj~iB(rf<6>H~W%=2C8VEGctn>SX7Jl};
z3{10QIVdfa?SqmOMEwrX?46pb&<mlayL~8ia*w#iN%*uU3w<_HYkB5vAUev>Cd9bo
zsP(ce3J_**WfELIcoRN`TX9XOiWcSeh`2}ED>)GSY>R6cr?f-R#aZYXoQB}@sKGf0
zwv}DzMo0pQ1VVfJ`y5(6A9=Od>y)6&vgLhxFhv6aDTKv{#JbCerxj|X`%E-H%Oli}
z!_=vnM1{gD-n7j{6LC3EW+P;4%25He;J>_(7+jkG54Ay#p0wvZ(Ci`8!G==IMj-z*
zn9UlGKi2d2p9Px$qA4v<o1+m26pJgsA&~pJ_z)s_;R`kz;yM%)?os)?c%-My0j9+!
z#-vJik7YC*cY!D2p)4%hzjD~NwkA_7NL2!`;2H9(f#sRiDofDYu_q-vO<tghyr6=>
z(5DtUPDPX@rA)EX?p!DW?_-k-^7~YzmPP->mtvz`-1MN~BRvBj>xw+8Ko=hV7YqTo
z)g_O6pR=(4UmnT`RF3UO=t^KDmTlu!9C~df#_d0aumyNv8A}}Rj%kxK)?{gti7%d;
z#=>!+Y+YcfIRfVJl1aU^`?vt@Swy%JB>HrLa>ToaT2sj?EZkGMb-$x|j`jVSkWfT)
zxmcXv(u2;%acz+vXO|-A170&bjPN5UmV~O_rqxxPV+-P)p8H84P|qW82p2nRCtq9Z
z*S1y*{_@xcS2^#tfrQwXkd9D;XE8lU3irj;YPFULo1@^VcnYISjS2olPP-X7L)NC>
zqsikD5UxnU@*G^Ro-KPV#x%kd-)u!KgWIV0EElvpmX<_#F5g!BC+s0&OIcx%4U~bH
zy_5!-l8mzQ0PRlq^e__dAwmXjo(9QkBq{&_y#la9Vq%O2(hK8D^{iO|l`MxBmsLkQ
zy57fEbu#U9V+G%k-$(NSZZH_;N%l;C!US>P>4@IIKtKF(u5lU0Z;_BNGVg1;c2kEy
zT6cWaa*_VaenB`b^#&qLD%rWh`vHb!+zh=`pjv`g>Xh*+lV1U_!FlNf`HiA2B%{M~
zYZOK#aaMCsCkuNWa(!p>RbN5aNWUdi#RR@$hQstNIbgPE&e9*K%(=MZ>W;15n6~BO
zW?k>OsEdzi@JuO_y+yBz)l<XDF4XbL2{WZHTs{5KT+rI=A~DDw*eIBsdZ8rO>+UKO
z)CaWk!8@d73k)mYGob&2om)JfH2FZbfyfS&0bR(m{nA=ULCJ30!fFoI=yFz6fCG@X
zmzsBDEjS@OJ6xP?wL5;7xFbQ_F3=^#(q2>rB9WS=2^ML**$_A^SX<a>udswP-p$vp
zAIUx$SlXH~E7aP8ti{DBvZhRff@u*K;XeI(y*U}xOzf2L%VYT_bN~YN1Wz7|#l|zu
zx{t$WVc4B$)XCY`eC<h?2E%uYndKT!29wx`CfDYaU|D+qihrQ9jnaYY9RI0iH}k+3
zE2(&Kp0i4yJ?x&l+I>yxgXVq|s?m6V`5PdMc?VSUWZ4n44C`7sXwx@3&nqlALfF--
zaAx-V(hU`HHc-w^Di<}%y&X)>skF#Q#_*l|Fqv-^V3uu73?OPYsAOveMbXwb-mi2<
zDpn<FxY^V>fVhb_Y|O6~!kuv0xKW>#*$_;J-sR8?z=oZufOb8Fy4+zIco=!oF@@*B
z%OR6JIW$@9r5Z+O1Dw=&HQ{g4-pD1CH9eCR!9P}bwz$;ZqqZdeN>H>xIHPNRS3R>z
zB}DIo#}8WT&T)*0kH4;6Y1?smvz#SFTBdIt#ZiKC?Vj*#(P@TWcjyM1&hkt-1(oIE
z@b0x7kUC*HpO@zJvF#|%?0bWYr`n93(ig;<lDTrXu7YHQLG)=LIr@tnUe6=BdoMmI
z#}XYK2P_-|)&`?jr{O0}g@|UYUMoNtF#i%~{dS|p$k}%Gg<Lo<atXw#vzPgOR_W4c
zE;|;)SVvs+ISQH+hxgG?XW?mA44#Ip$D16sAeNx$MCk_b<NvbA=p97qfcSg=1&DFb
zg7TIU9HWX*a?k?u(}X+lMQ>26{EFhosN_Oj<c--TWbO5sU}~hYTGjY<4-qUaV1@k~
zWIxUSKaq7yNa42Hw)ctg8*`<1!WKk)u|-N~#uM$s-_;YSi!ocxCQ?*lmD!;!r#c!t
z%~X8>_0w5?t`SX^c-y!p)Q^l(ngI7sB6vgGU)%}nvhEmv5%%Heumw>D>2ZOh{7K95
zlsaBR+8gEZ{(30vin0pv3+h8e$t^lcDr{zgPW4v5XNEXKsQsT69_?`9gaNk<3AV<x
z++uYJNmN#ytHYW=ebB$<|AncgPR23<lQ_E+qtn|jW%(05E|1DS5UQHnUXegCLUmhs
zeAf$4-M~M$r+I543v>+5rpZy1TbhX5G9NjXkhn|e<DYBz5&D7_PrvK@6o-a939!5?
z#uIUoyjOtjq>-^1%p%|<JP9LMan06GTQtG67}oYIM@?Ldg`Y2HZ7;U%0kxBl8yQHY
zUtT5_k!B!L(aQ`v5t}thPncCcho+ozeV%rr^xI^&nn=$3M9}6biBSv5JJ$CirN&Zt
zbR#HwINk8)(-{5sfzk|{1+XKo!dZa^>2c1k=9(bm(J~VD4cq?ySO3N&wA_NrhD+}O
zK<+JaI#f-q^hhml&4~GjcBGsnmg&Skju_wf5#$^x-!j+dhrs+2(kAu#mcWzjd$k#J
zZ)BGPMl`s?FKMtQ?V1CDi6{|CU;<VXrJM~85?U;Kkfzf%O=#m2zysaJU6Z=G)@f+s
zkICJolvg=Khlw&FrjfVeq4|dqm7OT$+j1j96k4z)phSBFWFONEI>@;d^#O(CbBt6u
zq-tqp<tD-5zxrhvg;XMYTB|8evH%-BXftvUQ9^wQ4Eu%X%&IF^KG}&g<3zJDf`shm
zE93pnS5^%hkBK~Nro^sW&n!L00S`utO5aZ@rgh8~Jj;4<e4rt?uD^Mp(UT$<6+w;t
z%a#}Zv*fwF960=~Kkk`r^6$Km(V!9)3Qcfz_wnizj4&N(u!)fyU~GOMbCXe#=&g->
zx4&?THy?su9xIsA+>;`y@Zp;8H+IUR2*@3+3$9M{lzRTwIasJ9Nlp`Yy!hrSWi^+x
zPf_I!6tSd1JhgF!w8#jk_OZzoWV6t+enRwjiosBC^?JKrY{}E=PC7TPK%(xTJ>c{E
zA(R#mOF%7d@0Ib&ex^G(_t#V4Vn`@tHodlCQ|#0{gp4BHzdAx<2{g)(nTXV`+6E0!
zriD0I`1P_&b4{m}!ZpVzFNH5HDdhdL8Zzfic>jDbQHa&R*kfw|uF@q5)5Iz_SJK&x
zRaGm{G`t~-s(AWUGZu2a{1Eq9%>~TI=z@~pTmH6Cu;zqN=l0cLp3l_j9gC~5DLSzU
z(zM#w<qoz3+XqBFG40xvcX_h(*N!aX&Xy3hgA=@}00&T;tHW%cRSA2@^UtnE#vDJ>
zQh%2>?6qJif-$5Q$#oiWL6V*d+mxcQj-kJaGn=QP9I7VHwNgsM%WJGKioID)s*|M2
z79(v(W&04UTGg;sfiq7)%&KYhE%gQmm{SdR;$?m>8sTf$J%W)#d`e{7wTEWpXvuU|
zn1E6_&A!nQFD(hzL6!p?fTc{{lGQ8VhPwT0i1k*Np7AKkim>?gwBv0hx_bqG7Qt{7
zoeKRnatQT+v(DJ#n5XTG__dJmAtgmEd@?CQ1v~{?K|Cm8Dg<N2Uk@!M9WA29OFqi=
zZe>CcWA*MSU*wQz>W{RRSL7rOt}~R(Q{NF)@SSfx!YML&Fa3f&I3F-rNOy@m5*XjO
zz<<`s0%uXiv1iZEE)p)EYZho1SzGW?2ulWXxpn&1b0~K!Q2@UqbhJW&(R=MOS>xEO
zp4aW7_AF0<drpicX+YYvpQ=nC{j1nhwa)<bgZ?kQ5^f4v_Pmt79)G-0fj8)Gi7mc8
zXKv?OMDSH}8diP1h)yKRw1|L7hI{}8NXHf|XiG&j7LAOr4kQY@zmX4hqrZyY<8P{-
zPv5q{+gy|9x+js9oYs3draumrQu0*PpO(4FOfi0#tO=iN)s-w$(jRwEiiv*Q>isms
zK<(Mj48l9v!vdAmpE0Q0o>?H3uOH`>RV`mjM8;<g@qIlU2ywlu#gN!?L+ph#`2E<q
z00aBjC(n+3{$XsnbJ$#OzRcLPf21d+`ZQgEEMv_JWS=EY{=5IFdng1cP{E-RmOnBn
z661p$|0M+8wnR#5Y)@55wxZ6DG#=ZW%S>o;nGh;u`au2v)|Io$C7t0NkRHK1qPp+I
z#u6$E<3-yvS_Mz4oSJ52SqJF1b8I?u+Ox3`JgR`K_=g|9!b$^WX}rNCj$$y0*+)S6
z<$VZswQ#zxsy+~6+%p;_uXdhMF3QM4VS9#xbOa(v(ag@-@VR$)MFZVY5_ge)Q<;nu
zv;TZvBuZ)tyW^jXRZL}f6-hB)TK@4V)H$k693L!=y*D4>eq$bb;DX=M67NX266q6~
zvQ(=kNbR`Yiu5$-YuVrZAV&}M(d?l<TqrWcgt!Fuqr3knghZZ|$?bLjRW7#rAAg`k
zn#SKiZ7+xppyJIYqf)^_?E97Wl89dniFup+_VuAKT5c_CfDXT<#=;>wP_<^7+budU
zlp5cp`;3P_8N8A;J;bT=X9?TMzx}123+4;NQl?h1<|FSoR+dZ|t5cMD*thj3@SE;s
z6R*R6fux(q2L`##^n@FrMU7r@;*i^5EZAM|&}}v`f~PNdcbY?tF2nBe=(jg6Y>u#B
z=CE1tXLLollJ;1-LFq%Iu(i~eWEIO1Hq<l-6S$~*PAS=)G~2YBeDZd;1}kjj?Y-$C
zOZATx$C+oYNLdXuW?rUCh5tR@f6xE`2bd}rM?Hcid6K`wZlfH61y%tqVsc-{sE2^p
z?+@A`zAq&d!|YRHUd$F#&RrV|u^*SQ>JMUv$;4EeBI7_c6yq?}m3mzEitU(l*}>S4
zIn@RjyH?kFSDPy_Awum}>HUEfCwTn;WGOpPB;(*!m{BsJ+FENS^SlN&p~Eyd)_f5V
zCs}v=U+Zw{CY%sJY2WaFAlSj>nTYuSULZTkj<{+p8CHfC)}GwqH*d=l$2S|mglzA9
z0tb3L#g4m$Yyr1#OJk`NK?+}wnxl^|L?SH9Sin{%&jrrj%Vt2t$l^3!tX}#d7WqLM
z%AMYZC@@+jz(IGsb(9hBJX?*=gLF<G?^_mqMuhMsRMs{etmxZ;KDA(Iz4@8I=CyZZ
za>6(1t|a=ek>c%C@lb&-v!~7Z<XYe&$M)}>-byT--XPL5brqguDKXL>pdMp+FvXY;
zRWezaUrQs}*Z_ZqK>qBbn%RiTjJh0$l7)2u?`JXX+kL&N>XPe;3K*Xax&?t>xf&~c
z6r3M*l7ogX*-b1X)#HI0SLQ5Jt=AR>>ikMLET6Uqvw4K8KVF?$2d<Yz+&=yqt?{pV
z?$RpJa;07OKNODtKO?e<bFwL9@6C~Q$Ub{#&nTItqf<tB+j|_5dA37lxO9gzlhVlw
z$tL4CzCM4$_w^sVp3moR&*$U$<P|A1Y5`x-o%WxT#V>Zfw@-;5Ee%d1fQSVBGWb_3
zUufWRTsRDQVmpQ?yPR5xkuW*!X=?k0pStc_ArTqSwC#9!u*7v7>k*n4;tqv^ZhvwZ
z2vKDH9sDkCfh}VIV2dP?7Cg*cqzjV=r;5|I3Dl6fk?7!RCBr9hl`EZA_$kR<3GJem
zSIQlOVnK*}6f~Krx=Gv(q5J|0SE!7%_8Fgk>`mm|Qfvf?<Y+$|?s)uz&jn%*;W8l<
zdGS<)8e)=nG4j0>fBy*7@E0HQ745Nmxdc36q@#(R!ZE@W!uBLJMt47%;$OMalDo=v
z-ue7_q-S`-ADFbzjhJm?<InWgG*_0nYe!``KSKAjXR$C<m@RhvEG7Qof5vQZcbxU8
z^1s#KA{deDvf>`NB@(3hVq>{!u#?|-OQESg_0+7+tJ?9Oq*2%0=lAl@uKxavjYlU&
zx<sgPF>0T?in2dlnGLWb=T2S~xf`t=R0T)5$f?Xb8DHxh;Yys^Z);;g2`%0f%_sVB
zMhn^e+5Ngxd3|s7(!$0y;D6nd<hrJg0reEM6{RPv`E-ipmQbE6?JV>fvRV>yrl=_7
zfD4iy)Z$yvtoO!RF~LE)4GERNxYsqKICwSHtwRm)SWx6WsBF&di4^^~km*1!&~<Ap
z(8vjCgE%jHRhS+n|9REJNMzBpR$M_dYs~L^Vx2nUa^E27ch47~=zu=!eXVTv6N=lu
zKpP9kkTWBFTwO%Jc&UGNe1}?kGy8JgY7ZWgnsGhuq^NgE^ei*+Iq%p^`zjpao0JA#
zKg;M}>Nxmh#{5teQO<hwyxljLZyBV|ld4|^J}FGsLMEE!CJ3uvxBo`Q0B8?;Sym&*
z)j<p)E@53L-?LphLPu#N|Fw4AS4H!t+YN%O4_|~Szlsel<19`#Zp3at7S-vcTJ}Nv
zAkDemY(hw=Cd@L3`U|B3wHxQSc$%Tt+4cSr+Qcys{bEB1Zsd==6GS6$?&iI{HxycD
zXa{ze1%G1y@cU%HiVd&alzij5ZfKXaPpQSld;zXxKsz@96ru}Hb4dO~|A-29TpF6A
zN0F{aS`Gg#gT1s&!cnY?o!%V?l%M{fK^X2cx?|Hn;{Owh{6`yw(1N2g`(Iu3AH)sp
zUkQt${ds8rdq%pz*=NKFi|62@9Fm#*9&l_#`SVWMWAD-4P%1*Wwp1Wcwr2}%z(kTW
zL7mf(8XCi93#Qja#qH>lmO{<zG+pRRZxIVt%N=bze|(DjDg4ANG~F|<__uRRa$Oto
zWJ<YsfZy-)M*xN&-f_ImANr9ds=7l((iTA1De0)zX4(7E=L#9|V-Y)Y2hVEJI7a=<
zK3FmNi5>6aH%Q=HM5$6cX1~B00-z4t_mO#oqSL{D$H&tyP+u2IwCC*+hh;g25cISh
z=CzTMdPHchWmZax39Nv+RwQ>L<S1-*3lPg&^}*PKaet>=#x}T1u?hk*#E}Nn^QN6X
zva}S9m>Cy8bGDzU?80)wog&vYK#NNuC<l9iXFmAqO?My6ri;1;f)N0q{cRT10uY3)
z=RIeu{+dGcV1cM`^aNR$wdHzVE5Gqw>1T_br967L)@;?ZMK(#nQf^G@l5Z&a$tTjO
zoc)`lqJ|FUTQtMFFX?b@1s$EOa8^#4gSbp`12QRIwxloecexHR5K5F=4Agz|Ev=d<
z*_6yp+A#C+J_9vrhHeNZXV-ozC;v^Zkaq5*Xw#c@QSO>#ik4<4;;Yrn^UMpcH@ulR
z>korc77Xdp_4QtWH9?O;8W&EQvE+hNy25#w2HD{vdxhkbJ9JEs?ZL=)K9g1p_qk2g
z^9wtjVu9|l7nCP=#yK&)6OX7-$B%cTPL`+7tG@}&-37KGb~@@8#1cidqdA>Bi}I8z
z(;dLW<AC6QlQc4CwtWD;b>RtGteuI8PpP_NuwEWM{utr`{?1!lDu)pIET&H4(<&Pm
z(fR=2=Tr-n$7<JoldEu9JEs)Cmzii9-sUV-ntGWuJpQ21fB<<8kV>$e|AZELUk@#K
zSvmfrSpxP+RVdp;*oUci@^G-Vf#VwTj#R_UVV5fVZvMRj*xB`TN7JJr6Ouk~=)RgO
zfJD#T;A9l^haVY<q1<essV358H!;ZYEy)i^PLlm5S2>LvmA!wY6*b+)YG&7su)cR!
zpYcx?!{LnU{7C(q&?Y)lvlw}F-h)63N~YYBXUM#-ej4;eQ+~4=V0W`5fe>R;ULF<>
z?7b?_JW=aPKHZN4;Ft%2>VR*I5x+)UdSr~#h{3lp>J0u28HZdhQw|EJhYfCSsN$<N
z5qf;X^ncqcR$8(Wr^LE~3o7NBTqbzpt(MsJWUvG_k;W%J3Ocm7?tDO9GZ%ZNIanZ#
zMPn?U>||_R#?X!s9$w!Ja6t#7QxNTvS*cRZieRNN^tSlyrK-fWif=^xf(wJ2d<<WR
z4^j;`i4@>yZxM?xugC)Kc{!B~?dl0|`Kj4C%DqK70@G(M?*#<d%^Mv0csQb%gWmN>
z(yBjXoAKGW=@%zSqmw>J`{}2>?Nj6Q#}7!p%D^)Vt1_y!OeM-Ev&Je*yOtnFdpu2W
zh7>BoNxLp-R5XY<4^P{;(A3^{`ZUt9vx{nUZF{L^YF=T9JI`@%)~p^qX!RZ*+-2TL
z{is{ioI%bUDQ+lSO95mqB*&5)p1BpGlB6TohLrJj+YW@{y<SrX>n+Yp9{=7W6H54v
zi9z}@J-QIRFp~JajAjVY`UN@AaJNQtioKAT;Q_|`yqKkxO96cuL3v)h4;G_pFD~+;
zTHWl;Ny_vK>(V&1?iy|Dcp8pg8)J}ZwHN~PyZs_u{d)}~<A1E(n3wyHLHcOcMa7lk
zkG>b=B2E(kNH-IV`%%-AY*I8H@s{d!6ZWAyUzZ+zfVG8b9!<bR;sUcK-+aW0^sOhC
z2z^h!WM<L7NZJr!?riOLcXJgPG`L+UaYfFi@>}y>>th7m42<5%rcd6Gn!0=ubx#hR
ze8MarqoU!Ovz}F~j?5BjGRc}EM_Gg|d0sIAU9XVqQ9sBb@p9He&SeSnLDe5uDI8`U
zyZ`e!6{e+4vf(XZ>~>TRleK9z7+N1_V9}<7h$f1Tr6qWb4V<&$3k*-J72UQom5P6R
zCwd$H*k+&hJ>`fe&1V9#GzXz)1bnOa-_fW;XDnO>*24ISwgtcX+LRQ>mbc#Vp%*{M
zK+z{BLh4y|mG-Gg-(7F?U|epUvS-TWeFdmP&sIXlrqr(a$<dWXFReN+?^*;=s(5NL
z600xN=xH2O=>sDDH(k!XyX_ZZpMNl!|GHrsY5Qn0YG{rchfNu_$2?`=7Thb9ko9_?
z$4^f7(!NdPROQJ6EI`gqi)6D-xY>Z0!Fs!5pG_^J#m=_~^p@oBTS-93AFT88GjP}!
zMx#s^zoJ-{#F811iz4)VC_l*W$xal?&{8fGn$^1M#)3vEnyTFwHUX*{kMh`r_ZJvA
zX=HeysT+D&nclzJzkGM<QI`P7x;{(KZR(i93mg1?jq8MuQS~-Ene>UlAHSR{$xXm;
z7PLzx?)Av%s=M`m7p@Q#9Js+D5<m0j6qsEemhqAYCC0I#J1Ao&JaTrWRQtuy8;AIV
z)ZC->Pn#IX*6kNbF0qR<@N$=%{`<7PG&HI-(3D##7c)I?b5%UVvO%x-Cco+TMq7h3
zZt1=TJCk0`+qtwEY|<@$M*hHSDt+1L{-|QEz>Of&0$p>4op@r<+9L0;yOF4nb+SX7
zRQo?nLqmbV*9#7^6_KL8p24RIU1XrVO|6RzRChtJmm&vY#*+H|((arfDL7O0Vk>5F
zB&q!}Ip=jw=>9magc_^?bL~`6RRym!3i`_g`mCuuKQL)6v*WhX-xHN+%hA}gD6by1
zQ_o9{oWQXx0RX~?s`NyWCA*^ke%>a<`g}GKp6jE6%|506-~c^Ue2VuYTce#?x4a$2
z$Hc05pYaaO;nHc58X~P*0hW7Cnb7TN$uMN!aXrc*s+uAt(yawCf{&(8pm+B{AxGWJ
zx3t>sJb&&vqSG#qSz;8uX&J2)`#`y|yYuU{e81?fHZIjZ5qd=P9*DZj6~4N>)Yv;G
z7Ed|;mnfa-_%2)>Sg83g_KziQi+RwlB$3xu)R60Z%RO(v3{SZQs(oj{NmqEgFz)>J
z3X`j&>89sX;bqwwrzM@Mz6Up?DoLOx7Yt3hR*$YeNFUSwRp&Mzi*EezLUd#Dh_%|2
zTVSmCS~Eb?xl@~V(fjI=T?LBNW<0<8`)`WS08=Xcf;N9m@3f06si<S_ifx@M+vbC4
zN_cfyk+jAPT&S#6l~Qq<zD5Uq4RKO_*d(z)#5)m*(5(uhFV=hyI%_QP=^(+6<8VDj
z(HbLuQK@xj{>_RrE6t!_4SJ1wW~xrx*ce(e2e1V(KEqlW)99Q15sLU{WqWoQ<jt5M
z@pal#<H9c|v6!xiMc8gBp}>M^8o4C7c@`C81^|%m7nYKmDg=_%{8HdJUF-UFOn9ka
z-sESo;;5DwXsonRKQ@X#lO1+tuh0@J!t{L-*QPrsZUb#>xQe0anXarJTl06+hhzNW
z47O*=#ocY5B$+8S-?|=pM6US??N!dWyo9J$cyq|9?J@s1Z009O=8d+(B#80Jfw`_9
zh3DWimq2OqUt*c#UBOx^Z(c>^?d7ec;mNne52hnj_QYtkAfGb|(L!Ch-?;&xp60~B
z1RopjHgj&kV9Ali4)$FUp~|5{)<EumG;t1e+&_LD8k|1pT(%~6;Dlu(3{#&kTv=nk
zWj(})@8ry{R+O^9hrR9V8oFjmx24<HJ+S#T5j@#xbIRol!*!<a(JTlywf4M|I*yUb
zaRH>I79Ku=c~*vn$PQ#p!i4RVo9JRbnw?OAZspJ`{emz@9={L$JKHyDO+d`6r@F{y
z&jQN?j6d)7%KH5x=dgW5fb%a)i$8zLN$oG%Hy+f;X?y0_woa*mJeYU%zBkEm6Hc#c
zbXkQzxsqj^y?Ft^D%41*4`qqIZB4WL-Zw*5m5@~ZKFR<4hOIj*T>v;k`GuvL!|HLO
z(7_Wi^iF+j@{|B4^56`_*%1AzY)1Wx#iJK5cMr6xL?_y#_2PtRtyn@CKA+z_Gt{73
z&2pdct3=$xnycbU%#8XIs&B1ED4~qyZN<E0i15D`J9X%K+QE+w?90ezM7VhWkggCA
z4h_vKB1ZFt#1sx%>3!sOPfXdXIoLj)=pdCf6^nM7n`MvxCkPv%#T1)lCC?K5&3PEt
z?hgbm+)M=kD1DaLgDmw{UdzJ-wW<mEz<7_#c(XawmHW3ndt7H82K-{8f{eGRed}P~
zxdw_}RB{Vlml*h_nM7i9z2)U9J@zqMCr$mnl&xA3Z8ofY^tYwq2Pq5$#^9`nv`qs<
zwRrTU5VWOPCc|SbG-r`0G7`zluQSi#Qu%dNj6x<9%}z&9!#2+e^23#i{8`%-Ny6|T
PSNu6-;D1p6|L*?)ePFmk

literal 0
HcmV?d00001

diff --git a/client/public/sw.js b/client/public/sw.js
new file mode 100644
index 0000000..803c104
--- /dev/null
+++ b/client/public/sw.js
@@ -0,0 +1,138 @@
+/**
+ * Service Worker - 静态资源缓存
+ * 提升二次加载速度，支持离线访问静态资源
+ */
+
+const CACHE_NAME = 'incudal-cache-v2'
+
+// 需要缓存的静态资源类型
+const CACHEABLE_EXTENSIONS = ['.js', '.css', '.woff', '.woff2', '.ttf', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.ico']
+
+// 需要始终从网络获取的路径（不缓存）
+const NETWORK_ONLY_PATTERNS = [
+  '/api/',           // API 请求
+  '/auth/',          // 认证请求
+  '/oauth/',         // OAuth 请求
+  '/__vite_ping',    // Vite HMR
+  '/sw.js'           // Service Worker 自身
+]
+
+// 安装事件
+self.addEventListener('install', (event) => {
+  console.log('[SW] Installing service worker...')
+  // 跳过等待，立即激活
+  event.waitUntil(self.skipWaiting())
+})
+
+// 激活事件
+self.addEventListener('activate', (event) => {
+  console.log('[SW] Activating service worker...')
+  event.waitUntil(
+    Promise.all([
+      // 清理旧版本缓存
+      caches.keys().then(cacheNames => {
+        return Promise.all(
+          cacheNames
+            .filter(cacheName => cacheName !== CACHE_NAME)
+            .map(cacheName => {
+              console.log('[SW] Deleting old cache:', cacheName)
+              return caches.delete(cacheName)
+            })
+        )
+      }),
+      // 立即接管所有客户端
+      self.clients.claim()
+    ])
+  )
+})
+
+// 判断是否应该缓存该请求
+function shouldCache(url) {
+  // 检查是否是网络优先的路径
+  for (const pattern of NETWORK_ONLY_PATTERNS) {
+    if (url.pathname.includes(pattern)) {
+      return false
+    }
+  }
+
+  // 只缓存同源请求
+  if (url.origin !== self.location.origin) {
+    return false
+  }
+
+  // 检查文件扩展名
+  const pathname = url.pathname.toLowerCase()
+  return CACHEABLE_EXTENSIONS.some(ext => pathname.endsWith(ext))
+}
+
+// 拦截请求
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url)
+
+  // 只处理 GET 请求
+  if (event.request.method !== 'GET') {
+    return
+  }
+
+  // 页面导航请求不做离线接管：
+  // 当前策略不缓存 HTML，如果这里兜底到缓存首页，会把瞬时网络抖动放大成“离线状态”。
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // 可缓存的静态资源 - 缓存优先策略（Stale While Revalidate）
+  if (shouldCache(url)) {
+    event.respondWith(
+      caches.match(event.request).then(cachedResponse => {
+        if (cachedResponse) {
+          // 返回缓存，同时在后台更新
+          event.waitUntil(
+            fetch(event.request)
+              .then(networkResponse => {
+                if (networkResponse && networkResponse.status === 200) {
+                  return caches.open(CACHE_NAME).then(cache => {
+                    cache.put(event.request, networkResponse.clone())
+                  })
+                }
+              })
+              .catch(() => {
+                // 后台更新失败，忽略
+              })
+          )
+          return cachedResponse
+        }
+
+        // 没有缓存，从网络获取并缓存
+        return fetch(event.request).then(networkResponse => {
+          if (networkResponse && networkResponse.status === 200) {
+            const responseToCache = networkResponse.clone()
+            event.waitUntil(
+              caches.open(CACHE_NAME).then(cache => {
+                cache.put(event.request, responseToCache)
+              })
+            )
+          }
+          return networkResponse
+        })
+      })
+    )
+    return
+  }
+
+  // 其他请求直接走网络
+})
+
+// 监听消息（用于手动清除缓存等操作）
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'CLEAR_CACHE') {
+    event.waitUntil(
+      caches.delete(CACHE_NAME).then(() => {
+        console.log('[SW] Cache cleared')
+        // 通知客户端
+        if (event.source && event.source.postMessage) {
+          event.source.postMessage({ type: 'CACHE_CLEARED' })
+        }
+      })
+    )
+  }
+})
diff --git a/client/public/tos/en.md b/client/public/tos/en.md
new file mode 100644
index 0000000..9d178e7
--- /dev/null
+++ b/client/public/tos/en.md
@@ -0,0 +1,3 @@
+# Terms of Service
+
+By using this platform, you agree to all terms of this agreement.
diff --git a/client/public/tos/zh.md b/client/public/tos/zh.md
new file mode 100644
index 0000000..584e3e0
--- /dev/null
+++ b/client/public/tos/zh.md
@@ -0,0 +1,3 @@
+# 服务协议
+
+使用本平台即表示您同意本协议全部条款。
diff --git a/client/src/App.vue b/client/src/App.vue
new file mode 100644
index 0000000..c64e1d7
--- /dev/null
+++ b/client/src/App.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, onErrorCaptured, onMounted, onUnmounted, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import ToastContainer from '@/components/ToastContainer.vue'
+import PopupAnnouncementModal from '@/components/PopupAnnouncementModal.vue'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const { t, locale } = useI18n()
+const hiddenHostingRouteNames = new Set([
+  'my-hosts',
+  'my-host-create',
+  'my-host-detail',
+  'my-packages',
+  'my-package-create',
+  'my-package-edit',
+  'hosting-wallet'
+])
+
+// 不需要布局的页面
+const noLayoutRoutes: string[] = ['login', 'register']
+const showLayout = computed<boolean>(() => {
+  return authStore.isAuthenticated && !noLayoutRoutes.includes(route.name as string)
+})
+
+watchEffect(() => {
+  locale.value
+  configStore.brandName
+  configStore.brandSubtitle
+
+  const titleKey = route.meta.titleKey
+  const fallbackTitle = route.meta.title
+  const translatedTitle = titleKey ? t(titleKey) : ''
+  const pageTitle = translatedTitle && translatedTitle !== titleKey ? translatedTitle : fallbackTitle
+
+  const brandName = configStore.brandName?.trim() || 'Incudal'
+  const brandSubtitle = configStore.brandSubtitle?.trim() || '基于 Incus 的低价 NAT VPS'
+  document.title = pageTitle ? `${brandName} - ${pageTitle}` : `${brandName} - ${brandSubtitle}`
+})
+
+// 检查会话是否有效
+let sessionCheckTimer: number | null = null
+let tokenRefreshTimer: number | null = null
+let lastVisibilityChange = Date.now()
+
+async function redirectIfHostingEntryHidden() {
+  if (
+    !authStore.isAdmin &&
+    typeof route.name === 'string' &&
+    hiddenHostingRouteNames.has(route.name) &&
+    authStore.user?.canAccessHostingFeature === false
+  ) {
+    await router.replace({ name: 'dashboard' })
+  }
+}
+
+async function handleVisibilityChange() {
+  // 如果页面从隐藏变为可见，且距离上次检查超过2分钟，则检查会话
+  // 放宽检测间隔，避免频繁跳转登录页
+  if (document.visibilityState === 'visible') {
+    const now = Date.now()
+    // 从5秒放宽到2分钟
+    if (now - lastVisibilityChange > 2 * 60 * 1000 && authStore.isAuthenticated) {
+      lastVisibilityChange = now
+      // 使用 try-catch 防止网络错误导致跳转
+      try {
+        const isValid = await authStore.checkSession()
+        if (!isValid && !window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/register')) {
+          // 会话已过期，跳转到登录页
+          window.location.href = '/login'
+        } else if (isValid) {
+          await redirectIfHostingEntryHidden()
+        }
+      } catch {
+        // 网络错误不跳转，继续使用当前状态
+        console.warn('会话检查失败，可能是网络问题')
+      }
+    }
+  } else {
+    lastVisibilityChange = Date.now()
+  }
+}
+
+// 捕获子组件错误
+onErrorCaptured((err, _instance, info) => {
+  console.error('组件错误捕获:', err, info)
+  // 如果是chunk加载错误，尝试重新加载
+  if (err && typeof err === 'object' && 'message' in err) {
+    const errorMessage = String(err.message)
+    if (errorMessage.includes('Failed to fetch dynamically imported module') ||
+        errorMessage.includes('Loading chunk') ||
+        errorMessage.includes('ChunkLoadError')) {
+      console.warn('检测到代码块加载失败，尝试重新加载页面')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+      return false // 阻止错误继续传播
+    }
+  }
+  return true // 允许错误继续传播到全局错误处理
+})
+
+onMounted(() => {
+  // OAuth 登录码处理已移至路由守卫中，确保在路由判断前完成
+  
+  // 监听页面可见性变化
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+  
+  // 定时刷新 token（简化版：每 6 天刷新一次，token 7 天有效期）
+  tokenRefreshTimer = window.setInterval(async () => {
+    if (authStore.isAuthenticated) {
+      try {
+        const response = await fetch('/api/auth/refresh', {
+          method: 'POST',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' }
+        })
+        if (response.ok) {
+          const data = await response.json()
+          if (data.token) {
+            localStorage.setItem('token', data.token)
+            authStore.syncToken()
+          }
+        }
+      } catch {
+        // 刷新失败时不处理，等待下次刷新或请求时的自动刷新
+        console.warn('定时 token 刷新失败')
+      }
+    }
+  }, 6 * 24 * 60 * 60 * 1000) // 6 天
+  
+  // 定期检查会话（简化版：每1小时检查一次）
+  sessionCheckTimer = window.setInterval(async () => {
+    if (authStore.isAuthenticated && document.visibilityState === 'visible') {
+      try {
+        const isValid = await authStore.checkSession()
+        if (!isValid && !window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/register')) {
+          // 会话已过期，跳转到登录页
+          window.location.href = '/login'
+        } else if (isValid) {
+          await redirectIfHostingEntryHidden()
+        }
+      } catch {
+        // 网络错误不处理，等待下次检查
+        console.warn('定时会话检查失败，等待下次检查')
+      }
+    }
+  }, 60 * 60 * 1000) // 1 小时
+})
+
+onUnmounted(() => {
+  // 清理事件监听和定时器
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+  if (sessionCheckTimer !== null) {
+    clearInterval(sessionCheckTimer)
+  }
+  if (tokenRefreshTimer !== null) {
+    clearInterval(tokenRefreshTimer)
+  }
+})
+</script>
+
+<template>
+  <AppLayout v-if="showLayout">
+    <RouterView v-slot="{ Component, route: currentRoute }">
+      <template v-if="Component">
+        <!-- 使用 exclude 排除不需要缓存的页面，避免 include 匹配问题 -->
+        <KeepAlive :exclude="['InstanceCreateView', 'InstanceDetailView', 'PackageFormView', 'MyHostDetailView']" :max="10">
+          <component :is="Component" :key="currentRoute.name" />
+        </KeepAlive>
+      </template>
+    </RouterView>
+  </AppLayout>
+  <RouterView v-else v-slot="{ Component, route: currentRoute }">
+    <template v-if="Component">
+      <component :is="Component" :key="currentRoute.name" />
+    </template>
+  </RouterView>
+  <PopupAnnouncementModal />
+  <ToastContainer />
+</template>
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
new file mode 100644
index 0000000..1da60da
--- /dev/null
+++ b/client/src/api/index.ts
@@ -0,0 +1,5250 @@
+import axios, { type AxiosInstance } from 'axios'
+import { useAuthStore } from '@/stores/auth'
+import type {
+  LoginRequest,
+  LoginResponse,
+  RegisterRequest,
+  RegisterResponse,
+  UpdateUserResponse,
+  GenerateInviteRequest,
+  InviteListResponse,
+  User,
+  BadgeOverview,
+  BadgeMultiDrawResponse,
+  BadgeOwnership,
+  BadgeCatalogItem,
+  BadgeSeriesItem,
+  UserQuota,
+  UpdateUserRequest,
+  Instance,
+  InstanceWithDetails,
+  InstanceStats,
+  CreateInstanceRequest,
+  UpdateInstanceRequest,
+  ChangeHostOptionsResponse,
+  PortMapping,
+  CreatePortMappingRequest,
+  IpAddress,
+  Ipv6Subnet,
+  HostAgentStatusResponse,
+  HostAgentInstallCommandResponse,
+  HostAgentUpgradeRequestResponse,
+  Snapshot,
+  Backup,
+  CreateSnapshotRequest,
+  CreateBackupRequest,
+  SnapshotPolicy,
+  BackupPolicy,
+  UpdateSnapshotPolicyRequest,
+  UpdateBackupPolicyRequest,
+  Host,
+  HostWithDetails,
+  AvailableHost,
+  CreateHostRequest,
+  UpdateHostRequest,
+  Package,
+  CreatePackageRequest,
+  UpdatePackageRequest,
+  SshKey,
+  CreateSshKeyRequest,
+  NotificationChannel,
+  CreateNotificationChannelRequest,
+  UpdateNotificationChannelRequest,
+  OAuthConfig,
+  UserOAuthBinding,
+  UpdateOAuthConfigRequest,
+  HelpArticle,
+  CreateHelpArticleRequest,
+  UpdateHelpArticleRequest,
+  HostImagePolicy,
+  SystemImage,
+  CreateSystemImageRequest,
+  UpdateSystemImageRequest,
+  Log,
+  PaginatedResponse,
+  Ticket,
+  TicketMessage,
+  TicketStatus,
+  CreateTicketRequest,
+  PaginatedTickets,
+  PaginatedTicketMessages,
+  TerminalSavedCommand,
+  CreateTerminalSavedCommandRequest,
+  UpdateTerminalSavedCommandRequest,
+  TelegramBindingStatus,
+  TelegramBindTokenResponse,
+  TelegramAdminBindingsResponse,
+  TelegramWebhookDeleteResponse,
+  TelegramWebhookInfoResponse,
+  TelegramWebhookSetupResponse,
+  UserInvite,
+  UserInviteSummary
+} from '@/types/api.js'
+
+export type VipRuleType = 'user' | 'hosting'
+export type VipConditionMode = 'any' | 'all'
+export type UserVipMetric = 'totalRecharge' | 'totalConsume'
+
+export interface VipBadgeStyle {
+  backgroundColor: string
+  textColor: string
+}
+
+export interface VipBenefitHallConfig {
+  balance?: {
+    enabled?: boolean
+    amount?: number
+  }
+  points?: {
+    enabled?: boolean
+    amount?: number
+  }
+  instance?: {
+    enabled?: boolean
+    packageId?: number | null
+    packageName?: string | null
+    planId?: number | null
+    planName?: string | null
+    days?: number | null
+    quantity?: number | null
+  }
+}
+
+export interface VipLevelRule {
+  id?: number
+  type: VipRuleType
+  level: number
+  enabled: boolean
+  conditionMode: VipConditionMode
+  userMetric?: UserVipMetric
+  minRecharge: number | null
+  minConsume: number | null
+  minHostingIncome: number | null
+  minHostingInstances: number | null
+  benefits?: Record<string, unknown> & {
+    badgeStyle?: VipBadgeStyle
+    benefitHall?: VipBenefitHallConfig
+  }
+  badgeStyle?: VipBadgeStyle
+}
+
+export interface VipLevelRulesResponse {
+  type: VipRuleType
+  maxLevel: number
+  userMetric?: UserVipMetric
+  rules: VipLevelRule[]
+}
+
+export type VipProgressMetric = 'totalRecharge' | 'totalConsume' | 'totalHostingIncome' | 'instanceCount'
+
+export interface VipProgressCondition {
+  metric: VipProgressMetric
+  current: number
+  target: number
+  remaining: number
+  matched: boolean
+  progress: number
+}
+
+export interface VipLevelProgress {
+  currentLevel: number
+  nextLevel: number | null
+  conditionMode: VipConditionMode | null
+  userMetric?: UserVipMetric | null
+  progress: number
+  isMaxLevel: boolean
+  conditions: VipProgressCondition[]
+}
+
+export interface VipOverviewResponse {
+  userVipLevel: number
+  hostingVipLevel: number
+  userVipBadgeStyle?: VipBadgeStyle | null
+  hostingVipBadgeStyle?: VipBadgeStyle | null
+  userVipMetric?: UserVipMetric
+  userStats: {
+    totalRecharge: number
+    totalConsume: number
+  }
+  hostingStats: {
+    totalHostingIncome: number
+    instanceCount: number
+  }
+  userVipProgress?: VipLevelProgress
+  hostingVipProgress?: VipLevelProgress
+}
+
+export type VipBenefitRewardType = 'balance' | 'points' | 'instance'
+export type VipBenefitClaimStatus = 'delivered' | 'pending'
+export type VipBenefitRewardState = 'claimable' | 'claimed' | 'locked' | 'blocked'
+
+export interface VipBenefitRewardConfig {
+  amount?: number
+  packageId?: number | null
+  packageName?: string | null
+  planId?: number | null
+  planName?: string | null
+  days?: number
+  quantity?: number
+}
+
+export interface VipBenefitClaim {
+  id: number
+  rewardId: number
+  level: number
+  status: VipBenefitClaimStatus
+  claimNo: number
+  snapshot: Record<string, unknown>
+  deliveredAt: string | null
+  createdAt: string
+}
+
+export interface VipBenefitReward {
+  id: number
+  level: number
+  type: VipBenefitRewardType
+  title: string
+  description: string | null
+  claimLimit: number
+  sortOrder: number
+  enabled: boolean
+  config: VipBenefitRewardConfig
+  createdAt?: string
+  updatedAt?: string
+  claimedCount?: number
+  remainingClaims?: number
+  state?: VipBenefitRewardState
+  blockedByLevel?: number | null
+  claims?: VipBenefitClaim[]
+}
+
+export interface VipBenefitRewardInput {
+  level: number
+  type: VipBenefitRewardType
+  title: string
+  description?: string | null
+  claimLimit?: number
+  sortOrder?: number
+  enabled?: boolean
+  config: VipBenefitRewardConfig
+}
+
+export interface VipBenefitAmountSummary {
+  balanceAmount: number
+  pointsAmount: number
+  instanceQuantity: number
+}
+
+export interface VipBenefitOverviewResponse {
+  currentLevel: number
+  userVipMetric: UserVipMetric
+  userStats: {
+    totalRecharge: number
+    totalConsume: number
+  }
+  userVipBadgeStyle?: VipBadgeStyle | null
+  rewards: VipBenefitReward[]
+  summary: {
+    totalRewards: number
+    unlockedRewards: number
+    claimableRewards: number
+    claimedRewards: number
+    lockedRewards: number
+    blockedRewards: number
+    pendingRewards: number
+    entitlement: VipBenefitAmountSummary
+    remaining: VipBenefitAmountSummary
+  }
+}
+
+// API 超时配置（毫秒）
+const TIMEOUT = {
+  DEFAULT: 30000,           // 30秒 - 普通请求
+  MEDIUM: 60000,            // 60秒 - 中等耗时操作
+  LONG: 120000,             // 120秒 - 较长操作（启动/停止/重启，需等待IP获取）
+  SNAPSHOT: 180000,         // 3分钟 - 快照/备份操作
+  REBUILD: 300000,          // 5分钟 - 重装系统
+  CLONE: 600000,            // 10分钟 - 复制实例
+  BATCH: 900000,            // 15分钟 - 批量操作
+}
+
+function buildTicketFormData(
+  data: CreateTicketRequest | { content: string; attachments?: File[] }
+): FormData {
+  const formData = new FormData()
+
+  if ('instanceId' in data && data.instanceId !== undefined && data.instanceId !== null) {
+    formData.append('instanceId', String(data.instanceId))
+  }
+  if ('subject' in data) {
+    formData.append('subject', data.subject)
+  }
+  if ('category' in data && data.category) {
+    formData.append('category', data.category)
+  }
+  if ('priority' in data && data.priority) {
+    formData.append('priority', data.priority)
+  }
+
+  formData.append('content', data.content ?? '')
+
+  for (const file of data.attachments || []) {
+    formData.append('images', file)
+  }
+
+  return formData
+}
+
+// 创建 axios 实例
+const http: AxiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: TIMEOUT.DEFAULT,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 刷新 token 的锁，防止多个请求同时触发刷新
+let isRefreshing = false
+let failedQueue: Array<{
+  resolve: (value?: unknown) => void
+  reject: (reason?: unknown) => void
+}> = []
+// 记录最后一次刷新尝试的时间，避免过于频繁的刷新
+let lastRefreshAttempt = 0
+const MIN_REFRESH_INTERVAL = 5000 // 5秒内最多刷新一次
+// 记录认证失败的时间，防止在短时间内重复清除状态
+let lastAuthFailureTime = 0
+const AUTH_FAILURE_COOLDOWN = 10000 // 10秒内最多清除一次认证状态
+
+// 处理队列中的请求
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach(prom => {
+    if (error) {
+      prom.reject(error)
+    } else {
+      prom.resolve(token)
+    }
+  })
+  failedQueue = []
+}
+
+/**
+ * 解析 JWT token，获取过期时间
+ */
+function parseJWT(token: string): { exp?: number; iat?: number } | null {
+  try {
+    const base64Url = token.split('.')[1]
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    )
+    return JSON.parse(jsonPayload)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * 检查 token 是否即将过期（简化版：剩余时间少于 1 天）
+ */
+function isTokenExpiringSoon(token: string): boolean {
+  const decoded = parseJWT(token)
+  if (!decoded || !decoded.exp) {
+    return false
+  }
+  const exp = decoded.exp * 1000 // 转换为毫秒
+  const now = Date.now()
+  const timeUntilExpiry = exp - now
+  // 简化版：如果剩余时间少于 1 天，则认为即将过期
+  return timeUntilExpiry < 24 * 60 * 60 * 1000
+}
+
+/**
+ * 主动刷新 token（在 token 即将过期前）
+ */
+async function proactiveRefreshToken(): Promise<string | null> {
+  if (isRefreshing) {
+    // 如果正在刷新，等待刷新完成
+    return new Promise((resolve, reject) => {
+      failedQueue.push({ resolve, reject })
+    }).then(token => token as string | null).catch(() => null)
+  }
+
+  // 检查刷新频率，避免过于频繁
+  const now = Date.now()
+  if (now - lastRefreshAttempt < MIN_REFRESH_INTERVAL) {
+    // 最近刚刷新过，直接返回 null，使用当前 token
+    return null
+  }
+
+  isRefreshing = true
+  lastRefreshAttempt = now
+
+  try {
+    const refreshResponse = await fetch('/api/auth/refresh', {
+      method: 'POST',
+      credentials: 'include', // 重要：发送 Cookie（包含 refreshToken）
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+
+    if (!refreshResponse.ok) {
+      // 如果是 401 或 400，说明 refreshToken 也失效了，需要重新登录
+      // 400 通常表示 refresh token 无效、过期或格式错误
+      if (refreshResponse.status === 401 || refreshResponse.status === 400) {
+        throw new Error('REFRESH_TOKEN_INVALID')
+      }
+      throw new Error(`Refresh token failed: ${refreshResponse.status}`)
+    }
+
+    const refreshData = await refreshResponse.json()
+    const newToken = refreshData?.token
+    if (newToken) {
+      localStorage.setItem('token', newToken)
+      // 同步更新 auth store 中的 token
+      try {
+        const authStore = useAuthStore()
+        authStore.syncToken()
+      } catch {
+        // 如果 store 未初始化，忽略
+      }
+      processQueue(null, newToken)
+      return newToken
+    } else {
+      throw new Error('No token in refresh response')
+    }
+  } catch (refreshError: any) {
+    processQueue(refreshError, null)
+    // 如果是 refreshToken 失效，需要清除并跳转登录
+    if (refreshError?.message === 'REFRESH_TOKEN_INVALID') {
+      localStorage.removeItem('token')
+      if (!window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/register')) {
+        window.location.href = '/login'
+      }
+      return null
+    }
+    // 其他错误（如网络错误）不立即跳转登录页，让响应拦截器处理
+    // 这样可以避免因为临时网络问题导致用户被退出
+    console.warn('Proactive token refresh failed:', refreshError)
+    return null
+  } finally {
+    isRefreshing = false
+  }
+}
+
+// 请求拦截器 - 添加 token 并检查是否需要刷新
+http.interceptors.request.use(
+  async (config) => {
+    let token = localStorage.getItem('token')
+    if (token) {
+      // 检查 token 是否即将过期，如果是则先刷新
+      if (isTokenExpiringSoon(token)) {
+        const newToken = await proactiveRefreshToken()
+        if (newToken) {
+          token = newToken
+        }
+        // 如果刷新失败，继续使用旧 token，让响应拦截器处理 401
+      }
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+
+// 响应拦截器 - 处理错误和自动刷新 token
+http.interceptors.response.use(
+  (response) => response.data,
+  async (error) => {
+    const responseData = error.response?.data
+    const requestUrl = error.config?.url || ''
+    const originalRequest = error.config
+
+    // 401 未授权，尝试刷新 token
+    if (error.response?.status === 401) {
+      // 排除登录、注册、刷新和check-2fa接口本身
+      const isAuthEndpoint = requestUrl.startsWith('/auth/login') ||
+        requestUrl.startsWith('/auth/register') ||
+        requestUrl.startsWith('/auth/refresh') ||
+        requestUrl.startsWith('/auth/check-2fa')
+
+      // 如果是认证相关接口的 401，不尝试刷新，直接返回错误
+      if (isAuthEndpoint) {
+        // 创建带有错误码的错误对象
+        const apiError = {
+          message: responseData?.error || 'Unauthorized',
+          code: responseData?.code || null,
+          details: responseData?.details || null
+        }
+        return Promise.reject(apiError)
+      }
+
+      // 如果已经重试过，说明刷新也失败了，清除所有认证状态并跳转登录页
+      if (originalRequest?._retry) {
+        const now = Date.now()
+        // 防止在短时间内重复清除状态和跳转
+        if (now - lastAuthFailureTime > AUTH_FAILURE_COOLDOWN) {
+          lastAuthFailureTime = now
+          // 清除 auth store 状态
+          try {
+            const authStore = useAuthStore()
+            authStore.clearLocalAuth()
+          } catch {
+            // 如果 store 未初始化，只清除 localStorage
+            localStorage.removeItem('token')
+          }
+          if (!window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/register')) {
+            window.location.href = '/login'
+          }
+        }
+        return Promise.reject(error)
+      }
+
+      // 如果正在刷新，将请求加入队列
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject })
+        }).then(token => {
+          if (token) {
+            originalRequest.headers.Authorization = `Bearer ${token}`
+          }
+          return http(originalRequest)
+        }).catch(err => {
+          return Promise.reject(err)
+        })
+      }
+
+      // 检查刷新频率，避免过于频繁
+      const now = Date.now()
+      if (now - lastRefreshAttempt < MIN_REFRESH_INTERVAL && lastRefreshAttempt > 0) {
+        // 最近刚刷新过，可能是网络问题，等待一下再重试原请求
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        if (originalRequest) {
+          return http(originalRequest)
+        }
+        return Promise.reject(error)
+      }
+
+      // 标记正在刷新，防止重复刷新
+      if (originalRequest) {
+        originalRequest._retry = true
+      }
+      isRefreshing = true
+      lastRefreshAttempt = now
+
+      try {
+        // 尝试刷新 token（使用 fetch API，避免触发拦截器循环）
+        const refreshResponse = await fetch('/api/auth/refresh', {
+          method: 'POST',
+          credentials: 'include', // 重要：发送 Cookie（包含 refreshToken）
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        if (!refreshResponse.ok) {
+          // 如果是 401 或 400，说明 refreshToken 也失效了，需要重新登录
+          // 400 通常表示 refresh token 无效、过期或格式错误
+          if (refreshResponse.status === 401 || refreshResponse.status === 400) {
+            throw new Error('REFRESH_TOKEN_INVALID')
+          }
+          throw new Error(`Refresh token failed: ${refreshResponse.status}`)
+        }
+
+        const refreshData = await refreshResponse.json()
+        const newToken = refreshData?.token
+        if (newToken) {
+          // 更新 localStorage 中的 token
+          localStorage.setItem('token', newToken)
+          // 同步更新 auth store 中的 token
+          try {
+            const authStore = useAuthStore()
+            authStore.syncToken()
+          } catch {
+            // 如果 store 未初始化，忽略
+          }
+          // 处理队列中的请求
+          processQueue(null, newToken)
+          // 更新请求头并重试原请求
+          if (originalRequest) {
+            originalRequest.headers.Authorization = `Bearer ${newToken}`
+            return http(originalRequest)
+          }
+          return Promise.reject(error)
+        } else {
+          throw new Error('No token in refresh response')
+        }
+      } catch (refreshError: any) {
+        // 刷新失败，根据错误类型决定是否跳转登录
+        processQueue(refreshError, null)
+        
+        // 如果是 refreshToken 失效（401 或 400），清除所有认证状态并跳转到登录页
+        // 400 通常表示 refresh token 无效、过期或格式错误
+        if (refreshError?.message === 'REFRESH_TOKEN_INVALID' || 
+            (refreshError?.response?.status === 401) ||
+            (refreshError?.response?.status === 400)) {
+          const now = Date.now()
+          // 防止在短时间内重复清除状态和跳转
+          if (now - lastAuthFailureTime > AUTH_FAILURE_COOLDOWN) {
+            lastAuthFailureTime = now
+            // 清除 auth store 状态
+            try {
+              const authStore = useAuthStore()
+              authStore.clearLocalAuth()
+            } catch {
+              // 如果 store 未初始化，只清除 localStorage
+              localStorage.removeItem('token')
+            }
+            if (!window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/register')) {
+              window.location.href = '/login'
+            }
+          }
+        } else {
+          // 其他错误（如网络错误），不立即跳转，记录日志
+          console.warn('Token refresh failed, but not invalidating session:', refreshError)
+        }
+        return Promise.reject(refreshError)
+      } finally {
+        isRefreshing = false
+      }
+    }
+
+    // 创建带有错误码的错误对象，用于前端翻译
+    // 保留原始响应数据中的额外字段（如 conflicts, availableCount 等）
+    const apiError = {
+      message: responseData?.error || responseData?.message || 'Request failed',
+      code: responseData?.code || null,
+      details: responseData?.details || null,
+      ...responseData  // 保留原始响应中的所有字段
+    }
+
+    return Promise.reject(apiError)
+  }
+)
+
+// API 模块
+const api = {
+  // 认证
+  auth: {
+    check2FA: (username: string): Promise<{ requires2FA: boolean }> =>
+      http.post('/auth/check-2fa', { username }),
+    login: (username: string, password: string, totpCode?: string, recoveryCode?: string, turnstileToken?: string): Promise<LoginResponse> =>
+      http.post('/auth/login', { username, password, totpCode, recoveryCode, turnstileToken } as LoginRequest & { totpCode?: string; recoveryCode?: string; turnstileToken?: string }),
+    register: (data: RegisterRequest & { emailCode?: string }): Promise<RegisterResponse> =>
+      http.post('/auth/register', data),
+    sendVerificationCode: (email: string, turnstileToken?: string): Promise<{ message: string; expiresAt: string }> =>
+      http.post('/auth/send-verification-code', { email, turnstileToken }),
+    sendForgotPasswordCode: (email: string, turnstileToken?: string): Promise<{ message: string; expiresAt: string }> =>
+      http.post('/auth/forgot-password/send-code', { email, turnstileToken }),
+    resetPassword: (email: string, code: string, turnstileToken?: string): Promise<{ message: string; twoFactorDisabled: boolean }> =>
+      http.post('/auth/forgot-password/reset', { email, code, turnstileToken }),
+    me: (): Promise<{ user: User }> => http.get('/auth/me'),
+    logout: (): Promise<void> => http.post('/auth/logout'),
+    generateInvite: (data: GenerateInviteRequest = {}): Promise<{ code: string; codes?: string[]; count?: number; expiresAt?: string; url?: string }> =>
+      http.post('/auth/invite', data),
+    getInvites: (params: { page?: number; pageSize?: number; status?: 'used' | 'unused' } = {}): Promise<InviteListResponse> =>
+      http.get('/auth/invites', { params }),
+    deleteInvite: (id: number): Promise<void> => http.delete(`/auth/invites/${id}`),
+    // 双因素认证
+    get2FAStatus: (): Promise<{ enabled: boolean }> => http.get('/auth/2fa/status'),
+    setup2FA: (): Promise<{ secret: string; qrCode: string; recoveryCodes: string[] }> =>
+      http.post('/auth/2fa/setup'),
+    enable2FA: (code: string): Promise<{ message: string }> =>
+      http.post('/auth/2fa/enable', { code }),
+    disable2FA: (password: string, code: string): Promise<{ message: string }> =>
+      http.post('/auth/2fa/disable', { password, code }),
+    getRecoveryCodes: (): Promise<{ total: number; remaining: number; used: number }> =>
+      http.get('/auth/2fa/recovery-codes'),
+    regenerateRecoveryCodes: (password: string, code: string): Promise<{ recoveryCodes: string[] }> =>
+      http.post('/auth/2fa/regenerate-recovery-codes', { password, code }),
+    // 登录历史
+    getLoginHistory: (params?: { page?: number; pageSize?: number }): Promise<{
+      records: Array<{
+        id: number
+        ip: string
+        country: string | null
+        region: string | null
+        city: string | null
+        isp: string | null
+        timezone: string | null
+        userAgent: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/auth/login-history', { params })
+  },
+
+  userInvites: {
+    summary: (): Promise<UserInviteSummary> => http.get('/user-invites/summary'),
+    list: (params: { page?: number; pageSize?: number } = {}): Promise<{
+      invites: UserInvite[]
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/user-invites', { params }),
+    generate: (data: { costResource: string; count?: number }): Promise<{
+      invites: UserInvite[]
+      count: number
+    }> => http.post('/user-invites', data)
+  },
+
+  // 用户管理
+  users: {
+    list: (params: Record<string, unknown> = {}): Promise<PaginatedResponse<User>> =>
+      http.get('/users', { params }),
+    get: (id: number): Promise<User> => http.get(`/users/${id}`),
+    update: (id: number, data: UpdateUserRequest): Promise<UpdateUserResponse> =>
+      http.patch(`/users/${id}`, data),
+    sendChangeEmailCode: (id: number, email: string): Promise<{ message: string; expiresAt: string }> =>
+      http.post(`/users/${id}/change-email/send-code`, { email }),
+    increaseQuota: (quota: { hostLimit?: number; friendLimit?: number }): Promise<{ message: string }> =>
+      http.post('/users/me/quota/increase', quota),
+    updateRole: (id: number, role: 'admin' | 'user'): Promise<{ message: string; role: 'admin' | 'user'; revokedSessions?: number }> =>
+      http.patch(`/users/${id}/role`, { role }),
+    updateStatus: (id: number, status: 'active' | 'banned', reason?: string): Promise<User> =>
+      http.patch(`/users/${id}/status`, { status, reason }),
+    recalculateQuota: (id: number): Promise<UserQuota> =>
+      http.post(`/users/${id}/quota/recalculate`),
+    delete: (id: number): Promise<void> => http.delete(`/users/${id}`),
+    // 管理员重置用户密码（自动生成）
+    resetPassword: (id: number): Promise<{ message: string; newPassword: string; username: string }> =>
+      http.post(`/users/${id}/reset-password`),
+    // 管理员取消用户 2FA
+    disable2FA: (id: number): Promise<{ message: string }> =>
+      http.post(`/users/${id}/disable-2fa`),
+    // 管理员解绑用户 OAuth
+    unbindOAuth: (userId: number, provider: 'github' | 'google'): Promise<{ message: string }> =>
+      http.delete(`/users/${userId}/oauth/${provider}`),
+    // 管理员获取用户登录记录
+    getLoginRecords: (userId: number, params: { page?: number; pageSize?: number } = {}): Promise<{
+      records: Array<{
+        id: number
+        ip: string
+        country: string | null
+        region: string | null
+        city: string | null
+        isp: string | null
+        timezone: string | null
+        userAgent: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get(`/users/${userId}/login-records`, { params }),
+    // 管理员检测关联账号
+    detectLinkedAccounts: (days: number = 90): Promise<{
+      detectedAt: string
+      durationMs: number
+      days: number
+      summary: {
+        ipGroups: number
+        emailGroups: number
+        usernameGroups: number
+      }
+      ipGroups: Array<{
+        ip: string
+        userCount: number
+        totalLogins: number
+        users: Array<{
+          id: number
+          username: string
+          email: string | null
+          status: string
+          loginCount: number
+          lastLogin: string
+        }>
+      }>
+      emailGroups: Array<{
+        pattern: string
+        userCount: number
+        users: Array<{
+          id: number
+          username: string
+          email: string
+          status: string
+          createdAt: string
+        }>
+      }>
+      usernameGroups: Array<{
+        pattern: string
+        userCount: number
+        users: Array<{
+          id: number
+          username: string
+          email: string | null
+          status: string
+          createdAt: string
+        }>
+      }>
+    }> => http.get('/users/detect-linked-accounts', { params: { days } })
+  },
+
+  // 终端快捷命令
+  terminalSavedCommands: {
+    list: (): Promise<{ commands: TerminalSavedCommand[] }> =>
+      http.get('/terminal-saved-commands'),
+    create: (data: CreateTerminalSavedCommandRequest): Promise<{ message: string; command: TerminalSavedCommand }> =>
+      http.post('/terminal-saved-commands', data),
+    update: (id: number, data: UpdateTerminalSavedCommandRequest): Promise<{ message: string; command: TerminalSavedCommand }> =>
+      http.put(`/terminal-saved-commands/${id}`, data),
+    delete: (id: number): Promise<{ message: string }> =>
+      http.delete(`/terminal-saved-commands/${id}`)
+  },
+
+  // 实例管理
+  instances: {
+    list: (params: Record<string, unknown> = {}): Promise<PaginatedResponse<InstanceWithDetails> & { availableCountries?: string[] }> =>
+      http.get('/instances', { params }),
+    get: (id: number): Promise<InstanceWithDetails> => http.get(`/instances/${id}`),
+    getPassword: (id: number): Promise<{ rootPassword: string | null }> => http.get(`/instances/${id}/password`),
+    getStats: (id: number): Promise<InstanceStats & { status?: string }> => http.get(`/instances/${id}/stats`),
+    create: (data: CreateInstanceRequest): Promise<Instance> => http.post('/instances', data),
+    getAvailableHosts: (params: Record<string, unknown> = {}): Promise<AvailableHost[]> =>
+      http.get('/instances/available-hosts', { params }),
+    getChangeHostOptions: (id: number): Promise<ChangeHostOptionsResponse> =>
+      http.get(`/instances/${id}/change-host-options`),
+    changeHost: (id: number, data: { targetHostId: number; sshKeyId: number }): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/change-host`, data),
+    createTerminalTicket: (id: number): Promise<{ ticket: string; expiresIn: number }> =>
+      http.post(`/ws/instances/${id}/terminal-ticket`, {}),
+    updateOrder: (id: number, action: 'top' | 'up' | 'down' | 'bottom'): Promise<{ message: string; updated: number }> =>
+      http.patch(`/instances/${id}/order`, { action }),
+    delete: (id: number, reason?: string): Promise<{ message: string; refundAmount?: number }> =>
+      http.delete(`/instances/${id}`, { data: reason ? { reason } : {}, timeout: TIMEOUT.LONG }),
+    // 实例操作任务（异步模式）
+    start: (id: number): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/start`, {}),
+    stop: (id: number): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/stop`, {}),
+    restart: (id: number): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/restart`, {}),
+    // 获取实例的活跃任务
+    getActiveTask: (id: number): Promise<{
+      task: {
+        id: number
+        taskType: string
+        status: string
+        progress?: string | null
+        error?: string | null
+        queuePosition: number
+        createdAt: string
+        startedAt?: string | null
+        finishedAt?: string | null
+      } | null
+    }> => http.get(`/instances/${id}/task`),
+    // 获取任务详情
+    getTaskById: (taskId: number): Promise<{
+      task: {
+        id: number
+        instanceId: number
+        instanceName?: string | null
+        taskType: string
+        status: string
+        progress?: string | null
+        error?: string | null
+        queuePosition: number
+        createdAt: string
+        startedAt?: string | null
+        finishedAt?: string | null
+        newInstanceId?: number | null
+      }
+    }> => http.get(`/instances/tasks/${taskId}`),
+    rebuild: (id: number, data: { image: string; sshKeyId?: number; customInitCommandIds?: number[] }): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/rebuild`, data),
+    recreate: (id: number, data: { image: string; sshKeyId?: number; customInitCommandIds?: number[] }): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/recreate`, data),
+    addPort: (id: number, data: CreatePortMappingRequest): Promise<PortMapping> =>
+      http.post(`/instances/${id}/ports`, data),
+    addPortBatch: (id: number, data: {
+      protocol: 'tcp' | 'udp' | 'both'
+      privatePortStart: number
+      privatePortEnd: number
+      publicPortStart?: number
+      publicPortEnd?: number
+      remark?: string
+      portMappings?: Array<{ privatePort: number; publicPort: number }>
+    }): Promise<{
+      message: string
+      mappings: Array<{ id: number; protocol: string; publicPort: number; privatePort: number }>
+      count: number
+    } | {
+      error: string
+      message: string
+      conflicts: Array<{ publicPort: number; suggestedPort: number | null }>
+      availableCount: number
+    }> => http.post(`/instances/${id}/ports/batch`, data),
+    deletePort: (id: number, portId: number): Promise<void> =>
+      http.delete(`/instances/${id}/ports/${portId}`),
+    // 快照
+    getSnapshots: (id: number): Promise<Snapshot[]> => http.get(`/instances/${id}/snapshots`),
+    createSnapshot: (id: number, data: CreateSnapshotRequest): Promise<Snapshot> =>
+      http.post(`/instances/${id}/snapshots`, data, { timeout: TIMEOUT.SNAPSHOT }),
+    deleteSnapshot: (id: number, snapshotId: number): Promise<void> =>
+      http.delete(`/instances/${id}/snapshots/${snapshotId}`, { timeout: TIMEOUT.MEDIUM }),
+    restoreSnapshot: (id: number, snapshotId: number): Promise<void> =>
+      http.post(`/instances/${id}/snapshots/${snapshotId}/restore`, {}, { timeout: TIMEOUT.SNAPSHOT }),
+    getSnapshotPolicy: (id: number): Promise<SnapshotPolicy> =>
+      http.get(`/instances/${id}/snapshot-policy`),
+    updateSnapshotPolicy: (id: number, data: UpdateSnapshotPolicyRequest): Promise<SnapshotPolicy> =>
+      http.put(`/instances/${id}/snapshot-policy`, data),
+    // 备份
+    getBackups: (id: number): Promise<Backup[]> => http.get(`/instances/${id}/backups`),
+    createBackup: (id: number, data: CreateBackupRequest): Promise<Backup> =>
+      http.post(`/instances/${id}/backups`, data, { timeout: TIMEOUT.SNAPSHOT }),
+    deleteBackup: (id: number, backupId: number): Promise<void> =>
+      http.delete(`/instances/${id}/backups/${backupId}`, { timeout: TIMEOUT.MEDIUM }),
+    getBackupPolicy: (id: number): Promise<BackupPolicy> =>
+      http.get(`/instances/${id}/backup-policy`),
+    updateBackupPolicy: (id: number, data: UpdateBackupPolicyRequest): Promise<BackupPolicy> =>
+      http.put(`/instances/${id}/backup-policy`, data),
+    // 备份导出
+    exportBackup: (id: number, backupId: number): Promise<{ taskId: string; status: string; expiresAt: string; downloadUrl: string }> =>
+      http.post(`/instances/${id}/backups/${backupId}/export`, {}),
+    getExportStatus: (id: number, taskId: string): Promise<{ taskId: string; status: string; error?: string; expiresAt: string }> =>
+      http.get(`/instances/${id}/backups/export/${taskId}/status`),
+    // 获取一次性下载 token（安全改进：使用短期 token 替代 JWT URL 参数）
+    getDownloadToken: (id: number, taskId: string): Promise<{ downloadUrl: string; expiresIn: number }> =>
+      http.post(`/instances/${id}/backups/export/${taskId}/download-token`, {}),
+    // 已废弃：直接获取下载 URL（不安全，保留用于向后兼容）
+    // @deprecated 使用 getDownloadToken 替代
+    getExportDownloadUrl: (id: number, taskId: string): string =>
+      `/api/instances/${id}/backups/export/${taskId}/download`,
+    // 备份恢复
+    restoreBackup: (id: number, backupId: number): Promise<{ taskId: string; status: string; message: string }> =>
+      http.post(`/instances/${id}/restore/${backupId}`, {}, { timeout: TIMEOUT.SNAPSHOT }),
+    getRestoreStatus: (id: number, taskId: string): Promise<{
+      taskId: string
+      status: string
+      error?: string
+      queuePosition: number
+      duration: number | null
+      createdAt: string
+      startedAt: string | null
+      finishedAt: string | null
+    }> =>
+      http.get(`/instances/${id}/restore/${taskId}`),
+    rollbackRestore: (id: number, taskId: string): Promise<{ success: boolean; message: string }> =>
+      http.post(`/instances/${id}/restore/${taskId}/rollback`, {}, { timeout: TIMEOUT.SNAPSHOT }),
+    // 备份上传到远程存储
+    uploadBackupRemote: (id: number, backupId: number, storageConfigId?: number): Promise<{
+      taskId: number
+      status: string
+      queuePosition: number
+      storageName: string
+      message: string
+    }> => http.post(`/instances/${id}/backups/${backupId}/upload-remote`, { storageConfigId }),
+    getUploadTaskStatus: (id: number, taskId: number): Promise<{
+      taskId: number
+      status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED'
+      error?: string
+      remoteFileName?: string
+      fileSize?: string
+      storageName?: string
+      storageType?: string
+      queuePosition: number
+      duration: number | null
+      createdAt: string
+      startedAt: string | null
+      finishedAt: string | null
+    }> => http.get(`/instances/${id}/upload-tasks/${taskId}`),
+    cancelUploadTask: (id: number, taskId: number): Promise<{ success: boolean; message: string }> =>
+      http.delete(`/instances/${id}/upload-tasks/${taskId}`),
+    getActiveUploadTask: (id: number): Promise<{
+      task: {
+        taskId: number
+        backupId: number
+        status: 'PENDING' | 'PROCESSING'
+        storageName?: string
+        storageType?: string
+        queuePosition: number
+        duration: number | null
+        createdAt: string
+        startedAt: string | null
+        finishedAt: string | null
+      } | null
+    }> => http.get(`/instances/${id}/upload-tasks/active`),
+    // 配额
+    updateQuota: (id: number, data: UpdateInstanceRequest): Promise<Instance> =>
+      http.patch(`/instances/${id}/quota`, data),
+    // 重命名
+    rename: (id: number, name: string): Promise<{ message: string; name: string }> =>
+      http.patch(`/instances/${id}/rename`, { name }),
+    // 更新配置（CPU、内存、磁盘）
+    updateConfig: (id: number, data: { cpu?: number; memory?: number; disk?: number; monthlyTrafficLimit?: string | null }): Promise<{
+      message: string
+      instance: { id: number; cpu: number; memory: number; disk: number }
+    }> => http.patch(`/instances/${id}/config`, data),
+    // 复制实例
+    clone: (id: number): Promise<{ message: string; taskId: number; status: string }> =>
+      http.post(`/instances/${id}/clone`, {}),
+    // 实例配置
+    getConfig: (id: number): Promise<{
+      config: {
+        limits_read: string
+        limits_write: string
+        limits_read_iops: number
+        limits_write_iops: number
+        limits_ingress: string
+        limits_egress: string
+        limits_processes: number
+        limits_cpu_priority: number
+        boot_autostart: boolean
+        boot_autostart_priority: number
+        boot_autostart_delay: number
+        boot_host_shutdown_timeout: number
+      }
+      overrides: Record<string, boolean>
+      packageDefaults: {
+        limits_read: string
+        limits_write: string
+        limits_read_iops: number
+        limits_write_iops: number
+        limits_ingress: string
+        limits_egress: string
+        limits_processes: number
+        limits_cpu_priority: number
+        boot_autostart: boolean
+        boot_autostart_priority: number
+        boot_autostart_delay: number
+        boot_host_shutdown_timeout: number
+      }
+      ioLimitMode: 'throughput' | 'iops'
+      swap: {
+        available: boolean
+        enabled: boolean
+        sizeMb: number
+        kind: 'container' | 'vm'
+        requiresRunning: boolean
+      }
+    }> => http.get(`/instances/${id}/config`),
+    enableSwap: (id: number): Promise<{ message: string; swapEnabled: boolean; swapSize: number }> =>
+      http.post(`/instances/${id}/swap/enable`, {}),
+    disableSwap: (id: number): Promise<{ message: string; swapEnabled: boolean; swapSize: number }> =>
+      http.post(`/instances/${id}/swap/disable`, {}),
+    updateInstanceConfig: (id: number, data: {
+      limitsRead?: string | null
+      limitsWrite?: string | null
+      limitsReadIops?: number | null
+      limitsWriteIops?: number | null
+      limitsIngress?: string | null
+      limitsEgress?: string | null
+      limitsProcesses?: number | null
+      limitsCpuPriority?: number | null
+      bootAutostart?: boolean | null
+      bootAutostartPriority?: number | null
+      bootAutostartDelay?: number | null
+      bootHostShutdownTimeout?: number | null
+    }): Promise<{ message: string }> => http.patch(`/instances/${id}/advanced-config`, data),
+    // 提升进程数限制
+    boostProcesses: (id: number): Promise<{ message: string; newLimit: number }> =>
+      http.post(`/instances/${id}/boost-processes`, {}),
+    // IP 地址管理
+    getIpAddresses: (id: number): Promise<{ ipAddresses: IpAddress[] }> =>
+      http.get(`/instances/${id}/ips`),
+    addIpAddress: (id: number, customAddress?: string): Promise<{ success: boolean; ipAddress: IpAddress }> =>
+      http.post(`/instances/${id}/ips`, customAddress ? { customAddress } : {}, { timeout: TIMEOUT.MEDIUM }),
+    deleteIpAddress: (id: number, ipId: number): Promise<{ success: boolean }> =>
+      http.delete(`/instances/${id}/ips/${ipId}`, { timeout: TIMEOUT.MEDIUM }),
+    // IPv6 地址管理 (新双网卡架构)
+    setCustomIpv6: (id: number, ipId: number, address: string): Promise<{ success: boolean; ipAddress: IpAddress }> =>
+      http.put(`/instances/${id}/ips/${ipId}/custom`, { address }, { timeout: TIMEOUT.MEDIUM }),
+    // IPv6 网段管理
+    getIpv6Subnets: (id: number): Promise<{ subnets: Ipv6Subnet[] }> =>
+      http.get(`/instances/${id}/subnets`),
+    allocateIpv6Subnet: (id: number, prefix: 112 | 120 | 124): Promise<{ success: boolean; subnet: Ipv6Subnet }> =>
+      http.post(`/instances/${id}/subnet`, { prefix }, { timeout: TIMEOUT.MEDIUM }),
+    deleteIpv6Subnet: (id: number, subnetId: number): Promise<{ success: boolean }> =>
+      http.delete(`/instances/${id}/subnet/${subnetId}`, { timeout: TIMEOUT.MEDIUM }),
+    // 站点管理
+    getSites: (id: number): Promise<{
+      sites: Array<{
+        id: number
+        domain: string
+        targetPort: number
+        httpsEnabled: boolean
+        remark: string | null
+        status: 'pending' | 'active' | 'error'
+        enabled: boolean
+        error: string | null
+        createdAt: string
+      }>
+      caddyEnabled: boolean
+      dnsRecordType: 'A' | 'AAAA' | 'CNAME' | null
+      dnsRecordValue: string | null
+      siteQuota: {
+        used: number
+        limit: number  // 0 = 不限制
+      }
+      canManageSites?: boolean
+    }> => http.get(`/instances/${id}/sites`),
+    addSite: (id: number, data: { domain: string; targetPort: number; httpsEnabled?: boolean; remark?: string }): Promise<{
+      success: boolean
+      site: { id: number; domain: string; targetPort: number; httpsEnabled: boolean; status: string }
+      dnsHint: {
+        type: 'A' | 'AAAA' | 'CNAME'
+        host: string
+        value: string
+      }
+    }> => http.post(`/instances/${id}/sites`, data),
+    deleteSite: (id: number, siteId: number): Promise<{ success: boolean }> =>
+      http.delete(`/instances/${id}/sites/${siteId}`),
+    updateSite: (id: number, siteId: number, data: { targetPort?: number; httpsEnabled?: boolean; remark?: string }): Promise<{
+      message: string
+      site: { id: number; domain: string; targetPort: number; httpsEnabled: boolean; remark: string | null; status: string }
+    }> => http.patch(`/instances/${id}/sites/${siteId}`, data),
+    refreshSite: (id: number, siteId: number): Promise<{ success: boolean; status: string }> =>
+      http.post(`/instances/${id}/sites/${siteId}/refresh`),
+    checkDns: (id: number, siteId: number): Promise<{
+      dnsResolved: boolean
+      ipMatches?: boolean
+      expectedIp: string
+      resolvedIps: string[]
+      activated?: boolean
+      status: string
+      error?: string
+      message?: string
+    }> => http.post(`/instances/${id}/sites/${siteId}/check-dns`),
+    toggleSite: (id: number, siteId: number): Promise<{ message: string; enabled: boolean; status: string }> =>
+      http.post(`/instances/${id}/sites/${siteId}/toggle`),
+    getCertificateStatus: (id: number, siteId: number): Promise<{
+      httpsEnabled: boolean
+      status: 'disabled' | 'valid' | 'pending' | 'dns_error' | 'connection_refused' | 'timeout' | 'cert_pending' | 'error'
+      message?: string
+      error?: string
+      hint?: string
+      certificate?: {
+        valid: boolean
+        issuer: string
+        subject: string
+        validFrom: string
+        validTo: string
+        daysRemaining: number
+      }
+    }> => http.get(`/instances/${id}/sites/${siteId}/certificate`),
+    // Cloud-init 状态检查
+    checkCloudInitStatus: (id: number): Promise<import('@/types/api').CloudInitStatusResponse> =>
+      http.get(`/instances/${id}/cloud-init-status`),
+    manualCompleteCloudInit: (id: number): Promise<import('@/types/api').CloudInitStatusResponse> =>
+      http.post(`/instances/${id}/cloud-init-status/manual-complete`, {}),
+    // 封停/解封实例（仅宿主机所有者和管理员）
+    suspend: (id: number, reason?: string): Promise<{ message: string }> =>
+      http.post(`/instances/${id}/suspend`, { reason }),
+    unsuspend: (id: number): Promise<{ message: string }> =>
+      http.post(`/instances/${id}/unsuspend`, {}),
+    // 同步实例状态（从 Incus 获取实际状态并更新数据库）
+    syncStatus: (id: number): Promise<{
+      success: boolean
+      statusChanged: boolean
+      from?: string
+      to?: string
+      currentStatus: string
+      ipv4Changed?: boolean
+      oldIpv4?: string
+      newIpv4?: string
+      proxySitesUpdated?: number
+    }> => http.post(`/instances/${id}/sync-status`, {}),
+    // 重新分配 IPv6 地址（仅 nat_ipv6 模式）
+    reassignIpv6: (id: number): Promise<{ message: string; oldIpv6: string | null; newIpv6: string }> =>
+      http.post(`/instances/${id}/reassign-ipv6`, {})
+  },
+
+  // SSH 密钥
+  sshKeys: {
+    list: (): Promise<{ keys: SshKey[] }> => http.get('/ssh-keys'),
+    create: (data: CreateSshKeyRequest): Promise<{ message: string; key: SshKey }> => http.post('/ssh-keys', data),
+    delete: (id: number): Promise<{ message: string }> => http.delete(`/ssh-keys/${id}`),
+    generate: (): Promise<{ message: string; privateKey: string; key: { id: number; name: string; fingerprint: string; publicKeyPreview: string } }> =>
+      http.post('/ssh-keys/generate')
+  },
+
+  // 通知管理
+  notifications: {
+    list: (): Promise<{ channels: NotificationChannel[] }> => http.get('/notifications'),
+    get: (id: number): Promise<NotificationChannel> => http.get(`/notifications/${id}`),
+    create: (data: CreateNotificationChannelRequest): Promise<NotificationChannel> =>
+      http.post('/notifications', data),
+    update: (id: number, data: UpdateNotificationChannelRequest): Promise<NotificationChannel> =>
+      http.patch(`/notifications/${id}`, data),
+    delete: (id: number): Promise<void> => http.delete(`/notifications/${id}`),
+    test: (id: number): Promise<void> => http.post(`/notifications/${id}/test`),
+    toggle: (id: number): Promise<NotificationChannel> => http.post(`/notifications/${id}/toggle`),
+    // 通知历史
+    getLogs: (params: { page?: number; pageSize?: number; status?: 'pending' | 'sent' | 'failed' } = {}): Promise<{
+      logs: Array<{
+        id: number
+        channelId: number
+        channelName: string
+        channelType: string
+        eventType: string
+        message: string
+        status: string
+        error: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/notifications/logs', { params }),
+    getStats: (): Promise<{
+      stats: {
+        total: number
+        sent: number
+        failed: number
+        pending: number
+      }
+    }> => http.get('/notifications/stats'),
+    // 获取管理员创建的全局通知渠道（供托管用户绑定套餐使用）
+    getGlobalChannels: (): Promise<{
+      channels: Array<{ id: number; name: string; type: string; configPreview: string }>
+    }> => http.get('/notifications/global-channels')
+  },
+
+  // Telegram 专用机器人绑定
+  telegram: {
+    getBinding: (): Promise<TelegramBindingStatus> => http.get('/telegram/binding'),
+    createBindToken: (): Promise<TelegramBindTokenResponse> => http.post('/telegram/bind-token'),
+    unlink: (): Promise<{ message: string }> => http.delete('/telegram/binding'),
+    getWebhookInfo: (): Promise<TelegramWebhookInfoResponse> => http.get('/telegram/admin/webhook/info'),
+    setupWebhook: (data: { baseUrl?: string } = {}): Promise<TelegramWebhookSetupResponse> =>
+      http.post('/telegram/admin/webhook/setup', data),
+    deleteWebhook: (): Promise<TelegramWebhookDeleteResponse> =>
+      http.post('/telegram/admin/webhook/delete', {}),
+    listBindings: (params?: { page?: number; pageSize?: number; search?: string }): Promise<TelegramAdminBindingsResponse> =>
+      http.get('/telegram/admin/bindings', { params }),
+    unlinkAdminBinding: (id: number): Promise<{ message: string }> =>
+      http.delete(`/telegram/admin/bindings/${id}`)
+  },
+
+  // 管理员全局通知渠道管理
+  adminNotificationChannels: {
+    list: (): Promise<{
+      channels: Array<{ id: number; name: string; type: string; enabled: boolean; boundPackages: number; configPreview: string; createdAt: string }>
+    }> => http.get('/admin/notification-channels'),
+    get: (id: number): Promise<{
+      channel: { id: number; name: string; type: string; enabled: boolean; config: Record<string, unknown>; createdAt: string }
+    }> => http.get(`/admin/notification-channels/${id}`),
+    create: (data: { name: string; botToken: string; chatId: string; enabled?: boolean }): Promise<{ message: string; channel: { id: number; name: string } }> =>
+      http.post('/admin/notification-channels', data),
+    update: (id: number, data: { name?: string; botToken?: string; chatId?: string; enabled?: boolean }): Promise<{ message: string }> =>
+      http.patch(`/admin/notification-channels/${id}`, data),
+    delete: (id: number): Promise<{ message: string }> =>
+      http.delete(`/admin/notification-channels/${id}`),
+    test: (id: number): Promise<{ message: string }> =>
+      http.post(`/admin/notification-channels/${id}/test`)
+  },
+
+  // 主机管理
+  hosts: {
+    list: (params: Record<string, unknown> = {}): Promise<{ hosts: HostWithDetails[]; total: number; page: number; pageSize: number; totalPages: number }> =>
+      http.get('/hosts', { params }),
+    // 管理员专用：获取托管节点列表
+    listHosted: (params: { userId?: number; page?: number; pageSize?: number; search?: string } = {}): Promise<{ hosts: HostWithDetails[]; total: number; page: number; pageSize: number; totalPages: number }> =>
+      http.get('/hosts', { params: { ...params, scope: 'hosted' } }),
+    get: (id: number): Promise<HostWithDetails> => http.get(`/hosts/${id}`),
+    lookupGiftTargetUser: (hostId: number, username: string): Promise<{
+      user: {
+        id: number
+        username: string
+        status: string
+        hasSshKey: boolean
+      }
+    }> => http.get(`/hosts/${hostId}/users/lookup`, { params: { username } }),
+    getImagePolicy: (id: number): Promise<HostImagePolicy> => http.get(`/hosts/${id}/images`),
+    updateImagePolicy: (id: number, data: { useDefault: boolean; imageIds?: number[] }): Promise<HostImagePolicy & { message: string }> =>
+      http.put(`/hosts/${id}/images`, data),
+    create: (data: CreateHostRequest): Promise<Host> => http.post('/hosts', data),
+    update: (id: number, data: UpdateHostRequest): Promise<Host> =>
+      http.patch(`/hosts/${id}`, data),
+    delete: (id: number): Promise<void> => http.delete(`/hosts/${id}`),
+    test: (id: number): Promise<{ success: boolean; message?: string }> =>
+      http.post(`/hosts/${id}/test`, {}, { timeout: TIMEOUT.MEDIUM }),
+    takeoverOfficial: (id: number): Promise<{
+      success: boolean
+      summary: {
+        hostId: number
+        previousOwnerId: number
+        previousOwnerUsername: string
+        instanceCount: number
+        transferredPackageCount: number
+        detachedPackageCount: number
+        transferredPackageNames: string[]
+        detachedPackageNames: string[]
+        hostRenamed: boolean
+        oldHostName: string
+        newHostName: string
+      }
+    }> => http.post(`/hosts/${id}/takeover-official`, {}),
+    verify: (id: number): Promise<{ success: boolean; message?: string; resources?: { cpuTotal: number; memoryTotalGB: number; diskTotalGB: number } }> =>
+      http.post(`/hosts/${id}/verify`, {}, { timeout: TIMEOUT.MEDIUM }),
+    regenerateInstall: (id: number): Promise<{ success: boolean; installCommand: string; installToken?: string; message: string }> =>
+      http.post(`/hosts/${id}/regenerate-install`, {}),
+    getAgentStatus: (id: number): Promise<HostAgentStatusResponse> =>
+      http.get(`/agent/hosts/${id}/status`),
+    generateAgentInstallCommand: (id: number): Promise<HostAgentInstallCommandResponse> =>
+      http.post(`/agent/hosts/${id}/install-command`, {}),
+    requestAgentUpgrade: (id: number): Promise<HostAgentUpgradeRequestResponse> =>
+      http.post(`/agent/hosts/${id}/upgrade`, {}),
+    sync: (id: number): Promise<void> => http.post(`/hosts/${id}/sync`, {}, { timeout: TIMEOUT.LONG }),
+    setMaintenance: (id: number, enabled: boolean): Promise<Host> =>
+      http.post(`/hosts/${id}/maintenance`, { enabled }),
+    // 存储池管理
+    getStoragePools: (id: number): Promise<{ pools: Array<{ name: string; driver: string; description: string; status: string; purpose?: 'instance_data' | 'instance_storage' | null; config: Record<string, string>; usedBy: number; space?: { used: number; total: number } | null }> }> =>
+      http.get(`/hosts/${id}/storage-pools`),
+    createStoragePool: (id: number, data: {
+      name: string
+      driver?: 'zfs' | 'lvm' | 'btrfs' | 'dir'  // 使用已有池时可不传
+      source?: string
+      size?: string
+      zfsPoolName?: string
+      lvmVgName?: string
+      lvmUseThinpool?: boolean
+      description?: string
+      purpose?: 'instance_data' | 'instance_storage'
+      useExisting?: boolean  // 使用/导入已有存储池模式
+      existingSource?: string  // 底层已存在的存储源名称（如 ZFS 池名、LVM VG 名）
+    }): Promise<{ success: boolean; message: string; imported?: boolean }> =>
+      http.post(`/hosts/${id}/storage-pools`, data),
+    deleteStoragePool: (id: number, poolName: string): Promise<{ success: boolean; message: string }> =>
+      http.delete(`/hosts/${id}/storage-pools/${poolName}`),
+    updateStoragePool: (id: number, poolName: string, data: {
+      size?: string
+      description?: string
+      purpose?: 'instance_data' | 'instance_storage'
+    }): Promise<{ success: boolean; message: string }> =>
+      http.patch(`/hosts/${id}/storage-pools/${poolName}`, data),
+    // Caddy 管理
+    getCaddy: (id: number): Promise<{
+      enabled: boolean
+      username: string | null
+      port: number
+      hasPassword: boolean
+      natPublicIp: string | null
+      sitesCount: number
+    }> => http.get(`/hosts/${id}/caddy`),
+    generateCaddyCommand: (id: number): Promise<{
+      installCommand: string
+      username: string
+      password: string
+      port: number
+      isNewCredentials: boolean
+    }> => http.post(`/hosts/${id}/caddy/generate`),
+    resetCaddyCredentials: (id: number): Promise<{
+      installCommand: string
+      username: string
+      password: string
+      port: number
+    }> => http.post(`/hosts/${id}/caddy/reset`),
+    confirmCaddyInstalled: (id: number): Promise<{ message: string }> =>
+      http.post(`/hosts/${id}/caddy/confirm`),
+    testCaddyConnection: (id: number): Promise<{
+      connected: boolean
+      sitesCount: number
+      dnsRecordType: 'A' | 'AAAA' | 'CNAME'
+      dnsRecordValue: string
+    }> => http.post(`/hosts/${id}/caddy/test`, {}, { timeout: TIMEOUT.MEDIUM }),
+    getCaddySites: (id: number, params: { page?: number; pageSize?: number } = {}): Promise<{
+      sites: Array<{
+        id: number
+        domain: string
+        targetPort: number
+        httpsEnabled: boolean
+        status: 'pending' | 'active' | 'error'
+        enabled: boolean
+        error: string | null
+        createdAt: string
+        instance: {
+          id: number
+          name: string
+          ipv4: string | null
+          status: string
+        } | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get(`/hosts/${id}/caddy/sites`, { params }),
+    // 批量删除实例预览（计算退款信息）
+    batchDeleteInstancesPreview: (hostId: number, instanceIds: number[]): Promise<{
+      instances: Array<{
+        id: number
+        name: string
+        username: string
+        userId: number
+        isOwnInstance: boolean
+        isPaid: boolean
+        remainingDays: number
+        refundAmount: number
+      }>
+      totalRefundAmount: number
+    }> => http.post(`/hosts/${hostId}/instances/batch-delete-preview`, { instanceIds }),
+    // 批量删除实例
+    batchDeleteInstances: (hostId: number, instanceIds: number[], reason?: string, databaseOnly?: boolean): Promise<{
+      message: string
+      results: Array<{ id: number; name: string; success: boolean; error?: string; refundAmount?: number }>
+      successCount: number
+      failedCount: number
+      totalRefundAmount: number
+    }> => http.delete(`/hosts/${hostId}/instances/batch`, { data: { instanceIds, reason, databaseOnly }, timeout: TIMEOUT.BATCH }),
+    // 批量赠送时长
+    giftDays: (hostId: number, instanceIds: number[], days: number): Promise<{
+      message: string
+      results: Array<{ instanceId: number; instanceName: string; success: boolean; error?: string; newExpiresAt?: string }>
+      successCount: number
+      failedCount: number
+      skippedCount: number
+    }> => http.post(`/hosts/${hostId}/instances/gift-days`, { instanceIds, days }),
+    createInstanceForUser: (hostId: number, data: {
+      username: string
+      name: string
+      packageId: number
+      image: string
+      cpu?: number
+      memory?: number
+      disk?: number
+      planId?: number
+      giftDays?: number
+    }): Promise<{
+      message: string
+      instance: {
+        id: number
+        name: string
+        incusId: string
+        host: string
+        status: string
+        user: { id: number; username: string }
+        isPaid: boolean
+        planName: string | null
+        charged: boolean
+        amount: number
+        expiresAt: string | null
+        giftDays?: number | null
+      }
+    }> => http.post(`/hosts/${hostId}/instances/create-for-user`, data),
+    // 修改付费实例的续费价格（托管节点所有者专用）
+    updateInstanceRenewalPrice: (hostId: number, instanceId: number, newPrice: number): Promise<{
+      message: string
+      instanceId: number
+      instanceName: string
+      oldPrice: number
+      newPrice: number
+    }> => http.patch(`/hosts/${hostId}/instances/${instanceId}/renewal-price`, { newPrice }),
+    // 批量同步实例状态
+    batchSyncInstanceStatus: (hostId: number, instanceIds: number[]): Promise<{
+      message: string
+      results: Array<{ id: number; name: string; success: boolean; from?: string; to?: string; ipv4Changed?: boolean; oldIpv4?: string; newIpv4?: string; proxySitesUpdated?: number; error?: string }>
+      syncedCount: number
+      changedCount: number
+      ipv4ChangedCount: number
+      failedCount: number
+    }> => http.post(`/hosts/${hostId}/instances/sync-status`, { instanceIds }, { timeout: TIMEOUT.MEDIUM }),
+    // 资源校对：重新计算宿主机资源使用量，并将配额对齐到已用配额
+    recalculateResources: (hostId: number): Promise<{
+      message: string
+      hasChanges: boolean
+      before: { cpuUsed: number; memoryUsed: number; diskUsed: number; natPortsUsedCount: number; cpuAllowanceMax: number; memoryMax: number }
+      after: { cpuUsed: number; memoryUsed: number; diskUsed: number; natPortsUsedCount: number; cpuAllowanceMax: number; memoryMax: number }
+      diff: { cpuUsed: number; memoryUsed: number; diskUsed: number; natPortsUsedCount: number; cpuAllowanceMax: number; memoryMax: number }
+    }> => http.post(`/hosts/${hostId}/recalculate-resources`),
+    // 批量封停实例
+    batchSuspendInstances: (hostId: number, instanceIds: number[], reason?: string): Promise<{
+      message: string
+      results: Array<{ id: number; name: string; success: boolean; error?: string }>
+      successCount: number
+      failedCount: number
+    }> => http.post(`/hosts/${hostId}/instances/suspend`, { instanceIds, reason }, { timeout: TIMEOUT.BATCH }),
+    // 批量解封实例
+    batchUnsuspendInstances: (hostId: number, instanceIds: number[]): Promise<{
+      message: string
+      results: Array<{ id: number; name: string; success: boolean; error?: string }>
+      successCount: number
+      failedCount: number
+    }> => http.post(`/hosts/${hostId}/instances/unsuspend`, { instanceIds }, { timeout: TIMEOUT.BATCH }),
+    // 批量为节点下所有付费实例免费延期（仅管理员）
+    batchExtendAll: (hostId: number, days: number): Promise<{
+      success: boolean
+      message: string
+      extendedCount: number
+    }> => http.post(`/hosts/${hostId}/extend-all`, { days }),
+    // 批量迁移实例到其他节点（仅管理员）
+    migrateInstances: (hostId: number, instanceIds: number[], targetHostId: number, targetImage: string, targetPlanId?: number): Promise<{
+      message: string
+      results: Array<{ id: number; name: string; success: boolean; error?: string; newInstanceId?: number }>
+      successCount: number
+      failedCount: number
+    }> => http.post(`/hosts/${hostId}/instances/migrate`, { instanceIds, targetHostId, targetImage, targetPlanId }, { timeout: TIMEOUT.BATCH }),
+    // 获取节点绑定的套餐方案（用于改节点）
+    getHostPlans: (hostId: number): Promise<{
+      plans: Array<{
+        id: number
+        name: string
+        packageId: number
+        packageName: string
+        price: number
+        billingCycle: number
+      }>
+    }> => http.get(`/hosts/${hostId}/plans`),
+        // 批量修改实例配置
+        batchUpdateConfig: (hostId: number, data: {
+          instanceIds: number[]
+          config: Record<string, unknown>
+        }): Promise<{
+          success: boolean
+          totalCount: number
+          successCount: number
+          failedCount: number
+          failedItems: Array<{
+            instanceId: number
+            incusId: string
+            name: string
+            error?: string
+          }>
+          retryPayload?: {
+            instanceIds: number[]
+            config: Record<string, unknown>
+          }
+        }> => http.post(`/hosts/${hostId}/instances/batch-config`, data, { timeout: TIMEOUT.BATCH }),
+    // 兑换码管理
+    getRedeemCodes: (hostId: number, params: { limit?: number; offset?: number; enabled?: boolean } = {}): Promise<{
+      codes: Array<{
+        id: number
+        code: string
+        codeType: 'c' | 'r' | 'd' | 't'
+        codeValue: number
+        maxUses: number
+        usedCount: number
+        expiresAt: string | null
+        enabled: boolean
+        remark: string | null
+        batchId: string | null
+        createdAt: string
+      }>
+      total: number
+    }> => http.get(`/hosts/${hostId}/redeem-codes`, { params }),
+    createRedeemCode: (hostId: number, data: {
+      codeType: 'c' | 'r' | 'd' | 't'
+      codeValue: number
+      maxUses?: number
+      expiresAt?: string | null
+      remark?: string
+      batchCount?: number
+    }): Promise<{ message: string; code?: string; id?: number; codes?: string[]; batchId?: string; count?: number }> =>
+      http.post(`/hosts/${hostId}/redeem-codes`, data),
+    updateRedeemCode: (hostId: number, codeId: number, data: {
+      enabled?: boolean
+      remark?: string
+      maxUses?: number
+      expiresAt?: string | null
+    }): Promise<{ message: string }> =>
+      http.patch(`/hosts/${hostId}/redeem-codes/${codeId}`, data),
+    deleteRedeemCode: (hostId: number, codeId: number): Promise<{ message: string }> =>
+      http.delete(`/hosts/${hostId}/redeem-codes/${codeId}`),
+    batchDeleteRedeemCodes: (hostId: number, ids: number[]): Promise<{ message: string; count: number }> =>
+      http.post(`/hosts/${hostId}/redeem-codes/batch-delete`, { ids }),
+    getRedeemCodeUsages: (hostId: number, codeId: number, params: { limit?: number; offset?: number } = {}): Promise<{
+      usages: Array<{
+        id: number
+        user: { id: number; username: string }
+        instance: { id: number; name: string }
+        usedAt: string
+      }>
+      total: number
+    }> => http.get(`/hosts/${hostId}/redeem-codes/${codeId}/usages`, { params }),
+    getRedeemCodeOptions: (): Promise<{
+      types: Array<{ value: string; label: string; unit: string }>
+      ranges: Record<string, { min: number; max: number; unit: string }>
+    }> => http.get('/redeem-code-options'),
+    opsDiscover: (hostId: number): Promise<{
+      managed: Array<{ incusName: string; incusType: string; incusStatus: string; dbId: number; dbStatus: string; userId: number }>
+      orphaned: Array<{ incusName: string; incusType: string; incusStatus: string }>
+      missing: Array<{ dbId: number; dbName: string; incusId: string; dbStatus: string }>
+      summary: {
+        totalIncus: number
+        totalDb: number
+        managedCount: number
+        orphanedCount: number
+        missingCount: number
+      }
+    }> => http.post(`/hosts/${hostId}/ops/discover`),
+    opsBaselineSync: (hostId: number): Promise<{
+      message: string
+      resources: {
+        cpuUsed: number
+        memoryUsed: number
+        diskUsed: number
+      }
+      instanceSync: {
+        total: number
+        synced: number
+        ipChanged: number
+      }
+    }> => http.post(`/hosts/${hostId}/ops/baseline-sync`),
+    opsNetworkRepair: (hostId: number): Promise<{
+      message: string
+      results: Array<{
+        id: number
+        name: string
+        success: boolean
+        statusChanged?: boolean
+        oldStatus?: string
+        newStatus?: string
+        ipv4Changed?: boolean
+        oldIpv4?: string | null
+        newIpv4?: string | null
+        ipv6Changed?: boolean
+        oldIpv6?: string | null
+        newIpv6?: string | null
+        error?: string
+      }>
+      summary: {
+        total: number
+        success: number
+        failed: number
+        changed: number
+      }
+    }> => http.post(`/hosts/${hostId}/ops/network-repair`),
+    opsInstanceSshKeys: (hostId: number, instanceId: number): Promise<{
+      keys: SshKey[]
+    }> => http.get(`/hosts/${hostId}/ops/instances/${instanceId}/ssh-keys`),
+    opsInstanceInitCommands: (hostId: number, instanceId: number, distro: string): Promise<{
+      commands: Array<{
+        id: number
+        name: string
+        commandLineCount: number
+        distros: string[]
+        description: string | null
+      }>
+    }> => http.get(`/hosts/${hostId}/ops/instances/${instanceId}/init-commands`, { params: { distro } }),
+    opsInstancePreview: (hostId: number, instanceId: number): Promise<{
+      instanceId: number
+      instanceName: string
+      incusId: string
+      instanceStatus: string
+      hostName: string
+      hostId: number
+      imageAlias?: string | null
+      canSync: boolean
+      canRestart: boolean
+      canForceRestart: boolean
+      canRebuild: boolean
+      canRecreate: boolean
+      activeTask?: {
+        id: number
+        taskType: string
+        status: string
+      } | null
+      risk: {
+        status: string
+        isStopped: boolean
+        hasActiveTask: boolean
+        suggestedAction: 'rebuild' | 'recreate' | 'sync' | 'restart' | 'none'
+        notes: string[]
+      }
+    }> => http.post(`/hosts/${hostId}/ops/instances/${instanceId}/preview`),
+    opsInstanceSync: (hostId: number, instanceId: number): Promise<{
+      success: boolean
+      message: string
+      statusChanged?: boolean
+      from?: string
+      to?: string
+      currentStatus?: string
+      ipv4Changed?: boolean
+      oldIpv4?: string | null
+      newIpv4?: string | null
+      ipv6Changed?: boolean
+      oldIpv6?: string | null
+      newIpv6?: string | null
+    }> => http.post(`/hosts/${hostId}/ops/instances/${instanceId}/sync`),
+    opsInstanceRestart: (hostId: number, instanceId: number, force: boolean): Promise<{
+      success: boolean
+      message: string
+    }> => http.post(`/hosts/${hostId}/ops/instances/${instanceId}/restart`, { force }),
+    opsInstanceDangerousAction: (hostId: number, instanceId: number, data: {
+      action: 'rebuild' | 'recreate'
+      imageAlias: string
+      sshKeyId?: number
+      customInitCommandIds?: number[]
+      confirmationText: string
+      riskConfirmed: boolean
+    }): Promise<{
+      success: boolean
+      message: string
+      taskId: number
+      status: string
+    }> => http.post(`/hosts/${hostId}/ops/instances/${instanceId}/dangerous-action`, data),
+    opsInstanceAuditScan: (hostId: number, instanceId: number): Promise<{
+      success: boolean
+      scanId: number
+      scannedAt: string
+      capability: string
+      instance: {
+        id: number
+        name: string
+        incusId: string
+        type: string
+        status: string
+      }
+      summary: {
+        riskLevel: 'info' | 'low' | 'medium' | 'high'
+        processCount: number
+        connectionCount: number
+        listeningCount: number
+        startupItemCount: number
+        findingCount: number
+      }
+      ignoredCount?: number
+      rules?: Array<{
+        id: string
+        source: 'builtin' | 'custom'
+        name: string
+        category: string
+        severity: 'info' | 'low' | 'medium' | 'high'
+        targetTypes: Array<'process' | 'network' | 'startup'>
+        matchType: 'contains' | 'regex' | 'exact'
+        pattern: string
+        caseSensitive: boolean
+        recommendation?: string | null
+        enabled: boolean
+      }>
+      findings: Array<{
+        id: string
+        severity: 'info' | 'low' | 'medium' | 'high'
+        category: string
+        title: string
+        detail: string
+        targetType: 'process' | 'network' | 'startup' | 'capability'
+        ruleId?: string
+        ruleName?: string
+        ruleSource?: 'builtin' | 'custom'
+        matchedText?: string
+        recommendation?: string | null
+        pid?: number
+        evidence: string
+        ignored?: boolean
+        ignoreReason?: string | null
+      }>
+      processes: Array<{
+        pid: number
+        ppid: number | null
+        user: string
+        stat: string
+        cpuPercent: number | null
+        memoryPercent: number | null
+        elapsed: string
+        command: string
+        args: string
+        raw: string
+        findings: string[]
+      }>
+      connections: Array<{
+        protocol: string
+        state: string
+        local: string
+        peer: string
+        process: string | null
+        pid: number | null
+        raw: string
+      }>
+      startupItems: Array<{
+        source: string
+        command: string
+        raw: string
+        findings: string[]
+      }>
+      stderr?: string[]
+    }> => http.post(`/hosts/${hostId}/ops/instances/${instanceId}/audit/scan`),
+    opsInstanceAuditKillProcess: (hostId: number, instanceId: number, data: {
+      pid: number
+      signal?: 'TERM' | 'KILL'
+      reason: string
+      confirmationText: string
+      scanId?: number
+      expectedCommand?: string
+    }): Promise<{
+      success: boolean
+      message: string
+      pid: number
+      signal: 'TERM' | 'KILL'
+      stdout?: string
+      stderr?: string
+    }> => http.post(`/hosts/${hostId}/ops/instances/${instanceId}/audit/kill-process`, data),
+    opsAuditRules: (hostId: number): Promise<{
+      builtin: Array<any>
+      custom: Array<any>
+      canCreateGlobal: boolean
+    }> => http.get(`/hosts/${hostId}/ops/audit/rules`),
+    opsAuditCreateRule: (hostId: number, data: Record<string, unknown>): Promise<any> =>
+      http.post(`/hosts/${hostId}/ops/audit/rules`, data),
+    opsAuditUpdateRule: (hostId: number, ruleId: number, data: Record<string, unknown>): Promise<any> =>
+      http.patch(`/hosts/${hostId}/ops/audit/rules/${ruleId}`, data),
+    opsAuditDeleteRule: (hostId: number, ruleId: number): Promise<{ success: boolean }> =>
+      http.delete(`/hosts/${hostId}/ops/audit/rules/${ruleId}`),
+    opsAuditUpdateBuiltinRule: (hostId: number, ruleId: string, data: Record<string, unknown>): Promise<any> =>
+      http.patch(`/hosts/${hostId}/ops/audit/builtin-rules/${encodeURIComponent(ruleId)}`, data),
+    opsAuditResetBuiltinRule: (hostId: number, ruleId: string): Promise<{ success: boolean }> =>
+      http.delete(`/hosts/${hostId}/ops/audit/builtin-rules/${encodeURIComponent(ruleId)}`),
+    opsAuditIgnores: (hostId: number, params?: { instanceId?: number }): Promise<{ ignores: Array<any> }> =>
+      http.get(`/hosts/${hostId}/ops/audit/ignores`, { params }),
+    opsAuditCreateIgnore: (hostId: number, data: Record<string, unknown>): Promise<any> =>
+      http.post(`/hosts/${hostId}/ops/audit/ignores`, data),
+    opsAuditDeleteIgnore: (hostId: number, ignoreId: number): Promise<{ success: boolean }> =>
+      http.delete(`/hosts/${hostId}/ops/audit/ignores/${ignoreId}`),
+    opsAuditHistory: (hostId: number, params?: { instanceId?: number; pageSize?: number }): Promise<{
+      scans: Array<any>
+      actions: Array<any>
+    }> => http.get(`/hosts/${hostId}/ops/audit/history`, { params })
+  },
+
+  // 套餐管理
+  packages: {
+    // 公开 API（无需登录）
+    listPublic: (options?: { source?: 'official' | 'market' }): Promise<{ packages: Package[]; total: number }> => {
+      const params = new URLSearchParams()
+      if (options?.source) params.append('source', options.source)
+      const queryString = params.toString()
+      return http.get(queryString ? `/packages/public?${queryString}` : '/packages/public')
+    },
+    getPublicRegions: (options?: { source?: 'official' | 'market' }): Promise<{
+      regions: Array<{
+        code: string
+        name: string
+        packageIds: number[]
+        hostCount: number
+      }>
+    }> => {
+      const params = new URLSearchParams()
+      if (options?.source) params.append('source', options.source)
+      const queryString = params.toString()
+      return http.get(queryString ? `/packages/public/regions?${queryString}` : '/packages/public/regions')
+    },
+    // 需要登录的 API
+    list: (options?: { all?: boolean; source?: 'official' | 'market' | 'friends' | 'zone'; zoneId?: number; scope?: 'mine' | 'official' | 'hosted' }): Promise<{ packages: Package[]; total: number }> => {
+      const params = new URLSearchParams()
+      if (options?.all) params.append('all', 'true')
+      if (options?.source) params.append('source', options.source)
+      if (options?.zoneId) params.append('zoneId', String(options.zoneId))
+      if (options?.scope) params.append('scope', options.scope)
+      const queryString = params.toString()
+      return http.get(queryString ? `/packages?${queryString}` : '/packages')
+    },
+    getHostingZones: (): Promise<{
+      zones: Array<{
+        id: number
+        name: string
+        ownerId: number
+        ownerUsername: string
+        logoUrl: string
+        sortOrder: number
+      }>
+    }> => http.get('/packages/hosting-zones'),
+    // 管理员专用：获取托管套餐列表
+    listHosted: (params: { userId?: number } = {}): Promise<{ packages: Package[] }> =>
+      http.get('/packages', { params: { ...params, scope: 'hosted' } }),
+    get: (id: number): Promise<Package> => http.get(`/packages/${id}`),
+    create: (data: CreatePackageRequest): Promise<Package> => http.post('/packages', data),
+    update: (id: number, data: UpdatePackageRequest): Promise<Package> =>
+      http.patch(`/packages/${id}`, data),
+    delete: (id: number): Promise<void> => http.delete(`/packages/${id}`),
+    // 套餐共享
+    share: (packageId: number, friendId: number, quotaMultiplier?: number | null, maxInstances?: number | null): Promise<{ message: string }> =>
+      http.post(`/packages/${packageId}/share`, { friendId, quotaMultiplier, maxInstances }),
+    unshare: (packageId: number, userId: number): Promise<{ message: string }> =>
+      http.delete(`/packages/${packageId}/share/${userId}`),
+    updateShareQuota: (packageId: number, shareId: number, quotaMultiplier?: number | null, maxInstances?: number | null): Promise<{ message: string }> =>
+      http.patch(`/packages/${packageId}/shares/${shareId}`, { quotaMultiplier, maxInstances }),
+    getShares: (packageId: number): Promise<{
+      shares: Array<{
+        id: number
+        packageId: number
+        packageName: string
+        ownerId: number
+        ownerUsername: string
+        sharedToId: number
+        sharedToUsername: string
+        sharedToAvatarStyle?: string | null
+        sharedToAvatarBadgeId?: string | null
+        quotaMultiplier: number | null
+        maxInstances: number | null
+        usage?: {
+          instanceCount: number
+          totalCpu: number
+          totalMemory: number
+        }
+        createdAt: string
+      }>
+      packageQuota: {
+        cpuMax: number
+        memoryMax: number
+      }
+    }> => http.get(`/packages/${packageId}/shares`),
+    getShared: (): Promise<{
+      shares: Array<{
+        id: number
+        packageId: number
+        packageName: string
+        ownerId: number
+        ownerUsername: string
+        sharedToId: number
+        sharedToUsername: string
+        sharedToAvatarStyle?: string | null
+        sharedToAvatarBadgeId?: string | null
+        quotaMultiplier: number | null
+        maxInstances: number | null
+        createdAt: string
+      }>
+    }> => http.get('/packages/my-shares'),
+
+    // 资源释放功能
+    getHostsDetail: (packageId: number): Promise<{
+      hosts: Array<{
+        id: number
+        name: string
+        countryCode: string
+        cpuAllowanceMax: number
+        memoryMax: number
+        cpuUsed: number
+        memoryUsed: number
+      }>
+      packageName: string
+      cpuMax: number
+      memoryMax: number
+    }> => http.get(`/packages/${packageId}/hosts-detail`),
+
+    releaseQuota: (packageId: number, data: {
+      hostIds: number[]
+      cpuAdd: number
+      memoryAdd: number
+      notify?: boolean
+    }): Promise<{
+      message: string
+      results: Array<{
+        hostId: number
+        hostName: string
+        countryCode: string
+        cpuAllowanceMax: number
+        memoryMax: number
+        cpuAvailable: number
+        memoryAvailable: number
+      }>
+    }> => http.post(`/packages/${packageId}/release-quota`, data),
+
+    // 获取托管套餐所有者信息
+    getOwnerInfo: (packageId: number): Promise<{
+      id: number
+      username: string
+      email: string
+      avatarStyle: string
+      avatarBadgeId?: string | null
+      hostCount: number
+      instanceCount: number
+      registeredDays: number
+      vipLevel: number
+      vipBadgeStyle?: VipBadgeStyle | null
+    }> => http.get(`/packages/${packageId}/owner-info`),
+
+    // 套餐方案管理
+    getPlans: (packageId: number, options?: { activeOnly?: boolean }): Promise<{
+      plans: Array<{
+        id: number
+        name: string
+        description: string | null
+        cpu: number
+        memory: number
+        disk: number
+        portLimit: number
+        snapshotLimit: number
+        backupLimit: number
+        siteLimit: number
+        swapSize: number
+        trafficLimit: string
+        trafficLimitSpeed: string
+        price: number
+        billingCycle: number
+        setupFee: number
+        monthlyPrice: number
+        isActive: boolean
+        isSoldOut: boolean
+        sortOrder: number
+        slaGuarantee: number | null
+      }>
+    }> => http.get(`/packages/${packageId}/plans`, { params: options }),
+
+    createPlan: (packageId: number, data: {
+      name: string
+      description?: string
+      cpu: number
+      memory: number
+      disk: number
+      portLimit: number
+      snapshotLimit: number
+      backupLimit: number
+      siteLimit: number
+      swapSize: number
+      trafficLimit: string
+      trafficLimitSpeed?: string
+      price: number
+      billingCycle?: number
+      setupFee?: number
+      isActive?: boolean
+      isSoldOut?: boolean
+      sortOrder?: number
+      slaGuarantee?: number | null
+    }): Promise<{ id: number; name: string; message: string }> =>
+      http.post(`/packages/${packageId}/plans`, data),
+
+    updatePlan: (packageId: number, planId: number, data: {
+      name?: string
+      description?: string
+      cpu?: number
+      memory?: number
+      disk?: number
+      portLimit?: number
+      snapshotLimit?: number
+      backupLimit?: number
+      siteLimit?: number
+      swapSize?: number
+      trafficLimit?: string
+      trafficLimitSpeed?: string
+      price?: number
+      billingCycle?: number
+      setupFee?: number
+      isActive?: boolean
+      isSoldOut?: boolean
+      sortOrder?: number
+      slaGuarantee?: number | null
+    }): Promise<{ id: number; name: string; message: string }> =>
+      http.put(`/packages/${packageId}/plans/${planId}`, data),
+
+    deletePlan: (packageId: number, planId: number): Promise<{ message: string }> =>
+      http.delete(`/packages/${packageId}/plans/${planId}`),
+
+    // 获取可用地区列表（拥有付费方案的套餐所在的国家/地区）
+    getRegions: (params?: { source?: 'official' | 'market' | 'friends' | 'zone'; zoneId?: number }): Promise<{
+      regions: Array<{
+        code: string
+        name: string
+        packageCount: number
+        packageIds: number[]  // 该地区包含的套餐 ID 列表
+      }>
+    }> => http.get('/packages/regions', { params }),
+  },
+
+  // OAuth 配置（管理员）
+  oauth: {
+    getConfigs: (): Promise<OAuthConfig[]> => http.get('/oauth/configs'),
+    updateConfig: (provider: 'github' | 'google', data: UpdateOAuthConfigRequest): Promise<OAuthConfig> =>
+      http.put(`/oauth/configs/${provider}`, data),
+    deleteConfig: (provider: 'github' | 'google'): Promise<void> =>
+      http.delete(`/oauth/configs/${provider}`),
+    getProviders: (): Promise<Array<{ provider: 'github' | 'google'; enabled: boolean }>> =>
+      http.get('/oauth/providers'),
+    getBindings: (): Promise<UserOAuthBinding[]> => http.get('/oauth/bindings'),
+    unbind: (provider: 'github' | 'google'): Promise<void> =>
+      http.delete(`/oauth/bindings/${provider}`),
+    createBindTicket: (): Promise<{ ticket: string; expiresIn: number }> =>
+      http.post('/oauth/bind-ticket', {}),
+    // 交换 OAuth 登录码获取 Token（安全改进）
+    exchangeCode: (code: string): Promise<{ token: string; user: { id: number; username: string; role: string } }> =>
+      http.post('/oauth/exchange-code', { code })
+  },
+
+  // 帮助文章（公开）
+  help: {
+    list: (params: Record<string, unknown> = {}): Promise<PaginatedResponse<HelpArticle>> =>
+      http.get('/help', { params }),
+    pinned: (limit?: number): Promise<{ articles: Array<Pick<HelpArticle, 'id' | 'title' | 'slug' | 'category'>> }> =>
+      http.get('/help/pinned', { params: limit ? { limit } : {} }),
+    categories: (): Promise<string[]> => http.get('/help/categories'),
+    categoryConfig: (): Promise<{ categories: Array<{ id: string; name: string; color: string }> }> =>
+      http.get('/help/category-config'),
+    getBySlug: (slug: string): Promise<HelpArticle> => http.get(`/help/article/${slug}`),
+    // 管理员接口
+    adminList: (params: Record<string, unknown> = {}): Promise<PaginatedResponse<HelpArticle>> =>
+      http.get('/help/admin', { params }),
+    adminGet: (id: number): Promise<HelpArticle> => http.get(`/help/admin/${id}`),
+    create: (data: CreateHelpArticleRequest): Promise<HelpArticle> => http.post('/help/admin', data),
+    update: (id: number, data: UpdateHelpArticleRequest): Promise<HelpArticle> =>
+      http.patch(`/help/admin/${id}`, data),
+    delete: (id: number): Promise<void> => http.delete(`/help/admin/${id}`),
+    saveCategoryConfig: (categories: Array<{ id: string; name: string; color: string }>): Promise<{ message: string }> =>
+      http.put('/help/admin/category-config', { categories })
+  },
+
+  // 镜像管理
+  images: {
+    // 获取系统预定义镜像列表（用户端）
+    // @param type - 可选，按实例类型过滤 (container/vm)
+    // @param memory - 可选，内存大小(MB)，128MB 时只返回 Alpine/Debian
+    getSystemImages: (type?: 'container' | 'vm', memory?: number, hostId?: number): Promise<{ success: boolean; images: SystemImage[] }> => {
+      const params: Record<string, string> = {}
+      if (type) params.type = type
+      if (memory !== undefined) params.memory = String(memory)
+      if (hostId !== undefined) params.hostId = String(hostId)
+      return http.get('/images/system', { params })
+    },
+    // 管理员：获取所有镜像列表
+    list: (): Promise<{ success: boolean; images: SystemImage[] }> =>
+      http.get('/images/admin'),
+    // 管理员：创建镜像
+    create: (data: CreateSystemImageRequest): Promise<{ success: boolean; image: SystemImage }> =>
+      http.post('/images/admin', data),
+    // 管理员：更新镜像
+    update: (id: number, data: UpdateSystemImageRequest): Promise<{ success: boolean; image: SystemImage }> =>
+      http.patch(`/images/admin/${id}`, data),
+    // 管理员：删除镜像
+    delete: (id: number): Promise<{ success: boolean }> =>
+      http.delete(`/images/admin/${id}`)
+  },
+
+  // 日志管理
+  logs: {
+    list: (params: Record<string, unknown> = {}): Promise<PaginatedResponse<Log>> =>
+      http.get('/logs', { params }),
+    getModules: (): Promise<string[]> => http.get('/logs/modules')
+  },
+
+  // 健康检查
+  health: (): Promise<{ status: string; timestamp: string }> => http.get('/health'),
+
+  // 系统配置（管理员）
+  systemConfig: {
+    // 公开配置（无需登录）
+    getPublic: (): Promise<{
+      registrationEnabled: boolean
+      requireInviteCode: boolean
+      turnstileEnabled?: boolean
+      turnstileSiteKey?: string | null
+      ticketEnabled?: boolean
+      freeSiteMode?: boolean
+      mailAvailable?: boolean
+      avatarApiBase?: string
+      emailVerificationEnabled?: boolean
+      emailDomainWhitelistEnabled?: boolean
+      allowedEmailDomains?: string[] | null
+      transferFee?: number
+      footerContactEmail?: string | null
+      footerTelegramLink?: string | null
+      hostingMarketEntryEnabled?: boolean
+      hostingNotice?: string | null
+      brandName?: string | null
+      brandSubtitle?: string | null
+      brandLogoUrl?: string | null
+      popupAnnouncement?: string | null
+      popupAnnouncementUpdatedAt?: string | null
+      popupPromoImageUrl?: string | null
+      popupPromoPackage?: {
+        id: number
+        name: string
+        description: string | null
+        source: 'official' | 'market'
+        plans: Array<{
+          id: number
+          name: string
+          description: string | null
+          cpu: number
+          memory: number
+          disk: number
+          trafficLimit: string
+          price: number
+          billingCycle: number
+          isSoldOut: boolean
+        }>
+      } | null
+      popupPromoUpdatedAt?: string | null
+    }> =>
+      http.get('/system-config/public'),
+    // 测试 SMTP 连接
+    testSmtp: (): Promise<{ success: boolean; message?: string; error?: string }> =>
+      http.post('/system-config/smtp/test'),
+    // 发送测试邮件
+    sendTestEmail: (to: string): Promise<{ success: boolean; message?: string; error?: string }> =>
+      http.post('/system-config/smtp/send-test', { to }),
+    list: (): Promise<{ configs: Array<{ id: number; key: string; value: string; type: string; label: string | null; description: string | null }> }> =>
+      http.get('/system-config'),
+    getDefaultQuota: (): Promise<{ quota: { hostLimit: number; friendLimit: number; packageLimit: number } }> =>
+      http.get('/system-config/default-quota'),
+    update: (configs: Array<{ key: string; value: string }>): Promise<{ message: string }> =>
+      http.put('/system-config', { configs })
+  },
+
+  // Storage Configs (远程存储配置)
+  storageConfigs: {
+    list: (): Promise<Array<{
+      id: number
+      name: string
+      type: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+      host: string
+      port: number | null
+      username: string | null
+      basePath: string | null
+      isDefault: boolean
+      createdAt: string
+      updatedAt: string
+    }>> => http.get('/storage-configs'),
+
+    create: (data: {
+      name: string
+      type: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+      host: string
+      port?: number
+      username?: string
+      password?: string
+      basePath?: string
+      isDefault?: boolean
+    }): Promise<{ id: number }> => http.post('/storage-configs', data),
+
+    update: (id: number, data: {
+      name?: string
+      type?: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+      host?: string
+      port?: number | null
+      username?: string | null
+      password?: string | null
+      basePath?: string | null
+      isDefault?: boolean
+    }): Promise<{ id: number }> => http.patch(`/storage-configs/${id}`, data),
+
+    delete: (id: number): Promise<void> => http.delete(`/storage-configs/${id}`),
+
+    test: (id: number): Promise<{ success: boolean; message?: string }> =>
+      http.post(`/storage-configs/${id}/test`),
+
+    setDefault: (id: number): Promise<{ success: boolean }> =>
+      http.post(`/storage-configs/${id}/set-default`)
+  },
+
+  // Traffic (流量统计)
+  traffic: {
+    // 获取当前用户流量
+    getMyTraffic: (): Promise<{
+      monthlyUsed: string
+      monthlyUsedFormatted: string
+      monthlyLimit: string | null
+      monthlyLimitFormatted: string | null
+      extraQuota: string
+      trafficStatus: 'NORMAL' | 'WARNING' | 'LIMITED'
+      percentage: number
+    }> => http.get('/me/traffic'),
+
+    // 获取指定用户流量（管理员）
+    getUserTraffic: (userId: number): Promise<{
+      monthlyUsed: string
+      monthlyUsedFormatted: string
+      monthlyLimit: string | null
+      monthlyLimitFormatted: string | null
+      extraQuota: string
+      trafficStatus: 'NORMAL' | 'WARNING' | 'LIMITED'
+      percentage: number
+    }> => http.get(`/users/${userId}/traffic`),
+
+    // 更新用户流量限额（管理员）
+    updateUserTrafficLimit: (userId: number, monthlyLimit: string | null): Promise<{ success: boolean }> =>
+      http.put(`/users/${userId}/traffic/limit`, { monthlyLimit }),
+
+    // 获取实例流量
+    getInstanceTraffic: (instanceId: number): Promise<{
+      monthlyUsed: string
+      monthlyUsedFormatted: string
+      monthlyLimit: string | null
+      monthlyLimitFormatted: string | null
+      trafficStatus: 'NORMAL' | 'WARNING' | 'LIMITED'
+      percentage: number
+      trafficResetDay: number
+      periodStart: string
+      periodEnd: string
+    }> => http.get(`/instances/${instanceId}/traffic`),
+
+    // 获取实例流量历史
+    getInstanceTrafficHistory: (instanceId: number, days?: number): Promise<{
+      trafficResetDay: number
+      periodStart: string
+      periodEnd: string
+      data: Array<{
+        date: string
+        rxTotal: string
+        txTotal: string
+        rxFormatted: string
+        txFormatted: string
+        total: string
+        totalFormatted: string
+      }>
+    }> => http.get(`/instances/${instanceId}/traffic/history`, { params: { days } }),
+
+    // 更新实例流量限额（管理员）
+    updateInstanceTrafficLimit: (instanceId: number, monthlyLimit: string | null): Promise<{ success: boolean }> =>
+      http.put(`/instances/${instanceId}/traffic/limit`, { monthlyLimit }),
+
+    // 重置实例月度流量（宿主机所有者）
+    resetInstanceTraffic: (instanceId: number): Promise<{ success: boolean; message: string }> =>
+      http.post(`/instances/${instanceId}/traffic/reset`),
+
+    // 手动触发流量采集（管理员）
+    triggerCollection: (): Promise<{ success: boolean; message: string }> =>
+      http.post('/traffic/collect'),
+
+    // 同步套餐流量限额到所有实例（管理员）
+    syncPackageLimits: (): Promise<{ success: boolean; message: string; updatedCount: number }> =>
+      http.post('/traffic/sync-package-limits'),
+
+    // 获取节点流量统计（管理员）
+    getHostTrafficHistory: (hostId: number): Promise<{
+      trafficResetDay: number
+      periodStart: string
+      periodEnd: string
+      data: Array<{
+        date: string
+        rxTotal: string
+        txTotal: string
+        rxFormatted: string
+        txFormatted: string
+        total: string
+        totalFormatted: string
+      }>
+      summary: {
+        totalUsed: string
+        totalUsedFormatted: string
+        totalLimit: string
+        totalLimitFormatted: string
+      }
+    }> => http.get(`/hosts/${hostId}/traffic/history`)
+  },
+
+  // Friends (好友系统)
+  friends: {
+    // 获取好友列表
+    list: (): Promise<{
+      friends: Array<{
+        id: number  // 好友的用户ID
+        friendshipId: number  // friendship 记录的ID
+        friendId: number  // 好友的用户ID（与 id 相同）
+        username: string
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        status: string
+        createdAt: string
+        acceptedAt: string | null
+        initiatedByMe: boolean
+        hostCount?: number
+        instanceCount?: number
+      }>
+    }> => http.get('/friends'),
+
+    // 发送好友请求
+    sendRequest: (username: string, remark?: string): Promise<{ message: string; request?: { id: number }; friendship?: any }> =>
+      http.post('/friends/request', { username, remark }),
+
+    // 获取待处理的好友请求
+    getPendingRequests: (): Promise<{
+      requests: Array<{
+        id: number
+        userId: number
+        username: string
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        remark: string | null
+        createdAt: string
+      }>
+    }> => http.get('/friends/requests'),
+
+    // 获取已发送的好友请求
+    getSentRequests: (): Promise<{
+      requests: Array<{
+        id: number
+        userId: number
+        username: string
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        remark: string | null
+        createdAt: string
+      }>
+    }> => http.get('/friends/requests/sent'),
+
+    // 获取历史记录（已处理的请求）
+    getHistory: (filter?: 'accepted' | 'rejected' | 'removed' | 'all'): Promise<{
+      history: Array<{
+        id: number
+        userId: number
+        username: string
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        remark: string | null
+        status: 'accepted' | 'rejected' | 'removed'
+        createdAt: string
+        acceptedAt: string | null
+        rejectedAt: string | null
+        initiatedByMe: boolean  // 是否是我发起的请求
+      }>
+    }> => http.get('/friends/history', { params: { filter } }),
+
+    // 接受好友请求
+    accept: (requestId: number): Promise<{ message: string; friendship: any }> =>
+      http.post(`/friends/${requestId}/accept`),
+
+    // 拒绝好友请求
+    reject: (requestId: number): Promise<{ message: string }> =>
+      http.post(`/friends/${requestId}/reject`),
+
+    // 取消已发送的好友请求
+    cancelRequest: (requestId: number): Promise<{ message: string }> =>
+      http.delete(`/friends/request/${requestId}`),
+
+    // 删除好友
+    remove: (friendshipId: number): Promise<{ message: string }> =>
+      http.delete(`/friends/${friendshipId}`),
+
+    // 搜索用户（用于添加好友）
+    searchUser: (username: string): Promise<{
+      user: {
+        id: number
+        username: string
+        avatarStyle: string
+        isFriend: boolean
+      }
+    }> => http.get('/friends/search', { params: { username } }),
+
+    // 获取好友的资源统计
+    getFriendResources: (friendshipId: number): Promise<{
+      resources: {
+        hosts: number
+        images: number
+        packages: number
+      }
+    }> => http.get(`/friends/${friendshipId}/resources`)
+  },
+
+  // Transfers (实例转移)
+  transfers: {
+    // 搜索用户（用于转移时选择接收方）
+    searchUser: (username: string): Promise<{
+      user: {
+        id: number
+        username: string
+        status: string
+      }
+    }> => http.get('/transfers/users/search', { params: { username } }),
+
+    // 发起转移请求
+    create: (instanceId: number, targetUsername: string, remark?: string): Promise<{
+      message: string
+      transfer: { id: number; status: string }
+    }> => http.post(`/transfers/instances/${instanceId}/transfer`, { targetUsername, remark }),
+
+    // 获取转移列表
+    list: (type: 'sent' | 'received', params: { status?: string; page?: number; pageSize?: number; search?: string } = {}): Promise<{
+      transfers: Array<{
+        id: number
+        instanceId: number
+        instanceName: string
+        instanceStatus: string
+        instanceImage: string
+        fromUser: { id: number; username: string; email?: string | null; avatarStyle?: string; avatarBadgeId?: string | null } | null
+        toUser: { id: number; username: string; email?: string | null; avatarStyle?: string; avatarBadgeId?: string | null } | null
+        status: string
+        snapshot: any
+        remark: string | null
+        rejectReason: string | null
+        createdAt: string
+        acceptedAt: string | null
+        rejectedAt: string | null
+        cancelledAt: string | null
+        canPush?: boolean
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/transfers', { params: { type, ...params } }),
+
+    // 获取待接收数量
+    getPendingCount: (): Promise<{ count: number }> => http.get('/transfers/pending-count'),
+
+    // 获取转移详情
+    get: (id: number): Promise<{
+      transfer: {
+        id: number
+        instanceId: number
+        instanceName: string
+        instanceStatus: string
+        fromUser: { id: number; username: string; email?: string | null; avatarStyle?: string; avatarBadgeId?: string | null }
+        toUser: { id: number; username: string; email?: string | null; avatarStyle?: string; avatarBadgeId?: string | null }
+        status: string
+        snapshot: any
+        remark: string | null
+        rejectReason: string | null
+        createdAt: string
+        acceptedAt: string | null
+        rejectedAt: string | null
+        cancelledAt: string | null
+      }
+    }> => http.get(`/transfers/${id}`),
+
+    // 接受转移
+    accept: (id: number): Promise<{ message: string }> => http.post(`/transfers/${id}/accept`),
+
+    // 拒绝转移
+    reject: (id: number, reason?: string): Promise<{ message: string }> =>
+      http.post(`/transfers/${id}/reject`, { reason }),
+
+    // 取消转移
+    cancel: (id: number): Promise<{ message: string }> => http.post(`/transfers/${id}/cancel`),
+
+    // 直接推送（宿主机所有者可直接将实例推送给接收方，无需对方接受）
+    push: (id: number): Promise<{ message: string }> => http.post(`/transfers/${id}/push`)
+  },
+
+  // 敏感操作二次验证
+  verification: {
+    // 请求验证码
+    request: (operationType: string, resourceId?: number): Promise<{
+      message: string
+      success?: boolean
+      required?: boolean
+      channel: 'email' | 'telegram' | 'discord' | 'webhook'
+      target?: string
+      maskedTarget?: string
+      expiresAt?: string
+      expiresIn?: number
+      operationName?: string
+    }> => http.post('/verification/request', { operationType, resourceId }),
+
+    // 验证码校验
+    verify: (operationType: string, code: string, resourceId?: number): Promise<{
+      message: string
+      verified: boolean
+    }> => http.post('/verification/verify', { operationType, code, resourceId }),
+
+    // 检查是否已验证
+    check: (operationType: string, resourceId?: number): Promise<{
+      verified: boolean
+      expiresAt?: string
+    }> => http.get('/verification/check', { params: { operationType, resourceId } }),
+
+    // 获取支持的操作类型
+    getOperationTypes: (): Promise<{
+      operationTypes: Array<{ type: string; name: string; requiresResource: boolean }>
+    }> => http.get('/verification/operation-types')
+  },
+
+  // 站内信
+  inbox: {
+    // 获取消息列表
+    list: (params?: { page?: number; pageSize?: number; isRead?: boolean }): Promise<{
+      messages: Array<{
+        id: number
+        userId: number
+        eventType: string
+        title: string
+        content: string
+        isRead: boolean
+        data: Record<string, unknown> | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/inbox', { params }),
+
+    // 获取未读数量
+    getUnreadCount: (): Promise<{ count: number }> => http.get('/inbox/unread-count'),
+
+    // 标记单条已读
+    markAsRead: (id: number): Promise<{ success: boolean }> => http.post(`/inbox/${id}/read`),
+
+    // 全部标记已读
+    markAllAsRead: (): Promise<{ success: boolean; count: number }> => http.post('/inbox/read-all'),
+
+    // 删除单条消息
+    delete: (id: number): Promise<{ success: boolean }> => http.delete(`/inbox/${id}`),
+
+    // 清空已读消息
+    deleteRead: (): Promise<{ success: boolean; count: number }> => http.delete('/inbox/read'),
+
+    // 管理员发送全站站内信
+    broadcast: (data: { title: string; content: string }): Promise<{ success: boolean; count: number }> =>
+      http.post('/inbox/admin/broadcast', data),
+
+    // 管理员发送站内信给特定用户
+    sendToUser: (userId: number, data: { title: string; content: string }): Promise<{ success: boolean }> =>
+      http.post(`/inbox/admin/send/${userId}`, data),
+
+    // 节点所有者通知实例用户
+    notifyHostUsers: (
+      hostId: number,
+      data: { title: string; content: string; instanceIds?: number[]; sendEmail?: boolean }
+    ): Promise<{
+      success: boolean
+      count: number
+      email?: {
+        requested: boolean
+        mode: 'none' | 'direct' | 'queued'
+        sentCount: number
+        queuedCount: number
+        skippedCount: number
+        failedCount: number
+      }
+    }> =>
+      http.post(`/inbox/hosts/${hostId}/notify`, data),
+
+    // 节点所有者发送站内信给特定实例用户
+    notifyInstanceUser: (instanceId: number, data: { title: string; content: string }): Promise<{ success: boolean }> =>
+      http.post(`/inbox/instances/${instanceId}/notify`, data)
+  },
+
+  // 公告/通知历史
+  announcements: {
+    // 获取公告历史列表（管理员）
+    list: (params?: { page?: number; pageSize?: number; type?: string }): Promise<{
+      items: Array<{
+        id: number
+        type: 'system_broadcast' | 'host_broadcast' | 'admin_message' | 'host_message'
+        title: string
+        content: string
+        recipientCount: number
+        hostId: number | null
+        targetUserId: number | null
+        instanceId: number | null
+        createdAt: string
+        sender: { id: number; username: string }
+        host: { id: number; name: string } | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/announcements', { params }),
+
+    // 获取宿主机所有者的公告历史
+    listMy: (params?: { page?: number; pageSize?: number; hostId?: number }): Promise<{
+      items: Array<{
+        id: number
+        type: 'host_broadcast' | 'host_message'
+        title: string
+        content: string
+        recipientCount: number
+        hostId: number | null
+        targetUserId: number | null
+        instanceId: number | null
+        createdAt: string
+        host: { id: number; name: string } | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/announcements/my', { params }),
+
+    // 获取公告详情
+    get: (id: number): Promise<{
+      id: number
+      type: 'system_broadcast' | 'host_broadcast' | 'admin_message' | 'host_message'
+      title: string
+      content: string
+      recipientCount: number
+      hostId: number | null
+      targetUserId: number | null
+      instanceId: number | null
+      createdAt: string
+      sender: { id: number; username: string }
+      host: { id: number; name: string } | null
+    }> => http.get(`/announcements/${id}`)
+  },
+
+  // 工单系统
+  tickets: {
+    // 创建工单
+    create: (data: CreateTicketRequest): Promise<{ message: string; ticket: { id: number; messageId: number } }> =>
+      (data.attachments && data.attachments.length > 0)
+        ? http.post('/tickets', buildTicketFormData(data), { headers: { 'Content-Type': 'multipart/form-data' }, timeout: TIMEOUT.MEDIUM })
+        : http.post('/tickets', {
+            instanceId: data.instanceId,
+            subject: data.subject,
+            category: data.category,
+            priority: data.priority,
+            content: data.content
+          }),
+
+    // 获取我的工单列表（支持 active 状态筛选和搜索）
+    list: (params?: { status?: TicketStatus | 'active'; search?: string; page?: number; pageSize?: number }): Promise<PaginatedTickets> =>
+      http.get('/tickets', { params }),
+
+    // 获取工单详情
+    get: (id: number): Promise<{ ticket: Ticket; isOwner: boolean; isCreator: boolean }> =>
+      http.get(`/tickets/${id}`),
+
+    // 获取工单消息列表
+    getMessages: (id: number, params?: { page?: number; pageSize?: number }): Promise<PaginatedTicketMessages> =>
+      http.get(`/tickets/${id}/messages`, { params }),
+
+    // 回复工单
+    reply: (id: number, content: string, attachments?: File[]): Promise<{ message: string; data: TicketMessage }> =>
+      (attachments && attachments.length > 0)
+        ? http.post(`/tickets/${id}/messages`, buildTicketFormData({ content, attachments }), { headers: { 'Content-Type': 'multipart/form-data' }, timeout: TIMEOUT.MEDIUM })
+        : http.post(`/tickets/${id}/messages`, { content }),
+
+    // 读取工单图片内容
+    getAttachmentContent: (attachmentId: number): Promise<Blob> =>
+      http.get(`/tickets/attachments/${attachmentId}/content`, { responseType: 'blob', timeout: TIMEOUT.MEDIUM }),
+
+    // 删除工单消息（仅管理员）
+    deleteMessage: (ticketId: number, messageId: number): Promise<{ message: string }> =>
+      http.delete(`/tickets/${ticketId}/messages/${messageId}`),
+
+    // 更新工单状态（宿主机所有者）
+    updateStatus: (id: number, status: TicketStatus): Promise<{ message: string; status: TicketStatus }> =>
+      http.patch(`/tickets/${id}/status`, { status }),
+
+    // 关闭工单
+    close: (id: number): Promise<{ message: string }> =>
+      http.post(`/tickets/${id}/close`),
+
+    // 获取宿主机收到的工单列表（支持 active 状态筛选和搜索）
+    getHostTickets: (hostId: number, params?: { status?: TicketStatus | 'active'; search?: string; page?: number; pageSize?: number }): Promise<PaginatedTickets> =>
+      http.get(`/tickets/hosts/${hostId}`, { params }),
+
+    // 获取所有宿主机的工单（汇总视图，支持 active 状态筛选和搜索）
+    getMyHostTickets: (params?: { status?: TicketStatus | 'active'; hostId?: number; sourceType?: 'all' | 'user' | 'official' | 'hosted'; search?: string; page?: number; pageSize?: number }): Promise<PaginatedTickets> =>
+      http.get('/tickets/my-hosts', { params }),
+
+    // 获取待处理工单数量
+    getPendingCount: (): Promise<{ userTickets: number; hostTickets: number; total: number; isHostOwner: boolean }> =>
+      http.get('/tickets/pending-count')
+  },
+
+  // 签到系统
+  checkin: {
+    // 获取签到状态
+    getStatus: (): Promise<{
+      hasCheckedIn: boolean
+      hasInstances: boolean
+      selfOnlyMode: boolean
+      consecutiveOthersUse: number
+    }> => http.get('/checkin/status'),
+
+    // 执行签到（资源直接存入资源池）
+    checkin: (): Promise<{
+      message: string
+      codeType: string
+      codeValue: number
+      toResourcePool: boolean
+      bonusPoints: number
+    }> => http.post('/checkin/checkin'),
+
+    // 兑换系统兑换码
+    // 仅支持系统码（h-前缀）：instanceId 必须，直接应用到实例
+    redeem: (redeemCode: string, instanceId: number): Promise<{
+      message: string
+      codeType: string
+      codeValue: number
+      actualAdded: number
+      instanceId?: number
+      instanceName?: string
+      isSystemCode: boolean
+      toResourcePool: boolean
+    }> => http.post('/checkin/redeem', { redeemCode, instanceId }),
+
+    // 获取可用实例列表
+    getInstances: (): Promise<{
+      instances: Array<{
+        id: number
+        name: string
+        status: string
+        cpu: number
+        memory: number
+        disk: number
+        monthlyTrafficLimit: string | null
+        package: {
+          id: number
+          name: string
+          cpuMax: number
+          memoryMax: number
+          diskMax: number
+          monthlyTrafficLimit: string | null
+        } | null
+        host: {
+          id: number
+          name: string
+          location: string | null
+          countryCode: string
+        }
+      }>
+    }> => http.get('/checkin/instances'),
+
+    // 获取签到记录
+    getRecords: (params?: { limit?: number; offset?: number }): Promise<{
+      records: Array<{
+        id: number
+        redeemCode: string
+        codeType: string
+        codeValue: number
+        expiresAt: string
+        usedAt: string | null
+        usedBy: { id: number; username: string } | null
+        usedFor: { id: number; name: string } | null
+        createdAt: string
+      }>
+      total: number
+    }> => http.get('/checkin/records', { params }),
+
+    // 获取兑换记录
+    getRedeems: (params?: { limit?: number; offset?: number }): Promise<{
+      records: Array<{
+        id: number
+        redeemCode: string
+        codeType: string
+        codeValue: number
+        owner: { id: number; username: string }
+        usedFor: { id: number; name: string } | null
+        usedAt: string | null
+        isSystemCode?: boolean
+      }>
+      total: number
+    }> => http.get('/checkin/redeems', { params })
+  },
+
+  // 资源池系统
+  resourcePool: {
+    // 获取用户资源池
+    get: (): Promise<{
+      cpu: number
+      memory: number
+      disk: number
+      traffic: number
+    }> => http.get('/resource-pool'),
+
+    // 应用资源到实例
+    apply: (data: {
+      instanceId: number
+      resourceType: 'c' | 'r' | 'd' | 't'
+      amount: number
+    }): Promise<{
+      message: string
+      resourceType: string
+      amount: number
+      instanceId: number
+      instanceName: string
+    }> => http.post('/resource-pool/apply', data),
+
+    // 获取资源池变动记录
+    getLogs: (params?: {
+      action?: string
+      resourceType?: string
+      limit?: number
+      offset?: number
+    }): Promise<{
+      records: Array<{
+        id: number
+        action: string
+        resourceType: string
+        amount: number
+        instance: { id: number; name: string } | null
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+    }> => http.get('/resource-pool/logs', { params }),
+
+    // 获取可应用资源的实例列表（包括免费和付费）
+    getInstances: (): Promise<{
+      instances: Array<{
+        id: number
+        name: string
+        status: string
+        cpu: number
+        memory: number
+        disk: number
+        monthlyTrafficLimit: string | null
+        isPaid: boolean
+        instanceType: 'vm' | 'container'
+        host: {
+          id: number
+          name: string
+          location: string | null
+          countryCode: string
+        }
+      }>
+    }> => http.get('/resource-pool/instances')
+  },
+
+  // 用户自定义初始化命令
+  initCommands: {
+    // 获取用户的所有初始化命令模板
+    list: (): Promise<{
+      commands: Array<{
+        id: number
+        name: string
+        commandPreview: string
+        commandLineCount: number
+        distros: string[]
+        description: string | null
+        enabled: boolean
+        createdAt: string
+        updatedAt: string
+      }>
+    }> => http.get('/init-commands'),
+
+    // 获取适配指定发行版的命令列表（创建/重装时使用）
+    getAvailable: (distro: string): Promise<{
+      commands: Array<{
+        id: number
+        name: string
+        commandLineCount: number
+        distros: string[]
+        description: string | null
+      }>
+    }> => http.get('/init-commands/available', { params: { distro } }),
+
+    // 获取单个命令详情
+    get: (id: number): Promise<{
+      command: {
+        id: number
+        name: string
+        command: string
+        distros: string[]
+        description: string | null
+        enabled: boolean
+        createdAt: string
+        updatedAt: string
+      }
+    }> => http.get(`/init-commands/${id}`),
+
+    // 创建初始化命令模板
+    create: (data: {
+      name: string
+      command: string
+      distros: string[]
+      description?: string
+    }): Promise<{ message: string; id: number }> => http.post('/init-commands', data),
+
+    // 更新初始化命令模板
+    update: (id: number, data: {
+      name?: string
+      command?: string
+      distros?: string[]
+      description?: string | null
+      enabled?: boolean
+    }): Promise<{ message: string }> => http.put(`/init-commands/${id}`, data),
+
+    // 删除初始化命令模板
+    delete: (id: number): Promise<{ message: string }> => http.delete(`/init-commands/${id}`),
+
+    // 获取可用的发行版列表（名称由前端翻译）
+    getDistros: (): Promise<{
+      distros: Array<{
+        id: string
+        icon: string
+      }>
+    }> => http.get('/init-commands/distros')
+  },
+
+  // 计费相关
+  billing: {
+    // 获取实例计费信息
+    getInstanceBilling: (instanceId: number): Promise<{
+      billing: {
+        instanceId: number
+        instanceName: string
+        planId: number | null
+        planName: string | null
+        price: number | null
+        billingCycle: number | null
+        expiresAt: string | null
+        autoRenew: boolean
+        renewPreview: Array<{ months: number; price: number; expiresAt: string }> | null
+      }
+    }> => http.get(`/instances/${instanceId}/billing`),
+
+    // 实例续费
+    renewInstance: (instanceId: number, months: number): Promise<{
+      message: string
+      amount: number
+      months: number
+      newExpiresAt: string
+    }> => http.post(`/instances/${instanceId}/renew`, { months }),
+
+    applyAffCodeToInstance: (instanceId: number, affCode: string): Promise<{
+      success: boolean
+      message: string
+      discountRate: number
+      discountPercent: number
+    }> => http.post(`/instances/${instanceId}/apply-aff`, { affCode }),
+
+    previewBatchRenew: (instanceIds: number[]): Promise<{
+      items: Array<{
+        id: number
+        name: string
+        canRenew: boolean
+        autoRenew: boolean
+        reason?: string
+        isHostedInstance: boolean
+        daysUntilExpire: number | null
+        options: Array<{
+          months: number
+          price: number
+          discountedPrice: number
+          expiresAt: string
+        }>
+      }>
+    }> => http.post('/instances/batch/renew-preview', { instanceIds }, { timeout: TIMEOUT.BATCH }),
+
+    renewInstancesBatch: (instanceIds: number[], months: number): Promise<{
+      message: string
+      successCount: number
+      skippedCount: number
+      failedCount: number
+      results: Array<{
+        id: number
+        name: string
+        success: boolean
+        skipped?: boolean
+        reason?: string
+        amount?: number
+        newExpiresAt?: string
+      }>
+    }> => http.post('/instances/batch/renew', { instanceIds, months }, { timeout: TIMEOUT.BATCH }),
+
+    // 升降级预览
+    getChangePlanPreview: (instanceId: number, newPlanId: number): Promise<{
+      preview: {
+        oldPlan: { id: number; name: string; price: number; billingCycle: number }
+        newPlan: { id: number; name: string; price: number; billingCycle: number; isActive: boolean; isSoldOut: boolean }
+        remainingDays: number
+        oldDailyPrice: number
+        newDailyPrice: number
+        remainingValue: number
+        newPlanCost: number
+        discountRate: number
+        discountAmount: number
+        priceDiff: number
+        isUpgrade: boolean
+        newExpiresAt: string
+        newConfig: { cpu: number; memory: number; disk: number }
+        resourceWarnings: string[] | null
+        canChange: boolean
+        cannotChangeReason?: string
+      }
+    }> => http.get(`/instances/${instanceId}/change-plan/preview`, { params: { newPlanId } }),
+
+    // 执行升降级
+    changePlan: (instanceId: number, newPlanId: number): Promise<{
+      message: string
+      priceDiff: number
+      newConfig: { cpu: number; memory: number; disk: number }
+      needRestart: boolean
+      restartMessage: string | null
+    }> => http.post(`/instances/${instanceId}/change-plan`, { newPlanId }),
+
+    // 获取销毁预览信息
+    getDestroyInfo: (instanceId: number): Promise<{
+      canDestroy: boolean
+      cannotDestroyReason: string
+      isFreeInstance: boolean
+      isFirstTime: boolean
+      rules: {
+        feeRate: number
+      }
+      refund: {
+        remainingDays: number
+        remainingValue: number
+        feeRate: number
+        feeAmount: number
+        refundAmount: number
+        destroyCount: number
+      }
+      instance: {
+        id: number
+        name: string
+        hostName: string
+        planName: string | null
+      }
+    }> => http.get(`/instances/${instanceId}/destroy-info`),
+
+    // 执行销毁
+    destroyInstance: (instanceId: number, options?: { feeWaiver?: string }): Promise<{
+      success: boolean
+      message: string
+      refundAmount: number
+      feeAmount: number
+      isFirstTime: boolean
+      isFreeInstance: boolean
+    }> => http.post(`/instances/${instanceId}/destroy${options?.feeWaiver ? `?feeWaiver=${options.feeWaiver}` : ''}`),
+
+    getBatchDestroyInfo: (instanceIds: number[]): Promise<{
+      items: Array<{
+        id: number
+        name: string
+        canDestroy: boolean
+        cannotDestroyReason: string
+        isFreeInstance: boolean
+        isFirstTime: boolean
+        feeWaiverEligible: boolean
+        refund: {
+          remainingDays: number
+          remainingValue: number
+          feeRate: number
+          feeAmount: number
+          refundAmount: number
+          destroyCount: number
+          maxRefundable: number
+        }
+        instance: {
+          id: number
+          name: string
+          hostName: string
+          planName: string | null
+        }
+      }>
+    }> => http.post('/instances/batch/destroy-info', { instanceIds }, { timeout: TIMEOUT.BATCH }),
+
+    destroyInstancesBatch: (instanceIds: number[]): Promise<{
+      message: string
+      successCount: number
+      skippedCount: number
+      failedCount: number
+      results: Array<{
+        id: number
+        name: string
+        success: boolean
+        skipped?: boolean
+        reason?: string
+        refundAmount?: number
+        feeAmount?: number
+        isFirstTime?: boolean
+        isFreeInstance?: boolean
+      }>
+    }> => http.post('/instances/batch/destroy', { instanceIds }, { timeout: TIMEOUT.BATCH }),
+
+    // 切换自动续费
+    setAutoRenew: (instanceId: number, autoRenew: boolean): Promise<{
+      message: string
+      autoRenew: boolean
+    }> => http.patch(`/instances/${instanceId}/auto-renew`, { autoRenew }),
+
+    setAutoRenewBatch: (instanceIds: number[], autoRenew: boolean): Promise<{
+      message: string
+      successCount: number
+      skippedCount: number
+      failedCount: number
+      results: Array<{
+        id: number
+        name: string
+        success: boolean
+        skipped?: boolean
+        reason?: string
+        autoRenew?: boolean
+      }>
+    }> => http.patch('/instances/batch/auto-renew', { instanceIds, autoRenew }, { timeout: TIMEOUT.BATCH }),
+
+    // 获取实例计费记录
+    getInstanceBillingRecords: (instanceId: number, params?: { page?: number; pageSize?: number; type?: string }): Promise<{
+      records: Array<{
+        id: number
+        type: string
+        amount: number
+        months: number | null
+        periodStart: string
+        periodEnd: string
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get(`/instances/${instanceId}/billing/records`, { params }),
+
+    // 获取用户余额
+    getUserBalance: (): Promise<{
+      balance: { balance: number; frozen: number; totalRecharge: number; totalConsume: number; destroyedValue: number }
+    }> => http.get('/balance/me'),
+
+    // 获取余额记录
+    getBalanceLogs: (params?: { page?: number; pageSize?: number; type?: string; lotteryGift?: 'exclude' | 'only' }): Promise<{
+      records: Array<{
+        id: number
+        type: string
+        amount: number
+        balanceBefore: number
+        balanceAfter: number
+        instanceId: number | null
+        instanceName: string | null
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/balance/me/logs', { params }),
+
+    // 获取可用支付渠道
+    getPaymentProviders: (): Promise<{
+      providers: Array<{
+        id: number
+        name: string
+        type: string
+        methods: string[]
+        methodFees?: Record<string, { feeRate: number; feeFixed?: number }>
+        minAmount: number
+        maxAmount: number | null
+        feeRate: number
+        feeFixed: number
+      }>
+    }> => http.get('/recharge/providers'),
+
+    // 创建充值订单
+    createRechargeOrder: (providerId: number, amount: number, paymentMethod?: string): Promise<{
+      order: {
+        orderNo: string
+        amount: number
+        payableAmount: number
+        actualAmount: number
+        fee: number
+        status: string
+        expiredAt: string
+        createdAt: string
+      }
+      provider: {
+        id: number
+        name: string
+        type: string
+        methods: string[]
+      }
+      payUrl: string | null
+    }> => http.post('/recharge/orders', { providerId, amount, paymentMethod }),
+
+    // 获取充值记录列表
+    getRechargeOrders: (params?: { page?: number; pageSize?: number; status?: string }): Promise<{
+      records: Array<{
+        id: number
+        orderNo: string
+        amount: number
+        payableAmount: number
+        actualAmount: number | null
+        fee: number
+        status: string
+        provider: { id: number; name: string; type: string } | null
+        paymentMethod: string | null
+        actualPaymentMethod: string | null
+        paymentCurrency: string | null
+        paymentNetwork: string | null
+        paymentUuid: string | null
+        paymentTxid: string | null
+        invoiceCurrency: string | null
+        gatewayStatus: string | null
+        gatewayStatusDescription: string | null
+        tradeNo: string | null
+        createdAt: string
+        expiredAt: string | null
+        completedAt: string | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/recharge/orders', { params }),
+
+    // 获取充值订单详情
+    getRechargeOrder: (orderNo: string): Promise<{
+      order: {
+        id: number
+        orderNo: string
+        amount: number
+        payableAmount: number
+        actualAmount: number | null
+        fee: number
+        status: string
+        provider: { id: number; name: string; type: string } | null
+        paymentMethod: string | null
+        actualPaymentMethod: string | null
+        paymentCurrency: string | null
+        paymentNetwork: string | null
+        paymentUuid: string | null
+        paymentTxid: string | null
+        invoiceCurrency: string | null
+        gatewayStatus: string | null
+        gatewayStatusDescription: string | null
+        tradeNo: string | null
+        failReason: string | null
+        createdAt: string
+        expiredAt: string | null
+        completedAt: string | null
+      }
+    }> => http.get(`/recharge/orders/${orderNo}`),
+
+    // 取消充值订单
+    cancelRechargeOrder: (orderNo: string): Promise<{
+      success: boolean
+      message: string
+    }> => http.post(`/recharge/orders/${orderNo}/cancel`),
+
+    // 重新支付订单
+    repayRechargeOrder: (orderNo: string, paymentMethod?: string): Promise<{
+      order: {
+        orderNo: string
+        amount: number
+        payableAmount: number
+        actualAmount: number | null
+        status: string
+        expiredAt: string | null
+      }
+      payUrl: string
+    }> => http.post(`/recharge/orders/${orderNo}/repay`, { paymentMethod }),
+
+    // 获取用户充值统计
+    getRechargeStats: (): Promise<{
+      stats: {
+        totalAmount: number
+        completedCount: number
+        pendingCount: number
+      }
+    }> => http.get('/recharge/stats'),
+
+    // 验证订单支付状态（主动查询易支付）
+    verifyRechargeOrder: (orderNo: string): Promise<{
+      success: boolean
+      verified: boolean
+      status: string
+      message: string
+      order?: {
+        id?: number
+        orderNo: string
+        amount: number
+        payableAmount?: number
+        actualAmount?: number | null
+        fee?: number
+        status: string
+        provider?: { id: number; name: string; type: string } | null
+        paymentMethod?: string | null
+        actualPaymentMethod?: string | null
+        paymentCurrency?: string | null
+        paymentNetwork?: string | null
+        paymentUuid?: string | null
+        paymentTxid?: string | null
+        invoiceCurrency?: string | null
+        gatewayStatus?: string | null
+        gatewayStatusDescription?: string | null
+        tradeNo?: string | null
+        failReason?: string | null
+        createdAt?: string
+        expiredAt?: string | null
+        completedAt?: string | null
+      }
+    }> => http.post(`/recharge/orders/${orderNo}/verify`),
+
+    // 获取套餐方案列表
+    getPackagePlans: (packageId: number): Promise<{
+      plans: Array<{
+        id: number
+        name: string
+        description: string | null
+        price: number
+        billingCycle: number
+        cpu: number
+        memory: number
+        disk: number
+        portLimit: number
+        snapshotLimit: number
+        backupLimit: number
+        siteLimit: number
+        swapSize: number
+        monthlyTrafficLimit: string | null
+        isActive: boolean
+        isSoldOut: boolean
+        slaGuarantee: number | null
+      }>
+    }> => http.get(`/packages/${packageId}/plans`)
+  },
+
+  // 管理员 API
+  admin: {
+    // ==================== 支付渠道管理 ====================
+
+    // 获取支付渠道列表
+    getPaymentProviders: (): Promise<{
+      providers: Array<{
+        id: number
+        name: string
+        type: string
+        status: string
+        config: Record<string, unknown>
+        methods: string[]
+        methodFees?: Record<string, { feeRate: number; feeFixed?: number }>
+        minAmount: number
+        maxAmount: number | null
+        feeRate: number
+        feeFixed: number
+        sortOrder: number
+        createdAt: string
+        updatedAt: string
+      }>
+    }> => http.get('/admin/payment-providers'),
+
+    // 创建支付渠道
+    createPaymentProvider: (data: {
+      name: string
+      type: string
+      config?: Record<string, unknown>
+      methods?: string[]
+      minAmount?: number
+      maxAmount?: number | null
+      feeRate?: number
+      feeFixed?: number
+      sortOrder?: number
+    }): Promise<{
+      provider: { id: number; name: string; type: string; status: string }
+      message: string
+    }> => http.post('/admin/payment-providers', data),
+
+    // 更新支付渠道
+    updatePaymentProvider: (id: number, data: {
+      name?: string
+      config?: Record<string, unknown>
+      methods?: string[]
+      minAmount?: number
+      maxAmount?: number | null
+      feeRate?: number
+      feeFixed?: number
+      sortOrder?: number
+    }): Promise<{
+      provider: { id: number; name: string; type: string; status: string }
+      message: string
+    }> => http.put(`/admin/payment-providers/${id}`, data),
+
+    // 更新支付渠道状态
+    updatePaymentProviderStatus: (id: number, status: string): Promise<{
+      message: string
+    }> => http.patch(`/admin/payment-providers/${id}/status`, { status }),
+
+    // 删除支付渠道
+    deletePaymentProvider: (id: number): Promise<{
+      message: string
+    }> => http.delete(`/admin/payment-providers/${id}`),
+
+    // ==================== 统计 ====================
+
+    getStatisticsOverview: (): Promise<{
+      meta: {
+        timezone: string
+        dailyDays: number
+        monthlyMonths: number
+      }
+      users: {
+        total: number
+        dailyNewUsers: Array<{ label: string; value: number }>
+        monthlyNewUsers: Array<{ label: string; value: number }>
+      }
+      instances: {
+        total: number
+        active: number
+        paid: number
+        free: number
+        dailyCreatedInstances: Array<{ label: string; value: number }>
+        monthlyCreatedInstances: Array<{ label: string; value: number }>
+      }
+      billing: {
+        totals: {
+          recharge: number
+          consume: number
+          aff: number
+          destroyFee: number
+        }
+        dailyRecharge: Array<{ label: string; value: number }>
+        monthlyRecharge: Array<{ label: string; value: number }>
+        dailyConsume: Array<{ label: string; value: number }>
+        monthlyConsume: Array<{ label: string; value: number }>
+        dailyAff: Array<{ label: string; value: number }>
+        monthlyAff: Array<{ label: string; value: number }>
+        dailyDestroyFee: Array<{ label: string; value: number }>
+        monthlyDestroyFee: Array<{ label: string; value: number }>
+      }
+    }> => http.get('/admin/statistics/overview'),
+
+    // ==================== VIP 等级规则 ====================
+
+    getVipLevelRules: (type: VipRuleType): Promise<VipLevelRulesResponse> =>
+      http.get(`/admin/vip-levels/${type}`),
+
+    updateVipLevelRules: (type: VipRuleType, rules: VipLevelRule[], options?: { userMetric?: UserVipMetric }): Promise<VipLevelRulesResponse> =>
+      http.put(`/admin/vip-levels/${type}`, { rules, ...options }),
+
+    getVipBenefitRewards: (): Promise<{ rewards: VipBenefitReward[] }> =>
+      http.get('/admin/vip-benefits/rewards'),
+
+    createVipBenefitReward: (data: VipBenefitRewardInput): Promise<{ reward: VipBenefitReward }> =>
+      http.post('/admin/vip-benefits/rewards', data),
+
+    updateVipBenefitReward: (id: number, data: VipBenefitRewardInput): Promise<{ reward: VipBenefitReward }> =>
+      http.put(`/admin/vip-benefits/rewards/${id}`, data),
+
+    deleteVipBenefitReward: (id: number): Promise<{ success: boolean }> =>
+      http.delete(`/admin/vip-benefits/rewards/${id}`),
+
+    // ==================== 托管管理 ====================
+
+    getHostingOwners: (params?: {
+      page?: number
+      pageSize?: number
+      search?: string
+      sortBy?: 'vipLevel' | 'hostingBalance' | 'frozenBalance' | 'totalIncome' | 'hostCount' | 'packageCount' | 'instanceCount'
+      sortOrder?: 'asc' | 'desc'
+    }): Promise<{
+      owners: Array<{
+        id: number
+        username: string
+        email: string | null
+        status: string
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        vipLevel: number
+        vipBadgeStyle?: VipBadgeStyle | null
+        hostingBalance: {
+          available: number
+          frozen: number
+          total: number
+          historicalTotal: number
+        }
+        hostCount: number
+        listedPackageCount: number
+        instanceCount: number
+        createdAt: string
+        hostingZoneId: number | null
+      }>
+      summary: {
+        totalHosts: number
+        totalListedPackages: number
+        totalInstances: number
+        totalAvailableBalance: number
+        totalFrozenBalance: number
+        totalHostingIncome: number
+      }
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get('/admin/hosting/owners', { params }),
+    getHostingZones: (): Promise<{
+      zones: Array<{
+        id: number
+        name: string
+        logoUrl: string
+        active: boolean
+        sortOrder: number
+        createdAt: string
+        updatedAt: string
+        listedPackageCount: number
+        hostCount: number
+        owner: {
+          id: number
+          username: string
+          email: string | null
+          avatarStyle: string
+          avatarBadgeId?: string | null
+        }
+      }>
+    }> => http.get('/admin/hosting/zones'),
+    createHostingZone: (data: { name: string; ownerId: number; logoUrl: string }): Promise<{
+      zone: {
+        id: number
+        name: string
+        logoUrl: string
+        active: boolean
+        sortOrder: number
+        createdAt: string
+        updatedAt: string
+        listedPackageCount: number
+        hostCount: number
+        owner: {
+          id: number
+          username: string
+          email: string | null
+          avatarStyle: string
+          avatarBadgeId?: string | null
+        }
+      }
+      message: string
+    }> => http.post('/admin/hosting/zones', data),
+    deleteHostingZone: (id: number): Promise<{ message: string }> =>
+      http.delete(`/admin/hosting/zones/${id}`),
+
+    // ==================== 计费管理 ====================
+
+    // 获取计费概览
+    getBillingOverview: (): Promise<{
+      overview: {
+        totalRevenue: number
+        thisMonthRevenue: number
+        lastMonthRevenue: number
+        todayRevenue: number
+        totalRefunds: number
+        netRevenue: number
+        paidInstancesCount: number
+        activePaidInstancesCount: number
+        suspendedCount: number
+        expiringCount: number
+        revenueMix: {
+          direct: {
+            totalAmount: number
+            thisMonthAmount: number
+            todayAmount: number
+          }
+          hosted: {
+            totalAmount: number
+            thisMonthAmount: number
+            todayAmount: number
+          }
+        }
+        recharge: {
+          totalAmount: number
+          totalCount: number
+          thisMonthAmount: number
+          thisMonthCount: number
+          todayAmount: number
+          todayCount: number
+        }
+        aff: {
+          totalCommission: number
+          totalOrders: number
+          thisMonthCommission: number
+          totalConverted: number
+          pendingConvertCount: number
+        }
+      }
+    }> => http.get('/admin/billing/overview'),
+
+    // 获取扣费记录
+    getBillingRecords: (params?: { page?: number; pageSize?: number; type?: string; userId?: number; instanceId?: number }): Promise<{
+      records: Array<{
+        id: number
+        type: string
+        amount: number
+        months: number | null
+        periodStart: string | null
+        periodEnd: string | null
+        remark: string | null
+        createdAt: string
+        instance: { id: number; name: string } | null
+        user: { id: number; username: string } | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/admin/billing/records', { params }),
+
+    // 获取付费实例列表
+    getBillingInstances: (params?: { page?: number; pageSize?: number; status?: string; expiring?: boolean; hostId?: number | ''; search?: string }): Promise<{
+      instances: Array<{
+        id: number
+        incusId: string
+        name: string
+        status: string
+        user: { id: number; username: string }
+        host: { id: number; name: string; instanceType?: string } | null
+        package: { id: number; name: string } | null
+        packagePlan: { id: number; name: string } | null
+        packagePlanId: number | null
+        billingPrice: number | null
+        billingCycle: number | null
+        expiresAt: string | null
+        createdAt: string
+        remainingDays: number | null
+        instanceTypeLabel: string
+        autoRenew: boolean
+        suspendedAt: string | null
+        suspendReason: string | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+      hosts: Array<{ id: number; name: string }>  // 有付费实例的节点列表
+    }> => http.get('/admin/billing/instances', { params }),
+
+    // 管理员封停实例
+    suspendInstance: (instanceId: number, reason?: string): Promise<{
+      success: boolean
+      message: string
+    }> => http.post(`/admin/instances/${instanceId}/suspend`, { reason }),
+
+    // 管理员解封实例
+    unsuspendInstance: (instanceId: number): Promise<{
+      success: boolean
+      message: string
+    }> => http.post(`/admin/instances/${instanceId}/unsuspend`),
+
+    // 管理员延期实例
+    extendInstance: (instanceId: number, days: number, reason?: string, freeExtend?: boolean): Promise<{
+      success: boolean
+      message: string
+      amount: number
+      newExpiresAt: string
+    }> => http.post(`/admin/instances/${instanceId}/extend`, { days, reason, freeExtend }),
+
+    // 管理员退款
+    refundInstance: (instanceId: number, amount: number, reason: string): Promise<{
+      success: boolean
+      message: string
+      amount: number
+      maxRefundable: number
+    }> => http.post(`/admin/instances/${instanceId}/refund`, { amount, reason }),
+
+    // 管理员删除并退款
+    deleteAndRefundInstance: (instanceId: number, refundType: 'remaining' | 'full', reason: string, databaseOnly: boolean = false): Promise<{
+      success: boolean
+      message: string
+      refundAmount: number
+      refundType: string
+    }> => http.post(`/admin/instances/${instanceId}/delete-and-refund`, { refundType, reason, databaseOnly }),
+
+    // 为实例应用AFF优惠码
+    applyAffCode: (instanceId: number, affCode: string): Promise<{
+      success: boolean
+      message: string
+      discountRate: number
+    }> => http.post(`/admin/instances/${instanceId}/apply-aff`, { affCode }),
+
+    // 修改实例专属价格
+    updateInstancePrice: (instanceId: number, newPrice: number, settleBalance: boolean, expectedVersion?: number): Promise<{
+      success: boolean
+      message: string
+      oldPrice: number
+      newPrice: number
+      priceDiff: number
+      remainingDays: number
+      billingCycle: number
+    }> => http.post(`/admin/instances/${instanceId}/update-price`, { newPrice, settleBalance, expectedVersion }),
+
+    previewInstancePriceUpdate: (instanceId: number, newPrice: number, settleBalance: boolean): Promise<{
+      oldPrice: number
+      newPrice: number
+      billingCycle: number
+      remainingDays: number
+      priceDiff: number
+      discountRate: number
+      userBalance: number
+      instanceVersion: number
+    }> => http.post(`/admin/instances/${instanceId}/update-price/preview`, { newPrice, settleBalance }),
+
+    previewBatchInstancePriceUpdate: (instanceIds: number[], newPrice: number, settleBalance: boolean): Promise<{
+      summary: {
+        selectedCount: number
+        validCount: number
+        changedCount: number
+        unchangedCount: number
+        failedCount: number
+        totalCharge: number
+        totalRefund: number
+        netAmount: number
+      }
+      canSubmit: boolean
+      items: Array<{
+        id: number
+        name: string | null
+        user: { id: number; username: string; balance: number } | null
+        oldPrice: number | null
+        newPrice: number
+        billingCycle: number | null
+        remainingDays: number
+        priceDiff: number
+        discountRate: number
+        status: 'ready' | 'unchanged' | 'failed'
+        error?: string
+        instanceVersion?: number
+      }>
+      userImpacts: Array<{
+        userId: number
+        username: string
+        balanceBefore: number
+        balanceAfter: number
+        totalCharge: number
+        totalRefund: number
+        netDiff: number
+        insufficientBalance: boolean
+      }>
+    }> => http.post('/admin/instances/batch-update-price/preview', { instanceIds, newPrice, settleBalance }, { timeout: TIMEOUT.MEDIUM }),
+
+    updateBatchInstancePrice: (instanceIds: number[], newPrice: number, settleBalance: boolean, expectations?: Array<{ instanceId: number; version: number }>): Promise<{
+      success: boolean
+      message: string
+      preview: {
+        summary: {
+          selectedCount: number
+          validCount: number
+          changedCount: number
+          unchangedCount: number
+          failedCount: number
+          totalCharge: number
+          totalRefund: number
+          netAmount: number
+        }
+        canSubmit: boolean
+        items: Array<{
+          id: number
+          name: string | null
+          user: { id: number; username: string; balance: number } | null
+          oldPrice: number | null
+          newPrice: number
+          billingCycle: number | null
+          remainingDays: number
+          priceDiff: number
+          discountRate: number
+          status: 'ready' | 'unchanged' | 'failed'
+          error?: string
+          instanceVersion?: number
+        }>
+        userImpacts: Array<{
+          userId: number
+          username: string
+          balanceBefore: number
+          balanceAfter: number
+          totalCharge: number
+          totalRefund: number
+          netDiff: number
+          insufficientBalance: boolean
+        }>
+      }
+    }> => http.post('/admin/instances/batch-update-price', { instanceIds, newPrice, settleBalance, expectations }, { timeout: TIMEOUT.MEDIUM }),
+
+    // 获取可升级的方案列表
+    getAvailablePlans: (instanceId: number): Promise<{
+      currentPlan: {
+        id: number
+        name: string
+        price: number
+        billingCycle: number
+        monthlyPrice: number
+        cpu: number
+        memory: number
+        disk: number
+      }
+      remainingDays: number
+      availablePlans: Array<{
+        id: number
+        name: string
+        description: string | null
+        price: number
+        billingCycle: number
+        monthlyPrice: number
+        priceDiff: number
+        cpu: number
+        memory: number
+        disk: number
+        portLimit: number
+        snapshotLimit: number
+        backupLimit: number
+        siteLimit: number
+        swapSize: number
+        trafficLimit: string
+        isSoldOut: boolean
+        slaGuarantee: number | null
+      }>
+      userBalance: number
+    }> => http.get(`/admin/instances/${instanceId}/available-plans`),
+
+    // 升级实例方案
+    upgradePlan: (instanceId: number, newPlanId: number): Promise<{
+      success: boolean
+      message: string
+      priceDifference: number
+      oldPlan: { id: number; name: string }
+      newPlan: { id: number; name: string }
+      resourcesSynced: boolean
+    }> => http.post(`/admin/instances/${instanceId}/upgrade-plan`, { newPlanId }),
+
+    // ==================== 充值记录管理 ====================
+
+    // 获取充值记录列表
+    getRechargeRecords: (params?: { page?: number; pageSize?: number; status?: string; userId?: number }): Promise<{
+      records: Array<{
+        id: number
+        orderNo: string
+        userId: number
+        user: { id: number; username: string }
+        amount: number
+        payableAmount: number
+        actualAmount: number | null
+        fee: number
+        status: string
+        payMethod: string | null
+        actualPaymentMethod: string | null
+        paymentCurrency: string | null
+        paymentNetwork: string | null
+        paymentUuid: string | null
+        paymentTxid: string | null
+        invoiceCurrency: string | null
+        gatewayStatus: string | null
+        gatewayStatusDescription: string | null
+        provider: { id: number; name: string; displayName: string; type: string } | null
+        tradeNo: string | null
+        createdAt: string
+        paidAt: string | null
+        completedAt: string | null
+        expiresAt: string | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/admin/billing/recharge-records', { params }),
+
+    // 同步充值订单状态
+    syncRechargeRecord: (id: number): Promise<{
+      success: boolean
+      synced: boolean
+      status: string
+      message: string
+    }> => http.post(`/admin/billing/recharge-records/${id}/sync`),
+
+    // 获取充值订单列表
+    getRechargeOrders: (params?: { page?: number; pageSize?: number; status?: string; userId?: number }): Promise<{
+      records: Array<{
+        id: number
+        orderNo: string
+        userId: number
+        amount: number
+        actualAmount: number | null
+        fee: number
+        status: string
+        provider: { id: number; name: string; type: string } | null
+        createdAt: string
+        completedAt: string | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/admin/recharge/orders', { params }),
+
+    // 获取充值统计
+    getRechargeStats: (): Promise<{
+      stats: {
+        todayAmount: number
+        todayCount: number
+        thisMonthAmount: number
+        thisMonthCount: number
+        totalAmount: number
+        totalCount: number
+      }
+    }> => http.get('/admin/recharge/stats'),
+
+    // 手动完成充值订单
+    completeRechargeOrder: (orderNo: string, tradeNo?: string): Promise<{
+      success: boolean
+      message: string
+    }> => http.post(`/admin/recharge/orders/${orderNo}/complete`, { tradeNo }),
+
+    // 手动失败充值订单
+    failRechargeOrder: (orderNo: string, reason: string): Promise<{
+      success: boolean
+      message: string
+    }> => http.post(`/admin/recharge/orders/${orderNo}/fail`, { reason }),
+
+    // ==================== 用户余额管理 ====================
+
+    // 获取用户余额
+    getUserBalance: (userId: number): Promise<{
+      userId: number
+      username: string
+      balance: number
+      totalRecharge: number
+      totalConsume: number
+      totalRefund: number
+    }> => http.get(`/balance/admin/${userId}`),
+
+    // 获取用户余额日志
+    getUserBalanceLogs: (userId: number, params?: { page?: number; pageSize?: number; type?: string; lotteryGift?: 'exclude' | 'only' }): Promise<{
+      logs: Array<{
+        id: number
+        type: string
+        amount: number
+        balanceBefore: number
+        balanceAfter: number
+        orderId: string | null
+        instanceId: number | null
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get(`/balance/admin/${userId}/logs`, { params }),
+
+    // 调整用户余额
+    adjustUserBalance: (userId: number, amount: number, remark: string): Promise<{
+      message: string
+      newBalance: number
+      balanceLog: {
+        id: number
+        type: string
+        amount: number
+        balanceBefore: number
+        balanceAfter: number
+      } | null
+    }> => http.post(`/balance/admin/${userId}/adjust`, { amount, remark }),
+
+    // 赠送用户余额
+    giftUserBalance: (userId: number, amount: number, remark?: string): Promise<{
+      message: string
+      newBalance: number
+    }> => http.post(`/balance/admin/${userId}/gift`, { amount, remark }),
+
+    // 获取用户托管余额明细
+    getHostingBalanceLogs: (userId: number, params?: { page?: number; pageSize?: number }): Promise<{
+      user: { id: number; username: string }
+      available: number
+      frozen: number
+      logs: Array<{
+        id: number
+        type: string
+        actionType: string | null
+        amount: number
+        frozen: boolean
+        unfreezeAt: string | null
+        description: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+      totalPages: number
+    }> => http.get(`/users/${userId}/hosting-balance/logs`, { params }),
+
+    // 调整用户托管余额
+    adjustHostingBalance: (userId: number, type: 'available' | 'frozen', amount: number, reason: string): Promise<{
+      success: boolean
+      available: number
+      frozen: number
+    }> => http.post(`/users/${userId}/hosting-balance/adjust`, { type, amount, reason }),
+
+    // ==================== 用户管理 ====================
+
+    // 获取用户列表（搜索）
+    getUsers: (params?: {
+      search?: string
+      searchFields?: string
+      exact?: boolean
+      page?: number
+      pageSize?: number
+    }): Promise<{
+      users: Array<{
+        id: number
+        username: string
+        email: string
+        role: string
+        status: string
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/users', { params }),
+
+    // 按用户名精确查找用户
+    lookupUser: (username: string): Promise<{
+      user: {
+        id: number
+        username: string
+        email: string | null
+        role: string
+        status: string
+      }
+    }> => http.get('/users/lookup', { params: { username } }),
+
+    // ==================== 实例管理 ====================
+
+    // 管理员创建实例（支持免费赠送或付费实例）
+    createInstance: (data: {
+      username: string
+      name: string
+      packageId: number
+      image: string
+      cpu?: number              // 免费实例自定义配置
+      memory?: number           // 免费实例自定义配置
+      disk?: number             // 免费实例自定义配置
+      hostId?: number
+      customInitCommandIds?: number[]
+      planId?: number           // 付费方案ID（传入则创建付费实例）
+      chargeFirstMonth?: boolean // 是否扣除首月费用（默认 true）
+    }): Promise<{
+      message: string
+      instance: {
+        id: number
+        name: string
+        incusId: string
+        host: string
+        status: string
+        user: { id: number; username: string }
+        sshPort: number
+        rootPassword: string
+        isPaid: boolean
+        planName: string | null
+        charged: boolean
+        amount: number
+        expiresAt: string | null
+      }
+    }> => http.post('/admin/instances/create', data)
+  },
+
+  // ==================== AFF 推荐计划 ====================
+  aff: {
+    // 获取 AFF 状态和统计
+    getStatus: (): Promise<{
+      activated: boolean
+      totalEarnings: number
+      totalConverted: number
+      currentBalance: number
+      totalCodes: number
+      totalUsed: number
+    }> => http.get('/aff/me'),
+
+    // 获取我的优惠码列表（包括全局码）
+    getCodes: (): Promise<{
+      codes: Array<{
+        id: number
+        code: string
+        packagePlanId: number | null
+        planName: string | null
+        packageName: string | null
+        price: number | null
+        isGlobal: boolean
+        discountRate: number
+        commissionRate: number
+        usedCount: number
+        totalEarnings: number
+        createdAt: string
+      }>
+    }> => http.get('/aff/me/codes'),
+
+    // 获取可创建优惠码的方案列表（包含全局码状态）
+    getAvailablePlans: (): Promise<{
+      plans: Array<{
+        id: number
+        name: string
+        price: number
+        packageName: string
+        hasCode: boolean
+      }>
+      hasGlobalCode: boolean
+    }> => http.get('/aff/me/available-plans'),
+
+    // 创建优惠码（不传 packagePlanId 则创建全局码，固定 5% 折扣/5% 返利）
+    createCode: (packagePlanId?: number): Promise<{
+      message: string
+      code: {
+        id: number
+        code: string
+        packagePlanId: number | null
+        isGlobal: boolean
+        discountRate: number
+        commissionRate: number
+        createdAt: string
+      }
+    }> => {
+      const body: { packagePlanId?: number } = {}
+      if (packagePlanId !== undefined) body.packagePlanId = packagePlanId
+      return http.post('/aff/me/codes', body)
+    },
+
+    // 删除优惠码（仅允许删除使用次数为 0 的优惠码）
+    deleteCode: (codeId: number): Promise<{ message: string }> =>
+      http.delete(`/aff/me/codes/${codeId}`),
+
+    // 获取 AFF 收益日志
+    getLogs: (params?: { page?: number; pageSize?: number; type?: string }): Promise<{
+      logs: Array<{
+        id: number
+        type: string
+        amount: number
+        originalAmount: number | null
+        balanceBefore: number
+        balanceAfter: number
+        affCodeId: number | null
+        affCode: string | null
+        instanceId: number | null
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/aff/me/logs', { params }),
+
+    // 获取 AFF 收益榜单 TOP 10
+    getLeaderboard: (): Promise<{
+      leaderboard: Array<{
+        rank: number
+        username: string
+        totalEarnings: number
+        isCurrentUser: boolean
+      }>
+    }> => http.get('/aff/leaderboard'),
+
+    // 验证优惠码
+    validateCode: (code: string, packagePlanId: number): Promise<{
+      valid: boolean
+      discountRate?: number
+    }> => http.post('/aff/validate', { code, packagePlanId }),
+
+    // 创建转化申请
+    createConvert: (amount: number): Promise<{
+      message: string
+      withdrawal: {
+        id: number
+        amount: number
+        status: string
+        createdAt: string
+      }
+    }> => http.post('/aff/me/convert', { amount }),
+
+    // 获取我的转化申请
+    getWithdrawals: (params?: { page?: number; pageSize?: number; status?: string }): Promise<{
+      withdrawals: Array<{
+        id: number
+        amount: number
+        status: string
+        rejectReason: string | null
+        reviewedAt: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/aff/me/withdrawals', { params }),
+
+    // 管理员：获取所有转化申请
+    adminGetWithdrawals: (params?: { page?: number; pageSize?: number; status?: string }): Promise<{
+      withdrawals: Array<{
+        id: number
+        userId: number
+        username: string
+        userAffBalance: number
+        amount: number
+        status: string
+        rejectReason: string | null
+        reviewedBy: number | null
+        reviewedAt: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/aff/admin/withdrawals', { params }),
+
+    // 管理员：审核通过
+    adminApprove: (withdrawalId: number): Promise<{ message: string }> =>
+      http.post(`/aff/admin/withdrawals/${withdrawalId}/approve`),
+
+    // 管理员：审核拒绝
+    adminReject: (withdrawalId: number, reason: string): Promise<{ message: string }> =>
+      http.post(`/aff/admin/withdrawals/${withdrawalId}/reject`, { reason })
+  },
+
+  // ==================== 娱乐系统 ====================
+  entertainment: {
+    // ==================== 积分相关 ====================
+
+    // 获取用户积分信息
+    getPoints: (): Promise<{
+      points: number
+      totalEarned: number
+      totalSpent: number
+      lastConvertedAt: string | null
+      totalConsume: number
+      convertedConsume: number
+      convertibleAmount: number
+      convertiblePoints: number
+    }> => http.get('/entertainment/points'),
+
+    // 兑换积分
+    convertPoints: (): Promise<{
+      success: boolean
+      converted: number
+      newPoints: number
+      consumeConverted: number
+    }> => http.post('/entertainment/points/convert'),
+
+    // 获取积分变动日志
+    getPointsLogs: (params?: { page?: number; pageSize?: number; type?: string }): Promise<{
+      logs: Array<{
+        id: number
+        type: string
+        amount: number
+        pointsBefore: number
+        pointsAfter: number
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/entertainment/points/logs', { params }),
+
+    // ==================== 徽章相关 ====================
+
+    getBadgeCatalog: (): Promise<{
+      series: BadgeSeriesItem[]
+      badges: BadgeCatalogItem[]
+    }> => http.get('/entertainment/badges/catalog'),
+
+    getBadgeOverview: (): Promise<BadgeOverview> => http.get('/entertainment/badges/overview'),
+
+    drawBadgeRandom: (): Promise<{
+      success: boolean
+      currentPoints: number
+      ownership: BadgeOwnership
+    }> => http.post('/entertainment/badges/draw/random'),
+
+    drawBadgeRandomMulti: (): Promise<BadgeMultiDrawResponse> => http.post('/entertainment/badges/draw/random-multi'),
+
+    drawBadgeSelect: (badgeId: string): Promise<{
+      success: boolean
+      currentPoints: number
+      ownership: BadgeOwnership
+    }> => http.post('/entertainment/badges/draw/select', { badgeId }),
+
+    applyBadgeToAvatar: (ownershipId: number): Promise<{
+      success: boolean
+      ownership: BadgeOwnership
+    }> => http.post('/entertainment/badges/apply/avatar', { ownershipId }),
+
+    applyBadgeToInstance: (ownershipId: number, instanceId: number): Promise<{
+      success: boolean
+      ownership: BadgeOwnership
+    }> => http.post('/entertainment/badges/apply/instance', { ownershipId, instanceId }),
+
+    unapplyBadge: (ownershipId: number): Promise<{
+      success: boolean
+      ownership: BadgeOwnership
+    }> => http.post('/entertainment/badges/unapply', { ownershipId }),
+
+    // ==================== 抽奖相关 ====================
+
+    // 获取可用抽奖列表
+    getLotteries: (): Promise<{
+      lotteries: Array<{
+        id: number
+        name: string
+        description: string | null
+        costPoints: number
+        startAt: string | null
+        endAt: string | null
+        totalDraws: number
+        prizes: Array<{
+          id: number
+          name: string
+          type: string
+          probability: number
+          remainQuantity: number | null
+          totalQuantity: number | null
+          displayOrder: number
+          instanceDesc: string | null
+        }>
+      }>
+    }> => http.get('/entertainment/lotteries'),
+
+    // 获取抽奖详情
+    getLottery: (id: number): Promise<{
+      lottery: {
+        id: number
+        name: string
+        description: string | null
+        costPoints: number
+        startAt: string | null
+        endAt: string | null
+        totalDraws: number
+        prizes: Array<{
+          id: number
+          name: string
+          type: string
+          probability: number
+          remainQuantity: number | null
+          totalQuantity: number | null
+          displayOrder: number
+          instanceDesc: string | null
+        }>
+      }
+    }> => http.get(`/entertainment/lotteries/${id}`),
+
+    // 执行抽奖
+    draw: (lotteryId: number): Promise<{
+      success: boolean
+      currentPoints: number
+      record: {
+        id: number
+        prizeId: number
+        prizeType: string
+        prizeName: string
+        prizeValue: number
+        badgeOwnership: BadgeOwnership | null
+        status: string
+        pointsSpent: number
+        createdAt: string
+      }
+      action: string | null
+      message: string
+    }> => http.post(`/entertainment/lotteries/${lotteryId}/draw`),
+
+    // 十连抽
+    drawMulti: (lotteryId: number): Promise<{
+      success: boolean
+      records: Array<{
+        id: number
+        prizeId: number
+        prizeType: string
+        prizeName: string
+        prizeValue: number
+        badgeOwnership: BadgeOwnership | null
+        status: string
+        pointsSpent: number
+        createdAt: string
+      }>
+      totalDraws: number
+      totalPointsSpent?: number
+      stoppedAt?: number
+      stopReason?: string
+    }> => http.post(`/entertainment/lotteries/${lotteryId}/draw-multi`),
+
+    // 获取用户中奖记录
+    getLotteryRecords: (params?: { page?: number; pageSize?: number; prizeType?: string }): Promise<{
+      records: Array<{
+        id: number
+        lotteryId: number
+        lotteryName: string
+        prizeType: string
+        prizeName: string
+        prizeValue: number
+        instanceDesc: string | null
+        status: string
+        pointsSpent: number
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/entertainment/lottery-records', { params }),
+
+    // ==================== 管理端 API ====================
+
+    // 获取所有抽奖列表
+    adminGetLotteries: (params?: { page?: number; pageSize?: number; isActive?: boolean }): Promise<{
+      lotteries: Array<{
+        id: number
+        name: string
+        description: string | null
+        costPoints: number
+        isActive: boolean
+        startAt: string | null
+        endAt: string | null
+        totalDraws: number
+        prizesCount: number
+        recordsCount: number
+        createdAt: string
+        prizes: Array<{
+          id: number
+          name: string
+          type: string
+          value: number
+          probability: number
+          totalQuantity: number | null
+          remainQuantity: number | null
+          displayOrder: number
+          instanceDesc: string | null
+        }>
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/admin/entertainment/lotteries', { params }),
+
+    // 创建抽奖
+    adminCreateLottery: (data: {
+      name: string
+      description?: string
+      costPoints: number
+      isActive?: boolean
+      startAt?: string
+      endAt?: string
+    }): Promise<{ success: boolean; lottery: { id: number; name: string } }> =>
+      http.post('/admin/entertainment/lotteries', data),
+
+    // 更新抽奖
+    adminUpdateLottery: (id: number, data: {
+      name?: string
+      description?: string
+      costPoints?: number
+      isActive?: boolean
+      startAt?: string | null
+      endAt?: string | null
+    }): Promise<{ success: boolean }> =>
+      http.put(`/admin/entertainment/lotteries/${id}`, data),
+
+    // 删除抽奖
+    adminDeleteLottery: (id: number): Promise<{ success: boolean }> =>
+      http.delete(`/admin/entertainment/lotteries/${id}`),
+
+    // 获取抽奖详情
+    adminGetLottery: (id: number): Promise<{
+      lottery: {
+        id: number
+        name: string
+        description: string | null
+        costPoints: number
+        isActive: boolean
+        startAt: string | null
+        endAt: string | null
+        totalDraws: number
+        createdAt: string
+        prizes: Array<{
+          id: number
+          name: string
+          type: string
+          value: number
+          probability: number
+          totalQuantity: number | null
+          remainQuantity: number | null
+          displayOrder: number
+          instanceDesc: string | null
+        }>
+        notificationConfig: {
+          enabled: boolean
+          type: string
+          config: Record<string, unknown>
+          notifyBalance: boolean
+          notifyInstance: boolean
+        } | null
+        stats: {
+          totalDraws: number
+          prizeStats: Array<{ type: string; count: number }>
+        }
+      }
+    }> => http.get(`/admin/entertainment/lotteries/${id}`),
+
+    // 添加奖品
+    adminCreatePrize: (lotteryId: number, data: {
+      name: string
+      type: string
+      value?: number
+      probability: number
+      totalQuantity?: number
+      displayOrder?: number
+      instanceDesc?: string
+    }): Promise<{ success: boolean; prize: { id: number; name: string } }> =>
+      http.post(`/admin/entertainment/lotteries/${lotteryId}/prizes`, data),
+
+    // 更新奖品
+    adminUpdatePrize: (prizeId: number, data: {
+      name?: string
+      type?: string
+      value?: number
+      probability?: number
+      totalQuantity?: number | null
+      remainQuantity?: number | null
+      displayOrder?: number
+      instanceDesc?: string | null
+    }): Promise<{ success: boolean }> =>
+      http.put(`/admin/entertainment/prizes/${prizeId}`, data),
+
+    // 删除奖品
+    adminDeletePrize: (prizeId: number): Promise<{ success: boolean }> =>
+      http.delete(`/admin/entertainment/prizes/${prizeId}`),
+
+    // 更新抽奖通知配置
+    adminUpdateNotification: (lotteryId: number, data: {
+      enabled: boolean
+      type: string
+      config: Record<string, unknown>
+      notifyBalance: boolean
+      notifyInstance: boolean
+    }): Promise<{ success: boolean }> =>
+      http.put(`/admin/entertainment/lotteries/${lotteryId}/notification`, data),
+
+    adminGetBadgeCatalog: (): Promise<{
+      series: BadgeSeriesItem[]
+      badges: BadgeCatalogItem[]
+    }> => http.get('/admin/entertainment/badges/catalog'),
+
+    adminCreateBadgeSeries: (data: {
+      id: string
+      title: string
+      nameZh: string
+      nameEn?: string | null
+      description: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }): Promise<{ success: boolean; series: BadgeSeriesItem }> =>
+      http.post('/admin/entertainment/badges/series', data),
+
+    adminUpdateBadgeSeries: (id: string, data: {
+      title?: string
+      nameZh?: string
+      nameEn?: string | null
+      description?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }): Promise<{ success: boolean }> =>
+      http.put(`/admin/entertainment/badges/series/${id}`, data),
+
+    adminDeleteBadgeSeries: (id: string): Promise<{ success: boolean }> =>
+      http.delete(`/admin/entertainment/badges/series/${id}`),
+
+    adminCreateBadge: (data: {
+      id: string
+      name: string
+      nameEn?: string | null
+      fullLabel: string
+      seriesId: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      assetUrl: string
+      assetUrlDark?: string | null
+      assetUrlLight?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }): Promise<{ success: boolean; badge: BadgeCatalogItem }> =>
+      http.post('/admin/entertainment/badges', data),
+
+    adminUpdateBadge: (id: string, data: {
+      name?: string
+      nameEn?: string | null
+      fullLabel?: string
+      seriesId?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      assetUrl?: string
+      assetUrlDark?: string | null
+      assetUrlLight?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }): Promise<{ success: boolean }> =>
+      http.put(`/admin/entertainment/badges/${id}`, data),
+
+    adminDeleteBadge: (id: string): Promise<{ success: boolean }> =>
+      http.delete(`/admin/entertainment/badges/${id}`),
+
+    // 获取所有中奖记录
+    adminGetLotteryRecords: (params?: {
+      page?: number
+      pageSize?: number
+      lotteryId?: number
+      prizeType?: string
+      status?: string
+      search?: string
+    }): Promise<{
+      records: Array<{
+        id: number
+        lotteryId: number
+        lotteryName: string
+        userId: number
+        username: string
+        userAvatar: string
+        prizeType: string
+        prizeName: string
+        prizeValue: number
+        status: string
+        pointsSpent: number
+        deliveredAt: string | null
+        deliveredBy: number | null
+        ticketId: number | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/admin/entertainment/lottery-records', { params }),
+
+    // 标记实例奖励为已发放
+    adminDeliverPrize: (recordId: number, ticketId?: number): Promise<{ success: boolean }> =>
+      http.post(`/admin/entertainment/lottery-records/${recordId}/deliver`, { ticketId }),
+
+    // 获取所有用户积分列表
+    adminGetUserPoints: (params?: {
+      page?: number
+      pageSize?: number
+      search?: string
+      orderBy?: string
+      order?: string
+    }): Promise<{
+      records: Array<{
+        userId: number
+        username: string
+        userAvatar: string
+        points: number
+        totalEarned: number
+        totalSpent: number
+        convertedConsume: number
+        lastConvertedAt: string | null
+        updatedAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/admin/entertainment/user-points', { params }),
+
+    // 调整用户积分
+    adminAdjustPoints: (userId: number, amount: number, remark: string): Promise<{
+      success: boolean
+      newPoints: number
+    }> => http.post(`/admin/entertainment/user-points/${userId}/adjust`, { amount, remark }),
+
+    // 获取用户积分详情
+    adminGetUserPointsDetail: (userId: number): Promise<{
+      user: { id: number; username: string; avatarStyle: string; avatarBadgeId?: string | null }
+      points: number
+      totalEarned: number
+      totalSpent: number
+      convertedConsume: number
+      lastConvertedAt: string | null
+      totalConsume: number
+      convertibleAmount: number
+      convertiblePoints: number
+    }> => http.get(`/admin/entertainment/user-points/${userId}`),
+
+    // 获取用户积分日志
+    adminGetUserPointsLogs: (userId: number, params?: { page?: number; pageSize?: number }): Promise<{
+      logs: Array<{
+        id: number
+        type: string
+        amount: number
+        pointsBefore: number
+        pointsAfter: number
+        remark: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get(`/admin/entertainment/user-points/${userId}/logs`, { params })
+  },
+
+  // ==================== 托管余额 API ====================
+  hosting: {
+    // 检查托管准入条件
+    checkAccess: (): Promise<{
+      allowed: boolean
+      reason?: string
+      details?: {
+        instanceCount: number
+        hasCreatedHostBefore?: boolean
+        featureEnabled?: boolean
+        hiddenBySystemSetting?: boolean
+      }
+    }> => http.get('/hosting/access-check'),
+
+    // 获取托管余额
+    getBalance: (): Promise<{
+      balance: {
+        available: number
+        frozen: number
+        pendingWithdrawal: number
+        totalIncome: number
+        totalWithdrawn: number
+      }
+      config: {
+        minWithdrawalAmount: number
+        feeRateBalance: number
+      }
+    }> => http.get('/hosting/balance'),
+
+    // 获取托管统计
+    getStats: (): Promise<{
+      stats: {
+        myHostsCount: number
+        instancesOnMyHosts: number
+        uniqueCustomersCount: number
+        monthIncome: number
+        vipLevel: number
+        vipBadgeStyle?: VipBadgeStyle | null
+      }
+      recentIncome: Array<{
+        id: number
+        amount: number
+        instanceId: number | null
+        remark: string | null
+        createdAt: string
+      }>
+    }> => http.get('/hosting/stats'),
+
+    // 获取托管余额日志
+    getLogs: (params?: { page?: number; pageSize?: number; actionType?: string; frozen?: string; search?: string }): Promise<{
+      logs: Array<{
+        id: number
+        type: string
+        actionType: string | null
+        amount: number
+        frozen: boolean
+        unfreezeAt: string | null
+        relatedId: number | null
+        remark: string | null
+        createdAt: string
+        instance: {
+          id: number
+          name: string
+          buyer: {
+            id: number
+            username: string
+            email: string | null
+            avatarStyle: string
+            avatarBadgeId?: string | null
+          }
+          host: {
+            id: number
+            name: string
+          }
+          package: {
+            id: number
+            name: string
+          } | null
+          plan: {
+            id: number
+            name: string
+          } | null
+        } | null
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/hosting/logs', { params }),
+
+    // 申请提现
+    withdraw: (data: { amount: number }): Promise<{
+      message: string
+      withdrawal: {
+        id: number
+        amount: number
+        feeRate: number
+        feeAmount: number
+        actualAmount: number
+        target: string
+        status: string
+        createdAt: string
+      }
+    }> => http.post('/hosting/withdraw', data),
+
+    // 获取提现记录
+    getWithdrawals: (params?: { page?: number; pageSize?: number; status?: string }): Promise<{
+      records: Array<{
+        id: number
+        amount: number
+        feeRate: number
+        feeAmount: number
+        actualAmount: number
+        target: string
+        status: string
+        rejectReason: string | null
+        processedAt: string | null
+        createdAt: string
+      }>
+      total: number
+      page: number
+      pageSize: number
+    }> => http.get('/hosting/withdrawals', { params }),
+
+    getBlocks: (): Promise<{
+      blocks: Array<{
+        id: number
+        blockedUserId: number
+        username: string
+        email: string | null
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        remark: string | null
+        createdAt: string
+      }>
+    }> => http.get('/hosting/blocks'),
+
+    searchBlockUsers: (keyword: string): Promise<{
+      users: Array<{
+        id: number
+        username: string
+        email: string | null
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        blocked: boolean
+      }>
+    }> => http.get('/hosting/blocks/search', { params: { keyword } }),
+
+    blockUser: (data: { userId: number; remark?: string | null }): Promise<{
+      block: {
+        id: number
+        blockedUserId: number
+        username: string
+        email: string | null
+        avatarStyle: string
+        avatarBadgeId?: string | null
+        remark: string | null
+        createdAt: string
+      }
+    }> => http.post('/hosting/blocks', data),
+
+    unblockUser: (userId: number): Promise<{ success: boolean }> =>
+      http.delete(`/hosting/blocks/${userId}`)
+  },
+
+  // ==================== VIP 等级 API ====================
+  vipLevels: {
+    getMyOverview: (): Promise<VipOverviewResponse> => http.get('/vip-levels/me')
+  },
+
+  // ==================== VIP 福利 API ====================
+  vipBenefits: {
+    getMyOverview: (): Promise<VipBenefitOverviewResponse> => http.get('/vip-benefits/me'),
+    claim: (rewardId: number): Promise<{
+      claim: VipBenefitClaim
+      overview: VipBenefitOverviewResponse
+    }> => http.post(`/vip-benefits/${rewardId}/claim`),
+    claimAll: (): Promise<{
+      claims: VipBenefitClaim[]
+      overview: VipBenefitOverviewResponse
+    }> => http.post('/vip-benefits/claim-all')
+  },
+
+  // 域名邮箱
+  mail: {
+    // 获取可购买的邮箱源和方案
+    getSources: (): Promise<{
+      sources: Array<{
+        id: number
+        name: string
+        code: string
+        plans: Array<{
+          id: number
+          name: string
+          description: string | null
+          domainLimit: number
+          diskLimitGb: number
+          billingCycle: 'monthly' | 'yearly'
+          price: number
+        }>
+      }>
+    }> => http.get('/mail/sources'),
+
+    // 获取我的订阅
+    getSubscription: (): Promise<{
+      subscription: {
+        id: number
+        status: 'active' | 'expired' | 'suspended'
+        expiresAt: string
+        autoRenew: boolean
+        source: { id: number; name: string; code: string }
+        plan: {
+          id: number
+          name: string
+          domainLimit: number
+          diskLimitGb: number
+          billingCycle: 'monthly' | 'yearly'
+          price: number
+        }
+        usage: {
+          domainCount: number
+          accountCount: number
+          diskUsedGb: number
+        }
+        domains: Array<{
+          id: number
+          domain: string
+          status: 'pending' | 'verified' | 'suspended'
+          accountCount: number
+          diskUsedMb: number
+          createdAt: string
+        }>
+      } | null
+    }> => http.get('/mail/subscription'),
+
+    // 购买订阅
+    purchaseSubscription: (planId: number, affCode?: string): Promise<{
+      subscription: {
+        id: number
+        status: string
+        expiresAt: string
+        source: { id: number; name: string }
+        plan: { id: number; name: string }
+      }
+      discountApplied?: boolean
+      discountAmount?: number
+      finalPrice?: number
+    }> => http.post('/mail/subscription', { planId, affCode }),
+
+    // 验证优惠码
+    validateAffCode: (code: string): Promise<{
+      valid: boolean
+      discountRate?: number
+      commissionRate?: number
+      error?: string
+    }> => http.post('/mail/validate-aff', { code }),
+
+    // 续费订阅
+    renewSubscription: (months: number): Promise<{
+      expiresAt: string
+      discountApplied?: boolean
+      discountAmount?: number
+      finalPrice?: number
+    }> =>
+      http.post('/mail/subscription/renew', { months }),
+
+    // 获取域名列表
+    getDomains: (): Promise<{
+      domains: Array<{
+        id: number
+        domain: string
+        status: 'pending' | 'verified' | 'suspended'
+        accountCount: number
+        diskUsedMb: number
+        verifiedAt: string | null
+        createdAt: string
+      }>
+    }> => http.get('/mail/domains'),
+
+    // 获取域名详情
+    getDomain: (id: number): Promise<{
+      domain: {
+        id: number
+        domain: string
+        status: 'pending' | 'verified' | 'suspended'
+        diskUsedMb: number
+        verifiedAt: string | null
+        createdAt: string
+        accounts: Array<{
+          id: number
+          email: string
+          username: string
+          displayName: string | null
+          diskLimitMb: number
+          diskUsedMb: number
+          isAdmin: boolean
+          createdAt: string
+        }>
+      }
+    }> => http.get(`/mail/domains/${id}`),
+
+    // 添加域名
+    addDomain: (domain: string): Promise<{
+      domain: {
+        id: number
+        domain: string
+        status: string
+        createdAt: string
+      }
+    }> => http.post('/mail/domains', { domain }),
+
+    // 刷新域名验证状态
+    verifyDomain: (id: number): Promise<{
+      status: string
+      verified: boolean
+      txtRecord?: string
+    }> => http.post(`/mail/domains/${id}/verify`),
+
+    // 获取域名 DNS 配置
+    getDomainDns: (id: number): Promise<{
+      verified: boolean
+      txtRecord?: string
+      dnsRecords?: Array<{ type: string; record: string; value: string; prio?: number }>
+      mxRecords?: string[]
+      spfRecord?: string
+      dkimRecord?: string
+      cnameRecords?: Array<{ record: string; value: string }>
+    }> => http.get(`/mail/domains/${id}/dns`),
+
+    // 删除域名
+    deleteDomain: (id: number): Promise<{ success: boolean }> =>
+      http.delete(`/mail/domains/${id}`),
+
+    // 获取邮箱账户列表
+    getAccounts: (domainId: number): Promise<{
+      accounts: Array<{
+        id: number
+        email: string
+        username: string
+        displayName: string | null
+        diskLimitMb: number
+        diskUsedMb: number
+        isAdmin: boolean
+        createdAt: string
+      }>
+    }> => http.get(`/mail/domains/${domainId}/accounts`),
+
+    // 创建邮箱账户
+    createAccount: (domainId: number, data: {
+      username: string
+      password: string
+      displayName?: string
+      diskLimitMb?: number
+      isAdmin?: boolean
+    }): Promise<{
+      account: {
+        id: number
+        email: string
+        username: string
+        displayName: string | null
+        diskLimitMb: number
+        isAdmin: boolean
+      }
+    }> => http.post(`/mail/domains/${domainId}/accounts`, data),
+
+    // 更新邮箱账户
+    updateAccount: (domainId: number, accountId: number, data: {
+      displayName?: string
+      diskLimitMb?: number
+    }): Promise<{
+      account: {
+        id: number
+        email: string
+        displayName: string | null
+        diskLimitMb: number
+      }
+    }> => http.put(`/mail/domains/${domainId}/accounts/${accountId}`, data),
+
+    // 重置邮箱账户密码
+    resetAccountPassword: (domainId: number, accountId: number, password: string): Promise<{ success: boolean }> =>
+      http.post(`/mail/domains/${domainId}/accounts/${accountId}/reset-password`, { password }),
+
+    // 删除邮箱账户
+    deleteAccount: (domainId: number, accountId: number): Promise<{ success: boolean }> =>
+      http.delete(`/mail/domains/${domainId}/accounts/${accountId}`),
+
+    // ==================== 管理员 API ====================
+
+    // 获取所有邮箱源
+    adminGetSources: (): Promise<{
+      sources: Array<{
+        id: number
+        name: string
+        code: string
+        apiUrl: string
+        apiKey: string
+        smarterMailUrl: string
+        enabled: boolean
+        sortOrder: number
+        planCount: number
+        subscriptionCount: number
+        domainCount: number
+        createdAt: string
+        updatedAt: string
+      }>
+    }> => http.get('/mail/admin/sources'),
+
+    // 创建邮箱源
+    adminCreateSource: (data: {
+      name: string
+      code: string
+      apiUrl: string
+      apiKey: string
+      smarterMailUrl: string
+      enabled?: boolean
+      sortOrder?: number
+    }): Promise<{ source: any }> => http.post('/mail/admin/sources', data),
+
+    // 更新邮箱源
+    adminUpdateSource: (id: number, data: {
+      name?: string
+      code?: string
+      apiUrl?: string
+      apiKey?: string
+      smarterMailUrl?: string
+      enabled?: boolean
+      sortOrder?: number
+    }): Promise<{ source: any }> => http.put(`/mail/admin/sources/${id}`, data),
+
+    // 删除邮箱源
+    adminDeleteSource: (id: number): Promise<{ success: boolean }> =>
+      http.delete(`/mail/admin/sources/${id}`),
+
+    // 获取所有方案
+    adminGetPlans: (): Promise<{
+      plans: Array<{
+        id: number
+        sourceId: number
+        name: string
+        description: string | null
+        domainLimit: number
+        diskLimitGb: number
+        billingCycle: 'monthly' | 'yearly'
+        price: string
+        enabled: boolean
+        sortOrder: number
+        source: { id: number; name: string; code: string }
+        createdAt: string
+        updatedAt: string
+      }>
+    }> => http.get('/mail/admin/plans'),
+
+    // 创建方案
+    adminCreatePlan: (data: {
+      sourceId: number
+      name: string
+      description?: string
+      domainLimit: number
+      diskLimitGb: number
+      billingCycle: 'monthly' | 'yearly'
+      price: number
+      enabled?: boolean
+      sortOrder?: number
+    }): Promise<{ plan: any }> => http.post('/mail/admin/plans', data),
+
+    // 更新方案
+    adminUpdatePlan: (id: number, data: {
+      name?: string
+      description?: string
+      domainLimit?: number
+      diskLimitGb?: number
+      billingCycle?: 'monthly' | 'yearly'
+      price?: number
+      enabled?: boolean
+      sortOrder?: number
+    }): Promise<{ plan: any }> => http.put(`/mail/admin/plans/${id}`, data),
+
+    // 删除方案
+    adminDeletePlan: (id: number): Promise<{ success: boolean }> =>
+      http.delete(`/mail/admin/plans/${id}`),
+
+    // 获取所有订阅
+    adminGetSubscriptions: (params?: {
+      sourceId?: number
+      status?: string
+      search?: string
+      page?: number
+      pageSize?: number
+    }): Promise<{
+      subscriptions: Array<any>
+      total: number
+    }> => http.get('/mail/admin/subscriptions', { params }),
+
+    // 获取所有域名
+    adminGetDomains: (params?: {
+      sourceId?: number
+      status?: string
+      search?: string
+      page?: number
+      pageSize?: number
+    }): Promise<{
+      domains: Array<any>
+      total: number
+    }> => http.get('/mail/admin/domains', { params }),
+
+    // 管理员退订
+    adminCancelSubscription: (id: number, data: {
+      refundType: 'none' | 'full' | 'remaining'
+      reason?: string
+    }): Promise<{
+      success: boolean
+      refundAmount: number
+      refundType: string
+    }> => http.post(`/mail/admin/subscriptions/${id}/cancel`, data)
+  }
+}
+
+export default api
+
+// 导出各模块方便单独使用
+export const authApi = api.auth
+export const usersApi = api.users
+export const instancesApi = api.instances
+export const transfersApi = api.transfers
diff --git a/client/src/components/BackupManager.vue b/client/src/components/BackupManager.vue
new file mode 100644
index 0000000..7e7d49c
--- /dev/null
+++ b/client/src/components/BackupManager.vue
@@ -0,0 +1,996 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useRestoreTask } from '@/stores/restoreTask'
+import { formatDate, formatDuration } from '@/utils/formatters'
+import type { Backup, BackupPolicy, CreateBackupRequest, UpdateBackupPolicyRequest } from '@/types/api'
+
+const { t } = useI18n()
+
+interface Props {
+  instanceId: string | number
+  instanceName?: string
+  backupLimit?: number | null
+  canManageBackups?: boolean  // AUTH004: 节点所有者不能下载/上传备份
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instanceName: '',
+  backupLimit: null,
+  canManageBackups: true
+})
+
+// 配额状态
+const hasQuota = computed<boolean>(() => props.backupLimit !== null && props.backupLimit !== undefined)
+const quotaUsed = computed<number>(() => backups.value.filter(b => b.status !== 'deleted').length)
+const quotaRemaining = computed<number>(() => hasQuota.value ? Math.max(0, (props.backupLimit || 0) - quotaUsed.value) : 0)
+const isQuotaFull = computed<boolean>(() => hasQuota.value && quotaRemaining.value <= 0)
+
+const toast = useToast()
+const themeStore = useThemeStore()
+const restoreTask = useRestoreTask()
+
+// 备份列表
+const backups = ref<Backup[]>([])
+const loading = ref<boolean>(true)
+
+// 创建备份弹窗
+const showCreateModal = ref<boolean>(false)
+interface CreateForm {
+  name: string
+  description: string
+}
+const createForm = ref<CreateForm>({ name: '', description: '' })
+const createLoading = ref<boolean>(false)
+
+// 自动备份策略
+const policy = ref<BackupPolicy | null>(null)
+const showPolicyModal = ref<boolean>(false)
+const policyForm = ref<UpdateBackupPolicyRequest>({ enabled: false, intervalMinutes: 360 })
+const policyLoading = ref<boolean>(false)
+
+// 导出状态
+interface ExportState {
+  backupId: number
+  taskId: string | null
+  status: 'idle' | 'preparing' | 'ready' | 'downloading' | 'error'
+  error?: string
+}
+const exportStates = ref<Map<number, ExportState>>(new Map())
+
+// 恢复确认弹窗
+const showRestoreConfirm = ref<boolean>(false)
+const restoreTargetBackup = ref<Backup | null>(null)
+
+
+
+onMounted(async () => {
+  await Promise.all([loadBackups(), loadPolicy(), loadActiveUploadTask()])
+})
+
+const instanceIdNum = computed<number>(() => Number(props.instanceId))
+
+async function loadBackups(): Promise<void> {
+  loading.value = true
+  try {
+    const res = await api.instances.getBackups(instanceIdNum.value)
+    backups.value = Array.isArray(res) ? res : []
+  } catch (err) {
+    console.error('Failed to load backups:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadPolicy(): Promise<void> {
+  try {
+    const res = await api.instances.getBackupPolicy(instanceIdNum.value)
+    policy.value = res
+    if (res) {
+      policyForm.value = {
+        enabled: res.enabled === 1,
+        intervalMinutes: res.interval_minutes
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load policy:', err)
+  }
+}
+
+async function createBackup(): Promise<void> {
+  if (!createForm.value.name) return
+  
+  createLoading.value = true
+  try {
+    const payload: CreateBackupRequest = {
+      name: createForm.value.name,
+      description: createForm.value.description || undefined
+    }
+    await api.instances.createBackup(instanceIdNum.value, payload)
+    toast.success(t('backup.messages.createSuccess'))
+    showCreateModal.value = false
+    createForm.value = { name: '', description: '' }
+    await loadBackups()
+  } catch (err: any) {
+    toast.error(t('backup.messages.createFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    createLoading.value = false
+  }
+}
+
+async function deleteBackup(backup: Backup): Promise<void> {
+  if (!confirm(t('backup.messages.deleteConfirm', { name: backup.name }))) return
+  
+  try {
+    await api.instances.deleteBackup(instanceIdNum.value, backup.id)
+    backups.value = backups.value.filter(b => b.id !== backup.id)
+    toast.success(t('backup.messages.deleteSuccess'))
+  } catch (err: any) {
+    toast.error(t('backup.messages.deleteFailed') + ': ' + (err?.message || String(err)))
+    await loadBackups()
+  }
+}
+
+
+async function savePolicy(): Promise<void> {
+  policyLoading.value = true
+  try {
+    await api.instances.updateBackupPolicy(instanceIdNum.value, policyForm.value)
+    toast.success(t('backup.messages.policySaved'))
+    showPolicyModal.value = false
+    await loadPolicy()
+  } catch (err: any) {
+    toast.error(t('backup.messages.policySaveFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    policyLoading.value = false
+  }
+}
+
+// 取消自动备份策略
+async function disableAutoPolicy(): Promise<void> {
+  policyLoading.value = true
+  try {
+    await api.instances.updateBackupPolicy(instanceIdNum.value, { enabled: false, intervalMinutes: policyForm.value.intervalMinutes })
+    toast.success(t('backup.messages.policyDisabled'))
+    await loadPolicy()
+  } catch (err: any) {
+    toast.error(t('backup.messages.policySaveFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    policyLoading.value = false
+  }
+}
+
+// 获取间隔时间的显示文本
+function getIntervalLabel(minutes: number): string {
+  const intervalMap: Record<number, string> = {
+    60: t('backup.policyModal.intervalOptions.hour1'),
+    360: t('backup.policyModal.intervalOptions.hour6'),
+    1440: t('backup.policyModal.intervalOptions.hour24'),
+    4320: t('backup.policyModal.intervalOptions.day3')
+  }
+  return intervalMap[minutes] || `${minutes} ${t('backup.minutes')}`
+}
+
+function formatSize(bytes: number | null | undefined): string {
+  if (!bytes) return '-'
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB'
+  return (bytes / 1024 / 1024 / 1024).toFixed(2) + ' GB'
+}
+
+function getStatusInfo(status: string): { label: string; class: string } {
+  const map: Record<string, { label: string; class: string }> = {
+    creating: { label: t('backup.status.creating'), class: 'text-yellow-500' },
+    ready: { label: t('backup.status.ready'), class: 'text-green-500' },
+    error: { label: t('backup.status.error'), class: 'text-red-500' }
+  }
+  return map[status] || { label: status, class: 'text-gray-500' }
+}
+
+// 获取备份的导出状态
+function getExportState(backupId: number): ExportState {
+  if (!exportStates.value.has(backupId)) {
+    exportStates.value.set(backupId, {
+      backupId,
+      taskId: null,
+      status: 'idle'
+    })
+  }
+  return exportStates.value.get(backupId)!
+}
+
+// 开始导出备份（内部调用，不显示提示）
+async function startExport(backup: Backup): Promise<void> {
+  const state = getExportState(backup.id)
+  state.status = 'preparing'
+  state.error = undefined
+
+  try {
+    const res = await api.instances.exportBackup(instanceIdNum.value, backup.id)
+    state.taskId = res.taskId
+    state.status = 'ready'
+  } catch (err: any) {
+    state.status = 'error'
+    state.error = err?.message || String(err)
+    toast.error(t('backup.messages.exportFailed') + ': ' + state.error)
+  }
+}
+
+// 下载备份（安全改进：使用一次性下载 token）
+async function downloadBackup(backup: Backup): Promise<void> {
+  const state = getExportState(backup.id)
+  
+  if (!state.taskId) {
+    // 如果没有任务ID，先创建导出任务
+    await startExport(backup)
+    if (state.status !== 'ready') return
+  }
+
+  state.status = 'downloading'
+
+  try {
+    // 获取一次性下载 token（替代不安全的 JWT URL 参数）
+    const { downloadUrl } = await api.instances.getDownloadToken(instanceIdNum.value, state.taskId!)
+    
+    // downloadUrl 已经包含 /api 前缀，直接使用
+    const fullUrl = downloadUrl
+    
+    // 使用隐藏 iframe 触发下载，这样：
+    // 1. 浏览器会显示下载进度
+    // 2. 用户可以离开页面，下载继续
+    // 3. 不会打开新标签页
+    const iframe = document.createElement('iframe')
+    iframe.style.display = 'none'
+    iframe.src = fullUrl
+    document.body.appendChild(iframe)
+    
+    // 5秒后移除 iframe（下载已经开始）
+    setTimeout(() => {
+      document.body.removeChild(iframe)
+    }, 5000)
+
+    toast.success(t('backup.messages.downloadStarted'), 6000)
+    
+    // 重置状态（下载由浏览器处理）
+    state.status = 'idle'
+    state.taskId = null
+  } catch (err: any) {
+    state.status = 'error'
+    state.error = err?.message || String(err)
+    toast.error(t('backup.messages.downloadFailed') + ': ' + state.error, 5000)
+  }
+}
+
+// 获取导出按钮文本
+function getExportButtonText(backup: Backup): string {
+  const state = getExportState(backup.id)
+  switch (state.status) {
+    case 'preparing':
+      return t('backup.preparing')
+    case 'ready':
+      return t('backup.clickToDownload')
+    case 'downloading':
+      return t('backup.downloading')
+    case 'error':
+      return t('backup.retry')
+    default:
+      return t('backup.export')
+  }
+}
+
+// 是否可以导出
+function canExport(backup: Backup): boolean {
+  const state = getExportState(backup.id)
+  // AUTH004: 节点所有者不能下载备份
+  return props.canManageBackups !== false && backup.status === 'ready' && !['preparing', 'downloading'].includes(state.status)
+}
+
+// ==================== 恢复功能 (使用全局 store) ====================
+
+// 显示恢复确认对话框
+function showRestoreConfirmDialog(backup: Backup): void {
+  restoreTargetBackup.value = backup
+  showRestoreConfirm.value = true
+}
+
+// 确认恢复
+async function confirmRestore(): Promise<void> {
+  if (!restoreTargetBackup.value) return
+  
+  const backup = restoreTargetBackup.value
+  
+  showRestoreConfirm.value = false
+
+  // 使用全局 store 启动恢复任务
+  await restoreTask.startRestore(instanceIdNum.value, backup.id, backup.name, t)
+}
+
+// 回滚恢复
+async function rollbackRestore(): Promise<void> {
+  await restoreTask.rollback(t)
+}
+
+// 是否可以恢复
+function canRestore(backup: Backup): boolean {
+  const exportState = getExportState(backup.id)
+  // 检查备份状态和是否有正在进行的恢复任务
+  return backup.status === 'ready' && 
+         !restoreTask.isBackupRestoring(instanceIdNum.value, backup.id) &&
+         !['preparing', 'downloading'].includes(exportState.status)
+}
+
+// 是否正在恢复
+function isRestoring(backup: Backup): boolean {
+  return restoreTask.isBackupRestoring(instanceIdNum.value, backup.id)
+}
+
+// 是否可以回滚
+function canRollback(backup: Backup): boolean {
+  return restoreTask.canRollbackBackup(instanceIdNum.value, backup.id)
+}
+
+// ==================== 上传到远程存储 ====================
+
+interface StorageConfig {
+  id: number
+  name: string
+  type: string
+  host: string
+  isDefault: boolean
+}
+
+const showUploadModal = ref(false)
+const uploadTargetBackup = ref<Backup | null>(null)
+const storageConfigs = ref<StorageConfig[]>([])
+const selectedStorageId = ref<number | null>(null)
+const uploadLoading = ref(false)
+const uploadTaskId = ref<number | null>(null)
+const uploadBackupId = ref<number | null>(null)  // 跟踪正在上传的备份ID
+const uploadStatus = ref<string | null>(null)
+const uploadQueuePosition = ref<number>(0)
+const uploadDuration = ref<number | null>(null)
+let isPolling = false  // 防止重复轮询
+
+// 打开上传弹窗
+async function openUploadModal(backup: Backup) {
+  uploadTargetBackup.value = backup
+  uploadLoading.value = true
+  showUploadModal.value = true
+  
+  try {
+    const configs = await api.storageConfigs.list()
+    storageConfigs.value = configs
+    // 默认选择默认存储
+    const defaultConfig = configs.find(c => c.isDefault)
+    selectedStorageId.value = defaultConfig?.id || (configs.length > 0 ? configs[0].id : null)
+  } catch (err) {
+    console.error('Failed to load storage configs:', err)
+    storageConfigs.value = []
+  } finally {
+    uploadLoading.value = false
+  }
+}
+
+// 开始上传
+async function startUpload() {
+  if (!uploadTargetBackup.value) return
+  
+  uploadLoading.value = true
+  try {
+    const result = await api.instances.uploadBackupRemote(
+      instanceIdNum.value,
+      uploadTargetBackup.value.id,
+      selectedStorageId.value || undefined
+    )
+    
+    uploadTaskId.value = result.taskId
+    uploadBackupId.value = uploadTargetBackup.value.id
+    uploadStatus.value = result.status
+    toast.success(t('backup.messages.uploadStarted'))
+    showUploadModal.value = false
+    
+    // 开始轮询任务状态
+    pollUploadStatus()
+  } catch (err: any) {
+    if (err?.code === 'BACKUP_UPLOAD_IN_PROGRESS') {
+      toast.warning(t('backup.messages.uploadInProgress'))
+    } else {
+      toast.error(t('backup.messages.uploadFailed') + ': ' + (err?.message || String(err)))
+    }
+  } finally {
+    uploadLoading.value = false
+  }
+}
+
+// 轮询上传状态
+async function pollUploadStatus() {
+  if (!uploadTaskId.value || isPolling) return
+  
+  isPolling = true
+  
+  const poll = async () => {
+    // 再次检查，防止在异步间隙被清除
+    if (!uploadTaskId.value) {
+      isPolling = false
+      return
+    }
+    
+    try {
+      const status = await api.instances.getUploadTaskStatus(instanceIdNum.value, uploadTaskId.value!)
+      uploadStatus.value = status.status
+      uploadQueuePosition.value = status.queuePosition || 0
+      uploadDuration.value = status.duration || null
+      
+      if (status.status === 'COMPLETED') {
+        toast.success(t('backup.messages.uploadCompleted'))
+        uploadTaskId.value = null
+        uploadBackupId.value = null
+        uploadStatus.value = null
+        uploadQueuePosition.value = 0
+        uploadDuration.value = null
+        isPolling = false
+      } else if (status.status === 'FAILED') {
+        toast.error(t('backup.messages.uploadFailed') + ': ' + (status.error || ''))
+        uploadTaskId.value = null
+        uploadBackupId.value = null
+        uploadStatus.value = null
+        uploadQueuePosition.value = 0
+        uploadDuration.value = null
+        isPolling = false
+      } else {
+        // 继续轮询
+        setTimeout(poll, 3000)
+      }
+    } catch (err) {
+      console.error('Failed to poll upload status:', err)
+      uploadTaskId.value = null
+      uploadBackupId.value = null
+      uploadStatus.value = null
+      uploadQueuePosition.value = 0
+      uploadDuration.value = null
+      isPolling = false
+    }
+  }
+  
+  poll()
+}
+
+// 加载活跃的上传任务（用于页面刷新后恢复状态）
+async function loadActiveUploadTask() {
+  try {
+    const result = await api.instances.getActiveUploadTask(instanceIdNum.value)
+    if (result.task) {
+      uploadTaskId.value = result.task.taskId
+      uploadBackupId.value = result.task.backupId
+      uploadStatus.value = result.task.status
+      uploadQueuePosition.value = result.task.queuePosition || 0
+      uploadDuration.value = result.task.duration || null
+      // 继续轮询
+      pollUploadStatus()
+    }
+  } catch (err) {
+    console.error('Failed to load active upload task:', err)
+  }
+}
+
+// 是否可以上传
+function canUpload(backup: Backup): boolean {
+  // AUTH004: 节点所有者不能上传备份
+  // 备份必须是 ready 状态，且没有正在恢复，且没有其他上传任务进行中
+  return props.canManageBackups !== false && backup.status === 'ready' && !isRestoring(backup) && uploadTaskId.value === null
+}
+
+// 是否正在上传
+function isUploading(backup: Backup): boolean {
+  return uploadTaskId.value !== null && uploadBackupId.value === backup.id
+}
+
+// 计算属性：获取当前恢复任务（解包 ref）
+const currentRestoreTask = computed(() => restoreTask.activeTask.value)
+
+// 获取恢复任务信息
+function getRestoreTaskInfo(_backup: Backup): string {
+  const task = restoreTask.activeTask.value
+  if (!task) return ''
+  const parts: string[] = []
+  if (task.createdAt) parts.push(`创建: ${formatDate(task.createdAt)}`)
+  if (task.startedAt) parts.push(`开始: ${formatDate(task.startedAt)}`)
+  if (task.duration) parts.push(`执行: ${formatDuration(task.duration)}`)
+  if (task.queuePosition && task.queuePosition > 1) parts.push(`队列位置: ${task.queuePosition}`)
+  return parts.join('\n')
+}
+
+// 获取上传任务信息
+function getUploadTaskInfo(): string {
+  const parts: string[] = []
+  // 注意：这里没有保存createdAt等信息，如果需要可以添加
+  if (uploadDuration.value) parts.push(`执行时长: ${formatDuration(uploadDuration.value)}`)
+  if (uploadQueuePosition.value && uploadQueuePosition.value > 1) parts.push(`队列位置: ${uploadQueuePosition.value}`)
+  return parts.join('\n')
+}
+</script>
+
+<template>
+  <div class="card">
+    <div 
+      class="flex items-center justify-between p-4 border-b"
+      :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+    >
+      <div>
+        <h2 
+          class="text-sm font-medium"
+          :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+        >
+          {{ t('backup.title') }}
+        </h2>
+        <p 
+          class="text-xs mt-0.5"
+          :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+        >
+          {{ policy?.enabled ? t('backup.autoPolicy') : t('backup.manual') }}
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <span v-if="hasQuota" class="text-xs text-themed-muted">
+          {{ quotaUsed }}/{{ backupLimit }}
+        </span>
+        <button class="btn-ghost btn-sm" :title="t('backup.autoSettings')" @click="showPolicyModal = true">
+          <svg 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </button>
+        <button 
+          :disabled="!hasQuota || isQuotaFull" 
+          :class="['btn-ghost btn-sm', (!hasQuota || isQuotaFull) && 'opacity-50 cursor-not-allowed']"
+          :title="!hasQuota ? t('backup.noQuota') : isQuotaFull ? t('backup.quotaFull') : t('backup.createBackup')"
+          @click="showCreateModal = true"
+        >
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('backup.create') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 自动备份策略提醒横幅 -->
+    <div 
+      v-if="policy?.enabled" 
+      class="mx-4 mt-4 p-3 rounded-lg flex items-center justify-between gap-3"
+      :class="themeStore.isDark ? 'bg-blue-500/10 border border-blue-500/20' : 'bg-blue-50 border border-blue-200'"
+    >
+      <div class="flex items-center gap-3">
+        <div 
+          class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
+          :class="themeStore.isDark ? 'bg-blue-500/20' : 'bg-blue-100'"
+        >
+          <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div>
+          <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-700'">
+            {{ t('backup.autoPolicyEnabled') }}
+          </p>
+          <p class="text-xs" :class="themeStore.isDark ? 'text-blue-500/70' : 'text-blue-600'">
+            {{ t('backup.currentPolicy') }}: {{ getIntervalLabel(policy.interval_minutes) }}
+          </p>
+        </div>
+      </div>
+      <button 
+        class="btn-ghost btn-sm flex-shrink-0"
+        :class="themeStore.isDark ? 'text-blue-400 hover:bg-blue-500/20' : 'text-blue-600 hover:bg-blue-100'"
+        :disabled="policyLoading"
+        @click="disableAutoPolicy"
+      >
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+        {{ t('backup.disableAutoPolicy') }}
+      </button>
+    </div>
+
+    <div v-if="loading" class="p-4 animate-pulse">
+      <div v-for="i in 2" :key="i" class="flex items-center gap-3 py-3">
+        <div 
+          class="w-8 h-8 rounded"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div class="flex-1 space-y-2">
+          <div 
+            class="h-3 rounded w-1/3"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          ></div>
+          <div 
+            class="h-2 rounded w-1/4"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-200/50'"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div 
+      v-else-if="backups.length === 0" 
+      class="p-8 text-center text-sm"
+      :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+    >
+      <svg class="w-10 h-10 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+      </svg>
+      <template v-if="!hasQuota">
+        <p class="text-yellow-500 mb-1">{{ t('backup.noQuotaAllocated') }}</p>
+        <p class="text-xs">{{ t('backup.allocateQuotaHint') }}</p>
+      </template>
+      <template v-else>
+        {{ t('backup.noBackups') }}
+      </template>
+    </div>
+
+    <div 
+      v-else 
+      class="divide-y"
+      :class="themeStore.isDark ? 'divide-gray-800' : 'divide-gray-100'"
+    >
+      <div 
+        v-for="backup in backups" 
+        :key="backup.id"
+        class="flex items-center justify-between p-4 transition-colors"
+        :class="themeStore.isDark ? 'hover:bg-gray-900/50' : 'hover:bg-gray-50'"
+      >
+        <div class="flex items-center gap-3">
+          <div 
+            class="w-8 h-8 rounded-lg flex items-center justify-center"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+          >
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+            </svg>
+          </div>
+          <div>
+            <div 
+              class="text-sm flex items-center gap-2"
+              :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+            >
+              {{ backup.name }}
+              <span :class="['text-xs', getStatusInfo(backup.status).class]">
+                {{ getStatusInfo(backup.status).label }}
+              </span>
+            </div>
+            <div 
+              class="text-xs"
+              :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+            >
+              {{ formatDate(backup.created_at) }}
+              <span v-if="backup.size" class="ml-2">{{ formatSize(backup.size) }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <!-- 恢复按钮 -->
+          <button 
+            v-if="canRestore(backup)"
+            class="btn-ghost btn-sm text-blue-500"
+            @click="showRestoreConfirmDialog(backup)"
+          >
+            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            {{ t('backup.restore') }}
+          </button>
+          <!-- 恢复中状态 -->
+          <span 
+            v-else-if="isRestoring(backup)"
+            class="btn-ghost btn-sm text-yellow-500 cursor-not-allowed"
+            :title="getRestoreTaskInfo(backup)"
+          >
+            <svg class="w-3 h-3 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ t('backup.restoring') }}
+            <span v-if="currentRestoreTask?.queuePosition && currentRestoreTask.queuePosition > 1" class="ml-1 text-xs">
+              (队列: {{ currentRestoreTask.queuePosition }})
+            </span>
+            <span v-if="currentRestoreTask?.duration" class="ml-1 text-xs">
+              ({{ formatDuration(currentRestoreTask.duration) }})
+            </span>
+          </span>
+          <!-- 回滚按钮 -->
+          <button 
+            v-else-if="canRollback(backup)"
+            class="btn-ghost btn-sm text-orange-500"
+            @click="rollbackRestore()"
+          >
+            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+            </svg>
+            {{ t('backup.rollback') }}
+          </button>
+          <!-- 上传到云端按钮 -->
+          <button 
+            v-if="canUpload(backup) && !isUploading(backup)"
+            class="btn-ghost btn-sm text-purple-500"
+            @click="openUploadModal(backup)"
+          >
+            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+            </svg>
+            {{ t('backup.upload') }}
+          </button>
+          <!-- 上传中状态 -->
+          <span 
+            v-else-if="isUploading(backup)"
+            class="btn-ghost btn-sm text-purple-500 cursor-not-allowed"
+            :title="getUploadTaskInfo()"
+          >
+            <svg class="w-3 h-3 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ uploadStatus === 'PENDING' ? t('backup.uploadStatus.pending') : t('backup.uploadStatus.processing') }}
+            <span v-if="uploadQueuePosition && uploadQueuePosition > 1" class="ml-1 text-xs">
+              (队列: {{ uploadQueuePosition }})
+            </span>
+            <span v-if="uploadDuration" class="ml-1 text-xs">
+              ({{ formatDuration(uploadDuration) }})
+            </span>
+          </span>
+          <!-- 导出按钮 -->
+          <button 
+            :disabled="!canExport(backup)" 
+            class="btn-ghost btn-sm"
+            :class="getExportState(backup.id).status === 'ready' ? 'text-green-500' : ''"
+            @click="downloadBackup(backup)"
+          >
+            <svg 
+              v-if="['preparing', 'downloading'].includes(getExportState(backup.id).status)" 
+              class="w-3 h-3 mr-1 animate-spin" 
+              fill="none" 
+              viewBox="0 0 24 24"
+            >
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <svg 
+              v-else-if="getExportState(backup.id).status === 'ready'" 
+              class="w-3 h-3 mr-1" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            <svg 
+              v-else 
+              class="w-3 h-3 mr-1" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            {{ getExportButtonText(backup) }}
+          </button>
+          <!-- 删除按钮 -->
+          <button 
+            :disabled="backup.status === 'creating' || isRestoring(backup)" 
+            class="btn-ghost btn-sm text-error"
+            @click="deleteBackup(backup)"
+          >
+            {{ t('backup.delete') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 创建备份弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showCreateModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showCreateModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('backup.createModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showCreateModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form class="modal-body" @submit.prevent="createBackup">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('backup.createModal.name') }} <span class="text-error">{{ t('backup.createModal.nameRequired') }}</span></label>
+                <input v-model="createForm.name" type="text" class="input" :placeholder="t('backup.createModal.namePlaceholder')" required />
+              </div>
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('backup.createModal.description') }}</label>
+                <input v-model="createForm.description" type="text" class="input" :placeholder="t('backup.createModal.descriptionPlaceholder')" />
+              </div>
+
+              <p class="text-xs text-themed-muted">
+                {{ t('backup.createModal.createHint') }}
+              </p>
+            </form>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showCreateModal = false">{{ t('backup.createModal.cancel') }}</button>
+              <button :disabled="createLoading || !createForm.name" class="btn-primary" @click="createBackup">
+                {{ createLoading ? t('backup.createModal.creating') : t('backup.createModal.create') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 自动备份策略弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showPolicyModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showPolicyModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('backup.policyModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showPolicyModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form class="modal-body" @submit.prevent="savePolicy">
+              <label class="flex items-center gap-2 cursor-pointer">
+                <input 
+                  v-model="policyForm.enabled" 
+                  type="checkbox" 
+                  class="w-4 h-4 rounded"
+                  :class="themeStore.isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-300'"
+                />
+                <span class="text-sm text-themed">{{ t('backup.policyModal.enable') }}</span>
+              </label>
+            
+              <div v-if="policyForm.enabled" class="space-y-4 pt-2">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('backup.policyModal.interval') }}</label>
+                  <select v-model="policyForm.intervalMinutes" class="input">
+                    <option :value="60">{{ t('backup.policyModal.intervalOptions.hour1') }}</option>
+                    <option :value="360">{{ t('backup.policyModal.intervalOptions.hour6') }}</option>
+                    <option :value="1440">{{ t('backup.policyModal.intervalOptions.hour24') }}</option>
+                    <option :value="4320">{{ t('backup.policyModal.intervalOptions.day3') }}</option>
+                  </select>
+                </div>
+                <p class="text-xs text-themed-muted">
+                  {{ t('backup.policyModal.quotaFromPackage', { limit: backupLimit || 0 }) }}
+                </p>
+              </div>
+            </form>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showPolicyModal = false">{{ t('backup.policyModal.cancel') }}</button>
+              <button :disabled="policyLoading" class="btn-primary" @click="savePolicy">
+                {{ policyLoading ? t('backup.policyModal.saving') : t('backup.policyModal.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 上传到远程存储弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showUploadModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showUploadModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('backup.uploadModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showUploadModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <!-- 备份信息 -->
+              <div class="p-3 rounded-lg bg-themed-tertiary">
+                <p class="text-xs text-themed-muted">{{ t('backup.createModal.name') }}</p>
+                <p class="text-sm text-themed font-medium">{{ uploadTargetBackup?.name }}</p>
+              </div>
+            
+              <!-- 存储选择 -->
+              <div v-if="storageConfigs.length > 0">
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('backup.uploadModal.selectStorage') }}</label>
+                <select v-model="selectedStorageId" class="input">
+                  <option v-for="config in storageConfigs" :key="config.id" :value="config.id">
+                    {{ config.name }} ({{ config.type }})
+                    <template v-if="config.isDefault"> - {{ t('profile.storage.default') }}</template>
+                  </option>
+                </select>
+              </div>
+            
+              <!-- 无存储配置提示 -->
+              <div v-else class="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-center">
+                <svg class="w-8 h-8 mx-auto mb-2 text-yellow-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                </svg>
+                <p class="text-sm text-themed-muted">{{ t('backup.uploadModal.noStorage') }}</p>
+                <p class="text-xs text-themed-faint mt-1">{{ t('backup.uploadModal.noStorageHint') }}</p>
+                <router-link to="/profile" class="btn-primary btn-sm mt-3 inline-block">
+                  {{ t('backup.uploadModal.goToSettings') }}
+                </router-link>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showUploadModal = false">{{ t('backup.uploadModal.cancel') }}</button>
+              <button 
+                :disabled="uploadLoading || storageConfigs.length === 0" 
+                class="btn-primary"
+                @click="startUpload"
+              >
+                {{ uploadLoading ? t('backup.uploadModal.uploading') : t('backup.uploadModal.upload') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 恢复确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showRestoreConfirm" class="modal-overlay">
+          <div class="modal-backdrop" @click="showRestoreConfirm = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title text-error">{{ t('backup.restoreModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showRestoreConfirm = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <!-- 主警告 -->
+              <div class="flex items-start gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                <svg class="w-6 h-6 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <div>
+                  <p class="text-sm text-themed font-medium">{{ t('backup.restoreModal.warning') }}</p>
+                  <p class="text-xs text-themed-muted mt-1">{{ t('backup.restoreModal.warningDetail') }}</p>
+                </div>
+              </div>
+              <!-- 数据删除警告 -->
+              <div class="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
+                <p class="text-sm text-orange-500 font-medium mb-2">{{ t('backup.restoreModal.dataLossWarning') }}</p>
+                <ul class="text-xs text-themed-muted list-disc list-inside space-y-1">
+                  <li>{{ t('backup.restoreModal.dataLossItems.backups') }}</li>
+                  <li>{{ t('backup.restoreModal.dataLossItems.snapshots') }}</li>
+                </ul>
+              </div>
+              <!-- 名称变更提示 -->
+              <div class="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+                <p class="text-xs text-blue-400">
+                  {{ t('backup.restoreModal.nameChangeNotice', { name: instanceName, backup: restoreTargetBackup?.name }) }}
+                </p>
+              </div>
+              <!-- 备份信息 -->
+              <div class="text-sm text-themed-muted">
+                <p>{{ t('backup.restoreModal.backupName') }}: <span class="text-themed font-medium">{{ restoreTargetBackup?.name }}</span></p>
+                <p class="mt-1">{{ t('backup.restoreModal.instanceName') }}: <span class="text-themed font-medium">{{ instanceName }}</span></p>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showRestoreConfirm = false">{{ t('backup.restoreModal.cancel') }}</button>
+              <button class="btn-primary bg-red-600 hover:bg-red-700" @click="confirmRestore">
+                {{ t('backup.restoreModal.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
diff --git a/client/src/components/BadgeImage.vue b/client/src/components/BadgeImage.vue
new file mode 100644
index 0000000..55c9856
--- /dev/null
+++ b/client/src/components/BadgeImage.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { useBadgeStore } from '@/stores/badges'
+
+const props = withDefaults(defineProps<{
+  badgeId: string
+  size?: number
+  alt?: string
+  variant?: 'avatar' | 'icon' | 'plain'
+}>(), {
+  size: 32,
+  alt: '',
+  variant: 'icon'
+})
+
+const themeStore = useThemeStore()
+const badgeStore = useBadgeStore()
+
+onMounted(() => {
+  badgeStore.ensureBadge(props.badgeId)
+})
+
+watch(() => props.badgeId, (badgeId) => {
+  badgeStore.ensureBadge(badgeId)
+})
+
+const sizeStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`
+}))
+
+const roundedClass = computed(() => {
+  if (props.variant === 'avatar') return 'rounded-full'
+  if (props.variant === 'icon') return 'rounded-xl'
+  return ''
+})
+
+const badgeUrl = computed(() => {
+  const badge = badgeStore.getBadge(props.badgeId)
+  if (badge) {
+    if (themeStore.isDark) {
+      return badge.assetUrlDark || badge.assetUrl || `/badges/dark/${props.badgeId}.svg`
+    }
+    return badge.assetUrlLight || badge.assetUrl || `/badges/light/${props.badgeId}.svg`
+  }
+
+  return `/badges/${themeStore.isDark ? 'dark' : 'light'}/${props.badgeId}.svg`
+})
+</script>
+
+<template>
+  <img
+    :src="badgeUrl"
+    :alt="alt || badgeId"
+    loading="lazy"
+    class="object-contain shrink-0"
+    :class="roundedClass"
+    :style="sizeStyle"
+  />
+</template>
diff --git a/client/src/components/CheckinModal.vue b/client/src/components/CheckinModal.vue
new file mode 100644
index 0000000..82e38a4
--- /dev/null
+++ b/client/src/components/CheckinModal.vue
@@ -0,0 +1,841 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+import FlagIcon from '@/components/FlagIcon.vue'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface Props {
+  show: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+}>()
+
+// 当前选中的 Tab
+const activeTab = ref<'checkin' | 'redeem' | 'records'>('checkin')
+
+// 规则说明展开状态
+const showRules = ref(false)
+
+// 加载状态
+const loading = ref(false)
+const checkinLoading = ref(false)
+const redeemLoading = ref(false)
+
+// 抽奖动画状态
+const lotteryPhase = ref<'idle' | 'shaking' | 'opening' | 'revealing' | 'done'>('idle')
+const revealedReward = ref<{ type: string; value: number; bonusPoints: number } | null>(null)
+const confettiParticles = ref<Array<{ id: number; x: number; delay: number; color: string; size: number }>>([]);
+
+// 签到状态
+const checkinStatus = ref<{
+  hasCheckedIn: boolean
+  hasInstances: boolean
+  selfOnlyMode: boolean
+  consecutiveOthersUse: number
+} | null>(null)
+
+// 兑换码输入
+const redeemCodeInput = ref('')
+const selectedInstanceId = ref<number | null>(null)
+
+// 可用实例列表
+const instances = ref<Array<{
+  id: number
+  name: string
+  status: string
+  cpu: number
+  memory: number
+  disk: number
+  monthlyTrafficLimit: string | null
+  package: {
+    id: number
+    name: string
+    cpuMax: number
+    memoryMax: number
+    diskMax: number
+    monthlyTrafficLimit: string | null
+  } | null
+  host: {
+    id: number
+    name: string
+    location: string | null
+    countryCode: string
+  }
+}>>([])
+
+// 签到记录
+const checkinRecords = ref<Array<{
+  id: number
+  redeemCode: string
+  codeType: string
+  codeValue: number
+  expiresAt: string
+  usedAt: string | null
+  usedBy: { id: number; username: string } | null
+  usedFor: { id: number; name: string } | null
+  createdAt: string
+}>>([])
+
+// 兑换记录
+const redeemRecords = ref<Array<{
+  id: number
+  redeemCode: string
+  codeType: string
+  codeValue: number
+  owner: { id: number; username: string }
+  usedFor: { id: number; name: string } | null
+  usedAt: string | null
+  isSystemCode?: boolean
+}>>([])
+
+// 资源类型名称和单位
+const getResourceTypeName = (type: string) => {
+  const map: Record<string, string> = {
+    c: t('checkin.cpu'),
+    r: t('checkin.memory'),
+    d: t('checkin.disk'),
+    t: t('checkin.traffic'),
+    p: t('checkin.points')
+  }
+  return map[type] || type.toUpperCase()
+}
+
+const getResourceUnit = (type: string) => {
+  const map: Record<string, string> = {
+    c: t('checkin.percent'),
+    r: t('checkin.mb'),
+    d: t('checkin.mb'),
+    t: t('checkin.gb'),
+    p: ''  // 积分无单位
+  }
+  return map[type] || ''
+}
+
+// 资源类型对应的颜色
+const getResourceColor = (type: string) => {
+  const map: Record<string, string> = {
+    c: 'text-blue-500',
+    r: 'text-purple-500',
+    d: 'text-amber-500',
+    t: 'text-emerald-500',
+    p: 'text-yellow-500'  // 积分使用金色
+  }
+  return map[type] || 'text-gray-500'
+}
+
+const getResourceBgColor = (type: string) => {
+  const map: Record<string, string> = {
+    c: 'bg-blue-500/10',
+    r: 'bg-purple-500/10',
+    d: 'bg-amber-500/10',
+    t: 'bg-emerald-500/10',
+    p: 'bg-yellow-500/10'  // 积分使用金色背景
+  }
+  return map[type] || 'bg-gray-500/10'
+}
+
+// 资源类型图标
+const getResourceIcon = (type: string) => {
+  return {
+    c: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z', // CPU
+    r: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10', // Memory
+    d: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4', // Disk
+    t: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', // Traffic
+    p: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z' // Points (Star)
+  }[type] || 'M13 10V3L4 14h7v7l9-11h-7z'
+}
+
+// 生成彩色纸屑粒子
+const generateConfetti = () => {
+  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd']
+  const particles: typeof confettiParticles.value = []
+  for (let i = 0; i < 50; i++) {
+    particles.push({
+      id: i,
+      x: Math.random() * 100,
+      delay: Math.random() * 0.5,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      size: Math.random() * 8 + 4
+    })
+  }
+  confettiParticles.value = particles
+}
+
+// 加载签到状态
+const loadCheckinStatus = async () => {
+  try {
+    loading.value = true
+    checkinStatus.value = await api.checkin.getStatus()
+  } catch (err: any) {
+    console.error('Failed to load checkin status:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载实例列表
+const loadInstances = async () => {
+  try {
+    const res = await api.checkin.getInstances()
+    instances.value = res.instances
+    // 如果当前选中的实例不在新列表中，重置选择
+    if (selectedInstanceId.value && !res.instances.some(i => i.id === selectedInstanceId.value)) {
+      selectedInstanceId.value = null
+    }
+  } catch (err: any) {
+    console.error('Failed to load instances:', err)
+  }
+}
+
+// 记录总数（用于显示提示）
+const checkinTotal = ref(0)
+const redeemTotal = ref(0)
+
+// 加载签到记录（只取最近5条）
+const loadCheckinRecords = async () => {
+  try {
+    const res = await api.checkin.getRecords({ limit: 5 })
+    checkinRecords.value = res.records
+    checkinTotal.value = res.total
+  } catch (err: any) {
+    console.error('Failed to load checkin records:', err)
+  }
+}
+
+// 加载兑换记录（只取最近5条）
+const loadRedeemRecords = async () => {
+  try {
+    const res = await api.checkin.getRedeems({ limit: 5 })
+    redeemRecords.value = res.records
+    redeemTotal.value = res.total
+  } catch (err: any) {
+    console.error('Failed to load redeem records:', err)
+  }
+}
+
+// 执行签到（带动画）
+const doCheckin = async () => {
+  try {
+    checkinLoading.value = true
+    lotteryPhase.value = 'shaking'
+    
+    // 摇晃动画 1.2秒
+    await new Promise(resolve => setTimeout(resolve, 1200))
+    
+    // 打开礼盒
+    lotteryPhase.value = 'opening'
+    await new Promise(resolve => setTimeout(resolve, 600))
+    
+    // 调用API
+    const result = await api.checkin.checkin()
+    
+    // 揭晓奖励
+    lotteryPhase.value = 'revealing'
+    revealedReward.value = {
+      type: result.codeType,
+      value: result.codeValue,
+      bonusPoints: result.bonusPoints
+    }
+    generateConfetti()
+    
+    await new Promise(resolve => setTimeout(resolve, 100))
+    await nextTick()
+    
+    // 完成
+    lotteryPhase.value = 'done'
+    
+    // 重新加载状态
+    await loadCheckinStatus()
+    await loadCheckinRecords()
+    
+    // 3秒后清除彩色纸屑
+    setTimeout(() => {
+      confettiParticles.value = []
+    }, 3000)
+  } catch (err: unknown) {
+    toast.error(translateError(err))
+    lotteryPhase.value = 'idle'
+    revealedReward.value = null
+  } finally {
+    checkinLoading.value = false
+  }
+}
+
+// 兑换兑换码
+const doRedeem = async () => {
+  if (!redeemCodeInput.value.trim()) {
+    toast.error(t('checkin.inputCode'))
+    return
+  }
+  if (!selectedInstanceId.value) {
+    toast.error(t('checkin.selectInstance'))
+    return
+  }
+  
+  try {
+    redeemLoading.value = true
+    const result = await api.checkin.redeem(redeemCodeInput.value.trim(), selectedInstanceId.value)
+    
+    // 检查是否发生了截断（实际增量 < 兑换码面值）
+    const actualAdded = result.actualAdded ?? result.codeValue
+    if (actualAdded < result.codeValue) {
+      // 部分应用，提示用户
+      toast.success(`${t('checkin.redeemSuccess')}: ${getResourceTypeName(result.codeType)} +${actualAdded}${getResourceUnit(result.codeType)} (${t('checkin.cappedFromPackageLimit')})`)
+    } else {
+      toast.success(`${t('checkin.redeemSuccess')}: ${getResourceTypeName(result.codeType)} +${result.codeValue}${getResourceUnit(result.codeType)}`)
+    }
+    
+    // 清空输入
+    redeemCodeInput.value = ''
+    selectedInstanceId.value = null
+    
+    // 重新加载
+    await loadCheckinStatus()
+    await loadRedeemRecords()
+  } catch (err: unknown) {
+    toast.error(translateError(err))
+  } finally {
+    redeemLoading.value = false
+  }
+}
+
+// 格式化日期
+const formatDate = (dateStr: string) => {
+  const date = new Date(dateStr)
+  return date.toLocaleString()
+}
+
+// 监听弹窗显示
+watch(() => props.show, async (newVal) => {
+  if (newVal) {
+    activeTab.value = 'checkin'
+    await loadCheckinStatus()
+    await loadInstances()
+  }
+})
+
+// 监听 Tab 切换
+watch(activeTab, async (newTab) => {
+  if (newTab === 'records') {
+    await Promise.all([loadCheckinRecords(), loadRedeemRecords()])
+  }
+})
+
+// 关闭弹窗
+const close = () => {
+  emit('update:show', false)
+  // 重置状态
+  setTimeout(() => {
+    lotteryPhase.value = 'idle'
+    revealedReward.value = null
+    confettiParticles.value = []
+    showRules.value = false
+    // 重置兑换表单
+    redeemCodeInput.value = ''
+    selectedInstanceId.value = null
+  }, 300)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="show" class="modal-overlay">
+        <div class="modal-backdrop" @click="close" />
+        <div class="modal-content max-w-xl">
+          <div class="modal-header">
+            <div class="flex items-center gap-2">
+              <h3 class="modal-title">{{ t('checkin.title') }}</h3>
+              <button
+                type="button"
+                class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                :class="showRules ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-500' : 'text-gray-400'"
+                :title="t('checkin.rulesTitle')"
+                @click="showRules = !showRules"
+              >
+                <svg 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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </button>
+            </div>
+            <button
+              type="button"
+              class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              @click="close"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <!-- 规则说明面板 -->
+          <Transition
+            enter-active-class="transition-all duration-200 ease-out"
+            enter-from-class="opacity-0 -translate-y-2 max-h-0"
+            enter-to-class="opacity-100 translate-y-0 max-h-96"
+            leave-active-class="transition-all duration-150 ease-in"
+            leave-from-class="opacity-100 translate-y-0 max-h-96"
+            leave-to-class="opacity-0 -translate-y-2 max-h-0"
+          >
+            <div v-if="showRules" class="overflow-hidden">
+              <div class="px-4 py-3 text-sm" :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-50'">
+                <div class="space-y-3">
+                  <!-- 签到规则 -->
+                  <div>
+                    <h4 class="font-medium text-themed mb-1.5">{{ t('checkin.rulesCheckin') }}</h4>
+                    <ul class="space-y-1 text-themed-secondary text-xs">
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-blue-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesCheckin1') }}</span>
+                      </li>
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-blue-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesCheckin2') }}</span>
+                      </li>
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-blue-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesCheckin3') }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <!-- 兑换规则 -->
+                  <div>
+                    <h4 class="font-medium text-themed mb-1.5">{{ t('checkin.rulesRedeem') }}</h4>
+                    <ul class="space-y-1 text-themed-secondary text-xs">
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-purple-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesRedeem1') }}</span>
+                      </li>
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-purple-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesRedeem2') }}</span>
+                      </li>
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-purple-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesRedeem3') }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <!-- 分享规则 -->
+                  <div>
+                    <h4 class="font-medium text-themed mb-1.5">{{ t('checkin.rulesShare') }}</h4>
+                    <ul class="space-y-1 text-themed-secondary text-xs">
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-emerald-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesShare1') }}</span>
+                      </li>
+                      <li class="flex items-start gap-1.5">
+                        <span class="text-emerald-500 mt-0.5">•</span>
+                        <span>{{ t('checkin.rulesShare2') }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+          
+          <!-- Tabs -->
+          <div class="border-b border-gray-200 dark:border-gray-700">
+            <nav class="flex -mb-px">
+              <button
+                v-for="tab in ['checkin', 'redeem', 'records'] as const"
+                :key="tab"
+                :class="[
+                  'py-3 px-4 text-sm font-medium border-b-2 transition-colors',
+                  activeTab === tab
+                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+                ]"
+                @click="activeTab = tab"
+              >
+                {{ t(`checkin.${tab}Tab`) }}
+              </button>
+            </nav>
+          </div>
+          
+          <div class="modal-body min-h-[300px] relative overflow-hidden">
+            <!-- 彩色纸屑效果 -->
+            <div v-if="confettiParticles.length > 0" class="absolute inset-0 pointer-events-none overflow-hidden z-10">
+              <div
+                v-for="p in confettiParticles"
+                :key="p.id"
+                class="confetti-particle absolute"
+                :style="{
+                  left: `${p.x}%`,
+                  animationDelay: `${p.delay}s`,
+                  backgroundColor: p.color,
+                  width: `${p.size}px`,
+                  height: `${p.size}px`
+                }"
+              />
+            </div>
+            
+            <!-- 签到 Tab -->
+            <div v-if="activeTab === 'checkin'" class="space-y-4">
+              <!-- 加载中 -->
+              <div v-if="loading" class="flex items-center justify-center py-12">
+                <div class="animate-spin h-10 w-10 border-4 border-blue-500 border-t-transparent rounded-full"></div>
+              </div>
+              
+              <!-- 已签到 - 资源已存入资源池 -->
+              <template v-else-if="checkinStatus?.hasCheckedIn">
+                <div class="text-center py-8">
+                  <div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-green-500/10">
+                    <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <p class="text-lg font-medium text-themed mb-2">{{ t('checkin.alreadyCheckedIn') }}</p>
+                  <p class="text-sm text-themed-muted">{{ t('checkin.savedToPool') }}</p>
+                </div>
+              </template>
+              
+              <!-- 未签到 - 抽奖界面 -->
+              <template v-else-if="checkinStatus">
+                <div class="flex flex-col items-center justify-center py-6">
+                  <!-- 礼盒动画区域 -->
+                  <div class="relative w-32 h-32 sm:w-40 sm:h-40 mb-6">
+                    <!-- 光晕背景 -->
+                    <div 
+                      class="absolute inset-0 rounded-full transition-all duration-500"
+                      :class="[
+                        lotteryPhase === 'idle' ? 'opacity-0 scale-90' : 'opacity-100 scale-100',
+                        lotteryPhase === 'shaking' ? 'animate-pulse bg-gradient-to-br from-amber-200/50 to-orange-300/50 dark:from-amber-500/20 dark:to-orange-600/20' : '',
+                        lotteryPhase === 'opening' || lotteryPhase === 'revealing' || lotteryPhase === 'done' ? 'bg-gradient-to-br from-amber-200/30 to-orange-300/30 dark:from-amber-500/10 dark:to-orange-600/10' : ''
+                      ]"
+                    />
+                    
+                    <!-- 礼盒图标 -->
+                    <div 
+                      class="gift-box absolute inset-0 flex items-center justify-center cursor-pointer select-none"
+                      :class="{
+                        'gift-shake': lotteryPhase === 'shaking',
+                        'gift-open': lotteryPhase === 'opening' || lotteryPhase === 'revealing' || lotteryPhase === 'done',
+                        'hover:scale-105 active:scale-95': lotteryPhase === 'idle' && checkinStatus.hasInstances && !checkinLoading
+                      }"
+                      @click="lotteryPhase === 'idle' && checkinStatus.hasInstances && !checkinLoading && doCheckin()"
+                    >
+                      <!-- 礼盒本体 -->
+                      <div v-if="lotteryPhase !== 'revealing' && lotteryPhase !== 'done'" class="relative">
+                        <div class="text-6xl sm:text-7xl transition-transform duration-300">
+                          🎁
+                        </div>
+                        <!-- 闪光效果 -->
+                        <div v-if="lotteryPhase === 'idle'" class="absolute -top-1 -right-1">
+                          <div class="w-3 h-3 bg-yellow-400 rounded-full animate-ping"></div>
+                          <div class="absolute inset-0 w-3 h-3 bg-yellow-400 rounded-full"></div>
+                        </div>
+                      </div>
+                      
+                      <!-- 开奖结果 -->
+                      <Transition
+                        enter-active-class="transition-all duration-500 ease-out"
+                        enter-from-class="opacity-0 scale-0 rotate-180"
+                        enter-to-class="opacity-100 scale-100 rotate-0"
+                      >
+                        <div 
+                          v-if="(lotteryPhase === 'revealing' || lotteryPhase === 'done') && revealedReward" 
+                          class="reward-card flex gap-3"
+                        >
+                          <!-- 资源奖励 -->
+                          <div 
+                            class="flex flex-col items-center justify-center p-3 rounded-xl flex-1"
+                            :class="getResourceBgColor(revealedReward.type)"
+                          >
+                            <svg class="w-8 h-8 mb-1" :class="getResourceColor(revealedReward.type)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="getResourceIcon(revealedReward.type)" />
+                            </svg>
+                            <div class="text-xs font-medium" :class="getResourceColor(revealedReward.type)">
+                              {{ getResourceTypeName(revealedReward.type) }}
+                            </div>
+                            <div class="text-xl font-bold" :class="getResourceColor(revealedReward.type)">
+                              +{{ revealedReward.value }}{{ getResourceUnit(revealedReward.type) }}
+                            </div>
+                          </div>
+                          <!-- 积分奖励 -->
+                          <div 
+                            class="flex flex-col items-center justify-center p-3 rounded-xl flex-1 bg-yellow-500/10"
+                          >
+                            <svg class="w-8 h-8 mb-1 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="getResourceIcon('p')" />
+                            </svg>
+                            <div class="text-xs font-medium text-yellow-500">
+                              {{ t('checkin.points') }}
+                            </div>
+                            <div class="text-xl font-bold text-yellow-500">
+                              +{{ revealedReward.bonusPoints }}
+                            </div>
+                          </div>
+                        </div>
+                      </Transition>
+                    </div>
+                  </div>
+                  
+                  <!-- 状态文字 -->
+                  <div class="text-center">
+                    <p v-if="lotteryPhase === 'idle'" class="text-base sm:text-lg text-themed-secondary mb-4">
+                      {{ checkinStatus.hasInstances ? t('checkin.clickToOpen') : t('checkin.noInstance') }}
+                    </p>
+                    <p v-else-if="lotteryPhase === 'shaking'" class="text-base sm:text-lg text-amber-500 animate-pulse">
+                      {{ t('checkin.opening') }}...
+                    </p>
+                    <p v-else-if="lotteryPhase === 'opening'" class="text-base sm:text-lg text-amber-500">
+                      {{ t('checkin.revealing') }}...
+                    </p>
+                    <p v-else-if="lotteryPhase === 'revealing' || lotteryPhase === 'done'" class="text-base sm:text-lg font-medium text-themed">
+                      {{ t('checkin.congratulations') }}
+                    </p>
+                  </div>
+                  
+                  <!-- 签到按钮（仅在 idle 状态且有实例时显示） -->
+                  <button
+                    v-if="lotteryPhase === 'idle' && checkinStatus.hasInstances"
+                    class="mt-4 btn-primary px-8 py-3 text-base sm:text-lg rounded-xl shadow-lg shadow-blue-500/25 transition-all hover:shadow-xl hover:shadow-blue-500/30 hover:-translate-y-0.5 active:translate-y-0 active:shadow-md"
+                    :disabled="checkinLoading"
+                    @click="doCheckin"
+                  >
+                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+                    </svg>
+                    {{ t('checkin.checkinButton') }}
+                  </button>
+                  
+                  <!-- 无实例提示 -->
+                  <p v-if="!checkinStatus.hasInstances" class="mt-4 text-sm text-red-500">
+                    {{ t('checkin.noInstance') }}
+                  </p>
+                </div>
+              </template>
+            </div>
+            
+            <!-- 兑换 Tab -->
+            <div v-else-if="activeTab === 'redeem'" class="space-y-4">
+              <!-- 兑换码输入 -->
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">{{ $t('checkin.redeemCode') }}</label>
+                <input
+                  v-model="redeemCodeInput"
+                  type="text"
+                  class="input font-mono"
+                  :placeholder="$t('checkin.inputCode')"
+                />
+                <p class="text-xs text-themed-muted mt-1">{{ $t('checkin.redeemHint') }}</p>
+              </div>
+              
+              <!-- 实例选择 -->
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">{{ $t('checkin.selectInstance') }}</label>
+                <!-- 无可用免费实例提示 -->
+                <div v-if="instances.length === 0" class="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/50">
+                  <div class="flex items-center gap-2">
+                    <svg class="w-5 h-5 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <span class="text-sm text-amber-700 dark:text-amber-400">{{ $t('checkin.noInstancesForRedeem') }}</span>
+                  </div>
+                </div>
+                <!-- 实例下拉选择 -->
+                <select
+                  v-else
+                  v-model="selectedInstanceId"
+                  class="input"
+                >
+                  <option :value="null">{{ $t('checkin.selectInstanceHint') }}</option>
+                  <option v-for="inst in instances" :key="inst.id" :value="inst.id">
+                    {{ inst.name }} ({{ inst.host.name }})
+                  </option>
+                </select>
+              </div>
+              
+              <!-- 选中实例的信息 -->
+              <div v-if="selectedInstanceId" class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+                <template v-for="inst in instances.filter(i => i.id === selectedInstanceId)" :key="inst.id">
+                  <div class="flex items-center gap-2 mb-2">
+                    <FlagIcon :code="inst.host.countryCode" class="w-4 h-3" />
+                    <span class="text-sm text-themed">{{ inst.host.name }}</span>
+                  </div>
+                  <div class="grid grid-cols-3 gap-2 text-xs">
+                    <div>
+                      <span class="text-themed-muted">CPU</span>
+                      <p class="text-themed">{{ inst.cpu }}%<span v-if="inst.package" class="text-themed-muted"> / {{ inst.package.cpuMax }}%</span></p>
+                    </div>
+                    <div>
+                      <span class="text-themed-muted">{{ $t('checkin.memory') }}</span>
+                      <p class="text-themed">{{ inst.memory }}MB<span v-if="inst.package" class="text-themed-muted"> / {{ inst.package.memoryMax }}MB</span></p>
+                    </div>
+                    <div>
+                      <span class="text-themed-muted">{{ $t('checkin.disk') }}</span>
+                      <p class="text-themed">{{ inst.disk }}MB<span v-if="inst.package" class="text-themed-muted"> / {{ inst.package.diskMax }}MB</span></p>
+                    </div>
+                  </div>
+                </template>
+              </div>
+              
+              <button
+                class="btn-primary w-full"
+                :disabled="redeemLoading || !redeemCodeInput.trim() || !selectedInstanceId"
+                @click="doRedeem"
+              >
+                <svg v-if="redeemLoading" class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {{ $t('checkin.redeemButton') }}
+              </button>
+            </div>
+            
+            <!-- 记录 Tab -->
+            <div v-else-if="activeTab === 'records'" class="space-y-6">
+              <!-- 签到记录 -->
+              <div>
+                <div class="flex items-center justify-between mb-3">
+                  <h4 class="text-sm font-medium text-themed">{{ t('checkin.checkinRecords') }}</h4>
+                  <span v-if="checkinTotal > 5" class="text-xs text-themed-muted">{{ t('checkin.showingRecent', { count: 5, total: checkinTotal }) }}</span>
+                </div>
+                <div v-if="checkinRecords.length === 0" class="text-center py-4 text-themed-secondary text-sm">
+                  {{ t('checkin.noRecords') }}
+                </div>
+                <div v-else class="space-y-2 max-h-48 overflow-y-auto">
+                  <div
+                    v-for="record in checkinRecords"
+                    :key="record.id"
+                    class="p-3 rounded-lg text-sm"
+                    :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                  >
+                    <div class="flex items-center justify-between mb-2">
+                      <code class="font-mono text-xs">{{ record.redeemCode }}</code>
+                      <span class="text-xs text-themed-muted">{{ formatDate(record.createdAt) }}</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                      <span class="text-themed">{{ getResourceTypeName(record.codeType) }} +{{ record.codeValue }}{{ getResourceUnit(record.codeType) }}</span>
+                      <span v-if="record.usedAt" class="text-xs text-green-500">
+                        {{ record.usedBy ? record.usedBy.username : t('checkin.self') }}
+                      </span>
+                      <span v-else-if="new Date(record.expiresAt) < new Date()" class="text-xs text-red-500">
+                        {{ t('checkin.codeExpired') }}
+                      </span>
+                      <span v-else class="text-xs text-orange-500">
+                        {{ t('checkin.unused') }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 兑换记录 -->
+              <div>
+                <div class="flex items-center justify-between mb-3">
+                  <h4 class="text-sm font-medium text-themed">{{ t('checkin.redeemRecords') }}</h4>
+                  <span v-if="redeemTotal > 5" class="text-xs text-themed-muted">{{ t('checkin.showingRecent', { count: 5, total: redeemTotal }) }}</span>
+                </div>
+                <div v-if="redeemRecords.length === 0" class="text-center py-4 text-themed-secondary text-sm">
+                  {{ t('checkin.noRecords') }}
+                </div>
+                <div v-else class="space-y-2 max-h-48 overflow-y-auto">
+                  <div
+                    v-for="record in redeemRecords"
+                    :key="record.id"
+                    class="p-3 rounded-lg text-sm"
+                    :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                  >
+                    <div class="flex items-center justify-between mb-2">
+                      <div class="flex items-center gap-2">
+                        <code class="font-mono text-xs">{{ record.redeemCode }}</code>
+                        <span 
+                          v-if="record.isSystemCode" 
+                          class="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400"
+                        >
+                          → {{ record.owner.username }}
+                        </span>
+                      </div>
+                      <span class="text-xs text-themed-muted">{{ record.usedAt ? formatDate(record.usedAt) : '' }}</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                      <span class="text-themed">{{ getResourceTypeName(record.codeType) }} +{{ record.codeValue }}{{ getResourceUnit(record.codeType) }}</span>
+                      <span v-if="record.usedFor" class="text-xs text-blue-500">
+                        → {{ record.usedFor.name }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn-secondary" @click="close">{{ t('common.close') }}</button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* 礼盒摇晃动画 */
+.gift-shake {
+  animation: shake 0.15s ease-in-out infinite;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  25% { transform: translateX(-5px) rotate(-5deg); }
+  75% { transform: translateX(5px) rotate(5deg); }
+}
+
+/* 礼盒打开动画 */
+.gift-open {
+  animation: bounce-out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+
+@keyframes bounce-out {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.2); }
+  100% { transform: scale(0); opacity: 0; }
+}
+
+/* 奖励卡片动画 */
+.reward-card {
+  animation: reward-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@keyframes reward-appear {
+  0% { transform: scale(0) rotate(180deg); opacity: 0; }
+  100% { transform: scale(1) rotate(0deg); opacity: 1; }
+}
+
+/* 彩色纸屑动画 */
+.confetti-particle {
+  border-radius: 2px;
+  animation: confetti-fall 3s ease-out forwards;
+  top: -10px;
+}
+
+@keyframes confetti-fall {
+  0% {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(350px) rotate(720deg) scale(0.5);
+    opacity: 0;
+  }
+}
+
+/* Q弹效果 */
+.gift-box {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+</style>
diff --git a/client/src/components/FlagIcon.vue b/client/src/components/FlagIcon.vue
new file mode 100644
index 0000000..ffd0814
--- /dev/null
+++ b/client/src/components/FlagIcon.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { normalizeCountryCodeForFlag } from '@/utils/countryDisplay'
+
+/**
+ * 国旗图标组件
+ * 使用 flag-icons 库，本地 SVG 国旗，无需网络请求
+ */
+
+interface Props {
+  code: string
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'sm'
+})
+
+// 尺寸映射
+const sizeClasses = {
+  xs: 'w-4 h-3',
+  sm: 'w-5 h-4',
+  md: 'w-6 h-4',
+  lg: 'w-8 h-6'
+}
+
+// 生成 flag-icons 类名
+const resolvedCode = computed(() => normalizeCountryCodeForFlag(props.code))
+const flagClass = computed(() => `fi fi-${resolvedCode.value}`)
+</script>
+
+<template>
+  <span 
+    :class="[flagClass, sizeClasses[size], 'inline-block bg-cover bg-center rounded-sm']"
+    :title="resolvedCode.toUpperCase()"
+  ></span>
+</template>
diff --git a/client/src/components/InstanceDisplayIcon.vue b/client/src/components/InstanceDisplayIcon.vue
new file mode 100644
index 0000000..1b2504c
--- /dev/null
+++ b/client/src/components/InstanceDisplayIcon.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import BadgeImage from '@/components/BadgeImage.vue'
+
+const props = withDefaults(defineProps<{
+  badgeId?: string | null
+  fallbackIcon?: 'pro' | 'prime' | 'peer' | null
+  size?: number
+  alt?: string
+}>(), {
+  badgeId: null,
+  fallbackIcon: null,
+  size: 32,
+  alt: ''
+})
+</script>
+
+<template>
+  <BadgeImage
+    v-if="badgeId"
+    :badge-id="badgeId"
+    :alt="alt || badgeId"
+    :size="size"
+    variant="icon"
+  />
+  <img
+    v-else-if="fallbackIcon"
+    :src="`/icons/${fallbackIcon}.svg`"
+    :alt="alt || fallbackIcon"
+    class="rounded-xl shrink-0"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  />
+</template>
diff --git a/client/src/components/InstanceSelector.vue b/client/src/components/InstanceSelector.vue
new file mode 100644
index 0000000..17e3c31
--- /dev/null
+++ b/client/src/components/InstanceSelector.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import FlagIcon from './FlagIcon.vue'
+import InstanceDisplayIcon from './InstanceDisplayIcon.vue'
+
+interface Instance {
+  id: number
+  name: string
+  status: string
+  iconBadgeId?: string | null
+  instanceType: 'vm' | 'container'
+  host: {
+    id: number
+    name: string
+    location: string | null
+    countryCode: string
+  }
+}
+
+const props = defineProps<{
+  modelValue: number | null
+  instances: Instance[]
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number | null): void
+}>()
+
+const { t } = useI18n()
+
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+
+// 当前选中的实例
+const selectedInstance = computed(() => {
+  if (props.modelValue === null) return null
+  return props.instances.find(inst => inst.id === props.modelValue) || null
+})
+
+// 获取图标类型
+function getIconType(instance: Instance): 'prime' | 'pro' | 'peer' {
+  // 如果节点名称以 PEER 开头（不区分大小写），则是托管实例，显示 peer 图标
+  const hostName = instance.host?.name || ''
+  if (/^PEER\d/i.test(hostName)) {
+    return 'peer'
+  }
+  return instance.instanceType === 'vm' ? 'prime' : 'pro'
+}
+
+// 选择实例
+function selectInstance(instance: Instance | null) {
+  emit('update:modelValue', instance?.id ?? null)
+  isOpen.value = false
+}
+
+// 切换下拉状态
+function toggleDropdown() {
+  isOpen.value = !isOpen.value
+}
+
+// 点击外部关闭
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="dropdownRef" class="relative" :class="isOpen ? 'z-[90]' : 'z-10'">
+    <!-- 触发器 -->
+    <button
+      type="button"
+      class="input w-full flex items-center justify-between gap-2 text-left transition-all duration-200"
+      :class="{ 'ring-2 ring-blue-500': isOpen }"
+      @click="toggleDropdown"
+    >
+      <!-- 已选中状态 -->
+      <div v-if="selectedInstance" class="flex items-center gap-2 min-w-0 flex-1">
+        <InstanceDisplayIcon
+          :badge-id="selectedInstance.iconBadgeId"
+          :fallback-icon="getIconType(selectedInstance)"
+          :alt="selectedInstance.name"
+          :size="20"
+        />
+        <span class="truncate text-themed">{{ selectedInstance.name }}</span>
+        <span class="text-themed-muted text-sm hidden sm:inline">·</span>
+        <span class="text-themed-muted text-sm truncate hidden sm:inline">
+          {{ selectedInstance.host.location || selectedInstance.host.name }}
+        </span>
+      </div>
+      <!-- 未选中状态 -->
+      <span v-else class="text-themed-muted">{{ placeholder || t('checkin.selectInstance') }}</span>
+      <!-- 箭头图标 -->
+      <svg 
+        class="w-4 h-4 text-themed-muted flex-shrink-0 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+
+    <!-- 下拉列表 -->
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0 scale-95 -translate-y-1"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100 scale-100 translate-y-0"
+      leave-to-class="opacity-0 scale-95 -translate-y-1"
+    >
+      <div 
+        v-show="isOpen"
+        class="absolute z-[100] mt-1 w-full bg-themed border border-themed rounded-lg shadow-2xl overflow-hidden"
+      >
+        <div class="max-h-80 overflow-y-auto">
+          <!-- 空选项 -->
+          <button
+            type="button"
+            class="w-full px-3 py-2.5 text-left text-themed-muted hover:bg-themed-hover transition-colors duration-150"
+            @click="selectInstance(null)"
+          >
+            {{ placeholder || t('checkin.selectInstance') }}
+          </button>
+          
+          <!-- 实例列表 -->
+          <button
+            v-for="instance in instances"
+            :key="instance.id"
+            type="button"
+            class="w-full px-3 py-2.5 text-left transition-all duration-150 group"
+            :class="[
+              modelValue === instance.id 
+                ? 'bg-blue-500/10 dark:bg-blue-500/20' 
+                : 'hover:bg-themed-hover'
+            ]"
+            @click="selectInstance(instance)"
+          >
+            <div class="flex items-center gap-2.5">
+              <!-- 图标 -->
+              <div class="transition-transform duration-200 group-hover:scale-110">
+                <InstanceDisplayIcon
+                  :badge-id="instance.iconBadgeId"
+                  :fallback-icon="getIconType(instance)"
+                  :alt="instance.name"
+                  :size="32"
+                />
+              </div>
+              <!-- 信息 -->
+              <div class="min-w-0 flex-1">
+                <!-- 实例名称 -->
+                <div 
+                  class="font-medium truncate transition-colors duration-150"
+                  :class="modelValue === instance.id ? 'text-blue-600 dark:text-blue-400' : 'text-themed'"
+                >
+                  {{ instance.name }}
+                </div>
+                <!-- 节点信息 -->
+                <div class="flex items-center gap-1.5 text-xs text-themed-muted mt-0.5">
+                  <FlagIcon :code="instance.host.countryCode" size="xs" />
+                  <span class="truncate">{{ instance.host.location || instance.host.name }}</span>
+                </div>
+              </div>
+              <!-- 选中标记 -->
+              <svg 
+                v-if="modelValue === instance.id"
+                class="w-4 h-4 text-blue-500 flex-shrink-0"
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/client/src/components/LazyImage.vue b/client/src/components/LazyImage.vue
new file mode 100644
index 0000000..53cd34f
--- /dev/null
+++ b/client/src/components/LazyImage.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * 懒加载图片组件
+ * 使用 IntersectionObserver 实现真正的懒加载
+ * 支持占位符、加载状态和错误处理
+ */
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+
+interface Props {
+  src: string
+  alt?: string
+  placeholder?: string  // 占位符图片或 base64
+  width?: number | string
+  height?: number | string
+  class?: string
+  rootMargin?: string  // 预加载距离
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  placeholder: '',
+  rootMargin: '200px'  // 提前 200px 开始加载
+})
+
+const imgRef = ref<HTMLImageElement | null>(null)
+const isLoaded = ref(false)
+const hasError = ref(false)
+const isVisible = ref(false)
+
+let observer: IntersectionObserver | null = null
+
+function handleLoad() {
+  isLoaded.value = true
+}
+
+function handleError() {
+  hasError.value = true
+}
+
+function setupObserver() {
+  if (!imgRef.value || typeof IntersectionObserver === 'undefined') {
+    // 不支持 IntersectionObserver 时直接加载
+    isVisible.value = true
+    return
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting) {
+        isVisible.value = true
+        observer?.disconnect()
+      }
+    },
+    { rootMargin: props.rootMargin }
+  )
+
+  observer.observe(imgRef.value)
+}
+
+onMounted(() => {
+  setupObserver()
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+
+// 当 src 变化时重置状态
+watch(() => props.src, () => {
+  isLoaded.value = false
+  hasError.value = false
+})
+</script>
+
+<template>
+  <img
+    ref="imgRef"
+    :src="isVisible ? src : placeholder"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :class="[
+      props.class,
+      {
+        'opacity-0': !isLoaded && isVisible,
+        'transition-opacity duration-300': true
+      }
+    ]"
+    @load="handleLoad"
+    @error="handleError"
+  />
+</template>
diff --git a/client/src/components/LoadingSpinner.vue b/client/src/components/LoadingSpinner.vue
new file mode 100644
index 0000000..e864aec
--- /dev/null
+++ b/client/src/components/LoadingSpinner.vue
@@ -0,0 +1,61 @@
+<template>
+  <svg
+    :class="[
+      'animate-spin',
+      sizeClass,
+      colorClass
+    ]"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'primary' | 'white' | 'muted' | 'current'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  color: 'current'
+})
+
+const sizeClass = computed(() => {
+  const sizes: Record<string, string> = {
+    xs: 'w-3 h-3',
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+    xl: 'w-8 h-8'
+  }
+  return sizes[props.size]
+})
+
+const colorClass = computed(() => {
+  const colors: Record<string, string> = {
+    primary: 'text-primary',
+    white: 'text-white',
+    muted: 'text-themed-muted',
+    current: ''  // 继承父元素颜色
+  }
+  return colors[props.color]
+})
+</script>
diff --git a/client/src/components/NotificationBell.vue b/client/src/components/NotificationBell.vue
new file mode 100644
index 0000000..e5f77d5
--- /dev/null
+++ b/client/src/components/NotificationBell.vue
@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useInboxStore } from '@/stores/inbox'
+import { formatRelativeTime } from '@/utils/formatters'
+import {
+  getMessageCategory,
+  getCategoryColorClass,
+  getMessageRoute,
+  canNavigate
+} from '@/utils/inboxHelper'
+import type { InboxMessage } from '@/types/api'
+import api from '@/api'
+
+const router = useRouter()
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const inboxStore = useInboxStore()
+
+// 下拉面板状态
+const isOpen = ref(false)
+const panelRef = ref<HTMLElement | null>(null)
+
+// 最近消息列表
+const recentMessages = ref<InboxMessage[]>([])
+const loading = ref(false)
+
+// 未读数量
+const unreadCount = computed(() => inboxStore.unreadCount)
+
+// 打开/关闭下拉面板
+function togglePanel() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    loadRecentMessages()
+  }
+}
+
+// 加载最近消息
+async function loadRecentMessages() {
+  loading.value = true
+  try {
+    const res = await api.inbox.list({ page: 1, pageSize: 5 })
+    recentMessages.value = res.messages
+  } catch {
+    // 静默失败
+  } finally {
+    loading.value = false
+  }
+}
+
+// 点击消息
+async function handleMessageClick(message: InboxMessage) {
+  if (!message.isRead) {
+    try {
+      await api.inbox.markAsRead(message.id)
+      message.isRead = true
+      inboxStore.decrementUnread()
+    } catch {
+      // 静默失败
+    }
+  }
+  isOpen.value = false
+  
+  // 根据消息类型跳转
+  const targetRoute = getMessageRoute(message)
+  if (targetRoute) {
+    router.push(targetRoute)
+  } else {
+    router.push('/inbox')
+  }
+}
+
+// 获取消息的类别标签颜色
+function getTagColorClass(message: InboxMessage): string {
+  const category = getMessageCategory(message.eventType)
+  return getCategoryColorClass(category, themeStore.isDark)
+}
+
+// 获取消息类别标签文本
+function getCategoryLabel(message: InboxMessage): string {
+  const category = getMessageCategory(message.eventType)
+  return t(`inbox.categories.${category}`)
+}
+
+// 全部标记已读
+async function markAllAsRead() {
+  try {
+    await api.inbox.markAllAsRead()
+    recentMessages.value.forEach(m => m.isRead = true)
+    inboxStore.clearUnread()
+  } catch {
+    // 静默失败
+  }
+}
+
+// 查看全部
+function viewAll() {
+  isOpen.value = false
+  router.push('/inbox')
+}
+
+// 点击外部关闭
+function handleClickOutside(event: MouseEvent) {
+  if (panelRef.value && !panelRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+// 格式化时间
+function formatTime(dateStr: string): string {
+  return formatRelativeTime(dateStr, t)
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="panelRef" class="relative">
+    <!-- 铃铛按钮 -->
+    <button
+      class="relative p-1.5 rounded transition-colors touch-target"
+      :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'"
+      :aria-label="t('inbox.notifications')"
+      @click.stop="togglePanel"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+      </svg>
+      <!-- 未读红点 -->
+      <span
+        v-if="unreadCount > 0"
+        class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 flex items-center justify-center text-[10px] font-medium text-white bg-red-500 rounded-full animate-pulse"
+      >
+        {{ unreadCount > 99 ? '99+' : unreadCount }}
+      </span>
+    </button>
+
+    <!-- 下拉面板 -->
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        class="fixed sm:absolute left-0 right-0 sm:left-auto sm:right-0 top-14 sm:top-auto sm:mt-2 sm:w-80 sm:rounded-lg shadow-xl py-2 z-50 border-y sm:border"
+        :class="themeStore.isDark ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'"
+      >
+        <!-- 标题栏 -->
+        <div class="flex items-center justify-between px-4 pb-2 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+          <span class="font-medium text-sm" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'">
+            {{ t('inbox.notifications') }}
+          </span>
+          <button
+            v-if="unreadCount > 0"
+            class="text-xs transition-colors"
+            :class="themeStore.isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'"
+            @click="markAllAsRead"
+          >
+            {{ t('inbox.markAllRead') }}
+          </button>
+        </div>
+
+        <!-- 消息列表 -->
+        <div class="max-h-80 overflow-y-auto">
+          <!-- 加载中 -->
+          <div v-if="loading" class="py-8 text-center">
+            <svg class="animate-spin h-5 w-5 mx-auto" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </div>
+
+          <!-- 无消息 -->
+          <div v-else-if="recentMessages.length === 0" class="py-8 text-center">
+            <svg class="w-10 h-10 mx-auto mb-2" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+            </svg>
+            <p class="text-sm" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+              {{ t('inbox.noMessages') }}
+            </p>
+          </div>
+
+          <!-- 消息项 -->
+          <template v-else>
+            <button
+              v-for="message in recentMessages"
+              :key="message.id"
+              class="w-full px-4 py-3 text-left transition-colors"
+              :class="[
+                themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50',
+                !message.isRead ? (themeStore.isDark ? 'bg-gray-800/50' : 'bg-blue-50/50') : ''
+              ]"
+              @click="handleMessageClick(message)"
+            >
+              <div class="flex items-start gap-3">
+                <!-- 未读标记 -->
+                <div class="flex-shrink-0 mt-1.5">
+                  <span
+                    v-if="!message.isRead"
+                    class="block w-2 h-2 rounded-full bg-blue-500"
+                  ></span>
+                  <span
+                    v-else
+                    class="block w-2 h-2"
+                  ></span>
+                </div>
+                <!-- 内容 -->
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-1.5 mb-0.5">
+                    <!-- 类别标签 -->
+                    <span
+                      class="px-1 py-0.5 text-[9px] font-medium rounded flex-shrink-0"
+                      :class="getTagColorClass(message)"
+                    >
+                      {{ getCategoryLabel(message) }}
+                    </span>
+                  </div>
+                  <p class="text-sm font-medium truncate" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'">
+                    {{ message.title }}
+                  </p>
+                  <p class="text-xs truncate mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                    {{ message.content }}
+                  </p>
+                  <div class="flex items-center gap-1 mt-1">
+                    <p class="text-xs" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">
+                      {{ formatTime(message.createdAt) }}
+                    </p>
+                    <!-- 可跳转标识 -->
+                    <svg
+                      v-if="canNavigate(message)"
+                      class="w-3 h-3"
+                      :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </button>
+          </template>
+        </div>
+
+        <!-- 底部 -->
+        <div class="pt-2 border-t" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+          <button
+            class="w-full py-2 text-center text-sm transition-colors"
+            :class="themeStore.isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'"
+            @click="viewAll"
+          >
+            {{ t('inbox.viewAll') }}
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/client/src/components/PackageQuotaReleaseModal.vue b/client/src/components/PackageQuotaReleaseModal.vue
new file mode 100644
index 0000000..96bc0c8
--- /dev/null
+++ b/client/src/components/PackageQuotaReleaseModal.vue
@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+
+const props = defineProps<{
+  visible: boolean
+  packageId: number
+  packageName: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'success'): void
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 数据
+interface HostDetail {
+  id: number
+  name: string
+  countryCode: string
+  cpuAllowanceMax: number
+  memoryMax: number
+  cpuUsed: number
+  memoryUsed: number
+}
+
+interface GlobalChannel {
+  id: number
+  name: string
+  type: string
+}
+
+const hosts = ref<HostDetail[]>([])
+const globalChannel = ref<GlobalChannel | null>(null)
+const packageCpuMax = ref(0)
+const packageMemoryMax = ref(0)
+const loading = ref(false)
+const submitting = ref(false)
+
+// 选中的宿主机
+const selectedHostIds = ref<number[]>([])
+
+// 是否发送通知复选框
+const notifyEnabled = ref(true)
+
+// CPU和内存增量
+const cpuAddInput = ref(50)
+const memoryAddInput = ref(64)
+
+// 快捷选项
+const cpuPresets = [50, 100, 200, 400]
+const memoryPresets = [64, 128, 256, 512]
+
+// 格式化内存
+function formatMemory(mb: number): string {
+  if (!mb) return '0 MB'
+  if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
+  return mb + ' MB'
+}
+
+// 加载数据
+async function loadData() {
+  if (!props.packageId) return
+  loading.value = true
+  try {
+    const [detailRes, channelsRes] = await Promise.all([
+      api.packages.getHostsDetail(props.packageId),
+      api.notifications.getGlobalChannels()
+    ])
+    
+    hosts.value = detailRes.hosts || []
+    packageCpuMax.value = detailRes.cpuMax
+    packageMemoryMax.value = detailRes.memoryMax
+    // 获取全局通知渠道（取第一个）
+    const channels = channelsRes.channels || []
+    globalChannel.value = channels.length > 0 ? channels[0] : null
+    // 如果有全局渠道，默认勾选"发送通知"
+    notifyEnabled.value = !!globalChannel.value
+    
+    // 默认全选所有宿主机
+    selectedHostIds.value = hosts.value.map(h => h.id)
+  } catch (err: any) {
+    toast.error(err.message || t('quotaRelease.loadFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+// 切换宿主机选中状态
+function toggleHost(hostId: number) {
+  const index = selectedHostIds.value.indexOf(hostId)
+  if (index === -1) {
+    selectedHostIds.value.push(hostId)
+  } else {
+    selectedHostIds.value.splice(index, 1)
+  }
+}
+
+// 全选/取消全选
+function toggleAll() {
+  if (selectedHostIds.value.length === hosts.value.length) {
+    selectedHostIds.value = []
+  } else {
+    selectedHostIds.value = hosts.value.map(h => h.id)
+  }
+}
+
+// 释放配额
+async function releaseQuota() {
+  if (selectedHostIds.value.length === 0) {
+    toast.error(t('quotaRelease.selectHost'))
+    return
+  }
+  if (cpuAddInput.value <= 0 && memoryAddInput.value <= 0) {
+    toast.error(t('quotaRelease.enterQuota'))
+    return
+  }
+  
+  submitting.value = true
+  try {
+    const res = await api.packages.releaseQuota(props.packageId, {
+      hostIds: selectedHostIds.value,
+      cpuAdd: cpuAddInput.value,
+      memoryAdd: memoryAddInput.value,
+      notify: notifyEnabled.value && !!globalChannel.value
+    })
+    
+    toast.success(t('quotaRelease.success', { count: res.results.length }))
+    emit('success')
+    emit('close')
+  } catch (err: any) {
+    toast.error(err.message || t('quotaRelease.failed'))
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 监听弹窗显示
+watch(() => props.visible, (val) => {
+  if (val) {
+    loadData()
+  } else {
+    // 重置状态
+    selectedHostIds.value = []
+    cpuAddInput.value = 50
+    memoryAddInput.value = 64
+    notifyEnabled.value = true
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay">
+        <div class="modal-backdrop" @click="emit('close')"></div>
+        <div class="modal-content max-w-2xl">
+          <div class="modal-header">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-teal-500/20' : 'bg-teal-100'">
+                <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-teal-400' : 'text-teal-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+              </div>
+              <div>
+                <h3 class="modal-title">{{ t('quotaRelease.title') }}</h3>
+                <p class="text-xs text-themed-muted mt-0.5">{{ packageName }}</p>
+              </div>
+            </div>
+            <button class="p-1.5 rounded-lg transition-colors" :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'" @click="emit('close')">
+              <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <SkeletonLoader v-if="loading" type="card" />
+            
+            <template v-else>
+              <!-- 套餐配额信息 -->
+              <div class="mb-4 p-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-50'">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="text-themed-muted">{{ t('quotaRelease.packageQuota') }}</span>
+                  <span class="font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">
+                    {{ packageCpuMax }}% CPU · {{ formatMemory(packageMemoryMax) }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 无宿主机 -->
+              <div v-if="hosts.length === 0" class="text-center py-10">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                  <svg class="w-8 h-8" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+                  </svg>
+                </div>
+                <p class="text-themed-secondary font-medium">{{ t('quotaRelease.noHosts') }}</p>
+                <p class="text-xs text-themed-muted mt-1">{{ t('quotaRelease.noHostsHint') }}</p>
+              </div>
+
+              <template v-else>
+                <!-- 选择宿主机 -->
+                <div class="mb-4">
+                  <div class="flex items-center justify-between mb-2">
+                    <label class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('quotaRelease.selectHosts') }}
+                    </label>
+                    <button 
+                      type="button"
+                      class="text-xs px-2 py-1 rounded transition-colors"
+                      :class="themeStore.isDark ? 'text-blue-400 hover:bg-gray-800' : 'text-blue-600 hover:bg-gray-100'"
+                      @click="toggleAll"
+                    >
+                      {{ selectedHostIds.length === hosts.length ? t('quotaRelease.deselectAll') : t('quotaRelease.selectAll') }}
+                    </button>
+                  </div>
+                  
+                  <div class="space-y-2 max-h-48 overflow-y-auto">
+                    <button
+                      v-for="host in hosts"
+                      :key="host.id"
+                      type="button"
+                      class="w-full flex items-center gap-3 p-3 rounded-xl border transition-all text-left"
+                      :class="[
+                        selectedHostIds.includes(host.id)
+                          ? themeStore.isDark
+                            ? 'border-teal-500 bg-teal-500/10 ring-1 ring-teal-500/30'
+                            : 'border-teal-500 bg-teal-50 ring-1 ring-teal-200'
+                          : themeStore.isDark
+                            ? 'border-gray-700 hover:border-gray-600 hover:bg-gray-800/50'
+                            : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
+                      ]"
+                      @click="toggleHost(host.id)"
+                    >
+                      <!-- 复选框 -->
+                      <div
+                        class="w-5 h-5 rounded border-2 flex items-center justify-center flex-shrink-0 transition-colors"
+                        :class="[
+                          selectedHostIds.includes(host.id)
+                            ? 'border-teal-500 bg-teal-500'
+                            : themeStore.isDark
+                              ? 'border-gray-600'
+                              : 'border-gray-300'
+                        ]"
+                      >
+                        <svg v-if="selectedHostIds.includes(host.id)" class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                      </div>
+                      
+                      <!-- 国旗 -->
+                      <FlagIcon :code="host.countryCode" size="sm" />
+                      
+                      <!-- 宿主机信息 -->
+                      <div class="flex-1 min-w-0">
+                        <div class="font-medium truncate" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                          {{ host.name }}
+                        </div>
+                        <div class="text-xs text-themed-muted">
+                          {{ t('quotaRelease.available') }}: {{ host.cpuAllowanceMax - host.cpuUsed }}% CPU · {{ formatMemory(host.memoryMax - host.memoryUsed) }}
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+
+                <!-- 增量配置 -->
+                <div class="mb-4 p-4 rounded-xl border" :class="themeStore.isDark ? 'border-gray-700 bg-gray-800/30' : 'border-gray-200 bg-gray-50/50'">
+                  <h4 class="text-sm font-medium mb-3" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('quotaRelease.quotaToAdd') }}
+                  </h4>
+                  
+                  <div class="grid grid-cols-2 gap-4">
+                    <!-- CPU -->
+                    <div>
+                      <label class="block text-xs text-themed-muted mb-1.5">CPU (%)</label>
+                      <input 
+                        v-model.number="cpuAddInput" 
+                        type="number" 
+                        class="input text-sm w-full mb-2"
+                        min="10"
+                        step="5"
+                      />
+                      <div class="flex flex-wrap gap-1">
+                        <button
+                          v-for="preset in cpuPresets"
+                          :key="preset"
+                          type="button"
+                          class="px-2 py-1 text-xs rounded transition-colors"
+                          :class="[
+                            cpuAddInput === preset
+                              ? themeStore.isDark ? 'bg-teal-500/20 text-teal-400' : 'bg-teal-100 text-teal-600'
+                              : themeStore.isDark ? 'bg-gray-700 text-gray-400 hover:bg-gray-600' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
+                          ]"
+                          @click="cpuAddInput = preset"
+                        >
+                          +{{ preset }}%
+                        </button>
+                      </div>
+                    </div>
+                    
+                    <!-- 内存 -->
+                    <div>
+                      <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.packages.memory') }} (MB)</label>
+                      <input 
+                        v-model.number="memoryAddInput" 
+                        type="number" 
+                        class="input text-sm w-full mb-2"
+                        min="32"
+                        step="32"
+                      />
+                      <div class="flex flex-wrap gap-1">
+                        <button
+                          v-for="preset in memoryPresets"
+                          :key="preset"
+                          type="button"
+                          class="px-2 py-1 text-xs rounded transition-colors"
+                          :class="[
+                            memoryAddInput === preset
+                              ? themeStore.isDark ? 'bg-teal-500/20 text-teal-400' : 'bg-teal-100 text-teal-600'
+                              : themeStore.isDark ? 'bg-gray-700 text-gray-400 hover:bg-gray-600' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
+                          ]"
+                          @click="memoryAddInput = preset"
+                        >
+                          +{{ formatMemory(preset) }}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 预览 -->
+                  <div v-if="selectedHostIds.length > 0" class="mt-4 pt-3 border-t" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                    <div class="text-xs text-themed-muted">
+                      {{ t('quotaRelease.preview', { count: selectedHostIds.length, cpu: cpuAddInput, memory: formatMemory(memoryAddInput) }) }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <!-- 通知设置 -->
+              <div class="p-4 rounded-xl border" :class="[themeStore.isDark ? 'border-gray-700 bg-gray-800/30' : 'border-gray-200 bg-gray-50/50', hosts.length === 0 ? 'mt-4' : '']">
+                <div class="flex items-center gap-2 mb-3">
+                  <svg class="w-4 h-4" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                  </svg>
+                  <h4 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('quotaRelease.notificationChannel') }}
+                  </h4>
+                </div>
+                
+                <template v-if="globalChannel">
+                  <!-- 是否发送通知复选框 -->
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input 
+                      v-model="notifyEnabled" 
+                      type="checkbox" 
+                      class="w-4 h-4 rounded border-2 transition-colors"
+                      :class="[
+                        notifyEnabled
+                          ? 'border-teal-500 bg-teal-500 text-white'
+                          : themeStore.isDark
+                            ? 'border-gray-600 bg-transparent'
+                            : 'border-gray-300 bg-transparent'
+                      ]"
+                    />
+                    <span class="text-sm" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('quotaRelease.sendNotification') }}
+                    </span>
+                    <span class="text-xs text-themed-muted">
+                      ({{ globalChannel.name }})
+                    </span>
+                  </label>
+                </template>
+                <template v-else>
+                  <div class="text-sm py-2 px-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800 text-gray-500' : 'bg-gray-100 text-gray-400'">
+                    {{ t('quotaRelease.noGlobalChannel') }}
+                  </div>
+                  <p class="text-xs text-themed-muted mt-1.5">{{ t('quotaRelease.noGlobalChannelHint') }}</p>
+                </template>
+              </div>
+            </template>
+          </div>
+
+          <div class="modal-footer">
+            <button class="btn-secondary" @click="emit('close')">{{ t('common.cancel') }}</button>
+            <button
+              :disabled="submitting || hosts.length === 0 || selectedHostIds.length === 0"
+              class="btn-primary"
+              @click="releaseQuota"
+            >
+              <span v-if="submitting" class="loading-spinner w-4 h-4"></span>
+              <template v-else>
+                <svg 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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                {{ t('quotaRelease.confirm') }}
+              </template>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/PopupAnnouncementModal.vue b/client/src/components/PopupAnnouncementModal.vue
new file mode 100644
index 0000000..4fa9c3f
--- /dev/null
+++ b/client/src/components/PopupAnnouncementModal.vue
@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import { formatDisk, formatMemory } from '@/utils/formatters'
+
+const FOREVER_KEY = 'incudal.popupAnnouncement.dismissedForever'
+const TODAY_KEY = 'incudal.popupAnnouncement.dismissedToday'
+
+const { t } = useI18n()
+const router = useRouter()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+const visible = ref(false)
+const promoImageFailed = ref(false)
+const promoLightboxOpen = ref(false)
+
+const announcementText = computed(() => configStore.popupAnnouncement?.trim() || '')
+const promoImageUrl = computed(() => configStore.popupPromoImageUrl?.trim() || '')
+const promoPackage = computed(() => configStore.popupPromoPackage)
+const hasPromo = computed(() => Boolean(promoImageUrl.value && promoPackage.value))
+const promoPlans = computed(() => promoPackage.value?.plans || [])
+const promoAvailablePlans = computed(() => promoPlans.value.filter(plan => !plan.isSoldOut))
+const promoDisplayPlans = computed(() => {
+  const plans = promoAvailablePlans.value.length > 0 ? promoAvailablePlans.value : promoPlans.value
+  return plans.slice(0, 3)
+})
+const announcementId = computed(() => {
+  if (hasPromo.value && promoPackage.value) {
+    const payload = `${promoImageUrl.value}:${promoPackage.value.id}:${promoPackage.value.name}`
+    return `promo:${configStore.popupPromoUpdatedAt || createFallbackHash(payload)}`
+  }
+  if (!announcementText.value) return ''
+  return `text:${configStore.popupAnnouncementUpdatedAt || createFallbackHash(announcementText.value)}`
+})
+const legacyTextAnnouncementId = computed(() => {
+  if (hasPromo.value || !announcementText.value) return ''
+  return configStore.popupAnnouncementUpdatedAt || createFallbackHash(announcementText.value)
+})
+
+function createFallbackHash(value: string): string {
+  let hash = 0
+  for (let i = 0; i < value.length; i += 1) {
+    hash = ((hash << 5) - hash + value.charCodeAt(i)) | 0
+  }
+  return `${value.length}-${Math.abs(hash).toString(36)}`
+}
+
+function todayString(): string {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const day = String(now.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function readStorage(key: string): string | null {
+  try {
+    return localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+function writeStorage(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value)
+  } catch {
+    // Ignore storage failures. The modal can still be dismissed for this session.
+  }
+}
+
+function formatPromoPrice(cents: number): string {
+  return (cents / 100).toFixed(2)
+}
+
+function formatPromoTraffic(bytes: string): string {
+  if (!bytes || bytes === '0') return t('common.unlimited')
+  const value = BigInt(bytes)
+  const tb = BigInt(1024 * 1024 * 1024 * 1024)
+  const gb = BigInt(1024 * 1024 * 1024)
+  if (value >= tb) {
+    return `${(Number(value) / (1024 * 1024 * 1024 * 1024)).toFixed(1)} TB`
+  }
+  if (value >= gb) {
+    return `${(Number(value) / (1024 * 1024 * 1024)).toFixed(0)} GB`
+  }
+  return `${(Number(value) / (1024 * 1024)).toFixed(0)} MB`
+}
+
+function getPromoBillingCycleLabel(months: number): string {
+  if (months === 1) return t('billing.cycle.monthly')
+  if (months === 3) return t('billing.cycle.quarterly')
+  if (months === 6) return t('billing.cycle.semiAnnual')
+  if (months === 12) return t('billing.cycle.annual')
+  return `${months} ${t('billing.cycle.months')}`
+}
+
+function shouldShowAnnouncement(): boolean {
+  const currentId = announcementId.value
+  if (
+    !authStore.isAuthenticated ||
+    !authStore.user ||
+    !configStore.loaded ||
+    (!hasPromo.value && !announcementText.value) ||
+    !currentId
+  ) {
+    return false
+  }
+
+  if (readStorage(FOREVER_KEY) === currentId) {
+    return false
+  }
+
+  if (readStorage(TODAY_KEY) === `${currentId}:${todayString()}`) {
+    return false
+  }
+
+  const legacyId = legacyTextAnnouncementId.value
+  if (legacyId && (readStorage(FOREVER_KEY) === legacyId || readStorage(TODAY_KEY) === `${legacyId}:${todayString()}`)) {
+    return false
+  }
+
+  return true
+}
+
+function refreshVisibility(): void {
+  visible.value = shouldShowAnnouncement()
+}
+
+function dismissToday(): void {
+  if (announcementId.value) {
+    writeStorage(TODAY_KEY, `${announcementId.value}:${todayString()}`)
+  }
+  visible.value = false
+  promoLightboxOpen.value = false
+}
+
+function dismissForever(): void {
+  if (announcementId.value) {
+    writeStorage(FOREVER_KEY, announcementId.value)
+  }
+  visible.value = false
+  promoLightboxOpen.value = false
+}
+
+async function buyPromoPackage(): Promise<void> {
+  if (!authStore.isAuthenticated || !authStore.user || !promoPackage.value) {
+    visible.value = false
+    return
+  }
+  dismissToday()
+  await router.push({
+    name: 'instance-create',
+    query: {
+      source: promoPackage.value.source,
+      package: String(promoPackage.value.id)
+    }
+  })
+}
+
+onMounted(() => {
+  void configStore.loadPublicConfig()
+})
+
+watch(
+  [
+    announcementText,
+    promoImageUrl,
+    promoPackage,
+    announcementId,
+    () => configStore.loaded,
+    () => authStore.isAuthenticated,
+    () => authStore.user?.id
+  ],
+  refreshVisibility,
+  { immediate: true }
+)
+
+watch(promoImageUrl, () => {
+  promoImageFailed.value = false
+  promoLightboxOpen.value = false
+})
+
+watch(visible, (isVisible) => {
+  if (!isVisible) {
+    promoLightboxOpen.value = false
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="visible"
+        class="fixed inset-0 z-[100] flex items-center justify-center overflow-y-auto px-4 py-4 sm:py-6"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="t('popupAnnouncement.title')"
+      >
+        <div class="absolute inset-0 bg-black/45 backdrop-blur-sm"></div>
+
+        <div
+          class="relative w-full max-w-[min(92vw,720px)] overflow-hidden rounded-lg border shadow-2xl md:w-auto md:max-w-[min(92vw,980px)]"
+          :class="themeStore.isDark
+            ? 'border-gray-800 bg-gray-950 text-gray-100'
+            : 'border-gray-200 bg-white text-gray-900'"
+        >
+          <template v-if="hasPromo && promoPackage">
+            <button
+              type="button"
+              class="absolute right-3 top-3 z-10 flex h-9 w-9 items-center justify-center rounded-full border shadow-sm transition"
+              :class="themeStore.isDark
+                ? 'border-white/10 bg-gray-950/80 text-gray-200 hover:bg-gray-900'
+                : 'border-black/10 bg-white/90 text-gray-700 hover:bg-white'"
+              :aria-label="t('common.close')"
+              @click="dismissToday"
+            >
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            <div class="flex flex-col md:flex-row md:items-stretch">
+              <div
+                class="relative flex max-h-[62vh] min-h-[120px] items-center justify-center overflow-hidden bg-gray-900 md:max-h-[78vh] md:min-h-0 md:shrink-0 md:bg-transparent"
+              >
+                <button
+                  v-if="!promoImageFailed"
+                  type="button"
+                  class="flex max-h-[62vh] w-full cursor-zoom-in items-center justify-center md:max-h-[78vh] md:w-auto"
+                  :aria-label="t('popupAnnouncement.viewImage')"
+                  :title="t('popupAnnouncement.viewImage')"
+                  @click="promoLightboxOpen = true"
+                >
+                  <img
+                    :src="promoImageUrl"
+                    :alt="promoPackage.name"
+                    class="block max-h-[62vh] max-w-full object-contain md:max-h-[78vh] md:max-w-[min(58vw,560px)]"
+                    @error="promoImageFailed = true"
+                  />
+                </button>
+                <div
+                  v-else
+                  class="flex min-h-[220px] w-full items-center justify-center px-8 text-center md:min-h-[420px] md:w-[360px]"
+                  :class="themeStore.isDark ? 'bg-gray-900 text-gray-200' : 'bg-gray-100 text-gray-700'"
+                >
+                  <div>
+                    <p class="text-sm font-medium">{{ t('popupAnnouncement.promoLabel') }}</p>
+                    <p class="mt-2 text-xl font-semibold">{{ promoPackage.name }}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="flex min-w-0 flex-col justify-between px-5 pb-5 pt-4 sm:px-6 sm:pb-6 md:w-[360px] md:border-l md:pt-12"
+                :class="themeStore.isDark ? 'md:border-gray-800' : 'md:border-gray-200'"
+              >
+                <div class="min-h-0 min-w-0 md:max-h-[56vh] md:overflow-y-auto md:pr-1">
+                  <div class="min-w-0">
+                    <p class="text-xs font-medium uppercase tracking-wide" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                      {{ t('popupAnnouncement.promoLabel') }}
+                    </p>
+                    <h2 class="mt-1 break-words text-lg font-semibold leading-6 sm:text-xl">{{ promoPackage.name }}</h2>
+                    <p
+                      v-if="promoPackage.description"
+                      class="mt-3 hidden whitespace-pre-line break-words text-sm leading-6 md:block"
+                      :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'"
+                    >
+                      {{ promoPackage.description }}
+                    </p>
+                  </div>
+
+                  <div v-if="promoDisplayPlans.length > 0" class="mt-5 hidden space-y-2 md:block">
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="text-xs font-medium uppercase tracking-wide" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                        {{ t('popupAnnouncement.promoPlans') }}
+                      </p>
+                    </div>
+
+                    <div
+                      v-for="plan in promoDisplayPlans"
+                      :key="plan.id"
+                      class="rounded-lg border p-3"
+                      :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/70' : 'border-gray-200 bg-gray-50'"
+                    >
+                      <div class="flex items-start justify-between gap-3">
+                        <div class="min-w-0">
+                          <div class="truncate text-sm font-medium">{{ plan.name }}</div>
+                          <div class="mt-1 text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                            {{ plan.cpu }}% CPU · {{ formatMemory(plan.memory) }} · {{ formatDisk(plan.disk) }}
+                          </div>
+                        </div>
+                        <div class="shrink-0 text-right">
+                          <div class="text-sm font-semibold" :class="themeStore.isDark ? 'text-emerald-300' : 'text-emerald-700'">
+                            ¥{{ formatPromoPrice(plan.price) }}
+                          </div>
+                          <div class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                            {{ getPromoBillingCycleLabel(plan.billingCycle) }}
+                          </div>
+                        </div>
+                      </div>
+                      <div class="mt-2 flex flex-wrap gap-1.5 text-[11px]">
+                        <span class="rounded-full px-2 py-0.5" :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-white text-gray-600'">
+                          {{ formatPromoTraffic(plan.trafficLimit) }}
+                        </span>
+                        <span v-if="plan.isSoldOut" class="rounded-full px-2 py-0.5" :class="themeStore.isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-50 text-red-600'">
+                          {{ t('popupAnnouncement.soldOut') }}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="mt-4 grid gap-2 sm:grid-cols-[1fr_auto_auto] md:grid-cols-1">
+                  <button type="button" class="btn-primary min-w-0 w-full justify-center whitespace-normal break-words text-center leading-5 sm:col-span-1 md:col-span-auto" @click="buyPromoPackage">
+                    {{ t('popupAnnouncement.buyNow', { name: promoPackage.name }) }}
+                  </button>
+                  <button type="button" class="btn-secondary w-full sm:w-auto md:w-full" @click="dismissToday">
+                    {{ t('popupAnnouncement.dismissToday') }}
+                  </button>
+                  <button type="button" class="btn-secondary w-full sm:w-auto md:w-full" @click="dismissForever">
+                    {{ t('popupAnnouncement.dismissForever') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template v-else>
+            <div
+              class="flex items-center gap-3 border-b px-5 py-4"
+              :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+            >
+              <div
+                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+                :class="themeStore.isDark ? 'bg-blue-500/15 text-blue-300' : 'bg-blue-50 text-blue-600'"
+              >
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 10-12 0v3.2c0 .5-.2 1-.6 1.4L4 17h5m6 0a3 3 0 01-6 0" />
+                </svg>
+              </div>
+              <div class="min-w-0">
+                <h2 class="text-base font-semibold">{{ t('popupAnnouncement.title') }}</h2>
+                <p class="mt-0.5 text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                  {{ t('popupAnnouncement.subtitle') }}
+                </p>
+              </div>
+            </div>
+
+            <div class="max-h-[55vh] overflow-y-auto px-5 py-5">
+              <div
+                class="whitespace-pre-wrap break-words text-sm leading-6"
+                :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+              >
+                {{ announcementText }}
+              </div>
+            </div>
+
+            <div
+              class="flex flex-col-reverse gap-2 border-t px-5 py-4 sm:flex-row sm:justify-end"
+              :class="themeStore.isDark ? 'border-gray-800 bg-gray-950' : 'border-gray-200 bg-gray-50'"
+            >
+              <button type="button" class="btn-secondary w-full sm:w-auto" @click="dismissForever">
+                {{ t('popupAnnouncement.dismissForever') }}
+              </button>
+              <button type="button" class="btn-primary w-full sm:w-auto" @click="dismissToday">
+                {{ t('popupAnnouncement.dismissToday') }}
+              </button>
+            </div>
+          </template>
+        </div>
+
+        <div
+          v-if="promoLightboxOpen && hasPromo && promoPackage && !promoImageFailed"
+          class="fixed inset-0 z-[110] flex items-center justify-center bg-black/85 p-4"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="t('popupAnnouncement.viewImage')"
+          @click.self="promoLightboxOpen = false"
+        >
+          <button
+            type="button"
+            class="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
+            :aria-label="t('common.close')"
+            @click="promoLightboxOpen = false"
+          >
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+          <img
+            :src="promoImageUrl"
+            :alt="promoPackage.name"
+            class="max-h-[88vh] max-w-[94vw] object-contain shadow-2xl"
+            @click.stop
+          />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/SensitiveVerificationModal.vue b/client/src/components/SensitiveVerificationModal.vue
new file mode 100644
index 0000000..62e8c9e
--- /dev/null
+++ b/client/src/components/SensitiveVerificationModal.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface Props {
+  show: boolean
+  operationType: string
+  resourceId?: number
+  onSuccess?: () => void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'verified'): void
+}>()
+
+// 状态
+const step = ref<'request' | 'verify'>('request')
+const loading = ref(false)
+const verificationCode = ref('')
+const channel = ref<'email' | 'telegram' | 'discord' | 'webhook' | null>(null)
+const target = ref<string | null>(null)
+const expiresAt = ref<string | null>(null)
+const countdown = ref(0)
+const error = ref('')
+
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+// 操作类型显示名称
+const operationName = computed(() => {
+  const names: Record<string, string> = {
+    delete_instance: t('sensitiveVerification.operationTypes.delete_instance'),
+    reinstall_instance: t('sensitiveVerification.operationTypes.reinstall_instance'),
+    transfer_instance: t('sensitiveVerification.operationTypes.transfer_instance'),
+    delete_snapshot: t('sensitiveVerification.operationTypes.delete_snapshot'),
+    delete_backup: t('sensitiveVerification.operationTypes.delete_backup'),
+    change_password: t('sensitiveVerification.operationTypes.change_password'),
+    disable_2fa: t('sensitiveVerification.operationTypes.disable_2fa'),
+    change_email: t('sensitiveVerification.operationTypes.change_email'),
+    delete_account: t('sensitiveVerification.operationTypes.delete_account')
+  }
+  return names[props.operationType] || props.operationType
+})
+
+// 渠道显示名称
+const channelName = computed(() => {
+  if (!channel.value) return ''
+  const names: Record<string, string> = {
+    email: t('sensitiveVerification.channels.email'),
+    telegram: 'Telegram',
+    discord: 'Discord',
+    webhook: 'Webhook'
+  }
+  return names[channel.value] || channel.value
+})
+
+// 重置状态
+function resetState() {
+  step.value = 'request'
+  verificationCode.value = ''
+  channel.value = null
+  target.value = null
+  expiresAt.value = null
+  countdown.value = 0
+  error.value = ''
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+}
+
+// 监听弹窗显示状态
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    resetState()
+  }
+})
+
+// 请求验证码
+async function requestCode() {
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const response = await api.verification.request(props.operationType, props.resourceId)
+    channel.value = response.channel
+    target.value = response.maskedTarget || response.target || null
+    expiresAt.value = response.expiresAt ?? null
+    step.value = 'verify'
+    
+    // 启动倒计时 (60秒后可重发)
+    countdown.value = 60
+    countdownTimer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) {
+        if (countdownTimer) {
+          clearInterval(countdownTimer)
+          countdownTimer = null
+        }
+      }
+    }, 1000)
+    
+    toast.success(t('sensitiveVerification.codeSent'))
+  } catch (err: any) {
+    error.value = err?.message || String(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 验证
+async function verify() {
+  if (verificationCode.value.length !== 6) {
+    error.value = t('sensitiveVerification.invalidCode')
+    return
+  }
+  
+  loading.value = true
+  error.value = ''
+  
+  try {
+    await api.verification.verify(props.operationType, verificationCode.value, props.resourceId)
+    toast.success(t('sensitiveVerification.verifySuccess'))
+    emit('verified')
+  } catch (err: any) {
+    error.value = err?.message || String(err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 关闭弹窗
+function close() {
+  resetState()
+  emit('close')
+}
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="show" class="modal-overlay">
+        <div class="modal-backdrop" @click="close" />
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('sensitiveVerification.title') }}</h3>
+            <button
+              type="button"
+              class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              @click="close"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body">
+            <!-- 步骤 1: 请求验证码 -->
+            <div v-if="step === 'request'" class="space-y-4">
+              <div class="p-4 rounded-lg" :class="themeStore.isDark ? 'bg-yellow-900/20 border border-yellow-500/30' : 'bg-yellow-50 border border-yellow-200'">
+                <div class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                  <div>
+                    <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-yellow-400' : 'text-yellow-800'">
+                      {{ t('sensitiveVerification.description') }}
+                    </p>
+                    <p class="text-sm mt-1" :class="themeStore.isDark ? 'text-yellow-500/80' : 'text-yellow-700'">
+                      {{ t('sensitiveVerification.operationLabel') }}: <strong>{{ operationName }}</strong>
+                    </p>
+                  </div>
+                </div>
+              </div>
+              
+              <p class="text-sm text-themed-secondary">
+                {{ t('sensitiveVerification.requestHint') }}
+              </p>
+              
+              <div v-if="error" class="text-sm text-red-500">{{ error }}</div>
+            </div>
+            
+            <!-- 步骤 2: 输入验证码 -->
+            <div v-else class="space-y-4">
+              <div class="text-center">
+                <p class="text-sm text-themed-secondary mb-2">
+                  {{ t('sensitiveVerification.codeSentTo', { channel: channelName }) }}
+                </p>
+                <p v-if="target" class="text-sm font-medium text-themed">{{ target }}</p>
+              </div>
+              
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">
+                  {{ t('sensitiveVerification.enterCode') }}
+                </label>
+                <input
+                  v-model="verificationCode"
+                  type="text"
+                  maxlength="6"
+                  class="input text-center text-2xl tracking-widest font-mono"
+                  :placeholder="t('sensitiveVerification.codePlaceholder')"
+                  @keyup.enter="verify"
+                />
+              </div>
+              
+              <div class="flex items-center justify-between text-sm">
+                <button
+                  v-if="countdown > 0"
+                  type="button"
+                  class="text-themed-muted cursor-not-allowed"
+                  disabled
+                >
+                  {{ t('sensitiveVerification.resendIn', { seconds: countdown }) }}
+                </button>
+                <button
+                  v-else
+                  type="button"
+                  class="text-blue-500 hover:text-blue-400"
+                  :disabled="loading"
+                  @click="requestCode"
+                >
+                  {{ t('sensitiveVerification.resendCode') }}
+                </button>
+              </div>
+              
+              <div v-if="error" class="text-sm text-red-500">{{ error }}</div>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn-secondary" @click="close">{{ t('common.cancel') }}</button>
+            <button
+              v-if="step === 'request'"
+              class="btn-primary"
+              :disabled="loading"
+              @click="requestCode"
+            >
+              {{ loading ? t('sensitiveVerification.sendingCode') : t('sensitiveVerification.sendCode') }}
+            </button>
+            <button
+              v-else
+              class="btn-primary"
+              :disabled="loading || verificationCode.length !== 6"
+              @click="verify"
+            >
+              {{ loading ? t('sensitiveVerification.verifying') : t('sensitiveVerification.verify') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/Skeleton.vue b/client/src/components/Skeleton.vue
new file mode 100644
index 0000000..aba00d0
--- /dev/null
+++ b/client/src/components/Skeleton.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+
+interface Props {
+  type?: 'line' | 'circle' | 'card' | 'table' | 'text'
+  width?: string
+  height?: string
+  size?: string
+  rows?: number
+  lines?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'line',
+  width: '100%',
+  height: '16px',
+  size: '40px',
+  rows: 5,
+  lines: 3
+})
+</script>
+
+<template>
+  <!-- 线条骨架屏 -->
+  <div 
+    v-if="props.type === 'line'" 
+    :class="['skeleton-line', themeStore.isDark ? 'skeleton-dark' : 'skeleton-light']"
+    :style="{ width: props.width, height: props.height }"
+  ></div>
+
+  <!-- 圆形骨架屏 -->
+  <div 
+    v-else-if="props.type === 'circle'" 
+    :class="['skeleton-circle', themeStore.isDark ? 'skeleton-dark' : 'skeleton-light']"
+    :style="{ width: props.size, height: props.size }"
+  ></div>
+
+  <!-- 卡片骨架屏 -->
+  <div 
+    v-else-if="props.type === 'card'" 
+    class="card p-5 animate-pulse"
+  >
+    <div class="flex items-center justify-between mb-4">
+      <div class="h-5 rounded w-1/3" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"></div>
+      <div class="h-5 rounded w-14" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"></div>
+    </div>
+    <div class="h-3 rounded w-3/4 mb-4" :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-200/50'"></div>
+    <div class="grid grid-cols-2 gap-3">
+      <div v-for="j in 4" :key="j" class="space-y-1">
+        <div class="h-3 rounded w-1/2" :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-200/50'"></div>
+        <div class="h-4 rounded w-2/3" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 表格骨架屏 -->
+  <div 
+    v-else-if="props.type === 'table'" 
+    class="animate-pulse"
+  >
+    <div 
+      class="h-10 rounded-t-lg mb-px"
+      :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+    ></div>
+    <div 
+      v-for="i in props.rows" 
+      :key="i" 
+      class="h-14 border-b flex items-center px-4 gap-4"
+      :class="themeStore.isDark ? 'bg-gray-900/50 border-gray-800/50' : 'bg-gray-50 border-gray-100'"
+    >
+      <div 
+        class="w-8 h-8 rounded"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <div class="flex-1 space-y-1">
+        <div 
+          class="h-3 rounded w-1/4"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div 
+          class="h-2 rounded w-1/6"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+        ></div>
+      </div>
+      <div 
+        class="h-6 rounded w-16"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <div 
+        class="h-4 rounded w-20"
+        :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+      ></div>
+    </div>
+  </div>
+
+  <!-- 文本骨架屏 -->
+  <div 
+    v-else-if="props.type === 'text'" 
+    class="space-y-2 animate-pulse"
+  >
+    <div 
+      v-for="i in props.lines" 
+      :key="i" 
+      class="h-4 rounded"
+      :class="[
+        themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200',
+        i === props.lines ? 'w-3/4' : 'w-full'
+      ]"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.skeleton-line {
+  @apply rounded animate-pulse;
+}
+
+.skeleton-circle {
+  @apply rounded-full animate-pulse;
+}
+
+.skeleton-dark {
+  @apply bg-gray-800;
+}
+
+.skeleton-light {
+  @apply bg-gray-200;
+}
+</style>
diff --git a/client/src/components/SkeletonLoader.vue b/client/src/components/SkeletonLoader.vue
new file mode 100644
index 0000000..cea9835
--- /dev/null
+++ b/client/src/components/SkeletonLoader.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+
+interface Props {
+  type?: 'default' | 'card' | 'table' | 'list' | 'detail' | 'stats' | 'form' | 'grid'
+  rows?: number
+  cols?: number  // 用于 grid 类型
+}
+
+withDefaults(defineProps<Props>(), {
+  type: 'default',
+  rows: 3,
+  cols: 3
+})
+</script>
+
+<template>
+  <!-- 默认骨架屏 -->
+  <div v-if="type === 'default'" class="animate-pulse space-y-3">
+    <div 
+      class="h-4 rounded w-3/4"
+      :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+    ></div>
+    <div 
+      class="h-4 rounded w-1/2"
+      :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+    ></div>
+    <div 
+      class="h-4 rounded w-5/6"
+      :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+    ></div>
+  </div>
+
+  <!-- 卡片骨架屏 -->
+  <div v-else-if="type === 'card'" class="card p-5 animate-pulse">
+    <div class="flex items-start justify-between mb-4">
+      <div class="flex items-center gap-3">
+        <div 
+          class="w-10 h-10 rounded-lg"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div class="space-y-2">
+          <div 
+            class="h-4 rounded w-24"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          ></div>
+          <div 
+            class="h-3 rounded w-16"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+        </div>
+      </div>
+      <div 
+        class="h-6 rounded w-16"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+    </div>
+    <div class="space-y-2">
+      <div 
+        class="h-3 rounded w-full"
+        :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+      ></div>
+      <div 
+        class="h-3 rounded w-4/5"
+        :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+      ></div>
+    </div>
+  </div>
+
+  <!-- 表格骨架屏 -->
+  <div v-else-if="type === 'table'" class="animate-pulse">
+    <div 
+      class="h-10 rounded-t-lg mb-px"
+      :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+    ></div>
+    <div 
+      v-for="i in rows" 
+      :key="i" 
+      class="h-14 border-b flex items-center px-4 gap-4"
+      :class="themeStore.isDark ? 'bg-gray-900/50 border-gray-800/50' : 'bg-gray-50 border-gray-100'"
+    >
+      <div 
+        class="w-8 h-8 rounded"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <div class="flex-1 space-y-1">
+        <div 
+          class="h-3 rounded w-1/4"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div 
+          class="h-2 rounded w-1/6"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+        ></div>
+      </div>
+      <div 
+        class="h-6 rounded w-16"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <div 
+        class="h-4 rounded w-20"
+        :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+      ></div>
+    </div>
+  </div>
+
+  <!-- 列表骨架屏 -->
+  <div v-else-if="type === 'list'" class="space-y-3 animate-pulse">
+    <div 
+      v-for="i in rows" 
+      :key="i" 
+      class="flex items-center gap-3 p-3 rounded-lg"
+      :class="themeStore.isDark ? 'bg-gray-900/50' : 'bg-gray-50'"
+    >
+      <div 
+        class="w-10 h-10 rounded-lg"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <div class="flex-1 space-y-2">
+        <div 
+          class="h-4 rounded w-1/3"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div 
+          class="h-3 rounded w-1/4"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+        ></div>
+      </div>
+      <div 
+        class="h-8 rounded w-16"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+    </div>
+  </div>
+
+  <!-- 详情页骨架屏 -->
+  <div v-else-if="type === 'detail'" class="animate-pulse space-y-6">
+    <!-- 头部 -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <div 
+          class="w-12 h-12 rounded-xl"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div class="space-y-2">
+          <div 
+            class="h-6 rounded w-40"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          ></div>
+          <div 
+            class="h-4 rounded w-24"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+        </div>
+      </div>
+      <div class="flex gap-2">
+        <div 
+          class="h-9 rounded w-20"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div 
+          class="h-9 rounded w-20"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+      </div>
+    </div>
+    
+    <!-- 内容卡片 -->
+    <div class="grid grid-cols-3 gap-4">
+      <div v-for="i in 3" :key="i" class="card p-5 space-y-3">
+        <div 
+          class="h-4 rounded w-1/3"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div 
+          class="h-8 rounded w-2/3"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+        ></div>
+      </div>
+    </div>
+    
+    <!-- 主要内容 -->
+    <div class="grid grid-cols-2 gap-6">
+      <div class="card p-5 space-y-4">
+        <div 
+          class="h-4 rounded w-1/4"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div v-for="i in 4" :key="i" class="flex justify-between">
+          <div 
+            class="h-3 rounded w-1/4"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+          <div 
+            class="h-3 rounded w-1/3"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+        </div>
+      </div>
+      <div class="card p-5 space-y-4">
+        <div 
+          class="h-4 rounded w-1/4"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div v-for="i in 4" :key="i" class="flex justify-between">
+          <div 
+            class="h-3 rounded w-1/4"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+          <div 
+            class="h-3 rounded w-1/3"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 统计卡片骨架屏 -->
+  <div v-else-if="type === 'stats'" class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 animate-pulse">
+    <div 
+      v-for="i in 4" 
+      :key="i" 
+      class="card p-4"
+    >
+      <div class="flex items-center gap-3">
+        <div 
+          class="w-10 h-10 rounded-lg"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div class="flex-1 space-y-2">
+          <div 
+            class="h-3 rounded w-16"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+          <div 
+            class="h-6 rounded w-12"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 表单骨架屏 -->
+  <div v-else-if="type === 'form'" class="card p-5 space-y-4 animate-pulse">
+    <div v-for="i in rows" :key="i" class="space-y-2">
+      <div 
+        class="h-3 rounded w-24"
+        :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+      ></div>
+      <div 
+        class="h-10 rounded w-full"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+    </div>
+    <div class="flex justify-end gap-2 pt-4">
+      <div 
+        class="h-9 rounded w-20"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <div 
+        class="h-9 rounded w-24"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+    </div>
+  </div>
+
+  <!-- 网格卡片骨架屏 -->
+  <div v-else-if="type === 'grid'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 animate-pulse">
+    <div 
+      v-for="i in (rows * cols)" 
+      :key="i" 
+      class="card p-4"
+    >
+      <div class="flex items-start gap-3">
+        <div 
+          class="w-10 h-10 rounded-full flex-shrink-0"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div class="flex-1 space-y-2">
+          <div 
+            class="h-4 rounded w-2/3"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          ></div>
+          <div 
+            class="h-3 rounded w-1/2"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+          ></div>
+        </div>
+      </div>
+      <div class="flex gap-2 mt-4">
+        <div 
+          class="h-8 rounded flex-1"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+        ></div>
+        <div 
+          class="h-8 rounded flex-1"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/SnapshotManager.vue b/client/src/components/SnapshotManager.vue
new file mode 100644
index 0000000..55331dd
--- /dev/null
+++ b/client/src/components/SnapshotManager.vue
@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { formatDate } from '@/utils/formatters'
+import type { Snapshot, SnapshotPolicy, CreateSnapshotRequest, UpdateSnapshotPolicyRequest } from '@/types/api'
+
+const { t } = useI18n()
+
+interface Props {
+  instanceId: string | number
+  instanceName?: string
+  instanceStatus?: string
+  snapshotLimit?: number | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instanceName: '',
+  instanceStatus: '',
+  snapshotLimit: null
+})
+
+// 配额状态
+const hasQuota = computed<boolean>(() => props.snapshotLimit !== null && props.snapshotLimit !== undefined)
+const quotaUsed = computed<number>(() => snapshots.value.length)
+const quotaRemaining = computed<number>(() => hasQuota.value ? Math.max(0, (props.snapshotLimit || 0) - quotaUsed.value) : 0)
+const isQuotaFull = computed<boolean>(() => hasQuota.value && quotaRemaining.value <= 0)
+
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 快照列表
+const snapshots = ref<Snapshot[]>([])
+const loading = ref<boolean>(true)
+
+// 创建快照弹窗
+const showCreateModal = ref<boolean>(false)
+interface CreateForm {
+  name: string
+  description: string
+}
+const createForm = ref<CreateForm>({ name: '', description: '' })
+const createLoading = ref<boolean>(false)
+
+// 自动快照策略
+const policy = ref<SnapshotPolicy | null>(null)
+const showPolicyModal = ref<boolean>(false)
+const policyForm = ref<UpdateSnapshotPolicyRequest>({ enabled: false, intervalMinutes: 360 })
+const policyLoading = ref<boolean>(false)
+
+
+
+const canRestore = computed<boolean>(() => {
+  const s = props.instanceStatus?.toLowerCase()
+  return s === 'stopped'
+})
+
+onMounted(async () => {
+  await Promise.all([loadSnapshots(), loadPolicy()])
+})
+
+const instanceIdNum = computed<number>(() => Number(props.instanceId))
+
+async function loadSnapshots(): Promise<void> {
+  loading.value = true
+  try {
+    const res = await api.instances.getSnapshots(instanceIdNum.value)
+    snapshots.value = Array.isArray(res) ? res : []
+  } catch (err) {
+    console.error('Failed to load snapshots:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadPolicy(): Promise<void> {
+  try {
+    const res = await api.instances.getSnapshotPolicy(instanceIdNum.value)
+    policy.value = res
+    if (res) {
+      policyForm.value = {
+        enabled: res.enabled === 1,
+        intervalMinutes: res.interval_minutes
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load policy:', err)
+  }
+}
+
+async function createSnapshot(): Promise<void> {
+  if (!createForm.value.name) return
+  
+  createLoading.value = true
+  try {
+    const payload: CreateSnapshotRequest = {
+      name: createForm.value.name,
+      description: createForm.value.description || undefined
+    }
+    await api.instances.createSnapshot(instanceIdNum.value, payload)
+    toast.success(t('snapshot.messages.createSuccess'))
+    showCreateModal.value = false
+    createForm.value = { name: '', description: '' }
+    await loadSnapshots()
+  } catch (err: any) {
+    toast.error(t('snapshot.messages.createFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    createLoading.value = false
+  }
+}
+
+async function deleteSnapshot(snapshot: Snapshot): Promise<void> {
+  if (!confirm(t('snapshot.messages.deleteConfirm', { name: snapshot.name }))) return
+  
+  try {
+    await api.instances.deleteSnapshot(instanceIdNum.value, snapshot.id)
+    snapshots.value = snapshots.value.filter(s => s.id !== snapshot.id)
+    toast.success(t('snapshot.messages.deleteSuccess'))
+  } catch (err: any) {
+    toast.error(t('snapshot.messages.deleteFailed') + ': ' + (err?.message || String(err)))
+    await loadSnapshots()
+  }
+}
+
+
+async function restoreSnapshot(snapshot: Snapshot): Promise<void> {
+  if (!canRestore.value) {
+    toast.warning(t('snapshot.messages.stopInstanceFirst'))
+    return
+  }
+  
+  if (!confirm(t('snapshot.messages.restoreConfirm', { name: snapshot.name }))) return
+  
+  try {
+    await api.instances.restoreSnapshot(instanceIdNum.value, snapshot.id)
+    toast.success(t('snapshot.messages.restoreSuccess'))
+  } catch (err: any) {
+    toast.error(t('snapshot.messages.restoreFailed') + ': ' + (err?.message || String(err)))
+  }
+}
+
+async function savePolicy(): Promise<void> {
+  policyLoading.value = true
+  try {
+    await api.instances.updateSnapshotPolicy(instanceIdNum.value, policyForm.value)
+    toast.success(t('snapshot.messages.policySaved'))
+    showPolicyModal.value = false
+    await loadPolicy()
+  } catch (err: any) {
+    toast.error(t('snapshot.messages.policySaveFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    policyLoading.value = false
+  }
+}
+
+// 取消自动快照策略
+async function disableAutoPolicy(): Promise<void> {
+  policyLoading.value = true
+  try {
+    await api.instances.updateSnapshotPolicy(instanceIdNum.value, { enabled: false, intervalMinutes: policyForm.value.intervalMinutes })
+    toast.success(t('snapshot.messages.policyDisabled'))
+    await loadPolicy()
+  } catch (err: any) {
+    toast.error(t('snapshot.messages.policySaveFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    policyLoading.value = false
+  }
+}
+
+// 获取间隔时间的显示文本
+function getIntervalLabel(minutes: number): string {
+  const intervalMap: Record<number, string> = {
+    10: t('snapshot.policyModal.intervalOptions.min10'),
+    60: t('snapshot.policyModal.intervalOptions.hour1'),
+    360: t('snapshot.policyModal.intervalOptions.hour6'),
+    1440: t('snapshot.policyModal.intervalOptions.hour24')
+  }
+  return intervalMap[minutes] || `${minutes} ${t('snapshot.minutes')}`
+}
+</script>
+
+<template>
+  <div class="card">
+    <div 
+      class="flex items-center justify-between p-4 border-b"
+      :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+    >
+      <div>
+        <h2 
+          class="text-sm font-medium"
+          :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+        >
+          {{ t('snapshot.title') }}
+        </h2>
+        <p 
+          class="text-xs mt-0.5"
+          :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+        >
+          {{ policy?.enabled ? t('snapshot.autoPolicy') : t('snapshot.manual') }}
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <span v-if="hasQuota" class="text-xs text-themed-muted">
+          {{ quotaUsed }}/{{ snapshotLimit }}
+        </span>
+        <button class="btn-ghost btn-sm" :title="t('snapshot.autoSettings')" @click="showPolicyModal = true">
+          <svg 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </button>
+        <button 
+          :disabled="!hasQuota || isQuotaFull" 
+          :class="['btn-ghost btn-sm', (!hasQuota || isQuotaFull) && 'opacity-50 cursor-not-allowed']"
+          :title="!hasQuota ? t('snapshot.noQuota') : isQuotaFull ? t('snapshot.quotaFull') : t('snapshot.createSnapshot')"
+          @click="showCreateModal = true"
+        >
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('snapshot.create') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 自动快照策略提醒横幅 -->
+    <div 
+      v-if="policy?.enabled" 
+      class="mx-4 mt-4 p-3 rounded-lg flex items-center justify-between gap-3"
+      :class="themeStore.isDark ? 'bg-green-500/10 border border-green-500/20' : 'bg-green-50 border border-green-200'"
+    >
+      <div class="flex items-center gap-3">
+        <div 
+          class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
+          :class="themeStore.isDark ? 'bg-green-500/20' : 'bg-green-100'"
+        >
+          <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div>
+          <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-green-400' : 'text-green-700'">
+            {{ t('snapshot.autoPolicyEnabled') }}
+          </p>
+          <p class="text-xs" :class="themeStore.isDark ? 'text-green-500/70' : 'text-green-600'">
+            {{ t('snapshot.currentPolicy') }}: {{ getIntervalLabel(policy.interval_minutes) }}
+          </p>
+        </div>
+      </div>
+      <button 
+        class="btn-ghost btn-sm flex-shrink-0"
+        :class="themeStore.isDark ? 'text-green-400 hover:bg-green-500/20' : 'text-green-600 hover:bg-green-100'"
+        :disabled="policyLoading"
+        @click="disableAutoPolicy"
+      >
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+        {{ t('snapshot.disableAutoPolicy') }}
+      </button>
+    </div>
+
+    <div v-if="loading" class="p-4 animate-pulse">
+      <div v-for="i in 2" :key="i" class="flex items-center gap-3 py-3">
+        <div 
+          class="w-8 h-8 rounded"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+        ></div>
+        <div class="flex-1 space-y-2">
+          <div 
+            class="h-3 rounded w-1/3"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          ></div>
+          <div 
+            class="h-2 rounded w-1/4"
+            :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-200/50'"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div 
+      v-else-if="snapshots.length === 0" 
+      class="p-8 text-center text-sm"
+      :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+    >
+      <svg 
+        class="w-10 h-10 mx-auto mb-2 opacity-50" 
+        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+      </svg>
+      <template v-if="!hasQuota">
+        <p class="text-yellow-500 mb-1">{{ t('snapshot.noQuotaAllocated') }}</p>
+        <p class="text-xs">{{ t('snapshot.allocateQuotaHint') }}</p>
+      </template>
+      <template v-else>
+        {{ t('snapshot.noSnapshots') }}
+      </template>
+    </div>
+
+    <div 
+      v-else 
+      class="divide-y"
+      :class="themeStore.isDark ? 'divide-gray-800' : 'divide-gray-100'"
+    >
+      <div 
+        v-for="snapshot in snapshots" 
+        :key="snapshot.id"
+        class="flex items-center justify-between p-4 transition-colors"
+        :class="themeStore.isDark ? 'hover:bg-gray-900/50' : 'hover:bg-gray-50'"
+      >
+        <div class="flex items-center gap-3">
+          <div 
+            class="w-8 h-8 rounded-lg flex items-center justify-center"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+          >
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div>
+            <div 
+              class="text-sm"
+              :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+            >
+              {{ snapshot.name }}
+            </div>
+            <div 
+              class="text-xs"
+              :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+            >
+              {{ formatDate(snapshot.created_at) }}
+              <span v-if="snapshot.stateful" class="ml-2 text-yellow-500">{{ t('snapshot.statefulSnapshot') }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <button 
+            :disabled="!canRestore" 
+            :class="['btn-ghost btn-sm', !canRestore && 'opacity-50 cursor-not-allowed']"
+            :title="canRestore ? t('snapshot.restore') : t('snapshot.stopInstanceFirst')"
+            @click="restoreSnapshot(snapshot)"
+          >
+            {{ t('snapshot.restore') }}
+          </button>
+          <button class="btn-ghost btn-sm text-error" @click="deleteSnapshot(snapshot)">
+            {{ t('snapshot.delete') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 创建快照弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showCreateModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showCreateModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('snapshot.createModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showCreateModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form class="modal-body" @submit.prevent="createSnapshot">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('snapshot.createModal.name') }} <span class="text-error">{{ t('snapshot.createModal.nameRequired') }}</span></label>
+                <input v-model="createForm.name" type="text" class="input" :placeholder="t('snapshot.createModal.namePlaceholder')" required />
+              </div>
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('snapshot.createModal.description') }}</label>
+                <input v-model="createForm.description" type="text" class="input" :placeholder="t('snapshot.createModal.descriptionPlaceholder')" />
+              </div>
+            </form>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showCreateModal = false">{{ t('snapshot.createModal.cancel') }}</button>
+              <button :disabled="createLoading || !createForm.name" class="btn-primary" @click="createSnapshot">
+                {{ createLoading ? t('snapshot.createModal.creating') : t('snapshot.createModal.create') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 自动快照策略弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showPolicyModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showPolicyModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('snapshot.policyModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showPolicyModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form class="modal-body" @submit.prevent="savePolicy">
+              <label class="flex items-center gap-2 cursor-pointer">
+                <input 
+                  v-model="policyForm.enabled" 
+                  type="checkbox" 
+                  class="w-4 h-4 rounded"
+                  :class="themeStore.isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-300'"
+                />
+                <span class="text-sm text-themed">{{ t('snapshot.policyModal.enable') }}</span>
+              </label>
+            
+              <div v-if="policyForm.enabled" class="space-y-4 pt-2">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('snapshot.policyModal.interval') }}</label>
+                  <select v-model="policyForm.intervalMinutes" class="input">
+                    <option :value="10">{{ t('snapshot.policyModal.intervalOptions.min10') }}</option>
+                    <option :value="60">{{ t('snapshot.policyModal.intervalOptions.hour1') }}</option>
+                    <option :value="360">{{ t('snapshot.policyModal.intervalOptions.hour6') }}</option>
+                    <option :value="1440">{{ t('snapshot.policyModal.intervalOptions.hour24') }}</option>
+                  </select>
+                </div>
+                <p class="text-xs text-themed-muted">
+                  {{ t('snapshot.policyModal.quotaFromPackage', { limit: snapshotLimit || 0 }) }}
+                </p>
+              </div>
+            </form>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showPolicyModal = false">{{ t('snapshot.policyModal.cancel') }}</button>
+              <button :disabled="policyLoading" class="btn-primary" @click="savePolicy">
+                {{ policyLoading ? t('snapshot.policyModal.saving') : t('snapshot.policyModal.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
diff --git a/client/src/components/TermsOfServiceModal.vue b/client/src/components/TermsOfServiceModal.vue
new file mode 100644
index 0000000..84e6c86
--- /dev/null
+++ b/client/src/components/TermsOfServiceModal.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { parseMarkdown } from '@/utils/markdown'
+import { getLocale } from '@/locales'
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const content = ref('')
+const loading = ref(false)
+const error = ref('')
+
+async function loadTerms() {
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const locale = getLocale()
+    const lang = locale.startsWith('zh') ? 'zh' : 'en'
+    const response = await fetch(`/tos/${lang}.md`)
+    
+    if (!response.ok) {
+      throw new Error('Failed to load terms')
+    }
+    
+    const markdown = await response.text()
+    content.value = parseMarkdown(markdown)
+  } catch (err) {
+    error.value = t('auth.tos.loadFailed')
+    console.error('Failed to load terms:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.show, (newVal) => {
+  if (newVal && !content.value) {
+    loadTerms()
+  }
+})
+
+onMounted(() => {
+  if (props.show) {
+    loadTerms()
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        @click.self="emit('close')"
+      >
+        <!-- Backdrop -->
+        <div 
+          class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          @click="emit('close')"
+        />
+        
+        <!-- Modal -->
+        <div
+          class="modal-content relative w-full max-w-3xl md:max-w-4xl lg:max-w-5xl max-h-[85vh] rounded-xl shadow-2xl overflow-hidden flex flex-col"
+          :class="themeStore.isDark ? 'bg-[#141414] border border-gray-800' : 'bg-white'"
+        >
+          <!-- Header -->
+          <div 
+            class="flex items-center justify-between px-6 py-4 border-b"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <h2 
+              class="text-lg font-semibold"
+              :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+            >
+              {{ $t('auth.tos.title') }}
+            </h2>
+            <button
+              class="p-1.5 rounded-lg transition-colors"
+              :class="themeStore.isDark 
+                ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-800' 
+                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'"
+              @click="emit('close')"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <!-- Content -->
+          <div class="flex-1 overflow-y-auto px-6 py-4">
+            <!-- Loading -->
+            <div v-if="loading" class="flex items-center justify-center py-12">
+              <svg class="animate-spin h-8 w-8" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            
+            <!-- Error -->
+            <div v-else-if="error" class="text-center py-12">
+              <p class="text-red-500 mb-4">{{ error }}</p>
+              <button 
+                class="btn-secondary"
+                @click="loadTerms"
+              >
+                {{ $t('common.refresh') }}
+              </button>
+            </div>
+            
+            <!-- Terms Content -->
+            <div 
+              v-else 
+              :class="themeStore.isDark ? 'dark' : 'light'"
+            >
+              <div 
+                class="markdown-body prose prose-sm max-w-none"
+                v-html="content"
+              />
+            </div>
+          </div>
+          
+          <!-- Footer -->
+          <div 
+            class="px-6 py-4 border-t"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <button
+              class="btn-primary w-full"
+              @click="emit('close')"
+            >
+              {{ $t('auth.tos.understood') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active > div:last-child,
+.modal-leave-active > div:last-child {
+  transition: transform 0.2s ease;
+}
+
+.modal-enter-from > div:last-child,
+.modal-leave-to > div:last-child {
+  transform: scale(0.95);
+}
+</style>
+
+<style>
+/* Markdown 样式 - 服务条款弹窗 */
+.markdown-body {
+  line-height: 1.7;
+}
+
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* 标题 - 暗色主题 */
+.dark .markdown-body h1,
+.dark .markdown-body h2,
+.dark .markdown-body h3,
+.dark .markdown-body h4,
+.dark .markdown-body h5,
+.dark .markdown-body h6 {
+  color: #ededed;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* 标题 - 亮色主题 */
+.light .markdown-body h1,
+.light .markdown-body h2,
+.light .markdown-body h3,
+.light .markdown-body h4,
+.light .markdown-body h5,
+.light .markdown-body h6 {
+  color: #18181b;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.markdown-body h1 { font-size: 1.75em; }
+.markdown-body h2 { font-size: 1.5em; padding-bottom: 0.3em; }
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1.1em; }
+.markdown-body h5 { font-size: 1em; }
+.markdown-body h6 { font-size: 0.9em; }
+
+.dark .markdown-body h2 { border-bottom: 1px solid #262626; }
+.light .markdown-body h2 { border-bottom: 1px solid #e4e4e7; }
+.dark .markdown-body h6 { color: #a1a1a1; }
+.light .markdown-body h6 { color: #52525b; }
+
+/* 段落 */
+.markdown-body p {
+  margin: 1em 0;
+}
+
+.dark .markdown-body p { color: #d4d4d4; }
+.light .markdown-body p { color: #3f3f46; }
+
+/* 列表 */
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.5em;
+  margin: 1em 0;
+}
+
+.markdown-body ul {
+  list-style-type: disc;
+}
+
+.markdown-body ol {
+  list-style-type: decimal;
+}
+
+.markdown-body li {
+  margin: 0.5em 0;
+}
+
+.dark .markdown-body li { color: #d4d4d4; }
+.light .markdown-body li { color: #3f3f46; }
+
+/* 强调 */
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.dark .markdown-body strong { color: #ededed; }
+.light .markdown-body strong { color: #18181b; }
+
+.markdown-body em {
+  font-style: italic;
+}
+
+/* 链接 */
+.dark .markdown-body a { color: #3b82f6; }
+.light .markdown-body a { color: #2563eb; }
+
+.markdown-body a {
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/client/src/components/Toast.vue b/client/src/components/Toast.vue
new file mode 100644
index 0000000..0a475c9
--- /dev/null
+++ b/client/src/components/Toast.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  message: string
+  type?: 'info' | 'success' | 'error' | 'warning'
+  duration?: number
+  visible: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  duration: 3000
+})
+
+const emit = defineEmits<Emits>()
+
+const isVisible = ref<boolean>(props.visible)
+
+watch(() => props.visible, (newVal: boolean) => {
+  isVisible.value = newVal
+  if (newVal && props.duration > 0) {
+    setTimeout(() => {
+      isVisible.value = false
+      emit('close')
+    }, props.duration)
+  }
+})
+
+function close(): void {
+  isVisible.value = false
+  emit('close')
+}
+
+const icons: Record<string, string> = {
+  success: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>`,
+  error: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>`,
+  warning: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>`,
+  info: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>`
+}
+
+const iconColors: Record<string, string> = {
+  success: 'text-green-400',
+  error: 'text-red-400',
+  warning: 'text-yellow-400',
+  info: 'text-blue-400'
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="opacity-0 translate-y-2"
+    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-2"
+  >
+    <div 
+      v-if="isVisible"
+      :class="['toast', `toast-${type}`]"
+    >
+      <svg 
+        :class="['w-5 h-5 flex-shrink-0', iconColors[type]]" 
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+        v-html="icons[type]"
+      ></svg>
+      <span class="flex-1">{{ message }}</span>
+      <button 
+        class="text-themed-muted hover:text-themed transition-colors" 
+        @click="close"
+      >
+        <svg 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="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  </Transition>
+</template>
+
diff --git a/client/src/components/ToastContainer.vue b/client/src/components/ToastContainer.vue
new file mode 100644
index 0000000..8e13049
--- /dev/null
+++ b/client/src/components/ToastContainer.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useToast } from '@/stores/toast'
+import Toast from './Toast.vue'
+
+const { toasts, remove } = useToast()
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="toast-container">
+      <Toast
+        v-for="toast in toasts"
+        :key="toast.id"
+        :message="toast.message"
+        :type="toast.type"
+        :duration="0"
+        :visible="toast.visible"
+        @close="remove(toast.id)"
+      />
+    </div>
+  </Teleport>
+</template>
+
diff --git a/client/src/components/TurnstileWidget.vue b/client/src/components/TurnstileWidget.vue
new file mode 100644
index 0000000..8780e9c
--- /dev/null
+++ b/client/src/components/TurnstileWidget.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * Cloudflare Turnstile 验证组件
+ * 使用 vue-turnstile 库
+ */
+import { ref, watch } from 'vue'
+import Turnstile from 'vue-turnstile'
+
+const props = withDefaults(defineProps<{
+  siteKey: string
+  theme?: 'light' | 'dark' | 'auto'
+  size?: 'normal' | 'compact'
+  language?: string
+  action?: string
+  appearance?: 'always' | 'execute' | 'interaction-only'
+}>(), {
+  theme: 'auto',
+  size: 'normal',
+  appearance: 'always'
+})
+
+const emit = defineEmits<{
+  (e: 'verify', token: string): void
+  (e: 'expire'): void
+  (e: 'error', error: string): void
+}>()
+
+// v-model 支持
+const modelValue = defineModel<string>({ default: '' })
+
+const token = ref<string>('')
+const turnstileRef = ref<InstanceType<typeof Turnstile> | null>(null)
+
+// 监听内部 token 变化，同步到 modelValue
+watch(token, (newToken) => {
+  if (newToken && newToken !== modelValue.value) {
+    modelValue.value = newToken
+    emit('verify', newToken)
+  }
+})
+
+function onVerify(response: string) {
+  token.value = response
+  modelValue.value = response
+  emit('verify', response)
+}
+
+function onExpire() {
+  token.value = ''
+  modelValue.value = ''
+  emit('expire')
+}
+
+function onError(error: string) {
+  token.value = ''
+  modelValue.value = ''
+  emit('error', error)
+}
+
+// 暴露方法供父组件调用
+function reset() {
+  token.value = ''
+  modelValue.value = ''
+  turnstileRef.value?.reset?.()
+}
+
+function getToken(): string {
+  return token.value || modelValue.value
+}
+
+defineExpose({
+  reset,
+  getToken,
+  token
+})
+
+// 确保 props 被使用
+void props.action
+void props.language
+</script>
+
+<template>
+  <div class="turnstile-widget">
+    <Turnstile
+      ref="turnstileRef"
+      v-model="token"
+      :site-key="siteKey"
+      :theme="theme"
+      :size="size"
+      :language="language"
+      :action="action"
+      :appearance="appearance"
+      @verify="onVerify"
+      @expire="onExpire"
+      @error="onError"
+    />
+  </div>
+</template>
+
+<style scoped>
+.turnstile-widget {
+  display: flex;
+  justify-content: center;
+  margin: 0.5rem 0;
+}
+</style>
diff --git a/client/src/components/UserAvatar.vue b/client/src/components/UserAvatar.vue
new file mode 100644
index 0000000..3553006
--- /dev/null
+++ b/client/src/components/UserAvatar.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useConfigStore } from '@/stores/config'
+import { useAuthStore } from '@/stores/auth'
+import BadgeImage from '@/components/BadgeImage.vue'
+
+const props = withDefaults(defineProps<{
+  username: string
+  email?: string | null
+  avatarStyle?: string
+  badgeId?: string | null
+  preferBadge?: boolean
+  size?: number
+}>(), {
+  email: null,
+  avatarStyle: '',
+  badgeId: null,
+  preferBadge: true,
+  size: 32
+})
+
+const configStore = useConfigStore()
+const authStore = useAuthStore()
+
+// 确保配置已加载
+onMounted(() => {
+  configStore.loadPublicConfig()
+})
+
+// 风格名称映射：camelCase -> kebab-case (DiceBear API 格式)
+const styleNameMap: Record<string, string> = {
+  adventurer: 'adventurer',
+  adventurerNeutral: 'adventurer-neutral',
+  avataaars: 'avataaars',
+  avataaarsNeutral: 'avataaars-neutral',
+  bigEars: 'big-ears',
+  bigEarsNeutral: 'big-ears-neutral',
+  bigSmile: 'big-smile',
+  bottts: 'bottts',
+  botttsNeutral: 'bottts-neutral',
+  croodles: 'croodles',
+  croodlesNeutral: 'croodles-neutral',
+  dylan: 'dylan',
+  funEmoji: 'fun-emoji',
+  glass: 'glass',
+  icons: 'icons',
+  identicon: 'identicon',
+  initials: 'initials',
+  lorelei: 'lorelei',
+  loreleiNeutral: 'lorelei-neutral',
+  micah: 'micah',
+  miniavs: 'miniavs',
+  notionists: 'notionists',
+  notionistsNeutral: 'notionists-neutral',
+  openPeeps: 'open-peeps',
+  personas: 'personas',
+  pixelArt: 'pixel-art',
+  pixelArtNeutral: 'pixel-art-neutral',
+  rings: 'rings',
+  shapes: 'shapes',
+  thumbs: 'thumbs'
+}
+
+const styleKeys = Object.keys(styleNameMap)
+
+// 根据用户名生成一个稳定的随机索引
+function getStableRandomIndex(seed: string): number {
+  let hash = 0
+  for (let i = 0; i < seed.length; i++) {
+    hash = ((hash << 5) - hash) + seed.charCodeAt(i)
+    hash |= 0
+  }
+  return Math.abs(hash) % styleKeys.length
+}
+
+const avatarUrl = computed(() => {
+  if (!props.username) return ''
+  
+  // 如果没有指定风格或风格无效，根据用户名随机选择
+  let styleKey = props.avatarStyle
+  if (!styleKey || !styleNameMap[styleKey]) {
+    const idx = getStableRandomIndex(props.username)
+    styleKey = styleKeys[idx]
+  }
+  
+  const styleName = styleNameMap[styleKey]
+  // 优先使用邮箱作为 seed，没有邮箱时降级使用用户名
+  const seed = encodeURIComponent(props.email || props.username)
+  const apiBase = configStore.avatarApiBase
+  return `${apiBase}/${styleName}/svg?seed=${seed}&size=${props.size}`
+})
+
+const effectiveBadgeId = computed(() => {
+  if (!props.preferBadge) return null
+  if (props.badgeId) return props.badgeId
+  if (authStore.user?.username === props.username) {
+    return authStore.user.avatarBadgeId || null
+  }
+  return null
+})
+
+const sizeStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`
+}))
+</script>
+
+<template>
+  <BadgeImage
+    v-if="effectiveBadgeId"
+    :badge-id="effectiveBadgeId"
+    :alt="username"
+    :size="size"
+    variant="avatar"
+  />
+  <img 
+    v-else-if="avatarUrl"
+    :src="avatarUrl" 
+    :alt="username"
+    class="rounded-full"
+    :style="sizeStyle"
+    loading="lazy"
+  />
+  <div 
+    v-else
+    class="rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-medium"
+    :style="sizeStyle"
+  >
+    {{ username?.charAt(0).toUpperCase() }}
+  </div>
+</template>
diff --git a/client/src/components/VirtualList.vue b/client/src/components/VirtualList.vue
new file mode 100644
index 0000000..b1af552
--- /dev/null
+++ b/client/src/components/VirtualList.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+/**
+ * 虚拟滚动列表组件
+ * 用于高效渲染大量数据，只渲染可见区域的项目
+ * 
+ * 使用示例：
+ * <VirtualList :items="items" :item-height="60" v-slot="{ item }">
+ *   <div>{{ item.name }}</div>
+ * </VirtualList>
+ */
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+interface Props {
+  items: any[]
+  itemHeight: number  // 每项固定高度
+  bufferSize?: number // 缓冲区大小（上下各渲染多少额外项）
+  containerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bufferSize: 5,
+  containerClass: ''
+})
+
+const containerRef = ref<HTMLElement | null>(null)
+const scrollTop = ref(0)
+const containerHeight = ref(0)
+
+// 总高度
+const totalHeight = computed(() => props.items.length * props.itemHeight)
+
+// 计算可见范围
+const visibleRange = computed(() => {
+  const start = Math.floor(scrollTop.value / props.itemHeight)
+  const visibleCount = Math.ceil(containerHeight.value / props.itemHeight)
+  
+  const startIndex = Math.max(0, start - props.bufferSize)
+  const endIndex = Math.min(props.items.length, start + visibleCount + props.bufferSize)
+  
+  return { startIndex, endIndex }
+})
+
+// 可见项
+const visibleItems = computed(() => {
+  const { startIndex, endIndex } = visibleRange.value
+  return props.items.slice(startIndex, endIndex).map((item, index) => ({
+    item,
+    index: startIndex + index,
+    style: {
+      position: 'absolute' as const,
+      top: `${(startIndex + index) * props.itemHeight}px`,
+      height: `${props.itemHeight}px`,
+      width: '100%'
+    }
+  }))
+})
+
+// 偏移量样式
+const spacerStyle = computed(() => ({
+  height: `${totalHeight.value}px`,
+  position: 'relative' as const
+}))
+
+function handleScroll(e: Event) {
+  const target = e.target as HTMLElement
+  scrollTop.value = target.scrollTop
+}
+
+function updateContainerHeight() {
+  if (containerRef.value) {
+    containerHeight.value = containerRef.value.clientHeight
+  }
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  updateContainerHeight()
+  
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(updateContainerHeight)
+    resizeObserver.observe(containerRef.value)
+  }
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+})
+
+// 当 items 变化时重置滚动位置
+watch(() => props.items.length, () => {
+  if (containerRef.value) {
+    containerRef.value.scrollTop = 0
+    scrollTop.value = 0
+  }
+})
+
+// 暴露方法供外部调用
+defineExpose({
+  scrollToIndex(index: number) {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = index * props.itemHeight
+    }
+  },
+  scrollToTop() {
+    if (containerRef.value) {
+      containerRef.value.scrollTop = 0
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="overflow-auto"
+    :class="containerClass"
+    @scroll="handleScroll"
+  >
+    <div :style="spacerStyle">
+      <div
+        v-for="{ item, index, style } in visibleItems"
+        :key="index"
+        :style="style"
+      >
+        <slot :item="item" :index="index" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/admin/BillingOverviewIcon.vue b/client/src/components/admin/BillingOverviewIcon.vue
new file mode 100644
index 0000000..fd0066b
--- /dev/null
+++ b/client/src/components/admin/BillingOverviewIcon.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  name: 'wallet' | 'chart' | 'store' | 'cloud' | 'server' | 'pulse' | 'ban' | 'clock' | 'sparkles'
+  strokeWidth?: number
+}>(), {
+  strokeWidth: 1.8
+})
+</script>
+
+<template>
+  <svg
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <template v-if="name === 'wallet'">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M3 7.5A2.5 2.5 0 0 1 5.5 5h11A2.5 2.5 0 0 1 19 7.5V9h-2.5a3.5 3.5 0 1 0 0 7H19v.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 3 16.5v-9Z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M19 9h-2.5a3.5 3.5 0 0 0 0 7H19V9Z"
+      />
+      <circle cx="16.5" cy="12.5" r="0.75" fill="currentColor" />
+    </template>
+
+    <template v-else-if="name === 'chart'">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M4 19h16"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M7 15.5V10"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M12 15.5V6"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M17 15.5v-3"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M6 7.5 10 10l4-5 4 2"
+      />
+    </template>
+
+    <template v-else-if="name === 'store'">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M4 10.5V8.8c0-.6.2-1.1.6-1.6l1.9-2.4c.4-.5 1-.8 1.6-.8h8c.6 0 1.2.3 1.6.8l1.9 2.4c.4.4.6 1 .6 1.6v1.7"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M5 10.5c0 1.4 1.1 2.5 2.5 2.5S10 11.9 10 10.5c0 1.4 1.1 2.5 2.5 2.5S15 11.9 15 10.5c0 1.4 1.1 2.5 2.5 2.5S20 11.9 20 10.5"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M6 13v6h12v-6"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M10 19v-3.5c0-.6.4-1 1-1h2c.6 0 1 .4 1 1V19"
+      />
+    </template>
+
+    <template v-else-if="name === 'cloud'">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M7.5 18h8.75a3.75 3.75 0 0 0 .5-7.47A5.5 5.5 0 0 0 6.18 8.6 4.25 4.25 0 0 0 7.5 18Z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="m10 12 2-2 2 2"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M12 10v6"
+      />
+    </template>
+
+    <template v-else-if="name === 'server'">
+      <rect x="4" y="4" width="16" height="6" rx="2" :stroke-width="strokeWidth" />
+      <rect x="4" y="14" width="16" height="6" rx="2" :stroke-width="strokeWidth" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M8 7h.01M8 17h.01M12 7h6M12 17h6"
+      />
+    </template>
+
+    <template v-else-if="name === 'pulse'">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M3 12h4l2.2-5 3.6 10 2.2-5H21"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M4.5 18h15"
+      />
+    </template>
+
+    <template v-else-if="name === 'ban'">
+      <circle cx="12" cy="12" r="8" :stroke-width="strokeWidth" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="m8.5 8.5 7 7"
+      />
+    </template>
+
+    <template v-else-if="name === 'clock'">
+      <circle cx="12" cy="12" r="8" :stroke-width="strokeWidth" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="M12 8v4l2.5 1.5"
+      />
+    </template>
+
+    <template v-else-if="name === 'sparkles'">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="m12 3 1.4 3.9L17 8.3l-3.6 1.3L12 13.5l-1.4-3.9L7 8.3l3.6-1.4L12 3Z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="m18.5 13 1 2.5 2.5 1-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1 1-2.5Z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="strokeWidth"
+        d="m5.5 14 1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2Z"
+      />
+    </template>
+  </svg>
+</template>
diff --git a/client/src/components/admin/VipBenefitHallSettings.vue b/client/src/components/admin/VipBenefitHallSettings.vue
new file mode 100644
index 0000000..6296dde
--- /dev/null
+++ b/client/src/components/admin/VipBenefitHallSettings.vue
@@ -0,0 +1,486 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api, {
+  type VipBenefitReward,
+  type VipBenefitRewardInput,
+  type VipBenefitRewardType,
+  type VipLevelRule,
+  type UserVipMetric
+} from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+import type { Package } from '@/types/api'
+import { normalizeVipBadgeStyle, getVipBadgeInlineStyle } from '@/utils/vipBadge'
+
+interface PackagePlanOption {
+  id: number
+  name: string
+  price: number
+  billingCycle: number
+  isActive: boolean
+  isSoldOut: boolean
+}
+
+interface EditableReward {
+  localId: number
+  id: number | null
+  level: number
+  type: VipBenefitRewardType
+  title: string
+  description: string
+  claimLimit: number
+  sortOrder: number
+  enabled: boolean
+  amount: number
+  packageId: number | null
+  packageName: string | null
+  planId: number | null
+  planName: string | null
+  days: number
+  quantity: number
+}
+
+const { t } = useI18n()
+const toast = useToast()
+
+const loading = ref(true)
+const saving = ref(false)
+const rules = ref<VipLevelRule[]>([])
+const userMetric = ref<UserVipMetric>('totalRecharge')
+const rewards = ref<EditableReward[]>([])
+const deletedRewardIds = ref<number[]>([])
+const packages = ref<Package[]>([])
+const packagePlans = ref<Record<number, PackagePlanOption[]>>({})
+const plansLoading = ref<Record<number, boolean>>({})
+let tempId = -1
+
+const enabledRules = computed(() => rules.value.filter(rule => rule.enabled))
+const packageOptions = computed(() => packages.value.filter(pkg => pkg.active === 1))
+
+const rewardsByLevel = computed(() => {
+  const map = new Map<number, EditableReward[]>()
+  for (const reward of rewards.value) {
+    const list = map.get(reward.level) || []
+    list.push(reward)
+    map.set(reward.level, list)
+  }
+  for (const list of map.values()) {
+    list.sort((a, b) => a.sortOrder - b.sortOrder || a.localId - b.localId)
+  }
+  return map
+})
+
+function toNumber(value: unknown, fallback = 0): number {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : fallback
+}
+
+function toPositiveInt(value: unknown, fallback = 1): number {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : fallback
+}
+
+function formatCurrency(value: number): string {
+  return `¥${toNumber(value).toFixed(2)}`
+}
+
+function getPackageName(packageId: number | null | undefined): string | null {
+  if (!packageId) return null
+  return packages.value.find(pkg => pkg.id === packageId)?.name || null
+}
+
+function getPlanName(packageId: number | null | undefined, planId: number | null | undefined): string | null {
+  if (!packageId || !planId) return null
+  return packagePlans.value[packageId]?.find(plan => plan.id === planId)?.name || null
+}
+
+function mapReward(reward: VipBenefitReward): EditableReward {
+  return {
+    localId: reward.id,
+    id: reward.id,
+    level: reward.level,
+    type: reward.type,
+    title: reward.title,
+    description: reward.description || '',
+    claimLimit: reward.claimLimit || 1,
+    sortOrder: reward.sortOrder || 0,
+    enabled: reward.enabled !== false,
+    amount: toNumber(reward.config?.amount),
+    packageId: reward.config?.packageId ? Number(reward.config.packageId) : null,
+    packageName: reward.config?.packageName || null,
+    planId: reward.config?.planId ? Number(reward.config.planId) : null,
+    planName: reward.config?.planName || null,
+    days: toPositiveInt(reward.config?.days, 30),
+    quantity: toPositiveInt(reward.config?.quantity, 1)
+  }
+}
+
+function newReward(level: number): EditableReward {
+  return {
+    localId: tempId--,
+    id: null,
+    level,
+    type: 'balance',
+    title: `VIP${level} ${t('admin.vipBenefits.rewardDefaultTitle')}`,
+    description: '',
+    claimLimit: 1,
+    sortOrder: (rewardsByLevel.value.get(level)?.length || 0) * 10 + 10,
+    enabled: true,
+    amount: 0,
+    packageId: null,
+    packageName: null,
+    planId: null,
+    planName: null,
+    days: 30,
+    quantity: 1
+  }
+}
+
+function addReward(level: number): void {
+  rewards.value.push(newReward(level))
+}
+
+function removeReward(reward: EditableReward): void {
+  if (reward.id) {
+    deletedRewardIds.value.push(reward.id)
+  }
+  rewards.value = rewards.value.filter(item => item.localId !== reward.localId)
+}
+
+async function ensurePlans(packageId: number | null | undefined): Promise<void> {
+  if (!packageId || packagePlans.value[packageId] || plansLoading.value[packageId]) return
+  plansLoading.value = { ...plansLoading.value, [packageId]: true }
+  try {
+    const response = await api.packages.getPlans(packageId, { activeOnly: true })
+    packagePlans.value = {
+      ...packagePlans.value,
+      [packageId]: response.plans || []
+    }
+  } catch (error: any) {
+    toast.error(error?.message || t('admin.vipBenefits.loadPlansFailed'))
+  } finally {
+    plansLoading.value = { ...plansLoading.value, [packageId]: false }
+  }
+}
+
+async function handlePackageChange(reward: EditableReward): Promise<void> {
+  reward.packageId = reward.packageId ? Number(reward.packageId) : null
+  reward.packageName = getPackageName(reward.packageId)
+  reward.planId = null
+  reward.planName = null
+  await ensurePlans(reward.packageId)
+}
+
+function handlePlanChange(reward: EditableReward): void {
+  reward.planId = reward.planId ? Number(reward.planId) : null
+  reward.packageName = getPackageName(reward.packageId)
+  reward.planName = getPlanName(reward.packageId, reward.planId)
+}
+
+function normalizeRewardPayload(reward: EditableReward): VipBenefitRewardInput {
+  const base = {
+    level: reward.level,
+    type: reward.type,
+    title: reward.title.trim(),
+    description: reward.description.trim() || null,
+    claimLimit: Math.max(1, Math.floor(toNumber(reward.claimLimit, 1))),
+    sortOrder: Math.max(0, Math.floor(toNumber(reward.sortOrder))),
+    enabled: reward.enabled
+  }
+
+  if (reward.type === 'balance') {
+    return {
+      ...base,
+      config: {
+        amount: Math.round(toNumber(reward.amount) * 100) / 100
+      }
+    }
+  }
+  if (reward.type === 'points') {
+    return {
+      ...base,
+      config: {
+        amount: Math.max(1, Math.floor(toNumber(reward.amount)))
+      }
+    }
+  }
+
+  return {
+    ...base,
+    config: {
+      packageId: reward.packageId,
+      packageName: getPackageName(reward.packageId) || reward.packageName,
+      planId: reward.planId,
+      planName: getPlanName(reward.packageId, reward.planId) || reward.planName,
+      days: Math.max(1, Math.floor(toNumber(reward.days, 30))),
+      quantity: Math.max(1, Math.min(10, Math.floor(toNumber(reward.quantity, 1))))
+    }
+  }
+}
+
+function validateRewards(): boolean {
+  for (const reward of rewards.value) {
+    if (!reward.title.trim()) {
+      toast.error(t('admin.vipBenefits.titleRequired', { level: reward.level }))
+      return false
+    }
+    if (toPositiveInt(reward.claimLimit, 0) <= 0) {
+      toast.error(t('admin.vipBenefits.claimLimitInvalid', { level: reward.level }))
+      return false
+    }
+    if ((reward.type === 'balance' || reward.type === 'points') && toNumber(reward.amount) <= 0) {
+      toast.error(t('admin.vipBenefits.amountInvalid', { level: reward.level }))
+      return false
+    }
+    if (reward.type === 'instance') {
+      if (!reward.packageId || !reward.planId) {
+        toast.error(t('admin.vipBenefits.instancePlanRequired', { level: reward.level }))
+        return false
+      }
+      if (toPositiveInt(reward.days, 0) <= 0 || toPositiveInt(reward.quantity, 0) <= 0) {
+        toast.error(t('admin.vipBenefits.instanceQuantityInvalid', { level: reward.level }))
+        return false
+      }
+    }
+  }
+  return true
+}
+
+async function loadData(): Promise<void> {
+  loading.value = true
+  try {
+    const [rulesResponse, rewardsResponse, packagesResponse] = await Promise.all([
+      api.admin.getVipLevelRules('user'),
+      api.admin.getVipBenefitRewards(),
+      api.packages.list({ all: true, scope: 'official' })
+    ])
+    userMetric.value = rulesResponse.userMetric === 'totalConsume' ? 'totalConsume' : 'totalRecharge'
+    rules.value = rulesResponse.rules || []
+    rewards.value = (rewardsResponse.rewards || []).map(mapReward)
+    packages.value = packagesResponse.packages || []
+    deletedRewardIds.value = []
+
+    const packageIds = new Set<number>()
+    for (const reward of rewards.value) {
+      if (reward.packageId) packageIds.add(reward.packageId)
+    }
+    await Promise.all(Array.from(packageIds).map(id => ensurePlans(id)))
+  } catch (error: any) {
+    toast.error(error?.message || t('admin.vipBenefits.loadFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveRewards(): Promise<void> {
+  if (!validateRewards()) return
+  saving.value = true
+  try {
+    for (const id of deletedRewardIds.value) {
+      await api.admin.deleteVipBenefitReward(id)
+    }
+
+    for (const reward of rewards.value) {
+      const payload = normalizeRewardPayload(reward)
+      if (reward.id) {
+        await api.admin.updateVipBenefitReward(reward.id, payload)
+      } else {
+        await api.admin.createVipBenefitReward(payload)
+      }
+    }
+
+    toast.success(t('admin.vipBenefits.saveSuccess'))
+    await loadData()
+  } catch (error: any) {
+    toast.error(error?.message || t('admin.vipBenefits.saveFailed'))
+  } finally {
+    saving.value = false
+  }
+}
+
+function rewardPreview(reward: EditableReward): string {
+  if (reward.type === 'balance') {
+    return formatCurrency(toNumber(reward.amount))
+  }
+  if (reward.type === 'points') {
+    return t('admin.vipBenefits.pointsPreview', { amount: Math.floor(toNumber(reward.amount)) })
+  }
+  const planName = getPlanName(reward.packageId, reward.planId) || reward.planName || t('admin.vipBenefits.selectPlan')
+  return t('admin.vipBenefits.instancePreviewWithPlan', { plan: planName, days: reward.days, quantity: reward.quantity })
+}
+
+onMounted(() => {
+  void loadData()
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="card p-5">
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="min-w-0">
+          <h2 class="text-lg font-semibold text-themed">{{ t('admin.vipBenefits.title') }}</h2>
+          <p class="mt-1 text-sm text-themed-muted">{{ t('admin.vipBenefits.description') }}</p>
+        </div>
+        <button class="btn btn-primary self-start lg:self-auto" :disabled="loading || saving" @click="saveRewards">
+          {{ saving ? t('common.saving') : t('admin.vipBenefits.save') }}
+        </button>
+      </div>
+
+      <div class="mt-4 grid gap-3 text-sm md:grid-cols-3">
+        <div class="rounded border border-themed bg-themed-secondary/30 p-3">
+          <div class="font-semibold text-themed">{{ t('admin.vipBenefits.balanceTitle') }}</div>
+          <div class="mt-1 text-xs text-themed-muted">{{ t('admin.vipBenefits.balanceDesc') }}</div>
+        </div>
+        <div class="rounded border border-themed bg-themed-secondary/30 p-3">
+          <div class="font-semibold text-themed">{{ t('admin.vipBenefits.pointsTitle') }}</div>
+          <div class="mt-1 text-xs text-themed-muted">{{ t('admin.vipBenefits.pointsDesc') }}</div>
+        </div>
+        <div class="rounded border border-themed bg-themed-secondary/30 p-3">
+          <div class="font-semibold text-themed">{{ t('admin.vipBenefits.instanceTitle') }}</div>
+          <div class="mt-1 text-xs text-themed-muted">{{ t('admin.vipBenefits.instanceDesc') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="loading" class="card p-6">
+      <SkeletonLoader type="table" :rows="5" />
+    </div>
+
+    <div v-else-if="enabledRules.length === 0" class="card p-8 text-center text-sm text-themed-muted">
+      {{ t('admin.vipBenefits.noEnabledLevels') }}
+    </div>
+
+    <div v-else class="space-y-4">
+      <section v-for="rule in enabledRules" :key="rule.level" class="card overflow-hidden">
+        <div class="flex flex-col gap-3 border-b border-themed px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
+          <div class="flex items-center gap-3">
+            <span
+              class="inline-flex items-center rounded-full border px-3 py-1 text-sm font-semibold"
+              :style="getVipBadgeInlineStyle(normalizeVipBadgeStyle(rule.badgeStyle || rule.benefits?.badgeStyle, rule.level))"
+            >
+              VIP{{ rule.level }}
+            </span>
+            <div>
+              <div class="font-semibold text-themed">{{ t('admin.vipBenefits.levelTitle', { level: rule.level }) }}</div>
+              <div class="text-xs text-themed-muted">{{ t('admin.vipBenefits.levelHint') }}</div>
+            </div>
+          </div>
+          <button class="btn btn-secondary self-start lg:self-auto" type="button" @click="addReward(rule.level)">
+            {{ t('admin.vipBenefits.addReward') }}
+          </button>
+        </div>
+
+        <div v-if="(rewardsByLevel.get(rule.level) || []).length === 0" class="p-6 text-sm text-themed-muted">
+          {{ t('admin.vipBenefits.noRewardsForLevel') }}
+        </div>
+
+        <div v-else class="grid gap-4 p-5 xl:grid-cols-2">
+          <article
+            v-for="reward in rewardsByLevel.get(rule.level) || []"
+            :key="reward.localId"
+            class="rounded border border-themed p-4"
+          >
+            <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span class="rounded-full bg-themed-secondary px-2.5 py-1 text-xs font-medium text-themed">
+                    {{ t(`admin.vipBenefits.types.${reward.type}`) }}
+                  </span>
+                  <span class="text-xs text-themed-muted">{{ rewardPreview(reward) }}</span>
+                </div>
+                <label class="mt-3 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.rewardTitle') }}</label>
+                <input v-model="reward.title" class="input mt-1" maxlength="80" />
+              </div>
+              <button class="btn btn-ghost text-red-500 hover:text-red-600" type="button" @click="removeReward(reward)">
+                {{ t('common.delete') }}
+              </button>
+            </div>
+
+            <div class="grid gap-3 md:grid-cols-2">
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.rewardType') }}</label>
+                <select v-model="reward.type" class="input">
+                  <option value="balance">{{ t('admin.vipBenefits.types.balance') }}</option>
+                  <option value="points">{{ t('admin.vipBenefits.types.points') }}</option>
+                  <option value="instance">{{ t('admin.vipBenefits.types.instance') }}</option>
+                </select>
+              </div>
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.claimLimit') }}</label>
+                <input v-model="reward.claimLimit" type="number" min="1" max="100" step="1" class="input" />
+              </div>
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.sortOrder') }}</label>
+                <input v-model="reward.sortOrder" type="number" min="0" step="1" class="input" />
+              </div>
+              <label class="flex items-center gap-2 pt-6 text-sm text-themed">
+                <input v-model="reward.enabled" type="checkbox" class="rounded border-themed text-primary-600 focus:ring-primary-500" />
+                {{ reward.enabled ? t('admin.vipBenefits.enabled') : t('admin.vipBenefits.disabled') }}
+              </label>
+            </div>
+
+            <div class="mt-3">
+              <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.rewardDescription') }}</label>
+              <textarea v-model="reward.description" class="input min-h-20 resize-y" maxlength="300"></textarea>
+            </div>
+
+            <div v-if="reward.type === 'balance' || reward.type === 'points'" class="mt-3">
+              <label class="mb-1.5 block text-xs font-medium text-themed-muted">
+                {{ reward.type === 'balance' ? t('admin.vipBenefits.balanceAmount') : t('admin.vipBenefits.pointsAmount') }}
+              </label>
+              <input
+                v-model="reward.amount"
+                type="number"
+                min="0"
+                :step="reward.type === 'balance' ? '0.01' : '1'"
+                class="input"
+              />
+            </div>
+
+            <div v-else class="mt-3 grid gap-3 md:grid-cols-2">
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.package') }}</label>
+                <select v-model.number="reward.packageId" class="input" @change="handlePackageChange(reward)">
+                  <option :value="0">{{ t('admin.vipBenefits.selectPackage') }}</option>
+                  <option v-for="pkg in packageOptions" :key="pkg.id" :value="pkg.id">{{ pkg.name }}</option>
+                </select>
+              </div>
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.plan') }}</label>
+                <select
+                  v-model.number="reward.planId"
+                  class="input"
+                  :disabled="!reward.packageId || plansLoading[reward.packageId]"
+                  @change="handlePlanChange(reward)"
+                >
+                  <option :value="0">
+                    {{ plansLoading[reward.packageId || 0] ? t('common.loading') : t('admin.vipBenefits.selectPlan') }}
+                  </option>
+                  <option v-for="plan in packagePlans[reward.packageId || 0] || []" :key="plan.id" :value="plan.id">
+                    {{ plan.name }} · {{ formatCurrency(plan.price) }}
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.instanceDays') }}</label>
+                <input v-model="reward.days" type="number" min="1" step="1" class="input" />
+              </div>
+              <div>
+                <label class="mb-1.5 block text-xs font-medium text-themed-muted">{{ t('admin.vipBenefits.instanceQuantity') }}</label>
+                <input v-model="reward.quantity" type="number" min="1" max="10" step="1" class="input" />
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <div class="flex justify-end">
+        <button class="btn btn-primary" :disabled="saving" @click="saveRewards">
+          {{ saving ? t('common.saving') : t('admin.vipBenefits.save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/admin/VipLevelRulesEditor.vue b/client/src/components/admin/VipLevelRulesEditor.vue
new file mode 100644
index 0000000..d93d62a
--- /dev/null
+++ b/client/src/components/admin/VipLevelRulesEditor.vue
@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api, { type UserVipMetric, type VipConditionMode, type VipLevelRule, type VipRuleType } from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+import { getDefaultVipBadgeStyle, getVipBadgeInlineStyle, normalizeVipBadgeStyle, type VipBadgeStyle } from '@/utils/vipBadge'
+
+interface EditableVipRule {
+  level: number
+  enabled: boolean
+  conditionMode: VipConditionMode
+  badgeStyle: VipBadgeStyle
+  benefits: Record<string, unknown>
+  minRecharge: string | number | null
+  minConsume: string | number | null
+  minHostingIncome: string | number | null
+  minHostingInstances: string | number | null
+}
+
+const props = defineProps<{
+  type: VipRuleType
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+const loading = ref(true)
+const saving = ref(false)
+const maxLevel = ref(10)
+const rules = ref<EditableVipRule[]>([])
+const userMetric = ref<UserVipMetric>('totalRecharge')
+
+const isUserRules = computed(() => props.type === 'user')
+const title = computed(() => isUserRules.value ? t('admin.vipRules.userTitle') : t('admin.vipRules.hostingTitle'))
+const description = computed(() => isUserRules.value ? t('admin.vipRules.userDescription') : t('admin.vipRules.hostingDescription'))
+const userMetricThresholdLabel = computed(() => userMetric.value === 'totalRecharge'
+  ? t('admin.vipRules.minRecharge')
+  : t('admin.vipRules.minConsume')
+)
+
+function emptyRule(level: number): EditableVipRule {
+  return {
+    level,
+    enabled: false,
+    conditionMode: 'any',
+    badgeStyle: getDefaultVipBadgeStyle(level),
+    benefits: {},
+    minRecharge: '',
+    minConsume: '',
+    minHostingIncome: '',
+    minHostingInstances: ''
+  }
+}
+
+function toInputValue(value: number | null | undefined): string {
+  return value === null || value === undefined || value <= 0 ? '' : String(value)
+}
+
+function mapApiRule(rule: VipLevelRule): EditableVipRule {
+  return {
+    level: rule.level,
+    enabled: rule.enabled,
+    conditionMode: rule.conditionMode,
+    badgeStyle: normalizeVipBadgeStyle(rule.badgeStyle || rule.benefits?.badgeStyle, rule.level),
+    benefits: rule.benefits || {},
+    minRecharge: toInputValue(rule.minRecharge),
+    minConsume: toInputValue(rule.minConsume),
+    minHostingIncome: toInputValue(rule.minHostingIncome),
+    minHostingInstances: toInputValue(rule.minHostingInstances)
+  }
+}
+
+function normalizeInputValue(value: string | number | null | undefined): string {
+  return value === null || value === undefined ? '' : String(value).trim()
+}
+
+function parseOptionalNumber(value: string | number | null | undefined): number | null {
+  const trimmed = normalizeInputValue(value)
+  if (!trimmed) return null
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null
+}
+
+function parseOptionalInteger(value: string | number | null | undefined): number | null {
+  const trimmed = normalizeInputValue(value)
+  if (!trimmed) return null
+  const parsed = Number(trimmed)
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null
+}
+
+function hasInvalidPositiveNumber(value: string | number | null | undefined): boolean {
+  const trimmed = normalizeInputValue(value)
+  if (!trimmed) return false
+  const parsed = Number(trimmed)
+  return !Number.isFinite(parsed) || parsed <= 0
+}
+
+function isValidHexColor(value: string): boolean {
+  return /^#[0-9a-fA-F]{6}$/.test(value)
+}
+
+function hasCondition(rule: EditableVipRule): boolean {
+  if (isUserRules.value) {
+    return userMetric.value === 'totalRecharge'
+      ? parseOptionalNumber(rule.minRecharge) !== null
+      : parseOptionalNumber(rule.minConsume) !== null
+  }
+  return parseOptionalNumber(rule.minHostingIncome) !== null || parseOptionalInteger(rule.minHostingInstances) !== null
+}
+
+function buildPayload(): VipLevelRule[] {
+  return rules.value
+    .map(rule => ({
+      type: props.type,
+      level: rule.level,
+      enabled: rule.enabled,
+      conditionMode: isUserRules.value ? 'any' : rule.conditionMode,
+      userMetric: isUserRules.value ? userMetric.value : undefined,
+      minRecharge: isUserRules.value && userMetric.value === 'totalRecharge' ? parseOptionalNumber(rule.minRecharge) : null,
+      minConsume: isUserRules.value && userMetric.value === 'totalConsume' ? parseOptionalNumber(rule.minConsume) : null,
+      minHostingIncome: isUserRules.value ? null : parseOptionalNumber(rule.minHostingIncome),
+      minHostingInstances: isUserRules.value ? null : parseOptionalInteger(rule.minHostingInstances),
+      benefits: {
+        ...rule.benefits,
+        badgeStyle: normalizeVipBadgeStyle(rule.badgeStyle, rule.level)
+      }
+    }))
+}
+
+function hydrateRules(apiRules: VipLevelRule[]) {
+  const ruleMap = new Map(apiRules.map(rule => [rule.level, mapApiRule(rule)]))
+  rules.value = Array.from({ length: maxLevel.value }, (_, index) => {
+    const level = index + 1
+    return ruleMap.get(level) || emptyRule(level)
+  })
+}
+
+async function loadRules() {
+  loading.value = true
+  try {
+    const response = await api.admin.getVipLevelRules(props.type)
+    maxLevel.value = response.maxLevel || 10
+    if (isUserRules.value) {
+      userMetric.value = response.userMetric === 'totalConsume' ? 'totalConsume' : 'totalRecharge'
+    }
+    hydrateRules(response.rules || [])
+  } catch (error: any) {
+    toast.error(t('admin.vipRules.loadFailed', { message: error?.message || t('admin.vipRules.unknownError') }))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveRules() {
+  for (const rule of rules.value) {
+    if (isUserRules.value) {
+      const thresholdValue = userMetric.value === 'totalRecharge' ? rule.minRecharge : rule.minConsume
+      if (hasInvalidPositiveNumber(thresholdValue)) {
+        toast.error(t('admin.vipRules.moneyThresholdInvalid', { level: rule.level }))
+        return
+      }
+    } else if (hasInvalidPositiveNumber(rule.minHostingIncome)) {
+      toast.error(t('admin.vipRules.moneyThresholdInvalid', { level: rule.level }))
+      return
+    }
+
+    if (rule.enabled && !hasCondition(rule)) {
+      toast.error(t('admin.vipRules.conditionRequired', { level: rule.level }))
+      return
+    }
+    if (!isUserRules.value && normalizeInputValue(rule.minHostingInstances) && parseOptionalInteger(rule.minHostingInstances) === null) {
+      toast.error(t('admin.vipRules.instanceThresholdInvalid', { level: rule.level }))
+      return
+    }
+    if (!isValidHexColor(rule.badgeStyle.backgroundColor) || !isValidHexColor(rule.badgeStyle.textColor)) {
+      toast.error(t('admin.vipRules.colorInvalid', { level: rule.level }))
+      return
+    }
+  }
+
+  saving.value = true
+  try {
+    const response = await api.admin.updateVipLevelRules(
+      props.type,
+      buildPayload(),
+      isUserRules.value ? { userMetric: userMetric.value } : undefined
+    )
+    if (isUserRules.value) {
+      userMetric.value = response.userMetric === 'totalConsume' ? 'totalConsume' : 'totalRecharge'
+    }
+    hydrateRules(response.rules || [])
+    toast.success(t('admin.vipRules.saveSuccess'))
+  } catch (error: any) {
+    toast.error(error?.message || t('admin.vipRules.saveFailed'))
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  void loadRules()
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="card p-5">
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="min-w-0">
+          <h2 class="text-lg font-semibold text-themed">{{ title }}</h2>
+          <p class="mt-1 text-sm text-themed-muted">{{ description }}</p>
+        </div>
+        <button class="btn btn-primary self-start lg:self-auto" :disabled="loading || saving" @click="saveRules">
+          {{ saving ? t('common.saving') : t('admin.vipRules.save') }}
+        </button>
+      </div>
+
+      <div
+        v-if="isUserRules"
+        class="mt-5 rounded-lg border border-themed bg-themed-secondary/30 p-4"
+      >
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <div class="text-sm font-semibold text-themed">{{ t('admin.vipRules.userMetricTitle') }}</div>
+            <div class="mt-1 text-xs text-themed-muted">{{ t('admin.vipRules.userMetricHint') }}</div>
+          </div>
+          <div class="inline-grid grid-cols-2 gap-1 rounded-lg border border-themed bg-themed-primary p-1">
+            <button
+              type="button"
+              class="rounded-md px-3 py-2 text-sm font-medium transition-colors"
+              :class="userMetric === 'totalRecharge' ? 'bg-themed-secondary text-themed shadow-sm' : 'text-themed-muted hover:text-themed'"
+              @click="userMetric = 'totalRecharge'"
+            >
+              {{ t('admin.vipRules.metricRecharge') }}
+            </button>
+            <button
+              type="button"
+              class="rounded-md px-3 py-2 text-sm font-medium transition-colors"
+              :class="userMetric === 'totalConsume' ? 'bg-themed-secondary text-themed shadow-sm' : 'text-themed-muted hover:text-themed'"
+              @click="userMetric = 'totalConsume'"
+            >
+              {{ t('admin.vipRules.metricConsume') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="loading" class="card p-6">
+      <SkeletonLoader type="table" :rows="6" />
+    </div>
+
+    <div v-else class="card overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-themed">
+          <thead class="bg-themed-secondary/40">
+            <tr>
+              <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">
+                {{ t('admin.vipRules.level') }}
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">
+                {{ t('admin.vipRules.badgeBgColor') }}
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">
+                {{ t('admin.vipRules.badgeTextColor') }}
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">
+                {{ t('admin.vipRules.enabled') }}
+              </th>
+              <th
+                v-if="!isUserRules"
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted"
+              >
+                {{ t('admin.vipRules.mode') }}
+              </th>
+              <th
+                v-if="isUserRules"
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted"
+              >
+                {{ userMetricThresholdLabel }}
+              </th>
+              <th
+                v-if="!isUserRules"
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted"
+              >
+                {{ t('admin.vipRules.minHostingIncome') }}
+              </th>
+              <th
+                v-if="!isUserRules"
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted"
+              >
+                {{ t('admin.vipRules.minHostingInstances') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed bg-themed-primary">
+            <tr v-for="rule in rules" :key="rule.level" class="hover:bg-themed-hover">
+              <td class="whitespace-nowrap px-4 py-4">
+                <span
+                  class="inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold"
+                  :style="getVipBadgeInlineStyle(rule.badgeStyle)"
+                >
+                  VIP{{ rule.level }}
+                </span>
+              </td>
+              <td class="min-w-[170px] px-4 py-4">
+                <div class="flex items-center gap-2">
+                  <input
+                    v-model="rule.badgeStyle.backgroundColor"
+                    type="color"
+                    class="h-9 w-10 rounded border border-themed bg-transparent p-1"
+                    :aria-label="t('admin.vipRules.badgeBgColor')"
+                  />
+                  <input
+                    v-model.trim="rule.badgeStyle.backgroundColor"
+                    type="text"
+                    maxlength="7"
+                    class="input font-mono text-sm"
+                    placeholder="#FEF3C7"
+                  />
+                </div>
+              </td>
+              <td class="min-w-[170px] px-4 py-4">
+                <div class="flex items-center gap-2">
+                  <input
+                    v-model="rule.badgeStyle.textColor"
+                    type="color"
+                    class="h-9 w-10 rounded border border-themed bg-transparent p-1"
+                    :aria-label="t('admin.vipRules.badgeTextColor')"
+                  />
+                  <input
+                    v-model.trim="rule.badgeStyle.textColor"
+                    type="text"
+                    maxlength="7"
+                    class="input font-mono text-sm"
+                    placeholder="#92400E"
+                  />
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-4 py-4">
+                <label class="inline-flex items-center gap-2 text-sm text-themed">
+                  <input v-model="rule.enabled" type="checkbox" class="rounded border-themed text-primary-600 focus:ring-primary-500" />
+                  {{ rule.enabled ? t('common.enabled') : t('common.disabled') }}
+                </label>
+              </td>
+              <td v-if="!isUserRules" class="min-w-[150px] px-4 py-4">
+                <select v-model="rule.conditionMode" class="input">
+                  <option value="any">{{ t('admin.vipRules.modeAny') }}</option>
+                  <option value="all">{{ t('admin.vipRules.modeAll') }}</option>
+                </select>
+              </td>
+              <td v-if="isUserRules" class="min-w-[180px] px-4 py-4">
+                <input
+                  v-if="userMetric === 'totalRecharge'"
+                  v-model="rule.minRecharge"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input"
+                  :placeholder="t('admin.vipRules.noLimit')"
+                />
+                <input
+                  v-else
+                  v-model="rule.minConsume"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input"
+                  :placeholder="t('admin.vipRules.noLimit')"
+                />
+              </td>
+              <td v-if="!isUserRules" class="min-w-[190px] px-4 py-4">
+                <input
+                  v-model="rule.minHostingIncome"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input"
+                  :placeholder="t('admin.vipRules.noLimit')"
+                />
+              </td>
+              <td v-if="!isUserRules" class="min-w-[170px] px-4 py-4">
+                <input
+                  v-model="rule.minHostingInstances"
+                  type="number"
+                  min="0"
+                  step="1"
+                  class="input"
+                  :placeholder="t('admin.vipRules.noLimit')"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/entertainment/BadgeBatchRewardModal.vue b/client/src/components/entertainment/BadgeBatchRewardModal.vue
new file mode 100644
index 0000000..af7e585
--- /dev/null
+++ b/client/src/components/entertainment/BadgeBatchRewardModal.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import BadgeImage from '@/components/BadgeImage.vue'
+import type { BadgeOwnership } from '@/types/api'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  badges: BadgeOwnership[]
+  title: string
+  subtitle?: string | null
+  confirmLabel?: string | null
+  primaryActionLabel?: string | null
+  primaryActionDisabled?: boolean
+}>(), {
+  subtitle: null,
+  confirmLabel: null,
+  primaryActionLabel: null,
+  primaryActionDisabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'primary-action'): void
+}>()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      leave-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="visible"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+        @click.self="emit('close')"
+      >
+        <div class="modal-content !max-w-6xl w-full max-h-[calc(100vh-2rem)] overflow-hidden animate-scale-in flex flex-col">
+          <div class="modal-header relative border-b-0 pb-2">
+            <div>
+              <h3 class="text-lg font-semibold text-themed">{{ title }}</h3>
+              <p v-if="subtitle" class="mt-1 text-sm text-themed-muted">
+                {{ subtitle }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="rounded-full p-2 text-themed-muted hover:bg-themed-hover hover:text-themed transition-colors"
+              @click="emit('close')"
+            >
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body pt-2 flex-1 overflow-y-auto">
+            <div class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+              <article
+                v-for="ownership in badges"
+                :key="ownership.id"
+                class="rounded-2xl border border-themed bg-themed-tertiary p-3"
+              >
+                <div class="flex h-full flex-col items-center text-center">
+                  <div class="rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-cyan-500/10 to-transparent p-2.5">
+                    <BadgeImage :badge-id="ownership.badgeId" :alt="ownership.badgeLabel" :size="58" variant="icon" />
+                  </div>
+                  <div class="mt-3 w-full text-[11px] uppercase tracking-[0.16em] text-themed-faint truncate">
+                    {{ ownership.seriesTitle }}
+                  </div>
+                  <div class="mt-1 w-full text-sm font-semibold text-themed truncate">
+                    {{ ownership.badgeName }}
+                  </div>
+                  <div class="mt-1 w-full text-xs text-themed-muted line-clamp-2">
+                    {{ ownership.badgeLabel }}
+                  </div>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="modal-header border-b-0 border-t border-themed pt-4">
+            <div />
+            <div class="flex flex-col-reverse gap-3 sm:flex-row">
+              <button class="btn btn-secondary" @click="emit('close')">
+                {{ confirmLabel }}
+              </button>
+              <button
+                v-if="primaryActionLabel"
+                class="btn btn-primary"
+                :disabled="primaryActionDisabled"
+                @click="emit('primary-action')"
+              >
+                {{ primaryActionLabel }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/entertainment/BadgeCenter.vue b/client/src/components/entertainment/BadgeCenter.vue
new file mode 100644
index 0000000..be0890f
--- /dev/null
+++ b/client/src/components/entertainment/BadgeCenter.vue
@@ -0,0 +1,609 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import BadgeImage from '@/components/BadgeImage.vue'
+import BadgeBatchRewardModal from '@/components/entertainment/BadgeBatchRewardModal.vue'
+import BadgeRewardModal from '@/components/entertainment/BadgeRewardModal.vue'
+import InstanceSelector from '@/components/InstanceSelector.vue'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/stores/toast'
+import type { BadgeOverview, BadgeOwnership } from '@/types/api'
+import { translateError } from '@/utils/errorHandler'
+
+const props = withDefaults(defineProps<{
+  initialTab?: 'draw' | 'my'
+}>(), {
+  initialTab: 'draw'
+})
+
+const emit = defineEmits<{
+  (e: 'points-updated'): void
+}>()
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const toast = useToast()
+
+type BadgeRewardModalState = {
+  visible: boolean
+  mode: 'draw' | 'select'
+  ownership: BadgeOwnership | null
+  remainingPoints: number | null
+}
+
+const loading = ref(true)
+const actionLoading = ref(false)
+const activeTab = ref<'draw' | 'my'>(props.initialTab)
+const selectedBadgeId = ref<string | null>(null)
+const selectedSeriesId = ref<'all' | string>('all')
+const overview = ref<BadgeOverview | null>(null)
+const instanceSelectionMap = ref<Record<number, number | null>>({})
+const badgeRewardModal = ref<BadgeRewardModalState>({
+  visible: false,
+  mode: 'draw',
+  ownership: null,
+  remainingPoints: null
+})
+const badgeMultiDrawRewards = ref<BadgeOwnership[]>([])
+const showBadgeMultiDrawModal = ref(false)
+
+const badgeTypeOptions = computed(() => {
+  const groups = new Map<string, { id: string; title: string }>()
+  for (const badge of overview.value?.catalog || []) {
+    if (!groups.has(badge.seriesId)) {
+      groups.set(badge.seriesId, {
+        id: badge.seriesId,
+        title: badge.seriesNameZh || badge.seriesTitle
+      })
+    }
+  }
+  return Array.from(groups.values())
+})
+
+const groupedCatalog = computed(() => {
+  const groups = new Map<string, {
+    id: string
+    title: string
+    description: string
+    items: BadgeOverview['catalog']
+  }>()
+
+  for (const badge of overview.value?.catalog || []) {
+    if (selectedSeriesId.value !== 'all' && badge.seriesId !== selectedSeriesId.value) {
+      continue
+    }
+
+    const existing = groups.get(badge.seriesId)
+    if (existing) {
+      existing.items.push(badge)
+      continue
+    }
+
+    groups.set(badge.seriesId, {
+      id: badge.seriesId,
+      title: badge.seriesNameZh || badge.seriesTitle,
+      description: badge.seriesDescription,
+      items: [badge]
+    })
+  }
+
+  return Array.from(groups.values())
+})
+
+const availableOwnerships = computed(() =>
+  (overview.value?.ownerships || []).filter(item => {
+    const sameSeries = selectedSeriesId.value === 'all' || item.seriesId === selectedSeriesId.value
+    return sameSeries && !item.applicationTarget
+  })
+)
+
+const appliedOwnerships = computed(() =>
+  (overview.value?.ownerships || []).filter(item => {
+    const sameSeries = selectedSeriesId.value === 'all' || item.seriesId === selectedSeriesId.value
+    return sameSeries && !!item.applicationTarget
+  })
+)
+
+const ownershipCards = computed(() => [...appliedOwnerships.value, ...availableOwnerships.value])
+
+const targetInstances = computed(() => overview.value?.instances || [])
+
+const canDrawAgainFromRewardModal = computed(() => {
+  if (badgeRewardModal.value.mode !== 'draw' || !overview.value) return false
+  const remainingPoints = badgeRewardModal.value.remainingPoints ?? overview.value.currentPoints
+  return remainingPoints >= overview.value.costs.randomDraw
+})
+
+const canDrawMulti = computed(() => {
+  if (!overview.value) return false
+  return overview.value.currentPoints >= overview.value.costs.randomDraw * 10
+})
+
+function getOwnedCount(badgeId: string): number {
+  return (overview.value?.ownerships || []).filter(item => item.badgeId === badgeId).length
+}
+
+function formatDate(value: string | null): string {
+  if (!value) return t('common.none')
+  return new Date(value).toLocaleString()
+}
+
+function getBadgeSelectionClass(badgeId: string): string {
+  return selectedBadgeId.value === badgeId
+    ? 'border-blue-500 bg-blue-500/10 shadow-lg shadow-blue-500/10'
+    : 'border-themed hover:border-blue-500/40 hover:bg-themed-hover'
+}
+
+function getOwnershipStatusText(target: 'avatar' | 'instance' | null): string {
+  if (target === 'avatar') return t('entertainment.badges.statusAvatar')
+  if (target === 'instance') return t('entertainment.badges.statusInstance')
+  return t('entertainment.badges.statusUnused')
+}
+
+function getOwnershipStatusClass(target: 'avatar' | 'instance' | null): string {
+  if (target === 'avatar') return 'border-blue-500/30 bg-blue-500/10 text-blue-500'
+  if (target === 'instance') return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-500'
+  return 'border-themed bg-themed-tertiary text-themed-secondary'
+}
+
+function getOwnershipCardClass(target: 'avatar' | 'instance' | null): string {
+  if (target === 'avatar') {
+    return 'border-blue-500/30 bg-themed bg-gradient-to-br from-blue-500/10 via-transparent to-transparent shadow-lg shadow-blue-500/5'
+  }
+  if (target === 'instance') {
+    return 'border-emerald-500/30 bg-themed bg-gradient-to-br from-emerald-500/10 via-transparent to-transparent shadow-lg shadow-emerald-500/5'
+  }
+  return 'border-themed bg-themed shadow-sm'
+}
+
+function getOwnershipGlowClass(target: 'avatar' | 'instance' | null): string {
+  if (target === 'avatar') return 'bg-blue-500/20'
+  if (target === 'instance') return 'bg-emerald-500/20'
+  return 'bg-slate-400/10'
+}
+
+function getSourceText(source: string): string {
+  if (source === 'select') return t('entertainment.badges.sourceSelect')
+  if (source === 'lottery') return t('entertainment.badges.sourceLottery')
+  if (source === 'admin_grant') return t('entertainment.badges.sourceAdminGrant')
+  return t('entertainment.badges.sourceDraw')
+}
+
+function openBadgeRewardModal(mode: 'draw' | 'select', ownership: BadgeOwnership, remainingPoints: number) {
+  badgeRewardModal.value = {
+    visible: true,
+    mode,
+    ownership,
+    remainingPoints
+  }
+}
+
+function closeBadgeRewardModal() {
+  badgeRewardModal.value.visible = false
+}
+
+function jumpToMyBadges() {
+  activeTab.value = 'my'
+  closeBadgeRewardModal()
+}
+
+async function drawRandomBadgeFromRewardModal() {
+  if (!canDrawAgainFromRewardModal.value || actionLoading.value) return
+  await drawRandomBadge()
+}
+
+async function loadOverview() {
+  loading.value = true
+  try {
+    overview.value = await api.entertainment.getBadgeOverview()
+    if (authStore.user) {
+      authStore.user.avatarBadgeId = overview.value.avatarBadgeId
+    }
+
+    if (!selectedBadgeId.value && overview.value.catalog.length > 0) {
+      selectedBadgeId.value = overview.value.catalog[0].id
+    }
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function drawRandomBadge() {
+  if (!overview.value) return
+  actionLoading.value = true
+  try {
+    const result = await api.entertainment.drawBadgeRandom()
+    openBadgeRewardModal('draw', result.ownership, result.currentPoints)
+    await loadOverview()
+    emit('points-updated')
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function drawRandomBadgeMulti() {
+  if (!overview.value) return
+  const totalCost = overview.value.costs.randomDraw * 10
+  if (overview.value.currentPoints < totalCost) {
+    toast.warning(t('entertainment.notEnoughPointsForMulti', {
+      required: totalCost,
+      current: overview.value.currentPoints
+    }))
+    return
+  }
+
+  actionLoading.value = true
+  try {
+    const result = await api.entertainment.drawBadgeRandomMulti()
+    badgeMultiDrawRewards.value = result.ownerships || []
+    showBadgeMultiDrawModal.value = badgeMultiDrawRewards.value.length > 0
+    await loadOverview()
+    emit('points-updated')
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function selectBadge() {
+  if (!selectedBadgeId.value) {
+    toast.warning(t('entertainment.badges.selectRequired'))
+    return
+  }
+
+  actionLoading.value = true
+  try {
+    const result = await api.entertainment.drawBadgeSelect(selectedBadgeId.value)
+    openBadgeRewardModal('select', result.ownership, result.currentPoints)
+    await loadOverview()
+    emit('points-updated')
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function applyToAvatar(ownershipId: number) {
+  actionLoading.value = true
+  try {
+    await api.entertainment.applyBadgeToAvatar(ownershipId)
+    toast.success(t('entertainment.badges.applyAvatarSuccess'))
+    await loadOverview()
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function applyToInstance(ownershipId: number) {
+  const instanceId = instanceSelectionMap.value[ownershipId]
+  if (!instanceId) {
+    toast.warning(t('entertainment.badges.instanceRequired'))
+    return
+  }
+
+  actionLoading.value = true
+  try {
+    await api.entertainment.applyBadgeToInstance(ownershipId, instanceId)
+    toast.success(t('entertainment.badges.applyInstanceSuccess'))
+    await loadOverview()
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function unapplyOwnership(ownershipId: number) {
+  actionLoading.value = true
+  try {
+    await api.entertainment.unapplyBadge(ownershipId)
+    toast.success(t('entertainment.badges.unapplySuccess'))
+    await loadOverview()
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+function closeBadgeMultiDrawModal() {
+  showBadgeMultiDrawModal.value = false
+  badgeMultiDrawRewards.value = []
+}
+
+onMounted(() => {
+  loadOverview()
+})
+
+watch(groupedCatalog, groups => {
+  const visibleBadgeIds = groups.flatMap(group => group.items.map(item => item.id))
+  if (visibleBadgeIds.length === 0) {
+    selectedBadgeId.value = null
+    return
+  }
+
+  if (!selectedBadgeId.value || !visibleBadgeIds.includes(selectedBadgeId.value)) {
+    selectedBadgeId.value = visibleBadgeIds[0]
+  }
+})
+
+watch(() => props.initialTab, value => {
+  activeTab.value = value
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div v-if="loading" class="card p-8 text-center text-themed-muted">
+      {{ t('common.loading') }}...
+    </div>
+
+    <template v-else-if="overview">
+      <div class="grid gap-4 md:grid-cols-4">
+        <div class="card p-4">
+          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.currentPoints') }}</div>
+          <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.currentPoints }}</div>
+        </div>
+        <div class="card p-4">
+          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.randomTitle') }}</div>
+          <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.costs.randomDraw }}</div>
+          <div class="mt-1 text-xs text-themed-muted">{{ t('entertainment.badges.randomHint') }}</div>
+        </div>
+        <div class="card p-4">
+          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.selectTitle') }}</div>
+          <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.costs.select }}</div>
+          <div class="mt-1 text-xs text-themed-muted">{{ t('entertainment.badges.selectHint') }}</div>
+        </div>
+        <div class="card p-4">
+          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.myTitle') }}</div>
+          <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.ownerships.length }}</div>
+          <div class="mt-1 text-xs text-themed-muted">
+            {{ t('entertainment.badges.summary', { available: availableOwnerships.length, applied: appliedOwnerships.length }) }}
+          </div>
+        </div>
+      </div>
+
+      <div class="card p-2">
+        <div class="flex flex-wrap gap-2">
+          <button
+            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+            :class="selectedSeriesId === 'all' ? 'bg-themed text-themed shadow-sm border border-themed' : 'text-themed-muted hover:text-themed hover:bg-themed-hover border border-transparent'"
+            @click="selectedSeriesId = 'all'"
+          >
+            {{ t('entertainment.badges.filterAll') }}
+          </button>
+          <button
+            v-for="option in badgeTypeOptions"
+            :key="option.id"
+            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+            :class="selectedSeriesId === option.id ? 'bg-themed text-themed shadow-sm border border-themed' : 'text-themed-muted hover:text-themed hover:bg-themed-hover border border-transparent'"
+            @click="selectedSeriesId = option.id"
+          >
+            {{ option.title }}
+          </button>
+        </div>
+      </div>
+
+      <div class="card p-2">
+        <div class="flex flex-wrap gap-2">
+          <button
+            class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+            :class="activeTab === 'draw' ? 'bg-blue-500 text-white' : 'text-themed-muted hover:text-themed hover:bg-themed-hover'"
+            @click="activeTab = 'draw'"
+          >
+            {{ t('entertainment.badges.drawTab') }}
+          </button>
+          <button
+            class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+            :class="activeTab === 'my' ? 'bg-blue-500 text-white' : 'text-themed-muted hover:text-themed hover:bg-themed-hover'"
+            @click="activeTab = 'my'"
+          >
+            {{ t('entertainment.badges.myTab') }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="activeTab === 'draw'" class="space-y-6">
+        <div class="grid gap-6 xl:grid-cols-[360px,1fr]">
+          <div class="xl:sticky xl:top-24 self-start">
+            <div class="card p-5 space-y-5">
+              <div>
+                <h3 class="text-lg font-semibold text-themed">{{ t('entertainment.badges.randomTitle') }}</h3>
+                <p class="text-sm text-themed-muted mt-1">{{ t('entertainment.badges.randomDescription', { points: overview.costs.randomDraw }) }}</p>
+              </div>
+              <div class="space-y-3">
+                <button
+                  class="btn btn-primary w-full"
+                  :disabled="actionLoading || overview.currentPoints < overview.costs.randomDraw"
+                  @click="drawRandomBadge"
+                >
+                  {{ actionLoading ? t('common.processing') : t('entertainment.badges.randomButton', { points: overview.costs.randomDraw }) }}
+                </button>
+                <button
+                  class="btn btn-secondary w-full"
+                  :disabled="actionLoading || !canDrawMulti"
+                  @click="drawRandomBadgeMulti"
+                >
+                  {{ actionLoading ? t('common.processing') : t('entertainment.badges.randomMultiButton', { points: overview.costs.randomDraw * 10 }) }}
+                </button>
+              </div>
+
+              <div class="border-t border-themed pt-5">
+                <h3 class="text-lg font-semibold text-themed">{{ t('entertainment.badges.selectTitle') }}</h3>
+                <p class="text-sm text-themed-muted mt-1">{{ t('entertainment.badges.selectDescription', { points: overview.costs.select }) }}</p>
+                <button
+                  class="btn btn-secondary w-full mt-4"
+                  :disabled="actionLoading || !selectedBadgeId || overview.currentPoints < overview.costs.select"
+                  @click="selectBadge"
+                >
+                  {{ actionLoading ? t('common.processing') : t('entertainment.badges.selectButton', { points: overview.costs.select }) }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="space-y-5">
+            <section
+              v-for="group in groupedCatalog"
+              :key="group.id"
+              class="card p-5"
+            >
+              <div class="mb-4">
+                <h3 class="text-base font-semibold text-themed">{{ group.title }}</h3>
+                <p class="text-sm text-themed-muted mt-1">{{ group.description }}</p>
+              </div>
+
+              <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+                <button
+                  v-for="badge in group.items"
+                  :key="badge.id"
+                  class="rounded-2xl border p-4 text-left transition-all"
+                  :class="getBadgeSelectionClass(badge.id)"
+                  @click="selectedBadgeId = badge.id"
+                >
+                  <div class="flex items-center gap-3">
+                    <BadgeImage :badge-id="badge.id" :alt="badge.fullLabel" :size="68" variant="icon" />
+                    <div class="min-w-0">
+                      <div class="font-medium text-themed">{{ badge.name }}</div>
+                      <div class="text-xs text-themed-muted mt-1">{{ badge.fullLabel }}</div>
+                      <div class="text-xs text-blue-500 mt-2">{{ t('entertainment.badges.ownedCount', { count: getOwnedCount(badge.id) }) }}</div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="space-y-4">
+        <div v-if="ownershipCards.length === 0" class="card p-8 text-center text-themed-muted">
+          {{ t('entertainment.badges.empty') }}
+        </div>
+
+        <div v-else class="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          <article
+            v-for="ownership in ownershipCards"
+            :key="ownership.id"
+            class="relative overflow-visible rounded-[24px] border p-4"
+            :class="getOwnershipCardClass(ownership.applicationTarget)"
+          >
+            <div class="absolute inset-x-0 top-0 h-20 blur-3xl opacity-70" :class="getOwnershipGlowClass(ownership.applicationTarget)" />
+
+            <div class="relative flex h-full flex-col gap-3">
+              <div class="flex items-start justify-between gap-2.5">
+                <span
+                  class="inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium"
+                  :class="getOwnershipStatusClass(ownership.applicationTarget)"
+                >
+                  {{ getOwnershipStatusText(ownership.applicationTarget) }}
+                </span>
+
+                <div class="text-right text-[11px] text-themed-muted">
+                  <div class="text-themed-faint">{{ t('entertainment.badges.obtainedAt') }}</div>
+                  <div class="mt-1 text-themed-secondary">{{ formatDate(ownership.createdAt) }}</div>
+                </div>
+              </div>
+
+              <div class="flex items-center gap-3 min-w-0">
+                <div class="rounded-[18px] border border-themed bg-themed-tertiary p-2.5 shadow-inner">
+                  <BadgeImage :badge-id="ownership.badgeId" :alt="ownership.badgeLabel" :size="72" variant="icon" />
+                </div>
+
+                <div class="min-w-0 flex-1">
+                  <h3 class="text-base font-semibold text-themed truncate">{{ ownership.badgeName }}</h3>
+                  <p class="mt-1 text-xs text-themed-muted line-clamp-2">{{ ownership.badgeLabel }}</p>
+                  <p class="mt-2 text-[11px] uppercase tracking-[0.16em] text-themed-faint">{{ ownership.seriesTitle }}</p>
+                </div>
+              </div>
+
+              <div class="rounded-2xl border border-themed bg-themed-tertiary p-3 text-xs text-themed-secondary space-y-2">
+                <div class="flex items-center justify-between gap-3">
+                  <span>{{ t('entertainment.badges.sourceLabel') }}</span>
+                  <span class="text-themed">{{ getSourceText(ownership.source) }}</span>
+                </div>
+
+                <div v-if="ownership.applicationTarget === 'instance' && ownership.appliedInstanceName" class="flex items-center justify-between gap-3">
+                  <span>{{ t('entertainment.badges.currentInstance') }}</span>
+                  <span class="truncate text-right text-blue-500">{{ ownership.appliedInstanceName }}</span>
+                </div>
+              </div>
+
+              <div class="mt-auto space-y-2.5">
+                <button
+                  class="btn btn-primary w-full"
+                  :disabled="actionLoading"
+                  @click="applyToAvatar(ownership.id)"
+                >
+                  {{ t('entertainment.badges.applyAvatar') }}
+                </button>
+
+                <div class="rounded-2xl border border-themed bg-themed-tertiary p-3">
+                  <div class="mb-2 text-xs font-medium uppercase tracking-[0.16em] text-themed-faint">
+                    {{ t('entertainment.badges.applyInstance') }}
+                  </div>
+                  <InstanceSelector
+                    v-model="instanceSelectionMap[ownership.id]"
+                    :instances="targetInstances"
+                    :placeholder="t('entertainment.badges.selectInstance')"
+                  />
+                  <button
+                    class="btn btn-secondary w-full mt-2.5"
+                    :disabled="actionLoading || !instanceSelectionMap[ownership.id]"
+                    @click="applyToInstance(ownership.id)"
+                  >
+                    {{ t('entertainment.badges.applyInstanceButton') }}
+                  </button>
+                </div>
+
+                <button
+                  v-if="ownership.applicationTarget"
+                  class="btn btn-ghost w-full"
+                  :disabled="actionLoading"
+                  @click="unapplyOwnership(ownership.id)"
+                >
+                  {{ t('entertainment.badges.unapply') }}
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <BadgeRewardModal
+    :visible="badgeRewardModal.visible"
+    :mode="badgeRewardModal.mode"
+    :ownership="badgeRewardModal.ownership"
+    :remaining-points="badgeRewardModal.remainingPoints ?? overview?.currentPoints ?? null"
+    :show-primary-action="badgeRewardModal.mode === 'draw'"
+    :primary-action-label="actionLoading ? t('common.processing') : t('entertainment.badges.rewardDrawAgain')"
+    :primary-action-disabled="actionLoading || !canDrawAgainFromRewardModal"
+    @close="closeBadgeRewardModal"
+    @view-mine="jumpToMyBadges"
+    @primary-action="drawRandomBadgeFromRewardModal"
+  />
+
+  <BadgeBatchRewardModal
+    :visible="showBadgeMultiDrawModal"
+    :badges="badgeMultiDrawRewards"
+    :title="t('entertainment.badges.multiDrawTitle')"
+    :subtitle="t('entertainment.badges.multiDrawSubtitle', { count: badgeMultiDrawRewards.length })"
+    :confirm-label="t('common.gotIt')"
+    :primary-action-label="t('entertainment.multiDrawAgain')"
+    :primary-action-disabled="actionLoading || !canDrawMulti"
+    @close="closeBadgeMultiDrawModal"
+    @primary-action="drawRandomBadgeMulti"
+  />
+</template>
diff --git a/client/src/components/entertainment/BadgeRewardModal.vue b/client/src/components/entertainment/BadgeRewardModal.vue
new file mode 100644
index 0000000..43f5295
--- /dev/null
+++ b/client/src/components/entertainment/BadgeRewardModal.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BadgeImage from '@/components/BadgeImage.vue'
+import type { BadgeOwnership } from '@/types/api'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  mode: 'draw' | 'select'
+  ownership: BadgeOwnership | null
+  remainingPoints?: number | null
+  showViewMine?: boolean
+  showPrimaryAction?: boolean
+  primaryActionLabel?: string | null
+  primaryActionDisabled?: boolean
+}>(), {
+  remainingPoints: null,
+  showViewMine: true,
+  showPrimaryAction: false,
+  primaryActionLabel: null,
+  primaryActionDisabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'view-mine'): void
+  (e: 'primary-action'): void
+}>()
+
+const { t } = useI18n()
+
+const rewardTitle = computed(() =>
+  t(
+    props.mode === 'draw'
+      ? 'entertainment.badges.rewardTitleDraw'
+      : 'entertainment.badges.rewardTitleSelect'
+  )
+)
+
+const primaryActionLabel = computed(() =>
+  props.primaryActionLabel || t('entertainment.badges.rewardDrawAgain')
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible && ownership" class="modal-overlay">
+        <div class="modal-backdrop" @click="emit('close')" />
+
+        <div class="modal-content max-w-lg overflow-hidden">
+          <div class="absolute inset-x-0 top-0 h-44 bg-gradient-to-b from-blue-500/20 via-cyan-500/10 to-transparent pointer-events-none" />
+
+          <div class="modal-header relative border-b-0 pb-0">
+            <div>
+              <div class="text-xs uppercase tracking-[0.28em] text-blue-500">
+                {{ mode === 'draw' ? t('entertainment.badges.randomTitle') : t('entertainment.badges.selectTitle') }}
+              </div>
+              <h3 class="mt-2 text-xl font-semibold text-themed">{{ rewardTitle }}</h3>
+            </div>
+
+            <button
+              type="button"
+              class="rounded-full p-2 text-themed-muted hover:bg-themed-hover hover:text-themed transition-colors"
+              @click="emit('close')"
+            >
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body relative pt-4">
+            <div class="rounded-[32px] border border-themed bg-themed-tertiary p-6 text-center">
+              <div class="mx-auto flex h-32 w-32 items-center justify-center rounded-[28px] border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-cyan-500/10 to-transparent shadow-[0_0_40px_rgba(59,130,246,0.16)]">
+                <BadgeImage
+                  :badge-id="ownership.badgeId"
+                  :alt="ownership.badgeLabel"
+                  :size="120"
+                  variant="icon"
+                />
+              </div>
+
+              <div class="mt-5 text-xs uppercase tracking-[0.24em] text-themed-faint">
+                {{ ownership.seriesTitle }}
+              </div>
+              <div class="mt-2 text-2xl font-semibold text-themed">{{ ownership.badgeName }}</div>
+              <div class="mt-2 text-sm text-themed-muted">{{ ownership.badgeLabel }}</div>
+              <p class="mt-5 text-sm leading-6 text-themed-secondary">
+                {{ t('entertainment.badges.rewardSubtitle') }}
+              </p>
+            </div>
+
+            <div class="mt-4 grid gap-3 sm:grid-cols-2">
+              <div class="rounded-2xl border border-themed bg-themed-tertiary p-4">
+                <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.rewardSeriesLabel') }}</div>
+                <div class="mt-2 text-base font-medium text-themed">{{ ownership.seriesTitle }}</div>
+              </div>
+
+              <div class="rounded-2xl border border-themed bg-themed-tertiary p-4">
+                <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.rewardRemainingPoints') }}</div>
+                <div class="mt-2 text-base font-medium text-themed">{{ remainingPoints ?? '--' }}</div>
+              </div>
+            </div>
+
+            <div class="mt-5 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+              <button class="btn btn-ghost" @click="emit('close')">
+                {{ t('common.gotIt') }}
+              </button>
+
+              <button
+                v-if="showPrimaryAction"
+                class="btn btn-primary"
+                :disabled="primaryActionDisabled"
+                @click="emit('primary-action')"
+              >
+                {{ primaryActionLabel }}
+              </button>
+
+              <button v-if="showViewMine" class="btn btn-secondary" @click="emit('view-mine')">
+                {{ t('entertainment.badges.rewardViewMine') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/entertainment/VipBenefitHall.vue b/client/src/components/entertainment/VipBenefitHall.vue
new file mode 100644
index 0000000..cae0846
--- /dev/null
+++ b/client/src/components/entertainment/VipBenefitHall.vue
@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api, {
+  type VipBenefitClaim,
+  type VipBenefitAmountSummary,
+  type VipBenefitOverviewResponse,
+  type VipBenefitReward,
+  type VipBenefitRewardConfig
+} from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+
+const { t } = useI18n()
+const toast = useToast()
+
+const loading = ref(true)
+const claimingIds = ref<number[]>([])
+const bulkClaiming = ref(false)
+const overview = ref<VipBenefitOverviewResponse | null>(null)
+
+interface ClaimFeedback {
+  id: number
+  title: string
+  detail: string
+  typeLabel: string
+  statusLabel: string
+  status: VipBenefitClaim['status']
+}
+
+const claimFeedbacks = ref<ClaimFeedback[]>([])
+let nextFeedbackId = 0
+
+const currentLevelLabel = computed(() => {
+  const level = overview.value?.currentLevel || 0
+  return level > 0 ? `VIP${level}` : t('vipBenefits.commonMember')
+})
+
+const groupedRewards = computed(() => {
+  const groups = new Map<number, VipBenefitReward[]>()
+  for (let level = 1; level <= 10; level++) {
+    const items = (overview.value?.rewards || [])
+      .filter(reward => reward.level === level)
+      .sort((a, b) => a.sortOrder - b.sortOrder || a.id - b.id)
+    if (items.length > 0) {
+      groups.set(level, items)
+    }
+  }
+  return Array.from(groups.entries()).map(([level, rewards]) => ({ level, rewards }))
+})
+
+const entitlementItems = computed(() => buildSummaryItems(overview.value?.summary.entitlement))
+const remainingItems = computed(() => buildSummaryItems(overview.value?.summary.remaining))
+const hasClaimableRewards = computed(() => (overview.value?.summary.claimableRewards || 0) > 0)
+
+function formatCurrency(value: number): string {
+  return `¥${Number(value || 0).toFixed(2)}`
+}
+
+function buildSummaryItems(summary?: VipBenefitAmountSummary) {
+  if (!summary) return []
+  const items: Array<{ key: string; label: string; value: string }> = []
+  if (summary.balanceAmount > 0) {
+    items.push({ key: 'balance', label: t('vipBenefits.types.balance'), value: formatCurrency(summary.balanceAmount) })
+  }
+  if (summary.pointsAmount > 0) {
+    items.push({ key: 'points', label: t('vipBenefits.types.points'), value: summary.pointsAmount.toLocaleString() })
+  }
+  if (summary.instanceQuantity > 0) {
+    items.push({ key: 'instance', label: t('vipBenefits.types.instance'), value: String(summary.instanceQuantity) })
+  }
+  return items
+}
+
+function formatRewardValue(type: VipBenefitReward['type'], config: VipBenefitRewardConfig): string {
+  if (type === 'balance') {
+    return formatCurrency(Number(config.amount || 0))
+  }
+  if (type === 'points') {
+    return `${Number(config.amount || 0).toLocaleString()} ${t('vipBenefits.pointsUnit')}`
+  }
+  const quantity = Number(config.quantity || 1)
+  const days = Number(config.days || 30)
+  const plan = config.planName || t('vipBenefits.instanceReward')
+  return t('vipBenefits.instanceValue', { plan, quantity, days })
+}
+
+function rewardValue(reward: VipBenefitReward): string {
+  return formatRewardValue(reward.type, reward.config)
+}
+
+function isRewardType(value: unknown): value is VipBenefitReward['type'] {
+  return value === 'balance' || value === 'points' || value === 'instance'
+}
+
+function snapshotConfig(claim: VipBenefitClaim): VipBenefitRewardConfig {
+  const config = claim.snapshot?.config
+  return config && typeof config === 'object' && !Array.isArray(config)
+    ? config as VipBenefitRewardConfig
+    : {}
+}
+
+function rewardStatusLabel(reward: VipBenefitReward): string {
+  if (reward.claims?.some(claim => claim.status === 'pending')) {
+    return t('vipBenefits.status.pending')
+  }
+  if (reward.state === 'claimed') return t('vipBenefits.status.claimed')
+  if (reward.state === 'locked') return t('vipBenefits.status.locked')
+  if (reward.state === 'blocked') return t('vipBenefits.status.blocked', { level: reward.blockedByLevel || 1 })
+  return t('vipBenefits.status.claimable')
+}
+
+function rewardStatusClass(reward: VipBenefitReward): string {
+  if (reward.state === 'claimable') return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+  if (reward.state === 'claimed') return 'border-gray-300 bg-themed-secondary text-themed-muted'
+  if (reward.state === 'blocked') return 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300'
+  return 'border-themed bg-themed-secondary text-themed-muted'
+}
+
+function claimButtonLabel(reward: VipBenefitReward): string {
+  if (isRewardClaiming(reward)) return t('common.processing')
+  if (reward.state === 'claimable') return t('vipBenefits.claim')
+  if (reward.state === 'blocked') return t('vipBenefits.claimLowerFirst', { level: reward.blockedByLevel || 1 })
+  if (reward.state === 'locked') return t('vipBenefits.upgradeRequired')
+  if (reward.claims?.some(claim => claim.status === 'pending')) return t('vipBenefits.pendingDelivery')
+  return t('vipBenefits.claimed')
+}
+
+function canClaim(reward: VipBenefitReward): boolean {
+  return reward.state === 'claimable' && !bulkClaiming.value && !isRewardClaiming(reward)
+}
+
+function isRewardClaiming(reward: VipBenefitReward): boolean {
+  return claimingIds.value.includes(reward.id)
+}
+
+function setRewardClaiming(rewardId: number, value: boolean): void {
+  if (value) {
+    if (!claimingIds.value.includes(rewardId)) {
+      claimingIds.value = [...claimingIds.value, rewardId]
+    }
+    return
+  }
+  claimingIds.value = claimingIds.value.filter(id => id !== rewardId)
+}
+
+function claimFeedbackFromClaim(claim: VipBenefitClaim, reward?: VipBenefitReward): Omit<ClaimFeedback, 'id'> {
+  const snapshot = claim.snapshot || {}
+  const type = reward?.type || (isRewardType(snapshot.type) ? snapshot.type : 'balance')
+  const title = reward?.title || (typeof snapshot.title === 'string' && snapshot.title.trim() ? snapshot.title : t('vipBenefits.rewardReceived'))
+  const detail = reward ? rewardValue(reward) : formatRewardValue(type, snapshotConfig(claim))
+
+  return {
+    title,
+    detail,
+    typeLabel: t(`vipBenefits.types.${type}`),
+    statusLabel: claim.status === 'pending' ? t('vipBenefits.feedback.pending') : t('vipBenefits.feedback.delivered'),
+    status: claim.status
+  }
+}
+
+function removeClaimFeedback(id: number): void {
+  claimFeedbacks.value = claimFeedbacks.value.filter(item => item.id !== id)
+}
+
+function showClaimFeedback(feedback: Omit<ClaimFeedback, 'id'>, delay = 0): void {
+  window.setTimeout(() => {
+    const id = ++nextFeedbackId
+    claimFeedbacks.value = [{ id, ...feedback }, ...claimFeedbacks.value].slice(0, 8)
+    window.setTimeout(() => removeClaimFeedback(id), 4200)
+  }, delay)
+}
+
+async function loadBenefits(): Promise<void> {
+  loading.value = true
+  try {
+    overview.value = await api.vipBenefits.getMyOverview()
+  } catch (error: any) {
+    toast.error(translateError(error))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function claimReward(reward: VipBenefitReward): Promise<void> {
+  if (!canClaim(reward)) return
+  setRewardClaiming(reward.id, true)
+  try {
+    const response = await api.vipBenefits.claim(reward.id)
+    overview.value = response.overview
+    showClaimFeedback(claimFeedbackFromClaim(response.claim, reward))
+  } catch (error: any) {
+    toast.error(translateError(error))
+    await loadBenefits()
+  } finally {
+    setRewardClaiming(reward.id, false)
+  }
+}
+
+async function claimAllRewards(): Promise<void> {
+  if (!hasClaimableRewards.value || bulkClaiming.value) {
+    if (!hasClaimableRewards.value) {
+      toast.info(t('vipBenefits.noClaimableReward'))
+    }
+    return
+  }
+
+  const rewardLookup = new Map((overview.value?.rewards || []).map(reward => [reward.id, reward]))
+  bulkClaiming.value = true
+  try {
+    const response = await api.vipBenefits.claimAll()
+    overview.value = response.overview
+
+    if (response.claims.length === 0) {
+      toast.info(t('vipBenefits.noClaimableReward'))
+      return
+    }
+
+    response.claims.forEach((claim, index) => {
+      const reward = rewardLookup.get(claim.rewardId)
+      showClaimFeedback(claimFeedbackFromClaim(claim, reward), index * 120)
+    })
+  } catch (error: any) {
+    toast.error(translateError(error))
+    await loadBenefits()
+  } finally {
+    bulkClaiming.value = false
+    claimingIds.value = []
+  }
+}
+
+onMounted(() => {
+  void loadBenefits()
+})
+</script>
+
+<template>
+  <div class="space-y-5">
+    <TransitionGroup
+      name="vip-claim-pop"
+      tag="div"
+      class="pointer-events-none fixed bottom-5 right-4 z-[80] flex w-[calc(100%-2rem)] max-w-sm flex-col gap-2 sm:bottom-6 sm:right-6"
+    >
+      <article
+        v-for="feedback in claimFeedbacks"
+        :key="feedback.id"
+        class="pointer-events-none rounded-lg border border-themed bg-themed p-4 shadow-lg"
+      >
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="rounded-full border border-themed bg-themed-secondary px-2.5 py-1 text-xs font-medium text-themed">
+                {{ feedback.typeLabel }}
+              </span>
+              <span
+                class="rounded-full border px-2.5 py-1 text-xs font-medium"
+                :class="feedback.status === 'pending'
+                  ? 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300'
+                  : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'"
+              >
+                {{ feedback.statusLabel }}
+              </span>
+            </div>
+            <div class="mt-3 truncate text-sm font-semibold text-themed">{{ feedback.title }}</div>
+            <div class="mt-1 text-sm text-themed-muted">{{ feedback.detail }}</div>
+          </div>
+        </div>
+      </article>
+    </TransitionGroup>
+
+    <div v-if="loading" class="card p-6">
+      <SkeletonLoader type="card" :rows="4" />
+    </div>
+
+    <template v-else-if="overview">
+      <section class="card p-5 md:p-6">
+        <div class="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
+          <div class="min-w-0">
+            <div class="text-sm font-medium text-themed-muted">{{ t('vipBenefits.overviewLabel') }}</div>
+            <h2 class="mt-2 text-2xl font-semibold tracking-normal text-themed">
+              {{ t('vipBenefits.overviewTitle', { level: currentLevelLabel }) }}
+            </h2>
+            <p class="mt-2 max-w-2xl text-sm leading-6 text-themed-muted">
+              {{ overview.currentLevel > 0 ? t('vipBenefits.overviewDesc', { level: currentLevelLabel }) : t('vipBenefits.noVipDesc') }}
+            </p>
+          </div>
+          <div
+            class="inline-flex w-fit items-center rounded-full border px-3 py-1.5 text-sm font-semibold"
+            :style="overview.userVipBadgeStyle ? { backgroundColor: overview.userVipBadgeStyle.backgroundColor, color: overview.userVipBadgeStyle.textColor, borderColor: overview.userVipBadgeStyle.backgroundColor } : undefined"
+            :class="overview.userVipBadgeStyle ? '' : 'border-themed bg-themed-secondary text-themed'"
+          >
+            {{ currentLevelLabel }}
+          </div>
+        </div>
+
+        <div class="mt-6 grid gap-3 md:grid-cols-4">
+          <div class="rounded border border-themed p-4">
+            <div class="text-xs text-themed-muted">{{ t('vipBenefits.summary.unlocked') }}</div>
+            <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.summary.unlockedRewards }}</div>
+          </div>
+          <div class="rounded border border-themed p-4">
+            <div class="text-xs text-themed-muted">{{ t('vipBenefits.summary.claimable') }}</div>
+            <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.summary.claimableRewards }}</div>
+          </div>
+          <div class="rounded border border-themed p-4">
+            <div class="text-xs text-themed-muted">{{ t('vipBenefits.summary.claimed') }}</div>
+            <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.summary.claimedRewards }}</div>
+          </div>
+          <div class="rounded border border-themed p-4">
+            <div class="text-xs text-themed-muted">{{ t('vipBenefits.summary.pending') }}</div>
+            <div class="mt-2 text-2xl font-semibold text-themed">{{ overview.summary.pendingRewards }}</div>
+          </div>
+        </div>
+
+        <div class="mt-5 rounded border border-themed p-4">
+          <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div>
+              <div class="font-semibold text-themed">{{ t('vipBenefits.availableSummary') }}</div>
+              <p class="mt-1 text-sm text-themed-muted">{{ t('vipBenefits.availableSummaryDesc') }}</p>
+            </div>
+            <div class="flex flex-col gap-3 md:items-end">
+              <div class="flex flex-wrap gap-2 md:justify-end">
+                <span
+                  v-for="item in entitlementItems"
+                  :key="item.key"
+                  class="rounded-full border border-themed px-3 py-1 text-sm text-themed"
+                >
+                  {{ item.label }} {{ item.value }}
+                </span>
+                <span v-if="entitlementItems.length === 0" class="text-sm text-themed-muted">
+                  {{ t('vipBenefits.noAvailableReward') }}
+                </span>
+              </div>
+              <button
+                class="btn w-full md:w-auto"
+                :class="hasClaimableRewards ? 'btn-primary' : 'btn-secondary'"
+                :disabled="!hasClaimableRewards || bulkClaiming"
+                @click="claimAllRewards"
+              >
+                {{ bulkClaiming ? t('vipBenefits.claimingAll') : t('vipBenefits.claimAll') }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="remainingItems.length > 0" class="mt-4 flex flex-wrap gap-2 border-t border-themed pt-4 text-sm">
+            <span class="text-themed-muted">{{ t('vipBenefits.remainingSummary') }}</span>
+            <span v-for="item in remainingItems" :key="item.key" class="font-medium text-themed">
+              {{ item.label }} {{ item.value }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="groupedRewards.length === 0" class="card p-8 text-center text-sm text-themed-muted">
+        {{ t('vipBenefits.empty') }}
+      </section>
+
+      <section v-else class="space-y-4">
+        <div
+          v-for="group in groupedRewards"
+          :key="group.level"
+          class="card overflow-hidden"
+        >
+          <div class="flex flex-col gap-2 border-b border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="flex items-center gap-3">
+              <span class="rounded-full border border-themed bg-themed-secondary px-3 py-1 text-sm font-semibold text-themed">
+                VIP{{ group.level }}
+              </span>
+              <div>
+                <div class="font-semibold text-themed">{{ t('vipBenefits.levelRewards', { level: group.level }) }}</div>
+                <div class="text-xs text-themed-muted">
+                  {{ group.level <= overview.currentLevel ? t('vipBenefits.levelUnlocked') : t('vipBenefits.levelLocked') }}
+                </div>
+              </div>
+            </div>
+            <div class="text-xs text-themed-muted">
+              {{ t('vipBenefits.rewardCount', { count: group.rewards.length }) }}
+            </div>
+          </div>
+
+          <div class="grid gap-3 p-5 lg:grid-cols-2 2xl:grid-cols-3">
+            <article
+              v-for="reward in group.rewards"
+              :key="reward.id"
+              class="flex min-h-40 flex-col rounded border border-themed p-4"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="rounded-full border border-themed bg-themed-secondary px-2.5 py-1 text-xs font-medium text-themed">
+                      {{ t(`vipBenefits.types.${reward.type}`) }}
+                    </span>
+                    <span
+                      class="rounded-full border px-2.5 py-1 text-xs font-medium"
+                      :class="rewardStatusClass(reward)"
+                    >
+                      {{ rewardStatusLabel(reward) }}
+                    </span>
+                  </div>
+                  <h3 class="mt-3 text-base font-semibold text-themed">{{ reward.title }}</h3>
+                  <p v-if="reward.description" class="mt-1 line-clamp-2 text-sm text-themed-muted">{{ reward.description }}</p>
+                </div>
+              </div>
+
+              <div class="mt-4 grid gap-2 text-sm">
+                <div class="flex items-center justify-between rounded border border-themed px-3 py-2">
+                  <span class="text-themed-muted">{{ t('vipBenefits.rewardValue') }}</span>
+                  <span class="font-medium text-themed">{{ rewardValue(reward) }}</span>
+                </div>
+                <div class="flex items-center justify-between rounded border border-themed px-3 py-2">
+                  <span class="text-themed-muted">{{ t('vipBenefits.claimProgress') }}</span>
+                  <span class="font-medium text-themed">{{ reward.claimedCount || 0 }}/{{ reward.claimLimit }}</span>
+                </div>
+              </div>
+
+              <div class="mt-auto pt-4">
+                <button
+                  class="btn w-full"
+                  :class="reward.state === 'claimable' ? 'btn-primary' : 'btn-secondary'"
+                  :disabled="!canClaim(reward)"
+                  @click="claimReward(reward)"
+                >
+                  {{ claimButtonLabel(reward) }}
+                </button>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.vip-claim-pop-enter-active,
+.vip-claim-pop-leave-active,
+.vip-claim-pop-move {
+  transition:
+    opacity 0.28s ease,
+    transform 0.28s ease;
+}
+
+.vip-claim-pop-enter-from {
+  opacity: 0;
+  transform: translateX(32px) translateY(12px) scale(0.96);
+}
+
+.vip-claim-pop-leave-to {
+  opacity: 0;
+  transform: translateX(36px) scale(0.96);
+}
+</style>
diff --git a/client/src/components/extensions/InitCommandDetailModal.vue b/client/src/components/extensions/InitCommandDetailModal.vue
new file mode 100644
index 0000000..0889b70
--- /dev/null
+++ b/client/src/components/extensions/InitCommandDetailModal.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+/**
+ * InitCommandDetailModal - 初始化命令详情弹窗
+ */
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+
+interface InitCommand {
+  id: number
+  name: string
+  command?: string
+  commandPreview?: string
+  commandLineCount?: number
+  distros: string[]
+  description: string | null
+  enabled: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+interface CommandDetail {
+  id: number
+  name: string
+  command: string
+  distros: string[]
+  description: string | null
+  enabled: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+const props = defineProps<{
+  command: InitCommand
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+// 详情数据
+const detail = ref<CommandDetail | null>(null)
+const loading = ref(true)
+const copied = ref(false)
+
+// 发行版图标映射
+const distroIcons: Record<string, string> = {
+  ubuntu: 'ubuntu',
+  debian: 'debian',
+  rhel: 'almalinux',
+  alpine: 'alpine',
+  arch: 'arch',
+  suse: 'opensuse',
+  all: 'linux'
+}
+
+// 获取发行版显示名称（使用翻译键）
+function getDistroName(distro: string): string {
+  const key = `extensions.initCommands.distroNames.${distro}`
+  const translated = t(key)
+  return translated !== key ? translated : distro
+}
+
+// 加载详情
+async function loadDetail(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.initCommands.get(props.command.id)
+    detail.value = response.command
+  } catch (error: any) {
+    toast.error(t('extensions.initCommands.loadDetailFailed') + ': ' + (error?.message || String(error)))
+    emit('close')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 复制命令内容
+async function copyCommand(): Promise<void> {
+  if (!detail.value?.command) return
+  
+  try {
+    await navigator.clipboard.writeText(detail.value.command)
+    copied.value = true
+    setTimeout(() => copied.value = false, 2000)
+  } catch {
+    toast.error(t('common.copyFailed'))
+  }
+}
+
+// 格式化日期
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+// 弹窗可见性（用于过渡动画）
+const visible = ref(true)
+
+// 关闭
+function close(): void {
+  visible.value = false
+  setTimeout(() => emit('close'), 200)
+}
+
+onMounted(() => {
+  loadDetail()
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay">
+        <div class="modal-backdrop" @click="close"></div>
+        <div class="modal-content max-w-2xl">
+          <!-- 头部 -->
+          <div class="modal-header">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-xl bg-primary-500/15 flex items-center justify-center">
+                <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <div>
+                <h3 class="modal-title">{{ $t('extensions.initCommands.viewDetail') }}</h3>
+                <p class="text-xs text-themed-muted mt-0.5">{{ command.name }}</p>
+              </div>
+            </div>
+            <button class="text-themed-muted hover:text-themed" @click="close">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 内容 -->
+          <div class="modal-body space-y-4">
+            <!-- 加载中 -->
+            <div v-if="loading" class="text-center py-8">
+              <div class="inline-flex items-center gap-2 text-themed-muted">
+                <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>{{ $t('common.loading') }}</span>
+              </div>
+            </div>
+
+            <template v-else-if="detail">
+              <!-- 基本信息 -->
+              <div class="flex flex-wrap items-center gap-3 pb-3 border-b border-themed">
+                <div class="flex items-center gap-2">
+                  <span class="text-xs text-themed-muted">{{ $t('extensions.initCommands.status') }}:</span>
+                  <span 
+                    class="text-xs px-2 py-0.5 rounded"
+                    :class="detail.enabled 
+                      ? 'bg-green-500/15 text-green-600 dark:text-green-400' 
+                      : 'bg-themed-secondary text-themed-muted'"
+                  >
+                    {{ detail.enabled ? $t('extensions.initCommands.statusEnabled') : $t('extensions.initCommands.statusDisabled') }}
+                  </span>
+                </div>
+                <div class="flex items-center gap-2">
+                  <span class="text-xs text-themed-muted">{{ $t('extensions.initCommands.createdAt') }}:</span>
+                  <span class="text-xs text-themed-secondary">{{ formatDate(detail.createdAt) }}</span>
+                </div>
+              </div>
+
+              <!-- 适配系统 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-2">{{ $t('extensions.initCommands.distros') }}</label>
+                <div class="flex flex-wrap gap-2">
+                  <span 
+                    v-for="distro in detail.distros" 
+                    :key="distro"
+                    class="inline-flex items-center gap-2 text-xs px-2.5 py-1.5 rounded-lg bg-themed-secondary text-themed-secondary"
+                  >
+                    <DistroIcon :distro="distroIcons[distro] || 'linux'" :size="16" />
+                    {{ getDistroName(distro) }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 备注 -->
+              <div v-if="detail.description">
+                <label class="block text-xs text-themed-muted mb-2">{{ $t('extensions.initCommands.remark') }}</label>
+                <p class="text-sm text-themed-secondary">{{ detail.description }}</p>
+              </div>
+
+              <!-- 命令内容 -->
+              <div>
+                <div class="flex items-center justify-between mb-2">
+                  <label class="text-xs text-themed-muted">{{ $t('extensions.initCommands.command') }}</label>
+                  <button 
+                    class="btn-ghost btn-xs"
+                    @click="copyCommand"
+                  >
+                    <svg v-if="copied" class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                    </svg>
+                    {{ copied ? $t('common.copied') : $t('common.copy') }}
+                  </button>
+                </div>
+                <pre class="p-4 rounded-lg bg-themed-tertiary border border-themed font-mono text-xs text-themed-secondary overflow-x-auto whitespace-pre-wrap break-all max-h-[320px] overflow-y-auto">{{ detail.command }}</pre>
+              </div>
+            </template>
+          </div>
+
+          <!-- 底部 -->
+          <div class="modal-footer">
+            <button class="btn-ghost btn-sm" @click="close">
+              {{ $t('common.close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/extensions/InitCommandModal.vue b/client/src/components/extensions/InitCommandModal.vue
new file mode 100644
index 0000000..ab7ebbe
--- /dev/null
+++ b/client/src/components/extensions/InitCommandModal.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+/**
+ * InitCommandModal - 初始化命令新增/编辑弹窗
+ */
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+
+interface InitCommand {
+  id: number
+  name: string
+  command?: string
+  commandPreview?: string
+  commandLineCount?: number
+  distros: string[]
+  description: string | null
+  enabled: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+interface Distro {
+  id: string
+  name: string
+  icon: string
+}
+
+const props = defineProps<{
+  command: InitCommand | null  // null 表示新增模式
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'save'): void
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+// 表单数据
+const form = ref({
+  name: '',
+  command: '',
+  distros: [] as string[],
+  description: ''
+})
+
+// 发行版选项
+const distroOptions = ref<Distro[]>([])
+const loadingDistros = ref(false)
+
+// 表单状态
+const saving = ref(false)
+const loadingDetail = ref(false)
+
+// 是否为编辑模式
+const isEdit = computed(() => props.command !== null)
+
+// 表单验证
+const isValid = computed(() => {
+  return form.value.name.trim().length > 0 
+    && form.value.command.trim().length > 0 
+    && form.value.distros.length > 0
+})
+
+// 加载发行版选项
+async function loadDistros(): Promise<void> {
+  loadingDistros.value = true
+  try {
+    const response = await api.initCommands.getDistros()
+    // 后端只返回 id 和 icon，前端负责翻译 name
+    distroOptions.value = response.distros.map(d => ({
+      id: d.id,
+      name: t(`extensions.initCommands.distroNames.${d.id}`),
+      icon: d.icon
+    }))
+  } catch (error) {
+    console.error('Failed to load distros:', error)
+    // 使用翻译键生成默认列表
+    distroOptions.value = [
+      { id: 'ubuntu', name: t('extensions.initCommands.distroNames.ubuntu'), icon: 'ubuntu' },
+      { id: 'debian', name: t('extensions.initCommands.distroNames.debian'), icon: 'debian' },
+      { id: 'rhel', name: t('extensions.initCommands.distroNames.rhel'), icon: 'almalinux' },
+      { id: 'alpine', name: t('extensions.initCommands.distroNames.alpine'), icon: 'alpine' },
+      { id: 'arch', name: t('extensions.initCommands.distroNames.arch'), icon: 'arch' },
+      { id: 'suse', name: t('extensions.initCommands.distroNames.suse'), icon: 'opensuse' },
+      { id: 'all', name: t('extensions.initCommands.distroNames.all'), icon: 'linux' }
+    ]
+  } finally {
+    loadingDistros.value = false
+  }
+}
+
+// 加载命令详情（编辑模式）
+async function loadCommandDetail(): Promise<void> {
+  if (!props.command) return
+  
+  loadingDetail.value = true
+  try {
+    const response = await api.initCommands.get(props.command.id)
+    const cmd = response.command
+    form.value.name = cmd.name
+    form.value.command = cmd.command
+    form.value.distros = [...cmd.distros]
+    form.value.description = cmd.description || ''
+  } catch (error: any) {
+    toast.error(t('extensions.initCommands.loadDetailFailed') + ': ' + (error?.message || String(error)))
+    emit('close')
+  } finally {
+    loadingDetail.value = false
+  }
+}
+
+// 切换发行版选择
+function toggleDistro(distroId: string): void {
+  const idx = form.value.distros.indexOf(distroId)
+  if (idx >= 0) {
+    form.value.distros.splice(idx, 1)
+  } else {
+    // 如果选择了"通用"，则取消其他所有选择
+    if (distroId === 'all') {
+      form.value.distros = ['all']
+    } else {
+      // 如果选择了具体发行版，则取消"通用"
+      const allIdx = form.value.distros.indexOf('all')
+      if (allIdx >= 0) {
+        form.value.distros.splice(allIdx, 1)
+      }
+      form.value.distros.push(distroId)
+    }
+  }
+}
+
+// 保存
+async function save(): Promise<void> {
+  if (!isValid.value) return
+  
+  saving.value = true
+  try {
+    if (isEdit.value && props.command) {
+      // 更新
+      await api.initCommands.update(props.command.id, {
+        name: form.value.name.trim(),
+        command: form.value.command,
+        distros: form.value.distros,
+        description: form.value.description.trim() || null
+      })
+      toast.success(t('extensions.initCommands.updateSuccess'))
+    } else {
+      // 新增
+      await api.initCommands.create({
+        name: form.value.name.trim(),
+        command: form.value.command,
+        distros: form.value.distros,
+        description: form.value.description.trim() || undefined
+      })
+      toast.success(t('extensions.initCommands.createSuccess'))
+    }
+    emit('save')
+  } catch (error: any) {
+    const msg = isEdit.value 
+      ? t('extensions.initCommands.updateFailed') 
+      : t('extensions.initCommands.createFailed')
+    toast.error(msg + ': ' + (error?.message || String(error)))
+  } finally {
+    saving.value = false
+  }
+}
+
+// 弹窗可见性（用于过渡动画）
+const visible = ref(true)
+
+// 关闭
+function close(): void {
+  visible.value = false
+  setTimeout(() => emit('close'), 200)
+}
+
+// 初始化
+onMounted(() => {
+  loadDistros()
+  if (props.command) {
+    loadCommandDetail()
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay">
+        <div class="modal-backdrop" @click="close"></div>
+        <div class="modal-content max-w-2xl">
+          <!-- 头部 -->
+          <div class="modal-header">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-xl bg-primary-500/15 flex items-center justify-center">
+                <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <div>
+                <h3 class="modal-title">
+                  {{ isEdit ? $t('extensions.initCommands.editTitle') : $t('extensions.initCommands.addTitle') }}
+                </h3>
+                <p class="text-xs text-themed-muted mt-0.5">
+                  {{ $t('extensions.initCommands.modalDesc') }}
+                </p>
+              </div>
+            </div>
+            <button class="text-themed-muted hover:text-themed" @click="close">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 内容 -->
+          <div class="modal-body space-y-4">
+            <!-- 加载中 -->
+            <div v-if="loadingDetail" class="text-center py-8">
+              <div class="inline-flex items-center gap-2 text-themed-muted">
+                <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span>{{ $t('common.loading') }}</span>
+              </div>
+            </div>
+
+            <template v-else>
+              <!-- 名称 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">
+                  {{ $t('extensions.initCommands.name') }} <span class="text-red-500">*</span>
+                </label>
+                <input 
+                  v-model="form.name" 
+                  type="text" 
+                  class="input" 
+                  maxlength="100"
+                  :placeholder="$t('extensions.initCommands.namePlaceholder')" 
+                />
+              </div>
+
+              <!-- 命令内容 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">
+                  {{ $t('extensions.initCommands.command') }} <span class="text-red-500">*</span>
+                </label>
+                <textarea 
+                  v-model="form.command" 
+                  class="input font-mono text-xs min-h-[200px] resize-y"
+                  :placeholder="$t('extensions.initCommands.commandPlaceholder')"
+                ></textarea>
+                <p class="text-xs text-themed-faint mt-1">
+                  {{ $t('extensions.initCommands.commandHint') }}
+                </p>
+              </div>
+
+              <!-- 适配系统 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">
+                  {{ $t('extensions.initCommands.distros') }} <span class="text-red-500">*</span>
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <button
+                    v-for="distro in distroOptions"
+                    :key="distro.id"
+                    type="button"
+                    class="inline-flex items-center gap-2 px-3 py-2 text-xs rounded-lg border-2 transition-all font-medium"
+                    :class="form.distros.includes(distro.id) 
+                      ? 'bg-gray-900 dark:bg-primary-500/20 border-gray-900 dark:border-primary-500 text-white dark:text-primary-300 shadow-md' 
+                      : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'"
+                    @click="toggleDistro(distro.id)"
+                  >
+                    <DistroIcon :distro="distro.icon" :size="16" />
+                    {{ distro.name }}
+                  </button>
+                </div>
+                <p class="text-xs text-themed-faint mt-1">
+                  {{ $t('extensions.initCommands.distrosHint') }}
+                </p>
+              </div>
+
+              <!-- 备注 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">
+                  {{ $t('extensions.initCommands.remark') }}
+                </label>
+                <input 
+                  v-model="form.description" 
+                  type="text" 
+                  class="input" 
+                  maxlength="500"
+                  :placeholder="$t('extensions.initCommands.remarkPlaceholder')" 
+                />
+              </div>
+            </template>
+          </div>
+
+          <!-- 底部 -->
+          <div class="modal-footer">
+            <button class="btn-ghost btn-sm" :disabled="saving" @click="close">
+              {{ $t('common.cancel') }}
+            </button>
+            <button 
+              class="btn-primary btn-sm" 
+              :disabled="!isValid || saving || loadingDetail" 
+              @click="save"
+            >
+              <svg v-if="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ isEdit ? $t('common.save') : $t('common.create') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/extensions/InitCommandSelector.vue b/client/src/components/extensions/InitCommandSelector.vue
new file mode 100644
index 0000000..f8f0bef
--- /dev/null
+++ b/client/src/components/extensions/InitCommandSelector.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+/**
+ * InitCommandSelector - 初始化命令选择器
+ * 用于创建/重装实例时选择要应用的初始化命令
+ */
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+
+interface AvailableCommand {
+  id: number
+  name: string
+  commandLineCount: number
+  distros: string[]
+  description: string | null
+}
+
+const props = defineProps<{
+  distro: string  // 当前选择的发行版（镜像的 icon 字段）
+  modelValue: number[]  // 选中的命令 ID 列表
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number[]): void
+}>()
+
+const { t } = useI18n()
+
+// 可用命令列表
+const commands = ref<AvailableCommand[]>([])
+const loading = ref(false)
+const loaded = ref(false)
+
+// 展开状态
+const expanded = ref(false)
+
+// 选中的命令数量
+const selectedCount = computed(() => props.modelValue.length)
+
+// 收纳功能：默认显示前5条
+const collapsedLimit = 5
+const isCollapsed = ref(true)
+
+// 显示的命令列表（确保选中的命令始终显示）
+const displayedCommands = computed(() => {
+  if (!isCollapsed.value || commands.value.length <= collapsedLimit) {
+    return commands.value
+  }
+  // 收起状态：显示前5条 + 所有已选中的命令
+  const topCommands = commands.value.slice(0, collapsedLimit)
+  const selectedInHidden = commands.value.slice(collapsedLimit).filter(cmd => props.modelValue.includes(cmd.id))
+  // 合并并去重
+  const result = [...topCommands]
+  for (const cmd of selectedInHidden) {
+    if (!result.find(c => c.id === cmd.id)) {
+      result.push(cmd)
+    }
+  }
+  return result
+})
+
+// 是否有被隐藏的未选中命令
+const hasHiddenUnselected = computed(() => {
+  if (commands.value.length <= collapsedLimit) return false
+  const hiddenCommands = commands.value.slice(collapsedLimit)
+  return hiddenCommands.some(cmd => !props.modelValue.includes(cmd.id))
+})
+
+// 是否需要显示展开按钮（只有有未选中的被隐藏命令时才显示）
+const showExpandButton = computed(() => isCollapsed.value && hasHiddenUnselected.value)
+
+// 获取发行版显示名称（使用翻译键）
+function getDistroName(distro: string): string {
+  const key = `extensions.initCommands.distroNames.${distro}`
+  const translated = t(key)
+  // 如果翻译键存在则返回翻译值，否则返回原始值
+  return translated !== key ? translated : distro
+}
+
+// 加载可用命令
+async function loadCommands(): Promise<void> {
+  if (!props.distro || loading.value) return
+  
+  loading.value = true
+  try {
+    const response = await api.initCommands.getAvailable(props.distro)
+    commands.value = response.commands
+    loaded.value = true
+    
+    // 如果之前有选中的命令，检查是否仍然可用
+    if (props.modelValue.length > 0) {
+      const availableIds = new Set(commands.value.map(c => c.id))
+      const validIds = props.modelValue.filter(id => availableIds.has(id))
+      if (validIds.length !== props.modelValue.length) {
+        emit('update:modelValue', validIds)
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load available commands:', error)
+    commands.value = []
+    loaded.value = true  // 确保显示空状态而非空白
+  } finally {
+    loading.value = false
+  }
+}
+
+// 切换命令选择
+function toggleCommand(cmdId: number): void {
+  const newValue = [...props.modelValue]
+  const idx = newValue.indexOf(cmdId)
+  if (idx >= 0) {
+    newValue.splice(idx, 1)
+  } else {
+    newValue.push(cmdId)
+  }
+  emit('update:modelValue', newValue)
+}
+
+// 监听发行版变化，重新加载命令
+watch(() => props.distro, () => {
+  // 重置收纳状态
+  isCollapsed.value = true
+  
+  if (props.distro) {
+    loadCommands()
+  } else {
+    commands.value = []
+    loaded.value = false
+    emit('update:modelValue', [])
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div v-if="distro" class="space-y-2">
+    <!-- 标题栏 -->
+    <div 
+      class="flex items-center justify-between p-3 bg-themed-tertiary border border-themed rounded-lg cursor-pointer hover:border-themed-secondary transition-colors"
+      @click="expanded = !expanded"
+    >
+      <div class="flex items-center gap-2">
+        <svg class="w-4 h-4 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        <span class="text-sm text-themed-secondary">{{ $t('extensions.initCommands.selectTitle') }}</span>
+        <span v-if="selectedCount > 0" class="text-xs px-1.5 py-0.5 rounded bg-primary-500/15 text-primary-600 dark:text-primary-400">
+          {{ selectedCount }}
+        </span>
+        <span class="text-xs text-themed-faint">{{ $t('extensions.initCommands.optional') }}</span>
+      </div>
+      <svg 
+        class="w-4 h-4 text-themed-muted transition-transform" 
+        :class="{ 'rotate-180': expanded }"
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </div>
+
+    <!-- 命令列表 -->
+    <Transition name="expand">
+      <div v-if="expanded" class="space-y-2">
+        <!-- 加载中 -->
+        <div v-if="loading" class="text-center py-4">
+          <div class="inline-flex items-center gap-2 text-themed-muted text-sm">
+            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span>{{ $t('common.loading') }}</span>
+          </div>
+        </div>
+
+        <!-- 命令列表 -->
+        <template v-else-if="commands.length > 0">
+          <label 
+            v-for="cmd in displayedCommands" 
+            :key="cmd.id"
+            class="flex items-start gap-3 p-3 bg-themed-tertiary border border-themed rounded-lg cursor-pointer hover:border-themed-secondary transition-colors"
+            :class="{ 'border-primary-500/50 bg-primary-500/5': modelValue.includes(cmd.id) }"
+          >
+            <input 
+              type="checkbox" 
+              class="mt-0.5 rounded border-themed text-primary-500 focus:ring-primary-500"
+              :checked="modelValue.includes(cmd.id)"
+              @change="toggleCommand(cmd.id)"
+            />
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 flex-wrap">
+                <span class="text-sm text-themed-secondary font-medium">{{ cmd.name }}</span>
+                <span class="text-xs text-themed-faint">
+                  {{ $t('extensions.initCommands.lineCount', { count: cmd.commandLineCount }) }}
+                </span>
+              </div>
+              <div v-if="cmd.description" class="text-xs text-themed-muted mt-0.5 truncate">
+                {{ cmd.description }}
+              </div>
+              <div class="flex flex-wrap items-center gap-1 mt-1">
+                <span 
+                  v-for="d in cmd.distros" 
+                  :key="d"
+                  class="text-xs px-1.5 py-0.5 rounded bg-themed-secondary text-themed-faint"
+                >
+                  {{ getDistroName(d) }}
+                </span>
+              </div>
+            </div>
+          </label>
+          
+          <!-- 展开/收起按钮 -->
+          <button
+            v-if="showExpandButton || (!isCollapsed && commands.length > collapsedLimit)"
+            type="button"
+            class="w-full py-2 text-xs text-themed-muted hover:text-themed-secondary transition-colors flex items-center justify-center gap-1"
+            @click="isCollapsed = !isCollapsed"
+          >
+            <span v-if="isCollapsed">{{ $t('extensions.initCommands.showAll', { count: commands.length }) }}</span>
+            <span v-else>{{ $t('extensions.initCommands.collapse') }}</span>
+            <svg 
+              class="w-3.5 h-3.5 transition-transform" 
+              :class="{ 'rotate-180': !isCollapsed }"
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+        </template>
+
+        <!-- 空状态 -->
+        <div v-else-if="loaded" class="text-center py-4">
+          <p class="text-sm text-themed-muted">{{ $t('extensions.initCommands.noAvailable') }}</p>
+          <router-link 
+            to="/extensions" 
+            class="text-xs text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mt-1 inline-block"
+          >
+            {{ $t('extensions.initCommands.goToManage') }} →
+          </router-link>
+        </div>
+
+        <!-- 提示 -->
+        <div v-if="commands.length > 0" class="flex items-start gap-2 px-3 py-2 text-xs text-themed-faint">
+          <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span>{{ $t('extensions.initCommands.selectHint') }}</span>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
diff --git a/client/src/components/host/BatchConfigModal.vue b/client/src/components/host/BatchConfigModal.vue
new file mode 100644
index 0000000..2367858
--- /dev/null
+++ b/client/src/components/host/BatchConfigModal.vue
@@ -0,0 +1,793 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import api from '@/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface Props {
+  visible: boolean
+  hostId: number
+  selectedIds: number[]
+  totalInstanceCount: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}>()
+
+// 表单数据
+const form = ref({
+  // 资源配置
+  cpu: '',
+  memory: '',
+  disk: '',
+  monthlyTrafficLimit: '',
+  swapEnabled: null as boolean | null,
+  swapSize: '',
+  // 配额限制
+  portLimit: '',
+  snapshotLimit: '',
+  siteLimit: '',
+  // 容器权限
+  nested: null as boolean | null,
+  privileged: null as boolean | null,
+  // 高级配置 - 存储IO
+  limitsRead: '',
+  limitsWrite: '',
+  // 高级配置 - 网络限制
+  limitsIngress: null as number | null,
+  limitsEgress: null as number | null,
+  // 高级配置 - 进程与调度
+  limitsProcesses: '',
+  limitsCpuPriority: '',
+  // 高级配置 - 启动设置
+  bootAutostart: null as boolean | null,
+  bootAutostartPriority: '',
+  bootAutostartDelay: '',
+  bootHostShutdownTimeout: ''
+})
+
+// 控制哪些配置项启用修改
+const enabledFields = ref({
+  cpu: false,
+  memory: false,
+  disk: false,
+  monthlyTrafficLimit: false,
+  swapEnabled: false,
+  swapSize: false,
+  portLimit: false,
+  snapshotLimit: false,
+  siteLimit: false,
+  nested: false,
+  privileged: false,
+  limitsRead: false,
+  limitsWrite: false,
+  limitsIngress: false,
+  limitsEgress: false,
+  limitsProcesses: false,
+  limitsCpuPriority: false,
+  bootAutostart: false,
+  bootAutostartPriority: false,
+  bootAutostartDelay: false,
+  bootHostShutdownTimeout: false
+})
+
+// 当前展开的配置分类
+const expandedSections = ref({
+  resources: true,
+  quota: false,
+  permissions: false,
+  io: false,
+  network: false,
+  process: false,
+  boot: false
+})
+
+// 提交状态
+const isSubmitting = ref(false)
+const progress = ref({ current: 0, total: 0 })
+
+// 结果状态
+const showResult = ref(false)
+const result = ref<{
+  success: boolean
+  totalCount: number
+  successCount: number
+  failedCount: number
+  failedItems: Array<{
+    instanceId: number
+    incusId: string
+    name: string
+    error?: string
+  }>
+  retryPayload?: {
+    instanceIds: number[]
+    config: Record<string, unknown>
+  }
+} | null>(null)
+
+// 计算目标实例数量
+const targetCount = computed(() => {
+  return props.selectedIds.length > 0 ? props.selectedIds.length : props.totalInstanceCount
+})
+
+// 计算是否有任何启用的字段
+const hasEnabledFields = computed(() => {
+  return Object.values(enabledFields.value).some(v => v)
+})
+
+// 切换分类展开状态
+function toggleSection(section: keyof typeof expandedSections.value) {
+  expandedSections.value[section] = !expandedSections.value[section]
+}
+
+// 构建配置对象
+function buildConfig(): Record<string, unknown> {
+  const config: Record<string, unknown> = {}
+
+  if (enabledFields.value.cpu && form.value.cpu) {
+    config.cpu = parseInt(form.value.cpu, 10)
+  }
+  if (enabledFields.value.memory && form.value.memory) {
+    config.memory = parseInt(form.value.memory, 10)
+  }
+  if (enabledFields.value.disk && form.value.disk) {
+    // disk 以 GB 为单位输入，转换为 MB（1024进制）
+    config.disk = parseFloat(form.value.disk) * 1024
+  }
+  if (enabledFields.value.monthlyTrafficLimit) {
+    if (form.value.monthlyTrafficLimit === '' || form.value.monthlyTrafficLimit === '0') {
+      config.monthlyTrafficLimit = null
+    } else {
+      // 以 GB 为单位输入，转换为字节
+      const gb = parseFloat(form.value.monthlyTrafficLimit)
+      config.monthlyTrafficLimit = String(Math.round(gb * 1024 * 1024 * 1024))
+    }
+  }
+  if (enabledFields.value.swapEnabled && form.value.swapEnabled !== null) {
+    config.swapEnabled = form.value.swapEnabled
+  }
+  if (enabledFields.value.swapSize && form.value.swapSize !== '') {
+    config.swapSize = Math.max(0, parseInt(form.value.swapSize, 10))
+  }
+  if (enabledFields.value.portLimit) {
+    config.portLimit = form.value.portLimit ? parseInt(form.value.portLimit, 10) : null
+  }
+  if (enabledFields.value.snapshotLimit) {
+    config.snapshotLimit = form.value.snapshotLimit ? parseInt(form.value.snapshotLimit, 10) : null
+  }
+  if (enabledFields.value.siteLimit) {
+    config.siteLimit = form.value.siteLimit ? parseInt(form.value.siteLimit, 10) : null
+  }
+  if (enabledFields.value.nested) {
+    config.nested = form.value.nested
+  }
+  if (enabledFields.value.privileged) {
+    config.privileged = form.value.privileged
+  }
+  if (enabledFields.value.limitsRead) {
+    config.limitsRead = normalizeStorageLimit(form.value.limitsRead)
+  }
+  if (enabledFields.value.limitsWrite) {
+    config.limitsWrite = normalizeStorageLimit(form.value.limitsWrite)
+  }
+  if (enabledFields.value.limitsIngress) {
+    config.limitsIngress = form.value.limitsIngress ? `${form.value.limitsIngress}Mbit` : null
+  }
+  if (enabledFields.value.limitsEgress) {
+    config.limitsEgress = form.value.limitsEgress ? `${form.value.limitsEgress}Mbit` : null
+  }
+  if (enabledFields.value.limitsProcesses) {
+    config.limitsProcesses = form.value.limitsProcesses ? parseInt(form.value.limitsProcesses, 10) : null
+  }
+  if (enabledFields.value.limitsCpuPriority) {
+    config.limitsCpuPriority = form.value.limitsCpuPriority ? parseInt(form.value.limitsCpuPriority, 10) : null
+  }
+  if (enabledFields.value.bootAutostart) {
+    config.bootAutostart = form.value.bootAutostart
+  }
+  if (enabledFields.value.bootAutostartPriority) {
+    config.bootAutostartPriority = form.value.bootAutostartPriority ? parseInt(form.value.bootAutostartPriority, 10) : null
+  }
+  if (enabledFields.value.bootAutostartDelay) {
+    config.bootAutostartDelay = form.value.bootAutostartDelay ? parseInt(form.value.bootAutostartDelay, 10) : null
+  }
+  if (enabledFields.value.bootHostShutdownTimeout) {
+    config.bootHostShutdownTimeout = form.value.bootHostShutdownTimeout ? parseInt(form.value.bootHostShutdownTimeout, 10) : null
+  }
+
+  return config
+}
+
+// 提交批量修改
+async function handleSubmit() {
+  if (!hasEnabledFields.value) {
+    toast.error(t('host.batchConfig.noFieldsEnabled'))
+    return
+  }
+
+  const config = buildConfig()
+  if (Object.keys(config).length === 0) {
+    toast.error(t('host.batchConfig.noChanges'))
+    return
+  }
+
+  isSubmitting.value = true
+  progress.value = { current: 0, total: targetCount.value }
+
+  try {
+    // 确定目标实例 ID
+    let instanceIds: number[]
+    if (props.selectedIds.length > 0) {
+      instanceIds = props.selectedIds
+    } else {
+      // 获取宿主机下所有实例 ID
+      const res = await api.instances.list({
+        hostId: props.hostId,
+        pageSize: 1000 // 获取足够多
+      }) as unknown as { instances: Array<{ id: number }> }
+      instanceIds = res.instances.map((i: { id: number }) => i.id)
+    }
+
+    progress.value.total = instanceIds.length
+
+    const res = await api.hosts.batchUpdateConfig(props.hostId, {
+      instanceIds,
+      config
+    })
+
+    result.value = res
+    showResult.value = true
+
+    if (res.failedCount === 0) {
+      toast.success(t('host.batchConfig.successAll', { count: res.successCount }))
+    } else if (res.successCount > 0) {
+      toast.warning(t('host.batchConfig.partial', { success: res.successCount, failed: res.failedCount }))
+    } else {
+      toast.error(t('host.batchConfig.allFailed'))
+    }
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('host.batchConfig.submitFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// 重试失败项
+async function handleRetry() {
+  if (!result.value?.retryPayload) return
+
+  isSubmitting.value = true
+  try {
+    const res = await api.hosts.batchUpdateConfig(props.hostId, {
+      instanceIds: result.value.retryPayload.instanceIds,
+      config: result.value.retryPayload.config
+    })
+
+    result.value = res
+    
+    if (res.failedCount === 0) {
+      toast.success(t('host.batchConfig.retrySuccess', { count: res.successCount }))
+    } else {
+      toast.warning(t('host.batchConfig.retryPartial', { success: res.successCount, failed: res.failedCount }))
+    }
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('host.batchConfig.retryFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// 复制失败的 Incus ID
+function copyFailedIncusIds() {
+  if (!result.value?.failedItems) return
+  const ids = result.value.failedItems.map(item => item.incusId).join('\n')
+  navigator.clipboard.writeText(ids).then(() => {
+    toast.success(t('host.batchConfig.copiedIncusIds', { count: result.value!.failedItems.length }))
+  }).catch(() => {
+    toast.error(t('common.copyFailed'))
+  })
+}
+
+// 关闭弹窗
+function handleClose() {
+  if (isSubmitting.value) return
+  emit('update:visible', false)
+  if (result.value && result.value.successCount > 0) {
+    emit('success')
+  }
+}
+
+// 完成并关闭
+function handleDone() {
+  showResult.value = false
+  result.value = null
+  handleClose()
+}
+
+// 重置表单
+function resetForm() {
+  Object.keys(form.value).forEach(key => {
+    const k = key as keyof typeof form.value
+    if (typeof form.value[k] === 'boolean' || form.value[k] === null) {
+      (form.value[k] as boolean | null) = null
+    } else {
+      (form.value[k] as string) = ''
+    }
+  })
+  Object.keys(enabledFields.value).forEach(key => {
+    enabledFields.value[key as keyof typeof enabledFields.value] = false
+  })
+  showResult.value = false
+  result.value = null
+}
+
+// 监听弹窗关闭时重置
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    resetForm()
+  }
+})
+
+// CPU/内存 blur 时格式化为整数
+function handleCpuBlur() {
+  if (!form.value.cpu) return
+  const num = parseFloat(form.value.cpu)
+  if (isNaN(num) || num <= 0) {
+    form.value.cpu = '1'
+    return
+  }
+  form.value.cpu = Math.round(num).toString()
+}
+
+function handleMemoryBlur() {
+  if (!form.value.memory) return
+  const num = parseFloat(form.value.memory)
+  if (isNaN(num) || num <= 0) {
+    form.value.memory = '1'
+    return
+  }
+  form.value.memory = Math.round(num).toString()
+}
+
+function normalizeStorageLimit(value: string): string | null {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+
+  if (/^\d+(?:\.\d+)?$/i.test(trimmed)) {
+    return `${trimmed}MB`
+  }
+
+  const match = trimmed.match(/^(\d+(?:\.\d+)?)\s*(B|kB|MB|GB|TB|PB)$/i)
+  if (match) {
+    return `${match[1]}${match[2]}`
+  }
+
+  return trimmed
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay">
+        <div class="modal-backdrop" @click="handleClose"></div>
+        <div class="modal-content max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
+          <!-- 标题栏 -->
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('host.batchConfig.title') }}</h3>
+            <button class="text-themed-muted hover:text-themed" :disabled="isSubmitting" @click="handleClose">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 内容区域 -->
+          <div class="modal-body overflow-y-auto flex-1">
+            <!-- 结果展示 -->
+            <template v-if="showResult && result">
+              <div class="space-y-4">
+                <!-- 统计信息 -->
+                <div class="flex items-center gap-4 p-4 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                  <div class="flex-1 text-center">
+                    <div class="text-2xl font-bold text-green-500">{{ result.successCount }}</div>
+                    <div class="text-sm text-themed-secondary">{{ t('host.batchConfig.success') }}</div>
+                  </div>
+                  <div class="w-px h-10" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-300'"></div>
+                  <div class="flex-1 text-center">
+                    <div class="text-2xl font-bold text-red-500">{{ result.failedCount }}</div>
+                    <div class="text-sm text-themed-secondary">{{ t('host.batchConfig.failed') }}</div>
+                  </div>
+                </div>
+
+                <!-- 失败列表 -->
+                <div v-if="result.failedItems.length > 0" class="space-y-2">
+                  <div class="text-sm font-medium text-themed">{{ t('host.batchConfig.failedDetails') }}</div>
+                  <div class="max-h-48 overflow-y-auto rounded-lg border" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                    <table class="w-full text-sm">
+                      <thead class="sticky top-0" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+                        <tr>
+                          <th class="text-left px-3 py-2 text-themed-muted">Incus ID</th>
+                          <th class="text-left px-3 py-2 text-themed-muted">{{ t('instance.name') }}</th>
+                          <th class="text-left px-3 py-2 text-themed-muted">{{ t('host.batchConfig.errorReason') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody class="divide-y" :class="themeStore.isDark ? 'divide-gray-700' : 'divide-gray-200'">
+                        <tr v-for="item in result.failedItems" :key="item.instanceId">
+                          <td class="px-3 py-2 font-mono text-xs" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ item.incusId }}</td>
+                          <td class="px-3 py-2 text-themed">{{ item.name }}</td>
+                          <td class="px-3 py-2 text-red-500 text-xs">{{ item.error || '-' }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <!-- 配置表单 -->
+            <template v-else>
+              <!-- 目标提示 -->
+              <div class="p-3 mb-4 rounded-lg" :class="themeStore.isDark ? 'bg-blue-500/10' : 'bg-blue-50'">
+                <p class="text-sm" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'">
+                  {{ selectedIds.length > 0 
+                    ? t('host.batchConfig.targetSelected', { count: selectedIds.length })
+                    : t('host.batchConfig.targetAll', { count: totalInstanceCount })
+                  }}
+                </p>
+              </div>
+
+              <!-- 配置分类 -->
+              <div class="space-y-3">
+                <!-- 资源配置 -->
+                <div class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('resources')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.resources') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.resources ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.resources" class="px-4 pb-4 space-y-3">
+                    <!-- CPU -->
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.cpu" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">CPU (%)</label>
+                      <input 
+                        v-model="form.cpu" 
+                        type="number" 
+                        min="1" 
+                        :disabled="!enabledFields.cpu"
+                        :placeholder="t('host.batchConfig.placeholder.cpu')"
+                        class="input flex-1"
+                        @blur="handleCpuBlur"
+                      />
+                    </div>
+                    <!-- 内存 -->
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.memory" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.memory') }} (MB)</label>
+                      <input 
+                        v-model="form.memory" 
+                        type="number" 
+                        min="1" 
+                        :disabled="!enabledFields.memory"
+                        :placeholder="t('host.batchConfig.placeholder.memory')"
+                        class="input flex-1"
+                        @blur="handleMemoryBlur"
+                      />
+                    </div>
+                    <!-- 硬盘 -->
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.disk" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.disk') }} (GB)</label>
+                      <input 
+                        v-model="form.disk" 
+                        type="number" 
+                        min="0.1" 
+                        step="0.1"
+                        :disabled="!enabledFields.disk"
+                        :placeholder="t('host.batchConfig.placeholder.disk')"
+                        class="input flex-1"
+                      />
+                    </div>
+                    <!-- 流量 -->
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.monthlyTrafficLimit" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.traffic') }} (GB)</label>
+                      <input 
+                        v-model="form.monthlyTrafficLimit" 
+                        type="number" 
+                        min="0" 
+                        :disabled="!enabledFields.monthlyTrafficLimit"
+                        :placeholder="t('host.batchConfig.placeholder.traffic')"
+                        class="input flex-1"
+                      />
+                    </div>
+                    <!-- SWAP 开关 -->
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.swapEnabled" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.swapEnabled') }}</label>
+                      <select v-model="form.swapEnabled" :disabled="!enabledFields.swapEnabled" class="input flex-1">
+                        <option :value="null">-</option>
+                        <option :value="true">{{ t('common.enabled') }}</option>
+                        <option :value="false">{{ t('common.disabled') }}</option>
+                      </select>
+                    </div>
+                    <!-- SWAP 大小 -->
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.swapSize" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.swapSize') }} (MB)</label>
+                      <input 
+                        v-model="form.swapSize" 
+                        type="number" 
+                        min="0"
+                        max="1048576"
+                        step="128"
+                        :disabled="!enabledFields.swapSize"
+                        :placeholder="t('host.batchConfig.placeholder.swapSize')"
+                        class="input flex-1"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 配额限制 -->
+                <div class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('quota')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.quota') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.quota ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.quota" class="px-4 pb-4 space-y-3">
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.portLimit" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.portLimit') }}</label>
+                      <input v-model="form.portLimit" type="number" min="1" :disabled="!enabledFields.portLimit" :placeholder="t('host.batchConfig.placeholder.limit')" class="input flex-1" />
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.snapshotLimit" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.snapshotLimit') }}</label>
+                      <input v-model="form.snapshotLimit" type="number" min="0" :disabled="!enabledFields.snapshotLimit" :placeholder="t('host.batchConfig.placeholder.limit')" class="input flex-1" />
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.siteLimit" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.siteLimit') }}</label>
+                      <input v-model="form.siteLimit" type="number" min="0" :disabled="!enabledFields.siteLimit" :placeholder="t('host.batchConfig.placeholder.limit')" class="input flex-1" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 容器权限 (已隐藏) -->
+                <div v-if="false" class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('permissions')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.permissions') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.permissions ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.permissions" class="px-4 pb-4 space-y-3">
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.nested" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.nested') }}</label>
+                      <select v-model="form.nested" :disabled="!enabledFields.nested" class="input flex-1">
+                        <option :value="null">-</option>
+                        <option :value="true">{{ t('common.enabled') }}</option>
+                        <option :value="false">{{ t('common.disabled') }}</option>
+                      </select>
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.privileged" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.privileged') }}</label>
+                      <select v-model="form.privileged" :disabled="!enabledFields.privileged" class="input flex-1">
+                        <option :value="null">-</option>
+                        <option :value="true">{{ t('common.enabled') }}</option>
+                        <option :value="false">{{ t('common.disabled') }}</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 存储IO限制 -->
+                <div class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('io')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.io') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.io ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.io" class="px-4 pb-4 space-y-3">
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.limitsRead" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.limitsRead') }}</label>
+                      <input v-model="form.limitsRead" :disabled="!enabledFields.limitsRead" :placeholder="t('host.batchConfig.placeholder.ioLimit')" class="input flex-1" />
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.limitsWrite" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.limitsWrite') }}</label>
+                      <input v-model="form.limitsWrite" :disabled="!enabledFields.limitsWrite" :placeholder="t('host.batchConfig.placeholder.ioLimit')" class="input flex-1" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 网络限制 -->
+                <div class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('network')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.network') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.network ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.network" class="px-4 pb-4 space-y-3">
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.limitsIngress" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.limitsIngress') }}</label>
+                      <div class="flex items-center gap-2 flex-1">
+                        <input v-model.number="form.limitsIngress" type="number" min="1" :disabled="!enabledFields.limitsIngress" placeholder="300" class="input flex-1" />
+                        <span class="text-themed-muted text-sm">Mbit</span>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.limitsEgress" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.limitsEgress') }}</label>
+                      <div class="flex items-center gap-2 flex-1">
+                        <input v-model.number="form.limitsEgress" type="number" min="1" :disabled="!enabledFields.limitsEgress" placeholder="300" class="input flex-1" />
+                        <span class="text-themed-muted text-sm">Mbit</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 进程与调度 -->
+                <div class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('process')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.process') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.process ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.process" class="px-4 pb-4 space-y-3">
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.limitsProcesses" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.limitsProcesses') }}</label>
+                      <input v-model="form.limitsProcesses" type="number" min="0" :disabled="!enabledFields.limitsProcesses" placeholder="500" class="input flex-1" />
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.limitsCpuPriority" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.limitsCpuPriority') }}</label>
+                      <input v-model="form.limitsCpuPriority" type="number" min="0" max="10" :disabled="!enabledFields.limitsCpuPriority" placeholder="0-10" class="input flex-1" />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 启动设置 -->
+                <div class="border rounded-lg" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+                  <button 
+                    class="w-full flex items-center justify-between px-4 py-3 text-left"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                    @click="toggleSection('boot')"
+                  >
+                    <span class="font-medium text-themed">{{ t('host.batchConfig.section.boot') }}</span>
+                    <svg class="w-4 h-4 transition-transform" :class="expandedSections.boot ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  <div v-show="expandedSections.boot" class="px-4 pb-4 space-y-3">
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.bootAutostart" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.bootAutostart') }}</label>
+                      <select v-model="form.bootAutostart" :disabled="!enabledFields.bootAutostart" class="input flex-1">
+                        <option :value="null">-</option>
+                        <option :value="true">{{ t('common.enabled') }}</option>
+                        <option :value="false">{{ t('common.disabled') }}</option>
+                      </select>
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.bootAutostartPriority" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.bootPriority') }}</label>
+                      <input v-model="form.bootAutostartPriority" type="number" min="0" max="100" :disabled="!enabledFields.bootAutostartPriority" placeholder="0-100" class="input flex-1" />
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.bootAutostartDelay" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.bootDelay') }}</label>
+                      <input v-model="form.bootAutostartDelay" type="number" min="5" max="600" :disabled="!enabledFields.bootAutostartDelay" :placeholder="t('common.seconds')" class="input flex-1" />
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <input v-model="enabledFields.bootHostShutdownTimeout" type="checkbox" class="rounded" />
+                      <label class="w-24 text-sm text-themed-secondary">{{ t('host.batchConfig.shutdownTimeout') }}</label>
+                      <input v-model="form.bootHostShutdownTimeout" type="number" min="30" max="600" :disabled="!enabledFields.bootHostShutdownTimeout" :placeholder="t('common.seconds')" class="input flex-1" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- 底部操作栏 -->
+          <div class="modal-footer">
+            <template v-if="showResult && result">
+              <button 
+                v-if="result.failedItems.length > 0"
+                class="btn-secondary"
+                @click="copyFailedIncusIds"
+              >
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                {{ t('host.batchConfig.copyIncusIds') }}
+              </button>
+              <button 
+                v-if="result.retryPayload && result.failedCount > 0"
+                class="btn-secondary"
+                :disabled="isSubmitting"
+                @click="handleRetry"
+              >
+                <svg v-if="isSubmitting" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                {{ t('host.batchConfig.retryFailed') }}
+              </button>
+              <button class="btn-primary" @click="handleDone">
+                {{ t('common.done') }}
+              </button>
+            </template>
+            <template v-else>
+              <button class="btn-secondary" :disabled="isSubmitting" @click="handleClose">
+                {{ t('common.cancel') }}
+              </button>
+              <button 
+                class="btn-primary" 
+                :disabled="isSubmitting || !hasEnabledFields"
+                @click="handleSubmit"
+              >
+                <svg v-if="isSubmitting" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ isSubmitting ? t('common.processing') : t('host.batchConfig.submit', { count: targetCount }) }}
+              </button>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/host/HostCaddyTab.vue b/client/src/components/host/HostCaddyTab.vue
new file mode 100644
index 0000000..8953ff8
--- /dev/null
+++ b/client/src/components/host/HostCaddyTab.vue
@@ -0,0 +1,595 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import api from '@/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface Props {
+  hostId: number
+}
+
+const props = defineProps<Props>()
+
+const loading = ref(true)
+const generating = ref(false)
+const resetting = ref(false)
+const confirming = ref(false)
+const testing = ref(false)
+const copied = ref(false)
+
+// Caddy 状态
+const caddyStatus = ref<{
+  enabled: boolean
+  username: string | null
+  port: number
+  hasPassword: boolean
+  natPublicIp: string | null
+  sitesCount: number
+}>({
+  enabled: false,
+  username: null,
+  port: 8444,
+  hasPassword: false,
+  natPublicIp: null,
+  sitesCount: 0
+})
+
+// 生成的安装信息
+const installInfo = ref({
+  command: '',
+  username: '',
+  password: '',
+  port: 8444
+})
+
+// 测试结果
+const testResult = ref<{
+  connected: boolean
+  sitesCount: number
+  dnsRecordType: 'A' | 'AAAA' | 'CNAME'
+  dnsRecordValue: string
+}>({
+  connected: false,
+  sitesCount: 0,
+  dnsRecordType: 'A',
+  dnsRecordValue: ''
+})
+
+const showInstallModal = ref(false)
+
+// 站点列表相关
+interface ProxySite {
+  id: number
+  domain: string
+  targetPort: number
+  httpsEnabled: boolean
+  status: 'pending' | 'active' | 'error'
+  enabled: boolean
+  error: string | null
+  createdAt: string
+  instance: {
+    id: number
+    name: string
+    ipv4: string | null
+    status: string
+  } | null
+}
+
+const sites = ref<ProxySite[]>([])
+const sitesLoading = ref(false)
+const sitesPage = ref(1)
+const sitesPageSize = 5
+const sitesTotal = ref(0)
+const sitesTotalPages = ref(1)
+
+onMounted(() => {
+  loadCaddyStatus()
+})
+
+// 当 Caddy 启用状态变化时，加载站点列表
+watch(() => caddyStatus.value.enabled, (enabled) => {
+  if (enabled) {
+    loadSites()
+  }
+})
+
+// 当 hostId 变化时，重置状态并重新加载数据
+watch(() => props.hostId, () => {
+  // 重置分页状态
+  sitesPage.value = 1
+  sites.value = []
+  sitesTotal.value = 0
+  sitesTotalPages.value = 1
+  // 重置其他状态
+  showInstallModal.value = false
+  testResult.value = { connected: false, sitesCount: 0, dnsRecordType: 'A', dnsRecordValue: '' }
+  // 重新加载数据
+  loadCaddyStatus()
+})
+
+async function loadCaddyStatus() {
+  loading.value = true
+  try {
+    const res = await api.hosts.getCaddy(props.hostId)
+    caddyStatus.value = res
+    // 如果 Caddy 已启用，加载站点列表
+    if (res.enabled) {
+      await loadSites()
+    }
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('host.caddy.loadFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadSites() {
+  sitesLoading.value = true
+  try {
+    const res = await api.hosts.getCaddySites(props.hostId, {
+      page: sitesPage.value,
+      pageSize: sitesPageSize
+    })
+    sites.value = res.sites
+    sitesTotal.value = res.total
+    sitesTotalPages.value = res.totalPages
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('host.caddy.loadSitesFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    sitesLoading.value = false
+  }
+}
+
+function goToPrevSitesPage(): void {
+  if (sitesPage.value > 1) {
+    sitesPage.value--
+    loadSites()
+  }
+}
+
+function goToNextSitesPage(): void {
+  if (sitesPage.value < sitesTotalPages.value) {
+    sitesPage.value++
+    loadSites()
+  }
+}
+
+function getSiteStatusBadge(site: ProxySite) {
+  if (!site.enabled) {
+    return { label: t('host.caddy.siteDisabled'), class: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' }
+  }
+  switch (site.status) {
+    case 'active':
+      return { label: t('host.caddy.siteActive'), class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' }
+    case 'pending':
+      return { label: t('host.caddy.sitePending'), class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400' }
+    case 'error':
+      return { label: t('host.caddy.siteError'), class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400' }
+    default:
+      return { label: site.status, class: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' }
+  }
+}
+
+async function generateInstallCommand() {
+  generating.value = true
+  try {
+    const res = await api.hosts.generateCaddyCommand(props.hostId)
+    installInfo.value = {
+      command: res.installCommand,
+      username: res.username,
+      password: res.password,
+      port: res.port
+    }
+    showInstallModal.value = true
+    // 刷新状态
+    await loadCaddyStatus()
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('host.caddy.generateFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    generating.value = false
+  }
+}
+
+async function resetCredentials() {
+  if (!confirm(t('host.caddy.resetConfirm'))) {
+    return
+  }
+  
+  resetting.value = true
+  try {
+    const res = await api.hosts.resetCaddyCredentials(props.hostId)
+    installInfo.value = {
+      command: res.installCommand,
+      username: res.username,
+      password: res.password,
+      port: res.port
+    }
+    showInstallModal.value = true
+    toast.success(t('host.caddy.resetSuccess'))
+    // 刷新状态
+    await loadCaddyStatus()
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('host.caddy.resetFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    resetting.value = false
+  }
+}
+
+async function confirmInstallation() {
+  confirming.value = true
+  try {
+    await api.hosts.confirmCaddyInstalled(props.hostId)
+    toast.success(t('host.caddy.confirmSuccess'))
+    showInstallModal.value = false
+    await loadCaddyStatus()
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('host.caddy.confirmFailed'))
+  } finally {
+    confirming.value = false
+  }
+}
+
+async function testConnection() {
+  testing.value = true
+  try {
+    const res = await api.hosts.testCaddyConnection(props.hostId)
+    testResult.value = res
+    if (res.connected) {
+      toast.success(t('host.caddy.testSuccess'))
+    } else {
+      toast.error(t('host.caddy.testFailed'))
+    }
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('host.caddy.testFailed'))
+  } finally {
+    testing.value = false
+  }
+}
+
+function copyCommand() {
+  navigator.clipboard.writeText(installInfo.value.command)
+  copied.value = true
+  toast.success(t('common.copied'))
+  setTimeout(() => { copied.value = false }, 2000)
+}
+
+const isEnabled = computed(() => caddyStatus.value.enabled)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+    </div>
+
+    <!-- Caddy 状态卡片 -->
+    <div v-else class="card p-6">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+          {{ t('host.caddy.title') }}
+        </h3>
+        <span 
+          class="px-3 py-1 text-sm rounded-full"
+          :class="isEnabled 
+            ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' 
+            : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'"
+        >
+          {{ isEnabled ? t('host.caddy.enabled') : t('host.caddy.disabled') }}
+        </span>
+      </div>
+
+      <p class="text-sm mb-6" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+        {{ t('host.caddy.description') }}
+      </p>
+
+      <!-- 未启用状态 -->
+      <div v-if="!isEnabled" class="space-y-4">
+        <div 
+          class="border-2 border-dashed rounded-lg p-6 text-center"
+          :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-300'"
+        >
+          <svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+          <p class="text-sm mb-4" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+            {{ t('host.caddy.notInstalled') }}
+          </p>
+          <button
+            :disabled="generating"
+            class="btn-primary"
+            @click="generateInstallCommand"
+          >
+            <span v-if="generating" class="flex items-center gap-2">
+              <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ t('common.loading') }}
+            </span>
+            <span v-else>{{ t('host.caddy.generateCommand') }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 已启用状态 -->
+      <div v-else class="space-y-4">
+        <dl class="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <dt class="text-gray-500">{{ t('host.caddy.apiPort') }}</dt>
+            <dd class="font-mono" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+              {{ caddyStatus.port }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-gray-500">{{ t('host.caddy.username') }}</dt>
+            <dd class="font-mono" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+              {{ caddyStatus.username || '-' }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-gray-500">{{ t('host.caddy.publicIp') }}</dt>
+            <dd class="font-mono" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+              {{ caddyStatus.natPublicIp || '-' }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-gray-500">{{ t('host.caddy.sitesCount') }}</dt>
+            <dd class="font-mono" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+              {{ caddyStatus.sitesCount || 0 }}
+            </dd>
+          </div>
+        </dl>
+
+        <div class="flex gap-3 pt-2">
+          <button
+            :disabled="testing"
+            class="btn-ghost"
+            @click="testConnection"
+          >
+            <span v-if="testing" class="flex items-center gap-2">
+              <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ t('common.loading') }}
+            </span>
+            <span v-else>{{ t('host.caddy.testConnection') }}</span>
+          </button>
+          <button
+            :disabled="generating"
+            class="btn-ghost"
+            @click="generateInstallCommand"
+          >
+            {{ t('host.caddy.viewCommand') }}
+          </button>
+          <button
+            :disabled="resetting"
+            class="btn-ghost text-amber-600 hover:text-amber-700"
+            @click="resetCredentials"
+          >
+            <span v-if="resetting" class="flex items-center gap-2">
+              <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ t('common.loading') }}
+            </span>
+            <span v-else>{{ t('host.caddy.resetCredentials') }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 反代站点列表 -->
+    <div v-if="!loading && isEnabled" class="card p-6">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+          {{ t('host.caddy.sitesList') }}
+        </h3>
+        <span class="text-sm text-gray-500">{{ t('host.caddy.sitesTotalCount', { count: sitesTotal }) }}</span>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="sitesLoading" class="flex justify-center py-8">
+        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else-if="sites.length === 0" class="text-center py-8">
+        <svg class="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+        </svg>
+        <p class="text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+          {{ t('host.caddy.noSites') }}
+        </p>
+      </div>
+
+      <!-- 站点列表 -->
+      <div v-else class="space-y-3">
+        <div 
+          v-for="site in sites" 
+          :key="site.id"
+          class="flex items-center justify-between gap-4 p-3 rounded-lg border"
+          :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/50' : 'border-gray-200 bg-gray-50'"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <span class="font-mono text-sm truncate" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                {{ site.domain }}
+              </span>
+              <span 
+                class="px-2 py-0.5 text-xs rounded-full flex-shrink-0"
+                :class="getSiteStatusBadge(site).class"
+              >
+                {{ getSiteStatusBadge(site).label }}
+              </span>
+              <span 
+                v-if="site.httpsEnabled" 
+                class="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 flex-shrink-0"
+              >
+                HTTPS
+              </span>
+            </div>
+            <div class="flex items-center gap-3 mt-1 text-xs" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+              <span v-if="site.instance">
+                <span class="text-gray-400">{{ t('host.caddy.instance') }}:</span>
+                {{ site.instance.name }}
+              </span>
+              <span>
+                <span class="text-gray-400">{{ t('host.caddy.targetPort') }}:</span>
+                {{ site.targetPort }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 分页控件 -->
+        <div v-if="sitesTotalPages > 1" class="flex items-center justify-between mt-4 pt-3 border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <span class="text-xs text-gray-500">
+            {{ t('host.caddy.pageInfo', { current: sitesPage, total: sitesTotalPages, count: sitesTotal }) }}
+          </span>
+          <div class="flex items-center gap-2">
+            <button 
+              class="btn-ghost btn-sm" 
+              :disabled="sitesPage <= 1" 
+              @click="goToPrevSitesPage"
+            >
+              <svg 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 19l-7-7 7-7" />
+              </svg>
+              {{ t('host.caddy.prevPage') }}
+            </button>
+            <button 
+              class="btn-ghost btn-sm" 
+              :disabled="sitesPage >= sitesTotalPages" 
+              @click="goToNextSitesPage"
+            >
+              {{ t('host.caddy.nextPage') }}
+              <svg 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="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 安装命令模态框 -->
+    <Teleport to="body">
+      <div 
+        v-if="showInstallModal" 
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
+        @click.self="showInstallModal = false"
+      >
+        <div 
+          class="w-full max-w-2xl rounded-lg shadow-xl"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+        >
+          <div class="p-6">
+            <h3 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+              {{ t('host.caddy.installCommand') }}
+            </h3>
+
+            <!-- 凭据信息 -->
+            <div class="mb-4 p-4 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+              <dl class="grid grid-cols-2 gap-3 text-sm">
+                <div>
+                  <dt class="text-gray-500">{{ t('host.caddy.username') }}</dt>
+                  <dd class="font-mono font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                    {{ installInfo.username }}
+                  </dd>
+                </div>
+                <div>
+                  <dt class="text-gray-500">{{ t('host.caddy.password') }}</dt>
+                  <dd class="font-mono font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                    {{ installInfo.password }}
+                  </dd>
+                </div>
+                <div>
+                  <dt class="text-gray-500">{{ t('host.caddy.apiPort') }}</dt>
+                  <dd class="font-mono font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                    {{ installInfo.port }}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+
+            <!-- 安装命令 -->
+            <div class="mb-4">
+              <label class="block text-sm font-medium mb-2" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                {{ t('host.caddy.commandLabel') }}
+              </label>
+              <div class="relative">
+                <pre 
+                  class="p-4 rounded-lg text-sm overflow-x-auto font-mono"
+                  :class="themeStore.isDark ? 'bg-gray-800 text-green-400' : 'bg-gray-900 text-green-400'"
+                >{{ installInfo.command }}</pre>
+                <button
+                  class="absolute top-2 right-2 p-2 rounded hover:bg-gray-700 transition-colors"
+                  :title="t('common.copy')"
+                  @click="copyCommand"
+                >
+                  <svg v-if="!copied" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                  <svg v-else class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- 提示 -->
+            <div 
+              class="p-4 rounded-lg mb-6 text-sm"
+              :class="themeStore.isDark ? 'bg-blue-900/30 text-blue-300' : 'bg-blue-50 text-blue-700'"
+            >
+              <p class="font-medium mb-1">{{ t('host.caddy.installHint') }}</p>
+              <ol class="list-decimal list-inside space-y-1 text-sm opacity-90">
+                <li>{{ t('host.caddy.step1') }}</li>
+                <li>{{ t('host.caddy.step2') }}</li>
+                <li>{{ t('host.caddy.step3') }}</li>
+              </ol>
+            </div>
+
+            <!-- 操作按钮 -->
+            <div class="flex justify-end gap-3">
+              <button
+                class="btn-ghost"
+                @click="showInstallModal = false"
+              >
+                {{ t('common.close') }}
+              </button>
+              <button
+                :disabled="confirming"
+                class="btn-primary"
+                @click="confirmInstallation"
+              >
+                <span v-if="confirming" class="flex items-center gap-2">
+                  <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  {{ t('common.loading') }}
+                </span>
+                <span v-else>{{ t('host.caddy.confirmInstalled') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/components/host/HostCreateInstanceTab.vue b/client/src/components/host/HostCreateInstanceTab.vue
new file mode 100644
index 0000000..c5dd90a
--- /dev/null
+++ b/client/src/components/host/HostCreateInstanceTab.vue
@@ -0,0 +1,714 @@
+<script setup lang="ts">
+/**
+ * HostCreateInstanceTab
+ * - self mode: existing host-owner free instance flow
+ * - gift mode: host owner creates free instance or paid instance with free gifted days for another user
+ */
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import PackageSelector from '@/components/instance/PackageSelector.vue'
+import ResourceSliders from '@/components/instance/ResourceSliders.vue'
+import ImageSelector from '@/components/instance/ImageSelector.vue'
+import SSHKeySelector from '@/components/instance/SSHKeySelector.vue'
+import InitCommandSelector from '@/components/extensions/InitCommandSelector.vue'
+import type { Package, SshKey, UserQuota } from '@/types/api'
+import { validateName as validateInstanceName } from '@/utils/validation'
+import { translateError } from '@/utils/errorHandler'
+
+interface Props {
+  hostId: number
+  hostName: string
+  instanceType?: 'container' | 'vm' | 'both'
+}
+
+interface ImageOption {
+  value: string
+  label: string
+  icon: string | null
+}
+
+interface GiftPlan {
+  id: number
+  name: string
+  description: string | null
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  trafficLimit: string
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  setupFee: number
+  monthlyPrice: number
+  isActive: boolean
+  isSoldOut: boolean
+  sortOrder: number
+  slaGuarantee: number | null
+}
+
+type CreateMode = 'self' | 'gift'
+type GiftInstanceType = 'free' | 'paid'
+type TargetLookupState = 'idle' | 'checking' | 'found' | 'not_found' | 'inactive' | 'no_ssh' | 'self'
+
+const props = defineProps<Props>()
+
+const router = useRouter()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const toast = useToast()
+const themeStore = useThemeStore()
+const loadedUserId = ref<number | null>(null)
+const loadedUserRole = ref<string | null>(null)
+const currentUserId = computed(() => loadedUserId.value ?? authStore.user?.id ?? null)
+const isAdmin = computed(() => (loadedUserRole.value ?? authStore.user?.role) === 'admin')
+
+const packages = ref<Package[]>([])
+const sshKeys = ref<SshKey[]>([])
+const userQuota = ref<UserQuota | null>(null)
+const availableImages = ref<ImageOption[]>([])
+const plans = ref<GiftPlan[]>([])
+
+const loading = ref(true)
+const imagesLoading = ref(false)
+const plansLoading = ref(false)
+const submitting = ref(false)
+
+const createMode = ref<CreateMode>(isAdmin.value ? 'gift' : 'self')
+const giftInstanceType = ref<GiftInstanceType>('free')
+const giftDays = ref(30)
+
+const targetUsername = ref('')
+const targetLookupState = ref<TargetLookupState>('idle')
+const targetUser = ref<{ id: number; username: string } | null>(null)
+
+const form = ref({
+  name: '',
+  packageId: null as number | null,
+  image: '',
+  cpu: 15,
+  memory: 128,
+  disk: 512,
+  sshKeyId: null as number | null,
+  customInitCommandIds: [] as number[]
+})
+
+const selectedPackage = computed<Package | undefined>(() =>
+  packages.value.find(pkg => pkg.id === form.value.packageId)
+)
+
+const selectedPlan = computed<GiftPlan | undefined>(() =>
+  plans.value.find(plan => plan.id === selectedPlanId.value)
+)
+
+const selectedPlanId = ref<number | null>(null)
+
+const isGiftMode = computed(() => createMode.value === 'gift')
+const showFreeResources = computed(() => !isGiftMode.value || giftInstanceType.value === 'free')
+const isGiftPaid = computed(() => isGiftMode.value && giftInstanceType.value === 'paid')
+const normalizedGiftDays = computed(() => {
+  if (!Number.isFinite(giftDays.value)) return 30
+  return Math.max(1, Math.min(365, Math.floor(giftDays.value)))
+})
+const isGiftDaysValid = computed(() => {
+  if (!isGiftPaid.value) return true
+  return Number.isFinite(giftDays.value) && giftDays.value >= 1 && giftDays.value <= 365
+})
+
+const billingInfo = computed(() => {
+  if (!selectedPlan.value) return null
+  const price = selectedPlan.value.price / 100
+  return {
+    price,
+    totalPrice: price,
+    billingCycle: selectedPlan.value.billingCycle
+  }
+})
+
+const currentMemoryForImages = computed(() => {
+  if (isGiftPaid.value && selectedPlan.value) {
+    return selectedPlan.value.memory
+  }
+  return form.value.memory
+})
+
+const currentDistro = computed(() => {
+  const image = availableImages.value.find(item => item.value === form.value.image)
+  return image?.icon || 'debian'
+})
+
+const canSubmitSelf = computed(() => {
+  return (
+    form.value.name.trim().length >= 2 &&
+    form.value.packageId !== null &&
+    !!form.value.image &&
+    form.value.sshKeyId !== null
+  )
+})
+
+const canSubmitGift = computed(() => {
+  const hasTarget = targetLookupState.value === 'found' && targetUser.value !== null
+  const hasPlan = !isGiftPaid.value || (selectedPlanId.value !== null && !!selectedPlan.value && !selectedPlan.value.isSoldOut)
+  return (
+    form.value.name.trim().length >= 2 &&
+    form.value.packageId !== null &&
+    !!form.value.image &&
+    hasTarget &&
+    hasPlan &&
+    isGiftDaysValid.value
+  )
+})
+
+const canSubmit = computed(() => createMode.value === 'self' ? canSubmitSelf.value : canSubmitGift.value)
+
+function getDistroFromName(name: string): string {
+  const lower = name.toLowerCase()
+  if (lower.includes('ubuntu')) return 'ubuntu'
+  if (lower.includes('debian')) return 'debian'
+  if (lower.includes('alpine')) return 'alpine'
+  if (lower.includes('centos')) return 'centos'
+  if (lower.includes('fedora')) return 'fedora'
+  if (lower.includes('archlinux') || lower.includes('arch')) return 'archlinux'
+  if (lower.includes('opensuse') || lower.includes('suse')) return 'opensuse'
+  if (lower.includes('rocky')) return 'rocky'
+  if (lower.includes('alma')) return 'alma'
+  if (lower.includes('oracle')) return 'oracle'
+  if (lower.includes('gentoo')) return 'gentoo'
+  if (lower.includes('nixos')) return 'nixos'
+  return 'debian'
+}
+
+async function loadPlans(packageId: number): Promise<void> {
+  plansLoading.value = true
+  selectedPlanId.value = null
+  try {
+    const res = await api.packages.getPlans(packageId)
+    plans.value = (res.plans || []).filter(plan => plan.isActive)
+    selectedPlanId.value = plans.value.find(plan => !plan.isSoldOut)?.id ?? null
+  } catch {
+    plans.value = []
+  } finally {
+    plansLoading.value = false
+  }
+}
+
+async function loadAvailableImages(memory?: number): Promise<void> {
+  if (!selectedPackage.value) {
+    availableImages.value = []
+    form.value.image = ''
+    return
+  }
+
+  imagesLoading.value = true
+  try {
+    const res = await api.images.getSystemImages(
+      selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+      memory,
+      props.hostId
+    )
+
+    availableImages.value = (res.images || []).map(img => ({
+      value: img.remoteAlias,
+      label: img.name,
+      icon: img.icon || getDistroFromName(img.name)
+    }))
+
+    if (availableImages.value.length === 0) {
+      form.value.image = ''
+      return
+    }
+
+    const exists = availableImages.value.some(item => item.value === form.value.image)
+    if (!exists) {
+      form.value.image = availableImages.value[0].value
+    }
+  } catch {
+    availableImages.value = []
+    form.value.image = ''
+  } finally {
+    imagesLoading.value = false
+  }
+}
+
+function resetResourceDefaults(pkg: Package): void {
+  const cpuMax = Math.max(15, pkg.cpu_max)
+  const cpuHalf = Math.ceil(cpuMax / 2)
+  form.value.cpu = Math.max(15, Math.min(Math.floor(cpuHalf / 5) * 5, cpuMax))
+
+  const memoryMax = Math.max(128, pkg.memory_max)
+  const memoryHalf = Math.ceil(memoryMax / 2)
+  form.value.memory = Math.max(128, Math.min(Math.floor(memoryHalf / 64) * 64, memoryMax))
+
+  const diskMax = Math.max(512, pkg.disk_max)
+  const diskHalf = Math.ceil(diskMax / 2)
+  form.value.disk = Math.max(512, Math.min(Math.floor(diskHalf / 102) * 102, diskMax))
+}
+
+async function handlePackageSelect(pkg: Package): Promise<void> {
+  form.value.packageId = pkg.id
+  form.value.image = ''
+  selectedPlanId.value = null
+  plans.value = []
+  resetResourceDefaults(pkg)
+  await loadPlans(pkg.id)
+  await loadAvailableImages(currentMemoryForImages.value)
+}
+
+async function loadData(): Promise<void> {
+  loading.value = true
+  try {
+    const meRes = await api.auth.me()
+    const currentUser = (meRes as { user?: { id?: number; role?: string; quota?: UserQuota } }).user
+    loadedUserId.value = currentUser?.id ?? null
+    loadedUserRole.value = currentUser?.role ?? null
+    const currentIsAdmin = currentUser?.role === 'admin'
+    const [packagesRes, keysRes] = await Promise.all([
+      api.packages.list(),
+      currentIsAdmin ? Promise.resolve({ keys: [] }) : api.sshKeys.list()
+    ])
+
+    packages.value = (packagesRes.packages || []).filter((pkg: Package) => {
+      const isUsablePackage = currentIsAdmin || pkg.isOwn === true
+      return isUsablePackage && pkg.host_ids?.includes(props.hostId)
+    })
+
+    sshKeys.value = keysRes.keys || []
+    userQuota.value = currentUser?.quota || null
+
+    if (packages.value.length > 0) {
+      if (currentIsAdmin) {
+        createMode.value = 'gift'
+      }
+      await handlePackageSelect(packages.value[0])
+    }
+  } catch (err: any) {
+    toast.error(t('common.loadFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function checkTargetUser(): Promise<void> {
+  const username = targetUsername.value.trim()
+  if (!username) {
+    targetLookupState.value = 'idle'
+    targetUser.value = null
+    return
+  }
+
+  targetLookupState.value = 'checking'
+  try {
+    const res = await api.hosts.lookupGiftTargetUser(props.hostId, username)
+    if (res.user.id === currentUserId.value && !isAdmin.value) {
+      targetLookupState.value = 'self'
+      targetUser.value = null
+      return
+    }
+
+    if (res.user.status !== 'active') {
+      targetLookupState.value = 'inactive'
+      targetUser.value = null
+      return
+    }
+
+    if (!res.user.hasSshKey) {
+      targetLookupState.value = 'no_ssh'
+      targetUser.value = null
+      return
+    }
+
+    targetLookupState.value = 'found'
+    targetUser.value = {
+      id: res.user.id,
+      username: res.user.username
+    }
+  } catch {
+    targetLookupState.value = 'not_found'
+    targetUser.value = null
+  }
+}
+
+const targetLookupMessage = computed(() => {
+  switch (targetLookupState.value) {
+    case 'found':
+      return t('admin.instanceCreate.userFound', { id: targetUser.value?.id })
+    case 'not_found':
+      return t('admin.instanceCreate.userNotFound')
+    case 'inactive':
+      return t('host.createInstance.userInactive')
+    case 'no_ssh':
+      return t('admin.instanceCreate.noSshKey')
+    case 'self':
+      return t('host.createInstance.cannotGiftToSelf')
+    default:
+      return ''
+  }
+})
+
+const targetLookupClass = computed(() => {
+  return targetLookupState.value === 'found' ? 'text-green-500' : 'text-red-500'
+})
+
+watch(() => form.value.memory, (newMemory, oldMemory) => {
+  if (!showFreeResources.value || !selectedPackage.value || newMemory === oldMemory) return
+  const wasLow = (oldMemory ?? 128) <= 128
+  const isLow = newMemory <= 128
+  if (wasLow !== isLow) {
+    void loadAvailableImages(newMemory)
+  }
+})
+
+watch([createMode, giftInstanceType, selectedPlanId], () => {
+  if (!selectedPackage.value) return
+
+  if (isAdmin.value && createMode.value === 'self') {
+    createMode.value = 'gift'
+    return
+  }
+
+  if (createMode.value === 'self') {
+    targetUsername.value = ''
+    targetLookupState.value = 'idle'
+    targetUser.value = null
+    giftInstanceType.value = 'free'
+    giftDays.value = 30
+  }
+
+  void loadAvailableImages(currentMemoryForImages.value)
+})
+
+onMounted(async () => {
+  await loadData()
+})
+
+async function handleSelfSubmit(): Promise<void> {
+  if (!canSubmitSelf.value) return
+
+  const nameValidation = validateInstanceName(form.value.name, t('instance.name'), 2, 64)
+  if (!nameValidation.valid) {
+    toast.error(nameValidation.message || t('common.error'))
+    return
+  }
+
+  if (form.value.packageId === null) {
+    toast.error(t('instance.createPage.selectPackage'))
+    return
+  }
+
+  if (form.value.sshKeyId === null) {
+    toast.error(t('instance.createPage.selectSshKey'))
+    return
+  }
+
+  const result = await api.instances.create({
+    name: form.value.name.trim(),
+    packageId: form.value.packageId,
+    hostId: props.hostId,
+    image: form.value.image,
+    cpu: form.value.cpu,
+    memory: form.value.memory,
+    disk: form.value.disk,
+    sshKeyId: form.value.sshKeyId,
+    customInitCommandIds: form.value.customInitCommandIds
+  })
+
+  toast.success(t('host.createInstance.success'))
+
+  if (result?.id) {
+    router.push(`/instances/${result.id}`)
+  }
+}
+
+async function handleGiftSubmit(): Promise<void> {
+  if (!canSubmitGift.value || !targetUser.value || form.value.packageId === null) return
+
+  const nameValidation = validateInstanceName(form.value.name, t('instance.name'), 2, 64)
+  if (!nameValidation.valid) {
+    toast.error(nameValidation.message || t('common.error'))
+    return
+  }
+
+  const payload: {
+    username: string
+    name: string
+    packageId: number
+    image: string
+    cpu?: number
+    memory?: number
+    disk?: number
+    planId?: number
+    giftDays?: number
+  } = {
+    username: targetUser.value.username,
+    name: form.value.name.trim(),
+    packageId: form.value.packageId,
+    image: form.value.image
+  }
+
+  if (isGiftPaid.value && selectedPlanId.value) {
+    payload.planId = selectedPlanId.value
+    payload.giftDays = normalizedGiftDays.value
+  } else {
+    payload.cpu = form.value.cpu
+    payload.memory = form.value.memory
+    payload.disk = form.value.disk
+  }
+
+  await api.hosts.createInstanceForUser(props.hostId, payload)
+
+  toast.success(t('host.createInstance.giftSuccess', { username: targetUser.value.username }))
+
+  targetUsername.value = ''
+  targetLookupState.value = 'idle'
+  targetUser.value = null
+  giftInstanceType.value = 'free'
+  giftDays.value = 30
+  form.value.name = ''
+}
+
+async function handleSubmit(): Promise<void> {
+  if (submitting.value || !canSubmit.value) return
+
+  submitting.value = true
+  try {
+    if (createMode.value === 'self') {
+      await handleSelfSubmit()
+    } else {
+      await handleGiftSubmit()
+    }
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto">
+    <div class="card p-6">
+      <div v-if="loading" class="flex items-center justify-center py-12">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2" :class="themeStore.isDark ? 'border-white' : 'border-gray-900'"></div>
+      </div>
+
+      <div v-else-if="packages.length === 0" class="text-center py-12">
+        <div class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+          <svg class="w-8 h-8" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+          </svg>
+        </div>
+        <h3 class="text-lg font-medium text-themed mb-2">{{ t('host.createInstance.noPackages') }}</h3>
+        <p class="text-sm text-themed-muted">{{ t('host.createInstance.noPackagesHint') }}</p>
+      </div>
+
+      <form v-else class="space-y-6" @submit.prevent="handleSubmit">
+        <div class="space-y-2">
+          <h3 class="text-sm font-medium text-themed">{{ t('host.createInstance.title') }}</h3>
+          <div class="flex flex-wrap gap-4">
+            <label v-if="!isAdmin" class="flex items-center gap-2 cursor-pointer">
+              <input v-model="createMode" type="radio" value="self" class="w-4 h-4 accent-blue-500" />
+              <span class="text-themed">{{ t('host.createInstance.selfMode') }}</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input v-model="createMode" type="radio" value="gift" class="w-4 h-4 accent-blue-500" />
+              <span class="text-themed">{{ t('host.createInstance.giftMode') }}</span>
+            </label>
+          </div>
+          <p class="text-xs text-themed-muted">
+            {{ createMode === 'self' ? t('host.createInstance.selfModeHint') : t(isAdmin ? 'host.createInstance.adminModeHint' : 'host.createInstance.giftModeHint') }}
+          </p>
+        </div>
+
+        <div v-if="isGiftMode" class="space-y-3">
+          <h3 class="text-sm font-medium text-themed">{{ t('admin.instanceCreate.targetUser') }}</h3>
+          <div class="flex gap-2">
+            <input
+              v-model="targetUsername"
+              type="text"
+              class="input flex-1"
+              :placeholder="t('admin.instanceCreate.usernamePlaceholder')"
+              @blur="checkTargetUser"
+              @keyup.enter.prevent="checkTargetUser"
+            />
+            <button type="button" class="btn-secondary" :disabled="targetLookupState === 'checking'" @click="checkTargetUser">
+              {{ targetLookupState === 'checking' ? t('admin.instanceCreate.checking') : t('admin.instanceCreate.checkUser') }}
+            </button>
+          </div>
+          <p v-if="targetLookupState !== 'idle' && targetLookupState !== 'checking'" class="text-xs" :class="targetLookupClass">
+            {{ targetLookupMessage }}
+          </p>
+          <p class="text-xs text-themed-muted">{{ t('admin.instanceCreate.userHint') }}</p>
+        </div>
+
+        <PackageSelector
+          :packages="packages"
+          :selected-package-id="form.packageId"
+          @select="handlePackageSelect"
+        />
+
+        <div v-if="isGiftMode" class="space-y-4">
+          <div class="space-y-2">
+            <h3 class="text-sm font-medium text-themed">{{ t('admin.instanceCreate.instanceType') }}</h3>
+            <div class="flex gap-4">
+              <label class="flex items-center gap-2 cursor-pointer">
+                <input v-model="giftInstanceType" type="radio" value="free" class="w-4 h-4 accent-blue-500" />
+                <span class="text-themed">{{ t('admin.instanceCreate.freeInstance') }}</span>
+              </label>
+              <label class="flex items-center gap-2 cursor-pointer" :class="{ 'opacity-50': plans.length === 0 }">
+                <input v-model="giftInstanceType" type="radio" value="paid" class="w-4 h-4 accent-blue-500" :disabled="plans.length === 0" />
+                <span class="text-themed">{{ t('admin.instanceCreate.paidInstance') }}</span>
+              </label>
+            </div>
+            <p v-if="plans.length === 0" class="text-xs text-themed-muted">{{ t('admin.instanceCreate.noPlanHint') }}</p>
+          </div>
+
+          <div v-if="isGiftPaid && plans.length > 0" class="space-y-3">
+            <h3 class="text-sm font-medium text-themed">{{ t('admin.instanceCreate.selectPlan') }}</h3>
+            <div v-if="plansLoading" class="text-sm text-themed-muted">{{ t('common.loading') }}</div>
+            <div v-else class="space-y-3">
+              <div
+                v-for="plan in plans"
+                :key="plan.id"
+                class="p-4 rounded-lg border cursor-pointer transition-all"
+                :class="[
+                  plan.isSoldOut ? 'cursor-not-allowed opacity-60' : '',
+                  selectedPlanId === plan.id && !plan.isSoldOut
+                    ? 'border-blue-500 bg-blue-500/10'
+                    : plan.isSoldOut
+                      ? (themeStore.isDark ? 'border-gray-700 bg-gray-800/40' : 'border-gray-200 bg-gray-50')
+                      : 'border-themed hover:border-blue-300'
+                ]"
+                @click="!plan.isSoldOut && (selectedPlanId = plan.id)"
+              >
+                <div class="flex justify-between items-start gap-3">
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <span class="font-medium text-themed">{{ plan.name }}</span>
+                      <span
+                        v-if="plan.isSoldOut"
+                        class="text-xs px-2 py-0.5 rounded-full"
+                        :class="themeStore.isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-50 text-red-700'"
+                      >
+                        {{ t('instance.selector.planSoldOut') }}
+                      </span>
+                    </div>
+                    <div class="text-sm text-themed-muted mt-1">
+                      CPU {{ plan.cpu }}% |
+                      {{ plan.memory >= 1024 ? `${(plan.memory / 1024).toFixed(1)} GB` : `${plan.memory} MB` }} |
+                      {{ plan.disk >= 1024 ? `${(plan.disk / 1024).toFixed(0)} GB` : `${plan.disk} MB` }}
+                    </div>
+                  </div>
+                  <div class="font-semibold text-blue-500">¥{{ (plan.price / 100).toFixed(2) }}/{{ plan.billingCycle }}m</div>
+                </div>
+              </div>
+
+              <div class="space-y-2">
+                <label class="block text-sm font-medium text-themed">{{ t('host.createInstance.giftDaysLabel') }}</label>
+                <input
+                  v-model.number="giftDays"
+                  type="number"
+                  min="1"
+                  max="365"
+                  class="input max-w-xs"
+                />
+                <p class="text-xs text-themed-muted">{{ t('host.createInstance.giftDaysHint') }}</p>
+                <p class="text-xs text-themed-muted">{{ t('host.createInstance.giftDaysRange') }}</p>
+              </div>
+
+              <div v-if="billingInfo" class="p-4 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+                <div class="space-y-2 text-sm">
+                  <div class="flex justify-between">
+                    <span class="text-themed-muted">{{ t('admin.instanceCreate.planPrice') }}</span>
+                    <span class="text-themed">¥{{ billingInfo.price.toFixed(2) }}/{{ billingInfo.billingCycle }}m</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-themed-muted">{{ t('host.createInstance.giftDuration') }}</span>
+                    <span class="text-green-500">{{ t('host.createInstance.giftDurationValue', { days: normalizedGiftDays }) }}</span>
+                  </div>
+                  <div class="flex justify-between font-medium pt-2 border-t border-themed">
+                    <span class="text-themed">{{ t('admin.instanceCreate.totalCharge') }}</span>
+                    <span class="text-green-500">¥0.00</span>
+                  </div>
+                </div>
+                <p class="mt-2 text-xs text-themed-muted">{{ t('host.createInstance.giftOnlyFreeHint') }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <ResourceSliders
+          v-if="selectedPackage && showFreeResources"
+          :selected-package="selectedPackage"
+          :user-quota="createMode === 'self' ? userQuota : null"
+          :cpu="form.cpu"
+          :memory="form.memory"
+          :disk="form.disk"
+          @update:cpu="form.cpu = $event"
+          @update:memory="form.memory = $event"
+          @update:disk="form.disk = $event"
+        />
+
+        <ImageSelector
+          v-if="selectedPackage"
+          :available-images="availableImages"
+          :selected-image="form.image"
+          :images-loading="imagesLoading"
+          @update:selected-image="form.image = $event"
+        />
+
+        <SSHKeySelector
+          v-if="createMode === 'self' && selectedPackage"
+          :ssh-keys="sshKeys"
+          :selected-key-id="form.sshKeyId"
+          @update:selected-key-id="form.sshKeyId = $event"
+        />
+
+        <div v-if="createMode === 'self' && selectedPackage && form.image" class="space-y-3">
+          <InitCommandSelector
+            v-model="form.customInitCommandIds"
+            :distro="currentDistro"
+          />
+        </div>
+
+        <div v-if="selectedPackage" class="space-y-3">
+          <h3 class="text-sm font-medium text-themed">{{ t('host.createInstance.instanceName') }}</h3>
+          <input
+            v-model="form.name"
+            type="text"
+            class="input"
+            :placeholder="t('instance.createPage.instanceNamePlaceholder')"
+            maxlength="64"
+            required
+          />
+        </div>
+
+        <div v-if="selectedPackage" class="flex justify-end pt-4 border-t border-themed">
+          <button type="submit" class="btn-primary flex items-center gap-2" :disabled="submitting || !canSubmit">
+            <svg v-if="submitting" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </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="M12 4v16m8-8H4" />
+            </svg>
+            {{
+              submitting
+                ? t('host.createInstance.creating')
+                : createMode === 'self'
+                  ? t('instance.create')
+                  : t('admin.instanceCreate.submit')
+            }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/host/HostImagesTab.vue b/client/src/components/host/HostImagesTab.vue
new file mode 100644
index 0000000..c12454b
--- /dev/null
+++ b/client/src/components/host/HostImagesTab.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import type { SystemImage } from '@/types/api'
+
+interface Props {
+  hostId: number
+  hostName: string
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+const loading = ref(true)
+const saving = ref(false)
+const searchQuery = ref('')
+const useDefaultMode = ref(true)
+const selectedImageIds = ref<number[]>([])
+const images = ref<SystemImage[]>([])
+const hostArchitecture = ref<'x86_64' | 'aarch64'>('x86_64')
+const hostInstanceType = ref<'container' | 'vm' | 'both'>('container')
+
+const selectedCount = computed(() => selectedImageIds.value.length)
+
+const filteredImages = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase()
+  if (!query) return images.value
+
+  return images.value.filter(image =>
+    image.name.toLowerCase().includes(query) ||
+    image.remoteAlias.toLowerCase().includes(query) ||
+    image.icon.toLowerCase().includes(query)
+  )
+})
+
+const canSave = computed(() => {
+  if (saving.value) return false
+  if (useDefaultMode.value) return true
+  return selectedCount.value > 0
+})
+
+function isSelected(imageId: number): boolean {
+  return selectedImageIds.value.includes(imageId)
+}
+
+function toggleImage(imageId: number): void {
+  if (useDefaultMode.value) {
+    useDefaultMode.value = false
+  }
+
+  if (isSelected(imageId)) {
+    selectedImageIds.value = selectedImageIds.value.filter(id => id !== imageId)
+    return
+  }
+
+  selectedImageIds.value = [...selectedImageIds.value, imageId]
+}
+
+function formatInstanceType(instanceType?: 'container' | 'vm' | 'both'): string {
+  if (instanceType === 'container') return t('admin.images.typeContainer')
+  if (instanceType === 'vm') return t('admin.images.typeVm')
+  return t('admin.images.typeBoth')
+}
+
+async function loadPolicy(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.hosts.getImagePolicy(props.hostId)
+    useDefaultMode.value = response.useDefault
+    selectedImageIds.value = [...(response.allowedImageIds || [])]
+    images.value = response.images || []
+    hostArchitecture.value = response.host.architecture
+    hostInstanceType.value = response.host.instanceType
+  } catch (err: any) {
+    toast.error(t('admin.hosts.imagePolicy.loadFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function savePolicy(): Promise<void> {
+  if (!canSave.value) return
+
+  saving.value = true
+  try {
+    await api.hosts.updateImagePolicy(props.hostId, {
+      useDefault: useDefaultMode.value,
+      imageIds: useDefaultMode.value ? [] : selectedImageIds.value
+    })
+    await loadPolicy()
+    toast.success(t('admin.hosts.imagePolicy.saveSuccess'))
+  } catch (err: any) {
+    toast.error(t('admin.hosts.imagePolicy.saveFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    saving.value = false
+  }
+}
+
+watch(() => props.hostId, () => {
+  searchQuery.value = ''
+  loadPolicy()
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div
+      class="card p-5"
+      :class="themeStore.isDark ? 'border border-gray-800' : 'border border-gray-200'"
+    >
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div class="space-y-2">
+          <div class="flex flex-wrap items-center gap-2">
+            <h3 class="text-base font-medium text-themed">{{ t('admin.hosts.imagePolicy.title') }}</h3>
+            <span
+              class="px-2 py-1 text-xs rounded-full"
+              :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+            >
+              {{ t('admin.images.fields.architecture') }}: {{ hostArchitecture }}
+            </span>
+            <span
+              class="px-2 py-1 text-xs rounded-full"
+              :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+            >
+              {{ t('admin.images.fields.instanceType') }}: {{ formatInstanceType(hostInstanceType) }}
+            </span>
+          </div>
+          <p class="text-sm text-themed-muted">{{ t('admin.hosts.imagePolicy.description', { name: props.hostName }) }}</p>
+        </div>
+        <button class="btn-secondary whitespace-nowrap" :disabled="loading" @click="loadPolicy">
+          {{ t('admin.images.refresh') }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="card p-10 text-center text-themed-muted">
+      <div class="loading-spinner w-8 h-8 mx-auto"></div>
+      <p class="mt-4">{{ t('common.loading') }}</p>
+    </div>
+
+    <template v-else>
+      <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
+        <button
+          type="button"
+          class="card p-5 text-left transition-colors"
+          :class="useDefaultMode
+            ? (themeStore.isDark ? 'border border-blue-500 bg-blue-900/10' : 'border border-blue-300 bg-blue-50')
+            : (themeStore.isDark ? 'border border-gray-800 hover:border-gray-700' : 'border border-gray-200 hover:border-gray-300')"
+          @click="useDefaultMode = true"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h4 class="text-sm font-medium text-themed">{{ t('admin.hosts.imagePolicy.defaultMode') }}</h4>
+              <p class="mt-1 text-xs text-themed-muted">{{ t('admin.hosts.imagePolicy.defaultDesc') }}</p>
+            </div>
+            <div
+              class="w-5 h-5 rounded-full border flex items-center justify-center"
+              :class="useDefaultMode
+                ? 'border-blue-500 bg-blue-500 text-white'
+                : (themeStore.isDark ? 'border-gray-700 text-transparent' : 'border-gray-300 text-transparent')"
+            >
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
+        </button>
+
+        <button
+          type="button"
+          class="card p-5 text-left transition-colors"
+          :class="!useDefaultMode
+            ? (themeStore.isDark ? 'border border-blue-500 bg-blue-900/10' : 'border border-blue-300 bg-blue-50')
+            : (themeStore.isDark ? 'border border-gray-800 hover:border-gray-700' : 'border border-gray-200 hover:border-gray-300')"
+          @click="useDefaultMode = false"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h4 class="text-sm font-medium text-themed">{{ t('admin.hosts.imagePolicy.restrictedMode') }}</h4>
+              <p class="mt-1 text-xs text-themed-muted">{{ t('admin.hosts.imagePolicy.restrictedDesc') }}</p>
+            </div>
+            <div
+              class="w-5 h-5 rounded-full border flex items-center justify-center"
+              :class="!useDefaultMode
+                ? 'border-blue-500 bg-blue-500 text-white'
+                : (themeStore.isDark ? 'border-gray-700 text-transparent' : 'border-gray-300 text-transparent')"
+            >
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
+        </button>
+      </div>
+
+      <div class="card p-5 space-y-4">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div class="space-y-1">
+            <p class="text-sm font-medium text-themed">{{ t('admin.hosts.imagePolicy.selectableImages') }}</p>
+            <p class="text-xs text-themed-muted">
+              {{ useDefaultMode ? t('admin.hosts.imagePolicy.defaultHint') : t('admin.hosts.imagePolicy.selectedCount', { count: selectedCount }) }}
+            </p>
+          </div>
+          <input
+            v-model="searchQuery"
+            type="text"
+            class="input lg:w-80"
+            :placeholder="t('admin.hosts.imagePolicy.searchPlaceholder')"
+          />
+        </div>
+
+        <div v-if="!useDefaultMode && selectedCount === 0" class="text-sm text-orange-500 dark:text-orange-400">
+          {{ t('admin.hosts.imagePolicy.emptySelection') }}
+        </div>
+
+        <div v-if="images.length === 0" class="py-10 text-center text-themed-muted">
+          <div class="text-4xl mb-3">💿</div>
+          <p>{{ t('admin.hosts.imagePolicy.noImages') }}</p>
+        </div>
+
+        <div v-else-if="filteredImages.length === 0" class="py-10 text-center text-themed-muted">
+          {{ t('common.noSearchResults') }}
+        </div>
+
+        <div v-else class="grid grid-cols-1 xl:grid-cols-2 gap-3">
+          <button
+            v-for="image in filteredImages"
+            :key="image.id"
+            type="button"
+            class="rounded-xl border p-4 text-left transition-colors"
+            :class="[
+              isSelected(image.id)
+                ? (themeStore.isDark ? 'border-blue-500 bg-blue-900/10' : 'border-blue-300 bg-blue-50')
+                : (themeStore.isDark ? 'border-gray-800 hover:border-gray-700' : 'border-gray-200 hover:border-gray-300'),
+              useDefaultMode ? 'opacity-70' : ''
+            ]"
+            @click="toggleImage(image.id)"
+          >
+            <div class="flex items-start gap-3">
+              <DistroIcon :distro="image.icon" :size="32" class="flex-shrink-0" />
+              <div class="min-w-0 flex-1 space-y-2">
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <div class="text-sm font-medium text-themed truncate">{{ image.name }}</div>
+                    <div class="text-xs text-themed-muted font-mono break-all">{{ image.remoteAlias }}</div>
+                  </div>
+                  <div
+                    class="w-5 h-5 rounded-full border flex-shrink-0 flex items-center justify-center"
+                    :class="isSelected(image.id)
+                      ? 'border-blue-500 bg-blue-500 text-white'
+                      : (themeStore.isDark ? 'border-gray-700 text-transparent' : 'border-gray-300 text-transparent')"
+                  >
+                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                  </div>
+                </div>
+
+                <div class="flex flex-wrap items-center gap-2">
+                  <span
+                    class="px-2 py-1 text-xs rounded-full"
+                    :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+                  >
+                    {{ formatInstanceType(image.instanceType) }}
+                  </span>
+                  <span
+                    class="px-2 py-1 text-xs rounded-full"
+                    :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+                  >
+                    {{ image.architecture }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <button class="btn-primary" :disabled="!canSave" @click="savePolicy">
+          <span v-if="saving" class="loading-spinner w-4 h-4 mr-2"></span>
+          {{ saving ? t('common.loading') : t('common.save') }}
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/client/src/components/host/HostInfoTab.vue b/client/src/components/host/HostInfoTab.vue
new file mode 100644
index 0000000..ac112c7
--- /dev/null
+++ b/client/src/components/host/HostInfoTab.vue
@@ -0,0 +1,1039 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import api from '@/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+import type { HostAgentStatus } from '@/types/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+const emit = defineEmits(['refresh'])
+
+interface Host {
+  id: number
+  name: string
+  url: string
+  location?: string
+  countryCode: string
+  status: 'online' | 'offline' | 'maintenance'
+  instanceCount?: number
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  resources?: {
+    cpuUsed: number
+    memoryUsed: number
+    diskTotal: number  // 计算值，来自 storage_size * 1024
+    diskUsed: number
+  }
+  natConfig?: {
+    publicIp: string | null
+    publicIpv6?: string | null
+    bindIp?: string | null
+    bindIpv6?: string | null
+    portRangeStart: number | null
+    portRangeEnd: number | null
+    portsUsedCount?: number
+  }
+  createdAt?: string
+  updatedAt?: string
+}
+
+interface Props {
+  host: Host
+}
+
+const props = defineProps<Props>()
+
+// 从系统数据库获取实例统计
+const instanceStats = ref({
+  count: 0,
+  cpuUsed: 0,
+  memoryUsed: 0,
+  diskUsed: 0
+})
+
+// 流量历史数据
+interface TrafficHistoryItem {
+  date: string
+  rxTotal: string
+  txTotal: string
+  rxFormatted: string
+  txFormatted: string
+  total: string
+  totalFormatted: string
+}
+
+interface TrafficSummary {
+  totalUsed: string
+  totalUsedFormatted: string
+  totalLimit: string
+  totalLimitFormatted: string
+}
+
+const trafficHistory = ref<TrafficHistoryItem[]>([])
+const trafficSummary = ref<TrafficSummary | null>(null)
+const trafficPeriod = ref<{ periodStart: string; periodEnd: string } | null>(null)
+const trafficLoading = ref(true)
+
+const agentStatus = ref<HostAgentStatus | null>(null)
+const agentStatusLoading = ref(true)
+const agentStatusRefreshing = ref(false)
+const agentUpgradeRequesting = ref(false)
+const agentInstallCommandLoading = ref(false)
+const agentInstallCommand = ref('')
+const agentInstallTokenExpiresAt = ref('')
+const agentStatusError = ref('')
+let agentStatusRefreshTimer: ReturnType<typeof setInterval> | null = null
+let agentStatusRefreshIntervalMs = 0
+
+const defaultAgentRefreshSeconds = 30
+const minAgentRefreshSeconds = 5
+const maxAgentRefreshSeconds = 3600
+
+async function loadInstanceStats() {
+  try {
+    const res = await api.instances.list({
+      hostId: props.host.id,
+      pageSize: 1000 // 获取所有实�?
+    })
+    const instances = (res as any).instances || []
+    instanceStats.value = {
+      count: (res as any).total || instances.length,
+      cpuUsed: instances.reduce((sum: number, i: any) => sum + (i.cpu || 0), 0),
+      memoryUsed: instances.reduce((sum: number, i: any) => sum + (i.memory || 0), 0),
+      diskUsed: instances.reduce((sum: number, i: any) => sum + (i.disk || 0), 0)
+    }
+  } catch (err) {
+    console.error('Failed to load instance stats:', err)
+  }
+}
+
+async function loadTrafficHistory() {
+  trafficLoading.value = true
+  try {
+    const response = await api.traffic.getHostTrafficHistory(props.host.id)
+    trafficHistory.value = response.data
+    trafficSummary.value = response.summary
+    trafficPeriod.value = {
+      periodStart: response.periodStart,
+      periodEnd: response.periodEnd
+    }
+  } catch (error) {
+    console.error('Failed to load traffic history:', error)
+  } finally {
+    trafficLoading.value = false
+  }
+}
+
+async function loadAgentStatus(showToast = false) {
+  agentStatusLoading.value = !agentStatus.value
+  agentStatusRefreshing.value = true
+  try {
+    const response = await api.hosts.getAgentStatus(props.host.id)
+    agentStatus.value = response.agent
+    agentStatusError.value = ''
+    startAgentStatusAutoRefresh()
+    if (showToast) {
+      toast.success(t('admin.hosts.agentStatusRefreshSuccess'))
+    }
+  } catch (err: any) {
+    agentStatusError.value = err?.message || String(err)
+    if (showToast) {
+      toast.error(t('admin.hosts.agentStatusLoadFailed') + ': ' + agentStatusError.value)
+    }
+  } finally {
+    agentStatusLoading.value = false
+    agentStatusRefreshing.value = false
+  }
+}
+
+function stopAgentStatusAutoRefresh() {
+  if (agentStatusRefreshTimer) {
+    clearInterval(agentStatusRefreshTimer)
+    agentStatusRefreshTimer = null
+  }
+  agentStatusRefreshIntervalMs = 0
+}
+
+function startAgentStatusAutoRefresh() {
+  const refreshIntervalMs = agentHeartbeatIntervalSeconds.value * 1000
+  if (agentStatusRefreshTimer && agentStatusRefreshIntervalMs === refreshIntervalMs) {
+    return
+  }
+
+  stopAgentStatusAutoRefresh()
+  agentStatusRefreshIntervalMs = refreshIntervalMs
+  agentStatusRefreshTimer = setInterval(() => {
+    loadAgentStatus()
+  }, refreshIntervalMs)
+}
+
+const statusInfo = computed(() => {
+  const map: Record<string, { label: string; class: string; dot: string }> = {
+    online: { label: t('admin.hosts.statusOnline'), class: 'badge-success', dot: 'bg-green-500' },
+    offline: { label: t('admin.hosts.statusOffline'), class: 'badge-default', dot: 'bg-gray-500' },
+    maintenance: { label: t('admin.hosts.statusMaintenance'), class: 'badge-warning', dot: 'bg-yellow-500' }
+  }
+  return map[props.host.status] || map.offline
+})
+
+const agentStatusInfo = computed(() => {
+  if (!agentStatus.value) {
+    return { label: t('admin.hosts.agentNotInstalled'), class: 'badge-default', dot: 'bg-gray-500' }
+  }
+  if (!agentStatus.value.enabled) {
+    return { label: t('admin.hosts.agentDisabled'), class: 'badge-warning', dot: 'bg-yellow-500' }
+  }
+  const map: Record<string, { label: string; class: string; dot: string }> = {
+    online: { label: t('admin.hosts.agentOnline'), class: 'badge-success', dot: 'bg-green-500' },
+    offline: { label: t('admin.hosts.agentOffline'), class: 'badge-default', dot: 'bg-gray-500' }
+  }
+  return map[agentStatus.value.status] || { label: t('admin.hosts.agentUnknown'), class: 'badge-default', dot: 'bg-gray-500' }
+})
+
+const agentReport = computed(() => agentStatus.value?.lastReport ?? {})
+const hostResources = computed(() => agentReport.value.resources ?? {})
+const hostMetrics = computed(() => agentReport.value.metrics ?? {})
+const agentHeartbeatIntervalSeconds = computed(() => {
+  const value = hostMetrics.value.heartbeatIntervalSeconds
+  if (
+    typeof value !== 'number' ||
+    !Number.isSafeInteger(value) ||
+    value < minAgentRefreshSeconds ||
+    value > maxAgentRefreshSeconds
+  ) {
+    return defaultAgentRefreshSeconds
+  }
+  return value
+})
+const agentStatusDescription = computed(() => t('admin.hosts.agentStatusDesc', {
+  seconds: agentHeartbeatIntervalSeconds.value
+}))
+
+const agentVersionInfo = computed(() => {
+  const latestVersion = agentStatus.value?.latestVersion
+  const status = agentStatus.value?.versionStatus ?? 'unknown'
+  if (status === 'latest') {
+    return {
+      label: t('admin.hosts.agentVersionLatest'),
+      title: latestVersion ? t('admin.hosts.agentLatestVersion', { version: latestVersion }) : '',
+      class: themeStore.isDark
+        ? 'bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/20'
+        : 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200'
+    }
+  }
+  if (status === 'outdated') {
+    return {
+      label: t('admin.hosts.agentVersionOutdated'),
+      title: latestVersion ? t('admin.hosts.agentLatestVersion', { version: latestVersion }) : '',
+      class: themeStore.isDark
+        ? 'bg-amber-500/10 text-amber-300 ring-1 ring-amber-500/20'
+        : 'bg-amber-50 text-amber-700 ring-1 ring-amber-200'
+    }
+  }
+  return {
+    label: t('admin.hosts.agentVersionUnknown'),
+    title: latestVersion ? t('admin.hosts.agentLatestVersion', { version: latestVersion }) : '',
+    class: themeStore.isDark
+      ? 'bg-gray-800 text-gray-400 ring-1 ring-gray-700'
+      : 'bg-gray-100 text-gray-600 ring-1 ring-gray-200'
+  }
+})
+
+const canRequestAgentUpgrade = computed(() => agentStatus.value?.versionStatus === 'outdated')
+
+watch(() => props.host.id, () => {
+  agentInstallCommand.value = ''
+  agentInstallTokenExpiresAt.value = ''
+  loadInstanceStats()
+  loadTrafficHistory()
+  loadAgentStatus()
+  startAgentStatusAutoRefresh()
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  stopAgentStatusAutoRefresh()
+})
+
+const agentIncusStatus = computed(() => {
+  const incus = agentReport.value.incus
+  if (!incus) return '-'
+  return incus.available ? t('admin.hosts.agentIncusAvailable') : t('admin.hosts.agentIncusUnavailable')
+})
+
+function formatMemory(mb: number | undefined): string {
+  if (!mb) return '0'
+  if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
+  return mb + ' MB'
+}
+
+// 硬盘格式化（1024进制�?
+function formatDisk(mb: number | undefined): string {
+  if (!mb) return '0'
+  if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
+  return mb + ' MB'
+}
+
+function formatDate(dateStr: string | undefined): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+function formatPercent(value: number | undefined): string {
+  if (value === undefined || value === null || Number.isNaN(value)) return '-'
+  return `${value.toFixed(1)}%`
+}
+
+function percentWidth(value: number | undefined): string {
+  if (value === undefined || value === null || Number.isNaN(value)) return '0%'
+  return `${Math.max(0, Math.min(100, value))}%`
+}
+
+function progressColor(value: number | undefined, fallback = 'bg-blue-500'): string {
+  if (value === undefined || value === null || Number.isNaN(value)) return fallback
+  if (value >= 90) return 'bg-red-500'
+  if (value >= 75) return 'bg-yellow-500'
+  return fallback
+}
+
+function formatMemoryPair(used: number | undefined, total: number | undefined): string {
+  if (used === undefined || total === undefined) return '-'
+  return `${formatMemory(used)} / ${formatMemory(total)}`
+}
+
+function formatBytesPair(used: number | undefined, total: number | undefined): string {
+  if (used === undefined || total === undefined) return '-'
+  return `${formatBytes(used)} / ${formatBytes(total)}`
+}
+
+function formatLoadAverage(load1: number | undefined, load5: number | undefined, load15: number | undefined): string {
+  if (load1 === undefined || load5 === undefined || load15 === undefined) return '-'
+  return `${load1.toFixed(2)} / ${load5.toFixed(2)} / ${load15.toFixed(2)}`
+}
+
+function formatUptime(seconds: number | undefined): string {
+  if (!seconds || seconds < 0) return '-'
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  if (days > 0) return `${days}d ${hours}h`
+  if (hours > 0) return `${hours}h ${minutes}m`
+  return `${minutes}m`
+}
+
+function refreshAgentStatus() {
+  loadAgentStatus(true)
+}
+
+async function requestAgentUpgrade() {
+  if (!canRequestAgentUpgrade.value || agentUpgradeRequesting.value) return
+  agentUpgradeRequesting.value = true
+  try {
+    const result = await api.hosts.requestAgentUpgrade(props.host.id)
+    const message = result.requested
+      ? t('admin.hosts.agentUpgradeRequestSuccess', { seconds: result.nextHeartbeatSeconds })
+      : t('admin.hosts.agentAlreadyLatest')
+    toast.success(message)
+    await loadAgentStatus()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.agentUpgradeRequestFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    agentUpgradeRequesting.value = false
+  }
+}
+
+async function generateAgentInstallCommand() {
+  if (agentInstallCommandLoading.value) return
+  if (!window.confirm(t('admin.hosts.agentInstallCommandConfirm'))) return
+  agentInstallCommandLoading.value = true
+  try {
+    const result = await api.hosts.generateAgentInstallCommand(props.host.id)
+    agentInstallCommand.value = result.installCommand
+    agentInstallTokenExpiresAt.value = result.installTokenExpiresAt
+    agentStatus.value = result.agent
+    toast.success(t('admin.hosts.agentInstallCommandSuccess'))
+  } catch (err: any) {
+    toast.error(t('admin.hosts.agentInstallCommandFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    agentInstallCommandLoading.value = false
+  }
+}
+
+function copyAgentInstallCommand() {
+  if (!agentInstallCommand.value) return
+  navigator.clipboard.writeText(agentInstallCommand.value)
+  toast.success(t('admin.hosts.agentInstallCommandCopied'))
+}
+
+// 资源校对
+const recalculating = ref(false)
+
+async function recalculateResources() {
+  if (recalculating.value) return
+  recalculating.value = true
+  try {
+    const result = await api.hosts.recalculateResources(props.host.id)
+    if (result.hasChanges) {
+      toast.success(t('admin.hosts.recalculateSuccess'))
+      // 刷新父组件数�?
+      emit('refresh')
+    } else {
+      toast.info(t('admin.hosts.recalculateNoChanges'))
+    }
+  } catch (err: any) {
+    toast.error(t('admin.hosts.recalculateFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    recalculating.value = false
+  }
+}
+
+// 使用系统内实例计算的资源使用�?
+// CPU 使用率：基于 CPU allowance（资源池大小�?
+const cpuUsagePercent = computed(() => {
+  const total = props.host.cpuAllowanceMax
+  if (!total || total === 0) return 0
+  return Math.min(100, Math.round((instanceStats.value.cpuUsed / total) * 100))
+})
+
+// 内存使用率：基于内存配额（资源池大小�?
+const memoryUsagePercent = computed(() => {
+  const total = props.host.memoryMax
+  if (!total || total === 0) return 0
+  return Math.min(100, Math.round((instanceStats.value.memoryUsed / total) * 100))
+})
+
+// 磁盘使用率：基于物理磁盘大小
+const diskUsagePercent = computed(() => {
+  const total = props.host.resources?.diskTotal || 0
+  if (!total) return 0
+  return Math.min(100, Math.round((instanceStats.value.diskUsed / total) * 100))
+})
+
+const chartMaxValue = computed(() => {
+  if (trafficHistory.value.length === 0) return 1
+  const max = Math.max(...trafficHistory.value.map(h => Number(h.total)))
+  return max || 1
+})
+
+// 格式化字节数为可读字符串
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0'
+  if (bytes < 1024) return bytes + 'B'
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + 'K'
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + 'M'
+  return (bytes / 1073741824).toFixed(1) + 'G'
+}
+
+// Y 轴刻度标�?
+const yAxisLabels = computed(() => {
+  const max = chartMaxValue.value
+  return {
+    top: formatBytes(max),
+    mid: formatBytes(max / 2),
+    bottom: '0'
+  }
+})
+
+// 格式化日期显�?(MM-DD)
+function formatDateLabel(dateStr: string): string {
+  return dateStr.slice(5) // 去掉年份，只保留 MM-DD
+}
+
+// X 轴标签（显示 5-7 个日期点�?
+const xAxisLabels = computed(() => {
+  const len = trafficHistory.value.length
+  if (len === 0) return []
+  if (len <= 7) return trafficHistory.value.map((h, index) => ({ date: formatDateLabel(h.date), index }))
+  
+  // 显示首、尾和中间均匀分布的点
+  const step = Math.floor(len / 5)
+  const labels = []
+  for (let i = 0; i < len; i += step) {
+    labels.push({ date: formatDateLabel(trafficHistory.value[i].date), index: i })
+  }
+  // 确保最后一个日期显�?
+  if (labels[labels.length - 1].index !== len - 1) {
+    labels.push({ date: formatDateLabel(trafficHistory.value[len - 1].date), index: len - 1 })
+  }
+  return labels
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <!-- 基本信息 -->
+    <div class="card p-5">
+      <h2 class="text-sm font-medium mb-4" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+        {{ t('admin.hosts.basicInfo') }}
+      </h2>
+      <dl class="space-y-3 text-sm">
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('admin.hosts.hostName') }}</dt>
+          <dd class="font-medium uppercase" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+            {{ host.name }}
+          </dd>
+        </div>
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('admin.hosts.status') }}</dt>
+          <dd>
+            <span class="inline-flex items-center gap-1.5">
+              <span :class="['w-2 h-2 rounded-full', statusInfo.dot]"></span>
+              <span :class="['badge', statusInfo.class]">{{ statusInfo.label }}</span>
+            </span>
+          </dd>
+        </div>
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('admin.hosts.hostDesc') }}</dt>
+          <dd :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+            <FlagIcon v-if="host.countryCode" :code="host.countryCode" size="sm" class="mr-1.5" />
+            {{ host.location || '-' }}
+          </dd>
+        </div>
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('admin.hosts.instances') }}</dt>
+          <dd :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+            {{ instanceStats.count }}
+          </dd>
+        </div>
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('admin.hosts.instanceTypeLabel') }}</dt>
+          <dd :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+            {{ host.instanceType === 'container' ? t('admin.hosts.typeContainer') : host.instanceType === 'vm' ? t('admin.hosts.typeVm') : t('admin.hosts.typeBoth') }}
+          </dd>
+        </div>
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('admin.hosts.apiUrl') }}</dt>
+          <dd class="font-mono text-xs truncate max-w-[200px]" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'" :title="host.url">
+            {{ host.url }}
+          </dd>
+        </div>
+        <div v-if="host.createdAt" class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('common.createdAt') }}</dt>
+          <dd class="text-xs" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+            {{ formatDate(host.createdAt) }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <!-- 资源使用 -->
+    <div class="card p-5">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ t('admin.hosts.resources') }}
+        </h2>
+        <button
+          class="btn-ghost btn-xs flex items-center gap-1"
+          :disabled="recalculating"
+          :title="t('admin.hosts.recalculateResourcesTip')"
+          @click="recalculateResources"
+        >
+          <svg 
+            class="w-3.5 h-3.5" 
+            :class="{ 'animate-spin': recalculating }"
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          <span class="hidden sm:inline">{{ t('admin.hosts.recalculateResources') }}</span>
+        </button>
+      </div>
+      <div class="space-y-4">
+        <!-- CPU -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">{{ t('admin.hosts.cpuQuota') }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              {{ instanceStats.cpuUsed }} / {{ host.cpuAllowanceMax || 0 }}
+            </span>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="cpuUsagePercent > 80 ? 'bg-red-500' : cpuUsagePercent > 60 ? 'bg-yellow-500' : 'bg-blue-500'"
+              :style="{ width: cpuUsagePercent + '%' }"
+            ></div>
+          </div>
+        </div>
+        <!-- Memory -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">{{ t('admin.hosts.memoryQuota') }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              {{ formatMemory(instanceStats.memoryUsed) }} / {{ formatMemory(host.memoryMax) }}
+            </span>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="memoryUsagePercent > 80 ? 'bg-red-500' : memoryUsagePercent > 60 ? 'bg-yellow-500' : 'bg-green-500'"
+              :style="{ width: memoryUsagePercent + '%' }"
+            ></div>
+          </div>
+        </div>
+        <!-- Disk -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">{{ t('admin.hosts.diskUsage') }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              {{ formatDisk(instanceStats.diskUsed) }} / {{ formatDisk(host.resources?.diskTotal) }}
+            </span>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="diskUsagePercent > 80 ? 'bg-red-500' : diskUsagePercent > 60 ? 'bg-yellow-500' : 'bg-purple-500'"
+              :style="{ width: diskUsagePercent + '%' }"
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- NAT 配置 -->
+      <div
+        v-if="host.natConfig?.publicIp || host.natConfig?.publicIpv6 || host.natConfig?.bindIp || host.natConfig?.bindIpv6"
+        class="mt-6 pt-4 border-t"
+        :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+      >
+        <h3 class="text-xs font-medium text-gray-500 mb-3">{{ t('admin.hosts.natConfig') }}</h3>
+        <dl class="space-y-2 text-sm">
+          <div v-if="host.natConfig?.publicIp" class="flex justify-between">
+            <dt class="text-gray-500">{{ t('admin.hosts.natPublicIpv4') }}</dt>
+            <dd class="font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ host.natConfig.publicIp }}</dd>
+          </div>
+          <div v-if="host.natConfig?.publicIpv6" class="flex justify-between">
+            <dt class="text-gray-500">{{ t('admin.hosts.natPublicIpv6') }}</dt>
+            <dd class="font-mono break-all text-right" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ host.natConfig.publicIpv6 }}</dd>
+          </div>
+          <div v-if="host.natConfig?.bindIp" class="flex justify-between">
+            <dt class="text-gray-500">{{ t('admin.hosts.natBindIpv4') }}</dt>
+            <dd class="font-mono break-all text-right" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ host.natConfig.bindIp }}</dd>
+          </div>
+          <div v-if="host.natConfig?.bindIpv6" class="flex justify-between">
+            <dt class="text-gray-500">{{ t('admin.hosts.natBindIpv6') }}</dt>
+            <dd class="font-mono break-all text-right" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ host.natConfig.bindIpv6 }}</dd>
+          </div>
+          <div v-if="host.natConfig?.portRangeStart != null || host.natConfig?.portRangeEnd != null" class="flex justify-between">
+            <dt class="text-gray-500">{{ t('admin.hosts.portRange') }}</dt>
+            <dd class="font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              {{ host.natConfig.portRangeStart }} - {{ host.natConfig.portRangeEnd }}
+            </dd>
+          </div>
+          <div v-if="host.natConfig.portsUsedCount !== undefined" class="flex justify-between">
+            <dt class="text-gray-500">{{ t('admin.hosts.portsUsed') }}</dt>
+            <dd :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ host.natConfig.portsUsedCount }}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+
+  <!-- 宿主机状态 -->
+  <div class="card p-5 mt-4">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
+      <div>
+        <h2 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ t('admin.hosts.agentStatusTitle') }}
+        </h2>
+        <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          {{ agentStatusDescription }}
+        </p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2 self-start sm:self-auto">
+        <button
+          class="btn-secondary btn-xs flex items-center gap-1"
+          :disabled="agentInstallCommandLoading"
+          @click="generateAgentInstallCommand"
+        >
+          <svg
+            class="w-3.5 h-3.5"
+            :class="{ 'animate-spin': agentInstallCommandLoading }"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l4-4m-4 4l-4-4M4 17v1a3 3 0 003 3h10a3 3 0 003-3v-1" />
+          </svg>
+          <span>{{ t('admin.hosts.agentInstallCommand') }}</span>
+        </button>
+        <button
+          class="btn-ghost btn-xs flex items-center gap-1"
+          :disabled="agentStatusRefreshing"
+          @click="refreshAgentStatus"
+        >
+          <svg
+            class="w-3.5 h-3.5"
+            :class="{ 'animate-spin': agentStatusRefreshing }"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          <span>{{ t('common.refresh') }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="agentInstallCommand"
+      class="rounded-lg p-3 mb-4"
+      :class="themeStore.isDark ? 'bg-gray-900/70 border border-gray-800' : 'bg-gray-50 border border-gray-200'"
+    >
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
+        <div>
+          <p class="text-xs font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+            {{ t('admin.hosts.agentInstallCommandTitle') }}
+          </p>
+          <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+            {{ t('admin.hosts.agentInstallCommandHint') }}
+            <span v-if="agentInstallTokenExpiresAt">
+              {{ t('admin.hosts.agentInstallTokenExpiresAt', { time: formatDate(agentInstallTokenExpiresAt) }) }}
+            </span>
+          </p>
+        </div>
+        <button class="btn-secondary btn-xs" @click="copyAgentInstallCommand">
+          {{ t('admin.hosts.copyCommand') }}
+        </button>
+      </div>
+      <pre class="rounded-md p-3 overflow-x-auto text-xs font-mono whitespace-pre-wrap break-all" :class="themeStore.isDark ? 'bg-black/40 text-green-300' : 'bg-gray-900 text-green-300'">{{ agentInstallCommand }}</pre>
+    </div>
+
+    <div v-if="agentStatusLoading" class="animate-pulse grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <div
+        v-for="i in 6"
+        :key="i"
+        class="h-20 rounded-lg"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+      ></div>
+    </div>
+
+    <div
+      v-else-if="agentStatusError"
+      class="rounded-lg p-3 text-sm"
+      :class="themeStore.isDark ? 'bg-red-500/10 text-red-300' : 'bg-red-50 text-red-600'"
+    >
+      {{ t('admin.hosts.agentStatusLoadFailed') }}: {{ agentStatusError }}
+    </div>
+
+    <div v-else-if="!agentStatus" class="flex items-start gap-3 rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-800/60' : 'bg-gray-50'">
+      <span :class="['w-2.5 h-2.5 rounded-full mt-1.5', agentStatusInfo.dot]"></span>
+      <div>
+        <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ agentStatusInfo.label }}
+        </p>
+        <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          {{ t('admin.hosts.agentNoRecordHint') }}
+        </p>
+      </div>
+    </div>
+
+    <template v-else>
+      <div
+        class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 pb-4 mb-4 border-b"
+        :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"
+      >
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="inline-flex items-center gap-1.5">
+            <span :class="['w-2 h-2 rounded-full', agentStatusInfo.dot]"></span>
+            <span :class="['badge', agentStatusInfo.class]">{{ agentStatusInfo.label }}</span>
+          </span>
+          <button
+            v-if="canRequestAgentUpgrade"
+            type="button"
+            class="text-xs px-2 py-1 rounded-full font-mono inline-flex items-center gap-1.5 transition hover:brightness-105 disabled:cursor-wait disabled:opacity-70"
+            :class="agentVersionInfo.class"
+            :title="agentStatus.latestVersion ? t('admin.hosts.agentUpgradeClickHint', { version: agentStatus.latestVersion }) : agentVersionInfo.title"
+            :disabled="agentUpgradeRequesting"
+            @click="requestAgentUpgrade"
+          >
+            <svg
+              v-if="agentUpgradeRequesting"
+              class="w-3 h-3 animate-spin"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            <span v-if="agentStatus.version">{{ agentStatus.version }}</span>
+            <span class="font-sans font-medium">{{ agentVersionInfo.label }}</span>
+          </button>
+          <span
+            v-else
+            class="text-xs px-2 py-1 rounded-full font-mono inline-flex items-center gap-1.5"
+            :class="agentVersionInfo.class"
+            :title="agentVersionInfo.title"
+          >
+            <span v-if="agentStatus.version">{{ agentStatus.version }}</span>
+            <span class="font-sans font-medium">{{ agentVersionInfo.label }}</span>
+          </span>
+          <span
+            v-for="capability in agentStatus.capabilities"
+            :key="capability"
+            class="text-xs px-2 py-1 rounded-full"
+            :class="themeStore.isDark ? 'bg-blue-500/10 text-blue-300' : 'bg-blue-50 text-blue-600'"
+          >
+            {{ capability }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1 text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          <p>
+            {{ t('admin.hosts.agentIncus') }}:
+            <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ agentIncusStatus }}</span>
+            <span
+              v-if="agentReport.incus?.socket"
+              class="font-mono inline-block max-w-[14rem] truncate align-bottom ml-1"
+              :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+              :title="agentReport.incus.socket"
+            >
+              {{ agentReport.incus.socket }}
+            </span>
+          </p>
+          <p>
+            {{ t('admin.hosts.agentLastSeen') }}:
+            <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ formatDate(agentStatus.lastSeenAt || undefined) }}</span>
+          </p>
+          <p>
+            {{ t('admin.hosts.agentHeartbeatIp') }}:
+            <span class="font-mono" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ agentStatus.lastHeartbeatIp || '-' }}</span>
+          </p>
+          <p>
+            {{ t('admin.hosts.agentUptime') }}:
+            <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ formatUptime(hostMetrics.uptimeSeconds) }}</span>
+          </p>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <div class="rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-800/60' : 'bg-white border border-gray-200 shadow-sm'">
+          <div class="flex justify-between items-start gap-3 mb-2">
+            <div>
+              <p class="text-xs font-medium" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ t('admin.hosts.agentCpuUsage') }}</p>
+              <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ hostResources.cpuTotal || '-' }} {{ t('admin.hosts.agentCpuCores') }}
+              </p>
+            </div>
+            <p class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+              {{ formatPercent(hostResources.cpuUsagePercent) }}
+            </p>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="progressColor(hostResources.cpuUsagePercent, 'bg-blue-500')"
+              :style="{ width: percentWidth(hostResources.cpuUsagePercent) }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-800/60' : 'bg-white border border-gray-200 shadow-sm'">
+          <div class="flex justify-between items-start gap-3 mb-2">
+            <div>
+              <p class="text-xs font-medium" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ t('admin.hosts.agentMemoryUsage') }}</p>
+              <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ formatMemoryPair(hostResources.memoryUsedMb, hostResources.memoryTotalMb) }}
+              </p>
+            </div>
+            <p class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+              {{ formatPercent(hostResources.memoryUsagePercent) }}
+            </p>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="progressColor(hostResources.memoryUsagePercent, 'bg-green-500')"
+              :style="{ width: percentWidth(hostResources.memoryUsagePercent) }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-800/60' : 'bg-white border border-gray-200 shadow-sm'">
+          <div class="flex justify-between items-start gap-3 mb-2">
+            <div>
+              <p class="text-xs font-medium" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ t('admin.hosts.agentSwapUsage') }}</p>
+              <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ formatMemoryPair(hostResources.swapUsedMb, hostResources.swapTotalMb) }}
+              </p>
+            </div>
+            <p class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+              {{ formatPercent(hostResources.swapUsagePercent) }}
+            </p>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="progressColor(hostResources.swapUsagePercent, 'bg-cyan-500')"
+              :style="{ width: percentWidth(hostResources.swapUsagePercent) }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-800/60' : 'bg-white border border-gray-200 shadow-sm'">
+          <div class="flex justify-between items-start gap-3 mb-2">
+            <div>
+              <p class="text-xs font-medium" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                {{ t('admin.hosts.agentDiskUsage') }}
+                <span v-if="hostResources.diskMountpoint" class="font-mono">({{ hostResources.diskMountpoint }})</span>
+              </p>
+              <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ formatBytesPair(hostResources.diskUsedBytes, hostResources.diskTotalBytes) }}
+              </p>
+            </div>
+            <p class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+              {{ formatPercent(hostResources.diskUsagePercent) }}
+            </p>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-200'">
+            <div
+              class="h-full rounded-full transition-all duration-500"
+              :class="progressColor(hostResources.diskUsagePercent, 'bg-purple-500')"
+              :style="{ width: percentWidth(hostResources.diskUsagePercent) }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-900/60' : 'bg-white border border-gray-200 shadow-sm'">
+          <p class="text-xs font-medium mb-1" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ t('admin.hosts.agentLoadAverage') }}</p>
+          <p class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+            {{ formatLoadAverage(hostMetrics.load1, hostMetrics.load5, hostMetrics.load15) }}
+          </p>
+          <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ t('admin.hosts.agentLoadAverageHint') }}</p>
+        </div>
+
+        <div class="rounded-lg p-4" :class="themeStore.isDark ? 'bg-gray-900/60' : 'bg-white border border-gray-200 shadow-sm'">
+          <p class="text-xs font-medium mb-1" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">{{ t('admin.hosts.agentProcessCount') }}</p>
+          <p class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+            {{ hostResources.processCount ?? '-' }}
+          </p>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <!-- 流量统计 -->
+  <div class="card p-5 mt-4">
+    <div class="flex items-center justify-between mb-4">
+      <h2 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+        {{ t('admin.hosts.trafficStats') }}
+        <span v-if="trafficPeriod" class="text-xs font-normal ml-2" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          ({{ trafficPeriod.periodStart.slice(5) }} ~ {{ trafficPeriod.periodEnd.slice(5) }})
+        </span>
+      </h2>
+      <span 
+        v-if="!trafficLoading && trafficSummary"
+        class="text-xs px-2 py-1 rounded-full"
+        :class="themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-600'"
+      >
+        {{ t('admin.hosts.monthlyUsed') }}: {{ trafficSummary.totalUsedFormatted }} | {{ t('admin.hosts.hostTotalLimit') }}: {{ trafficSummary.totalLimitFormatted }}
+      </span>
+    </div>
+
+    <!-- 加载状�?-->
+    <div v-if="trafficLoading" class="animate-pulse">
+      <div class="flex items-end gap-1 h-32">
+        <div 
+          v-for="i in 30" 
+          :key="i" 
+          class="flex-1 rounded-t"
+          :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'"
+          :style="{ height: `${Math.random() * 100}%` }"
+        ></div>
+      </div>
+    </div>
+
+    <!-- 有数据显示图�?-->
+    <template v-else-if="trafficHistory.length > 0">
+      <div class="flex">
+        <!-- Y 轴刻�?-->
+        <div class="flex flex-col justify-between h-32 pr-2 text-xs w-10" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          <span class="text-right">{{ yAxisLabels.top }}</span>
+          <span class="text-right">{{ yAxisLabels.mid }}</span>
+          <span class="text-right">{{ yAxisLabels.bottom }}</span>
+        </div>
+        
+        <!-- 图表区域 -->
+        <div class="flex-1">
+          <!-- 背景网格�?-->
+          <div class="relative h-32">
+            <div 
+              class="absolute inset-0 flex flex-col justify-between pointer-events-none"
+            >
+              <div class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"></div>
+              <div class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"></div>
+              <div class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"></div>
+            </div>
+            
+            <!-- 柱状�?-->
+            <div class="absolute inset-0 flex items-end gap-0.5 px-1">
+              <div 
+                v-for="(item, index) in trafficHistory" 
+                :key="item.date"
+                class="flex-1 min-w-0.5 rounded-t transition-all duration-200 cursor-pointer group relative"
+                :class="[
+                  themeStore.isDark 
+                    ? 'bg-gradient-to-t from-blue-600 to-blue-400 hover:from-blue-500 hover:to-blue-300' 
+                    : 'bg-gradient-to-t from-blue-500 to-blue-400 hover:from-blue-400 hover:to-blue-300'
+                ]"
+                :style="{ height: `${Math.max((Number(item.total) / chartMaxValue) * 100, 1)}%` }"
+              >
+                <!-- Tooltip -->
+                <div 
+                  class="absolute bottom-full mb-2 px-2.5 py-1.5 text-xs rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10"
+                  :class="[
+                    themeStore.isDark ? 'bg-gray-800 text-gray-200 border border-gray-700' : 'bg-white text-gray-900 border border-gray-200 shadow-md',
+                    index < 5 ? 'left-0' : index > trafficHistory.length - 5 ? 'right-0' : 'left-1/2 -translate-x-1/2'
+                  ]"
+                >
+                  <div class="font-medium mb-1">{{ item.date }}</div>
+                  <div class="flex items-center gap-1.5">
+                    <span class="w-2 h-2 rounded-full bg-green-500"></span>
+                    <span>{{ t('traffic.download') }}: {{ item.rxFormatted }}</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <span class="w-2 h-2 rounded-full bg-orange-500"></span>
+                    <span>{{ t('traffic.upload') }}: {{ item.txFormatted }}</span>
+                  </div>
+                  <div 
+                    class="mt-1 pt-1 font-medium"
+                    :class="themeStore.isDark ? 'border-t border-gray-700' : 'border-t border-gray-200'"
+                  >
+                    {{ t('traffic.total') }}: {{ item.totalFormatted }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- X轴标�?-->
+          <div class="relative h-5 mt-1">
+            <div 
+              v-for="label in xAxisLabels" 
+              :key="label.index"
+              class="absolute text-xs transform -translate-x-1/2"
+              :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+              :style="{ left: `${(label.index / Math.max(trafficHistory.length - 1, 1)) * 100}%` }"
+            >
+              {{ label.date }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 无数据状�?-->
+    <div v-else class="text-center py-8">
+      <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+        {{ t('traffic.noHistoryData') }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/host/HostInstancesList.vue b/client/src/components/host/HostInstancesList.vue
new file mode 100644
index 0000000..bd5e043
--- /dev/null
+++ b/client/src/components/host/HostInstancesList.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { InstanceConfigResponse } from '@/types/api'
+import UserAvatar from '@/components/UserAvatar.vue'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+
+interface TrafficData { monthlyUsed: string; monthlyUsedFormatted: string; monthlyLimit: string | null; monthlyLimitFormatted: string | null; percentage: number }
+interface Instance {
+  id: number
+  name: string
+  incusId?: string
+  incus_id?: string
+  status: string
+  image: string
+  imageName?: string | null
+  ipv4?: string | null
+  ipv6?: string | null
+  network_mode?: string
+  networkMode?: string
+  cpu: number
+  memory: number
+  disk: number
+  createdAt?: string
+  created_at?: string
+  updatedAt?: string
+  updated_at?: string
+  username?: string | null
+  userEmail?: string | null
+  userAvatarStyle?: string | null
+  userAvatarBadgeId?: string | null
+  ssh_port?: number | null
+  port_limit?: number | null
+  snapshot_limit?: number | null
+  backup_limit?: number | null
+  site_limit?: number | null
+  swapSize?: number | null
+  packagePlanId?: number | null
+  instanceType?: 'container' | 'vm'
+  billingPrice?: number | null
+  expiresAt?: string | null
+  expires_at?: string | null
+  suspendReason?: string | null
+  suspend_reason?: string | null
+  autoRenew?: boolean
+  trafficData?: TrafficData | null
+  iconBadgeId?: string | null
+}
+interface StatusInfo { label: string; class: string; dot: string }
+
+const props = defineProps<{
+  instances: Instance[]
+  selectedIds: Set<number>
+  isAllSelected: boolean
+  isPartialSelected: boolean
+  expandedInstanceId: number | null
+  detailConfigs: Record<number, InstanceConfigResponse | null>
+  detailConfigErrors: Record<number, string>
+  detailLoadingIds: Set<number>
+  syncingInstanceIds: Set<number>
+  swapActionLoadingIds: Set<number>
+  resettingTrafficId: number | null
+  recreateLoading: boolean
+  recreateTargetId: number | null
+  isDark: boolean
+  getPaidIconType: (instance: any) => 'pro' | 'prime' | null
+  getStatusInfo: (status: string) => StatusInfo
+  formatMemory: (mb: number) => string
+  formatDisk: (mb: number) => string
+  getDisplayIp: (instance: any) => { ipv4: string | null; ipv6: string | null }
+  canRecreateInstance: (instance: any) => boolean
+  isInstanceExpanded: (id: number) => boolean
+  isDetailLoading: (id: number) => boolean
+  isInstanceSyncing: (id: number) => boolean
+  isSwapActionLoading: (id: number) => boolean
+  getDetailConfig: (id: number) => InstanceConfigResponse | null
+  formatMoney: (value?: number | null) => string
+  formatDateTime: (value?: string | null) => string
+  formatBoolean: (value?: boolean | null) => string
+  formatBandwidth: (value?: string | null) => string
+  formatSwapSize: (sizeMb?: number | null) => string
+  getInstanceTypeLabel: (instance: any) => string
+  getNetworkModeLabel: (instance: any) => string | null
+  getExpiryValue: (instance: any) => string | null
+  getSuspendReason: (instance: any) => string | null
+  getTrafficSummary: (instance: any) => string
+  getTrafficPercentage: (instance: any) => number
+  getTrafficBarClass: (instance: any) => string
+  getSummaryMeta: (instance: any) => string[]
+  getQuotaItems: (instance: any) => Array<{ label: string; value: string | number | null | undefined }>
+  formatQuotaValue: (value: string | number | null | undefined) => string
+  canToggleSwap: (instance: any) => boolean
+  getSwapDisplay: (instance: any) => string
+  getExpirySummary: (instance: any) => string
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggle-select', id: number): void
+  (e: 'toggle-select-all'): void
+  (e: 'toggle-expand', instance: any): void
+  (e: 'retry-detail', instanceId: number): void
+  (e: 'sync-instance', instance: any): void
+  (e: 'toggle-swap', instance: any): void
+  (e: 'open-single-config', instanceId: number): void
+  (e: 'open-price', instance: any): void
+  (e: 'open-reset-traffic', instance: any): void
+  (e: 'open-recreate', instance: any): void
+  (e: 'open-delete', instanceId: number): void
+  (e: 'open-detail', instanceId: number): void
+}>()
+
+const { t } = useI18n()
+
+const itemShell = (selected: boolean, expanded: boolean) => [
+  props.isDark ? 'border-gray-800 bg-[#0d0d0f] hover:border-gray-700' : 'border-gray-200 bg-white hover:border-gray-300',
+  selected ? (props.isDark ? 'ring-1 ring-blue-500/40' : 'ring-1 ring-blue-500/30') : '',
+  expanded ? (props.isDark ? 'shadow-[0_0_0_1px_rgba(255,255,255,0.02)]' : 'shadow-sm') : ''
+]
+const shellClass = (dark: boolean) => dark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-white'
+const chipClass = (dark: boolean) => dark ? 'bg-gray-900 text-gray-300' : 'bg-gray-50 text-gray-700'
+const statClass = (dark: boolean) => dark ? 'border-gray-800 bg-black/20' : 'border-gray-100 bg-gray-50'
+const textMuted = (dark: boolean) => dark ? 'text-gray-500' : 'text-gray-500'
+const textStrong = (dark: boolean) => dark ? 'text-gray-100' : 'text-gray-900'
+
+function isSelected(id: number): boolean { return props.selectedIds.has(id) }
+function getDetailError(id: number): string { return props.detailConfigErrors[id] || '' }
+</script>
+
+<template>
+  <div class="card p-3 sm:p-4">
+    <div class="mb-3 flex items-center justify-between">
+      <div class="text-xs font-semibold uppercase tracking-[0.24em]" :class="textMuted(props.isDark)">{{ t('nav.instances') }}</div>
+      <button
+        class="inline-flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-medium transition-colors"
+        :class="props.isDark ? 'border-gray-700 bg-gray-900 text-gray-300 hover:bg-gray-800' : 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100'"
+        @click="emit('toggle-select-all')"
+      >
+        <span class="relative flex h-4 w-4 items-center justify-center rounded border" :class="props.isDark ? 'border-gray-600 bg-gray-950' : 'border-gray-300 bg-white'">
+          <span v-if="props.isAllSelected" class="h-2 w-2 rounded-sm bg-current"></span>
+          <span v-else-if="props.isPartialSelected" class="h-0.5 w-2 rounded-full bg-current"></span>
+        </span>
+        {{ props.selectedIds.size }}/{{ props.instances.length }}
+      </button>
+    </div>
+
+    <div class="space-y-3">
+      <div
+        v-for="instance in props.instances"
+        :key="instance.id"
+        class="overflow-hidden rounded-2xl border transition-all duration-200"
+        :class="itemShell(isSelected(instance.id), props.isInstanceExpanded(instance.id))"
+      >
+        <div class="px-4 py-4 sm:px-5">
+          <div class="flex flex-col gap-4 2xl:flex-row 2xl:items-start 2xl:justify-between">
+            <div class="min-w-0 flex-1">
+              <div class="flex items-start gap-3">
+                <div class="flex items-center gap-2 pt-1" @click.stop>
+                  <input
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
+                    :checked="isSelected(instance.id)"
+                    @change="emit('toggle-select', instance.id)"
+                  />
+                  <button
+                    type="button"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-xl border transition-colors"
+                    :class="props.isDark ? 'border-gray-700 bg-gray-900 text-gray-300 hover:bg-gray-800' : 'border-gray-200 bg-gray-50 text-gray-600 hover:bg-gray-100'"
+                    :title="props.isInstanceExpanded(instance.id) ? t('common.collapse') : t('common.expand')"
+                    @click="emit('toggle-expand', instance)"
+                  >
+                    <svg class="w-4 h-4 transition-transform" :class="props.isInstanceExpanded(instance.id) ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                </div>
+
+                <div class="min-w-0 flex-1">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <InstanceDisplayIcon
+                      v-if="instance.iconBadgeId || props.getPaidIconType(instance)"
+                      :badge-id="instance.iconBadgeId"
+                      :fallback-icon="props.getPaidIconType(instance)"
+                      :alt="instance.name"
+                      :size="40"
+                    />
+                    <button class="text-left text-sm font-semibold transition-colors" :class="props.isDark ? 'text-gray-100 hover:text-white' : 'text-gray-900 hover:text-black'" @click="emit('open-detail', instance.id)">
+                      {{ instance.name }}
+                    </button>
+                    <span :class="['badge whitespace-nowrap', props.getStatusInfo(instance.status).class]">{{ props.getStatusInfo(instance.status).label }}</span>
+                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-medium" :class="props.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'">{{ props.getInstanceTypeLabel(instance) }}</span>
+                    <span v-if="instance.packagePlanId" class="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-medium" :class="props.isDark ? 'bg-emerald-500/15 text-emerald-300' : 'bg-emerald-50 text-emerald-700'">{{ props.formatMoney(instance.billingPrice) }}</span>
+                  </div>
+
+                  <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs" :class="textMuted(props.isDark)">
+                    <span>#{{ instance.id }}</span>
+                    <span>Incus {{ instance.incusId || instance.incus_id || '-' }}</span>
+                    <span>{{ instance.imageName || instance.image?.replace(/^images:/, '') || '-' }}</span>
+                    <span>{{ props.formatDateTime(instance.createdAt || instance.created_at || null) }}</span>
+                  </div>
+
+                  <div class="mt-3 flex flex-wrap items-center gap-2">
+                    <span v-for="meta in props.getSummaryMeta(instance)" :key="meta" class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium" :class="chipClass(props.isDark)">{{ meta }}</span>
+                    <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium" :class="chipClass(props.isDark)">{{ props.getNetworkModeLabel(instance) }}</span>
+                  </div>
+
+                  <div v-if="instance.username" class="mt-3 flex items-center gap-3">
+                    <UserAvatar :username="instance.username" :email="instance.userEmail" :avatar-style="instance.userAvatarStyle || ''" :badge-id="instance.userAvatarBadgeId || null" :size="28" />
+                    <div class="min-w-0">
+                      <div class="truncate text-sm font-medium" :class="props.isDark ? 'text-gray-200' : 'text-gray-900'">{{ instance.username }}</div>
+                      <div v-if="instance.userEmail" class="truncate text-xs" :class="textMuted(props.isDark)">{{ instance.userEmail }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="w-full shrink-0 2xl:w-[360px]">
+              <div class="rounded-2xl border p-3" :class="props.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50/80'">
+                <div class="flex items-center justify-between text-xs" :class="textMuted(props.isDark)">
+                  <span>{{ t('admin.hosts.trafficUsage') }}</span>
+                  <span>{{ props.getTrafficSummary(instance) }}</span>
+                </div>
+                <div class="mt-2 h-2 overflow-hidden rounded-full" :class="props.isDark ? 'bg-gray-800' : 'bg-gray-200'">
+                  <div class="h-full rounded-full transition-all" :class="props.getTrafficBarClass(instance)" :style="{ width: `${props.getTrafficPercentage(instance)}%` }"></div>
+                </div>
+
+                <div class="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
+                  <div class="rounded-xl border px-3 py-2" :class="props.isDark ? 'border-gray-800 bg-black/30' : 'border-gray-200 bg-white/80'">
+                    <div class="text-[11px] uppercase tracking-wide" :class="textMuted(props.isDark)">{{ t('billing.renewPrice') }}</div>
+                    <div class="mt-1 text-sm font-semibold" :class="textStrong(props.isDark)">{{ instance.packagePlanId ? props.formatMoney(instance.billingPrice) : '-' }}</div>
+                  </div>
+                  <div class="rounded-xl border px-3 py-2" :class="props.isDark ? 'border-gray-800 bg-black/30' : 'border-gray-200 bg-white/80'">
+                    <div class="text-[11px] uppercase tracking-wide" :class="textMuted(props.isDark)">{{ t('billing.expiresAt') }}</div>
+                    <div class="mt-1 truncate text-sm font-semibold" :class="textStrong(props.isDark)">{{ props.getExpirySummary(instance) }}</div>
+                  </div>
+                </div>
+
+                <div class="mt-3 flex flex-wrap justify-end gap-2" @click.stop>
+                  <button class="btn-ghost btn-sm" :disabled="props.isInstanceSyncing(instance.id)" :title="t('admin.hosts.batchSyncStatus')" @click="emit('sync-instance', instance)">
+                    <svg v-if="props.isInstanceSyncing(instance.id)" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                  </button>
+                  <button v-if="instance.packagePlanId" class="btn-ghost btn-sm" :title="t('host.price.editPrice')" @click="emit('open-price', instance)">
+                    <svg 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                  </button>
+                  <button class="btn-secondary btn-sm" @click="emit('open-single-config', instance.id)">{{ t('host.batchConfig.button') }}</button>
+                  <button class="btn-primary btn-sm" @click="emit('open-detail', instance.id)">{{ t('common.details') }}</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.isInstanceExpanded(instance.id)" class="border-t px-4 py-4 sm:px-5" :class="props.isDark ? 'border-gray-800 bg-black/10' : 'border-gray-200 bg-gray-50/40'">
+          <div v-if="props.isDetailLoading(instance.id)" class="flex items-center gap-3 rounded-2xl border px-4 py-5" :class="props.isDark ? 'border-gray-800 bg-gray-950/60 text-gray-400' : 'border-gray-200 bg-white text-gray-500'">
+            <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+            <span class="text-sm">{{ t('common.loading') }}</span>
+          </div>
+
+          <div v-else-if="getDetailError(instance.id)" class="flex flex-col gap-3 rounded-2xl border px-4 py-4 sm:flex-row sm:items-center sm:justify-between" :class="props.isDark ? 'border-red-500/20 bg-red-500/10' : 'border-red-200 bg-red-50'">
+            <div class="min-w-0">
+              <div class="text-sm font-medium text-red-500">{{ t('common.loadFailed') }}</div>
+              <div class="mt-1 text-xs break-all" :class="props.isDark ? 'text-red-300/80' : 'text-red-700/80'">{{ getDetailError(instance.id) }}</div>
+            </div>
+            <button class="btn-secondary btn-sm" @click="emit('retry-detail', instance.id)">{{ t('common.retry') }}</button>
+          </div>
+
+          <div v-else class="grid gap-3 xl:grid-cols-3">
+            <div class="rounded-2xl border p-4" :class="shellClass(props.isDark)">
+              <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em]" :class="textMuted(props.isDark)">{{ t('common.details') }}</div>
+              <dl class="space-y-3 text-sm">
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('instance.detail.info.instanceId') }}</dt><dd class="font-mono text-right text-themed">{{ instance.id }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">Incus ID</dt><dd class="font-mono text-right text-themed break-all">{{ instance.incusId || instance.incus_id || '-' }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.networkMode') }}</dt><dd class="text-right text-themed">{{ props.getNetworkModeLabel(instance) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.instanceType') }}</dt><dd class="text-right text-themed">{{ props.getInstanceTypeLabel(instance) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('instance.user') }}</dt><dd class="text-right text-themed">{{ instance.username || '-' }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('instance.createdAt') }}</dt><dd class="text-right text-themed">{{ props.formatDateTime(instance.createdAt || instance.created_at || null) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('common.updatedAt') }}</dt><dd class="text-right text-themed">{{ props.formatDateTime(instance.updatedAt || instance.updated_at || null) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('billing.expiresAt') }}</dt><dd class="text-right text-themed">{{ props.formatDateTime(props.getExpiryValue(instance)) }}</dd></div>
+                <div v-if="props.getSuspendReason(instance)" class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('admin.hosts.suspendReason') }}</dt><dd class="text-right text-themed break-all">{{ props.getSuspendReason(instance) }}</dd></div>
+              </dl>
+            </div>
+
+            <div class="rounded-2xl border p-4" :class="shellClass(props.isDark)">
+              <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em]" :class="textMuted(props.isDark)">{{ t('admin.hosts.resources') }}</div>
+              <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <div class="rounded-xl border px-3 py-2" :class="statClass(props.isDark)"><div class="text-[11px]" :class="textMuted(props.isDark)">{{ t('admin.hosts.resources') }}</div><div class="mt-1 space-y-1 text-sm text-themed"><div>CPU {{ instance.cpu }}%</div><div>{{ props.formatMemory(instance.memory) }}</div><div>{{ props.formatDisk(instance.disk) }}</div><div>SWAP {{ props.getSwapDisplay(instance) }}</div></div></div>
+                <div class="rounded-xl border px-3 py-2" :class="statClass(props.isDark)"><div class="text-[11px]" :class="textMuted(props.isDark)">{{ t('admin.hosts.trafficUsage') }}</div><div class="mt-1 space-y-1 text-sm text-themed"><div>{{ props.getTrafficSummary(instance) }}</div><div>{{ props.formatBandwidth(props.getDetailConfig(instance.id)?.config.limits_ingress) }}</div><div>{{ props.formatBandwidth(props.getDetailConfig(instance.id)?.config.limits_egress) }}</div></div></div>
+                <div v-for="item in props.getQuotaItems(instance)" :key="item.label" class="rounded-xl border px-3 py-2" :class="statClass(props.isDark)"><div class="text-[11px]" :class="textMuted(props.isDark)">{{ item.label }}</div><div class="mt-1 text-sm font-medium text-themed">{{ props.formatQuotaValue(item.value) }}</div></div>
+                <div class="rounded-xl border px-3 py-2" :class="statClass(props.isDark)"><div class="text-[11px]" :class="textMuted(props.isDark)">IP</div><div class="mt-1 space-y-1 text-sm font-mono text-themed"><div>{{ props.getDisplayIp(instance).ipv4 || '-' }}</div><div class="truncate" :title="props.getDisplayIp(instance).ipv6 || ''">{{ props.getDisplayIp(instance).ipv6 || '-' }}</div></div></div>
+              </div>
+            </div>
+
+            <div class="rounded-2xl border p-4" :class="shellClass(props.isDark)">
+              <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em]" :class="textMuted(props.isDark)">{{ t('instanceConfig.title') }}</div>
+              <dl class="space-y-3 text-sm">
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">SWAP</dt><dd class="text-right text-themed">{{ props.getSwapDisplay(instance) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.ioLimitMode') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.ioLimitMode === 'iops' ? t('packageForm.ioMode.iops') : t('packageForm.ioMode.throughput') }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.limitsRead') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.ioLimitMode === 'iops' ? `${props.getDetailConfig(instance.id)?.config.limits_read_iops ?? '-'} IOPS` : (props.getDetailConfig(instance.id)?.config.limits_read || '-') }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.limitsWrite') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.ioLimitMode === 'iops' ? `${props.getDetailConfig(instance.id)?.config.limits_write_iops ?? '-'} IOPS` : (props.getDetailConfig(instance.id)?.config.limits_write || '-') }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.limitsIngress') }}</dt><dd class="text-right text-themed">{{ props.formatBandwidth(props.getDetailConfig(instance.id)?.config.limits_ingress) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.limitsEgress') }}</dt><dd class="text-right text-themed">{{ props.formatBandwidth(props.getDetailConfig(instance.id)?.config.limits_egress) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.limitsProcesses') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.config.limits_processes ?? '-' }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.limitsCpuPriority') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.config.limits_cpu_priority ?? '-' }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.bootAutostart') }}</dt><dd class="text-right text-themed">{{ props.formatBoolean(props.getDetailConfig(instance.id)?.config.boot_autostart) }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.bootAutostartPriority') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.config.boot_autostart_priority ?? '-' }}</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.bootAutostartDelay') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.config.boot_autostart_delay ?? '-' }}s</dd></div>
+                <div class="flex items-start justify-between gap-4"><dt class="text-themed-muted">{{ t('packageForm.fields.bootHostShutdownTimeout') }}</dt><dd class="text-right text-themed">{{ props.getDetailConfig(instance.id)?.config.boot_host_shutdown_timeout ?? '-' }}s</dd></div>
+              </dl>
+            </div>
+
+            <div class="rounded-2xl border p-4 xl:col-span-3" :class="shellClass(props.isDark)">
+              <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em]" :class="textMuted(props.isDark)">{{ t('common.actions') }}</div>
+              <div class="flex flex-wrap gap-2" @click.stop>
+                <button class="btn-secondary btn-sm" @click="emit('open-single-config', instance.id)">{{ t('host.batchConfig.button') }}</button>
+                <button class="btn-secondary btn-sm" :disabled="props.isInstanceSyncing(instance.id)" @click="emit('sync-instance', instance)">{{ props.isInstanceSyncing(instance.id) ? t('common.syncing') : t('admin.hosts.batchSyncStatus') }}</button>
+                <button v-if="props.getDetailConfig(instance.id)?.swap.available && props.canToggleSwap(instance)" class="btn-secondary btn-sm" :disabled="props.isSwapActionLoading(instance.id)" @click="emit('toggle-swap', instance)">{{ props.isSwapActionLoading(instance.id) ? t('common.processing') : (props.getDetailConfig(instance.id)?.swap.enabled ? t('instanceConfig.swap.disableButton') : t('instanceConfig.swap.enableButton')) }}</button>
+                <button v-if="instance.trafficData && Number(instance.trafficData.monthlyUsed) > 0" class="btn-secondary btn-sm" :disabled="props.resettingTrafficId === instance.id" @click="emit('open-reset-traffic', instance)">{{ t('admin.hosts.resetTraffic') }}</button>
+                <button v-if="instance.packagePlanId" class="btn-secondary btn-sm" @click="emit('open-price', instance)">{{ t('host.price.editPrice') }}</button>
+                <button v-if="props.canRecreateInstance(instance)" class="btn-secondary btn-sm" :disabled="props.recreateLoading" @click="emit('open-recreate', instance)">{{ props.recreateLoading && props.recreateTargetId === instance.id ? t('common.processing') : t('instance.detail.recreate.title') }}</button>
+                <button class="btn-danger btn-sm" @click="emit('open-delete', instance.id)">{{ t('common.delete') }}</button>
+                <button class="btn-primary btn-sm" @click="emit('open-detail', instance.id)">{{ t('common.details') }}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/host/HostInstancesTab.vue b/client/src/components/host/HostInstancesTab.vue
new file mode 100644
index 0000000..1d26128
--- /dev/null
+++ b/client/src/components/host/HostInstancesTab.vue
@@ -0,0 +1,2034 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+
+import api from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import BatchConfigModal from '@/components/host/BatchConfigModal.vue'
+import MigrateHostModal from '@/components/host/MigrateHostModal.vue'
+import HostInstancesList from '@/components/host/HostInstancesList.vue'
+import RecreateModal from '@/components/instance/modals/RecreateModal.vue'
+import type { InstanceConfigResponse } from '@/types/api'
+import { translateError } from '@/utils/errorHandler'
+
+const { t } = useI18n()
+const router = useRouter()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+
+interface Props {
+  hostId: number
+  hostName?: string
+}
+
+const props = defineProps<Props>()
+
+// 获取付费实例的图标类型（根据实例类型判断）
+// 返回 'pro' | 'prime' | null
+function getPaidIconType(instance: Instance): 'pro' | 'prime' | null {
+  // 只有付费实例才显示付费图标
+  if (!instance.packagePlanId) return null
+  
+  // 根据实例类型判断：虚拟机显示 prime，容器显示 pro
+  return instance.instanceType === 'vm' ? 'prime' : 'pro'
+}
+
+interface Instance {
+  id: number
+  name: string
+  incusId?: string
+  incus_id?: string
+  status: string
+  image: string
+  imageName?: string | null
+  ipv4?: string
+  ipv6?: string
+  network_mode?: string
+  networkMode?: string
+  cpu: number
+  memory: number
+  disk: number
+  createdAt?: string
+  created_at?: string
+  updatedAt?: string
+  updated_at?: string
+  // 管理员视图返回的用户信息
+  username?: string | null
+  userEmail?: string | null
+  userAvatarStyle?: string | null
+  userId?: number
+  user_id?: number
+  ssh_port?: number | null
+  port_limit?: number | null
+  snapshot_limit?: number | null
+  backup_limit?: number | null
+  site_limit?: number | null
+  remaining_quota?: {
+    port: number
+    snapshot: number
+    backup: number
+    site: number
+  }
+  quota_usage?: {
+    port: number
+    snapshot: number
+    backup: number
+    site: number
+  }
+  effective_quota_limit?: {
+    port: number
+    snapshot: number
+    backup: number
+    site: number
+  }
+  swapEnabled?: boolean
+  swapSize?: number | null
+  monthlyTrafficLimit?: string | null
+  limitsIngress?: string | null
+  limitsEgress?: string | null
+  expiresAt?: string | null
+  expires_at?: string | null
+  suspendedAt?: string | null
+  suspended_at?: string | null
+  suspendReason?: string | null
+  suspend_reason?: string | null
+  autoRenew?: boolean
+  package?: {
+    id?: number
+    name?: string
+  } | null
+  // NAT公网IP
+  natPublicIp?: string | null
+  host?: {
+    nat_public_ip?: string | null
+  }
+  // 流量信息
+  trafficData?: {
+    monthlyUsed: string
+    monthlyUsedFormatted: string
+    monthlyLimit: string | null
+    monthlyLimitFormatted: string | null
+    percentage: number
+  } | null
+  // 付费实例标识
+  packagePlanId?: number | null
+  // 实例类型：容器或虚拟机
+  instanceType?: 'container' | 'vm'
+  // 续费价格
+  billingPrice?: number | null
+}
+
+interface ImageOption {
+  incusAlias: string
+  name: string
+  description: string | null
+  icon?: string | null
+}
+
+interface SshKeyOption {
+  id: number
+  name: string
+}
+
+const instances = ref<Instance[]>([])
+const loading = ref(true)
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const totalPages = ref(1)
+const searchQuery = ref('')
+
+// 状态筛选
+const statusFilter = ref('')
+
+// 排序
+const sortBy = ref('createdAt')
+const sortOrder = ref<'asc' | 'desc'>('desc')
+
+// 状态选项
+const statusOptions = [
+  { value: '', label: 'instance.statusFilter.all' },
+  { value: 'running', label: 'instance.status.running' },
+  { value: 'stopped', label: 'instance.status.stopped' },
+  { value: 'suspended', label: 'instance.status.suspended' },
+  { value: 'creating', label: 'instance.status.creating' },
+  { value: 'error', label: 'instance.status.error' }
+]
+
+// 批量选择相关
+const selectedIds = ref<Set<number>>(new Set())
+const isDeleting = ref(false)
+const deletingMode = ref<'database' | 'full' | null>(null)
+const isSyncing = ref(false)
+const showDeleteModal = ref(false)
+const deleteReason = ref('')
+const deleteSelectionOverride = ref<number[] | null>(null)
+
+// 删除预览相关（退款信息）
+const deletePreviewLoading = ref(false)
+const deletePreview = ref<{
+  instances: Array<{
+    id: number
+    name: string
+    username: string
+    userId: number
+    isOwnInstance: boolean
+    isPaid: boolean
+    remainingDays: number
+    refundAmount: number
+  }>
+  totalRefundAmount: number
+} | null>(null)
+
+// 批量封停相关
+const isSuspending = ref(false)
+const isUnsuspending = ref(false)
+const showSuspendModal = ref(false)
+const suspendReason = ref('')
+
+// 通知节点下实例所属用户
+const showNotifyModal = ref(false)
+const notifyTitle = ref('')
+const notifyContent = ref('')
+const notifySendEmail = ref(false)
+const isSendingNotify = ref(false)
+
+
+
+// 重置流量
+const resettingTrafficId = ref<number | null>(null)
+
+// 重置流量确认弹窗
+const showResetTrafficModal = ref(false)
+const resetTrafficTarget = ref<Instance | null>(null)
+
+// 修改续费价格
+const showPriceModal = ref(false)
+const priceModalTarget = ref<Instance | null>(null)
+const newPriceInput = ref<number>(0)
+const isUpdatingPrice = ref(false)
+
+// 批量修改配置
+const showBatchConfigModal = ref(false)
+const batchConfigSelectionOverride = ref<number[] | null>(null)
+const lastBatchConfigSelection = ref<number[]>([])
+
+// 批量迁移实例
+const showMigrateModal = ref(false)
+
+// 重建实例
+const showRecreateModal = ref(false)
+const recreateLoading = ref(false)
+const recreateTarget = ref<Instance | null>(null)
+const availableImages = ref<ImageOption[]>([])
+const sshKeys = ref<SshKeyOption[]>([])
+
+// 批量赠送时长
+const showGiftDaysModal = ref(false)
+const giftDays = ref(7)
+const isGifting = ref(false)
+
+// 展开详情
+const expandedInstanceId = ref<number | null>(null)
+const detailConfigs = ref<Record<number, InstanceConfigResponse | null>>({})
+const detailConfigErrors = ref<Record<number, string>>({})
+const detailLoadingIds = ref<Set<number>>(new Set())
+const syncingInstanceIds = ref<Set<number>>(new Set())
+const swapActionLoadingIds = ref<Set<number>>(new Set())
+
+const isAllSelected = computed(() => {
+  return instances.value.length > 0 && selectedIds.value.size === instances.value.length
+})
+
+const isPartialSelected = computed(() => {
+  return selectedIds.value.size > 0 && selectedIds.value.size < instances.value.length
+})
+
+const selectedCount = computed(() => selectedIds.value.size)
+const effectiveBatchConfigSelection = computed(() => batchConfigSelectionOverride.value ?? Array.from(selectedIds.value))
+const effectiveDeleteSelection = computed(() => deleteSelectionOverride.value ?? Array.from(selectedIds.value))
+const effectiveDeleteCount = computed(() => effectiveDeleteSelection.value.length)
+
+// 计算选中的付费实例数量
+const selectedPaidCount = computed(() => {
+  return instances.value.filter(i => selectedIds.value.has(i.id) && i.packagePlanId).length
+})
+
+function toggleSelectAll() {
+  if (isAllSelected.value) {
+    selectedIds.value.clear()
+  } else {
+    selectedIds.value = new Set(instances.value.map(i => i.id))
+  }
+}
+
+function toggleSelect(id: number) {
+  if (selectedIds.value.has(id)) {
+    selectedIds.value.delete(id)
+  } else {
+    selectedIds.value.add(id)
+  }
+  // 触发响应式更新
+  selectedIds.value = new Set(selectedIds.value)
+}
+
+function setLoadingState(target: typeof detailLoadingIds | typeof syncingInstanceIds | typeof swapActionLoadingIds, id: number, loading: boolean) {
+  const next = new Set(target.value)
+  if (loading) {
+    next.add(id)
+  } else {
+    next.delete(id)
+  }
+  target.value = next
+}
+
+function isInstanceExpanded(id: number): boolean {
+  return expandedInstanceId.value === id
+}
+
+function isDetailLoading(id: number): boolean {
+  return detailLoadingIds.value.has(id)
+}
+
+function isInstanceSyncing(id: number): boolean {
+  return syncingInstanceIds.value.has(id)
+}
+
+function isSwapActionLoading(id: number): boolean {
+  return swapActionLoadingIds.value.has(id)
+}
+
+function getDetailConfig(id: number): InstanceConfigResponse | null {
+  return detailConfigs.value[id] ?? null
+}
+
+async function loadInstanceDetailConfig(instanceId: number, force: boolean = false): Promise<void> {
+  const currentInstance = instances.value.find(instance => instance.id === instanceId)
+  const hasQuotaDetail = !!currentInstance?.quota_usage && !!currentInstance?.effective_quota_limit
+  if (!force && detailLoadingIds.value.has(instanceId)) return
+  if (!force && detailConfigs.value[instanceId] && hasQuotaDetail) return
+
+  setLoadingState(detailLoadingIds, instanceId, true)
+  try {
+    const [configResult, detailResult] = await Promise.allSettled([
+      api.instances.getConfig(instanceId),
+      api.instances.get(instanceId)
+    ])
+
+    if (configResult.status === 'fulfilled') {
+      detailConfigs.value = {
+        ...detailConfigs.value,
+        [instanceId]: configResult.value
+      }
+      detailConfigErrors.value = {
+        ...detailConfigErrors.value,
+        [instanceId]: ''
+      }
+    } else {
+      detailConfigErrors.value = {
+        ...detailConfigErrors.value,
+        [instanceId]: (configResult.reason as any)?.message || String(configResult.reason)
+      }
+    }
+
+    if (detailResult.status === 'fulfilled') {
+      instances.value = instances.value.map(instance =>
+        instance.id === instanceId
+          ? { ...instance, ...(detailResult.value as Partial<Instance>) }
+          : instance
+      )
+    }
+  } catch (err: any) {
+    detailConfigErrors.value = {
+      ...detailConfigErrors.value,
+      [instanceId]: err?.message || String(err)
+    }
+  } finally {
+    setLoadingState(detailLoadingIds, instanceId, false)
+  }
+}
+
+async function toggleExpandInstance(instance: Instance): Promise<void> {
+  if (expandedInstanceId.value === instance.id) {
+    expandedInstanceId.value = null
+    return
+  }
+
+  expandedInstanceId.value = instance.id
+  await loadInstanceDetailConfig(instance.id)
+}
+
+function openSingleConfigModal(instanceId: number): void {
+  batchConfigSelectionOverride.value = [instanceId]
+  lastBatchConfigSelection.value = [instanceId]
+  showBatchConfigModal.value = true
+}
+
+function openBatchConfigForSelection(): void {
+  lastBatchConfigSelection.value = [...effectiveBatchConfigSelection.value]
+  showBatchConfigModal.value = true
+}
+
+function openSingleDeleteModal(instanceId: number): void {
+  deleteSelectionOverride.value = [instanceId]
+  void openBatchDeleteModal()
+}
+
+async function openBatchDeleteModal() {
+  if (effectiveDeleteSelection.value.length === 0) return
+  deleteReason.value = ''
+  deletePreview.value = null
+  showDeleteModal.value = true
+  
+  // 调用预览 API 获取退款信息
+  deletePreviewLoading.value = true
+  try {
+    const preview = await api.hosts.batchDeleteInstancesPreview(
+      props.hostId,
+      effectiveDeleteSelection.value
+    )
+    deletePreview.value = preview
+  } catch (err: any) {
+    console.error('Failed to load delete preview:', err)
+  } finally {
+    deletePreviewLoading.value = false
+  }
+}
+
+async function confirmBatchDelete(databaseOnly: boolean = false) {
+  if (effectiveDeleteSelection.value.length === 0) return
+  
+  isDeleting.value = true
+  deletingMode.value = databaseOnly ? 'database' : 'full'
+  try {
+    const result = await api.hosts.batchDeleteInstances(
+      props.hostId,
+      effectiveDeleteSelection.value,
+      deleteReason.value.trim() || undefined,
+      databaseOnly
+    )
+    
+    if (result.failedCount > 0) {
+      toast.warning(t('admin.hosts.batchDeletePartial', {
+        success: result.successCount,
+        failed: result.failedCount
+      }))
+    } else {
+      toast.success(t('admin.hosts.batchDeleteSuccess', { count: result.successCount }))
+    }
+    
+    selectedIds.value.clear()
+    deleteSelectionOverride.value = null
+    deleteReason.value = ''
+    showDeleteModal.value = false
+    await loadInstances()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.batchDeleteFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isDeleting.value = false
+    deletingMode.value = null
+  }
+}
+
+function openBatchSuspendModal() {
+  if (selectedIds.value.size === 0) return
+  suspendReason.value = ''
+  showSuspendModal.value = true
+}
+
+async function confirmBatchSuspend() {
+  if (selectedIds.value.size === 0) return
+  
+  isSuspending.value = true
+  try {
+    const result = await api.hosts.batchSuspendInstances(
+      props.hostId,
+      Array.from(selectedIds.value),
+      suspendReason.value.trim() || undefined
+    )
+    
+    if (result.failedCount > 0) {
+      toast.warning(t('admin.hosts.batchSuspendPartial', {
+        success: result.successCount,
+        failed: result.failedCount
+      }))
+    } else {
+      toast.success(t('admin.hosts.batchSuspendSuccess', { count: result.successCount }))
+    }
+    
+    selectedIds.value.clear()
+    suspendReason.value = ''
+    showSuspendModal.value = false
+    await loadInstances()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.batchSuspendFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isSuspending.value = false
+  }
+}
+
+async function confirmBatchUnsuspend() {
+  if (selectedIds.value.size === 0) return
+  
+  isUnsuspending.value = true
+  try {
+    const result = await api.hosts.batchUnsuspendInstances(
+      props.hostId,
+      Array.from(selectedIds.value)
+    )
+    
+    if (result.failedCount > 0) {
+      toast.warning(t('admin.hosts.batchUnsuspendPartial', {
+        success: result.successCount,
+        failed: result.failedCount
+      }))
+    } else if (result.successCount === 0) {
+      toast.warning(t('admin.hosts.batchUnsuspendNone'))
+    } else {
+      toast.success(t('admin.hosts.batchUnsuspendSuccess', { count: result.successCount }))
+    }
+    
+    selectedIds.value.clear()
+    await loadInstances()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.batchUnsuspendFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isUnsuspending.value = false
+  }
+}
+
+async function batchSyncStatus() {
+  if (selectedIds.value.size === 0) return
+  
+  isSyncing.value = true
+  try {
+    const result = await api.hosts.batchSyncInstanceStatus(
+      props.hostId,
+      Array.from(selectedIds.value)
+    )
+    
+    if (result.failedCount > 0) {
+      toast.warning(t('admin.hosts.batchSyncPartial', {
+        synced: result.syncedCount,
+        changed: result.changedCount,
+        failed: result.failedCount
+      }))
+    } else if (result.changedCount > 0 || result.ipv4ChangedCount > 0) {
+      // 有状态变更或 IPv4 变更
+      if (result.ipv4ChangedCount > 0) {
+        toast.success(t('admin.hosts.batchSyncWithIpv4', {
+          synced: result.syncedCount,
+          changed: result.changedCount,
+          ipv4Changed: result.ipv4ChangedCount
+        }))
+      } else {
+        toast.success(t('admin.hosts.batchSyncSuccess', {
+          synced: result.syncedCount,
+          changed: result.changedCount
+        }))
+      }
+    } else {
+      toast.info(t('admin.hosts.batchSyncNoChange', { synced: result.syncedCount }))
+    }
+    
+    selectedIds.value.clear()
+    await loadInstances()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.batchSyncFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isSyncing.value = false
+  }
+}
+
+// 批量赠送时长
+function openGiftDaysModal() {
+  if (selectedPaidCount.value === 0) {
+    toast.warning(t('host.giftDays.noPaidInstances'))
+    return
+  }
+  giftDays.value = 7
+  showGiftDaysModal.value = true
+}
+
+async function confirmGiftDays() {
+  if (selectedPaidCount.value === 0) return
+  
+  isGifting.value = true
+  try {
+    const result = await api.hosts.giftDays(
+      props.hostId,
+      Array.from(selectedIds.value),
+      giftDays.value
+    )
+    
+    if (result.failedCount > 0) {
+      toast.warning(t('host.giftDays.partial', {
+        success: result.successCount,
+        failed: result.failedCount
+      }))
+    } else {
+      toast.success(t('host.giftDays.success', { count: result.successCount, days: giftDays.value }))
+    }
+    
+    if (result.skippedCount > 0) {
+      toast.info(t('host.giftDays.skipped', { count: result.skippedCount }))
+    }
+    
+    selectedIds.value.clear()
+    showGiftDaysModal.value = false
+    await loadInstances()
+  } catch (err: any) {
+    toast.error(t('host.giftDays.failed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isGifting.value = false
+  }
+}
+
+// 发送通知给选中实例的用户
+function openNotifyModal() {
+  if (selectedIds.value.size === 0) return
+  notifyTitle.value = ''
+  notifyContent.value = ''
+  notifySendEmail.value = false
+  showNotifyModal.value = true
+}
+
+function closeNotifyModal(force: boolean = false) {
+  if (isSendingNotify.value && !force) return
+  showNotifyModal.value = false
+  notifyTitle.value = ''
+  notifyContent.value = ''
+  notifySendEmail.value = false
+}
+
+function handleCloseNotifyModal() {
+  closeNotifyModal()
+}
+
+function buildNotifyResultMessage(result: Awaited<ReturnType<typeof api.inbox.notifyHostUsers>>): string {
+  if (!result.email) {
+    return t('host.notify.sendSuccess', { count: result.count })
+  }
+
+  const parts = [t('host.notify.sendSuccessBase', { count: result.count })]
+
+  if (result.email.sentCount > 0) {
+    parts.push(t('host.notify.emailDirectSuccess', { count: result.email.sentCount }))
+  }
+  if (result.email.queuedCount > 0) {
+    parts.push(t('host.notify.emailQueuedSuccess', { count: result.email.queuedCount }))
+  }
+  if (result.email.skippedCount > 0) {
+    parts.push(t('host.notify.emailSkipped', { count: result.email.skippedCount }))
+  }
+  if (result.email.failedCount > 0) {
+    parts.push(t('host.notify.emailFailed', { count: result.email.failedCount }))
+  }
+
+  return parts.join(' · ')
+}
+
+async function sendNotify() {
+  if (!notifyTitle.value.trim()) {
+    toast.error(t('host.notify.titleRequired'))
+    return
+  }
+  if (!notifyContent.value.trim()) {
+    toast.error(t('host.notify.contentRequired'))
+    return
+  }
+
+  isSendingNotify.value = true
+  try {
+    const result = await api.inbox.notifyHostUsers(props.hostId, {
+      title: notifyTitle.value.trim(),
+      content: notifyContent.value.trim(),
+      instanceIds: Array.from(selectedIds.value),
+      sendEmail: notifySendEmail.value
+    })
+
+    const message = buildNotifyResultMessage(result)
+    if (result.email?.failedCount) {
+      toast.warning(message)
+    } else {
+      toast.success(message)
+    }
+
+    closeNotifyModal(true)
+  } catch (err: any) {
+    toast.error(t('host.notify.sendFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isSendingNotify.value = false
+  }
+}
+
+
+
+// 打开修改续费价格弹窗
+function openPriceModal(instance: Instance) {
+  priceModalTarget.value = instance
+  newPriceInput.value = instance.billingPrice ? Number(instance.billingPrice) : 0
+  showPriceModal.value = true
+}
+
+// 更新续费价格
+async function updateRenewalPrice() {
+  if (!priceModalTarget.value) return
+  
+  if (newPriceInput.value < 0) {
+    toast.error(t('host.price.minPriceError'))
+    return
+  }
+
+  // 检查价格是否有变化
+  const currentPrice = priceModalTarget.value.billingPrice ? Number(priceModalTarget.value.billingPrice) : 0
+  if (Math.abs(currentPrice - newPriceInput.value) < 0.001) {
+    toast.error(t('host.price.samePriceError'))
+    return
+  }
+
+  isUpdatingPrice.value = true
+  try {
+    const result = await api.hosts.updateInstanceRenewalPrice(
+      props.hostId,
+      priceModalTarget.value.id,
+      newPriceInput.value
+    )
+    toast.success(t('host.price.updateSuccess'))
+    // 更新本地数据
+    if (priceModalTarget.value) {
+      priceModalTarget.value.billingPrice = result.newPrice
+    }
+    showPriceModal.value = false
+    priceModalTarget.value = null
+  } catch (err: any) {
+    toast.error(t('host.price.updateFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isUpdatingPrice.value = false
+  }
+}
+
+// 打开重置流量确认弹窗
+function openResetTrafficModal(instance: Instance) {
+  resetTrafficTarget.value = instance
+  showResetTrafficModal.value = true
+}
+
+// 确认重置实例流量
+async function confirmResetTraffic() {
+  if (!resetTrafficTarget.value || resettingTrafficId.value) return
+  
+  const instance = resetTrafficTarget.value
+  resettingTrafficId.value = instance.id
+  try {
+    await api.traffic.resetInstanceTraffic(instance.id)
+    toast.success(t('admin.hosts.trafficResetSuccess'))
+    // 重新加载流量数据
+    const trafficData = await api.traffic.getInstanceTraffic(instance.id)
+    instance.trafficData = trafficData
+    showResetTrafficModal.value = false
+    resetTrafficTarget.value = null
+  } catch (err: any) {
+    toast.error(t('admin.hosts.trafficResetFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    resettingTrafficId.value = null
+  }
+}
+
+function canRecreateInstance(instance: Instance): boolean {
+  const currentUserId = authStore.user?.id
+  const ownerId = instance.userId ?? instance.user_id
+  return !!currentUserId && ownerId === currentUserId && instance.status.toLowerCase() !== 'suspended'
+}
+
+async function loadAvailableImagesForInstance(instance: Instance): Promise<void> {
+  try {
+    const imageType: 'container' | 'vm' = instance.instanceType === 'vm' ? 'vm' : 'container'
+    const res = await api.images.getSystemImages(imageType, instance.memory, props.hostId)
+    const images = res.images || []
+
+    availableImages.value = images.map((img: any) => ({
+      incusAlias: img.remoteAlias,
+      name: img.name,
+      description: null,
+      icon: img.icon || null
+    }))
+  } catch (err: any) {
+    console.error('Failed to load available images:', err)
+    toast.error(t('instance.detail.rebuild.loadImagesFailed') + ': ' + (err?.message || String(err)))
+    throw err
+  }
+}
+
+async function loadSshKeys(): Promise<void> {
+  try {
+    const response = await api.sshKeys.list()
+    const keys = response.keys || []
+    sshKeys.value = keys.map((key) => ({ id: key.id, name: key.name }))
+  } catch (err) {
+    console.error('Failed to load SSH keys:', err)
+    toast.error(t('instance.detail.rebuild.loadKeysFailed'))
+    throw err
+  }
+}
+
+async function openRecreateModal(instance: Instance): Promise<void> {
+  recreateTarget.value = instance
+  try {
+    await Promise.all([loadAvailableImagesForInstance(instance), loadSshKeys()])
+    showRecreateModal.value = true
+  } catch {
+    recreateTarget.value = null
+  }
+}
+
+function handleRecreateModalVisibleChange(value: boolean): void {
+  showRecreateModal.value = value
+  if (!value && !recreateLoading.value) {
+    recreateTarget.value = null
+  }
+}
+
+async function doRecreate(data: { image: string; sshKeyId: number; customInitCommandIds?: number[] }): Promise<void> {
+  if (!recreateTarget.value) return
+
+  recreateLoading.value = true
+  try {
+    await api.instances.recreate(recreateTarget.value.id, {
+      image: data.image,
+      sshKeyId: data.sshKeyId,
+      customInitCommandIds: data.customInitCommandIds
+    })
+    toast.success(t('instance.detail.actions.taskQueued'))
+    showRecreateModal.value = false
+    recreateTarget.value = null
+    await loadInstances()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    recreateLoading.value = false
+  }
+}
+
+async function loadInstances() {
+  loading.value = true
+  try {
+    const res = await api.instances.list({
+      hostId: props.hostId,
+      page: page.value,
+      pageSize: pageSize.value,
+      search: searchQuery.value.trim() || undefined,
+      status: statusFilter.value || undefined,
+      sortBy: sortBy.value,
+      sortOrder: sortOrder.value
+    })
+    instances.value = (res as any).instances || []
+    total.value = (res as any).total || 0
+    totalPages.value = (res as any).totalPages || 1
+
+    if (expandedInstanceId.value !== null && !instances.value.some(instance => instance.id === expandedInstanceId.value)) {
+      expandedInstanceId.value = null
+    }
+
+    // 批量加载实例流量数据
+    await loadInstancesTraffic()
+  } catch (err) {
+    console.error('Failed to load instances:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 批量加载实例流量数据
+async function loadInstancesTraffic() {
+  if (instances.value.length === 0) return
+
+  try {
+    // 并发请求所有实例的流量数据
+    const trafficPromises = instances.value.map(async (instance) => {
+      try {
+        const trafficData = await api.traffic.getInstanceTraffic(instance.id)
+        return { instanceId: instance.id, trafficData }
+      } catch (err) {
+        console.error(`Failed to load traffic for instance ${instance.id}:`, err)
+        return { instanceId: instance.id, trafficData: null }
+      }
+    })
+
+    const trafficResults = await Promise.all(trafficPromises)
+
+    // 更新实例的流量数据
+    trafficResults.forEach(({ instanceId, trafficData }) => {
+      const instance = instances.value.find(i => i.id === instanceId)
+      if (instance) {
+        instance.trafficData = trafficData
+      }
+    })
+  } catch (err) {
+    console.error('Failed to load instances traffic:', err)
+  }
+}
+
+function handleSearch() {
+  page.value = 1
+  loadInstances()
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  page.value = 1
+  loadInstances()
+}
+
+function handleStatusChange() {
+  page.value = 1
+  loadInstances()
+}
+
+function toggleSort() {
+  sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc'
+  page.value = 1
+  loadInstances()
+}
+
+function handlePageSizeChange() {
+  page.value = 1
+  loadInstances()
+}
+
+watch(() => props.hostId, () => {
+  page.value = 1
+  searchQuery.value = ''
+  statusFilter.value = ''
+  sortOrder.value = 'desc'
+  selectedIds.value.clear()
+  batchConfigSelectionOverride.value = null
+  expandedInstanceId.value = null
+  detailConfigs.value = {}
+  detailConfigErrors.value = {}
+  loadInstances()
+})
+
+watch(showBatchConfigModal, (visible) => {
+  if (visible) {
+    lastBatchConfigSelection.value = [...effectiveBatchConfigSelection.value]
+  } else {
+    batchConfigSelectionOverride.value = null
+  }
+})
+
+watch(showDeleteModal, (visible) => {
+  if (!visible) {
+    deleteSelectionOverride.value = null
+  }
+})
+
+onMounted(() => {
+  loadInstances()
+})
+
+function getStatusInfo(status: string) {
+  const map: Record<string, { label: string; class: string; dot: string }> = {
+    running: { label: t('instance.status.running'), class: 'badge-success', dot: 'bg-green-500' },
+    stopped: { label: t('instance.status.stopped'), class: 'badge-default', dot: 'bg-gray-500' },
+    suspended: { label: t('instance.status.suspended'), class: 'badge-error', dot: 'bg-red-500' },
+    starting: { label: t('instance.status.starting'), class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+    stopping: { label: t('instance.status.stopping'), class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+    restarting: { label: t('instance.status.restarting'), class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+    creating: { label: t('instance.status.creating'), class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+    error: { label: t('instance.status.error'), class: 'badge-error', dot: 'bg-red-500' }
+  }
+  return map[status?.toLowerCase()] || map.stopped
+}
+
+function formatMemory(mb: number): string {
+  if (!mb) return '0'
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+function formatDisk(mb: number): string {
+  if (!mb) return '0'
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+function formatMoney(value?: number | null): string {
+  if (value === null || value === undefined) return '-'
+  return `¥${Number(value).toFixed(2)}`
+}
+
+function formatDateTime(value?: string | null): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleString()
+}
+
+function formatDateOnly(value?: string | null): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleDateString()
+}
+
+function formatBoolean(value?: boolean | null): string {
+  if (value === null || value === undefined) return '-'
+  return value ? t('common.enabled') : t('common.disabled')
+}
+
+function formatBandwidth(value?: string | null): string {
+  if (!value) return '-'
+  return String(value).replace(/Mbit/gi, 'Mbps').replace(/Gbit/gi, 'Gbps')
+}
+
+function formatSwapSize(sizeMb?: number | null): string {
+  if (!sizeMb || sizeMb <= 0) return '-'
+  return formatMemory(sizeMb)
+}
+
+function getInstanceTypeLabel(instance: Instance): string {
+  return instance.instanceType === 'vm' ? t('common.instanceType.vm') : t('common.instanceType.container')
+}
+
+function getNetworkModeLabel(instance: Instance): string {
+  const mode = instance.networkMode || instance.network_mode || 'nat'
+  const key = `common.networkMode.${mode}`
+  const translated = t(key)
+  return translated === key ? t('common.networkMode.nat') : translated
+}
+
+function getExpiryValue(instance: Instance): string | null {
+  return instance.expiresAt || instance.expires_at || null
+}
+
+function getSuspendReason(instance: Instance): string | null {
+  return instance.suspendReason || instance.suspend_reason || null
+}
+
+function getTrafficSummary(instance: Instance): string {
+  if (!instance.trafficData) return '-'
+  if (instance.trafficData.monthlyLimitFormatted) {
+    return `${instance.trafficData.monthlyUsedFormatted} / ${instance.trafficData.monthlyLimitFormatted}`
+  }
+  return `${instance.trafficData.monthlyUsedFormatted} / ${t('admin.hosts.trafficUnlimited')}`
+}
+
+function getTrafficPercentage(instance: Instance): number {
+  return instance.trafficData?.percentage ? Math.min(instance.trafficData.percentage, 100) : 0
+}
+
+function getTrafficBarClass(instance: Instance): string {
+  const percentage = instance.trafficData?.percentage ?? 0
+  if (percentage >= 100) return 'bg-red-500'
+  if (percentage >= 80) return 'bg-amber-500'
+  return themeStore.isDark ? 'bg-blue-400' : 'bg-blue-500'
+}
+
+function getSummaryMeta(instance: Instance): string[] {
+  const meta = [
+    `CPU ${instance.cpu}%`,
+    formatMemory(instance.memory),
+    formatDisk(instance.disk)
+  ]
+
+  const swapLabel = formatSwapSize(instance.swapSize)
+  if (swapLabel !== '-') {
+    meta.push(`SWAP ${swapLabel}`)
+  }
+
+  return meta
+}
+
+function getQuotaLimit(instance: Instance, key: 'port' | 'snapshot' | 'site'): number | null {
+  const detailLimit = instance.effective_quota_limit?.[key]
+  if (detailLimit !== undefined && detailLimit !== null) {
+    return detailLimit
+  }
+
+  if (key === 'port') return instance.port_limit ?? 20
+  if (key === 'snapshot') return instance.snapshot_limit ?? 5
+  return instance.site_limit ?? null
+}
+
+function getQuotaUsage(instance: Instance, key: 'port' | 'snapshot' | 'site'): number | null {
+  const detailUsage = instance.quota_usage?.[key]
+  if (detailUsage !== undefined && detailUsage !== null) {
+    return detailUsage
+  }
+
+  const limit = getQuotaLimit(instance, key)
+  const remaining = instance.remaining_quota?.[key]
+  if (limit === null || limit === undefined || remaining === null || remaining === undefined) {
+    return null
+  }
+  if (limit === 0) {
+    return null
+  }
+  return Math.max(0, limit - remaining)
+}
+
+function formatQuotaPair(used: number | null, limit: number | null): string {
+  if (used === null || used === undefined || limit === null || limit === undefined) {
+    return '-'
+  }
+  if (limit === 0) {
+    return `${used} / ∞`
+  }
+  return `${used} / ${limit}`
+}
+
+function getQuotaItems(instance: Instance): Array<{ label: string; value: string | number | null | undefined }> {
+  return [
+    {
+      label: t('host.batchConfig.portLimit'),
+      value: formatQuotaPair(getQuotaUsage(instance, 'port'), getQuotaLimit(instance, 'port'))
+    },
+    {
+      label: t('host.batchConfig.snapshotLimit'),
+      value: formatQuotaPair(getQuotaUsage(instance, 'snapshot'), getQuotaLimit(instance, 'snapshot'))
+    },
+    {
+      label: t('host.batchConfig.siteLimit'),
+      value: formatQuotaPair(getQuotaUsage(instance, 'site'), getQuotaLimit(instance, 'site'))
+    }
+  ]
+}
+
+function formatQuotaValue(value: string | number | null | undefined): string {
+  if (value === null || value === undefined) return '-'
+  if (typeof value === 'number' && value === 0) return t('common.unlimited')
+  return String(value)
+}
+
+function canToggleSwap(instance: Instance): boolean {
+  const currentUserId = authStore.user?.id
+  const ownerId = instance.userId ?? instance.user_id
+  return authStore.user?.role === 'admin' || (!!currentUserId && ownerId === currentUserId)
+}
+
+function getSwapDisplay(instance: Instance): string {
+  const detail = getDetailConfig(instance.id)
+  const enabled = detail?.swap.enabled ?? instance.swapEnabled ?? false
+  const sizeMb = detail?.swap.sizeMb ?? instance.swapSize ?? null
+  const sizeLabel = formatSwapSize(sizeMb)
+
+  if (enabled) {
+    return sizeLabel !== '-' ? `${t('common.enabled')} · ${sizeLabel}` : t('common.enabled')
+  }
+
+  if (sizeLabel !== '-') {
+    return `${t('common.disabled')} · ${sizeLabel}`
+  }
+
+  return t('common.disabled')
+}
+
+function getExpirySummary(instance: Instance): string {
+  const expiry = getExpiryValue(instance)
+  if (!expiry) return t('billing.neverExpires')
+
+  const expiresAt = new Date(expiry)
+  if (Number.isNaN(expiresAt.getTime())) return '-'
+
+  const diffMs = expiresAt.getTime() - Date.now()
+  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
+  const dateLabel = formatDateOnly(expiry)
+
+  if (diffDays < 0) {
+    return `${t('billing.expired')} · ${dateLabel}`
+  }
+
+  return `${diffDays}${t('common.days')} · ${dateLabel}`
+}
+
+async function handleBatchConfigSuccess(): Promise<void> {
+  await loadInstances()
+  if (expandedInstanceId.value !== null && lastBatchConfigSelection.value.includes(expandedInstanceId.value)) {
+    await loadInstanceDetailConfig(expandedInstanceId.value, true)
+  }
+}
+
+async function syncSingleInstance(instance: Instance): Promise<void> {
+  if (isInstanceSyncing(instance.id)) return
+
+  setLoadingState(syncingInstanceIds, instance.id, true)
+  try {
+    const result = await api.instances.syncStatus(instance.id)
+    if (result.statusChanged || result.ipv4Changed) {
+      toast.success(t('admin.hosts.batchSyncSuccess', {
+        synced: 1,
+        changed: result.statusChanged ? 1 : 0
+      }))
+    } else {
+      toast.info(t('admin.hosts.batchSyncNoChange', { synced: 1 }))
+    }
+    await loadInstances()
+    if (expandedInstanceId.value === instance.id) {
+      await loadInstanceDetailConfig(instance.id, true)
+    }
+  } catch (err: any) {
+    toast.error(t('admin.hosts.batchSyncFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    setLoadingState(syncingInstanceIds, instance.id, false)
+  }
+}
+
+async function toggleInstanceSwap(instance: Instance): Promise<void> {
+  if (isSwapActionLoading(instance.id)) return
+
+  await loadInstanceDetailConfig(instance.id)
+  const detail = getDetailConfig(instance.id)
+  if (!detail || !detail.swap.available) return
+
+  const confirmText = detail.swap.enabled
+    ? t('instanceConfig.swap.disableConfirmText')
+    : t('instanceConfig.swap.enableConfirmText', { size: formatSwapSize(detail.swap.sizeMb) })
+
+  if (!window.confirm(confirmText)) return
+
+  setLoadingState(swapActionLoadingIds, instance.id, true)
+  try {
+    const result = detail.swap.enabled
+      ? await api.instances.disableSwap(instance.id)
+      : await api.instances.enableSwap(instance.id)
+
+    instance.swapEnabled = result.swapEnabled
+    instance.swapSize = result.swapSize
+
+    toast.success(detail.swap.enabled ? t('instanceConfig.swap.disableSuccess') : t('instanceConfig.swap.enableSuccess'))
+    await loadInstanceDetailConfig(instance.id, true)
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    setLoadingState(swapActionLoadingIds, instance.id, false)
+  }
+}
+
+// 获取显示的IP地址：宿主机实例列表显示内网IPv4，如果是NAT+IPv6则显示内网IPv4和公网IPv6
+function getDisplayIp(instance: Instance): { ipv4: string | null; ipv6: string | null } {
+  const networkMode = instance.networkMode || instance.network_mode
+  const ipv4 = instance.ipv4 || null
+  
+  // 如果是有独立 IPv6 的模式，显示内网IPv4和公网IPv6
+  if (['nat_ipv6', 'ipv6_only'].includes(networkMode || '')) {
+    return {
+      ipv4: ipv4,
+      ipv6: instance.ipv6 || null
+    }
+  }
+  
+  // 其他情况只显示内网IPv4
+  return {
+    ipv4: ipv4,
+    ipv6: null
+  }
+}
+
+function goToInstance(id: number) {
+  // 传递 hostId 作为查询参数，用于返回时跳转到宿主机页面
+  router.push({
+    path: `/instances/${id}`,
+    query: { fromHost: props.hostId.toString() }
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <SkeletonLoader v-if="loading" type="table" />
+
+    <!-- 搜索栏 - 始终显示 -->
+    <div v-if="!loading" class="flex items-center gap-2 flex-wrap">
+      <div class="relative flex-1 max-w-md min-w-[200px]">
+        <input
+          v-model="searchQuery"
+          type="text"
+          :placeholder="t('admin.hosts.instanceSearchPlaceholder')"
+          class="input w-full pl-10 pr-10"
+          @keyup.enter="handleSearch"
+        />
+        <svg
+          v-if="searchQuery"
+          class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 cursor-pointer"
+          :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          @click="clearSearch"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+        <svg
+          v-else
+          class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4"
+          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+      <!-- 状态筛选下拉框 -->
+      <div class="relative">
+        <select
+          v-model="statusFilter"
+          class="h-[38px] pl-3 pr-8 rounded-lg border-0 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer text-sm appearance-none"
+          :class="themeStore.isDark 
+            ? 'bg-gray-800 text-gray-300 ring-gray-700 hover:ring-gray-600' 
+            : 'bg-white text-gray-700 ring-gray-200 hover:ring-gray-300'"
+          @change="handleStatusChange"
+        >
+          <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
+            {{ t(opt.label) }}
+          </option>
+        </select>
+        <svg 
+          class="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none"
+          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+      <button class="btn-primary h-[38px] px-4" @click="handleSearch">
+        {{ t('admin.hosts.search') }}
+      </button>
+      <button 
+        v-if="searchQuery" 
+        class="btn-ghost h-[38px] px-4" 
+        @click="clearSearch"
+      >
+        {{ t('common.reset') }}
+      </button>
+      <button class="btn-ghost h-[38px] px-4" @click="toggleSort">
+        {{ t('instance.createdAt') }} {{ sortOrder === 'desc' ? '↓' : '↑' }}
+      </button>
+    </div>
+
+    <template v-if="!loading">
+      <!-- 空状态 -->
+      <div v-if="instances.length === 0" class="card p-12 text-center">
+        <svg
+          class="w-12 h-12 mx-auto mb-4"
+          :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+          fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+        </svg>
+        <p class="text-themed-secondary">{{ t('admin.hosts.noInstances') }}</p>
+      </div>
+
+      <!-- 批量操作栏 - 始终显示（有实例时） -->
+      <div
+        v-if="instances.length > 0"
+        class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 p-3 rounded-lg"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+      >
+        <span class="text-sm text-themed-secondary whitespace-nowrap">
+          {{ selectedCount > 0 ? t('admin.hosts.selectedCount', { count: selectedCount }) : t('admin.hosts.noInstanceSelected') }}
+        </span>
+        <div class="flex items-center gap-2 flex-wrap">
+          <button class="btn-ghost btn-sm" :disabled="selectedCount === 0" @click="selectedIds.clear(); selectedIds = new Set()">
+            {{ t('common.cancel') }}
+          </button>
+          <button
+            class="btn-secondary btn-sm"
+            :disabled="isSyncing || selectedCount === 0"
+            @click="batchSyncStatus"
+          >
+            <svg v-if="isSyncing" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            {{ isSyncing ? t('common.syncing') : t('admin.hosts.batchSyncStatus') }}
+          </button>
+          <button
+            class="btn-sm inline-flex items-center rounded-lg"
+            :class="selectedCount === 0 || isSuspending
+              ? (themeStore.isDark ? 'bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-gray-200 text-gray-400 cursor-not-allowed')
+              : (themeStore.isDark ? 'bg-orange-600 hover:bg-orange-700 text-white' : 'bg-orange-500 hover:bg-orange-600 text-white')"
+            :disabled="isSuspending || selectedCount === 0"
+            @click="openBatchSuspendModal"
+          >
+            <svg v-if="isSuspending" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+            </svg>
+            {{ t('admin.hosts.batchSuspend') }}
+          </button>
+          <button
+            class="btn-sm inline-flex items-center rounded-lg"
+            :class="selectedCount === 0 || isUnsuspending
+              ? (themeStore.isDark ? 'bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-gray-200 text-gray-400 cursor-not-allowed')
+              : (themeStore.isDark ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-500 hover:bg-green-600 text-white')"
+            :disabled="isUnsuspending || selectedCount === 0"
+            @click="confirmBatchUnsuspend"
+          >
+            <svg v-if="isUnsuspending" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            {{ t('admin.hosts.batchUnsuspend') }}
+          </button>
+          <button
+            class="btn-secondary btn-sm"
+            :disabled="selectedCount === 0"
+            @click="openBatchConfigForSelection"
+          >
+            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            {{ t('host.batchConfig.button') }}
+          </button>
+          <button
+            class="btn-sm inline-flex items-center rounded-lg"
+            :class="[
+              selectedCount === 0
+                ? (themeStore.isDark ? 'bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-gray-200 text-gray-400 cursor-not-allowed')
+                : (themeStore.isDark ? 'bg-indigo-600 hover:bg-indigo-700 text-white' : 'bg-indigo-500 hover:bg-indigo-600 text-white')
+            ]"
+            :disabled="selectedCount === 0"
+            :title="selectedCount === 0 ? t('host.migrate.noInstancesSelected') : ''"
+            @click="selectedCount > 0 && (showMigrateModal = true)"
+          >
+            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+            </svg>
+            {{ t('host.migrate.button') }}
+          </button>
+          <button
+            class="btn-sm inline-flex items-center rounded-lg"
+            :class="[
+              selectedPaidCount === 0
+                ? (themeStore.isDark ? 'bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-gray-200 text-gray-400 cursor-not-allowed')
+                : (themeStore.isDark ? 'bg-teal-600 hover:bg-teal-700 text-white' : 'bg-teal-500 hover:bg-teal-600 text-white')
+            ]"
+            :disabled="isGifting || selectedPaidCount === 0"
+            :title="selectedPaidCount === 0 ? t('host.giftDays.noPaidInstances') : ''"
+            @click="openGiftDaysModal"
+          >
+            <svg v-if="isGifting" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+            </svg>
+            {{ t('host.giftDays.button') }}
+          </button>
+          <button
+            class="btn-secondary btn-sm"
+            :disabled="selectedCount === 0"
+            @click="openNotifyModal"
+          >
+            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            {{ t('host.notify.sendToUsers') }}
+          </button>
+          <button
+            class="btn-danger btn-sm"
+            :disabled="selectedCount === 0"
+            @click="openBatchDeleteModal"
+          >
+            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+            {{ t('admin.hosts.batchDelete') }}
+          </button>
+        </div>
+      </div>
+
+      <HostInstancesList
+        :instances="instances"
+        :selected-ids="selectedIds"
+        :is-all-selected="isAllSelected"
+        :is-partial-selected="isPartialSelected"
+        :expanded-instance-id="expandedInstanceId"
+        :detail-configs="detailConfigs"
+        :detail-config-errors="detailConfigErrors"
+        :detail-loading-ids="detailLoadingIds"
+        :syncing-instance-ids="syncingInstanceIds"
+        :swap-action-loading-ids="swapActionLoadingIds"
+        :resetting-traffic-id="resettingTrafficId"
+        :recreate-loading="recreateLoading"
+        :recreate-target-id="recreateTarget?.id ?? null"
+        :is-dark="themeStore.isDark"
+        :get-paid-icon-type="getPaidIconType"
+        :get-status-info="getStatusInfo"
+        :format-memory="formatMemory"
+        :format-disk="formatDisk"
+        :get-display-ip="getDisplayIp"
+        :can-recreate-instance="canRecreateInstance"
+        :is-instance-expanded="isInstanceExpanded"
+        :is-detail-loading="isDetailLoading"
+        :is-instance-syncing="isInstanceSyncing"
+        :is-swap-action-loading="isSwapActionLoading"
+        :get-detail-config="getDetailConfig"
+        :format-money="formatMoney"
+        :format-date-time="formatDateTime"
+        :format-boolean="formatBoolean"
+        :format-bandwidth="formatBandwidth"
+        :format-swap-size="formatSwapSize"
+        :get-instance-type-label="getInstanceTypeLabel"
+        :get-network-mode-label="getNetworkModeLabel"
+        :get-expiry-value="getExpiryValue"
+        :get-suspend-reason="getSuspendReason"
+        :get-traffic-summary="getTrafficSummary"
+        :get-traffic-percentage="getTrafficPercentage"
+        :get-traffic-bar-class="getTrafficBarClass"
+        :get-summary-meta="getSummaryMeta"
+        :get-quota-items="getQuotaItems"
+        :format-quota-value="formatQuotaValue"
+        :can-toggle-swap="canToggleSwap"
+        :get-swap-display="getSwapDisplay"
+        :get-expiry-summary="getExpirySummary"
+        @toggle-select="toggleSelect"
+        @toggle-select-all="toggleSelectAll"
+        @toggle-expand="(instance) => { void toggleExpandInstance(instance as Instance) }"
+        @retry-detail="(id) => { void loadInstanceDetailConfig(id, true) }"
+        @sync-instance="(instance) => { void syncSingleInstance(instance as Instance) }"
+        @toggle-swap="(instance) => { void toggleInstanceSwap(instance as Instance) }"
+        @open-single-config="openSingleConfigModal"
+        @open-price="openPriceModal"
+        @open-reset-traffic="openResetTrafficModal"
+        @open-recreate="(instance) => { void openRecreateModal(instance as Instance) }"
+        @open-delete="openSingleDeleteModal"
+        @open-detail="goToInstance"
+      />
+
+      <!-- 分页 -->
+      <div 
+        v-if="total > 0" 
+        class="flex items-center justify-between px-4 py-3 border-t"
+        :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+            {{ t('admin.users.totalRecords', { count: total }) }}
+          </span>
+          <select
+            v-model="pageSize"
+            class="text-sm rounded-md border-0 py-1 pl-2 pr-7 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer"
+            :class="themeStore.isDark 
+              ? 'bg-gray-800 text-gray-300 ring-gray-700' 
+              : 'bg-gray-50 text-gray-700 ring-gray-200'"
+            @change="handlePageSizeChange"
+          >
+            <option :value="10">10 / {{ t('common.page') }}</option>
+            <option :value="30">30 / {{ t('common.page') }}</option>
+            <option :value="50">50 / {{ t('common.page') }}</option>
+            <option :value="100">100 / {{ t('common.page') }}</option>
+          </select>
+        </div>
+        <div v-if="totalPages > 1" class="flex items-center gap-1">
+          <button
+            :disabled="page <= 1"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              page <= 1 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="page--; loadInstances()"
+          >
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div 
+            class="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium"
+            :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+          >
+            <span>{{ page }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">/</span>
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ totalPages }}</span>
+          </div>
+          <button
+            :disabled="page >= totalPages"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              page >= totalPages 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="page++; loadInstances()"
+          >
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- 批量删除确认弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showDeleteModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showDeleteModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title text-error">{{ t('admin.hosts.batchDeleteTitle') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showDeleteModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-red-500/10' : 'bg-red-50'">
+                  <p class="text-sm text-error">{{ t('admin.hosts.batchDeleteWarning') }}</p>
+                </div>
+                <p class="text-sm text-themed-secondary">
+                  {{ t('admin.hosts.batchDeleteConfirm', { count: effectiveDeleteCount }) }}
+                </p>
+                  
+                <!-- 退款提示区域 -->
+                <div v-if="deletePreviewLoading" class="flex items-center justify-center py-4">
+                  <svg class="w-5 h-5 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  <span class="ml-2 text-sm text-themed-muted">{{ t('common.loading') }}</span>
+                </div>
+                <div v-else-if="deletePreview && deletePreview.totalRefundAmount > 0" class="space-y-3">
+                  <!-- 退款警告 -->
+                  <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-orange-500/10' : 'bg-orange-50'">
+                    <p class="text-sm text-orange-600 dark:text-orange-400">
+                      {{ t('admin.hosts.batchDeleteRefundWarning') }}
+                    </p>
+                  </div>
+                  <!-- 退款明细表格 -->
+                  <div class="max-h-40 overflow-y-auto">
+                    <table class="w-full text-sm">
+                      <thead class="text-themed-muted text-xs">
+                        <tr>
+                          <th class="text-left py-1">{{ t('admin.hosts.instanceName') }}</th>
+                          <th class="text-left py-1">{{ t('admin.hosts.instanceUser') }}</th>
+                          <th class="text-right py-1">{{ t('admin.hosts.refundAmount') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="item in deletePreview.instances.filter(i => i.isPaid && !i.isOwnInstance && i.refundAmount > 0)" :key="item.id" class="border-t border-themed-light">
+                          <td class="py-1.5 text-themed">{{ item.name }}</td>
+                          <td class="py-1.5 text-themed-secondary">{{ item.username }}</td>
+                          <td class="py-1.5 text-right text-orange-600 dark:text-orange-400">¥{{ item.refundAmount.toFixed(2) }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!-- 总退款金额 -->
+                  <div class="flex justify-between items-center pt-2 border-t border-themed-light">
+                    <span class="text-sm font-medium text-themed">{{ t('admin.hosts.batchDeleteRefundTotal') }}</span>
+                    <span class="text-base font-bold text-orange-600 dark:text-orange-400">¥{{ deletePreview.totalRefundAmount.toFixed(2) }}</span>
+                  </div>
+                </div>
+                  
+                <!-- 删除原因输入框 -->
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('admin.hosts.deleteReason') }}</label>
+                  <textarea
+                    v-model="deleteReason"
+                    rows="3"
+                    maxlength="500"
+                    :placeholder="t('admin.hosts.deleteReasonPlaceholder')"
+                    class="input w-full resize-none"
+                  />
+                  <p class="mt-1 text-xs text-themed-muted">{{ t('admin.hosts.deleteReasonHint') }}</p>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" :disabled="isDeleting" @click="showDeleteModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  class="btn-warning"
+                  :disabled="isDeleting"
+                  @click="confirmBatchDelete(true)"
+                >
+                  <svg v-if="deletingMode === 'database'" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ deletingMode === 'database' ? t('common.loading') : t('admin.hosts.databaseOnlyDelete') }}
+                </button>
+                <button
+                  class="btn-danger"
+                  :disabled="isDeleting"
+                  @click="confirmBatchDelete(false)"
+                >
+                  <svg v-if="deletingMode === 'full'" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ deletingMode === 'full' ? t('common.loading') : t('admin.hosts.confirmBatchDelete') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 批量封停确认弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showSuspendModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showSuspendModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title text-orange-500">{{ t('admin.hosts.batchSuspendTitle') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showSuspendModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-orange-500/10' : 'bg-orange-50'">
+                  <p class="text-sm" :class="themeStore.isDark ? 'text-orange-400' : 'text-orange-600'">{{ t('admin.hosts.batchSuspendWarning') }}</p>
+                </div>
+                <p class="text-sm text-themed-secondary">
+                  {{ t('admin.hosts.batchSuspendConfirm', { count: selectedCount }) }}
+                </p>
+                <!-- 封停原因输入框 -->
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('admin.hosts.suspendReason') }}</label>
+                  <textarea
+                    v-model="suspendReason"
+                    rows="3"
+                    maxlength="500"
+                    :placeholder="t('admin.hosts.suspendReasonPlaceholder')"
+                    class="input w-full resize-none"
+                  />
+                  <p class="mt-1 text-xs text-themed-muted">{{ suspendReason.length }}/500</p>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" :disabled="isSuspending" @click="showSuspendModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  :disabled="isSuspending"
+                  class="text-white"
+                  :class="themeStore.isDark ? 'bg-orange-600 hover:bg-orange-700 px-4 py-2 rounded-lg' : 'bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg'"
+                  @click="confirmBatchSuspend"
+                >
+                  <svg v-if="isSuspending" class="w-4 h-4 mr-1 inline animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ isSuspending ? t('common.loading') : t('admin.hosts.confirmBatchSuspend') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 批量赠送时长弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showGiftDaysModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showGiftDaysModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title text-teal-500">{{ t('host.giftDays.title') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showGiftDaysModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-teal-500/10' : 'bg-teal-50'">
+                  <p class="text-sm" :class="themeStore.isDark ? 'text-teal-400' : 'text-teal-600'">{{ t('host.giftDays.hint') }}</p>
+                </div>
+                <p class="text-sm text-themed-secondary">
+                  {{ t('host.giftDays.confirm', { count: selectedPaidCount }) }}
+                </p>
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('host.giftDays.daysLabel') }}</label>
+                  <input
+                    v-model.number="giftDays"
+                    type="number"
+                    min="1"
+                    max="365"
+                    class="input w-full"
+                  />
+                  <p class="mt-1 text-xs text-themed-muted">{{ t('host.giftDays.daysRange') }}</p>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" :disabled="isGifting" @click="showGiftDaysModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  :disabled="isGifting || giftDays < 1 || giftDays > 365"
+                  class="text-white"
+                  :class="themeStore.isDark ? 'bg-teal-600 hover:bg-teal-700 px-4 py-2 rounded-lg' : 'bg-teal-500 hover:bg-teal-600 px-4 py-2 rounded-lg'"
+                  @click="confirmGiftDays"
+                >
+                  <svg v-if="isGifting" class="w-4 h-4 mr-1 inline animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ isGifting ? t('common.loading') : t('host.giftDays.confirmButton') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 发送通知弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showNotifyModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="handleCloseNotifyModal"></div>
+            <div class="modal-content max-w-lg">
+              <div class="modal-header">
+                <h3 class="modal-title">{{ t('host.notify.title') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="handleCloseNotifyModal">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="rounded-xl border px-4 py-3" :class="themeStore.isDark ? 'border-blue-500/30 bg-blue-500/10' : 'border-blue-200 bg-blue-50'">
+                  <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-blue-200' : 'text-blue-800'">
+                    {{ t('host.notify.hintSelected', { count: selectedCount }) }}
+                  </p>
+                  <p class="mt-1 text-xs leading-5" :class="themeStore.isDark ? 'text-blue-300/80' : 'text-blue-700/80'">
+                    {{ t('host.notify.deliveryHint') }}
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('host.notify.messageTitle') }}</label>
+                  <input
+                    v-model="notifyTitle"
+                    type="text"
+                    maxlength="200"
+                    :placeholder="t('host.notify.titlePlaceholder')"
+                    class="input w-full"
+                  />
+                  <p class="mt-1 text-xs text-themed-muted">{{ notifyTitle.length }}/200</p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('host.notify.messageContent') }}</label>
+                  <textarea
+                    v-model="notifyContent"
+                    rows="5"
+                    maxlength="5000"
+                    :placeholder="t('host.notify.contentPlaceholder')"
+                    class="input w-full resize-none"
+                  />
+                  <p class="mt-1 text-xs text-themed-muted">{{ notifyContent.length }}/5000</p>
+                </div>
+                <label
+                  class="flex items-start gap-3 rounded-xl border px-4 py-3 transition-colors cursor-pointer"
+                  :class="notifySendEmail
+                    ? (themeStore.isDark ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-emerald-200 bg-emerald-50')
+                    : (themeStore.isDark ? 'border-gray-700 bg-gray-800/70 hover:border-gray-600' : 'border-gray-200 bg-gray-50 hover:border-gray-300')"
+                >
+                  <input
+                    v-model="notifySendEmail"
+                    type="checkbox"
+                    class="mt-1 h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
+                  />
+                  <div class="min-w-0">
+                    <p class="text-sm font-medium text-themed">{{ t('host.notify.sendEmail') }}</p>
+                    <p class="mt-1 text-xs leading-5 text-themed-muted">{{ t('host.notify.sendEmailHint') }}</p>
+                  </div>
+                </label>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" :disabled="isSendingNotify" @click="handleCloseNotifyModal">
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  class="btn-primary"
+                  :disabled="isSendingNotify || !notifyTitle.trim() || !notifyContent.trim()"
+                  @click="sendNotify"
+                >
+                  <svg v-if="isSendingNotify" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ isSendingNotify ? t('common.sending') : t('host.notify.send') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+
+
+      <!-- 修改续费价格弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showPriceModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showPriceModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title">{{ t('host.price.modalTitle') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showPriceModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-blue-500/10' : 'bg-blue-50'">
+                  <p class="text-sm" :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'">
+                    {{ t('host.price.hint', { instance: priceModalTarget?.name }) }}
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('host.price.currentPrice') }}</label>
+                  <p class="text-lg font-semibold text-themed">¥{{ priceModalTarget?.billingPrice ? Number(priceModalTarget.billingPrice).toFixed(2) : '0.00' }}/月</p>
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">{{ t('host.price.newPrice') }}</label>
+                  <div class="flex items-center gap-2">
+                    <span class="text-themed">¥</span>
+                    <input
+                      v-model.number="newPriceInput"
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      class="input flex-1"
+                      :placeholder="t('host.price.placeholder')"
+                    />
+                    <span class="text-themed-muted">/月</span>
+                  </div>
+                  <p class="mt-1 text-xs text-themed-muted">{{ t('host.price.effectHint') }}</p>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" :disabled="isUpdatingPrice" @click="showPriceModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  class="btn-primary"
+                  :disabled="isUpdatingPrice || newPriceInput < 0"
+                  @click="updateRenewalPrice"
+                >
+                  <svg v-if="isUpdatingPrice" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ isUpdatingPrice ? t('common.saving') : t('common.save') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 重置流量确认弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showResetTrafficModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showResetTrafficModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title">{{ t('admin.hosts.resetTrafficTitle') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showResetTrafficModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-amber-500/10' : 'bg-amber-50'">
+                  <p class="text-sm" :class="themeStore.isDark ? 'text-amber-300' : 'text-amber-700'">
+                    {{ t('admin.hosts.resetTrafficWarning') }}
+                  </p>
+                </div>
+                <p class="text-sm text-themed-secondary">
+                  {{ t('admin.hosts.resetTrafficDesc', { instance: resetTrafficTarget?.name }) }}
+                </p>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" :disabled="resettingTrafficId !== null" @click="showResetTrafficModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  class="btn-primary"
+                  :disabled="resettingTrafficId !== null"
+                  @click="confirmResetTraffic"
+                >
+                  <svg v-if="resettingTrafficId !== null" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ resettingTrafficId !== null ? t('common.processing') : t('common.confirm') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+    </template>
+  </div>
+
+  <!-- 批量修改配置弹窗 -->
+  <BatchConfigModal
+    v-model:visible="showBatchConfigModal"
+    :host-id="hostId"
+    :selected-ids="effectiveBatchConfigSelection"
+    :total-instance-count="total"
+    @success="handleBatchConfigSuccess"
+  />
+
+  <!-- 批量迁移实例弹窗 -->
+  <MigrateHostModal
+    v-model:visible="showMigrateModal"
+    :host-id="hostId"
+    :host-name="hostName"
+    :selected-ids="Array.from(selectedIds)"
+    :instances="instances"
+    @success="loadInstances"
+  />
+
+  <RecreateModal
+    :visible="showRecreateModal"
+    :loading="recreateLoading"
+    :available-images="availableImages"
+    :ssh-keys="sshKeys"
+    @update:visible="handleRecreateModalVisibleChange"
+    @submit="doRecreate"
+  />
+</template>
diff --git a/client/src/components/host/HostOpsTab.vue b/client/src/components/host/HostOpsTab.vue
new file mode 100644
index 0000000..6b38cf8
--- /dev/null
+++ b/client/src/components/host/HostOpsTab.vue
@@ -0,0 +1,2080 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import type { SshKey, SystemImage } from '@/types/api'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+
+defineOptions({
+  name: 'HostOpsTab'
+})
+
+interface Props {
+  hostId: number
+  hostName?: string
+}
+
+interface DiscoverManagedItem {
+  incusName: string
+  incusType: string
+  incusStatus: string
+  dbId: number
+  dbStatus: string
+  userId: number
+}
+
+interface DiscoverOrphanedItem {
+  incusName: string
+  incusType: string
+  incusStatus: string
+}
+
+interface DiscoverMissingItem {
+  dbId: number
+  dbName: string
+  incusId: string
+  dbStatus: string
+}
+
+interface DiscoverResult {
+  managed: DiscoverManagedItem[]
+  orphaned: DiscoverOrphanedItem[]
+  missing: DiscoverMissingItem[]
+  summary: {
+    totalIncus: number
+    totalDb: number
+    managedCount: number
+    orphanedCount: number
+    missingCount: number
+  }
+}
+
+interface BaselineSyncResult {
+  message: string
+  resources: {
+    cpuUsed: number
+    memoryUsed: number
+    diskUsed: number
+  }
+  instanceSync: {
+    total: number
+    synced: number
+    ipChanged: number
+  }
+}
+
+interface NetworkRepairRow {
+  id: number
+  name: string
+  success: boolean
+  statusChanged?: boolean
+  oldStatus?: string
+  newStatus?: string
+  ipv4Changed?: boolean
+  oldIpv4?: string | null
+  newIpv4?: string | null
+  ipv6Changed?: boolean
+  oldIpv6?: string | null
+  newIpv6?: string | null
+  error?: string
+}
+
+interface NetworkRepairResult {
+  message: string
+  results: NetworkRepairRow[]
+  summary: {
+    total: number
+    success: number
+    failed: number
+    changed: number
+  }
+}
+
+interface InstanceOpsPreview {
+  instanceId: number
+  instanceName: string
+  incusId: string
+  instanceStatus: string
+  hostName: string
+  hostId: number
+  imageAlias?: string | null
+  canSync: boolean
+  canRestart: boolean
+  canForceRestart: boolean
+  canRebuild: boolean
+  canRecreate: boolean
+  activeTask?: {
+    id: number
+    taskType: string
+    status: string
+  } | null
+  risk: {
+    status: string
+    isStopped: boolean
+    hasActiveTask: boolean
+    suggestedAction: 'rebuild' | 'recreate' | 'sync' | 'restart' | 'none'
+    notes: string[]
+  }
+}
+
+interface InstanceOpsActionResult {
+  success?: boolean
+  message?: string
+  taskId?: number
+  status?: string
+  statusChanged?: boolean
+  from?: string
+  to?: string
+  currentStatus?: string
+  ipv4Changed?: boolean
+  oldIpv4?: string | null
+  newIpv4?: string | null
+  ipv6Changed?: boolean
+  oldIpv6?: string | null
+  newIpv6?: string | null
+}
+
+interface AvailableInitCommand {
+  id: number
+  name: string
+  commandLineCount: number
+  distros: string[]
+  description: string | null
+}
+
+type AuditSeverity = 'info' | 'low' | 'medium' | 'high'
+
+interface InstanceAuditFinding {
+  id: string
+  severity: AuditSeverity
+  category: string
+  title: string
+  detail: string
+  targetType: 'process' | 'network' | 'startup' | 'capability'
+  ruleId?: string
+  ruleName?: string
+  ruleSource?: 'builtin' | 'custom'
+  matchedText?: string
+  recommendation?: string | null
+  pid?: number
+  evidence: string
+  ignored?: boolean
+  ignoreReason?: string | null
+}
+
+interface InstanceAuditProcess {
+  pid: number
+  ppid: number | null
+  user: string
+  stat: string
+  cpuPercent: number | null
+  memoryPercent: number | null
+  elapsed: string
+  command: string
+  args: string
+  raw: string
+  findings: string[]
+}
+
+interface InstanceAuditConnection {
+  protocol: string
+  state: string
+  local: string
+  peer: string
+  process: string | null
+  pid: number | null
+  raw: string
+}
+
+interface InstanceAuditStartupItem {
+  source: string
+  command: string
+  raw: string
+  findings: string[]
+}
+
+interface InstanceAuditResult {
+  success: boolean
+  scanId: number
+  scannedAt: string
+  capability: string
+  instance: {
+    id: number
+    name: string
+    incusId: string
+    type: string
+    status: string
+  }
+  summary: {
+    riskLevel: AuditSeverity
+    processCount: number
+    connectionCount: number
+    listeningCount: number
+    startupItemCount: number
+    findingCount: number
+  }
+  ignoredCount?: number
+  rules?: InstanceAuditRule[]
+  findings: InstanceAuditFinding[]
+  processes: InstanceAuditProcess[]
+  connections: InstanceAuditConnection[]
+  startupItems: InstanceAuditStartupItem[]
+  stderr?: string[]
+}
+
+interface InstanceAuditRule {
+  id: string | number
+  ruleId?: string
+  source: 'builtin' | 'custom'
+  scope?: 'builtin' | 'global' | 'host'
+  readOnly?: boolean
+  hostId?: number | null
+  overridden?: boolean
+  overrideId?: number | null
+  originalName?: string | null
+  originalSeverity?: AuditSeverity
+  originalCategory?: string | null
+  originalTargetTypes?: Array<'process' | 'network' | 'startup'>
+  originalMatchType?: 'contains' | 'regex' | 'exact'
+  originalPattern?: string | null
+  originalCaseSensitive?: boolean
+  originalRecommendation?: string | null
+  name: string
+  description?: string | null
+  severity: AuditSeverity
+  category: string
+  targetTypes: Array<'process' | 'network' | 'startup'>
+  matchType: 'contains' | 'regex' | 'exact'
+  pattern: string
+  caseSensitive: boolean
+  recommendation?: string | null
+  enabled: boolean
+}
+
+interface AuditRuleTemplate {
+  name: string
+  severity: AuditSeverity
+  category: string
+  targetTypes: Array<'process' | 'network' | 'startup'>
+  matchType: 'contains' | 'regex' | 'exact'
+  pattern: string
+  recommendation: string
+}
+
+interface InstanceAuditIgnore {
+  id: number
+  ruleId?: string | null
+  targetType?: string | null
+  matchText?: string | null
+  scope: string
+  reason?: string | null
+  enabled: boolean
+  expiresAt?: string | null
+}
+
+interface InstanceAuditHistory {
+  scans: Array<any>
+  actions: Array<any>
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+const activeOpsMenu = ref<'actions' | 'audit'>('actions')
+const loadingAction = ref<'discover' | 'baseline' | 'network' | 'preview' | 'instanceSync' | 'instanceRestart' | 'instanceDanger' | 'auditScan' | 'auditKill' | ''>('')
+const lastAction = ref<'discover' | 'baseline' | 'network' | 'preview' | 'instanceSync' | 'instanceRestart' | 'instanceDanger' | 'auditScan' | 'auditKill' | ''>('')
+const lastRunAt = ref<string>('')
+
+const discoverResult = ref<DiscoverResult | null>(null)
+const baselineResult = ref<BaselineSyncResult | null>(null)
+const networkResult = ref<NetworkRepairResult | null>(null)
+const previewResult = ref<InstanceOpsPreview | null>(null)
+const latestInstanceActionResult = ref<InstanceOpsActionResult | null>(null)
+const auditResult = ref<InstanceAuditResult | null>(null)
+const auditPanel = ref<'scan' | 'rules' | 'whitelist' | 'history'>('scan')
+const auditRules = ref<InstanceAuditRule[]>([])
+const auditIgnores = ref<InstanceAuditIgnore[]>([])
+const auditHistory = ref<InstanceAuditHistory>({ scans: [], actions: [] })
+const loadingAuditMeta = ref(false)
+const expandedAuditFindingIds = ref<string[]>([])
+
+const selectedManagedDbId = ref<number | null>(null)
+const selectedManaged = computed(() => {
+  if (!discoverResult.value || selectedManagedDbId.value === null) return null
+  return discoverResult.value.managed.find(item => item.dbId === selectedManagedDbId.value) || null
+})
+
+const dangerousAction = ref<'rebuild' | 'recreate'>('recreate')
+const selectedImageId = ref<number | null>(null)
+const selectedSshKeyId = ref<number | null>(null)
+const selectedCustomInitCommandIds = ref<number[]>([])
+const confirmationText = ref('')
+const riskAccepted = ref(false)
+const selectedAuditPid = ref<number | null>(null)
+const selectedAuditProcess = ref<InstanceAuditProcess | null>(null)
+const auditSignal = ref<'TERM' | 'KILL'>('TERM')
+const auditReason = ref('')
+const auditConfirmationText = ref('')
+const auditRuleForm = ref({
+  id: null as number | null,
+  builtinRuleId: '' as string,
+  scope: 'host' as 'host' | 'global',
+  name: '',
+  severity: 'medium' as AuditSeverity,
+  category: 'custom',
+  targetTypes: ['process'] as Array<'process' | 'network' | 'startup'>,
+  matchType: 'contains' as 'contains' | 'regex' | 'exact',
+  pattern: '',
+  caseSensitive: false,
+  recommendation: '',
+  enabled: true
+})
+const ignoreForm = ref({
+  scope: 'instance' as 'instance' | 'host',
+  ruleId: '',
+  targetType: '',
+  matchText: '',
+  reason: '',
+  expiresInDays: 30
+})
+const auditRuleTemplates: AuditRuleTemplate[] = [
+  {
+    name: '疑似代理核心进程',
+    severity: 'medium',
+    category: '代理/面板',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    pattern: '\\b(xray|v2ray|sing-box|trojan|hysteria2?|shadowsocks|gost)\\b',
+    recommendation: '请结合客户用途、节点政策和实际流量人工确认。'
+  },
+  {
+    name: '疑似挖矿进程',
+    severity: 'high',
+    category: '资源滥用',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    pattern: '\\b(xmrig|xmr-stak|cpuminer|minerd|ethminer|lolminer|nbminer)\\b',
+    recommendation: '请核对 CPU 占用和运行时间，确认违规后再处置。'
+  },
+  {
+    name: '疑似发包或扫描工具',
+    severity: 'high',
+    category: '网络滥用',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    pattern: '\\b(hping3?|nping|masscan|zmap|udp[-_]?flood|syn[-_]?flood)\\b',
+    recommendation: '请保留进程参数和连接证据，并核实是否有授权测试场景。'
+  },
+  {
+    name: '命中特定关键词',
+    severity: 'medium',
+    category: '自定义',
+    targetTypes: ['process'],
+    matchType: 'contains',
+    pattern: '请替换为需要匹配的关键词',
+    recommendation: '请结合实例用途和业务背景人工确认。'
+  }
+]
+
+// 镜像下拉数据
+const availableImages = ref<SystemImage[]>([])
+const loadingImages = ref(false)
+const availableSshKeys = ref<SshKey[]>([])
+const loadingSshKeys = ref(false)
+const availableInitCommands = ref<AvailableInitCommand[]>([])
+const loadingInitCommands = ref(false)
+
+// 二次确认弹窗
+const showDangerConfirmModal = ref(false)
+const dangerConfirmStep = ref(1) // 1 = 第一次确认, 2 = 第二次确认
+
+const hasResult = computed(() => {
+  return !!discoverResult.value || !!baselineResult.value || !!networkResult.value || !!previewResult.value || !!latestInstanceActionResult.value
+})
+
+const confirmationExpectedText = computed(() => previewResult.value?.incusId || '')
+
+// 当前选中镜像的 remoteAlias
+const selectedImage = computed(() => {
+  if (!selectedImageId.value) return null
+  return availableImages.value.find(img => img.id === selectedImageId.value) || null
+})
+
+const selectedImageDistro = computed(() => {
+  const alias = selectedImage.value?.remoteAlias || ''
+  if (!alias) return ''
+  return getImageDistroFromAlias(alias)
+})
+
+const selectedImageAlias = computed(() => {
+  return selectedImage.value?.remoteAlias || ''
+})
+
+const isDangerFormValid = computed(() => {
+  if (!previewResult.value) return false
+  if (!selectedImageId.value) return false
+  if (!riskAccepted.value) return false
+  return confirmationText.value.trim() === confirmationExpectedText.value
+})
+
+type OpsActionKey = 'discover' | 'baseline' | 'network' | 'preview' | 'instanceSync' | 'instanceRestart' | 'instanceDanger' | 'auditScan' | 'auditKill'
+
+// 精简镜像名称展示：只显示系统名，不显示 remoteAlias
+function simplifyImageLabel(image: SystemImage): string {
+  // 优先使用 name 字段
+  const raw = (image.name || image.remoteAlias || '').trim()
+  if (!raw) return `Image #${image.id}`
+  // 去除 remoteAlias 格式中的路径前缀（如 images:debian/12/cloud → Debian 12）
+  return raw
+    .replace(/\s*\(.*?\)\s*$/, '') // 去掉括号内容（如 "(images:debian/12/cloud)"）
+    .trim()
+}
+
+// 实例类型中文映射
+function localizeType(type: string): string {
+  if (type === 'container') return '容器'
+  if (type === 'virtual-machine') return '虚拟机'
+  return type
+}
+
+// 实例状态中文映射
+function localizeStatus(status: string): string {
+  const map: Record<string, string> = {
+    Running: '运行中',
+    Stopped: '已停止',
+    Frozen: '已冻结',
+    Error: '异常',
+    running: '运行中',
+    stopped: '已停止',
+    suspended: '已封停',
+    creating: '创建中',
+    error: '异常',
+    deleted: '已删除',
+  }
+  return map[status] || status
+}
+
+// 建议动作中文映射
+function localizeSuggestedAction(action: string): string {
+  const map: Record<string, string> = {
+    sync: '同步实例',
+    restart: '重启实例',
+    rebuild: '重装实例',
+    recreate: '重建实例',
+    none: '无需操作',
+  }
+  return map[action] || action
+}
+
+function touchLastRun(action: OpsActionKey) {
+  lastAction.value = action
+  lastRunAt.value = new Date().toLocaleString()
+}
+
+function resetDangerState() {
+  dangerousAction.value = 'recreate'
+  selectedImageId.value = null
+  selectedSshKeyId.value = null
+  selectedCustomInitCommandIds.value = []
+  confirmationText.value = ''
+  riskAccepted.value = false
+  showDangerConfirmModal.value = false
+  dangerConfirmStep.value = 1
+}
+
+function getImageDistroFromAlias(imageAlias: string): string {
+  const alias = imageAlias.toLowerCase()
+
+  if (alias.includes('ubuntu')) return 'ubuntu'
+  if (alias.includes('debian') || alias.includes('kali')) return 'debian'
+  if (alias.includes('alpine')) return 'alpine'
+  if (alias.includes('arch')) return 'arch'
+  if (alias.includes('opensuse') || alias.includes('suse') || alias.includes('tumbleweed') || alias.includes('leap')) return 'suse'
+  if (alias.includes('alma') || alias.includes('rocky') || alias.includes('oracle') || alias.includes('centos') || alias.includes('rhel') || alias.includes('fedora')) return 'rhel'
+
+  return 'other'
+}
+
+function toggleInitCommand(cmdId: number): void {
+  const next = [...selectedCustomInitCommandIds.value]
+  const index = next.indexOf(cmdId)
+  if (index >= 0) next.splice(index, 1)
+  else next.push(cmdId)
+  selectedCustomInitCommandIds.value = next
+}
+
+function getDistroName(distro: string): string {
+  const key = `extensions.initCommands.distroNames.${distro}`
+  const translated = t(key)
+  return translated !== key ? translated : distro
+}
+
+function formatValue(value: string | null | undefined) {
+  return value || '-'
+}
+
+function resultTitle() {
+  if (lastAction.value === 'discover') return t('admin.hosts.ops.resultInventory')
+  if (lastAction.value === 'baseline') return t('admin.hosts.ops.resultBaseline')
+  if (lastAction.value === 'network') return t('admin.hosts.ops.resultNetwork')
+  if (lastAction.value === 'preview') return t('admin.hosts.ops.resultPreview')
+  if (lastAction.value === 'instanceSync') return t('admin.hosts.ops.resultInstanceSync')
+  if (lastAction.value === 'instanceRestart') return t('admin.hosts.ops.resultInstanceRestart')
+  if (lastAction.value === 'instanceDanger') return t('admin.hosts.ops.resultDanger')
+  if (lastAction.value === 'auditScan') return '实例审查结果'
+  if (lastAction.value === 'auditKill') return '手动处置结果'
+  return t('admin.hosts.ops.sectionReport')
+}
+
+function localizeSeverity(severity: AuditSeverity): string {
+  const map: Record<AuditSeverity, string> = {
+    info: '信息',
+    low: '低',
+    medium: '中',
+    high: '高'
+  }
+  return map[severity] || severity
+}
+
+function severityClass(severity: AuditSeverity): string {
+  if (severity === 'high') return 'text-red-500'
+  if (severity === 'medium') return 'text-amber-500'
+  if (severity === 'low') return 'text-blue-500'
+  return 'text-themed-muted'
+}
+
+function localizeRuleSource(source?: string): string {
+  if (source === 'builtin') return '系统内置'
+  if (source === 'custom') return '自定义'
+  return '-'
+}
+
+function localizeRuleScope(scope?: string): string {
+  if (scope === 'global') return '管理员全局'
+  if (scope === 'host') return '当前节点'
+  if (scope === 'builtin') return '系统内置'
+  if (scope === 'instance') return '当前实例'
+  return scope || '-'
+}
+
+function localizeAuditCategory(category?: string): string {
+  const map: Record<string, string> = {
+    'network-abuse': '网络滥用',
+    'proxy-panel': '代理/面板',
+    'resource-abuse': '资源滥用',
+    'credential-attack': '凭据攻击',
+    'network-anomaly': '网络异常',
+    'resource-anomaly': '资源异常',
+    custom: '自定义'
+  }
+  return category ? (map[category] || category) : '-'
+}
+
+function localizeAuditMatchType(matchType?: string): string {
+  if (matchType === 'contains') return '包含关键词'
+  if (matchType === 'regex') return '正则表达式'
+  if (matchType === 'exact') return '精确匹配'
+  return matchType || '-'
+}
+
+function localizeAuditTarget(target?: string | null): string {
+  if (target === 'process') return '进程'
+  if (target === 'network') return '网络连接'
+  if (target === 'startup') return '启动项'
+  if (target === 'capability') return '执行能力'
+  return target || '全部'
+}
+
+function localizeAuditTargets(targets?: string[]): string {
+  if (!targets?.length) return '-'
+  return targets.map(target => localizeAuditTarget(target)).join('、')
+}
+
+const legacyFindingTextMap: Record<string, string> = {
+  'Packet generation tool detected': '疑似发包工具进程',
+  'Mass scanning tool detected': '疑似大规模扫描工具',
+  'Flood program name detected': '疑似 Flood/DDoS 程序',
+  'Proxy or panel process detected': '疑似代理面板程序',
+  'Proxy core process detected': '疑似代理核心进程',
+  'Mining process detected': '疑似挖矿进程',
+  'Credential attack tool detected': '疑似爆破/撞库工具',
+  'High UDP connection count': 'UDP 连接数量偏高',
+  'High CPU process': 'CPU 占用偏高的进程',
+  'Confirm the process owner and traffic purpose before taking manual action.': '请先确认进程归属、流量用途和客户业务背景，再决定是否手动处置。',
+  'Review whether the scan is authorized. Check network connections and customer intent.': '请核实扫描是否经过授权，并结合网络连接、工单或客户说明判断。',
+  'Treat as high risk. Capture evidence before any manual process stop.': '建议按高风险处理。手动停止前请先保留进程参数和连接证据。',
+  'Confirm whether the node policy allows this application.': '请确认当前节点规则是否允许此类应用，并结合客户业务说明判断。',
+  'Check the customer use case and host policy before manual disposal.': '处置前请核对客户用途、节点政策和实际流量，避免误伤正常服务。',
+  'Review CPU usage and suspend policy manually if the behavior violates terms.': '请结合 CPU 占用、运行时间和服务条款人工确认，违规后再执行处置。',
+  'Check outbound connections and account activity before taking manual action.': '请检查外连目标、登录尝试记录和客户说明，再决定是否手动处理。'
+}
+
+function localizeAuditText(text?: string | null): string {
+  if (!text) return '-'
+  return legacyFindingTextMap[text] || text
+}
+
+function localizeFindingDetail(detail?: string | null): string {
+  if (!detail) return '-'
+  const ruleMatch = detail.match(/^(.+) matched audit rule (.+)\.$/)
+  if (ruleMatch) {
+    const subject = ruleMatch[1]
+      .replace(/^Startup item from /, '启动项来源 ')
+      .replace(/^([A-Z]+ .+ -> .+)$/, '网络连接 $1')
+    return `${subject} 命中审查规则 ${ruleMatch[2]}。`
+  }
+  const udpMatch = detail.match(/^(\d+) UDP rows were returned by ss\/netstat during the scan\.$/)
+  if (udpMatch) return `本次扫描从 ss/netstat 返回 ${udpMatch[1]} 条 UDP 连接记录，请结合业务用途判断是否异常。`
+  const cpuMatch = detail.match(/^PID (\d+) is using ([\d.]+)% CPU\.$/)
+  if (cpuMatch) return `PID ${cpuMatch[1]} 当前 CPU 占用为 ${cpuMatch[2]}%。`
+  return detail
+}
+
+function localizeProcessFindings(findings: string[]): string {
+  return findings.map(item => localizeAuditText(item)).join('、')
+}
+
+function localizeAuditStatus(status?: string): string {
+  if (status === 'success') return '成功'
+  if (status === 'failed') return '失败'
+  return status || '-'
+}
+
+function localizeAuditActionType(actionType?: string): string {
+  if (actionType === 'kill_process') return '停止进程'
+  return actionType || '-'
+}
+
+function localizeAuditActionResult(result?: string): string {
+  if (result === 'success') return '成功'
+  if (result === 'failed') return '失败'
+  return result || '-'
+}
+
+function localizeAuditSignal(signal?: string | null): string {
+  if (signal === 'TERM') return '安全停止（TERM）'
+  if (signal === 'KILL') return '强制停止（KILL）'
+  return signal || '-'
+}
+
+function resetAuditRuleForm() {
+  auditRuleForm.value = {
+    id: null,
+    builtinRuleId: '',
+    scope: 'host',
+    name: '',
+    severity: 'medium',
+    category: 'custom',
+    targetTypes: ['process'],
+    matchType: 'contains',
+    pattern: '',
+    caseSensitive: false,
+    recommendation: '',
+    enabled: true
+  }
+}
+
+function fillAuditRuleForm(params: {
+  id?: number | null
+  builtinRuleId?: string
+  scope?: 'host' | 'global'
+  name: string
+  severity: AuditSeverity
+  category: string
+  targetTypes: Array<'process' | 'network' | 'startup'>
+  matchType: 'contains' | 'regex' | 'exact'
+  pattern: string
+  caseSensitive?: boolean
+  recommendation?: string | null
+  enabled?: boolean
+}) {
+  auditRuleForm.value = {
+    id: params.id ?? null,
+    builtinRuleId: params.builtinRuleId || '',
+    scope: params.scope || 'host',
+    name: localizeAuditText(params.name),
+    severity: params.severity,
+    category: params.category ? localizeAuditCategory(params.category) : '自定义',
+    targetTypes: [...params.targetTypes],
+    matchType: params.matchType,
+    pattern: params.pattern,
+    caseSensitive: Boolean(params.caseSensitive),
+    recommendation: params.recommendation ? localizeAuditText(params.recommendation) : '',
+    enabled: params.enabled ?? true
+  }
+  auditPanel.value = 'rules'
+}
+
+function editAuditRule(rule: InstanceAuditRule) {
+  if (rule.readOnly || rule.source !== 'custom') return
+  fillAuditRuleForm({
+    id: Number(rule.id),
+    scope: rule.scope === 'global' ? 'global' : 'host',
+    name: rule.name,
+    severity: rule.severity,
+    category: rule.category,
+    targetTypes: [...rule.targetTypes],
+    matchType: rule.matchType,
+    pattern: rule.pattern,
+    caseSensitive: rule.caseSensitive,
+    recommendation: rule.recommendation || '',
+    enabled: rule.enabled
+  })
+}
+
+function editBuiltinRuleOverride(rule: InstanceAuditRule) {
+  if (rule.source !== 'builtin') return
+  fillAuditRuleForm({
+    builtinRuleId: String(rule.id),
+    scope: 'host',
+    name: localizeAuditText(rule.name),
+    severity: rule.severity,
+    category: rule.category,
+    targetTypes: [...rule.targetTypes],
+    matchType: rule.matchType,
+    pattern: rule.pattern,
+    caseSensitive: rule.caseSensitive,
+    recommendation: rule.recommendation || '',
+    enabled: rule.enabled
+  })
+  toast.success('已载入本节点覆盖配置，保存后只影响当前节点')
+}
+
+function createRuleFromExisting(rule: InstanceAuditRule) {
+  fillAuditRuleForm({
+    name: localizeAuditText(rule.name),
+    severity: rule.severity,
+    category: rule.category,
+    targetTypes: [...rule.targetTypes],
+    matchType: rule.matchType,
+    pattern: rule.pattern,
+    caseSensitive: rule.caseSensitive,
+    recommendation: rule.recommendation || '',
+    enabled: true
+  })
+  toast.success('已填入规则编辑表单，调整后可另存为自定义规则')
+}
+
+async function resetBuiltinRuleOverride(rule: InstanceAuditRule) {
+  if (!props.hostId || rule.source !== 'builtin') return
+  loadingAuditMeta.value = true
+  try {
+    await api.hosts.opsAuditResetBuiltinRule(props.hostId, String(rule.id))
+    toast.success('已恢复系统默认规则')
+    if (auditRuleForm.value.builtinRuleId === String(rule.id)) resetAuditRuleForm()
+    await loadAuditRules()
+  } catch (err: any) {
+    toast.error('恢复系统默认失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+function applyAuditRuleTemplate(template: AuditRuleTemplate) {
+  fillAuditRuleForm({
+    name: template.name,
+    severity: template.severity,
+    category: template.category,
+    targetTypes: [...template.targetTypes],
+    matchType: template.matchType,
+    pattern: template.pattern,
+    recommendation: template.recommendation,
+    enabled: true
+  })
+}
+
+function isAuditEvidenceExpanded(id: string): boolean {
+  return expandedAuditFindingIds.value.includes(id)
+}
+
+function toggleAuditEvidence(id: string) {
+  const next = new Set(expandedAuditFindingIds.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expandedAuditFindingIds.value = Array.from(next)
+}
+
+function toggleRuleTarget(target: 'process' | 'network' | 'startup') {
+  const next = [...auditRuleForm.value.targetTypes]
+  const index = next.indexOf(target)
+  if (index >= 0) next.splice(index, 1)
+  else next.push(target)
+  auditRuleForm.value.targetTypes = next.length ? next : ['process']
+}
+
+function resetAuditActionState() {
+  selectedAuditPid.value = null
+  selectedAuditProcess.value = null
+  auditSignal.value = 'TERM'
+  auditReason.value = ''
+  auditConfirmationText.value = ''
+}
+
+function selectAuditProcess(process: InstanceAuditProcess) {
+  selectedAuditPid.value = process.pid
+  selectedAuditProcess.value = process
+  auditConfirmationText.value = ''
+}
+
+async function loadImages() {
+  if (!props.hostId) return
+  loadingImages.value = true
+  try {
+    const res = await api.images.getSystemImages(undefined, undefined, props.hostId)
+    availableImages.value = res.images.filter(img => !img.hidden)
+    // 若已有 previewResult 的 imageAlias，尝试自动匹配
+    if (previewResult.value?.imageAlias && !selectedImageId.value) {
+      const matched = availableImages.value.find(img => img.remoteAlias === previewResult.value!.imageAlias)
+      if (matched) selectedImageId.value = matched.id
+    }
+  } catch {
+    // 静默处理，用户可手动选择
+  } finally {
+    loadingImages.value = false
+  }
+}
+
+async function loadOperationSshKeys() {
+  if (!props.hostId || !selectedManaged.value) {
+    availableSshKeys.value = []
+    return
+  }
+  loadingSshKeys.value = true
+  try {
+    const res = await api.hosts.opsInstanceSshKeys(props.hostId, selectedManaged.value.dbId)
+    availableSshKeys.value = res.keys || []
+    if (selectedSshKeyId.value && !availableSshKeys.value.some(key => key.id === selectedSshKeyId.value)) {
+      selectedSshKeyId.value = null
+    }
+  } catch {
+    availableSshKeys.value = []
+  } finally {
+    loadingSshKeys.value = false
+  }
+}
+
+async function loadOperationInitCommands() {
+  if (!props.hostId || !selectedManaged.value || !selectedImageDistro.value) {
+    availableInitCommands.value = []
+    selectedCustomInitCommandIds.value = []
+    return
+  }
+  loadingInitCommands.value = true
+  try {
+    const res = await api.hosts.opsInstanceInitCommands(props.hostId, selectedManaged.value.dbId, selectedImageDistro.value)
+    availableInitCommands.value = res.commands || []
+    const availableIds = new Set(availableInitCommands.value.map(cmd => cmd.id))
+    selectedCustomInitCommandIds.value = selectedCustomInitCommandIds.value.filter(id => availableIds.has(id))
+  } catch {
+    availableInitCommands.value = []
+    selectedCustomInitCommandIds.value = []
+  } finally {
+    loadingInitCommands.value = false
+  }
+}
+
+watch(selectedImageId, () => {
+  if (!previewResult.value) return
+  void loadOperationInitCommands()
+})
+
+watch(selectedManagedDbId, () => {
+  auditResult.value = null
+  expandedAuditFindingIds.value = []
+  resetAuditActionState()
+  if (auditPanel.value === 'whitelist') void loadAuditIgnores()
+  if (auditPanel.value === 'history') void loadAuditHistory()
+})
+
+watch(auditPanel, (panel) => {
+  if (panel === 'rules') void loadAuditRules()
+  if (panel === 'whitelist') void loadAuditIgnores()
+  if (panel === 'history') void loadAuditHistory()
+})
+
+watch(activeOpsMenu, (menu) => {
+  if (menu === 'audit' && auditPanel.value === 'rules') void loadAuditRules()
+})
+
+async function runDiscover() {
+  if (!props.hostId || loadingAction.value) return
+  loadingAction.value = 'discover'
+  try {
+    const result = await api.hosts.opsDiscover(props.hostId)
+    discoverResult.value = result
+    if (!selectedManagedDbId.value && result.managed.length > 0) {
+      selectedManagedDbId.value = result.managed[0].dbId
+    }
+    touchLastRun('discover')
+    toast.success(t('admin.hosts.ops.runSuccess'))
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function runBaselineSync() {
+  if (!props.hostId || loadingAction.value) return
+  loadingAction.value = 'baseline'
+  try {
+    baselineResult.value = await api.hosts.opsBaselineSync(props.hostId)
+    touchLastRun('baseline')
+    toast.success(t('admin.hosts.ops.runSuccess'))
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function runNetworkRepair() {
+  if (!props.hostId || loadingAction.value) return
+  loadingAction.value = 'network'
+  try {
+    networkResult.value = await api.hosts.opsNetworkRepair(props.hostId)
+    touchLastRun('network')
+    toast.success(t('admin.hosts.ops.runSuccess'))
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function refreshLastResult() {
+  if (lastAction.value === 'discover') await runDiscover()
+  else if (lastAction.value === 'baseline') await runBaselineSync()
+  else if (lastAction.value === 'network') await runNetworkRepair()
+  else if (lastAction.value === 'preview') await loadPreview()
+  else if (lastAction.value === 'auditScan') await runAuditScan()
+}
+
+async function loadPreview() {
+  if (!props.hostId || !selectedManaged.value || loadingAction.value) return
+  loadingAction.value = 'preview'
+  try {
+    previewResult.value = await api.hosts.opsInstancePreview(props.hostId, selectedManaged.value.dbId)
+    latestInstanceActionResult.value = null
+    resetDangerState()
+    touchLastRun('preview')
+    // 加载当前节点可用镜像
+    await loadImages()
+    await Promise.all([loadOperationSshKeys(), loadOperationInitCommands()])
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function runInstanceSync() {
+  if (!props.hostId || !selectedManaged.value || loadingAction.value) return
+  loadingAction.value = 'instanceSync'
+  try {
+    latestInstanceActionResult.value = await api.hosts.opsInstanceSync(props.hostId, selectedManaged.value.dbId)
+    touchLastRun('instanceSync')
+    toast.success(t('admin.hosts.ops.runSuccess'))
+    loadingAction.value = ''
+    await loadPreview()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function runInstanceRestart(force: boolean) {
+  if (!props.hostId || !selectedManaged.value || loadingAction.value) return
+  loadingAction.value = 'instanceRestart'
+  try {
+    latestInstanceActionResult.value = await api.hosts.opsInstanceRestart(props.hostId, selectedManaged.value.dbId, force)
+    touchLastRun('instanceRestart')
+    toast.success(t('admin.hosts.ops.runSuccess'))
+    loadingAction.value = ''
+    await loadPreview()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+// 第一步：点击"执行高风险动作"弹出二次确认弹窗
+function openDangerConfirm() {
+  if (!isDangerFormValid.value) return
+  dangerConfirmStep.value = 1
+  showDangerConfirmModal.value = true
+}
+
+// 第二步：第一次确认后进入第二次确认
+function advanceDangerConfirm() {
+  dangerConfirmStep.value = 2
+}
+
+// 第三步：第二次确认后真正执行
+async function executeDangerConfirmed() {
+  showDangerConfirmModal.value = false
+  dangerConfirmStep.value = 1
+  await runDangerousAction()
+}
+
+function cancelDangerConfirm() {
+  showDangerConfirmModal.value = false
+  dangerConfirmStep.value = 1
+}
+
+async function runDangerousAction() {
+  if (!props.hostId || !selectedManaged.value || !previewResult.value || loadingAction.value || !isDangerFormValid.value) return
+  loadingAction.value = 'instanceDanger'
+  try {
+    latestInstanceActionResult.value = await api.hosts.opsInstanceDangerousAction(props.hostId, selectedManaged.value.dbId, {
+      action: dangerousAction.value,
+      imageAlias: selectedImageAlias.value,
+      sshKeyId: selectedSshKeyId.value || undefined,
+      customInitCommandIds: selectedCustomInitCommandIds.value.length > 0 ? selectedCustomInitCommandIds.value : undefined,
+      confirmationText: confirmationText.value.trim(),
+      riskConfirmed: riskAccepted.value
+    })
+    touchLastRun('instanceDanger')
+    toast.success(t('admin.hosts.ops.runSuccess'))
+    resetDangerState()
+    loadingAction.value = ''
+    await runDiscover()
+    await loadPreview()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.ops.runFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function ensureInventoryForAudit() {
+  if (discoverResult.value) return
+  await runDiscover()
+}
+
+async function loadAuditRules() {
+  if (!props.hostId) return
+  loadingAuditMeta.value = true
+  try {
+    const res = await api.hosts.opsAuditRules(props.hostId)
+    auditRules.value = [...(res.builtin || []), ...(res.custom || [])]
+  } catch (err: any) {
+    toast.error('加载审查规则失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function saveAuditRule() {
+  if (!props.hostId || !auditRuleForm.value.name.trim() || !auditRuleForm.value.pattern.trim()) {
+    toast.error('请填写规则名称和匹配内容')
+    return
+  }
+  loadingAuditMeta.value = true
+  const payload = {
+    scope: auditRuleForm.value.builtinRuleId ? 'host' : auditRuleForm.value.scope,
+    name: auditRuleForm.value.name.trim(),
+    severity: auditRuleForm.value.severity,
+    category: auditRuleForm.value.category.trim() || 'custom',
+    targetTypes: auditRuleForm.value.targetTypes,
+    matchType: auditRuleForm.value.matchType,
+    pattern: auditRuleForm.value.pattern.trim(),
+    caseSensitive: auditRuleForm.value.caseSensitive,
+    recommendation: auditRuleForm.value.recommendation.trim() || undefined,
+    enabled: auditRuleForm.value.enabled
+  }
+  try {
+    if (auditRuleForm.value.builtinRuleId) await api.hosts.opsAuditUpdateBuiltinRule(props.hostId, auditRuleForm.value.builtinRuleId, payload)
+    else if (auditRuleForm.value.id) await api.hosts.opsAuditUpdateRule(props.hostId, auditRuleForm.value.id, payload)
+    else await api.hosts.opsAuditCreateRule(props.hostId, payload)
+    toast.success(auditRuleForm.value.builtinRuleId ? '本节点内置规则配置已保存' : '审查规则已保存')
+    resetAuditRuleForm()
+    await loadAuditRules()
+  } catch (err: any) {
+    toast.error('保存审查规则失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function deleteAuditRule(rule: InstanceAuditRule) {
+  if (!props.hostId || rule.readOnly || rule.source !== 'custom') return
+  loadingAuditMeta.value = true
+  try {
+    await api.hosts.opsAuditDeleteRule(props.hostId, Number(rule.id))
+    toast.success('审查规则已删除')
+    if (auditRuleForm.value.id === Number(rule.id)) resetAuditRuleForm()
+    await loadAuditRules()
+  } catch (err: any) {
+    toast.error('删除审查规则失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function loadAuditIgnores() {
+  if (!props.hostId) return
+  loadingAuditMeta.value = true
+  try {
+    const res = await api.hosts.opsAuditIgnores(props.hostId, selectedManaged.value ? { instanceId: selectedManaged.value.dbId } : undefined)
+    auditIgnores.value = res.ignores || []
+  } catch (err: any) {
+    toast.error('加载白名单失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function addIgnoreFromFinding(finding?: InstanceAuditFinding) {
+  if (finding) {
+    ignoreForm.value.ruleId = finding.ruleId || ''
+    ignoreForm.value.targetType = finding.targetType || ''
+    ignoreForm.value.matchText = finding.matchedText || ''
+    ignoreForm.value.reason = finding.ignoreReason || ''
+    auditPanel.value = 'whitelist'
+  }
+}
+
+async function saveAuditIgnore() {
+  if (!props.hostId) return
+  const scope = ignoreForm.value.scope
+  if (scope === 'instance' && !selectedManaged.value) {
+    toast.error('请先选择实例')
+    return
+  }
+  if (!ignoreForm.value.ruleId.trim() && !ignoreForm.value.matchText.trim()) {
+    toast.error('请填写规则编号或匹配文本')
+    return
+  }
+  loadingAuditMeta.value = true
+  try {
+    await api.hosts.opsAuditCreateIgnore(props.hostId, {
+      scope,
+      instanceId: scope === 'instance' ? selectedManaged.value?.dbId : undefined,
+      ruleId: ignoreForm.value.ruleId.trim() || undefined,
+      targetType: ignoreForm.value.targetType || undefined,
+      matchText: ignoreForm.value.matchText.trim() || undefined,
+      reason: ignoreForm.value.reason.trim() || undefined,
+      expiresInDays: ignoreForm.value.expiresInDays || undefined
+    })
+    toast.success('白名单已保存')
+    ignoreForm.value = { scope: 'instance', ruleId: '', targetType: '', matchText: '', reason: '', expiresInDays: 30 }
+    await loadAuditIgnores()
+  } catch (err: any) {
+    toast.error('保存白名单失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function deleteAuditIgnore(ignore: InstanceAuditIgnore) {
+  if (!props.hostId) return
+  loadingAuditMeta.value = true
+  try {
+    await api.hosts.opsAuditDeleteIgnore(props.hostId, ignore.id)
+    toast.success('白名单已停用')
+    await loadAuditIgnores()
+  } catch (err: any) {
+    toast.error('停用白名单失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function loadAuditHistory() {
+  if (!props.hostId) return
+  loadingAuditMeta.value = true
+  try {
+    auditHistory.value = await api.hosts.opsAuditHistory(props.hostId, selectedManaged.value ? { instanceId: selectedManaged.value.dbId, pageSize: 20 } : { pageSize: 20 })
+  } catch (err: any) {
+    toast.error('加载审查历史失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAuditMeta.value = false
+  }
+}
+
+async function runAuditScan() {
+  if (!props.hostId || loadingAction.value) return
+  if (!selectedManaged.value) {
+    await ensureInventoryForAudit()
+    if (!selectedManaged.value) {
+      toast.error('请先盘点并选择一个已纳管实例')
+      return
+    }
+  }
+
+  loadingAction.value = 'auditScan'
+  try {
+    auditResult.value = await api.hosts.opsInstanceAuditScan(props.hostId, selectedManaged.value.dbId)
+    expandedAuditFindingIds.value = []
+    resetAuditActionState()
+    touchLastRun('auditScan')
+    void loadAuditHistory()
+    toast.success('实例审查扫描完成')
+  } catch (err: any) {
+    toast.error('实例审查失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+
+async function runAuditKillProcess() {
+  if (!props.hostId || !selectedManaged.value || !selectedAuditPid.value || loadingAction.value) return
+  if (!auditReason.value.trim()) {
+    toast.error('请填写处置原因')
+    return
+  }
+  if (auditConfirmationText.value.trim() !== selectedManaged.value.incusName) {
+    toast.error('确认文本不匹配实例名称')
+    return
+  }
+
+  loadingAction.value = 'auditKill'
+  try {
+    await api.hosts.opsInstanceAuditKillProcess(props.hostId, selectedManaged.value.dbId, {
+      pid: selectedAuditPid.value,
+      signal: auditSignal.value,
+      reason: auditReason.value.trim(),
+      confirmationText: auditConfirmationText.value.trim(),
+      scanId: auditResult.value?.scanId,
+      expectedCommand: selectedAuditProcess.value?.command
+    })
+    touchLastRun('auditKill')
+    toast.success('手动处置命令已发送')
+    resetAuditActionState()
+    loadingAction.value = ''
+    await runAuditScan()
+  } catch (err: any) {
+    toast.error('手动处置失败: ' + (err?.message || String(err)))
+  } finally {
+    loadingAction.value = ''
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="card p-5 space-y-4">
+      <div>
+        <h3 class="text-lg font-semibold text-themed">{{ t('admin.hosts.ops.title') }}</h3>
+        <p class="text-sm text-themed-muted mt-1">{{ t('admin.hosts.ops.description') }}</p>
+      </div>
+
+      <div class="inline-flex rounded-lg border p-1" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+        <button
+          type="button"
+          class="px-4 py-2 text-sm rounded-md transition"
+          :class="activeOpsMenu === 'actions' ? 'bg-blue-600 text-white' : 'text-themed-muted hover:text-themed'"
+          @click="activeOpsMenu = 'actions'"
+        >
+          实例操作
+        </button>
+        <button
+          type="button"
+          class="px-4 py-2 text-sm rounded-md transition"
+          :class="activeOpsMenu === 'audit' ? 'bg-blue-600 text-white' : 'text-themed-muted hover:text-themed'"
+          @click="activeOpsMenu = 'audit'"
+        >
+          实例审查
+        </button>
+      </div>
+
+      <div v-if="activeOpsMenu === 'actions'" class="grid gap-4 lg:grid-cols-3">
+        <div class="rounded-xl border p-4 space-y-3" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/40' : 'border-gray-200 bg-gray-50'">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <div class="text-sm font-medium text-themed">{{ t('admin.hosts.ops.discover') }}</div>
+              <div class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.discoverHint') }}</div>
+            </div>
+            <span class="badge badge-info">Incus</span>
+          </div>
+          <button class="btn-primary btn-sm w-full" :disabled="loadingAction !== ''" @click="runDiscover">
+            <span>{{ loadingAction === 'discover' ? '...' : t('admin.hosts.ops.discover') }}</span>
+          </button>
+        </div>
+
+        <div class="rounded-xl border p-4 space-y-3" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/40' : 'border-gray-200 bg-gray-50'">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <div class="text-sm font-medium text-themed">{{ t('admin.hosts.ops.baselineSync') }}</div>
+              <div class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.baselineHint') }}</div>
+            </div>
+            <span class="badge badge-warning">Safe</span>
+          </div>
+          <button class="btn-secondary btn-sm w-full" :disabled="loadingAction !== ''" @click="runBaselineSync">
+            <span>{{ loadingAction === 'baseline' ? '...' : t('admin.hosts.ops.baselineSync') }}</span>
+          </button>
+        </div>
+
+        <div class="rounded-xl border p-4 space-y-3" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/40' : 'border-gray-200 bg-gray-50'">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <div class="text-sm font-medium text-themed">{{ t('admin.hosts.ops.networkRepair') }}</div>
+              <div class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.networkHint') }}</div>
+            </div>
+            <span class="badge badge-success">IP</span>
+          </div>
+          <button class="btn-secondary btn-sm w-full" :disabled="loadingAction !== ''" @click="runNetworkRepair">
+            <span>{{ loadingAction === 'network' ? '...' : t('admin.hosts.ops.networkRepair') }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="activeOpsMenu === 'actions' && discoverResult" class="card p-5 space-y-4">
+      <div class="flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <h3 class="text-base font-semibold text-themed">{{ t('admin.hosts.ops.sectionInventory') }}</h3>
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.selectInstanceHint') }}</p>
+        </div>
+      </div>
+
+      <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+        <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+          <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.totalIncus') }}</div>
+          <div class="text-2xl font-semibold mt-1 text-themed">{{ discoverResult.summary.totalIncus }}</div>
+        </div>
+        <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+          <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.totalDb') }}</div>
+          <div class="text-2xl font-semibold mt-1 text-themed">{{ discoverResult.summary.totalDb }}</div>
+        </div>
+        <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+          <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.managedCount') }}</div>
+          <div class="text-2xl font-semibold mt-1 text-themed">{{ discoverResult.summary.managedCount }}</div>
+        </div>
+        <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+          <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.orphanedCount') }}</div>
+          <div class="text-2xl font-semibold mt-1 text-themed">{{ discoverResult.summary.orphanedCount }}</div>
+        </div>
+        <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+          <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.missingCount') }}</div>
+          <div class="text-2xl font-semibold mt-1 text-themed">{{ discoverResult.summary.missingCount }}</div>
+        </div>
+      </div>
+
+      <div class="grid gap-4 xl:grid-cols-3">
+        <div class="rounded-xl border p-4 space-y-3" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <div class="font-medium text-themed">{{ t('admin.hosts.ops.managed') }}</div>
+          <div v-if="discoverResult.managed.length" class="space-y-2 max-h-96 overflow-auto">
+            <button
+              v-for="item in discoverResult.managed"
+              :key="`${item.dbId}-${item.incusName}`"
+              type="button"
+              class="w-full rounded-lg px-3 py-2 text-left text-sm border transition"
+              :class="selectedManagedDbId === item.dbId
+                ? (themeStore.isDark ? 'border-blue-500 bg-blue-500/10' : 'border-blue-500 bg-blue-50')
+                : (themeStore.isDark ? 'border-gray-800 bg-gray-900 hover:border-gray-700' : 'border-gray-200 bg-gray-50 hover:border-gray-300')"
+              @click="selectedManagedDbId = item.dbId"
+            >
+              <div class="font-medium text-themed">{{ item.incusName }}</div>
+              <div class="text-xs text-themed-muted mt-1">
+                {{ t('admin.hosts.ops.instanceType') }}: {{ localizeType(item.incusType) }} · {{ t('admin.hosts.ops.incusStatus') }}: {{ localizeStatus(item.incusStatus) }} · {{ t('admin.hosts.ops.dbStatus') }}: {{ localizeStatus(item.dbStatus) }} · 用户 ID: {{ item.userId }}
+              </div>
+            </button>
+          </div>
+          <div v-else class="text-sm text-themed-muted">{{ t('admin.hosts.ops.noManaged') }}</div>
+        </div>
+
+        <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <div class="font-medium text-themed mb-3">{{ t('admin.hosts.ops.orphaned') }}</div>
+          <div v-if="discoverResult.orphaned.length" class="space-y-2 max-h-96 overflow-auto">
+            <div v-for="item in discoverResult.orphaned" :key="item.incusName" class="rounded-lg px-3 py-2 text-sm" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+              <div class="font-medium text-themed">{{ item.incusName }}</div>
+              <div class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.instanceType') }}: {{ localizeType(item.incusType) }} · {{ t('admin.hosts.ops.incusStatus') }}: {{ localizeStatus(item.incusStatus) }}</div>
+            </div>
+          </div>
+          <div v-else class="text-sm text-themed-muted">{{ t('admin.hosts.ops.noOrphaned') }}</div>
+        </div>
+
+        <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <div class="font-medium text-themed mb-3">{{ t('admin.hosts.ops.missing') }}</div>
+          <div v-if="discoverResult.missing.length" class="space-y-2 max-h-96 overflow-auto">
+            <div v-for="item in discoverResult.missing" :key="`${item.dbId}-${item.incusId}`" class="rounded-lg px-3 py-2 text-sm" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+              <div class="font-medium text-themed">{{ item.dbName }}</div>
+              <div class="text-xs text-themed-muted mt-1">ID #{{ item.dbId }} · Incus: {{ item.incusId }} · {{ t('admin.hosts.ops.dbStatus') }}: {{ item.dbStatus }}</div>
+            </div>
+          </div>
+          <div v-else class="text-sm text-themed-muted">{{ t('admin.hosts.ops.noMissing') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="activeOpsMenu === 'actions' && selectedManaged" class="grid gap-6 xl:grid-cols-2">
+      <div class="card p-5 space-y-4">
+        <div class="flex items-center justify-between gap-3 flex-wrap">
+          <div>
+            <h3 class="text-base font-semibold text-themed">{{ t('admin.hosts.ops.instancePanel') }}</h3>
+            <p class="text-xs text-themed-muted mt-1">{{ selectedManaged.incusName }} · #{{ selectedManaged.dbId }}</p>
+          </div>
+          <button class="btn-ghost btn-sm" :disabled="loadingAction !== ''" @click="loadPreview">{{ t('admin.hosts.ops.loadPreview') }}</button>
+        </div>
+
+        <div v-if="previewResult" class="rounded-xl p-4 space-y-2" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+          <div class="text-sm text-themed"><strong>{{ t('admin.hosts.ops.dbStatus') }}:</strong> {{ localizeStatus(previewResult.instanceStatus) }}</div>
+          <div class="text-sm text-themed"><strong>{{ t('admin.hosts.ops.suggestedAction') }}:</strong> {{ localizeSuggestedAction(previewResult.risk.suggestedAction) }}</div>
+          <div class="text-sm text-themed"><strong>{{ t('admin.hosts.ops.activeTask') }}:</strong> {{ previewResult.activeTask ? `${previewResult.activeTask.taskType} #${previewResult.activeTask.id}` : '-' }}</div>
+          <ul class="text-xs text-themed-muted list-disc pl-5 space-y-1">
+            <li v-for="note in previewResult.risk.notes" :key="note">{{ note }}</li>
+          </ul>
+        </div>
+
+        <div class="grid gap-3 sm:grid-cols-3">
+          <button class="btn-secondary btn-sm" :disabled="loadingAction !== '' || !previewResult?.canSync" @click="runInstanceSync">{{ t('admin.hosts.ops.syncInstance') }}</button>
+          <button class="btn-secondary btn-sm" :disabled="loadingAction !== '' || !previewResult?.canRestart" @click="runInstanceRestart(false)">{{ t('admin.hosts.ops.safeRestart') }}</button>
+          <button class="btn-secondary btn-sm" :disabled="loadingAction !== '' || !previewResult?.canForceRestart" @click="runInstanceRestart(true)">{{ t('admin.hosts.ops.forceRestart') }}</button>
+        </div>
+      </div>
+
+      <div class="card p-5 space-y-4">
+        <div>
+          <h3 class="text-base font-semibold text-themed">{{ t('admin.hosts.ops.dangerZone') }}</h3>
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.dangerHint') }}</p>
+        </div>
+
+        <div v-if="previewResult" class="space-y-4">
+          <div class="grid gap-3 sm:grid-cols-2">
+            <label class="rounded-xl border p-3 cursor-pointer" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <input v-model="dangerousAction" type="radio" class="mr-2" value="rebuild" :disabled="!previewResult.canRebuild" />
+              {{ t('admin.hosts.ops.rebuild') }}
+            </label>
+            <label class="rounded-xl border p-3 cursor-pointer" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <input v-model="dangerousAction" type="radio" class="mr-2" value="recreate" :disabled="!previewResult.canRecreate" />
+              {{ t('admin.hosts.ops.recreate') }}
+            </label>
+          </div>
+
+          <!-- 镜像选择下拉 -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ops.selectImage') }}</label>
+            <div v-if="loadingImages" class="text-xs text-themed-muted">{{ t('admin.hosts.ops.loadingImages') }}</div>
+            <select
+              v-else
+              v-model="selectedImageId"
+              class="input"
+            >
+              <option :value="null" disabled>{{ t('admin.hosts.ops.imagePlaceholder') }}</option>
+              <option v-for="img in availableImages" :key="img.id" :value="img.id">
+                {{ simplifyImageLabel(img) }}
+              </option>
+            </select>
+            <div v-if="availableImages.length === 0 && !loadingImages" class="text-xs text-themed-muted mt-1">
+              {{ t('admin.hosts.ops.noImagesAvailable') }}
+            </div>
+          </div>
+
+          <!-- 可选恢复参数 -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ops.selectSshKey') }}</label>
+            <div v-if="loadingSshKeys" class="text-xs text-themed-muted">{{ t('admin.hosts.ops.loadingSshKeys') }}</div>
+            <select v-else v-model="selectedSshKeyId" class="input">
+              <option :value="null">{{ t('admin.hosts.ops.sshKeyPlaceholder') }}</option>
+              <option v-for="key in availableSshKeys" :key="key.id" :value="key.id">
+                {{ key.name }}{{ key.fingerprint ? ` (${key.fingerprint})` : '' }}
+              </option>
+            </select>
+            <div class="text-xs text-themed-muted mt-1">
+              {{ availableSshKeys.length === 0 && !loadingSshKeys ? t('admin.hosts.ops.noSshKeysAvailable') : t('admin.hosts.ops.sshKeyOptionalHint') }}
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ops.selectInitCommands') }}</label>
+            <div v-if="loadingInitCommands" class="text-xs text-themed-muted">{{ t('admin.hosts.ops.loadingInitCommands') }}</div>
+            <div v-else-if="availableInitCommands.length > 0" class="space-y-2 max-h-48 overflow-auto rounded-xl border p-2" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+              <label
+                v-for="cmd in availableInitCommands"
+                :key="cmd.id"
+                class="flex items-start gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition"
+                :class="selectedCustomInitCommandIds.includes(cmd.id)
+                  ? (themeStore.isDark ? 'bg-blue-500/10' : 'bg-blue-50')
+                  : (themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50')"
+              >
+                <input
+                  type="checkbox"
+                  class="mt-0.5 rounded"
+                  :checked="selectedCustomInitCommandIds.includes(cmd.id)"
+                  @change="toggleInitCommand(cmd.id)"
+                />
+                <span class="min-w-0 flex-1">
+                  <span class="block font-medium text-themed">{{ cmd.name }}</span>
+                  <span class="block text-xs text-themed-muted mt-0.5">
+                    {{ t('extensions.initCommands.lineCount', { count: cmd.commandLineCount }) }}
+                    <span v-if="cmd.distros.length"> · {{ cmd.distros.map(getDistroName).join(', ') }}</span>
+                  </span>
+                  <span v-if="cmd.description" class="block text-xs text-themed-muted mt-0.5 truncate">{{ cmd.description }}</span>
+                </span>
+              </label>
+            </div>
+            <div v-else class="text-xs text-themed-muted">{{ t('admin.hosts.ops.noInitCommandsAvailable') }}</div>
+            <div class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.optionalField') }}</div>
+          </div>
+
+          <div class="rounded-xl border p-4 space-y-3" :class="themeStore.isDark ? 'border-red-900 bg-red-950/20' : 'border-red-200 bg-red-50'">
+            <div class="text-sm font-medium text-red-500">{{ t('admin.hosts.ops.confirmDangerTitle') }}</div>
+            <label class="flex items-start gap-2 text-sm text-themed">
+              <input v-model="riskAccepted" type="checkbox" class="mt-0.5" />
+              <span>{{ t('admin.hosts.ops.riskCheckbox') }}</span>
+            </label>
+            <div>
+              <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ops.confirmTextHint') }}</label>
+              <input v-model="confirmationText" type="text" class="input" :placeholder="confirmationExpectedText" />
+            </div>
+            <div class="flex justify-end">
+              <button
+                class="btn-danger btn-sm"
+                type="button"
+                :disabled="loadingAction !== '' || !isDangerFormValid"
+                @click="openDangerConfirm"
+              >
+                {{ t('admin.hosts.ops.executeDangerAction') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="activeOpsMenu === 'audit'" class="space-y-6">
+      <div class="inline-flex rounded-lg border p-1" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+        <button type="button" class="px-3 py-1.5 rounded-md text-sm font-medium transition" :class="auditPanel === 'scan' ? 'bg-blue-600 text-white' : 'text-themed-muted hover:text-themed'" @click="auditPanel = 'scan'">审查扫描</button>
+        <button type="button" class="px-3 py-1.5 rounded-md text-sm font-medium transition" :class="auditPanel === 'rules' ? 'bg-blue-600 text-white' : 'text-themed-muted hover:text-themed'" @click="auditPanel = 'rules'">规则库</button>
+        <button type="button" class="px-3 py-1.5 rounded-md text-sm font-medium transition" :class="auditPanel === 'whitelist' ? 'bg-blue-600 text-white' : 'text-themed-muted hover:text-themed'" @click="auditPanel = 'whitelist'">白名单</button>
+        <button type="button" class="px-3 py-1.5 rounded-md text-sm font-medium transition" :class="auditPanel === 'history' ? 'bg-blue-600 text-white' : 'text-themed-muted hover:text-themed'" @click="auditPanel = 'history'">审查历史</button>
+      </div>
+
+      <div v-if="auditPanel === 'scan'" class="card p-5 space-y-4">
+        <div class="flex items-center justify-between gap-3 flex-wrap">
+          <div>
+            <h3 class="text-base font-semibold text-themed">实例审查</h3>
+            <p class="text-xs text-themed-muted mt-1">人工扫描进程、网络连接和启动项，发现可疑项后由运维人员手动处置。</p>
+          </div>
+          <button class="btn-secondary btn-sm" :disabled="loadingAction !== ''" @click="runDiscover">
+            {{ loadingAction === 'discover' ? '...' : '刷新实例列表' }}
+          </button>
+        </div>
+
+        <div v-if="discoverResult" class="grid gap-4 xl:grid-cols-[minmax(260px,360px)_1fr]">
+          <div class="rounded-xl border p-4 space-y-3" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+            <div class="font-medium text-themed">选择审查实例</div>
+            <div v-if="discoverResult.managed.length" class="space-y-2 max-h-96 overflow-auto">
+              <button
+                v-for="item in discoverResult.managed"
+                :key="`audit-${item.dbId}-${item.incusName}`"
+                type="button"
+                class="w-full rounded-lg px-3 py-2 text-left text-sm border transition"
+                :class="selectedManagedDbId === item.dbId
+                  ? (themeStore.isDark ? 'border-blue-500 bg-blue-500/10' : 'border-blue-500 bg-blue-50')
+                  : (themeStore.isDark ? 'border-gray-800 bg-gray-900 hover:border-gray-700' : 'border-gray-200 bg-gray-50 hover:border-gray-300')"
+                @click="selectedManagedDbId = item.dbId"
+              >
+                <div class="font-medium text-themed">{{ item.incusName }}</div>
+                <div class="text-xs text-themed-muted mt-1">
+                  {{ localizeType(item.incusType) }} · {{ localizeStatus(item.incusStatus) }} · 用户 ID: {{ item.userId }}
+                </div>
+              </button>
+            </div>
+            <div v-else class="text-sm text-themed-muted">当前没有已纳管实例。</div>
+          </div>
+
+          <div class="rounded-xl border p-4 space-y-4" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+            <div class="flex items-center justify-between gap-3 flex-wrap">
+              <div>
+                <div class="font-medium text-themed">{{ selectedManaged?.incusName || '未选择实例' }}</div>
+                <div class="text-xs text-themed-muted mt-1">扫描不会自动封禁，也不会自动停止进程。</div>
+              </div>
+              <button class="btn-primary btn-sm" :disabled="loadingAction !== '' || !selectedManaged" @click="runAuditScan">
+                {{ loadingAction === 'auditScan' ? '扫描中...' : '开始审查扫描' }}
+              </button>
+            </div>
+
+            <div v-if="auditResult" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+              <div class="rounded-xl p-3" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+                <div class="text-xs text-themed-muted">风险等级</div>
+                <div class="text-lg font-semibold mt-1" :class="severityClass(auditResult.summary.riskLevel)">{{ localizeSeverity(auditResult.summary.riskLevel) }}</div>
+              </div>
+              <div class="rounded-xl p-3" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+                <div class="text-xs text-themed-muted">发现项</div>
+                <div class="text-lg font-semibold mt-1 text-themed">{{ auditResult.summary.findingCount }}</div>
+              </div>
+              <div class="rounded-xl p-3" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+                <div class="text-xs text-themed-muted">进程</div>
+                <div class="text-lg font-semibold mt-1 text-themed">{{ auditResult.summary.processCount }}</div>
+              </div>
+              <div class="rounded-xl p-3" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+                <div class="text-xs text-themed-muted">连接</div>
+                <div class="text-lg font-semibold mt-1 text-themed">{{ auditResult.summary.connectionCount }}</div>
+              </div>
+              <div class="rounded-xl p-3" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+                <div class="text-xs text-themed-muted">监听端口</div>
+                <div class="text-lg font-semibold mt-1 text-themed">{{ auditResult.summary.listeningCount }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="rounded-xl border border-dashed p-8 text-center text-sm text-themed-muted" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          请先刷新实例列表，选择一个已纳管实例后再进行人工审查。
+        </div>
+      </div>
+
+      <div v-if="auditPanel === 'scan' && auditResult" class="grid gap-6 xl:grid-cols-2">
+        <div class="card p-5 space-y-4">
+          <div>
+            <h3 class="text-base font-semibold text-themed">可疑发现</h3>
+            <p class="text-xs text-themed-muted mt-1">结果只作为人工判断线索，处置前请结合进程参数和业务背景确认。</p>
+          </div>
+          <div v-if="auditResult.findings.length" class="space-y-3 max-h-[32rem] overflow-auto">
+            <div v-for="finding in auditResult.findings" :key="finding.id" class="rounded-xl border p-3 text-sm" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <div class="flex items-center justify-between gap-3">
+                <div class="font-medium text-themed">{{ localizeAuditText(finding.title) }}</div>
+                <span class="text-xs font-semibold" :class="severityClass(finding.severity)">{{ localizeSeverity(finding.severity) }}</span>
+              </div>
+              <div class="text-xs text-themed-muted mt-1">{{ localizeFindingDetail(finding.detail) }}</div>
+              <div class="mt-2 grid gap-2 text-xs sm:grid-cols-2">
+                <div class="text-themed-muted">规则：{{ localizeAuditText(finding.ruleName || finding.ruleId) }} / {{ localizeRuleSource(finding.ruleSource) }}</div>
+                <div class="text-themed-muted">分类：{{ localizeAuditCategory(finding.category) }} / 命中：{{ finding.matchedText || '-' }}</div>
+                <div v-if="finding.recommendation" class="text-themed-muted sm:col-span-2">建议：{{ localizeAuditText(finding.recommendation) }}</div>
+                <div v-if="finding.ignored" class="text-blue-500 sm:col-span-2">已被白名单忽略：{{ finding.ignoreReason || '-' }}</div>
+              </div>
+              <div class="mt-2 flex justify-between gap-2">
+                <button class="btn-ghost btn-sm" @click="toggleAuditEvidence(finding.id)">
+                  {{ isAuditEvidenceExpanded(finding.id) ? '收起原始证据' : '查看原始证据' }}
+                </button>
+                <button v-if="!finding.ignored" class="btn-ghost btn-sm" @click="addIgnoreFromFinding(finding)">加入白名单</button>
+              </div>
+              <pre v-if="isAuditEvidenceExpanded(finding.id)" class="mt-2 text-xs whitespace-pre-wrap break-all text-themed-muted rounded-lg p-3" :class="themeStore.isDark ? 'bg-gray-950' : 'bg-white'">{{ finding.evidence }}</pre>
+            </div>
+          </div>
+          <div v-else class="text-sm text-themed-muted">未命中当前启用的审查规则。</div>
+        </div>
+
+        <div class="card p-5 space-y-4">
+          <div>
+            <h3 class="text-base font-semibold text-themed">手动停止进程</h3>
+            <p class="text-xs text-themed-muted mt-1">仅对选中的 PID 发送信号，不会自动封禁实例或用户。</p>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2">
+            <div>
+              <label class="block text-xs text-themed-muted mb-1.5">PID</label>
+              <input v-model.number="selectedAuditPid" type="number" min="2" class="input" placeholder="选择或输入 PID" />
+            </div>
+            <div>
+              <label class="block text-xs text-themed-muted mb-1.5">信号</label>
+              <select v-model="auditSignal" class="input">
+                <option value="TERM">安全停止（TERM）</option>
+                <option value="KILL">强制停止（KILL）</option>
+              </select>
+            </div>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">处置原因</label>
+            <textarea v-model="auditReason" class="input min-h-20" placeholder="记录判断依据，便于后续追溯" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">确认实例名称</label>
+            <input v-model="auditConfirmationText" type="text" class="input" :placeholder="selectedManaged?.incusName || ''" />
+          </div>
+          <div class="flex justify-end">
+            <button class="btn-danger btn-sm" :disabled="loadingAction !== '' || !selectedAuditPid || auditConfirmationText.trim() !== selectedManaged?.incusName" @click="runAuditKillProcess">
+              {{ loadingAction === 'auditKill' ? '处理中...' : '发送停止信号' }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="auditPanel === 'scan' && auditResult" class="card p-5 space-y-4">
+        <div class="flex items-center justify-between gap-3 flex-wrap">
+          <div>
+            <h3 class="text-base font-semibold text-themed">进程列表</h3>
+            <p class="text-xs text-themed-muted mt-1">优先显示命中规则或 CPU 较高的进程。</p>
+          </div>
+          <button class="btn-ghost btn-sm" :disabled="loadingAction !== '' || !selectedManaged" @click="runAuditScan">
+            {{ loadingAction === 'auditScan' ? '刷新中...' : '刷新进程' }}
+          </button>
+        </div>
+        <div class="overflow-x-auto rounded-xl border" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <table class="min-w-full text-sm">
+            <thead :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+              <tr>
+                <th class="px-4 py-3 text-left font-medium text-themed">PID</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">用户</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">CPU</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">内存</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">命令</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="process in auditResult.processes" :key="process.pid" class="border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+                <td class="px-4 py-3 font-mono text-themed">{{ process.pid }}</td>
+                <td class="px-4 py-3 text-themed-muted">{{ process.user }}</td>
+                <td class="px-4 py-3 text-themed-muted">{{ process.cpuPercent ?? '-' }}</td>
+                <td class="px-4 py-3 text-themed-muted">{{ process.memoryPercent ?? '-' }}</td>
+                <td class="px-4 py-3">
+                  <div class="font-medium text-themed">{{ process.command }}</div>
+                  <div class="text-xs text-themed-muted max-w-xl truncate">{{ process.args }}</div>
+                  <div v-if="process.findings.length" class="text-xs text-amber-500 mt-1">{{ localizeProcessFindings(process.findings) }}</div>
+                </td>
+                <td class="px-4 py-3">
+                  <button class="btn-ghost btn-sm" @click="selectAuditProcess(process)">选择</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-if="auditPanel === 'scan' && auditResult" class="grid gap-6 xl:grid-cols-2">
+        <div class="card p-5 space-y-4">
+          <h3 class="text-base font-semibold text-themed">网络连接</h3>
+          <div class="space-y-2 max-h-96 overflow-auto">
+            <div v-for="(connection, index) in auditResult.connections" :key="`${connection.raw}-${index}`" class="rounded-lg px-3 py-2 text-xs" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+              <div class="font-mono text-themed">{{ connection.protocol }} {{ connection.state }} {{ connection.local }} -> {{ connection.peer }}</div>
+              <div v-if="connection.process" class="text-themed-muted mt-1">{{ connection.process }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card p-5 space-y-4">
+          <h3 class="text-base font-semibold text-themed">启动项摘要</h3>
+          <div class="space-y-2 max-h-96 overflow-auto">
+            <div v-for="(item, index) in auditResult.startupItems" :key="`${item.source}-${index}`" class="rounded-lg px-3 py-2 text-xs" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+              <div class="text-themed-muted">{{ item.source }}</div>
+              <div class="font-mono text-themed break-all">{{ item.command }}</div>
+              <div v-if="item.findings.length" class="text-amber-500 mt-1">{{ localizeProcessFindings(item.findings) }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="auditPanel === 'rules'" class="grid gap-6 xl:grid-cols-[minmax(320px,420px)_1fr]">
+        <div class="card p-5 space-y-4">
+          <div>
+            <h3 class="text-base font-semibold text-themed">规则编辑</h3>
+            <p class="text-xs text-themed-muted mt-1">
+              {{ auditRuleForm.builtinRuleId ? '正在调整系统内置规则的本节点覆盖配置，只影响当前节点。' : '节点所有者可创建当前节点规则，管理员还可以创建全局规则。' }}
+            </p>
+          </div>
+          <div class="rounded-xl border p-3 space-y-2" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+            <div class="text-xs font-medium text-themed">快速模板</div>
+            <div class="flex flex-wrap gap-2">
+              <button
+                v-for="template in auditRuleTemplates"
+                :key="template.name"
+                type="button"
+                class="btn-ghost btn-sm"
+                @click="applyAuditRuleTemplate(template)"
+              >
+                {{ template.name }}
+              </button>
+            </div>
+          </div>
+          <div class="grid gap-3">
+            <input v-model="auditRuleForm.name" class="input" placeholder="规则名称" />
+            <div class="grid gap-3 sm:grid-cols-2">
+              <select v-model="auditRuleForm.scope" class="input" :disabled="!!auditRuleForm.builtinRuleId">
+                <option value="host">当前节点</option>
+                <option value="global">管理员全局</option>
+              </select>
+              <select v-model="auditRuleForm.severity" class="input">
+                <option value="info">信息</option>
+                <option value="low">低</option>
+                <option value="medium">中</option>
+                <option value="high">高</option>
+              </select>
+            </div>
+            <input v-model="auditRuleForm.category" class="input" placeholder="分类，例如 网络滥用、代理面板" />
+            <div class="flex flex-wrap gap-2">
+              <label class="inline-flex items-center gap-2 text-sm text-themed-muted"><input type="checkbox" :checked="auditRuleForm.targetTypes.includes('process')" @change="toggleRuleTarget('process')" />进程</label>
+              <label class="inline-flex items-center gap-2 text-sm text-themed-muted"><input type="checkbox" :checked="auditRuleForm.targetTypes.includes('network')" @change="toggleRuleTarget('network')" />网络</label>
+              <label class="inline-flex items-center gap-2 text-sm text-themed-muted"><input type="checkbox" :checked="auditRuleForm.targetTypes.includes('startup')" @change="toggleRuleTarget('startup')" />启动项</label>
+            </div>
+            <div class="grid gap-3 sm:grid-cols-2">
+              <select v-model="auditRuleForm.matchType" class="input">
+                <option value="contains">包含关键词</option>
+                <option value="regex">正则表达式</option>
+                <option value="exact">精确匹配</option>
+              </select>
+              <label class="inline-flex items-center gap-2 text-sm text-themed-muted"><input v-model="auditRuleForm.caseSensitive" type="checkbox" />区分大小写</label>
+            </div>
+            <textarea v-model="auditRuleForm.pattern" class="input min-h-20" placeholder="匹配内容或正则" />
+            <textarea v-model="auditRuleForm.recommendation" class="input min-h-20" placeholder="处理建议，可选" />
+            <label class="inline-flex items-center gap-2 text-sm text-themed-muted"><input v-model="auditRuleForm.enabled" type="checkbox" />启用规则</label>
+          </div>
+          <div class="flex justify-between gap-3">
+            <button class="btn-ghost btn-sm" @click="resetAuditRuleForm">清空</button>
+            <button class="btn-primary btn-sm" :disabled="loadingAuditMeta" @click="saveAuditRule">
+              {{ auditRuleForm.builtinRuleId ? '保存本节点覆盖' : (auditRuleForm.id ? '保存修改' : '新增规则') }}
+            </button>
+          </div>
+        </div>
+
+        <div class="card p-5 space-y-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold text-themed">规则库</h3>
+            <button class="btn-ghost btn-sm" :disabled="loadingAuditMeta" @click="loadAuditRules">刷新</button>
+          </div>
+          <div class="space-y-3 max-h-[42rem] overflow-auto">
+            <div v-for="rule in auditRules" :key="`${rule.source}-${rule.id}`" class="rounded-xl border p-3 text-sm" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <div class="flex items-center justify-between gap-3">
+                <div class="font-medium text-themed">{{ localizeAuditText(rule.name) }}</div>
+                <span class="text-xs font-semibold" :class="severityClass(rule.severity)">{{ localizeSeverity(rule.severity) }}</span>
+              </div>
+              <div class="text-xs text-themed-muted mt-1">
+                {{ localizeRuleSource(rule.source) }} / {{ localizeRuleScope(rule.scope) }} / {{ localizeAuditCategory(rule.category) }} / {{ localizeAuditMatchType(rule.matchType) }}
+              </div>
+              <div class="text-xs mt-1" :class="rule.enabled ? 'text-emerald-500' : 'text-red-500'">
+                {{ rule.enabled ? '当前启用' : '当前已停用' }}{{ rule.overridden ? ' / 本节点已覆盖' : '' }}
+              </div>
+              <div class="text-xs text-themed-muted mt-1">检查对象：{{ localizeAuditTargets(rule.targetTypes) }}</div>
+              <div class="text-xs font-mono text-themed-muted mt-2 break-all">{{ rule.pattern }}</div>
+              <div v-if="rule.recommendation" class="text-xs text-themed-muted mt-2">建议：{{ localizeAuditText(rule.recommendation) }}</div>
+              <div class="mt-3 flex justify-end gap-2">
+                <button v-if="rule.source === 'builtin'" class="btn-ghost btn-sm" @click="editBuiltinRuleOverride(rule)">调整本节点</button>
+                <button v-if="rule.source === 'builtin' && rule.overridden" class="btn-ghost btn-sm" @click="resetBuiltinRuleOverride(rule)">恢复默认</button>
+                <button v-if="!rule.readOnly" class="btn-ghost btn-sm" @click="editAuditRule(rule)">编辑</button>
+                <button class="btn-ghost btn-sm" @click="createRuleFromExisting(rule)">基于此规则新建</button>
+                <button v-if="!rule.readOnly" class="btn-danger btn-sm" @click="deleteAuditRule(rule)">删除</button>
+              </div>
+            </div>
+            <div v-if="!auditRules.length" class="text-sm text-themed-muted">暂无规则，点击刷新加载系统内置规则。</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="auditPanel === 'whitelist'" class="grid gap-6 xl:grid-cols-[minmax(320px,420px)_1fr]">
+        <div class="card p-5 space-y-4">
+          <h3 class="text-base font-semibold text-themed">新增白名单</h3>
+          <select v-model="ignoreForm.scope" class="input">
+            <option value="instance">当前实例</option>
+            <option value="host">当前节点</option>
+          </select>
+          <input v-model="ignoreForm.ruleId" class="input" placeholder="规则编号，例如 proxy-core 或 custom:1" />
+          <select v-model="ignoreForm.targetType" class="input">
+            <option value="">所有目标</option>
+            <option value="process">进程</option>
+            <option value="network">网络</option>
+            <option value="startup">启动项</option>
+          </select>
+          <input v-model="ignoreForm.matchText" class="input" placeholder="匹配文本，可选" />
+          <textarea v-model="ignoreForm.reason" class="input min-h-20" placeholder="忽略原因" />
+          <input v-model.number="ignoreForm.expiresInDays" type="number" min="0" max="365" class="input" placeholder="有效天数，0 表示永久" />
+          <button class="btn-primary btn-sm" :disabled="loadingAuditMeta" @click="saveAuditIgnore">保存白名单</button>
+        </div>
+
+        <div class="card p-5 space-y-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold text-themed">白名单列表</h3>
+            <button class="btn-ghost btn-sm" :disabled="loadingAuditMeta" @click="loadAuditIgnores">刷新</button>
+          </div>
+          <div class="space-y-3">
+            <div v-for="ignore in auditIgnores" :key="ignore.id" class="rounded-xl border p-3 text-sm" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <div class="font-medium text-themed">{{ localizeRuleScope(ignore.scope) }} / {{ ignore.ruleId || '任意规则' }}</div>
+              <div class="text-xs text-themed-muted mt-1">目标：{{ localizeAuditTarget(ignore.targetType) }} / 文本：{{ ignore.matchText || '-' }}</div>
+              <div class="text-xs text-themed-muted mt-1">原因：{{ ignore.reason || '-' }}</div>
+              <div class="text-xs text-themed-muted mt-1">到期：{{ ignore.expiresAt ? new Date(ignore.expiresAt).toLocaleString() : '永久' }}</div>
+              <div class="mt-3 flex justify-end">
+                <button class="btn-danger btn-sm" @click="deleteAuditIgnore(ignore)">停用</button>
+              </div>
+            </div>
+            <div v-if="!auditIgnores.length" class="text-sm text-themed-muted">暂无白名单。</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="auditPanel === 'history'" class="grid gap-6 xl:grid-cols-2">
+        <div class="card p-5 space-y-4">
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold text-themed">扫描历史</h3>
+            <button class="btn-ghost btn-sm" :disabled="loadingAuditMeta" @click="loadAuditHistory">刷新</button>
+          </div>
+          <div class="space-y-3">
+            <div v-for="scan in auditHistory.scans" :key="scan.id" class="rounded-xl border p-3 text-sm" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <div class="flex justify-between gap-3">
+                <div class="font-medium text-themed">#{{ scan.id }} / {{ localizeAuditStatus(scan.status) }}</div>
+                <span :class="severityClass(scan.riskLevel)">{{ localizeSeverity(scan.riskLevel) }}</span>
+              </div>
+              <div class="text-xs text-themed-muted mt-1">{{ new Date(scan.createdAt).toLocaleString() }} / {{ scan.user?.username || scan.userId }}</div>
+              <div class="text-xs text-themed-muted mt-1">发现 {{ scan.findingCount }}，忽略 {{ scan.ignoredCount }}，进程 {{ scan.processCount }}，连接 {{ scan.connectionCount }}</div>
+            </div>
+            <div v-if="!auditHistory.scans.length" class="text-sm text-themed-muted">暂无扫描历史。</div>
+          </div>
+        </div>
+
+        <div class="card p-5 space-y-4">
+          <h3 class="text-base font-semibold text-themed">处置历史</h3>
+          <div class="space-y-3">
+            <div v-for="action in auditHistory.actions" :key="action.id" class="rounded-xl border p-3 text-sm" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+              <div class="font-medium text-themed">#{{ action.id }} / {{ localizeAuditActionType(action.actionType) }} / {{ localizeAuditActionResult(action.result) }}</div>
+              <div class="text-xs text-themed-muted mt-1">{{ new Date(action.createdAt).toLocaleString() }} / {{ action.user?.username || action.userId }}</div>
+              <div class="text-xs text-themed-muted mt-1">PID {{ action.pid || '-' }} / {{ localizeAuditSignal(action.signal) }}</div>
+              <div class="text-xs text-themed-muted mt-1">原因：{{ action.reason }}</div>
+              <div v-if="action.processCommand" class="text-xs font-mono text-themed-muted mt-1 break-all">{{ action.processCommand }}</div>
+            </div>
+            <div v-if="!auditHistory.actions.length" class="text-sm text-themed-muted">暂无处置历史。</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="activeOpsMenu === 'actions'" class="card p-5 space-y-4">
+      <div class="flex items-center justify-between gap-3 flex-wrap">
+        <div>
+          <h3 class="text-base font-semibold text-themed">{{ resultTitle() }}</h3>
+          <p v-if="lastRunAt" class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ops.lastRunAt') }}：{{ lastRunAt }}</p>
+        </div>
+        <button class="btn-ghost btn-sm" :disabled="!lastAction || loadingAction !== ''" @click="refreshLastResult">{{ t('admin.hosts.ops.refresh') }}</button>
+      </div>
+
+      <template v-if="!hasResult">
+        <div class="rounded-xl border border-dashed p-8 text-center text-sm text-themed-muted" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          {{ t('admin.hosts.ops.empty') }}
+        </div>
+      </template>
+
+      <template v-else>
+        <div v-if="baselineResult" class="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
+          <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+            <div class="text-xs text-themed-muted">已用 CPU</div>
+            <div class="text-xl font-semibold mt-1 text-themed">{{ baselineResult.resources.cpuUsed }}</div>
+          </div>
+          <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+            <div class="text-xs text-themed-muted">已用内存</div>
+            <div class="text-xl font-semibold mt-1 text-themed">{{ baselineResult.resources.memoryUsed }}</div>
+          </div>
+          <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+            <div class="text-xs text-themed-muted">已用磁盘</div>
+            <div class="text-xl font-semibold mt-1 text-themed">{{ baselineResult.resources.diskUsed }}</div>
+          </div>
+          <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+            <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.synced') }}</div>
+            <div class="text-xl font-semibold mt-1 text-themed">{{ baselineResult.instanceSync.synced }} / {{ baselineResult.instanceSync.total }}</div>
+          </div>
+          <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+            <div class="text-xs text-themed-muted">{{ t('admin.hosts.ops.changes') }}</div>
+            <div class="text-xl font-semibold mt-1 text-themed">{{ baselineResult.instanceSync.ipChanged }}</div>
+          </div>
+        </div>
+
+        <div v-if="networkResult" class="overflow-x-auto rounded-xl border" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <table class="min-w-full text-sm">
+            <thead :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-50'">
+              <tr>
+                <th class="px-4 py-3 text-left font-medium text-themed">ID</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">{{ t('admin.hosts.ops.instanceName') }}</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">{{ t('admin.hosts.ops.dbStatus') }}</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">{{ t('admin.hosts.ops.ipv4') }}</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">{{ t('admin.hosts.ops.ipv6') }}</th>
+                <th class="px-4 py-3 text-left font-medium text-themed">{{ t('admin.hosts.ops.details') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="row in networkResult.results" :key="row.id" class="border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+                <td class="px-4 py-3 text-themed">{{ row.id }}</td>
+                <td class="px-4 py-3 text-themed">{{ row.name }}</td>
+                <td class="px-4 py-3 text-themed">{{ row.newStatus || row.oldStatus || '-' }}</td>
+                <td class="px-4 py-3 text-themed-muted">{{ row.ipv4Changed ? `${formatValue(row.oldIpv4)} → ${formatValue(row.newIpv4)}` : '-' }}</td>
+                <td class="px-4 py-3 text-themed-muted">{{ row.ipv6Changed ? `${formatValue(row.oldIpv6)} → ${formatValue(row.newIpv6)}` : '-' }}</td>
+                <td class="px-4 py-3">
+                  <span v-if="row.success" class="text-xs text-themed-muted">{{ row.statusChanged ? `${formatValue(row.oldStatus)} → ${formatValue(row.newStatus)}` : '-' }}</span>
+                  <span v-else class="text-xs text-red-500">{{ row.error }}</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="latestInstanceActionResult" class="rounded-xl border p-4 text-sm" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-gray-50'">
+          <div class="font-medium text-themed mb-2">{{ t('admin.hosts.ops.latestInstanceAction') }}</div>
+          <div class="space-y-1 text-themed-muted">
+            <div v-if="latestInstanceActionResult.message">{{ latestInstanceActionResult.message }}</div>
+            <div v-if="latestInstanceActionResult.taskId">Task #{{ latestInstanceActionResult.taskId }}</div>
+            <div v-if="latestInstanceActionResult.currentStatus">{{ t('admin.hosts.ops.dbStatus') }}: {{ latestInstanceActionResult.currentStatus }}</div>
+            <div v-if="latestInstanceActionResult.from || latestInstanceActionResult.to">{{ formatValue(latestInstanceActionResult.from) }} → {{ formatValue(latestInstanceActionResult.to) }}</div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- 二次确认弹窗 -->
+    <div
+      v-if="showDangerConfirmModal"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4"
+    >
+      <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="cancelDangerConfirm" />
+      <div
+        class="relative w-full max-w-md rounded-2xl p-6 space-y-5 shadow-2xl"
+        :class="themeStore.isDark ? 'bg-gray-900 border border-gray-800' : 'bg-white border border-gray-200'"
+      >
+        <!-- 警告图标 -->
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-full bg-red-500/15 flex items-center justify-center flex-shrink-0">
+            <svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+            </svg>
+          </div>
+          <div>
+            <div class="font-semibold text-themed">
+              {{ dangerConfirmStep === 1 ? t('admin.hosts.ops.dangerConfirm1Title') : t('admin.hosts.ops.dangerConfirm2Title') }}
+            </div>
+            <div class="text-xs text-themed-muted mt-0.5">
+              {{ dangerConfirmStep === 1 ? t('admin.hosts.ops.dangerConfirm1Hint') : t('admin.hosts.ops.dangerConfirm2Hint') }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 操作摘要 -->
+        <div class="rounded-xl p-4 space-y-1.5 text-sm" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+          <div class="flex items-center justify-between">
+            <span class="text-themed-muted">{{ t('admin.hosts.ops.instanceName') }}</span>
+            <span class="font-mono font-medium text-themed">{{ previewResult?.instanceName }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-themed-muted">{{ t('admin.hosts.ops.dangerActionType') }}</span>
+            <span class="font-medium text-red-500">{{ dangerousAction === 'rebuild' ? t('admin.hosts.ops.rebuild') : t('admin.hosts.ops.recreate') }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-themed-muted">{{ t('admin.hosts.ops.selectImage') }}</span>
+            <span class="text-themed text-xs font-mono">{{ selectedImageAlias }}</span>
+          </div>
+        </div>
+
+        <!-- 步骤指示 -->
+        <div class="flex items-center gap-2">
+          <div class="flex-1 h-1.5 rounded-full" :class="dangerConfirmStep >= 1 ? 'bg-red-500' : (themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200')" />
+          <div class="flex-1 h-1.5 rounded-full" :class="dangerConfirmStep >= 2 ? 'bg-red-500' : (themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200')" />
+        </div>
+        <div class="text-xs text-themed-muted text-center">
+          {{ t('admin.hosts.ops.dangerConfirmStep', { step: dangerConfirmStep, total: 2 }) }}
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="flex gap-3 justify-end">
+          <button class="btn-ghost btn-sm" @click="cancelDangerConfirm">{{ t('common.cancel') }}</button>
+          <button
+            v-if="dangerConfirmStep === 1"
+            class="btn-danger btn-sm"
+            @click="advanceDangerConfirm"
+          >
+            {{ t('admin.hosts.ops.dangerConfirm1Btn') }}
+          </button>
+          <button
+            v-else
+            class="btn-danger btn-sm"
+            :disabled="loadingAction !== ''"
+            @click="executeDangerConfirmed"
+          >
+            {{ loadingAction === 'instanceDanger' ? '...' : t('admin.hosts.ops.dangerConfirm2Btn') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/host/HostRedeemCodesTab.vue b/client/src/components/host/HostRedeemCodesTab.vue
new file mode 100644
index 0000000..35cd1e8
--- /dev/null
+++ b/client/src/components/host/HostRedeemCodesTab.vue
@@ -0,0 +1,928 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+import api from '@/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface Props {
+  hostId: number
+}
+
+const props = defineProps<Props>()
+
+// 兑换码类型
+interface RedeemCode {
+  id: number
+  code: string
+  codeType: 'c' | 'r' | 'd' | 't'
+  codeValue: number
+  maxUses: number
+  usedCount: number
+  expiresAt: string | null
+  enabled: boolean
+  remark: string | null
+  batchId: string | null
+  createdAt: string
+}
+
+// 状态
+const loading = ref(true)
+const codes = ref<RedeemCode[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 20
+const enabledFilter = ref<'all' | 'true' | 'false'>('all')
+
+// 创建兑换码
+const showCreateModal = ref(false)
+const creating = ref(false)
+const createForm = ref({
+  codeType: 'c' as 'c' | 'r' | 'd' | 't',
+  codeValue: 0,
+  maxUses: 1,
+  expiresAt: '',
+  remark: '',
+  batchCount: 1
+})
+
+// 可选值
+const codeOptions = ref<{
+  types: Array<{ value: string; label: string; unit: string }>
+  ranges: Record<string, { min: number; max: number; unit: string }>
+}>({
+  types: [
+    { value: 'c', label: 'CPU', unit: '%' },
+    { value: 'r', label: 'Memory', unit: 'MB' },
+    { value: 'd', label: 'Disk', unit: 'MB' },
+    { value: 't', label: 'Traffic', unit: 'GB' }
+  ],
+  ranges: {
+    c: { min: 1, max: 100, unit: '%' },
+    r: { min: 1, max: 65536, unit: 'MB' },
+    d: { min: 1, max: 1048576, unit: 'MB' },
+    t: { min: 1, max: 10240, unit: 'GB' }
+  }
+})
+
+// 批量创建结果
+const showBatchResultModal = ref(false)
+const batchCreatedCodes = ref<string[]>([])
+const batchCreatedBatchId = ref<string | null>(null)
+const copiedBatch = ref(false)
+
+// 使用记录
+const showUsagesModal = ref(false)
+const usagesLoading = ref(false)
+const selectedCode = ref<RedeemCode | null>(null)
+const usages = ref<Array<{
+  id: number
+  user: { id: number; username: string }
+  instance: { id: number; name: string }
+  usedAt: string
+}>>([])
+const usagesTotal = ref(0)
+
+// 选择和删除
+const selectedIds = ref<Set<number>>(new Set())
+const showDeleteModal = ref(false)
+const deleting = ref(false)
+
+// 复制状态
+const copiedCode = ref<number | null>(null)
+
+onMounted(() => {
+  loadCodes()
+  loadOptions()
+})
+
+watch(() => props.hostId, () => {
+  page.value = 1
+  selectedIds.value.clear()
+  loadCodes()
+})
+
+watch(enabledFilter, () => {
+  page.value = 1
+  loadCodes()
+})
+
+// 计算选中所有
+const allSelected = computed(() => {
+  return codes.value.length > 0 && codes.value.every(c => selectedIds.value.has(c.id))
+})
+
+// 获取当前类型的范围限制
+const currentRange = computed(() => {
+  return codeOptions.value.ranges[createForm.value.codeType] || { min: 1, max: 100, unit: '' }
+})
+
+async function loadCodes() {
+  loading.value = true
+  try {
+    const params: { limit: number; offset: number; enabled?: boolean } = {
+      limit: pageSize,
+      offset: (page.value - 1) * pageSize
+    }
+    if (enabledFilter.value !== 'all') {
+      params.enabled = enabledFilter.value === 'true'
+    }
+    const res = await api.hosts.getRedeemCodes(props.hostId, params)
+    codes.value = res.codes
+    total.value = res.total
+  } catch (err) {
+    console.error('Failed to load redeem codes:', err)
+    toast.error(t('redeemCodes.loadFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadOptions() {
+  try {
+    const res = await api.hosts.getRedeemCodeOptions()
+    codeOptions.value = res
+    // 设置默认值为范围的最小值
+    if (currentRange.value) {
+      createForm.value.codeValue = currentRange.value.min
+    }
+  } catch (err) {
+    console.error('Failed to load options:', err)
+  }
+}
+
+function openCreateModal() {
+  createForm.value = {
+    codeType: 'c',
+    codeValue: currentRange.value?.min || 1,
+    maxUses: 1,
+    expiresAt: '',
+    remark: '',
+    batchCount: 1
+  }
+  showCreateModal.value = true
+}
+
+// 当类型变化时重置数值为该类型的最小值
+watch(() => createForm.value.codeType, () => {
+  const range = codeOptions.value.ranges[createForm.value.codeType]
+  if (range) {
+    createForm.value.codeValue = range.min
+  }
+})
+
+async function handleCreate() {
+  if (!createForm.value.codeValue) {
+    toast.error(t('redeemCodes.selectValue'))
+    return
+  }
+
+  // 验证数值是否在允许范围内
+  const range = currentRange.value
+  if (createForm.value.codeValue < range.min || createForm.value.codeValue > range.max) {
+    toast.error(t('redeemCodes.valueOutOfRange', { min: range.min, max: range.max }))
+    return
+  }
+
+  // 确保是整数
+  if (!Number.isInteger(createForm.value.codeValue)) {
+    toast.error(t('redeemCodes.valueMustBeInteger'))
+    return
+  }
+
+  creating.value = true
+  try {
+    const data: any = {
+      codeType: createForm.value.codeType,
+      codeValue: createForm.value.codeValue,
+      remark: createForm.value.remark.trim() || undefined
+    }
+
+    if (createForm.value.expiresAt) {
+      data.expiresAt = new Date(createForm.value.expiresAt).toISOString()
+    }
+
+    if (createForm.value.batchCount > 1) {
+      data.batchCount = createForm.value.batchCount
+    } else {
+      data.maxUses = createForm.value.maxUses
+    }
+
+    const res = await api.hosts.createRedeemCode(props.hostId, data)
+    
+    if (res.codes && res.codes.length > 0) {
+      // 批量创建成功
+      batchCreatedCodes.value = res.codes
+      batchCreatedBatchId.value = res.batchId || null
+      showCreateModal.value = false
+      showBatchResultModal.value = true
+      toast.success(t('redeemCodes.batchCreateSuccess', { count: res.count }))
+    } else if (res.code) {
+      // 单个创建成功
+      toast.success(t('redeemCodes.createSuccess'))
+      showCreateModal.value = false
+    }
+    
+    await loadCodes()
+  } catch (err: unknown) {
+    toast.error(translateError(err))
+  } finally {
+    creating.value = false
+  }
+}
+
+async function toggleEnabled(code: RedeemCode) {
+  try {
+    await api.hosts.updateRedeemCode(props.hostId, code.id, {
+      enabled: !code.enabled
+    })
+    code.enabled = !code.enabled
+    toast.success(t(code.enabled ? 'redeemCodes.enabled' : 'redeemCodes.disabled'))
+  } catch (err: unknown) {
+    toast.error(translateError(err))
+  }
+}
+
+function openUsages(code: RedeemCode) {
+  selectedCode.value = code
+  usages.value = []
+  usagesTotal.value = 0
+  showUsagesModal.value = true
+  loadUsages()
+}
+
+async function loadUsages() {
+  if (!selectedCode.value) return
+  usagesLoading.value = true
+  try {
+    const res = await api.hosts.getRedeemCodeUsages(props.hostId, selectedCode.value.id)
+    usages.value = res.usages
+    usagesTotal.value = res.total
+  } catch (err: unknown) {
+    toast.error(translateError(err))
+  } finally {
+    usagesLoading.value = false
+  }
+}
+
+function toggleSelect(id: number) {
+  if (selectedIds.value.has(id)) {
+    selectedIds.value.delete(id)
+  } else {
+    selectedIds.value.add(id)
+  }
+}
+
+function toggleSelectAll() {
+  if (allSelected.value) {
+    selectedIds.value.clear()
+  } else {
+    codes.value.forEach(c => selectedIds.value.add(c.id))
+  }
+}
+
+function openDeleteModal() {
+  if (selectedIds.value.size === 0) return
+  showDeleteModal.value = true
+}
+
+async function confirmDelete() {
+  if (selectedIds.value.size === 0) return
+  deleting.value = true
+  try {
+    await api.hosts.batchDeleteRedeemCodes(props.hostId, Array.from(selectedIds.value))
+    toast.success(t('redeemCodes.deleteSuccess', { count: selectedIds.value.size }))
+    selectedIds.value.clear()
+    showDeleteModal.value = false
+    await loadCodes()
+  } catch (err: unknown) {
+    toast.error(translateError(err))
+  } finally {
+    deleting.value = false
+  }
+}
+
+function copyCode(code: string, id: number) {
+  navigator.clipboard.writeText(code).then(() => {
+    copiedCode.value = id
+    setTimeout(() => {
+      copiedCode.value = null
+    }, 2000)
+  })
+}
+
+function copyBatchCodes() {
+  navigator.clipboard.writeText(batchCreatedCodes.value.join('\n')).then(() => {
+    copiedBatch.value = true
+    setTimeout(() => {
+      copiedBatch.value = false
+    }, 2000)
+  })
+}
+
+function getTypeLabel(type: string): string {
+  const typeInfo = codeOptions.value.types.find(t => t.value === type)
+  return typeInfo ? `${typeInfo.label}` : type
+}
+
+function getTypeUnit(type: string): string {
+  const typeInfo = codeOptions.value.types.find(t => t.value === type)
+  return typeInfo?.unit || ''
+}
+
+function formatValue(type: string, value: number): string {
+  const unit = getTypeUnit(type)
+  if (type === 'r' || type === 'd') {
+    if (value >= 1024) {
+      const gb = value / 1024
+      return gb % 1 === 0 ? `${gb.toFixed(0)} GB` : `${gb.toFixed(1)} GB`
+    }
+  }
+  return `${value} ${unit}`
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+function isExpired(expiresAt: string | null): boolean {
+  if (!expiresAt) return false
+  return new Date(expiresAt) < new Date()
+}
+
+function goToPrevPage() {
+  if (page.value > 1) {
+    page.value--
+    loadCodes()
+  }
+}
+
+function goToNextPage() {
+  if (page.value * pageSize < total.value) {
+    page.value++
+    loadCodes()
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- 工具栏 -->
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <div class="flex items-center gap-3">
+        <!-- 筛选器 -->
+        <select
+          v-model="enabledFilter"
+          :class="[
+            'px-3 py-1.5 text-sm rounded-lg border focus:outline-none focus:ring-1',
+            themeStore.isDark
+              ? 'bg-gray-800 border-gray-700 text-gray-200 focus:ring-blue-500'
+              : 'bg-white border-gray-300 text-gray-700 focus:ring-blue-500'
+          ]"
+        >
+          <option value="all">{{ t('redeemCodes.filterAll') }}</option>
+          <option value="true">{{ t('redeemCodes.filterEnabled') }}</option>
+          <option value="false">{{ t('redeemCodes.filterDisabled') }}</option>
+        </select>
+
+        <!-- 批量删除按钮 -->
+        <button
+          v-if="selectedIds.size > 0"
+          :class="[
+            'flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg transition-colors',
+            themeStore.isDark
+              ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30'
+              : 'bg-red-50 text-red-600 hover:bg-red-100'
+          ]"
+          @click="openDeleteModal"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+          {{ t('redeemCodes.deleteSelected', { count: selectedIds.size }) }}
+        </button>
+      </div>
+
+      <!-- 创建按钮 -->
+      <button
+        :class="[
+          'flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+          themeStore.isDark
+            ? 'bg-blue-600 text-white hover:bg-blue-500'
+            : 'bg-blue-600 text-white hover:bg-blue-700'
+        ]"
+        @click="openCreateModal"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('redeemCodes.create') }}
+      </button>
+    </div>
+
+    <!-- 列表 -->
+    <div
+      :class="[
+        'rounded-xl border overflow-hidden',
+        themeStore.isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'
+      ]"
+    >
+      <!-- 加载状态 -->
+      <div v-if="loading" class="p-8 text-center">
+        <div class="inline-block w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else-if="codes.length === 0" class="p-8 text-center">
+        <svg class="w-12 h-12 mx-auto mb-3" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
+        </svg>
+        <p :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">{{ t('redeemCodes.empty') }}</p>
+      </div>
+
+      <!-- 列表内容 -->
+      <template v-else>
+        <table class="w-full">
+          <thead :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-50'">
+            <tr>
+              <th class="px-4 py-3 text-left">
+                <input
+                  type="checkbox"
+                  :checked="allSelected"
+                  class="rounded"
+                  @change="toggleSelectAll"
+                />
+              </th>
+              <th :class="['px-4 py-3 text-left text-xs font-medium uppercase tracking-wider', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                {{ t('redeemCodes.code') }}
+              </th>
+              <th :class="['px-4 py-3 text-left text-xs font-medium uppercase tracking-wider', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                {{ t('redeemCodes.type') }}
+              </th>
+              <th :class="['px-4 py-3 text-left text-xs font-medium uppercase tracking-wider', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                {{ t('redeemCodes.usage') }}
+              </th>
+              <th :class="['px-4 py-3 text-left text-xs font-medium uppercase tracking-wider', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                {{ t('redeemCodes.status') }}
+              </th>
+              <th :class="['px-4 py-3 text-right text-xs font-medium uppercase tracking-wider', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                {{ t('redeemCodes.actions') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody :class="themeStore.isDark ? 'divide-gray-800' : 'divide-gray-200'" class="divide-y">
+            <tr v-for="code in codes" :key="code.id" :class="themeStore.isDark ? 'hover:bg-gray-800/50' : 'hover:bg-gray-50'">
+              <td class="px-4 py-3">
+                <input
+                  type="checkbox"
+                  :checked="selectedIds.has(code.id)"
+                  class="rounded"
+                  @change="toggleSelect(code.id)"
+                />
+              </td>
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-2">
+                  <code :class="['text-sm font-mono', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ code.code }}</code>
+                  <button
+                    :class="[
+                      'p-1 rounded transition-colors',
+                      themeStore.isDark ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-gray-200 text-gray-500'
+                    ]"
+                    :title="t('common.copy')"
+                    @click="copyCode(code.code, code.id)"
+                  >
+                    <svg v-if="copiedCode === code.id" class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </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="1.5" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                    </svg>
+                  </button>
+                </div>
+                <p v-if="code.remark" :class="['text-xs mt-1', themeStore.isDark ? 'text-gray-500' : 'text-gray-400']">{{ code.remark }}</p>
+                <p v-if="code.batchId" :class="['text-xs mt-0.5', themeStore.isDark ? 'text-blue-500' : 'text-blue-500']">
+                  {{ t('redeemCodes.batch') }}: {{ code.batchId.slice(0, 8) }}
+                </p>
+              </td>
+              <td class="px-4 py-3">
+                <span :class="['inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', themeStore.isDark ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-800']">
+                  {{ getTypeLabel(code.codeType) }} +{{ formatValue(code.codeType, code.codeValue) }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <button
+                  :class="[
+                    'text-sm hover:underline',
+                    themeStore.isDark ? 'text-gray-300' : 'text-gray-700'
+                  ]"
+                  @click="openUsages(code)"
+                >
+                  {{ code.usedCount }} / {{ code.maxUses }}
+                </button>
+              </td>
+              <td class="px-4 py-3">
+                <div class="flex flex-col gap-1">
+                  <span
+                    v-if="isExpired(code.expiresAt)"
+                    :class="['inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-600']"
+                  >
+                    {{ t('redeemCodes.expired') }}
+                  </span>
+                  <span
+                    v-else-if="code.usedCount >= code.maxUses"
+                    :class="['inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-600']"
+                  >
+                    {{ t('redeemCodes.exhausted') }}
+                  </span>
+                  <span
+                    v-else-if="code.enabled"
+                    :class="['inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', themeStore.isDark ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-800']"
+                  >
+                    {{ t('redeemCodes.active') }}
+                  </span>
+                  <span
+                    v-else
+                    :class="['inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', themeStore.isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-800']"
+                  >
+                    {{ t('redeemCodes.paused') }}
+                  </span>
+                  <span v-if="code.expiresAt && !isExpired(code.expiresAt)" :class="['text-xs', themeStore.isDark ? 'text-gray-500' : 'text-gray-400']">
+                    {{ t('redeemCodes.expiresAt') }}: {{ formatDate(code.expiresAt) }}
+                  </span>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-right">
+                <button
+                  :class="[
+                    'px-2 py-1 text-xs font-medium rounded transition-colors',
+                    code.enabled
+                      ? (themeStore.isDark ? 'bg-yellow-600/20 text-yellow-400 hover:bg-yellow-600/30' : 'bg-yellow-50 text-yellow-600 hover:bg-yellow-100')
+                      : (themeStore.isDark ? 'bg-green-600/20 text-green-400 hover:bg-green-600/30' : 'bg-green-50 text-green-600 hover:bg-green-100')
+                  ]"
+                  @click="toggleEnabled(code)"
+                >
+                  {{ code.enabled ? t('redeemCodes.disable') : t('redeemCodes.enable') }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- 分页 -->
+        <div v-if="total > pageSize" :class="['flex items-center justify-between px-4 py-3 border-t', themeStore.isDark ? 'border-gray-800' : 'border-gray-200']">
+          <span :class="['text-sm', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+            {{ t('common.pagination', { current: page, total: Math.ceil(total / pageSize) }) }}
+          </span>
+          <div class="flex gap-2">
+            <button
+              :disabled="page <= 1"
+              :class="[
+                'px-3 py-1 text-sm rounded-lg transition-colors',
+                page <= 1
+                  ? 'opacity-50 cursor-not-allowed'
+                  : (themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100'),
+                themeStore.isDark ? 'text-gray-400' : 'text-gray-600'
+              ]"
+              @click="goToPrevPage"
+            >
+              {{ t('common.previous') }}
+            </button>
+            <button
+              :disabled="page * pageSize >= total"
+              :class="[
+                'px-3 py-1 text-sm rounded-lg transition-colors',
+                page * pageSize >= total
+                  ? 'opacity-50 cursor-not-allowed'
+                  : (themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100'),
+                themeStore.isDark ? 'text-gray-400' : 'text-gray-600'
+              ]"
+              @click="goToNextPage"
+            >
+              {{ t('common.next') }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- 创建兑换码弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showCreateModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" @click.self="showCreateModal = false">
+          <div :class="['w-full max-w-md rounded-xl shadow-xl', themeStore.isDark ? 'bg-gray-900' : 'bg-white']">
+            <div :class="['flex items-center justify-between px-6 py-4 border-b', themeStore.isDark ? 'border-gray-800' : 'border-gray-200']">
+              <h3 :class="['text-lg font-semibold', themeStore.isDark ? 'text-white' : 'text-gray-900']">{{ t('redeemCodes.createTitle') }}</h3>
+              <button :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'" @click="showCreateModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="px-6 py-4 space-y-4">
+              <!-- 资源类型 -->
+              <div>
+                <label :class="['block text-sm font-medium mb-1', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ t('redeemCodes.resourceType') }}</label>
+                <select
+                  v-model="createForm.codeType"
+                  :class="[
+                    'w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-1',
+                    themeStore.isDark
+                      ? 'bg-gray-800 border-gray-700 text-white focus:ring-blue-500'
+                      : 'bg-white border-gray-300 text-gray-900 focus:ring-blue-500'
+                  ]"
+                >
+                  <option v-for="type in codeOptions.types" :key="type.value" :value="type.value">
+                    {{ type.label }} ({{ type.unit }})
+                  </option>
+                </select>
+              </div>
+
+              <!-- 资源数值 -->
+              <div>
+                <label :class="['block text-sm font-medium mb-1', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ t('redeemCodes.resourceValue') }}</label>
+                <div class="flex items-center gap-2">
+                  <input
+                    v-model.number="createForm.codeValue"
+                    type="number"
+                    :min="currentRange.min"
+                    :max="currentRange.max"
+                    :class="[
+                      'flex-1 px-3 py-2 rounded-lg border focus:outline-none focus:ring-1',
+                      themeStore.isDark
+                        ? 'bg-gray-800 border-gray-700 text-white focus:ring-blue-500'
+                        : 'bg-white border-gray-300 text-gray-900 focus:ring-blue-500'
+                    ]"
+                  />
+                  <span :class="['text-sm font-medium', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                    {{ currentRange.unit }}
+                  </span>
+                </div>
+                <p :class="['text-xs mt-1', themeStore.isDark ? 'text-gray-500' : 'text-gray-400']">
+                  {{ t('redeemCodes.valueRange', { min: currentRange.min, max: currentRange.max }) }}
+                </p>
+              </div>
+
+              <!-- 批量数量 -->
+              <div>
+                <label :class="['block text-sm font-medium mb-1', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ t('redeemCodes.batchCount') }}</label>
+                <input
+                  v-model.number="createForm.batchCount"
+                  type="number"
+                  min="1"
+                  max="100"
+                  :class="[
+                    'w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-1',
+                    themeStore.isDark
+                      ? 'bg-gray-800 border-gray-700 text-white focus:ring-blue-500'
+                      : 'bg-white border-gray-300 text-gray-900 focus:ring-blue-500'
+                  ]"
+                />
+                <p :class="['text-xs mt-1', themeStore.isDark ? 'text-gray-500' : 'text-gray-400']">{{ t('redeemCodes.batchCountHint') }}</p>
+              </div>
+
+              <!-- 最大使用次数（仅单个创建时显示） -->
+              <div v-if="createForm.batchCount <= 1">
+                <label :class="['block text-sm font-medium mb-1', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ t('redeemCodes.maxUses') }}</label>
+                <input
+                  v-model.number="createForm.maxUses"
+                  type="number"
+                  min="1"
+                  max="1000"
+                  :class="[
+                    'w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-1',
+                    themeStore.isDark
+                      ? 'bg-gray-800 border-gray-700 text-white focus:ring-blue-500'
+                      : 'bg-white border-gray-300 text-gray-900 focus:ring-blue-500'
+                  ]"
+                />
+              </div>
+
+              <!-- 过期时间 -->
+              <div>
+                <label :class="['block text-sm font-medium mb-1', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ t('redeemCodes.expiresAt') }}</label>
+                <input
+                  v-model="createForm.expiresAt"
+                  type="datetime-local"
+                  :class="[
+                    'w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-1',
+                    themeStore.isDark
+                      ? 'bg-gray-800 border-gray-700 text-white focus:ring-blue-500'
+                      : 'bg-white border-gray-300 text-gray-900 focus:ring-blue-500'
+                  ]"
+                />
+                <p :class="['text-xs mt-1', themeStore.isDark ? 'text-gray-500' : 'text-gray-400']">{{ t('redeemCodes.expiresAtHint') }}</p>
+              </div>
+
+              <!-- 备注 -->
+              <div>
+                <label :class="['block text-sm font-medium mb-1', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">{{ t('redeemCodes.remark') }}</label>
+                <input
+                  v-model="createForm.remark"
+                  type="text"
+                  maxlength="200"
+                  :placeholder="t('redeemCodes.remarkPlaceholder')"
+                  :class="[
+                    'w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-1',
+                    themeStore.isDark
+                      ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:ring-blue-500'
+                      : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400 focus:ring-blue-500'
+                  ]"
+                />
+              </div>
+            </div>
+
+            <div :class="['flex justify-end gap-3 px-6 py-4 border-t', themeStore.isDark ? 'border-gray-800' : 'border-gray-200']">
+              <button
+                :class="[
+                  'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                  themeStore.isDark
+                    ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                ]"
+                @click="showCreateModal = false"
+              >
+                {{ t('common.cancel') }}
+              </button>
+              <button
+                :disabled="creating"
+                :class="[
+                  'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                  creating ? 'opacity-50 cursor-not-allowed' : '',
+                  themeStore.isDark
+                    ? 'bg-blue-600 text-white hover:bg-blue-500'
+                    : 'bg-blue-600 text-white hover:bg-blue-700'
+                ]"
+                @click="handleCreate"
+              >
+                <span v-if="creating" class="flex items-center gap-2">
+                  <span class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
+                  {{ t('common.creating') }}
+                </span>
+                <span v-else>{{ t('common.create') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 批量创建结果弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showBatchResultModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" @click.self="showBatchResultModal = false">
+          <div :class="['w-full max-w-lg rounded-xl shadow-xl', themeStore.isDark ? 'bg-gray-900' : 'bg-white']">
+            <div :class="['flex items-center justify-between px-6 py-4 border-b', themeStore.isDark ? 'border-gray-800' : 'border-gray-200']">
+              <h3 :class="['text-lg font-semibold', themeStore.isDark ? 'text-white' : 'text-gray-900']">{{ t('redeemCodes.batchResult') }}</h3>
+              <button :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'" @click="showBatchResultModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="px-6 py-4">
+              <!-- 批次 ID -->
+              <div v-if="batchCreatedBatchId" :class="['mb-4 p-3 rounded-lg', themeStore.isDark ? 'bg-blue-900/30' : 'bg-blue-50']">
+                <p :class="['text-sm', themeStore.isDark ? 'text-blue-400' : 'text-blue-600']">
+                  <span class="font-medium">{{ t('redeemCodes.batchId') }}:</span>
+                  <code :class="['ml-2 px-2 py-0.5 rounded', themeStore.isDark ? 'bg-blue-900/50' : 'bg-blue-100']">{{ batchCreatedBatchId }}</code>
+                </p>
+                <p :class="['text-xs mt-1', themeStore.isDark ? 'text-blue-500' : 'text-blue-500']">
+                  {{ t('redeemCodes.batchLimitHint') }}
+                </p>
+              </div>
+              <div :class="['p-4 rounded-lg font-mono text-sm max-h-80 overflow-y-auto', themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700']">
+                <div v-for="(code, index) in batchCreatedCodes" :key="index" class="py-0.5">{{ code }}</div>
+              </div>
+            </div>
+
+            <div :class="['flex justify-end gap-3 px-6 py-4 border-t', themeStore.isDark ? 'border-gray-800' : 'border-gray-200']">
+              <button
+                :class="[
+                  'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                  copiedBatch
+                    ? (themeStore.isDark ? 'bg-green-600 text-white' : 'bg-green-600 text-white')
+                    : (themeStore.isDark ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-blue-600 text-white hover:bg-blue-700')
+                ]"
+                @click="copyBatchCodes"
+              >
+                <svg v-if="copiedBatch" 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="M5 13l4 4L19 7" />
+                </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="1.5" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                {{ copiedBatch ? t('common.copied') : t('redeemCodes.copyAll') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 使用记录弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showUsagesModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" @click.self="showUsagesModal = false">
+          <div :class="['w-full max-w-lg rounded-xl shadow-xl', themeStore.isDark ? 'bg-gray-900' : 'bg-white']">
+            <div :class="['flex items-center justify-between px-6 py-4 border-b', themeStore.isDark ? 'border-gray-800' : 'border-gray-200']">
+              <h3 :class="['text-lg font-semibold', themeStore.isDark ? 'text-white' : 'text-gray-900']">{{ t('redeemCodes.usageRecords') }}</h3>
+              <button :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'" @click="showUsagesModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="px-6 py-4">
+              <div v-if="usagesLoading" class="py-8 text-center">
+                <div class="inline-block w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+              </div>
+              <div v-else-if="usages.length === 0" class="py-8 text-center">
+                <p :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">{{ t('redeemCodes.noUsages') }}</p>
+              </div>
+              <div v-else class="space-y-3 max-h-80 overflow-y-auto">
+                <div
+                  v-for="usage in usages"
+                  :key="usage.id"
+                  :class="['flex items-center justify-between p-3 rounded-lg', themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100']"
+                >
+                  <div>
+                    <p :class="['font-medium', themeStore.isDark ? 'text-white' : 'text-gray-900']">{{ usage.user.username }}</p>
+                    <p :class="['text-sm', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">{{ usage.instance.name }}</p>
+                  </div>
+                  <span :class="['text-sm', themeStore.isDark ? 'text-gray-500' : 'text-gray-400']">{{ formatDate(usage.usedAt) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 删除确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showDeleteModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" @click.self="showDeleteModal = false">
+          <div :class="['w-full max-w-sm rounded-xl shadow-xl', themeStore.isDark ? 'bg-gray-900' : 'bg-white']">
+            <div class="p-6 text-center">
+              <div :class="['w-12 h-12 mx-auto mb-4 rounded-full flex items-center justify-center', themeStore.isDark ? 'bg-red-900/30' : 'bg-red-100']">
+                <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <h3 :class="['text-lg font-semibold mb-2', themeStore.isDark ? 'text-white' : 'text-gray-900']">{{ t('redeemCodes.confirmDelete') }}</h3>
+              <p :class="['text-sm mb-6', themeStore.isDark ? 'text-gray-400' : 'text-gray-500']">
+                {{ t('redeemCodes.confirmDeleteMessage', { count: selectedIds.size }) }}
+              </p>
+              <div class="flex gap-3">
+                <button
+                  :class="[
+                    'flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                    themeStore.isDark
+                      ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  ]"
+                  @click="showDeleteModal = false"
+                >
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  :disabled="deleting"
+                  :class="[
+                    'flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                    deleting ? 'opacity-50 cursor-not-allowed' : '',
+                    themeStore.isDark
+                      ? 'bg-red-600 text-white hover:bg-red-500'
+                      : 'bg-red-600 text-white hover:bg-red-700'
+                  ]"
+                  @click="confirmDelete"
+                >
+                  {{ deleting ? t('common.deleting') : t('common.delete') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/client/src/components/host/HostStorageTab.vue b/client/src/components/host/HostStorageTab.vue
new file mode 100644
index 0000000..693a2e2
--- /dev/null
+++ b/client/src/components/host/HostStorageTab.vue
@@ -0,0 +1,801 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import api from '@/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface StoragePool {
+  name: string
+  driver: string
+  description: string
+  status: string
+  purpose?: 'instance_data' | 'instance_storage' | null
+  config: Record<string, string>
+  usedBy: number
+  space?: { used: number; total: number } | null
+}
+
+interface Props {
+  hostId: number
+}
+
+const props = defineProps<Props>()
+
+const loading = ref(true)
+const pools = ref<StoragePool[]>([])
+const showCreateModal = ref(false)
+const creating = ref(false)
+const deleting = ref<string | null>(null)
+
+// 编辑模态框状态
+const showEditModal = ref(false)
+const editing = ref(false)
+const editForm = ref({
+  name: '',
+  driver: '',
+  currentSize: '',
+  newSizeValue: '',
+  newSizeUnit: 'GiB' as 'GiB' | 'TiB',
+  description: '',
+  purpose: 'instance_data' as 'instance_data' | 'instance_storage'
+})
+
+// 单位选项
+const sizeUnits = ['GiB', 'TiB']
+
+// 创建模式：create = 创建新存储池，import = 导入已有存储池
+const createMode = ref<'create' | 'import'>('create')
+
+// 导入模式下的驱动类型
+const importDriver = ref<'zfs' | 'lvm' | 'btrfs' | 'dir'>('zfs')
+// 底层存储源名称（如 ZFS 池名、LVM VG 名、目录路径）
+const importSource = ref('')
+
+// 表单
+const form = ref({
+  name: '',
+  driver: 'zfs' as 'zfs' | 'lvm' | 'btrfs' | 'dir',
+  source: '',
+  sizeValue: '',
+  sizeUnit: 'GiB' as 'GiB' | 'TiB',
+  zfsPoolName: '',
+  lvmVgName: '',
+  lvmUseThinpool: true,
+  description: '',
+  purpose: 'instance_data' as 'instance_data' | 'instance_storage'
+})
+
+// 驱动选项
+const driverOptions = [
+  { value: 'zfs', label: 'ZFS', desc: 'admin.hosts.storage.zfsDesc' },
+  { value: 'lvm', label: 'LVM', desc: 'admin.hosts.storage.lvmDesc' },
+  { value: 'btrfs', label: 'Btrfs', desc: 'admin.hosts.storage.btrfsDesc' },
+  { value: 'dir', label: 'DIR', desc: 'admin.hosts.storage.dirDesc' }
+]
+
+const selectedDriverDesc = computed(() => {
+  const opt = driverOptions.find(d => d.value === form.value.driver)
+  return opt ? t(opt.desc) : ''
+})
+
+// 使用 Loop 文件模式（不指定 source）- ZFS/LVM/Btrfs 都支持
+const useLoop = ref(false)
+
+watch(() => form.value.driver, () => {
+  // 重置部分字段
+  form.value.source = ''
+  form.value.sizeValue = ''
+  form.value.sizeUnit = 'GiB'
+  form.value.zfsPoolName = ''
+  form.value.lvmVgName = ''
+  useLoop.value = false
+})
+
+// 切换创建模式时重置表单
+watch(createMode, () => {
+  form.value.source = ''
+  form.value.sizeValue = ''
+  form.value.zfsPoolName = ''
+  form.value.lvmVgName = ''
+  useLoop.value = false
+  importSource.value = ''
+  importDriver.value = 'zfs'
+})
+
+onMounted(() => {
+  loadPools()
+})
+
+// 当 hostId 变化时，重置状态并重新加载数据
+watch(() => props.hostId, () => {
+  // 重置状态
+  pools.value = []
+  showCreateModal.value = false
+  showEditModal.value = false
+  // 重新加载数据
+  loadPools()
+})
+
+async function loadPools() {
+  loading.value = true
+  try {
+    const res = await api.hosts.getStoragePools(props.hostId)
+    pools.value = res.pools || []
+  } catch (err: any) {
+    toast.error(t('admin.hosts.storage.loadFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreateModal() {
+  createMode.value = 'create'
+  form.value = {
+    name: '',
+    driver: 'zfs',
+    source: '',
+    sizeValue: '',
+    sizeUnit: 'GiB',
+    zfsPoolName: '',
+    lvmVgName: '',
+    lvmUseThinpool: true,
+    description: '',
+    purpose: 'instance_data'
+  }
+  useLoop.value = false
+  importDriver.value = 'zfs'
+  importSource.value = ''
+  showCreateModal.value = true
+}
+
+async function createPool() {
+  if (!form.value.name) {
+    toast.error(t('admin.hosts.storage.nameRequired'))
+    return
+  }
+
+  creating.value = true
+  try {
+    // 模式2：导入已有存储池
+    if (createMode.value === 'import') {
+      // Btrfs 和 DIR 类型必须提供底层存储源
+      if ((importDriver.value === 'btrfs' || importDriver.value === 'dir') && !importSource.value) {
+        toast.error(t('admin.hosts.storage.importSourceRequired'))
+        return
+      }
+      
+      const result = await api.hosts.createStoragePool(props.hostId, {
+        name: form.value.name,
+        driver: importDriver.value,
+        existingSource: importSource.value || undefined,
+        description: form.value.description || undefined,
+        purpose: form.value.purpose,
+        useExisting: true
+      })
+      if (result.imported) {
+        toast.success(t('admin.hosts.storage.importSuccess'))
+      } else {
+        toast.success(t('admin.hosts.storage.linkSuccess'))
+      }
+      showCreateModal.value = false
+      await loadPools()
+      return
+    }
+
+    // 模式1：创建新存储池
+    // 验证 - ZFS/LVM/Btrfs 都支持 Loop 文件
+    const supportsLoop = ['zfs', 'lvm', 'btrfs'].includes(form.value.driver)
+    if (supportsLoop) {
+      if (!useLoop.value && !form.value.source) {
+        toast.error(t('admin.hosts.storage.sourceRequired'))
+        return
+      }
+      if (useLoop.value && !form.value.sizeValue) {
+        toast.error(t('admin.hosts.storage.sizeRequired'))
+        return
+      }
+    } else if (form.value.driver === 'dir') {
+      if (!form.value.source) {
+        toast.error(t('admin.hosts.storage.pathRequired'))
+        return
+      }
+    }
+
+    // 组合大小字符串
+    const sizeStr = (supportsLoop && useLoop.value && form.value.sizeValue)
+      ? `${form.value.sizeValue}${form.value.sizeUnit}`
+      : undefined
+
+    await api.hosts.createStoragePool(props.hostId, {
+      name: form.value.name,
+      driver: form.value.driver,
+      source: form.value.source || undefined,
+      size: sizeStr,
+      zfsPoolName: form.value.driver === 'zfs' ? form.value.zfsPoolName || undefined : undefined,
+      lvmVgName: form.value.driver === 'lvm' ? form.value.lvmVgName || undefined : undefined,
+      lvmUseThinpool: form.value.driver === 'lvm' ? form.value.lvmUseThinpool : undefined,
+      description: form.value.description || undefined,
+      purpose: form.value.purpose
+    })
+    toast.success(t('admin.hosts.storage.createSuccess'))
+    showCreateModal.value = false
+    await loadPools()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.storage.createFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    creating.value = false
+  }
+}
+
+async function deletePool(poolName: string) {
+  if (!confirm(t('admin.hosts.storage.deleteConfirm', { name: poolName }))) {
+    return
+  }
+
+  deleting.value = poolName
+  try {
+    await api.hosts.deleteStoragePool(props.hostId, poolName)
+    toast.success(t('admin.hosts.storage.deleteSuccess'))
+    await loadPools()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.storage.deleteFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    deleting.value = null
+  }
+}
+
+function formatBytes(bytes: number | undefined | null): string {
+  if (bytes === undefined || bytes === null || isNaN(bytes)) return '-'
+  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]
+}
+
+function hasValidSpaceInfo(pool: StoragePool): boolean {
+  return !!(pool.space && 
+    typeof pool.space.total === 'number' && pool.space.total > 0 &&
+    typeof pool.space.used === 'number' && !isNaN(pool.space.used))
+}
+
+function getUsagePercent(pool: StoragePool): number {
+  if (!hasValidSpaceInfo(pool)) return 0
+  return Math.round((pool.space!.used / pool.space!.total) * 100)
+}
+
+// 打开编辑模态框
+function openEditModal(pool: StoragePool) {
+  editForm.value = {
+    name: pool.name,
+    driver: pool.driver,
+    currentSize: pool.config.size || '',
+    newSizeValue: '',
+    newSizeUnit: 'GiB',
+    description: pool.description || '',
+    purpose: pool.purpose || 'instance_data'
+  }
+  showEditModal.value = true
+}
+
+// 提交编辑
+async function submitEdit() {
+  const data: { size?: string; description?: string; purpose?: 'instance_data' | 'instance_storage' } = {}
+  
+  // 只有填写了新大小才提交
+  if (editForm.value.newSizeValue) {
+    data.size = `${editForm.value.newSizeValue}${editForm.value.newSizeUnit}`
+  }
+  // 描述可以为空，也提交
+  data.description = editForm.value.description
+  // 存储用途
+  data.purpose = editForm.value.purpose
+
+  editing.value = true
+  try {
+    await api.hosts.updateStoragePool(props.hostId, editForm.value.name, data)
+    toast.success(t('admin.hosts.storage.updateSuccess'))
+    showEditModal.value = false
+    await loadPools()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.storage.updateFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    editing.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h3 class="text-lg font-medium text-themed">{{ t('admin.hosts.storage.title') }}</h3>
+        <p class="text-sm text-themed-secondary mt-1">{{ t('admin.hosts.storage.subtitle') }}</p>
+      </div>
+      <button class="btn-primary" @click="openCreateModal">
+        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('admin.hosts.storage.create') }}
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="card p-8 text-center">
+      <svg class="w-8 h-8 animate-spin mx-auto text-themed-muted" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+      <p class="mt-2 text-themed-muted">{{ t('common.loading') }}</p>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="pools.length === 0" class="card p-8 text-center">
+      <svg class="w-12 h-12 mx-auto text-themed-muted mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+      </svg>
+      <p class="text-themed-secondary">{{ t('admin.hosts.storage.empty') }}</p>
+      <button class="btn-primary mt-4" @click="openCreateModal">
+        {{ t('admin.hosts.storage.create') }}
+      </button>
+    </div>
+
+    <!-- Pool List -->
+    <div v-else class="space-y-4">
+      <div
+        v-for="pool in pools"
+        :key="pool.name"
+        class="card p-4"
+      >
+        <div class="flex items-start justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <span class="font-medium text-themed">{{ pool.name }}</span>
+              <span class="badge badge-default text-xs uppercase">{{ pool.driver }}</span>
+              <span
+                v-if="pool.purpose"
+                :class="[
+                  'badge text-xs',
+                  pool.purpose === 'instance_data' ? 'badge-primary' : 'badge-secondary'
+                ]"
+              >
+                {{ pool.purpose === 'instance_data' ? t('admin.hosts.storage.purposeSystemDisk') : t('admin.hosts.storage.purposeStorageDisk') }}
+              </span>
+              <span
+                :class="[
+                  'w-2 h-2 rounded-full',
+                  pool.status === 'Created' ? 'bg-green-500' : 'bg-gray-400'
+                ]"
+              ></span>
+            </div>
+            <p v-if="pool.description" class="text-sm text-themed-secondary mt-1">{{ pool.description }}</p>
+            
+            <!-- 使用量 -->
+            <div v-if="hasValidSpaceInfo(pool)" class="mt-3">
+              <div class="flex items-center justify-between text-xs text-themed-muted mb-1">
+                <span>{{ formatBytes(pool.space?.used) }} / {{ formatBytes(pool.space?.total) }}</span>
+                <span>{{ getUsagePercent(pool) }}%</span>
+              </div>
+              <div class="h-1.5 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'">
+                <div
+                  class="h-full rounded-full transition-all"
+                  :class="getUsagePercent(pool) > 90 ? 'bg-red-500' : getUsagePercent(pool) > 70 ? 'bg-yellow-500' : 'bg-green-500'"
+                  :style="{ width: getUsagePercent(pool) + '%' }"
+                ></div>
+              </div>
+            </div>
+
+            <!-- 配置信息 -->
+            <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-themed-muted">
+              <span v-if="pool.config.source">
+                <span class="text-themed-secondary">Source:</span> {{ pool.config.source }}
+              </span>
+              <span v-if="pool.config.size">
+                <span class="text-themed-secondary">Size:</span> {{ pool.config.size }}
+              </span>
+              <span v-if="pool.config['zfs.pool_name']">
+                <span class="text-themed-secondary">ZFS Pool:</span> {{ pool.config['zfs.pool_name'] }}
+              </span>
+              <span v-if="pool.config['lvm.vg_name']">
+                <span class="text-themed-secondary">VG:</span> {{ pool.config['lvm.vg_name'] }}
+              </span>
+            </div>
+
+            <!-- 使用者 -->
+            <div v-if="pool.usedBy > 0" class="mt-2 text-xs text-themed-muted">
+              <span class="text-themed-secondary">{{ t('admin.hosts.storage.usedBy') }}:</span>
+              {{ pool.usedBy }} {{ t('admin.hosts.storage.volumes') }}
+            </div>
+          </div>
+
+          <div class="flex items-center gap-2 ml-4">
+            <!-- 编辑按钮 -->
+            <button
+              class="btn-secondary btn-sm"
+              @click="openEditModal(pool)"
+            >
+              <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+              </svg>
+            </button>
+            <!-- 删除按钮 -->
+            <button
+              class="btn-danger btn-sm"
+              :disabled="deleting === pool.name || pool.usedBy > 0"
+              @click="deletePool(pool.name)"
+            >
+              <svg v-if="deleting === pool.name" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showCreateModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showCreateModal = false"></div>
+          <div class="modal-content max-w-lg">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.hosts.storage.createTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showCreateModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body space-y-4">
+              <!-- 模式切换 - 分段按钮组样式 -->
+              <div class="inline-flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg w-full">
+                <button
+                  type="button"
+                  :class="[
+                    'flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-all',
+                    createMode === 'create'
+                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                  ]"
+                  @click="createMode = 'create'"
+                >
+                  {{ t('admin.hosts.storage.modeCreate') }}
+                </button>
+                <button
+                  type="button"
+                  :class="[
+                    'flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-all',
+                    createMode === 'import'
+                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                  ]"
+                  @click="createMode = 'import'"
+                >
+                  {{ t('admin.hosts.storage.modeImport') }}
+                </button>
+              </div>
+
+              <!-- 模式说明 -->
+              <p class="text-xs text-themed-muted">
+                {{ createMode === 'create' ? t('admin.hosts.storage.modeCreateHint') : t('admin.hosts.storage.modeImportHint') }}
+              </p>
+
+              <!-- 名称 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.poolName') }}</label>
+                <input
+                  v-model="form.name"
+                  type="text"
+                  class="input"
+                  placeholder="default"
+                  pattern="^[a-zA-Z0-9_-]+$"
+                  @input="form.name = form.name.replace(/[^a-zA-Z0-9_-]/g, '')"
+                />
+              </div>
+
+              <!-- 导入模式的配置 -->
+              <template v-if="createMode === 'import'">
+                <!-- 驱动类型 -->
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.driver') }}</label>
+                  <select v-model="importDriver" class="input">
+                    <option v-for="opt in driverOptions" :key="opt.value" :value="opt.value">
+                      {{ opt.label }}
+                    </option>
+                  </select>
+                </div>
+
+                <!-- 底层存储源 -->
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">
+                    {{ importDriver === 'zfs' ? t('admin.hosts.storage.importZfsSource') :
+                      importDriver === 'lvm' ? t('admin.hosts.storage.importLvmSource') :
+                      importDriver === 'btrfs' ? t('admin.hosts.storage.importBtrfsSource') :
+                      t('admin.hosts.storage.importDirSource') }}
+                    <span v-if="importDriver === 'btrfs' || importDriver === 'dir'" class="text-red-500">*</span>
+                  </label>
+                  <input
+                    v-model="importSource"
+                    type="text"
+                    class="input"
+                    :placeholder="importDriver === 'zfs' ? 'incus-pool' :
+                      importDriver === 'lvm' ? 'incus-vg' :
+                      importDriver === 'btrfs' ? '/dev/sdb' :
+                      '/mnt/storage'"
+                  />
+                  <p class="text-xs text-themed-muted mt-1">
+                    {{ importDriver === 'zfs' ? t('admin.hosts.storage.importZfsHint') :
+                      importDriver === 'lvm' ? t('admin.hosts.storage.importLvmHint') :
+                      importDriver === 'btrfs' ? t('admin.hosts.storage.importBtrfsHint') :
+                      t('admin.hosts.storage.importDirHint') }}
+                  </p>
+                </div>
+              </template>
+
+              <!-- 创建新池模式的配置 -->
+              <template v-if="createMode === 'create'">
+                <!-- 驱动类型 -->
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.driver') }}</label>
+                  <select v-model="form.driver" class="input">
+                    <option v-for="opt in driverOptions" :key="opt.value" :value="opt.value">
+                      {{ opt.label }}
+                    </option>
+                  </select>
+                  <p class="text-xs text-themed-muted mt-1">{{ selectedDriverDesc }}</p>
+                </div>
+
+                <!-- ZFS 配置 -->
+                <template v-if="form.driver === 'zfs'">
+                  <div class="flex items-center gap-2">
+                    <input id="useLoop" v-model="useLoop" type="checkbox" class="checkbox" />
+                    <label for="useLoop" class="text-sm text-themed">{{ t('admin.hosts.storage.useLoop') }}</label>
+                  </div>
+                  <div v-if="!useLoop">
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.source') }}</label>
+                    <input v-model="form.source" type="text" class="input" placeholder="/dev/disk/by-id/nvme-xxx" />
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.zfsSourceHint') }}</p>
+                  </div>
+                  <div v-else>
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.size') }}</label>
+                    <div class="flex gap-2">
+                      <input
+                        v-model="form.sizeValue"
+                        type="number"
+                        min="1"
+                        class="input flex-1"
+                        placeholder="50"
+                      />
+                      <select v-model="form.sizeUnit" class="input w-24">
+                        <option v-for="unit in sizeUnits" :key="unit" :value="unit">{{ unit }}</option>
+                      </select>
+                    </div>
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.loopSizeHint') }}</p>
+                  </div>
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.zfsPoolName') }}</label>
+                    <input v-model="form.zfsPoolName" type="text" class="input" placeholder="incus-pool" />
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.zfsPoolNameHint') }}</p>
+                  </div>
+                </template>
+
+                <!-- LVM 配置 -->
+                <template v-if="form.driver === 'lvm'">
+                  <div class="flex items-center gap-2">
+                    <input id="useLoopLvm" v-model="useLoop" type="checkbox" class="checkbox" />
+                    <label for="useLoopLvm" class="text-sm text-themed">{{ t('admin.hosts.storage.useLoop') }}</label>
+                  </div>
+                  <div v-if="!useLoop">
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.source') }}</label>
+                    <input v-model="form.source" type="text" class="input" placeholder="/dev/sdb" />
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.lvmSourceHint') }}</p>
+                  </div>
+                  <div v-else>
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.size') }}</label>
+                    <div class="flex gap-2">
+                      <input
+                        v-model="form.sizeValue"
+                        type="number"
+                        min="1"
+                        class="input flex-1"
+                        placeholder="50"
+                      />
+                      <select v-model="form.sizeUnit" class="input w-24">
+                        <option v-for="unit in sizeUnits" :key="unit" :value="unit">{{ unit }}</option>
+                      </select>
+                    </div>
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.loopSizeHint') }}</p>
+                  </div>
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.lvmVgName') }}</label>
+                    <input v-model="form.lvmVgName" type="text" class="input" placeholder="incus-vg" />
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <input id="lvmUseThinpool" v-model="form.lvmUseThinpool" type="checkbox" class="checkbox" />
+                    <label for="lvmUseThinpool" class="text-sm text-themed">{{ t('admin.hosts.storage.lvmUseThinpool') }}</label>
+                  </div>
+                  <p class="text-xs text-themed-muted">{{ t('admin.hosts.storage.lvmThinpoolHint') }}</p>
+                </template>
+
+                <!-- Btrfs 配置 -->
+                <template v-if="form.driver === 'btrfs'">
+                  <div class="flex items-center gap-2">
+                    <input id="useLoopBtrfs" v-model="useLoop" type="checkbox" class="checkbox" />
+                    <label for="useLoopBtrfs" class="text-sm text-themed">{{ t('admin.hosts.storage.useLoop') }}</label>
+                  </div>
+                  <div v-if="!useLoop">
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.source') }}</label>
+                    <input v-model="form.source" type="text" class="input" placeholder="/dev/sdb" />
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.btrfsSourceHint') }}</p>
+                  </div>
+                  <div v-else>
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.size') }}</label>
+                    <div class="flex gap-2">
+                      <input
+                        v-model="form.sizeValue"
+                        type="number"
+                        min="1"
+                        class="input flex-1"
+                        placeholder="50"
+                      />
+                      <select v-model="form.sizeUnit" class="input w-24">
+                        <option v-for="unit in sizeUnits" :key="unit" :value="unit">{{ unit }}</option>
+                      </select>
+                    </div>
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.loopSizeHint') }}</p>
+                  </div>
+                </template>
+
+                <!-- DIR 配置 -->
+                <template v-if="form.driver === 'dir'">
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.dirPath') }}</label>
+                    <input v-model="form.source" type="text" class="input" placeholder="/mnt/data/incus-storage" />
+                    <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.dirPathHint') }}</p>
+                  </div>
+                </template>
+              </template> <!-- end of createMode === 'create' -->
+
+              <!-- 存储用途 -->
+              <div class="border-t border-themed pt-4">
+                <label class="block text-xs text-themed-muted mb-2">{{ t('admin.hosts.storage.purpose') }}</label>
+                <div class="space-y-2">
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input v-model="form.purpose" type="radio" value="instance_data" class="radio" />
+                    <span class="text-sm text-themed">{{ t('admin.hosts.storage.forInstances') }}</span>
+                  </label>
+                  <p class="text-xs text-themed-muted ml-5">{{ t('admin.hosts.storage.forInstancesHint') }}</p>
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input v-model="form.purpose" type="radio" value="instance_storage" class="radio" />
+                    <span class="text-sm text-themed">{{ t('admin.hosts.storage.forVolumes') }}</span>
+                  </label>
+                  <p class="text-xs text-themed-muted ml-5">{{ t('admin.hosts.storage.forVolumesHint') }}</p>
+                </div>
+              </div>
+
+              <!-- 描述 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.description') }}</label>
+                <input v-model="form.description" type="text" class="input" :placeholder="t('common.notSet')" />
+              </div>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showCreateModal = false">{{ t('common.cancel') }}</button>
+              <button class="btn-primary" :disabled="creating || !form.name" @click="createPool">
+                <svg v-if="creating" class="w-4 h-4 animate-spin mr-1.5" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ t('common.create') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Edit Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showEditModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showEditModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.hosts.storage.editTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showEditModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body space-y-4">
+              <!-- 存储池名称（只读） -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.poolName') }}</label>
+                <input :value="editForm.name" type="text" class="input" disabled />
+              </div>
+
+              <!-- 驱动类型（只读） -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.driver') }}</label>
+                <input :value="editForm.driver.toUpperCase()" type="text" class="input" disabled />
+              </div>
+
+              <!-- 当前大小 -->
+              <div v-if="editForm.currentSize">
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.currentSize') }}</label>
+                <input :value="editForm.currentSize" type="text" class="input" disabled />
+              </div>
+
+              <!-- 新大小（扩容） -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.newSize') }}</label>
+                <div class="flex gap-2">
+                  <input
+                    v-model="editForm.newSizeValue"
+                    type="number"
+                    min="1"
+                    class="input flex-1"
+                    placeholder="100"
+                  />
+                  <select v-model="editForm.newSizeUnit" class="input w-24">
+                    <option v-for="unit in sizeUnits" :key="unit" :value="unit">{{ unit }}</option>
+                  </select>
+                </div>
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.storage.newSizeHint') }}</p>
+              </div>
+
+              <!-- 描述 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.storage.description') }}</label>
+                <input v-model="editForm.description" type="text" class="input" :placeholder="t('common.notSet')" />
+              </div>
+              
+              <!-- 存储用途 -->
+              <div class="border-t border-themed pt-4">
+                <label class="block text-xs text-themed-muted mb-2">{{ t('admin.hosts.storage.purpose') }}</label>
+                <div class="space-y-2">
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input v-model="editForm.purpose" type="radio" value="instance_data" class="radio" />
+                    <span class="text-sm text-themed">{{ t('admin.hosts.storage.forInstances') }}</span>
+                  </label>
+                  <p class="text-xs text-themed-muted ml-5">{{ t('admin.hosts.storage.forInstancesHint') }}</p>
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input v-model="editForm.purpose" type="radio" value="instance_storage" class="radio" />
+                    <span class="text-sm text-themed">{{ t('admin.hosts.storage.forVolumes') }}</span>
+                  </label>
+                  <p class="text-xs text-themed-muted ml-5">{{ t('admin.hosts.storage.forVolumesHint') }}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showEditModal = false">{{ t('common.cancel') }}</button>
+              <button class="btn-primary" :disabled="editing" @click="submitEdit">
+                <svg v-if="editing" class="w-4 h-4 animate-spin mr-1.5" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ t('common.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/components/host/MigrateHostModal.vue b/client/src/components/host/MigrateHostModal.vue
new file mode 100644
index 0000000..66baaa7
--- /dev/null
+++ b/client/src/components/host/MigrateHostModal.vue
@@ -0,0 +1,480 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import type { SystemImage } from '@/types/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+const authStore = useAuthStore()
+
+interface InstanceInfo {
+  id: number
+  name: string
+  packagePlanId?: number | null
+}
+
+interface Props {
+  visible: boolean
+  hostId: number
+  hostName?: string
+  selectedIds: number[]
+  instances?: InstanceInfo[]  // 实例信息，用于判断是否有付费实例
+}
+
+interface Host {
+  id: number
+  name: string
+  status: string
+  location?: string | null
+  countryCode?: string
+  instanceCount?: number
+}
+
+interface Plan {
+  id: number
+  name: string
+  packageId: number
+  packageName: string
+  price: number
+  billingCycle: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}>()
+
+// 目标节点列表
+const hosts = ref<Host[]>([])
+const loadingHosts = ref(false)
+
+// 目标节点的方案列表
+const plans = ref<Plan[]>([])
+const loadingPlans = ref(false)
+
+// 目标系统镜像列表
+const images = ref<SystemImage[]>([])
+const loadingImages = ref(false)
+
+// 选中的目标节点
+const targetHostId = ref<number | null>(null)
+
+// 选中的目标系统
+const targetImage = ref<string>('')
+
+// 选中的目标方案（付费实例必选）
+const targetPlanId = ref<number | null>(null)
+
+// 提交状态
+const isSubmitting = ref(false)
+
+// 结果状态
+const showResult = ref(false)
+const result = ref<{
+  success: boolean
+  message: string
+  successCount: number
+  failedCount: number
+  results: Array<{ id: number; name: string; success: boolean; error?: string }>
+} | null>(null)
+
+// 计算可选节点（排除当前节点，只显示在线节点）
+const availableHosts = computed(() => {
+  return hosts.value.filter(h => h.id !== props.hostId && h.status === 'online')
+})
+
+// 计算是否有付费实例需要迁移
+const hasPaidInstances = computed(() => {
+  if (!props.instances) return false
+  const selectedInstances = props.instances.filter(i => props.selectedIds.includes(i.id))
+  return selectedInstances.some(i => i.packagePlanId !== null && i.packagePlanId !== undefined)
+})
+
+// 是否可以提交
+const canSubmit = computed(() => {
+  if (!targetHostId.value) return false
+  if (!targetImage.value) return false
+  if (hasPaidInstances.value && !targetPlanId.value) return false
+  return true
+})
+
+// 加载节点列表
+async function loadHosts() {
+  loadingHosts.value = true
+  try {
+    // 管理员只加载官方自营节点；非管理员只加载自己的节点
+    const params: any = { pageSize: 200 }
+    if (authStore.isAdmin) {
+      params.scope = 'official'
+    } else {
+      params.mine = 'true'
+    }
+    const res = await api.hosts.list(params) as any
+    hosts.value = res.hosts || res.items || []
+  } catch (err: any) {
+    toast.error(t('host.migrate.loadHostsFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingHosts.value = false
+  }
+}
+
+// 加载目标节点的方案列表
+async function loadPlans(hostId: number) {
+  loadingPlans.value = true
+  plans.value = []
+  targetPlanId.value = null
+  try {
+    const res = await api.hosts.getHostPlans(hostId)
+    plans.value = res.plans || []
+  } catch (err: any) {
+    toast.error(t('host.migrate.loadPlansFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingPlans.value = false
+  }
+}
+
+// 加载目标节点可用的系统镜像
+async function loadImages(hostId: number) {
+  loadingImages.value = true
+  images.value = []
+  targetImage.value = ''
+  try {
+    const res = await api.images.getSystemImages(undefined, undefined, hostId)
+    images.value = res.images || []
+    targetImage.value = images.value[0]?.remoteAlias || ''
+  } catch (err: any) {
+    toast.error(t('host.migrate.loadImagesFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loadingImages.value = false
+  }
+}
+
+// 提交迁移
+async function handleSubmit() {
+  if (!targetHostId.value) {
+    toast.error(t('host.migrate.selectTargetRequired'))
+    return
+  }
+
+  if (!targetImage.value) {
+    toast.error(t('host.migrate.selectImageRequired'))
+    return
+  }
+
+  if (hasPaidInstances.value && !targetPlanId.value) {
+    toast.error(t('host.migrate.selectPlanRequired'))
+    return
+  }
+
+  if (props.selectedIds.length === 0) {
+    toast.error(t('host.migrate.noInstancesSelected'))
+    return
+  }
+
+  isSubmitting.value = true
+  try {
+    const res = await api.hosts.migrateInstances(
+      props.hostId,
+      props.selectedIds,
+      targetHostId.value,
+      targetImage.value,
+      hasPaidInstances.value ? targetPlanId.value ?? undefined : undefined
+    )
+    result.value = {
+      success: res.failedCount === 0,
+      message: res.message,
+      successCount: res.successCount,
+      failedCount: res.failedCount,
+      results: res.results
+    }
+    showResult.value = true
+
+    if (res.successCount > 0) {
+      emit('success')
+    }
+  } catch (err: any) {
+    toast.error(t('host.migrate.failed') + ': ' + (err?.message || String(err)))
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// 关闭弹窗
+function closeModal() {
+  emit('update:visible', false)
+  // 重置状态
+  setTimeout(() => {
+    showResult.value = false
+    result.value = null
+    targetHostId.value = null
+    targetImage.value = ''
+    targetPlanId.value = null
+    plans.value = []
+    images.value = []
+  }, 300)
+}
+
+// 监听目标节点变化，加载方案列表
+watch(targetHostId, (newHostId) => {
+  if (newHostId) {
+    loadImages(newHostId)
+  } else {
+    images.value = []
+    targetImage.value = ''
+  }
+
+  if (newHostId && hasPaidInstances.value) {
+    loadPlans(newHostId)
+  } else {
+    plans.value = []
+    targetPlanId.value = null
+  }
+})
+
+// 监听显示状态，显示时加载节点列表
+watch(() => props.visible, (val) => {
+  if (val) {
+    loadHosts()
+    showResult.value = false
+    result.value = null
+    targetHostId.value = null
+    targetImage.value = ''
+    targetPlanId.value = null
+    plans.value = []
+    images.value = []
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="modal-overlay">
+        <div class="modal-backdrop" @click="closeModal"></div>
+        <div class="modal-content max-w-lg max-h-[90vh] overflow-hidden flex flex-col">
+          <!-- 标题栏 -->
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('host.migrate.title') }}</h3>
+            <button class="text-themed-muted hover:text-themed" :disabled="isSubmitting" @click="closeModal">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 内容区域 -->
+          <div class="modal-body overflow-y-auto flex-1">
+            <!-- 结果显示 -->
+            <template v-if="showResult && result">
+              <div class="text-center py-4">
+                <div
+                  v-if="result.failedCount === 0"
+                  class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
+                  :class="themeStore.isDark ? 'bg-green-900/30' : 'bg-green-100'"
+                >
+                  <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <div
+                  v-else
+                  class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
+                  :class="themeStore.isDark ? 'bg-yellow-900/30' : 'bg-yellow-100'"
+                >
+                  <svg class="w-8 h-8 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <p class="text-lg font-medium text-themed mb-2">{{ result.message }}</p>
+                <p class="text-sm text-themed-secondary">
+                  {{ t('host.migrate.resultSummary', { success: result.successCount, failed: result.failedCount }) }}
+                </p>
+
+                <!-- 失败详情 -->
+                <div
+                  v-if="result.failedCount > 0"
+                  class="mt-4 text-left rounded-lg p-3 max-h-40 overflow-y-auto"
+                  :class="themeStore.isDark ? 'bg-red-900/20' : 'bg-red-50'"
+                >
+                  <p class="text-sm font-medium text-red-500 mb-2">{{ t('host.migrate.failedInstances') }}:</p>
+                  <ul class="text-xs space-y-1">
+                    <li
+                      v-for="item in result.results.filter(r => !r.success)"
+                      :key="item.id"
+                      class="text-themed-secondary"
+                    >
+                      <span class="font-mono">{{ item.name }}</span>: {{ item.error }}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </template>
+
+            <!-- 表单 -->
+            <template v-else>
+              <!-- 已选实例数量 -->
+              <div
+                class="flex items-center gap-2 p-3 rounded-lg"
+                :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+              >
+                <svg class="w-5 h-5 text-themed-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+                <span class="text-sm text-themed">
+                  {{ t('host.migrate.selectedCount', { count: selectedIds.length }) }}
+                </span>
+              </div>
+
+              <!-- 目标节点选择 -->
+              <div>
+                <label class="block text-sm font-medium text-themed-secondary mb-2">
+                  {{ t('host.migrate.targetNode') }}
+                </label>
+                <select
+                  v-model="targetHostId"
+                  class="input w-full"
+                  :disabled="loadingHosts"
+                >
+                  <option :value="null" disabled>{{ t('host.migrate.selectTarget') }}</option>
+                  <option
+                    v-for="host in availableHosts"
+                    :key="host.id"
+                    :value="host.id"
+                  >
+                    {{ host.name }}{{ host.location ? ` (${host.location})` : '' }}
+                    - {{ host.instanceCount || 0 }} {{ t('host.migrate.instances') }}
+                  </option>
+                </select>
+                <p v-if="loadingHosts" class="text-xs text-themed-muted mt-1">
+                  {{ t('common.loading') }}...
+                </p>
+              </div>
+
+              <!-- 目标系统选择 -->
+              <div v-if="targetHostId">
+                <label class="block text-sm font-medium text-themed-secondary mb-2">
+                  {{ t('host.migrate.targetImage') }} <span class="text-red-500">*</span>
+                </label>
+                <select
+                  v-model="targetImage"
+                  class="input w-full"
+                  :disabled="loadingImages || images.length === 0"
+                >
+                  <option value="" disabled>{{ t('host.migrate.selectImage') }}</option>
+                  <option
+                    v-for="image in images"
+                    :key="image.id"
+                    :value="image.remoteAlias"
+                  >
+                    {{ image.name }} ({{ image.remoteAlias }})
+                  </option>
+                </select>
+                <div v-if="targetImage" class="mt-2 flex items-center gap-2 text-xs text-themed-muted">
+                  <DistroIcon
+                    :distro="images.find(image => image.remoteAlias === targetImage)?.icon || targetImage"
+                    :size="16"
+                    class="flex-shrink-0"
+                  />
+                  <span>{{ t('host.migrate.imageHint') }}</span>
+                </div>
+                <p v-if="loadingImages" class="text-xs text-themed-muted mt-1">
+                  {{ t('common.loading') }}...
+                </p>
+                <p v-else-if="images.length === 0" class="text-xs text-red-500 mt-1">
+                  {{ t('host.migrate.noImageAvailable') }}
+                </p>
+              </div>
+
+              <!-- 目标方案选择（付费实例必选） -->
+              <div v-if="hasPaidInstances && targetHostId">
+                <label class="block text-sm font-medium text-themed-secondary mb-2">
+                  {{ t('host.migrate.targetPlan') }} <span class="text-red-500">*</span>
+                </label>
+                <select
+                  v-model="targetPlanId"
+                  class="input w-full"
+                  :disabled="loadingPlans || plans.length === 0"
+                >
+                  <option :value="null" disabled>{{ t('host.migrate.selectPlan') }}</option>
+                  <option
+                    v-for="plan in plans"
+                    :key="plan.id"
+                    :value="plan.id"
+                  >
+                    {{ plan.packageName }} - {{ plan.name }} (¥{{ (plan.price / 100).toFixed(2) }}/{{ plan.billingCycle }}{{ t('common.month') }})
+                  </option>
+                </select>
+                <p v-if="loadingPlans" class="text-xs text-themed-muted mt-1">
+                  {{ t('common.loading') }}...
+                </p>
+                <p v-else-if="plans.length === 0" class="text-xs text-red-500 mt-1">
+                  {{ t('host.migrate.noPlanAvailable') }}
+                </p>
+                <p v-else class="text-xs text-themed-muted mt-1">
+                  {{ t('host.migrate.planHint') }}
+                </p>
+              </div>
+
+              <!-- 警告提示 -->
+              <div
+                class="flex items-start gap-2 p-3 rounded-lg"
+                :class="themeStore.isDark ? 'bg-yellow-900/20' : 'bg-yellow-50'"
+              >
+                <svg class="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <div class="text-sm text-themed-secondary">
+                  <p class="font-medium text-yellow-600 dark:text-yellow-400 mb-1">
+                    {{ t('host.migrate.warning') }}
+                  </p>
+                  <ul class="list-disc list-inside space-y-0.5 text-xs">
+                    <li>{{ t('host.migrate.warningCloudInit') }}</li>
+                    <li>{{ t('host.migrate.warningImage') }}</li>
+                    <li>{{ t('host.migrate.warningIp') }}</li>
+                    <li>{{ t('host.migrate.warningNotify') }}</li>
+                  </ul>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- 底部按钮 -->
+          <div class="modal-footer">
+            <template v-if="showResult">
+              <button class="btn-secondary" @click="closeModal">
+                {{ t('common.close') }}
+              </button>
+            </template>
+            <template v-else>
+              <button class="btn-secondary" :disabled="isSubmitting" @click="closeModal">
+                {{ t('common.cancel') }}
+              </button>
+              <button
+                class="btn-primary"
+                :disabled="!canSubmit || isSubmitting || loadingHosts || loadingPlans || loadingImages"
+                @click="handleSubmit"
+              >
+                <svg v-if="isSubmitting" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ isSubmitting ? t('host.migrate.migrating') : t('host.migrate.confirm') }}
+              </button>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* 使用全局 modal 过渡动画，无需额外样式 */
+</style>
diff --git a/client/src/components/host/MyHostConfigTab.vue b/client/src/components/host/MyHostConfigTab.vue
new file mode 100644
index 0000000..91d3701
--- /dev/null
+++ b/client/src/components/host/MyHostConfigTab.vue
@@ -0,0 +1,667 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import { onClickOutside } from '@vueuse/core'
+import { availableFlagCountryCodes, getLocalizedCountryName } from '@/utils/countryDisplay'
+import { buildHostApiUrl, extractHostAddressFromUrl, validateIdentifier, validateName, validateHostAddress, validateIpAddress } from '@/utils/validation'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import FlagIcon from '@/components/FlagIcon.vue'
+
+const { t, locale } = useI18n()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+const toast = useToast()
+
+const isAdmin = computed(() => authStore.user?.role === 'admin')
+
+// 节点名称前缀，仅普通用户需要
+const hostNamePrefix = computed(() => `PEER${authStore.user?.id}-`)
+
+interface Host {
+  id: number
+  name: string
+  url: string
+  location?: string
+  countryCode: string
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  ipv6ParentInterface?: string
+  ipv6Subnet?: string
+  transferEnabled?: boolean
+  trafficResetDay?: number
+  notifyPurchase?: boolean
+  notifyRenew?: boolean
+  notifyDestroy?: boolean
+  enableResourcePool?: boolean
+  announcement?: string | null
+  probeUrl?: string | null
+  natConfig?: {
+    publicIp: string | null
+    publicIpv6?: string | null
+    bindIp?: string | null
+    bindIpv6?: string | null
+    portRangeStart: number | null
+    portRangeEnd: number | null
+  }
+}
+
+interface Props {
+  host: Host
+}
+
+interface Emits {
+  (e: 'saved'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const saving = ref(false)
+
+const form = ref({
+  name: '',
+  nameSuffix: '',
+  hostAddress: '',
+  apiPort: 8443,
+  location: '',
+  countryCode: 'us',
+  cpuAllowanceMax: 0,
+  memoryMax: 0,
+  instanceType: 'container' as 'container' | 'vm' | 'both',
+  ipv6ParentInterface: '',
+  ipv6Subnet: '',
+  transferEnabled: true,
+  trafficResetDay: 1,
+  notifyPurchase: true,
+  notifyRenew: true,
+  notifyDestroy: false,
+  enableResourcePool: true,
+  announcement: '',
+  probeUrl: '',
+  natConfig: {
+    publicIp: '',
+    publicIpv6: '',
+    bindIp: '',
+    bindIpv6: '',
+    portRangeStart: null as number | null,
+    portRangeEnd: null as number | null
+  }
+})
+
+const showCountryDropdown = ref(false)
+const countrySearch = ref('')
+const countryDropdownRef = ref<HTMLElement | null>(null)
+onClickOutside(countryDropdownRef, () => closeCountryDropdown())
+
+const countries = computed(() => {
+  return availableFlagCountryCodes
+    .map(code => ({
+      code,
+      name: getLocalizedCountryName(code, locale.value, (key, fallback) => t(key, fallback))
+    }))
+    .sort((left, right) => left.name.localeCompare(right.name, locale.value))
+})
+
+const selectedCountry = computed(() => {
+  return countries.value.find(country => country.code === form.value.countryCode) || {
+    code: form.value.countryCode,
+    name: getLocalizedCountryName(form.value.countryCode, locale.value, (key, fallback) => t(key, fallback))
+  }
+})
+
+const filteredCountries = computed(() => {
+  const keyword = countrySearch.value.trim().toLowerCase()
+  if (!keyword) return countries.value
+
+  return countries.value.filter(country =>
+    country.name.toLowerCase().includes(keyword) ||
+    country.code.toLowerCase().includes(keyword)
+  )
+})
+
+function toggleCountryDropdown() {
+  showCountryDropdown.value = !showCountryDropdown.value
+  if (!showCountryDropdown.value) {
+    countrySearch.value = ''
+  }
+}
+
+function closeCountryDropdown() {
+  showCountryDropdown.value = false
+  countrySearch.value = ''
+}
+
+function selectCountry(code: string) {
+  form.value.countryCode = code
+  closeCountryDropdown()
+}
+
+const requiresIpv6ParentInterface = computed(() => {
+  return Boolean(form.value.ipv6Subnet.trim() || props.host.ipv6Subnet?.trim())
+})
+
+// 从 URL 提取端口
+function extractPortFromUrl(url: string): number {
+  try {
+    const port = new URL(url).port
+    return port ? parseInt(port, 10) : 8443
+  } catch {
+    return 8443
+  }
+}
+
+watch(() => props.host, (newHost) => {
+  if (newHost) {
+    const hostName = newHost.name || ''
+    // 从节点名称中提取后缀
+    let nameSuffix = ''
+    if (!isAdmin.value && hostName.startsWith(hostNamePrefix.value)) {
+      nameSuffix = hostName.slice(hostNamePrefix.value.length)
+    }
+    
+    form.value = {
+      name: hostName,
+      nameSuffix: nameSuffix,
+      hostAddress: extractHostAddressFromUrl(newHost.url || ''),
+      apiPort: extractPortFromUrl(newHost.url || ''),
+      location: newHost.location || '',
+      countryCode: newHost.countryCode || 'us',
+      cpuAllowanceMax: newHost.cpuAllowanceMax || 0,
+      memoryMax: newHost.memoryMax || 0,
+      instanceType: newHost.instanceType || 'container',
+      ipv6ParentInterface: newHost.ipv6ParentInterface || '',
+      ipv6Subnet: newHost.ipv6Subnet || '',
+      transferEnabled: newHost.transferEnabled !== undefined ? newHost.transferEnabled : true,
+      trafficResetDay: newHost.trafficResetDay || 1,
+      notifyPurchase: newHost.notifyPurchase !== undefined ? newHost.notifyPurchase : true,
+      notifyRenew: newHost.notifyRenew !== undefined ? newHost.notifyRenew : true,
+      notifyDestroy: newHost.notifyDestroy !== undefined ? newHost.notifyDestroy : false,
+      enableResourcePool: newHost.enableResourcePool !== undefined ? newHost.enableResourcePool : true,
+      announcement: newHost.announcement || '',
+      probeUrl: newHost.probeUrl || '',
+      natConfig: {
+        publicIp: newHost.natConfig?.publicIp || '',
+        publicIpv6: newHost.natConfig?.publicIpv6 || '',
+        bindIp: newHost.natConfig?.bindIp || '',
+        bindIpv6: newHost.natConfig?.bindIpv6 || '',
+        portRangeStart: newHost.natConfig?.portRangeStart || null,
+        portRangeEnd: newHost.natConfig?.portRangeEnd || null
+      }
+    }
+  }
+}, { immediate: true })
+
+
+async function saveConfig() {
+  // 根据用户角色确定节点名称
+  let fullName: string
+  if (isAdmin.value) {
+    // 管理员直接使用完整名称
+    if (!form.value.name.trim()) {
+      toast.error(t('admin.hosts.hostNameRequired'))
+      return
+    }
+    fullName = form.value.name
+  } else {
+    // 普通用户使用前缀 + 后缀，前缀不可修改
+    if (!form.value.nameSuffix.trim()) {
+      toast.error(t('resources.hosts.nameSuffixRequired'))
+      return
+    }
+    fullName = hostNamePrefix.value + form.value.nameSuffix
+  }
+  
+  // 验证完整名称
+  const nameValidation = validateIdentifier(fullName, t('admin.hosts.hostName'), 2, 64)
+  if (!nameValidation.valid) {
+    toast.error(nameValidation.message || t('admin.hosts.hostNameHint'))
+    return
+  }
+
+  // 验证服务器地址
+  if (!form.value.hostAddress) {
+    toast.error(t('admin.hosts.ipAddressRequired'))
+    return
+  }
+  const ipValidation = validateHostAddress(form.value.hostAddress, t('admin.hosts.ipAddress'))
+  if (!ipValidation.valid) {
+    toast.error(ipValidation.message || '')
+    return
+  }
+
+  // 验证描述
+  if (form.value.location) {
+    const locationValidation = validateName(form.value.location, t('admin.hosts.hostDesc'), 1, 100)
+    if (!locationValidation.valid) {
+      toast.error(locationValidation.message || '')
+      return
+    }
+  }
+
+  if (requiresIpv6ParentInterface.value && !form.value.ipv6ParentInterface.trim()) {
+    toast.error(t('admin.hosts.ipv6ParentInterfaceRequired'))
+    return
+  }
+
+  // 验证 NAT 网卡 IP，支持 IPv4 / IPv6
+  if (form.value.natConfig?.publicIp) {
+    const natIpValidation = validateIpAddress(form.value.natConfig.publicIp, t('admin.hosts.natPublicIp'))
+    if (!natIpValidation.valid) {
+      toast.error(natIpValidation.message || '')
+      return
+    }
+  }
+  if (form.value.natConfig?.publicIpv6) {
+    const publicIpv6Validation = validateIpAddress(form.value.natConfig.publicIpv6, t('admin.hosts.natPublicIpv6'))
+    if (!publicIpv6Validation.valid || !(publicIpv6Validation.sanitized || form.value.natConfig.publicIpv6).includes(':')) {
+      toast.error(t('admin.hosts.natPublicIpv6Invalid'))
+      return
+    }
+  }
+  if (form.value.natConfig?.bindIp) {
+    const bindIpValidation = validateIpAddress(form.value.natConfig.bindIp, t('admin.hosts.natBindIpv4'))
+    if (!bindIpValidation.valid) {
+      toast.error(bindIpValidation.message || '')
+      return
+    }
+  }
+  if (form.value.natConfig?.bindIpv6) {
+    const bindIpv6Validation = validateIpAddress(form.value.natConfig.bindIpv6, t('admin.hosts.natBindIpv6'))
+    if (!bindIpv6Validation.valid || !(bindIpv6Validation.sanitized || form.value.natConfig.bindIpv6).includes(':')) {
+      toast.error(t('admin.hosts.natBindIpv6Invalid'))
+      return
+    }
+  }
+
+  // 验证端口范围：结束端口不能小于起始端口
+  if (form.value.natConfig?.portRangeStart != null && form.value.natConfig?.portRangeEnd != null) {
+    if (form.value.natConfig.portRangeEnd < form.value.natConfig.portRangeStart) {
+      toast.error(t('admin.hosts.portRangeEndMustBeGreater'))
+      return
+    }
+  }
+
+  saving.value = true
+  try {
+    const url = buildHostApiUrl(form.value.hostAddress, form.value.apiPort || 8443)
+    
+    const result = await api.hosts.update(props.host.id, {
+      name: fullName,
+      url: url,
+      location: form.value.location || undefined,
+      countryCode: form.value.countryCode,
+      cpuAllowanceMax: form.value.cpuAllowanceMax || undefined,
+      memoryMax: form.value.memoryMax || undefined,
+      instanceType: form.value.instanceType,
+      ipv6ParentInterface: form.value.ipv6ParentInterface.trim() || undefined,
+      ipv6Subnet: form.value.ipv6Subnet.trim() || undefined,
+      transferEnabled: form.value.transferEnabled,
+      trafficResetDay: form.value.trafficResetDay,
+      notifyPurchase: form.value.notifyPurchase,
+      notifyRenew: form.value.notifyRenew,
+      notifyDestroy: form.value.notifyDestroy,
+      enableResourcePool: form.value.enableResourcePool,
+      announcement: form.value.announcement || null,
+      probeUrl: form.value.probeUrl || null,
+      natConfig: (form.value.natConfig.publicIp || form.value.natConfig.publicIpv6 || form.value.natConfig.bindIp || form.value.natConfig.bindIpv6 || form.value.natConfig.portRangeStart || form.value.natConfig.portRangeEnd) ? form.value.natConfig : undefined
+    })
+    
+    // 检查节点类型变更带来的套餐警告
+    const response = result as { warnings?: Array<{ code: string; message: string; packages: Array<{ id: number; name: string; instanceType: string }> }> }
+    if (response.warnings && response.warnings.length > 0) {
+      const warning = response.warnings[0]
+      if (warning.code === 'INCOMPATIBLE_PACKAGES') {
+        const packageNames = warning.packages.map(p => p.name).join(', ')
+        toast.warning(`${t('admin.hosts.typeChangeWarning') || '警告'}: ${warning.message}\n套餐: ${packageNames}`, 8000)
+      }
+    }
+    
+    toast.success(t('admin.hosts.hostUpdated'))
+    emit('saved')
+  } catch (err: any) {
+    const errorCode = err?.code
+    const errorMessage = errorCode ? t(`errors.${errorCode}`) : (err?.message || String(err))
+    const details = err?.details ? ` (${err.details})` : ''
+    toast.error(errorMessage + details)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="card p-6">
+    <form class="space-y-6" @submit.prevent="saveConfig">
+      <!-- 基本信息 -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.hostName') }}</label>
+          <!-- 管理员输入完整节点名称 -->
+          <template v-if="isAdmin">
+            <input 
+              v-model="form.name" 
+              type="text" 
+              class="input" 
+              placeholder="node-01" 
+              required 
+              pattern="^[a-zA-Z0-9_-]+$" 
+              @input="form.name = form.name.replace(/[^a-zA-Z0-9_-]/g, '')" 
+            />
+            <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.hostNameHint') }}</p>
+          </template>
+          <!-- 普通用户输入节点名称后缀 -->
+          <template v-else>
+            <div class="flex">
+              <span class="inline-flex items-center px-3 text-sm border border-r-0 rounded-l-lg" :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-400' : 'bg-gray-100 border-gray-300 text-gray-500'">{{ hostNamePrefix }}</span>
+              <input 
+                v-model="form.nameSuffix" 
+                type="text" 
+                class="input rounded-l-none flex-1" 
+                placeholder="myhost" 
+                required 
+                pattern="^[a-zA-Z0-9_-]+$" 
+                @input="form.nameSuffix = form.nameSuffix.replace(/[^a-zA-Z0-9_-]/g, '')" 
+              />
+            </div>
+            <p class="text-xs text-themed-muted mt-1">{{ t('resources.hosts.nameHint') }}</p>
+          </template>
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.hostDesc') }}</label>
+          <input v-model="form.location" type="text" class="input" placeholder="Hong Kong DC1" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-[1fr_120px] gap-4">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ipAddress') }}</label>
+          <div class="flex gap-2">
+            <input v-model="form.hostAddress" type="text" class="input flex-1" placeholder="10.0.0.1 / 2001:db8::1 / node.example.com" required />
+          </div>
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ipAddressHint') }}</p>
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.apiPort') }}</label>
+          <input v-model.number="form.apiPort" type="number" min="1" max="65535" class="input" placeholder="8443" required />
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.apiPortHint') }}</p>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- 国家选择 -->
+        <div ref="countryDropdownRef" class="relative">
+          <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.country') }}</label>
+          <button type="button" class="input w-full flex items-center justify-between" @click="toggleCountryDropdown">
+            <span class="flex items-center gap-2"><FlagIcon :code="form.countryCode" size="sm" />{{ selectedCountry?.name }}</span>
+            <svg class="w-4 h-4 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+          </button>
+          <div v-if="showCountryDropdown" class="absolute z-50 w-full mt-1 overflow-hidden rounded-lg border shadow-xl" :class="themeStore.isDark ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'">
+            <div class="p-2 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+              <input
+                v-model="countrySearch"
+                type="search"
+                class="input h-9 text-sm"
+                :placeholder="t('common.searchPlaceholder')"
+                autocomplete="off"
+                autofocus
+                @keydown.enter.prevent.stop
+                @keydown.stop
+              />
+            </div>
+            <div class="max-h-60 overflow-auto py-1">
+              <button
+                v-for="c in filteredCountries"
+                :key="c.code"
+                type="button"
+                class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors"
+                :class="[
+                  themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100',
+                  form.countryCode === c.code ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-900') : ''
+                ]"
+                @click="selectCountry(c.code)"
+              >
+                <FlagIcon :code="c.code" size="sm" />{{ c.name }}
+              </button>
+              <div v-if="filteredCountries.length === 0" class="px-3 py-6 text-center text-sm text-themed-muted">
+                {{ t('common.noSearchResults') }}
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- IPv6 父接口 -->
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">
+            {{ t('admin.hosts.ipv6ParentInterface') }}
+            <span v-if="requiresIpv6ParentInterface" class="text-red-500">*</span>
+          </label>
+          <input v-model="form.ipv6ParentInterface" type="text" class="input" placeholder="eth0" />
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ipv6ParentInterfaceHint') }}</p>
+        </div>
+      </div>
+
+      <!-- IPv6 子网 -->
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ipv6Subnet') }}</label>
+        <input v-model="form.ipv6Subnet" type="text" class="input" placeholder="2001:db8::/48" />
+        <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ipv6SubnetHint') }}</p>
+      </div>
+
+      <!-- 资源限制 -->
+      <div class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.resourceLimits') }}</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.cpuAllowanceMax') }}</label>
+            <input v-model.number="form.cpuAllowanceMax" type="number" class="input" placeholder="0" :min="0" step="5" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.memoryMax') }} (MB)</label>
+            <input v-model.number="form.memoryMax" type="number" class="input" placeholder="0" :min="0" step="64" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.instanceTypeLabel') }}</label>
+            <select v-model="form.instanceType" class="input">
+              <option value="container">{{ t('admin.hosts.typeContainer') }}</option>
+              <option value="vm">{{ t('admin.hosts.typeVm') }}</option>
+              <option value="both">{{ t('admin.hosts.typeBoth') }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- NAT 配置 -->
+      <div class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.natConfig') }}</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natPublicIpv4') }}</label>
+            <input v-model="form.natConfig.publicIp" type="text" class="input" :placeholder="t('admin.hosts.natPublicIpv4Placeholder')" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natPublicIpv4Desc') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natPublicIpv6') }}</label>
+            <input v-model="form.natConfig.publicIpv6" type="text" class="input" :placeholder="t('admin.hosts.natPublicIpv6Placeholder')" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natPublicIpv6Desc') }}</p>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natBindIpv4') }}</label>
+            <input v-model="form.natConfig.bindIp" type="text" class="input" :placeholder="t('admin.hosts.natBindIpv4Placeholder')" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natBindIpv4Desc') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natBindIpv6') }}</label>
+            <input v-model="form.natConfig.bindIpv6" type="text" class="input" :placeholder="t('admin.hosts.natBindIpv6Placeholder')" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natBindIpv6Desc') }}</p>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.portRangeStart') }}</label>
+            <input v-model.number="form.natConfig.portRangeStart" type="number" class="input" placeholder="10000" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.portRangeEnd') }}</label>
+            <input v-model.number="form.natConfig.portRangeEnd" type="number" class="input" placeholder="60000" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 转移控制 -->
+      <div class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.transferControl') }}</h3>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-themed">{{ t('admin.hosts.transferEnabled') }}</p>
+            <p class="text-xs text-themed-muted mt-0.5">{{ t('admin.hosts.transferEnabledHint') }}</p>
+          </div>
+          <button
+            type="button"
+            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            :class="form.transferEnabled ? 'bg-blue-600' : (themeStore.isDark ? 'bg-gray-600' : 'bg-gray-300')"
+            @click="form.transferEnabled = !form.transferEnabled"
+          >
+            <span
+              class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+              :class="form.transferEnabled ? 'translate-x-5' : 'translate-x-0'"
+            />
+          </button>
+        </div>
+      </div>
+
+      <!-- 节点通知 -->
+      <div v-if="!isAdmin" class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-2">{{ t('admin.hosts.notificationSettings') }}</h3>
+        <p class="text-xs text-themed-muted mb-4">{{ t('admin.hosts.notificationSettingsHint') }}</p>
+        <div class="space-y-4">
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <p class="text-sm text-themed">{{ t('admin.hosts.notifyPurchase') }}</p>
+              <p class="text-xs text-themed-muted mt-0.5">{{ t('admin.hosts.notifyPurchaseHint') }}</p>
+            </div>
+            <button
+              type="button"
+              class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              :class="form.notifyPurchase ? 'bg-blue-600' : (themeStore.isDark ? 'bg-gray-600' : 'bg-gray-300')"
+              @click="form.notifyPurchase = !form.notifyPurchase"
+            >
+              <span
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                :class="form.notifyPurchase ? 'translate-x-5' : 'translate-x-0'"
+              />
+            </button>
+          </div>
+
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <p class="text-sm text-themed">{{ t('admin.hosts.notifyRenew') }}</p>
+              <p class="text-xs text-themed-muted mt-0.5">{{ t('admin.hosts.notifyRenewHint') }}</p>
+            </div>
+            <button
+              type="button"
+              class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              :class="form.notifyRenew ? 'bg-blue-600' : (themeStore.isDark ? 'bg-gray-600' : 'bg-gray-300')"
+              @click="form.notifyRenew = !form.notifyRenew"
+            >
+              <span
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                :class="form.notifyRenew ? 'translate-x-5' : 'translate-x-0'"
+              />
+            </button>
+          </div>
+
+          <div class="flex items-center justify-between gap-4">
+            <div>
+              <p class="text-sm text-themed">{{ t('admin.hosts.notifyDestroy') }}</p>
+              <p class="text-xs text-themed-muted mt-0.5">{{ t('admin.hosts.notifyDestroyHint') }}</p>
+            </div>
+            <button
+              type="button"
+              class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              :class="form.notifyDestroy ? 'bg-blue-600' : (themeStore.isDark ? 'bg-gray-600' : 'bg-gray-300')"
+              @click="form.notifyDestroy = !form.notifyDestroy"
+            >
+              <span
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                :class="form.notifyDestroy ? 'translate-x-5' : 'translate-x-0'"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 额外配置 -->
+      <div class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.extraConfig') }}</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.trafficResetDay') }}</label>
+            <input v-model.number="form.trafficResetDay" type="number" class="input" :min="1" :max="28" placeholder="1" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.trafficResetDayHint') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.enableResourcePool') }}</label>
+            <div class="flex items-center justify-between mt-2">
+              <p class="text-xs text-themed-muted">{{ t('admin.hosts.enableResourcePoolHint') }}</p>
+              <button
+                type="button"
+                class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                :class="form.enableResourcePool ? 'bg-blue-600' : (themeStore.isDark ? 'bg-gray-600' : 'bg-gray-300')"
+                @click="form.enableResourcePool = !form.enableResourcePool"
+              >
+                <span
+                  class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                  :class="form.enableResourcePool ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 节点公告 -->
+      <div class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.announcement') }}</h3>
+        <div>
+          <textarea 
+            v-model="form.announcement" 
+            class="input min-h-[100px] resize-y" 
+            :placeholder="t('admin.hosts.announcementPlaceholder')"
+            rows="3"
+            maxlength="1000"
+          />
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.announcementHint') }}</p>
+        </div>
+      </div>
+
+      <!-- 探针地址 -->
+      <div class="border-t border-themed pt-6">
+        <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.probeUrl') }}</h3>
+        <div>
+          <input 
+            v-model="form.probeUrl" 
+            type="url" 
+            class="input" 
+            :placeholder="t('admin.hosts.probeUrlPlaceholder')"
+            maxlength="500"
+          />
+          <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.probeUrlHint') }}</p>
+        </div>
+      </div>
+
+      <!-- 按钮 -->
+      <div class="flex items-center justify-end gap-3 pt-4 border-t border-themed">
+        <button type="submit" class="btn-primary" :disabled="saving || !form.name || !form.hostAddress">
+          <svg v-if="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+          {{ t('common.save') }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/client/src/components/icons/AnnouncementIcon.vue b/client/src/components/icons/AnnouncementIcon.vue
new file mode 100644
index 0000000..3dfac3d
--- /dev/null
+++ b/client/src/components/icons/AnnouncementIcon.vue
@@ -0,0 +1,128 @@
+<template>
+  <svg
+    class="announcement-icon"
+    viewBox="0 0 240 240"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid meet"
+    aria-hidden="true"
+  >
+    <defs>
+      <filter id="announcement-glow-neon" x="-50%" y="-50%" width="200%" height="200%">
+        <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.18" result="shadow" />
+        <feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="glow" />
+        <feMerge>
+          <feMergeNode in="shadow" />
+          <feMergeNode in="glow" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <filter id="announcement-glow-intense" x="-50%" y="-50%" width="200%" height="200%">
+        <feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#312e81" flood-opacity="0.22" result="shadow" />
+        <feGaussianBlur in="SourceGraphic" stdDeviation="2.6" result="blurA" />
+        <feGaussianBlur in="SourceGraphic" stdDeviation="0.8" result="blurB" />
+        <feMerge>
+          <feMergeNode in="shadow" />
+          <feMergeNode in="blurA" />
+          <feMergeNode in="blurB" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <linearGradient id="announcement-bg-speaker" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#E9D5FF" />
+        <stop offset="55%" stop-color="#C4B5FD" />
+        <stop offset="100%" stop-color="#A5B4FC" />
+      </linearGradient>
+    </defs>
+
+    <g fill="none" stroke="#0284c7" stroke-linecap="round" filter="url(#announcement-glow-intense)">
+      <path d="M 120 80 Q 150 120 120 160" class="spk-wave w1" />
+      <path d="M 120 80 Q 150 120 120 160" class="spk-wave w2" />
+      <path d="M 120 80 Q 150 120 120 160" class="spk-wave w3" />
+    </g>
+
+    <g class="spk-pulse">
+      <polygon
+        points="65,105 110,75 110,165 65,135"
+        fill="url(#announcement-bg-speaker)"
+        stroke="#0284c7"
+        stroke-width="4"
+        filter="url(#announcement-glow-neon)"
+      />
+      <line
+        x1="110"
+        y1="75"
+        x2="110"
+        y2="165"
+        stroke="#0284c7"
+        stroke-width="6"
+        filter="url(#announcement-glow-intense)"
+        stroke-linecap="round"
+      />
+      <path
+        d="M 45 110 L 65 105 L 65 135 L 45 130 Z"
+        fill="#7e22ce"
+        filter="url(#announcement-glow-intense)"
+      />
+      <rect x="35" y="112" width="10" height="16" fill="#0284c7" rx="2" />
+      <line x1="85" y1="95" x2="85" y2="145" stroke="#7e22ce" stroke-width="2" opacity="0.6" />
+      <line x1="75" y1="105" x2="75" y2="135" stroke="#7e22ce" stroke-width="2" opacity="0.6" />
+    </g>
+
+  </svg>
+</template>
+
+<style scoped>
+.announcement-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.spk-pulse {
+  transform-origin: 80px 120px;
+  animation: announcement-spk-p 0.4s ease-in-out infinite alternate;
+}
+
+.spk-wave {
+  transform-origin: 110px 120px;
+  animation: announcement-s-wave 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
+}
+
+.w1 {
+  animation-delay: 0s;
+}
+
+.w2 {
+  animation-delay: 0.5s;
+}
+
+.w3 {
+  animation-delay: 1s;
+}
+
+@keyframes announcement-spk-p {
+  0% {
+    transform: scale(0.95) skewX(-2deg);
+  }
+
+  100% {
+    transform: scale(1.05) skewX(2deg);
+    filter: brightness(1.3);
+  }
+}
+
+@keyframes announcement-s-wave {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+    stroke-width: 8px;
+  }
+
+  100% {
+    transform: scale(1.8) translateX(15px);
+    opacity: 0;
+    stroke-width: 1px;
+  }
+}
+</style>
diff --git a/client/src/components/icons/DistroIcon.vue b/client/src/components/icons/DistroIcon.vue
new file mode 100644
index 0000000..dff0f25
--- /dev/null
+++ b/client/src/components/icons/DistroIcon.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  siAlmalinux,
+  siAlpinelinux,
+  siArchlinux,
+  siCentos,
+  siDebian,
+  siFedora,
+  siGentoo,
+  siKalilinux,
+  siLinux,
+  siLinuxmint,
+  siOpensuse,
+  siRedhat,
+  siRockylinux,
+  siSuse,
+  siUbuntu,
+  siVoidlinux
+} from 'simple-icons'
+
+interface Props {
+  distro: string
+  size?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24
+})
+
+// 发行版到 simple-icons 图标的映射
+const distroIconMap: Record<string, { path: string; hex: string }> = {
+  almalinux: { path: siAlmalinux.path, hex: siAlmalinux.hex },
+  alma: { path: siAlmalinux.path, hex: siAlmalinux.hex },
+  alpine: { path: siAlpinelinux.path, hex: siAlpinelinux.hex },
+  arch: { path: siArchlinux.path, hex: siArchlinux.hex },
+  centos: { path: siCentos.path, hex: siCentos.hex },
+  debian: { path: siDebian.path, hex: siDebian.hex },
+  fedora: { path: siFedora.path, hex: siFedora.hex },
+  gentoo: { path: siGentoo.path, hex: siGentoo.hex },
+  kali: { path: siKalilinux.path, hex: siKalilinux.hex },
+  mint: { path: siLinuxmint.path, hex: siLinuxmint.hex },
+  opensuse: { path: siOpensuse.path, hex: siOpensuse.hex },
+  suse: { path: siSuse.path, hex: siSuse.hex },
+  oracle: { path: siRedhat.path, hex: 'F80000' }, // Oracle Linux 使用 Red Hat 图标，自定义颜色
+  redhat: { path: siRedhat.path, hex: siRedhat.hex },
+  rhel: { path: siRedhat.path, hex: siRedhat.hex },
+  rockylinux: { path: siRockylinux.path, hex: siRockylinux.hex },
+  rocky: { path: siRockylinux.path, hex: siRockylinux.hex },
+  ubuntu: { path: siUbuntu.path, hex: siUbuntu.hex },
+  void: { path: siVoidlinux.path, hex: siVoidlinux.hex },
+  linux: { path: siLinux.path, hex: siLinux.hex }
+}
+
+function getDistroKey(distro: string): string {
+  const lower = distro.toLowerCase()
+  // 按优先级匹配（更具体的先匹配）
+  const priorities = [
+    'almalinux', 'alma',
+    'alpine',
+    'arch',
+    'centos',
+    'debian',
+    'fedora',
+    'gentoo',
+    'kali',
+    'mint',
+    'opensuse', 'suse',
+    'oracle',
+    'redhat', 'rhel',
+    'rockylinux', 'rocky',
+    'ubuntu',
+    'void'
+  ]
+  for (const key of priorities) {
+    if (lower.includes(key)) return key
+  }
+  return 'linux'
+}
+
+const distroKey = computed(() => getDistroKey(props.distro))
+const iconData = computed(() => distroIconMap[distroKey.value] || distroIconMap.linux)
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+  >
+    <path :d="iconData.path" :fill="'#' + iconData.hex" />
+  </svg>
+</template>
diff --git a/client/src/components/instance/ChangeHostCard.vue b/client/src/components/instance/ChangeHostCard.vue
new file mode 100644
index 0000000..449afc0
--- /dev/null
+++ b/client/src/components/instance/ChangeHostCard.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import FlagIcon from '@/components/FlagIcon.vue'
+import type { ChangeHostOption, ChangeHostOptionsResponse, ChangeHostUnavailableReason } from '@/types/api'
+
+const props = defineProps<{
+  instanceId: number
+  canChangeHost: boolean
+  instanceStatus?: string
+}>()
+
+const emit = defineEmits<{
+  'task-created': [taskId: number]
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+const loading = ref(false)
+const submitting = ref(false)
+const showModal = ref(false)
+const options = ref<ChangeHostOptionsResponse | null>(null)
+const selectedHostId = ref<number | null>(null)
+const selectedSshKeyId = ref<number | null>(null)
+
+const statusAllowsChange = computed(() => ['running', 'stopped', 'error'].includes((props.instanceStatus || '').toLowerCase()))
+const shouldRender = computed(() => props.canChangeHost && statusAllowsChange.value && (loading.value || (options.value?.hosts.length || 0) > 1))
+const currentHost = computed(() => options.value?.hosts.find(host => host.isCurrent) || null)
+const selectableHosts = computed(() => options.value?.hosts.filter(host => host.canChange) || [])
+const selectedHost = computed(() => options.value?.hosts.find(host => host.id === selectedHostId.value) || null)
+const canSubmit = computed(() => Boolean(selectedHost.value?.canChange && selectedSshKeyId.value && !submitting.value))
+
+function formatMemory(mb: number): string {
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? `${gb.toFixed(0)} GB` : `${gb.toFixed(1)} GB`
+  }
+  return `${mb} MB`
+}
+
+function usagePercent(used: number, max: number): number {
+  if (max <= 0) return 0
+  return Math.min(100, Math.round((used / max) * 100))
+}
+
+function formatTraffic(bytes: string | null | undefined): string {
+  if (!bytes) return t('common.unlimited')
+  const b = BigInt(bytes || '0')
+  if (b === BigInt(0)) return t('common.unlimited')
+  if (b >= BigInt(1024 * 1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024 * 1024)).toFixed(1) + ' TB'
+  }
+  if (b >= BigInt(1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024)).toFixed(0) + ' GB'
+  }
+  return (Number(b) / (1024 * 1024)).toFixed(0) + ' MB'
+}
+
+function reasonLabel(reason: ChangeHostUnavailableReason | null): string {
+  if (!reason) return t('instanceConfig.changeHost.available')
+  return t(`instanceConfig.changeHost.reasons.${reason}`)
+}
+
+function hostBadgeClass(host: ChangeHostOption): string {
+  if (host.isCurrent) {
+    return themeStore.isDark ? 'bg-blue-500/15 text-blue-300' : 'bg-blue-50 text-blue-700'
+  }
+  if (host.canChange) {
+    return themeStore.isDark ? 'bg-emerald-500/15 text-emerald-300' : 'bg-emerald-50 text-emerald-700'
+  }
+  return themeStore.isDark ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'
+}
+
+function selectDefaults(): void {
+  selectedHostId.value = selectableHosts.value[0]?.id ?? null
+  selectedSshKeyId.value = options.value?.sshKeys[0]?.id ?? null
+}
+
+async function loadOptions(): Promise<void> {
+  if (!props.canChangeHost || !statusAllowsChange.value) {
+    options.value = null
+    return
+  }
+
+  loading.value = true
+  try {
+    options.value = await api.instances.getChangeHostOptions(props.instanceId)
+    selectDefaults()
+  } catch (err: any) {
+    options.value = null
+    toast.error(err?.message || t('instanceConfig.changeHost.loadFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function openModal(): Promise<void> {
+  await loadOptions()
+  if (!options.value) return
+  selectDefaults()
+  showModal.value = true
+}
+
+function closeModal(): void {
+  if (submitting.value) return
+  showModal.value = false
+}
+
+async function submit(): Promise<void> {
+  if (!selectedHost.value?.canChange || !selectedSshKeyId.value) return
+
+  submitting.value = true
+  try {
+    const response = await api.instances.changeHost(props.instanceId, {
+      targetHostId: selectedHost.value.id,
+      sshKeyId: selectedSshKeyId.value
+    })
+    toast.success(t('instanceConfig.changeHost.taskQueued'))
+    showModal.value = false
+    emit('task-created', response.taskId)
+    await loadOptions()
+  } catch (err: any) {
+    toast.error(err?.message || t('instanceConfig.changeHost.submitFailed'))
+  } finally {
+    submitting.value = false
+  }
+}
+
+onMounted(() => {
+  void loadOptions()
+})
+
+watch(() => [props.instanceId, props.canChangeHost, props.instanceStatus], () => {
+  void loadOptions()
+})
+</script>
+
+<template>
+  <div v-if="shouldRender" class="card p-6">
+    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div class="flex min-w-0 items-start gap-4">
+        <div
+          class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg"
+          :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+        >
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h10m0 0-3-3m3 3-3 3M17 17H7m0 0 3 3m-3-3 3-3" />
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <h3 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+            {{ t('instanceConfig.changeHost.title') }}
+          </h3>
+          <p class="mt-1 text-sm text-themed-muted">
+            {{ t('instanceConfig.changeHost.description') }}
+          </p>
+          <div v-if="currentHost" class="mt-3 flex flex-wrap items-center gap-2 text-xs">
+            <span class="text-themed-muted">{{ t('instanceConfig.changeHost.currentHost') }}</span>
+            <span class="inline-flex items-center gap-1.5 rounded-md px-2 py-1" :class="themeStore.isDark ? 'bg-gray-800 text-gray-200' : 'bg-gray-100 text-gray-700'">
+              <FlagIcon :code="currentHost.countryCode || 'us'" size="xs" />
+              {{ currentHost.name }}
+            </span>
+            <span class="text-themed-muted">
+              {{ t('instanceConfig.changeHost.availableCount', { count: selectableHosts.length }) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center lg:flex-shrink-0">
+        <span
+          v-if="options?.unavailableReason === 'no_ssh_key'"
+          class="rounded-md px-2.5 py-1.5 text-xs"
+          :class="themeStore.isDark ? 'bg-amber-500/10 text-amber-300' : 'bg-amber-50 text-amber-700'"
+        >
+          {{ t('instanceConfig.changeHost.noSshKey') }}
+        </span>
+        <button
+          class="btn-secondary"
+          :disabled="loading"
+          @click="openModal"
+        >
+          <span v-if="loading" class="loading-spinner h-4 w-4"></span>
+          <span>{{ t('instanceConfig.changeHost.button') }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="closeModal"></div>
+        <div
+          class="relative flex max-h-[calc(100vh-2rem)] w-full max-w-3xl flex-col overflow-hidden rounded-xl shadow-xl"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+        >
+          <div class="flex items-start justify-between gap-4 border-b px-5 py-4" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'">
+            <div>
+              <h3 class="text-base font-semibold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                {{ t('instanceConfig.changeHost.modalTitle') }}
+              </h3>
+              <p class="mt-1 text-sm text-themed-muted">
+                {{ t('instanceConfig.changeHost.modalSubtitle') }}
+              </p>
+            </div>
+            <button
+              class="rounded-lg p-2 transition-colors"
+              :class="themeStore.isDark ? 'text-gray-400 hover:bg-gray-800 hover:text-gray-200' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'"
+              :disabled="submitting"
+              @click="closeModal"
+            >
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="overflow-y-auto px-5 py-4">
+            <div
+              class="mb-4 rounded-lg border p-3 text-sm"
+              :class="themeStore.isDark ? 'border-red-500/30 bg-red-500/10 text-red-200' : 'border-red-200 bg-red-50 text-red-700'"
+            >
+              {{ t('instanceConfig.changeHost.warning') }}
+            </div>
+
+            <div class="mb-4">
+              <label class="mb-1.5 block text-xs text-themed-muted">{{ t('instanceConfig.changeHost.selectSshKey') }}</label>
+              <select v-model.number="selectedSshKeyId" class="input" :disabled="(options?.sshKeys.length || 0) === 0 || submitting">
+                <option v-if="(options?.sshKeys.length || 0) === 0" :value="null">
+                  {{ t('instanceConfig.changeHost.noSshKey') }}
+                </option>
+                <option v-for="key in options?.sshKeys || []" :key="key.id" :value="key.id">
+                  {{ key.name }}
+                </option>
+              </select>
+            </div>
+
+            <div v-if="loading" class="flex items-center justify-center py-10">
+              <div class="loading-spinner h-8 w-8"></div>
+            </div>
+
+            <div v-else class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <button
+                v-for="host in options?.hosts || []"
+                :key="host.id"
+                type="button"
+                class="min-w-0 rounded-lg border p-4 text-left transition-all"
+                :class="[
+                  selectedHostId === host.id
+                    ? (themeStore.isDark ? 'border-white bg-gray-800' : 'border-gray-900 bg-gray-50')
+                    : (themeStore.isDark ? 'border-gray-800 hover:border-gray-700' : 'border-gray-200 hover:border-gray-300'),
+                  host.canChange ? 'cursor-pointer' : 'cursor-not-allowed opacity-70'
+                ]"
+                :disabled="!host.canChange || submitting"
+                :aria-pressed="selectedHostId === host.id"
+                @click="selectedHostId = host.id"
+              >
+                <div class="mb-3 flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <div class="flex min-w-0 items-center gap-2">
+                      <FlagIcon :code="host.countryCode || 'us'" size="sm" class="flex-shrink-0" />
+                      <span class="truncate text-sm font-medium" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                        {{ host.name }}
+                      </span>
+                    </div>
+                    <p v-if="host.effectiveTrafficLimit !== undefined" class="mt-1 truncate text-xs text-themed-muted">
+                      {{ t('instance.selector.hostTraffic') }} {{ formatTraffic(host.effectiveTrafficLimit) }}
+                      <span v-if="host.effectiveTrafficLimit && host.trafficMultiplier && host.trafficMultiplier !== 1" class="opacity-70">({{ host.trafficMultiplier }}x)</span>
+                    </p>
+                    <p v-else class="mt-1 truncate text-xs text-themed-muted">{{ host.location || '-' }}</p>
+                  </div>
+                  <span class="flex-shrink-0 rounded-full px-2 py-1 text-xs font-medium" :class="hostBadgeClass(host)">
+                    {{ host.isCurrent ? t('instanceConfig.changeHost.current') : reasonLabel(host.unavailableReason) }}
+                  </span>
+                </div>
+
+                <div class="space-y-3">
+                  <div>
+                    <div class="mb-1 flex items-center justify-between text-xs">
+                      <span class="text-themed-muted">CPU</span>
+                      <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                        {{ host.resources.cpuAvailable }}% / {{ host.resources.cpuAllowanceMax }}%
+                      </span>
+                    </div>
+                    <div class="h-1.5 overflow-hidden rounded-full" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                      <div class="h-full rounded-full bg-blue-500" :style="{ width: `${usagePercent(host.resources.cpuUsed, host.resources.cpuAllowanceMax)}%` }"></div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <div class="mb-1 flex items-center justify-between text-xs">
+                      <span class="text-themed-muted">{{ t('instanceConfig.changeHost.memory') }}</span>
+                      <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                        {{ formatMemory(host.resources.memoryAvailable) }} / {{ formatMemory(host.resources.memoryMax) }}
+                      </span>
+                    </div>
+                    <div class="h-1.5 overflow-hidden rounded-full" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                      <div class="h-full rounded-full bg-emerald-500" :style="{ width: `${usagePercent(host.resources.memoryUsed, host.resources.memoryMax)}%` }"></div>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex flex-col-reverse gap-2 border-t px-5 py-4 sm:flex-row sm:justify-end" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/80' : 'border-gray-100 bg-gray-50'">
+            <button class="btn-secondary" :disabled="submitting" @click="closeModal">
+              {{ t('common.cancel') }}
+            </button>
+            <button class="btn-primary" :disabled="!canSubmit" @click="submit">
+              <span v-if="submitting" class="loading-spinner h-4 w-4"></span>
+              <span>{{ submitting ? t('common.processing') : t('instanceConfig.changeHost.confirm') }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/HostSelector.vue b/client/src/components/instance/HostSelector.vue
new file mode 100644
index 0000000..84be426
--- /dev/null
+++ b/client/src/components/instance/HostSelector.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import type { AvailableHost, Package } from '@/types/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+
+const { t } = useI18n()
+
+interface Props {
+  availableHosts: AvailableHost[]
+  selectedHostId: number | null
+  hostsLoading: boolean
+  hostsInsufficient: boolean
+  cpu: number
+  memory: number
+  selectedPackage: Package | null
+  showDeduction?: boolean  // 是否显示资源扣减部分，默认 true
+  title?: string
+  autoSelectedLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showDeduction: true,
+  title: undefined,
+  autoSelectedLabel: undefined
+})
+const emit = defineEmits<{
+  'update:selectedHostId': [value: number | null]
+}>()
+
+const themeStore = useThemeStore()
+
+// 格式化资源显示（可选显示扣减部分）
+function formatResourceDisplay(available: number, selected: number, unit: string): string {
+  if (props.showDeduction) {
+    return `${available}${unit}（-${selected}${unit}）`
+  }
+  return `${available}${unit}`
+}
+
+function formatMemoryDisplay(availableMB: number, selectedMB: number): string {
+  const formatMB = (mb: number) => {
+    if (mb >= 1024) return (mb / 1024).toFixed(1) + 'GB'
+    return mb + 'MB'
+  }
+  
+  if (props.showDeduction) {
+    return `${formatMB(availableMB)}（-${formatMB(selectedMB)}）`
+  }
+  return formatMB(availableMB)
+}
+
+function formatTraffic(bytes: string | null | undefined): string {
+  if (!bytes) return t('common.unlimited')
+  const b = BigInt(bytes || '0')
+  if (b === BigInt(0)) return t('common.unlimited')
+  if (b >= BigInt(1024 * 1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024 * 1024)).toFixed(1) + ' TB'
+  }
+  if (b >= BigInt(1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024)).toFixed(0) + ' GB'
+  }
+  return (Number(b) / (1024 * 1024)).toFixed(0) + ' MB'
+}
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center gap-2 mb-4">
+      <span 
+        class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+        :class="themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-200 text-gray-600'"
+      >*</span>
+      <h2 
+        class="text-sm font-medium"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ props.title || t('instance.selector.selectHost') }}
+      </h2>
+      <span 
+        class="text-xs ml-auto"
+        :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+      >{{ props.autoSelectedLabel || t('instance.selector.hostAutoSelected') }}</span>
+    </div>
+    
+    <div v-if="hostsLoading" class="flex items-center justify-center py-4">
+      <svg class="w-5 h-5 animate-spin text-gray-500" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+    </div>
+    
+    <!-- 资源不足提示 -->
+    <div v-else-if="hostsInsufficient" class="p-4 rounded-lg border border-yellow-400/50 bg-yellow-50 dark:bg-yellow-900/20">
+      <div class="flex items-start gap-3">
+        <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+        <div>
+          <p class="text-sm font-medium text-yellow-800 dark:text-yellow-300">{{ t('instance.selector.hostInsufficient') }}</p>
+          <p v-if="selectedPackage" class="text-xs text-yellow-700 dark:text-yellow-400 mt-1">
+            {{ t('instance.selector.hostInsufficientDesc', { cpu: props.cpu, memory: (props.memory / 1024).toFixed(1) }) }}
+          </p>
+          <p class="text-xs text-yellow-700 dark:text-yellow-400 mt-1">
+            {{ t('instance.selector.hostInsufficientSuggest') }}
+          </p>
+        </div>
+      </div>
+    </div>
+    
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <div
+        v-for="host in availableHosts"
+        :key="host.id"
+        :class="[
+          'p-3 rounded-lg border cursor-pointer transition-all',
+          selectedHostId === host.id 
+            ? (themeStore.isDark ? 'border-white bg-gray-900' : 'border-gray-900 bg-gray-50')
+            : (themeStore.isDark ? 'border-gray-800 hover:border-gray-700' : 'border-gray-200 hover:border-gray-300')
+        ]"
+        @click="emit('update:selectedHostId', host.id)"
+      >
+        <div class="flex items-center justify-between mb-2">
+          <div class="flex items-center gap-2">
+            <FlagIcon :code="host.countryCode || 'us'" size="sm" />
+            <span 
+              class="text-sm"
+              :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+            >{{ host.name?.toUpperCase() || host.name }}</span>
+            <span
+              v-if="host.architecture"
+              class="px-1.5 py-0.5 rounded text-2xs font-medium"
+              :class="themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-600'"
+            >
+              {{ host.architecture }}
+            </span>
+          </div>
+          <div 
+            v-if="selectedHostId === host.id" 
+            class="w-4 h-4 rounded-full flex items-center justify-center"
+            :class="themeStore.isDark ? 'bg-white' : 'bg-gray-900'"
+          >
+            <svg 
+              class="w-2.5 h-2.5" 
+              :class="themeStore.isDark ? 'text-gray-900' : 'text-white'"
+              fill="currentColor" viewBox="0 0 20 20"
+            >
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </div>
+        <p v-if="host.effectiveTrafficLimit !== undefined" class="truncate text-2xs text-themed-muted">
+          {{ t('instance.selector.hostTraffic') }} {{ formatTraffic(host.effectiveTrafficLimit) }}
+          <span v-if="host.effectiveTrafficLimit && host.trafficMultiplier && host.trafficMultiplier !== 1" class="opacity-70">({{ host.trafficMultiplier }}x)</span>
+        </p>
+        <p v-else class="truncate text-2xs text-themed-muted">{{ host.location }}</p>
+        <div class="mt-2 flex items-center justify-between">
+          <span
+            class="text-2xs"
+            :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+          >
+            {{ t('instance.selector.available') }}: {{ formatResourceDisplay(host.resources?.cpuAvailable, props.cpu, '%') }} / {{ formatMemoryDisplay(host.resources?.memoryAvailable, props.memory) }}
+          </span>
+          <!-- 探针图标 -->
+          <a
+            v-if="host.probeUrl"
+            :href="host.probeUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex-shrink-0 ml-2 p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            :title="t('instance.selector.viewProbe')"
+            @click.stop
+          >
+            <svg class="w-4 h-4" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-500'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/ImageSelector.vue b/client/src/components/instance/ImageSelector.vue
new file mode 100644
index 0000000..854bfbd
--- /dev/null
+++ b/client/src/components/instance/ImageSelector.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+
+const { t } = useI18n()
+
+interface ImageOption {
+  value: string
+  label: string
+  icon: string | null
+}
+
+interface Props {
+  availableImages: ImageOption[]
+  selectedImage: string
+  imagesLoading: boolean
+  stepNumber?: number  // 步骤编号，默认 3
+  title?: string
+  emptyMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 3,
+  title: undefined,
+  emptyMessage: undefined
+})
+const emit = defineEmits<{
+  'update:selectedImage': [value: string]
+}>()
+
+const themeStore = useThemeStore()
+const isOpen = ref(false)
+const searchQuery = ref('')
+
+const selectedImageData = computed(() => {
+  return props.availableImages.find(img => img.value === props.selectedImage)
+})
+
+const filteredImages = computed(() => {
+  if (!searchQuery.value) return props.availableImages
+  const query = searchQuery.value.toLowerCase()
+  return props.availableImages.filter(img => 
+    img.label.toLowerCase().includes(query)
+  )
+})
+
+// 按发行版分组
+const groupedImages = computed(() => {
+  const groups: Record<string, ImageOption[]> = {}
+  for (const img of filteredImages.value) {
+    const distro = img.icon || 'other'
+    if (!groups[distro]) groups[distro] = []
+    groups[distro].push(img)
+  }
+  return groups
+})
+
+function selectImage(value: string) {
+  emit('update:selectedImage', value)
+  isOpen.value = false
+  searchQuery.value = ''
+}
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value
+  if (!isOpen.value) searchQuery.value = ''
+}
+
+// 点击外部关闭
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement
+  if (!target.closest('.image-selector-container')) {
+    isOpen.value = false
+    searchQuery.value = ''
+  }
+}
+
+// 监听点击事件
+if (typeof window !== 'undefined') {
+  document.addEventListener('click', handleClickOutside)
+}
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center gap-2 mb-4">
+      <span 
+        class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+        :class="themeStore.isDark ? 'bg-white text-gray-900' : 'bg-gray-900 text-white'"
+      >{{ props.stepNumber }}</span>
+      <h2 
+        class="text-sm font-medium"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ props.title || t('instance.selector.selectSystem') }}
+      </h2>
+    </div>
+    
+    <!-- Loading state -->
+    <div v-if="imagesLoading" class="flex items-center justify-center py-8">
+      <svg class="w-5 h-5 animate-spin text-gray-500" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+    </div>
+    
+    <!-- No images available -->
+    <div 
+      v-else-if="availableImages.length === 0" 
+      class="text-center py-8"
+    >
+      <div class="text-4xl mb-3">💿</div>
+      <p class="text-sm text-gray-500 mb-2">
+        {{ props.emptyMessage || t('instance.selector.noImages') }}
+      </p>
+    </div>
+    
+    <!-- Custom dropdown -->
+    <div v-else class="image-selector-container relative">
+      <!-- Trigger button -->
+      <button
+        type="button"
+        class="w-full flex items-center gap-3 p-3 rounded-lg border transition-colors"
+        :class="[
+          themeStore.isDark 
+            ? 'border-gray-700 bg-gray-900 hover:border-gray-600' 
+            : 'border-gray-200 bg-white hover:border-gray-300',
+          isOpen ? (themeStore.isDark ? 'border-blue-500' : 'border-blue-500') : ''
+        ]"
+        @click.stop="toggleDropdown"
+      >
+        <DistroIcon
+          v-if="selectedImageData"
+          :distro="selectedImageData.icon || selectedImageData.label"
+          :size="28"
+          class="flex-shrink-0"
+        />
+        <span 
+          class="flex-1 text-left text-sm"
+          :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+        >
+          {{ selectedImageData?.label || props.title || t('instance.selector.selectSystem') }}
+        </span>
+        <svg 
+          class="w-4 h-4 flex-shrink-0 transition-transform"
+          :class="[
+            themeStore.isDark ? 'text-gray-500' : 'text-gray-400',
+            isOpen ? 'rotate-180' : ''
+          ]"
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      
+      <!-- Dropdown panel -->
+      <div 
+        v-show="isOpen"
+        class="absolute z-50 w-full mt-2 rounded-lg border shadow-lg overflow-hidden"
+        :class="themeStore.isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-white'"
+      >
+        <!-- Search input -->
+        <div class="p-2 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="t('common.search')"
+            class="w-full px-3 py-2 text-sm rounded-md border outline-none"
+            :class="themeStore.isDark 
+              ? 'bg-gray-800 border-gray-700 text-gray-200 placeholder-gray-500 focus:border-blue-500' 
+              : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-blue-500'"
+            @click.stop
+          />
+        </div>
+        
+        <!-- Options list -->
+        <div class="max-h-72 overflow-y-auto">
+          <template v-for="(images, distro) in groupedImages" :key="distro">
+            <!-- Group header -->
+            <div 
+              class="px-3 py-1.5 text-xs font-medium uppercase tracking-wider sticky top-0"
+              :class="themeStore.isDark ? 'bg-gray-800 text-gray-500' : 'bg-gray-50 text-gray-500'"
+            >
+              {{ distro }}
+            </div>
+            <!-- Group items -->
+            <button
+              v-for="img in images"
+              :key="img.value"
+              type="button"
+              class="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors"
+              :class="[
+                themeStore.isDark 
+                  ? 'hover:bg-gray-800' 
+                  : 'hover:bg-gray-50',
+                selectedImage === img.value 
+                  ? (themeStore.isDark ? 'bg-blue-900/30' : 'bg-blue-50') 
+                  : ''
+              ]"
+              @click.stop="selectImage(img.value)"
+            >
+              <DistroIcon
+                :distro="img.icon || img.label"
+                :size="24"
+                class="flex-shrink-0"
+              />
+              <span 
+                class="text-sm"
+                :class="[
+                  themeStore.isDark ? 'text-gray-200' : 'text-gray-900',
+                  selectedImage === img.value ? 'font-medium' : ''
+                ]"
+              >
+                {{ img.label }}
+              </span>
+              <!-- Check mark for selected -->
+              <svg 
+                v-if="selectedImage === img.value"
+                class="w-4 h-4 ml-auto text-blue-500" 
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            </button>
+          </template>
+          
+          <!-- No results -->
+          <div 
+            v-if="Object.keys(groupedImages).length === 0"
+            class="px-3 py-6 text-center text-sm"
+            :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+          >
+            {{ t('common.noResults') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/InstanceBadgeModal.vue b/client/src/components/instance/InstanceBadgeModal.vue
new file mode 100644
index 0000000..75093cb
--- /dev/null
+++ b/client/src/components/instance/InstanceBadgeModal.vue
@@ -0,0 +1,451 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import BadgeImage from '@/components/BadgeImage.vue'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+import { useToast } from '@/stores/toast'
+import type { BadgeCatalogItem, BadgeOverview, BadgeOwnership } from '@/types/api'
+import { translateError } from '@/utils/errorHandler'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  instanceId: number
+  instanceName: string
+  badgeId?: string | null
+  fallbackIcon?: 'pro' | 'prime' | 'peer' | null
+}>(), {
+  badgeId: null,
+  fallbackIcon: null
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'updated', badgeId: string | null): void
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+type BadgeModalTab = 'details' | 'owned'
+
+const activeTab = ref<BadgeModalTab>('details')
+const loading = ref(false)
+const actionLoading = ref(false)
+const overview = ref<BadgeOverview | null>(null)
+const loadError = ref('')
+
+const currentInstanceOption = computed(() =>
+  overview.value?.instances.find(item => item.id === props.instanceId) ?? null
+)
+
+const canManageCurrentInstance = computed(() => !!currentInstanceOption.value)
+
+const currentOwnership = computed(() =>
+  overview.value?.ownerships.find(item => item.appliedInstanceId === props.instanceId) ?? null
+)
+
+const currentBadgeId = computed(() => currentOwnership.value?.badgeId ?? props.badgeId ?? null)
+
+const currentBadgeCatalog = computed<BadgeCatalogItem | null>(() => {
+  if (!currentBadgeId.value) return null
+  return overview.value?.catalog.find(item => item.id === currentBadgeId.value) ?? null
+})
+
+const currentBadgeSeriesTitle = computed(() =>
+  currentBadgeCatalog.value?.seriesNameZh
+  || currentBadgeCatalog.value?.seriesTitle
+  || currentOwnership.value?.seriesTitle
+  || null
+)
+
+const currentBadgeOwnedCount = computed(() => {
+  if (!currentBadgeId.value) return 0
+  return (overview.value?.ownerships || []).filter(item => item.badgeId === currentBadgeId.value).length
+})
+
+const sortedOwnerships = computed(() => {
+  const items = [...(overview.value?.ownerships || [])]
+
+  const getPriority = (ownership: BadgeOwnership) => {
+    if (ownership.appliedInstanceId === props.instanceId) return 0
+    if (!ownership.applicationTarget) return 1
+    if (ownership.applicationTarget === 'avatar') return 2
+    return 3
+  }
+
+  return items.sort((left, right) => {
+    const priorityDiff = getPriority(left) - getPriority(right)
+    if (priorityDiff !== 0) return priorityDiff
+    return new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime()
+  })
+})
+
+function formatDateTime(value: string | null): string {
+  if (!value) return t('common.none')
+  return new Date(value).toLocaleString()
+}
+
+function getSourceText(source: string): string {
+  if (source === 'select') return t('entertainment.badges.sourceSelect')
+  if (source === 'lottery') return t('entertainment.badges.sourceLottery')
+  if (source === 'admin_grant') return t('entertainment.badges.sourceAdminGrant')
+  return t('entertainment.badges.sourceDraw')
+}
+
+function getOwnershipStatusText(ownership: BadgeOwnership): string {
+  if (ownership.appliedInstanceId === props.instanceId) {
+    return t('instance.badgeModal.appliedHere')
+  }
+  if (ownership.applicationTarget === 'avatar') {
+    return t('entertainment.badges.statusAvatar')
+  }
+  if (ownership.applicationTarget === 'instance') {
+    return t('entertainment.badges.statusInstance')
+  }
+  return t('entertainment.badges.statusUnused')
+}
+
+function getOwnershipStatusClass(ownership: BadgeOwnership): string {
+  if (ownership.appliedInstanceId === props.instanceId) {
+    return 'border-blue-500/30 bg-blue-500/10 text-blue-500'
+  }
+  if (ownership.applicationTarget === 'avatar') {
+    return 'border-violet-500/30 bg-violet-500/10 text-violet-500'
+  }
+  if (ownership.applicationTarget === 'instance') {
+    return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-500'
+  }
+  return 'border-themed bg-themed-tertiary text-themed-secondary'
+}
+
+function getOwnershipCardClass(ownership: BadgeOwnership): string {
+  if (ownership.appliedInstanceId === props.instanceId) {
+    return 'border-blue-500/30 bg-themed bg-gradient-to-br from-blue-500/10 via-transparent to-transparent shadow-lg shadow-blue-500/5'
+  }
+  if (!ownership.applicationTarget) {
+    return 'border-themed bg-themed shadow-sm hover:border-themed-secondary'
+  }
+  if (ownership.applicationTarget === 'avatar') {
+    return 'border-violet-500/20 bg-themed bg-gradient-to-br from-violet-500/10 via-transparent to-transparent'
+  }
+  return 'border-emerald-500/20 bg-themed bg-gradient-to-br from-emerald-500/10 via-transparent to-transparent'
+}
+
+function getApplyButtonLabel(ownership: BadgeOwnership): string {
+  if (ownership.appliedInstanceId === props.instanceId) {
+    return t('instance.badgeModal.appliedHere')
+  }
+  if (!ownership.applicationTarget) {
+    return currentOwnership.value
+      ? t('instance.badgeModal.replaceCurrent')
+      : t('instance.badgeModal.applyCurrent')
+  }
+  if (ownership.applicationTarget === 'avatar') {
+    return t('instance.badgeModal.moveFromAvatar')
+  }
+  return t('instance.badgeModal.moveCurrent')
+}
+
+async function loadOverview() {
+  loading.value = true
+  loadError.value = ''
+
+  try {
+    overview.value = await api.entertainment.getBadgeOverview()
+  } catch (error) {
+    loadError.value = translateError(error)
+    toast.error(loadError.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleApplyOwnership(ownership: BadgeOwnership) {
+  if (!canManageCurrentInstance.value || ownership.appliedInstanceId === props.instanceId || actionLoading.value) return
+
+  actionLoading.value = true
+  try {
+    await api.entertainment.applyBadgeToInstance(ownership.id, props.instanceId)
+    await loadOverview()
+    emit('updated', ownership.badgeId)
+    toast.success(t('instance.badgeModal.updateSuccess'))
+  } catch (error) {
+    await loadOverview().catch(() => {})
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function handleRemoveCurrentBadge() {
+  if (!currentOwnership.value || actionLoading.value) return
+
+  actionLoading.value = true
+  try {
+    await api.entertainment.unapplyBadge(currentOwnership.value.id)
+    await loadOverview()
+    emit('updated', null)
+    toast.success(t('instance.badgeModal.removeSuccess'))
+  } catch (error) {
+    await loadOverview().catch(() => {})
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+watch(
+  () => props.visible,
+  visible => {
+    if (!visible) return
+    activeTab.value = 'details'
+    void loadOverview()
+  }
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="props.visible" class="modal-overlay">
+        <div class="modal-backdrop" @click="emit('close')" />
+
+        <div class="modal-content !max-w-5xl w-full max-h-[88vh] flex flex-col overflow-hidden">
+          <div class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-blue-500/16 via-cyan-500/8 to-transparent pointer-events-none" />
+
+          <div class="modal-header relative">
+            <div class="min-w-0">
+              <div class="text-xs uppercase tracking-[0.28em] text-blue-500">
+                {{ t('instance.badgeModal.kicker') }}
+              </div>
+              <h3 class="mt-2 text-xl font-semibold text-themed">
+                {{ t('instance.badgeModal.title') }}
+              </h3>
+              <p class="mt-1 text-sm text-themed-muted truncate">
+                {{ t('instance.badgeModal.subtitle', { name: props.instanceName }) }}
+              </p>
+            </div>
+
+            <button
+              type="button"
+              class="rounded-full p-2 text-themed-muted hover:bg-themed-hover hover:text-themed transition-colors"
+              @click="emit('close')"
+            >
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body relative flex-1 overflow-y-auto space-y-5">
+            <div class="flex flex-wrap gap-1.5 rounded-xl border border-themed bg-themed-secondary/60 p-1.5 sm:gap-2 sm:rounded-2xl sm:p-2">
+              <button
+                type="button"
+                class="rounded-lg px-3 py-1.5 text-xs font-medium transition-colors sm:rounded-xl sm:px-4 sm:py-2 sm:text-sm"
+                :class="activeTab === 'details' ? 'bg-themed text-themed shadow-sm border border-themed' : 'text-themed-muted hover:bg-themed-hover hover:text-themed'"
+                @click="activeTab = 'details'"
+              >
+                {{ t('instance.badgeModal.detailsTab') }}
+              </button>
+              <button
+                type="button"
+                class="rounded-lg px-3 py-1.5 text-xs font-medium transition-colors sm:rounded-xl sm:px-4 sm:py-2 sm:text-sm"
+                :class="activeTab === 'owned' ? 'bg-themed text-themed shadow-sm border border-themed' : 'text-themed-muted hover:bg-themed-hover hover:text-themed'"
+                @click="activeTab = 'owned'"
+              >
+                {{ t('instance.badgeModal.ownedTab') }}
+              </button>
+            </div>
+
+            <div v-if="loading" class="rounded-3xl border border-themed bg-themed-tertiary p-8 text-center text-themed-muted">
+              {{ t('common.loading') }}...
+            </div>
+
+            <div v-else-if="loadError && !overview" class="rounded-3xl border border-red-500/20 bg-red-500/5 p-6 text-sm text-red-500">
+              {{ loadError }}
+            </div>
+
+            <template v-else>
+              <div v-if="activeTab === 'details'" class="space-y-5">
+                <div class="rounded-[28px] border border-themed bg-themed p-4 sm:rounded-[32px] sm:p-7">
+                  <div class="grid gap-4 sm:gap-6 lg:grid-cols-[minmax(0,260px)_minmax(0,1fr)] lg:items-center">
+                    <div class="flex justify-center">
+                      <div class="relative flex h-36 w-36 items-center justify-center sm:h-48 sm:w-48">
+                        <div class="absolute inset-3 rounded-[1.5rem] bg-blue-500/10 blur-2xl sm:inset-4 sm:rounded-[2rem]" />
+                        <div class="relative flex h-28 w-28 items-center justify-center rounded-[1.5rem] border border-themed bg-themed-tertiary shadow-xl sm:h-36 sm:w-36 sm:rounded-[2rem]">
+                          <InstanceDisplayIcon
+                            :badge-id="currentBadgeId"
+                            :fallback-icon="props.fallbackIcon"
+                            :alt="props.instanceName"
+                            :size="88"
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="min-w-0">
+                      <p class="text-xs uppercase tracking-[0.22em] text-themed-faint">
+                        {{ currentBadgeSeriesTitle || t('instance.badgeModal.noBadgeSeries') }}
+                      </p>
+                      <h4 class="mt-2.5 text-xl font-semibold text-themed sm:mt-3 sm:text-2xl">
+                        {{ currentOwnership?.badgeName || currentBadgeCatalog?.name || t('instance.badgeModal.noBadgeTitle') }}
+                      </h4>
+                      <p class="mt-1.5 text-sm text-themed-muted">
+                        {{ currentOwnership?.badgeLabel || currentBadgeCatalog?.fullLabel || t('instance.badgeModal.noBadgeSummary') }}
+                      </p>
+                      <p class="mt-4 text-sm leading-6 text-themed-secondary sm:mt-5 sm:leading-7">
+                        {{ currentBadgeCatalog?.seriesDescription || t('instance.badgeModal.noBadgeDescription') }}
+                      </p>
+
+                      <div class="mt-4 grid grid-cols-2 gap-2.5 sm:mt-6 sm:gap-3 xl:grid-cols-4">
+                        <div class="rounded-xl border border-themed bg-themed-tertiary p-3 sm:rounded-2xl sm:p-4">
+                          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('instance.badgeModal.statusLabel') }}</div>
+                          <div class="mt-1.5 text-sm font-medium text-themed sm:mt-2">
+                            {{ currentOwnership ? t('instance.badgeModal.statusApplied') : t('instance.badgeModal.statusNotApplied') }}
+                          </div>
+                        </div>
+
+                        <div class="rounded-xl border border-themed bg-themed-tertiary p-3 sm:rounded-2xl sm:p-4">
+                          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('instance.badgeModal.ownedCountLabel') }}</div>
+                          <div class="mt-1.5 text-sm font-medium text-themed sm:mt-2">{{ currentBadgeOwnedCount }}</div>
+                        </div>
+
+                        <div class="rounded-xl border border-themed bg-themed-tertiary p-3 sm:rounded-2xl sm:p-4">
+                          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.sourceLabel') }}</div>
+                          <div class="mt-1.5 text-sm font-medium text-themed sm:mt-2">
+                            {{ currentOwnership ? getSourceText(currentOwnership.source) : t('common.none') }}
+                          </div>
+                        </div>
+
+                        <div class="rounded-xl border border-themed bg-themed-tertiary p-3 sm:rounded-2xl sm:p-4">
+                          <div class="text-xs uppercase tracking-wide text-themed-muted">{{ t('entertainment.badges.obtainedAt') }}</div>
+                          <div class="mt-1.5 text-sm font-medium text-themed break-words leading-5 sm:mt-2">
+                            {{ currentOwnership ? formatDateTime(currentOwnership.createdAt) : t('common.none') }}
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="mt-4 flex flex-col gap-2.5 sm:mt-6 sm:gap-3 sm:flex-row sm:flex-wrap">
+                        <button
+                          v-if="canManageCurrentInstance && currentOwnership"
+                          type="button"
+                          class="btn btn-danger w-full sm:w-auto"
+                          :disabled="actionLoading"
+                          @click="handleRemoveCurrentBadge"
+                        >
+                          {{ actionLoading ? t('common.processing') : t('instance.badgeModal.removeCurrent') }}
+                        </button>
+
+                        <button
+                          v-if="canManageCurrentInstance"
+                          type="button"
+                          class="btn btn-secondary w-full sm:w-auto"
+                          @click="activeTab = 'owned'"
+                        >
+                          {{ t('instance.badgeModal.openOwnedTab') }}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  v-if="!canManageCurrentInstance"
+                  class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 text-sm text-amber-600 dark:text-amber-300"
+                >
+                  {{ t('instance.badgeModal.manageUnavailable') }}
+                </div>
+              </div>
+
+              <div v-else class="space-y-4">
+                <div
+                  v-if="!canManageCurrentInstance"
+                  class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 text-sm text-amber-600 dark:text-amber-300"
+                >
+                  {{ t('instance.badgeModal.manageUnavailable') }}
+                </div>
+
+                <div
+                  v-else-if="sortedOwnerships.length === 0"
+                  class="rounded-3xl border border-dashed border-themed p-8 text-center"
+                >
+                  <div class="text-lg font-medium text-themed">{{ t('instance.badgeModal.emptyOwnedTitle') }}</div>
+                  <p class="mt-2 text-sm text-themed-muted">{{ t('instance.badgeModal.emptyOwnedHint') }}</p>
+                </div>
+
+                <div v-else class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                  <article
+                    v-for="ownership in sortedOwnerships"
+                    :key="ownership.id"
+                    class="rounded-[20px] border p-3 sm:p-4 transition-colors"
+                    :class="getOwnershipCardClass(ownership)"
+                  >
+                    <div class="flex h-full items-start gap-3">
+                      <div class="shrink-0 rounded-[16px] border border-themed bg-themed-tertiary p-2 shadow-inner sm:rounded-[18px] sm:p-2.5">
+                        <BadgeImage
+                          :badge-id="ownership.badgeId"
+                          :alt="ownership.badgeLabel"
+                          :size="52"
+                          variant="icon"
+                        />
+                      </div>
+
+                      <div class="min-w-0 flex-1">
+                        <div class="flex flex-wrap items-center gap-1.5">
+                          <h4 class="text-base font-semibold text-themed truncate">{{ ownership.badgeName }}</h4>
+                          <span class="inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium" :class="getOwnershipStatusClass(ownership)">
+                            {{ getOwnershipStatusText(ownership) }}
+                          </span>
+                        </div>
+
+                        <p class="mt-1 text-xs text-themed-muted line-clamp-1">{{ ownership.badgeLabel }}</p>
+                        <div class="mt-2 flex flex-wrap gap-1.5 text-[11px]">
+                          <span class="inline-flex max-w-full items-center rounded-full border border-themed bg-themed-tertiary px-2 py-1 text-themed-secondary truncate">
+                            {{ ownership.seriesTitle }}
+                          </span>
+                          <span class="inline-flex max-w-full items-center rounded-full border border-themed bg-themed-tertiary px-2 py-1 text-themed-secondary">
+                            {{ getSourceText(ownership.source) }}
+                          </span>
+                          <span
+                            v-if="ownership.applicationTarget === 'instance' && ownership.appliedInstanceName"
+                            class="inline-flex max-w-full items-center rounded-full border border-themed bg-themed-tertiary px-2 py-1 text-themed-secondary truncate"
+                          >
+                            {{ ownership.appliedInstanceName }}
+                          </span>
+                        </div>
+
+                        <div class="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap">
+                          <button
+                            type="button"
+                            class="btn btn-sm w-full text-xs leading-tight sm:w-auto"
+                            :class="ownership.appliedInstanceId === props.instanceId ? 'btn-secondary' : 'btn-primary'"
+                            :disabled="actionLoading || ownership.appliedInstanceId === props.instanceId"
+                            @click="handleApplyOwnership(ownership)"
+                          >
+                            {{ actionLoading ? t('common.processing') : getApplyButtonLabel(ownership) }}
+                          </button>
+
+                          <button
+                            v-if="ownership.appliedInstanceId === props.instanceId"
+                            type="button"
+                            class="btn btn-sm btn-ghost w-full text-xs sm:w-auto"
+                            :disabled="actionLoading"
+                            @click="handleRemoveCurrentBadge"
+                          >
+                            {{ t('entertainment.badges.unapply') }}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </article>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/InstanceConfigTab.vue b/client/src/components/instance/InstanceConfigTab.vue
new file mode 100644
index 0000000..99e0c1f
--- /dev/null
+++ b/client/src/components/instance/InstanceConfigTab.vue
@@ -0,0 +1,685 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import type { InstanceConfigResponse, InstanceConfig } from '@/types/api'
+import ChangeHostCard from '@/components/instance/ChangeHostCard.vue'
+
+const props = defineProps<{
+  instanceId: number
+  canEditConfig?: boolean
+  showBootSettings?: boolean
+  instanceType?: 'container' | 'vm'
+  instanceStatus?: string
+  isInstanceOwner?: boolean  // 是否是实例所有者
+}>()
+
+const emit = defineEmits<{
+  'change-host-task': [taskId: number]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+const loading = ref(true)
+const config = ref<InstanceConfigResponse | null>(null)
+const editMode = ref(false)
+const showSwapModal = ref(false)
+const swapActionLoading = ref(false)
+
+// 提升进程数相关
+const showBoostModal = ref(false)
+const boostLoading = ref(false)
+
+// 进程数上限：LXC=1000, KVM=2000
+const processLimit = computed(() => props.instanceType === 'vm' ? 2000 : 1000)
+const canChangeHost = computed(() => props.isInstanceOwner === true || props.canEditConfig === true)
+
+// 是否可以显示提升按钮（实例所有者且未达上限）
+const canBoostProcesses = computed(() => {
+  if (!config.value) return false
+  if (!props.isInstanceOwner) return false  // 只有实例所有者可以提升
+  const currentLimit = config.value.config.limits_processes ?? 500
+  return currentLimit < processLimit.value
+})
+
+// Form data for editing - using snake_case to match API
+interface ConfigForm {
+  limits_read: string | null
+  limits_write: string | null
+  limits_read_iops: number | null
+  limits_write_iops: number | null
+  limits_ingress: string | null
+  limits_egress: string | null
+  limits_processes: number | null
+  limits_cpu_priority: number | null
+  boot_autostart: boolean | null
+  boot_autostart_priority: number | null
+  boot_autostart_delay: number | null
+  boot_host_shutdown_timeout: number | null
+}
+
+const form = ref<ConfigForm>(getDefaultForm())
+
+function getDefaultForm(): ConfigForm {
+  return {
+    limits_read: null,
+    limits_write: null,
+    limits_read_iops: null,
+    limits_write_iops: null,
+    limits_ingress: null,
+    limits_egress: null,
+    limits_processes: null,
+    limits_cpu_priority: null,
+    boot_autostart: null,
+    boot_autostart_priority: null,
+    boot_autostart_delay: null,
+    boot_host_shutdown_timeout: null
+  }
+}
+
+onMounted(async () => {
+  await loadConfig()
+})
+
+watch(() => props.instanceId, async () => {
+  await loadConfig()
+})
+
+async function loadConfig(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.instances.getConfig(props.instanceId)
+    config.value = response as InstanceConfigResponse
+    resetForm()
+  } catch (err: any) {
+    toast.error(err.message || t('common.error'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetForm(): void {
+  if (!config.value) return
+  // Check overrides to determine which fields have instance-level values
+  const overrides = config.value.overrides
+  const cfg = config.value.config
+  
+  form.value = {
+    limits_read: overrides.limits_read ? cfg.limits_read : null,
+    limits_write: overrides.limits_write ? cfg.limits_write : null,
+    limits_read_iops: overrides.limits_read_iops ? cfg.limits_read_iops : null,
+    limits_write_iops: overrides.limits_write_iops ? cfg.limits_write_iops : null,
+    limits_ingress: overrides.limits_ingress ? cfg.limits_ingress : null,
+    limits_egress: overrides.limits_egress ? cfg.limits_egress : null,
+    limits_processes: overrides.limits_processes ? cfg.limits_processes : null,
+    limits_cpu_priority: overrides.limits_cpu_priority ? cfg.limits_cpu_priority : null,
+    boot_autostart: overrides.boot_autostart ? cfg.boot_autostart : null,
+    boot_autostart_priority: overrides.boot_autostart_priority ? cfg.boot_autostart_priority : null,
+    boot_autostart_delay: overrides.boot_autostart_delay ? cfg.boot_autostart_delay : null,
+    boot_host_shutdown_timeout: overrides.boot_host_shutdown_timeout ? cfg.boot_host_shutdown_timeout : null
+  }
+}
+
+function resetField(field: keyof ConfigForm): void {
+  (form.value as any)[field] = null
+}
+
+function isOverridden(field: keyof InstanceConfig): boolean {
+  if (!config.value) return false
+  return config.value.overrides[field] === true
+}
+
+function getEffectiveValue(field: keyof InstanceConfig): any {
+  if (!config.value) return '-'
+  return config.value.config[field]
+}
+
+// 格式化网络带宽值（将 Mbit/Gbit 转换为 Mbps/Gbps）
+function formatNetworkValue(field: keyof InstanceConfig): string {
+  const value = getEffectiveValue(field)
+  if (!value || value === '-') return '-'
+  return String(value).replace(/Mbit/gi, 'Mbps').replace(/Gbit/gi, 'Gbps')
+}
+
+function getPackageDefault(field: keyof InstanceConfig): any {
+  if (!config.value) return '-'
+  return config.value.packageDefaults[field]
+}
+
+const ioLimitMode = computed<'throughput' | 'iops'>(() => config.value?.ioLimitMode || 'throughput')
+const normalizedInstanceStatus = computed<string>(() => props.instanceStatus?.toLowerCase() || '')
+const canEnableSwap = computed<boolean>(() => {
+  if (!config.value?.swap.available || config.value.swap.enabled) return false
+  if (!props.isInstanceOwner) return false
+  if (!['running', 'stopped'].includes(normalizedInstanceStatus.value)) return false
+  if (config.value.swap.requiresRunning && normalizedInstanceStatus.value !== 'running') return false
+  return true
+})
+const canDisableSwap = computed<boolean>(() => {
+  if (!config.value?.swap.enabled) return false
+  if (!props.isInstanceOwner) return false
+  if (config.value.swap.kind !== 'container') return false
+  if (!['running', 'stopped'].includes(normalizedInstanceStatus.value)) return false
+  return true
+})
+const swapAction = computed<'enable' | 'disable'>(() => config.value?.swap.enabled ? 'disable' : 'enable')
+
+function formatSwapSize(sizeMb: number): string {
+  if (sizeMb >= 1024) {
+    const sizeGb = sizeMb / 1024
+    return sizeGb % 1 === 0 ? `${sizeGb.toFixed(0)} GB` : `${sizeGb.toFixed(1)} GB`
+  }
+  return `${sizeMb} MB`
+}
+
+async function submitSwapAction(): Promise<void> {
+  if (!config.value) return
+
+  swapActionLoading.value = true
+  try {
+    if (config.value.swap.enabled) {
+      await api.instances.disableSwap(props.instanceId)
+      toast.success(t('instanceConfig.swap.disableSuccess'))
+    } else {
+      await api.instances.enableSwap(props.instanceId)
+      toast.success(t('instanceConfig.swap.enableSuccess'))
+    }
+    showSwapModal.value = false
+    await loadConfig()
+  } catch (err: any) {
+    toast.error(err.message || t(`instanceConfig.swap.${swapAction.value}Failed`))
+  } finally {
+    swapActionLoading.value = false
+  }
+}
+
+// 提升进程数限制
+async function boostProcesses(): Promise<void> {
+  boostLoading.value = true
+  try {
+    await api.instances.boostProcesses(props.instanceId)
+    toast.success(t('instanceConfig.boostProcesses.success', { limit: processLimit.value }))
+    showBoostModal.value = false
+    await loadConfig()
+  } catch (err: any) {
+    toast.error(err.message || t('instanceConfig.boostProcesses.failed'))
+  } finally {
+    boostLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Loading -->
+    <div v-if="loading" class="card p-8 text-center">
+      <div class="loading-spinner w-8 h-8 mx-auto"></div>
+      <p class="text-themed-muted mt-4">{{ t('common.loading') }}</p>
+    </div>
+
+    <template v-else-if="config">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('instanceConfig.title') }}
+        </h2>
+      </div>
+
+      <ChangeHostCard
+        :instance-id="props.instanceId"
+        :can-change-host="canChangeHost"
+        :instance-status="props.instanceStatus"
+        @task-created="emit('change-host-task', $event)"
+      />
+
+      <!-- SWAP Section -->
+      <div v-if="config.swap.available || config.swap.enabled" class="card p-6">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <h3 class="text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              {{ t('instanceConfig.sections.swap') }}
+            </h3>
+            <p class="text-sm text-themed-muted">
+              {{ t('instanceConfig.swap.size') }}: {{ formatSwapSize(config.swap.sizeMb) }}
+            </p>
+            <p class="text-xs text-themed-muted mt-2">
+              {{ config.swap.requiresRunning ? t('instanceConfig.swap.vmHint') : t('instanceConfig.swap.containerHint') }}
+            </p>
+            <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-amber-400' : 'text-amber-600'">
+              {{ t('instanceConfig.swap.toggleHint') }}
+            </p>
+          </div>
+          <div class="flex flex-col items-end gap-2">
+            <span
+              class="px-2.5 py-1 rounded-full text-xs font-medium"
+              :class="config.swap.enabled
+                ? (themeStore.isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700')
+                : (themeStore.isDark ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600')"
+            >
+              {{ config.swap.enabled ? t('instanceConfig.swap.enabled') : t('instanceConfig.swap.disabled') }}
+            </span>
+            <button
+              v-if="!config.swap.enabled && props.isInstanceOwner"
+              class="btn-primary btn-sm"
+              :disabled="!canEnableSwap"
+              @click="showSwapModal = true"
+            >
+              {{ t('instanceConfig.swap.enableButton') }}
+            </button>
+            <button
+              v-else-if="config.swap.enabled && props.isInstanceOwner"
+              class="btn-secondary btn-sm"
+              :disabled="!canDisableSwap"
+              @click="showSwapModal = true"
+            >
+              {{ t('instanceConfig.swap.disableButton') }}
+            </button>
+            <p
+              v-if="!config.swap.enabled && props.isInstanceOwner && config.swap.requiresRunning && normalizedInstanceStatus !== 'running'"
+              class="text-xs text-themed-muted text-right max-w-48"
+            >
+              {{ t('instanceConfig.swap.runningRequired') }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Storage I/O Section -->
+      <div class="card p-6">
+        <h3 class="text-sm font-medium mb-4" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ t('instanceConfig.sections.storageIO') }}
+        </h3>
+        <div v-if="ioLimitMode === 'throughput'" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Read Limit -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsRead') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model="form.limits_read" type="text" class="input flex-1" :placeholder="String(getPackageDefault('limits_read'))" />
+                <button v-if="form.limits_read !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_read')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('limits_read') }}</span>
+                <span v-if="isOverridden('limits_read')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Write Limit -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsWrite') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model="form.limits_write" type="text" class="input flex-1" :placeholder="String(getPackageDefault('limits_write'))" />
+                <button v-if="form.limits_write !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_write')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('limits_write') }}</span>
+                <span v-if="isOverridden('limits_write')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Read IOPS -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsReadIops') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.limits_read_iops" type="number" class="input flex-1" :placeholder="String(getPackageDefault('limits_read_iops'))" />
+                <button v-if="form.limits_read_iops !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_read_iops')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('limits_read_iops') }}</span>
+                <span v-if="isOverridden('limits_read_iops')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Write IOPS -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsWriteIops') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.limits_write_iops" type="number" class="input flex-1" :placeholder="String(getPackageDefault('limits_write_iops'))" />
+                <button v-if="form.limits_write_iops !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_write_iops')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('limits_write_iops') }}</span>
+                <span v-if="isOverridden('limits_write_iops')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- Network Limits Section -->
+      <div class="card p-6">
+        <h3 class="text-sm font-medium mb-4" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ t('instanceConfig.sections.networkLimits') }}
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Ingress -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsIngress') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model="form.limits_ingress" type="text" class="input flex-1" :placeholder="String(getPackageDefault('limits_ingress'))" />
+                <button v-if="form.limits_ingress !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_ingress')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ formatNetworkValue('limits_ingress') }}</span>
+                <span v-if="isOverridden('limits_ingress')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Egress -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsEgress') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model="form.limits_egress" type="text" class="input flex-1" :placeholder="String(getPackageDefault('limits_egress'))" />
+                <button v-if="form.limits_egress !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_egress')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ formatNetworkValue('limits_egress') }}</span>
+                <span v-if="isOverridden('limits_egress')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- Process & Scheduling Section -->
+      <div class="card p-6">
+        <h3 class="text-sm font-medium mb-4" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ t('instanceConfig.sections.processScheduling') }}
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Processes -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsProcesses') }}</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.limits_processes" type="number" class="input flex-1" :placeholder="String(getPackageDefault('limits_processes'))" />
+                <button v-if="form.limits_processes !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_processes')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('limits_processes') }}</span>
+                <span v-if="isOverridden('limits_processes')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+                <!-- 提升进程数按钮 -->
+                <button
+                  v-if="canBoostProcesses && !editMode"
+                  class="ml-2 px-2 py-1 text-xs rounded-md bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 transition-colors flex items-center gap-1"
+                  @click="showBoostModal = true"
+                >
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                  </svg>
+                  {{ t('instanceConfig.boostProcesses.button') }}
+                </button>
+              </div>
+            </template>
+          </div>
+
+          <!-- CPU Priority -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.limitsCpuPriority') }} (0-10)</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.limits_cpu_priority" type="number" min="0" max="10" class="input flex-1" :placeholder="String(getPackageDefault('limits_cpu_priority'))" />
+                <button v-if="form.limits_cpu_priority !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('limits_cpu_priority')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('limits_cpu_priority') }}</span>
+                <span v-if="isOverridden('limits_cpu_priority')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- Boot Settings Section -->
+      <div v-if="props.showBootSettings !== false" class="card p-6">
+        <h3 class="text-sm font-medium mb-4" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+          {{ t('instanceConfig.sections.bootSettings') }}
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Autostart -->
+          <div class="md:col-span-2">
+            <template v-if="editMode">
+              <label class="flex items-center gap-2 cursor-pointer">
+                <input v-model="form.boot_autostart" type="checkbox" class="w-4 h-4 rounded" />
+                <span class="text-sm text-themed-secondary">{{ t('packageForm.fields.bootAutostart') }}</span>
+                <button v-if="form.boot_autostart !== null" class="btn-ghost btn-sm ml-2" :title="t('instanceConfig.resetToDefault')" @click="resetField('boot_autostart')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </label>
+            </template>
+            <template v-else>
+              <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.bootAutostart') }}</label>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('boot_autostart') ? t('common.yes') : t('common.no') }}</span>
+                <span v-if="isOverridden('boot_autostart')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Autostart Priority -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.bootAutostartPriority') }} (0-100)</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.boot_autostart_priority" type="number" min="0" max="100" class="input flex-1" :placeholder="String(getPackageDefault('boot_autostart_priority'))" />
+                <button v-if="form.boot_autostart_priority !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('boot_autostart_priority')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('boot_autostart_priority') }}</span>
+                <span v-if="isOverridden('boot_autostart_priority')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Autostart Delay -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.bootAutostartDelay') }} ({{ t('packageForm.units.seconds') }})</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.boot_autostart_delay" type="number" min="5" max="600" class="input flex-1" :placeholder="String(getPackageDefault('boot_autostart_delay'))" />
+                <button v-if="form.boot_autostart_delay !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('boot_autostart_delay')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('boot_autostart_delay') }}</span>
+                <span v-if="isOverridden('boot_autostart_delay')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Shutdown Timeout -->
+          <div>
+            <label class="block text-xs text-themed-muted mb-1">{{ t('packageForm.fields.bootHostShutdownTimeout') }} ({{ t('packageForm.units.seconds') }})</label>
+            <template v-if="editMode">
+              <div class="flex gap-2">
+                <input v-model.number="form.boot_host_shutdown_timeout" type="number" min="30" max="600" class="input flex-1" :placeholder="String(getPackageDefault('boot_host_shutdown_timeout'))" />
+                <button v-if="form.boot_host_shutdown_timeout !== null" class="btn-ghost btn-sm" :title="t('instanceConfig.resetToDefault')" @click="resetField('boot_host_shutdown_timeout')">
+                  <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                </button>
+              </div>
+            </template>
+            <template v-else>
+              <div class="flex items-center gap-2">
+                <span class="text-themed">{{ getEffectiveValue('boot_host_shutdown_timeout') }}</span>
+                <span v-if="isOverridden('boot_host_shutdown_timeout')" class="badge badge-info text-xs">{{ t('instanceConfig.overridden') }}</span>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 提升进程数确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showBoostModal" class="fixed inset-0 z-50 flex items-center justify-center">
+          <!-- 背景遮罩 -->
+          <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="showBoostModal = false"></div>
+          <!-- 弹窗内容 -->
+          <div
+            class="relative w-full max-w-md mx-4 rounded-xl shadow-xl overflow-hidden"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-white'"
+          >
+            <!-- 头部 -->
+            <div class="px-6 py-4 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center">
+                  <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                    {{ t('instanceConfig.boostProcesses.title') }}
+                  </h3>
+                </div>
+              </div>
+            </div>
+            <!-- 内容 -->
+            <div class="px-6 py-4">
+              <p class="text-sm leading-relaxed" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">
+                {{ t('instanceConfig.boostProcesses.confirm', {
+                  type: instanceType === 'vm' ? 'KVM' : 'LXC',
+                  limit: processLimit
+                }) }}
+              </p>
+              <div class="mt-4 p-3 rounded-lg" :class="themeStore.isDark ? 'bg-blue-500/10' : 'bg-blue-50'">
+                <div class="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400">
+                  <svg 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  {{ t('instanceConfig.boostProcesses.hint') }}
+                </div>
+              </div>
+            </div>
+            <!-- 底部按钮 -->
+            <div class="px-6 py-4 border-t flex justify-end gap-3" :class="themeStore.isDark ? 'border-gray-700 bg-gray-800/50' : 'border-gray-100 bg-gray-50'">
+              <button
+                class="px-4 py-2 text-sm rounded-lg transition-colors"
+                :class="themeStore.isDark ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200'"
+                :disabled="boostLoading"
+                @click="showBoostModal = false"
+              >
+                {{ t('common.cancel') }}
+              </button>
+              <button
+                class="px-4 py-2 text-sm rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors flex items-center gap-2"
+                :disabled="boostLoading"
+                @click="boostProcesses"
+              >
+                <svg v-if="boostLoading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                {{ boostLoading ? t('common.processing') : t('common.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- SWAP 操作确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showSwapModal" class="fixed inset-0 z-50 flex items-center justify-center">
+          <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="showSwapModal = false"></div>
+          <div
+            class="relative w-full max-w-md mx-4 rounded-xl shadow-xl overflow-hidden"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-white'"
+          >
+            <div class="px-6 py-4 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+              <h3 class="text-lg font-semibold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                {{ t(`instanceConfig.swap.${swapAction}ConfirmTitle`) }}
+              </h3>
+            </div>
+            <div class="px-6 py-4 space-y-3">
+              <p class="text-sm leading-relaxed" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">
+                {{ t(`instanceConfig.swap.${swapAction}ConfirmText`, { size: formatSwapSize(config?.swap.sizeMb || 0) }) }}
+              </p>
+              <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-amber-500/10 text-amber-300' : 'bg-amber-50 text-amber-700'">
+                <p class="text-sm">{{ t('instanceConfig.swap.toggleHint') }}</p>
+              </div>
+            </div>
+            <div class="px-6 py-4 border-t flex justify-end gap-3" :class="themeStore.isDark ? 'border-gray-700 bg-gray-800/50' : 'border-gray-100 bg-gray-50'">
+              <button
+                class="px-4 py-2 text-sm rounded-lg transition-colors"
+                :class="themeStore.isDark ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200'"
+                :disabled="swapActionLoading"
+                @click="showSwapModal = false"
+              >
+                {{ t('common.cancel') }}
+              </button>
+              <button
+                class="px-4 py-2 text-sm rounded-lg text-white transition-colors flex items-center gap-2"
+                :class="swapAction === 'enable' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-zinc-700 hover:bg-zinc-800'"
+                :disabled="swapActionLoading"
+                @click="submitSwapAction"
+              >
+                <svg v-if="swapActionLoading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                {{ swapActionLoading ? t('common.processing') : t('common.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/components/instance/InstanceInfoTab.vue b/client/src/components/instance/InstanceInfoTab.vue
new file mode 100644
index 0000000..936dcf6
--- /dev/null
+++ b/client/src/components/instance/InstanceInfoTab.vue
@@ -0,0 +1,655 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { formatMemory, formatDisk, formatDate } from '@/utils/formatters'
+import type { Instance } from '@/types/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { getVipBadgeInlineStyle, normalizeVipBadgeStyle } from '@/utils/vipBadge'
+
+const { t } = useI18n()
+
+// SSH 连接帮助弹窗
+const showSshHelpModal = ref(false)
+
+// 托管者信息弹窗
+const showHostOwnerModal = ref(false)
+
+interface ResourceStats {
+  memory: { usage: number; limit: number; usagePercent: number }
+  disk: { usage: number; limit: number; usagePercent: number }
+}
+
+interface TrafficData {
+  monthlyUsed: string
+  monthlyUsedFormatted: string
+  monthlyLimit: string | null
+  monthlyLimitFormatted: string | null
+  trafficStatus: 'NORMAL' | 'WARNING' | 'LIMITED'
+  percentage: number
+}
+
+interface Props {
+  instance: Instance
+  stats: ResourceStats
+  statsLoading: boolean
+  trafficData?: TrafficData | null
+  trafficLoading?: boolean
+  showPassword: Record<string, boolean>
+  instancePassword?: Record<string, string | null>
+  canEditConfig?: boolean
+  enableResourcePool?: boolean
+}
+
+interface Emits {
+  (e: 'toggle-password', instanceId: number): void
+  (e: 'copy', text: string): void
+  (e: 'edit-config'): void
+  (e: 'redeem'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+const isRunning = computed<boolean>(() => {
+  const s = props.instance?.status?.toLowerCase()
+  return s === 'running'
+})
+
+// 是否可以编辑配置（只有 running 或 stopped 状态才能编辑，且需要权限）
+const canEditConfig = computed<boolean>(() => {
+  const s = props.instance?.status?.toLowerCase()
+  const statusOk = s === 'running' || s === 'stopped'
+  // 只有明确传递 true 时才允许编辑，默认 false
+  const hasPermission = props.canEditConfig === true
+  return statusOk && hasPermission
+})
+
+// 获取实例类型的样式类
+function getInstanceTypeClass(type: string | undefined | null): string {
+  const normalizedType = String(type || 'container').toLowerCase()
+  switch (normalizedType) {
+    case 'vm':
+      return themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600'
+    case 'container':
+    default:
+      return themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-600'
+  }
+}
+
+// 获取实例类型的标签文本
+function getInstanceTypeLabel(type: string | undefined | null): string {
+  const normalizedType = String(type || 'container').toLowerCase()
+  switch (normalizedType) {
+    case 'vm':
+      return t('common.instanceType.vm')
+    case 'container':
+    default:
+      return t('common.instanceType.container')
+  }
+}
+
+// 获取网络模式的样式类
+function getNetworkModeClass(mode: string | undefined | null): string {
+  const normalizedMode = String(mode || 'nat').toLowerCase()
+  switch (normalizedMode) {
+    case 'nat':
+      return themeStore.isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-600'
+    case 'nat_ipv6':
+      return themeStore.isDark ? 'bg-blue-900/50 text-blue-400' : 'bg-blue-100 text-blue-600'
+    case 'nat_ipv6_nat':
+      return themeStore.isDark ? 'bg-cyan-900/50 text-cyan-400' : 'bg-cyan-100 text-cyan-600'
+    case 'ipv6_only':
+      return themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600'
+    case 'ipv6_nat':
+      return themeStore.isDark ? 'bg-teal-900/50 text-teal-400' : 'bg-teal-100 text-teal-600'
+    default:
+      return themeStore.isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-600'
+  }
+}
+
+// 获取网络模式的标签文本
+function getNetworkModeLabel(mode: string | undefined | null): string {
+  const normalizedMode = String(mode || 'nat').toLowerCase()
+  // 直接使用国际化 key，所有模式的 key 格式统一为 common.networkMode.<mode>
+  const key = `common.networkMode.${normalizedMode}`
+  const translated = t(key)
+  // 如果翻译 key 不存在（返回 key 本身），回退到 nat 标签
+  return translated === key ? t('common.networkMode.nat') : translated
+}
+
+// 流量进度条颜色
+const trafficProgressBarClass = computed(() => {
+  if (!props.trafficData) return 'bg-blue-500'
+  if (props.trafficData.percentage >= 100) return 'bg-red-500'
+  if (props.trafficData.percentage >= 80) return 'bg-yellow-500'
+  return 'bg-blue-500'
+})
+
+// 格式化镜像名称：优先使用 imageName，否则去掉 images: 前缀
+function formatImageName(image: string, imageName?: string | null): string {
+  if (imageName) return imageName
+  return image?.replace(/^images:/, '') || ''
+}
+
+// 获取封停原因的显示文本
+function getSuspendReasonText(reason: string | null | undefined): string {
+  if (!reason) return t('instance.detail.info.suspendReasonDefault')
+  if (reason === 'expired') return t('instance.detail.info.suspendReasonExpired')
+  return reason
+}
+
+// 格式化带宽值，统一换算成 Mbps
+function formatBandwidth(bandwidth: string | null | undefined): string {
+  if (!bandwidth) return t('traffic.unlimited')
+  
+  // 如果是带单位的字符串（如 "100Mbit"），转换显示格式
+  if (/Mbit$/i.test(bandwidth)) {
+    return bandwidth.replace(/Mbit$/i, ' Mbps')
+  }
+  if (/Gbit$/i.test(bandwidth)) {
+    const value = parseFloat(bandwidth)
+    return (value * 1024) + ' Mbps'
+  }
+  
+  // 如果是纯数字（字节数表示，1GB=1Gbps），换算成 Mbps
+  const bytes = BigInt(bandwidth)
+  const GB = BigInt(1024 * 1024 * 1024)
+  const MB = BigInt(1024 * 1024)
+  
+  if (bytes >= GB) {
+    const gbps = Number(bytes / GB)
+    return (gbps * 1024) + ' Mbps'
+  } else if (bytes >= MB) {
+    return Number(bytes / MB) + ' Mbps'
+  }
+  
+  return t('traffic.unlimited')
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <!-- Basic Info -->
+    <div class="card p-5">
+      <h2 
+        class="text-sm font-medium mb-4"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ t('instance.detail.info.title') }}
+      </h2>
+      <dl class="space-y-3 text-sm">
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('instance.detail.info.instanceId') }}</dt>
+          <dd class="flex items-center gap-2">
+            <span
+              class="font-mono text-xs"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ instance.id }}
+              <template v-if="instance.incus_id">
+                <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">/</span>
+                <span>{{ instance.incus_id }}</span>
+              </template>
+            </span>
+            <!-- 托管UID：仅托管节点实例显示 -->
+            <button
+              v-if="instance.hostOwnerInfo"
+              class="text-xs px-1.5 py-0.5 rounded transition-colors"
+              :class="themeStore.isDark 
+                ? 'bg-blue-900/30 text-blue-400 hover:bg-blue-900/50' 
+                : 'bg-blue-50 text-blue-600 hover:bg-blue-100'"
+              @click="showHostOwnerModal = true"
+            >
+              {{ t('instance.detail.info.hostUid') }}:{{ instance.hostOwnerInfo.id }}
+            </button>
+          </dd>
+        </div>
+        <div class="flex justify-between">
+          <dt class="text-gray-500">{{ t('instance.detail.info.image') }}</dt>
+          <dd :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatImageName(instance.image, (instance as any).imageName) }}</dd>
+        </div>
+        <div class="flex justify-between items-center">
+          <dt class="text-gray-500">{{ t('instance.detail.info.instanceMode') }}</dt>
+          <dd class="flex items-center gap-2">
+            <span
+              :class="[
+                'text-xs px-1.5 py-0.5 rounded',
+                getInstanceTypeClass((instance as any).instance_type)
+              ]"
+            >
+              {{ getInstanceTypeLabel((instance as any).instance_type) }}
+            </span>
+            <span
+              :class="[
+                'text-xs px-1.5 py-0.5 rounded',
+                getNetworkModeClass(instance.network_mode)
+              ]"
+            >
+              {{ getNetworkModeLabel(instance.network_mode) }}
+            </span>
+          </dd>
+        </div>
+        <div v-if="instance.ssh_port" class="flex justify-between">
+          <dt class="text-gray-500">{{ t('instance.detail.info.sshPort') }}</dt>
+          <dd :class="['flex items-center gap-2', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">
+            <span class="font-mono">{{ instance.ssh_port }}</span>
+            <button 
+              class="text-blue-400/70 hover:text-blue-400"
+              :title="t('instance.detail.info.sshHelpTitle')"
+              @click="showSshHelpModal = true"
+            >
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+            <button 
+              class="text-xs text-blue-500 hover:text-blue-400"
+              @click="emit('copy', instance.ssh_port?.toString() || '')"
+            >
+              {{ t('instance.detail.info.copy') }}
+            </button>
+          </dd>
+        </div>
+        <div class="flex justify-between">
+          <dt class="text-gray-500">{{ t('instance.detail.info.rootPassword') }}</dt>
+          <dd :class="['flex items-center gap-2', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">
+            <span 
+              :id="'pwd-' + instance.id"
+              class="font-mono"
+            >{{ showPassword[instance.id] && instancePassword?.[instance.id] ? instancePassword[instance.id] : '••••••••' }}</span>
+            <button 
+              class="text-xs text-blue-500 hover:text-blue-400"
+              @click="emit('toggle-password', instance.id)"
+            >
+              {{ showPassword[instance.id] ? t('instance.detail.info.hide') : t('instance.detail.info.show') }}
+            </button>
+            <button 
+              v-if="showPassword[instance.id] && instancePassword?.[instance.id]"
+              class="text-xs text-blue-500 hover:text-blue-400"
+              @click="emit('copy', instancePassword[instance.id] || '')"
+            >
+              {{ t('instance.detail.info.copy') }}
+            </button>
+          </dd>
+        </div>
+        <!-- 节点 - 移到创建/到期时间上面 -->
+        <div class="flex justify-between">
+          <dt class="text-gray-500">{{ t('instance.detail.info.host') }}</dt>
+          <dd :class="['flex items-center gap-2', themeStore.isDark ? 'text-gray-300' : 'text-gray-700']">
+            <FlagIcon v-if="(instance as any).host?.country_code || (instance as any).hostCountryCode" :code="(instance as any).host?.country_code || (instance as any).hostCountryCode || 'us'" size="sm" />
+            <span class="uppercase">{{ (instance as any).host?.name || (instance as any).host || '-' }}</span>
+          </dd>
+        </div>
+        <div class="flex justify-between">
+          <dt class="text-gray-500">{{ t('instance.detail.info.createdAt') }}</dt>
+          <dd 
+            class="text-xs"
+            :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+          >
+            {{ formatDate(instance.created_at) }}
+          </dd>
+        </div>
+        <!-- 到期时间 -->
+        <div v-if="instance.expires_at" class="flex justify-between">
+          <dt class="text-gray-500">{{ t('instance.detail.info.expiresAt') }}</dt>
+          <dd 
+            class="text-xs"
+            :class="[
+              new Date(instance.expires_at) <= new Date() 
+                ? (themeStore.isDark ? 'text-red-400' : 'text-red-600')
+                : (themeStore.isDark ? 'text-gray-400' : 'text-gray-600')
+            ]"
+          >
+            {{ formatDate(instance.expires_at) }}
+          </dd>
+        </div>
+        <!-- 封停信息 -->
+        <div v-if="instance.status === 'suspended'" class="p-2 rounded-lg" :class="themeStore.isDark ? 'bg-red-900/30' : 'bg-red-50'">
+          <div class="flex items-center gap-2 mb-1">
+            <svg class="w-4 h-4" :class="themeStore.isDark ? 'text-red-400' : 'text-red-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span class="text-sm font-medium" :class="themeStore.isDark ? 'text-red-400' : 'text-red-600'">{{ t('instance.detail.info.suspended') }}</span>
+          </div>
+          <p class="text-xs" :class="themeStore.isDark ? 'text-red-300' : 'text-red-600'">
+            <span class="font-medium">{{ t('instance.detail.info.suspendReasonLabel') }}:</span>
+            {{ getSuspendReasonText(instance.suspend_reason) }}
+          </p>
+          <p v-if="instance.suspended_at" class="text-xs mt-1" :class="themeStore.isDark ? 'text-red-400/70' : 'text-red-500/70'">
+            {{ t('instance.detail.info.suspendedAt') }}: {{ formatDate(instance.suspended_at) }}
+          </p>
+          <p class="text-xs mt-2" :class="themeStore.isDark ? 'text-red-400/80' : 'text-red-500/80'">
+            {{ t('instance.detail.info.suspendTip') }}
+          </p>
+        </div>
+      </dl>
+    </div>
+
+    <!-- Resource Usage -->
+    <div class="card p-5">
+      <div class="flex items-center justify-between mb-4">
+        <h2 
+          class="text-sm font-medium"
+          :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+        >
+          {{ t('instance.detail.info.resourceUsage') }}
+        </h2>
+        <div class="flex items-center gap-2">
+          <!-- 兑换按钮 -->
+          <button
+            v-if="props.enableResourcePool"
+            class="text-xs px-2 py-1 rounded transition-colors"
+            :class="themeStore.isDark ? 'bg-emerald-900/50 hover:bg-emerald-800/50 text-emerald-400' : 'bg-emerald-50 hover:bg-emerald-100 text-emerald-600'"
+            @click="emit('redeem')"
+          >
+            <svg class="w-3.5 h-3.5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+            </svg>
+            {{ t('instance.detail.info.redeem') }}
+          </button>
+          <!-- 编辑按钮 -->
+          <button
+            class="text-xs px-2 py-1 rounded transition-colors"
+            :class="[
+              canEditConfig 
+                ? (themeStore.isDark ? 'bg-gray-800 hover:bg-gray-700 text-gray-400' : 'bg-gray-100 hover:bg-gray-200 text-gray-600')
+                : (themeStore.isDark ? 'bg-gray-800 text-gray-600 cursor-not-allowed' : 'bg-gray-100 text-gray-400 cursor-not-allowed')
+            ]"
+            :disabled="!canEditConfig"
+            :title="canEditConfig ? '' : t('instance.detail.info.cannotEditConfig')"
+            @click="canEditConfig && emit('edit-config')"
+          >
+            <svg class="w-3.5 h-3.5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+            {{ t('common.edit') }}
+          </button>
+          <div 
+            v-if="isRunning && statsLoading" 
+            class="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin"
+            :class="themeStore.isDark ? 'border-gray-600' : 'border-gray-400'"
+          ></div>
+        </div>
+      </div>
+      <div class="space-y-4">
+        <!-- CPU -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">
+              <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+              </svg>
+              {{ t('instance.detail.info.cpu') }}
+            </span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ instance.cpu }}%</span>
+          </div>
+        </div>
+        <!-- Memory -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">
+              <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+              </svg>
+              {{ t('instance.detail.info.memory') }}
+              <span class="text-xs text-gray-400 ml-1">({{ t('instance.detail.info.includesCache') }})</span>
+            </span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              <template v-if="stats.memory.usage > 0">
+                {{ formatMemory(stats.memory.usage) }} / 
+              </template>
+              {{ formatMemory(stats.memory.limit > 0 ? stats.memory.limit : instance.memory) }}
+              <span v-if="stats.memory.usagePercent > 0" class="text-xs text-gray-500 ml-1">
+                ({{ stats.memory.usagePercent }}%)
+              </span>
+            </span>
+          </div>
+          <div 
+            class="h-2 rounded-full overflow-hidden"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          >
+            <div 
+              class="h-full rounded-full transition-all duration-500"
+              :class="stats.memory.usagePercent > 80 ? 'bg-red-500' : stats.memory.usagePercent > 60 ? 'bg-yellow-500' : 'bg-green-500'"
+              :style="{ width: stats.memory.usagePercent + '%' }"
+            ></div>
+          </div>
+        </div>
+        <!-- Disk -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">
+              <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+              </svg>
+              {{ t('instance.detail.info.disk') }}
+            </span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              <template v-if="stats.disk.usage > 0">
+                {{ formatDisk(stats.disk.usage) }} / 
+              </template>
+              {{ formatDisk(stats.disk.limit > 0 ? stats.disk.limit : instance.disk) }}
+              <span v-if="stats.disk.usagePercent > 0" class="text-xs text-gray-500 ml-1">
+                ({{ stats.disk.usagePercent }}%)
+              </span>
+            </span>
+          </div>
+          <div 
+            class="h-2 rounded-full overflow-hidden"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+          >
+            <div 
+              class="h-full rounded-full transition-all duration-500"
+              :class="stats.disk.usagePercent > 80 ? 'bg-red-500' : stats.disk.usagePercent > 60 ? 'bg-yellow-500' : 'bg-purple-500'"
+              :style="{ width: stats.disk.usagePercent + '%' }"
+            ></div>
+          </div>
+        </div>
+        <!-- Monthly Traffic -->
+        <div>
+          <div class="flex justify-between text-sm mb-1">
+            <span class="text-gray-500">
+              <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+              </svg>
+              {{ t('traffic.monthlyUsage') }}
+            </span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+              <template v-if="trafficLoading">
+                <span class="text-xs text-gray-400">{{ t('common.loading') }}</span>
+              </template>
+              <template v-else-if="trafficData">
+                {{ trafficData.monthlyUsedFormatted }}
+                <template v-if="trafficData.monthlyLimitFormatted">
+                  / {{ trafficData.monthlyLimitFormatted }}
+                </template>
+                <template v-else>
+                  / {{ t('traffic.unlimited') }}
+                </template>
+                <span class="text-xs text-gray-500 ml-1">
+                  ({{ (trafficData.percentage || 0).toFixed(1) }}%)
+                </span>
+              </template>
+              <template v-else>
+                <span class="text-xs text-gray-400">{{ t('traffic.noData') }}</span>
+              </template>
+            </span>
+          </div>
+          <div 
+            class="h-2 rounded-full overflow-hidden"
+            :class="[
+              themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200',
+              { 'opacity-0': !trafficData || trafficLoading }
+            ]"
+          >
+            <div 
+              :class="['h-full rounded-full transition-all duration-500', trafficProgressBarClass]"
+              :style="{ width: Math.min(Math.max(trafficData?.percentage || 0, 0), 100) + '%' }"
+            ></div>
+          </div>
+        </div>
+        <!-- Bandwidth Limits -->
+        <div class="pt-2 border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <div class="flex justify-between text-xs text-gray-500">
+            <span>
+              <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-1"></span>
+              {{ t('instance.detail.info.ingressLimit') }}: {{ formatBandwidth(instance.limitsIngress) }}
+            </span>
+            <span>
+              <span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-1"></span>
+              {{ t('instance.detail.info.egressLimit') }}: {{ formatBandwidth(instance.limitsEgress) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SSH 连接帮助弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showSshHelpModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showSshHelpModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('instance.detail.info.sshHelpTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showSshHelpModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <!-- IPv4 连接说明 -->
+              <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                <div class="flex items-center gap-2 mb-2">
+                  <span class="text-xs font-medium px-2 py-0.5 rounded" :class="themeStore.isDark ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-600'">IPv4</span>
+                </div>
+                <p class="text-sm" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                  {{ t('instance.detail.info.sshHelpIpv4') }}
+                </p>
+              </div>
+              <!-- IPv6 连接说明（仅在 nat_ipv6 模式下显示） -->
+              <div 
+                v-if="instance.network_mode === 'nat_ipv6'"
+                class="p-3 rounded-lg" 
+                :class="themeStore.isDark ? 'bg-blue-900/30' : 'bg-blue-50'"
+              >
+                <div class="flex items-center gap-2 mb-2">
+                  <span class="text-xs font-medium px-2 py-0.5 rounded" :class="themeStore.isDark ? 'bg-blue-800 text-blue-300' : 'bg-blue-100 text-blue-600'">IPv6</span>
+                </div>
+                <p class="text-sm" :class="themeStore.isDark ? 'text-blue-200' : 'text-blue-700'">
+                  {{ t('instance.detail.info.sshHelpIpv6') }}
+                </p>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-primary" @click="showSshHelpModal = false">
+                {{ t('common.gotIt') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 托管者信息弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showHostOwnerModal && instance.hostOwnerInfo" class="modal-overlay">
+          <div class="modal-backdrop" @click="showHostOwnerModal = false"></div>
+          <div class="modal-content max-w-sm">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('instance.detail.info.hostOwnerTitle') }}</h3>
+              <button type="button" class="text-themed-muted hover:text-themed" @click="showHostOwnerModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <!-- 用户头像区域 -->
+              <div class="flex items-center gap-4 mb-6">
+                <UserAvatar
+                  :username="instance.hostOwnerInfo.username"
+                  :email="instance.hostOwnerInfo.email"
+                  :avatar-style="instance.hostOwnerInfo.avatarStyle"
+                  :badge-id="instance.hostOwnerInfo.avatarBadgeId"
+                  :size="56"
+                />
+                <div class="flex-1">
+                  <p class="font-medium text-themed">{{ instance.hostOwnerInfo.username }}</p>
+                  <p class="text-sm text-themed-muted">UID: {{ instance.hostOwnerInfo.id }}</p>
+                </div>
+                <!-- VIP徽章 -->
+                <div 
+                  v-if="instance.hostOwnerInfo.vipLevel > 0"
+                  class="px-3 py-1.5 rounded-full border text-xs font-bold flex items-center gap-1.5 shadow-sm"
+                  :style="getVipBadgeInlineStyle(normalizeVipBadgeStyle(instance.hostOwnerInfo.vipBadgeStyle, instance.hostOwnerInfo.vipLevel))"
+                >
+                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+                  </svg>
+                  VIP{{ instance.hostOwnerInfo.vipLevel }}
+                </div>
+              </div>
+              <!-- 详细信息 -->
+              <div class="space-y-3">
+                <div 
+                  class="flex items-center justify-between p-3 rounded-lg"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                >
+                  <span class="text-sm text-themed-muted flex items-center gap-2">
+                    <svg 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+                    </svg>
+                    {{ t('instance.detail.info.hostOwnerHostCount') }}
+                  </span>
+                  <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'">
+                    {{ instance.hostOwnerInfo.hostCount }}
+                  </span>
+                </div>
+                <div 
+                  class="flex items-center justify-between p-3 rounded-lg"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                >
+                  <span class="text-sm text-themed-muted flex items-center gap-2">
+                    <svg 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                    </svg>
+                    {{ t('instance.detail.info.hostOwnerInstanceCount') }}
+                  </span>
+                  <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">
+                    {{ instance.hostOwnerInfo.instanceCount }}
+                  </span>
+                </div>
+                <div 
+                  class="flex items-center justify-between p-3 rounded-lg"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                >
+                  <span class="text-sm text-themed-muted flex items-center gap-2">
+                    <svg 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    {{ t('instance.detail.info.hostOwnerRegisteredDays') }}
+                  </span>
+                  <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-purple-400' : 'text-purple-600'">
+                    {{ instance.hostOwnerInfo.registeredDays }} {{ t('common.days') }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn-primary" @click="showHostOwnerModal = false">
+                {{ t('common.close') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
diff --git a/client/src/components/instance/InstanceLogsTab.vue b/client/src/components/instance/InstanceLogsTab.vue
new file mode 100644
index 0000000..effd061
--- /dev/null
+++ b/client/src/components/instance/InstanceLogsTab.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import type { Log } from '@/types/api'
+
+const props = defineProps<{
+  instanceId: number
+  instanceName: string
+}>()
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 数据
+const logs = ref<Log[]>([])
+const loading = ref<boolean>(true)
+const refreshing = ref<boolean>(false)
+
+// 分页
+const page = ref<number>(1)
+const pageSize = ref<number>(10)
+const total = ref<number>(0)
+const totalPages = ref<number>(0)
+
+// 筛选
+const searchQuery = ref<string>('')
+
+// 展开的内容行
+const expandedRows = ref<Set<number>>(new Set())
+
+// 加载日志
+async function loadLogs(silent = false): Promise<void> {
+  if (!silent) loading.value = true
+  else refreshing.value = true
+  try {
+    const params: { page: number; pageSize: number; instanceId: number; search?: string } = {
+      page: page.value,
+      pageSize: pageSize.value,
+      instanceId: props.instanceId
+    }
+    if (searchQuery.value) {
+      params.search = searchQuery.value
+    }
+    
+    const response = await api.logs.list(params)
+    const data = response as { logs?: Log[]; total?: number; totalPages?: number }
+    logs.value = data.logs || []
+    total.value = data.total || 0
+    totalPages.value = data.totalPages || 0
+  } catch (err: any) {
+    toast.error(t('logs.loadFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+// 搜索
+function handleSearch(): void {
+  page.value = 1
+  loadLogs(true)
+}
+
+// 重置筛选
+function resetFilters(): void {
+  searchQuery.value = ''
+  page.value = 1
+  loadLogs(true)
+}
+
+// 修改每页数量
+function handlePageSizeChange(): void {
+  page.value = 1
+  loadLogs(true)
+}
+
+// 格式化日期
+function formatDate(dateString: string | null | undefined): string {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  const localeMap: Record<string, string> = {
+    'zh-CN': 'zh-CN',
+    'zh-TW': 'zh-TW',
+    'en': 'en-US'
+  }
+  const localeCode = localeMap[locale.value] || 'en-US'
+  return date.toLocaleString(localeCode, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+// 格式化日期（移动端简短版）
+function formatDateShort(dateString: string | null | undefined): string {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  const localeMap: Record<string, string> = {
+    'zh-CN': 'zh-CN',
+    'zh-TW': 'zh-TW',
+    'en': 'en-US'
+  }
+  const localeCode = localeMap[locale.value] || 'en-US'
+  return date.toLocaleString(localeCode, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 获取结果徽章类名
+function getResultClass(result: string): string {
+  if (result === 'success') {
+    return 'badge-success'
+  } else if (result === 'failed') {
+    return 'badge-error'
+  } else {
+    return 'badge-warning'
+  }
+}
+
+// 切换内容展开/收起
+function toggleContent(logId: number): void {
+  if (expandedRows.value.has(logId)) {
+    expandedRows.value.delete(logId)
+  } else {
+    expandedRows.value.add(logId)
+  }
+}
+
+// 检查内容是否需要截断
+function isContentLong(content: string): boolean {
+  return !!content && content.length > 40
+}
+
+// 监听实例变化或重命名
+watch(() => [props.instanceId, props.instanceName] as const, () => {
+  page.value = 1
+  loadLogs()
+})
+
+onMounted(async () => {
+  await loadLogs()
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Filters -->
+    <div class="card p-3 sm:p-4">
+      <div class="flex flex-col sm:flex-row items-stretch sm:items-end gap-3">
+        <!-- Search -->
+        <div class="flex-1">
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('logs.search') }}</label>
+          <div class="flex gap-2">
+            <input 
+              v-model="searchQuery" 
+              type="text"
+              class="input flex-1 text-sm" 
+              :placeholder="$t('logs.searchPlaceholder')" 
+              @keyup.enter="handleSearch"
+            />
+            <button class="btn-secondary h-[38px] text-sm px-3" @click="handleSearch">
+              <svg class="w-4 h-4 sm:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <span class="hidden sm:inline">{{ $t('logs.search') }}</span>
+            </button>
+            <button class="btn-secondary h-[38px] text-sm px-3" @click="resetFilters">
+              <svg class="w-4 h-4 sm:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+              <span class="hidden sm:inline">{{ $t('logs.reset') }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Logs Table -->
+    <SkeletonLoader v-if="loading" type="table" />
+
+    <!-- Desktop Table View -->
+    <div v-else class="card overflow-hidden hidden sm:block">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[600px]">
+          <thead>
+            <tr class="border-b border-themed">
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.time') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.action') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.content') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.result') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="logs.length === 0" class="border-b border-themed">
+              <td colspan="4" class="py-8 text-center text-themed-secondary">
+                {{ $t('logs.noLogs') }}
+              </td>
+            </tr>
+            <tr 
+              v-for="log in logs" 
+              :key="log.id"
+              class="border-b border-themed hover:bg-themed/5 transition-colors"
+            >
+              <td class="py-3 px-4 text-sm text-themed-secondary whitespace-nowrap">
+                {{ formatDate(log.created_at) }}
+              </td>
+              <td class="py-3 px-4 text-sm text-themed whitespace-nowrap">
+                {{ log.action }}
+              </td>
+              <td class="py-3 px-4 text-sm">
+                <div class="max-w-xs lg:max-w-md">
+                  <!-- 短内容直接显示 -->
+                  <span v-if="!isContentLong(log.content)" class="text-themed-secondary">
+                    {{ log.content }}
+                  </span>
+                  <!-- 长内容可展开 -->
+                  <template v-else>
+                    <div v-if="!expandedRows.has(log.id)" class="flex items-center gap-1.5">
+                      <span class="text-themed-secondary truncate flex-1">{{ log.content.slice(0, 40) }}...</span>
+                      <button
+                        class="flex-shrink-0 p-1 rounded transition-colors"
+                        :class="themeStore.isDark ? 'hover:bg-gray-700 text-blue-400' : 'hover:bg-gray-100 text-blue-500'"
+                        :title="$t('logs.expand')"
+                        @click="toggleContent(log.id)"
+                      >
+                        <svg 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="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                    </div>
+                    <div v-else class="space-y-2">
+                      <p class="text-themed-secondary whitespace-pre-wrap break-words">{{ log.content }}</p>
+                      <button
+                        class="text-xs flex items-center gap-1 transition-colors"
+                        :class="themeStore.isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-500 hover:text-blue-600'"
+                        @click="toggleContent(log.id)"
+                      >
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                        </svg>
+                        {{ $t('logs.collapse') }}
+                      </button>
+                    </div>
+                  </template>
+                </div>
+              </td>
+              <td class="py-3 px-4 whitespace-nowrap">
+                <span :class="['badge whitespace-nowrap', getResultClass(log.result)]">
+                  {{ log.result }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination (Desktop) -->
+      <div 
+        v-if="total > 0" 
+        class="flex items-center justify-between gap-2 px-4 py-3 border-t border-themed"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm text-themed-secondary">
+            {{ $t('logs.totalRecords', { total, page, totalPages }) }}
+          </span>
+          <select
+            v-model="pageSize"
+            class="text-sm rounded-md border-0 py-1 pl-2 pr-7 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer"
+            :class="themeStore.isDark 
+              ? 'bg-gray-800 text-gray-300 ring-gray-700' 
+              : 'bg-gray-50 text-gray-700 ring-gray-200'"
+            @change="handlePageSizeChange"
+          >
+            <option :value="10">10 / {{ $t('common.page') }}</option>
+            <option :value="30">30 / {{ $t('common.page') }}</option>
+            <option :value="50">50 / {{ $t('common.page') }}</option>
+          </select>
+        </div>
+        <div v-if="totalPages > 1" class="flex items-center gap-1">
+          <button
+            :disabled="page === 1 || refreshing"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              page === 1 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="page = Math.max(1, page - 1); loadLogs(true)"
+          >
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div 
+            class="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium"
+            :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+          >
+            <span>{{ page }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">/</span>
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ totalPages }}</span>
+          </div>
+          <button
+            :disabled="page === totalPages || refreshing"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              page === totalPages 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="page = Math.min(totalPages, page + 1); loadLogs(true)"
+          >
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Card View -->
+    <div v-if="!loading" class="space-y-3 sm:hidden">
+      <!-- Empty State -->
+      <div v-if="logs.length === 0" class="card p-6 text-center text-themed-secondary">
+        {{ $t('logs.noLogs') }}
+      </div>
+      
+      <!-- Log Cards -->
+      <div 
+        v-for="log in logs" 
+        :key="log.id"
+        class="card p-3 space-y-2"
+      >
+        <!-- Header: Time + Result -->
+        <div class="flex items-center justify-between">
+          <span class="text-xs text-themed-muted">{{ formatDateShort(log.created_at) }}</span>
+          <span :class="['badge text-xs', getResultClass(log.result)]">
+            {{ log.result }}
+          </span>
+        </div>
+        
+        <!-- Action -->
+        <div class="text-sm font-medium text-themed">
+          {{ log.action }}
+        </div>
+        
+        <!-- Content -->
+        <div class="text-sm text-themed-secondary">
+          <template v-if="!isContentLong(log.content)">
+            {{ log.content }}
+          </template>
+          <template v-else>
+            <div v-if="!expandedRows.has(log.id)">
+              <span>{{ log.content.slice(0, 60) }}...</span>
+              <button
+                class="ml-1 text-xs"
+                :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-500'"
+                @click="toggleContent(log.id)"
+              >
+                {{ $t('logs.expand') }}
+              </button>
+            </div>
+            <div v-else>
+              <p class="whitespace-pre-wrap break-words">{{ log.content }}</p>
+              <button
+                class="mt-1 text-xs"
+                :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-500'"
+                @click="toggleContent(log.id)"
+              >
+                {{ $t('logs.collapse') }}
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- Pagination (Mobile) -->
+      <div 
+        v-if="total > 0" 
+        class="card p-3"
+      >
+        <div class="flex items-center justify-between">
+          <span class="text-xs text-themed-muted">
+            {{ page }} / {{ totalPages }}
+          </span>
+          <div class="flex items-center gap-2">
+            <button
+              :disabled="page === 1 || refreshing"
+              class="btn-secondary btn-sm px-3"
+              @click="page = Math.max(1, page - 1); loadLogs(true)"
+            >
+              <svg 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 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <button
+              :disabled="page === totalPages || refreshing"
+              class="btn-secondary btn-sm px-3"
+              @click="page = Math.min(totalPages, page + 1); loadLogs(true)"
+            >
+              <svg 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="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/InstanceNetworkTab.vue b/client/src/components/instance/InstanceNetworkTab.vue
new file mode 100644
index 0000000..3cd75c0
--- /dev/null
+++ b/client/src/components/instance/InstanceNetworkTab.vue
@@ -0,0 +1,696 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import type { Instance } from '@/types/api'
+
+const { t } = useI18n()
+
+interface PortMapping {
+  id: number
+  protocol: 'tcp' | 'udp'
+  publicPort?: number
+  privatePort?: number
+  public_port?: number
+  private_port?: number
+  remark?: string | null
+}
+
+// 兼容两种命名格式
+function getPublicPort(m: PortMapping): number {
+  return m.publicPort ?? m.public_port ?? 0
+}
+
+function getPrivatePort(m: PortMapping): number {
+  return m.privatePort ?? m.private_port ?? 0
+}
+
+interface Props {
+  instance: Instance
+  copied: string
+  canManagePorts?: boolean  // AUTH004: 节点所有者不能管理端口映射
+  isInstanceOwner?: boolean  // 是否是实例所有者
+  reassignIpv6Loading?: boolean  // 重新分配 IPv6 加载状态
+  lastIpv6ReassignAt?: string | null  // 上次重新分配 IPv6 时间
+  deletePortsLoading?: boolean  // 批量删除加载状态
+}
+
+interface Emits {
+  (e: 'copy', text: string, key?: string): void
+  (e: 'add-port'): void
+  (e: 'delete-port', portId: number): void
+  (e: 'delete-ports', portIds: number[]): void
+  (e: 'reassign-ipv6'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+function isIpv4Address(value: string | null | undefined): boolean {
+  if (!value) return false
+  return /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(value)
+}
+
+const publicIpv4Address = computed<string | null>(() => {
+  const candidate = (props.instance as any).nat_public_ip ?? props.instance.natPublicIp ?? props.instance.host?.nat_public_ip ?? null
+  return isIpv4Address(candidate) ? candidate : null
+})
+
+// 宿主机公网 IPv6 地址（从 host_ip_address 中提取，仅在 IPv6 NAT 模式下使用）
+function isIpv6Address(value: string | null | undefined): boolean {
+  if (!value) return false
+  // 简单检测是否包含冒号（IPv6 特征）
+  return value.includes(':')
+}
+
+const hostPublicIpv6 = computed<string | null>(() => {
+  // 优先从新增的 host_ipv6_address 字段获取（后端从 ipv6_gateway 提取）
+  const hostIpv6 = (props.instance as any).host_ipv6_address
+    ?? (props.instance as any).hostIpv6Address
+    ?? null
+  if (hostIpv6 && isIpv6Address(hostIpv6)) return hostIpv6
+  // 回退：从 host_ip_address 获取（如果宿主机使用 IPv6 连接）
+  const hostIp = (props.instance as any).host_ip_address 
+    ?? (props.instance as any).hostIpAddress 
+    ?? (props.instance as any).host?.ip_address 
+    ?? null
+  if (isIpv6Address(hostIp)) return hostIp
+  return null
+})
+
+// 端口配额状态（如果未特别指定，放行判断交由后端）
+const portLimit = computed<number | null>(() => {
+  const limit = (props.instance as any)?.port_limit
+  return limit === undefined ? null : limit
+})
+
+// 最终显示的公网 IPv6 地址（根据网络模式决定优先级）
+const displayIpv6 = computed<string | null>(() => {
+  const mode = props.instance.network_mode
+  // nat_ipv6_nat / ipv6_nat 模式：容器共享宿主机 IPv6，优先显示宿主机公网 IPv6
+  if (mode === 'nat_ipv6_nat' || mode === 'ipv6_nat') {
+    return hostPublicIpv6.value || props.instance.ipv6 || null
+  }
+  // nat_ipv6 / ipv6_only 模式：容器有独立的公网 IPv6
+  return props.instance.ipv6 || hostPublicIpv6.value || null
+})
+const networkMode = computed<string>(() => props.instance.network_mode || (props.instance as any)?.networkMode || '')
+const isIpv6OnlyInstance = computed<boolean>(() => networkMode.value === 'ipv6_only')
+const hasPortQuota = computed<boolean>(() => portLimit.value !== 0) // 如果设置为0则没有配额，否则认为有配额（哪怕null）
+const portQuotaUsed = computed<number>(() => portMappings.value.length)
+const portQuotaRemaining = computed<number>(() => {
+  if (portLimit.value === null) return 999 // fallback unlimited representation
+  return Math.max(0, portLimit.value - portQuotaUsed.value)
+})
+const isPortQuotaFull = computed<boolean>(() => portLimit.value !== null && portQuotaRemaining.value <= 0)
+const canAddPorts = computed<boolean>(() => {
+  if (props.canManagePorts === false) return false
+  if (isIpv6OnlyInstance.value) return false
+  return true
+})
+
+// 协议筛选
+const protocolFilter = ref<'both' | 'tcp' | 'udp'>('both')
+
+// 分页
+const portPage = ref<number>(1)
+const portPageSize = ref<number>(30)
+const pageSizeOptions = [10, 20, 30, 50, 100]
+
+// 多选
+const selectedPorts = ref<Set<number>>(new Set())
+const isSelectAll = computed(() => {
+  if (paginatedPorts.value.length === 0) return false
+  return paginatedPorts.value.every(m => selectedPorts.value.has(m.id))
+})
+const isPartialSelect = computed(() => {
+  if (paginatedPorts.value.length === 0) return false
+  const selectedInPage = paginatedPorts.value.filter(m => selectedPorts.value.has(m.id)).length
+  return selectedInPage > 0 && selectedInPage < paginatedPorts.value.length
+})
+const hasSelection = computed(() => selectedPorts.value.size > 0)
+
+const portMappings = computed<PortMapping[]>(() => {
+  return (props.instance as any)?.port_mappings || []
+})
+
+// 根据协议筛选后的映射
+const filteredPortMappings = computed<PortMapping[]>(() => {
+  if (protocolFilter.value === 'both') return portMappings.value
+  return portMappings.value.filter(m => m.protocol === protocolFilter.value)
+})
+
+const paginatedPorts = computed(() => {
+  const start = (portPage.value - 1) * portPageSize.value
+  return filteredPortMappings.value.slice(start, start + portPageSize.value)
+})
+
+const portTotalPages = computed<number>(() => {
+  return Math.ceil(filteredPortMappings.value.length / portPageSize.value) || 1
+})
+
+// 筛选或每页数量变化时重置页码和选中
+watch([protocolFilter, portPageSize], () => {
+  portPage.value = 1
+  selectedPorts.value.clear()
+})
+
+// 翻页时清空选中（避免删除不可见的端口）
+watch(portPage, () => {
+  selectedPorts.value.clear()
+})
+
+// 切换全选
+function toggleSelectAll() {
+  if (isSelectAll.value) {
+    // 取消当前页的选中
+    paginatedPorts.value.forEach(m => selectedPorts.value.delete(m.id))
+  } else {
+    // 选中当前页
+    paginatedPorts.value.forEach(m => selectedPorts.value.add(m.id))
+  }
+}
+
+// 切换单个选中
+function toggleSelect(id: number) {
+  if (selectedPorts.value.has(id)) {
+    selectedPorts.value.delete(id)
+  } else {
+    selectedPorts.value.add(id)
+  }
+}
+
+// 批量删除
+function handleBatchDelete() {
+  if (selectedPorts.value.size === 0) return
+  emit('delete-ports', Array.from(selectedPorts.value))
+}
+
+// 删除成功后清空选中
+watch(() => props.deletePortsLoading, (loading, prevLoading) => {
+  if (prevLoading && !loading) {
+    selectedPorts.value.clear()
+  }
+})
+
+// 自动调整页码（当删除导致当前页超出范围时）
+watch(portTotalPages, (newTotal) => {
+  if (portPage.value > newTotal) {
+    portPage.value = Math.max(1, newTotal)
+  }
+})
+
+// 当端口映射数据变化时，清理不存在的选中项
+watch(portMappings, (newMappings) => {
+  const existingIds = new Set(newMappings.map(m => m.id))
+  const toRemove: number[] = []
+  selectedPorts.value.forEach(id => {
+    if (!existingIds.has(id)) {
+      toRemove.push(id)
+    }
+  })
+  toRemove.forEach(id => selectedPorts.value.delete(id))
+}, { deep: true })
+
+// 计算 IPv6 重新分配冷却状态
+const ipv6ReassignCooldown = computed(() => {
+  if (!props.lastIpv6ReassignAt) {
+    return { inCooldown: false, remainingHours: 0 }
+  }
+  const cooldownMs = 24 * 60 * 60 * 1000 // 24小时
+  const lastReassign = new Date(props.lastIpv6ReassignAt).getTime()
+  const timeSinceLastReassign = Date.now() - lastReassign
+  if (timeSinceLastReassign < cooldownMs) {
+    const remainingHours = Math.ceil((cooldownMs - timeSinceLastReassign) / (60 * 60 * 1000))
+    return { inCooldown: true, remainingHours }
+  }
+  return { inCooldown: false, remainingHours: 0 }
+})
+
+// 是否可以重新分配 IPv6
+const canReassignIpv6 = computed(() => {
+  return props.instance.status === 'stopped' && !ipv6ReassignCooldown.value.inCooldown
+})
+
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Network Addresses -->
+    <div class="card p-5">
+      <h2 
+        class="text-sm font-medium mb-4"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ t('instance.detail.network.title') }}
+      </h2>
+      <dl class="space-y-3 text-sm">
+        <!-- NAT 模式: 显示内网 IPv4 和公网 IPv4（如果有） -->
+        <template v-if="['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(instance.network_mode || '')">
+          <!-- 内网 IPv4 -->
+          <div class="flex justify-between items-center">
+            <dt class="text-gray-500">{{ t('instance.detail.network.privateIpv4') }}</dt>
+            <dd v-if="instance.ipv4" class="flex items-center gap-2">
+              <code 
+                class="font-mono px-2 py-0.5 rounded"
+                :class="themeStore.isDark ? 'text-gray-300 bg-gray-800' : 'text-gray-700 bg-gray-100'"
+              >{{ instance.ipv4 }}</code>
+              <button 
+                class="text-gray-500 hover:text-gray-400" 
+                :title="t('common.copy')"
+                @click="emit('copy', instance.ipv4, 'ipv4')"
+              >
+                <svg v-if="copied !== 'ipv4'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>
+            </dd>
+            <dd v-else class="text-gray-500">-</dd>
+          </div>
+          <!-- 只有真实公网 IPv4 时才显示 -->
+          <div v-if="publicIpv4Address" class="flex justify-between items-center mt-3">
+            <dt class="text-gray-500">{{ t('instance.detail.network.publicIpv4') }}</dt>
+            <dd class="flex items-center gap-2">
+              <code 
+                class="font-mono px-2 py-0.5 rounded"
+                :class="themeStore.isDark ? 'text-gray-300 bg-gray-800' : 'text-gray-700 bg-gray-100'"
+              >{{ publicIpv4Address }}</code>
+              <button 
+                class="text-gray-500 hover:text-gray-400" 
+                :title="t('common.copy')"
+                @click="emit('copy', publicIpv4Address, 'nat_public_ip')"
+              >
+                <svg v-if="copied !== 'nat_public_ip'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>
+            </dd>
+          </div>
+          <!-- 公网 IPv6 -->
+          <div v-if="['nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(instance.network_mode || '')" class="flex justify-between items-center mt-3">
+            <dt class="text-gray-500">{{ t('instance.detail.network.publicIpv6') }}</dt>
+            <dd v-if="displayIpv6" class="flex items-center gap-2">
+              <!-- 重新获取 IPv6 按钮（仅 nat_ipv6 模式有独立 IPv6 可重新分配） -->
+              <button
+                v-if="props.isInstanceOwner !== false && instance.network_mode === 'nat_ipv6'"
+                class="text-xs px-2 py-0.5 rounded transition-colors flex-shrink-0"
+                :class="[
+                  canReassignIpv6 
+                    ? (themeStore.isDark 
+                      ? 'bg-blue-900/30 text-blue-400 hover:bg-blue-900/50' 
+                      : 'bg-blue-100 text-blue-600 hover:bg-blue-200')
+                    : (themeStore.isDark 
+                      ? 'bg-gray-800 text-gray-500 cursor-not-allowed' 
+                      : 'bg-gray-100 text-gray-400 cursor-not-allowed')
+                ]"
+                :disabled="!canReassignIpv6 || props.reassignIpv6Loading"
+                :title="ipv6ReassignCooldown.inCooldown 
+                  ? t('instance.detail.network.reassignIpv6Cooldown', { hours: ipv6ReassignCooldown.remainingHours })
+                  : (instance.status !== 'stopped' 
+                    ? t('instance.detail.network.reassignIpv6StopRequired') 
+                    : t('instance.detail.network.reassignIpv6'))"
+                @click="emit('reassign-ipv6')"
+              >
+                <span v-if="props.reassignIpv6Loading" class="flex items-center gap-1">
+                  <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                </span>
+                <span v-else-if="ipv6ReassignCooldown.inCooldown">{{ t('instance.detail.network.reassignIpv6CooldownShort', { hours: ipv6ReassignCooldown.remainingHours }) }}</span>
+                <span v-else>{{ t('instance.detail.network.reassignIpv6') }}</span>
+              </button>
+              <code 
+                class="font-mono text-xs px-2 py-0.5 rounded truncate max-w-[200px] sm:max-w-[300px]"
+                :class="themeStore.isDark ? 'text-gray-400 bg-gray-800/50' : 'text-gray-600 bg-gray-100'"
+                :title="displayIpv6 || undefined"
+              >{{ displayIpv6 }}</code>
+              <button 
+                class="text-gray-500 hover:text-gray-400 flex-shrink-0" 
+                :title="t('common.copy')"
+                @click="emit('copy', displayIpv6 || '', 'ipv6')"
+              >
+                <svg v-if="copied !== 'ipv6'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>
+            </dd>
+            <dd v-else class="text-gray-500">-</dd>
+          </div>
+        </template>
+        <!-- 非 NAT 模式: 显示公网 IPv4 和公网 IPv6 -->
+        <template v-else>
+          <div class="flex justify-between items-center">
+            <dt class="text-gray-500">{{ t('instance.detail.network.publicIpv4') }}</dt>
+            <dd v-if="instance.ipv4" class="flex items-center gap-2">
+              <code 
+                class="font-mono px-2 py-0.5 rounded"
+                :class="themeStore.isDark ? 'text-gray-300 bg-gray-800' : 'text-gray-700 bg-gray-100'"
+              >{{ instance.ipv4 }}</code>
+              <button 
+                class="text-gray-500 hover:text-gray-400" 
+                :title="t('common.copy')"
+                @click="emit('copy', instance.ipv4, 'ipv4')"
+              >
+                <svg v-if="copied !== 'ipv4'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>
+            </dd>
+            <dd v-else class="text-gray-500">-</dd>
+          </div>
+          <div v-if="instance.ipv6" class="flex justify-between items-center mt-3">
+            <dt class="text-gray-500">{{ t('instance.detail.network.publicIpv6') }}</dt>
+            <dd class="flex items-center gap-2">
+              <code 
+                class="font-mono text-xs px-2 py-0.5 rounded truncate max-w-[300px]"
+                :class="themeStore.isDark ? 'text-gray-400 bg-gray-800/50' : 'text-gray-600 bg-gray-100'"
+                :title="instance.ipv6"
+              >{{ instance.ipv6 }}</code>
+              <button 
+                class="text-gray-500 hover:text-gray-400 flex-shrink-0" 
+                :title="t('common.copy')"
+                @click="emit('copy', instance.ipv6, 'ipv6')"
+              >
+                <svg v-if="copied !== 'ipv6'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>
+            </dd>
+          </div>
+        </template>
+      </dl>
+    </div>
+
+    <!-- Port Mappings (NAT modes) -->
+    <div v-if="['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(instance.network_mode || '')" class="card p-5">
+      <div class="flex items-center justify-between gap-3 mb-4">
+        <div>
+          <div class="flex items-center gap-2">
+            <h2 
+              class="text-sm font-medium"
+              :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+            >
+              {{ t('instance.detail.network.portMappings') }}
+            </h2>
+            <span 
+              v-if="!isIpv6OnlyInstance && hasPortQuota && portLimit !== null" 
+              class="text-xs px-2 py-0.5 rounded border font-mono font-medium transition-colors"
+              :class="isPortQuotaFull 
+                ? (themeStore.isDark ? 'bg-red-900/30 text-red-500 border-red-800' : 'bg-red-50 text-red-600 border-red-200')
+                : (themeStore.isDark ? 'bg-gray-800 text-gray-400 border-gray-700' : 'bg-gray-100 text-gray-500 border-gray-200')"
+            >
+              {{ portQuotaUsed }} / {{ portLimit }}
+            </span>
+          </div>
+          <p 
+            v-if="publicIpv4Address" 
+            class="text-xs mt-0.5"
+            :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+          >
+            {{ t('instance.detail.network.publicIp') }}: {{ publicIpv4Address }}
+          </p>
+        </div>
+
+        <div v-if="!isIpv6OnlyInstance" class="flex items-center gap-2 sm:gap-3">
+          <div
+            class="rounded-xl border p-1.5"
+            :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/60' : 'border-gray-200 bg-gray-50/90'"
+          >
+            <div class="grid grid-cols-3 gap-1">
+              <button
+                v-for="option in (['both', 'tcp', 'udp'] as const)"
+                :key="option"
+                class="rounded-lg px-3 py-2 text-xs font-medium transition-colors"
+                :class="[
+                  protocolFilter === option
+                    ? (themeStore.isDark ? 'bg-gray-700 text-white shadow-sm' : 'bg-white text-gray-900 shadow-sm border border-gray-200')
+                    : (themeStore.isDark ? 'text-gray-400 hover:bg-gray-800 hover:text-gray-200' : 'text-gray-600 hover:bg-white hover:text-gray-900')
+                ]"
+                @click="protocolFilter = option"
+              >
+                {{ option === 'both' ? t('instance.detail.network.filterBoth') : option.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+
+          <button
+            v-if="canAddPorts && hasPortQuota && !isPortQuotaFull"
+            class="hidden shrink-0 rounded-xl border p-1.5 transition-colors sm:block"
+            :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/60 hover:border-gray-700' : 'border-gray-200 bg-gray-50/90 hover:border-gray-300'"
+            @click="emit('add-port')"
+          >
+            <div
+              class="flex h-[34px] items-center justify-center rounded-lg px-4"
+              :class="themeStore.isDark ? 'bg-gray-700 text-white shadow-sm' : 'bg-white text-gray-900 shadow-sm border border-gray-200'"
+            >
+              <svg 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="M12 4v16m8-8H4" />
+              </svg>
+              <span class="ml-2 text-xs font-medium">{{ t('instance.detail.network.add') }}</span>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <!-- 批量操作栏 -->
+      <div 
+        v-if="hasSelection && props.canManagePorts !== false" 
+        class="mb-3 flex flex-col gap-2 rounded-lg p-3 sm:flex-row sm:items-center sm:justify-between"
+        :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'"
+      >
+        <span class="text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+          {{ t('instance.detail.network.selectedCount', { count: selectedPorts.size }) }}
+        </span>
+        <button 
+          class="btn-sm flex items-center gap-1 text-red-500 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+          :disabled="props.deletePortsLoading"
+          @click="handleBatchDelete"
+        >
+          <svg v-if="props.deletePortsLoading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+          <span>{{ t('instance.detail.network.batchDelete') }}</span>
+        </button>
+      </div>
+
+      <div
+        v-if="isIpv6OnlyInstance"
+        class="rounded-2xl border border-dashed p-6 text-center"
+        :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/30 text-gray-500' : 'border-gray-300 bg-gray-50 text-gray-500'"
+      >
+        <div
+          class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl"
+          :class="themeStore.isDark ? 'bg-gray-800/80 text-gray-500' : 'bg-white text-gray-400 shadow-sm'"
+        >
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+        </div>
+        <p class="mx-auto max-w-md text-sm leading-6">
+          {{ t('instance.detail.network.ipv6OnlyPortMappingHint') }}
+        </p>
+      </div>
+      <div v-else-if="filteredPortMappings.length" class="space-y-2">
+        <!-- 全选行 -->
+        <div 
+          v-if="props.canManagePorts !== false && paginatedPorts.length > 0"
+          class="flex items-center justify-between gap-3 pb-2 border-b"
+          :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+        >
+          <div class="flex items-center gap-2">
+            <button
+              class="w-5 h-5 rounded border flex items-center justify-center transition-colors"
+              :class="[
+                isSelectAll || isPartialSelect
+                  ? (themeStore.isDark ? 'bg-blue-600 border-blue-600' : 'bg-blue-500 border-blue-500')
+                  : (themeStore.isDark ? 'border-gray-600 hover:border-gray-500' : 'border-gray-300 hover:border-gray-400')
+              ]"
+              @click="toggleSelectAll"
+            >
+              <svg v-if="isSelectAll" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+              </svg>
+              <svg v-else-if="isPartialSelect" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 12h14" />
+              </svg>
+            </button>
+            <span class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+              {{ t('instance.detail.network.selectAll') }}
+            </span>
+          </div>
+
+          <button
+            v-if="canAddPorts && hasPortQuota && !isPortQuotaFull"
+            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border transition-colors shadow-sm sm:hidden"
+            :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/70 text-gray-100 hover:border-gray-600' : 'border-gray-200 bg-white text-gray-900 hover:border-gray-300'"
+            :title="t('instance.detail.network.add')"
+            @click="emit('add-port')"
+          >
+            <svg 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="M12 4v16m8-8H4" />
+            </svg>
+          </button>
+        </div>
+
+        <div 
+          v-for="m in paginatedPorts" 
+          :key="m.id" 
+          class="group flex items-center justify-between text-sm p-3 border rounded-lg transition-colors"
+          :class="[
+            themeStore.isDark 
+              ? 'bg-gray-900/50 border-gray-800 hover:border-gray-700' 
+              : 'bg-gray-50 border-gray-200 hover:border-gray-300',
+            selectedPorts.has(m.id) && (themeStore.isDark ? 'border-blue-800 bg-blue-900/20' : 'border-blue-300 bg-blue-50')
+          ]"
+        >
+          <div class="flex items-center gap-3 flex-1 min-w-0">
+            <!-- 多选框 -->
+            <button
+              v-if="props.canManagePorts !== false"
+              class="w-5 h-5 rounded border flex items-center justify-center transition-colors flex-shrink-0"
+              :class="[
+                selectedPorts.has(m.id)
+                  ? (themeStore.isDark ? 'bg-blue-600 border-blue-600' : 'bg-blue-500 border-blue-500')
+                  : (themeStore.isDark ? 'border-gray-600 hover:border-gray-500' : 'border-gray-300 hover:border-gray-400')
+              ]"
+              @click="toggleSelect(m.id)"
+            >
+              <svg v-if="selectedPorts.has(m.id)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+              </svg>
+            </button>
+            <span 
+              class="text-xs font-medium px-1.5 py-0.5 rounded flex-shrink-0"
+              :class="themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-200 text-gray-600'"
+            >{{ m.protocol.toUpperCase() }}</span>
+            <div class="flex items-center gap-2 min-w-0">
+              <code 
+                class="font-mono text-xs"
+                :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+              >{{ getPublicPort(m) }}</code>
+              <button 
+                class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                :class="themeStore.isDark ? 'text-gray-600 hover:text-gray-400' : 'text-gray-400 hover:text-gray-600'"
+                :title="t('common.copy')"
+                @click="emit('copy', String(getPublicPort(m)), 'port-' + m.id)"
+              >
+                <svg v-if="copied !== 'port-' + m.id" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <svg v-else class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+              </button>
+              <span class="text-gray-500 flex-shrink-0">→</span>
+              <span class="font-mono text-xs text-gray-500">{{ getPrivatePort(m) }}</span>
+              <span 
+                v-if="m.remark" 
+                class="text-xs px-1.5 py-0.5 rounded truncate max-w-[120px]"
+                :class="themeStore.isDark ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-600'"
+                :title="m.remark"
+              >{{ m.remark }}</span>
+            </div>
+          </div>
+          <button 
+            v-if="props.canManagePorts !== false"
+            class="text-xs text-gray-500 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 ml-2 flex-shrink-0" 
+            @click="emit('delete-port', m.id)"
+          >
+            <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Pagination -->
+        <div class="flex flex-col gap-3 pt-3 border-t sm:flex-row sm:items-center sm:justify-between" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <div class="flex items-center gap-2">
+            <span class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ t('instance.detail.network.perPage') }}</span>
+            <select 
+              v-model.number="portPageSize"
+              class="text-xs px-2 py-1 rounded border"
+              :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-300' : 'bg-white border-gray-200 text-gray-700'"
+            >
+              <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}</option>
+            </select>
+          </div>
+          <div class="flex items-center justify-between gap-2 sm:justify-start">
+            <button 
+              :disabled="portPage === 1"
+              class="btn-ghost btn-sm"
+              @click="portPage = Math.max(1, portPage - 1)"
+            >
+              {{ t('instance.detail.network.prevPage') }}
+            </button>
+            <span class="text-sm text-gray-500">{{ portPage }} / {{ portTotalPages }}</span>
+            <button 
+              :disabled="portPage === portTotalPages"
+              class="btn-ghost btn-sm"
+              @click="portPage = Math.min(portTotalPages, portPage + 1)"
+            >
+              {{ t('instance.detail.network.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="rounded-2xl border border-dashed p-6 text-center"
+        :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/30 text-gray-500' : 'border-gray-300 bg-gray-50 text-gray-500'"
+      >
+        <div
+          class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl"
+          :class="themeStore.isDark ? 'bg-gray-800/80 text-gray-500' : 'bg-white text-gray-400 shadow-sm'"
+        >
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+        </div>
+
+        <template v-if="!hasPortQuota">
+          <p class="mb-1 text-sm font-medium text-yellow-500">{{ t('instance.detail.network.noPortQuota') }}</p>
+          <p class="text-xs leading-6">{{ t('instance.detail.network.allocateQuotaHint') }}</p>
+        </template>
+        <template v-else-if="portMappings.length > 0 && filteredPortMappings.length === 0">
+          <p class="text-sm font-medium">{{ t('instance.detail.network.noFilterResults') }}</p>
+        </template>
+        <template v-else>
+          <p class="text-sm font-medium">{{ t('instance.detail.network.noPortMappings') }}</p>
+          <p class="mt-1 text-xs leading-6">{{ t('instance.detail.network.addPortMapping') }}</p>
+          <button
+            v-if="canAddPorts && hasPortQuota && !isPortQuotaFull"
+            class="btn btn-secondary btn-sm mt-4"
+            @click="emit('add-port')"
+          >
+            <svg 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="M12 4v16m8-8H4" />
+            </svg>
+            {{ t('instance.detail.network.add') }}
+          </button>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
diff --git a/client/src/components/instance/InstanceOrderMenu.vue b/client/src/components/instance/InstanceOrderMenu.vue
new file mode 100644
index 0000000..402aa79
--- /dev/null
+++ b/client/src/components/instance/InstanceOrderMenu.vue
@@ -0,0 +1,409 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type InstanceOrderAction = 'top' | 'up' | 'down' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  actions: InstanceOrderAction[]
+  labels: Record<InstanceOrderAction, string>
+  label: string
+  disabledActions?: Partial<Record<InstanceOrderAction, boolean>>
+  loading?: boolean
+  dark?: boolean
+  align?: 'left' | 'right'
+}>(), {
+  disabledActions: () => ({}),
+  loading: false,
+  dark: false,
+  align: 'right'
+})
+
+const emit = defineEmits<{
+  reorder: [action: InstanceOrderAction]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const isHovering = ref(false)
+const supportsHover = ref(false)
+
+const hasEnabledAction = computed(() => props.actions.some(action => !props.disabledActions[action]))
+const isExpanded = computed(() => isOpen.value || (supportsHover.value && isHovering.value && hasEnabledAction.value && !props.loading))
+
+let hoverMediaQuery: MediaQueryList | null = null
+
+function getIconPath(action: InstanceOrderAction): string {
+  if (action === 'top') return 'M5 4h14M17 15l-5-5-5 5'
+  if (action === 'up') return 'M6 15l6-6 6 6'
+  if (action === 'down') return 'M6 9l6 6 6-6'
+  return 'M5 20h14M17 9l-5 5-5-5'
+}
+
+function toggleOpen(): void {
+  if (props.loading || !hasEnabledAction.value) return
+  if (isOpen.value) {
+    close()
+    blurActiveElement()
+    return
+  }
+  isOpen.value = true
+}
+
+function close(): void {
+  isOpen.value = false
+}
+
+function handlePointerEnter(): void {
+  isHovering.value = true
+}
+
+function handlePointerLeave(): void {
+  isHovering.value = false
+}
+
+function blurActiveElement(): void {
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur()
+  }
+}
+
+function handleAction(action: InstanceOrderAction): void {
+  if (props.loading || props.disabledActions[action]) return
+  emit('reorder', action)
+  close()
+  blurActiveElement()
+}
+
+function handleOutsidePointerDown(event: PointerEvent): void {
+  if (!rootRef.value || rootRef.value.contains(event.target as Node)) return
+  if (isOpen.value || rootRef.value.contains(document.activeElement)) {
+    close()
+    blurActiveElement()
+  }
+}
+
+function handleEscape(): void {
+  close()
+  blurActiveElement()
+}
+
+function handleFocusOut(event: FocusEvent): void {
+  const nextTarget = event.relatedTarget as Node | null
+  if (!rootRef.value || (nextTarget && rootRef.value.contains(nextTarget))) return
+  close()
+}
+
+function handleHoverMediaChange(event: MediaQueryListEvent): void {
+  supportsHover.value = event.matches
+}
+
+function addHoverMediaListener(query: MediaQueryList): void {
+  if (typeof query.addEventListener === 'function') {
+    query.addEventListener('change', handleHoverMediaChange)
+    return
+  }
+  query.addListener(handleHoverMediaChange)
+}
+
+function removeHoverMediaListener(query: MediaQueryList): void {
+  if (typeof query.removeEventListener === 'function') {
+    query.removeEventListener('change', handleHoverMediaChange)
+    return
+  }
+  query.removeListener(handleHoverMediaChange)
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleOutsidePointerDown, true)
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    hoverMediaQuery = window.matchMedia('(hover: hover) and (pointer: fine)')
+    supportsHover.value = hoverMediaQuery.matches
+    addHoverMediaListener(hoverMediaQuery)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleOutsidePointerDown, true)
+  if (hoverMediaQuery) {
+    removeHoverMediaListener(hoverMediaQuery)
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="instance-order-menu"
+    :class="[
+      dark ? 'is-dark' : '',
+      isOpen ? 'is-open' : '',
+      hasEnabledAction ? 'has-enabled' : '',
+      align === 'left' ? 'align-left' : 'align-right'
+    ]"
+    @keydown.esc.stop="handleEscape"
+    @focusout="handleFocusOut"
+    @pointerenter="handlePointerEnter"
+    @pointerleave="handlePointerLeave"
+  >
+    <button
+      type="button"
+      class="instance-order-trigger"
+      :disabled="loading || !hasEnabledAction"
+      :title="label"
+      :aria-label="label"
+      aria-haspopup="menu"
+      :aria-expanded="isExpanded"
+      @click.stop="toggleOpen"
+    >
+      <svg
+        v-if="loading"
+        class="h-3.5 w-3.5 animate-spin"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+      </svg>
+      <svg
+        v-else
+        class="h-3.5 w-3.5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9" d="M8 6h8M8 12h8M8 18h8" />
+      </svg>
+    </button>
+
+    <div class="instance-order-panel" role="menu" :aria-hidden="!isExpanded" @click.stop>
+      <button
+        v-for="action in actions"
+        :key="action"
+        type="button"
+        class="instance-order-action"
+        role="menuitem"
+        :disabled="loading || disabledActions[action]"
+        :tabindex="isExpanded ? 0 : -1"
+        :title="labels[action]"
+        :aria-label="labels[action]"
+        @click.stop="handleAction(action)"
+      >
+        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" :d="getIconPath(action)" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.instance-order-menu {
+  position: relative;
+  z-index: 20;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  --order-menu-gap: 0.625rem;
+}
+
+.instance-order-menu.is-open::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: var(--order-menu-gap);
+  height: 2rem;
+  transform: translateY(-50%);
+}
+
+.instance-order-menu.align-right::before {
+  right: 100%;
+}
+
+.instance-order-menu.align-left::before {
+  left: 100%;
+}
+
+.instance-order-trigger,
+.instance-order-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(229 231 235);
+  background: rgb(249 250 251 / 0.9);
+  color: rgb(75 85 99);
+  transition:
+    color 190ms ease,
+    background-color 190ms ease,
+    border-color 190ms ease,
+    box-shadow 240ms ease,
+    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.instance-order-trigger {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 0.625rem;
+}
+
+.instance-order-action {
+  height: 1.75rem;
+  width: 1.75rem;
+  border-radius: 0.5rem;
+  background: transparent;
+  border-color: transparent;
+}
+
+.instance-order-trigger:hover,
+.instance-order-trigger:focus-visible,
+.instance-order-action:hover,
+.instance-order-action:focus-visible {
+  border-color: rgb(209 213 219);
+  background: rgb(255 255 255);
+  color: rgb(17 24 39);
+  box-shadow: 0 6px 18px rgb(15 23 42 / 0.08);
+  outline: none;
+}
+
+.instance-order-trigger:active,
+.instance-order-action:active {
+  transform: scale(0.96);
+}
+
+.instance-order-trigger:disabled,
+.instance-order-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.36;
+  box-shadow: none;
+}
+
+.instance-order-panel {
+  position: absolute;
+  top: 50%;
+  z-index: 30;
+  display: flex;
+  width: 0;
+  height: 2rem;
+  align-items: center;
+  gap: 0.25rem;
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: rgb(255 255 255 / 0.96);
+  box-shadow: 0 10px 26px rgb(15 23 42 / 0.1);
+  opacity: 0;
+  padding: 0.125rem 0;
+  pointer-events: none;
+  transform: translateY(-50%) scale(0.98);
+  transition:
+    width 320ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 240ms ease,
+    padding 320ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.align-right .instance-order-panel {
+  right: calc(100% + var(--order-menu-gap));
+  transform-origin: right center;
+}
+
+.align-left .instance-order-panel {
+  left: calc(100% + var(--order-menu-gap));
+  transform-origin: left center;
+}
+
+.instance-order-menu.is-open .instance-order-panel {
+  width: 8rem;
+  opacity: 1;
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+  pointer-events: auto;
+  transform: translateY(-50%) scale(1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .instance-order-menu.has-enabled:hover::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: var(--order-menu-gap);
+    height: 2rem;
+    transform: translateY(-50%);
+  }
+
+  .instance-order-menu.has-enabled:hover .instance-order-panel {
+    width: 8rem;
+    opacity: 1;
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+    pointer-events: auto;
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+@media (max-width: 639px) {
+  .instance-order-menu.is-open::before {
+    display: none;
+  }
+
+  .instance-order-panel {
+    top: auto;
+    bottom: calc(100% + 0.375rem);
+    flex-direction: column;
+    width: 2rem;
+    height: 0;
+    padding: 0;
+    transform: translateX(-50%) translateY(0.25rem) scale(0.98);
+  }
+
+  .align-right .instance-order-panel,
+  .align-left .instance-order-panel {
+    right: auto;
+    left: 50%;
+    transform-origin: center bottom;
+  }
+
+  .instance-order-menu.is-open .instance-order-panel {
+    width: 2rem;
+    height: 8rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .instance-order-trigger,
+  .instance-order-action,
+  .instance-order-panel {
+    transition-duration: 1ms;
+  }
+}
+
+.instance-order-menu.is-dark .instance-order-trigger,
+.instance-order-menu.is-dark .instance-order-action {
+  border-color: rgb(31 41 55);
+  background: rgb(17 24 39 / 0.86);
+  color: rgb(209 213 219);
+}
+
+.instance-order-menu.is-dark .instance-order-action {
+  background: transparent;
+  border-color: transparent;
+}
+
+.instance-order-menu.is-dark .instance-order-panel {
+  border-color: rgb(31 41 55);
+  background: rgb(17 24 39 / 0.96);
+  box-shadow: 0 12px 30px rgb(0 0 0 / 0.28);
+}
+
+.instance-order-menu.is-dark .instance-order-trigger:hover,
+.instance-order-menu.is-dark .instance-order-trigger:focus-visible,
+.instance-order-menu.is-dark .instance-order-action:hover,
+.instance-order-menu.is-dark .instance-order-action:focus-visible {
+  border-color: rgb(55 65 81);
+  background: rgb(31 41 55);
+  color: rgb(243 244 246);
+}
+</style>
diff --git a/client/src/components/instance/InstanceQuotaTab.vue b/client/src/components/instance/InstanceQuotaTab.vue
new file mode 100644
index 0000000..7d8b365
--- /dev/null
+++ b/client/src/components/instance/InstanceQuotaTab.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import type { Instance, Snapshot } from '@/types/api'
+
+const { t } = useI18n()
+
+interface RemainingQuota {
+  port: number
+  snapshot: number
+}
+
+interface Props {
+  instance: Instance
+  portMappingsCount: number
+  snapshots: Snapshot[]
+  quotaForm: {
+    portLimit: number | null
+    snapshotLimit: number | null
+  }
+  quotaSaving: boolean
+  quotaError: string
+  remainingQuota: RemainingQuota // 用户账户剩余额度
+}
+
+interface Emits {
+  (e: 'update:quota-form', form: { portLimit: number | null; snapshotLimit: number | null }): void
+  (e: 'save'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+const localForm = ref({ ...props.quotaForm })
+
+// 监听表单变化，同步到父组件
+watch(localForm, (newVal) => {
+  emit('update:quota-form', { ...newVal })
+}, { deep: true })
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="card p-5">
+      <h2 
+        class="text-sm font-medium mb-4"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ t('instance.detail.quotaTab.title') }}
+      </h2>
+      
+      <div class="space-y-4">
+        <!-- NAT 端口配额 -->
+        <div>
+          <label class="block text-sm mb-2" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+            {{ t('instance.detail.quotaTab.portLimit') }}
+          </label>
+          <div class="flex items-center gap-2">
+            <input 
+              v-model.number="localForm.portLimit" 
+              type="number"
+              class="input flex-1" 
+              :min="Math.max(1, portMappingsCount)" 
+              :max="1000"
+              :placeholder="t('instance.detail.quotaTab.placeholder')"
+            />
+          </div>
+          <div class="mt-2 text-xs" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+            <div>{{ t('instance.detail.quotaTab.currentUsage') }}: {{ portMappingsCount }} {{ t('instance.detail.quotaTab.portMappings') }}</div>
+            <div v-if="instance.port_limit !== null && instance.port_limit !== undefined">
+              {{ t('instance.detail.quotaTab.quotaLimit') }}: {{ instance.port_limit }} {{ t('instance.detail.quotaTab.unit') }}
+              <span :class="portMappingsCount >= instance.port_limit ? 'text-red-500' : 'text-green-500'">
+                ({{ portMappingsCount >= instance.port_limit ? t('instance.detail.quotaTab.full') : `${t('instance.detail.quotaTab.remaining')} ${instance.port_limit - portMappingsCount}` }})
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 快照配额 -->
+        <div>
+          <label class="block text-sm mb-2" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+            {{ t('instance.detail.quotaTab.snapshotLimit') }}
+          </label>
+          <div class="flex items-center gap-2">
+            <input 
+              v-model.number="localForm.snapshotLimit" 
+              type="number"
+              class="input flex-1" 
+              :min="Math.max(1, snapshots.length)" 
+              :max="1000"
+              :placeholder="t('instance.detail.quotaTab.placeholder')"
+            />
+          </div>
+          <div class="mt-2 text-xs" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+            <div>{{ t('instance.detail.quotaTab.currentUsage') }}: {{ snapshots.length }} {{ t('instance.detail.quotaTab.snapshots') }}</div>
+            <div v-if="instance.snapshot_limit !== null && instance.snapshot_limit !== undefined">
+              {{ t('instance.detail.quotaTab.quotaLimit') }}: {{ instance.snapshot_limit }} {{ t('instance.detail.quotaTab.unit') }}
+              <span :class="snapshots.length >= instance.snapshot_limit ? 'text-red-500' : 'text-green-500'">
+                ({{ snapshots.length >= instance.snapshot_limit ? t('instance.detail.quotaTab.full') : `${t('instance.detail.quotaTab.remaining')} ${instance.snapshot_limit - snapshots.length}` }})
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 统一保存按钮 -->
+      <div class="mt-6 flex justify-end">
+        <button 
+          :disabled="quotaSaving" 
+          class="btn-primary"
+          @click="emit('save')"
+        >
+          {{ quotaSaving ? t('instance.detail.quotaTab.saving') : t('instance.detail.quotaTab.save') }}
+        </button>
+      </div>
+
+      <div v-if="quotaError" class="mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-sm text-red-500">
+        {{ quotaError }}
+      </div>
+    </div>
+  </div>
+</template>
+
diff --git a/client/src/components/instance/InstanceSitesTab.vue b/client/src/components/instance/InstanceSitesTab.vue
new file mode 100644
index 0000000..5a5dae5
--- /dev/null
+++ b/client/src/components/instance/InstanceSitesTab.vue
@@ -0,0 +1,989 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import api from '@/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+interface ProxySite {
+  id: number
+  domain: string
+  targetPort: number
+  httpsEnabled: boolean
+  remark: string | null
+  status: 'pending' | 'active' | 'error'
+  enabled: boolean
+  error: string | null
+  createdAt: string
+}
+
+interface Props {
+  instanceId: number
+}
+
+const props = defineProps<Props>()
+
+const loading = ref(true)
+const adding = ref(false)
+const editing = ref(false)
+const deleting = ref<number | null>(null)
+const refreshing = ref<number | null>(null)
+const toggling = ref<number | null>(null)
+const checkingCert = ref<number | null>(null)
+const checkingDns = ref<number | null>(null)
+
+const sites = ref<ProxySite[]>([])
+const caddyEnabled = ref(false)
+const dnsRecordType = ref<string | null>(null)
+const dnsRecordValue = ref<string | null>(null)
+const siteQuota = ref<{ used: number; limit: number } | null>(null)
+const canManageSites = ref(true)
+
+// 添加表单
+const showAddModal = ref(false)
+const form = ref({
+  domain: '',
+  targetPort: 80,
+  httpsEnabled: true,
+  remark: ''
+})
+
+// 编辑表单
+const showEditModal = ref(false)
+const editForm = ref({
+  id: 0,
+  domain: '',
+  targetPort: 80,
+  httpsEnabled: true,
+  remark: ''
+})
+
+// DNS 提示弹窗
+const showDnsHint = ref(false)
+const dnsHint = ref({
+  type: 'A',
+  host: '',
+  value: ''
+})
+
+// 证书状态弹窗
+const showCertModal = ref(false)
+const certStatus = ref<{
+  domain: string
+  httpsEnabled: boolean
+  status: string
+  message?: string
+  error?: string
+  hint?: string
+  certificate?: {
+    valid: boolean
+    issuer: string
+    subject: string
+    validFrom: string
+    validTo: string
+    daysRemaining: number
+  }
+} | null>(null)
+
+onMounted(() => {
+  loadSites()
+})
+
+async function loadSites() {
+  loading.value = true
+  try {
+    const res = await api.instances.getSites(props.instanceId)
+    sites.value = res.sites || []
+    caddyEnabled.value = res.caddyEnabled || false
+    dnsRecordType.value = res.dnsRecordType
+    dnsRecordValue.value = res.dnsRecordValue
+    siteQuota.value = res.siteQuota || null
+    canManageSites.value = res.canManageSites ?? true
+  } catch (err: unknown) {
+    const error = err as { message?: string }
+    toast.error(t('instance.sites.loadFailed') + ': ' + (error?.message || String(err)))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openAddModal() {
+  form.value = { domain: '', targetPort: 80, httpsEnabled: true, remark: '' }
+  showAddModal.value = true
+}
+
+async function addSite() {
+  if (!form.value.domain) {
+    toast.error(t('instance.sites.domainRequired'))
+    return
+  }
+
+  // 验证域名格式（不允许泛域名）
+  if (form.value.domain.startsWith('*')) {
+    toast.error(t('instance.sites.wildcardNotAllowed'))
+    return
+  }
+
+  adding.value = true
+  try {
+    const res = await api.instances.addSite(props.instanceId, {
+      domain: form.value.domain.toLowerCase().trim(),
+      targetPort: form.value.targetPort,
+      httpsEnabled: form.value.httpsEnabled,
+      remark: form.value.remark.trim() || undefined
+    })
+    
+    showAddModal.value = false
+    await loadSites()
+    
+    // 显示 DNS 解析提示
+    if (res.dnsHint) {
+      dnsHint.value = res.dnsHint
+      showDnsHint.value = true
+    }
+    
+    toast.success(t('instance.sites.addSuccess'))
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.addFailed'))
+  } finally {
+    adding.value = false
+  }
+}
+
+async function deleteSite(siteId: number, domain: string) {
+  if (!confirm(t('instance.sites.deleteConfirm', { domain }))) {
+    return
+  }
+
+  deleting.value = siteId
+  try {
+    await api.instances.deleteSite(props.instanceId, siteId)
+    toast.success(t('instance.sites.deleteSuccess'))
+    await loadSites()
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.deleteFailed'))
+  } finally {
+    deleting.value = null
+  }
+}
+
+async function refreshSite(siteId: number) {
+  refreshing.value = siteId
+  try {
+    await api.instances.refreshSite(props.instanceId, siteId)
+    toast.success(t('instance.sites.refreshSuccess'))
+    await loadSites()
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.refreshFailed'))
+  } finally {
+    refreshing.value = null
+  }
+}
+
+async function toggleSite(siteId: number) {
+  toggling.value = siteId
+  try {
+    const res = await api.instances.toggleSite(props.instanceId, siteId)
+    toast.success(res.message)
+    await loadSites()
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.toggleFailed'))
+  } finally {
+    toggling.value = null
+  }
+}
+
+function openEditModal(site: ProxySite) {
+  editForm.value = {
+    id: site.id,
+    domain: site.domain,
+    targetPort: site.targetPort,
+    httpsEnabled: site.httpsEnabled,
+    remark: site.remark || ''
+  }
+  showEditModal.value = true
+}
+
+async function updateSite() {
+  editing.value = true
+  try {
+    const res = await api.instances.updateSite(props.instanceId, editForm.value.id, {
+      targetPort: editForm.value.targetPort,
+      httpsEnabled: editForm.value.httpsEnabled,
+      remark: editForm.value.remark.trim() || undefined
+    })
+    showEditModal.value = false
+    toast.success(res.message)
+    await loadSites()
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.updateFailed'))
+  } finally {
+    editing.value = false
+  }
+}
+
+async function checkCertificate(site: ProxySite) {
+  checkingCert.value = site.id
+  try {
+    const res = await api.instances.getCertificateStatus(props.instanceId, site.id)
+    certStatus.value = {
+      domain: site.domain,
+      ...res
+    }
+    showCertModal.value = true
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.certCheckFailed'))
+  } finally {
+    checkingCert.value = null
+  }
+}
+
+async function checkDns(siteId: number) {
+  checkingDns.value = siteId
+  try {
+    const res = await api.instances.checkDns(props.instanceId, siteId)
+    if (res.activated) {
+      toast.success(t('instance.sites.dnsActivated'))
+    } else if (res.dnsResolved && res.ipMatches) {
+      toast.success(res.message || t('instance.sites.dnsResolved'))
+    } else {
+      toast.error(res.error || t('instance.sites.dnsCheckFailed'))
+    }
+    await loadSites()
+  } catch (err: unknown) {
+    const error = err as { response?: { data?: { error?: string } }, message?: string }
+    toast.error(error?.response?.data?.error || error?.message || t('instance.sites.dnsCheckFailed'))
+  } finally {
+    checkingDns.value = null
+  }
+}
+
+function getCertStatusColor(status: string) {
+  switch (status) {
+    case 'valid':
+      return 'text-green-600 dark:text-green-400'
+    case 'disabled':
+      return 'text-gray-500 dark:text-gray-400'
+    case 'pending':
+    case 'cert_pending':
+      return 'text-yellow-600 dark:text-yellow-400'
+    case 'dns_error':
+    case 'connection_refused':
+    case 'timeout':
+    case 'error':
+      return 'text-red-600 dark:text-red-400'
+    default:
+      return 'text-yellow-600 dark:text-yellow-400'
+  }
+}
+
+function getCertStatusText(status: string) {
+  switch (status) {
+    case 'valid':
+      return t('instance.sites.cert.valid')
+    case 'disabled':
+      return t('instance.sites.cert.disabled')
+    case 'pending':
+      return t('instance.sites.cert.pending')
+    case 'cert_pending':
+      return t('instance.sites.cert.certPending')
+    case 'dns_error':
+      return t('instance.sites.cert.dnsError')
+    case 'connection_refused':
+      return t('instance.sites.cert.connectionRefused')
+    case 'timeout':
+      return t('instance.sites.cert.timeout')
+    case 'error':
+      return t('instance.sites.cert.error')
+    default:
+      return status
+  }
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString()
+}
+
+function getStatusColor(status: string) {
+  switch (status) {
+    case 'active':
+      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+    case 'pending':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+    case 'error':
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+    default:
+      return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
+  }
+}
+
+function getStatusText(status: string) {
+  switch (status) {
+    case 'active':
+      return t('instance.sites.statusActive')
+    case 'pending':
+      return t('instance.sites.statusPending')
+    case 'error':
+      return t('instance.sites.statusError')
+    default:
+      return status
+  }
+}
+
+const hasSites = computed(() => sites.value.length > 0)
+
+// 配额是否已满（limit = 0 表示没有配额，不允许创建）
+const isQuotaFull = computed(() => {
+  if (!siteQuota.value) return false
+  // limit = 0 表示没有配额，视为已满
+  if (siteQuota.value.limit === 0) return true
+  return siteQuota.value.used >= siteQuota.value.limit
+})
+
+// 配额显示文本
+const quotaLimitDisplay = computed(() => {
+  if (!siteQuota.value) return ''
+  // 0 就是 0，不是无限制
+  return String(siteQuota.value.limit)
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+    </div>
+
+    <!-- Caddy 未启用提示 -->
+    <div 
+      v-else-if="!caddyEnabled" 
+      class="card p-6 text-center"
+    >
+      <svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
+      <p class="text-lg font-medium mb-2" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+        {{ t('instance.sites.caddyNotEnabled') }}
+      </p>
+      <p class="text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+        {{ t('instance.sites.caddyNotEnabledHint') }}
+      </p>
+    </div>
+
+    <!-- 站点管理 -->
+    <div v-else class="space-y-4">
+      <!-- 头部 -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div>
+          <h3 class="text-lg font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+            {{ t('instance.sites.title') }}
+          </h3>
+          <p v-if="siteQuota" class="text-sm mt-1" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+            {{ t('instance.sites.quotaInfo', { used: siteQuota.used, limit: quotaLimitDisplay }) }}
+            <span v-if="isQuotaFull" class="text-red-500 ml-1">
+              ({{ t('instance.sites.quotaFull') }})
+            </span>
+          </p>
+        </div>
+        <button 
+          v-if="canManageSites"
+          class="btn-primary w-full sm:w-auto" 
+          :disabled="isQuotaFull"
+          @click="openAddModal"
+        >
+          <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('instance.sites.addSite') }}
+        </button>
+      </div>
+
+      <!-- 站点列表 -->
+      <div v-if="hasSites" class="space-y-3">
+        <div 
+          v-for="site in sites" 
+          :key="site.id"
+          class="card p-4"
+        >
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-3 flex-wrap">
+                <a 
+                  :href="`${site.httpsEnabled ? 'https' : 'http'}://${site.domain}`" 
+                  target="_blank"
+                  class="font-mono text-sm font-medium hover:text-blue-500 transition-colors break-all"
+                  :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                >
+                  {{ site.domain }}
+                </a>
+                <!-- HTTPS 标记 + 证书检查 -->
+                <button 
+                  v-if="site.httpsEnabled" 
+                  class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 whitespace-nowrap hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors"
+                  :title="t('instance.sites.checkCert')"
+                  :disabled="checkingCert === site.id"
+                  @click="checkCertificate(site)"
+                >
+                  <svg v-if="checkingCert !== site.id" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                  </svg>
+                  <svg v-else class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  HTTPS
+                </button>
+                <span 
+                  v-else 
+                  class="px-1.5 py-0.5 text-xs rounded bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 whitespace-nowrap"
+                  :title="t('instance.sites.httpOnly')"
+                >
+                  HTTP
+                </span>
+                <span :class="['px-2 py-0.5 text-xs rounded-full whitespace-nowrap', getStatusColor(site.status)]">
+                  {{ getStatusText(site.status) }}
+                </span>
+                <span 
+                  v-if="!site.enabled" 
+                  class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 whitespace-nowrap"
+                >
+                  {{ t('instance.sites.disabled') }}
+                </span>
+              </div>
+              <div class="flex items-center gap-4 mt-1 text-sm flex-wrap" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+                <span class="font-mono">→ :{{ site.targetPort }}</span>
+                <span v-if="site.remark" class="truncate max-w-xs" :title="site.remark">
+                  {{ site.remark }}
+                </span>
+                <span v-if="site.error" class="text-red-500 break-all">{{ site.error }}</span>
+              </div>
+            </div>
+
+            <div v-if="canManageSites" class="flex items-center gap-2 self-end sm:self-auto">
+              <!-- 启用/禁用切换 -->
+              <button
+                :disabled="toggling === site.id"
+                class="p-2 rounded transition-colors"
+                :class="site.enabled 
+                  ? 'text-green-500 hover:bg-green-50 dark:hover:bg-green-900/20' 
+                  : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'"
+                :title="site.enabled ? t('instance.sites.disableSite') : t('instance.sites.enableSite')"
+                @click="toggleSite(site.id)"
+              >
+                <svg 
+                  v-if="toggling !== site.id" 
+                  class="w-4 h-4" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path v-if="site.enabled" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                </svg>
+                <svg v-else class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              </button>
+
+              <!-- 编辑按钮 -->
+              <button
+                v-if="site.enabled"
+                class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+                :title="t('common.edit')"
+                @click="openEditModal(site)"
+              >
+                <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </button>
+
+              <!-- 刷新按钮（仅错误状态显示） -->
+              <button
+                v-if="site.status === 'error'"
+                :disabled="refreshing === site.id"
+                class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                :title="t('instance.sites.refresh')"
+                @click="refreshSite(site.id)"
+              >
+                <svg 
+                  class="w-4 h-4" 
+                  :class="[refreshing === site.id ? 'animate-spin' : '', themeStore.isDark ? 'text-gray-400' : 'text-gray-600']"
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </button>
+
+              <!-- 检测 DNS 按钮（仅 pending 状态显示） -->
+              <button
+                v-if="site.status === 'pending'"
+                :disabled="checkingDns === site.id"
+                class="p-2 rounded text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
+                :title="t('instance.sites.checkDns')"
+                @click="checkDns(site.id)"
+              >
+                <svg 
+                  v-if="checkingDns !== site.id"
+                  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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                </svg>
+                <svg v-else class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              </button>
+
+              <!-- 删除按钮 -->
+              <button
+                :disabled="deleting === site.id"
+                class="p-2 rounded text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                :title="t('common.delete')"
+                @click="deleteSite(site.id, site.domain)"
+              >
+                <svg 
+                  v-if="deleting !== site.id" 
+                  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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                <svg v-else class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div 
+        v-else
+        class="border-2 border-dashed rounded-lg p-8 text-center"
+        :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-300'"
+      >
+        <svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+        </svg>
+        <p class="text-sm mb-4" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+          {{ t('instance.sites.empty') }}
+        </p>
+        <button 
+          v-if="canManageSites"
+          class="btn-primary" 
+          :disabled="isQuotaFull"
+          @click="openAddModal"
+        >
+          {{ t('instance.sites.addFirstSite') }}
+        </button>
+      </div>
+
+      <!-- 添加站点模态框 -->
+      <Teleport to="body">
+        <div 
+          v-if="showAddModal" 
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
+          @click.self="showAddModal = false"
+        >
+          <div 
+            class="w-full max-w-md rounded-lg shadow-xl"
+            :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+          >
+            <div class="p-6">
+              <h3 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                {{ t('instance.sites.addSite') }}
+              </h3>
+
+              <div class="space-y-4">
+                <!-- 域名 -->
+                <div>
+                  <label class="block text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('instance.sites.domain') }}
+                  </label>
+                  <input
+                    v-model="form.domain"
+                    type="text"
+                    placeholder="example.com"
+                    class="input w-full"
+                  />
+                  <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.sites.domainHint') }}
+                  </p>
+                </div>
+
+                <!-- 端口 -->
+                <div>
+                  <label class="block text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('instance.sites.targetPort') }}
+                  </label>
+                  <input
+                    v-model.number="form.targetPort"
+                    type="number"
+                    min="1"
+                    max="65535"
+                    class="input w-full"
+                  />
+                  <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.sites.portHint') }}
+                  </p>
+                </div>
+
+                <!-- HTTPS 开关 -->
+                <div>
+                  <label class="flex items-center justify-between cursor-pointer">
+                    <div>
+                      <span class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                        {{ t('instance.sites.enableHttps') }}
+                      </span>
+                      <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                        {{ t('instance.sites.httpsHint') }}
+                      </p>
+                    </div>
+                    <div class="relative">
+                      <input 
+                        v-model="form.httpsEnabled" 
+                        type="checkbox" 
+                        class="sr-only peer"
+                      />
+                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </div>
+                  </label>
+                </div>
+
+                <!-- 备注 -->
+                <div>
+                  <label class="block text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('instance.sites.remark') }}
+                  </label>
+                  <input
+                    v-model="form.remark"
+                    type="text"
+                    maxlength="100"
+                    :placeholder="t('instance.sites.remarkPlaceholder')"
+                    class="input w-full"
+                  />
+                </div>
+              </div>
+
+              <div class="flex justify-end gap-3 mt-6">
+                <button class="btn-ghost" @click="showAddModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button :disabled="adding" class="btn-primary" @click="addSite">
+                  <span v-if="adding" class="flex items-center gap-2">
+                    <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    {{ t('common.loading') }}
+                  </span>
+                  <span v-else>{{ t('common.confirm') }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- 编辑站点模态框 -->
+      <Teleport to="body">
+        <div 
+          v-if="showEditModal" 
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
+          @click.self="showEditModal = false"
+        >
+          <div 
+            class="w-full max-w-md rounded-lg shadow-xl"
+            :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+          >
+            <div class="p-6">
+              <h3 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                {{ t('instance.sites.editSite') }}
+              </h3>
+
+              <div class="space-y-4">
+                <!-- 域名（只读） -->
+                <div>
+                  <label class="block text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('instance.sites.domain') }}
+                  </label>
+                  <input
+                    :value="editForm.domain"
+                    type="text"
+                    disabled
+                    class="input w-full bg-gray-100 dark:bg-gray-800 cursor-not-allowed"
+                  />
+                </div>
+
+                <!-- 端口 -->
+                <div>
+                  <label class="block text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('instance.sites.targetPort') }}
+                  </label>
+                  <input
+                    v-model.number="editForm.targetPort"
+                    type="number"
+                    min="1"
+                    max="65535"
+                    class="input w-full"
+                  />
+                  <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.sites.portHint') }}
+                  </p>
+                </div>
+
+                <!-- HTTPS 开关 -->
+                <div>
+                  <label class="flex items-center justify-between cursor-pointer">
+                    <div>
+                      <span class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                        {{ t('instance.sites.enableHttps') }}
+                      </span>
+                      <p class="text-xs mt-0.5" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                        {{ t('instance.sites.httpsHint') }}
+                      </p>
+                    </div>
+                    <div class="relative">
+                      <input 
+                        v-model="editForm.httpsEnabled" 
+                        type="checkbox" 
+                        class="sr-only peer"
+                      />
+                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </div>
+                  </label>
+                </div>
+
+                <!-- 备注 -->
+                <div>
+                  <label class="block text-sm font-medium mb-1" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                    {{ t('instance.sites.remark') }}
+                  </label>
+                  <input
+                    v-model="editForm.remark"
+                    type="text"
+                    maxlength="100"
+                    :placeholder="t('instance.sites.remarkPlaceholder')"
+                    class="input w-full"
+                  />
+                </div>
+              </div>
+
+              <div class="flex justify-end gap-3 mt-6">
+                <button class="btn-ghost" @click="showEditModal = false">
+                  {{ t('common.cancel') }}
+                </button>
+                <button :disabled="editing" class="btn-primary" @click="updateSite">
+                  <span v-if="editing" class="flex items-center gap-2">
+                    <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    {{ t('common.saving') }}
+                  </span>
+                  <span v-else>{{ t('common.save') }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- DNS 解析提示模态框 -->
+      <Teleport to="body">
+        <div 
+          v-if="showDnsHint" 
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
+          @click.self="showDnsHint = false"
+        >
+          <div 
+            class="w-full max-w-md rounded-lg shadow-xl"
+            :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+          >
+            <div class="p-6">
+              <div class="flex items-center gap-3 mb-4">
+                <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
+                  <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <h3 class="text-lg font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                  {{ t('instance.sites.addedSuccess') }}
+                </h3>
+              </div>
+
+              <p class="text-sm mb-4" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                {{ t('instance.sites.dnsHintDesc') }}
+              </p>
+
+              <!-- DNS 记录 -->
+              <div 
+                class="p-4 rounded-lg font-mono text-sm space-y-2"
+                :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+              >
+                <div class="flex">
+                  <span class="w-16 text-gray-500">{{ t('instance.sites.dnsType') }}:</span>
+                  <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ dnsHint.type }}</span>
+                </div>
+                <div class="flex">
+                  <span class="w-16 text-gray-500">{{ t('instance.sites.dnsHost') }}:</span>
+                  <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ dnsHint.host }}</span>
+                </div>
+                <div class="flex">
+                  <span class="w-16 text-gray-500">{{ t('instance.sites.dnsValue') }}:</span>
+                  <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ dnsHint.value }}</span>
+                </div>
+              </div>
+
+              <p class="text-xs mt-3" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                {{ t('instance.sites.dnsHintWithCheck') }}
+              </p>
+
+              <p v-if="form.httpsEnabled" class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                {{ t('instance.sites.sslAutoHint') }}
+              </p>
+
+              <div class="flex justify-end mt-6">
+                <button class="btn-primary" @click="showDnsHint = false">
+                  {{ t('common.gotIt') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- 证书状态弹窗 -->
+      <Teleport to="body">
+        <div 
+          v-if="showCertModal && certStatus" 
+          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
+          @click.self="showCertModal = false"
+        >
+          <div 
+            class="w-full max-w-md rounded-lg shadow-xl"
+            :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+          >
+            <div class="p-6">
+              <div class="flex items-center gap-3 mb-4">
+                <div 
+                  class="w-10 h-10 rounded-full flex items-center justify-center"
+                  :class="certStatus.status === 'valid' ? 'bg-green-100 dark:bg-green-900/30' : certStatus.status === 'disabled' ? 'bg-gray-100 dark:bg-gray-800' : 'bg-red-100 dark:bg-red-900/30'"
+                >
+                  <svg 
+                    class="w-5 h-5" 
+                    :class="getCertStatusColor(certStatus.status)"
+                    fill="none" 
+                    stroke="currentColor" 
+                    viewBox="0 0 24 24"
+                  >
+                    <path v-if="certStatus.status === 'valid'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                    <path v-else-if="certStatus.status === 'disabled'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                    <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="text-lg font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                    {{ t('instance.sites.cert.title') }}
+                  </h3>
+                  <p class="text-sm font-mono" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+                    {{ certStatus.domain }}
+                  </p>
+                </div>
+              </div>
+
+              <!-- 状态 -->
+              <div class="mb-4">
+                <span 
+                  class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium"
+                  :class="certStatus.status === 'valid' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : certStatus.status === 'disabled' ? 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'"
+                >
+                  {{ getCertStatusText(certStatus.status) }}
+                </span>
+              </div>
+
+              <!-- 证书详情 -->
+              <div 
+                v-if="certStatus.certificate"
+                class="p-4 rounded-lg space-y-2 text-sm"
+                :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+              >
+                <div class="flex justify-between">
+                  <span class="text-gray-500">{{ t('instance.sites.cert.issuer') }}</span>
+                  <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ certStatus.certificate.issuer }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-500">{{ t('instance.sites.cert.validFrom') }}</span>
+                  <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ formatDate(certStatus.certificate.validFrom) }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-500">{{ t('instance.sites.cert.validTo') }}</span>
+                  <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ formatDate(certStatus.certificate.validTo) }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-500">{{ t('instance.sites.cert.daysRemaining') }}</span>
+                  <span 
+                    :class="certStatus.certificate.daysRemaining > 30 ? 'text-green-600 dark:text-green-400' : certStatus.certificate.daysRemaining > 7 ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'"
+                  >
+                    {{ certStatus.certificate.daysRemaining }} {{ t('instance.sites.cert.days') }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 错误信息 -->
+              <div 
+                v-if="certStatus.error || certStatus.hint"
+                class="p-4 rounded-lg space-y-2 text-sm"
+                :class="themeStore.isDark ? 'bg-red-900/20' : 'bg-red-50'"
+              >
+                <p v-if="certStatus.hint" class="text-red-600 dark:text-red-400">
+                  {{ certStatus.hint }}
+                </p>
+                <p v-if="certStatus.error" class="text-red-500 text-xs font-mono break-all">
+                  {{ certStatus.error }}
+                </p>
+              </div>
+
+              <!-- 未启用提示 -->
+              <p 
+                v-if="certStatus.status === 'disabled'"
+                class="text-sm"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+              >
+                {{ certStatus.message }}
+              </p>
+
+              <div class="flex justify-end mt-6">
+                <button class="btn-primary" @click="showCertModal = false">
+                  {{ t('common.close') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/PackageSelector.vue b/client/src/components/instance/PackageSelector.vue
new file mode 100644
index 0000000..3894b19
--- /dev/null
+++ b/client/src/components/instance/PackageSelector.vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import type { Package } from '@/types/api'
+
+const { t } = useI18n()
+
+interface Props {
+  packages: Package[]
+  selectedPackageId: number | null
+  stepNumber?: number  // 步骤编号，默认 1
+  title?: string
+  emptyMessage?: string
+  soldOutLabel?: string
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 1,
+  title: undefined,
+  emptyMessage: undefined,
+  soldOutLabel: undefined,
+  loading: false
+})
+const emit = defineEmits<{
+  select: [pkg: Package]
+  showOwnerInfo: [packageId: number, ownerId: number]
+}>()
+
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+const detailPackage = ref<Package | null>(null)
+const truncatedPackageIds = ref<number[]>([])
+const packageNameRefs = new Map<number, HTMLElement>()
+const packageDescriptionRefs = new Map<number, HTMLElement>()
+
+const truncatedPackageIdSet = computed(() => new Set(truncatedPackageIds.value))
+
+function resolvePackageNetworkMode(pkg: Package): string | null {
+  return ((pkg as Package & { networkMode?: string }).networkMode || pkg.network_mode || null)
+}
+
+// 检查是否是用户自己的套餐
+function isOwnPackage(pkg: Package): boolean {
+  return pkg.ownerId === authStore.user?.id
+}
+
+// 根据主题的网络模式样式
+function getNetworkModeClass(mode: string | undefined | null): string {
+  const normalizedMode = String(mode || 'nat').toLowerCase()
+  switch (normalizedMode) {
+    case 'nat':
+      return themeStore.isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-600'
+    case 'nat_ipv6':
+      return themeStore.isDark ? 'bg-blue-900/50 text-blue-400' : 'bg-blue-100 text-blue-700'
+    case 'nat_ipv6_nat':
+      return themeStore.isDark ? 'bg-cyan-900/50 text-cyan-400' : 'bg-cyan-100 text-cyan-600'
+    case 'ipv6_only':
+      return themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600'
+    case 'ipv6_nat':
+      return themeStore.isDark ? 'bg-teal-900/50 text-teal-400' : 'bg-teal-100 text-teal-600'
+    default:
+      return themeStore.isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-600'
+  }
+}
+
+// 获取网络模式的标签文本
+function getNetworkModeLabel(mode: string | undefined | null): string {
+  const normalizedMode = String(mode || 'nat').toLowerCase()
+  const key = `common.networkMode.${normalizedMode}`
+  const translated = t(key)
+  return translated === key ? t('common.networkMode.nat') : translated
+}
+
+// 实例类型标签样式
+function getInstanceTypeClass(type: string | undefined | null): string {
+  const normalizedType = String(type || 'container').toLowerCase()
+  if (normalizedType === 'vm') {
+    return themeStore.isDark ? 'bg-amber-900/50 text-amber-400' : 'bg-amber-100 text-amber-700'
+  }
+  return themeStore.isDark ? 'bg-teal-900/50 text-teal-400' : 'bg-teal-100 text-teal-700'
+}
+
+function getInstanceTypeLabel(type: string | undefined | null): string {
+  const normalizedType = String(type || 'container').toLowerCase()
+  return normalizedType === 'vm' ? t('common.instanceType.vm') : t('common.instanceType.container')
+}
+
+function getPackageBadgeClass(kind: 'soldOut' | 'own' | 'market' | 'friends' | 'available' | 'shared'): string {
+  switch (kind) {
+    case 'soldOut':
+      return themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-200 text-gray-500'
+    case 'own':
+      return themeStore.isDark ? 'bg-amber-900/50 text-amber-400' : 'bg-amber-100 text-amber-700'
+    case 'market':
+      return themeStore.isDark ? 'bg-blue-900/50 text-blue-400 hover:bg-blue-900/70' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+    case 'friends':
+      return themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-700'
+    case 'available':
+      return themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-700'
+    case 'shared':
+      return themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-700'
+  }
+}
+
+function getPackageBadgeKind(pkg: Package): 'soldOut' | 'own' | 'market' | 'friends' | 'available' | 'shared' | null {
+  if (pkg.soldOut) return 'soldOut'
+  if (isOwnPackage(pkg)) return 'own'
+  if (pkg.sourceType === 'market') return 'market'
+  if (pkg.sourceType === 'friends') return 'friends'
+  if (pkg.isGlobalShared || pkg.sourceType === 'official' || pkg.sourceType === 'zone') return 'available'
+  if (pkg.isShared && !pkg.isOwn) return 'shared'
+  return null
+}
+
+function getPackageBadgeLabel(pkg: Package): string | null {
+  const kind = getPackageBadgeKind(pkg)
+  switch (kind) {
+    case 'soldOut':
+      return props.soldOutLabel || t('package.soldOut')
+    case 'own':
+      return t('package.myPackage')
+    case 'market':
+      return `UID:${pkg.ownerId}`
+    case 'friends':
+      return `${t('package.friendPrefix')}${pkg.ownerUsername}`
+    case 'available':
+      return t('package.globalShared')
+    case 'shared':
+      return t('package.shared')
+    default:
+      return null
+  }
+}
+
+function setPackageNameRef(packageId: number, el: unknown): void {
+  if (el instanceof HTMLElement) {
+    packageNameRefs.set(packageId, el)
+  } else {
+    packageNameRefs.delete(packageId)
+  }
+}
+
+function setPackageDescriptionRef(packageId: number, el: unknown): void {
+  if (el instanceof HTMLElement) {
+    packageDescriptionRefs.set(packageId, el)
+  } else {
+    packageDescriptionRefs.delete(packageId)
+  }
+}
+
+function isOverflowing(el?: HTMLElement): boolean {
+  if (!el) return false
+  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight
+}
+
+function updateTruncatedPackages(): void {
+  const nextIds: number[] = []
+  for (const pkg of props.packages) {
+    if (isOverflowing(packageNameRefs.get(pkg.id)) || isOverflowing(packageDescriptionRefs.get(pkg.id))) {
+      nextIds.push(pkg.id)
+    }
+  }
+  truncatedPackageIds.value = nextIds
+}
+
+function scheduleTruncationCheck(): void {
+  void nextTick(() => {
+    updateTruncatedPackages()
+  })
+}
+
+function shouldShowDetailButton(pkg: Package): boolean {
+  return truncatedPackageIdSet.value.has(pkg.id)
+}
+
+function openPackageDetail(pkg: Package): void {
+  detailPackage.value = pkg
+}
+
+function closePackageDetail(): void {
+  detailPackage.value = null
+}
+
+function handleResize(): void {
+  scheduleTruncationCheck()
+}
+
+watch(
+  () => props.packages.map(pkg => `${pkg.id}:${pkg.name}:${pkg.description || ''}:${pkg.sourceType || ''}:${pkg.ownerId || ''}`),
+  () => {
+    scheduleTruncationCheck()
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  scheduleTruncationCheck()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex items-center gap-2">
+        <span
+          class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+          :class="themeStore.isDark ? 'bg-white text-gray-900' : 'bg-gray-900 text-white'"
+        >{{ props.stepNumber }}</span>
+        <h2
+          class="text-sm font-medium"
+          :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+        >
+          {{ props.title || t('instance.selector.selectPackage') }}
+        </h2>
+      </div>
+      <slot name="header-actions" />
+    </div>
+
+    <div v-if="loading" class="flex items-center justify-center gap-2 py-8 text-themed-muted text-sm">
+      <svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+      {{ t('common.loading') }}
+    </div>
+    
+    <div v-else-if="packages.length === 0" class="text-center py-8 text-themed-muted text-sm">
+      {{ props.emptyMessage || t('instance.selector.noPackages') }}
+    </div>
+    
+    <div v-else class="flex flex-col gap-2 overflow-y-auto max-h-[calc(4*5.5rem+3*0.5rem)] sm:max-h-none sm:grid sm:grid-cols-1 sm:gap-3 md:grid-cols-2 2xl:grid-cols-3 sm:overflow-visible scrollbar-hide">
+      <div
+        v-for="pkg in packages"
+        :key="pkg.id"
+        :class="[
+          'relative flex min-h-[132px] flex-col p-4 rounded-lg border transition-all cursor-pointer shrink-0 sm:flex-initial overflow-hidden min-w-0',
+          pkg.soldOut
+            ? (themeStore.isDark ? 'border-gray-800 bg-gray-900/50 opacity-60' : 'border-gray-200 bg-gray-50 opacity-60')
+            : selectedPackageId === pkg.id 
+              ? (themeStore.isDark ? 'border-white bg-gray-900 ring-1 ring-white/20' : 'border-gray-900 bg-gray-50 ring-1 ring-gray-900/20')
+              : (themeStore.isDark ? 'border-gray-800 hover:border-gray-700' : 'border-gray-200 hover:border-gray-300')
+        ]"
+        @click="emit('select', pkg)"
+      >
+        <div>
+          <div class="mb-1 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+            <div class="min-w-0">
+              <div
+                :ref="el => setPackageNameRef(pkg.id, el)"
+                class="block w-full overflow-hidden text-ellipsis whitespace-nowrap font-medium leading-tight"
+                :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+                :title="pkg.name"
+              >
+                {{ pkg.name }}
+              </div>
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+              <button
+                v-if="shouldShowDetailButton(pkg)"
+                type="button"
+                class="inline-flex h-6 w-6 items-center justify-center rounded-full transition-colors"
+                :class="themeStore.isDark ? 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200' : 'bg-gray-100 text-gray-500 hover:bg-gray-200 hover:text-gray-700'"
+                :title="t('common.details')"
+                @click.stop="openPackageDetail(pkg)"
+              >
+                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </button>
+              <button
+                v-if="getPackageBadgeKind(pkg) === 'market'"
+                type="button"
+                class="text-xs px-2 py-0.5 rounded transition-colors"
+                :class="getPackageBadgeClass('market')"
+                @click.stop="emit('showOwnerInfo', pkg.id, pkg.ownerId!)"
+              >
+                {{ getPackageBadgeLabel(pkg) }}
+              </button>
+              <span
+                v-else-if="getPackageBadgeKind(pkg)"
+                class="text-xs px-2 py-0.5 rounded"
+                :class="getPackageBadgeClass(getPackageBadgeKind(pkg)!)"
+              >
+                {{ getPackageBadgeLabel(pkg) }}
+              </span>
+            </div>
+          </div>
+          <p 
+            v-if="pkg.description" 
+            :ref="el => setPackageDescriptionRef(pkg.id, el)"
+            class="block w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-5"
+            :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+            :title="pkg.description"
+          >
+            {{ pkg.description }}
+          </p>
+        </div>
+
+        <div class="mt-3 border-t pt-3" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+          <div class="flex items-start gap-2">
+            <div class="flex min-w-0 flex-1 flex-wrap gap-1.5 content-start">
+              <!-- 实例类型标签 -->
+              <span :class="['text-2xs px-1.5 py-0.5 rounded font-medium', getInstanceTypeClass(pkg.instance_type)]">
+                {{ getInstanceTypeLabel(pkg.instance_type) }}
+              </span>
+              <span :class="['text-2xs px-1.5 py-0.5 rounded', getNetworkModeClass(resolvePackageNetworkMode(pkg))]">
+                {{ getNetworkModeLabel(resolvePackageNetworkMode(pkg)) }}
+              </span>
+              <span
+                v-if="pkg.nested === 1"
+                class="text-2xs px-1.5 py-0.5 rounded"
+                :class="themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600'"
+              >
+                {{ t('instance.selector.docker') }}
+              </span>
+              <span
+                v-if="pkg.privileged === 1"
+                class="text-2xs px-1.5 py-0.5 rounded"
+                :class="themeStore.isDark ? 'bg-orange-900/50 text-orange-400' : 'bg-orange-100 text-orange-600'"
+              >
+                {{ t('instance.selector.privileged') }}
+              </span>
+            </div>
+            <div
+              v-if="selectedPackageId === pkg.id"
+              class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full"
+              :class="themeStore.isDark ? 'bg-white' : 'bg-gray-900'"
+            >
+              <svg
+                class="w-3 h-3"
+                :class="themeStore.isDark ? 'text-gray-900' : 'text-white'"
+                fill="currentColor" viewBox="0 0 20 20"
+              >
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="detailPackage" class="modal-overlay">
+        <div class="modal-backdrop" @click="closePackageDetail"></div>
+        <div class="modal-content max-w-lg">
+          <div class="modal-header items-start">
+            <div class="min-w-0 flex-1 pr-3">
+              <h3 class="modal-title whitespace-normal break-words leading-snug">{{ detailPackage.name }}</h3>
+              <p class="mt-1 text-xs text-themed-muted">{{ t('common.details') }}</p>
+            </div>
+            <button type="button" class="shrink-0 self-start text-themed-muted hover:text-themed" @click="closePackageDetail">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body space-y-4">
+            <div class="flex flex-wrap gap-2">
+              <button
+                v-if="getPackageBadgeKind(detailPackage) === 'market'"
+                type="button"
+                class="text-xs px-2 py-1 rounded transition-colors"
+                :class="getPackageBadgeClass('market')"
+                @click.stop="emit('showOwnerInfo', detailPackage.id, detailPackage.ownerId!)"
+              >
+                {{ getPackageBadgeLabel(detailPackage) }}
+              </button>
+              <span
+                v-else-if="getPackageBadgeKind(detailPackage)"
+                class="text-xs px-2 py-1 rounded"
+                :class="getPackageBadgeClass(getPackageBadgeKind(detailPackage)!)"
+              >
+                {{ getPackageBadgeLabel(detailPackage) }}
+              </span>
+              <span :class="['text-xs px-2 py-1 rounded font-medium', getInstanceTypeClass(detailPackage.instance_type)]">
+                {{ getInstanceTypeLabel(detailPackage.instance_type) }}
+              </span>
+              <span :class="['text-xs px-2 py-1 rounded', getNetworkModeClass(resolvePackageNetworkMode(detailPackage))]">
+                {{ getNetworkModeLabel(resolvePackageNetworkMode(detailPackage)) }}
+              </span>
+              <span
+                v-if="detailPackage.nested === 1"
+                class="text-xs px-2 py-1 rounded"
+                :class="themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600'"
+              >
+                {{ t('instance.selector.docker') }}
+              </span>
+              <span
+                v-if="detailPackage.privileged === 1"
+                class="text-xs px-2 py-1 rounded"
+                :class="themeStore.isDark ? 'bg-orange-900/50 text-orange-400' : 'bg-orange-100 text-orange-600'"
+              >
+                {{ t('instance.selector.privileged') }}
+              </span>
+            </div>
+
+            <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/50' : 'border-gray-200 bg-gray-50/80'">
+              <div class="mb-2 text-xs font-medium uppercase tracking-wide text-themed-muted">
+                {{ t('common.description') }}
+              </div>
+              <div
+                class="text-sm leading-6 whitespace-pre-wrap break-words"
+                :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+              >
+                {{ detailPackage.description || t('common.none') }}
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn-primary" @click="closePackageDetail">
+              {{ t('common.close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/PlanSelector.vue b/client/src/components/instance/PlanSelector.vue
new file mode 100644
index 0000000..0f7249c
--- /dev/null
+++ b/client/src/components/instance/PlanSelector.vue
@@ -0,0 +1,374 @@
+<script setup lang="ts">
+/**
+ * 套餐方案选择器
+ * 用于付费套餐，显示可选的付费方案列表
+ * 现代化卡片式布局，清晰的参数分组
+ */
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { getFreeSiteBillingCycleLabel } from '@/utils/freeSiteFun'
+
+interface PackagePlan {
+  id: number
+  name: string
+  description: string | null
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: string
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  setupFee: number
+  monthlyPrice: number
+  isActive: boolean
+  isSoldOut: boolean
+  sortOrder: number
+  slaGuarantee: number | null
+}
+
+interface Props {
+  plans: PackagePlan[]
+  selectedPlanId: number | null
+  instanceType?: 'container' | 'vm'
+  loading?: boolean
+  stepNumber?: number  // 步骤编号，默认 2
+  prerequisiteMessage?: string | null
+  freeSiteMode?: boolean
+  title?: string
+  description?: string
+  emptyMessage?: string
+  soldOutLabel?: string
+  customPlanHint?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 2,
+  title: undefined,
+  description: undefined,
+  emptyMessage: undefined,
+  soldOutLabel: undefined,
+  customPlanHint: undefined
+})
+const emit = defineEmits<{
+  select: [plan: PackagePlan]
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+function formatMemory(mb: number): string {
+  if (mb >= 1024) return (mb / 1024).toFixed(mb >= 10240 ? 0 : 1) + ' GB'
+  return mb + ' MB'
+}
+
+function formatDisk(mb: number): string {
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+function formatPrice(cents: number): string {
+  return (cents / 100).toFixed(2)
+}
+
+function formatTraffic(bytes: string): string {
+  const b = BigInt(bytes || '0')
+  if (b >= BigInt(1024 * 1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024 * 1024)).toFixed(1) + ' TB'
+  }
+  if (b >= BigInt(1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024)).toFixed(0) + ' GB'
+  }
+  return (Number(b) / (1024 * 1024)).toFixed(0) + ' MB'
+}
+
+function getBillingCycleLabel(days: number): string {
+  if (props.freeSiteMode) return getFreeSiteBillingCycleLabel(days)
+  switch (days) {
+    case 1: return t('billing.cycle.monthly')
+    case 3: return t('billing.cycle.quarterly')
+    case 6: return t('billing.cycle.semiAnnual')
+    case 12: return t('billing.cycle.annual')
+    default: return `${days} ${t('billing.cycle.months')}`
+  }
+}
+
+function formatLimit(limit: number): string {
+  // 0 表示没有配额，不是无限制
+  return String(limit)
+}
+
+// 格式化带宽限制速度，统一换算成 Mbps
+function formatBandwidth(speed: string | null | undefined): string {
+  if (!speed || speed === '0') return t('traffic.unlimited')
+
+  // 如果是带单位的字符串（如 "100Mbit"），转换显示格式
+  if (/Mbit$/i.test(speed)) {
+    return speed.replace(/Mbit$/i, ' Mbps')
+  }
+  if (/Gbit$/i.test(speed)) {
+    const value = parseFloat(speed)
+    return (value * 1024) + ' Mbps'
+  }
+
+  // 如果是纯数字（字节数表示，1GB=1Gbps），换算成 Mbps
+  const bytes = BigInt(speed)
+  const GB = BigInt(1024 * 1024 * 1024)
+  const MB = BigInt(1024 * 1024)
+
+  if (bytes >= GB) {
+    // 大于等于 1GB，以 Gbps 为单位，换算成 Mbps
+    const gbps = Number(bytes / GB)
+    return (gbps * 1024) + ' Mbps'
+  } else if (bytes >= MB) {
+    // MB 级别，直接显示 Mbps
+    return Number(bytes / MB) + ' Mbps'
+  }
+
+  return t('traffic.unlimited')
+}
+
+function planHasSwap(plan: PackagePlan): boolean {
+  return props.instanceType !== 'vm' && plan.swapSize > 0
+}
+
+function isPlanDisabled(plan: PackagePlan): boolean {
+  return plan.isSoldOut || !plan.isActive
+}
+
+function isPlanSelected(plan: PackagePlan): boolean {
+  return props.selectedPlanId === plan.id && !isPlanDisabled(plan)
+}
+
+function handleSelect(plan: PackagePlan): void {
+  if (isPlanDisabled(plan)) return
+  emit('select', plan)
+}
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center gap-2 mb-4">
+      <span
+        class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+        :class="themeStore.isDark ? 'bg-white text-gray-900' : 'bg-gray-900 text-white'"
+      >{{ props.stepNumber }}</span>
+      <h2
+        class="text-sm font-medium"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ props.title || t('instance.selector.selectPlan') }}
+      </h2>
+      <span class="text-xs text-themed-muted ml-auto">
+        {{ props.description || t('instance.selector.planDesc') }}
+      </span>
+    </div>
+
+    <div
+      v-if="prerequisiteMessage"
+      class="mb-4 rounded-lg border px-3 py-2 text-xs leading-relaxed"
+      :class="themeStore.isDark ? 'border-amber-500/30 bg-amber-900/20 text-amber-300' : 'border-amber-200 bg-amber-50 text-amber-700'"
+    >
+      {{ prerequisiteMessage }}
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="loading" class="text-center py-8 text-themed-muted text-sm">
+      <svg class="w-5 h-5 mx-auto mb-2 animate-spin icon-themed-muted" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      {{ t('common.loading') }}
+    </div>
+
+    <!-- No plans -->
+    <div v-else-if="plans.length === 0" class="text-center py-8 text-themed-muted text-sm">
+      {{ props.emptyMessage || t('instance.selector.noPlans') }}
+    </div>
+
+    <!-- Plan list - 现代化卡片布局 -->
+    <div v-else class="grid gap-3">
+      <div
+        v-for="plan in plans"
+        :key="plan.id"
+        :class="[
+          'relative rounded-xl border-2 p-4 transition-all duration-200',
+          isPlanDisabled(plan) ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+          isPlanSelected(plan)
+            ? (themeStore.isDark
+              ? 'border-blue-500 bg-blue-500/10 shadow-lg shadow-blue-500/10'
+              : 'border-blue-500 bg-blue-50 shadow-lg shadow-blue-500/10')
+            : isPlanDisabled(plan)
+              ? (themeStore.isDark ? 'border-gray-800 bg-gray-900/40' : 'border-gray-200 bg-gray-50')
+              : (themeStore.isDark
+                ? 'border-gray-800 hover:border-gray-700 hover:bg-gray-800/50'
+                : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50')
+        ]"
+        @click="handleSelect(plan)"
+      >
+        <!-- 选中标识 -->
+        <div
+          v-if="isPlanSelected(plan)"
+          class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center shadow-lg"
+        >
+          <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+        </div>
+
+        <!-- 头部：方案名 + SLA + 价格 -->
+        <div class="flex items-start justify-between gap-4 mb-3">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 flex-wrap">
+              <h3
+                class="font-semibold text-base"
+                :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+              >
+                {{ plan.name }}
+              </h3>
+              <span
+                v-if="plan.isSoldOut"
+                class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
+                :class="themeStore.isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-50 text-red-700'"
+              >
+                {{ props.soldOutLabel || t('instance.selector.planSoldOut') }}
+              </span>
+              <!-- SLA 保证标签 -->
+              <span
+                v-if="plan.slaGuarantee !== null"
+                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
+                :class="themeStore.isDark
+                  ? 'bg-green-500/20 text-green-400'
+                  : 'bg-green-100 text-green-700'"
+              >
+                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+                SLA {{ plan.slaGuarantee }}%
+              </span>
+            </div>
+            <p
+              v-if="plan.description"
+              class="text-xs mt-0.5 line-clamp-2 break-all"
+              :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'"
+              :title="plan.description"
+            >
+              {{ plan.description }}
+            </p>
+          </div>
+          <!-- 价格 -->
+          <div class="text-right flex-shrink-0">
+            <div
+              class="text-xl font-bold"
+              :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+            >
+              ¥{{ formatPrice(plan.price) }}
+            </div>
+            <div class="text-xs text-themed-muted">
+              {{ getBillingCycleLabel(plan.billingCycle) }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 资源配置区域 - 分组展示 -->
+        <div
+          class="grid grid-cols-2 sm:grid-cols-4 gap-3 p-3 rounded-lg"
+          :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100/50'"
+        >
+          <!-- CPU -->
+          <div class="text-center">
+            <div class="text-xs text-themed-muted mb-0.5">CPU</div>
+            <div
+              class="font-semibold"
+              :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+            >
+              {{ plan.cpu }}%
+            </div>
+          </div>
+          <!-- 内存 -->
+          <div class="text-center">
+            <div class="text-xs text-themed-muted mb-0.5 leading-tight">
+              <div>{{ t('instance.selector.memory') }}</div>
+              <div v-if="planHasSwap(plan)" class="opacity-60">SWAP ✅</div>
+            </div>
+            <div
+              class="font-semibold"
+              :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+            >
+              {{ formatMemory(plan.memory) }}
+            </div>
+          </div>
+          <!-- 硬盘 -->
+          <div class="text-center">
+            <div class="text-xs text-themed-muted mb-0.5">{{ t('instance.selector.disk') }}</div>
+            <div
+              class="font-semibold"
+              :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+            >
+              {{ formatDisk(plan.disk) }}
+            </div>
+          </div>
+          <!-- 流量 -->
+          <div class="text-center">
+            <div class="text-xs text-themed-muted mb-0.5">
+              {{ t('billing.traffic') }}
+              <span class="opacity-60">({{ t('billing.trafficBidirectional') }})</span>
+            </div>
+            <div
+              class="font-semibold"
+              :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+            >
+              {{ formatTraffic(plan.trafficLimit) }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 配额信息 - 横向紧凑排列 -->
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-3 text-xs">
+          <div class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            <span class="text-themed-muted">{{ t('instance.selector.ports') }}:</span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatLimit(plan.portLimit) }}</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+            </svg>
+            <span class="text-themed-muted">{{ t('instance.selector.snapshots') }}:</span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatLimit(plan.snapshotLimit) }}</span>
+          </div>
+          <div v-if="plan.siteLimit > 0" class="flex items-center gap-1">
+            <svg class="w-3.5 h-3.5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+            </svg>
+            <span class="text-themed-muted">{{ t('instance.selector.sites') }}:</span>
+            <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatLimit(plan.siteLimit) }}</span>
+          </div>
+          <!-- 带宽限制 -->
+          <div v-if="plan.trafficLimitSpeed && plan.trafficLimitSpeed !== '0'" class="flex items-center gap-1 ml-auto">
+            <span class="text-themed-muted">{{ t('instance.selector.bandwidth') }}:</span>
+            <span class="text-blue-500 font-medium">{{ formatBandwidth(plan.trafficLimitSpeed) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 定制提示 -->
+    <div
+      class="mt-4 pt-3 border-t text-center text-xs"
+      :class="themeStore.isDark ? 'border-gray-800 text-gray-500' : 'border-gray-100 text-gray-400'"
+    >
+      {{ props.customPlanHint || t('instance.selector.customPlanHint') }}
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/RegionSelector.vue b/client/src/components/instance/RegionSelector.vue
new file mode 100644
index 0000000..39784be
--- /dev/null
+++ b/client/src/components/instance/RegionSelector.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+/**
+ * 地区选择器组件
+ * 用于创建实例时选择国家/地区
+ */
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import FlagIcon from '@/components/FlagIcon.vue'
+import { getLocalizedCountryName } from '@/utils/countryDisplay'
+
+export interface Region {
+  code: string      // 国家代码，如 'hk', 'de'
+  name: string      // 国家名称
+  packageCount: number  // 套餐数量
+  packageIds: number[]  // 该地区包含的套餐 ID 列表
+}
+
+interface Props {
+  regions: Region[]
+  selectedRegion: string | null  // null 表示"全部"
+  loading?: boolean
+  title?: string
+  packageCountLabel?: string
+  packageCountLabelKey?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  title: undefined,
+  packageCountLabel: undefined,
+  packageCountLabelKey: undefined
+})
+
+const emit = defineEmits<{
+  select: [region: string | null]
+}>()
+
+const { t, locale } = useI18n()
+const themeStore = useThemeStore()
+
+// 计算总套餐数
+const totalPackageCount = computed(() => {
+  return props.regions.reduce((sum, r) => sum + r.packageCount, 0)
+})
+
+// 是否选中"全部"
+const isAllSelected = computed(() => props.selectedRegion === null)
+
+// 选择地区
+function selectRegion(code: string | null) {
+  emit('select', code)
+}
+
+function getRegionLabel(code: string): string {
+  return getLocalizedCountryName(code, locale.value, (key, fallback) => t(key, fallback))
+}
+
+function getPackageCountLabel(count: number): string {
+  if (props.packageCountLabelKey) {
+    return t(props.packageCountLabelKey, { count })
+  }
+
+  if (props.packageCountLabel) {
+    return props.packageCountLabel.replace('{count}', String(count))
+  }
+
+  return t('instance.selector.packageCount', { count })
+}
+</script>
+
+<template>
+  <div class="card p-5">
+    <!-- 标题栏 -->
+    <div class="flex items-center gap-2 mb-4">
+      <span
+        class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+        :class="themeStore.isDark ? 'bg-white text-gray-900' : 'bg-gray-900 text-white'"
+      >1</span>
+      <h2
+        class="text-sm font-medium"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ props.title || t('instance.selector.selectRegion') }}
+      </h2>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="flex items-center justify-center py-8">
+      <svg class="w-6 h-6 animate-spin text-gray-500" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+    </div>
+
+    <!-- 无数据 -->
+    <div v-else-if="regions.length === 0" class="text-center py-8 text-themed-muted text-sm">
+      {{ t('instance.selector.noRegions') }}
+    </div>
+
+    <template v-else>
+      <!-- 移动端：pill 网格（sm 以下显示） -->
+      <div class="sm:hidden grid grid-cols-2 gap-2">
+        <!-- "全部"选项 -->
+        <button
+          type="button"
+          :class="[
+            'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all w-full',
+            isAllSelected
+              ? (themeStore.isDark
+                ? 'border-white bg-white/10 text-white'
+                : 'border-blue-500 bg-blue-50 text-blue-700')
+              : (themeStore.isDark
+                ? 'border-gray-700 text-gray-300 hover:border-gray-500 hover:bg-gray-800'
+                : 'border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50')
+          ]"
+          @click="selectRegion(null)"
+        >
+          <svg class="w-4 h-4 shrink-0 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span class="truncate">{{ t('instance.selector.allRegions') }}</span>
+          <span
+            class="ml-auto text-xs px-1.5 py-0.5 rounded shrink-0"
+            :class="isAllSelected
+              ? (themeStore.isDark ? 'bg-white/20 text-white' : 'bg-blue-100 text-blue-600')
+              : (themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-500')"
+          >{{ totalPackageCount }}</span>
+        </button>
+        <button
+          v-for="region in regions"
+          :key="'m-' + region.code"
+          type="button"
+          :class="[
+            'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all w-full',
+            selectedRegion === region.code
+              ? (themeStore.isDark
+                ? 'border-white bg-white/10 text-white'
+                : 'border-blue-500 bg-blue-50 text-blue-700')
+              : (themeStore.isDark
+                ? 'border-gray-700 text-gray-300 hover:border-gray-500 hover:bg-gray-800'
+                : 'border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50')
+          ]"
+          @click="selectRegion(region.code)"
+        >
+          <FlagIcon :code="region.code" size="sm" class="shrink-0" />
+          <span class="truncate">{{ getRegionLabel(region.code) }}</span>
+          <span
+            class="ml-auto text-xs px-1.5 py-0.5 rounded shrink-0"
+            :class="selectedRegion === region.code
+              ? (themeStore.isDark ? 'bg-white/20 text-white' : 'bg-blue-100 text-blue-600')
+              : (themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-500')"
+          >{{ region.packageCount }}</span>
+        </button>
+      </div>
+
+      <!-- 桌面端：原始大卡片样式（sm 及以上显示） -->
+      <div class="hidden sm:grid sm:grid-cols-3 sm:gap-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+        <!-- "全部"选项 -->
+        <div
+          :class="[
+            'relative p-4 rounded-xl border-2 cursor-pointer transition-all text-center group',
+            isAllSelected
+              ? (themeStore.isDark
+                ? 'border-white bg-white/5 shadow-lg shadow-white/5'
+                : 'border-gray-900 bg-gray-50 shadow-lg shadow-gray-900/10')
+              : (themeStore.isDark
+                ? 'border-gray-800 hover:border-gray-600 hover:bg-gray-800/50'
+                : 'border-gray-200 hover:border-gray-400 hover:bg-gray-50')
+          ]"
+          @click="selectRegion(null)"
+        >
+          <div v-if="isAllSelected" class="absolute top-2 right-2 w-5 h-5 rounded-full flex items-center justify-center" :class="themeStore.isDark ? 'bg-white' : 'bg-gray-900'">
+            <svg class="w-3 h-3" :class="themeStore.isDark ? 'text-gray-900' : 'text-white'" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="w-10 h-10 mx-auto mb-2 rounded-full flex items-center justify-center" :class="themeStore.isDark ? 'bg-blue-500/20' : 'bg-blue-100'">
+            <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div class="font-medium text-sm mb-1" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+            {{ t('instance.selector.allRegions') }}
+          </div>
+          <div class="w-8 h-px mx-auto my-2" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'"></div>
+          <div class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+            {{ getPackageCountLabel(totalPackageCount) }}
+          </div>
+        </div>
+
+        <!-- 各国家/地区 -->
+        <div
+          v-for="region in regions"
+          :key="'d-' + region.code"
+          :class="[
+            'relative p-4 rounded-xl border-2 cursor-pointer transition-all text-center group',
+            selectedRegion === region.code
+              ? (themeStore.isDark
+                ? 'border-white bg-white/5 shadow-lg shadow-white/5'
+                : 'border-gray-900 bg-gray-50 shadow-lg shadow-gray-900/10')
+              : (themeStore.isDark
+                ? 'border-gray-800 hover:border-gray-600 hover:bg-gray-800/50'
+                : 'border-gray-200 hover:border-gray-400 hover:bg-gray-50')
+          ]"
+          @click="selectRegion(region.code)"
+        >
+          <div v-if="selectedRegion === region.code" class="absolute top-2 right-2 w-5 h-5 rounded-full flex items-center justify-center" :class="themeStore.isDark ? 'bg-white' : 'bg-gray-900'">
+            <svg class="w-3 h-3" :class="themeStore.isDark ? 'text-gray-900' : 'text-white'" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="w-10 h-10 mx-auto mb-2 rounded-lg overflow-hidden flex items-center justify-center bg-gray-100 dark:bg-gray-800">
+            <FlagIcon :code="region.code" size="lg" />
+          </div>
+          <div class="font-medium text-sm mb-1" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+            {{ getRegionLabel(region.code) }}
+          </div>
+          <div class="w-8 h-px mx-auto my-2" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'"></div>
+          <div class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+            {{ getPackageCountLabel(region.packageCount) }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/client/src/components/instance/ResourceSlider.vue b/client/src/components/instance/ResourceSlider.vue
new file mode 100644
index 0000000..876277b
--- /dev/null
+++ b/client/src/components/instance/ResourceSlider.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+/**
+ * 资源滑块组件
+ * 支持滑块拖动、数字输入、快捷按钮
+ */
+import { computed, ref, watch } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+
+interface Props {
+  modelValue: number
+  min: number
+  max: number
+  step: number
+  label: string
+  unit?: string
+  /** 显示格式化函数 */
+  formatValue?: (value: number) => string
+  /** 副标题（如 ~1 核心） */
+  subtitle?: string
+  /** 快捷按钮配置：值数组或预设比例 */
+  presets?: number[] | 'percentage'
+  /** 图标 */
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  unit: '',
+  presets: 'percentage'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const themeStore = useThemeStore()
+
+// 输入框临时值
+const inputValue = ref<string>('')
+const isInputFocused = ref(false)
+
+// 计算填充百分比
+const fillPercentage = computed(() => {
+  if (props.max <= props.min) return 0
+  return ((props.modelValue - props.min) / (props.max - props.min)) * 100
+})
+
+// 格式化显示值
+const displayValue = computed(() => {
+  if (props.formatValue) {
+    return props.formatValue(props.modelValue)
+  }
+  return `${props.modelValue}${props.unit}`
+})
+
+// 快捷按钮
+const presetButtons = computed(() => {
+  if (Array.isArray(props.presets)) {
+    return props.presets.map(v => ({
+      label: props.formatValue ? props.formatValue(v) : `${v}${props.unit}`,
+      value: v
+    }))
+  }
+  // 默认使用百分比预设
+  const range = props.max - props.min
+  return [
+    { label: 'MIN', value: props.min },
+    { label: '25%', value: normalizeToStep(props.min + range * 0.25) },
+    { label: '50%', value: normalizeToStep(props.min + range * 0.5) },
+    { label: '75%', value: normalizeToStep(props.min + range * 0.75) },
+    { label: 'MAX', value: props.max }
+  ]
+})
+
+// 将值规范到步长
+function normalizeToStep(value: number): number {
+  const stepped = Math.round(value / props.step) * props.step
+  return Math.max(props.min, Math.min(props.max, stepped))
+}
+
+// 处理滑块输入
+function handleSliderInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = normalizeToStep(Number(target.value))
+  emit('update:modelValue', value)
+}
+
+// 处理输入框聚焦
+function handleInputFocus() {
+  isInputFocused.value = true
+  inputValue.value = String(props.modelValue)
+}
+
+// 处理输入框失焦
+function handleInputBlur() {
+  isInputFocused.value = false
+  const parsed = parseFloat(inputValue.value)
+  if (!isNaN(parsed)) {
+    const normalized = normalizeToStep(parsed)
+    emit('update:modelValue', normalized)
+  }
+}
+
+// 处理输入框回车
+function handleInputEnter() {
+  const parsed = parseFloat(inputValue.value)
+  if (!isNaN(parsed)) {
+    const normalized = normalizeToStep(parsed)
+    emit('update:modelValue', normalized)
+  }
+  isInputFocused.value = false
+}
+
+// 处理快捷按钮点击
+function handlePresetClick(value: number) {
+  emit('update:modelValue', value)
+}
+
+// 同步外部值变化到输入框
+watch(() => props.modelValue, (newVal) => {
+  if (!isInputFocused.value) {
+    inputValue.value = String(newVal)
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="resource-slider">
+    <!-- 标题行 -->
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-2">
+        <!-- 图标 -->
+        <div 
+          v-if="icon"
+          class="w-8 h-8 rounded-lg flex items-center justify-center text-sm"
+          :class="themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-600'"
+        >
+          <span v-html="icon"></span>
+        </div>
+        <div>
+          <div 
+            class="text-sm font-medium"
+            :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+          >
+            {{ label }}
+          </div>
+          <div 
+            v-if="subtitle"
+            class="text-xs"
+            :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+          >
+            {{ subtitle }}
+          </div>
+        </div>
+      </div>
+      
+      <!-- 数值显示/输入 -->
+      <div class="flex items-center gap-2">
+        <input
+          v-if="isInputFocused"
+          v-model="inputValue"
+          type="text"
+          class="w-24 h-9 px-3 text-right text-sm font-mono rounded-lg border-2 outline-none transition-colors"
+          :class="themeStore.isDark 
+            ? 'bg-gray-800 border-blue-500 text-white' 
+            : 'bg-white border-blue-500 text-gray-900'"
+          autofocus
+          @blur="handleInputBlur"
+          @keydown.enter="handleInputEnter"
+        />
+        <div
+          v-else
+          class="w-24 h-9 px-3 flex items-center justify-end text-sm font-mono rounded-lg cursor-text transition-colors"
+          :class="themeStore.isDark 
+            ? 'bg-gray-800 hover:bg-gray-750 text-white' 
+            : 'bg-gray-100 hover:bg-gray-200 text-gray-900'"
+          @click="handleInputFocus"
+        >
+          {{ displayValue }}
+        </div>
+      </div>
+    </div>
+    
+    <!-- 滑块轨道 -->
+    <div class="slider-track-container relative h-2 mb-3">
+      <!-- 背景轨道 -->
+      <div 
+        class="absolute inset-0 rounded-full"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'"
+      ></div>
+      <!-- 填充轨道（到圆心位置） -->
+      <div 
+        class="absolute inset-y-0 left-0 rounded-full transition-all duration-150"
+        :class="themeStore.isDark ? 'bg-blue-500' : 'bg-blue-600'"
+        :style="{ width: `calc(${fillPercentage}% * (100% - 16px) / 100% + 8px)` }"
+      ></div>
+      <!-- 原生滑块（透明覆盖层） -->
+      <input
+        type="range"
+        :value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        class="slider-input absolute inset-0 w-full h-full cursor-pointer"
+        @input="handleSliderInput"
+      />
+      <!-- 滑块手柄 -->
+      <div 
+        class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full shadow-md pointer-events-none transition-all duration-150"
+        :class="themeStore.isDark ? 'bg-white' : 'bg-white border-2 border-blue-600'"
+        :style="{ left: `calc(${fillPercentage}% * (100% - 16px) / 100%)` }"
+      ></div>
+    </div>
+    
+    <!-- 范围标签 + 快捷按钮 -->
+    <div class="flex items-center justify-between">
+      <div 
+        class="text-xs font-mono"
+        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+      >
+        {{ formatValue ? formatValue(min) : `${min}${unit}` }}
+      </div>
+      
+      <!-- 快捷按钮 -->
+      <div class="flex items-center gap-0.5">
+        <button
+          v-for="preset in presetButtons"
+          :key="preset.label"
+          type="button"
+          class="px-1.5 py-0.5 text-2xs font-medium transition-colors"
+          :class="[
+            modelValue === preset.value
+              ? (themeStore.isDark ? 'text-blue-400' : 'text-blue-600')
+              : (themeStore.isDark ? 'text-gray-600 hover:text-gray-400' : 'text-gray-400 hover:text-gray-600')
+          ]"
+          @click="handlePresetClick(preset.value)"
+        >
+          {{ preset.label }}
+        </button>
+      </div>
+      
+      <div 
+        class="text-xs font-mono"
+        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+      >
+        {{ formatValue ? formatValue(max) : `${max}${unit}` }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 滑块输入样式 */
+.slider-input {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  margin: 0;
+  opacity: 0;
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.slider-input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+/* 确保轨道容器有圆角 */
+.slider-track-container {
+  border-radius: 9999px;
+}
+</style>
diff --git a/client/src/components/instance/ResourceSliders.vue b/client/src/components/instance/ResourceSliders.vue
new file mode 100644
index 0000000..45d61a6
--- /dev/null
+++ b/client/src/components/instance/ResourceSliders.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import ResourceSlider from './ResourceSlider.vue'
+import type { Package, UserQuota } from '@/types/api'
+
+const { t } = useI18n()
+
+interface Props {
+  selectedPackage: Package | null
+  userQuota: UserQuota | null
+  cpu: number
+  memory: number
+  disk: number
+  stepNumber?: number  // 步骤编号，默认 2
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 2
+})
+const emit = defineEmits<{
+  'update:cpu': [value: number]
+  'update:memory': [value: number]
+  'update:disk': [value: number]
+}>()
+
+const themeStore = useThemeStore()
+
+// CPU 配置
+const cpuMin = 15
+const cpuStep = 5
+const cpuMax = computed(() => Math.max(15, props.selectedPackage?.cpu_max || 15))
+
+// 内存配置
+const memoryMin = 128
+const memoryStep = 64
+const memoryMax = computed(() => Math.max(128, props.selectedPackage?.memory_max || 128))
+
+// 硬盘配置
+const diskMin = 512
+const diskStep = 102  // 约 0.1GB
+const diskMax = computed(() => Math.max(512, props.selectedPackage?.disk_max || 512))
+
+// CPU 额配转换为核心数
+function allowanceToCores(allowance: number): number {
+  if (allowance <= 0) return 1
+  return Math.ceil(allowance / 100)
+}
+
+// 格式化 CPU 显示
+function formatCpu(value: number): string {
+  return `${value}%`
+}
+
+// 格式化内存显示
+function formatMemory(mb: number): string {
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb >= 10 ? `${Math.round(gb)} GB` : `${gb.toFixed(1)} GB`
+  }
+  return `${mb} MB`
+}
+
+// 格式化硬盘显示（1024进制）
+function formatDisk(mb: number): string {
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? `${gb} GB` : `${gb.toFixed(1)} GB`
+  }
+  return `${mb} MB`
+}
+
+// CPU 图标
+const cpuIcon = `<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"><rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>`
+
+// 内存图标
+const memoryIcon = `<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="M6 19v-3"/><path d="M10 19v-3"/><path d="M14 19v-3"/><path d="M18 19v-3"/><path d="M8 11V9"/><path d="M16 11V9"/><path d="M12 11V9"/><path d="M2 15h20"/><path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.8V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.8Z"/></svg>`
+
+// 硬盘图标
+const diskIcon = `<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"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>`
+</script>
+
+<template>
+  <div v-if="selectedPackage" class="card p-5">
+    <div class="flex items-center gap-2 mb-5">
+      <span 
+        class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+        :class="themeStore.isDark ? 'bg-white text-gray-900' : 'bg-gray-900 text-white'"
+      >{{ props.stepNumber }}</span>
+      <h2 
+        class="text-sm font-medium"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ t('instance.selector.configureResources') }}
+      </h2>
+      <span 
+        class="text-xs ml-auto"
+        :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+      >{{ t('instance.selector.adjustBasedOnPackage') }}</span>
+    </div>
+    
+    <!-- 剩余配额信息 -->
+    <div 
+      v-if="selectedPackage?.quotaInfo"
+      class="mb-5 p-3 rounded-lg"
+      :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-50'"
+    >
+      <div class="text-xs text-gray-500 mb-2">{{ t('instance.createPage.quotaInfo.remaining') }}</div>
+      <div 
+        class="text-sm font-mono flex items-center flex-wrap gap-x-4 gap-y-1"
+      >
+        <span class="flex items-center gap-1.5">
+          <span class="text-gray-500">{{ t('instance.createPage.quotaInfo.count') }}</span>
+          <span 
+            class="font-medium"
+            :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+          >
+            {{ selectedPackage.quotaInfo.remainingInstances === null ? '∞' : selectedPackage.quotaInfo.remainingInstances }}
+          </span>
+        </span>
+        <span v-if="selectedPackage.quotaInfo.remainingCpu !== null" class="text-gray-400">|</span>
+        <span v-if="selectedPackage.quotaInfo.remainingCpu !== null" class="flex items-center gap-1.5">
+          <span class="text-gray-500">CPU</span>
+          <span 
+            class="font-medium"
+            :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+          >
+            {{ `${selectedPackage.quotaInfo.remainingCpu}%` }}
+          </span>
+        </span>
+        <span v-if="selectedPackage.quotaInfo.remainingMemory !== null" class="text-gray-400">|</span>
+        <span v-if="selectedPackage.quotaInfo.remainingMemory !== null" class="flex items-center gap-1.5">
+          <span class="text-gray-500">{{ t('instance.createPage.quotaInfo.memory') }}</span>
+          <span 
+            class="font-medium"
+            :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'"
+          >
+            {{ formatMemory(selectedPackage.quotaInfo.remainingMemory) }}
+          </span>
+        </span>
+      </div>
+    </div>
+    
+    <!-- 资源配置滑块 -->
+    <div class="space-y-6">
+      <!-- CPU -->
+      <ResourceSlider
+        :model-value="cpu"
+        :min="cpuMin"
+        :max="cpuMax"
+        :step="cpuStep"
+        :label="t('instance.selector.cpu')"
+        :subtitle="`~${allowanceToCores(cpu)} ${t('instance.selector.cores')}`"
+        :format-value="formatCpu"
+        :icon="cpuIcon"
+        @update:model-value="emit('update:cpu', $event)"
+      />
+      
+      <!-- 内存 -->
+      <ResourceSlider
+        :model-value="memory"
+        :min="memoryMin"
+        :max="memoryMax"
+        :step="memoryStep"
+        :label="t('instance.selector.memory')"
+        :format-value="formatMemory"
+        :icon="memoryIcon"
+        @update:model-value="emit('update:memory', $event)"
+      />
+      
+      <!-- 硬盘 -->
+      <ResourceSlider
+        :model-value="disk"
+        :min="diskMin"
+        :max="diskMax"
+        :step="diskStep"
+        :label="t('instance.selector.disk')"
+        :format-value="formatDisk"
+        :icon="diskIcon"
+        @update:model-value="emit('update:disk', $event)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/SSHKeySelector.vue b/client/src/components/instance/SSHKeySelector.vue
new file mode 100644
index 0000000..d22f76c
--- /dev/null
+++ b/client/src/components/instance/SSHKeySelector.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import type { SshKey } from '@/types/api'
+
+const { t } = useI18n()
+
+interface Props {
+  sshKeys: SshKey[]
+  selectedKeyId: number | null
+  stepNumber?: number  // 步骤编号，默认 4
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 4,
+  title: undefined
+})
+const emit = defineEmits<{
+  'update:selectedKeyId': [value: number | null]
+}>()
+
+const themeStore = useThemeStore()
+
+// 分页相关
+const currentPage = ref<number>(1)
+const pageSize = 5
+
+const totalPages = computed(() => Math.ceil(props.sshKeys.length / pageSize))
+
+const paginatedKeys = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  const end = start + pageSize
+  return props.sshKeys.slice(start, end)
+})
+
+// 当 sshKeys 数据变化时，确保 currentPage 在有效范围内
+watch(() => props.sshKeys.length, () => {
+  if (currentPage.value > totalPages.value && totalPages.value > 0) {
+    currentPage.value = totalPages.value
+  } else if (totalPages.value === 0) {
+    currentPage.value = 1
+  }
+})
+
+function goToPrevPage(): void {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+function goToNextPage(): void {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
+}
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center gap-2 mb-4">
+      <span 
+        class="w-6 h-6 rounded-full text-sm font-bold flex items-center justify-center"
+        :class="themeStore.isDark ? 'bg-white text-gray-900' : 'bg-gray-900 text-white'"
+      >{{ props.stepNumber }}</span>
+      <h2 
+        class="text-sm font-medium"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ props.title || t('instance.selector.selectSshKey') }}
+      </h2>
+    </div>
+
+    <div v-if="sshKeys.length === 0" class="text-center py-8">
+      <div class="text-4xl mb-3">🔑</div>
+      <p class="text-sm text-gray-500 mb-2">
+        {{ t('instance.selector.noSshKeys') }}
+      </p>
+      <p class="text-2xs text-gray-600">
+        {{ t('instance.selector.addSshKeyHint') }}
+      </p>
+    </div>
+
+    <div v-else class="space-y-2">
+      <div
+        v-for="key in paginatedKeys"
+        :key="key.id"
+        :class="[
+          'flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-all',
+          selectedKeyId === key.id 
+            ? (themeStore.isDark ? 'border-white bg-gray-900' : 'border-gray-900 bg-gray-50')
+            : (themeStore.isDark ? 'border-gray-800 hover:border-gray-700' : 'border-gray-200 hover:border-gray-300')
+        ]"
+        @click="emit('update:selectedKeyId', key.id)"
+      >
+        <div class="w-8 h-8 rounded bg-themed-secondary flex items-center justify-center">
+          <svg class="w-4 h-4 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="text-sm text-themed-secondary">{{ key.name }}</div>
+          <div class="text-xs text-themed-faint font-mono truncate">{{ key.fingerprint }}</div>
+        </div>
+        <div 
+          v-if="selectedKeyId === key.id" 
+          class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0"
+          :class="themeStore.isDark ? 'bg-white' : 'bg-gray-900'"
+        >
+          <svg 
+            class="w-2.5 h-2.5" 
+            :class="themeStore.isDark ? 'text-gray-900' : 'text-white'"
+            fill="currentColor" viewBox="0 0 20 20"
+          >
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+        </div>
+      </div>
+
+      <!-- 分页控件 -->
+      <div v-if="totalPages > 1" class="flex items-center justify-between mt-3 pt-3 border-t border-themed">
+        <span class="text-xs text-themed-muted">
+          {{ t('instance.selector.pageInfo', { current: currentPage, total: totalPages, count: sshKeys.length }) }}
+        </span>
+        <div class="flex items-center gap-2">
+          <button 
+            class="btn-ghost btn-sm" 
+            :disabled="currentPage <= 1" 
+            @click="goToPrevPage"
+          >
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+            {{ t('instance.selector.prevPage') }}
+          </button>
+          <button 
+            class="btn-ghost btn-sm" 
+            :disabled="currentPage >= totalPages" 
+            @click="goToNextPage"
+          >
+            {{ t('instance.selector.nextPage') }}
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/TerminalAccessoryBar.vue b/client/src/components/instance/TerminalAccessoryBar.vue
new file mode 100644
index 0000000..da59ffe
--- /dev/null
+++ b/client/src/components/instance/TerminalAccessoryBar.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+/**
+ * 移动端终端快捷工具栏
+ * 
+ * 提供虚拟键盘缺失的控制键和常用符号，解决移动端终端操作痛点
+ */
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  connected: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'send', data: string): void
+  (e: 'paste'): void
+  (e: 'hideKeyboard'): void
+  (e: 'savedCommands'): void
+}>()
+
+const { t } = useI18n()
+
+// Ctrl 修饰键状态
+const ctrlActive = ref(false)
+
+// 控制字符映射
+const CTRL_CODES: Record<string, number> = {
+  'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5, 'f': 6, 'g': 7, 'h': 8,
+  'i': 9, 'j': 10, 'k': 11, 'l': 12, 'm': 13, 'n': 14, 'o': 15, 'p': 16,
+  'q': 17, 'r': 18, 's': 19, 't': 20, 'u': 21, 'v': 22, 'w': 23, 'x': 24,
+  'y': 25, 'z': 26
+}
+
+// 方向键 ANSI 转义序列
+const ARROW_CODES = {
+  up: '\x1b[A',
+  down: '\x1b[B',
+  right: '\x1b[C',
+  left: '\x1b[D'
+}
+
+// 发送数据
+function send(data: string) {
+  if (!props.connected) return
+  emit('send', data)
+}
+
+// 发送控制字符
+function sendControl(char: string) {
+  if (!props.connected) return
+  
+  if (char === 'esc') {
+    send('\x1b')
+  } else if (char === 'tab') {
+    send('\t')
+  } else if (char === 'ctrlc') {
+    send('\x03')
+  } else if (char === 'ctrld') {
+    send('\x04')
+  }
+}
+
+// 发送方向键
+function sendArrow(direction: 'up' | 'down' | 'left' | 'right') {
+  if (!props.connected) return
+  send(ARROW_CODES[direction])
+}
+
+// 发送符号
+function sendSymbol(symbol: string) {
+  if (!props.connected) return
+  send(symbol)
+}
+
+// 切换 Ctrl 修饰键状态
+function toggleCtrl() {
+  ctrlActive.value = !ctrlActive.value
+}
+
+// 监听键盘输入（当 Ctrl 激活时拦截）
+function handleKeyPress(event: KeyboardEvent) {
+  if (!ctrlActive.value || !props.connected) return
+  
+  const key = event.key.toLowerCase()
+  if (CTRL_CODES[key]) {
+    event.preventDefault()
+    send(String.fromCharCode(CTRL_CODES[key]))
+    ctrlActive.value = false
+  }
+}
+
+// 粘贴
+function handlePaste() {
+  if (!props.connected) return
+  emit('paste')
+}
+
+// 收起键盘
+function hideKeyboard() {
+  emit('hideKeyboard')
+}
+
+function openSavedCommands() {
+  emit('savedCommands')
+}
+
+// 按钮禁用状态
+const isDisabled = computed(() => !props.connected)
+
+// 暴露方法供父组件使用
+defineExpose({
+  handleKeyPress,
+  ctrlActive
+})
+</script>
+
+<template>
+  <div class="terminal-accessory-bar flex items-center h-11 bg-neutral-900/95 border-t border-neutral-800 backdrop-blur-sm">
+    <!-- 固定区域 - 核心控制键 -->
+    <div class="flex items-center gap-0.5 px-1.5 border-r border-neutral-700/50">
+      <!-- Esc -->
+      <button
+        class="accessory-btn"
+        :class="{ 'opacity-50': isDisabled }"
+        :disabled="isDisabled"
+        @click="sendControl('esc')"
+      >
+        <span class="text-[10px] font-medium">Esc</span>
+      </button>
+      
+      <!-- Tab -->
+      <button
+        class="accessory-btn"
+        :class="{ 'opacity-50': isDisabled }"
+        :disabled="isDisabled"
+        @click="sendControl('tab')"
+      >
+        <span class="text-[10px] font-medium">Tab</span>
+      </button>
+      
+      <!-- Ctrl (修饰键) -->
+      <button
+        class="accessory-btn"
+        :class="[
+          ctrlActive ? 'bg-blue-600 text-white' : '',
+          { 'opacity-50': isDisabled }
+        ]"
+        :disabled="isDisabled"
+        @click="toggleCtrl"
+      >
+        <span class="text-[10px] font-medium">Ctrl</span>
+      </button>
+      
+      <!-- Ctrl+C (救命键) -->
+      <button
+        class="accessory-btn bg-red-600/20 text-red-400 hover:bg-red-600/30"
+        :class="{ 'opacity-50': isDisabled }"
+        :disabled="isDisabled"
+        @click="sendControl('ctrlc')"
+      >
+        <span class="text-[10px] font-medium">⌃C</span>
+      </button>
+    </div>
+    
+    <!-- 滑动区域 -->
+    <div class="flex-1 overflow-x-auto scrollbar-hide">
+      <div class="flex items-center gap-0.5 px-1.5 min-w-max">
+        <!-- 高频符号 -->
+        <button
+          v-for="symbol in ['/', '-', '|', '~', ':']"
+          :key="symbol"
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          @click="sendSymbol(symbol)"
+        >
+          <span class="text-sm font-mono">{{ symbol }}</span>
+        </button>
+        
+        <!-- 分隔 -->
+        <div class="w-px h-5 bg-neutral-700/50 mx-1" />
+        
+        <!-- 方向键 -->
+        <button
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          @click="sendArrow('up')"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+          </svg>
+        </button>
+        <button
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          @click="sendArrow('down')"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        <button
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          @click="sendArrow('left')"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <button
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          @click="sendArrow('right')"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+        
+        <!-- 分隔 -->
+        <div class="w-px h-5 bg-neutral-700/50 mx-1" />
+        
+        <!-- Ctrl+D -->
+        <button
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          @click="sendControl('ctrld')"
+        >
+          <span class="text-[10px] font-medium">⌃D</span>
+        </button>
+        
+        <!-- 粘贴 -->
+        <button
+          class="accessory-btn"
+          :class="{ 'opacity-50': isDisabled }"
+          :disabled="isDisabled"
+          :title="t('terminal.paste')"
+          @click="handlePaste"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+          </svg>
+        </button>
+
+        <!-- 快捷命令 -->
+        <button
+          class="accessory-btn"
+          :title="t('terminal.savedCommands.open')"
+          @click="openSavedCommands"
+        >
+          <span class="text-[10px] font-medium">{{ t('terminal.savedCommands.short') }}</span>
+        </button>
+        
+        <!-- 收起键盘 -->
+        <button
+          class="accessory-btn"
+          :title="t('terminal.hideKeyboard')"
+          @click="hideKeyboard"
+        >
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5h14" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.accessory-btn {
+  @apply flex items-center justify-center min-w-[40px] h-8 px-2 
+         text-neutral-300 bg-neutral-800 rounded-md
+         active:bg-neutral-700 transition-colors
+         touch-manipulation select-none;
+}
+
+.accessory-btn:disabled {
+  @apply cursor-not-allowed;
+}
+
+/* 隐藏滚动条但保留滚动功能 */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/client/src/components/instance/TerminalContextMenu.vue b/client/src/components/instance/TerminalContextMenu.vue
new file mode 100644
index 0000000..9f2387c
--- /dev/null
+++ b/client/src/components/instance/TerminalContextMenu.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+    visible: boolean
+    x: number
+    y: number
+    hasSelection: boolean
+    canPaste: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'close'): void
+    (e: 'copy'): void
+    (e: 'paste'): void
+    (e: 'selectAll'): void
+    (e: 'clear'): void
+}>()
+
+const { t } = useI18n()
+const menuRef = ref<HTMLElement | null>(null)
+
+// 调整菜单位置，确保不超出屏幕
+const adjustedX = ref(0)
+const adjustedY = ref(0)
+
+watch([() => props.visible, () => props.x, () => props.y], async () => {
+    if (props.visible) {
+        await nextTick()
+        
+        const menu = menuRef.value
+        if (!menu) {
+            adjustedX.value = props.x
+            adjustedY.value = props.y
+            return
+        }
+        
+        const menuRect = menu.getBoundingClientRect()
+        const viewportWidth = window.innerWidth
+        const viewportHeight = window.innerHeight
+        
+        // 水平方向调整
+        if (props.x + menuRect.width > viewportWidth - 8) {
+            adjustedX.value = viewportWidth - menuRect.width - 8
+        } else {
+            adjustedX.value = props.x
+        }
+        
+        // 垂直方向调整
+        if (props.y + menuRect.height > viewportHeight - 8) {
+            adjustedY.value = viewportHeight - menuRect.height - 8
+        } else {
+            adjustedY.value = props.y
+        }
+    }
+}, { immediate: true })
+
+// 点击外部关闭菜单
+function handleClickOutside(e: MouseEvent) {
+    if (props.visible && menuRef.value && !menuRef.value.contains(e.target as Node)) {
+        emit('close')
+    }
+}
+
+// 按 Escape 关闭菜单
+function handleKeydown(e: KeyboardEvent) {
+    if (props.visible && e.key === 'Escape') {
+        emit('close')
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('mousedown', handleClickOutside)
+    document.removeEventListener('keydown', handleKeydown)
+})
+
+function handleAction(action: 'copy' | 'paste' | 'selectAll' | 'clear') {
+    switch (action) {
+        case 'copy':
+            emit('copy')
+            break
+        case 'paste':
+            emit('paste')
+            break
+        case 'selectAll':
+            emit('selectAll')
+            break
+        case 'clear':
+            emit('clear')
+            break
+    }
+    emit('close')
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="context-menu">
+      <div
+        v-if="visible"
+        ref="menuRef"
+        class="fixed z-[100] min-w-[160px] py-1.5 rounded-lg shadow-xl border select-none
+               bg-neutral-900 border-neutral-700"
+        :style="{ left: adjustedX + 'px', top: adjustedY + 'px' }"
+        @contextmenu.prevent
+      >
+        <!-- 复制 -->
+        <button
+          class="w-full flex items-center gap-3 px-3 py-2 text-sm text-left transition-colors"
+          :class="hasSelection 
+            ? 'text-neutral-200 hover:bg-neutral-800' 
+            : 'text-neutral-500 cursor-not-allowed'"
+          :disabled="!hasSelection"
+          @click="handleAction('copy')"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+          <span>{{ t('terminal.contextMenu.copy') }}</span>
+          <span class="ml-auto text-xs text-neutral-500">Ctrl+Shift+C</span>
+        </button>
+
+        <!-- 粘贴 -->
+        <button
+          class="w-full flex items-center gap-3 px-3 py-2 text-sm text-left transition-colors"
+          :class="canPaste 
+            ? 'text-neutral-200 hover:bg-neutral-800' 
+            : 'text-neutral-500 cursor-not-allowed'"
+          :disabled="!canPaste"
+          @click="handleAction('paste')"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+          </svg>
+          <span>{{ t('terminal.contextMenu.paste') }}</span>
+          <span class="ml-auto text-xs text-neutral-500">Ctrl+Shift+V</span>
+        </button>
+
+        <!-- 全选 -->
+        <button
+          class="w-full flex items-center gap-3 px-3 py-2 text-sm text-left text-neutral-200 hover:bg-neutral-800 transition-colors"
+          @click="handleAction('selectAll')"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+          </svg>
+          <span>{{ t('terminal.contextMenu.selectAll') }}</span>
+        </button>
+
+        <!-- 分割线 -->
+        <div class="my-1.5 border-t border-neutral-700" />
+
+        <!-- 清空 -->
+        <button
+          class="w-full flex items-center gap-3 px-3 py-2 text-sm text-left text-neutral-200 hover:bg-neutral-800 transition-colors"
+          @click="handleAction('clear')"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+          <span>{{ t('terminal.clear') }}</span>
+        </button>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.context-menu-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.context-menu-leave-active {
+  transition: all 0.075s ease-in;
+}
+
+.context-menu-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.context-menu-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>
diff --git a/client/src/components/instance/TerminalModal.vue b/client/src/components/instance/TerminalModal.vue
new file mode 100644
index 0000000..2cd6d8b
--- /dev/null
+++ b/client/src/components/instance/TerminalModal.vue
@@ -0,0 +1,1802 @@
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { SearchAddon } from '@xterm/addon-search'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { WebglAddon } from '@xterm/addon-webgl'
+import { SerializeAddon } from '@xterm/addon-serialize'
+import { ClipboardAddon } from '@xterm/addon-clipboard'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/stores/toast'
+import { useTerminalStore } from '@/stores/terminal'
+import type { CloudInitState, CloudInitStatusResponse } from '@/types/api'
+import TerminalSavedCommandsSidebar from '@/components/terminal/TerminalSavedCommandsSidebar.vue'
+import TerminalContextMenu from './TerminalContextMenu.vue'
+import TerminalAccessoryBar from './TerminalAccessoryBar.vue'
+import {
+    buildTerminalWebSocketUrl,
+    createTerminalRuntime,
+    disposeTerminalRuntime,
+    handleTerminalSocketPayload,
+    shouldRetryTerminalClose,
+    TERMINAL_MAX_RECONNECT_ATTEMPTS
+} from '@/lib/terminal-core'
+import api from '@/api'
+import '@xterm/xterm/css/xterm.css'
+
+const MAX_TABS = 3  // 与后端 TERMINAL_LIMITS.maxPerInstance 保持一致
+
+interface TerminalTab {
+    id: string
+    label: string
+    terminal: Terminal | null
+    fitAddon: FitAddon | null
+    searchAddon: SearchAddon | null
+    unicodeAddon: Unicode11Addon | null
+    webglAddon: WebglAddon | null
+    serializeAddon: SerializeAddon | null
+    clipboardAddon: ClipboardAddon | null
+    ws: WebSocket | null
+    status: 'disconnected' | 'connecting' | 'connected' | 'reconnecting' | 'error'
+    connectionMode: 'exec' | 'console' | null
+    error: string | null
+    container: HTMLElement | null
+    eventsBound: boolean
+    isWebGLEnabled: boolean
+    consoleWarningShown: boolean
+    connectAttempt: number
+}
+
+const props = defineProps<{
+    visible: boolean
+    instanceId: number | null
+    instanceName?: string
+    forceDisconnect?: boolean
+    allowManualCloudInitComplete?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void
+    (e: 'close'): void
+    (e: 'update:connected', value: boolean): void
+    (e: 'update:sessionActive', value: boolean): void
+    (e: 'update:forceDisconnect', value: boolean): void
+    (e: 'update:tabCount', value: number): void
+    (e: 'cloud-init-manual-complete'): void
+}>()
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const toast = useToast()
+const terminalStore = useTerminalStore()
+
+// 标签管理
+const tabs = ref<TerminalTab[]>([])
+const activeTabId = ref<string>('')
+
+// 终端容器引用映射
+const containerRefs = ref<Map<string, HTMLElement>>(new Map())
+
+// 搜索状态
+const searchInputRef = ref<HTMLInputElement | null>(null)
+const showSearch = ref(false)
+const searchText = ref('')
+
+// 全屏状态
+const isFullscreen = ref(false)
+
+// 帮助弹窗状态
+const showHelp = ref(false)
+
+// 设置弹窗状态
+const showSettings = ref(false)
+const showSavedCommandsMobile = ref(false)
+
+// 右键菜单状态
+const contextMenu = reactive({
+    visible: false,
+    x: 0,
+    y: 0
+})
+
+// 字体大小（从 store 读取，已持久化）
+const fontSize = computed(() => terminalStore.fontSize)
+// 动态计算字体大小选项，确保当前值始终在列表中
+const fontSizeOptions = computed(() => {
+    const baseOptions = [12, 14, 16, 18, 20]
+    const current = fontSize.value
+    // 如果当前值不在基础列表中，添加进去并排序
+    if (!baseOptions.includes(current)) {
+        return [...baseOptions, current].sort((a, b) => a - b)
+    }
+    return baseOptions
+})
+
+// 网络延迟检测
+const networkLatency = ref<Map<string, number>>(new Map())
+
+// 链接预览 tooltip
+const linkTooltip = reactive({
+    visible: false,
+    x: 0,
+    y: 0,
+    url: ''
+})
+
+// 触控手势状态
+const touchState = reactive({
+    initialDistance: 0,
+    initialFontSize: 14,
+    isZooming: false
+})
+
+// 移动端检测（用于禁用 WebGL 和显示快捷工具栏）
+// 综合检测：UA + 触摸能力 + 屏幕宽度
+const isMobileDevice = (() => {
+    const ua = navigator.userAgent
+    // 传统移动端 UA 检测
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
+        return true
+    }
+    // iPadOS 桌面模式检测：UA 显示为 Mac，但支持触摸
+    if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) {
+        return true
+    }
+    // 小屏幕 + 触摸能力 = 移动设备（覆盖 Windows 平板等情况）
+    if (navigator.maxTouchPoints > 0 && window.innerWidth <= 1024) {
+        return true
+    }
+    // 纯小屏幕检测（如开发者工具模拟移动端）
+    if (window.innerWidth <= 768) {
+        return true
+    }
+    return false
+})()
+
+// Cloud-init 状态检查
+const cloudInitStatus = ref<'idle' | 'checking' | 'not_ready' | 'ready' | 'skipped'>('idle')
+const cloudInitState = ref<CloudInitState | null>(null)
+const cloudInitManualCompleting = ref(false)
+
+const cloudInitPromptTitle = computed(() => {
+    return cloudInitState.value === 'unknown' || cloudInitState.value === 'agent_unavailable'
+        ? t('terminal.cloudInitUnknown')
+        : t('terminal.cloudInitInProgress')
+})
+
+const cloudInitPromptHint = computed(() => {
+    return cloudInitState.value === 'unknown' || cloudInitState.value === 'agent_unavailable'
+        ? t('terminal.cloudInitUnknownHint')
+        : t('terminal.cloudInitInProgressHint')
+})
+
+const showManualCloudInitComplete = computed(() => {
+    return props.allowManualCloudInitComplete !== false
+        && (cloudInitState.value === 'unknown' || cloudInitState.value === 'agent_unavailable')
+})
+const cloudInitChecking = ref(false)
+
+// 重连配置（更激进的保活策略）
+const reconnectAttempts = ref<Map<string, number>>(new Map())
+const reconnectTimers = ref<Map<string, ReturnType<typeof setTimeout>>>(new Map())
+
+// 获取当前活动的标签
+const activeTab = computed(() => tabs.value.find(t => t.id === activeTabId.value))
+
+// 是否有任何连接的标签
+const hasConnectedTab = computed(() => tabs.value.some(t => t.status === 'connected'))
+
+// 状态文本
+const statusText = computed(() => {
+    const tab = activeTab.value
+    if (!tab) return ''
+    switch (tab.status) {
+        case 'connecting': return t('terminal.connecting')
+        case 'connected': return t('terminal.connected')
+        case 'reconnecting': return t('terminal.reconnecting')
+        case 'disconnected': return t('terminal.disconnected')
+        case 'error': return tab.error || t('terminal.connectionFailed')
+        default: return ''
+    }
+})
+
+// 生成唯一标签 ID
+function generateTabId(): string {
+    return `tab_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+}
+
+// 创建新标签
+function createTab(): TerminalTab {
+    const id = generateTabId()
+    const tabNumber = tabs.value.length + 1
+    return {
+        id,
+        label: `${t('terminal.tab')} ${tabNumber}`,
+        terminal: null,
+        fitAddon: null,
+        searchAddon: null,
+        unicodeAddon: null,
+        webglAddon: null,
+        serializeAddon: null,
+        clipboardAddon: null,
+        ws: null,
+        status: 'disconnected',
+        connectionMode: null,
+        error: null,
+        container: null,
+        eventsBound: false,
+        isWebGLEnabled: false,
+        consoleWarningShown: false,
+        connectAttempt: 0
+    }
+}
+
+// 添加新标签
+function addTab() {
+    if (tabs.value.length >= MAX_TABS) return
+    const tab = createTab()
+    tabs.value.push(tab)
+    activeTabId.value = tab.id
+    emit('update:tabCount', tabs.value.length)
+    
+    // 等待 DOM 更新后初始化
+    nextTick(() => {
+        initTabTerminal(tab.id)
+    })
+}
+
+// 关闭标签
+function closeTab(tabId: string) {
+    const index = tabs.value.findIndex(t => t.id === tabId)
+    if (index === -1) return
+    
+    const tab = tabs.value[index]
+    
+    // 清理重连定时器
+    const timer = reconnectTimers.value.get(tabId)
+    if (timer) {
+        clearTimeout(timer)
+        reconnectTimers.value.delete(tabId)
+    }
+    reconnectAttempts.value.delete(tabId)
+    
+    // 清理资源（按顺序：WebSocket -> GPU Addons -> Terminal）
+    // 1. 先关闭 WebSocket 连接
+    if (tab.ws) {
+        tab.ws.close(1000, 'Tab closed')
+        tab.ws = null
+    }
+    // 2. 清理终端资源
+    disposeTerminalRuntime(tab)
+    
+    // 移除标签
+    tabs.value.splice(index, 1)
+    containerRefs.value.delete(tabId)
+    emit('update:tabCount', tabs.value.length)
+    
+    // 如果关闭的是当前标签，切换到其他标签
+    if (activeTabId.value === tabId && tabs.value.length > 0) {
+        activeTabId.value = tabs.value[Math.min(index, tabs.value.length - 1)].id
+        // 确保新激活的标签正确显示
+        nextTick(() => {
+            const newTab = activeTab.value
+            if (newTab?.terminal && newTab.fitAddon) {
+                newTab.fitAddon.fit()
+                newTab.terminal.refresh(0, newTab.terminal.rows - 1)
+                newTab.terminal.focus()
+            }
+        })
+    }
+    
+    // 如果没有标签了，关闭模态框
+    if (tabs.value.length === 0) {
+        closeModal()
+    }
+}
+
+// 切换标签
+function switchTab(tabId: string) {
+    if (activeTabId.value === tabId) return
+    activeTabId.value = tabId
+    
+    nextTick(() => {
+        const tab = activeTab.value
+        if (tab?.terminal && tab.fitAddon) {
+            tab.fitAddon.fit()
+            tab.terminal.refresh(0, tab.terminal.rows - 1)
+            tab.terminal.focus()
+        }
+    })
+}
+
+// 生成酷炫的 Incudal 欢迎信息
+function printWelcomeBanner(terminal: Terminal, instanceName: string) {
+    const banner = [
+        '',
+        '\x1b[1;38;5;39m  ◆\x1b[38;5;44m INCUDAL\x1b[0m',
+        '',
+        '\x1b[38;5;245m  ─────────────────────\x1b[0m',
+        `\x1b[38;5;250m  ${instanceName}\x1b[0m`,
+        '\x1b[38;5;245m  ─────────────────────\x1b[0m',
+        '',
+    ]
+    banner.forEach(line => terminal.writeln(line))
+    
+    // 移动端提示使用英文键盘
+    if (isMobileDevice) {
+        terminal.writeln(`\x1b[38;5;214m  ⚠ ${t('terminal.mobileKeyboardHint')}\x1b[0m`)
+        terminal.writeln('')
+    }
+}
+
+// 重连时的提示信息
+function printReconnectMessage(terminal: Terminal) {
+    terminal.write('\r\n\r\n\x1b[38;5;245m─── \x1b[38;5;214mReconnecting...\x1b[38;5;245m ───\x1b[0m\r\n\r\n')
+}
+
+function getConnectionModeLabel(mode: 'exec' | 'console' | null | undefined): string {
+    if (mode === 'console') return t('terminal.modeConsole')
+    if (mode === 'exec') return t('terminal.modeExec')
+    return t('terminal.modeUnknown')
+}
+
+function maybePrintConsoleFallbackWarning(tab: TerminalTab) {
+    if (!tab.terminal || tab.connectionMode !== 'console' || tab.consoleWarningShown) return
+
+    tab.terminal.writeln('')
+    tab.terminal.writeln(`\x1b[33m⚠ ${t('terminal.consoleFallback')}\x1b[0m`)
+    tab.terminal.writeln(`\x1b[90m${t('terminal.consoleFallbackHint')}\x1b[0m`)
+    tab.terminal.writeln('')
+    tab.consoleWarningShown = true
+}
+
+// 带重连提示的连接函数（用于用户主动重连或自动重连）
+function reconnectTab(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    // 如果已经在连接中，不重复操作
+    if (tab.status === 'connecting' || tab.status === 'reconnecting') return
+    
+    // 输出重连提示
+    if (tab.terminal) {
+        printReconnectMessage(tab.terminal)
+    }
+    
+    void connectTab(tabId)
+}
+
+// 初始化标签的终端
+function initTabTerminal(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    const container = containerRefs.value.get(tabId)
+    if (!container) return
+    
+    tab.container = container
+    
+    const runtime = createTerminalRuntime({
+        container,
+        fontSize: fontSize.value,
+        fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+        theme: terminalStore.currentTheme,
+        isMobileDevice,
+        enableWebgl: false,
+        onBell: () => terminalStore.playBell(),
+        onSelectionCopy: (selection) => {
+            if (terminalStore.autoCopyOnSelect) {
+                navigator.clipboard.writeText(selection).catch(() => {
+                    // ignore
+                })
+            }
+        },
+        onLinkHover: (event, uri) => {
+            if (terminalStore.linkPreview) {
+                linkTooltip.visible = true
+                linkTooltip.url = uri
+                linkTooltip.x = event.clientX + 10
+                linkTooltip.y = event.clientY + 10
+            }
+        },
+        onLinkLeave: () => {
+            linkTooltip.visible = false
+        }
+    })
+
+    tab.terminal = runtime.terminal
+    tab.fitAddon = runtime.fitAddon
+    tab.searchAddon = runtime.searchAddon
+    tab.unicodeAddon = runtime.unicodeAddon
+    tab.webglAddon = runtime.webglAddon
+    tab.serializeAddon = runtime.serializeAddon
+    tab.clipboardAddon = runtime.clipboardAddon
+    tab.isWebGLEnabled = runtime.isWebGLEnabled
+    
+    // 输出欢迎信息（首次创建时）
+    printWelcomeBanner(runtime.terminal, props.instanceName || `Instance #${props.instanceId}`)
+    
+    // 检查 Cloud-init 状态后再连接
+    checkCloudInitAndConnect(tabId)
+}
+
+// 检查 Cloud-init 状态并连接
+async function checkCloudInitAndConnect(tabId: string) {
+    if (!props.instanceId) return
+    
+    // 如果已经检查过且结果是 ready 或 skipped，直接连接
+    if (cloudInitStatus.value === 'ready' || cloudInitStatus.value === 'skipped') {
+        connectTab(tabId)
+        return
+    }
+    
+    cloudInitStatus.value = 'checking'
+    cloudInitChecking.value = true
+    
+    try {
+        const result = await api.instances.checkCloudInitStatus(props.instanceId) as CloudInitStatusResponse
+        cloudInitState.value = result.state
+        if (result.ready) {
+            cloudInitStatus.value = 'ready'
+            connectTab(tabId)
+        } else {
+            cloudInitStatus.value = 'not_ready'
+            // 终端显示提示信息
+            const tab = tabs.value.find(t => t.id === tabId)
+            if (tab?.terminal) {
+                tab.terminal.writeln('')
+                tab.terminal.writeln('\x1b[33m⚠ ' + cloudInitPromptTitle.value + '\x1b[0m')
+                tab.terminal.writeln('\x1b[90m' + cloudInitPromptHint.value + '\x1b[0m')
+                tab.terminal.writeln('')
+            }
+        }
+    } catch (err) {
+        console.error('[CloudInit] Check failed:', err)
+        cloudInitState.value = 'unknown'
+        cloudInitStatus.value = 'not_ready'
+    } finally {
+        cloudInitChecking.value = false
+    }
+}
+
+// 重新检查 Cloud-init 状态
+async function retryCloudInitCheck() {
+    if (!activeTabId.value) return
+    await checkCloudInitAndConnect(activeTabId.value)
+}
+
+// 跳过 Cloud-init 检查并连接
+function skipCloudInitAndConnect() {
+    if (!activeTabId.value) return
+    cloudInitStatus.value = 'skipped'
+    connectTab(activeTabId.value)
+}
+
+async function manualCompleteCloudInitAndConnect() {
+    if (!props.instanceId || !activeTabId.value) return
+
+    cloudInitManualCompleting.value = true
+    try {
+        const result = await api.instances.manualCompleteCloudInit(props.instanceId) as CloudInitStatusResponse
+        cloudInitState.value = result.state
+        cloudInitStatus.value = 'ready'
+        emit('cloud-init-manual-complete')
+        toast.success(t('terminal.cloudInitManualCompleteSuccess'))
+        connectTab(activeTabId.value)
+    } catch (err: any) {
+        toast.error(err?.message || t('common.operationFailed'))
+    } finally {
+        cloudInitManualCompleting.value = false
+    }
+}
+
+// 连接标签到终端服务器
+async function connectTab(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab || !props.instanceId) return
+    
+    const token = authStore.token
+    if (!token) {
+        tab.status = 'error'
+        tab.error = 'Authentication required'
+        return
+    }
+    
+    if (tab.ws && (tab.ws.readyState === WebSocket.OPEN || tab.ws.readyState === WebSocket.CONNECTING)) {
+        return
+    }
+    
+    tab.status = 'connecting'
+    tab.error = null
+    tab.connectAttempt += 1
+    const connectAttempt = tab.connectAttempt
+    
+    try {
+        const ticketResponse = await api.instances.createTerminalTicket(props.instanceId)
+        const currentTab = tabs.value.find(t => t.id === tabId)
+        if (!currentTab || currentTab.connectAttempt !== connectAttempt) {
+            return
+        }
+
+        const wsUrl = buildTerminalWebSocketUrl(props.instanceId, ticketResponse.ticket)
+        const ws = new WebSocket(wsUrl)
+        // 使用 arraybuffer 确保二进制数据按顺序处理（避免 Blob 异步导致的乱序）
+        ws.binaryType = 'arraybuffer'
+        currentTab.ws = ws
+        
+        ws.onopen = () => {
+            console.log(`[Terminal Tab ${tabId}] WebSocket connected`)
+        }
+        
+        ws.onmessage = (event) => {
+            handleTerminalSocketPayload(event.data, () => tab.terminal, (message) => {
+                handleControlMessage(tabId, message)
+            })
+        }
+        
+        ws.onerror = () => {
+            currentTab.error = 'Connection error'
+        }
+        
+        ws.onclose = (event) => {
+            // 只有当这个 ws 仍然是当前标签的 ws 时才更新状态，避免快速重连时的竞态条件
+            if (currentTab.ws !== ws) return
+
+            console.log(`[Terminal Tab ${tabId}] WebSocket closed:`, event.code)
+
+            // 意外断开时自动重连
+            if (shouldRetryTerminalClose(event.code) && (currentTab.status === 'connected' || currentTab.status === 'connecting' || currentTab.status === 'reconnecting')) {
+                const attempts = reconnectAttempts.value.get(tabId) || 0
+                if (attempts < TERMINAL_MAX_RECONNECT_ATTEMPTS) {
+                    reconnectAttempts.value.set(tabId, attempts + 1)
+                    currentTab.status = 'reconnecting'
+                    // 线性退避：1秒, 3秒, 5秒... 最多 15秒
+                    const delay = Math.min(1000 + attempts * 2000, 15000)
+                    console.log(`[Terminal Tab ${tabId}] Auto reconnecting in ${delay}ms (attempt ${attempts + 1}/${TERMINAL_MAX_RECONNECT_ATTEMPTS})`)
+                    const existingTimer = reconnectTimers.value.get(tabId)
+                    if (existingTimer) {
+                        clearTimeout(existingTimer)
+                    }
+                    const timer = setTimeout(() => {
+                        reconnectTimers.value.delete(tabId)
+                        if (currentTab.terminal) {
+                            printReconnectMessage(currentTab.terminal)
+                        }
+                        void connectTab(tabId)
+                    }, delay)
+                    reconnectTimers.value.set(tabId, timer)
+                } else {
+                    currentTab.status = 'error'
+                    currentTab.error = 'Connection lost'
+                    reconnectAttempts.value.delete(tabId)
+                }
+            } else {
+                currentTab.status = 'disconnected'
+            }
+        }
+        
+        // 绑定终端输入
+        if (currentTab.terminal && !currentTab.eventsBound) {
+            currentTab.eventsBound = true
+            
+            currentTab.terminal.onData((data) => {
+                if (currentTab.ws && currentTab.ws.readyState === WebSocket.OPEN) {
+                    try {
+                        currentTab.ws.send(data)
+                    } catch {
+                        // WebSocket may be closed during send, ignore
+                    }
+                }
+            })
+            
+            currentTab.terminal.onResize(({ cols, rows }) => {
+                sendResize(tabId, cols, rows)
+            })
+        }
+    } catch (err) {
+        const currentTab = tabs.value.find(t => t.id === tabId)
+        if (!currentTab || currentTab.connectAttempt !== connectAttempt) {
+            return
+        }
+
+        currentTab.status = 'error'
+        currentTab.error = err instanceof Error ? err.message : 'Failed to connect'
+    }
+}
+
+// 处理控制消息
+function handleControlMessage(tabId: string, message: { type: string; sessionId?: string; message?: string; reason?: string; mode?: 'exec' | 'console' }) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    switch (message.type) {
+        case 'connected':
+            tab.status = 'connected'
+            tab.error = null
+            if (message.mode) {
+                tab.connectionMode = message.mode
+                if (message.mode !== 'console') {
+                    tab.consoleWarningShown = false
+                }
+            }
+            // 连接成功，重置重连计数
+            reconnectAttempts.value.delete(tabId)
+            if (tab.terminal && tab.fitAddon) {
+                tab.fitAddon.fit()
+                sendResize(tabId, tab.terminal.cols, tab.terminal.rows)
+            }
+            maybePrintConsoleFallbackWarning(tab)
+            break
+        case 'reconnecting':
+            tab.status = 'reconnecting'
+            tab.error = message.reason || null
+            if (message.mode) {
+                tab.connectionMode = message.mode
+            }
+            break
+        case 'disconnected':
+            tab.status = 'disconnected'
+            tab.error = message.reason || null
+            break
+        case 'error':
+            tab.status = 'error'
+            tab.error = message.message || 'Unknown error'
+            if (tab.terminal) {
+                tab.terminal.write(`\r\n\x1b[31mError: ${message.message}\x1b[0m\r\n`)
+            }
+            break
+    }
+}
+
+// 发送调整大小命令
+function sendResize(tabId: string, cols: number, rows: number) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (tab?.ws && tab.ws.readyState === WebSocket.OPEN) {
+        try {
+            tab.ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+        } catch {
+            // WebSocket may be closed during send, ignore
+        }
+    }
+}
+
+// 关闭模态框
+function closeModal() {
+    showSavedCommandsMobile.value = false
+    emit('update:visible', false)
+    emit('close')
+    emit('update:connected', hasConnectedTab.value)
+    emit('update:sessionActive', tabs.value.length > 0)
+}
+
+// 断开所有连接
+function disconnectAll() {
+    showSavedCommandsMobile.value = false
+    // 清理所有重连定时器
+    reconnectTimers.value.forEach(timer => clearTimeout(timer))
+    reconnectTimers.value.clear()
+    reconnectAttempts.value.clear()
+    
+    tabs.value.forEach(tab => {
+        if (tab.ws) {
+            tab.ws.close(1000, 'User disconnect')
+            tab.ws = null
+        }
+        disposeTerminalRuntime(tab)
+    })
+    tabs.value = []
+    containerRefs.value.clear()
+    
+    // 重置 Cloud-init 状态
+    cloudInitStatus.value = 'idle'
+    cloudInitState.value = null
+    cloudInitChecking.value = false
+    cloudInitManualCompleting.value = false
+    
+    emit('update:tabCount', 0)
+}
+
+// 切换全屏
+function toggleFullscreen() {
+    isFullscreen.value = !isFullscreen.value
+    setTimeout(() => {
+        const tab = activeTab.value
+        if (tab?.fitAddon) {
+            tab.fitAddon.fit()
+            requestAnimationFrame(() => tab.fitAddon?.fit())
+        }
+    }, 50)
+}
+
+// 处理窗口大小变化
+function handleResize() {
+    if (props.visible) {
+        const tab = activeTab.value
+        if (tab?.fitAddon) {
+            tab.fitAddon.fit()
+        }
+    }
+}
+
+// 设置字体大小
+function updateFontSize(size: number) {
+    terminalStore.setFontSize(size)
+    tabs.value.forEach(tab => {
+        if (tab.terminal) {
+            tab.terminal.options.fontSize = size
+            tab.fitAddon?.fit()
+        }
+    })
+}
+
+// 切换终端主题
+function handleThemeChange(event: Event) {
+    const value = (event.target as HTMLSelectElement).value as 'dark' | 'light' | 'highContrast'
+    terminalStore.setTheme(value)
+    // 更新所有终端的主题
+    tabs.value.forEach(tab => {
+        if (tab.terminal) {
+            tab.terminal.options.theme = terminalStore.currentTheme
+        }
+    })
+}
+
+// 清空当前终端
+function clearTerminal() {
+    activeTab.value?.terminal?.clear()
+}
+
+// 聚焦当前终端
+function focusTerminal() {
+    activeTab.value?.terminal?.focus()
+}
+
+// 搜索功能
+function handleSearch() {
+    if (searchText.value && activeTab.value?.searchAddon) {
+        activeTab.value.searchAddon.findNext(searchText.value)
+    }
+}
+
+function handleSearchPrevious() {
+    if (searchText.value && activeTab.value?.searchAddon) {
+        activeTab.value.searchAddon.findPrevious(searchText.value)
+    }
+}
+
+function closeSearch() {
+    showSearch.value = false
+    searchText.value = ''
+    focusTerminal()
+}
+
+// 右键菜单
+function handleContextMenu(e: MouseEvent) {
+    e.preventDefault()
+    contextMenu.x = e.clientX
+    contextMenu.y = e.clientY
+    contextMenu.visible = true
+}
+
+function closeContextMenu() {
+    contextMenu.visible = false
+}
+
+// 复制粘贴
+async function handleCopy() {
+    const tab = activeTab.value
+    if (!tab?.terminal) return
+    
+    const selection = tab.terminal.getSelection()
+    if (!selection) return
+    
+    try {
+        await navigator.clipboard.writeText(selection)
+    } catch {
+        // 回退方案
+        const textarea = document.createElement('textarea')
+        textarea.value = selection
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textarea)
+    }
+}
+
+async function handlePaste() {
+    const tab = activeTab.value
+    if (!tab?.ws || tab.ws.readyState !== WebSocket.OPEN) return
+    
+    try {
+        const text = await navigator.clipboard.readText()
+        if (text) {
+            try {
+                tab.ws.send(text)
+            } catch {
+                // WebSocket may be closed during send, ignore
+            }
+        }
+    } catch {
+        // Clipboard API may not be available, ignore
+    }
+}
+
+function sendToActiveTerminal(data: string): boolean {
+    const tab = activeTab.value
+    if (!tab?.ws || tab.ws.readyState !== WebSocket.OPEN) return false
+
+    try {
+        tab.ws.send(data)
+        return true
+    } catch {
+        return false
+    }
+}
+
+// 移动端快捷工具栏 - 发送数据
+function handleAccessorySend(data: string) {
+    sendToActiveTerminal(data)
+}
+
+function executeSavedCommand(command: string) {
+    const payload = command.endsWith('\n') || command.endsWith('\r')
+        ? command
+        : `${command}\r`
+    sendToActiveTerminal(payload)
+}
+
+// 移动端快捷工具栏 - 收起键盘
+function handleHideKeyboard() {
+    // 尝试收起虚拟键盘
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur()
+    }
+    // 重新聚焦终端（但不弹出键盘）
+    setTimeout(() => {
+        activeTab.value?.terminal?.focus()
+    }, 100)
+}
+
+// 全选终端内容
+function handleSelectAll() {
+    activeTab.value?.terminal?.selectAll()
+}
+
+// 去除 ANSI 转义序列（颜色控制码等）
+// 使用 RegExp 构造函数避免 ESLint 报错
+function stripAnsiSequences(text: string): string {
+    const ansiRegex = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*[a-zA-Z]', 'g')
+    return text.replace(ansiRegex, '')
+}
+
+// 导出终端日志
+function exportTerminalLog() {
+    const tab = activeTab.value
+    if (!tab?.serializeAddon) return
+    
+    try {
+        const raw = tab.serializeAddon.serialize()
+        if (!raw) return
+        
+        // 去除 ANSI 转义序列，避免在记事本中显示为方框
+        const content = stripAnsiSequences(raw)
+        
+        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `terminal-${props.instanceName || 'instance'}-${Date.now()}.log`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+    } catch (err) {
+        console.error('[Terminal] Failed to export log:', err)
+    }
+}
+
+// 增大字体
+function increaseFontSize() {
+    const newSize = Math.min(fontSize.value + 2, 32)
+    updateFontSize(newSize)
+}
+
+// 减小字体
+function decreaseFontSize() {
+    const newSize = Math.max(fontSize.value - 2, 8)
+    updateFontSize(newSize)
+}
+
+// 重置字体大小
+function resetFontSize() {
+    updateFontSize(14)
+}
+
+// 触控手势处理
+function handleTouchStart(event: TouchEvent) {
+    if (!terminalStore.touchEnabled) return
+    if (event.touches.length === 2) {
+        event.preventDefault()
+        touchState.isZooming = true
+        touchState.initialDistance = getTouchDistance(event.touches)
+        touchState.initialFontSize = terminalStore.fontSize
+    }
+}
+
+function handleTouchMove(event: TouchEvent) {
+    if (!terminalStore.touchEnabled || !touchState.isZooming) return
+    if (event.touches.length === 2) {
+        event.preventDefault()
+        const currentDistance = getTouchDistance(event.touches)
+        // 防止除以零
+        if (touchState.initialDistance <= 0) return
+        const scale = currentDistance / touchState.initialDistance
+        const newSize = Math.round(touchState.initialFontSize * scale)
+        const clampedSize = Math.max(8, Math.min(32, newSize))
+        if (clampedSize !== terminalStore.fontSize) {
+            updateFontSize(clampedSize)
+        }
+    }
+}
+
+function handleTouchEnd() {
+    touchState.isZooming = false
+}
+
+function getTouchDistance(touches: TouchList): number {
+    const dx = touches[0].clientX - touches[1].clientX
+    const dy = touches[0].clientY - touches[1].clientY
+    return Math.sqrt(dx * dx + dy * dy)
+}
+
+// 键盘快捷键
+function handleKeydown(e: KeyboardEvent) {
+    if (!props.visible) return
+    
+    // Ctrl+Shift+F 打开搜索
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'f') {
+        e.preventDefault()
+        showSearch.value = true
+        nextTick(() => searchInputRef.value?.focus())
+        return
+    }
+    
+    // Ctrl+Shift+C 复制
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'c') {
+        e.preventDefault()
+        handleCopy()
+        return
+    }
+    
+    // Ctrl+Shift+V 粘贴
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'v') {
+        e.preventDefault()
+        handlePaste()
+        return
+    }
+    
+    // Ctrl+Shift+T 新建标签
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 't') {
+        e.preventDefault()
+        if (tabs.value.length < MAX_TABS) {
+            addTab()
+        }
+        return
+    }
+    
+    // Ctrl+Shift+W 关闭当前标签
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'w') {
+        e.preventDefault()
+        if (activeTabId.value) {
+            closeTab(activeTabId.value)
+        }
+        return
+    }
+    
+    // Ctrl+= 或 Ctrl++ 增大字体
+    if (e.ctrlKey && (e.key === '=' || e.key === '+')) {
+        e.preventDefault()
+        increaseFontSize()
+        return
+    }
+    
+    // Ctrl+- 减小字体
+    if (e.ctrlKey && e.key === '-') {
+        e.preventDefault()
+        decreaseFontSize()
+        return
+    }
+    
+    // Ctrl+0 重置字体
+    if (e.ctrlKey && e.key === '0') {
+        e.preventDefault()
+        resetFontSize()
+        return
+    }
+    
+    // Ctrl+Shift+S 导出日志
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 's') {
+        e.preventDefault()
+        exportTerminalLog()
+        return
+    }
+    
+    // Escape 退出
+    if (e.key === 'Escape') {
+        if (contextMenu.visible) {
+            closeContextMenu()
+        } else if (showSearch.value) {
+            closeSearch()
+        } else if (isFullscreen.value) {
+            isFullscreen.value = false
+            setTimeout(() => activeTab.value?.fitAddon?.fit(), 50)
+        } else {
+            closeModal()
+        }
+    }
+}
+
+// 设置容器引用
+function setContainerRef(tabId: string, el: HTMLElement | null) {
+    if (el) {
+        containerRefs.value.set(tabId, el)
+    }
+}
+
+// 监听 visible 变化
+watch(() => props.visible, async (visible) => {
+    if (visible && props.instanceId) {
+        // 重置 Cloud-init 状态（每次打开模态框时重新检查）
+        cloudInitStatus.value = 'idle'
+        cloudInitState.value = null
+        cloudInitChecking.value = false
+        cloudInitManualCompleting.value = false
+        
+        await nextTick()
+        
+        // 如果没有标签，创建第一个
+        if (tabs.value.length === 0) {
+            addTab()
+        } else {
+            // 刷新所有标签并自动重连断开的连接
+            tabs.value.forEach(tab => {
+                if (tab.terminal && tab.fitAddon) {
+                    tab.fitAddon.fit()
+                    tab.terminal.refresh(0, tab.terminal.rows - 1)
+                }
+                
+                // 自动重连断开的连接
+                if (tab.status === 'disconnected' || tab.status === 'error') {
+                    reconnectTab(tab.id)
+                }
+            })
+            
+            // 聚焦当前标签
+            setTimeout(() => {
+                activeTab.value?.terminal?.focus()
+            }, 50)
+        }
+    }
+}, { immediate: true })
+
+// 监听连接状态变化
+watch(() => hasConnectedTab.value, (connected) => {
+    emit('update:connected', connected)
+})
+
+// 监听强制断开
+watch(() => props.forceDisconnect, (force) => {
+    if (force) {
+        disconnectAll()
+        emit('update:forceDisconnect', false)
+    }
+})
+
+onMounted(() => {
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('keydown', handleKeydown)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    
+    // 移动端：监听 visualViewport 变化（软键盘弹出/收起）
+    if (isMobileDevice && window.visualViewport) {
+        window.visualViewport.addEventListener('resize', handleViewportResize)
+    }
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    window.removeEventListener('keydown', handleKeydown)
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    
+    // 移动端：移除 visualViewport 监听
+    if (isMobileDevice && window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', handleViewportResize)
+    }
+    
+    disconnectAll()
+})
+
+// 移动端 visualViewport 变化处理（软键盘弹出/收起）
+function handleViewportResize() {
+    if (props.visible) {
+        // 延迟执行 fit，等待视口稳定
+        setTimeout(() => {
+            const tab = activeTab.value
+            if (tab?.fitAddon && tab.terminal) {
+                tab.fitAddon.fit()
+                // 刷新终端显示，确保光标正确渲染
+                tab.terminal.refresh(0, tab.terminal.rows - 1)
+            }
+        }, 100)
+    }
+}
+
+// 页面可见性变化时自动重连
+function handleVisibilityChange() {
+    if (document.visibilityState === 'visible' && props.visible && props.instanceId) {
+        // 用户回来了，自动重连断开的连接
+        tabs.value.forEach(tab => {
+            if (tab.status === 'disconnected' || tab.status === 'error') {
+                console.log(`[Terminal Tab ${tab.id}] Page visible, auto reconnecting...`)
+                reconnectTab(tab.id)
+            }
+        })
+    }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-show="visible"
+      class="fixed inset-0 z-50 flex items-center justify-center"
+      :class="isFullscreen ? '' : 'p-4'"
+    >
+      <!-- 背景遮罩 -->
+      <div
+        class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
+        :class="visible ? 'opacity-100' : 'opacity-0'"
+        @click="closeModal"
+      />
+
+      <!-- 终端容器 -->
+      <div
+        class="terminal-window group/terminal-workspace relative flex flex-col overflow-hidden"
+        :class="[
+          isFullscreen ? 'w-full h-full' : 'w-full max-w-7xl h-[85vh] rounded-lg',
+          'bg-[#0a0a0a] border border-neutral-800 shadow-2xl'
+        ]"
+      >
+        <!-- 标题栏 -->
+        <div class="flex items-center justify-between h-10 px-3 bg-[#0a0a0a] border-b border-neutral-800">
+          <!-- 标签栏 -->
+          <div class="flex items-center gap-1 overflow-x-auto flex-1 min-w-0">
+            <button
+              v-for="tab in tabs"
+              :key="tab.id"
+              class="group flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap"
+              :class="activeTabId === tab.id 
+                ? 'bg-neutral-800 text-white' 
+                : 'text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800/50'"
+              @click="switchTab(tab.id)"
+            >
+              <!-- 状态指示点 -->
+              <span
+                class="w-1.5 h-1.5 rounded-full flex-shrink-0"
+                :class="{
+                  'bg-emerald-400': tab.status === 'connected',
+                  'bg-yellow-400 animate-pulse': tab.status === 'connecting' || tab.status === 'reconnecting',
+                  'bg-red-400': tab.status === 'error',
+                  'bg-orange-400': tab.status === 'disconnected'
+                }"
+              />
+              <span class="truncate max-w-[80px]">{{ tab.label }}</span>
+              <!-- 关闭按钮 -->
+              <button
+                v-if="tabs.length > 1"
+                class="ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-neutral-700 transition-opacity"
+                @click.stop="closeTab(tab.id)"
+              >
+                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </button>
+            
+            <!-- 新建标签按钮 -->
+            <button
+              v-if="tabs.length < MAX_TABS"
+              class="flex items-center justify-center w-6 h-6 text-neutral-500 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('terminal.newTab')"
+              @click="addTab"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 右侧工具按钮 -->
+          <div class="flex items-center gap-1.5 ml-2">
+            <!-- 状态 -->
+            <span
+              v-if="activeTab"
+              class="hidden sm:inline-flex items-center gap-1.5 px-2 py-0.5 text-xs rounded-full"
+              :class="{
+                'bg-emerald-500/10 text-emerald-400': activeTab.status === 'connected',
+                'bg-yellow-500/10 text-yellow-400': activeTab.status === 'connecting' || activeTab.status === 'reconnecting',
+                'bg-red-500/10 text-red-400': activeTab.status === 'error',
+                'bg-orange-500/10 text-orange-400 border border-orange-500/30': activeTab.status === 'disconnected'
+              }"
+            >
+              <!-- 断开状态图标 -->
+              <svg v-if="activeTab.status === 'disconnected'" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3" />
+              </svg>
+              {{ statusText }}
+            </span>
+            <span
+              v-if="activeTab?.connectionMode"
+              class="hidden sm:inline-flex items-center px-2 py-0.5 text-xs rounded-full bg-neutral-800 text-neutral-300"
+            >
+              {{ getConnectionModeLabel(activeTab.connectionMode) }}
+            </span>
+
+            <!-- 字体大小 -->
+            <select
+              :value="fontSize"
+              class="h-6 px-1.5 text-xs bg-neutral-900 border border-neutral-700 rounded text-neutral-300 cursor-pointer hover:border-neutral-500 transition-colors"
+              @change="updateFontSize(Number(($event.target as HTMLSelectElement).value))"
+            >
+              <option v-for="size in fontSizeOptions" :key="size" :value="size">{{ size }}px</option>
+            </select>
+
+            <!-- 清空 -->
+            <button
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('terminal.clear')"
+              @click="clearTerminal"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+
+            <!-- 导出日志 -->
+            <button
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('terminal.exportLog')"
+              @click="exportTerminalLog"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+            </button>
+
+            <!-- 设置 -->
+            <button
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('terminal.settings')"
+              @click="showSettings = true"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
+
+            <!-- 帮助 -->
+            <button
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('terminal.help')"
+              @click="showHelp = true"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+
+            <!-- 全屏 -->
+            <button
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="isFullscreen ? t('terminal.exitFullscreen') : t('terminal.fullscreen')"
+              @click="toggleFullscreen"
+            >
+              <svg v-if="!isFullscreen" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+              </svg>
+              <svg v-else class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
+              </svg>
+            </button>
+
+            <!-- 重连 -->
+            <button
+              v-if="activeTab && (activeTab.status === 'disconnected' || activeTab.status === 'error')"
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('terminal.reconnect')"
+              @click="reconnectTab(activeTabId)"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </button>
+
+            <!-- 关闭 -->
+            <button
+              class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+              :title="t('common.close')"
+              @click="closeModal"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- 终端区域 -->
+        <div class="terminal-body group/terminal-workspace flex flex-1 overflow-hidden">
+          <div class="relative min-w-0 flex-1 overflow-hidden">
+            <!-- 搜索框 -->
+            <Transition name="fade">
+              <div
+                v-if="showSearch"
+                class="absolute top-3 right-3 z-10 flex items-center gap-1.5 px-3 py-2 bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl"
+              >
+                <input
+                  ref="searchInputRef"
+                  v-model="searchText"
+                  type="text"
+                  class="w-44 px-2 py-1 text-sm bg-neutral-800 border border-neutral-600 rounded text-white placeholder-neutral-500 focus:border-neutral-400 focus:outline-none"
+                  :placeholder="t('terminal.searchPlaceholder')"
+                  @keydown.enter.exact="handleSearch"
+                  @keydown.shift.enter.exact="handleSearchPrevious"
+                  @keydown.escape="closeSearch"
+                >
+                <button class="p-1.5 text-neutral-400 hover:text-white rounded transition-colors" @click="handleSearchPrevious">
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg>
+                </button>
+                <button class="p-1.5 text-neutral-400 hover:text-white rounded transition-colors" @click="handleSearch">
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                </button>
+                <button class="p-1.5 text-neutral-400 hover:text-white rounded transition-colors" @click="closeSearch">
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+              </div>
+            </Transition>
+
+            <!-- 终端容器（每个标签一个） -->
+            <div
+              v-for="tab in tabs"
+              :key="tab.id"
+              :ref="(el) => setContainerRef(tab.id, el as HTMLElement)"
+              class="terminal-container"
+              :class="activeTabId === tab.id ? 'visible' : 'invisible absolute'"
+              @contextmenu="handleContextMenu"
+              @touchstart="handleTouchStart"
+              @touchmove="handleTouchMove"
+              @touchend="handleTouchEnd"
+            />
+
+            <!-- 连接中遮罩 -->
+            <Transition name="fade">
+              <div
+                v-if="activeTab && (activeTab.status === 'connecting' || activeTab.status === 'reconnecting')"
+                class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+              >
+                <div class="flex flex-col items-center gap-4">
+                  <div class="w-8 h-8 border-2 border-neutral-600 border-t-white rounded-full animate-spin" />
+                  <span class="text-sm text-neutral-400">{{ statusText }}</span>
+                </div>
+              </div>
+            </Transition>
+
+            <!-- Cloud-init 检查中遮罩 -->
+            <Transition name="fade">
+              <div
+                v-if="cloudInitStatus === 'checking'"
+                class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+              >
+                <div class="flex flex-col items-center gap-4">
+                  <div class="w-8 h-8 border-2 border-neutral-600 border-t-white rounded-full animate-spin" />
+                  <span class="text-sm text-neutral-400">{{ t('terminal.cloudInitChecking') }}</span>
+                </div>
+              </div>
+            </Transition>
+
+            <!-- Cloud-init 未完成提示 -->
+            <Transition name="fade">
+              <div
+                v-if="cloudInitStatus === 'not_ready'"
+                class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+              >
+                <div class="flex flex-col items-center gap-4 text-center px-6 max-w-md">
+                  <div class="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                    <svg class="w-6 h-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p class="text-white font-medium">{{ cloudInitPromptTitle }}</p>
+                    <p class="text-sm text-neutral-400 mt-1">{{ cloudInitPromptHint }}</p>
+                  </div>
+                  <div class="flex flex-wrap justify-center gap-3">
+                    <button
+                      class="px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-neutral-200 transition-colors"
+                      :disabled="cloudInitChecking || cloudInitManualCompleting"
+                      @click="retryCloudInitCheck"
+                    >
+                      <span v-if="cloudInitChecking" class="flex items-center gap-2">
+                        <div class="w-3 h-3 border border-black border-t-transparent rounded-full animate-spin" />
+                        {{ t('terminal.cloudInitChecking') }}
+                      </span>
+                      <span v-else>{{ t('terminal.cloudInitRetry') }}</span>
+                    </button>
+                    <button
+                      class="px-4 py-2 text-sm font-medium bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 transition-colors"
+                      :disabled="cloudInitManualCompleting"
+                      @click="skipCloudInitAndConnect"
+                    >
+                      {{ t('terminal.cloudInitSkip') }}
+                    </button>
+                    <button
+                      v-if="showManualCloudInitComplete"
+                      class="px-4 py-2 text-sm font-medium bg-amber-700 text-white rounded-lg hover:bg-amber-600 transition-colors disabled:opacity-60"
+                      :disabled="cloudInitChecking || cloudInitManualCompleting"
+                      @click="manualCompleteCloudInitAndConnect"
+                    >
+                      <span v-if="cloudInitManualCompleting" class="flex items-center gap-2">
+                        <div class="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin" />
+                        {{ t('terminal.cloudInitManualComplete') }}
+                      </span>
+                      <span v-else>{{ t('terminal.cloudInitManualComplete') }}</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </Transition>
+
+            <!-- 错误提示 -->
+            <Transition name="fade">
+              <div
+                v-if="activeTab && activeTab.status === 'error'"
+                class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+              >
+                <div class="flex flex-col items-center gap-4 text-center px-6">
+                  <div class="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center">
+                    <svg class="w-6 h-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p class="text-white font-medium">{{ t('terminal.connectionFailed') }}</p>
+                    <p class="text-sm text-neutral-400 mt-1">{{ activeTab.error }}</p>
+                  </div>
+                  <button
+                    class="px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-neutral-200 transition-colors"
+                    @click="reconnectTab(activeTabId)"
+                  >
+                    {{ t('terminal.reconnect') }}
+                  </button>
+                </div>
+              </div>
+            </Transition>
+          </div>
+
+          <TerminalSavedCommandsSidebar
+            v-if="!isMobileDevice"
+            :connected="activeTab?.status === 'connected'"
+            @execute="executeSavedCommand"
+          />
+        </div>
+
+        <!-- 移动端快捷工具栏 -->
+        <TerminalAccessoryBar
+          v-if="isMobileDevice && tabs.length > 0"
+          :connected="activeTab?.status === 'connected'"
+          @send="handleAccessorySend"
+          @paste="handlePaste"
+          @hide-keyboard="handleHideKeyboard"
+          @saved-commands="showSavedCommandsMobile = true"
+        />
+
+        <TerminalSavedCommandsSidebar
+          v-if="isMobileDevice"
+          mobile
+          :visible="showSavedCommandsMobile"
+          :connected="activeTab?.status === 'connected'"
+          @execute="executeSavedCommand"
+          @close="showSavedCommandsMobile = false"
+        />
+      </div>
+
+      <!-- 右键菜单 -->
+      <TerminalContextMenu
+        :visible="contextMenu.visible"
+        :x="contextMenu.x"
+        :y="contextMenu.y"
+        :has-selection="!!activeTab?.terminal?.hasSelection()"
+        :can-paste="activeTab?.status === 'connected'"
+        @close="closeContextMenu"
+        @copy="handleCopy"
+        @paste="handlePaste"
+        @select-all="handleSelectAll"
+        @clear="clearTerminal"
+      />
+
+      <!-- 链接预览 Tooltip -->
+      <Teleport to="body">
+        <Transition name="fade">
+          <div
+            v-if="linkTooltip.visible"
+            class="fixed z-[9999] px-2 py-1 text-xs bg-neutral-800 border border-neutral-600 rounded shadow-lg text-neutral-200 max-w-xs truncate pointer-events-none"
+            :style="{ left: linkTooltip.x + 'px', top: linkTooltip.y + 'px' }"
+          >
+            {{ linkTooltip.url }}
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 帮助弹窗 -->
+      <Transition name="fade">
+        <div
+          v-if="showHelp"
+          class="absolute inset-0 z-50 flex items-center justify-center bg-black/80"
+          @click.self="showHelp = false"
+        >
+          <div class="bg-neutral-900 border border-neutral-700 rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-white">{{ t('terminal.helpTitle') }}</h3>
+              <button
+                class="p-1 text-neutral-400 hover:text-white rounded transition-colors"
+                @click="showHelp = false"
+              >
+                <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="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- 快捷键 -->
+            <div class="mb-4">
+              <h4 class="text-sm font-medium text-neutral-300 mb-2">{{ t('terminal.helpShortcuts') }}</h4>
+              <div class="space-y-1.5 text-sm">
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutSearch') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+Shift+F</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutCopy') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+Shift+C</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutPaste') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+Shift+V</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutFontIncrease') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl++</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutFontDecrease') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+-</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutFontReset') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+0</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutExport') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+Shift+S</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutNewTab') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+Shift+T</kbd></div>
+                <div class="flex justify-between"><span class="text-neutral-400">{{ t('terminal.helpShortcutCloseTab') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-800 rounded text-neutral-300 text-xs">Ctrl+Shift+W</kbd></div>
+              </div>
+            </div>
+
+            <!-- 鼠标操作 -->
+            <div class="mb-4">
+              <h4 class="text-sm font-medium text-neutral-300 mb-2">{{ t('terminal.helpMouseOps') }}</h4>
+              <ul class="space-y-1 text-sm text-neutral-400">
+                <li>• {{ t('terminal.helpMouseSelect') }}</li>
+                <li>• {{ t('terminal.helpMouseCopy') }}</li>
+                <li>• {{ t('terminal.helpMouseScroll') }}</li>
+              </ul>
+            </div>
+
+            <!-- 触控操作 -->
+            <div class="mb-4">
+              <h4 class="text-sm font-medium text-neutral-300 mb-2">{{ t('terminal.helpTouchOps') }}</h4>
+              <ul class="space-y-1 text-sm text-neutral-400">
+                <li>• {{ t('terminal.helpTouchPinchZoom') }}</li>
+                <li>• {{ t('terminal.helpTouchSwipeScroll') }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Transition>
+
+      <!-- 设置弹窗 -->
+      <Transition name="fade">
+        <div
+          v-if="showSettings"
+          class="absolute inset-0 z-50 flex items-center justify-center bg-black/80"
+          @click.self="showSettings = false"
+        >
+          <div class="bg-neutral-900 border border-neutral-700 rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-white">{{ t('terminal.settings') }}</h3>
+              <button
+                class="p-1 text-neutral-400 hover:text-white rounded transition-colors"
+                @click="showSettings = false"
+              >
+                <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="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="space-y-4">
+              <!-- 终端铃声 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-neutral-200">{{ t('terminal.settingBell') }}</div>
+                  <div class="text-xs text-neutral-500">{{ t('terminal.settingBellDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.bellEnabled ? 'bg-blue-600' : 'bg-neutral-700'"
+                  @click="terminalStore.toggleBell()"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.bellEnabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 选中自动复制 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-neutral-200">{{ t('terminal.settingAutoCopy') }}</div>
+                  <div class="text-xs text-neutral-500">{{ t('terminal.settingAutoCopyDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.autoCopyOnSelect ? 'bg-blue-600' : 'bg-neutral-700'"
+                  @click="terminalStore.toggleAutoCopy()"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.autoCopyOnSelect ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 链接预览 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-neutral-200">{{ t('terminal.settingLinkPreview') }}</div>
+                  <div class="text-xs text-neutral-500">{{ t('terminal.settingLinkPreviewDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.linkPreview ? 'bg-blue-600' : 'bg-neutral-700'"
+                  @click="terminalStore.linkPreview = !terminalStore.linkPreview"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.linkPreview ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 触控优化 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-neutral-200">{{ t('terminal.settingTouch') }}</div>
+                  <div class="text-xs text-neutral-500">{{ t('terminal.settingTouchDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.touchEnabled ? 'bg-blue-600' : 'bg-neutral-700'"
+                  @click="terminalStore.toggleTouch()"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.touchEnabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 终端主题 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-neutral-200">{{ t('terminal.settingTheme') }}</div>
+                  <div class="text-xs text-neutral-500">{{ t('terminal.settingThemeDesc') }}</div>
+                </div>
+                <select
+                  :value="terminalStore.theme"
+                  class="px-2 py-1 text-sm bg-neutral-800 border border-neutral-600 rounded text-neutral-300"
+                  @change="handleThemeChange($event)"
+                >
+                  <option value="dark">{{ t('terminal.themeDark') }}</option>
+                  <option value="light">{{ t('terminal.themeLight') }}</option>
+                  <option value="highContrast">{{ t('terminal.themeHighContrast') }}</option>
+                </select>
+              </div>
+
+              <!-- 当前状态 -->
+              <div class="pt-4 border-t border-neutral-700">
+                <div class="text-xs text-neutral-400 mb-2">{{ t('terminal.currentStatus') }}</div>
+                <div class="flex items-center gap-4 text-xs text-neutral-300">
+                  <span class="flex items-center gap-1">
+                    <span class="w-2 h-2 rounded-full" :class="activeTab?.isWebGLEnabled ? 'bg-emerald-400' : 'bg-yellow-400'" />
+                    {{ activeTab?.isWebGLEnabled ? 'WebGL' : 'Canvas' }}
+                  </span>
+                  <span v-if="networkLatency.get(activeTabId)">
+                    {{ t('terminal.latency') }}: {{ networkLatency.get(activeTabId) }}ms
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.terminal-container {
+  position: absolute;
+  inset: 0;
+}
+
+.terminal-container.visible {
+  z-index: 1;
+}
+
+.terminal-container.invisible {
+  z-index: 0;
+  pointer-events: none;
+}
+
+:deep(.xterm) {
+  height: 100%;
+  padding: 0;
+}
+
+:deep(.xterm-viewport) {
+  overflow-y: auto !important;
+  background-color: #0a0a0a !important;
+}
+
+:deep(.xterm-screen) {
+  height: 100%;
+}
+
+/* 移动端光标修复 */
+:deep(.xterm-cursor-layer) {
+  /* 确保光标层可见 */
+  z-index: 10;
+}
+
+:deep(.xterm-cursor) {
+  /* 确保光标可见度 */
+  opacity: 1 !important;
+}
+
+/* 移动端触摸优化 */
+@media (hover: none) and (pointer: coarse) {
+  :deep(.xterm) {
+    /* 禁止移动端的默认触摸行为干扰终端 */
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
+  }
+  
+  :deep(.xterm-viewport) {
+    /* 移动端滚动优化 */
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  :deep(.xterm-cursor) {
+    /* 移动端光标加强显示 */
+    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
+  }
+}
+</style>
diff --git a/client/src/components/instance/TrafficStats.vue b/client/src/components/instance/TrafficStats.vue
new file mode 100644
index 0000000..a5733ce
--- /dev/null
+++ b/client/src/components/instance/TrafficStats.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import api from '@/api'
+
+const props = defineProps<{
+  instanceId: number
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+// 流量数据
+interface TrafficData {
+  monthlyUsed: string
+  monthlyUsedFormatted: string
+  monthlyLimit: string | null
+  monthlyLimitFormatted: string | null
+  trafficStatus: 'NORMAL' | 'WARNING' | 'LIMITED'
+  percentage: number
+  trafficResetDay: number
+  periodStart: string
+  periodEnd: string
+}
+
+interface TrafficHistoryItem {
+  date: string
+  rxTotal: string
+  txTotal: string
+  rxFormatted: string
+  txFormatted: string
+  total: string
+  totalFormatted: string
+}
+
+const trafficData = ref<TrafficData | null>(null)
+const trafficHistory = ref<TrafficHistoryItem[]>([])
+const periodInfo = ref<{ periodStart: string; periodEnd: string } | null>(null)
+const loading = ref(true)
+const historyLoading = ref(true)
+
+onMounted(async () => {
+  await Promise.all([loadTrafficData(), loadTrafficHistory()])
+})
+
+async function loadTrafficData() {
+  loading.value = true
+  try {
+    const data = await api.traffic.getInstanceTraffic(props.instanceId)
+    trafficData.value = data
+  } catch (error) {
+    console.error('Failed to load traffic data:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadTrafficHistory() {
+  historyLoading.value = true
+  try {
+    const response = await api.traffic.getInstanceTrafficHistory(props.instanceId)
+    trafficHistory.value = response.data
+    periodInfo.value = {
+      periodStart: response.periodStart,
+      periodEnd: response.periodEnd
+    }
+  } catch (error) {
+    console.error('Failed to load traffic history:', error)
+  } finally {
+    historyLoading.value = false
+  }
+}
+
+// 格式化周期日期显示 (MM-DD ~ MM-DD)
+const periodDateRange = computed(() => {
+  if (!trafficData.value) return ''
+  const start = trafficData.value.periodStart.slice(5) // MM-DD
+  const end = trafficData.value.periodEnd.slice(5)
+  return `${start} ~ ${end}`
+})
+
+// 状态标签样式
+const statusBadgeClass = computed(() => {
+  if (!trafficData.value) return ''
+  switch (trafficData.value.trafficStatus) {
+    case 'LIMITED':
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+    case 'WARNING':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+    default:
+      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+  }
+})
+
+const statusLabel = computed(() => {
+  if (!trafficData.value) return ''
+  switch (trafficData.value.trafficStatus) {
+    case 'LIMITED':
+      return t('traffic.status.limited')
+    case 'WARNING':
+      return t('traffic.status.warning')
+    default:
+      return t('traffic.status.normal')
+  }
+})
+
+// 进度条颜色
+const progressBarClass = computed(() => {
+  if (!trafficData.value) return 'bg-blue-500'
+  if (trafficData.value.percentage >= 100) return 'bg-red-500'
+  if (trafficData.value.percentage >= 80) return 'bg-yellow-500'
+  return 'bg-blue-500'
+})
+
+// 计算图表最大值
+const chartMaxValue = computed(() => {
+  if (trafficHistory.value.length === 0) return 1
+  const max = Math.max(...trafficHistory.value.map(h => Number(h.total)))
+  return max || 1
+})
+
+// 格式化字节数为可读字符串
+const formatBytes = (bytes: number) => {
+  if (bytes === 0) return '0'
+  if (bytes < 1024) return bytes + 'B'
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + 'K'
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + 'M'
+  return (bytes / 1073741824).toFixed(1) + 'G'
+}
+
+// Y 轴刻度标签
+const yAxisLabels = computed(() => {
+  const max = chartMaxValue.value
+  return {
+    top: formatBytes(max),
+    mid: formatBytes(max / 2),
+    bottom: '0'
+  }
+})
+
+// 格式化日期显示 (MM-DD)
+const formatDate = (dateStr: string) => {
+  return dateStr.slice(5) // 去掉年份，只保留 MM-DD
+}
+
+// X 轴标签（显示 5-7 个日期点）
+const xAxisLabels = computed(() => {
+  const len = trafficHistory.value.length
+  if (len === 0) return []
+  if (len <= 7) return trafficHistory.value.map(h => ({ date: formatDate(h.date), index: trafficHistory.value.indexOf(h) }))
+  
+  // 显示首、尾和中间均匀分布的点
+  const step = Math.floor(len / 5)
+  const labels = []
+  for (let i = 0; i < len; i += step) {
+    labels.push({ date: formatDate(trafficHistory.value[i].date), index: i })
+  }
+  // 确保最后一个日期显示
+  if (labels[labels.length - 1].index !== len - 1) {
+    labels.push({ date: formatDate(trafficHistory.value[len - 1].date), index: len - 1 })
+  }
+  return labels
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Current Month Usage -->
+    <div class="card p-6">
+      <div class="flex items-center justify-between mb-4">
+        <h3 
+          class="text-lg font-medium"
+          :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+        >
+          {{ $t('traffic.monthlyUsage') }}
+          <span v-if="trafficData" class="text-sm font-normal ml-2" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+            ({{ periodDateRange }})
+          </span>
+        </h3>
+        <span 
+          v-if="trafficData"
+          :class="['px-2.5 py-0.5 rounded-full text-xs font-medium', statusBadgeClass]"
+        >
+          {{ statusLabel }}
+        </span>
+      </div>
+
+      <div v-if="loading" class="animate-pulse space-y-4">
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+        <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded"></div>
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
+      </div>
+
+      <template v-else-if="trafficData">
+        <div class="space-y-3">
+          <div class="flex justify-between text-sm">
+            <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+              {{ $t('traffic.used') }}
+            </span>
+            <span :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'" class="font-medium">
+              {{ trafficData.monthlyUsedFormatted }}
+              <template v-if="trafficData.monthlyLimitFormatted">
+                / {{ trafficData.monthlyLimitFormatted }}
+              </template>
+              <template v-else>
+                / {{ $t('traffic.unlimited') }}
+              </template>
+            </span>
+          </div>
+
+          <!-- Progress Bar -->
+          <div 
+            class="h-2 rounded-full overflow-hidden"
+            :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'"
+          >
+            <div 
+              :class="['h-full rounded-full transition-all duration-300', progressBarClass]"
+              :style="{ width: `${Math.min(trafficData.percentage, 100)}%` }"
+            ></div>
+          </div>
+
+          <div class="flex justify-between text-xs">
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+              {{ trafficData.percentage.toFixed(1) }}%
+            </span>
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+              <span 
+                v-if="trafficData.trafficStatus === 'LIMITED'"
+                class="text-red-500"
+              >
+                {{ $t('traffic.throttledHint') }}
+                <span class="mx-1">·</span>
+              </span>
+              {{ $t('traffic.periodResetHint', { date: trafficData.trafficResetDay }) }}
+            </span>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="text-center py-4">
+        <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          {{ $t('traffic.noData') }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Traffic History Chart -->
+    <div class="card p-6">
+      <h3 
+        class="text-lg font-medium mb-4"
+        :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+      >
+        {{ $t('traffic.historyPeriod') }}
+        <span v-if="periodInfo" class="text-sm font-normal ml-2" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          ({{ periodInfo.periodStart.slice(5) }} ~ {{ periodInfo.periodEnd.slice(5) }})
+        </span>
+      </h3>
+
+      <div v-if="historyLoading" class="animate-pulse">
+        <div class="flex items-end gap-1 h-32">
+          <div 
+            v-for="i in 30" 
+            :key="i" 
+            class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-t"
+            :style="{ height: `${Math.random() * 100}%` }"
+          ></div>
+        </div>
+      </div>
+
+      <template v-else-if="trafficHistory.length > 0">
+        <!-- Bar Chart with Y-axis -->
+        <div class="flex">
+          <!-- Y 轴刻度 -->
+          <div class="flex flex-col justify-between h-40 pr-2 text-xs w-10" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+            <span class="text-right">{{ yAxisLabels.top }}</span>
+            <span class="text-right">{{ yAxisLabels.mid }}</span>
+            <span class="text-right">{{ yAxisLabels.bottom }}</span>
+          </div>
+          
+          <!-- 图表区域 -->
+          <div class="flex-1">
+            <!-- 背景网格线 -->
+            <div class="relative h-40">
+              <div 
+                class="absolute inset-0 flex flex-col justify-between pointer-events-none"
+              >
+                <div class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"></div>
+                <div class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"></div>
+                <div class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"></div>
+              </div>
+              
+              <!-- 柱状图 -->
+              <div class="absolute inset-0 flex items-end gap-0.5 px-1">
+                <div 
+                  v-for="(item, index) in trafficHistory" 
+                  :key="item.date"
+                  class="flex-1 min-w-1 rounded-t transition-all duration-200 cursor-pointer group relative"
+                  :class="[
+                    themeStore.isDark 
+                      ? 'bg-gradient-to-t from-blue-600 to-blue-400 hover:from-blue-500 hover:to-blue-300' 
+                      : 'bg-gradient-to-t from-blue-500 to-blue-400 hover:from-blue-400 hover:to-blue-300'
+                  ]"
+                  :style="{ height: `${Math.max((Number(item.total) / chartMaxValue) * 100, 1)}%` }"
+                >
+                  <!-- Tooltip -->
+                  <div 
+                    class="absolute bottom-full mb-2 px-2.5 py-1.5 text-xs rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10"
+                    :class="[
+                      themeStore.isDark ? 'bg-gray-800 text-gray-200 border border-gray-700' : 'bg-white text-gray-900 border border-gray-200 shadow-md',
+                      index < 5 ? 'left-0' : index > trafficHistory.length - 5 ? 'right-0' : 'left-1/2 -translate-x-1/2'
+                    ]"
+                  >
+                    <div class="font-medium mb-1">{{ item.date }}</div>
+                    <div class="flex items-center gap-1.5">
+                      <span class="w-2 h-2 rounded-full bg-green-500"></span>
+                      <span>{{ $t('traffic.download') }}: {{ item.rxFormatted }}</span>
+                    </div>
+                    <div class="flex items-center gap-1.5">
+                      <span class="w-2 h-2 rounded-full bg-orange-500"></span>
+                      <span>{{ $t('traffic.upload') }}: {{ item.txFormatted }}</span>
+                    </div>
+                    <div 
+                      class="mt-1 pt-1 font-medium"
+                      :class="themeStore.isDark ? 'border-t border-gray-700' : 'border-t border-gray-200'"
+                    >
+                      {{ $t('traffic.total') }}: {{ item.totalFormatted }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- X-axis labels -->
+            <div class="relative h-5 mt-1">
+              <div 
+                v-for="label in xAxisLabels" 
+                :key="label.index"
+                class="absolute text-xs transform -translate-x-1/2"
+                :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                :style="{ left: `${(label.index / (trafficHistory.length - 1)) * 100}%` }"
+              >
+                {{ label.date }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="text-center py-8">
+        <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+          {{ $t('traffic.noHistoryData') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/instance/modals/AddPortModal.vue b/client/src/components/instance/modals/AddPortModal.vue
new file mode 100644
index 0000000..89b187b
--- /dev/null
+++ b/client/src/components/instance/modals/AddPortModal.vue
@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+
+const { t } = useI18n()
+
+interface Props {
+  visible: boolean
+  loading: boolean
+  error: string
+  portRangeStart?: number | null
+  portRangeEnd?: number | null
+  // 新增：配额信息
+  portQuotaCurrent?: number
+  portQuotaLimit?: number
+  // 新增：网络模式
+  networkMode?: string
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'submit', form: { 
+    protocol: 'tcp' | 'udp' | 'both'
+    privatePort: string
+    publicPort: string
+    remark: string
+    // 新增：是否为范围输入
+    isRange: boolean
+    privatePortStart?: number
+    privatePortEnd?: number
+    publicPortStart?: number
+    publicPortEnd?: number
+  }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+const form = ref<{ protocol: 'tcp' | 'udp' | 'both'; publicPort: string; privatePort: string; remark: string }>({
+  protocol: 'both',
+  publicPort: '',
+  privatePort: '',
+  remark: ''
+})
+
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    form.value = { protocol: 'both', publicPort: '', privatePort: '', remark: '' }
+  }
+})
+
+// 解析端口范围（支持 "80" 或 "80-85" 格式）
+function parsePortRange(input: string): { start: number; end: number } | null {
+  if (!input.trim()) return null
+  
+  const rangeMatch = input.match(/^(\d+)-(\d+)$/)
+  if (rangeMatch) {
+    const start = parseInt(rangeMatch[1], 10)
+    const end = parseInt(rangeMatch[2], 10)
+    if (start > 0 && end > 0 && start <= end && start <= 65535 && end <= 65535) {
+      return { start, end }
+    }
+    return null
+  }
+  
+  const singleMatch = input.match(/^(\d+)$/)
+  if (singleMatch) {
+    const port = parseInt(singleMatch[1], 10)
+    if (port > 0 && port <= 65535) {
+      return { start: port, end: port }
+    }
+  }
+  
+  return null
+}
+
+// 解析后的端口范围
+const parsedPrivatePort = computed(() => parsePortRange(form.value.privatePort))
+const parsedPublicPort = computed(() => parsePortRange(form.value.publicPort))
+
+// 是否为范围输入
+const isRangeInput = computed(() => {
+  const priv = parsedPrivatePort.value
+  return priv && priv.start !== priv.end
+})
+
+// 端口数量
+const portCount = computed(() => {
+  const priv = parsedPrivatePort.value
+  if (!priv) return 0
+  return priv.end - priv.start + 1
+})
+
+// 需要的配额数
+const quotaNeeded = computed(() => {
+  const count = portCount.value
+  return form.value.protocol === 'both' ? count * 2 : count
+})
+
+// 剩余配额
+const quotaRemaining = computed(() => {
+  if (props.portQuotaLimit === undefined || props.portQuotaCurrent === undefined) return null
+  return props.portQuotaLimit - props.portQuotaCurrent
+})
+
+// 配额是否足够
+const quotaSufficient = computed(() => {
+  const remaining = quotaRemaining.value
+  if (remaining === null) return true
+  return remaining >= quotaNeeded.value
+})
+
+// 输入验证
+const validationError = computed(() => {
+  if (!form.value.privatePort.trim()) return null
+  
+  if (!parsedPrivatePort.value) {
+    return t('portModal.invalidPortFormat')
+  }
+
+  // 阻拦 IPv6 Only 模式映射内网 22 端口
+  if (props.networkMode === 'ipv6_only') {
+    const priv = parsedPrivatePort.value
+    if (priv && priv.start <= 22 && priv.end >= 22) {
+      return t('portModal.ipv6OnlySshPortHint')
+    }
+  }
+  
+  if (form.value.publicPort.trim() && !parsedPublicPort.value) {
+    return t('portModal.invalidPortFormat')
+  }
+  
+  // 检查内网和公网端口数量是否匹配
+  if (form.value.publicPort.trim() && parsedPublicPort.value) {
+    const priv = parsedPrivatePort.value!
+    const pub = parsedPublicPort.value
+    const privCount = priv.end - priv.start + 1
+    const pubCount = pub.end - pub.start + 1
+    // 如果两者都是范围，数量必须相同
+    // 如果一个是范围一个是单端口，也不允许（除非两者都是单端口）
+    if (privCount !== pubCount) {
+      return t('portModal.rangeMismatch', { private: privCount, public: pubCount })
+    }
+  }
+  
+  // 检查公网端口范围
+  if (form.value.publicPort.trim() && parsedPublicPort.value && props.portRangeStart && props.portRangeEnd) {
+    const pub = parsedPublicPort.value
+    if (pub.start < props.portRangeStart || pub.end > props.portRangeEnd) {
+      return t('portModal.publicPortOutOfRange', { start: props.portRangeStart, end: props.portRangeEnd })
+    }
+  }
+  
+  // 检查配额
+  if (!quotaSufficient.value) {
+    return t('portModal.quotaInsufficient', { need: quotaNeeded.value, remain: quotaRemaining.value })
+  }
+  
+  return null
+})
+
+// 是否可提交
+const canSubmit = computed(() => {
+  return form.value.privatePort.trim() && 
+         parsedPrivatePort.value && 
+         !validationError.value &&
+         !props.loading
+})
+
+function handleSubmit(): void {
+  const priv = parsedPrivatePort.value
+  const pub = parsedPublicPort.value
+  
+  emit('submit', {
+    ...form.value,
+    isRange: isRangeInput.value || false,
+    privatePortStart: priv?.start,
+    privatePortEnd: priv?.end,
+    publicPortStart: pub?.start,
+    publicPortEnd: pub?.end
+  })
+}
+
+function close(): void {
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div 
+          class="absolute inset-0 backdrop-blur-sm"
+          :class="themeStore.isDark ? 'bg-black/60' : 'bg-black/30'"
+          @click="close"
+        ></div>
+        
+        <div 
+          class="modal-content relative w-full max-w-md border rounded-xl shadow-2xl"
+          :class="themeStore.isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+        >
+          <div 
+            class="flex items-center justify-between p-5 border-b"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <h3 
+              class="text-base font-medium"
+              :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+            >
+              {{ t('portModal.title') }}
+            </h3>
+            <button 
+              :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'" 
+              @click="close"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        
+          <form class="p-5" @submit.prevent="handleSubmit">
+            <div class="space-y-4">
+              <div class="flex gap-3">
+                <div class="flex-1">
+                  <label class="block text-xs text-gray-500 mb-1.5">{{ t('portModal.protocol') }}</label>
+                  <div class="flex gap-2">
+                    <button 
+                      type="button"
+                      :class="[
+                        'flex-1 px-3 py-2 text-sm rounded-lg border transition-colors',
+                        form.protocol === 'both' 
+                          ? (themeStore.isDark ? 'bg-gray-800 border-gray-700 text-white' : 'bg-gray-900 border-gray-900 text-white')
+                          : (themeStore.isDark ? 'border-gray-800 text-gray-500 hover:border-gray-700' : 'border-gray-300 text-gray-600 hover:border-gray-400')
+                      ]"
+                      @click="form.protocol = 'both'"
+                    >
+                      Both
+                    </button>
+                    <button 
+                      type="button"
+                      :class="[
+                        'flex-1 px-3 py-2 text-sm rounded-lg border transition-colors',
+                        form.protocol === 'tcp' 
+                          ? (themeStore.isDark ? 'bg-gray-800 border-gray-700 text-white' : 'bg-gray-900 border-gray-900 text-white')
+                          : (themeStore.isDark ? 'border-gray-800 text-gray-500 hover:border-gray-700' : 'border-gray-300 text-gray-600 hover:border-gray-400')
+                      ]"
+                      @click="form.protocol = 'tcp'"
+                    >
+                      TCP
+                    </button>
+                    <button 
+                      type="button"
+                      :class="[
+                        'flex-1 px-3 py-2 text-sm rounded-lg border transition-colors',
+                        form.protocol === 'udp' 
+                          ? (themeStore.isDark ? 'bg-gray-800 border-gray-700 text-white' : 'bg-gray-900 border-gray-900 text-white')
+                          : (themeStore.isDark ? 'border-gray-800 text-gray-500 hover:border-gray-700' : 'border-gray-300 text-gray-600 hover:border-gray-400')
+                      ]"
+                      @click="form.protocol = 'udp'"
+                    >
+                      UDP
+                    </button>
+                  </div>
+                  <p 
+                    v-if="form.protocol === 'both'"
+                    class="text-xs mt-1.5"
+                    :class="themeStore.isDark ? 'text-amber-500/80' : 'text-amber-600'"
+                  >
+                    {{ t('portModal.bothHint') }}
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <label class="block text-xs text-gray-500 mb-1.5">
+                  {{ t('portModal.privatePort') }} 
+                  <span class="text-red-500">{{ t('portModal.privatePortRequired') }}</span>
+                </label>
+                <input 
+                  v-model="form.privatePort" 
+                  type="text" 
+                  class="input" 
+                  :placeholder="t('portModal.privatePortPlaceholderRange')"
+                />
+                <p 
+                  class="text-xs mt-1.5"
+                  :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+                >
+                  {{ t('portModal.rangeHint') }}
+                </p>
+              </div>
+
+              <div>
+                <label class="block text-xs text-gray-500 mb-1.5">
+                  {{ t('portModal.publicPort') }} 
+                  <span class="text-gray-400">{{ t('portModal.publicPortOptional') }}</span>
+                </label>
+                <input 
+                  v-model="form.publicPort" 
+                  type="text" 
+                  class="input" 
+                  :placeholder="t('portModal.publicPortPlaceholderRange')"
+                />
+                <p 
+                  class="text-xs mt-1.5"
+                  :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+                >
+                  <template v-if="props.portRangeStart && props.portRangeEnd">
+                    {{ t('portModal.publicPortHintWithRange', { start: props.portRangeStart, end: props.portRangeEnd }) }}
+                  </template>
+                  <template v-else>
+                    {{ t('portModal.publicPortHint') }}
+                  </template>
+                </p>
+              </div>
+
+              <div>
+                <label class="block text-xs text-gray-500 mb-1.5">{{ t('portModal.remark') }} <span class="text-gray-400">{{ t('portModal.remarkOptional') }}</span></label>
+                <input 
+                  v-model="form.remark" 
+                  type="text" 
+                  class="input" 
+                  :placeholder="t('portModal.remarkPlaceholder')"
+                  maxlength="100"
+                />
+              </div>
+
+              <!-- 配额预览 -->
+              <div 
+                v-if="portCount > 0 && quotaRemaining !== null"
+                class="p-3 rounded-lg"
+                :class="quotaSufficient 
+                  ? (themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-50') 
+                  : (themeStore.isDark ? 'bg-red-500/10' : 'bg-red-50')"
+              >
+                <div class="flex items-center justify-between text-sm">
+                  <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                    {{ t('portModal.quotaPreview', { count: quotaNeeded, quota: quotaNeeded }) }}
+                  </span>
+                  <span 
+                    :class="quotaSufficient 
+                      ? (themeStore.isDark ? 'text-gray-300' : 'text-gray-700')
+                      : 'text-red-500'"
+                  >
+                    {{ t('portModal.quotaRemaining', { remain: quotaRemaining }) }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 验证错误 -->
+              <div v-if="validationError" class="p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+                <p class="text-sm text-red-500">{{ validationError }}</p>
+              </div>
+
+              <!-- API 错误 -->
+              <div v-if="error" class="p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+                <p class="text-sm text-red-500">{{ error }}</p>
+              </div>
+            </div>
+
+            <div class="flex justify-end gap-3 mt-6">
+              <button type="button" class="btn-secondary" @click="close">{{ t('portModal.cancel') }}</button>
+              <button type="submit" :disabled="!canSubmit" class="btn-primary">
+                <svg v-if="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                {{ loading ? t('portModal.adding') : t('portModal.add') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/ApplyAffCodeModal.vue b/client/src/components/instance/modals/ApplyAffCodeModal.vue
new file mode 100644
index 0000000..1094fbf
--- /dev/null
+++ b/client/src/components/instance/modals/ApplyAffCodeModal.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import api from '@/api'
+import { translateError } from '@/utils/errorHandler'
+
+interface Props {
+  show: boolean
+  instanceId: number
+  instanceName: string
+  renewPrice: number
+  billingCycleLabel: string
+}
+
+interface ApplyAffResult {
+  success: boolean
+  message: string
+  discountRate: number
+  discountPercent: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  'success': [result: ApplyAffResult]
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const affCode = ref('')
+const submitting = ref(false)
+const error = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const normalizedAffCode = computed(() => affCode.value.trim().toUpperCase())
+const canSubmit = computed(() => normalizedAffCode.value.length >= 3 && !submitting.value)
+const formattedRenewPrice = computed(() => props.renewPrice.toFixed(2))
+
+watch(() => props.show, async (show) => {
+  if (show) {
+    affCode.value = ''
+    error.value = ''
+    await nextTick()
+    inputRef.value?.focus()
+  } else {
+    submitting.value = false
+  }
+})
+
+function handleClose(): void {
+  if (submitting.value) return
+  emit('update:show', false)
+}
+
+function handleInput(): void {
+  if (error.value) error.value = ''
+}
+
+async function handleSubmit(): Promise<void> {
+  if (!canSubmit.value) return
+
+  submitting.value = true
+  error.value = ''
+
+  try {
+    const result = await api.billing.applyAffCodeToInstance(props.instanceId, normalizedAffCode.value)
+    emit('success', result)
+    emit('update:show', false)
+  } catch (err) {
+    error.value = translateError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="show" class="modal-overlay" @click.self="handleClose">
+        <div class="modal-backdrop" @click="handleClose"></div>
+
+        <form class="modal-content max-w-md" @submit.prevent="handleSubmit">
+          <div class="modal-header">
+            <h3 class="modal-title">
+              {{ t('instance.subscription.applyAffTitle') }}
+            </h3>
+            <button
+              type="button"
+              class="rounded-lg p-1 transition-colors hover:bg-gray-500/10"
+              :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-100' : 'text-gray-500 hover:text-gray-900'"
+              @click="handleClose"
+            >
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <div
+              class="rounded-lg border p-3"
+              :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/70' : 'border-gray-200 bg-gray-50'"
+            >
+              <div class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ t('instance.subscription.applyAffInstance') }}
+              </div>
+              <div class="mt-1 truncate text-sm font-medium" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                {{ instanceName }}
+              </div>
+              <div class="mt-3 flex items-end justify-between gap-3">
+                <span class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                  {{ t('instance.subscription.applyAffCurrentRenewPrice') }}
+                </span>
+                <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                  ¥{{ formattedRenewPrice }}{{ billingCycleLabel }}
+                </span>
+              </div>
+            </div>
+
+            <div>
+              <label
+                for="apply-aff-code-input"
+                class="mb-1.5 block text-sm font-medium"
+                :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+              >
+                {{ t('instance.subscription.applyAffCodeLabel') }}
+              </label>
+              <input
+                id="apply-aff-code-input"
+                ref="inputRef"
+                v-model="affCode"
+                type="text"
+                autocomplete="off"
+                class="input w-full font-mono uppercase"
+                :placeholder="t('instance.subscription.applyAffCodePlaceholder')"
+                @input="handleInput"
+              />
+            </div>
+
+            <div
+              v-if="error"
+              class="rounded-lg px-3 py-2 text-sm"
+              :class="themeStore.isDark ? 'bg-red-500/10 text-red-300' : 'bg-red-50 text-red-700'"
+            >
+              {{ error }}
+            </div>
+
+            <div
+              class="rounded-lg border px-3 py-2.5 text-xs leading-5"
+              :class="themeStore.isDark ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-200' : 'border-emerald-200 bg-emerald-50 text-emerald-800'"
+            >
+              <p>{{ t('instance.subscription.applyAffEffectHint') }}</p>
+              <p class="mt-1">{{ t('instance.subscription.applyAffNoRefundHint') }}</p>
+              <p class="mt-1">{{ t('instance.subscription.applyAffOwnCodeHint') }}</p>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button type="button" class="btn-secondary" @click="handleClose">
+              {{ t('common.cancel') }}
+            </button>
+            <button type="submit" class="btn-primary" :disabled="!canSubmit">
+              <span
+                v-if="submitting"
+                class="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white align-[-2px]"
+              ></span>
+              {{ submitting ? t('instance.subscription.applyAffSubmitting') : t('instance.subscription.applyAffSubmit') }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/ChangePlanModal.vue b/client/src/components/instance/modals/ChangePlanModal.vue
new file mode 100644
index 0000000..5a34465
--- /dev/null
+++ b/client/src/components/instance/modals/ChangePlanModal.vue
@@ -0,0 +1,696 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import { useConfigStore } from '@/stores/config'
+import api from '@/api'
+import type { ChangePlanPreview } from '@/types/api'
+import { calculateDailyPrice } from '@/utils/billing'
+import { freeSiteCopy, getFreeSiteBillingCycleLabel } from '@/utils/freeSiteFun'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+const configStore = useConfigStore()
+
+interface PackagePlanOption {
+  id: number
+  name: string
+  description: string | null
+  price: number
+  billingCycle: number
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  monthlyTrafficLimit: string | null
+  isActive: boolean
+  isSoldOut: boolean
+}
+
+interface Props {
+  show: boolean
+  instanceId: number
+  instanceName: string
+  packageId: number
+  currentPlanId: number | null
+  currentBillingPrice?: number | null
+  currentBillingCycle?: number | null
+  instanceType?: 'container' | 'vm'  // 实例类型，用于显示重启提示
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  'success': []
+}>()
+
+// State
+const loading = ref(false)
+const loadingPreview = ref(false)
+const changing = ref(false)
+const plans = ref<PackagePlanOption[]>([])
+const selectedPlanId = ref<number | null>(null)
+const preview = ref<ChangePlanPreview | null>(null)
+const userBalance = ref<number>(0)
+const error = ref<string>('')
+const showRules = ref(false)
+
+// 获取当前方案的日价（用于筛选升级方案）
+const currentPlanDailyPrice = computed(() => {
+  const currentPlan = plans.value.find(p => p.id === props.currentPlanId)
+  if (!currentPlan) return 0
+  const currentPrice = props.currentBillingPrice ?? (currentPlan.price / 100)
+  const currentCycle = props.currentBillingCycle ?? currentPlan.billingCycle
+  // 使用公共方法计算日价
+  return calculateDailyPrice(currentPrice, currentCycle)
+})
+
+// 可选方案（只显示比当前方案日价更高的升级方案）
+const availablePlans = computed(() => {
+  return plans.value.filter(p => {
+    if (p.id === props.currentPlanId) return false
+    // 使用公共方法计算日价
+    const dailyPrice = calculateDailyPrice(p.price / 100, p.billingCycle)
+    // 只显示日价更高的方案（升级）
+    return dailyPrice > currentPlanDailyPrice.value
+  })
+})
+
+// 是否已是最高方案（没有可升级的方案）
+const isHighestPlan = computed(() => {
+  return !loading.value && plans.value.length > 0 && availablePlans.value.length === 0
+})
+
+// 是否余额不足（仅升级时检查）
+const insufficientBalance = computed(() => {
+  if (!preview.value || !preview.value.isUpgrade) return false
+  return userBalance.value < preview.value.priceDiff
+})
+
+// 不能变更的原因文本
+const cannotChangeReasonText = computed(() => {
+  if (!preview.value || preview.value.canChange) return ''
+  
+  const reason = preview.value.cannotChangeReason
+  if (!reason) return t('billing.cannotChangeUnknown')
+  
+  if (reason === 'remaining_days_insufficient') {
+    return t('billing.cannotChangeRemainingDays', { days: 15 })
+  }
+  
+  if (reason === 'instance_status_invalid') {
+    return t('billing.cannotChangeInstanceStatus')
+  }
+  
+  return t('billing.cannotChangeUnknown')
+})
+
+// 格式化金额（分转元 - 用于 plan.price）
+function formatPriceCents(cents: number): string {
+  return (cents / 100).toFixed(2)
+}
+
+// 格式化金额（元 - 用于 preview 计算结果）
+function formatMoney(yuan: number): string {
+  return yuan.toFixed(2)
+}
+
+// 格式化内存
+function formatMemory(mb: number): string {
+  if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
+  return mb + ' MB'
+}
+
+// 格式化磁盘（1024进制）
+function formatDisk(mb: number): string {
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+// 格式化日期
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  })
+}
+
+// 获取账期文本
+function getBillingCycleText(months: number): string {
+  if (configStore.freeSiteMode) return getFreeSiteBillingCycleLabel(months)
+  if (months === 1) return t('billing.billingCycleMonthly')
+  if (months === 3) return t('billing.billingCycleQuarterly')
+  if (months === 12) return t('billing.billingCycleYearly')
+  return `${months}${t('billing.months')}`
+}
+
+
+// 加载方案列表
+async function loadPlans() {
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const [plansRes, balanceRes] = await Promise.all([
+      api.billing.getPackagePlans(props.packageId),
+      api.billing.getUserBalance()
+    ])
+    
+    plans.value = plansRes.plans as PackagePlanOption[]
+    userBalance.value = balanceRes.balance.balance
+  } catch (err: any) {
+    error.value = err.message || t('common.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载升降级预览
+async function loadPreview() {
+  if (!selectedPlanId.value) {
+    preview.value = null
+    return
+  }
+
+  const selectedPlan = plans.value.find(plan => plan.id === selectedPlanId.value)
+  if (!selectedPlan || !selectedPlan.isActive || selectedPlan.isSoldOut) {
+    preview.value = null
+    return
+  }
+  
+  loadingPreview.value = true
+  error.value = ''
+  
+  try {
+    const res = await api.billing.getChangePlanPreview(props.instanceId, selectedPlanId.value)
+    preview.value = res.preview as ChangePlanPreview
+  } catch (err: any) {
+    error.value = err.message || t('common.loadFailed')
+    preview.value = null
+  } finally {
+    loadingPreview.value = false
+  }
+}
+
+// 执行升级
+async function handleChangePlan() {
+  if (!selectedPlanId.value || !preview.value) return
+  if (!preview.value.canChange) return
+  if (insufficientBalance.value) return
+  
+  changing.value = true
+  error.value = ''
+  
+  try {
+    const result = await api.billing.changePlan(props.instanceId, selectedPlanId.value)
+    
+    // 检查是否需要重启实例以应用配置
+    if (result.needRestart && result.restartMessage) {
+      // 先发出成功事件，然后显示警告 toast
+      emit('success')
+      // 使用 setTimeout 确保成功 toast 先显示，再显示重启警告
+      setTimeout(() => {
+        // KVM_RESTART_REQUIRED 是特殊标记，需要显示本地化文本
+        const message = result.restartMessage === 'KVM_RESTART_REQUIRED'
+          ? t('billing.kvmRestartRequired')
+          : result.restartMessage
+        toast.warning(message!, 8000) // 警告显示 8 秒
+      }, 500)
+    } else {
+      emit('success')
+    }
+    
+    emit('update:show', false)
+  } catch (err: any) {
+    error.value = err.message || t('billing.changePlanFailed')
+  } finally {
+    changing.value = false
+  }
+}
+
+// 监听选择变化
+watch(() => selectedPlanId.value, () => {
+  loadPreview()
+})
+
+// 监听显示状态
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    loadPlans()
+  } else {
+    // 重置状态
+    plans.value = []
+    selectedPlanId.value = null
+    preview.value = null
+    userBalance.value = 0
+    error.value = ''
+    showRules.value = false
+  }
+})
+
+function handleClose() {
+  emit('update:show', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        @click.self="handleClose"
+      >
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/50" @click="handleClose" />
+        
+        <!-- Modal -->
+        <div
+          class="relative w-full max-w-lg rounded-lg shadow-xl max-h-[90vh] overflow-y-auto"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+        >
+          <!-- Header -->
+          <div
+            class="flex items-center justify-between px-6 py-4 border-b sticky top-0 z-10"
+            :class="themeStore.isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-white'"
+          >
+            <div class="flex items-center gap-2">
+              <h3 
+                class="text-lg font-medium"
+                :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+              >
+                {{ t('billing.changePlanTitle') }}
+              </h3>
+              <!-- 查看规则按钮 -->
+              <button
+                class="text-xs px-2 py-0.5 rounded-full transition-colors"
+                :class="themeStore.isDark 
+                  ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
+                @click="showRules = !showRules"
+              >
+                {{ showRules ? t('billing.hideRules') : t('billing.viewRules') }}
+              </button>
+            </div>
+            <button
+              class="p-1 rounded hover:bg-gray-500/20"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+              @click="handleClose"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="px-6 py-4">
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-8">
+              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            </div>
+
+            <!-- Error -->
+            <div v-else-if="error && !plans.length" class="py-4">
+              <div class="p-3 rounded-lg bg-red-500/10 text-red-500 text-sm">
+                {{ error }}
+              </div>
+            </div>
+
+            <!-- Content -->
+            <template v-else>
+              <!-- 变更规则面板 -->
+              <div 
+                v-if="showRules"
+                class="mb-4 p-4 rounded-lg text-sm"
+                :class="themeStore.isDark ? 'bg-blue-900/20 border border-blue-800/50' : 'bg-blue-50 border border-blue-200'"
+              >
+                <div 
+                  class="font-medium mb-2 flex items-center gap-1"
+                  :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'"
+                >
+                  <svg 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  {{ t('billing.changePlanRulesTitle') }}
+                </div>
+                <ul 
+                  class="list-disc list-inside space-y-1"
+                  :class="themeStore.isDark ? 'text-blue-200' : 'text-blue-600'"
+                >
+                  <li>{{ t('billing.changePlanRule1') }}</li>
+                  <li>{{ t('billing.changePlanRule2') }}</li>
+                  <li>{{ t('billing.changePlanRule3') }}</li>
+                  <li>{{ t('billing.changePlanRule4') }}</li>
+                </ul>
+              </div>
+
+              <!-- KVM/LXC 重启提示 -->
+              <div 
+                class="mb-4 p-3 rounded-lg text-sm flex items-start gap-2"
+                :class="instanceType === 'vm'
+                  ? (themeStore.isDark ? 'bg-amber-900/20 border border-amber-800/50' : 'bg-amber-50 border border-amber-200')
+                  : (themeStore.isDark ? 'bg-green-900/20 border border-green-800/50' : 'bg-green-50 border border-green-200')"
+              >
+                <svg 
+                  class="w-4 h-4 mt-0.5 flex-shrink-0" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                  :class="instanceType === 'vm'
+                    ? (themeStore.isDark ? 'text-amber-400' : 'text-amber-600')
+                    : (themeStore.isDark ? 'text-green-400' : 'text-green-600')"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span
+                  :class="instanceType === 'vm'
+                    ? (themeStore.isDark ? 'text-amber-300' : 'text-amber-700')
+                    : (themeStore.isDark ? 'text-green-300' : 'text-green-700')"
+                >
+                  {{ instanceType === 'vm' ? t('billing.kvmRestartHint') : t('billing.lxcInstantHint') }}
+                </span>
+              </div>
+
+              <!-- 已是最高方案提示 -->
+              <div 
+                v-if="isHighestPlan"
+                class="mb-4 p-4 rounded-lg text-sm text-center"
+                :class="themeStore.isDark ? 'bg-blue-900/20 border border-blue-800/50' : 'bg-blue-50 border border-blue-200'"
+              >
+                <div 
+                  class="font-medium mb-1"
+                  :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'"
+                >
+                  {{ t('billing.alreadyHighestPlan') }}
+                </div>
+                <div 
+                  :class="themeStore.isDark ? 'text-blue-200' : 'text-blue-600'"
+                >
+                  {{ t('billing.contactForCustomPlan') }}
+                </div>
+              </div>
+
+              <!-- 方案列表 -->
+              <div v-if="!isHighestPlan" class="mb-4">
+                <label 
+                  class="block text-sm font-medium mb-2"
+                  :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                >
+                  {{ t('billing.selectNewPlan') }}
+                </label>
+                <div class="space-y-2">
+                  <button
+                    v-for="plan in availablePlans"
+                    :key="plan.id"
+                    :disabled="!plan.isActive || plan.isSoldOut"
+                    class="w-full p-3 rounded-lg border text-left transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    :class="[
+                      selectedPlanId === plan.id && !plan.isSoldOut
+                        ? 'border-blue-500 bg-blue-500/10'
+                        : plan.isSoldOut
+                          ? themeStore.isDark
+                            ? 'border-gray-700 bg-gray-800/40'
+                            : 'border-gray-200 bg-gray-50'
+                          : themeStore.isDark
+                            ? 'border-gray-700 hover:border-gray-600'
+                            : 'border-gray-200 hover:border-gray-300'
+                    ]"
+                    @click="!plan.isSoldOut && plan.isActive && (selectedPlanId = plan.id)"
+                  >
+                    <div class="flex justify-between items-start">
+                      <div>
+                        <div 
+                          class="font-medium"
+                          :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                        >
+                          {{ plan.name }}
+                        </div>
+                        <div 
+                          class="text-xs mt-1"
+                          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                        >
+                          {{ plan.cpu }}% CPU · {{ formatMemory(plan.memory) }} · {{ formatDisk(plan.disk) }}
+                        </div>
+                        <div
+                          v-if="props.instanceType !== 'vm' && plan.swapSize > 0"
+                          class="text-xs mt-1"
+                          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                        >
+                          {{ t('resources.plans.swapSize') }} · {{ plan.swapSize }} MB
+                        </div>
+                      </div>
+                      <div class="text-right">
+                        <div 
+                          class="font-medium"
+                          :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                        >
+                          ¥{{ formatPriceCents(plan.price) }}
+                        </div>
+                        <div 
+                          class="text-xs"
+                          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                        >
+                          {{ getBillingCycleText(plan.billingCycle) }}
+                        </div>
+                      </div>
+                    </div>
+                    <!-- 状态标签 -->
+                    <div v-if="!plan.isActive || plan.isSoldOut" class="mt-2">
+                      <span 
+                        class="text-xs px-1.5 py-0.5 rounded"
+                        :class="plan.isSoldOut
+                          ? (themeStore.isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-50 text-red-700')
+                          : (themeStore.isDark ? 'bg-gray-800 text-gray-500' : 'bg-gray-100 text-gray-500')"
+                      >
+                        {{ plan.isSoldOut ? t('billing.planSoldOut') : t('billing.planInactive') }}
+                      </span>
+                    </div>
+                  </button>
+                </div>
+              </div>
+
+              <!-- 预览加载中 -->
+              <div v-if="loadingPreview" class="flex justify-center py-4">
+                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+              </div>
+
+              <!-- 预览详情 -->
+              <div 
+                v-else-if="preview"
+                class="p-4 rounded-lg mb-4"
+                :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+              >
+                <!-- 不能变更提示 -->
+                <div 
+                  v-if="!preview.canChange"
+                  class="p-3 rounded-lg mb-3 text-sm"
+                  :class="themeStore.isDark ? 'bg-red-900/20 text-red-400' : 'bg-red-50 text-red-600'"
+                >
+                  <div class="flex items-center gap-1 font-medium">
+                    <svg 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    {{ t('billing.cannotChange') }}
+                  </div>
+                  <div class="mt-1">{{ cannotChangeReasonText }}</div>
+                </div>
+
+                <!-- 升级标识 -->
+                <div class="flex items-center gap-2 mb-3">
+                  <span 
+                    class="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-500"
+                  >
+                    {{ t('billing.isUpgrade') }}
+                  </span>
+                </div>
+
+                <div class="space-y-2 text-sm">
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('billing.remainingDays') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      {{ Math.ceil(preview.remainingDays) }} {{ t('billing.days') }}
+                    </span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.oldDailyPrice : t('billing.oldDailyPrice') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      ¥{{ preview.oldDailyPrice.toFixed(4) }}/{{ t('billing.day') }}
+                    </span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.remainingValue : t('billing.remainingValue') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      ¥{{ formatMoney(preview.remainingValue) }}
+                    </span>
+                  </div>
+                  <div class="border-t my-2" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'" />
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.newDailyPrice : t('billing.newDailyPrice') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      ¥{{ preview.newDailyPrice.toFixed(4) }}/{{ t('billing.day') }}
+                    </span>
+                  </div>
+                  <!-- 新方案剩余费用：无折扣时直接显示一行，有折扣时显示原价+折扣+折后 -->
+                  <div v-if="preview.discountAmount > 0" class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.newPlanCost : t('billing.newPlanCostOriginal') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      ¥{{ formatMoney(preview.newPlanCost + preview.discountAmount) }}
+                    </span>
+                  </div>
+                  <!-- 折扣信息 -->
+                  <div 
+                    v-if="preview.discountAmount > 0"
+                    class="flex justify-between"
+                  >
+                    <span :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">
+                      {{ t('billing.discountAmount') }} (-{{ (preview.discountRate * 100).toFixed(0) }}%)
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">
+                      -¥{{ formatMoney(preview.discountAmount) }}
+                    </span>
+                  </div>
+                  <div v-if="preview.discountAmount > 0" class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.newPlanCost : t('billing.newPlanCostFinal') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      ¥{{ formatMoney(preview.newPlanCost) }}
+                    </span>
+                  </div>
+                  <!-- 无折扣时直接显示新方案剩余费用 -->
+                  <div v-if="preview.discountAmount <= 0" class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.newPlanCost : t('billing.newPlanCostOriginal') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      ¥{{ formatMoney(preview.newPlanCost) }}
+                    </span>
+                  </div>
+                  <div class="border-t my-2" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'" />
+                  <div class="flex justify-between font-medium">
+                    <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.needPay : t('billing.needPay') }}
+                    </span>
+                    <span 
+                      :class="insufficientBalance ? 'text-red-500' : 'text-blue-500'"
+                    >
+                      ¥{{ formatMoney(preview.priceDiff) }}
+                    </span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('billing.newExpiresAt') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      {{ formatDate(preview.newExpiresAt) }}
+                    </span>
+                  </div>
+                </div>
+
+                <!-- 新配置 -->
+                <div 
+                  class="mt-3 pt-3 border-t text-xs"
+                  :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'"
+                >
+                  <div :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('billing.newConfig') }}: 
+                    {{ preview.newConfig.cpu }}% CPU · 
+                    {{ formatMemory(preview.newConfig.memory) }} · 
+                    {{ formatDisk(preview.newConfig.disk) }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- 余额不足提示 -->
+              <div 
+                v-if="preview && insufficientBalance"
+                class="p-3 rounded-lg mb-4 text-sm"
+                :class="themeStore.isDark ? 'bg-yellow-900/20 text-yellow-400' : 'bg-yellow-50 text-yellow-600'"
+              >
+                {{ t('billing.insufficientBalance') }}
+                <a href="/wallet" class="underline ml-1">{{ t('billing.goRecharge') }}</a>
+              </div>
+
+              <!-- 错误提示 -->
+              <div 
+                v-if="error && plans.length"
+                class="p-3 rounded-lg mb-4 bg-red-500/10 text-red-500 text-sm"
+              >
+                {{ error }}
+              </div>
+            </template>
+          </div>
+
+          <!-- Footer -->
+          <div
+            class="flex justify-end gap-3 px-6 py-4 border-t sticky bottom-0"
+            :class="themeStore.isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-white'"
+          >
+            <button
+              class="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+              :class="themeStore.isDark
+                ? 'text-gray-300 hover:bg-gray-800'
+                : 'text-gray-700 hover:bg-gray-100'"
+              @click="handleClose"
+            >
+              {{ t('common.cancel') }}
+            </button>
+            <button
+              :disabled="loading || loadingPreview || changing || !preview || 
+                !preview.canChange ||
+                insufficientBalance"
+              class="px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700"
+              @click="handleChangePlan"
+            >
+              {{ changing ? t('billing.changePlanInProgress') : t('billing.upgrade') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .relative,
+.modal-leave-active .relative {
+  transition: transform 0.2s ease;
+}
+
+.modal-enter-from .relative,
+.modal-leave-to .relative {
+  transform: scale(0.95);
+}
+</style>
diff --git a/client/src/components/instance/modals/ConfigEditModal.vue b/client/src/components/instance/modals/ConfigEditModal.vue
new file mode 100644
index 0000000..0ad7485
--- /dev/null
+++ b/client/src/components/instance/modals/ConfigEditModal.vue
@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import type { Instance, Package, UserQuota } from '@/types/api'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+interface ResourceStats {
+  memory: { usage: number; limit: number; usagePercent: number }
+  disk: { usage: number; limit: number; usagePercent: number }
+}
+
+interface Props {
+  show: boolean
+  instance: Instance | null
+  pkg: Package | null
+  userQuota: UserQuota | null
+  stats?: ResourceStats
+  loading?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  'confirm': [data: { cpu?: number; memory?: number; disk?: number; monthlyTrafficLimit?: string | null }]
+}>()
+
+// 表单数据
+const formCpu = ref<string>('100')
+const formMemory = ref<string>('1024')
+const formDisk = ref<string>('10.0')
+const formTraffic = ref<string>('')
+
+// 初始化表单数据
+watch(() => props.show, (newVal) => {
+  if (newVal && props.instance) {
+    formCpu.value = props.instance.cpu.toString()
+    formMemory.value = props.instance.memory.toString()
+    // 硬盘：从MB转换为GB显示（1024进制）
+    const diskGB = props.instance.disk / 1024
+    formDisk.value = diskGB.toFixed(1)
+    // 流量：从 monthlyTrafficLimit 转换（Bytes -> GB）
+    const instanceWithDetails = props.instance as any
+    if (instanceWithDetails.monthlyTrafficLimit) {
+      const bytes = BigInt(instanceWithDetails.monthlyTrafficLimit)
+      const gb = Number(bytes) / (1024 * 1024 * 1024)
+      formTraffic.value = Math.round(gb).toString()
+    } else {
+      formTraffic.value = ''
+    }
+  }
+})
+
+// 格式化内存
+function formatMemory(mb: number | null | undefined): string {
+  if (!mb) return '0 MB'
+  if (mb >= 1024) return (mb / 1024).toFixed(mb >= 10240 ? 0 : 1) + ' GB'
+  return mb + ' MB'
+}
+
+// 格式化磁盘（1024进制）
+function formatDisk(mb: number | null | undefined): string {
+  if (!mb) return '0 MB'
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+// 格式化流量（GB）
+function formatTraffic(gb: number | string | null | undefined): string {
+  if (!gb || gb === '') return '0 GB'
+  const num = typeof gb === 'string' ? parseFloat(gb) : gb
+  if (isNaN(num)) return '0 GB'
+  return Math.round(num) + ' GB'
+}
+
+// 获取当前流量（GB）
+const currentTrafficGB = computed(() => {
+  const instanceWithDetails = props.instance as any
+  if (instanceWithDetails?.monthlyTrafficLimit) {
+    const bytes = BigInt(instanceWithDetails.monthlyTrafficLimit)
+    return Number(bytes) / (1024 * 1024 * 1024)
+  }
+  return 0
+})
+
+// 计算资源变化量
+const cpuDelta = computed(() => {
+  if (!props.instance) return 0
+  const cpu = parseFloat(formCpu.value)
+  if (isNaN(cpu)) return 0
+  return cpu - props.instance.cpu
+})
+const memoryDelta = computed(() => {
+  if (!props.instance) return 0
+  const memory = parseFloat(formMemory.value)
+  if (isNaN(memory)) return 0
+  return memory - props.instance.memory
+})
+const diskDelta = computed(() => {
+  if (!props.instance) return 0
+  const diskGB = parseFloat(formDisk.value)
+  if (isNaN(diskGB)) return 0
+  const diskMB = diskGB * 1024  // 1024进制
+  return diskMB - props.instance.disk
+})
+const trafficDelta = computed(() => {
+  if (!formTraffic.value) return 0
+  const newGB = parseFloat(formTraffic.value)
+  if (isNaN(newGB)) return 0
+  return newGB - currentTrafficGB.value
+})
+
+// 计算是否有变化
+const hasChanges = computed(() => {
+  const trafficChanged = formTraffic.value === '' 
+    ? currentTrafficGB.value > 0  // 清空流量限制
+    : trafficDelta.value !== 0    // 修改流量限制
+  return cpuDelta.value !== 0 || 
+         memoryDelta.value !== 0 || 
+         diskDelta.value !== 0 || 
+         trafficChanged
+})
+
+function handleCpuInput(value: string) {
+  // 允许自由输入，不做实时规范化
+  formCpu.value = value
+}
+
+function handleCpuBlur() {
+  // 失去焦点时格式化为整数
+  const num = parseFloat(formCpu.value)
+  if (isNaN(num) || num <= 0) {
+    formCpu.value = '1'
+    return
+  }
+  // 四舍五入为整数
+  formCpu.value = Math.round(num).toString()
+}
+
+function handleMemoryInput(value: string) {
+  // 允许自由输入，不做实时规范化
+  formMemory.value = value
+}
+
+function handleMemoryBlur() {
+  // 失去焦点时格式化为整数
+  const num = parseFloat(formMemory.value)
+  if (isNaN(num) || num <= 0) {
+    formMemory.value = '1'
+    return
+  }
+  // 四舍五入为整数
+  formMemory.value = Math.round(num).toString()
+}
+
+function handleDiskInput(value: string) {
+  // 允许自由输入
+  formDisk.value = value
+}
+
+function handleDiskBlur() {
+  // 失去焦点时格式化为一位小数
+  const num = parseFloat(formDisk.value)
+  if (isNaN(num) || num <= 0) {
+    formDisk.value = '1'
+    return
+  }
+  // 保留一位小数
+  formDisk.value = num.toFixed(1)
+}
+
+function handleTrafficInput(value: string) {
+  // 允许自由输入
+  formTraffic.value = value
+}
+
+function handleTrafficBlur() {
+  // 失去焦点时格式化为整数
+  if (formTraffic.value === '') {
+    return
+  }
+  const num = parseFloat(formTraffic.value)
+  if (isNaN(num) || num < 0) {
+    formTraffic.value = ''
+    return
+  }
+  // 四舍五入为整数
+  formTraffic.value = Math.round(num).toString()
+}
+
+function handleConfirm() {
+  if (!hasChanges.value) return
+  
+  const data: { cpu?: number; memory?: number; disk?: number; monthlyTrafficLimit?: string | null } = {}
+  if (cpuDelta.value !== 0) {
+    const cpu = parseFloat(formCpu.value)
+    if (!isNaN(cpu)) data.cpu = cpu
+  }
+  if (memoryDelta.value !== 0) {
+    const memory = parseFloat(formMemory.value)
+    if (!isNaN(memory)) data.memory = memory
+  }
+  if (diskDelta.value !== 0) {
+    const diskGB = parseFloat(formDisk.value)
+    if (!isNaN(diskGB)) {
+      data.disk = diskGB * 1024 // 转换为MB（1024进制）
+    }
+  }
+  // 处理流量限制
+  if (formTraffic.value === '') {
+    // 清空流量限制（如果原来有限制）
+    if (currentTrafficGB.value > 0) {
+      data.monthlyTrafficLimit = null
+    }
+  } else {
+    // 设置流量限制
+    const gb = parseFloat(formTraffic.value)
+    if (!isNaN(gb) && gb >= 0) {
+      const bytes = BigInt(Math.floor(gb * 1024 * 1024 * 1024))
+      data.monthlyTrafficLimit = bytes.toString()
+    }
+  }
+  
+  emit('confirm', data)
+}
+
+function handleClose() {
+  emit('update:show', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div 
+        v-if="show" 
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        @click.self="handleClose"
+      >
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/50"></div>
+        
+        <!-- Modal -->
+        <div 
+          class="modal-content relative w-full max-w-3xl rounded-xl shadow-xl"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+        >
+          <!-- Header -->
+          <div 
+            class="flex items-center justify-between px-6 py-4 border-b"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <h3 
+              class="text-lg font-medium"
+              :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+            >
+              {{ t('instance.configEdit.title') }}
+            </h3>
+            <button 
+              class="p-1 rounded-lg transition-colors"
+              :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-400' : 'hover:bg-gray-100 text-gray-500'"
+              @click="handleClose"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        
+          <!-- Body -->
+          <div class="px-6 py-6">
+            <div class="overflow-x-auto">
+              <table class="w-full">
+                <thead>
+                  <tr class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+                    <th class="text-left py-3 pr-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('instance.configEdit.resourceType') }}
+                    </th>
+                    <th class="text-left py-3 px-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('instance.configEdit.current') }}
+                    </th>
+                    <th class="text-left py-3 px-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('instance.configEdit.modifyTo') }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <!-- CPU -->
+                  <tr class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'">
+                    <td class="py-4 pr-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('instance.configEdit.cpu') }}
+                    </td>
+                    <td class="py-4 px-4 text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ instance?.cpu || 0 }}%
+                    </td>
+                    <td class="py-4 px-4">
+                      <div class="flex items-center gap-2">
+                        <input
+                          v-model="formCpu"
+                          type="number"
+                          step="1"
+                          placeholder=""
+                          class="w-32 px-3 py-2 text-sm rounded border"
+                          :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-200' : 'bg-white border-gray-300 text-gray-900'"
+                          @input="handleCpuInput(($event.target as HTMLInputElement).value)"
+                          @blur="handleCpuBlur"
+                        />
+                        <span class="text-sm text-gray-500">%</span>
+                      </div>
+                    </td>
+                  </tr>
+
+                  <!-- Memory -->
+                  <tr class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'">
+                    <td class="py-4 pr-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('instance.configEdit.memory') }}
+                    </td>
+                    <td class="py-4 px-4 text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ formatMemory(instance?.memory) }}
+                    </td>
+                    <td class="py-4 px-4">
+                      <div class="flex items-center gap-2">
+                        <input
+                          v-model="formMemory"
+                          type="number"
+                          step="1"
+                          placeholder=""
+                          class="w-32 px-3 py-2 text-sm rounded border"
+                          :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-200' : 'bg-white border-gray-300 text-gray-900'"
+                          @input="handleMemoryInput(($event.target as HTMLInputElement).value)"
+                          @blur="handleMemoryBlur"
+                        />
+                        <span class="text-sm text-gray-500">MB</span>
+                      </div>
+                    </td>
+                  </tr>
+
+                  <!-- Disk -->
+                  <tr class="border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'">
+                    <td class="py-4 pr-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('instance.configEdit.disk') }}
+                    </td>
+                    <td class="py-4 px-4 text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ formatDisk(instance?.disk) }}
+                    </td>
+                    <td class="py-4 px-4">
+                      <div class="flex items-center gap-2">
+                        <input
+                          v-model="formDisk"
+                          type="number"
+                          step="0.1"
+                          placeholder=""
+                          class="w-32 px-3 py-2 text-sm rounded border"
+                          :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-200' : 'bg-white border-gray-300 text-gray-900'"
+                          @input="handleDiskInput(($event.target as HTMLInputElement).value)"
+                          @blur="handleDiskBlur"
+                        />
+                        <span class="text-sm text-gray-500">GB</span>
+                      </div>
+                    </td>
+                  </tr>
+
+                  <!-- Traffic -->
+                  <tr>
+                    <td class="py-4 pr-4 text-sm font-medium" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ t('instance.configEdit.traffic') }}
+                    </td>
+                    <td class="py-4 px-4 text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ formatTraffic(currentTrafficGB) }}
+                    </td>
+                    <td class="py-4 px-4">
+                      <div class="flex items-center gap-2">
+                        <input
+                          v-model="formTraffic"
+                          type="number"
+                          step="1"
+                          :placeholder="t('instance.configEdit.trafficHint')"
+                          class="w-32 px-3 py-2 text-sm rounded border"
+                          :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-200' : 'bg-white border-gray-300 text-gray-900'"
+                          @input="handleTrafficInput(($event.target as HTMLInputElement).value)"
+                          @blur="handleTrafficBlur"
+                        />
+                        <span class="text-sm text-gray-500">GB</span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        
+          <!-- Footer -->
+          <div 
+            class="flex justify-end gap-3 px-6 py-4 border-t"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <button 
+              class="btn-ghost"
+              :disabled="loading"
+              @click="handleClose"
+            >
+              {{ t('common.cancel') }}
+            </button>
+            <button 
+              class="btn-primary"
+              :disabled="!hasChanges || loading"
+              @click="handleConfirm"
+            >
+              <svg v-if="loading" class="w-4 h-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+              {{ loading ? t('common.saving') : t('common.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/DestroyInstanceModal.vue b/client/src/components/instance/modals/DestroyInstanceModal.vue
new file mode 100644
index 0000000..571946a
--- /dev/null
+++ b/client/src/components/instance/modals/DestroyInstanceModal.vue
@@ -0,0 +1,478 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+interface DestroyInfo {
+  canDestroy: boolean
+  cannotDestroyReason: string
+  isFreeInstance: boolean
+  isFirstTime: boolean
+  rules: {
+    feeRate: number
+  }
+  refund: {
+    remainingDays: number
+    remainingValue: number
+    feeRate: number
+    feeAmount: number
+    refundAmount: number
+    destroyCount: number
+    maxRefundable: number
+  }
+  instance: {
+    id: number
+    name: string
+    hostName: string
+    planName: string | null
+  }
+}
+
+interface Props {
+  visible: boolean
+  loading: boolean
+  destroyInfo: DestroyInfo | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'destroy'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const confirmInput = ref('')
+const rulesExpanded = ref(false)
+
+// 确认输入是否正确
+const isConfirmValid = computed(() => {
+  if (!props.destroyInfo) return false
+  return confirmInput.value === props.destroyInfo.instance.name
+})
+
+// 是否可以执行销毁
+const canExecuteDestroy = computed(() => {
+  if (!props.destroyInfo) return false
+  return props.destroyInfo.canDestroy && isConfirmValid.value && !props.loading
+})
+
+// 重置状态
+watch(() => props.visible, (visible) => {
+  if (!visible) {
+    confirmInput.value = ''
+    rulesExpanded.value = false
+  }
+})
+
+function close() {
+  emit('update:visible', false)
+}
+
+function handleDestroy() {
+  if (canExecuteDestroy.value) {
+    emit('destroy')
+  }
+}
+
+// 格式化货币
+function formatCurrency(value: number): string {
+  return `¥${value.toFixed(2)}`
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <!-- Backdrop -->
+      <div 
+        class="absolute inset-0 backdrop-blur-sm"
+        :class="themeStore.isDark ? 'bg-black/60' : 'bg-black/30'"
+        @click="close"
+      ></div>
+      
+      <!-- Modal -->
+      <div 
+        class="relative w-full max-w-lg border rounded-xl shadow-2xl animate-fade-in max-h-[90vh] overflow-y-auto"
+        :class="themeStore.isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+      >
+        <!-- Header -->
+        <div 
+          class="flex items-center justify-between p-5 border-b sticky top-0 z-10"
+          :class="themeStore.isDark ? 'border-gray-800 bg-gray-900' : 'border-gray-200 bg-white'"
+        >
+          <div class="flex items-center gap-3">
+            <div class="p-2 rounded-lg bg-red-500/10">
+              <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </div>
+            <h3 
+              class="text-base font-medium"
+              :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+            >
+              {{ t('instance.destroy.title') }}
+            </h3>
+          </div>
+          <button 
+            :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'" 
+            @click="close"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <div class="p-5 space-y-4">
+          <!-- Loading state -->
+          <div v-if="!destroyInfo" class="flex items-center justify-center py-8">
+            <svg class="w-8 h-8 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          </div>
+
+          <template v-else>
+            <!-- Warning -->
+            <div class="p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+              <div class="flex items-start gap-2">
+                <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <p class="text-sm text-red-500 font-medium">
+                  {{ destroyInfo.isFreeInstance ? t('instance.destroy.warningFree') : t('instance.destroy.warning') }}
+                </p>
+              </div>
+            </div>
+
+            <!-- Cannot destroy reason -->
+            <div 
+              v-if="!destroyInfo.canDestroy" 
+              class="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20"
+            >
+              <div class="flex items-start gap-2">
+                <svg class="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <p 
+                  class="text-sm font-medium"
+                  :class="themeStore.isDark ? 'text-yellow-400' : 'text-yellow-600'"
+                >
+                  {{ destroyInfo.cannotDestroyReason || t('instance.destroy.cannotDestroy') }}
+                </p>
+              </div>
+            </div>
+
+            <!-- Rules (Collapsible) -->
+            <div 
+              class="rounded-lg border overflow-hidden"
+              :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'"
+            >
+              <button
+                class="w-full flex items-center justify-between p-3 text-left transition-colors"
+                :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'"
+                @click="rulesExpanded = !rulesExpanded"
+              >
+                <div class="flex items-center gap-2">
+                  <svg 
+                    class="w-4 h-4"
+                    :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-500'"
+                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span 
+                    class="text-sm font-medium"
+                    :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+                  >
+                    {{ t('instance.destroy.rulesTitle') }}
+                  </span>
+                </div>
+                <svg 
+                  class="w-4 h-4 transition-transform"
+                  :class="[
+                    themeStore.isDark ? 'text-gray-500' : 'text-gray-400',
+                    rulesExpanded ? 'rotate-180' : ''
+                  ]"
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <div 
+                v-show="rulesExpanded"
+                class="px-3 pb-3 space-y-2 border-t"
+                :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'"
+              >
+                <div class="pt-3 space-y-2">
+                  <!-- First free -->
+                  <div class="flex items-start gap-2">
+                    <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    <div>
+                      <p 
+                        class="text-xs font-medium"
+                        :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+                      >
+                        {{ t('instance.destroy.ruleFirstFree') }}
+                      </p>
+                      <p 
+                        class="text-xs"
+                        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                      >
+                        {{ t('instance.destroy.ruleFirstFreeDesc') }}
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <!-- Fee rate -->
+                  <div class="flex items-start gap-2">
+                    <svg class="w-4 h-4 text-orange-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <div>
+                      <p 
+                        class="text-xs font-medium"
+                        :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+                      >
+                        {{ t('instance.destroy.ruleFeeRate', { rate: destroyInfo.rules.feeRate * 100 }) }}
+                      </p>
+                      <p 
+                        class="text-xs"
+                        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                      >
+                        {{ t('instance.destroy.ruleFeeRateDesc', { rate: destroyInfo.rules.feeRate * 100 }) }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <!-- Paid traffic threshold -->
+                  <div class="flex items-start gap-2">
+                    <svg class="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6h13M9 5v6h13M5 5v12" />
+                    </svg>
+                    <div>
+                      <p 
+                        class="text-xs font-medium"
+                        :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+                      >
+                        {{ t('instance.destroy.ruleTrafficThreshold') }}
+                      </p>
+                      <p 
+                        class="text-xs"
+                        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                      >
+                        {{ t('instance.destroy.ruleTrafficThresholdDesc') }}
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <!-- Free instance -->
+                  <div class="flex items-start gap-2">
+                    <svg class="w-4 h-4 text-gray-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                    </svg>
+                    <div>
+                      <p 
+                        class="text-xs font-medium"
+                        :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'"
+                      >
+                        {{ t('instance.destroy.ruleFreeInstance') }}
+                      </p>
+                      <p 
+                        class="text-xs"
+                        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                      >
+                        {{ t('instance.destroy.ruleFreeInstanceDesc') }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Instance Info -->
+            <div 
+              class="rounded-lg p-3 space-y-2"
+              :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+            >
+              <p 
+                class="text-xs font-medium mb-2"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+              >
+                {{ t('instance.destroy.instanceInfo') }}
+              </p>
+              <div class="grid grid-cols-2 gap-2 text-xs">
+                <div>
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.instanceName') }}
+                  </span>
+                </div>
+                <div :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  {{ destroyInfo.instance.name }}
+                </div>
+                <div>
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.hostName') }}
+                  </span>
+                </div>
+                <div :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  {{ destroyInfo.instance.hostName }}
+                </div>
+                <div v-if="destroyInfo.instance.planName">
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.planName') }}
+                  </span>
+                </div>
+                <div v-if="destroyInfo.instance.planName" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  {{ destroyInfo.instance.planName }}
+                </div>
+              </div>
+            </div>
+
+            <!-- Refund Info (only for paid instances) -->
+            <div 
+              v-if="!destroyInfo.isFreeInstance"
+              class="rounded-lg p-3 space-y-2"
+              :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+            >
+              <p 
+                class="text-xs font-medium mb-2"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+              >
+                {{ t('instance.destroy.refundInfo') }}
+              </p>
+              <div class="grid grid-cols-2 gap-2 text-xs">
+                <div>
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.remainingDays') }}
+                  </span>
+                </div>
+                <div :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  {{ destroyInfo.refund.remainingDays }} {{ t('instance.destroy.days') }}
+                </div>
+                <div>
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.remainingValue') }}
+                  </span>
+                </div>
+                <div :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  {{ formatCurrency(destroyInfo.refund.remainingValue) }}
+                </div>
+                <template v-if="destroyInfo.refund.maxRefundable > 0">
+                  <div>
+                    <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                      {{ t('instance.destroy.maxRefundable') }}
+                    </span>
+                  </div>
+                  <div class="text-orange-500">
+                    {{ formatCurrency(destroyInfo.refund.maxRefundable) }}
+                  </div>
+                </template>
+                <div>
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.feeRate') }}
+                  </span>
+                </div>
+                <div :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  <template v-if="destroyInfo.isFirstTime">
+                    <span class="text-green-500">{{ t('instance.destroy.firstTimeFree') }}</span>
+                  </template>
+                  <template v-else>
+                    {{ (destroyInfo.refund.feeRate * 100).toFixed(0) }}%
+                  </template>
+                </div>
+                <div>
+                  <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                    {{ t('instance.destroy.feeAmount') }}
+                  </span>
+                </div>
+                <div :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                  {{ formatCurrency(destroyInfo.refund.feeAmount) }}
+                </div>
+                <div>
+                  <span 
+                    class="font-medium"
+                    :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'"
+                  >
+                    {{ t('instance.destroy.refundAmount') }}
+                  </span>
+                </div>
+                <div 
+                  class="font-medium"
+                  :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'"
+                >
+                  {{ formatCurrency(destroyInfo.refund.refundAmount) }}
+                </div>
+              </div>
+            </div>
+
+            <!-- Free instance notice -->
+            <div 
+              v-else
+              class="p-3 rounded-lg"
+              :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+            >
+              <p 
+                class="text-xs"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+              >
+                {{ t('instance.destroy.freeInstanceNoRefund') }}
+              </p>
+            </div>
+
+            <!-- Confirmation Input -->
+            <div v-if="destroyInfo.canDestroy" class="space-y-2">
+              <label 
+                class="block text-xs"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+              >
+                {{ t('instance.destroy.confirmHint', { name: destroyInfo.instance.name }) }}
+              </label>
+              <input
+                v-model="confirmInput"
+                type="text"
+                :placeholder="t('instance.destroy.confirmPlaceholder')"
+                class="w-full px-3 py-2 text-sm rounded-lg border outline-none transition-colors"
+                :class="[
+                  themeStore.isDark 
+                    ? 'bg-gray-800 border-gray-700 text-gray-200 placeholder-gray-500 focus:border-red-500' 
+                    : 'bg-white border-gray-200 text-gray-900 placeholder-gray-400 focus:border-red-500',
+                  isConfirmValid ? 'border-green-500' : ''
+                ]"
+              />
+            </div>
+
+            <!-- Action buttons -->
+            <div class="flex justify-end gap-3 pt-2">
+              <button 
+                type="button" 
+                class="btn-secondary"
+                @click="close"
+              >
+                {{ t('instance.destroy.cancel') }}
+              </button>
+              <button 
+                :disabled="!canExecuteDestroy"
+                class="btn-danger"
+                @click="handleDestroy"
+              >
+                <svg v-if="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                {{ loading ? t('instance.destroy.destroying') : t('instance.destroy.confirmButton') }}
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/PortConflictModal.vue b/client/src/components/instance/modals/PortConflictModal.vue
new file mode 100644
index 0000000..cc45805
--- /dev/null
+++ b/client/src/components/instance/modals/PortConflictModal.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+
+const { t } = useI18n()
+
+interface Conflict {
+  publicPort: number
+  suggestedPort: number | null
+}
+
+interface Props {
+  visible: boolean
+  loading: boolean
+  conflicts: Conflict[]
+  portRangeStart?: number | null
+  portRangeEnd?: number | null
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'confirm', resolvedPorts: Array<{ original: number; resolved: number }>): void
+  (e: 'cancel'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+// 用户输入的解决端口
+const resolvedPorts = ref<Record<number, string>>({})
+
+// 初始化解决端口为建议值
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    const ports: Record<number, string> = {}
+    props.conflicts.forEach(c => {
+      ports[c.publicPort] = c.suggestedPort?.toString() || ''
+    })
+    resolvedPorts.value = ports
+  } else {
+    resolvedPorts.value = {}
+  }
+}, { immediate: true })
+
+// 验证单个端口
+function validatePort(value: string): boolean {
+  if (!value.trim()) return false
+  const port = parseInt(value, 10)
+  if (isNaN(port) || port < 1 || port > 65535) return false
+  if (props.portRangeStart && props.portRangeEnd) {
+    if (port < props.portRangeStart || port > props.portRangeEnd) return false
+  }
+  return true
+}
+
+// 检查是否有重复端口
+const duplicatePorts = computed(() => {
+  const values = Object.values(resolvedPorts.value).filter(v => v.trim())
+  const seen = new Set<string>()
+  const duplicates = new Set<string>()
+  values.forEach(v => {
+    if (seen.has(v)) {
+      duplicates.add(v)
+    }
+    seen.add(v)
+  })
+  return duplicates
+})
+
+// 检查所有端口是否有效
+const allValid = computed(() => {
+  return props.conflicts.every(c => {
+    const value = resolvedPorts.value[c.publicPort]
+    if (!validatePort(value)) return false
+    if (duplicatePorts.value.has(value)) return false
+    return true
+  })
+})
+
+// 使用所有建议端口
+function useSuggested() {
+  const ports: Record<number, string> = {}
+  props.conflicts.forEach(c => {
+    ports[c.publicPort] = c.suggestedPort?.toString() || ''
+  })
+  resolvedPorts.value = ports
+}
+
+function handleConfirm() {
+  const result = props.conflicts.map(c => ({
+    original: c.publicPort,
+    resolved: parseInt(resolvedPorts.value[c.publicPort], 10)
+  }))
+  emit('confirm', result)
+}
+
+function close() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div 
+          class="absolute inset-0 backdrop-blur-sm"
+          :class="themeStore.isDark ? 'bg-black/60' : 'bg-black/30'"
+          @click="close"
+        ></div>
+        
+        <div 
+          class="modal-content relative w-full max-w-lg border rounded-xl shadow-2xl"
+          :class="themeStore.isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+        >
+          <!-- Header -->
+          <div 
+            class="flex items-center justify-between p-5 border-b"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <div class="flex items-center gap-3">
+              <div class="p-2 rounded-lg bg-amber-500/10">
+                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <div>
+                <h3 
+                  class="text-base font-medium"
+                  :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+                >
+                  {{ t('portConflict.title') }}
+                </h3>
+                <p class="text-xs text-gray-500 mt-0.5">
+                  {{ t('portConflict.subtitle', { count: conflicts.length }) }}
+                </p>
+              </div>
+            </div>
+            <button 
+              :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'" 
+              @click="close"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="p-5">
+            <!-- 说明 -->
+            <p 
+              class="text-sm mb-4"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ t('portConflict.description') }}
+            </p>
+
+            <!-- 冲突列表 -->
+            <div class="space-y-3 max-h-64 overflow-y-auto">
+              <div 
+                v-for="conflict in conflicts" 
+                :key="conflict.publicPort"
+                class="flex items-center gap-3 p-3 rounded-lg"
+                :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-50'"
+              >
+                <!-- 原端口 -->
+                <div class="flex-shrink-0 w-24">
+                  <div class="text-xs text-gray-500 mb-1">{{ t('portConflict.originalPort') }}</div>
+                  <div class="flex items-center gap-1.5">
+                    <span 
+                      class="font-mono text-sm"
+                      :class="themeStore.isDark ? 'text-red-400' : 'text-red-600'"
+                    >
+                      {{ conflict.publicPort }}
+                    </span>
+                    <span class="text-xs px-1.5 py-0.5 rounded bg-red-500/10 text-red-500">
+                      {{ t('portConflict.occupied') }}
+                    </span>
+                  </div>
+                </div>
+
+                <!-- 箭头 -->
+                <div class="flex-shrink-0">
+                  <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  </svg>
+                </div>
+
+                <!-- 新端口输入 -->
+                <div class="flex-1">
+                  <div class="text-xs text-gray-500 mb-1">{{ t('portConflict.newPort') }}</div>
+                  <input
+                    v-model="resolvedPorts[conflict.publicPort]"
+                    type="text"
+                    class="input text-sm h-9"
+                    :class="{
+                      'border-red-500 focus:ring-red-500': !validatePort(resolvedPorts[conflict.publicPort]) || duplicatePorts.has(resolvedPorts[conflict.publicPort])
+                    }"
+                    :placeholder="conflict.suggestedPort?.toString() || ''"
+                  />
+                </div>
+
+                <!-- 建议标签 -->
+                <div 
+                  v-if="conflict.suggestedPort && resolvedPorts[conflict.publicPort] === conflict.suggestedPort.toString()"
+                  class="flex-shrink-0"
+                >
+                  <span class="text-xs px-1.5 py-0.5 rounded bg-green-500/10 text-green-500">
+                    {{ t('portConflict.suggested') }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 端口范围提示 -->
+            <p 
+              v-if="portRangeStart && portRangeEnd" 
+              class="text-xs mt-3"
+              :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+            >
+              {{ t('portConflict.rangeHint', { start: portRangeStart, end: portRangeEnd }) }}
+            </p>
+          </div>
+
+          <!-- Footer -->
+          <div 
+            class="flex items-center justify-between p-5 border-t"
+            :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+          >
+            <button 
+              type="button" 
+              class="text-sm transition-colors"
+              :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'"
+              @click="useSuggested"
+            >
+              {{ t('portConflict.useSuggested') }}
+            </button>
+            
+            <div class="flex gap-3">
+              <button type="button" class="btn-secondary" @click="close">
+                {{ t('portConflict.cancel') }}
+              </button>
+              <button 
+                type="button" 
+                class="btn-primary" 
+                :disabled="!allValid || loading"
+                @click="handleConfirm"
+              >
+                <svg v-if="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+                {{ t('portConflict.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/RebuildModal.vue b/client/src/components/instance/modals/RebuildModal.vue
new file mode 100644
index 0000000..876cbcf
--- /dev/null
+++ b/client/src/components/instance/modals/RebuildModal.vue
@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import InitCommandSelector from '@/components/extensions/InitCommandSelector.vue'
+
+const { t } = useI18n()
+
+interface ImageOption {
+  incusAlias: string
+  name: string
+  description: string | null
+  icon?: string | null
+}
+
+interface SshKeyOption {
+  id: number
+  name: string
+}
+
+interface Props {
+  visible: boolean
+  loading: boolean
+  availableImages: ImageOption[]
+  sshKeys: SshKeyOption[]
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'submit', data: { image: string; sshKeyId: number; customInitCommandIds?: number[] }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+const selectedImage = ref<string>('')
+const selectedSshKeyId = ref<number | null>(null)
+const customInitCommandIds = ref<number[]>([])
+const isImageDropdownOpen = ref(false)
+const imageSearchQuery = ref('')
+
+// 当前选中的镜像数据
+const selectedImageData = computed(() => {
+  return props.availableImages.find(img => img.incusAlias === selectedImage.value)
+})
+
+// 获取当前选中镜像的发行版标识
+const selectedImageDistro = computed(() => {
+  return selectedImageData.value?.icon || 'linux'
+})
+
+// 过滤后的镜像列表
+const filteredImages = computed(() => {
+  if (!imageSearchQuery.value) return props.availableImages
+  const query = imageSearchQuery.value.toLowerCase()
+  return props.availableImages.filter(img => 
+    img.name.toLowerCase().includes(query)
+  )
+})
+
+// 按发行版分组
+const groupedImages = computed(() => {
+  const groups: Record<string, ImageOption[]> = {}
+  for (const img of filteredImages.value) {
+    const distro = img.icon || 'other'
+    if (!groups[distro]) groups[distro] = []
+    groups[distro].push(img)
+  }
+  return groups
+})
+
+// 当弹窗打开或数据变化时，初始化选中的值
+watch(
+  [() => props.visible, () => props.availableImages, () => props.sshKeys],
+  ([visible, images, keys]) => {
+    if (visible) {
+      // 设置默认镜像
+      if (images.length > 0 && !selectedImage.value) {
+        selectedImage.value = images[0].incusAlias
+      }
+      // 设置默认 SSH 密钥
+      if (keys.length > 0 && !selectedSshKeyId.value) {
+        selectedSshKeyId.value = keys[0].id
+      }
+    } else {
+      // 弹窗关闭时重置
+      selectedImage.value = ''
+      selectedSshKeyId.value = null
+      customInitCommandIds.value = []
+      isImageDropdownOpen.value = false
+      imageSearchQuery.value = ''
+    }
+  },
+  { immediate: true }
+)
+
+function selectImage(alias: string) {
+  selectedImage.value = alias
+  isImageDropdownOpen.value = false
+  imageSearchQuery.value = ''
+}
+
+function toggleImageDropdown() {
+  isImageDropdownOpen.value = !isImageDropdownOpen.value
+  if (!isImageDropdownOpen.value) imageSearchQuery.value = ''
+}
+
+function handleSubmit(): void {
+  if (selectedImage.value && selectedSshKeyId.value) {
+    emit('submit', { 
+      image: selectedImage.value, 
+      sshKeyId: selectedSshKeyId.value,
+      customInitCommandIds: customInitCommandIds.value.length > 0 ? customInitCommandIds.value : undefined
+    })
+  }
+}
+
+function close(): void {
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div 
+        class="absolute inset-0 backdrop-blur-sm"
+        :class="themeStore.isDark ? 'bg-black/60' : 'bg-black/30'"
+        @click="close"
+      ></div>
+      
+      <div 
+        class="relative w-full max-w-md border rounded-xl shadow-2xl animate-fade-in"
+        :class="themeStore.isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+      >
+        <div 
+          class="flex items-center justify-between p-5 border-b"
+          :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+        >
+          <h3 
+            class="text-base font-medium"
+            :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+          >
+            {{ t('rebuildModal.title') }}
+          </h3>
+          <button 
+            :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'" 
+            @click="close"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <div class="p-5 space-y-4">
+          <!-- Info: preserved settings + password hint -->
+          <div 
+            class="p-3 rounded-lg"
+            :class="themeStore.isDark ? 'bg-blue-500/10 border border-blue-500/20' : 'bg-blue-50 border border-blue-200'"
+          >
+            <div 
+              class="text-xs space-y-1"
+              :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'"
+            >
+              <p>{{ t('rebuildModal.preserveInfo') }}</p>
+              <p>{{ t('rebuildModal.passwordHint') }}</p>
+            </div>
+          </div>
+
+          <!-- Image selection -->
+          <div>
+            <label class="block text-xs text-gray-500 mb-1.5">{{ t('rebuildModal.selectImage') }}</label>
+            <div class="image-selector-container relative">
+              <!-- Trigger button -->
+              <button
+                type="button"
+                class="w-full flex items-center gap-3 p-3 rounded-lg border transition-colors"
+                :class="[
+                  themeStore.isDark 
+                    ? 'border-gray-700 bg-gray-800 hover:border-gray-600' 
+                    : 'border-gray-200 bg-white hover:border-gray-300',
+                  isImageDropdownOpen ? 'border-blue-500' : ''
+                ]"
+                @click.stop="toggleImageDropdown"
+              >
+                <DistroIcon
+                  v-if="selectedImageData"
+                  :distro="selectedImageData.icon || selectedImageData.name"
+                  :size="24"
+                  class="flex-shrink-0"
+                />
+                <span 
+                  class="flex-1 text-left text-sm truncate"
+                  :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+                >
+                  {{ selectedImageData?.name || t('rebuildModal.selectImage') }}
+                </span>
+                <svg 
+                  class="w-4 h-4 flex-shrink-0 transition-transform"
+                  :class="[
+                    themeStore.isDark ? 'text-gray-500' : 'text-gray-400',
+                    isImageDropdownOpen ? 'rotate-180' : ''
+                  ]"
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <!-- Dropdown panel -->
+              <div 
+                v-show="isImageDropdownOpen"
+                class="absolute z-50 w-full mt-2 rounded-lg border shadow-lg overflow-hidden"
+                :class="themeStore.isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'"
+              >
+                <!-- Search input -->
+                <div class="p-2 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+                  <input
+                    v-model="imageSearchQuery"
+                    type="text"
+                    :placeholder="t('common.search')"
+                    class="w-full px-3 py-2 text-sm rounded-md border outline-none"
+                    :class="themeStore.isDark 
+                      ? 'bg-gray-900 border-gray-700 text-gray-200 placeholder-gray-500 focus:border-blue-500' 
+                      : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-blue-500'"
+                    @click.stop
+                  />
+                </div>
+                
+                <!-- Options list -->
+                <div class="max-h-56 overflow-y-auto">
+                  <template v-for="(images, distro) in groupedImages" :key="distro">
+                    <!-- Group header -->
+                    <div 
+                      class="px-3 py-1.5 text-xs font-medium uppercase tracking-wider sticky top-0"
+                      :class="themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-50 text-gray-500'"
+                    >
+                      {{ distro }}
+                    </div>
+                    <!-- Group items -->
+                    <button
+                      v-for="img in images"
+                      :key="img.incusAlias"
+                      type="button"
+                      class="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors"
+                      :class="[
+                        themeStore.isDark 
+                          ? 'hover:bg-gray-700' 
+                          : 'hover:bg-gray-50',
+                        selectedImage === img.incusAlias 
+                          ? (themeStore.isDark ? 'bg-blue-900/30' : 'bg-blue-50') 
+                          : ''
+                      ]"
+                      @click.stop="selectImage(img.incusAlias)"
+                    >
+                      <DistroIcon
+                        :distro="img.icon || img.name"
+                        :size="20"
+                        class="flex-shrink-0"
+                      />
+                      <span 
+                        class="text-sm truncate"
+                        :class="[
+                          themeStore.isDark ? 'text-gray-200' : 'text-gray-900',
+                          selectedImage === img.incusAlias ? 'font-medium' : ''
+                        ]"
+                      >
+                        {{ img.name }}
+                      </span>
+                      <!-- Check mark for selected -->
+                      <svg 
+                        v-if="selectedImage === img.incusAlias"
+                        class="w-4 h-4 ml-auto text-blue-500 flex-shrink-0" 
+                        fill="none" 
+                        stroke="currentColor" 
+                        viewBox="0 0 24 24"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </button>
+                  </template>
+                  
+                  <!-- No results -->
+                  <div 
+                    v-if="Object.keys(groupedImages).length === 0"
+                    class="px-3 py-6 text-center text-sm"
+                    :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                  >
+                    {{ t('common.noResults') }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- SSH key selection -->
+          <div>
+            <label class="block text-xs text-gray-500 mb-1.5">{{ t('rebuildModal.selectSshKey') }}</label>
+            <select v-model="selectedSshKeyId" class="input" :disabled="sshKeys.length === 0">
+              <option v-if="sshKeys.length === 0" :value="null">{{ t('rebuildModal.noSshKey') }}</option>
+              <option v-for="key in sshKeys" :key="key.id" :value="key.id">
+                {{ key.name }}
+              </option>
+            </select>
+            <p 
+              v-if="sshKeys.length === 0"
+              class="text-xs mt-1.5 text-red-500"
+            >
+              {{ t('rebuildModal.addSshKeyHint') }}
+            </p>
+          </div>
+
+          <!-- 初始化命令选择 -->
+          <div v-if="selectedImage">
+            <InitCommandSelector
+              v-model="customInitCommandIds"
+              :distro="selectedImageDistro"
+            />
+          </div>
+
+          <!-- Manual start hint -->
+          <div 
+            class="p-3 rounded-lg"
+            :class="themeStore.isDark ? 'bg-yellow-500/10 border border-yellow-500/20' : 'bg-yellow-50 border border-yellow-200'"
+          >
+            <p 
+              class="text-xs"
+              :class="themeStore.isDark ? 'text-yellow-400' : 'text-yellow-700'"
+            >
+              <svg class="w-4 h-4 inline-block mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              {{ t('rebuildModal.manualStartHint') }}
+            </p>
+          </div>
+
+          <!-- Action buttons -->
+          <div class="flex justify-end gap-3 pt-2">
+            <button type="button" class="btn-secondary" @click="close">{{ t('rebuildModal.cancel') }}</button>
+            <button 
+              :disabled="loading || !selectedImage || !selectedSshKeyId || sshKeys.length === 0" 
+              class="btn-danger" 
+              @click="handleSubmit"
+            >
+              <svg v-if="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              {{ loading ? t('rebuildModal.rebuilding') : t('rebuildModal.confirmRebuild') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/RecreateModal.vue b/client/src/components/instance/modals/RecreateModal.vue
new file mode 100644
index 0000000..7636445
--- /dev/null
+++ b/client/src/components/instance/modals/RecreateModal.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import InitCommandSelector from '@/components/extensions/InitCommandSelector.vue'
+
+const { t } = useI18n()
+
+interface ImageOption {
+  incusAlias: string
+  name: string
+  description: string | null
+  icon?: string | null
+}
+
+interface SshKeyOption {
+  id: number
+  name: string
+}
+
+interface Props {
+  visible: boolean
+  loading: boolean
+  availableImages: ImageOption[]
+  sshKeys: SshKeyOption[]
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'submit', data: { image: string; sshKeyId: number; customInitCommandIds?: number[] }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const themeStore = useThemeStore()
+
+const selectedImage = ref<string>('')
+const selectedSshKeyId = ref<number | null>(null)
+const customInitCommandIds = ref<number[]>([])
+const isImageDropdownOpen = ref(false)
+const imageSearchQuery = ref('')
+
+// 当前选中的镜像数据
+const selectedImageData = computed(() => {
+  return props.availableImages.find(img => img.incusAlias === selectedImage.value)
+})
+
+// 获取当前选中镜像的发行版标识
+const selectedImageDistro = computed(() => {
+  return selectedImageData.value?.icon || 'linux'
+})
+
+// 过滤后的镜像列表
+const filteredImages = computed(() => {
+  if (!imageSearchQuery.value) return props.availableImages
+  const query = imageSearchQuery.value.toLowerCase()
+  return props.availableImages.filter(img => 
+    img.name.toLowerCase().includes(query)
+  )
+})
+
+// 按发行版分组
+const groupedImages = computed(() => {
+  const groups: Record<string, ImageOption[]> = {}
+  for (const img of filteredImages.value) {
+    const distro = img.icon || 'other'
+    if (!groups[distro]) groups[distro] = []
+    groups[distro].push(img)
+  }
+  return groups
+})
+
+// 当弹窗打开或数据变化时，初始化选中的值
+watch(
+  [() => props.visible, () => props.availableImages, () => props.sshKeys],
+  ([visible, images, keys]) => {
+    if (visible) {
+      // 设置默认镜像
+      if (images.length > 0 && !selectedImage.value) {
+        selectedImage.value = images[0].incusAlias
+      }
+      // 设置默认 SSH 密钥
+      if (keys.length > 0 && !selectedSshKeyId.value) {
+        selectedSshKeyId.value = keys[0].id
+      }
+    } else {
+      // 弹窗关闭时重置
+      selectedImage.value = ''
+      selectedSshKeyId.value = null
+      customInitCommandIds.value = []
+      isImageDropdownOpen.value = false
+      imageSearchQuery.value = ''
+    }
+  },
+  { immediate: true }
+)
+
+function selectImage(alias: string) {
+  selectedImage.value = alias
+  isImageDropdownOpen.value = false
+  imageSearchQuery.value = ''
+}
+
+function toggleImageDropdown() {
+  isImageDropdownOpen.value = !isImageDropdownOpen.value
+  if (!isImageDropdownOpen.value) imageSearchQuery.value = ''
+}
+
+function handleSubmit(): void {
+  if (selectedImage.value && selectedSshKeyId.value) {
+    emit('submit', { 
+      image: selectedImage.value, 
+      sshKeyId: selectedSshKeyId.value,
+      customInitCommandIds: customInitCommandIds.value.length > 0 ? customInitCommandIds.value : undefined
+    })
+  }
+}
+
+function close(): void {
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div 
+        class="absolute inset-0 backdrop-blur-sm"
+        :class="themeStore.isDark ? 'bg-black/60' : 'bg-black/30'"
+        @click="close"
+      ></div>
+      
+      <div 
+        class="relative w-full max-w-md border rounded-xl shadow-2xl animate-fade-in"
+        :class="themeStore.isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+      >
+        <div 
+          class="flex items-center justify-between p-5 border-b"
+          :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+        >
+          <h3 
+            class="text-base font-medium"
+            :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+          >
+            {{ t('recreateModal.title') }}
+          </h3>
+          <button 
+            :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'" 
+            @click="close"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <div class="p-5 space-y-4">
+          <!-- Warning -->
+          <div class="p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+            <p class="text-sm text-red-500 font-medium mb-1">⚠️ {{ t('recreateModal.dangerWarning') }}</p>
+            <ul class="text-xs text-red-400 space-y-1">
+              <li>{{ t('recreateModal.warningList.dataLoss') }}</li>
+              <li>{{ t('recreateModal.warningList.snapshotLoss') }}</li>
+              <li>{{ t('recreateModal.warningList.portMappingLoss') }}</li>
+              <li>{{ t('recreateModal.warningList.proxySiteLoss') }}</li>
+              <li>{{ t('recreateModal.warningList.irreversible') }}</li>
+            </ul>
+          </div>
+
+          <!-- Info: What's different from rebuild -->
+          <div 
+            class="p-3 rounded-lg"
+            :class="themeStore.isDark ? 'bg-blue-500/10 border border-blue-500/20' : 'bg-blue-50 border border-blue-200'"
+          >
+            <div 
+              class="text-xs space-y-1"
+              :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'"
+            >
+              <p>{{ t('recreateModal.differenceHint') }}</p>
+              <p>{{ t('recreateModal.preserveInfo') }}</p>
+            </div>
+          </div>
+
+          <!-- Image selection -->
+          <div>
+            <label class="block text-xs text-gray-500 mb-1.5">{{ t('recreateModal.selectImage') }}</label>
+            <div class="image-selector-container relative">
+              <!-- Trigger button -->
+              <button
+                type="button"
+                class="w-full flex items-center gap-3 p-3 rounded-lg border transition-colors"
+                :class="[
+                  themeStore.isDark 
+                    ? 'border-gray-700 bg-gray-800 hover:border-gray-600' 
+                    : 'border-gray-200 bg-white hover:border-gray-300',
+                  isImageDropdownOpen ? 'border-blue-500' : ''
+                ]"
+                @click.stop="toggleImageDropdown"
+              >
+                <DistroIcon
+                  v-if="selectedImageData"
+                  :distro="selectedImageData.icon || selectedImageData.name"
+                  :size="24"
+                  class="flex-shrink-0"
+                />
+                <span 
+                  class="flex-1 text-left text-sm truncate"
+                  :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+                >
+                  {{ selectedImageData?.name || t('recreateModal.selectImage') }}
+                </span>
+                <svg 
+                  class="w-4 h-4 flex-shrink-0 transition-transform"
+                  :class="[
+                    themeStore.isDark ? 'text-gray-500' : 'text-gray-400',
+                    isImageDropdownOpen ? 'rotate-180' : ''
+                  ]"
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              
+              <!-- Dropdown panel -->
+              <div 
+                v-show="isImageDropdownOpen"
+                class="absolute z-50 w-full mt-2 rounded-lg border shadow-lg overflow-hidden"
+                :class="themeStore.isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'"
+              >
+                <!-- Search input -->
+                <div class="p-2 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+                  <input
+                    v-model="imageSearchQuery"
+                    type="text"
+                    :placeholder="t('common.search')"
+                    class="w-full px-3 py-2 text-sm rounded-md border outline-none"
+                    :class="themeStore.isDark 
+                      ? 'bg-gray-900 border-gray-700 text-gray-200 placeholder-gray-500 focus:border-blue-500' 
+                      : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-blue-500'"
+                    @click.stop
+                  />
+                </div>
+                
+                <!-- Options list -->
+                <div class="max-h-56 overflow-y-auto">
+                  <template v-for="(images, distro) in groupedImages" :key="distro">
+                    <!-- Group header -->
+                    <div 
+                      class="px-3 py-1.5 text-xs font-medium uppercase tracking-wider sticky top-0"
+                      :class="themeStore.isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-50 text-gray-500'"
+                    >
+                      {{ distro }}
+                    </div>
+                    <!-- Group items -->
+                    <button
+                      v-for="img in images"
+                      :key="img.incusAlias"
+                      type="button"
+                      class="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors"
+                      :class="[
+                        themeStore.isDark 
+                          ? 'hover:bg-gray-700' 
+                          : 'hover:bg-gray-50',
+                        selectedImage === img.incusAlias 
+                          ? (themeStore.isDark ? 'bg-blue-900/30' : 'bg-blue-50') 
+                          : ''
+                      ]"
+                      @click.stop="selectImage(img.incusAlias)"
+                    >
+                      <DistroIcon
+                        :distro="img.icon || img.name"
+                        :size="20"
+                        class="flex-shrink-0"
+                      />
+                      <span 
+                        class="text-sm truncate"
+                        :class="[
+                          themeStore.isDark ? 'text-gray-200' : 'text-gray-900',
+                          selectedImage === img.incusAlias ? 'font-medium' : ''
+                        ]"
+                      >
+                        {{ img.name }}
+                      </span>
+                      <!-- Check mark for selected -->
+                      <svg 
+                        v-if="selectedImage === img.incusAlias"
+                        class="w-4 h-4 ml-auto text-blue-500 flex-shrink-0" 
+                        fill="none" 
+                        stroke="currentColor" 
+                        viewBox="0 0 24 24"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </button>
+                  </template>
+                  
+                  <!-- No results -->
+                  <div 
+                    v-if="Object.keys(groupedImages).length === 0"
+                    class="px-3 py-6 text-center text-sm"
+                    :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                  >
+                    {{ t('common.noResults') }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- SSH key selection -->
+          <div>
+            <label class="block text-xs text-gray-500 mb-1.5">{{ t('recreateModal.selectSshKey') }}</label>
+            <select v-model="selectedSshKeyId" class="input" :disabled="sshKeys.length === 0">
+              <option v-if="sshKeys.length === 0" :value="null">{{ t('recreateModal.noSshKey') }}</option>
+              <option v-for="key in sshKeys" :key="key.id" :value="key.id">
+                {{ key.name }}
+              </option>
+            </select>
+            <p 
+              v-if="sshKeys.length === 0"
+              class="text-xs mt-1.5 text-red-500"
+            >
+              {{ t('recreateModal.addSshKeyHint') }}
+            </p>
+          </div>
+
+          <!-- 初始化命令选择 -->
+          <div v-if="selectedImage">
+            <InitCommandSelector
+              v-model="customInitCommandIds"
+              :distro="selectedImageDistro"
+            />
+          </div>
+
+          <!-- Action buttons -->
+          <div class="flex justify-end gap-3 pt-2">
+            <button type="button" class="btn-secondary" @click="close">{{ t('recreateModal.cancel') }}</button>
+            <button 
+              :disabled="loading || !selectedImage || !selectedSshKeyId || sshKeys.length === 0" 
+              class="btn-danger" 
+              @click="handleSubmit"
+            >
+              <svg v-if="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              {{ loading ? t('recreateModal.recreating') : t('recreateModal.confirmRecreate') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/client/src/components/instance/modals/RenewModal.vue b/client/src/components/instance/modals/RenewModal.vue
new file mode 100644
index 0000000..63d880e
--- /dev/null
+++ b/client/src/components/instance/modals/RenewModal.vue
@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useConfigStore } from '@/stores/config'
+import api from '@/api'
+import type { InstanceBillingInfo, RenewPreview } from '@/types/api'
+import { freeSiteCopy } from '@/utils/freeSiteFun'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const configStore = useConfigStore()
+
+interface Props {
+  show: boolean
+  instanceId: number
+  instanceName: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  'success': []
+}>()
+
+// State
+const loading = ref(false)
+const renewing = ref(false)
+const billingInfo = ref<InstanceBillingInfo | null>(null)
+const userBalance = ref<number>(0)
+const selectedMonths = ref<number>(1)
+const error = ref<string>('')
+
+// 续费选项
+const renewOptions = computed<RenewPreview[]>(() => {
+  return billingInfo.value?.renewPreview || []
+})
+
+// 选中的续费方案
+const selectedRenewOption = computed<RenewPreview | null>(() => {
+  return renewOptions.value.find(r => r.months === selectedMonths.value) || null
+})
+
+// 是否有折扣
+const hasDiscount = computed(() => {
+  return billingInfo.value?.affDiscount && billingInfo.value.affDiscount.discountPercent > 0
+})
+
+// 折扣百分比
+const discountPercent = computed(() => {
+  return billingInfo.value?.affDiscount?.discountPercent || 0
+})
+
+// 实际支付价格（考虑折扣）
+const actualPrice = computed(() => {
+  if (!selectedRenewOption.value) return 0
+  return selectedRenewOption.value.discountedPrice
+})
+
+// 是否余额不足
+const insufficientBalance = computed(() => {
+  if (!selectedRenewOption.value) return false
+  return userBalance.value < actualPrice.value
+})
+
+// 续费后余额
+const balanceAfterRenew = computed(() => {
+  if (!selectedRenewOption.value) return userBalance.value
+  return userBalance.value - actualPrice.value
+})
+
+// 是否为托管实例
+const isHostedInstance = computed(() => {
+  return billingInfo.value?.isHostedInstance ?? false
+})
+
+// 托管实例续费限制：是否满足续费条件（到期前7天内）
+const canHostedInstanceRenew = computed(() => {
+  if (!isHostedInstance.value) return true
+  const restriction = billingInfo.value?.hostingRenewRestriction
+  if (!restriction) return true
+  const daysUntilExpire = billingInfo.value?.daysUntilExpire
+  if (daysUntilExpire === null || daysUntilExpire === undefined) return true
+  return daysUntilExpire <= restriction.daysBeforeExpire
+})
+
+// 托管实例距到期剩余天数
+const daysUntilExpire = computed(() => {
+  return billingInfo.value?.daysUntilExpire ?? null
+})
+
+// 格式化金额（API 返回的是元）
+function formatMoney(amount: number): string {
+  return amount.toFixed(2)
+}
+
+// 格式化日期
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  })
+}
+
+// 加载计费信息
+async function loadBillingInfo() {
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const [billingRes, balanceRes] = await Promise.all([
+      api.billing.getInstanceBilling(props.instanceId),
+      api.billing.getUserBalance()
+    ])
+    
+    billingInfo.value = billingRes.billing as InstanceBillingInfo
+    userBalance.value = balanceRes.balance.balance
+    
+    // 默认选择1个月
+    if (renewOptions.value.length > 0) {
+      selectedMonths.value = renewOptions.value[0].months
+    }
+  } catch (err: any) {
+    error.value = err.message || t('common.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 执行续费
+async function handleRenew() {
+  if (insufficientBalance.value || !selectedRenewOption.value || !canHostedInstanceRenew.value) return
+  
+  renewing.value = true
+  error.value = ''
+  
+  try {
+    await api.billing.renewInstance(props.instanceId, selectedMonths.value)
+    emit('success')
+    emit('update:show', false)
+  } catch (err: any) {
+    error.value = err.message || t('billing.renewFailed')
+  } finally {
+    renewing.value = false
+  }
+}
+
+// 监听显示状态
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    loadBillingInfo()
+  } else {
+    // 重置状态
+    billingInfo.value = null
+    userBalance.value = 0
+    selectedMonths.value = 1
+    error.value = ''
+  }
+})
+
+function handleClose() {
+  emit('update:show', false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        @click.self="handleClose"
+      >
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/50" @click="handleClose" />
+        
+        <!-- Modal -->
+        <div
+          class="relative w-full max-w-md rounded-lg shadow-xl"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+        >
+          <!-- Header -->
+          <div
+            class="flex items-center justify-between px-6 py-4 border-b"
+            :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'"
+          >
+            <h3 
+              class="text-lg font-medium"
+              :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+            >
+              {{ t('billing.renewTitle') }}
+            </h3>
+            <button
+              class="p-1 rounded hover:bg-gray-500/20"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+              @click="handleClose"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="px-6 py-4">
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-8">
+              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+            </div>
+
+            <!-- Error -->
+            <div v-else-if="error" class="py-4">
+              <div class="p-3 rounded-lg bg-red-500/10 text-red-500 text-sm">
+                {{ error }}
+              </div>
+            </div>
+
+            <!-- Content -->
+            <template v-else-if="billingInfo">
+              <!-- 续费选项 -->
+              <div class="mb-4">
+                <label 
+                  class="block text-sm font-medium mb-2"
+                  :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                >
+                  {{ t('billing.selectRenewPeriod') }}
+                </label>
+                <div class="grid grid-cols-3 gap-2">
+                  <button
+                    v-for="option in renewOptions"
+                    :key="option.months"
+                    class="py-2 px-3 rounded-lg border text-sm transition-colors"
+                    :class="[
+                      selectedMonths === option.months
+                        ? 'border-blue-500 bg-blue-500/10 text-blue-500'
+                        : themeStore.isDark
+                          ? 'border-gray-700 text-gray-300 hover:border-gray-600'
+                          : 'border-gray-200 text-gray-700 hover:border-gray-300'
+                    ]"
+                    @click="selectedMonths = option.months"
+                  >
+                    {{ t('billing.renewMonths', { months: option.months }) }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- 费用详情 -->
+              <div 
+                v-if="selectedRenewOption"
+                class="p-4 rounded-lg mb-4"
+                :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+              >
+                <div class="space-y-2 text-sm">
+                  <!-- 原价（有折扣时显示） -->
+                  <div v-if="hasDiscount" class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.originalPrice : t('billing.originalPrice') }}
+                    </span>
+                    <span 
+                      class="line-through"
+                      :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                    >
+                      ¥{{ formatMoney(selectedRenewOption.price) }}
+                    </span>
+                  </div>
+                  <!-- 折扣信息 -->
+                  <div v-if="hasDiscount" class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('billing.affDiscount') }}
+                    </span>
+                    <span class="text-green-500">
+                      -{{ discountPercent }}%
+                    </span>
+                  </div>
+                  <!-- 实付金额 -->
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.finalPrice : (hasDiscount ? t('billing.actualPrice') : t('billing.renewPrice')) }}
+                    </span>
+                    <span 
+                      class="font-medium"
+                      :class="hasDiscount ? 'text-green-500' : (themeStore.isDark ? 'text-white' : 'text-gray-900')"
+                    >
+                      ¥{{ formatMoney(actualPrice) }}
+                    </span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('billing.newExpiresAt') }}
+                    </span>
+                    <span 
+                      class="font-medium"
+                      :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                    >
+                      {{ formatDate(selectedRenewOption.expiresAt) }}
+                    </span>
+                  </div>
+                  <div class="border-t my-2" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'" />
+                  <div class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.currentBalance : t('billing.currentBalance') }}
+                    </span>
+                    <span 
+                      :class="insufficientBalance ? 'text-red-500' : themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                    >
+                      ¥{{ formatMoney(userBalance) }}
+                    </span>
+                  </div>
+                  <div v-if="!insufficientBalance" class="flex justify-between">
+                    <span :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.balanceAfterRenew : t('billing.balanceAfterRenew') }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">
+                      ¥{{ formatMoney(balanceAfterRenew) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 余额不足提示 -->
+              <div 
+                v-if="insufficientBalance"
+                class="p-3 rounded-lg mb-4 text-sm"
+                :class="themeStore.isDark ? 'bg-yellow-900/20 text-yellow-400' : 'bg-yellow-50 text-yellow-600'"
+              >
+                {{ t('billing.insufficientBalance') }}
+                <a href="/wallet" class="underline ml-1">{{ t('billing.goRecharge') }}</a>
+              </div>
+              
+              <!-- 托管实例续费限制提示 -->
+              <div 
+                v-if="isHostedInstance && !canHostedInstanceRenew && daysUntilExpire !== null"
+                class="p-3 rounded-lg mb-4 text-sm"
+                :class="themeStore.isDark ? 'bg-orange-900/20 text-orange-400' : 'bg-orange-50 text-orange-600'"
+              >
+                <div class="flex items-start gap-2">
+                  <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                  <span>{{ t('billing.hostingRenewTooEarly', { days: daysUntilExpire }) }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Footer -->
+          <div
+            class="flex justify-end gap-3 px-6 py-4 border-t"
+            :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'"
+          >
+            <button
+              class="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+              :class="themeStore.isDark
+                ? 'text-gray-300 hover:bg-gray-800'
+                : 'text-gray-700 hover:bg-gray-100'"
+              @click="handleClose"
+            >
+              {{ t('common.cancel') }}
+            </button>
+            <button
+              :disabled="loading || renewing || insufficientBalance || !selectedRenewOption || !canHostedInstanceRenew"
+              class="px-4 py-2 text-sm font-medium rounded-lg transition-colors bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              @click="handleRenew"
+            >
+              {{ renewing ? t('billing.renewing') : t('billing.renew') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .relative,
+.modal-leave-active .relative {
+  transition: transform 0.2s ease;
+}
+
+.modal-enter-from .relative,
+.modal-leave-to .relative {
+  transform: scale(0.95);
+}
+</style>
diff --git a/client/src/components/instance/modals/TransferModal.vue b/client/src/components/instance/modals/TransferModal.vue
new file mode 100644
index 0000000..c4df154
--- /dev/null
+++ b/client/src/components/instance/modals/TransferModal.vue
@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import { useConfigStore } from '@/stores/config'
+import { translateError } from '@/utils/errorHandler'
+
+const props = defineProps<{
+  show: boolean
+  instance: {
+    id: number
+    name: string
+    cpu: number
+    memory: number
+    disk: number
+  }
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'success'): void
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+const configStore = useConfigStore()
+
+// 表单状态
+const targetUsername = ref('')
+const remark = ref('')
+const searchLoading = ref(false)
+const transferLoading = ref(false)
+const searchError = ref('')
+
+// 用户余额
+const userBalance = ref<number>(0)
+const loadingBalance = ref(false)
+
+// 目标用户信息
+interface TargetUser {
+  id: number
+  username: string
+  status: string
+}
+const targetUser = ref<TargetUser | null>(null)
+
+
+
+// 转移手续费（从配置获取）
+const transferFee = computed(() => configStore.transferFee || 0)
+
+// 余额是否足够
+const hasEnoughBalance = computed(() => {
+  if (transferFee.value <= 0) return true
+  return userBalance.value >= transferFee.value
+})
+
+// 用户状态检查（用户存在且未被封禁且余额足够）
+const canTransfer = computed(() => {
+  return targetUser.value !== null && targetUser.value.status === 'active' && hasEnoughBalance.value
+})
+
+// 弹窗打开时加载余额
+watch(() => props.show, async (show) => {
+  if (show) {
+    // 加载用户余额
+    if (transferFee.value > 0) {
+      loadingBalance.value = true
+      try {
+        const res = await api.billing.getUserBalance()
+        userBalance.value = res.balance.balance
+      } catch {
+        userBalance.value = 0
+      } finally {
+        loadingBalance.value = false
+      }
+    }
+  } else {
+    // 关闭时重置
+    targetUsername.value = ''
+    remark.value = ''
+    targetUser.value = null
+    searchError.value = ''
+    userBalance.value = 0
+  }
+})
+
+async function searchUser() {
+  if (!targetUsername.value.trim()) return
+  
+  searchLoading.value = true
+  searchError.value = ''
+  targetUser.value = null
+  
+  try {
+    const response = await api.transfers.searchUser(targetUsername.value.trim())
+    targetUser.value = response.user
+  } catch (error: any) {
+    if (error?.code === 'USER_NOT_FOUND') {
+      searchError.value = t('transfer.modal.userNotFound')
+    } else if (error?.code === 'TRANSFER_TO_SELF') {
+      searchError.value = t('transfer.modal.cannotTransferToSelf')
+    } else if (error?.code === 'TRANSFER_TO_BANNED') {
+      searchError.value = t('transfer.modal.userBanned')
+    } else {
+      searchError.value = error?.message || t('common.error')
+    }
+  } finally {
+    searchLoading.value = false
+  }
+}
+
+async function handleTransfer() {
+  if (!targetUser.value || !canTransfer.value) return
+  
+  transferLoading.value = true
+  try {
+    await api.transfers.create(props.instance.id, targetUser.value.username, remark.value || undefined)
+    toast.success(t('transfer.messages.transferSuccess'))
+    emit('success')
+    emit('close')
+  } catch (error: any) {
+    toast.error(translateError(error))
+  } finally {
+    transferLoading.value = false
+  }
+}
+
+
+function formatMemory(mb: number) {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
+  return `${mb} MB`
+}
+
+// 硬盘格式化（1024进制）
+function formatDisk(mb: number) {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
+  return `${mb} MB`
+}
+</script>
+
+<template>
+  <div 
+    v-if="show"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    @click.self="emit('close')"
+  >
+    <div 
+      class="w-full max-w-lg p-6 rounded-lg shadow-xl max-h-[90vh] overflow-y-auto"
+      :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+    >
+      <h3 class="text-lg font-medium mb-4">{{ $t('transfer.modal.title') }}</h3>
+      
+      <div class="space-y-4">
+        <!-- Instance Info -->
+        <div 
+          class="p-3 rounded-lg"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+        >
+          <div class="font-medium">{{ instance.name }}</div>
+          <div class="text-sm text-gray-500 mt-1">
+            {{ instance.cpu }}% CPU · {{ formatMemory(instance.memory) }} · {{ formatDisk(instance.disk) }}
+          </div>
+        </div>
+
+        <!-- Target User Search -->
+        <div>
+          <label class="block text-sm font-medium mb-1">{{ $t('transfer.modal.targetUser') }}</label>
+          <div class="flex gap-2">
+            <input
+              v-model="targetUsername"
+              type="text"
+              class="input flex-1"
+              :placeholder="$t('transfer.modal.targetUserPlaceholder')"
+              @keyup.enter="searchUser"
+            />
+            <button 
+              class="btn-secondary"
+              :disabled="searchLoading || !targetUsername.trim()"
+              @click="searchUser"
+            >
+              {{ searchLoading ? '...' : $t('transfer.modal.searchUser') }}
+            </button>
+          </div>
+          <p v-if="searchError" class="text-sm text-red-500 mt-1">{{ searchError }}</p>
+        </div>
+
+        <!-- Target User Info -->
+        <div 
+          v-if="targetUser"
+          class="p-4 rounded-lg border"
+          :class="themeStore.isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'"
+        >
+          <div class="flex items-center justify-between mb-2">
+            <div class="font-medium">{{ targetUser.username }}</div>
+            <span 
+              :class="[
+                'badge',
+                targetUser.status === 'active' ? 'badge-success' : 'badge-danger'
+              ]"
+            >
+              {{ targetUser.status === 'active' ? t('admin.users.active') : t('admin.users.banned') }}
+            </span>
+          </div>
+
+          <!-- User Status Check -->
+          <div 
+            v-if="canTransfer"
+            class="mt-2 p-2 rounded text-sm"
+            :class="themeStore.isDark ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-700'"
+          >
+            {{ $t('transfer.modal.canTransfer') }}
+          </div>
+        </div>
+
+        <!-- Remark -->
+        <div>
+          <label class="block text-sm font-medium mb-1">{{ $t('transfer.modal.remark') }}</label>
+          <textarea
+            v-model="remark"
+            class="input w-full h-20 resize-none"
+            :placeholder="$t('transfer.modal.remarkPlaceholder')"
+          ></textarea>
+        </div>
+
+        <!-- Transfer Fee Info -->
+        <div 
+          v-if="transferFee > 0"
+          class="p-3 rounded-lg text-sm space-y-2"
+          :class="themeStore.isDark ? 'bg-blue-900/20 border border-blue-800' : 'bg-blue-50 border border-blue-200'"
+        >
+          <div class="flex items-center justify-between">
+            <span :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'">
+              {{ $t('transfer.modal.feeLabel') }}
+            </span>
+            <span class="font-medium" :class="themeStore.isDark ? 'text-blue-200' : 'text-blue-800'">
+              ¥{{ transferFee.toFixed(2) }}
+            </span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'">
+              {{ $t('transfer.modal.balanceLabel') }}
+            </span>
+            <span 
+              class="font-medium"
+              :class="hasEnoughBalance 
+                ? (themeStore.isDark ? 'text-green-400' : 'text-green-600')
+                : (themeStore.isDark ? 'text-red-400' : 'text-red-600')"
+            >
+              <template v-if="loadingBalance">...</template>
+              <template v-else>¥{{ userBalance.toFixed(2) }}</template>
+            </span>
+          </div>
+          <!-- Insufficient Balance Warning -->
+          <div 
+            v-if="!hasEnoughBalance && !loadingBalance"
+            class="pt-2 border-t"
+            :class="themeStore.isDark ? 'border-red-800' : 'border-red-200'"
+          >
+            <p class="text-red-500">{{ $t('transfer.modal.insufficientBalance') }}</p>
+          </div>
+          <!-- Fee Refund Hint -->
+          <p 
+            class="text-xs"
+            :class="themeStore.isDark ? 'text-blue-400/70' : 'text-blue-600/70'"
+          >
+            {{ $t('transfer.modal.feeRefundHint') }}
+          </p>
+        </div>
+
+        <!-- Warning -->
+        <div 
+          class="p-3 rounded-lg text-sm"
+          :class="themeStore.isDark ? 'bg-yellow-900/30 text-yellow-300' : 'bg-yellow-50 text-yellow-800'"
+        >
+          <div class="flex items-start gap-2">
+            <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span>{{ $t('transfer.modal.deleteWarning') }}</span>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 pt-2">
+          <button class="btn-ghost" @click="emit('close')">
+            {{ $t('common.cancel') }}
+          </button>
+          <button 
+            class="btn-primary"
+            :disabled="!targetUser || !canTransfer || transferLoading"
+            @click="handleTransfer"
+          >
+            {{ transferLoading ? $t('transfer.modal.transferring') : $t('transfer.modal.confirmTransfer') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/layout/AppLayout.vue b/client/src/components/layout/AppLayout.vue
new file mode 100644
index 0000000..c8765a8
--- /dev/null
+++ b/client/src/components/layout/AppLayout.vue
@@ -0,0 +1,348 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useInboxStore } from '@/stores/inbox'
+import { supportedLocales, setLocale, type Locale } from '@/locales'
+import { useBrand } from '@/composables/useBrand'
+import SideNav from './SideNav.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import NotificationBell from '@/components/NotificationBell.vue'
+
+const router = useRouter()
+const route = useRoute()
+const { locale } = useI18n()
+
+// 分栏布局页面：左栏独立滚动，右栏固定
+const isSplitPane = computed(() => route.name === 'instance-create')
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const inboxStore = useInboxStore()
+const brand = useBrand()
+const langMenuOpen = ref(false)
+const langMenuRef = ref<HTMLElement | null>(null)
+const sidebarCollapsed = ref<boolean>(false)
+const mobileMenuOpen = ref<boolean>(false)
+const userMenuOpen = ref<boolean>(false)
+const userMenuRef = ref<HTMLElement | null>(null)
+
+async function handleLogout(): Promise<void> {
+  userMenuOpen.value = false
+  inboxStore.stopPolling()
+  await authStore.logout()
+  router.push('/login')
+}
+
+const { t } = useI18n()
+
+function getThemeTooltip(): string {
+  switch (themeStore.mode) {
+    case 'dark': return t('theme.dark')
+    case 'light': return t('theme.light')
+    default: return t('theme.system')
+  }
+}
+
+function toggleMobileMenu() {
+  mobileMenuOpen.value = !mobileMenuOpen.value
+}
+
+function closeMobileMenu() {
+  mobileMenuOpen.value = false
+}
+
+function toggleUserMenu() {
+  userMenuOpen.value = !userMenuOpen.value
+}
+
+function navigateTo(path: string) {
+  router.push(path)
+  userMenuOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (userMenuRef.value && !userMenuRef.value.contains(event.target as Node)) {
+    userMenuOpen.value = false
+  }
+  if (langMenuRef.value && !langMenuRef.value.contains(event.target as Node)) {
+    langMenuOpen.value = false
+  }
+}
+
+function toggleLangMenu() {
+  langMenuOpen.value = !langMenuOpen.value
+}
+
+function changeLocale(code: Locale) {
+  setLocale(code)
+  langMenuOpen.value = false
+}
+
+function getCurrentLocaleShort(): string {
+  switch (locale.value) {
+    case 'zh-CN':
+      return '简'
+    case 'zh-TW':
+      return '繁'
+    case 'en':
+    default:
+      return 'EN'
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  // 启动站内信轮询
+  inboxStore.startPolling()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div class="h-screen flex overflow-hidden" :class="themeStore.isDark ? 'bg-[#0a0a0a]' : 'bg-gray-50'">
+    <!-- 侧边导航 -->
+    <SideNav 
+      :collapsed="sidebarCollapsed" 
+      :mobile-open="mobileMenuOpen"
+      @close-mobile="closeMobileMenu"
+    />
+
+    <!-- 主内容区 -->
+    <div class="flex-1 flex flex-col min-w-0 h-full">
+      <!-- 顶部栏 -->
+      <header class="h-14 flex items-center justify-between px-4 md:px-6 border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200 bg-white'">
+        <div class="flex items-center gap-2 md:gap-4">
+          <!-- Mobile: Hamburger menu -->
+          <button 
+            class="md:hidden p-1.5 rounded transition-colors touch-target"
+            :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'"
+            :aria-label="t('nav.openMenu')"
+            @click="toggleMobileMenu"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+
+          <!-- Desktop: Toggle sidebar -->
+          <button 
+            class="hidden md:block p-1.5 rounded transition-colors"
+            :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'"
+            :aria-label="t('nav.collapseSidebar')"
+            @click="sidebarCollapsed = !sidebarCollapsed"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+
+          <!-- Mobile: Logo -->
+          <div class="md:hidden flex items-center gap-2">
+            <img 
+              :src="brand.brandLogoUrl"
+              :alt="brand.brandName"
+              class="w-6 h-6 rounded flex-shrink-0"
+            />
+            <span 
+              class="font-semibold text-sm"
+              :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+            >{{ brand.brandName }}</span>
+          </div>
+        </div>
+
+        <!-- 右侧菜单 -->
+        <div class="flex items-center gap-2 md:gap-3">
+          <!-- 终端管理入口 -->
+          <button
+            class="p-1.5 rounded transition-colors touch-target"
+            :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'"
+            :title="t('nav.terminal')"
+            :aria-label="t('nav.terminal')"
+            @click="router.push('/terminal')"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </button>
+
+          <!-- 站内信铃铛 -->
+          <NotificationBell />
+
+          <!-- 主题切换按钮 -->
+          <button
+            class="theme-toggle relative group p-1.5 rounded transition-colors touch-target"
+            :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'"
+            :title="getThemeTooltip()"
+            :aria-label="t('nav.toggleTheme')"
+            @click="themeStore.toggleTheme"
+          >
+            <!-- 深色图标 (月亮) -->
+            <svg 
+              v-if="themeStore.mode === 'dark'" 
+              class="w-5 h-5" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+            <!-- 浅色图标 (太阳) -->
+            <svg 
+              v-else-if="themeStore.mode === 'light'" 
+              class="w-5 h-5" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+            <!-- 系统图标 (显示器) -->
+            <svg 
+              v-else 
+              class="w-5 h-5" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            
+            <!-- 悬停提示 (Desktop only) -->
+            <span 
+              class="hidden md:block absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+              :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700 border border-gray-200'"
+            >
+              {{ getThemeTooltip() }}
+            </span>
+          </button>
+
+          <!-- 语言切换 -->
+          <div ref="langMenuRef" class="relative">
+            <button
+              class="relative group px-2 py-1.5 rounded transition-colors touch-target text-xs font-medium"
+              :class="themeStore.isDark ? 'hover:bg-gray-800 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'"
+              :title="$t('language.' + (locale === 'zh-CN' ? 'zh' : 'en'))"
+              :aria-label="t('nav.toggleLanguage')"
+              @click.stop="toggleLangMenu"
+            >
+              {{ getCurrentLocaleShort() }}
+            </button>
+
+            <!-- 语言下拉菜单 -->
+            <Transition
+              enter-active-class="transition ease-out duration-100"
+              enter-from-class="transform opacity-0 scale-95"
+              enter-to-class="transform opacity-100 scale-100"
+              leave-active-class="transition ease-in duration-75"
+              leave-from-class="transform opacity-100 scale-100"
+              leave-to-class="transform opacity-0 scale-95"
+            >
+              <div 
+                v-if="langMenuOpen"
+                class="absolute right-0 mt-2 w-36 rounded-lg shadow-lg py-1 z-50 border"
+                :class="themeStore.isDark ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'"
+              >
+                <button
+                  v-for="lang in supportedLocales"
+                  :key="lang.code"
+                  class="w-full flex items-center justify-between px-3 py-2 text-sm transition-colors"
+                  :class="[
+                    locale === lang.code 
+                      ? (themeStore.isDark ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900')
+                      : (themeStore.isDark ? 'text-gray-300 hover:bg-gray-800' : 'text-gray-700 hover:bg-gray-100')
+                  ]"
+                  @click="changeLocale(lang.code)"
+                >
+                  {{ lang.name }}
+                  <svg v-if="locale === lang.code" class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </button>
+              </div>
+            </Transition>
+          </div>
+
+          <!-- 用户菜单 -->
+          <div ref="userMenuRef" class="relative">
+            <button 
+              class="flex items-center gap-2 px-2 py-1 rounded transition-colors cursor-pointer"
+              :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100'"
+              @click.stop="toggleUserMenu"
+            >
+              <UserAvatar 
+                :username="authStore.user?.username || ''" 
+                :email="authStore.user?.email"
+                :avatar-style="authStore.user?.avatarStyle || 'bigSmile'"
+                :size="28"
+              />
+              <span class="hidden sm:block text-sm" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ authStore.user?.username }}</span>
+              <svg class="hidden sm:block w-4 h-4 transition-transform" :class="[themeStore.isDark ? 'text-gray-500' : 'text-gray-400', userMenuOpen ? 'rotate-180' : '']" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            
+            <!-- 下拉菜单 -->
+            <Transition
+              enter-active-class="transition ease-out duration-100"
+              enter-from-class="transform opacity-0 scale-95"
+              enter-to-class="transform opacity-100 scale-100"
+              leave-active-class="transition ease-in duration-75"
+              leave-from-class="transform opacity-100 scale-100"
+              leave-to-class="transform opacity-0 scale-95"
+            >
+              <div 
+                v-if="userMenuOpen"
+                class="absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 z-50 border"
+                :class="themeStore.isDark ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'"
+              >
+                <button
+                  class="w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors"
+                  :class="themeStore.isDark ? 'text-gray-300 hover:bg-gray-800' : 'text-gray-700 hover:bg-gray-100'"
+                  @click="navigateTo('/profile')"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                  </svg>
+                  {{ $t('userMenu.profile') }}
+                </button>
+                <button
+                  class="w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors"
+                  :class="themeStore.isDark ? 'text-gray-300 hover:bg-gray-800' : 'text-gray-700 hover:bg-gray-100'"
+                  @click="navigateTo('/instances')"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+                  </svg>
+                  {{ $t('userMenu.myInstances') }}
+                </button>
+                <div class="my-1 border-t" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'"></div>
+                <button
+                  class="w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors"
+                  :class="themeStore.isDark ? 'text-red-400 hover:bg-gray-800' : 'text-red-600 hover:bg-gray-100'"
+                  @click="handleLogout"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                  </svg>
+                  {{ $t('userMenu.logout') }}
+                </button>
+              </div>
+            </Transition>
+          </div>
+        </div>
+      </header>
+
+      <!-- 页面内容 -->
+      <main class="flex-1 p-4 md:p-6 xl:px-14 2xl:px-24" :class="isSplitPane ? 'overflow-auto lg:overflow-hidden' : 'overflow-auto'">
+        <div class="w-full mx-auto" :class="isSplitPane ? 'lg:h-full' : ''">
+          <slot />
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/layout/SideNav.vue b/client/src/components/layout/SideNav.vue
new file mode 100644
index 0000000..7a6fe97
--- /dev/null
+++ b/client/src/components/layout/SideNav.vue
@@ -0,0 +1,385 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import { useBrand } from '@/composables/useBrand'
+
+const { t } = useI18n()
+
+interface Props {
+  collapsed?: boolean
+  mobileOpen?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:mobileOpen': [value: boolean]
+  closeMobile: []
+}>()
+
+interface MenuItem {
+  name?: string
+  path?: string
+  icon?: string
+  label?: string
+  divider?: boolean
+}
+
+const route = useRoute()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+void configStore.loadPublicConfig()
+
+const footerEmailHref = computed(() => {
+  const email = configStore.footerContactEmail?.trim()
+  if (!email) return null
+  return email.startsWith('mailto:') ? email : `mailto:${email}`
+})
+
+const footerTelegramLink = computed(() => {
+  const link = configStore.footerTelegramLink?.trim()
+  return link || null
+})
+
+const hiddenExpandMenuNames = new Set(['my-hosts', 'my-packages', 'hosting-wallet'])
+const hiddenWhenTicketDisabledMenuNames = new Set(['tickets'])
+const hiddenWhenMailUnavailableMenuNames = new Set(['mail'])
+const shouldHideHostingFeature = computed(() =>
+  !authStore.isAdmin && authStore.user?.canAccessHostingFeature === false
+)
+
+// 普通用户菜单
+const userMenuItems: MenuItem[] = [
+  { divider: true, label: 'nav.main' },
+  { name: 'dashboard', path: '/dashboard', icon: 'home', label: 'nav.dashboard' },
+  { name: 'instances', path: '/instances', icon: 'server', label: 'nav.instances' },
+  { name: 'mail', path: '/mail', icon: 'mail', label: 'nav.mail' },
+  { name: 'terminal', path: '/terminal', icon: 'terminal', label: 'nav.terminal' },
+  { name: 'extensions', path: '/extensions', icon: 'puzzle', label: 'nav.scripts' },
+  { name: 'transfers', path: '/transfers', icon: 'transfer', label: 'nav.transfers' },
+  { name: 'tickets', path: '/tickets', icon: 'ticket', label: 'nav.tickets' },
+  { name: 'entertainment', path: '/entertainment', icon: 'gift', label: 'nav.entertainment' },
+  { name: 'wallet', path: '/wallet', icon: 'wallet', label: 'nav.wallet' },
+  { name: 'invites', path: '/invites', icon: 'key', label: 'nav.invites' },
+  { divider: true, label: 'nav.expand' },
+  { name: 'my-hosts', path: '/resources/hosts', icon: 'database', label: 'nav.hosts' },
+  { name: 'my-packages', path: '/resources/packages', icon: 'package', label: 'nav.packages' },
+  { name: 'hosting-wallet', path: '/hosting-wallet', icon: 'coin', label: 'nav.earnings' },
+  { divider: true, label: 'nav.system' },
+  { name: 'profile', path: '/profile', icon: 'settings', label: 'nav.settings' },
+  { name: 'help', path: '/help', icon: 'help', label: 'nav.help' },
+  { name: 'logs', path: '/logs', icon: 'logs', label: 'nav.logs' }
+]
+
+// 管理员专用菜单（包含节点/套餐管理）
+const adminOnlyMenuItems: MenuItem[] = [
+  { divider: true, label: 'nav.admin' },
+  { name: 'admin-settings', path: '/admin/settings', icon: 'cog', label: 'nav.system' },
+  { name: 'admin-users', path: '/admin/users', icon: 'users', label: 'nav.users' },
+  { name: 'admin-hosting', path: '/admin/hosting', icon: 'coin', label: 'nav.hosting' },
+  { divider: true, label: 'nav.resources' },
+  { name: 'my-hosts', path: '/resources/hosts', icon: 'database', label: 'nav.hosts' },
+  { name: 'my-packages', path: '/resources/packages', icon: 'package', label: 'nav.packages' },
+  { name: 'admin-images', path: '/admin/images', icon: 'image', label: 'nav.images' },
+  { name: 'admin-instance-create', path: '/admin/instances/create', icon: 'gift', label: 'nav.create' },
+  { name: 'admin-mail', path: '/admin/mail', icon: 'mail', label: 'nav.mail' },
+  { divider: true, label: 'nav.operations' },
+  { name: 'tickets', path: '/tickets', icon: 'ticket', label: 'nav.tickets' },
+  { name: 'admin-billing', path: '/admin/billing', icon: 'wallet', label: 'nav.billing' },
+  { name: 'admin-broadcast', path: '/admin/broadcast', icon: 'bell', label: 'nav.broadcast' },
+  { name: 'admin-logs', path: '/logs', icon: 'logs', label: 'nav.logs' },
+  { name: 'admin-help', path: '/admin/help', icon: 'book', label: 'nav.helpManage' },
+  { name: 'admin-entertainment', path: '/admin/entertainment', icon: 'gift', label: 'nav.entertainment' },
+  { name: 'profile', path: '/profile', icon: 'settings', label: 'nav.settings' },
+  { name: 'admin-statistics', path: '/admin/statistics', icon: 'chart', label: 'nav.statistics' },
+  { name: 'admin-oauth', path: '/admin/oauth', icon: 'key', label: 'nav.oauth' }
+]
+
+const menuItems = computed<MenuItem[]>(() => {
+  let baseItems = authStore.isAdmin ? adminOnlyMenuItems : userMenuItems
+
+  if (!authStore.isAdmin && !configStore.ticketEnabled) {
+    baseItems = baseItems.filter(item => !item.name || !hiddenWhenTicketDisabledMenuNames.has(item.name))
+  }
+
+  if (!authStore.isAdmin && !configStore.mailAvailable) {
+    baseItems = baseItems.filter(item => !item.name || !hiddenWhenMailUnavailableMenuNames.has(item.name))
+  }
+
+  if (!shouldHideHostingFeature.value) {
+    return baseItems
+  }
+
+  return baseItems.filter(item => {
+    if (item.divider && item.label === 'nav.expand') {
+      return false
+    }
+
+    return !item.name || !hiddenExpandMenuNames.has(item.name)
+  })
+})
+
+function isActive(item: MenuItem): boolean {
+  if (item.name === 'dashboard') return route.path === '/dashboard'
+  if (!item.path) return false
+  return route.path.startsWith(item.path)
+}
+
+function handleLinkClick() {
+  // 点击链接时关闭移动端抽屉
+  if (props.mobileOpen) {
+    emit('closeMobile')
+  }
+}
+</script>
+
+<template>
+  <!-- Mobile: Backdrop -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      leave-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div 
+        v-if="mobileOpen"
+        class="fixed inset-0 bg-black/50 z-40 md:hidden"
+        @click="emit('closeMobile')"
+      ></div>
+    </Transition>
+  </Teleport>
+
+  <!-- Sidebar -->
+  <aside 
+    :class="[
+      'flex flex-col min-h-full transition-all duration-200 border-r z-50',
+      // 移动端：mobileOpen 为 true 时显示，否则隐藏
+      // 桌面端：始终显示 (md:flex)
+      mobileOpen ? 'flex' : 'hidden md:flex',
+      // 宽度
+      collapsed ? 'md:w-16' : 'md:w-56',
+      'w-56', // 移动端全宽
+      // 位置
+      'md:relative fixed inset-y-0 left-0',
+      // 滑动动画的 transform
+      mobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+      // 主题颜色
+      themeStore.isDark ? 'border-gray-800 bg-gray-950' : 'border-gray-200 bg-white'
+    ]"
+  >
+    <!-- Logo -->
+    <div 
+      class="h-14 flex items-center border-b"
+      :class="[
+        themeStore.isDark ? 'border-gray-800' : 'border-gray-200',
+        collapsed && !mobileOpen ? 'justify-center px-2' : 'px-4'
+      ]"
+    >
+      <RouterLink to="/" class="flex items-center gap-2.5" @click="handleLinkClick">
+        <img
+          :src="brand.brandLogoUrl"
+          :alt="brand.brandName"
+          class="w-7 h-7 rounded flex-shrink-0"
+        />
+        <span 
+          v-if="!collapsed || mobileOpen" 
+          class="font-semibold text-sm"
+          :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+        >{{ brand.brandName }}</span>
+      </RouterLink>
+    </div>
+
+    <!-- 导航菜单 -->
+    <nav class="flex-1 py-3 px-2 space-y-0.5 overflow-y-auto">
+      <template v-for="item in menuItems" :key="item.name || item.label">
+        <!-- 分隔线 -->
+        <div v-if="item.divider" class="pt-3 pb-2">
+          <div 
+            v-if="!collapsed || mobileOpen" 
+            class="px-2 text-2xs font-medium uppercase tracking-wider"
+            :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+          >
+            {{ t(item.label || '') }}
+          </div>
+          <div 
+            v-else 
+            class="mx-2"
+            :class="themeStore.isDark ? 'border-t border-gray-800' : 'border-t border-gray-200'"
+          ></div>
+        </div>
+
+        <!-- 菜单项 -->
+        <RouterLink
+          v-else
+          :to="item.path || '/'"
+          :class="[
+            'flex items-center py-1.5 rounded text-sm transition-colors',
+            collapsed && !mobileOpen ? 'justify-center px-0' : 'gap-2.5 px-2',
+            isActive(item) 
+              ? (themeStore.isDark ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900')
+              : (themeStore.isDark ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-900' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100')
+          ]"
+          @click="handleLinkClick"
+        >
+          <!-- Icons -->
+          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <path
+              v-if="item.icon === 'home'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
+            <path
+              v-else-if="item.icon === 'server'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
+            />
+            <path
+              v-else-if="item.icon === 'settings'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+            />
+            <path
+              v-else-if="item.icon === 'users'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+            />
+            <path
+              v-else-if="item.icon === 'database'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
+            />
+            <path
+              v-else-if="item.icon === 'package'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+            />
+            <path
+              v-else-if="item.icon === 'key'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+            />
+            <path
+              v-else-if="item.icon === 'image'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+            />
+            <path
+              v-else-if="item.icon === 'folder'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+            />
+            <path
+              v-else-if="item.icon === 'book'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
+            />
+            <path
+              v-else-if="item.icon === 'help'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+            />
+            <path
+              v-else-if="item.icon === 'bell'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
+            />
+            <path
+              v-else-if="item.icon === 'logs'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+            <path
+              v-else-if="item.icon === 'chart'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M4 19h16M7 15.5V10m5 5.5V6m5 9.5v-3M6 7.5 10 10l4-5 4 2"
+            />
+            <path
+              v-else-if="item.icon === 'transfer'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+            />
+            <path
+              v-else-if="item.icon === 'terminal'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+            />
+            <path
+              v-else-if="item.icon === 'friends'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+            />
+            <path
+              v-else-if="item.icon === 'puzzle'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z"
+            />
+            <path
+              v-else-if="item.icon === 'ticket'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
+            />
+            <path
+              v-else-if="item.icon === 'card'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+            />
+            <path
+              v-else-if="item.icon === 'wallet'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3"
+            />
+            <path
+              v-else-if="item.icon === 'coin'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+            <path
+              v-else-if="item.icon === 'gift'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H4.5a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+            />
+            <path
+              v-else-if="item.icon === 'mail'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+            />
+            <path
+              v-else-if="item.icon === 'sparkles'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
+            />
+            <path
+              v-else-if="item.icon === 'cog'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
+            />
+            <path
+              v-if="item.icon === 'cog'" stroke-linecap="round" stroke-linejoin="round" 
+              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+            />
+          </svg>
+          <span v-if="!collapsed || mobileOpen" class="truncate">{{ t(item.label || '') }}</span>
+        </RouterLink>
+      </template>
+    </nav>
+
+    <!-- 底部 -->
+    <div 
+      v-if="!collapsed || mobileOpen" 
+      class="px-4 py-3 border-t flex items-center justify-between"
+      :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+    >
+      <div class="text-2xs" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">{{ brand.brandName }}</div>
+      <div class="flex items-center gap-2">
+        <!-- 邮箱链接 -->
+        <a 
+          v-if="footerEmailHref"
+          :href="footerEmailHref"
+          class="p-1 rounded transition-colors"
+          :class="themeStore.isDark ? 'text-gray-600 hover:text-gray-400 hover:bg-gray-800' : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'"
+          title="Email"
+          @click="handleLinkClick"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+          </svg>
+        </a>
+        <!-- Telegram 链接 -->
+        <a 
+          v-if="footerTelegramLink"
+          :href="footerTelegramLink"
+          target="_blank" 
+          rel="noopener noreferrer"
+          class="p-1 rounded transition-colors"
+          :class="themeStore.isDark ? 'text-gray-600 hover:text-gray-400 hover:bg-gray-800' : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'"
+          title="Telegram"
+          @click="handleLinkClick"
+        >
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>
diff --git a/client/src/components/profile/AccountSection.vue b/client/src/components/profile/AccountSection.vue
new file mode 100644
index 0000000..92acefc
--- /dev/null
+++ b/client/src/components/profile/AccountSection.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import UserAvatar from '@/components/UserAvatar.vue'
+import ChangeEmailModal from '@/components/profile/ChangeEmailModal.vue'
+import type { User } from '@/types/api'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const toast = useToast()
+const userDetails = ref<User | null>(null)
+const loading = ref<boolean>(true)
+
+// 头像风格相关 - 所有可用风格
+const avatarStyles = [
+  'adventurer', 'adventurerNeutral', 'avataaars', 'avataaarsNeutral',
+  'bigEars', 'bigEarsNeutral', 'bigSmile', 'bottts', 'botttsNeutral',
+  'croodles', 'croodlesNeutral', 'dylan', 'funEmoji', 'glass', 'icons',
+  'identicon', 'initials', 'lorelei', 'loreleiNeutral', 'micah', 'miniavs',
+  'notionists', 'notionistsNeutral', 'openPeeps', 'personas', 'pixelArt',
+  'pixelArtNeutral', 'rings', 'shapes', 'thumbs'
+] as const
+
+const selectedAvatarStyle = ref<string>(authStore.user?.avatarStyle || '')
+const savingAvatar = ref(false)
+const avatarExpanded = ref(false)
+const showChangeEmailModal = ref(false)
+
+// 获取风格的国际化名称
+function getStyleLabel(style: string): string {
+  return t(`profile.avatar.styles.${style}`)
+}
+
+const hasAvatarChanged = computed(() => {
+  return selectedAvatarStyle.value !== authStore.user?.avatarStyle
+})
+
+async function saveAvatarStyle(): Promise<void> {
+  if (!hasAvatarChanged.value) return
+  savingAvatar.value = true
+  try {
+    await api.users.update(authStore.user!.id, { avatarStyle: selectedAvatarStyle.value })
+    // 更新本地 store
+    if (authStore.user) {
+      authStore.user.avatarStyle = selectedAvatarStyle.value
+    }
+    toast.success(t('profile.avatar.saveSuccess'))
+  } catch (error) {
+    console.error('Failed to save avatar style:', error)
+    toast.error(t('profile.avatar.saveFailed'))
+  } finally {
+    savingAvatar.value = false
+  }
+}
+
+async function loadUserDetails(): Promise<void> {
+  try {
+    const response = await api.users.get(authStore.user!.id)
+    userDetails.value = (response as { user?: User }).user || null
+  } catch (error) {
+    console.error('Failed to load user details:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleEmailUpdated(email: string): void {
+  if (authStore.user) {
+    authStore.user.email = email
+  }
+  if (userDetails.value) {
+    userDetails.value.email = email
+  }
+  showChangeEmailModal.value = false
+}
+
+
+// 挂载时加载
+loadUserDetails()
+
+defineExpose({ loadUserDetails })
+</script>
+
+<template>
+  <!-- 账户信息 -->
+  <div class="card p-5">
+    <div class="flex items-start justify-between mb-4">
+      <h2 class="text-sm font-medium text-themed-secondary">{{ $t('profile.account.title') }}</h2>
+      <UserAvatar 
+        :username="authStore.user?.username || ''" 
+        :email="authStore.user?.email"
+        :avatar-style="authStore.user?.avatarStyle || ''"
+        :size="56"
+      />
+    </div>
+    <dl class="space-y-0 text-sm">
+      <div class="flex items-center justify-between py-3 border-b border-themed">
+        <dt class="text-themed-muted">{{ $t('profile.account.username') }}</dt>
+        <dd class="flex flex-wrap items-center justify-end gap-2 text-themed font-medium">
+          <span>{{ authStore.user?.username }}</span>
+          <span
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+            :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-600'"
+          >
+            {{ $t('profile.account.uid') }} {{ authStore.user?.id }}
+          </span>
+        </dd>
+      </div>
+      <div class="flex items-center justify-between py-3 border-b border-themed">
+        <dt class="text-themed-muted">{{ $t('profile.account.role') }}</dt>
+        <dd>
+          <span :class="['badge', authStore.isAdmin ? 'badge-warning' : 'badge-success']">
+            {{ authStore.isAdmin ? $t('profile.account.admin') : $t('profile.account.user') }}
+          </span>
+        </dd>
+      </div>
+      <div class="flex items-center justify-between py-3 border-b border-themed">
+        <dt class="text-themed-muted">{{ $t('profile.account.email') }}</dt>
+        <dd class="flex flex-wrap items-center justify-end gap-3">
+          <span class="text-themed-secondary">{{ authStore.user?.email || $t('profile.account.notSet') }}</span>
+          <button
+            type="button"
+            class="btn-secondary btn-sm"
+            @click="showChangeEmailModal = true"
+          >
+            {{ authStore.user?.email ? $t('profile.account.changeEmail') : $t('profile.account.bindEmail') }}
+          </button>
+        </dd>
+      </div>
+      <!-- 头像风格入口 -->
+      <div class="py-3">
+        <button
+          class="w-full flex items-center justify-between text-left"
+          @click="avatarExpanded = !avatarExpanded"
+        >
+          <span class="text-themed-muted">{{ $t('profile.avatar.title') }}</span>
+          <svg
+            class="w-4 h-4 text-themed-muted transition-transform duration-200"
+            :class="{ 'rotate-180': avatarExpanded }"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        <!-- 展开的头像选择区域 -->
+        <div
+          v-show="avatarExpanded"
+          class="mt-4 pt-4 border-t border-themed"
+        >
+          <div class="flex flex-col sm:flex-row items-start gap-6 mb-4">
+            <!-- 预览 -->
+            <div class="flex-shrink-0 flex flex-col items-center gap-2">
+              <UserAvatar 
+                :username="authStore.user?.username || ''"
+                :email="authStore.user?.email" 
+                :avatar-style="selectedAvatarStyle"
+                :prefer-badge="false"
+                :size="96"
+              />
+              <span class="text-sm text-themed-secondary">{{ getStyleLabel(selectedAvatarStyle) }}</span>
+            </div>
+            <!-- 风格选择 -->
+            <div class="flex-1 w-full">
+              <div class="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-2">
+                <button
+                  v-for="style in avatarStyles"
+                  :key="style"
+                  class="flex flex-col items-center gap-1 p-1.5 rounded-lg border-2 transition-all"
+                  :class="[
+                    selectedAvatarStyle === style 
+                      ? 'border-blue-500 bg-blue-500/10' 
+                      : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600'
+                  ]"
+                  :title="getStyleLabel(style)"
+                  @click="selectedAvatarStyle = style"
+                >
+                  <UserAvatar 
+                    :username="authStore.user?.username || ''"
+                    :email="authStore.user?.email" 
+                    :avatar-style="style"
+                    :prefer-badge="false"
+                    :size="32"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="flex justify-end">
+            <button
+              class="btn btn-primary text-sm"
+              :disabled="!hasAvatarChanged || savingAvatar"
+              @click="saveAvatarStyle"
+            >
+              {{ savingAvatar ? $t('common.saving') : $t('common.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </dl>
+  </div>
+
+  <ChangeEmailModal
+    :show="showChangeEmailModal"
+    @close="showChangeEmailModal = false"
+    @updated="handleEmailUpdated"
+  />
+</template>
diff --git a/client/src/components/profile/BillingSection.vue b/client/src/components/profile/BillingSection.vue
new file mode 100644
index 0000000..9c863f1
--- /dev/null
+++ b/client/src/components/profile/BillingSection.vue
@@ -0,0 +1,653 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import TermsOfServiceModal from '@/components/TermsOfServiceModal.vue'
+
+const { t } = useI18n()
+const toast = useToast()
+
+// 余额数据
+const balance = ref({
+  balance: 0,
+  frozen: 0,
+  totalRecharge: 0,
+  totalConsume: 0
+})
+const loading = ref(true)
+
+// 余额日志
+const logs = ref<any[]>([])
+const logsLoading = ref(false)
+const logsPage = ref(1)
+const logsPageSize = ref(5)
+const logsTotal = ref(0)
+const showLogs = ref(false)
+
+// 充值弹窗
+const showRechargeModal = ref(false)
+const rechargeLoading = ref(false)
+const providers = ref<any[]>([])
+const selectedProvider = ref<number | null>(null)
+const rechargeAmount = ref(10)
+const agreedToTerms = ref(false)
+const showTermsModal = ref(false)
+// 支付方式选择
+const selectedPaymentMethod = ref<string>('')
+
+// 充值记录
+const rechargeRecords = ref<any[]>([])
+const recordsLoading = ref(false)
+const recordsPage = ref(1)
+const recordsPageSize = ref(5)
+const recordsTotal = ref(0)
+const showRecords = ref(false)
+
+onMounted(() => {
+  loadBalance()
+})
+
+async function loadBalance() {
+  loading.value = true
+  try {
+    const res = await api.billing.getUserBalance()
+    balance.value = res.balance
+  } catch (err: any) {
+    console.error('Failed to load balance:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadLogs() {
+  logsLoading.value = true
+  try {
+    const res = await api.billing.getBalanceLogs({
+      page: logsPage.value,
+      pageSize: logsPageSize.value
+    })
+    logs.value = res.records || []
+    logsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('profile.billing.loadLogsFailed') + ': ' + err.message)
+  } finally {
+    logsLoading.value = false
+  }
+}
+
+async function loadProviders() {
+  try {
+    const res = await api.billing.getPaymentProviders()
+    providers.value = res.providers || []
+    if (providers.value.length > 0) {
+      selectedProvider.value = providers.value[0].id
+      // 自动选中第一个支付方式
+      updateDefaultPaymentMethod(providers.value[0])
+    }
+  } catch (err: any) {
+    toast.error(t('profile.billing.loadProvidersFailed') + ': ' + err.message)
+  }
+}
+
+// 更新默认支付方式
+function updateDefaultPaymentMethod(provider: any) {
+  if (provider?.type === 'heleket') {
+    selectedPaymentMethod.value = ''
+  } else if (provider && provider.methods && provider.methods.length > 0) {
+    selectedPaymentMethod.value = provider.methods[0]
+  } else {
+    selectedPaymentMethod.value = ''
+  }
+}
+
+// 监听支付渠道变化，自动更新默认支付方式
+watch(selectedProvider, (newProviderId) => {
+  if (newProviderId) {
+    const provider = providers.value.find(p => p.id === newProviderId)
+    updateDefaultPaymentMethod(provider)
+  }
+})
+
+async function loadRecords() {
+  recordsLoading.value = true
+  try {
+    const res = await api.billing.getRechargeOrders({
+      page: recordsPage.value,
+      pageSize: recordsPageSize.value
+    })
+    rechargeRecords.value = res.records || []
+    recordsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('profile.billing.loadRecordsFailed') + ': ' + err.message)
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
+function toggleLogs() {
+  showLogs.value = !showLogs.value
+  if (showLogs.value && logs.value.length === 0) {
+    loadLogs()
+  }
+}
+
+function toggleRecords() {
+  showRecords.value = !showRecords.value
+  if (showRecords.value && rechargeRecords.value.length === 0) {
+    loadRecords()
+  }
+}
+
+function openRechargeModal() {
+  rechargeAmount.value = 10
+  agreedToTerms.value = false
+  loadProviders()
+  showRechargeModal.value = true
+}
+
+async function createRechargeOrder() {
+  if (!selectedProvider.value) {
+    toast.error(t('profile.billing.selectProvider'))
+    return
+  }
+  if (rechargeAmount.value <= 0) {
+    toast.error(t('profile.billing.invalidAmount'))
+    return
+  }
+
+  rechargeLoading.value = true
+  try {
+    // 获取选中的支付方式
+    const provider = providers.value.find(p => p.id === selectedProvider.value)
+    let paymentMethod = ''
+    if (provider && provider.type !== 'heleket' && provider.methods && provider.methods.length > 0) {
+      paymentMethod = selectedPaymentMethod.value || provider.methods[0]
+    }
+    
+    const res = await api.billing.createRechargeOrder(selectedProvider.value, rechargeAmount.value, paymentMethod)
+    
+    // 如果有支付链接，跳转支付
+    if (res.payUrl) {
+      toast.success(t('profile.billing.redirecting'))
+      showRechargeModal.value = false
+      // 延迟跳转，让用户看到提示
+      const payUrl = res.payUrl
+      setTimeout(() => {
+        window.location.href = payUrl
+      }, 500)
+      return
+    }
+    
+    // 如果没有支付链接（如人工充值）
+    toast.success(t('profile.billing.orderCreated'))
+    showRechargeModal.value = false
+    toast.info(`${t('profile.billing.orderNo')}: ${res.order.orderNo}`)
+    
+    // 刷新记录
+    if (showRecords.value) {
+      loadRecords()
+    }
+  } catch (err: any) {
+    toast.error(t('profile.billing.createOrderFailed') + ': ' + err.message)
+  } finally {
+    rechargeLoading.value = false
+  }
+}
+
+function formatMoney(amount: number): string {
+  return `¥${amount.toFixed(2)}`
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+function getLogTypeName(type: string): string {
+  const map: Record<string, string> = {
+    recharge: t('profile.billing.logTypes.recharge'),
+    consume: t('profile.billing.logTypes.consume'),
+    refund: t('profile.billing.logTypes.refund'),
+    admin_adjust: t('profile.billing.logTypes.adminAdjust'),
+    gift: t('profile.billing.logTypes.gift')
+  }
+  return map[type] || type
+}
+
+function getStatusBadge(status: string): string {
+  const map: Record<string, string> = {
+    pending: 'badge-warning',
+    paid: 'badge-info',
+    completed: 'badge-success',
+    failed: 'badge-error',
+    cancelled: 'badge-ghost',
+    refunded: 'badge-ghost'
+  }
+  return map[status] || ''
+}
+
+function getStatusName(status: string): string {
+  const map: Record<string, string> = {
+    pending: t('profile.billing.status.pending'),
+    paid: t('profile.billing.status.paid'),
+    completed: t('profile.billing.status.completed'),
+    failed: t('profile.billing.status.failed'),
+    cancelled: t('profile.billing.status.cancelled'),
+    refunded: t('profile.billing.status.refunded')
+  }
+  return map[status] || status
+}
+
+function getPaymentMethodName(method: string): string {
+  const key = `wallet.paymentMethods.${method}`
+  const translated = t(key)
+  if (translated !== key) {
+    return translated
+  }
+
+  const normalized = method.trim()
+  const matched = normalized.match(/^([A-Za-z0-9._-]+)\s*(?:[@:/]\s*([A-Za-z0-9._-]+))?$/)
+  if (!matched) {
+    return normalized || method
+  }
+
+  const currency = matched[1]?.toUpperCase() || normalized
+  const network = matched[2]?.toUpperCase()
+  return network ? `${currency} (${network})` : currency
+}
+
+function getRechargeMethodDisplay(rec: any): string {
+  if (rec.actualPaymentMethod) {
+    return getPaymentMethodName(rec.actualPaymentMethod)
+  }
+  if (rec.paymentMethod) {
+    return getPaymentMethodName(rec.paymentMethod)
+  }
+  return ''
+}
+
+function getRechargeCreditLabelKey(status: string): string {
+  return status === 'completed' ? 'wallet.actualAmount' : 'wallet.estimatedAmount'
+}
+
+function getRechargeGatewayStatusText(rec: any): string {
+  return rec.status === 'pending' && rec.gatewayStatusDescription ? rec.gatewayStatusDescription : ''
+}
+
+const logsTotalPages = computed(() => Math.ceil(logsTotal.value / logsPageSize.value))
+const recordsTotalPages = computed(() => Math.ceil(recordsTotal.value / recordsPageSize.value))
+const selectedProviderInfo = computed(() => providers.value.find(p => p.id === selectedProvider.value))
+
+function getSelectedPaymentMethodForProvider(provider: any): string {
+  if (!provider || provider.type === 'heleket') return ''
+  if (!provider.methods || provider.methods.length === 0) return ''
+  return selectedPaymentMethod.value || provider.methods[0]
+}
+
+function getProviderFeeConfig(provider: any, method?: string): { feeRate: number; feeFixed: number } {
+  const methodFee = provider?.type === 'yipay' && method && provider?.methodFees ? provider.methodFees[method] : null
+  if (methodFee) {
+    return {
+      feeRate: Number(methodFee.feeRate || 0),
+      feeFixed: Number(methodFee.feeFixed || 0)
+    }
+  }
+
+  return {
+    feeRate: Number(provider?.feeRate || 0),
+    feeFixed: Number(provider?.feeFixed || 0)
+  }
+}
+
+const selectedFeeConfig = computed(() => {
+  const provider = selectedProviderInfo.value
+  return getProviderFeeConfig(provider, getSelectedPaymentMethodForProvider(provider))
+})
+
+const selectedRechargeFee = computed(() => {
+  const amount = Number(rechargeAmount.value || 0)
+  const feeRate = selectedFeeConfig.value.feeRate
+  const feeFixed = selectedFeeConfig.value.feeFixed
+  return Math.max(0, Math.round((amount * feeRate + feeFixed) * 100) / 100)
+})
+
+const selectedFeeIsSurcharge = computed(() => selectedProviderInfo.value?.type === 'yipay')
+
+const selectedPayableAmount = computed(() => {
+  const amount = Number(rechargeAmount.value || 0)
+  const total = selectedFeeIsSurcharge.value ? amount + selectedRechargeFee.value : amount
+  return Math.max(0, Math.round(total * 100) / 100)
+})
+
+const selectedCreditAmount = computed(() => {
+  const amount = Number(rechargeAmount.value || 0)
+  const total = selectedFeeIsSurcharge.value ? amount : amount - selectedRechargeFee.value
+  return Math.max(0, Math.round(total * 100) / 100)
+})
+
+// 格式化金额：限制两位小数
+function formatAmount() {
+  if (rechargeAmount.value) {
+    rechargeAmount.value = Math.round(rechargeAmount.value * 100) / 100
+  }
+}
+</script>
+
+<template>
+  <div id="billing" class="card p-5">
+    <h2 class="text-sm font-medium text-themed-secondary mb-4">{{ $t('profile.billing.title') }}</h2>
+    
+    <!-- 余额显示 -->
+    <div v-if="loading" class="animate-pulse">
+      <div class="h-8 bg-themed-secondary rounded w-32"></div>
+    </div>
+    <div v-else class="space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <div class="text-3xl font-bold text-themed">{{ formatMoney(balance.balance) }}</div>
+          <div class="text-sm text-themed-muted mt-1">{{ $t('profile.billing.currentBalance') }}</div>
+        </div>
+        <button class="btn btn-primary" @click="openRechargeModal">
+          {{ $t('profile.billing.recharge') }}
+        </button>
+      </div>
+
+      <!-- 统计信息 -->
+      <div class="grid grid-cols-2 gap-4 pt-4 border-t border-themed">
+        <div>
+          <div class="text-sm text-themed-muted">{{ $t('profile.billing.totalRecharge') }}</div>
+          <div class="text-lg font-medium text-green-500">{{ formatMoney(balance.totalRecharge) }}</div>
+        </div>
+        <div>
+          <div class="text-sm text-themed-muted">{{ $t('profile.billing.totalConsume') }}</div>
+          <div class="text-lg font-medium text-red-500">{{ formatMoney(balance.totalConsume) }}</div>
+        </div>
+      </div>
+
+      <!-- 展开区域 -->
+      <div class="pt-4 border-t border-themed space-y-3">
+        <!-- 余额日志 -->
+        <div>
+          <button
+            class="w-full flex items-center justify-between text-left text-sm"
+            @click="toggleLogs"
+          >
+            <span class="text-themed-muted">{{ $t('profile.billing.balanceLogs') }}</span>
+            <svg
+              class="w-4 h-4 text-themed-muted transition-transform"
+              :class="{ 'rotate-180': showLogs }"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          
+          <div v-show="showLogs" class="mt-3">
+            <div v-if="logsLoading" class="text-center py-4 text-themed-muted">
+              {{ $t('common.loading') }}...
+            </div>
+            <div v-else-if="logs.length > 0" class="space-y-2">
+              <div
+                v-for="log in logs"
+                :key="log.id"
+                class="flex items-center justify-between py-2 border-b border-themed last:border-0"
+              >
+                <div>
+                  <div class="text-sm text-themed">{{ getLogTypeName(log.type) }}</div>
+                  <div class="text-xs text-themed-muted">{{ formatDate(log.createdAt) }}</div>
+                </div>
+                <div :class="log.amount >= 0 ? 'text-green-500' : 'text-red-500'">
+                  {{ log.amount >= 0 ? '+' : '' }}{{ formatMoney(log.amount) }}
+                </div>
+              </div>
+              
+              <!-- 分页 -->
+              <div v-if="logsTotalPages > 1" class="flex justify-center gap-2 pt-2">
+                <button
+                  class="btn btn-xs btn-ghost"
+                  :disabled="logsPage <= 1"
+                  @click="logsPage--; loadLogs()"
+                >
+                  {{ $t('common.prev') }}
+                </button>
+                <span class="text-xs text-themed-muted self-center">{{ logsPage }}/{{ logsTotalPages }}</span>
+                <button
+                  class="btn btn-xs btn-ghost"
+                  :disabled="logsPage >= logsTotalPages"
+                  @click="logsPage++; loadLogs()"
+                >
+                  {{ $t('common.next') }}
+                </button>
+              </div>
+            </div>
+            <div v-else class="text-center py-4 text-themed-muted text-sm">
+              {{ $t('profile.billing.noLogs') }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 充值记录 -->
+        <div>
+          <button
+            class="w-full flex items-center justify-between text-left text-sm"
+            @click="toggleRecords"
+          >
+            <span class="text-themed-muted">{{ $t('profile.billing.rechargeRecords') }}</span>
+            <svg
+              class="w-4 h-4 text-themed-muted transition-transform"
+              :class="{ 'rotate-180': showRecords }"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          
+          <div v-show="showRecords" class="mt-3">
+            <div v-if="recordsLoading" class="text-center py-4 text-themed-muted">
+              {{ $t('common.loading') }}...
+            </div>
+            <div v-else-if="rechargeRecords.length > 0" class="space-y-2">
+              <div
+                v-for="rec in rechargeRecords"
+                :key="rec.id"
+                class="flex items-start justify-between gap-3 py-2 border-b border-themed last:border-0"
+              >
+                <div class="min-w-0">
+                  <div class="text-sm text-themed">{{ formatMoney(rec.amount) }}</div>
+                  <div class="text-xs text-themed-muted">{{ formatDate(rec.createdAt) }}</div>
+                  <div v-if="rec.provider?.name || getRechargeMethodDisplay(rec)" class="text-xs text-themed-muted">
+                    {{ rec.provider?.name || '-' }}<span v-if="getRechargeMethodDisplay(rec)"> · {{ getRechargeMethodDisplay(rec) }}</span>
+                  </div>
+                  <div v-if="rec.actualAmount !== null" class="text-xs text-themed-muted">
+                    {{ $t(getRechargeCreditLabelKey(rec.status)) }} {{ formatMoney(rec.actualAmount) }}
+                  </div>
+                  <div v-if="getRechargeGatewayStatusText(rec)" class="text-xs text-themed-muted">
+                    {{ getRechargeGatewayStatusText(rec) }}
+                  </div>
+                  <div v-if="rec.paymentUuid" class="truncate text-xs text-themed-muted" :title="rec.paymentUuid">
+                    {{ $t('wallet.paymentUuid') }} {{ rec.paymentUuid }}
+                  </div>
+                  <div v-if="rec.paymentTxid" class="truncate text-xs text-themed-muted" :title="rec.paymentTxid">
+                    {{ $t('wallet.paymentTxid') }} {{ rec.paymentTxid }}
+                  </div>
+                  <div v-if="rec.completedAt" class="text-xs text-themed-muted">
+                    {{ $t('wallet.completedAt') }} {{ formatDate(rec.completedAt) }}
+                  </div>
+                </div>
+                <span :class="['badge badge-sm', getStatusBadge(rec.status)]">
+                  {{ getStatusName(rec.status) }}
+                </span>
+              </div>
+              
+              <!-- 分页 -->
+              <div v-if="recordsTotalPages > 1" class="flex justify-center gap-2 pt-2">
+                <button
+                  class="btn btn-xs btn-ghost"
+                  :disabled="recordsPage <= 1"
+                  @click="recordsPage--; loadRecords()"
+                >
+                  {{ $t('common.prev') }}
+                </button>
+                <span class="text-xs text-themed-muted self-center">{{ recordsPage }}/{{ recordsTotalPages }}</span>
+                <button
+                  class="btn btn-xs btn-ghost"
+                  :disabled="recordsPage >= recordsTotalPages"
+                  @click="recordsPage++; loadRecords()"
+                >
+                  {{ $t('common.next') }}
+                </button>
+              </div>
+            </div>
+            <div v-else class="text-center py-4 text-themed-muted text-sm">
+              {{ $t('profile.billing.noRecords') }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 充值弹窗 -->
+    <Teleport to="body">
+      <div v-if="showRechargeModal" class="modal-overlay" @click.self="showRechargeModal = false">
+        <div class="modal-content max-w-sm">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('profile.billing.recharge') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showRechargeModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <!-- 支付渠道选择 -->
+            <div>
+              <label class="label">{{ $t('profile.billing.paymentMethod') }}</label>
+              <div v-if="providers.length === 0" class="text-themed-muted text-sm">
+                {{ $t('profile.billing.noProviders') }}
+              </div>
+              <div v-else class="grid grid-cols-2 gap-2">
+                <button
+                  v-for="p in providers"
+                  :key="p.id"
+                  class="p-3 rounded-lg border-2 text-sm transition-colors"
+                  :class="selectedProvider === p.id 
+                    ? 'border-blue-500 bg-blue-500/10' 
+                    : 'border-themed hover:border-gray-400'"
+                  @click="selectedProvider = p.id; selectedPaymentMethod = ''"
+                >
+                  {{ p.name }}
+                </button>
+              </div>
+            </div>
+
+            <!-- 支付方式选择（仅当渠道支持多种方式时显示） -->
+            <div v-if="selectedProviderInfo && selectedProviderInfo.type !== 'heleket' && selectedProviderInfo.methods && selectedProviderInfo.methods.length > 1">
+              <label class="label">{{ $t('wallet.paymentMethodType') }}</label>
+              <div class="grid grid-cols-3 gap-2">
+                <button
+                  v-for="method in selectedProviderInfo.methods"
+                  :key="method"
+                  class="p-2 rounded-lg border-2 text-xs transition-colors flex items-center justify-center gap-1"
+                  :class="selectedPaymentMethod === method || (!selectedPaymentMethod && selectedProviderInfo.methods[0] === method)
+                    ? 'border-blue-500 bg-blue-500/10' 
+                    : 'border-themed hover:border-gray-400'"
+                  @click="selectedPaymentMethod = method"
+                >
+                  {{ getPaymentMethodName(method) }}
+                </button>
+              </div>
+            </div>
+
+            <div v-else-if="selectedProviderInfo?.type === 'heleket'" class="text-xs text-themed-muted rounded-lg bg-themed-secondary px-3 py-2">
+              {{ $t('wallet.heleketSelectionHint') }}
+            </div>
+
+            <!-- 充值金额 -->
+            <div>
+              <label class="label">{{ $t('profile.billing.amount') }}</label>
+              <div class="grid grid-cols-4 gap-2 mb-2">
+                <button
+                  v-for="amt in [10, 50, 100, 200]"
+                  :key="amt"
+                  class="btn btn-sm"
+                  :class="rechargeAmount === amt ? 'btn-primary' : 'btn-ghost'"
+                  @click="rechargeAmount = amt"
+                >
+                  ¥{{ amt }}
+                </button>
+              </div>
+              <input
+                v-model.number="rechargeAmount"
+                type="number"
+                class="input w-full"
+                :min="selectedProviderInfo?.minAmount || 1"
+                :max="selectedProviderInfo?.maxAmount || undefined"
+                step="0.01"
+                @blur="formatAmount"
+              />
+              <div v-if="selectedProviderInfo" class="text-xs text-themed-muted mt-1">
+                {{ $t('profile.billing.amountRange') }}: 
+                {{ selectedProviderInfo.minAmount.toFixed(2) }} - 
+                {{ selectedProviderInfo.maxAmount ? selectedProviderInfo.maxAmount.toFixed(2) : $t('common.unlimited') }}
+              </div>
+            </div>
+
+            <!-- 费用预览 -->
+            <div v-if="selectedProviderInfo && selectedRechargeFee > 0" class="rounded-lg border border-amber-500/20 bg-amber-500/10 p-3 text-sm text-amber-600 dark:text-amber-400">
+              <div>
+                {{ $t('profile.billing.feeNote') }}:
+                <span v-if="selectedFeeConfig.feeRate > 0" class="font-medium">{{ (selectedFeeConfig.feeRate * 100).toFixed(2) }}%</span>
+                <span v-if="selectedFeeConfig.feeRate > 0 && selectedFeeConfig.feeFixed > 0"> + </span>
+                <span v-if="selectedFeeConfig.feeFixed > 0" class="font-medium">¥{{ selectedFeeConfig.feeFixed.toFixed(2) }}</span>
+                <span class="font-medium"> = ¥{{ selectedRechargeFee.toFixed(2) }}</span>
+              </div>
+              <div class="mt-1">
+                {{ $t('wallet.payableAmount') }}:
+                <span class="font-semibold">¥{{ selectedPayableAmount.toFixed(2) }}</span>
+                <span class="text-themed-muted"> / {{ $t('wallet.actualAmount') }} ¥{{ selectedCreditAmount.toFixed(2) }}</span>
+              </div>
+            </div>
+
+            <!-- 服务条款勾选 -->
+            <div class="flex items-start gap-2">
+              <input
+                id="agree-terms-billing"
+                v-model="agreedToTerms"
+                type="checkbox"
+                class="mt-1 h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 bg-transparent"
+              />
+              <label for="agree-terms-billing" class="text-xs text-themed-muted leading-relaxed">
+                {{ $t('auth.tos.agreePrefix') }}
+                <button
+                  type="button"
+                  class="text-blue-500 hover:text-blue-400 hover:underline"
+                  @click="showTermsModal = true"
+                >
+                  {{ $t('auth.tos.termsLink') }}
+                </button>
+              </label>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showRechargeModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary"
+              :disabled="rechargeLoading || !selectedProvider || rechargeAmount <= 0 || !agreedToTerms"
+              @click="createRechargeOrder"
+            >
+              {{ rechargeLoading ? $t('common.processing') : $t('profile.billing.pay') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 服务条款弹窗 -->
+    <TermsOfServiceModal
+      :show="showTermsModal"
+      @close="showTermsModal = false"
+    />
+  </div>
+</template>
diff --git a/client/src/components/profile/ChangeEmailModal.vue b/client/src/components/profile/ChangeEmailModal.vue
new file mode 100644
index 0000000..6d7eded
--- /dev/null
+++ b/client/src/components/profile/ChangeEmailModal.vue
@@ -0,0 +1,468 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+
+interface Props {
+  show: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'updated', email: string): void
+}>()
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+type Step = 'verifyCurrent' | 'verifyNew'
+
+const step = ref<Step>('verifyCurrent')
+const currentEmailCode = ref('')
+const currentTarget = ref('')
+const currentStepError = ref('')
+const currentCodeSent = ref(false)
+const sendingCurrentCode = ref(false)
+const verifyingCurrentCode = ref(false)
+const currentCountdown = ref(0)
+
+const newEmail = ref('')
+const newEmailCode = ref('')
+const newStepError = ref('')
+const newCodeSent = ref(false)
+const sendingNewCode = ref(false)
+const submitting = ref(false)
+const newCountdown = ref(0)
+
+let currentCountdownTimer: ReturnType<typeof setInterval> | null = null
+let newCountdownTimer: ReturnType<typeof setInterval> | null = null
+
+const hasCurrentEmail = computed(() => !!authStore.user?.email)
+const normalizedNewEmail = computed(() => newEmail.value.trim().toLowerCase())
+const modalTitle = computed(() => (
+  hasCurrentEmail.value
+    ? t('profile.account.emailDialog.titleChange')
+    : t('profile.account.emailDialog.titleBind')
+))
+const maskedCurrentEmail = computed(() => maskEmail(authStore.user?.email || ''))
+
+function maskEmail(email: string): string {
+  if (!email || !email.includes('@')) return email
+  const [localPart, domain] = email.split('@')
+  if (localPart.length <= 2) return `${localPart[0] || ''}***@${domain}`
+  return `${localPart.slice(0, 2)}***@${domain}`
+}
+
+function clearCurrentCountdown(): void {
+  if (currentCountdownTimer) {
+    clearInterval(currentCountdownTimer)
+    currentCountdownTimer = null
+  }
+  currentCountdown.value = 0
+}
+
+function clearNewCountdown(): void {
+  if (newCountdownTimer) {
+    clearInterval(newCountdownTimer)
+    newCountdownTimer = null
+  }
+  newCountdown.value = 0
+}
+
+function startCurrentCountdown(seconds: number = 120): void {
+  clearCurrentCountdown()
+  currentCountdown.value = seconds
+  currentCountdownTimer = setInterval(() => {
+    currentCountdown.value -= 1
+    if (currentCountdown.value <= 0) {
+      clearCurrentCountdown()
+    }
+  }, 1000)
+}
+
+function startNewCountdown(seconds: number = 60): void {
+  clearNewCountdown()
+  newCountdown.value = seconds
+  newCountdownTimer = setInterval(() => {
+    newCountdown.value -= 1
+    if (newCountdown.value <= 0) {
+      clearNewCountdown()
+    }
+  }, 1000)
+}
+
+function resetState(): void {
+  step.value = hasCurrentEmail.value ? 'verifyCurrent' : 'verifyNew'
+  currentEmailCode.value = ''
+  currentTarget.value = ''
+  currentStepError.value = ''
+  currentCodeSent.value = false
+  sendingCurrentCode.value = false
+  verifyingCurrentCode.value = false
+  clearCurrentCountdown()
+
+  newEmail.value = ''
+  newEmailCode.value = ''
+  newStepError.value = ''
+  newCodeSent.value = false
+  sendingNewCode.value = false
+  submitting.value = false
+  clearNewCountdown()
+}
+
+function closeModal(): void {
+  if (sendingCurrentCode.value || verifyingCurrentCode.value || sendingNewCode.value || submitting.value) {
+    return
+  }
+  resetState()
+  emit('close')
+}
+
+function validateNewEmailInput(): string | null {
+  if (!normalizedNewEmail.value) {
+    return t('profile.account.emailDialog.newEmailRequired')
+  }
+
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailPattern.test(normalizedNewEmail.value)) {
+    return t('profile.account.emailDialog.newEmailInvalid')
+  }
+
+  if (hasCurrentEmail.value && normalizedNewEmail.value === (authStore.user?.email || '').trim().toLowerCase()) {
+    return t('profile.account.emailDialog.newEmailSame')
+  }
+
+  return null
+}
+
+function handleVerificationExpired(error: unknown): boolean {
+  const apiError = error as { code?: string; message?: string }
+  if (apiError?.code !== 'VERIFICATION_REQUIRED') {
+    return false
+  }
+
+  if (hasCurrentEmail.value) {
+    step.value = 'verifyCurrent'
+    currentStepError.value = t('profile.account.emailDialog.currentVerificationExpired')
+    currentCodeSent.value = false
+    currentEmailCode.value = ''
+    clearCurrentCountdown()
+  }
+
+  return true
+}
+
+async function sendCurrentCode(): Promise<void> {
+  currentStepError.value = ''
+  sendingCurrentCode.value = true
+
+  try {
+    const response = await api.verification.request('change_email')
+    currentTarget.value = response.maskedTarget || response.target || maskedCurrentEmail.value
+    currentCodeSent.value = true
+    startCurrentCountdown(120)
+    toast.success(t('profile.account.emailDialog.currentCodeSent'))
+  } catch (error) {
+    currentStepError.value = translateError(error)
+  } finally {
+    sendingCurrentCode.value = false
+  }
+}
+
+async function verifyCurrentCode(): Promise<void> {
+  if (currentEmailCode.value.length !== 6) {
+    currentStepError.value = t('profile.account.emailDialog.currentCodeRequired')
+    return
+  }
+
+  currentStepError.value = ''
+  verifyingCurrentCode.value = true
+
+  try {
+    await api.verification.verify('change_email', currentEmailCode.value)
+    step.value = 'verifyNew'
+    currentStepError.value = ''
+    toast.success(t('profile.account.emailDialog.currentVerifiedSuccess'))
+  } catch (error) {
+    currentStepError.value = translateError(error)
+  } finally {
+    verifyingCurrentCode.value = false
+  }
+}
+
+async function sendNewEmailCode(): Promise<void> {
+  const validationError = validateNewEmailInput()
+  if (validationError) {
+    newStepError.value = validationError
+    return
+  }
+
+  newStepError.value = ''
+  sendingNewCode.value = true
+
+  try {
+    await api.users.sendChangeEmailCode(authStore.user!.id, normalizedNewEmail.value)
+    newCodeSent.value = true
+    startNewCountdown(60)
+    toast.success(t('profile.account.emailDialog.newCodeSent'))
+  } catch (error) {
+    if (!handleVerificationExpired(error)) {
+      newStepError.value = translateError(error)
+    }
+  } finally {
+    sendingNewCode.value = false
+  }
+}
+
+async function submitEmailChange(): Promise<void> {
+  const validationError = validateNewEmailInput()
+  if (validationError) {
+    newStepError.value = validationError
+    return
+  }
+
+  if (!newEmailCode.value.trim()) {
+    newStepError.value = t('profile.account.emailDialog.newCodeRequired')
+    return
+  }
+
+  newStepError.value = ''
+  submitting.value = true
+
+  try {
+    await api.users.update(authStore.user!.id, {
+      email: normalizedNewEmail.value,
+      emailCode: newEmailCode.value.trim()
+    })
+
+    if (authStore.user) {
+      authStore.user.email = normalizedNewEmail.value
+    }
+
+    toast.success(t('profile.account.emailDialog.updateSuccess'))
+    emit('updated', normalizedNewEmail.value)
+    resetState()
+    emit('close')
+  } catch (error) {
+    if (!handleVerificationExpired(error)) {
+      newStepError.value = translateError(error)
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+watch(() => props.show, (show) => {
+  if (show) {
+    resetState()
+  }
+})
+
+watch(normalizedNewEmail, (value, oldValue) => {
+  if (value === oldValue) return
+  newEmailCode.value = ''
+  newCodeSent.value = false
+  clearNewCountdown()
+  newStepError.value = ''
+})
+
+onUnmounted(() => {
+  clearCurrentCountdown()
+  clearNewCountdown()
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="show" class="modal-overlay">
+        <div class="modal-backdrop" @click="closeModal" />
+        <div class="modal-content max-w-xl">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ modalTitle }}</h3>
+            <button
+              type="button"
+              class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              @click="closeModal"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body space-y-5">
+            <div class="grid gap-3 sm:grid-cols-2">
+              <div
+                class="rounded-xl border px-4 py-3"
+                :class="step === 'verifyCurrent'
+                  ? (themeStore.isDark ? 'border-blue-500/40 bg-blue-500/10' : 'border-blue-200 bg-blue-50')
+                  : (themeStore.isDark ? 'border-gray-700 bg-gray-800/80' : 'border-gray-200 bg-gray-50')"
+              >
+                <span
+                  class="inline-flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold"
+                  :class="themeStore.isDark ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-700 border border-gray-200'"
+                >
+                  1
+                </span>
+                <p class="mt-1 text-sm font-medium text-themed">
+                  {{ hasCurrentEmail ? t('profile.account.emailDialog.stepCurrent') : t('profile.account.emailDialog.stepCurrentSkipped') }}
+                </p>
+                <p class="mt-1 text-xs leading-5 text-themed-muted">
+                  {{ hasCurrentEmail ? t('profile.account.emailDialog.stepCurrentHint') : t('profile.account.emailDialog.noCurrentEmailHint') }}
+                </p>
+              </div>
+              <div
+                class="rounded-xl border px-4 py-3"
+                :class="step === 'verifyNew'
+                  ? (themeStore.isDark ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-emerald-200 bg-emerald-50')
+                  : (themeStore.isDark ? 'border-gray-700 bg-gray-800/80' : 'border-gray-200 bg-gray-50')"
+              >
+                <span
+                  class="inline-flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold"
+                  :class="themeStore.isDark ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-700 border border-gray-200'"
+                >
+                  2
+                </span>
+                <p class="mt-1 text-sm font-medium text-themed">{{ t('profile.account.emailDialog.stepNew') }}</p>
+                <p class="mt-1 text-xs leading-5 text-themed-muted">{{ t('profile.account.emailDialog.stepNewHint') }}</p>
+              </div>
+            </div>
+
+            <div
+              v-if="step === 'verifyCurrent'"
+              class="rounded-2xl border p-4 space-y-4"
+              :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/70' : 'border-gray-200 bg-white'"
+            >
+              <div class="rounded-xl border px-4 py-3" :class="themeStore.isDark ? 'border-yellow-500/30 bg-yellow-500/10' : 'border-yellow-200 bg-yellow-50'">
+                <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-yellow-200' : 'text-yellow-900'">
+                  {{ t('profile.account.emailDialog.verifyCurrentTitle') }}
+                </p>
+                <p class="mt-1 text-xs leading-5" :class="themeStore.isDark ? 'text-yellow-300/80' : 'text-yellow-700'">
+                  {{ t('profile.account.emailDialog.verifyCurrentDesc', { email: currentTarget || maskedCurrentEmail }) }}
+                </p>
+              </div>
+
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">
+                    {{ t('profile.account.emailDialog.currentCode') }}
+                  </label>
+                  <input
+                    v-model="currentEmailCode"
+                    type="text"
+                    maxlength="6"
+                    class="input w-full"
+                    :placeholder="t('profile.account.emailDialog.currentCodePlaceholder')"
+                  />
+                </div>
+                <button
+                  type="button"
+                  class="btn-secondary whitespace-nowrap"
+                  :disabled="sendingCurrentCode || currentCountdown > 0"
+                  @click="sendCurrentCode"
+                >
+                  {{
+                    currentCountdown > 0
+                      ? t('profile.account.emailDialog.resendIn', { seconds: currentCountdown })
+                      : (currentCodeSent ? t('profile.account.emailDialog.resendCurrentCode') : t('profile.account.emailDialog.sendCurrentCode'))
+                  }}
+                </button>
+              </div>
+
+              <div v-if="currentStepError" class="text-sm text-red-500">{{ currentStepError }}</div>
+            </div>
+
+            <div
+              v-else
+              class="rounded-2xl border p-4 space-y-4"
+              :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/70' : 'border-gray-200 bg-white'"
+            >
+              <div class="rounded-xl border px-4 py-3" :class="themeStore.isDark ? 'border-emerald-500/30 bg-emerald-500/10' : 'border-emerald-200 bg-emerald-50'">
+                <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-emerald-200' : 'text-emerald-900'">
+                  {{ t('profile.account.emailDialog.verifyNewTitle') }}
+                </p>
+                <p class="mt-1 text-xs leading-5" :class="themeStore.isDark ? 'text-emerald-300/80' : 'text-emerald-700'">
+                  {{
+                    hasCurrentEmail
+                      ? t('profile.account.emailDialog.verifyNewDesc')
+                      : t('profile.account.emailDialog.bindEmailDesc')
+                  }}
+                </p>
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-themed-secondary mb-1">
+                  {{ t('profile.account.emailDialog.newEmail') }}
+                </label>
+                <input
+                  v-model="newEmail"
+                  type="email"
+                  class="input w-full"
+                  :placeholder="t('profile.account.emailDialog.newEmailPlaceholder')"
+                  autocomplete="email"
+                />
+              </div>
+
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-themed-secondary mb-1">
+                    {{ t('profile.account.emailDialog.newCode') }}
+                  </label>
+                  <input
+                    v-model="newEmailCode"
+                    type="text"
+                    maxlength="6"
+                    class="input w-full"
+                    :placeholder="t('profile.account.emailDialog.newCodePlaceholder')"
+                  />
+                </div>
+                <button
+                  type="button"
+                  class="btn-secondary whitespace-nowrap"
+                  :disabled="sendingNewCode || newCountdown > 0"
+                  @click="sendNewEmailCode"
+                >
+                  {{
+                    newCountdown > 0
+                      ? t('profile.account.emailDialog.resendIn', { seconds: newCountdown })
+                      : (newCodeSent ? t('profile.account.emailDialog.resendNewCode') : t('profile.account.emailDialog.sendNewCode'))
+                  }}
+                </button>
+              </div>
+
+              <div v-if="newStepError" class="text-sm text-red-500">{{ newStepError }}</div>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button class="btn-secondary" @click="closeModal">{{ t('common.cancel') }}</button>
+            <button
+              v-if="step === 'verifyCurrent'"
+              class="btn-primary"
+              :disabled="verifyingCurrentCode || currentEmailCode.length !== 6"
+              @click="verifyCurrentCode"
+            >
+              {{ verifyingCurrentCode ? t('profile.account.emailDialog.verifying') : t('profile.account.emailDialog.verifyCurrentAction') }}
+            </button>
+            <button
+              v-else
+              class="btn-primary"
+              :disabled="submitting || !normalizedNewEmail || newEmailCode.length !== 6"
+              @click="submitEmailChange"
+            >
+              {{ submitting ? t('profile.account.emailDialog.submitting') : t('profile.account.emailDialog.confirmAction') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/components/profile/LoginHistorySection.vue b/client/src/components/profile/LoginHistorySection.vue
new file mode 100644
index 0000000..1b5aedf
--- /dev/null
+++ b/client/src/components/profile/LoginHistorySection.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+/**
+ * LoginHistorySection - 登录历史记录组件
+ * 显示用户的登录历史，包括 IP、地理位置、设备信息等
+ */
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+import { normalizeCountryName } from '@/utils/countryDisplay'
+
+const { t, locale } = useI18n()
+
+interface LoginRecord {
+  id: number
+  ip: string
+  country: string | null
+  region: string | null
+  city: string | null
+  isp: string | null
+  timezone: string | null
+  userAgent: string | null
+  createdAt: string
+}
+
+const loading = ref(false)
+const records = ref<LoginRecord[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 3
+const totalPages = computed(() => Math.ceil(total.value / pageSize))
+const normalizedCountryLabels = computed(() => ({
+  mainlandChina: t('common.countries.cn'),
+  hongKong: t('common.countries.hk'),
+  macau: t('common.countries.mo'),
+  taiwan: t('common.countries.tw')
+}))
+
+// 国家名称到国家代码的映射（常用国家）
+const countryCodeMap: Record<string, string> = {
+  'China': 'cn',
+  'United States': 'us',
+  'Japan': 'jp',
+  'South Korea': 'kr',
+  'Singapore': 'sg',
+  'Macau': 'mo',
+  'China Macau': 'mo',
+  'Hong Kong': 'hk',
+  'China Hong Kong': 'hk',
+  'Taiwan': 'tw',
+  'China Taiwan': 'tw',
+  'Germany': 'de',
+  'United Kingdom': 'gb',
+  'France': 'fr',
+  'Netherlands': 'nl',
+  'Russia': 'ru',
+  'Canada': 'ca',
+  'Australia': 'au',
+  'India': 'in',
+  'Brazil': 'br'
+}
+
+async function loadRecords() {
+  loading.value = true
+  try {
+    const result = await api.auth.getLoginHistory({ page: page.value, pageSize })
+    records.value = result.records
+    total.value = result.total
+  } catch (err) {
+    console.error('Failed to load login history:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function getCountryCode(country: string | null): string | null {
+  if (!country) return null
+  return countryCodeMap[country] || null
+}
+
+function formatLocation(record: LoginRecord): string {
+  const parts: string[] = []
+  const normalizedCountry = normalizeCountryName(record.country, normalizedCountryLabels.value)
+  if (normalizedCountry) parts.push(normalizedCountry)
+  if (record.region) parts.push(record.region)
+  if (record.city) parts.push(record.city)
+  return parts.length > 0 ? parts.join(', ') : '-'
+}
+
+function formatDevice(userAgent: string | null): string {
+  if (!userAgent) return '-'
+  
+  // 简单解析 User-Agent
+  if (userAgent.includes('Windows')) return 'Windows'
+  if (userAgent.includes('Mac OS')) return 'macOS'
+  if (userAgent.includes('Linux')) return 'Linux'
+  if (userAgent.includes('Android')) return 'Android'
+  if (userAgent.includes('iPhone') || userAgent.includes('iPad')) return 'iOS'
+  
+  return userAgent.substring(0, 30) + (userAgent.length > 30 ? '...' : '')
+}
+
+function formatBrowser(userAgent: string | null): string {
+  if (!userAgent) return '-'
+  
+  if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) return 'Chrome'
+  if (userAgent.includes('Firefox')) return 'Firefox'
+  if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) return 'Safari'
+  if (userAgent.includes('Edg')) return 'Edge'
+  if (userAgent.includes('Opera') || userAgent.includes('OPR')) return 'Opera'
+  
+  return '-'
+}
+
+function formatTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  // 支援 zh-CN, zh-TW, en 三種語言
+  const localeMap: Record<string, string> = {
+    'zh-CN': 'zh-CN',
+    'zh-TW': 'zh-TW',
+    'en': 'en-US'
+  }
+  const localeCode = localeMap[locale.value] || 'en-US'
+  return date.toLocaleString(localeCode, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function goToPage(newPage: number) {
+  if (newPage >= 1 && newPage <= totalPages.value) {
+    page.value = newPage
+    loadRecords()
+  }
+}
+
+onMounted(loadRecords)
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h2 class="text-sm font-medium text-themed-secondary">{{ t('profile.loginHistory.title') }}</h2>
+        <p class="text-xs text-themed-faint mt-0.5">{{ t('profile.loginHistory.description') }}</p>
+      </div>
+      <button
+        class="btn-ghost btn-sm"
+        :disabled="loading"
+        @click="loadRecords"
+      >
+        {{ t('common.refresh') }}
+      </button>
+    </div>
+
+    <!-- 加载中 -->
+    <div v-if="loading && records.length === 0" class="py-6 text-center">
+      <div class="inline-block animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else-if="records.length === 0" class="text-sm text-themed-muted text-center py-6 border border-dashed border-themed rounded-lg">
+      <svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      {{ t('profile.loginHistory.empty') }}
+    </div>
+
+    <!-- 登录记录列表 -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="record in records"
+        :key="record.id"
+        class="p-3 bg-themed-tertiary border border-themed rounded-lg"
+      >
+        <div class="flex items-start justify-between">
+          <div class="flex-1 min-w-0">
+            <!-- IP 和位置 -->
+            <div class="flex items-center gap-2 mb-1">
+              <FlagIcon
+                v-if="getCountryCode(record.country)"
+                :code="getCountryCode(record.country)!"
+                class="w-4 h-3 flex-shrink-0"
+              />
+              <code class="text-sm font-mono text-themed">{{ record.ip }}</code>
+            </div>
+            
+            <!-- 地理位置 -->
+            <div class="text-sm text-themed-muted mb-1">
+              {{ formatLocation(record) }}
+              <span v-if="record.isp" class="text-themed-faint"> · {{ record.isp }}</span>
+            </div>
+            
+            <!-- 设备和浏览器 -->
+            <div class="text-xs text-themed-faint">
+              {{ formatDevice(record.userAgent) }} · {{ formatBrowser(record.userAgent) }}
+            </div>
+          </div>
+          
+          <!-- 时间 -->
+          <div class="text-right text-sm text-themed-muted flex-shrink-0 ml-4">
+            {{ formatTime(record.createdAt) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex items-center justify-center gap-2 pt-3">
+        <button
+          class="btn-ghost btn-sm"
+          :disabled="page === 1 || loading"
+          @click="goToPage(page - 1)"
+        >
+          {{ t('common.previous') }}
+        </button>
+        <span class="text-sm text-themed-muted">
+          {{ page }} / {{ totalPages }}
+        </span>
+        <button
+          class="btn-ghost btn-sm"
+          :disabled="page >= totalPages || loading"
+          @click="goToPage(page + 1)"
+        >
+          {{ t('common.next') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/profile/NotificationSection.vue b/client/src/components/profile/NotificationSection.vue
new file mode 100644
index 0000000..ad5fd71
--- /dev/null
+++ b/client/src/components/profile/NotificationSection.vue
@@ -0,0 +1,456 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import type { NotificationChannel as ApiNotificationChannel } from '@/types/api'
+
+const { t } = useI18n()
+const toast = useToast()
+
+interface NotificationChannel {
+  id: number
+  type: string
+  name: string
+  enabled: boolean
+  config: Record<string, unknown>
+  configPreview?: string
+}
+
+interface NotificationLog {
+  id: number
+  channelId: number
+  channelName: string
+  channelType: string
+  eventType: string
+  message: string
+  status: string
+  error: string | null
+  createdAt: string
+}
+
+interface NotificationStats {
+  total: number
+  sent: number
+  failed: number
+  pending: number
+}
+
+const notificationChannels = ref<NotificationChannel[]>([])
+const showAddNotification = ref<boolean>(false)
+const showHistory = ref<boolean>(false)
+const notificationLogs = ref<NotificationLog[]>([])
+const notificationStats = ref<NotificationStats | null>(null)
+const logsPage = ref(1)
+const logsTotal = ref(0)
+const logsPageSize = 10
+const logsStatusFilter = ref<'all' | 'sent' | 'failed'>('all')
+const logsLoading = ref(false)
+
+interface NotificationForm {
+  type: 'telegram' | 'discord' | 'webhook' | 'email'
+  name: string
+  config: Record<string, unknown>
+}
+const notificationForm = ref<NotificationForm>({
+  type: 'telegram',
+  name: '',
+  config: {}
+})
+const notificationLoading = ref<boolean>(false)
+
+const totalPages = computed(() => Math.ceil(logsTotal.value / logsPageSize))
+
+async function loadNotificationChannels(): Promise<void> {
+  try {
+    const response = await api.notifications.list()
+    const data = response as { channels?: ApiNotificationChannel[] }
+    notificationChannels.value = (data.channels || []).map((ch: ApiNotificationChannel) => ({
+      id: ch.id,
+      type: ch.type,
+      name: ch.name,
+      enabled: Boolean(ch.enabled),
+      config: typeof ch.config === 'string' ? JSON.parse(ch.config) : (ch.config ?? {}),
+      configPreview: (ch as any).configPreview || ''
+    }))
+  } catch (error) {
+    console.error('Failed to load notification channels:', error)
+  }
+}
+
+async function loadNotificationLogs(): Promise<void> {
+  logsLoading.value = true
+  try {
+    const params: { page: number; pageSize: number; status?: 'sent' | 'failed' } = {
+      page: logsPage.value,
+      pageSize: logsPageSize
+    }
+    if (logsStatusFilter.value !== 'all') {
+      params.status = logsStatusFilter.value
+    }
+    const result = await api.notifications.getLogs(params)
+    notificationLogs.value = result.logs
+    logsTotal.value = result.total
+  } catch (error) {
+    console.error('Failed to load notification logs:', error)
+  } finally {
+    logsLoading.value = false
+  }
+}
+
+async function loadNotificationStats(): Promise<void> {
+  try {
+    const result = await api.notifications.getStats()
+    notificationStats.value = result.stats
+  } catch (error) {
+    console.error('Failed to load notification stats:', error)
+  }
+}
+
+async function openHistory(): Promise<void> {
+  showHistory.value = true
+  logsPage.value = 1
+  await Promise.all([loadNotificationLogs(), loadNotificationStats()])
+}
+
+function closeHistory(): void {
+  showHistory.value = false
+}
+
+async function changeLogsPage(page: number): Promise<void> {
+  logsPage.value = page
+  await loadNotificationLogs()
+}
+
+async function changeLogsFilter(status: 'all' | 'sent' | 'failed'): Promise<void> {
+  logsStatusFilter.value = status
+  logsPage.value = 1
+  await loadNotificationLogs()
+}
+
+async function addNotificationChannel(): Promise<void> {
+  if (!notificationForm.value.name) return
+  
+  notificationLoading.value = true
+  try {
+    await api.notifications.create({
+      type: notificationForm.value.type,
+      name: notificationForm.value.name,
+      config: notificationForm.value.config
+    })
+    toast.success(t('profile.notifications.addSuccess'))
+    showAddNotification.value = false
+    notificationForm.value = { type: 'telegram', name: '', config: {} }
+    await loadNotificationChannels()
+  } catch (error: any) {
+    toast.error(t('profile.notifications.addFailed') + ': ' + (error?.message || String(error)))
+  } finally {
+    notificationLoading.value = false
+  }
+}
+
+async function deleteNotificationChannel(channelId: number): Promise<void> {
+  if (!confirm(t('profile.notifications.confirmDelete'))) return
+  
+  try {
+    await api.notifications.delete(channelId)
+    toast.success(t('profile.notifications.deleteSuccess'))
+    await loadNotificationChannels()
+  } catch (error: any) {
+    toast.error(t('profile.notifications.deleteFailed') + ': ' + (error?.message || String(error)))
+  }
+}
+
+async function toggleNotificationChannel(channel: NotificationChannel): Promise<void> {
+  try {
+    await api.notifications.toggle(channel.id)
+    toast.success(channel.enabled ? t('profile.notifications.disabled') : t('profile.notifications.enabled'))
+    await loadNotificationChannels()
+  } catch (error: any) {
+    toast.error(t('profile.notifications.toggleFailed') + ': ' + (error?.message || String(error)))
+  }
+}
+
+async function testNotificationChannel(channelId: number): Promise<void> {
+  try {
+    await api.notifications.test(channelId)
+    toast.success(t('profile.notifications.testSuccess'))
+  } catch (error: any) {
+    toast.error(t('profile.notifications.testFailed') + ': ' + (error?.message || String(error)))
+  }
+}
+
+function getNotificationTypeLabel(type: string): string {
+  const map: Record<string, string> = { telegram: 'Telegram', discord: 'Discord', webhook: 'Webhook', email: 'Email' }
+  return map[type] || type
+}
+
+function getEventTypeLabel(eventType: string): string {
+  const key = `profile.notifications.eventTypes.${eventType}`
+  const label = t(key)
+  return label === key ? eventType : label
+}
+
+function getLogStatusLabel(status: string): string {
+  switch (status) {
+    case 'sent':
+      return t('profile.notifications.statusSent')
+    case 'failed':
+      return t('profile.notifications.statusFailed')
+    default:
+      return t('profile.notifications.statusPending')
+  }
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return date.toLocaleString(undefined, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 挂载时加载
+loadNotificationChannels()
+
+defineExpose({ loadNotificationChannels })
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h2 class="text-sm font-medium text-themed-secondary">{{ $t('profile.notifications.title') }}</h2>
+        <p class="text-xs text-themed-faint mt-0.5">{{ $t('profile.notifications.description') }}</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <button class="btn-ghost btn-sm" @click="openHistory">
+          <svg 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          {{ $t('profile.notifications.history') }}
+        </button>
+        <button class="btn-ghost btn-sm" @click="showAddNotification = true">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ $t('profile.notifications.add') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 添加通知渠道表单 -->
+    <div v-if="showAddNotification" class="mb-4 p-4 bg-themed-tertiary border border-themed rounded-lg space-y-3">
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.type') }}</label>
+        <select v-model="notificationForm.type" class="input" @change="notificationForm.config = {}">
+          <option value="telegram">Telegram</option>
+          <option value="discord">Discord</option>
+          <option value="webhook">Webhook</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.name') }}</label>
+        <input v-model="notificationForm.name" type="text" class="input" :placeholder="$t('profile.notifications.namePlaceholder')" />
+      </div>
+      
+      <!-- Telegram 配置 -->
+      <template v-if="notificationForm.type === 'telegram'">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.telegram.botToken') }}</label>
+          <input v-model="notificationForm.config.botToken" type="text" class="input" :placeholder="$t('profile.notifications.telegram.botTokenPlaceholder')" />
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.telegram.chatId') }}</label>
+          <input v-model="notificationForm.config.chatId" type="text" class="input" :placeholder="$t('profile.notifications.telegram.chatIdPlaceholder')" />
+        </div>
+      </template>
+      
+      <!-- Discord 配置 -->
+      <template v-else-if="notificationForm.type === 'discord'">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.discord.webhookUrl') }}</label>
+          <input v-model="notificationForm.config.webhookUrl" type="text" class="input" :placeholder="$t('profile.notifications.discord.webhookUrlPlaceholder')" />
+        </div>
+      </template>
+      
+      <!-- Webhook 配置 -->
+      <template v-else-if="notificationForm.type === 'webhook'">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.webhook.url') }}</label>
+          <input v-model="notificationForm.config.url" type="text" class="input" :placeholder="$t('profile.notifications.webhook.urlPlaceholder')" />
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.notifications.webhook.secret') }}</label>
+          <input v-model="notificationForm.config.secret" type="text" class="input" :placeholder="$t('profile.notifications.webhook.secretPlaceholder')" />
+        </div>
+      </template>
+
+      <div class="flex gap-2">
+        <button :disabled="notificationLoading || !notificationForm.name" class="btn-primary btn-sm" @click="addNotificationChannel">
+          {{ notificationLoading ? $t('profile.notifications.saving') : $t('profile.notifications.save') }}
+        </button>
+        <button class="btn-ghost btn-sm" @click="showAddNotification = false">{{ $t('profile.notifications.cancel') }}</button>
+      </div>
+    </div>
+
+    <TransitionGroup v-if="notificationChannels.length" name="list" tag="div" class="space-y-2">
+      <div v-for="channel in notificationChannels" :key="channel.id" class="group flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-3 bg-themed-tertiary border border-themed rounded-lg hover:border-themed-secondary transition-colors">
+        <div class="flex items-center gap-3 min-w-0 flex-1">
+          <div class="w-8 h-8 rounded bg-themed-secondary flex items-center justify-center">
+            <svg v-if="channel.type === 'telegram'" class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.752-.244-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.333-1.386 4.025-1.627 4.477-1.635.099-.002.321.023.465.14.121.099.155.232.17.36.015.101.012.234-.004.36z" />
+            </svg>
+            <svg v-else-if="channel.type === 'discord'" class="w-4 h-4 text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M20.317 4.369a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.249a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.249.077.077 0 00-.079-.037 19.736 19.736 0 00-4.885 1.515.069.069 0 00-.032.027C.533 9.045-.32 13.58.099 18.056a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.078-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 01.079.009c.12.098.245.198.373.293a.077.077 0 01-.007.128 12.299 12.299 0 01-1.873.891.077.077 0 00-.041.107c.36.698.772 1.363 1.225 1.993a.076.076 0 00.084.029 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.056c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.028z" />
+            </svg>
+            <svg v-else class="w-4 h-4 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+            </svg>
+          </div>
+          <div>
+            <div class="text-sm text-themed-secondary flex items-center gap-2">
+              {{ channel.name }}
+              <span class="text-xs px-1.5 py-0.5 rounded badge-default">
+                {{ getNotificationTypeLabel(channel.type) }}
+              </span>
+              <span v-if="!channel.enabled" class="text-xs text-themed-faint">{{ $t('profile.notifications.disabledSuffix') }}</span>
+            </div>
+            <div class="text-xs text-themed-faint">{{ channel.configPreview }}</div>
+          </div>
+        </div>
+        <div class="flex items-center gap-2 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0">
+          <button class="btn-ghost btn-sm" :title="$t('profile.notifications.test')" @click="testNotificationChannel(channel.id)">
+            <svg 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </button>
+          <button class="btn-ghost btn-sm" @click="toggleNotificationChannel(channel)">
+            {{ channel.enabled ? $t('profile.notifications.disable') : $t('profile.notifications.enable') }}
+          </button>
+          <button class="text-themed-faint hover:text-red-400" @click="deleteNotificationChannel(channel.id)">
+            <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </TransitionGroup>
+    <div v-else-if="!showAddNotification" class="text-sm text-themed-muted text-center py-6 border border-dashed border-themed rounded-lg">
+      <svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+      </svg>
+      {{ $t('profile.notifications.noChannels') }}
+    </div>
+
+    <!-- 通知历史弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showHistory" class="modal-overlay" @click.self="closeHistory">
+          <div class="modal-backdrop" @click="closeHistory"></div>
+          <div class="modal-content !max-w-2xl w-full max-h-[80vh] flex flex-col">
+            <!-- 头部 -->
+            <div class="flex items-center justify-between p-4 border-b border-themed">
+              <div>
+                <h3 class="text-sm font-medium text-themed-secondary">{{ $t('profile.notifications.historyTitle') }}</h3>
+                <div v-if="notificationStats" class="text-xs text-themed-faint mt-1 flex gap-3">
+                  <span>{{ $t('profile.notifications.statsTotal', { count: notificationStats.total }) }}</span>
+                  <span class="text-green-500">{{ $t('profile.notifications.statsSent', { count: notificationStats.sent }) }}</span>
+                  <span class="text-red-500">{{ $t('profile.notifications.statsFailed', { count: notificationStats.failed }) }}</span>
+                </div>
+              </div>
+              <button class="text-themed-faint hover:text-themed-secondary" @click="closeHistory">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- 筛选 -->
+            <div class="px-4 py-2 border-b border-themed flex gap-2">
+              <button
+                :class="['px-3 py-1 text-xs rounded', logsStatusFilter === 'all' ? 'bg-themed-secondary text-themed-primary' : 'text-themed-muted hover:text-themed-secondary']"
+                @click="changeLogsFilter('all')"
+              >
+                {{ $t('profile.notifications.filterAll') }}
+              </button>
+              <button
+                :class="['px-3 py-1 text-xs rounded', logsStatusFilter === 'sent' ? 'bg-green-500/20 text-green-500' : 'text-themed-muted hover:text-themed-secondary']"
+                @click="changeLogsFilter('sent')"
+              >
+                {{ $t('profile.notifications.filterSent') }}
+              </button>
+              <button
+                :class="['px-3 py-1 text-xs rounded', logsStatusFilter === 'failed' ? 'bg-red-500/20 text-red-500' : 'text-themed-muted hover:text-themed-secondary']"
+                @click="changeLogsFilter('failed')"
+              >
+                {{ $t('profile.notifications.filterFailed') }}
+              </button>
+            </div>
+
+            <!-- 列表 -->
+            <div class="flex-1 overflow-y-auto p-4">
+              <div v-if="logsLoading" class="text-center py-8 text-themed-muted">
+                {{ $t('profile.notifications.loadingLogs') }}
+              </div>
+              <div v-else-if="notificationLogs.length === 0" class="text-center py-8 text-themed-muted">
+                {{ $t('profile.notifications.noLogs') }}
+              </div>
+              <div v-else class="space-y-2">
+                <div
+                  v-for="log in notificationLogs"
+                  :key="log.id"
+                  class="p-3 bg-themed-tertiary border border-themed rounded-lg"
+                >
+                  <div class="flex items-start justify-between gap-2">
+                    <div class="flex-1 min-w-0">
+                      <div class="flex items-center gap-2 text-xs">
+                        <span
+                          :class="[
+                            'px-1.5 py-0.5 rounded',
+                            log.status === 'sent' ? 'bg-green-500/20 text-green-500' :
+                            log.status === 'failed' ? 'bg-red-500/20 text-red-500' :
+                            'bg-yellow-500/20 text-yellow-500'
+                          ]"
+                        >
+                          {{ getLogStatusLabel(log.status) }}
+                        </span>
+                        <span class="text-themed-muted">{{ getEventTypeLabel(log.eventType) }}</span>
+                        <span class="text-themed-faint">{{ log.channelName }} ({{ getNotificationTypeLabel(log.channelType) }})</span>
+                      </div>
+                      <p class="text-xs text-themed-secondary mt-1 line-clamp-2">{{ log.message }}</p>
+                      <p v-if="log.error" class="text-xs text-red-400 mt-1">{{ $t('profile.notifications.errorPrefix', { error: log.error }) }}</p>
+                    </div>
+                    <span class="text-xs text-themed-faint whitespace-nowrap">{{ formatDate(log.createdAt) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 分页 -->
+            <div v-if="totalPages > 1" class="px-4 py-3 border-t border-themed flex items-center justify-center gap-2">
+              <button
+                :disabled="logsPage <= 1"
+                class="px-3 py-1 text-xs rounded border border-themed disabled:opacity-50"
+                @click="changeLogsPage(logsPage - 1)"
+              >
+                {{ $t('common.prevPage') }}
+              </button>
+              <span class="text-xs text-themed-muted">{{ logsPage }} / {{ totalPages }}</span>
+              <button
+                :disabled="logsPage >= totalPages"
+                class="px-3 py-1 text-xs rounded border border-themed disabled:opacity-50"
+                @click="changeLogsPage(logsPage + 1)"
+              >
+                {{ $t('common.nextPage') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/components/profile/OAuthSection.vue b/client/src/components/profile/OAuthSection.vue
new file mode 100644
index 0000000..cfcef4a
--- /dev/null
+++ b/client/src/components/profile/OAuthSection.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const toast = useToast()
+
+interface OAuthBinding {
+  provider: string
+  username?: string
+  email?: string
+}
+
+const oauthBindings = ref<OAuthBinding[]>([])
+const enabledOAuthProviders = ref<string[]>([])
+const oauthLoading = ref<boolean>(false)
+
+async function loadOAuthBindings(): Promise<void> {
+  try {
+    const response = await api.oauth.getBindings()
+    oauthBindings.value = (response as { bindings?: OAuthBinding[] }).bindings || []
+  } catch (error) {
+    console.error('Failed to load OAuth bindings:', error)
+  }
+}
+
+async function loadEnabledOAuthProviders(): Promise<void> {
+  try {
+    const response = await api.oauth.getProviders()
+    enabledOAuthProviders.value = (response as { providers?: string[] }).providers || []
+  } catch (error) {
+    console.error('Failed to load OAuth providers:', error)
+  }
+}
+
+function checkOAuthCallbackMessages(): void {
+  const urlParams = new URLSearchParams(window.location.search)
+  const success = urlParams.get('success')
+  const error = urlParams.get('error')
+  
+  if (success) {
+    if (success.startsWith('bound_')) {
+      const provider = success.replace('bound_', '')
+      toast.success(t('profile.oauth.bindSuccess', { provider: provider.toUpperCase() }))
+    }
+    window.history.replaceState({}, '', window.location.pathname)
+    loadOAuthBindings()
+  }
+  
+  if (error) {
+    const errorMessages: Record<string, string> = {
+      'not_logged_in': t('profile.oauth.errors.notLoggedIn'),
+      'already_bound_other': t('profile.oauth.errors.alreadyBoundOther'),
+      'invalid_session': t('profile.oauth.errors.invalidSession'),
+      'token_error': t('profile.oauth.errors.tokenError'),
+      'provider_disabled': t('profile.oauth.errors.providerDisabled'),
+      'oauth_error': t('profile.oauth.errors.oauthError'),
+      'missing_code': t('profile.oauth.errors.missingCode')
+    }
+    toast.error(errorMessages[error] || t('profile.oauth.errors.bindFailed') + ': ' + error)
+    window.history.replaceState({}, '', window.location.pathname)
+  }
+}
+
+async function bindOAuth(provider: string): Promise<void> {
+  if (!authStore.token) {
+    toast.error(t('profile.oauth.errors.notLoggedIn'))
+    return
+  }
+
+  try {
+    const response = await api.oauth.createBindTicket()
+    window.location.href = `/api/oauth/authorize/${provider}?mode=bind&redirect=/profile&bindTicket=${encodeURIComponent(response.ticket)}`
+  } catch (error) {
+    toast.error(translateError(error))
+  }
+}
+
+async function unbindOAuth(provider: string): Promise<void> {
+  if (!confirm(t('profile.oauth.confirmUnbind', { provider: provider.toUpperCase() }))) return
+  
+  oauthLoading.value = true
+  try {
+    await api.oauth.unbind(provider as 'github' | 'google')
+    toast.success(t('profile.oauth.unbindSuccess', { provider: provider.toUpperCase() }))
+    await loadOAuthBindings()
+  } catch (err: any) {
+    toast.error(t('profile.oauth.unbindFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    oauthLoading.value = false
+  }
+}
+
+function isOAuthBound(provider: string): boolean {
+  return oauthBindings.value.some((b: any) => b.provider === provider)
+}
+
+function getOAuthBinding(provider: string): OAuthBinding | null {
+  return oauthBindings.value.find(b => b.provider === provider) || null
+}
+
+interface ProviderInfo {
+  name: string
+  icon: string
+}
+
+function getProviderInfo(provider: string): ProviderInfo {
+  const info: Record<string, ProviderInfo> = {
+    github: {
+      name: 'GitHub',
+      icon: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>`
+    },
+    google: {
+      name: 'Google',
+      icon: `<svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path></svg>`
+    }
+  }
+  return info[provider] || { name: provider, icon: '' }
+}
+
+onMounted(async () => {
+  await Promise.all([loadOAuthBindings(), loadEnabledOAuthProviders()])
+  checkOAuthCallbackMessages()
+})
+
+// 组件被缓存后重新激活时也检查回调消息
+onActivated(() => {
+  checkOAuthCallbackMessages()
+})
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="mb-4">
+      <h2 class="text-sm font-medium text-themed-secondary">{{ $t('profile.oauth.title') }}</h2>
+      <p class="text-xs text-themed-faint mt-0.5">{{ $t('profile.oauth.description') }}</p>
+    </div>
+
+    <div class="space-y-3">
+      <!-- GitHub -->
+      <div 
+        v-if="enabledOAuthProviders.includes('github')"
+        class="flex items-center justify-between p-3 bg-themed-tertiary border border-themed rounded-lg"
+      >
+        <div class="flex items-center gap-3">
+          <div 
+            class="w-10 h-10 rounded-lg bg-themed-secondary flex items-center justify-center"
+            v-html="getProviderInfo('github').icon"
+          ></div>
+          <div>
+            <div class="text-sm text-themed font-medium">GitHub</div>
+            <div v-if="isOAuthBound('github')" class="text-xs text-green-400">
+              {{ $t('profile.oauth.bound') }}: {{ (() => { const b = getOAuthBinding('github'); return b?.username || b?.email || ''; })() }}
+            </div>
+            <div v-else class="text-xs text-themed-muted">{{ $t('profile.oauth.notBound') }}</div>
+          </div>
+        </div>
+        <button 
+          v-if="isOAuthBound('github')"
+          :disabled="oauthLoading"
+          class="btn-ghost btn-sm text-error"
+          @click="unbindOAuth('github')"
+        >
+          {{ $t('profile.oauth.unbind') }}
+        </button>
+        <button 
+          v-else
+          class="btn-secondary btn-sm"
+          @click="bindOAuth('github')"
+        >
+          {{ $t('profile.oauth.bind') }}
+        </button>
+      </div>
+
+      <!-- Google -->
+      <div 
+        v-if="enabledOAuthProviders.includes('google')"
+        class="flex items-center justify-between p-3 bg-themed-tertiary border border-themed rounded-lg"
+      >
+        <div class="flex items-center gap-3">
+          <div 
+            class="w-10 h-10 rounded-lg bg-themed-secondary flex items-center justify-center"
+            v-html="getProviderInfo('google').icon"
+          ></div>
+          <div>
+            <div class="text-sm text-themed font-medium">Google</div>
+            <div v-if="isOAuthBound('google')" class="text-xs text-green-400">
+              {{ $t('profile.oauth.bound') }}: {{ (() => { const b = getOAuthBinding('google'); return b?.username || b?.email || ''; })() }}
+            </div>
+            <div v-else class="text-xs text-themed-muted">{{ $t('profile.oauth.notBound') }}</div>
+          </div>
+        </div>
+        <button 
+          v-if="isOAuthBound('google')"
+          :disabled="oauthLoading"
+          class="btn-ghost btn-sm text-error"
+          @click="unbindOAuth('google')"
+        >
+          {{ $t('profile.oauth.unbind') }}
+        </button>
+        <button 
+          v-else
+          class="btn-secondary btn-sm"
+          @click="bindOAuth('google')"
+        >
+          {{ $t('profile.oauth.bind') }}
+        </button>
+      </div>
+
+      <!-- 没有启用任何 OAuth -->
+      <div 
+        v-if="!enabledOAuthProviders.includes('github') && !enabledOAuthProviders.includes('google')"
+        class="text-sm text-themed-muted text-center py-4"
+      >
+        {{ $t('profile.oauth.noProviders') }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/profile/PasswordSection.vue b/client/src/components/profile/PasswordSection.vue
new file mode 100644
index 0000000..934fc0a
--- /dev/null
+++ b/client/src/components/profile/PasswordSection.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import SensitiveVerificationModal from '@/components/SensitiveVerificationModal.vue'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+
+interface PasswordForm {
+  currentPassword: string
+  newPassword: string
+  confirmPassword: string
+}
+
+const passwordForm = ref<PasswordForm>({
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+const passwordLoading = ref<boolean>(false)
+const passwordError = ref<string>('')
+const passwordSuccess = ref<boolean>(false)
+
+// 验证模态框
+const showVerificationModal = ref<boolean>(false)
+const pendingPassword = ref<string>('')
+const pendingCurrentPassword = ref<string>('')
+
+async function updatePassword(): Promise<void> {
+  passwordError.value = ''
+  passwordSuccess.value = false
+
+  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
+    passwordError.value = t('profile.password.mismatch')
+    return
+  }
+
+  if (passwordForm.value.newPassword.length < 6) {
+    passwordError.value = t('profile.password.tooShort')
+    return
+  }
+
+  passwordLoading.value = true
+  try {
+    const response = await api.users.update(authStore.user!.id, {
+      password: passwordForm.value.newPassword,
+      currentPassword: passwordForm.value.currentPassword
+    } as any)
+    passwordSuccess.value = true
+    passwordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '' }
+    if (response.reauthRequired) {
+      setTimeout(() => {
+        authStore.clearLocalAuth()
+        window.location.href = '/login'
+      }, 1000)
+      return
+    }
+    setTimeout(() => passwordSuccess.value = false, 3000)
+  } catch (error: any) {
+    // 检查是否需要验证
+    if (error?.code === 'VERIFICATION_REQUIRED' || error?.message?.includes('Sensitive operation requires verification')) {
+      // 保存待修改的密码和当前密码，等待验证成功后使用
+      pendingPassword.value = passwordForm.value.newPassword
+      pendingCurrentPassword.value = passwordForm.value.currentPassword
+      showVerificationModal.value = true
+      passwordLoading.value = false
+      return
+    }
+    passwordError.value = error?.message || t('profile.password.updateFailed')
+  } finally {
+    passwordLoading.value = false
+  }
+}
+
+// 验证成功后的处理
+async function onVerificationSuccess(): Promise<void> {
+  showVerificationModal.value = false
+  
+  // 验证成功后，重新执行密码修改
+  if (pendingPassword.value && pendingCurrentPassword.value) {
+    passwordLoading.value = true
+    try {
+      const response = await api.users.update(authStore.user!.id, {
+        password: pendingPassword.value,
+        currentPassword: pendingCurrentPassword.value
+      } as any)
+      passwordSuccess.value = true
+      passwordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '' }
+      pendingPassword.value = ''
+      pendingCurrentPassword.value = ''
+      if (response.reauthRequired) {
+        setTimeout(() => {
+          authStore.clearLocalAuth()
+          window.location.href = '/login'
+        }, 1000)
+        return
+      }
+      setTimeout(() => passwordSuccess.value = false, 3000)
+    } catch (error: any) {
+      passwordError.value = error?.message || t('profile.password.updateFailed')
+      // 如果当前密码错误，清空待处理状态
+      if (error?.code === 'INVALID_CREDENTIALS' || error?.message?.includes('Current password is incorrect')) {
+        pendingPassword.value = ''
+        pendingCurrentPassword.value = ''
+      }
+    } finally {
+      passwordLoading.value = false
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="card p-5">
+    <h2 class="text-sm font-medium text-themed-secondary mb-4">{{ $t('profile.password.title') }}</h2>
+    <form class="space-y-4" @submit.prevent="updatePassword">
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.password.current') }}</label>
+        <input 
+          v-model="passwordForm.currentPassword" 
+          type="password" 
+          class="input" 
+          :placeholder="$t('profile.password.currentPlaceholder')"
+          autocomplete="current-password"
+        />
+      </div>
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.password.new') }}</label>
+        <input 
+          v-model="passwordForm.newPassword" 
+          type="password" 
+          class="input" 
+          :placeholder="$t('profile.password.newPlaceholder')"
+          autocomplete="new-password"
+        />
+      </div>
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.password.confirm') }}</label>
+        <input 
+          v-model="passwordForm.confirmPassword" 
+          type="password" 
+          class="input" 
+          :placeholder="$t('profile.password.confirmPlaceholder')"
+          autocomplete="new-password"
+        />
+      </div>
+      
+      <div v-if="passwordError" class="text-sm text-red-400">{{ passwordError }}</div>
+      <div v-if="passwordSuccess" class="text-sm text-green-400">{{ $t('profile.password.updated') }}</div>
+      
+      <button 
+        type="submit" 
+        :disabled="passwordLoading || !passwordForm.currentPassword || !passwordForm.newPassword"
+        class="btn-secondary"
+      >
+        {{ passwordLoading ? $t('profile.password.updating') : $t('profile.password.update') }}
+      </button>
+    </form>
+
+    <!-- 敏感操作验证弹窗 -->
+    <SensitiveVerificationModal
+      :show="showVerificationModal"
+      operation-type="change_password"
+      @close="showVerificationModal = false"
+      @verified="onVerificationSuccess"
+    />
+  </div>
+</template>
diff --git a/client/src/components/profile/SSHKeysSection.vue b/client/src/components/profile/SSHKeysSection.vue
new file mode 100644
index 0000000..287292a
--- /dev/null
+++ b/client/src/components/profile/SSHKeysSection.vue
@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import type { SshKey } from '@/types/api'
+import { validateName } from '@/utils/validation'
+
+const { t } = useI18n()
+const toast = useToast()
+
+const sshKeys = ref<SshKey[]>([])
+const showAddKey = ref<boolean>(false)
+
+// 分页相关
+const currentPage = ref<number>(1)
+const pageSize = 5
+
+const totalPages = computed(() => Math.ceil(sshKeys.value.length / pageSize))
+
+const paginatedKeys = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  const end = start + pageSize
+  return sshKeys.value.slice(start, end)
+})
+
+function goToPrevPage(): void {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+function goToNextPage(): void {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
+}
+interface NewKey {
+  name: string
+  content: string
+}
+const newKey = ref<NewKey>({ name: '', content: '' })
+const keyLoading = ref<boolean>(false)
+
+// 生成密钥相关
+const generating = ref<boolean>(false)
+const showPrivateKeyModal = ref<boolean>(false)
+const generatedPrivateKey = ref<string>('')
+const privateKeyCopied = ref<boolean>(false)
+
+async function loadSSHKeys(): Promise<void> {
+  try {
+    const response = await api.sshKeys.list()
+    sshKeys.value = Array.isArray(response.keys) ? response.keys : []
+  } catch (error) {
+    console.error('Failed to load SSH keys:', error)
+  }
+}
+
+async function addKey(): Promise<void> {
+  if (!newKey.value.name || !newKey.value.content) return
+  
+  // 验证密钥名称（防止危险字符）
+  const nameValidation = validateName(newKey.value.name, t('profile.sshKeys.name'), 1, 50)
+  if (!nameValidation.valid) {
+    toast.error(nameValidation.message || t('profile.sshKeys.invalidName'))
+    return
+  }
+  
+  keyLoading.value = true
+  try {
+    await api.sshKeys.create({
+      name: newKey.value.name,
+      publicKey: newKey.value.content
+    })
+    toast.success(t('profile.sshKeys.addSuccess'))
+    newKey.value = { name: '', content: '' }
+    showAddKey.value = false
+    await loadSSHKeys()
+  } catch (error: any) {
+    toast.error(t('profile.sshKeys.addFailed') + ': ' + (error?.message || String(error)))
+  } finally {
+    keyLoading.value = false
+  }
+}
+
+async function deleteKey(keyId: number): Promise<void> {
+  if (!confirm(t('profile.sshKeys.confirmDelete'))) return
+  
+  try {
+    await api.sshKeys.delete(keyId)
+    toast.success(t('profile.sshKeys.deleteSuccess'))
+    await loadSSHKeys()
+    // 删除后如果当前页已无数据，返回上一页
+    if (paginatedKeys.value.length === 0 && currentPage.value > 1) {
+      currentPage.value--
+    }
+  } catch (error: any) {
+    toast.error(t('profile.sshKeys.deleteFailed') + ': ' + (error?.message || String(error)))
+  }
+}
+
+// 生成 SSH 密钥对
+async function generateKey(): Promise<void> {
+  generating.value = true
+  try {
+    const result = await api.sshKeys.generate()
+    generatedPrivateKey.value = result.privateKey
+    showPrivateKeyModal.value = true
+    await loadSSHKeys()
+    toast.success(t('profile.sshKeys.generateSuccess'))
+  } catch (error: any) {
+    toast.error(t('profile.sshKeys.generateFailed') + ': ' + (error?.message || String(error)))
+  } finally {
+    generating.value = false
+  }
+}
+
+// 复制私钥到剪贴板
+async function copyPrivateKey(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(generatedPrivateKey.value)
+    privateKeyCopied.value = true
+    setTimeout(() => privateKeyCopied.value = false, 2000)
+  } catch {
+    toast.error(t('profile.sshKeys.copyFailed'))
+  }
+}
+
+// 下载私钥文件
+// 使用更可靠的下载方式，兼容各种浏览器
+function downloadPrivateKey(): void {
+  if (!generatedPrivateKey.value) {
+    toast.error(t('profile.sshKeys.noPrivateKey'))
+    return
+  }
+  
+  const content = generatedPrivateKey.value
+  const filename = 'id_rsa'
+  
+  // 方法1: 尝试使用 Blob URL（大多数现代浏览器支持）
+  try {
+    const blob = new Blob([content], { type: 'application/x-pem-file' })
+    
+    // 检查是否支持 navigator.msSaveBlob (IE/旧版 Edge)
+    if (typeof (navigator as any).msSaveBlob !== 'undefined') {
+      (navigator as any).msSaveBlob(blob, filename)
+      return
+    }
+    
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.style.cssText = 'position:fixed;left:-9999px;top:-9999px;'
+    document.body.appendChild(a)
+    
+    // 使用 setTimeout 确保 DOM 更新完成后再触发点击
+    setTimeout(() => {
+      a.click()
+      // 延长释放时间，确保下载完成
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1500)
+    }, 0)
+  } catch {
+    // 方法2: 降级使用 Data URL（更广泛的兼容性）
+    try {
+      const dataUrl = 'data:application/x-pem-file;charset=utf-8,' + encodeURIComponent(content)
+      const a = document.createElement('a')
+      a.href = dataUrl
+      a.download = filename
+      a.style.cssText = 'position:fixed;left:-9999px;top:-9999px;'
+      document.body.appendChild(a)
+      
+      setTimeout(() => {
+        a.click()
+        setTimeout(() => {
+          document.body.removeChild(a)
+        }, 1500)
+      }, 0)
+    } catch {
+      // 方法3: 最终降级 - 提示用户手动复制
+      toast.error(t('profile.sshKeys.downloadFailed'))
+    }
+  }
+}
+
+// 关闭私钥弹窗
+function closePrivateKeyModal(): void {
+  showPrivateKeyModal.value = false
+  generatedPrivateKey.value = ''
+  privateKeyCopied.value = false
+}
+
+// 挂载时加载
+loadSSHKeys()
+
+defineExpose({ loadSSHKeys })
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
+      <div>
+        <h2 class="text-sm font-medium text-themed-secondary">{{ $t('profile.sshKeys.title') }}</h2>
+        <p class="text-xs text-themed-faint mt-0.5">{{ $t('profile.sshKeys.description') }}</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <button class="btn-primary btn-sm flex-1 sm:flex-none" :disabled="generating" @click="generateKey">
+          <svg v-if="generating" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+          </svg>
+          {{ $t('profile.sshKeys.generate') }}
+        </button>
+        <button class="btn-ghost btn-sm flex-1 sm:flex-none" @click="showAddKey = true">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ $t('profile.sshKeys.add') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 添加表单 -->
+    <div v-if="showAddKey" class="mb-4 p-4 bg-themed-tertiary border border-themed rounded-lg space-y-3">
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.sshKeys.name') }}</label>
+        <input v-model="newKey.name" type="text" class="input" :placeholder="$t('profile.sshKeys.namePlaceholder')" />
+      </div>
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.sshKeys.publicKey') }}</label>
+        <textarea 
+          v-model="newKey.content" 
+          class="input min-h-[80px] font-mono text-xs resize-none" 
+          :placeholder="$t('profile.sshKeys.publicKeyPlaceholder')"
+        ></textarea>
+      </div>
+      <div class="flex gap-2">
+        <button :disabled="!newKey.name || !newKey.content" class="btn-primary btn-sm" @click="addKey">{{ $t('profile.sshKeys.save') }}</button>
+        <button class="btn-ghost btn-sm" @click="showAddKey = false; newKey = { name: '', content: '' }">{{ $t('profile.sshKeys.cancel') }}</button>
+      </div>
+    </div>
+
+    <!-- SSH 密钥列表 -->
+    <div v-if="sshKeys.length" class="space-y-2">
+      <div v-for="key in paginatedKeys" :key="key.id" class="group flex items-center justify-between gap-3 p-3 bg-themed-tertiary border border-themed rounded-lg hover:border-themed-secondary transition-colors">
+        <div class="flex items-center gap-3 min-w-0 flex-1">
+          <div class="w-8 h-8 rounded bg-themed-secondary flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-1">
+            <div class="text-sm text-themed-secondary truncate">{{ key.name }}</div>
+            <div class="text-xs text-themed-faint font-mono truncate">{{ key.fingerprint }}</div>
+          </div>
+        </div>
+        <div class="flex items-center gap-3 flex-shrink-0">
+          <span class="text-xs text-themed-faint hidden sm:inline">{{ key.created_at }}</span>
+          <button 
+            class="text-themed-faint hover:text-red-400 sm:opacity-0 sm:group-hover:opacity-100 transition-all" 
+            @click="deleteKey(key.id)"
+          >
+            <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分页控件 -->
+    <div v-if="totalPages > 1" class="flex items-center justify-between mt-4 pt-3 border-t border-themed">
+      <span class="text-xs text-themed-muted">
+        {{ $t('profile.sshKeys.pageInfo', { current: currentPage, total: totalPages, count: sshKeys.length }) }}
+      </span>
+      <div class="flex items-center gap-2">
+        <button 
+          class="btn-ghost btn-sm" 
+          :disabled="currentPage <= 1" 
+          @click="goToPrevPage"
+        >
+          <svg 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 19l-7-7 7-7" />
+          </svg>
+          {{ $t('profile.sshKeys.prevPage') }}
+        </button>
+        <button 
+          class="btn-ghost btn-sm" 
+          :disabled="currentPage >= totalPages" 
+          @click="goToNextPage"
+        >
+          {{ $t('profile.sshKeys.nextPage') }}
+          <svg 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="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div v-else-if="!showAddKey && !sshKeys.length" class="text-sm text-themed-muted text-center py-6 border border-dashed border-themed rounded-lg">
+      <svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+      </svg>
+      {{ $t('profile.sshKeys.noKeys') }}
+    </div>
+
+    <!-- 私钥展示弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showPrivateKeyModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="closePrivateKeyModal"></div>
+          <div class="modal-content max-w-2xl">
+            <!-- 弹窗头部 -->
+            <div class="modal-header">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-yellow-500/15 flex items-center justify-center">
+                  <svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="modal-title">{{ $t('profile.sshKeys.privateKeyTitle') }}</h3>
+                  <p class="text-xs text-themed-muted mt-0.5">RSA 4096-bit</p>
+                </div>
+              </div>
+              <button class="text-themed-muted hover:text-themed" @click="closePrivateKeyModal">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <!-- 弹窗内容 -->
+            <div class="modal-body space-y-4">
+              <div class="flex items-start gap-3 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+                <svg class="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <div>
+                  <p class="text-sm font-medium text-yellow-600 dark:text-yellow-400">{{ $t('profile.sshKeys.privateKeyWarning') }}</p>
+                  <p class="text-xs text-yellow-600/80 dark:text-yellow-400/80 mt-1">{{ $t('profile.sshKeys.privateKeyWarningDesc') }}</p>
+                </div>
+              </div>
+              <div>
+                <label class="block text-xs text-themed-muted mb-2">{{ $t('profile.sshKeys.privateKeyContent') }}</label>
+                <div class="relative">
+                  <pre class="p-4 rounded-lg bg-themed-tertiary border border-themed font-mono text-xs text-themed-secondary overflow-x-auto whitespace-pre-wrap break-all max-h-[280px] overflow-y-auto">{{ generatedPrivateKey }}</pre>
+                </div>
+              </div>
+            </div>
+            <!-- 弹窗底部 -->
+            <div class="modal-footer flex-wrap">
+              <button class="btn-ghost btn-sm flex-1 sm:flex-none" @click="copyPrivateKey">
+                <svg v-if="privateKeyCopied" class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                {{ privateKeyCopied ? $t('common.copied') : $t('common.copy') }}
+              </button>
+              <button class="btn-primary btn-sm flex-1 sm:flex-none" @click="downloadPrivateKey">
+                <svg 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                {{ $t('profile.sshKeys.download') }}
+              </button>
+              <button class="btn-ghost btn-sm w-full sm:w-auto" @click="closePrivateKeyModal">
+                {{ $t('common.close') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/components/profile/StorageSection.vue b/client/src/components/profile/StorageSection.vue
new file mode 100644
index 0000000..6ee6102
--- /dev/null
+++ b/client/src/components/profile/StorageSection.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+
+const { t } = useI18n()
+const toast = useToast()
+
+interface StorageConfig {
+  id: number
+  name: string
+  type: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+  host: string
+  port: number | null
+  username: string | null
+  basePath: string | null
+  isDefault: boolean
+  createdAt: string
+}
+
+const storageConfigs = ref<StorageConfig[]>([])
+const showAddForm = ref(false)
+const editingId = ref<number | null>(null)
+const loading = ref(false)
+const testingId = ref<number | null>(null)
+
+const form = ref({
+  name: '',
+  type: 'WEBDAV' as 'WEBDAV' | 'FTP' | 'SFTP' | 'S3',
+  host: '',
+  port: null as number | null,
+  username: '',
+  password: '',
+  basePath: '/backups/',
+  isDefault: false
+})
+
+const defaultPorts: Record<string, number> = {
+  WEBDAV: 443,
+  FTP: 21,
+  SFTP: 22
+}
+
+const typeLabels: Record<string, string> = {
+  WEBDAV: 'WebDAV',
+  FTP: 'FTP',
+  SFTP: 'SFTP'
+}
+
+const typeIcons: Record<string, string> = {
+  WEBDAV: '🌐',
+  FTP: '📁',
+  SFTP: '🔐'
+}
+
+const portPlaceholder = computed(() => {
+  return defaultPorts[form.value.type] || 443
+})
+
+const hostPlaceholder = computed(() => {
+  switch (form.value.type) {
+    case 'WEBDAV':
+      return 'https://nas.example.com'
+    case 'FTP':
+      return 'ftp.example.com'
+    case 'SFTP':
+      return 'ssh.example.com'
+    default:
+      return 'example.com'
+  }
+})
+
+async function loadStorageConfigs() {
+  try {
+    const data = await api.storageConfigs.list()
+    storageConfigs.value = data as StorageConfig[]
+  } catch (error) {
+    console.error('Failed to load storage configs:', error)
+  }
+}
+
+function resetForm() {
+  form.value = {
+    name: '',
+    type: 'WEBDAV',
+    host: '',
+    port: null,
+    username: '',
+    password: '',
+    basePath: '/backups/',
+    isDefault: false
+  }
+  editingId.value = null
+}
+
+function openAddForm() {
+  resetForm()
+  showAddForm.value = true
+}
+
+function openEditForm(config: StorageConfig) {
+  form.value = {
+    name: config.name,
+    type: config.type,
+    host: config.host,
+    port: config.port,
+    username: config.username || '',
+    password: '', // 不回显密码
+    basePath: config.basePath || '/backups/',
+    isDefault: config.isDefault
+  }
+  editingId.value = config.id
+  showAddForm.value = true
+}
+
+async function saveConfig() {
+  if (!form.value.name || !form.value.host) {
+    toast.error(t('profile.storage.nameHostRequired'))
+    return
+  }
+
+  loading.value = true
+  try {
+    const data = {
+      name: form.value.name,
+      type: form.value.type,
+      host: form.value.host,
+      port: form.value.port || undefined,
+      username: form.value.username || undefined,
+      password: form.value.password || undefined,
+      basePath: form.value.basePath || undefined,
+      isDefault: form.value.isDefault
+    }
+
+    if (editingId.value) {
+      await api.storageConfigs.update(editingId.value, data)
+      toast.success(t('profile.storage.updateSuccess'))
+    } else {
+      await api.storageConfigs.create(data)
+      toast.success(t('profile.storage.createSuccess'))
+    }
+
+    showAddForm.value = false
+    resetForm()
+    await loadStorageConfigs()
+  } catch (error: any) {
+    toast.error(error?.message || t('profile.storage.saveFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function deleteConfig(id: number) {
+  if (!confirm(t('profile.storage.confirmDelete'))) return
+
+  try {
+    await api.storageConfigs.delete(id)
+    toast.success(t('profile.storage.deleteSuccess'))
+    await loadStorageConfigs()
+  } catch (error: any) {
+    // 处理有活跃任务的情况
+    if (error?.code === 'STORAGE_HAS_ACTIVE_TASKS') {
+      toast.error(t('profile.storage.hasActiveTasks'))
+    } else {
+      toast.error(error?.message || t('profile.storage.deleteFailed'))
+    }
+  }
+}
+
+async function testConnection(id: number) {
+  testingId.value = id
+  try {
+    const result = await api.storageConfigs.test(id)
+    if (result.success) {
+      toast.success(t('profile.storage.testSuccess'))
+    } else {
+      toast.error(result.message || t('profile.storage.testFailed'))
+    }
+  } catch (error: any) {
+    toast.error(error?.message || t('profile.storage.testFailed'))
+  } finally {
+    testingId.value = null
+  }
+}
+
+async function setDefault(id: number) {
+  try {
+    await api.storageConfigs.setDefault(id)
+    toast.success(t('profile.storage.setDefaultSuccess'))
+    await loadStorageConfigs()
+  } catch (error: any) {
+    toast.error(error?.message || t('profile.storage.setDefaultFailed'))
+  }
+}
+
+// 挂载时加载
+loadStorageConfigs()
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h2 class="text-sm font-medium text-themed-secondary">{{ $t('profile.storage.title') }}</h2>
+        <p class="text-xs text-themed-faint mt-0.5">{{ $t('profile.storage.description') }}</p>
+      </div>
+      <button class="btn-ghost btn-sm" @click="openAddForm">
+        <svg 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="M12 4v16m8-8H4" />
+        </svg>
+        {{ $t('profile.storage.add') }}
+      </button>
+    </div>
+
+    <!-- 添加/编辑表单 -->
+    <div v-if="showAddForm" class="mb-4 p-4 bg-themed-tertiary border border-themed rounded-lg space-y-3">
+      <div class="grid grid-cols-2 gap-3">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.name') }}</label>
+          <input v-model="form.name" type="text" class="input" :placeholder="$t('profile.storage.namePlaceholder')" />
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.type') }}</label>
+          <select v-model="form.type" class="input">
+            <option value="WEBDAV">WebDAV</option>
+            <option value="FTP">FTP</option>
+            <option value="SFTP">SFTP</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-3">
+        <div class="col-span-2">
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.host') }}</label>
+          <input v-model="form.host" type="text" class="input" :placeholder="hostPlaceholder" />
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.port') }}</label>
+          <input v-model.number="form.port" type="number" class="input" :placeholder="String(portPlaceholder)" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.username') }}</label>
+          <input v-model="form.username" type="text" class="input" />
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.password') }}</label>
+          <input v-model="form.password" type="password" class="input" :placeholder="editingId ? $t('profile.storage.passwordUnchanged') : ''" />
+        </div>
+      </div>
+
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.storage.basePath') }}</label>
+        <input v-model="form.basePath" type="text" class="input" placeholder="/backups/" />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input id="isDefault" v-model="form.isDefault" type="checkbox" class="rounded" />
+        <label for="isDefault" class="text-xs text-themed-muted">{{ $t('profile.storage.setAsDefault') }}</label>
+      </div>
+
+      <div class="flex gap-2">
+        <button :disabled="loading" class="btn-primary btn-sm" @click="saveConfig">
+          {{ loading ? $t('common.saving') : $t('common.save') }}
+        </button>
+        <button class="btn-ghost btn-sm" @click="showAddForm = false">{{ $t('common.cancel') }}</button>
+      </div>
+    </div>
+
+    <!-- 存储配置列表 -->
+    <TransitionGroup v-if="storageConfigs.length" name="list" tag="div" class="space-y-2">
+      <div
+        v-for="config in storageConfigs" :key="config.id" 
+        class="group flex items-center justify-between p-3 bg-themed-tertiary border border-themed rounded-lg hover:border-themed-secondary transition-colors"
+      >
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 rounded bg-themed-secondary flex items-center justify-center text-lg">
+            {{ typeIcons[config.type] }}
+          </div>
+          <div>
+            <div class="text-sm text-themed-secondary flex items-center gap-2">
+              {{ config.name }}
+              <span class="text-xs px-1.5 py-0.5 rounded badge-default">
+                {{ typeLabels[config.type] }}
+              </span>
+              <span v-if="config.isDefault" class="text-xs px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">
+                {{ $t('profile.storage.default') }}
+              </span>
+            </div>
+            <div class="text-xs text-themed-faint">{{ config.host }}{{ config.basePath }}</div>
+          </div>
+        </div>
+        <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button 
+            class="btn-ghost btn-sm" 
+            :disabled="testingId === config.id"
+            @click="testConnection(config.id)"
+          >
+            <svg v-if="testingId === config.id" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span v-else>{{ $t('profile.storage.test') }}</span>
+          </button>
+          <button v-if="!config.isDefault" class="btn-ghost btn-sm" @click="setDefault(config.id)">
+            {{ $t('profile.storage.setDefault') }}
+          </button>
+          <button class="btn-ghost btn-sm" @click="openEditForm(config)">
+            {{ $t('common.edit') }}
+          </button>
+          <button class="text-themed-faint hover:text-red-400" @click="deleteConfig(config.id)">
+            <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </TransitionGroup>
+
+    <!-- 空状态 -->
+    <div v-else-if="!showAddForm" class="text-sm text-themed-muted text-center py-6 border border-dashed border-themed rounded-lg">
+      <svg class="w-8 h-8 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+      </svg>
+      {{ $t('profile.storage.noConfigs') }}
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/profile/TelegramBindingSection.vue b/client/src/components/profile/TelegramBindingSection.vue
new file mode 100644
index 0000000..828f3b4
--- /dev/null
+++ b/client/src/components/profile/TelegramBindingSection.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import type { TelegramBindingStatus } from '@/types/api'
+
+const { locale, t } = useI18n()
+const toast = useToast()
+
+const loading = ref(false)
+const generating = ref(false)
+const unlinking = ref(false)
+const bindUrl = ref('')
+const expiresAt = ref('')
+const status = ref<TelegramBindingStatus>({
+  enabled: false,
+  configured: false,
+  botUsername: null,
+  binding: null
+})
+
+const isAvailable = computed(() => status.value.enabled && status.value.configured)
+const binding = computed(() => status.value.binding)
+const botLabel = computed(() => status.value.botUsername ? `@${status.value.botUsername}` : 'Telegram Bot')
+const telegramDisplayName = computed(() => {
+  const current = binding.value
+  if (!current) return ''
+  if (current.telegramUsername) return `@${current.telegramUsername}`
+  const fullName = [current.firstName, current.lastName].filter(Boolean).join(' ')
+  return fullName || `ID ${current.telegramUserId}`
+})
+
+function formatDate(value: string): string {
+  const localeMap: Record<string, string> = {
+    'zh-CN': 'zh-CN',
+    'zh-TW': 'zh-TW',
+    en: 'en-US'
+  }
+
+  return new Date(value).toLocaleString(localeMap[locale.value] || 'en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+async function loadBinding(): Promise<void> {
+  loading.value = true
+  try {
+    status.value = await api.telegram.getBinding()
+  } catch (error) {
+    console.error('Failed to load Telegram binding:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function createBindToken(): Promise<void> {
+  generating.value = true
+  try {
+    const response = await api.telegram.createBindToken()
+    bindUrl.value = response.bindUrl
+    expiresAt.value = response.expiresAt
+    toast.success(t('profile.telegramBinding.generated'))
+  } catch (error: any) {
+    toast.error(t('profile.telegramBinding.generateFailed', { error: error?.message || String(error) }))
+  } finally {
+    generating.value = false
+  }
+}
+
+async function copyBindUrl(): Promise<void> {
+  if (!bindUrl.value) return
+  try {
+    await navigator.clipboard.writeText(bindUrl.value)
+    toast.success(t('profile.telegramBinding.copied'))
+  } catch {
+    toast.error(t('profile.telegramBinding.copyFailed'))
+  }
+}
+
+async function unlinkTelegram(): Promise<void> {
+  if (!confirm(t('profile.telegramBinding.confirmUnlink'))) return
+
+  unlinking.value = true
+  try {
+    await api.telegram.unlink()
+    bindUrl.value = ''
+    expiresAt.value = ''
+    toast.success(t('profile.telegramBinding.unlinked'))
+    await loadBinding()
+  } catch (error: any) {
+    toast.error(t('profile.telegramBinding.unlinkFailed', { error: error?.message || String(error) }))
+  } finally {
+    unlinking.value = false
+  }
+}
+
+onMounted(loadBinding)
+
+defineExpose({ loadBinding })
+</script>
+
+<template>
+  <div class="card p-5">
+    <div class="flex items-start justify-between gap-4 mb-4">
+      <div>
+        <h2 class="text-sm font-medium text-themed-secondary">{{ t('profile.telegramBinding.title') }}</h2>
+        <p class="text-xs text-themed-faint mt-0.5">
+          {{ t('profile.telegramBinding.description') }}
+        </p>
+      </div>
+      <button class="btn-ghost btn-sm" :disabled="loading" @click="loadBinding">
+        {{ loading ? t('profile.telegramBinding.refreshing') : t('profile.telegramBinding.refresh') }}
+      </button>
+    </div>
+
+    <div v-if="loading" class="p-4 bg-themed-tertiary border border-themed rounded-lg animate-pulse">
+      <div class="h-4 bg-themed-secondary rounded w-1/3 mb-3"></div>
+      <div class="h-3 bg-themed-secondary rounded w-2/3"></div>
+    </div>
+
+    <div v-else-if="!isAvailable" class="p-4 bg-themed-tertiary border border-themed rounded-lg">
+      <div class="text-sm text-themed font-medium">{{ t('profile.telegramBinding.unavailableTitle') }}</div>
+      <p class="text-xs text-themed-muted mt-1">
+        {{ t('profile.telegramBinding.unavailableDescription') }}
+      </p>
+    </div>
+
+    <div v-else-if="binding" class="p-4 bg-themed-tertiary border border-themed rounded-lg">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <div class="text-sm text-themed font-medium">{{ t('profile.telegramBinding.boundTitle', { name: telegramDisplayName }) }}</div>
+          <p class="text-xs text-themed-muted mt-1">
+            {{ t('profile.telegramBinding.telegramId', { id: binding.telegramUserId }) }}
+          </p>
+          <p class="text-xs text-themed-muted mt-1">
+            {{ t('profile.telegramBinding.boundAt', { date: formatDate(binding.boundAt) }) }}
+          </p>
+          <p class="text-xs text-themed-muted mt-1">
+            {{ t('profile.telegramBinding.joinHint', { bot: botLabel }) }}
+            <code class="px-1 py-0.5 rounded bg-themed-secondary">/join</code>
+          </p>
+        </div>
+        <button class="btn-ghost btn-sm text-error" :disabled="unlinking" @click="unlinkTelegram">
+          {{ unlinking ? t('profile.telegramBinding.unlinking') : t('profile.telegramBinding.unlink') }}
+        </button>
+      </div>
+    </div>
+
+    <div v-else class="space-y-4">
+      <div class="p-4 bg-themed-tertiary border border-themed rounded-lg">
+        <div class="text-sm text-themed font-medium">{{ t('profile.telegramBinding.unboundTitle') }}</div>
+        <p class="text-xs text-themed-muted mt-1">
+          {{ t('profile.telegramBinding.unboundDescription', { bot: botLabel }) }}
+        </p>
+      </div>
+
+      <div class="flex flex-col sm:flex-row gap-2">
+        <button class="btn-secondary btn-sm" :disabled="generating" @click="createBindToken">
+          {{ generating ? t('profile.telegramBinding.generating') : t('profile.telegramBinding.generate') }}
+        </button>
+        <a
+          v-if="bindUrl"
+          class="btn-primary btn-sm text-center"
+          :href="bindUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ t('profile.telegramBinding.openTelegram') }}
+        </a>
+        <button v-if="bindUrl" class="btn-ghost btn-sm" @click="copyBindUrl">
+          {{ t('profile.telegramBinding.copyLink') }}
+        </button>
+      </div>
+
+      <div v-if="bindUrl" class="p-3 rounded-lg bg-themed-secondary/50 border border-themed">
+        <p class="text-xs text-themed-muted mb-2">
+          {{ t('profile.telegramBinding.linkHint') }}
+        </p>
+        <p class="break-all text-xs text-themed">{{ bindUrl }}</p>
+        <p v-if="expiresAt" class="text-xs text-themed-muted mt-2">
+          {{ t('profile.telegramBinding.expiresAt', { date: formatDate(expiresAt) }) }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/profile/TwoFactorSection.vue b/client/src/components/profile/TwoFactorSection.vue
new file mode 100644
index 0000000..7ca8747
--- /dev/null
+++ b/client/src/components/profile/TwoFactorSection.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+
+const { t } = useI18n()
+const loading = ref(false)
+const enabled = ref(false)
+const setupMode = ref(false)
+const disableMode = ref(false)
+const regenerateMode = ref(false)
+
+// 设置数据
+const qrCode = ref('')
+const secret = ref('')
+const recoveryCodes = ref<string[]>([])
+const verifyCode = ref('')
+
+// 禁用数据
+const disablePassword = ref('')
+const disableCode = ref('')
+
+// 恢复码状态
+const recoveryCodesStatus = ref<{ total: number; remaining: number; used: number } | null>(null)
+
+// 重新生成数据
+const regeneratePassword = ref('')
+const regenerateCode = ref('')
+const newRecoveryCodes = ref<string[]>([])
+
+const error = ref('')
+const success = ref('')
+
+async function loadStatus() {
+  try {
+    const res = await api.auth.get2FAStatus()
+    enabled.value = res.enabled
+    if (res.enabled) {
+      await loadRecoveryCodesStatus()
+    }
+  } catch (e: any) {
+    error.value = e.message || t('profile.twoFactorAuth.getStatusFailed')
+  }
+}
+
+async function loadRecoveryCodesStatus() {
+  try {
+    recoveryCodesStatus.value = await api.auth.getRecoveryCodes()
+  } catch {
+    // 静默失败
+  }
+}
+
+async function startSetup() {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await api.auth.setup2FA()
+    qrCode.value = res.qrCode
+    secret.value = res.secret
+    recoveryCodes.value = res.recoveryCodes
+    setupMode.value = true
+  } catch (e: any) {
+    error.value = e.message || t('profile.twoFactorAuth.initFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function confirmEnable() {
+  if (!verifyCode.value || verifyCode.value.length !== 6) {
+    error.value = t('profile.twoFactorAuth.enterCodeError')
+    return
+  }
+  loading.value = true
+  error.value = ''
+  try {
+    await api.auth.enable2FA(verifyCode.value)
+    enabled.value = true
+    setupMode.value = false
+    success.value = t('profile.twoFactorAuth.enabledSuccess')
+    setTimeout(() => success.value = '', 3000)
+  } catch (e: any) {
+    error.value = e.message || t('profile.twoFactorAuth.verifyFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function confirmDisable() {
+  if (!disablePassword.value || !disableCode.value) {
+    error.value = t('profile.twoFactorAuth.fillPasswordAndCode')
+    return
+  }
+  loading.value = true
+  error.value = ''
+  try {
+    await api.auth.disable2FA(disablePassword.value, disableCode.value)
+    enabled.value = false
+    disableMode.value = false
+    disablePassword.value = ''
+    disableCode.value = ''
+    recoveryCodesStatus.value = null
+    success.value = t('profile.twoFactorAuth.disabledSuccess')
+    setTimeout(() => success.value = '', 3000)
+  } catch (e: any) {
+    error.value = e.message || t('profile.twoFactorAuth.disableFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function confirmRegenerate() {
+  if (!regeneratePassword.value || !regenerateCode.value) {
+    error.value = t('profile.twoFactorAuth.fillPasswordAndCode')
+    return
+  }
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await api.auth.regenerateRecoveryCodes(regeneratePassword.value, regenerateCode.value)
+    newRecoveryCodes.value = res.recoveryCodes
+    await loadRecoveryCodesStatus()
+    success.value = t('profile.twoFactorAuth.codesRegenerated')
+    setTimeout(() => success.value = '', 5000)
+  } catch (e: any) {
+    error.value = e.message || t('profile.twoFactorAuth.regenerateFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+function cancelRegenerate() {
+  regenerateMode.value = false
+  regeneratePassword.value = ''
+  regenerateCode.value = ''
+  newRecoveryCodes.value = []
+  error.value = ''
+}
+
+function cancelSetup() {
+  setupMode.value = false
+  qrCode.value = ''
+  secret.value = ''
+  recoveryCodes.value = []
+  verifyCode.value = ''
+  error.value = ''
+}
+
+function cancelDisable() {
+  disableMode.value = false
+  disablePassword.value = ''
+  disableCode.value = ''
+  error.value = ''
+}
+
+onMounted(loadStatus)
+</script>
+
+<template>
+  <div class="card p-5">
+    <h2 class="text-sm font-medium text-themed-secondary mb-4">{{ $t('profile.twoFactorAuth.title') }}</h2>
+    
+    <!-- Status display -->
+    <div v-if="!setupMode && !disableMode && !regenerateMode" class="space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <span class="text-sm text-themed-primary">{{ $t('profile.twoFactorAuth.status') }}：</span>
+          <span :class="enabled ? 'text-green-400' : 'text-yellow-400'" class="text-sm font-medium">
+            {{ enabled ? $t('profile.twoFactorAuth.enabled') : $t('profile.twoFactorAuth.notEnabled') }}
+          </span>
+        </div>
+        <button 
+          v-if="!enabled"
+          :disabled="loading"
+          class="btn-primary text-sm"
+          @click="startSetup"
+        >
+          {{ loading ? $t('profile.twoFactorAuth.loading') : $t('profile.twoFactorAuth.enable') }}
+        </button>
+        <button 
+          v-else
+          class="btn-secondary text-sm"
+          @click="disableMode = true"
+        >
+          {{ $t('profile.twoFactorAuth.disable') }}
+        </button>
+      </div>
+      <p class="text-xs text-themed-muted">
+        {{ $t('profile.twoFactorAuth.description') }}
+      </p>
+
+      <!-- Recovery codes status -->
+      <div v-if="enabled && recoveryCodesStatus" class="mt-4 p-3 bg-themed-tertiary rounded">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-sm text-themed-primary">{{ $t('profile.twoFactorAuth.recoveryCodesStatus') }}</span>
+          <button 
+            class="text-xs text-blue-400 hover:text-blue-300 transition-colors"
+            @click="regenerateMode = true"
+          >
+            {{ $t('profile.twoFactorAuth.regenerate') }}
+          </button>
+        </div>
+        <div class="flex items-center space-x-4 text-xs">
+          <span class="text-themed-muted">
+            {{ $t('profile.twoFactorAuth.remaining') }}: <span class="text-themed-primary font-medium">{{ recoveryCodesStatus.remaining }}</span> / {{ recoveryCodesStatus.total }}
+          </span>
+          <span v-if="recoveryCodesStatus.used > 0" class="text-yellow-400">
+            {{ $t('profile.twoFactorAuth.used') }}: {{ recoveryCodesStatus.used }}
+          </span>
+        </div>
+        <p v-if="recoveryCodesStatus.remaining <= 2" class="text-xs text-red-400 mt-2">
+          ⚠️ {{ $t('profile.twoFactorAuth.lowCodesWarning') }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Setup mode -->
+    <div v-if="setupMode" class="space-y-4">
+      <div class="text-sm text-themed-primary mb-2">{{ $t('profile.twoFactorAuth.setup') }}</div>
+      
+      <div class="flex flex-col items-center space-y-3">
+        <p class="text-xs text-themed-muted text-center">
+          {{ $t('profile.twoFactorAuth.scanQrCode') }}
+        </p>
+        <img v-if="qrCode" :src="qrCode" alt="2FA QR Code" class="w-48 h-48 bg-white p-2 rounded" />
+        <div class="text-xs text-themed-muted">
+          {{ $t('profile.twoFactorAuth.manualEntry') }}：<code class="bg-themed-tertiary px-2 py-1 rounded text-themed-primary">{{ secret }}</code>
+        </div>
+      </div>
+
+      <div v-if="recoveryCodes.length" class="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded">
+        <p class="text-xs text-yellow-400 mb-2">⚠️ {{ $t('profile.twoFactorAuth.saveRecoveryCodes') }}：</p>
+        <div class="grid grid-cols-2 gap-1">
+          <code v-for="code in recoveryCodes" :key="code" class="text-xs text-themed-primary bg-themed-tertiary px-2 py-1 rounded">
+            {{ code }}
+          </code>
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.twoFactorAuth.enterCode') }}</label>
+        <input 
+          v-model="verifyCode"
+          type="text"
+          maxlength="6"
+          class="input"
+          :placeholder="$t('profile.twoFactorAuth.codePlaceholder')"
+        />
+      </div>
+
+      <div class="flex space-x-3">
+        <button :disabled="loading" class="btn-primary" @click="confirmEnable">
+          {{ loading ? $t('profile.twoFactorAuth.verifying') : $t('profile.twoFactorAuth.confirmEnable') }}
+        </button>
+        <button class="btn-secondary" @click="cancelSetup">{{ $t('profile.twoFactorAuth.cancel') }}</button>
+      </div>
+    </div>
+
+    <!-- Disable mode -->
+    <div v-if="disableMode" class="space-y-4">
+      <div class="text-sm text-themed-primary mb-2">{{ $t('profile.twoFactorAuth.disableTitle') }}</div>
+      <p class="text-xs text-themed-muted">{{ $t('profile.twoFactorAuth.disableDesc') }}</p>
+      
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.twoFactorAuth.password') }}</label>
+        <input 
+          v-model="disablePassword"
+          type="password"
+          class="input"
+          :placeholder="$t('profile.twoFactorAuth.passwordPlaceholder')"
+        />
+      </div>
+      <div>
+        <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.twoFactorAuth.verificationCode') }}</label>
+        <input 
+          v-model="disableCode"
+          type="text"
+          maxlength="6"
+          class="input"
+          :placeholder="$t('profile.twoFactorAuth.codePlaceholder')"
+        />
+      </div>
+
+      <div class="flex space-x-3">
+        <button :disabled="loading" class="btn-danger" @click="confirmDisable">
+          {{ loading ? $t('profile.twoFactorAuth.processing') : $t('profile.twoFactorAuth.confirmDisable') }}
+        </button>
+        <button class="btn-secondary" @click="cancelDisable">{{ $t('profile.twoFactorAuth.cancel') }}</button>
+      </div>
+    </div>
+
+    <!-- Regenerate recovery codes mode -->
+    <div v-if="regenerateMode" class="space-y-4">
+      <div class="text-sm text-themed-primary mb-2">{{ $t('profile.twoFactorAuth.regenerateTitle') }}</div>
+      <p class="text-xs text-themed-muted">{{ $t('profile.twoFactorAuth.regenerateDesc') }}</p>
+      
+      <!-- Show new codes if generated -->
+      <div v-if="newRecoveryCodes.length" class="p-3 bg-green-500/10 border border-green-500/30 rounded">
+        <p class="text-xs text-green-400 mb-2">✓ {{ $t('profile.twoFactorAuth.newCodesGenerated') }}：</p>
+        <div class="grid grid-cols-2 gap-1">
+          <code v-for="code in newRecoveryCodes" :key="code" class="text-xs text-themed-primary bg-themed-tertiary px-2 py-1 rounded">
+            {{ code }}
+          </code>
+        </div>
+        <button class="btn-primary text-sm mt-3" @click="cancelRegenerate">{{ $t('profile.twoFactorAuth.done') }}</button>
+      </div>
+
+      <!-- Input form -->
+      <template v-else>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.twoFactorAuth.password') }}</label>
+          <input 
+            v-model="regeneratePassword"
+            type="password"
+            class="input"
+            :placeholder="$t('profile.twoFactorAuth.passwordPlaceholder')"
+          />
+        </div>
+        <div>
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('profile.twoFactorAuth.verificationCode') }}</label>
+          <input 
+            v-model="regenerateCode"
+            type="text"
+            maxlength="6"
+            class="input"
+            :placeholder="$t('profile.twoFactorAuth.codePlaceholder')"
+          />
+        </div>
+
+        <div class="flex space-x-3">
+          <button :disabled="loading" class="btn-primary" @click="confirmRegenerate">
+            {{ loading ? $t('profile.twoFactorAuth.generating') : $t('profile.twoFactorAuth.confirmGenerate') }}
+          </button>
+          <button class="btn-secondary" @click="cancelRegenerate">{{ $t('profile.twoFactorAuth.cancel') }}</button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Messages -->
+    <div v-if="error" class="mt-3 text-sm text-red-400">{{ error }}</div>
+    <div v-if="success" class="mt-3 text-sm text-green-400">{{ success }}</div>
+  </div>
+</template>
diff --git a/client/src/components/public/PublicAuthShell.vue b/client/src/components/public/PublicAuthShell.vue
new file mode 100644
index 0000000..2135877
--- /dev/null
+++ b/client/src/components/public/PublicAuthShell.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useM3Auth } from '@/composables/useM3Auth'
+import { useBrand } from '@/composables/useBrand'
+
+defineProps<{
+  title: string
+  subtitle?: string
+  tone?: 'primary' | 'tertiary' | 'secondary'
+}>()
+
+const { ui } = useM3Auth()
+const brand = useBrand()
+</script>
+
+<template>
+  <div class="mx-auto flex w-full max-w-lg flex-col items-center">
+    <section class="w-full">
+      <div class="mb-8 text-center">
+        <img
+          :src="brand.brandLogoUrl"
+          :alt="brand.brandName"
+          class="mx-auto h-14 w-14 rounded-2xl"
+        />
+        <h1
+          class="mt-5 text-3xl font-normal tracking-[-0.02em] sm:text-[2rem] sm:leading-[1.15]"
+          :class="ui.title"
+        >
+          {{ title }}
+        </h1>
+      </div>
+
+      <slot />
+
+      <div v-if="$slots.after" class="mt-6 text-center">
+        <slot name="after" />
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/client/src/components/public/PublicSiteFooter.vue b/client/src/components/public/PublicSiteFooter.vue
new file mode 100644
index 0000000..2f7b203
--- /dev/null
+++ b/client/src/components/public/PublicSiteFooter.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import { useBrand } from '@/composables/useBrand'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+
+const isLoginRoute = computed(() => route.name === 'login')
+const isRegisterRoute = computed(() => route.name === 'register')
+const isForgotPasswordRoute = computed(() => route.name === 'forgot-password')
+const consoleTarget = computed(() => (authStore.isAdmin ? '/admin/users' : '/dashboard'))
+
+const primaryActionLabel = computed(() => {
+  if (authStore.isAuthenticated) {
+    return t('publicSite.actions.console')
+  }
+
+  if (isLoginRoute.value && configStore.registrationEnabled) {
+    return t('auth.register')
+  }
+
+  if (isRegisterRoute.value || isForgotPasswordRoute.value) {
+    return t('auth.login')
+  }
+
+  return t('publicSite.actions.signIn')
+})
+
+const ui = computed(() => themeStore.isDark
+  ? {
+      secondaryButton: 'border-[#35507a] bg-[#1d365c] text-[#d3e3fd] hover:bg-[#274577]',
+      primaryButton: 'bg-[#a8c7fa] text-[#062e6f] shadow-[0_14px_30px_-16px_rgba(96,146,211,0.48)] hover:bg-[#bed7ff]'
+    }
+  : {
+      secondaryButton: 'border-[#c6d7f8] bg-[#d3e3fd] text-[#041e49] hover:bg-[#e8f0fe]',
+      primaryButton: 'bg-[#0b57d0] text-white shadow-[0_14px_30px_-16px_rgba(11,87,208,0.3)] hover:bg-[#0842a0]'
+    }
+)
+
+const secondaryAction = computed(() => (
+  route.name === 'market'
+    ? { to: '/', label: t('publicSite.nav.overview') }
+    : { to: '/market', label: t('publicSite.actions.browseProducts') }
+))
+
+const accountLinks = computed(() => {
+  if (authStore.isAuthenticated) {
+    return [{ label: t('publicSite.actions.consoleCompact'), to: consoleTarget.value }]
+  }
+
+  return [
+    { label: t('auth.login'), to: '/login' },
+    ...(configStore.registrationEnabled ? [{ label: t('auth.register'), to: '/register' }] : []),
+    { label: t('auth.forgotPasswordLink'), to: '/forgot-password' }
+  ]
+})
+
+function handlePrimaryAction(): void {
+  if (authStore.isAuthenticated) {
+    void router.push(consoleTarget.value)
+    return
+  }
+
+  if (isLoginRoute.value && configStore.registrationEnabled) {
+    void router.push('/register')
+    return
+  }
+
+  if (isRegisterRoute.value || isForgotPasswordRoute.value) {
+    void router.push('/login')
+    return
+  }
+
+  void router.push('/login')
+}
+
+void configStore.loadPublicConfig()
+</script>
+
+<template>
+  <footer class="relative border-t" :class="themeStore.isDark ? 'border-white/10' : 'border-black/10'">
+    <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <div
+        class="rounded-[32px] border p-6 shadow-sm sm:p-8"
+        :class="themeStore.isDark ? 'border-white/10 bg-white/[0.03]' : 'border-black/10 bg-white/90'"
+      >
+        <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+          <div class="max-w-2xl">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex h-11 w-11 items-center justify-center rounded-2xl border"
+                :class="themeStore.isDark ? 'border-white/10 bg-white/5' : 'border-black/10 bg-white'"
+              >
+                <img :src="brand.brandLogoUrl" :alt="brand.brandName" class="h-6 w-6 rounded-xl object-contain" />
+              </div>
+              <div>
+                <div class="text-sm font-semibold" :class="themeStore.isDark ? 'text-white' : 'text-zinc-950'">{{ brand.brandName }}</div>
+                <div class="text-xs" :class="themeStore.isDark ? 'text-zinc-500' : 'text-zinc-500'">{{ brand.brandSubtitle }}</div>
+              </div>
+            </div>
+
+            <p class="mt-4 max-w-2xl text-sm leading-7" :class="themeStore.isDark ? 'text-zinc-400' : 'text-zinc-600'">
+              {{ t('publicSite.footer.description') }}
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-3 sm:flex-row">
+            <RouterLink
+              class="inline-flex items-center justify-center rounded-full border px-5 py-3 text-sm font-semibold transition-colors"
+              :class="ui.secondaryButton"
+              :to="secondaryAction.to"
+            >
+              {{ secondaryAction.label }}
+            </RouterLink>
+            <button
+              class="inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold transition-colors"
+              :class="ui.primaryButton"
+              @click="handlePrimaryAction"
+            >
+              {{ primaryActionLabel }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-10 grid gap-8 sm:grid-cols-2">
+        <div class="space-y-3">
+          <div class="text-xs font-semibold uppercase tracking-[0.2em]" :class="themeStore.isDark ? 'text-zinc-500' : 'text-zinc-500'">
+            {{ t('publicSite.footer.explore') }}
+          </div>
+          <div class="flex flex-col gap-2 text-sm">
+            <RouterLink class="transition-colors" :class="themeStore.isDark ? 'text-zinc-300 hover:text-white' : 'text-zinc-700 hover:text-zinc-950'" to="/">
+              {{ t('publicSite.nav.home') }}
+            </RouterLink>
+            <RouterLink class="transition-colors" :class="themeStore.isDark ? 'text-zinc-300 hover:text-white' : 'text-zinc-700 hover:text-zinc-950'" to="/market">
+              {{ t('publicSite.nav.products') }}
+            </RouterLink>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          <div class="text-xs font-semibold uppercase tracking-[0.2em]" :class="themeStore.isDark ? 'text-zinc-500' : 'text-zinc-500'">
+            {{ t('publicSite.footer.account') }}
+          </div>
+          <div class="flex flex-col gap-2 text-sm">
+            <RouterLink
+              v-for="link in accountLinks"
+              :key="link.to"
+              class="transition-colors"
+              :class="themeStore.isDark ? 'text-zinc-300 hover:text-white' : 'text-zinc-700 hover:text-zinc-950'"
+              :to="link.to"
+            >
+              {{ link.label }}
+            </RouterLink>
+          </div>
+          <p class="text-xs leading-6" :class="themeStore.isDark ? 'text-zinc-500' : 'text-zinc-500'">
+            {{ t('publicSite.footer.purchaseHint') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/client/src/components/public/PublicSiteHeader.vue b/client/src/components/public/PublicSiteHeader.vue
new file mode 100644
index 0000000..7efa2c4
--- /dev/null
+++ b/client/src/components/public/PublicSiteHeader.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import { useBrand } from '@/composables/useBrand'
+import { supportedLocales, setLocale, type Locale } from '@/locales'
+
+const route = useRoute()
+const router = useRouter()
+const { locale, t } = useI18n()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+
+const langMenuOpen = ref(false)
+const langMenuRef = ref<HTMLElement | null>(null)
+
+const navigation = computed(() => [
+  { label: t('publicSite.nav.home'), compactLabel: t('publicSite.nav.overview'), to: '/' },
+  { label: t('publicSite.nav.products'), compactLabel: t('publicSite.nav.products'), to: '/market' }
+])
+
+const isLoginRoute = computed(() => route.name === 'login')
+const isRegisterRoute = computed(() => route.name === 'register')
+const isForgotPasswordRoute = computed(() => route.name === 'forgot-password')
+const consoleTarget = computed(() => (authStore.isAdmin ? '/admin/users' : '/dashboard'))
+
+const primaryActionLabel = computed(() => {
+  if (authStore.isAuthenticated) {
+    return t('publicSite.actions.console')
+  }
+
+  if (isLoginRoute.value && configStore.registrationEnabled) {
+    return t('auth.register')
+  }
+
+  if (isRegisterRoute.value || isForgotPasswordRoute.value) {
+    return t('auth.login')
+  }
+
+  return t('publicSite.actions.signIn')
+})
+
+const primaryActionCompactLabel = computed(() => {
+  if (authStore.isAuthenticated) {
+    return t('publicSite.actions.consoleCompact')
+  }
+
+  if (isLoginRoute.value && configStore.registrationEnabled) {
+    return t('auth.register')
+  }
+
+  if (isRegisterRoute.value || isForgotPasswordRoute.value) {
+    return t('auth.login')
+  }
+
+  return t('publicSite.actions.signIn')
+})
+
+const scrolled = ref(false)
+
+function onScroll(): void {
+  scrolled.value = window.scrollY > 4
+}
+
+const ui = computed(() => themeStore.isDark
+  ? {
+      shell: scrolled.value
+        ? 'bg-[#111418]/85 backdrop-blur-xl border-b border-[#2a2d33]'
+        : 'bg-transparent border-b border-transparent',
+      brandMark: 'bg-[#1a2c52]',
+      brandText: 'text-[#e3e2e6]',
+      brandSubtext: 'text-[#8e9199]',
+      navRail: '',
+      navActive: 'bg-[#1a2c52] text-[#d3e3fd]',
+      navIdle: 'text-[#c3c6cf] hover:bg-[#272a2f] hover:text-[#e3e2e6]',
+      iconButton: 'text-[#c3c6cf] hover:bg-[#272a2f]',
+      menuPanel: 'border-[#43474e] bg-[#1d2024] shadow-[0_4px_8px_3px_rgba(0,0,0,0.15),0_1px_3px_rgba(0,0,0,0.3)]',
+      menuActive: 'bg-[#1a2c52] text-[#d3e3fd]',
+      menuIdle: 'text-[#c3c6cf] hover:bg-[#272a2f] hover:text-[#e3e2e6]',
+      cta: 'bg-[#a8c7fa] text-[#062e6f] shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)] hover:bg-[#bdd3fb]',
+      mobileActive: 'bg-[#1a2c52] text-[#d3e3fd]',
+      mobileIdle: 'text-[#c3c6cf] hover:bg-[#272a2f] hover:text-[#e3e2e6]'
+    }
+  : {
+      shell: scrolled.value
+        ? 'bg-[#fcfcfd]/85 backdrop-blur-xl border-b border-[#e3e5ec]'
+        : 'bg-transparent border-b border-transparent',
+      brandMark: 'bg-[#d3e3fd]',
+      brandText: 'text-[#1a1b20]',
+      brandSubtext: 'text-[#74777f]',
+      navRail: '',
+      navActive: 'bg-[#d3e3fd] text-[#041e49]',
+      navIdle: 'text-[#43474e] hover:bg-[#eef0f8] hover:text-[#1a1b20]',
+      iconButton: 'text-[#43474e] hover:bg-[#eef0f8]',
+      menuPanel: 'border-[#c3c6cf] bg-white shadow-[0_4px_8px_3px_rgba(15,23,42,0.08),0_1px_3px_rgba(15,23,42,0.06)]',
+      menuActive: 'bg-[#d3e3fd] text-[#041e49]',
+      menuIdle: 'text-[#43474e] hover:bg-[#eef0f8] hover:text-[#1a1b20]',
+      cta: 'bg-[#0b57d0] text-white shadow-[0_1px_2px_rgba(11,87,208,0.3),0_1px_3px_1px_rgba(11,87,208,0.15)] hover:bg-[#0848ad]',
+      mobileActive: 'bg-[#d3e3fd] text-[#041e49]',
+      mobileIdle: 'text-[#43474e] hover:bg-[#eef0f8] hover:text-[#1a1b20]'
+    }
+)
+
+function handleClickOutside(event: MouseEvent): void {
+  if (langMenuRef.value && !langMenuRef.value.contains(event.target as Node)) {
+    langMenuOpen.value = false
+  }
+}
+
+function isActive(path: string): boolean {
+  if (path === '/') {
+    return route.path === '/'
+  }
+
+  return route.path.startsWith(path)
+}
+
+function toggleLangMenu(): void {
+  langMenuOpen.value = !langMenuOpen.value
+}
+
+function changeLocale(nextLocale: Locale): void {
+  setLocale(nextLocale)
+  langMenuOpen.value = false
+}
+
+function getThemeTooltip(): string {
+  switch (themeStore.mode) {
+    case 'dark':
+      return t('theme.dark')
+    case 'light':
+      return t('theme.light')
+    default:
+      return t('theme.system')
+  }
+}
+
+function currentLocaleShort(): string {
+  switch (locale.value) {
+    case 'zh-CN':
+      return '简'
+    case 'zh-TW':
+      return '繁'
+    default:
+      return 'EN'
+  }
+}
+
+function handlePrimaryAction(): void {
+  if (authStore.isAuthenticated) {
+    void router.push(consoleTarget.value)
+    return
+  }
+
+  if (isLoginRoute.value && configStore.registrationEnabled) {
+    void router.push('/register')
+    return
+  }
+
+  if (isRegisterRoute.value || isForgotPasswordRoute.value) {
+    void router.push('/login')
+    return
+  }
+
+  void router.push('/login')
+}
+
+onMounted(() => {
+  void configStore.loadPublicConfig()
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('scroll', onScroll)
+})
+</script>
+
+<template>
+  <header
+    class="sticky top-0 z-50 transition-[background-color,border-color,backdrop-filter] duration-200"
+    :class="ui.shell"
+  >
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 items-center justify-between gap-3 sm:gap-4">
+        <div class="flex min-w-0 items-center gap-3 sm:gap-6">
+          <RouterLink to="/" class="flex items-center gap-2 sm:gap-3">
+            <div
+              class="flex h-10 w-10 items-center justify-center rounded-xl"
+              :class="ui.brandMark"
+            >
+              <img :src="brand.brandLogoUrl" :alt="brand.brandName" class="h-6 w-6 rounded-xl object-contain" />
+            </div>
+            <div class="min-w-0">
+              <div class="truncate text-sm font-semibold tracking-[-0.02em]" :class="ui.brandText">
+                {{ brand.brandName }}
+              </div>
+              <div class="hidden truncate text-xs sm:block" :class="ui.brandSubtext">
+                {{ brand.brandSubtitle }}
+              </div>
+            </div>
+          </RouterLink>
+
+          <nav class="hidden items-center gap-1 md:flex">
+            <RouterLink
+              v-for="item in navigation"
+              :key="item.to"
+              :to="item.to"
+              class="rounded-full px-4 py-2 text-sm font-medium tracking-[-0.01em] transition-colors duration-150"
+              :class="isActive(item.to)
+                ? ui.navActive
+                : ui.navIdle"
+            >
+              {{ item.label }}
+            </RouterLink>
+          </nav>
+        </div>
+
+        <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
+          <button
+            class="group relative rounded-full p-2.5 transition-colors duration-150"
+            :class="ui.iconButton"
+            :title="getThemeTooltip()"
+            :aria-label="t('nav.toggleTheme')"
+            @click="themeStore.toggleTheme"
+          >
+            <svg v-if="themeStore.mode === 'dark'" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+            <svg v-else-if="themeStore.mode === 'light'" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+            <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </button>
+
+          <div ref="langMenuRef" class="relative">
+            <button
+              class="rounded-full px-3 py-2 text-xs font-semibold transition-colors duration-150 sm:px-3.5"
+              :class="ui.iconButton"
+              :aria-label="t('nav.toggleLanguage')"
+              @click.stop="toggleLangMenu"
+            >
+              {{ currentLocaleShort() }}
+            </button>
+
+            <Transition
+              enter-active-class="transition ease-out duration-100"
+              enter-from-class="transform opacity-0 scale-95"
+              enter-to-class="transform opacity-100 scale-100"
+              leave-active-class="transition ease-in duration-75"
+              leave-from-class="transform opacity-100 scale-100"
+              leave-to-class="transform opacity-0 scale-95"
+            >
+              <div
+                v-if="langMenuOpen"
+                class="absolute right-0 mt-2 w-36 overflow-hidden rounded-[24px] border p-1 shadow-xl"
+                :class="ui.menuPanel"
+              >
+                <button
+                  v-for="lang in supportedLocales"
+                  :key="lang.code"
+                  class="flex w-full items-center justify-between rounded-[18px] px-3 py-2 text-sm transition-[background-color,color]"
+                  :class="locale === lang.code
+                    ? ui.menuActive
+                    : ui.menuIdle"
+                  @click="changeLocale(lang.code)"
+                >
+                  <span>{{ lang.name }}</span>
+                  <svg v-if="locale === lang.code" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </button>
+              </div>
+            </Transition>
+          </div>
+
+          <button
+            class="inline-flex h-10 min-w-0 shrink-0 items-center gap-1.5 rounded-full px-5 text-sm font-medium tracking-[0.01em] transition-[background-color,box-shadow] duration-150 sm:gap-2"
+            :class="ui.cta"
+            @click="handlePrimaryAction"
+          >
+            <span class="sm:hidden">{{ primaryActionCompactLabel }}</span>
+            <span class="hidden sm:inline">{{ primaryActionLabel }}</span>
+            <svg class="hidden h-4 w-4 sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5l6 6m0 0l-6 6m6-6h-15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <nav class="flex items-center gap-2 overflow-x-auto pb-3 md:hidden">
+        <RouterLink
+          v-for="item in navigation"
+          :key="item.to"
+          :to="item.to"
+          class="inline-flex min-w-0 items-center rounded-full px-3.5 py-2 text-xs font-semibold transition-colors duration-150"
+          :class="isActive(item.to)
+            ? ui.mobileActive
+            : ui.mobileIdle"
+        >
+          {{ item.compactLabel }}
+        </RouterLink>
+      </nav>
+    </div>
+  </header>
+</template>
diff --git a/client/src/components/public/PublicSiteLayout.vue b/client/src/components/public/PublicSiteLayout.vue
new file mode 100644
index 0000000..8897e37
--- /dev/null
+++ b/client/src/components/public/PublicSiteLayout.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useThemeStore } from '@/stores/theme'
+import PublicSiteFooter from '@/components/public/PublicSiteFooter.vue'
+import PublicSiteHeader from '@/components/public/PublicSiteHeader.vue'
+
+const route = useRoute()
+const themeStore = useThemeStore()
+
+const authRouteNames = new Set(['login', 'register', 'forgot-password'])
+
+const isAuthPage = computed(() => authRouteNames.has(String(route.name || '')))
+</script>
+
+<template>
+  <div
+    class="flex min-h-screen flex-col"
+    :class="themeStore.isDark
+      ? 'bg-[#111418] text-[#e3e2e6] selection:bg-[#a8c7fa]/30'
+      : 'bg-[#fcfcfd] text-[#1a1b20] selection:bg-[#d3e3fd]'"
+  >
+    <div
+      class="pointer-events-none absolute inset-x-0 top-0 h-[34rem]"
+      :class="themeStore.isDark
+        ? 'bg-[linear-gradient(180deg,rgba(26,44,82,0.55)_0%,rgba(26,44,82,0.25)_45%,rgba(17,20,24,0)_100%)]'
+        : 'bg-[linear-gradient(180deg,rgba(211,227,253,0.7)_0%,rgba(223,235,254,0.35)_45%,rgba(252,252,253,0)_100%)]'"
+    ></div>
+
+    <PublicSiteHeader />
+
+    <main class="relative flex flex-1 flex-col">
+      <div
+        v-if="isAuthPage"
+        class="mx-auto flex w-full max-w-7xl flex-1 items-center justify-center px-4 py-10 sm:px-6 sm:py-14 lg:px-8"
+      >
+        <slot />
+      </div>
+      <slot v-else />
+    </main>
+
+    <PublicSiteFooter v-if="!isAuthPage" />
+  </div>
+</template>
diff --git a/client/src/components/terminal/TerminalSavedCommandsSidebar.vue b/client/src/components/terminal/TerminalSavedCommandsSidebar.vue
new file mode 100644
index 0000000..f395d1e
--- /dev/null
+++ b/client/src/components/terminal/TerminalSavedCommandsSidebar.vue
@@ -0,0 +1,448 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import type { TerminalSavedCommand } from '@/types/api'
+
+const props = withDefaults(defineProps<{
+  connected: boolean
+  mobile?: boolean
+  visible?: boolean
+}>(), {
+  mobile: false,
+  visible: true
+})
+
+const emit = defineEmits<{
+  (e: 'execute', command: string): void
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+const expanded = ref(true)
+const loading = ref(false)
+const saving = ref(false)
+const deleting = ref(false)
+const showEditor = ref(false)
+const editingId = ref<number | null>(null)
+const commands = ref<TerminalSavedCommand[]>([])
+const selectedId = ref<number | null>(null)
+
+const form = ref({
+  name: '',
+  command: '',
+  description: ''
+})
+
+const selectedCommand = computed(() =>
+  commands.value.find(command => command.id === selectedId.value) || null
+)
+
+const isEditing = computed(() => editingId.value !== null)
+const canSubmit = computed(() => form.value.name.trim().length > 0 && form.value.command.trim().length > 0)
+const commandCount = computed(() => commands.value.length)
+const shouldRender = computed(() => !props.mobile || props.visible)
+
+function sortCommands(list: TerminalSavedCommand[]): TerminalSavedCommand[] {
+  return [...list].sort((a, b) => {
+    const diff = new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    if (diff !== 0) return diff
+    return b.id - a.id
+  })
+}
+
+function getCommandPreview(command: string): string {
+  const compact = command.replace(/\s+/g, ' ').trim()
+  if (compact.length <= 84) return compact
+  return `${compact.slice(0, 84)}...`
+}
+
+function ensureSelection() {
+  if (commands.value.length === 0) {
+    selectedId.value = null
+    return
+  }
+
+  if (selectedId.value && commands.value.some(command => command.id === selectedId.value)) {
+    return
+  }
+
+  selectedId.value = commands.value[0].id
+}
+
+function resetForm() {
+  form.value = {
+    name: '',
+    command: '',
+    description: ''
+  }
+  editingId.value = null
+}
+
+async function loadCommands() {
+  loading.value = true
+  try {
+    const response = await api.terminalSavedCommands.list()
+    commands.value = sortCommands(response.commands)
+    ensureSelection()
+  } catch (error: any) {
+    toast.error(error?.message || t('terminal.savedCommands.loadFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreateEditor() {
+  resetForm()
+  showEditor.value = true
+}
+
+function openEditEditor() {
+  if (!selectedCommand.value) return
+
+  editingId.value = selectedCommand.value.id
+  form.value = {
+    name: selectedCommand.value.name,
+    command: selectedCommand.value.command,
+    description: selectedCommand.value.description || ''
+  }
+  showEditor.value = true
+}
+
+function cancelEditor() {
+  showEditor.value = false
+  resetForm()
+}
+
+async function saveCommand() {
+  if (!canSubmit.value || saving.value) return
+
+  saving.value = true
+  try {
+    const payload = {
+      name: form.value.name.trim(),
+      command: form.value.command,
+      description: form.value.description.trim() || null
+    }
+
+    if (editingId.value) {
+      const response = await api.terminalSavedCommands.update(editingId.value, payload)
+      commands.value = sortCommands(commands.value.map(command =>
+        command.id === response.command.id ? response.command : command
+      ))
+      selectedId.value = response.command.id
+      toast.success(t('terminal.savedCommands.updateSuccess'))
+    } else {
+      const response = await api.terminalSavedCommands.create(payload)
+      commands.value = sortCommands([response.command, ...commands.value])
+      selectedId.value = response.command.id
+      toast.success(t('terminal.savedCommands.createSuccess'))
+    }
+
+    cancelEditor()
+  } catch (error: any) {
+    toast.error(error?.message || t('terminal.savedCommands.saveFailed'))
+  } finally {
+    saving.value = false
+  }
+}
+
+async function deleteSelectedCommand() {
+  if (!selectedCommand.value || deleting.value) return
+
+  const confirmed = window.confirm(
+    t('terminal.savedCommands.deleteConfirm', { name: selectedCommand.value.name })
+  )
+  if (!confirmed) return
+
+  deleting.value = true
+  try {
+    const targetId = selectedCommand.value.id
+    await api.terminalSavedCommands.delete(targetId)
+    commands.value = commands.value.filter(command => command.id !== targetId)
+    ensureSelection()
+    toast.success(t('terminal.savedCommands.deleteSuccess'))
+  } catch (error: any) {
+    toast.error(error?.message || t('terminal.savedCommands.deleteFailed'))
+  } finally {
+    deleting.value = false
+  }
+}
+
+function executeSelectedCommand() {
+  if (!props.connected || !selectedCommand.value) return
+  emit('execute', selectedCommand.value.command)
+  if (props.mobile) {
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  void loadCommands()
+})
+</script>
+
+<template>
+  <div
+    v-if="shouldRender"
+    class="relative h-full flex-shrink-0 overflow-visible transition-[width] duration-300 ease-out"
+    :class="props.mobile ? 'fixed inset-0 z-[90] flex items-end justify-center p-0' : ''"
+    :style="props.mobile ? undefined : { width: expanded ? '22rem' : '0px' }"
+  >
+    <div
+      v-if="props.mobile"
+      class="absolute inset-0 bg-black/60 backdrop-blur-sm"
+      @click="emit('close')"
+    />
+
+    <button
+      v-if="!props.mobile"
+      type="button"
+      class="absolute left-[-14px] top-1/2 z-20 flex h-11 w-7 -translate-y-1/2 items-center justify-center rounded-l-xl rounded-r-md border border-neutral-700 bg-neutral-900/95 text-neutral-300 shadow-lg transition-all duration-200 hover:bg-neutral-800 hover:text-white opacity-0 group-hover/terminal-workspace:opacity-100 focus:opacity-100"
+      :title="expanded ? t('terminal.savedCommands.collapse') : t('terminal.savedCommands.expand')"
+      @click="expanded = !expanded"
+    >
+      <svg class="h-4 w-4 transition-transform" :class="expanded ? '' : 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+
+    <div
+      class="bg-[linear-gradient(180deg,rgba(17,17,19,0.98),rgba(10,10,11,0.98))]"
+      :class="props.mobile
+        ? 'relative h-[78vh] w-full max-w-xl rounded-t-[28px] border border-neutral-800 shadow-2xl'
+        : ['h-full w-[22rem] border-l border-neutral-800 transition-all duration-300 ease-out', expanded ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0 pointer-events-none']"
+    >
+      <div class="flex h-full flex-col">
+        <div class="border-b border-neutral-800 px-4 py-4">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <div class="text-[11px] uppercase tracking-[0.22em] text-neutral-500">
+                {{ t('terminal.savedCommands.cloud') }}
+              </div>
+              <h3 class="mt-1 text-sm font-semibold text-white">
+                {{ t('terminal.savedCommands.title') }}
+              </h3>
+              <p class="mt-1 text-xs leading-5 text-neutral-400">
+                {{ t('terminal.savedCommands.subtitle') }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="inline-flex h-8 items-center gap-1 rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-xs font-medium text-neutral-200 transition-colors hover:border-neutral-500 hover:text-white"
+                @click="openCreateEditor"
+              >
+                <svg class="h-3.5 w-3.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>
+                {{ t('terminal.savedCommands.add') }}
+              </button>
+              <button
+                v-if="props.mobile"
+                type="button"
+                class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-900 text-neutral-300 transition-colors hover:border-neutral-500 hover:text-white"
+                :title="t('common.close')"
+                @click="emit('close')"
+              >
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="mt-3 flex items-center gap-2 text-xs text-neutral-500">
+            <span class="inline-flex items-center rounded-full border border-emerald-400/20 bg-emerald-400/10 px-2 py-0.5 text-emerald-200">
+              {{ t('terminal.savedCommands.synced') }}
+            </span>
+            <span class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2 py-0.5 text-sky-200">
+              {{ t('terminal.savedCommands.encrypted') }}
+            </span>
+            <span>{{ t('terminal.savedCommands.count', { count: commandCount }) }}</span>
+          </div>
+        </div>
+
+        <div class="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+          <div
+            v-if="showEditor"
+            class="mb-4 rounded-2xl border border-neutral-800 bg-neutral-950/80 p-4"
+          >
+            <div class="mb-3 flex items-center justify-between gap-3">
+              <div class="text-sm font-medium text-white">
+                {{ isEditing ? t('terminal.savedCommands.edit') : t('terminal.savedCommands.new') }}
+              </div>
+              <button
+                type="button"
+                class="rounded-md p-1 text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
+                :title="t('common.cancel')"
+                @click="cancelEditor"
+              >
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="space-y-3">
+              <div>
+                <label class="mb-1.5 block text-xs text-neutral-400">{{ t('terminal.savedCommands.name') }}</label>
+                <input
+                  v-model="form.name"
+                  type="text"
+                  maxlength="80"
+                  class="w-full rounded-xl border border-neutral-700 bg-neutral-900 px-3 py-2 text-sm text-white placeholder:text-neutral-500 focus:border-neutral-500 focus:outline-none"
+                  :placeholder="t('terminal.savedCommands.namePlaceholder')"
+                >
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-xs text-neutral-400">{{ t('terminal.savedCommands.command') }}</label>
+                <textarea
+                  v-model="form.command"
+                  rows="6"
+                  maxlength="16384"
+                  class="w-full resize-y rounded-xl border border-neutral-700 bg-neutral-900 px-3 py-2 font-mono text-xs leading-5 text-white placeholder:text-neutral-500 focus:border-neutral-500 focus:outline-none"
+                  :placeholder="t('terminal.savedCommands.commandPlaceholder')"
+                ></textarea>
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-xs text-neutral-400">{{ t('terminal.savedCommands.description') }}</label>
+                <input
+                  v-model="form.description"
+                  type="text"
+                  maxlength="300"
+                  class="w-full rounded-xl border border-neutral-700 bg-neutral-900 px-3 py-2 text-sm text-white placeholder:text-neutral-500 focus:border-neutral-500 focus:outline-none"
+                  :placeholder="t('terminal.savedCommands.descriptionPlaceholder')"
+                >
+              </div>
+
+              <div class="flex items-center justify-end gap-2 pt-1">
+                <button
+                  type="button"
+                  class="rounded-xl border border-neutral-700 px-3 py-2 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-500 hover:text-white"
+                  @click="cancelEditor"
+                >
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  type="button"
+                  class="rounded-xl bg-white px-3 py-2 text-xs font-medium text-black transition-colors hover:bg-neutral-200 disabled:cursor-not-allowed disabled:opacity-50"
+                  :disabled="!canSubmit || saving"
+                  @click="saveCommand"
+                >
+                  {{ saving ? t('common.saving') : t('common.save') }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="loading" class="flex items-center justify-center py-12">
+            <div class="flex items-center gap-2 text-sm text-neutral-400">
+              <div class="h-4 w-4 rounded-full border border-neutral-600 border-t-white animate-spin" />
+              {{ t('common.loading') }}
+            </div>
+          </div>
+
+          <div
+            v-else-if="commands.length === 0"
+            class="rounded-2xl border border-dashed border-neutral-800 bg-neutral-950/50 px-4 py-12 text-center"
+          >
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-neutral-800 bg-neutral-900 text-neutral-500">
+              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <div class="mt-4 text-sm font-medium text-white">{{ t('terminal.savedCommands.emptyTitle') }}</div>
+            <p class="mt-2 text-xs leading-5 text-neutral-500">{{ t('terminal.savedCommands.emptyDescription') }}</p>
+          </div>
+
+          <div v-else class="space-y-2.5">
+            <button
+              v-for="command in commands"
+              :key="command.id"
+              type="button"
+              class="w-full rounded-2xl border p-3 text-left transition-all"
+              :class="selectedId === command.id
+                ? 'border-sky-400/45 bg-sky-400/10'
+                : 'border-neutral-800 bg-neutral-950/60 hover:border-neutral-700 hover:bg-neutral-900/80'"
+              @click="selectedId = command.id"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center gap-2">
+                    <span class="h-2 w-2 flex-shrink-0 rounded-full" :class="selectedId === command.id ? 'bg-sky-300' : 'bg-neutral-600'" />
+                    <span class="truncate text-sm font-medium text-white">{{ command.name }}</span>
+                  </div>
+                  <p
+                    v-if="command.description"
+                    class="mt-2 line-clamp-2 text-xs leading-5 text-neutral-400"
+                  >
+                    {{ command.description }}
+                  </p>
+                  <div class="mt-2 overflow-hidden break-all rounded-xl border border-neutral-800 bg-black/30 px-2.5 py-2 font-mono text-[11px] leading-5 text-neutral-300">
+                    {{ getCommandPreview(command.command) }}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  class="rounded-lg p-1.5 text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
+                  :title="t('common.edit')"
+                  @click.stop="selectedId = command.id; openEditEditor()"
+                >
+                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.586-7.414a2 2 0 112.828 2.828L11.828 16.242a4 4 0 01-1.414.943L7 18l.815-3.414a4 4 0 01.943-1.414l8.656-8.586z" />
+                  </svg>
+                </button>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <div class="border-t border-neutral-800 px-4 py-4">
+          <div class="mb-3 text-xs text-neutral-500">
+            <template v-if="selectedCommand">
+              {{ t('terminal.savedCommands.selected', { name: selectedCommand.name }) }}
+            </template>
+            <template v-else>
+              {{ t('terminal.savedCommands.notSelected') }}
+            </template>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center gap-1 rounded-xl bg-white px-3 py-2.5 text-xs font-medium text-black transition-colors hover:bg-neutral-200 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="!selectedCommand || !connected"
+              @click="executeSelectedCommand"
+            >
+              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.197-3.03A1 1 0 008 9v6a1 1 0 001.555.832l5.197-3.03a1 1 0 000-1.664z" />
+              </svg>
+              {{ t('terminal.savedCommands.execute') }}
+            </button>
+            <button
+              type="button"
+              class="inline-flex items-center justify-center gap-1 rounded-xl border border-red-500/25 bg-red-500/10 px-3 py-2.5 text-xs font-medium text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="!selectedCommand || deleting"
+              @click="deleteSelectedCommand"
+            >
+              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+              {{ t('common.delete') }}
+            </button>
+          </div>
+
+          <p class="mt-3 text-[11px] leading-5 text-neutral-500">
+            {{ connected ? t('terminal.savedCommands.runHint') : t('terminal.savedCommands.disconnectedHint') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/tickets/TicketImageLightbox.vue b/client/src/components/tickets/TicketImageLightbox.vue
new file mode 100644
index 0000000..4814786
--- /dev/null
+++ b/client/src/components/tickets/TicketImageLightbox.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+interface LightboxImage {
+  id: number
+  src: string
+  alt: string
+}
+
+const props = defineProps<{
+  show: boolean
+  images: LightboxImage[]
+  startIndex: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+const currentIndex = ref(0)
+const zoom = ref(1)
+const touchStartX = ref<number | null>(null)
+
+const currentImage = computed(() => props.images[currentIndex.value] ?? null)
+
+function resetZoom(): void {
+  zoom.value = 1
+}
+
+function closeLightbox(): void {
+  emit('close')
+}
+
+function goTo(index: number): void {
+  if (props.images.length === 0) return
+  const wrappedIndex = (index + props.images.length) % props.images.length
+  currentIndex.value = wrappedIndex
+  resetZoom()
+}
+
+function goNext(): void {
+  goTo(currentIndex.value + 1)
+}
+
+function goPrevious(): void {
+  goTo(currentIndex.value - 1)
+}
+
+function zoomIn(): void {
+  zoom.value = Math.min(zoom.value + 0.25, 4)
+}
+
+function zoomOut(): void {
+  zoom.value = Math.max(zoom.value - 0.25, 1)
+}
+
+function handleWheel(event: WheelEvent): void {
+  if (event.deltaY < 0) {
+    zoomIn()
+  } else {
+    zoomOut()
+  }
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (!props.show) return
+
+  if (event.key === 'Escape') {
+    closeLightbox()
+  } else if (event.key === 'ArrowRight') {
+    goNext()
+  } else if (event.key === 'ArrowLeft') {
+    goPrevious()
+  } else if (event.key === '+') {
+    zoomIn()
+  } else if (event.key === '-') {
+    zoomOut()
+  }
+}
+
+function handleTouchStart(event: TouchEvent): void {
+  touchStartX.value = event.changedTouches[0]?.clientX ?? null
+}
+
+function handleTouchEnd(event: TouchEvent): void {
+  const endX = event.changedTouches[0]?.clientX ?? null
+  if (touchStartX.value === null || endX === null) {
+    touchStartX.value = null
+    return
+  }
+
+  const deltaX = endX - touchStartX.value
+  if (Math.abs(deltaX) > 50) {
+    if (deltaX < 0) {
+      goNext()
+    } else {
+      goPrevious()
+    }
+  }
+  touchStartX.value = null
+}
+
+watch(() => props.show, show => {
+  if (show) {
+    currentIndex.value = Math.min(Math.max(props.startIndex, 0), Math.max(props.images.length - 1, 0))
+    resetZoom()
+    window.addEventListener('keydown', handleKeydown)
+    return
+  }
+
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+watch(() => props.startIndex, value => {
+  if (props.show) {
+    currentIndex.value = Math.min(Math.max(value, 0), Math.max(props.images.length - 1, 0))
+    resetZoom()
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <Transition name="modal">
+    <div
+      v-if="show"
+      class="fixed inset-0 z-[80] flex flex-col bg-black/90"
+      @click.self="closeLightbox"
+    >
+      <div class="flex items-center justify-between gap-3 px-4 py-3 text-white">
+        <div class="text-sm">
+          {{ currentIndex + 1 }} / {{ images.length }}
+        </div>
+        <div class="flex items-center gap-2">
+          <button type="button" class="rounded-lg bg-white/10 px-3 py-2 text-sm hover:bg-white/20" :title="t('tickets.images.zoomOut')" @click="zoomOut">
+            -
+          </button>
+          <button type="button" class="rounded-lg bg-white/10 px-3 py-2 text-sm hover:bg-white/20" :title="t('tickets.images.resetZoom')" @click="resetZoom">
+            100%
+          </button>
+          <button type="button" class="rounded-lg bg-white/10 px-3 py-2 text-sm hover:bg-white/20" :title="t('tickets.images.zoomIn')" @click="zoomIn">
+            +
+          </button>
+          <button type="button" class="rounded-lg bg-white/10 px-3 py-2 text-sm hover:bg-white/20" :title="t('common.close')" @click="closeLightbox">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="relative flex flex-1 items-center justify-center overflow-hidden px-4 pb-4" @wheel.prevent="handleWheel">
+        <button
+          v-if="images.length > 1"
+          type="button"
+          class="absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white hover:bg-white/20"
+          :title="t('common.previous')"
+          @click.stop="goPrevious"
+        >
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+
+        <div
+          class="flex h-full w-full items-center justify-center overflow-hidden"
+          @touchstart.passive="handleTouchStart"
+          @touchend.passive="handleTouchEnd"
+        >
+          <img
+            v-if="currentImage"
+            :src="currentImage.src"
+            :alt="currentImage.alt"
+            class="max-h-full max-w-full select-none object-contain transition-transform duration-200"
+            :style="{ transform: `scale(${zoom})` }"
+            draggable="false"
+          >
+        </div>
+
+        <button
+          v-if="images.length > 1"
+          type="button"
+          class="absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white hover:bg-white/20"
+          :title="t('common.next')"
+          @click.stop="goNext"
+        >
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+
+      <div v-if="images.length > 1" class="flex gap-2 overflow-x-auto px-4 pb-4">
+        <button
+          v-for="(image, index) in images"
+          :key="image.id"
+          type="button"
+          class="h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-colors"
+          :class="index === currentIndex ? 'border-white' : 'border-transparent opacity-70'"
+          @click="goTo(index)"
+        >
+          <img :src="image.src" :alt="image.alt" class="h-full w-full object-cover">
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>
diff --git a/client/src/components/tickets/TicketImageUploader.vue b/client/src/components/tickets/TicketImageUploader.vue
new file mode 100644
index 0000000..2b93d71
--- /dev/null
+++ b/client/src/components/tickets/TicketImageUploader.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from '@/stores/toast'
+
+const props = withDefaults(defineProps<{
+  modelValue: File[]
+  disabled?: boolean
+  maxFiles?: number
+}>(), {
+  disabled: false,
+  maxFiles: 6
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: File[]): void
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const inputRef = ref<HTMLInputElement | null>(null)
+const previewUrls = ref<string[]>([])
+
+const ACCEPTED_IMAGE_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/gif',
+  'image/avif'
+])
+const MAX_FILE_SIZE = 50 * 1024 * 1024
+
+function revokePreviewUrls(): void {
+  for (const url of previewUrls.value) {
+    URL.revokeObjectURL(url)
+  }
+  previewUrls.value = []
+}
+
+watch(() => props.modelValue, files => {
+  revokePreviewUrls()
+  previewUrls.value = files.map(file => URL.createObjectURL(file))
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  revokePreviewUrls()
+})
+
+const remainingSlots = computed(() => Math.max(props.maxFiles - props.modelValue.length, 0))
+
+function openPicker(): void {
+  inputRef.value?.click()
+}
+
+function formatFileSize(size: number): string {
+  if (size < 1024 * 1024) {
+    return `${Math.max(1, Math.round(size / 1024))} KB`
+  }
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function removeFile(index: number): void {
+  const nextFiles = [...props.modelValue]
+  nextFiles.splice(index, 1)
+  emit('update:modelValue', nextFiles)
+}
+
+function handleFileChange(event: Event): void {
+  const target = event.target as HTMLInputElement
+  const selectedFiles = Array.from(target.files || [])
+  if (selectedFiles.length === 0) {
+    return
+  }
+
+  const nextFiles = [...props.modelValue]
+
+  for (const file of selectedFiles) {
+    if (nextFiles.length >= props.maxFiles) {
+      toast.error(t('tickets.images.maxReached', { count: props.maxFiles }))
+      break
+    }
+    if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {
+      toast.error(t('tickets.images.invalidType'))
+      continue
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      toast.error(t('tickets.images.fileTooLarge', { size: 50 }))
+      continue
+    }
+    nextFiles.push(file)
+  }
+
+  emit('update:modelValue', nextFiles)
+  target.value = ''
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between gap-3">
+      <div>
+        <p class="text-sm font-medium text-gray-900 dark:text-white">
+          {{ t('tickets.images.label') }}
+        </p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">
+          {{ t('tickets.images.hint', { count: props.maxFiles, size: 50 }) }}
+        </p>
+      </div>
+      <button
+        type="button"
+        class="px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        :disabled="props.disabled || remainingSlots === 0"
+        @click="openPicker"
+      >
+        {{ t('tickets.images.add') }}
+      </button>
+      <input
+        ref="inputRef"
+        type="file"
+        hidden
+        multiple
+        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+        :disabled="props.disabled"
+        @change="handleFileChange"
+      >
+    </div>
+
+    <div v-if="props.modelValue.length > 0" class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+      <div
+        v-for="(file, index) in props.modelValue"
+        :key="`${file.name}-${file.size}-${index}`"
+        class="group relative rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"
+      >
+        <img
+          :src="previewUrls[index]"
+          :alt="file.name"
+          class="h-32 w-full object-cover"
+        >
+        <button
+          type="button"
+          class="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-black/70 text-white opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100"
+          :title="t('tickets.images.remove')"
+          @click="removeFile(index)"
+        >
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+        <div class="space-y-1 p-2">
+          <p class="truncate text-xs font-medium text-gray-900 dark:text-white">
+            {{ file.name }}
+          </p>
+          <p class="text-xs text-gray-500 dark:text-gray-400">
+            {{ formatFileSize(file.size) }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <p v-if="props.modelValue.length > 0" class="text-xs text-gray-500 dark:text-gray-400">
+      {{ t('tickets.images.selected', { count: props.modelValue.length, max: props.maxFiles }) }}
+    </p>
+  </div>
+</template>
diff --git a/client/src/components/tickets/TicketInstanceOwnerCard.vue b/client/src/components/tickets/TicketInstanceOwnerCard.vue
new file mode 100644
index 0000000..8d6789d
--- /dev/null
+++ b/client/src/components/tickets/TicketInstanceOwnerCard.vue
@@ -0,0 +1,874 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import api from '@/api'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+import TerminalModal from '@/components/instance/TerminalModal.vue'
+import { useToast } from '@/stores/toast'
+import type { InstanceConfigResponse, InstanceWithDetails } from '@/types/api'
+import { translateError } from '@/utils/errorHandler'
+import { formatBytes, formatDisk, formatMemory, getStatusInfo } from '@/utils/formatters'
+
+interface TicketInstanceSummary {
+  id: number
+  name: string
+  status?: string
+  iconBadgeId?: string | null
+  incusId?: string | null
+  ipv4?: string | null
+  ipv6?: string | null
+  cpu?: number
+  memory?: number
+  disk?: number
+  image?: string
+  imageName?: string | null
+  packageName?: string | null
+}
+
+interface InstanceTask {
+  id: number
+  taskType: string
+  status: string
+  progress?: string | null
+  error?: string | null
+  queuePosition: number
+}
+
+interface TicketCardStats {
+  memory: {
+    usage: number
+    limit: number
+    usagePercent: number
+  }
+  disk: {
+    usage: number
+    limit: number
+    usagePercent: number
+  }
+  network: {
+    bytesReceived: number
+    bytesSent: number
+  }
+}
+
+type ActionType = 'start' | 'stop' | 'restart' | 'sync' | 'suspend' | 'unsuspend' | 'delete' | ''
+
+const props = defineProps<{
+  instanceSummary: TicketInstanceSummary
+}>()
+
+const { t, te } = useI18n()
+const router = useRouter()
+const toast = useToast()
+
+const instance = ref<InstanceWithDetails | null>(null)
+const detailConfig = ref<InstanceConfigResponse | null>(null)
+const stats = ref<TicketCardStats | null>(null)
+const activeTask = ref<InstanceTask | null>(null)
+const loading = ref(false)
+const detailError = ref('')
+const actionLoading = ref<ActionType>('')
+const optimisticStatus = ref<string | null>(null)
+const showDetails = ref(false)
+
+const showTerminalModal = ref(false)
+const terminalForceDisconnect = ref(false)
+
+let refreshInterval: ReturnType<typeof setInterval> | null = null
+let statsInterval: ReturnType<typeof setInterval> | null = null
+let taskPollingInterval: ReturnType<typeof setInterval> | null = null
+let latestRequestId = 0
+
+const mergedInstance = computed(() => {
+  return {
+    ...props.instanceSummary,
+    ...(instance.value ?? {})
+  } as TicketInstanceSummary & Partial<InstanceWithDetails> & { incusId?: string | null }
+})
+
+const displayStatus = computed(() => optimisticStatus.value || mergedInstance.value.status || 'stopped')
+const statusInfo = computed(() => getStatusInfo(displayStatus.value, t))
+const networkMode = computed(() => {
+  const mode = (mergedInstance.value.network_mode || (mergedInstance.value as { networkMode?: string }).networkMode || null) as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat' | null
+  return mode
+})
+const networkModeLabel = computed(() => {
+  if (!networkMode.value) return '-'
+  const key = `common.networkMode.${networkMode.value}`
+  return te(key) ? t(key) : networkMode.value
+})
+const instanceType = computed(() => {
+  const type = ((mergedInstance.value as { instanceType?: 'container' | 'vm'; instance_type?: 'container' | 'vm' }).instanceType
+    || (mergedInstance.value as { instance_type?: 'container' | 'vm' }).instance_type
+    || null)
+  if (!type) return '-'
+  const key = `common.instanceType.${type}`
+  return te(key) ? t(key) : type
+})
+const imageLabel = computed(() => {
+  return mergedInstance.value.imageName || mergedInstance.value.image?.replace(/^images:/, '') || '-'
+})
+const planLabel = computed(() => {
+  return (mergedInstance.value as { planName?: string | null }).planName || mergedInstance.value.packageName || '-'
+})
+const priceLabel = computed(() => {
+  const price = Number((mergedInstance.value as { billingPrice?: number | null }).billingPrice)
+  return Number.isFinite(price) && price > 0 ? `¥${price.toFixed(2)}` : null
+})
+const displayIp = computed(() => ({
+  ipv4: mergedInstance.value.ipv4 || null,
+  ipv6: ['nat_ipv6', 'ipv6_only'].includes(networkMode.value || '') ? mergedInstance.value.ipv6 || null : null
+}))
+const isRunning = computed(() => displayStatus.value.toLowerCase() === 'running')
+const isSuspended = computed(() => displayStatus.value.toLowerCase() === 'suspended')
+const isDeleted = computed(() => displayStatus.value.toLowerCase() === 'deleted')
+const hasActiveTask = computed(() => !!activeTask.value && !['COMPLETED', 'FAILED'].includes(activeTask.value.status))
+const isBusy = computed(() => loading.value || actionLoading.value !== '' || hasActiveTask.value)
+const canStart = computed(() => !!instance.value && !isBusy.value && !isRunning.value && !isSuspended.value && !isDeleted.value)
+const canStop = computed(() => !!instance.value && !isBusy.value && isRunning.value)
+const canRestart = computed(() => !!instance.value && !isBusy.value && isRunning.value)
+const hasSyncPermission = computed(() => {
+  const inst = instance.value
+  return !!inst && (inst.isHostOwner === true || inst.isInstanceOwner === true)
+})
+const canSync = computed(() => hasSyncPermission.value && actionLoading.value !== 'sync' && !loading.value)
+const canOpenTerminal = computed(() => !!instance.value && isRunning.value && !isDeleted.value)
+const canSuspend = computed(() => !!instance.value && !isBusy.value && !isSuspended.value && !isDeleted.value)
+const canUnsuspend = computed(() => !!instance.value && !isBusy.value && isSuspended.value)
+const canDeleteWithRefund = computed(() => !!instance.value && !isBusy.value && !isDeleted.value && instance.value.isHostOwner === true)
+const hostName = computed(() => (mergedInstance.value as { host?: { name?: string | null } }).host?.name || '-')
+const expiryValue = computed(() => ((mergedInstance.value as { expires_at?: string | null }).expires_at || null))
+const detailToggleLabel = computed(() => `${showDetails.value ? t('common.collapse') : t('common.expand')} ${t('common.details')}`)
+
+const activeTaskLabel = computed(() => {
+  const taskType = activeTask.value?.taskType
+  if (!taskType) return '-'
+  const key = `instance.detail.actions.${taskType}`
+  return te(key) ? t(key) : taskType
+})
+
+const activeTaskHint = computed(() => {
+  if (!activeTask.value) return ''
+  if (activeTask.value.progress) return activeTask.value.progress
+  if (activeTask.value.queuePosition > 0) {
+    return t('instance.detail.task.queuePosition', { position: activeTask.value.queuePosition })
+  }
+  return activeTask.value.status
+})
+
+const memoryUsagePercent = computed(() => {
+  return stats.value ? Math.min(Math.max(stats.value.memory.usagePercent || 0, 0), 100) : 0
+})
+const diskUsagePercent = computed(() => {
+  return stats.value ? Math.min(Math.max(stats.value.disk.usagePercent || 0, 0), 100) : 0
+})
+
+function normalizeInstanceResponse(payload: unknown): InstanceWithDetails | null {
+  const wrapped = payload as { instance?: InstanceWithDetails } | null
+  if (wrapped?.instance) return wrapped.instance
+  return (payload as InstanceWithDetails | null) ?? null
+}
+
+function clearRefreshInterval(): void {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+}
+
+function clearStatsInterval(): void {
+  if (statsInterval) {
+    clearInterval(statsInterval)
+    statsInterval = null
+  }
+}
+
+function clearTaskPollingInterval(): void {
+  if (taskPollingInterval) {
+    clearInterval(taskPollingInterval)
+    taskPollingInterval = null
+  }
+}
+
+function formatDateTime(value?: string | null): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleString()
+}
+
+function formatBooleanValue(value?: boolean | null): string {
+  if (value === null || value === undefined) return '-'
+  return value ? t('common.enabled') : t('common.disabled')
+}
+
+function getMetricBarClass(percent: number): string {
+  if (percent >= 90) return 'bg-red-500'
+  if (percent >= 70) return 'bg-amber-500'
+  return 'bg-emerald-500'
+}
+
+function getSwapDisplay(): string {
+  if (!detailConfig.value?.swap.available) return '-'
+  if (!detailConfig.value.swap.enabled) return t('common.disabled')
+  return `${formatMemory(detailConfig.value.swap.sizeMb)}`
+}
+
+function getQuotaLimit(key: 'port' | 'snapshot' | 'backup' | 'site'): number | null {
+  const detailLimit = mergedInstance.value.effective_quota_limit?.[key]
+  if (detailLimit !== undefined && detailLimit !== null) {
+    return detailLimit
+  }
+
+  if (key === 'port') return mergedInstance.value.port_limit ?? 20
+  if (key === 'snapshot') return mergedInstance.value.snapshot_limit ?? 5
+  if (key === 'backup') return mergedInstance.value.backup_limit ?? 3
+  return mergedInstance.value.site_limit ?? null
+}
+
+function getQuotaUsage(key: 'port' | 'snapshot' | 'backup' | 'site'): number | null {
+  const detailUsage = mergedInstance.value.quota_usage?.[key]
+  if (detailUsage !== undefined && detailUsage !== null) {
+    return detailUsage
+  }
+
+  const limit = getQuotaLimit(key)
+  const remaining = mergedInstance.value.remaining_quota?.[key]
+  if (limit === null || limit === undefined || remaining === null || remaining === undefined) {
+    return null
+  }
+  if (limit === 0) {
+    return null
+  }
+  return Math.max(0, limit - remaining)
+}
+
+function formatQuotaPair(used: number | null, limit: number | null): string {
+  if (used === null || used === undefined || limit === null || limit === undefined) {
+    return '-'
+  }
+  if (limit === 0) {
+    return `${used} / ∞`
+  }
+  return `${used} / ${limit}`
+}
+
+const quotaCards = computed(() => [
+  { key: 'port', label: t('host.batchConfig.portLimit'), value: formatQuotaPair(getQuotaUsage('port'), getQuotaLimit('port')) },
+  { key: 'snapshot', label: t('host.batchConfig.snapshotLimit'), value: formatQuotaPair(getQuotaUsage('snapshot'), getQuotaLimit('snapshot')) },
+  { key: 'site', label: t('host.batchConfig.siteLimit'), value: formatQuotaPair(getQuotaUsage('site'), getQuotaLimit('site')) },
+  { key: 'backup', label: t('host.batchConfig.backupLimit'), value: formatQuotaPair(getQuotaUsage('backup'), getQuotaLimit('backup')) }
+])
+
+const expirySummary = computed(() => {
+  if (!expiryValue.value) return t('billing.neverExpires')
+  const date = new Date(expiryValue.value)
+  if (Number.isNaN(date.getTime())) return '-'
+
+  const dateLabel = date.toLocaleDateString()
+  const diffDays = Math.ceil((date.getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+
+  if (diffDays < 0) {
+    return `${t('billing.expired')} · ${dateLabel}`
+  }
+
+  return `${diffDays}${t('common.days')} · ${dateLabel}`
+})
+
+function normalizeStatsResponse(payload: unknown): { stats: TicketCardStats | null; status: string | null } {
+  const wrapped = payload as { stats?: Partial<TicketCardStats>; status?: string } | null
+  const flat = payload as Partial<TicketCardStats> & { status?: string } | null
+  const rawStats = wrapped?.stats || (flat?.memory && flat?.disk && flat?.network ? flat : null)
+  const nextStats = rawStats ? {
+    memory: {
+      usage: rawStats.memory?.usage ?? 0,
+      limit: rawStats.memory?.limit ?? 0,
+      usagePercent: rawStats.memory?.usagePercent ?? 0
+    },
+    disk: {
+      usage: rawStats.disk?.usage ?? 0,
+      limit: rawStats.disk?.limit ?? 0,
+      usagePercent: rawStats.disk?.usagePercent ?? 0
+    },
+    network: {
+      bytesReceived: rawStats.network?.bytesReceived ?? 0,
+      bytesSent: rawStats.network?.bytesSent ?? 0
+    }
+  } : null
+
+  return {
+    stats: nextStats,
+    status: wrapped?.status || flat?.status || null
+  }
+}
+
+function startRefreshPolling(): void {
+  clearRefreshInterval()
+  if (!props.instanceSummary.id || !instance.value) return
+
+  refreshInterval = setInterval(() => {
+    if (!hasActiveTask.value) {
+      void loadInstanceContext(true)
+    }
+  }, 15000)
+}
+
+function syncStatsPolling(): void {
+  clearStatsInterval()
+  if (!props.instanceSummary.id || !instance.value || !isRunning.value) return
+
+  statsInterval = setInterval(() => {
+    void loadStats(true)
+  }, 3000)
+}
+
+async function loadStats(silent = true): Promise<void> {
+  if (!props.instanceSummary.id || !instance.value || !isRunning.value) {
+    stats.value = null
+    return
+  }
+
+  try {
+    const response = await api.instances.getStats(props.instanceSummary.id)
+    const { stats: nextStats, status: nextStatus } = normalizeStatsResponse(response)
+    stats.value = nextStats
+
+    if (nextStatus && instance.value) {
+      instance.value.status = nextStatus.toLowerCase() as InstanceWithDetails['status']
+    }
+  } catch (error) {
+    if (!silent) {
+      toast.error(`${t('common.loadFailed')}: ${translateError(error)}`)
+    }
+  }
+}
+
+async function pollActiveTask(): Promise<void> {
+  const instanceId = props.instanceSummary.id
+  if (!instanceId) {
+    clearTaskPollingInterval()
+    return
+  }
+
+  try {
+    const response = await api.instances.getActiveTask(instanceId)
+    const nextTask = response.task
+    activeTask.value = nextTask
+
+    if (!nextTask || nextTask.status === 'COMPLETED' || nextTask.status === 'FAILED') {
+      clearTaskPollingInterval()
+      if (nextTask?.status === 'FAILED' && nextTask.error) {
+        toast.error(`${t('instance.detail.actions.actionFailed')}: ${nextTask.error}`)
+      }
+      optimisticStatus.value = null
+      await loadInstanceContext(true)
+    }
+  } catch {
+    clearTaskPollingInterval()
+  }
+}
+
+function startTaskPolling(): void {
+  clearTaskPollingInterval()
+  taskPollingInterval = setInterval(() => {
+    void pollActiveTask()
+  }, 2000)
+}
+
+async function loadInstanceContext(silent = false): Promise<void> {
+  const instanceId = props.instanceSummary.id
+  if (!instanceId) return
+
+  const requestId = ++latestRequestId
+
+  if (!silent) {
+    loading.value = true
+  }
+
+  detailError.value = ''
+
+  const [detailResult, configResult, taskResult] = await Promise.allSettled([
+    api.instances.get(instanceId),
+    api.instances.getConfig(instanceId),
+    api.instances.getActiveTask(instanceId)
+  ])
+
+  if (requestId !== latestRequestId) return
+
+  if (detailResult.status === 'fulfilled') {
+    instance.value = normalizeInstanceResponse(detailResult.value)
+    optimisticStatus.value = null
+  } else {
+    instance.value = null
+    detailError.value = translateError(detailResult.reason)
+  }
+
+  detailConfig.value = configResult.status === 'fulfilled' ? configResult.value : null
+  activeTask.value = taskResult.status === 'fulfilled' ? taskResult.value.task : null
+
+  if (instance.value && instance.value.status?.toLowerCase() === 'running') {
+    await loadStats(true)
+  } else {
+    stats.value = null
+  }
+
+  if (activeTask.value && !['COMPLETED', 'FAILED'].includes(activeTask.value.status)) {
+    startTaskPolling()
+  } else {
+    clearTaskPollingInterval()
+  }
+
+  syncStatsPolling()
+  startRefreshPolling()
+  loading.value = false
+}
+
+async function handleInstanceAction(action: 'start' | 'stop' | 'restart'): Promise<void> {
+  if (!instance.value) return
+
+  actionLoading.value = action
+  try {
+    const response = action === 'start'
+      ? await api.instances.start(instance.value.id)
+      : action === 'stop'
+        ? await api.instances.stop(instance.value.id)
+        : await api.instances.restart(instance.value.id)
+
+    optimisticStatus.value = action === 'start'
+      ? 'starting'
+      : action === 'stop'
+        ? 'stopping'
+        : 'restarting'
+
+    toast.success(t('instance.detail.actions.taskQueued'))
+    await loadInstanceContext(true)
+    startTaskPolling()
+    void response.taskId
+  } catch (error: any) {
+    if (error?.code === 'TASK_IN_PROGRESS') {
+      toast.warning(t('instance.detail.actions.taskInProgress'))
+      await loadInstanceContext(true)
+      startTaskPolling()
+    } else {
+      toast.error(`${t('instance.detail.actions.actionFailed')}: ${translateError(error)}`)
+    }
+    optimisticStatus.value = null
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function syncInstanceStatus(): Promise<void> {
+  if (!instance.value) return
+
+  actionLoading.value = 'sync'
+  try {
+    const result = await api.instances.syncStatus(instance.value.id)
+    if (result.statusChanged || result.ipv4Changed) {
+      toast.success(t('admin.hosts.batchSyncSuccess', {
+        synced: 1,
+        changed: result.statusChanged ? 1 : 0
+      }))
+    } else {
+      toast.info(t('admin.hosts.batchSyncNoChange', { synced: 1 }))
+    }
+    await loadInstanceContext(true)
+  } catch (error) {
+    toast.error(`${t('admin.hosts.batchSyncFailed')}: ${translateError(error)}`)
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function suspendInstance(): Promise<void> {
+  if (!instance.value) return
+  if (!window.confirm(t('instance.detail.actions.confirmSuspend', { name: mergedInstance.value.name }))) return
+
+  const reason = window.prompt(t('instance.detail.actions.suspendReasonPlaceholder'), '')
+  if (reason === null) return
+
+  actionLoading.value = 'suspend'
+  try {
+    await api.instances.suspend(instance.value.id, reason.trim() || undefined)
+    toast.success(t('instance.detail.actions.suspendSuccess'))
+    optimisticStatus.value = 'suspended'
+    await loadInstanceContext(true)
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function unsuspendInstance(): Promise<void> {
+  if (!instance.value) return
+  if (!window.confirm(t('instance.detail.actions.confirmUnsuspend', { name: mergedInstance.value.name }))) return
+
+  actionLoading.value = 'unsuspend'
+  try {
+    await api.instances.unsuspend(instance.value.id)
+    toast.success(t('instance.detail.actions.unsuspendSuccess'))
+    optimisticStatus.value = 'stopped'
+    await loadInstanceContext(true)
+  } catch (error) {
+    toast.error(translateError(error))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function deleteInstanceWithRefund(): Promise<void> {
+  if (!instance.value || !canDeleteWithRefund.value) return
+
+  const isPaidInstance = !!mergedInstance.value.packagePlanId
+  const confirmMessage = isPaidInstance
+    ? t('admin.billing.deleteRefundWarning')
+    : t('instance.confirmDelete', { name: mergedInstance.value.name })
+
+  if (!window.confirm(confirmMessage)) return
+
+  const reasonInput = window.prompt(t('admin.billing.deleteRefundReasonPlaceholder'), '')
+  if (reasonInput === null) return
+
+  const reason = reasonInput.trim()
+  if (isPaidInstance && !reason) {
+    toast.warning(t('admin.billing.deleteRefundReasonRequired'))
+    return
+  }
+
+  actionLoading.value = 'delete'
+  try {
+    const result = await api.instances.delete(instance.value.id, reason || undefined)
+    optimisticStatus.value = 'deleted'
+    toast.success(result.refundAmount && result.refundAmount > 0 ? t('admin.billing.deleteRefundSuccess') : t('common.deleteSuccess'))
+    await loadInstanceContext(true)
+  } catch (error) {
+    toast.error(`${t('instance.detail.actions.actionFailed')}: ${translateError(error)}`)
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+function openInstanceDetail(): void {
+  void router.push({
+    name: 'instance-detail',
+    params: { id: props.instanceSummary.id }
+  })
+}
+
+watch(
+  () => props.instanceSummary.id,
+  () => {
+    latestRequestId += 1
+    clearRefreshInterval()
+    clearStatsInterval()
+    clearTaskPollingInterval()
+    instance.value = null
+    detailConfig.value = null
+    stats.value = null
+    activeTask.value = null
+    detailError.value = ''
+    actionLoading.value = ''
+    optimisticStatus.value = null
+    terminalForceDisconnect.value = false
+    showDetails.value = false
+
+    if (props.instanceSummary.id) {
+      void loadInstanceContext()
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  clearRefreshInterval()
+  clearStatsInterval()
+  clearTaskPollingInterval()
+})
+</script>
+
+<template>
+  <div class="mt-4 overflow-hidden rounded-2xl border border-gray-200 bg-gray-50/80 dark:border-gray-700 dark:bg-gray-900/40">
+    <div class="px-4 py-4 sm:px-5">
+      <div class="grid gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(340px,0.95fr)]">
+        <div class="min-w-0">
+          <div class="flex flex-wrap items-center gap-2">
+            <InstanceDisplayIcon
+              v-if="mergedInstance.iconBadgeId"
+              :badge-id="mergedInstance.iconBadgeId"
+              :alt="mergedInstance.name"
+              :size="36"
+            />
+            <button class="text-left text-sm font-semibold text-gray-900 transition-colors hover:text-black dark:text-white dark:hover:text-gray-100" @click="openInstanceDetail">
+              {{ mergedInstance.name }}
+            </button>
+            <span :class="['badge whitespace-nowrap', statusInfo.class]">{{ statusInfo.label }}</span>
+            <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-[11px] font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+              {{ instanceType }}
+            </span>
+            <span v-if="planLabel !== '-'" class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-[11px] font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+              {{ planLabel }}
+            </span>
+            <span v-if="priceLabel" class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
+              {{ priceLabel }}
+            </span>
+          </div>
+
+          <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+            <span>#{{ mergedInstance.id }}</span>
+            <span>Incus {{ mergedInstance.incusId || '-' }}</span>
+            <span>{{ imageLabel }}</span>
+            <span>{{ hostName }}</span>
+            <span>{{ formatDateTime((mergedInstance as any).created_at || null) }}</span>
+          </div>
+
+          <div class="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+            <div class="rounded-xl border border-gray-200 bg-white/85 px-3 py-2 dark:border-gray-800 dark:bg-gray-950/60">
+              <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ t('admin.hosts.resources') }}</div>
+              <div class="mt-1 space-y-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                <div>CPU {{ mergedInstance.cpu || 0 }}%</div>
+                <div>{{ formatMemory(mergedInstance.memory) }}</div>
+                <div>{{ formatDisk(mergedInstance.disk) }}</div>
+              </div>
+            </div>
+            <div class="rounded-xl border border-gray-200 bg-white/85 px-3 py-2 dark:border-gray-800 dark:bg-gray-950/60">
+              <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ t('tickets.host') }}</div>
+              <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ hostName }}</div>
+              <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ networkModeLabel }}</div>
+            </div>
+            <div class="rounded-xl border border-gray-200 bg-white/85 px-3 py-2 dark:border-gray-800 dark:bg-gray-950/60">
+              <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ t('instance.quotaLabel') }}</div>
+              <div class="mt-1 space-y-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                <div v-for="item in quotaCards.filter(card => card.key !== 'backup')" :key="item.key" class="flex items-center justify-between gap-2">
+                  <span class="text-gray-500 dark:text-gray-400">{{ item.label }}</span>
+                  <span>{{ item.value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="rounded-xl border border-gray-200 bg-white/85 px-3 py-2 dark:border-gray-800 dark:bg-gray-950/60">
+              <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ t('billing.expiresAt') }}</div>
+              <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ expirySummary }}</div>
+              <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ priceLabel || '-' }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-950/60">
+          <div v-if="hasActiveTask" class="rounded-xl border border-blue-200 bg-blue-50 px-3 py-3 dark:border-blue-900/30 dark:bg-blue-950/30">
+            <div class="flex items-center justify-between gap-3 text-xs text-blue-700 dark:text-blue-300">
+              <span class="font-medium">{{ activeTaskLabel }}</span>
+              <span>{{ activeTask?.status }}</span>
+            </div>
+            <div class="mt-1 text-xs text-blue-700/80 dark:text-blue-300/80">
+              {{ activeTaskHint }}
+            </div>
+          </div>
+
+          <div class="grid gap-2" :class="hasActiveTask ? 'mt-3' : ''">
+            <div class="grid gap-2 sm:grid-cols-2">
+              <div class="rounded-xl border border-gray-200 bg-gray-50/80 px-3 py-2 dark:border-gray-800 dark:bg-black/30">
+                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                  <span>{{ t('tickets.memory') }}</span>
+                  <span>{{ stats ? `${formatMemory(stats.memory.usage)} / ${formatMemory(stats.memory.limit)}` : formatMemory(mergedInstance.memory) }}</span>
+                </div>
+                <div class="mt-2 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
+                  <div class="h-full rounded-full transition-all" :class="getMetricBarClass(memoryUsagePercent)" :style="{ width: `${stats ? memoryUsagePercent : 0}%` }"></div>
+                </div>
+              </div>
+              <div class="rounded-xl border border-gray-200 bg-gray-50/80 px-3 py-2 dark:border-gray-800 dark:bg-black/30">
+                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                  <span>{{ t('tickets.disk') }}</span>
+                  <span>{{ stats ? `${formatDisk(stats.disk.usage)} / ${formatDisk(stats.disk.limit)}` : formatDisk(mergedInstance.disk) }}</span>
+                </div>
+                <div class="mt-2 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
+                  <div class="h-full rounded-full transition-all" :class="getMetricBarClass(diskUsagePercent)" :style="{ width: `${stats ? diskUsagePercent : 0}%` }"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <div class="rounded-xl border border-gray-200 bg-gray-50/80 px-3 py-2 dark:border-gray-800 dark:bg-black/30">
+                <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">IP</div>
+                <div class="mt-1 space-y-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <div class="font-mono text-xs">{{ displayIp.ipv4 || '-' }}</div>
+                  <div class="truncate font-mono text-xs" :title="displayIp.ipv6 || ''">{{ displayIp.ipv6 || '-' }}</div>
+                </div>
+              </div>
+              <div class="rounded-xl border border-gray-200 bg-gray-50/80 px-3 py-2 dark:border-gray-800 dark:bg-black/30">
+                <div class="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ t('billing.expiresAt') }}</div>
+                <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {{ formatDateTime(expiryValue) }}
+                </div>
+                <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  {{ stats ? `${formatBytes(stats.network.bytesReceived)} / ${formatBytes(stats.network.bytesSent)}` : '-' }}
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap justify-end gap-2">
+              <button class="btn-secondary btn-sm" @click="showDetails = !showDetails">
+                {{ detailToggleLabel }}
+              </button>
+              <button v-if="hasSyncPermission" class="btn-ghost btn-sm" :disabled="!canSync" :title="t('admin.hosts.batchSyncStatus')" @click="syncInstanceStatus">
+                <svg v-if="actionLoading === 'sync'" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                <svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </button>
+              <button class="btn-secondary btn-sm" :disabled="!canOpenTerminal" @click="showTerminalModal = true">
+                {{ t('terminal.title') }}
+              </button>
+              <button v-if="canStart" class="btn-secondary btn-sm" :disabled="actionLoading === 'start'" @click="handleInstanceAction('start')">
+                {{ actionLoading === 'start' ? t('common.processing') : t('instance.actions.start') }}
+              </button>
+              <button v-if="canStop" class="btn-secondary btn-sm" :disabled="actionLoading === 'stop'" @click="handleInstanceAction('stop')">
+                {{ actionLoading === 'stop' ? t('common.processing') : t('instance.actions.stop') }}
+              </button>
+              <button v-if="canRestart" class="btn-secondary btn-sm" :disabled="actionLoading === 'restart'" @click="handleInstanceAction('restart')">
+                {{ actionLoading === 'restart' ? t('common.processing') : t('instance.actions.restart') }}
+              </button>
+              <button v-if="canSuspend" class="btn-secondary btn-sm" :disabled="actionLoading === 'suspend'" @click="suspendInstance">
+                {{ actionLoading === 'suspend' ? t('instance.detail.actions.suspending') : t('instance.detail.actions.suspend') }}
+              </button>
+              <button v-if="canUnsuspend" class="btn-secondary btn-sm" :disabled="actionLoading === 'unsuspend'" @click="unsuspendInstance">
+                {{ actionLoading === 'unsuspend' ? t('instance.detail.actions.unsuspending') : t('instance.detail.actions.unsuspend') }}
+              </button>
+              <button v-if="canDeleteWithRefund" class="btn-danger btn-sm" :disabled="actionLoading === 'delete'" @click="deleteInstanceWithRefund">
+                {{ actionLoading === 'delete' ? t('common.deleting') : (mergedInstance.packagePlanId ? t('admin.billing.deleteRefund') : t('common.delete')) }}
+              </button>
+              <button class="btn-primary btn-sm" @click="openInstanceDetail">
+                {{ t('common.details') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showDetails" class="border-t border-gray-200 px-4 py-4 dark:border-gray-800 sm:px-5">
+      <div v-if="loading" class="flex items-center gap-3 rounded-2xl border border-gray-200 bg-white px-4 py-5 text-gray-500 dark:border-gray-800 dark:bg-gray-950/60 dark:text-gray-400">
+        <svg class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+        </svg>
+        <span class="text-sm">{{ t('common.loading') }}</span>
+      </div>
+
+      <div v-else-if="detailError" class="flex flex-col gap-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-4 dark:border-red-500/20 dark:bg-red-500/10 sm:flex-row sm:items-center sm:justify-between">
+        <div class="min-w-0">
+          <div class="text-sm font-medium text-red-500">{{ t('common.loadFailed') }}</div>
+          <div class="mt-1 break-all text-xs text-red-700/80 dark:text-red-300/80">{{ detailError }}</div>
+        </div>
+        <button class="btn-secondary btn-sm" @click="loadInstanceContext()">{{ t('common.retry') }}</button>
+      </div>
+
+      <div v-else class="grid gap-3 xl:grid-cols-2">
+        <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/60">
+          <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">{{ t('common.details') }}</div>
+          <dl class="grid gap-3 text-sm sm:grid-cols-2">
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('tickets.instanceId') }}</dt>
+              <dd class="font-mono text-gray-900 dark:text-gray-100">{{ mergedInstance.id }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('tickets.incusId') }}</dt>
+              <dd class="break-all font-mono text-gray-900 dark:text-gray-100">{{ mergedInstance.incusId || '-' }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('tickets.packageName') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ planLabel }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('tickets.host') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ hostName }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('packageForm.fields.networkMode') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ networkModeLabel }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('packageForm.fields.instanceType') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ instanceType }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('instance.createdAt') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ formatDateTime((mergedInstance as any).created_at || null) }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('billing.expiresAt') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ formatDateTime(expiryValue) }}</dd>
+            </div>
+            <div v-if="(mergedInstance as any).suspend_reason" class="space-y-1 sm:col-span-2">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('admin.hosts.suspendReason') }}</dt>
+              <dd class="break-all text-gray-900 dark:text-gray-100">{{ (mergedInstance as any).suspend_reason }}</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/60">
+          <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">{{ t('admin.hosts.resources') }}</div>
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            <div v-for="item in quotaCards" :key="item.key" class="rounded-xl border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-black/20">
+              <div class="text-[11px] text-gray-500 dark:text-gray-400">{{ item.label }}</div>
+              <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ item.value }}</div>
+            </div>
+            <div class="rounded-xl border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-black/20">
+              <div class="text-[11px] text-gray-500 dark:text-gray-400">CPU</div>
+              <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ `${mergedInstance.cpu || 0}%` }}</div>
+            </div>
+            <div class="rounded-xl border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-black/20">
+              <div class="text-[11px] text-gray-500 dark:text-gray-400">SWAP</div>
+              <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ getSwapDisplay() }}</div>
+            </div>
+            <div class="rounded-xl border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-black/20">
+              <div class="text-[11px] text-gray-500 dark:text-gray-400">RX / TX</div>
+              <div class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ stats ? `${formatBytes(stats.network.bytesReceived)} / ${formatBytes(stats.network.bytesSent)}` : '-' }}</div>
+            </div>
+            <div class="rounded-xl border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-black/20">
+              <div class="text-[11px] text-gray-500 dark:text-gray-400">IPv4</div>
+              <div class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-gray-100">{{ displayIp.ipv4 || '-' }}</div>
+            </div>
+            <div class="rounded-xl border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-800 dark:bg-black/20">
+              <div class="text-[11px] text-gray-500 dark:text-gray-400">IPv6</div>
+              <div class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-gray-100">{{ displayIp.ipv6 || '-' }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950/60 xl:col-span-2">
+          <div class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">{{ t('instanceConfig.title') }}</div>
+          <dl class="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-4">
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('packageForm.fields.limitsIngress') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ detailConfig?.config.limits_ingress || '-' }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('packageForm.fields.limitsEgress') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ detailConfig?.config.limits_egress || '-' }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('packageForm.fields.limitsProcesses') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ detailConfig?.config.limits_processes ?? '-' }}</dd>
+            </div>
+            <div class="space-y-1">
+              <dt class="text-gray-500 dark:text-gray-400">{{ t('packageForm.fields.bootAutostart') }}</dt>
+              <dd class="text-gray-900 dark:text-gray-100">{{ formatBooleanValue(detailConfig?.config.boot_autostart) }}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <TerminalModal
+      v-model:visible="showTerminalModal"
+      v-model:force-disconnect="terminalForceDisconnect"
+      :instance-id="instance?.id || null"
+      :instance-name="mergedInstance.name"
+      :allow-manual-cloud-init-complete="false"
+    />
+  </div>
+</template>
diff --git a/client/src/composables/useBrand.ts b/client/src/composables/useBrand.ts
new file mode 100644
index 0000000..e086711
--- /dev/null
+++ b/client/src/composables/useBrand.ts
@@ -0,0 +1,17 @@
+import { useConfigStore } from '@/stores/config'
+
+export function useBrand() {
+  const configStore = useConfigStore()
+
+  return {
+    get brandName() {
+      return configStore.brandName?.trim() || 'Incudal'
+    },
+    get brandSubtitle() {
+      return configStore.brandSubtitle?.trim() || '基于 Incus 的低价 NAT VPS'
+    },
+    get brandLogoUrl() {
+      return configStore.brandLogoUrl?.trim() || '/incudal_logo.webp'
+    }
+  }
+}
diff --git a/client/src/composables/useM3Auth.ts b/client/src/composables/useM3Auth.ts
new file mode 100644
index 0000000..1b3060e
--- /dev/null
+++ b/client/src/composables/useM3Auth.ts
@@ -0,0 +1,69 @@
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+
+export function useM3Auth() {
+  const themeStore = useThemeStore()
+
+  const ui = computed(() => themeStore.isDark
+    ? {
+        card: 'bg-[#1d2024] border border-[#43474e] shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)]',
+        title: 'text-[#e3e2e6]',
+        body: 'text-[#c3c6cf]',
+        muted: 'text-[#8e9199]',
+        label: 'text-[#c3c6cf]',
+        link: 'text-[#a8c7fa] hover:text-[#bdd3fb]',
+        linkSubtle: 'text-[#c3c6cf] hover:text-[#e3e2e6]',
+        input: 'h-11 w-full rounded-xl border border-[#43474e] bg-[#111418] px-4 text-sm text-[#e3e2e6] placeholder:text-[#8e9199] transition-colors focus:border-[#a8c7fa] focus:outline-none focus:ring-2 focus:ring-[#a8c7fa]/30 disabled:cursor-not-allowed disabled:opacity-60',
+        select: 'h-11 rounded-xl border border-[#43474e] bg-[#111418] px-3 text-sm text-[#e3e2e6] transition-colors focus:border-[#a8c7fa] focus:outline-none focus:ring-2 focus:ring-[#a8c7fa]/30',
+        filled: 'bg-[#a8c7fa] text-[#062e6f] shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)] hover:bg-[#bdd3fb] focus-visible:ring-[#a8c7fa]/40',
+        tonal: 'bg-[#284777] text-[#d3e3fd] hover:bg-[#304f81] focus-visible:ring-[#a8c7fa]/40',
+        outlined: 'border border-[#8e9199] text-[#a8c7fa] hover:bg-[#a8c7fa]/[0.08] focus-visible:ring-[#a8c7fa]/40',
+        text: 'text-[#a8c7fa] hover:bg-[#a8c7fa]/[0.08]',
+        errorBanner: 'bg-[#3a1618] text-[#ffb4ab]',
+        successBanner: 'bg-[#16311f] text-[#a1cdb3]',
+        divider: 'border-[#43474e]',
+        heroBadge: 'border border-[#284777] bg-[#1a2c52] text-[#d3e3fd]',
+        heroPill: 'border border-[#43474e] bg-[#272a2f] text-[#c3c6cf]',
+        heroSurface: 'bg-[#1d2024] border border-[#43474e]',
+        heroPoint: 'bg-[#272a2f] text-[#e3e2e6]',
+        dividerTextBg: 'bg-[#1d2024]',
+        dividerText: 'text-[#8e9199]',
+        checkbox: 'h-5 w-5 rounded-[4px] border-2 border-[#8e9199] bg-transparent text-[#a8c7fa] focus:ring-2 focus:ring-[#a8c7fa]/30 focus:ring-offset-0',
+        linkInline: 'text-[#a8c7fa] hover:underline underline-offset-2',
+        primaryDot: 'bg-[#a8c7fa]',
+        tertiaryDot: 'bg-[#a1cdb3]',
+        secondaryDot: 'bg-[#ffb59a]'
+      }
+    : {
+        card: 'bg-white border border-[#e3e5ec] shadow-[0_1px_2px_rgba(15,23,42,0.08),0_1px_3px_1px_rgba(15,23,42,0.06)]',
+        title: 'text-[#1a1b20]',
+        body: 'text-[#43474e]',
+        muted: 'text-[#74777f]',
+        label: 'text-[#43474e]',
+        link: 'text-[#0b57d0] hover:text-[#0848ad]',
+        linkSubtle: 'text-[#43474e] hover:text-[#1a1b20]',
+        input: 'h-11 w-full rounded-xl border border-[#c3c6cf] bg-white px-4 text-sm text-[#1a1b20] placeholder:text-[#74777f] transition-colors focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-[#f3f4fa]',
+        select: 'h-11 rounded-xl border border-[#c3c6cf] bg-white px-3 text-sm text-[#1a1b20] transition-colors focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30',
+        filled: 'bg-[#0b57d0] text-white shadow-[0_1px_2px_rgba(11,87,208,0.3),0_1px_3px_1px_rgba(11,87,208,0.15)] hover:bg-[#0848ad] focus-visible:ring-[#0b57d0]/30',
+        tonal: 'bg-[#d3e3fd] text-[#041e49] hover:bg-[#c1d6fc] focus-visible:ring-[#0b57d0]/30',
+        outlined: 'border border-[#74777f] text-[#0b57d0] hover:bg-[#0b57d0]/[0.08] focus-visible:ring-[#0b57d0]/30',
+        text: 'text-[#0b57d0] hover:bg-[#0b57d0]/[0.08]',
+        errorBanner: 'bg-[#ffedea] text-[#93000a]',
+        successBanner: 'bg-[#e1f0e3] text-[#1e5531]',
+        divider: 'border-[#e3e5ec]',
+        heroBadge: 'border border-[#aac7fa]/60 bg-[#d3e3fd] text-[#041e49]',
+        heroPill: 'border border-[#c3c6cf] bg-[#eef0f8] text-[#43474e]',
+        heroSurface: 'bg-[#eef0f8] border border-[#e3e5ec]',
+        heroPoint: 'bg-white text-[#1a1b20]',
+        dividerTextBg: 'bg-white',
+        dividerText: 'text-[#74777f]',
+        checkbox: 'h-5 w-5 rounded-[4px] border-2 border-[#74777f] bg-white text-[#0b57d0] focus:ring-2 focus:ring-[#0b57d0]/30 focus:ring-offset-0',
+        linkInline: 'text-[#0b57d0] hover:underline underline-offset-2',
+        primaryDot: 'bg-[#0b57d0]',
+        tertiaryDot: 'bg-[#3a6a49]',
+        secondaryDot: 'bg-[#8a5100]'
+      }
+  )
+
+  return { ui, themeStore }
+}
diff --git a/client/src/composables/usePageSeo.ts b/client/src/composables/usePageSeo.ts
new file mode 100644
index 0000000..f0fc198
--- /dev/null
+++ b/client/src/composables/usePageSeo.ts
@@ -0,0 +1,136 @@
+import { onUnmounted, toValue, watchEffect, type MaybeRefOrGetter } from 'vue'
+import { useConfigStore } from '@/stores/config'
+
+interface SeoOptions {
+  title: string
+  description: string
+  canonical?: string
+  keywords?: string
+  robots?: string
+  ogType?: string
+  image?: string
+}
+
+const defaultTitle = typeof document !== 'undefined' ? document.title : 'Incudal'
+const defaultDescription = typeof document !== 'undefined'
+  ? (document.querySelector('meta[name="description"]') as HTMLMetaElement | null)?.content || ''
+  : ''
+const defaultKeywords = typeof document !== 'undefined'
+  ? (document.querySelector('meta[name="keywords"]') as HTMLMetaElement | null)?.content || ''
+  : ''
+const defaultRobots = typeof document !== 'undefined'
+  ? (document.querySelector('meta[name="robots"]') as HTMLMetaElement | null)?.content || 'index,follow'
+  : 'index,follow'
+const defaultCanonical = typeof document !== 'undefined'
+  ? (document.querySelector('link[rel="canonical"]') as HTMLLinkElement | null)?.href || ''
+  : ''
+
+function toAbsoluteUrl(url: string): string {
+  if (typeof window === 'undefined') {
+    return url
+  }
+  return new URL(url, window.location.origin).href
+}
+
+function upsertMetaByName(name: string, content: string): void {
+  let element = document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement | null
+  if (!element) {
+    element = document.createElement('meta')
+    element.setAttribute('name', name)
+    document.head.appendChild(element)
+  }
+
+  element.content = content
+}
+
+function upsertMetaByProperty(property: string, content: string): void {
+  let element = document.querySelector(`meta[property="${property}"]`) as HTMLMetaElement | null
+  if (!element) {
+    element = document.createElement('meta')
+    element.setAttribute('property', property)
+    document.head.appendChild(element)
+  }
+
+  element.content = content
+}
+
+function upsertCanonical(href: string): void {
+  let element = document.querySelector('link[rel="canonical"]') as HTMLLinkElement | null
+  if (!element) {
+    element = document.createElement('link')
+    element.setAttribute('rel', 'canonical')
+    document.head.appendChild(element)
+  }
+
+  element.href = href
+}
+
+function applySeo(options: SeoOptions): void {
+  const configStore = useConfigStore()
+  const brandName = configStore.brandName?.trim() || 'Incudal'
+  const image = toAbsoluteUrl(options.image || configStore.brandLogoUrl?.trim() || '/incudal_logo.webp')
+  const canonical = options.canonical || window.location.href
+  const robots = options.robots || defaultRobots
+
+  document.title = options.title
+  upsertMetaByName('description', options.description)
+  upsertMetaByName('keywords', options.keywords || defaultKeywords)
+  upsertMetaByName('robots', robots)
+
+  upsertMetaByProperty('og:site_name', brandName)
+  upsertMetaByProperty('og:type', options.ogType || 'website')
+  upsertMetaByProperty('og:title', options.title)
+  upsertMetaByProperty('og:description', options.description)
+  upsertMetaByProperty('og:url', canonical)
+  upsertMetaByProperty('og:image', image)
+
+  upsertMetaByName('twitter:card', 'summary_large_image')
+  upsertMetaByName('twitter:title', options.title)
+  upsertMetaByName('twitter:description', options.description)
+  upsertMetaByName('twitter:image', image)
+
+  upsertCanonical(canonical)
+}
+
+function restoreDefaults(): void {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const configStore = useConfigStore()
+  const brandName = configStore.brandName?.trim() || 'Incudal'
+  const brandSubtitle = configStore.brandSubtitle?.trim() || '基于 Incus 的低价 NAT VPS'
+  const brandLogoUrl = toAbsoluteUrl(configStore.brandLogoUrl?.trim() || '/incudal_logo.webp')
+  const title = defaultTitle.replace(/Incudal/g, brandName)
+  const description = defaultDescription || brandSubtitle
+
+  document.title = title
+  upsertMetaByName('description', description)
+  upsertMetaByName('keywords', defaultKeywords)
+  upsertMetaByName('robots', defaultRobots)
+  upsertMetaByProperty('og:site_name', brandName)
+  upsertMetaByProperty('og:type', 'website')
+  upsertMetaByProperty('og:title', title)
+  upsertMetaByProperty('og:description', description)
+  upsertMetaByProperty('og:url', window.location.href)
+  upsertMetaByProperty('og:image', brandLogoUrl)
+  upsertMetaByName('twitter:card', 'summary_large_image')
+  upsertMetaByName('twitter:title', title)
+  upsertMetaByName('twitter:description', description)
+  upsertMetaByName('twitter:image', brandLogoUrl)
+  upsertCanonical(defaultCanonical || window.location.href)
+}
+
+export function usePageSeo(options: MaybeRefOrGetter<SeoOptions>): void {
+  watchEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    applySeo(toValue(options))
+  })
+
+  onUnmounted(() => {
+    restoreDefaults()
+  })
+}
diff --git a/client/src/composables/useTerminal.ts b/client/src/composables/useTerminal.ts
new file mode 100644
index 0000000..891161e
--- /dev/null
+++ b/client/src/composables/useTerminal.ts
@@ -0,0 +1,705 @@
+/**
+ * 终端连接 Composable
+ * 
+ * 管理 WebSocket 连接、xterm.js 终端实例和生命周期
+ * 
+ * 功能特性：
+ * - WebGL 硬件加速渲染（带 Canvas 回退）
+ * - Unicode 11 宽字符支持（中文、Emoji）
+ * - 终端内图片显示支持
+ * - 内容序列化导出
+ * - 搜索功能
+ * - 可点击链接
+ * - 剪贴板增强
+ * - 快捷键支持
+ */
+
+import { ref, shallowRef, onMounted, onUnmounted, watch, type Ref } from 'vue'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { SearchAddon } from '@xterm/addon-search'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { WebglAddon } from '@xterm/addon-webgl'
+import { SerializeAddon } from '@xterm/addon-serialize'
+import { ClipboardAddon } from '@xterm/addon-clipboard'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import {
+    buildTerminalWebSocketUrl,
+    createTerminalRuntime,
+    disposeTerminalRuntime,
+    handleTerminalSocketPayload,
+    shouldRetryTerminalClose,
+    TERMINAL_MAX_RECONNECT_ATTEMPTS
+} from '@/lib/terminal-core'
+
+// Vercel 极简风格 - 纯黑背景
+const TERMINAL_THEME = {
+    background: '#0a0a0a',
+    foreground: '#ededed',
+    cursor: '#ffffff',
+    cursorAccent: '#0a0a0a',
+    selectionBackground: '#444444',
+    selectionForeground: '#ffffff',
+    black: '#0a0a0a',
+    red: '#ff6369',
+    green: '#52c41a',
+    yellow: '#faad14',
+    blue: '#1890ff',
+    magenta: '#eb2f96',
+    cyan: '#13c2c2',
+    white: '#ededed',
+    brightBlack: '#666666',
+    brightRed: '#ff8a8a',
+    brightGreen: '#73d13d',
+    brightYellow: '#ffc53d',
+    brightBlue: '#40a9ff',
+    brightMagenta: '#f759ab',
+    brightCyan: '#36cfc9',
+    brightWhite: '#ffffff'
+}
+
+// 连接状态
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'reconnecting' | 'error'
+
+// 终端配置
+export interface TerminalOptions {
+    fontSize?: number
+    fontFamily?: string
+    cursorBlink?: boolean
+    cursorStyle?: 'block' | 'underline' | 'bar'
+    enableWebGL?: boolean      // 是否启用 WebGL 渲染
+    enableImages?: boolean     // 是否启用图片支持
+    scrollback?: number        // 回滚行数
+}
+
+// WebSocket 消息类型
+interface TerminalMessage {
+    type: 'connected' | 'disconnected' | 'reconnecting' | 'error' | 'data'
+    sessionId?: string
+    message?: string
+    code?: string
+    reason?: string
+}
+
+export function useTerminal(instanceId: Ref<number | null>, options: TerminalOptions = {}) {
+    const authStore = useAuthStore()
+    
+    // 移动端检测（用于禁用 WebGL 等）
+    // 注意：新版 iPadOS 在桌面模式下 User-Agent 不包含 "iPad"，需结合 maxTouchPoints 检测
+    const isMobileDevice = (() => {
+        const ua = navigator.userAgent
+        // 传统移动端 UA 检测
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
+            return true
+        }
+        // iPadOS 桌面模式检测：UA 显示为 Mac，但支持触摸
+        if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) {
+            return true
+        }
+        // 通用触摸设备检测（作为补充）
+        if (navigator.maxTouchPoints > 0 && /Mac|Windows/i.test(navigator.platform) === false) {
+            return true
+        }
+        return false
+    })()
+
+    // 状态
+    const status = ref<ConnectionStatus>('disconnected')
+    const error = ref<string | null>(null)
+    const sessionId = ref<string | null>(null)
+
+    // 终端实例（使用 shallowRef 避免响应式代理）
+    const terminal = shallowRef<Terminal | null>(null)
+    const fitAddon = shallowRef<FitAddon | null>(null)
+    const searchAddon = shallowRef<SearchAddon | null>(null)
+    const unicodeAddon = shallowRef<Unicode11Addon | null>(null)
+    const webglAddon = shallowRef<WebglAddon | null>(null)
+    const serializeAddon = shallowRef<SerializeAddon | null>(null)
+    const clipboardAddon = shallowRef<ClipboardAddon | null>(null)
+    
+    // 渲染状态
+    const isWebGLEnabled = ref(false)
+
+    // WebSocket
+    let ws: WebSocket | null = null
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+    let reconnectAttempts = 0
+    // 更激进的重连策略，后台时也能保持连接
+    let terminalEventsBound = false  // 防止重复绑定事件
+
+    // 配置
+    const fontSize = ref(options.fontSize || 14)
+    const fontFamily = options.fontFamily || "'JetBrains Mono', 'Fira Code', 'Consolas', monospace"
+
+    /**
+     * 初始化终端
+     */
+    function initTerminal(container: HTMLElement): Terminal {
+        const runtime = createTerminalRuntime({
+            container,
+            fontSize: fontSize.value,
+            fontFamily,
+            theme: TERMINAL_THEME,
+            isMobileDevice,
+            enableWebgl: options.enableWebGL,
+            onSelectionCopy: () => undefined
+        })
+
+        terminal.value = runtime.terminal
+        fitAddon.value = runtime.fitAddon
+        searchAddon.value = runtime.searchAddon
+        unicodeAddon.value = runtime.unicodeAddon
+        webglAddon.value = runtime.webglAddon
+        serializeAddon.value = runtime.serializeAddon
+        clipboardAddon.value = runtime.clipboardAddon
+        isWebGLEnabled.value = runtime.isWebGLEnabled
+
+        return runtime.terminal
+    }
+
+    /**
+     * 连接到终端
+     */
+    async function connect() {
+        if (!instanceId.value) {
+            error.value = 'Instance ID is required'
+            return
+        }
+
+        // 检查认证状态
+        const token = authStore.token
+        if (!token) {
+            error.value = 'Authentication required'
+            status.value = 'error'
+            return
+        }
+
+        if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+            return
+        }
+
+        status.value = reconnectAttempts > 0 ? 'reconnecting' : 'connecting'
+        error.value = null
+
+        try {
+            const ticketResponse = await api.instances.createTerminalTicket(instanceId.value)
+            const wsUrl = buildTerminalWebSocketUrl(instanceId.value, ticketResponse.ticket)
+            ws = new WebSocket(wsUrl)
+            // 使用 arraybuffer 确保二进制数据按顺序处理（避免 Blob 异步导致的乱序）
+            ws.binaryType = 'arraybuffer'
+
+            ws.onopen = () => {
+                console.log('[Terminal] WebSocket connected')
+                reconnectAttempts = 0
+            }
+
+            ws.onmessage = (event) => {
+                handleTerminalSocketPayload(event.data, () => terminal.value, (message) => {
+                    handleControlMessage(message as TerminalMessage)
+                })
+            }
+
+            ws.onerror = (event) => {
+                console.error('[Terminal] WebSocket error:', event)
+                error.value = 'Connection error'
+            }
+
+            ws.onclose = (event) => {
+                console.log('[Terminal] WebSocket closed:', event.code, event.reason)
+
+                if (shouldRetryTerminalClose(event.code) && (status.value === 'connected' || status.value === 'connecting' || status.value === 'reconnecting')) {
+                    // 意外断开，尝试重连
+                    if (reconnectAttempts < TERMINAL_MAX_RECONNECT_ATTEMPTS) {
+                        reconnectAttempts++
+                        status.value = 'reconnecting'
+                        // 线性退避：1秒, 3秒, 5秒... 最多 15秒
+                        const delay = Math.min(1000 + (reconnectAttempts - 1) * 2000, 15000)
+                        reconnectTimer = setTimeout(() => {
+                            void connect()
+                        }, delay)
+                    } else {
+                        status.value = 'disconnected'
+                        error.value = 'Connection lost'
+                    }
+                } else {
+                    status.value = 'disconnected'
+                }
+            }
+
+            // 绑定终端输入（只绑定一次）
+            if (terminal.value && !terminalEventsBound) {
+                terminalEventsBound = true
+                
+                terminal.value.onData((data) => {
+                    // 使用当前的 ws 引用，而不是闭包捕获的
+                    if (ws && ws.readyState === WebSocket.OPEN) {
+                        try {
+                            ws.send(data)
+                        } catch {
+                            // WebSocket 可能在发送时已关闭，忽略错误
+                        }
+                    }
+                })
+
+                // 监听终端大小变化
+                terminal.value.onResize(({ cols, rows }) => {
+                    sendResize(cols, rows)
+                })
+            }
+        } catch (err) {
+            console.error('[Terminal] Failed to create WebSocket:', err)
+            status.value = 'error'
+            error.value = err instanceof Error ? err.message : 'Failed to connect'
+        }
+    }
+
+    /**
+     * 处理控制消息
+     */
+    function handleControlMessage(message: TerminalMessage) {
+        switch (message.type) {
+            case 'connected':
+                status.value = 'connected'
+                sessionId.value = message.sessionId || null
+                error.value = null
+                // 连接成功后发送初始大小
+                if (terminal.value && fitAddon.value) {
+                    fitAddon.value.fit()
+                    sendResize(terminal.value.cols, terminal.value.rows)
+                }
+                break
+
+            case 'reconnecting':
+                status.value = 'reconnecting'
+                error.value = message.reason || null
+                break
+
+            case 'disconnected':
+                status.value = 'disconnected'
+                error.value = message.reason || null
+                sessionId.value = null
+                break
+
+            case 'error':
+                status.value = 'error'
+                error.value = message.message || 'Unknown error'
+                if (terminal.value) {
+                    terminal.value.write(`\r\n\x1b[31mError: ${message.message}\x1b[0m\r\n`)
+                }
+                break
+        }
+    }
+
+    /**
+     * 发送调整大小命令
+     */
+    function sendResize(cols: number, rows: number) {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            try {
+                ws.send(JSON.stringify({
+                    type: 'resize',
+                    cols,
+                    rows
+                }))
+            } catch {
+                // WebSocket 可能在发送时已关闭，忽略错误
+            }
+        }
+    }
+
+    /**
+     * 断开连接
+     */
+    function disconnect() {
+        if (reconnectTimer) {
+            clearTimeout(reconnectTimer)
+            reconnectTimer = null
+        }
+
+        // 先关闭 WebSocket，然后重置重连计数
+        if (ws) {
+            // 临时设置为最大值以阻止 onclose 中的自动重连
+            reconnectAttempts = TERMINAL_MAX_RECONNECT_ATTEMPTS
+            ws.close(1000, 'User disconnect')
+            ws = null
+        }
+
+        // 重置重连计数，以便用户可以手动重连
+        reconnectAttempts = 0
+
+        status.value = 'disconnected'
+        sessionId.value = null
+    }
+
+    /**
+     * 调整终端大小
+     */
+    function fit() {
+        if (fitAddon.value && terminal.value) {
+            fitAddon.value.fit()
+        }
+    }
+
+    /**
+     * 清空终端
+     */
+    function clear() {
+        if (terminal.value) {
+            terminal.value.clear()
+        }
+    }
+
+    /**
+     * 搜索文本
+     */
+    function search(text: string, options?: { caseSensitive?: boolean; wholeWord?: boolean; regex?: boolean }) {
+        if (searchAddon.value) {
+            return searchAddon.value.findNext(text, {
+                caseSensitive: options?.caseSensitive,
+                wholeWord: options?.wholeWord,
+                regex: options?.regex
+            })
+        }
+        return false
+    }
+
+    /**
+     * 搜索上一个
+     */
+    function searchPrevious(text: string) {
+        if (searchAddon.value) {
+            return searchAddon.value.findPrevious(text)
+        }
+        return false
+    }
+
+    /**
+     * 更改字体大小
+     */
+    function setFontSize(size: number) {
+        fontSize.value = size
+        if (terminal.value) {
+            terminal.value.options.fontSize = size
+            fit()
+        }
+    }
+
+    /**
+     * 聚焦终端
+     */
+    function focus() {
+        if (terminal.value) {
+            terminal.value.focus()
+        }
+    }
+
+    /**
+     * 写入文本
+     */
+    function write(text: string) {
+        if (terminal.value) {
+            terminal.value.write(text)
+        }
+    }
+
+    /**
+     * 复制选中的文本
+     */
+    async function copySelection(): Promise<boolean> {
+        if (!terminal.value) return false
+        const selection = terminal.value.getSelection()
+        if (!selection) return false
+        
+        try {
+            await navigator.clipboard.writeText(selection)
+            return true
+        } catch {
+            // 回退到 execCommand
+            try {
+                const textarea = document.createElement('textarea')
+                textarea.value = selection
+                textarea.style.position = 'fixed'
+                textarea.style.opacity = '0'
+                document.body.appendChild(textarea)
+                textarea.select()
+                document.execCommand('copy')
+                document.body.removeChild(textarea)
+                return true
+            } catch {
+                return false
+            }
+        }
+    }
+
+    /**
+     * 获取选中的文本
+     */
+    function getSelection(): string {
+        return terminal.value?.getSelection() || ''
+    }
+
+    /**
+     * 是否有选中文本
+     */
+    function hasSelection(): boolean {
+        return !!terminal.value?.hasSelection()
+    }
+
+    /**
+     * 粘贴文本到终端
+     */
+    async function paste(): Promise<boolean> {
+        try {
+            const text = await navigator.clipboard.readText()
+            if (text && ws && ws.readyState === WebSocket.OPEN) {
+                try {
+                    ws.send(text)
+                    return true
+                } catch {
+                    return false
+                }
+            }
+            return false
+        } catch {
+            return false
+        }
+    }
+
+    /**
+     * 粘贴指定文本到终端
+     */
+    function pasteText(text: string): boolean {
+        if (text && ws && ws.readyState === WebSocket.OPEN) {
+            try {
+                ws.send(text)
+                return true
+            } catch {
+                return false
+            }
+        }
+        return false
+    }
+
+    /**
+     * 去除 ANSI 转义序列（颜色控制码等）
+     * 这些在纯文本编辑器中会显示为方框
+     */
+    function stripAnsiSequences(text: string): string {
+        // 匹配所有 ANSI 转义序列：ESC [ ... 字母
+        // 包括颜色、光标移动、清屏等控制码
+        // 使用 RegExp 构造函数避免 ESLint 报错
+        const ansiRegex = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*[a-zA-Z]', 'g')
+        return text.replace(ansiRegex, '')
+    }
+
+    /**
+     * 导出终端内容
+     * @param format 'text' 返回纯文本（去除颜色码），'html' 返回带样式的 HTML
+     */
+    function exportContent(format: 'text' | 'html' = 'text'): string {
+        if (!serializeAddon.value) return ''
+        try {
+            if (format === 'html') {
+                return serializeAddon.value.serializeAsHTML()
+            }
+            // 纯文本格式：去除 ANSI 转义序列
+            const raw = serializeAddon.value.serialize()
+            return stripAnsiSequences(raw)
+        } catch (err) {
+            console.error('[Terminal] Failed to export content:', err)
+            return ''
+        }
+    }
+
+    /**
+     * 下载终端日志
+     */
+    function downloadLog(filename?: string): boolean {
+        const content = exportContent('text')
+        if (!content) return false
+        
+        try {
+            const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = filename || `terminal-${Date.now()}.log`
+            document.body.appendChild(a)
+            a.click()
+            document.body.removeChild(a)
+            URL.revokeObjectURL(url)
+            return true
+        } catch (err) {
+            console.error('[Terminal] Failed to download log:', err)
+            return false
+        }
+    }
+
+    /**
+     * 增大字体
+     */
+    function increaseFontSize(): void {
+        const newSize = Math.min(fontSize.value + 2, 32)
+        setFontSize(newSize)
+    }
+
+    /**
+     * 减小字体
+     */
+    function decreaseFontSize(): void {
+        const newSize = Math.max(fontSize.value - 2, 8)
+        setFontSize(newSize)
+    }
+
+    /**
+     * 重置字体大小
+     */
+    function resetFontSize(): void {
+        setFontSize(options.fontSize || 14)
+    }
+
+    /**
+     * 滚动到底部
+     */
+    function scrollToBottom(): void {
+        terminal.value?.scrollToBottom()
+    }
+
+    /**
+     * 滚动到顶部
+     */
+    function scrollToTop(): void {
+        terminal.value?.scrollToTop()
+    }
+
+    /**
+     * 获取渲染器类型
+     */
+    function getRendererType(): 'webgl' | 'canvas' {
+        return isWebGLEnabled.value ? 'webgl' : 'canvas'
+    }
+
+    /**
+     * 销毁终端
+     */
+    function dispose() {
+        // 1. 先断开 WebSocket 连接
+        disconnect()
+
+        disposeTerminalRuntime({
+            terminal: terminal.value,
+            fitAddon: fitAddon.value,
+            searchAddon: searchAddon.value,
+            unicodeAddon: unicodeAddon.value,
+            webglAddon: webglAddon.value,
+            serializeAddon: serializeAddon.value,
+            clipboardAddon: clipboardAddon.value,
+            eventsBound: terminalEventsBound,
+            isWebGLEnabled: isWebGLEnabled.value
+        })
+
+        terminal.value = null
+        fitAddon.value = null
+        searchAddon.value = null
+        unicodeAddon.value = null
+        webglAddon.value = null
+        serializeAddon.value = null
+        clipboardAddon.value = null
+        isWebGLEnabled.value = false
+        terminalEventsBound = false
+    }
+
+    // 监听实例 ID 变化，切换实例时断开旧连接
+    watch(instanceId, (newId, oldId) => {
+        if (newId !== oldId && oldId !== null) {
+            disconnect()
+        }
+    })
+
+    // 移动端 visualViewport 变化处理（软键盘弹出/收起）
+    const handleViewportResize = () => {
+        setTimeout(() => {
+            if (fitAddon.value && terminal.value) {
+                fitAddon.value.fit()
+                terminal.value.refresh(0, terminal.value.rows - 1)
+            }
+        }, 100)
+    }
+
+    // 页面可见性变化时自动重连
+    const handleVisibilityChange = () => {
+        if (document.visibilityState === 'visible' && status.value === 'disconnected' && instanceId.value) {
+            // 用户回来了，如果已断开则自动重连
+            console.log('[Terminal] Page visible, auto reconnecting...')
+            reconnectAttempts = 0 // 重置重连计数
+            connect()
+        }
+    }
+
+    // 组件挂载时添加监听
+    onMounted(() => {
+        document.addEventListener('visibilitychange', handleVisibilityChange)
+        
+        // 移动端：监听 visualViewport 变化（软键盘弹出/收起）
+        if (isMobileDevice && window.visualViewport) {
+            window.visualViewport.addEventListener('resize', handleViewportResize)
+        }
+    })
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        document.removeEventListener('visibilitychange', handleVisibilityChange)
+        
+        // 移动端：移除 visualViewport 监听
+        if (isMobileDevice && window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', handleViewportResize)
+        }
+        
+        dispose()
+    })
+
+    return {
+        // 状态
+        status,
+        error,
+        sessionId,
+        terminal,
+        fontSize,
+        isWebGLEnabled,
+
+        // 方法
+        initTerminal,
+        connect,
+        disconnect,
+        fit,
+        clear,
+        search,
+        searchPrevious,
+        setFontSize,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+        focus,
+        write,
+        dispose,
+        
+        // 复制粘贴
+        copySelection,
+        getSelection,
+        hasSelection,
+        paste,
+        pasteText,
+        
+        // 导出
+        exportContent,
+        downloadLog,
+        
+        // 滚动
+        scrollToBottom,
+        scrollToTop,
+        
+        // 渲染器
+        getRendererType
+    }
+}
diff --git a/client/src/composables/useTurnstile.ts b/client/src/composables/useTurnstile.ts
new file mode 100644
index 0000000..2173c31
--- /dev/null
+++ b/client/src/composables/useTurnstile.ts
@@ -0,0 +1,311 @@
+/**
+ * Turnstile 隐式验证 Composable
+ * 用于在后台自动获取验证 token
+ */
+import { ref, onMounted, onUnmounted } from 'vue'
+import api from '@/api'
+
+// 扩展 Window 类型以支持 Turnstile API
+interface TurnstileAPI {
+    render: (container: HTMLElement | string, options: {
+        sitekey: string
+        action?: string
+        size?: 'normal' | 'compact' | 'flexible'
+        theme?: 'light' | 'dark' | 'auto'
+        callback?: (token: string) => void
+        'error-callback'?: () => void
+        'expired-callback'?: () => void
+    }) => string
+    reset: (widgetId: string) => void
+    remove: (widgetId: string) => void
+    getResponse: (widgetId: string) => string | undefined
+}
+
+declare const window: Window & { turnstile?: TurnstileAPI }
+
+// 全局配置缓存
+let cachedConfig: { enabled: boolean; siteKey: string | null } | null = null
+let configPromise: Promise<{ enabled: boolean; siteKey: string | null }> | null = null
+
+// Turnstile 脚本加载状态
+let scriptLoaded = false
+let scriptLoading = false
+let scriptLoadPromise: Promise<void> | null = null
+
+/**
+ * 加载 Turnstile 配置
+ */
+async function loadTurnstileConfig(): Promise<{ enabled: boolean; siteKey: string | null }> {
+    if (cachedConfig) {
+        return cachedConfig
+    }
+
+    if (configPromise) {
+        return configPromise
+    }
+
+    configPromise = (async () => {
+        try {
+            const response = await api.systemConfig.getPublic()
+            cachedConfig = {
+                enabled: response.turnstileEnabled || false,
+                siteKey: response.turnstileSiteKey || null
+            }
+            return cachedConfig
+        } catch (error) {
+            console.error('Failed to load Turnstile config:', error)
+            cachedConfig = { enabled: false, siteKey: null }
+            return cachedConfig
+        }
+    })()
+
+    return configPromise
+}
+
+/**
+ * 加载 Turnstile 脚本
+ */
+function loadTurnstileScript(): Promise<void> {
+    // 如果已加载或 window.turnstile 已存在（可能由 vue-turnstile 加载）
+    if (scriptLoaded || window.turnstile) {
+        scriptLoaded = true
+        return Promise.resolve()
+    }
+
+    // 如果正在加载，返回现有的 Promise
+    if (scriptLoading && scriptLoadPromise) {
+        return scriptLoadPromise
+    }
+
+    scriptLoading = true
+    scriptLoadPromise = new Promise((resolve, reject) => {
+        // 再次检查，防止竞态条件
+        if (window.turnstile) {
+            scriptLoaded = true
+            scriptLoading = false
+            resolve()
+            return
+        }
+
+        // 检查是否已有脚本标签（可能由其他组件添加）
+        const existingScript = document.querySelector('script[src*="challenges.cloudflare.com/turnstile"]')
+        if (existingScript) {
+            // 等待脚本加载完成
+            const checkInterval = setInterval(() => {
+                if (window.turnstile) {
+                    clearInterval(checkInterval)
+                    scriptLoaded = true
+                    scriptLoading = false
+                    resolve()
+                }
+            }, 100)
+            // 设置超时
+            setTimeout(() => {
+                clearInterval(checkInterval)
+                if (!window.turnstile) {
+                    scriptLoading = false
+                    reject(new Error('Turnstile script load timeout'))
+                }
+            }, 10000)
+            return
+        }
+
+        const script = document.createElement('script')
+        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'
+        script.async = true
+        script.defer = true
+
+        script.onload = () => {
+            // 等待 turnstile 对象可用
+            const checkInterval = setInterval(() => {
+                if (window.turnstile) {
+                    clearInterval(checkInterval)
+                    scriptLoaded = true
+                    scriptLoading = false
+                    resolve()
+                }
+            }, 50)
+            // 设置超时
+            setTimeout(() => {
+                clearInterval(checkInterval)
+                if (!window.turnstile) {
+                    scriptLoading = false
+                    reject(new Error('Turnstile API not available after script load'))
+                }
+            }, 5000)
+        }
+
+        script.onerror = () => {
+            scriptLoading = false
+            reject(new Error('Failed to load Turnstile script'))
+        }
+
+        document.head.appendChild(script)
+    })
+
+    return scriptLoadPromise
+}
+
+/**
+ * 清除配置缓存（用于管理员更新配置后刷新）
+ */
+export function clearTurnstileConfigCache() {
+    cachedConfig = null
+    configPromise = null
+}
+
+/**
+ * Turnstile 隐式验证 Composable
+ */
+export function useTurnstile(action?: string) {
+    const token = ref<string>('')
+    const isReady = ref(false)
+    const isEnabled = ref(false)
+    const siteKey = ref<string | null>(null)
+    const error = ref<string | null>(null)
+    const widgetId = ref<string | null>(null)
+    const containerId = ref<string>(`turnstile-${Math.random().toString(36).substring(7)}`)
+
+    // 初始化
+    async function init() {
+        try {
+            const config = await loadTurnstileConfig()
+            isEnabled.value = config.enabled
+            siteKey.value = config.siteKey
+
+            if (!config.enabled || !config.siteKey) {
+                isReady.value = true
+                return
+            }
+
+            await loadTurnstileScript()
+            isReady.value = true
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : String(err)
+            isReady.value = true
+        }
+    }
+
+    // 执行隐式验证
+    async function execute(): Promise<string> {
+        if (!isEnabled.value || !siteKey.value) {
+            return ''
+        }
+
+        if (!isReady.value) {
+            await init()
+        }
+
+        // 再次检查，init 可能因为配置问题而跳过
+        if (!isEnabled.value || !siteKey.value) {
+            return ''
+        }
+
+        return new Promise((resolve, reject) => {
+            if (!window.turnstile) {
+                reject(new Error('Turnstile not loaded'))
+                return
+            }
+
+            // 设置超时
+            const timeout = setTimeout(() => {
+                reject(new Error('Turnstile verification timeout'))
+            }, 30000) // 30秒超时
+
+            // 创建隐藏容器
+            // 注意：不能使用 display:none 或 visibility:hidden，否则 Turnstile 无法正常渲染
+            // 使用 position:fixed + 移出可视区域 + opacity:0 的方式隐藏
+            let container = document.getElementById(containerId.value)
+            if (!container) {
+                container = document.createElement('div')
+                container.id = containerId.value
+                container.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0;pointer-events:none;'
+                document.body.appendChild(container)
+            }
+
+            // 如果已有 widget，先移除
+            if (widgetId.value) {
+                try {
+                    window.turnstile.remove(widgetId.value)
+                    widgetId.value = null
+                } catch {
+                    // 忽略移除错误
+                }
+            }
+
+            try {
+                // 渲染新的 widget
+                // 注意：Turnstile 不支持 'invisible' size，使用 'compact' 配合隐藏容器实现隐式验证
+                // 实际的隐式/非交互模式需要在 Cloudflare Dashboard 中配置 widget 类型
+                widgetId.value = window.turnstile.render(container, {
+                    sitekey: siteKey.value!,
+                    action: action,
+                    size: 'compact',
+                    callback: (response: string) => {
+                        clearTimeout(timeout)
+                        token.value = response
+                        resolve(response)
+                    },
+                    'error-callback': () => {
+                        clearTimeout(timeout)
+                        reject(new Error('Turnstile verification failed'))
+                    },
+                    'expired-callback': () => {
+                        token.value = ''
+                    }
+                })
+            } catch (err) {
+                clearTimeout(timeout)
+                reject(err instanceof Error ? err : new Error(String(err)))
+            }
+        })
+    }
+
+    // 重置
+    function reset() {
+        token.value = ''
+        if (widgetId.value && window.turnstile) {
+            try {
+                window.turnstile.reset(widgetId.value)
+            } catch {
+                // 忽略重置错误
+            }
+        }
+    }
+
+    // 清理
+    function cleanup() {
+        if (widgetId.value && window.turnstile) {
+            try {
+                window.turnstile.remove(widgetId.value)
+            } catch {
+                // 忽略移除错误
+            }
+        }
+        const container = document.getElementById(containerId.value)
+        if (container) {
+            container.remove()
+        }
+    }
+
+    onMounted(() => {
+        init()
+    })
+
+    onUnmounted(() => {
+        cleanup()
+    })
+
+    return {
+        token,
+        isReady,
+        isEnabled,
+        siteKey,
+        error,
+        execute,
+        reset,
+        cleanup
+    }
+}
+
+export default useTurnstile
diff --git a/client/src/constants/adminSettings.ts b/client/src/constants/adminSettings.ts
new file mode 100644
index 0000000..979d12a
--- /dev/null
+++ b/client/src/constants/adminSettings.ts
@@ -0,0 +1,62 @@
+export type SystemSettingsSectionKey = 'access' | 'hosting' | 'brand' | 'security' | 'mail' | 'tickets' | 'popup'
+
+export interface SystemSettingsNavigationItem {
+  key: SystemSettingsSectionKey | 'telegram'
+  path: string
+  labelKey: string
+  descriptionKey?: string
+}
+
+export const systemSettingsSections: Array<SystemSettingsNavigationItem & { key: SystemSettingsSectionKey, descriptionKey: string }> = [
+  {
+    key: 'access',
+    path: '/admin/settings/access',
+    labelKey: 'admin.system.sections.access.title',
+    descriptionKey: 'admin.system.sections.access.description'
+  },
+  {
+    key: 'hosting',
+    path: '/admin/settings/hosting',
+    labelKey: 'admin.system.sections.hosting.title',
+    descriptionKey: 'admin.system.sections.hosting.description'
+  },
+  {
+    key: 'brand',
+    path: '/admin/settings/brand',
+    labelKey: 'admin.system.sections.brand.title',
+    descriptionKey: 'admin.system.sections.brand.description'
+  },
+  {
+    key: 'security',
+    path: '/admin/settings/security',
+    labelKey: 'admin.system.sections.security.title',
+    descriptionKey: 'admin.system.sections.security.description'
+  },
+  {
+    key: 'mail',
+    path: '/admin/settings/mail',
+    labelKey: 'admin.system.sections.mail.title',
+    descriptionKey: 'admin.system.sections.mail.description'
+  },
+  {
+    key: 'tickets',
+    path: '/admin/settings/tickets',
+    labelKey: 'admin.system.sections.tickets.title',
+    descriptionKey: 'admin.system.sections.tickets.description'
+  },
+  {
+    key: 'popup',
+    path: '/admin/settings/popup-announcement',
+    labelKey: 'admin.system.tabs.popupAnnouncement',
+    descriptionKey: 'admin.system.popupAnnouncement.description'
+  }
+]
+
+export const systemSettingsNavigationItems: SystemSettingsNavigationItem[] = [
+  ...systemSettingsSections,
+  {
+    key: 'telegram',
+    path: '/admin/settings/telegram',
+    labelKey: 'admin.system.tabs.telegram'
+  }
+]
diff --git a/client/src/data/funnyQuotes.ts b/client/src/data/funnyQuotes.ts
new file mode 100644
index 0000000..363dc5c
--- /dev/null
+++ b/client/src/data/funnyQuotes.ts
@@ -0,0 +1,625 @@
+// 随机骚话数据（中英文）
+// 根据用户浏览器语言随机显示
+
+export const funnyQuotesZh: string[] = [
+  '不是真爱，立刻提桶跑路，绝不留恋！',
+  '有图有真相，有针会友，基情满满！',
+  '羊毛不薅白不薅，薅完吃灰也开心！',
+  '买服务器像开盲盒，中了是大盘，炸了是传家宝。',
+  '价格低到离谱，配置高到飞起，谁能不心动？',
+  '十年后咱们都吃不上饭，但至少都有小姨子域名。',
+  '没有服务器的日子，总是缺了点什么。',
+  '跑路并不可怕，可怕的是没备份！',
+  '以针会友，私下交易，友情永流传！',
+  '配置不够豪，线路不够优，谁会多看一眼？',
+  '年付99还能忍，年付9.9直接让人失控。',
+  '探针一发，延迟低到爆，群里瞬间沸腾！',
+  '不怕机器炸，就怕炸之前没备份好数据。',
+  '商家跑路最可怕的时刻：昨晚刚续了费。',
+  '小鸡再小，也得硬撑一年不掉线！',
+  '薅羊毛薅到手软，囤机器囤到面板卡。',
+  '看到年付9.9，理智瞬间下线。',
+  '有机不玩是暴殄天物，有针不发是藏私。',
+  '商家说永不跑路，我就信；说送小姨子，我就冲！',
+  '服务器圈风险高，下单需谨慎；优惠一到，谨慎全抛脑后。',
+  '别问我为什么囤这么多，问就是空虚寂寞冷。',
+  '一键脚本装好，外网世界大门瞬间打开！',
+  '机器越大翻得越高，线路越优外网越妙。',
+  '跑路商家再多，也挡不住低价的诱惑。',
+  '没被跑路坑过的，不算真正老鸟。',
+  '私下交易友情升温，以针会友通宵不睡！',
+  '商家说限量100台我信，只剩1台我还信！',
+  '机器不稳不给钱，稳不起全额退——敢这么写我直接爆仓。',
+  '再穷不能穷机器，再苦不能没梯子。',
+  '机器不稳我不买，一稳我就续，续完开始后悔。',
+  '商家承诺养我一辈子，结果只养在吃灰区。',
+  '探针速度一出，全身舒坦；延迟一高，瞬间提桶。',
+  '年付9.9的宝贝，再抽风也得宠它一年。',
+  '薅到手抖，下单到腿软，醒来面板又多一堆吃灰机。',
+  '没被坑过的玩家，就像没谈过恋爱的少年。',
+  '商家说最后10台我冲，最后1台我再冲，售罄了我等下一波。',
+  '圈里老话：今晚不翻，就辜负了这条优质线路。',
+  '配置再牛，带宽再大，也挡不住半夜悄悄拔电源。',
+  '以针会友，见好针就激动；私交交易，爽到不行！',
+  '低价机器的命运：下单时热血，吃灰时心凉。',
+  '夜生活：刷针、撸配置、下单、吃灰循环。',
+  '商家跑路后，我不是哭，我在缅怀昨晚充的余额。',
+  '线路不够好不买，买了不够好也得用。',
+  '老鸟不怕炸，就怕炸前没多开窗口。',
+  '看到"不限流量"四个字，自动敬礼。',
+  '服务器圈的爱情：来得快，去得也快，留下吃灰和空 wallet。',
+  '再穷也要囤机器，再苦也要翻出去。',
+  '商家说有后门我信了，结果真是他逃跑的后门。',
+  '终极梦想：囤一辈子机器，翻一辈子墙，被优惠套路一辈子。',
+  'CN2 GIA线路一出，谁还看得上普通优化？',
+  '延迟低到单身狗都羡慕：稳定、快速、持久。',
+  '带宽小了别慌，多开几台就是大带宽。',
+  '商家说优化线路，我听成了优化利润。',
+  '探针结果完美，感觉人生达到了巅峰。',
+  '囤机器如囤老婆，多一个不嫌多。',
+  '机器炸了无所谓，数据没了才要命。',
+  '9.9的诱惑，比咖啡还提神。',
+  '刷针刷到天亮，激动到天亮，钱包空到天亮。',
+  '商家不跑才奇怪，我不上当才奇怪。',
+  '圈里真理：便宜没好货，但我就是要便宜的。',
+  '看到大盘鸡口水流，看到跑路鸡眼泪流。',
+  '日常：早上巡机，晚上撸配置。',
+  '备份才是王道，没备份纯属冒险。',
+  '商家说永不跑路，我说永不剁手，结果谁都没守住。',
+  '小机器翻墙也丝滑，低配置科学也快乐。',
+  '私下交易永不过时，好友永不散场。',
+  '低端玩家的梦想：一堆9.9撑起外网天堂。',
+  '跑路不可怕，可怕的是跑路前没薅够羊毛。',
+  '最浪漫的事：和基友一起刷针到天明。',
+  '机器多不压身，钱包空了再充。',
+  '商家限量发售，我限量上当。',
+  '原价999特价9.9，直接情绪起飞。',
+  '服务器圈没有真爱，只有真羊毛。',
+  '延迟超过200ms，直接判死刑。',
+  '囤到破产，翻到自由。',
+  '商家跑路是常态，我冲动是日常。',
+  '线路不优不买，买了不优也认。',
+  '信仰：相信爱情，更相信9.9。',
+  '探针一挂，群友齐聚；机器一稳，钱包一空。',
+  '吃灰的机器也是宝贝，至少曾经辉煌。',
+  '商家说风控严格，我只听到有爱。',
+  '年付机器的悲剧：首月完美，之后间歇抽风。',
+  '深夜最爱：一份热腾腾的探针结果。',
+  '生存法则：不怕贵，就怕不够便宜。',
+  '看到"不跑路承诺"，直接上头冲。',
+  '低配高玩，才叫真水平。',
+  '商家半夜维护，我半夜失眠祈祷。',
+  '机器多到用不过来，余额少到续不起。',
+  '口头禅：这个可以有，这个必须有！',
+  '跑路了别慌，先检查有没有备份。',
+  '9.9的机器，用着用着就超售了。',
+  '刷针如刷短视频，一刷就停不下来。',
+  '纯爱玩家：爱你，但你跑了我会爱下一台。',
+  '稳定靠商家，速度靠配置，快乐靠价格。',
+  '终极技巧：跑路前再薅最后一波。',
+  '一台炸了没关系，我还有99台吃灰。',
+  '商家说亲测稳定，我说亲测上当。',
+  '今晚不囤，人生少点乐趣。',
+  '墓志铭：一生被9.9温柔包围。',
+  '线路不香不买，香了不玩白不玩。',
+  '看到CN2线路，腿瞬间软了。',
+  '配置拉满，价格拉低，才是完美机器。',
+  '延迟低到怀疑运营商偷偷喜欢我。',
+  '带宽1G起步，才配叫入门机。',
+  '商家说轻量应用，我听成了轻量超售。',
+  '探针结果一出，群里集体高潮。',
+  'IPV4珍贵，IPV6随便用。',
+  '机器多到面板卡，幸福到登录都难。',
+  '线路优化越多，越觉得明天要寄。',
+  '看到独享IP，直接脑补独享世界。',
+  '低价大盘鸡，才是真爱。',
+  '商家深夜回票：别急，我在练跑路姿势。',
+  '睡眠质量取决于今晚线路稳不稳。',
+  '炸机如失恋，难过三天又找下一台。',
+  '看到"不限速"四个字，自动起立。',
+  '囤机器如收集邮票，总想集齐一套。',
+  '配置越高，翻得越爽。',
+  '商家说新机房，我翻译成新借口。',
+  '真正的玩家，从不删旧机，只开新机。',
+  '延迟低到像本地盘，幸福感爆棚。',
+  '带宽小了就多开几条隧道。',
+  '看到买一年送半年，直接失守。',
+  '线路直连才是王道，优化都是浮云。',
+  '机器囤得越多，心越踏实。',
+  '探针狂人：没针睡不着，好针睡得香。',
+  '配置再高，也怕超售。',
+  '商家说7×24支持，其实7天后24小时失联。',
+  '价格越低，底线越松。',
+  '看到中国香港CN2，瞬间原地跪下。',
+  '跑路后最痛的：没提前多续几年。',
+  '战斗口号：这个线路能冲，这个配置必须冲！',
+  '不稳定是常态，太稳定反而可疑。',
+  '囤机终极理由：总有一台救命。',
+  '商家说优化中，翻译：准备把你优化掉。',
+  '月付低于5刀，理智直接关机。',
+  '服务器爱情观：一见钟情，付款续费，用着吃灰。',
+  '生存铁律：永远别信"永不跑路"。',
+  '老鸟看商家，如看前任：爱恨纠缠。',
+  '延迟高提桶，速度快续费。',
+  '囤那么多机器，唯一出国的只有钱。',
+  '减肥秘诀：每天手指疯狂下单。',
+  '"不满意退款"一出，直接当真爱冲。',
+  '炸机别哭，至少曾经拥有过低延迟。',
+  '商家越吹线路，我越信明天要凉。',
+  '夜间仪式：开机、测速、关机、安心睡。',
+  '便宜没好货，但我偏爱便宜货。',
+  '限时秒杀，直接变三秒英雄。',
+  '真玩家不怕坑，就怕没坑可跳。',
+  '商家说高端配置，我脑补高端圈钱。',
+  '囤机如开盲盒，惊喜与惊吓并存。',
+  '梦想：一台机器用一辈子，一家商家不跑一辈子。',
+  '探针群白天冷清，深夜人满为患。',
+  '价格一跌，心情一飞。',
+  '"绝对稳定"翻译成"绝对要炸"。',
+  '黑五冲一年只用一天，才叫真勇士。',
+  '这里没有初心，只有薅心。',
+  '看到终身买断，直接情绪巅峰。',
+  '日常问候：你家线路今晚香不香？',
+  '跑路不可怕，可怕的是还想再续一次。',
+  '最高境界：面板全是绿油油的勾。',
+  '延迟低到让人怀疑人生：网还能这么快？',
+  '独立IP听成了独立自由。',
+  '理财观：分散投资在不同商家的低价机。',
+  '不怕炸，就怕无声无息地炸。',
+  '终身质保一出，直接当传家宝冲。',
+  '老鸟不追赔偿，只追下一波优惠。',
+  '人生轮回：冲→宠→弃→再冲。',
+  '商家说上新，我听成上新坑。',
+  '囤到密码都记不清了。',
+  '选机三步：先看价，再看线路，最后看配置。',
+  '探针一发群里狂欢，开票一发群里安静。',
+  '价格越低，智商越低。',
+  '实名免备案，直接脱裤准备冲。',
+  '老鸟测速比看电影还过瘾。',
+  '囤机如养后宫，越囤越空虚。',
+  '终极信仰：总有更香的线路在等我。',
+  '看到1T流量，直接脑补无限可能。',
+  '跑路后最大收获：下次先薅再爱。',
+  '没有真爱，只有真线路。',
+  '延迟一降，全员狂欢。',
+  '睡前最后一件事：瞅一眼机器状态。',
+  '风控严格听成了流量控制。',
+  '囤机悲哀：用得上的少，吃灰的多。',
+  '年度总结：薅了一年，被套了一年。',
+  '圈里最高智慧：活得便宜比活得久重要。',
+  '配置拉满却超售，才是最大悲剧。',
+  '线路再好，也怕机房断电。',
+  '带宽共享的快乐：你快我慢我快你慢。',
+  '商家说原生IP，我脑补原生态生活。',
+  '探针结果分享，瞬间收获无数羡慕。',
+  '低延迟的夜晚，才是好夜晚。',
+  '看到"免实名"，直接起飞。',
+  '机器多到像博物馆，自娱自乐。',
+  '线路直连一出，谁还用中转？',
+  '商家说性能翻倍，我信到下个月。',
+  '囤机是爱好，吃灰是修行。',
+  '配置越高，吃灰越心疼。',
+  '探针狂欢夜，胜过任何派对。',
+  '服务器圈的优雅：从容面对每一次炸机。',
+  '看到大流量包，直接眼神放光。',
+  '老玩家从不慌，备份在手天下我有。',
+  '延迟一好，人生一片光明。',
+  '商家承诺越多，我警惕越多。',
+  '囤机如喝茶，越囤越有味道。',
+  '夜里最温暖的事：机器安静跑着。',
+  '价格一亲民，心情一美丽。',
+  '服务器如咖啡，因人而异因机而异。',
+  '探针完美，胜过一切情话。',
+  '跑路是支线，薅毛才是主线。',
+  '囤到面板爆满，成就感拉满。',
+  '延迟低到像开了外挂。',
+  '私下交易的默契，不言而喻。',
+  '圈里优雅：从容续费，从容吃灰。',
+  '看到送流量，直接无法拒绝。',
+  '人生格言：能省则省，能薅绝不放过。',
+  '备份多几份，心安多几分。',
+  '商家说稳定如山，我说山也会崩。',
+  '囤机如存钱，越存越安心。',
+  '价格亲民，才叫真福利。',
+  '老鸟看商家：表面笑呵呵，内心已提桶。',
+  '延迟一降，世界都美好。',
+  '商家说技术升级，我说坑位升级。',
+  '囤机如养花，总有开花一天。',
+  '优惠码成功，快乐翻倍。',
+  '线路香到让人上瘾。',
+  '配置虽低，玩得开心就好。',
+  '商家说即将关站，我说即将薅完。',
+  '低配玩出花，才叫真大神。',
+  '带宽越大，梦想越大。',
+  '老玩家从不生气，只会默默再开一台。',
+  '延迟低到让人想谈恋爱。',
+  '商家吹得越狠，我信得越少。',
+  '吃灰也是种享受，至少曾经拥有。',
+  '探针结果差，就当锻炼心态。',
+  '商家深夜维护，我深夜守机。',
+  '囤机到极致，连梦里都在测速。',
+  '线路优化再多，也比不过直连。',
+  '私交优惠，友情加分。',
+  '炸机是惊喜，吃灰是日常。',
+  '看到买断终身，直接泪目。',
+  '最朴实梦想：一台永不抽风的机器。',
+  '带宽共享的哲学：你我一起慢。',
+  '商家说新活动，我说新羊毛。',
+  '囤机如读书，越囤越有内涵。',
+  '探针分享，瞬间成群宠。',
+  '配置再高，也要看线路配合。',
+  '价格一低，道德一松。',
+  '真正的自由：一台好机器走天下。',
+  '延迟高了就当环游世界。',
+  '商家说绝不超售，我说绝不错过。',
+  '囤机是艺术，吃灰是境界。',
+  '看到闪购，手指先于大脑。',
+  '线路不稳如爱情，飘忽不定。',
+  '老鸟心得：备份大于一切。',
+  '配置拉满却延迟高，才是最大讽刺。',
+  '探针结果好，感觉赢了人生。',
+  '商家说母公司支持，我说母公司先跑。',
+  '囤到100台，感觉自己是云老板。',
+  '延迟低到像本地，爽到飞起。',
+  '私下交易的快乐，只有圈里人懂。',
+  '服务器不怕吃灰，就怕从来没跑满速。',
+  '看到免费试用，直接当真爱。',
+  '夜宵首选：新鲜探针结果。',
+  '商家说永不限速，我信你到明天。',
+  '真正的浪漫：和好友一起熬夜刷针。',
+  '看到"不删机"承诺，感动到落泪。',
+  '玩家信条：能薅绝不手软。',
+  '延迟高了就当欣赏沿途风景。',
+  '商家半夜上线，我半夜精神百倍。',
+  '囤机如收集卡片，总想集满。',
+  '探针一挂，瞬间成英雄。',
+  '低价机器的骄傲：小身材大能量。',
+  '商家说优化性能，我听成优化利润。',
+  '真正的玩家，看优惠比看新闻还快。',
+  '一机在手，天下我有。',
+  '看到限量抢购，直接进入战斗状态。',
+  '最怕的不是跑路，是错过好线路。',
+  '延迟低到上瘾。',
+  '商家说升级机房，我说升级借口。',
+  '囤机如品茶，越品越香。',
+  '备份在手，心不慌。',
+  '服务器如老友，偶尔抽风也包容。',
+  '探针完美如诗，延迟高如散文。',
+  '商家跑路是剧情，优惠才是主角。',
+  '囤满面板，成就 unlocked。',
+  '线路直连的快感，无可替代。',
+  '私下交易，默契满分。',
+  '圈里最高境界：薅到商家怀疑人生。',
+  '看到大带宽，梦想起飞。',
+  '老玩家从容：炸就炸，再开一台。',
+  '延迟一低，整个人都灵了。',
+  '商家承诺如浮云，备份才是真爱。',
+  '囤机是信仰，吃灰是修行。',
+  '探针分享夜，最热闹的夜晚。',
+  '服务器如宠物，炸了再领养。',
+  '年付优惠一出，预算瞬间超支。',
+  '真正的智慧：优惠来了绝不犹豫。',
+  '多开备份，才是正道。',
+  '服务器圈的终极哲学：线路香，人生才香！',
+]
+
+export const funnyQuotesEn: string[] = [
+  'You might never use it, but you absolutely must have it—the eternal motto of hoarders!',
+  "If it's not true love, grab your bucket and run—no lingering!",
+  "Pics or it didn't happen; speed tests bring friends together!",
+  "If you don't pluck the wool, you're missing out—even if it just gathers dust later.",
+  'Buying a server is like opening a blind box: jackpot means premium specs, dud means family heirloom.',
+  "Price absurdly low, specs ridiculously high—who wouldn't be tempted?",
+  "Ten years from now we'll both be broke, but at least we'll have those \"sister\" domains.",
+  "Life without a server always feels like something's missing.",
+  "Hosts running away isn't scary—what's scary is having no backups!",
+  'Speed tests unite friends, private deals keep the friendship forever!',
+  'Specs not impressive enough, routes not premium enough—no one gives it a second glance.',
+  '$99 a year is tolerable; $9.99 a year makes you completely lose control.',
+  'Drop a speed test—ping so low the group chat explodes!',
+  'Not afraid of the machine crashing, just afraid of no backups before it does.',
+  'The worst time for a host to run: right after you renewed last night.',
+  'Even the tiniest server has to stay online for a full year!',
+  'Pluck wool till your hands cramp, hoard servers till the panel lags.',
+  'Spot a $9.99 yearly deal—rationality instantly logs off.',
+  "Owning a server you don't use is wasteful; not sharing speed tests is selfish.",
+  "Host says \"never shutting down\"—I believe it. Says \"free sister domains\"—I'm sold!",
+  'High risk in the server game, order carefully—until a deal shows up and caution goes out the window.',
+  "Don't ask why I hoard so many—just lonely, bored, and cold.",
+  'One-click script installed—gateway to the open internet swings wide!',
+  'Bigger machine, higher you climb; better routes, sweeter the outside world.',
+  'No number of runaway hosts can stop the allure of low prices.',
+  "If you've never been burned by a host running, you're not a true veteran.",
+  'Private deals warm the friendship; speed tests keep you up all night!',
+  'Host says "only 100 left"—I believe it. "Last one"—still believe it!',
+  "Unstable? No payment. Can't stay up? Full refund—if they dared advertise that, I'd go all in.",
+  "Can't be poor in servers, can't live without a ladder.",
+  'Unstable? I pass. Stable? I renew—then start regretting.',
+  'Host promised to keep me forever—turns out forever meant the dusty list.',
+  'Great speed test = instant bliss; high ping = instant bucket grab.',
+  '$9.99 yearly baby—even if it throws tantrums, you pamper it for a year.',
+  'Pluck till hands shake, order till legs go weak—wake up to another pile of dusty machines.',
+  "Never been scammed? You're like a kid who's never been in love.",
+  '"Last 10 left"—I rush. "Final one"—I rush again. Sold out—I wait for the next wave.',
+  "Old community saying: if you don't climb tonight, you've wasted a great route.",
+  'No matter how beastly the specs or wide the bandwidth, nothing stops a midnight power pull.',
+  'Speed tests bring friends—good result gets everyone excited; private deal feels amazing!',
+  'Cheap server fate: burning passion at purchase, cold regret in dust.',
+  'Night routine: test speeds, drool over specs, order, then dust cycle.',
+  "After a host runs, I'm not crying—I'm mourning last night's top-up.",
+  "Route not great? Don't buy. Bought and it's meh? Deal with it.",
+  "Veterans don't fear crashes—just fear not opening enough tabs before one.",
+  'Seeing "unlimited traffic"—automatic salute.',
+  'Server love: comes fierce, leaves fast, leaves dust and an empty wallet.',
+  'Poor or not, hoard servers; tough or not, climb out.',
+  "Host said there's a back door—I believed it. Turns out it was their escape route.",
+  'Ultimate dream: hoard servers forever, climb walls forever, get lured by deals forever.',
+  "Once you've tried CN2 GIA, who looks at regular optimized routes?",
+  'Ping so low even single folks are jealous: stable, fast, lasts long.',
+  'Small bandwidth? No problem—just run a few more tunnels.',
+  'Host says "optimizing routes"—I hear "optimizing profits."',
+  "Perfect speed test feels like reaching life's peak.",
+  'Hoard servers like wives—one more is never too many.',
+  "Machine down? Fine. Data gone? That's the killer.",
+  '$9.99 temptation—more energizing than coffee.',
+  'Test speeds till dawn, excitement till dawn, empty wallet till dawn.',
+  "Host not running would be weird; me not falling for it would be weirder.",
+  'Community truth: nothing good is cheap—but I only want cheap.',
+  'Big stable server = drooling; runaway server = tears.',
+  'Daily life: morning patrol, evening spec browsing.',
+  'Backups are king—no backups is pure gambling.',
+  'Host swore never to run—I swore never to buy again. Neither kept the promise.',
+  'Tiny server, smooth climbing; low specs, still fun science.',
+  'Private deals never go out of style, friends never part.',
+  'Low-end dream: a pile of $9.99 machines powering internet heaven.',
+  "Runaway not scary—scary is not plucking enough wool before it happens.",
+  'Most romantic thing: staying up till dawn testing speeds with bros.',
+  "Too many servers won't crush you—just top up when the wallet's dry.",
+  'Host does limited drops—I do limited gullibility.',
+  'Original $999, flash $9.99—instant emotional takeoff.',
+  'No true love in servers—just true wool.',
+  'Ping over 200ms? Death sentence.',
+  'Hoard till broke, climb till free.',
+  'Hosts running is routine, my impulse buys are daily.',
+  "Route not great? Pass. Bought and meh? Accept it.",
+  'Faith: believe in love, believe harder in $9.99.',
+  'Drop a test—friends swarm; server stable—wallet empty.',
+  'Dusty servers are still treasures—at least they once shone.',
+  'Host mentions strict controls—I just hear "love."',
+  'Yearly server tragedy: perfect first month, random tantrums after.',
+  'Favorite midnight snack: fresh hot speed test results.',
+  'Survival rule: not afraid of expensive, afraid of not cheap enough.',
+  'See "no shutdown promise"—rush in headfirst.',
+  'Low specs, high skill—that\'s real talent.',
+  'Host does midnight maintenance—I do midnight insomnia prayers.',
+  "Servers so many you can't use them all, balance too low to renew.",
+  'Catchphrase: this one works, this one must-have!',
+  'Runaway? Stay calm—first check backups.',
+  '$9.99 server eventually gets oversold.',
+  "Testing speeds like scrolling shorts—can't stop.",
+  "Pure-love player: I'll love you, but if you run I'll love the next one.",
+  'Stability from host, speed from specs, joy from price.',
+  'Ultimate skill: one last wool pluck before the run.',
+  "One down? No big deal—99 more gathering dust.",
+  'Host says "personally tested stable"—I hear "personally tested gullible."',
+  "Not hoarding tonight = missing out on life's fun.",
+  'Epitaph: Gently surrounded by countless $9.99 deals forever.',
+  "Route not great? Don't buy. Great but unused? Still worth it.",
+  'Spot CN2 route—knees instantly weak.',
+  "Maxed specs, rock-bottom price—that's perfection.",
+  'Ping so low you suspect the ISP secretly loves you.',
+  '1G bandwidth minimum for a proper entry-level machine.',
+  'Host says "lightweight application"—I hear "lightweight overselling."',
+  'Speed test drops—group chat collective peak.',
+  'IPv4 is precious, IPv6 is free real estate.',
+  'So many servers the panel lags—blissfully hard to log in.',
+  "More \"optimized\" routes promised, more convinced it's doomed tomorrow.",
+  'Spot dedicated IP—imagine owning the world.',
+  'Cheap big server = true love.',
+  'Host replies ticket at midnight: hold on, practicing escape moves.',
+  "Sleep quality depends on tonight's route stability.",
+  'Crash like a breakup—sad for three days, then find the next one.',
+  'Seeing "no throttling"—automatic standing ovation.',
+  "Hoarding servers like collecting stamps—always aiming for a full set.",
+  'Higher specs, smoother climbing.',
+  'Host says new datacenter—I translate to new excuse.',
+  'Real players never delete old machines—just open new ones.',
+  'Ping so low it feels local—pure happiness overload.',
+  'Small bandwidth? Just run a few extra tunnels.',
+  'Buy one year get six months free—defenses completely down.',
+  'Direct routes are king—optimized are just clouds.',
+  'More servers hoarded, more peace of mind.',
+  "Speed test addict: no test = can't sleep, great test = sweet dreams.",
+  'No matter how high the specs, overselling ruins everything.',
+  '"7×24 support" really means gone after 7 days for 24 hours.',
+  'Lower price, looser standards.',
+  'Spot Hong Kong CN2—instant kneel.',
+  'Worst pain after a run: not renewing for a few extra years first.',
+  'Battle cry: this route is rush-worthy, these specs are must-rush!',
+  'Unstable is normal—too stable feels suspicious.',
+  'Ultimate hoarding excuse: one will save the day someday.',
+  'Host says "optimizing"—translation: preparing to optimize you out.',
+  'Monthly under $5—rationality shuts down.',
+  'Server romance: love at first sight, instant payment, eventual dust.',
+  'Iron survival rule: never believe "guaranteed no shutdowns."',
+  'Veterans view hosts like exes: tangled love and hate.',
+  'High ping = bucket; fast speed = renew.',
+  'Hoarded so many—the only thing that went abroad was my money.',
+  'Diet secret: daily finger frenzy ordering.',
+  '"Not satisfied? Refund"—taken as gospel and rushed.',
+  'Crash? Don\'t cry—at least you once had low ping.',
+  "Harder the host hypes routes, more certain tomorrow's doom.",
+  'Night ritual: boot, test, shut down, sleep peacefully.',
+  'Cheap has no quality—but I only want cheap.',
+  'Limited flash sale—turn into a three-second hero.',
+  "Real players don't fear pits—just fear no pits to jump into.",
+  'Host brags high-end specs—I picture high-end cash grab.',
+  'Hoarding like blind boxes—thrills and scares guaranteed.',
+  'Dream: one machine for life, one host that never runs.',
+  'Speed test groups dead by day, packed at night.',
+  'Price drops—mood soars.',
+  '"Absolutely stable" = "absolutely crashing soon."',
+  'Black Friday rush on a one-day-use server = true warrior.',
+  'No original mission here—just pure plucking spirit.',
+  'Spot lifetime buyout—emotional climax.',
+  "Daily greeting: how's your route smelling tonight?",
+  'Runaway not scary—scary is wanting to renew again.',
+  'Peak realm: panel full of green checks.',
+  'Ping so low it triggers existential questions: internet can be this fast?',
+  'Dedicated IP sounds like dedicated freedom.',
+  "Investing: diversify across different hosts' cheap machines.",
+  'Not afraid of crashes—afraid of silent ones.',
+  'Lifetime warranty—treat as heirloom and rush.',
+  "Veterans don't chase refunds—chase next deal.",
+  'Life cycle: rush → pamper → abandon → rush again.',
+  'Host says new stock—I hear new pit.',
+  'Hoarded till passwords are a blur.',
+  'Machine picking order: price first, route second, specs last.',
+  'Test drops = group frenzy; ticket opens = group silence.',
+  'Lower price, lower IQ.',
+  'No real-name required—pants down, ready to charge.',
+  'Veterans find speed testing more thrilling than movies.',
+  'Hoarding like building a harem—the more, the emptier inside.',
+  "Ultimate faith: there's always a better route waiting.",
+  'Spot 1TB traffic—mind fills with infinite possibilities.',
+  'Biggest lesson after a run: pluck first, love later.',
+  'No true love—just true routes.',
+  'Ping drops—collective ecstasy.',
+  'Last thing before bed: glance at server status.',
+  'Strict controls sounds like traffic control.',
+  'Hoarding tragedy: few actually used, many dusty.',
+  'Yearly summary: plucked all year, got lured all year.',
+  'Community wisdom: living cheap beats living long.',
+  'Max specs but oversold—that\'s the real tragedy.',
+  'Best route still fears datacenter blackout.',
+  'Shared bandwidth joy: you fast I slow, I fast you slow.',
+  'Host says native IP—I picture wilderness living.',
+  'Sharing speed tests = instant flood of envy.',
+  'Low-ping nights are the best nights.',
+  'Spot "no ID required"—instant takeoff.',
+  'Servers so many it\'s a personal museum.',
+  'Direct route drops—who still uses relays?',
+  'Host says double performance—I believe till next month.',
+  'Hoarding is hobby, dusting is discipline.',
+  'Higher specs, more painful the dust.',
+  'Speed test party nights beat any club.',
+  'Server community grace: calmly facing every crash.',
+  'Spot huge traffic pack—eyes light up.',
+  "Veterans never panic—backups mean the world is yours.",
+  'Good ping = bright life.',
+  'More host promises, more my caution.',
+  'Hoarding like tea tasting—the more, the richer the flavor.',
+  'Warmest night feeling: server quietly running.',
+  'Friendly price = beautiful mood.',
+  'Servers like coffee—different strokes for different folks.',
+  'Perfect speed test beats any love confession.',
+  'Runaway is side plot—deals are the main story.',
+  'Panel full = achievement unlocked.',
+  'Ping so low it feels like cheating.',
+  'Private deal chemistry—words unnecessary.',
+  'Community grace: calmly renewing, calmly dusting.',
+  'Spot free traffic—impossible to resist.',
+  'Life motto: save where you can, pluck without mercy.',
+  'Extra backups = extra peace.',
+  'Host says stable as mountain—I say mountains crumble too.',
+  'Hoarding like savings—more secure the more you have.',
+  'Friendly price = real welfare.',
+  'Veterans smile outside, bucket ready inside.',
+  'Ping drop = beautiful world.',
+  'Host says tech upgrade—I say pit upgrade.',
+  "Hoarding like planting flowers—one day they'll bloom.",
+  'Coupon success = double happiness.',
+  'Great route = addictive.',
+  "Low specs but fun—that's enough.",
+  'Host says closing soon—I say finishing the pluck.',
+  'Low specs mastered = true god.',
+  'Bigger bandwidth, bigger dreams.',
+  'Veterans never rage—just quietly open another.',
+  'Low ping makes you want to fall in love.',
+  'Harder the hype, less I believe.',
+  "Dusting is also enjoyment—at least you once owned it.",
+  'Bad test result = mindset training.',
+  'Host midnight maintenance—I midnight vigil.',
+  'Hoarding extreme: ordering in dreams.',
+  'No many optimizations beat direct.',
+  'Private deal perks = friendship bonus.',
+  'Crash = surprise, dust = routine.',
+  'Spot lifetime ownership—tears of joy.',
+  'Simplest dream: one machine that never tantrums.',
+  'Shared bandwidth philosophy: we slow together.',
+  'Host says new event—I say new wool.',
+  'Hoarding like reading—the more, the deeper.',
+  'Test sharing = instant group favorite.',
+  'High specs still need good routes to shine.',
+  'Low price = loose morals.',
+  'True freedom: one great machine rules the world.',
+  'High ping = world tour.',
+  "Host says no overselling—I say no missing it.",
+  'Hoarding is art, dusting is enlightenment.',
+  'Flash sale—fingers faster than brain.',
+  'Unstable route like love—fickle.',
+  'Veteran wisdom: backups above all.',
+  'Max specs high ping = ultimate irony.',
+  'Great test result = winning at life.',
+  'Host says parent company backing—I say parent runs first.',
+  'Hoard 100 = feel like cloud tycoon.',
+  'Low ping like local—pure bliss.',
+  'Private deal joy—only insiders get it.',
+  "Server not afraid of dust—afraid of never hitting full speed.",
+  'Spot free trial—treat as true love.',
+  'Best midnight snack: fresh test results.',
+  'Host says no throttling forever—I believe till tomorrow.',
+  'True romance: all-night speed testing with friends.',
+  '"No deletion" promise—moved to tears.',
+  'Player creed: never go soft on plucking.',
+  'High ping = enjoy the scenery.',
+  "Host online at midnight—I'm wide awake.",
+  "Hoarding like collecting cards—aim for full set.",
+  'Drop a test = instant hero.',
+  'Cheap machine pride: small body, big energy.',
+  'Host says optimizing performance—I hear optimizing profit.',
+  'Real players spot deals faster than news.',
+  'One machine in hand, the world is yours.',
+  'Limited grab—enter battle mode.',
+  'Worst fear: not runaway, but missing great route.',
+  'Low ping = addiction.',
+  'Host says datacenter upgrade—I say excuse upgrade.',
+  'Hoarding like fine tea—the longer, the better.',
+  'Backups in hand = no panic.',
+  'Server like old friend—tolerate the occasional mood swing.',
+  'Perfect test = poetry, high ping = prose.',
+  'Runaway is subplot, deals are star.',
+  'Full panel = achievement maxed.',
+  'Direct route pleasure—irreplaceable.',
+  'Private deal sync—perfect score.',
+  'Peak realm: pluck till host questions life.',
+  'Spot huge bandwidth—dreams soar.',
+  'Veteran calm: crash happens, just open another.',
+  'Low ping = soul awakened.',
+  'Host promises like clouds—backups are true love.',
+  'Hoarding is faith, dusting is practice.',
+  'Test sharing night = liveliest night.',
+  'Server like pet—adopt another when one goes.',
+  'Yearly deal drops—budget instantly blown.',
+  'True wisdom: never hesitate on deals.',
+  'Multiple backups = proper way.',
+  'Ultimate server community philosophy: great routes make life great!',
+]
+
+/**
+ * 根据语言获取随机骚话
+ * @param locale 当前语言 ('zh-CN' | 'en')
+ * @returns 随机骚话字符串
+ */
+export function getRandomFunnyQuote(locale: string): string {
+  const quotes = locale.startsWith('zh') ? funnyQuotesZh : funnyQuotesEn
+  const filteredQuotes = quotes.filter(quote => !/backup|备份/i.test(quote))
+  
+  // 安全检查：确保数组存在且有内容
+  if (!Array.isArray(filteredQuotes) || filteredQuotes.length === 0) {
+    return locale.startsWith('zh') ? '这是您的资源使用概览' : 'This is your resource usage overview'
+  }
+  
+  const randomIndex = Math.floor(Math.random() * filteredQuotes.length)
+  return filteredQuotes[randomIndex]
+}
diff --git a/client/src/env.d.ts b/client/src/env.d.ts
new file mode 100644
index 0000000..f4d7cda
--- /dev/null
+++ b/client/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
diff --git a/client/src/lib/terminal-core.ts b/client/src/lib/terminal-core.ts
new file mode 100644
index 0000000..cd63075
--- /dev/null
+++ b/client/src/lib/terminal-core.ts
@@ -0,0 +1,214 @@
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { SearchAddon } from '@xterm/addon-search'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { WebglAddon } from '@xterm/addon-webgl'
+import { SerializeAddon } from '@xterm/addon-serialize'
+import { ClipboardAddon } from '@xterm/addon-clipboard'
+
+export interface TerminalControlMessage {
+  type: string
+  sessionId?: string
+  message?: string
+  reason?: string
+  mode?: 'exec' | 'console'
+}
+
+export interface TerminalRuntime {
+  terminal: Terminal
+  fitAddon: FitAddon
+  searchAddon: SearchAddon
+  unicodeAddon: Unicode11Addon
+  webglAddon: WebglAddon | null
+  serializeAddon: SerializeAddon
+  clipboardAddon: ClipboardAddon
+  isWebGLEnabled: boolean
+}
+
+export interface TerminalRuntimeTarget {
+  terminal: Terminal | null
+  fitAddon: FitAddon | null
+  searchAddon: SearchAddon | null
+  unicodeAddon: Unicode11Addon | null
+  webglAddon: WebglAddon | null
+  serializeAddon: SerializeAddon | null
+  clipboardAddon: ClipboardAddon | null
+  eventsBound: boolean
+  isWebGLEnabled: boolean
+}
+
+export const TERMINAL_MAX_RECONNECT_ATTEMPTS = 10
+
+const NON_RETRYABLE_CLOSE_CODES = new Set([1000, 1001, 4000, 4001, 4002, 4003, 4004])
+
+export function shouldRetryTerminalClose(code: number): boolean {
+  return !NON_RETRYABLE_CLOSE_CODES.has(code)
+}
+
+export function buildTerminalWebSocketUrl(instanceId: number, ticket: string): string {
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const host = window.location.host
+  return `${protocol}//${host}/api/ws/instances/${instanceId}/terminal?ticket=${encodeURIComponent(ticket)}`
+}
+
+export function isTerminalControlMessage(parsed: unknown): parsed is TerminalControlMessage {
+  return typeof parsed === 'object' && parsed !== null && 'type' in parsed && typeof (parsed as Record<string, unknown>).type === 'string'
+}
+
+export function handleTerminalSocketPayload(
+  data: string | ArrayBuffer | Blob,
+  getTerminal: () => Terminal | null,
+  onControlMessage: (message: TerminalControlMessage) => void
+): void {
+  if (typeof data === 'string') {
+    try {
+      const message = JSON.parse(data)
+      if (isTerminalControlMessage(message)) {
+        onControlMessage(message)
+        return
+      }
+    } catch {
+      // ignore
+    }
+
+    getTerminal()?.write(data)
+    return
+  }
+
+  if (data instanceof ArrayBuffer) {
+    getTerminal()?.write(new Uint8Array(data))
+    return
+  }
+
+  if (data instanceof Blob) {
+    void data.arrayBuffer().then(buffer => {
+      getTerminal()?.write(new Uint8Array(buffer))
+    }).catch(() => {
+      // ignore
+    })
+  }
+}
+
+export function createTerminalRuntime(options: {
+  container: HTMLElement
+  fontSize: number
+  fontFamily: string
+  theme: Record<string, string>
+  isMobileDevice: boolean
+  enableWebgl?: boolean
+  onBell?: () => void
+  onSelectionCopy?: (selection: string) => void
+  onLinkHover?: (event: MouseEvent, uri: string) => void
+  onLinkLeave?: () => void
+}): TerminalRuntime {
+  const terminal = new Terminal({
+    fontSize: options.fontSize,
+    fontFamily: options.fontFamily,
+    cursorBlink: true,
+    cursorStyle: 'bar',
+    theme: options.theme,
+    allowTransparency: false,
+    scrollback: 10000,
+    tabStopWidth: 4,
+    convertEol: false,
+    screenReaderMode: false,
+    macOptionIsMeta: true,
+    altClickMovesCursor: true,
+    allowProposedApi: true
+  })
+
+  const fitAddon = new FitAddon()
+  const webLinksAddon = new WebLinksAddon(
+    (_event, uri) => {
+      window.open(uri, '_blank', 'noopener,noreferrer')
+    },
+    {
+      hover: (event, uri) => {
+        options.onLinkHover?.(event, uri)
+      },
+      leave: () => {
+        options.onLinkLeave?.()
+      }
+    }
+  )
+  const searchAddon = new SearchAddon()
+  const unicodeAddon = new Unicode11Addon()
+  const serializeAddon = new SerializeAddon()
+  const clipboardAddon = new ClipboardAddon()
+
+  terminal.loadAddon(fitAddon)
+  terminal.loadAddon(webLinksAddon)
+  terminal.loadAddon(searchAddon)
+  terminal.loadAddon(unicodeAddon)
+  terminal.loadAddon(serializeAddon)
+  terminal.loadAddon(clipboardAddon)
+  terminal.unicode.activeVersion = '11'
+  terminal.open(options.container)
+
+  let webglAddon: WebglAddon | null = null
+  let isWebGLEnabled = false
+
+  if (options.enableWebgl !== false && !options.isMobileDevice) {
+    try {
+      const webgl = new WebglAddon()
+      webgl.onContextLoss(() => {
+        webgl.dispose()
+      })
+      terminal.loadAddon(webgl)
+      webglAddon = webgl
+      isWebGLEnabled = true
+    } catch {
+      webglAddon = null
+      isWebGLEnabled = false
+    }
+  }
+
+  if (options.onBell) {
+    terminal.onBell(options.onBell)
+  }
+
+  if (options.onSelectionCopy) {
+    terminal.onSelectionChange(() => {
+      if (!terminal.hasSelection()) return
+      const selection = terminal.getSelection()
+      if (selection) {
+        options.onSelectionCopy?.(selection)
+      }
+    })
+  }
+
+  setTimeout(() => fitAddon.fit(), 0)
+
+  return {
+    terminal,
+    fitAddon,
+    searchAddon,
+    unicodeAddon,
+    webglAddon,
+    serializeAddon,
+    clipboardAddon,
+    isWebGLEnabled
+  }
+}
+
+export function disposeTerminalRuntime(target: TerminalRuntimeTarget): void {
+  if (target.webglAddon) {
+    target.webglAddon.dispose()
+    target.webglAddon = null
+  }
+
+  target.fitAddon = null
+  target.searchAddon = null
+  target.unicodeAddon = null
+  target.serializeAddon = null
+  target.clipboardAddon = null
+
+  if (target.terminal) {
+    target.terminal.dispose()
+    target.terminal = null
+  }
+
+  target.eventsBound = false
+  target.isWebGLEnabled = false
+}
diff --git a/client/src/locales/en.ts b/client/src/locales/en.ts
new file mode 100644
index 0000000..56a78f9
--- /dev/null
+++ b/client/src/locales/en.ts
@@ -0,0 +1,7443 @@
+export default {
+    // Common
+    common: {
+        confirm: 'Confirm',
+        cancel: 'Cancel',
+        save: 'Save',
+        saving: 'Saving...',
+        send: 'Send',
+        sending: 'Sending...',
+        syncing: 'Syncing...',
+        processing: 'Processing...',
+        submitting: 'Submitting...',
+        delete: 'Delete',
+        noIncudalHint: 'Please do not use in names or descriptions',
+        edit: 'Edit',
+        create: 'Create',
+        creating: 'Creating...',
+        deleting: 'Deleting...',
+        deleteSuccess: 'Deleted successfully',
+        search: 'Search',
+        loading: 'Loading...',
+        noData: 'No data',
+        noSearchResults: 'No results found',
+        success: 'Success',
+        error: 'Error',
+        warning: 'Warning',
+        info: 'Info',
+        yes: 'Yes',
+        no: 'No',
+        back: 'Back',
+        next: 'Next',
+        previous: 'Previous',
+        close: 'Close',
+        reset: 'Reset',
+        refresh: 'Refresh',
+        copy: 'Copy',
+        copied: 'Copied',
+        copyFailed: 'Copy failed',
+        show: 'Show',
+        hide: 'Hide',
+        done: 'Done',
+        actions: 'Actions',
+        details: 'Details',
+        status: 'Status',
+        name: 'Name',
+        description: 'Description',
+        createdAt: 'Created At',
+        updatedAt: 'Updated At',
+        none: 'None',
+        notSet: 'Not Set',
+        turnstileFailed: 'Verification failed, please try again',
+        filter: 'Filter',
+        total: 'Total',
+        items: 'items',
+        searchPlaceholder: 'Search...',
+        developing: 'In Development',
+        developingHint: 'This feature is under development, stay tuned...',
+        gotIt: 'Got it',
+        expand: 'Expand',
+        collapse: 'Collapse',
+        page: 'page',
+        pageInfo: 'Page {current}/{total}, {count} total',
+        prevPage: 'Previous',
+        nextPage: 'Next',
+        loadFailed: 'Failed to load',
+        all: 'All',
+        perPage: 'Per page',
+        totalCount: 'Total {count}',
+        day: 'Day',
+        days: 'days',
+        seconds: 'seconds',
+        month: 'Month',
+        totalRecords: '{count} records in total',
+        deleted: 'Deleted',
+        // Country names
+        countries: {
+            // Asia
+            cn: 'China',
+            hk: 'Hong Kong',
+            mo: 'Macau',
+            tw: 'Taiwan',
+            jp: 'Japan',
+            kr: 'South Korea',
+            sg: 'Singapore',
+            my: 'Malaysia',
+            th: 'Thailand',
+            vn: 'Vietnam',
+            ph: 'Philippines',
+            id: 'Indonesia',
+            in: 'India',
+            pk: 'Pakistan',
+            bd: 'Bangladesh',
+            kz: 'Kazakhstan',
+            uz: 'Uzbekistan',
+            ae: 'UAE',
+            sa: 'Saudi Arabia',
+            il: 'Israel',
+            tr: 'Turkey',
+            // Europe
+            gb: 'United Kingdom',
+            de: 'Germany',
+            fr: 'France',
+            nl: 'Netherlands',
+            be: 'Belgium',
+            lu: 'Luxembourg',
+            ch: 'Switzerland',
+            at: 'Austria',
+            it: 'Italy',
+            es: 'Spain',
+            pt: 'Portugal',
+            ie: 'Ireland',
+            se: 'Sweden',
+            no: 'Norway',
+            dk: 'Denmark',
+            fi: 'Finland',
+            pl: 'Poland',
+            cz: 'Czech Republic',
+            hu: 'Hungary',
+            ro: 'Romania',
+            bg: 'Bulgaria',
+            gr: 'Greece',
+            ua: 'Ukraine',
+            ru: 'Russia',
+            // North America
+            us: 'United States',
+            ca: 'Canada',
+            mx: 'Mexico',
+            // South America
+            br: 'Brazil',
+            ar: 'Argentina',
+            cl: 'Chile',
+            co: 'Colombia',
+            pe: 'Peru',
+            // Oceania
+            au: 'Australia',
+            nz: 'New Zealand',
+            // Africa
+            za: 'South Africa',
+            eg: 'Egypt',
+            ng: 'Nigeria',
+            ke: 'Kenya',
+        },
+        // Network modes (unified definition)
+        networkMode: {
+            nat: 'IPv4 NAT',
+            nat_ipv6: 'IPv4 NAT & IPv6',
+            nat_ipv6_nat: 'IPv4 NAT & IPv6 NAT',
+            ipv6_only: 'IPv6 Only',
+            ipv6_nat: 'IPv6 NAT',
+        },
+        // Instance types
+        instanceType: {
+            container: 'LXC',
+            vm: 'KVM',
+        },
+        // Enabled/Disabled states
+        enabled: 'Enabled',
+        disabled: 'Disabled',
+        active: 'Active',
+        inactive: 'Inactive',
+        unlimited: 'Unlimited',
+    },
+
+    validation: {
+        fields: {
+            name: 'Name',
+            identifier: 'Identifier',
+            content: 'Content',
+            serverAddress: 'Server address',
+            ipAddress: 'IP address',
+            ipOrDomain: 'IP address or domain',
+        },
+        required: '{field} cannot be empty',
+        minLength: '{field} must be at least {min} characters',
+        maxLength: '{field} cannot exceed {max} characters',
+        illegalChars: '{field} contains invalid characters',
+        safeNameChars: '{field} may only contain Chinese characters, letters, numbers, hyphens, underscores, spaces, commas, and parentheses',
+        identifierChars: '{field} may only contain letters, numbers, hyphens, and underscores, and must start with a letter',
+        invalidFormat: '{field} format is invalid',
+        urlProtocol: '{field} must start with http:// or https://',
+        hostAddressInvalid: '{field} format is invalid. Enter a valid IPv4 address, IPv6 address, or domain name',
+        ipAddressInvalid: '{field} format is invalid. Enter a valid IPv4 or IPv6 address',
+        ipv4Invalid: '{field} format is invalid. Enter a valid IPv4 address',
+    },
+
+    // Navigation
+    nav: {
+        main: 'Main',
+        dashboard: 'Dashboard',
+        instances: 'Instances',
+        transfers: 'Transfers',
+        friends: 'Friends',
+        tickets: 'Tickets',
+        resources: 'Resources',
+        myHosts: 'My Hosts',
+        myPackages: 'My Packages',
+        myImages: 'My Images',
+        logs: 'Logs',
+        inbox: 'Notifications',
+        settings: 'Settings',
+        wallet: 'Wallet',
+        invites: 'Invites',
+        help: 'Help',
+        admin: 'Admin',
+        expand: 'Expand',
+        system: 'System',
+        users: 'Users',
+        statistics: 'Statistics',
+        hosts: 'Hosts',
+        images: 'Images',
+        packages: 'Packages',
+        helpManage: 'Help',
+        oauth: 'OAuth',
+        broadcast: 'Broadcast',
+        paymentProviders: 'Payment Providers',
+        billing: 'Billing',
+        withdrawals: 'Withdrawals',
+        aff: 'Referral',
+        openMenu: 'Open menu',
+        collapseSidebar: 'Collapse sidebar',
+        toggleTheme: 'Toggle theme',
+        toggleLanguage: 'Toggle language',
+        terminal: 'Terminal',
+        extensions: 'Extensions',
+        scripts: 'Scripts',
+        operations: 'Operations',
+        createInstance: 'Create Instance',
+        create: 'Create',
+        entertainment: 'Benefits',
+        hosting: 'Hosting',
+        hostingWallet: 'Hosting Wallet',
+        earnings: 'Earnings',
+        mail: 'Mail',
+        instanceDetail: 'Instance Details',
+        mailDomain: 'Mail Domain',
+        myHostCreate: 'Create Host',
+        myHostDetail: 'Host Details',
+        myPackageCreate: 'Create Package',
+        myPackageEdit: 'Edit Package',
+        telegramSettings: 'Telegram Settings',
+        adminCreateInstance: 'Admin Create Instance',
+    },
+
+    // Theme
+    theme: {
+        dark: 'Dark Mode',
+        light: 'Light Mode',
+        system: 'System',
+    },
+
+    freeSite: {
+        billingCycleLabel: {
+            monthly: 'Monthly? The moon paid it',
+            quarterly: 'Quarterly? All seasons comped',
+            semiAnnual: 'Half-year joy pass',
+            annual: 'Yearly? Wallet is asleep',
+            custom: '{months} months, paid in air',
+            free: 'Free-roam permit',
+        },
+        billingCycleShort: {
+            monthly: '/mo, no panic',
+            quarterly: '/quarter, comped',
+            semiAnnual: '/half-year joy',
+            annual: '/year, gifted',
+            custom: '/{months} months joy',
+        },
+        copy: {
+            finalPrice: 'Ceremonial total',
+            renewPrice: 'Renewal? Stamp the tiny form',
+            billingCycle: 'Joy tier',
+            needPay: 'Symbolic due',
+            originalPrice: 'Museum price tag',
+            oldDailyPrice: 'Old daily price, for archaeology',
+            newDailyPrice: 'New daily price, decorative',
+            remainingValue: 'Remaining value: priceless joy',
+            newPlanCost: 'New plan cost: air coins',
+            currentBalance: 'Balance mascot',
+            balanceAfterRenew: 'Balance after renew: suspiciously unchanged',
+            walletBalanceTab: 'Joy Balance',
+            walletLogsTab: 'Comped Ledger',
+            walletCurrentBalance: 'Current joy meter',
+            walletDescription: 'Freebie site mode is on. Recharge went out for tea; balance is guarding the lobby.',
+            walletLogsDescription: 'Balance wiggles are recorded here. Relax, the main quest is still free play.',
+            walletTotalRecharge: 'Total comps',
+            walletTotalConsume: 'Joy vaporized',
+            walletDestroyedValue: 'Destroyed souvenir value',
+            dashboardNewInstance: 'Joy Instance',
+            dashboardCreateInstance: 'Summon joy machine',
+            dashboardCreateFirst: 'Summon the first one',
+            dashboardUserBalance: 'Joy balance',
+            dashboardBalanceValue: 'Free is priceless',
+            dashboardNewContainer: 'Wallet, stay seated. We launch.',
+            instanceCreate: 'Joy Instance',
+            instanceCreateFirst: 'Summon the first one',
+            instanceBatchRenewTitle: 'Batch refresh the joy',
+            instanceBatchRenewDescription: 'In freebie site mode, renewal is just a stamp. The machines keep grinning.',
+            instanceBatchTotalAmount: 'Air total',
+            instanceBatchBalanceAfter: 'Mood after renewal',
+            instanceBatchCurrentBalance: 'Current mascot balance',
+            instanceBatchRenewAction: 'Confirm joy refill',
+            moneyJustForShow: 'Number parade',
+            marketPriceFree: 'Comped takeoff',
+            marketPlanCount: '{count} joy tiers',
+            marketCreateNow: 'Claim the chaos',
+            marketLoginToOrder: 'Sign in to claim chaos',
+            marketSelectedPlanTitle: 'Joy tier',
+            marketCycleMonthly: 'Monthly? The moon paid it',
+            marketMonthlyPrice: 'Monthly average? Joy does not average',
+            createOrderSummary: 'Comped Summary',
+            createPromoCode: 'Secret phrase',
+            createPromoPlaceholder: 'Optional. The free train already left the station.',
+            createPromoHostedDisabled: 'Hosted plans ignore secret phrases. Hop aboard.',
+            createPromoValid: 'Secret phrase accepted. Joy boost {rate}',
+            createPromoUsing: 'Secret lamp is lit',
+            createPromoBenefit: 'Discounts and commissions are performing nearby. Emotional value is clapping.',
+            createCommissionEstimate: 'Imaginary commission snack for the sharer: ¥{amount}',
+            createPlanFee: 'Price exhibit',
+            createMonthlyEquivalent: 'Proration? Joy refuses to be prorated',
+            mailPrice: 'Mail is comped too',
+            mailCheckoutTitle: 'Confirm Comped Mail',
+            mailBillingCycle: 'Joy cycle',
+            mailCheckoutAmount: 'Symbolic checkout',
+            mailCheckoutConfirm: 'Claim mail',
+            mailBalanceRequired: 'Balance is beside the point. Freebie site mode says use first.',
+        },
+    },
+
+    publicSite: {
+        brandTagline: 'Incus-powered NAT VPS platform',
+        nav: {
+            home: 'Home',
+            overview: 'Overview',
+            products: 'Browse',
+            help: 'Help',
+        },
+        actions: {
+            signIn: 'Sign in',
+            console: 'Open console',
+            consoleCompact: 'Console',
+            browseProducts: 'Browse all products',
+            browseOfficial: 'Browse official',
+            browseMarket: 'Browse marketplace',
+            viewCatalog: 'View catalog',
+        },
+        footer: {
+            description: 'Curated global LXC and KVM plans across multiple locations, with broad configurations and tiers for high-value NAT VPS choices.',
+            explore: 'Explore',
+            account: 'Account',
+            purchaseHint: 'When an unauthenticated visitor opens a purchase link, they land on the public catalog first; signed-in users still continue with the existing create flow.',
+        },
+        seo: {
+            keywords: 'Incus,NAT VPS,LXC,KVM,VPS panel,cloud server',
+            homeTitle: 'Incus-powered NAT VPS portal and control plane',
+            homeDescription: 'Curated global LXC and KVM plans across multiple locations, with broad configurations and tiers for high-value NAT VPS choices.',
+            marketTitle: 'Browse Products',
+            marketDescription: 'Browse every public product and filter NAT VPS offers by source, region, resource profile, and billing plan.',
+            marketPackageTitle: '{name} - Browse Products',
+            marketPackageDescription: 'Review the {type} profile, traffic, and product details for {name} on the public catalog.',
+        },
+        portal: {
+            badge: 'Incus Driven NAT Platform',
+            title: 'An Incus-powered NAT VPS portal and control plane',
+            description: 'Curated global LXC and KVM plans across official and hosted supply, with broader tiers and strong value NAT VPS choices.',
+            authPanelDescription: 'Stable supply, wider region coverage, and broader price bands are brought into one place so choosing a package feels more direct.',
+            authPanelFlowLabel: 'ORDER FLOW',
+            authPanelFlowTitle: 'Browse products first, sign in when ready',
+            authPanelFlowDescription: 'Signed-out visitors can inspect public products first. Shared purchase links keep the product context, and signing in resumes the existing checkout flow.',
+            authPanelTagValue: 'High value',
+            previewLabel: 'CONTROL PLANE',
+            previewTitle: 'Platform overview',
+            previewDescription: 'The public portal and signed-in console are aligned around product selection, provisioning, operations, and conversion.',
+            controlPoint1: '$ incus launch ubuntu:24.04 edge-vm',
+            controlPoint2: '# Unified entry for LXC and KVM NAT instances',
+            controlPoint3: '# Official inventory and hosted marketplace share the same browse-to-provision path',
+            packageFallback: 'Public package ready for browsing and purchase routing.',
+            stats: {
+                packages: 'Packages',
+                regions: 'Regions',
+                official: 'Official',
+                market: 'Marketplace',
+            },
+            officialTitle: 'Official direct',
+            officialDescription: 'Standardized supply with steadier expectations for users who care about baseline stability, cleaner operations, and predictable availability.',
+            officialPoint1: 'Official nodes fit workloads that want consistent supply and a more uniform operating experience.',
+            officialPoint2: 'The public-facing browse and order path is suitable for promotions, landing pages, and continuous product exposure.',
+            officialPoint3: 'After sign-in, provisioning still follows the existing instance creation flow.',
+            marketTitle: 'Hosted marketplace',
+            marketDescription: 'A wider spread of price points and regions for users chasing flexibility, more locations, and better cost efficiency.',
+            marketPoint1: 'Hosted supply is useful when you want colder regions, sharper pricing, or more diverse resource sources.',
+            marketPoint2: 'Public browsing, regional filtering, and plan inspection are aligned into the same experience.',
+            marketPoint3: 'Shared purchase links still land gracefully for signed-out visitors and preserve the existing flow for signed-in users.',
+            experienceNoLoginTitle: 'Global node coverage',
+            experienceNoLoginDescription: 'Official and hosted products are listed side by side so popular regions and broader node choices are easier to inspect from one entry point.',
+            experienceRoutingTitle: 'Broader LXC / KVM lineup',
+            experienceRoutingDescription: 'From lightweight containers to full virtual machines, resource tiers and plan coverage are wider and easier to compare.',
+            experienceThemeTitle: 'More price bands, better value',
+            experienceThemeDescription: 'The catalog keeps adding NAT VPS options across different budgets and positions so you can compare before you commit.',
+            catalogLabel: 'ECOSYSTEM',
+            catalogTitle: 'Official inventory and hosted supply in parallel',
+            catalogDescription: 'Official and hosted products are offered side by side, whether you prioritize steadier supply or want broader region and price coverage.',
+            emptyPackages: 'No public packages are available right now.',
+            browseLabel: 'CATALOG',
+            browseTitle: 'Filter the right plans by region and configuration',
+            browseDescription: 'Browse products by region, configuration, and price so new visitors can compare quickly and existing users can top up faster.',
+        },
+        market: {
+            badge: 'Public Catalog',
+            title: 'Browse all public products',
+            description: 'Filter public products by source, region, package profile, and billing plan.',
+            publicNotice: 'This page aggregates every public product and lets you filter by source, region, and resource profile.',
+            buyLinkNotice: 'You opened a purchase link while signed out. The matching product is shown here first, and after sign-in the flow still continues to the existing create page.',
+            searchPlaceholder: 'Search by package name, description, or virtualization type',
+            allRegions: 'All regions',
+            official: 'Official',
+            market: 'Marketplace',
+            noPackages: 'No public products are available right now.',
+            noResults: 'No products match the current filters.',
+            soldOut: 'Sold out',
+            inStock: 'Available',
+            free: 'Free',
+            fromMonthly: 'From ¥{price}/mo',
+            planCount: '{count} plan(s)',
+            featuresTitle: 'Package details',
+            plansTitle: 'Available plans',
+            planCycle: '{months} month(s)',
+            selectedPlanTitle: 'Selected plan',
+            customConfigTitle: 'Custom configuration',
+            customConfigDescription: 'This product does not expose fixed plans right now. After sign-in, the create page will let you choose resources within the package limits.',
+            createNow: 'Provision now',
+            loginToOrder: 'Sign in to provision',
+            loginHint: 'After sign-in, the current product still continues into instance creation.',
+            choosePackage: 'Choose a package on the left to inspect the details.',
+            summary: {
+                total: 'Public products',
+                available: 'Available',
+                regions: 'Regions',
+                source: 'Current source',
+            },
+            labels: {
+                startingPrice: 'Starting price',
+                traffic: 'Monthly traffic',
+                plans: 'Plans',
+                cpu: 'CPU',
+                memory: 'Memory',
+                disk: 'Disk',
+                network: 'Network mode',
+                hosts: 'Hosts',
+                nesting: 'Nesting',
+            },
+        },
+    },
+
+    // Wallet
+    wallet: {
+        title: 'Wallet',
+        description: 'Manage your account balance and recharge',
+        tabs: {
+            balance: 'Balance',
+            logs: 'Balance Logs',
+            records: 'Recharge Records',
+        },
+        currentBalance: 'Current Balance',
+        recharge: 'Recharge',
+        totalRecharge: 'Total Recharged',
+        totalConsume: 'Total Consumed',
+        totalDestroyedValue: 'Destroyed Value',
+        noLogs: 'No balance logs',
+        noRecords: 'No recharge records',
+        type: 'Type',
+        amount: 'Amount',
+        actualAmount: 'Credited',
+        estimatedAmount: 'Estimated Credit',
+        balanceAfter: 'Balance',
+        instanceOrRemark: 'Instance/Remark',
+        time: 'Time',
+        orderNo: 'Order No.',
+        completedAt: 'Completed',
+        statusLabel: 'Status',
+        paymentMethod: 'Payment Method',
+        paymentMethodType: 'Select Payment Method',
+        heleketSelectionHint: 'You will choose the specific cryptocurrency and network on the Heleket payment page. This page does not restrict the final payment currency.',
+        paymentChannel: 'Payment Channel',
+        paymentUuid: 'UUID:',
+        paymentTxid: 'TxID:',
+        paymentMethods: {
+          alipay: 'Alipay',
+          wxpay: 'WeChat Pay',
+          qqpay: 'QQ Wallet',
+          bank: 'Bank Card',
+          jdpay: 'JD Pay',
+        },
+        noProviders: 'No payment providers available',
+        amountLabel: 'Recharge Amount',
+        amountRange: 'Amount Range',
+        feeNote: 'Fee',
+        payableAmount: 'Amount Due',
+        pay: 'Pay Now',
+        void: 'Void',
+        logTypes: {
+            recharge: 'Recharge',
+            consume: 'Consume',
+            refund: 'Refund',
+            adminAdjust: 'Admin Adjustment',
+            gift: 'Gift',
+            transferFee: 'Transfer Fee',
+            transferRefund: 'Fee Refund',
+            hostingWithdraw: 'Hosting Withdrawal',
+            hostingDeduction: 'Hosting Deduction',
+        },
+        status: {
+            pending: 'Pending',
+            paid: 'Paid',
+            completed: 'Completed',
+            failed: 'Failed',
+            cancelled: 'Cancelled',
+            refunded: 'Refunded',
+        },
+        loadLogsFailed: 'Failed to load balance logs',
+        showLotteryGift: 'Lottery Gift',
+        showingLotteryGift: 'Lottery Gift',
+        loadProvidersFailed: 'Failed to load payment providers',
+        loadRecordsFailed: 'Failed to load recharge records',
+        selectProvider: 'Please select a payment method',
+        invalidAmount: 'Invalid amount',
+        orderCreated: 'Order created',
+        redirecting: 'Redirecting to payment page...',
+        createOrderFailed: 'Failed to create order',
+        noPayUrl: 'Failed to get payment URL',
+        repayFailed: 'Failed to repay order',
+        orderCancelled: 'Order cancelled',
+        noRefundNotice: 'All recharges cannot be refunded to the original payment method.',
+        rechargeNotice: 'I understand that unusable instances can be destroyed and returned to panel balance, transferable instance PUSH is free, and the email can be changed by myself.',
+        cancelFailed: 'Failed to cancel order',
+        orderExpired: 'Order expired',
+        rechargeSuccess: 'Recharge successful! Balance has been credited',
+        verifyingPayment: 'Verifying payment status...',
+        paymentProcessing: 'Payment processing, please refresh later',
+        verifyFailed: 'Failed to verify payment status',
+        amountMismatch: 'Payment amount does not match order amount, please contact support',
+        natDisclaimer: 'I understand all instances are NAT-based, IP connectivity to mainland China is not guaranteed, and all recharges are non-refundable.',
+    },
+
+    // Referral Program
+    aff: {
+        title: 'Referral Program',
+        description: 'Invite friends to use your promo code and earn commission',
+        notActivated: 'Referral program available',
+        activateHint: 'You can create promo codes and share them with friends. When they use your promo code to purchase plans you have bought, you will earn commission.',
+        goRecharge: 'Go to Recharge',
+        affBalance: 'AFF Balance',
+        totalEarnings: 'Total Earnings',
+        balanceHint: 'AFF balance can only be converted to account balance for in-panel consumption and cannot be withdrawn directly.',
+        convert: 'Request Conversion',
+        myCodes: 'My Promo Codes',
+        createCode: 'Create Promo Code',
+        noCodes: 'No promo codes yet. Create one to start promoting!',
+        code: 'Promo Code',
+        plan: 'Plan',
+        discount: 'Discount',
+        commission: 'Commission',
+        usedCount: 'Usage Count',
+        earnings: 'Earnings',
+        status: 'Status',
+        enabled: 'Enabled',
+        disabled: 'Disabled',
+        toggle: 'Toggle',
+        selectPlan: 'Select Plan',
+        selectPlanHint: 'Choose global promo code or plan-specific code',
+        alreadyCreated: 'Already Created',
+        globalCode: 'Global Promo Code',
+        globalCodeBadge: 'Site-wide',
+        globalCodeHint: 'Can be used for all paid packages and plans site-wide',
+        orSelectPlan: 'or select a plan-specific code',
+        discountCommission: 'Discount/Commission Rate',
+        discountCommissionHint: 'Buyer gets {discount} discount, you get {commission} commission',
+        fixedRate: 'Discount & Commission Rate',
+        fixedRateHint: 'Fixed discount and commission rate at 5%',
+        createSuccess: 'Promo code created successfully',
+        createFailed: 'Failed to create',
+        deleteCodeConfirm: 'Are you sure to delete promo code {code}?',
+        deleteCodeSuccess: 'Promo code deleted',
+        deleteCodeFailed: 'Failed to delete',
+        toggleSuccess: 'Status toggled',
+        toggleFailed: 'Failed to toggle',
+        earningsLog: 'Earnings Details',
+        noLogs: 'No earnings records yet',
+        logType: {
+            new_purchase: 'New Purchase Commission',
+            renew: 'Renewal Commission',
+            convert: 'Balance Conversion',
+        },
+        convertModal: {
+            title: 'Request Conversion',
+            currentBalance: 'Current AFF Balance',
+            amount: 'Conversion Amount',
+            minAmount: 'Minimum conversion: 0.10',
+            hint: 'After submission, it will be automatically transferred to your account balance.',
+            submit: 'Confirm Conversion',
+            success: 'Conversion successful, transferred to account balance',
+            failed: 'Submission failed',
+            invalidAmount: 'Please enter a valid conversion amount',
+        },
+        withdrawals: 'Conversion History',
+        noWithdrawals: 'No conversion history',
+        withdrawalStatus: {
+            pending: 'Pending Review',
+            approved: 'Approved',
+            rejected: 'Rejected',
+        },
+        leaderboard: {
+            title: 'AFF Leaderboard',
+            loadFailed: 'Failed to load leaderboard',
+            empty: 'No leaderboard data yet',
+            you: 'You',
+        },
+        // Instance creation page promo code input
+        promoCode: 'Promo Code',
+        promoCodeOptional: 'Promo Code (Optional)',
+        promoCodePlaceholder: 'Enter promo code (optional)',
+        promoCodeInputPlaceholder: 'Enter discount code',
+        promoCodeHostedDisabled: 'Promo codes not available for hosted nodes',
+        promoCodeValid: 'Promo code valid, {rate} discount applied',
+        promoCodeInvalid: 'Invalid promo code',
+        verifying: 'Verifying...',
+        originalPrice: 'Original Price',
+        discountAmount: 'Discount',
+        promoDiscount: 'Promo Discount',
+        finalPrice: 'Final Price',
+        usingPromoCode: 'You are using a promo code',
+        promoCodeBenefit: 'You enjoy {discount} discount, while providing about {commission}% commission to the sharer',
+        commissionEstimate: 'Estimated ¥{amount} commission for the sharer',
+        // Admin review
+        adminTitle: 'AFF Conversion Review',
+        adminDescription: 'Review user AFF balance conversion requests',
+        user: 'User',
+        userBalance: 'User AFF Balance',
+        requestAmount: 'Request Amount',
+        requestTime: 'Request Time',
+        approve: 'Approve',
+        reject: 'Reject',
+        rejectReason: 'Rejection Reason',
+        rejectReasonPlaceholder: 'Enter rejection reason',
+        approveSuccess: 'Approved, transferred to user balance',
+        approveFailed: 'Review failed',
+        rejectSuccess: 'Rejected',
+        rejectFailed: 'Rejection failed',
+        noRequests: 'No pending conversion requests',
+        filterStatus: 'Status Filter',
+        all: 'All',
+    },
+
+    popupAnnouncement: {
+        title: 'Site Notice',
+        subtitle: 'Please review this latest notice',
+        promoLabel: 'New server promo',
+        buyNow: 'Buy {name} now',
+        viewImage: 'View full image',
+        promoPlans: 'Available plans',
+        soldOut: 'Sold out',
+        dismissToday: 'Hide today',
+        dismissForever: 'Never show again',
+    },
+
+    // Language
+    language: {
+        zh: '中文',
+        en: 'English',
+    },
+
+    // Auth
+    auth: {
+        login: 'Login',
+        loginTo: 'Login',
+        logout: 'Logout',
+        register: 'Register',
+        registerTo: 'Register',
+        username: 'Username',
+        usernamePlaceholder: 'Enter username',
+        usernameOrEmail: 'Username or Email',
+        usernameOrEmailPlaceholder: 'Enter username or email',
+        password: 'Password',
+        passwordPlaceholder: 'Enter password',
+        confirmPassword: 'Confirm Password',
+        confirmPasswordPlaceholder: 'Enter password again',
+        email: 'Email',
+        emailPlaceholder: 'Enter email',
+        rememberMe: 'Remember me',
+        forgotPasswordLink: 'Forgot password',
+        contactEmail: 'Contact email',
+        noAccount: "Don't have an account?",
+        hasAccount: 'Already have an account?',
+        loginSuccess: 'Login successful',
+        logoutSuccess: 'Logged out',
+        registerSuccess: 'Registration successful',
+        invalidCredentials: 'Invalid username or password',
+        sessionExpired: 'Session expired, please login again',
+        continue: 'Continue',
+        loggingIn: 'Logging in...',
+        registering: 'Registering...',
+        orUse: 'or use',
+        oauthBindHint: 'You need to bind your account in settings first to use quick login',
+        enterUsernamePassword: 'Please enter username and password',
+        enterUsernameOrEmailPassword: 'Please enter your account and password',
+        twoFactorCode: 'Two-Factor Code',
+        twoFactorCodePlaceholder: 'Enter 6-digit code',
+        twoFactorHint: 'Enter the code from your authenticator app',
+        twoFactorOptional: 'optional',
+        twoFactorOptionalHint: 'Enter the code if you have enabled two-factor authentication',
+        recoveryCode: 'Recovery Code',
+        recoveryCodePlaceholder: 'Enter recovery code',
+        recoveryCodeHint: 'Enter the recovery code saved when setting up 2FA (one-time use)',
+        useRecoveryCode: "Can't access authenticator? Use recovery code",
+        useTotpCode: 'Use authenticator code',
+        enterRecoveryCode: 'Please enter recovery code',
+        enterTotpCode: 'Please enter verification code',
+        rememberPassword: 'Remember your password?',
+        verificationCode: 'Verification Code',
+        verificationCodePlaceholder: 'Enter 6-digit code',
+        invalidCode: 'Please enter a 6-digit code',
+        forgotPassword: {
+          title: 'Forgot Password',
+          subtitle: 'Reset your password via email verification code',
+          sendCode: 'Send Verification Code',
+          codeSent: 'Verification code sent, please check your email',
+          codeHint: 'Please enter the 6-digit code sent to your email',
+          resetPassword: 'Reset Password',
+          resetSuccess: 'Password reset successful! New password has been sent to your email, please check.',
+          twoFactorDisabled: 'Your two-factor authentication (2FA) has been automatically disabled. We recommend re-enabling it for account security.'
+        },
+        oauthNotBound: 'Please bind your {provider} account in settings first to use quick login',
+        oauthUserNotFound: 'User not found',
+        oauthAccountBanned: 'Account has been disabled',
+        oauthProviderDisabled: 'This login method has been disabled',
+        oauthTokenError: 'Failed to get authorization, please try again',
+        oauthError: 'OAuth login failed, please try again',
+        loginFailed: 'Login failed',
+        createAccount: 'Register',
+        creatingAccount: 'Creating...',
+        backToLogin: 'Back to Login',
+        registerSuccessRedirect: 'Registration successful, redirecting...',
+        inviteCode: 'Invite Code',
+        inviteCodePlaceholder: 'Enter invite code',
+        usernameHint: 'Start with a letter, 3-32 characters',
+        passwordHint: 'At least 8 characters with uppercase, lowercase and number',
+        fillAllRequired: 'Please fill in all required fields',
+        invalidEmail: 'Please enter a valid email address',
+        emailContainsIllegal: 'Email contains illegal characters',
+        passwordMismatch: 'Passwords do not match',
+        passwordTooShort: 'Password must be at least 8 characters',
+        passwordNeedsUppercase: 'Password must contain at least one uppercase letter',
+        passwordNeedsLowercase: 'Password must contain at least one lowercase letter',
+        passwordNeedsNumber: 'Password must contain at least one number',
+        turnstileRequired: 'Please complete the verification',
+        turnstileFailed: 'Verification failed, please try again',
+        // Email verification
+        emailCode: 'Email Verification Code',
+        emailCodePlaceholder: 'Enter 6-digit code',
+        emailCodeRequired: 'Please enter email verification code',
+        registrationClosedTitle: 'Registration is currently closed',
+        registrationClosedMessage: 'Sorry, registration is temporarily unavailable. Please contact the administrator if you need an account.',
+        registrationClosedShort: 'Registration is currently closed',
+        sendCode: 'Send Code',
+        sendingCode: 'Sending...',
+        codeSentHint: 'Verification code sent to your email, valid for 10 minutes',
+        invalidEmailCode: 'Invalid or expired verification code',
+        allowedEmailDomains: 'Only these email domains are allowed',
+        emailUsernamePlaceholder: 'username',
+        confirmEmail: 'Confirm Email Address',
+        confirmEmailMessage: 'Verification code will be sent to the following email. Please confirm the address is correct:',
+        confirmAndSend: 'Confirm & Send',
+        // Terms of Service
+        tos: {
+            title: 'Terms of Service',
+            agreePrefix: 'I have read and agree to the',
+            termsLink: 'Terms of Service',
+            mustAgree: 'Please read and agree to the Terms of Service',
+            understood: 'I Understand',
+            loadFailed: 'Failed to load Terms of Service',
+        },
+    },
+
+    // User Menu
+    userMenu: {
+        profile: 'Profile',
+        myInstances: 'My Instances',
+        logout: 'Logout',
+    },
+
+    // Quota
+    quota: {
+        hosts: 'Hosts',
+        instances: 'Instances',
+        friends: 'Friends',
+        packages: 'Packages',
+    },
+
+    // Instance
+    instance: {
+        title: 'Instances',
+        create: 'Create Instance',
+        name: 'Instance Name',
+        image: 'Image',
+        package: 'Package',
+        host: 'Host',
+        ip: 'IP Address',
+        port: 'Port',
+        cpu: 'CPU',
+        memory: 'Memory',
+        disk: 'Disk',
+        bandwidth: 'Bandwidth',
+        expireAt: 'Expires At',
+        expiredLabel: 'Expired',
+        freeInstanceLabel: 'Free Instance',
+        config: 'Config',
+        user: 'User',
+        details: 'Details',
+        // Resource quotas (for order summary)
+        ports: 'Ports',
+        snapshots: 'Snapshots',
+        backups: 'Backups',
+        hostAnnouncement: 'Host Announcement',
+        badgeModal: {
+            open: 'View or change instance badge',
+            kicker: 'Instance Badge',
+            title: 'Instance Badge',
+            subtitle: 'Inspect the current badge and quickly switch badges for {name}',
+            detailsTab: 'Badge Details',
+            ownedTab: 'My Badges',
+            noBadgeSeries: 'No Badge Applied',
+            noBadgeTitle: 'No badge is applied to this instance',
+            noBadgeSummary: 'This instance is currently using the default icon.',
+            noBadgeDescription: 'Switch to "My Badges" to quickly apply one of your owned badges to this instance.',
+            statusLabel: 'Current Status',
+            statusApplied: 'Applied to this instance',
+            statusNotApplied: 'No instance badge applied',
+            ownedCountLabel: 'Owned Copies',
+            openOwnedTab: 'Choose From My Badges',
+            manageUnavailable: 'This instance is not in your manageable instance list. You can only view badge details here.',
+            emptyOwnedTitle: 'No badges available for this instance yet',
+            emptyOwnedHint: 'Get badges from Entertainment first, then you can switch this instance badge here.',
+            applyCurrent: 'Apply to Current Instance',
+            replaceCurrent: 'Replace Current Badge',
+            moveCurrent: 'Move to Current Instance',
+            moveFromAvatar: 'Move From Avatar to Instance',
+            appliedHere: 'On Current Instance',
+            currentHint: 'This badge is already applied to the current instance.',
+            replaceHint: 'Applying this will replace the badge currently used by this instance.',
+            moveFromAvatarHint: 'Applying this will remove it from your current avatar first.',
+            moveFromInstanceHint: 'Applying this will remove it from instance "{name}" first.',
+            removeCurrent: 'Remove Current Instance Badge',
+            updateSuccess: 'Instance badge updated',
+            removeSuccess: 'Current instance badge removed',
+        },
+        errorBanner: {
+            title: 'Instance Error',
+            description: 'This instance is in an error state. You can destroy it directly (paid instance refunds will not incur any fees)',
+            destroyNow: 'Destroy Now',
+            confirmDestroy: 'Are you sure you want to destroy this abnormal instance? Remaining value of paid instances will be refunded to your wallet (no fees charged).',
+        },
+        actions: {
+            start: 'Start',
+            stop: 'Stop',
+            restart: 'Restart',
+            delete: 'Delete',
+            console: 'Console',
+            snapshot: 'Snapshot',
+            backup: 'Backup',
+            rename: 'Rename',
+            clone: 'Clone',
+            suspend: 'Suspend',
+            unsuspend: 'Unsuspend',
+        },
+        renameModal: {
+            title: 'Rename Instance',
+            name: 'Instance Name',
+            namePlaceholder: 'Enter new instance name',
+            cancel: 'Cancel',
+            confirm: 'Confirm',
+            renaming: 'Renaming...',
+            success: 'Instance renamed',
+            failed: 'Rename failed',
+        },
+        statusLabel: 'Status',
+        modeLabel: 'Mode',
+        quotaLabel: 'Quota',
+        trafficLabel: 'Traffic',
+        status: {
+            running: 'Running',
+            stopped: 'Stopped',
+            suspended: 'Suspended',
+            starting: 'Starting',
+            stopping: 'Stopping',
+            restarting: 'Restarting',
+            creating: 'Creating',
+            error: 'Error',
+            deleted: 'Deleted',
+        },
+        statusFilter: {
+            all: 'All Status',
+        },
+        createdAt: 'Created At',
+        manageDesc: 'Manage your container instances',
+        userInstances: 'Instances of user "{name}"',
+        clearFilter: 'Clear filter',
+        searchPlaceholder: 'Search instance name, IP...',
+        totalCount: '{count} instances',
+        noInstances: 'No instances',
+        noMatchingInstances: 'No matching instances found',
+        tryOtherKeywords: 'Try other keywords',
+        createFirstInstance: 'Create your first container instance to get started',
+        listLayout: 'List',
+        cardLayout: 'Cards',
+        order: {
+            label: 'Adjust order',
+            top: 'Move to top',
+            up: 'Move up',
+            down: 'Move down',
+            bottom: 'Move to bottom',
+            updateSuccess: 'Instance order updated',
+            updateFailed: 'Failed to save instance order',
+        },
+        confirmDelete: 'Are you sure to delete instance "{name}"? This action cannot be undone.',
+        createPage: {
+            title: 'Create Instance',
+            description: 'Select a package and configure your container instance',
+            instanceName: 'Instance Name',
+            instanceNamePlaceholder: 'my-instance',
+            selectPackage: 'Please select a package',
+            selectSshKey: 'Please select an SSH key',
+            creating: 'Creating...',
+            createSuccess: 'Instance is being created. Please check the instance list later',
+            loadFailed: 'Failed to load data',
+            loadHostsFailed: 'Failed to load available hosts',
+            loadImagesFailed: 'Failed to load available images',
+            missingSshKey: 'Missing SSH Key',
+            missingSshKeyDesc: 'An SSH key is required to create an instance. Please go to',
+            profileSettings: 'Profile Settings',
+            addSshKey: 'to add an SSH public key.',
+            quotaInsufficient: 'Quota Insufficient',
+            quotaCpu: 'CPU: Used {used}%/{limit}%, need {need}%',
+            quotaMemory: 'Memory: Used {used}/{limit} MB, need {need} MB',
+            quotaDisk: 'Disk: Used {used}/{limit} MB, need {need} MB',
+            quotaInstance: 'Instances: Reached limit {used}/{limit}',
+            packageNoHosts: 'Package has no bound hosts, please contact administrator',
+            sharedPackageNotFound: 'Shared package not found or expired, selected another available package for you',
+            quotaInfo: {
+                prefix: 'This package',
+                you: 'You',
+                maxInstances: '',
+                count: 'Count',
+                instances: ' instances',
+                unlimited: 'Unlimited',
+                cpu: 'CPU',
+                memory: 'Memory',
+                remaining: 'Package Remaining Quota',
+            },
+            resourceLimit: {
+                title: 'Insufficient resource quota, cannot create instance',
+                noInstances: 'No remaining instances (0), cannot create new instance',
+                insufficientMemory: 'Insufficient remaining memory (<128MB), cannot create instance',
+                insufficientCpu: 'Insufficient remaining CPU (<15%), cannot create instance',
+            },
+            ownPaidPackageWarning: 'This is your own paid package, you cannot create instances for yourself',
+            destroyTrafficNotice: 'Destroy limit: this instance can only be destroyed while its current-month traffic usage is below 5 GB.',
+            firstPaidInstanceNotice: 'Destroy limit: this instance can only be destroyed while its current-month traffic usage is below 5 GB.',
+            // Order Summary
+            orderSummary: 'Order Summary',
+            packageName: 'Package',
+            planName: 'Plan',
+            billingCycle: 'Billing Cycle',
+            months: 'months',
+            month: 'mo',
+            resourceConfig: 'Resource Configuration',
+            planFee: 'Plan Fee',
+            // Package Source
+            source: {
+                official: 'Official',
+                market: 'Marketplace',
+                friends: 'Friends',
+            },
+            fun: {
+                selectRegion: 'Select Region',
+                packageCount: '{count} packages',
+                selectPackage: 'Select Package',
+                selectPlan: 'Select Plan',
+                planDesc: 'Choose a paid plan that suits your needs',
+                customPlanHint: 'Can\'t find a suitable plan? Submit a ticket to request custom configuration',
+                noPlans: 'No plans available for this package',
+                planSoldOut: 'Sold Out',
+                noPackages: 'No packages available',
+                selectHost: 'Select Host',
+                hostAutoSelected: 'The first available host is selected by default',
+                selectSystem: 'Select System',
+                noImages: 'No images available',
+                selectSshKey: 'Select SSH Key',
+            },
+            // Hosted Disclaimer
+            hostedDisclaimer: {
+                title: 'Hosted Node Notice',
+                content: 'This is a user-hosted node. Support is handled by the host owner (UID:{uid}). only provides platform services with no quality guarantees. If the host owner becomes unavailable, their hosting balance will be refunded to the affected users\' panel balance.',
+            },
+            zoneNotice: {
+                badge: 'Zone',
+                content: 'This is a zone owned by UID:{uid}. After-sales support is handled by {username}.',
+            },
+        },
+        startingInstance: '{name} is starting',
+        stoppedInstance: '{name} has been stopped',
+        restartingInstance: '{name} is restarting',
+        deletedInstance: '{name} has been deleted',
+        actionFailed: 'Action failed',
+        verificationRequiredHint: 'This operation requires verification, please go to instance detail page',
+        totalRecords: '{count} records',
+        prevPage: 'Previous',
+        nextPage: 'Next',
+        batch: {
+            selectedCount: '{count} selected',
+            currentPageOnly: 'Batch actions apply to selected instances on the current page only',
+            clear: 'Clear Selection',
+            start: 'Batch Start',
+            stop: 'Batch Stop',
+            restart: 'Batch Restart',
+            sync: 'Batch Sync',
+            renew: 'Batch Renew',
+            autoRenewOn: 'Enable Auto Renew',
+            autoRenewOff: 'Disable Auto Renew',
+            destroy: 'Batch Destroy',
+            noEligibleAction: 'None of the selected instances can perform this action',
+            partialResult: 'Completed {success}, failed {failed}, skipped {skipped}',
+            successResult: 'Successfully processed {count} instance(s)',
+            actionFailed: 'Batch action failed',
+            previewFailed: 'Failed to load batch preview',
+            renewTitle: 'Batch Renew',
+            renewDescription: 'Renew selected paid instances together. Only instances supporting the chosen period will be processed.',
+            selectedMonths: 'Renewal Period',
+            eligibleCount: 'Eligible Items',
+            totalAmount: 'Total Amount',
+            renewEmpty: 'No renewable items in the current selection',
+            eligibleList: 'Eligible Instances ({count})',
+            skippedList: 'Skipped Instances ({count})',
+            hosted: 'Hosted Instance',
+            unsupportedPeriod: 'The selected period is not available for this instance',
+            unknownReason: 'Unavailable right now',
+            destroyTitle: 'Batch Destroy',
+            destroyDescription: 'Destroy the selected instances together. Only eligible instances will be processed.',
+            destroyEmpty: 'No destroyable items in the current selection',
+            refundTotal: 'Estimated Refund',
+            feeTotal: 'Estimated Fee',
+            feeWaived: 'Fee Waived',
+            confirmHint: 'Type DESTROY to confirm batch destruction',
+            confirmPlaceholder: 'Enter DESTROY to confirm',
+        },
+        batchReason: {
+            notFoundOrForbidden: 'Instance does not exist or you do not have permission',
+            freeNoRenew: 'Free instances do not require renewal',
+            billingUnavailable: 'Billing information is unavailable for this instance',
+            noRenewOptions: 'No renewal options are currently available',
+            renewWindow: 'This instance can only be renewed within {days} days before expiration',
+            renewFailed: 'Renewal failed',
+            freeNoAutoRenew: 'Free instances do not support auto-renew',
+            autoRenewAlreadyOn: 'Auto-renew is already enabled',
+            autoRenewAlreadyOff: 'Auto-renew is already disabled',
+            autoRenewFailed: 'Failed to update auto-renew setting',
+            deleted: 'Instance has already been deleted',
+            creating: 'Instance is still being created and cannot be destroyed',
+            suspended: 'Instance is suspended and cannot be destroyed until it is unsuspended',
+            destroyTrafficLimit: 'This instance cannot be destroyed because current monthly traffic usage has reached or exceeded 5G',
+            destroyFailed: 'Failed to destroy instance',
+        },
+        // Mobile card
+        mobileCard: {
+            ipAddress: 'IP Address',
+            config: 'Config',
+            disk: 'Disk',
+            traffic: 'Traffic',
+            host: 'Host',
+            user: 'User',
+            unlimited: 'Unlimited',
+            cpuCore: '% core',
+            quota: 'Quota',
+            ports: 'Ports',
+            snapshots: 'Snaps',
+            backups: 'Backups',
+            sites: 'Sites',
+        },
+        // Instance create components
+        selector: {
+            // Region selection
+            selectRegion: 'Select Region',
+            allRegions: 'All',
+            noRegions: 'No regions available',
+            packageCount: '{count} packages',
+            // Package selection
+            selectPackage: 'Select Package',
+            selectPlan: 'Select Plan',
+            planDesc: 'Choose a paid plan that suits your needs',
+            customPlanHint: 'Can\'t find a suitable plan? Submit a ticket to request custom configuration',
+            noPlans: 'No plans available for this package',
+            planSoldOut: 'Sold Out',
+            noPackages: 'No packages available',
+            cpu: 'CPU',
+            memory: 'Memory',
+            disk: 'Disk',
+            cores: 'cores',
+            networkMode: {
+                nat: 'NAT',
+                natDesc: 'Access via port mapping',
+                nat_ipv6: 'NAT + IPv6',
+                nat_ipv6Desc: 'NAT + Public IPv6',
+            },
+            docker: 'Nestable',
+            privileged: 'Privileged',
+            configureResources: 'Configure Resources',
+            adjustBasedOnPackage: 'Adjust freely based on package limits',
+            cpuAllowance: 'allowance',
+            accountQuota: 'Account quota',
+            packageLimit: 'Package limit',
+            selectHost: 'Select Host',
+            hostOptional: 'Optional, system will auto-assign if not selected',
+            hostAutoSelected: 'The first available host is selected by default',
+            hostTraffic: 'Monthly traffic on this host',
+            autoAssign: 'Auto Assign',
+            autoAssignDesc: 'System selects optimal node based on load',
+            available: 'Available',
+            selectSystem: 'Select System',
+            showSyncedImages: 'Showing images allowed on the selected host',
+            noImages: 'No images available',
+            noImagesOnHost: 'No images available on selected host',
+            contactAdmin: 'Please contact the host owner or administrator to adjust the image policy',
+            selectSshKey: 'Select SSH Key',
+            noSshKeys: 'No SSH keys',
+            addSshKeyHint: 'Please add an SSH public key in settings first',
+            hostInsufficient: 'Host resources insufficient',
+            hostInsufficientDesc: 'Current configuration requires {cpu}% CPU and {memory}GB memory, but no host in this package can meet the requirements.',
+            hostInsufficientSuggest: 'Try reducing instance configuration or wait for resources to be released.',
+            viewProbe: 'View Probe Monitor',
+            prevPage: 'Previous',
+            nextPage: 'Next',
+            pageInfo: 'Page {current}/{total}, {count} total',
+            // Plan resource quotas
+            ports: 'Ports',
+            snapshots: 'Snapshots',
+            backups: 'Backups',
+            sites: 'Sites',
+            bandwidth: 'Bandwidth',
+        },
+        // Paid subscription card
+        subscription: {
+            premium: 'Premium',
+            expiresAt: 'Expires At',
+            expiresIn: 'Expires In',
+            expired: 'Expired',
+            days: 'days',
+            billingCycle: 'Billing Cycle',
+            renewPrice: 'Renew Price',
+            month: 'mo',
+            monthly: 'Monthly',
+            quarterly: 'Quarterly',
+            semiAnnual: 'Semi-Annual',
+            annual: 'Annual',
+            months: 'months',
+            perMonth: '/mo',
+            perQuarter: '/qtr',
+            perHalfYear: '/6mo',
+            perYear: '/yr',
+            renew: 'Renew',
+            renewSuccess: 'Renewal successful',
+            applyAffShort: 'Promo Code',
+            applyAffTitle: 'Bind AFF Promo Code',
+            applyAffInstance: 'Instance',
+            applyAffCurrentRenewPrice: 'Current renew price',
+            applyAffCodeLabel: 'AFF promo code',
+            applyAffCodePlaceholder: 'Enter AFF promo code',
+            applyAffEffectHint: 'After binding, the discount only affects future renewal prices.',
+            applyAffNoRefundHint: 'No current-cycle price difference will be refunded or changed.',
+            applyAffOwnCodeHint: 'You can only bind another user\'s code, not your own code.',
+            applyAffSubmit: 'Confirm Binding',
+            applyAffSubmitting: 'Binding...',
+            applyAffSuccess: 'Promo code bound successfully. Future renewals will use the discount.',
+            // Auto renew
+            autoRenew: 'Auto Renew',
+            autoRenewOn: 'Auto-renew enabled',
+            autoRenewOff: 'Auto-renew not enabled',
+            autoRenewEnabled: 'Auto-renew enabled',
+            autoRenewDisabled: 'Auto-renew disabled',
+            enableAutoRenew: 'Enable Auto Renew',
+            disableAutoRenew: 'Disable Auto Renew',
+            autoRenewHint: 'Will automatically deduct from balance 24 hours before expiration',
+            autoRenewDesc: 'Once enabled, the instance will automatically renew per {cycle} cycle, costing ￥{price} each time',
+            currentStatus: 'Current Status',
+        },
+        // Instance destroy
+        destroy: {
+            button: 'Destroy',
+            title: 'Destroy Instance',
+            warning: 'This action will permanently delete the instance and all its data, including snapshots, backups, port mappings, etc. This cannot be undone.',
+            warningFree: 'This action will permanently delete the instance and all its data. This cannot be undone.',
+            rulesTitle: 'Destroy Rules',
+            rulesDesc: 'Learn about the rules and limitations of the destroy feature',
+            ruleFirstFree: 'First destroy is fee-free',
+            ruleFirstFreeDesc: 'Your first destroy operation will be exempt from fees with full refund',
+            ruleFeeRate: '{rate}% fee for subsequent destroys',
+            ruleFeeRateDesc: 'Second and subsequent destroys charge {rate}% fee',
+            ruleTrafficThreshold: 'Paid instances require monthly traffic cycle usage below 5G',
+            ruleTrafficThresholdDesc: 'If usage in the current monthly traffic cycle reaches or exceeds 5G, this paid instance cannot be destroyed',
+            ruleFreeInstance: 'Free instances can be destroyed directly',
+            ruleFreeInstanceDesc: 'Free instance destroy has no refund and does not count towards destroy quota',
+            // Preview info
+            instanceInfo: 'Instance Info',
+            instanceName: 'Instance Name',
+            hostName: 'Node',
+            planName: 'Current Plan',
+            refundInfo: 'Refund Info',
+            remainingDays: 'Remaining Days',
+            remainingValue: 'Remaining Value',
+            maxRefundable: 'Refund Cap',
+            feeRate: 'Fee Rate',
+            feeAmount: 'Fee',
+            refundAmount: 'Refund Amount',
+            firstTimeFree: 'First time fee-free',
+            freeInstanceNoRefund: 'Free instance no refund',
+            days: 'days',
+            // Confirm
+            confirmTitle: 'Confirm Destroy',
+            confirmHint: 'Please enter the instance name {name} to confirm destroy',
+            confirmPlaceholder: 'Enter instance name to confirm',
+            confirmButton: 'Confirm Destroy',
+            destroying: 'Destroying...',
+            cancel: 'Cancel',
+            // Status
+            success: 'Instance destroyed',
+            successWithRefund: 'Instance destroyed, refunded ¥{amount}',
+            failed: 'Destroy failed',
+            loadFailed: 'Failed to load destroy info',
+            // Cannot destroy reasons
+            cannotDestroy: 'Cannot Destroy',
+        },
+        // Instance detail page
+        detail: {
+            invalidId: 'Invalid instance ID',
+            notExist: 'Instance does not exist',
+            loadFailed: 'Failed to load instance',
+            tabs: {
+                info: 'Info',
+                network: 'Network',
+                traffic: 'Traffic',
+                quota: 'Quota',
+                snapshots: 'Snapshots',
+                backups: 'Backups',
+                config: 'Config',
+                logs: 'Logs',
+            },
+            task: {
+                start: 'Starting...',
+                stop: 'Stopping...',
+                restart: 'Restarting...',
+                rebuild: 'Rebuilding...',
+                recreate: 'Recreating...',
+                clone: 'Cloning...',
+                change_host: 'Changing host...',
+            },
+            actions: {
+                starting: 'Instance is starting',
+                stopped: 'Instance has been stopped',
+                restarting: 'Instance is restarting',
+                deleted: 'Instance has been deleted',
+                confirmDelete: 'Are you sure to delete instance "{name}"?\n\nThis will permanently delete the instance and all data. This action cannot be undone.',
+                actionFailed: 'Action failed',
+                taskQueued: 'Task submitted, please wait...',
+                taskInProgress: 'Instance has another task in progress, please wait',
+                rebuildSuccess: 'System rebuilt successfully, new password generated',
+                recreateSuccess: 'Instance recreated successfully, new password generated',
+                selectImageAndKey: 'Please select an image and SSH key',
+                clone: 'Clone Instance',
+                cloning: 'Cloning...',
+                cloneSuccess: 'Instance cloned successfully',
+                cloneFailed: 'Instance clone failed',
+                confirmClone: 'Are you sure you want to clone instance "{name}"?',
+                cloneNotice: 'The clone operation will create a new instance copy. The new instance will inherit all configurations from the source instance, but will be assigned new port mappings. The cloning process may take a few minutes, please be patient.',
+                stopRequired: 'Please stop the instance first',
+                stopRequiredHint: 'This operation requires the instance to be stopped',
+                suspend: 'Suspend Instance',
+                unsuspend: 'Unsuspend Instance',
+                suspending: 'Suspending...',
+                unsuspending: 'Unsuspending...',
+                suspendSuccess: 'Instance has been suspended',
+                unsuspendSuccess: 'Instance has been unsuspended',
+                syncStatus: 'Sync',
+                help: 'Help',
+                syncStatusChanged: 'Status synced: {from} → {to}',
+                syncStatusNoChange: 'Status updated, network addresses synced',
+                syncIpv4Changed: 'Internal IP updated: {from} → {to}',
+                syncProxySitesUpdated: 'Updated {count} proxy site(s) configuration',
+                confirmSuspend: 'Are you sure you want to suspend instance "{name}"?',
+                confirmSuspendNotice: 'After suspension, the instance owner will not be able to perform any operations on this instance until it is manually unsuspended.',
+                suspendReason: 'Suspension Reason',
+                suspendReasonPlaceholder: 'Enter suspension reason, will be sent to instance owner via notification...',
+                confirmUnsuspend: 'Are you sure you want to unsuspend instance "{name}"?',
+            },
+            rebuild: {
+                title: 'Rebuild',
+                noHostInfo: 'Unable to get host information',
+                noImages: 'No images are currently available on this host. Please contact the host owner or administrator to adjust the image policy.',
+                loadImagesFailed: 'Failed to load image list',
+                loadKeysFailed: 'Failed to load SSH keys',
+            },
+            recreate: {
+                title: 'Recreate Instance',
+            },
+            port: {
+                fillPrivatePort: 'Please fill in the private port',
+                added: 'Port mapping added',
+                addedBoth: 'TCP and UDP port mappings added',
+                batchAdded: '{count} port mappings added',
+                stillConflict: 'Some ports still have conflicts, please re-select',
+                deleted: 'Port mapping deleted',
+                deleteFailed: 'Delete failed',
+                confirmDelete: 'Are you sure to delete this port mapping?',
+                confirmBatchDelete: 'Are you sure to delete {count} port mappings?',
+                batchDeleted: '{count} port mappings deleted',
+                batchDeletePartial: 'Deleted {success}, {fail} failed',
+            },
+            password: {
+                loadFailed: 'Failed to load password',
+            },
+            quota: {
+                saved: 'Quota updated',
+                saveFailed: 'Save failed',
+                portExceedUsed: 'Port quota cannot be less than current usage: {used} ports used, input {input}',
+                snapshotExceedUsed: 'Snapshot quota cannot be less than current usage: {used} snapshots used, input {input}',
+                backupExceedUsed: 'Backup quota cannot be less than current usage: {used} backups used, input {input}',
+                portOutOfRange: 'Port quota must be between 1 and 1000',
+                snapshotOutOfRange: 'Snapshot quota must be between 1 and 1000',
+                backupOutOfRange: 'Backup quota must be between 1 and 1000',
+            },
+            copy: {
+                success: 'Copied to clipboard',
+                failed: 'Copy failed',
+            },
+            // Info tab
+            info: {
+                title: 'Basic Info',
+                instanceId: 'Instance ID',
+                image: 'Image',
+                host: 'Host',
+                networkMode: 'Network Mode',
+                instanceMode: 'Instance Mode',
+                nat: 'NAT',
+                ipv6: 'IPv6',
+                sshPort: 'SSH Port',
+                sshHelpTitle: 'SSH Connection Guide',
+                sshHelpIpv4: 'For IPv4 connection, go to the "Network" tab to add a port mapping for port 22, then connect using the public IP and the mapped port.',
+                sshHelpIpv6: 'For IPv6 connection, you can directly connect using the public IPv6 address and port 22 without configuring port mapping.',
+                rootPassword: 'Root Password',
+                createdAt: 'Created At',
+                expiresAt: 'Expires At',
+                suspended: 'Instance Suspended',
+                suspendedAt: 'Suspended At',
+                suspendReasonLabel: 'Reason',
+                suspendReasonExpired: 'Instance has expired, please renew to unsuspend',
+                suspendReasonDefault: 'No reason provided',
+                suspendTip: 'While suspended, the instance cannot be started, restarted, rebuilt, etc. To request unsuspension or if you have questions, please submit a ticket.',
+                copy: 'Copy',
+                show: 'Show',
+                hide: 'Hide',
+                resourceUsage: 'Resource Usage',
+                cpu: 'CPU',
+                memory: 'Memory',
+                disk: 'Disk',
+                inbound: 'Inbound',
+                outbound: 'Outbound',
+                ingressLimit: 'Ingress',
+                egressLimit: 'Egress',
+                hostUid: 'Host UID',
+                hostOwnerTitle: 'Host Owner Info',
+                hostOwnerEmail: 'Email',
+                hostOwnerHostCount: 'Hosted Nodes',
+                hostOwnerInstanceCount: 'Total Instances',
+                hostOwnerRegisteredDays: 'Registered',
+                includesCache: 'incl. cache',
+                cannotEditConfig: 'Instance status does not allow config changes',
+                redeem: 'Redeem',
+                redeemTitle: 'Redeem Resources',
+            },
+            // Cloud-init initialization status
+            cloudInit: {
+                initializing: 'Initializing',
+                retry: 'Retry',
+                retryUnknown: 'Retry Detection',
+                retryStalled: 'Keep Checking',
+                short: 'Init',
+                shortUnknown: 'Pending',
+                shortStalled: 'Slow',
+                clickToRetry: 'System initializing, click to retry',
+                clickToRetryUnknown: 'Cloud-init status is currently unknown, click to retry detection',
+                clickToRetryStalled: 'Initialization is taking longer than usual, click to keep checking or mark it complete manually',
+                statusUnknown: 'Status Unknown',
+                stalled: 'Initialization Slow',
+                manualComplete: 'Mark Complete',
+                manualShort: 'Done',
+                manualCompleteSuccess: 'Cloud-init has been marked complete manually',
+            },
+            // Network tab
+            network: {
+                title: 'Network Addresses',
+                privateIpv4: 'Private IPv4',
+                publicIpv4: 'Public IPv4',
+                publicIpv6: 'Public IPv6',
+                portMappings: 'Port Mappings',
+                publicIp: 'Public IP',
+                add: 'Add',
+                noQuota: 'Please allocate port quota first',
+                quotaFull: 'Port quota is full',
+                addPortMapping: 'Add port mapping',
+                prevPage: 'Previous',
+                nextPage: 'Next',
+                perPage: 'Per page',
+                filterBoth: 'Both',
+                selectAll: 'Select all on page',
+                selectedCount: '{count} selected',
+                batchDelete: 'Delete selected',
+                noFilterResults: 'No results match the current filter',
+                noPortQuota: 'No port quota allocated',
+                allocateQuotaHint: 'Please allocate port quota in the "Quota" tab first',
+                noPortMappings: 'No port mappings, click "Add" to create',
+                ipv6OnlyPortMappingHint: 'IPv6 Only instances do not support port mapping. Please use the instance IPv6 address directly.',
+                additionalIpv6: 'Additional IPv6 Addresses',
+                addIpv6: 'Add IPv6',
+                noAdditionalIpv6: 'No additional IPv6 addresses',
+                ipAdded: 'IPv6 address added successfully',
+                ipAddFailed: 'Failed to add IPv6 address',
+                ipDeleted: 'IPv6 address deleted',
+                ipDeleteFailed: 'Failed to delete IPv6 address',
+                confirmDeleteIp: 'Are you sure you want to delete this IPv6 address?',
+                // IPv6 management additions
+                primaryIpv6: 'Primary IPv6',
+                extraIpv6: 'Extra IPv6',
+                ipv6Subnets: 'IPv6 Subnets',
+                addSubnet: 'Allocate Subnet',
+                customIpv6: 'Custom IPv6',
+                randomIpv6: 'Random Assign',
+                setCustom: 'Set Custom',
+                custom: 'Custom',
+                primary: 'Primary',
+                addIpv6Modal: {
+                    title: 'Add IPv6 Address',
+                    randomHint: 'System will randomly assign an address from the host IPv6 subnet',
+                    customHint: 'Enter your own IPv6 address (must be within the host subnet range)',
+                    addressLabel: 'IPv6 Address',
+                    addressPlaceholder: 'e.g. 2001:db8::1',
+                    invalidAddress: 'Invalid IPv6 address format',
+                    adding: 'Adding...',
+                },
+                subnetModal: {
+                    title: 'Allocate IPv6 Subnet',
+                    hint: 'Select the subnet size to allocate, the system will automatically assign from the available pool',
+                    prefix112: '/112 (65,536 IPs)',
+                    prefix120: '/120 (256 IPs)',
+                    prefix124: '/124 (16 IPs)',
+                    allocating: 'Allocating...',
+                    allocate: 'Allocate',
+                },
+                noSubnets: 'No IPv6 subnets allocated',
+                subnetAllocated: 'IPv6 subnet allocated successfully',
+                subnetAllocateFailed: 'Failed to allocate IPv6 subnet',
+                subnetDeleted: 'IPv6 subnet deleted',
+                subnetDeleteFailed: 'Failed to delete IPv6 subnet',
+                confirmDeleteSubnet: 'Are you sure you want to delete this IPv6 subnet?',
+                customIpv6Set: 'Custom IPv6 address set successfully',
+                customIpv6Failed: 'Failed to set custom IPv6 address',
+                ipv6NotInSubnet: 'IPv6 address must be within host subnet range',
+                ipv6AlreadyExists: 'IPv6 address is already in use',
+                instanceMustRunning: 'Instance must be running to manage IPv6',
+                loading: 'Loading...',
+                // Reassign IPv6
+                reassignIpv6: 'Reassign',
+                reassignIpv6Confirm: 'Are you sure you want to reassign IPv6 address?',
+                reassignIpv6ConfirmHint: 'You need to rebuild the system for the new IPv6 to take effect',
+                reassignIpv6Success: 'IPv6 reassigned, please rebuild the system to apply',
+                reassignIpv6Failed: 'Failed to reassign IPv6',
+                reassignIpv6Loading: 'Reassigning...',
+                reassignIpv6StopRequired: 'Instance must be stopped to reassign IPv6',
+                reassignIpv6Cooldown: 'Only once per day, please wait {hours} hours',
+                reassignIpv6CooldownShort: 'In {hours}h',
+                reassignIpv6NotSupported: 'This instance does not support IPv6 reassignment',
+            },
+            // Quota tab
+            quotaTab: {
+                title: 'Instance Quota Settings',
+                portLimit: 'NAT Port Limit',
+                snapshotLimit: 'Snapshot Limit',
+                backupLimit: 'Backup Limit',
+                placeholder: 'Leave empty or enter 0 to auto-fill remaining quota',
+                currentUsage: 'Current usage',
+                quotaLimit: 'Quota limit',
+                full: 'Full',
+                remaining: 'Remaining',
+                defaultRemaining: 'Default account remaining',
+                unit: '',
+                portMappings: 'port mappings',
+                snapshots: 'snapshots',
+                backups: 'backups',
+                save: 'Save Quota Settings',
+                saving: 'Saving...',
+            },
+        },
+        // Config edit modal
+        configEdit: {
+            title: 'Edit Configuration',
+            hint: 'CPU and memory changes take effect immediately without restart. Disk can only be increased.',
+            cpu: 'CPU',
+            memory: 'Memory',
+            disk: 'Disk',
+            traffic: 'Traffic',
+            trafficHint: 'Leave empty for unlimited, unit is GB',
+            cores: 'cores',
+            resourceType: 'Resource',
+            current: 'current',
+            modifyTo: 'Modify to',
+            diskOnlyIncrease: 'increase only',
+            quotaInsufficient: 'Quota Insufficient',
+            quotaError: {
+                cpu: 'CPU quota insufficient: available {available}%, need {need}%',
+                memory: 'Memory quota insufficient: available {available}, need {need}',
+                disk: 'Disk quota insufficient: available {available}, need {need}',
+            },
+            success: 'Configuration updated successfully',
+            failed: 'Failed to update configuration',
+            packageRequired: 'Instance must be bound to a package to edit configuration',
+            loadPackageFailed: 'Failed to load package information, please try again later',
+        },
+        // Sites management
+        sites: {
+            title: 'Sites',
+            addSite: 'Add Site',
+            editSite: 'Edit Site',
+            addFirstSite: 'Add First Site',
+            empty: 'No proxy sites yet. Click the button above to add one.',
+            caddyNotEnabled: 'Caddy not enabled on host',
+            caddyNotEnabledHint: 'The host where this instance is located has not enabled the Caddy reverse proxy service. Website features are unavailable.',
+            domain: 'Domain',
+            domainRequired: 'Please enter domain',
+            domainHint: 'Enter the domain to bind, wildcards not supported',
+            wildcardNotAllowed: 'Wildcard domains not supported (e.g. *.example.com)',
+            targetPort: 'Target Port',
+            portHint: 'Web service port running inside the instance (e.g. 80, 3000, 8080)',
+            statusActive: 'Active',
+            statusPending: 'Pending DNS',
+            statusError: 'Error',
+            refresh: 'Refresh Config',
+            loadFailed: 'Failed to load sites',
+            addSuccess: 'Site added successfully',
+            addFailed: 'Failed to add site',
+            deleteConfirm: 'Are you sure to delete site {domain}?',
+            deleteSuccess: 'Site deleted',
+            deleteFailed: 'Failed to delete site',
+            updateSuccess: 'Site updated',
+            updateFailed: 'Failed to update site',
+            refreshSuccess: 'Configuration refreshed',
+            refreshFailed: 'Failed to refresh configuration',
+            addedSuccess: 'Domain added successfully',
+            dnsHintDesc: 'Please add the following DNS record at your DNS provider:',
+            dnsType: 'Type',
+            dnsHost: 'Host',
+            dnsValue: 'Value',
+            sslAutoHint: 'Caddy will automatically apply for SSL certificate after DNS propagation.',
+            quotaInfo: '{used} / {limit} sites used',
+            quotaFull: 'Limit reached',
+            disabled: 'Disabled',
+            enableSite: 'Enable site',
+            disableSite: 'Disable site',
+            toggleFailed: 'Failed to toggle status',
+            enableHttps: 'Enable HTTPS',
+            httpsHint: 'Auto-apply Let\'s Encrypt certificate, HTTP will redirect to HTTPS',
+            httpsEnabled: 'HTTPS enabled',
+            httpOnly: 'HTTP only',
+            checkCert: 'Check Certificate',
+            certCheckFailed: 'Failed to check certificate status',
+            checkDns: 'Check DNS',
+            dnsActivated: 'DNS verified, site activated',
+            dnsResolved: 'DNS resolved correctly',
+            dnsCheckFailed: 'DNS check failed',
+            dnsHintWithCheck: 'After DNS configuration, click "Check DNS" to activate the site',
+            remark: 'Remark',
+            remarkPlaceholder: 'Optional, e.g. Blog, API Service',
+            cert: {
+                title: 'Certificate Status',
+                valid: 'Certificate Valid',
+                disabled: 'HTTPS Not Enabled',
+                pending: 'Pending Activation',
+                certPending: 'Certificate Pending',
+                dnsError: 'DNS Not Resolved',
+                connectionRefused: 'Connection Refused',
+                timeout: 'Connection Timeout',
+                error: 'Check Failed',
+                issuer: 'Issuer',
+                validFrom: 'Valid From',
+                validTo: 'Valid To',
+                daysRemaining: 'Days Remaining',
+                days: 'days',
+            },
+        },
+    },
+
+    // Port mapping modal
+    portModal: {
+        title: 'Add Port Mapping',
+        protocol: 'Protocol',
+        bothHint: 'Will create both TCP and UDP mappings, using 2 quota slots',
+        privatePort: 'Private Port',
+        privatePortRequired: '*',
+        privatePortPlaceholder: 'Container internal port, e.g. 80, 22, 3306',
+        privatePortPlaceholderRange: 'e.g. 80 or 80-85',
+        publicPort: 'Public Port',
+        publicPortOptional: '(optional)',
+        publicPortPlaceholder: 'Leave empty for auto-assign',
+        publicPortPlaceholderRange: 'e.g. 20000 or 20000-20005',
+        publicPortHint: 'Leave empty to auto-assign an available port from the pool',
+        publicPortHintWithRange: 'Available range: {start}-{end}, leave empty to auto-assign',
+        remark: 'Remark',
+        remarkOptional: '(optional)',
+        remarkPlaceholder: 'e.g. Web Server, Database, SSH',
+        cancel: 'Cancel',
+        adding: 'Adding...',
+        add: 'Add',
+        // Range input support
+        rangeHint: 'Supports range input, e.g. 80-85',
+        invalidPortFormat: 'Invalid port format, enter a single port or port range (e.g. 80-85)',
+        ipv6OnlySshPortHint: 'Port 22 does not need a mapping. Use the public IPv6 for SSH; the front door is already lit.',
+        rangeMismatch: 'Private port count ({private}) does not match public port count ({public})',
+        publicPortOutOfRange: 'Public port is out of allowed range ({start}-{end})',
+        quotaPreview: 'Will create {count} mappings, using {quota} quota slots',
+        quotaRemaining: '{remain} remaining',
+        quotaInsufficient: 'Quota insufficient, need {need}, only {remain} remaining',
+    },
+
+    // Port conflict resolution modal
+    portConflict: {
+        title: 'Some Ports Are Occupied',
+        subtitle: '{count} port conflicts',
+        description: 'The following ports are already in use by other instances. You can modify to new ports or use system suggestions.',
+        originalPort: 'Original',
+        newPort: 'New Port',
+        occupied: 'Occupied',
+        suggested: 'Suggested',
+        rangeHint: 'Available range: {start}-{end}',
+        useSuggested: 'Use All Suggestions',
+        cancel: 'Cancel',
+        confirm: 'Confirm Changes',
+    },
+
+    // Rebuild modal
+    rebuildModal: {
+        title: 'Rebuild System',
+        dangerWarning: 'Dangerous Operation',
+        warningList: {
+            dataLoss: 'Rebuilding will erase all data in the instance',
+            snapshotLoss: 'All snapshots will be permanently deleted',
+            irreversible: 'This action cannot be undone!',
+        },
+        preserveInfo: 'Port mappings will be preserved during rebuild.',
+        manualStartHint: 'The instance needs to be started manually after the rebuild is complete.',
+        selectImage: 'Select New Image',
+        imageHint: 'Only images currently allowed on this host are available',
+        selectSshKey: 'Select SSH Key',
+        noSshKey: 'No available keys',
+        addSshKeyHint: 'Please add an SSH key in settings first',
+        passwordHint: 'A new root password will be generated after rebuild, viewable on the instance detail page.',
+        cancel: 'Cancel',
+        rebuilding: 'Rebuilding...',
+        confirmRebuild: 'Confirm Rebuild',
+    },
+
+    // Recreate instance modal
+    recreateModal: {
+        title: 'Recreate Instance',
+        dangerWarning: 'Dangerous Operation',
+        warningList: {
+            dataLoss: 'Recreating will erase all data in the instance',
+            snapshotLoss: 'All snapshots will be permanently deleted',
+            portMappingLoss: 'All port mappings will be deleted',
+            backupLoss: 'All backups and backup policies will be deleted',
+            proxySiteLoss: 'All proxy sites and snapshot policies will be deleted',
+            irreversible: 'This action cannot be undone!',
+        },
+        differenceHint: 'Unlike rebuild: no need to stop the instance first, a new instance will replace the old one.',
+        preserveInfo: 'Only billing status and quotas will be preserved.',
+        selectImage: 'Select New Image',
+        selectSshKey: 'Select SSH Key',
+        noSshKey: 'No available keys',
+        addSshKeyHint: 'Please add an SSH key in settings first',
+        cancel: 'Cancel',
+        recreating: 'Recreating...',
+        confirmRecreate: 'Confirm Recreate',
+    },
+
+    // Snapshot management
+    snapshot: {
+        title: 'Snapshots',
+        autoPolicy: 'Auto Snapshot Enabled',
+        autoPolicyEnabled: 'Auto Snapshot Enabled',
+        currentPolicy: 'Current Policy',
+        disableAutoPolicy: 'Disable',
+        minutes: 'minutes',
+        manual: 'Manual',
+        autoSettings: 'Auto Snapshot Settings',
+        create: 'Create',
+        noQuota: 'Please allocate snapshot quota first',
+        quotaFull: 'Snapshot quota is full',
+        createSnapshot: 'Create Snapshot',
+        noSnapshots: 'No snapshots',
+        noQuotaAllocated: 'No snapshot quota allocated',
+        allocateQuotaHint: 'Please allocate snapshot quota in the "Quota" tab first',
+        statefulSnapshot: 'Stateful',
+        restore: 'Restore',
+        stopInstanceFirst: 'Please stop the instance first',
+        delete: 'Delete',
+        createModal: {
+            title: 'Create Snapshot',
+            name: 'Name',
+            nameRequired: '*',
+            namePlaceholder: 'snapshot-01',
+            description: 'Description',
+            descriptionPlaceholder: 'Optional description',
+            stateful: 'Save memory state (stateful snapshot)',
+            cancel: 'Cancel',
+            creating: 'Creating...',
+            create: 'Create',
+        },
+        policyModal: {
+            title: 'Auto Snapshot Settings',
+            enable: 'Enable auto snapshots',
+            interval: 'Snapshot Interval',
+            intervalOptions: {
+                min10: 'Every 10 minutes',
+                hour1: 'Every 1 hour',
+                hour6: 'Every 6 hours',
+                hour24: 'Every 24 hours',
+                day3: 'Every 3 days',
+            },
+            quotaFromPackage: 'Quota inherited from package, current limit is {limit}. Oldest auto snapshot will be deleted when quota is full.',
+            cancel: 'Cancel',
+            saving: 'Saving...',
+            save: 'Save',
+        },
+        messages: {
+            createSuccess: 'Snapshot created',
+            createFailed: 'Create failed',
+            deleteConfirm: 'Are you sure to delete snapshot "{name}"? This action cannot be undone.',
+            deleteSuccess: 'Snapshot deleted',
+            deleteFailed: 'Delete failed',
+            restoreConfirm: 'Are you sure to restore instance to snapshot "{name}"? Current data will be overwritten.',
+            restoreSuccess: 'Snapshot restored',
+            restoreFailed: 'Restore failed',
+            stopInstanceFirst: 'Please stop the instance before restoring snapshot',
+            policySaved: 'Auto snapshot policy updated',
+            policyDisabled: 'Auto snapshot disabled',
+            policySaveFailed: 'Save failed',
+        },
+    },
+
+    // Backup management
+    backup: {
+        title: 'Backups',
+        autoPolicy: 'Auto Backup Enabled',
+        autoPolicyEnabled: 'Auto Backup Enabled',
+        currentPolicy: 'Current Policy',
+        disableAutoPolicy: 'Disable',
+        minutes: 'minutes',
+        manual: 'Manual',
+        autoSettings: 'Auto Backup Settings',
+        create: 'Create',
+        noQuota: 'Please allocate backup quota first',
+        quotaFull: 'Backup quota is full',
+        createBackup: 'Create Backup',
+        noBackups: 'No backups',
+        noQuotaAllocated: 'No backup quota allocated',
+        allocateQuotaHint: 'Please allocate backup quota in the "Quota" tab first',
+        status: {
+            creating: 'Creating',
+            ready: 'Ready',
+            error: 'Error',
+        },
+        export: 'Export',
+        preparing: 'Preparing...',
+        clickToDownload: 'Click to download',
+        downloading: 'Downloading...',
+        retry: 'Retry',
+        delete: 'Delete',
+        createModal: {
+            title: 'Create Backup',
+            name: 'Name',
+            nameRequired: '*',
+            namePlaceholder: 'backup-01',
+            description: 'Description',
+            descriptionPlaceholder: 'Optional description',
+            expiresIn: 'Expires In (optional)',
+            neverExpire: 'Never expire',
+            days7: '7 days',
+            days14: '14 days',
+            days30: '30 days',
+            days90: '90 days',
+            year1: '1 year',
+            createHint: 'Backup creation may take a few minutes, please wait.',
+            cancel: 'Cancel',
+            creating: 'Creating...',
+            create: 'Create',
+        },
+        policyModal: {
+            title: 'Auto Backup Settings',
+            enable: 'Enable auto backups',
+            interval: 'Backup Interval',
+            intervalOptions: {
+                hour1: 'Every 1 hour',
+                hour6: 'Every 6 hours',
+                hour24: 'Every 24 hours',
+                day3: 'Every 3 days',
+            },
+            quotaFromPackage: 'Quota inherited from package, current limit is {limit}. Oldest auto backup will be deleted when quota is full.',
+            cancel: 'Cancel',
+            saving: 'Saving...',
+            save: 'Save',
+        },
+        restore: 'Restore',
+        restoring: 'Restoring...',
+        rollback: 'Rollback',
+        restoreModal: {
+            title: '⚠️ Dangerous Operation - Restore Backup',
+            warning: 'This will overwrite the current instance!',
+            warningDetail: 'The restore operation will stop the current instance and replace it with the backup content. If restore fails, you can rollback to the original instance.',
+            dataLossWarning: 'The following data will be permanently deleted:',
+            dataLossItems: {
+                backups: 'All other backups of this instance',
+                snapshots: 'All snapshots of this instance',
+            },
+            nameChangeNotice: 'After restore, instance name will change to: {name} | restored:{backup}',
+            backupName: 'Backup Name',
+            instanceName: 'Target Instance',
+            cancel: 'Cancel',
+            confirm: 'Confirm Restore',
+        },
+        messages: {
+            createSuccess: 'Backup is being created...',
+            createFailed: 'Create failed',
+            deleteConfirm: 'Are you sure to delete backup "{name}"? This action cannot be undone.',
+            deleteSuccess: 'Backup deleted',
+            deleteFailed: 'Delete failed',
+            exportFailed: 'Export preparation failed',
+            downloadStarted: 'Download started',
+            downloadFailed: 'Download failed',
+            policySaved: 'Auto backup policy updated',
+            policyDisabled: 'Auto backup disabled',
+            policySaveFailed: 'Save failed',
+            restoreStarted: 'Restoring backup "{name}", please wait...',
+            restoreInProgress: 'A restore task is already in progress',
+            restoreCompleted: 'Backup restored successfully!',
+            restoreFailed: 'Restore failed',
+            rollbackCompleted: 'Rollback successful, original instance restored',
+            rollbackFailed: 'Rollback failed',
+            uploadStarted: 'Upload task created',
+            uploadInProgress: 'An upload task is already in progress',
+            uploadCompleted: 'Backup uploaded successfully!',
+            uploadFailed: 'Upload failed',
+            uploadCancelled: 'Upload task cancelled',
+        },
+        // Upload to remote storage
+        upload: 'Upload',
+        uploadRemote: 'Upload to Cloud',
+        uploadModal: {
+            title: 'Upload Backup to Remote Storage',
+            selectStorage: 'Select Storage',
+            useDefault: 'Use Default Storage',
+            noStorage: 'No storage configurations',
+            noStorageHint: 'Please configure remote storage in Settings first',
+            goToSettings: 'Go to Settings',
+            cancel: 'Cancel',
+            upload: 'Start Upload',
+            uploading: 'Uploading...',
+        },
+        uploadStatus: {
+            pending: 'Queued',
+            processing: 'Uploading',
+            completed: 'Completed',
+            failed: 'Failed',
+            queuePosition: 'Queue position: #{position}',
+        },
+    },
+
+    // Dashboard
+    dashboard: {
+        title: 'Dashboard',
+        welcome: 'Welcome back',
+        totalInstances: 'Total',
+        runningInstances: 'Running',
+        stoppedInstances: 'Stopped',
+        creatingInstances: 'Creating',
+        userBalance: 'Balance',
+        balance: 'Balance',
+        memberLevel: 'Membership',
+        memberLevelBasic: 'Basic',
+        uptimeProbe: 'Self-hosted Node Monitor',
+        statusPage: 'Status',
+        rechargeNow: 'Top Up',
+        walletDetails: 'View Wallet',
+        walletHint: 'Go to wallet to recharge',
+        instanceStatusOverview: 'Instance Status',
+        accountOverview: 'Account Overview',
+        runningHealth: 'Running Health',
+        instanceOverviewSummary: '{running}/{total} instances running, {percent}% online',
+        containerInstances: 'Containers',
+        vmInstances: 'Virtual Machines',
+        totalRecharge: 'Total Recharge',
+        totalConsume: 'Total Spend',
+        userPoints: 'Points',
+        frozenBalance: 'Frozen Balance',
+        frozenBalanceHint: 'Some balance is frozen. Check wallet details.',
+        accountReadyHint: 'Account is ready for instance creation and renewals',
+        instanceListSummary: 'Showing recent {count} of {total} instances',
+        vipProgressTitle: 'Membership Progress',
+        vipProgressToNext: '{current} → {next}',
+        vipProgressMaxed: 'You are at the highest configured membership level',
+        vipProgressNoRule: 'No next level rule configured',
+        vipProgressUnavailable: 'Membership progress is unavailable',
+        vipProgressAllHint: 'Reach {level} by meeting all conditions below',
+        vipProgressAnyHint: 'Reach {level} by meeting any condition below',
+        vipProgressSingleMetricHint: 'Reach {level} by meeting the {metric} threshold',
+        vipProgressStableHint: 'Keep your current benefits; the benefits hall can use this level later',
+        vipMetricTotalRecharge: 'Total Recharge',
+        vipMetricTotalConsume: 'Total Spend',
+        vipMetricTotalHostingIncome: 'Hosting Income',
+        vipMetricInstanceCount: 'Hosted Instances',
+        vipProgressConditionMet: 'Completed',
+        vipProgressCurrent: 'Current',
+        vipProgressTarget: 'Target',
+        vipProgressRemaining: 'Remaining',
+        vipProgressRemainingMoney: '{amount} remaining',
+        vipProgressRemainingCount: '{count} remaining',
+        resourceUsage: 'Resource Usage',
+        resourceOverview: 'Here is your resource usage overview',
+        newInstance: 'New Instance',
+        quotaUsage: 'Quota Usage',
+        increaseQuota: 'Increase Quota',
+        pinnedArticles: 'Pinned Help Articles',
+        viewAllHelp: 'View All Help',
+        myInstances: 'My Instances',
+        viewAll: 'View All',
+        viewAllInstances: 'View all {count} instances',
+        viewAllInstancesWithCount: 'View all {count} instances',
+        memoryMetric: 'Memory',
+        diskMetric: 'Disk',
+        noPublicIp: 'No public IP',
+        unknownHost: 'Unassigned host',
+        noInstances: 'No instances created yet',
+        createFirst: 'Create your first instance',
+        quickActions: 'Quick Actions',
+        createInstance: 'Create Instance',
+        newContainer: 'New container',
+        instanceList: 'Instance List',
+        manageInstances: 'Manage instances',
+        profileSettings: 'Profile',
+        accountSecurity: 'Account security',
+        helpDocs: 'Help',
+        userGuide: 'User guide',
+        greeting: {
+            morning: 'Good morning',
+            afternoon: 'Good afternoon',
+            evening: 'Good evening',
+            basicUser: '{username}',
+            memberUser: 'dear {level} {username}',
+            full: '{greeting}, {member}',
+        },
+    },
+
+    // Profile
+    profile: {
+        title: 'Profile',
+        basicInfo: 'Basic Info',
+        security: 'Security',
+        changePassword: 'Change Password',
+        currentPassword: 'Current Password',
+        newPassword: 'New Password',
+        confirmNewPassword: 'Confirm New Password',
+        twoFactor: 'Two-Factor Auth',
+        enableTwoFactor: 'Enable 2FA',
+        disableTwoFactor: 'Disable 2FA',
+        // Account section
+        account: {
+            title: 'Account',
+            username: 'Username',
+            uid: 'UID',
+            role: 'Role',
+            email: 'Email',
+            notSet: 'Not set',
+            admin: 'Admin',
+            user: 'User',
+            changeEmail: 'Change',
+            bindEmail: 'Bind',
+            emailDialog: {
+                titleChange: 'Change Email',
+                titleBind: 'Bind Email',
+                stepCurrent: 'Verify current email',
+                stepCurrentSkipped: 'No current email bound',
+                stepCurrentHint: 'Verify your current email first to confirm this action is initiated by you.',
+                stepNew: 'Verify new email',
+                stepNewHint: 'Enter your new email address and complete the verification code step.',
+                noCurrentEmailHint: 'No email is currently bound to this account. You can go directly to verifying the new email.',
+                verifyCurrentTitle: 'Current email verification',
+                verifyCurrentDesc: 'A verification code will be sent to {email}. You can continue only after it is verified.',
+                currentCode: 'Current email code',
+                currentCodePlaceholder: 'Enter the 6-digit code',
+                sendCurrentCode: 'Send code',
+                resendCurrentCode: 'Resend',
+                currentCodeSent: 'Current email verification code sent',
+                currentCodeRequired: 'Please enter the current email verification code',
+                verifyCurrentAction: 'Verify current email',
+                currentVerifiedSuccess: 'Current email verified',
+                currentVerificationExpired: 'Current email verification expired. Please verify your current email again.',
+                verifyNewTitle: 'New email verification',
+                verifyNewDesc: 'Verify the new email address. Once complete, it will become your new login email.',
+                bindEmailDesc: 'Verify the new email address to bind it to your account.',
+                newEmail: 'New email',
+                newEmailPlaceholder: 'Enter the new email address',
+                newEmailRequired: 'Please enter the new email address',
+                newEmailInvalid: 'Please enter a valid email address',
+                newEmailSame: 'The new email must be different from the current email',
+                newCode: 'New email code',
+                newCodePlaceholder: 'Enter the 6-digit code sent to the new email',
+                newCodeRequired: 'Please enter the new email verification code',
+                sendNewCode: 'Send code',
+                resendNewCode: 'Resend',
+                newCodeSent: 'New email verification code sent',
+                resendIn: 'Resend in {seconds}s',
+                confirmAction: 'Confirm',
+                updateSuccess: 'Email updated',
+                verifying: 'Verifying...',
+                submitting: 'Submitting...'
+            }
+        },
+        // Avatar
+        avatar: {
+            title: 'Avatar Style',
+            saveSuccess: 'Avatar style updated',
+            saveFailed: 'Failed to update avatar style',
+            styles: {
+                adventurer: 'Adventurer',
+                adventurerNeutral: 'Adventurer Neutral',
+                avataaars: 'Avataaars',
+                avataaarsNeutral: 'Avataaars Neutral',
+                bigEars: 'Big Ears',
+                bigEarsNeutral: 'Big Ears Neutral',
+                bigSmile: 'Big Smile',
+                bottts: 'Bottts',
+                botttsNeutral: 'Bottts Neutral',
+                croodles: 'Croodles',
+                croodlesNeutral: 'Croodles Neutral',
+                dylan: 'Dylan',
+                funEmoji: 'Fun Emoji',
+                glass: 'Glass',
+                icons: 'Icons',
+                identicon: 'Identicon',
+                initials: 'Initials',
+                lorelei: 'Lorelei',
+                loreleiNeutral: 'Lorelei Neutral',
+                micah: 'Micah',
+                miniavs: 'Miniavs',
+                notionists: 'Notionists',
+                notionistsNeutral: 'Notionists Neutral',
+                openPeeps: 'Open Peeps',
+                personas: 'Personas',
+                pixelArt: 'Pixel Art',
+                pixelArtNeutral: 'Pixel Art Neutral',
+                rings: 'Rings',
+                shapes: 'Shapes',
+                thumbs: 'Thumbs',
+            },
+        },
+        // Resource quota
+        resourceQuota: {
+            title: 'Resource Quota',
+            hosts: 'Hosts',
+            instances: 'Instances',
+            friends: 'Friends',
+            unit: '',
+        },
+        // Billing (BillingSection component)
+        billing: {
+            title: 'Account Balance',
+            currentBalance: 'Current Balance',
+            recharge: 'Recharge',
+            totalRecharge: 'Total Recharge',
+            totalConsume: 'Total Consume',
+            balanceLogs: 'Balance Logs',
+            rechargeRecords: 'Recharge Records',
+            noLogs: 'No balance logs',
+            noRecords: 'No recharge records',
+            loadLogsFailed: 'Failed to load balance logs',
+            loadProvidersFailed: 'Failed to load payment providers',
+            loadRecordsFailed: 'Failed to load recharge records',
+            selectProvider: 'Please select payment method',
+            invalidAmount: 'Invalid amount',
+            orderCreated: 'Order created',
+            redirecting: 'Redirecting to payment page...',
+            orderNo: 'Order No',
+            createOrderFailed: 'Failed to create order',
+            paymentMethod: 'Payment Method',
+            noProviders: 'No payment providers available',
+            amount: 'Recharge Amount',
+            amountRange: 'Amount Range',
+            feeNote: 'Fee',
+            pay: 'Pay Now',
+            logTypes: {
+                recharge: 'Recharge',
+                consume: 'Consume',
+                refund: 'Refund',
+                adminAdjust: 'Admin Adjust',
+                gift: 'Gift',
+            },
+            status: {
+                pending: 'Pending',
+                paid: 'Paid',
+                completed: 'Completed',
+                failed: 'Failed',
+                cancelled: 'Cancelled',
+                refunded: 'Refunded',
+            },
+        },
+        // User billing (legacy)
+        userBilling: {
+            title: 'Balance & Recharge',
+            balance: 'Current Balance',
+            frozen: 'Frozen',
+            recharge: 'Recharge',
+            rechargeTitle: 'Account Recharge',
+            selectAmount: 'Select Amount',
+            customAmount: 'Custom Amount',
+            selectProvider: 'Select Payment Method',
+            noProviders: 'No payment providers available',
+            confirmRecharge: 'Confirm Recharge',
+            fee: 'Fee',
+            actual: 'Actual Credit',
+            balanceLogs: 'Balance Logs',
+            viewLogs: 'View Logs',
+            rechargeRecords: 'Recharge Records',
+            viewRecords: 'View Records',
+            noLogs: 'No balance logs',
+            noRecords: 'No recharge records',
+            amountRequired: 'Please enter recharge amount',
+            providerRequired: 'Please select payment method',
+            recharging: 'Recharging...',
+            rechargeSuccess: 'Recharge successful',
+            rechargeFailed: 'Recharge failed',
+            loadFailed: 'Load failed',
+        },
+        // Increase quota
+        increaseQuota: {
+            title: 'Increase Quota',
+            description: 'You can increase quota when usage reaches 50%',
+            type: 'Quota Type',
+            selectType: 'Select quota type to increase',
+            hosts: 'Hosts',
+            instances: 'Instances',
+            friends: 'Friends',
+            amount: 'Increase Amount',
+            hostsAmount: 'Can increase 5 each time',
+            instancesAmount: 'Can increase 50 each time',
+            friendsAmount: 'Can increase 10 each time',
+            submit: 'Submit',
+            submitting: 'Submitting...',
+            success: 'Quota increased successfully',
+            failed: 'Failed to increase quota',
+            notEligible: 'Usage rate is below 50%, cannot increase quota',
+            usageTooLow: 'Current usage: {percent}%, need to reach 50% to increase quota',
+            selectTypeFirst: 'Please select quota type first',
+            invalidAmount: 'Invalid increase amount',
+            hostsInvalid: 'Hosts can only increase 5 each time',
+            instancesInvalid: 'Instances can only increase 50 each time',
+            friendsInvalid: 'Friends can only increase 10 each time',
+        },
+        // Password section
+        password: {
+            title: 'Change Password',
+            current: 'Current Password',
+            currentPlaceholder: 'Enter current password',
+            new: 'New Password',
+            newPlaceholder: 'At least 6 characters',
+            confirm: 'Confirm New Password',
+            confirmPlaceholder: 'Enter new password again',
+            mismatch: 'Passwords do not match',
+            tooShort: 'Password must be at least 6 characters',
+            updated: 'Password updated',
+            updateFailed: 'Update failed',
+            updating: 'Updating...',
+            update: 'Update Password',
+        },
+        // Two-factor auth
+        twoFactorAuth: {
+            title: 'Two-Factor Authentication (2FA)',
+            status: 'Status',
+            enabled: 'Enabled',
+            notEnabled: 'Not enabled',
+            enable: 'Enable 2FA',
+            disable: 'Disable 2FA',
+            loading: 'Loading...',
+            description: 'After enabling 2FA, you will need to enter a verification code from your authenticator app when logging in.',
+            setup: 'Set up Two-Factor Authentication',
+            scanQrCode: 'Scan the QR code with Google Authenticator, Microsoft Authenticator, or another TOTP app',
+            manualEntry: 'Or enter the key manually',
+            saveRecoveryCodes: 'Please save the following recovery codes for account recovery when you cannot access your authenticator',
+            enterCode: 'Enter the 6-digit code from your authenticator',
+            codePlaceholder: '000000',
+            verifying: 'Verifying...',
+            confirmEnable: 'Confirm Enable',
+            cancel: 'Cancel',
+            disableTitle: 'Disable Two-Factor Authentication',
+            disableDesc: 'After disabling, you will no longer need a verification code to log in.',
+            password: 'Current Password',
+            passwordPlaceholder: 'Enter password',
+            verificationCode: 'Verification Code',
+            processing: 'Processing...',
+            confirmDisable: 'Confirm Disable',
+            recoveryCodesStatus: 'Recovery Codes Status',
+            regenerate: 'Regenerate',
+            remaining: 'Remaining',
+            used: 'Used',
+            lowCodesWarning: 'Recovery codes are running low, consider regenerating',
+            regenerateTitle: 'Regenerate Recovery Codes',
+            regenerateDesc: 'After regenerating, all old recovery codes will be invalidated.',
+            newCodesGenerated: 'New recovery codes generated, please save them',
+            generating: 'Generating...',
+            confirmGenerate: 'Confirm Generate',
+            done: 'Done',
+            enabledSuccess: 'Two-factor authentication enabled',
+            disabledSuccess: 'Two-factor authentication disabled',
+            codesRegenerated: 'Recovery codes regenerated, please save them',
+            getStatusFailed: 'Failed to get status',
+            initFailed: 'Initialization failed',
+            verifyFailed: 'Verification failed',
+            disableFailed: 'Disable failed',
+            regenerateFailed: 'Regeneration failed',
+            enterCodeError: 'Please enter a 6-digit code',
+            fillPasswordAndCode: 'Please fill in password and verification code',
+        },
+        // Sessions
+        sessions: {
+            title: 'Login Sessions',
+            logoutAll: 'Logout All Devices',
+            processing: 'Processing...',
+            loading: 'Loading...',
+            noSessions: 'No active sessions',
+            current: 'Current',
+            ip: 'IP',
+            lastActive: 'Last active',
+            revoke: 'Revoke',
+            revoked: 'Session revoked',
+            confirmLogout: 'Are you sure you want to logout?',
+            confirmLogoutAll: 'Are you sure you want to logout all devices? You will need to login again.',
+            loadFailed: 'Failed to load sessions',
+            revokeFailed: 'Failed to revoke session',
+            revokeAllFailed: 'Failed to revoke all sessions',
+            unknownDevice: 'Unknown device',
+            unknownBrowser: 'Unknown browser',
+            justNow: 'Just now',
+            minutesAgo: '{n} minutes ago',
+            hoursAgo: '{n} hours ago',
+            daysAgo: '{n} days ago',
+        },
+        // OAuth
+        oauth: {
+            title: 'Linked Accounts',
+            description: 'Link accounts for quick login',
+            bound: 'Linked',
+            notBound: 'Not linked',
+            bind: 'Link',
+            unbind: 'Unlink',
+            noProviders: 'No third-party login methods available',
+            bindSuccess: '{provider} account linked successfully',
+            unbindSuccess: '{provider} account unlinked',
+            unbindFailed: 'Unlink failed',
+            confirmUnbind: 'Are you sure to unlink {provider} account? You will not be able to login with this method after unlinking.',
+            errors: {
+                notLoggedIn: 'Please login first before linking',
+                alreadyBoundOther: 'This account is already linked to another user',
+                invalidSession: 'Session expired, please login again',
+                bindFailed: 'Link failed',
+                tokenError: 'Authorization failed, please try again',
+                providerDisabled: 'This login method has been disabled',
+                oauthError: 'Authentication failed, please try again',
+                missingCode: 'Authorization info missing, please try again',
+            },
+        },
+        // SSH Keys
+        sshKeys: {
+            title: 'SSH Public Keys',
+            description: 'Used for SSH connection to instances',
+            add: 'Add',
+            generate: 'Generate',
+            name: 'Name',
+            namePlaceholder: 'My laptop',
+            publicKey: 'Public Key',
+            publicKeyPlaceholder: 'ssh-ed25519 AAAA... or ssh-rsa AAAA...',
+            save: 'Save',
+            cancel: 'Cancel',
+            noKeys: 'No public keys',
+            addSuccess: 'Public key added',
+            addFailed: 'Add failed',
+            deleteSuccess: 'Public key deleted',
+            deleteFailed: 'Delete failed',
+            confirmDelete: 'Are you sure to delete this public key?',
+            invalidName: 'Invalid key name format',
+            generateSuccess: 'Key generated successfully',
+            generateFailed: 'Generation failed',
+            privateKeyTitle: 'Save Your Private Key',
+            privateKeyWarning: 'Please save your private key now',
+            privateKeyWarningDesc: 'We do not store your private key. Once you close this dialog, you will not be able to view it again. Please save it to a secure location.',
+            privateKeyContent: 'Private Key',
+            download: 'Download',
+            noPrivateKey: 'No private key to download',
+            copyFailed: 'Copy failed',
+            downloadFailed: 'Download failed, please copy manually',
+            prevPage: 'Previous',
+            nextPage: 'Next',
+            pageInfo: 'Page {current}/{total}, {count} total',
+        },
+        // Notifications
+        notifications: {
+            title: 'Notification Channels',
+            description: 'Receive notifications for instances, snapshots, and other events',
+            add: 'Add',
+            type: 'Type',
+            name: 'Name',
+            namePlaceholder: 'My notification',
+            save: 'Add',
+            saving: 'Adding...',
+            cancel: 'Cancel',
+            noChannels: 'No notification channels',
+            addSuccess: 'Notification channel added',
+            addFailed: 'Add failed',
+            deleteSuccess: 'Notification channel deleted',
+            deleteFailed: 'Delete failed',
+            confirmDelete: 'Are you sure to delete this notification channel?',
+            enabled: 'Enabled',
+            disabled: 'Disabled',
+            enable: 'Enable',
+            disable: 'Disable',
+            toggleFailed: 'Operation failed',
+            test: 'Test',
+            testSuccess: 'Test notification sent',
+            testFailed: 'Test failed',
+            history: 'History',
+            historyTitle: 'Notification History',
+            disabledSuffix: '(disabled)',
+            statsTotal: 'Total: {count}',
+            statsSent: 'Sent: {count}',
+            statsFailed: 'Failed: {count}',
+            filterAll: 'All',
+            filterSent: 'Sent',
+            filterFailed: 'Failed',
+            loadingLogs: 'Loading...',
+            noLogs: 'No notification records',
+            statusSent: 'Sent',
+            statusFailed: 'Failed',
+            statusPending: 'Pending',
+            errorPrefix: 'Error: {error}',
+            eventTypes: {
+                snapshot_created: 'Snapshot created',
+                snapshot_restored: 'Snapshot restored',
+                snapshot_deleted: 'Snapshot deleted',
+                backup_created: 'Backup created',
+                backup_failed: 'Backup failed',
+                backup_deleted: 'Backup deleted',
+                backup_restored: 'Backup restored',
+                backup_uploaded: 'Backup uploaded',
+                instance_created: 'Instance created',
+                instance_started: 'Instance started',
+                instance_stopped: 'Instance stopped',
+                instance_deleted: 'Instance deleted',
+                auto_snapshot: 'Auto snapshot',
+                auto_backup: 'Auto backup',
+                traffic_warning: 'Traffic warning',
+                traffic_throttled: 'Traffic throttled',
+                test: 'Test notification',
+            },
+            telegram: {
+                botToken: 'Bot Token',
+                botTokenPlaceholder: '123456:ABC-...',
+                chatId: 'Chat ID',
+                chatIdPlaceholder: '-100123456789',
+            },
+            discord: {
+                webhookUrl: 'Webhook URL',
+                webhookUrlPlaceholder: 'https://discord.com/api/webhooks/...',
+            },
+            webhook: {
+                url: 'URL',
+                urlPlaceholder: 'https://example.com/webhook',
+                secret: 'Secret (optional)',
+                secretPlaceholder: 'For signature verification',
+            },
+        },
+        telegramBinding: {
+            title: 'Telegram Binding',
+            description: 'Use Telegram for private group admission and related access checks.',
+            refresh: 'Refresh',
+            refreshing: 'Refreshing',
+            unavailableTitle: 'Not enabled',
+            unavailableDescription: 'Telegram binding has not been enabled or fully configured by the admin.',
+            boundTitle: 'Bound to {name}',
+            telegramId: 'Telegram ID: {id}',
+            boundAt: 'Bound at: {date}',
+            joinHint: 'To request private group access, message {bot} with',
+            unlink: 'Unlink',
+            unlinking: 'Unlinking',
+            unboundTitle: 'Telegram not bound',
+            unboundDescription: 'Generate a link to open {bot}. Tap Start inside Telegram to finish binding.',
+            generate: 'Generate binding link',
+            generating: 'Generating',
+            openTelegram: 'Open Telegram',
+            copyLink: 'Copy link',
+            linkHint: 'The link is valid for 10 minutes. Come back and refresh after binding.',
+            expiresAt: 'Expires at: {date}',
+            generated: 'Telegram binding link generated',
+            generateFailed: 'Failed to generate binding link: {error}',
+            copied: 'Binding link copied',
+            copyFailed: 'Copy failed. Please copy the link manually.',
+            confirmUnlink: 'Unlink Telegram binding?',
+            unlinked: 'Telegram binding removed',
+            unlinkFailed: 'Failed to unlink Telegram: {error}',
+        },
+        // Remote Storage
+        storage: {
+            title: 'Remote Storage',
+            description: 'Configure WebDAV/FTP/SFTP storage for backup uploads',
+            add: 'Add',
+            name: 'Name',
+            namePlaceholder: 'My NAS',
+            type: 'Type',
+            host: 'Host',
+            port: 'Port',
+            username: 'Username',
+            password: 'Password',
+            passwordUnchanged: 'Leave empty to keep unchanged',
+            basePath: 'Base Path',
+            setAsDefault: 'Set as default',
+            default: 'Default',
+            setDefault: 'Set Default',
+            test: 'Test',
+            noConfigs: 'No storage configurations',
+            nameHostRequired: 'Name and host are required',
+            createSuccess: 'Storage configuration created',
+            updateSuccess: 'Storage configuration updated',
+            deleteSuccess: 'Storage configuration deleted',
+            saveFailed: 'Save failed',
+            deleteFailed: 'Delete failed',
+            hasActiveTasks: 'Cannot delete: there are upload tasks in progress using this storage',
+            confirmDelete: 'Are you sure to delete this storage configuration?',
+            testSuccess: 'Connection test successful',
+            testFailed: 'Connection test failed',
+            setDefaultSuccess: 'Set as default',
+            setDefaultFailed: 'Set default failed',
+        },
+        // Login history
+        loginHistory: {
+            title: 'Login History',
+            description: 'View your account login records',
+            empty: 'No login records',
+        },
+    },
+
+    // Admin
+    admin: {
+        statistics: {
+            title: 'Statistics',
+            description: 'User, instance, and billing data',
+            timezone: '{timezone}',
+            refresh: 'Refresh',
+            reload: 'Reload',
+            noData: 'No statistics available',
+            loadFailed: 'Failed to load statistics: {message}',
+            unknownError: 'Unknown error',
+            tooltip: '{label} · {value}',
+            tabs: {
+                users: 'Users',
+                instances: 'Instances',
+                billing: 'Billing',
+            },
+            periods: {
+                daily: 'Daily',
+                monthly: 'Monthly',
+            },
+            billingMetrics: {
+                recharge: 'Recharge',
+                consume: 'Spend',
+                aff: 'Referral',
+                destroyFee: 'Destroy fee',
+            },
+            ranges: {
+                last30Days: 'Last 30 days',
+                last12Months: 'Last 12 months',
+            },
+            cards: {
+                totalUsers: 'Total users',
+                recentDailyNewUsers: 'New in 30 days',
+                recentMonthlyNewUsers: 'New in 12 months',
+                averageNewUsers: 'Average new',
+                totalInstances: 'Total instances',
+                availableInstances: 'Available instances',
+                recentDailyCreatedInstances: 'Created in 30 days',
+                recentMonthlyCreatedInstances: 'Created in 12 months',
+                totalRecharge: 'Total recharge',
+                totalConsume: 'Total spend',
+                totalAff: 'Total referral',
+                totalDestroyFee: 'Total destroy fees',
+            },
+            captions: {
+                currentTotal: 'Current total',
+                dailyAggregate: 'Daily aggregate',
+                monthlyAggregate: 'Monthly aggregate',
+                dailyAverage: 'Daily average',
+                monthlyAverage: 'Monthly average',
+                nonDeletedInstances: 'Non-deleted instances',
+                notDeletedOrSuspended: 'Not deleted / not suspended',
+                completedOrders: 'Completed orders',
+                totalScope: 'Hosted and official total',
+                affCommission: 'Referral new purchase / renewal',
+                userDestroyFee: 'User instance destroy fees',
+            },
+            sections: {
+                newUsers: 'New users',
+                createdInstances: 'Created instances',
+                paidFreeInstances: 'Paid / free instances',
+                paidFreeDescription: 'Share of current non-deleted instances',
+                metricTrend: '{metric} trend',
+                billingScope: '{range}, hosted and official combined',
+            },
+            labels: {
+                paidInstances: 'Paid instances',
+                freeInstances: 'Free instances',
+            },
+        },
+        hosting: {
+            title: 'Hosting',
+            description: 'View qualified hosting owners and hosting operation data',
+            loadFailed: 'Failed to load hosting data: {message}',
+            unknownError: 'Unknown error',
+            tabs: {
+                owners: 'Hosting Owners',
+                zones: 'Zone Owners',
+                hostingVipLevels: 'Hosting VIP Levels',
+            },
+            cards: {
+                owners: 'Hosting Owners',
+                ownersCaption: 'Users who meet hosting criteria',
+                hosts: 'Hosts',
+                hostsCaption: 'Hosts added by owners',
+                instances: 'Instances',
+                instancesCaption: 'Non-deleted instances on owner hosts',
+                totalIncome: 'Historical Hosting Income',
+                totalIncomeCaption: 'Accumulated income logs',
+            },
+            owners: {
+                title: 'Hosting Owner Users',
+                description: 'Users with hosts, listed public packages, and non-zero historical hosting balance.',
+                searchPlaceholder: 'Search username, ID, or email...',
+                empty: 'No hosting owners',
+                emptyHint: 'Users must meet the host, listed package, and historical hosting balance criteria.',
+                user: 'User',
+                vipLevel: 'VIP Level',
+                hostingBalance: 'Hosting Balance',
+                frozenBalance: 'Frozen Balance',
+                totalIncome: 'Historical Income',
+                hostCount: 'Hosts',
+                packageCount: 'Listed Packages',
+                instanceCount: 'Instances',
+                createdAt: 'Registered At',
+                noEmail: 'No email',
+            },
+            zones: {
+                title: 'Zone Owners',
+                description: 'Zone owners appear as separate tabs on the instance creation page, and their packages are removed from the marketplace tab.',
+                createTitle: 'Add Zone Owner',
+                createDescription: 'Enter a zone name, select a hosting owner, and paste a hosted logo URL.',
+                name: 'Zone Name',
+                namePlaceholder: 'e.g. Tokyoo Zone',
+                owner: 'Hosting Owner',
+                ownerSearchPlaceholder: 'Search hosting owners...',
+                selectOwner: 'Select a hosting owner',
+                ownerHint: 'Owners that already have a zone are hidden from the selectable list.',
+                logo: 'Logo URL',
+                logoPlaceholder: 'https://example.com/logo.png',
+                logoHint: 'Use an http or https image URL. The system does not store image files.',
+                logoPreview: 'Logo preview',
+                noLogo: 'Logo',
+                previewName: 'Zone preview',
+                previewHint: 'Shown as a round logo on the instance creation page.',
+                create: 'Add Zone',
+                formRequired: 'Please enter a zone name, select a hosting owner, and enter a logo URL',
+                logoInvalid: 'Please enter a valid http or https logo image URL',
+                createSuccess: 'Zone owner added',
+                createFailed: 'Failed to add zone owner',
+                loadFailed: 'Failed to load zone owners: {message}',
+                deleteConfirm: 'Delete zone "{name}"? Its packages will appear in the marketplace tab again.',
+                deleteSuccess: 'Zone owner deleted',
+                deleteFailed: 'Failed to delete zone owner',
+                empty: 'No zone owners',
+                emptyHint: 'Added zones appear between Official and Marketplace on the instance creation page.',
+                zone: 'Zone',
+            },
+        },
+        vipRules: {
+            userTitle: 'User VIP Levels',
+            userDescription: 'Choose either cumulative recharge or cumulative spending as the global user membership metric, up to VIP10.',
+            hostingTitle: 'Hosting VIP Levels',
+            hostingDescription: 'Dynamically calculate hosting membership by cumulative hosting income and current hosted instance count, up to VIP10.',
+            level: 'Level',
+            badgeBgColor: 'Badge Background',
+            badgeTextColor: 'Badge Text',
+            enabled: 'Enabled',
+            mode: 'Condition Mode',
+            modeAny: 'Any condition',
+            modeAll: 'All conditions',
+            userMetricTitle: 'User VIP Metric',
+            userMetricHint: 'User VIP levels use one global metric across the site. After switching, each level only saves and calculates the threshold for the selected metric.',
+            metricRecharge: 'By Recharge',
+            metricConsume: 'By Spending',
+            minRecharge: 'Cumulative recharge (CNY)',
+            minConsume: 'Cumulative spending (CNY)',
+            minHostingIncome: 'Cumulative hosting income (CNY)',
+            minHostingInstances: 'Current hosted instances',
+            noLimit: 'No limit',
+            save: 'Save Rules',
+            saveSuccess: 'VIP level rules saved',
+            saveFailed: 'Failed to save VIP level rules',
+            loadFailed: 'Failed to load VIP level rules: {message}',
+            unknownError: 'Unknown error',
+            conditionRequired: 'VIP{level} requires at least one condition',
+            moneyThresholdInvalid: 'VIP{level} money thresholds must be numbers greater than 0',
+            instanceThresholdInvalid: 'VIP{level} instance threshold must be a positive integer',
+            colorInvalid: 'VIP{level} badge colors must use #RRGGBB format',
+        },
+        vipBenefits: {
+            title: 'Membership Benefits Hall',
+            description: 'Configure claimable benefits for enabled user VIP levels. Balance and points are delivered automatically; instance rewards create pending delivery records.',
+            save: 'Save Benefits',
+            saveSuccess: 'Membership benefits saved',
+            saveFailed: 'Failed to save membership benefits',
+            loadFailed: 'Failed to load membership benefits',
+            loadPlansFailed: 'Failed to load package plans',
+            noEnabledLevels: 'No user VIP levels are enabled yet. Enable levels in User VIP Levels first.',
+            levelTitle: 'VIP{level} Benefits',
+            levelHint: 'Users can claim these rewards after reaching this level.',
+            addReward: 'Add Reward',
+            noRewardsForLevel: 'No rewards configured for this level.',
+            rewardDefaultTitle: 'Benefit',
+            rewardTitle: 'Reward Title',
+            rewardType: 'Reward Type',
+            rewardDescription: 'Reward Description',
+            claimLimit: 'Claim Limit',
+            sortOrder: 'Sort Order',
+            enabled: 'Enabled',
+            disabled: 'Disabled',
+            types: {
+                balance: 'Balance',
+                points: 'Points',
+                instance: 'Instance',
+            },
+            balanceTitle: 'Bonus Balance',
+            balanceDesc: 'Credits the user account balance for renewals or new instances.',
+            balanceAmount: 'Bonus amount (CNY)',
+            pointsTitle: 'Bonus Points',
+            pointsDesc: 'Credits the user points account for benefits and point spending.',
+            pointsAmount: 'Points',
+            instanceTitle: 'Package Instance',
+            instanceDesc: 'Select a package plan. Claims become pending delivery records and can be automated later.',
+            package: 'Package',
+            plan: 'Plan',
+            selectPackage: 'Select package',
+            selectPlan: 'Select plan',
+            instanceDays: 'Gift days',
+            instanceQuantity: 'Quantity',
+            balancePreview: 'Balance {amount}',
+            pointsPreview: 'Points {amount}',
+            instancePreview: 'Package instance',
+            instancePreviewWithPlan: '{plan} · {quantity} instance(s) · {days} day(s)',
+            titleRequired: 'VIP{level} reward title is required',
+            claimLimitInvalid: 'VIP{level} claim limit must be a positive integer',
+            amountInvalid: 'VIP{level} balance or points reward amount must be greater than 0',
+            balanceInvalid: 'VIP{level} bonus balance must be greater than 0',
+            pointsInvalid: 'VIP{level} bonus points must be a positive integer',
+            instancePlanRequired: 'VIP{level} package instance benefit requires a package and plan',
+            instanceDaysInvalid: 'VIP{level} gift days must be a positive integer',
+            instanceQuantityInvalid: 'VIP{level} instance quantity must be a positive integer',
+        },
+        // Mail management
+        mail: {
+            title: 'Mail Management',
+            description: 'Manage mail sources, plans and subscriptions',
+            tabs: {
+                sources: 'Sources',
+                plans: 'Plans',
+                subscriptions: 'Subscriptions',
+                domains: 'Domains',
+            },
+            createSource: 'Add Source',
+            editSource: 'Edit Source',
+            sourceCreated: 'Source created',
+            sourceUpdated: 'Source updated',
+            sourceDeleted: 'Source deleted',
+            confirmDeleteSource: 'Are you sure to delete source {name}? Make sure no plans are linked.',
+            noSources: 'No sources, please add one first',
+            createPlan: 'Add Plan',
+            editPlan: 'Edit Plan',
+            planCreated: 'Plan created',
+            planUpdated: 'Plan updated',
+            planDeleted: 'Plan deleted',
+            confirmDeletePlan: 'Are you sure to delete plan {name}?',
+            noPlans: 'No plans, please add one first',
+            noSubscriptions: 'No subscriptions',
+            noDomains: 'No domains',
+            searchSubscriptions: 'Search by username, email or ID...',
+            searchDomains: 'Search by domain, username, email or ID...',
+            fillRequired: 'Please fill in required fields',
+            createSourceFirst: 'Please create a source first',
+            region: 'Region',
+            apiEndpoint: 'API Endpoint',
+            apiKey: 'API Key',
+            smtpHost: 'SMTP Host',
+            smtpPort: 'SMTP Port',
+            webmailUrl: 'Webmail URL',
+            sourcePlaceholder: 'e.g. US Datacenter',
+            source: 'Source',
+            domainLimit: 'Domain Limit',
+            diskLimit: 'Disk Limit',
+            diskLimitGb: 'Disk Limit (GB)',
+            price: 'Price',
+            billingCycle: 'Billing Cycle',
+            planPlaceholder: 'e.g. Basic',
+            user: 'User',
+            plan: 'Plan',
+            expiresAt: 'Expires At',
+            domain: 'Domain',
+            accounts: 'Accounts',
+            plans: 'Plans',
+            unsub: {
+                button: 'Unsubscribe',
+                title: 'Cancel Subscription',
+                refundType: 'Refund Type',
+                refundNone: 'No Refund',
+                refundNoneDesc: 'Cancel subscription without any refund',
+                refundFull: 'Full Refund',
+                refundFullDesc: 'Refund full plan price {amount}',
+                refundRemaining: 'Remaining Value Refund',
+                refundRemainingDesc: 'Refund based on remaining subscription time',
+                reason: 'Refund Reason',
+                reasonPlaceholder: 'Enter refund reason, will be recorded in balance log...',
+                reasonRequired: 'Reason is required when refunding',
+                confirm: 'Confirm Cancel',
+                success: 'Subscription cancelled',
+                successWithRefund: 'Subscription cancelled, refunded ¥{amount}',
+            },
+        },
+        // Admin create instance
+        instanceCreate: {
+            title: 'Create Instance',
+            description: 'Create instance for user as a gift, no payment required',
+            targetUser: 'Target User',
+            usernamePlaceholder: 'Enter username',
+            usernameHint: 'Instance will be created under this user account',
+            userHint: 'Instance will be created under this user account',
+            checkUser: 'Check',
+            checking: 'Checking...',
+            userFound: 'User found (ID: {id})',
+            userNotFound: 'User not found',
+            userNotFoundHint: 'Please check if the username is correct',
+            noSshKey: 'This user has no SSH key set',
+            noSshKeyHint: 'Please ask the user to add an SSH key in their profile settings first',
+            orderSummary: 'Gift Summary',
+            freeGift: 'Free Gift',
+            freeGiftHint: 'This instance is created by admin for free, not counted in billing',
+            createFor: 'Create for',
+            create: 'Create Instance',
+            creating: 'Creating...',
+            submit: 'Create Instance',
+            success: 'Instance created successfully',
+            selectUser: 'Please select a target user first',
+            createSuccess: 'Instance created, will appear in user {username}\'s instance list',
+            createFailed: 'Failed to create instance',
+            selectUserFirst: 'Please check and confirm the target user first',
+            packageScope: {
+                official: 'Official Packages',
+                hosted: 'Hosted Packages',
+            },
+            // Paid instance related
+            instanceType: 'Instance Type',
+            freeInstance: 'Free Instance',
+            paidInstance: 'Paid Instance',
+            selectPlan: 'Select Plan',
+            noPlanHint: 'No available plans for this package',
+            chargeFirstMonth: 'Charge First Month',
+            chargeFirstMonthHint: 'Deduct first month fee from user balance',
+            noChargeFirstMonthHint: 'First month free, regular billing from next month',
+            planPrice: 'Monthly Price',
+            setupFee: 'Setup Fee',
+            totalCharge: 'Total Charge',
+            freeFirstMonth: 'First Month Free',
+            userBalance: 'User Balance',
+            insufficientBalance: 'Insufficient user balance',
+            paidSummary: 'Paid Summary',
+            paidInstanceHint: 'Create paid instance, billed by plan',
+        },
+        // Broadcast announcement
+        broadcast: {
+            title: 'Site-wide Announcement',
+            description: 'Send notification to all active users',
+            messageTitle: 'Announcement Title',
+            titlePlaceholder: 'Enter announcement title',
+            titleRequired: 'Please enter announcement title',
+            titleTooLong: 'Title exceeds 200 characters',
+            messageContent: 'Announcement Content',
+            contentPlaceholder: 'Enter announcement content',
+            contentRequired: 'Please enter announcement content',
+            contentTooLong: 'Content exceeds 5000 characters',
+            send: 'Send Announcement',
+            sendSuccess: 'Successfully sent to {count} users',
+            sendFailed: 'Failed to send',
+            hint: 'Announcement will be sent to all users with "Active" status.',
+            // History
+            history: 'History',
+            noHistory: 'No sending records',
+            recipients: 'Sent to {count} recipients',
+            sender: 'Sender',
+            types: {
+                system_broadcast: 'Site Broadcast',
+                host_broadcast: 'Host Notification',
+                admin_message: 'Admin Message',
+                host_message: 'Host Owner Message',
+            },
+        },
+        // System settings
+        system: {
+            title: 'System Settings',
+            description: 'Configure system initial parameters and defaults',
+            tabs: {
+                system: 'System Settings',
+                popupAnnouncement: 'Popup Notice',
+                telegram: 'Telegram Settings',
+            },
+            sections: {
+                access: {
+                    title: 'Access & Registration',
+                    description: 'Manage registration, invite generation, default quotas, and instance transfer rules',
+                },
+                hosting: {
+                    title: 'Hosting & Sites',
+                    description: 'Manage hosting access, hosting notices, and free-site gift rules',
+                },
+                brand: {
+                    title: 'Brand & Appearance',
+                    description: 'Manage system name, logo, avatar service, and footer contact links',
+                },
+                security: {
+                    title: 'Security Verification',
+                    description: 'Manage Turnstile verification and registration email domain allowlists',
+                },
+                mail: {
+                    title: 'Mail Service',
+                    description: 'Manage SMTP delivery settings and test emails',
+                },
+                tickets: {
+                    title: 'Tickets & Attachments',
+                    description: 'Manage ticket access and ticket image storage settings',
+                },
+            },
+            popupAnnouncement: {
+                title: 'Popup Notice',
+                description: 'Configure the site-wide notice shown when users visit the website.',
+                content: 'Notice content',
+                placeholder: 'Enter popup notice content here. Leave it empty and save to delete the notice and stop broadcasting.',
+                hint: 'Users can hide it for today or never show it again. When the notice is updated, it will be shown as a new notice.',
+                promoTitle: 'Image Promo Popup',
+                promoDescription: 'Configure a new server promotion popup with an image and a package purchase action.',
+                promoImageUrl: 'Image URL',
+                promoImagePlaceholder: 'https://example.com/promo.jpg',
+                promoImageHint: 'Use a clear banner image. The popup shows it in full while preserving its aspect ratio.',
+                promoPackage: 'Target Package',
+                promoPackagePlaceholder: 'Select a package to promote',
+                promoPackageLoading: 'Loading packages...',
+                promoPackageEmpty: 'No promotable packages',
+                promoPackageHint: 'The promo popup is shown only when both image URL and target package are configured.',
+                promoPreview: 'Frontend preview',
+                promoPreviewEmpty: 'Enter an image URL to preview it',
+                promoNoPackage: 'No package selected',
+                promoPackageFallback: 'Target package',
+            },
+            defaultQuota: 'Default User Quota',
+            defaultQuotaDesc: 'New users will automatically receive the following quota limits',
+            quotaHost: 'Default Host Quota',
+            quotaHostDesc: 'Default number of hosts for new users',
+            quotaFriend: 'Default Friend Quota',
+            quotaFriendDesc: 'Default number of friends for new users (0 = not authorized)',
+            quotaPackage: 'Default Package Quota',
+            quotaPackageDesc: 'Default number of packages for new users (0 = not authorized)',
+            registration: 'Registration',
+            registrationDesc: 'Configure user registration options',
+            registrationEnabled: 'Registration Access',
+            registrationEnabledDesc: 'When disabled, new users cannot register, while existing users can still sign in normally',
+            registrationOpen: 'Registration Open',
+            registrationClosed: 'Registration Closed',
+            requireInviteCode: 'Require Invite Code',
+            requireInviteCodeDesc: 'When enabled, users must enter an invite code to register',
+            openRegistration: 'Open',
+            inviteOnly: 'Invite Only',
+            hostingFeature: {
+                title: 'Hosting Feature',
+                description: 'Control whether host and hosting earnings entry points are shown to new users. Users who have already created a host always keep access.',
+                enable: 'Show host entry points',
+                enableDesc: 'When disabled, users who have never created a host will not see host and earnings entry points. Existing host owners keep access.',
+                marketEntry: 'Show hosted package purchase entry',
+                marketEntryDesc: 'Controls whether hosted zones and hosted package purchase entry points are shown on the create instance page. When disabled, users can only select official packages there.',
+                marketEntryVisible: 'Entry visible',
+                marketEntryHidden: 'Entry hidden',
+                notice: 'Hosting Notice',
+                noticePlaceholder: 'Enter the hosting notice here. Leave empty to hide it on the frontend.',
+                noticeHint: 'Shown on the hosting earnings page. Line breaks are supported. Leave empty to hide it.',
+                visibleToAll: 'Visible to all users',
+                hiddenForNewUsers: 'Hidden for new users',
+            },
+            brand: {
+                title: 'Brand Settings',
+                description: 'Configure the system name, subtitle, and logo. Leave empty to use the default brand.',
+                name: 'System Name',
+                nameDesc: 'Shown in the sidebar, top bar, auth pages, and SEO metadata.',
+                subtitle: 'Site Subtitle',
+                subtitlePlaceholder: 'Incus-powered NAT VPS platform',
+                subtitleDesc: 'Shown in the public header/footer, default browser title, and default SEO description.',
+                logo: 'Logo URL',
+                logoDesc: 'Supports http(s) image URLs or absolute site paths. Leave empty to use the default logo.',
+            },
+            ticket: {
+                title: 'Ticket Settings',
+                description: 'Control whether regular users can create support tickets.',
+                enable: 'Enable Tickets',
+                enableDesc: 'When disabled, the user-side ticket entry is hidden and regular users cannot create tickets through the API.',
+                enabled: 'Enabled',
+                disabled: 'Disabled',
+            },
+            freeSite: {
+                title: 'Freebie Site',
+                description: 'Control whether recharge and affiliate features are shown on the user wallet page.',
+                enable: 'Enable Freebie Site',
+                enableDesc: 'When enabled, the user wallet hides recharge buttons, recharge records, and affiliate plans. Recharge order creation and repayment are blocked by the API.',
+                enabled: 'Enabled',
+                disabled: 'Disabled',
+                registerGift: 'Registration Gift',
+                registerGiftDesc: 'When enabled, new users receive balance and points after successful registration.',
+                giftEnabled: 'Giving',
+                giftDisabled: 'Off',
+                giftBalance: 'Gift Balance',
+                giftBalanceDesc: 'Added to the account balance after registration, in yuan.',
+                giftPoints: 'Gift Points',
+                giftPointsDesc: 'Added to the entertainment points account after registration.',
+                giftRequiresFreeSite: 'Enable Freebie Site before configuring registration gifts.'
+            },
+            unitCount: '',
+            reset: 'Reset',
+            save: 'Save Config',
+            saving: 'Saving...',
+            loadFailed: 'Failed to load config',
+            saveSuccess: 'Config saved',
+            saveFailed: 'Save failed',
+            notes: 'Notes',
+            note1: 'Changing default quotas only affects newly registered users, not existing users.',
+            note2: 'To modify existing user quotas, go to "User Management" page.',
+            note3: 'Host quota limits the number of hosts a user can create (0 = feature not authorized).',
+            note4: 'Friend quota limits the number of friends a user can add (0 = feature not authorized).',
+            note5: 'Package quota limits the number of packages a user can create (0 = feature not authorized).',
+            // Turnstile config
+            turnstile: {
+                title: 'Cloudflare Turnstile',
+                description: 'Configure bot protection for login, registration and sensitive operations',
+                enable: 'Enable Turnstile',
+                enableDesc: 'When enabled, users must complete verification for login, registration and sensitive operations',
+                enabled: 'Enabled',
+                disabled: 'Disabled',
+                siteKey: 'Site Key',
+                siteKeyPlaceholder: 'Enter Cloudflare Turnstile Site Key',
+                siteKeyDesc: 'Site key used by frontend',
+                secretKey: 'Secret Key',
+                secretKeyPlaceholder: 'Enter Cloudflare Turnstile Secret Key',
+                secretKeyDesc: 'Secret key used by backend for verification (keep it safe)',
+                helpText: 'Get your keys from Cloudflare dashboard:',
+            },
+            avatar: {
+                title: 'Avatar Service',
+                description: 'Configure user avatar generation service, using DiceBear official API by default',
+                apiBase: 'API Base URL',
+                apiBaseDesc: 'DiceBear avatar API base URL, can self-host for better performance',
+                helpText: 'Learn how to self-host DiceBear:',
+            },
+            // SMTP Email configuration
+            smtp: {
+                title: 'SMTP Email Service',
+                description: 'Configure SMTP server to enable email verification. Users will need to verify their email when registering',
+                enable: 'Enable Email Verification',
+                enableDesc: 'When enabled, users must verify their email with a verification code during registration',
+                enabled: 'Enabled',
+                disabled: 'Disabled',
+                host: 'SMTP Server',
+                hostPlaceholder: 'smtp.example.com',
+                port: 'SMTP Port',
+                secure: 'Use SSL/TLS',
+                secureHint: 'Usually required for port 465, not for port 587',
+                username: 'Username',
+                usernamePlaceholder: 'Email account or username',
+                password: 'Password',
+                passwordPlaceholder: 'App password or authorization code',
+                fromEmail: 'From Email',
+                fromEmailPlaceholder: "noreply{'@'}example.com",
+                fromName: 'From Name',
+                testConnection: 'Test Connection',
+                testing: 'Testing...',
+                testSuccess: 'SMTP connection test successful',
+                testFailed: 'SMTP connection test failed',
+                sendTestEmail: 'Send Test Email',
+                sendTestEmailDesc: 'Send a test email to the specified address to verify email sending functionality',
+                testEmailPlaceholder: 'Enter recipient email address',
+                sending: 'Sending...',
+                send: 'Send',
+                invalidEmail: 'Please enter a valid email address',
+                testEmailSent: 'Test email sent to {email}',
+                testEmailFailed: 'Failed to send test email',
+                helpText: 'Make sure the SMTP server address, port, username and password are correct. Most email providers require an app password instead of your login password.',
+            },
+            // Email domain whitelist configuration
+            emailDomain: {
+                title: 'Email Domain Whitelist',
+                description: 'Restrict registration to specific email domains to improve user quality',
+                enable: 'Enable Email Domain Whitelist',
+                enableDesc: 'When enabled, only email addresses from whitelisted domains can register',
+                enabled: 'Enabled',
+                disabled: 'Disabled',
+                allowedDomains: 'Allowed Email Domains',
+                allowedDomainsPlaceholder: 'gmail.com,outlook.com,icloud.com\nOne domain per line or comma-separated\nLeave empty to use default whitelist',
+                allowedDomainsDesc: 'Enter allowed email domains, comma-separated or one per line. Leave empty to use the default whitelist (includes Gmail, Outlook, iCloud, Yahoo, Proton, and other major email services).',
+                helpText: 'Default whitelist includes: Gmail, Outlook/Hotmail, iCloud, Yahoo, Zoho, Proton, Fastmail, Tuta, Posteo, Disroot, Riseup, and other major email services.',
+            },
+            // Transfer settings
+            transfer: {
+                title: 'Transfer Settings',
+                description: 'Configure instance transfer settings',
+                feeLabel: 'Transfer Fee',
+                feeUnit: 'per transfer',
+                feeDesc: 'Fee charged when initiating a transfer (0 means free). Automatically refunded if the recipient rejects the transfer',
+                feeRangeError: 'Transfer fee must be between 0 and {max} yuan, with up to 2 decimal places',
+            },
+            footerLinks: {
+                title: 'Footer Contact Links',
+                description: 'Configure the email button shown at the bottom of the sidebar',
+                email: 'Contact Email',
+                emailPlaceholder: "support{'@'}example.com or mailto:support{'@'}example.com",
+                emailDesc: 'Leave empty to hide the email button. You can enter either an email address or a full mailto: link.',
+                telegram: 'Telegram Group Link',
+                telegramPlaceholder: 'https://t.me/your_group',
+                telegramDesc: 'Leave empty to hide the Telegram button.',
+            },
+            ticketImages: {
+                title: 'Ticket Image Storage',
+                description: 'Upload ticket images to Lsky. The panel only forwards uploads and stores metadata, without writing files to local disk.',
+                baseUrl: 'Lsky Base URL',
+                baseUrlPlaceholder: 'https://img.example.com',
+                baseUrlDesc: 'Lsky site root URL. Do not append /api/v1/upload.',
+                token: 'Lsky Token',
+                tokenPlaceholder: 'Enter the Lsky API token',
+                tokenDesc: 'Used by backend only and never exposed to the frontend',
+                apiVersion: 'API Version',
+                apiVersionDesc: 'Choose the upload API version that matches your Lsky deployment',
+                targetId: 'Strategy/Storage ID',
+                targetIdPlaceholder: 'Use strategy_id for v1, storage_id for v2',
+                targetIdDesc: 'Optional. Leave empty to use Lsky defaults.',
+            },
+        },
+        // User management
+        users: {
+            title: 'User Management',
+            description: 'Manage platform users and invite codes',
+            create: 'Create User',
+            generateInvite: 'Generate Invite',
+            userInfo: 'User',
+            role: 'Role',
+            status: 'Status',
+            quotaUsage: 'Quota Usage',
+            allInstances: 'All Instances',
+            instances: 'instances',
+            registeredAt: 'Registered',
+            admin: 'Admin',
+            user: 'User',
+            active: 'Active',
+            banned: 'Banned',
+            searchPlaceholder: 'Search username, ID, or email...',
+            searchRange: 'Search Scope',
+            searchFieldUsername: 'Username',
+            searchFieldId: 'ID',
+            searchFieldEmail: 'Email',
+            exactMatch: 'Exact Match',
+            noUsers: 'No users',
+            noMatchingUsers: 'No matching users found',
+            noEmail: 'No email set',
+            resourceQuota: 'Resource Quota',
+            viewInstances: 'View Instances',
+            quota: 'Quota',
+            ban: 'Ban',
+            unban: 'Unban',
+            promoteAdmin: 'Make Admin',
+            demoteAdmin: 'Remove Admin',
+            confirmBan: 'Are you sure to ban user "{name}"?',
+            confirmUnban: 'Are you sure to unban user "{name}"?',
+            confirmPromoteAdmin: 'Make user "{name}" an admin? They need to sign in again for it to take effect.',
+            confirmDemoteAdmin: 'Remove admin privileges from user "{name}"? Their current sessions will be revoked.',
+            userBanned: 'User banned',
+            userUnbanned: 'User unbanned',
+            userPromotedAdmin: 'User is now an admin',
+            userDemotedAdmin: 'Admin privileges removed',
+            onlyActiveCanBeAdmin: 'Only active users can be made admins',
+            loadFailed: 'Failed to load users',
+            userVipLevels: 'User VIP Levels',
+            vipBenefits: 'Membership Benefits',
+            // Invite codes
+            invites: 'Invite Codes',
+            inviteCode: 'Invite Code',
+            inviteStatus: 'Status',
+            createdBy: 'Created By',
+            usedBy: 'Used By',
+            createdAt: 'Created At',
+            usedExpireAt: 'Used/Expire At',
+            noInvites: 'No invite codes',
+            noMatchingInvites: 'No matching invite codes',
+            inviteFilterAll: 'All',
+            inviteFilterUsed: 'Used',
+            inviteFilterUnused: 'Unused',
+            inviteUsed: 'Used',
+            inviteExpired: 'Expired',
+            inviteUnused: 'Unused',
+            permanent: 'Permanent',
+            deleteInvite: 'Delete',
+            confirmDeleteInvite: 'Are you sure to delete invite code {code}?',
+            inviteDeleted: 'Invite code deleted',
+            deleteFailed: 'Delete failed',
+            // Generate invite
+            generateInviteTitle: 'Generate Invite Code',
+            inviteCount: 'Quantity',
+            countUnit: '',
+            expireDays: 'Validity',
+            day1: '1 day',
+            day3: '3 days',
+            day7: '7 days',
+            day14: '14 days',
+            day30: '30 days',
+            permanentValid: 'Permanent',
+            expireHint: 'Set the expiration time for the invite code',
+            generate: 'Generate',
+            generating: 'Generating...',
+            generateFailed: 'Failed to generate invite code',
+            // Invite result
+            inviteGenerated: 'Invite Code Generated',
+            validUntil: 'Valid until',
+            copyCode: 'Copy Code',
+            copyAllCodes: 'Copy All',
+            copyLink: 'Copy Link',
+            copied: 'Copied!',
+            // Quota edit
+            editQuota: 'Edit Quota',
+            instanceLimit: 'Instance Limit',
+            instanceLimitHint: 'Maximum number of instances the user can create',
+            hostLimit: 'Host Limit',
+            hostLimitHint: 'Maximum number of hosts the user can own',
+            friendLimit: 'Friend Limit',
+            friendLimitHint: 'Maximum number of friends the user can add',
+            packageLimitHint: 'Maximum number of packages the user can create',
+            packageLimit: 'Package limit',
+            notAuthorized: 'Not authorized',
+            cpuAllowance: 'CPU Allowance',
+            cpuAllowanceHint: 'Allowance ÷ 100 ≈ available cores, min 10, step 5',
+            cpuCores: '~{n} cores',
+            memoryLimit: 'Memory (MB)',
+            diskLimit: 'Disk (MB)',
+            portLimit: 'NAT Port Limit',
+            portLimitHint: 'Total port quota limit for all instances',
+            snapshotLimit: 'Snapshot Limit',
+            snapshotLimitHint: 'Total snapshot quota limit for all instances',
+            backupLimit: 'Backup Limit',
+            backupLimitHint: 'Total backup quota limit for all instances',
+            trafficLimit: 'Monthly Traffic Limit',
+            trafficLimitPlaceholder: 'Leave empty for unlimited',
+            trafficLimitHint: 'In GB, leave empty for unlimited',
+            quotaUpdated: 'Quota updated',
+            totalRecords: '{count} records',
+            prevPage: 'Previous',
+            nextPage: 'Next',
+            // Reset password
+            resetPassword: 'Reset Password',
+            resetPasswordConfirm: 'Are you sure to reset password for user "{name}"?',
+            resetPasswordHint: 'A new password will be generated automatically. All user sessions will be revoked and re-login with new password is required.',
+            confirmResetPassword: 'Confirm Reset',
+            resetting: 'Resetting...',
+            passwordResetSuccess: 'Password Reset Successfully',
+            newPasswordFor: 'New password for "{name}":',
+            copyPassword: 'Copy Password',
+            copyPasswordHint: 'Please save this password securely. It cannot be viewed again after closing this dialog.',
+            // Disable 2FA
+            disable2FA: 'Disable 2FA',
+            disable2FAConfirm: 'Are you sure to disable two-factor authentication for user "{name}"?',
+            disable2FAWarning: 'After disabling, the user will no longer need a verification code to log in, which may reduce account security.',
+            twoFADisabled: 'Two-factor authentication disabled',
+            // Unbind GitHub
+            unbindGitHub: 'Unbind GitHub',
+            unbindGitHubConfirm: 'Are you sure to unbind GitHub OAuth for user "{name}"?',
+            unbindGitHubWarning: 'After unbinding, the user will not be able to use GitHub quick login.',
+            githubUnbound: 'GitHub OAuth unbound successfully',
+            // User activity and login records
+            userActivity: 'User Activity',
+            registeredNew: 'New',
+            registeredDays: 'Registered {days}d',
+            viewLoginRecords: 'View login records',
+            noLoginRecord: 'No login record',
+            loginRecords: 'Login Records',
+            noLoginRecords: 'No login records',
+            loadLoginRecordsFailed: 'Failed to load login records',
+            // Send message
+            sendMessage: 'Send Message',
+            sendMessageTo: 'Send Message to {username}',
+            messageTitle: 'Message Title',
+            messageTitlePlaceholder: 'Enter message title',
+            messageTitleRequired: 'Please enter message title',
+            messageContent: 'Message Content',
+            messageContentPlaceholder: 'Enter message content',
+            messageContentRequired: 'Please enter message content',
+            messageSent: 'Message sent',
+            messageSendFailed: 'Failed to send message',
+            // User balance
+            balance: 'Balance',
+            viewBalance: 'View Balance Details',
+            consumed: 'Consumed',
+            totalConsumed: 'Total amount consumed',
+            balanceDetails: 'Balance Details',
+            balanceOverview: 'Account Overview',
+            balanceLogs: 'Balance Logs',
+            rechargeRecords: 'Recharge Records',
+            currentBalance: 'Current Balance',
+            totalRecharge: 'Total Recharged',
+            totalConsume: 'Total Consumed',
+            noBalanceLogs: 'No balance changes',
+            noRechargeRecords: 'No recharge records',
+            loadBalanceFailed: 'Failed to load balance info',
+            loadBalanceLogsFailed: 'Failed to load balance logs',
+            loadRechargeRecordsFailed: 'Failed to load recharge records',
+            balanceType: {
+                recharge: 'Recharge',
+                consume: 'Consume',
+                refund: 'Refund',
+                admin_adjust: 'Admin Adjust',
+                gift: 'Gift',
+                transfer_fee: 'Transfer Fee',
+                transfer_refund: 'Fee Refund',
+            },
+            // Adjust balance
+            adjustBalance: 'Adjust Balance',
+            adjustBalanceFor: 'Adjust Balance for {username}',
+            adjustType: 'Adjustment Type',
+            addBalance: 'Add Balance',
+            deductBalance: 'Deduct Balance',
+            amount: 'Amount',
+            amountPlaceholder: 'Enter amount',
+            adjustReason: 'Reason',
+            adjustReasonPlaceholder: 'Enter reason for adjustment (required)',
+            invalidAmount: 'Please enter a valid amount',
+            reasonRequired: 'Please enter a reason',
+            balanceAdjusted: 'Balance adjusted successfully',
+            balanceAdjustFailed: 'Failed to adjust balance',
+            // Points
+            points: 'Points',
+            earned: 'Total',
+            totalEarnedPoints: 'Total earned points',
+            spent: 'Spent',
+            spentPoints: 'Spent points',
+            adjustPoints: 'Adjust Points',
+            currentPoints: 'Current Points',
+            pointsAmount: 'Amount',
+            pointsAmountHint: 'Positive to add, negative to deduct',
+            pointsAmountPlaceholder: 'e.g. 100 or -50',
+            pointsReasonPlaceholder: 'Enter reason for adjustment (required)',
+            invalidPointsAmount: 'Please enter a valid points amount',
+            pointsAdjusted: 'Points adjusted successfully',
+            pointsAdjustFailed: 'Failed to adjust points',
+            // Hosting balance
+            hostingBalance: 'Hosting Balance',
+            hostingBalanceDetails: 'Hosting Balance Details',
+            hostingBalanceOverview: 'Overview',
+            hostingBalanceLogs: 'Logs',
+            adjustHostingBalance: 'Adjust Hosting Balance',
+            viewHostingBalance: 'View Hosting Balance',
+            frozenHostingBalance: 'Frozen Hosting Balance',
+            availableBalance: 'Available Balance',
+            frozenBalance: 'Frozen Balance',
+            frozen: 'Frozen',
+            available: 'Available',
+            operation: 'Operation',
+            operationAdd: 'Add',
+            operationDeduct: 'Deduct',
+            hostingReasonPlaceholder: 'Enter reason for adjustment (required)',
+            hostingBalanceAdjusted: 'Hosting balance adjusted successfully',
+            hostingBalanceAdjustFailed: 'Failed to adjust hosting balance',
+            loadHostingLogsFailed: 'Failed to load hosting balance logs',
+            logTime: 'Time',
+            logType: 'Type',
+            logAmount: 'Amount',
+            logStatus: 'Status',
+            logDescription: 'Description',
+            hostingLogType: {
+                income: 'Income',
+                deduction: 'Deduction',
+                unfreeze: 'Unfreeze',
+                withdraw: 'Withdraw',
+                admin_adjust: 'Admin Adjust',
+            },
+            // Linked accounts detection
+            linkedAccounts: 'Linked Accounts',
+            detectDays: 'Detection Range',
+            daysUnit: 'days',
+            startDetect: 'Start Detection',
+            detecting: 'Detecting...',
+            detectingHint: 'Analyzing user data, please wait...',
+            clickToDetect: 'Click the button above to start detecting linked accounts',
+            loadLinkedAccountsFailed: 'Failed to load linked accounts detection',
+            detectTime: 'Detection Time',
+            detectDuration: 'Duration',
+            detectRange: 'Detection Range',
+            ipGroupCount: 'IP linked groups',
+            emailGroupCount: 'email similar groups',
+            usernameGroupCount: 'username similar groups',
+            ipLinkedGroups: 'IP Linked Groups',
+            emailSimilarGroups: 'Email Similar Groups',
+            usernameSimilarGroups: 'Username Similar Groups',
+            usersCount: 'users',
+            loginsCount: 'logins',
+            lastLoginAt: 'Last login',
+            noLinkedAccounts: 'No linked accounts detected, your users are clean!',
+        },
+        // Host management
+        hosts: {
+            title: 'Host Management',
+            description: 'Manage hosts and node groups',
+            create: 'Add Host',
+            address: 'Address',
+            status: 'Status',
+            online: 'Online',
+            offline: 'Offline',
+            maintenance: 'Maintenance',
+            hostsTab: 'Hosts',
+            searchPlaceholder: 'Search hosts...',
+            noHosts: 'No hosts',
+            name: 'Name',
+            resources: 'Resources',
+            instances: 'Instances',
+            actions: 'Actions',
+            cpu: 'CPU',
+            cpuQuota: 'CPU Quota',
+            memory: 'Memory',
+            memoryQuota: 'Memory Quota',
+            disk: 'Disk',
+            diskUsage: 'Disk Usage',
+            cores: 'cores',
+            allowanceLimit: 'Allowance limit',
+            memoryLimit: 'Memory limit',
+            instanceType: 'Type',
+            typeContainer: 'Container',
+            typeVm: 'VM',
+            typeBoth: 'Both',
+            edit: 'Edit',
+            test: 'Test',
+            delete: 'Delete',
+            testSuccess: 'Connection successful',
+            testFailed: 'Connection failed',
+            confirmDelete: 'Are you sure to delete host "{name}"?',
+            hostDeleted: 'Host deleted',
+            deleteFailed: 'Delete failed',
+            // Add/Edit host
+            addHost: 'Add Host',
+            editHost: 'Edit Host',
+            hostName: 'Name',
+            hostNameHint: 'Only letters, numbers, - and _ allowed',
+            hostNameRequired: 'Please enter the node name',
+            hostDesc: 'Description',
+            apiUrl: 'API URL',
+            ipAddress: 'Server Address',
+            ipAddressHint: 'Supports bare IPv4, bare IPv6, or a domain name',
+            ipAddressRequired: 'Please enter the server address',
+            apiPort: 'API Port',
+            apiPortHint: 'Default 8443',
+            tokenPrompt: 'If prompted for a secure communication Token during installation, please copy and paste the following content:',
+            copyToken: 'Copy Token',
+            country: 'Country or Region',
+            certPath: 'Certificate Path',
+            keyPath: 'Key Path',
+            natPublicIp: 'NIC IP',
+            natPublicIpPlaceholder: 'Enter server NIC IP',
+            natConfig: 'NAT Config',
+            natPublicIpv4: 'Public IPv4',
+            natPublicIpv4Placeholder: 'Enter the public IPv4 shown to users',
+            natPublicIpv4Desc: 'The public IPv4 address users see for IPv4 port mappings.',
+            natPublicIpv6: 'Public IPv6',
+            natPublicIpv6Placeholder: 'e.g. 2600:1900:41a0:5bb::',
+            natPublicIpv6Desc: 'The public IPv6 address shown to users. It does not have to be the actual bind address.',
+            natBindIpv4: 'Bind IPv4',
+            natBindIpv4Placeholder: 'Leave empty for auto-detect, e.g. 0.0.0.0 or 10.170.0.3',
+            natBindIpv4Desc: 'The address used when binding IPv4 ports. Leave empty to let the system choose.',
+            natBindIpv6: 'Bind IPv6',
+            natBindIpv6Placeholder: 'Leave empty for auto-detect, e.g. 2600:1900:41a0:5bb::',
+            natBindIpv6Desc: 'The address used when binding IPv6 ports. Leave empty to let the system choose.',
+            natPublicIpv6Invalid: 'Public IPv6 address format is invalid',
+            natBindIpv6Invalid: 'Bind IPv6 address format is invalid',
+            portRangeStart: 'Port Range Start',
+            portRangeEnd: 'Port Range End',
+            portRangeEndMustBeGreater: 'Port range end must be greater than or equal to start',
+            cpuAllowanceMax: 'Total CPU Time Quota',
+            memoryMax: 'Max Memory',
+            instanceTypeLabel: 'Instance Type',
+            networkModeLabel: 'Network Mode',
+            networkModeNat: 'IPv4 NAT',
+            networkModeNatIpv6: 'IPv4 NAT & IPv6',
+            networkModeNatIpv6Nat: 'IPv4 NAT & IPv6 NAT',
+            networkModeIpv6Only: 'IPv6 Only',
+            networkModeIpv6Nat: 'IPv6 NAT',
+            autoAssign: 'Auto Assign',
+            hostAdded: 'Host added',
+            hostUpdated: 'Host updated',
+            typeChangeWarning: 'Host type change warning',
+            addFailed: 'Add failed',
+            updateFailed: 'Update failed',
+            // Init config
+            initConfig: 'Init Config',
+            // Storage config
+            storageConfig: 'Storage Config',
+            storageDriver: 'Storage Driver',
+            storageDriverZfs: 'ZFS (Recommended)',
+            storageDriverLvm: 'LVM',
+            storageType: 'Storage Type',
+            storageTypeLoop: 'Loop File',
+            storageTypeDisk: 'Physical Disk',
+            storagePath: 'Device Path',
+            storagePathHint: 'e.g. /dev/sdb',
+            storageSize: 'Storage Size',
+            // Network config
+            networkConfig: 'Network Config',
+            networkOption: 'Network Option',
+            networkOptionHint: 'Select the network egress mode for container instances',
+            independentIpv6: 'Independent IPv6',
+            ipv6Mode: 'IPv6 Mode',
+            ipv6Routed: 'Routed',
+            ipv6Nat: 'NAT',
+            ipv6Disabled: 'Disabled',
+            ipv6Subnet: 'IPv6 Subnet',
+            ipv6SubnetHint: 'IPv6 subnet allocated to containers',
+            ipv6SubnetRequired: 'Please enter IPv6 subnet',
+            ipv6SubnetInvalid: 'Invalid IPv6 subnet format, CIDR prefix required (e.g. /48)',
+            ipv6Gateway: 'IPv6 Gateway',
+            ipv6ParentInterface: 'IPv6 Parent Interface',
+            ipv6ParentInterfaceHint: 'Physical NIC name on the host for IPv6 routed mode (e.g. eth0)',
+            ipv6ParentInterfaceRequired: 'Please enter IPv6 parent interface',
+            enableApi: 'Enable API',
+            // Sysctl config
+            sysctlConfig: 'Kernel Parameters',
+            sysctlConfigHint: 'Custom sysctl config, leave empty for defaults',
+            resetSysctl: 'Reset to Default',
+            enableBBR: 'Enable BBR',
+            bbrEnabled: 'BBR Enabled',
+            // Install script
+            installScript: 'Install Script',
+            runOnHost: 'Run the following command on the host with root privileges:',
+            copyCommand: 'Copy Command',
+            step1RunScript: 'Run Install Script',
+            step2Verify: 'Verify & Connect',
+            verifyHint: 'After the script completes, click the button below to verify the connection',
+            verifyAndConnect: 'Verify & Connect',
+            verifying: 'Verifying...',
+            verifySuccess: 'Successfully connected!',
+            verifyFailed: 'Verification failed',
+            reinstall: 'Reinstall',
+            reinstallScript: 'Reinstall Script',
+            reinstallFailed: 'Failed to generate install command',
+            waitingInstall: 'Waiting for installation...',
+            installSuccess: 'Installation successful!',
+            tokenExpired: 'Token expired, please recreate the host',
+            // Detail page
+            tabInfo: 'Info',
+            tabConfig: 'Config',
+            tabInstances: 'Instances',
+            tabStorage: 'Storage',
+            tabImages: 'Images',
+            tabOps: 'Ops',
+            tabCreate: 'Create',
+            basicInfo: 'Basic Info',
+            config: 'Config',
+            resourceLimits: 'Resource Limits',
+            transferControl: 'Transfer Control',
+            transferEnabled: 'Allow Transfer',
+            transferEnabledHint: 'When disabled, instances on this host cannot initiate transfer requests',
+            notificationSettings: 'Notification Settings',
+            notificationSettingsHint: 'These notifications are sent only through your enabled Telegram, Discord, or Webhook channels. Email is not used here.',
+            notifyPurchase: 'Purchase Notification',
+            notifyPurchaseHint: 'Notify you when a user purchases a paid instance on this host.',
+            notifyRenew: 'Renewal Notification',
+            notifyRenewHint: 'Notify you when a user renews a paid instance on this host.',
+            notifyDestroy: 'Destroy Notification',
+            notifyDestroyHint: 'Notify you when a user destroys an instance on this host, including refund and fee amounts.',
+            extraConfig: 'Extra Config',
+            trafficConfig: 'Traffic Config',
+            trafficResetDay: 'Traffic Reset Day',
+            trafficResetDayHint: 'Day of month to reset instance traffic (1-28)',
+            enableResourcePool: 'Enable Resource Pool',
+            enableResourcePoolHint: 'When enabled, instances on this host can participate in check-in/lottery resource applications',
+            announcement: 'Announcement',
+            announcementPlaceholder: 'Enter announcement content here, will be displayed on all instances under this host',
+            announcementHint: 'Leave empty to hide announcement, supports line breaks',
+            probeUrl: 'Probe URL',
+            probeUrlPlaceholder: 'Enter node probe monitoring page URL',
+            probeUrlHint: 'You can enter probe, script test results or other links for this node. Once configured, users can click the icon to view when selecting hosts',
+            portRange: 'Port Range',
+            portsUsed: 'Ports Used',
+            recalculateResources: 'Align Used',
+            recalculateResourcesTip: 'Recalculate resource usage and align quota to used amount',
+            recalculateSuccess: 'Resources recalculated, quota aligned',
+            recalculateNoChanges: 'Resources are correct, no changes needed',
+            recalculateFailed: 'Resource recalculation failed',
+            ops: {
+                title: 'Host Operations Center',
+                description: 'Run non-destructive inventory, baseline sync, and network repair first for legacy host onboarding and state reconciliation.',
+                discover: 'Inventory',
+                baselineSync: 'Baseline Sync',
+                networkRepair: 'Network Repair',
+                refresh: 'Refresh Result',
+                managed: 'Managed Instances',
+                orphaned: 'Unmanaged Legacy Instances',
+                missing: 'Database Missing Instances',
+                summary: 'Summary',
+                totalIncus: 'Host Instances',
+                totalDb: 'Database Instances',
+                managedCount: 'Managed',
+                orphanedCount: 'Unmanaged',
+                missingCount: 'Missing',
+                runSuccess: 'Operation completed successfully',
+                runFailed: 'Operation failed',
+                lastRunAt: 'Last run at',
+                empty: 'No result yet. Run an operation above first.',
+                sectionInventory: 'Host Instance Inventory',
+                sectionRepair: 'Safe Repair Actions',
+                sectionReport: 'Execution Result',
+                resultInventory: 'Inventory Result',
+                resultBaseline: 'Baseline Sync Result',
+                resultNetwork: 'Network Repair Result',
+                resultPreview: 'Instance Precheck Result',
+                resultInstanceSync: 'Single Instance Sync Result',
+                resultInstanceRestart: 'Single Instance Restart Result',
+                resultDanger: 'Dangerous Action Result',
+                instanceName: 'Instance Name',
+                instanceType: 'Type',
+                incusStatus: 'Host Status',
+                dbStatus: 'DB Status',
+                dbInstance: 'DB Instance',
+                changes: 'Changes',
+                synced: 'Synced',
+                failed: 'Failed',
+                total: 'Total',
+                ipv4: 'IPv4',
+                ipv6: 'IPv6',
+                details: 'Details',
+                noManaged: 'No managed instances found',
+                noOrphaned: 'No unmanaged legacy instances found',
+                noMissing: 'No database-missing instances found',
+                baselineHint: 'Sync host resource usage and batch backfill status/IP for running instances.',
+                networkHint: 'Batch reconcile status, IPv4 and IPv6 records for non-deleted instances.',
+                discoverHint: 'Read all current Incus containers / KVMs from the host and reconcile with database records.',
+                selectInstanceHint: 'Select one managed instance to perform single-instance sync, restart, or dangerous actions.',
+                instancePanel: 'Single Instance Panel',
+                loadPreview: 'Load Precheck',
+                syncInstance: 'Sync Instance',
+                safeRestart: 'Safe Restart',
+                forceRestart: 'Force Restart',
+                dangerZone: 'Danger Zone',
+                dangerHint: 'These actions may wipe or replace the instance system data. Use them only when inventory, sync, and restart can no longer solve the issue.',
+                rebuild: 'Rebuild Current Instance',
+                recreate: 'Recreate Replacement Instance',
+                imageAlias: 'Image Alias',
+                imageAliasPlaceholder: 'e.g. ubuntu/22.04 or debian/12',
+                selectImage: 'Image Selection',
+                imagePlaceholder: 'Please select a target image',
+                loadingImages: 'Loading available images...',
+                noImagesAvailable: 'No available images on this host',
+                sshKeyId: 'SSH Key ID',
+                selectSshKey: 'SSH Key',
+                sshKeyPlaceholder: 'Do not specify an SSH key',
+                loadingSshKeys: 'Loading SSH keys...',
+                noSshKeysAvailable: 'This instance user has no SSH keys. Leaving this empty will use backend default handling.',
+                sshKeyOptionalHint: 'Optional. If empty, the instance user default key strategy is used.',
+                customInitCommandIds: 'Custom Init Command IDs',
+                selectInitCommands: 'Init Commands',
+                loadingInitCommands: 'Loading init commands...',
+                noInitCommandsAvailable: 'No init commands are available for the selected image',
+                optionalField: 'Optional, leave empty if not needed',
+                confirmDangerTitle: 'Confirm Before Execution',
+                riskCheckbox: 'I understand this action may cause irreversible loss of instance system or data, and I confirm this is intentional.',
+                confirmTextHint: 'Enter the real instance name to confirm, e.g. u2-g65uoeo1',
+                ownerUserId: 'User ID',
+                fullInstanceName: 'Full Instance Name',
+                selectedOnlyHint: 'Single-instance actions only affect the currently selected instance. Other instances are not affected.',
+                localizedNone: 'No action needed',
+                dangerActionType: 'Action Type',
+                dangerConfirm1Title: 'First Dangerous Action Confirmation',
+                dangerConfirm1Hint: 'Please confirm again that you are about to execute an irreversible dangerous action.',
+                dangerConfirm1Btn: 'Confirm and Continue',
+                dangerConfirm2Title: 'Second Dangerous Action Confirmation',
+                dangerConfirm2Hint: 'This is the final confirmation. A task will be created immediately after execution.',
+                dangerConfirm2Btn: 'Confirm Execution',
+                dangerConfirmStep: 'Confirmation step {step} / {total}',
+                executeDangerAction: 'Execute Dangerous Action',
+                suggestedAction: 'Suggested Action',
+                activeTask: 'Active Task',
+                latestInstanceAction: 'Latest Single-Instance Action',
+            },
+            statusOnline: 'Online',
+            statusOffline: 'Offline',
+            statusMaintenance: 'Maintenance',
+            invalidId: 'Invalid host ID',
+            loadFailed: 'Load failed',
+            noInstances: 'No instances on this host',
+            search: 'Search',
+            instanceSearchPlaceholder: 'Search by instance ID, name, username, email, IP address...',
+            imagesOnHost: 'Images on host {name}',
+            noImagesOnHost: 'No images on this host',
+            selectImagesToSync: 'Select images to sync to host {name}',
+            allImagesSynced: 'All images are synced to this host',
+            imagePolicy: {
+                title: 'Image Policy',
+                description: 'Configure which images can be selected for provisioning and rebuild on host "{name}"',
+                defaultMode: 'Use panel defaults',
+                defaultDesc: 'Do not restrict this host separately. Provisioning and rebuild will load all available images for the host architecture and instance type.',
+                restrictedMode: 'Restrict to selected images',
+                restrictedDesc: 'Only the checked images will appear in the provisioning and rebuild lists for this host.',
+                selectableImages: 'Selectable images',
+                defaultHint: 'This host is currently using the default image policy.',
+                selectedCount: '{count} images selected',
+                searchPlaceholder: 'Search by image name, alias, or distro...',
+                emptySelection: 'Restricted mode requires at least one selected image. Switch back to default mode if you do not want to restrict this host.',
+                noImages: 'No visible images match this host architecture and instance type.',
+                loadFailed: 'Failed to load image policy',
+                saveSuccess: 'Image policy saved',
+                saveFailed: 'Failed to save image policy',
+            },
+            addHostDesc: 'Add a new host node',
+            allocated: 'Allocated',
+            includesPageCache: 'includes page cache',
+            syncTime: 'Sync Time',
+            deleteHost: 'Delete Host',
+            deleteWarning: 'This action cannot be undone! Please ensure there are no instances on this host before deleting.',
+            deleteConfirmHint: 'Please enter the host name "{name}" to confirm deletion:',
+            enterHostName: 'Host Name',
+            confirmDeleteBtn: 'Confirm Delete',
+            deleteNameMismatch: 'Name does not match',
+            hasInstances: 'This host still has {count} instance(s), please delete or migrate them first',
+            checkFailed: 'Check failed',
+            // Batch extend
+            batchExtend: 'Gift Time',
+            extendHint: '{count} paid instance(s) on this host will be extended',
+            extendDaysLabel: 'Days to extend',
+            extendDaysPlaceholder: 'Enter a number between 1-365',
+            extendDaysInvalid: 'Please enter a valid number of days (1-365)',
+            confirmExtendBtn: 'Confirm',
+            extendSuccess: 'Successfully extended {count} paid instance(s) by {days} days',
+            extendFailed: 'Batch extend failed',
+            // Batch delete instances
+            selectedCount: '{count} instance(s) selected',
+            noInstanceSelected: 'Select instances to use batch actions',
+            batchDelete: 'Batch Delete',
+            batchDeleteTitle: 'Batch Delete Instances',
+            batchDeleteWarning: 'This action cannot be undone! Instance data will be permanently deleted.',
+            batchDeleteConfirm: 'Are you sure to delete these {count} instance(s)?',
+            confirmBatchDelete: 'Confirm Delete',
+            databaseOnlyDelete: 'Database Only',
+            batchDeleteSuccess: 'Successfully deleted {count} instance(s)',
+            batchDeletePartial: 'Successfully deleted {success} instance(s), {failed} failed',
+            batchDeleteFailed: 'Batch delete failed',
+            batchDeleteRefundWarning: 'Deleting paid instances will automatically refund the remaining value to the user and deduct from your hosting balance.',
+            batchDeleteRefundTotal: 'Total Refund Amount',
+            instanceName: 'Instance Name',
+            instanceUser: 'Owner',
+            refundAmount: 'Refund Amount',
+            // Batch sync instance status
+            batchSyncStatus: 'Sync Status',
+            batchSyncSuccess: 'Successfully synced {synced} instance(s), {changed} status updated',
+            batchSyncWithIpv4: 'Successfully synced {synced} instance(s), {changed} status updated, {ipv4Changed} internal IP updated',
+            batchSyncPartial: 'Synced {synced}, updated {changed}, failed {failed}',
+            batchSyncNoChange: 'Successfully synced {synced} instance(s), no status change',
+            batchSyncFailed: 'Sync status failed',
+            // Batch suspend instances
+            batchSuspend: 'Batch Suspend',
+            batchSuspendTitle: 'Batch Suspend Instances',
+            batchSuspendWarning: 'After suspension, instance owners will not be able to perform any operations until unsuspended.',
+            batchSuspendConfirm: 'Are you sure you want to suspend these {count} instances?',
+            confirmBatchSuspend: 'Confirm Suspend',
+            batchSuspendSuccess: 'Successfully suspended {count} instance(s)',
+            batchSuspendPartial: 'Successfully suspended {success} instance(s), {failed} failed',
+            batchSuspendFailed: 'Batch suspend failed',
+            batchUnsuspend: 'Batch Unsuspend',
+            batchUnsuspendSuccess: 'Successfully unsuspended {count} instances',
+            batchUnsuspendPartial: 'Unsuspended {success} instances, {failed} failed',
+            batchUnsuspendNone: 'No suspended instances found in the selection',
+            batchUnsuspendFailed: 'Batch unsuspend failed',
+            suspendReason: 'Suspension Reason (Optional)',
+            suspendReasonPlaceholder: 'Enter suspension reason, instance owners will be notified via inbox...',
+            deleteReason: 'Deletion Reason (Optional)',
+            deleteReasonPlaceholder: 'Enter the reason for deletion, users will be notified via inbox and notification channels...',
+            deleteReasonHint: 'If a reason is provided, the instance owner will receive a notification',
+            // Instance traffic
+            trafficUsage: 'Traffic Usage',
+            trafficUnlimited: 'Unlimited',
+            resetTraffic: 'Reset Traffic',
+            trafficResetSuccess: 'Traffic reset successfully',
+            trafficResetFailed: 'Failed to reset traffic',
+            resetTrafficTitle: 'Reset Instance Traffic',
+            resetTrafficWarning: 'If the instance has exceeded its quota, resetting traffic will not automatically restore the bandwidth throttling (1Mbps). Please manually restore the bandwidth rate for this instance.',
+            resetTrafficDesc: 'Are you sure you want to reset traffic for instance "{instance}"?',
+            // Host traffic statistics
+            trafficStats: 'Traffic Statistics',
+            monthlyUsed: 'Monthly Used',
+            hostTotalLimit: 'Host Total Limit',
+            // Host status
+            agentStatusTitle: 'Host Status',
+            agentStatusDesc: 'Agent reports live host resources and runtime status every {seconds} seconds',
+            agentStatusRefreshSuccess: 'Host status refreshed',
+            agentStatusLoadFailed: 'Failed to load host status',
+            agentNotInstalled: 'Not installed',
+            agentDisabled: 'Disabled',
+            agentOnline: 'Online',
+            agentOffline: 'Offline',
+            agentUnknown: 'Unknown',
+            agentVersionLatest: 'Latest',
+            agentVersionOutdated: 'Update available',
+            agentVersionUnknown: 'Version unknown',
+            agentLatestVersion: 'Latest version: {version}',
+            agentUpgradeClickHint: 'Click to request upgrade to {version}; Agent will run it on next heartbeat',
+            agentUpgradeRequestSuccess: 'Upgrade requested; Agent will run it on the next heartbeat in about {seconds}s',
+            agentUpgradeRequestFailed: 'Failed to request Agent upgrade',
+            agentAlreadyLatest: 'Agent is already latest',
+            agentInstallCommand: 'Install/Reinstall Agent',
+            agentInstallCommandTitle: 'Agent Installation Command',
+            agentInstallCommandHint: 'Run the full command on the host, or paste it or its ait_ token into the Agent menu.',
+            agentInstallCommandConfirm: 'Generating a new Agent installation command rotates this host Agent credentials. The old Agent will stop reporting until it is reinstalled. Continue?',
+            agentInstallTokenExpiresAt: 'Expires at {time}',
+            agentInstallCommandSuccess: 'Agent installation command generated',
+            agentInstallCommandFailed: 'Failed to generate Agent installation command',
+            agentInstallCommandCopied: 'Agent installation command copied',
+            agentNoRecordHint: 'No Agent heartbeat has been recorded for this host. It will report automatically after Agent install or reinstall.',
+            agentId: 'Agent ID',
+            agentLastSeen: 'Last Heartbeat',
+            agentHeartbeatIp: 'Heartbeat IP',
+            agentReportedAt: 'Reported At',
+            agentIncus: 'Incus Check',
+            agentIncusAvailable: 'Available',
+            agentIncusUnavailable: 'Unavailable',
+            agentCpuTotal: 'CPU Cores',
+            agentMemoryTotal: 'Total Memory',
+            agentUptime: 'Host Uptime',
+            agentSocket: 'Incus Socket',
+            agentCpuUsage: 'CPU Usage',
+            agentCpuCores: 'cores',
+            agentMemoryUsage: 'Memory Usage',
+            agentSwapUsage: 'SWAP Usage',
+            agentDiskUsage: 'Disk Usage',
+            agentLoadAverage: 'Load Average',
+            agentLoadAverageHint: '1 / 5 / 15 minutes',
+            agentProcessCount: 'Process Count',
+            // Storage pool management
+            storage: {
+                title: 'Storage Pools',
+                subtitle: 'Manage Incus storage pools on this host',
+                create: 'Add Storage Pool',
+                createTitle: 'Create Storage Pool',
+                empty: 'No storage pools',
+                loadFailed: 'Failed to load storage pools',
+                createSuccess: 'Storage pool created',
+                createFailed: 'Failed to create storage pool',
+                deleteSuccess: 'Storage pool deleted',
+                deleteFailed: 'Failed to delete storage pool',
+                deleteConfirm: 'Are you sure to delete storage pool "{name}"? This action cannot be undone.',
+                updateSuccess: 'Storage pool updated',
+                updateFailed: 'Failed to update storage pool',
+                editTitle: 'Edit Storage Pool',
+                currentSize: 'Current Size',
+                newSize: 'New Size',
+                newSizeHint: 'Only expansion is supported, not shrinking',
+                nameRequired: 'Please enter storage pool name',
+                sourceRequired: 'Please enter storage source (device path)',
+                sizeRequired: 'Please enter storage size',
+                pathRequired: 'Please enter directory path',
+                poolName: 'Pool Name',
+                driver: 'Driver Type',
+                description: 'Description',
+                source: 'Source',
+                size: 'Size',
+                usedBy: 'Used by',
+                volumes: 'volumes',
+                // Driver descriptions
+                zfsDesc: 'Recommended: Full features (snapshots, clones, compression, quotas), excellent performance',
+                lvmDesc: 'Linux standard, very stable, thin provisioning recommended',
+                btrfsDesc: 'Similar to ZFS features, suitable for single disk or RAID1/10',
+                dirDesc: 'Directory storage, lowest performance, for testing only',
+                // Common
+                useLoop: 'Use loop file',
+                loopSizeHint: 'Will create image file in /var/lib/incus/',
+                // ZFS
+                zfsSourceHint: 'Physical disk or partition path, e.g. /dev/disk/by-id/nvme-xxx',
+                zfsPoolName: 'ZFS Pool Name',
+                zfsPoolNameHint: 'Optional, defaults to storage pool name',
+                // LVM
+                lvmSourceHint: 'Physical disk path, e.g. /dev/sdb',
+                lvmVgName: 'Volume Group Name',
+                lvmUseThinpool: 'Enable Thin Provisioning',
+                lvmThinpoolHint: 'Strongly recommended, otherwise snapshot performance is poor',
+                // Btrfs
+                btrfsSourceHint: 'Physical disk path, e.g. /dev/sdb',
+                // DIR
+                dirPath: 'Directory Path',
+                dirPathHint: 'Specify an existing directory, e.g. /mnt/data/incus-storage',
+                // Storage purpose
+                purpose: 'Storage Purpose',
+                forInstances: 'For instance system disk',
+                forInstancesHint: 'Used as default storage when creating instances',
+                forVolumes: 'For instance storage volumes',
+                forVolumesHint: 'Can be manually mounted to instances',
+                purposeSystemDisk: 'System',
+                purposeStorageDisk: 'Storage',
+                // Mode switch
+                modeCreate: 'Create New Pool',
+                modeExisting: 'Link Existing Pool',
+                modeImport: 'Import Existing Storage',
+                modeCreateHint: 'Create a new storage pool on the host, requires driver type, source and other parameters',
+                modeExistingHint: 'Link an existing storage pool on the host, just enter the pool name',
+                modeImportHint: 'Import storage that exists at OS level but Incus does not know about (e.g. manually created ZFS pool, LVM VG)',
+                linkSuccess: 'Storage pool linked successfully',
+                importSuccess: 'Storage pool imported successfully',
+                // Import storage pool
+                importZfsSource: 'ZFS Pool Name',
+                importLvmSource: 'LVM Volume Group Name',
+                importBtrfsSource: 'Btrfs Device or Subvolume Path',
+                importDirSource: 'Directory Path',
+                importZfsHint: 'Existing ZFS pool name (check with zpool list)',
+                importLvmHint: 'Existing LVM volume group name (check with vgs)',
+                importBtrfsHint: 'Device or subvolume path formatted as Btrfs',
+                importDirHint: 'Existing directory path, e.g. /mnt/storage',
+                importSourceRequired: 'Btrfs and DIR types require storage source path',
+            },
+        },
+        // Image management
+        images: {
+            title: 'Image Management',
+            description: 'Manage system images for users to select when creating instances',
+            create: 'Add Image',
+            edit: 'Edit Image',
+            imagesTab: 'Image Library',
+            syncTab: 'Sync Status',
+            noImages: 'No images added yet',
+            noImagesForArchitecture: 'No images for the selected architecture',
+            addImage: 'Add Image',
+            syncToHost: 'Sync Image to Host',
+            delete: 'Delete',
+            confirmDelete: 'Are you sure to delete image "{name}"?',
+            imageDeleted: 'Image deleted',
+            deleteFailed: 'Delete failed',
+            deleteSuccess: 'Image deleted',
+            enabled: 'Enabled',
+            disabled: 'Disabled',
+            active: 'Active',
+            show: 'Show',
+            hide: 'Hide',
+            shown: 'Image shown',
+            hidden: 'Image hidden',
+            statusVisible: 'Visible',
+            statusHidden: 'Hidden',
+            createSuccess: 'Image created',
+            updateSuccess: 'Image updated',
+            saveFailed: 'Save failed',
+            loadFailed: 'Failed to load images',
+            validation: {
+                requiredFields: 'Please fill in name, remote alias and icon',
+            },
+            fields: {
+                icon: 'Icon',
+                name: 'Name',
+                remoteAlias: 'Remote Alias',
+                osType: 'OS Type',
+                architecture: 'Architecture',
+                instanceType: 'Instance Type',
+                sortOrder: 'Sort Order',
+                status: 'Status',
+                hidden: 'Hide this image from users',
+            },
+            placeholder: {
+                name: 'e.g. Ubuntu 24.04 LTS',
+                remoteAlias: 'e.g. ubuntu/noble/cloud',
+                icon: 'Select icon',
+            },
+            hint: {
+                remoteAlias: 'Incus remote image alias, e.g. ubuntu/noble/cloud',
+                sortOrder: 'Lower values appear first',
+                instanceType: 'Specify whether this image is for containers, VMs, or both',
+            },
+            // Instance types
+            typeContainer: 'Container',
+            typeVm: 'Virtual Machine',
+            typeBoth: 'Both',
+            // Sync status
+            syncStatusDesc: 'View sync status of images on each host, click cells to sync or delete',
+            refresh: 'Refresh',
+            addToLibraryFirst: 'Please add images to the library first',
+            noSystemImages: 'No system images available',
+            image: 'Image',
+            statusReady: 'Ready',
+            statusSyncing: 'Syncing',
+            statusPending: 'Pending',
+            statusError: 'Error',
+            statusNotSynced: 'Not Synced',
+            retry: 'Retry',
+            sync: 'Sync',
+            confirmDeleteFromHost: 'Are you sure to delete this image from the host?',
+            deletedFromHost: 'Image deleted from host',
+            imageInUse: 'This image is being used by {count} instance(s) and cannot be deleted',
+            syncStarted: 'Sync task started',
+            syncFailed: 'Sync failed',
+            loadStatusFailed: 'Failed to load image status',
+            loadHostsFailed: 'Failed to load hosts',
+            // Form
+            imageName: 'Name',
+            osType: 'OS Type',
+            remoteAlias: 'Remote Alias',
+            imageDesc: 'Description',
+            sortOrder: 'Sort Order',
+            activeStatus: 'Active Status',
+            selectHosts: 'Select Sync Hosts',
+            imageAdded: 'Image added',
+            imageCreated: 'Image created',
+            imageUpdated: 'Image updated',
+            // Image form modal
+            selectDistro: 'Select Distribution',
+            selectVersion: 'Select Version',
+            configureInfo: 'Configure Info',
+            selectDistroHint: 'Select the Linux distribution to add',
+            versionsCount: '{count} versions',
+            imageVariant: 'Image Variant',
+            cloudVariantDesc: 'Cloud optimized, supports cloud-init',
+            defaultVariantDesc: 'Standard version',
+            displayName: 'Display Name',
+            descPlaceholder: 'Optional description...',
+            enableImage: 'Enable this image',
+            syncHosts: 'Sync Hosts',
+            selectAll: 'Select All',
+            deselectAll: 'Deselect All',
+            editSyncHint: 'Deselected hosts will have the image removed on save, newly selected hosts will start syncing',
+            createSyncHint: 'Selected hosts will start syncing after save',
+            // Sync modal
+            selectTargetHosts: 'Select Target Hosts',
+            syncWarning: 'Image sync may take several minutes depending on image size and network speed',
+            startSync: 'Start Sync',
+        },
+        // Package management
+        packages: {
+            title: 'Package Management',
+            description: 'Configure instance specification templates',
+            create: 'Create Package',
+            noPackages: 'No packages',
+            createFirst: 'Create your first package',
+            noDesc: 'No description',
+            enabled: 'Enabled',
+            disabled: 'Disabled',
+            status: 'Status',
+            cpu: 'CPU',
+            memory: 'Memory',
+            disk: 'Disk',
+            cores: '~{n} cores',
+            networkNat: 'NAT',
+            networkIpv6: 'IPv6',
+            networkDual: 'Dual Stack',
+            nested: 'Nested Virtualization',
+            privileged: 'Privileged Container',
+            allNodes: 'All Nodes',
+            enable: 'Enable',
+            disable: 'Disable',
+            edit: 'Edit',
+            delete: 'Delete',
+            confirmDelete: 'Are you sure to delete package "{name}"?',
+            packageDeleted: 'Package deleted',
+            packageEnabled: 'Package enabled',
+            packageDisabled: 'Package disabled',
+            deleteFailed: 'Delete failed',
+            operationFailed: 'Operation failed',
+            // Form
+            createPackage: 'Create Package',
+            editPackage: 'Edit Package',
+            basicInfo: 'Basic Info',
+            name: 'Name',
+            namePlaceholder: 'Starter',
+            descLabel: 'Description',
+            descPlaceholder: 'Suitable for lightweight applications',
+            resourceLimits: 'Resource Limits',
+            maxCpuAllowance: 'Max CPU Allowance',
+            cpuAllowanceHint: 'Allowance ÷ 100 ≈ available cores, min 10, step 5',
+            maxMemory: 'Max Memory (MB)',
+            maxDisk: 'Max Disk (MB)',
+            networkAndScheduling: 'Network & Scheduling',
+            networkMode: 'Network Mode',
+            allNodesNoLimit: 'All Nodes (no limit)',
+            boundHosts: 'Bound Hosts',
+            mustBindHost: 'Must bind at least one host',
+            noHostsBound: 'No hosts bound',
+            noHostsAvailable: 'No hosts available',
+            advancedOptions: 'Advanced Options',
+            nestedLabel: 'Nested Virtualization',
+            nestedHint: 'Allow running Docker/VM inside container',
+            privilegedLabel: 'Privileged Container',
+            privilegedHint: 'Grant higher system privileges (security risk)',
+            enablePackage: 'Enable Package',
+            enablePackageHint: 'Users cannot select this package when disabled',
+            enterName: 'Please enter package name',
+            packageCreated: 'Package created',
+            packageUpdated: 'Package updated',
+            trafficLimit: 'Monthly Traffic Limit',
+            trafficLimitPlaceholder: 'Leave empty for unlimited',
+            trafficLimitHint: 'Unit: GB, leave empty for unlimited',
+            syncTraffic: 'Sync Traffic Limits',
+            confirmSyncTraffic: 'Sync all package traffic limits to their instances?',
+            syncTrafficSuccess: 'Synced traffic limits for {count} instances',
+            syncTrafficFailed: 'Sync failed',
+            // Package list
+            traffic: 'Monthly Traffic',
+            unlimited: 'Unlimited',
+            unlimitedPlaceholder: 'Leave empty for unlimited',
+            active: 'Active',
+            inactive: 'Archived',
+            archivedHint: 'Archived packages will not appear in the package selection when creating instances',
+            activeLabel: 'Active',
+            saveFailed: 'Save failed',
+            loadFailed: 'Failed to load package',
+            instanceMaxLimit: 'Instance max limit',
+        },
+        // Help management
+        helpManage: {
+            title: 'Help Documentation',
+            description: 'Create and manage help documents',
+            create: 'New Article',
+            noArticles: 'No articles',
+            createFirst: 'Create your first article',
+            edit: 'Edit',
+            delete: 'Delete',
+            confirmDelete: 'Are you sure to delete article "{title}"?',
+            articleDeleted: 'Article deleted',
+            deleteFailed: 'Delete failed',
+            // Tabs
+            articlesTab: 'Articles',
+            categoriesTab: 'Category Management',
+            // Categories
+            addCategory: 'Add Category',
+            noCategories: 'No categories, click "Add Category" to create',
+            categoryId: 'Category ID',
+            categoryIdHint: 'Only lowercase letters, numbers and hyphens allowed',
+            categoryName: 'Category Name',
+            categoryColor: 'Color',
+            categoryAdded: 'Category added',
+            categoryUpdated: 'Category updated',
+            categoryDeleted: 'Category deleted',
+            categoryInUse: 'This category has documents, cannot delete',
+            confirmDeleteCategory: 'Are you sure to delete category "{name}"?',
+            duplicateCategoryId: 'This category ID already exists',
+            invalidCategoryId: 'Category ID can only contain lowercase letters, numbers and hyphens',
+            fillCategoryIdAndName: 'Please fill in category ID and name',
+            // Articles table
+            articleTitleCol: 'Title',
+            categoryCol: 'Category',
+            statusCol: 'Status',
+            updatedAtCol: 'Updated At',
+            actionsCol: 'Actions',
+            totalArticles: '{count} articles',
+            prevPage: 'Previous',
+            nextPage: 'Next',
+            hide: 'Hide',
+            publish: 'Publish',
+            articleHidden: 'Article hidden',
+            articlePublished: 'Article published',
+            // Form
+            createArticle: 'New Article',
+            editArticle: 'Edit Article',
+            articleTitle: 'Title',
+            titlePlaceholder: 'Document title',
+            urlSlug: 'URL Slug',
+            urlSlugPlaceholder: 'getting-started',
+            urlSlugHint: 'Only lowercase letters, numbers and hyphens allowed',
+            category: 'Category',
+            sortOrder: 'Sort Order',
+            content: 'Content',
+            contentMarkdown: 'Content (Markdown)',
+            preview: 'Preview',
+            activeStatus: 'Publish Status',
+            published: 'Published',
+            draft: 'Draft',
+            pinned: 'Pinned',
+            notPinned: 'Not Pinned',
+            articleCreated: 'Article created',
+            articleUpdated: 'Article updated',
+            saveFailed: 'Save failed',
+            loadFailed: 'Load failed',
+            operationFailed: 'Operation failed',
+            fillRequired: 'Please fill in title, URL slug and content',
+            invalidSlug: 'URL slug can only contain lowercase letters, numbers and hyphens',
+            noTitle: 'No title',
+            // Markdown help
+            showMarkdownHelp: 'Show syntax help',
+            hideMarkdownHelp: 'Hide syntax help',
+            markdownHeading1: 'Heading 1',
+            markdownHeading2: 'Heading 2',
+            markdownBold: 'Bold text',
+            markdownItalic: 'Italic text',
+            markdownLink: 'Hyperlink',
+            markdownImage: 'Image',
+            markdownUnorderedList: 'Unordered list',
+            markdownOrderedList: 'Ordered list',
+            markdownInlineCode: 'Inline code',
+            markdownCodeBlock: 'Code block',
+            markdownQuote: 'Quote block',
+            markdownHr: 'Horizontal rule',
+            customAlerts: 'Custom Alerts:',
+            alertInfo: 'Info alert',
+            alertSuccess: 'Success alert',
+            alertWarning: 'Warning alert',
+            alertDanger: 'Danger alert',
+            alertNote: 'Note alert',
+        },
+        // OAuth config
+        oauth: {
+            title: 'OAuth Config',
+            description: 'Configure third-party login methods',
+            noProviders: 'No OAuth providers',
+            provider: 'Provider',
+            clientId: 'Client ID',
+            clientSecret: 'Client Secret',
+            enabled: 'Enabled',
+            disabled: 'Disabled',
+            enable: 'Enable',
+            disable: 'Disable',
+            edit: 'Edit',
+            save: 'Save',
+            saving: 'Saving...',
+            saveSuccess: 'Config saved',
+            saveFailed: 'Save failed',
+            notConfigured: 'Not configured. Go to',
+            developerConsole: 'Developer Console',
+            createOAuthApp: 'to create an OAuth app.',
+            callbackUrl: 'Callback URL',
+            usageGuide: 'Usage Guide',
+            step1: '1. Create an OAuth app in the developer console of the corresponding platform to get Client ID and Client Secret.',
+            step2: '2. Fill in the callback URL shown above in the OAuth app configuration.',
+            step3: '3. Enter the Client ID and Client Secret on this page and enable it.',
+            step4: '4. Users can bind OAuth accounts in their profile settings, then use quick login.',
+            warning: 'Note: Users must register an account and bind it first, cannot directly register with OAuth.',
+            configure: 'Configure',
+            enterClientId: 'Enter Client ID',
+            enterClientSecret: 'Enter Client Secret',
+            leaveEmptyUnchanged: '(leave empty to keep unchanged)',
+            enableLogin: 'Enable this login method',
+            enableLoginHint: 'Users can use this method for quick login when enabled',
+        },
+        // Payment Providers Management
+        paymentProviders: {
+            title: 'Payment Providers',
+            description: 'Configure and manage payment providers',
+            add: 'Add Provider',
+            create: 'Add Provider',
+            noProviders: 'No payment providers',
+            empty: 'No payment providers configured yet',
+            createFirst: 'Add the first payment provider',
+            providerName: 'Provider Name',
+            providerType: 'Provider Type',
+            displayName: 'Display Name',
+            description_label: 'Description',
+            status: 'Status',
+            statusActive: 'Active',
+            statusDisabled: 'Disabled',
+            statusTesting: 'Testing',
+            feeRate: 'Fee Rate',
+            feeFixed: 'Fixed Fee',
+            minAmount: 'Min Amount',
+            maxAmount: 'Max Amount',
+            sortOrder: 'Sort Order',
+            methods: 'Payment Methods',
+            paymentMethods: 'Supported Payment Methods',
+            configLabel: 'Config',
+            configPlaceholder: 'JSON format provider config',
+            edit: 'Edit',
+            delete: 'Delete',
+            name: 'Name',
+            namePlaceholder: 'Enter provider name',
+            nameRequired: 'Please enter provider name',
+            type: 'Type',
+            notImplemented: 'Pending implementation',
+            providerTypes: {
+                yipay: 'Yipay',
+                heleket: 'Heleket',
+                stripe: 'Stripe',
+                alipayDirect: 'Alipay Direct',
+                wechatDirect: 'WeChat Direct',
+                manual: 'Manual Recharge',
+            },
+            deleteConfirm: 'Confirm Delete',
+            confirmDelete: 'Are you sure to delete payment provider "{name}"?',
+            deleteWarning: 'Are you sure to delete payment provider "{name}"? This action cannot be undone.',
+            createSuccess: 'Payment provider created successfully',
+            updateSuccess: 'Payment provider updated successfully',
+            deleteSuccess: 'Payment provider deleted',
+            statusUpdated: 'Status updated',
+            statusUpdateSuccess: 'Status updated successfully',
+            statusUpdateFailed: 'Failed to update status',
+            saveFailed: 'Save failed',
+            createFailed: 'Failed to create payment provider',
+            updateFailed: 'Failed to update payment provider',
+            deleteFailed: 'Delete failed',
+            loadFailed: 'Load failed',
+            createProvider: 'Add Payment Provider',
+            editProvider: 'Edit Payment Provider',
+            displayNamePlaceholder: 'Name shown to users',
+            descPlaceholder: 'Optional provider description',
+            feeRateHint: 'e.g. 0.02 means 2% fee',
+            types: {
+                alipay: 'Alipay',
+                wechat: 'WeChat Pay',
+                stripe: 'Stripe',
+                paypal: 'PayPal',
+                usdt: 'USDT',
+                manual: 'Manual',
+            },
+            config: {
+                sdkVersion: 'SDK Version',
+                apiurl: 'API URL',
+                pid: 'Merchant ID',
+                key: 'Merchant Key',
+                platformPublicKey: 'Platform Public Key',
+                merchantPrivateKey: 'Merchant Private Key',
+                heleketMerchantUuid: 'Merchant UUID',
+                heleketApiKey: 'API Key',
+                heleketInvoiceCurrency: 'Invoice Fiat Currency',
+                heleketLifetime: 'Invoice Lifetime (Seconds)',
+                heleketApiUrlHint: 'Uses the official Heleket endpoint by default. Switch to a proxy or private gateway if needed.',
+                heleketCurrencyHint: 'The fiat currency used when creating Heleket invoices. CNY is the common choice.',
+                heleketLifetimeHint: 'Invoice lifetime used for Heleket. Defaults to 3600 seconds and is mirrored to the local order expiry.',
+                yipayVersionV1: 'V1 (MD5 Signature) - Legacy',
+                yipayVersionV2: 'V2 (RSA Signature) - New',
+                yipayVersionV1Hint: 'V1 uses MD5 signing and is intended for legacy Yipay deployments.',
+                yipayVersionV2Hint: 'V2 uses RSA signing and is intended for newer Rainbow Yipay deployments.',
+                yipayApiUrlPlaceholder: 'e.g. https://pay.example.com/',
+                yipayApiUrlHint: 'Payment API URL, ending with /.',
+                yipayPidPlaceholder: 'Merchant ID',
+                yipayKeyPlaceholder: 'Merchant Key',
+                yipayKeyHint: 'The merchant key issued by the Yipay platform.',
+                platformPublicKeyPlaceholder: 'Platform Public Key (RSA)',
+                platformPublicKeyHint: 'The public key provided by the platform for verifying returned signatures.',
+                merchantPrivateKeyPlaceholder: 'Merchant Private Key (RSA)',
+                merchantPrivateKeyHint: 'Your generated RSA private key used to sign requests.',
+                yipayMethodsHint: 'Choose at least one payment method supported by this provider.',
+                yipayMethodFeeHint: 'Fees are added to the payable amount based on the selected payment method. The recharge principal is still credited in full.',
+                yipayFeeFieldHint: 'Set Yipay fees per payment method above.',
+                heleketMethods: 'Common Currency Display',
+                heleketMethodsPlaceholder: 'USDT@TRON\nUSDT@BSC\nBTC\nETH',
+                heleketMethodsHint: 'Used only as an admin-side display/reference list. It does not restrict the final currency or network chosen on the Heleket payment page.',
+                instructions: 'Recharge Instructions',
+                instructionsPlaceholder: 'Enter instructions shown to users when recharging...',
+            },
+        },
+        // Billing Management (legacy key name)
+        billingManage: {
+            title: 'Billing Management',
+            description: 'Manage paid instances and billing records',
+            tabOverview: 'Overview',
+            tabInstances: 'Paid Instances',
+            tabRecords: 'Billing Records',
+            totalIncome: 'Total Income',
+            monthIncome: 'Monthly Income',
+            todayIncome: 'Today Income',
+            totalRefund: 'Total Refund',
+            paidInstances: 'Paid Instances',
+            activeInstances: 'Active Instances',
+            searchPlaceholder: 'Search instances...',
+            instanceId: 'Instance ID',
+            instanceName: 'Name',
+            user: 'User',
+            plan: 'Plan',
+            expiresAt: 'Expires At',
+            status: 'Status',
+            actions: 'Actions',
+            noInstances: 'No paid instances',
+            suspend: 'Suspend',
+            unsuspend: 'Unsuspend',
+            extend: 'Extend',
+            refund: 'Refund',
+            confirmSuspend: 'Are you sure to suspend instance "{name}"?',
+            confirmUnsuspend: 'Are you sure to unsuspend instance "{name}"?',
+            suspendSuccess: 'Instance suspended',
+            unsuspendSuccess: 'Instance unsuspended',
+            extendTitle: 'Extend Instance',
+            extendDays: 'Extend Days',
+            extendReason: 'Extend Reason',
+            freeExtend: 'Free Extend',
+            freeExtendHint: 'No deduction from user balance when checked',
+            extendSuccess: 'Instance extended',
+            extendFailed: 'Extend failed',
+            refundTitle: 'Refund Instance',
+            refundAmount: 'Refund Amount',
+            refundReason: 'Refund Reason',
+            refundSuccess: 'Refund successful',
+            refundFailed: 'Refund failed',
+            recordId: 'Record ID',
+            recordType: 'Type',
+            amount: 'Amount',
+            period: 'Period',
+            remark: 'Remark',
+            createdAt: 'Time',
+            noRecords: 'No billing records',
+            userBalance: 'User Balance',
+            adjustBalance: 'Adjust Balance',
+            giftBalance: 'Gift Balance',
+            adjustTitle: 'Adjust User Balance',
+            giftTitle: 'Gift Balance',
+            adjustAmount: 'Adjust Amount',
+            giftAmount: 'Gift Amount',
+            adjustRemark: 'Adjust Reason',
+            giftRemark: 'Gift Remark',
+            adjustHint: 'Positive to add, negative to deduct',
+            adjustSuccess: 'Balance adjusted successfully',
+            giftSuccess: 'Balance gifted successfully',
+            operationFailed: 'Operation failed',
+        },
+        // Billing Management (new key name, matching component)
+        billing: {
+            title: 'Billing Management',
+            description: 'Manage paid instances and billing records',
+            loadFailed: 'Failed to load billing data',
+            loadInstancesFailed: 'Failed to load instances',
+            loadRecordsFailed: 'Failed to load billing records',
+            // Tab labels
+            tabs: {
+                overview: 'Overview',
+                instances: 'Paid Instances',
+                records: 'Billing Records',
+                rechargeRecords: 'Recharge Records',
+                affConversions: 'AFF Conversions',
+                paymentProviders: 'Payment Providers',
+            },
+            // Overview statistics
+            totalRevenue: 'Total Revenue',
+            thisMonthRevenue: 'This Month',
+            todayRevenue: 'Today',
+            totalRefunds: 'Total Refunds',
+            paidInstances: 'Paid Instances',
+            activeInstances: 'Active Instances',
+            suspendedInstances: 'Suspended Instances',
+            expiringInstances: 'Expiring Soon',
+            netRevenueLabel: 'Net Revenue',
+            thisMonthVsLastMonth: 'This Month / Last Month',
+            hostedRevenueShare: 'Hosted Revenue Share',
+            revenueBreakdownTitle: 'Revenue Mix',
+            directRevenue: 'Direct Revenue',
+            hostedRevenue: 'Hosted Revenue',
+            instanceHealthTitle: 'Instance Health',
+            affOverviewTitle: 'AFF Overview',
+            rechargeLabel: 'Recharge',
+            revenueLabel: 'Revenue',
+            overviewPeriods: {
+                total: 'Overview',
+                thisMonth: 'This Month',
+                today: 'Today',
+            },
+            // Instance list
+            allStatus: 'All Status',
+            allHosts: 'All Hosts',
+            showExpiring: 'Show expiring only',
+            showDateColumns: 'Show date columns',
+            searchPlaceholder: 'Search user/host/instance/plan/package...',
+            user: 'User',
+            host: 'Host',
+            plan: 'Plan',
+            package: 'Package',
+            price: 'Price',
+            expiresAt: 'Expires At',
+            purchaseDate: 'Purchase Date',
+            remainingDays: 'Remaining Days',
+            expired: 'Expired',
+            days: 'days',
+            instanceType: 'Type',
+            instanceName: 'Instance Name',
+            instanceStatus: 'Status',
+            noInstances: 'No paid instances',
+            viewInstance: 'View',
+            autoRenew: 'Auto Renew',
+            // Hosting type
+            hostingType: 'Hosting',
+            direct: 'Direct',
+            hosted: 'Hosted',
+            cycle: 'Cycle',
+            cycleMonths: '{months} month(s)',
+            perPage: 'Per page',
+            totalCount: '{count} items',
+            // Actions
+            suspend: 'Suspend',
+            unsuspend: 'Unsuspend',
+            extend: 'Extend',
+            refund: 'Refund',
+            deleteRefund: 'Delete & Refund',
+            // Action modals
+            suspendTitle: 'Suspend Instance',
+            unsuspendTitle: 'Unsuspend Instance',
+            extendTitle: 'Extend Instance',
+            refundTitle: 'Refund',
+            deleteRefundTitle: 'Delete & Refund',
+            targetInstance: 'Target Instance',
+            reason: 'Reason',
+            reasonPlaceholder: 'Enter reason...',
+            extendDays: 'Extend Days',
+            freeExtend: 'Free extend (no charge)',
+            refundAmount: 'Refund Amount',
+            refundReasonPlaceholder: 'Enter refund reason...',
+            refundReasonRequired: 'Please enter refund reason',
+            // Delete and refund related
+            deleteRefundWarning: 'Warning: This operation will permanently delete the instance and all its data (snapshots, backups, port mappings, etc.). This action cannot be undone!',
+            refundTypeLabel: 'Refund Type',
+            refundTypeRemaining: 'Refund by remaining value (calculated by remaining days)',
+            refundTypeFull: 'Full refund (refund all consumed amount)',
+            deleteRefundReasonPlaceholder: 'Enter delete reason...',
+            deleteRefundReasonRequired: 'Please enter delete reason',
+            deleteRefundSuccess: 'Instance deleted and refunded',
+            databaseOnlyDelete: 'Database Only Delete',
+            deleteRefundDatabaseOnlySuccess: 'Instance deleted from database',
+            // Apply discount
+            applyDiscount: 'Apply Discount',
+            applyDiscountTitle: 'Apply Renewal Discount',
+            applyDiscountHint: 'After entering the AFF code, this instance will automatically receive a 5% discount on future renewals, and the code creator will also receive renewal commissions.',
+            affCodeLabel: 'AFF Code',
+            affCodePlaceholder: 'Enter AFF code...',
+            affCodeRequired: 'Please enter AFF code',
+            applyDiscountSuccess: 'Renewal discount applied successfully',
+                        // Update price
+                        updatePrice: 'Update Price',
+                        owner: 'Owner',
+                        currentPrice: 'Current Price',
+                        newPrice: 'New Price',
+                        enterNewPrice: 'Enter new price',
+                        priceHint: 'This is the price per billing cycle, changes will affect renewal fees',
+                        settleBalance: 'Settle balance (charge/refund based on remaining days)',
+                        needPay: 'Need to pay',
+                        willRefund: 'Will refund',
+                        priceDiffHint: 'Calculated based on {days} remaining days, will automatically process user balance',
+                        noSettleHint: 'Without balance settlement, only future renewal price will change, current cycle unaffected',
+                        affDiscount: 'AFF Discount',
+                        actualRenewPrice: 'Actual Renew Price',
+                        affAppliedHint: 'This instance has a promo code applied, {discount}% discount on renewal. Price difference is calculated based on discounted price.',
+                        newActualPrice: 'New Actual Price',
+            // Upgrade plan
+            upgradePlan: 'Upgrade',
+            upgradePlanTitle: 'Upgrade Plan',
+            currentPlan: 'Current Plan',
+            planName: 'Plan Name',
+            monthlyPrice: 'Monthly Price',
+            memoryLabel: 'Memory',
+            diskLabel: 'Disk',
+            selectNewPlan: 'Select New Plan',
+            noAvailablePlans: 'No plans available for upgrade (new plan monthly price must be higher)',
+            priceDifference: 'Price Difference',
+            priceDifferenceHint: 'Calculated based on remaining days, will be deducted from user balance',
+            userBalance: 'User Balance',
+            insufficientBalance: 'Insufficient user balance, cannot complete upgrade',
+            confirmUpgrade: 'Confirm Upgrade',
+            monthly: 'Monthly',
+            quarterly: 'Quarterly',
+            semiAnnual: 'Semi-Annual',
+            yearly: 'Yearly',
+            month: 'month',
+            months: 'months',
+            // Action results
+            suspendSuccess: 'Instance suspended',
+            unsuspendSuccess: 'Instance unsuspended',
+            extendSuccess: 'Instance extended',
+            refundSuccess: 'Refund successful',
+            batchUpdatePrice: 'Batch Update Price',
+            batchSelectedCount: '{count} selected',
+            selectAllCurrentPage: 'Select current page instances',
+            selectInstance: 'Select instance',
+            batchPriceNoSelection: 'Select instances first',
+            batchSelected: 'Selected',
+            batchPreviewChanged: 'Will update',
+            batchPreviewFailed: 'Failed',
+            batchPriceHint: 'Applies one cycle price to all selected instances. Preview calculates each instance by its cycle, remaining days, and AFF discount.',
+            batchTotalCharge: 'Total charge',
+            batchTotalRefund: 'Total refund',
+            batchNetAmount: 'Net impact',
+            batchPreviewBlocked: 'This preview has failed items or insufficient user balance and cannot be submitted.',
+            batchUserImpact: 'User balance impact',
+            batchPreviewDetails: 'Preview details',
+            batchPreviewWaiting: 'Preview will be generated after entering a price.',
+            batchPriceStatusReady: 'Ready',
+            batchPriceStatusUnchanged: 'No change',
+            batchPriceStatusFailed: 'Failed',
+            result: 'Result',
+            // Billing records
+            recordType: 'Type',
+            recordTypes: {
+                newPurchase: 'Purchase',
+                renew: 'Renewal',
+                upgrade: 'Upgrade',
+                downgrade: 'Downgrade',
+                refund: 'Refund',
+                transfer_fee: 'Transfer Fee',
+            },
+            amount: 'Amount',
+            instance: 'Instance',
+            remark: 'Remark',
+            time: 'Time',
+            noRecords: 'No billing records',
+            // Recharge statistics
+            totalRecharge: 'Total Recharge',
+            thisMonthRecharge: 'This Month Recharge',
+            todayRecharge: 'Today Recharge',
+            orders: 'orders',
+            // AFF commission statistics
+            totalAffCommission: 'Total AFF Commission',
+            thisMonthAff: 'This Month AFF',
+            affConverted: 'Converted Amount',
+            affPendingConvert: 'Pending Convert',
+            // Recharge records
+            loadRechargeRecordsFailed: 'Failed to load recharge records',
+            noRechargeRecords: 'No recharge records',
+            rechargeOrderNo: 'Order No.',
+            creditAmount: 'Credit Amount',
+            actualAmount: 'Credited',
+            estimatedAmount: 'Estimated Credit',
+            payChannel: 'Pay Channel',
+            paymentDetails: 'Payment Details',
+            paymentUuid: 'UUID:',
+            paymentTxid: 'TxID:',
+            rechargeStatusLabel: 'Status',
+            tradeNo: 'Trade No.',
+            sync: 'Sync',
+            syncSuccess: 'Sync successful, recharge completed',
+            rechargeStatus: {
+                pending: 'Pending',
+                completed: 'Completed',
+                cancelled: 'Cancelled',
+                failed: 'Failed',
+            },
+        },
+    },
+
+    // Error pages
+    error: {
+        notFound: 'Page Not Found',
+        notFoundDesc: 'Sorry, the page you visited does not exist',
+        backHome: 'Back to Home',
+        serverError: 'Server Error',
+        networkError: 'Network Error',
+    },
+
+    // Logs
+    logs: {
+        title: 'System Logs',
+        module: 'Module',
+        allModules: 'All Modules',
+        search: 'Search',
+        searchPlaceholder: 'Search username, action or content...',
+        reset: 'Reset',
+        time: 'Time',
+        user: 'User',
+        action: 'Action',
+        content: 'Content',
+        result: 'Result',
+        system: 'System',
+        loading: 'Loading...',
+        noLogs: 'No logs',
+        loadFailed: 'Failed to load logs',
+        loadModulesFailed: 'Failed to load modules',
+        totalRecords: '{total} records, page {page} / {totalPages}',
+        success: 'Success',
+        failed: 'Failed',
+        expand: 'Expand',
+        collapse: 'Collapse',
+    },
+
+    // Help
+    help: {
+        title: 'Help Center',
+        search: 'Search help...',
+        description: 'View guides and FAQs',
+        backToHelp: 'Back to Help Center',
+        updatedAt: 'Updated on {date}',
+        all: 'All',
+        noArticles: 'No help articles',
+        articleNotFound: 'Article not found or has been deleted',
+        totalArticles: '{count} articles',
+        categories: {
+            general: 'General',
+            gettingStarted: 'Getting Started',
+            instances: 'Instances',
+            networking: 'Networking',
+            billing: 'Billing',
+            faq: 'FAQ',
+        },
+    },
+
+    // Log modules translation
+    logModules: {
+        security: 'Security',
+        instance: 'Instance',
+        snapshot: 'Snapshot',
+        backup: 'Backup',
+        image: 'Image',
+        host: 'Host',
+        package: 'Package',
+        user: 'User',
+        personal: 'Personal',
+        ssh_key: 'SSH Key',
+        notification: 'Notification',
+        system: 'System',
+        auth: 'Auth',
+        storage: 'Storage',
+        // Legacy Chinese module names compatibility
+        '登录操作': 'Login',
+        '安全事件': 'Security',
+        '实例操作': 'Instance',
+        '快照操作': 'Snapshot',
+        '备份操作': 'Backup',
+        '镜像操作': 'Image',
+        '节点操作': 'Host',
+        '节点组操作': 'Node Group',
+        '套餐操作': 'Package',
+        '用户管理': 'User',
+        '个人设置': 'Personal',
+        '通知设置': 'Notification',
+        '系统配置': 'System',
+        '认证操作': 'Auth',
+        '远程存储': 'Storage',
+    },
+
+    // Log actions translation
+    logActions: {
+        // Security events
+        'login_success': 'Login Success',
+        'login_failed': 'Login Failed',
+        'logout': 'Logout',
+        'register_success': 'Register Success',
+        'rate_limit_exceeded': 'Rate Limit Exceeded',
+        'invalid_invite_code': 'Invalid Invite Code',
+        'suspicious_activity': 'Suspicious Activity',
+        'permission_denied': 'Permission Denied',
+        'unauthorized_access': 'Unauthorized Access',
+        'admin_action': 'Admin Action',
+        // Instance operations
+        'instance.create': 'Create Instance',
+        'instance.delete': 'Delete Instance',
+        'instance.start': 'Start Instance',
+        'instance.stop': 'Stop Instance',
+        'instance.restart': 'Restart Instance',
+        'instance.rebuild': 'Rebuild System',
+        'instance.recreate': 'Recreate Instance',
+        'instance.change_host': 'Change Host',
+        'instance.cloud_init_manual_complete': 'Manually Complete Init Check',
+        'instance.update_quota': 'Update Instance Quota',
+        'instance.rename': 'Rename Instance',
+        // Port mapping
+        'port.add': 'Add Port Mapping',
+        'port.delete': 'Delete Port Mapping',
+        // Snapshot operations
+        'snapshot.create': 'Create Snapshot',
+        'snapshot.delete': 'Delete Snapshot',
+        'snapshot.restore': 'Restore Snapshot',
+        // Backup operations
+        'backup.create': 'Create Backup',
+        'backup.delete': 'Delete Backup',
+        'backup.export': 'Export Backup',
+        // Image operations
+        'image.sync': 'Sync Image',
+        'image.delete': 'Delete Image',
+        'image.create': 'Create Image',
+        'image.update': 'Update Image',
+        // Host operations
+        'host.create': 'Add Host',
+        'host.update': 'Update Host',
+        'host.delete': 'Delete Host',
+        'host.test': 'Test Host',
+        // Node group operations
+        // Package operations
+        'package.create': 'Create Package',
+        'package.update': 'Update Package',
+        'package.delete': 'Delete Package',
+        // User management
+        'user.ban': 'Ban User',
+        'user.unban': 'Unban User',
+        'user.delete': 'Delete User',
+        'user.update_quota': 'Update User Quota',
+        'user.revoke_sessions': 'Revoke User Sessions',
+        // Personal settings
+        'profile.update': 'Update Profile',
+        'password.change': 'Change Password',
+        // SSH key
+        'ssh_key.add': 'Add SSH Key',
+        'ssh_key.delete': 'Delete SSH Key',
+        // Notification settings
+        'notification.add': 'Add Notification Channel',
+        'notification.delete': 'Delete Notification Channel',
+        // Security settings
+        '2fa.setup': 'Setup 2FA',
+        '2fa.enable': 'Enable 2FA',
+        '2fa.disable': 'Disable 2FA',
+        '2fa.recovery_reset': 'Reset Recovery Codes',
+        // Auth operations
+        'session.revoke': 'Revoke Session',
+        'session.revoke_all': 'Revoke All Sessions',
+        // System config
+        'system.config_update': 'Update System Config',
+        // Help articles
+        'help.create': 'Create Help Article',
+        'help.update': 'Update Help Article',
+        'help.delete': 'Delete Help Article',
+        // Backup upload operations
+        'backup.upload': 'Upload Backup',
+        'backup.upload.queue': 'Queue Backup Upload',
+        'backup.upload.cancel': 'Cancel Backup Upload',
+        // Backup restore operations
+        'backup.restore': 'Restore Backup',
+        'backup.restore.rollback': 'Rollback Restore',
+        'backup.restore.cancel': 'Cancel Restore',
+        // Storage config operations
+        'storage.create': 'Create Storage Config',
+        'storage.update': 'Update Storage Config',
+        'storage.delete': 'Delete Storage Config',
+        // AFF Referral Program
+        'aff.create_code': 'Create Promo Code',
+        'aff.convert_request': 'Request AFF Conversion',
+        'aff.approve_convert': 'Approve AFF Conversion',
+        'aff.reject_convert': 'Reject AFF Conversion',
+    },
+
+    // Log results translation
+    logResults: {
+        success: 'Success',
+        failed: 'Failed',
+        warning: 'Warning',
+    },
+
+    // API error codes translation
+    errors: {
+        // Common errors
+        INVALID_ID: 'Invalid ID',
+        NOT_FOUND: 'Resource not found',
+        UNAUTHORIZED: 'Unauthorized',
+        FORBIDDEN: 'Access denied',
+        ADMIN_REQUIRED: 'Admin privileges required',
+        // User errors
+        USER_NOT_FOUND: 'User not found',
+        USER_EXISTS: 'Username already exists',
+        CANNOT_MODIFY_SELF: 'Cannot modify your own status',
+        CANNOT_DELETE_SELF: 'Cannot delete yourself',
+        CANNOT_BAN_ADMIN: 'Cannot ban admin account',
+        CANNOT_DELETE_ADMIN: 'Cannot delete admin account',
+        USER_HAS_INSTANCES: 'User has instances, please delete them first',
+        // Auth errors
+        INVALID_CREDENTIALS: 'Invalid username or password',
+        ACCOUNT_BANNED: 'Account has been disabled',
+        TOO_MANY_ATTEMPTS: 'Too many login attempts, please try again later',
+        REGISTRATION_DISABLED: 'Registration is currently closed',
+        INVALID_INVITE_CODE: 'Invalid or used invite code',
+        INVITE_CODE_EXPIRED: 'Invite code has expired',
+        INVALID_2FA_CODE: 'Invalid verification code or recovery code',
+        TWO_FA_REQUIRED: 'Two-factor authentication required',
+        TWO_FA_ALREADY_ENABLED: '2FA is already enabled, please disable it first',
+        TWO_FA_NOT_ENABLED: '2FA is not enabled',
+        REFRESH_TOKEN_MISSING: 'Refresh token missing',
+        REFRESH_TOKEN_INVALID: 'Refresh token invalid or expired',
+        SESSION_NOT_FOUND: 'Session not found',
+        // Validation errors
+        INVALID_EMAIL: 'Please enter a valid email address',
+        EMAIL_CONTAINS_ILLEGAL: 'Email contains illegal characters',
+        USERNAME_CONTAINS_ILLEGAL: 'Username contains illegal characters',
+        PASSWORD_TOO_WEAK: 'Password is too weak',
+        INVALID_SSH_KEY: 'Invalid SSH public key format',
+        SSH_KEY_EXISTS: 'This SSH key has already been added',
+        INVALID_NAME: 'Invalid name format',
+        // Instance errors
+        INSTANCE_NOT_FOUND: 'Instance not found',
+        INSTANCE_ALREADY_RUNNING: 'Instance is already running',
+        INSTANCE_ALREADY_STOPPED: 'Instance is already stopped',
+        INSTANCE_STATUS_INVALID: 'Instance status does not allow this operation',
+        INSTANCE_SUSPENDED: 'Instance is suspended and cannot perform this operation',
+        INSTANCE_NOT_SUSPENDED: 'Instance is not in suspended status',
+        INSTANCE_SUSPENDED_EXPIRED: 'Instance is suspended due to expiration, please renew to unsuspend',
+        INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED: 'Destroy is unavailable in the current monthly traffic cycle because usage has reached 5G',
+        // Host errors
+        HOST_NOT_FOUND: 'Host not found',
+        HOST_OFFLINE: 'Host is offline',
+        HOST_HAS_INSTANCES: 'Host has instances, please delete them first',
+        HOST_ALREADY_OFFICIAL: 'Host is already official',
+        HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT: 'Takeover blocked because some packages would lose all bound hosts',
+        NO_AVAILABLE_HOSTS: 'No available hosts',
+        // Image errors
+        IMAGE_NOT_FOUND: 'Image not found',
+        IMAGE_SYNCED_ON_HOSTS: 'Image is synced on hosts, please delete from hosts first',
+        IMAGE_TYPE_MISMATCH: 'Selected image is not compatible with package instance type',
+        // Package errors
+        PACKAGE_NOT_FOUND: 'Package not found',
+        PACKAGE_IN_USE: 'Package is in use by instances',
+        // Quota errors
+        QUOTA_EXCEEDED: 'Quota exceeded',
+        QUOTA_CPU_EXCEEDED: 'CPU quota exceeded',
+        QUOTA_MEMORY_EXCEEDED: 'Memory quota exceeded',
+        QUOTA_DISK_EXCEEDED: 'Disk quota exceeded',
+        QUOTA_INSTANCE_EXCEEDED: 'Instance quota exceeded',
+        QUOTA_PORT_EXCEEDED: 'Port quota exceeded',
+        QUOTA_SNAPSHOT_EXCEEDED: 'Snapshot quota exceeded',
+        QUOTA_BACKUP_EXCEEDED: 'Backup quota exceeded',
+        QUOTA_NOT_ALLOCATED: 'Quota not allocated',
+        // Snapshot errors
+        SNAPSHOT_NOT_FOUND: 'Snapshot not found',
+        SNAPSHOT_RESTORE_REQUIRES_STOP: 'Please stop the instance before restoring snapshot',
+        // Backup errors
+        BACKUP_NOT_FOUND: 'Backup not found',
+        BACKUP_NOT_READY: 'Backup is not ready for export',
+        EXPORT_TASK_NOT_FOUND: 'Export task not found or expired',
+        EXPORT_TASK_EXPIRED: 'Export task has expired',
+        // Port mapping errors
+        PORT_IN_USE: 'Port is already in use',
+        PORT_OUT_OF_RANGE: 'Port is out of allowed range',
+        PORT_MAPPING_NOT_FOUND: 'Port mapping not found',
+        // Node group errors
+        NODE_GROUP_NOT_FOUND: 'Node group not found',
+        NODE_GROUP_HAS_HOSTS: 'Node group has hosts, please remove them first',
+        NODE_GROUP_HAS_PACKAGES: 'Node group is used by packages',
+        // Notification errors
+        NOTIFICATION_CHANNEL_NOT_FOUND: 'Notification channel not found',
+        // Help errors
+        ARTICLE_NOT_FOUND: 'Article not found',
+        SLUG_EXISTS: 'Slug already exists',
+        // Invite code errors
+        INVITE_CODE_USED: 'Invite code has been used',
+        INVITE_CODE_NOT_FOUND: 'Invite code not found',
+        // OAuth errors
+        OAUTH_PROVIDER_DISABLED: 'This login method has been disabled',
+        OAUTH_ALREADY_BOUND: 'This account is already bound to another user',
+        OAUTH_NOT_BOUND: 'Account not bound',
+        OAUTH_TOKEN_ERROR: 'Failed to get authorization',
+        // SSH Key errors
+        SSH_KEY_NOT_FOUND: 'SSH key not found',
+        SSH_KEY_REQUIRED: 'SSH key is required, please add one in settings first',
+        SSH_KEY_NOT_OWNED: 'SSH key not found or does not belong to this user',
+        // Package errors (additional)
+        PACKAGE_UNAVAILABLE: 'Package is unavailable or discontinued',
+        CANNOT_CREATE_OWN_PAID_PACKAGE: 'Cannot create instance with your own paid package',
+        // Host resource errors
+        HOST_UNAVAILABLE: 'Selected host is unavailable or has insufficient resources',
+        HOST_NO_ONLINE: 'No online hosts available, please test connection in node management',
+        HOST_RESOURCES_NOT_SYNCED: 'Host resources not synced, please click "Test Connection" in node management',
+        HOST_NODE_GROUP_NO_HOSTS: 'No available hosts in the required node group',
+        HOST_RESOURCES_INSUFFICIENT: 'All hosts have insufficient resources, please try later or choose another package',
+        HOST_NAME_EXISTS: 'Host name already exists',
+        HOST_ADDRESS_EXISTS: 'Host connection address already exists',
+        HOST_ADDRESS_UNRESOLVABLE: 'The panel could not resolve this host connection address',
+        HOST_CERT_NOT_CONFIGURED: 'Please configure certificate path first',
+        HOST_INVALID_CPU_MAX: 'CPU max allowance cannot be negative',
+        HOST_INVALID_MEMORY_MAX: 'Memory max cannot be negative or less than 256MB',
+        HOST_INVALID_IPV6_MODE: 'IPv6 mode must be 1 (route), 2 (NAT), or 3 (disabled)',
+        HOST_IPV6_ROUTE_REQUIRES_CONFIG: 'IPv6 route mode requires subnet and parent interface configuration',
+        HOST_CPU_BELOW_USED: 'CPU max allowance cannot be less than current usage by instances',
+        HOST_MEMORY_BELOW_USED: 'Memory max cannot be less than current usage by instances',
+        // Instance operation errors
+        INSTANCE_STOP_REQUIRED: 'Please stop the instance first',
+        INSTANCE_IMAGE_REQUIRED: 'Please specify an image',
+        INSTANCE_IMAGE_UNAVAILABLE: 'Selected image is not available on this host',
+        INSTANCE_REBUILD_FAILED: 'Instance rebuild failed',
+        INSTANCE_IPV6_NOT_SUPPORTED: 'Only NAT + IPv6 mode instances support IPv6 reassignment',
+        INSTANCE_IPV6_REASSIGN_FAILED: 'Failed to reassign IPv6 address',
+        INSTANCE_NO_IPV4: 'VM instance requires IPv4 address for port mapping',
+        HOST_NO_IPV6_SUBNET: 'Host has no IPv6 subnet configured',
+        IPV6_POOL_EXHAUSTED: 'IPv6 address pool exhausted, please try again later',
+        IPV6_REASSIGN_COOLDOWN: 'IPv6 can only be reassigned once per day, please try again later',
+        // Port mapping errors (additional)
+        PORT_MAPPING_NAT_ONLY: 'Port mapping is only supported in NAT or dual-stack mode',
+        PORT_NO_AVAILABLE: 'No available ports, please contact administrator',
+        PORT_CONFLICT: 'Port is already in use, please use another port',
+        PORT_MAPPING_INVALID_ID: 'Invalid instance or port mapping ID',
+        // Image errors (additional)
+        IMAGE_CREATE_FAILED: 'Image creation failed',
+        IMAGE_UPDATE_FAILED: 'Image update failed',
+        IMAGE_INVALID_HOST_ID: 'Invalid image or host ID',
+        // Backup errors (additional)
+        BACKUP_CREATE_FAILED: 'Backup creation failed',
+        BACKUP_DELETE_FAILED: 'Backup deletion failed',
+        BACKUP_EXPORT_FAILED: 'Backup export failed',
+        BACKUP_QUOTA_NOT_SET: 'Please set backup quota for this instance first',
+        BACKUP_EXPORT_STATUS_INVALID: 'Export task status is invalid',
+        // Config errors
+        CONFIG_INVALID_KEY: 'Invalid configuration key',
+        CONFIG_INVALID_VALUE: 'Configuration value must be a non-negative integer',
+        // Snapshot errors (additional)
+        SNAPSHOT_QUOTA_NOT_SET: 'Please set snapshot quota for this instance first',
+        // Package errors (additional)
+        PACKAGE_HAS_INSTANCES: 'Package is in use by instances and cannot be deleted',
+        // Resource limit errors
+        RESOURCE_CPU_EXCEEDS_PACKAGE: 'CPU configuration exceeds package limit',
+        RESOURCE_MEMORY_EXCEEDS_PACKAGE: 'Memory configuration exceeds package limit',
+        RESOURCE_DISK_EXCEEDS_PACKAGE: 'Disk configuration exceeds package limit',
+        // User quota errors (detailed)
+        QUOTA_CPU_INSUFFICIENT: 'CPU quota insufficient',
+        QUOTA_MEMORY_INSUFFICIENT: 'Memory quota insufficient',
+        QUOTA_DISK_INSUFFICIENT: 'Disk quota insufficient',
+        QUOTA_INSTANCE_LIMIT_REACHED: 'Instance limit reached',
+        QUOTA_HOST_LIMIT_REACHED: 'Host limit reached',
+        QUOTA_FRIEND_LIMIT_REACHED: 'Your friend limit reached',
+        QUOTA_PORT_BELOW_USED: 'Port quota cannot be less than current usage',
+        QUOTA_SNAPSHOT_BELOW_USED: 'Snapshot quota cannot be less than current usage',
+        QUOTA_BACKUP_BELOW_USED: 'Backup quota cannot be less than current usage',
+        QUOTA_PORT_TOTAL_EXCEEDED: 'Total port quota exceeds user limit',
+        QUOTA_SNAPSHOT_TOTAL_EXCEEDED: 'Total snapshot quota exceeds user limit',
+        QUOTA_BACKUP_TOTAL_EXCEEDED: 'Total backup quota exceeds user limit',
+        // Image errors (additional)
+        IMAGE_NOT_SYNCED: 'Image not synced to selected host',
+        IMAGE_SYNCING_CANNOT_DELETE: 'Image is syncing on hosts and cannot be deleted',
+        IMAGE_NO_HOSTS: 'No available hosts, please add hosts first',
+        // Port errors (additional)
+        PORT_RANGE_INVALID: 'Port must be within allowed range',
+        // Snapshot policy errors
+        SNAPSHOT_MANUAL_FULL: 'Manual snapshots have reached instance quota, cannot enable auto snapshot',
+        SNAPSHOT_RETENTION_EXCEEDS: 'Retention count exceeds available quota',
+        // Backup policy errors
+        BACKUP_MANUAL_FULL: 'Manual backups have reached instance quota, cannot enable auto backup',
+        BACKUP_RETENTION_EXCEEDS: 'Retention count exceeds available quota',
+        // OAuth errors (additional)
+        OAUTH_NOT_ENABLED: 'This OAuth provider is not enabled',
+        // Storage pool errors
+        STORAGE_POOL_NOT_CONFIGURED: 'No system disk storage pool configured on host, cannot create instance',
+        // Friends system errors
+        CANNOT_ADD_SELF: 'Cannot add yourself as a friend',
+        ALREADY_FRIENDS: 'You are already friends',
+        FRIEND_REQUEST_PENDING: 'Friend request is already pending',
+        FRIEND_REQUEST_NOT_FOUND: 'Friend request not found',
+        FRIEND_REQUEST_NOT_PENDING: 'Request has already been processed',
+        FRIENDSHIP_NOT_FOUND: 'Friendship not found',
+        TARGET_FRIEND_QUOTA_FULL: 'Target user friend quota is full, cannot add',
+        // Package share errors
+        CANNOT_SHARE_TO_SELF: 'Cannot share to yourself',
+        PACKAGE_ALREADY_SHARED: 'Package is already shared to this user',
+        SHARE_NOT_FOUND: 'Share record not found',
+        NOT_FRIENDS: 'Target user is not your friend',
+        SHARE_QUOTA_CPU_EXCEEDED: 'Shared package CPU quota exceeded',
+        SHARE_QUOTA_MEMORY_EXCEEDED: 'Shared package memory quota exceeded',
+        SHARE_QUOTA_INSTANCES_EXCEEDED: 'Shared package instance limit exceeded',
+        // Email verification errors
+        EMAIL_VERIFICATION_DISABLED: 'Email verification is not enabled',
+        EMAIL_CODE_REQUIRED: 'Email verification code is required',
+        INVALID_EMAIL_CODE: 'Invalid or expired verification code',
+        TOO_MANY_VERIFICATION_REQUESTS: 'Too many verification requests, please try again later',
+        EMAIL_SEND_FAILED: 'Failed to send verification email, please try again later',
+        EMAIL_ALREADY_REGISTERED: 'This email address is already in use',
+        EMAIL_DOMAIN_NOT_ALLOWED: 'This email domain is not allowed for registration, please use another email',
+        // Transfer errors
+        TRANSFER_NOT_FOUND: 'Transfer request not found',
+        TRANSFER_TO_SELF: 'Cannot transfer to yourself',
+        TRANSFER_TO_BANNED: 'Cannot transfer to a banned user',
+        TRANSFER_ALREADY_PENDING: 'This instance already has a pending transfer request',
+        TRANSFER_NOT_PENDING: 'Transfer request is not pending',
+        TRANSFER_INVALID_STATUS: 'Instance status does not allow transfer',
+        TRANSFER_QUOTA_NOT_FOUND: 'Target user quota not found',
+        TRANSFER_QUOTA_INSUFFICIENT: 'Target user quota insufficient',
+        TRANSFER_INSTANCE_LOCKED: 'Instance is locked due to pending transfer',
+        TRANSFER_HOST_DISABLED: 'Transfer is disabled for this host',
+        TRANSFER_INSUFFICIENT_BALANCE: 'Insufficient balance for transfer fee',
+        // Transfer process errors
+        INSTANCE_MUST_BE_STOPPED: 'Instance must be stopped before transfer',
+        INCUS_RENAME_FAILED: 'Failed to rename instance on host',
+        DATABASE_ERROR: 'Database operation failed, please try again',
+        // Sensitive operation verification errors
+        VERIFICATION_REQUIRED: 'This operation requires verification',
+        INVALID_CODE: 'Verification code is invalid or expired',
+        NO_NOTIFICATION_CHANNEL: 'No notification channel configured',
+        EMAIL_NOT_CONFIGURED: 'Email not configured, cannot send verification code',
+        SEND_FAILED: 'Failed to send verification code',
+        // Checkin errors
+        CHECKIN_NO_INSTANCE: 'You need at least one instance to check in',
+        CHECKIN_ALREADY_TODAY: 'You have already checked in today',
+        REDEEM_ALREADY_TODAY: 'You have already redeemed a code today',
+        REDEEM_CODE_NOT_FOUND: 'Redeem code not found',
+        REDEEM_CODE_USED: 'Redeem code has already been used',
+        REDEEM_CODE_EXPIRED: 'Redeem code has expired',
+        REDEEM_CODE_SELF_ONLY: 'This redeem code can only be used by its owner',
+        REDEEM_CODE_DISABLED: 'This redeem code has been disabled',
+        REDEEM_CODE_INVALID_FORMAT: 'Invalid code format, only h- prefix codes are supported',
+        REDEEM_CODE_EXHAUSTED: 'This redeem code has reached its maximum usage limit',
+        REDEEM_CODE_ALREADY_USED_BY_USER: 'You have already used this redeem code',
+        REDEEM_CODE_HOST_MISMATCH: 'This redeem code can only be used on instances from the same host',
+        REDEEM_CODE_BATCH_LIMIT: 'You have already used another redeem code from this batch',
+        REDEEM_EXCEEDS_PACKAGE_QUOTA: 'Redeeming would exceed instance package quota',
+        REDEEM_ALREADY_AT_LIMIT: 'Instance resource is already at package limit',
+        CHECKIN_CODE_PAID_INSTANCE: 'Check-in redeem codes can only be used on free instances',
+        PAID_INSTANCE_DELETION_NOT_ALLOWED: 'Paid instances cannot be deleted',
+        // Balance errors
+        INSUFFICIENT_BALANCE: 'Insufficient balance, please top up first',
+        INTERNAL_ERROR: 'Internal server error',
+    },
+
+    // Traffic Statistics
+    traffic: {
+        title: 'Traffic Statistics',
+        monthlyUsage: 'Monthly Traffic',
+        used: 'Used',
+        unlimited: 'Unlimited',
+        total: 'Total',
+        history30Days: 'Last 30 Days Traffic',
+        historyPeriod: 'Period Traffic',
+        noData: 'No traffic data',
+        noHistoryData: 'No history data',
+        throttledHint: 'Throttled to 1Mbps',
+        resetHint: 'Resets on the 1st of each month',
+        periodResetHint: 'Resets on the {date}th of each month',
+        status: {
+            normal: 'Normal',
+            warning: 'Warning',
+            limited: 'Limited',
+        },
+        download: 'Download',
+        upload: 'Upload',
+        limit: 'Limit',
+        extraQuota: 'Extra Quota',
+        resetDate: 'Reset Date',
+        nextReset: 'Next Reset',
+    },
+
+    // Instance Transfer
+    transfer: {
+        title: 'Instance Transfer',
+        sentTab: 'Sent',
+        receivedTab: 'Received',
+        pendingCount: 'Pending',
+        noTransfers: 'No transfer records',
+        noPendingTransfers: 'No pending transfers',
+        searchPlaceholder: 'Search by instance name, username, or remark...',
+        // Status
+        status: {
+            pending: 'Pending',
+            processing: 'Processing',
+            accepted: 'Accepted',
+            rejected: 'Rejected',
+            cancelled: 'Cancelled',
+        },
+        // Actions
+        actions: {
+            transfer: 'Transfer',
+            accept: 'Accept',
+            reject: 'Reject',
+            cancel: 'Cancel',
+            push: 'Push',
+        },
+        // Completion times
+        completedAt: 'Completed at',
+        rejectedAt: 'Rejected at',
+        cancelledAt: 'Cancelled at',
+        // Transfer Modal
+        modal: {
+            title: 'Transfer Instance',
+            targetUser: 'Target Username',
+            targetUserPlaceholder: 'Enter target username',
+            searchUser: 'Search User',
+            userNotFound: 'User not found',
+            userBanned: 'This user is banned',
+            cannotTransferToSelf: 'Cannot transfer to yourself',
+            remark: 'Remark (optional)',
+            remarkPlaceholder: 'Enter transfer remark',
+            quotaCheck: 'Quota Check',
+            instance: 'Instance',
+            quotaSufficient: 'Quota sufficient',
+            quotaInsufficient: 'Quota insufficient',
+            canTransfer: 'User status is normal, transfer operation can be performed',
+            confirmTransfer: 'Confirm Transfer',
+            transferring: 'Transferring...',
+            deleteWarning: 'Note: If the recipient accepts the transfer, the system will automatically delete the instance\'s port mappings, proxy sites, snapshots, backups and other associated resources.',
+            feeLabel: 'Transfer Fee',
+            balanceLabel: 'Current Balance',
+            insufficientBalance: 'Insufficient balance, please top up first',
+            feeRefundHint: 'Fee will be charged upon confirmation. Automatically refunded if the recipient rejects',
+        },
+        // Reject Modal
+        rejectModal: {
+            title: 'Reject Transfer',
+            reason: 'Reason (optional)',
+            reasonPlaceholder: 'Enter rejection reason',
+        },
+        // Config Detail Modal
+        configModal: {
+            title: 'Configuration at Transfer',
+            instanceName: 'Instance Name',
+            hostInfo: 'Host Information',
+            networkMode: 'Network Mode',
+            portMappings: 'Port Mappings',
+            snapshots: 'Snapshots',
+            backups: 'Backups',
+            package: 'Package',
+        },
+        hasRemark: 'Has remark',
+        // Detail
+        detail: {
+            fromUser: 'From',
+            toUser: 'To',
+            instance: 'Instance',
+            snapshot: 'Configuration at Transfer',
+            cpu: 'CPU',
+            memory: 'Memory',
+            disk: 'Disk',
+            ports: 'Port Mappings',
+            snapshots: 'Snapshots',
+            backups: 'Backups',
+            host: 'Host',
+            package: 'Package',
+            remark: 'Remark',
+            rejectReason: 'Rejection Reason',
+            createdAt: 'Created At',
+            acceptedAt: 'Accepted At',
+            rejectedAt: 'Rejected At',
+            cancelledAt: 'Cancelled At',
+        },
+        // Messages
+        messages: {
+            transferSuccess: 'Transfer request sent',
+            transferComplete: 'Transfer completed',
+            acceptSuccess: 'Transfer accepted',
+            rejectSuccess: 'Transfer rejected',
+            cancelSuccess: 'Transfer cancelled',
+            pushSuccess: 'Instance pushed successfully',
+            instanceLocked: 'This instance is being transferred and cannot be operated',
+        },
+        // Errors
+        errors: {
+            TRANSFER_NOT_FOUND: 'Transfer request not found',
+            TRANSFER_TO_SELF: 'Cannot transfer to yourself',
+            TRANSFER_TO_BANNED: 'Cannot transfer to a banned user',
+            TRANSFER_ALREADY_PENDING: 'This instance already has a pending transfer',
+            TRANSFER_NOT_PENDING: 'Transfer request is not pending',
+            TRANSFER_INVALID_STATUS: 'Instance status does not allow transfer',
+            TRANSFER_QUOTA_NOT_FOUND: 'Target user quota not found',
+            TRANSFER_QUOTA_INSUFFICIENT: 'Target user quota insufficient',
+            TRANSFER_INSTANCE_LOCKED: 'Instance is locked due to pending transfer',
+            TRANSFER_HOST_DISABLED: 'Transfer is disabled for this host',
+            TRANSFER_INSUFFICIENT_BALANCE: 'Insufficient balance for transfer fee',
+            PUSH_NOT_HOST_OWNER: 'Only host owner can push transfer directly',
+        },
+    },
+
+    // Friends System
+    friends: {
+        title: 'Friends',
+        description: 'Manage your friends list. Friends can share resources with each other',
+        friendsList: 'Friends List',
+        pendingRequests: 'Pending Requests',
+        historyRequests: 'History',
+        addFriend: 'Add Friend',
+        username: 'Username',
+        usernamePlaceholder: 'Enter username',
+        usernameHint: 'Enter the username of the friend you want to add',
+        remark: 'Remark',
+        remarkPlaceholder: 'Enter remark (optional)',
+        remarkHint: 'e.g., how you met, purpose, etc.',
+        sendRequest: 'Send Request',
+        accept: 'Accept',
+        reject: 'Reject',
+        noFriends: 'No friends yet',
+        noFriendsHint: 'Add friends to share hosts, packages, and images',
+        noSearchResult: 'No matching friends found',
+        noHistorySearchResult: 'No matching history records found',
+        noPendingRequests: 'No pending friend requests',
+        noHistoryRecords: 'No history records',
+        noHistoryRecordsHint: 'Processed friend requests will appear here',
+        addedOn: 'Added on',
+        requestedOn: 'Requested on',
+        sentOn: 'Sent on',
+        sentTo: 'Sent to {username}',
+        processedOn: 'Processed on',
+        confirmRemove: 'Are you sure you want to remove {name} from your friends?',
+        requestSent: 'Friend request sent',
+        requestAccepted: 'Friend request accepted',
+        requestRejected: 'Friend request rejected',
+        friendRemoved: 'Friend removed',
+        statusAccepted: 'Accepted',
+        statusRejected: 'Rejected',
+        filterAll: 'All',
+        filterAccepted: 'Accepted',
+        filterRejected: 'Rejected',
+        hosts: 'Hosts',
+        instances: 'Instances',
+        // Invite codes
+        invites: 'Invite Codes',
+        generateInvite: 'Generate Invite',
+        generateInviteTitle: 'Generate Invite Code',
+        inviteCode: 'Invite Code',
+        inviteStatus: 'Status',
+        inviteUsed: 'Used',
+        inviteExpired: 'Expired',
+        inviteUnused: 'Unused',
+        usedBy: 'Used By',
+        createdAt: 'Created At',
+        expiresAt: 'Expires At',
+        permanent: 'Permanent',
+        noInvites: 'No invite codes',
+        noInvitesHint: 'Generate invite codes for others to register',
+        inviteCount: 'Quantity',
+        inviteCountHint: 'Can generate 1-10 invite codes at once',
+        expireDays: 'Expire Days',
+        expireDaysPlaceholder: '0 means never expire',
+        expireDaysHint: 'Set expiration time for invite codes, 0 means never expire',
+        generate: 'Generate',
+        confirmDeleteInvite: 'Are you sure to delete invite code {code}?',
+        inviteDeleted: 'Invite code deleted',
+        inviteGenerated: 'Invite Code Generated',
+        copyCode: 'Copy Code',
+        copyLink: 'Copy Link',
+        inviteCodeCopied: 'Invite code copied',
+        inviteLinkCopied: 'Invite link copied',
+        close: 'Close',
+        deleteInvite: 'Delete',
+        userNotFound: 'User not found',
+        cannotAddSelf: 'Cannot add yourself as a friend',
+        alreadyFriend: 'You are already friends',
+        requestAlreadyPending: 'Friend request is already pending',
+        requestNotFound: 'Request not found or already processed',
+        friendshipNotFound: 'Friendship not found',
+        // Package sharing
+        selectFriendHint: 'Select a friend',
+        selectFriendDesc: 'Click a friend card on the left to manage package sharing',
+        sharedPackages: 'Shared Packages',
+        availablePackages: 'Available Packages',
+        noSharedPackages: 'No packages shared yet',
+        addShare: 'Add Share',
+        addFirstShare: 'Share your first package',
+        removeShare: 'Remove Share',
+        editQuota: 'Edit Quota',
+        quotaMultiplier: 'Quota Multiplier',
+        quotaMultiplierHint: 'e.g. 1, 1.5, 2x, set the resource ratio available to friend',
+        maxInstances: 'Max Instances',
+        maxInstancesHint: 'Limit the number of instances friend can create',
+        noLimit: 'No limit',
+        currentUsage: 'Current Usage',
+        shareAdded: 'Package shared',
+        shareRemoved: 'Share removed',
+        quotaUpdated: 'Quota updated',
+        confirmRemoveShare: 'Are you sure you want to remove the share of {package}?',
+        addShareTitle: 'Share Package',
+        shareToFriend: 'Share to this friend',
+        selectPackage: 'Select Package',
+        selectPackagePlaceholder: 'Select a package to share',
+        confirmShare: 'Confirm Share',
+        editQuotaTitle: 'Edit Quota Limits',
+        sharedTo: 'Shared to',
+        removeFriend: 'Remove Friend',
+        noPackagesToShare: 'You have no packages to share',
+        createPackageFirst: 'Please create a package in "My Packages" first',
+        noPackageSearchResult: 'No matching packages found',
+    },
+
+    // Package labels
+    package: {
+        shared: 'Friend',
+        globalShared: 'Available',
+        friendPrefix: 'Friend:',
+        myPackage: 'My Package',
+        soldOut: 'Sold Out',
+    },
+
+    // User Resources Management
+    resources: {
+        hosts: {
+            title: 'My Hosts',
+            description: 'Manage your hosts that can be used by you and your friends',
+            create: 'Add Host',
+            createDesc: 'Add a new Incus host',
+            ubuntuOnlyHint: 'Currently supports Ubuntu 22.04+ and Debian 11+ only.',
+            installHintTitle: 'After submitting, the system will generate an install command with the panel URL and Token embedded. Copy and run it on the host to complete installation.',
+            installHintIpv6: 'Tip: For IPv6 modes (NAT+IPv6, IPv6 Only), run the install script on the host first. It will auto-generate IPv6 subnet info for you to fill in below.',
+            ipv6OptionalHint: 'Not sure? Leave blank for now. Run the install script on the host first — it will detect and display your IPv6 subnet. Then come back and edit the node to fill in.',
+            storagePoolAfterConnectHint: 'After the node connects successfully, remember to create a storage pool from the Storage tab on the node detail page.',
+            noHosts: 'No hosts',
+            noHostsHint: 'Add hosts to create instances on them',
+            calibrateAll: 'Sync All Usage',
+            noOnlineHosts: 'No online hosts to sync',
+            calibrateAllDone: 'Synced {total} hosts, {changed} with differences corrected',
+            calibrateAllNoChange: 'Synced {total} hosts, no differences',
+            nameHint: 'Node name is prefixed with PEER + your user ID, followed by custom suffix',
+            nameSuffixRequired: 'Please enter the node name suffix',
+            // Admin only: Host scope toggle
+            mine: 'My Hosts',
+            hosted: 'Hosted',
+            owner: 'Owner',
+            filterByUserId: 'User ID',
+            takeoverOfficial: 'Take Over',
+            takeoverOfficialLoading: 'Taking over...',
+            takeoverOfficialConfirm: 'Take over host "{name}" as official? This transfers the current host and any safely transferable packages. Existing instances stay with their current users.',
+            takeoverOfficialSuccess: 'Host {name} taken over. {packages} packages transferred, {instances} instances kept.',
+            takeoverOfficialDetached: '{count} packages were still bound to other hosted nodes, so the current host binding was removed: {names}',
+            takeoverOfficialBlocked: 'Takeover blocked: {count} packages would lose all bound hosts after removing the current host. Resolve these packages first: {names}',
+        },
+        packages: {
+            title: 'My Packages',
+            description: 'Manage your package configurations that can be used by you and your friends',
+            create: 'Create Package',
+            noPackages: 'No packages',
+            noPackagesHint: 'Create packages to use when creating instances',
+            share: 'Share Package',
+            viewShares: 'View Shares',
+            selectFriend: 'Select Friend',
+            selectFriendPlaceholder: 'Please select a friend to share with',
+            noFriends: 'No friends yet, please add friends first',
+            shareSuccess: 'Package shared successfully',
+            shareFailed: 'Failed to share package',
+            confirmUnshare: 'Are you sure you want to unshare?',
+            unshareSuccess: 'Unshared successfully',
+            unshareFailed: 'Failed to unshare',
+            sharesList: 'Shares List',
+            sharesCount: '{count} people',
+            noShares: 'No shares yet',
+            noSharesHint: 'Share to let friends use this package',
+            sharedAt: 'Shared at',
+            unshare: 'Unshare',
+            searchFriend: 'Search friends...',
+            noAvailableFriends: 'All friends have been shared this package',
+            selectToShare: 'Select a friend to share',
+            // Quota limits
+            quotaSettings: 'Quota Limits',
+            quotaMultiplier: 'Resource Quota Multiplier',
+            quotaMultiplierHint: 'Limit CPU/Memory as a fraction of package quota',
+            maxInstances: 'Max Instances',
+            maxInstancesHint: 'Limit the maximum number of instances',
+            noLimit: 'No limit',
+            instanceUnit: '{n} instance | {n} instances',
+            quotaDisplay: 'Quota: {multiplier} · Instances: {instances}',
+            usageDisplay: 'Used: {cpu}% CPU / {memory} MB Memory / {instances} instances',
+            updateQuota: 'Update Quota',
+            updateQuotaSuccess: 'Quota updated',
+            updateQuotaFailed: 'Failed to update quota',
+            // Enhanced modal additions
+            shareToFriend: 'Share Package to Friend',
+            noFriendsHint: 'Add friends first to share packages',
+            allFriendsShared: 'All Shared',
+            confirmShare: 'Confirm Share',
+            editQuota: 'Edit Quota',
+            editQuotaFor: 'Editing quota for {username}',
+            quotaUpdated: 'Quota updated',
+            quotaUpdateFailed: 'Failed to update quota',
+            usageStatus: 'Usage Status',
+            instanceCount: 'Instance Count',
+            packageInstanceCount: 'Package Instances',
+            networkModeColumn: 'Network Mode',
+            instanceTypeColumn: 'Instance Type',
+            trafficMultiplierColumn: 'Traffic Multiplier',
+            hostColumn: 'Host',
+            instanceColumn: 'Instances',
+            publicBadge: 'Public',
+            currentUsage: 'Current: {cpu}% CPU / {memory} MB Memory / {instances} instances',
+            currentUsageInfo: 'Currently using {cpu}% CPU, {memory} MB memory, {instances} instances',
+            addShare: 'Add Share',
+            globalShared: 'Global Shared',
+            shared: 'Shared',
+            searchPlaceholder: 'Search name, host, description...',
+            noSearchResults: 'No matching packages found',
+            clearSearch: 'Clear search',
+            // Notification channel settings
+            notifyChannel: 'Notification Channel',
+            notifyChannelTitle: 'Resource Release Notification Channel',
+            notifyChannelDesc: 'System will send notifications via this channel when users delete instances or when quota is released',
+            // Share link
+            copyShareLink: 'Copy Share Link',
+            shareLinkCopied: 'Share link copied, users can access this link to directly create instances',
+            // Admin only: Package scope toggle
+            mine: 'My Packages',
+            hosted: 'Hosted',
+            owner: 'Owner',
+            filterByUserId: 'User ID',
+        },
+        // Package plans management
+        plans: {
+            title: 'Plan Management',
+            manage: 'Manage Plans',
+            noPlans: 'No plans',
+            noPlansHint: 'Create a plan to allow users to purchase paid instances for this package',
+            add: 'Add Plan',
+            create: 'Create Plan',
+            edit: 'Edit Plan',
+            name: 'Plan Name',
+            namePlaceholder: 'e.g., Basic, Pro, Enterprise',
+            description: 'Plan Description',
+            descriptionPlaceholder: 'Optional, describe the plan features',
+            resourceConfig: 'Resource Configuration',
+            portLimit: 'Ports',
+            snapshotLimit: 'Snapshots',
+            backupLimit: 'Backups',
+            siteLimit: 'Sites',
+            swapSize: 'SWAP Size',
+            trafficLimit: 'Traffic Limit',
+            trafficSpeed: 'Bandwidth Limit',
+            unlimitedHint: 'Leave empty for unlimited',
+            billingConfig: 'Billing Configuration',
+            price: 'Price',
+            billingCycle: 'Billing Cycle',
+            setupFee: 'Setup Fee',
+            slaGuarantee: 'SLA Guarantee',
+            stock: 'Stock',
+            isActive: 'Enable Plan',
+            status: 'Plan Status',
+            statusActive: 'Available',
+            statusActiveHint: 'Visible and available for new orders',
+            statusSoldOut: 'Sold Out',
+            statusSoldOutHint: 'Still visible, but blocked for new orders and plan changes',
+            statusInactive: 'Inactive',
+            statusInactiveHint: 'Hidden from order entry points and cannot be selected',
+            sortOrder: 'Sort Order',
+            daily: 'Daily',
+            weekly: 'Weekly',
+            monthly: 'Monthly',
+            quarterly: 'Quarterly',
+            semiAnnual: 'Semi-Annual',
+            yearly: 'Yearly',
+            days: 'days',
+            months: 'months',
+            createSuccess: 'Plan created successfully',
+            updateSuccess: 'Plan updated successfully',
+            saveFailed: 'Failed to save plan',
+            priceRangeHint: 'Max ¥{max}',
+            priceRangeError: 'Plan price must be between 0 and {max} yuan, with up to 2 decimal places',
+            confirmDelete: 'Are you sure you want to delete the plan "{name}"?',
+            deleteSuccess: 'Plan deleted',
+            deleteFailed: 'Failed to delete plan',
+        },
+        images: {
+            title: 'My Images',
+            description: 'Manage your image configurations that can be used by you and your friends',
+            create: 'Add Image',
+            noImages: 'No images',
+            noImagesHint: 'Add images to use when creating instances',
+        },
+    },
+
+    // Instance config tab
+    instanceConfig: {
+        title: 'Advanced Configuration',
+        sections: {
+            swap: 'SWAP',
+            storageIO: 'Storage I/O Limits',
+            networkLimits: 'Network Limits',
+            processScheduling: 'Process & Scheduling',
+            bootSettings: 'Boot Settings',
+        },
+        swap: {
+            size: 'Size',
+            enabled: 'Enabled',
+            disabled: 'Closed',
+            enableButton: 'Enable SWAP',
+            disableButton: 'Disable SWAP',
+            toggleHint: 'SWAP can be enabled or disabled at any time and the current state is kept after rebuild/recreate.',
+            runningRequired: 'The VM must be running before SWAP can be enabled.',
+            vmHint: 'VMs enable SWAP persistently through a guest swapfile.',
+            containerHint: 'Containers apply SWAP through the Incus memory swap limit.',
+            enableConfirmTitle: 'Enable SWAP',
+            enableConfirmText: 'Enable {size} of SWAP for this instance?',
+            disableConfirmTitle: 'Disable SWAP',
+            disableConfirmText: 'Disable SWAP for this instance?',
+            enableSuccess: 'SWAP enabled',
+            enableFailed: 'Failed to enable SWAP',
+            disableSuccess: 'SWAP disabled',
+            disableFailed: 'Failed to disable SWAP',
+        },
+        changeHost: {
+            title: 'Change Host',
+            description: 'Recreate this instance on another host in the same package while keeping the instance ID and billing data.',
+            currentHost: 'Current host',
+            availableCount: '{count} available host(s)',
+            button: 'Change host',
+            loadFailed: 'Failed to load hosts',
+            submitFailed: 'Failed to submit host change',
+            taskQueued: 'Host change task submitted, please wait...',
+            modalTitle: 'Select Target Host',
+            modalSubtitle: 'Only hosts in the same package with enough CPU and memory can be selected.',
+            warning: 'This recreates the system disk. Old instance data, snapshots, backups, port mappings, and proxy sites will be cleared.',
+            selectSshKey: 'SSH key',
+            noSshKey: 'No SSH key available',
+            confirm: 'Confirm Change',
+            current: 'Current',
+            available: 'Available',
+            memory: 'Memory',
+            reasons: {
+                current_host: 'Current host',
+                host_offline: 'Offline',
+                host_type_mismatch: 'Type mismatch',
+                cpu_full: 'Full',
+                memory_full: 'Full',
+                resource_unconfigured: 'Quota missing',
+                image_unavailable: 'Image unavailable',
+            },
+        },
+        overridden: 'Overridden',
+        resetToDefault: 'Reset to package default',
+        saveSuccess: 'Configuration saved',
+        saveFailed: 'Failed to save configuration',
+        boostProcesses: {
+            button: 'Boost',
+            title: 'Boost Process Limit',
+            confirm: 'Are you sure you want to boost the process limit for this {type} instance? The process limit will be increased to {limit}.',
+            hint: 'This operation only increases the process limit and does not affect other configurations',
+            success: 'Process limit has been boosted to {limit}',
+            failed: 'Failed to boost process limit',
+        },
+    },
+
+    // Package form page
+    packageForm: {
+        createTitle: 'Create Package',
+        editTitle: 'Edit Package',
+        description: 'Configure resource limits and advanced options for the package',
+        sections: {
+            basicInfo: 'Basic Info',
+            resourceLimits: 'Resource Limits',
+            storageIO: 'Storage I/O Limits',
+            networkLimits: 'Network Limits',
+            processScheduling: 'Process & Scheduling',
+            bootSettings: 'Boot Settings',
+            prerequisite: 'Prerequisite Package',
+            visibility: 'Visibility',
+            instancePermissions: 'Instance Operation Permissions',
+            advancedOptions: 'Advanced Options',
+            instanceQuota: 'Instance Quota',
+        },
+        fields: {
+            networkMode: 'Network Mode',
+            instanceType: 'Instance Type',
+            packageCreationMode: 'Package Usage',
+            ioLimitMode: 'IO Limit Mode',
+            limitsRead: 'Read Rate Limit',
+            limitsWrite: 'Write Rate Limit',
+            limitsReadIops: 'Read IOPS Limit',
+            limitsWriteIops: 'Write IOPS Limit',
+            limitsIngress: 'Ingress Bandwidth Limit',
+            limitsEgress: 'Egress Bandwidth Limit',
+            limitsProcesses: 'Max Processes',
+            limitsCpuPriority: 'CPU Priority',
+            bootAutostart: 'Auto-start with Host',
+            bootAutostartPriority: 'Startup Priority',
+            bootAutostartDelay: 'Startup Delay',
+            bootHostShutdownTimeout: 'Shutdown Timeout',
+            portLimit: 'Port Mapping Limit',
+            snapshotLimit: 'Snapshot Limit',
+            backupLimit: 'Backup Limit',
+            siteLimit: 'Site Limit',
+            hostStoragePools: 'Host System Disk Pool',
+            hostTrafficMultiplier: 'Host Traffic Multiplier',
+            requiredPackage: 'Prerequisite Package',
+            publicAccess: 'Public Package',
+            globalMaxInstances: 'Max Instances',
+            allowInstanceDeletion: 'Allow users to delete instances',
+        },
+        hostSelector: {
+            official: 'Official Hosts',
+            searchPlaceholder: 'Search host name, region, URL, owner...',
+            selectedCount: '{count} host(s) selected',
+            noSearchResults: 'No matching hosts found',
+            detailUnavailable: 'This host is not loaded in the current view; the binding will still be preserved when saved',
+        },
+        creationModes: {
+            free: {
+                title: 'Free Instance Package',
+                description: 'Instances use the package resource, quota, and bandwidth limits directly',
+            },
+            paid: {
+                title: 'Paid Instance Package',
+                description: 'Create plans afterward to set resources, quotas, traffic, and price',
+            },
+        },
+        ioMode: {
+            throughput: 'Throughput Limit',
+            iops: 'IOPS Limit',
+        },
+        hints: {
+            ioLimitMode: 'Incus only supports one IO limit mode at a time, please select one',
+            cpuPriority: '0 is lowest priority, 10 is highest priority',
+            bootPriority: 'Lower values start first',
+            startupDelay: 'Seconds to wait before starting instance (5-600)',
+            shutdownTimeout: 'Seconds to wait for instance shutdown when host shuts down (30-600)',
+            instanceQuota: 'Limit the number of resources a user can create on instances using this package',
+            portLimit: 'Maximum port mappings per instance',
+            snapshotLimit: 'Maximum snapshots per instance (0 = no quota)',
+            backupLimit: 'Maximum backups per instance (0 = no quota)',
+            siteLimit: 'Maximum proxy sites per instance (0 = no quota)',
+            hostStoragePools: 'Choose the default system disk storage pool for each bound host. Leave empty to use automatic selection.',
+            hostTrafficMultiplier: 'Instance monthly traffic = package or plan traffic multiplied by this value. Default is 1.',
+            requiredPackage: 'When selected, users must already have an instance from this package before they can create an instance from this package.',
+            noSystemStoragePools: 'This host currently has no storage pool available for instance system disks',
+            instanceType: 'Containers are lightweight and fast, VMs provide full isolation',
+            publicAccess: 'When enabled, the package will be visible to all users who can use it to create instances; when disabled, the package will be hidden/archived',
+            globalMaxInstances: 'Limit the maximum number of instances users can create. Required integer from 1 to 5.',
+            allowInstanceDeletion: 'When disabled, instances created with this package will not allow users to delete them',
+            freePackageCreationMode: 'Free instances do not need a plan. They inherit the settings on this page directly. If you need an entry requirement or want to use the paid instance flow, choose a paid instance package, then add a plan with the price set to 0.',
+            paidPackageCreationMode: 'Paid instances use the resources, quotas, traffic, and price from their plan. This page hides the fields that will be overridden by plans and saves package defaults instead.',
+        },
+        units: {
+            seconds: 'seconds',
+        },
+        placeholders: {
+            unlimited: 'Leave empty for unlimited',
+            autoStoragePool: 'Auto select (not specified)',
+            noPrerequisite: 'No prerequisite package',
+        },
+        validation: {
+            cpuPriorityRange: 'CPU priority must be between 0 and 10',
+            bootPriorityRange: 'Boot priority must be between 0 and 100',
+            startupDelayRange: 'Startup delay must be between 5 and 600 seconds',
+            shutdownTimeoutRange: 'Shutdown timeout must be between 30 and 600 seconds',
+            portLimitMin: 'Port limit must be at least 1',
+            globalMaxInstancesRange: 'Public package max instances must be an integer from 1 to 5',
+        },
+        typeHelp: {
+            containerFast: 'Fast startup, seconds to ready',
+            containerLight: 'Low overhead, suitable for most Linux apps',
+            containerDocker: 'Docker support (requires nesting)',
+            vmIsolation: 'Full isolation, independent kernel',
+            vmKernel: 'Custom kernel and kernel modules support',
+            vmWindows: 'Can run Windows and other non-Linux OS',
+        },
+    },
+
+    // Sensitive operation verification
+    sensitiveVerification: {
+        title: 'Sensitive Operation Verification',
+        description: 'This operation requires verification to ensure account security',
+        operationLabel: 'Operation Type',
+        requestHint: 'Click the button below to receive a verification code via your notification channel',
+        sendCode: 'Send Code',
+        sendingCode: 'Sending...',
+        resendCode: 'Resend',
+        resendIn: 'Resend in {seconds}s',
+        codeSent: 'Code sent',
+        codeSentTo: 'Code sent to {channel}',
+        enterCode: 'Enter verification code',
+        codePlaceholder: '000000',
+        verify: 'Verify',
+        verifying: 'Verifying...',
+        verifySuccess: 'Verification successful, please retry the operation',
+        verifyFailed: 'Verification failed',
+        codeExpired: 'Code expired, please resend',
+        invalidCode: 'Invalid code, please enter 6 digits',
+        operationTypes: {
+            change_password: 'Change Password',
+            disable_2fa: 'Disable Two-Factor Authentication',
+            change_email: 'Change Email Address',
+            delete_account: 'Delete Account',
+            delete_instance: 'Delete Instance',
+            reinstall_instance: 'Reinstall Instance',
+            recreate_instance: 'Recreate Instance',
+            transfer_instance: 'Transfer Instance',
+            delete_snapshot: 'Delete Snapshot',
+            delete_backup: 'Delete Backup',
+        },
+        channels: {
+            email: 'Email',
+            telegram: 'Telegram',
+            discord: 'Discord',
+            webhook: 'Webhook',
+        },
+    },
+
+    // Host Caddy management
+    host: {
+        caddy: {
+            title: 'Caddy Proxy',
+            description: 'Provide domain reverse proxy service for your instances through Caddy, with automatic SSL certificate.',
+            enabled: 'Enabled',
+            disabled: 'Disabled',
+            notInstalled: 'Caddy is not installed yet. Click the button below to generate installation command.',
+            generateCommand: 'Generate Command',
+            installCommand: 'Installation Command',
+            commandLabel: 'Run the following command on your host',
+            confirmInstalled: 'Confirm Installed',
+            viewCommand: 'View Command',
+            resetCredentials: 'Reset Credentials',
+            resetConfirm: 'After resetting credentials, you need to re-run the installation command on the host. Continue?',
+            resetSuccess: 'Credentials reset. Please re-run the installation command on the host.',
+            resetFailed: 'Failed to reset credentials',
+            testConnection: 'Test Connection',
+            apiPort: 'API Port',
+            username: 'Username',
+            password: 'Password',
+            publicIp: 'Public IP',
+            sitesCount: 'Sites Count',
+            loadFailed: 'Failed to load Caddy status',
+            generateFailed: 'Failed to generate command',
+            confirmSuccess: 'Caddy installation confirmed',
+            confirmFailed: 'Confirmation failed',
+            testSuccess: 'Connection successful',
+            testFailed: 'Connection failed',
+            installHint: 'Installation Steps',
+            step1: 'Copy the command above and run it as root on your host',
+            step2: 'Wait for installation to complete, you should see "Caddy Reverse Proxy Ready"',
+            step3: 'Return to this page and click "Confirm Installed" button',
+            // Sites list
+            sitesList: 'Proxy Sites',
+            sitesTotalCount: '{count} sites in total',
+            loadSitesFailed: 'Failed to load sites',
+            noSites: 'No proxy sites',
+            instance: 'Instance',
+            targetPort: 'Target Port',
+            siteActive: 'Active',
+            sitePending: 'Pending',
+            siteError: 'Error',
+            siteDisabled: 'Disabled',
+            prevPage: 'Previous',
+            nextPage: 'Next',
+            pageInfo: 'Page {current}/{total}, {count} total',
+        },
+        // Host create instance
+        createInstance: {
+            title: 'Create Instance',
+            selfMode: 'Create for Myself',
+            giftMode: 'Gift to User',
+            selfModeHint: 'Use your own SSH key and init commands to create a free instance on this host.',
+            giftModeHint: 'Create an instance for another user on this host. Paid plans can only be gifted for free days.',
+            adminModeHint: 'Admins can create a free instance for a specified user on this host, or gift the first period of a paid instance.',
+            selectPackage: 'Select Package',
+            noPackages: 'No packages available for this host',
+            noPackagesHint: 'Please create and bind packages to this host first',
+            instanceName: 'Instance Name',
+            giftDaysLabel: 'Free Gift Days',
+            giftDaysHint: 'Only free gifted days are supported. No deduction will be made from the recipient balance.',
+            giftDaysRange: 'Range: 1-365 days',
+            giftDuration: 'Gift Duration',
+            giftDurationValue: '{days} days free',
+            giftOnlyFreeHint: 'After the free period ends, renewal will follow the selected plan price.',
+            creating: 'Creating...',
+            success: 'Instance created successfully',
+            giftSuccess: 'Instance has been created for {username}',
+            userInactive: 'This user is not active',
+            cannotGiftToSelf: 'Use the self-create mode if you want to create an instance for yourself',
+        },
+        // Host owner notifies instance users
+        notify: {
+            title: 'Send Notification',
+            sendToUsers: 'Notify Users',
+            hint: 'An inbox message will be sent immediately to all unique users with instances on this host',
+            hintSelected: 'An inbox message will be sent immediately to users of the {count} selected instance(s), with duplicate users removed',
+            deliveryHint: 'If email is enabled, a single recipient is emailed immediately. Multiple recipients are queued and sent at a rate of one email per minute.',
+            messageTitle: 'Message Title',
+            titlePlaceholder: 'Enter message title',
+            titleRequired: 'Please enter message title',
+            messageContent: 'Message Content',
+            contentPlaceholder: 'Enter message content',
+            contentRequired: 'Please enter message content',
+            sendEmail: 'Also send email notification',
+            sendEmailHint: 'Emails are only sent to users who have an email address set. Bulk emails are queued automatically to avoid burst sending.',
+            send: 'Send Notification',
+            sendSuccess: 'Successfully sent to {count} users',
+            sendSuccessBase: 'Inbox message sent to {count} users',
+            emailDirectSuccess: '{count} email sent immediately',
+            emailQueuedSuccess: '{count} email queued',
+            emailSkipped: '{count} user(s) skipped because no email address is set',
+            emailFailed: '{count} email(s) failed to send or queue',
+            sendFailed: 'Failed to send',
+            // Send to single instance user
+            sendToUser: 'Send Message',
+            sendToUserTitle: 'Send Message to {username}',
+            sendToUserHint: 'Message will be sent to the owner of instance "{instance}"',
+            sendToUserSuccess: 'Message sent',
+        },
+        // Renewal Price
+        price: {
+            editPrice: 'Edit Renewal Price',
+            modalTitle: 'Edit Renewal Price',
+            hint: 'Modify the renewal price for instance "{instance}". The new price will take effect at next renewal and will not affect the current month.',
+            currentPrice: 'Current Price',
+            newPrice: 'New Price',
+            placeholder: 'Enter new renewal price',
+            effectHint: 'New price takes effect at next renewal, no impact on current month',
+            minPriceError: 'Price cannot be negative',
+            samePriceError: 'New price is the same as current price',
+            updateSuccess: 'Renewal price updated, user notified',
+            updateFailed: 'Update failed',
+        },
+        // Batch Configuration
+        batchConfig: {
+            title: 'Batch Config',
+            button: 'Batch Config',
+            targetAll: 'Apply to: All {count} instances on host',
+            targetSelected: 'Apply to: {count} selected instances',
+            enableFieldHint: 'Check the box to enable modification for the field',
+            // Sections
+            section: {
+                resources: 'Resources',
+                quota: 'Quota Limits',
+                permissions: 'Container Permissions',
+                advanced: 'Advanced',
+                io: 'Storage I/O Limits',
+                network: 'Network Limits',
+                process: 'Process & Scheduling',
+                boot: 'Boot Settings',
+            },
+            // Fields
+            cpu: 'CPU Cores',
+            memory: 'Memory',
+            disk: 'Disk',
+            traffic: 'Traffic',
+            swapEnabled: 'SWAP Toggle',
+            swapSize: 'SWAP Size',
+            portLimit: 'Port Limit',
+            snapshotLimit: 'Snapshot Limit',
+            backupLimit: 'Backup Limit',
+            siteLimit: 'Site Limit',
+            nested: 'Nested Virtualization',
+            privileged: 'Privileged Container',
+            limitsRead: 'Read Limit',
+            limitsWrite: 'Write Limit',
+            limitsIngress: 'Ingress Limit',
+            limitsEgress: 'Egress Limit',
+            limitsProcesses: 'Max Processes',
+            limitsCpuPriority: 'CPU Priority',
+            bootPriority: 'Boot Priority',
+            bootAutostart: 'Auto Start',
+            bootDelay: 'Boot Delay',
+            shutdownTimeout: 'Shutdown Timeout',
+            // Placeholders
+            placeholder: {
+                cpu: 'e.g. 1, 2, 4',
+                memory: 'e.g. 512, 1024, 2048',
+                disk: 'e.g. 10, 20, 50',
+                traffic: 'e.g. 100, 500, 1000',
+                swapSize: 'e.g. 512, 1024, 2048',
+                limit: 'e.g. 5, 10, 20',
+                ioLimit: 'e.g. 100MB',
+                priority: 'e.g. 5',
+                processLimit: 'e.g. 500, 1000',
+                bootPriority: 'e.g. 0, 1, 2',
+            },
+            // Status
+            processing: 'Applying batch configuration...',
+            processed: 'Processed {current} / {total}',
+            // Results
+            success: 'Success',
+            failed: 'Failed',
+            successAll: 'Batch config applied successfully to {count} instances',
+            partial: 'Partial success: {success} succeeded, {failed} failed',
+            allFailed: 'All Failed',
+            submitFailed: 'Submit failed',
+            retrySuccess: 'Retry succeeded for {count} instances',
+            retryPartial: 'Retry partial: {success} succeeded, {failed} failed',
+            retryFailed: 'Retry Failed',
+            failedDetails: 'Failed Details',
+            instanceName: 'Instance Name',
+            incusId: 'Incus ID',
+            errorReason: 'Error Reason',
+            copyIncusIds: 'Copy Failed Incus IDs',
+            copiedIncusIds: 'Copied {count} Incus IDs',
+            // Actions
+            submit: 'Apply Config ({count})',
+            close: 'Close',
+            noFieldsEnabled: 'Please enable at least one config field',
+            noChanges: 'No configuration changes',
+        },
+        // Batch migrate instances
+        migrate: {
+            title: 'Migrate Instances to Another Node',
+            button: 'Migrate',
+            selectedCount: '{count} instance(s) selected',
+            targetNode: 'Target Node',
+            selectTarget: 'Select target node',
+            targetImage: 'Target OS',
+            selectImage: 'Select target OS',
+            selectImageRequired: 'Please select target OS',
+            loadImagesFailed: 'Failed to load OS list',
+            noImageAvailable: 'No OS images available on target node',
+            imageHint: 'Migration will rebuild instances with this OS instead of their old image',
+            instances: 'instances',
+            warning: 'Migration Notes',
+            warningCloudInit: 'cloud-init will be re-executed',
+            warningImage: 'Instances will be rebuilt with the selected OS',
+            warningIp: 'Instances will get new IP addresses',
+            warningNotify: 'Users will be notified after migration',
+            confirm: 'Confirm Migration',
+            migrating: 'Migrating...',
+            resultSummary: '{success} succeeded, {failed} failed',
+            failedInstances: 'Failed Instances',
+            loadHostsFailed: 'Failed to load host list',
+            selectTargetRequired: 'Please select target node',
+            noInstancesSelected: 'Please select instances to migrate first',
+            failed: 'Migration failed',
+            // Paid instance plan selection
+            targetPlan: 'Target Plan',
+            selectPlan: 'Select target plan',
+            selectPlanRequired: 'Please select target plan',
+            loadPlansFailed: 'Failed to load plan list',
+            noPlanAvailable: 'No plans available on target node',
+            planHint: 'Paid instances will use the new plan\'s renewal price, keeping original expiry date and coupon',
+        },
+        // Gift Days
+        giftDays: {
+            title: 'Gift Days',
+            button: 'Gift Days',
+            hint: 'Extend expiry date for selected paid instances for free, no charges.',
+            confirm: 'Will gift days to {count} paid instance(s)',
+            daysLabel: 'Days to Gift',
+            daysRange: 'Range: 1-365 days',
+            confirmButton: 'Confirm Gift',
+            success: 'Successfully gifted {days} days to {count} instance(s)',
+            partial: 'Success: {success}, Failed: {failed}',
+            failed: 'Gift failed',
+            skipped: 'Skipped {count} free instance(s)',
+            noPaidInstances: 'Please select paid instances',
+        },
+    },
+
+    // Inbox (Notifications)
+    inbox: {
+        title: 'Notification Center',
+        description: 'View all your system notifications',
+        notifications: 'Notifications',
+        unread: 'Unread',
+        all: 'All',
+        allCategories: 'All Types',
+        markAllRead: 'Mark all read',
+        markRead: 'Mark as read',
+        clearRead: 'Clear read',
+        noMessages: 'No notifications',
+        noUnread: 'No unread notifications',
+        noCategoryMessages: 'No messages in this category',
+        viewAll: 'View all',
+        justNow: 'Just now',
+        minutesAgo: '{n} min ago',
+        hoursAgo: '{n} hr ago',
+        daysAgo: '{n} days ago',
+        deleteConfirm: 'Delete this notification?',
+        clearConfirm: 'Clear all read notifications?',
+        deleted: 'Deleted',
+        cleared: 'Cleared',
+        markedRead: 'Marked as read',
+        markedAllRead: 'All marked as read',
+        currentPageFiltered: 'Filtered on this page: {count} items',
+        // Message categories
+        categories: {
+            instance: 'Instance',
+            snapshot: 'Snapshot',
+            backup: 'Backup',
+            social: 'Friends',
+            transfer: 'Transfer',
+            package: 'Package',
+            security: 'Security',
+            quota: 'Quota',
+            ticket: 'Ticket',
+            system: 'System',
+        },
+    },
+
+    // Quota Release
+    quotaRelease: {
+        title: 'Release Quota',
+        packageQuota: 'Package Quota',
+        noHosts: 'No hosts available',
+        noHostsHint: 'No hosts are bound to this package',
+        selectHosts: 'Select Hosts',
+        selectAll: 'Select All',
+        deselectAll: 'Deselect All',
+        available: 'Available',
+        quotaToAdd: 'Quota to Add',
+        preview: 'Will add {cpu}% CPU and {memory} RAM to each of {count} host(s)',
+        notificationChannel: 'Notification Channel',
+        noNotification: 'No notification',
+        notificationHint: 'System will send a notification via this channel after releasing quota',
+        selectChannel: 'Select notification channel',
+        bindChannelHint: 'Only disabled channels are shown for release quota notifications',
+        unbindChannel: 'Unbind',
+        sendNotification: 'Send Notification',
+        noDisabledChannel: 'No available notification channel',
+        noDisabledChannelHint: 'Please add a channel in "Profile - Notifications" and disable it first',
+        channelEnabledWarning: 'This channel is enabled and will also receive system event notifications',
+        noGlobalChannel: 'No global notification channel available',
+        noGlobalChannelHint: 'Please ask the admin to create a global notification channel in system settings',
+        confirm: 'Release Quota',
+        success: 'Successfully released quota to {count} host(s)',
+        failed: 'Failed to release quota',
+        loadFailed: 'Failed to load host information',
+        selectHost: 'Please select at least one host',
+        enterQuota: 'Please enter the quota to add',
+        channelUpdated: 'Notification channel updated',
+        channelUpdateFailed: 'Failed to update notification channel',
+    },
+
+    // Web Terminal
+    terminal: {
+        title: 'Terminal',
+        connecting: 'Connecting...',
+        connected: 'Connected',
+        disconnected: 'Disconnected',
+        failed: 'Connection Failed',
+        connectionFailed: 'Connection Failed',
+        reconnect: 'Reconnect',
+        requiresRunning: 'Instance must be running',
+        clear: 'Clear',
+        fullscreen: 'Fullscreen',
+        exitFullscreen: 'Exit Fullscreen',
+        fontSize: 'Font Size',
+        fontSizeIncrease: 'Increase Font',
+        fontSizeDecrease: 'Decrease Font',
+        connectionError: 'Connection Error',
+        reconnecting: 'Reconnecting...',
+        close: 'Close Terminal',
+        disconnect: 'Disconnect',
+        modeExec: 'Shell',
+        modeConsole: 'Console',
+        modeBootConsole: 'Boot Console',
+        modeSwitching: 'Switching to Shell',
+        modeUnknown: 'Unknown Mode',
+        consoleFallback: 'Fell back to console mode',
+        consoleFallbackHint: 'This virtual machine could not enter shell mode, so the terminal is using the serial console. If the experience is poor, check qemu-guest-agent, cloud-init, and serial login configuration.',
+        switchingToShell: 'Switching to Shell...',
+        switchingToShellHint: 'The shell transport is ready, and the terminal is switching from boot console to interactive shell.',
+        shellReadyNotice: 'Shell Attached',
+        shellReadyHint: 'Boot console output is complete, and the terminal is now attached to the interactive shell.',
+        consoleOnlyHint: 'The terminal is still on the console. The shell is not ready yet or is reconnecting.',
+        instanceInfo: 'Instance: {name}',
+        statusConnecting: 'Connecting',
+        statusConnected: 'Connected',
+        statusDisconnected: 'Disconnected',
+        statusError: 'Error',
+        escToClose: 'Press Esc to close',
+        pressCtrlShiftFToSearch: 'Press Ctrl+Shift+F to search',
+        searchPlaceholder: 'Search...',
+        searchNext: 'Next',
+        searchPrevious: 'Previous',
+        restore: 'Restore Terminal',
+        exportLog: 'Export Log',
+        // Multi-tab
+        tab: 'Tab',
+        newTab: 'New Tab',
+        closeTab: 'Close Tab',
+        maxTabsReached: 'Maximum tabs reached',
+        // Context menu
+        contextMenu: {
+            copy: 'Copy',
+            paste: 'Paste',
+            selectAll: 'Select All',
+        },
+        // Cloud-init status
+        cloudInitChecking: 'Checking instance initialization status...',
+        cloudInitInProgress: 'Instance is initializing',
+        cloudInitInProgressHint: 'Instance is running Cloud-init initialization, which may take 10-60 seconds. Please click "Retry" to try connecting again.',
+        cloudInitUnknown: 'Cloud-init Status Unknown',
+        cloudInitUnknownHint: 'The Cloud-init status inside this KVM instance cannot be detected reliably right now. You can continue connecting or mark it as completed manually.',
+        cloudInitRetry: 'Retry',
+        cloudInitSkip: 'Skip and Connect',
+        cloudInitManualComplete: 'Mark Complete',
+        cloudInitManualCompleteSuccess: 'This instance has been marked as cloud-init completed manually',
+        // Mobile hints
+        mobileKeyboardHint: 'Please switch to English keyboard for best experience',
+        // Help
+        help: 'Help',
+        helpTitle: 'Terminal Help',
+        helpShortcuts: 'Keyboard Shortcuts',
+        helpShortcutSearch: 'Search',
+        helpShortcutCopy: 'Copy selection',
+        helpShortcutPaste: 'Paste',
+        helpShortcutFontIncrease: 'Increase font',
+        helpShortcutFontDecrease: 'Decrease font',
+        helpShortcutFontReset: 'Reset font',
+        helpShortcutExport: 'Export log',
+        helpShortcutNewTab: 'New tab',
+        helpShortcutCloseTab: 'Close tab',
+        helpMouseOps: 'Mouse Operations',
+        helpMouseSelect: 'Drag to select text',
+        helpMouseCopy: 'Right-click to copy/paste',
+        helpMouseScroll: 'Scroll wheel to view history',
+        helpTouchOps: 'Touch Operations',
+        helpTouchPinchZoom: 'Pinch to zoom font size',
+        helpTouchSwipeScroll: 'Swipe to scroll history',
+        // Settings panel
+        settings: 'Settings',
+        settingBell: 'Terminal Alert Sound',
+        settingBellDesc: 'Play sound when program sends alert (e.g., command complete, error warning)',
+        settingAutoCopy: 'Auto Copy on Select',
+        settingAutoCopyDesc: 'Automatically copy selected text to clipboard',
+        settingLinkPreview: 'Link Preview',
+        settingLinkPreviewDesc: 'Show URL when hovering over links',
+        settingTouch: 'Touch Optimization',
+        settingTouchDesc: 'Enable mobile touch gestures (pinch to zoom, etc.)',
+        settingTheme: 'Terminal Theme',
+        settingThemeDesc: 'Choose the color scheme for terminal',
+        themeDark: 'Dark',
+        themeLight: 'Light',
+        themeHighContrast: 'High Contrast',
+        currentStatus: 'Current Status',
+        latency: 'Latency',
+        savedCommands: {
+            cloud: 'Cloud Sync',
+            title: 'Saved Commands',
+            subtitle: 'Store common commands and send them into the active terminal.',
+            add: 'Add',
+            synced: 'Synced',
+            encrypted: 'Encrypted',
+            count: '{count} saved',
+            collapse: 'Collapse saved commands',
+            expand: 'Expand saved commands',
+            open: 'Open saved commands',
+            short: 'Cmd',
+            new: 'New Command',
+            edit: 'Edit Command',
+            name: 'Name',
+            namePlaceholder: 'Example: Update package index',
+            command: 'Command',
+            commandPlaceholder: 'Enter the terminal command to save in the cloud',
+            description: 'Description',
+            descriptionPlaceholder: 'Optional note describing what this command does',
+            loadFailed: 'Failed to load saved commands',
+            createSuccess: 'Saved command created',
+            updateSuccess: 'Saved command updated',
+            saveFailed: 'Failed to save command',
+            deleteSuccess: 'Saved command deleted',
+            deleteFailed: 'Failed to delete command',
+            deleteConfirm: 'Delete "{name}"?',
+            emptyTitle: 'No saved commands yet',
+            emptyDescription: 'Use the add button to keep your common terminal commands here.',
+            selected: 'Selected: {name}',
+            notSelected: 'Select a command to execute or delete it',
+            execute: 'Run',
+            runHint: 'The command is sent straight into the active terminal and executed immediately.',
+            disconnectedHint: 'Connect the terminal before running a saved command',
+            shellRequiredHint: 'Wait for the interactive shell before running a saved command',
+        },
+        // Mobile accessory bar
+        paste: 'Paste',
+        hideKeyboard: 'Hide Keyboard',
+    },
+
+    // Terminal management page
+    terminalPage: {
+        newConnection: 'New Connection',
+        selectInstance: 'Select Instance',
+        runningCount: '{count} running instances',
+        selectedInstance: 'Selected Instance',
+        selectionHint: 'Pick a running instance and the terminal will connect directly into it.',
+        directShell: 'Console-first access',
+        directShellHint: 'The terminal attaches to the boot console first, then switches to the interactive shell as soon as it is ready.',
+        host: 'Host',
+        package: 'Package',
+        instanceId: 'Instance ID',
+        statusRunning: 'Running',
+        noConnections: 'No terminal connections',
+        noRunningInstances: 'No running instances',
+        noRunningInstancesHint: 'Start an instance first, or check its status from the instance detail page.',
+        connect: 'Connect',
+        description: 'Manage terminal connections for all instances',
+        searchInstances: 'Search by name or image...',
+        noMatchingInstances: 'No matching instances',
+        noMatchingInstancesHint: 'Try another keyword or clear the search to see all running instances.',
+    },
+
+    // Ticket System
+    tickets: {
+        title: 'Ticket Center',
+        myTickets: 'My Tickets',
+        hostTickets: 'Received Tickets',
+        createTicket: 'Create Ticket',
+        newTicket: 'New Ticket',
+        ticketDetails: 'Ticket Details',
+        noTickets: 'No Tickets',
+        noTicketsHint: 'You have not created any tickets yet',
+        noHostTickets: 'No Received Tickets',
+        noHostTicketsHint: 'Your hosts have not received any tickets',
+        noUserTickets: 'No User Tickets',
+        noUserTicketsHint: 'There are no user tickets sent directly to admins without an instance',
+        noOfficialTickets: 'No Official Tickets',
+        noOfficialTicketsHint: 'There are no tickets from official hosts',
+        noHostedTickets: 'No Hosted Tickets',
+        noHostedTicketsHint: 'There are no tickets from hosted nodes',
+        // Ticket status
+        status: {
+            open: 'Open',
+            in_progress: 'In Progress',
+            resolved: 'Resolved',
+            closed: 'Closed',
+        },
+        // Ticket priority
+        priority: {
+            low: 'Low',
+            normal: 'Normal',
+            high: 'High',
+            urgent: 'Urgent',
+        },
+        // Ticket category
+        category: {
+            general: 'General Inquiry',
+            billing: 'Billing Issue',
+            technical: 'Technical Support',
+            abuse: 'Abuse Report',
+        },
+        // Form
+        subject: 'Subject',
+        subjectPlaceholder: 'Brief description of the issue',
+        content: 'Content',
+        contentPlaceholder: 'Please enter at least 10 characters to describe your issue, or upload image attachments',
+        selectInstance: 'Select Instance',
+        selectInstanceHint: 'Select instance (optional)',
+        noInstancesHint: 'You have no instances, you can submit ticket directly',
+        hostedInstanceHint: 'For tickets related to hosted instances, please select the corresponding instance. The ticket will be sent to the node operator.',
+            hostedInstanceHintTitle: 'Hosted Instance Tips',
+        selectCategory: 'Select Category',
+        selectPriority: 'Select Priority',
+        // Actions
+        reply: 'Reply',
+        replyPlaceholder: 'Enter your reply...',
+        close: 'Close Ticket',
+        reopen: 'Reopen',
+        updateStatus: 'Update Status',
+        markResolved: 'Mark as Resolved',
+        markInProgress: 'Mark as In Progress',
+        // Confirmation dialogs
+        confirmClose: 'Close this ticket?',
+        confirmCloseHint: 'You will not be able to reply after closing',
+        // Messages
+        createSuccess: 'Ticket created successfully',
+        replySuccess: 'Reply sent successfully',
+        closeSuccess: 'Ticket closed',
+        deleteMessage: 'Delete message',
+        confirmDeleteMessage: 'Are you sure you want to delete this message? It will be invisible to everyone.',
+        deleteMessageSuccess: 'Message deleted',
+        statusUpdated: 'Status updated',
+        // Other
+        host: 'Host',
+        instance: 'Instance',
+        from: 'From',
+        assignedTo: 'Assigned To',
+        createdAt: 'Created At',
+        lastReply: 'Last Reply',
+        messages: 'Messages',
+        viewDetails: 'View Details',
+        pendingCount: 'Pending',
+        allHosts: 'All Hosts',
+        filterByHost: 'Filter by Host',
+        filterByStatus: 'Filter by Status',
+        sourceFilter: {
+            all: 'All Tickets',
+            user: 'User Tickets',
+            official: 'Official Tickets',
+            hosted: 'Hosted Tickets',
+        },
+        activeStatus: 'Active',
+        allStatus: 'All',
+        ownerReply: 'Support Reply',
+        userReply: 'User Reply',
+        ticketClosed: 'Ticket is closed, cannot reply',
+        mustSelectInstance: 'Please select an instance first',
+        noInstancesAvailable: 'No instances available',
+        instanceDetails: 'Instance Details',
+        instanceStatus: 'Status',
+        instanceId: 'Instance ID',
+        incusId: 'Incus ID',
+        packageName: 'Package',
+        cores: 'Cores',
+        memory: 'Memory',
+        disk: 'Disk',
+        image: 'Image',
+        loadMoreMessages: 'Load More Messages',
+        remaining: 'remaining',
+        needsReply: 'Needs Reply',
+        searchPlaceholder: 'Search ticket ID, subject, username...',
+        perPage: 'Per page',
+        totalCount: 'Total {count}',
+        images: {
+            label: 'Image Attachments',
+            hint: 'Supports JPG, PNG, WebP, GIF and AVIF. Up to {count} images, {size}MB each.',
+            add: 'Add Images',
+            remove: 'Remove Image',
+            selected: '{count}/{max} images selected',
+            maxReached: 'You can upload up to {count} images',
+            invalidType: 'Only JPG, PNG, WebP, GIF and AVIF images are supported',
+            fileTooLarge: 'Each image must be no larger than {size}MB',
+            loadFailed: 'Failed to load image',
+            zoomIn: 'Zoom in',
+            zoomOut: 'Zoom out',
+            resetZoom: 'Reset zoom',
+        },
+    },
+
+    // Checkin system
+    checkin: {
+        title: 'Daily Check-in',
+        checkinTab: 'Check-in',
+        redeemTab: 'Redeem',
+        recordsTab: 'Records',
+        // Checkin status
+        notCheckedIn: 'Not checked in today',
+        alreadyCheckedIn: 'Already checked in today',
+        checkinButton: 'Check-in',
+        checkinSuccess: 'Check-in successful',
+        noInstance: 'You need at least one instance to check in',
+        clickToOpen: 'Click the gift box to claim your reward',
+        opening: 'Opening',
+        revealing: 'Revealing reward',
+        congratulations: 'Congratulations! You got',
+        // Redeem code
+        redeemCode: 'Redeem Code',
+        codeExpired: 'Expired',
+        codeUsed: 'Used',
+        expiresIn: 'Expires in',
+        copyCode: 'Copy Code',
+        codeCopied: 'Code copied',
+        // Resource types
+        resourceType: 'Resource Type',
+        resourceValue: 'Resource Value',
+        cpu: 'CPU',
+        memory: 'Memory',
+        disk: 'Disk',
+        traffic: 'Traffic',
+        points: 'Points',
+        // Redeem
+        redeemTitle: 'Redeem Code',
+        inputCode: 'Enter redeem code',
+        selectInstance: 'Select Instance',
+        selectInstanceHint: 'Select a free instance to apply resources',
+        redeemButton: 'Redeem',
+        redeemSuccess: 'Redeem successful',
+        cappedFromPackageLimit: 'capped at package limit',
+        redeemHint: 'Check-in codes can only be used on free instances',
+        alreadyRedeemed: 'Check-in code already redeemed today',
+        noInstancesForRedeem: 'No free instances available',
+        // Records
+        checkinRecords: 'Check-in Records',
+        redeemRecords: 'Redeem Records',
+        noRecords: 'No records',
+                showingRecent: 'Showing {count} of {total}',
+        usedBy: 'Used by',
+        usedFor: 'Used for',
+        self: 'Self',
+        others: 'Others',
+        unused: 'Unused',
+        // Share rules
+        selfOnlyMode: 'Self-only',
+        selfOnlyHint: 'Your codes have been used by others for 2 consecutive days. From today, only you can use your codes until you use one yourself',
+                // Rules
+                rulesTitle: 'Check-in Rules',
+                rulesCheckin: 'Check-in',
+                rulesCheckin1: 'Once daily, resets at midnight',
+                rulesCheckin2: 'Requires at least 1 instance',
+                rulesCheckin3: 'Randomly receive CPU / Memory / Disk / Traffic rewards',
+                rulesRedeem: 'Redemption',
+                rulesRedeem1: 'Redeem codes expire in 3 hours',
+                rulesRedeem2: 'Limit 1 redemption per person per day',
+                rulesRedeem3: 'Resources cannot exceed package limits',
+                rulesShare: 'Sharing',
+                rulesShare1: 'Redeem codes can be shared with friends',
+                rulesShare2: 'Used by others for 2 consecutive days will restrict to self-only until you use one yourself',
+        // Units
+        percent: '%',
+        mb: 'MB',
+        gb: 'GB',
+        // Resource pool system
+        tabCheckin: 'Check-in',
+        tabRedeem: 'Redeem',
+        tabPool: 'Resource Pool',
+        tabLogs: 'Logs',
+        clickToCheckin: 'Click to check in and claim rewards',
+        noInstances: 'You need at least one instance to check in',
+        bonusPoints: 'Bonus {points} points',
+        savedToPool: 'Added to resource pool',
+        redeemSystemCode: 'System Redeem Code',
+        enterCode: 'Enter redeem code',
+        systemCodePlaceholder: 'Enter h- prefix system code',
+        systemCodeHint: 'System codes (h- prefix) require selecting a target instance, resources will be applied directly to that instance',
+        redeem: 'Redeem',
+        redeemToInstanceSuccess: '{type} +{value}{unit} applied to {instance}',
+        applyToInstance: 'Apply to Instance',
+        amount: 'Amount',
+        targetInstance: 'Target Instance',
+        kvmCpuHint: 'CPU must be a multiple of 100 when applied to KVM instances',
+        kvmHint: 'KVM limits: CPU must be multiple of 100, memory must be multiple of 128MB, disk must be multiple of 1GB, and memory/disk changes require stopped instance. LXC instances have no such limits.',
+        apply: 'Apply',
+        applySuccess: '{type} +{value}{unit} applied to {instance}',
+        insufficientPool: 'Insufficient resource pool balance',
+        enterAmount: 'Please enter amount',
+        allActions: 'All actions',
+        allResources: 'All resources',
+        noLogs: 'No records',
+        action: 'Action',
+        instance: 'Instance',
+        time: 'Time',
+        actionCheckin: 'Check-in',
+        actionRedeem: 'Redeem',
+        actionAdminGrant: 'Admin grant',
+        actionSystemGrant: 'System reward',
+        actionLottery: 'Lottery',
+        actionApply: 'Apply',
+        actionSystemRedeem: 'System Code',
+    },
+
+    // Redeem codes management
+    redeemCodes: {
+        title: 'Redeem Codes',
+        create: 'Create Code',
+        createTitle: 'Create Redeem Code',
+        createBatch: 'Batch Create',
+        codeType: 'Resource Type',
+        codeValue: 'Resource Value',
+        resourceType: 'Resource Type',
+        resourceValue: 'Resource Value',
+        maxUses: 'Max Uses',
+        usedCount: 'Used',
+        expiresAt: 'Expires At',
+        expiresAtHint: 'Leave empty for no expiration',
+        neverExpires: 'Never expires',
+        enabled: 'Enabled',
+        disabled: 'Disabled',
+        enable: 'Enable',
+        disable: 'Disable',
+        remark: 'Remark',
+        remarkPlaceholder: 'Optional remark',
+        batchCount: 'Quantity',
+        batchCountHint: 'When greater than 1, generates single-use codes in batch',
+        createSuccess: 'Redeem code created',
+        batchCreateSuccess: 'Successfully created {count} redeem codes',
+        createFailed: 'Failed to create',
+        deleteConfirm: 'Confirm Delete',
+        deleteSuccess: 'Successfully deleted {count} code(s)',
+        deleteFailed: 'Failed to delete',
+        confirmDelete: 'Confirm Delete',
+        confirmDeleteMessage: 'Are you sure you want to delete {count} selected code(s)? This action cannot be undone.',
+        deleteSelected: 'Delete Selected ({count})',
+        updateSuccess: 'Updated successfully',
+        copyCode: 'Copy Code',
+        copyAll: 'Copy All',
+        copyCodes: 'Copy All Codes',
+        codesCopied: 'Codes copied',
+        exhausted: 'Exhausted',
+        expired: 'Expired',
+        active: 'Active',
+        paused: 'Paused',
+        usages: 'Usage History',
+        usageRecords: 'Usage Records',
+        noUsages: 'No usage records',
+        user: 'User',
+        instance: 'Instance',
+        usedAt: 'Used At',
+        selectType: 'Select resource type',
+        selectValue: 'Please select a value',
+        empty: 'No redeem codes',
+        emptyList: 'No redeem codes yet. Click the button above to create.',
+        filterAll: 'All',
+        filterEnabled: 'Enabled',
+        filterDisabled: 'Disabled',
+        batchDelete: 'Batch Delete',
+        batchDeleteConfirm: 'Are you sure you want to delete {count} selected codes?',
+        usesHint: 'Set to 1 for single-use code',
+        batchHint: 'Batch create generates single-use codes only',
+        batchResult: 'Batch Create Result',
+        code: 'Code',
+        type: 'Type',
+        usage: 'Usage',
+        status: 'Status',
+        actions: 'Actions',
+        loadFailed: 'Failed to load',
+        batchId: 'Batch ID',
+        batchLimitHint: 'Each user can only use one code from the same batch',
+        batch: 'Batch',
+        valueRange: 'Range: {min} - {max}',
+        valueOutOfRange: 'Value must be between {min} and {max}',
+        valueMustBeInteger: 'Value must be an integer',
+    },
+
+    // Extensions
+    extensions: {
+        title: 'Scripts',
+        description: 'Manage extensions',
+        initCommands: {
+            title: 'Custom Init Commands',
+            description: 'Create command templates to run during instance creation/rebuild',
+            add: 'Add Command',
+            addFirst: 'Add First Command',
+            edit: 'Edit Command',
+            view: 'View Details',
+            viewDetail: 'Command Details',
+            empty: 'No custom commands',
+            emptyHint: 'Click the button above to create your first init command template',
+            name: 'Name',
+            namePlaceholder: 'Enter command name',
+            command: 'Commands',
+            commandPlaceholder: 'Enter shell commands, one per line\nExample:\napt update\napt install -y nginx',
+            commandHint: 'One command per line, executed in order during instance initialization',
+            distros: 'Compatible Distros',
+            distrosHint: 'Select the Linux distributions this command is compatible with',
+            remark: 'Description',
+            remarkPlaceholder: 'Optional description',
+            createdAt: 'Created At',
+            actions: 'Actions',
+            status: 'Status',
+            statusEnabled: 'Enabled',
+            statusDisabled: 'Disabled',
+            enabled: 'Command enabled',
+            disabled: 'Command disabled',
+            clickToEnable: 'Click to enable',
+            clickToDisable: 'Click to disable',
+            toggleFailed: 'Failed to toggle status',
+            confirmDelete: 'Are you sure you want to delete command "{name}"? This action cannot be undone.',
+            createSuccess: 'Command created',
+            updateSuccess: 'Command updated',
+            deleteSuccess: 'Command deleted',
+            createFailed: 'Failed to create',
+            updateFailed: 'Failed to update',
+            deleteFailed: 'Failed to delete',
+            loadFailed: 'Failed to load commands',
+            loadDetailFailed: 'Failed to load command details',
+            noContent: 'No content',
+            lineCount: '{count} lines',
+            // Modal
+            addTitle: 'Add Init Command',
+            editTitle: 'Edit Init Command',
+            modalDesc: 'Commands will be executed during instance initialization',
+            // Selector
+            selectTitle: 'Init Commands',
+            optional: '(optional)',
+            noAvailable: 'No init commands available',
+            goToManage: 'Go to Extensions to create',
+            selectHint: 'Selected commands will run after instance initialization completes',
+            selectedCount: '{count} selected',
+            showAll: 'Show all {count}',
+            collapse: 'Collapse',
+            // Distro names
+            distroAll: 'All Distros',
+            distroNames: {
+                all: 'All Distros',
+                ubuntu: 'Ubuntu',
+                debian: 'Debian',
+                rhel: 'RHEL/CentOS/Fedora',
+                alpine: 'Alpine',
+                arch: 'Arch Linux',
+                suse: 'openSUSE/SLES',
+            },
+        },
+    },
+
+    // Billing
+    billing: {
+        // Common
+        balance: 'Balance',
+        frozen: 'Frozen',
+        totalRecharge: 'Total Recharge',
+        totalConsume: 'Total Consumption',
+        yuan: 'CNY',
+        months: 'months',
+        month: 'mo',
+        days: 'days',
+        freeInstance: 'Free Instance',
+        paidInstance: 'Paid Instance',
+        traffic: 'Monthly Traffic',
+        trafficBidirectional: 'Bidirectional',
+        soldOut: 'Sold Out',
+        save: 'Save',
+        setupFee: 'Setup Fee',
+        cycle: {
+            monthly: 'Monthly',
+            quarterly: 'Quarterly',
+            semiAnnual: 'Semi-Annual',
+            annual: 'Annual',
+            months: 'months',
+        },
+        
+        // Instance billing info
+        billingInfo: 'Billing Info',
+        currentPlan: 'Current Plan',
+        expiresAt: 'Expires At',
+        neverExpires: 'Never Expires',
+        autoRenew: 'Auto Renew',
+        autoRenewOn: 'Auto On',
+        autoRenewOff: 'Auto Off',
+        autoRenewEnabled: 'Auto-renew enabled',
+        autoRenewDisabled: 'Auto-renew disabled',
+        autoRenewing: 'Auto-renewing',
+        enableAutoRenew: 'Enable Auto-renew',
+        disableAutoRenew: 'Disable Auto-renew',
+        autoRenewHint: 'Will automatically deduct from balance 24 hours before expiration',
+        autoRenewDesc: 'Once enabled, the instance will automatically renew per {cycle} cycle, costing ￥{price} each time',
+        currentStatus: 'Current Status',
+        
+        // Renewal
+        renew: 'Renew',
+        renewInstance: 'Renew Instance',
+        renewTitle: 'Renew Instance',
+        selectRenewPeriod: 'Select Renewal Period',
+        renewMonths: '{months} months',
+        renewPrice: 'Renewal Amount',
+        originalPrice: 'Original Price',
+        affDiscount: 'Promo Code Discount',
+        actualPrice: 'Actual Price',
+        newExpiresAt: 'New Expiration',
+        currentBalance: 'Current Balance',
+        balanceAfterRenew: 'Balance After Renewal',
+        insufficientBalance: 'Insufficient Balance',
+        goRecharge: 'Go to Recharge',
+        renewing: 'Renewing...',
+        renewSuccess: 'Renewal Successful',
+        renewFailed: 'Renewal Failed',
+        freeInstanceNoRenew: 'Free instances do not need renewal',
+        hostingRenewTooEarly: 'Hosted instances can only be renewed within 7 days before expiration (currently {days} days remaining)',
+        
+        // Plan change
+        changePlan: 'Upgrade',
+        changePlanTitle: 'Upgrade Instance Plan',
+        upgrade: 'Upgrade',
+        selectNewPlan: 'Select New Plan',
+        currentPlanLabel: 'Current Plan',
+        newPlanLabel: 'New Plan',
+        remainingDays: 'Remaining Days',
+        remainingValue: 'Remaining Value',
+        newPlanCost: 'New Plan Cost',
+        priceDiff: 'Price Difference',
+        needPay: 'Amount to Pay',
+        noPriceChange: 'No Price Difference',
+        isUpgrade: 'Upgrade',
+        planNotActive: 'Plan is inactive',
+        planNoStock: 'Plan is sold out',
+        changePlanInProgress: 'Upgrading plan...',
+        changePlanSuccess: 'Plan upgraded successfully',
+        changePlanFailed: 'Failed to upgrade plan',
+        needRestart: 'Please restart instance to apply new configuration',
+        newConfig: 'New Configuration',
+        freeInstanceNoChange: 'Free instances do not support upgrade',
+        samePlan: 'Cannot change to the same plan',
+        // Change rules
+        viewRules: 'View Rules',
+        hideRules: 'Hide Rules',
+        changePlanRulesTitle: 'Plan Upgrade Rules',
+        changePlanRule1: 'Price difference calculated by daily rate; pay difference on upgrade',
+        changePlanRule2: 'Remaining days must be ≥ 15 to upgrade plan',
+        changePlanRule3: 'Expiration date remains unchanged',
+        changePlanRule4: 'Promo code discounts continue to apply',
+        // Highest plan
+        alreadyHighestPlan: 'Already on the highest plan',
+        contactForCustomPlan: 'Submit a ticket for custom higher configurations',
+        // KVM/LXC restart hints
+        kvmRestartHint: 'KVM instances require a restart to apply new configuration; instances using reinstall scripts may need to expand partitions manually',
+        lxcInstantHint: 'LXC instance configuration takes effect immediately after upgrade',
+        kvmRestartRequired: 'KVM instance plan has been changed, please restart the instance to apply new configuration',
+        // Cannot change reasons
+        cannotChange: 'Cannot Upgrade Now',
+        cannotChangeRemainingDays: 'Less than {days} days remaining, cannot upgrade plan',
+        cannotChangeInstanceStatus: 'Current instance status does not allow plan upgrade, only running or stopped instances can be modified',
+        cannotChangeUnknown: 'Cannot upgrade plan at this time',
+        // Calculation details
+        oldDailyPrice: 'Current Daily Rate',
+        newDailyPrice: 'New Daily Rate',
+        day: 'day',
+        newPlanCostOriginal: 'New Plan Remaining Cost',
+        newPlanCostFinal: 'New Plan Remaining Cost (After Discount)',
+        discountAmount: 'Promo Discount',
+        
+        // Billing records
+        records: 'Records',
+        billingRecords: 'Billing Records',
+        recordType: 'Type',
+        recordAmount: 'Amount',
+        recordPeriod: 'Period',
+        recordRemark: 'Remark',
+        recordTypes: {
+            purchase: 'Purchase',
+            renewal: 'Renewal',
+            upgrade: 'Upgrade',
+            downgrade: 'Downgrade',
+            admin_extension: 'Admin Extension',
+        },
+        
+        // Recharge
+        recharge: 'Recharge',
+        rechargeTitle: 'Account Recharge',
+        rechargeAmount: 'Recharge Amount',
+        actualAmount: 'Actual Amount',
+        fee: 'Fee',
+        minAmount: 'Minimum Amount',
+        maxAmount: 'Maximum Amount',
+        selectPaymentMethod: 'Select Payment Method',
+        noPaymentProviders: 'No payment methods available',
+        createOrder: 'Create Order',
+        creatingOrder: 'Creating order...',
+        orderCreated: 'Order Created',
+        orderNo: 'Order No.',
+        orderStatus: 'Order Status',
+        orderExpiredAt: 'Payment Deadline',
+        cancelOrder: 'Cancel Order',
+        orderCancelled: 'Order Cancelled',
+        orderStatus_pending: 'Pending',
+        orderStatus_paid: 'Paid',
+        orderStatus_completed: 'Completed',
+        orderStatus_failed: 'Failed',
+        orderStatus_cancelled: 'Cancelled',
+        orderStatus_expired: 'Expired',
+        orderStatus_refunded: 'Refunded',
+        
+        // Recharge records
+        rechargeRecords: 'Recharge Records',
+        noRecords: 'No Records',
+        viewDetails: 'View Details',
+        
+        // Balance logs
+        balanceLogs: 'Balance History',
+        balanceLogTypes: {
+            recharge: 'Recharge',
+            purchase: 'Purchase',
+            renewal: 'Renewal',
+            upgrade: 'Upgrade',
+            downgrade: 'Downgrade',
+            refund: 'Refund',
+            admin_adjust: 'Admin Adjustment',
+        },
+        
+        // Package plans
+        plan: 'Plan',
+        planName: 'Plan Name',
+        planPrice: 'Price',
+        planBillingCycle: 'Billing Cycle',
+        planConfig: 'Configuration',
+        planStock: 'Stock',
+        planSoldOut: 'Sold Out',
+        planInactive: 'Inactive',
+        billingCycleMonthly: 'Monthly',
+        billingCycleQuarterly: 'Quarterly',
+        billingCycleYearly: 'Yearly',
+        perMonth: '/mo',
+        perQuarter: '/qtr',
+        perYear: '/yr',
+    },
+
+    // Hosting Access
+    hosting: {
+        accessDenied: {
+            title: 'Hosting Requirements Not Met',
+            description: 'You need to meet the following condition to use hosting features:',
+            condition: 'Own at least 1 instance',
+            currentInstances: 'Currently own {count} instances',
+            hint: 'Includes both free and paid instances, from official or hosted nodes.',
+            featureHiddenCondition: 'Hosting is currently unavailable to new users',
+            featureHiddenCurrent: 'You have not created any host yet, so this entry is currently hidden by the system.',
+            featureHiddenHint: 'Contact an administrator to reopen hosting access, or try again when the feature is enabled again.',
+        },
+    },
+
+    // Hosting Wallet
+    hostingWallet: {
+        title: 'Hosting Earnings',
+        description: 'View your node hosting earnings and withdrawal records',
+        hostingMember: 'Hosting Member',
+        notice: {
+            title: 'Hosting Notice',
+        },
+        balance: {
+            available: 'Available Balance',
+            frozen: 'Frozen',
+            frozenNote: 'Income unfreezes after 30 days',
+            totalIncome: 'Total Income',
+        },
+        stats: {
+            myHostsCount: 'Hosted Nodes',
+            instancesOnMyHosts: 'Node Instances',
+            uniqueCustomersCount: 'Customers',
+            monthIncome: 'This Month',
+        },
+        withdraw: {
+            button: 'Request Withdrawal',
+            minAmountNote: 'Withdrawal available when balance reaches {amount}',
+        },
+        tabs: {
+            overview: 'Overview',
+            logs: 'Transactions',
+            withdrawals: 'Withdrawals',
+            blocks: 'Blacklist',
+        },
+        overview: {
+            title: 'Withdrawal Info',
+            howItWorks: 'How It Works',
+            step1Title: 'User Purchases',
+            step1Desc: 'Users buy/renew instances on your nodes',
+            step2Title: 'Income Frozen',
+            step2Desc: 'Earnings credited to balance, frozen for 30 days',
+            step3Title: 'Withdraw',
+            step3Desc: 'Withdraw after freeze period ends',
+            minAmountTitle: 'Minimum Amount',
+            minAmount: 'Minimum withdrawal {amount}',
+            feeTitle: 'Withdrawal Fee',
+            feeDesc: 'Panel balance withdrawal fee {rate}%',
+            feeDescNew: 'Panel balance withdrawal fee 5%, specified method fee 10%',
+            manualTitle: 'Manual Withdrawal',
+            manualDesc: 'For other methods (10% fee), please submit a ticket',
+            withdrawMethodTitle: 'Withdrawal Method',
+            withdrawMethodDesc: 'Self-serve withdraw to balance, or submit a ticket for other withdrawal methods',
+        },
+        logs: {
+            noRecords: 'No transaction records',
+            emptyHint: 'When users purchase instances on your nodes, earnings will appear here',
+            searchPlaceholder: 'Search by username/email/instance...',
+            filterAll: 'All Types',
+            freePlan: 'Free',
+            columns: {
+                type: 'Type',
+                amount: 'Amount',
+                status: 'Status',
+                buyer: 'Buyer',
+                instance: 'Instance',
+                host: 'Host',
+                package: 'Package',
+                plan: 'Plan',
+                remark: 'Remark',
+                time: 'Time',
+            },
+            types: {
+                income: 'Income',
+                unfreeze: 'Unfreeze',
+                withdraw: 'Withdrawal',
+                deduction: 'Deduction',
+            },
+            actionTypes: {
+                purchase: 'Purchase',
+                renew: 'Renew',
+                upgrade: 'Upgrade',
+                destroy: 'Destroy',
+                unfreeze: 'Unfreeze',
+                withdraw: 'Withdrawal',
+                admin_adjust: 'Admin Adjust',
+            },
+            status: {
+                frozen: 'Frozen',
+                unfrozen: 'Unfrozen',
+            },
+            unknownInstance: 'Unknown Instance',
+            unknownUser: 'Unknown User',
+            unknownHost: 'Unknown Host',
+        },
+        perPage: '/page',
+        prevPage: 'Previous',
+        nextPage: 'Next',
+        withdrawals: {
+            noRecords: 'No withdrawal records',
+            emptyTitle: 'No Withdrawals Yet',
+            emptyHint: 'You can request a withdrawal once your available balance reaches the minimum amount',
+            startEarning: 'Withdraw Now',
+            columns: {
+                amount: 'Amount',
+                actualAmount: 'Actual Amount',
+                target: 'Method',
+                status: 'Status',
+                time: 'Request Time',
+            },
+            target: {
+                balance: 'Panel Balance',
+            },
+            status: {
+                pending: 'Pending',
+                approved: 'Approved',
+                rejected: 'Rejected',
+                completed: 'Completed',
+            },
+        },
+        blocks: {
+            title: 'User Blacklist',
+            description: 'Blocked users cannot see your hosted packages or plans in the instance creation flow, and cannot create new instances from your packages.',
+            total: '{count} users',
+            searchLabel: 'Search users',
+            searchPlaceholder: 'Enter UID, username, or email, at least 2 characters',
+            noSearchResults: 'No matching users found',
+            blockedUsers: 'Blocked Users',
+            effectHint: 'These users cannot create new instances from your hosted packages. Existing instances and renewals are unaffected.',
+            emptyTitle: 'No blocked users',
+            emptyHint: 'Search above to add one.',
+            block: 'Block',
+            unblock: 'Unblock',
+            blockSuccess: 'User added to blacklist',
+            unblockSuccess: 'User removed from blacklist',
+        },
+        modal: {
+            title: 'Request Withdrawal',
+            amount: 'Withdrawal Amount',
+            availableNote: 'Available: {amount}',
+            targetBalance: 'To panel balance ({rate}% fee)',
+            manualWithdrawNote: 'For manual withdrawal to specified method (10% fee), please submit a ticket to request hosting balance withdrawal',
+            summary: {
+                amount: 'Withdrawal Amount',
+                fee: 'Fee',
+                actual: 'Actual Amount',
+            },
+            cancel: 'Cancel',
+            confirm: 'Confirm Withdrawal',
+            submitting: 'Submitting...',
+        },
+        errors: {
+            minAmount: 'Minimum withdrawal is {amount}',
+            exceedBalance: 'Amount exceeds available balance',
+        },
+    },
+
+    vipBenefits: {
+        commonMember: 'Member',
+        overviewLabel: 'VIP Benefits Hall',
+        overviewTitle: 'Current Level {level}',
+        overviewDesc: 'At {level}, you can claim every unlocked reward below. Claim lower-level rewards before higher-level rewards.',
+        noVipDesc: 'Upgrade to VIP to unlock level rewards. All rewards are shown from low to high level.',
+        availableSummary: 'Unlocked Reward Summary',
+        availableSummaryDesc: 'A compact total of every reward unlocked by your current level.',
+        remainingSummary: 'Remaining',
+        noAvailableReward: 'No unlocked rewards yet',
+        empty: 'No VIP benefits configured yet.',
+        levelRewards: 'VIP{level} Rewards',
+        levelUnlocked: 'This level is unlocked',
+        levelLocked: 'Unlock after upgrade',
+        rewardCount: '{count} reward(s)',
+        rewardValue: 'Reward',
+        claimProgress: 'Claims',
+        claim: 'Claim',
+        claimAll: 'Claim All Remaining',
+        claimingAll: 'Claiming...',
+        claimed: 'Claimed',
+        pendingDelivery: 'Pending',
+        upgradeRequired: 'Upgrade Required',
+        claimLowerFirst: 'Claim VIP{level} First',
+        claimSuccess: 'Reward claimed',
+        noClaimableReward: 'No claimable rewards',
+        rewardReceived: 'VIP benefit reward',
+        pointsUnit: 'points',
+        instanceReward: 'Package instance',
+        instanceValue: '{plan} · {quantity} instance(s) · {days} day(s)',
+        feedback: {
+            delivered: 'Delivered',
+            pending: 'Pending delivery',
+        },
+        types: {
+            balance: 'Balance',
+            points: 'Points',
+            instance: 'Instance',
+        },
+        summary: {
+            unlocked: 'Unlocked',
+            claimable: 'Claimable',
+            claimed: 'Claimed',
+            pending: 'Pending',
+        },
+        status: {
+            claimable: 'Claimable',
+            claimed: 'Claimed',
+            locked: 'Locked',
+            blocked: 'Claim VIP{level} first',
+            pending: 'Pending',
+        },
+    },
+
+    // Benefits System
+    entertainment: {
+        title: 'Benefits',
+        description: 'Claim membership benefits and manage points and badges',
+        currentPoints: 'Current Points',
+        convertPoints: 'Convert Points',
+        noPointsToConvert: 'No points to convert',
+        convertSuccess: 'Successfully converted {points} points',
+        convertFailed: 'Conversion failed',
+        pointsUnit: 'pts',
+        tabs: {
+            lottery: 'Lottery',
+            records: 'Lottery Records',
+            points: 'Points History',
+        },
+        mainTabs: {
+            vipBenefits: 'VIP Benefits',
+            lottery: 'Lottery',
+            badge: 'Badges',
+            blindbox: 'Blind Box',
+            checkin: 'Check-in',
+        },
+        comingSoon: 'Coming Soon',
+        blindbox: {
+            title: 'Blind Box',
+        },
+        checkinSection: {
+            title: 'Daily Check-in',
+        },
+        // Lottery
+        spin: 'Spin',
+        spinCost: 'Cost: {points} points',
+        spinFailed: 'Lottery failed',
+        selectLottery: 'Please select a lottery',
+        notEnoughPoints: 'Not enough points',
+        noActiveLotteries: 'No active lottery available',
+        prizeList: 'Prize List',
+        probability: 'Probability',
+        remaining: 'Remaining',
+        // Multi Draw
+        multiDraw: 'Multi Draw x10',
+        multiDrawAgain: 'Draw Again',
+        multiDrawFailed: 'Multi draw failed',
+        multiDrawResults: 'Multi Draw Results',
+        multiDrawStopped: 'Draw stopped early',
+        notEnoughPointsForMulti: 'Not enough points. Required: {required}, Current: {current}',
+        totalDraws: 'Total Draws',
+        totalPointsSpent: 'Points Spent',
+        badgeUnit: 'badge(s)',
+        instanceUnit: '',
+        multiDrawBadgesTitle: 'Badges Won in This 10x Draw',
+        multiDrawBadgesSubtitle: 'You obtained {count} badge rewards in this 10x draw. Review them before the full result list.',
+        continueToMultiResults: 'Continue to 10x Results',
+        // Prize types
+        prizeTypes: {
+            nothing: 'Better Luck Next Time',
+            points: 'Points',
+            balance: 'Balance',
+            badge: 'Random Badge',
+            instance: 'Instance',
+            cpu: 'CPU Resource',
+            memory: 'Memory Resource',
+            disk: 'Disk Resource',
+            traffic: 'Traffic Resource',
+        },
+        // Result
+        congratulations: 'Congratulations!',
+        betterLuckNextTime: 'Better Luck Next Time',
+        wonPoints: 'Won {points} points',
+        wonBalance: 'Won ¥{amount} balance',
+        wonBadge: 'Won badge: {badge}',
+        wonInstance: 'Please submit a ticket to claim your instance prize',
+        wonCpu: 'Won {value}% CPU, added to resource pool',
+        wonMemory: 'Won {value}MB memory, added to resource pool',
+        wonDisk: 'Won {value}MB disk, added to resource pool',
+        wonTraffic: 'Won {value}GB traffic, added to resource pool',
+        // Records
+        lotteryName: 'Lottery Name',
+        prize: 'Prize',
+        prizeType: 'Prize Type',
+        value: 'Value',
+        time: 'Time',
+        noRecords: 'No lottery records',
+        loadRecordsFailed: 'Failed to load lottery records',
+        loadLotteriesFailed: 'Failed to load lotteries',
+        // Points history
+        pointsLogType: 'Type',
+        pointsChange: 'Change',
+        pointsAfter: 'Balance After',
+        remark: 'Remark',
+        noPointsLogs: 'No points history',
+        loadPointsLogsFailed: 'Failed to load points history',
+        pointsLogTypes: {
+            convert: 'Consumption Conversion',
+            lotteryWin: 'Lottery Win',
+            lotterySpend: 'Lottery Spend',
+            badgeDrawSpend: 'Badge Random Draw Spend',
+            badgeSelectSpend: 'Badge Select Spend',
+            adminAdjust: 'Admin Adjustment',
+            checkin: 'Check-in Reward',
+        },
+        badges: {
+            drawTab: 'Draw',
+            myTab: 'My Badges',
+            randomTitle: 'Random Draw',
+            randomHint: 'Equal odds, guaranteed badge',
+            randomDescription: 'Spend {points} points for an equal-odds draw. Every draw grants one badge copy.',
+            randomButton: 'Random Draw ({points} pts)',
+            randomMultiButton: '10x Random Draw ({points} pts)',
+            selectTitle: 'Select Badge',
+            selectHint: 'Choose a specific badge directly',
+            selectDescription: 'Spend {points} points to directly claim one selected badge.',
+            selectButton: 'Claim Selected Badge ({points} pts)',
+            multiDrawTitle: 'Badges Won in 10x Draw',
+            multiDrawSubtitle: 'You obtained {count} badges in this 10x draw.',
+            myTitle: 'My Badges',
+            summary: 'Available {available}, Applied {applied}',
+            filterAll: 'All Types',
+            ownedCount: 'Owned {count}',
+            empty: 'No badges obtained yet.',
+            statusAvatar: 'Applied to avatar',
+            statusInstance: 'Applied to instance',
+            statusUnused: 'Unused',
+            sourceLabel: 'Source',
+            sourceDraw: 'Random draw',
+            sourceLottery: 'Lottery reward',
+            sourceSelect: 'Direct select',
+            sourceAdminGrant: 'Admin grant',
+            obtainedAt: 'Obtained At',
+            currentInstance: 'Current Instance',
+            applyAvatar: 'Apply to Avatar',
+            applyInstance: 'Apply to Instance Icon',
+            applyInstanceButton: 'Apply to Instance',
+            selectInstance: 'Select an instance',
+            unapply: 'Remove Application',
+            selectRequired: 'Please select a badge first',
+            instanceRequired: 'Please select an instance first',
+            drawSuccess: 'Badge obtained: {badge}',
+            selectSuccess: 'Badge claimed: {badge}',
+            rewardTitleDraw: 'Draw Successful',
+            rewardTitleSelect: 'Claim Successful',
+            rewardSubtitle: 'Your new badge is now in your collection. You can apply it to your avatar or an instance from My Badges.',
+            rewardSeriesLabel: 'Series',
+            rewardRemainingPoints: 'Remaining Points',
+            rewardDrawAgain: 'Draw Again',
+            rewardViewMine: 'View My Badges',
+            applyAvatarSuccess: 'Applied to avatar',
+            applyInstanceSuccess: 'Applied to instance icon',
+            unapplySuccess: 'Application removed',
+        },
+        // Admin
+        admin: {
+            title: 'Entertainment Management',
+            description: 'Manage lotteries, prizes, and user points',
+            tabs: {
+                lotteries: 'Lotteries',
+                records: 'Win Records',
+                users: 'User Points',
+                badges: 'Badges',
+            },
+            createLottery: 'Create Lottery',
+            editLottery: 'Edit Lottery',
+            lotteryName: 'Lottery Name',
+            enterLotteryName: 'Enter lottery name',
+            lotteryDesc: 'Description',
+            enterDescription: 'Enter description (optional)',
+            costPoints: 'Cost Points',
+            startAt: 'Start Date',
+            endAt: 'End Date',
+            isActive: 'Active',
+            enterName: 'Please enter name',
+            invalidCostPoints: 'Cost points must be greater than 0',
+            createSuccess: 'Created successfully',
+            updateSuccess: 'Updated successfully',
+            saveFailed: 'Failed to save',
+            deleteSuccess: 'Deleted successfully',
+            deleteFailed: 'Failed to delete',
+            noLotteries: 'No lotteries',
+            loadLotteriesFailed: 'Failed to load lotteries',
+            prizes: 'Prizes',
+            totalDraws: 'Total Draws',
+            status: 'Status',
+            active: 'Active',
+            inactive: 'Inactive',
+            // Prize management
+            managePrizes: 'Manage Prizes',
+            addPrize: 'Add Prize',
+            prizeName: 'Prize Name',
+            prizeType: 'Prize Type',
+            prizeValue: 'Prize Value',
+            balanceValue: 'Balance (cents)',
+            balanceCents: 'Enter cents, e.g. 100=¥1',
+            cpuPercent: 'Enter CPU percentage',
+            memoryMB: 'Enter memory (MB)',
+            diskMB: 'Enter disk (MB)',
+            trafficGB: 'Enter traffic (GB)',
+            probability: 'Weight',
+            quantity: 'Quantity',
+            unlimited: 'Unlimited',
+            noQuantityForType: 'This prize type cannot have quantity limits',
+            replenish: 'Replenish',
+            remaining: 'Remaining',
+            replenishPlaceholder: 'Enter amount to add',
+            instanceDesc: 'Instance Description',
+            instanceDescPlaceholder: 'e.g. 1 Core/1G RAM/10G SSD',
+            noPrizes: 'No prizes. Click the button above to add one.',
+            enterPrizeName: 'Please enter prize name',
+            invalidProbability: 'Weight must be greater than 0',
+            savePrizesSuccess: 'Prizes saved successfully',
+            savePrizesFailed: 'Failed to save prizes',
+            // Win records
+            user: 'User',
+            searchUser: 'Search username',
+            noRecords: 'No win records',
+            loadRecordsFailed: 'Failed to load win records',
+            // User points
+            currentPoints: 'Current Points',
+            totalEarned: 'Total Earned',
+            totalSpent: 'Total Spent',
+            lastConvertedAt: 'Last Converted',
+            noUsers: 'No user points data',
+            loadUsersFailed: 'Failed to load user points',
+            // Badge catalog
+            badgeCatalog: {
+                loadFailed: 'Failed to load badge catalog',
+                fillSeriesRequired: 'Please fill in series ID, title, name, and description',
+                seriesUpdated: 'Series updated',
+                seriesCreated: 'Series created',
+                saveSeriesFailed: 'Failed to save series',
+                seriesDeleted: 'Series deleted',
+                deleteSeriesFailed: 'Failed to delete series',
+                fillBadgeRequired: 'Please fill in badge ID, name, label, series, and default image URL',
+                badgeUpdated: 'Badge updated',
+                badgeCreated: 'Badge created',
+                saveBadgeFailed: 'Failed to save badge',
+                badgeDeleted: 'Badge deleted',
+                deleteBadgeFailed: 'Failed to delete badge',
+                addSeries: 'Add Series',
+                addBadge: 'Add Badge',
+                series: {
+                    title: 'Series',
+                    description: 'Controls frontend filter groups and whole-series availability',
+                    add: 'Add',
+                    all: 'All Series',
+                    enabledCount: '{active} / {total} enabled',
+                    empty: 'No series',
+                    editTitle: 'Edit Series',
+                    createTitle: 'Add Series',
+                    id: 'Series ID',
+                    sort: 'Sort',
+                    nameZh: 'Chinese Name',
+                    nameEn: 'English Name',
+                    titleLabel: 'Title',
+                    titlePlaceholder: 'SUPREME Series',
+                    descriptionLabel: 'Description',
+                    sourceId: 'Source ID',
+                    sourceLabel: 'Source Name',
+                    enable: 'Enable this series',
+                },
+                badges: {
+                    title: 'Badges',
+                    currentFilter: 'Current filter: {name}',
+                    empty: 'No badges',
+                    tableBadge: 'Badge',
+                    tableSeries: 'Series',
+                    tableAssetUrl: 'Image URL',
+                    tableStatus: 'Status',
+                    tableUsage: 'Usage',
+                    drawable: 'Drawable',
+                    notDrawable: 'Not drawable',
+                    usage: 'Owned {ownership} / Avatar {avatar} / Instance {instance}',
+                    editTitle: 'Edit Badge',
+                    createTitle: 'Add Badge',
+                    id: 'Badge ID',
+                    series: 'Series',
+                    name: 'Name',
+                    nameEn: 'English Name',
+                    fullLabel: 'Full Label',
+                    fullLabelPlaceholder: 'Elite',
+                    sourceId: 'Source ID',
+                    sourceLabel: 'Source Name',
+                    assetUrl: 'Default Image URL',
+                    assetUrlPlaceholder: '/badges/dark/elite.svg or https://example.com/badge.svg',
+                    assetUrlDark: 'Dark Image URL',
+                    assetUrlLight: 'Light Image URL',
+                    sort: 'Sort',
+                    enable: 'Enable this badge',
+                    preview: 'Preview',
+                    previewName: 'Badge Name',
+                    previewLabel: 'Full Label',
+                },
+            },
+            // Notification config
+            notification: {
+                title: 'Win Notification',
+                enabled: 'Enable Notification',
+                type: 'Notification Type',
+                conditions: 'Notification Conditions',
+                notifyBalance: 'Notify on balance win',
+                notifyInstance: 'Notify on instance win',
+                secret: 'Secret Key',
+                secretPlaceholder: 'For Webhook signature verification (optional)',
+                fillTelegram: 'Please fill in Telegram Bot Token and Chat ID',
+                fillDiscord: 'Please fill in Discord Webhook URL',
+                fillWebhook: 'Please fill in Webhook URL',
+                saveSuccess: 'Notification config saved',
+                saveFailed: 'Failed to save notification config',
+            },
+        },
+    },
+
+    // Mail
+    mail: {
+        title: 'Mail',
+        description: 'Manage your professional email service',
+        tabs: {
+            my: 'My Mail',
+            buy: 'Buy Mail',
+            accounts: 'Accounts',
+            dns: 'DNS Config',
+            settings: 'Settings',
+        },
+        noSubscription: 'You have no mail service',
+        buyNowHint: 'Purchase professional mail service now',
+        buyNow: 'Buy Now',
+        subscriptionOverview: 'Subscription Overview',
+        expiresAt: 'Expires At',
+        domainsUsed: 'Domains Used',
+        diskUsed: 'Disk Used',
+        totalSpace: 'Total Space',
+        accounts: 'Accounts',
+        plan: 'Plan',
+        domains: 'domains',
+        month: 'month',
+        year: 'year',
+        renew: 'Renew',
+        myDomains: 'My Domains',
+        addDomain: 'Add Domain',
+        noDomains: 'No domains, click the button above to add',
+        used: 'used',
+        status: {
+            active: 'Active',
+            expired: 'Expired',
+            suspended: 'Suspended',
+        },
+        domainStatus: {
+            pending: 'Pending',
+            verified: 'Verified',
+            suspended: 'Suspended',
+        },
+        selectRegion: 'Select Service Region',
+        nodeStatus: {
+            available: 'Node Status: Available',
+            limited: 'Limited Stock',
+        },
+        plans: 'plans',
+        planDetails: 'Plan Configuration',
+        planTag: 'Pro Plan',
+        allFeaturesIncluded: 'All basic and advanced features included',
+        pureStorage: 'Pure Storage',
+        feature: {
+            domains: 'Support {count} custom domain bindings',
+            domainStorage: '{count} Domain {storage}G Storage',
+            unlimitedAliases: 'Unlimited aliases per domain',
+            unlimitedMailboxes: 'Unlimited mailboxes per domain',
+            emailLimit: '600 emails/hour per domain',
+            emClientPro: 'Free eM Client Pro license',
+            catchAll: 'Catch All support',
+            antispam: 'Built-in anti-spam gateway',
+            protocols: 'Support SMTP/IMAP/POP3 protocols',
+            aliases: 'Unlimited email aliases',
+        },
+        otherOptions: 'Other Options',
+        verify: 'Verify',
+        checkout: {
+            title: 'Order Summary',
+            region: 'Selected Region',
+            serviceStatus: 'Service Status',
+            instant: 'Instant Activation',
+            amount: 'Amount Due',
+            confirm: 'Activate Now',
+            securePayment: 'Secure payment, refund available anytime',
+            balanceRequired: 'Please recharge balance first to purchase',
+        },
+        help: {
+            title: 'Need Help?',
+            desc: 'If you encounter any technical issues during purchase, please submit a ticket to contact support.',
+        },
+        selectPlan: 'Select Plan',
+        storage: 'Storage',
+        unlimitedAccounts: 'Unlimited Accounts',
+        orderConfirm: 'Order Confirmation',
+        billingCycle: 'Billing Cycle',
+        monthly: 'Monthly',
+        yearly: 'Yearly',
+        totalPrice: 'Total',
+        confirmRenew: 'Confirm Renew',
+        confirmPurchase: 'Confirm Purchase',
+        renewSubscription: 'Renew Subscription',
+        renewMonths: 'Renewal Period',
+        monthlyPrice: 'Monthly Price',
+        yearlyPrice: 'Yearly Price',
+                alreadyPurchased: 'You have already purchased email service in this region',
+                alreadyPurchasedDesc: 'Each user can only purchase one email plan per region. To change your plan, please manage it in "My Email".',
+                viewMySubscription: 'View My Subscription',
+        renewDuration: 'Duration',
+        months: 'months',
+        renewSuccess: 'Renewal successful',
+        selectPlanFirst: 'Please select a plan first',
+        purchaseSuccess: 'Purchase successful',
+        domainName: 'Domain',
+        domainPlaceholder: 'e.g. example.com',
+        domainHint: 'Enter your domain, DNS verification required after adding',
+        domainRequired: 'Please enter a domain',
+        domainAdded: 'Domain added, please configure DNS records',
+        accountsDescription: 'Manage email accounts under this domain',
+        createAccount: 'Create Account',
+        verifyFirst: 'Please verify domain DNS first before creating accounts',
+        completeDnsFirst: 'Please complete DNS configuration first to use email service',
+        goDnsConfig: 'Configure DNS',
+        adminAccount: 'Admin Account',
+        adminAccountDesc: 'This account was created automatically when adding the domain, use it to login to Webmail',
+        webmailUrl: 'Login URL',
+        helpDoc: 'View Help Documentation',
+        noAdminAccount: 'Admin account information unavailable',
+        refreshStatus: 'Refresh Status',
+        noAccounts: 'No email accounts',
+        admin: 'Admin',
+        resetPassword: 'Reset Password',
+        deleteAccountConfirm: 'Are you sure to delete account {email}? This cannot be undone.',
+        accountDeleted: 'Account deleted',
+        dnsDescription: 'Add the following records in your domain DNS management panel',
+        recordType: 'Type',
+        hostRecord: 'Host',
+        recordValue: 'Value',
+        emailAddress: 'Email Address',
+        txtVerification: 'TXT Verification',
+        pending: 'Pending',
+        verified: 'Verified',
+        mxRecords: 'MX Records',
+        cnameRecords: 'CNAME Records',
+        spfRecord: 'SPF Record',
+        dkimRecord: 'DKIM Record',
+        optional: 'Optional',
+        required: 'Required',
+        recommended: 'Recommended',
+        dnsHint: {
+            txt: 'Domain verification record. Click "Refresh Status" after adding.',
+            mx: 'Mail exchange record. Number indicates priority (lower = higher priority).',
+            cname: 'Alias record for Webmail and auto-discover functionality.',
+            spf: 'Sender Policy Framework. Prevents spoofing and improves deliverability.',
+            dkim: 'Domain key authentication. Improves email credibility.',
+            dmarc: 'Domain-based Message Authentication. Prevents phishing and fraud.',
+        },
+        domainInfo: 'Domain Info',
+        createdAt: 'Created At',
+        verifiedAt: 'Verified At',
+        dangerZone: 'Danger Zone',
+        deleteDomainWarning: 'Deleting this domain will also delete all accounts and data. This cannot be undone.',
+        deleteDomain: 'Delete Domain',
+        deleteDomainConfirm: 'Are you sure to delete domain {domain}? All data will be lost.',
+        domainDeleted: 'Domain deleted',
+        domainVerified: 'Domain verified successfully',
+        domainNotVerified: 'DNS records not yet active, please try again later',
+        username: 'Username',
+        password: 'Password',
+        displayName: 'Display Name',
+        diskLimit: 'Disk Quota',
+        setAsAdmin: 'Set as Domain Admin',
+        usernamePlaceholder: 'e.g. admin',
+        passwordPlaceholder: 'At least 8 characters',
+        passwordHint: 'At least 8 characters, recommend mixed case and numbers',
+        displayNamePlaceholder: 'e.g. John Doe',
+        accountFieldsRequired: 'Please enter username and password',
+        accountCreated: 'Account created',
+        accountUpdated: 'Account updated',
+        passwordMinLength: 'Password must be at least 8 characters',
+        passwordReset: 'Password reset successfully',
+        editAccount: 'Edit Account',
+        newPassword: 'New Password',
+        newPasswordPlaceholder: 'Enter new password',
+    },
+}
diff --git a/client/src/locales/index.ts b/client/src/locales/index.ts
new file mode 100644
index 0000000..6bc15ca
--- /dev/null
+++ b/client/src/locales/index.ts
@@ -0,0 +1,88 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './zh-CN'
+import zhTW from './zh-TW'
+import en from './en'
+
+export type MessageSchema = typeof zhCN
+export type Locale = 'zh-CN' | 'zh-TW' | 'en'
+
+// 支援的語言列表
+const supportedLocales: { code: Locale; name: string }[] = [
+    { code: 'zh-CN', name: '简体中文' },
+    { code: 'zh-TW', name: '繁體中文' },
+    { code: 'en', name: 'English' },
+]
+
+// 檢測瀏覽器語言
+function detectBrowserLocale(): Locale {
+    const browserLang = navigator.language || (navigator as { userLanguage?: string }).userLanguage || ''
+
+    // 中文區分簡體/繁體
+    if (browserLang.startsWith('zh')) {
+        // zh-TW, zh-HK, zh-Hant 等使用繁體
+        if (browserLang.includes('TW') || browserLang.includes('HK') || browserLang.includes('Hant')) {
+            return 'zh-TW'
+        }
+        // 其他中文默認簡體
+        return 'zh-CN'
+    }
+
+    // 其他語言默認英文
+    return 'en'
+}
+
+// 取得儲存的語言或檢測瀏覽器語言
+function getInitialLocale(): Locale {
+    const saved = localStorage.getItem('locale') as Locale | null
+    if (saved && supportedLocales.some(l => l.code === saved)) {
+        return saved
+    }
+    return detectBrowserLocale()
+}
+
+// 匯出支援的語言列表
+export { supportedLocales }
+
+const i18n = createI18n({
+    legacy: false, // 使用 Composition API 模式
+    locale: getInitialLocale(),
+    fallbackLocale: 'en',
+    messages: {
+        'zh-CN': zhCN,
+        'zh-TW': zhTW,
+        'en': en,
+    },
+})
+
+// 切換語言並儲存
+export function setLocale(newLocale: Locale): void {
+     
+    ; (i18n.global.locale as any).value = newLocale
+    localStorage.setItem('locale', newLocale)
+    // 設定 HTML lang 屬性
+    document.documentElement.lang = newLocale
+}
+
+// 取得目前語言
+export function getLocale(): Locale {
+     
+    return (i18n.global.locale as any).value as Locale
+}
+
+// 取得目前語言的簡寫
+// 用於顯示在 UI 上（如語言切換按鈕）
+export function getCurrentLocaleShort(): string {
+    const locale = getLocale()
+    switch (locale) {
+        case 'zh-CN':
+            return '简'
+        case 'zh-TW':
+            return '繁'
+        case 'en':
+            return 'EN'
+        default:
+            return 'EN'
+    }
+}
+
+export default i18n
diff --git a/client/src/locales/zh-CN.ts b/client/src/locales/zh-CN.ts
new file mode 100644
index 0000000..c830862
--- /dev/null
+++ b/client/src/locales/zh-CN.ts
@@ -0,0 +1,7460 @@
+export default {
+    // 通用
+    common: {
+        confirm: '确认',
+        cancel: '取消',
+        save: '保存',
+        saving: '保存中...',
+        send: '发送',
+        sending: '发送中...',
+        syncing: '同步中...',
+        processing: '处理中...',
+        submitting: '提交中...',
+        delete: '删除',
+        noIncudalHint: '请勿在名称或描述中使用字样',
+        edit: '编辑',
+        create: '创建',
+        creating: '创建中...',
+        deleting: '删除中...',
+        deleteSuccess: '删除成功',
+        search: '搜索',
+        loading: '加载中...',
+        noData: '暂无数据',
+        noSearchResults: '搜索无结果',
+        success: '操作成功',
+        error: '操作失败',
+        warning: '警告',
+        info: '提示',
+        yes: '是',
+        no: '否',
+        back: '返回',
+        next: '下一步',
+        previous: '上一步',
+        close: '关闭',
+        reset: '重置',
+        refresh: '刷新',
+        copy: '复制',
+        copied: '已复制',
+        copyFailed: '复制失败',
+        show: '显示',
+        hide: '隐藏',
+        done: '完成',
+        actions: '操作',
+        details: '详情',
+        status: '状态',
+        name: '名称',
+        description: '描述',
+        createdAt: '创建时间',
+        updatedAt: '更新时间',
+        none: '无',
+        notSet: '未设置',
+        turnstileFailed: '人机验证失败，请重试',
+        filter: '筛选',
+        total: '共',
+        items: '条',
+        searchPlaceholder: '搜索...',
+        developing: '开发中',
+        developingHint: '此功能正在开发中，敬请期待...',
+        gotIt: '我知道了',
+        expand: '展开',
+        collapse: '收起',
+        page: '页',
+        pageInfo: '第 {current}/{total} 页，共 {count} 条',
+        prevPage: '上一页',
+        nextPage: '下一页',
+        loadFailed: '加载失败',
+        all: '全部',
+        perPage: '每页',
+        totalCount: '共 {count} 条',
+        day: '天',
+        days: '天',
+        seconds: '秒',
+        month: '月',
+        totalRecords: '共 {count} 条记录',
+        deleted: '已删除',
+        // 国家名称
+        countries: {
+            // 亚洲
+            cn: '中国',
+            hk: '中国香港',
+            mo: '中国澳门',
+            tw: '中国台湾',
+            jp: '日本',
+            kr: '韩国',
+            sg: '新加坡',
+            my: '马来西亚',
+            th: '泰国',
+            vn: '越南',
+            ph: '菲律宾',
+            id: '印度尼西亚',
+            in: '印度',
+            pk: '巴基斯坦',
+            bd: '孟加拉国',
+            kz: '哈萨克斯坦',
+            uz: '乌兹别克斯坦',
+            ae: '阿联酋',
+            sa: '沙特阿拉伯',
+            il: '以色列',
+            tr: '土耳其',
+            // 欧洲
+            gb: '英国',
+            de: '德国',
+            fr: '法国',
+            nl: '荷兰',
+            be: '比利时',
+            lu: '卢森堡',
+            ch: '瑞士',
+            at: '奥地利',
+            it: '意大利',
+            es: '西班牙',
+            pt: '葡萄牙',
+            ie: '爱尔兰',
+            se: '瑞典',
+            no: '挪威',
+            dk: '丹麦',
+            fi: '芬兰',
+            pl: '波兰',
+            cz: '捷克',
+            hu: '匈牙利',
+            ro: '罗马尼亚',
+            bg: '保加利亚',
+            gr: '希腊',
+            ua: '乌克兰',
+            ru: '俄罗斯',
+            // 北美洲
+            us: '美国',
+            ca: '加拿大',
+            mx: '墨西哥',
+            // 南美洲
+            br: '巴西',
+            ar: '阿根廷',
+            cl: '智利',
+            co: '哥伦比亚',
+            pe: '秘鲁',
+            // 大洋洲
+            au: '澳大利亚',
+            nz: '新西兰',
+            // 非洲
+            za: '南非',
+            eg: '埃及',
+            ng: '尼日利亚',
+            ke: '肯尼亚',
+        },
+        // 网络模式（统一定义）
+        networkMode: {
+            nat: 'IPv4 NAT',
+            nat_ipv6: 'IPv4 NAT & IPv6',
+            nat_ipv6_nat: 'IPv4 NAT & IPv6 NAT',
+            ipv6_only: 'IPv6 Only',
+            ipv6_nat: 'IPv6 NAT',
+        },
+        // 实例类型
+        instanceType: {
+            container: 'LXC',
+            vm: 'KVM',
+        },
+        // 启用/禁用状态
+        enabled: '启用',
+        disabled: '禁用',
+        active: '已启用',
+        inactive: '已停用',
+        unlimited: '无限制',
+    },
+
+    validation: {
+        fields: {
+            name: '名称',
+            identifier: '标识符',
+            content: '内容',
+            serverAddress: '服务器地址',
+            ipAddress: 'IP地址',
+            ipOrDomain: 'IP地址或域名',
+        },
+        required: '{field}不能为空',
+        minLength: '{field}长度至少 {min} 个字符',
+        maxLength: '{field}长度不能超过 {max} 个字符',
+        illegalChars: '{field}包含非法字符',
+        safeNameChars: '{field}只能包含中文、字母、数字、连字符、下划线、空格、逗号和圆括号',
+        identifierChars: '{field}只能包含字母、数字、连字符和下划线，且必须以字母开头',
+        invalidFormat: '{field}格式不正确',
+        urlProtocol: '{field}必须以 http:// 或 https:// 开头',
+        hostAddressInvalid: '{field}格式不正确，请输入有效的 IPv4、IPv6 地址或域名',
+        ipAddressInvalid: '{field}格式不正确，请输入有效的 IPv4 或 IPv6 地址',
+        ipv4Invalid: '{field}格式不正确，请输入有效的 IPv4 地址',
+    },
+
+    // 导航
+    nav: {
+        main: '常用',
+        dashboard: '概览',
+        instances: '实例',
+        transfers: '转移',
+        friends: '好友',
+        tickets: '工单',
+        resources: '资源',
+        myHosts: '我的节点',
+        myPackages: '我的套餐',
+        myImages: '我的镜像',
+        logs: '日志',
+        inbox: '通知',
+        settings: '设置',
+        wallet: '钱包',
+        invites: '邀请',
+        help: '帮助',
+        admin: '管理',
+        expand: '扩展',
+        system: '系统',
+        users: '用户',
+        statistics: '统计',
+        hosts: '节点',
+        images: '镜像',
+        packages: '套餐',
+        helpManage: '帮助',
+        oauth: 'OAuth',
+        broadcast: '公告',
+        paymentProviders: '支付',
+        billing: '计费',
+        withdrawals: '提现',
+        aff: '推荐',
+        openMenu: '打开菜单',
+        collapseSidebar: '折叠侧边栏',
+        toggleTheme: '切换主题',
+        toggleLanguage: '切换语言',
+        terminal: '终端',
+        extensions: '扩展',
+        scripts: '脚本',
+        operations: '运维',
+        createInstance: '创建实例',
+        create: '创建',
+        entertainment: '福利',
+        hosting: '托管',
+        hostingWallet: '托管收益',
+        earnings: '收益',
+        mail: '邮箱',
+        instanceDetail: '实例详情',
+        mailDomain: '邮箱域名',
+        myHostCreate: '创建节点',
+        myHostDetail: '节点详情',
+        myPackageCreate: '创建套餐',
+        myPackageEdit: '编辑套餐',
+        telegramSettings: 'Telegram 设置',
+        adminCreateInstance: '管理员创建实例',
+    },
+
+    // 主题
+    theme: {
+        dark: '深色模式',
+        light: '浅色模式',
+        system: '跟随系统',
+    },
+
+    freeSite: {
+        billingCycleLabel: {
+            monthly: '月付？月亮替你付了',
+            quarterly: '季付？四季都免单',
+            semiAnnual: '半年快乐通行证',
+            annual: '年付？钱包装睡中',
+            custom: '{months}个月，快乐代扣空气',
+            free: '免费乱逛许可证',
+        },
+        billingCycleShort: {
+            monthly: '/月，免惊',
+            quarterly: '/季，免单',
+            semiAnnual: '/半年快乐',
+            annual: '/年也白送',
+            custom: '/{months}个月快乐',
+        },
+        copy: {
+            finalPrice: '装模作样价',
+            renewPrice: '续费？仪式感拉满',
+            billingCycle: '快乐档位',
+            needPay: '象征性付款',
+            originalPrice: '原价标本',
+            oldDailyPrice: '旧日租，考古用',
+            newDailyPrice: '新日租，摆设用',
+            remainingValue: '剩余价值：快乐无价',
+            newPlanCost: '新方案成本：空气币',
+            currentBalance: '余额吉祥物',
+            balanceAfterRenew: '续后余额：纹丝不动',
+            walletBalanceTab: '快乐余额',
+            walletLogsTab: '免单流水',
+            walletCurrentBalance: '当前快乐刻度',
+            walletDescription: '白嫖站模式已开启，充值入口去喝茶了，余额负责站岗。',
+            walletLogsDescription: '这里记录余额的小动作。别紧张，主线任务依旧是免费玩。',
+            walletTotalRecharge: '累计免单',
+            walletTotalConsume: '快乐蒸发',
+            walletDestroyedValue: '销毁纪念值',
+            dashboardNewInstance: '快乐实例',
+            dashboardCreateInstance: '召唤快乐机',
+            dashboardCreateFirst: '先召唤一台',
+            dashboardUserBalance: '快乐余额',
+            dashboardBalanceValue: '免费无价',
+            dashboardNewContainer: '钱包坐好，我们直接开整',
+            instanceCreate: '快乐实例',
+            instanceCreateFirst: '先召唤一台',
+            instanceBatchRenewTitle: '批量续快乐',
+            instanceBatchRenewDescription: '白嫖站模式下，续费只是盖个章，机器继续开心营业。',
+            instanceBatchTotalAmount: '空气合计',
+            instanceBatchBalanceAfter: '续后心情',
+            instanceBatchCurrentBalance: '当前吉祥物余额',
+            instanceBatchRenewAction: '确认快乐续杯',
+            moneyJustForShow: '数字巡演',
+            marketPriceFree: '免单起飞',
+            marketPlanCount: '{count} 个快乐档位',
+            marketCreateNow: '立即开薅',
+            marketLoginToOrder: '登录后开薅',
+            marketSelectedPlanTitle: '快乐档位',
+            marketCycleMonthly: '月付？月亮替你付了',
+            marketMonthlyPrice: '月均？快乐不均摊',
+            createOrderSummary: '免单概览',
+            createPromoCode: '神秘暗号',
+            createPromoPlaceholder: '可填可不填，免费列车已发车',
+            createPromoHostedDisabled: '托管节点不吃暗号，直接上车',
+            createPromoValid: '暗号有效，快乐加成 {rate}',
+            createPromoUsing: '暗号灯已亮',
+            createPromoBenefit: '折扣和返利在旁边表演，情绪价值负责鼓掌。',
+            createCommissionEstimate: '预计给分享者投喂 ¥{amount} 的想象返利',
+            createPlanFee: '标价展览品',
+            createMonthlyEquivalent: '折算？快乐拒绝被折算',
+            mailPrice: '邮箱也免单',
+            mailCheckoutTitle: '邮箱免单确认',
+            mailBillingCycle: '快乐周期',
+            mailCheckoutAmount: '象征性结算',
+            mailCheckoutConfirm: '确认领取邮箱',
+            mailBalanceRequired: '余额不余额的，白嫖站讲究先用再说。',
+        },
+    },
+
+    publicSite: {
+        brandTagline: '基于 Incus 的低价 NAT VPS',
+        nav: {
+            home: '首页',
+            overview: '概览',
+            products: '套餐列表',
+            help: '帮助中心',
+        },
+        actions: {
+            signIn: '登录',
+            console: '进入控制台',
+            consoleCompact: '控制台',
+            browseProducts: '查看全部套餐',
+            browseOfficial: '查看直营套餐',
+            browseMarket: '查看托管套餐',
+            viewCatalog: '查看套餐',
+        },
+        footer: {
+            description: '精选全球多节点 LXC / KVM 套餐，配置丰富、方案齐全，持续提供高性价比 NAT VPS 选择。',
+            explore: '浏览',
+            account: '账户',
+            purchaseHint: '未登录也可以先查看套餐详情，登录后再继续购买。',
+        },
+        seo: {
+            keywords: 'Incus,NAT VPS,LXC,KVM,VPS 面板,云服务器,NAT云主机',
+            homeTitle: '基于 Incus 的低价 NAT VPS 平台',
+            homeDescription: '精选全球多节点 LXC / KVM 套餐，配置丰富、方案齐全，持续提供高性价比 NAT VPS 选择。',
+            marketTitle: '套餐列表',
+            marketDescription: '浏览全部公开套餐，按地区、配置、价格与来源筛选 NAT VPS。',
+            marketPackageTitle: '{name} - 套餐列表',
+            marketPackageDescription: '查看 {name} 的 {type} 配置、月流量与套餐信息，确认后即可继续购买。',
+        },
+        portal: {
+            badge: 'INCUS NAT VPS',
+            title: '基于 Incus 的低价 NAT VPS 平台',
+            description: '精选全球多节点 LXC / KVM 套餐，覆盖直营与托管供给，配置档位丰富，持续提供高性价比 NAT VPS 选择。',
+            authPanelDescription: '把稳定供给、更多地区和更丰富价格带放在同一个入口里，让挑套餐这一步更直接。',
+            authPanelFlowLabel: 'ORDER FLOW',
+            authPanelFlowTitle: '先看商品，登录后继续下单',
+            authPanelFlowDescription: '未登录时可以先浏览公开套餐；从分享链接进入也会保留商品上下文，登录后直接续上原本的购买流程。',
+            authPanelTagValue: '高性价比',
+            previewLabel: 'CONSOLE',
+            previewTitle: '开通后即可直接管理',
+            previewDescription: '开机、重装、流量和实例状态等常用操作集中在同一控制台内，日常管理更高效。',
+            controlPoint1: '$ incus launch ubuntu:24.04 nat-vps',
+            controlPoint2: '# 开机、重装、流量、快照等操作统一管理',
+            controlPoint3: '# 直营与托管节点均可在同一控制台购买和管理',
+            packageFallback: '公开套餐，可直接查看配置并继续购买。',
+            stats: {
+                packages: '在售套餐',
+                regions: '可选地区',
+                official: '直营套餐',
+                market: '托管套餐',
+            },
+            officialTitle: '官方直营节点',
+            officialDescription: '价格与配置透明，供应稳定，适合对稳定性与长期使用更看重的用户。',
+            officialPoint1: '节点与套餐风格相对稳定，适合持续使用。',
+            officialPoint2: '配置、价格与可选方案展示清晰，便于快速确认。',
+            officialPoint3: '开通后可直接进入控制台，常用管理操作集中可见。',
+            marketTitle: '托管节点套餐',
+            marketDescription: '地区选择更多，价格区间更丰富，适合需要特定地区或更高性价比的用户。',
+            marketPoint1: '更容易找到低价套餐、特殊地区或不同线路的机器。',
+            marketPoint2: '支持按地区、配置与价格筛选，查找效率更高。',
+            marketPoint3: '选定套餐后可进入详情，登录后直接继续购买。',
+            experienceNoLoginTitle: '全球多节点供给',
+            experienceNoLoginDescription: '直营与托管套餐并行上架，热门地区与更多节点选择可以在同一入口集中浏览。',
+            experienceRoutingTitle: 'LXC / KVM 套餐更全',
+            experienceRoutingDescription: '从轻量容器到完整虚拟机，资源配置与方案档位覆盖更广，便于按需求挑选。',
+            experienceThemeTitle: '多价位高性价比',
+            experienceThemeDescription: '持续补充不同预算与不同定位的 NAT VPS 套餐，方便横向比较后再决定。',
+            catalogLabel: 'PRODUCT LINES',
+            catalogTitle: '直营与托管产品并行提供',
+            catalogDescription: '直营与托管套餐并行提供，适合优先看稳定供给，也适合挑选更多地区与价格带。',
+            emptyPackages: '当前暂无在售套餐',
+            browseLabel: 'PLAN LIST',
+            browseTitle: '按配置与地区筛选合适套餐',
+            browseDescription: '支持按地区、配置与价格筛选套餐，便于新用户选购，也方便老用户补购。',
+        },
+        market: {
+            badge: '公开套餐',
+            title: '浏览全部套餐',
+            description: '按地区、配置、价格与来源筛选套餐，直接找到合适的 NAT VPS。',
+            publicNotice: '当前页面展示全部公开套餐，可按地区、来源与配置筛选。',
+            buyLinkNotice: '你打开的是某个套餐的购买链接。未登录时可先查看套餐详情，登录后可继续购买。',
+            searchPlaceholder: '搜索套餐名称、描述或虚拟化类型',
+            allRegions: '全部地区',
+            official: '官方直营',
+            market: '托管套餐',
+            noPackages: '当前暂无公开套餐',
+            noResults: '没有匹配当前筛选条件的套餐',
+            soldOut: '暂时售罄',
+            inStock: '可开通',
+            free: '免费',
+            fromMonthly: '¥{price}/月起',
+            planCount: '{count} 个方案',
+            featuresTitle: '套餐详情',
+            plansTitle: '可选方案',
+            planCycle: '{months} 个月',
+            selectedPlanTitle: '当前方案',
+            customConfigTitle: '自定义配置',
+            customConfigDescription: '这个套餐没有固定方案。登录后会进入创建页，在允许范围内自定义配置。',
+            createNow: '立即开通',
+            loginToOrder: '登录后开通',
+            loginHint: '登录后会按当前套餐继续进入购买流程。',
+            choosePackage: '从左侧选择一个套餐，右侧会显示详细配置。',
+            summary: {
+                total: '公开套餐',
+                available: '可开通',
+                regions: '覆盖地区',
+                source: '当前来源',
+            },
+            labels: {
+                startingPrice: '起售价',
+                traffic: '月流量',
+                plans: '方案数',
+                cpu: 'CPU',
+                memory: '内存',
+                disk: '硬盘',
+                network: '网络模式',
+                hosts: '宿主机数',
+                nesting: '嵌套支持',
+            },
+        },
+    },
+
+    // 钱包
+    wallet: {
+        title: '钱包',
+        description: '管理您的账户余额和充值',
+        tabs: {
+            balance: '账户余额',
+            logs: '余额明细',
+            records: '充值记录',
+        },
+        currentBalance: '当前余额',
+        recharge: '充值',
+        totalRecharge: '累计充值',
+        totalConsume: '累计消费',
+        totalDestroyedValue: '已销毁总价值',
+        noLogs: '暂无余额记录',
+        noRecords: '暂无充值记录',
+        type: '类型',
+        amount: '金额',
+        actualAmount: '实际到账',
+        estimatedAmount: '预计到账',
+        balanceAfter: '余额',
+        instanceOrRemark: '实例/备注',
+        time: '时间',
+        orderNo: '订单号',
+        completedAt: '完成时间',
+        statusLabel: '状态',
+        paymentMethod: '支付方式',
+        paymentMethodType: '选择支付方式',
+        heleketSelectionHint: '将在 Heleket 支付页选择具体的加密货币和网络，本页不会限制最终付款币种。',
+        paymentChannel: '支付渠道',
+        paymentUuid: 'UUID:',
+        paymentTxid: 'TxID:',
+        paymentMethods: {
+          alipay: '支付宝',
+          wxpay: '微信支付',
+          qqpay: 'QQ钱包',
+          bank: '网银支付',
+          jdpay: '京东支付',
+        },
+        noProviders: '暂无可用支付渠道',
+        amountLabel: '充值金额',
+        amountRange: '金额范围',
+        feeNote: '手续费',
+        payableAmount: '应付金额',
+        pay: '立即支付',
+        void: '作废',
+        logTypes: {
+            recharge: '充值',
+            consume: '消费',
+            refund: '退款',
+            adminAdjust: '管理员调整',
+            gift: '赠送',
+            transferFee: '转移手续费',
+            transferRefund: '手续费退还',
+            hostingWithdraw: '托管余额提现',
+            hostingDeduction: '托管实例扣款',
+        },
+        status: {
+            pending: '待支付',
+            paid: '已支付',
+            completed: '已完成',
+            failed: '失败',
+            cancelled: '已取消',
+            refunded: '已退款',
+        },
+        loadLogsFailed: '加载余额明细失败',
+        showLotteryGift: '抽奖赠送',
+        showingLotteryGift: '抽奖赠送',
+        loadProvidersFailed: '加载支付渠道失败',
+        loadRecordsFailed: '加载充值记录失败',
+        selectProvider: '请选择支付方式',
+        invalidAmount: '金额无效',
+        orderCreated: '订单已创建',
+        redirecting: '正在跳转支付页面...',
+        createOrderFailed: '创建订单失败',
+        noPayUrl: '获取支付链接失败',
+        repayFailed: '重新支付失败',
+        orderCancelled: '订单已取消',
+        noRefundNotice: '所有充值都无法原路退款。',
+        rechargeNotice: '我知道不好用的实例可以销毁退至面板余额，可转移实例 PUSH 是免费的，邮箱可自行修改。',
+        cancelFailed: '取消订单失败',
+        orderExpired: '订单已过期',
+        rechargeSuccess: '充值成功！余额已到账',
+        verifyingPayment: '正在验证支付状态...',
+        paymentProcessing: '支付处理中，请稍后刷新',
+        verifyFailed: '验证支付状态失败',
+        amountMismatch: '支付金额与订单金额不匹配，请联系客服',
+        natDisclaimer: '我知道所售实例都是 NAT 属性，不保证 IP 在大陆的连通性，所有充值都无法退款。',
+    },
+
+    // 推荐计划
+    aff: {
+        title: '推荐计划',
+        description: '邀请好友使用您的优惠码，获取返利收益',
+        notActivated: '推荐计划已可用',
+        activateHint: '您可以创建优惠码并分享给朋友，当他们使用您的优惠码购买您购买过的方案时，您将获得返利收益。',
+        goRecharge: '前往充值',
+        affBalance: 'AFF 余额',
+        totalEarnings: '累计收益',
+        balanceHint: 'AFF 余额仅可转化为账户余额用于面板消费，无法直接提现。',
+        convert: '申请转化',
+        myCodes: '我的优惠码',
+        createCode: '创建优惠码',
+        noCodes: '暂无优惠码，创建一个开始推广吧',
+        code: '优惠码',
+        plan: '方案',
+        discount: '折扣',
+        commission: '返利',
+        usedCount: '使用次数',
+        earnings: '收益',
+        status: '状态',
+        enabled: '已启用',
+        disabled: '已禁用',
+        toggle: '切换',
+        selectPlan: '选择方案',
+        selectPlanHint: '选择全局优惠码或方案专有码',
+        alreadyCreated: '已创建',
+        globalCode: '全局优惠码',
+        globalCodeBadge: '全站通用',
+        globalCodeHint: '可用于全站所有付费套餐和方案',
+        orSelectPlan: '或选择方案专有码',
+        discountCommission: '折扣/返利比例',
+        discountCommissionHint: '购买者享 {discount} 折扣，您获 {commission} 返利',
+        fixedRate: '折扣与返利比例',
+        fixedRateHint: '系统固定折扣率和返利率均为 5%',
+        createSuccess: '优惠码创建成功',
+        createFailed: '创建失败',
+        deleteCodeConfirm: '确定删除优惠码 {code} 吗？',
+        deleteCodeSuccess: '优惠码已删除',
+        deleteCodeFailed: '删除失败',
+        toggleSuccess: '状态已切换',
+        toggleFailed: '切换失败',
+        earningsLog: '收益明细',
+        noLogs: '暂无收益记录',
+        logType: {
+            new_purchase: '新购返利',
+            renew: '续费返利',
+            convert: '余额转化',
+        },
+        convertModal: {
+            title: '申请转化',
+            currentBalance: '当前 AFF 余额',
+            amount: '转化金额',
+            minAmount: '最低转化金额：0.10 元',
+            hint: '提交后将自动转入账户余额。',
+            submit: '确认转化',
+            success: '转化成功，已转入账户余额',
+            failed: '提交失败',
+            invalidAmount: '请输入有效的转化金额',
+        },
+        withdrawals: '转化记录',
+        noWithdrawals: '暂无转化记录',
+        withdrawalStatus: {
+            pending: '待审核',
+            approved: '已通过',
+            rejected: '已拒绝',
+        },
+        leaderboard: {
+            title: 'AFF 榜单',
+            loadFailed: '加载榜单失败',
+            empty: '暂无榜单数据',
+            you: '就是你',
+        },
+        // 实例创建页优惠码输入
+        promoCode: '优惠码',
+        promoCodeOptional: '优惠码（可选）',
+        promoCodePlaceholder: '输入优惠码（可选）',
+        promoCodeInputPlaceholder: '输入折扣代码',
+        promoCodeHostedDisabled: '托管节点不支持使用优惠码',
+        promoCodeValid: '优惠码有效，享受 {rate} 折扣',
+        promoCodeInvalid: '优惠码无效',
+        verifying: '验证中...',
+        originalPrice: '原价',
+        discountAmount: '折扣',
+        promoDiscount: '推广折扣',
+        finalPrice: '实付',
+        usingPromoCode: '您正在使用优惠码',
+        promoCodeBenefit: '您享受 {discount} 折扣，同时为分享者带来约 {commission}% 的返利',
+        commissionEstimate: '预计为分享者带来 ¥{amount} 返利',
+        // 管理员审核
+        adminTitle: 'AFF 转化审核',
+        adminDescription: '审核用户的 AFF 余额转化申请',
+        user: '用户',
+        userBalance: '用户 AFF 余额',
+        requestAmount: '申请金额',
+        requestTime: '申请时间',
+        approve: '通过',
+        reject: '拒绝',
+        rejectReason: '拒绝原因',
+        rejectReasonPlaceholder: '请输入拒绝原因',
+        approveSuccess: '已通过，已转入用户余额',
+        approveFailed: '审核失败',
+        rejectSuccess: '已拒绝',
+        rejectFailed: '拒绝失败',
+        noRequests: '暂无待审核的转化申请',
+        filterStatus: '状态筛选',
+        all: '全部',
+    },
+
+    popupAnnouncement: {
+        title: '站点公告',
+        subtitle: '请留意这条最新通知',
+        promoLabel: '新机器推广',
+        buyNow: '立即购买 {name}',
+        viewImage: '查看完整图片',
+        promoPlans: '可选方案',
+        soldOut: '售罄',
+        dismissToday: '今日不见',
+        dismissForever: '再也不见',
+    },
+
+    // 语言
+    language: {
+        zh: '中文',
+        en: 'English',
+    },
+
+    // 认证
+    auth: {
+        login: '登录',
+        loginTo: '登录',
+        logout: '退出登录',
+        register: '注册',
+        registerTo: '注册',
+        username: '用户名',
+        usernamePlaceholder: '输入用户名',
+        usernameOrEmail: '用户名或邮箱',
+        usernameOrEmailPlaceholder: '输入用户名或邮箱',
+        password: '密码',
+        passwordPlaceholder: '输入密码',
+        confirmPassword: '确认密码',
+        confirmPasswordPlaceholder: '再次输入密码',
+        email: '邮箱',
+        emailPlaceholder: '输入邮箱',
+        rememberMe: '记住我',
+        forgotPasswordLink: '忘记密码',
+        contactEmail: '联系邮箱',
+        noAccount: '没有账号？',
+        hasAccount: '已有账号？',
+        loginSuccess: '登录成功',
+        logoutSuccess: '已退出登录',
+        registerSuccess: '注册成功',
+        invalidCredentials: '用户名或密码错误',
+        sessionExpired: '会话已过期，请重新登录',
+        continue: '继续',
+        loggingIn: '登录中...',
+        registering: '注册中...',
+        orUse: '或使用',
+        oauthBindHint: '需先在设置中绑定账号才能使用快捷登录',
+        enterUsernamePassword: '请输入用户名和密码',
+        enterUsernameOrEmailPassword: '请输入账号和密码',
+        twoFactorCode: '双因素验证码',
+        twoFactorCodePlaceholder: '输入6位验证码',
+        twoFactorHint: '请输入验证器应用中显示的验证码',
+        twoFactorOptional: '可选',
+        twoFactorOptionalHint: '如果您启用了双因素认证，请输入验证码',
+        recoveryCode: '恢复码',
+        recoveryCodePlaceholder: '输入恢复码',
+        recoveryCodeHint: '输入设置2FA时保存的恢复码（一次性使用）',
+        useRecoveryCode: '无法访问验证器？使用恢复码',
+        useTotpCode: '使用验证器验证码',
+        enterRecoveryCode: '请输入恢复码',
+        enterTotpCode: '请输入验证码',
+        rememberPassword: '记起密码了？',
+        verificationCode: '验证码',
+        verificationCodePlaceholder: '输入6位验证码',
+        invalidCode: '请输入6位验证码',
+        forgotPassword: {
+          title: '找回密码',
+          subtitle: '通过邮箱验证码重置您的密码',
+          sendCode: '发送验证码',
+          codeSent: '验证码已发送，请查收邮件',
+          codeHint: '请输入发送到您邮箱的6位验证码',
+          resetPassword: '重置密码',
+          resetSuccess: '密码重置成功！新密码已发送到您的邮箱，请查收。',
+          twoFactorDisabled: '您的双因素验证（2FA）已被自动禁用，建议重新启用以确保账户安全。'
+        },
+        oauthNotBound: '请先在个人设置中绑定 {provider} 账号后再使用快捷登录',
+        oauthUserNotFound: '用户不存在',
+        oauthAccountBanned: '账号已被禁用',
+        oauthProviderDisabled: '该登录方式已被禁用',
+        oauthTokenError: '获取授权失败，请重试',
+        oauthError: 'OAuth 登录失败，请重试',
+        loginFailed: '登录失败',
+        createAccount: '注册',
+        creatingAccount: '创建中...',
+        backToLogin: '返回登录',
+        registerSuccessRedirect: '注册成功，正在跳转...',
+        inviteCode: '邀请码',
+        inviteCodePlaceholder: '输入邀请码',
+        usernameHint: '字母开头，3-32 个字符',
+        passwordHint: '至少 8 位，包含大小写字母和数字',
+        fillAllRequired: '请填写所有必填项',
+        invalidEmail: '请输入有效的邮箱地址',
+        emailContainsIllegal: '邮箱包含非法字符',
+        passwordMismatch: '两次密码不一致',
+        passwordTooShort: '密码至少 8 位',
+        passwordNeedsUppercase: '密码需要包含至少一个大写字母',
+        passwordNeedsLowercase: '密码需要包含至少一个小写字母',
+        passwordNeedsNumber: '密码需要包含至少一个数字',
+        turnstileRequired: '请完成人机验证',
+        turnstileFailed: '人机验证失败，请重试',
+        // Email verification
+        emailCode: '邮箱验证码',
+        emailCodePlaceholder: '请输入6位验证码',
+        emailCodeRequired: '请输入邮箱验证码',
+        registrationClosedTitle: '当前已关闭注册',
+        registrationClosedMessage: '抱歉，当前站点暂时关闭注册，如需开通账号请联系管理员。',
+        registrationClosedShort: '当前已关闭注册',
+        sendCode: '发送验证码',
+        sendingCode: '发送中...',
+        codeSentHint: '验证码已发送至您的邮箱，10分钟内有效',
+        invalidEmailCode: '验证码无效或已过期',
+        allowedEmailDomains: '仅支持以下邮箱',
+        emailUsernamePlaceholder: '用户名',
+        confirmEmail: '确认邮箱地址',
+        confirmEmailMessage: '验证码将发送至以下邮箱，请确认地址是否正确：',
+        confirmAndSend: '确认发送',
+        // Terms of Service
+        tos: {
+            title: '服务条款',
+            agreePrefix: '我已阅读并同意',
+            termsLink: '《服务条款》',
+            mustAgree: '请阅读并同意服务条款',
+            understood: '我已了解',
+            loadFailed: '加载服务条款失败',
+        },
+    },
+
+    // 用户菜单
+    userMenu: {
+        profile: '个人设置',
+        myInstances: '我的实例',
+        logout: '退出登录',
+    },
+
+    // 配额
+    quota: {
+        hosts: '宿主机',
+        instances: '实例',
+        friends: '好友',
+        packages: '套餐',
+    },
+
+    // 实例相关
+    instance: {
+        title: '实例管理',
+        create: '创建实例',
+        name: '实例名称',
+        image: '镜像',
+        package: '套餐',
+        host: '节点',
+        ip: 'IP 地址',
+        port: '端口',
+        cpu: 'CPU',
+        memory: '内存',
+        disk: '磁盘',
+        bandwidth: '带宽',
+        expireAt: '到期时间',
+        expiredLabel: '已到期',
+        freeInstanceLabel: '免费实例',
+        config: '配置',
+        user: '用户',
+        details: '详情',
+        // 资源配额（订单概览用）
+        ports: '端口',
+        snapshots: '快照',
+        backups: '备份',
+        hostAnnouncement: '节点公告',
+        badgeModal: {
+            open: '查看或修改实例徽章',
+            kicker: '实例徽章',
+            title: '实例徽章',
+            subtitle: '查看当前实例徽章，并快速切换到其他已拥有徽章：{name}',
+            detailsTab: '徽章说明',
+            ownedTab: '我的徽章',
+            noBadgeSeries: '未设置徽章',
+            noBadgeTitle: '当前未设置实例徽章',
+            noBadgeSummary: '这个实例目前仍在使用默认图标。',
+            noBadgeDescription: '你可以切换到“我的徽章”，把已拥有的徽章快速应用到当前实例。',
+            statusLabel: '当前状态',
+            statusApplied: '已应用到当前实例',
+            statusNotApplied: '未设置实例徽章',
+            ownedCountLabel: '已拥有副本',
+            openOwnedTab: '从我的徽章中选择',
+            manageUnavailable: '当前实例不在你的可管理实例列表中，这里只能查看徽章信息，不能直接修改。',
+            emptyOwnedTitle: '你还没有可用的实例徽章',
+            emptyOwnedHint: '前往娱乐中心获取徽章后，就可以在这里快速切换当前实例的徽章。',
+            applyCurrent: '应用到当前实例',
+            replaceCurrent: '替换当前实例徽章',
+            moveCurrent: '转移到当前实例',
+            moveFromAvatar: '从头像改为当前实例',
+            appliedHere: '当前实例中',
+            currentHint: '这个徽章已经应用在当前实例上。',
+            replaceHint: '应用后会替换当前实例已经使用的徽章。',
+            moveFromAvatarHint: '应用后会先从当前头像上移除。',
+            moveFromInstanceHint: '应用后会先从实例“{name}”上移除。',
+            removeCurrent: '移除当前实例徽章',
+            updateSuccess: '实例徽章已更新',
+            removeSuccess: '已移除当前实例徽章',
+        },
+        errorBanner: {
+            title: '实例异常',
+            description: '实例异常，您可直接销毁（付费实例剩余价值退款不扣除手续费）',
+            destroyNow: '立即销毁',
+            confirmDestroy: '确定要销毁此异常实例吗？付费实例的剩余价值将退款至您的钱包（不扣除手续费）。',
+        },
+        actions: {
+            start: '启动',
+            stop: '停止',
+            restart: '重启',
+            delete: '删除',
+            console: '控制台',
+            snapshot: '快照',
+            backup: '备份',
+            rename: '重命名',
+            clone: '复制',
+            suspend: '封停',
+            unsuspend: '解封',
+        },
+        renameModal: {
+            title: '重命名实例',
+            name: '实例名称',
+            namePlaceholder: '输入新的实例名称',
+            cancel: '取消',
+            confirm: '确认',
+            renaming: '重命名中...',
+            success: '实例已重命名',
+            failed: '重命名失败',
+        },
+        statusLabel: '状态',
+        modeLabel: '模式',
+        quotaLabel: '配额',
+        trafficLabel: '流量',
+        status: {
+            running: '运行中',
+            stopped: '已停止',
+            suspended: '已封停',
+            starting: '启动中',
+            stopping: '停止中',
+            restarting: '重启中',
+            creating: '创建中',
+            error: '异常',
+            deleted: '已删除',
+        },
+        statusFilter: {
+            all: '全部状态',
+        },
+        createdAt: '创建时间',
+        manageDesc: '管理您的容器实例',
+        userInstances: '用户 "{name}" 的实例',
+        clearFilter: '清除筛选',
+        searchPlaceholder: '搜索实例名称、IP...',
+        totalCount: '共 {count} 个实例',
+        noInstances: '暂无实例',
+        noMatchingInstances: '未找到匹配的实例',
+        tryOtherKeywords: '尝试使用其他关键词',
+        createFirstInstance: '创建第一个容器实例开始使用',
+        listLayout: '列表',
+        cardLayout: '卡片',
+        order: {
+            label: '调整排序',
+            top: '置顶',
+            up: '上移',
+            down: '下移',
+            bottom: '置底',
+            updateSuccess: '实例顺序已更新',
+            updateFailed: '保存实例顺序失败',
+        },
+        confirmDelete: '确定删除实例 "{name}"？此操作不可恢复。',
+        createPage: {
+            title: '创建实例',
+            description: '选择套餐并配置您的容器实例',
+            instanceName: '实例名称',
+            instanceNamePlaceholder: 'my-instance',
+            selectPackage: '请选择套餐',
+            selectSshKey: '请选择 SSH 密钥',
+            creating: '创建中...',
+            createSuccess: '实例创建中，请稍后在实例列表中查看状态',
+            loadFailed: '加载数据失败',
+            loadHostsFailed: '加载可用宿主机失败',
+            loadImagesFailed: '加载可用镜像失败',
+            missingSshKey: '缺少 SSH 密钥',
+            missingSshKeyDesc: '创建实例需要 SSH 密钥。请先前往',
+            profileSettings: '个人设置',
+            addSshKey: '添加 SSH 公钥。',
+            quotaInsufficient: '配额不足',
+            quotaCpu: 'CPU: 已用 {used}%/{limit}% 额配，本次需要 {need}%',
+            quotaMemory: '内存: 已用 {used}/{limit} MB，本次需要 {need} MB',
+            quotaDisk: '磁盘: 已用 {used}/{limit} MB，本次需要 {need} MB',
+            quotaInstance: '实例: 已达上限 {used}/{limit} 个',
+            packageNoHosts: '套餐未绑定宿主机，请联系管理员',
+            sharedPackageNotFound: '分享的套餐不存在或已失效，已为您选择其他可用套餐',
+            quotaInfo: {
+                prefix: '该套餐',
+                you: '您',
+                maxInstances: '',
+                count: '数量',
+                instances: '个实例',
+                unlimited: '无限制',
+                cpu: 'CPU',
+                memory: '内存',
+                remaining: '该套餐剩余配额',
+            },
+            resourceLimit: {
+                title: '资源配额不足，无法创建实例',
+                noInstances: '剩余实例数量为 0，无法创建新实例',
+                insufficientMemory: '剩余内存不足（<128MB），无法创建实例',
+                insufficientCpu: '剩余 CPU 不足（<15%），无法创建实例',
+            },
+            ownPaidPackageWarning: '这是您自己创建的付费套餐，不能为自己开通实例',
+            destroyTrafficNotice: '销毁限制：实例本月已用流量低于 5 GB 时才可销毁。',
+            firstPaidInstanceNotice: '销毁限制：实例本月已用流量低于 5 GB 时才可销毁。',
+            // 订单概览
+            orderSummary: '订单概览',
+            packageName: '套餐',
+            planName: '方案',
+            billingCycle: '计费周期',
+            months: '个月',
+            month: '月',
+            resourceConfig: '资源配置',
+            planFee: '方案费用',
+            // 套餐来源
+            source: {
+                official: '亲儿子',
+                market: '野生大佬',
+                friends: '好友共享',
+            },
+            fun: {
+                selectRegion: '挑个地盘',
+                packageCount: '{count} 个可薅档位',
+                selectPackage: '挑个饭碗',
+                selectPlan: '挑个姿势',
+                planDesc: '选个顺眼的付费档位',
+                customPlanHint: '没看上的？提交工单让人给你单独开小灶',
+                noPlans: '这个套餐暂时没摆上菜单',
+                planSoldOut: '被薅空了',
+                noPackages: '现在还没啥可薅的',
+                selectHost: '宠幸谁？',
+                hostAutoSelected: '默认先宠幸第一台能干活的',
+                selectSystem: '挑个灵魂',
+                noImages: '暂时没有可投胎的系统',
+                selectSshKey: '交出通行令牌',
+            },
+            // 托管免责提示
+            hostedDisclaimer: {
+                title: '托管节点提示',
+                content: '此为用户托管节点，售后由托管者（UID:{uid}）负责。仅提供平台服务，不担保节点质量。若托管者失联，将处理其托管余额退还至受影响用户的面板余额。',
+            },
+            zoneNotice: {
+                badge: '专区',
+                content: '此为 UID:{uid} 的专区，售后由 {username} 处理。',
+            },
+        },
+        startingInstance: '{name} 启动中',
+        stoppedInstance: '{name} 已停止',
+        restartingInstance: '{name} 重启中',
+        deletedInstance: '{name} 已删除',
+        actionFailed: '操作失败',
+        verificationRequiredHint: '此操作需要二次验证，请前往实例详情页面执行',
+        totalRecords: '共 {count} 条记录',
+        prevPage: '上一页',
+        nextPage: '下一页',
+        batch: {
+            selectedCount: '已选 {count} 个实例',
+            currentPageOnly: '批量操作仅作用于当前页选中的实例',
+            clear: '取消选择',
+            start: '批量开机',
+            stop: '批量关机',
+            restart: '批量重启',
+            sync: '批量同步',
+            renew: '批量续费',
+            autoRenewOn: '开启自动续费',
+            autoRenewOff: '关闭自动续费',
+            destroy: '批量销毁',
+            noEligibleAction: '所选实例中没有可执行该操作的实例',
+            partialResult: '已完成 {success} 个，失败 {failed} 个，跳过 {skipped} 个',
+            successResult: '已成功处理 {count} 个实例',
+            actionFailed: '批量操作失败',
+            previewFailed: '加载批量预览失败',
+            renewTitle: '批量续费',
+            renewDescription: '为当前选中的付费实例统一续费，只有支持所选时长的实例会被执行。',
+            selectedMonths: '续费时长',
+            eligibleCount: '可执行数量',
+            totalAmount: '合计金额',
+            renewEmpty: '所选实例中没有可续费项目',
+            eligibleList: '可执行实例（{count}）',
+            skippedList: '跳过实例（{count}）',
+            hosted: '托管实例',
+            unsupportedPeriod: '当前所选时长不可续费',
+            unknownReason: '当前无法处理',
+            destroyTitle: '批量销毁',
+            destroyDescription: '销毁当前选中的实例，只有满足条件的实例会被执行。',
+            destroyEmpty: '所选实例中没有可销毁项目',
+            refundTotal: '预计总退款',
+            feeTotal: '预计总手续费',
+            feeWaived: '免手续费',
+            confirmHint: '请输入 DESTROY 以确认批量销毁',
+            confirmPlaceholder: '输入 DESTROY 确认',
+        },
+        batchReason: {
+            notFoundOrForbidden: '实例不存在或无权操作',
+            freeNoRenew: '免费实例无需续费',
+            billingUnavailable: '无法获取实例计费信息',
+            noRenewOptions: '暂无可用续费选项',
+            renewWindow: '仅可在到期前 {days} 天内续费',
+            renewFailed: '续费失败',
+            freeNoAutoRenew: '免费实例不支持自动续费',
+            autoRenewAlreadyOn: '已经开启自动续费',
+            autoRenewAlreadyOff: '已经关闭自动续费',
+            autoRenewFailed: '自动续费设置失败',
+            deleted: '实例已删除',
+            creating: '实例正在创建中，无法销毁',
+            suspended: '实例已被封停，无法销毁，请先联系管理员解封',
+            destroyTrafficLimit: '当前月流量周期无法销毁，已用流量达到或超过 5G',
+            destroyFailed: '销毁实例失败',
+        },
+        // 移动端卡片
+        mobileCard: {
+            ipAddress: 'IP 地址',
+            config: '配置',
+            disk: '硬盘',
+            traffic: '流量',
+            host: '节点',
+            user: '用户',
+            unlimited: '无限制',
+            cpuCore: '%核',
+            quota: '配额',
+            ports: '端口',
+            snapshots: '快照',
+            backups: '备份',
+            sites: '反代',
+        },
+        // 实例创建组件
+        selector: {
+            // 地区选择
+            selectRegion: '选择国家/地区',
+            allRegions: '全部',
+            noRegions: '暂无可用地区',
+            packageCount: '{count} 个套餐',
+            // 套餐选择
+            selectPackage: '选择套餐',
+            selectPlan: '选择方案',
+            planDesc: '选择适合您需求的付费方案',
+            customPlanHint: '找不到合适的方案？您可以提交工单申请定制配置',
+            noPlans: '该套餐暂无可用方案',
+            planSoldOut: '已售罄',
+            noPackages: '暂无可用套餐',
+            cpu: 'CPU',
+            memory: '内存',
+            disk: '硬盘',
+            cores: '核',
+            networkMode: {
+                nat: 'NAT',
+                natDesc: '通过端口映射访问',
+                nat_ipv6: 'NAT + IPv6',
+                nat_ipv6Desc: 'NAT + 公网 IPv6',
+            },
+            docker: '可嵌套',
+            privileged: '特权',
+            configureResources: '配置资源',
+            adjustBasedOnPackage: '基于套餐上限自由调节',
+            cpuAllowance: '额配',
+            accountQuota: '账户配额',
+            packageLimit: '套餐限制',
+            selectHost: '选择宿主机',
+            hostOptional: '可选，不选则系统自动分配',
+            hostAutoSelected: '默认选中第一台可用节点',
+            hostTraffic: '该节点下实例月流量',
+            autoAssign: '自动分配',
+            autoAssignDesc: '系统根据负载自动选择最优节点',
+            available: '可用',
+            selectSystem: '选择系统',
+            showSyncedImages: '显示当前节点允许的镜像',
+            noImages: '暂无可用镜像',
+            noImagesOnHost: '所选节点暂无可用镜像',
+            contactAdmin: '请联系节点所有者或管理员调整镜像策略',
+            selectSshKey: '选择 SSH 密钥',
+            noSshKeys: '暂无 SSH 密钥',
+            addSshKeyHint: '请先在设置页面添加 SSH 公钥',
+            hostInsufficient: '宿主机资源不足',
+            hostInsufficientDesc: '当前配置需要 {cpu}% CPU 和 {memory}GB 内存，但套餐内所有宿主机均无法满足。',
+            hostInsufficientSuggest: '建议降低实例配置或等待资源释放。',
+            viewProbe: '查看探针监控',
+            prevPage: '上一页',
+            nextPage: '下一页',
+            pageInfo: '第 {current}/{total} 页，共 {count} 条',
+            // 方案资源配额
+            ports: '端口',
+            snapshots: '快照',
+            backups: '备份',
+            sites: '站点',
+            bandwidth: '带宽',
+        },
+        // 付费订阅卡片
+        subscription: {
+            premium: '付费订阅',
+            expiresAt: '到期日期',
+            expiresIn: '剩余时间',
+            expired: '已过期',
+            days: '天',
+            billingCycle: '计费周期',
+            renewPrice: '续费价格',
+            month: '月',
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            annual: '年付',
+            months: '个月',
+            perMonth: '/月',
+            perQuarter: '/季',
+            perHalfYear: '/半年',
+            perYear: '/年',
+            renew: '续费',
+            renewSuccess: '续费成功',
+            applyAffShort: '优惠码',
+            applyAffTitle: '绑定 AFF 优惠码',
+            applyAffInstance: '实例',
+            applyAffCurrentRenewPrice: '当前续费价格',
+            applyAffCodeLabel: 'AFF 优惠码',
+            applyAffCodePlaceholder: '输入 AFF 优惠码',
+            applyAffEffectHint: '绑定成功后仅影响后续续费价格。',
+            applyAffNoRefundHint: '不会退还当前周期差价，也不会改变当前周期费用。',
+            applyAffOwnCodeHint: '只能绑定他人的优惠码，不能绑定自己的优惠码。',
+            applyAffSubmit: '确认绑定',
+            applyAffSubmitting: '绑定中...',
+            applyAffSuccess: '优惠码绑定成功，后续续费将享受折扣',
+            // 自动续费
+            autoRenew: '自动续费',
+            autoRenewOn: '已开启自动续费',
+            autoRenewOff: '未开启自动续费',
+            autoRenewEnabled: '已开启自动续费',
+            autoRenewDisabled: '已关闭自动续费',
+            enableAutoRenew: '开启自动续费',
+            disableAutoRenew: '关闭自动续费',
+            autoRenewHint: '到期前 24 小时将自动从余额扣款续费',
+            autoRenewDesc: '开启自动续费后，实例将在到期前自动按 {cycle} 周期续费，每次续费 ￥{price}',
+            currentStatus: '当前状态',
+        },
+        // 实例销毁
+        destroy: {
+            button: '销毁',
+            title: '销毁实例',
+            warning: '此操作将永久删除实例及其所有数据，包括快照、备份、端口映射等，且不可恢复。',
+            warningFree: '此操作将永久删除实例及其所有数据，且不可恢复。',
+            rulesTitle: '销毁规则',
+            rulesDesc: '了解销毁功能的使用规则和限制',
+            ruleFirstFree: '首次销毁免手续费',
+            ruleFirstFreeDesc: '您的第一次销毁操作将免除手续费，全额退款',
+            ruleFeeRate: '后续销毁收取 {rate}% 手续费',
+            ruleFeeRateDesc: '第二次及以后销毁收取 {rate}% 手续费',
+            ruleTrafficThreshold: '付费实例当前月流量周期已用流量需低于 5G',
+            ruleTrafficThresholdDesc: '若当前月流量周期已用流量达到或超过 5G，则本次无法销毁付费实例',
+            ruleFreeInstance: '免费实例可直接销毁',
+            ruleFreeInstanceDesc: '免费实例销毁无退款，不计入销毁次数',
+            // 预览信息
+            instanceInfo: '实例信息',
+            instanceName: '实例名称',
+            hostName: '所在节点',
+            planName: '当前方案',
+            refundInfo: '退款信息',
+            remainingDays: '剩余天数',
+            remainingValue: '剩余价值',
+            maxRefundable: '退款上限',
+            feeRate: '手续费率',
+            feeAmount: '手续费',
+            refundAmount: '实际退款',
+            firstTimeFree: '首次免手续费',
+            freeInstanceNoRefund: '免费实例无退款',
+            days: '天',
+            // 确认
+            confirmTitle: '确认销毁',
+            confirmHint: '请输入实例名称 {name} 以确认销毁',
+            confirmPlaceholder: '输入实例名称确认',
+            confirmButton: '确认销毁',
+            destroying: '销毁中...',
+            cancel: '取消',
+            // 状态
+            success: '实例已销毁',
+            successWithRefund: '实例已销毁，已退款 ¥{amount}',
+            failed: '销毁失败',
+            loadFailed: '加载销毁信息失败',
+            // 不可销毁原因
+            cannotDestroy: '无法销毁',
+        },
+        // 实例详情页
+        detail: {
+            invalidId: '无效的实例 ID',
+            notExist: '实例不存在',
+            loadFailed: '加载实例失败',
+            tabs: {
+                info: '信息',
+                network: '网络',
+                traffic: '流量',
+                quota: '配额',
+                snapshots: '快照',
+                backups: '备份',
+                config: '配置',
+                logs: '日志',
+            },
+            task: {
+                start: '正在启动...',
+                stop: '正在停止...',
+                restart: '正在重启...',
+                rebuild: '正在重装...',
+                recreate: '正在重建...',
+                clone: '正在复制...',
+                change_host: '正在改节点...',
+            },
+            actions: {
+                starting: '实例启动中',
+                stopped: '实例已停止',
+                restarting: '实例重启中',
+                deleted: '实例已删除',
+                confirmDelete: '确定删除实例 "{name}"？\n\n此操作将永久删除实例和所有数据，不可恢复。',
+                actionFailed: '操作失败',
+                taskQueued: '操作已提交，请稍候...',
+                taskInProgress: '实例正在执行其他操作，请稍候',
+                rebuildSuccess: '系统重装成功，新密码已生成',
+                recreateSuccess: '实例重建成功，新密码已生成',
+                selectImageAndKey: '请选择镜像和 SSH 密钥',
+                clone: '复制实例',
+                cloning: '复制中...',
+                cloneSuccess: '实例复制成功',
+                cloneFailed: '实例复制失败',
+                confirmClone: '确定要复制实例 "{name}" 吗？',
+                cloneNotice: '复制操作将创建一个新的实例副本，新实例将继承源实例的所有配置，但会分配新的端口映射。复制可能需要几分钟时间，请耐心等待。',
+                stopRequired: '请先停止实例',
+                stopRequiredHint: '此操作需要实例处于停止状态',
+                suspend: '封停实例',
+                unsuspend: '解除封停',
+                suspending: '封停中...',
+                unsuspending: '解封中...',
+                suspendSuccess: '实例已封停',
+                unsuspendSuccess: '实例已解封',
+                syncStatus: '同步',
+                help: '帮助',
+                syncStatusChanged: '状态已同步：{from} → {to}',
+                syncStatusNoChange: '状态已更新，已同步网络地址',
+                syncIpv4Changed: '内网 IP 已更新: {from} → {to}',
+                syncProxySitesUpdated: '已同步更新 {count} 个反代站点配置',
+                confirmSuspend: '确定要封停实例 "{name}" 吗？',
+                confirmSuspendNotice: '封停后，实例所有者将无法对该实例进行任何操作，直到所有者手动解除封禁。',
+                suspendReason: '封停原因',
+                suspendReasonPlaceholder: '请输入封停原因，将通过站内信通知实例所有者...',
+                confirmUnsuspend: '确定要解除实例 "{name}" 的封停状态吗？',
+            },
+            rebuild: {
+                title: '重装',
+                noHostInfo: '无法获取节点信息',
+                noImages: '该节点当前没有可用镜像，请联系节点所有者或管理员调整镜像策略。',
+                loadImagesFailed: '加载镜像列表失败',
+                loadKeysFailed: '加载 SSH 密钥失败',
+            },
+            recreate: {
+                title: '重建实例',
+            },
+            port: {
+                fillPrivatePort: '请填写内部端口',
+                added: '端口映射已添加',
+                addedBoth: 'TCP 和 UDP 端口映射已添加',
+                batchAdded: '已添加 {count} 个端口映射',
+                stillConflict: '部分端口仍有冲突，请重新选择',
+                deleted: '端口映射已删除',
+                deleteFailed: '删除失败',
+                confirmDelete: '确定删除此端口映射？',
+                confirmBatchDelete: '确定删除选中的 {count} 个端口映射？',
+                batchDeleted: '已删除 {count} 个端口映射',
+                batchDeletePartial: '成功删除 {success} 个，{fail} 个删除失败',
+            },
+            password: {
+                loadFailed: '加载密码失败',
+            },
+            quota: {
+                saved: '配额已更新',
+                saveFailed: '保存失败',
+                portExceedUsed: '端口配额不能小于当前已使用量：当前已使用 {used} 个端口，输入 {input}',
+                snapshotExceedUsed: '快照配额不能小于当前已使用量：当前已使用 {used} 个快照，输入 {input}',
+                backupExceedUsed: '备份配额不能小于当前已使用量：当前已使用 {used} 个备份，输入 {input}',
+                portOutOfRange: '端口配额必须在 1-1000 范围内',
+                snapshotOutOfRange: '快照配额必须在 1-1000 范围内',
+                backupOutOfRange: '备份配额必须在 1-1000 范围内',
+            },
+            copy: {
+                success: '已复制到剪贴板',
+                failed: '复制失败',
+            },
+            // 信息标签页
+            info: {
+                title: '基本信息',
+                instanceId: '实例 ID',
+                image: '镜像',
+                host: '节点',
+                networkMode: '网络模式',
+                instanceMode: '实例模式',
+                nat: 'NAT',
+                ipv6: 'IPv6',
+                sshPort: 'SSH 端口',
+                sshHelpTitle: 'SSH 连接说明',
+                sshHelpIpv4: '使用 IPv4 连接时，需要先前往「网络」标签页添加 22 端口的映射，然后使用公网 IP 和映射后的端口进行连接。',
+                sshHelpIpv6: '使用 IPv6 连接时，可以直接使用公网 IPv6 地址和 22 端口进行连接，无需配置端口映射。',
+                rootPassword: 'Root 密码',
+                createdAt: '创建时间',
+                expiresAt: '到期时间',
+                suspended: '实例已封停',
+                suspendedAt: '封停时间',
+                suspendReasonLabel: '封停原因',
+                suspendReasonExpired: '实例已到期，请续费后解封',
+                suspendReasonDefault: '未填写封停原因',
+                suspendTip: '封停期间，实例无法启动、重启、重装等操作。如需解封或有疑问，请提交工单。',
+                copy: '复制',
+                show: '显示',
+                hide: '隐藏',
+                resourceUsage: '资源占用',
+                cpu: 'CPU',
+                memory: '内存',
+                disk: '硬盘',
+                inbound: '入站',
+                outbound: '出站',
+                ingressLimit: '入栈',
+                egressLimit: '出栈',
+                hostUid: '托管UID',
+                hostOwnerTitle: '托管者信息',
+                hostOwnerEmail: '邮箱',
+                hostOwnerHostCount: '托管节点数',
+                hostOwnerInstanceCount: '节点实例数',
+                hostOwnerRegisteredDays: '注册天数',
+                includesCache: '含页面缓存',
+                cannotEditConfig: '实例状态不允许修改配置',
+                redeem: '兑换',
+                redeemTitle: '兑换资源',
+            },
+            // Cloud-init 初始化状态
+            cloudInit: {
+                initializing: '初始化中',
+                retry: '重新检查',
+                retryUnknown: '重试检测',
+                retryStalled: '继续检测',
+                short: '初始化',
+                shortUnknown: '待确认',
+                shortStalled: '较慢',
+                clickToRetry: '系统正在初始化，点击重新检测',
+                clickToRetryUnknown: '当前无法确认 Cloud-init 状态，点击重新检测',
+                clickToRetryStalled: '初始化耗时较长，点击继续检测或手动标记完成',
+                statusUnknown: '状态待确认',
+                stalled: '初始化较慢',
+                manualComplete: '手动标记完成',
+                manualShort: '完成',
+                manualCompleteSuccess: '已手动标记实例初始化为完成',
+            },
+            // 网络标签页
+            network: {
+                title: '网络地址',
+                privateIpv4: '内网 IPv4',
+                publicIpv4: '公网 IPv4',
+                publicIpv6: '公网 IPv6',
+                portMappings: '端口映射',
+                publicIp: '公网 IP',
+                add: '添加',
+                noQuota: '请先分配端口配额',
+                quotaFull: '端口配额已满',
+                addPortMapping: '添加端口映射',
+                prevPage: '上一页',
+                nextPage: '下一页',
+                perPage: '每页',
+                filterBoth: '全部',
+                selectAll: '全选当前页',
+                selectedCount: '已选择 {count} 项',
+                batchDelete: '批量删除',
+                noFilterResults: '当前筛选条件无匹配结果',
+                noPortQuota: '未分配端口配额',
+                allocateQuotaHint: '请先在「配额」标签页中分配端口配额',
+                noPortMappings: '暂无端口映射，点击「添加」创建',
+                ipv6OnlyPortMappingHint: 'IPv6 Only类型的实例无法进行端口映射，请直接使用实例的IPv6',
+                additionalIpv6: '额外 IPv6 地址',
+                addIpv6: '添加 IPv6',
+                noAdditionalIpv6: '暂无额外 IPv6 地址',
+                ipAdded: 'IPv6 地址添加成功',
+                ipAddFailed: 'IPv6 地址添加失败',
+                ipDeleted: 'IPv6 地址已删除',
+                ipDeleteFailed: 'IPv6 地址删除失败',
+                confirmDeleteIp: '确定要删除这个 IPv6 地址吗？',
+                // IPv6 管理新增
+                primaryIpv6: '主 IPv6',
+                extraIpv6: '额外 IPv6',
+                ipv6Subnets: 'IPv6 网段',
+                addSubnet: '分配网段',
+                customIpv6: '自定义 IPv6',
+                randomIpv6: '随机分配',
+                setCustom: '设置自定义',
+                custom: '自定义',
+                primary: '主',
+                addIpv6Modal: {
+                    title: '添加 IPv6 地址',
+                    randomHint: '系统将从节点 IPv6 子网中随机分配一个地址',
+                    customHint: '输入您自己的 IPv6 地址（必须在节点子网范围内）',
+                    addressLabel: 'IPv6 地址',
+                    addressPlaceholder: '如 2001:db8::1',
+                    invalidAddress: '无效的 IPv6 地址格式',
+                    adding: '添加中...',
+                },
+                subnetModal: {
+                    title: '分配 IPv6 网段',
+                    hint: '选择要分配的网段大小，节点将自动从可用池中分配',
+                    prefix112: '/112 (65,536 个 IP)',
+                    prefix120: '/120 (256 个 IP)',
+                    prefix124: '/124 (16 个 IP)',
+                    allocating: '分配中...',
+                    allocate: '分配',
+                },
+                noSubnets: '暂无分配的 IPv6 网段',
+                subnetAllocated: 'IPv6 网段分配成功',
+                subnetAllocateFailed: 'IPv6 网段分配失败',
+                subnetDeleted: 'IPv6 网段已删除',
+                subnetDeleteFailed: 'IPv6 网段删除失败',
+                confirmDeleteSubnet: '确定要删除这个 IPv6 网段吗？',
+                customIpv6Set: '自定义 IPv6 地址设置成功',
+                customIpv6Failed: '自定义 IPv6 地址设置失败',
+                ipv6NotInSubnet: 'IPv6 地址必须在节点子网范围内',
+                ipv6AlreadyExists: 'IPv6 地址已被占用',
+                instanceMustRunning: '实例必须处于运行状态才能管理 IPv6',
+                loading: '加载中...',
+                // 重新分配 IPv6
+                reassignIpv6: '重新获取',
+                reassignIpv6Confirm: '确定要重新分配 IPv6 地址吗？',
+                reassignIpv6ConfirmHint: '重新分配后需要重装系统才能生效',
+                reassignIpv6Success: 'IPv6 已重新分配，请重装系统使其生效',
+                reassignIpv6Failed: 'IPv6 重新分配失败',
+                reassignIpv6Loading: '重新分配中...',
+                reassignIpv6StopRequired: '实例必须先关机才能重新分配 IPv6',
+                reassignIpv6Cooldown: '每天只能重新获取一次，请等待 {hours} 小时后重试',
+                reassignIpv6CooldownShort: '{hours}小时后',
+                reassignIpv6NotSupported: '此实例不支持重新分配 IPv6',
+            },
+            // 配额标签页
+            quotaTab: {
+                title: '实例配额设置',
+                portLimit: 'NAT 端口数上限',
+                snapshotLimit: '快照数量上限',
+                backupLimit: '备份数量上限',
+                placeholder: '留空或输入0自动填入剩余额度',
+                currentUsage: '当前使用',
+                quotaLimit: '配额限制',
+                full: '已满',
+                remaining: '剩余',
+                defaultRemaining: '默认账户剩余额度',
+                unit: '个',
+                portMappings: '端口映射',
+                snapshots: '快照',
+                backups: '备份',
+                save: '保存配额设置',
+                saving: '保存中...',
+            },
+        },
+        // 修改配置弹窗
+        configEdit: {
+            title: '修改配置',
+            hint: '修改 CPU、内存配置将实时生效，无需重启实例。磁盘只能增大，不能缩小。',
+            cpu: 'CPU',
+            memory: '内存',
+            disk: '硬盘',
+            traffic: '流量',
+            trafficHint: '留空表示无限制，单位为GB',
+            cores: '核',
+            resourceType: '资源类型',
+            current: '当前',
+            modifyTo: '修改为',
+            diskOnlyIncrease: '只能增大',
+            quotaInsufficient: '配额不足',
+            quotaError: {
+                cpu: 'CPU 配额不足：可用 {available}%，需要 {need}%',
+                memory: '内存配额不足：可用 {available}，需要 {need}',
+                disk: '磁盘配额不足：可用 {available}，需要 {need}',
+            },
+            success: '配置修改成功',
+            failed: '配置修改失败',
+            packageRequired: '实例必须绑定套餐才能修改配置',
+            loadPackageFailed: '加载套餐信息失败，请稍后重试',
+        },
+        // 站点管理
+        sites: {
+            title: '建站',
+            addSite: '添加站点',
+            editSite: '编辑站点',
+            addFirstSite: '添加第一个站点',
+            empty: '暂无反代站点，点击上方按钮添加。',
+            caddyNotEnabled: '宿主机未启用 Caddy',
+            caddyNotEnabledHint: '当前实例所在宿主机未启用 Caddy 反代服务，无法使用建站功能。',
+            domain: '域名',
+            domainRequired: '请输入域名',
+            domainHint: '输入要绑定的域名，不支持泛域名',
+            wildcardNotAllowed: '不支持泛域名（如 *.example.com）',
+            targetPort: '内部端口',
+            portHint: '实例内部运行的 Web 服务端口（如 80, 3000, 8080）',
+            statusActive: '已生效',
+            statusPending: '等待解析',
+            statusError: '配置失败',
+            refresh: '刷新配置',
+            loadFailed: '加载站点列表失败',
+            addSuccess: '站点添加成功',
+            addFailed: '添加站点失败',
+            deleteConfirm: '确定要删除站点 {domain} 吗？',
+            deleteSuccess: '站点已删除',
+            deleteFailed: '删除站点失败',
+            updateSuccess: '站点配置已更新',
+            updateFailed: '更新站点失败',
+            refreshSuccess: '配置已刷新',
+            refreshFailed: '刷新配置失败',
+            addedSuccess: '域名添加成功',
+            dnsHintDesc: '请前往您的 DNS 服务商添加以下解析记录：',
+            dnsType: '类型',
+            dnsHost: '主机',
+            dnsValue: '值',
+            sslAutoHint: 'DNS 解析生效后，Caddy 将自动申请 SSL 证书。',
+            quotaInfo: '已使用 {used} / {limit} 个站点',
+            quotaFull: '已达上限',
+            disabled: '已禁用',
+            enableSite: '启用站点',
+            disableSite: '禁用站点',
+            toggleFailed: '切换状态失败',
+            enableHttps: '启用 HTTPS',
+            httpsHint: '自动申请 Let\'s Encrypt 证书，访问 HTTP 会跳转到 HTTPS',
+            httpsEnabled: '已启用 HTTPS',
+            httpOnly: '仅 HTTP',
+            checkCert: '检查证书状态',
+            certCheckFailed: '检查证书状态失败',
+            checkDns: '检测 DNS',
+            dnsActivated: 'DNS 验证通过，站点已激活',
+            dnsResolved: 'DNS 已正确解析',
+            dnsCheckFailed: 'DNS 检测失败',
+            dnsHintWithCheck: 'DNS 配置完成后，点击"检测 DNS"激活站点',
+            remark: '备注',
+            remarkPlaceholder: '可选，如：博客网站、API 服务等',
+            cert: {
+                title: '证书状态',
+                valid: '证书有效',
+                disabled: 'HTTPS 未启用',
+                pending: '待激活',
+                certPending: '证书申请中',
+                dnsError: 'DNS 未解析',
+                connectionRefused: '连接被拒绝',
+                timeout: '连接超时',
+                error: '检查失败',
+                issuer: '颁发者',
+                validFrom: '生效日期',
+                validTo: '过期日期',
+                daysRemaining: '剩余天数',
+                days: '天',
+            },
+        },
+    },
+
+    // 端口映射弹窗
+    portModal: {
+        title: '添加端口映射',
+        protocol: '协议',
+        bothHint: '将同时创建 TCP 和 UDP 映射，占用 2 个配额',
+        privatePort: '内部端口',
+        privatePortRequired: '*',
+        privatePortPlaceholder: '容器内部服务端口，如 80、22、3306',
+        privatePortPlaceholderRange: '如 80 或 80-85',
+        publicPort: '公网端口',
+        publicPortOptional: '(可选)',
+        publicPortPlaceholder: '留空自动分配',
+        publicPortPlaceholderRange: '如 20000 或 20000-20005',
+        publicPortHint: '留空将自动从端口池分配可用端口',
+        publicPortHintWithRange: '可选范围: {start}-{end}，留空将自动分配',
+        remark: '备注',
+        remarkOptional: '(可选)',
+        remarkPlaceholder: '如：Web服务、数据库、SSH等',
+        cancel: '取消',
+        adding: '添加中...',
+        add: '添加',
+        // 新增：范围输入支持
+        rangeHint: '支持范围输入，如 80-85',
+        invalidPortFormat: '端口格式无效，请输入单个端口或端口范围（如 80-85）',
+        ipv6OnlySshPortHint: '22 端口不用映射，公网 IPv6 直连 SSH 就行，正门口已经亮灯了',
+        rangeMismatch: '内网端口数 ({private} 个) 与公网端口数 ({public} 个) 不匹配',
+        publicPortOutOfRange: '公网端口超出允许范围 ({start}-{end})',
+        quotaPreview: '将创建 {count} 个映射，占用 {quota} 个配额',
+        quotaRemaining: '剩余 {remain} 个',
+        quotaInsufficient: '配额不足，需要 {need} 个，剩余 {remain} 个',
+    },
+
+    // 端口冲突解决弹窗
+    portConflict: {
+        title: '部分端口已被占用',
+        subtitle: '共 {count} 个端口冲突',
+        description: '以下端口已被其他实例占用，您可以修改为新的端口或使用系统建议。',
+        originalPort: '原端口',
+        newPort: '新端口',
+        occupied: '已占用',
+        suggested: '建议',
+        rangeHint: '可用范围: {start}-{end}',
+        useSuggested: '使用全部建议',
+        cancel: '取消',
+        confirm: '确认修改',
+    },
+
+    // 重装系统弹窗
+    rebuildModal: {
+        title: '重装系统',
+        dangerWarning: '危险操作',
+        warningList: {
+            dataLoss: '重装系统将清除实例内的所有数据',
+            snapshotLoss: '所有快照将被永久删除',
+            irreversible: '此操作不可恢复！',
+        },
+        preserveInfo: '重装系统会保留端口映射。',
+        manualStartHint: '重装完成后需手动启动实例。',
+        selectImage: '选择新镜像',
+        imageHint: '只能选择该节点当前允许的镜像',
+        selectSshKey: '选择 SSH 密钥',
+        noSshKey: '暂无可用密钥',
+        addSshKeyHint: '请先在设置中添加 SSH 密钥',
+        passwordHint: '重装后将自动生成新的 root 密码，可在实例详情页查看。',
+        cancel: '取消',
+        rebuilding: '重装中...',
+        confirmRebuild: '确认重装',
+    },
+
+    // 重建实例弹窗
+    recreateModal: {
+        title: '重建实例',
+        dangerWarning: '危险操作',
+        warningList: {
+            dataLoss: '重建将清除实例内的所有数据',
+            snapshotLoss: '所有快照将被永久删除',
+            portMappingLoss: '所有端口映射将被删除',
+            backupLoss: '所有备份记录和备份策略将被删除',
+            proxySiteLoss: '所有反代站点和快照策略将被删除',
+            irreversible: '此操作不可恢复！',
+        },
+        differenceHint: '重建与重装不同：不需要先关机，会创建全新的实例替换旧实例。',
+        preserveInfo: '重建只保留计费状态和配额。',
+        selectImage: '选择新镜像',
+        selectSshKey: '选择 SSH 密钥',
+        noSshKey: '暂无可用密钥',
+        addSshKeyHint: '请先在设置中添加 SSH 密钥',
+        cancel: '取消',
+        recreating: '重建中...',
+        confirmRecreate: '确认重建',
+    },
+
+    // 快照管理
+    snapshot: {
+        title: '快照',
+        autoPolicy: '自动快照已启用',
+        autoPolicyEnabled: '已启用自动快照',
+        currentPolicy: '当前策略',
+        disableAutoPolicy: '取消自动',
+        minutes: '分钟',
+        manual: '手动管理',
+        autoSettings: '自动快照设置',
+        create: '创建',
+        noQuota: '请先分配快照配额',
+        quotaFull: '快照配额已满',
+        createSnapshot: '创建快照',
+        noSnapshots: '暂无快照',
+        noQuotaAllocated: '未分配快照配额',
+        allocateQuotaHint: '请先在「配额」标签页中分配快照配额',
+        statefulSnapshot: '状态快照',
+        restore: '恢复',
+        stopInstanceFirst: '请先停止实例',
+        delete: '删除',
+        createModal: {
+            title: '创建快照',
+            name: '名称',
+            nameRequired: '*',
+            namePlaceholder: 'snapshot-01',
+            description: '描述',
+            descriptionPlaceholder: '可选描述',
+            stateful: '保存内存状态（状态快照）',
+            cancel: '取消',
+            creating: '创建中...',
+            create: '创建',
+        },
+        policyModal: {
+            title: '自动快照设置',
+            enable: '启用自动快照',
+            interval: '快照间隔',
+            intervalOptions: {
+                min10: '每 10 分钟',
+                hour1: '每 1 小时',
+                hour6: '每 6 小时',
+                hour24: '每 24 小时',
+                day3: '每 3 天',
+            },
+            quotaFromPackage: '配额继承自套餐，当前限制为 {limit} 个。满额后将自动删除最早的自动快照。',
+            cancel: '取消',
+            saving: '保存中...',
+            save: '保存',
+        },
+        messages: {
+            createSuccess: '快照创建成功',
+            createFailed: '创建失败',
+            deleteConfirm: '确定删除快照 "{name}"？此操作不可恢复。',
+            deleteSuccess: '快照已删除',
+            deleteFailed: '删除失败',
+            restoreConfirm: '确定将实例恢复到快照 "{name}"？当前数据将被覆盖。',
+            restoreSuccess: '快照恢复成功',
+            restoreFailed: '恢复失败',
+            stopInstanceFirst: '请先停止实例再恢复快照',
+            policySaved: '自动快照策略已更新',
+            policyDisabled: '自动快照已关闭',
+            policySaveFailed: '保存失败',
+        },
+    },
+
+    // 备份管理
+    backup: {
+        title: '备份',
+        autoPolicy: '自动备份已启用',
+        autoPolicyEnabled: '已启用自动备份',
+        currentPolicy: '当前策略',
+        disableAutoPolicy: '取消自动',
+        minutes: '分钟',
+        manual: '手动管理',
+        autoSettings: '自动备份设置',
+        create: '创建',
+        noQuota: '请先分配备份配额',
+        quotaFull: '备份配额已满',
+        createBackup: '创建备份',
+        noBackups: '暂无备份',
+        noQuotaAllocated: '未分配备份配额',
+        allocateQuotaHint: '请先在「配额」标签页中分配备份配额',
+        status: {
+            creating: '创建中',
+            ready: '就绪',
+            error: '失败',
+        },
+        export: '导出',
+        preparing: '准备中...',
+        clickToDownload: '点击下载',
+        downloading: '下载中...',
+        retry: '重试',
+        delete: '删除',
+        createModal: {
+            title: '创建备份',
+            name: '名称',
+            nameRequired: '*',
+            namePlaceholder: 'backup-01',
+            description: '描述',
+            descriptionPlaceholder: '可选描述',
+            expiresIn: '过期天数（可选）',
+            neverExpire: '永不过期',
+            days7: '7 天',
+            days14: '14 天',
+            days30: '30 天',
+            days90: '90 天',
+            year1: '1 年',
+            createHint: '备份创建可能需要几分钟，请耐心等待。',
+            cancel: '取消',
+            creating: '创建中...',
+            create: '创建',
+        },
+        policyModal: {
+            title: '自动备份设置',
+            enable: '启用自动备份',
+            interval: '备份间隔',
+            intervalOptions: {
+                hour1: '每 1 小时',
+                hour6: '每 6 小时',
+                hour24: '每 24 小时',
+                day3: '每 3 天',
+            },
+            quotaFromPackage: '配额继承自套餐，当前限制为 {limit} 个。满额后将自动删除最早的自动备份。',
+            cancel: '取消',
+            saving: '保存中...',
+            save: '保存',
+        },
+        restore: '恢复',
+        restoring: '恢复中...',
+        rollback: '回滚',
+        restoreModal: {
+            title: '⚠️ 危险操作 - 恢复备份',
+            warning: '此操作将覆盖当前实例！',
+            warningDetail: '恢复操作会停止当前实例，并用备份内容替换。如果恢复失败，您可以选择回滚到原实例。',
+            dataLossWarning: '以下数据将被永久删除：',
+            dataLossItems: {
+                backups: '该实例的所有其他备份',
+                snapshots: '该实例的所有快照',
+            },
+            nameChangeNotice: '恢复成功后，实例名称将变更为：{name} | restored:{backup}',
+            backupName: '备份名称',
+            instanceName: '目标实例',
+            cancel: '取消',
+            confirm: '确认恢复',
+        },
+        messages: {
+            createSuccess: '备份创建中...',
+            createFailed: '创建失败',
+            deleteConfirm: '确定删除备份 "{name}"？此操作不可恢复。',
+            deleteSuccess: '备份已删除',
+            deleteFailed: '删除失败',
+            exportFailed: '准备导出失败',
+            downloadStarted: '下载已开始',
+            downloadFailed: '下载失败',
+            policySaved: '自动备份策略已更新',
+            policyDisabled: '自动备份已关闭',
+            policySaveFailed: '保存失败',
+            restoreStarted: '正在恢复备份 "{name}"，请稍候...',
+            restoreInProgress: '已有恢复任务正在进行中',
+            restoreCompleted: '备份恢复成功！',
+            restoreFailed: '恢复失败',
+            rollbackCompleted: '回滚成功，原实例已恢复',
+            rollbackFailed: '回滚失败',
+            uploadStarted: '上传任务已创建',
+            uploadInProgress: '已有上传任务正在进行中',
+            uploadCompleted: '备份上传成功！',
+            uploadFailed: '上传失败',
+            uploadCancelled: '上传任务已取消',
+        },
+        // 上传到远程存储
+        upload: '上传',
+        uploadRemote: '上传到云端',
+        uploadModal: {
+            title: '上传备份到远程存储',
+            selectStorage: '选择存储',
+            useDefault: '使用默认存储',
+            noStorage: '暂无存储配置',
+            noStorageHint: '请先在「设置」中配置远程存储',
+            goToSettings: '前往设置',
+            cancel: '取消',
+            upload: '开始上传',
+            uploading: '上传中...',
+        },
+        uploadStatus: {
+            pending: '排队中',
+            processing: '上传中',
+            completed: '已完成',
+            failed: '失败',
+            queuePosition: '队列位置：第 {position} 位',
+        },
+    },
+
+    // 仪表盘
+    dashboard: {
+        title: '概览',
+        welcome: '欢迎回来',
+        totalInstances: '总实例',
+        runningInstances: '运行中',
+        stoppedInstances: '已停止',
+        creatingInstances: '创建中',
+        userBalance: '用户余额',
+        balance: '余额',
+        memberLevel: '会员等级',
+        memberLevelBasic: '普通会员',
+        uptimeProbe: '自营节点监控',
+        statusPage: '状态页',
+        rechargeNow: '立即充值',
+        walletDetails: '查看钱包',
+        walletHint: '前往钱包页面完成充值',
+        instanceStatusOverview: '实例状态概览',
+        accountOverview: '账户概览',
+        runningHealth: '运行健康度',
+        instanceOverviewSummary: '{running}/{total} 台实例运行中，在线率 {percent}%',
+        containerInstances: '容器实例',
+        vmInstances: '虚拟机实例',
+        totalRecharge: '累计充值',
+        totalConsume: '累计消费',
+        userPoints: '用户积分',
+        frozenBalance: '冻结余额',
+        frozenBalanceHint: '账户中有冻结余额，请在钱包查看明细',
+        accountReadyHint: '账户状态正常，可直接创建或续费实例',
+        instanceListSummary: '最近 {count} / 共 {total} 个实例',
+        vipProgressTitle: '会员成长进度',
+        vipProgressToNext: '{current} → {next}',
+        vipProgressMaxed: '已达到当前最高会员等级',
+        vipProgressNoRule: '暂无下一等级规则',
+        vipProgressUnavailable: '会员进度暂不可用',
+        vipProgressAllHint: '升级到 {level} 需要同时满足以下条件',
+        vipProgressAnyHint: '升级到 {level} 满足任一条件即可',
+        vipProgressSingleMetricHint: '升级到 {level} 需要达到{metric}门槛',
+        vipProgressStableHint: '保持当前权益，后续福利大厅开放后可领取对应福利',
+        vipMetricTotalRecharge: '累计充值',
+        vipMetricTotalConsume: '累计消费',
+        vipMetricTotalHostingIncome: '累计托管收入',
+        vipMetricInstanceCount: '托管实例数',
+        vipProgressConditionMet: '已满足',
+        vipProgressCurrent: '当前',
+        vipProgressTarget: '目标',
+        vipProgressRemaining: '还差',
+        vipProgressRemainingMoney: '还差 {amount}',
+        vipProgressRemainingCount: '还差 {count} 个',
+        resourceUsage: '资源使用',
+        resourceOverview: '这是您的资源使用概览',
+        newInstance: '新建实例',
+        quotaUsage: '配额使用',
+        increaseQuota: '增加配额',
+        pinnedArticles: '置顶帮助文章',
+        viewAllHelp: '查看全部帮助',
+        myInstances: '我的实例',
+        viewAll: '查看全部',
+        viewAllInstances: '查看全部 {count} 个实例',
+        viewAllInstancesWithCount: '查看全部 {count} 个实例',
+        memoryMetric: '内存',
+        diskMetric: '磁盘',
+        noPublicIp: '无公网 IP',
+        unknownHost: '未分配节点',
+        noInstances: '还没有创建任何实例',
+        createFirst: '创建第一个实例',
+        quickActions: '快速操作',
+        createInstance: '创建实例',
+        newContainer: '新建容器',
+        instanceList: '实例列表',
+        manageInstances: '管理实例',
+        profileSettings: '个人设置',
+        accountSecurity: '账号安全',
+        helpDocs: '帮助文档',
+        userGuide: '使用指南',
+        greeting: {
+            morning: '早上好',
+            afternoon: '下午好',
+            evening: '晚上好',
+            basicUser: '{username}',
+            memberUser: '尊贵的 {level} {username}',
+            full: '{greeting}，{member}',
+        },
+    },
+
+    // 设置页面
+    profile: {
+        title: '个人设置',
+        basicInfo: '基本信息',
+        security: '安全设置',
+        changePassword: '修改密码',
+        currentPassword: '当前密码',
+        newPassword: '新密码',
+        confirmNewPassword: '确认新密码',
+        twoFactor: '两步验证',
+        enableTwoFactor: '启用两步验证',
+        disableTwoFactor: '禁用两步验证',
+        // 账户部分
+        account: {
+            title: '账户',
+            username: '用户名',
+            uid: 'UID',
+            role: '角色',
+            email: '邮箱',
+            notSet: '未设置',
+            admin: '管理员',
+            user: '用户',
+            changeEmail: '修改',
+            bindEmail: '绑定',
+            emailDialog: {
+                titleChange: '修改邮箱',
+                titleBind: '绑定邮箱',
+                stepCurrent: '验证当前邮箱',
+                stepCurrentSkipped: '当前邮箱未绑定',
+                stepCurrentHint: '先验证当前邮箱，确认这次操作由您本人发起。',
+                stepNew: '验证新邮箱',
+                stepNewHint: '输入新的邮箱地址，并完成新邮箱验证码验证。',
+                noCurrentEmailHint: '当前账户尚未绑定邮箱，可直接进入新邮箱验证并完成绑定。',
+                verifyCurrentTitle: '当前邮箱验证',
+                verifyCurrentDesc: '验证码将发送到当前邮箱 {email}，验证通过后才能继续修改邮箱。',
+                currentCode: '当前邮箱验证码',
+                currentCodePlaceholder: '输入收到的 6 位验证码',
+                sendCurrentCode: '发送验证码',
+                resendCurrentCode: '重新发送',
+                currentCodeSent: '当前邮箱验证码已发送',
+                currentCodeRequired: '请输入当前邮箱验证码',
+                verifyCurrentAction: '验证当前邮箱',
+                currentVerifiedSuccess: '当前邮箱验证成功',
+                currentVerificationExpired: '当前邮箱验证已失效，请重新验证当前邮箱。',
+                verifyNewTitle: '新邮箱验证',
+                verifyNewDesc: '请验证新的邮箱地址，完成后将立即更新为新的登录邮箱。',
+                bindEmailDesc: '请验证新的邮箱地址，完成后将绑定到当前账户。',
+                newEmail: '新邮箱',
+                newEmailPlaceholder: '输入新的邮箱地址',
+                newEmailRequired: '请输入新邮箱地址',
+                newEmailInvalid: '请输入有效的邮箱地址',
+                newEmailSame: '新邮箱不能与当前邮箱相同',
+                newCode: '新邮箱验证码',
+                newCodePlaceholder: '输入新邮箱收到的 6 位验证码',
+                newCodeRequired: '请输入新邮箱验证码',
+                sendNewCode: '发送验证码',
+                resendNewCode: '重新发送',
+                newCodeSent: '新邮箱验证码已发送',
+                resendIn: '{seconds}s 后可重发',
+                confirmAction: '确认提交',
+                updateSuccess: '邮箱已更新',
+                verifying: '验证中...',
+                submitting: '提交中...'
+            }
+        },
+        // 头像
+        avatar: {
+            title: '头像风格',
+            saveSuccess: '头像风格已更新',
+            saveFailed: '更新头像风格失败',
+            styles: {
+                adventurer: '冒险者',
+                adventurerNeutral: '冒险者素雅',
+                avataaars: '扁平插画',
+                avataaarsNeutral: '扁平插画纯净',
+                bigEars: '大耳萌',
+                bigEarsNeutral: '大耳萌纯净',
+                bigSmile: '开怀大笑',
+                bottts: '机器人',
+                botttsNeutral: '机器人纯净',
+                croodles: '抽象涂鸦',
+                croodlesNeutral: '抽象涂鸦纯净',
+                dylan: '迪伦风',
+                funEmoji: '趣味表情',
+                glass: '毛玻璃',
+                icons: '常用图标',
+                identicon: '几何哈希',
+                initials: '首字母',
+                lorelei: '洛蕾莱',
+                loreleiNeutral: '洛蕾莱纯净',
+                micah: '迈卡极简',
+                miniavs: '迷你小人',
+                notionists: 'Notion风格',
+                notionistsNeutral: 'Notion风格纯净',
+                openPeeps: '手绘众生相',
+                personas: '人物志',
+                pixelArt: '像素艺术',
+                pixelArtNeutral: '像素艺术纯净',
+                rings: '同心圆',
+                shapes: '几何图形',
+                thumbs: '拇指人',
+            },
+        },
+        // 资源配额
+        resourceQuota: {
+            title: '资源配额',
+            hosts: '宿主机',
+            instances: '实例',
+            friends: '好友',
+            unit: '个',
+        },
+        // 账单（BillingSection组件使用）
+        billing: {
+            title: '账户余额',
+            currentBalance: '当前余额',
+            recharge: '充值',
+            totalRecharge: '累计充值',
+            totalConsume: '累计消费',
+            balanceLogs: '余额明细',
+            rechargeRecords: '充值记录',
+            noLogs: '暂无余额记录',
+            noRecords: '暂无充值记录',
+            loadLogsFailed: '加载余额明细失败',
+            loadProvidersFailed: '加载支付渠道失败',
+            loadRecordsFailed: '加载充值记录失败',
+            selectProvider: '请选择支付方式',
+            invalidAmount: '金额无效',
+            orderCreated: '订单已创建',
+            redirecting: '正在跳转支付页面...',
+            orderNo: '订单号',
+            createOrderFailed: '创建订单失败',
+            paymentMethod: '支付方式',
+            noProviders: '暂无可用支付渠道',
+            amount: '充值金额',
+            amountRange: '金额范围',
+            feeNote: '手续费',
+            pay: '立即支付',
+            logTypes: {
+                recharge: '充值',
+                consume: '消费',
+                refund: '退款',
+                adminAdjust: '管理员调整',
+                gift: '赠送',
+            },
+            status: {
+                pending: '待支付',
+                paid: '已支付',
+                completed: '已完成',
+                failed: '失败',
+                cancelled: '已取消',
+                refunded: '已退款',
+            },
+        },
+        // 余额充值（旧版兼容）
+        userBilling: {
+            title: '余额充值',
+            balance: '当前余额',
+            frozen: '冻结金额',
+            recharge: '充值',
+            rechargeTitle: '账户充值',
+            selectAmount: '选择金额',
+            customAmount: '自定义金额',
+            selectProvider: '选择支付方式',
+            noProviders: '暂无可用支付渠道',
+            confirmRecharge: '确认充值',
+            fee: '手续费',
+            actual: '实际到账',
+            balanceLogs: '余额明细',
+            viewLogs: '查看明细',
+            rechargeRecords: '充值记录',
+            viewRecords: '查看记录',
+            noLogs: '暂无余额记录',
+            noRecords: '暂无充值记录',
+            amountRequired: '请输入充值金额',
+            providerRequired: '请选择支付方式',
+            recharging: '充值中...',
+            rechargeSuccess: '充值成功',
+            rechargeFailed: '充值失败',
+            loadFailed: '加载失败',
+        },
+        // 增加配额
+        increaseQuota: {
+            title: '增加配额',
+            description: '当配额使用率达到50%时，您可以自行增加配额',
+            type: '配额类型',
+            selectType: '选择要增加的配额类型',
+            hosts: '宿主机',
+            instances: '实例',
+            friends: '好友',
+            amount: '增加数量',
+            hostsAmount: '每次可增加 5 个',
+            instancesAmount: '每次可增加 50 个',
+            friendsAmount: '每次可增加 10 名',
+            submit: '提交',
+            submitting: '提交中...',
+            success: '配额增加成功',
+            failed: '配额增加失败',
+            notEligible: '当前使用率未达到50%，无法增加配额',
+            usageTooLow: '当前使用率：{percent}%，需要达到50%才能增加配额',
+            selectTypeFirst: '请先选择配额类型',
+            invalidAmount: '增加数量不正确',
+            hostsInvalid: '宿主机每次只能增加 5 个',
+            instancesInvalid: '实例每次只能增加 50 个',
+            friendsInvalid: '好友每次只能增加 10 名',
+        },
+        // 密码部分
+        password: {
+            title: '修改密码',
+            current: '当前密码',
+            currentPlaceholder: '输入当前密码',
+            new: '新密码',
+            newPlaceholder: '至少6位',
+            confirm: '确认新密码',
+            confirmPlaceholder: '再次输入新密码',
+            mismatch: '两次输入的密码不一致',
+            tooShort: '密码长度至少6位',
+            updated: '密码已更新',
+            updateFailed: '更新失败',
+            updating: '更新中...',
+            update: '更新密码',
+        },
+        // 双因素认证
+        twoFactorAuth: {
+            title: '双因素认证 (2FA)',
+            status: '状态',
+            enabled: '已启用',
+            notEnabled: '未启用',
+            enable: '启用 2FA',
+            disable: '禁用 2FA',
+            loading: '加载中...',
+            description: '启用双因素认证后，登录时需要输入手机验证器应用生成的动态验证码，提高账户安全性。',
+            setup: '设置双因素认证',
+            scanQrCode: '使用 Google Authenticator、Microsoft Authenticator 或其他 TOTP 应用扫描二维码',
+            manualEntry: '或手动输入密钥',
+            saveRecoveryCodes: '请保存以下恢复码，用于在无法使用验证器时恢复账户',
+            enterCode: '输入验证器显示的6位验证码',
+            codePlaceholder: '000000',
+            verifying: '验证中...',
+            confirmEnable: '确认启用',
+            cancel: '取消',
+            disableTitle: '禁用双因素认证',
+            disableDesc: '禁用后登录将不再需要验证码，请确认操作。',
+            password: '当前密码',
+            passwordPlaceholder: '输入密码',
+            verificationCode: '验证码',
+            processing: '处理中...',
+            confirmDisable: '确认禁用',
+            recoveryCodesStatus: '恢复码状态',
+            regenerate: '重新生成',
+            remaining: '剩余',
+            used: '已使用',
+            lowCodesWarning: '恢复码即将用完，建议重新生成',
+            regenerateTitle: '重新生成恢复码',
+            regenerateDesc: '重新生成后，旧的恢复码将全部失效。',
+            newCodesGenerated: '新恢复码已生成，请妥善保存',
+            generating: '生成中...',
+            confirmGenerate: '确认生成',
+            done: '完成',
+            enabledSuccess: '双因素认证已启用',
+            disabledSuccess: '双因素认证已禁用',
+            codesRegenerated: '恢复码已重新生成，请妥善保存',
+            getStatusFailed: '获取状态失败',
+            initFailed: '初始化失败',
+            verifyFailed: '验证失败',
+            disableFailed: '禁用失败',
+            regenerateFailed: '重新生成失败',
+            enterCodeError: '请输入6位验证码',
+            fillPasswordAndCode: '请填写密码和验证码',
+        },
+        // 会话管理
+        sessions: {
+            title: '登录会话',
+            logoutAll: '登出所有设备',
+            processing: '处理中...',
+            loading: '加载中...',
+            noSessions: '暂无活跃会话',
+            current: '当前',
+            ip: 'IP',
+            lastActive: '最后活跃',
+            revoke: '撤销',
+            revoked: '会话已撤销',
+            confirmLogout: '确定要退出当前登录吗？',
+            confirmLogoutAll: '确定要登出所有设备吗？你需要重新登录。',
+            loadFailed: '加载会话失败',
+            revokeFailed: '撤销会话失败',
+            revokeAllFailed: '撤销所有会话失败',
+            unknownDevice: '未知设备',
+            unknownBrowser: '未知浏览器',
+            justNow: '刚刚',
+            minutesAgo: '{n} 分钟前',
+            hoursAgo: '{n} 小时前',
+            daysAgo: '{n} 天前',
+        },
+        // OAuth 关联账号
+        oauth: {
+            title: '关联账号',
+            description: '绑定后可使用快捷登录',
+            bound: '已绑定',
+            notBound: '未绑定',
+            bind: '绑定',
+            unbind: '解绑',
+            noProviders: '暂无可用的第三方登录方式',
+            bindSuccess: '{provider} 账号绑定成功',
+            unbindSuccess: '{provider} 账号已解绑',
+            unbindFailed: '解绑失败',
+            confirmUnbind: '确定解除 {provider} 账号绑定？解绑后将无法使用该方式登录。',
+            errors: {
+                notLoggedIn: '请先登录后再绑定',
+                alreadyBoundOther: '该账号已被其他用户绑定',
+                invalidSession: '会话已过期，请重新登录',
+                bindFailed: '绑定失败',
+                tokenError: '授权失败，请重试',
+                providerDisabled: '该登录方式已被禁用',
+                oauthError: '认证失败，请重试',
+                missingCode: '授权信息缺失，请重试',
+            },
+        },
+        // SSH 密钥
+        sshKeys: {
+            title: 'SSH 公钥',
+            description: '用于 SSH 连接到实例',
+            add: '添加',
+            generate: '生成',
+            name: '名称',
+            namePlaceholder: '我的笔记本',
+            publicKey: '公钥内容',
+            publicKeyPlaceholder: 'ssh-ed25519 AAAA... 或 ssh-rsa AAAA...',
+            save: '保存',
+            cancel: '取消',
+            noKeys: '暂无公钥',
+            addSuccess: '公钥添加成功',
+            addFailed: '添加失败',
+            deleteSuccess: '公钥已删除',
+            deleteFailed: '删除失败',
+            confirmDelete: '确定删除此公钥？',
+            invalidName: '密钥名称格式不正确',
+            generateSuccess: '密钥生成成功',
+            generateFailed: '生成失败',
+            privateKeyTitle: '请保存私钥',
+            privateKeyWarning: '请立即保存私钥',
+            privateKeyWarningDesc: '系统不会保存您的私钥，关闭此弹窗后将无法再次查看。请将私钥保存到安全的地方。',
+            privateKeyContent: '私钥内容',
+            download: '下载私钥',
+            noPrivateKey: '没有可下载的私钥',
+            copyFailed: '复制失败',
+            downloadFailed: '下载失败，请手动复制私钥',
+            prevPage: '上一页',
+            nextPage: '下一页',
+            pageInfo: '第 {current}/{total} 页，共 {count} 条',
+        },
+        // 通知渠道
+        notifications: {
+            title: '通知渠道',
+            description: '接收实例、快照等事件通知',
+            add: '添加',
+            type: '类型',
+            name: '名称',
+            namePlaceholder: '我的通知',
+            save: '添加',
+            saving: '添加中...',
+            cancel: '取消',
+            noChannels: '暂无通知渠道',
+            addSuccess: '通知渠道添加成功',
+            addFailed: '添加失败',
+            deleteSuccess: '通知渠道已删除',
+            deleteFailed: '删除失败',
+            confirmDelete: '确定删除此通知渠道？',
+            enabled: '已启用',
+            disabled: '已禁用',
+            enable: '启用',
+            disable: '禁用',
+            toggleFailed: '操作失败',
+            test: '测试',
+            testSuccess: '测试通知已发送',
+            testFailed: '测试失败',
+            history: '历史',
+            historyTitle: '通知历史',
+            disabledSuffix: '（已禁用）',
+            statsTotal: '总计: {count}',
+            statsSent: '成功: {count}',
+            statsFailed: '失败: {count}',
+            filterAll: '全部',
+            filterSent: '成功',
+            filterFailed: '失败',
+            loadingLogs: '加载中...',
+            noLogs: '暂无通知记录',
+            statusSent: '成功',
+            statusFailed: '失败',
+            statusPending: '等待',
+            errorPrefix: '错误: {error}',
+            eventTypes: {
+                snapshot_created: '快照创建',
+                snapshot_restored: '快照恢复',
+                snapshot_deleted: '快照删除',
+                backup_created: '备份创建',
+                backup_failed: '备份失败',
+                backup_deleted: '备份删除',
+                backup_restored: '备份恢复',
+                backup_uploaded: '备份上传',
+                instance_created: '实例创建',
+                instance_started: '实例启动',
+                instance_stopped: '实例停止',
+                instance_deleted: '实例删除',
+                auto_snapshot: '自动快照',
+                auto_backup: '自动备份',
+                traffic_warning: '流量预警',
+                traffic_throttled: '流量限速',
+                test: '测试通知',
+            },
+            telegram: {
+                botToken: 'Bot Token',
+                botTokenPlaceholder: '123456:ABC-...',
+                chatId: 'Chat ID',
+                chatIdPlaceholder: '-100123456789',
+            },
+            discord: {
+                webhookUrl: 'Webhook URL',
+                webhookUrlPlaceholder: 'https://discord.com/api/webhooks/...',
+            },
+            webhook: {
+                url: 'URL',
+                urlPlaceholder: 'https://example.com/webhook',
+                secret: 'Secret（可选）',
+                secretPlaceholder: '用于验证签名',
+            },
+        },
+        telegramBinding: {
+            title: 'Telegram 绑定',
+            description: '绑定后可用于私有用户群准入等功能。',
+            refresh: '刷新',
+            refreshing: '刷新中',
+            unavailableTitle: '暂未启用',
+            unavailableDescription: '管理员尚未启用或尚未完整配置 Telegram 绑定。',
+            boundTitle: '已绑定 {name}',
+            telegramId: 'Telegram ID: {id}',
+            boundAt: '绑定时间: {date}',
+            joinHint: '如需申请私有群，私聊 {bot} 发送',
+            unlink: '解除绑定',
+            unlinking: '解除中',
+            unboundTitle: '未绑定 Telegram',
+            unboundDescription: '点击生成链接后，会跳转到 {bot}。在 Telegram 内点击开始即可完成绑定。',
+            generate: '生成绑定链接',
+            generating: '生成中',
+            openTelegram: '打开 Telegram',
+            copyLink: '复制链接',
+            linkHint: '链接 10 分钟内有效，完成绑定后回到本页刷新状态。',
+            expiresAt: '过期时间: {date}',
+            generated: 'Telegram 绑定链接已生成',
+            generateFailed: '生成绑定链接失败: {error}',
+            copied: '绑定链接已复制',
+            copyFailed: '复制失败，请手动复制链接',
+            confirmUnlink: '确定解除 Telegram 绑定？',
+            unlinked: 'Telegram 绑定已解除',
+            unlinkFailed: '解除绑定失败: {error}',
+        },
+        // 远程存储
+        storage: {
+            title: '远程存储',
+            description: '配置 WebDAV/FTP/SFTP 存储，用于备份上传',
+            add: '添加',
+            name: '名称',
+            namePlaceholder: '我的 NAS',
+            type: '类型',
+            host: '主机地址',
+            port: '端口',
+            username: '用户名',
+            password: '密码',
+            passwordUnchanged: '留空则不修改',
+            basePath: '基础路径',
+            setAsDefault: '设为默认',
+            default: '默认',
+            setDefault: '设为默认',
+            test: '测试',
+            noConfigs: '暂无存储配置',
+            nameHostRequired: '请填写名称和主机地址',
+            createSuccess: '存储配置创建成功',
+            updateSuccess: '存储配置更新成功',
+            deleteSuccess: '存储配置已删除',
+            saveFailed: '保存失败',
+            deleteFailed: '删除失败',
+            hasActiveTasks: '无法删除：该存储配置有上传任务正在进行中',
+            confirmDelete: '确定删除此存储配置？',
+            testSuccess: '连接测试成功',
+            testFailed: '连接测试失败',
+            setDefaultSuccess: '已设为默认',
+            setDefaultFailed: '设置失败',
+        },
+        // 登录历史
+        loginHistory: {
+            title: '登录历史',
+            description: '查看您的账户登录记录',
+            empty: '暂无登录记录',
+        },
+    },
+
+    // 管理后台
+    admin: {
+        statistics: {
+            title: '统计',
+            description: '用户、实例和计费数据',
+            timezone: '{timezone}',
+            refresh: '刷新',
+            reload: '重新加载',
+            noData: '暂无统计数据',
+            loadFailed: '统计数据加载失败：{message}',
+            unknownError: '未知错误',
+            tooltip: '{label} · {value}',
+            tabs: {
+                users: '用户',
+                instances: '实例',
+                billing: '计费',
+            },
+            periods: {
+                daily: '每日',
+                monthly: '每月',
+            },
+            billingMetrics: {
+                recharge: '充值',
+                consume: '消费',
+                aff: '返利',
+                destroyFee: '销毁手续费',
+            },
+            ranges: {
+                last30Days: '近 30 天',
+                last12Months: '近 12 个月',
+            },
+            cards: {
+                totalUsers: '总用户数',
+                recentDailyNewUsers: '近 30 天新增',
+                recentMonthlyNewUsers: '近 12 月新增',
+                averageNewUsers: '平均新增',
+                totalInstances: '系统总实例数',
+                availableInstances: '可用实例',
+                recentDailyCreatedInstances: '近 30 天创建',
+                recentMonthlyCreatedInstances: '近 12 月创建',
+                totalRecharge: '累计充值',
+                totalConsume: '累计消费',
+                totalAff: '累计返利',
+                totalDestroyFee: '累计销毁手续费',
+            },
+            captions: {
+                currentTotal: '当前累计',
+                dailyAggregate: '按日汇总',
+                monthlyAggregate: '按月汇总',
+                dailyAverage: '日均',
+                monthlyAverage: '月均',
+                nonDeletedInstances: '未删除实例',
+                notDeletedOrSuspended: '非删除 / 非封停',
+                completedOrders: '已完成订单',
+                totalScope: '托管和自营合计',
+                affCommission: 'AFF 新购 / 续费',
+                userDestroyFee: '用户销毁实例手续费',
+            },
+            sections: {
+                newUsers: '新增用户',
+                createdInstances: '创建实例',
+                paidFreeInstances: '付费 / 免费实例',
+                paidFreeDescription: '当前未删除实例占比',
+                metricTrend: '{metric}趋势',
+                billingScope: '{range}，托管和自营合计',
+            },
+            labels: {
+                paidInstances: '付费实例',
+                freeInstances: '免费实例',
+            },
+        },
+        hosting: {
+            title: '托管',
+            description: '查看符合条件的托管机主和托管经营数据',
+            loadFailed: '加载托管数据失败：{message}',
+            unknownError: '未知错误',
+            tabs: {
+                owners: '托管机主',
+                zones: '专区机主',
+                hostingVipLevels: '托管 VIP 等级',
+            },
+            cards: {
+                owners: '托管机主',
+                ownersCaption: '满足托管条件的用户',
+                hosts: '节点数',
+                hostsCaption: '机主已添加的节点',
+                instances: '实例数',
+                instancesCaption: '机主节点上的未删除实例',
+                totalIncome: '历史总托管收入',
+                totalIncomeCaption: '收入日志累计',
+            },
+            owners: {
+                title: '托管机主用户列表',
+                description: '已添加节点、已上架公开套餐且历史总托管余额不为 0 的用户。',
+                searchPlaceholder: '搜索用户名、ID、邮箱...',
+                empty: '暂无托管机主',
+                emptyHint: '用户需要同时满足节点、上架套餐和历史托管余额条件。',
+                user: '用户',
+                vipLevel: 'VIP等级',
+                hostingBalance: '托管余额',
+                frozenBalance: '冻结余额',
+                totalIncome: '历史总收入',
+                hostCount: '节点数',
+                packageCount: '上架套餐数',
+                instanceCount: '实例数',
+                createdAt: '注册时间',
+                noEmail: '未设置邮箱',
+            },
+            zones: {
+                title: '专区机主列表',
+                description: '专区机主会在开通实例页作为独立选项卡展示，其套餐不再出现在托管选项卡中。',
+                createTitle: '添加专区机主',
+                createDescription: '输入专区名，选择托管机主用户，并填写图床 LOGO 链接。',
+                name: '专区名',
+                namePlaceholder: '例如：Tokyoo 专区',
+                owner: '托管机主用户',
+                ownerSearchPlaceholder: '搜索可选托管机主...',
+                selectOwner: '请选择托管机主',
+                ownerHint: '已设置专区的机主不会出现在可选列表中。',
+                logo: 'LOGO 链接',
+                logoPlaceholder: 'https://example.com/logo.png',
+                logoHint: '仅支持 http 或 https 图片链接，系统不会保存图片文件。',
+                logoPreview: 'LOGO 预览',
+                noLogo: 'LOGO',
+                previewName: '专区预览',
+                previewHint: '开通实例页会以圆形 LOGO 展示。',
+                create: '添加专区',
+                formRequired: '请填写专区名、选择托管机主并填写 LOGO 链接',
+                logoInvalid: '请填写有效的 http 或 https LOGO 图片链接',
+                createSuccess: '专区机主已添加',
+                createFailed: '添加专区机主失败',
+                loadFailed: '加载专区机主失败：{message}',
+                deleteConfirm: '确定删除专区「{name}」吗？删除后该机主套餐会重新显示在托管选项卡中。',
+                deleteSuccess: '专区机主已删除',
+                deleteFailed: '删除专区机主失败',
+                empty: '暂无专区机主',
+                emptyHint: '添加后会显示在开通实例页的直营与托管之间。',
+                zone: '专区',
+            },
+        },
+        vipRules: {
+            userTitle: '用户 VIP 等级',
+            userDescription: '全局选择累计充值或累计消费作为用户会员口径，并按该口径动态计算会员等级，最高 VIP10。',
+            hostingTitle: '托管 VIP 等级',
+            hostingDescription: '按累计托管收入、当前托管实例数动态计算托管等级，最高 VIP10。',
+            level: '等级',
+            badgeBgColor: '标签背景色',
+            badgeTextColor: '标签字体色',
+            enabled: '启用',
+            mode: '条件关系',
+            modeAny: '满足任一',
+            modeAll: '同时满足',
+            userMetricTitle: '用户 VIP 统计口径',
+            userMetricHint: '全站用户 VIP 只能使用一种升级口径。切换后，每个等级只保存并计算当前口径对应的阈值。',
+            metricRecharge: '按累计充值',
+            metricConsume: '按累计消费',
+            minRecharge: '累计充值满（元）',
+            minConsume: '累计消费满（元）',
+            minHostingIncome: '累计托管收入满（元）',
+            minHostingInstances: '当前托管实例数满',
+            noLimit: '不限制',
+            save: '保存等级规则',
+            saveSuccess: 'VIP 等级规则已保存',
+            saveFailed: '保存 VIP 等级规则失败',
+            loadFailed: '加载 VIP 等级规则失败：{message}',
+            unknownError: '未知错误',
+            conditionRequired: 'VIP{level} 至少需要配置一个条件',
+            moneyThresholdInvalid: 'VIP{level} 的金额条件必须是大于 0 的数字',
+            instanceThresholdInvalid: 'VIP{level} 的实例数条件必须是正整数',
+            colorInvalid: 'VIP{level} 的标签颜色必须是 #RRGGBB 格式',
+        },
+        vipBenefits: {
+            title: '会员福利大厅设置',
+            description: '为已启用的用户 VIP 等级配置可领取福利。余额和积分会自动发放，实例奖品会生成待发放记录。',
+            save: '保存福利设置',
+            saveSuccess: '会员福利设置已保存',
+            saveFailed: '保存会员福利设置失败',
+            loadFailed: '加载会员福利设置失败',
+            loadPlansFailed: '加载套餐方案失败',
+            noEnabledLevels: '暂无已启用的用户 VIP 等级，请先在用户 VIP 等级中启用等级。',
+            levelTitle: 'VIP{level} 福利',
+            levelHint: '用户达到该等级后，可在福利大厅领取对应奖励。',
+            addReward: '添加奖品',
+            noRewardsForLevel: '该等级暂无奖品。',
+            rewardDefaultTitle: '福利',
+            rewardTitle: '奖品标题',
+            rewardType: '奖品类型',
+            rewardDescription: '奖品说明',
+            claimLimit: '领取次数',
+            sortOrder: '排序',
+            enabled: '启用',
+            disabled: '禁用',
+            types: {
+                balance: '余额',
+                points: '积分',
+                instance: '实例',
+            },
+            balanceTitle: '领取赠金',
+            balanceDesc: '发放到用户账户余额，可用于实例续费或新购。',
+            balanceAmount: '赠金金额（元）',
+            pointsTitle: '领取积分',
+            pointsDesc: '发放到用户积分账户，可用于福利和积分消耗。',
+            pointsAmount: '积分数量',
+            instanceTitle: '领取套餐实例',
+            instanceDesc: '指定一个套餐方案，用户领取后进入待发放状态，后续可扩展自动创建。',
+            package: '套餐',
+            plan: '方案',
+            selectPackage: '选择套餐',
+            selectPlan: '选择方案',
+            instanceDays: '赠送天数',
+            instanceQuantity: '数量',
+            balancePreview: '赠金 {amount}',
+            pointsPreview: '积分 {amount}',
+            instancePreview: '套餐实例',
+            instancePreviewWithPlan: '{plan} · {quantity} 台 · {days} 天',
+            titleRequired: 'VIP{level} 的奖品标题不能为空',
+            claimLimitInvalid: 'VIP{level} 的领取次数必须是正整数',
+            amountInvalid: 'VIP{level} 的余额或积分奖品数量必须大于 0',
+            balanceInvalid: 'VIP{level} 的赠金金额必须大于 0',
+            pointsInvalid: 'VIP{level} 的积分数量必须是正整数',
+            instancePlanRequired: 'VIP{level} 的套餐实例福利需要选择套餐和方案',
+            instanceDaysInvalid: 'VIP{level} 的赠送天数必须是正整数',
+            instanceQuantityInvalid: 'VIP{level} 的实例数量必须是正整数',
+        },
+        // 域名邮箱管理
+        mail: {
+            title: '邮箱管理',
+            description: '管理邮箱源、方案和用户订阅',
+            tabs: {
+                sources: '邮箱源',
+                plans: '方案',
+                subscriptions: '订阅',
+                domains: '域名',
+            },
+            createSource: '添加邮箱源',
+            editSource: '编辑邮箱源',
+            sourceCreated: '邮箱源创建成功',
+            sourceUpdated: '邮箱源更新成功',
+            sourceDeleted: '邮箱源已删除',
+            confirmDeleteSource: '确定要删除邮箱源 {name} 吗？请确保已无关联方案。',
+            noSources: '暂无邮箱源，请先添加',
+            createPlan: '添加方案',
+            editPlan: '编辑方案',
+            planCreated: '方案创建成功',
+            planUpdated: '方案更新成功',
+            planDeleted: '方案已删除',
+            confirmDeletePlan: '确定要删除方案 {name} 吗？',
+            noPlans: '暂无方案，请先添加',
+            noSubscriptions: '暂无订阅记录',
+            noDomains: '暂无域名记录',
+            searchSubscriptions: '搜索用户名、邮箱或ID...',
+            searchDomains: '搜索域名、用户名、邮箱或ID...',
+            fillRequired: '请填写必填字段',
+            createSourceFirst: '请先创建邮箱源',
+            region: '地区',
+            apiEndpoint: 'API 端点',
+            apiKey: 'API 密钥',
+            smtpHost: 'SMTP 服务器',
+            smtpPort: 'SMTP 端口',
+            webmailUrl: 'Webmail 地址',
+            sourcePlaceholder: '例如：美国数据中心',
+            source: '邮箱源',
+            domainLimit: '域名限制',
+            diskLimit: '磁盘限制',
+            diskLimitGb: '磁盘限制(GB)',
+            price: '价格',
+            billingCycle: '计费周期',
+            planPlaceholder: '例如：基础版',
+            user: '用户',
+            plan: '方案',
+            expiresAt: '到期时间',
+            domain: '域名',
+            accounts: '账户数',
+            plans: '方案数',
+            unsub: {
+                button: '退订',
+                title: '退订邮箱',
+                refundType: '退款方式',
+                refundNone: '不退款',
+                refundNoneDesc: '直接取消订阅，不退还任何费用',
+                refundFull: '全额退款',
+                refundFullDesc: '退还方案全价 {amount}',
+                refundRemaining: '剩余价值退款',
+                refundRemainingDesc: '按剩余有效期比例退款',
+                reason: '退款原因',
+                reasonPlaceholder: '请输入退款原因，将记录到余额日志...',
+                reasonRequired: '退款时必须填写原因',
+                confirm: '确认退订',
+                success: '订阅已退订',
+                successWithRefund: '订阅已退订，已退款 ¥{amount}',
+            },
+        },
+        // 管理员创建实例
+        instanceCreate: {
+            title: '创建实例',
+            description: '为用户赠送实例，无需支付任何费用',
+            targetUser: '目标用户',
+            usernamePlaceholder: '输入用户名',
+            usernameHint: '实例将创建到该用户账户下',
+            userHint: '实例将创建到该用户账户下',
+            checkUser: '查询',
+            checking: '查询中...',
+            userFound: '用户找到 (ID: {id})',
+            userNotFound: '用户不存在',
+            userNotFoundHint: '请检查用户名是否正确',
+            noSshKey: '该用户未设置 SSH 密钥',
+            noSshKeyHint: '请让用户先在个人设置中添加 SSH 密钥',
+            orderSummary: '赠送摘要',
+            freeGift: '免费赠送',
+            freeGiftHint: '此实例由管理员免费创建，不计入收费统计',
+            createFor: '创建给',
+            create: '创建实例',
+            creating: '创建中...',
+            submit: '创建实例',
+            success: '实例创建成功',
+            selectUser: '请先选择目标用户',
+            createSuccess: '实例已创建，将显示在用户 {username} 的实例列表中',
+            createFailed: '创建实例失败',
+            selectUserFirst: '请先查询并确认目标用户',
+            packageScope: {
+                official: '自营套餐',
+                hosted: '托管套餐',
+            },
+            // 付费实例相关
+            instanceType: '实例类型',
+            freeInstance: '免费实例',
+            paidInstance: '付费实例',
+            selectPlan: '选择方案',
+            noPlanHint: '该套餐暂无可用方案',
+            chargeFirstMonth: '扣除首月费用',
+            chargeFirstMonthHint: '从用户余额扣除首月费用',
+            noChargeFirstMonthHint: '首月免费赠送，次月起正常计费',
+            planPrice: '方案月费',
+            setupFee: '开通费',
+            totalCharge: '本次扣费',
+            freeFirstMonth: '首月免费',
+            userBalance: '用户余额',
+            insufficientBalance: '用户余额不足',
+            paidSummary: '付费摘要',
+            paidInstanceHint: '创建付费实例，按方案计费',
+        },
+        // 全站公告
+        broadcast: {
+            title: '发送全站公告',
+            description: '发送站内信给所有活跃用户',
+            messageTitle: '公告标题',
+            titlePlaceholder: '输入公告标题',
+            titleRequired: '请输入公告标题',
+            titleTooLong: '标题超过 200 字符',
+            messageContent: '公告内容',
+            contentPlaceholder: '输入公告内容',
+            contentRequired: '请输入公告内容',
+            contentTooLong: '内容超过 5000 字符',
+            send: '发送公告',
+            sendSuccess: '已成功发送给 {count} 个用户',
+            sendFailed: '发送失败',
+            hint: '公告将发送给所有状态为「正常」的用户。',
+            // 历史记录
+            history: '历史记录',
+            noHistory: '暂无发送记录',
+            recipients: '发送给 {count} 人',
+            sender: '发送者',
+            types: {
+                system_broadcast: '全站公告',
+                host_broadcast: '节点通知',
+                admin_message: '管理员私信',
+                host_message: '宿主机私信',
+            },
+        },
+        // 系统设置
+        system: {
+            title: '系统设置',
+            description: '配置系统初始参数和默认值',
+            tabs: {
+                system: '系统设置',
+                popupAnnouncement: '弹窗公告',
+                telegram: 'Telegram 设置',
+            },
+            sections: {
+                access: {
+                    title: '访问与注册',
+                    description: '管理注册入口、邀请码生成、默认配额和实例转移规则',
+                },
+                hosting: {
+                    title: '托管与站点',
+                    description: '管理托管入口、托管公告和白嫖站赠送策略',
+                },
+                brand: {
+                    title: '品牌与外观',
+                    description: '管理系统名称、Logo、头像服务和底部联系方式',
+                },
+                security: {
+                    title: '安全验证',
+                    description: '管理 Turnstile 人机验证和注册邮箱域名白名单',
+                },
+                mail: {
+                    title: '邮件服务',
+                    description: '管理 SMTP 邮件发送配置和测试邮件',
+                },
+                tickets: {
+                    title: '工单与附件',
+                    description: '管理工单入口和工单图片存储配置',
+                },
+            },
+            popupAnnouncement: {
+                title: '弹窗公告',
+                description: '配置用户访问网站时弹出的全站公告。',
+                content: '公告内容',
+                placeholder: '在此输入弹窗公告内容，留空并保存表示删除公告，不再广播。',
+                hint: '用户看到后可以选择今日不见或再也不见；公告内容更新后会按新公告重新弹出。',
+                promoTitle: '图片推广弹窗',
+                promoDescription: '配置新机器推广弹窗，前台会展示图片并引导用户购买指定套餐。',
+                promoImageUrl: '图片 URL',
+                promoImagePlaceholder: 'https://example.com/promo.jpg',
+                promoImageHint: '建议使用清晰横幅图片，前台会按原比例完整显示。',
+                promoPackage: '目标套餐',
+                promoPackagePlaceholder: '选择要推广的套餐',
+                promoPackageLoading: '正在加载套餐...',
+                promoPackageEmpty: '暂无可推广套餐',
+                promoPackageHint: '图片 URL 和目标套餐都填写后才会显示推广弹窗。',
+                promoPreview: '前台预览',
+                promoPreviewEmpty: '填写图片 URL 后显示预览',
+                promoNoPackage: '尚未选择套餐',
+                promoPackageFallback: '目标套餐',
+            },
+            defaultQuota: '用户默认配额',
+            defaultQuotaDesc: '新注册用户将自动获得以下配额限制',
+            quotaHost: '默认宿主机配额',
+            quotaHostDesc: '新用户默认可创建宿主机数量',
+            quotaFriend: '默认好友配额',
+            quotaFriendDesc: '新用户默认可添加好友数量（0 = 未授权）',
+            quotaPackage: '默认套餐配额',
+            quotaPackageDesc: '新用户默认可创建套餐数量（0 = 未授权）',
+            registration: '注册设置',
+            registrationDesc: '配置用户注册相关选项',
+            registrationEnabled: '开放注册',
+            registrationEnabledDesc: '关闭后，新用户将无法注册，现有用户仍可正常登录',
+            registrationOpen: '开放注册',
+            registrationClosed: '关闭注册',
+            requireInviteCode: '邀请码注册',
+            requireInviteCodeDesc: '开启后，用户注册时需要填写邀请码',
+            openRegistration: '开放注册',
+            inviteOnly: '仅邀请',
+            hostingFeature: {
+                title: '托管功能',
+                description: '控制托管节点与收益入口是否向新用户显示，已创建过节点的用户始终保留入口。',
+                enable: '显示托管节点入口',
+                enableDesc: '关闭后，从未创建过节点的用户将看不到托管节点和收益入口；已有节点用户仍可继续管理。',
+                marketEntry: '显示托管套餐购买入口',
+                marketEntryDesc: '控制开通实例页面是否显示托管专区和托管套餐购买入口；关闭后用户只能从该页面选择官方套餐。',
+                marketEntryVisible: '显示入口',
+                marketEntryHidden: '隐藏入口',
+                notice: '托管公告',
+                noticePlaceholder: '在此输入托管公告内容，留空则前台不显示',
+                noticeHint: '显示在托管收益页面，支持换行，留空则隐藏。',
+                visibleToAll: '所有用户可见',
+                hiddenForNewUsers: '新用户隐藏',
+            },
+            brand: {
+                title: '品牌设置',
+                description: '配置系统名称、副标题与 Logo，留空则使用默认品牌。',
+                name: '系统名称',
+                nameDesc: '显示在侧边栏、顶部栏、登录注册页和 SEO 信息中。',
+                subtitle: '网站副标题',
+                subtitlePlaceholder: '基于 Incus 的低价 NAT VPS',
+                subtitleDesc: '显示在公开站头部/底部、浏览器默认标题和 SEO 默认描述中。',
+                logo: 'Logo 地址',
+                logoDesc: '支持 http(s) 图片地址或站内绝对路径，留空则使用默认 Logo。',
+            },
+            ticket: {
+                title: '工单设置',
+                description: '控制普通用户是否可以发起工单。',
+                enable: '开放工单',
+                enableDesc: '关闭后，用户端隐藏工单入口，普通用户也无法通过接口创建工单。',
+                enabled: '已开放',
+                disabled: '已关闭',
+            },
+            freeSite: {
+                title: '白嫖站',
+                description: '控制用户端余额页是否展示充值和推荐计划相关功能。',
+                enable: '启用白嫖站',
+                enableDesc: '开启后，用户端余额页隐藏充值按钮、充值记录和推荐计划，接口也会拒绝创建或重新支付充值订单。',
+                enabled: '已启用',
+                disabled: '未启用',
+                registerGift: '注册自动赠送',
+                registerGiftDesc: '开启后，新用户注册成功会自动收到余额和积分到账通知。',
+                giftEnabled: '赠送中',
+                giftDisabled: '不赠送',
+                giftBalance: '赠送余额',
+                giftBalanceDesc: '注册成功后自动进入账户余额，单位为元。',
+                giftPoints: '赠送积分',
+                giftPointsDesc: '注册成功后自动进入娱乐中心积分账户。',
+                giftRequiresFreeSite: '需要先启用白嫖站，才能设置注册自动赠送。'
+            },
+            unitCount: '个',
+            reset: '重置',
+            save: '保存配置',
+            saving: '保存中...',
+            loadFailed: '加载配置失败',
+            saveSuccess: '配置已保存',
+            saveFailed: '保存失败',
+            notes: '说明',
+            note1: '修改默认配额只会影响新注册的用户，不会影响已有用户的配额。',
+            note2: '如需修改已有用户的配额，请前往「用户管理」页面单独调整。',
+            note3: '宿主机配额限制用户可以创建的宿主机数量（0 = 功能未授权）。',
+            note4: '好友配额限制用户可以添加的好友数量（0 = 功能未授权）。',
+            note5: '套餐配额限制用户可以创建的套餐数量（0 = 功能未授权）。',
+            // Turnstile 配置
+            turnstile: {
+                title: 'Cloudflare Turnstile',
+                description: '配置人机验证，保护登录、注册和敏感操作',
+                enable: '启用 Turnstile',
+                enableDesc: '启用后，用户在登录、注册和敏感操作时需要完成人机验证',
+                enabled: '已启用',
+                disabled: '已禁用',
+                siteKey: 'Site Key',
+                siteKeyPlaceholder: '输入 Cloudflare Turnstile Site Key',
+                siteKeyDesc: '前端使用的站点密钥',
+                secretKey: 'Secret Key',
+                secretKeyPlaceholder: '输入 Cloudflare Turnstile Secret Key',
+                secretKeyDesc: '后端验证使用的密钥（请妥善保管）',
+                helpText: '前往 Cloudflare 控制台获取密钥：',
+            },
+            avatar: {
+                title: '头像服务',
+                description: '配置用户头像生成服务，默认使用 DiceBear 官方 API',
+                apiBase: 'API 地址',
+                apiBaseDesc: 'DiceBear 头像 API 基础地址，可自建服务以提高访问速度',
+                helpText: '了解如何自建 DiceBear 服务：',
+            },
+            // SMTP Email configuration
+            smtp: {
+                title: 'SMTP 邮件服务',
+                description: '配置 SMTP 服务器以启用邮箱验证码功能，用户注册时需要验证邮箱',
+                enable: '启用邮箱验证',
+                enableDesc: '启用后，用户注册时需要通过邮箱验证码验证',
+                enabled: '已启用',
+                disabled: '已禁用',
+                host: 'SMTP 服务器',
+                hostPlaceholder: 'smtp.example.com',
+                port: 'SMTP 端口',
+                secure: '使用 SSL/TLS',
+                secureHint: '端口 465 通常需要启用，端口 587 通常不需要',
+                username: '用户名',
+                usernamePlaceholder: '邮箱账号或用户名',
+                password: '密码',
+                passwordPlaceholder: '授权码或密码',
+                fromEmail: '发件人邮箱',
+                fromEmailPlaceholder: "noreply{'@'}example.com",
+                fromName: '发件人名称',
+                testConnection: '测试连接',
+                testing: '测试中...',
+                testSuccess: 'SMTP 连接测试成功',
+                testFailed: 'SMTP 连接测试失败',
+                sendTestEmail: '发送测试邮件',
+                sendTestEmailDesc: '发送一封测试邮件到指定邮箱，验证邮件发送功能是否正常',
+                testEmailPlaceholder: '输入收件人邮箱地址',
+                sending: '发送中...',
+                send: '发送',
+                invalidEmail: '请输入有效的邮箱地址',
+                testEmailSent: '测试邮件已发送至 {email}',
+                testEmailFailed: '测试邮件发送失败',
+                helpText: '请确保 SMTP 服务器地址、端口、用户名和密码正确。常见邮箱服务商需要使用授权码而非登录密码。',
+            },
+            // 邮箱域名白名单配置
+            emailDomain: {
+                title: '邮箱域名白名单',
+                description: '限制只允许特定邮箱域名进行注册，提高用户质量',
+                enable: '启用邮箱域名白名单',
+                enableDesc: '启用后，只有白名单中的邮箱域名才能注册',
+                enabled: '已启用',
+                disabled: '已禁用',
+                allowedDomains: '允许的邮箱域名',
+                allowedDomainsPlaceholder: 'gmail.com,outlook.com,icloud.com\n每行一个域名或用逗号分隔\n留空则使用默认白名单',
+                allowedDomainsDesc: '输入允许注册的邮箱域名，用逗号分隔或每行一个。留空则使用默认白名单（包含 Gmail、Outlook、iCloud、Yahoo、Proton 等主流邮箱服务）。',
+                helpText: '默认白名单包含：Gmail、Outlook/Hotmail、iCloud、Yahoo、Zoho、Proton、Fastmail、Tuta、Posteo、Disroot、Riseup 等主流邮箱服务。',
+            },
+            // 转移设置
+            transfer: {
+                title: '转移设置',
+                description: '配置实例转移功能的相关参数',
+                feeLabel: '转移手续费',
+                feeUnit: '元/次',
+                feeDesc: '用户发起转移时需要支付的手续费（0 表示免费），对方拒绝接收时将自动退还',
+                feeRangeError: '转移手续费必须在 0-{max} 元之间，最多支持两位小数',
+            },
+            footerLinks: {
+                title: '底部联系方式',
+                description: '配置侧边栏底部的邮箱按钮',
+                email: '联系邮箱',
+                emailPlaceholder: "support{'@'}example.com 或 mailto:support{'@'}example.com",
+                emailDesc: '留空则隐藏邮箱按钮；支持填写邮箱地址或完整 mailto: 链接。',
+                telegram: 'Telegram 群链接',
+                telegramPlaceholder: 'https://t.me/your_group',
+                telegramDesc: '留空则隐藏 Telegram 按钮。',
+            },
+            ticketImages: {
+                title: '工单图片存储',
+                description: '配置工单图片上传到兰空图床。面板只转发上传并记录元数据，不在本地落盘。',
+                baseUrl: 'Lsky 地址',
+                baseUrlPlaceholder: 'https://img.example.com',
+                baseUrlDesc: '兰空图床站点根地址，不要追加 /api/v1/upload',
+                token: 'Lsky Token',
+                tokenPlaceholder: '输入兰空图床 API Token',
+                tokenDesc: '仅后端使用，不会下发到前端',
+                apiVersion: 'API 版本',
+                apiVersionDesc: '根据你的兰空版本选择上传接口版本',
+                targetId: '策略/存储 ID',
+                targetIdPlaceholder: 'v1 填 strategy_id，v2 填 storage_id',
+                targetIdDesc: '可留空，留空时使用兰空默认策略或默认存储',
+            },
+        },
+        // 用户管理
+        users: {
+            title: '用户管理',
+            description: '管理平台用户和邀请码',
+            create: '创建用户',
+            generateInvite: '生成邀请码',
+            userInfo: '用户',
+            role: '角色',
+            status: '状态',
+            quotaUsage: '配额使用',
+            allInstances: '所有实例',
+            instances: '个实例',
+            registeredAt: '注册时间',
+            admin: '管理员',
+            user: '用户',
+            active: '正常',
+            banned: '已封禁',
+            searchPlaceholder: '搜索用户名、ID、邮箱...',
+            searchRange: '搜索范围',
+            searchFieldUsername: '用户名',
+            searchFieldId: 'ID',
+            searchFieldEmail: '邮箱',
+            exactMatch: '绝对匹配',
+            noUsers: '暂无用户',
+            noMatchingUsers: '未找到匹配的用户',
+            noEmail: '未设置邮箱',
+            resourceQuota: '资源配额',
+            viewInstances: '查看实例',
+            quota: '配额',
+            ban: '封禁',
+            unban: '解封',
+            promoteAdmin: '设为管理员',
+            demoteAdmin: '取消管理员',
+            confirmBan: '确定封禁用户 "{name}"？',
+            confirmUnban: '确定解封用户 "{name}"？',
+            confirmPromoteAdmin: '确定将用户 "{name}" 设为管理员？该用户需要重新登录后生效。',
+            confirmDemoteAdmin: '确定取消用户 "{name}" 的管理员权限？该用户当前会话会被撤销。',
+            userBanned: '用户已封禁',
+            userUnbanned: '用户已解封',
+            userPromotedAdmin: '已设为管理员',
+            userDemotedAdmin: '已取消管理员权限',
+            onlyActiveCanBeAdmin: '只有正常状态的用户可以设为管理员',
+            loadFailed: '加载用户失败',
+            userVipLevels: '用户 VIP 等级',
+            vipBenefits: '会员福利大厅设置',
+            // 邀请码
+            invites: '邀请码',
+            inviteCode: '邀请码',
+            inviteStatus: '状态',
+            createdBy: '创建者',
+            usedBy: '使用者',
+            createdAt: '创建时间',
+            usedExpireAt: '使用/过期时间',
+            noInvites: '暂无邀请码',
+            noMatchingInvites: '暂无符合条件的邀请码',
+            inviteFilterAll: '全部',
+            inviteFilterUsed: '已用',
+            inviteFilterUnused: '未用',
+            inviteUsed: '已使用',
+            inviteExpired: '已过期',
+            inviteUnused: '未使用',
+            permanent: '永久',
+            deleteInvite: '删除',
+            confirmDeleteInvite: '确定删除邀请码 {code}？',
+            inviteDeleted: '邀请码已删除',
+            deleteFailed: '删除失败',
+            // 生成邀请码
+            generateInviteTitle: '生成邀请码',
+            inviteCount: '生成数量',
+            countUnit: '个',
+            expireDays: '有效期',
+            day1: '1 天',
+            day3: '3 天',
+            day7: '7 天',
+            day14: '14 天',
+            day30: '30 天',
+            permanentValid: '永久有效',
+            expireHint: '设置邀请码的过期时间',
+            generate: '生成',
+            generating: '生成中...',
+            generateFailed: '生成邀请码失败',
+            // 邀请码结果
+            inviteGenerated: '邀请码已生成',
+            validUntil: '有效期至',
+            copyCode: '复制邀请码',
+            copyAllCodes: '一键复制全部',
+            copyLink: '复制注册链接',
+            copied: '已复制!',
+            // 配额编辑
+            editQuota: '编辑配额',
+            instanceLimit: '实例上限',
+            instanceLimitHint: '用户可创建的实例数量上限',
+            hostLimit: '宿主机上限',
+            hostLimitHint: '用户可拥有的宿主机数量上限',
+            friendLimit: '好友上限',
+            friendLimitHint: '用户可添加的好友数量上限',
+            packageLimitHint: '用户可创建的套餐数量上限',
+            packageLimit: '套餐限制',
+            notAuthorized: '未授权',
+            cpuAllowance: 'CPU 额配',
+            cpuAllowanceHint: '额配 ÷ 100 ≈ 可用核心数，最小 10，步进 5',
+            cpuCores: '~{n} 核',
+            memoryLimit: '内存 (MB)',
+            diskLimit: '磁盘 (MB)',
+            portLimit: 'NAT 端口上限',
+            portLimitHint: '所有实例的端口配额总上限',
+            snapshotLimit: '快照上限',
+            snapshotLimitHint: '所有实例的快照配额总上限',
+            backupLimit: '备份上限',
+            backupLimitHint: '所有实例的备份配额总上限',
+            trafficLimit: '月流量上限',
+            trafficLimitPlaceholder: '留空表示不限制',
+            trafficLimitHint: '单位 GB，留空表示不限制',
+            quotaUpdated: '配额已更新',
+            totalRecords: '共 {count} 条记录',
+            prevPage: '上一页',
+            nextPage: '下一页',
+            // 重置密码
+            resetPassword: '重置密码',
+            resetPasswordConfirm: '确定要重置用户 "{name}" 的密码吗？',
+            resetPasswordHint: '系统将自动生成新密码，用户的所有会话将被撤销，需要使用新密码重新登录。',
+            confirmResetPassword: '确认重置',
+            resetting: '重置中...',
+            passwordResetSuccess: '密码重置成功',
+            newPasswordFor: '用户 "{name}" 的新密码：',
+            copyPassword: '复制密码',
+            copyPasswordHint: '请妥善保管此密码，关闭弹窗后将无法再次查看',
+            // 取消2FA
+            disable2FA: '取消双因素认证',
+            disable2FAConfirm: '确定要取消用户 "{name}" 的双因素认证吗？',
+            disable2FAWarning: '取消后，该用户登录时将不再需要验证码，可能降低账户安全性。',
+            twoFADisabled: '双因素认证已取消',
+            // 解绑GitHub
+            unbindGitHub: '解绑 GitHub',
+            unbindGitHubConfirm: '确定要解除用户 "{name}" 的 GitHub 绑定吗？',
+            unbindGitHubWarning: '解除后，该用户将无法使用 GitHub 快捷登录。',
+            githubUnbound: 'GitHub 绑定已解除',
+            // 用户活动和登录记录
+            userActivity: '用户活动',
+            registeredNew: '新',
+            registeredDays: '注册 {days} 天',
+            viewLoginRecords: '查看登录记录',
+            noLoginRecord: '无登录记录',
+            loginRecords: '登录记录',
+            noLoginRecords: '暂无登录记录',
+            loadLoginRecordsFailed: '加载登录记录失败',
+            // 发送站内信
+            sendMessage: '发送站内信',
+            sendMessageTo: '发送站内信给 {username}',
+            messageTitle: '消息标题',
+            messageTitlePlaceholder: '输入消息标题',
+            messageTitleRequired: '请输入消息标题',
+            messageContent: '消息内容',
+            messageContentPlaceholder: '输入消息内容',
+            messageContentRequired: '请输入消息内容',
+            messageSent: '消息已发送',
+            messageSendFailed: '发送失败',
+            // 用户余额
+            balance: '余额',
+            viewBalance: '查看余额详情',
+            consumed: '已消费',
+            totalConsumed: '已消费总金额',
+            balanceDetails: '余额详情',
+            balanceOverview: '账户概览',
+            balanceLogs: '余额明细',
+            rechargeRecords: '充值记录',
+            currentBalance: '当前余额',
+            totalRecharge: '累计充值',
+            totalConsume: '累计消费',
+            noBalanceLogs: '暂无余额变动',
+            noRechargeRecords: '暂无充值记录',
+            loadBalanceFailed: '加载余额信息失败',
+            loadBalanceLogsFailed: '加载余额明细失败',
+            loadRechargeRecordsFailed: '加载充值记录失败',
+            balanceType: {
+                recharge: '充值',
+                consume: '消费',
+                refund: '退款',
+                admin_adjust: '管理员调整',
+                gift: '赠送',
+                transfer_fee: '转移手续费',
+                transfer_refund: '手续费退还',
+            },
+            // 调整余额
+            adjustBalance: '调整余额',
+            adjustBalanceFor: '调整 {username} 的余额',
+            adjustType: '调整类型',
+            addBalance: '增加余额',
+            deductBalance: '扣除余额',
+            amount: '金额',
+            amountPlaceholder: '请输入金额',
+            adjustReason: '调整理由',
+            adjustReasonPlaceholder: '请输入调整理由（必填）',
+            invalidAmount: '请输入有效的金额',
+            reasonRequired: '请输入调整理由',
+            balanceAdjusted: '余额调整成功',
+            balanceAdjustFailed: '余额调整失败',
+            // 积分相关
+            points: '积分',
+            earned: '累计',
+            totalEarnedPoints: '累计获得积分',
+            spent: '已用',
+            spentPoints: '已用积分',
+            adjustPoints: '调整积分',
+            currentPoints: '当前积分',
+            pointsAmount: '调整数量',
+            pointsAmountHint: '正数增加，负数扣除',
+            pointsAmountPlaceholder: '如：100 或 -50',
+            pointsReasonPlaceholder: '请输入调整理由（必填）',
+            invalidPointsAmount: '请输入有效的积分数量',
+            pointsAdjusted: '积分调整成功',
+            pointsAdjustFailed: '积分调整失败',
+            // 托管余额相关
+            hostingBalance: '托管余额',
+            hostingBalanceDetails: '托管余额详情',
+            hostingBalanceOverview: '概览',
+            hostingBalanceLogs: '明细',
+            adjustHostingBalance: '调整托管余额',
+            viewHostingBalance: '查看托管余额',
+            frozenHostingBalance: '冻结托管余额',
+            availableBalance: '可用余额',
+            frozenBalance: '冻结余额',
+            frozen: '冻结中',
+            available: '可用',
+            operation: '操作类型',
+            operationAdd: '增加',
+            operationDeduct: '扣减',
+            hostingReasonPlaceholder: '请输入调整理由（必填）',
+            hostingBalanceAdjusted: '托管余额调整成功',
+            hostingBalanceAdjustFailed: '托管余额调整失败',
+            loadHostingLogsFailed: '加载托管余额明细失败',
+            logTime: '时间',
+            logType: '类型',
+            logAmount: '金额',
+            logStatus: '状态',
+            logDescription: '描述',
+            hostingLogType: {
+                income: '收入',
+                deduction: '扣减',
+                unfreeze: '解冻',
+                withdraw: '提现',
+                admin_adjust: '管理员调整',
+            },
+            // 关联账号检测
+            linkedAccounts: '关联账号检测',
+            detectDays: '检测范围',
+            daysUnit: '天',
+            startDetect: '开始检测',
+            detecting: '检测中...',
+            detectingHint: '正在分析用户数据，请稍候...',
+            clickToDetect: '点击上方按钮开始检测关联账号',
+            loadLinkedAccountsFailed: '加载关联账号检测失败',
+            detectTime: '检测时间',
+            detectDuration: '耗时',
+            detectRange: '检测范围',
+            ipGroupCount: '个IP关联组',
+            emailGroupCount: '个邮箱相似组',
+            usernameGroupCount: '个用户名相似组',
+            ipLinkedGroups: 'IP关联组',
+            emailSimilarGroups: '邮箱相似组',
+            usernameSimilarGroups: '用户名相似组',
+            usersCount: '个用户',
+            loginsCount: '次登录',
+            lastLoginAt: '最后登录',
+            noLinkedAccounts: '未检测到关联账号，您的用户非常贞洁！',
+        },
+        // 节点管理
+        hosts: {
+            title: '节点管理',
+            description: '管理宿主机和节点组',
+            create: '添加宿主机',
+            address: '地址',
+            status: '状态',
+            online: '在线',
+            offline: '离线',
+            maintenance: '维护中',
+            hostsTab: '宿主机',
+            searchPlaceholder: '搜索宿主机...',
+            noHosts: '暂无宿主机',
+            name: '名称',
+            resources: '资源',
+            instances: '实例',
+            actions: '操作',
+            cpu: 'CPU',
+            cpuQuota: 'CPU 配额',
+            memory: '内存',
+            memoryQuota: '内存配额',
+            disk: '硬盘',
+            diskUsage: '硬盘使用情况',
+            cores: '核',
+            allowanceLimit: '额配上限',
+            memoryLimit: '内存上限',
+            instanceType: '类型',
+            typeContainer: '容器',
+            typeVm: '虚拟机',
+            typeBoth: '两者',
+            edit: '编辑',
+            test: '测试',
+            delete: '删除',
+            testSuccess: '连接成功',
+            testFailed: '连接失败',
+            confirmDelete: '确定删除宿主机 "{name}"？',
+            hostDeleted: '宿主机已删除',
+            deleteFailed: '删除失败',
+            // 添加/编辑宿主机
+            addHost: '添加宿主机',
+            editHost: '编辑宿主机',
+            hostName: '名称',
+            hostNameHint: '只能包含英文字母、数字、- 和 _',
+            hostNameRequired: '请输入节点名称',
+            hostDesc: '描述',
+            apiUrl: 'API URL',
+            ipAddress: '连接地址',
+            ipAddressHint: '支持 IPv4、IPv6 裸地址或域名',
+            ipAddressRequired: '请输入服务器地址',
+            apiPort: 'API 端口',
+            apiPortHint: '默认 8443',
+            tokenPrompt: '若安装时提示输入安全通信 Token，请复制下方内容并粘贴：',
+            copyToken: '复制 Token',
+            country: '国家或地区',
+            certPath: '证书路径',
+            keyPath: '密钥路径',
+            natPublicIp: '网卡IP',
+            natPublicIpPlaceholder: '输入服务器的网卡IP',
+            natConfig: 'NAT 配置',
+            natPublicIpv4: '公网 IPv4',
+            natPublicIpv4Placeholder: '请输入用户访问时显示的公网 IPv4',
+            natPublicIpv4Desc: '用户访问 IPv4 端口映射时看到的公网 IPv4 地址。',
+            natPublicIpv6: '公网 IPv6',
+            natPublicIpv6Placeholder: '例如 2600:1900:41a0:5bb::',
+            natPublicIpv6Desc: '用于向用户展示的公网 IPv6 地址，不一定是实际监听端口时使用的地址。',
+            natBindIpv4: '监听 IPv4',
+            natBindIpv4Placeholder: '留空则自动识别，例如 0.0.0.0 或 10.170.0.3',
+            natBindIpv4Desc: '实际绑定 IPv4 端口时使用的地址。留空后由系统自动选择。',
+            natBindIpv6: '监听 IPv6',
+            natBindIpv6Placeholder: '留空则自动识别，例如 2600:1900:41a0:5bb::',
+            natBindIpv6Desc: '实际绑定 IPv6 端口时使用的地址。留空后由系统自动选择。',
+            natPublicIpv6Invalid: '公网 IPv6 地址格式无效',
+            natBindIpv6Invalid: '监听 IPv6 地址格式无效',
+            portRangeStart: '端口范围起始',
+            portRangeEnd: '端口范围结束',
+            portRangeEndMustBeGreater: '端口范围结束不能小于起始',
+            cpuAllowanceMax: '总 CPU 时间片配额',
+            memoryMax: '内存最大值',
+            instanceTypeLabel: '实例类型',
+            networkModeLabel: '网络模式',
+            networkModeNat: 'IPv4 NAT',
+            networkModeNatIpv6: 'IPv4 NAT & IPv6',
+            networkModeNatIpv6Nat: 'IPv4 NAT & IPv6 NAT',
+            networkModeIpv6Only: 'IPv6 Only',
+            networkModeIpv6Nat: 'IPv6 NAT',
+            autoAssign: '自动分配',
+            hostAdded: '宿主机添加成功',
+            hostUpdated: '宿主机更新成功',
+            typeChangeWarning: '节点类型变更警告',
+            addFailed: '添加失败',
+            updateFailed: '更新失败',
+            // 初始化配置
+            initConfig: '初始化配置',
+            // 存储配置
+            storageConfig: '存储配置',
+            storageDriver: '存储驱动',
+            storageDriverZfs: 'ZFS (推荐)',
+            storageDriverLvm: 'LVM',
+            storageType: '存储类型',
+            storageTypeLoop: 'Loop 文件',
+            storageTypeDisk: '物理磁盘',
+            storagePath: '设备路径',
+            storagePathHint: '如 /dev/sdb',
+            storageSize: '存储大小',
+            // 网络配置
+            networkConfig: '网络配置',
+            networkOption: '网络选项',
+            networkOptionHint: '选择容器实例的网络出口方式',
+            independentIpv6: '独立 IPv6',
+            ipv6Mode: 'IPv6 模式',
+            ipv6Routed: 'Routed',
+            ipv6Nat: 'NAT',
+            ipv6Disabled: '禁用',
+            ipv6Subnet: 'IPv6 子网',
+            ipv6SubnetHint: '分配给容器的 IPv6 子网段',
+            ipv6SubnetRequired: '请输入 IPv6 网段',
+            ipv6SubnetInvalid: 'IPv6 网段格式无效，需要包含 CIDR 前缀（如 /48）',
+            ipv6Gateway: 'IPv6 网关',
+            ipv6ParentInterface: 'IPv6 父接口',
+            ipv6ParentInterfaceHint: 'IPv6 routed 模式使用的宿主机物理网卡名（如 eth0）',
+            ipv6ParentInterfaceRequired: '请输入 IPv6 父接口',
+            enableApi: '启用 API',
+            // 内核参数
+            sysctlConfig: '内核参数',
+            sysctlConfigHint: '自定义 sysctl 配置，留空使用默认值',
+            resetSysctl: '恢复默认',
+            enableBBR: '启用 BBR',
+            bbrEnabled: 'BBR 已启用',
+            // 安装脚本
+            installScript: '安装脚本',
+            runOnHost: '请在宿主机上以 root 权限运行以下命令：',
+            copyCommand: '复制命令',
+            step1RunScript: '执行安装脚本',
+            step2Verify: '验证并连接',
+            verifyHint: '脚本执行完成后，点击下方按钮验证连接',
+            verifyAndConnect: '验证并连接',
+            verifying: '验证中...',
+            verifySuccess: '纳管成功！',
+            verifyFailed: '验证失败',
+            reinstall: '重新安装',
+            reinstallScript: '重新安装脚本',
+            reinstallFailed: '生成安装命令失败',
+            waitingInstall: '等待安装完成...',
+            installSuccess: '安装成功！',
+            tokenExpired: 'Token 已过期，请重新创建宿主机',
+            // 详情页
+            tabInfo: '信息',
+            tabConfig: '配置',
+            tabInstances: '实例',
+            tabStorage: '存储',
+            tabImages: '镜像',
+            tabOps: '运维',
+            tabCreate: '创建',
+            basicInfo: '基本信息',
+            config: '配置',
+            resourceLimits: '资源限制',
+            transferControl: '转移控制',
+            transferEnabled: '允许转移',
+            transferEnabledHint: '关闭后，该节点上的实例将无法发起转移请求',
+            notificationSettings: '通知设置',
+            notificationSettingsHint: '仅通过你已启用的 Telegram、Discord、Webhook 渠道发送，这里不会发送 Email。',
+            notifyPurchase: '购买通知',
+            notifyPurchaseHint: '当有用户在该节点购买付费实例时通知你。',
+            notifyRenew: '续费通知',
+            notifyRenewHint: '当有用户在该节点续费付费实例时通知你。',
+            notifyDestroy: '销毁通知',
+            notifyDestroyHint: '当有用户销毁该节点实例时通知你，并包含实际退款金额和手续费金额。',
+            extraConfig: '额外配置',
+            trafficConfig: '流量配置',
+            trafficResetDay: '流量重置日',
+            trafficResetDayHint: '每月何日重置实例流量（可设置 1-28）',
+            enableResourcePool: '参与资源池玩法',
+            enableResourcePoolHint: '开启后，该节点的实例可参与签到/抽奖资源应用',
+            announcement: '节点公告',
+            announcementPlaceholder: '在此输入公告内容，将显示在该节点下所有实例的详情页',
+            announcementHint: '留空则不显示公告，支持换行',
+            probeUrl: '探针地址',
+            probeUrlPlaceholder: '输入节点探针监控页面地址',
+            probeUrlHint: '可以输入此节点的探针、脚本测试结果等链接，配置后，用户在选择节点时可点击图标跳转查看',
+            portRange: '端口范围',
+            portsUsed: '已用端口',
+            recalculateResources: '对齐已用',
+            recalculateResourcesTip: '重新计算资源使用量，并将配额对齐到已用配额',
+            recalculateSuccess: '资源校对完成，配额已对齐',
+            recalculateNoChanges: '资源数据正确，无需修正',
+            recalculateFailed: '资源校对失败',
+            ops: {
+                title: '宿主机运维中心',
+                description: '优先执行非破坏性盘点、基线同步和网络修复，用于旧节点纳管补齐与状态校准。',
+                discover: '实例盘点',
+                baselineSync: '基线同步',
+                networkRepair: '网络修复',
+                refresh: '刷新结果',
+                managed: '已纳管实例',
+                orphaned: '未纳管遗留实例',
+                missing: '数据库异常实例',
+                summary: '摘要',
+                totalIncus: '宿主机实例',
+                totalDb: '数据库实例',
+                managedCount: '已纳管',
+                orphanedCount: '未纳管',
+                missingCount: '异常缺失',
+                runSuccess: '操作执行成功',
+                runFailed: '操作执行失败',
+                lastRunAt: '最近执行时间',
+                empty: '暂无结果，请先执行上方运维操作。',
+                sectionInventory: '宿主机实例盘点',
+                sectionRepair: '安全修复动作',
+                sectionReport: '执行结果',
+                resultInventory: '盘点结果',
+                resultBaseline: '基线同步结果',
+                resultNetwork: '网络修复结果',
+                resultPreview: '实例预检结果',
+                resultInstanceSync: '单实例同步结果',
+                resultInstanceRestart: '单实例重启结果',
+                resultDanger: '高风险动作结果',
+                instanceName: '实例名',
+                instanceType: '类型',
+                incusStatus: '宿主机状态',
+                dbStatus: '数据库状态',
+                dbInstance: '数据库实例',
+                changes: '变更数',
+                synced: '已同步',
+                failed: '失败',
+                total: '总数',
+                ipv4: 'IPv4',
+                ipv6: 'IPv6',
+                details: '详情',
+                noManaged: '未发现已纳管实例',
+                noOrphaned: '未发现未纳管遗留实例',
+                noMissing: '未发现数据库异常实例',
+                baselineHint: '同步宿主机资源占用，并批量回填运行中实例的状态与 IP。',
+                networkHint: '批量校准非删除实例的状态、IPv4 与 IPv6 记录。',
+                discoverHint: '读取宿主机当前所有 Incus 容器 / KVM，与数据库记录对账。',
+                selectInstanceHint: '从已纳管实例中选择一个对象，执行单实例同步、重启或高风险动作。',
+                instancePanel: '单实例操作面板',
+                loadPreview: '加载预检',
+                syncInstance: '同步实例',
+                safeRestart: '安全重启',
+                forceRestart: '强制重启',
+                dangerZone: '高风险操作区',
+                dangerHint: '这里的动作会清空或替换实例系统数据，仅建议在盘点、同步和重启均无法解决问题时使用。',
+                rebuild: '重装当前实例',
+                recreate: '重建替换实例',
+                imageAlias: '镜像别名',
+                imageAliasPlaceholder: '例如 ubuntu/22.04 或 debian/12',
+                selectImage: '镜像选择',
+                imagePlaceholder: '请选择目标镜像',
+                loadingImages: '正在加载可用镜像...',
+                noImagesAvailable: '当前节点暂无可用镜像',
+                sshKeyId: 'SSH 密钥 ID',
+                selectSshKey: 'SSH 密钥',
+                sshKeyPlaceholder: '不指定 SSH 密钥',
+                loadingSshKeys: '正在加载 SSH 密钥...',
+                noSshKeysAvailable: '该实例用户暂无 SSH 密钥，不指定时将沿用后端默认处理',
+                sshKeyOptionalHint: '可选，不指定时使用实例用户的默认密钥策略',
+                customInitCommandIds: '自定义初始化命令 ID',
+                selectInitCommands: '初始化命令',
+                loadingInitCommands: '正在加载初始化命令...',
+                noInitCommandsAvailable: '当前镜像没有可选初始化命令',
+                optionalField: '可选项，可留空',
+                confirmDangerTitle: '执行前确认',
+                riskCheckbox: '我已知晓该操作可能导致实例系统或数据不可恢复，并确认这是预期行为。',
+                confirmTextHint: '请输入实例真实名称进行确认，例如 u2-g65uoeo1',
+                ownerUserId: '用户 ID',
+                fullInstanceName: '完整实例名称',
+                selectedOnlyHint: '单实例操作仅作用于当前选中的实例，不会对未选中的实例产生干扰。',
+                localizedNone: '无需操作',
+                dangerActionType: '动作类型',
+                dangerConfirm1Title: '第一次确认高风险操作',
+                dangerConfirm1Hint: '请再次确认你即将执行不可逆的高风险动作。',
+                dangerConfirm1Btn: '确认继续',
+                dangerConfirm2Title: '第二次确认高风险操作',
+                dangerConfirm2Hint: '这是最后一次确认，执行后将立即创建任务。',
+                dangerConfirm2Btn: '确认执行',
+                dangerConfirmStep: '确认步骤 {step} / {total}',
+                executeDangerAction: '执行高风险动作',
+                suggestedAction: '建议动作',
+                activeTask: '活跃任务',
+                latestInstanceAction: '最近单实例动作',
+            },
+            statusOnline: '在线',
+            statusOffline: '离线',
+            statusMaintenance: '维护中',
+            invalidId: '无效的节点 ID',
+            loadFailed: '加载失败',
+            noInstances: '该节点上暂无实例',
+            search: '搜索',
+            instanceSearchPlaceholder: '搜索实例ID、名称、用户名、邮箱、IP地址...',
+            imagesOnHost: '节点 {name} 上的镜像',
+            noImagesOnHost: '该节点上暂无镜像',
+            selectImagesToSync: '选择要同步到节点 {name} 的镜像',
+            allImagesSynced: '所有镜像都已同步到该节点',
+            imagePolicy: {
+                title: '镜像策略',
+                description: '配置节点「{name}」在开通和重装时可选的镜像范围',
+                defaultMode: '使用面板默认镜像',
+                defaultDesc: '不单独限制该节点，创建和重装时按节点架构与实例类型加载全部可用镜像。',
+                restrictedMode: '限制为以下镜像',
+                restrictedDesc: '只允许勾选的镜像出现在该节点的开通和重装列表中。',
+                selectableImages: '可选镜像',
+                defaultHint: '当前未对该节点单独限制镜像。',
+                selectedCount: '当前已选择 {count} 个镜像',
+                searchPlaceholder: '搜索镜像名称、别名或发行版...',
+                emptySelection: '限制模式下至少需要选择一个镜像，否则请改为默认模式。',
+                noImages: '当前没有适用于该节点架构和实例类型的可见镜像。',
+                loadFailed: '加载镜像策略失败',
+                saveSuccess: '镜像策略已保存',
+                saveFailed: '保存镜像策略失败',
+            },
+            addHostDesc: '添加新的宿主机节点',
+            allocated: '已分配',
+            includesPageCache: '包含页面缓存',
+            syncTime: '同步时间',
+            deleteHost: '删除宿主机',
+            deleteWarning: '此操作不可撤销！删除宿主机前，请确保该节点上没有任何实例。',
+            deleteConfirmHint: '请输入宿主机名称 "{name}" 以确认删除：',
+            enterHostName: '宿主机名称',
+            confirmDeleteBtn: '确认删除',
+            deleteNameMismatch: '输入的名称不匹配',
+            hasInstances: '该节点上还有 {count} 个实例，请先删除或迁移实例',
+            checkFailed: '检查失败',
+            // 批量延期
+            batchExtend: '赠送时长',
+            extendHint: '该节点下共有 {count} 个付费实例将被延期',
+            extendDaysLabel: '延期天数',
+            extendDaysPlaceholder: '请输入 1-365 的整数',
+            extendDaysInvalid: '请输入有效的延期天数（1-365）',
+            confirmExtendBtn: '确认赠送',
+            extendSuccess: '已成功为 {count} 个付费实例延期 {days} 天',
+            extendFailed: '批量延期失败',
+            // 批量删除实例
+            selectedCount: '已选择 {count} 个实例',
+            noInstanceSelected: '请勾选实例以使用批量操作',
+            batchDelete: '批量删除',
+            batchDeleteTitle: '批量删除实例',
+            batchDeleteWarning: '此操作不可撤销！删除后实例数据将无法恢复。',
+            batchDeleteConfirm: '确定要删除这 {count} 个实例吗？',
+            confirmBatchDelete: '确认删除',
+            databaseOnlyDelete: '仅数据库删除',
+            batchDeleteSuccess: '成功删除 {count} 个实例',
+            batchDeletePartial: '成功删除 {success} 个实例，{failed} 个失败',
+            batchDeleteFailed: '批量删除失败',
+            batchDeleteRefundWarning: '删除付费实例将自动退还剩余价值给用户，并从您的托管余额扣除相应金额。',
+            batchDeleteRefundTotal: '总退款金额',
+            instanceName: '实例名称',
+            instanceUser: '所属用户',
+            refundAmount: '退款金额',
+            // 批量同步实例状态
+            batchSyncStatus: '同步状态',
+            batchSyncSuccess: '成功同步 {synced} 个实例，{changed} 个状态已更新',
+            batchSyncWithIpv4: '成功同步 {synced} 个实例，{changed} 个状态更新，{ipv4Changed} 个内网 IP 更新',
+            batchSyncPartial: '同步 {synced} 个，更新 {changed} 个，失败 {failed} 个',
+            batchSyncNoChange: '成功同步 {synced} 个实例，状态无变化',
+            batchSyncFailed: '同步状态失败',
+            // 批量封停实例
+            batchSuspend: '批量封停',
+            batchSuspendTitle: '批量封停实例',
+            batchSuspendWarning: '封停后，实例所有者将无法对实例进行任何操作，直到解除封停。',
+            batchSuspendConfirm: '确定要封停这 {count} 个实例吗？',
+            confirmBatchSuspend: '确认封停',
+            batchSuspendSuccess: '成功封停 {count} 个实例',
+            batchSuspendPartial: '成功封停 {success} 个实例，{failed} 个失败',
+            batchSuspendFailed: '批量封停失败',
+            batchUnsuspend: '批量解封',
+            batchUnsuspendSuccess: '成功解封 {count} 个实例',
+            batchUnsuspendPartial: '成功解封 {success} 个实例，{failed} 个失败',
+            batchUnsuspendNone: '选中的实例中没有已封停的实例',
+            batchUnsuspendFailed: '批量解封失败',
+            suspendReason: '封停原因（可选）',
+            suspendReasonPlaceholder: '填写封停原因后，系统将通过站内信通知实例所有者...',
+            deleteReason: '删除原因（可选）',
+            deleteReasonPlaceholder: '填写删除原因后，系统将通过站内信和通知渠道告知用户...',
+            deleteReasonHint: '如果填写了删除原因，被删除实例的所有者将收到通知',
+            // 实例流量
+            trafficUsage: '流量使用',
+            trafficUnlimited: '不限制',
+            resetTraffic: '重置流量',
+            trafficResetSuccess: '流量已重置',
+            trafficResetFailed: '重置流量失败',
+            resetTrafficTitle: '重置实例流量',
+            resetTrafficWarning: '如果是已超额的实例，重置流量不会自动恢复实例的带宽限速（1Mbps），请手动为该实例恢复带宽速率。',
+            resetTrafficDesc: '确定要重置实例 "{instance}" 的流量吗？',
+            // 节点流量统计
+            trafficStats: '流量统计',
+            monthlyUsed: '本月已用',
+            hostTotalLimit: '节点总分配',
+            // 宿主机状态
+            agentStatusTitle: '宿主机状态',
+            agentStatusDesc: 'Agent 按 {seconds} 秒间隔上报宿主机实时资源与运行状态',
+            agentStatusRefreshSuccess: '状态接口已刷新，请以最后心跳时间为准',
+            agentStatusLoadFailed: '加载宿主机状态失败',
+            agentNotInstalled: '未安装',
+            agentDisabled: '已停用',
+            agentOnline: '在线',
+            agentOffline: '离线',
+            agentUnknown: '未知',
+            agentVersionLatest: '最新',
+            agentVersionOutdated: '可升级',
+            agentVersionUnknown: '版本未知',
+            agentLatestVersion: '最新版本：{version}',
+            agentUpgradeClickHint: '点击请求升级到 {version}，Agent 会在下次心跳执行',
+            agentUpgradeRequestSuccess: '已请求升级，Agent 会在约 {seconds} 秒内的下一次心跳执行',
+            agentUpgradeRequestFailed: '请求 Agent 升级失败',
+            agentAlreadyLatest: 'Agent 已是最新版本',
+            agentInstallCommand: '安装/重装 Agent',
+            agentInstallCommandTitle: 'Agent 安装命令',
+            agentInstallCommandHint: '可在宿主机执行完整命令，也可在 Agent 菜单中粘贴该命令或其中的 ait_ token。',
+            agentInstallCommandConfirm: '生成新的 Agent 安装命令会轮换该宿主机的 Agent 凭据。旧 Agent 会在重新安装前无法继续上报，确定继续吗？',
+            agentInstallTokenExpiresAt: '有效期至 {time}',
+            agentInstallCommandSuccess: 'Agent 安装命令已生成',
+            agentInstallCommandFailed: '生成 Agent 安装命令失败',
+            agentInstallCommandCopied: 'Agent 安装命令已复制',
+            agentNoRecordHint: '该宿主机还没有 Agent 心跳记录。重新安装或安装 Agent 后会自动上报。',
+            agentId: 'Agent ID',
+            agentLastSeen: '最后心跳',
+            agentHeartbeatIp: '心跳 IP',
+            agentReportedAt: '上报时间',
+            agentIncus: 'Incus 检测',
+            agentIncusAvailable: '可用',
+            agentIncusUnavailable: '不可用',
+            agentCpuTotal: 'CPU 核心',
+            agentMemoryTotal: '内存总量',
+            agentUptime: '宿主机运行时间',
+            agentSocket: 'Incus Socket',
+            agentCpuUsage: 'CPU 使用率',
+            agentCpuCores: '核心',
+            agentMemoryUsage: '内存使用',
+            agentSwapUsage: 'SWAP 使用',
+            agentDiskUsage: '磁盘使用',
+            agentLoadAverage: '负载',
+            agentLoadAverageHint: '1 / 5 / 15 分钟',
+            agentProcessCount: '进程数',
+            // 存储池管理
+            storage: {
+                title: '存储池',
+                subtitle: '管理此宿主机上的 Incus 存储池',
+                create: '添加存储池',
+                createTitle: '创建存储池',
+                empty: '暂无存储池',
+                loadFailed: '加载存储池失败',
+                createSuccess: '存储池创建成功',
+                createFailed: '创建存储池失败',
+                deleteSuccess: '存储池已删除',
+                deleteFailed: '删除存储池失败',
+                deleteConfirm: '确定删除存储池 "{name}"？此操作不可撤销。',
+                updateSuccess: '存储池已更新',
+                updateFailed: '更新存储池失败',
+                editTitle: '编辑存储池',
+                currentSize: '当前大小',
+                newSize: '新大小',
+                newSizeHint: '仅支持扩容，不支持缩容',
+                nameRequired: '请输入存储池名称',
+                sourceRequired: '请输入存储源（设备路径）',
+                sizeRequired: '请输入存储大小',
+                pathRequired: '请输入目录路径',
+                poolName: '存储池名称',
+                driver: '驱动类型',
+                description: '描述',
+                source: '存储源',
+                size: '存储大小',
+                usedBy: '使用者',
+                volumes: '个卷',
+                // 驱动描述
+                zfsDesc: '推荐：功能最全（快照、克隆、压缩、配额），性能极佳',
+                lvmDesc: 'Linux 标配，极其稳定，建议开启 Thin Provisioning',
+                btrfsDesc: '类似 ZFS 特性，单盘或 RAID1/10 可用',
+                dirDesc: '目录存储，性能最差，仅用于测试',
+                // 通用
+                useLoop: '使用 Loop 文件',
+                loopSizeHint: '将在 /var/lib/incus/ 下创建镜像文件',
+                // ZFS
+                zfsSourceHint: '物理盘或分区路径，如 /dev/disk/by-id/nvme-xxx',
+                zfsPoolName: 'ZFS 池名称',
+                zfsPoolNameHint: '可选，不填则使用存储池名称',
+                // LVM
+                lvmSourceHint: '物理盘路径，如 /dev/sdb',
+                lvmVgName: '卷组名称',
+                lvmUseThinpool: '启用精简卷（Thin Provisioning）',
+                lvmThinpoolHint: '强烈建议开启，否则快照性能极差',
+                // Btrfs
+                btrfsSourceHint: '物理盘路径，如 /dev/sdb',
+                // DIR
+                dirPath: '目录路径',
+                dirPathHint: '指定一个存在的目录，如 /mnt/data/incus-storage',
+                // 存储用途
+                purpose: '存储用途',
+                forInstances: '用于实例系统盘',
+                forInstancesHint: '创建实例时作为默认存储',
+                forVolumes: '用于实例存储盘',
+                forVolumesHint: '可手动挂载到实例',
+                purposeSystemDisk: '系统盘',
+                purposeStorageDisk: '存储盘',
+                // 模式切换
+                modeCreate: '创建新存储池',
+                modeExisting: '关联已有存储池',
+                modeImport: '导入已有存储',
+                modeCreateHint: '在宿主机上创建新的存储池，需要配置驱动类型、存储源等参数',
+                modeExistingHint: '关联已在宿主机上创建的存储池，只需输入存储池名称即可',
+                modeImportHint: '导入底层已存在但 Incus 还未知晓的存储池（如手动创建的 ZFS 池、LVM VG）',
+                linkSuccess: '存储池关联成功',
+                importSuccess: '存储池导入成功',
+                // 导入存储池
+                importZfsSource: 'ZFS 池名称',
+                importLvmSource: 'LVM 卷组名称',
+                importBtrfsSource: 'Btrfs 设备或子卷路径',
+                importDirSource: '目录路径',
+                importZfsHint: '底层已存在的 ZFS 池名称（通过 zpool list 查看）',
+                importLvmHint: '底层已存在的 LVM 卷组名称（通过 vgs 查看）',
+                importBtrfsHint: '已格式化为 Btrfs 的设备或子卷路径',
+                importDirHint: '已存在的目录路径，如 /mnt/storage',
+                importSourceRequired: 'Btrfs 和 DIR 类型必须提供底层存储源路径',
+            },
+        },
+        // 镜像管理
+        images: {
+            title: '镜像管理',
+            description: '管理系统镜像库，用户可在创建实例时选择这些镜像',
+            create: '添加镜像',
+            edit: '编辑镜像',
+            imagesTab: '镜像库',
+            syncTab: '同步状态',
+            noImages: '还没有添加任何镜像',
+            noImagesForArchitecture: '当前架构下没有镜像',
+            addImage: '添加镜像',
+            syncToHost: '同步镜像到节点',
+            delete: '删除',
+            confirmDelete: '确定删除镜像 "{name}"？',
+            imageDeleted: '镜像已删除',
+            deleteFailed: '删除失败',
+            deleteSuccess: '镜像已删除',
+            enabled: '启用',
+            disabled: '禁用',
+            active: '已启用',
+            show: '显示',
+            hide: '隐藏',
+            shown: '镜像已显示',
+            hidden: '镜像已隐藏',
+            statusVisible: '可见',
+            statusHidden: '已隐藏',
+            createSuccess: '镜像创建成功',
+            updateSuccess: '镜像更新成功',
+            saveFailed: '保存失败',
+            loadFailed: '加载镜像列表失败',
+            validation: {
+                requiredFields: '请填写名称、远程别名和图标',
+            },
+            fields: {
+                icon: '图标',
+                name: '名称',
+                remoteAlias: '远程别名',
+                osType: '系统类型',
+                architecture: '架构',
+                instanceType: '实例类型',
+                sortOrder: '排序',
+                status: '状态',
+                hidden: '对用户隐藏此镜像',
+            },
+            placeholder: {
+                name: '例如: Ubuntu 24.04 LTS',
+                remoteAlias: '例如: ubuntu/noble/cloud',
+                icon: '请选择图标',
+            },
+            hint: {
+                remoteAlias: 'Incus 远程镜像别名，如 ubuntu/noble/cloud',
+                sortOrder: '越小排序越靠前',
+                instanceType: '指定该镜像适用于容器、虚拟机或两者皆可',
+            },
+            // 实例类型
+            typeContainer: '容器',
+            typeVm: '虚拟机',
+            typeBoth: '通用',
+            // 同步状态
+            syncStatusDesc: '查看各镜像在节点上的同步状态，点击单元格可进行同步或删除操作',
+            refresh: '刷新',
+            addToLibraryFirst: '请先添加镜像到镜像库',
+            noSystemImages: '暂无系统镜像',
+            image: '镜像',
+            statusReady: '已就绪',
+            statusSyncing: '同步中',
+            statusPending: '等待中',
+            statusError: '错误',
+            statusNotSynced: '未同步',
+            retry: '重试',
+            sync: '同步',
+            confirmDeleteFromHost: '确定从该节点删除此镜像？',
+            deletedFromHost: '镜像已从节点删除',
+            imageInUse: '该镜像正在被 {count} 个实例使用，无法删除',
+            syncStarted: '同步任务已启动',
+            syncFailed: '同步失败',
+            loadStatusFailed: '加载镜像状态失败',
+            loadHostsFailed: '加载节点列表失败',
+            // 表单
+            imageName: '名称',
+            osType: '系统类型',
+            remoteAlias: '远程别名',
+            imageDesc: '描述',
+            sortOrder: '排序',
+            activeStatus: '启用状态',
+            selectHosts: '选择同步节点',
+            imageAdded: '镜像已添加',
+            imageCreated: '镜像已创建',
+            imageUpdated: '镜像已更新',
+            // 镜像表单弹窗
+            selectDistro: '选择发行版',
+            selectVersion: '选择版本',
+            configureInfo: '配置信息',
+            selectDistroHint: '选择要添加的 Linux 发行版',
+            versionsCount: '{count} 个版本',
+            imageVariant: '镜像变体',
+            cloudVariantDesc: '云优化版，支持 cloud-init',
+            defaultVariantDesc: '标准版本',
+            displayName: '显示名称',
+            descPlaceholder: '可选的备注信息...',
+            enableImage: '启用此镜像',
+            syncHosts: '同步节点',
+            selectAll: '全选',
+            deselectAll: '取消全选',
+            editSyncHint: '取消选择的节点将在保存时从该节点删除镜像，新选择的节点将开始同步',
+            createSyncHint: '选中的节点将在保存后开始同步镜像',
+            // 同步弹窗
+            selectTargetHosts: '选择目标节点',
+            syncWarning: '镜像同步可能需要几分钟时间，具体取决于镜像大小和网络速度',
+            startSync: '开始同步',
+        },
+        // 套餐管理
+        packages: {
+            title: '套餐管理',
+            description: '配置实例规格模板',
+            create: '创建套餐',
+            noPackages: '暂无套餐',
+            createFirst: '创建第一个套餐',
+            noDesc: '无描述',
+            enabled: '启用',
+            disabled: '禁用',
+            status: '状态',
+            cpu: 'CPU',
+            memory: '内存',
+            disk: '硬盘',
+            cores: '约 {n} 核',
+            networkNat: 'NAT',
+            networkIpv6: 'IPv6',
+            networkDual: '双栈',
+            nested: '嵌套虚拟化',
+            privileged: '特权容器',
+            allNodes: '全部节点',
+            enable: '启用',
+            disable: '禁用',
+            edit: '编辑',
+            delete: '删除',
+            confirmDelete: '确定删除套餐 "{name}"？',
+            packageDeleted: '套餐已删除',
+            packageEnabled: '套餐已上架',
+            packageDisabled: '套餐已下架',
+            deleteFailed: '删除失败',
+            operationFailed: '操作失败',
+            // 表单
+            createPackage: '创建套餐',
+            editPackage: '编辑套餐',
+            basicInfo: '基本信息',
+            name: '名称',
+            namePlaceholder: '入门版',
+            descLabel: '描述',
+            descPlaceholder: '适合轻量级应用',
+            resourceLimits: '资源上限',
+            maxCpuAllowance: '最大 CPU 额配',
+            cpuAllowanceHint: '额配值 ÷ 100 ≈ 可用核心数，最小10，步长5',
+            maxMemory: '最大内存 (MB)',
+            maxDisk: '最大硬盘 (MB)',
+            networkAndScheduling: '网络与调度',
+            networkMode: '网络模式',
+            allNodesNoLimit: '全部节点（不限制）',
+            boundHosts: '绑定的宿主机',
+            mustBindHost: '必须至少绑定一个宿主机',
+            noHostsBound: '未绑定宿主机',
+            noHostsAvailable: '暂无可用宿主机',
+            advancedOptions: '高级选项',
+            nestedLabel: '嵌套虚拟化',
+            nestedHint: '允许在容器内运行 Docker/VM',
+            privilegedLabel: '特权容器',
+            privilegedHint: '授予更高系统权限（有安全风险）',
+            enablePackage: '启用套餐',
+            enablePackageHint: '禁用后用户无法选择此套餐',
+            enterName: '请输入套餐名称',
+            packageCreated: '套餐创建成功',
+            packageUpdated: '套餐更新成功',
+            trafficLimit: '月流量限额',
+            trafficLimitPlaceholder: '留空表示无限制',
+            trafficLimitHint: '单位 GB，留空表示无限制',
+            syncTraffic: '同步流量限额',
+            confirmSyncTraffic: '确定将所有套餐的流量限额同步到对应的实例吗？',
+            syncTrafficSuccess: '已同步 {count} 个实例的流量限额',
+            syncTrafficFailed: '同步失败',
+            // 套餐列表
+            traffic: '月流量限额',
+            unlimited: '无限制',
+            unlimitedPlaceholder: '留空表示无限制',
+            active: '已启用',
+            inactive: '已归档',
+            archivedHint: '归档套餐不会显示在创建实例的套餐选择中',
+            activeLabel: '启用',
+            saveFailed: '保存失败',
+            loadFailed: '加载套餐失败',
+            instanceMaxLimit: '实例最大上限',
+        },
+        // 帮助管理
+        helpManage: {
+            title: '帮助文档管理',
+            description: '创建和管理帮助文档',
+            create: '新建文档',
+            noArticles: '暂无文档',
+            createFirst: '创建第一篇文档',
+            edit: '编辑',
+            delete: '删除',
+            confirmDelete: '确定删除文档 "{title}"？',
+            articleDeleted: '文档已删除',
+            deleteFailed: '删除失败',
+            // 标签页
+            articlesTab: '文档',
+            categoriesTab: '分类管理',
+            // 分类
+            addCategory: '添加分类',
+            noCategories: '暂无分类，点击"添加分类"创建',
+            categoryId: '分类 ID',
+            categoryIdHint: '只能包含小写字母、数字和连字符',
+            categoryName: '分类名称',
+            categoryColor: '标识颜色',
+            categoryAdded: '分类已添加',
+            categoryUpdated: '分类已更新',
+            categoryDeleted: '分类已删除',
+            categoryInUse: '该分类下有文档，无法删除',
+            confirmDeleteCategory: '确定删除分类 "{name}"？',
+            duplicateCategoryId: '该分类ID已存在',
+            invalidCategoryId: '分类ID只能包含小写字母、数字和连字符',
+            fillCategoryIdAndName: '请填写分类ID和名称',
+            // 文档表格
+            articleTitleCol: '标题',
+            categoryCol: '分类',
+            statusCol: '状态',
+            updatedAtCol: '更新时间',
+            actionsCol: '操作',
+            totalArticles: '共 {count} 篇文档',
+            prevPage: '上一页',
+            nextPage: '下一页',
+            hide: '隐藏',
+            publish: '发布',
+            articleHidden: '文档已隐藏',
+            articlePublished: '文档已发布',
+            // 表单
+            createArticle: '创建文档',
+            editArticle: '编辑文档',
+            articleTitle: '标题',
+            titlePlaceholder: '文档标题',
+            urlSlug: 'URL 标识符',
+            urlSlugPlaceholder: 'getting-started',
+            urlSlugHint: '只能包含小写字母、数字和连字符',
+            category: '分类',
+            sortOrder: '排序',
+            content: '内容',
+            contentMarkdown: '内容 (Markdown)',
+            preview: '预览',
+            activeStatus: '发布状态',
+            published: '已发布',
+            draft: '草稿',
+            pinned: '已置顶',
+            notPinned: '未置顶',
+            articleCreated: '文档已创建',
+            articleUpdated: '文档已更新',
+            saveFailed: '保存失败',
+            loadFailed: '加载失败',
+            operationFailed: '操作失败',
+            fillRequired: '请填写标题、URL 标识符和内容',
+            invalidSlug: 'URL 标识符只能包含小写字母、数字和连字符',
+            noTitle: '无标题',
+            // Markdown 帮助
+            showMarkdownHelp: '查看语法帮助',
+            hideMarkdownHelp: '隐藏语法帮助',
+            markdownHeading1: '一级标题',
+            markdownHeading2: '二级标题',
+            markdownBold: '粗体文本',
+            markdownItalic: '斜体文本',
+            markdownLink: '超链接',
+            markdownImage: '图片',
+            markdownUnorderedList: '无序列表',
+            markdownOrderedList: '有序列表',
+            markdownInlineCode: '行内代码',
+            markdownCodeBlock: '代码块',
+            markdownQuote: '引用块',
+            markdownHr: '分隔线',
+            customAlerts: '自定义提示框:',
+            alertInfo: '信息提示',
+            alertSuccess: '成功提示',
+            alertWarning: '警告提示',
+            alertDanger: '危险提示',
+            alertNote: '备注提示',
+        },
+        // OAuth 配置
+        oauth: {
+            title: 'OAuth 配置',
+            description: '配置第三方登录方式',
+            noProviders: '暂无 OAuth 提供商',
+            provider: '提供商',
+            clientId: 'Client ID',
+            clientSecret: 'Client Secret',
+            enabled: '已启用',
+            disabled: '已禁用',
+            enable: '启用',
+            disable: '禁用',
+            edit: '编辑',
+            save: '保存',
+            saving: '保存中...',
+            saveSuccess: '配置已保存',
+            saveFailed: '保存失败',
+            notConfigured: '尚未配置。请前往',
+            developerConsole: '开发者控制台',
+            createOAuthApp: '创建 OAuth 应用。',
+            callbackUrl: '回调 URL (Callback URL)',
+            usageGuide: '使用说明',
+            step1: '1. 在对应平台的开发者控制台创建 OAuth 应用，获取 Client ID 和 Client Secret。',
+            step2: '2. 将上方显示的回调 URL 填入 OAuth 应用配置中。',
+            step3: '3. 在此页面填入 Client ID 和 Client Secret，并启用。',
+            step4: '4. 用户可在个人设置中绑定 OAuth 账号，绑定后即可使用快捷登录。',
+            warning: '注意：用户必须先注册账号并绑定，无法直接使用 OAuth 注册新账号。',
+            configure: '配置',
+            enterClientId: '输入 Client ID',
+            enterClientSecret: '输入 Client Secret',
+            leaveEmptyUnchanged: '(留空表示不更改)',
+            enableLogin: '启用此登录方式',
+            enableLoginHint: '启用后用户可使用此方式快捷登录',
+        },
+        // 支付渠道管理
+        paymentProviders: {
+            title: '支付渠道管理',
+            description: '配置和管理支付渠道',
+            add: '添加渠道',
+            create: '添加渠道',
+            noProviders: '暂无支付渠道',
+            empty: '暂无配置支付渠道',
+            createFirst: '添加第一个支付渠道',
+            providerName: '渠道名称',
+            providerType: '渠道类型',
+            displayName: '显示名称',
+            description_label: '描述',
+            status: '状态',
+            statusActive: '启用',
+            statusDisabled: '禁用',
+            statusTesting: '测试中',
+            feeRate: '费率',
+            feeFixed: '固定费用',
+            minAmount: '最小金额',
+            maxAmount: '最大金额',
+            sortOrder: '排序',
+            methods: '支付方式',
+            paymentMethods: '支持的支付方式',
+            configLabel: '配置',
+            configPlaceholder: 'JSON 格式的渠道配置',
+            edit: '编辑',
+            delete: '删除',
+            name: '名称',
+            namePlaceholder: '输入渠道名称',
+            nameRequired: '请输入渠道名称',
+            type: '类型',
+            notImplemented: '待实现',
+            providerTypes: {
+                yipay: '易支付',
+                heleket: 'Heleket',
+                stripe: 'Stripe',
+                alipayDirect: '支付宝直连',
+                wechatDirect: '微信直连',
+                manual: '人工充值',
+            },
+            deleteConfirm: '确认删除',
+            confirmDelete: '确定删除支付渠道 "{name}"？',
+            deleteWarning: '确定删除支付渠道 "{name}"？此操作不可恢复。',
+            createSuccess: '支付渠道创建成功',
+            updateSuccess: '支付渠道更新成功',
+            deleteSuccess: '支付渠道已删除',
+            statusUpdated: '状态已更新',
+            statusUpdateSuccess: '状态更新成功',
+            statusUpdateFailed: '状态更新失败',
+            saveFailed: '保存失败',
+            createFailed: '创建支付渠道失败',
+            updateFailed: '更新支付渠道失败',
+            deleteFailed: '删除失败',
+            loadFailed: '加载失败',
+            createProvider: '添加支付渠道',
+            editProvider: '编辑支付渠道',
+            displayNamePlaceholder: '用户看到的名称',
+            descPlaceholder: '可选的渠道描述',
+            feeRateHint: '如 0.02 表示 2% 手续费',
+            types: {
+                alipay: '支付宝',
+                wechat: '微信支付',
+                stripe: 'Stripe',
+                paypal: 'PayPal',
+                usdt: 'USDT',
+                manual: '人工充值',
+            },
+            config: {
+                sdkVersion: 'SDK版本',
+                apiurl: '支付接口地址',
+                pid: '商户ID',
+                key: '商户密钥',
+                platformPublicKey: '平台公钥',
+                merchantPrivateKey: '商户私钥',
+                heleketMerchantUuid: 'Merchant UUID',
+                heleketApiKey: 'API Key',
+                heleketInvoiceCurrency: '发票法币币种',
+                heleketLifetime: '发票有效期（秒）',
+                heleketApiUrlHint: '默认使用 Heleket 官方接口地址，可按需切换到代理或私有网关。',
+                heleketCurrencyHint: '创建 Heleket 发票时使用的法币币种，常用为 CNY。',
+                heleketLifetimeHint: 'Heleket 发票有效期。默认 3600 秒，并会同步到本地订单过期时间。',
+                yipayVersionV1: 'V1 (MD5签名) - 传统版本',
+                yipayVersionV2: 'V2 (RSA签名) - 新版本',
+                yipayVersionV1Hint: 'V1 版本使用 MD5 签名，适用于传统易支付平台。',
+                yipayVersionV2Hint: 'V2 版本使用 RSA 签名，适用于新版彩虹易支付。',
+                yipayApiUrlPlaceholder: '如: https://pay.example.com/',
+                yipayApiUrlHint: '支付接口地址，以 / 结尾。',
+                yipayPidPlaceholder: '商户ID',
+                yipayKeyPlaceholder: '商户密钥',
+                yipayKeyHint: '易支付平台提供的商户密钥（一串字符）。',
+                platformPublicKeyPlaceholder: '平台公钥（RSA）',
+                platformPublicKeyHint: '易支付平台提供的公钥，用于验证平台返回的签名。',
+                merchantPrivateKeyPlaceholder: '商户私钥（RSA）',
+                merchantPrivateKeyHint: '您生成的 RSA 私钥，用于对请求进行签名。',
+                yipayMethodsHint: '选择该渠道支持的支付方式，至少选择一种。',
+                yipayMethodFeeHint: '手续费按用户选择的支付方式加到应付金额中，充值本金仍按原金额入账。',
+                yipayFeeFieldHint: '易支付手续费请在上方每个支付方式中设置。',
+                heleketMethods: '常见币种展示',
+                heleketMethodsPlaceholder: 'USDT@TRON\nUSDT@BSC\nBTC\nETH',
+                heleketMethodsHint: '仅作为后台展示与记录参考，不会限制用户在 Heleket 支付页最终选择的币种和网络。',
+                instructions: '充值说明',
+                instructionsPlaceholder: '请输入用户充值时看到的说明信息...',
+            },
+        },
+        // 计费管理（兼容旧键名 billingManage）
+        billingManage: {
+            title: '计费管理',
+            description: '管理用户付费实例和计费记录',
+            tabOverview: '概览',
+            tabInstances: '付费实例',
+            tabRecords: '扣费记录',
+            // 概览
+            totalIncome: '总收入',
+            monthIncome: '本月收入',
+            todayIncome: '今日收入',
+            totalRefund: '总退款',
+            paidInstances: '付费实例数',
+            activeInstances: '活跃实例',
+            // 实例列表
+            searchPlaceholder: '搜索实例...',
+            instanceId: '实例ID',
+            instanceName: '名称',
+            user: '用户',
+            plan: '方案',
+            expiresAt: '到期时间',
+            status: '状态',
+            actions: '操作',
+            noInstances: '暂无付费实例',
+            suspend: '封停',
+            unsuspend: '解封',
+            extend: '延期',
+            refund: '退款',
+            confirmSuspend: '确定封停实例 "{name}"？',
+            confirmUnsuspend: '确定解封实例 "{name}"？',
+            suspendSuccess: '实例已封停',
+            unsuspendSuccess: '实例已解封',
+            // 延期
+            extendTitle: '延期实例',
+            extendDays: '延期天数',
+            extendReason: '延期原因',
+            freeExtend: '免费延期',
+            freeExtendHint: '勾选后不扣除用户余额',
+            extendSuccess: '实例已延期',
+            extendFailed: '延期失败',
+            // 退款
+            refundTitle: '退款实例',
+            refundAmount: '退款金额',
+            refundReason: '退款原因',
+            refundSuccess: '退款成功',
+            refundFailed: '退款失败',
+            // 扣费记录
+            recordId: '记录ID',
+            recordType: '类型',
+            amount: '金额',
+            period: '账期',
+            remark: '备注',
+            createdAt: '时间',
+            noRecords: '暂无扣费记录',
+            // 用户余额
+            userBalance: '用户余额',
+            adjustBalance: '调整余额',
+            giftBalance: '赠送余额',
+            adjustTitle: '调整用户余额',
+            giftTitle: '赠送余额',
+            adjustAmount: '调整金额',
+            giftAmount: '赠送金额',
+            adjustRemark: '调整原因',
+            giftRemark: '赠送备注',
+            adjustHint: '正数表示增加，负数表示扣除',
+            adjustSuccess: '余额调整成功',
+            giftSuccess: '余额赠送成功',
+            operationFailed: '操作失败',
+        },
+        // 计费管理（新键名 billing，与组件对应）
+        billing: {
+            title: '计费管理',
+            description: '管理用户付费实例和计费记录',
+            loadFailed: '加载计费数据失败',
+            loadInstancesFailed: '加载实例列表失败',
+            loadRecordsFailed: '加载扣费记录失败',
+            // Tab 页签
+            tabs: {
+                overview: '概览',
+                instances: '付费实例',
+                records: '扣费记录',
+                rechargeRecords: '充值记录',
+                affConversions: 'AFF 转化',
+                paymentProviders: '支付渠道',
+            },
+            // 概览统计
+            totalRevenue: '总收入',
+            thisMonthRevenue: '本月收入',
+            todayRevenue: '今日收入',
+            totalRefunds: '总退款',
+            paidInstances: '付费实例数',
+            activeInstances: '活跃实例',
+            suspendedInstances: '已封停实例',
+            expiringInstances: '即将到期',
+            netRevenueLabel: '净收入',
+            thisMonthVsLastMonth: '本月 / 上月',
+            hostedRevenueShare: '托管收入占比',
+            revenueBreakdownTitle: '收入结构',
+            directRevenue: '自营收入',
+            hostedRevenue: '托管收入',
+            instanceHealthTitle: '实例状态',
+            affOverviewTitle: 'AFF返利',
+            rechargeLabel: '充值',
+            revenueLabel: '收入',
+            overviewPeriods: {
+                total: '总览',
+                thisMonth: '本月',
+                today: '今日',
+            },
+            // 实例列表
+            allStatus: '全部状态',
+            allHosts: '全部节点',
+            showExpiring: '仅显示即将到期',
+            showDateColumns: '显示日期列',
+            searchPlaceholder: '搜索用户名/节点/实例名/方案/套餐...',
+            user: '用户',
+            host: '节点',
+            plan: '方案',
+            package: '套餐',
+            price: '价格',
+            expiresAt: '到期时间',
+            purchaseDate: '购买日期',
+            remainingDays: '剩余天数',
+            expired: '已过期',
+            days: '天',
+            instanceType: '实例类型',
+            instanceName: '实例名',
+            instanceStatus: '状态',
+            noInstances: '暂无付费实例',
+            viewInstance: '查看',
+            autoRenew: '自动续费',
+            // 托管类型
+            hostingType: '托管类型',
+            direct: '直营',
+            hosted: '托管',
+            cycle: '周期',
+            cycleMonths: '{months}个月',
+            perPage: '每页',
+            totalCount: '共 {count} 条',
+            // 操作
+            suspend: '封停',
+            unsuspend: '解封',
+            extend: '延期',
+            refund: '退款',
+            deleteRefund: '删除并退款',
+            // 操作弹窗
+            suspendTitle: '封停实例',
+            unsuspendTitle: '解封实例',
+            extendTitle: '延期实例',
+            refundTitle: '退款',
+            deleteRefundTitle: '删除并退款',
+            targetInstance: '目标实例',
+            reason: '原因',
+            reasonPlaceholder: '请输入原因...',
+            extendDays: '延期天数',
+            freeExtend: '免费延期（不扣余额）',
+            refundAmount: '退款金额',
+            refundReasonPlaceholder: '请输入退款原因...',
+            refundReasonRequired: '请填写退款原因',
+            // 删除并退款相关
+            deleteRefundWarning: '警告：此操作将永久删除实例及其所有数据（快照、备份、端口映射等），此操作不可撤销！',
+            refundTypeLabel: '退款方式',
+            refundTypeRemaining: '按剩余价值退款（根据剩余天数计算）',
+            refundTypeFull: '全额退款（退还所有已消费金额）',
+            deleteRefundReasonPlaceholder: '请输入删除原因...',
+            deleteRefundReasonRequired: '请填写删除原因',
+            deleteRefundSuccess: '实例已删除并退款',
+            databaseOnlyDelete: '仅数据库删除',
+            deleteRefundDatabaseOnlySuccess: '实例已从数据库删除',
+            // 应用折扣相关
+            applyDiscount: '应用折扣',
+            applyDiscountTitle: '应用续费折扣',
+            applyDiscountHint: '输入AFF优惠码后，该实例后续续费时将自动享受5%折扣，同时优惠码创建者也将获得续费返利。',
+            affCodeLabel: 'AFF优惠码',
+            affCodePlaceholder: '请输入AFF优惠码...',
+            affCodeRequired: '请输入AFF优惠码',
+            applyDiscountSuccess: '已成功应用续费折扣',
+            // 修改价格相关
+            updatePrice: '修改价格',
+            owner: '所有者',
+            currentPrice: '当前价格',
+            newPrice: '新价格',
+            enterNewPrice: '请输入新价格',
+            priceHint: '此价格为单周期价格，修改后将影响续费费用',
+            settleBalance: '结算差价（根据剩余天数补交/退还）',
+            needPay: '需补交',
+            willRefund: '将退还',
+            priceDiffHint: '根据剩余 {days} 天计算，将自动处理用户余额',
+            noSettleHint: '不结算差价，仅修改后续续费价格，不影响当前周期余额',
+            affDiscount: 'AFF折扣',
+            actualRenewPrice: '实际续费价',
+            affAppliedHint: '该实例已应用优惠码，续费时享受 {discount}% 折扣。差价计算已基于折扣后价格。',
+            newActualPrice: '新实际续费价',
+            // 切换方案相关
+            upgradePlan: '切换',
+            upgradePlanTitle: '切换方案',
+            currentPlan: '当前方案',
+            planName: '方案名称',
+            monthlyPrice: '月均价',
+            memoryLabel: '内存',
+            diskLabel: '磁盘',
+            selectNewPlan: '选择新方案',
+            noAvailablePlans: '没有可升级的方案（新方案月均价需高于当前方案）',
+            priceDifference: '补差价',
+            priceDifferenceHint: '根据剩余天数计算，将从用户余额中扣除',
+            userBalance: '用户余额',
+            insufficientBalance: '用户余额不足，无法完成升级',
+            confirmUpgrade: '确认升级',
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            yearly: '年付',
+            month: '月',
+            months: '个月',
+            // 操作结果
+            suspendSuccess: '实例已封停',
+            unsuspendSuccess: '实例已解封',
+            extendSuccess: '实例已延期',
+            refundSuccess: '退款成功',
+            batchUpdatePrice: '批量修改价格',
+            batchSelectedCount: '已选择 {count} 个实例',
+            selectAllCurrentPage: '选择当前页实例',
+            selectInstance: '选择实例',
+            batchPriceNoSelection: '请先选择实例',
+            batchSelected: '已选实例',
+            batchPreviewChanged: '将更新',
+            batchPreviewFailed: '失败项',
+            batchPriceHint: '批量使用同一个单周期价格；预览会按每个实例的周期、剩余天数和AFF折扣分别计算。',
+            batchTotalCharge: '合计补交',
+            batchTotalRefund: '合计退还',
+            batchNetAmount: '净影响',
+            batchPreviewBlocked: '当前预览包含失败项或用户余额不足，不能提交。',
+            batchUserImpact: '用户余额影响',
+            batchPreviewDetails: '预览明细',
+            batchPreviewWaiting: '输入价格后将自动生成预览。',
+            batchPriceStatusReady: '可更新',
+            batchPriceStatusUnchanged: '无变化',
+            batchPriceStatusFailed: '失败',
+            result: '结果',
+            // 扣费记录
+            recordType: '类型',
+            recordTypes: {
+                newPurchase: '新购',
+                renew: '续费',
+                upgrade: '升级',
+                downgrade: '降级',
+                refund: '退款',
+                transfer_fee: '转移手续费',
+            },
+            amount: '金额',
+            instance: '实例',
+            remark: '备注',
+            time: '时间',
+            noRecords: '暂无扣费记录',
+            // 充值统计
+            totalRecharge: '总充值',
+            thisMonthRecharge: '本月充值',
+            todayRecharge: '今日充值',
+            orders: '笔',
+            // AFF 返利统计
+            totalAffCommission: 'AFF返利总额',
+            thisMonthAff: '本月AFF返利',
+            affConverted: '已转化金额',
+            affPendingConvert: '待审批转化',
+            // 充值记录
+            loadRechargeRecordsFailed: '加载充值记录失败',
+            noRechargeRecords: '暂无充值记录',
+            rechargeOrderNo: '订单号',
+            creditAmount: '到账金额',
+            actualAmount: '实际到账',
+            estimatedAmount: '预计到账',
+            payChannel: '支付渠道',
+            paymentDetails: '支付详情',
+            paymentUuid: 'UUID:',
+            paymentTxid: 'TxID:',
+            rechargeStatusLabel: '状态',
+            tradeNo: '第三方单号',
+            sync: '同步',
+            syncSuccess: '同步成功，充值已到账',
+            rechargeStatus: {
+                pending: '待支付',
+                completed: '已完成',
+                cancelled: '已取消',
+                failed: '失败',
+            },
+        },
+    },
+
+    // 错误页面
+    error: {
+        notFound: '页面不存在',
+        notFoundDesc: '抱歉，您访问的页面不存在',
+        backHome: '返回首页',
+        serverError: '服务器错误',
+        networkError: '网络错误',
+    },
+
+    // 日志页面
+    logs: {
+        title: '系统日志',
+        module: '模块',
+        allModules: '全部模块',
+        search: '搜索',
+        searchPlaceholder: '搜索用户名、操作或内容...',
+        reset: '重置',
+        time: '时间',
+        user: '用户',
+        action: '操作',
+        content: '内容',
+        result: '结果',
+        system: '系统',
+        loading: '加载中...',
+        noLogs: '暂无日志记录',
+        loadFailed: '加载日志失败',
+        loadModulesFailed: '加载模块列表失败',
+        totalRecords: '共 {total} 条记录，第 {page} / {totalPages} 页',
+        success: '成功',
+        failed: '失败',
+        expand: '展开',
+        collapse: '收起',
+    },
+
+    // 帮助页面
+    help: {
+        title: '帮助中心',
+        search: '搜索帮助文档...',
+        description: '查看使用指南和常见问题',
+        backToHelp: '返回帮助中心',
+        updatedAt: '更新于 {date}',
+        all: '全部',
+        noArticles: '暂无帮助文档',
+        articleNotFound: '文档不存在或已被删除',
+        totalArticles: '共 {count} 篇文档',
+        categories: {
+            general: '常规',
+            gettingStarted: '快速开始',
+            instances: '实例管理',
+            networking: '网络配置',
+            billing: '计费相关',
+            faq: '常见问题',
+        },
+    },
+
+    // 日志模块翻译
+    logModules: {
+        security: '安全事件',
+        instance: '实例操作',
+        snapshot: '快照操作',
+        backup: '备份操作',
+        image: '镜像操作',
+        host: '节点操作',
+        package: '套餐操作',
+        user: '用户管理',
+        personal: '个人设置',
+        ssh_key: 'SSH 密钥',
+        notification: '通知设置',
+        system: '系统配置',
+        auth: '认证操作',
+        storage: '远程存储',
+        // 兼容旧数据中的中文模块名
+        '登录操作': '登录操作',
+        '安全事件': '安全事件',
+        '实例操作': '实例操作',
+        '快照操作': '快照操作',
+        '备份操作': '备份操作',
+        '镜像操作': '镜像操作',
+        '节点操作': '节点操作',
+        '节点组操作': '节点组操作',
+        '套餐操作': '套餐操作',
+        '用户管理': '用户管理',
+        '个人设置': '个人设置',
+        '通知设置': '通知设置',
+        '系统配置': '系统配置',
+        '认证操作': '认证操作',
+        '远程存储': '远程存储',
+    },
+
+    // 日志操作翻译
+    logActions: {
+        // 安全事件
+        'login_success': '登录成功',
+        'login_failed': '登录失败',
+        'logout': '登出',
+        'register_success': '注册成功',
+        'rate_limit_exceeded': '登录尝试过多',
+        'invalid_invite_code': '无效邀请码',
+        'suspicious_activity': '可疑活动',
+        'permission_denied': '权限不足',
+        'unauthorized_access': '未授权访问',
+        'admin_action': '管理员操作',
+        // 实例操作
+        'instance.create': '创建实例',
+        'instance.delete': '删除实例',
+        'instance.start': '启动实例',
+        'instance.stop': '停止实例',
+        'instance.restart': '重启实例',
+        'instance.rebuild': '重装系统',
+        'instance.recreate': '重建实例',
+        'instance.change_host': '改节点',
+        'instance.cloud_init_manual_complete': '手动完成初始化检测',
+        'instance.update_quota': '更新实例配额',
+        'instance.rename': '重命名实例',
+        // 端口映射
+        'port.add': '添加端口映射',
+        'port.delete': '删除端口映射',
+        // 快照操作
+        'snapshot.create': '创建快照',
+        'snapshot.delete': '删除快照',
+        'snapshot.restore': '恢复快照',
+        // 备份操作
+        'backup.create': '创建备份',
+        'backup.delete': '删除备份',
+        'backup.export': '导出备份',
+        // 镜像操作
+        'image.sync': '同步镜像',
+        'image.delete': '删除镜像',
+        'image.create': '创建镜像',
+        'image.update': '更新镜像',
+        // 节点操作
+        'host.create': '添加节点',
+        'host.update': '更新节点',
+        'host.delete': '删除节点',
+        'host.test': '测试节点',
+        // 节点组操作
+        // 套餐操作
+        'package.create': '创建套餐',
+        'package.update': '更新套餐',
+        'package.delete': '删除套餐',
+        // 用户管理
+        'user.ban': '封禁用户',
+        'user.unban': '解封用户',
+        'user.delete': '删除用户',
+        'user.update_quota': '更新用户配额',
+        'user.revoke_sessions': '撤销用户会话',
+        // 个人设置
+        'profile.update': '更新个人信息',
+        'password.change': '修改密码',
+        // SSH 密钥
+        'ssh_key.add': '添加 SSH 密钥',
+        'ssh_key.delete': '删除 SSH 密钥',
+        // 通知设置
+        'notification.add': '添加通知渠道',
+        'notification.delete': '删除通知渠道',
+        // 安全设置
+        '2fa.setup': '设置双因素认证',
+        '2fa.enable': '启用双因素认证',
+        '2fa.disable': '禁用双因素认证',
+        '2fa.recovery_reset': '重置恢复码',
+        // 认证操作
+        'session.revoke': '撤销会话',
+        'session.revoke_all': '撤销所有会话',
+        // 系统配置
+        'system.config_update': '更新系统配置',
+        // 帮助文档
+        'help.create': '创建帮助文档',
+        'help.update': '更新帮助文档',
+        'help.delete': '删除帮助文档',
+        // 备份上传操作
+        'backup.upload': '上传备份',
+        'backup.upload.queue': '备份上传排队',
+        'backup.upload.cancel': '取消备份上传',
+        // 备份恢复操作
+        'backup.restore': '恢复备份',
+        'backup.restore.rollback': '回滚恢复',
+        'backup.restore.cancel': '取消恢复',
+        // 存储配置操作
+        'storage.create': '创建存储配置',
+        'storage.update': '更新存储配置',
+        'storage.delete': '删除存储配置',
+        // AFF 推荐计划
+        'aff.create_code': '创建优惠码',
+        'aff.convert_request': '申请 AFF 转化',
+        'aff.approve_convert': '审核通过 AFF 转化',
+        'aff.reject_convert': '审核拒绝 AFF 转化',
+    },
+
+    // 日志结果翻译
+    logResults: {
+        success: '成功',
+        failed: '失败',
+        warning: '警告',
+    },
+
+    // API 错误码翻译
+    errors: {
+        // 通用错误
+        INVALID_ID: '无效的 ID',
+        NOT_FOUND: '资源不存在',
+        UNAUTHORIZED: '未授权',
+        FORBIDDEN: '无权访问',
+        ADMIN_REQUIRED: '需要管理员权限',
+        // 用户错误
+        USER_NOT_FOUND: '用户不存在',
+        USER_EXISTS: '用户名已存在',
+        CANNOT_MODIFY_SELF: '不能修改自己的状态',
+        CANNOT_DELETE_SELF: '不能删除自己',
+        CANNOT_BAN_ADMIN: '不能封禁管理员账户',
+        CANNOT_DELETE_ADMIN: '不能删除管理员账户',
+        USER_HAS_INSTANCES: '该用户还有实例，请先删除实例',
+        // 认证错误
+        INVALID_CREDENTIALS: '用户名或密码错误',
+        ACCOUNT_BANNED: '账户已被禁用',
+        TOO_MANY_ATTEMPTS: '登录尝试次数过多，请稍后再试',
+        REGISTRATION_DISABLED: '当前已关闭注册',
+        INVALID_INVITE_CODE: '邀请码无效或已使用',
+        INVITE_CODE_EXPIRED: '邀请码已过期',
+        INVALID_2FA_CODE: '验证码或恢复码错误',
+        TWO_FA_REQUIRED: '请输入双因素认证码',
+        TWO_FA_ALREADY_ENABLED: '2FA 已启用，请先禁用后再重新设置',
+        TWO_FA_NOT_ENABLED: '2FA 未启用',
+        REFRESH_TOKEN_MISSING: '缺少刷新令牌',
+        REFRESH_TOKEN_INVALID: '刷新令牌无效或已过期',
+        SESSION_NOT_FOUND: '会话不存在',
+        // 验证错误
+        INVALID_EMAIL: '请输入有效的邮箱地址',
+        EMAIL_CONTAINS_ILLEGAL: '邮箱包含非法字符',
+        USERNAME_CONTAINS_ILLEGAL: '用户名包含非法字符',
+        PASSWORD_TOO_WEAK: '密码强度不足',
+        INVALID_SSH_KEY: '无效的 SSH 公钥格式',
+        SSH_KEY_EXISTS: '该公钥已添加',
+        INVALID_NAME: '名称格式不正确',
+        // 实例错误
+        INSTANCE_NOT_FOUND: '实例不存在',
+        INSTANCE_ALREADY_RUNNING: '实例已在运行',
+        INSTANCE_ALREADY_STOPPED: '实例已停止',
+        INSTANCE_STATUS_INVALID: '实例状态不允许此操作',
+        INSTANCE_SUSPENDED: '实例已被封停，无法执行此操作',
+        INSTANCE_NOT_SUSPENDED: '实例未处于封停状态',
+        INSTANCE_SUSPENDED_EXPIRED: '实例因到期被封停，请续费后解封',
+        INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED: '当前月流量周期无法销毁，已用流量达到或超过 5G',
+        // 节点错误
+        HOST_NOT_FOUND: '宿主机不存在',
+        HOST_OFFLINE: '宿主机离线',
+        HOST_HAS_INSTANCES: '宿主机上有实例，请先删除',
+        HOST_ALREADY_OFFICIAL: '该节点已经是自营节点',
+        HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT: '接管失败，部分套餐会失去全部绑定节点',
+        NO_AVAILABLE_HOSTS: '没有可用的节点',
+        // 镜像错误
+        IMAGE_NOT_FOUND: '镜像不存在',
+        IMAGE_SYNCED_ON_HOSTS: '镜像已在节点上同步，请先从节点删除',
+        IMAGE_TYPE_MISMATCH: '所选镜像与套餐实例类型不兼容',
+        // 套餐错误
+        PACKAGE_NOT_FOUND: '套餐不存在',
+        PACKAGE_IN_USE: '套餐正在被实例使用',
+        // 配额错误
+        QUOTA_EXCEEDED: '配额不足',
+        QUOTA_CPU_EXCEEDED: 'CPU 配额不足',
+        QUOTA_MEMORY_EXCEEDED: '内存配额不足',
+        QUOTA_DISK_EXCEEDED: '磁盘配额不足',
+        QUOTA_INSTANCE_EXCEEDED: '实例数量已达上限',
+        QUOTA_PORT_EXCEEDED: '端口配额不足',
+        QUOTA_SNAPSHOT_EXCEEDED: '快照配额不足',
+        QUOTA_BACKUP_EXCEEDED: '备份配额不足',
+        QUOTA_NOT_ALLOCATED: '请先分配配额',
+        // 快照错误
+        SNAPSHOT_NOT_FOUND: '快照不存在',
+        SNAPSHOT_RESTORE_REQUIRES_STOP: '请先停止实例再恢复快照',
+        // 备份错误
+        BACKUP_NOT_FOUND: '备份不存在',
+        BACKUP_NOT_READY: '备份尚未就绪，无法导出',
+        EXPORT_TASK_NOT_FOUND: '导出任务不存在或已过期',
+        EXPORT_TASK_EXPIRED: '导出任务已过期',
+        // 端口映射错误
+        PORT_IN_USE: '该端口已被使用',
+        PORT_OUT_OF_RANGE: '端口超出允许范围',
+        PORT_MAPPING_NOT_FOUND: '端口映射不存在',
+        // 节点组错误
+        NODE_GROUP_NOT_FOUND: '节点组不存在',
+        NODE_GROUP_HAS_HOSTS: '节点组下有宿主机，请先移除',
+        NODE_GROUP_HAS_PACKAGES: '节点组被套餐使用中',
+        // 通知错误
+        NOTIFICATION_CHANNEL_NOT_FOUND: '通知渠道不存在',
+        // 帮助错误
+        ARTICLE_NOT_FOUND: '文档不存在',
+        SLUG_EXISTS: 'Slug 已存在',
+        // 邀请码错误
+        INVITE_CODE_USED: '邀请码已被使用',
+        INVITE_CODE_NOT_FOUND: '邀请码不存在',
+        // OAuth 错误
+        OAUTH_PROVIDER_DISABLED: '该登录方式已被禁用',
+        OAUTH_ALREADY_BOUND: '该账号已被其他用户绑定',
+        OAUTH_NOT_BOUND: '账号未绑定',
+        OAUTH_TOKEN_ERROR: '获取授权失败',
+        // SSH 密钥错误
+        SSH_KEY_NOT_FOUND: 'SSH 密钥不存在',
+        SSH_KEY_REQUIRED: '必须选择一个 SSH 密钥，请先在个人设置中添加',
+        SSH_KEY_NOT_OWNED: 'SSH 密钥不存在或不属于该用户',
+        // 套餐错误（补充）
+        PACKAGE_UNAVAILABLE: '套餐不可用或已下架',
+        CANNOT_CREATE_OWN_PAID_PACKAGE: '不能使用自己的付费套餐创建实例',
+        // 节点资源错误
+        HOST_UNAVAILABLE: '选择的宿主机不可用或资源不足',
+        HOST_NO_ONLINE: '没有在线的宿主机，请先在节点管理中测试连接',
+        HOST_RESOURCES_NOT_SYNCED: '宿主机资源信息未同步，请在节点管理中点击"测试连接"',
+        HOST_NODE_GROUP_NO_HOSTS: '套餐要求的节点组中没有可用节点',
+        HOST_RESOURCES_INSUFFICIENT: '所有宿主机资源不足，请稍后再试或选择其他套餐',
+        HOST_NAME_EXISTS: '宿主机名称已存在',
+        HOST_ADDRESS_EXISTS: '宿主机连接地址已存在',
+        HOST_ADDRESS_UNRESOLVABLE: '面板当前无法解析该宿主机连接地址',
+        HOST_CERT_NOT_CONFIGURED: '请先配置证书路径',
+        HOST_INVALID_CPU_MAX: 'CPU 最大额配不能为负数',
+        HOST_INVALID_MEMORY_MAX: '内存最大值不能为负数或低于 256MB',
+        HOST_INVALID_IPV6_MODE: 'IPv6 模式必须是 1(路由)、2(NAT) 或 3(禁用)',
+        HOST_IPV6_ROUTE_REQUIRES_CONFIG: 'IPv6 路由模式需要提供子网和父接口',
+        HOST_CPU_BELOW_USED: 'CPU 最大额配不能低于实例已使用的资源',
+        HOST_MEMORY_BELOW_USED: '内存最大值不能低于实例已使用的资源',
+        // 实例操作错误
+        INSTANCE_STOP_REQUIRED: '请先停止实例',
+        INSTANCE_IMAGE_REQUIRED: '请指定镜像',
+        INSTANCE_IMAGE_UNAVAILABLE: '选择的镜像在当前节点不可用',
+        INSTANCE_REBUILD_FAILED: '重装系统失败',
+        INSTANCE_IPV6_NOT_SUPPORTED: '只有 NAT + IPv6 模式的实例才能重新分配 IPv6',
+        INSTANCE_IPV6_REASSIGN_FAILED: '重新分配 IPv6 地址失败',
+        INSTANCE_NO_IPV4: '虚拟机实例需要分配 IPv4 地址才能添加端口映射',
+        HOST_NO_IPV6_SUBNET: '宿主机未配置 IPv6 子网',
+        IPV6_POOL_EXHAUSTED: 'IPv6 地址池已耗尽，请稍后重试',
+        IPV6_REASSIGN_COOLDOWN: '每实例每天只能重新分配一次 IPv6，请稍后再试',
+        // 端口映射错误（补充）
+        PORT_MAPPING_NAT_ONLY: '仅 NAT 和双栈模式支持端口映射',
+        PORT_NO_AVAILABLE: '没有可用端口，请联系管理员',
+        PORT_CONFLICT: '端口已被占用，请使用其他端口',
+        PORT_MAPPING_INVALID_ID: '无效的实例或端口映射 ID',
+        // 镜像错误（补充）
+        IMAGE_CREATE_FAILED: '镜像创建失败',
+        IMAGE_UPDATE_FAILED: '镜像更新失败',
+        IMAGE_INVALID_HOST_ID: '无效的镜像或节点 ID',
+        // 备份错误（补充）
+        BACKUP_CREATE_FAILED: '创建备份失败',
+        BACKUP_DELETE_FAILED: '删除备份失败',
+        BACKUP_EXPORT_FAILED: '导出备份失败',
+        BACKUP_QUOTA_NOT_SET: '请先为该实例设置备份配额',
+        BACKUP_EXPORT_STATUS_INVALID: '导出任务状态异常',
+        // 配置错误
+        CONFIG_INVALID_KEY: '无效的配置键',
+        CONFIG_INVALID_VALUE: '配置值必须是非负整数',
+        // 快照错误（补充）
+        SNAPSHOT_QUOTA_NOT_SET: '请先为该实例设置快照配额',
+        // 套餐错误（补充）
+        PACKAGE_HAS_INSTANCES: '该套餐正在被实例使用，无法删除',
+        // 资源限制错误
+        RESOURCE_CPU_EXCEEDS_PACKAGE: 'CPU 配置超出套餐限制',
+        RESOURCE_MEMORY_EXCEEDS_PACKAGE: '内存配置超出套餐限制',
+        RESOURCE_DISK_EXCEEDS_PACKAGE: '磁盘配置超出套餐限制',
+        // 用户配额错误（详细）
+        QUOTA_CPU_INSUFFICIENT: 'CPU 配额不足',
+        QUOTA_MEMORY_INSUFFICIENT: '内存配额不足',
+        QUOTA_DISK_INSUFFICIENT: '磁盘配额不足',
+        QUOTA_INSTANCE_LIMIT_REACHED: '实例数量已达上限',
+        QUOTA_HOST_LIMIT_REACHED: '宿主机数量已达上限',
+        QUOTA_FRIEND_LIMIT_REACHED: '您的好友数量已达上限',
+        QUOTA_PORT_BELOW_USED: '端口配额不能小于当前已使用量',
+        QUOTA_SNAPSHOT_BELOW_USED: '快照配额不能小于当前已使用量',
+        QUOTA_BACKUP_BELOW_USED: '备份配额不能小于当前已使用量',
+        QUOTA_PORT_TOTAL_EXCEEDED: '端口配额超出用户总配额',
+        QUOTA_SNAPSHOT_TOTAL_EXCEEDED: '快照配额超出用户总配额',
+        QUOTA_BACKUP_TOTAL_EXCEEDED: '备份配额超出用户总配额',
+        // 镜像错误（补充）
+        IMAGE_NOT_SYNCED: '镜像尚未同步到所选宿主机',
+        IMAGE_SYNCING_CANNOT_DELETE: '镜像正在同步中，无法删除',
+        IMAGE_NO_HOSTS: '没有可用的节点，请先添加节点',
+        // 端口错误（补充）
+        PORT_RANGE_INVALID: '端口必须在允许范围内',
+        // 快照策略错误
+        SNAPSHOT_MANUAL_FULL: '手动快照已达实例配额，无法启用自动快照',
+        SNAPSHOT_RETENTION_EXCEEDS: '保留数量超出可用配额',
+        // 备份策略错误
+        BACKUP_MANUAL_FULL: '手动备份已达实例配额，无法启用自动备份',
+        BACKUP_RETENTION_EXCEEDS: '保留数量超出可用配额',
+        // OAuth 错误（补充）
+        OAUTH_NOT_ENABLED: '该登录方式未启用',
+        // 存储池错误
+        STORAGE_POOL_NOT_CONFIGURED: '宿主机未配置系统盘存储池，无法创建实例',
+        // 好友系统错误
+        CANNOT_ADD_SELF: '不能添加自己为好友',
+        ALREADY_FRIENDS: '你们已经是好友了',
+        FRIEND_REQUEST_PENDING: '好友请求已在待处理中',
+        FRIEND_REQUEST_NOT_FOUND: '好友请求不存在',
+        FRIEND_REQUEST_NOT_PENDING: '该请求已被处理',
+        FRIENDSHIP_NOT_FOUND: '好友关系不存在',
+        TARGET_FRIEND_QUOTA_FULL: '对方好友数量已达上限，无法添加',
+        // 套餐共享错误
+        CANNOT_SHARE_TO_SELF: '不能共享给自己',
+        PACKAGE_ALREADY_SHARED: '套餐已共享给该用户',
+        SHARE_NOT_FOUND: '共享记录不存在',
+        NOT_FRIENDS: '对方不是您的好友',
+        SHARE_QUOTA_CPU_EXCEEDED: '共享套餐 CPU 配额已用完',
+        SHARE_QUOTA_MEMORY_EXCEEDED: '共享套餐内存配额已用完',
+        SHARE_QUOTA_INSTANCES_EXCEEDED: '共享套餐实例数量已达上限',
+        // Email verification errors
+        EMAIL_VERIFICATION_DISABLED: '邮箱验证功能未启用',
+        EMAIL_CODE_REQUIRED: '请输入邮箱验证码',
+        INVALID_EMAIL_CODE: '验证码无效或已过期',
+        TOO_MANY_VERIFICATION_REQUESTS: '验证码请求过于频繁，请稍后再试',
+        EMAIL_SEND_FAILED: '验证邮件发送失败，请稍后再试',
+        EMAIL_ALREADY_REGISTERED: '该邮箱地址已被使用',
+        EMAIL_DOMAIN_NOT_ALLOWED: '该邮箱域名不允许注册，请使用其他邮箱',
+        // 转移错误
+        TRANSFER_NOT_FOUND: '转移请求不存在',
+        TRANSFER_TO_SELF: '不能转移给自己',
+        TRANSFER_TO_BANNED: '不能转移给被封禁的用户',
+        TRANSFER_ALREADY_PENDING: '该实例已有待处理的转移请求',
+        TRANSFER_NOT_PENDING: '转移请求不在等待状态',
+        TRANSFER_INVALID_STATUS: '实例状态不允许转移',
+        TRANSFER_QUOTA_NOT_FOUND: '接收方配额信息不存在',
+        TRANSFER_QUOTA_INSUFFICIENT: '接收方配额不足',
+        TRANSFER_INSTANCE_LOCKED: '实例正在转移中，暂时无法操作',
+        TRANSFER_HOST_DISABLED: '该节点已禁止转移操作',
+        TRANSFER_INSUFFICIENT_BALANCE: '余额不足，无法支付转移手续费',
+        // 转移过程错误
+        INSTANCE_MUST_BE_STOPPED: '实例必须在转移前停止',
+        INCUS_RENAME_FAILED: '在宿主机上重命名实例失败',
+        DATABASE_ERROR: '数据库操作失败，请重试',
+        // 敏感操作二次验证错误
+        VERIFICATION_REQUIRED: '此操作需要二次验证',
+        INVALID_CODE: '验证码无效或已过期',
+        NO_NOTIFICATION_CHANNEL: '未绑定通知渠道，无需二次验证',
+        EMAIL_NOT_CONFIGURED: '未配置邮箱，无法发送验证码',
+        SEND_FAILED: '验证码发送失败',
+        // 签到错误
+        CHECKIN_NO_INSTANCE: '您需要至少拥有一个实例才能签到',
+        CHECKIN_ALREADY_TODAY: '今日已签到',
+        REDEEM_ALREADY_TODAY: '今日已兑换过兑换码',
+        REDEEM_CODE_NOT_FOUND: '兑换码不存在',
+        REDEEM_CODE_USED: '兑换码已被使用',
+        REDEEM_CODE_EXPIRED: '兑换码已过期',
+        REDEEM_CODE_SELF_ONLY: '此兑换码只能由所有者自己使用',
+        REDEEM_CODE_DISABLED: '此兑换码已被禁用',
+        REDEEM_CODE_INVALID_FORMAT: '兑换码格式错误，仅支持 h- 开头的系统兑换码',
+        REDEEM_CODE_EXHAUSTED: '此兑换码已达到最大使用次数',
+        REDEEM_CODE_ALREADY_USED_BY_USER: '您已使用过此兑换码',
+        REDEEM_CODE_HOST_MISMATCH: '此兑换码只能用于同一节点的实例',
+        REDEEM_CODE_BATCH_LIMIT: '您已使用过该批次的其他兑换码',
+        REDEEM_EXCEEDS_PACKAGE_QUOTA: '兑换后将超出实例套餐配额限制',
+        REDEEM_ALREADY_AT_LIMIT: '实例资源已达到套餐上限',
+        CHECKIN_CODE_PAID_INSTANCE: '签到兑换码只能用于免费实例',
+        PAID_INSTANCE_DELETION_NOT_ALLOWED: '付费实例不允许删除',
+        // 余额错误
+        INSUFFICIENT_BALANCE: '余额不足，请先充值',
+        INTERNAL_ERROR: '服务器内部错误',
+    },
+
+    // 流量统计
+    traffic: {
+        title: '流量统计',
+        monthlyUsage: '本月流量',
+        used: '已使用',
+        unlimited: '无限制',
+        total: '总计',
+        history30Days: '近 30 天流量',
+        historyPeriod: '周期流量',
+        noData: '暂无流量数据',
+        noHistoryData: '暂无历史数据',
+        throttledHint: '已限速至 1Mbps',
+        resetHint: '每月 1 号重置流量',
+        periodResetHint: '每月 {date} 号重置流量',
+        status: {
+            normal: '正常',
+            warning: '预警',
+            limited: '已限速',
+        },
+        download: '下载',
+        upload: '上传',
+        limit: '限额',
+        extraQuota: '额外配额',
+        resetDate: '重置日期',
+        nextReset: '下次重置',
+    },
+
+    // 实例转移
+    transfer: {
+        title: '实例转移',
+        sentTab: '转移记录',
+        receivedTab: '接收记录',
+        pendingCount: '待处理',
+        noTransfers: '暂无转移记录',
+        noPendingTransfers: '暂无待接收的转移',
+        searchPlaceholder: '搜索实例名称、接收方用户名或备注...',
+        // 状态
+        status: {
+            pending: '等待接收',
+            processing: '处理中',
+            accepted: '已接收',
+            rejected: '已拒绝',
+            cancelled: '已取消',
+        },
+        // 操作
+        actions: {
+            transfer: '转移',
+            accept: '接受',
+            reject: '拒绝',
+            cancel: '取消',
+            push: '直接推送',
+        },
+        // 完成时间
+        completedAt: '完成时间',
+        rejectedAt: '拒绝时间',
+        cancelledAt: '取消时间',
+        // 转移弹窗
+        modal: {
+            title: '转移实例',
+            targetUser: '接收方用户名',
+            targetUserPlaceholder: '输入接收方用户名',
+            searchUser: '搜索用户',
+            userNotFound: '用户不存在',
+            userBanned: '该用户已被封禁',
+            cannotTransferToSelf: '不能转移给自己',
+            remark: '备注（可选）',
+            remarkPlaceholder: '输入转移备注',
+            quotaCheck: '配额检查',
+            instance: '实例',
+            quotaSufficient: '配额充足',
+            quotaInsufficient: '配额不足',
+            canTransfer: '用户状态正常，可以进行转移操作',
+            confirmTransfer: '确认转移',
+            transferring: '转移中...',
+            deleteWarning: '注意：如果对方接收转移，系统将自动删除该实例的端口映射、建站反代、快照、备份等关联资源。',
+            feeLabel: '转移手续费',
+            balanceLabel: '当前余额',
+            insufficientBalance: '余额不足，请先充值',
+            feeRefundHint: '确认转移时将扣除手续费，对方拒绝接收将自动退还',
+        },
+        // 拒绝弹窗
+        rejectModal: {
+            title: '拒绝转移',
+            reason: '拒绝原因（可选）',
+            reasonPlaceholder: '输入拒绝原因',
+        },
+        // 配置详情弹窗
+        configModal: {
+            title: '转移时配置详情',
+            instanceName: '实例名称',
+            hostInfo: '宿主机信息',
+            networkMode: '网络模式',
+            portMappings: '端口映射',
+            snapshots: '快照',
+            backups: '备份',
+            package: '套餐',
+        },
+        hasRemark: '有备注',
+        // 详情
+        detail: {
+            fromUser: '发起方',
+            toUser: '接收方',
+            instance: '实例',
+            snapshot: '转移时配置',
+            cpu: 'CPU',
+            memory: '内存',
+            disk: '磁盘',
+            ports: '端口映射',
+            snapshots: '快照',
+            backups: '备份',
+            host: '节点',
+            package: '套餐',
+            remark: '备注',
+            rejectReason: '拒绝原因',
+            createdAt: '发起时间',
+            acceptedAt: '接收时间',
+            rejectedAt: '拒绝时间',
+            cancelledAt: '取消时间',
+        },
+        // 提示消息
+        messages: {
+            transferSuccess: '转移请求已发送',
+            transferComplete: '转移完成',
+            acceptSuccess: '已接受转移',
+            rejectSuccess: '已拒绝转移',
+            cancelSuccess: '已取消转移',
+            pushSuccess: '已成功推送实例',
+            instanceLocked: '该实例正在转移中，暂时无法操作',
+        },
+        // 错误
+        errors: {
+            TRANSFER_NOT_FOUND: '转移请求不存在',
+            TRANSFER_TO_SELF: '不能转移给自己',
+            TRANSFER_TO_BANNED: '不能转移给被封禁的用户',
+            TRANSFER_ALREADY_PENDING: '该实例已有待处理的转移请求',
+            TRANSFER_NOT_PENDING: '转移请求不在等待状态',
+            TRANSFER_INVALID_STATUS: '实例状态不允许转移',
+            TRANSFER_QUOTA_NOT_FOUND: '接收方配额信息不存在',
+            TRANSFER_QUOTA_INSUFFICIENT: '接收方配额不足',
+            TRANSFER_INSTANCE_LOCKED: '实例正在转移中，暂时无法操作',
+            TRANSFER_HOST_DISABLED: '该节点已禁止转移操作',
+            TRANSFER_INSUFFICIENT_BALANCE: '余额不足，无法支付转移手续费',
+            PUSH_NOT_HOST_OWNER: '只有宿主机所有者才能直接推送',
+        },
+    },
+
+    // 好友系统
+    friends: {
+        title: '好友',
+        description: '管理您的好友列表，好友之间可以共享资源',
+        friendsList: '好友列表',
+        pendingRequests: '待处理请求',
+        historyRequests: '历史记录',
+        addFriend: '添加好友',
+        username: '用户名',
+        usernamePlaceholder: '输入对方用户名',
+        usernameHint: '输入您想添加的好友用户名',
+        remark: '备注',
+        remarkPlaceholder: '请输入备注信息（可选）',
+        remarkHint: '例如：认识原因、用途说明等',
+        sendRequest: '发送请求',
+        accept: '接受',
+        reject: '拒绝',
+        noFriends: '暂无好友',
+        noFriendsHint: '添加好友后可以共享节点、套餐和镜像资源',
+        noSearchResult: '未找到匹配的好友',
+        noHistorySearchResult: '未找到匹配的历史记录',
+        noPendingRequests: '暂无待处理的好友请求',
+        noHistoryRecords: '暂无历史记录',
+        noHistoryRecordsHint: '已处理的好友请求将显示在这里',
+        addedOn: '添加于',
+        requestedOn: '请求于',
+        sentOn: '发送于',
+        sentTo: '发送给 {username}',
+        processedOn: '处理于',
+        confirmRemove: '确定要删除好友 {name} 吗？',
+        requestSent: '好友请求已发送',
+        requestAccepted: '已接受好友请求',
+        requestRejected: '已拒绝好友请求',
+        friendRemoved: '已删除好友',
+        statusAccepted: '已接受',
+        statusRejected: '已拒绝',
+        filterAll: '全部',
+        filterAccepted: '已接受',
+        filterRejected: '已拒绝',
+        hosts: '节点',
+        instances: '实例',
+        // 邀请码
+        invites: '邀请码',
+        generateInvite: '生成邀请码',
+        generateInviteTitle: '生成邀请码',
+        inviteCode: '邀请码',
+        inviteStatus: '状态',
+        inviteUsed: '已使用',
+        inviteExpired: '已过期',
+        inviteUnused: '未使用',
+        usedBy: '使用者',
+        createdAt: '创建时间',
+        expiresAt: '过期时间',
+        permanent: '永久有效',
+        noInvites: '暂无邀请码',
+        noInvitesHint: '生成邀请码后，其他用户可以使用它们注册账号',
+        inviteCount: '生成数量',
+        inviteCountHint: '可以批量生成 1-10 个邀请码',
+        expireDays: '过期天数',
+        expireDaysPlaceholder: '0 表示永不过期',
+        expireDaysHint: '设置邀请码的过期时间，0 表示永不过期',
+        generate: '生成',
+        confirmDeleteInvite: '确定删除邀请码 {code}？',
+        inviteDeleted: '邀请码已删除',
+        inviteGenerated: '邀请码已生成',
+        copyCode: '复制邀请码',
+        copyLink: '复制邀请链接',
+        inviteCodeCopied: '邀请码已复制',
+        inviteLinkCopied: '邀请链接已复制',
+        close: '关闭',
+        deleteInvite: '删除',
+        userNotFound: '未找到该用户',
+        cannotAddSelf: '不能添加自己为好友',
+        alreadyFriend: '你们已经是好友了',
+        requestAlreadyPending: '好友请求已在待处理中',
+        requestNotFound: '请求不存在或已处理',
+        friendshipNotFound: '好友关系不存在',
+        // 套餐共享
+        selectFriendHint: '请选择一个好友',
+        selectFriendDesc: '点击左侧好友卡片来管理套餐共享',
+        sharedPackages: '已共享的套餐',
+        availablePackages: '可共享的套餐',
+        noSharedPackages: '尚未共享任何套餐',
+        addShare: '添加共享',
+        addFirstShare: '共享第一个套餐',
+        removeShare: '取消共享',
+        editQuota: '编辑配额',
+        quotaMultiplier: '配额倍数',
+        quotaMultiplierHint: '例如 1、1.5、2 倍，设置好友可使用的资源比例',
+        maxInstances: '最大实例数',
+        maxInstancesHint: '限制好友可创建的实例数量',
+        noLimit: '无限制',
+        currentUsage: '当前使用',
+        shareAdded: '套餐已共享',
+        shareRemoved: '已取消共享',
+        quotaUpdated: '配额已更新',
+        confirmRemoveShare: '确定要取消共享套餐 {package} 吗？',
+        addShareTitle: '共享套餐',
+        shareToFriend: '共享给该好友',
+        selectPackage: '选择套餐',
+        selectPackagePlaceholder: '请选择要共享的套餐',
+        confirmShare: '确认共享',
+        editQuotaTitle: '编辑配额限制',
+        sharedTo: '共享给',
+        removeFriend: '删除好友',
+        noPackagesToShare: '您还没有可共享的套餐',
+        createPackageFirst: '请先在“我的套餐”中创建套餐',
+        noPackageSearchResult: '未找到匹配的套餐',
+    },
+
+    // 套餐标签
+    package: {
+        shared: '好友',
+        globalShared: '可用',
+        friendPrefix: '好友:',
+        myPackage: '我的套餐',
+        soldOut: '售罄',
+    },
+
+    // 用户资源管理
+    resources: {
+        hosts: {
+            title: '我的节点',
+            description: '管理您的节点，这些节点可以供您和您的好友使用',
+            create: '添加节点',
+            createDesc: '添加一个新的 Incus 节点',
+            ubuntuOnlyHint: '目前仅支持 Ubuntu 22.04+ 和 Debian 11+ 系统。',
+            installHintTitle: '填写节点信息并提交后，系统会生成包含面板地址和 Token 的安装命令，复制到节点宿主机执行即可完成安装。',
+            installHintIpv6: '提示：如需 IPv6 网络模式（NAT+IPv6、IPv6 Only），请先在宿主机执行安装脚本，脚本会自动生成 IPv6 子网信息供您填入下方表单。',
+            ipv6OptionalHint: '如不清楚以上信息，可先留空。在节点宿主机执行安装脚本后，脚本会自动检测并输出可用的 IPv6 子网，届时回到面板编辑节点补充即可。',
+            storagePoolAfterConnectHint: '节点连接成功后，请记得前往节点详细页的“存储”标签页创建存储池。',
+            noHosts: '暂无节点',
+            noHostsHint: '添加节点后可以在其上创建实例',
+            calibrateAll: '对齐全部',
+            noOnlineHosts: '没有在线的节点可对齐',
+            calibrateAllDone: '已对齐 {total} 个节点，其中 {changed} 个有差异已修正',
+            calibrateAllNoChange: '已对齐 {total} 个节点，无差异',
+            nameHint: '节点名称以 PEER + 您的用户ID 作为前缀，后面可自定义',
+            nameSuffixRequired: '请输入节点名称后缀',
+            // 管理员专用：节点切换器
+            mine: '我的节点',
+            hosted: '托管节点',
+            owner: '所有者',
+            filterByUserId: '用户ID',
+            takeoverOfficial: '接管为自营',
+            takeoverOfficialLoading: '接管中...',
+            takeoverOfficialConfirm: '确定将节点“{name}”接管为自营吗？该操作会转移当前节点，并自动接管可安全转移的套餐；现有实例归属用户不变。',
+            takeoverOfficialSuccess: '已接管节点 {name}，转移 {packages} 个套餐，保留 {instances} 个实例',
+            takeoverOfficialDetached: '其中 {count} 个套餐仍绑定其他托管节点，已移除当前节点绑定：{names}',
+            takeoverOfficialBlocked: '无法接管：有 {count} 个套餐在移除当前节点后将失去全部绑定节点，请先手动处理这些套餐：{names}',
+        },
+        packages: {
+            title: '我的套餐',
+            description: '管理您的套餐配置，这些套餐可以供您和您的好友使用',
+            create: '创建套餐',
+            noPackages: '暂无套餐',
+            noPackagesHint: '创建套餐后可以在创建实例时使用',
+            share: '共享套餐',
+            viewShares: '查看共享列表',
+            selectFriend: '选择好友',
+            selectFriendPlaceholder: '请选择要共享的好友',
+            noFriends: '暂无好友，请先添加好友',
+            shareSuccess: '套餐共享成功',
+            shareFailed: '套餐共享失败',
+            confirmUnshare: '确定要取消共享吗？',
+            unshareSuccess: '已取消共享',
+            unshareFailed: '取消共享失败',
+            sharesList: '共享列表',
+            sharesCount: '{count} 人',
+            noShares: '暂无共享记录',
+            noSharesHint: '共享后好友可使用此套餐创建实例',
+            sharedAt: '共享时间',
+            unshare: '取消共享',
+            searchFriend: '搜索好友...',
+            noAvailableFriends: '所有好友都已共享此套餐',
+            selectToShare: '选择要共享的好友',
+            // 配额限制
+            quotaSettings: '配额限制',
+            quotaMultiplier: '资源配额倍数',
+            quotaMultiplierHint: '限制好友可使用的 CPU/内存占套餐比例',
+            maxInstances: '最大实例数',
+            maxInstancesHint: '限制好友最多可开通的实例数量',
+            noLimit: '无限制',
+            instanceUnit: '{n} 台',
+            quotaDisplay: '配额: {multiplier} · 实例: {instances}',
+            usageDisplay: '已用: {cpu}% CPU / {memory} MB 内存 / {instances} 台',
+            updateQuota: '修改配额',
+            updateQuotaSuccess: '配额已更新',
+            updateQuotaFailed: '更新配额失败',
+            // 美化弹窗新增
+            shareToFriend: '分享套餐给好友',
+            noFriendsHint: '先添加好友才能共享套餐',
+            allFriendsShared: '已全部共享',
+            confirmShare: '确认共享',
+            editQuota: '编辑配额',
+            editQuotaFor: '正在编辑 {username} 的配额',
+            quotaUpdated: '配额已更新',
+            quotaUpdateFailed: '更新配额失败',
+            usageStatus: '使用情况',
+            instanceCount: '实例数量',
+            packageInstanceCount: '套餐下实例数',
+            networkModeColumn: '网络模式',
+            instanceTypeColumn: '实例类型',
+            trafficMultiplierColumn: '流量倍率',
+            hostColumn: '宿主机',
+            instanceColumn: '实例数',
+            publicBadge: '已公开',
+            currentUsage: '当前已用: {cpu}% CPU / {memory} MB 内存 / {instances} 台实例',
+            currentUsageInfo: '当前已使用 {cpu}% CPU、{memory} MB 内存、{instances} 台实例',
+            addShare: '添加共享',
+            searchPlaceholder: '搜索套餐名、节点名、描述...',
+            noSearchResults: '未找到匹配的套餐',
+            clearSearch: '清除搜索',
+            // 通知渠道设置
+            notifyChannel: '通知渠道',
+            notifyChannelTitle: '资源释放通知渠道',
+            notifyChannelDesc: '当用户删除实例或宿主机所有者释放配额时，系统会通过此渠道发送通知',
+            // 分享链接
+            copyShareLink: '复制分享链接',
+            shareLinkCopied: '分享链接已复制，用户访问该链接可直达开通实例页面',
+            // 管理员专用：套餐切换器
+            mine: '我的套餐',
+            hosted: '托管套餐',
+            owner: '所有者',
+            filterByUserId: '用户ID',
+        },
+        // 套餐方案管理
+        plans: {
+            title: '方案管理',
+            manage: '管理方案',
+            noPlans: '暂无方案',
+            noPlansHint: '创建方案后，用户可以购买此套餐的付费实例',
+            add: '添加方案',
+            create: '创建方案',
+            edit: '编辑方案',
+            name: '方案名称',
+            namePlaceholder: '如：基础版、专业版、企业版',
+            description: '方案描述',
+            descriptionPlaceholder: '可选，用于向用户展示方案特点',
+            resourceConfig: '资源配置',
+            portLimit: '端口数',
+            snapshotLimit: '快照数',
+            backupLimit: '备份数',
+            siteLimit: '站点数',
+            swapSize: 'SWAP 大小',
+            trafficLimit: '流量限额',
+            trafficSpeed: '带宽限制',
+            unlimitedHint: '留空表示无限制',
+            billingConfig: '计费配置',
+            price: '价格',
+            billingCycle: '计费周期',
+            setupFee: '开通费',
+            slaGuarantee: 'SLA保证',
+            stock: '库存',
+            isActive: '启用方案',
+            status: '方案状态',
+            statusActive: '可售',
+            statusActiveHint: '正常展示并允许用户选择和开通',
+            statusSoldOut: '售罄',
+            statusSoldOutHint: '继续展示，但禁止新开通和改方案',
+            statusInactive: '下架',
+            statusInactiveHint: '不在开通入口展示，也不能被选择',
+            sortOrder: '排序',
+            daily: '按天',
+            weekly: '按周',
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            yearly: '年付',
+            days: '天',
+            months: '个月',
+            createSuccess: '方案创建成功',
+            updateSuccess: '方案更新成功',
+            saveFailed: '保存方案失败',
+            priceRangeHint: '最高 ¥{max}',
+            priceRangeError: '方案价格必须在 0-{max} 元之间，最多支持两位小数',
+            confirmDelete: '确定要删除方案「{name}」吗？',
+            deleteSuccess: '方案已删除',
+            deleteFailed: '删除方案失败',
+        },
+        images: {
+            title: '我的镜像',
+            description: '管理您的镜像配置，这些镜像可以供您和您的好友使用',
+            create: '添加镜像',
+            noImages: '暂无镜像',
+            noImagesHint: '添加镜像后可以在创建实例时使用',
+        },
+    },
+
+    // 实例配置标签页
+    instanceConfig: {
+        title: '高级配置',
+        sections: {
+            swap: 'SWAP',
+            storageIO: '存储 I/O 限制',
+            networkLimits: '网络限制',
+            processScheduling: '进程与调度',
+            bootSettings: '启动设置',
+        },
+        swap: {
+            size: '大小',
+            enabled: '已启用',
+            disabled: '已关闭',
+            enableButton: '启用 SWAP',
+            disableButton: '关闭 SWAP',
+            toggleHint: 'SWAP 可按需启用或关闭，重装/重建后会保持当前状态。',
+            runningRequired: '虚拟机需要先启动后才能启用 SWAP。',
+            vmHint: '虚拟机将通过实例内 swapfile 持久启用。',
+            containerHint: '容器将通过 Incus 内存交换限制启用。',
+            enableConfirmTitle: '启用 SWAP',
+            enableConfirmText: '确定要为该实例启用 {size} 的 SWAP 吗？',
+            disableConfirmTitle: '关闭 SWAP',
+            disableConfirmText: '确定要为该实例关闭 SWAP 吗？',
+            enableSuccess: 'SWAP 已启用',
+            enableFailed: '启用 SWAP 失败',
+            disableSuccess: 'SWAP 已关闭',
+            disableFailed: '关闭 SWAP 失败',
+        },
+        changeHost: {
+            title: '改节点',
+            description: '将实例重新创建到同套餐的其他节点，实例 ID 与计费信息会保留。',
+            currentHost: '当前节点',
+            availableCount: '{count} 个可选节点',
+            button: '改节点',
+            loadFailed: '加载可用节点失败',
+            submitFailed: '提交改节点失败',
+            taskQueued: '改节点任务已提交，请稍候...',
+            modalTitle: '选择目标节点',
+            modalSubtitle: '只能选择同套餐下 CPU 和内存容量充足的节点。',
+            warning: '此操作会重新创建实例系统盘，旧实例数据、快照、备份、端口映射和反代站点会被清空。',
+            selectSshKey: 'SSH 密钥',
+            noSshKey: '没有可用 SSH 密钥',
+            confirm: '确认改节点',
+            current: '当前',
+            available: '可用',
+            memory: '内存',
+            reasons: {
+                current_host: '当前节点',
+                host_offline: '离线',
+                host_type_mismatch: '类型不匹配',
+                cpu_full: '已满',
+                memory_full: '已满',
+                resource_unconfigured: '未配置配额',
+                image_unavailable: '镜像不可用',
+            },
+        },
+        overridden: '已覆盖',
+        resetToDefault: '重置为套餐默认值',
+        saveSuccess: '配置已保存',
+        saveFailed: '保存配置失败',
+        boostProcesses: {
+            button: '提高上限',
+            title: '提高进程数上限',
+            confirm: '确定要为该 {type} 实例提高进程数限制吗？操作后进程数上限将提升至 {limit}。',
+            hint: '此操作仅提高进程数上限，不会影响实例的其他配置',
+            success: '进程数上限已提升至 {limit}',
+            failed: '提升进程数上限失败',
+        },
+    },
+
+    // 套餐表单页面
+    packageForm: {
+        createTitle: '创建套餐',
+        editTitle: '编辑套餐',
+        description: '配置套餐的资源限制和高级选项',
+        sections: {
+            basicInfo: '基本信息',
+            resourceLimits: '资源限制',
+            storageIO: '存储 I/O 限制',
+            networkLimits: '网络限制',
+            processScheduling: '进程与调度',
+            bootSettings: '启动设置',
+            prerequisite: '前置套餐',
+            visibility: '可见性',
+            instancePermissions: '实例操作权限',
+            advancedOptions: '高级选项',
+            instanceQuota: '实例配额',
+        },
+        fields: {
+            networkMode: '网络模式',
+            instanceType: '实例类型',
+            packageCreationMode: '套餐用途',
+            ioLimitMode: 'IO 限制模式',
+            limitsRead: '读取速率限制',
+            limitsWrite: '写入速率限制',
+            limitsReadIops: '读取 IOPS 限制',
+            limitsWriteIops: '写入 IOPS 限制',
+            limitsIngress: '入站带宽限制',
+            limitsEgress: '出站带宽限制',
+            limitsProcesses: '最大进程数',
+            limitsCpuPriority: 'CPU 优先级',
+            bootAutostart: '随宿主机自动启动',
+            bootAutostartPriority: '启动优先级',
+            bootAutostartDelay: '启动延迟',
+            bootHostShutdownTimeout: '关机超时时间',
+            portLimit: '端口映射数量限制',
+            snapshotLimit: '快照数量限制',
+            backupLimit: '备份数量限制',
+            siteLimit: '站点数量限制',
+            hostStoragePools: '节点系统盘存储池',
+            hostTrafficMultiplier: '节点流量倍率',
+            requiredPackage: '前置套餐',
+            publicAccess: '公开套餐',
+            globalMaxInstances: '最大实例数',
+            allowInstanceDeletion: '允许用户删除实例',
+        },
+        hostSelector: {
+            official: '自营节点',
+            searchPlaceholder: '搜索节点名、地区、地址、所有者...',
+            selectedCount: '已选择 {count} 台宿主机',
+            noSearchResults: '未找到匹配的宿主机',
+            detailUnavailable: '当前视图未加载此宿主机详情，保存时仍会保留绑定',
+        },
+        creationModes: {
+            free: {
+                title: '免费实例套餐',
+                description: '实例直接使用套餐里的资源、配额和带宽限制',
+            },
+            paid: {
+                title: '付费实例套餐',
+                description: '创建后通过方案设置资源、配额、流量和价格',
+            },
+        },
+        ioMode: {
+            throughput: '读写速率限制',
+            iops: 'IOPS 限制',
+        },
+        hints: {
+            ioLimitMode: 'Incus 仅支持其中一种 IO 限制模式，请选择一种',
+            cpuPriority: '0 为最低优先级，10 为最高优先级',
+            bootPriority: '数值越小越先启动',
+            startupDelay: '实例启动前等待的秒数 (5-600)',
+            shutdownTimeout: '宿主机关机时等待实例关闭的秒数 (30-600)',
+            instanceQuota: '限制用户在此套餐实例上可创建的资源数量',
+            portLimit: '每个实例可创建的端口映射数量上限',
+            snapshotLimit: '每个实例可创建的快照数量上限（0表示无配额）',
+            backupLimit: '每个实例可创建的备份数量上限（0表示无配额）',
+            siteLimit: '每个实例可创建的反代站点数量上限（0表示无配额）',
+            hostStoragePools: '为每个已绑定节点指定默认系统盘存储池；留空时按节点默认规则自动选择',
+            hostTrafficMultiplier: '实例月流量 = 套餐或方案流量 × 此倍率，默认 1',
+            requiredPackage: '选择后，用户需要先拥有该套餐的实例，才能创建此套餐实例',
+            noSystemStoragePools: '此节点当前没有可用于实例系统盘的存储池',
+            instanceType: '容器轻量快速，虚拟机提供完整隔离',
+            publicAccess: '开启后，套餐将对所有用户可见，他们可以使用此套餐创建实例；关闭后套餐将被隐藏/归档',
+            globalMaxInstances: '限制用户最多可开通的实例数量，必须填写 1-5 之间的整数',
+            allowInstanceDeletion: '关闭后，使用此套餐创建的实例将不允许用户删除',
+            freePackageCreationMode: '免费实例无需创建方案，实例会直接继承本页配置。若需要门槛或想按付费实例流程开通，请选择付费实例套餐，创建后添加方案并将价格设置为 0 元。',
+            paidPackageCreationMode: '付费实例会使用方案里的资源、实例配额、流量和价格。本页会隐藏这些会被方案覆盖的项目，并使用默认值保存套餐。',
+        },
+        units: {
+            seconds: '秒',
+        },
+        placeholders: {
+            unlimited: '留空表示无限制',
+            autoStoragePool: '自动选择（未指定）',
+            noPrerequisite: '无前置套餐',
+        },
+        validation: {
+            cpuPriorityRange: 'CPU 优先级必须在 0-10 之间',
+            bootPriorityRange: '启动优先级必须在 0-100 之间',
+            startupDelayRange: '启动延迟必须在 5-600 秒之间',
+            shutdownTimeoutRange: '关机超时时间必须在 30-600 秒之间',
+            portLimitMin: '端口映射数量至少为 1',
+            globalMaxInstancesRange: '公开套餐最大实例数必须是 1-5 之间的整数',
+        },
+        typeHelp: {
+            containerFast: '启动快速，秒级响应',
+            containerLight: '资源占用小，适合大多数 Linux 应用',
+            containerDocker: '支持 Docker（需启用嵌套虚拟化）',
+            vmIsolation: '完整隔离，独立内核',
+            vmKernel: '支持自定义内核和内核模块',
+            vmWindows: '可运行 Windows 等非 Linux 系统',
+        },
+    },
+
+    // 敏感操作二次验证
+    sensitiveVerification: {
+        title: '敏感操作验证',
+        description: '此操作需要二次验证以确保账户安全',
+        operationLabel: '操作类型',
+        requestHint: '点击下方按钮，验证码将发送到您绑定的通知渠道',
+        sendCode: '发送验证码',
+        sendingCode: '发送中...',
+        resendCode: '重新发送',
+        resendIn: '{seconds} 秒后可重新发送',
+        codeSent: '验证码已发送',
+        codeSentTo: '验证码已发送至 {channel}',
+        enterCode: '请输入验证码',
+        codePlaceholder: '000000',
+        verify: '验证',
+        verifying: '验证中...',
+        verifySuccess: '验证成功，请重新执行操作',
+        verifyFailed: '验证失败',
+        codeExpired: '验证码已过期，请重新发送',
+        invalidCode: '验证码无效，请输入6位数字',
+        operationTypes: {
+            change_password: '修改密码',
+            disable_2fa: '禁用双因素认证',
+            change_email: '修改邮箱地址',
+            delete_account: '删除账户',
+            delete_instance: '删除实例',
+            reinstall_instance: '重装实例',
+            recreate_instance: '重建实例',
+            transfer_instance: '转移实例',
+            delete_snapshot: '删除快照',
+            delete_backup: '删除备份',
+        },
+        channels: {
+            email: '邮件',
+            telegram: 'Telegram',
+            discord: 'Discord',
+            webhook: 'Webhook',
+        },
+    },
+
+    // 宿主机 Caddy 管理
+    host: {
+        caddy: {
+            title: 'Caddy 反代',
+            description: '通过 Caddy 为您的实例提供域名反向代理服务，自动申请 SSL 证书。',
+            enabled: '已启用',
+            disabled: '未启用',
+            notInstalled: 'Caddy 尚未安装，请点击下方按钮生成安装命令。',
+            generateCommand: '生成安装命令',
+            installCommand: '安装命令',
+            commandLabel: '在宿主机上执行以下命令',
+            confirmInstalled: '确认已安装',
+            viewCommand: '查看安装命令',
+            resetCredentials: '重置凭据',
+            resetConfirm: '重置凭据后，您需要在宿主机上重新执行安装命令。确定要继续吗？',
+            resetSuccess: '凭据已重置，请在宿主机上重新执行安装命令',
+            resetFailed: '重置凭据失败',
+            testConnection: '测试连接',
+            apiPort: 'API 端口',
+            username: '用户名',
+            password: '密码',
+            publicIp: '公网 IP',
+            sitesCount: '站点数量',
+            loadFailed: '加载 Caddy 状态失败',
+            generateFailed: '生成安装命令失败',
+            confirmSuccess: 'Caddy 已确认安装',
+            confirmFailed: '确认失败',
+            testSuccess: '连接成功',
+            testFailed: '连接失败',
+            installHint: '安装步骤',
+            step1: '复制上方命令，在宿主机上以 root 权限执行',
+            step2: '等待安装完成，应看到 "Caddy Reverse Proxy Ready" 提示',
+            step3: '返回此页面，点击“确认已安装”按钮',
+            // 站点列表
+            sitesList: '反代站点列表',
+            sitesTotalCount: '共 {count} 个站点',
+            loadSitesFailed: '加载站点列表失败',
+            noSites: '暂无反代站点',
+            instance: '实例',
+            targetPort: '目标端口',
+            siteActive: '已激活',
+            sitePending: '待激活',
+            siteError: '错误',
+            siteDisabled: '已禁用',
+            prevPage: '上一页',
+            nextPage: '下一页',
+            pageInfo: '第 {current}/{total} 页，共 {count} 条',
+        },
+        // 节点创建实例
+        createInstance: {
+            title: '创建实例',
+            selfMode: '给自己创建',
+            giftMode: '赠送给用户',
+            selfModeHint: '使用自己的 SSH 密钥和初始化命令，在当前节点上创建免费实例。',
+            giftModeHint: '在当前节点上为其他用户创建实例。付费实例仅支持赠送免费时长，不会扣费。',
+            adminModeHint: '管理员可在当前节点上为指定用户创建免费实例，或赠送付费实例首期时长。',
+            selectPackage: '选择套餐',
+            noPackages: '该节点暂无可用套餐',
+            noPackagesHint: '请先在套餐管理中创建并绑定套餐到此节点',
+            instanceName: '实例名称',
+            giftDaysLabel: '免费赠送天数',
+            giftDaysHint: '仅赠送免费时长，不会从被赠送用户余额扣费。',
+            giftDaysRange: '范围：1-365 天',
+            giftDuration: '赠送时长',
+            giftDurationValue: '免费 {days} 天',
+            giftOnlyFreeHint: '免费期结束后，将按所选方案价格正常续费。',
+            creating: '正在创建...',
+            success: '实例创建成功',
+            giftSuccess: '实例已为用户 {username} 创建',
+            userInactive: '该用户未处于可用状态',
+            cannotGiftToSelf: '如果要给自己创建实例，请切换到“给自己创建”模式',
+        },
+        // 节点所有者通知实例用户
+        notify: {
+            title: '通知用户',
+            sendToUsers: '通知用户',
+            hint: '站内信会立即发送给本节点上所有实例对应的用户，系统会自动去重',
+            hintSelected: '站内信会立即发送给选中的 {count} 个实例对应的用户，系统会自动去重',
+            deliveryHint: '勾选邮件通知后，单个收件人会立即发送邮件；多个收件人会进入队列，并按每分钟 1 封的节奏发送。',
+            messageTitle: '消息标题',
+            titlePlaceholder: '输入消息标题',
+            titleRequired: '请输入消息标题',
+            messageContent: '消息内容',
+            contentPlaceholder: '输入消息内容',
+            contentRequired: '请输入消息内容',
+            sendEmail: '同时发送邮件通知',
+            sendEmailHint: '仅对已设置邮箱的用户发送邮件。批量邮件会自动排队，避免短时间内集中发信。',
+            send: '发送通知',
+            sendSuccess: '已成功发送给 {count} 个用户',
+            sendSuccessBase: '站内信已发送给 {count} 个用户',
+            emailDirectSuccess: '邮件已立即发送 {count} 封',
+            emailQueuedSuccess: '邮件队列已新增 {count} 封',
+            emailSkipped: '{count} 位用户未设置邮箱，已跳过邮件发送',
+            emailFailed: '{count} 封邮件发送或入队失败',
+            sendFailed: '发送失败',
+            // 发送给单个实例用户
+            sendToUser: '发送站内信',
+            sendToUserTitle: '发送站内信给 {username}',
+            sendToUserHint: '消息将发送给实例「{instance}」的所有者',
+            sendToUserSuccess: '消息已发送',
+        },
+        // 修改续费价格
+        price: {
+            editPrice: '修改续费价格',
+            modalTitle: '修改续费价格',
+            hint: '修改实例「{instance}」的续费价格，新价格将于下次续费时生效，本月不受影响。',
+            currentPrice: '当前价格',
+            newPrice: '新价格',
+            placeholder: '输入新的续费价格',
+            effectHint: '新价格将于下次续费时生效，不影响本月剩余时间',
+            minPriceError: '价格不能为负数',
+            samePriceError: '新价格与原价格相同',
+            updateSuccess: '续费价格已更新，已通知用户',
+            updateFailed: '更新失败',
+        },
+        // 批量修改配置
+        batchConfig: {
+            title: '批量修改配置',
+            button: '批量配置',
+            targetAll: '应用范围：宿主机全部 {count} 个实例',
+            targetSelected: '应用范围：已选中的 {count} 个实例',
+            enableFieldHint: '勾选复选框以启用对应字段的修改',
+            // 分类
+            section: {
+                resources: '资源配置',
+                quota: '配额限制',
+                permissions: '容器权限',
+                advanced: '高级配置',
+                io: '存储 I/O 限制',
+                network: '网络限制',
+                process: '进程与调度',
+                boot: '启动设置',
+            },
+            // 字段
+            cpu: 'CPU 核心数',
+            memory: '内存',
+            disk: '硬盘',
+            traffic: '流量',
+            swapEnabled: 'SWAP 开关',
+            swapSize: 'SWAP 大小',
+            portLimit: '端口数量',
+            snapshotLimit: '快照数量',
+            backupLimit: '备份数量',
+            siteLimit: '站点数量',
+            nested: '嵌套虚拟化',
+            privileged: '特权容器',
+            limitsRead: '读取限制',
+            limitsWrite: '写入限制',
+            limitsIngress: '入站限制',
+            limitsEgress: '出站限制',
+            limitsProcesses: '最大进程数',
+            limitsCpuPriority: 'CPU 优先级',
+            bootPriority: '启动优先级',
+            bootAutostart: '开机自启',
+            bootDelay: '启动延迟',
+            shutdownTimeout: '关机超时',
+            // 占位符
+            placeholder: {
+                cpu: '如 1, 2, 4',
+                memory: '如 512, 1024, 2048',
+                disk: '如 10, 20, 50',
+                traffic: '如 100, 500, 1000',
+                swapSize: '如 512, 1024, 2048',
+                limit: '如 5, 10, 20',
+                ioLimit: '如 100MB',
+                priority: '如 5',
+                processLimit: '如 500, 1000',
+                bootPriority: '如 0, 1, 2',
+            },
+            // 状态
+            processing: '正在批量修改配置...',
+            processed: '已处理 {current} / {total}',
+            // 结果
+            success: '成功',
+            failed: '失败',
+            successAll: '批量修改成功，共 {count} 个实例',
+            partial: '部分成功：{success} 成功，{failed} 失败',
+            allFailed: '全部失败',
+            submitFailed: '提交失败',
+            retrySuccess: '重试成功，共 {count} 个实例',
+            retryPartial: '重试部分成功：{success} 成功，{failed} 失败',
+            retryFailed: '重试失败项',
+            failedDetails: '失败详情',
+            instanceName: '实例名称',
+            incusId: 'Incus ID',
+            errorReason: '错误原因',
+            copyIncusIds: '复制失败的 Incus ID',
+            copiedIncusIds: '已复制 {count} 个 Incus ID',
+            // 操作
+            submit: '应用配置 ({count})',
+            close: '关闭',
+            noFieldsEnabled: '请至少启用一个配置字段',
+            noChanges: '没有需要修改的配置',
+        },
+        // 批量迁移实例
+        migrate: {
+            title: '迁移实例到其他节点',
+            button: '改节点',
+            selectedCount: '已选择 {count} 个实例',
+            targetNode: '目标节点',
+            selectTarget: '请选择目标节点',
+            targetImage: '目标系统',
+            selectImage: '请选择目标系统',
+            selectImageRequired: '请选择目标系统',
+            loadImagesFailed: '加载系统列表失败',
+            noImageAvailable: '目标节点无可用系统',
+            imageHint: '迁移会使用该系统重建实例，不再沿用实例旧镜像',
+            instances: '个实例',
+            warning: '迁移注意事项',
+            warningCloudInit: '将重新执行 cloud-init 初始化',
+            warningImage: '实例将使用所选系统重建',
+            warningIp: '实例将获得新的 IP 地址',
+            warningNotify: '迁移完成后将通知用户',
+            confirm: '确认迁移',
+            migrating: '正在迁移...',
+            resultSummary: '成功 {success} 个，失败 {failed} 个',
+            failedInstances: '失败的实例',
+            loadHostsFailed: '加载节点列表失败',
+            selectTargetRequired: '请选择目标节点',
+            noInstancesSelected: '请先选择要迁移的实例',
+            failed: '迁移失败',
+            // 付费实例方案选择
+            targetPlan: '目标方案',
+            selectPlan: '请选择目标方案',
+            selectPlanRequired: '请选择目标方案',
+            loadPlansFailed: '加载方案列表失败',
+            noPlanAvailable: '目标节点无可用方案',
+            planHint: '付费实例将使用新方案的续费价格，保留原到期时间和优惠码',
+        },
+        // 批量赠送时长
+        giftDays: {
+            title: '赠送时长',
+            button: '赠送时长',
+            hint: '为选中的付费实例免费延长到期时间，不扣除任何费用。',
+            confirm: '将为 {count} 个付费实例赠送时长',
+            daysLabel: '赠送天数',
+            daysRange: '范围：1-365 天',
+            confirmButton: '确认赠送',
+            success: '成功为 {count} 个实例赠送 {days} 天',
+            partial: '成功 {success} 个，失败 {failed} 个',
+            failed: '赠送失败',
+            skipped: '跳过了 {count} 个免费实例',
+            noPaidInstances: '请选择付费实例',
+        },
+    },
+
+    // 站内信
+    inbox: {
+        title: '通知中心',
+        description: '查看您的所有系统通知',
+        notifications: '通知',
+        unread: '未读',
+        all: '全部',
+        allCategories: '全部类型',
+        markAllRead: '全部已读',
+        markRead: '标记已读',
+        clearRead: '清空已读',
+        noMessages: '暂无通知',
+        noUnread: '没有未读通知',
+        noCategoryMessages: '该类型暂无消息',
+        viewAll: '查看全部',
+        justNow: '刚刚',
+        minutesAgo: '{n} 分钟前',
+        hoursAgo: '{n} 小时前',
+        daysAgo: '{n} 天前',
+        deleteConfirm: '确定删除这条通知吗？',
+        clearConfirm: '确定清空所有已读通知吗？',
+        deleted: '已删除',
+        cleared: '已清空',
+        markedRead: '已标记为已读',
+        markedAllRead: '已全部标记为已读',
+        currentPageFiltered: '当前页筛选结果：{count} 条',
+        // 消息类别
+        categories: {
+            instance: '实例',
+            snapshot: '快照',
+            backup: '备份',
+            social: '好友',
+            transfer: '转移',
+            package: '套餐',
+            security: '安全',
+            quota: '配额',
+            ticket: '工单',
+            system: '系统',
+        },
+    },
+
+    // 配额释放
+    quotaRelease: {
+        title: '释放配额',
+        packageQuota: '套餐配额',
+        noHosts: '无可用宿主机',
+        noHostsHint: '此套餐未绑定任何宿主机',
+        selectHosts: '选择宿主机',
+        selectAll: '全选',
+        deselectAll: '取消全选',
+        available: '可用',
+        quotaToAdd: '增加配额',
+        preview: '将为 {count} 台宿主机各增加 {cpu}% CPU 和 {memory} 内存',
+        notificationChannel: '通知渠道',
+        noNotification: '不发送通知',
+        notificationHint: '释放配额后，系统会通过此渠道发送通知',
+        selectChannel: '选择通知渠道',
+        bindChannelHint: '仅显示禁用状态的通知渠道，用于资源释放通知',
+        unbindChannel: '解绑',
+        sendNotification: '发送通知',
+        noDisabledChannel: '暂无可用的通知渠道',
+        noDisabledChannelHint: '请先在「个人设置 - 通知」中添加一个渠道并禁用它',
+        channelEnabledWarning: '此渠道已启用，将同时接收系统事件通知',
+        noGlobalChannel: '暂无全局通知渠道',
+        noGlobalChannelHint: '请联系管理员在系统设置中创建全局通知渠道',
+        confirm: '释放配额',
+        success: '成功为 {count} 台宿主机释放配额',
+        failed: '释放配额失败',
+        loadFailed: '加载宿主机信息失败',
+        selectHost: '请至少选择一台宿主机',
+        enterQuota: '请输入要增加的配额',
+        channelUpdated: '通知渠道已更新',
+        channelUpdateFailed: '更新通知渠道失败',
+    },
+
+    // Web 终端
+    terminal: {
+        title: '终端',
+        connecting: '正在连接...',
+        connected: '已连接',
+        disconnected: '已断开连接',
+        failed: '连接失败',
+        connectionFailed: '连接失败',
+        reconnect: '重新连接',
+        requiresRunning: '需要实例处于运行状态',
+        clear: '清屏',
+        fullscreen: '全屏',
+        exitFullscreen: '退出全屏',
+        fontSize: '字体大小',
+        fontSizeIncrease: '增大字体',
+        fontSizeDecrease: '缩小字体',
+        connectionError: '连接错误',
+        reconnecting: '正在重新连接...',
+        close: '关闭终端',
+        disconnect: '断开连接',
+        modeExec: 'Shell',
+        modeConsole: '控制台',
+        modeBootConsole: '启动控制台',
+        modeSwitching: '切换到 Shell',
+        modeUnknown: '未知模式',
+        consoleFallback: '当前已回退到控制台模式',
+        consoleFallbackHint: '该虚拟机未能进入 Shell 模式，当前使用的是串口控制台。若体验异常，请检查 qemu-guest-agent、cloud-init 和串口登录配置。',
+        switchingToShell: '正在切换到 Shell...',
+        switchingToShellHint: 'Shell 已就绪，终端正在从启动控制台切换到交互式 Shell。',
+        shellReadyNotice: '已进入 Shell',
+        shellReadyHint: '启动控制台已完成，当前终端已切换到交互式 Shell。',
+        consoleOnlyHint: '当前仍处于控制台模式，Shell 尚未就绪或正在重连。',
+        instanceInfo: '实例: {name}',
+        statusConnecting: '连接中',
+        statusConnected: '已连接',
+        statusDisconnected: '未连接',
+        statusError: '错误',
+        escToClose: '按 Esc 关闭',
+        pressCtrlShiftFToSearch: '按 Ctrl+Shift+F 搜索',
+        searchPlaceholder: '搜索...',
+        searchNext: '下一个',
+        searchPrevious: '上一个',
+        restore: '恢复终端',
+        exportLog: '导出日志',
+        // 多标签
+        tab: '标签',
+        newTab: '新建标签',
+        closeTab: '关闭标签',
+        maxTabsReached: '已达到最大标签数',
+        // 右键菜单
+        contextMenu: {
+            copy: '复制',
+            paste: '粘贴',
+            selectAll: '全选',
+        },
+        // Cloud-init 状态
+        cloudInitChecking: '正在检查实例初始化状态...',
+        cloudInitInProgress: '实例正在初始化中',
+        cloudInitInProgressHint: '实例正在运行 Cloud-init 初始化，可能需要等待 10-60 秒。请稍后点击“重新检查”尝试连接。',
+        cloudInitUnknown: 'Cloud-init 状态待确认',
+        cloudInitUnknownHint: '当前无法可靠检测 KVM 实例内的 Cloud-init 状态。你可以继续连接，或手动标记为已完成。',
+        cloudInitRetry: '重新检查',
+        cloudInitSkip: '忽略并连接',
+        cloudInitManualComplete: '手动标记完成',
+        cloudInitManualCompleteSuccess: '已手动标记该实例初始化为完成',
+        // 移动端提示
+        mobileKeyboardHint: '请切换至英文键盘以获得最佳体验',
+        // 帮助
+        help: '帮助',
+        helpTitle: '终端使用帮助',
+        helpShortcuts: '快捷键',
+        helpShortcutSearch: '搜索内容',
+        helpShortcutCopy: '复制选中',
+        helpShortcutPaste: '粘贴',
+        helpShortcutFontIncrease: '增大字体',
+        helpShortcutFontDecrease: '缩小字体',
+        helpShortcutFontReset: '重置字体',
+        helpShortcutExport: '导出日志',
+        helpShortcutNewTab: '新建标签',
+        helpShortcutCloseTab: '关闭标签',
+        helpMouseOps: '鼠标操作',
+        helpMouseSelect: '拖动选中文本',
+        helpMouseCopy: '右键菜单复制/粘贴',
+        helpMouseScroll: '滚轮滚动历史',
+        helpTouchOps: '触控操作',
+        helpTouchPinchZoom: '双指捨合调整字体大小',
+        helpTouchSwipeScroll: '单指滑动滚动历史',
+        // 设置面板
+        settings: '设置',
+        settingBell: '终端提示音',
+        settingBellDesc: '程序发出提醒时播放声音（如命令完成、错误警告等）',
+        settingAutoCopy: '选中自动复制',
+        settingAutoCopyDesc: '选中文本后自动复制到剪贴板',
+        settingLinkPreview: '链接预览',
+        settingLinkPreviewDesc: '鼠标悬停在链接上时显示 URL',
+        settingTouch: '触控优化',
+        settingTouchDesc: '启用移动端手势支持（双指缩放等）',
+        settingTheme: '终端主题',
+        settingThemeDesc: '选择终端的配色方案',
+        themeDark: '深色',
+        themeLight: '浅色',
+        themeHighContrast: '高对比度',
+        currentStatus: '当前状态',
+        latency: '延迟',
+        savedCommands: {
+            cloud: '云端同步',
+            title: '快捷命令',
+            subtitle: '保存常用命令，随时发送到当前终端',
+            add: '新建',
+            synced: '云端保存',
+            encrypted: '加密存储',
+            count: '共 {count} 条',
+            collapse: '收起快捷命令',
+            expand: '展开快捷命令',
+            open: '打开快捷命令',
+            short: '命令',
+            new: '新建命令',
+            edit: '编辑命令',
+            name: '名称',
+            namePlaceholder: '例如：更新软件源',
+            command: '命令内容',
+            commandPlaceholder: '输入要保存到云端的终端命令',
+            description: '备注',
+            descriptionPlaceholder: '可选备注，说明这条命令做什么',
+            loadFailed: '加载快捷命令失败',
+            createSuccess: '快捷命令已保存',
+            updateSuccess: '快捷命令已更新',
+            saveFailed: '保存快捷命令失败',
+            deleteSuccess: '快捷命令已删除',
+            deleteFailed: '删除快捷命令失败',
+            deleteConfirm: '确定删除“{name}”吗？',
+            emptyTitle: '还没有快捷命令',
+            emptyDescription: '点击右上角“新建”保存常用命令。',
+            selected: '已选中：{name}',
+            notSelected: '选择一条快捷命令后可执行或删除',
+            execute: '执行',
+            runHint: '会直接发送到当前激活终端并立即执行。',
+            disconnectedHint: '当前终端未连接，连接成功后才可执行命令',
+            shellRequiredHint: '当前还未进入 Shell，Shell 就绪后才可执行快捷命令',
+        },
+        // 移动端快捷工具栏
+        paste: '粘贴',
+        hideKeyboard: '收起键盘',
+    },
+
+    // 终端管理页面
+    terminalPage: {
+        newConnection: '新建连接',
+        selectInstance: '选择实例',
+        runningCount: '运行中实例 {count} 台',
+        selectedInstance: '当前选择',
+        selectionHint: '请选择一个运行中的实例，终端会直接连入该实例。',
+        directShell: '控制台优先连接',
+        directShellHint: '终端会先附着启动控制台，并在交互式 Shell 就绪后自动切换。',
+        host: '节点',
+        package: '套餐',
+        instanceId: '实例 ID',
+        statusRunning: '运行中',
+        noConnections: '暂无终端连接',
+        noRunningInstances: '没有运行中的实例',
+        noRunningInstancesHint: '请先启动一个实例，或回到实例详情页确认运行状态。',
+        connect: '连接',
+        description: '管理所有实例的终端连接',
+        searchInstances: '搜索实例名称或镜像...',
+        noMatchingInstances: '没有匹配的实例',
+        noMatchingInstancesHint: '换个关键词试试，或清空搜索条件查看全部运行中实例。',
+    },
+
+    // 工单系统
+    tickets: {
+        title: '工单中心',
+        myTickets: '我的工单',
+        hostTickets: '收到的工单',
+        createTicket: '创建工单',
+        newTicket: '新建工单',
+        ticketDetails: '工单详情',
+        noTickets: '暂无工单',
+        noTicketsHint: '您还没有创建任何工单',
+        noHostTickets: '暂无收到的工单',
+        noHostTicketsHint: '您的宿主机没有收到任何工单',
+        noUserTickets: '暂无用户工单',
+        noUserTicketsHint: '当前没有未绑定实例、直接发给管理员的用户工单',
+        noOfficialTickets: '暂无自营工单',
+        noOfficialTicketsHint: '当前没有来自自营节点的工单',
+        noHostedTickets: '暂无托管工单',
+        noHostedTicketsHint: '当前没有来自托管节点的工单',
+        // 工单状态
+        status: {
+            open: '待处理',
+            in_progress: '处理中',
+            resolved: '已解决',
+            closed: '已关闭',
+        },
+        // 工单优先级
+        priority: {
+            low: '低',
+            normal: '普通',
+            high: '高',
+            urgent: '紧急',
+        },
+        // 工单分类
+        category: {
+            general: '常规咨询',
+            billing: '计费问题',
+            technical: '技术支持',
+            abuse: '滥用举报',
+        },
+        // 表单
+        subject: '主题',
+        subjectPlaceholder: '简要描述问题',
+        content: '内容',
+        contentPlaceholder: '请至少写 10 个字，详细描述您的问题，或上传图片附件',
+        selectInstance: '选择实例',
+        selectInstanceHint: '选择实例（可选）',
+        noInstancesHint: '您还没有实例，可直接提交工单',
+        hostedInstanceHint: '如需针对托管实例提交工单，请务必选择对应实例，工单将发送至该节点负责人处理。',
+            hostedInstanceHintTitle: '托管实例提示',
+        selectCategory: '选择分类',
+        selectPriority: '选择优先级',
+        // 操作
+        reply: '回复',
+        replyPlaceholder: '输入回复内容...',
+        close: '关闭工单',
+        reopen: '重新开启',
+        updateStatus: '更新状态',
+        markResolved: '标记为已解决',
+        markInProgress: '标记为处理中',
+        // 确认对话框
+        confirmClose: '确认关闭工单？',
+        confirmCloseHint: '关闭后将无法继续回复',
+        // 消息
+        createSuccess: '工单创建成功',
+        replySuccess: '回复成功',
+        closeSuccess: '工单已关闭',
+        deleteMessage: '删除消息',
+        confirmDeleteMessage: '确定要删除这条消息吗？删除后所有人都将无法查看。',
+        deleteMessageSuccess: '消息已删除',
+        statusUpdated: '状态已更新',
+        // 其他
+        host: '宿主机',
+        instance: '实例',
+        from: '来自',
+        assignedTo: '分配给',
+        createdAt: '创建时间',
+        lastReply: '最后回复',
+        messages: '消息',
+        viewDetails: '查看详情',
+        pendingCount: '待处理',
+        allHosts: '所有宿主机',
+        filterByHost: '按宿主机筛选',
+        filterByStatus: '按状态筛选',
+        sourceFilter: {
+            all: '全部工单',
+            user: '用户工单',
+            official: '自营工单',
+            hosted: '托管工单',
+        },
+        activeStatus: '活跃',
+        allStatus: '全部',
+        ownerReply: '客服回复',
+        userReply: '用户回复',
+        ticketClosed: '工单已关闭，无法回复',
+        mustSelectInstance: '请先选择实例',
+        noInstancesAvailable: '没有可用的实例',
+        instanceDetails: '实例详情',
+        instanceStatus: '状态',
+        instanceId: '实例ID',
+        incusId: 'Incus ID',
+        packageName: '套餐',
+        cores: '核',
+        memory: '内存',
+        disk: '硬盘',
+        image: '镜像',
+        loadMoreMessages: '加载更多消息',
+        remaining: '条剩余',
+        needsReply: '需要回复',
+        searchPlaceholder: '搜索工单ID、主题、用户名...',
+        perPage: '每页',
+        totalCount: '共 {count} 条',
+        images: {
+            label: '图片附件',
+            hint: '支持 JPG、PNG、WebP、GIF、AVIF，最多 {count} 张，每张不超过 {size}MB',
+            add: '添加图片',
+            remove: '移除图片',
+            selected: '已选择 {count}/{max} 张图片',
+            maxReached: '最多只能上传 {count} 张图片',
+            invalidType: '仅支持 JPG、PNG、WebP、GIF、AVIF 图片',
+            fileTooLarge: '单张图片不能超过 {size}MB',
+            loadFailed: '图片加载失败',
+            zoomIn: '放大',
+            zoomOut: '缩小',
+            resetZoom: '重置缩放',
+        },
+    },
+
+    // 签到系统
+    checkin: {
+        title: '每日签到',
+        checkinTab: '签到',
+        redeemTab: '兑换',
+        recordsTab: '记录',
+        // 签到状态
+        notCheckedIn: '今日尚未签到',
+        alreadyCheckedIn: '今日已签到',
+        checkinButton: '签到',
+        checkinSuccess: '签到成功',
+        noInstance: '您需要至少拥有一个实例才能签到',
+        clickToOpen: '点击礼盒抽取今日奖励',
+        opening: '开启中',
+        revealing: '揭晓奖励',
+        congratulations: '恭喜您获得以下奖励',
+        // 兑换码
+        redeemCode: '兑换码',
+        codeExpired: '已过期',
+        codeUsed: '已使用',
+        expiresIn: '剩余时间',
+        copyCode: '复制兑换码',
+        codeCopied: '兑换码已复制',
+        // 资源类型
+        resourceType: '资源类型',
+        resourceValue: '资源数值',
+        cpu: 'CPU',
+        memory: '内存',
+        disk: '硬盘',
+        traffic: '流量',
+        points: '积分',
+        // 兑换
+        redeemTitle: '兑换兑换码',
+        inputCode: '请输入兑换码',
+        selectInstance: '选择实例',
+        selectInstanceHint: '选择要兑换资源的免费实例',
+        redeemButton: '兑换',
+        redeemSuccess: '兑换成功',
+        cappedFromPackageLimit: '已达套餐上限',
+        redeemHint: '签到兑换码仅可用于免费实例',
+        alreadyRedeemed: '今日签到码已兑换过',
+        noInstancesForRedeem: '没有可用的免费实例',
+        // 记录
+        checkinRecords: '签到记录',
+        redeemRecords: '兑换记录',
+        noRecords: '暂无记录',
+                showingRecent: '显示最近 {count} 条，共 {total} 条',
+        usedBy: '使用者',
+        usedFor: '兑换实例',
+        self: '自己',
+        others: '他人',
+        unused: '未使用',
+        // 分享规则
+        selfOnlyMode: '仅限自用',
+        selfOnlyHint: '您的兑换码已连续两天被他人使用，从今天起只能自己使用，直到您自己使用一次',
+                // 规则说明
+                rulesTitle: '签到说明',
+                rulesCheckin: '签到规则',
+                rulesCheckin1: '每日 1 次，0 点重置',
+                rulesCheckin2: '需拥有至少 1 个实例',
+                rulesCheckin3: '随机获得 CPU / 内存 / 硬盘 / 流量 奖励',
+                rulesRedeem: '兑换规则',
+                rulesRedeem1: '兑换码有效期 3 小时',
+                rulesRedeem2: '每人每日限兑换 1 次',
+                rulesRedeem3: '资源不能超过套餐上限',
+                rulesShare: '分享',
+                rulesShare1: '兑换码可分享给好友使用',
+                rulesShare2: '连续 2 天被他人使用将限制为仅自己可用，直到再次自己使用后解除',
+        // 单位
+        percent: '%',
+        mb: 'MB',
+        gb: 'GB',
+        // 资源池系统新增
+        tabCheckin: '签到',
+        tabRedeem: '兑换',
+        tabPool: '资源池',
+        tabLogs: '记录',
+        clickToCheckin: '点击签到领取奖励',
+        noInstances: '您需要至少拥有一个实例才能签到',
+        bonusPoints: '额外获得 {points} 积分',
+        savedToPool: '已存入资源池',
+        redeemSystemCode: '系统兑换码',
+        enterCode: '请输入兑换码',
+        systemCodePlaceholder: '输入 h- 开头的系统兑换码',
+        systemCodeHint: '系统兑换码（h-前缀）需选择目标实例，资源将直接应用到该实例',
+        redeem: '兑换',
+        redeemToInstanceSuccess: '{type} +{value}{unit} 已应用到 {instance}',
+        applyToInstance: '应用资源到实例',
+        amount: '数量',
+        targetInstance: '目标实例',
+        kvmCpuHint: 'CPU参数兑换到KVM实例时，必须是100的整数倍',
+        kvmHint: 'KVM实例限制：CPU必须是100的倍数，内存必须是128MB的倍数，硬盘必须是1GB的倍数，且调整内存/硬盘需先停止实例。LXC实例无此限制。',
+        apply: '应用',
+        applySuccess: '{type} +{value}{unit} 已应用到 {instance}',
+        insufficientPool: '资源池余额不足',
+        enterAmount: '请输入数量',
+        allActions: '全部操作',
+        allResources: '全部资源',
+        noLogs: '暂无记录',
+        action: '操作',
+        instance: '实例',
+        time: '时间',
+        actionCheckin: '签到',
+        actionRedeem: '兑换',
+        actionAdminGrant: '管理员赠送',
+        actionSystemGrant: '系统奖励',
+        actionLottery: '抽奖',
+        actionApply: '应用',
+        actionSystemRedeem: '系统兑换码',
+    },
+
+    // 兑换码管理
+    redeemCodes: {
+        title: '兑换码管理',
+        create: '创建兑换码',
+        createTitle: '创建兑换码',
+        createBatch: '批量创建',
+        codeType: '资源类型',
+        codeValue: '资源数值',
+        resourceType: '资源类型',
+        resourceValue: '资源数值',
+        maxUses: '最大使用次数',
+        usedCount: '已使用',
+        expiresAt: '过期时间',
+        expiresAtHint: '留空表示永不过期',
+        neverExpires: '永不过期',
+        enabled: '已启用',
+        disabled: '已禁用',
+        enable: '启用',
+        disable: '禁用',
+        remark: '备注',
+        remarkPlaceholder: '可选备注信息',
+        batchCount: '生成数量',
+        batchCountHint: '数量大于1时将批量生成一次性兑换码',
+        createSuccess: '兑换码创建成功',
+        batchCreateSuccess: '成功创建 {count} 个兑换码',
+        createFailed: '创建失败',
+        deleteConfirm: '确认删除',
+        deleteSuccess: '成功删除 {count} 个兑换码',
+        deleteFailed: '删除失败',
+        confirmDelete: '确认删除',
+        confirmDeleteMessage: '确定要删除选中的 {count} 个兑换码吗？此操作不可撤销。',
+        deleteSelected: '删除选中 ({count})',
+        updateSuccess: '更新成功',
+        copyCode: '复制兑换码',
+        copyAll: '复制全部',
+        copyCodes: '复制所有兑换码',
+        codesCopied: '兑换码已复制',
+        exhausted: '已用完',
+        expired: '已过期',
+        active: '有效',
+        paused: '已暂停',
+        usages: '使用记录',
+        usageRecords: '使用记录',
+        noUsages: '暂无使用记录',
+        user: '用户',
+        instance: '实例',
+        usedAt: '使用时间',
+        selectType: '选择资源类型',
+        selectValue: '请选择资源数值',
+        empty: '暂无兑换码',
+        emptyList: '暂无兑换码，点击上方按钮创建',
+        filterAll: '全部',
+        filterEnabled: '已启用',
+        filterDisabled: '已禁用',
+        batchDelete: '批量删除',
+        batchDeleteConfirm: '确定要删除选中的 {count} 个兑换码吗？',
+        usesHint: '设为 1 表示一次性兑换码',
+        batchHint: '批量创建只能生成一次性兑换码',
+        batchResult: '批量创建结果',
+        code: '兑换码',
+        type: '类型',
+        usage: '使用情况',
+        status: '状态',
+        actions: '操作',
+        loadFailed: '加载失败',
+        batchId: '批次 ID',
+        batchLimitHint: '同一批次的兑换码，每个用户只能使用一张',
+        batch: '批次',
+        valueRange: '范围：{min} - {max}',
+        valueOutOfRange: '数值必须在 {min} 到 {max} 之间',
+        valueMustBeInteger: '数值必须为整数',
+    },
+
+    // 扩展
+    extensions: {
+        title: '脚本',
+        description: '管理扩展功能',
+        initCommands: {
+            title: '自定义初始化命令',
+            description: '创建命令模板，在实例创建/重装时执行',
+            add: '添加命令',
+            addFirst: '添加第一个命令',
+            edit: '编辑命令',
+            view: '查看详情',
+            viewDetail: '命令详情',
+            empty: '暂无自定义命令',
+            emptyHint: '点击上方按钮创建第一个初始化命令模板',
+            name: '名称',
+            namePlaceholder: '输入命令名称',
+            command: '命令内容',
+            commandPlaceholder: '输入 Shell 命令，每行一条\n示例：\napt update\napt install -y nginx',
+            commandHint: '每行一条命令，实例初始化时按顺序执行',
+            distros: '适配发行版',
+            distrosHint: '选择此命令兼容的 Linux 发行版',
+            remark: '备注',
+            remarkPlaceholder: '可选描述',
+            createdAt: '创建时间',
+            actions: '操作',
+            status: '状态',
+            statusEnabled: '已启用',
+            statusDisabled: '已禁用',
+            enabled: '命令已启用',
+            disabled: '命令已禁用',
+            clickToEnable: '点击启用',
+            clickToDisable: '点击禁用',
+            toggleFailed: '切换状态失败',
+            confirmDelete: '确定要删除命令「{name}」吗？此操作不可撤销。',
+            createSuccess: '命令创建成功',
+            updateSuccess: '命令更新成功',
+            deleteSuccess: '命令已删除',
+            createFailed: '创建失败',
+            updateFailed: '更新失败',
+            deleteFailed: '删除失败',
+            loadFailed: '加载命令失败',
+            loadDetailFailed: '加载命令详情失败',
+            noContent: '无内容',
+            lineCount: '{count} 行',
+            // Modal
+            addTitle: '添加初始化命令',
+            editTitle: '编辑初始化命令',
+            modalDesc: '命令将在实例初始化时执行',
+            // Selector
+            selectTitle: '初始化命令',
+            optional: '(可选)',
+            noAvailable: '暂无可用的初始化命令',
+            goToManage: '前往扩展页面创建',
+            selectHint: '已选命令将在实例初始化完成后执行',
+            selectedCount: '已选择 {count} 个',
+            showAll: '展开全部 {count} 条',
+            collapse: '收起',
+            // Distro names
+            distroAll: '所有发行版',
+            distroNames: {
+                all: '所有发行版',
+                ubuntu: 'Ubuntu',
+                debian: 'Debian',
+                rhel: 'RHEL/CentOS/Fedora',
+                alpine: 'Alpine',
+                arch: 'Arch Linux',
+                suse: 'openSUSE/SLES',
+            },
+        },
+    },
+
+    // 计费管理
+    billing: {
+        // 通用
+        balance: '余额',
+        frozen: '冻结',
+        totalRecharge: '累计充值',
+        totalConsume: '累计消费',
+        yuan: '元',
+        months: '个月',
+        month: '月',
+        save: '节省',
+        days: '天',
+        freeInstance: '免费实例',
+        paidInstance: '付费实例',
+        traffic: '月流量',
+        trafficBidirectional: '双向',
+        soldOut: '售罄',
+        setupFee: '开通费',
+        cycle: {
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            annual: '年付',
+            months: '个月',
+        },
+        
+        // 实例计费信息
+        billingInfo: '计费信息',
+        currentPlan: '当前方案',
+        expiresAt: '到期时间',
+        neverExpires: '永不过期',
+        autoRenew: '自动续费',
+        autoRenewOn: '自动开',
+        autoRenewOff: '自动关',
+        autoRenewEnabled: '已开启自动续费',
+        autoRenewDisabled: '已关闭自动续费',
+        autoRenewing: '自动续费',
+        enableAutoRenew: '开启自动续费',
+        disableAutoRenew: '关闭自动续费',
+        autoRenewHint: '到期前 24 小时将自动从余额扣款续费',
+        autoRenewDesc: '开启自动续费后，实例将在到期前自动按 {cycle} 周期续费，每次续费 ￥{price}',
+        currentStatus: '当前状态',
+        
+        // 续费
+        renew: '续费',
+        renewInstance: '实例续费',
+        renewTitle: '续费实例',
+        selectRenewPeriod: '选择续费时长',
+        renewMonths: '{months} 个月',
+        renewPrice: '续费金额',
+        originalPrice: '原价',
+        affDiscount: '优惠码折扣',
+        actualPrice: '实付金额',
+        newExpiresAt: '续费后到期',
+        currentBalance: '当前余额',
+        balanceAfterRenew: '续费后余额',
+        insufficientBalance: '余额不足',
+        goRecharge: '前往充值',
+        renewing: '续费中...',
+        renewSuccess: '续费成功',
+        renewFailed: '续费失败',
+        freeInstanceNoRenew: '免费实例无需续费',
+        hostingRenewTooEarly: '托管实例仅可在到期前 7 天内续费（当前剩余 {days} 天）',
+        
+        // 升降级
+        changePlan: '升级',
+        changePlanTitle: '变更套餐方案',
+        upgrade: '升级',
+        selectNewPlan: '选择新方案',
+        currentPlanLabel: '当前方案',
+        newPlanLabel: '新方案',
+        remainingDays: '剩余天数',
+        remainingValue: '剩余价值',
+        newPlanCost: '新方案费用',
+        priceDiff: '差价',
+        needPay: '需要支付',
+        noPriceChange: '无需补差价',
+        isUpgrade: '升级',
+        planNotActive: '方案已下架',
+        planNoStock: '方案已售罄',
+        changePlanInProgress: '升级方案中...',
+        changePlanSuccess: '方案升级成功',
+        changePlanFailed: '方案升级失败',
+        needRestart: '请重启实例以应用新配置',
+        newConfig: '新配置',
+        freeInstanceNoChange: '免费实例不支持升级',
+        samePlan: '不能切换到相同方案',
+        // 变更规则
+        viewRules: '变更规则',
+        hideRules: '收起规则',
+        changePlanRulesTitle: '方案升级规则',
+        changePlanRule1: '按日价计算差价，升级补差价',
+        changePlanRule2: '剩余天数 ≥ 15 天才可升级方案',
+        changePlanRule3: '到期时间保持不变',
+        changePlanRule4: '优惠码折扣继续享受',
+        // 已是最高方案
+        alreadyHighestPlan: '当前已是最高方案',
+        contactForCustomPlan: '更高配置可提交工单定制',
+        // KVM/LXC 重启提示
+        kvmRestartHint: 'KVM 实例升级后需重启以应用新配置；若使用过重装脚本，可能需自行扩容分区',
+        lxcInstantHint: 'LXC 实例升级后配置即时生效',
+        kvmRestartRequired: 'KVM 实例方案已变更，请重启实例以应用新配置',
+        // 不能变更原因
+        cannotChange: '暂时无法升级',
+        cannotChangeRemainingDays: '剩余天数不足 {days} 天，无法升级方案',
+        cannotChangeInstanceStatus: '当前实例状态不允许升级方案，仅运行中或已停止的实例可以操作',
+        cannotChangeUnknown: '当前无法升级方案',
+        // 计算详情
+        oldDailyPrice: '原方案日价',
+        newDailyPrice: '新方案日价',
+        day: '天',
+        newPlanCostOriginal: '新方案剩余费用',
+        newPlanCostFinal: '新方案剩余费用（折后）',
+        discountAmount: '优惠码折扣',
+        
+        // 计费记录
+        records: '计费记录',
+        billingRecords: '计费记录',
+        recordType: '类型',
+        recordAmount: '金额',
+        recordPeriod: '账期',
+        recordRemark: '备注',
+        recordTypes: {
+            purchase: '购买',
+            renewal: '续费',
+            upgrade: '升级',
+            downgrade: '降级',
+            admin_extension: '管理员延期',
+        },
+        
+        // 充值
+        recharge: '充值',
+        rechargeTitle: '账户充值',
+        rechargeAmount: '充值金额',
+        actualAmount: '实际到账',
+        fee: '手续费',
+        minAmount: '最低充值',
+        maxAmount: '最高充值',
+        selectPaymentMethod: '选择支付方式',
+        noPaymentProviders: '暂无可用支付渠道',
+        createOrder: '创建订单',
+        creatingOrder: '创建订单中...',
+        orderCreated: '订单已创建',
+        orderNo: '订单号',
+        orderStatus: '订单状态',
+        orderExpiredAt: '支付截止时间',
+        cancelOrder: '取消订单',
+        orderCancelled: '订单已取消',
+        orderStatus_pending: '待支付',
+        orderStatus_paid: '已支付',
+        orderStatus_completed: '已完成',
+        orderStatus_failed: '已失败',
+        orderStatus_cancelled: '已取消',
+        orderStatus_expired: '已过期',
+        orderStatus_refunded: '已退款',
+        
+        // 充值记录
+        rechargeRecords: '充值记录',
+        noRecords: '暂无记录',
+        viewDetails: '查看详情',
+        
+        // 余额记录
+        balanceLogs: '余额明细',
+        balanceLogTypes: {
+            recharge: '充值',
+            purchase: '购买',
+            renewal: '续费',
+            upgrade: '升级',
+            downgrade: '降级',
+            refund: '退款',
+            admin_adjust: '管理员调整',
+        },
+        
+        // 套餐方案
+        plan: '方案',
+        planName: '方案名称',
+        planPrice: '价格',
+        planBillingCycle: '账期',
+        planConfig: '配置',
+        planStock: '库存',
+        planSoldOut: '已售罄',
+        planInactive: '已下架',
+        billingCycleMonthly: '月付',
+        billingCycleQuarterly: '季付',
+        billingCycleYearly: '年付',
+        perMonth: '/月',
+        perQuarter: '/季',
+        perYear: '/年',
+    },
+
+    // 托管准入
+    hosting: {
+        accessDenied: {
+            title: '暂不满足托管条件',
+            description: '您需要满足以下条件才能使用托管功能：',
+            condition: '至少拥有过 1 台实例',
+            currentInstances: '当前拥有 {count} 台实例',
+            hint: '实例包括免费和付费实例，官方直营和托管节点均可。',
+            featureHiddenCondition: '托管功能暂未向新用户开放',
+            featureHiddenCurrent: '您还没有创建过节点，当前入口已被系统隐藏。',
+            featureHiddenHint: '如需使用托管功能，请联系管理员开放，或在功能重新开放后再试。',
+        },
+    },
+
+    // 托管收益
+    hostingWallet: {
+        title: '托管收益',
+        description: '查看您的节点托管收益和提现记录',
+        hostingMember: '托管者会员',
+        notice: {
+            title: '托管公告',
+        },
+        // 余额概览
+        balance: {
+            available: '可用余额',
+            frozen: '冻结中',
+            frozenNote: '收入冻结30天后解冻',
+            totalIncome: '累计收入',
+        },
+        // 统计信息
+        stats: {
+            myHostsCount: '托管节点',
+            instancesOnMyHosts: '节点实例',
+            uniqueCustomersCount: '客户数',
+            monthIncome: '本月收入',
+        },
+        // 提现相关
+        withdraw: {
+            button: '申请提现',
+            minAmountNote: '可用余额达到 {amount} 后可提现',
+        },
+        // 选项卡
+        tabs: {
+            overview: '概览',
+            logs: '收支明细',
+            withdrawals: '提现记录',
+            blocks: '黑名单',
+        },
+        // 概览内容
+        overview: {
+            title: '提现说明',
+            howItWorks: '收益流程',
+            step1Title: '用户购买实例',
+            step1Desc: '用户在您的节点上购买/续费实例',
+            step2Title: '收入冻结',
+            step2Desc: '收益计入托管余额，冻结30天',
+            step3Title: '解冻提现',
+            step3Desc: '冻结期满后可申请提现',
+            minAmountTitle: '最低提现',
+            minAmount: '最低提现金额 {amount}',
+            feeTitle: '提现手续费',
+            feeDesc: '提现到面板余额手续费 {rate}%',
+            feeDescNew: '提现到面板余额手续费 5%，提现到指定方式手续费 10%',
+            manualTitle: '手动提现',
+            manualDesc: '如需提现到其他方式（手续费 10%），请提交工单申请',
+            withdrawMethodTitle: '提现方式',
+            withdrawMethodDesc: '自助提现至余额或发送工单申请其他提现方式',
+        },
+        // 收支明细
+        logs: {
+            noRecords: '暂无收支记录',
+            emptyHint: '当用户在您的节点上购买实例后，收益将显示在这里',
+            searchPlaceholder: '搜索用户名/邮箱/实例名...',
+            filterAll: '全部类型',
+            freePlan: '免费',
+            columns: {
+                type: '类型',
+                amount: '金额',
+                status: '状态',
+                buyer: '购买者',
+                instance: '实例',
+                host: '节点',
+                package: '套餐',
+                plan: '方案',
+                remark: '备注',
+                time: '时间',
+            },
+            types: {
+                income: '收入',
+                unfreeze: '解冻',
+                withdraw: '提现',
+                deduction: '扣除',
+            },
+            actionTypes: {
+                purchase: '开通',
+                renew: '续费',
+                upgrade: '升级',
+                destroy: '销毁',
+                unfreeze: '解冻',
+                withdraw: '提现',
+                admin_adjust: '管理员调整',
+            },
+            status: {
+                frozen: '冻结中',
+                unfrozen: '已解冻',
+            },
+            unknownInstance: '未知实例',
+            unknownUser: '未知用户',
+            unknownHost: '未知节点',
+        },
+        // 每页条数
+        perPage: '条/页',
+        // 分页按钮
+        prevPage: '上一页',
+        nextPage: '下一页',
+        // 提现记录
+        withdrawals: {
+            noRecords: '暂无提现记录',
+            emptyTitle: '还没有提现记录',
+            emptyHint: '当您的可用余额达到最低提现金额后，可以申请提现',
+            startEarning: '立即提现',
+            columns: {
+                amount: '金额',
+                actualAmount: '实际到账',
+                target: '提现方式',
+                status: '状态',
+                time: '申请时间',
+            },
+            target: {
+                balance: '面板余额',
+            },
+            status: {
+                pending: '待审核',
+                approved: '已通过',
+                rejected: '已拒绝',
+                completed: '已完成',
+            },
+        },
+        blocks: {
+            title: '用户黑名单',
+            description: '被拉黑用户无法在开通实例处看到您的托管套餐和方案，也无法新开通您的实例。',
+            total: '共 {count} 位用户',
+            searchLabel: '搜索站内用户',
+            searchPlaceholder: '输入 UID、用户名或邮箱，至少 2 个字符',
+            noSearchResults: '没有找到匹配的用户',
+            blockedUsers: '已拉黑用户',
+            effectHint: '这些用户无法新开通您的托管套餐，已有实例和续费不受影响。',
+            emptyTitle: '暂无拉黑用户',
+            emptyHint: '可以通过上方搜索添加。',
+            block: '拉黑',
+            unblock: '解除拉黑',
+            blockSuccess: '已加入黑名单',
+            unblockSuccess: '已移出黑名单',
+        },
+        // 提现弹窗
+        modal: {
+            title: '申请提现',
+            amount: '提现金额',
+            availableNote: '可用余额：{amount}',
+            targetBalance: '提现到面板余额（手续费 {rate}%）',
+            manualWithdrawNote: '如需手动提现到指定方式（手续费 10%），请提交工单申请提现托管余额',
+            summary: {
+                amount: '提现金额',
+                fee: '手续费',
+                actual: '实际到账',
+            },
+            cancel: '取消',
+            confirm: '确认提现',
+            submitting: '提交中...',
+        },
+        // 错误信息
+        errors: {
+            minAmount: '最低提现金额为 {amount}',
+            exceedBalance: '提现金额超过可用余额',
+        },
+    },
+
+    vipBenefits: {
+        commonMember: '普通会员',
+        overviewLabel: 'VIP 福利大厅',
+        overviewTitle: '当前等级 {level}',
+        overviewDesc: '达到最高 {level}，即可领取下方已解锁等级的全部奖励。请先领完低等级福利，再领取更高等级福利。',
+        noVipDesc: '升级 VIP 后可领取等级福利，所有奖品会按等级从低到高展示。',
+        availableSummary: '已解锁奖励汇总',
+        availableSummaryDesc: '这里汇总当前等级已解锁的全部奖励额度。',
+        remainingSummary: '剩余可领取',
+        noAvailableReward: '暂无已解锁奖励',
+        empty: '暂无 VIP 福利，请稍后再来。',
+        levelRewards: 'VIP{level} 奖励',
+        levelUnlocked: '已达到该等级',
+        levelLocked: '升级后可领取',
+        rewardCount: '{count} 个奖品',
+        rewardValue: '奖励内容',
+        claimProgress: '领取进度',
+        claim: '领取',
+        claimAll: '一键领取剩余奖励',
+        claimingAll: '正在领取...',
+        claimed: '已领取',
+        pendingDelivery: '待发放',
+        upgradeRequired: '待升级',
+        claimLowerFirst: '先领 VIP{level}',
+        claimSuccess: '领取成功',
+        noClaimableReward: '暂无可领取奖励',
+        rewardReceived: 'VIP 福利奖励',
+        pointsUnit: '积分',
+        instanceReward: '套餐实例',
+        instanceValue: '{plan} · {quantity} 台 · {days} 天',
+        feedback: {
+            delivered: '已到账',
+            pending: '待发放',
+        },
+        types: {
+            balance: '余额',
+            points: '积分',
+            instance: '实例',
+        },
+        summary: {
+            unlocked: '已解锁',
+            claimable: '可领取',
+            claimed: '已领取',
+            pending: '待发放',
+        },
+        status: {
+            claimable: '可领取',
+            claimed: '已领取',
+            locked: '待升级',
+            blocked: '先领取 VIP{level}',
+            pending: '待发放',
+        },
+    },
+
+    // 福利系统
+    entertainment: {
+        title: '福利',
+        description: '领取会员福利，管理积分和徽章奖励',
+        currentPoints: '当前积分',
+        convertPoints: '兑换积分',
+        noPointsToConvert: '暂无可兑换积分',
+        convertSuccess: '成功兑换 {points} 积分',
+        convertFailed: '兑换失败',
+        pointsUnit: '分',
+        tabs: {
+            lottery: '抽奖',
+            records: '抽奖记录',
+            points: '积分明细',
+        },
+        mainTabs: {
+            vipBenefits: 'VIP 福利',
+            lottery: '抽奖',
+            badge: '徽章',
+            blindbox: '盲盒',
+            checkin: '签到',
+        },
+        comingSoon: '敬请期待',
+        blindbox: {
+            title: '盲盒',
+        },
+        checkinSection: {
+            title: '每日签到',
+        },
+        // 抽奖
+        spin: '抽奖',
+        spinCost: '消耗 {points} 积分',
+        spinFailed: '抽奖失败',
+        selectLottery: '请选择抽奖活动',
+        notEnoughPoints: '积分不足',
+        noActiveLotteries: '暂无可用的抽奖活动',
+        prizeList: '奖品列表',
+        probability: '概率',
+        remaining: '剩余',
+        // 十连抽
+        multiDraw: '十连抽',
+        multiDrawAgain: '再次十连',
+        multiDrawFailed: '十连抽失败',
+        multiDrawResults: '十连抽结果',
+        multiDrawStopped: '抽奖提前结束',
+        notEnoughPointsForMulti: '积分不足，需要 {required} 积分，当前仅有 {current} 积分',
+        totalDraws: '抽奖次数',
+        totalPointsSpent: '消耗积分',
+        badgeUnit: '枚',
+        instanceUnit: '台',
+        multiDrawBadgesTitle: '本次十连抽中了徽章',
+        multiDrawBadgesSubtitle: '本轮十连共获得 {count} 枚徽章，先看看这次的新收获。',
+        continueToMultiResults: '继续查看十连结果',
+        // 奖品类型
+        prizeTypes: {
+            nothing: '再接再励',
+            points: '积分',
+            balance: '余额',
+            badge: '随机徽章',
+            instance: '实例',
+            cpu: 'CPU资源',
+            memory: '内存资源',
+            disk: '硬盘资源',
+            traffic: '流量资源',
+        },
+        // 中奖结果
+        congratulations: '恭喜中奖！',
+        betterLuckNextTime: '再接再励',
+        wonPoints: '获得 {points} 积分',
+        wonBalance: '获得 ¥{amount} 余额',
+        wonBadge: '获得徽章：{badge}',
+        wonInstance: '请提交工单领取实例奖励',
+        wonCpu: '获得 {value}% CPU，已存入资源池',
+        wonMemory: '获得 {value}MB 内存，已存入资源池',
+        wonDisk: '获得 {value}MB 硬盘，已存入资源池',
+        wonTraffic: '获得 {value}GB 流量，已存入资源池',
+        // 抽奖记录
+        lotteryName: '活动名称',
+        prize: '奖品',
+        prizeType: '奖品类型',
+        value: '奖励值',
+        time: '时间',
+        noRecords: '暂无抽奖记录',
+        loadRecordsFailed: '加载抽奖记录失败',
+        loadLotteriesFailed: '加载抽奖活动失败',
+        // 积分明细
+        pointsLogType: '类型',
+        pointsChange: '变动',
+        pointsAfter: '变动后',
+        remark: '备注',
+        noPointsLogs: '暂无积分记录',
+        loadPointsLogsFailed: '加载积分记录失败',
+        pointsLogTypes: {
+            convert: '消费兑换',
+            lotteryWin: '抽奖获得',
+            lotterySpend: '抽奖消耗',
+            badgeDrawSpend: '徽章随机抽取消耗',
+            badgeSelectSpend: '徽章自选消耗',
+            adminAdjust: '管理员调整',
+            checkin: '签到奖励',
+        },
+        badges: {
+            drawTab: '抽卡',
+            myTab: '我的徽章',
+            randomTitle: '随机抽取',
+            randomHint: '等概率，必中一个徽章',
+            randomDescription: '消耗 {points} 积分，所有徽章等概率，必定获得一个徽章副本。',
+            randomButton: '随机抽一次（{points} 积分）',
+            randomMultiButton: '随机十连（{points} 积分）',
+            selectTitle: '自选领取',
+            selectHint: '直接选择一个指定徽章',
+            selectDescription: '消耗 {points} 积分，从下方直接选择一个想要的徽章。',
+            selectButton: '领取当前选中徽章（{points} 积分）',
+            multiDrawTitle: '十连抽获得的徽章',
+            multiDrawSubtitle: '本次十连共获得 {count} 枚徽章。',
+            myTitle: '我的徽章',
+            summary: '可用 {available}，已应用 {applied}',
+            filterAll: '全部类型',
+            ownedCount: '已拥有 {count}',
+            empty: '还没有获得任何徽章。',
+            statusAvatar: '已应用到头像',
+            statusInstance: '已应用到实例',
+            statusUnused: '未应用',
+            sourceLabel: '来源',
+            sourceDraw: '随机抽取',
+            sourceLottery: '抽奖获得',
+            sourceSelect: '自选领取',
+            sourceAdminGrant: '管理员发放',
+            obtainedAt: '获得时间',
+            currentInstance: '当前实例',
+            applyAvatar: '应用到头像',
+            applyInstance: '应用到实例图标',
+            applyInstanceButton: '应用到实例',
+            selectInstance: '选择一个实例',
+            unapply: '取消应用',
+            selectRequired: '请先选择一个徽章',
+            instanceRequired: '请先选择实例',
+            drawSuccess: '获得徽章：{badge}',
+            selectSuccess: '领取成功：{badge}',
+            rewardTitleDraw: '抽卡成功',
+            rewardTitleSelect: '领取成功',
+            rewardSubtitle: '新徽章已经加入你的收藏，现在就可以前往“我的徽章”应用到头像或实例。',
+            rewardSeriesLabel: '所属系列',
+            rewardRemainingPoints: '剩余积分',
+            rewardDrawAgain: '再抽一次',
+            rewardViewMine: '查看我的徽章',
+            applyAvatarSuccess: '已应用到头像',
+            applyInstanceSuccess: '已应用到实例图标',
+            unapplySuccess: '已取消应用',
+        },
+        // 管理端
+        admin: {
+            title: '娱乐管理',
+            description: '管理抽奖活动、奖品和用户积分',
+            tabs: {
+                lotteries: '抽奖活动',
+                records: '中奖记录',
+                users: '用户积分',
+                badges: '徽章',
+            },
+            createLottery: '创建抽奖',
+            editLottery: '编辑抽奖',
+            lotteryName: '活动名称',
+            enterLotteryName: '请输入活动名称',
+            lotteryDesc: '描述',
+            enterDescription: '请输入描述（可选）',
+            costPoints: '消耗积分',
+            startAt: '开始时间',
+            endAt: '结束时间',
+            isActive: '启用',
+            enterName: '请输入名称',
+            invalidCostPoints: '消耗积分必须大于0',
+            createSuccess: '创建成功',
+            updateSuccess: '更新成功',
+            saveFailed: '保存失败',
+            deleteSuccess: '删除成功',
+            deleteFailed: '删除失败',
+            noLotteries: '暂无抽奖活动',
+            loadLotteriesFailed: '加载抽奖活动失败',
+            prizes: '奖品',
+            totalDraws: '抽奖次数',
+            status: '状态',
+            active: '已启用',
+            inactive: '已停用',
+            // 奖品管理
+            managePrizes: '管理奖品',
+            addPrize: '添加奖品',
+            prizeName: '奖品名称',
+            prizeType: '奖品类型',
+            prizeValue: '奖励值',
+            balanceValue: '余额（分）',
+            balanceCents: '输入分，如100=1元',
+            cpuPercent: '输入CPU百分比',
+            memoryMB: '输入内存(MB)',
+            diskMB: '输入硬盘(MB)',
+            trafficGB: '输入流量(GB)',
+            probability: '权重',
+            quantity: '数量',
+            unlimited: '无限',
+            noQuantityForType: '此类型奖品不能设置数量限制',
+            replenish: '补充库存',
+            remaining: '剩余',
+            replenishPlaceholder: '输入补充数量',
+            instanceDesc: '实例描述',
+            instanceDescPlaceholder: '如：1核/1G/10G SSD',
+            noPrizes: '暂无奖品，点击上方按钮添加',
+            enterPrizeName: '请输入奖品名称',
+            invalidProbability: '权重必须大于0',
+            savePrizesSuccess: '奖品保存成功',
+            savePrizesFailed: '奖品保存失败',
+            // 中奖记录
+            user: '用户',
+            searchUser: '搜索用户名',
+            noRecords: '暂无中奖记录',
+            loadRecordsFailed: '加载中奖记录失败',
+            prize: '奖品',
+            value: '奖励值',
+            // 用户积分
+            currentPoints: '当前积分',
+            totalEarned: '累计获得',
+            totalSpent: '累计消耗',
+            lastConvertedAt: '最后兑换',
+            noUsers: '暂无用户积分数据',
+            loadUsersFailed: '加载用户积分失败',
+            // 徽章目录
+            badgeCatalog: {
+                loadFailed: '加载徽章目录失败',
+                fillSeriesRequired: '请填写系列 ID、标题、名称和说明',
+                seriesUpdated: '系列已更新',
+                seriesCreated: '系列已创建',
+                saveSeriesFailed: '保存系列失败',
+                seriesDeleted: '系列已删除',
+                deleteSeriesFailed: '删除系列失败',
+                fillBadgeRequired: '请填写徽章 ID、名称、标签、系列和默认图片地址',
+                badgeUpdated: '徽章已更新',
+                badgeCreated: '徽章已创建',
+                saveBadgeFailed: '保存徽章失败',
+                badgeDeleted: '徽章已删除',
+                deleteBadgeFailed: '删除徽章失败',
+                addSeries: '新增系列',
+                addBadge: '新增徽章',
+                series: {
+                    title: '系列',
+                    description: '控制前台筛选分组和整组启用状态',
+                    add: '新增',
+                    all: '全部系列',
+                    enabledCount: '{active} / {total} 个启用',
+                    empty: '暂无系列',
+                    editTitle: '编辑系列',
+                    createTitle: '新增系列',
+                    id: '系列 ID',
+                    sort: '排序',
+                    nameZh: '中文名',
+                    nameEn: '英文名',
+                    titleLabel: '标题',
+                    titlePlaceholder: 'SUPREME 尊贵系列',
+                    descriptionLabel: '说明',
+                    sourceId: '来源 ID',
+                    sourceLabel: '来源名称',
+                    enable: '启用该系列',
+                },
+                badges: {
+                    title: '徽章',
+                    currentFilter: '当前筛选：{name}',
+                    empty: '暂无徽章',
+                    tableBadge: '徽章',
+                    tableSeries: '系列',
+                    tableAssetUrl: '图片地址',
+                    tableStatus: '状态',
+                    tableUsage: '使用',
+                    drawable: '可抽取',
+                    notDrawable: '不可抽取',
+                    usage: '拥有 {ownership} / 头像 {avatar} / 实例 {instance}',
+                    editTitle: '编辑徽章',
+                    createTitle: '新增徽章',
+                    id: '徽章 ID',
+                    series: '系列',
+                    name: '名称',
+                    nameEn: '英文名',
+                    fullLabel: '完整标签',
+                    fullLabelPlaceholder: '精英 (Elite)',
+                    sourceId: '来源 ID',
+                    sourceLabel: '来源名称',
+                    assetUrl: '默认图片地址',
+                    assetUrlPlaceholder: '/badges/dark/elite.svg 或 https://example.com/badge.svg',
+                    assetUrlDark: '深色图片地址',
+                    assetUrlLight: '浅色图片地址',
+                    sort: '排序',
+                    enable: '启用该徽章',
+                    preview: '预览',
+                    previewName: '徽章名称',
+                    previewLabel: '完整标签',
+                },
+            },
+            // 通知配置
+            notification: {
+                title: '中奖通知',
+                enabled: '启用通知',
+                type: '通知方式',
+                conditions: '通知条件',
+                notifyBalance: '中余额时通知',
+                notifyInstance: '中实例时通知',
+                secret: '签名密钥',
+                secretPlaceholder: '用于验证 Webhook 请求（可选）',
+                fillTelegram: '请填写 Telegram Bot Token 和 Chat ID',
+                fillDiscord: '请填写 Discord Webhook URL',
+                fillWebhook: '请填写 Webhook URL',
+                saveSuccess: '通知配置保存成功',
+                saveFailed: '通知配置保存失败',
+            },
+        },
+    },
+
+    // 邮箱模块
+    mail: {
+        title: '邮箱',
+        description: '管理您的专业邮箱服务',
+        tabs: {
+            my: '我的邮箱',
+            buy: '购买邮箱',
+            accounts: '邮箱账户',
+            dns: 'DNS 配置',
+            settings: '设置',
+        },
+        noSubscription: '您还没有邮箱服务',
+        buyNowHint: '立刻购买专业的邮箱服务',
+        buyNow: '立即购买',
+        subscriptionOverview: '订阅概览',
+        expiresAt: '到期时间',
+        domainsUsed: '已用域名',
+        diskUsed: '已用空间',
+        totalSpace: '总空间',
+        accounts: '账户',
+        plan: '方案',
+        domains: '个域名',
+        month: '月',
+        year: '年',
+        renew: '续费',
+        myDomains: '我的域名',
+        addDomain: '添加域名',
+        noDomains: '暂无域名，点击上方按钮添加',
+        used: '已用',
+        status: {
+            active: '活跃',
+            expired: '已过期',
+            suspended: '已暂停',
+        },
+        domainStatus: {
+            pending: '待验证',
+            verified: '已验证',
+            suspended: '已暂停',
+        },
+        selectRegion: '选择服务地区',
+        nodeStatus: {
+            available: '节点状态: 充足',
+            limited: '库存紧张',
+        },
+        plans: '个方案',
+        planDetails: '方案配置详情',
+        planTag: '正式版方案',
+        allFeaturesIncluded: '包含所有基础及进阶功能',
+        pureStorage: '纯净存储空间',
+        feature: {
+            domains: '支持 {count} 个自定义域名绑定',
+            domainStorage: '{count}主域名 {storage}G存储空间',
+            unlimitedAliases: '每个域无限个别名',
+            unlimitedMailboxes: '每个域无限个邮箱',
+            emailLimit: '每个域 600 封电子邮件/小时',
+            emClientPro: '免费的 eM Client Pro 许可证',
+            catchAll: '支持 Catch All',
+            antispam: '自研反垃圾邮件网关',
+            protocols: '支持 SMTP/IMAP/POP3 全协议',
+            aliases: '无限邮箱别名设置',
+        },
+        otherOptions: '其他选项',
+        verify: '验证',
+        checkout: {
+            title: '结算汇总',
+            region: '选定地区',
+            serviceStatus: '服务状态',
+            instant: '即时开通',
+            amount: '应付金额',
+            confirm: '立即开通',
+            securePayment: '加密支付保障，支持随时申请退款',
+            balanceRequired: '需要先充值余额，才能购买',
+        },
+        help: {
+            title: '遇到问题？',
+            desc: '如果您在购买过程中遇到任何技术问题，请提交工单联系支持人员。',
+        },
+        selectPlan: '选择方案',
+        storage: '存储空间',
+        unlimitedAccounts: '无限邮箱账户',
+        orderConfirm: '订单确认',
+        billingCycle: '计费周期',
+        monthly: '月付',
+        yearly: '年付',
+        totalPrice: '总价',
+        confirmRenew: '确认续费',
+        confirmPurchase: '确认购买',
+        renewSubscription: '续费订阅',
+        renewMonths: '续费时长',
+        monthlyPrice: '月单价',
+        yearlyPrice: '年单价',
+                alreadyPurchased: '您已购买该地区的邮箱服务',
+                alreadyPurchasedDesc: '每个用户仅可购买一个地区的邮箱服务。如需更换方案，请先到「我的邮箱」进行管理。',
+                viewMySubscription: '查看我的订阅',
+        renewDuration: '续费时长',
+        months: '个月',
+        renewSuccess: '续费成功',
+        selectPlanFirst: '请先选择一个方案',
+        purchaseSuccess: '购买成功',
+        domainName: '域名',
+        domainPlaceholder: '例如：example.com',
+        domainHint: '请输入您拥有的域名，添加后需要配置 DNS 记录验证',
+        domainRequired: '请输入域名',
+        domainAdded: '域名添加成功，请配置 DNS 记录',
+        accountsDescription: '管理此域名下的邮箱账户',
+        createAccount: '创建账户',
+        verifyFirst: '请先验证域名 DNS 配置后再创建邮箱账户',
+                completeDnsFirst: '请先完成 DNS 配置验证，邮箱服务才能正常使用',
+                goDnsConfig: '前往配置',
+                adminAccount: '管理员账号',
+                adminAccountDesc: '此账号在添加域名时自动创建，可用于登录 Webmail 管理邮箱',
+                webmailUrl: '登录地址',
+                helpDoc: '查看帮助文档',
+                noAdminAccount: '管理员账号信息不可用',
+        refreshStatus: '刷新状态',
+        noAccounts: '暂无邮箱账户',
+        admin: '管理员',
+        resetPassword: '重置密码',
+        deleteAccountConfirm: '确定要删除邮箱账户 {email} 吗？此操作不可恢复。',
+        accountDeleted: '账户已删除',
+        dnsDescription: '请在您的域名 DNS 管理面板中添加以下记录',
+        recordType: '记录类型',
+        hostRecord: '主机记录',
+        recordValue: '记录值',
+        emailAddress: '邮箱地址',
+        txtVerification: 'TXT 验证记录',
+        pending: '待验证',
+        verified: '已验证',
+        mxRecords: 'MX 记录',
+        cnameRecords: 'CNAME 记录',
+        spfRecord: 'SPF 记录',
+        dkimRecord: 'DKIM 记录',
+        optional: '可选',
+        required: '必需',
+        recommended: '推荐',
+        dnsHint: {
+            txt: '域名验证记录，添加后点击“刷新状态”验证',
+            mx: '邮件交换记录，数字表示优先级（数字越小优先级越高）',
+            cname: '别名记录，用于 Webmail 和自动发现功能',
+            spf: '发件人策略框架，防止邮件伪造，提高送达率',
+            dkim: '域名密钥认证，提高邮件可信度',
+            dmarc: '域名邮件认证策略，防止铳鱼和欺诈邮件',
+        },
+        domainInfo: '域名信息',
+        createdAt: '创建时间',
+        verifiedAt: '验证时间',
+        dangerZone: '危险区域',
+        deleteDomainWarning: '删除域名将同时删除该域名下所有邮箱账户和数据，此操作不可恢复。',
+        deleteDomain: '删除域名',
+        deleteDomainConfirm: '确定要删除域名 {domain} 吗？此操作将删除所有相关数据且不可恢复。',
+        domainDeleted: '域名已删除',
+        domainVerified: '域名验证成功',
+        domainNotVerified: 'DNS 记录尚未生效，请稍后重试',
+        username: '用户名',
+        password: '密码',
+        displayName: '显示名称',
+        diskLimit: '空间配额',
+        setAsAdmin: '设为域名管理员',
+        usernamePlaceholder: '例如：admin',
+        passwordPlaceholder: '至少8位字符',
+        passwordHint: '密码至少8位，建议包含大小写字母和数字',
+        displayNamePlaceholder: '例如：张三',
+        accountFieldsRequired: '请填写用户名和密码',
+        accountCreated: '账户创建成功',
+        accountUpdated: '账户更新成功',
+        passwordMinLength: '密码至少8位字符',
+        passwordReset: '密码重置成功',
+        editAccount: '编辑账户',
+        newPassword: '新密码',
+        newPasswordPlaceholder: '输入新密码',
+    },
+}
diff --git a/client/src/locales/zh-TW.ts b/client/src/locales/zh-TW.ts
new file mode 100644
index 0000000..4d332b4
--- /dev/null
+++ b/client/src/locales/zh-TW.ts
@@ -0,0 +1,7777 @@
+// 繁體中文（台灣）語言檔案
+// Traditional Chinese (Taiwan) - 使用台灣用語習慣
+export default {
+    // 應用程式名稱
+    app: {
+        name: 'Incus NAT VPS',
+        tagline: '簡潔而強大的雲端實例託管平台',
+        description: '一個現代化的雲端實例託管平台',
+    },
+
+    // 通用
+    common: {
+        confirm: '確認',
+        cancel: '取消',
+        save: '儲存',
+        saving: '儲存中...',
+        send: '發送',
+        sending: '發送中...',
+        syncing: '同步中...',
+        processing: '處理中...',
+        submitting: '提交中...',
+        delete: '刪除',
+        noIncudalHint: '請勿在名稱或描述中使用字樣',
+        edit: '編輯',
+        create: '建立',
+        creating: '建立中...',
+        deleting: '刪除中...',
+        deleteSuccess: '刪除成功',
+        search: '搜尋',
+        loading: '載入中...',
+        noData: '暫無資料',
+        noSearchResults: '搜尋無結果',
+        success: '操作成功',
+        error: '操作失敗',
+        warning: '警告',
+        info: '提示',
+        yes: '是',
+        no: '否',
+        back: '返回',
+        next: '下一步',
+        previous: '上一步',
+        close: '關閉',
+        reset: '重設',
+        refresh: '重新整理',
+        copy: '複製',
+        copied: '已複製',
+        copyFailed: '複製失敗',
+        show: '顯示',
+        hide: '隱藏',
+        done: '完成',
+        actions: '操作',
+        details: '詳情',
+        status: '狀態',
+        name: '名稱',
+        description: '描述',
+        createdAt: '建立時間',
+        updatedAt: '更新時間',
+        none: '無',
+        notSet: '未設定',
+        turnstileFailed: '人機驗證失敗，請重試',
+        filter: '篩選',
+        total: '共',
+        items: '條',
+        searchPlaceholder: '搜尋...',
+        developing: '開發中',
+        developingHint: '此功能正在開發中，敬請期待...',
+        gotIt: '我知道了',
+        expand: '展開',
+        collapse: '收合',
+        page: '頁',
+        pageInfo: '第 {current}/{total} 頁，共 {count} 條',
+        prevPage: '上一頁',
+        nextPage: '下一頁',
+        loadFailed: '載入失敗',
+        all: '全部',
+        perPage: '每頁',
+        totalCount: '共 {count} 條',
+        day: '天',
+        days: '天',
+        seconds: '秒',
+        month: '月',
+        totalRecords: '共 {count} 筆記錄',
+        deleted: '已刪除',
+        // 國家名稱
+        countries: {
+            // 亞洲
+            cn: '中國',
+            hk: '中國香港',
+            mo: '中國澳門',
+            tw: '中國台灣',
+            jp: '日本',
+            kr: '韓國',
+            sg: '新加坡',
+            my: '馬來西亞',
+            th: '泰國',
+            vn: '越南',
+            ph: '菲律賓',
+            id: '印尼',
+            in: '印度',
+            pk: '巴基斯坦',
+            bd: '孟加拉',
+            kz: '哈薩克',
+            uz: '烏茲別克',
+            ae: '阿聯酋',
+            sa: '沙烏地阿拉伯',
+            il: '以色列',
+            tr: '土耳其',
+            // 歐洲
+            gb: '英國',
+            de: '德國',
+            fr: '法國',
+            nl: '荷蘭',
+            be: '比利時',
+            lu: '盧森堡',
+            ch: '瑞士',
+            at: '奧地利',
+            it: '義大利',
+            es: '西班牙',
+            pt: '葡萄牙',
+            ie: '愛爾蘭',
+            se: '瑞典',
+            no: '挪威',
+            dk: '丹麥',
+            fi: '芬蘭',
+            pl: '波蘭',
+            cz: '捷克',
+            hu: '匈牙利',
+            ro: '羅馬尼亞',
+            bg: '保加利亞',
+            gr: '希臘',
+            ua: '烏克蘭',
+            ru: '俄羅斯',
+            // 北美洲
+            us: '美國',
+            ca: '加拿大',
+            mx: '墨西哥',
+            // 南美洲
+            br: '巴西',
+            ar: '阿根廷',
+            cl: '智利',
+            co: '哥倫比亞',
+            pe: '秘魯',
+            // 大洋洲
+            au: '澳洲',
+            nz: '紐西蘭',
+            // 非洲
+            za: '南非',
+            eg: '埃及',
+            ng: '奈及利亞',
+            ke: '肯亞',
+        },
+        // 網路模式（統一定義）
+        networkMode: {
+            nat: 'IPv4 NAT',
+            nat_ipv6: 'IPv4 NAT & IPv6',
+            nat_ipv6_nat: 'IPv4 NAT & IPv6 NAT',
+            ipv6_only: 'IPv6 Only',
+            ipv6_nat: 'IPv6 NAT',
+        },
+        // 實例類型
+        instanceType: {
+            container: 'LXC',
+            vm: 'KVM',
+        },
+        // 啟用/停用狀態
+        enabled: '啟用',
+        disabled: '停用',
+        active: '已啟用',
+        inactive: '已停用',
+    },
+
+    validation: {
+        fields: {
+            name: '名稱',
+            identifier: '識別符',
+            content: '內容',
+            serverAddress: '伺服器地址',
+            ipAddress: 'IP地址',
+            ipOrDomain: 'IP地址或網域',
+        },
+        required: '{field}不能為空',
+        minLength: '{field}長度至少 {min} 個字元',
+        maxLength: '{field}長度不能超過 {max} 個字元',
+        illegalChars: '{field}包含非法字元',
+        safeNameChars: '{field}只能包含中文、字母、數字、連字符、底線、空格、逗號和圓括號',
+        identifierChars: '{field}只能包含字母、數字、連字符和底線，且必須以字母開頭',
+        invalidFormat: '{field}格式不正確',
+        urlProtocol: '{field}必須以 http:// 或 https:// 開頭',
+        hostAddressInvalid: '{field}格式不正確，請輸入有效的 IPv4、IPv6 地址或網域',
+        ipAddressInvalid: '{field}格式不正確，請輸入有效的 IPv4 或 IPv6 地址',
+        ipv4Invalid: '{field}格式不正確，請輸入有效的 IPv4 地址',
+    },
+
+    // 導航
+    nav: {
+        main: '常用',
+        dashboard: '總覽',
+        instances: '實例',
+        transfers: '移轉',
+        friends: '好友',
+        tickets: '工單',
+        resources: '資源',
+        myHosts: '我的節點',
+        myPackages: '我的方案',
+        myImages: '我的映像檔',
+        logs: '日誌',
+        inbox: '通知',
+        settings: '設定',
+        wallet: '錢包',
+        invites: '邀請',
+        help: '說明',
+        admin: '管理',
+        expand: '擴展',
+        system: '系統',
+        users: '使用者',
+        statistics: '統計',
+        hosts: '節點',
+        images: '映像檔',
+        packages: '方案',
+        helpManage: '說明',
+        oauth: 'OAuth',
+        broadcast: '公告',
+        paymentProviders: '支付渠道',
+        billing: '計費管理',
+        withdrawals: '提現',
+        aff: '推薦',
+        openMenu: '開啟選單',
+        collapseSidebar: '收合側邊欄',
+        toggleTheme: '切換佈景主題',
+        toggleLanguage: '切換語言',
+        terminal: '終端機',
+        extensions: '擴充',
+        scripts: '腳本',
+        operations: '運維',
+        createInstance: '建立實例',
+        create: '建立',
+        entertainment: '福利',
+        hosting: '託管',
+        hostingWallet: '託管收益',
+        earnings: '收益',
+        mail: '郵箱',
+        instanceDetail: '實例詳情',
+        mailDomain: '郵箱網域',
+        myHostCreate: '建立節點',
+        myHostDetail: '節點詳情',
+        myPackageCreate: '建立方案',
+        myPackageEdit: '編輯方案',
+        telegramSettings: 'Telegram 設定',
+        adminCreateInstance: '管理員建立實例',
+    },
+
+    // 佈景主題
+    theme: {
+        dark: '深色模式',
+        light: '淺色模式',
+        system: '跟隨系統',
+    },
+
+    freeSite: {
+        billingCycleLabel: {
+            monthly: '月付？月亮替你付了',
+            quarterly: '季付？四季都免單',
+            semiAnnual: '半年快樂通行證',
+            annual: '年付？錢包裝睡中',
+            custom: '{months} 個月，快樂代扣空氣',
+            free: '免費亂逛許可證',
+        },
+        billingCycleShort: {
+            monthly: '/月，免驚',
+            quarterly: '/季，免單',
+            semiAnnual: '/半年快樂',
+            annual: '/年也白送',
+            custom: '/{months} 個月快樂',
+        },
+        copy: {
+            finalPrice: '裝模作樣價',
+            renewPrice: '續費？儀式感拉滿',
+            billingCycle: '快樂檔位',
+            needPay: '象徵性付款',
+            originalPrice: '原價標本',
+            oldDailyPrice: '舊日租，考古用',
+            newDailyPrice: '新日租，擺設用',
+            remainingValue: '剩餘價值：快樂無價',
+            newPlanCost: '新方案成本：空氣幣',
+            currentBalance: '餘額吉祥物',
+            balanceAfterRenew: '續後餘額：紋絲不動',
+            walletBalanceTab: '快樂餘額',
+            walletLogsTab: '免單流水',
+            walletCurrentBalance: '目前快樂刻度',
+            walletDescription: '白嫖站模式已開啟，儲值入口去喝茶了，餘額負責站崗。',
+            walletLogsDescription: '這裡記錄餘額的小動作。別緊張，主線任務依舊是免費玩。',
+            walletTotalRecharge: '累計免單',
+            walletTotalConsume: '快樂蒸發',
+            walletDestroyedValue: '銷毀紀念值',
+            dashboardNewInstance: '快樂實例',
+            dashboardCreateInstance: '召喚快樂機',
+            dashboardCreateFirst: '先召喚一台',
+            dashboardUserBalance: '快樂餘額',
+            dashboardBalanceValue: '免費無價',
+            dashboardNewContainer: '錢包坐好，我們直接開整',
+            instanceCreate: '快樂實例',
+            instanceCreateFirst: '先召喚一台',
+            instanceBatchRenewTitle: '批量續快樂',
+            instanceBatchRenewDescription: '白嫖站模式下，續費只是蓋個章，機器繼續開心營業。',
+            instanceBatchTotalAmount: '空氣合計',
+            instanceBatchBalanceAfter: '續後心情',
+            instanceBatchCurrentBalance: '目前吉祥物餘額',
+            instanceBatchRenewAction: '確認快樂續杯',
+            moneyJustForShow: '數字巡演',
+            marketPriceFree: '免單起飛',
+            marketPlanCount: '{count} 個快樂檔位',
+            marketCreateNow: '立即開薅',
+            marketLoginToOrder: '登入後開薅',
+            marketSelectedPlanTitle: '快樂檔位',
+            marketCycleMonthly: '月付？月亮替你付了',
+            marketMonthlyPrice: '月均？快樂不均攤',
+            createOrderSummary: '免單概覽',
+            createPromoCode: '神秘暗號',
+            createPromoPlaceholder: '可填可不填，免費列車已發車',
+            createPromoHostedDisabled: '託管節點不吃暗號，直接上車',
+            createPromoValid: '暗號有效，快樂加成 {rate}',
+            createPromoUsing: '暗號燈已亮',
+            createPromoBenefit: '折扣和返利在旁邊表演，情緒價值負責鼓掌。',
+            createCommissionEstimate: '預計給分享者投餵 ¥{amount} 的想像返利',
+            createPlanFee: '標價展覽品',
+            createMonthlyEquivalent: '折算？快樂拒絕被折算',
+            mailPrice: '郵箱也免單',
+            mailCheckoutTitle: '郵箱免單確認',
+            mailBillingCycle: '快樂週期',
+            mailCheckoutAmount: '象徵性結算',
+            mailCheckoutConfirm: '確認領取郵箱',
+            mailBalanceRequired: '餘額不餘額的，白嫖站講究先用再說。',
+        },
+    },
+
+    publicSite: {
+        brandTagline: 'Incus 驅動的 NAT VPS 平台',
+        nav: {
+            home: '首頁',
+            overview: '概覽',
+            products: '商品瀏覽',
+            help: '幫助中心',
+        },
+        actions: {
+            signIn: '登入',
+            console: '進入控制台',
+            consoleCompact: '控制台',
+            browseProducts: '瀏覽全部商品',
+            browseOfficial: '瀏覽直營商品',
+            browseMarket: '瀏覽託管商品',
+            viewCatalog: '查看全部',
+        },
+        footer: {
+            description: '精選全球多節點 LXC / KVM 商品，配置豐富、方案齊全，持續提供高性價比 NAT VPS 選擇。',
+            explore: '瀏覽',
+            account: '帳戶',
+            purchaseHint: '未登入時打開購買連結，會先進入公開商品瀏覽頁；登入後仍維持原本的建立流程。',
+        },
+        seo: {
+            keywords: 'Incus,NAT VPS,LXC,KVM,VPS 面板,雲伺服器',
+            homeTitle: '基於 Incus 的 NAT VPS 入口與控制台',
+            homeDescription: '精選全球多節點 LXC / KVM 商品，配置豐富、方案齊全，持續提供高性價比 NAT VPS 選擇。',
+            marketTitle: '商品瀏覽',
+            marketDescription: '瀏覽全部公開商品，並依來源、地區、資源配置與計費方案篩選 NAT VPS。',
+            marketPackageTitle: '{name} - 商品瀏覽',
+            marketPackageDescription: '查看 {name} 的 {type} 配置、月流量與商品資訊，並在商品瀏覽頁延續開通流程。',
+        },
+        portal: {
+            badge: 'Incus Driven NAT Platform',
+            title: '基於 Incus 的 NAT VPS 入口與控制台',
+            description: '精選全球多節點 LXC / KVM 商品，覆蓋直營與託管供給，配置檔位豐富，持續提供高性價比 NAT VPS 選擇。',
+            authPanelDescription: '把穩定供給、更多地區與更豐富價格帶放在同一入口，讓挑選套餐這一步更直接。',
+            authPanelFlowLabel: 'ORDER FLOW',
+            authPanelFlowTitle: '先看商品，登入後繼續下單',
+            authPanelFlowDescription: '未登入時可以先瀏覽公開商品；從分享連結進入也會保留商品上下文，登入後可直接續上原本的購買流程。',
+            authPanelTagValue: '高性價比',
+            previewLabel: 'CONTROL PLANE',
+            previewTitle: '控制台概覽',
+            previewDescription: '從公開入口到登入後控制台，整體體驗都圍繞實例選型、部署、維運與商品轉化。',
+            controlPoint1: '$ incus launch ubuntu:24.04 edge-vm',
+            controlPoint2: '# LXC / KVM NAT 實例統一入口',
+            controlPoint3: '# 官方直營與託管市場共用同一套瀏覽到開通鏈路',
+            packageFallback: '公開商品，支援從瀏覽頁直接跳轉購買。',
+            stats: {
+                packages: '商品數量',
+                regions: '地區數量',
+                official: '直營商品',
+                market: '託管商品',
+            },
+            officialTitle: '官方直營',
+            officialDescription: '標準化供給、較穩定的預期，適合重視節點品質、基礎體驗與持續可用性的業務。',
+            officialPoint1: '官方節點更適合需要穩定供給、清晰預期與一致維運體驗的場景。',
+            officialPoint2: '公開瀏覽與開通鏈路一致，適合站外推廣、落地頁轉化與持續上架。',
+            officialPoint3: '登入後仍沿用既有建立實例流程，不打斷後台使用習慣。',
+            marketTitle: '託管市場',
+            marketDescription: '價格帶與地區分佈更靈活，適合追求更多節點選擇與成本效率的使用者。',
+            marketPoint1: '託管市場適合尋找冷門地區、特殊價格帶與更靈活的資源來源。',
+            marketPoint2: '公開瀏覽、地區篩選與方案查看都對齊到同一套體驗。',
+            marketPoint3: '分享購買連結時，未登入訪客先看商品，已登入使用者仍直接進入開通流程。',
+            experienceNoLoginTitle: '全球多節點供給',
+            experienceNoLoginDescription: '直營與託管商品並行上架，熱門地區與更多節點選擇可在同一入口集中瀏覽。',
+            experienceRoutingTitle: 'LXC / KVM 商品更全',
+            experienceRoutingDescription: '從輕量容器到完整虛擬機，資源配置與方案檔位覆蓋更廣，方便依需求挑選。',
+            experienceThemeTitle: '多價位高性價比',
+            experienceThemeDescription: '持續補充不同預算與定位的 NAT VPS 商品，方便橫向比較後再決定。',
+            catalogLabel: 'ECOSYSTEM',
+            catalogTitle: '官方直營與託管生態並行',
+            catalogDescription: '直營與託管商品並行提供，無論你想優先看穩定供給，或是挑選更多地區與價格帶，都能在這裡找到。',
+            emptyPackages: '目前暫無可展示商品',
+            browseLabel: 'CATALOG',
+            browseTitle: '依配置與地區篩選合適商品',
+            browseDescription: '支援依地區、配置與價格篩選商品，方便新用戶選購，也方便老用戶補購。',
+        },
+        market: {
+            badge: '公開商品瀏覽',
+            title: '瀏覽全部公開商品',
+            description: '依來源、地區、配置與方案篩選的公開商品目錄。',
+            publicNotice: '這裡彙總全部公開商品，可直接依地區、來源與資源配置進行篩選。',
+            buyLinkNotice: '你目前打開的是一條購買連結。因為尚未登入，所以先顯示對應商品；登入後仍會進入原本的建立實例流程。',
+            searchPlaceholder: '搜尋商品名稱、描述或虛擬化類型',
+            allRegions: '全部地區',
+            official: '官方直營',
+            market: '託管市場',
+            noPackages: '目前暫無公開商品',
+            noResults: '沒有符合目前篩選條件的商品',
+            soldOut: '暫時售罄',
+            inStock: '可開通',
+            free: '免費',
+            fromMonthly: '¥{price}/月起',
+            planCount: '{count} 個方案',
+            featuresTitle: '套餐詳情',
+            plansTitle: '可選方案',
+            planCycle: '{months} 個月',
+            selectedPlanTitle: '目前方案',
+            customConfigTitle: '自訂配置',
+            customConfigDescription: '此商品目前沒有固定方案。登入後會進入建立頁，並依套餐允許範圍自訂資源配置。',
+            createNow: '立即開通',
+            loginToOrder: '登入後開通',
+            loginHint: '登入後會依目前商品直接延續至建立實例流程。',
+            choosePackage: '從左側選擇一個商品查看詳細資訊。',
+            summary: {
+                total: '公開商品',
+                available: '可開通',
+                regions: '覆蓋地區',
+                source: '目前來源',
+            },
+            labels: {
+                startingPrice: '起售價',
+                traffic: '月流量',
+                plans: '方案數',
+                cpu: 'CPU',
+                memory: '記憶體',
+                disk: '硬碟',
+                network: '網路模式',
+                hosts: '宿主機數',
+                nesting: '巢狀支援',
+            },
+        },
+    },
+
+    // 錢包
+    wallet: {
+        title: '錢包',
+        description: '管理您的帳戶餘額和充值',
+        tabs: {
+            balance: '帳戶餘額',
+            logs: '餘額明細',
+            records: '充值記錄',
+        },
+        currentBalance: '目前餘額',
+        recharge: '充值',
+        totalRecharge: '累計充值',
+        totalConsume: '累計消費',
+        totalDestroyedValue: '已銷毀總價值',
+        noLogs: '暫無餘額記錄',
+        noRecords: '暫無充值記錄',
+        type: '類型',
+        amount: '金額',
+        actualAmount: '實際到帳',
+        estimatedAmount: '預計到帳',
+        balanceAfter: '餘額',
+        instanceOrRemark: '實例/備註',
+        time: '時間',
+        orderNo: '訂單號',
+        completedAt: '完成時間',
+        statusLabel: '狀態',
+        paymentMethod: '支付方式',
+        paymentMethodType: '選擇支付方式',
+        heleketSelectionHint: '將在 Heleket 支付頁選擇具體的加密貨幣和網路，本頁不會限制最終付款幣種。',
+        paymentChannel: '支付渠道',
+        paymentUuid: 'UUID:',
+        paymentTxid: 'TxID:',
+        paymentMethods: {
+          alipay: '支付寶',
+          wxpay: '微信支付',
+          qqpay: 'QQ錢包',
+          bank: '網銀支付',
+          jdpay: '京東支付',
+        },
+        noProviders: '暫無可用支付渠道',
+        amountLabel: '充值金額',
+        amountRange: '金額範圍',
+        feeNote: '手續費',
+        payableAmount: '應付金額',
+        pay: '立即支付',
+        void: '作廢',
+        logTypes: {
+            recharge: '充值',
+            consume: '消費',
+            refund: '退款',
+            adminAdjust: '管理員調整',
+            gift: '贈送',
+            transferFee: '移轉手續費',
+            transferRefund: '手續費退還',
+            hostingWithdraw: '託管餘額提現',
+            hostingDeduction: '託管實例扣款',
+        },
+        status: {
+            pending: '待支付',
+            paid: '已支付',
+            completed: '已完成',
+            failed: '失敗',
+            cancelled: '已取消',
+            refunded: '已退款',
+        },
+        loadLogsFailed: '載入餘額明細失敗',
+        showLotteryGift: '抽獎贈送',
+        showingLotteryGift: '抽獎贈送',
+        loadProvidersFailed: '載入支付渠道失敗',
+        loadRecordsFailed: '載入充值記錄失敗',
+        selectProvider: '請選擇支付方式',
+        invalidAmount: '金額無效',
+        orderCreated: '訂單已建立',
+        redirecting: '正在跳轉支付頁面...',
+        createOrderFailed: '建立訂單失敗',
+        noPayUrl: '獲取支付連結失敗',
+        repayFailed: '重新支付失敗',
+        orderCancelled: '訂單已取消',
+        noRefundNotice: '所有充值都無法原路退款。',
+        rechargeNotice: '我知道不好用的實例可以銷毀退至面板餘額，可轉移實例 PUSH 是免費的，郵箱可自行修改。',
+        cancelFailed: '取消訂單失敗',
+        orderExpired: '訂單已過期',
+        rechargeSuccess: '充值成功！餘額已到帳',
+        verifyingPayment: '正在驗證支付狀態...',
+        paymentProcessing: '支付處理中，請稍後刷新',
+        verifyFailed: '驗證支付狀態失敗',
+        amountMismatch: '支付金額與訂單金額不匹配，請聯繫客服',
+        natDisclaimer: '我知道所售實例都是 NAT 屬性，不保證 IP 在大陸的連通性，所有充值都無法退款。',
+    },
+
+    // 推薦計劃
+    aff: {
+        title: '推薦計劃',
+        description: '邀請好友使用您的優惠碼，獲取返利收益',
+        notActivated: '推薦計劃已可用',
+        activateHint: '您可以建立優惠碼並分享給朋友，當他們使用您的優惠碼購買您購買過的方案時，您將獲得返利收益。',
+        goRecharge: '前往充值',
+        affBalance: 'AFF 餘額',
+        totalEarnings: '累計收益',
+        balanceHint: 'AFF 餘額僅可轉化為帳戶餘額用於面板消費，無法直接提現。',
+        convert: '申請轉化',
+        myCodes: '我的優惠碼',
+        createCode: '建立優惠碼',
+        noCodes: '暫無優惠碼，建立一個開始推廣吧',
+        code: '優惠碼',
+        plan: '方案',
+        discount: '折扣',
+        commission: '返利',
+        usedCount: '使用次數',
+        earnings: '收益',
+        status: '狀態',
+        enabled: '已啟用',
+        disabled: '已停用',
+        toggle: '切換',
+        selectPlan: '選擇方案',
+        selectPlanHint: '選擇全域優惠碼或方案專有碼',
+        alreadyCreated: '已建立',
+        globalCode: '全域優惠碼',
+        globalCodeBadge: '全站通用',
+        globalCodeHint: '可用於全站所有付費套餐和方案',
+        orSelectPlan: '或選擇方案專有碼',
+        discountCommission: '折扣/返利比例',
+        discountCommissionHint: '購買者享 {discount} 折扣，您獲 {commission} 返利',
+        fixedRate: '折扣與返利比例',
+        fixedRateHint: '系統固定折扣率和返利率均為 5%',
+        createSuccess: '優惠碼建立成功',
+        createFailed: '建立失敗',
+        deleteCodeConfirm: '確定刪除優惠碼 {code} 嗎？',
+        deleteCodeSuccess: '優惠碼已刪除',
+        deleteCodeFailed: '刪除失敗',
+        toggleSuccess: '狀態已切換',
+        toggleFailed: '切換失敗',
+        earningsLog: '收益明細',
+        noLogs: '暫無收益記錄',
+        logType: {
+            new_purchase: '新購返利',
+            renew: '續費返利',
+            convert: '餘額轉化',
+        },
+        convertModal: {
+            title: '申請轉化',
+            currentBalance: '目前 AFF 餘額',
+            amount: '轉化金額',
+            minAmount: '最低轉化金額：0.10 元',
+            hint: '提交後將自動轉入帳戶餘額。',
+            submit: '確認轉化',
+            success: '轉化成功，已轉入帳戶餘額',
+            failed: '提交失敗',
+            invalidAmount: '請輸入有效的轉化金額',
+        },
+        withdrawals: '轉化記錄',
+        noWithdrawals: '暫無轉化記錄',
+        withdrawalStatus: {
+            pending: '待審核',
+            approved: '已通過',
+            rejected: '已拒絕',
+        },
+        leaderboard: {
+            title: 'AFF 榜單',
+            loadFailed: '載入榜單失敗',
+            empty: '暫無榜單資料',
+            you: '就是你',
+        },
+        // 實例建立頁優惠碼輸入
+        promoCode: '優惠碼',
+        promoCodeOptional: '優惠碼（可選）',
+        promoCodePlaceholder: '輸入優惠碼（可選）',
+        promoCodeInputPlaceholder: '輸入折扣代碼',
+        promoCodeHostedDisabled: '託管節點不支援使用優惠碼',
+        promoCodeValid: '優惠碼有效，享受 {rate} 折扣',
+        promoCodeInvalid: '優惠碼無效',
+        verifying: '驗證中...',
+        originalPrice: '原價',
+        discountAmount: '折扣',
+        promoDiscount: '推廣折扣',
+        finalPrice: '實付',
+        usingPromoCode: '您正在使用優惠碼',
+        promoCodeBenefit: '您享受 {discount} 折扣，同時為分享者帶來約 {commission}% 的返利',
+        commissionEstimate: '預計為分享者帶來 ¥{amount} 返利',
+        // 管理員審核
+        adminTitle: 'AFF 轉化審核',
+        adminDescription: '審核使用者的 AFF 餘額轉化申請',
+        user: '使用者',
+        userBalance: '使用者 AFF 餘額',
+        requestAmount: '申請金額',
+        requestTime: '申請時間',
+        approve: '通過',
+        reject: '拒絕',
+        rejectReason: '拒絕原因',
+        rejectReasonPlaceholder: '請輸入拒絕原因',
+        approveSuccess: '已通過，已轉入使用者餘額',
+        approveFailed: '審核失敗',
+        rejectSuccess: '已拒絕',
+        rejectFailed: '拒絕失敗',
+        noRequests: '暫無待審核的轉化申請',
+        filterStatus: '狀態篩選',
+        all: '全部',
+    },
+
+    popupAnnouncement: {
+        title: '站點公告',
+        subtitle: '請留意這條最新通知',
+        promoLabel: '新機器推廣',
+        buyNow: '立即購買 {name}',
+        viewImage: '查看完整圖片',
+        promoPlans: '可選方案',
+        soldOut: '售罄',
+        dismissToday: '今日不見',
+        dismissForever: '再也不見',
+    },
+
+    // 語言
+    language: {
+        zh: '中文',
+        en: 'English',
+    },
+
+    // 認證
+    auth: {
+        login: '登入',
+        loginTo: '登入',
+        logout: '登出',
+        register: '註冊',
+        registerTo: '註冊',
+        username: '使用者名稱',
+        usernamePlaceholder: '輸入使用者名稱',
+        usernameOrEmail: '使用者名稱或電子郵件',
+        usernameOrEmailPlaceholder: '輸入使用者名稱或電子郵件',
+        password: '密碼',
+        passwordPlaceholder: '輸入密碼',
+        confirmPassword: '確認密碼',
+        confirmPasswordPlaceholder: '再次輸入密碼',
+        email: '電子郵件',
+        emailPlaceholder: '輸入電子郵件',
+        rememberMe: '記住我',
+        forgotPasswordLink: '忘記密碼',
+        contactEmail: '聯絡信箱',
+        noAccount: '還沒有帳號？',
+        hasAccount: '已有帳號？',
+        loginSuccess: '登入成功',
+        logoutSuccess: '已登出',
+        registerSuccess: '註冊成功',
+        invalidCredentials: '使用者名稱或密碼錯誤',
+        sessionExpired: '會話已過期，請重新登入',
+        continue: '繼續',
+        loggingIn: '登入中...',
+        registering: '註冊中...',
+        orUse: '或使用',
+        oauthBindHint: '需先在設定中綁定帳號才能使用快速登入',
+        enterUsernamePassword: '請輸入使用者名稱和密碼',
+        enterUsernameOrEmailPassword: '請輸入帳號和密碼',
+        twoFactorCode: '雙重驗證碼',
+        twoFactorCodePlaceholder: '輸入 6 位驗證碼',
+        twoFactorHint: '請輸入驗證器應用程式中顯示的驗證碼',
+        twoFactorOptional: '選填',
+        twoFactorOptionalHint: '如果您啟用了雙重驗證，請輸入驗證碼',
+        recoveryCode: '恢復碼',
+        recoveryCodePlaceholder: '輸入恢復碼',
+        recoveryCodeHint: '輸入設定 2FA 時儲存的恢復碼（一次性使用）',
+        useRecoveryCode: '無法存取驗證器？使用恢復碼',
+        useTotpCode: '使用驗證器驗證碼',
+        enterRecoveryCode: '請輸入恢復碼',
+        enterTotpCode: '請輸入驗證碼',
+        rememberPassword: '想起密碼了？',
+        verificationCode: '驗證碼',
+        verificationCodePlaceholder: '輸入 6 位驗證碼',
+        invalidCode: '請輸入 6 位驗證碼',
+        forgotPassword: {
+            title: '找回密碼',
+            subtitle: '透過電子郵件驗證碼重設您的密碼',
+            sendCode: '發送驗證碼',
+            codeSent: '驗證碼已發送，請查收郵件',
+            codeHint: '請輸入發送到您電子郵件的 6 位驗證碼',
+            resetPassword: '重設密碼',
+            resetSuccess: '密碼重設成功！新密碼已發送到您的電子郵件，請查收。',
+            twoFactorDisabled: '您的雙重驗證（2FA）已被自動停用，建議重新啟用以確保帳號安全。'
+        },
+        oauthNotBound: '請先在個人設定中綁定 {provider} 帳號後再使用快速登入',
+        oauthUserNotFound: '使用者不存在',
+        oauthAccountBanned: '帳號已被停用',
+        oauthProviderDisabled: '該登入方式已被停用',
+        oauthTokenError: '取得授權失敗，請重試',
+        oauthError: 'OAuth 登入失敗，請重試',
+        loginFailed: '登入失敗',
+        createAccount: '註冊',
+        creatingAccount: '建立中...',
+        backToLogin: '返回登入',
+        registerSuccessRedirect: '註冊成功，正在跳轉...',
+        inviteCode: '邀請碼',
+        inviteCodePlaceholder: '輸入邀請碼',
+        usernameHint: '字母開頭，3-32 個字元',
+        passwordHint: '至少 8 位，包含大小寫字母和數字',
+        fillAllRequired: '請填寫所有必填項',
+        invalidEmail: '請輸入有效的電子郵件地址',
+        emailContainsIllegal: '電子郵件包含非法字元',
+        passwordMismatch: '兩次密碼不一致',
+        passwordTooShort: '密碼至少 8 位',
+        passwordNeedsUppercase: '密碼需要包含至少一個大寫字母',
+        passwordNeedsLowercase: '密碼需要包含至少一個小寫字母',
+        passwordNeedsNumber: '密碼需要包含至少一個數字',
+        turnstileRequired: '請完成人機驗證',
+        turnstileFailed: '人機驗證失敗，請重試',
+        // 電子郵件驗證
+        emailCode: '電子郵件驗證碼',
+        emailCodePlaceholder: '請輸入 6 位驗證碼',
+        emailCodeRequired: '請輸入電子郵件驗證碼',
+        registrationClosedTitle: '目前已關閉註冊',
+        registrationClosedMessage: '抱歉，目前站點暫時關閉註冊，如需開通帳號請聯絡管理員。',
+        registrationClosedShort: '目前已關閉註冊',
+        sendCode: '發送驗證碼',
+        sendingCode: '發送中...',
+        codeSentHint: '驗證碼已發送至您的電子郵件，10 分鐘內有效',
+        invalidEmailCode: '驗證碼無效或已過期',
+        allowedEmailDomains: '僅支援以下電子郵件',
+        emailUsernamePlaceholder: '使用者名稱',
+        confirmEmail: '確認電子郵件地址',
+        confirmEmailMessage: '驗證碼將發送至以下電子郵件，請確認地址是否正確：',
+        confirmAndSend: '確認發送',
+        // 服務條款
+        tos: {
+            title: '服務條款',
+            agreePrefix: '我已閱讀並同意',
+            termsLink: '《服務條款》',
+            mustAgree: '請閱讀並同意服務條款',
+            understood: '我已瞭解',
+            loadFailed: '載入服務條款失敗',
+        },
+    },
+
+    // 使用者選單
+    userMenu: {
+        profile: '個人設定',
+        myInstances: '我的實例',
+        logout: '登出',
+    },
+
+    // 配額
+    quota: {
+        hosts: '主機',
+        instances: '實例',
+        friends: '好友',
+        packages: '方案',
+    },
+
+    // 儀表板
+    dashboard: {
+        title: '總覽',
+        welcome: '歡迎回來',
+        welcomeMessage: '歡迎回來，{name}！',
+        overview: '總覽',
+        recentActivity: '最近活動',
+        quickActions: '快速操作',
+        // 統計卡片（頂層定義）
+        totalInstances: '實例總數',
+        runningInstances: '運行中',
+        stoppedInstances: '已停止',
+        creatingInstances: '建立中',
+        userBalance: '使用者餘額',
+        balance: '餘額',
+        memberLevel: '會員等級',
+        memberLevelBasic: '普通會員',
+        uptimeProbe: '自營節點監控',
+        statusPage: '狀態頁',
+        rechargeNow: '立即充值',
+        walletDetails: '查看錢包',
+        walletHint: '前往錢包頁面完成充值',
+        instanceStatusOverview: '實例狀態概覽',
+        accountOverview: '帳戶概覽',
+        runningHealth: '運行健康度',
+        instanceOverviewSummary: '{running}/{total} 台實例運行中，在線率 {percent}%',
+        containerInstances: '容器實例',
+        vmInstances: '虛擬機實例',
+        totalRecharge: '累計充值',
+        totalConsume: '累計消費',
+        userPoints: '使用者積分',
+        frozenBalance: '凍結餘額',
+        frozenBalanceHint: '帳戶中有凍結餘額，請在錢包查看明細',
+        accountReadyHint: '帳戶狀態正常，可直接建立或續費實例',
+        instanceListSummary: '最近 {count} / 共 {total} 個實例',
+        vipProgressTitle: '會員成長進度',
+        vipProgressToNext: '{current} → {next}',
+        vipProgressMaxed: '已達到目前最高會員等級',
+        vipProgressNoRule: '暫無下一等級規則',
+        vipProgressUnavailable: '會員進度暫不可用',
+        vipProgressAllHint: '升級到 {level} 需要同時滿足以下條件',
+        vipProgressAnyHint: '升級到 {level} 滿足任一條件即可',
+        vipProgressSingleMetricHint: '升級到 {level} 需要達到{metric}門檻',
+        vipProgressStableHint: '保持目前權益，後續福利大廳開放後可領取對應福利',
+        vipMetricTotalRecharge: '累計充值',
+        vipMetricTotalConsume: '累計消費',
+        vipMetricTotalHostingIncome: '累計託管收入',
+        vipMetricInstanceCount: '託管實例數',
+        vipProgressConditionMet: '已滿足',
+        vipProgressCurrent: '目前',
+        vipProgressTarget: '目標',
+        vipProgressRemaining: '還差',
+        vipProgressRemainingMoney: '還差 {amount}',
+        vipProgressRemainingCount: '還差 {count} 個',
+        resourceUsage: '資源使用',
+        resourceOverview: '這是您的資源使用概覽',
+        newInstance: '新增實例',
+        quotaUsage: '配額使用',
+        increaseQuota: '增加配額',
+        pinnedArticles: '置頂說明文章',
+        viewAllHelp: '查看全部說明',
+        myInstances: '我的實例',
+        viewAll: '查看全部',
+        viewAllInstancesWithCount: '查看全部 {count} 個實例',
+        memoryMetric: '記憶體',
+        diskMetric: '磁碟',
+        noPublicIp: '無公網 IP',
+        unknownHost: '未分配節點',
+        createFirst: '建立第一個實例',
+        // 快速操作卡片
+        createInstance: '建立實例',
+        newContainer: '新增容器',
+        instanceList: '實例列表',
+        manageInstances: '管理實例',
+        profileSettings: '個人設定',
+        accountSecurity: '帳戶安全',
+        helpDocs: '說明文件',
+        userGuide: '使用指南',
+        // 問候語
+        greeting: {
+            morning: '早安',
+            afternoon: '午安',
+            evening: '晚安',
+            basicUser: '{username}',
+            memberUser: '尊貴的 {level} {username}',
+            full: '{greeting}，{member}',
+        },
+        // 統計（嵌套定義）
+        stats: {
+            totalInstances: '實例總數',
+            runningInstances: '運行中的實例',
+            totalHosts: '主機總數',
+            totalUsers: '使用者總數',
+            activeUsers: '活躍使用者',
+            resourceUsage: '資源使用',
+            systemStatus: '系統狀態',
+        },
+        actions: {
+            createInstance: '建立實例',
+            viewInstances: '查看實例',
+            viewHosts: '查看主機',
+            viewUsers: '查看使用者',
+        },
+        allRunning: '全部運行中',
+        xRunning: '{count} 個運行中',
+        allStopped: '全部已停止',
+        instancePlural: '個實例',
+        noInstances: '暫無實例',
+        noInstancesHint: '您還沒有任何實例，快去建立一個吧！',
+        hostNotice: '您的實例運行在以下主機上',
+        instances: '我的實例',
+        hosts: '實例所在主機',
+        viewAllInstances: '查看全部實例',
+        viewAllHosts: '查看全部主機',
+        hostName: '主機名稱',
+        ownerName: '所有者',
+        instanceCount: '實例數',
+        publicIpDisplay: '公網 IP',
+        cards: {
+            runningInstances: '運行中實例',
+            totalStorage: '總儲存空間',
+            totalCpu: '總 CPU',
+            totalMemory: '總記憶體',
+        },
+        funnyQuote: '一句話',
+        hostStatus: '主機狀態',
+        noHostsFound: '找不到任何主機',
+        viewAllPackages: '查看全部方案',
+        selectedPackages: '已選方案',
+        noPackagesSelected: '未選擇方案',
+        selectPackages: '選擇方案',
+    },
+
+    // 服務條款模態框
+    tosModal: {
+        title: '服務條款',
+        content: '服務條款內容',
+        agree: '我同意服務條款',
+        agreeButton: '同意並繼續',
+        mustAgree: '您必須同意服務條款才能繼續使用',
+        lastUpdated: '最後更新：{date}',
+        scrollToRead: '請滾動閱讀完整服務條款',
+        contactUs: '如有疑問，請聯繫我們',
+        contactEmail: '聯繫電子郵件',
+        iAgree: '我已閱讀並同意',
+        readCarefully: '請仔細閱讀以下服務條款',
+        loading: '載入服務條款中...',
+        loadFailed: '載入服務條款失敗，請重新整理頁面重試',
+    },
+
+    // 實例相關
+    instance: {
+        title: '實例管理',
+        titlePlural: '實例',
+        name: '實例名稱',
+        image: '映像檔',
+        package: '方案',
+        host: '節點',
+        ip: 'IP 位址',
+        port: '連接埠',
+        cpu: 'CPU',
+        memory: '記憶體',
+        disk: '磁碟',
+        bandwidth: '頻寬',
+        expireAt: '到期時間',
+        expiredLabel: '已到期',
+        freeInstanceLabel: '免費實例',
+        config: '設定',
+        user: '使用者',
+        details: '詳情',
+        // 資源配額（訂單概覽用）
+        ports: '連接埠',
+        snapshots: '快照',
+        backups: '備份',
+        hostAnnouncement: '節點公告',
+        badgeModal: {
+            open: '查看或修改實例徽章',
+            kicker: '實例徽章',
+            title: '實例徽章',
+            subtitle: '查看目前實例徽章，並快速切換到其他已擁有徽章：{name}',
+            detailsTab: '徽章說明',
+            ownedTab: '我的徽章',
+            noBadgeSeries: '未設定徽章',
+            noBadgeTitle: '目前尚未為這個實例設定徽章',
+            noBadgeSummary: '這個實例目前仍在使用預設圖示。',
+            noBadgeDescription: '你可以切換到「我的徽章」，把已擁有的徽章快速套用到目前實例。',
+            statusLabel: '目前狀態',
+            statusApplied: '已套用到目前實例',
+            statusNotApplied: '未設定實例徽章',
+            ownedCountLabel: '已擁有副本',
+            openOwnedTab: '從我的徽章中選擇',
+            manageUnavailable: '目前實例不在你的可管理實例清單中，這裡只能查看徽章資訊，不能直接修改。',
+            emptyOwnedTitle: '你還沒有可用的實例徽章',
+            emptyOwnedHint: '先前往娛樂中心取得徽章，之後就可以在這裡快速切換目前實例的徽章。',
+            applyCurrent: '套用到目前實例',
+            replaceCurrent: '替換目前實例徽章',
+            moveCurrent: '轉移到目前實例',
+            moveFromAvatar: '從頭像改為目前實例',
+            appliedHere: '目前實例中',
+            currentHint: '這個徽章已經套用在目前實例上。',
+            replaceHint: '套用後會替換目前實例正在使用的徽章。',
+            moveFromAvatarHint: '套用後會先從目前頭像上移除。',
+            moveFromInstanceHint: '套用後會先從實例「{name}」上移除。',
+            removeCurrent: '移除目前實例徽章',
+            updateSuccess: '實例徽章已更新',
+            removeSuccess: '已移除目前實例徽章',
+        },
+        errorBanner: {
+            title: '實例異常',
+            description: '實例異常，您可直接銷毀（付費實例剩餘價值退款不扣除手續費）',
+            destroyNow: '立即銷毀',
+            confirmDestroy: '確定要銷毀此異常實例嗎？付費實例的剩餘價值將退款至您的錢包（不扣除手續費）。',
+        },
+        actions: {
+            start: '啟動',
+            stop: '停止',
+            restart: '重新啟動',
+            delete: '刪除',
+            console: '控制台',
+            snapshot: '快照',
+            backup: '備份',
+            rename: '重新命名',
+            clone: '複製',
+            suspend: '封停',
+            unsuspend: '解封',
+        },
+        renameModal: {
+            title: '重新命名實例',
+            name: '實例名稱',
+            namePlaceholder: '輸入新的實例名稱',
+            cancel: '取消',
+            confirm: '確認',
+            renaming: '重新命名中...',
+            success: '實例已重新命名',
+            failed: '重新命名失敗',
+        },
+        statusLabel: '狀態',
+        modeLabel: '模式',
+        quotaLabel: '配額',
+        trafficLabel: '流量',
+        manageDesc: '管理您的容器實例',
+        userInstances: '使用者「{name}」的實例',
+        clearFilter: '清除篩選',
+        searchPlaceholder: '搜尋實例名稱、IP...',
+        totalCount: '共 {count} 個實例',
+        noInstances: '暫無實例',
+        noMatchingInstances: '未找到符合的實例',
+        tryOtherKeywords: '嘗試使用其他關鍵字',
+        createFirstInstance: '建立第一個容器實例開始使用',
+        listLayout: '列表',
+        cardLayout: '卡片',
+        order: {
+            label: '調整排序',
+            top: '置頂',
+            up: '上移',
+            down: '下移',
+            bottom: '置底',
+            updateSuccess: '實例順序已更新',
+            updateFailed: '儲存實例順序失敗',
+        },
+        confirmDelete: '確定刪除實例「{name}」？此操作不可回復。',
+        createPage: {
+            title: '建立實例',
+            description: '選擇方案並設定您的容器實例',
+            instanceName: '實例名稱',
+            instanceNamePlaceholder: 'my-instance',
+            selectPackage: '請選擇方案',
+            selectSshKey: '請選擇 SSH 金鑰',
+            creating: '建立中...',
+            createSuccess: '實例建立中，請稍後在實例列表中查看狀態',
+            loadFailed: '載入資料失敗',
+            loadHostsFailed: '載入可用主機失敗',
+            loadImagesFailed: '載入可用映像檔失敗',
+            missingSshKey: '缺少 SSH 金鑰',
+            missingSshKeyDesc: '建立實例需要 SSH 金鑰。請先前往',
+            profileSettings: '個人設定',
+            addSshKey: '新增 SSH 公鑰。',
+            quotaInsufficient: '配額不足',
+            quotaCpu: 'CPU: 已用 {used}%/{limit}% 額配，本次需要 {need}%',
+            quotaMemory: '記憶體: 已用 {used}/{limit} MB，本次需要 {need} MB',
+            quotaDisk: '磁碟: 已用 {used}/{limit} MB，本次需要 {need} MB',
+            quotaInstance: '實例: 已達上限 {used}/{limit} 個',
+            packageNoHosts: '方案未綁定主機，請聯繫管理員',
+            sharedPackageNotFound: '分享的方案不存在或已失效，已為您選擇其他可用方案',
+            quotaInfo: {
+                prefix: '該方案',
+                you: '您',
+                maxInstances: '',
+                count: '數量',
+                instances: '個實例',
+                unlimited: '無限制',
+                cpu: 'CPU',
+                memory: '記憶體',
+                remaining: '該方案剩餘配額',
+            },
+            resourceLimit: {
+                title: '資源配額不足，無法建立實例',
+                noInstances: '剩餘實例數量為 0，無法建立新實例',
+                insufficientMemory: '剩餘記憶體不足（<128MB），無法建立實例',
+                insufficientCpu: '剩餘 CPU 不足（<15%），無法建立實例',
+            },
+            ownPaidPackageWarning: '這是您自己建立的付費方案，不能為自己開通實例',
+            destroyTrafficNotice: '銷毀限制：實例本月已用流量低於 5 GB 時才可銷毀。',
+            firstPaidInstanceNotice: '銷毀限制：實例本月已用流量低於 5 GB 時才可銷毀。',
+            // 訂單概覽
+            orderSummary: '訂單概覽',
+            packageName: '方案',
+            planName: '方案',
+            billingCycle: '計費週期',
+            months: '個月',
+            month: '月',
+            resourceConfig: '資源設定',
+            planFee: '方案費用',
+            // 套餐來源
+            source: {
+                official: '直營',
+                market: '託管',
+                friends: '好友共享',
+            },
+            fun: {
+                selectRegion: '選擇國家/地區',
+                packageCount: '{count} 個方案',
+                selectPackage: '選擇方案',
+                selectPlan: '選擇方案',
+                planDesc: '選擇適合您需求的付費方案',
+                customPlanHint: '找不到合適的方案？您可以提交工單申請定製配置',
+                noPlans: '該方案暫無可用方案',
+                planSoldOut: '已售罄',
+                noPackages: '暫無可用方案',
+                selectHost: '選擇主機',
+                hostAutoSelected: '預設選中第一台可用節點',
+                selectSystem: '選擇系統',
+                noImages: '暫無可用映像檔',
+                selectSshKey: '選擇 SSH 金鑰',
+            },
+            // 託管免責提示
+            hostedDisclaimer: {
+                title: '託管節點提示',
+                content: '此為用戶託管節點，售後由託管者（UID:{uid}）負責。僅提供平台服務，不擔保節點品質。若託管者失聯，將處理其託管餘額退還至受影響用戶的面板餘額。',
+            },
+            zoneNotice: {
+                badge: '專區',
+                content: '此為 UID:{uid} 的專區，售後由 {username} 處理。',
+            },
+        },
+        startingInstance: '{name} 啟動中',
+        stoppedInstance: '{name} 已停止',
+        restartingInstance: '{name} 重新啟動中',
+        deletedInstance: '{name} 已刪除',
+        actionFailed: '操作失敗',
+        verificationRequiredHint: '此操作需要二次驗證，請前往實例詳情頁面執行',
+        totalRecords: '共 {count} 筆記錄',
+        prevPage: '上一頁',
+        nextPage: '下一頁',
+        batch: {
+            selectedCount: '已選 {count} 個實例',
+            currentPageOnly: '批量操作僅作用於目前頁面選中的實例',
+            clear: '取消選擇',
+            start: '批量開機',
+            stop: '批量關機',
+            restart: '批量重啟',
+            sync: '批量同步',
+            renew: '批量續費',
+            autoRenewOn: '開啟自動續費',
+            autoRenewOff: '關閉自動續費',
+            destroy: '批量銷毀',
+            noEligibleAction: '所選實例中沒有可執行此操作的項目',
+            partialResult: '已完成 {success} 個，失敗 {failed} 個，跳過 {skipped} 個',
+            successResult: '已成功處理 {count} 個實例',
+            actionFailed: '批量操作失敗',
+            previewFailed: '載入批量預覽失敗',
+            renewTitle: '批量續費',
+            renewDescription: '為目前選中的付費實例統一續費，只有支援所選時長的實例會被執行。',
+            selectedMonths: '續費時長',
+            eligibleCount: '可執行數量',
+            totalAmount: '合計金額',
+            renewEmpty: '所選實例中沒有可續費項目',
+            eligibleList: '可執行實例（{count}）',
+            skippedList: '跳過實例（{count}）',
+            hosted: '託管實例',
+            unsupportedPeriod: '目前所選時長不可續費',
+            unknownReason: '目前無法處理',
+            destroyTitle: '批量銷毀',
+            destroyDescription: '銷毀目前選中的實例，只有符合條件的實例會被執行。',
+            destroyEmpty: '所選實例中沒有可銷毀項目',
+            refundTotal: '預估總退款',
+            feeTotal: '預估總手續費',
+            feeWaived: '免手續費',
+            confirmHint: '請輸入 DESTROY 以確認批量銷毀',
+            confirmPlaceholder: '輸入 DESTROY 確認',
+        },
+        batchReason: {
+            notFoundOrForbidden: '實例不存在或無權操作',
+            freeNoRenew: '免費實例無需續費',
+            billingUnavailable: '無法取得實例計費資訊',
+            noRenewOptions: '暫無可用續費選項',
+            renewWindow: '僅可在到期前 {days} 天內續費',
+            renewFailed: '續費失敗',
+            freeNoAutoRenew: '免費實例不支援自動續費',
+            autoRenewAlreadyOn: '已經開啟自動續費',
+            autoRenewAlreadyOff: '已經關閉自動續費',
+            autoRenewFailed: '自動續費設定失敗',
+            deleted: '實例已刪除',
+            creating: '實例正在建立中，無法銷毀',
+            suspended: '實例已被封停，無法銷毀，請先聯繫管理員解封',
+            destroyTrafficLimit: '目前月流量週期無法銷毀，已用流量達到或超過 5G',
+            destroyFailed: '銷毀實例失敗',
+        },
+        // 行動裝置卡片
+        mobileCard: {
+            ipAddress: 'IP 位址',
+            config: '設定',
+            disk: '硬碟',
+            traffic: '流量',
+            host: '節點',
+            user: '使用者',
+            unlimited: '無限制',
+            cpuCore: '%核',
+            quota: '配額',
+            ports: '連接埠',
+            snapshots: '快照',
+            backups: '備份',
+            sites: '反代',
+        },
+        // 實例建立組件
+        selector: {
+            // 地區選擇
+            selectRegion: '選擇國家/地區',
+            allRegions: '全部',
+            noRegions: '暫無可用地區',
+            packageCount: '{count} 個方案',
+            // 方案選擇
+            selectPackage: '選擇方案',
+            selectPlan: '選擇方案',
+            planDesc: '選擇適合您需求的付費方案',
+            customPlanHint: '找不到合適的方案？您可以提交工單申請定製配置',
+            noPlans: '該方案暫無可用方案',
+            planSoldOut: '已售罄',
+            noPackages: '暫無可用方案',
+            cpu: 'CPU',
+            memory: '記憶體',
+            disk: '硬碟',
+            cores: '核',
+            networkMode: {
+                nat: 'NAT',
+                natDesc: '透過連接埠映射存取',
+                nat_ipv6: 'NAT + IPv6',
+                nat_ipv6Desc: 'NAT + 公網 IPv6',
+            },
+            docker: '可嵌套',
+            privileged: '特權',
+            configureResources: '設定資源',
+            adjustBasedOnPackage: '基於方案上限自由調節',
+            cpuAllowance: '額配',
+            accountQuota: '帳戶配額',
+            packageLimit: '方案限制',
+            selectHost: '選擇主機',
+            hostOptional: '可選，不選則系統自動分配',
+            hostAutoSelected: '預設選中第一台可用節點',
+            hostTraffic: '該節點下實例月流量',
+            autoAssign: '自動分配',
+            autoAssignDesc: '系統根據負載自動選擇最佳節點',
+            available: '可用',
+            selectSystem: '選擇系統',
+            showSyncedImages: '顯示目前節點允許的映像檔',
+            noImages: '暫無可用映像檔',
+            noImagesOnHost: '所選節點暫無可用映像檔',
+            contactAdmin: '請聯繫節點所有者或管理員調整映像檔策略',
+            selectSshKey: '選擇 SSH 金鑰',
+            noSshKeys: '暫無 SSH 金鑰',
+            addSshKeyHint: '請先在設定頁面新增 SSH 公鑰',
+            hostInsufficient: '主機資源不足',
+            hostInsufficientDesc: '目前設定需要 {cpu}% CPU 和 {memory}GB 記憶體，但方案內所有主機均無法滿足。',
+            hostInsufficientSuggest: '建議降低實例設定或等待資源釋放。',
+            viewProbe: '查看探針監控',
+            prevPage: '上一頁',
+            nextPage: '下一頁',
+            pageInfo: '第 {current}/{total} 頁，共 {count} 筆',
+            // 方案資源配額
+            ports: '連接埠',
+            snapshots: '快照',
+            backups: '備份',
+            sites: '站點',
+            bandwidth: '頻寬',
+        },
+        // 付費訂閱卡片
+        subscription: {
+            premium: '付費訂閱',
+            expiresAt: '到期日期',
+            expiresIn: '剩餘時間',
+            expired: '已過期',
+            days: '天',
+            billingCycle: '計費週期',
+            renewPrice: '續費價格',
+            month: '月',
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            annual: '年付',
+            months: '個月',
+            perMonth: '/月',
+            perQuarter: '/季',
+            perHalfYear: '/半年',
+            perYear: '/年',
+            renew: '續費',
+            renewSuccess: '續費成功',
+            applyAffShort: '優惠碼',
+            applyAffTitle: '綁定 AFF 優惠碼',
+            applyAffInstance: '實例',
+            applyAffCurrentRenewPrice: '當前續費價格',
+            applyAffCodeLabel: 'AFF 優惠碼',
+            applyAffCodePlaceholder: '輸入 AFF 優惠碼',
+            applyAffEffectHint: '綁定成功後僅影響後續續費價格。',
+            applyAffNoRefundHint: '不會退還當前週期差價，也不會改變當前週期費用。',
+            applyAffOwnCodeHint: '只能綁定他人的優惠碼，不能綁定自己的優惠碼。',
+            applyAffSubmit: '確認綁定',
+            applyAffSubmitting: '綁定中...',
+            applyAffSuccess: '優惠碼綁定成功，後續續費將享受折扣',
+            // 自動續費
+            autoRenew: '自動續費',
+            autoRenewOn: '已開啟自動續費',
+            autoRenewOff: '未開啟自動續費',
+            autoRenewEnabled: '已開啟自動續費',
+            autoRenewDisabled: '已關閉自動續費',
+            enableAutoRenew: '開啟自動續費',
+            disableAutoRenew: '關閉自動續費',
+            autoRenewHint: '到期前 24 小時將自動從餘額扣款續費',
+            autoRenewDesc: '開啟自動續費後，實例將在到期前自動按 {cycle} 週期續費，每次續費 ￥{price}',
+            currentStatus: '當前狀態',
+        },
+        // 實例銷毀
+        destroy: {
+            button: '銷毀',
+            title: '銷毀實例',
+            warning: '此操作將永久刪除實例及其所有資料，包括快照、備份、端口映射等，且不可恢復。',
+            warningFree: '此操作將永久刪除實例及其所有資料，且不可恢復。',
+            rulesTitle: '銷毀規則',
+            rulesDesc: '了解銷毀功能的使用規則和限制',
+            ruleFirstFree: '首次銷毀免手續費',
+            ruleFirstFreeDesc: '您的第一次銷毀操作將免除手續費，全額退款',
+            ruleFeeRate: '後續銷毀收取 {rate}% 手續費',
+            ruleFeeRateDesc: '第二次及以後銷毀收取 {rate}% 手續費',
+            ruleTrafficThreshold: '付費實例當前月流量週期已用流量需低於 5G',
+            ruleTrafficThresholdDesc: '若當前月流量週期已用流量達到或超過 5G，則本次無法銷毀付費實例',
+            ruleFreeInstance: '免費實例可直接銷毀',
+            ruleFreeInstanceDesc: '免費實例銷毀無退款，不計入銷毀次數',
+            // 預覽資訊
+            instanceInfo: '實例資訊',
+            instanceName: '實例名稱',
+            hostName: '所在節點',
+            planName: '當前方案',
+            refundInfo: '退款資訊',
+            remainingDays: '剩餘天數',
+            remainingValue: '剩餘價值',
+            maxRefundable: '退款上限',
+            feeRate: '手續費率',
+            feeAmount: '手續費',
+            refundAmount: '實際退款',
+            firstTimeFree: '首次免手續費',
+            freeInstanceNoRefund: '免費實例無退款',
+            days: '天',
+            // 確認
+            confirmTitle: '確認銷毀',
+            confirmHint: '請輸入實例名稱 {name} 以確認銷毀',
+            confirmPlaceholder: '輸入實例名稱確認',
+            confirmButton: '確認銷毀',
+            destroying: '銷毀中...',
+            cancel: '取消',
+            // 狀態
+            success: '實例已銷毀',
+            successWithRefund: '實例已銷毀，已退款 ¥{amount}',
+            failed: '銷毀失敗',
+            loadFailed: '載入銷毀資訊失敗',
+            // 不可銷毀原因
+            cannotDestroy: '無法銷毀',
+        },
+        create: '建立實例',
+        createNew: '建立新實例',
+        edit: '編輯實例',
+        delete: '刪除實例',
+        start: '啟動',
+        stop: '停止',
+        restart: '重新啟動',
+        console: '控制台',
+        terminal: '終端機',
+        backup: '備份',
+        backupAction: '建立備份',
+        snapshot: '快照',
+        snapshotAction: '建立快照',
+        resize: '調整規格',
+        reinstall: '重裝系統',
+        migrate: '遷移',
+        transfer: '移轉',
+        rename: '重新命名',
+        forceStop: '強制停止',
+        status: {
+            running: '運行中',
+            stopped: '已停止',
+            starting: '啟動中',
+            stopping: '停止中',
+            restarting: '重新啟動中',
+            error: '錯誤',
+            unknown: '未知',
+            suspended: '已暫停',
+            creating: '建立中',
+            migrating: '遷移中',
+            restoring: '還原中',
+            deleting: '刪除中',
+            installing: '安裝中',
+            copying: '複製中',
+            backingUp: '備份中',
+        },
+        statusFilter: {
+            all: '全部狀態',
+        },
+        createdAt: '建立時間',
+        detail: {
+            invalidId: '無效的實例 ID',
+            notExist: '實例不存在',
+            loadFailed: '載入實例失敗',
+            title: '實例詳情',
+            overview: '總覽',
+            specs: '規格',
+            storage: '儲存',
+            activity: '活動',
+            tabs: {
+                info: '資訊',
+                overview: '總覽',
+                network: '網路',
+                siteProxy: '建站',
+                traffic: '流量',
+                quota: '配額',
+                storage: '儲存',
+                snapshots: '快照',
+                backups: '備份',
+                logs: '日誌',
+                settings: '設定',
+                config: '設定',
+            },
+            task: {
+                start: '正在啟動...',
+                stop: '正在停止...',
+                restart: '正在重新啟動...',
+                rebuild: '正在重裝...',
+                recreate: '正在重建...',
+                clone: '正在複製...',
+                change_host: '正在改節點...',
+            },
+            actions: {
+                starting: '實例啟動中',
+                stopped: '實例已停止',
+                restarting: '實例重新啟動中',
+                deleted: '實例已刪除',
+                confirmDelete: '確定刪除實例「{name}」？\n\n此操作將永久刪除實例和所有資料，不可回復。',
+                actionFailed: '操作失敗',
+                taskQueued: '操作已提交，請稍候...',
+                taskInProgress: '實例正在執行其他操作，請稍候',
+                rebuildSuccess: '系統重裝成功，新密碼已產生',
+                recreateSuccess: '實例重建成功，新密碼已產生',
+                selectImageAndKey: '請選擇映像檔和 SSH 金鑰',
+                clone: '複製實例',
+                cloning: '複製中...',
+                cloneSuccess: '實例複製成功',
+                cloneFailed: '實例複製失敗',
+                confirmClone: '確定要複製實例「{name}」嗎？',
+                cloneNotice: '複製操作將建立一個新的實例副本，新實例將繼承源實例的所有設定，但會分配新的連接埠映射。複製可能需要幾分鐘時間，請耐心等待。',
+                stopRequired: '請先停止實例',
+                stopRequiredHint: '此操作需要實例處於停止狀態',
+                suspend: '封停實例',
+                unsuspend: '解除封停',
+                suspending: '封停中...',
+                unsuspending: '解封中...',
+                suspendSuccess: '實例已封停',
+                unsuspendSuccess: '實例已解封',
+                syncStatus: '同步',
+                help: '幫助',
+                syncStatusChanged: '狀態已同步：{from} → {to}',
+                syncStatusNoChange: '狀態已更新，已同步網路位址',
+                syncIpv4Changed: '內網 IP 已更新: {from} → {to}',
+                syncProxySitesUpdated: '已同步更新 {count} 個反代站點配置',
+                confirmSuspend: '確定要封停實例「{name}」嗎？',
+                confirmSuspendNotice: '封停後，實例所有者將無法對該實例進行任何操作，直到所有者手動解除封禁。',
+                suspendReason: '封停原因',
+                suspendReasonPlaceholder: '請輸入封停原因，將透過站內信通知實例所有者...',
+                confirmUnsuspend: '確定要解除實例「{name}」的封停狀態嗎？',
+            },
+            rebuild: {
+                title: '重裝',
+                noHostInfo: '無法取得節點資訊',
+                noImages: '該節點目前沒有可用映像檔，請聯繫節點所有者或管理員調整映像檔策略。',
+                loadImagesFailed: '載入映像檔列表失敗',
+                loadKeysFailed: '載入 SSH 金鑰失敗',
+            },
+            recreate: {
+                title: '重建實例',
+            },
+            port: {
+                fillPrivatePort: '請填寫內部連接埠',
+                added: '連接埠映射已新增',
+                addedBoth: 'TCP 和 UDP 連接埠映射已新增',
+                batchAdded: '已新增 {count} 個連接埠映射',
+                stillConflict: '部分連接埠仍有衝突，請重新選擇',
+                deleted: '連接埠映射已刪除',
+                deleteFailed: '刪除失敗',
+                confirmDelete: '確定刪除此連接埠映射？',
+                confirmBatchDelete: '確定刪除選中的 {count} 個連接埠映射？',
+                batchDeleted: '已刪除 {count} 個連接埠映射',
+                batchDeletePartial: '成功刪除 {success} 個，{fail} 個刪除失敗',
+            },
+            password: {
+                loadFailed: '載入密碼失敗',
+            },
+            quota: {
+                saved: '配額已更新',
+                saveFailed: '儲存失敗',
+                portExceedUsed: '連接埠配額不能小於目前已使用量：目前已使用 {used} 個連接埠，輸入 {input}',
+                snapshotExceedUsed: '快照配額不能小於目前已使用量：目前已使用 {used} 個快照，輸入 {input}',
+                backupExceedUsed: '備份配額不能小於目前已使用量：目前已使用 {used} 個備份，輸入 {input}',
+                portOutOfRange: '連接埠配額必須在 1-1000 範圍內',
+                snapshotOutOfRange: '快照配額必須在 1-1000 範圍內',
+                backupOutOfRange: '備份配額必須在 1-1000 範圍內',
+            },
+            copy: {
+                success: '已複製到剪貼簿',
+                failed: '複製失敗',
+            },
+            // 資訊標籤頁
+            info: {
+                title: '基本資訊',
+                instanceId: '實例 ID',
+                image: '映像檔',
+                host: '節點',
+                networkMode: '網路模式',
+                instanceMode: '實例模式',
+                nat: 'NAT',
+                ipv6: 'IPv6',
+                sshPort: 'SSH 連接埠',
+                sshHelpTitle: 'SSH 連線說明',
+                sshHelpIpv4: '使用 IPv4 連線時，需要先前往「網路」標籤頁新增 22 連接埠的映射，然後使用公網 IP 和映射後的連接埠進行連線。',
+                sshHelpIpv6: '使用 IPv6 連線時，可以直接使用公網 IPv6 位址和 22 連接埠進行連線，無需設定連接埠映射。',
+                rootPassword: 'Root 密碼',
+                createdAt: '建立時間',
+                expiresAt: '到期時間',
+                suspended: '實例已封停',
+                suspendedAt: '封停時間',
+                suspendReasonLabel: '封停原因',
+                suspendReasonExpired: '實例已到期，請續費後解封',
+                suspendReasonDefault: '未填寫封停原因',
+                suspendTip: '封停期間，實例無法啟動、重新啟動、重裝等操作。如需解封或有疑問，請提交工單。',
+                copy: '複製',
+                show: '顯示',
+                hide: '隱藏',
+                resourceUsage: '資源佔用',
+                cpu: 'CPU',
+                memory: '記憶體',
+                disk: '硬碟',
+                inbound: '入站',
+                outbound: '出站',
+                ingressLimit: '入棧',
+                egressLimit: '出棧',
+                hostUid: '託管UID',
+                hostOwnerTitle: '託管者資訊',
+                hostOwnerEmail: '郵箱',
+                hostOwnerHostCount: '託管節點數',
+                hostOwnerInstanceCount: '節點實例數',
+                hostOwnerRegisteredDays: '註冊天數',
+                includesCache: '含頁面快取',
+                cannotEditConfig: '實例狀態不允許修改設定',
+                redeem: '兑換',
+                redeemTitle: '兑換資源',
+            },
+            // Cloud-init 初始化狀態
+            cloudInit: {
+                initializing: '初始化中',
+                retry: '重新檢查',
+                retryUnknown: '重試檢測',
+                retryStalled: '繼續檢測',
+                short: '初始化',
+                shortUnknown: '待確認',
+                shortStalled: '較慢',
+                clickToRetry: '系統正在初始化，點擊重新檢測',
+                clickToRetryUnknown: '目前無法確認 Cloud-init 狀態，點擊重新檢測',
+                clickToRetryStalled: '初始化耗時較長，點擊繼續檢測或手動標記完成',
+                statusUnknown: '狀態待確認',
+                stalled: '初始化較慢',
+                manualComplete: '手動標記完成',
+                manualShort: '完成',
+                manualCompleteSuccess: '已手動標記實例初始化為完成',
+            },
+            // 網路標籤頁
+            network: {
+                title: '網路位址',
+                privateIpv4: '內網 IPv4',
+                publicIpv4: '公網 IPv4',
+                publicIpv6: '公網 IPv6',
+                portMappings: '連接埠映射',
+                publicIp: '公網 IP',
+                add: '新增',
+                noQuota: '請先分配連接埠配額',
+                quotaFull: '連接埠配額已滿',
+                addPortMapping: '新增連接埠映射',
+                prevPage: '上一頁',
+                nextPage: '下一頁',
+                perPage: '每頁',
+                filterBoth: '全部',
+                selectAll: '全選當前頁',
+                selectedCount: '已選擇 {count} 項',
+                batchDelete: '批量刪除',
+                noFilterResults: '當前篩選條件無匹配結果',
+                noPortQuota: '未分配連接埠配額',
+                allocateQuotaHint: '請先在「配額」標籤頁中分配連接埠配額',
+                noPortMappings: '暫無連接埠映射，點擊「新增」建立',
+                ipv6OnlyPortMappingHint: 'IPv6 Only類型的實例無法進行連接埠映射，請直接使用實例的IPv6',
+                additionalIpv6: '額外 IPv6 位址',
+                addIpv6: '新增 IPv6',
+                noAdditionalIpv6: '暫無額外 IPv6 位址',
+                ipAdded: 'IPv6 位址新增成功',
+                ipAddFailed: 'IPv6 位址新增失敗',
+                ipDeleted: 'IPv6 位址已刪除',
+                ipDeleteFailed: 'IPv6 位址刪除失敗',
+                confirmDeleteIp: '確定要刪除這個 IPv6 位址嗎？',
+                // IPv6 管理新增
+                primaryIpv6: '主 IPv6',
+                extraIpv6: '額外 IPv6',
+                ipv6Subnets: 'IPv6 網段',
+                addSubnet: '分配網段',
+                customIpv6: '自訂 IPv6',
+                randomIpv6: '隨機分配',
+                setCustom: '設定自訂',
+                custom: '自訂',
+                primary: '主',
+                addIpv6Modal: {
+                    title: '新增 IPv6 位址',
+                    randomHint: '系統將從節點 IPv6 子網中隨機分配一個位址',
+                    customHint: '輸入您自己的 IPv6 位址（必須在節點子網範圍內）',
+                    addressLabel: 'IPv6 位址',
+                    addressPlaceholder: '如 2001:db8::1',
+                    invalidAddress: '無效的 IPv6 位址格式',
+                    adding: '新增中...',
+                },
+                subnetModal: {
+                    title: '分配 IPv6 網段',
+                    hint: '選擇要分配的網段大小，節點將自動從可用池中分配',
+                    prefix112: '/112 (65,536 個 IP)',
+                    prefix120: '/120 (256 個 IP)',
+                    prefix124: '/124 (16 個 IP)',
+                    allocating: '分配中...',
+                    allocate: '分配',
+                },
+                noSubnets: '暫無分配的 IPv6 網段',
+                subnetAllocated: 'IPv6 網段分配成功',
+                subnetAllocateFailed: 'IPv6 網段分配失敗',
+                subnetDeleted: 'IPv6 網段已刪除',
+                subnetDeleteFailed: 'IPv6 網段刪除失敗',
+                confirmDeleteSubnet: '確定要刪除這個 IPv6 網段嗎？',
+                customIpv6Set: '自訂 IPv6 位址設定成功',
+                customIpv6Failed: '自訂 IPv6 位址設定失敗',
+                ipv6NotInSubnet: 'IPv6 位址必須在節點子網範圍內',
+                ipv6AlreadyExists: 'IPv6 位址已被佔用',
+                instanceMustRunning: '實例必須處於運行狀態才能管理 IPv6',
+                loading: '載入中...',
+                // 重新分配 IPv6
+                reassignIpv6: '重新取得',
+                reassignIpv6Confirm: '確定要重新分配 IPv6 位址嗎？',
+                reassignIpv6ConfirmHint: '重新分配後需要重裝系統才能生效',
+                reassignIpv6Success: 'IPv6 已重新分配，請重裝系統使其生效',
+                reassignIpv6Failed: 'IPv6 重新分配失敗',
+                reassignIpv6Loading: '重新分配中...',
+                reassignIpv6StopRequired: '實例必須先關機才能重新分配 IPv6',
+                reassignIpv6Cooldown: '每天只能重新取得一次，請等待 {hours} 小時後重試',
+                reassignIpv6CooldownShort: '{hours}小時後',
+                reassignIpv6NotSupported: '此實例不支援重新分配 IPv6',
+            },
+            // 配額標籤頁
+            quotaTab: {
+                title: '實例配額設定',
+                portLimit: 'NAT 連接埠數上限',
+                snapshotLimit: '快照數量上限',
+                backupLimit: '備份數量上限',
+                placeholder: '留空或輸入0自動填入剩餘額度',
+                currentUsage: '目前使用',
+                quotaLimit: '配額限制',
+                full: '已滿',
+                remaining: '剩餘',
+                defaultRemaining: '預設帳戶剩餘額度',
+                unit: '個',
+                portMappings: '連接埠映射',
+                snapshots: '快照',
+                backups: '備份',
+                save: '儲存配額設定',
+                saving: '儲存中...',
+            },
+
+            storageTitle: '儲存',
+            rootDisk: '根磁碟',
+            totalDisk: '總磁碟',
+            diskUsage: '磁碟使用量',
+            usedDisk: '已使用',
+            snapshotsTitle: '快照',
+            noSnapshots: '無快照',
+            createSnapshot: '建立快照',
+            restoreSnapshot: '還原快照',
+            deleteSnapshot: '刪除快照',
+            snapshotName: '快照名稱',
+            snapshotNamePlaceholder: '輸入快照名稱',
+            snapshotCreated: '快照建立成功',
+            snapshotRestored: '快照還原成功',
+            snapshotDeleted: '快照刪除成功',
+            snapshotFailed: '快照操作失敗',
+            backupsTitle: '備份',
+            noBackups: '無備份',
+            createBackup: '建立備份',
+            restoreBackup: '還原備份',
+            deleteBackup: '刪除備份',
+            backupName: '備份名稱',
+            backupCreated: '備份建立成功',
+            backupRestored: '備份還原成功',
+            backupDeleted: '備份刪除成功',
+            backupFailed: '備份操作失敗',
+            logsTitle: '日誌',
+            noLogs: '無日誌',
+            settingsTitle: '設定',
+            confirmDelete: '確認刪除',
+            confirmDeleteText: '您確定要刪除此實例嗎？此操作無法復原。',
+            confirmStop: '確認停止',
+            confirmStopText: '您確定要停止此實例嗎？',
+            confirmRestart: '確認重新啟動',
+            confirmRestartText: '您確定要重新啟動此實例嗎？',
+            confirmForceStop: '確認強制停止',
+            confirmForceStopText: '強制停止可能會導致資料遺失。您確定要繼續嗎？',
+            confirmReinstall: '確認重裝系統',
+            confirmReinstallText: '重裝系統將清除所有資料。您確定要繼續嗎？',
+            typeInstanceNameToConfirm: '輸入實例名稱「{name}」以確認刪除',
+            deleteWarning: '此操作不可復原！所有資料將被永久刪除。',
+            startSuccess: '實例啟動成功',
+            stopSuccess: '實例停止成功',
+            restartSuccess: '實例重新啟動成功',
+            deleteSuccess: '實例刪除成功',
+            startFailed: '實例啟動失敗',
+            stopFailed: '實例停止失敗',
+            restartFailed: '實例重新啟動失敗',
+            deleteFailed: '實例刪除失敗',
+            renameSuccess: '實例重新命名成功',
+            renameFailed: '實例重新命名失敗',
+            reinstallSuccess: '實例重裝成功',
+            reinstallFailed: '實例重裝失敗',
+            instanceNamePlaceholder: '輸入實例名稱',
+            cpuCores: '{cores} 核心',
+            memorySize: '{size} 記憶體',
+            diskSize: '{size} 磁碟',
+            viewConsole: '開啟控制台',
+            viewTerminal: '開啟終端機',
+            uptime: '運行時間',
+            uptimeValue: '{days} 天 {hours} 小時 {minutes} 分鐘',
+            uptimeDays: '{days} 天',
+            uptimeHours: '{hours} 小時',
+            uptimeMinutes: '{minutes} 分鐘',
+            uptimeSeconds: '{seconds} 秒',
+            uptimeShort: '{value}{unit}',
+            host: '主機',
+            hostInfo: '主機資訊',
+            noHostInfo: '無主機資訊',
+            package: '方案',
+            packageInfo: '方案資訊',
+            noPackageInfo: '無方案資訊',
+            created: '建立於',
+            basicInfo: '基本資訊',
+            instanceName: '實例名稱',
+            instanceId: '實例 ID',
+            image: '映像檔',
+            os: '作業系統',
+            kernel: '核心',
+            instanceType: '實例類型',
+            cpu: 'CPU',
+            memory: '記憶體',
+            disk: '磁碟',
+            traffic: '流量',
+            trafficUsed: '已使用流量',
+            trafficTotal: '總流量',
+            trafficReset: '流量重設時間',
+            bandwidth: '頻寬',
+            incusId: 'Incus ID',
+            incusIdHint: '實例在 Incus 中的唯一標識符',
+            currentUsage: '目前使用量',
+            noCurrentUsage: '無法取得目前使用量',
+            noTrafficInfo: '無流量資訊',
+            usageNote: '注意：記憶體和磁碟使用量需要安裝 guest agent',
+            specDefault: '預設規格',
+            specCustom: '自訂規格',
+            hostName: '主機名稱',
+            hostNameHint: '主機在系統中的名稱',
+            hostOwner: '主機擁有者',
+            publicIpHint: '連接到實例的公網位址',
+            noPublicIp: '無公網 IP',
+            location: '位置',
+            packageName: '方案名稱',
+            specConfig: '規格設定',
+            specConfigHint: 'CPU / 記憶體 / 磁碟空間',
+            noPackage: '無方案資訊',
+            snapshotQuota: '快照配額',
+            backupQuota: '備份配額',
+            portQuota: '連接埠配額',
+            quotaUsage: '{used} / {total}',
+            quotaUnlimited: '無限制',
+            sshAccess: 'SSH 連接',
+            sshAccessHint: '透過 SSH 連接到實例',
+            sshCommand: 'SSH 指令',
+            sshCopied: 'SSH 指令已複製',
+            ssh: {
+                title: 'SSH 連接',
+                hint: '使用 SSH 連接到實例',
+                command: 'SSH 指令',
+                port: 'SSH 連接埠',
+                noPublicIp: '無公網 IP，無法使用 SSH 連接',
+                noSshPort: '未設定 SSH 連接埠映射',
+                copyCommand: '複製指令',
+                copied: 'SSH 指令已複製',
+                user: 'SSH 使用者',
+                defaultUser: '預設使用者',
+                userHint: '根據映像檔，預設使用者可能是 root、ubuntu 或 debian 等',
+                connectWith: '連接方式',
+            },
+            deletePending: '實例已標記為刪除，正在處理中...',
+            cancelDelete: '取消刪除',
+            cancelDeleteSuccess: '已取消刪除實例',
+            cancelDeleteFailed: '取消刪除失敗',
+            cancelDeleteConfirm: '確認取消刪除',
+            cancelDeleteConfirmText: '確定要取消刪除此實例嗎？',
+            reinstallConfirmTitle: '確認重裝系統',
+            reinstallConfirmText: '重裝系統將清除實例所有資料，此操作不可復原！',
+            reinstallSelectImage: '選擇新系統',
+            reinstallCurrentImage: '目前系統：{image}',
+            reinstallKeepImage: '保持目前系統',
+            reinstallNewPassword: '新 root 密碼',
+            reinstallPasswordPlaceholder: '留空則由系統自動產生',
+            reinstallButton: '開始重裝',
+            reinstalling: '重裝中...',
+            deletionScheduled: '刪除已排程，{relativeTime}後執行',
+            siteQuota: '站點配額',
+        },
+        // 站點管理
+        sites: {
+            title: '建站',
+            addSite: '新增站點',
+            editSite: '編輯站點',
+            addFirstSite: '新增第一個站點',
+            empty: '暫無反代站點，點擊上方按鈕新增。',
+            description: '設定網域反向代理到實例連接埠',
+            add: '新增站點',
+            domain: '網域',
+            domainPlaceholder: '例如：example.com 或 sub.example.com',
+            domainRequired: '請輸入網域',
+            domainHint: '輸入要綁定的網域，不支援泛網域',
+            wildcardNotAllowed: '不支援泛網域（如 *.example.com）',
+            targetPort: '目標連接埠',
+            targetPortPlaceholder: '實例內部連接埠，例如：80',
+            portHint: '實例內部運行的 Web 服務連接埠（如 80, 3000, 8080）',
+            targetPortRequired: '請輸入目標連接埠',
+            invalidTargetPort: '請輸入有效的連接埠（1-65535）',
+            noSites: '暫無站點',
+            deleteSite: '刪除站點',
+            confirmDelete: '確定要刪除站點「{domain}」嗎？',
+            createSuccess: '站點建立成功',
+            updateSuccess: '站點更新成功',
+            deleteSuccess: '站點刪除成功',
+            createFailed: '建立站點失敗',
+            updateFailed: '更新站點失敗',
+            deleteFailed: '刪除站點失敗',
+            caddyNotEnabled: '主機未啟用 Caddy',
+            caddyNotEnabledHint: '目前實例所在主機未啟用 Caddy 反代服務，無法使用建站功能。',
+            status: '狀態',
+            statusActive: '已生效',
+            statusPending: '等待解析',
+            statusError: '設定失敗',
+            statusDisabled: '已停用',
+            statusRetrying: '重試中',
+            sslStatus: 'SSL 狀態',
+            sslActive: '已啟用',
+            sslPending: '申請中',
+            sslError: '錯誤',
+            refresh: '重新整理設定',
+            loadFailed: '載入站點列表失敗',
+            addSuccess: '站點新增成功',
+            addFailed: '新增站點失敗',
+            deleteConfirm: '確定要刪除站點 {domain} 嗎？',
+            refreshSuccess: '設定已重新整理',
+            refreshFailed: '重新整理設定失敗',
+            addedSuccess: '網域新增成功',
+            dnsHintDesc: '請前往您的 DNS 服務商新增以下解析記錄：',
+            dnsType: '類型',
+            dnsHost: '主機',
+            dnsValue: '值',
+            sslAutoHint: 'DNS 解析生效後，Caddy 將自動申請 SSL 憑證。',
+            quotaInfo: '已使用 {used} / {limit} 個站點',
+            quotaFull: '已達上限',
+            quotaExceeded: '站點配額已達上限',
+            disabled: '已停用',
+            enable: '啟用',
+            disable: '停用',
+            enableSite: '啟用站點',
+            disableSite: '停用站點',
+            enabled: '站點已啟用',
+            toggleFailed: '切換狀態失敗',
+            enableFailed: '啟用站點失敗',
+            disableFailed: '停用站點失敗',
+            enableHttps: '啟用 HTTPS',
+            httpsHint: '自動申請 Let\'s Encrypt 憑證，存取 HTTP 會跳轉到 HTTPS',
+            httpsEnabled: '已啟用 HTTPS',
+            httpOnly: '僅 HTTP',
+            checkCert: '檢查憑證狀態',
+            certCheckFailed: '檢查憑證狀態失敗',
+            checkDns: '檢測 DNS',
+            dnsActivated: 'DNS 驗證通過，站點已激活',
+            dnsResolved: 'DNS 已正確解析',
+            dnsCheckFailed: 'DNS 檢測失敗',
+            dnsHintWithCheck: 'DNS 設定完成後，點擊「檢測 DNS」激活站點',
+            remark: '備註',
+            remarkPlaceholder: '選填，如：部落格網站、API 服務等',
+            errorMessage: '錯誤訊息',
+            noError: '無錯誤',
+            visitSite: '存取站點',
+            helpTitle: '使用說明',
+            helpDomain: '網域需要先將 DNS 解析到主機的公網 IP',
+            helpPort: '目標連接埠是您的應用程式在實例內監聽的連接埠',
+            helpSSL: 'SSL 憑證會自動申請和續期',
+            hostIp: '主機 IP',
+            copyIp: '複製 IP',
+            ipCopied: 'IP 已複製',
+            dnsHelp: '請將以上網域的 DNS A 記錄指向：{ip}',
+            caddyNotReady: 'Caddy 反向代理尚未準備就緒',
+            caddyNotReadyHint: '請聯繫主機管理員設定 Caddy',
+            quotaUsed: '已使用 {used} / {total}',
+            unlimited: '無限制',
+            cert: {
+                title: '憑證狀態',
+                valid: '憑證有效',
+                disabled: 'HTTPS 未啟用',
+                pending: '待激活',
+                certPending: '憑證申請中',
+            },
+        },
+        list: {
+            title: '我的實例',
+            empty: '無實例',
+            emptyHint: '您還沒有任何實例，快去建立一個吧！',
+            createFirst: '建立第一個實例',
+            searchPlaceholder: '搜尋實例名稱、映像檔或主機...',
+            filterAll: '全部',
+            filterRunning: '運行中',
+            filterStopped: '已停止',
+            filterError: '錯誤',
+            sortName: '名稱',
+            sortCreated: '建立時間',
+            sortStatus: '狀態',
+            viewGrid: '方格檢視',
+            viewList: '清單檢視',
+        },
+        createForm: {
+            title: '建立實例',
+            selectHost: '選擇主機',
+            selectHostHint: '選擇您要在哪個主機上建立實例',
+            selectPackage: '選擇方案',
+            selectPackageHint: '選擇實例的規格方案',
+            selectImage: '選擇映像檔',
+            selectImageHint: '選擇實例的作業系統映像檔',
+            instanceName: '實例名稱',
+            instanceNameHint: '輸入實例的名稱',
+            instanceNamePlaceholder: '輸入實例名稱',
+            rootPassword: 'Root 密碼',
+            rootPasswordHint: '設定實例的 root 密碼',
+            rootPasswordPlaceholder: '輸入密碼（留空則自動產生）',
+            sshKey: 'SSH 公鑰',
+            sshKeyHint: '可選：添加 SSH 公鑰以便 SSH 登入',
+            sshKeyPlaceholder: '輸入 SSH 公鑰（可選）',
+            createButton: '建立實例',
+            creating: '建立中...',
+            createSuccess: '實例建立成功',
+            createFailed: '實例建立失敗',
+            validation: {
+                hostRequired: '請選擇主機',
+                packageRequired: '請選擇方案',
+                imageRequired: '請選擇映像檔',
+                nameRequired: '請輸入實例名稱',
+                nameInvalid: '實例名稱只能包含小寫字母、數字和連字號，且長度在 2-30 之間',
+            },
+            nameTip: '名稱在此方案下必須唯一，且使用小寫字母、數字和連字號',
+            passwordSecurityHint: '建議使用強密碼，密碼在提交後將被加密儲存',
+            passwordGenerateHint: '留空則系統會自動產生隨機強密碼',
+            step1: '選擇主機',
+            step2: '選擇方案',
+            step3: '選擇映像檔',
+            step4: '設定實例',
+            stepHint: '第 {current} 步 / 共 {total} 步',
+            noHosts: '無可用主機',
+            noHostsHint: '目前沒有可以建立實例的主機',
+            noPackages: '無可用方案',
+            noPackagesHint: '此主機沒有可用的方案',
+            noImages: '無可用映像檔',
+            noImagesHint: '此主機沒有可用的映像檔',
+            loadingHosts: '載入主機中...',
+            loadingPackages: '載入方案中...',
+            loadingImages: '載入映像檔中...',
+            selectedHost: '已選主機',
+            selectedPackage: '已選方案',
+            selectedImage: '已選映像檔',
+            showAllImages: '顯示所有映像檔',
+            showPopularImages: '只顯示常用映像檔',
+            advancedOptions: '進階選項',
+            startAfterCreate: '建立後自動啟動',
+            autoGeneratePassword: '自動產生密碼',
+            showPassword: '顯示密碼',
+            hidePassword: '隱藏密碼',
+            passwordStrength: '密碼強度',
+            passwordWeak: '弱',
+            passwordMedium: '中等',
+            passwordStrong: '強',
+            searchImages: '搜尋映像檔...',
+            allDistros: '全部發行版',
+            popularDistros: '常用發行版',
+            otherDistros: '其他發行版',
+            selectImageVersion: '選擇版本',
+            imageSize: '映像檔大小',
+            imageType: '映像檔類型',
+            imageDescription: '映像檔說明',
+            instanceTypeTip: '容器輕量快速，虛擬機器提供完整隔離',
+            instanceTypeContainer: '容器',
+            instanceTypeVM: '虛擬機器',
+            packageSpecTip: '方案規格：{cpu} 核心 / {memory} 記憶體 / {disk} 磁碟',
+            specsCpu: '{cores} 核心',
+            specsMemory: '{size}',
+            specsDisk: '{size} 磁碟',
+            specsTraffic: '{size}/月流量',
+            noTrafficLimit: '無流量限制',
+            container: '容器',
+            vm: '虛擬機器',
+            packageLimit: '方案限制',
+            packageLimitHint: '此方案剩餘 {remaining}/{total} 配額',
+            hostLocation: '主機位置',
+            hostPublicIp: '主機 IP',
+            noLocation: '未設定位置',
+            creatingInstance: '正在建立實例...',
+            creationTip: '建立過程可能需要幾分鐘，請耐心等待',
+            summaryTitle: '確認資訊',
+            estimatedTime: '預計建立時間',
+            estimatedTimeValue: '1-5 分鐘',
+            createdPasswordHint: '實例建立成功，密碼為',
+            createdPasswordCopy: '點擊複製密碼',
+            autoStartEnabled: '將自動啟動',
+            noAvailableDistros: '無可用發行版',
+            noAvailableVersions: '此發行版無可用版本',
+        },
+        card: {
+            cpu: 'CPU',
+            memory: '記憶體',
+            disk: '磁碟',
+            network: '網路',
+            uptime: '運行時間',
+            noUptime: '未啟動',
+            quickActions: '快速操作',
+            moreActions: '更多操作',
+            viewDetails: '查看詳情',
+            openTerminal: '開啟終端機',
+            specs: '規格',
+        },
+        copy: {
+            title: '複製實例',
+            description: '建立此實例的副本',
+            targetHost: '目標主機',
+            targetHostHint: '選擇複製到哪個主機',
+            sameHost: '同一主機',
+            newName: '新實例名稱',
+            newNamePlaceholder: '輸入新實例的名稱',
+            keepName: '使用原名稱',
+            copyButton: '開始複製',
+            copying: '複製中...',
+            copySuccess: '實例複製成功',
+            copyFailed: '實例複製失敗',
+            copyStarted: '實例複製已開始，請稍候...',
+            validation: {
+                targetHostRequired: '請選擇目標主機',
+                nameRequired: '請輸入新實例名稱',
+            },
+        },
+    },
+
+    // 新增連接埠映射彈窗
+    portModal: {
+        title: '新增連接埠映射',
+        protocol: '協定',
+        bothHint: '將同時建立 TCP 和 UDP 映射，佔用 2 個配額',
+        privatePort: '內部連接埠',
+        privatePortRequired: '*',
+        privatePortPlaceholder: '容器內部服務連接埠，如 80、22、3306',
+        privatePortPlaceholderRange: '如 80 或 80-85',
+        publicPort: '公網連接埠',
+        publicPortOptional: '(選填)',
+        publicPortPlaceholder: '留空自動分配',
+        publicPortPlaceholderRange: '如 20000 或 20000-20005',
+        publicPortHint: '留空將自動從連接埠池分配可用連接埠',
+        publicPortHintWithRange: '可選範圍: {start}-{end}，留空將自動分配',
+        remark: '備註',
+        remarkOptional: '(選填)',
+        remarkPlaceholder: '如：Web服務、資料庫、SSH等',
+        cancel: '取消',
+        adding: '新增中...',
+        add: '新增',
+        // 新增：範圍輸入支援
+        rangeHint: '支援範圍輸入，如 80-85',
+        invalidPortFormat: '連接埠格式無效，請輸入單一連接埠或連接埠範圍（如 80-85）',
+        ipv6OnlySshPortHint: '22 連接埠不用映射，直接用公網 IPv6 登入 SSH 就好，正門口已經亮燈了',
+        rangeMismatch: '內網連接埠數 ({private} 個) 與公網連接埠數 ({public} 個) 不匹配',
+        publicPortOutOfRange: '公網連接埠超出允許範圍 ({start}-{end})',
+        quotaPreview: '將建立 {count} 個映射，佔用 {quota} 個配額',
+        quotaRemaining: '剩餘 {remain} 個',
+        quotaInsufficient: '配額不足，需要 {need} 個，剩餘 {remain} 個',
+    },
+
+    // 連接埠衝突解決彈窗
+    portConflict: {
+        title: '部分連接埠已被佔用',
+        subtitle: '共 {count} 個連接埠衝突',
+        description: '以下連接埠已被其他實例佔用，您可以修改為新的連接埠或使用系統建議。',
+        originalPort: '原連接埠',
+        newPort: '新連接埠',
+        occupied: '已佔用',
+        suggested: '建議',
+        rangeHint: '可用範圍: {start}-{end}',
+        useSuggested: '使用全部建議',
+        cancel: '取消',
+        confirm: '確認修改',
+    },
+
+    // 重裝系統彈窗
+    rebuildModal: {
+        title: '重裝系統',
+        dangerWarning: '危險操作',
+        warningList: {
+            dataLoss: '重裝系統將清除實例內的所有資料',
+            snapshotLoss: '所有快照將被永久刪除',
+            irreversible: '此操作不可回復！',
+        },
+        preserveInfo: '重裝系統會保留連接埠映射。',
+        manualStartHint: '重裝完成後需手動啟動實例。',
+        selectImage: '選擇新映像檔',
+        imageHint: '只能選擇該節點目前允許的映像檔',
+        selectSshKey: '選擇 SSH 金鑰',
+        noSshKey: '暫無可用金鑰',
+        addSshKeyHint: '請先在設定中新增 SSH 金鑰',
+        passwordHint: '重裝後將自動產生新的 root 密碼，可在實例詳情頁查看。',
+        cancel: '取消',
+        rebuilding: '重裝中...',
+        confirmRebuild: '確認重裝',
+    },
+
+    // 重建實例彈窗
+    recreateModal: {
+        title: '重建實例',
+        dangerWarning: '危險操作',
+        warningList: {
+            dataLoss: '重建將清除實例內的所有資料',
+            snapshotLoss: '所有快照將被永久刪除',
+            portMappingLoss: '所有連接埠映射將被刪除',
+            backupLoss: '所有備份記錄和備份策略將被刪除',
+            proxySiteLoss: '所有反代站點和快照策略將被刪除',
+            irreversible: '此操作不可回復！',
+        },
+        differenceHint: '重建與重裝不同：不需要先關機，會建立全新的實例替換舊實例。',
+        preserveInfo: '重建只保留計費狀態和配額。',
+        selectImage: '選擇新映像檔',
+        selectSshKey: '選擇 SSH 金鑰',
+        noSshKey: '暫無可用金鑰',
+        addSshKeyHint: '請先在設定中新增 SSH 金鑰',
+        cancel: '取消',
+        recreating: '重建中...',
+        confirmRecreate: '確認重建',
+    },
+
+    // 快照管理
+    snapshot: {
+        title: '快照',
+        autoPolicy: '自動快照已啟用',
+        autoPolicyEnabled: '已啟用自動快照',
+        currentPolicy: '目前策略',
+        disableAutoPolicy: '取消自動',
+        minutes: '分鐘',
+        manual: '手動管理',
+        autoSettings: '自動快照設定',
+        create: '建立',
+        noQuota: '請先分配快照配額',
+        quotaFull: '快照配額已滿',
+        createSnapshot: '建立快照',
+        noSnapshots: '暫無快照',
+        noQuotaAllocated: '未分配快照配額',
+        allocateQuotaHint: '請先在「配額」標籤頁中分配快照配額',
+        statefulSnapshot: '狀態快照',
+        restore: '還原',
+        stopInstanceFirst: '請先停止實例',
+        delete: '刪除',
+        createModal: {
+            title: '建立快照',
+            name: '名稱',
+            nameRequired: '*',
+            namePlaceholder: 'snapshot-01',
+            description: '描述',
+            descriptionPlaceholder: '選填描述',
+            stateful: '儲存記憶體狀態（狀態快照）',
+            cancel: '取消',
+            creating: '建立中...',
+            create: '建立',
+        },
+        policyModal: {
+            title: '自動快照設定',
+            enable: '啟用自動快照',
+            interval: '快照間隔',
+            intervalOptions: {
+                min10: '每 10 分鐘',
+                hour1: '每 1 小時',
+                hour6: '每 6 小時',
+                hour24: '每 24 小時',
+                day3: '每 3 天',
+            },
+            quotaFromPackage: '配額繼承自方案，目前限制為 {limit} 個。滿額後將自動刪除最早的自動快照。',
+            cancel: '取消',
+            saving: '儲存中...',
+            save: '儲存',
+        },
+        messages: {
+            createSuccess: '快照建立成功',
+            createFailed: '建立失敗',
+            deleteConfirm: '確定刪除快照「{name}」？此操作不可回復。',
+            deleteSuccess: '快照已刪除',
+            deleteFailed: '刪除失敗',
+            restoreConfirm: '確定將實例還原到快照「{name}」？目前資料將被覆蓋。',
+            restoreSuccess: '快照還原成功',
+            restoreFailed: '還原失敗',
+            stopInstanceFirst: '請先停止實例再還原快照',
+            policySaved: '自動快照策略已更新',
+            policyDisabled: '自動快照已關閉',
+            policySaveFailed: '儲存失敗',
+        },
+    },
+
+    // 備份管理
+    backup: {
+        title: '備份',
+        autoPolicy: '自動備份已啟用',
+        autoPolicyEnabled: '已啟用自動備份',
+        currentPolicy: '目前策略',
+        disableAutoPolicy: '取消自動',
+        minutes: '分鐘',
+        manual: '手動管理',
+        autoSettings: '自動備份設定',
+        create: '建立',
+        noQuota: '請先分配備份配額',
+        quotaFull: '備份配額已滿',
+        createBackup: '建立備份',
+        noBackups: '暫無備份',
+        noQuotaAllocated: '未分配備份配額',
+        allocateQuotaHint: '請先在「配額」標籤頁中分配備份配額',
+        status: {
+            creating: '建立中',
+            ready: '就緒',
+            error: '失敗',
+        },
+        export: '匯出',
+        preparing: '準備中...',
+        clickToDownload: '點擊下載',
+        downloading: '下載中...',
+        retry: '重試',
+        delete: '刪除',
+        createModal: {
+            title: '建立備份',
+            name: '名稱',
+            nameRequired: '*',
+            namePlaceholder: 'backup-01',
+            description: '描述',
+            descriptionPlaceholder: '選填描述',
+            expiresIn: '過期天數（選填）',
+            neverExpire: '永不過期',
+            days7: '7 天',
+            days14: '14 天',
+            days30: '30 天',
+            days90: '90 天',
+            year1: '1 年',
+            createHint: '備份建立可能需要幾分鐘，請耐心等待。',
+            cancel: '取消',
+            creating: '建立中...',
+            create: '建立',
+        },
+        policyModal: {
+            title: '自動備份設定',
+            enable: '啟用自動備份',
+            interval: '備份間隔',
+            intervalOptions: {
+                hour1: '每 1 小時',
+                hour6: '每 6 小時',
+                hour24: '每 24 小時',
+                day3: '每 3 天',
+            },
+            quotaFromPackage: '配額繼承自方案，目前限制為 {limit} 個。滿額後將自動刪除最早的自動備份。',
+            cancel: '取消',
+            saving: '儲存中...',
+            save: '儲存',
+        },
+        restore: '還原',
+        restoring: '還原中...',
+        rollback: '回滾',
+        restoreModal: {
+            title: '⚠️ 危險操作 - 還原備份',
+            warning: '此操作將覆蓋目前實例！',
+            warningDetail: '還原操作會停止目前實例，並用備份內容替換。如果還原失敗，您可以選擇回滾到原實例。',
+            dataLossWarning: '以下資料將被永久刪除：',
+            dataLossItems: {
+                backups: '該實例的所有其他備份',
+                snapshots: '該實例的所有快照',
+            },
+            nameChangeNotice: '還原成功後，實例名稱將變更為：{name} | restored:{backup}',
+            backupName: '備份名稱',
+            instanceName: '目標實例',
+            cancel: '取消',
+            confirm: '確認還原',
+        },
+        messages: {
+            createSuccess: '備份建立中...',
+            createFailed: '建立失敗',
+            deleteConfirm: '確定刪除備份「{name}」？此操作不可回復。',
+            deleteSuccess: '備份已刪除',
+            deleteFailed: '刪除失敗',
+            exportFailed: '準備匯出失敗',
+            downloadStarted: '下載已開始',
+            downloadFailed: '下載失敗',
+            policySaved: '自動備份策略已更新',
+            policyDisabled: '自動備份已關閉',
+            policySaveFailed: '儲存失敗',
+            restoreStarted: '正在還原備份「{name}」，請稍候...',
+            restoreInProgress: '已有還原任務正在進行中',
+            restoreCompleted: '備份還原成功！',
+            restoreFailed: '還原失敗',
+            rollbackCompleted: '回滾成功，原實例已恢復',
+            rollbackFailed: '回滾失敗',
+            uploadStarted: '上傳任務已建立',
+        },
+    },
+
+    // 主機相關
+    host: {
+        title: '主機',
+        titlePlural: '主機',
+        create: '新增主機',
+        edit: '編輯主機',
+        delete: '刪除主機',
+        status: {
+            online: '線上',
+            offline: '離線',
+            maintenance: '維護中',
+            error: '錯誤',
+        },
+        detail: {
+            title: '主機詳情',
+            overview: '總覽',
+            instances: '實例',
+            packages: '方案',
+            stats: '統計',
+            settings: '設定',
+            hostId: '主機 ID',
+            hostName: '主機名稱',
+            publicIp: '公網 IP',
+            location: '位置',
+            description: '描述',
+            owner: '擁有者',
+            createdAt: '建立時間',
+            updatedAt: '更新時間',
+            instanceCount: '實例數量',
+            packageCount: '方案數量',
+            totalResources: '總資源',
+            usedResources: '已使用資源',
+            availableResources: '可用資源',
+            cpuCores: 'CPU 核心',
+            memory: '記憶體',
+            disk: '磁碟',
+            network: '網路',
+            noLocation: '未設定位置',
+            noDescription: '無描述',
+            resourceUsage: '資源使用量',
+            resourceUsageTitle: '資源使用概況',
+            imageTitle: '映像檔',
+            imageCount: '映像檔數量',
+            tabs: {
+                overview: '總覽',
+                instances: '實例',
+                packages: '方案',
+                images: '映像檔',
+                settings: '設定',
+            },
+        },
+        list: {
+            title: '主機列表',
+            empty: '無主機',
+            emptyHint: '目前沒有任何主機',
+            searchPlaceholder: '搜尋主機...',
+        },
+        form: {
+            name: '主機名稱',
+            namePlaceholder: '輸入主機名稱',
+            publicIp: '公網 IP',
+            publicIpPlaceholder: '輸入公網 IP',
+            location: '位置',
+            locationPlaceholder: '例如：中國台灣台北',
+            description: '描述',
+            descriptionPlaceholder: '輸入主機描述',
+            apiUrl: 'API URL',
+            apiUrlPlaceholder: '例如：https://host.example.com:8443',
+            authSecret: '認證金鑰',
+            authSecretPlaceholder: '輸入認證金鑰',
+        },
+        caddy: {
+            title: 'Caddy 反向代理',
+            description: '透過 Caddy 為您的實例提供網域反向代理服務，自動申請 SSL 憑證。',
+            enabled: '已啟用',
+            disabled: '未啟用',
+            notInstalled: 'Caddy 尚未安裝，請點擊下方按鈕產生安裝指令。',
+            generateCommand: '產生安裝指令',
+            installCommand: '安裝指令',
+            commandLabel: '在主機上執行以下指令',
+            confirmInstalled: '確認已安裝',
+            viewCommand: '查看安裝指令',
+            resetCredentials: '重設憑據',
+            resetConfirm: '重設憑據後，您需要在主機上重新執行安裝指令。確定要繼續嗎？',
+            resetSuccess: '憑據已重設，請在主機上重新執行安裝指令',
+            resetFailed: '重設憑據失敗',
+            testConnection: '測試連線',
+            apiPort: 'API 連接埠',
+            username: '使用者名稱',
+            password: '密碼',
+            publicIp: '公網 IP',
+            sitesCount: '站點數量',
+            loadFailed: '載入 Caddy 狀態失敗',
+            generateFailed: '產生安裝指令失敗',
+            confirmSuccess: 'Caddy 已確認安裝',
+            confirmFailed: '確認失敗',
+            testSuccess: '連線成功',
+            testFailed: '連線失敗',
+            installHint: '安裝步驟',
+            step1: '複製上方指令，在主機上以 root 權限執行',
+            step2: '等待安裝完成，應看到「Caddy Reverse Proxy Ready」提示',
+            step3: '返回此頁面，點擊「確認已安裝」按鈕',
+            // 站點列表
+            sitesList: '反向代理站點列表',
+            sitesTotalCount: '共 {count} 個站點',
+            loadSitesFailed: '載入站點列表失敗',
+            noSites: '暫無反向代理站點',
+            instance: '實例',
+            targetPort: '目標連接埠',
+            siteActive: '已啟用',
+            sitePending: '待啟用',
+            siteError: '錯誤',
+            siteDisabled: '已停用',
+            prevPage: '上一頁',
+            nextPage: '下一頁',
+            pageInfo: '第 {current}/{total} 頁，共 {count} 筆',
+        },
+        // 節點創建實例
+        createInstance: {
+            title: '創建實例',
+            selfMode: '給自己創建',
+            giftMode: '贈送給使用者',
+            selfModeHint: '使用自己的 SSH 金鑰和初始化指令，在當前節點上創建免費實例。',
+            giftModeHint: '在當前節點上為其他使用者創建實例。付費實例僅支援贈送免費時長，不會扣費。',
+            adminModeHint: '管理員可在目前節點上為指定使用者建立免費實例，或贈送付費實例首期時長。',
+            selectPackage: '選擇套餐',
+            noPackages: '該節點暫無可用套餐',
+            noPackagesHint: '請先在套餐管理中創建並綁定套餐到此節點',
+            instanceName: '實例名稱',
+            giftDaysLabel: '免費贈送天數',
+            giftDaysHint: '僅贈送免費時長，不會從被贈送使用者餘額扣費。',
+            giftDaysRange: '範圍：1-365 天',
+            giftDuration: '贈送時長',
+            giftDurationValue: '免費 {days} 天',
+            giftOnlyFreeHint: '免費期結束後，將按所選方案價格正常續費。',
+            creating: '正在創建...',
+            success: '實例創建成功',
+            giftSuccess: '實例已為使用者 {username} 創建',
+            userInactive: '該使用者未處於可用狀態',
+            cannotGiftToSelf: '如果要給自己創建實例，請切換到「給自己創建」模式',
+        },
+        // 節點擁有者通知實例使用者
+        notify: {
+            title: '通知使用者',
+            sendToUsers: '通知使用者',
+            hint: '站內信會立即發送給本節點上所有實例對應的使用者，系統會自動去重複',
+            hintSelected: '站內信會立即發送給選中的 {count} 個實例對應的使用者，系統會自動去重複',
+            deliveryHint: '勾選郵件通知後，單一收件人會立即寄信；多位收件人則會進入佇列，並以每分鐘 1 封的節奏發送。',
+            messageTitle: '訊息標題',
+            titlePlaceholder: '輸入訊息標題',
+            titleRequired: '請輸入訊息標題',
+            messageContent: '訊息內容',
+            contentPlaceholder: '輸入訊息內容',
+            contentRequired: '請輸入訊息內容',
+            sendEmail: '同時發送郵件通知',
+            sendEmailHint: '僅會寄送給已設定電子郵件地址的使用者。批量郵件會自動排隊，避免短時間內集中發信。',
+            send: '發送通知',
+            sendSuccess: '已成功發送給 {count} 個使用者',
+            sendSuccessBase: '站內信已發送給 {count} 個使用者',
+            emailDirectSuccess: '郵件已立即發送 {count} 封',
+            emailQueuedSuccess: '郵件佇列已新增 {count} 封',
+            emailSkipped: '{count} 位使用者未設定電子郵件，已略過郵件發送',
+            emailFailed: '{count} 封郵件發送或入佇列失敗',
+            sendFailed: '發送失敗',
+            // 發送給單個實例使用者
+            sendToUser: '發送站內信',
+            sendToUserTitle: '發送站內信給 {username}',
+            sendToUserHint: '訊息將發送給實例「{instance}」的擁有者',
+            sendToUserSuccess: '訊息已發送',
+        },
+        // 修改續費價格
+        price: {
+            editPrice: '修改續費價格',
+            modalTitle: '修改續費價格',
+            hint: '修改實例「{instance}」的續費價格，新價格將於下次續費時生效，本月不受影響。',
+            currentPrice: '當前價格',
+            newPrice: '新價格',
+            placeholder: '輸入新的續費價格',
+            effectHint: '新價格將於下次續費時生效，不影響本月剩餘時間',
+            minPriceError: '價格不能為負數',
+            samePriceError: '新價格與原價格相同',
+            updateSuccess: '續費價格已更新，已通知用戶',
+            updateFailed: '更新失敗',
+        },
+        // 批量修改配置
+        batchConfig: {
+            title: '批量修改配置',
+            button: '批量配置',
+            targetAll: '應用範圍：主機全部 {count} 個實例',
+            targetSelected: '應用範圍：已選中的 {count} 個實例',
+            enableFieldHint: '勾選核取方塊以啟用對應欄位的修改',
+            // 分類
+            section: {
+                resources: '資源配置',
+                quota: '配額限制',
+                permissions: '容器權限',
+                advanced: '高級配置',
+                io: '儲存 I/O 限制',
+                network: '網路限制',
+                process: '程序與調度',
+                boot: '啟動設定',
+            },
+            // 欄位
+            cpu: 'CPU 核心數',
+            memory: '記憶體',
+            disk: '磁碟',
+            traffic: '流量',
+            swapEnabled: 'SWAP 開關',
+            swapSize: 'SWAP 大小',
+            portLimit: '連接埠數量',
+            snapshotLimit: '快照數量',
+            backupLimit: '備份數量',
+            siteLimit: '站點數量',
+            nested: '巢狀虛擬化',
+            privileged: '特權容器',
+            limitsRead: '讀取限制',
+            limitsWrite: '寫入限制',
+            limitsIngress: '入站限制',
+            limitsEgress: '出站限制',
+            limitsProcesses: '最大程序數',
+            limitsCpuPriority: 'CPU 優先級',
+            bootPriority: '啟動優先級',
+            bootAutostart: '開機自啟',
+            bootDelay: '啟動延遲',
+            shutdownTimeout: '關機逾時',
+            // 佔位符
+            placeholder: {
+                cpu: '如 1, 2, 4',
+                memory: '如 512, 1024, 2048',
+                disk: '如 10, 20, 50',
+                traffic: '如 100, 500, 1000',
+                swapSize: '如 512, 1024, 2048',
+                limit: '如 5, 10, 20',
+                ioLimit: '如 100MB',
+                priority: '如 5',
+                processLimit: '如 500, 1000',
+                bootPriority: '如 0, 1, 2',
+            },
+            // 狀態
+            processing: '正在批量修改配置...',
+            processed: '已處理 {current} / {total}',
+            // 結果
+            success: '成功',
+            failed: '失敗',
+            successAll: '批量修改成功，共 {count} 個實例',
+            partial: '部分成功：{success} 成功，{failed} 失敗',
+            allFailed: '全部失敗',
+            submitFailed: '提交失敗',
+            retrySuccess: '重試成功，共 {count} 個實例',
+            retryPartial: '重試部分成功：{success} 成功，{failed} 失敗',
+            retryFailed: '重試失敗項',
+            failedDetails: '失敗詳情',
+            instanceName: '實例名稱',
+            incusId: 'Incus ID',
+            errorReason: '錯誤原因',
+            copyIncusIds: '複製失敗的 Incus ID',
+            copiedIncusIds: '已複製 {count} 個 Incus ID',
+            // 操作
+            submit: '應用配置 ({count})',
+            close: '關閉',
+            noFieldsEnabled: '請至少啟用一個配置欄位',
+            noChanges: '沒有需要修改的配置',
+        },
+        // 批量遷移實例
+        migrate: {
+            title: '遷移實例到其他節點',
+            button: '改節點',
+            selectedCount: '已選擇 {count} 個實例',
+            targetNode: '目標節點',
+            selectTarget: '請選擇目標節點',
+            targetImage: '目標系統',
+            selectImage: '請選擇目標系統',
+            selectImageRequired: '請選擇目標系統',
+            loadImagesFailed: '載入系統列表失敗',
+            noImageAvailable: '目標節點無可用系統',
+            imageHint: '遷移會使用該系統重建實例，不再沿用實例舊映像',
+            instances: '個實例',
+            warning: '遷移注意事項',
+            warningCloudInit: '將重新執行 cloud-init 初始化',
+            warningImage: '實例將使用所選系統重建',
+            warningIp: '實例將獲得新的 IP 位址',
+            warningNotify: '遷移完成後將通知用戶',
+            confirm: '確認遷移',
+            migrating: '正在遷移...',
+            resultSummary: '成功 {success} 個，失敗 {failed} 個',
+            failedInstances: '失敗的實例',
+            loadHostsFailed: '載入節點列表失敗',
+            selectTargetRequired: '請選擇目標節點',
+            noInstancesSelected: '請先選擇要遷移的實例',
+            failed: '遷移失敗',
+            // 付費實例方案選擇
+            targetPlan: '目標方案',
+            selectPlan: '請選擇目標方案',
+            selectPlanRequired: '請選擇目標方案',
+            loadPlansFailed: '載入方案列表失敗',
+            noPlanAvailable: '目標節點無可用方案',
+            planHint: '付費實例將使用新方案的續費價格，保留原到期時間和優惠碼',
+        },
+        // 批量贈送時長
+        giftDays: {
+            title: '贈送時長',
+            button: '贈送時長',
+            hint: '為選中的付費實例免費延長到期時間，不扣除任何費用。',
+            confirm: '將為 {count} 個付費實例贈送時長',
+            daysLabel: '贈送天數',
+            daysRange: '範圍：1-365 天',
+            confirmButton: '確認贈送',
+            success: '成功為 {count} 個實例贈送 {days} 天',
+            partial: '成功 {success} 個，失敗 {failed} 個',
+            failed: '贈送失敗',
+            skipped: '跳過了 {count} 個免費實例',
+            noPaidInstances: '請選擇付費實例',
+        },
+    },
+    
+    // 方案相關
+    package: {
+        title: '方案',
+        titlePlural: '方案',
+        create: '建立方案',
+        edit: '編輯方案',
+        delete: '刪除方案',
+        detail: {
+            title: '方案詳情',
+            specs: '規格',
+            cpu: 'CPU',
+            memory: '記憶體',
+            disk: '磁碟',
+            traffic: '流量',
+            bandwidth: '頻寬',
+            price: '價格',
+            instances: '使用此方案的實例',
+        },
+        list: {
+            title: '方案列表',
+            empty: '無方案',
+            emptyHint: '目前沒有任何方案',
+            searchPlaceholder: '搜尋方案...',
+        },
+        form: {
+            name: '方案名稱',
+            namePlaceholder: '輸入方案名稱',
+            cpu: 'CPU 核心數',
+            cpuPlaceholder: '例如：2',
+            memory: '記憶體',
+            memoryPlaceholder: '例如：2048',
+            disk: '磁碟空間',
+            diskPlaceholder: '例如：20',
+            traffic: '月流量',
+            trafficPlaceholder: '例如：1000',
+            bandwidth: '頻寬',
+            bandwidthPlaceholder: '例如：100',
+            price: '價格',
+            pricePlaceholder: '例如：10',
+        },
+        specs: {
+            cpu: '{cores} 核心',
+            memory: '{size}',
+            disk: '{size} 磁碟',
+            traffic: '{size}/月流量',
+            bandwidth: '{size} 頻寬',
+            noLimit: '無限制',
+        },
+        // 套餐標籤（創建實例頁）
+        shared: '好友',
+        globalShared: '可用',
+        friendPrefix: '好友:',
+        myPackage: '我的方案',
+        soldOut: '售罄',
+    },
+
+    // 個人資料
+    profile: {
+        title: '個人設定',
+        basicInfo: '基本資料',
+        security: '安全設定',
+        changePassword: '變更密碼',
+        currentPassword: '目前密碼',
+        newPassword: '新密碼',
+        confirmNewPassword: '確認新密碼',
+        twoFactor: '兩步驗證',
+        enableTwoFactor: '啟用兩步驗證',
+        disableTwoFactor: '停用兩步驗證',
+        // 帳號部分
+        account: {
+            title: '帳號',
+            username: '使用者名稱',
+            uid: 'UID',
+            role: '角色',
+            email: '電子郵件',
+            notSet: '未設定',
+            admin: '管理員',
+            user: '使用者',
+            changeEmail: '修改',
+            bindEmail: '綁定',
+            emailDialog: {
+                titleChange: '修改電子郵件',
+                titleBind: '綁定電子郵件',
+                stepCurrent: '驗證目前電子郵件',
+                stepCurrentSkipped: '目前電子郵件未綁定',
+                stepCurrentHint: '請先驗證目前電子郵件，確認這次操作由您本人發起。',
+                stepNew: '驗證新電子郵件',
+                stepNewHint: '輸入新的電子郵件地址，並完成驗證碼驗證。',
+                noCurrentEmailHint: '目前帳戶尚未綁定電子郵件，可直接進入新電子郵件驗證並完成綁定。',
+                verifyCurrentTitle: '目前電子郵件驗證',
+                verifyCurrentDesc: '驗證碼將發送到目前電子郵件 {email}，通過驗證後才能繼續修改。',
+                currentCode: '目前電子郵件驗證碼',
+                currentCodePlaceholder: '輸入收到的 6 位驗證碼',
+                sendCurrentCode: '發送驗證碼',
+                resendCurrentCode: '重新發送',
+                currentCodeSent: '目前電子郵件驗證碼已發送',
+                currentCodeRequired: '請輸入目前電子郵件驗證碼',
+                verifyCurrentAction: '驗證目前電子郵件',
+                currentVerifiedSuccess: '目前電子郵件驗證成功',
+                currentVerificationExpired: '目前電子郵件驗證已失效，請重新驗證。',
+                verifyNewTitle: '新電子郵件驗證',
+                verifyNewDesc: '請驗證新的電子郵件地址，完成後將立即更新為新的登入電子郵件。',
+                bindEmailDesc: '請驗證新的電子郵件地址，完成後將綁定到目前帳戶。',
+                newEmail: '新電子郵件',
+                newEmailPlaceholder: '輸入新的電子郵件地址',
+                newEmailRequired: '請輸入新的電子郵件地址',
+                newEmailInvalid: '請輸入有效的電子郵件地址',
+                newEmailSame: '新電子郵件不能與目前電子郵件相同',
+                newCode: '新電子郵件驗證碼',
+                newCodePlaceholder: '輸入新電子郵件收到的 6 位驗證碼',
+                newCodeRequired: '請輸入新電子郵件驗證碼',
+                sendNewCode: '發送驗證碼',
+                resendNewCode: '重新發送',
+                newCodeSent: '新電子郵件驗證碼已發送',
+                resendIn: '{seconds}s 後可重新發送',
+                confirmAction: '確認提交',
+                updateSuccess: '電子郵件已更新',
+                verifying: '驗證中...',
+                submitting: '提交中...'
+            }
+        },
+        // 頭像
+        avatar: {
+            title: '頭像風格',
+            saveSuccess: '頭像風格已更新',
+            saveFailed: '更新頭像風格失敗',
+            styles: {
+                adventurer: '冒險者',
+                adventurerNeutral: '冒險者素雅',
+                avataaars: '扁平插畫',
+                avataaarsNeutral: '扁平插畫純淨',
+                bigEars: '大耳萌',
+                bigEarsNeutral: '大耳萌純淨',
+                bigSmile: '開懷大笑',
+                bottts: '機器人',
+                botttsNeutral: '機器人純淨',
+                croodles: '抽象塗鴉',
+                croodlesNeutral: '抽象塗鴉純淨',
+                dylan: '迪倫風',
+                funEmoji: '趣味表情',
+                glass: '毛玻璃',
+                icons: '常用圖示',
+                identicon: '幾何雜湊',
+                initials: '首字母',
+                lorelei: '洛蕾萊',
+                loreleiNeutral: '洛蕾萊純淨',
+                micah: '邁卡極簡',
+                miniavs: '迷你小人',
+                notionists: 'Notion風格',
+                notionistsNeutral: 'Notion風格純淨',
+                openPeeps: '手繪眾生相',
+                personas: '人物誌',
+                pixelArt: '像素藝術',
+                pixelArtNeutral: '像素藝術純淨',
+                rings: '同心圓',
+                shapes: '幾何圖形',
+                thumbs: '拇指人',
+            },
+        },
+        // 資源配額
+        resourceQuota: {
+            title: '資源配額',
+            hosts: '主機',
+            instances: '實例',
+            friends: '好友',
+            unit: '個',
+        },
+        // 餘額充值
+        userBilling: {
+            title: '餘額充值',
+            balance: '目前餘額',
+            frozen: '凍結金額',
+            recharge: '充值',
+            rechargeTitle: '帳戶充值',
+            selectAmount: '選擇金額',
+            customAmount: '自訂金額',
+            selectProvider: '選擇支付方式',
+            noProviders: '暫無可用支付渠道',
+            confirmRecharge: '確認充值',
+            fee: '手續費',
+            actual: '實際到帳',
+            balanceLogs: '餘額明細',
+            viewLogs: '查看明細',
+            rechargeRecords: '充值紀錄',
+            viewRecords: '查看紀錄',
+            noLogs: '暫無餘額紀錄',
+            noRecords: '暫無充值紀錄',
+            amountRequired: '請輸入充值金額',
+            providerRequired: '請選擇支付方式',
+            recharging: '充值中...',
+            rechargeSuccess: '充值成功',
+            rechargeFailed: '充值失敗',
+            loadFailed: '載入失敗',
+        },
+        // 增加配額
+        increaseQuota: {
+            title: '增加配額',
+            description: '當配額使用率達到50%時，您可以自行增加配額',
+            type: '配額類型',
+            selectType: '選擇要增加的配額類型',
+            hosts: '主機',
+            instances: '實例',
+            friends: '好友',
+            amount: '增加數量',
+            hostsAmount: '每次可增加 5 個',
+            instancesAmount: '每次可增加 50 個',
+            friendsAmount: '每次可增加 10 名',
+            submit: '提交',
+            submitting: '提交中...',
+            success: '配額增加成功',
+            failed: '配額增加失敗',
+            notEligible: '目前使用率未達到50%，無法增加配額',
+            usageTooLow: '目前使用率：{percent}%，需要達到50%才能增加配額',
+            selectTypeFirst: '請先選擇配額類型',
+            invalidAmount: '增加數量不正確',
+            hostsInvalid: '主機每次只能增加 5 個',
+            instancesInvalid: '實例每次只能增加 50 個',
+            friendsInvalid: '好友每次只能增加 10 名',
+        },
+        // 密碼部分
+        password: {
+            title: '變更密碼',
+            current: '目前密碼',
+            currentPlaceholder: '輸入目前密碼',
+            new: '新密碼',
+            newPlaceholder: '至少6位',
+            confirm: '確認新密碼',
+            confirmPlaceholder: '再次輸入新密碼',
+            mismatch: '兩次輸入的密碼不一致',
+            tooShort: '密碼長度至少6位',
+            updated: '密碼已更新',
+            updateFailed: '更新失敗',
+            updating: '更新中...',
+            update: '更新密碼',
+        },
+        // 雙重驗證
+        twoFactorAuth: {
+            title: '雙重驗證 (2FA)',
+            status: '狀態',
+            enabled: '已啟用',
+            notEnabled: '未啟用',
+            enable: '啟用 2FA',
+            disable: '停用 2FA',
+            loading: '載入中...',
+            description: '啟用雙重驗證後，登入時需要輸入驗證器應用程式產生的動態驗證碼，提高帳號安全性。',
+            setup: '設定雙重驗證',
+            scanQrCode: '使用 Google Authenticator、Microsoft Authenticator 或其他 TOTP 應用程式掃描 QR 碼',
+            manualEntry: '或手動輸入金鑰',
+            saveRecoveryCodes: '請儲存以下恢復碼，用於在無法使用驗證器時恢復帳號',
+            enterCode: '輸入驗證器顯示的6位驗證碼',
+            codePlaceholder: '000000',
+            verifying: '驗證中...',
+            confirmEnable: '確認啟用',
+            cancel: '取消',
+            disableTitle: '停用雙重驗證',
+            disableDesc: '停用後登入將不再需要驗證碼，請確認操作。',
+            password: '目前密碼',
+            passwordPlaceholder: '輸入密碼',
+            verificationCode: '驗證碼',
+            processing: '處理中...',
+            confirmDisable: '確認停用',
+            recoveryCodesStatus: '恢復碼狀態',
+            regenerate: '重新產生',
+            remaining: '剩餘',
+            used: '已使用',
+            lowCodesWarning: '恢復碼即將用完，建議重新產生',
+            regenerateTitle: '重新產生恢復碼',
+            regenerateDesc: '重新產生後，舊的恢復碼將全部失效。',
+            newCodesGenerated: '新恢復碼已產生，請妥善儲存',
+            generating: '產生中...',
+            confirmGenerate: '確認產生',
+            done: '完成',
+            enabledSuccess: '雙重驗證已啟用',
+            disabledSuccess: '雙重驗證已停用',
+            codesRegenerated: '恢復碼已重新產生，請妥善儲存',
+            getStatusFailed: '取得狀態失敗',
+            initFailed: '初始化失敗',
+            verifyFailed: '驗證失敗',
+            disableFailed: '停用失敗',
+            regenerateFailed: '重新產生失敗',
+            enterCodeError: '請輸入6位驗證碼',
+            fillPasswordAndCode: '請填寫密碼和驗證碼',
+        },
+        // 會話管理
+        sessions: {
+            title: '登入會話',
+            logoutAll: '登出所有裝置',
+            processing: '處理中...',
+            loading: '載入中...',
+            noSessions: '暫無活躍會話',
+            current: '目前',
+            ip: 'IP',
+            lastActive: '最後活躍',
+            revoke: '撤銷',
+            revoked: '會話已撤銷',
+            confirmLogout: '確定要登出目前登入嗎？',
+            confirmLogoutAll: '確定要登出所有裝置嗎？您需要重新登入。',
+            loadFailed: '載入會話失敗',
+            revokeFailed: '撤銷會話失敗',
+            revokeAllFailed: '撤銷所有會話失敗',
+            unknownDevice: '未知裝置',
+            unknownBrowser: '未知瀏覽器',
+            justNow: '剛剛',
+            minutesAgo: '{n} 分鐘前',
+            hoursAgo: '{n} 小時前',
+            daysAgo: '{n} 天前',
+        },
+        // OAuth 關聯帳號
+        oauth: {
+            title: '關聯帳號',
+            description: '綁定後可使用快捷登入',
+            bound: '已綁定',
+            notBound: '未綁定',
+            bind: '綁定',
+            unbind: '解除綁定',
+            noProviders: '暫無可用的第三方登入方式',
+            bindSuccess: '{provider} 帳號綁定成功',
+            unbindSuccess: '{provider} 帳號已解除綁定',
+            unbindFailed: '解除綁定失敗',
+            confirmUnbind: '確定解除 {provider} 帳號綁定？解除後將無法使用該方式登入。',
+            errors: {
+                notLoggedIn: '請先登入後再綁定',
+                alreadyBoundOther: '該帳號已被其他使用者綁定',
+                invalidSession: '會話已過期，請重新登入',
+                bindFailed: '綁定失敗',
+                tokenError: '授權失敗，請重試',
+                providerDisabled: '該登入方式已被停用',
+                oauthError: '認證失敗，請重試',
+                missingCode: '授權資訊缺失，請重試',
+            },
+        },
+        // SSH 金鑰
+        sshKeys: {
+            title: 'SSH 公鑰',
+            description: '用於 SSH 連接到實例',
+            add: '新增',
+            generate: '產生',
+            name: '名稱',
+            namePlaceholder: '我的筆記型電腦',
+            publicKey: '公鑰內容',
+            publicKeyPlaceholder: 'ssh-ed25519 AAAA... 或 ssh-rsa AAAA...',
+            save: '儲存',
+            cancel: '取消',
+            noKeys: '暫無公鑰',
+            addSuccess: '公鑰新增成功',
+            addFailed: '新增失敗',
+            deleteSuccess: '公鑰已刪除',
+            deleteFailed: '刪除失敗',
+            confirmDelete: '確定刪除此公鑰？',
+            invalidName: '金鑰名稱格式不正確',
+            generateSuccess: '金鑰產生成功',
+            generateFailed: '產生失敗',
+            privateKeyTitle: '請儲存私鑰',
+            privateKeyWarning: '請立即儲存私鑰',
+            privateKeyWarningDesc: '系統不會儲存您的私鑰，關閉此彈窗後將無法再次查看。請將私鑰儲存到安全的地方。',
+            privateKeyContent: '私鑰內容',
+            download: '下載私鑰',
+            noPrivateKey: '沒有可下載的私鑰',
+            copyFailed: '複製失敗',
+            downloadFailed: '下載失敗，請手動複製私鑰',
+            prevPage: '上一頁',
+            nextPage: '下一頁',
+            pageInfo: '第 {current}/{total} 頁，共 {count} 筆',
+        },
+        // 通知渠道
+        notifications: {
+            title: '通知渠道',
+            description: '接收實例、快照等事件通知',
+            add: '新增',
+            type: '類型',
+            name: '名稱',
+            namePlaceholder: '我的通知',
+            save: '新增',
+            saving: '新增中...',
+            cancel: '取消',
+            noChannels: '暫無通知渠道',
+            addSuccess: '通知渠道新增成功',
+            addFailed: '新增失敗',
+            deleteSuccess: '通知渠道已刪除',
+            deleteFailed: '刪除失敗',
+            confirmDelete: '確定刪除此通知渠道？',
+            enabled: '已啟用',
+            disabled: '已停用',
+            enable: '啟用',
+            disable: '停用',
+            toggleFailed: '操作失敗',
+            test: '測試',
+            testSuccess: '測試通知已發送',
+            testFailed: '測試失敗',
+            history: '歷史',
+            historyTitle: '通知歷史',
+            disabledSuffix: '（已停用）',
+            statsTotal: '總計: {count}',
+            statsSent: '成功: {count}',
+            statsFailed: '失敗: {count}',
+            filterAll: '全部',
+            filterSent: '成功',
+            filterFailed: '失敗',
+            loadingLogs: '載入中...',
+            noLogs: '暫無通知記錄',
+            statusSent: '成功',
+            statusFailed: '失敗',
+            statusPending: '等待',
+            errorPrefix: '錯誤: {error}',
+            eventTypes: {
+                snapshot_created: '快照建立',
+                snapshot_restored: '快照還原',
+                snapshot_deleted: '快照刪除',
+                backup_created: '備份建立',
+                backup_failed: '備份失敗',
+                backup_deleted: '備份刪除',
+                backup_restored: '備份還原',
+                backup_uploaded: '備份上傳',
+                instance_created: '實例建立',
+                instance_started: '實例啟動',
+                instance_stopped: '實例停止',
+                instance_deleted: '實例刪除',
+                auto_snapshot: '自動快照',
+                auto_backup: '自動備份',
+                traffic_warning: '流量預警',
+                traffic_throttled: '流量限速',
+                test: '測試通知',
+            },
+            telegram: {
+                botToken: 'Bot Token',
+                botTokenPlaceholder: '123456:ABC-...',
+                chatId: 'Chat ID',
+                chatIdPlaceholder: '-100123456789',
+            },
+            discord: {
+                webhookUrl: 'Webhook URL',
+                webhookUrlPlaceholder: 'https://discord.com/api/webhooks/...',
+            },
+            webhook: {
+                url: 'URL',
+                urlPlaceholder: 'https://example.com/webhook',
+                secret: 'Secret（可選）',
+                secretPlaceholder: '用於驗證簽名',
+            },
+        },
+        telegramBinding: {
+            title: 'Telegram 綁定',
+            description: '綁定後可用於私有使用者群准入等功能。',
+            refresh: '重新整理',
+            refreshing: '重新整理中',
+            unavailableTitle: '暫未啟用',
+            unavailableDescription: '管理員尚未啟用或尚未完整設定 Telegram 綁定。',
+            boundTitle: '已綁定 {name}',
+            telegramId: 'Telegram ID: {id}',
+            boundAt: '綁定時間: {date}',
+            joinHint: '如需申請私有群，私訊 {bot} 發送',
+            unlink: '解除綁定',
+            unlinking: '解除中',
+            unboundTitle: '未綁定 Telegram',
+            unboundDescription: '點擊產生連結後，會跳轉到 {bot}。在 Telegram 內點擊開始即可完成綁定。',
+            generate: '產生綁定連結',
+            generating: '產生中',
+            openTelegram: '打開 Telegram',
+            copyLink: '複製連結',
+            linkHint: '連結 10 分鐘內有效，完成綁定後回到本頁重新整理狀態。',
+            expiresAt: '過期時間: {date}',
+            generated: 'Telegram 綁定連結已產生',
+            generateFailed: '產生綁定連結失敗: {error}',
+            copied: '綁定連結已複製',
+            copyFailed: '複製失敗，請手動複製連結',
+            confirmUnlink: '確定解除 Telegram 綁定？',
+            unlinked: 'Telegram 綁定已解除',
+            unlinkFailed: '解除綁定失敗: {error}',
+        },
+        // 遠端儲存
+        storage: {
+            title: '遠端儲存',
+            description: '設定 WebDAV/FTP/SFTP 儲存，用於備份上傳',
+            add: '新增',
+            name: '名稱',
+            namePlaceholder: '我的 NAS',
+            type: '類型',
+            host: '主機位址',
+            port: '連接埠',
+            username: '使用者名稱',
+            password: '密碼',
+            passwordUnchanged: '留空則不修改',
+            basePath: '基礎路徑',
+            setAsDefault: '設為預設',
+            default: '預設',
+            setDefault: '設為預設',
+            test: '測試',
+            noConfigs: '暫無儲存設定',
+            nameHostRequired: '請填寫名稱和主機位址',
+            createSuccess: '儲存設定建立成功',
+            updateSuccess: '儲存設定更新成功',
+            deleteSuccess: '儲存設定已刪除',
+            saveFailed: '儲存失敗',
+            deleteFailed: '刪除失敗',
+            hasActiveTasks: '無法刪除：該儲存設定有上傳任務正在進行中',
+            confirmDelete: '確定刪除此儲存設定？',
+            testSuccess: '連線測試成功',
+            testFailed: '連線測試失敗',
+            setDefaultSuccess: '已設為預設',
+            setDefaultFailed: '設定失敗',
+        },
+        // 登入歷史
+        loginHistory: {
+            title: '登入歷史',
+            description: '查看您的帳號登入記錄',
+            empty: '暫無登入記錄',
+        },
+    },
+
+    // 好友系統
+    friends: {
+        title: '好友',
+        description: '管理您的好友列表，好友之間可以共享資源',
+        friendsList: '好友列表',
+        pendingRequests: '待處理的請求',
+        historyRequests: '歷史記錄',
+        myFriends: '我的好友',
+        friendRequests: '好友請求',
+        addFriend: '加好友',
+        addFriendHint: '輸入使用者名稱或電子郵件搜尋好友',
+        searchPlaceholder: '搜尋好友...',
+        noFriends: '暫無好友',
+        noFriendsHint: '您還沒有新增任何好友',
+        noSearchResult: '未找到符合的好友',
+        noHistorySearchResult: '未找到符合的歷史記錄',
+        noRequests: '暫無好友請求',
+        noRequestsHint: '目前沒有待處理的好友請求',
+        noPendingRequests: '暫無待處理的好友請求',
+        noHistoryRecords: '暫無歷史記錄',
+        noHistoryRecordsHint: '已處理的好友請求將顯示在這裡',
+        sendRequest: '發送請求',
+        cancelRequest: '取消請求',
+        acceptRequest: '接受',
+        accept: '接受',
+        rejectRequest: '拒絕',
+        reject: '拒絕',
+        removeFriend: '刪除好友',
+        removeFriendConfirm: '確定要刪除好友「{name}」嗎？',
+        confirmRemove: '確定要刪除好友 {name} 嗎？',
+        requestSent: '好友請求已發送',
+        requestAccepted: '已接受好友請求',
+        requestRejected: '已拒絕好友請求',
+        requestCancelled: '已取消好友請求',
+        friendRemoved: '好友已刪除',
+        searchUser: '搜尋使用者',
+        userNotFound: '找不到使用者',
+        alreadyFriend: '已經是好友了',
+        alreadyRequested: '已發送過好友請求',
+        cannotAddSelf: '無法新增自己為好友',
+        sentRequests: '已發送的請求',
+        receivedRequests: '收到的請求',
+        friendSince: '成為好友於',
+        addedOn: '新增於',
+        requestedOn: '請求於',
+        sentOn: '發送於',
+        sentTo: '發送給 {username}',
+        processedOn: '處理於',
+        statusAccepted: '已接受',
+        statusRejected: '已拒絕',
+        filterAll: '全部',
+        filterAccepted: '已接受',
+        filterRejected: '已拒絕',
+        hosts: '節點',
+        instances: '實例',
+        username: '使用者名稱',
+        usernamePlaceholder: '輸入對方使用者名稱',
+        usernameHint: '輸入您想新增的好友使用者名稱',
+        remark: '備註',
+        remarkPlaceholder: '請輸入備註資訊（選填）',
+        remarkHint: '例如：認識原因、用途說明等',
+        status: {
+            online: '線上',
+            offline: '離線',
+        },
+        tabs: {
+            friends: '好友列表',
+            received: '待處理的請求',
+            sent: '已發送',
+            history: '歷史記錄',
+            invites: '邀請碼',
+        },
+        userSearchPlaceholder: '輸入使用者名稱搜尋...',
+        searching: '搜尋中...',
+        searchResults: '搜尋結果',
+        noSearchResults: '找不到符合的使用者',
+        add: '新增',
+        adding: '新增中...',
+        added: '已新增',
+        pending: '等待中',
+        accepting: '接受中...',
+        rejecting: '拒絕中...',
+        removeConfirmTitle: '刪除好友',
+        removing: '刪除中...',
+        // 邀請碼
+        invites: '邀請碼',
+        generateInvite: '產生邀請碼',
+        generateInviteTitle: '產生邀請碼',
+        inviteCode: '邀請碼',
+        inviteStatus: '狀態',
+        inviteUsed: '已使用',
+        inviteExpired: '已過期',
+        inviteUnused: '未使用',
+        usedBy: '使用者',
+        createdAt: '建立時間',
+        expiresAt: '過期時間',
+        permanent: '永久有效',
+        noInvites: '暫無邀請碼',
+        noInvitesHint: '產生邀請碼後，其他使用者可以使用它們註冊帳號',
+        inviteCount: '產生數量',
+        inviteCountHint: '可以批量產生 1-10 個邀請碼',
+        expireDays: '過期天數',
+        expireDaysPlaceholder: '0 表示永不過期',
+        expireDaysHint: '設定邀請碼的過期時間，0 表示永不過期',
+        generate: '產生',
+        confirmDeleteInvite: '確定刪除邀請碼 {code}？',
+        inviteDeleted: '邀請碼已刪除',
+        inviteGenerated: '邀請碼已產生',
+        copyCode: '複製邀請碼',
+        copyLink: '複製邀請連結',
+        inviteCodeCopied: '邀請碼已複製',
+        inviteLinkCopied: '邀請連結已複製',
+        close: '關閉',
+        deleteInvite: '刪除',
+        requestAlreadyPending: '好友請求已在待處理中',
+        requestNotFound: '請求不存在或已處理',
+        friendshipNotFound: '好友關係不存在',
+        // 套餐共享
+        selectFriendHint: '請選擇一個好友',
+        selectFriendDesc: '點擊左側好友卡片來管理方案共享',
+        sharedPackages: '已共享的方案',
+        availablePackages: '可共享的方案',
+        noSharedPackages: '尚未共享任何方案',
+        addShare: '新增共享',
+        addFirstShare: '共享第一個方案',
+        removeShare: '取消共享',
+        editQuota: '編輯配額',
+        quotaMultiplier: '配額倍數',
+        quotaMultiplierHint: '例如 1、1.5、2 倍，設定好友可使用的資源比例',
+        maxInstances: '最大實例數',
+        maxInstancesHint: '限制好友可建立的實例數量',
+        noLimit: '無限制',
+        currentUsage: '目前使用',
+        shareAdded: '方案已共享',
+        shareRemoved: '已取消共享',
+        quotaUpdated: '配額已更新',
+        confirmRemoveShare: '確定要取消共享方案 {package} 嗎？',
+        addShareTitle: '共享方案',
+        shareToFriend: '共享給該好友',
+        selectPackage: '選擇方案',
+        selectPackagePlaceholder: '請選擇要共享的方案',
+        confirmShare: '確認共享',
+        editQuotaTitle: '編輯配額限制',
+        sharedTo: '共享給',
+        noPackagesToShare: '您還沒有可共享的方案',
+        createPackageFirst: '請先在「我的方案」中建立方案',
+        noPackageSearchResult: '未找到符合的方案',
+    },
+
+    // 移轉系統
+    transfers: {
+        title: '實例移轉',
+        description: '將您的實例移轉給好友',
+        myTransfers: '我的移轉',
+        receivedTransfers: '收到的移轉',
+        createTransfer: '發起移轉',
+        noTransfers: '暫無移轉記錄',
+        noTransfersHint: '您還沒有任何移轉記錄',
+        noReceivedTransfers: '暫無收到的移轉',
+        noReceivedTransfersHint: '目前沒有收到的移轉請求',
+        selectInstance: '選擇實例',
+        selectInstanceHint: '選擇要移轉的實例',
+        selectFriend: '選擇好友',
+        selectFriendHint: '選擇移轉接收者',
+        transferNote: '備註',
+        transferNotePlaceholder: '輸入備註資訊（可選）',
+        confirmTransfer: '確認移轉',
+        cancelTransfer: '取消移轉',
+        acceptTransfer: '接受移轉',
+        rejectTransfer: '拒絕移轉',
+        transferSuccess: '移轉請求已發送',
+        transferAccepted: '移轉已接受',
+        transferRejected: '移轉已拒絕',
+        transferCancelled: '移轉已取消',
+        status: {
+            pending: '待處理',
+            accepted: '已接受',
+            rejected: '已拒絕',
+            cancelled: '已取消',
+            expired: '已過期',
+        },
+        from: '來自',
+        to: '移轉給',
+        instance: '實例',
+        createdAt: '建立時間',
+        expiresAt: '過期時間',
+        noInstances: '無可移轉的實例',
+        noFriends: '無好友可選擇',
+        addFriendFirst: '請先新增好友',
+        tabs: {
+            sent: '已發送',
+            received: '已接收',
+        },
+        sentEmpty: '暫無發送的移轉請求',
+        receivedEmpty: '暫無收到的移轉請求',
+        viewInstance: '查看實例',
+        transferPending: '移轉待處理',
+        expire: '過期',
+        accept: '接受',
+        reject: '拒絕',
+        cancel: '取消',
+        note: '備註',
+        acceptConfirm: '確認接受移轉',
+        acceptConfirmText: '接受移轉後，此實例將歸您所有。確定要接受嗎？',
+        rejectConfirm: '確認拒絕移轉',
+        rejectConfirmText: '拒絕後，此移轉請求將被取消。確定要拒絕嗎？',
+        cancelConfirm: '確認取消移轉',
+        cancelConfirmText: '確定要取消此移轉請求嗎？',
+        expiresInDays: '{days} 天後過期',
+        expiresInHours: '{hours} 小時後過期',
+        expired: '已過期',
+    },
+
+    // 日誌
+    logs: {
+        title: '系統日誌',
+        module: '模組',
+        allModules: '全部模組',
+        search: '搜尋',
+        searchPlaceholder: '搜尋使用者名稱、操作或內容...',
+        reset: '重設',
+        time: '時間',
+        user: '使用者',
+        action: '操作',
+        content: '內容',
+        result: '結果',
+        system: '系統',
+        loading: '載入中...',
+        noLogs: '暫無日誌記錄',
+        loadFailed: '載入日誌失敗',
+        loadModulesFailed: '載入模組列表失敗',
+        totalRecords: '共 {total} 筆記錄，第 {page} / {totalPages} 頁',
+        success: '成功',
+        failed: '失敗',
+        expand: '展開',
+        collapse: '收起',
+    },
+
+    // 說明頁面
+    help: {
+        title: '說明中心',
+        search: '搜尋說明文件...',
+        description: '查看使用指南和常見問題',
+        backToHelp: '返回說明中心',
+        updatedAt: '更新於 {date}',
+        all: '全部',
+        noArticles: '暫無說明文件',
+        articleNotFound: '文件不存在或已被刪除',
+        totalArticles: '共 {count} 篇文件',
+        categories: {
+            general: '常規',
+            gettingStarted: '快速開始',
+            instances: '實例管理',
+            networking: '網路設定',
+            billing: '計費相關',
+            faq: '常見問題',
+        },
+    },
+
+    // 日誌模組翻譯
+    logModules: {
+        security: '安全事件',
+        instance: '實例操作',
+        snapshot: '快照操作',
+        backup: '備份操作',
+        image: '映像檔操作',
+        host: '節點操作',
+        package: '方案操作',
+        user: '使用者管理',
+        personal: '個人設定',
+        ssh_key: 'SSH 金鑰',
+        notification: '通知設定',
+        system: '系統設定',
+        auth: '認證操作',
+        storage: '遠端儲存',
+        // 相容舊資料中的中文模組名
+        '登入操作': '登入操作',
+        '安全事件': '安全事件',
+        '實例操作': '實例操作',
+        '快照操作': '快照操作',
+        '備份操作': '備份操作',
+        '映像檔操作': '映像檔操作',
+        '節點操作': '節點操作',
+        '節點組操作': '節點組操作',
+        '方案操作': '方案操作',
+        '使用者管理': '使用者管理',
+        '個人設定': '個人設定',
+        '通知設定': '通知設定',
+        '系統設定': '系統設定',
+        '認證操作': '認證操作',
+        '遠端儲存': '遠端儲存',
+    },
+
+    // 日誌操作翻譯
+    logActions: {
+        // 安全事件
+        'login_success': '登入成功',
+        'login_failed': '登入失敗',
+        'logout': '登出',
+        'register_success': '註冊成功',
+        'rate_limit_exceeded': '登入嘗試過多',
+        'invalid_invite_code': '無效邀請碼',
+        'suspicious_activity': '可疑活動',
+        'permission_denied': '權限不足',
+        'unauthorized_access': '未授權存取',
+        'admin_action': '管理員操作',
+        // 實例操作
+        'instance.create': '建立實例',
+        'instance.delete': '刪除實例',
+        'instance.start': '啟動實例',
+        'instance.stop': '停止實例',
+        'instance.restart': '重新啟動實例',
+        'instance.rebuild': '重裝系統',
+        'instance.recreate': '重建實例',
+        'instance.change_host': '改節點',
+        'instance.cloud_init_manual_complete': '手動完成初始化檢測',
+        'instance.update_quota': '更新實例配額',
+        'instance.rename': '重新命名實例',
+        // 連接埠映射
+        'port.add': '新增連接埠映射',
+        'port.delete': '刪除連接埠映射',
+        // 快照操作
+        'snapshot.create': '建立快照',
+        'snapshot.delete': '刪除快照',
+        'snapshot.restore': '還原快照',
+        // 備份操作
+        'backup.create': '建立備份',
+        'backup.delete': '刪除備份',
+        'backup.export': '匯出備份',
+        // 映像檔操作
+        'image.sync': '同步映像檔',
+        'image.delete': '刪除映像檔',
+        'image.create': '建立映像檔',
+        'image.update': '更新映像檔',
+        // 節點操作
+        'host.create': '新增節點',
+        'host.update': '更新節點',
+        'host.delete': '刪除節點',
+        'host.test': '測試節點',
+        // 方案操作
+        'package.create': '建立方案',
+        'package.update': '更新方案',
+        'package.delete': '刪除方案',
+        // 使用者管理
+        'user.ban': '封禁使用者',
+        'user.unban': '解除封禁',
+        'user.delete': '刪除使用者',
+        'user.update_quota': '更新使用者配額',
+        'user.revoke_sessions': '撤銷使用者會話',
+        // 個人設定
+        'profile.update': '更新個人資料',
+        'password.change': '變更密碼',
+        // SSH 金鑰
+        'ssh_key.add': '新增 SSH 金鑰',
+        'ssh_key.delete': '刪除 SSH 金鑰',
+        // 通知設定
+        'notification.add': '新增通知管道',
+        'notification.delete': '刪除通知管道',
+        // 安全設定
+        '2fa.setup': '設定雙重驗證',
+        '2fa.enable': '啟用雙重驗證',
+        '2fa.disable': '停用雙重驗證',
+        '2fa.recovery_reset': '重設恢復碼',
+        // 認證操作
+        'session.revoke': '撤銷會話',
+        'session.revoke_all': '撤銷所有會話',
+        // 系統設定
+        'system.config_update': '更新系統設定',
+        // 幫助文件
+        'help.create': '建立幫助文件',
+        'help.update': '更新幫助文件',
+        'help.delete': '刪除幫助文件',
+        // 備份上傳操作
+        'backup.upload': '上傳備份',
+        'backup.upload.queue': '備份上傳排隊',
+        'backup.upload.cancel': '取消備份上傳',
+        // 備份還原操作
+        'backup.restore': '還原備份',
+        'backup.restore.rollback': '回滾還原',
+        'backup.restore.cancel': '取消還原',
+        // 儲存設定操作
+        'storage.create': '建立儲存設定',
+        'storage.update': '更新儲存設定',
+        'storage.delete': '刪除儲存設定',
+        // AFF 推薦計劃
+        'aff.create_code': '建立優惠碼',
+        'aff.convert_request': '申請 AFF 轉化',
+        'aff.approve_convert': '審核通過 AFF 轉化',
+        'aff.reject_convert': '審核拒絕 AFF 轉化',
+    },
+
+    // 日誌結果翻譯
+    logResults: {
+        success: '成功',
+        failed: '失敗',
+        warning: '警告',
+    },
+
+    // 管理後台
+    admin: {
+        statistics: {
+            title: '統計',
+            description: '使用者、實例和計費資料',
+            timezone: '{timezone}',
+            refresh: '重新整理',
+            reload: '重新載入',
+            noData: '暫無統計資料',
+            loadFailed: '統計資料載入失敗：{message}',
+            unknownError: '未知錯誤',
+            tooltip: '{label} · {value}',
+            tabs: {
+                users: '使用者',
+                instances: '實例',
+                billing: '計費',
+            },
+            periods: {
+                daily: '每日',
+                monthly: '每月',
+            },
+            billingMetrics: {
+                recharge: '儲值',
+                consume: '消費',
+                aff: '返利',
+                destroyFee: '銷毀手續費',
+            },
+            ranges: {
+                last30Days: '近 30 天',
+                last12Months: '近 12 個月',
+            },
+            cards: {
+                totalUsers: '總使用者數',
+                recentDailyNewUsers: '近 30 天新增',
+                recentMonthlyNewUsers: '近 12 月新增',
+                averageNewUsers: '平均新增',
+                totalInstances: '系統總實例數',
+                availableInstances: '可用實例',
+                recentDailyCreatedInstances: '近 30 天建立',
+                recentMonthlyCreatedInstances: '近 12 月建立',
+                totalRecharge: '累計儲值',
+                totalConsume: '累計消費',
+                totalAff: '累計返利',
+                totalDestroyFee: '累計銷毀手續費',
+            },
+            captions: {
+                currentTotal: '目前累計',
+                dailyAggregate: '按日彙總',
+                monthlyAggregate: '按月彙總',
+                dailyAverage: '日均',
+                monthlyAverage: '月均',
+                nonDeletedInstances: '未刪除實例',
+                notDeletedOrSuspended: '非刪除 / 非封停',
+                completedOrders: '已完成訂單',
+                totalScope: '託管和直營合計',
+                affCommission: 'AFF 新購 / 續費',
+                userDestroyFee: '使用者銷毀實例手續費',
+            },
+            sections: {
+                newUsers: '新增使用者',
+                createdInstances: '建立實例',
+                paidFreeInstances: '付費 / 免費實例',
+                paidFreeDescription: '目前未刪除實例占比',
+                metricTrend: '{metric}趨勢',
+                billingScope: '{range}，託管和直營合計',
+            },
+            labels: {
+                paidInstances: '付費實例',
+                freeInstances: '免費實例',
+            },
+        },
+        hosting: {
+            title: '託管',
+            description: '查看符合條件的託管機主和託管經營資料',
+            loadFailed: '載入託管資料失敗：{message}',
+            unknownError: '未知錯誤',
+            tabs: {
+                owners: '託管機主',
+                zones: '專區機主',
+                hostingVipLevels: '託管 VIP 等級',
+            },
+            cards: {
+                owners: '託管機主',
+                ownersCaption: '符合託管條件的使用者',
+                hosts: '節點數',
+                hostsCaption: '機主已新增的節點',
+                instances: '實例數',
+                instancesCaption: '機主節點上的未刪除實例',
+                totalIncome: '歷史總託管收入',
+                totalIncomeCaption: '收入日誌累計',
+            },
+            owners: {
+                title: '託管機主使用者列表',
+                description: '已新增節點、已上架公開方案且歷史總託管餘額不為 0 的使用者。',
+                searchPlaceholder: '搜尋使用者名稱、ID、信箱...',
+                empty: '暫無託管機主',
+                emptyHint: '使用者需要同時滿足節點、上架方案和歷史託管餘額條件。',
+                user: '使用者',
+                vipLevel: 'VIP 等級',
+                hostingBalance: '託管餘額',
+                frozenBalance: '凍結餘額',
+                totalIncome: '歷史總收入',
+                hostCount: '節點數',
+                packageCount: '上架方案數',
+                instanceCount: '實例數',
+                createdAt: '註冊時間',
+                noEmail: '未設定信箱',
+            },
+            zones: {
+                title: '專區機主列表',
+                description: '專區機主會在開通實例頁作為獨立分頁展示，其方案不再出現在託管分頁中。',
+                createTitle: '新增專區機主',
+                createDescription: '輸入專區名，選擇託管機主使用者，並填寫圖床 LOGO 連結。',
+                name: '專區名',
+                namePlaceholder: '例如：Tokyoo 專區',
+                owner: '託管機主使用者',
+                ownerSearchPlaceholder: '搜尋可選託管機主...',
+                selectOwner: '請選擇託管機主',
+                ownerHint: '已設定專區的機主不會出現在可選列表中。',
+                logo: 'LOGO 連結',
+                logoPlaceholder: 'https://example.com/logo.png',
+                logoHint: '僅支援 http 或 https 圖片連結，系統不會保存圖片檔案。',
+                logoPreview: 'LOGO 預覽',
+                noLogo: 'LOGO',
+                previewName: '專區預覽',
+                previewHint: '開通實例頁會以圓形 LOGO 展示。',
+                create: '新增專區',
+                formRequired: '請填寫專區名、選擇託管機主並填寫 LOGO 連結',
+                logoInvalid: '請填寫有效的 http 或 https LOGO 圖片連結',
+                createSuccess: '專區機主已新增',
+                createFailed: '新增專區機主失敗',
+                loadFailed: '載入專區機主失敗：{message}',
+                deleteConfirm: '確定刪除專區「{name}」嗎？刪除後該機主方案會重新顯示在託管分頁中。',
+                deleteSuccess: '專區機主已刪除',
+                deleteFailed: '刪除專區機主失敗',
+                empty: '暫無專區機主',
+                emptyHint: '新增後會顯示在開通實例頁的直營與託管之間。',
+                zone: '專區',
+            },
+        },
+        vipRules: {
+            userTitle: '使用者 VIP 等級',
+            userDescription: '全域選擇累計充值或累計消費作為使用者會員口徑，並按該口徑動態計算會員等級，最高 VIP10。',
+            hostingTitle: '託管 VIP 等級',
+            hostingDescription: '按累計託管收入、目前託管實例數動態計算託管等級，最高 VIP10。',
+            level: '等級',
+            badgeBgColor: '標籤背景色',
+            badgeTextColor: '標籤字體色',
+            enabled: '啟用',
+            mode: '條件關係',
+            modeAny: '滿足任一',
+            modeAll: '同時滿足',
+            userMetricTitle: '使用者 VIP 統計口徑',
+            userMetricHint: '全站使用者 VIP 只能使用一種升級口徑。切換後，每個等級只儲存並計算目前口徑對應的門檻。',
+            metricRecharge: '按累計充值',
+            metricConsume: '按累計消費',
+            minRecharge: '累計充值滿（元）',
+            minConsume: '累計消費滿（元）',
+            minHostingIncome: '累計託管收入滿（元）',
+            minHostingInstances: '目前託管實例數滿',
+            noLimit: '不限制',
+            save: '儲存等級規則',
+            saveSuccess: 'VIP 等級規則已儲存',
+            saveFailed: '儲存 VIP 等級規則失敗',
+            loadFailed: '載入 VIP 等級規則失敗：{message}',
+            unknownError: '未知錯誤',
+            conditionRequired: 'VIP{level} 至少需要配置一個條件',
+            moneyThresholdInvalid: 'VIP{level} 的金額條件必須是大於 0 的數字',
+            instanceThresholdInvalid: 'VIP{level} 的實例數條件必須是正整數',
+            colorInvalid: 'VIP{level} 的標籤顏色必須是 #RRGGBB 格式',
+        },
+        vipBenefits: {
+            title: '會員福利大廳設定',
+            description: '為已啟用的使用者 VIP 等級配置可領取福利。餘額和積分會自動發放，實例獎品會建立待發放記錄。',
+            save: '儲存福利設定',
+            saveSuccess: '會員福利設定已儲存',
+            saveFailed: '儲存會員福利設定失敗',
+            loadFailed: '載入會員福利設定失敗',
+            loadPlansFailed: '載入套餐方案失敗',
+            noEnabledLevels: '暫無已啟用的使用者 VIP 等級，請先在使用者 VIP 等級中啟用等級。',
+            levelTitle: 'VIP{level} 福利',
+            levelHint: '使用者達到該等級後，可在福利大廳領取對應獎勵。',
+            addReward: '新增獎品',
+            noRewardsForLevel: '該等級暫無獎品。',
+            rewardDefaultTitle: '福利',
+            rewardTitle: '獎品標題',
+            rewardType: '獎品類型',
+            rewardDescription: '獎品說明',
+            claimLimit: '領取次數',
+            sortOrder: '排序',
+            enabled: '啟用',
+            disabled: '停用',
+            types: {
+                balance: '餘額',
+                points: '積分',
+                instance: '實例',
+            },
+            balanceTitle: '領取贈金',
+            balanceDesc: '發放到使用者帳戶餘額，可用於實例續費或新購。',
+            balanceAmount: '贈金金額（元）',
+            pointsTitle: '領取積分',
+            pointsDesc: '發放到使用者積分帳戶，可用於福利和積分消耗。',
+            pointsAmount: '積分數量',
+            instanceTitle: '領取套餐實例',
+            instanceDesc: '指定一個套餐方案，使用者領取後進入待發放狀態，後續可擴展自動建立。',
+            package: '套餐',
+            plan: '方案',
+            selectPackage: '選擇套餐',
+            selectPlan: '選擇方案',
+            instanceDays: '贈送天數',
+            instanceQuantity: '數量',
+            balancePreview: '贈金 {amount}',
+            pointsPreview: '積分 {amount}',
+            instancePreview: '套餐實例',
+            instancePreviewWithPlan: '{plan} · {quantity} 台 · {days} 天',
+            titleRequired: 'VIP{level} 的獎品標題不能為空',
+            claimLimitInvalid: 'VIP{level} 的領取次數必須是正整數',
+            amountInvalid: 'VIP{level} 的餘額或積分獎品數量必須大於 0',
+            balanceInvalid: 'VIP{level} 的贈金金額必須大於 0',
+            pointsInvalid: 'VIP{level} 的積分數量必須是正整數',
+            instancePlanRequired: 'VIP{level} 的套餐實例福利需要選擇套餐和方案',
+            instanceDaysInvalid: 'VIP{level} 的贈送天數必須是正整數',
+            instanceQuantityInvalid: 'VIP{level} 的實例數量必須是正整數',
+        },
+        title: '管理後台',
+        description: '系統管理',
+        system: {
+            title: '系統設定',
+            description: '配置系統初始參數和預設值',
+            tabs: {
+                system: '系統設定',
+                popupAnnouncement: '彈窗公告',
+                telegram: 'Telegram 設定',
+            },
+            sections: {
+                access: {
+                    title: '訪問與註冊',
+                    description: '管理註冊入口、邀請碼生成、預設配額和實例轉移規則',
+                },
+                hosting: {
+                    title: '託管與站點',
+                    description: '管理託管入口、託管公告和免費站贈送策略',
+                },
+                brand: {
+                    title: '品牌與外觀',
+                    description: '管理系統名稱、Logo、頭像服務和底部聯絡方式',
+                },
+                security: {
+                    title: '安全驗證',
+                    description: '管理 Turnstile 人機驗證和註冊信箱網域白名單',
+                },
+                mail: {
+                    title: '郵件服務',
+                    description: '管理 SMTP 郵件發送配置和測試郵件',
+                },
+                tickets: {
+                    title: '工單與附件',
+                    description: '管理工單入口和工單圖片儲存配置',
+                },
+            },
+            popupAnnouncement: {
+                title: '彈窗公告',
+                description: '配置使用者訪問網站時彈出的全站公告。',
+                content: '公告內容',
+                placeholder: '在此輸入彈窗公告內容，留空並儲存表示刪除公告，不再廣播。',
+                hint: '使用者看到後可以選擇今日不見或再也不見；公告內容更新後會按新公告重新彈出。',
+                promoTitle: '圖片推廣彈窗',
+                promoDescription: '配置新機器推廣彈窗，前台會展示圖片並引導使用者購買指定方案。',
+                promoImageUrl: '圖片 URL',
+                promoImagePlaceholder: 'https://example.com/promo.jpg',
+                promoImageHint: '建議使用清晰橫幅圖片，前台會按原比例完整顯示。',
+                promoPackage: '目標方案',
+                promoPackagePlaceholder: '選擇要推廣的方案',
+                promoPackageLoading: '正在載入方案...',
+                promoPackageEmpty: '暫無可推廣方案',
+                promoPackageHint: '圖片 URL 和目標方案都填寫後才會顯示推廣彈窗。',
+                promoPreview: '前台預覽',
+                promoPreviewEmpty: '填寫圖片 URL 後顯示預覽',
+                promoNoPackage: '尚未選擇方案',
+                promoPackageFallback: '目標方案',
+            },
+            defaultQuota: '使用者預設配額',
+            defaultQuotaDesc: '新註冊使用者將自動獲得以下配額限制',
+            quotaHost: '預設主機配額',
+            quotaHostDesc: '新使用者預設可建立主機數量',
+            quotaFriend: '預設好友配額',
+            quotaFriendDesc: '新使用者預設可新增好友數量（0 = 未授權）',
+            quotaPackage: '預設方案配額',
+            quotaPackageDesc: '新使用者預設可建立方案數量（0 = 未授權）',
+            registration: '註冊設定',
+            registrationDesc: '配置使用者註冊相關選項',
+            registrationEnabled: '開放註冊',
+            registrationEnabledDesc: '關閉後，新使用者將無法註冊，現有使用者仍可正常登入',
+            registrationOpen: '開放註冊',
+            registrationClosed: '關閉註冊',
+            requireInviteCode: '邀請碼註冊',
+            requireInviteCodeDesc: '啟用後，使用者註冊時需要填寫邀請碼',
+            openRegistration: '開放註冊',
+            inviteOnly: '僅邀請',
+            hostingFeature: {
+                title: '託管功能',
+                description: '控制託管節點與收益入口是否向新使用者顯示，已建立過節點的使用者會持續保留入口。',
+                enable: '顯示託管節點入口',
+                enableDesc: '關閉後，從未建立過節點的使用者將看不到託管節點與收益入口；已有節點使用者仍可繼續管理。',
+                marketEntry: '顯示託管方案購買入口',
+                marketEntryDesc: '控制開通實例頁面是否顯示託管專區與託管方案購買入口；關閉後使用者只能從該頁面選擇官方方案。',
+                marketEntryVisible: '顯示入口',
+                marketEntryHidden: '隱藏入口',
+                notice: '託管公告',
+                noticePlaceholder: '在此輸入託管公告內容，留空則前台不顯示',
+                noticeHint: '顯示在託管收益頁面，支援換行，留空則隱藏。',
+                visibleToAll: '所有使用者可見',
+                hiddenForNewUsers: '新使用者隱藏',
+            },
+            brand: {
+                title: '品牌設定',
+                description: '配置系統名稱、副標題與 Logo，留空則使用預設品牌。',
+                name: '系統名稱',
+                nameDesc: '顯示在側邊欄、頂部列、登入註冊頁和 SEO 資訊中。',
+                subtitle: '網站副標題',
+                subtitlePlaceholder: 'Incus 驅動的 NAT VPS 平台',
+                subtitleDesc: '顯示在公開站頭部/底部、瀏覽器預設標題和 SEO 預設描述中。',
+                logo: 'Logo 位址',
+                logoDesc: '支援 http(s) 圖片位址或站內絕對路徑，留空則使用預設 Logo。',
+            },
+            ticket: {
+                title: '工單設定',
+                description: '控制一般使用者是否可以發起工單。',
+                enable: '開放工單',
+                enableDesc: '關閉後，使用者端隱藏工單入口，一般使用者也無法透過 API 建立工單。',
+                enabled: '已開放',
+                disabled: '已關閉',
+            },
+            freeSite: {
+                title: '白嫖站',
+                description: '控制使用者端餘額頁是否展示充值和推薦計畫相關功能。',
+                enable: '啟用白嫖站',
+                enableDesc: '開啟後，使用者端餘額頁隱藏充值按鈕、充值記錄和推薦計畫，API 也會拒絕建立或重新支付充值訂單。',
+                enabled: '已啟用',
+                disabled: '未啟用',
+                registerGift: '註冊自動贈送',
+                registerGiftDesc: '開啟後，新使用者註冊成功會自動收到餘額和積分到帳通知。',
+                giftEnabled: '贈送中',
+                giftDisabled: '不贈送',
+                giftBalance: '贈送餘額',
+                giftBalanceDesc: '註冊成功後自動進入帳戶餘額，單位為元。',
+                giftPoints: '贈送積分',
+                giftPointsDesc: '註冊成功後自動進入娛樂中心積分帳戶。',
+                giftRequiresFreeSite: '需要先啟用白嫖站，才能設定註冊自動贈送。'
+            },
+            unitCount: '個',
+            reset: '重設',
+            save: '儲存設定',
+            saving: '儲存中...',
+            loadFailed: '載入設定失敗',
+            saveSuccess: '設定已儲存',
+            saveFailed: '儲存失敗',
+            notes: '說明',
+            note1: '修改預設配額只會影響新註冊的使用者，不會影響既有使用者的配額。',
+            note2: '如需修改既有使用者的配額，請前往「使用者管理」頁面單獨調整。',
+            note3: '主機配額限制使用者可以建立的主機數量（0 = 功能未授權）。',
+            note4: '好友配額限制使用者可以新增的好友數量（0 = 功能未授權）。',
+            note5: '方案配額限制使用者可以建立的方案數量（0 = 功能未授權）。',
+            turnstile: {
+                title: 'Cloudflare Turnstile',
+                description: '配置人機驗證，保護登入、註冊與敏感操作',
+                enable: '啟用 Turnstile',
+                enableDesc: '啟用後，使用者在登入、註冊與敏感操作時需要完成人機驗證',
+                enabled: '已啟用',
+                disabled: '已停用',
+                siteKey: 'Site Key',
+                siteKeyPlaceholder: '輸入 Cloudflare Turnstile Site Key',
+                siteKeyDesc: '前端使用的站點金鑰',
+                secretKey: 'Secret Key',
+                secretKeyPlaceholder: '輸入 Cloudflare Turnstile Secret Key',
+                secretKeyDesc: '後端驗證使用的金鑰（請妥善保管）',
+                helpText: '前往 Cloudflare 控制台取得金鑰：',
+            },
+            avatar: {
+                title: '頭像服務',
+                description: '配置使用者頭像生成服務，預設使用 DiceBear 官方 API',
+                apiBase: 'API 位址',
+                apiBaseDesc: 'DiceBear 頭像 API 基礎位址，可自建服務以提高存取速度',
+                helpText: '了解如何自建 DiceBear 服務：',
+            },
+            smtp: {
+                title: 'SMTP 郵件服務',
+                description: '配置 SMTP 伺服器以啟用電子郵件驗證功能，使用者註冊時需要驗證信箱',
+                enable: '啟用電子郵件驗證',
+                enableDesc: '啟用後，使用者註冊時需要透過電子郵件驗證碼驗證',
+                enabled: '已啟用',
+                disabled: '已停用',
+                host: 'SMTP 伺服器',
+                hostPlaceholder: 'smtp.example.com',
+                port: 'SMTP 連接埠',
+                secure: '使用 SSL/TLS',
+                secureHint: '連接埠 465 通常需要啟用，連接埠 587 通常不需要',
+                username: '使用者名稱',
+                usernamePlaceholder: '信箱帳號或使用者名稱',
+                password: '密碼',
+                passwordPlaceholder: '授權碼或密碼',
+                fromEmail: '寄件者信箱',
+                fromEmailPlaceholder: "noreply{'@'}example.com",
+                fromName: '寄件者名稱',
+                testConnection: '測試連線',
+                testing: '測試中...',
+                testSuccess: 'SMTP 連線測試成功',
+                testFailed: 'SMTP 連線測試失敗',
+                sendTestEmail: '發送測試郵件',
+                sendTestEmailDesc: '發送一封測試郵件到指定信箱，確認郵件發送功能是否正常',
+                testEmailPlaceholder: '輸入收件者信箱地址',
+                sending: '發送中...',
+                send: '發送',
+                invalidEmail: '請輸入有效的信箱地址',
+                testEmailSent: '測試郵件已發送至 {email}',
+                testEmailFailed: '測試郵件發送失敗',
+                helpText: '請確認 SMTP 伺服器位址、連接埠、使用者名稱與密碼正確。常見郵件服務商需要使用授權碼而不是登入密碼。',
+            },
+            emailDomain: {
+                title: '信箱網域白名單',
+                description: '限制只允許特定信箱網域進行註冊，提高使用者品質',
+                enable: '啟用信箱網域白名單',
+                enableDesc: '啟用後，只有白名單中的信箱網域才能註冊',
+                enabled: '已啟用',
+                disabled: '已停用',
+                allowedDomains: '允許的信箱網域',
+                allowedDomainsPlaceholder: 'gmail.com,outlook.com,icloud.com\n每行一個網域或用逗號分隔\n留空則使用預設白名單',
+                allowedDomainsDesc: '輸入允許註冊的信箱網域，可用逗號分隔或每行一個。留空則使用預設白名單（包含 Gmail、Outlook、iCloud、Yahoo、Proton 等主流信箱服務）。',
+                helpText: '預設白名單包含：Gmail、Outlook/Hotmail、iCloud、Yahoo、Zoho、Proton、Fastmail、Tuta、Posteo、Disroot、Riseup 等主流信箱服務。',
+            },
+            transfer: {
+                title: '移轉設定',
+                description: '配置實例移轉功能的相關參數',
+                feeLabel: '移轉手續費',
+                feeUnit: '元/次',
+                feeDesc: '使用者發起移轉時需要支付的手續費（0 表示免費），對方拒絕接收時將自動退還',
+                feeRangeError: '移轉手續費必須在 0-{max} 元之間，最多支援兩位小數',
+            },
+            footerLinks: {
+                title: '底部聯絡方式',
+                description: '配置側邊欄底部的電子郵件按鈕',
+                email: '聯絡信箱',
+                emailPlaceholder: "support{'@'}example.com 或 mailto:support{'@'}example.com",
+                emailDesc: '留空則隱藏信箱按鈕；支援填寫信箱地址或完整 mailto: 連結。',
+                telegram: 'Telegram 群組連結',
+                telegramPlaceholder: 'https://t.me/your_group',
+                telegramDesc: '留空則隱藏 Telegram 按鈕。',
+            },
+            ticketImages: {
+                title: '工單圖片儲存',
+                description: '配置工單圖片上傳到蘭空圖床。面板只轉發上傳並記錄中繼資料，不在本地落盤。',
+                baseUrl: 'Lsky 位址',
+                baseUrlPlaceholder: 'https://img.example.com',
+                baseUrlDesc: '蘭空圖床站點根位址，不要追加 /api/v1/upload',
+                token: 'Lsky Token',
+                tokenPlaceholder: '輸入蘭空圖床 API Token',
+                tokenDesc: '僅後端使用，不會下發到前端',
+                apiVersion: 'API 版本',
+                apiVersionDesc: '根據你的蘭空版本選擇上傳接口版本',
+                targetId: '策略/儲存 ID',
+                targetIdPlaceholder: 'v1 填 strategy_id，v2 填 storage_id',
+                targetIdDesc: '可留空，留空時使用蘭空預設策略或預設儲存',
+            },
+        },
+        images: {
+            noImagesForArchitecture: '目前架構下沒有映像檔',
+        },
+        // 網域郵箱管理
+        mail: {
+            title: '郵箱管理',
+            description: '管理郵箱源、方案和使用者訂閱',
+            tabs: {
+                sources: '郵箱源',
+                plans: '方案',
+                subscriptions: '訂閱',
+                domains: '網域',
+            },
+            createSource: '新增郵箱源',
+            editSource: '編輯郵箱源',
+            sourceCreated: '郵箱源建立成功',
+            sourceUpdated: '郵箱源更新成功',
+            sourceDeleted: '郵箱源已刪除',
+            confirmDeleteSource: '確定要刪除郵箱源 {name} 嗎？請確保已無關聯方案。',
+            noSources: '暫無郵箱源，請先新增',
+            createPlan: '新增方案',
+            editPlan: '編輯方案',
+            planCreated: '方案建立成功',
+            planUpdated: '方案更新成功',
+            planDeleted: '方案已刪除',
+            confirmDeletePlan: '確定要刪除方案 {name} 嗎？',
+            noPlans: '暫無方案，請先新增',
+            noSubscriptions: '暫無訂閱記錄',
+            noDomains: '暫無網域記錄',
+            searchSubscriptions: '搜尋使用者名稱、電子郵件或ID...',
+            searchDomains: '搜尋網域、使用者名稱、電子郵件或ID...',
+            fillRequired: '請填寫必填欄位',
+            createSourceFirst: '請先建立郵箱源',
+            region: '地區',
+            apiEndpoint: 'API 端點',
+            apiKey: 'API 密鑰',
+            smtpHost: 'SMTP 伺服器',
+            smtpPort: 'SMTP 連接埠',
+            webmailUrl: 'Webmail 網址',
+            sourcePlaceholder: '例如：美國資料中心',
+            source: '郵箱源',
+            domainLimit: '網域限制',
+            diskLimit: '磁碟限制',
+            diskLimitGb: '磁碟限制(GB)',
+            price: '價格',
+            billingCycle: '計費週期',
+            planPlaceholder: '例如：基礎版',
+            user: '使用者',
+            plan: '方案',
+            expiresAt: '到期時間',
+            domain: '網域',
+            accounts: '帳戶數',
+            plans: '方案數',
+            unsub: {
+                button: '退訂',
+                title: '退訂郵箱',
+                refundType: '退款方式',
+                refundNone: '不退款',
+                refundNoneDesc: '直接取消訂閱，不退還任何費用',
+                refundFull: '全額退款',
+                refundFullDesc: '退還方案全價 {amount}',
+                refundRemaining: '剩餘價值退款',
+                refundRemainingDesc: '按剩餘有效期比例退款',
+                reason: '退款原因',
+                reasonPlaceholder: '請輸入退款原因，將記錄到餘額日誌...',
+                reasonRequired: '退款時必須填寫原因',
+                confirm: '確認退訂',
+                success: '訂閱已退訂',
+                successWithRefund: '訂閱已退訂，已退款 ¥{amount}',
+            },
+        },
+        // 管理員建立實例
+        instanceCreate: {
+            title: '建立實例',
+            description: '為使用者贈送實例，無需支付任何費用',
+            targetUser: '目標使用者',
+            usernamePlaceholder: '輸入使用者名稱',
+            usernameHint: '實例將建立到該使用者帳戶下',
+            userHint: '實例將建立到該使用者帳戶下',
+            checkUser: '查詢',
+            checking: '查詢中...',
+            userFound: '使用者找到 (ID: {id})',
+            userNotFound: '使用者不存在',
+            userNotFoundHint: '請檢查使用者名稱是否正確',
+            noSshKey: '該使用者未設定 SSH 金鑰',
+            noSshKeyHint: '請讓使用者先在個人設定中新增 SSH 金鑰',
+            orderSummary: '贈送摘要',
+            freeGift: '免費贈送',
+            freeGiftHint: '此實例由管理員免費建立，不計入收費統計',
+            createFor: '建立給',
+            create: '建立實例',
+            creating: '建立中...',
+            submit: '建立實例',
+            success: '實例建立成功',
+            selectUser: '請先選擇目標使用者',
+            createSuccess: '實例已建立，將顯示在使用者 {username} 的實例列表中',
+            createFailed: '建立實例失敗',
+            selectUserFirst: '請先查詢並確認目標使用者',
+            packageScope: {
+                official: '自營方案',
+                hosted: '託管方案',
+            },
+            // 付費實例相關
+            instanceType: '實例類型',
+            freeInstance: '免費實例',
+            paidInstance: '付費實例',
+            selectPlan: '選擇方案',
+            noPlanHint: '該套餐暫無可用方案',
+            chargeFirstMonth: '扣除首月費用',
+            chargeFirstMonthHint: '從使用者餘額扣除首月費用',
+            noChargeFirstMonthHint: '首月免費贈送，次月起正常計費',
+            planPrice: '方案月費',
+            setupFee: '開通費',
+            totalCharge: '本次扣費',
+            freeFirstMonth: '首月免費',
+            userBalance: '使用者餘額',
+            insufficientBalance: '使用者餘額不足',
+            paidSummary: '付費摘要',
+            paidInstanceHint: '建立付費實例，按方案計費',
+        },
+        dashboard: '儀表板',
+        hosts: {
+            title: '節點管理',
+            description: '管理宿主機和節點組',
+            create: '新增宿主機',
+            address: '地址',
+            status: '狀態',
+            online: '線上',
+            offline: '離線',
+            maintenance: '維護中',
+            hostsTab: '宿主機',
+            searchPlaceholder: '搜尋宿主機...',
+            noHosts: '暫無宿主機',
+            name: '名稱',
+            resources: '資源',
+            instances: '實例',
+            actions: '操作',
+            cpu: 'CPU',
+            cpuQuota: 'CPU 配額',
+            memory: '記憶體',
+            memoryQuota: '記憶體配額',
+            disk: '硬碟',
+            diskUsage: '硬碟使用情況',
+            cores: '核',
+            allowanceLimit: '額配上限',
+            memoryLimit: '記憶體上限',
+            instanceType: '類型',
+            typeContainer: '容器',
+            typeVm: '虛擬機',
+            typeBoth: '兩者',
+            edit: '編輯',
+            test: '測試',
+            delete: '刪除',
+            testSuccess: '連線成功',
+            testFailed: '連線失敗',
+            confirmDelete: '確定刪除宿主機 "{name}"？',
+            hostDeleted: '宿主機已刪除',
+            deleteFailed: '刪除失敗',
+            // 新增/編輯宿主機
+            addHost: '新增宿主機',
+            editHost: '編輯宿主機',
+            hostName: '名稱',
+            hostNameHint: '只能包含英文字母、數字、- 和 _',
+            hostNameRequired: '請輸入節點名稱',
+            hostDesc: '描述',
+            apiUrl: 'API URL',
+            ipAddress: '連線地址',
+            ipAddressHint: '支持 IPv4、IPv6 裸地址或域名',
+            ipAddressRequired: '請輸入伺服器地址',
+            apiPort: 'API 連接埠',
+            apiPortHint: '預設 8443',
+            tokenPrompt: '若安裝時提示輸入安全通訊 Token，請複製下方內容並貼上：',
+            copyToken: '複製 Token',
+            country: '國家或地區',
+            certPath: '憑證路徑',
+            keyPath: '金鑰路徑',
+            natPublicIp: '網卡IP',
+            natPublicIpPlaceholder: '輸入伺服器的網卡IP',
+            natConfig: 'NAT 設定',
+            natPublicIpv4: '公網 IPv4',
+            natPublicIpv4Placeholder: '請輸入使用者訪問時顯示的公網 IPv4',
+            natPublicIpv4Desc: '使用者訪問 IPv4 連接埠映射時看到的公網 IPv4 地址。',
+            natPublicIpv6: '公網 IPv6',
+            natPublicIpv6Placeholder: '例如 2600:1900:41a0:5bb::',
+            natPublicIpv6Desc: '用於向使用者展示的公網 IPv6 地址，不一定是實際監聽連接埠時使用的地址。',
+            natBindIpv4: '監聽 IPv4',
+            natBindIpv4Placeholder: '留空則自動識別，例如 0.0.0.0 或 10.170.0.3',
+            natBindIpv4Desc: '實際綁定 IPv4 連接埠時使用的地址。留空後由系統自動選擇。',
+            natBindIpv6: '監聽 IPv6',
+            natBindIpv6Placeholder: '留空則自動識別，例如 2600:1900:41a0:5bb::',
+            natBindIpv6Desc: '實際綁定 IPv6 連接埠時使用的地址。留空後由系統自動選擇。',
+            natPublicIpv6Invalid: '公網 IPv6 地址格式無效',
+            natBindIpv6Invalid: '監聽 IPv6 地址格式無效',
+            portRangeStart: '連接埠範圍起始',
+            portRangeEnd: '連接埠範圍結束',
+            portRangeEndMustBeGreater: '連接埠範圍結束不能小於起始',
+            cpuAllowanceMax: '總 CPU 時間片配額',
+            memoryMax: '記憶體最大值',
+            instanceTypeLabel: '實例類型',
+            networkModeLabel: '網路模式',
+            networkModeNat: 'IPv4 NAT',
+            networkModeNatIpv6: 'IPv4 NAT & IPv6',
+            networkModeNatIpv6Nat: 'IPv4 NAT & IPv6 NAT',
+            networkModeIpv6Only: 'IPv6 Only',
+            networkModeIpv6Nat: 'IPv6 NAT',
+            autoAssign: '自動分配',
+            hostAdded: '宿主機新增成功',
+            hostUpdated: '宿主機更新成功',
+            typeChangeWarning: '節點類型變更警告',
+            addFailed: '新增失敗',
+            updateFailed: '更新失敗',
+            // 初始化設定
+            initConfig: '初始化設定',
+            // 儲存設定
+            storageConfig: '儲存設定',
+            storageDriver: '儲存驅動',
+            storageDriverZfs: 'ZFS (推薦)',
+            storageDriverLvm: 'LVM',
+            storageType: '儲存類型',
+            storageTypeLoop: 'Loop 檔案',
+            storageTypeDisk: '實體磁碟',
+            storagePath: '裝置路徑',
+            storagePathHint: '如 /dev/sdb',
+            storageSize: '儲存大小',
+            // 網路設定
+            networkConfig: '網路設定',
+            networkOption: '網路選項',
+            networkOptionHint: '選擇容器實例的網路出口方式',
+            independentIpv6: '獨立 IPv6',
+            ipv6Mode: 'IPv6 模式',
+            ipv6Routed: 'Routed',
+            ipv6Nat: 'NAT',
+            ipv6Disabled: '停用',
+            ipv6Subnet: 'IPv6 子網路',
+            ipv6SubnetHint: '分配給容器的 IPv6 子網路段',
+            ipv6SubnetRequired: '請輸入 IPv6 網段',
+            ipv6SubnetInvalid: 'IPv6 網段格式無效，需要包含 CIDR 前綴（如 /48）',
+            ipv6Gateway: 'IPv6 閘道',
+            ipv6ParentInterface: 'IPv6 父介面',
+            ipv6ParentInterfaceHint: 'IPv6 routed 模式使用的宿主機實體網卡名（如 eth0）',
+            ipv6ParentInterfaceRequired: '請輸入 IPv6 父介面',
+            enableApi: '啟用 API',
+            // 核心參數
+            sysctlConfig: '核心參數',
+            sysctlConfigHint: '自訂 sysctl 設定，留空使用預設值',
+            resetSysctl: '恢復預設',
+            enableBBR: '啟用 BBR',
+            bbrEnabled: 'BBR 已啟用',
+            // 安裝腳本
+            installScript: '安裝腳本',
+            runOnHost: '請在宿主機上以 root 權限執行以下命令：',
+            copyCommand: '複製命令',
+            step1RunScript: '執行安裝腳本',
+            step2Verify: '驗證並連線',
+            verifyHint: '腳本執行完成後，點擊下方按鈕驗證連線',
+            verifyAndConnect: '驗證並連線',
+            verifying: '驗證中...',
+            verifySuccess: '納管成功！',
+            verifyFailed: '驗證失敗',
+            reinstall: '重新安裝',
+            reinstallScript: '重新安裝腳本',
+            reinstallFailed: '產生安裝命令失敗',
+            waitingInstall: '等待安裝完成...',
+            installSuccess: '安裝成功！',
+            tokenExpired: 'Token 已過期，請重新建立宿主機',
+            // 詳情頁
+            tabInfo: '資訊',
+            tabConfig: '設定',
+            tabInstances: '實例',
+            tabStorage: '儲存',
+            tabImages: '映像檔',
+            tabOps: '運維',
+            tabCreate: '創建',
+            basicInfo: '基本資訊',
+            config: '設定',
+            resourceLimits: '資源限制',
+            transferControl: '轉移控制',
+            transferEnabled: '允許轉移',
+            transferEnabledHint: '關閉後，該節點上的實例將無法發起轉移請求',
+            extraConfig: '額外設定',
+            trafficConfig: '流量設定',
+            trafficResetDay: '流量重置日',
+            trafficResetDayHint: '每月何日重置實例流量（可設定 1-28）',
+            enableResourcePool: '參與資源池玩法',
+            enableResourcePoolHint: '開啟後，該節點的實例可參與簽到/抽獎資源應用',
+            announcement: '節點公告',
+            announcementPlaceholder: '在此輸入公告內容，將顯示在該節點下所有實例的詳情頁',
+            announcementHint: '留空則不顯示公告，支援換行',
+            probeUrl: '探針地址',
+            probeUrlPlaceholder: '輸入節點探針監控頁面地址',
+            probeUrlHint: '可以輸入此節點的探針、腳本測試結果等連結，配置後，用戶在選擇節點時可點擊圖標跳轉查看',
+            portRange: '連接埠範圍',
+            portsUsed: '已用連接埠',
+            recalculateResources: '對齊已用',
+            recalculateResourcesTip: '重新計算資源使用量，並將配額對齊到已用配額',
+            recalculateSuccess: '資源校對完成，配額已對齊',
+            recalculateNoChanges: '資源數據正確，無需修正',
+            recalculateFailed: '資源校對失敗',
+            ops: {
+                title: '宿主機運維中心',
+                description: '優先執行非破壞性盤點、基線同步與網路修復，用於舊節點納管補齊與狀態校準。',
+                discover: '實例盤點',
+                baselineSync: '基線同步',
+                networkRepair: '網路修復',
+                refresh: '刷新結果',
+                managed: '已納管實例',
+                orphaned: '未納管遺留實例',
+                missing: '資料庫異常實例',
+                summary: '摘要',
+                totalIncus: '宿主機實例',
+                totalDb: '資料庫實例',
+                managedCount: '已納管',
+                orphanedCount: '未納管',
+                missingCount: '異常缺失',
+                runSuccess: '操作執行成功',
+                runFailed: '操作執行失敗',
+                lastRunAt: '最近執行時間',
+                empty: '暫無結果，請先執行上方運維操作。',
+                sectionInventory: '宿主機實例盤點',
+                sectionRepair: '安全修復動作',
+                sectionReport: '執行結果',
+                resultInventory: '盤點結果',
+                resultBaseline: '基線同步結果',
+                resultNetwork: '網路修復結果',
+                resultPreview: '實例預檢結果',
+                resultInstanceSync: '單實例同步結果',
+                resultInstanceRestart: '單實例重啟結果',
+                resultDanger: '高風險動作結果',
+                instanceName: '實例名',
+                instanceType: '類型',
+                incusStatus: '宿主機狀態',
+                dbStatus: '資料庫狀態',
+                dbInstance: '資料庫實例',
+                changes: '變更數',
+                synced: '已同步',
+                failed: '失敗',
+                total: '總數',
+                ipv4: 'IPv4',
+                ipv6: 'IPv6',
+                details: '詳情',
+                noManaged: '未發現已納管實例',
+                noOrphaned: '未發現未納管遺留實例',
+                noMissing: '未發現資料庫異常實例',
+                baselineHint: '同步宿主機資源占用，並批次回填執行中實例的狀態與 IP。',
+                networkHint: '批次校準非刪除實例的狀態、IPv4 與 IPv6 記錄。',
+                discoverHint: '讀取宿主機當前所有 Incus 容器 / KVM，並與資料庫記錄對帳。',
+                selectInstanceHint: '從已納管實例中選擇一個對象，執行單實例同步、重啟或高風險動作。',
+                instancePanel: '單實例操作面板',
+                loadPreview: '載入預檢',
+                syncInstance: '同步實例',
+                safeRestart: '安全重啟',
+                forceRestart: '強制重啟',
+                dangerZone: '高風險操作區',
+                dangerHint: '這裡的動作會清空或替換實例系統資料，僅建議在盤點、同步與重啟均無法解決問題時使用。',
+                rebuild: '重裝目前實例',
+                recreate: '重建替換實例',
+                imageAlias: '映像別名',
+                imageAliasPlaceholder: '例如 ubuntu/22.04 或 debian/12',
+                selectImage: '映像選擇',
+                imagePlaceholder: '請選擇目標映像',
+                loadingImages: '正在載入可用映像...',
+                noImagesAvailable: '目前此節點暫無可用映像',
+                sshKeyId: 'SSH 金鑰 ID',
+                selectSshKey: 'SSH 金鑰',
+                sshKeyPlaceholder: '不指定 SSH 金鑰',
+                loadingSshKeys: '正在載入 SSH 金鑰...',
+                noSshKeysAvailable: '該實例使用者暫無 SSH 金鑰，不指定時將沿用後端預設處理',
+                sshKeyOptionalHint: '可選，不指定時使用實例使用者的預設金鑰策略',
+                customInitCommandIds: '自訂初始化命令 ID',
+                selectInitCommands: '初始化命令',
+                loadingInitCommands: '正在載入初始化命令...',
+                noInitCommandsAvailable: '目前映像沒有可選初始化命令',
+                optionalField: '可選項，可留空',
+                confirmDangerTitle: '執行前確認',
+                riskCheckbox: '我已知悉此操作可能導致實例系統或資料不可恢復，並確認這是預期行為。',
+                confirmTextHint: '請輸入實例真實名稱以確認，例如 u2-g65uoeo1',
+                ownerUserId: '使用者 ID',
+                fullInstanceName: '完整實例名稱',
+                selectedOnlyHint: '單實例操作僅對目前選取的實例生效，不會影響其他未選取的實例。',
+                localizedNone: '無需操作',
+                dangerActionType: '動作類型',
+                dangerConfirm1Title: '第一次確認高風險操作',
+                dangerConfirm1Hint: '請再次確認你即將執行不可逆的高風險動作。',
+                dangerConfirm1Btn: '確認繼續',
+                dangerConfirm2Title: '第二次確認高風險操作',
+                dangerConfirm2Hint: '這是最後一次確認，執行後將立即建立任務。',
+                dangerConfirm2Btn: '確認執行',
+                dangerConfirmStep: '確認步驟 {step} / {total}',
+                executeDangerAction: '執行高風險動作',
+                suggestedAction: '建議動作',
+                activeTask: '活躍任務',
+                latestInstanceAction: '最近單實例動作',
+            },
+            statusOnline: '線上',
+            statusOffline: '離線',
+            statusMaintenance: '維護中',
+            invalidId: '無效的節點 ID',
+            loadFailed: '載入失敗',
+            noInstances: '該節點上暫無實例',
+            search: '搜尋',
+            instanceSearchPlaceholder: '搜尋實例ID、名稱、使用者名稱、電郵、IP地址...',
+            imagesOnHost: '節點 {name} 上的映像檔',
+            noImagesOnHost: '該節點上暫無映像檔',
+            selectImagesToSync: '選擇要同步到節點 {name} 的映像檔',
+            allImagesSynced: '所有映像檔都已同步到該節點',
+            imagePolicy: {
+                title: '映像檔策略',
+                description: '設定節點「{name}」在開通與重裝時可選的映像檔範圍',
+                defaultMode: '使用面板預設映像檔',
+                defaultDesc: '不單獨限制此節點，開通與重裝時會依節點架構與實例類型載入全部可用映像檔。',
+                restrictedMode: '限制為以下映像檔',
+                restrictedDesc: '只有勾選的映像檔會出現在此節點的開通與重裝列表中。',
+                selectableImages: '可選映像檔',
+                defaultHint: '目前此節點未單獨限制映像檔。',
+                selectedCount: '目前已選擇 {count} 個映像檔',
+                searchPlaceholder: '搜尋映像檔名稱、別名或發行版...',
+                emptySelection: '限制模式下至少要選擇一個映像檔，否則請切回預設模式。',
+                noImages: '目前沒有符合此節點架構與實例類型的可見映像檔。',
+                loadFailed: '載入映像檔策略失敗',
+                saveSuccess: '映像檔策略已儲存',
+                saveFailed: '儲存映像檔策略失敗',
+            },
+            addHostDesc: '新增新的宿主機節點',
+            allocated: '已分配',
+            includesPageCache: '包含頁面快取',
+            syncTime: '同步時間',
+            deleteHost: '刪除宿主機',
+            deleteWarning: '此操作不可撤銷！刪除宿主機前，請確保該節點上沒有任何實例。',
+            deleteConfirmHint: '請輸入宿主機名稱 "{name}" 以確認刪除：',
+            enterHostName: '宿主機名稱',
+            confirmDeleteBtn: '確認刪除',
+            deleteNameMismatch: '輸入的名稱不匹配',
+            hasInstances: '該節點上還有 {count} 個實例，請先刪除或遷移實例',
+            checkFailed: '檢查失敗',
+            // 批次延期
+            batchExtend: '贈送時長',
+            extendHint: '該節點下共有 {count} 個付費實例將被延期',
+            extendDaysLabel: '延期天數',
+            extendDaysPlaceholder: '請輸入 1-365 的整數',
+            extendDaysInvalid: '請輸入有效的延期天數（1-365）',
+            confirmExtendBtn: '確認贈送',
+            extendSuccess: '已成功為 {count} 個付費實例延期 {days} 天',
+            extendFailed: '批次延期失敗',
+            // 批次刪除實例
+            selectedCount: '已選擇 {count} 個實例',
+            noInstanceSelected: '請勾選實例以使用批次操作',
+            batchDelete: '批次刪除',
+            batchDeleteTitle: '批次刪除實例',
+            batchDeleteWarning: '此操作不可撤銷！刪除後實例資料將無法復原。',
+            batchDeleteConfirm: '確定要刪除這 {count} 個實例嗎？',
+            confirmBatchDelete: '確認刪除',
+            databaseOnlyDelete: '僅資料庫刪除',
+            batchDeleteSuccess: '成功刪除 {count} 個實例',
+            batchDeletePartial: '成功刪除 {success} 個實例，{failed} 個失敗',
+            batchDeleteFailed: '批次刪除失敗',
+            batchDeleteRefundWarning: '刪除付費實例將自動退還剩餘價值給用戶，並從您的託管餘額扣除相應金額。',
+            batchDeleteRefundTotal: '總退款金額',
+            instanceName: '實例名稱',
+            instanceUser: '所屬用戶',
+            refundAmount: '退款金額',
+            // 批次同步實例狀態
+            batchSyncStatus: '同步狀態',
+            batchSyncSuccess: '成功同步 {synced} 個實例，{changed} 個狀態已更新',
+            batchSyncWithIpv4: '成功同步 {synced} 個實例，{changed} 個狀態更新，{ipv4Changed} 個內網 IP 更新',
+            batchSyncPartial: '同步 {synced} 個，更新 {changed} 個，失敗 {failed} 個',
+            batchSyncNoChange: '成功同步 {synced} 個實例，狀態無變化',
+            batchSyncFailed: '同步狀態失敗',
+            // 批次封停實例
+            batchSuspend: '批次封停',
+            batchSuspendTitle: '批次封停實例',
+            batchSuspendWarning: '封停後，實例所有者將無法對實例進行任何操作，直到解除封停。',
+            batchSuspendConfirm: '確定要封停這 {count} 個實例嗎？',
+            confirmBatchSuspend: '確認封停',
+            batchSuspendSuccess: '成功封停 {count} 個實例',
+            batchSuspendPartial: '成功封停 {success} 個實例，{failed} 個失敗',
+            batchSuspendFailed: '批次封停失敗',
+            batchUnsuspend: '批次解封',
+            batchUnsuspendSuccess: '成功解封 {count} 個實例',
+            batchUnsuspendPartial: '成功解封 {success} 個實例，{failed} 個失敗',
+            batchUnsuspendNone: '選中的實例中沒有已封停的實例',
+            batchUnsuspendFailed: '批次解封失敗',
+            suspendReason: '封停原因（選填）',
+            suspendReasonPlaceholder: '填寫封停原因後，系統將透過站內信通知實例所有者...',
+            deleteReason: '刪除原因（選填）',
+            deleteReasonPlaceholder: '填寫刪除原因後，系統將透過站內信和通知管道告知使用者...',
+            deleteReasonHint: '如果填寫了刪除原因，被刪除實例的所有者將收到通知',
+            // 實例流量
+            trafficUsage: '流量使用',
+            trafficUnlimited: '不限制',
+            resetTraffic: '重置流量',
+            trafficResetSuccess: '流量已重置',
+            trafficResetFailed: '重置流量失敗',
+            resetTrafficTitle: '重置實例流量',
+            resetTrafficWarning: '如果是已超額的實例，重置流量不會自動恢復實例的頻寬限速（1Mbps），請手動為該實例恢復頻寬速率。',
+            resetTrafficDesc: '確定要重置實例 "{instance}" 的流量嗎？',
+            // 節點流量統計
+            trafficStats: '流量統計',
+            monthlyUsed: '本月已用',
+            hostTotalLimit: '節點總分配',
+            // 宿主機狀態
+            agentStatusTitle: '宿主機狀態',
+            agentStatusDesc: 'Agent 按 {seconds} 秒間隔上報宿主機即時資源與執行狀態',
+            agentStatusRefreshSuccess: '狀態介面已重新整理，請以最後心跳時間為準',
+            agentStatusLoadFailed: '載入宿主機狀態失敗',
+            agentNotInstalled: '未安裝',
+            agentDisabled: '已停用',
+            agentOnline: '線上',
+            agentOffline: '離線',
+            agentUnknown: '未知',
+            agentVersionLatest: '最新',
+            agentVersionOutdated: '可升級',
+            agentVersionUnknown: '版本未知',
+            agentLatestVersion: '最新版本：{version}',
+            agentUpgradeClickHint: '點擊請求升級到 {version}，Agent 會在下次心跳執行',
+            agentUpgradeRequestSuccess: '已請求升級，Agent 會在約 {seconds} 秒內的下一次心跳執行',
+            agentUpgradeRequestFailed: '請求 Agent 升級失敗',
+            agentAlreadyLatest: 'Agent 已是最新版本',
+            agentInstallCommand: '安裝/重裝 Agent',
+            agentInstallCommandTitle: 'Agent 安裝命令',
+            agentInstallCommandHint: '可在宿主機執行完整命令，也可在 Agent 選單中貼上該命令或其中的 ait_ token。',
+            agentInstallCommandConfirm: '產生新的 Agent 安裝命令會輪換該宿主機的 Agent 憑據。舊 Agent 會在重新安裝前無法繼續上報，確定繼續嗎？',
+            agentInstallTokenExpiresAt: '有效期至 {time}',
+            agentInstallCommandSuccess: 'Agent 安裝命令已產生',
+            agentInstallCommandFailed: '產生 Agent 安裝命令失敗',
+            agentInstallCommandCopied: 'Agent 安裝命令已複製',
+            agentNoRecordHint: '該宿主機還沒有 Agent 心跳記錄。重新安裝或安裝 Agent 後會自動上報。',
+            agentId: 'Agent ID',
+            agentLastSeen: '最後心跳',
+            agentHeartbeatIp: '心跳 IP',
+            agentReportedAt: '上報時間',
+            agentIncus: 'Incus 檢測',
+            agentIncusAvailable: '可用',
+            agentIncusUnavailable: '不可用',
+            agentCpuTotal: 'CPU 核心',
+            agentMemoryTotal: '記憶體總量',
+            agentUptime: '宿主機執行時間',
+            agentSocket: 'Incus Socket',
+            agentCpuUsage: 'CPU 使用率',
+            agentCpuCores: '核心',
+            agentMemoryUsage: '記憶體使用',
+            agentSwapUsage: 'SWAP 使用',
+            agentDiskUsage: '磁碟使用',
+            agentLoadAverage: '負載',
+            agentLoadAverageHint: '1 / 5 / 15 分鐘',
+            agentProcessCount: '處理程序數',
+            // 儲存池管理
+            storage: {
+                title: '儲存池',
+                subtitle: '管理此宿主機上的 Incus 儲存池',
+                create: '新增儲存池',
+                createTitle: '建立儲存池',
+                empty: '暫無儲存池',
+                loadFailed: '載入儲存池失敗',
+                createSuccess: '儲存池建立成功',
+                createFailed: '建立儲存池失敗',
+                deleteSuccess: '儲存池已刪除',
+                deleteFailed: '刪除儲存池失敗',
+                deleteConfirm: '確定刪除儲存池 "{name}"？此操作不可撤銷。',
+                updateSuccess: '儲存池已更新',
+                updateFailed: '更新儲存池失敗',
+                editTitle: '編輯儲存池',
+                currentSize: '目前大小',
+                newSize: '新大小',
+                newSizeHint: '僅支援擴容，不支援縮容',
+                nameRequired: '請輸入儲存池名稱',
+                sourceRequired: '請輸入儲存源（裝置路徑）',
+                sizeRequired: '請輸入儲存大小',
+                pathRequired: '請輸入目錄路徑',
+                poolName: '儲存池名稱',
+                driver: '驅動類型',
+                description: '描述',
+                source: '儲存源',
+                size: '儲存大小',
+                usedBy: '使用者',
+                volumes: '個卷',
+                // 驅動描述
+                zfsDesc: '推薦：功能最全（快照、複製、壓縮、配額），效能極佳',
+                lvmDesc: 'Linux 標配，極其穩定，建議開啟 Thin Provisioning',
+                btrfsDesc: '類似 ZFS 特性，單碟或 RAID1/10 可用',
+                dirDesc: '目錄儲存，效能最差，僅用於測試',
+                // 通用
+                useLoop: '使用 Loop 檔案',
+                loopSizeHint: '將在 /var/lib/incus/ 下建立映像檔檔案',
+                // ZFS
+                zfsSourceHint: '實體碟或分割區路徑，如 /dev/disk/by-id/nvme-xxx',
+                zfsPoolName: 'ZFS 池名稱',
+                zfsPoolNameHint: '選填，不填則使用儲存池名稱',
+                // LVM
+                lvmSourceHint: '實體碟路徑，如 /dev/sdb',
+                lvmVgName: '卷組名稱',
+                lvmUseThinpool: '啟用精簡卷（Thin Provisioning）',
+                lvmThinpoolHint: '強烈建議開啟，否則快照效能極差',
+                // Btrfs
+                btrfsSourceHint: '實體碟路徑，如 /dev/sdb',
+                // DIR
+                dirPath: '目錄路徑',
+                dirPathHint: '指定一個存在的目錄，如 /mnt/data/incus-storage',
+                // 儲存用途
+                purpose: '儲存用途',
+                forInstances: '用於實例系統碟',
+                forInstancesHint: '建立實例時作為預設儲存',
+                forVolumes: '用於實例儲存碟',
+                forVolumesHint: '可手動掛載到實例',
+                purposeSystemDisk: '系統碟',
+                purposeStorageDisk: '儲存碟',
+                // 模式切換
+                modeCreate: '建立新儲存池',
+                modeExisting: '關聯已有儲存池',
+                modeImport: '匯入已有儲存',
+                modeCreateHint: '在宿主機上建立新的儲存池，需要設定驅動類型、儲存源等參數',
+                modeExistingHint: '關聯已在宿主機上建立的儲存池，只需輸入儲存池名稱即可',
+                modeImportHint: '匯入底層已存在但 Incus 還未知曉的儲存池（如手動建立的 ZFS 池、LVM VG）',
+                linkSuccess: '儲存池關聯成功',
+                importSuccess: '儲存池匯入成功',
+                // 匯入儲存池
+                importZfsSource: 'ZFS 池名稱',
+                importLvmSource: 'LVM 卷組名稱',
+                importBtrfsSource: 'Btrfs 裝置或子卷路徑',
+                importDirSource: '目錄路徑',
+                importZfsHint: '底層已存在的 ZFS 池名稱（透過 zpool list 查看）',
+                importLvmHint: '底層已存在的 LVM 卷組名稱（透過 vgs 查看）',
+                importBtrfsHint: '已格式化為 Btrfs 的裝置或子卷路徑',
+                importDirHint: '已存在的目錄路徑，如 /mnt/storage',
+                importSourceRequired: 'Btrfs 和 DIR 類型必須提供底層儲存源路徑',
+            },
+        },
+        packages: {
+            title: '方案管理',
+            loadFailed: '載入方案失敗',
+        },
+        instances: '實例管理',
+        settings: '系統設定',
+        logs: '系統日誌',
+        stats: '統計資料',
+        nav: {
+            users: '使用者',
+            hosts: '主機',
+            packages: '方案',
+            instances: '實例',
+            settings: '設定',
+            logs: '日誌',
+            stats: '統計',
+            images: '映像檔',
+            redeemCodes: '兌換碼',
+        },
+        tabs: {
+            overview: '總覽',
+            users: '使用者',
+            hosts: '主機',
+            packages: '方案',
+        },
+        overview: {
+            title: '系統總覽',
+            totalUsers: '總使用者數',
+            totalHosts: '總主機數',
+            totalInstances: '總實例數',
+            totalPackages: '總方案數',
+            activeUsers: '活躍使用者',
+            onlineHosts: '線上主機',
+            runningInstances: '運行中實例',
+            systemHealth: '系統健康度',
+        },
+        user: {
+            list: '使用者列表',
+            create: '建立使用者',
+            edit: '編輯使用者',
+            delete: '刪除使用者',
+            search: '搜尋使用者...',
+            noUsers: '無使用者',
+            role: '角色',
+            status: '狀態',
+            verified: '已驗證',
+            unverified: '未驗證',
+            active: '啟用',
+            inactive: '停用',
+            banned: '已封禁',
+            lastLogin: '最後登入',
+            createdAt: '建立時間',
+            actions: '操作',
+            ban: '封禁',
+            unban: '解除封禁',
+            resetPassword: '重設密碼',
+            banConfirm: '確定要封禁此使用者嗎？',
+            unbanConfirm: '確定要解除封禁此使用者嗎？',
+            deleteConfirm: '確定要刪除此使用者嗎？此操作不可復原。',
+            banSuccess: '使用者已封禁',
+            unbanSuccess: '使用者已解除封禁',
+            deleteSuccess: '使用者已刪除',
+            roles: {
+                admin: '管理員',
+                user: '一般使用者',
+            },
+        },
+        // 用戶管理頁面資料（用於UsersView.vue）
+        users: {
+            title: '使用者管理',
+            description: '管理平台使用者與邀請碼',
+            searchPlaceholder: '搜尋使用者名稱、ID、電子郵件...',
+            searchRange: '搜尋範圍',
+            searchFieldUsername: '使用者名稱',
+            searchFieldId: 'ID',
+            searchFieldEmail: '電子郵件',
+            exactMatch: '絕對匹配',
+            allInstances: '所有實例',
+            promoteAdmin: '設為管理員',
+            demoteAdmin: '取消管理員',
+            confirmPromoteAdmin: '確定將使用者 "{name}" 設為管理員？該使用者需要重新登入後生效。',
+            confirmDemoteAdmin: '確定取消使用者 "{name}" 的管理員權限？該使用者目前會話會被撤銷。',
+            userPromotedAdmin: '已設為管理員',
+            userDemotedAdmin: '已取消管理員權限',
+            onlyActiveCanBeAdmin: '只有正常狀態的使用者可以設為管理員',
+            userVipLevels: '使用者 VIP 等級',
+            vipBenefits: '會員福利大廳設定',
+            // 邀請碼
+            invites: '邀請碼',
+            inviteCode: '邀請碼',
+            inviteStatus: '狀態',
+            createdBy: '建立者',
+            usedBy: '使用者',
+            usedExpireAt: '使用/過期時間',
+            noInvites: '暫無邀請碼',
+            noMatchingInvites: '暫無符合條件的邀請碼',
+            inviteFilterAll: '全部',
+            inviteFilterUsed: '已用',
+            inviteFilterUnused: '未用',
+            inviteUsed: '已使用',
+            inviteExpired: '已過期',
+            inviteUnused: '未使用',
+            permanent: '永久',
+            deleteInvite: '刪除',
+            confirmDeleteInvite: '確定刪除邀請碼 {code}？',
+            inviteDeleted: '邀請碼已刪除',
+            deleteFailed: '刪除失敗',
+            // 發送站內信
+            sendMessage: '發送站內信',
+            sendMessageTo: '發送站內信給 {username}',
+            messageTitle: '訊息標題',
+            messageTitlePlaceholder: '輸入訊息標題',
+            messageTitleRequired: '請輸入訊息標題',
+            messageContent: '訊息內容',
+            messageContentPlaceholder: '輸入訊息內容',
+            messageContentRequired: '請輸入訊息內容',
+            messageSent: '訊息已發送',
+            messageSendFailed: '發送失敗',
+            // 調整餘額
+            adjustBalance: '調整餘額',
+            adjustBalanceFor: '調整 {username} 的餘額',
+            adjustType: '調整類型',
+            addBalance: '增加餘額',
+            deductBalance: '扣除餘額',
+            amount: '金額',
+            amountPlaceholder: '請輸入金額',
+            adjustReason: '調整理由',
+            adjustReasonPlaceholder: '請輸入調整理由（必填）',
+            invalidAmount: '請輸入有效的金額',
+            reasonRequired: '請輸入調整理由',
+            balanceAdjusted: '餘額調整成功',
+            balanceAdjustFailed: '餘額調整失敗',
+            // 積分相關
+            points: '積分',
+            earned: '累計',
+            totalEarnedPoints: '累計獲得積分',
+            spent: '已用',
+            spentPoints: '已用積分',
+            adjustPoints: '調整積分',
+            currentPoints: '目前積分',
+            pointsAmount: '調整數量',
+            pointsAmountHint: '正數增加，負數扣除',
+            pointsAmountPlaceholder: '如：100 或 -50',
+            pointsReasonPlaceholder: '請輸入調整理由（必填）',
+            invalidPointsAmount: '請輸入有效的積分數量',
+            pointsAdjusted: '積分調整成功',
+            pointsAdjustFailed: '積分調整失敗',
+            // 托管餘額相關
+            hostingBalance: '托管餘額',
+            hostingBalanceDetails: '托管餘額詳情',
+            hostingBalanceOverview: '概覽',
+            hostingBalanceLogs: '明細',
+            adjustHostingBalance: '調整托管餘額',
+            viewHostingBalance: '查看托管餘額',
+            frozenHostingBalance: '凍結托管餘額',
+            availableBalance: '可用餘額',
+            frozenBalance: '凍結餘額',
+            frozen: '凍結中',
+            available: '可用',
+            operation: '操作類型',
+            operationAdd: '增加',
+            operationDeduct: '扣減',
+            hostingReasonPlaceholder: '請輸入調整理由（必填）',
+            hostingBalanceAdjusted: '托管餘額調整成功',
+            hostingBalanceAdjustFailed: '托管餘額調整失敗',
+            loadHostingLogsFailed: '載入托管餘額明細失敗',
+            logTime: '時間',
+            logType: '類型',
+            logAmount: '金額',
+            logStatus: '狀態',
+            logDescription: '描述',
+            hostingLogType: {
+                income: '收入',
+                deduction: '扣減',
+                unfreeze: '解凍',
+                withdraw: '提現',
+                admin_adjust: '管理員調整',
+            },
+            // 用戶餘額
+            balance: '餘額',
+            viewBalance: '查看餘額詳情',
+            consumed: '已消費',
+            totalConsumed: '已消費總金額',
+            balanceDetails: '餘額詳情',
+            balanceOverview: '帳戶概覽',
+            balanceLogs: '餘額明細',
+            rechargeRecords: '充值紀錄',
+            currentBalance: '目前餘額',
+            totalRecharge: '累計充值',
+            totalConsume: '累計消費',
+            noBalanceLogs: '暫無餘額變動',
+            noRechargeRecords: '暫無充值紀錄',
+            loadBalanceFailed: '載入餘額資訊失敗',
+            loadBalanceLogsFailed: '載入餘額明細失敗',
+            loadRechargeRecordsFailed: '載入充值紀錄失敗',
+            totalRecords: '共 {count} 條',
+            prevPage: '上一頁',
+            nextPage: '下一頁',
+            balanceType: {
+                recharge: '充值',
+                consume: '消費',
+                refund: '退款',
+                admin_adjust: '管理員調整',
+                gift: '贈送',
+                transfer_fee: '移轉手續費',
+                transfer_refund: '手續費退還',
+            },
+            // 關聯帳號檢測
+            linkedAccounts: '關聯帳號檢測',
+            detectDays: '檢測範圍',
+            daysUnit: '天',
+            startDetect: '開始檢測',
+            detecting: '檢測中...',
+            detectingHint: '正在分析使用者資料，請稍候...',
+            clickToDetect: '點擊上方按鈕開始檢測關聯帳號',
+            loadLinkedAccountsFailed: '載入關聯帳號檢測失敗',
+            detectTime: '檢測時間',
+            detectDuration: '耗時',
+            detectRange: '檢測範圍',
+            ipGroupCount: '個 IP 關聯組',
+            emailGroupCount: '個郵箱相似組',
+            usernameGroupCount: '個使用者名稱相似組',
+            ipLinkedGroups: 'IP 關聯組',
+            emailSimilarGroups: '郵箱相似組',
+            usernameSimilarGroups: '使用者名稱相似組',
+            usersCount: '個使用者',
+            loginsCount: '次登入',
+            lastLoginAt: '最後登入',
+            noLinkedAccounts: '未檢測到關聯帳號，您的使用者非常純潔！',
+            registeredNew: '新',
+            registeredDays: '註冊 {days} 天',
+            // 用戶狀態
+            active: '正常',
+            banned: '已封禁',
+            createdAt: '建立時間',
+        },
+        // 支付渠道管理
+        paymentProviders: {
+            title: '支付渠道管理',
+            description: '設定和管理支付渠道',
+            add: '新增渠道',
+            create: '新增渠道',
+            empty: '暫無設定支付渠道',
+            noProviders: '暫無支付渠道',
+            createFirst: '新增第一個支付渠道',
+            providerName: '渠道名稱',
+            providerType: '渠道類型',
+            displayName: '顯示名稱',
+            description_label: '描述',
+            status: '狀態',
+            statusActive: '啟用',
+            statusDisabled: '停用',
+            statusTesting: '測試中',
+            feeRate: '費率',
+            feeFixed: '固定費用',
+            minAmount: '最小金額',
+            maxAmount: '最大金額',
+            sortOrder: '排序',
+            methods: '支付方式',
+            paymentMethods: '支援的支付方式',
+            configLabel: '設定',
+            configPlaceholder: 'JSON 格式的渠道設定',
+            edit: '編輯',
+            delete: '刪除',
+            name: '名稱',
+            nameRequired: '請輸入渠道名稱',
+            type: '類型',
+            confirmDelete: '確定刪除支付渠道 "{name}"？',
+            deleteWarning: '確定刪除支付渠道 "{name}"？此操作不可恢復。',
+            createSuccess: '支付渠道建立成功',
+            updateSuccess: '支付渠道更新成功',
+            deleteSuccess: '支付渠道已刪除',
+            statusUpdated: '狀態已更新',
+            statusUpdateSuccess: '狀態更新成功',
+            statusUpdateFailed: '狀態更新失敗',
+            saveFailed: '儲存失敗',
+            createFailed: '建立支付渠道失敗',
+            updateFailed: '更新支付渠道失敗',
+            deleteFailed: '刪除失敗',
+            loadFailed: '載入失敗',
+            createProvider: '新增支付渠道',
+            editProvider: '編輯支付渠道',
+            namePlaceholder: '輸入渠道名稱',
+            displayNamePlaceholder: '使用者看到的名稱',
+            descPlaceholder: '可選的渠道描述',
+            feeRateHint: '如 0.02 表示 2% 手續費',
+            notImplemented: '待實現',
+            providerTypes: {
+                yipay: '易支付',
+                heleket: 'Heleket',
+                stripe: 'Stripe',
+                alipayDirect: '支付寶直連',
+                wechatDirect: '微信直連',
+                manual: '人工充值',
+            },
+            deleteConfirm: '確認刪除',
+            types: {
+                alipay: '支付寶',
+                wechat: '微信支付',
+                stripe: 'Stripe',
+                paypal: 'PayPal',
+                usdt: 'USDT',
+                manual: '人工充值',
+            },
+            config: {
+                sdkVersion: 'SDK版本',
+                apiurl: '支付介面地址',
+                pid: '商戶ID',
+                key: '商戶密鑰',
+                platformPublicKey: '平台公鑰',
+                merchantPrivateKey: '商戶私鑰',
+                heleketMerchantUuid: 'Merchant UUID',
+                heleketApiKey: 'API Key',
+                heleketInvoiceCurrency: '發票法幣幣種',
+                heleketLifetime: '發票有效期（秒）',
+                heleketApiUrlHint: '預設使用 Heleket 官方介面地址，可按需切換到代理或私有網關。',
+                heleketCurrencyHint: '建立 Heleket 發票時使用的法幣幣種，常用為 CNY。',
+                heleketLifetimeHint: 'Heleket 發票有效期。預設 3600 秒，並會同步到本地訂單過期時間。',
+                yipayVersionV1: 'V1 (MD5簽名) - 傳統版本',
+                yipayVersionV2: 'V2 (RSA簽名) - 新版本',
+                yipayVersionV1Hint: 'V1 版本使用 MD5 簽名，適用於傳統易支付平台。',
+                yipayVersionV2Hint: 'V2 版本使用 RSA 簽名，適用於新版彩虹易支付。',
+                yipayApiUrlPlaceholder: '如: https://pay.example.com/',
+                yipayApiUrlHint: '支付介面地址，以 / 結尾。',
+                yipayPidPlaceholder: '商戶ID',
+                yipayKeyPlaceholder: '商戶密鑰',
+                yipayKeyHint: '易支付平台提供的商戶密鑰（一串字元）。',
+                platformPublicKeyPlaceholder: '平台公鑰（RSA）',
+                platformPublicKeyHint: '易支付平台提供的公鑰，用於驗證平台返回的簽名。',
+                merchantPrivateKeyPlaceholder: '商戶私鑰（RSA）',
+                merchantPrivateKeyHint: '您生成的 RSA 私鑰，用於對請求進行簽名。',
+                yipayMethodsHint: '選擇該渠道支援的支付方式，至少選擇一種。',
+                yipayMethodFeeHint: '手續費會依使用者選擇的支付方式加到應付金額中，充值本金仍按原金額入帳。',
+                yipayFeeFieldHint: '易支付手續費請在上方每個支付方式中設定。',
+                heleketMethods: '常見幣種展示',
+                heleketMethodsPlaceholder: 'USDT@TRON\nUSDT@BSC\nBTC\nETH',
+                heleketMethodsHint: '僅作為後台展示與紀錄參考，不會限制使用者在 Heleket 支付頁最終選擇的幣種和網路。',
+                instructions: '充值說明',
+                instructionsPlaceholder: '請輸入使用者充值時看到的說明資訊...',
+            },
+        },
+        // 計費管理
+        billingManage: {
+            title: '計費管理',
+            description: '管理使用者付費實例和計費紀錄',
+            tabOverview: '總覽',
+            tabInstances: '付費實例',
+            tabRecords: '扣費紀錄',
+            totalIncome: '總收入',
+            monthIncome: '本月收入',
+            todayIncome: '今日收入',
+            totalRefund: '總退款',
+            paidInstances: '付費實例數',
+            activeInstances: '活躍實例',
+            searchPlaceholder: '搜尋實例...',
+            instanceId: '實例ID',
+            instanceName: '名稱',
+            user: '使用者',
+            plan: '方案',
+            expiresAt: '到期時間',
+            status: '狀態',
+            actions: '操作',
+            noInstances: '暫無付費實例',
+            suspend: '封停',
+            unsuspend: '解封',
+            extend: '延期',
+            refund: '退款',
+            confirmSuspend: '確定封停實例 "{name}"？',
+            confirmUnsuspend: '確定解封實例 "{name}"？',
+            suspendSuccess: '實例已封停',
+            unsuspendSuccess: '實例已解封',
+            extendTitle: '延期實例',
+            extendDays: '延期天數',
+            extendReason: '延期原因',
+            freeExtend: '免費延期',
+            freeExtendHint: '勾選後不扣除使用者餘額',
+            extendSuccess: '實例已延期',
+            extendFailed: '延期失敗',
+            refundTitle: '退款實例',
+            refundAmount: '退款金額',
+            refundReason: '退款原因',
+            refundSuccess: '退款成功',
+            refundFailed: '退款失敗',
+            recordId: '紀錄ID',
+            recordType: '類型',
+            amount: '金額',
+            period: '帳期',
+            remark: '備註',
+            createdAt: '時間',
+            noRecords: '暫無扣費紀錄',
+            userBalance: '使用者餘額',
+            adjustBalance: '調整餘額',
+            giftBalance: '贈送餘額',
+            adjustTitle: '調整使用者餘額',
+            giftTitle: '贈送餘額',
+            adjustAmount: '調整金額',
+            giftAmount: '贈送金額',
+            adjustRemark: '調整原因',
+            giftRemark: '贈送備註',
+            adjustHint: '正數表示增加，負數表示扣除',
+            adjustSuccess: '餘額調整成功',
+            giftSuccess: '餘額贈送成功',
+            operationFailed: '操作失敗',
+        },
+        // 計費管理（新鍵名 billing，與元件對應）
+        billing: {
+            title: '計費管理',
+            description: '管理使用者付費實例和計費紀錄',
+            loadFailed: '載入計費資料失敗',
+            loadInstancesFailed: '載入實例列表失敗',
+            loadRecordsFailed: '載入扣費紀錄失敗',
+            // Tab 標籤
+            tabs: {
+                overview: '總覽',
+                instances: '付費實例',
+                records: '扣費紀錄',
+                rechargeRecords: '充值紀錄',
+                affConversions: 'AFF 轉化',
+                paymentProviders: '支付渠道',
+            },
+            // 總覽統計
+            totalRevenue: '總收入',
+            thisMonthRevenue: '本月收入',
+            todayRevenue: '今日收入',
+            totalRefunds: '總退款',
+            paidInstances: '付費實例數',
+            activeInstances: '活躍實例',
+            suspendedInstances: '已封停實例',
+            expiringInstances: '即將到期',
+            netRevenueLabel: '淨收入',
+            thisMonthVsLastMonth: '本月 / 上月',
+            hostedRevenueShare: '托管收入佔比',
+            revenueBreakdownTitle: '收入結構',
+            directRevenue: '自營收入',
+            hostedRevenue: '托管收入',
+            instanceHealthTitle: '實例狀態',
+            affOverviewTitle: 'AFF返利',
+            rechargeLabel: '充值',
+            revenueLabel: '收入',
+            overviewPeriods: {
+                total: '總覽',
+                thisMonth: '本月',
+                today: '今日',
+            },
+            // 實例列表
+            allStatus: '全部狀態',
+            allHosts: '全部節點',
+            showExpiring: '僅顯示即將到期',
+            showDateColumns: '顯示日期欄',
+            searchPlaceholder: '搜尋使用者/節點/實例名/方案/套餐...',
+            user: '使用者',
+            host: '節點',
+            plan: '方案',
+            package: '套餐',
+            price: '價格',
+            expiresAt: '到期時間',
+            purchaseDate: '購買日期',
+            remainingDays: '剩餘天數',
+            expired: '已過期',
+            days: '天',
+            instanceType: '實例類型',
+            instanceName: '實例名',
+            instanceStatus: '狀態',
+            noInstances: '暫無付費實例',
+            viewInstance: '查看',
+            autoRenew: '自動續費',
+            // 托管類型
+            hostingType: '托管類型',
+            direct: '直營',
+            hosted: '托管',
+            cycle: '週期',
+            cycleMonths: '{months}個月',
+            perPage: '每頁',
+            totalCount: '共 {count} 條',
+            // 操作
+            suspend: '封停',
+            unsuspend: '解封',
+            extend: '延期',
+            refund: '退款',
+            deleteRefund: '刪除並退款',
+            // 操作彈窗
+            suspendTitle: '封停實例',
+            unsuspendTitle: '解封實例',
+            extendTitle: '延期實例',
+            refundTitle: '退款',
+            deleteRefundTitle: '刪除並退款',
+            targetInstance: '目標實例',
+            reason: '原因',
+            reasonPlaceholder: '請輸入原因...',
+            extendDays: '延期天數',
+            freeExtend: '免費延期（不扣餘額）',
+            refundAmount: '退款金額',
+            refundReasonPlaceholder: '請輸入退款原因...',
+            refundReasonRequired: '請填寫退款原因',
+            // 刪除並退款相關
+            deleteRefundWarning: '警告：此操作將永久刪除實例及其所有資料（快照、備份、端口映射等），此操作不可撤銷！',
+            refundTypeLabel: '退款方式',
+            refundTypeRemaining: '按剩餘價值退款（根據剩餘天數計算）',
+            refundTypeFull: '全額退款（退還所有已消費金額）',
+            deleteRefundReasonPlaceholder: '請輸入刪除原因...',
+            deleteRefundReasonRequired: '請填寫刪除原因',
+            deleteRefundSuccess: '實例已刪除並退款',
+            databaseOnlyDelete: '僅數據庫刪除',
+            deleteRefundDatabaseOnlySuccess: '實例已從數據庫刪除',
+            // 應用折扣相關
+            applyDiscount: '應用折扣',
+            applyDiscountTitle: '應用續費折扣',
+            applyDiscountHint: '輸入AFF優惠碼後，該實例後續續費時將自動享受5%折扣，同時優惠碼創建者也將獲得續費返利。',
+            affCodeLabel: 'AFF優惠碼',
+            affCodePlaceholder: '請輸入AFF優惠碼...',
+            affCodeRequired: '請輸入AFF優惠碼',
+            applyDiscountSuccess: '已成功應用續費折扣',
+                        // 修改價格相關
+                        updatePrice: '修改價格',
+                        owner: '擁有者',
+                        currentPrice: '當前價格',
+                        newPrice: '新價格',
+                        enterNewPrice: '請輸入新價格',
+                        priceHint: '此價格為單週期價格，修改後將影響續費費用',
+                        settleBalance: '結算差價（根據剩餘天數補交/退還）',
+                        needPay: '需補交',
+                        willRefund: '將退還',
+                        priceDiffHint: '根據剩餘 {days} 天計算，將自動處理用戶餘額',
+                        noSettleHint: '不結算差價，僅修改後續續費價格，不影響當前週期餘額',
+                        affDiscount: 'AFF折扣',
+                        actualRenewPrice: '實際續費價',
+                        affAppliedHint: '該實例已應用優惠碼，續費時享受 {discount}% 折扣。差價計算已基於折扣後價格。',
+                        newActualPrice: '新實際續費價',
+            // 切換方案相關
+            upgradePlan: '切換',
+            upgradePlanTitle: '切換方案',
+            currentPlan: '當前方案',
+            planName: '方案名稱',
+            monthlyPrice: '月均價',
+            memoryLabel: '記憶體',
+            diskLabel: '磁碟',
+            selectNewPlan: '選擇新方案',
+            noAvailablePlans: '沒有可升級的方案（新方案月均價需高於當前方案）',
+            priceDifference: '補差價',
+            priceDifferenceHint: '根據剩餘天數計算，將從用戶餘額中扣除',
+            userBalance: '用戶餘額',
+            insufficientBalance: '用戶餘額不足，無法完成升級',
+            confirmUpgrade: '確認升級',
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            yearly: '年付',
+            month: '月',
+            months: '個月',
+            // 操作結果
+            suspendSuccess: '實例已封停',
+            unsuspendSuccess: '實例已解封',
+            extendSuccess: '實例已延期',
+            refundSuccess: '退款成功',
+            batchUpdatePrice: '批量修改價格',
+            batchSelectedCount: '已選擇 {count} 個實例',
+            selectAllCurrentPage: '選擇目前頁實例',
+            selectInstance: '選擇實例',
+            batchPriceNoSelection: '請先選擇實例',
+            batchSelected: '已選實例',
+            batchPreviewChanged: '將更新',
+            batchPreviewFailed: '失敗項',
+            batchPriceHint: '批量使用同一個單週期價格；預覽會按每個實例的週期、剩餘天數和AFF折扣分別計算。',
+            batchTotalCharge: '合計補交',
+            batchTotalRefund: '合計退還',
+            batchNetAmount: '淨影響',
+            batchPreviewBlocked: '目前預覽包含失敗項或用戶餘額不足，不能提交。',
+            batchUserImpact: '用戶餘額影響',
+            batchPreviewDetails: '預覽明細',
+            batchPreviewWaiting: '輸入價格後將自動產生預覽。',
+            batchPriceStatusReady: '可更新',
+            batchPriceStatusUnchanged: '無變化',
+            batchPriceStatusFailed: '失敗',
+            result: '結果',
+            // 扣費紀錄
+            recordType: '類型',
+            recordTypes: {
+                newPurchase: '新購',
+                renew: '續費',
+                upgrade: '升級',
+                downgrade: '降級',
+                refund: '退款',
+                transfer_fee: '移轉手續費',
+            },
+            amount: '金額',
+            instance: '實例',
+            remark: '備註',
+            time: '時間',
+            noRecords: '暫無扣費紀錄',
+            // 充值統計
+            totalRecharge: '總充值',
+            thisMonthRecharge: '本月充值',
+            todayRecharge: '今日充值',
+            orders: '筆',
+            // AFF 返利統計
+            totalAffCommission: 'AFF返利總額',
+            thisMonthAff: '本月AFF返利',
+            affConverted: '已轉化金額',
+            affPendingConvert: '待審批轉化',
+            // 充值紀錄
+            loadRechargeRecordsFailed: '載入充值紀錄失敗',
+            noRechargeRecords: '暫無充值紀錄',
+            rechargeOrderNo: '訂單號',
+            creditAmount: '到帳金額',
+            actualAmount: '實際到帳',
+            estimatedAmount: '預計到帳',
+            payChannel: '支付渠道',
+            paymentDetails: '支付詳情',
+            paymentUuid: 'UUID:',
+            paymentTxid: 'TxID:',
+            rechargeStatusLabel: '狀態',
+            tradeNo: '第三方單號',
+            sync: '同步',
+            syncSuccess: '同步成功，充值已到帳',
+            rechargeStatus: {
+                pending: '待支付',
+                completed: '已完成',
+                cancelled: '已取消',
+                failed: '失敗',
+            },
+        },
+    },
+
+    // 錯誤頁面
+    error: {
+        notFound: '頁面不存在',
+        notFoundMessage: '您尋找的頁面不存在或已被移動。',
+        serverError: '伺服器錯誤',
+        serverErrorMessage: '抱歉，伺服器發生錯誤，請稍後再試。',
+        unauthorized: '未授權',
+        unauthorizedMessage: '您沒有權限存取此頁面。',
+        forbidden: '禁止存取',
+        forbiddenMessage: '您沒有權限執行此操作。',
+        goHome: '返回首頁',
+        goBack: '返回上一頁',
+        tryAgain: '重試',
+    },
+
+    // 時間格式化
+    time: {
+        justNow: '剛剛',
+        minutesAgo: '{n} 分鐘前',
+        hoursAgo: '{n} 小時前',
+        daysAgo: '{n} 天前',
+        weeksAgo: '{n} 週前',
+        monthsAgo: '{n} 個月前',
+        yearsAgo: '{n} 年前',
+        inMinutes: '{n} 分鐘後',
+        inHours: '{n} 小時後',
+        inDays: '{n} 天後',
+        inWeeks: '{n} 週後',
+        inMonths: '{n} 個月後',
+        inYears: '{n} 年後',
+    },
+
+    // 單位
+    units: {
+        bytes: 'B',
+        kilobytes: 'KB',
+        megabytes: 'MB',
+        gigabytes: 'GB',
+        terabytes: 'TB',
+        bitsPerSecond: 'bps',
+        kilobitsPerSecond: 'Kbps',
+        megabitsPerSecond: 'Mbps',
+        gigabitsPerSecond: 'Gbps',
+        percentage: '%',
+        cores: '核心',
+        vcpu: 'vCPU',
+    },
+
+    // API 錯誤碼翻譯
+    errors: {
+        // 通用錯誤
+        INVALID_ID: '無效的 ID',
+        NOT_FOUND: '資源不存在',
+        UNAUTHORIZED: '未授權',
+        FORBIDDEN: '無權存取',
+        ADMIN_REQUIRED: '需要管理員權限',
+        // 使用者錯誤
+        USER_NOT_FOUND: '使用者不存在',
+        USER_EXISTS: '使用者名稱已存在',
+        CANNOT_MODIFY_SELF: '無法修改自己的狀態',
+        CANNOT_DELETE_SELF: '無法刪除自己',
+        CANNOT_BAN_ADMIN: '無法封禁管理員帳號',
+        CANNOT_DELETE_ADMIN: '無法刪除管理員帳號',
+        USER_HAS_INSTANCES: '該使用者還有實例，請先刪除實例',
+        // 認證錯誤
+        INVALID_CREDENTIALS: '使用者名稱或密碼錯誤',
+        ACCOUNT_BANNED: '帳號已被停用',
+        TOO_MANY_ATTEMPTS: '登入嘗試次數過多，請稍後再試',
+        REGISTRATION_DISABLED: '目前已關閉註冊',
+        INVALID_INVITE_CODE: '邀請碼無效或已使用',
+        INVITE_CODE_EXPIRED: '邀請碼已過期',
+        INVALID_2FA_CODE: '驗證碼或恢復碼錯誤',
+        TWO_FA_REQUIRED: '請輸入雙重驗證碼',
+        TWO_FA_ALREADY_ENABLED: '2FA 已啟用，請先停用後再重新設定',
+        TWO_FA_NOT_ENABLED: '2FA 未啟用',
+        REFRESH_TOKEN_MISSING: '缺少重新整理權杖',
+        REFRESH_TOKEN_INVALID: '重新整理權杖無效或已過期',
+        SESSION_NOT_FOUND: '會話不存在',
+        // 驗證錯誤
+        INVALID_EMAIL: '請輸入有效的電子郵件地址',
+        EMAIL_CONTAINS_ILLEGAL: '電子郵件包含非法字元',
+        USERNAME_CONTAINS_ILLEGAL: '使用者名稱包含非法字元',
+        PASSWORD_TOO_WEAK: '密碼強度不足',
+        INVALID_SSH_KEY: '無效的 SSH 公鑰格式',
+        SSH_KEY_EXISTS: '該公鑰已新增',
+        INVALID_NAME: '名稱格式不正確',
+        // 實例錯誤
+        INSTANCE_NOT_FOUND: '實例不存在',
+        INSTANCE_ALREADY_RUNNING: '實例已在運行',
+        INSTANCE_ALREADY_STOPPED: '實例已停止',
+        INSTANCE_STATUS_INVALID: '實例狀態不允許此操作',
+        INSTANCE_SUSPENDED: '實例已被封停，無法執行此操作',
+        INSTANCE_NOT_SUSPENDED: '實例未處於封停狀態',
+        INSTANCE_SUSPENDED_EXPIRED: '實例因到期被封停，請續費後解封',
+        INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED: '當前月流量週期無法銷毀，已用流量達到或超過 5G',
+        // 主機錯誤
+        HOST_NOT_FOUND: '主機不存在',
+        HOST_OFFLINE: '主機離線',
+        HOST_HAS_INSTANCES: '主機上有實例，請先刪除',
+        HOST_ALREADY_OFFICIAL: '此節點已經是自營節點',
+        HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT: '接管失敗，部分方案會失去全部綁定節點',
+        NO_AVAILABLE_HOSTS: '沒有可用的節點',
+        // 映像檔錯誤
+        IMAGE_NOT_FOUND: '映像檔不存在',
+        IMAGE_SYNCED_ON_HOSTS: '映像檔已在節點上同步，請先從節點刪除',
+        IMAGE_TYPE_MISMATCH: '所選映像檔與方案實例類型不相容',
+        // 方案錯誤
+        PACKAGE_NOT_FOUND: '方案不存在',
+        PACKAGE_IN_USE: '方案正在被實例使用',
+        // 配額錯誤
+        QUOTA_EXCEEDED: '配額不足',
+        QUOTA_CPU_EXCEEDED: 'CPU 配額不足',
+        QUOTA_MEMORY_EXCEEDED: '記憶體配額不足',
+        QUOTA_DISK_EXCEEDED: '磁碟配額不足',
+        QUOTA_INSTANCE_EXCEEDED: '實例數量已達上限',
+        QUOTA_PORT_EXCEEDED: '連接埠配額不足',
+        QUOTA_SNAPSHOT_EXCEEDED: '快照配額不足',
+        QUOTA_BACKUP_EXCEEDED: '備份配額不足',
+        QUOTA_NOT_ALLOCATED: '請先分配配額',
+        // 快照錯誤
+        SNAPSHOT_NOT_FOUND: '快照不存在',
+        SNAPSHOT_RESTORE_REQUIRES_STOP: '請先停止實例再還原快照',
+        // 備份錯誤
+        BACKUP_NOT_FOUND: '備份不存在',
+        BACKUP_NOT_READY: '備份尚未就緒，無法匯出',
+        EXPORT_TASK_NOT_FOUND: '匯出任務不存在或已過期',
+        EXPORT_TASK_EXPIRED: '匯出任務已過期',
+        // 連接埠映射錯誤
+        PORT_IN_USE: '該連接埠已被使用',
+        PORT_OUT_OF_RANGE: '連接埠超出允許範圍',
+        PORT_MAPPING_NOT_FOUND: '連接埠映射不存在',
+        // 節點組錯誤
+        NODE_GROUP_NOT_FOUND: '節點組不存在',
+        NODE_GROUP_HAS_HOSTS: '節點組下有主機，請先移除',
+        NODE_GROUP_HAS_PACKAGES: '節點組被方案使用中',
+        // 通知錯誤
+        NOTIFICATION_CHANNEL_NOT_FOUND: '通知管道不存在',
+        // 幫助錯誤
+        ARTICLE_NOT_FOUND: '文件不存在',
+        SLUG_EXISTS: 'Slug 已存在',
+        // 邀請碼錯誤
+        INVITE_CODE_USED: '邀請碼已被使用',
+        INVITE_CODE_NOT_FOUND: '邀請碼不存在',
+        // OAuth 錯誤
+        OAUTH_PROVIDER_DISABLED: '該登入方式已被停用',
+        OAUTH_ALREADY_BOUND: '該帳號已被其他使用者綁定',
+        OAUTH_NOT_BOUND: '帳號未綁定',
+        OAUTH_TOKEN_ERROR: '取得授權失敗',
+        // SSH 金鑰錯誤
+        SSH_KEY_NOT_FOUND: 'SSH 金鑰不存在',
+        SSH_KEY_REQUIRED: '必須選擇一個 SSH 金鑰，請先在個人設定中新增',
+        SSH_KEY_NOT_OWNED: 'SSH 金鑰不存在或不屬於該使用者',
+        // 方案錯誤（補充）
+        PACKAGE_UNAVAILABLE: '方案不可用或已下架',
+        CANNOT_CREATE_OWN_PAID_PACKAGE: '不能使用自己的付費方案建立實例',
+        // 節點資源錯誤
+        HOST_UNAVAILABLE: '選擇的主機不可用或資源不足',
+        HOST_NO_ONLINE: '沒有線上的主機，請先在節點管理中測試連線',
+        HOST_RESOURCES_NOT_SYNCED: '主機資源資訊未同步，請在節點管理中點擊「測試連線」',
+        HOST_NODE_GROUP_NO_HOSTS: '方案要求的節點組中沒有可用節點',
+        HOST_RESOURCES_INSUFFICIENT: '所有主機資源不足，請稍後再試或選擇其他方案',
+        HOST_NAME_EXISTS: '主機名稱已存在',
+        HOST_ADDRESS_EXISTS: '主機連線地址已存在',
+        HOST_ADDRESS_UNRESOLVABLE: '面板目前無法解析該主機連線地址',
+        HOST_CERT_NOT_CONFIGURED: '請先設定憑證路徑',
+        HOST_INVALID_CPU_MAX: 'CPU 最大額配不能為負數',
+        HOST_INVALID_MEMORY_MAX: '記憶體最大值不能為負數或低於 256MB',
+        HOST_INVALID_IPV6_MODE: 'IPv6 模式必須是 1(路由)、2(NAT) 或 3(停用)',
+        HOST_IPV6_ROUTE_REQUIRES_CONFIG: 'IPv6 路由模式需要提供子網路和父介面',
+        HOST_CPU_BELOW_USED: 'CPU 最大額配不能低於實例已使用的資源',
+        HOST_MEMORY_BELOW_USED: '記憶體最大值不能低於實例已使用的資源',
+        // 實例操作錯誤
+        INSTANCE_STOP_REQUIRED: '請先停止實例',
+        INSTANCE_IMAGE_REQUIRED: '請指定映像檔',
+        INSTANCE_IMAGE_UNAVAILABLE: '選擇的映像檔在目前節點不可用',
+        INSTANCE_REBUILD_FAILED: '重裝系統失敗',
+        INSTANCE_IPV6_NOT_SUPPORTED: '只有 NAT + IPv6 模式的實例才能重新分配 IPv6',
+        INSTANCE_IPV6_REASSIGN_FAILED: '重新分配 IPv6 位址失敗',
+        INSTANCE_NO_IPV4: '虛擬機實例需要分配 IPv4 位址才能新增連接埠映射',
+        HOST_NO_IPV6_SUBNET: '主機未設定 IPv6 子網路',
+        IPV6_POOL_EXHAUSTED: 'IPv6 位址池已耗盡，請稍後重試',
+        IPV6_REASSIGN_COOLDOWN: '每實例每天只能重新分配一次 IPv6，請稍後再試',
+        // 連接埠映射錯誤（補充）
+        PORT_MAPPING_NAT_ONLY: '僅 NAT 和雙棧模式支援連接埠映射',
+        PORT_NO_AVAILABLE: '沒有可用連接埠，請聯繫管理員',
+        PORT_CONFLICT: '連接埠已被佔用，請使用其他連接埠',
+        PORT_MAPPING_INVALID_ID: '無效的實例或連接埠映射 ID',
+        // 映像檔錯誤（補充）
+        IMAGE_CREATE_FAILED: '映像檔建立失敗',
+        IMAGE_UPDATE_FAILED: '映像檔更新失敗',
+        IMAGE_INVALID_HOST_ID: '無效的映像檔或節點 ID',
+        // 備份錯誤（補充）
+        BACKUP_CREATE_FAILED: '建立備份失敗',
+        BACKUP_DELETE_FAILED: '刪除備份失敗',
+        BACKUP_EXPORT_FAILED: '匯出備份失敗',
+        BACKUP_QUOTA_NOT_SET: '請先為該實例設定備份配額',
+        BACKUP_EXPORT_STATUS_INVALID: '匯出任務狀態異常',
+        // 設定錯誤
+        CONFIG_INVALID_KEY: '無效的設定鍵',
+        CONFIG_INVALID_VALUE: '設定值必須是非負整數',
+        // 快照錯誤（補充）
+        SNAPSHOT_QUOTA_NOT_SET: '請先為該實例設定快照配額',
+        // 方案錯誤（補充）
+        PACKAGE_HAS_INSTANCES: '該方案正在被實例使用，無法刪除',
+        // 資源限制錯誤
+        RESOURCE_CPU_EXCEEDS_PACKAGE: 'CPU 設定超出方案限制',
+        RESOURCE_MEMORY_EXCEEDS_PACKAGE: '記憶體設定超出方案限制',
+        RESOURCE_DISK_EXCEEDS_PACKAGE: '磁碟設定超出方案限制',
+        // 使用者配額錯誤（詳細）
+        QUOTA_CPU_INSUFFICIENT: 'CPU 配額不足',
+        QUOTA_MEMORY_INSUFFICIENT: '記憶體配額不足',
+        QUOTA_DISK_INSUFFICIENT: '磁碟配額不足',
+        QUOTA_INSTANCE_LIMIT_REACHED: '實例數量已達上限',
+        QUOTA_HOST_LIMIT_REACHED: '主機數量已達上限',
+        QUOTA_FRIEND_LIMIT_REACHED: '您的好友數量已達上限',
+        QUOTA_PORT_BELOW_USED: '連接埠配額不能小於目前已使用量',
+        QUOTA_SNAPSHOT_BELOW_USED: '快照配額不能小於目前已使用量',
+        QUOTA_BACKUP_BELOW_USED: '備份配額不能小於目前已使用量',
+        QUOTA_PORT_TOTAL_EXCEEDED: '連接埠配額超出使用者總配額',
+        QUOTA_SNAPSHOT_TOTAL_EXCEEDED: '快照配額超出使用者總配額',
+        QUOTA_BACKUP_TOTAL_EXCEEDED: '備份配額超出使用者總配額',
+        // 映像檔錯誤（補充）
+        IMAGE_NOT_SYNCED: '映像檔尚未同步到所選主機',
+        IMAGE_SYNCING_CANNOT_DELETE: '映像檔正在同步中，無法刪除',
+        IMAGE_NO_HOSTS: '沒有可用的節點，請先新增節點',
+        // 連接埠錯誤（補充）
+        PORT_RANGE_INVALID: '連接埠必須在允許範圍內',
+        // 快照策略錯誤
+        SNAPSHOT_MANUAL_FULL: '手動快照已達實例配額，無法啟用自動快照',
+        SNAPSHOT_RETENTION_EXCEEDS: '保留數量超出可用配額',
+        // 備份策略錯誤
+        BACKUP_MANUAL_FULL: '手動備份已達實例配額，無法啟用自動備份',
+        BACKUP_RETENTION_EXCEEDS: '保留數量超出可用配額',
+        // OAuth 錯誤（補充）
+        OAUTH_NOT_ENABLED: '該登入方式未啟用',
+        // 儲存池錯誤
+        STORAGE_POOL_NOT_CONFIGURED: '主機未設定系統磁碟儲存池，無法建立實例',
+        // 好友系統錯誤
+        CANNOT_ADD_SELF: '無法將自己加為好友',
+        ALREADY_FRIENDS: '你們已經是好友了',
+        FRIEND_REQUEST_PENDING: '好友請求已在待處理中',
+        FRIEND_REQUEST_NOT_FOUND: '好友請求不存在',
+        FRIEND_REQUEST_NOT_PENDING: '該請求已被處理',
+        FRIENDSHIP_NOT_FOUND: '好友關係不存在',
+        TARGET_FRIEND_QUOTA_FULL: '對方好友數量已達上限，無法新增',
+        // 方案共享錯誤
+        CANNOT_SHARE_TO_SELF: '無法共享給自己',
+        PACKAGE_ALREADY_SHARED: '方案已共享給該使用者',
+        SHARE_NOT_FOUND: '共享記錄不存在',
+        NOT_FRIENDS: '對方不是您的好友',
+        SHARE_QUOTA_CPU_EXCEEDED: '共享方案 CPU 配額已用完',
+        SHARE_QUOTA_MEMORY_EXCEEDED: '共享方案記憶體配額已用完',
+        SHARE_QUOTA_INSTANCES_EXCEEDED: '共享方案實例數量已達上限',
+        // 電子郵件驗證錯誤
+        EMAIL_VERIFICATION_DISABLED: '電子郵件驗證功能未啟用',
+        EMAIL_CODE_REQUIRED: '請輸入電子郵件驗證碼',
+        INVALID_EMAIL_CODE: '驗證碼無效或已過期',
+        TOO_MANY_VERIFICATION_REQUESTS: '驗證碼請求過於頻繁，請稍後再試',
+        EMAIL_SEND_FAILED: '驗證郵件發送失敗，請稍後再試',
+        EMAIL_ALREADY_REGISTERED: '該電子郵件地址已被使用',
+        EMAIL_DOMAIN_NOT_ALLOWED: '該電子郵件網域不允許註冊，請使用其他信箱',
+        // 移轉錯誤
+        TRANSFER_NOT_FOUND: '移轉請求不存在',
+        TRANSFER_TO_SELF: '無法移轉給自己',
+        TRANSFER_TO_BANNED: '無法移轉給被封禁的使用者',
+        TRANSFER_ALREADY_PENDING: '該實例已有待處理的移轉請求',
+        TRANSFER_NOT_PENDING: '移轉請求不在等待狀態',
+        TRANSFER_INVALID_STATUS: '實例狀態不允許移轉',
+        TRANSFER_QUOTA_NOT_FOUND: '接收方配額資訊不存在',
+        TRANSFER_QUOTA_INSUFFICIENT: '接收方配額不足',
+        TRANSFER_INSTANCE_LOCKED: '實例正在移轉中，暫時無法操作',
+        TRANSFER_HOST_DISABLED: '該節點已禁止移轉操作',
+        TRANSFER_INSUFFICIENT_BALANCE: '餘額不足，無法支付移轉手續費',
+        // 移轉過程錯誤
+        INSTANCE_MUST_BE_STOPPED: '實例必須在移轉前停止',
+        INCUS_RENAME_FAILED: '在主機上重新命名實例失敗',
+        DATABASE_ERROR: '資料庫操作失敗，請重試',
+        // 敏感操作二次驗證錯誤
+        VERIFICATION_REQUIRED: '此操作需要二次驗證',
+        INVALID_CODE: '驗證碼無效或已過期',
+        NO_NOTIFICATION_CHANNEL: '未綁定通知管道，無需二次驗證',
+        EMAIL_NOT_CONFIGURED: '未設定電子郵件，無法發送驗證碼',
+        SEND_FAILED: '驗證碼發送失敗',
+        // 簽到錯誤
+        CHECKIN_NO_INSTANCE: '您需要至少擁有一個實例才能簽到',
+        CHECKIN_ALREADY_TODAY: '今日已簽到',
+        REDEEM_ALREADY_TODAY: '今日已兌換過兌換碼',
+        REDEEM_CODE_NOT_FOUND: '兌換碼不存在',
+        REDEEM_CODE_USED: '兌換碼已被使用',
+        REDEEM_CODE_EXPIRED: '兌換碼已過期',
+        REDEEM_CODE_SELF_ONLY: '此兌換碼只能由擁有者自己使用',
+        REDEEM_CODE_DISABLED: '此兌換碼已被停用',
+        REDEEM_CODE_INVALID_FORMAT: '兌換碼格式錯誤，僅支援 h- 開頭的系統兌換碼',
+        REDEEM_CODE_EXHAUSTED: '此兌換碼已達到最大使用次數',
+        REDEEM_CODE_ALREADY_USED_BY_USER: '您已使用過此兌換碼',
+        REDEEM_CODE_HOST_MISMATCH: '此兌換碼只能用於同一節點的實例',
+        REDEEM_CODE_BATCH_LIMIT: '您已使用過該批次的其他兌換碼',
+        REDEEM_EXCEEDS_PACKAGE_QUOTA: '兌換後將超出實例方案配額限制',
+        REDEEM_ALREADY_AT_LIMIT: '實例資源已達到方案上限',
+        CHECKIN_CODE_PAID_INSTANCE: '簽到兑換碼只能用於免費實例',
+        PAID_INSTANCE_DELETION_NOT_ALLOWED: '付費實例不允許刪除',
+        // 餘額錯誤
+        INSUFFICIENT_BALANCE: '餘額不足，請先充值',
+        INTERNAL_ERROR: '伺服器內部錯誤',
+    },
+
+    // 流量統計
+    traffic: {
+        title: '流量統計',
+        monthlyUsage: '本月流量',
+        used: '已使用',
+        unlimited: '無限制',
+        total: '總計',
+        history30Days: '近 30 天流量',
+        historyPeriod: '週期流量',
+        noData: '暫無流量資料',
+        noHistoryData: '暫無歷史資料',
+        throttledHint: '已限速至 1Mbps',
+        resetHint: '每月 1 號重置流量',
+        periodResetHint: '每月 {date} 號重置流量',
+        status: {
+            normal: '正常',
+            warning: '預警',
+            limited: '已限速',
+        },
+        download: '下載',
+        upload: '上傳',
+        limit: '限額',
+        extraQuota: '額外配額',
+        resetDate: '重設日期',
+        nextReset: '下次重設',
+    },
+
+    // 實例移轉
+    transfer: {
+        title: '實例移轉',
+        sentTab: '移轉記錄',
+        receivedTab: '接收記錄',
+        pendingCount: '待處理',
+        noTransfers: '暫無移轉記錄',
+        noPendingTransfers: '暫無待接收的移轉',
+        searchPlaceholder: '搜尋實例名稱、接收方使用者名稱或備註...',
+        // 狀態
+        status: {
+            pending: '等待接收',
+            processing: '處理中',
+            accepted: '已接收',
+            rejected: '已拒絕',
+            cancelled: '已取消',
+        },
+        // 操作
+        actions: {
+            transfer: '移轉',
+            accept: '接受',
+            reject: '拒絕',
+            cancel: '取消',
+            push: '直接推送',
+        },
+        // 完成時間
+        completedAt: '完成時間',
+        rejectedAt: '拒絕時間',
+        cancelledAt: '取消時間',
+        // 移轉彈窗
+        modal: {
+            title: '移轉實例',
+            targetUser: '接收方使用者名稱',
+            targetUserPlaceholder: '輸入接收方使用者名稱',
+            searchUser: '搜尋使用者',
+            userNotFound: '使用者不存在',
+            userBanned: '該使用者已被封禁',
+            cannotTransferToSelf: '無法移轉給自己',
+            remark: '備註（選填）',
+            remarkPlaceholder: '輸入移轉備註',
+            quotaCheck: '配額檢查',
+            instance: '實例',
+            quotaSufficient: '配額充足',
+            quotaInsufficient: '配額不足',
+            canTransfer: '使用者狀態正常，可以進行移轉操作',
+            confirmTransfer: '確認移轉',
+            transferring: '移轉中...',
+            deleteWarning: '注意：如果對方接收移轉，系統將自動刪除該實例的連接埠映射、建站反向代理、快照、備份等關聯資源。',
+            feeLabel: '移轉手續費',
+            balanceLabel: '當前餘額',
+            insufficientBalance: '餘額不足，請先充值',
+            feeRefundHint: '確認移轉時將扣除手續費，對方拒絕接收將自動退還',
+        },
+        // 拒絕彈窗
+        rejectModal: {
+            title: '拒絕移轉',
+            reason: '拒絕原因（選填）',
+            reasonPlaceholder: '輸入拒絕原因',
+        },
+        // 設定詳情彈窗
+        configModal: {
+            title: '移轉時設定詳情',
+            instanceName: '實例名稱',
+            hostInfo: '主機資訊',
+            networkMode: '網路模式',
+            portMappings: '連接埠映射',
+            snapshots: '快照',
+            backups: '備份',
+            package: '方案',
+        },
+        hasRemark: '有備註',
+        // 詳情
+        detail: {
+            fromUser: '發起方',
+            toUser: '接收方',
+            instance: '實例',
+            snapshot: '移轉時設定',
+            cpu: 'CPU',
+            memory: '記憶體',
+            disk: '磁碟',
+            ports: '連接埠映射',
+            snapshots: '快照',
+            backups: '備份',
+            host: '節點',
+            package: '方案',
+            remark: '備註',
+            rejectReason: '拒絕原因',
+            createdAt: '發起時間',
+            acceptedAt: '接收時間',
+            rejectedAt: '拒絕時間',
+            cancelledAt: '取消時間',
+        },
+        // 提示訊息
+        messages: {
+            transferSuccess: '移轉請求已發送',
+            transferComplete: '移轉完成',
+            acceptSuccess: '已接受移轉',
+            rejectSuccess: '已拒絕移轉',
+            cancelSuccess: '已取消移轉',
+            pushSuccess: '已成功推送實例',
+            instanceLocked: '該實例正在移轉中，暫時無法操作',
+        },
+        // 錯誤
+        errors: {
+            TRANSFER_NOT_FOUND: '移轉請求不存在',
+            TRANSFER_TO_SELF: '無法移轉給自己',
+            TRANSFER_TO_BANNED: '無法移轉給被封禁的使用者',
+            TRANSFER_ALREADY_PENDING: '該實例已有待處理的移轉請求',
+            TRANSFER_NOT_PENDING: '移轉請求不在等待狀態',
+            TRANSFER_INVALID_STATUS: '實例狀態不允許移轉',
+            TRANSFER_QUOTA_NOT_FOUND: '接收方配額資訊不存在',
+            TRANSFER_QUOTA_INSUFFICIENT: '接收方配額不足',
+            TRANSFER_INSTANCE_LOCKED: '實例正在移轉中，暫時無法操作',
+            TRANSFER_HOST_DISABLED: '該節點已禁止移轉操作',
+            TRANSFER_INSUFFICIENT_BALANCE: '餘額不足，無法支付移轉手續費',
+            PUSH_NOT_HOST_OWNER: '只有主機擁有者才能直接推送',
+        },
+    },
+
+    // 忘記密碼
+    forgotPassword: {
+        title: '忘記密碼',
+        description: '輸入您的電子郵件地址，我們將發送重設密碼的連結。',
+        emailPlaceholder: '請輸入電子郵件地址',
+        submit: '發送重設連結',
+        sending: '發送中...',
+        success: '重設連結已發送到您的電子郵件',
+        backToLogin: '返回登入',
+        checkInbox: '請查看您的收件匣',
+        didntReceive: '沒有收到電子郵件？',
+        resend: '重新發送',
+        resendIn: '{seconds} 秒後可重新發送',
+    },
+
+    // 重設密碼
+    resetPassword: {
+        title: '重設密碼',
+        description: '輸入您的新密碼',
+        newPassword: '新密碼',
+        newPasswordPlaceholder: '請輸入新密碼',
+        confirmPassword: '確認密碼',
+        confirmPasswordPlaceholder: '請再次輸入新密碼',
+        submit: '重設密碼',
+        resetting: '重設中...',
+        success: '密碼已重設，請使用新密碼登入',
+        invalidToken: '重設連結無效或已過期',
+        tokenExpired: '重設連結已過期，請重新申請',
+        backToLogin: '返回登入',
+    },
+
+    // 管理後台 - 使用者管理
+    adminUsers: {
+        title: '使用者管理',
+        description: '管理系統中的所有使用者',
+        searchPlaceholder: '搜尋使用者名稱、電子郵件...',
+        filterAll: '全部',
+        filterAdmin: '管理員',
+        filterUser: '一般使用者',
+        filterBanned: '已封禁',
+        columns: {
+            user: '使用者',
+            email: '電子郵件',
+            role: '角色',
+            status: '狀態',
+            instances: '實例數',
+            createdAt: '建立時間',
+            lastLogin: '最後登入',
+            actions: '操作',
+        },
+        roles: {
+            admin: '管理員',
+            user: '使用者',
+        },
+        status: {
+            active: '啟用',
+            banned: '已封禁',
+            unverified: '未驗證',
+        },
+        noUsers: '無使用者',
+        noUsersHint: '系統中還沒有任何使用者',
+        loadFailed: '載入使用者失敗',
+        banSuccess: '使用者已封禁',
+        unbanSuccess: '使用者已解除封禁',
+        deleteSuccess: '使用者已刪除',
+        updateSuccess: '使用者已更新',
+    },
+
+    // 管理後台 - 主機管理
+    adminHosts: {
+        title: '主機管理',
+        description: '管理系統中的所有主機',
+        addHost: '新增主機',
+        editHost: '編輯主機',
+        deleteHost: '刪除主機',
+        searchPlaceholder: '搜尋主機名稱、IP...',
+        noHosts: '無主機',
+        status: {
+            online: '線上',
+            offline: '離線',
+            maintenance: '維護中',
+        },
+        columns: {
+            name: '名稱',
+            publicIp: '公網 IP',
+            location: '位置',
+            owner: '擁有者',
+            status: '狀態',
+            instances: '實例數',
+            createdAt: '建立時間',
+            actions: '操作',
+        },
+        createSuccess: '主機建立成功',
+        updateSuccess: '主機更新成功',
+        deleteSuccess: '主機已刪除',
+        loadFailed: '載入主機失敗',
+    },
+
+    // 管理後台 - 方案管理
+    adminPackages: {
+        title: '方案管理',
+        description: '管理系統中的所有方案',
+        addPackage: '新增方案',
+        editPackage: '編輯方案',
+        deletePackage: '刪除方案',
+        searchPlaceholder: '搜尋方案名稱...',
+        noPackages: '無方案',
+        columns: {
+            name: '名稱',
+            specs: '規格',
+            type: '類型',
+            host: '主機',
+            instances: '實例數',
+            actions: '操作',
+        },
+        types: {
+            container: '容器',
+            vm: '虛擬機器',
+        },
+        createSuccess: '方案建立成功',
+        updateSuccess: '方案更新成功',
+        deleteSuccess: '方案已刪除',
+        loadFailed: '載入方案失敗',
+    },
+
+    // 管理後台 - 實例管理
+    adminInstances: {
+        title: '實例管理',
+        description: '管理系統中的所有實例',
+        searchPlaceholder: '搜尋實例名稱、擁有者...',
+        noInstances: '無實例',
+        columns: {
+            name: '名稱',
+            owner: '擁有者',
+            host: '主機',
+            package: '方案',
+            status: '狀態',
+            createdAt: '建立時間',
+            actions: '操作',
+        },
+        filterAll: '全部',
+        filterRunning: '運行中',
+        filterStopped: '已停止',
+        loadFailed: '載入實例失敗',
+    },
+
+    // 管理後台 - 系統設定
+    adminSettings: {
+        title: '系統設定',
+        description: '管理系統設定',
+        general: '一般設定',
+        security: '安全設定',
+        email: '電子郵件設定',
+        notification: '通知設定',
+        saveSuccess: '設定已儲存',
+        saveFailed: '儲存設定失敗',
+        tabs: {
+            general: '一般',
+            security: '安全',
+            email: '電子郵件',
+            notification: '通知',
+        },
+    },
+
+    // 資源頁面（映像檔）
+    resources: {
+        hosts: {
+            title: '我的節點',
+            description: '管理您的節點，這些節點可以供您和您的好友使用',
+            create: '新增節點',
+            createDesc: '新增一個 Incus 節點',
+            ubuntuOnlyHint: '目前僅支援 Ubuntu 22.04+ 和 Debian 11+ 系統。',
+            installHintTitle: '填寫節點資訊並提交後，系統會生成包含面板地址和 Token 的安裝命令，複製到節點宿主機執行即可完成安裝。',
+            installHintIpv6: '提示：如需 IPv6 網路模式（NAT+IPv6、IPv6 Only），請先在宿主機執行安裝腳本，腳本會自動生成 IPv6 子網資訊供您填入下方表單。',
+            ipv6OptionalHint: '如不清楚以上資訊，可先留空。在節點宿主機執行安裝腳本後，腳本會自動檢測並輸出可用的 IPv6 子網，屆時回到面板編輯節點補充即可。',
+            storagePoolAfterConnectHint: '節點連線成功後，請記得前往節點詳細頁的「儲存」標籤頁建立儲存池。',
+            noHosts: '暫無節點',
+            noHostsHint: '新增節點後可以在其上建立實例',
+            calibrateAll: '對齊全部',
+            noOnlineHosts: '沒有線上的節點可對齊',
+            calibrateAllDone: '已對齊 {total} 個節點，其中 {changed} 個有差異已修正',
+            calibrateAllNoChange: '已對齊 {total} 個節點，無差異',
+            nameHint: '節點名稱以 PEER + 您的用戶ID 作為前綴，後面可自訂',
+            nameSuffixRequired: '請輸入節點名稱後綴',
+            // 管理員專用：節點切換器
+            mine: '我的節點',
+            hosted: '託管節點',
+            owner: '擁有者',
+            filterByUserId: '用戶ID',
+            takeoverOfficial: '接管為自營',
+            takeoverOfficialLoading: '接管中...',
+            takeoverOfficialConfirm: '確定要將節點「{name}」接管為自營嗎？此操作會轉移目前節點，並自動接管可安全轉移的方案；現有實例的使用者歸屬不變。',
+            takeoverOfficialSuccess: '已接管節點 {name}，轉移 {packages} 個方案，保留 {instances} 個實例',
+            takeoverOfficialDetached: '其中 {count} 個方案仍綁定其他託管節點，已移除目前節點綁定：{names}',
+            takeoverOfficialBlocked: '無法接管：有 {count} 個方案在移除目前節點後將失去全部綁定節點，請先手動處理這些方案：{names}',
+            // 詳情頁
+            transferControl: '移轉控制',
+            transferEnabled: '允許移轉',
+            transferEnabledHint: '關閉後，該節點上的實例將無法發起移轉請求',
+            notificationSettings: '通知設定',
+            notificationSettingsHint: '僅透過你已啟用的 Telegram、Discord、Webhook 渠道發送，這裡不會發送 Email。',
+            notifyPurchase: '購買通知',
+            notifyPurchaseHint: '當有使用者在該節點購買付費實例時通知你。',
+            notifyRenew: '續費通知',
+            notifyRenewHint: '當有使用者在該節點續費付費實例時通知你。',
+            notifyDestroy: '銷毀通知',
+            notifyDestroyHint: '當有使用者銷毀該節點實例時通知你，並包含實際退款金額與手續費金額。',
+            extraConfig: '額外設定',
+            trafficConfig: '流量設定',
+            trafficResetDay: '流量重置日',
+            trafficResetDayHint: '每月何日重置實例流量（可設定 1-28）',
+            enableResourcePool: '參與資源池玩法',
+            enableResourcePoolHint: '開啟後，該節點的實例可參與簽到/抽獎資源應用',
+        },
+        packages: {
+            title: '我的方案',
+            description: '管理您的方案設定，這些方案可以供您和您的好友使用',
+            create: '建立方案',
+            noPackages: '暫無方案',
+            noPackagesHint: '建立方案後可以在建立實例時使用',
+            share: '共享方案',
+            viewShares: '查看共享列表',
+            selectFriend: '選擇好友',
+            selectFriendPlaceholder: '請選擇要共享的好友',
+            noFriends: '暫無好友，請先新增好友',
+            shareSuccess: '方案共享成功',
+            shareFailed: '方案共享失敗',
+            confirmUnshare: '確定要取消共享嗎？',
+            unshareSuccess: '已取消共享',
+            unshareFailed: '取消共享失敗',
+            sharesList: '共享列表',
+            sharesCount: '{count} 人',
+            noShares: '暫無共享記錄',
+            noSharesHint: '共享後好友可使用此方案建立實例',
+            sharedAt: '共享時間',
+            unshare: '取消共享',
+            searchFriend: '搜尋好友...',
+            noAvailableFriends: '所有好友都已共享此方案',
+            selectToShare: '選擇要共享的好友',
+            // 配額限制
+            quotaSettings: '配額限制',
+            quotaMultiplier: '資源配額倍數',
+            quotaMultiplierHint: '限制好友可使用的 CPU/記憶體佔方案比例',
+            maxInstances: '最大實例數',
+            maxInstancesHint: '限制好友最多可開通的實例數量',
+            noLimit: '無限制',
+            instanceUnit: '{n} 台',
+            quotaDisplay: '配額: {multiplier} · 實例: {instances}',
+            usageDisplay: '已用: {cpu}% CPU / {memory} MB 記憶體 / {instances} 台',
+            updateQuota: '修改配額',
+            updateQuotaSuccess: '配額已更新',
+            updateQuotaFailed: '更新配額失敗',
+            // 美化彈窗新增
+            shareToFriend: '分享方案給好友',
+            noFriendsHint: '先新增好友才能共享方案',
+            allFriendsShared: '已全部共享',
+            confirmShare: '確認共享',
+            editQuota: '編輯配額',
+            editQuotaFor: '正在編輯 {username} 的配額',
+            quotaUpdated: '配額已更新',
+            quotaUpdateFailed: '更新配額失敗',
+            usageStatus: '使用情況',
+            instanceCount: '實例數量',
+            packageInstanceCount: '套餐下實例數',
+            networkModeColumn: '網路模式',
+            instanceTypeColumn: '實例類型',
+            trafficMultiplierColumn: '流量倍率',
+            hostColumn: '宿主機',
+            instanceColumn: '實例數',
+            publicBadge: '已公開',
+            currentUsage: '目前已用: {cpu}% CPU / {memory} MB 記憶體 / {instances} 台實例',
+            currentUsageInfo: '目前已使用 {cpu}% CPU、{memory} MB 記憶體、{instances} 台實例',
+            addShare: '新增共享',
+            searchPlaceholder: '搜尋方案名、節點名、描述...',
+            noSearchResults: '未找到符合的方案',
+            clearSearch: '清除搜尋',
+            // 通知渠道設定
+            notifyChannel: '通知渠道',
+            notifyChannelTitle: '資源釋放通知渠道',
+            notifyChannelDesc: '當使用者刪除實例或主機所有者釋放配額時，系統會透過此渠道發送通知',
+            // 分享連結
+            copyShareLink: '複製分享連結',
+            shareLinkCopied: '分享連結已複製，使用者訪問該連結可直達開通實例頁面',
+            // 管理員專用：套餐切換器
+            mine: '我的套餐',
+            hosted: '託管套餐',
+            owner: '擁有者',
+            filterByUserId: '用戶ID',
+        },
+        // 套餐方案管理
+        plans: {
+            title: '方案管理',
+            manage: '管理方案',
+            noPlans: '暫無方案',
+            noPlansHint: '建立方案後，使用者可以購買此套餐的付費實例',
+            add: '新增方案',
+            create: '建立方案',
+            edit: '編輯方案',
+            name: '方案名稱',
+            namePlaceholder: '如：基礎版、專業版、企業版',
+            description: '方案描述',
+            descriptionPlaceholder: '可選，用於向使用者展示方案特點',
+            resourceConfig: '資源設定',
+            portLimit: '連接埠數',
+            snapshotLimit: '快照數',
+            backupLimit: '備份數',
+            siteLimit: '站點數',
+            swapSize: 'SWAP 大小',
+            trafficLimit: '流量限額',
+            trafficSpeed: '頻寬限制',
+            unlimitedHint: '留空表示無限制',
+            billingConfig: '計費設定',
+            price: '價格',
+            billingCycle: '計費週期',
+            setupFee: '開通費',
+            slaGuarantee: 'SLA保證',
+            stock: '庫存',
+            isActive: '啟用方案',
+            status: '方案狀態',
+            statusActive: '可售',
+            statusActiveHint: '正常展示並允許使用者選擇和開通',
+            statusSoldOut: '售罄',
+            statusSoldOutHint: '繼續展示，但禁止新開通和改方案',
+            statusInactive: '下架',
+            statusInactiveHint: '不在開通入口展示，也不能被選擇',
+            sortOrder: '排序',
+            daily: '按天',
+            weekly: '按週',
+            monthly: '月付',
+            quarterly: '季付',
+            semiAnnual: '半年付',
+            yearly: '年付',
+            days: '天',
+            months: '個月',
+            createSuccess: '方案建立成功',
+            updateSuccess: '方案更新成功',
+            saveFailed: '儲存方案失敗',
+            priceRangeHint: '最高 ¥{max}',
+            priceRangeError: '方案價格必須在 0-{max} 元之間，最多支援兩位小數',
+            confirmDelete: '確定要刪除方案「{name}」嗎？',
+            deleteSuccess: '方案已刪除',
+            deleteFailed: '刪除方案失敗',
+        },
+        images: {
+            title: '我的映像檔',
+            description: '管理您的映像檔設定，這些映像檔可以供您和您的好友使用',
+            create: '新增映像檔',
+            noImages: '暫無映像檔',
+            noImagesHint: '新增映像檔後可以在建立實例時使用',
+        },
+        title: '資源',
+        description: '管理主機的映像檔資源',
+        tabs: {
+            images: '映像檔',
+        },
+    },
+
+    // 實例設定標籤頁
+    instanceConfig: {
+        title: '進階設定',
+        sections: {
+            swap: 'SWAP',
+            storageIO: '儲存 I/O 限制',
+            networkLimits: '網路限制',
+            processScheduling: '處理程序與排程',
+            bootSettings: '啟動設定',
+        },
+        swap: {
+            size: '大小',
+            enabled: '已啟用',
+            disabled: '已關閉',
+            enableButton: '啟用 SWAP',
+            disableButton: '關閉 SWAP',
+            toggleHint: 'SWAP 可依需求啟用或關閉，重裝或重建後會保留目前狀態。',
+            runningRequired: '虛擬機需要先啟動後才能啟用 SWAP。',
+            vmHint: '虛擬機會透過實例內的 swapfile 持久啟用。',
+            containerHint: '容器會透過 Incus 的記憶體交換限制套用 SWAP。',
+            enableConfirmTitle: '啟用 SWAP',
+            enableConfirmText: '確定要為此實例啟用 {size} 的 SWAP 嗎？',
+            disableConfirmTitle: '關閉 SWAP',
+            disableConfirmText: '確定要為此實例關閉 SWAP 嗎？',
+            enableSuccess: 'SWAP 已啟用',
+            enableFailed: '啟用 SWAP 失敗',
+            disableSuccess: 'SWAP 已關閉',
+            disableFailed: '關閉 SWAP 失敗',
+        },
+        changeHost: {
+            title: '改節點',
+            description: '將實例重新建立到同方案的其他節點，實例 ID 與計費資訊會保留。',
+            currentHost: '目前節點',
+            availableCount: '{count} 個可選節點',
+            button: '改節點',
+            loadFailed: '載入可用節點失敗',
+            submitFailed: '提交改節點失敗',
+            taskQueued: '改節點任務已提交，請稍候...',
+            modalTitle: '選擇目標節點',
+            modalSubtitle: '只能選擇同方案下 CPU 和記憶體容量充足的節點。',
+            warning: '此操作會重新建立實例系統碟，舊實例資料、快照、備份、連接埠映射和反代站點會被清空。',
+            selectSshKey: 'SSH 金鑰',
+            noSshKey: '沒有可用 SSH 金鑰',
+            confirm: '確認改節點',
+            current: '目前',
+            available: '可用',
+            memory: '記憶體',
+            reasons: {
+                current_host: '目前節點',
+                host_offline: '離線',
+                host_type_mismatch: '類型不匹配',
+                cpu_full: '已滿',
+                memory_full: '已滿',
+                resource_unconfigured: '未配置配額',
+                image_unavailable: '映像檔不可用',
+            },
+        },
+        overridden: '已覆寫',
+        resetToDefault: '重設為方案預設值',
+        saveSuccess: '設定已儲存',
+        saveFailed: '儲存設定失敗',
+        boostProcesses: {
+            button: '提高上限',
+            title: '提高處理程序數上限',
+            confirm: '確定要為該 {type} 實例提高處理程序數限制嗎？操作後處理程序數上限將提升至 {limit}。',
+            hint: '此操作僅提高處理程序數上限，不會影響實例的其他設定',
+            success: '處理程序數上限已提升至 {limit}',
+            failed: '提升處理程序數上限失敗',
+        },
+    },
+
+    // 方案表單頁面
+    packageForm: {
+        createTitle: '建立方案',
+        editTitle: '編輯方案',
+        description: '設定方案的資源限制和進階選項',
+        sections: {
+            basicInfo: '基本資訊',
+            resourceLimits: '資源限制',
+            storageIO: '儲存 I/O 限制',
+            networkLimits: '網路限制',
+            processScheduling: '處理程序與排程',
+            bootSettings: '啟動設定',
+            prerequisite: '前置方案',
+            visibility: '可見性',
+            instancePermissions: '實例操作權限',
+            advancedOptions: '進階選項',
+            instanceQuota: '實例配額',
+        },
+        fields: {
+            networkMode: '網路模式',
+            instanceType: '實例類型',
+            packageCreationMode: '方案用途',
+            ioLimitMode: 'IO 限制模式',
+            limitsRead: '讀取速率限制',
+            limitsWrite: '寫入速率限制',
+            limitsReadIops: '讀取 IOPS 限制',
+            limitsWriteIops: '寫入 IOPS 限制',
+            limitsIngress: '入站頻寬限制',
+            limitsEgress: '出站頻寬限制',
+            limitsProcesses: '最大處理程序數',
+            limitsCpuPriority: 'CPU 優先級',
+            bootAutostart: '隨主機自動啟動',
+            bootAutostartPriority: '啟動優先級',
+            bootAutostartDelay: '啟動延遲',
+            bootHostShutdownTimeout: '關機逾時時間',
+            portLimit: '連接埠映射數量限制',
+            snapshotLimit: '快照數量限制',
+            backupLimit: '備份數量限制',
+            siteLimit: '站點數量限制',
+            hostStoragePools: '節點系統碟儲存池',
+            hostTrafficMultiplier: '節點流量倍率',
+            requiredPackage: '前置方案',
+            publicAccess: '公開方案',
+            globalMaxInstances: '最大實例數',
+            allowInstanceDeletion: '允許使用者刪除實例',
+        },
+        hostSelector: {
+            official: '自營節點',
+            searchPlaceholder: '搜尋節點名、地區、地址、擁有者...',
+            selectedCount: '已選擇 {count} 台宿主機',
+            noSearchResults: '未找到符合的宿主機',
+            detailUnavailable: '目前視圖未載入此宿主機詳情，儲存時仍會保留綁定',
+        },
+        creationModes: {
+            free: {
+                title: '免費實例方案',
+                description: '實例直接使用方案裡的資源、配額與頻寬限制',
+            },
+            paid: {
+                title: '付費實例方案',
+                description: '建立後透過方案設定資源、配額、流量與價格',
+            },
+        },
+        ioMode: {
+            throughput: '讀寫速率限制',
+            iops: 'IOPS 限制',
+        },
+        hints: {
+            ioLimitMode: 'Incus 僅支援其中一種 IO 限制模式，請選擇一種',
+            cpuPriority: '0 為最低優先級，10 為最高優先級',
+            bootPriority: '數值越小越先啟動',
+            startupDelay: '實例啟動前等待的秒數 (5-600)',
+            shutdownTimeout: '主機關機時等待實例關閉的秒數 (30-600)',
+            instanceQuota: '限制使用者在此方案實例上可建立的資源數量',
+            portLimit: '每個實例可建立的連接埠映射數量上限',
+            snapshotLimit: '每個實例可建立的快照數量上限（0表示無配額）',
+            backupLimit: '每個實例可建立的備份數量上限（0表示無配額）',
+            siteLimit: '每個實例可建立的反代站點數量上限（0表示無配額）',
+            hostStoragePools: '為每個已綁定節點指定預設系統碟儲存池；留空時按節點預設規則自動選擇',
+            hostTrafficMultiplier: '實例月流量 = 方案或套餐流量 × 此倍率，預設 1',
+            requiredPackage: '選擇後，使用者需要先擁有該方案的實例，才能建立此方案實例',
+            noSystemStoragePools: '此節點目前沒有可用於實例系統碟的儲存池',
+            instanceType: '容器輕量快速，虛擬機器提供完整隔離',
+            publicAccess: '開啟後，方案將對所有使用者可見，他們可以使用此方案建立實例；關閉後方案將被隱藏/歸檔',
+            globalMaxInstances: '限制使用者最多可開通的實例數量，必須填寫 1-5 之間的整數',
+            allowInstanceDeletion: '關閉後，使用此方案建立的實例將不允許使用者刪除',
+            freePackageCreationMode: '免費實例無需建立方案，實例會直接繼承本頁設定。若需要門檻或想按付費實例流程開通，請選擇付費實例方案，建立後新增方案並將價格設為 0 元。',
+            paidPackageCreationMode: '付費實例會使用方案裡的資源、實例配額、流量與價格。本頁會隱藏這些會被方案覆蓋的項目，並使用預設值儲存方案。',
+        },
+        units: {
+            seconds: '秒',
+        },
+        placeholders: {
+            unlimited: '留空表示無限制',
+            autoStoragePool: '自動選擇（未指定）',
+            noPrerequisite: '無前置方案',
+        },
+        validation: {
+            cpuPriorityRange: 'CPU 優先級必須在 0-10 之間',
+            bootPriorityRange: '啟動優先級必須在 0-100 之間',
+            startupDelayRange: '啟動延遲必須在 5-600 秒之間',
+            shutdownTimeoutRange: '關機逾時時間必須在 30-600 秒之間',
+            portLimitMin: '連接埠映射數量至少為 1',
+            globalMaxInstancesRange: '公開方案最大實例數必須是 1-5 之間的整數',
+        },
+        typeHelp: {
+            containerFast: '啟動快速，秒級回應',
+            containerLight: '資源佔用小，適合大多數 Linux 應用程式',
+            containerDocker: '支援 Docker（需啟用嵌套虛擬化）',
+            vmIsolation: '完整隔離，獨立核心',
+            vmKernel: '支援自訂核心和核心模組',
+            vmWindows: '可運行 Windows 等非 Linux 系統',
+        },
+    },
+
+    // 敏感操作二次驗證
+    sensitiveVerification: {
+        title: '敏感操作驗證',
+        description: '此操作需要二次驗證以確保帳戶安全',
+        operationLabel: '操作類型',
+        sendCode: '發送驗證碼',
+        resendCode: '重新發送',
+        resendIn: '{seconds} 秒後可重新發送',
+        codeSent: '驗證碼已發送',
+        enterCode: '請輸入驗證碼',
+        verify: '驗證',
+        verifySuccess: '驗證成功，請重新執行操作',
+        verifyFailed: '驗證失敗',
+        operationTypes: {
+            change_password: '變更密碼',
+            disable_2fa: '停用雙重驗證',
+            delete_instance: '刪除實例',
+            reinstall_instance: '重裝實例',
+            recreate_instance: '重建實例',
+            transfer_instance: '移轉實例',
+            delete_snapshot: '刪除快照',
+            delete_backup: '刪除備份',
+        },
+    },
+
+    // 站內信
+    inbox: {
+        title: '通知中心',
+        description: '查看您的所有系統通知',
+        notifications: '通知',
+        unread: '未讀',
+        all: '全部',
+        allCategories: '全部類型',
+        markAllRead: '全部已讀',
+        markRead: '標記已讀',
+        clearRead: '清除已讀',
+        noMessages: '暫無通知',
+        noUnread: '沒有未讀通知',
+        viewAll: '查看全部',
+        justNow: '剛剛',
+        minutesAgo: '{n} 分鐘前',
+        hoursAgo: '{n} 小時前',
+        daysAgo: '{n} 天前',
+        categories: {
+            instance: '實例',
+            snapshot: '快照',
+            backup: '備份',
+            social: '好友',
+            transfer: '移轉',
+            package: '方案',
+            security: '安全',
+            quota: '配額',
+            ticket: '工單',
+            system: '系統',
+        },
+    },
+
+    // 配額釋放
+    quotaRelease: {
+        title: '釋放配額',
+        packageQuota: '方案配額',
+        noHosts: '無可用主機',
+        noHostsHint: '此方案未綁定任何主機',
+        selectHosts: '選擇主機',
+        selectAll: '全選',
+        deselectAll: '取消全選',
+        available: '可用',
+        quotaToAdd: '增加配額',
+        preview: '將為 {count} 台主機各增加 {cpu}% CPU 和 {memory} 記憶體',
+        notificationChannel: '通知管道',
+        noNotification: '不發送通知',
+        notificationHint: '釋放配額後，系統會透過此管道發送通知',
+        selectChannel: '選擇通知管道',
+        bindChannelHint: '僅顯示停用狀態的通知管道，用於資源釋放通知',
+        unbindChannel: '解除綁定',
+        sendNotification: '發送通知',
+        noDisabledChannel: '暫無可用的通知管道',
+        noDisabledChannelHint: '請先在「個人設定 - 通知」中新增一個管道並停用它',
+        channelEnabledWarning: '此管道已啟用，將同時接收系統事件通知',
+        noGlobalChannel: '暫無全域通知管道',
+        noGlobalChannelHint: '請聯繫管理員在系統設定中建立全域通知管道',
+        confirm: '釋放配額',
+        success: '成功為 {count} 台主機釋放配額',
+        failed: '釋放配額失敗',
+        loadFailed: '載入主機資訊失敗',
+        selectHost: '請至少選擇一台主機',
+        enterQuota: '請輸入要增加的配額',
+        channelUpdated: '通知管道已更新',
+        channelUpdateFailed: '更新通知管道失敗',
+    },
+
+    // Web 終端機
+    terminal: {
+        title: '終端機',
+        connecting: '正在連線...',
+        connected: '已連線',
+        disconnected: '已中斷連線',
+        failed: '連線失敗',
+        connectionFailed: '連線失敗',
+        connectionError: '連線錯誤',
+        reconnecting: '正在重新連線...',
+        reconnect: '重新連線',
+        requiresRunning: '需要實例處於運行狀態',
+        clear: '清除畫面',
+        fullscreen: '全螢幕',
+        exitFullscreen: '離開全螢幕',
+        fontSize: '字型大小',
+        fontSizeIncrease: '放大字型',
+        fontSizeDecrease: '縮小字型',
+        close: '關閉終端機',
+        disconnect: '中斷連線',
+        modeExec: 'Shell',
+        modeConsole: '控制台',
+        modeBootConsole: '啟動控制台',
+        modeSwitching: '切換到 Shell',
+        modeUnknown: '未知模式',
+        consoleFallback: '目前已回退到控制台模式',
+        consoleFallbackHint: '此虛擬機未能進入 Shell 模式，目前使用的是串口控制台。若體驗異常，請檢查 qemu-guest-agent、cloud-init 與串口登入設定。',
+        switchingToShell: '正在切換到 Shell...',
+        switchingToShellHint: 'Shell 已就緒，終端機正在從啟動控制台切換到互動式 Shell。',
+        shellReadyNotice: '已進入 Shell',
+        shellReadyHint: '啟動控制台輸出已完成，目前終端機已切換到互動式 Shell。',
+        consoleOnlyHint: '目前仍處於控制台模式，Shell 尚未就緒或正在重新連線。',
+        instanceInfo: '實例：{name}',
+        statusConnecting: '連線中',
+        statusConnected: '已連線',
+        statusDisconnected: '未連線',
+        statusError: '錯誤',
+        escToClose: '按 Esc 關閉',
+        pressCtrlShiftFToSearch: '按 Ctrl+Shift+F 搜尋',
+        searchPlaceholder: '搜尋...',
+        searchNext: '下一個',
+        searchPrevious: '上一個',
+        restore: '恢復終端機',
+        exportLog: '匯出日誌',
+        tab: '標籤',
+        newTab: '新增標籤',
+        closeTab: '關閉標籤',
+        maxTabsReached: '已達到最大標籤數',
+        contextMenu: {
+            copy: '複製',
+            paste: '貼上',
+            selectAll: '全選',
+        },
+        cloudInitChecking: '正在檢查實例初始化狀態...',
+        cloudInitInProgress: '實例正在初始化中',
+        cloudInitInProgressHint: '實例正在運行 Cloud-init 初始化，可能需要等待 10-60 秒。請稍後點擊「重新檢查」嘗試連線。',
+        cloudInitUnknown: 'Cloud-init 狀態待確認',
+        cloudInitUnknownHint: '目前無法可靠檢測此 KVM 實例內的 Cloud-init 狀態。你可以繼續連線，或手動標記為已完成。',
+        cloudInitRetry: '重新檢查',
+        cloudInitSkip: '忽略並連線',
+        cloudInitManualComplete: '手動標記完成',
+        cloudInitManualCompleteSuccess: '已手動標記此實例初始化為完成',
+        mobileKeyboardHint: '請切換至英文鍵盤以取得最佳體驗',
+        help: '說明',
+        helpTitle: '終端機使用說明',
+        helpShortcuts: '快速鍵',
+        helpShortcutSearch: '搜尋內容',
+        helpShortcutCopy: '複製選取',
+        helpShortcutPaste: '貼上',
+        helpShortcutFontIncrease: '放大字型',
+        helpShortcutFontDecrease: '縮小字型',
+        helpShortcutFontReset: '重設字型',
+        helpShortcutExport: '匯出日誌',
+        helpShortcutNewTab: '新增標籤',
+        helpShortcutCloseTab: '關閉標籤',
+        helpMouseOps: '滑鼠操作',
+        helpMouseSelect: '拖曳選取文字',
+        helpMouseCopy: '右鍵選單複製/貼上',
+        helpMouseScroll: '滾輪捲動歷史',
+        helpTouchOps: '觸控操作',
+        helpTouchPinchZoom: '雙指捏合調整字型大小',
+        helpTouchSwipeScroll: '單指滑動捲動歷史',
+        settings: '設定',
+        settingBell: '終端機提示音',
+        settingBellDesc: '程式發出提醒時播放聲音（如指令完成、錯誤警告等）',
+        settingAutoCopy: '選取自動複製',
+        settingAutoCopyDesc: '選取文字後自動複製到剪貼簿',
+        settingLinkPreview: '連結預覽',
+        settingLinkPreviewDesc: '滑鼠懸停在連結上時顯示 URL',
+        settingTouch: '觸控最佳化',
+        settingTouchDesc: '啟用行動裝置手勢支援（雙指縮放等）',
+        settingThemeDesc: '選擇終端機的配色方案',
+        settingTheme: '終端機佈景主題',
+        themeDark: '深色',
+        themeLight: '淺色',
+        themeHighContrast: '高對比度',
+        currentStatus: '目前狀態',
+        latency: '延遲',
+        savedCommands: {
+            cloud: '雲端同步',
+            title: '快捷命令',
+            subtitle: '保存常用命令，隨時送到目前終端機',
+            add: '新增',
+            synced: '雲端保存',
+            encrypted: '加密保存',
+            count: '共 {count} 條',
+            collapse: '收合快捷命令',
+            expand: '展開快捷命令',
+            open: '打開快捷命令',
+            short: '命令',
+            new: '新增命令',
+            edit: '編輯命令',
+            name: '名稱',
+            namePlaceholder: '例如：更新軟體來源',
+            command: '命令內容',
+            commandPlaceholder: '輸入要保存到雲端的終端機命令',
+            description: '備註',
+            descriptionPlaceholder: '可選備註，說明這條命令的用途',
+            loadFailed: '載入快捷命令失敗',
+            createSuccess: '快捷命令已保存',
+            updateSuccess: '快捷命令已更新',
+            saveFailed: '保存快捷命令失敗',
+            deleteSuccess: '快捷命令已刪除',
+            deleteFailed: '刪除快捷命令失敗',
+            deleteConfirm: '確定刪除「{name}」嗎？',
+            emptyTitle: '還沒有快捷命令',
+            emptyDescription: '點擊右上角「新增」保存常用命令。',
+            selected: '已選擇：{name}',
+            notSelected: '選擇一條快捷命令後即可執行或刪除',
+            execute: '執行',
+            runHint: '會直接送到目前啟用的終端機並立即執行。',
+            disconnectedHint: '目前終端機未連線，連線成功後才可執行命令',
+            shellRequiredHint: '目前尚未進入 Shell，需等 Shell 就緒後才能執行快捷命令',
+        },
+        paste: '貼上',
+        hideKeyboard: '收起鍵盤',
+    },
+
+    // 終端機管理頁面
+    terminalPage: {
+        newConnection: '新增連線',
+        selectInstance: '選擇實例',
+        runningCount: '運行中實例 {count} 台',
+        selectedInstance: '目前選擇',
+        selectionHint: '請選擇一個運行中的實例，終端機會直接連入該實例。',
+        directShell: '控制台優先連線',
+        directShellHint: '終端機會先附著啟動控制台，並在互動式 Shell 就緒後自動切換。',
+        host: '節點',
+        package: '套餐',
+        instanceId: '實例 ID',
+        statusRunning: '運行中',
+        noConnections: '暫無終端機連線',
+        noRunningInstances: '沒有運行中的實例',
+        noRunningInstancesHint: '請先啟動一個實例，或回到實例詳情頁確認運行狀態。',
+        connect: '連線',
+        description: '管理所有實例的終端機連線',
+        searchInstances: '搜尋實例名稱或映像檔...',
+        noMatchingInstances: '沒有符合的實例',
+        noMatchingInstancesHint: '請嘗試其他關鍵字，或清空搜尋條件查看全部運行中的實例。',
+    },
+
+    // 工單系統
+    tickets: {
+        title: '工單中心',
+        myTickets: '我的工單',
+        hostTickets: '收到的工單',
+        createTicket: '建立工單',
+        newTicket: '新增工單',
+        ticketDetails: '工單詳情',
+        noTickets: '暫無工單',
+        noTicketsHint: '您還沒有建立任何工單',
+        noHostTickets: '暫無收到的工單',
+        noHostTicketsHint: '您的主機沒有收到任何工單',
+        noUserTickets: '暫無使用者工單',
+        noUserTicketsHint: '目前沒有未綁定實例、直接發給管理員的使用者工單',
+        noOfficialTickets: '暫無自營工單',
+        noOfficialTicketsHint: '目前沒有來自自營節點的工單',
+        noHostedTickets: '暫無託管工單',
+        noHostedTicketsHint: '目前沒有來自託管節點的工單',
+        status: {
+            open: '待處理',
+            in_progress: '處理中',
+            resolved: '已解決',
+            closed: '已關閉',
+        },
+        priority: {
+            low: '低',
+            normal: '普通',
+            high: '高',
+            urgent: '緊急',
+        },
+        category: {
+            general: '一般諮詢',
+            billing: '帳務問題',
+            technical: '技術支援',
+            abuse: '濫用檢舉',
+        },
+        subject: '主題',
+        subjectPlaceholder: '簡要描述問題',
+        content: '內容',
+        contentPlaceholder: '請至少寫 10 個字，詳細描述您的問題，或上傳圖片附件',
+        selectInstance: '選擇實例',
+        selectInstanceHint: '選擇實例（可選）',
+        noInstancesHint: '您還沒有實例，可直接提交工單',
+        hostedInstanceHint: '如需針對託管實例提交工單，請務必選擇對應實例，工單將發送至該節點負責人處理。',
+            hostedInstanceHintTitle: '託管實例提示',
+        selectCategory: '選擇分類',
+        selectPriority: '選擇優先級',
+        reply: '回覆',
+        replyPlaceholder: '輸入回覆內容...',
+        close: '關閉工單',
+        reopen: '重新開啟',
+        updateStatus: '更新狀態',
+        markResolved: '標記為已解決',
+        markInProgress: '標記為處理中',
+        confirmClose: '確認關閉工單？',
+        confirmCloseHint: '關閉後將無法繼續回覆',
+        createSuccess: '工單建立成功',
+        replySuccess: '回覆成功',
+        closeSuccess: '工單已關閉',
+        statusUpdated: '狀態已更新',
+        host: '主機',
+        instance: '實例',
+        from: '來自',
+        assignedTo: '分配給',
+        createdAt: '建立時間',
+        lastReply: '最後回覆',
+        messages: '訊息',
+        viewDetails: '查看詳情',
+        pendingCount: '待處理',
+        allHosts: '所有主機',
+        filterByHost: '按主機篩選',
+        filterByStatus: '按狀態篩選',
+        sourceFilter: {
+            all: '全部工單',
+            user: '使用者工單',
+            official: '自營工單',
+            hosted: '託管工單',
+        },
+        activeStatus: '活躍',
+        allStatus: '全部',
+        ownerReply: '客服回覆',
+        userReply: '使用者回覆',
+        ticketClosed: '工單已關閉，無法回覆',
+        mustSelectInstance: '請先選擇實例',
+        noInstancesAvailable: '沒有可用的實例',
+        instanceDetails: '實例詳情',
+        instanceStatus: '狀態',
+        instanceId: '實例 ID',
+        incusId: 'Incus ID',
+        packageName: '方案',
+        cores: '核',
+        memory: '記憶體',
+        disk: '硬碟',
+        image: '映像檔',
+        loadMoreMessages: '載入更多訊息',
+        remaining: '條剩餘',
+        needsReply: '需要回覆',
+        searchPlaceholder: '搜尋工單 ID、主題、使用者名稱...',
+        perPage: '每頁',
+        totalCount: '共 {count} 條',
+        images: {
+            label: '圖片附件',
+            hint: '支援 JPG、PNG、WebP、GIF、AVIF，最多 {count} 張，每張不超過 {size}MB',
+            add: '新增圖片',
+            remove: '移除圖片',
+            selected: '已選擇 {count}/{max} 張圖片',
+            maxReached: '最多只能上傳 {count} 張圖片',
+            invalidType: '僅支援 JPG、PNG、WebP、GIF、AVIF 圖片',
+            fileTooLarge: '單張圖片不能超過 {size}MB',
+            loadFailed: '圖片載入失敗',
+            zoomIn: '放大',
+            zoomOut: '縮小',
+            resetZoom: '重設縮放',
+        },
+    },
+
+    // 簽到系統
+    checkin: {
+        title: '每日簽到',
+        checkinTab: '簽到',
+        redeemTab: '兌換',
+        recordsTab: '記錄',
+        notCheckedIn: '今日尚未簽到',
+        alreadyCheckedIn: '今日已簽到',
+        checkinButton: '簽到',
+        checkinSuccess: '簽到成功',
+        noInstance: '您需要至少擁有一個實例才能簽到',
+        clickToOpen: '點擊禮盒抽取今日獎勵',
+        opening: '開啟中',
+        revealing: '揭曉獎勵',
+        congratulations: '恭喜您獲得以下獎勵',
+        redeemCode: '兌換碼',
+        codeExpired: '已過期',
+        codeUsed: '已使用',
+        expiresIn: '剩餘時間',
+        copyCode: '複製兌換碼',
+        codeCopied: '兌換碼已複製',
+        resourceType: '資源類型',
+        resourceValue: '資源數值',
+        cpu: 'CPU',
+        memory: '記憶體',
+        disk: '硬碟',
+        traffic: '流量',
+        points: '積分',
+        redeemTitle: '兌換兌換碼',
+        inputCode: '請輸入兌換碼',
+        selectInstance: '選擇實例',
+        selectInstanceHint: '選擇要兌換資源的免費實例',
+        redeemButton: '兌換',
+        redeemSuccess: '兌換成功',
+        cappedFromPackageLimit: '已達方案上限',
+        redeemHint: '簽到兌換碼僅可用於免費實例',
+        alreadyRedeemed: '今日簽到碼已兌換過',
+        noInstancesForRedeem: '沒有可用的免費實例',
+        checkinRecords: '簽到記錄',
+        redeemRecords: '兌換記錄',
+        noRecords: '暫無記錄',
+        showingRecent: '顯示最近 {count} 條，共 {total} 條',
+        usedBy: '使用者',
+        usedFor: '兌換實例',
+        self: '自己',
+        others: '他人',
+        unused: '未使用',
+        selfOnlyMode: '僅限自用',
+        selfOnlyHint: '您的兌換碼已連續兩天被他人使用，從今天起只能自己使用，直到您自己使用一次',
+        rulesTitle: '簽到說明',
+        rulesCheckin: '簽到規則',
+        rulesCheckin1: '每日 1 次，0 點重置',
+        rulesCheckin2: '需擁有至少 1 個實例',
+        rulesCheckin3: '隨機獲得 CPU / 記憶體 / 硬碟 / 流量 獎勵',
+        rulesRedeem: '兌換規則',
+        rulesRedeem1: '兌換碼有效期 3 小時',
+        rulesRedeem2: '每人每日限兌換 1 次',
+        rulesRedeem3: '資源不能超過方案上限',
+        rulesShare: '分享',
+        rulesShare1: '兌換碼可分享給好友使用',
+        rulesShare2: '連續 2 天被他人使用將限制為僅自己可用，直到再次自己使用後解除',
+        percent: '%',
+        mb: 'MB',
+        gb: 'GB',
+        // 資源池系統新增
+        tabCheckin: '簽到',
+        tabRedeem: '兌換',
+        tabPool: '資源池',
+        tabLogs: '記錄',
+        clickToCheckin: '點擊簽到領取獎勵',
+        noInstances: '您需要至少擁有一個實例才能簽到',
+        bonusPoints: '額外獲得 {points} 積分',
+        savedToPool: '已存入資源池',
+        redeemSystemCode: '系統兌換碼',
+        enterCode: '輸入兌換碼',
+        systemCodePlaceholder: '輸入 h- 開頭的系統兌換碼',
+        systemCodeHint: '系統兌換碼（h-前綴）需選擇目標實例，資源將直接應用到該實例',
+        redeem: '兌換',
+        redeemToInstanceSuccess: '{type} +{value}{unit} 已應用到 {instance}',
+        applyToInstance: '應用資源到實例',
+        amount: '數量',
+        targetInstance: '目標實例',
+        kvmCpuHint: 'CPU參數兑換到KVM實例時，必須是100的整數倍',
+        kvmHint: 'KVM實例限制：CPU必須是100的倍數，記憶體必須是128MB的倍數，硬碟必須是1GB的倍數，且調整記憶體/硬碟需先停止實例。LXC實例無此限制。',
+        apply: '應用',
+        applySuccess: '{type} +{value}{unit} 已應用到 {instance}',
+        insufficientPool: '資源池餘額不足',
+        enterAmount: '請輸入數量',
+        allActions: '所有操作',
+        allResources: '所有資源',
+        noLogs: '暫無記錄',
+        action: '操作',
+        instance: '實例',
+        time: '時間',
+        actionCheckin: '簽到獲得',
+        actionRedeem: '兌換獲得',
+        actionAdminGrant: '管理員贈送',
+        actionSystemGrant: '系統獎勵',
+        actionLottery: '抽獎獲得',
+        actionApply: '應用消耗',
+        actionSystemRedeem: '系統兑換碼',
+    },
+
+    // 兌換碼管理
+    redeemCodes: {
+        title: '兌換碼管理',
+        create: '建立兌換碼',
+        createTitle: '建立兌換碼',
+        createBatch: '批次建立',
+        codeType: '資源類型',
+        codeValue: '資源數值',
+        resourceType: '資源類型',
+        resourceValue: '資源數值',
+        maxUses: '最大使用次數',
+        usedCount: '已使用',
+        expiresAt: '過期時間',
+        expiresAtHint: '留空表示永不過期',
+        neverExpires: '永不過期',
+        enabled: '已啟用',
+        disabled: '已停用',
+        enable: '啟用',
+        disable: '停用',
+        remark: '備註',
+        remarkPlaceholder: '可選備註資訊',
+        batchCount: '產生數量',
+        batchCountHint: '數量大於 1 時將批次產生一次性兌換碼',
+        createSuccess: '兌換碼建立成功',
+        batchCreateSuccess: '成功建立 {count} 個兌換碼',
+        createFailed: '建立失敗',
+        deleteConfirm: '確認刪除',
+        deleteSuccess: '成功刪除 {count} 個兌換碼',
+        deleteFailed: '刪除失敗',
+        confirmDelete: '確認刪除',
+        confirmDeleteMessage: '確定要刪除選取的 {count} 個兌換碼嗎？此操作不可撤銷。',
+        deleteSelected: '刪除選取 ({count})',
+        updateSuccess: '更新成功',
+        copyCode: '複製兌換碼',
+        copyAll: '複製全部',
+        copyCodes: '複製所有兌換碼',
+        codesCopied: '兌換碼已複製',
+        exhausted: '已用完',
+        expired: '已過期',
+        active: '有效',
+        paused: '已暫停',
+        usages: '使用記錄',
+        usageRecords: '使用記錄',
+        noUsages: '暫無使用記錄',
+        user: '使用者',
+        instance: '實例',
+        usedAt: '使用時間',
+        selectType: '選擇資源類型',
+        selectValue: '請選擇資源數值',
+        empty: '暫無兌換碼',
+        emptyList: '暫無兌換碼，點擊上方按鈕建立',
+        filterAll: '全部',
+        filterEnabled: '已啟用',
+        filterDisabled: '已停用',
+        batchDelete: '批次刪除',
+        batchDeleteConfirm: '確定要刪除選取的 {count} 個兌換碼嗎？',
+        usesHint: '設為 1 表示一次性兌換碼',
+        batchHint: '批次建立只能產生一次性兌換碼',
+        batchResult: '批次建立結果',
+        code: '兌換碼',
+        type: '類型',
+        usage: '使用情況',
+        status: '狀態',
+        actions: '操作',
+        loadFailed: '載入失敗',
+        batchId: '批次 ID',
+        batchLimitHint: '同一批次的兑換碼，每個使用者只能使用一張',
+        batch: '批次',
+        valueRange: '範圍：{min} - {max}',
+        valueOutOfRange: '數值必須在 {min} 到 {max} 之間',
+        valueMustBeInteger: '數值必須為整數',
+    },
+
+    // 擴充
+    extensions: {
+        title: '腳本',
+        description: '管理擴充功能',
+        initCommands: {
+            title: '自訂初始化指令',
+            description: '建立指令範本，在實例建立/重裝時執行',
+            add: '新增指令',
+            addFirst: '新增第一個指令',
+            edit: '編輯指令',
+            view: '查看詳情',
+            viewDetail: '指令詳情',
+            empty: '暫無自訂指令',
+            emptyHint: '點擊上方按鈕建立第一個初始化指令範本',
+            name: '名稱',
+            namePlaceholder: '輸入指令名稱',
+            command: '指令內容',
+            commandPlaceholder: '輸入 Shell 指令，每行一條\n範例：\napt update\napt install -y nginx',
+            commandHint: '每行一條指令，實例初始化時按順序執行',
+            distros: '適配發行版',
+            distrosHint: '選擇此指令相容的 Linux 發行版',
+            remark: '備註',
+            remarkPlaceholder: '可選描述',
+            createdAt: '建立時間',
+            actions: '操作',
+            status: '狀態',
+            statusEnabled: '已啟用',
+            statusDisabled: '已停用',
+            enabled: '指令已啟用',
+            disabled: '指令已停用',
+            clickToEnable: '點擊啟用',
+            clickToDisable: '點擊停用',
+            toggleFailed: '切換狀態失敗',
+            confirmDelete: '確定要刪除指令「{name}」嗎？此操作不可撤銷。',
+            createSuccess: '指令建立成功',
+            updateSuccess: '指令更新成功',
+            deleteSuccess: '指令已刪除',
+            createFailed: '建立失敗',
+            updateFailed: '更新失敗',
+            deleteFailed: '刪除失敗',
+            loadFailed: '載入指令失敗',
+            loadDetailFailed: '載入指令詳情失敗',
+            noContent: '無內容',
+            lineCount: '{count} 行',
+            addTitle: '新增初始化指令',
+            editTitle: '編輯初始化指令',
+            modalDesc: '指令將在實例初始化時執行',
+            selectTitle: '初始化指令',
+            optional: '(可選)',
+            noAvailable: '暫無可用的初始化指令',
+            goToManage: '前往擴充頁面建立',
+            selectHint: '已選指令將在實例初始化完成後執行',
+            selectedCount: '已選擇 {count} 個',
+            showAll: '展開全部 {count} 條',
+            collapse: '收合',
+            distroAll: '所有發行版',
+            distroNames: {
+                all: '所有發行版',
+                ubuntu: 'Ubuntu',
+                debian: 'Debian',
+                rhel: 'RHEL/CentOS/Fedora',
+                alpine: 'Alpine',
+                arch: 'Arch Linux',
+                suse: 'openSUSE/SLES',
+            },
+        },
+    },
+
+    // 計費管理
+    billing: {
+        // 通用
+        balance: '餘額',
+        frozen: '凍結',
+        totalRecharge: '累計充值',
+        totalConsume: '累計消費',
+        yuan: '元',
+        months: '個月',
+        month: '月',
+        days: '天',
+        save: '節省',
+        freeInstance: '免費實例',
+        paidInstance: '付費實例',
+        traffic: '月流量',
+        trafficBidirectional: '雙向',
+        soldOut: '售罄',
+        
+        // 實例計費資訊
+        billingInfo: '計費資訊',
+        currentPlan: '當前方案',
+        expiresAt: '到期時間',
+        neverExpires: '永不過期',
+        autoRenew: '自動續費',
+        autoRenewOn: '自動開',
+        autoRenewOff: '自動關',
+        autoRenewEnabled: '已開啟自動續費',
+        autoRenewDisabled: '已關閉自動續費',
+        autoRenewing: '自動續費',
+        enableAutoRenew: '開啟自動續費',
+        disableAutoRenew: '關閉自動續費',
+        autoRenewHint: '到期前 24 小時將自動從餘額扣款續費',
+        autoRenewDesc: '開啟自動續費後，實例將在到期前自動按 {cycle} 週期續費，每次續費 ￥{price}',
+        currentStatus: '當前狀態',
+        
+        // 續費
+        renew: '續費',
+        renewInstance: '實例續費',
+        renewTitle: '續費實例',
+        selectRenewPeriod: '選擇續費時長',
+        renewMonths: '{months} 個月',
+        renewPrice: '續費金額',
+        originalPrice: '原價',
+        affDiscount: '優惠碼折扣',
+        actualPrice: '實付金額',
+        newExpiresAt: '續費後到期',
+        currentBalance: '當前餘額',
+        balanceAfterRenew: '續費後餘額',
+        insufficientBalance: '餘額不足',
+        goRecharge: '前往充值',
+        renewing: '續費中...',
+        renewSuccess: '續費成功',
+        renewFailed: '續費失敗',
+        freeInstanceNoRenew: '免費實例無需續費',
+        hostingRenewTooEarly: '託管實例僅可在到期前 7 天內續費（當前剩餘 {days} 天）',
+        
+        // 升降級
+        changePlan: '升級',
+        changePlanTitle: '變更套餐方案',
+        upgrade: '升級',
+        selectNewPlan: '選擇新方案',
+        currentPlanLabel: '當前方案',
+        newPlanLabel: '新方案',
+        remainingDays: '剩餘天數',
+        remainingValue: '剩餘價值',
+        newPlanCost: '新方案費用',
+        priceDiff: '差價',
+        needPay: '需要支付',
+        noPriceChange: '無需補差價',
+        isUpgrade: '升級',
+        planNotActive: '方案已下架',
+        planNoStock: '方案已售罄',
+        changePlanInProgress: '升級方案中...',
+        changePlanSuccess: '方案升級成功',
+        changePlanFailed: '方案升級失敗',
+        needRestart: '請重啟實例以套用新配置',
+        newConfig: '新配置',
+        freeInstanceNoChange: '免費實例不支援升級',
+        samePlan: '不能切換到相同方案',
+        // 變更規則
+        viewRules: '變更規則',
+        hideRules: '收起規則',
+        changePlanRulesTitle: '方案升級規則',
+        changePlanRule1: '按日價計算差價，升級補差價',
+        changePlanRule2: '剩餘天數 ≥ 15 天才可升級方案',
+        changePlanRule3: '到期時間保持不變',
+        changePlanRule4: '優惠碼折扣繼續享受',
+        // 已是最高方案
+        alreadyHighestPlan: '當前已是最高方案',
+        contactForCustomPlan: '更高配置可提交工單定制',
+        // KVM/LXC 重啟提示
+        kvmRestartHint: 'KVM 實例升級後需重啟以套用新配置；若使用過重裝腳本，可能需自行擴容分割區',
+        lxcInstantHint: 'LXC 實例升級後配置即時生效',
+        kvmRestartRequired: 'KVM 實例方案已變更，請重啟實例以套用新配置',
+        // 不能變更原因
+        cannotChange: '暫時無法升級',
+        cannotChangeRemainingDays: '剩餘天數不足 {days} 天，無法升級方案',
+        cannotChangeInstanceStatus: '當前實例狀態不允許升級方案，僅運行中或已停止的實例可以操作',
+        cannotChangeUnknown: '當前無法升級方案',
+        // 計算詳情
+        oldDailyPrice: '原方案日價',
+        newDailyPrice: '新方案日價',
+        day: '天',
+        newPlanCostOriginal: '新方案剩餘費用',
+        newPlanCostFinal: '新方案剩餘費用（折後）',
+        discountAmount: '優惠碼折扣',
+        
+        // 計費記錄
+        records: '計費記錄',
+        billingRecords: '計費記錄',
+        recordType: '類型',
+        recordAmount: '金額',
+        recordPeriod: '帳期',
+        recordRemark: '備註',
+        recordTypes: {
+            purchase: '購買',
+            renewal: '續費',
+            upgrade: '升級',
+            downgrade: '降級',
+            admin_extension: '管理員延期',
+        },
+        
+        // 充值
+        recharge: '充值',
+        rechargeTitle: '帳戶充值',
+        rechargeAmount: '充值金額',
+        actualAmount: '實際到帳',
+        fee: '手續費',
+        minAmount: '最低充值',
+        maxAmount: '最高充值',
+        selectPaymentMethod: '選擇支付方式',
+        noPaymentProviders: '暫無可用支付渠道',
+        createOrder: '建立訂單',
+        creatingOrder: '建立訂單中...',
+        orderCreated: '訂單已建立',
+        orderNo: '訂單號',
+        orderStatus: '訂單狀態',
+        orderExpiredAt: '支付截止時間',
+        cancelOrder: '取消訂單',
+        orderCancelled: '訂單已取消',
+        orderStatus_pending: '待支付',
+        orderStatus_paid: '已支付',
+        orderStatus_completed: '已完成',
+        orderStatus_failed: '已失敗',
+        orderStatus_cancelled: '已取消',
+        orderStatus_expired: '已過期',
+        orderStatus_refunded: '已退款',
+        
+        // 充值記錄
+        rechargeRecords: '充值記錄',
+        noRecords: '暫無記錄',
+        viewDetails: '查看詳情',
+        
+        // 餘額記錄
+        balanceLogs: '餘額明細',
+        balanceLogTypes: {
+            recharge: '充值',
+            purchase: '購買',
+            renewal: '續費',
+            upgrade: '升級',
+            downgrade: '降級',
+            refund: '退款',
+            admin_adjust: '管理員調整',
+        },
+        
+        // 套餐方案
+        plan: '方案',
+        planName: '方案名稱',
+        planPrice: '價格',
+        planBillingCycle: '帳期',
+        planConfig: '配置',
+        planStock: '庫存',
+        planSoldOut: '已售罄',
+        planInactive: '已下架',
+        billingCycleMonthly: '月付',
+        billingCycleQuarterly: '季付',
+        billingCycleYearly: '年付',
+        perMonth: '/月',
+        perQuarter: '/季',
+        perYear: '/年',
+    },
+
+    // 託管準入
+    hosting: {
+        accessDenied: {
+            title: '暫不滿足託管條件',
+            description: '您需要滿足以下條件才能使用託管功能：',
+            condition: '至少擁有過 1 台實例',
+            currentInstances: '當前擁有 {count} 台實例',
+            hint: '實例包括免費和付費實例，官方直營和託管節點均可。',
+            featureHiddenCondition: '託管功能暫未對新使用者開放',
+            featureHiddenCurrent: '您還沒有建立過節點，目前入口已被系統隱藏。',
+            featureHiddenHint: '如需使用託管功能，請聯絡管理員開放，或等待功能重新開放。',
+        },
+    },
+
+    // 託管收益
+    hostingWallet: {
+        title: '託管收益',
+        description: '查看您的節點託管收益和提現記錄',
+        hostingMember: '託管者會員',
+        notice: {
+            title: '託管公告',
+        },
+        balance: {
+            available: '可用餘額',
+            frozen: '凍結中',
+            frozenNote: '收入凍結30天後解凍',
+            totalIncome: '累計收入',
+        },
+        stats: {
+            myHostsCount: '託管節點',
+            instancesOnMyHosts: '節點實例',
+            uniqueCustomersCount: '客戶數',
+            monthIncome: '本月收入',
+        },
+        withdraw: {
+            button: '申請提現',
+            minAmountNote: '可用餘額達到 {amount} 後可提現',
+        },
+        tabs: {
+            overview: '概覽',
+            logs: '收支明細',
+            withdrawals: '提現記錄',
+            blocks: '黑名單',
+        },
+        overview: {
+            title: '提現說明',
+            howItWorks: '收益流程',
+            step1Title: '用戶購買實例',
+            step1Desc: '用戶在您的節點上購買/續費實例',
+            step2Title: '收入凍結',
+            step2Desc: '收益計入託管餘額，凍結30天',
+            step3Title: '解凍提現',
+            step3Desc: '凍結期滿後可申請提現',
+            minAmountTitle: '最低提現',
+            minAmount: '最低提現金額 {amount}',
+            feeTitle: '提現手續費',
+            feeDesc: '提現到面板餘額手續費 {rate}%',
+            feeDescNew: '提現到面板餘額手續費 5%，提現到指定方式手續費 10%',
+            manualTitle: '手動提現',
+            manualDesc: '如需提現到其他方式（手續費 10%），請提交工單申請',
+            withdrawMethodTitle: '提現方式',
+            withdrawMethodDesc: '自助提現至餘額或發送工單申請其他提現方式',
+        },
+        logs: {
+            noRecords: '暫無收支記錄',
+            emptyHint: '當用戶在您的節點上購買實例後，收益將顯示在這裡',
+            searchPlaceholder: '搜尋用戶名/郵箱/實例名...',
+            filterAll: '全部類型',
+            freePlan: '免費',
+            columns: {
+                type: '類型',
+                amount: '金額',
+                status: '狀態',
+                buyer: '購買者',
+                instance: '實例',
+                host: '節點',
+                package: '套餐',
+                plan: '方案',
+                remark: '備註',
+                time: '時間',
+            },
+            types: {
+                income: '收入',
+                unfreeze: '解凍',
+                withdraw: '提現',
+                deduction: '扣除',
+            },
+            actionTypes: {
+                purchase: '開通',
+                renew: '續費',
+                upgrade: '升級',
+                destroy: '銷毀',
+                unfreeze: '解凍',
+                withdraw: '提現',
+                admin_adjust: '管理員調整',
+            },
+            status: {
+                frozen: '凍結中',
+                unfrozen: '已解凍',
+            },
+            unknownInstance: '未知實例',
+            unknownUser: '未知用戶',
+            unknownHost: '未知節點',
+        },
+        perPage: '條/頁',
+        prevPage: '上一頁',
+        nextPage: '下一頁',
+        withdrawals: {
+            noRecords: '暫無提現記錄',
+            emptyTitle: '還沒有提現記錄',
+            emptyHint: '當您的可用餘額達到最低提現金額後，可以申請提現',
+            startEarning: '立即提現',
+            columns: {
+                amount: '金額',
+                actualAmount: '實際到賬',
+                target: '提現方式',
+                status: '狀態',
+                time: '申請時間',
+            },
+            target: {
+                balance: '面板餘額',
+            },
+            status: {
+                pending: '待審核',
+                approved: '已通過',
+                rejected: '已拒絕',
+                completed: '已完成',
+            },
+        },
+        blocks: {
+            title: '用戶黑名單',
+            description: '被拉黑用戶無法在開通實例處看到您的託管套餐和方案，也無法新開通您的實例。',
+            total: '共 {count} 位用戶',
+            searchLabel: '搜尋站內用戶',
+            searchPlaceholder: '輸入 UID、用戶名或郵箱，至少 2 個字元',
+            noSearchResults: '沒有找到匹配的用戶',
+            blockedUsers: '已拉黑用戶',
+            effectHint: '這些用戶無法新開通您的託管套餐，已有實例和續費不受影響。',
+            emptyTitle: '暫無拉黑用戶',
+            emptyHint: '可以透過上方搜尋添加。',
+            block: '拉黑',
+            unblock: '解除拉黑',
+            blockSuccess: '已加入黑名單',
+            unblockSuccess: '已移出黑名單',
+        },
+        modal: {
+            title: '申請提現',
+            amount: '提現金額',
+            availableNote: '可用餘額：{amount}',
+            targetBalance: '提現到面板餘額（手續費 {rate}%）',
+            manualWithdrawNote: '如需手動提現到指定方式（手續費 10%），請提交工單申請提現託管餘額',
+            summary: {
+                amount: '提現金額',
+                fee: '手續費',
+                actual: '實際到賬',
+            },
+            cancel: '取消',
+            confirm: '確認提現',
+            submitting: '提交中...',
+        },
+        errors: {
+            minAmount: '最低提現金額為 {amount}',
+            exceedBalance: '提現金額超過可用餘額',
+        },
+    },
+
+    vipBenefits: {
+        commonMember: '普通會員',
+        overviewLabel: 'VIP 福利大廳',
+        overviewTitle: '當前等級 {level}',
+        overviewDesc: '達到最高 {level}，即可領取下方已解鎖等級的全部獎勵。請先領完低等級福利，再領取更高等級福利。',
+        noVipDesc: '升級 VIP 後可領取等級福利，所有獎品會按等級從低到高展示。',
+        availableSummary: '已解鎖獎勵匯總',
+        availableSummaryDesc: '這裡匯總當前等級已解鎖的全部獎勵額度。',
+        remainingSummary: '剩餘可領取',
+        noAvailableReward: '暫無已解鎖獎勵',
+        empty: '暫無 VIP 福利，請稍後再來。',
+        levelRewards: 'VIP{level} 獎勵',
+        levelUnlocked: '已達到該等級',
+        levelLocked: '升級後可領取',
+        rewardCount: '{count} 個獎品',
+        rewardValue: '獎勵內容',
+        claimProgress: '領取進度',
+        claim: '領取',
+        claimAll: '一鍵領取剩餘獎勵',
+        claimingAll: '正在領取...',
+        claimed: '已領取',
+        pendingDelivery: '待發放',
+        upgradeRequired: '待升級',
+        claimLowerFirst: '先領 VIP{level}',
+        claimSuccess: '領取成功',
+        noClaimableReward: '暫無可領取獎勵',
+        rewardReceived: 'VIP 福利獎勵',
+        pointsUnit: '積分',
+        instanceReward: '套餐實例',
+        instanceValue: '{plan} · {quantity} 台 · {days} 天',
+        feedback: {
+            delivered: '已到帳',
+            pending: '待發放',
+        },
+        types: {
+            balance: '餘額',
+            points: '積分',
+            instance: '實例',
+        },
+        summary: {
+            unlocked: '已解鎖',
+            claimable: '可領取',
+            claimed: '已領取',
+            pending: '待發放',
+        },
+        status: {
+            claimable: '可領取',
+            claimed: '已領取',
+            locked: '待升級',
+            blocked: '先領取 VIP{level}',
+            pending: '待發放',
+        },
+    },
+
+    // 福利系統
+    entertainment: {
+        title: '福利',
+        description: '領取會員福利，管理積分和徽章獎勵',
+        currentPoints: '當前積分',
+        convertPoints: '兑換積分',
+        noPointsToConvert: '暫無可兑換積分',
+        convertSuccess: '成功兑換 {points} 積分',
+        convertFailed: '兑換失敗',
+        pointsUnit: '分',
+        tabs: {
+            lottery: '抽獎',
+            records: '抽獎記錄',
+            points: '積分明細',
+        },
+        mainTabs: {
+            vipBenefits: 'VIP 福利',
+            lottery: '抽獎',
+            badge: '徽章',
+            blindbox: '盲盒',
+            checkin: '簽到',
+        },
+        comingSoon: '敬請期待',
+        blindbox: {
+            title: '盲盒',
+        },
+        checkinSection: {
+            title: '每日簽到',
+        },
+        // 抽獎
+        spin: '抽獎',
+        spinCost: '消耗 {points} 積分',
+        spinFailed: '抽獎失敗',
+        selectLottery: '請選擇抽獎活動',
+        notEnoughPoints: '積分不足',
+        noActiveLotteries: '暫無可用的抽獎活動',
+        prizeList: '獎品列表',
+        probability: '概率',
+        remaining: '剩餘',
+        // 十連抽
+        multiDraw: '十連抽',
+        multiDrawAgain: '再次十連',
+        multiDrawFailed: '十連抽失敗',
+        multiDrawResults: '十連抽結果',
+        multiDrawStopped: '抽獎提前結束',
+        notEnoughPointsForMulti: '積分不足，需要 {required} 積分，當前僅有 {current} 積分',
+        totalDraws: '抽獎次數',
+        totalPointsSpent: '消耗積分',
+        badgeUnit: '枚',
+        instanceUnit: '台',
+        multiDrawBadgesTitle: '本次十連抽中了徽章',
+        multiDrawBadgesSubtitle: '本輪十連共獲得 {count} 枚徽章，先看看這次的新收穫。',
+        continueToMultiResults: '繼續查看十連結果',
+        // 獎品類型
+        prizeTypes: {
+            nothing: '再接再勵',
+            points: '積分',
+            balance: '餘額',
+            badge: '隨機徽章',
+            instance: '實例',
+            cpu: 'CPU資源',
+            memory: '記憶體資源',
+            disk: '硬碟資源',
+            traffic: '流量資源',
+        },
+        // 中獎結果
+        congratulations: '恭喜中獎！',
+        betterLuckNextTime: '再接再勵',
+        wonPoints: '獲得 {points} 積分',
+        wonBalance: '獲得 ¥{amount} 餘額',
+        wonBadge: '獲得徽章：{badge}',
+        wonInstance: '請提交工單領取實例獎勵',
+        wonCpu: '獲得 {value}% CPU，已存入資源池',
+        wonMemory: '獲得 {value}MB 記憶體，已存入資源池',
+        wonDisk: '獲得 {value}MB 硬碟，已存入資源池',
+        wonTraffic: '獲得 {value}GB 流量，已存入資源池',
+        // 抽獎記錄
+        lotteryName: '活動名稱',
+        prize: '獎品',
+        prizeType: '獎品類型',
+        value: '獎勵值',
+        time: '時間',
+        noRecords: '暫無抽獎記錄',
+        loadRecordsFailed: '載入抽獎記錄失敗',
+        loadLotteriesFailed: '載入抽獎活動失敗',
+        // 積分明細
+        pointsLogType: '類型',
+        pointsChange: '變動',
+        pointsAfter: '變動後',
+        remark: '備註',
+        noPointsLogs: '暫無積分記錄',
+        loadPointsLogsFailed: '載入積分記錄失敗',
+        pointsLogTypes: {
+            convert: '消費兑換',
+            lotteryWin: '抽獎獲得',
+            lotterySpend: '抽獎消耗',
+            badgeDrawSpend: '徽章隨機抽取消耗',
+            badgeSelectSpend: '徽章自選消耗',
+            adminAdjust: '管理員調整',
+            checkin: '簽到獎勵',
+        },
+        badges: {
+            drawTab: '抽卡',
+            myTab: '我的徽章',
+            randomTitle: '隨機抽取',
+            randomHint: '等概率，必中一個徽章',
+            randomDescription: '消耗 {points} 積分，所有徽章等概率，必定獲得一個徽章副本。',
+            randomButton: '隨機抽一次（{points} 積分）',
+            randomMultiButton: '隨機十連（{points} 積分）',
+            selectTitle: '自選領取',
+            selectHint: '直接選擇一個指定徽章',
+            selectDescription: '消耗 {points} 積分，從下方直接選擇一個想要的徽章。',
+            selectButton: '領取目前選中徽章（{points} 積分）',
+            multiDrawTitle: '十連抽獲得的徽章',
+            multiDrawSubtitle: '本次十連共獲得 {count} 枚徽章。',
+            myTitle: '我的徽章',
+            summary: '可用 {available}，已套用 {applied}',
+            filterAll: '全部類型',
+            ownedCount: '已擁有 {count}',
+            empty: '還沒有獲得任何徽章。',
+            statusAvatar: '已套用到頭像',
+            statusInstance: '已套用到實例',
+            statusUnused: '未套用',
+            sourceLabel: '來源',
+            sourceDraw: '隨機抽取',
+            sourceLottery: '抽獎獲得',
+            sourceSelect: '自選領取',
+            sourceAdminGrant: '管理員發放',
+            obtainedAt: '獲得時間',
+            currentInstance: '目前實例',
+            applyAvatar: '套用到頭像',
+            applyInstance: '套用到實例圖示',
+            applyInstanceButton: '套用到實例',
+            selectInstance: '選擇一個實例',
+            unapply: '取消套用',
+            selectRequired: '請先選擇一個徽章',
+            instanceRequired: '請先選擇實例',
+            drawSuccess: '獲得徽章：{badge}',
+            selectSuccess: '領取成功：{badge}',
+            rewardTitleDraw: '抽卡成功',
+            rewardTitleSelect: '領取成功',
+            rewardSubtitle: '新徽章已經加入你的收藏，現在就可以前往「我的徽章」套用到頭像或實例。',
+            rewardSeriesLabel: '所屬系列',
+            rewardRemainingPoints: '剩餘積分',
+            rewardDrawAgain: '再抽一次',
+            rewardViewMine: '查看我的徽章',
+            applyAvatarSuccess: '已套用到頭像',
+            applyInstanceSuccess: '已套用到實例圖示',
+            unapplySuccess: '已取消套用',
+        },
+        // 管理端
+        admin: {
+            title: '娛樂管理',
+            description: '管理抽獎活動、獎品和用戶積分',
+            tabs: {
+                lotteries: '抽獎活動',
+                records: '中獎記錄',
+                users: '用戶積分',
+                badges: '徽章',
+            },
+            createLottery: '建立抽獎',
+            editLottery: '編輯抽獎',
+            lotteryName: '活動名稱',
+            enterLotteryName: '請輸入活動名稱',
+            lotteryDesc: '描述',
+            enterDescription: '請輸入描述（可選）',
+            costPoints: '消耗積分',
+            startAt: '開始時間',
+            endAt: '結束時間',
+            isActive: '啟用',
+            enterName: '請輸入名稱',
+            invalidCostPoints: '消耗積分必須大於0',
+            createSuccess: '建立成功',
+            updateSuccess: '更新成功',
+            saveFailed: '儲存失敗',
+            deleteSuccess: '刪除成功',
+            deleteFailed: '刪除失敗',
+            noLotteries: '暫無抽獎活動',
+            loadLotteriesFailed: '載入抽獎活動失敗',
+            prizes: '獎品',
+            totalDraws: '抽獎次數',
+            status: '狀態',
+            active: '已啟用',
+            inactive: '已停用',
+            // 獎品管理
+            managePrizes: '管理獎品',
+            addPrize: '新增獎品',
+            prizeName: '獎品名稱',
+            prizeType: '獎品類型',
+            prizeValue: '獎勵值',
+            balanceValue: '餘額（分）',
+            balanceCents: '輸入分，如100=1元',
+            cpuPercent: '輸入CPU百分比',
+            memoryMB: '輸入記憶體(MB)',
+            diskMB: '輸入硬碟(MB)',
+            trafficGB: '輸入流量(GB)',
+            probability: '權重',
+            quantity: '數量',
+            unlimited: '無限',
+            noQuantityForType: '此類型獎品不能設定數量限制',
+            replenish: '補充庫存',
+            remaining: '剩餘',
+            replenishPlaceholder: '輸入補充數量',
+            instanceDesc: '實例描述',
+            instanceDescPlaceholder: '如：1核/1G/10G SSD',
+            noPrizes: '暫無獎品，點擊上方按鈕新增',
+            enterPrizeName: '請輸入獎品名稱',
+            invalidProbability: '權重必須大於0',
+            savePrizesSuccess: '獎品儲存成功',
+            savePrizesFailed: '獎品儲存失敗',
+            // 中獎記錄
+            user: '用戶',
+            searchUser: '搜尋用戶名',
+            noRecords: '暫無中獎記錄',
+            loadRecordsFailed: '載入中獎記錄失敗',
+            prize: '獎品',
+            value: '獎勵值',
+            // 用戶積分
+            currentPoints: '當前積分',
+            totalEarned: '累計獲得',
+            totalSpent: '累計消耗',
+            lastConvertedAt: '最後兑換',
+            noUsers: '暫無用戶積分資料',
+            loadUsersFailed: '載入用戶積分失敗',
+            // 徽章目錄
+            badgeCatalog: {
+                loadFailed: '載入徽章目錄失敗',
+                fillSeriesRequired: '請填寫系列 ID、標題、名稱和說明',
+                seriesUpdated: '系列已更新',
+                seriesCreated: '系列已建立',
+                saveSeriesFailed: '儲存系列失敗',
+                seriesDeleted: '系列已刪除',
+                deleteSeriesFailed: '刪除系列失敗',
+                fillBadgeRequired: '請填寫徽章 ID、名稱、標籤、系列和預設圖片地址',
+                badgeUpdated: '徽章已更新',
+                badgeCreated: '徽章已建立',
+                saveBadgeFailed: '儲存徽章失敗',
+                badgeDeleted: '徽章已刪除',
+                deleteBadgeFailed: '刪除徽章失敗',
+                addSeries: '新增系列',
+                addBadge: '新增徽章',
+                series: {
+                    title: '系列',
+                    description: '控制前台篩選分組和整組啟用狀態',
+                    add: '新增',
+                    all: '全部系列',
+                    enabledCount: '{active} / {total} 個啟用',
+                    empty: '暫無系列',
+                    editTitle: '編輯系列',
+                    createTitle: '新增系列',
+                    id: '系列 ID',
+                    sort: '排序',
+                    nameZh: '中文名',
+                    nameEn: '英文名',
+                    titleLabel: '標題',
+                    titlePlaceholder: 'SUPREME 尊貴系列',
+                    descriptionLabel: '說明',
+                    sourceId: '來源 ID',
+                    sourceLabel: '來源名稱',
+                    enable: '啟用該系列',
+                },
+                badges: {
+                    title: '徽章',
+                    currentFilter: '當前篩選：{name}',
+                    empty: '暫無徽章',
+                    tableBadge: '徽章',
+                    tableSeries: '系列',
+                    tableAssetUrl: '圖片地址',
+                    tableStatus: '狀態',
+                    tableUsage: '使用',
+                    drawable: '可抽取',
+                    notDrawable: '不可抽取',
+                    usage: '擁有 {ownership} / 頭像 {avatar} / 實例 {instance}',
+                    editTitle: '編輯徽章',
+                    createTitle: '新增徽章',
+                    id: '徽章 ID',
+                    series: '系列',
+                    name: '名稱',
+                    nameEn: '英文名',
+                    fullLabel: '完整標籤',
+                    fullLabelPlaceholder: '精英 (Elite)',
+                    sourceId: '來源 ID',
+                    sourceLabel: '來源名稱',
+                    assetUrl: '預設圖片地址',
+                    assetUrlPlaceholder: '/badges/dark/elite.svg 或 https://example.com/badge.svg',
+                    assetUrlDark: '深色圖片地址',
+                    assetUrlLight: '淺色圖片地址',
+                    sort: '排序',
+                    enable: '啟用該徽章',
+                    preview: '預覽',
+                    previewName: '徽章名稱',
+                    previewLabel: '完整標籤',
+                },
+            },
+            // 通知配置
+            notification: {
+                title: '中獎通知',
+                enabled: '啟用通知',
+                type: '通知方式',
+                conditions: '通知條件',
+                notifyBalance: '中餘額時通知',
+                notifyInstance: '中實例時通知',
+                secret: '簽名密鑰',
+                secretPlaceholder: '用於驗證 Webhook 請求（可選）',
+                fillTelegram: '請填寫 Telegram Bot Token 和 Chat ID',
+                fillDiscord: '請填寫 Discord Webhook URL',
+                fillWebhook: '請填寫 Webhook URL',
+                saveSuccess: '通知配置保存成功',
+                saveFailed: '通知配置保存失敗',
+            },
+        },
+    },
+
+    // 郵箱模組
+    mail: {
+        title: '郵箱',
+        description: '管理您的專業郵箱服務',
+        tabs: {
+            my: '我的郵箱',
+            buy: '購買郵箱',
+            accounts: '郵箱帳戶',
+            dns: 'DNS 配置',
+            settings: '設定',
+        },
+        noSubscription: '您還沒有郵箱服務',
+        buyNowHint: '立即購買專業的郵箱服務',
+        buyNow: '立即購買',
+        subscriptionOverview: '訂閱概覽',
+        expiresAt: '到期時間',
+        domainsUsed: '已用網域',
+        diskUsed: '已用空間',
+        totalSpace: '總空間',
+        accounts: '帳戶',
+        plan: '方案',
+        domains: '個網域',
+        month: '月',
+        year: '年',
+        renew: '續費',
+        myDomains: '我的網域',
+        addDomain: '新增網域',
+        noDomains: '暫無網域，點擊上方按鈕新增',
+        used: '已用',
+        status: {
+            active: '活躍',
+            expired: '已過期',
+            suspended: '已暫停',
+        },
+        domainStatus: {
+            pending: '待驗證',
+            verified: '已驗證',
+            suspended: '已暫停',
+        },
+        selectRegion: '選擇服務地區',
+        nodeStatus: {
+            available: '節點狀態: 充足',
+            limited: '庫存緊張',
+        },
+        plans: '個方案',
+        planDetails: '方案配置詳情',
+        planTag: '正式版方案',
+        allFeaturesIncluded: '包含所有基礎及進階功能',
+        pureStorage: '純淨儲存空間',
+        feature: {
+            domains: '支援 {count} 個自訂網域綁定',
+            domainStorage: '{count}主網域 {storage}G儲存空間',
+            unlimitedAliases: '每個網域無限個別名',
+            unlimitedMailboxes: '每個網域無限個郵箱',
+            emailLimit: '每個網域 600 封電子郵件/小時',
+            emClientPro: '免費的 eM Client Pro 許可證',
+            catchAll: '支援 Catch All',
+            antispam: '自研反垃圾郵件閘道',
+            protocols: '支援 SMTP/IMAP/POP3 全協議',
+            aliases: '無限郵箱別名設定',
+        },
+        otherOptions: '其他選項',
+        verify: '驗證',
+        checkout: {
+            title: '結算匯總',
+            region: '選定地區',
+            serviceStatus: '服務狀態',
+            instant: '即時開通',
+            amount: '應付金額',
+            confirm: '立即開通',
+            securePayment: '加密支付保障，支援隨時申請退款',
+            balanceRequired: '需要先充值餘額，才能購買',
+        },
+        help: {
+            title: '遇到問題？',
+            desc: '如果您在購買過程中遇到任何技術問題，請提交工單聯系支援人員。',
+        },
+        selectPlan: '選擇方案',
+        storage: '儲存空間',
+        unlimitedAccounts: '無限郵箱帳戶',
+        orderConfirm: '訂單確認',
+        billingCycle: '計費週期',
+        monthly: '月付',
+        yearly: '年付',
+        totalPrice: '總價',
+        confirmRenew: '確認續費',
+        confirmPurchase: '確認購賣',
+        renewSubscription: '續費訂閱',
+        renewMonths: '續費時長',
+        monthlyPrice: '月單價',
+        yearlyPrice: '年單價',
+                alreadyPurchased: '您已購買該地區的郵箱服務',
+                alreadyPurchasedDesc: '每個用戶僅可購買一個地區的郵箱服務。如需更換方案，請先到「我的郵箱」進行管理。',
+                viewMySubscription: '查看我的訂閱',
+        renewDuration: '續費時長',
+        months: '個月',
+        renewSuccess: '續費成功',
+        selectPlanFirst: '請先選擇一個方案',
+        purchaseSuccess: '購賣成功',
+        domainName: '網域',
+        domainPlaceholder: '例如：example.com',
+        domainHint: '請輸入您擁有的網域，新增後需要配置 DNS 記錄驗證',
+        domainRequired: '請輸入網域',
+        domainAdded: '網域新增成功，請配置 DNS 記錄',
+        accountsDescription: '管理此網域下的郵箱帳戶',
+        createAccount: '建立帳戶',
+        verifyFirst: '請先驗證網域 DNS 配置後再建立郵箱帳戶',
+        completeDnsFirst: '請先完成 DNS 配置驗證，郵箱服務才能正常使用',
+        goDnsConfig: '前往配置',
+        adminAccount: '管理員帳號',
+        adminAccountDesc: '此帳號在新增網域時自動建立，可用於登入 Webmail 管理郵箱',
+        webmailUrl: '登入地址',
+        helpDoc: '查看幫助文檔',
+        noAdminAccount: '管理員帳號資訊不可用',
+        refreshStatus: '重新整理狀態',
+        noAccounts: '暫無郵箱帳戶',
+        admin: '管理員',
+        resetPassword: '重設密碼',
+        deleteAccountConfirm: '確定要刪除郵箱帳戶 {email} 嗎？此操作不可復原。',
+        accountDeleted: '帳戶已刪除',
+        dnsDescription: '請在您的網域 DNS 管理面板中新增以下記錄',
+        recordType: '記錄類型',
+        hostRecord: '主機記錄',
+        recordValue: '記錄值',
+        emailAddress: '郵箱地址',
+        txtVerification: 'TXT 驗證記錄',
+        pending: '待驗證',
+        verified: '已驗證',
+        mxRecords: 'MX 記錄',
+        cnameRecords: 'CNAME 記錄',
+        spfRecord: 'SPF 記錄',
+        dkimRecord: 'DKIM 記錄',
+        optional: '可選',
+        required: '必需',
+        recommended: '推薦',
+        dnsHint: {
+            txt: '網域驗證記錄，新增後點擊「刷新狀態」驗證',
+            mx: '郵件交換記錄，數字表示優先級（數字越小優先級越高）',
+            cname: '別名記錄，用於 Webmail 和自動發現功能',
+            spf: '寄件人策略框架，防止郵件偽造，提高送達率',
+            dkim: '網域密鑰認證，提高郵件可信度',
+            dmarc: '網域郵件認證策略，防止釣魚和欺詐郵件',
+        },
+        domainInfo: '網域資訊',
+        createdAt: '建立時間',
+        verifiedAt: '驗證時間',
+        dangerZone: '危險區域',
+        deleteDomainWarning: '刪除網域將同時刪除該網域下所有郵箱帳戶和資料，此操作不可復原。',
+        deleteDomain: '刪除網域',
+        deleteDomainConfirm: '確定要刪除網域 {domain} 嗎？此操作將刪除所有相關資料且不可復原。',
+        domainDeleted: '網域已刪除',
+        domainVerified: '網域驗證成功',
+        domainNotVerified: 'DNS 記錄尚未生效，請稍後重試',
+        username: '使用者名稱',
+        password: '密碼',
+        displayName: '顯示名稱',
+        diskLimit: '空間配額',
+        setAsAdmin: '設為網域管理員',
+        usernamePlaceholder: '例如：admin',
+        passwordPlaceholder: '至少8位字元',
+        passwordHint: '密碼至少8位，建議包含大小寫字母和數字',
+        displayNamePlaceholder: '例如：張三',
+        accountFieldsRequired: '請填寫使用者名稱和密碼',
+        accountCreated: '帳戶建立成功',
+        accountUpdated: '帳戶更新成功',
+        passwordMinLength: '密碼至少8位字元',
+        passwordReset: '密碼重設成功',
+        editAccount: '編輯帳戶',
+        newPassword: '新密碼',
+        newPasswordPlaceholder: '輸入新密碼',
+    },
+}
diff --git a/client/src/main.ts b/client/src/main.ts
new file mode 100644
index 0000000..bd0ba87
--- /dev/null
+++ b/client/src/main.ts
@@ -0,0 +1,81 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import i18n, { getLocale } from './locales'
+import App from './App.vue'
+import './styles/main.css'
+import 'flag-icons/css/flag-icons.min.css'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.use(i18n)
+
+document.documentElement.lang = getLocale()
+
+// 全局错误处理
+app.config.errorHandler = (err, _instance, info) => {
+  console.error('Vue应用错误:', err, info)
+  // 如果是组件加载错误，尝试重新加载页面
+  if (err && typeof err === 'object' && 'message' in err) {
+    const errorMessage = String(err.message)
+    if (errorMessage.includes('Failed to fetch dynamically imported module') ||
+        errorMessage.includes('Loading chunk') ||
+        errorMessage.includes('ChunkLoadError')) {
+      console.warn('检测到代码块加载失败，尝试重新加载页面')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+      return
+    }
+  }
+}
+
+// Initialize theme (after pinia is mounted)
+import { useThemeStore } from './stores/theme'
+const themeStore = useThemeStore()
+themeStore.init()
+
+// Load public config
+import { useConfigStore } from './stores/config'
+const configStore = useConfigStore()
+configStore.loadPublicConfig().then(() => {
+  const logoUrl = configStore.brandLogoUrl?.trim() || '/incudal_logo.webp'
+  const icon = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null
+  const appleTouchIcon = document.querySelector('link[rel="apple-touch-icon"]') as HTMLLinkElement | null
+  if (icon) {
+    icon.href = logoUrl
+  }
+  if (appleTouchIcon) {
+    appleTouchIcon.href = logoUrl
+  }
+})
+
+app.mount('#app')
+
+// 注册 Service Worker（仅生产环境）
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js')
+      .then(registration => {
+        console.log('Service Worker 注册成功:', registration.scope)
+        
+        // 检测更新
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing
+          if (newWorker) {
+            newWorker.addEventListener('statechange', () => {
+              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                console.log('有新版本可用，刷新页面后生效')
+              }
+            })
+          }
+        })
+      })
+      .catch(error => {
+        console.warn('Service Worker 注册失败:', error)
+      })
+  })
+}
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
new file mode 100644
index 0000000..0b33a86
--- /dev/null
+++ b/client/src/router/index.ts
@@ -0,0 +1,551 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import type { RouteLocationNormalized, NavigationGuardNext, RouteRecordRaw } from 'vue-router'
+import api from '@/api'
+
+// OAuth 登录码处理状态
+let oauthProcessing = false
+let oauthProcessed = false
+const hiddenHostingRouteNames = new Set([
+  'my-hosts',
+  'my-host-create',
+  'my-host-detail',
+  'my-packages',
+  'my-package-create',
+  'my-package-edit',
+  'hosting-wallet'
+])
+const hiddenMailRouteNames = new Set(['mail', 'mail-domain'])
+
+// 处理 OAuth 登录码的函数
+async function handleOAuthCode(): Promise<boolean> {
+  if (oauthProcessed) return true
+  
+  const urlParams = new URLSearchParams(window.location.search)
+  const oauthCode = urlParams.get('oauth_code')
+  
+  if (!oauthCode) return false
+  
+  // 防止重复处理
+  if (oauthProcessing) {
+    // 等待处理完成
+    while (oauthProcessing) {
+      await new Promise(resolve => setTimeout(resolve, 50))
+    }
+    return oauthProcessed
+  }
+  
+  oauthProcessing = true
+  
+  try {
+    const response = await api.oauth.exchangeCode(oauthCode)
+    // 保存 token 到 localStorage
+    localStorage.setItem('token', response.token)
+    // 同步到 auth store
+    const authStore = useAuthStore()
+    authStore.syncToken()
+    // 获取用户信息
+    await authStore.fetchCurrentUser()
+    
+    // 清除 URL 中的 oauth_code 参数
+    urlParams.delete('oauth_code')
+    const newSearch = urlParams.toString()
+    const newUrl = window.location.pathname + (newSearch ? '?' + newSearch : '')
+    window.history.replaceState({}, '', newUrl)
+    
+    oauthProcessed = true
+    return true
+  } catch (err) {
+    console.error('OAuth login code exchange failed:', err)
+    // 清除 URL 参数，避免重复尝试
+    urlParams.delete('oauth_code')
+    const newSearch = urlParams.toString()
+    const newUrl = window.location.pathname + (newSearch ? '?' + newSearch : '')
+    window.history.replaceState({}, '', newUrl)
+    return false
+  } finally {
+    oauthProcessing = false
+  }
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/LoginView.vue'),
+    meta: { guest: true }
+  },
+  {
+    path: '/register/:code?',
+    name: 'register',
+    component: () => import('@/views/RegisterView.vue'),
+    meta: { guest: true }
+  },
+  {
+    path: '/forgot-password',
+    name: 'forgot-password',
+    component: () => import('@/views/ForgotPasswordView.vue'),
+    meta: { guest: true }
+  },
+  {
+    path: '/',
+    redirect: { name: 'dashboard' }
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: () => import('@/views/DashboardView.vue'),
+    meta: { requiresAuth: true, requiresUser: true, titleKey: 'nav.dashboard', title: '概览' }
+  },
+  {
+    path: '/market',
+    redirect: (to) => ({
+      name: 'instance-create',
+      query: to.query
+    })
+  },
+  {
+    path: '/instances',
+    name: 'instances',
+    component: () => import('@/views/InstancesView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.instances', title: '实例' }
+  },
+  {
+    path: '/instances/create',
+    name: 'instance-create',
+    component: () => import('@/views/InstanceCreateView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.createInstance', title: '创建实例' }
+  },
+  {
+    path: '/instances/:id',
+    name: 'instance-detail',
+    component: () => import('@/views/InstanceDetailView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.instanceDetail', title: '实例详情' }
+  },
+  // 域名邮箱
+  {
+    path: '/mail',
+    name: 'mail',
+    component: () => import('@/views/MailView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.mail', title: '邮箱' }
+  },
+  {
+    path: '/mail/domains/:id',
+    name: 'mail-domain',
+    component: () => import('@/views/MailDomainView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.mailDomain', title: '邮箱域名' }
+  },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: () => import('@/views/ProfileView.vue'),
+    meta: { requiresAuth: true, titleKey: 'auth.profile', title: '个人设置' }
+  },
+  {
+    path: '/wallet',
+    name: 'wallet',
+    component: () => import('@/views/WalletView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.wallet', title: '钱包' }
+  },
+  {
+    path: '/invites',
+    name: 'invites',
+    component: () => import('@/views/InvitesView.vue'),
+    meta: { requiresAuth: true, requiresUser: true, titleKey: 'nav.invites', title: '邀请码' }
+  },
+  {
+    path: '/extensions',
+    name: 'extensions',
+    component: () => import('@/views/ExtensionsView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.extensions', title: '扩展' }
+  },
+  {
+    path: '/logs',
+    name: 'logs',
+    component: () => import('@/views/LogsView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.logs', title: '日志' }
+  },
+  {
+    path: '/transfers',
+    name: 'transfers',
+    component: () => import('@/views/TransfersView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.transfers', title: '转移' }
+  },
+  // 用户资源管理路由（开放给满足条件的用户）
+  {
+    path: '/resources/hosts',
+    name: 'my-hosts',
+    component: () => import('@/views/resources/MyHostsView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.myHosts', title: '我的节点' }
+  },
+  {
+    path: '/resources/hosts/create',
+    name: 'my-host-create',
+    component: () => import('@/views/resources/MyHostCreateView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.myHostCreate', title: '创建节点' }
+  },
+  {
+    path: '/resources/hosts/:id',
+    name: 'my-host-detail',
+    component: () => import('@/views/resources/MyHostDetailView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.myHostDetail', title: '节点详情' }
+  },
+  {
+    path: '/resources/packages',
+    name: 'my-packages',
+    component: () => import('@/views/resources/MyPackagesView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.myPackages', title: '我的套餐' }
+  },
+  {
+    path: '/resources/packages/create',
+    name: 'my-package-create',
+    component: () => import('@/views/resources/PackageFormView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.myPackageCreate', title: '创建套餐' }
+  },
+  {
+    path: '/resources/packages/:id/edit',
+    name: 'my-package-edit',
+    component: () => import('@/views/resources/PackageFormView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.myPackageEdit', title: '编辑套餐' }
+  },
+  // 托管余额页面
+  {
+    path: '/hosting-wallet',
+    name: 'hosting-wallet',
+    component: () => import('@/views/HostingWalletView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.hostingWallet', title: '托管收益' }
+  },
+
+  // 工单系统路由
+  {
+    path: '/tickets',
+    name: 'tickets',
+    component: () => import('@/views/TicketsView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.tickets', title: '工单' }
+  },
+  // Admin routes
+  {
+    path: '/admin/users',
+    name: 'admin-users',
+    component: () => import('@/views/admin/UsersView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.users', title: '用户' }
+  },
+  {
+    path: '/admin/hosting',
+    name: 'admin-hosting',
+    component: () => import('@/views/admin/HostingView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.hosting', title: '托管' }
+  },
+  {
+    path: '/admin/statistics',
+    name: 'admin-statistics',
+    component: () => import('@/views/admin/StatisticsView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.statistics', title: '统计' }
+  },
+  {
+    path: '/admin/oauth',
+    name: 'admin-oauth',
+    component: () => import('@/views/admin/OAuthConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.oauth', title: 'OAuth' }
+  },
+  {
+    path: '/admin/help',
+    name: 'admin-help',
+    component: () => import('@/views/admin/HelpManageView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.helpManage', title: '帮助' }
+  },
+  {
+    path: '/admin/settings',
+    name: 'admin-settings',
+    redirect: (to) => ({
+      path: '/admin/settings/access',
+      query: to.query,
+      hash: to.hash
+    }),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.settings', title: '设置' }
+  },
+  {
+    path: '/admin/settings/access',
+    name: 'admin-settings-access',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.sections.access.title', title: '访问与注册' }
+  },
+  {
+    path: '/admin/settings/hosting',
+    name: 'admin-settings-hosting',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.sections.hosting.title', title: '托管与站点' }
+  },
+  {
+    path: '/admin/settings/brand',
+    name: 'admin-settings-brand',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.sections.brand.title', title: '品牌与外观' }
+  },
+  {
+    path: '/admin/settings/security',
+    name: 'admin-settings-security',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.sections.security.title', title: '安全验证' }
+  },
+  {
+    path: '/admin/settings/mail',
+    name: 'admin-settings-mail',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.sections.mail.title', title: '邮件服务' }
+  },
+  {
+    path: '/admin/settings/tickets',
+    name: 'admin-settings-tickets',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.sections.tickets.title', title: '工单与附件' }
+  },
+  {
+    path: '/admin/settings/popup-announcement',
+    name: 'admin-settings-popup-announcement',
+    component: () => import('@/views/admin/SystemConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'admin.system.popupAnnouncement.title', title: '弹窗公告' }
+  },
+  {
+    path: '/admin/settings/telegram',
+    name: 'admin-settings-telegram',
+    component: () => import('@/views/admin/TelegramConfigView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.telegramSettings', title: 'Telegram 设置' }
+  },
+  {
+    path: '/admin/images',
+    name: 'admin-images',
+    component: () => import('@/views/admin/ImagesView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.images', title: '镜像' }
+  },
+  {
+    path: '/admin/broadcast',
+    name: 'admin-broadcast',
+    component: () => import('@/views/admin/BroadcastView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.broadcast', title: '公告' }
+  },
+  {
+    path: '/admin/payment-providers',
+    name: 'admin-payment-providers',
+    redirect: { path: '/admin/billing', query: { tab: 'paymentProviders' } },
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.paymentProviders', title: '支付' }
+  },
+  {
+    path: '/admin/billing',
+    name: 'admin-billing',
+    component: () => import('@/views/admin/BillingView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.billing', title: '计费' }
+  },
+  {
+    path: '/admin/aff',
+    name: 'admin-aff',
+    redirect: { path: '/admin/billing', query: { tab: 'affConversions' } },
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.aff', title: '推荐' }
+  },
+  {
+    path: '/admin/instances/create',
+    name: 'admin-instance-create',
+    component: () => import('@/views/admin/AdminInstanceCreateView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.adminCreateInstance', title: '管理员创建实例' }
+  },
+  {
+    path: '/admin/mail',
+    name: 'admin-mail',
+    component: () => import('@/views/admin/AdminMailView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'nav.mail', title: '邮箱' }
+  },
+  // Help articles (public access)
+  {
+    path: '/help',
+    name: 'help',
+    component: () => import('@/views/HelpView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.help', title: '帮助' }
+  },
+  {
+    path: '/help/:slug',
+    name: 'help-article',
+    component: () => import('@/views/HelpView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.help', title: '帮助' }
+  },
+  // Inbox (notifications)
+  {
+    path: '/inbox',
+    name: 'inbox',
+    component: () => import('@/views/InboxView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.inbox', title: '通知' }
+  },
+  // 娱乐系统
+  {
+    path: '/entertainment',
+    name: 'entertainment',
+    component: () => import('@/views/EntertainmentView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.entertainment', title: '娱乐' }
+  },
+  // 管理端娱乐管理
+  {
+    path: '/admin/entertainment',
+    name: 'admin-entertainment',
+    component: () => import('@/views/admin/EntertainmentView.vue'),
+    meta: { requiresAuth: true, requiresAdmin: true, titleKey: 'entertainment.admin.title', title: '娱乐管理' }
+  },
+  // 集中式终端管理
+  {
+    path: '/terminal',
+    name: 'terminal',
+    component: () => import('@/views/TerminalView.vue'),
+    meta: { requiresAuth: true, titleKey: 'nav.terminal', title: '终端' }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'not-found',
+    component: () => import('@/views/NotFoundView.vue'),
+    meta: { titleKey: 'error.notFound', title: '页面不存在' }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  // 页面切换时滚动到顶部，解决页面切换后空白问题
+  scrollBehavior(_to, _from, savedPosition) {
+    if (_to.path === _from.path && _to.hash === _from.hash) {
+      return false
+    }
+    if (savedPosition) {
+      return savedPosition
+    }
+    return { top: 0, behavior: 'instant' }
+  }
+})
+
+// 路由错误处理 - 捕获组件加载失败
+router.onError((error) => {
+  console.error('路由错误:', error)
+  console.error('错误详情:', {
+    message: error.message,
+    name: error.name,
+    stack: error.stack,
+    url: window.location.href
+  })
+  // 如果是组件加载失败，尝试重新加载页面
+  if (error.message?.includes('Failed to fetch dynamically imported module') ||
+    error.message?.includes('Loading chunk') ||
+    error.message?.includes('ChunkLoadError') ||
+    error.name === 'ChunkLoadError') {
+    console.warn('检测到代码块加载失败，尝试重新加载页面')
+    // 延迟一下，避免快速重载循环
+    setTimeout(() => {
+      window.location.reload()
+    }, 1000)
+  }
+})
+
+// Route guard
+router.beforeEach(async (to: RouteLocationNormalized, _from: RouteLocationNormalized, next: NavigationGuardNext) => {
+  const authStore = useAuthStore()
+  const configStore = useConfigStore()
+
+  // 检查是否有 OAuth 登录码需要处理
+  const urlParams = new URLSearchParams(window.location.search)
+  if (urlParams.has('oauth_code')) {
+    // 先处理 OAuth 登录码，等待完成
+    await handleOAuthCode()
+  }
+
+  // 如果有 token 但用户信息还没加载，先等待加载完成
+  if (authStore.isAuthenticated && !authStore.user) {
+    try {
+      await authStore.fetchCurrentUser()
+    } catch {
+      // 加载失败，token 可能无效，会被 logout 清除
+    }
+  }
+  
+  // 如果配额信息未加载，尝试重新获取
+  if (authStore.isAuthenticated && !authStore.quota && authStore.user) {
+    try {
+      await authStore.fetchCurrentUser()
+    } catch {
+      // 静默失败
+    }
+  }
+
+  // Pages requiring authentication
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next({ name: 'login', query: { redirect: to.fullPath } })
+    return
+  }
+
+  // Pages requiring admin permission
+  if (to.meta.requiresAdmin && !authStore.isAdmin) {
+    // 如果不是管理员，重定向到 dashboard（普通用户）
+    next({ name: 'dashboard' })
+    return
+  }
+
+  if (to.name === 'tickets' && authStore.isAuthenticated && !authStore.isAdmin) {
+    await configStore.loadPublicConfig()
+    if (!configStore.ticketEnabled) {
+      next({ name: 'dashboard' })
+      return
+    }
+  }
+
+  if (
+    authStore.isAuthenticated &&
+    !authStore.isAdmin &&
+    typeof to.name === 'string' &&
+    hiddenMailRouteNames.has(to.name)
+  ) {
+    await configStore.loadPublicConfig()
+    if (!configStore.mailAvailable) {
+      next({ name: 'dashboard' })
+      return
+    }
+  }
+
+  // Pages requiring user (non-admin) permission
+  if (to.meta.requiresUser && authStore.isAdmin) {
+    // 如果是管理员访问用户专属页面，重定向到用户管理页面
+    next({ name: 'admin-users' })
+    return
+  }
+
+  if (
+    !authStore.isAdmin &&
+    typeof to.name === 'string' &&
+    hiddenHostingRouteNames.has(to.name) &&
+    authStore.user?.canAccessHostingFeature === false
+  ) {
+    next({ name: 'dashboard' })
+    return
+  }
+
+  // 配额检查：普通用户不再需要配额检查（好友、节点、套餐功能已移除）
+  // 节点和套餐路由已设置 requiresAdmin，不需要额外配额检查
+
+  // Authenticated users accessing login/register pages
+  if (to.meta.guest && authStore.isAuthenticated) {
+    // 根据用户角色跳转
+    const redirectName = authStore.isAdmin ? 'admin-users' : 'dashboard'
+    next({ name: redirectName })
+    return
+  }
+
+  next()
+})
+
+// 预加载常用页面，提升切换速度
+router.isReady().then(() => {
+  // 延迟预加载，避免影响首屏加载
+  setTimeout(() => {
+    // 预加载核心页面
+    import('@/views/DashboardView.vue')
+    import('@/views/InstancesView.vue')
+    import('@/views/InstanceDetailView.vue')
+    import('@/views/ProfileView.vue')
+  }, 1000)
+})
+
+export default router
diff --git a/client/src/stores/auth.ts b/client/src/stores/auth.ts
new file mode 100644
index 0000000..7f8bac4
--- /dev/null
+++ b/client/src/stores/auth.ts
@@ -0,0 +1,149 @@
+import { defineStore } from 'pinia'
+import { ref, computed, type Ref } from 'vue'
+import api from '@/api'
+import type { AuthUser } from '@/types/store.js'
+import type { RegisterRequest } from '@/types/api.js'
+
+export const useAuthStore = defineStore('auth', () => {
+  const user: Ref<AuthUser | null> = ref(null)
+  const token: Ref<string | null> = ref(localStorage.getItem('token') || null)
+  const quota = ref<any>(null)
+
+  // 同步 token 的方法（用于 token 刷新后同步）
+  function syncToken() {
+    token.value = localStorage.getItem('token')
+  }
+
+  // 监听 localStorage 变化（跨窗口同步）
+  if (typeof window !== 'undefined') {
+    window.addEventListener('storage', (e) => {
+      if (e.key === 'token') {
+        token.value = e.newValue
+      }
+    })
+  }
+
+  const isAuthenticated = computed(() => !!token.value)
+  const isAdmin = computed(() => user.value?.role === 'admin')
+
+  function applyAuthUser(rawUser: any) {
+    user.value = {
+      id: rawUser.id,
+      username: rawUser.username,
+      email: rawUser.email || '',
+      role: rawUser.role,
+      avatarStyle: rawUser.avatarStyle || 'bigSmile',
+      avatarBadgeId: rawUser.avatarBadgeId || null,
+      hasCreatedHostBefore: rawUser.hasCreatedHostBefore || false,
+      canAccessHostingFeature: rawUser.canAccessHostingFeature ?? true
+    }
+  }
+
+  async function login(username: string, password: string, totpCode?: string, recoveryCode?: string, turnstileToken?: string) {
+    const response = await api.auth.login(username, password, totpCode, recoveryCode, turnstileToken)
+
+    token.value = response.token
+    applyAuthUser(response.user)
+    localStorage.setItem('token', response.token)
+    return response
+  }
+
+  async function register(data: RegisterRequest) {
+    const response = await api.auth.register(data)
+
+    // 注册成功后自动登录
+    token.value = response.token
+    applyAuthUser(response.user)
+    localStorage.setItem('token', response.token)
+
+    return response
+  }
+
+  async function fetchCurrentUser(): Promise<AuthUser | null> {
+    if (!token.value) return null
+    try {
+      const response = await api.auth.me()
+      applyAuthUser(response.user)
+      // 保存配额信息
+      quota.value = (response.user as any).quota || null
+      return user.value
+    } catch (error: any) {
+      if (error?.code === 'UNAUTHORIZED' || error?.response?.status === 401) {
+        // 只清除本地状态，不调用后端logout（因为token可能已经无效）
+        clearLocalAuth()
+      }
+      throw error
+    }
+  }
+
+  // 清除本地认证状态（不调用后端API）
+  function clearLocalAuth() {
+    token.value = null
+    user.value = null
+    quota.value = null
+    localStorage.removeItem('token')
+  }
+
+  async function logout() {
+    // 先调用后端登出 API（清除服务端会话和记录日志）
+    // 必须在清除本地状态之前调用，否则请求拦截器无法获取 token
+    if (token.value) {
+      try {
+        await api.auth.logout()
+      } catch (error) {
+        // 后端调用失败不影响本地登出
+        console.warn('登出 API 调用失败:', error)
+      }
+    }
+
+    // 最后清除本地状态
+    clearLocalAuth()
+  }
+
+  // 初始化：如果存在 token 则获取用户信息
+  // 使用 setTimeout 延迟执行，避免在 store 初始化时立即触发请求
+  if (token.value && typeof window !== 'undefined') {
+    setTimeout(() => {
+      fetchCurrentUser().catch(() => {
+        // 初始化时静默失败，如果 token 无效会自动清除
+      })
+    }, 0)
+  }
+
+  // 检查会话是否有效（用于页面可见性变化时检查）
+  async function checkSession(): Promise<boolean> {
+    if (!token.value) {
+      return false
+    }
+    try {
+      const response = await api.auth.me()
+      applyAuthUser(response.user)
+      quota.value = (response.user as any).quota || null
+      return true
+    } catch (error: any) {
+      // 如果是401，说明会话已过期
+      if (error?.code === 'UNAUTHORIZED' || error?.response?.status === 401) {
+        clearLocalAuth()
+        return false
+      }
+      // 其他错误（如网络错误），不清除状态
+      return true
+    }
+  }
+
+  return {
+    user,
+    token,
+    quota,
+    isAuthenticated,
+    isAdmin,
+    login,
+    register,
+    fetchCurrentUser,
+    logout,
+    syncToken,
+    clearLocalAuth,
+    checkSession
+  }
+})
+
diff --git a/client/src/stores/badges.ts b/client/src/stores/badges.ts
new file mode 100644
index 0000000..ef4a1db
--- /dev/null
+++ b/client/src/stores/badges.ts
@@ -0,0 +1,62 @@
+import { computed, ref, shallowRef } from 'vue'
+import { defineStore } from 'pinia'
+import api from '@/api'
+import type { BadgeCatalogItem, BadgeSeriesItem } from '@/types/api'
+
+export const useBadgeStore = defineStore('badges', () => {
+  const series = ref<BadgeSeriesItem[]>([])
+  const badges = ref<BadgeCatalogItem[]>([])
+  const loaded = ref(false)
+  const loading = ref(false)
+  const loadingPromise = shallowRef<Promise<void> | null>(null)
+  const missingReloads = new Set<string>()
+
+  const badgeMap = computed(() => new Map(badges.value.map(badge => [badge.id, badge])))
+
+  async function loadCatalog(force = false) {
+    if (loading.value && loadingPromise.value) return loadingPromise.value
+    if (loaded.value && !force) return
+
+    loading.value = true
+    loadingPromise.value = (async () => {
+      try {
+        const res = await api.entertainment.getBadgeCatalog()
+        series.value = res.series || []
+        badges.value = res.badges || []
+        loaded.value = true
+      } catch (error) {
+        console.warn('Failed to load badge catalog:', error)
+      } finally {
+        loading.value = false
+        loadingPromise.value = null
+      }
+    })()
+
+    return loadingPromise.value
+  }
+
+  function getBadge(id: string | null | undefined): BadgeCatalogItem | null {
+    if (!id) return null
+    return badgeMap.value.get(id) || null
+  }
+
+  async function ensureBadge(id: string | null | undefined) {
+    if (!id) return
+    await loadCatalog()
+    if (!getBadge(id) && !missingReloads.has(id)) {
+      missingReloads.add(id)
+      await loadCatalog(true)
+    }
+  }
+
+  return {
+    series,
+    badges,
+    loaded,
+    loading,
+    badgeMap,
+    loadCatalog,
+    ensureBadge,
+    getBadge
+  }
+})
diff --git a/client/src/stores/config.ts b/client/src/stores/config.ts
new file mode 100644
index 0000000..11e95a4
--- /dev/null
+++ b/client/src/stores/config.ts
@@ -0,0 +1,104 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import api from '@/api'
+
+type PopupPromoPackage = {
+    id: number
+    name: string
+    description: string | null
+    source: 'official' | 'market'
+    plans: Array<{
+        id: number
+        name: string
+        description: string | null
+        cpu: number
+        memory: number
+        disk: number
+        trafficLimit: string
+        price: number
+        billingCycle: number
+        isSoldOut: boolean
+    }>
+}
+
+export const useConfigStore = defineStore('config', () => {
+    const avatarApiBase = ref('https://api.dicebear.com/9.x')
+    const brandName = ref('Incudal')
+    const brandSubtitle = ref('基于 Incus 的低价 NAT VPS')
+    const brandLogoUrl = ref('/incudal_logo.webp')
+    const registrationEnabled = ref(true)
+    const requireInviteCode = ref(true)
+    const ticketEnabled = ref(true)
+    const freeSiteMode = ref(false)
+    const mailAvailable = ref(true)
+    const turnstileEnabled = ref(false)
+    const turnstileSiteKey = ref<string | null>(null)
+    const transferFee = ref(0)
+    const footerContactEmail = ref<string | null>('incudal@sent.com')
+    const footerTelegramLink = ref<string | null>('https://t.me/incudal_com')
+    const hostingMarketEntryEnabled = ref(true)
+    const hostingNotice = ref<string | null>(null)
+    const popupAnnouncement = ref<string | null>(null)
+    const popupAnnouncementUpdatedAt = ref<string | null>(null)
+    const popupPromoImageUrl = ref<string | null>(null)
+    const popupPromoPackage = ref<PopupPromoPackage | null>(null)
+    const popupPromoUpdatedAt = ref<string | null>(null)
+    const loaded = ref(false)
+
+    async function loadPublicConfig(force = false) {
+        if (loaded.value && !force) return
+        try {
+            const config = await api.systemConfig.getPublic()
+            registrationEnabled.value = config.registrationEnabled ?? true
+            requireInviteCode.value = config.requireInviteCode
+            ticketEnabled.value = config.ticketEnabled ?? true
+            freeSiteMode.value = config.freeSiteMode ?? false
+            mailAvailable.value = config.mailAvailable ?? true
+            turnstileEnabled.value = config.turnstileEnabled || false
+            turnstileSiteKey.value = config.turnstileSiteKey || null
+            avatarApiBase.value = config.avatarApiBase || 'https://api.dicebear.com/9.x'
+            brandName.value = config.brandName?.trim() || 'Incudal'
+            brandSubtitle.value = config.brandSubtitle?.trim() || '基于 Incus 的低价 NAT VPS'
+            brandLogoUrl.value = config.brandLogoUrl?.trim() || '/incudal_logo.webp'
+            transferFee.value = config.transferFee || 0
+            footerContactEmail.value = config.footerContactEmail ?? null
+            footerTelegramLink.value = config.footerTelegramLink ?? null
+            hostingMarketEntryEnabled.value = config.hostingMarketEntryEnabled ?? true
+            hostingNotice.value = config.hostingNotice ?? null
+            popupAnnouncement.value = config.popupAnnouncement ?? null
+            popupAnnouncementUpdatedAt.value = config.popupAnnouncementUpdatedAt ?? null
+            popupPromoImageUrl.value = config.popupPromoImageUrl ?? null
+            popupPromoPackage.value = config.popupPromoPackage ?? null
+            popupPromoUpdatedAt.value = config.popupPromoUpdatedAt ?? null
+            loaded.value = true
+        } catch (error) {
+            console.error('Failed to load public config:', error)
+        }
+    }
+
+    return {
+        avatarApiBase,
+        brandName,
+        brandSubtitle,
+        brandLogoUrl,
+        registrationEnabled,
+        requireInviteCode,
+        ticketEnabled,
+        freeSiteMode,
+        mailAvailable,
+        turnstileEnabled,
+        turnstileSiteKey,
+        transferFee,
+        footerContactEmail,
+        footerTelegramLink,
+        hostingMarketEntryEnabled,
+        hostingNotice,
+        popupAnnouncement,
+        popupAnnouncementUpdatedAt,
+        popupPromoImageUrl,
+        popupPromoPackage,
+        popupPromoUpdatedAt,
+        loaded,
+        loadPublicConfig
+    }
+})
diff --git a/client/src/stores/inbox.ts b/client/src/stores/inbox.ts
new file mode 100644
index 0000000..87c2b90
--- /dev/null
+++ b/client/src/stores/inbox.ts
@@ -0,0 +1,100 @@
+/**
+ * 站内信状态管理
+ */
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import api from '@/api'
+
+export const useInboxStore = defineStore('inbox', () => {
+  // 未读消息数量
+  const unreadCount = ref(0)
+  
+  // 轮询定时器
+  let pollTimer: number | null = null
+  
+  // 是否已初始化
+  const initialized = ref(false)
+
+  /**
+   * 获取未读消息数量
+   */
+  async function fetchUnreadCount(): Promise<void> {
+    try {
+      const res = await api.inbox.getUnreadCount()
+      unreadCount.value = res.count
+    } catch {
+      // 静默失败，不影响用户体验
+    }
+  }
+
+  /**
+   * 启动轮询（登录后调用）
+   */
+  function startPolling(): void {
+    if (initialized.value) return
+    
+    initialized.value = true
+    fetchUnreadCount() // 立即获取一次
+    
+    // 每 15 秒轮询一次
+    pollTimer = window.setInterval(fetchUnreadCount, 15000)
+    
+    // 监听页面可见性变化
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+  }
+
+  /**
+   * 停止轮询（登出时调用）
+   */
+  function stopPolling(): void {
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = null
+    }
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    initialized.value = false
+    unreadCount.value = 0
+  }
+
+  /**
+   * 主动刷新（用户操作后调用）
+   */
+  function refresh(): void {
+    fetchUnreadCount()
+  }
+
+  /**
+   * 页面可见性变化时刷新
+   */
+  function handleVisibilityChange(): void {
+    if (document.visibilityState === 'visible') {
+      refresh()
+    }
+  }
+
+  /**
+   * 减少未读数量（标记已读后调用）
+   */
+  function decrementUnread(count: number = 1): void {
+    unreadCount.value = Math.max(0, unreadCount.value - count)
+  }
+
+  /**
+   * 清零未读数量（全部标记已读后调用）
+   */
+  function clearUnread(): void {
+    unreadCount.value = 0
+  }
+
+  return {
+    unreadCount,
+    initialized,
+    fetchUnreadCount,
+    startPolling,
+    stopPolling,
+    refresh,
+    decrementUnread,
+    clearUnread
+  }
+})
diff --git a/client/src/stores/restoreTask.ts b/client/src/stores/restoreTask.ts
new file mode 100644
index 0000000..2d4fb48
--- /dev/null
+++ b/client/src/stores/restoreTask.ts
@@ -0,0 +1,219 @@
+/**
+ * 全局恢复任务状态管理
+ * 用于在页面切换时保持恢复任务的轮询状态
+ */
+import { ref, type Ref } from 'vue'
+import api from '@/api'
+import { useToast } from './toast'
+
+export type RestoreTaskStatus =
+    | 'idle'
+    | 'pending'
+    | 'processing'
+    | 'stopping'
+    | 'restoring'
+    | 'replacing'
+    | 'completed'
+    | 'failed'
+    | 'rolled_back'
+
+export interface RestoreTask {
+    instanceId: number
+    backupId: number
+    backupName: string
+    taskId: string
+    status: RestoreTaskStatus
+    error?: string
+    notificationId: number | null
+    queuePosition?: number
+    duration?: number | null
+    createdAt?: string
+    startedAt?: string | null
+    finishedAt?: string | null
+}
+
+// 全局状态 - 在模块级别定义，所有组件共享
+const activeTask: Ref<RestoreTask | null> = ref(null)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+export function useRestoreTask() {
+    const toast = useToast()
+
+    /**
+     * 开始恢复任务
+     */
+    async function startRestore(
+        instanceId: number,
+        backupId: number,
+        backupName: string,
+        t: (key: string, params?: Record<string, unknown>) => string
+    ): Promise<boolean> {
+        // 检查是否已有进行中的任务
+        if (activeTask.value && !['completed', 'failed', 'rolled_back', 'idle'].includes(activeTask.value.status)) {
+            toast.warning(t('backup.messages.restoreInProgress'))
+            return false
+        }
+
+        try {
+            const res = await api.instances.restoreBackup(instanceId, backupId)
+
+            // 显示持久通知
+            const notificationId = toast.show(
+                t('backup.messages.restoreStarted', { name: backupName }),
+                'info',
+                0 // 不自动消失
+            )
+
+            activeTask.value = {
+                instanceId,
+                backupId,
+                backupName,
+                taskId: res.taskId,
+                status: 'pending',
+                notificationId
+            }
+
+            // 开始轮询
+            startPolling(t)
+            return true
+        } catch (err: any) {
+            toast.error(t('backup.messages.restoreFailed') + ': ' + (err?.message || String(err)))
+            return false
+        }
+    }
+
+    /**
+     * 开始轮询任务状态
+     */
+    function startPolling(t: (key: string, params?: Record<string, unknown>) => string): void {
+        stopPolling()
+
+        pollInterval = setInterval(async () => {
+            if (!activeTask.value || !activeTask.value.taskId) {
+                stopPolling()
+                return
+            }
+
+            try {
+                const res = await api.instances.getRestoreStatus(
+                    activeTask.value.instanceId,
+                    activeTask.value.taskId
+                )
+
+                // 后端返回大写状态，转为小写
+                const status = res.status.toLowerCase() as RestoreTaskStatus
+                activeTask.value.status = status
+                if (res.error) {
+                    activeTask.value.error = res.error
+                }
+                // 更新任务时间信息
+                if (res.queuePosition !== undefined) activeTask.value.queuePosition = res.queuePosition
+                if (res.duration !== undefined) activeTask.value.duration = res.duration
+                if (res.createdAt) activeTask.value.createdAt = res.createdAt
+                if (res.startedAt !== undefined) activeTask.value.startedAt = res.startedAt
+                if (res.finishedAt !== undefined) activeTask.value.finishedAt = res.finishedAt
+
+                // 处理完成状态
+                if (status === 'completed') {
+                    if (activeTask.value.notificationId !== null) {
+                        toast.remove(activeTask.value.notificationId)
+                    }
+                    toast.success(t('backup.messages.restoreCompleted'))
+                    stopPolling()
+                    // 刷新页面以显示恢复后的实例
+                    setTimeout(() => {
+                        window.location.reload()
+                    }, 1500)
+                } else if (status === 'failed') {
+                    if (activeTask.value.notificationId !== null) {
+                        toast.remove(activeTask.value.notificationId)
+                    }
+                    toast.error(t('backup.messages.restoreFailed') + ': ' + (res.error || ''))
+                    stopPolling()
+                }
+            } catch (err) {
+                console.error('Failed to poll restore status:', err)
+            }
+        }, 2000)
+    }
+
+    /**
+     * 停止轮询
+     */
+    function stopPolling(): void {
+        if (pollInterval) {
+            clearInterval(pollInterval)
+            pollInterval = null
+        }
+    }
+
+    /**
+     * 回滚恢复操作
+     */
+    async function rollback(t: (key: string, params?: Record<string, unknown>) => string): Promise<boolean> {
+        if (!activeTask.value || activeTask.value.status !== 'failed') {
+            return false
+        }
+
+        try {
+            await api.instances.rollbackRestore(activeTask.value.instanceId, activeTask.value.taskId)
+            activeTask.value.status = 'rolled_back'
+            toast.success(t('backup.messages.rollbackCompleted'))
+            return true
+        } catch (err: any) {
+            toast.error(t('backup.messages.rollbackFailed') + ': ' + (err?.message || String(err)))
+            return false
+        }
+    }
+
+    /**
+     * 清除任务状态
+     */
+    function clearTask(): void {
+        stopPolling()
+        if (activeTask.value && activeTask.value.notificationId !== null) {
+            toast.remove(activeTask.value.notificationId)
+        }
+        activeTask.value = null
+    }
+
+    /**
+     * 获取指定实例的恢复状态
+     */
+    function getTaskForInstance(instanceId: number): RestoreTask | null {
+        if (activeTask.value && activeTask.value.instanceId === instanceId) {
+            return activeTask.value
+        }
+        return null
+    }
+
+    /**
+     * 检查指定备份是否正在恢复
+     */
+    function isBackupRestoring(instanceId: number, backupId: number): boolean {
+        if (!activeTask.value) return false
+        return activeTask.value.instanceId === instanceId &&
+            activeTask.value.backupId === backupId &&
+            ['pending', 'processing', 'stopping', 'restoring', 'replacing'].includes(activeTask.value.status)
+    }
+
+    /**
+     * 检查指定备份是否恢复失败（可回滚）
+     */
+    function canRollbackBackup(instanceId: number, backupId: number): boolean {
+        if (!activeTask.value) return false
+        return activeTask.value.instanceId === instanceId &&
+            activeTask.value.backupId === backupId &&
+            activeTask.value.status === 'failed'
+    }
+
+    return {
+        activeTask,
+        startRestore,
+        rollback,
+        clearTask,
+        getTaskForInstance,
+        isBackupRestoring,
+        canRollbackBackup
+    }
+}
diff --git a/client/src/stores/terminal.ts b/client/src/stores/terminal.ts
new file mode 100644
index 0000000..94439d0
--- /dev/null
+++ b/client/src/stores/terminal.ts
@@ -0,0 +1,332 @@
+/**
+ * 终端设置 Store
+ * 
+ * 管理终端的所有可配置项，并持久化到 localStorage
+ * 被 TerminalModal.vue 和 TerminalView.vue 共享
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed, watch } from 'vue'
+
+// 终端主题类型
+export type TerminalThemeType = 'dark' | 'light' | 'highContrast'
+
+// 终端主题定义
+export const TERMINAL_THEMES = {
+    // Vercel 极简风格 - 纯黑背景（默认）
+    dark: {
+        name: 'dark',
+        background: '#0a0a0a',
+        foreground: '#ededed',
+        cursor: '#ffffff',
+        cursorAccent: '#0a0a0a',
+        selectionBackground: '#444444',
+        selectionForeground: '#ffffff',
+        black: '#0a0a0a',
+        red: '#ff6369',
+        green: '#52c41a',
+        yellow: '#faad14',
+        blue: '#1890ff',
+        magenta: '#eb2f96',
+        cyan: '#13c2c2',
+        white: '#ededed',
+        brightBlack: '#666666',
+        brightRed: '#ff8a8a',
+        brightGreen: '#73d13d',
+        brightYellow: '#ffc53d',
+        brightBlue: '#40a9ff',
+        brightMagenta: '#f759ab',
+        brightCyan: '#36cfc9',
+        brightWhite: '#ffffff'
+    },
+    // 亮色主题
+    light: {
+        name: 'light',
+        background: '#ffffff',
+        foreground: '#1a1a1a',
+        cursor: '#1a1a1a',
+        cursorAccent: '#ffffff',
+        selectionBackground: '#b4d7ff',
+        selectionForeground: '#1a1a1a',
+        black: '#1a1a1a',
+        red: '#c41a16',
+        green: '#007400',
+        yellow: '#aa5500',
+        blue: '#0451a5',
+        magenta: '#bc05bc',
+        cyan: '#0598bc',
+        white: '#e0e0e0',
+        brightBlack: '#666666',
+        brightRed: '#ff6b6b',
+        brightGreen: '#5cb85c',
+        brightYellow: '#f0ad4e',
+        brightBlue: '#5bc0de',
+        brightMagenta: '#d63384',
+        brightCyan: '#17a2b8',
+        brightWhite: '#ffffff'
+    },
+    // 高对比度主题
+    highContrast: {
+        name: 'highContrast',
+        background: '#000000',
+        foreground: '#ffffff',
+        cursor: '#00ff00',
+        cursorAccent: '#000000',
+        selectionBackground: '#ffff00',
+        selectionForeground: '#000000',
+        black: '#000000',
+        red: '#ff0000',
+        green: '#00ff00',
+        yellow: '#ffff00',
+        blue: '#0080ff',
+        magenta: '#ff00ff',
+        cyan: '#00ffff',
+        white: '#ffffff',
+        brightBlack: '#808080',
+        brightRed: '#ff8080',
+        brightGreen: '#80ff80',
+        brightYellow: '#ffff80',
+        brightBlue: '#80c0ff',
+        brightMagenta: '#ff80ff',
+        brightCyan: '#80ffff',
+        brightWhite: '#ffffff'
+    }
+} as const
+
+// localStorage 存储键
+const STORAGE_KEY = 'incudal_terminal_settings'
+
+// 默认设置
+const DEFAULT_SETTINGS = {
+    fontSize: 14,
+    theme: 'dark' as TerminalThemeType,
+    bellEnabled: false,           // 终端铃声（默认关闭）
+    autoCopyOnSelect: false,      // 选中自动复制（默认关闭）
+    linkPreview: true,            // 链接预览（默认开启）
+    touchEnabled: true,           // 触控优化（默认开启）
+    commandHistory: [] as string[], // 命令历史
+    commandHistoryLimit: 100,     // 历史命令数量限制
+}
+
+type TerminalSettings = typeof DEFAULT_SETTINGS
+
+/**
+ * 从 localStorage 读取设置
+ */
+function loadSettings(): TerminalSettings {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY)
+        if (stored) {
+            const parsed = JSON.parse(stored)
+            // 合并默认值，确保新增字段有默认值
+            return { ...DEFAULT_SETTINGS, ...parsed }
+        }
+    } catch (err) {
+        console.warn('[Terminal Store] Failed to load settings:', err)
+    }
+    return { ...DEFAULT_SETTINGS }
+}
+
+/**
+ * 保存设置到 localStorage
+ */
+function saveSettings(settings: TerminalSettings): void {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+    } catch (err) {
+        console.warn('[Terminal Store] Failed to save settings:', err)
+    }
+}
+
+export const useTerminalStore = defineStore('terminal', () => {
+    // 从 localStorage 加载初始设置
+    const initialSettings = loadSettings()
+    
+    // 响应式设置
+    const fontSize = ref(initialSettings.fontSize)
+    const theme = ref<TerminalThemeType>(initialSettings.theme)
+    const bellEnabled = ref(initialSettings.bellEnabled)
+    const autoCopyOnSelect = ref(initialSettings.autoCopyOnSelect)
+    const linkPreview = ref(initialSettings.linkPreview)
+    const touchEnabled = ref(initialSettings.touchEnabled)
+    const commandHistory = ref<string[]>(initialSettings.commandHistory)
+    const commandHistoryLimit = ref(initialSettings.commandHistoryLimit)
+    
+    // 计算属性：当前主题配置
+    const currentTheme = computed(() => TERMINAL_THEMES[theme.value])
+    
+    // 监听变化并自动保存
+    watch(
+        [fontSize, theme, bellEnabled, autoCopyOnSelect, linkPreview, touchEnabled, commandHistory, commandHistoryLimit],
+        () => {
+            saveSettings({
+                fontSize: fontSize.value,
+                theme: theme.value,
+                bellEnabled: bellEnabled.value,
+                autoCopyOnSelect: autoCopyOnSelect.value,
+                linkPreview: linkPreview.value,
+                touchEnabled: touchEnabled.value,
+                commandHistory: commandHistory.value,
+                commandHistoryLimit: commandHistoryLimit.value,
+            })
+        },
+        { deep: true }
+    )
+    
+    /**
+     * 设置字体大小
+     */
+    function setFontSize(size: number) {
+        fontSize.value = Math.max(8, Math.min(32, size))
+    }
+    
+    /**
+     * 增大字体
+     */
+    function increaseFontSize() {
+        setFontSize(fontSize.value + 2)
+    }
+    
+    /**
+     * 减小字体
+     */
+    function decreaseFontSize() {
+        setFontSize(fontSize.value - 2)
+    }
+    
+    /**
+     * 重置字体大小
+     */
+    function resetFontSize() {
+        setFontSize(DEFAULT_SETTINGS.fontSize)
+    }
+    
+    /**
+     * 设置主题
+     */
+    function setTheme(newTheme: TerminalThemeType) {
+        theme.value = newTheme
+    }
+    
+    /**
+     * 切换终端铃声
+     */
+    function toggleBell() {
+        bellEnabled.value = !bellEnabled.value
+    }
+    
+    /**
+     * 切换选中自动复制
+     */
+    function toggleAutoCopy() {
+        autoCopyOnSelect.value = !autoCopyOnSelect.value
+    }
+    
+    /**
+     * 切换触控优化
+     */
+    function toggleTouch() {
+        touchEnabled.value = !touchEnabled.value
+    }
+    
+    /**
+     * 添加命令到历史
+     */
+    function addToHistory(command: string) {
+        if (!command.trim()) return
+        
+        // 去除重复
+        const index = commandHistory.value.indexOf(command)
+        if (index !== -1) {
+            commandHistory.value.splice(index, 1)
+        }
+        
+        // 添加到开头
+        commandHistory.value.unshift(command)
+        
+        // 限制数量
+        if (commandHistory.value.length > commandHistoryLimit.value) {
+            commandHistory.value = commandHistory.value.slice(0, commandHistoryLimit.value)
+        }
+    }
+    
+    /**
+     * 清空命令历史
+     */
+    function clearHistory() {
+        commandHistory.value = []
+    }
+    
+    /**
+     * 播放终端铃声
+     */
+    function playBell() {
+        if (!bellEnabled.value) return
+        
+        try {
+            // 使用 Web Audio API 生成简短的铃声
+            const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
+            const oscillator = audioContext.createOscillator()
+            const gainNode = audioContext.createGain()
+            
+            oscillator.connect(gainNode)
+            gainNode.connect(audioContext.destination)
+            
+            oscillator.frequency.value = 800 // Hz
+            oscillator.type = 'sine'
+            
+            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime)
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1)
+            
+            oscillator.start(audioContext.currentTime)
+            oscillator.stop(audioContext.currentTime + 0.1)
+            
+            // 铃声结束后关闭 AudioContext 释放资源
+            oscillator.onended = () => {
+                audioContext.close().catch(() => {})
+            }
+        } catch {
+            // 音频 API 不可用，静默失败
+        }
+    }
+    
+    /**
+     * 重置所有设置
+     */
+    function resetAllSettings() {
+        fontSize.value = DEFAULT_SETTINGS.fontSize
+        theme.value = DEFAULT_SETTINGS.theme
+        bellEnabled.value = DEFAULT_SETTINGS.bellEnabled
+        autoCopyOnSelect.value = DEFAULT_SETTINGS.autoCopyOnSelect
+        linkPreview.value = DEFAULT_SETTINGS.linkPreview
+        touchEnabled.value = DEFAULT_SETTINGS.touchEnabled
+        // 保留命令历史
+    }
+    
+    return {
+        // 状态
+        fontSize,
+        theme,
+        bellEnabled,
+        autoCopyOnSelect,
+        linkPreview,
+        touchEnabled,
+        commandHistory,
+        commandHistoryLimit,
+        currentTheme,
+        
+        // 方法
+        setFontSize,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+        setTheme,
+        toggleBell,
+        toggleAutoCopy,
+        toggleTouch,
+        addToHistory,
+        clearHistory,
+        playBell,
+        resetAllSettings,
+    }
+})
diff --git a/client/src/stores/theme.ts b/client/src/stores/theme.ts
new file mode 100644
index 0000000..472d03d
--- /dev/null
+++ b/client/src/stores/theme.ts
@@ -0,0 +1,81 @@
+/**
+ * 主题管理 Store
+ * 支持浅色/深色/跟随系统模式
+ */
+import { defineStore } from 'pinia'
+import { ref, watch, computed, type Ref } from 'vue'
+
+type ThemeMode = 'light' | 'dark' | 'system'
+
+export const useThemeStore = defineStore('theme', () => {
+  // 主题模式: 'light' | 'dark' | 'system'
+  const mode: Ref<ThemeMode> = ref((localStorage.getItem('theme') as ThemeMode) || 'system')
+
+  // 实际应用的主题
+  const resolvedTheme = computed(() => {
+    if (mode.value === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+    return mode.value
+  })
+
+  // 是否为深色主题
+  const isDark = computed(() => resolvedTheme.value === 'dark')
+
+  // 将主题应用到 DOM
+  function applyTheme() {
+    const theme = resolvedTheme.value
+    document.documentElement.classList.remove('light', 'dark')
+    document.documentElement.classList.add(theme)
+
+    // 更新 meta 主题色
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]')
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute('content', theme === 'dark' ? '#0a0a0a' : '#ffffff')
+    }
+  }
+
+  // 设置主题模式
+  function setTheme(newMode: ThemeMode) {
+    mode.value = newMode
+    localStorage.setItem('theme', newMode)
+    applyTheme()
+  }
+
+  // 切换主题 (dark -> light -> system -> dark)
+  function toggleTheme() {
+    const modes: ThemeMode[] = ['dark', 'light', 'system']
+    const currentIndex = modes.indexOf(mode.value)
+    const nextIndex = (currentIndex + 1) % modes.length
+    setTheme(modes[nextIndex])
+  }
+
+  // 监听系统主题变化
+  function setupSystemThemeListener() {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    mediaQuery.addEventListener('change', () => {
+      if (mode.value === 'system') {
+        applyTheme()
+      }
+    })
+  }
+
+  // 初始化
+  function init() {
+    applyTheme()
+    setupSystemThemeListener()
+  }
+
+  // 监听模式变化
+  watch(mode, applyTheme)
+
+  return {
+    mode,
+    resolvedTheme,
+    isDark,
+    setTheme,
+    toggleTheme,
+    init
+  }
+})
+
diff --git a/client/src/stores/toast.ts b/client/src/stores/toast.ts
new file mode 100644
index 0000000..a86c0b2
--- /dev/null
+++ b/client/src/stores/toast.ts
@@ -0,0 +1,59 @@
+import { ref, type Ref } from 'vue'
+import type { Toast } from '@/types/store.js'
+
+const toasts: Ref<Toast[]> = ref([])
+let nextId = 0
+
+type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export function useToast() {
+  function show(message: string, type: ToastType = 'info', duration: number = 3000): number {
+    const id = nextId++
+    toasts.value.push({ id, message, type, duration, visible: true })
+    
+    if (duration > 0) {
+      setTimeout(() => {
+        remove(id)
+      }, duration)
+    }
+    
+    return id
+  }
+
+  function remove(id: number) {
+    const index = toasts.value.findIndex(t => t.id === id)
+    if (index > -1) {
+      toasts.value[index].visible = false
+      setTimeout(() => {
+        toasts.value = toasts.value.filter(t => t.id !== id)
+      }, 200)
+    }
+  }
+
+  function success(message: string, duration?: number): number {
+    return show(message, 'success', duration)
+  }
+
+  function error(message: string, duration?: number): number {
+    return show(message, 'error', duration)
+  }
+
+  function warning(message: string, duration?: number): number {
+    return show(message, 'warning', duration)
+  }
+
+  function info(message: string, duration?: number): number {
+    return show(message, 'info', duration)
+  }
+
+  return {
+    toasts,
+    show,
+    remove,
+    success,
+    error,
+    warning,
+    info
+  }
+}
+
diff --git a/client/src/styles/main.css b/client/src/styles/main.css
new file mode 100644
index 0000000..ab944d7
--- /dev/null
+++ b/client/src/styles/main.css
@@ -0,0 +1,1433 @@
+/* Geist 字体 - 必须在 @tailwind 之前 */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+
+  /* 暗色主题变量 (默认) */
+  :root {
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #171717;
+    --bg-tertiary: #262626;
+    --bg-elevated: #0a0a0a;
+    --border-color: #262626;
+    --border-hover: #404040;
+    --text-primary: #ededed;
+    --text-secondary: #a1a1a1;
+    --text-tertiary: #737373;
+    --accent: #3b82f6;
+    --success: #22c55e;
+    --warning: #eab308;
+    --error: #ef4444;
+  }
+
+  /* 亮色主题变量 */
+  .light {
+    --bg-primary: #ffffff;
+    --bg-secondary: #fafafa;
+    --bg-tertiary: #f4f4f5;
+    --bg-elevated: #ffffff;
+    --border-color: #e4e4e7;
+    --border-hover: #d4d4d8;
+    --text-primary: #18181b;
+    --text-secondary: #52525b;
+    --text-tertiary: #a1a1aa;
+    --accent: #2563eb;
+    --success: #16a34a;
+    --warning: #ca8a04;
+    --error: #dc2626;
+  }
+
+  html {
+    @apply scroll-smooth antialiased;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+
+  body {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    transition: background-color 0.2s ease, color 0.2s ease;
+  }
+
+  /* 极简滚动条 */
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    @apply bg-gray-700 rounded-full;
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-600;
+  }
+
+  .light ::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 rounded-full;
+  }
+
+  .light ::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400;
+  }
+
+  /* 选择文本 */
+  ::selection {
+    background-color: rgba(59, 130, 246, 0.3);
+  }
+}
+
+@layer components {
+
+  /* ============ 按钮 - Vercel 风格 ============ */
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none;
+  }
+
+  /* 主按钮 */
+  .btn-primary {
+    @apply btn;
+  }
+
+  .dark .btn-primary {
+    @apply bg-white text-gray-900 hover:bg-gray-100 shadow-sm;
+    --tw-ring-offset-color: #0a0a0a;
+  }
+
+  .light .btn-primary {
+    @apply bg-gray-900 text-white hover:bg-gray-700 shadow-sm;
+    --tw-ring-offset-color: #ffffff;
+  }
+
+  /* 次要按钮 */
+  .btn-secondary {
+    @apply btn;
+  }
+
+  .dark .btn-secondary {
+    @apply bg-transparent text-gray-100 border border-gray-800 hover:border-gray-700 hover:bg-gray-900;
+  }
+
+  .light .btn-secondary {
+    @apply bg-transparent text-gray-900 border border-gray-300 hover:border-gray-400 hover:bg-gray-100;
+  }
+
+  /* 幽灵按钮 */
+  .btn-ghost {
+    @apply btn;
+  }
+
+  .dark .btn-ghost {
+    @apply bg-transparent text-gray-400 hover:text-gray-100 hover:bg-gray-800;
+  }
+
+  .light .btn-ghost {
+    @apply bg-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-100;
+  }
+
+  /* 危险按钮 */
+  .btn-danger {
+    @apply btn bg-red-500/10 text-red-500 border border-red-500/20 hover:bg-red-500/20;
+  }
+
+  /* 警告按钮 */
+  .btn-warning {
+    @apply btn bg-amber-500/10 text-amber-500 border border-amber-500/20 hover:bg-amber-500/20;
+  }
+
+  .btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+
+  .btn-lg {
+    @apply px-5 py-2.5 text-base;
+  }
+
+  /* ============ 输入框 ============ */
+  .input {
+    @apply w-full px-3 py-2 text-sm bg-transparent rounded transition-colors duration-150;
+  }
+
+  .dark .input {
+    @apply border border-gray-800 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-gray-600 focus:ring-1 focus:ring-gray-600;
+  }
+
+  .light .input {
+    @apply bg-white border border-gray-300 text-gray-900 placeholder-gray-400 focus:outline-none focus:border-gray-400 focus:ring-1 focus:ring-gray-400;
+  }
+
+  /* 下拉选择框 */
+  select.input {
+    @apply cursor-pointer appearance-none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1.25rem;
+    padding-right: 2.5rem;
+  }
+
+  .dark select.input {
+    @apply bg-gray-950;
+  }
+
+  .light select.input {
+    @apply bg-white;
+  }
+
+  .dark select.input option {
+    @apply bg-gray-900 text-gray-100 py-2;
+  }
+
+  .light select.input option {
+    @apply bg-white text-gray-900 py-2;
+  }
+
+  .input-error {
+    @apply border-red-500/50 focus:border-red-500 focus:ring-red-500/50;
+  }
+
+  /* ============ 卡片 - 极简边框 ============ */
+  .card {
+    @apply rounded-lg;
+  }
+
+  .dark .card {
+    @apply bg-gray-950 border border-gray-800;
+  }
+
+  .light .card {
+    @apply bg-white border border-gray-200 shadow-sm;
+  }
+
+  .card-hover {
+    @apply rounded-lg transition-all duration-150;
+  }
+
+  .dark .card-hover {
+    @apply bg-gray-950 border border-gray-800 hover:border-gray-700;
+  }
+
+  .light .card-hover {
+    @apply bg-white border border-gray-200 hover:border-gray-300 hover:shadow;
+  }
+
+  /* 统计卡片 - 移动端优化 */
+  .stat-card {
+    @apply p-3 sm:p-4 flex items-center gap-3 sm:gap-4;
+  }
+
+  .stat-card-icon {
+    @apply w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center flex-shrink-0;
+  }
+
+  .stat-card-value {
+    @apply text-xl sm:text-2xl font-semibold;
+  }
+
+  .stat-card-label {
+    @apply text-xs sm:text-sm truncate;
+  }
+
+  .dark .stat-card-label {
+    @apply text-gray-500;
+  }
+
+  .light .stat-card-label {
+    @apply text-gray-500;
+  }
+
+  /* ============ 徽章 ============ */
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full;
+  }
+
+  .badge-success {
+    @apply text-green-500;
+  }
+
+  .dark .badge-success {
+    @apply bg-green-500/10;
+  }
+
+  .light .badge-success {
+    @apply bg-green-100 text-green-700;
+  }
+
+  .badge-warning {
+    @apply text-yellow-500;
+  }
+
+  .dark .badge-warning {
+    @apply bg-yellow-500/10;
+  }
+
+  .light .badge-warning {
+    @apply bg-yellow-100 text-yellow-700;
+  }
+
+  .badge-error {
+    @apply text-red-500;
+  }
+
+  .dark .badge-error {
+    @apply bg-red-500/10;
+  }
+
+  .light .badge-error {
+    @apply bg-red-100 text-red-700;
+  }
+
+  .badge-default {
+    /* base styles */
+  }
+
+  .dark .badge-default {
+    @apply bg-gray-800 text-gray-400;
+  }
+
+  .light .badge-default {
+    @apply bg-gray-100 text-gray-600;
+  }
+
+  /* ============ 表格 ============ */
+  .table {
+    @apply w-full text-sm;
+  }
+
+  .table th {
+    @apply text-left py-3 px-4 text-xs font-medium text-gray-500 uppercase tracking-wider;
+  }
+
+  .dark .table th {
+    @apply border-b border-gray-800;
+  }
+
+  .light .table th {
+    @apply border-b border-gray-200;
+  }
+
+  .table td {
+    @apply py-3 px-4;
+  }
+
+  .dark .table td {
+    @apply border-b border-gray-900;
+  }
+
+  .light .table td {
+    @apply border-b border-gray-100;
+  }
+
+  .dark .table tr:hover td {
+    @apply bg-gray-900/50;
+  }
+
+  .light .table tr:hover td {
+    @apply bg-gray-50;
+  }
+
+  /* ============ 分隔线 ============ */
+  .divider {
+    @apply border-t;
+  }
+
+  .dark .divider {
+    @apply border-gray-800;
+  }
+
+  .light .divider {
+    @apply border-gray-200;
+  }
+
+  /* ============ 页面标题 ============ */
+  .page-header {
+    @apply flex items-start sm:items-center justify-between pb-4 sm:pb-6 mb-4 sm:mb-6 border-b;
+  }
+
+  .dark .page-header {
+    @apply border-gray-800;
+  }
+
+  .light .page-header {
+    @apply border-gray-200;
+  }
+
+  .page-title {
+    @apply text-lg sm:text-xl font-semibold;
+  }
+
+  .dark .page-title {
+    @apply text-gray-100;
+  }
+
+  .light .page-title {
+    @apply text-gray-900;
+  }
+
+  .page-description {
+    @apply text-xs sm:text-sm mt-1;
+  }
+
+  .dark .page-description {
+    @apply text-gray-500;
+  }
+
+  .light .page-description {
+    @apply text-gray-600;
+  }
+
+  /* ============ 空状态 ============ */
+  .empty-state {
+    @apply flex flex-col items-center justify-center py-12 text-center;
+  }
+
+  .empty-state-icon {
+    @apply w-12 h-12 mb-4;
+  }
+
+  .dark .empty-state-icon {
+    @apply text-gray-700;
+  }
+
+  .light .empty-state-icon {
+    @apply text-gray-400;
+  }
+
+  .empty-state-text {
+    @apply text-sm;
+  }
+
+  .dark .empty-state-text {
+    @apply text-gray-500;
+  }
+
+  .light .empty-state-text {
+    @apply text-gray-600;
+  }
+}
+
+/* ============ 动画 ============ */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.25s ease-out;
+}
+
+.animate-slide-down {
+  animation: slide-down 0.25s ease-out;
+}
+
+.animate-scale-in {
+  animation: scale-in 0.2s ease-out;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* 加载动画 Spinner */
+.loading-spinner {
+  @apply animate-spin;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+}
+
+/* ============ 页面过渡动画 ============ */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+/* 快速淡入淡出动画（用于页面切换） */
+.fade-enter-active {
+  transition: opacity 0.08s ease-out;
+}
+
+.fade-leave-active {
+  transition: opacity 0.05s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 底部滑入动画（用于悬浮按钮） */
+.slide-up-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-up-leave-active {
+  transition: all 0.2s ease-in;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+/* ============ 模态框过渡动画 ============ */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-active .modal-content,
+.modal-leave-active .modal-content {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-content,
+.modal-leave-to .modal-content {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+/* ============ 列表项过渡动画 ============ */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.25s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateX(-15px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(15px);
+}
+
+.list-move {
+  transition: transform 0.25s ease;
+}
+
+/* 淡入淡出列表动画 */
+.fade-list-enter-active,
+.fade-list-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-list-enter-from,
+.fade-list-leave-to {
+  opacity: 0;
+}
+
+.fade-list-move {
+  transition: transform 0.2s ease;
+}
+
+/* ============ Tab 切换动画 ============ */
+.tab-enter-active,
+.tab-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.tab-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.tab-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* ============ 弹窗样式 ============ */
+.modal-overlay {
+  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+}
+
+.modal-backdrop {
+  @apply absolute inset-0 backdrop-blur-sm;
+}
+
+.dark .modal-backdrop {
+  @apply bg-black/60;
+}
+
+.light .modal-backdrop {
+  @apply bg-black/30;
+}
+
+.modal-content {
+  @apply relative w-full max-w-md mx-4 sm:mx-auto rounded-xl shadow-2xl animate-scale-in max-h-[90vh] overflow-y-auto;
+}
+
+.dark .modal-content {
+  @apply bg-gray-900 border border-gray-800;
+}
+
+.light .modal-content {
+  @apply bg-white border border-gray-200;
+}
+
+.modal-header {
+  @apply flex items-center justify-between p-4 sm:p-5 border-b;
+}
+
+.dark .modal-header {
+  @apply border-gray-800;
+}
+
+.light .modal-header {
+  @apply border-gray-200;
+}
+
+.modal-title {
+  @apply text-sm sm:text-base font-medium;
+}
+
+.dark .modal-title {
+  @apply text-gray-100;
+}
+
+.light .modal-title {
+  @apply text-gray-900;
+}
+
+.modal-body {
+  @apply p-4 sm:p-5 space-y-4;
+}
+
+.modal-footer {
+  @apply flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 p-4 sm:p-5 border-t;
+}
+
+.modal-footer .btn-primary,
+.modal-footer .btn-secondary,
+.modal-footer .btn-danger {
+  @apply w-full sm:w-auto;
+}
+
+.dark .modal-footer {
+  @apply border-gray-800;
+}
+
+.light .modal-footer {
+  @apply border-gray-200;
+}
+
+/* ============ Toast 通知 ============ */
+.toast-container {
+  @apply fixed bottom-4 sm:bottom-5 left-4 right-4 sm:left-auto sm:right-5 flex flex-col gap-2;
+  z-index: 9999;
+  /* 确保通知显示在所有弹窗之上 */
+}
+
+.toast {
+  @apply flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg shadow-lg animate-slide-up text-xs sm:text-sm;
+}
+
+.dark .toast {
+  @apply bg-gray-900 border border-gray-800 text-gray-100;
+}
+
+.light .toast {
+  @apply bg-white border border-gray-200 text-gray-900;
+}
+
+.toast-success {
+  @apply border-green-500/30;
+}
+
+.dark .toast-success {
+  @apply bg-green-950/50;
+}
+
+.light .toast-success {
+  @apply bg-green-50;
+}
+
+.toast-error {
+  @apply border-red-500/30;
+}
+
+.dark .toast-error {
+  @apply bg-red-950/50;
+}
+
+.light .toast-error {
+  @apply bg-red-50;
+}
+
+.toast-warning {
+  @apply border-yellow-500/30;
+}
+
+.dark .toast-warning {
+  @apply bg-yellow-950/50;
+}
+
+.light .toast-warning {
+  @apply bg-yellow-50;
+}
+
+.toast-info {
+  @apply border-blue-500/30;
+}
+
+.dark .toast-info {
+  @apply bg-blue-950/50;
+}
+
+.light .toast-info {
+  @apply bg-blue-50;
+}
+
+/* ============ 工具提示 ============ */
+[data-tooltip] {
+  @apply relative;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs rounded whitespace-nowrap opacity-0 pointer-events-none transition-opacity duration-150;
+}
+
+.dark [data-tooltip]::after {
+  @apply text-gray-300 bg-gray-800;
+}
+
+.light [data-tooltip]::after {
+  @apply text-gray-700 bg-gray-100 border border-gray-200;
+}
+
+[data-tooltip]:hover::after {
+  @apply opacity-100;
+}
+
+/* ============ 进度条动画 ============ */
+.progress-bar {
+  @apply h-1.5 rounded-full overflow-hidden;
+}
+
+.dark .progress-bar {
+  @apply bg-gray-800;
+}
+
+.light .progress-bar {
+  @apply bg-gray-200;
+}
+
+.progress-bar-fill {
+  @apply h-full rounded-full transition-all duration-500 ease-out;
+}
+
+/* ============ 输入框聚焦效果 ============ */
+.dark .input:focus {
+  box-shadow: 0 0 0 1px rgba(82, 82, 91, 0.3);
+}
+
+.light .input:focus {
+  box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.3);
+}
+
+/* ============ 按钮点击效果 ============ */
+.btn:active {
+  transform: scale(0.98);
+}
+
+/* ============ 链接悬停效果 ============ */
+.link {
+  @apply transition-colors duration-150;
+}
+
+.dark .link {
+  @apply text-gray-400 hover:text-gray-200;
+}
+
+.light .link {
+  @apply text-gray-600 hover:text-gray-900;
+}
+
+.link-primary {
+  @apply text-blue-500 hover:text-blue-400;
+}
+
+/* ============ 状态指示点动画 ============ */
+.status-dot {
+  @apply w-2 h-2 rounded-full;
+}
+
+.status-dot.online {
+  @apply bg-green-500;
+  animation: pulse-green 2s infinite;
+}
+
+.status-dot.offline {
+  @apply bg-gray-500;
+}
+
+.status-dot.warning {
+  @apply bg-yellow-500;
+  animation: pulse-yellow 1.5s infinite;
+}
+
+@keyframes pulse-green {
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0);
+  }
+}
+
+@keyframes pulse-yellow {
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0);
+  }
+}
+
+/* ============ 卡片悬停效果增强 ============ */
+.card-interactive {
+  @apply rounded-lg cursor-pointer transition-all duration-200;
+}
+
+.dark .card-interactive {
+  @apply bg-gray-950 border border-gray-800 hover:border-gray-700 hover:bg-gray-900/50;
+}
+
+.light .card-interactive {
+  @apply bg-white border border-gray-200 hover:border-gray-300 hover:bg-gray-50;
+}
+
+.card-interactive:hover {
+  transform: translateY(-1px);
+}
+
+.light .card-interactive:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+
+/* ============ 数字徽章动画 ============ */
+.count-badge {
+  @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-medium rounded-full;
+}
+
+.dark .count-badge {
+  @apply bg-gray-800 text-gray-400;
+}
+
+.light .count-badge {
+  @apply bg-gray-100 text-gray-600;
+}
+
+.count-badge.has-count {
+  animation: pop 0.2s ease-out;
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* ============ 侧边栏主题适配 ============ */
+.sidebar {
+  @apply border-r;
+}
+
+.dark .sidebar {
+  @apply bg-gray-950 border-gray-800;
+}
+
+.light .sidebar {
+  @apply bg-white border-gray-200;
+}
+
+.sidebar-link {
+  @apply transition-colors;
+}
+
+.dark .sidebar-link {
+  @apply text-gray-400 hover:text-gray-100 hover:bg-gray-800/50;
+}
+
+.light .sidebar-link {
+  @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100;
+}
+
+.sidebar-link.active {
+  /* base active */
+}
+
+.dark .sidebar-link.active {
+  @apply text-white bg-gray-800;
+}
+
+.light .sidebar-link.active {
+  @apply text-gray-900 bg-gray-100;
+}
+
+/* ============ 主题切换按钮 ============ */
+.theme-toggle {
+  @apply p-2 rounded-lg transition-colors duration-200;
+}
+
+.dark .theme-toggle {
+  @apply text-gray-400 hover:text-gray-100 hover:bg-gray-800;
+}
+
+.light .theme-toggle {
+  @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100;
+}
+
+/* ============ 通用文本颜色 ============ */
+.text-error {
+  @apply text-red-500;
+}
+
+.text-success {
+  @apply text-green-500;
+}
+
+.text-warning {
+  @apply text-yellow-500;
+}
+
+/* ============ 主题感知的文本颜色 ============ */
+.text-themed {
+  /* Default text - adapts to theme */
+}
+
+.dark .text-themed {
+  @apply text-gray-100;
+}
+
+.light .text-themed {
+  @apply text-gray-900;
+}
+
+.dark .text-themed-secondary {
+  @apply text-gray-400;
+}
+
+.light .text-themed-secondary {
+  @apply text-gray-600;
+}
+
+.dark .text-themed-muted {
+  @apply text-gray-500;
+}
+
+.light .text-themed-muted {
+  @apply text-gray-500;
+}
+
+.dark .text-themed-faint {
+  @apply text-gray-600;
+}
+
+.light .text-themed-faint {
+  @apply text-gray-400;
+}
+
+/* ============ 主题感知的背景颜色 ============ */
+.dark .bg-themed {
+  @apply bg-gray-900;
+}
+
+.light .bg-themed {
+  @apply bg-white;
+}
+
+.dark .bg-themed-secondary {
+  @apply bg-gray-800;
+}
+
+.light .bg-themed-secondary {
+  @apply bg-gray-100;
+}
+
+.dark .bg-themed-tertiary {
+  @apply bg-gray-800/50;
+}
+
+.light .bg-themed-tertiary {
+  @apply bg-gray-50;
+}
+
+.dark .bg-themed-hover {
+  @apply bg-gray-800;
+}
+
+.light .bg-themed-hover {
+  @apply bg-gray-100;
+}
+
+.dark .bg-themed-accent {
+  @apply bg-gray-800;
+}
+
+.light .bg-themed-accent {
+  @apply bg-gray-100;
+}
+
+/* ============ 主题感知的边框 ============ */
+.dark .border-themed {
+  @apply border-gray-800;
+}
+
+.light .border-themed {
+  @apply border-gray-200;
+}
+
+.dark .border-themed-secondary {
+  @apply border-gray-700;
+}
+
+.light .border-themed-secondary {
+  @apply border-gray-300;
+}
+
+.dark .divide-themed> :not([hidden])~ :not([hidden]) {
+  @apply border-gray-800;
+}
+
+.light .divide-themed> :not([hidden])~ :not([hidden]) {
+  @apply border-gray-200;
+}
+
+/* ============ 主题感知的图标颜色 ============ */
+.dark .icon-themed {
+  @apply text-gray-400;
+}
+
+.light .icon-themed {
+  @apply text-gray-500;
+}
+
+.dark .icon-themed-muted {
+  @apply text-gray-600;
+}
+
+.light .icon-themed-muted {
+  @apply text-gray-400;
+}
+
+/* ============ 表格主题适配 ============ */
+.table-themed {
+  @apply w-full;
+}
+
+.dark .table-themed thead {
+  @apply bg-gray-900/50 border-b border-gray-800;
+}
+
+.light .table-themed thead {
+  @apply bg-gray-50 border-b border-gray-200;
+}
+
+.dark .table-themed tbody {
+  @apply divide-y divide-gray-800;
+}
+
+.light .table-themed tbody {
+  @apply divide-y divide-gray-100;
+}
+
+.dark .table-themed tbody tr:hover {
+  @apply bg-gray-900/30;
+}
+
+.light .table-themed tbody tr:hover {
+  @apply bg-gray-50;
+}
+
+/* ============ 代码块主题适配 ============ */
+.dark .code-block {
+  @apply bg-gray-800 text-gray-300;
+}
+
+.light .code-block {
+  @apply bg-gray-100 text-gray-700;
+}
+
+/* ============ 滑块/进度条主题适配 ============ */
+.dark .slider-track {
+  @apply bg-gray-800;
+}
+
+.light .slider-track {
+  @apply bg-gray-200;
+}
+
+/* ============ 成功/警告/信息卡片主题 ============ */
+.dark .info-card-blue {
+  @apply bg-blue-900/30;
+}
+
+.light .info-card-blue {
+  @apply bg-blue-100;
+}
+
+.dark .info-card-green {
+  @apply bg-green-900/30;
+}
+
+.light .info-card-green {
+  @apply bg-green-100;
+}
+
+.dark .info-card-yellow {
+  @apply bg-yellow-900/30;
+}
+
+.light .info-card-yellow {
+  @apply bg-yellow-100;
+}
+
+.dark .info-card-purple {
+  @apply bg-purple-900/30;
+}
+
+.light .info-card-purple {
+  @apply bg-purple-100;
+}
+
+.dark .info-card-gray {
+  @apply bg-gray-800;
+}
+
+.light .info-card-gray {
+  @apply bg-gray-100;
+}
+
+/* ============ 弹窗/下拉菜单主题 ============ */
+.dropdown-menu {
+  @apply rounded-lg shadow-lg overflow-hidden;
+}
+
+.dark .dropdown-menu {
+  @apply bg-gray-900 border border-gray-800;
+}
+
+.light .dropdown-menu {
+  @apply bg-white border border-gray-200;
+}
+
+.dropdown-item {
+  @apply px-3 py-2 text-sm cursor-pointer transition-colors;
+}
+
+.dark .dropdown-item {
+  @apply text-gray-300 hover:bg-gray-800;
+}
+
+.light .dropdown-item {
+  @apply text-gray-700 hover:bg-gray-100;
+}
+
+.dropdown-item.active {
+  @apply font-medium;
+}
+
+.dark .dropdown-item.active {
+  @apply bg-gray-800 text-white;
+}
+
+.light .dropdown-item.active {
+  @apply bg-gray-100 text-gray-900;
+}
+
+/* ============ 骨架屏主题 ============ */
+.dark .skeleton-bg {
+  @apply bg-gray-800;
+}
+
+.light .skeleton-bg {
+  @apply bg-gray-200;
+}
+
+.dark .skeleton-bg-soft {
+  @apply bg-gray-800/50;
+}
+
+.light .skeleton-bg-soft {
+  background-color: #f4f4f5;
+}
+
+/* ============ 创建中状态呼吸灯效果 ============ */
+/* 桌面端表格行 - 左侧扫描线效果（应用在第一个 td 上） */
+@keyframes creating-scan {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    top: calc(100% - 16px);
+    opacity: 0;
+  }
+}
+
+.creating-row > td:first-child {
+  position: relative;
+}
+
+.creating-row > td:first-child::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 16px;
+  background: linear-gradient(180deg, 
+    transparent 0%, 
+    #3b82f6 20%, 
+    #60a5fa 50%, 
+    #3b82f6 80%, 
+    transparent 100%
+  );
+  border-radius: 1px;
+  animation: creating-scan 1.8s ease-in-out infinite;
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6), 0 0 16px rgba(59, 130, 246, 0.3);
+}
+
+/* 移动端卡片 - 边框流光效果 */
+@keyframes creating-border-flow {
+  0% {
+    background-position: 0% 0%;
+  }
+  50% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+}
+
+.creating-card {
+  position: relative;
+  overflow: visible !important;
+}
+
+.creating-card::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 30%,
+    #3b82f6 45%,
+    #60a5fa 50%,
+    #3b82f6 55%,
+    transparent 70%,
+    transparent 100%
+  );
+  background-size: 300% 100%;
+  animation: creating-border-flow 2.5s ease-in-out infinite;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.dark .creating-card::before {
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
+}
+
+.light .creating-card::before {
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
+}
+
+/* Vercel Style Slider */
+.vercel-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+}
+
+.dark .vercel-slider {
+  background: linear-gradient(to right, #3b82f6 var(--slider-progress, 50%), #374151 var(--slider-progress, 50%));
+}
+
+.light .vercel-slider {
+  background: linear-gradient(to right, #3b82f6 var(--slider-progress, 50%), #e5e7eb var(--slider-progress, 50%));
+}
+
+.vercel-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid #3b82f6;
+  cursor: grab;
+  transition: all 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.vercel-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+.vercel-slider::-webkit-slider-thumb:active {
+  cursor: grabbing;
+  transform: scale(1.05);
+  background: #3b82f6;
+  border-color: #3b82f6;
+}
+
+.vercel-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid #3b82f6;
+  cursor: grab;
+  transition: all 0.15s ease;
+}
+
+.vercel-slider::-moz-range-track {
+  height: 6px;
+  border-radius: 3px;
+}
+
+.dark .vercel-slider::-moz-range-track {
+  background: #374151;
+}
+
+.light .vercel-slider::-moz-range-track {
+  background: #e5e7eb;
+}
+
+.dark .vercel-slider::-moz-range-progress {
+  background: #3b82f6;
+  border-radius: 3px;
+}
+
+.light .vercel-slider::-moz-range-progress {
+  background: #3b82f6;
+  border-radius: 3px;
+}
+
+/* 隐藏滚动条工具类 */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
\ No newline at end of file
diff --git a/client/src/types/api.ts b/client/src/types/api.ts
new file mode 100644
index 0000000..71b88e8
--- /dev/null
+++ b/client/src/types/api.ts
@@ -0,0 +1,1729 @@
+/**
+ * API 请求/响应类型定义
+ */
+
+export interface VipBadgeStyle {
+  backgroundColor: string
+  textColor: string
+}
+
+// ==================== 认证相关 ====================
+
+export interface LoginRequest {
+  username: string
+  password: string
+  turnstileToken?: string
+}
+
+export interface LoginResponse {
+  token: string
+  user: {
+    id: number
+    username: string
+    email: string
+    role: 'admin' | 'user'
+    avatarStyle?: string
+    avatarBadgeId?: string | null
+    hasCreatedHostBefore?: boolean
+    canAccessHostingFeature?: boolean
+  }
+}
+
+export interface RegisterRequest {
+  username: string
+  email: string
+  password: string
+  inviteCode?: string
+  turnstileToken?: string
+  emailCode?: string
+}
+
+export interface RegisterResponse {
+  token: string
+  user: {
+    id: number
+    username: string
+    email: string
+    role: 'admin' | 'user'
+    avatarStyle?: string
+    avatarBadgeId?: string | null
+    hasCreatedHostBefore?: boolean
+    canAccessHostingFeature?: boolean
+  }
+}
+
+export interface UpdateUserResponse {
+  message: string
+  reauthRequired?: boolean
+}
+
+export interface GenerateInviteRequest {
+  expiresAt?: string
+  count?: number
+}
+
+export interface InviteCode {
+  id: number
+  code: string
+  created_by: number
+  createdByUsername?: string | null
+  createdByEmail?: string | null
+  createdByAvatarStyle?: string | null
+  createdByAvatarBadgeId?: string | null
+  used_by: number | null
+  usedBy?: number | null
+  usedByUsername?: string | null
+  usedByEmail?: string | null
+  usedByAvatarStyle?: string | null
+  usedByAvatarBadgeId?: string | null
+  used_at: string | null
+  usedAt?: string | null
+  expires_at: string | null
+  expiresAt?: string | null
+  costSnapshot?: InviteGenerationCostSnapshot | null
+  cost_snapshot?: InviteGenerationCostSnapshot | null
+  created_at: string
+  createdAt?: string
+}
+
+export interface InviteListResponse {
+  invites: InviteCode[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+export interface InviteCostOption {
+  resource: string
+  amount: number
+  enabled: boolean
+  label: string
+  unit: string
+  displayAmount: string
+}
+
+export interface InviteGenerationCostSnapshot {
+  resource: string
+  amount: number
+  label: string
+  unit: string
+  displayAmount: string
+  chargedAt: string
+}
+
+export interface UserInvite {
+  id: number
+  code: string
+  createdBy: number
+  usedBy: number | null
+  usedAt: string | null
+  expiresAt: string | null
+  createdAt: string
+  costSnapshot: InviteGenerationCostSnapshot | null
+  registerUrl: string
+  usedByUser: {
+    id: number
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId: string | null
+    createdAt: string
+  } | null
+}
+
+export interface UserInviteSummary {
+  costOptions: InviteCostOption[]
+  balances: {
+    balance: number
+    points: number
+  }
+  stats: {
+    total: number
+    used: number
+    unused: number
+    usageRate: number
+  }
+}
+
+// ==================== 用户相关 ====================
+
+export interface User {
+  id: number
+  username: string
+  email: string | null
+  role: 'admin' | 'user'
+  status: 'active' | 'banned'
+  avatarStyle?: string
+  avatarBadgeId?: string | null
+  hasCreatedHostBefore?: boolean
+  canAccessHostingFeature?: boolean
+  twoFAEnabled?: boolean
+  instanceCount?: number
+  hasGithubBinding?: boolean
+  balance?: number
+  quota?: UserQuota
+  created_at: string
+  updated_at: string
+  createdAt?: string
+}
+
+export interface UserQuota {
+  id?: number
+  userId?: number
+  // 新配额系统：控制用户可拥有的资源数量
+  // 配额为 0 表示功能未授权，需要管理员开启
+  // 注意：不再限制实例配额，用户可以创建无限数量的实例
+  hostLimit: number
+  hostUsed: number
+  friendLimit: number
+  friendUsed: number
+  packageLimit: number
+  packageUsed: number
+}
+
+export interface UpdateUserRequest {
+  email?: string
+  role?: 'admin' | 'user'
+  status?: 'active' | 'banned'
+  avatarStyle?: string
+  password?: string
+  currentPassword?: string  // 修改密码时需要提供当前密码
+  emailCode?: string
+}
+
+export interface TelegramBindingStatus {
+  enabled: boolean
+  configured: boolean
+  botUsername: string | null
+  binding: {
+    telegramUserId: string
+    telegramUsername: string | null
+    firstName: string | null
+    lastName: string | null
+    boundAt: string
+  } | null
+}
+
+export interface TelegramBindTokenResponse {
+  bindUrl: string
+  expiresAt: string
+}
+
+export interface TelegramWebhookInfo {
+  url: string
+  has_custom_certificate?: boolean
+  pending_update_count?: number
+  last_error_date?: number
+  last_error_message?: string
+  max_connections?: number
+  allowed_updates?: string[]
+}
+
+export interface TelegramWebhookInfoResponse {
+  info: TelegramWebhookInfo
+}
+
+export interface TelegramWebhookSetupResponse {
+  message: string
+  webhookUrl: string
+  commandsSynced?: boolean
+  commands?: Array<{
+    command: string
+    description: string
+  }>
+  result?: boolean
+}
+
+export interface TelegramWebhookDeleteResponse {
+  message: string
+  result?: boolean
+}
+
+export interface TelegramGroupEligibility {
+  eligible: boolean
+  status: 'eligible' | 'ineligible' | 'disabled' | 'unconfigured'
+  message: string
+  joinMode: 'any' | 'all'
+  minRecharge: number
+  minConsume: number
+}
+
+export interface TelegramAdminBinding {
+  id: number
+  userId: number
+  user: {
+    id: number
+    username: string
+    email: string | null
+    status: string
+  } | null
+  telegramUserId: string
+  telegramUsername: string | null
+  firstName: string | null
+  lastName: string | null
+  boundAt: string
+  updatedAt: string
+  stats: {
+    totalRecharge: number
+    totalConsume: number
+    totalRefund: number
+    totalDestroyedValue: number
+  }
+  eligibility: TelegramGroupEligibility
+  vipEligibility: TelegramGroupEligibility
+}
+
+export interface TelegramAdminBindingsResponse {
+  bindings: TelegramAdminBinding[]
+  total: number
+  page: number
+  pageSize: number
+  group: {
+    enabled: boolean
+    configured: boolean
+    joinMode: 'any' | 'all'
+    minRecharge: number
+    minConsume: number
+  }
+  vipGroup: {
+    enabled: boolean
+    configured: boolean
+    joinMode: 'any' | 'all'
+    minRecharge: number
+    minConsume: number
+  }
+}
+
+export interface BadgeCatalogItem {
+  id: string
+  name: string
+  nameEn: string | null
+  fullLabel: string
+  sourceId?: string
+  sourceLabel?: string
+  seriesId: string
+  seriesTitle: string
+  seriesNameZh?: string
+  seriesNameEn?: string | null
+  seriesDescription: string
+  assetUrl: string
+  assetUrlDark?: string
+  assetUrlLight?: string
+  displayOrder?: number
+  isActive?: boolean
+  seriesIsActive?: boolean
+  createdAt?: string
+  updatedAt?: string
+  ownershipCount?: number
+  avatarUseCount?: number
+  instanceUseCount?: number
+}
+
+export interface BadgeSeriesItem {
+  id: string
+  title: string
+  nameZh: string
+  nameEn: string | null
+  description: string
+  sourceId?: string | null
+  sourceLabel?: string | null
+  displayOrder: number
+  isActive: boolean
+  badgeCount?: number
+  activeBadgeCount?: number
+  createdAt?: string
+  updatedAt?: string
+}
+
+export interface BadgeOwnership {
+  id: number
+  badgeId: string
+  badgeName: string
+  badgeNameEn: string | null
+  badgeLabel: string
+  seriesId: string
+  seriesTitle: string
+  assetUrl: string
+  assetUrlDark?: string | null
+  assetUrlLight?: string | null
+  source: 'draw' | 'lottery' | 'select' | 'admin_grant'
+  applicationTarget: 'avatar' | 'instance' | null
+  appliedInstanceId: number | null
+  appliedInstanceName: string | null
+  appliedAt: string | null
+  createdAt: string
+}
+
+export interface BadgeOverview {
+  costs: {
+    randomDraw: number
+    select: number
+  }
+  currentPoints: number
+  avatarBadgeId: string | null
+  catalog: BadgeCatalogItem[]
+  ownerships: BadgeOwnership[]
+  instances: Array<{
+    id: number
+    name: string
+    status: string
+    iconBadgeId: string | null
+    packagePlanId: number | null
+    instanceType: 'container' | 'vm'
+    host: {
+      id: number
+      name: string
+      location: string | null
+      countryCode: string
+    }
+  }>
+}
+
+export interface BadgeMultiDrawResponse {
+  success: boolean
+  currentPoints: number
+  ownerships: BadgeOwnership[]
+}
+
+// ==================== 实例相关 ====================
+
+export interface Instance {
+  id: number
+  incus_id: string
+  name: string
+  user_id?: number  // Only for admin
+  host_id?: number  // Only for admin
+  package_id: number | null
+  displayOrder?: number
+  display_order?: number
+  image: string
+  imageName?: string | null  // 镜像显示名称
+  status: 'creating' | 'running' | 'stopped' | 'suspended' | 'error' | 'deleted'
+  cpu: number
+  memory: number
+  disk: number
+  ipv4: string | null
+  ipv6: string | null
+  network_mode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'  // camelCase 别名
+  ssh_port: number | null
+  root_password?: string | null  // Removed from API responses for security
+  port_limit: number | null
+  snapshot_limit: number | null
+  backup_limit: number | null
+  site_limit: number | null
+  remaining_quota?: {
+    port: number
+    snapshot: number
+    backup: number
+    site: number
+  }
+  quota_usage?: {
+    port: number
+    snapshot: number
+    backup: number
+    site: number
+  }
+  effective_quota_limit?: {
+    port: number
+    snapshot: number
+    backup: number
+    site: number
+  }
+  swapEnabled?: boolean
+  swapSize?: number | null
+  monthlyTrafficLimit?: string | null  // BigInt as string (Bytes)
+  limitsIngress?: string | null  // 入栈带宽限制
+  limitsEgress?: string | null  // 出栈带宽限制
+  planId?: number | null  // 方案ID（用于变更方案）
+  packagePlanId?: number | null  // 付费方案ID（列表接口返回，用于判断是否付费实例）
+  planName?: string | null
+  planPrice?: number | null
+  billingPrice?: number | null
+  billingCycle?: number | null
+  affDiscountRate?: number | null
+  hasAffBinding?: boolean
+  isHostedInstance?: boolean
+  instanceType?: 'container' | 'vm'  // 实例类型：容器或虚拟机
+  iconBadgeId?: string | null
+  allow_instance_deletion?: boolean  // 是否允许删除实例（来自套餐设置）
+  // 实例列表返回的宿主机信息
+  host?: {
+    name: string
+    country_code: string
+    nat_public_ip?: string | null
+    storageDriver?: string
+  }
+  hostCountryCode?: string
+  natPublicIp?: string | null
+  hostNatPublicIpv6?: string | null
+  hostIpv6Gateway?: string | null
+  hostIpAddress?: string | null
+  userAvatarBadgeId?: string | null
+  // 封停相关字段
+  expires_at?: string | null        // 到期时间，null 表示免费实例
+  suspended_at?: string | null      // 封停时间
+  suspended_by?: number | null      // 封停操作者 ID
+  suspend_reason?: string | null    // 封停原因
+  // 自动续费
+  autoRenew?: boolean
+  // 托管节点所有者信息（仅用户托管节点）
+  hostOwnerInfo?: {
+    id: number
+    username: string
+    email: string
+    avatarStyle: string
+    avatarBadgeId: string | null
+    hostCount: number
+    instanceCount: number
+    registeredDays: number
+    vipLevel: number
+    vipBadgeStyle?: VipBadgeStyle | null
+  } | null
+  created_at: string
+  createdAt?: string  // camelCase 别名
+  updated_at: string
+}
+
+export interface InstanceWithDetails extends Omit<Instance, 'host'> {
+  user?: Pick<User, 'id' | 'username' | 'email'>
+  // 实例详情页面的宿主机信息（比列表更详细）
+  host?: {
+    id?: number
+    name: string
+    location?: string | null
+    country_code: string
+    nat_public_ip?: string | null
+    storageDriver?: string
+  }
+  package?: Pick<Package, 'id' | 'name'>
+  port_mappings?: PortMapping[]
+  nat_public_ip?: string
+  isHostOwner?: boolean  // True if current user owns the host
+  isInstanceOwner?: boolean  // True if current user owns the instance
+  isAdmin?: boolean  // True if current user is an admin
+  enableResourcePool?: boolean  // 节点是否启用资源池玩法
+}
+
+export interface CreateInstanceRequest {
+  name: string
+  packageId: number
+  planId?: number  // 付费方案ID（付费套餐必填）
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+  hostId: number
+  sshKeyId: number
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  customInitCommandIds?: number[]  // 用户自定义初始化命令 ID 列表
+}
+
+export interface UpdateInstanceRequest {
+  name?: string
+  cpu?: number
+  memory?: number
+  disk?: number
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number | null  // 0 = 不限制, null = 继承套餐
+}
+
+export interface InstanceStats {
+  cpu: {
+    usage: number
+    usagePercent: number
+  }
+  memory: {
+    usage: number
+    usagePercent: number
+    limit: number
+  }
+  disk: {
+    usage: number
+    usagePercent: number
+    limit: number
+  }
+  network: {
+    bytesReceived: number
+    bytesSent: number
+  }
+}
+
+export interface PortMapping {
+  id: number
+  instance_id?: number
+  host_id?: number
+  protocol: 'tcp' | 'udp'
+  publicPort: number
+  privatePort: number
+  public_port?: number  // 兼容旧格式
+  private_port?: number  // 兼容旧格式
+  remark?: string | null
+  device_name?: string
+  created_at?: string
+}
+
+export interface CreatePortMappingRequest {
+  protocol: 'tcp' | 'udp'
+  privatePort: number
+  remark?: string
+  deviceName?: string
+}
+
+// ==================== IP 地址 ====================
+
+export interface IpAddress {
+  id: number
+  address: string
+  type: 'inet4' | 'inet6'
+  isPrimary: boolean
+  isCustom?: boolean
+  device: string
+  createdAt: string
+}
+
+export interface Ipv6Subnet {
+  id: number
+  cidr: string
+  primaryIp: string
+  device: string
+  instanceId: number
+  createdAt: string
+}
+
+// ==================== 快照/备份 ====================
+
+export interface Snapshot {
+  id: number
+  instance_id: number
+  incus_name: string
+  name: string
+  description: string | null
+  stateful: number
+  size: number
+  created_at: string
+}
+
+export interface Backup {
+  id: number
+  instance_id: number
+  incus_name: string
+  name: string
+  description: string | null
+  size: number
+  status: 'creating' | 'ready' | 'error' | 'deleted'
+  created_at: string
+  expires_at: string | null
+}
+
+export interface CreateSnapshotRequest {
+  name: string
+  description?: string
+}
+
+export interface CreateBackupRequest {
+  name: string
+  description?: string
+}
+
+export interface SnapshotPolicy {
+  id: number
+  instance_id: number
+  enabled: number
+  interval_minutes: number
+  last_run_at: string | null
+  next_run_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface BackupPolicy {
+  id: number
+  instance_id: number
+  enabled: number
+  interval_minutes: number
+  last_run_at: string | null
+  next_run_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface UpdateSnapshotPolicyRequest {
+  enabled?: boolean
+  intervalMinutes?: number  // 10, 60, 360, 1440
+}
+
+export interface UpdateBackupPolicyRequest {
+  enabled?: boolean
+  intervalMinutes?: number  // 60, 360, 1440, 4320
+}
+
+// ==================== 节点相关 ====================
+
+export interface Host {
+  id: number
+  name: string
+  url: string
+  location: string | null
+  country_code: string
+  architecture?: 'x86_64' | 'aarch64'
+  status: 'online' | 'offline' | 'maintenance'
+  cert_path?: string | null  // Removed from API responses for security
+  key_path?: string | null   // Removed from API responses for security
+  nat_public_ip: string | null
+  nat_port_start: number | null
+  nat_port_end: number | null
+  cpu_used: number
+  memory_used: number
+  disk_used: number
+  cpu_allowance_max?: number
+  memory_max?: number
+  instance_type?: 'container' | 'vm' | 'both'
+  notify_purchase?: boolean
+  notify_renew?: boolean
+  notify_destroy?: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface HostWithDetails extends Host {
+  instanceCount?: number
+  tags?: string[]
+  certPath?: string  // Removed from API responses for security
+  keyPath?: string   // Removed from API responses for security
+  resources?: {
+    cpuUsed: number
+    memoryUsed: number
+    diskUsed: number
+  }
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  notifyPurchase?: boolean
+  notifyRenew?: boolean
+  notifyDestroy?: boolean
+  architecture?: 'x86_64' | 'aarch64'
+  natConfig?: {
+    publicIp: string | null
+    publicIpv6?: string | null
+    bindIp?: string | null
+    bindIpv6?: string | null
+    portRangeStart: number | null
+    portRangeEnd: number | null
+    portsUsedCount?: number
+  }
+  // 托管节点所有者信息（管理员查看托管节点时返回）
+  owner?: {
+    id: number
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId?: string | null
+  }
+}
+
+export interface HostAgentStatus {
+  id: number
+  hostId: number
+  agentId: string
+  enabled: boolean
+  status: 'online' | 'offline' | string
+  version: string | null
+  latestVersion: string | null
+  versionStatus: 'latest' | 'outdated' | 'unknown'
+  capabilities: string[]
+  lastReport: {
+    incus?: {
+      available?: boolean
+      socket?: string
+    }
+    resources?: {
+      cpuTotal?: number
+      cpuUsagePercent?: number
+      memoryTotalMb?: number
+      memoryUsedMb?: number
+      memoryAvailableMb?: number
+      memoryUsagePercent?: number
+      swapTotalMb?: number
+      swapUsedMb?: number
+      swapUsagePercent?: number
+      diskMountpoint?: string
+      diskTotalBytes?: number
+      diskUsedBytes?: number
+      diskAvailableBytes?: number
+      diskUsagePercent?: number
+      processCount?: number
+    }
+    metrics?: {
+      reportedAt?: string
+      heartbeatIntervalSeconds?: number
+      uptimeSeconds?: number
+      load1?: number
+      load5?: number
+      load15?: number
+    }
+    [key: string]: unknown
+  }
+  lastSeenAt: string | null
+  lastHeartbeatIp: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface HostAgentStatusResponse {
+  host: {
+    id: number
+    name: string
+  }
+  agent: HostAgentStatus | null
+}
+
+export interface HostAgentUpgradeRequestResponse {
+  requested: boolean
+  currentVersion: string | null
+  latestVersion: string | null
+  versionStatus: 'latest' | 'outdated' | 'unknown'
+  nextHeartbeatSeconds: number
+  message: string
+}
+
+export interface HostAgentInstallCommandResponse {
+  host: {
+    id: number
+    name: string
+  }
+  agent: HostAgentStatus
+  installToken: string
+  installTokenExpiresAt: string
+  installScriptUrl: string
+  installCommand: string
+  warning: string
+}
+
+export interface CreateHostRequest {
+  name: string
+  url: string
+  location?: string
+  countryCode?: string
+  tags?: string[]
+  certPath?: string
+  keyPath?: string
+  natConfig?: {
+    publicIp?: string
+    publicIpv6?: string
+    bindIp?: string
+    bindIpv6?: string
+    portRangeStart?: number
+    portRangeEnd?: number
+  }
+  ipAddress?: string
+  // 存储配置
+  storageDriver?: 'zfs' | 'lvm'
+  storageType?: 'loop' | 'disk'
+  storagePath?: string
+  storageSize?: number
+  // 网络配置
+  ipv6Mode?: number
+  ipv6Subnet?: string
+  ipv6Gateway?: string
+  ipv6ParentInterface?: string
+}
+
+export interface UpdateHostRequest {
+  name?: string
+  url?: string
+  location?: string
+  countryCode?: string
+  status?: 'online' | 'offline' | 'maintenance'
+  certPath?: string
+  keyPath?: string
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  ipv6ParentInterface?: string
+  ipv6Subnet?: string
+  transferEnabled?: boolean
+  trafficResetDay?: number  // 流量重置日（1-28）
+  notifyPurchase?: boolean
+  notifyRenew?: boolean
+  notifyDestroy?: boolean
+  enableResourcePool?: boolean  // 是否参与资源池玩法
+  announcement?: string | null  // 节点公告
+  probeUrl?: string | null  // 探针地址
+  natConfig?: {
+    publicIp?: string
+    publicIpv6?: string
+    bindIp?: string
+    bindIpv6?: string
+    portRangeStart?: number | null
+    portRangeEnd?: number | null
+  }
+}
+
+export interface AvailableHost {
+  id: number
+  name: string
+  location: string | null
+  countryCode: string
+  architecture?: 'x86_64' | 'aarch64'
+  probeUrl?: string | null
+  trafficMultiplier?: number
+  effectiveTrafficLimit?: string | null
+  resources: {
+    cpuUsed: number
+    cpuAllowanceMax: number
+    cpuEffectiveMax: number
+    cpuAvailable: number
+    memoryUsed: number
+    memoryMax: number
+    memoryAvailable: number
+    diskAvailable: number
+  }
+}
+
+export type ChangeHostUnavailableReason =
+  | 'current_host'
+  | 'host_offline'
+  | 'host_type_mismatch'
+  | 'cpu_full'
+  | 'memory_full'
+  | 'resource_unconfigured'
+  | 'image_unavailable'
+
+export interface ChangeHostOption {
+  id: number
+  name: string
+  location: string | null
+  countryCode: string
+  architecture: string
+  status: string
+  probeUrl?: string | null
+  trafficMultiplier?: number
+  effectiveTrafficLimit?: string | null
+  isCurrent: boolean
+  canChange: boolean
+  unavailableReason: ChangeHostUnavailableReason | null
+  resources: {
+    cpuUsed: number
+    cpuAllowanceMax: number
+    cpuAvailable: number
+    memoryUsed: number
+    memoryMax: number
+    memoryAvailable: number
+  }
+}
+
+export interface ChangeHostOptionsResponse {
+  packageId: number | null
+  packageName: string | null
+  currentHostId: number
+  required: {
+    cpu: number
+    memory: number
+  }
+  hosts: ChangeHostOption[]
+  sshKeys: Array<{
+    id: number
+    name: string
+    fingerprint?: string | null
+  }>
+  canChangeHost: boolean
+  unavailableReason?: 'no_package' | 'single_host' | 'no_ssh_key'
+}
+
+// ==================== 套餐相关 ====================
+
+export interface Package {
+  id: number
+  name: string
+  description: string | null
+  cpu_max: number
+  memory_max: number
+  disk_max: number
+  bandwidth_max: number | null
+  network_mode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'  // camelCase 别名
+  instance_type?: 'container' | 'vm'  // 实例类型
+  host_ids: number[]  // 绑定的宿主机ID列表
+  host_storage_pools?: Record<string, string | null>
+  host_traffic_multipliers?: Record<string, number>
+  privileged: number
+  nested: number
+  active: number
+  instance_count?: number
+  port_limit?: number | null
+  snapshot_limit?: number | null
+  backup_limit?: number | null
+  site_limit?: number | null
+  node_selectors?: string | null
+  monthly_traffic_limit?: string | null  // BigInt as string (Bytes)
+  // 存储 I/O 限制
+  io_limit_mode?: 'throughput' | 'iops'
+  limits_read?: string
+  limits_write?: string
+  limits_read_iops?: number
+  limits_write_iops?: number
+  // 网络限制
+  limits_ingress?: string
+  limits_egress?: string
+  // 进程与调度
+  limits_processes?: number
+  limits_cpu_priority?: number
+  // 启动配置
+  boot_autostart?: boolean
+  boot_autostart_priority?: number
+  boot_autostart_delay?: number
+  boot_host_shutdown_timeout?: number
+  created_at: string
+  // 套餐所有权标识（用于区分自己的套餐和共享的套餐）
+  isOwn?: boolean  // true = 用户自己拥有的套餐，false = 共享给自己的套餐
+  isShared?: boolean  // true = 共享给自己的套餐
+  isGlobalShared?: boolean  // true = 全局共享的套餐
+  ownerId?: number  // 套餐所有者ID
+  ownerUsername?: string  // 套餐所有者用户名
+  sourceType?: 'official' | 'market' | 'zone' | 'friends' | 'own'  // 套餐来源类型
+  hostingZoneId?: number
+  hostingZoneName?: string
+  hostingZoneLogoUrl?: string
+  soldOut?: boolean  // 是否售罄（所有宿主机都无法满足最低配置）
+  // 全局共享配置（仅当 isGlobalShared = true 或套餐所有者查看时）
+  global_shared?: boolean
+  global_quota_multiplier?: null  // 公开套餐不再使用资源配额倍数限制
+  global_max_instances?: number | null  // 公开套餐最大实例数，开启公开时必须为 1-5
+  required_package_id?: number | null
+  required_package_name?: string | null
+  has_required_package_instance?: boolean
+  // 实例操作权限
+  allow_instance_deletion?: boolean  // 是否允许用户删除实例
+  sharedAt?: string  // 共享时间（共享套餐）
+  // 剩余配额信息
+  quotaInfo?: {
+    maxInstances: number | null
+    remainingInstances: number | null
+    maxCpu: number | null
+    remainingCpu: number | null
+    maxMemory: number | null
+    remainingMemory: number | null
+    ownerUsername: string | null
+  }
+  // 托管套餐所有者信息（管理员查看托管套餐时返回）
+  owner?: {
+    id: number
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId?: string | null
+  }
+}
+
+export interface CreatePackageRequest {
+  name: string
+  description?: string
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax?: number
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'  // 实例类型
+  hostIds: number[]  // 必须至少绑定一个宿主机
+  hostStoragePools?: Record<string, string | null>
+  hostTrafficMultipliers?: Record<string, number>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  nodeSelectors?: string[]
+  monthlyTrafficLimit?: string  // BigInt as string (Bytes)
+  // 存储 I/O 限制
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  // 网络限制
+  limitsIngress?: string
+  limitsEgress?: string
+  // 进程与调度
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  // 启动配置
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  // 全局共享配置
+  globalShared?: boolean
+  globalQuotaMultiplier?: null  // 公开套餐不再使用资源配额倍数限制
+  globalMaxInstances?: number | null  // 公开套餐最大实例数，开启公开时必须为 1-5
+  requiredPackageId?: number | null
+  // 实例操作权限
+  allowInstanceDeletion?: boolean  // 是否允许用户删除实例
+}
+
+export interface UpdatePackageRequest {
+  name?: string
+  description?: string
+  cpuMax?: number
+  memoryMax?: number
+  diskMax?: number
+  bandwidthMax?: number
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'  // 实例类型
+  hostIds?: number[]  // 如果提供，将更新绑定的宿主机（必须至少一个）
+  hostStoragePools?: Record<string, string | null>
+  hostTrafficMultipliers?: Record<string, number>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  nodeSelectors?: string[]
+  monthlyTrafficLimit?: string | null  // BigInt as string (Bytes), null to clear
+  // 存储 I/O 限制
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  // 网络限制
+  limitsIngress?: string
+  limitsEgress?: string
+  // 进程与调度
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  // 启动配置
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  // 全局共享配置
+  globalShared?: boolean
+  globalQuotaMultiplier?: null  // 公开套餐不再使用资源配额倍数限制
+  globalMaxInstances?: number | null  // 公开套餐最大实例数，开启公开时必须为 1-5
+  requiredPackageId?: number | null
+  // 实例操作权限
+  allowInstanceDeletion?: boolean  // 是否允许用户删除实例
+}
+
+// 实例配置类型
+export interface InstanceConfig {
+  limits_read: string
+  limits_write: string
+  limits_read_iops: number
+  limits_write_iops: number
+  limits_ingress: string
+  limits_egress: string
+  limits_processes: number
+  limits_cpu_priority: number
+  boot_autostart: boolean
+  boot_autostart_priority: number
+  boot_autostart_delay: number
+  boot_host_shutdown_timeout: number
+}
+
+export interface InstanceSwapConfig {
+  available: boolean
+  enabled: boolean
+  sizeMb: number
+  kind: 'container' | 'vm'
+  requiresRunning: boolean
+}
+
+export interface InstanceConfigResponse {
+  config: InstanceConfig
+  overrides: Record<keyof InstanceConfig, boolean>
+  packageDefaults: InstanceConfig
+  ioLimitMode: 'throughput' | 'iops'
+  swap: InstanceSwapConfig
+}
+
+export interface UpdateInstanceConfigRequest {
+  limitsRead?: string | null
+  limitsWrite?: string | null
+  limitsReadIops?: number | null
+  limitsWriteIops?: number | null
+  limitsIngress?: string | null
+  limitsEgress?: string | null
+  limitsProcesses?: number | null
+  limitsCpuPriority?: number | null
+  bootAutostart?: boolean | null
+  bootAutostartPriority?: number | null
+  bootAutostartDelay?: number | null
+  bootHostShutdownTimeout?: number | null
+}
+
+// ==================== SSH Keys ====================
+
+export interface SshKey {
+  id: number
+  user_id?: number
+  name: string
+  fingerprint: string
+  publicKeyPreview?: string  // 截断的公钥预览
+  created_at?: string
+  createdAt?: string
+}
+
+export interface CreateSshKeyRequest {
+  name: string
+  publicKey: string
+}
+
+// ==================== 通知相关 ====================
+
+export interface NotificationChannel {
+  id: number
+  user_id: number
+  type: 'telegram' | 'discord' | 'email' | 'webhook'
+  name: string
+  config: string | Record<string, unknown>
+  enabled: boolean | number
+  created_at: string
+}
+
+export interface CreateNotificationChannelRequest {
+  type: 'telegram' | 'discord' | 'email' | 'webhook'
+  name: string
+  config: Record<string, unknown>
+}
+
+export interface UpdateNotificationChannelRequest {
+  name?: string
+  config?: Record<string, unknown>
+  enabled?: boolean
+}
+
+export type CloudInitState =
+  | 'manual'
+  | 'done'
+  | 'done_with_errors'
+  | 'running'
+  | 'disabled'
+  | 'unsupported'
+  | 'agent_unavailable'
+  | 'unknown'
+
+export interface CloudInitStatusResponse {
+  ready: boolean
+  state: CloudInitState
+  source: 'manual' | 'status_json' | 'boot_finished' | 'image' | 'unknown'
+  manualOverride: boolean
+  message: string
+  detectedAt: string
+}
+
+export interface TerminalSavedCommand {
+  id: number
+  userId: number
+  name: string
+  command: string
+  description: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreateTerminalSavedCommandRequest {
+  name: string
+  command: string
+  description?: string | null
+}
+
+export interface UpdateTerminalSavedCommandRequest {
+  name?: string
+  command?: string
+  description?: string | null
+}
+
+// ==================== 实例任务相关 ====================
+
+export type InstanceTaskType = 'start' | 'stop' | 'restart' | 'rebuild' | 'recreate' | 'clone' | 'change_host'
+export type InstanceTaskStatus = 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED'
+
+export interface InstanceTask {
+  id: number
+  instanceId?: number
+  instanceName?: string | null
+  taskType: InstanceTaskType
+  status: InstanceTaskStatus
+  progress?: string | null
+  error?: string | null
+  queuePosition: number
+  createdAt: string
+  startedAt?: string | null
+  finishedAt?: string | null
+  newInstanceId?: number | null  // 用于 clone 操作
+}
+
+export interface InstanceTaskResponse {
+  message: string
+  taskId: number
+  status: InstanceTaskStatus
+}
+
+// ==================== 站内信相关 ====================
+
+export interface InboxMessage {
+  id: number
+  userId: number
+  eventType: string
+  title: string
+  content: string
+  isRead: boolean
+  data: Record<string, unknown> | null
+  createdAt: string
+}
+
+export interface PaginatedInboxMessages {
+  messages: InboxMessage[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+// ==================== OAuth 相关 ====================
+
+export interface OAuthConfig {
+  id: number
+  provider: 'github' | 'google'
+  client_id: string
+  client_secret: string
+  enabled: number
+  created_at: string
+  updated_at: string
+}
+
+export interface UserOAuthBinding {
+  id: number
+  user_id: number
+  provider: 'github' | 'google'
+  provider_user_id: string
+  provider_username: string | null
+  provider_email: string | null
+  provider_avatar: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface UpdateOAuthConfigRequest {
+  clientId?: string
+  clientSecret?: string
+  enabled?: boolean
+}
+
+// ==================== 帮助文档 ====================
+
+export interface HelpArticle {
+  id: number
+  title: string
+  slug: string
+  content: string
+  category: string
+  sort_order: number
+  published: number
+  pinned?: number  // 是否置顶（0 = 否，1 = 是）
+  created_by: number | null
+  created_at: string
+  updated_at: string
+}
+
+export interface CreateHelpArticleRequest {
+  title: string
+  slug: string
+  content: string
+  category: string
+  sortOrder?: number
+  published?: boolean
+  pinned?: boolean
+}
+
+export interface UpdateHelpArticleRequest {
+  title?: string
+  slug?: string
+  content?: string
+  category?: string
+  sortOrder?: number
+  published?: boolean
+  pinned?: boolean
+}
+
+// ==================== 镜像相关 ====================
+
+export interface SystemImage {
+  id: number
+  name: string
+  osType: string
+  remoteAlias: string
+  architecture: 'x86_64' | 'aarch64'
+  instanceType?: 'container' | 'vm' | 'both'
+  icon: string
+  sortOrder?: number
+  hidden?: boolean
+  createdAt?: string
+  updatedAt?: string
+}
+
+export interface CreateSystemImageRequest {
+  name: string
+  remoteAlias: string
+  osType?: string
+  architecture?: 'x86_64' | 'aarch64'
+  instanceType?: 'container' | 'vm' | 'both'
+  icon: string
+  sortOrder?: number
+  hidden?: boolean
+}
+
+export interface UpdateSystemImageRequest {
+  name?: string
+  remoteAlias?: string
+  osType?: string
+  architecture?: 'x86_64' | 'aarch64'
+  instanceType?: 'container' | 'vm' | 'both'
+  icon?: string
+  sortOrder?: number
+  hidden?: boolean
+}
+
+export interface HostImagePolicy {
+  success: boolean
+  host: {
+    id: number
+    name: string
+    architecture: 'x86_64' | 'aarch64'
+    instanceType: 'container' | 'vm' | 'both'
+  }
+  useDefault: boolean
+  allowedImageIds: number[]
+  images: SystemImage[]
+}
+
+// ==================== 日志 ====================
+
+export interface Log {
+  id: number
+  user_id: number | null
+  instance_id?: number | null
+  username?: string | null
+  module: string
+  action: string
+  content: string
+  result: string
+  created_at: string
+}
+
+// ==================== 工单相关 ====================
+
+export type TicketStatus = 'open' | 'in_progress' | 'resolved' | 'closed'
+export type TicketPriority = 'low' | 'normal' | 'high' | 'urgent'
+export type TicketCategory = 'general' | 'billing' | 'technical' | 'abuse'
+
+export interface Ticket {
+  id: number
+  userId: number
+  hostId: number | null  // 可为 null，表示直接发给管理员的工单
+  instanceId: number | null
+  subject: string
+  category: TicketCategory
+  priority: TicketPriority
+  status: TicketStatus
+  createdAt: string
+  updatedAt: string
+  resolvedAt: string | null
+  closedAt: string | null
+  user?: {
+    id: number
+    username: string
+    avatarStyle?: string
+    avatarBadgeId?: string | null
+  }
+  host?: {
+    id: number
+    name: string
+    userId: number
+  }
+  instance?: {
+    id: number
+    name: string
+    status?: string
+    iconBadgeId?: string | null
+    incusId?: string | null
+    ipv4?: string | null
+    ipv6?: string | null
+    cpu?: number
+    memory?: number
+    disk?: number
+    image?: string
+    packageName?: string | null
+  } | null
+  messageCount?: number
+  lastMessage?: {
+    content: string
+    isFromOwner: boolean
+    createdAt: string
+  } | null
+  // 是否需要回复：
+  // - 用户视角：宿主机主人回复了，需要用户回复
+  // - 宿主机视角：用户回复了，需要宿主机主人回复
+  needsReply?: boolean
+}
+
+export interface TicketMessage {
+  id: number
+  ticketId: number
+  senderId: number
+  content: string
+  isFromOwner: boolean
+  createdAt: string
+  attachments: TicketMessageAttachment[]
+  sender?: {
+    id: number
+    username: string
+    avatarStyle?: string
+    avatarBadgeId?: string | null
+  }
+}
+
+export interface TicketMessageAttachment {
+  id: number
+  ticketId: number
+  messageId: number
+  uploaderId: number
+  provider: string
+  providerVersion: string
+  providerFileId: string | null
+  filename: string
+  originalName: string
+  mimeType: string
+  sizeBytes: number
+  width: number | null
+  height: number | null
+  createdAt: string
+}
+
+export interface CreateTicketRequest {
+  instanceId?: number | null  // 可选：不选实例时工单直接发给管理员
+  subject: string
+  category?: TicketCategory
+  priority?: TicketPriority
+  content: string
+  attachments?: File[]
+}
+
+export interface PaginatedTickets {
+  tickets: Ticket[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+export interface PaginatedTicketMessages {
+  messages: TicketMessage[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+// ==================== 计费相关 ====================
+
+// 套餐方案
+export interface PackagePlan {
+  id: number
+  packageId: number
+  name: string
+  description: string | null
+  price: number
+  billingCycle: number // 账期（月）
+  setupFee?: number    // 开通费（分）
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  monthlyTrafficLimit: string | null
+  isActive: boolean
+  isSoldOut: boolean
+  sortOrder: number
+  slaGuarantee: number | null // SLA保证百分比，1-100
+  createdAt: string
+  package?: {
+    id: number
+    name: string
+  }
+}
+
+// 计费信息
+export interface InstanceBillingInfo {
+  instanceId: number
+  instanceName: string
+  planId: number | null
+  planName: string | null
+  price: number | null
+  billingCycle: number | null
+  expiresAt: string | null
+  autoRenew: boolean
+  renewPreview: RenewPreview[] | null
+  affDiscount: AffDiscount | null
+  // 托管实例相关信息
+  isHostedInstance: boolean
+  daysUntilExpire: number | null
+  hostingRenewRestriction: { monthsOnly: number; daysBeforeExpire: number } | null
+}
+
+export interface RenewPreview {
+  months: number
+  price: number           // 原价（元）
+  discountedPrice: number // 折扣价（元）
+  expiresAt: string
+}
+
+export interface AffDiscount {
+  discountRate: number     // 折扣率，如 0.05
+  discountPercent: number  // 百分比，如 5 表示 5%
+}
+
+// 升降级预览
+export interface ChangePlanPreview {
+  oldPlan: {
+    id: number
+    name: string
+    price: number
+    billingCycle: number
+  }
+  newPlan: {
+    id: number
+    name: string
+    price: number
+    billingCycle: number
+    isActive: boolean
+    isSoldOut: boolean
+  }
+  remainingDays: number
+  // 计算详情
+  oldDailyPrice: number        // 原方案日价（元）
+  newDailyPrice: number        // 新方案日价（元）
+  remainingValue: number       // 剩余价值（元）
+  newPlanCost: number          // 新方案费用（元）
+  // 折扣信息
+  discountRate: number         // 折扣率（0-1）
+  discountAmount: number       // 折扣金额（元）
+  // 最终费用
+  priceDiff: number            // 差价（元，正数=补交，负数=退款）
+  isUpgrade: boolean
+  newExpiresAt: string
+  newConfig: {
+    cpu: number
+    memory: number
+    disk: number
+  }
+  resourceWarnings: string[] | null
+  // 可变更状态
+  canChange: boolean
+  cannotChangeReason?: string
+}
+
+// 计费记录
+export interface InstanceBillingRecord {
+  id: number
+  type: 'purchase' | 'renewal' | 'upgrade' | 'downgrade' | 'admin_extension'
+  amount: number
+  months: number | null
+  periodStart: string
+  periodEnd: string
+  remark: string | null
+  createdAt: string
+}
+
+// 支付渠道
+export interface PaymentProvider {
+  id: number
+  name: string
+  type: string
+  methods: string[]
+  methodFees?: Record<string, { feeRate: number; feeFixed?: number }>
+  minAmount: number
+  maxAmount: number | null
+  feeRate: number
+  feeFixed: number
+}
+
+// 充值订单
+export interface RechargeOrder {
+  id?: number
+  orderNo: string
+  amount: number
+  payableAmount?: number
+  actualAmount: number | null
+  fee: number
+  status: 'pending' | 'paid' | 'completed' | 'failed' | 'cancelled' | 'expired' | 'refunded'
+  provider?: {
+    id: number
+    name: string
+    type: string
+  }
+  paymentMethod?: string | null
+  actualPaymentMethod?: string | null
+  paymentCurrency?: string | null
+  paymentNetwork?: string | null
+  paymentUuid?: string | null
+  paymentTxid?: string | null
+  invoiceCurrency?: string | null
+  gatewayStatus?: string | null
+  gatewayStatusDescription?: string | null
+  tradeNo?: string | null
+  failReason?: string | null
+  createdAt: string
+  expiredAt?: string | null
+  completedAt?: string | null
+}
+
+// 用户余额信息
+export interface UserBalance {
+  balance: number
+  frozen: number
+  totalRecharge: number
+  totalConsume: number
+}
+
+// 余额变动记录
+export interface BalanceLog {
+  id: number
+  type: string
+  amount: number
+  balanceBefore: number
+  balanceAfter: number
+  remark: string | null
+  createdAt: string
+}
+
+// ==================== 通用响应 ====================
+
+export interface ApiResponse<T = unknown> {
+  success?: boolean
+  data?: T
+  error?: string
+  message?: string
+}
+
+export interface PaginatedResponse<T> {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
diff --git a/client/src/types/router.ts b/client/src/types/router.ts
new file mode 100644
index 0000000..e4aedef
--- /dev/null
+++ b/client/src/types/router.ts
@@ -0,0 +1,17 @@
+/**
+ * Router 类型定义
+ */
+
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    requiresAuth?: boolean
+    requiresAdmin?: boolean
+    requiresUser?: boolean  // 仅普通用户可访问（禁止管理员）
+    guest?: boolean
+    title?: string
+    titleKey?: string
+  }
+}
+
diff --git a/client/src/types/store.ts b/client/src/types/store.ts
new file mode 100644
index 0000000..2d4b9bb
--- /dev/null
+++ b/client/src/types/store.ts
@@ -0,0 +1,29 @@
+/**
+ * Store 类型定义
+ */
+
+export interface AuthUser {
+  id: number
+  username: string
+  email: string
+  role: 'admin' | 'user'
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  hasCreatedHostBefore?: boolean
+  canAccessHostingFeature?: boolean
+}
+
+export interface ThemeMode {
+  mode: 'light' | 'dark' | 'system'
+  resolvedTheme: 'light' | 'dark'
+  isDark: boolean
+}
+
+export interface Toast {
+  id: number
+  message: string
+  type: 'success' | 'error' | 'warning' | 'info'
+  duration: number
+  visible: boolean
+}
+
diff --git a/client/src/utils/billing.ts b/client/src/utils/billing.ts
new file mode 100644
index 0000000..5125c67
--- /dev/null
+++ b/client/src/utils/billing.ts
@@ -0,0 +1,70 @@
+/**
+ * 前端计费计算工具函数
+ * 与后端 billing-calc.ts 保持一致
+ */
+
+// 周期天数常量（统一定义：1个月 = 31 天）
+const CYCLE_DAYS: Record<number, number> = {
+  1: 31,      // 月付
+  3: 93,      // 季付
+  6: 186,     // 半年付
+  12: 372     // 年付
+}
+
+/**
+ * 获取周期天数
+ */
+export function getCycleDays(billingCycle: number): number {
+  return CYCLE_DAYS[billingCycle] || (billingCycle * 31)
+}
+
+/**
+ * 计算日价
+ */
+export function calculateDailyPrice(price: number, billingCycle: number): number {
+  const cycleDays = getCycleDays(billingCycle)
+  return price / cycleDays
+}
+
+/**
+ * 计算折扣后价格
+ */
+export function calculateDiscountedPrice(originalPrice: number, discountRate: number): number {
+  return Number((originalPrice * (1 - discountRate)).toFixed(2))
+}
+
+/**
+ * 计算价格差价
+ * @param oldPrice 旧价格（元）
+ * @param oldBillingCycle 旧计费周期（月）
+ * @param newPrice 新价格（元）
+ * @param newBillingCycle 新计费周期（月）
+ * @param remainingDays 剩余天数
+ * @param discountRate 折扣率（0-1）
+ */
+export function calculatePriceDiff(
+  oldPrice: number,
+  oldBillingCycle: number,
+  newPrice: number,
+  newBillingCycle: number,
+  remainingDays: number,
+  discountRate: number = 0
+): number {
+  // 应用折扣后的实际价格
+  const actualOldPrice = discountRate > 0
+    ? calculateDiscountedPrice(oldPrice, discountRate)
+    : oldPrice
+  const actualNewPrice = discountRate > 0
+    ? calculateDiscountedPrice(newPrice, discountRate)
+    : newPrice
+
+  // 计算日价
+  const oldDailyPrice = calculateDailyPrice(actualOldPrice, oldBillingCycle)
+  const newDailyPrice = calculateDailyPrice(actualNewPrice, newBillingCycle)
+
+  // 差价 = (新日价 - 旧日价) × 剩余天数
+  const priceDiff = (newDailyPrice - oldDailyPrice) * remainingDays
+
+  // 最低金额门槛：低于 0.01 元按 0 处理
+  return Math.abs(priceDiff) < 0.01 ? 0 : Number(priceDiff.toFixed(2))
+}
diff --git a/client/src/utils/countryDisplay.ts b/client/src/utils/countryDisplay.ts
new file mode 100644
index 0000000..da049f0
--- /dev/null
+++ b/client/src/utils/countryDisplay.ts
@@ -0,0 +1,132 @@
+import flagCountryMetadata from 'flag-icons/country.json'
+
+interface FlagCountryMeta {
+  code: string
+  name: string
+}
+
+type TranslateCountryName = (key: string, fallback: string) => string
+
+const flagCountryCodePattern = /^[a-z]{2}$/
+const intlRegionCodePattern = /^([a-z]{2}|\d{3})$/i
+const flagCountries = (flagCountryMetadata as FlagCountryMeta[])
+  .filter(country => flagCountryCodePattern.test(country.code))
+  .map(country => ({
+    code: country.code.toLowerCase(),
+    englishName: country.name
+  }))
+
+const englishCountryNameMap = new Map(
+  flagCountries.map(country => [country.code, country.englishName])
+)
+
+const regionDisplayNameCache = new Map<string, Intl.DisplayNames | null>()
+
+const specialCountryNames: Record<string, Record<string, string>> = {
+  'zh-cn': {
+    pc: '太平洋共同体',
+    xx: '未知地区'
+  },
+  'zh-tw': {
+    pc: '太平洋共同體',
+    xx: '未知地區'
+  },
+  en: {
+    pc: 'Pacific Community',
+    xx: 'Unknown'
+  }
+}
+
+function getLocaleBucket(locale: string): keyof typeof specialCountryNames {
+  const normalizedLocale = locale.toLowerCase()
+  if (normalizedLocale.startsWith('zh-cn')) return 'zh-cn'
+  if (normalizedLocale.startsWith('zh-tw')) return 'zh-tw'
+  return 'en'
+}
+
+function getRegionDisplayNames(locale: string): Intl.DisplayNames | null {
+  const cacheKey = locale.toLowerCase()
+  const cached = regionDisplayNameCache.get(cacheKey)
+  if (cached !== undefined) {
+    return cached
+  }
+
+  if (typeof Intl.DisplayNames !== 'function') {
+    regionDisplayNameCache.set(cacheKey, null)
+    return null
+  }
+
+  const displayNames = new Intl.DisplayNames([locale], { type: 'region' })
+  regionDisplayNameCache.set(cacheKey, displayNames)
+  return displayNames
+}
+
+export const availableFlagCountryCodes = flagCountries
+  .map(country => country.code)
+  .filter(code => code !== 'cn')
+
+export function normalizeCountryCodeForFlag(code: string): string {
+  return code.toLowerCase()
+}
+
+export function getLocalizedCountryName(
+  code: string,
+  locale: string,
+  translate?: TranslateCountryName
+): string {
+  const normalizedCode = code.trim().toLowerCase()
+  if (!normalizedCode) {
+    return ''
+  }
+
+  const uppercaseCode = normalizedCode.toUpperCase()
+
+  if (translate) {
+    const translatedName = translate(`common.countries.${normalizedCode}`, uppercaseCode)
+    if (translatedName !== uppercaseCode) {
+      return translatedName
+    }
+  }
+
+  if (intlRegionCodePattern.test(normalizedCode)) {
+    const displayName = getRegionDisplayNames(locale)?.of(uppercaseCode)
+    if (displayName && displayName !== uppercaseCode) {
+      return displayName
+    }
+  }
+
+  const localeBucket = getLocaleBucket(locale)
+  const specialName = specialCountryNames[localeBucket][normalizedCode]
+  if (specialName) {
+    return specialName
+  }
+
+  return englishCountryNameMap.get(normalizedCode) || uppercaseCode
+}
+
+export function normalizeCountryName(
+  country: string | null | undefined,
+  localizedNames: { mainlandChina: string; hongKong: string; macau: string; taiwan: string }
+): string | null {
+  if (!country) return null
+
+  const normalized = country.trim()
+
+  if (normalized === 'China' || normalized === 'China Mainland' || normalized === 'Mainland China') {
+    return localizedNames.mainlandChina
+  }
+
+  if (normalized === 'Taiwan' || normalized === 'China Taiwan') {
+    return localizedNames.taiwan
+  }
+
+  if (normalized === 'Hong Kong' || normalized === 'China Hong Kong') {
+    return localizedNames.hongKong
+  }
+
+  if (normalized === 'Macau' || normalized === 'China Macau') {
+    return localizedNames.macau
+  }
+
+  return country
+}
diff --git a/client/src/utils/errorHandler.ts b/client/src/utils/errorHandler.ts
new file mode 100644
index 0000000..4ab94ab
--- /dev/null
+++ b/client/src/utils/errorHandler.ts
@@ -0,0 +1,61 @@
+import i18n from '@/locales'
+
+/**
+ * API error type from interceptor
+ */
+export interface ApiError {
+    message: string
+    code?: string | null
+    details?: string | null
+}
+
+/**
+ * Translate API error response
+ * If error has a code, translate it; otherwise return the error message as-is
+ */
+export function translateError(error: unknown): string {
+    const { t, te } = i18n.global
+
+    if (!error) return t('common.error') as string
+
+    // Handle API error object from interceptor
+    if (typeof error === 'object' && error !== null) {
+        const err = error as ApiError
+
+        // 优先使用 details（包含详细的错误信息）
+        if (err.details) {
+            return err.details
+        }
+
+        // Check for error code and translate
+        if (err.code) {
+            const key = `errors.${err.code}`
+            if (te(key)) {
+                return t(key) as string
+            }
+        }
+
+        // Fallback to error message
+        if (err.message) {
+            return err.message
+        }
+    }
+
+    if (typeof error === 'string') {
+        return error
+    }
+
+    return t('common.error') as string
+}
+
+/**
+ * Get translated error message from error code
+ */
+export function getErrorMessage(code: string): string {
+    const { t, te } = i18n.global
+    const key = `errors.${code}`
+    if (te(key)) {
+        return t(key) as string
+    }
+    return code
+}
diff --git a/client/src/utils/formatters.ts b/client/src/utils/formatters.ts
new file mode 100644
index 0000000..48b76b8
--- /dev/null
+++ b/client/src/utils/formatters.ts
@@ -0,0 +1,166 @@
+/**
+ * 通用格式化工具函数
+ */
+
+/**
+ * 格式化内存大小 (MB -> 可读格式，1024进制)
+ */
+export function formatMemory(mb: number | null | undefined): string {
+    if (!mb) return '0'
+    if (mb >= 1024) {
+        const gb = mb / 1024
+        return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+    }
+    return mb + ' MB'
+}
+
+/**
+ * 格式化硬盘大小 (MB -> 可读格式，1024进制)
+ */
+export function formatDisk(mb: number | null | undefined): string {
+    if (!mb) return '0'
+    if (mb >= 1024) {
+        const gb = mb / 1024
+        return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+    }
+    return mb + ' MB'
+}
+
+/**
+ * 格式化字节大小
+ */
+export function formatBytes(bytes: number | null | undefined): string {
+    if (!bytes || bytes === 0) return '0 B'
+    const units = ['B', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(1024))
+    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + units[i]
+}
+
+/**
+ * 格式化日期
+ */
+export function formatDate(dateStr: string | null | undefined): string {
+    if (!dateStr) return '-'
+    return new Date(dateStr).toLocaleString('zh-CN')
+}
+
+/**
+ * 格式化日期（简短格式）
+ */
+export function formatDateShort(dateStr: string | null | undefined): string {
+    if (!dateStr) return '-'
+    const date = new Date(dateStr)
+    return date.toLocaleDateString('zh-CN', {
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    })
+}
+
+/**
+ * 计算百分比
+ */
+export function getPercent(used: number | null | undefined, limit: number | null | undefined): number {
+    if (!limit || !used) return 0
+    return Math.min(100, Math.round((used / limit) * 100))
+}
+
+/**
+ * 根据百分比获取进度条颜色
+ */
+export function getProgressColor(percent: number): string {
+    if (percent >= 90) return 'bg-red-500'
+    if (percent >= 70) return 'bg-yellow-500'
+    return 'bg-green-500'
+}
+
+export interface StatusInfo {
+    label: string
+    class: string
+    dot: string
+}
+
+type TranslateFunction = (key: string) => string
+
+/**
+ * 获取实例状态信息
+ * @param status 状态字符串
+ * @param t 翻译函数（可选，不传则返回状态键名）
+ */
+export function getStatusInfo(status: string, t?: TranslateFunction): StatusInfo {
+    const normalizedStatus = status?.toLowerCase() || 'stopped'
+    
+    const statusMap: Record<string, { labelKey: string; class: string; dot: string }> = {
+        running: { labelKey: 'instance.status.running', class: 'badge-success', dot: 'bg-green-500' },
+        stopped: { labelKey: 'instance.status.stopped', class: 'badge-default', dot: 'bg-gray-500' },
+        suspended: { labelKey: 'instance.status.suspended', class: 'badge-error', dot: 'bg-red-500' },
+        starting: { labelKey: 'instance.status.starting', class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+        stopping: { labelKey: 'instance.status.stopping', class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+        restarting: { labelKey: 'instance.status.restarting', class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+        creating: { labelKey: 'instance.status.creating', class: 'badge-warning', dot: 'bg-yellow-500 animate-pulse' },
+        error: { labelKey: 'instance.status.error', class: 'badge-error', dot: 'bg-red-500' }
+    }
+    
+    const info = statusMap[normalizedStatus] || statusMap.stopped
+    return {
+        label: t ? t(info.labelKey) : info.labelKey,
+        class: info.class,
+        dot: info.dot
+    }
+}
+
+/**
+ * 获取时间问候语
+ */
+export function getTimeGreeting(): string {
+    const hour = new Date().getHours()
+    if (hour < 6) return '夜深了'
+    if (hour < 12) return '早上好'
+    if (hour < 18) return '下午好'
+    return '晚上好'
+}
+
+/**
+ * 格式化时长（秒 -> 可读格式）
+ */
+export function formatDuration(seconds: number | null | undefined): string {
+    if (!seconds && seconds !== 0) return '-'
+    if (seconds < 60) return `${seconds}秒`
+    if (seconds < 3600) {
+        const minutes = Math.floor(seconds / 60)
+        const secs = seconds % 60
+        return secs > 0 ? `${minutes}分${secs}秒` : `${minutes}分钟`
+    }
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    const secs = seconds % 60
+    if (minutes === 0 && secs === 0) return `${hours}小时`
+    if (secs === 0) return `${hours}小时${minutes}分钟`
+    return `${hours}小时${minutes}分${secs}秒`
+}
+
+/**
+ * 格式化相对时间（用于站内信等场景）
+ * @param dateStr ISO 时间字符串
+ * @param t 翻译函数，接受 key 和参数
+ * @returns 格式化后的相对时间字符串
+ */
+export function formatRelativeTime(
+    dateStr: string,
+    t: (key: string, params?: Record<string, unknown>) => string
+): string {
+    const date = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMs / 3600000)
+    const diffDays = Math.floor(diffMs / 86400000)
+
+    if (diffMins < 1) return t('inbox.justNow')
+    if (diffMins < 60) return t('inbox.minutesAgo', { n: diffMins })
+    if (diffHours < 24) return t('inbox.hoursAgo', { n: diffHours })
+    if (diffDays < 7) return t('inbox.daysAgo', { n: diffDays })
+
+    return date.toLocaleDateString()
+}
\ No newline at end of file
diff --git a/client/src/utils/freeSiteFun.ts b/client/src/utils/freeSiteFun.ts
new file mode 100644
index 0000000..5d3be4c
--- /dev/null
+++ b/client/src/utils/freeSiteFun.ts
@@ -0,0 +1,112 @@
+import i18n from '@/locales'
+
+type TranslateParams = Record<string, string | number>
+
+function tr(key: string, params?: TranslateParams): string {
+  const translate = i18n.global.t as (key: string, params?: TranslateParams) => string
+  return translate(key, params)
+}
+
+export function getFreeSiteBillingCycleLabel(months: number | null | undefined): string {
+  switch (months) {
+    case 1:
+      return tr('freeSite.billingCycleLabel.monthly')
+    case 3:
+      return tr('freeSite.billingCycleLabel.quarterly')
+    case 6:
+      return tr('freeSite.billingCycleLabel.semiAnnual')
+    case 12:
+      return tr('freeSite.billingCycleLabel.annual')
+    default:
+      return months
+        ? tr('freeSite.billingCycleLabel.custom', { months })
+        : tr('freeSite.billingCycleLabel.free')
+  }
+}
+
+export function getFreeSiteBillingCycleShort(months: number | null | undefined): string {
+  switch (months) {
+    case 1:
+      return tr('freeSite.billingCycleShort.monthly')
+    case 3:
+      return tr('freeSite.billingCycleShort.quarterly')
+    case 6:
+      return tr('freeSite.billingCycleShort.semiAnnual')
+    case 12:
+      return tr('freeSite.billingCycleShort.annual')
+    default:
+      return months ? tr('freeSite.billingCycleShort.custom', { months }) : ''
+  }
+}
+
+const freeSiteCopyKeys = [
+  'finalPrice',
+  'renewPrice',
+  'billingCycle',
+  'needPay',
+  'originalPrice',
+  'oldDailyPrice',
+  'newDailyPrice',
+  'remainingValue',
+  'newPlanCost',
+  'currentBalance',
+  'balanceAfterRenew',
+  'walletBalanceTab',
+  'walletLogsTab',
+  'walletCurrentBalance',
+  'walletDescription',
+  'walletLogsDescription',
+  'walletTotalRecharge',
+  'walletTotalConsume',
+  'walletDestroyedValue',
+  'dashboardNewInstance',
+  'dashboardCreateInstance',
+  'dashboardCreateFirst',
+  'dashboardUserBalance',
+  'dashboardBalanceValue',
+  'dashboardNewContainer',
+  'instanceCreate',
+  'instanceCreateFirst',
+  'instanceBatchRenewTitle',
+  'instanceBatchRenewDescription',
+  'instanceBatchTotalAmount',
+  'instanceBatchBalanceAfter',
+  'instanceBatchCurrentBalance',
+  'instanceBatchRenewAction',
+  'moneyJustForShow',
+  'marketPriceFree',
+  'marketPlanCount',
+  'marketCreateNow',
+  'marketLoginToOrder',
+  'marketSelectedPlanTitle',
+  'marketCycleMonthly',
+  'marketMonthlyPrice',
+  'createOrderSummary',
+  'createPromoCode',
+  'createPromoPlaceholder',
+  'createPromoHostedDisabled',
+  'createPromoValid',
+  'createPromoUsing',
+  'createPromoBenefit',
+  'createCommissionEstimate',
+  'createPlanFee',
+  'createMonthlyEquivalent',
+  'mailPrice',
+  'mailCheckoutTitle',
+  'mailBillingCycle',
+  'mailCheckoutAmount',
+  'mailCheckoutConfirm',
+  'mailBalanceRequired',
+] as const
+
+type FreeSiteCopyKey = typeof freeSiteCopyKeys[number]
+type FreeSiteCopy = Record<FreeSiteCopyKey, string>
+
+export const freeSiteCopy = {} as FreeSiteCopy
+
+for (const key of freeSiteCopyKeys) {
+  Object.defineProperty(freeSiteCopy, key, {
+    enumerable: true,
+    get: () => tr(`freeSite.copy.${key}`)
+  })
+}
diff --git a/client/src/utils/inboxHelper.ts b/client/src/utils/inboxHelper.ts
new file mode 100644
index 0000000..56b8467
--- /dev/null
+++ b/client/src/utils/inboxHelper.ts
@@ -0,0 +1,261 @@
+/**
+ * 站内信辅助工具
+ * 提供消息类型映射、分类、跳转逻辑
+ */
+
+import type { InboxMessage } from '@/types/api'
+
+/**
+ * 消息类别
+ */
+export type MessageCategory = 
+  | 'instance'   // 实例相关
+  | 'snapshot'   // 快照相关
+  | 'social'     // 社交互动（好友）
+  | 'transfer'   // 实例转移
+  | 'package'    // 套餐共享
+  | 'security'   // 安全账户
+  | 'quota'      // 配额资源
+  | 'ticket'     // 工单相关
+  | 'system'     // 系统通知
+
+/**
+ * 消息类别配置
+ */
+interface CategoryConfig {
+  label: string      // i18n key
+  icon: string       // 图标名称（用于前端渲染）
+  color: string      // 颜色类名
+}
+
+/**
+ * 事件类型到类别的映射
+ */
+const EVENT_TYPE_CATEGORY_MAP: Record<string, MessageCategory> = {
+  // 实例相关
+  instance_created: 'instance',
+  instance_started: 'instance',
+  instance_stopped: 'instance',
+  instance_restarted: 'instance',
+  instance_rebuilt: 'instance',
+  instance_cloned: 'instance',
+  instance_deleted: 'instance',
+  instance_task_failed: 'instance',
+  instance_unexpected_stop: 'instance',
+  
+  // 快照相关
+  snapshot_created: 'snapshot',
+  snapshot_restored: 'snapshot',
+  snapshot_deleted: 'snapshot',
+  snapshot_failed: 'snapshot',
+  auto_snapshot: 'snapshot',
+  auto_snapshot_rotated: 'snapshot',
+  
+  // 历史备份消息归并到实例类，不再单独显示备份分类
+  backup_created: 'instance',
+  backup_failed: 'instance',
+  backup_deleted: 'instance',
+  backup_restored: 'instance',
+  backup_uploaded: 'instance',
+  auto_backup: 'instance',
+  auto_backup_rotated: 'instance',
+  
+  // 社交互动
+  friend_request: 'social',
+  friend_accepted: 'social',
+  friend_rejected: 'social',
+  friend_removed: 'social',
+  
+  // 套餐共享
+  package_shared: 'package',
+  package_share_revoked: 'package',
+  
+  // 实例转移
+  transfer_received: 'transfer',
+  transfer_accepted: 'transfer',
+  transfer_rejected: 'transfer',
+  transfer_cancelled: 'transfer',
+  
+  // 安全账户
+  login_new_device: 'security',
+  password_changed: 'security',
+  '2fa_enabled': 'security',
+  '2fa_disabled': 'security',
+  
+  // 配额资源
+  quota_warning: 'quota',
+  
+  // 工单相关
+  ticket_created: 'ticket',
+  ticket_replied: 'ticket',
+  ticket_status_changed: 'ticket',
+  ticket_closed: 'ticket',
+  
+  // 系统公告
+  system_announcement: 'system',
+  host_announcement: 'system',
+  admin_message: 'system',
+  host_message: 'system',
+
+  // AFF 推荐计划
+  aff_convert_approved: 'system',
+  aff_convert_rejected: 'system'
+}
+
+/**
+ * 类别配置
+ */
+const CATEGORY_CONFIG: Record<MessageCategory, CategoryConfig> = {
+  instance: {
+    label: 'inbox.categories.instance',
+    icon: 'server',
+    color: 'blue'
+  },
+  snapshot: {
+    label: 'inbox.categories.snapshot',
+    icon: 'camera',
+    color: 'purple'
+  },
+  social: {
+    label: 'inbox.categories.social',
+    icon: 'users',
+    color: 'pink'
+  },
+  transfer: {
+    label: 'inbox.categories.transfer',
+    icon: 'arrow-right',
+    color: 'orange'
+  },
+  package: {
+    label: 'inbox.categories.package',
+    icon: 'gift',
+    color: 'cyan'
+  },
+  security: {
+    label: 'inbox.categories.security',
+    icon: 'shield',
+    color: 'red'
+  },
+  quota: {
+    label: 'inbox.categories.quota',
+    icon: 'chart',
+    color: 'yellow'
+  },
+  ticket: {
+    label: 'inbox.categories.ticket',
+    icon: 'ticket',
+    color: 'indigo'
+  },
+  system: {
+    label: 'inbox.categories.system',
+    icon: 'bell',
+    color: 'gray'
+  }
+}
+
+/**
+ * 获取消息类别
+ */
+export function getMessageCategory(eventType: string): MessageCategory {
+  return EVENT_TYPE_CATEGORY_MAP[eventType] || 'system'
+}
+
+/**
+ * 获取类别配置
+ */
+export function getCategoryConfig(category: MessageCategory): CategoryConfig {
+  return CATEGORY_CONFIG[category]
+}
+
+/**
+ * 获取所有类别列表
+ */
+export function getAllCategories(): { key: MessageCategory; config: CategoryConfig }[] {
+  return Object.entries(CATEGORY_CONFIG).map(([key, config]) => ({
+    key: key as MessageCategory,
+    config
+  }))
+}
+
+/**
+ * 获取类别对应的 CSS 颜色类
+ */
+export function getCategoryColorClass(category: MessageCategory, isDark: boolean): string {
+  const colorMap: Record<string, { light: string; dark: string }> = {
+    blue: { light: 'bg-blue-100 text-blue-700', dark: 'bg-blue-900/50 text-blue-300' },
+    purple: { light: 'bg-purple-100 text-purple-700', dark: 'bg-purple-900/50 text-purple-300' },
+    green: { light: 'bg-green-100 text-green-700', dark: 'bg-green-900/50 text-green-300' },
+    pink: { light: 'bg-pink-100 text-pink-700', dark: 'bg-pink-900/50 text-pink-300' },
+    orange: { light: 'bg-orange-100 text-orange-700', dark: 'bg-orange-900/50 text-orange-300' },
+    cyan: { light: 'bg-cyan-100 text-cyan-700', dark: 'bg-cyan-900/50 text-cyan-300' },
+    red: { light: 'bg-red-100 text-red-700', dark: 'bg-red-900/50 text-red-300' },
+    yellow: { light: 'bg-yellow-100 text-yellow-700', dark: 'bg-yellow-900/50 text-yellow-300' },
+    indigo: { light: 'bg-indigo-100 text-indigo-700', dark: 'bg-indigo-900/50 text-indigo-300' },
+    gray: { light: 'bg-gray-100 text-gray-700', dark: 'bg-gray-700 text-gray-300' }
+  }
+  
+  const config = getCategoryConfig(category)
+  const colors = colorMap[config.color] || colorMap.gray
+  return isDark ? colors.dark : colors.light
+}
+
+/**
+ * 根据消息数据生成跳转路由
+ * 返回 null 表示不支持跳转
+ */
+export function getMessageRoute(message: InboxMessage): string | null {
+  const { eventType, data } = message
+  
+  if (!data) return null
+  
+  const category = getMessageCategory(eventType)
+  
+  switch (category) {
+    case 'instance':
+    case 'snapshot':
+      // 实例/快照相关 - 跳转到实例详情
+      if (data.instanceId) {
+        return `/instances/${data.instanceId}`
+      }
+      break
+      
+    case 'social':
+      // 好友功能已禁用，不进行跳转
+      return null
+      
+    case 'transfer':
+      // 转移相关 - 跳转到转移页面
+      return '/transfers'
+      
+    case 'package':
+      // 套餐共享 - 跳转到套餐页面
+      if (data.packageId) {
+        return `/resources/packages/${data.packageId}`
+      }
+      return '/resources/packages'
+      
+    case 'security':
+      // 安全相关 - 跳转到个人设置
+      return '/profile'
+      
+    case 'quota':
+      // 配额相关 - 跳转到概览
+      return '/dashboard'
+      
+    case 'ticket':
+      // 工单相关 - 跳转到工单页面
+      if (data.ticketId) {
+        return `/tickets?id=${data.ticketId}`
+      }
+      return '/tickets'
+  }
+  
+  return null
+}
+
+/**
+ * 判断消息是否支持跳转
+ */
+export function canNavigate(message: InboxMessage): boolean {
+  return getMessageRoute(message) !== null
+}
diff --git a/client/src/utils/markdown.ts b/client/src/utils/markdown.ts
new file mode 100644
index 0000000..d64c98e
--- /dev/null
+++ b/client/src/utils/markdown.ts
@@ -0,0 +1,587 @@
+import { marked, Renderer } from 'marked'
+
+// 自定义 Alert 颜色配置
+const alertColors: Record<string, { bg: string; bgLight: string; border: string; text: string; textLight: string; icon: string }> = {
+  info: {
+    bg: 'bg-blue-900/30',
+    bgLight: 'bg-blue-50',
+    border: 'border-blue-500/50',
+    text: 'text-blue-400',
+    textLight: 'text-blue-600',
+    icon: '<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>'
+  },
+  success: {
+    bg: 'bg-green-900/30',
+    bgLight: 'bg-green-50',
+    border: 'border-green-500/50',
+    text: 'text-green-400',
+    textLight: 'text-green-600',
+    icon: '<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>'
+  },
+  warning: {
+    bg: 'bg-yellow-900/30',
+    bgLight: 'bg-yellow-50',
+    border: 'border-yellow-500/50',
+    text: 'text-yellow-400',
+    textLight: 'text-yellow-600',
+    icon: '<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>'
+  },
+  danger: {
+    bg: 'bg-red-900/30',
+    bgLight: 'bg-red-50',
+    border: 'border-red-500/50',
+    text: 'text-red-400',
+    textLight: 'text-red-600',
+    icon: '<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
+  },
+  note: {
+    bg: 'bg-gray-800/50',
+    bgLight: 'bg-gray-100',
+    border: 'border-gray-500/50',
+    text: 'text-gray-400',
+    textLight: 'text-gray-600',
+    icon: '<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"/></svg>'
+  }
+}
+
+// 颜色别名映射
+const colorAliases: Record<string, string> = {
+  blue: 'info',
+  green: 'success',
+  yellow: 'warning',
+  red: 'danger',
+  gray: 'note',
+  grey: 'note'
+}
+
+/**
+ * 解析自定义 Alert 语法: ?{颜色}[内容]
+ * 支持的颜色: info/blue, success/green, warning/yellow, danger/red, note/gray
+ */
+function parseCustomAlerts(content: string): string {
+  // 匹配 ?{颜色}[内容] 格式，内容可以跨行
+  const alertRegex = /\?\{(\w+)\}\[([\s\S]*?)\]/g
+
+  return content.replace(alertRegex, (_, color: string, text: string) => {
+    const normalizedColor = colorAliases[color.toLowerCase()] || color.toLowerCase()
+    const colorConfig = alertColors[normalizedColor] || alertColors.info
+
+    // 处理内容中的换行
+    const processedText = text.trim().replace(/\n/g, '<br>')
+
+    return `<div class="md-alert md-alert-${normalizedColor} dark:${colorConfig.bg} ${colorConfig.bgLight} border ${colorConfig.border} rounded-lg p-4 my-4 flex items-start gap-3">
+      <span class="dark:${colorConfig.text} ${colorConfig.textLight}">${colorConfig.icon}</span>
+      <div class="flex-1 dark:${colorConfig.text} ${colorConfig.textLight} text-sm leading-relaxed">${processedText}</div>
+    </div>`
+  })
+}
+
+
+/**
+ * 创建自定义 marked 渲染器
+ */
+function createCustomRenderer(): Renderer {
+  const renderer = new Renderer()
+
+  // 自定义链接渲染 - 外部链接新窗口打开
+  renderer.link = ({ href, title, text }) => {
+    const isExternal = href?.startsWith('http://') || href?.startsWith('https://')
+    const titleAttr = title ? ` title="${title}"` : ''
+    const targetAttr = isExternal ? ' target="_blank" rel="noopener noreferrer"' : ''
+    const externalIcon = isExternal
+      ? ' <svg class="inline-block w-3.5 h-3.5 ml-0.5 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>'
+      : ''
+    return `<a href="${href}"${titleAttr}${targetAttr}>${text}${externalIcon}</a>`
+  }
+
+  // 自定义图片渲染 - 支持图片标题和懒加载
+  renderer.image = ({ href, title, text }) => {
+    const titleAttr = title ? ` title="${title}"` : ''
+    const altAttr = text ? ` alt="${text}"` : ''
+    const figcaption = title ? `<figcaption class="text-center text-sm text-themed-muted mt-2">${title}</figcaption>` : ''
+    return `<figure class="my-4">
+      <img src="${href}"${altAttr}${titleAttr} loading="lazy" class="rounded-lg max-w-full mx-auto" />
+      ${figcaption}
+    </figure>`
+  }
+
+  // 自定义代码块渲染
+  renderer.code = ({ text, lang }) => {
+    const langLabel = lang ? `<span class="absolute top-2 right-2 text-xs text-themed-muted opacity-60">${lang}</span>` : ''
+    const escapedText = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+    return `<div class="relative group">
+      <pre><code class="language-${lang || 'plaintext'}">${escapedText}</code></pre>
+      ${langLabel}
+    </div>`
+  }
+
+  // 自定义表格渲染 - 添加响应式包装
+  renderer.table = (token: any) => {
+    const headerRows = token.header.map((row: any[]) =>
+      `<tr>${row.map((cell: any) => `<th>${cell.text}</th>`).join('')}</tr>`
+    ).join('')
+    const bodyRows = token.rows.map((row: any[]) =>
+      `<tr>${row.map((cell: any) => `<td>${cell.text}</td>`).join('')}</tr>`
+    ).join('')
+    return `<div class="overflow-x-auto my-4">
+      <table class="min-w-full">
+        <thead>${headerRows}</thead>
+        <tbody>${bodyRows}</tbody>
+      </table>
+    </div>`
+  }
+
+  // 自定义引用块渲染
+  renderer.blockquote = ({ text }) => {
+    return `<blockquote class="border-l-4 border-accent/50 pl-4 my-4 italic text-themed-secondary">${text}</blockquote>`
+  }
+
+  // 自定义水平线
+  renderer.hr = () => {
+    return '<hr class="my-8 border-t border-themed" />'
+  }
+
+  // 自定义复选框列表项
+  renderer.listitem = ({ text, task, checked }) => {
+    if (task) {
+      const checkboxClass = checked
+        ? 'text-green-500'
+        : 'text-themed-muted'
+      const checkIcon = checked
+        ? '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>'
+        : '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>'
+      return `<li class="flex items-start gap-2 ${checkboxClass}"><span class="mt-0.5 flex-shrink-0">${checkIcon}</span><span>${text}</span></li>`
+    }
+    return `<li>${text}</li>`
+  }
+
+  return renderer
+}
+
+/**
+ * 配置 marked 选项
+ */
+function configureMarked(): void {
+  marked.setOptions({
+    breaks: true,
+    gfm: true,
+    renderer: createCustomRenderer()
+  } as any)
+}
+
+// 初始化配置
+configureMarked()
+
+/**
+ * 解析 Markdown 内容为 HTML
+ * @param content Markdown 内容
+ * @returns 解析后的 HTML
+ */
+export function parseMarkdown(content: string): string {
+  if (!content) return ''
+
+  // 先处理自定义 Alert 语法
+  const processedContent = parseCustomAlerts(content)
+
+  // 使用 marked 解析
+  return marked(processedContent) as string
+}
+
+/**
+ * 获取 Markdown 样式类名
+ * 用于在组件中应用样式
+ */
+export const markdownStyles = `
+/* ============ Markdown 基础样式 ============ */
+.markdown-body {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* 标题 */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  color: var(--text-primary);
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.markdown-body h1 { font-size: 1.75em; }
+.markdown-body h2 { 
+  font-size: 1.5em; 
+  border-bottom: 1px solid var(--border-color); 
+  padding-bottom: 0.3em; 
+}
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1.1em; }
+.markdown-body h5 { font-size: 1em; }
+.markdown-body h6 { font-size: 0.9em; color: var(--text-secondary); }
+
+/* 段落 */
+.markdown-body p {
+  margin: 1em 0;
+}
+
+/* 链接 */
+.markdown-body a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+/* 图片 */
+.markdown-body img {
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+.markdown-body figure {
+  margin: 1.5em 0;
+}
+
+/* 列表 */
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.5em;
+  margin: 1em 0;
+}
+
+.markdown-body ul {
+  list-style-type: disc;
+}
+
+.markdown-body ol {
+  list-style-type: decimal;
+}
+
+.markdown-body li {
+  margin: 0.5em 0;
+}
+
+.markdown-body li > ul,
+.markdown-body li > ol {
+  margin: 0.25em 0;
+}
+
+/* 任务列表 */
+.markdown-body ul:has(li > span:first-child > svg) {
+  list-style: none;
+  padding-left: 0;
+}
+
+/* 行内代码 */
+.markdown-body code {
+  background: var(--bg-tertiary);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+/* 代码块 */
+.markdown-body pre {
+  background: var(--bg-tertiary);
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1em 0;
+  border: 1px solid var(--border-color);
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+/* 引用块 */
+.markdown-body blockquote {
+  border-left: 4px solid var(--accent);
+  padding-left: 1em;
+  margin: 1em 0;
+  color: var(--text-secondary);
+}
+
+.markdown-body blockquote p {
+  margin: 0.5em 0;
+}
+
+/* 表格 */
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  font-size: 0.9em;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid var(--border-color);
+  padding: 0.6em 1em;
+  text-align: left;
+}
+
+.markdown-body th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.markdown-body tr:hover td {
+  background: var(--bg-secondary);
+}
+
+/* 水平线 */
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: 2em 0;
+}
+
+/* 删除线 */
+.markdown-body del {
+  color: var(--text-tertiary);
+}
+
+/* 强调 */
+.markdown-body strong {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.markdown-body em {
+  font-style: italic;
+}
+
+/* 键盘按键 */
+.markdown-body kbd {
+  display: inline-block;
+  padding: 0.2em 0.4em;
+  font-size: 0.85em;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 0 var(--border-color);
+}
+
+/* ============ 自定义 Alert 样式 ============ */
+.md-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 0.5rem;
+  border-width: 1px;
+}
+
+.md-alert svg {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+.md-alert > div {
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Alert 颜色变体 - 暗色主题 */
+.dark .md-alert-info {
+  background-color: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.dark .md-alert-info svg,
+.dark .md-alert-info > div {
+  color: #60a5fa;
+}
+
+.dark .md-alert-success {
+  background-color: rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.dark .md-alert-success svg,
+.dark .md-alert-success > div {
+  color: #4ade80;
+}
+
+.dark .md-alert-warning {
+  background-color: rgba(234, 179, 8, 0.15);
+  border-color: rgba(234, 179, 8, 0.3);
+}
+.dark .md-alert-warning svg,
+.dark .md-alert-warning > div {
+  color: #facc15;
+}
+
+.dark .md-alert-danger {
+  background-color: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.dark .md-alert-danger svg,
+.dark .md-alert-danger > div {
+  color: #f87171;
+}
+
+.dark .md-alert-note {
+  background-color: rgba(107, 114, 128, 0.15);
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.dark .md-alert-note svg,
+.dark .md-alert-note > div {
+  color: #9ca3af;
+}
+
+/* Alert 颜色变体 - 亮色主题 */
+.light .md-alert-info {
+  background-color: #eff6ff;
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.light .md-alert-info svg,
+.light .md-alert-info > div {
+  color: #2563eb;
+}
+
+.light .md-alert-success {
+  background-color: #f0fdf4;
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.light .md-alert-success svg,
+.light .md-alert-success > div {
+  color: #16a34a;
+}
+
+.light .md-alert-warning {
+  background-color: #fefce8;
+  border-color: rgba(234, 179, 8, 0.3);
+}
+.light .md-alert-warning svg,
+.light .md-alert-warning > div {
+  color: #ca8a04;
+}
+
+.light .md-alert-danger {
+  background-color: #fef2f2;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.light .md-alert-danger svg,
+.light .md-alert-danger > div {
+  color: #dc2626;
+}
+
+.light .md-alert-note {
+  background-color: #f9fafb;
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.light .md-alert-note svg,
+.light .md-alert-note > div {
+  color: #4b5563;
+}
+
+/* ============ 代码高亮主题适配 ============ */
+/* 暗色主题代码高亮 */
+.dark .markdown-body pre {
+  background: #0d1117;
+  border-color: #30363d;
+}
+
+.dark .markdown-body .hljs {
+  color: #c9d1d9;
+  background: transparent;
+}
+
+.dark .markdown-body .hljs-keyword,
+.dark .markdown-body .hljs-selector-tag,
+.dark .markdown-body .hljs-title {
+  color: #ff7b72;
+}
+
+.dark .markdown-body .hljs-string,
+.dark .markdown-body .hljs-attr {
+  color: #a5d6ff;
+}
+
+.dark .markdown-body .hljs-comment {
+  color: #8b949e;
+}
+
+.dark .markdown-body .hljs-number,
+.dark .markdown-body .hljs-literal {
+  color: #79c0ff;
+}
+
+.dark .markdown-body .hljs-function,
+.dark .markdown-body .hljs-built_in {
+  color: #d2a8ff;
+}
+
+.dark .markdown-body .hljs-variable,
+.dark .markdown-body .hljs-template-variable {
+  color: #ffa657;
+}
+
+/* 亮色主题代码高亮 */
+.light .markdown-body pre {
+  background: #f6f8fa;
+  border-color: #d0d7de;
+}
+
+.light .markdown-body .hljs {
+  color: #24292f;
+  background: transparent;
+}
+
+.light .markdown-body .hljs-keyword,
+.light .markdown-body .hljs-selector-tag,
+.light .markdown-body .hljs-title {
+  color: #cf222e;
+}
+
+.light .markdown-body .hljs-string,
+.light .markdown-body .hljs-attr {
+  color: #0a3069;
+}
+
+.light .markdown-body .hljs-comment {
+  color: #6e7781;
+}
+
+.light .markdown-body .hljs-number,
+.light .markdown-body .hljs-literal {
+  color: #0550ae;
+}
+
+.light .markdown-body .hljs-function,
+.light .markdown-body .hljs-built_in {
+  color: #8250df;
+}
+
+.light .markdown-body .hljs-variable,
+.light .markdown-body .hljs-template-variable {
+  color: #953800;
+}
+`
+
+export default parseMarkdown
diff --git a/client/src/utils/publicCatalog.ts b/client/src/utils/publicCatalog.ts
new file mode 100644
index 0000000..8d19b34
--- /dev/null
+++ b/client/src/utils/publicCatalog.ts
@@ -0,0 +1,136 @@
+export type PackageSource = 'official' | 'market' | `zone:${number}`
+export type PackageSourceRequest = {
+  source: 'official' | 'market' | 'zone'
+  zoneId?: number
+}
+
+export interface PublicPackagePlan {
+  id: number
+  name: string
+  description: string | null
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: string
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  setupFee: number
+  slaGuarantee: number | null
+  isSoldOut: boolean
+  monthlyPrice: number
+}
+
+export interface PublicPackage {
+  id: number
+  name: string
+  description: string | null
+  cpu_max: number
+  memory_max: number
+  disk_max: number
+  monthly_traffic_limit: string | null
+  network_mode: string
+  instance_type: string
+  host_ids: number[]
+  privileged: number
+  nested: number
+  sourceType: 'official' | 'market'
+  soldOut: boolean
+  isPaid: boolean
+  plans: PublicPackagePlan[]
+}
+
+export interface PublicRegion {
+  code: string
+  name: string
+  packageIds: number[]
+  hostCount: number
+}
+
+function getQueryString(value: unknown): string | undefined {
+  if (Array.isArray(value)) {
+    return typeof value[0] === 'string' ? value[0] : undefined
+  }
+  return typeof value === 'string' ? value : undefined
+}
+
+export function normalizePackageSourceQuery(value: unknown, zoneIdValue?: unknown): PackageSource {
+  const query = getQueryString(value)
+  if (query === 'market') return 'market'
+  if (query === 'zone') {
+    const zoneId = parsePackageIdQuery(zoneIdValue)
+    return zoneId ? `zone:${zoneId}` : 'official'
+  }
+  if (query?.startsWith('zone:')) {
+    const zoneId = Number(query.slice('zone:'.length))
+    return Number.isInteger(zoneId) && zoneId > 0 ? `zone:${zoneId}` : 'official'
+  }
+  return 'official'
+}
+
+export function toPackageSourceRequest(source: PackageSource): PackageSourceRequest {
+  if (source.startsWith('zone:')) {
+    const zoneId = Number(source.slice('zone:'.length))
+    return { source: 'zone', zoneId }
+  }
+  return { source: source === 'market' ? 'market' : 'official' }
+}
+
+export function parsePackageIdQuery(value: unknown): number | null {
+  const query = getQueryString(value)
+  if (!query) {
+    return null
+  }
+
+  const parsed = Number(query)
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null
+}
+
+export function parseTextQuery(value: unknown): string {
+  return getQueryString(value)?.trim() || ''
+}
+
+export function formatPublicTraffic(bytes: string | null, unlimitedLabel: string): string {
+  if (!bytes || bytes === '0') {
+    return unlimitedLabel
+  }
+
+  const value = BigInt(bytes)
+  const tb = BigInt(1024 * 1024 * 1024 * 1024)
+  const gb = BigInt(1024 * 1024 * 1024)
+
+  if (value >= tb) {
+    return `${(Number(value) / (1024 * 1024 * 1024 * 1024)).toFixed(1)} TB`
+  }
+
+  if (value >= gb) {
+    return `${(Number(value) / (1024 * 1024 * 1024)).toFixed(0)} GB`
+  }
+
+  return `${(Number(value) / (1024 * 1024)).toFixed(0)} MB`
+}
+
+export function formatPublicPrice(cents: number): string {
+  return (cents / 100).toFixed(2)
+}
+
+export function getStartingMonthlyPrice(pkg: Pick<PublicPackage, 'isPaid' | 'plans'>): number | null {
+  if (!pkg.isPaid || pkg.plans.length === 0) {
+    return null
+  }
+
+  const availablePlans = pkg.plans.filter(plan => !plan.isSoldOut)
+  const pricePlans = availablePlans.length > 0 ? availablePlans : pkg.plans
+
+  return pricePlans.reduce((minPrice, plan) => {
+    if (plan.monthlyPrice < minPrice) {
+      return plan.monthlyPrice
+    }
+    return minPrice
+  }, pricePlans[0].monthlyPrice)
+}
diff --git a/client/src/utils/turnstile.ts b/client/src/utils/turnstile.ts
new file mode 100644
index 0000000..e187751
--- /dev/null
+++ b/client/src/utils/turnstile.ts
@@ -0,0 +1,52 @@
+/**
+ * Turnstile 工具函数
+ * 用于在 API 调用前执行隐式验证
+ */
+import { useTurnstile } from '@/composables/useTurnstile'
+import i18n from '@/locales'
+
+// 全局 Turnstile 实例
+let globalTurnstile: ReturnType<typeof useTurnstile> | null = null
+
+/**
+ * 获取全局 Turnstile 实例
+ */
+export function getGlobalTurnstile() {
+    if (!globalTurnstile) {
+        globalTurnstile = useTurnstile()
+    }
+    return globalTurnstile
+}
+
+/**
+ * 执行 Turnstile 验证并返回 token
+ * 如果未启用 Turnstile，返回 undefined
+ */
+export async function getTurnstileToken(_action?: string): Promise<string | undefined> {
+    const turnstile = getGlobalTurnstile()
+
+    if (!turnstile.isEnabled.value) {
+        return undefined
+    }
+
+    try {
+        return await turnstile.execute()
+    } catch (error) {
+        console.error('Turnstile verification failed:', error)
+        throw new Error(i18n.global.t('common.turnstileFailed'))
+    }
+}
+
+/**
+ * 包装 API 调用，自动添加 Turnstile token
+ */
+export async function withTurnstile<T extends Record<string, any>>(
+    data: T,
+    action?: string
+): Promise<T & { turnstileToken?: string }> {
+    const token = await getTurnstileToken(action)
+    return {
+        ...data,
+        turnstileToken: token
+    }
+}
diff --git a/client/src/utils/validation.ts b/client/src/utils/validation.ts
new file mode 100644
index 0000000..93b5c24
--- /dev/null
+++ b/client/src/utils/validation.ts
@@ -0,0 +1,403 @@
+/**
+ * 输入验证工具
+ * 用于前端表单验证，防止危险字符输入
+ */
+import i18n from '@/locales'
+
+type TranslateParams = Record<string, string | number>
+
+function t(key: string, params?: TranslateParams): string {
+    const translate = i18n.global.t as (key: string, params?: TranslateParams) => string
+    return translate(key, params)
+}
+
+function validationField(key: string): string {
+    return t(`validation.fields.${key}`)
+}
+
+function validationMessage(key: string, fieldName: string, params?: TranslateParams): string {
+    return t(`validation.${key}`, { field: fieldName, ...(params || {}) })
+}
+
+/**
+ * 危险字符正则表达式
+ * 禁止: ' " \ / ? ] [ = + . < > ` ; : | ! @ # $ % ^ & * { } ~
+ * 允许: ( ) 空格 , 
+ */
+const DANGEROUS_CHARS_REGEX = /['"\\/?[\]=+.<>`;:|!@#$%^&*{}~]/g
+
+/**
+ * 安全名称正则（只允许字母、数字、连字符、下划线、空格、逗号、圆括号和中文）
+ */
+const SAFE_NAME_REGEX = /^[\u4e00-\u9fa5a-zA-Z0-9\-_ ,()]+$/
+
+/**
+ * 严格名称正则（只允许字母、数字、连字符、下划线，必须以字母开头）
+ */
+const STRICT_NAME_REGEX = /^[a-zA-Z][a-zA-Z0-9\-_]*$/
+
+/**
+ * 验证结果接口
+ */
+export interface ValidationResult {
+    valid: boolean
+    message?: string
+    sanitized?: string
+}
+
+/**
+ * 危险字符列表（用于显示提示）
+ */
+export const DANGEROUS_CHARS_DISPLAY = `' " \\ / ? [ ] = + . < > \` ; : | ! @ # $ % ^ & * { } ~`
+
+/**
+ * 检查字符串是否包含危险字符
+ */
+export function containsDangerousChars(input: string): boolean {
+    return DANGEROUS_CHARS_REGEX.test(input)
+}
+
+/**
+ * 移除危险字符
+ */
+export function removeDangerousChars(input: string): string {
+    return input.replace(DANGEROUS_CHARS_REGEX, '')
+}
+
+/**
+ * 验证通用名称输入（允许中文、字母、数字、连字符、下划线、空格）
+ * 适用于：实例名称、套餐名称、节点组名称等用户可见的名称
+ */
+export function validateName(
+    name: string,
+    fieldName: string = validationField('name'),
+    minLength: number = 1,
+    maxLength: number = 64
+): ValidationResult {
+    if (!name || typeof name !== 'string') {
+        return { valid: false, message: validationMessage('required', fieldName) }
+    }
+
+    const trimmed = name.trim()
+
+    if (trimmed.length < minLength) {
+        return { valid: false, message: validationMessage('minLength', fieldName, { min: minLength }) }
+    }
+
+    if (trimmed.length > maxLength) {
+        return { valid: false, message: validationMessage('maxLength', fieldName, { max: maxLength }) }
+    }
+
+    if (containsDangerousChars(trimmed)) {
+        return { valid: false, message: validationMessage('illegalChars', fieldName) }
+    }
+
+    if (!SAFE_NAME_REGEX.test(trimmed)) {
+        return { valid: false, message: validationMessage('safeNameChars', fieldName) }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证技术标识符（只允许字母、数字、连字符、下划线，必须以字母或数字开头）
+ * 适用于：用户名、实例技术ID、主机名等
+ */
+export function validateIdentifier(
+    input: string,
+    fieldName: string = validationField('identifier'),
+    minLength: number = 2,
+    maxLength: number = 64
+): ValidationResult {
+    if (!input || typeof input !== 'string') {
+        return { valid: false, message: validationMessage('required', fieldName) }
+    }
+
+    const trimmed = input.trim()
+
+    if (trimmed.length < minLength) {
+        return { valid: false, message: validationMessage('minLength', fieldName, { min: minLength }) }
+    }
+
+    if (trimmed.length > maxLength) {
+        return { valid: false, message: validationMessage('maxLength', fieldName, { max: maxLength }) }
+    }
+
+    if (!STRICT_NAME_REGEX.test(trimmed)) {
+        return { valid: false, message: validationMessage('identifierChars', fieldName) }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证通用文本输入（移除危险字符但允许更多内容）
+ * 适用于：描述、备注等长文本
+ */
+export function validateText(
+    text: string,
+    fieldName: string = validationField('content'),
+    maxLength: number = 1000
+): ValidationResult {
+    if (!text || typeof text !== 'string') {
+        return { valid: true, sanitized: '' }
+    }
+
+    if (text.length > maxLength) {
+        return { valid: false, message: validationMessage('maxLength', fieldName, { max: maxLength }) }
+    }
+
+    // 移除危险字符但保留其他内容
+    const sanitized = removeDangerousChars(text).trim()
+
+    return { valid: true, sanitized }
+}
+
+/**
+ * 验证URL格式
+ */
+export function validateUrl(url: string, fieldName: string = 'URL'): ValidationResult {
+    if (!url || typeof url !== 'string') {
+        return { valid: false, message: validationMessage('required', fieldName) }
+    }
+
+    const trimmed = url.trim()
+
+    // 基本URL格式验证
+    try {
+        new URL(trimmed)
+    } catch {
+        return { valid: false, message: validationMessage('invalidFormat', fieldName) }
+    }
+
+    // 只允许 http 和 https 协议
+    if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
+        return { valid: false, message: validationMessage('urlProtocol', fieldName) }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证主机地址（IPv4、IPv6 或域名），适用于 Incus API 连接地址
+ */
+export function validateHostAddress(input: string, fieldName: string = validationField('serverAddress')): ValidationResult {
+    if (!input || typeof input !== 'string') {
+        return { valid: false, message: validationMessage('required', fieldName) }
+    }
+    const trimmed = input.trim()
+    const normalized = normalizeHostAddress(input)
+    if (trimmed.length === 0 || normalized.length === 0) { return { valid: false, message: validationMessage('required', fieldName) } }
+    if (normalized.length > 253) { return { valid: false, message: validationMessage('maxLength', fieldName, { max: 253 }) } }
+    // IPv4
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+    if (ipv4Regex.test(normalized)) { return { valid: true, sanitized: normalized } }
+    if (isValidIpv6Format(normalized)) { return { valid: true, sanitized: normalized } }
+    // 域名
+    const domainRegex = /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$|^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/
+    if (domainRegex.test(normalized)) {
+        const labels = normalized.split('.')
+        for (const label of labels) {
+            if (label.length > 63) { return { valid: false, message: validationMessage('invalidFormat', fieldName) } }
+        }
+        return { valid: true, sanitized: normalized }
+    }
+    return { valid: false, message: validationMessage('hostAddressInvalid', fieldName) }
+}
+
+/**
+ * 验证IP地址格式（仅支持 IPv4 / IPv6，不支持域名）
+ */
+export function validateIpAddress(ip: string, fieldName: string = validationField('ipAddress')): ValidationResult {
+    if (!ip || typeof ip !== 'string') {
+        return { valid: false, message: validationMessage('required', fieldName) }
+    }
+
+    const normalized = normalizeHostAddress(ip)
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+
+    if (ipv4Regex.test(normalized) || isValidIpv6Format(normalized)) {
+        return { valid: true, sanitized: normalized }
+    }
+
+    return { valid: false, message: validationMessage('ipAddressInvalid', fieldName) }
+}
+
+/**
+ * 验证IPv4地址格式（仅支持IPv4，不支持域名）
+ * 适用于：NAT 网卡 IP
+ */
+export function validateIpv4(input: string, fieldName: string = validationField('ipAddress')): ValidationResult {
+    if (!input || typeof input !== 'string') {
+        return { valid: false, message: validationMessage('required', fieldName) }
+    }
+
+    const trimmed = input.trim()
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+    if (ipv4Regex.test(trimmed)) {
+        return { valid: true, sanitized: trimmed }
+    }
+
+    return { valid: false, message: validationMessage('ipv4Invalid', fieldName) }
+}
+
+/**
+ * 验证主机地址格式
+ * 适用于：连接地址（支持 IPv4、IPv6 或域名）
+ */
+export function validateIpOrDomain(input: string, fieldName: string = validationField('ipOrDomain')): ValidationResult {
+    return validateHostAddress(input, fieldName)
+}
+
+/**
+ * 实时输入过滤器 - 用于 v-model 绑定时实时过滤危险字符
+ */
+export function filterDangerousInput(event: Event): void {
+    const input = event.target as HTMLInputElement
+    if (input && input.value) {
+        const filtered = removeDangerousChars(input.value)
+        if (filtered !== input.value) {
+            input.value = filtered
+            input.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+    }
+}
+
+/**
+ * 创建输入验证指令的处理函数
+ */
+export function createInputValidator(type: 'name' | 'identifier' | 'text' = 'name') {
+    return (el: HTMLInputElement) => {
+        el.addEventListener('input', () => {
+            const value = el.value
+            let result: ValidationResult
+
+            switch (type) {
+                case 'identifier':
+                    result = validateIdentifier(value, '', 0, 1000)
+                    break
+                case 'text':
+                    result = validateText(value, '', 10000)
+                    break
+                default:
+                    result = validateName(value, '', 0, 1000)
+            }
+
+            if (!result.valid && result.sanitized !== undefined) {
+                el.value = result.sanitized
+                el.dispatchEvent(new Event('input', { bubbles: true }))
+            }
+        })
+    }
+}
+
+/**
+ * 验证重定向 URL 是否安全（防止开放重定向漏洞）
+ */
+export function isValidRedirectUrl(url: string | undefined | null): boolean {
+    if (!url || typeof url !== 'string') {
+        return false
+    }
+
+    const trimmed = url.trim()
+
+    if (trimmed.length === 0) {
+        return false
+    }
+
+    if (!trimmed.startsWith('/')) {
+        return false
+    }
+
+    if (trimmed.startsWith('//')) {
+        return false
+    }
+
+    const lowerUrl = trimmed.toLowerCase()
+    if (lowerUrl.includes('javascript:') || lowerUrl.includes('data:') || lowerUrl.includes('vbscript:')) {
+        return false
+    }
+
+    if (/[\r\n\t]/.test(trimmed)) {
+        return false
+    }
+
+    if (/%0[dD]|%0[aA]/.test(trimmed)) {
+        return false
+    }
+
+    return true
+}
+
+/**
+ * 获取安全的重定向 URL
+ */
+export function getSafeRedirectUrl(url: string | undefined | null, defaultUrl: string = '/'): string {
+    if (isValidRedirectUrl(url)) {
+        return url!.trim()
+    }
+    return defaultUrl
+}
+
+/**
+ * 验证 IPv6 地址格式是否有效
+ */
+export function isValidIpv6Format(address: string): boolean {
+    if (!address || typeof address !== 'string') {
+        return false
+    }
+    const normalized = normalizeHostAddress(address)
+    if (!normalized || !normalized.includes(':') || normalized.includes('/')) {
+        return false
+    }
+
+    try {
+        new URL(`http://[${normalized}]/`)
+        return true
+    } catch {
+        return false
+    }
+}
+
+/**
+ * 标准化主机地址输入，允许用户直接输入带方括号的 IPv6 地址
+ */
+export function normalizeHostAddress(input: string): string {
+    const trimmed = input.trim()
+
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+        const inner = trimmed.slice(1, -1).trim()
+        if (inner.includes(':')) {
+            return inner
+        }
+    }
+
+    return trimmed
+}
+
+/**
+ * 判断主机地址是否为 IPv6
+ */
+export function isIpv6HostAddress(address: string): boolean {
+    return isValidIpv6Format(normalizeHostAddress(address))
+}
+
+/**
+ * 根据节点连接地址和端口拼接 Incus API URL
+ */
+export function buildHostApiUrl(address: string, port: number): string {
+    const normalized = normalizeHostAddress(address)
+    const host = isIpv6HostAddress(normalized) ? `[${normalized}]` : normalized
+    return `https://${host}:${port}`
+}
+
+/**
+ * 从节点 URL 中提取连接地址
+ */
+export function extractHostAddressFromUrl(url: string): string {
+    try {
+        return normalizeHostAddress(new URL(url).hostname)
+    } catch {
+        return ''
+    }
+}
diff --git a/client/src/utils/vipBadge.ts b/client/src/utils/vipBadge.ts
new file mode 100644
index 0000000..3e3e295
--- /dev/null
+++ b/client/src/utils/vipBadge.ts
@@ -0,0 +1,56 @@
+export interface VipBadgeStyle {
+  backgroundColor: string
+  textColor: string
+}
+
+const HEX_COLOR_RE = /^#[0-9a-fA-F]{6}$/
+
+const DEFAULT_VIP_BADGE_STYLES: VipBadgeStyle[] = [
+  { backgroundColor: '#FEF3C7', textColor: '#92400E' },
+  { backgroundColor: '#D1FAE5', textColor: '#047857' },
+  { backgroundColor: '#DBEAFE', textColor: '#1D4ED8' },
+  { backgroundColor: '#EDE9FE', textColor: '#6D28D9' },
+  { backgroundColor: '#FFEDD5', textColor: '#C2410C' },
+  { backgroundColor: '#FCE7F3', textColor: '#BE185D' },
+  { backgroundColor: '#FFE4E6', textColor: '#BE123C' },
+  { backgroundColor: '#CFFAFE', textColor: '#0E7490' },
+  { backgroundColor: '#FAE8FF', textColor: '#A21CAF' },
+  { backgroundColor: '#FEF9C3', textColor: '#A16207' }
+]
+
+function normalizeLevel(level: unknown): number {
+  const parsed = Number(level)
+  return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : 1
+}
+
+function normalizeHexColor(value: unknown, fallback: string): string {
+  return typeof value === 'string' && HEX_COLOR_RE.test(value) ? value : fallback
+}
+
+export function getDefaultVipBadgeStyle(level: unknown): VipBadgeStyle {
+  const normalized = normalizeLevel(level)
+  const style = DEFAULT_VIP_BADGE_STYLES[(normalized - 1) % DEFAULT_VIP_BADGE_STYLES.length]
+  return { ...style }
+}
+
+export function normalizeVipBadgeStyle(style: unknown, level: unknown): VipBadgeStyle {
+  const fallback = getDefaultVipBadgeStyle(level)
+  if (!style || typeof style !== 'object' || Array.isArray(style)) {
+    return fallback
+  }
+
+  const record = style as Record<string, unknown>
+  return {
+    backgroundColor: normalizeHexColor(record.backgroundColor, fallback.backgroundColor),
+    textColor: normalizeHexColor(record.textColor, fallback.textColor)
+  }
+}
+
+export function getVipBadgeInlineStyle(style: VipBadgeStyle | null | undefined): Record<string, string> | undefined {
+  if (!style) return undefined
+  return {
+    backgroundColor: style.backgroundColor,
+    color: style.textColor,
+    borderColor: style.backgroundColor
+  }
+}
diff --git a/client/src/views/DashboardView.vue b/client/src/views/DashboardView.vue
new file mode 100644
index 0000000..45463f9
--- /dev/null
+++ b/client/src/views/DashboardView.vue
@@ -0,0 +1,799 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import api, { type VipLevelProgress, type VipProgressCondition, type VipProgressMetric } from '@/api'
+import Skeleton from '@/components/Skeleton.vue'
+import { formatMemory, formatDisk, getStatusInfo } from '@/utils/formatters'
+import type { Instance, UserBalance } from '@/types/api'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import FlagIcon from '@/components/FlagIcon.vue'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+import { getRandomFunnyQuote } from '@/data/funnyQuotes'
+import { freeSiteCopy } from '@/utils/freeSiteFun'
+import { getVipBadgeInlineStyle, normalizeVipBadgeStyle, type VipBadgeStyle } from '@/utils/vipBadge'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'DashboardView' })
+
+// 遮蔽 IPv4 地址后两位，例如：1.2.3.4 -> 1.2.*.*
+function maskIpv4(ip: string | null | undefined): string | null {
+  if (!ip) return null
+  const parts = ip.split('.')
+  if (parts.length === 4) {
+    return `${parts[0]}.${parts[1]}.*.*`
+  }
+  return ip
+}
+
+function isIpv4Address(ip: string | null | undefined): boolean {
+  if (!ip) return false
+  return /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip)
+}
+
+// 获取显示的IP地址：有NAT的模式显示NAT公网IP，纯IPv6模式显示IPv6，其他显示内网IPv4
+function getDisplayIp(instance: Instance): string | null {
+  const networkMode = instance.networkMode || instance.network_mode
+  // 有 NAT 端口映射的模式：显示 NAT 公网 IP
+  const hasNat = networkMode === 'nat' || networkMode === 'nat_ipv6' || networkMode === 'nat_ipv6_nat'
+  if (hasNat) {
+    const natPublicIp = instance.natPublicIp || instance.host?.nat_public_ip
+    if (isIpv4Address(natPublicIp)) {
+      return maskIpv4(natPublicIp)
+    }
+    if (networkMode === 'nat_ipv6' && instance.ipv6) {
+      return instance.ipv6
+    }
+    return maskIpv4(instance.ipv4)
+  }
+  // 纯 IPv6 模式：优先显示独立 IPv6
+  if (networkMode === 'ipv6_only' && instance.ipv6) {
+    return instance.ipv6
+  }
+  return maskIpv4(instance.ipv4)
+}
+
+// 从镜像名称提取发行版标识（用于 DistroIcon 组件）
+function getDistroFromName(name: string): string {
+  const lowerName = (name || '').toLowerCase()
+  const distros = ['almalinux', 'alma', 'alpine', 'arch', 'centos', 'debian', 'fedora', 'gentoo', 'kali', 'mint', 'opensuse', 'suse', 'oracle', 'redhat', 'rhel', 'rockylinux', 'rocky', 'ubuntu', 'void']
+  for (const distro of distros) {
+    if (lowerName.includes(distro)) return distro
+  }
+  return 'linux'
+}
+
+// 获取付费实例的图标类型（根据节点名称判断）
+// 返回 'pro' | 'prime' | 'peer' | null
+function getPaidIconType(instance: Instance): 'pro' | 'prime' | 'peer' | null {
+  // 只有付费实例才显示付费图标
+  if (!instance.packagePlanId) return null
+  
+  // 如果节点名称以 PEER 开头（不区分大小写），则是托管实例，显示 peer 图标
+  const hostName = instance.host?.name || ''
+  if (/^PEER\d/i.test(hostName)) {
+    return 'peer'
+  }
+  
+  // 根据实例类型判断：虚拟机显示 prime，容器显示 pro
+  return instance.instanceType === 'vm' ? 'prime' : 'pro'
+}
+
+// 格式化镜像名称：优先使用 imageName，否则去掉 images: 前缀
+function formatImageName(image: string, imageName?: string | null): string {
+  if (imageName) return imageName
+  return image?.replace(/^images:/, '') || ''
+}
+
+function getInstanceTypeLabel(instance: Instance): string {
+  const key = `instance.instanceType.${instance.instanceType === 'vm' ? 'vm' : 'container'}`
+  const translated = t(key)
+  return translated === key ? (instance.instanceType === 'vm' ? 'KVM' : 'LXC') : translated
+}
+
+function getHostName(instance: Instance): string {
+  return instance.host?.name || t('dashboard.unknownHost')
+}
+
+function getStatusKey(instance: Instance): string {
+  return instance.status?.toLowerCase() || 'unknown'
+}
+
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+void configStore.loadPublicConfig()
+
+const footerTelegramLink = computed(() => {
+  const link = configStore.footerTelegramLink?.trim()
+  return link || null
+})
+
+// 随机骚话（页面加载时固定，不随刷新变化）
+const funnyQuote = ref('')
+
+function getTimeGreeting(): string {
+  const hour = new Date().getHours()
+  if (hour < 12) return t('dashboard.greeting.morning')
+  if (hour < 18) return t('dashboard.greeting.afternoon')
+  return t('dashboard.greeting.evening')
+}
+
+const instances = ref<Instance[]>([])
+const balanceOverview = ref<UserBalance>({
+  balance: 0,
+  frozen: 0,
+  totalRecharge: 0,
+  totalConsume: 0
+})
+const userVipLevel = ref(0)
+const userVipBadgeStyle = ref<VipBadgeStyle | null>(null)
+const userVipProgress = ref<VipLevelProgress | null>(null)
+const userPoints = ref(0)
+const loading = ref(true)
+
+let refreshInterval: ReturnType<typeof setInterval> | null = null
+
+onMounted(async () => {
+  // 初始化随机骚话
+  funnyQuote.value = getRandomFunnyQuote(locale.value)
+  await loadData()
+  refreshInterval = setInterval(loadData, 15000)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+})
+
+// 当组件被 KeepAlive 停用时，暂停定时器
+onDeactivated(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+})
+
+// 当组件从 KeepAlive 缓存中激活时，恢复定时器并刷新数据
+onActivated(async () => {
+  // 恢复定时刷新
+  if (!refreshInterval) {
+    refreshInterval = setInterval(loadData, 15000)
+  }
+  // 立即刷新数据以确保最新
+  await loadData()
+})
+
+async function loadData(): Promise<void> {
+  try {
+    // 如果用户未认证，停止定时刷新
+    if (!authStore.isAuthenticated) {
+      if (refreshInterval) {
+        clearInterval(refreshInterval)
+        refreshInterval = null
+      }
+      return
+    }
+    
+    const [instancesRes, meRes, balanceRes, vipRes, pointsRes] = await Promise.all([
+      api.instances.list({ pageSize: 1000 }),  // 获取所有实例以确保统计准确
+      api.auth.me(),
+      api.billing.getUserBalance().catch(() => null),
+      api.vipLevels.getMyOverview().catch(() => null),
+      api.entertainment.getPoints().catch(() => null)
+    ])
+    const res = instancesRes as { instances?: Instance[] }
+    instances.value = res.instances || []
+    if ((meRes as { user?: any }).user) {
+      authStore.user = (meRes as { user: any }).user
+    }
+    if (balanceRes?.balance) {
+      balanceOverview.value = balanceRes.balance
+    }
+    userVipLevel.value = normalizeVipLevel(vipRes?.userVipLevel)
+    userVipBadgeStyle.value = userVipLevel.value > 0
+      ? normalizeVipBadgeStyle(vipRes?.userVipBadgeStyle, userVipLevel.value)
+      : null
+    userVipProgress.value = vipRes?.userVipProgress || null
+    userPoints.value = Number(pointsRes?.points || 0)
+  } catch (error: any) {
+    console.error('Failed to load dashboard:', error)
+    // 如果是认证错误（401），停止定时刷新
+    if (error?.response?.status === 401 || error?.code === 'UNAUTHORIZED') {
+      if (refreshInterval) {
+        clearInterval(refreshInterval)
+        refreshInterval = null
+      }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const stats = computed(() => {
+  const all = instances.value
+  // 后端返回的状态值可能是首字母大写（Running, Stopped）或小写（running, stopped）
+  // 使用 toLowerCase() 进行大小写不敏感的比较
+  return {
+    total: all.length,  // 已获取全部实例，直接使用数组长度
+    running: all.filter(i => getStatusKey(i) === 'running').length,
+    stopped: all.filter(i => getStatusKey(i) === 'stopped').length,
+    creating: all.filter(i => getStatusKey(i) === 'creating').length
+  }
+})
+
+const recentInstances = computed(() => instances.value.slice(0, 5))
+
+const statusOverviewItems = computed(() => [
+  {
+    key: 'running',
+    label: t('dashboard.runningInstances'),
+    value: stats.value.running,
+    className: themeStore.isDark ? 'bg-emerald-500/12 text-emerald-300' : 'bg-emerald-50 text-emerald-700'
+  },
+  {
+    key: 'stopped',
+    label: t('dashboard.stoppedInstances'),
+    value: stats.value.stopped,
+    className: themeStore.isDark ? 'bg-slate-500/12 text-slate-300' : 'bg-slate-100 text-slate-700'
+  }
+])
+
+const instanceTypeStats = computed(() => {
+  const vm = instances.value.filter(instance => instance.instanceType === 'vm').length
+  return {
+    vm,
+    container: Math.max(instances.value.length - vm, 0)
+  }
+})
+
+const balanceSummaryItems = computed(() => [
+  {
+    label: t('dashboard.totalRecharge'),
+    value: formatCurrency(balanceOverview.value.totalRecharge || 0)
+  },
+  {
+    label: t('dashboard.totalConsume'),
+    value: formatCurrency(balanceOverview.value.totalConsume || 0)
+  },
+  {
+    label: t('dashboard.userPoints'),
+    value: formatPoints(userPoints.value)
+  }
+])
+
+const accountPanelHint = computed(() => t('dashboard.walletHint'))
+
+const memberBadgeStyle = computed(() => userVipLevel.value > 0 ? getVipBadgeInlineStyle(userVipBadgeStyle.value) : undefined)
+
+const memberBadgeClass = computed(() => userVipLevel.value > 0
+  ? 'border shadow-sm'
+  : themeStore.isDark
+    ? 'border border-gray-700 bg-gray-800 text-gray-300'
+    : 'border border-gray-200 bg-gray-100 text-gray-700'
+)
+
+const overviewShellClass = computed(() => themeStore.isDark
+  ? 'border-gray-800 bg-gray-950/70 shadow-black/20'
+  : 'border-gray-200 bg-white shadow-gray-200/80'
+)
+
+const subtlePanelClass = computed(() => themeStore.isDark
+  ? 'border-gray-800 bg-gray-900/50'
+  : 'border-gray-200 bg-gray-50/70'
+)
+
+const instanceListSummary = computed(() => t('dashboard.instanceListSummary', {
+  count: Math.min(recentInstances.value.length, instances.value.length),
+  total: instances.value.length
+}))
+
+const vipProgressPercent = computed(() => {
+  const progress = Number(userVipProgress.value?.progress || 0)
+  return Math.max(0, Math.min(100, Math.round(progress)))
+})
+
+const vipProgressStyle = computed(() => ({ width: `${vipProgressPercent.value}%` }))
+
+const vipProgressTargetText = computed(() => {
+  const progress = userVipProgress.value
+  if (!progress) return t('dashboard.vipProgressUnavailable')
+  if (progress.nextLevel) {
+    return t('dashboard.vipProgressToNext', {
+      current: formatUserVipLevel(progress.currentLevel),
+      next: formatUserVipLevel(progress.nextLevel)
+    })
+  }
+  return progress.isMaxLevel ? t('dashboard.vipProgressMaxed') : t('dashboard.vipProgressNoRule')
+})
+
+const vipProgressHint = computed(() => {
+  const progress = userVipProgress.value
+  if (!progress?.nextLevel) return t('dashboard.vipProgressStableHint')
+  if (progress.userMetric) {
+    const metric = progress.conditions[0]?.metric
+      ? getVipProgressMetricLabel(progress.conditions[0].metric)
+      : t('dashboard.memberLevel')
+    return t('dashboard.vipProgressSingleMetricHint', {
+      level: formatUserVipLevel(progress.nextLevel),
+      metric
+    })
+  }
+  const key = progress.conditionMode === 'all' ? 'dashboard.vipProgressAllHint' : 'dashboard.vipProgressAnyHint'
+  return t(key, { level: formatUserVipLevel(progress.nextLevel) })
+})
+
+const vipProgressConditions = computed(() => userVipProgress.value?.conditions || [])
+
+const vipProgressConditionGridClass = computed(() => vipProgressConditions.value.length === 1
+  ? 'grid-cols-1'
+  : 'sm:grid-cols-2'
+)
+
+function formatCurrency(amount: number): string {
+  return `¥${amount.toFixed(2)}`
+}
+
+function formatPoints(points: number): string {
+  const normalized = Number.isFinite(points) ? Math.max(points, 0) : 0
+  return Math.floor(normalized).toLocaleString()
+}
+
+function getVipProgressMetricLabel(metric: VipProgressMetric): string {
+  const keyMap: Record<VipProgressMetric, string> = {
+    totalRecharge: 'dashboard.vipMetricTotalRecharge',
+    totalConsume: 'dashboard.vipMetricTotalConsume',
+    totalHostingIncome: 'dashboard.vipMetricTotalHostingIncome',
+    instanceCount: 'dashboard.vipMetricInstanceCount'
+  }
+  return t(keyMap[metric])
+}
+
+function isVipCountMetric(metric: VipProgressMetric): boolean {
+  return metric === 'instanceCount'
+}
+
+function formatVipProgressValue(condition: VipProgressCondition, value: number): string {
+  return isVipCountMetric(condition.metric) ? String(Math.floor(value)) : formatCurrency(value)
+}
+
+function formatVipProgressRemaining(condition: VipProgressCondition): string {
+  if (condition.matched) return t('dashboard.vipProgressConditionMet')
+  if (isVipCountMetric(condition.metric)) {
+    return String(Math.ceil(condition.remaining))
+  }
+  return formatCurrency(condition.remaining)
+}
+
+function normalizeVipLevel(level: unknown): number {
+  const parsed = Number(level)
+  return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : 0
+}
+
+function formatUserVipLevel(level: unknown): string {
+  const normalizedLevel = normalizeVipLevel(level)
+  return normalizedLevel > 0 ? `VIP${normalizedLevel}` : t('dashboard.memberLevelBasic')
+}
+
+const greetingTitle = computed(() => {
+  const username = authStore.user?.username || t('common.user')
+  const level = normalizeVipLevel(userVipLevel.value)
+  if (level <= 0) {
+    return t('dashboard.greeting.basicUser', { username })
+  }
+
+  return t('dashboard.greeting.memberUser', {
+    level: formatUserVipLevel(level),
+    username
+  })
+})
+
+const greetingText = computed(() => t('dashboard.greeting.full', {
+  greeting: getTimeGreeting(),
+  member: greetingTitle.value
+}))
+
+function getInstanceRowClass(): string {
+  return themeStore.isDark
+    ? 'border-gray-800 bg-gray-900/45 hover:border-gray-700 hover:bg-gray-900/70'
+    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50/80'
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- 欢迎区域 -->
+    <div class="page-header flex-col gap-4 sm:flex-row sm:gap-0">
+      <div class="flex w-full items-start justify-between gap-3 sm:w-auto sm:items-center sm:justify-start">
+        <div class="min-w-0 flex-1 sm:flex-none">
+          <h1 class="page-title text-lg sm:text-xl">{{ greetingText }}</h1>
+          <p class="page-description">{{ funnyQuote }}</p>
+        </div>
+        <div class="flex flex-shrink-0 items-center gap-2 sm:hidden">
+          <a
+            v-if="footerTelegramLink"
+            :href="footerTelegramLink"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex h-11 w-11 items-center justify-center rounded-lg transition-colors"
+            :class="themeStore.isDark ? 'bg-sky-900/30 hover:bg-sky-900/50 text-sky-300' : 'bg-sky-100 hover:bg-sky-200 text-sky-600'"
+            title="Telegram"
+            aria-label="Telegram"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 w-full sm:w-auto">
+        <a
+          v-if="footerTelegramLink"
+          :href="footerTelegramLink"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hidden sm:inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg transition-colors"
+          :class="themeStore.isDark ? 'bg-sky-900/30 hover:bg-sky-900/50 text-sky-300' : 'bg-sky-100 hover:bg-sky-200 text-sky-600'"
+          title="Telegram"
+          aria-label="Telegram"
+        >
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+          </svg>
+        </a>
+        <RouterLink to="/instances/create" class="btn-primary w-full sm:w-auto justify-center">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ configStore.freeSiteMode ? freeSiteCopy.dashboardNewInstance : $t('dashboard.newInstance') }}
+        </RouterLink>
+      </div>
+    </div>
+
+    <!-- 总览面板 -->
+    <div class="grid gap-4">
+      <section class="dashboard-overview-card relative overflow-hidden rounded-lg border p-5 shadow-sm sm:p-6" :class="overviewShellClass">
+        <div class="pointer-events-none absolute inset-x-0 top-0 h-28 bg-gradient-to-br from-sky-500/12 via-emerald-400/8 to-transparent"></div>
+        <div class="relative flex flex-col gap-4">
+          <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div class="min-w-0">
+              <div class="flex items-center justify-between gap-3">
+                <div class="text-xs font-semibold uppercase text-themed-muted">{{ t('dashboard.instanceStatusOverview') }}</div>
+                <RouterLink
+                  to="/instances"
+                  class="inline-flex items-center justify-center rounded-lg border px-3.5 py-2 text-sm font-medium transition-colors sm:hidden"
+                  :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/70 text-gray-200 hover:bg-gray-800' : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'"
+                >
+                  {{ t('dashboard.viewAll') }}
+                  <svg class="ml-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                </RouterLink>
+              </div>
+              <div class="mt-3 flex items-end gap-3">
+                <div class="text-5xl font-black leading-none text-themed sm:text-6xl">{{ stats.total }}</div>
+                <div class="pb-1 text-sm text-themed-muted">{{ t('dashboard.totalInstances') }}</div>
+              </div>
+            </div>
+
+            <RouterLink
+              to="/instances"
+              class="hidden items-center justify-center rounded-lg border px-3.5 py-2 text-sm font-medium transition-colors sm:inline-flex"
+              :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/70 text-gray-200 hover:bg-gray-800' : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'"
+            >
+              {{ t('dashboard.viewAll') }}
+              <svg class="ml-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </RouterLink>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-3">
+            <div
+              v-for="item in statusOverviewItems"
+              :key="item.key"
+              class="rounded-lg px-3 py-3"
+              :class="item.className"
+            >
+              <div class="text-xl font-black leading-none sm:text-2xl">{{ item.value }}</div>
+              <div class="mt-1 text-xs font-medium opacity-80">{{ item.label }}</div>
+            </div>
+            <div class="rounded-lg border px-3 py-3" :class="subtlePanelClass">
+              <div class="text-xl font-black leading-none text-themed sm:text-2xl">{{ instanceTypeStats.container }}</div>
+              <div class="mt-1 text-xs font-medium text-themed-muted">{{ t('dashboard.containerInstances') }}</div>
+            </div>
+            <div class="rounded-lg border px-3 py-3" :class="subtlePanelClass">
+              <div class="text-xl font-black leading-none text-themed sm:text-2xl">{{ instanceTypeStats.vm }}</div>
+              <div class="mt-1 text-xs font-medium text-themed-muted">{{ t('dashboard.vmInstances') }}</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="dashboard-overview-card relative overflow-hidden rounded-lg border p-5 shadow-sm sm:p-6" :class="overviewShellClass">
+        <div class="relative flex h-full flex-col gap-5">
+          <div class="flex items-start justify-between gap-3">
+            <div class="min-w-0">
+              <div class="text-xs font-semibold uppercase text-themed-muted">{{ t('dashboard.accountOverview') }}</div>
+              <div class="mt-3 break-all text-3xl font-black leading-none text-teal-600 dark:text-teal-300 sm:text-4xl">
+                {{ formatCurrency(balanceOverview.balance) }}
+              </div>
+              <div class="mt-2 text-sm text-themed-muted">{{ accountPanelHint }}</div>
+            </div>
+            <span
+              class="inline-flex max-w-[11rem] items-center rounded-full px-3 py-1.5 text-sm font-bold"
+              :class="memberBadgeClass"
+              :style="memberBadgeStyle"
+            >
+              {{ formatUserVipLevel(userVipLevel) }}
+            </span>
+          </div>
+
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
+            <div
+              v-for="item in balanceSummaryItems"
+              :key="item.label"
+              class="rounded-lg border px-3.5 py-3"
+              :class="subtlePanelClass"
+            >
+              <div class="text-xs text-themed-muted">{{ item.label }}</div>
+              <div class="mt-1 truncate text-sm font-semibold text-themed">{{ item.value }}</div>
+            </div>
+          </div>
+
+          <div class="rounded-lg border p-4" :class="subtlePanelClass">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+              <div class="min-w-0">
+                <div class="text-sm font-semibold text-themed">{{ t('dashboard.vipProgressTitle') }}</div>
+                <div class="mt-1 text-xs text-themed-muted">{{ vipProgressTargetText }}</div>
+              </div>
+              <div
+                class="inline-flex flex-shrink-0 items-center rounded-full px-2.5 py-1 text-xs font-bold"
+                :class="themeStore.isDark ? 'bg-blue-500/15 text-blue-300' : 'bg-blue-50 text-blue-700'"
+              >
+                {{ vipProgressPercent }}%
+              </div>
+            </div>
+
+            <div class="mt-4 h-2.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
+              <div class="h-full rounded-full bg-gradient-to-r from-blue-500 via-cyan-500 to-emerald-500 transition-all duration-500" :style="vipProgressStyle"></div>
+            </div>
+            <div class="mt-2 text-xs text-themed-muted">{{ vipProgressHint }}</div>
+
+            <div v-if="vipProgressConditions.length > 0" class="mt-4 grid gap-2" :class="vipProgressConditionGridClass">
+              <div
+                v-for="condition in vipProgressConditions"
+                :key="condition.metric"
+                class="rounded-lg border px-3.5 py-3"
+                :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-white'"
+              >
+                <div class="flex items-center justify-between gap-2">
+                  <span class="text-xs font-medium text-themed-muted">{{ getVipProgressMetricLabel(condition.metric) }}</span>
+                  <span
+                    class="rounded-full px-2 py-0.5 text-[11px] font-semibold"
+                    :class="condition.matched
+                      ? (themeStore.isDark ? 'bg-emerald-500/15 text-emerald-300' : 'bg-emerald-50 text-emerald-700')
+                      : (themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-600')"
+                  >
+                    {{ condition.progress }}%
+                  </span>
+                </div>
+                <div class="mt-3 grid gap-2 sm:grid-cols-3">
+                  <div class="min-w-0 rounded-md px-2.5 py-2" :class="subtlePanelClass">
+                    <div class="text-[11px] text-themed-muted">{{ t('dashboard.vipProgressCurrent') }}</div>
+                    <div class="mt-1 truncate text-sm font-semibold text-themed">{{ formatVipProgressValue(condition, condition.current) }}</div>
+                  </div>
+                  <div class="min-w-0 rounded-md px-2.5 py-2" :class="subtlePanelClass">
+                    <div class="text-[11px] text-themed-muted">{{ t('dashboard.vipProgressTarget') }}</div>
+                    <div class="mt-1 truncate text-sm font-semibold text-themed">{{ formatVipProgressValue(condition, condition.target) }}</div>
+                  </div>
+                  <div class="min-w-0 rounded-md px-2.5 py-2" :class="subtlePanelClass">
+                    <div class="text-[11px] text-themed-muted">{{ t('dashboard.vipProgressRemaining') }}</div>
+                    <div
+                      class="mt-1 truncate text-sm font-semibold"
+                      :class="condition.matched ? 'text-emerald-600 dark:text-emerald-300' : 'text-themed'"
+                    >
+                      {{ formatVipProgressRemaining(condition) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <!-- 实例列表 -->
+    <div class="card overflow-hidden">
+      <div 
+        class="px-4 py-4 border-b flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+        :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+      >
+        <div>
+          <h2 class="text-base font-semibold text-themed">{{ $t('dashboard.myInstances') }}</h2>
+          <p class="mt-1 text-xs text-themed-muted">{{ instanceListSummary }}</p>
+        </div>
+        <RouterLink 
+          to="/instances" 
+          class="inline-flex items-center justify-center rounded-lg px-3 py-2 text-xs font-medium transition-colors"
+          :class="themeStore.isDark ? 'bg-gray-900 text-gray-300 hover:bg-gray-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+        >
+          {{ $t('dashboard.viewAll') }}
+          <svg class="ml-1.5 h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </RouterLink>
+      </div>
+
+      <div v-if="loading" class="p-3 sm:p-4">
+        <div class="space-y-3">
+          <div
+            v-for="i in 3"
+            :key="i"
+            class="rounded-lg border p-3.5 sm:p-4"
+            :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/40' : 'border-gray-200 bg-gray-50/60'"
+          >
+            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+              <div class="flex items-center gap-3">
+                <Skeleton type="circle" size="11px" />
+                <div class="space-y-2 min-w-0 flex-1">
+                  <Skeleton type="line" width="150px" height="15px" />
+                  <Skeleton type="line" width="210px" height="11px" />
+                </div>
+              </div>
+              <div class="flex flex-wrap gap-2 lg:justify-end">
+                <Skeleton v-for="metric in 4" :key="metric" type="line" width="74px" height="28px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="instances.length === 0" class="p-8 text-center">
+        <div 
+          class="w-16 h-16 mx-auto mb-4 rounded-lg flex items-center justify-center"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+        >
+          <svg 
+            class="w-8 h-8" 
+            :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+          </svg>
+        </div>
+        <p class="text-themed-muted text-sm mb-4">{{ $t('dashboard.noInstances') }}</p>
+        <RouterLink to="/instances/create" class="btn-primary btn-sm">{{ configStore.freeSiteMode ? freeSiteCopy.dashboardCreateFirst : $t('dashboard.createFirst') }}</RouterLink>
+      </div>
+
+      <div v-else class="p-3 sm:p-4">
+        <RouterLink 
+          v-for="instance in recentInstances" 
+          :key="instance.id"
+          :to="`/instances/${instance.id}`"
+          class="group relative block overflow-hidden rounded-lg border p-3.5 transition-all duration-200 mb-3 last:mb-0 sm:p-4"
+          :class="getInstanceRowClass()"
+        >
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div class="min-w-0 flex-1">
+              <div class="flex items-start gap-3">
+                <div 
+                  class="w-11 h-11 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors overflow-hidden"
+                  :class="themeStore.isDark ? 'bg-gray-800 group-hover:bg-gray-700' : 'bg-gray-100 group-hover:bg-gray-200'"
+                >
+                  <InstanceDisplayIcon
+                    v-if="instance.iconBadgeId || getPaidIconType(instance)"
+                    :badge-id="instance.iconBadgeId"
+                    :fallback-icon="getPaidIconType(instance)"
+                    :alt="instance.name"
+                    :size="48"
+                  />
+                  <DistroIcon 
+                    v-else
+                    :distro="getDistroFromName(instance.image)" 
+                    :size="26"
+                  />
+                </div>
+
+                <div class="min-w-0 flex-1">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span 
+                      class="max-w-full truncate text-sm sm:text-[15px] font-semibold"
+                      :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+                    >
+                      {{ instance.name }}
+                    </span>
+                    <span :class="['badge inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] sm:text-[11px] flex-shrink-0', getStatusInfo(instance.status, t).class]">
+                      <span :class="['w-1.5 h-1.5 rounded-full', getStatusInfo(instance.status, t).dot]"></span>
+                      {{ getStatusInfo(instance.status, t).label }}
+                    </span>
+                    <span
+                      class="inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] sm:text-[11px] font-medium"
+                      :class="instance.instanceType === 'vm'
+                        ? (themeStore.isDark ? 'bg-amber-500/15 text-amber-300' : 'bg-amber-100 text-amber-700')
+                        : (themeStore.isDark ? 'bg-sky-500/15 text-sky-300' : 'bg-sky-100 text-sky-700')"
+                    >
+                      {{ getInstanceTypeLabel(instance) }}
+                    </span>
+                  </div>
+
+                  <div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+                    <span class="truncate max-w-[14rem] sm:max-w-[22rem]" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'">
+                      {{ formatImageName(instance.image, (instance as any).imageName) }}
+                    </span>
+                    <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-300'">•</span>
+                    <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">CPU {{ instance.cpu }}%</span>
+                    <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-300'">•</span>
+                    <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatMemory(instance.memory) }}</span>
+                    <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-300'">•</span>
+                    <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatDisk(instance.disk) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center gap-2 lg:justify-end lg:pl-4">
+              <span
+                class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px]"
+                :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+              >
+                <FlagIcon :code="instance.host?.country_code || instance.hostCountryCode || 'us'" size="xs" />
+                <span class="truncate max-w-[8rem]">{{ getHostName(instance) }}</span>
+              </span>
+              <span
+                class="inline-flex items-center rounded-md px-2 py-1 text-[11px] font-mono"
+                :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+              >
+                {{ getDisplayIp(instance) || $t('dashboard.noPublicIp') }}
+              </span>
+              <div
+                class="hidden lg:flex h-9 w-9 items-center justify-center rounded-lg transition-colors"
+                :class="themeStore.isDark ? 'bg-gray-800 text-gray-500 group-hover:bg-gray-700 group-hover:text-gray-300' : 'bg-gray-100 text-gray-400 group-hover:bg-gray-200 group-hover:text-gray-700'"
+              >
+                <svg 
+                  class="w-4 h-4 transition-transform group-hover:translate-x-0.5" 
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </RouterLink>
+      </div>
+
+      <div 
+        v-if="instances.length > 5" 
+        class="px-4 py-3 border-t text-center"
+        :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+      >
+        <RouterLink 
+          to="/instances" 
+          class="text-sm transition-colors"
+          :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'"
+        >
+          {{ $t('dashboard.viewAllInstancesWithCount', { count: instances.length }) }} →
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.dashboard-overview-card {
+  min-height: 260px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.dashboard-overview-card:hover {
+  transform: translateY(-1px);
+}
+
+@media (max-width: 640px) {
+  .dashboard-overview-card {
+    min-height: auto;
+  }
+}
+</style>
diff --git a/client/src/views/EntertainmentView.vue b/client/src/views/EntertainmentView.vue
new file mode 100644
index 0000000..fd48dd3
--- /dev/null
+++ b/client/src/views/EntertainmentView.vue
@@ -0,0 +1,2044 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, onUnmounted, nextTick, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import api from '@/api'
+import BadgeBatchRewardModal from '@/components/entertainment/BadgeBatchRewardModal.vue'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+import InstanceSelector from '@/components/InstanceSelector.vue'
+import BadgeCenter from '@/components/entertainment/BadgeCenter.vue'
+import BadgeRewardModal from '@/components/entertainment/BadgeRewardModal.vue'
+import VipBenefitHall from '@/components/entertainment/VipBenefitHall.vue'
+import type { BadgeOwnership } from '@/types/api'
+
+const { t } = useI18n()
+const toast = useToast()
+const route = useRoute()
+
+type LotteryBadgeRewardModalState = {
+  visible: boolean
+  ownership: BadgeOwnership | null
+  remainingPoints: number | null
+}
+
+const checkinFeatureEnabled = ref(false)
+
+// 主选项卡（福利功能分类）
+const mainTab = ref<'vip' | 'lottery' | 'badge' | 'checkin'>('vip')
+const badgeInitialTab = ref<'draw' | 'my'>('draw')
+
+// 抽奖子 TAB
+const activeTab = ref<'lottery' | 'records' | 'points'>('lottery')
+
+// 签到子 TAB
+const checkinTab = ref<'checkin' | 'redeem' | 'pool' | 'logs'>('checkin')
+
+// 积分数据
+const points = ref({
+  points: 0,
+  totalEarned: 0,
+  totalSpent: 0,
+  convertiblePoints: 0
+})
+const pointsLoading = ref(true)
+
+// 抽奖活动列表
+const lotteries = ref<any[]>([])
+const lotteriesLoading = ref(false)
+const selectedLottery = ref<any>(null)
+
+// 抽奖状态
+const isSpinning = ref(false)
+const spinResult = ref<any>(null)
+const showResultModal = ref(false)
+const lotteryBadgeRewardModal = ref<LotteryBadgeRewardModalState>({
+  visible: false,
+  ownership: null,
+  remainingPoints: null
+})
+const wheelRotation = ref(0)
+const bulbPhase = ref(0) // 灯泡闪烁相位：0 或 1
+let bulbTimer: ReturnType<typeof setInterval> | null = null
+
+// 十连抽状态
+const isMultiDrawing = ref(false)
+const multiDrawResults = ref<any[]>([])
+const multiDrawBadgeRewards = ref<BadgeOwnership[]>([])
+const showMultiDrawBadgeModal = ref(false)
+const showMultiDrawModal = ref(false)
+const multiDrawError = ref('')
+
+// 抽奖记录
+const records = ref<any[]>([])
+const recordsLoading = ref(false)
+const recordsPage = ref(1)
+const recordsPageSize = ref(20)
+const recordsTotal = ref(0)
+const recordsTypeFilter = ref('')  // 奖品类型筛选
+const recordsPageSizeOptions = [10, 20, 50, 100]
+
+// 积分日志
+const pointsLogs = ref<any[]>([])
+const pointsLogsLoading = ref(false)
+const pointsLogsPage = ref(1)
+const pointsLogsPageSize = ref(10)
+const pointsLogsTotal = ref(0)
+
+// 兑换状态
+const converting = ref(false)
+
+// ==================== 签到系统状态 ====================
+// 签到动画状态
+const checkinPhase = ref<'idle' | 'shaking' | 'opening' | 'revealing' | 'done'>('idle')
+const checkinResult = ref<{ type: string; value: number; bonusPoints: number } | null>(null)
+const confettiParticles = ref<Array<{ id: number; x: number; delay: number; color: string; size: number }>>([])
+
+// 签到状态
+const checkinLoading = ref(false)
+const checkinStatus = ref<{
+  hasCheckedIn: boolean
+  hasInstances: boolean
+  selfOnlyMode: boolean
+  consecutiveOthersUse: number
+} | null>(null)
+
+// 兑换码输入
+const redeemCodeInput = ref('')
+const redeemLoading = ref(false)
+const redeemSelectedInstance = ref<number | null>(null)
+
+// 资源池数据
+const resourcePool = ref({ cpu: 0, memory: 0, disk: 0, traffic: 0 })
+const resourcePoolLoading = ref(false)
+
+// 资源池应用表单
+const applyForm = ref({ instanceId: null as number | null, resourceType: 'c' as 'c' | 'r' | 'd' | 't', amount: 1 })
+const applyLoading = ref(false)
+
+// 可用实例列表（资源池应用）
+const poolInstances = ref<Array<{
+  id: number
+  name: string
+  status: string
+  cpu: number
+  memory: number
+  disk: number
+  monthlyTrafficLimit: string | null
+  isPaid: boolean
+  instanceType: 'vm' | 'container'
+  host: { id: number; name: string; location: string | null; countryCode: string }
+}>>([])
+
+// 资源池日志
+const poolLogs = ref<any[]>([])
+const poolLogsLoading = ref(false)
+const poolLogsPage = ref(1)
+const poolLogsPageSize = ref(20)
+const poolLogsTotal = ref(0)
+const poolLogsFilter = ref({ action: '', resourceType: '' })
+
+onMounted(() => {
+  loadPoints()
+  loadLotteries()
+  
+  // 处理 URL 参数跳转
+  if (route.query.tab === 'lottery') {
+    mainTab.value = 'lottery'
+  } else if (route.query.tab === 'checkin' && checkinFeatureEnabled.value) {
+    mainTab.value = 'checkin'
+    loadCheckinData()
+  } else if (route.query.tab === 'badge') {
+    mainTab.value = 'badge'
+  } else {
+    mainTab.value = 'vip'
+  }
+})
+
+onUnmounted(() => {
+  // 清理灯泡闪烁定时器
+  if (bulbTimer) {
+    clearInterval(bulbTimer)
+    bulbTimer = null
+  }
+})
+
+// 监听主选项卡切换
+watch(mainTab, (newTab) => {
+  if (newTab === 'checkin' && checkinFeatureEnabled.value) {
+    // 切换到签到时始终刷新资源池数据（抽奖可能获得资源）
+    loadResourcePool()
+    if (!checkinStatus.value) {
+      loadCheckinData()
+    }
+  }
+})
+
+// ==================== 签到系统方法 ====================
+
+// 资源类型辅助函数
+const getResourceTypeName = (type: string) => {
+  const map: Record<string, string> = { c: t('checkin.cpu'), r: t('checkin.memory'), d: t('checkin.disk'), t: t('checkin.traffic') }
+  return map[type] || type.toUpperCase()
+}
+
+const getResourceUnit = (type: string) => {
+  const map: Record<string, string> = { c: '%', r: 'MB', d: 'MB', t: 'GB' }
+  return map[type] || ''
+}
+
+const getResourceColor = (type: string) => {
+  const map: Record<string, string> = { c: 'text-blue-500', r: 'text-purple-500', d: 'text-amber-500', t: 'text-emerald-500' }
+  return map[type] || 'text-gray-500'
+}
+
+const getResourceBgColor = (type: string) => {
+  const map: Record<string, string> = { c: 'bg-blue-500/10', r: 'bg-purple-500/10', d: 'bg-amber-500/10', t: 'bg-emerald-500/10' }
+  return map[type] || 'bg-gray-500/10'
+}
+
+const getActionName = (action: string) => {
+  const map: Record<string, string> = {
+    checkin: t('checkin.actionCheckin'),
+    redeem: t('checkin.actionRedeem'),
+    admin_grant: t('checkin.actionAdminGrant'),
+    system_grant: t('checkin.actionSystemGrant'),
+    lottery: t('checkin.actionLottery'),
+    apply: t('checkin.actionApply'),
+    system_redeem: t('checkin.actionSystemRedeem')
+  }
+  return map[action] || action
+}
+
+// 生成彩色纸屑粒子
+const generateConfetti = () => {
+  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd']
+  const particles: typeof confettiParticles.value = []
+  for (let i = 0; i < 50; i++) {
+    particles.push({ id: i, x: Math.random() * 100, delay: Math.random() * 0.5, color: colors[Math.floor(Math.random() * colors.length)], size: Math.random() * 8 + 4 })
+  }
+  confettiParticles.value = particles
+}
+
+// 加载签到相关数据
+async function loadCheckinData() {
+  await Promise.all([loadCheckinStatus(), loadResourcePool()])
+}
+
+// 加载签到状态
+async function loadCheckinStatus() {
+  try {
+    checkinLoading.value = true
+    checkinStatus.value = await api.checkin.getStatus()
+  } catch (err: any) {
+    console.error('Failed to load checkin status:', err)
+  } finally {
+    checkinLoading.value = false
+  }
+}
+
+// 加载资源池
+async function loadResourcePool() {
+  try {
+    resourcePoolLoading.value = true
+    resourcePool.value = await api.resourcePool.get()
+  } catch (err: any) {
+    console.error('Failed to load resource pool:', err)
+    toast.error(translateError(err))
+  } finally {
+    resourcePoolLoading.value = false
+  }
+}
+
+// 加载资源池实例列表
+async function loadPoolInstances() {
+  try {
+    const res = await api.resourcePool.getInstances()
+    poolInstances.value = res.instances
+  } catch (err: any) {
+    console.error('Failed to load pool instances:', err)
+  }
+}
+
+// 加载资源池日志
+async function loadPoolLogs() {
+  try {
+    poolLogsLoading.value = true
+    const res = await api.resourcePool.getLogs({
+      action: poolLogsFilter.value.action || undefined,
+      resourceType: poolLogsFilter.value.resourceType || undefined,
+      limit: poolLogsPageSize.value,
+      offset: (poolLogsPage.value - 1) * poolLogsPageSize.value
+    })
+    poolLogs.value = res.records
+    poolLogsTotal.value = res.total
+  } catch (err: any) {
+    console.error('Failed to load pool logs:', err)
+    toast.error(translateError(err))
+  } finally {
+    poolLogsLoading.value = false
+  }
+}
+
+// 执行签到
+async function doCheckin() {
+  if (checkinStatus.value?.hasCheckedIn || !checkinStatus.value?.hasInstances) return
+  try {
+    checkinLoading.value = true
+    checkinPhase.value = 'shaking'
+    await new Promise(resolve => setTimeout(resolve, 1200))
+    checkinPhase.value = 'opening'
+    await new Promise(resolve => setTimeout(resolve, 600))
+    const result = await api.checkin.checkin()
+    checkinPhase.value = 'revealing'
+    checkinResult.value = { type: result.codeType, value: result.codeValue, bonusPoints: result.bonusPoints }
+    generateConfetti()
+    await new Promise(resolve => setTimeout(resolve, 100))
+    await nextTick()
+    checkinPhase.value = 'done'
+    // 刷新数据
+    await Promise.all([loadCheckinStatus(), loadResourcePool(), loadPoints()])
+    toast.success(t('checkin.checkinSuccess'))
+    // 3秒后自动回到 idle 状态
+    setTimeout(() => {
+      resetCheckinAnimation()
+    }, 3000)
+  } catch (err: any) {
+    toast.error(translateError(err))
+    checkinPhase.value = 'idle'
+  } finally {
+    checkinLoading.value = false
+  }
+}
+
+// 重置签到动画
+function resetCheckinAnimation() {
+  checkinPhase.value = 'idle'
+  checkinResult.value = null
+  confettiParticles.value = []
+}
+
+// 兑换系统兑换码
+async function redeemCode() {
+  const code = redeemCodeInput.value.trim()
+  if (!code) { toast.warning(t('checkin.enterCode')); return }
+  if (!redeemSelectedInstance.value) { toast.warning(t('checkin.selectInstance')); return }
+  try {
+    redeemLoading.value = true
+    const result = await api.checkin.redeem(code, redeemSelectedInstance.value)
+    toast.success(t('checkin.redeemToInstanceSuccess', { type: getResourceTypeName(result.codeType), value: result.actualAdded, unit: getResourceUnit(result.codeType), instance: result.instanceName }))
+    redeemCodeInput.value = ''
+    await loadResourcePool()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    redeemLoading.value = false
+  }
+}
+
+// 应用资源到实例
+async function applyResource() {
+  if (!applyForm.value.instanceId) { toast.warning(t('checkin.selectInstance')); return }
+  if (applyForm.value.amount <= 0) { toast.warning(t('checkin.enterAmount')); return }
+  const maxAmount = resourcePool.value[applyForm.value.resourceType === 'c' ? 'cpu' : applyForm.value.resourceType === 'r' ? 'memory' : applyForm.value.resourceType === 'd' ? 'disk' : 'traffic']
+  if (applyForm.value.amount > maxAmount) { toast.warning(t('checkin.insufficientPool')); return }
+  try {
+    applyLoading.value = true
+    const result = await api.resourcePool.apply({
+      instanceId: applyForm.value.instanceId,
+      resourceType: applyForm.value.resourceType,
+      amount: applyForm.value.amount
+    })
+    toast.success(t('checkin.applySuccess', { type: getResourceTypeName(applyForm.value.resourceType), value: applyForm.value.amount, unit: getResourceUnit(applyForm.value.resourceType), instance: result.instanceName }))
+    applyForm.value.amount = 1
+    await loadResourcePool()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    applyLoading.value = false
+  }
+}
+
+// 签到子TAB切换
+function switchCheckinTab(tab: 'checkin' | 'redeem' | 'pool' | 'logs') {
+  checkinTab.value = tab
+  if (tab === 'pool' && poolInstances.value.length === 0) loadPoolInstances()
+  if (tab === 'redeem' && poolInstances.value.length === 0) loadPoolInstances()
+  if (tab === 'logs' && poolLogs.value.length === 0) loadPoolLogs()
+}
+
+// 计算资源池日志总页数
+const poolLogsTotalPages = computed(() => Math.ceil(poolLogsTotal.value / poolLogsPageSize.value))
+
+// 启动灯泡闪烁
+function startBulbBlink() {
+  bulbPhase.value = 0
+  bulbTimer = setInterval(() => {
+    bulbPhase.value = bulbPhase.value === 0 ? 1 : 0
+  }, 150) // 每 150ms 切换一次
+}
+
+// 停止灯泡闪烁
+function stopBulbBlink() {
+  if (bulbTimer) {
+    clearInterval(bulbTimer)
+    bulbTimer = null
+  }
+  bulbPhase.value = 0
+}
+
+async function loadPoints() {
+  pointsLoading.value = true
+  try {
+    const res = await api.entertainment.getPoints()
+    points.value = {
+      points: res.points,
+      totalEarned: res.totalEarned,
+      totalSpent: res.totalSpent,
+      convertiblePoints: res.convertiblePoints
+    }
+  } catch (err: any) {
+    console.error('Failed to load points:', err)
+  } finally {
+    pointsLoading.value = false
+  }
+}
+
+async function loadLotteries() {
+  lotteriesLoading.value = true
+  try {
+    const res = await api.entertainment.getLotteries()
+    lotteries.value = res.lotteries || []
+    // 如果当前有选中的活动，更新其引用以获取最新数据（如库存）
+    if (selectedLottery.value) {
+      const updated = lotteries.value.find(l => l.id === selectedLottery.value.id)
+      if (updated) {
+        selectedLottery.value = updated
+      }
+    }
+    // 如果没有选中的活动，默认选第一个
+    if (lotteries.value.length > 0 && !selectedLottery.value) {
+      selectedLottery.value = lotteries.value[0]
+    }
+  } catch (err: any) {
+    toast.error(t('entertainment.loadLotteriesFailed') + ': ' + err.message)
+  } finally {
+    lotteriesLoading.value = false
+  }
+}
+
+async function loadRecords() {
+  recordsLoading.value = true
+  try {
+    const res = await api.entertainment.getLotteryRecords({
+      page: recordsPage.value,
+      pageSize: recordsPageSize.value,
+      prizeType: recordsTypeFilter.value || undefined
+    })
+    records.value = res.records || []
+    recordsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('entertainment.loadRecordsFailed') + ': ' + err.message)
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
+async function loadPointsLogs() {
+  pointsLogsLoading.value = true
+  try {
+    const res = await api.entertainment.getPointsLogs({
+      page: pointsLogsPage.value,
+      pageSize: pointsLogsPageSize.value
+    })
+    pointsLogs.value = res.logs || []
+    pointsLogsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('entertainment.loadPointsLogsFailed') + ': ' + err.message)
+  } finally {
+    pointsLogsLoading.value = false
+  }
+}
+
+// 兑换积分
+async function convertPoints() {
+  if (points.value.convertiblePoints <= 0) {
+    toast.warning(t('entertainment.noPointsToConvert'))
+    return
+  }
+  converting.value = true
+  try {
+    const res = await api.entertainment.convertPoints()
+    toast.success(t('entertainment.convertSuccess', { points: res.converted }))
+    loadPoints()
+    if (activeTab.value === 'points') {
+      loadPointsLogs()
+    }
+  } catch (err: any) {
+    toast.error(t('entertainment.convertFailed') + ': ' + err.message)
+  } finally {
+    converting.value = false
+  }
+}
+
+function openBadgeTab(tab: 'draw' | 'my' = 'my') {
+  badgeInitialTab.value = tab
+  mainTab.value = 'badge'
+}
+
+function openLotteryBadgeRewardModal(ownership: BadgeOwnership, remainingPoints: number | null) {
+  if (remainingPoints !== null) {
+    points.value.points = remainingPoints
+  }
+  lotteryBadgeRewardModal.value = {
+    visible: true,
+    ownership,
+    remainingPoints
+  }
+}
+
+function closeLotteryBadgeRewardModal() {
+  lotteryBadgeRewardModal.value = {
+    visible: false,
+    ownership: null,
+    remainingPoints: null
+  }
+  spinResult.value = null
+}
+
+function jumpToMyBadgesFromLotteryReward() {
+  closeLotteryBadgeRewardModal()
+  openBadgeTab('my')
+}
+
+const canSpinAgainFromLotteryBadgeReward = computed(() => {
+  if (!selectedLottery.value) return false
+  const remainingPoints = lotteryBadgeRewardModal.value.remainingPoints ?? points.value.points
+  return !isSpinning.value && remainingPoints >= selectedLottery.value.costPoints
+})
+
+async function spinAgainFromLotteryBadgeReward() {
+  if (!canSpinAgainFromLotteryBadgeReward.value) return
+  closeLotteryBadgeRewardModal()
+  await spin()
+}
+
+// 抽奖
+async function spin() {
+  if (!selectedLottery.value) {
+    toast.warning(t('entertainment.selectLottery'))
+    return
+  }
+  if (points.value.points < selectedLottery.value.costPoints) {
+    toast.warning(t('entertainment.notEnoughPoints'))
+    return
+  }
+  if (isSpinning.value) return
+
+  isSpinning.value = true
+  spinResult.value = null
+  startBulbBlink() // 开始灯泡闪烁
+  
+  // 开始旋转动画
+  const prizes = selectedLottery.value.prizes || []
+  const prizeCount = prizes.length || 8
+  const baseRotation = wheelRotation.value
+  
+  try {
+    const res = await api.entertainment.draw(selectedLottery.value.id)
+    spinResult.value = {
+      prizeType: res.record.prizeType,
+      prizeName: res.record.prizeName,
+      prizeValue: res.record.prizeValue,
+      prizeId: res.record.prizeId,
+      badgeOwnership: res.record.badgeOwnership
+    }
+    
+    // 根据后端返回的 prizeId 找到中奖奖品在转盘中的索引
+    // 使用 == 而不是 === 来比较，避免类型不一致问题（number vs string）
+    const prizeId = res.record.prizeId
+    const prizeIndex = prizes.findIndex((p: any) => p.id == prizeId)
+    const actualIndex = prizeIndex >= 0 ? prizeIndex : 0
+    
+    console.log('[Lottery] Prize result:', {
+      prizeId,
+      prizeIdType: typeof prizeId,
+      prizeName: res.record.prizeName,
+      prizeIndex,
+      actualIndex,
+      prizeCount,
+      prizes: prizes.map((p: any, i: number) => ({ 
+        index: i, 
+        id: p.id, 
+        idType: typeof p.id,
+        name: p.name,
+        displayOrder: p.displayOrder
+      }))
+    })
+    
+    // 如果 findIndex 返回 -1，说明数据不一致，打印警告
+    if (prizeIndex === -1) {
+      console.error('[Lottery] WARNING: prizeId not found in prizes array!', {
+        searchingFor: prizeId,
+        availableIds: prizes.map((p: any) => p.id)
+      })
+    }
+    
+    const segmentAngle = 360 / prizeCount
+    // 计算目标角度：让该扇区中心对准顶部指针
+    // 扇区 N 的中心在 (N + 0.5) * segmentAngle 度位置
+    // 要让它对准顶部指针（0度），需要顺时针旋转到 (prizeCount - N - 0.5) * segmentAngle 的绝对角度
+    const randomOffset = (Math.random() - 0.5) * segmentAngle * 0.4 // 在扇区中心附近随机偏移，避免停在边界
+    const stopAngle = (prizeCount - actualIndex - 0.5) * segmentAngle + randomOffset
+    
+    // 关键修复：stopAngle 是绝对角度（0-360°），不能简单累加
+    // 需要计算一个至少多转 3 圈且最终停在 stopAngle 位置的目标角度
+    const minTarget = baseRotation + 1080  // 至少比当前多转 3 圈
+    const targetAngle = Math.ceil(minTarget / 360) * 360 + stopAngle
+    
+    console.log('[Lottery] Angle calculation:', {
+      segmentAngle,
+      stopAngle,
+      targetAngle,
+      randomOffset
+    })
+    
+    wheelRotation.value = targetAngle
+    
+    // 等待动画完成后显示结果
+    setTimeout(() => {
+      if (res.record.badgeOwnership) {
+        openLotteryBadgeRewardModal(res.record.badgeOwnership, res.currentPoints)
+      } else {
+        showResultModal.value = true
+      }
+      loadPoints() // 刷新积分
+      loadLotteries() // 刷新奖品库存
+    }, 2000)
+  } catch (err: any) {
+    toast.error(t('entertainment.spinFailed') + ': ' + err.message)
+    stopBulbBlink()
+  } finally {
+    setTimeout(() => {
+      isSpinning.value = false
+      stopBulbBlink() // 停止灯泡闪烁
+    }, 2000)
+  }
+}
+
+function switchTab(tab: 'lottery' | 'records' | 'points') {
+  activeTab.value = tab
+  if (tab === 'records' && records.value.length === 0) {
+    loadRecords()
+  } else if (tab === 'points' && pointsLogs.value.length === 0) {
+    loadPointsLogs()
+  }
+}
+
+function selectLottery(lottery: any) {
+  selectedLottery.value = lottery
+  wheelRotation.value = 0
+}
+
+function closeResultModal() {
+  showResultModal.value = false
+  spinResult.value = null
+}
+
+// 十连抽
+async function multiDraw() {
+  if (!selectedLottery.value) {
+    toast.warning(t('entertainment.selectLottery'))
+    return
+  }
+  const totalCost = selectedLottery.value.costPoints * 10
+  if (points.value.points < totalCost) {
+    toast.warning(t('entertainment.notEnoughPointsForMulti', { required: totalCost, current: points.value.points }))
+    return
+  }
+  if (isMultiDrawing.value || isSpinning.value) return
+
+  isMultiDrawing.value = true
+  multiDrawResults.value = []
+  multiDrawError.value = ''
+
+  try {
+    const res = await api.entertainment.drawMulti(selectedLottery.value.id)
+    multiDrawResults.value = res.records || []
+    multiDrawBadgeRewards.value = multiDrawResults.value
+      .map(result => result.badgeOwnership)
+      .filter((ownership): ownership is BadgeOwnership => !!ownership)
+    if (res.stopReason) {
+      multiDrawError.value = res.stopReason
+    }
+    
+    // 如果没有任何结果，直接显示错误 toast
+    if (multiDrawResults.value.length === 0) {
+      toast.error(res.stopReason || t('entertainment.multiDrawFailed'))
+    } else if (multiDrawBadgeRewards.value.length > 0) {
+      showMultiDrawBadgeModal.value = true
+    } else {
+      showMultiDrawModal.value = true
+    }
+    
+    loadPoints() // 刷新积分
+    loadLotteries() // 刷新奖品库存
+  } catch (err: any) {
+    toast.error(t('entertainment.multiDrawFailed') + ': ' + err.message)
+  } finally {
+    isMultiDrawing.value = false
+  }
+}
+
+function closeMultiDrawModal() {
+  showMultiDrawModal.value = false
+  multiDrawResults.value = []
+  multiDrawBadgeRewards.value = []
+  showMultiDrawBadgeModal.value = false
+  multiDrawError.value = ''
+}
+
+function continueToMultiDrawResults() {
+  showMultiDrawBadgeModal.value = false
+  showMultiDrawModal.value = true
+}
+
+// 计算十连抽各类奖品的总值（使用 computed 避免重复计算）
+const multiDrawSummary = computed(() => {
+  const results = multiDrawResults.value
+  return {
+    balance: results.filter(r => r.prizeType === 'balance').reduce((sum, r) => sum + r.prizeValue, 0) / 100, // 分转元
+    badge: results.filter(r => r.prizeType === 'badge').length,
+    instance: results.filter(r => r.prizeType === 'instance').length,
+    cpu: results.filter(r => r.prizeType === 'cpu').reduce((sum, r) => sum + r.prizeValue, 0),
+    memory: results.filter(r => r.prizeType === 'memory').reduce((sum, r) => sum + r.prizeValue, 0),
+    disk: results.filter(r => r.prizeType === 'disk').reduce((sum, r) => sum + r.prizeValue, 0),
+    traffic: results.filter(r => r.prizeType === 'traffic').reduce((sum, r) => sum + r.prizeValue, 0),
+    points: results.filter(r => r.prizeType === 'points').reduce((sum, r) => sum + r.prizeValue, 0),
+    nothing: results.filter(r => r.prizeType === 'nothing').length
+  }
+})
+
+// 再次十连抽：关闭弹窗后立即再次抽奖
+function multiDrawAgain() {
+  closeMultiDrawModal()
+  multiDraw()
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+function getPrizeTypeName(type: string): string {
+  const map: Record<string, string> = {
+    nothing: t('entertainment.prizeTypes.nothing'),
+    points: t('entertainment.prizeTypes.points'),
+    balance: t('entertainment.prizeTypes.balance'),
+    badge: t('entertainment.prizeTypes.badge'),
+    instance: t('entertainment.prizeTypes.instance'),
+    cpu: t('entertainment.prizeTypes.cpu'),
+    memory: t('entertainment.prizeTypes.memory'),
+    disk: t('entertainment.prizeTypes.disk'),
+    traffic: t('entertainment.prizeTypes.traffic')
+  }
+  return map[type] || type
+}
+
+function getPointsLogTypeName(type: string): string {
+  const map: Record<string, string> = {
+    convert: t('entertainment.pointsLogTypes.convert'),
+    lottery_win: t('entertainment.pointsLogTypes.lotteryWin'),
+    lottery_spend: t('entertainment.pointsLogTypes.lotterySpend'),
+    badge_draw_spend: t('entertainment.pointsLogTypes.badgeDrawSpend'),
+    badge_select_spend: t('entertainment.pointsLogTypes.badgeSelectSpend'),
+    admin_adjust: t('entertainment.pointsLogTypes.adminAdjust'),
+    checkin: t('entertainment.pointsLogTypes.checkin'),
+    invite_generate: '生成邀请码'
+  }
+  return map[type] || type
+}
+
+function getPrizeColor(type: string): string {
+  const map: Record<string, string> = {
+    nothing: '#9CA3AF',
+    points: '#F59E0B',
+    balance: '#10B981',
+    badge: '#0EA5E9',
+    instance: '#8B5CF6',
+    cpu: '#3B82F6',     // 蓝色 - CPU
+    memory: '#EC4899',  // 粉色 - 内存
+    disk: '#F97316',    // 橙色 - 硬盘
+    traffic: '#06B6D4'  // 青色 - 流量
+  }
+  return map[type] || '#6B7280'
+}
+
+// 为转盘奖品区域生成渐变色
+function getWheelGradientColor(type: string, index: number): string {
+  // 使用更丰富的配色方案
+  const colorSchemes: Record<string, string[]> = {
+    nothing: ['#9CA3AF', '#6B7280'],      // 灰色系
+    points: ['#FBBF24', '#F59E0B'],       // 金色系
+    balance: ['#34D399', '#10B981'],      // 绿色系
+    badge: ['#38BDF8', '#0EA5E9'],        // 天蓝色系
+    instance: ['#A78BFA', '#8B5CF6'],     // 紫色系
+    cpu: ['#60A5FA', '#3B82F6'],          // 蓝色系 - CPU
+    memory: ['#F472B6', '#EC4899'],       // 粉色系 - 内存
+    disk: ['#FB923C', '#F97316'],         // 橙色系 - 硬盘
+    traffic: ['#22D3EE', '#06B6D4']       // 青色系 - 流量
+  }
+  const colors = colorSchemes[type] || ['#9CA3AF', '#6B7280']
+  // 交替使用深浅色增加对比
+  return index % 2 === 0 ? colors[0] : colors[1]
+}
+
+const recordsTotalPages = computed(() => Math.ceil(recordsTotal.value / recordsPageSize.value))
+const pointsLogsTotalPages = computed(() => Math.ceil(pointsLogsTotal.value / pointsLogsPageSize.value))
+
+// 转盘奖品
+const wheelPrizes = computed(() => {
+  if (!selectedLottery.value?.prizes) return []
+  return selectedLottery.value.prizes
+})
+
+// 转盘辅助函数
+function polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {
+  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians)
+  }
+}
+
+function getWheelSegmentPath(index: number, total: number): string {
+  const centerX = 100
+  const centerY = 100
+  const radius = 100
+  const anglePerSegment = 360 / total
+  const startAngle = index * anglePerSegment
+  const endAngle = (index + 1) * anglePerSegment
+  
+  const start = polarToCartesian(centerX, centerY, radius, endAngle)
+  const end = polarToCartesian(centerX, centerY, radius, startAngle)
+  const largeArcFlag = anglePerSegment > 180 ? 1 : 0
+  
+  return [
+    'M', centerX, centerY,
+    'L', start.x, start.y,
+    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,
+    'Z'
+  ].join(' ')
+}
+
+function getWheelTextTransform(index: number, total: number): string {
+  const anglePerSegment = 360 / total
+  const angle = index * anglePerSegment + anglePerSegment / 2 - 90
+  const radius = 65
+  const centerX = 100
+  const centerY = 100
+  const x = centerX + radius * Math.cos(angle * Math.PI / 180)
+  const y = centerY + radius * Math.sin(angle * Math.PI / 180)
+  const textRotation = angle + 90
+  return `translate(${x}, ${y}) rotate(${textRotation})`
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('entertainment.title') }}</h1>
+      <p class="text-sm text-themed-muted mt-1">{{ $t('entertainment.description') }}</p>
+    </div>
+
+    <!-- 主选项卡（Vercel 极简风格） -->
+    <div class="flex gap-1 mb-6 p-1 bg-themed-secondary/50 rounded-lg w-fit">
+      <button
+        class="relative flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 active:scale-95"
+        :class="mainTab === 'vip'
+          ? 'bg-themed text-themed shadow-sm'
+          : 'text-themed-secondary hover:text-themed hover:bg-themed/50'"
+        @click="mainTab = 'vip'"
+      >
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H4.5a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+        </svg>
+        <span>{{ $t('entertainment.mainTabs.vipBenefits') }}</span>
+      </button>
+
+      <!-- 抽奖选项卡 -->
+      <button
+        class="relative flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 active:scale-95"
+        :class="mainTab === 'lottery' 
+          ? 'bg-themed text-themed shadow-sm' 
+          : 'text-themed-secondary hover:text-themed hover:bg-themed/50'"
+        @click="mainTab = 'lottery'"
+      >
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <span>{{ $t('entertainment.mainTabs.lottery') }}</span>
+      </button>
+      
+      <!-- 签到选项卡：暂时下线，保留实现供后续改版复用 -->
+      <button
+        v-if="checkinFeatureEnabled"
+        class="relative flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 active:scale-95"
+        :class="mainTab === 'checkin' 
+          ? 'bg-themed text-themed shadow-sm' 
+          : 'text-themed-secondary hover:text-themed hover:bg-themed/50'"
+        @click="mainTab = 'checkin'"
+      >
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        <span>{{ $t('entertainment.mainTabs.checkin') }}</span>
+      </button>
+
+      <button
+        class="relative flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 active:scale-95"
+        :class="mainTab === 'badge'
+          ? 'bg-themed text-themed shadow-sm'
+          : 'text-themed-secondary hover:text-themed hover:bg-themed/50'"
+        @click="badgeInitialTab = 'draw'; mainTab = 'badge'"
+      >
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8l1.902 3.854L18 12.472l-3 2.924.708 4.128L12 17.5l-3.708 2.024L9 15.396l-3-2.924 4.098-.618L12 8z" />
+        </svg>
+        <span>{{ $t('entertainment.mainTabs.badge') }}</span>
+      </button>
+    </div>
+
+    <div v-show="mainTab === 'vip'">
+      <VipBenefitHall />
+    </div>
+
+    <!-- ==================== 抽奖功能区域 ==================== -->
+    <div v-show="mainTab === 'lottery'">
+      <!-- 积分卡片 -->
+      <div class="card p-4 mb-6">
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div class="flex items-center gap-4">
+            <div class="w-12 h-12 rounded-full bg-amber-500/10 flex items-center justify-center">
+              <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+              </svg>
+            </div>
+            <div>
+              <div class="text-sm text-themed-muted">{{ $t('entertainment.currentPoints') }}</div>
+              <div class="text-2xl font-bold text-themed">{{ points.points.toLocaleString() }}</div>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <!-- 十连抽按钮 -->
+            <button 
+              v-if="selectedLottery"
+              class="btn btn-primary flex items-center gap-1"
+              :disabled="isMultiDrawing || isSpinning || points.points < selectedLottery.costPoints * 10"
+              @click="multiDraw"
+            >
+              <svg v-if="isMultiDrawing" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </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 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              {{ $t('entertainment.multiDraw') }}
+              <span class="text-xs opacity-75">({{ selectedLottery.costPoints * 10 }}{{ $t('entertainment.pointsUnit') }})</span>
+            </button>
+            <!-- 兑换积分按钮 -->
+            <button 
+              class="btn btn-primary"
+              :disabled="converting || points.convertiblePoints <= 0"
+              @click="convertPoints"
+            >
+              <svg v-if="converting" class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ $t('entertainment.convertPoints') }}
+              <span v-if="points.convertiblePoints > 0" class="ml-1 text-xs opacity-75">
+                (+{{ points.convertiblePoints }})
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 子 TAB 切换 -->
+      <div class="flex border-b border-themed mb-6">
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="activeTab === 'lottery' 
+            ? 'border-blue-500 text-blue-500' 
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab('lottery')"
+        >
+          {{ $t('entertainment.tabs.lottery') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="activeTab === 'records' 
+            ? 'border-blue-500 text-blue-500' 
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab('records')"
+        >
+          {{ $t('entertainment.tabs.records') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="activeTab === 'points' 
+            ? 'border-blue-500 text-blue-500' 
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab('points')"
+        >
+          {{ $t('entertainment.tabs.points') }}
+        </button>
+      </div>
+
+      <!-- 抽奖 TAB -->
+      <div v-show="activeTab === 'lottery'" class="space-y-6">
+        <!-- 活动选择 -->
+        <div v-if="lotteries.length > 1" class="flex gap-2 flex-wrap">
+          <button
+            v-for="lottery in lotteries"
+            :key="lottery.id"
+            class="px-4 py-2 rounded-lg border text-sm transition-all"
+            :class="selectedLottery?.id === lottery.id 
+              ? 'border-blue-500 bg-blue-500/10 text-blue-500' 
+              : 'border-themed text-themed-muted hover:border-themed-hover'"
+            @click="selectLottery(lottery)"
+          >
+            {{ lottery.name }}
+            <span class="text-xs opacity-75 ml-1">({{ lottery.costPoints }}{{ $t('entertainment.pointsUnit') }})</span>
+          </button>
+        </div>
+
+        <!-- 无活动提示 -->
+        <div v-if="!lotteriesLoading && lotteries.length === 0" class="card p-8 text-center">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
+            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+            </svg>
+          </div>
+          <p class="text-themed-muted">{{ $t('entertainment.noActiveLotteries') }}</p>
+        </div>
+
+        <!-- 抽奖转盘 -->
+        <div v-else-if="selectedLottery" class="flex flex-col items-center">
+          <!-- 转盘容器 -->
+          <div class="relative w-72 h-72 sm:w-96 sm:h-96 mb-8">
+            <!-- 最外层底座阴影 -->
+            <div class="absolute inset-[-8px] sm:inset-[-12px] rounded-full bg-gradient-to-b from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 shadow-2xl"></div>
+          
+            <!-- 外圈金属装饰环 -->
+            <div class="absolute inset-[-4px] sm:inset-[-6px] rounded-full bg-gradient-to-br from-amber-300 via-yellow-400 to-amber-500 shadow-xl">
+              <!-- 灯泡装饰 - 奇偶交替闪烁 -->
+              <div class="absolute inset-0">
+                <div 
+                  v-for="i in 16" 
+                  :key="i"
+                  class="absolute w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full transition-all duration-100"
+                  :class="[
+                    isSpinning && (i % 2 === bulbPhase) 
+                      ? 'bg-white shadow-lg shadow-white/80 scale-110' 
+                      : 'bg-amber-200/80 shadow-sm'
+                  ]"
+                  :style="{
+                    left: `calc(50% + ${Math.cos((i - 1) * 22.5 * Math.PI / 180) * 48}% - 5px)`,
+                    top: `calc(50% + ${Math.sin((i - 1) * 22.5 * Math.PI / 180) * 48}% - 5px)`
+                  }"
+                ></div>
+              </div>
+            </div>
+          
+            <!-- 内圈边框 -->
+            <div class="absolute inset-1 sm:inset-2 rounded-full bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-inner"></div>
+          
+            <!-- 转盘主体 -->
+            <div 
+              class="absolute inset-3 sm:inset-4 rounded-full overflow-hidden shadow-inner wheel-spin"
+              :style="{ 
+                transform: `rotate(${wheelRotation}deg)`,
+                transitionDuration: isSpinning ? '2s' : '0s',
+                transitionTimingFunction: isSpinning 
+                  ? 'cubic-bezier(0.17, 0.67, 0.12, 0.99)' // 慢启动 → 快速旋转 → 慢减速
+                  : 'ease-out'
+              }"
+            >
+              <svg viewBox="0 0 200 200" class="w-full h-full drop-shadow-lg">
+                <!-- 定义渐变 -->
+                <defs>
+                  <radialGradient id="wheelGlow" cx="50%" cy="50%" r="50%">
+                    <stop offset="0%" stop-color="rgba(255,255,255,0.3)" />
+                    <stop offset="100%" stop-color="rgba(255,255,255,0)" />
+                  </radialGradient>
+                  <filter id="prizeShadow" x="-20%" y="-20%" width="140%" height="140%">
+                    <feDropShadow dx="0" dy="1" stdDeviation="1" flood-opacity="0.3" />
+                  </filter>
+                </defs>
+              
+                <!-- 奖品扇区 -->
+                <g v-for="(prize, idx) in wheelPrizes" :key="prize.id">
+                  <!-- 扇区背景 -->
+                  <path
+                    :d="getWheelSegmentPath(Number(idx), wheelPrizes.length)"
+                    :fill="getWheelGradientColor(prize.type, Number(idx))"
+                    stroke="rgba(255,255,255,0.5)"
+                    stroke-width="1"
+                  />
+                  <!-- 扇区分隔线 -->
+                  <path
+                    :d="getWheelSegmentPath(Number(idx), wheelPrizes.length)"
+                    fill="none"
+                    stroke="rgba(255,255,255,0.8)"
+                    stroke-width="2"
+                  />
+                  <!-- 奖品文字 -->
+                  <text
+                    :transform="getWheelTextTransform(Number(idx), wheelPrizes.length)"
+                    fill="white"
+                    font-size="9"
+                    font-weight="600"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    filter="url(#prizeShadow)"
+                    style="text-shadow: 0 1px 2px rgba(0,0,0,0.5)"
+                  >
+                    {{ prize.name.length > 5 ? prize.name.slice(0, 5) + '..' : prize.name }}
+                  </text>
+                </g>
+              
+                <!-- 中心光晕 -->
+                <circle cx="100" cy="100" r="100" fill="url(#wheelGlow)" />
+              </svg>
+            </div>
+
+            <!-- 指针 - 更精致的设计 -->
+            <div class="absolute top-[-2px] sm:top-[-4px] left-1/2 -translate-x-1/2 z-30">
+              <div class="relative">
+                <!-- 指针阴影 -->
+                <div class="absolute top-1 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[14px] border-r-[14px] border-t-[32px] sm:border-l-[16px] sm:border-r-[16px] sm:border-t-[40px] border-l-transparent border-r-transparent border-t-black/20 blur-sm"></div>
+                <!-- 指针主体 -->
+                <div class="relative w-0 h-0 border-l-[14px] border-r-[14px] border-t-[32px] sm:border-l-[16px] sm:border-r-[16px] sm:border-t-[40px] border-l-transparent border-r-transparent border-t-red-500">
+                  <!-- 指针高光 -->
+                  <div class="absolute -top-[32px] sm:-top-[40px] left-[-4px] w-0 h-0 border-l-[4px] border-r-[4px] border-t-[20px] sm:border-t-[26px] border-l-transparent border-r-transparent border-t-red-400"></div>
+                </div>
+                <!-- 指针底座 -->
+                <div class="absolute top-[28px] sm:top-[36px] left-1/2 -translate-x-1/2 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-gradient-to-b from-red-400 to-red-600 shadow-md"></div>
+              </div>
+            </div>
+
+            <!-- 中心按钮 -->
+            <button
+              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 sm:w-24 sm:h-24 rounded-full z-20 group"
+              :class="{ 'animate-pulse-slow': !isSpinning && points.points >= selectedLottery.costPoints }"
+              :disabled="isSpinning || points.points < selectedLottery.costPoints"
+              @click="spin"
+            >
+              <!-- 按钮外圈 -->
+              <div class="absolute inset-0 rounded-full bg-gradient-to-b from-amber-400 to-amber-600 shadow-lg group-hover:from-amber-300 group-hover:to-amber-500 transition-all"></div>
+              <!-- 按钮内圈 -->
+              <div class="absolute inset-1 rounded-full bg-gradient-to-b from-red-400 via-red-500 to-red-700 shadow-inner group-hover:from-red-300 group-hover:via-red-400 group-hover:to-red-600 transition-all"></div>
+              <!-- 按钮高光 -->
+              <div class="absolute inset-2 rounded-full bg-gradient-to-b from-white/30 to-transparent"></div>
+              <!-- 按钮文字 -->
+              <span class="relative z-10 text-white text-base sm:text-lg font-bold drop-shadow-md">
+                <span v-if="isSpinning" class="inline-flex">
+                  <span class="animate-bounce" style="animation-delay: 0ms">.</span>
+                  <span class="animate-bounce" style="animation-delay: 100ms">.</span>
+                  <span class="animate-bounce" style="animation-delay: 200ms">.</span>
+                </span>
+                <span v-else>{{ $t('entertainment.spin') }}</span>
+              </span>
+              <!-- 禁用遮罩 -->
+              <div 
+                v-if="points.points < selectedLottery.costPoints"
+                class="absolute inset-0 rounded-full bg-gray-900/50 cursor-not-allowed"
+              ></div>
+            </button>
+          </div>
+
+          <!-- 消耗提示 -->
+          <div class="flex items-center gap-2 text-sm">
+            <svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+            <span class="text-themed-muted">
+              {{ $t('entertainment.spinCost', { points: selectedLottery.costPoints }) }}
+            </span>
+          </div>
+
+          <!-- 奖品列表 -->
+          <div class="w-full mt-6">
+            <h3 class="text-sm font-medium text-themed mb-3">{{ $t('entertainment.prizeList') }}</h3>
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+              <div 
+                v-for="prize in wheelPrizes" 
+                :key="prize.id"
+                class="card p-3 text-center"
+              >
+                <div 
+                  class="w-3 h-3 rounded-full mx-auto mb-2"
+                  :style="{ backgroundColor: getPrizeColor(prize.type) }"
+                ></div>
+                <div class="text-sm text-themed font-medium truncate">{{ prize.name }}</div>
+                <div class="text-xs text-themed-muted">{{ getPrizeTypeName(prize.type) }}</div>
+                <!-- 概率和数量 -->
+                <div class="text-xs text-themed-muted mt-1 space-y-0.5">
+                  <div>{{ $t('entertainment.probability') }}: {{ prize.probability }}%</div>
+                  <div v-if="prize.totalQuantity !== null">
+                    {{ $t('entertainment.remaining') }}: {{ prize.remainQuantity ?? 0 }}/{{ prize.totalQuantity }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 抽奖记录 TAB -->
+      <div v-show="activeTab === 'records'" class="card">
+        <!-- 筛选栏 -->
+        <div class="flex items-center gap-4 p-4 border-b border-themed">
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-themed-muted">{{ $t('entertainment.prizeType') }}:</span>
+            <select 
+              v-model="recordsTypeFilter" 
+              class="input py-1.5 px-3 min-w-[100px] text-sm"
+              @change="recordsPage = 1; loadRecords()"
+            >
+              <option value="">{{ $t('common.all') }}</option>
+              <option value="nothing">{{ $t('entertainment.prizeTypes.nothing') }}</option>
+              <option value="points">{{ $t('entertainment.prizeTypes.points') }}</option>
+              <option value="balance">{{ $t('entertainment.prizeTypes.balance') }}</option>
+              <option value="badge">{{ $t('entertainment.prizeTypes.badge') }}</option>
+              <option value="instance">{{ $t('entertainment.prizeTypes.instance') }}</option>
+              <option value="cpu">{{ $t('entertainment.prizeTypes.cpu') }}</option>
+              <option value="memory">{{ $t('entertainment.prizeTypes.memory') }}</option>
+              <option value="disk">{{ $t('entertainment.prizeTypes.disk') }}</option>
+              <option value="traffic">{{ $t('entertainment.prizeTypes.traffic') }}</option>
+            </select>
+          </div>
+        </div>
+        <div v-if="recordsLoading" class="p-8 text-center text-themed-muted">
+          {{ $t('common.loading') }}...
+        </div>
+        <div v-else-if="records.length === 0" class="p-8 text-center text-themed-muted">
+          {{ $t('entertainment.noRecords') }}
+        </div>
+        <div v-else class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-themed text-left text-sm text-themed-muted">
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.lotteryName') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.prize') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.prizeType') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.value') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.time') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="rec in records" :key="rec.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3 text-sm text-themed">{{ rec.lotteryName || '-' }}</td>
+                <td class="px-4 py-3 text-sm text-themed">{{ rec.prizeName || '-' }}</td>
+                <td class="px-4 py-3 text-sm">
+                  <span 
+                    class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium"
+                    :style="{ 
+                      backgroundColor: getPrizeColor(rec.prizeType) + '20', 
+                      color: getPrizeColor(rec.prizeType) 
+                    }"
+                  >
+                    {{ getPrizeTypeName(rec.prizeType) }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-sm text-themed">
+                  <template v-if="rec.prizeType === 'points'">+{{ rec.prizeValue }} {{ $t('entertainment.pointsUnit') }}</template>
+                  <template v-else-if="rec.prizeType === 'balance'">+¥{{ (rec.prizeValue / 100).toFixed(2) }}</template>
+                  <template v-else-if="rec.prizeType === 'badge'">{{ rec.prizeName || $t('entertainment.prizeTypes.badge') }}</template>
+                  <template v-else-if="rec.prizeType === 'instance'">{{ rec.instanceDesc || $t('entertainment.wonInstance') }}</template>
+                  <template v-else-if="rec.prizeType === 'cpu'">+{{ rec.prizeValue }}%</template>
+                  <template v-else-if="rec.prizeType === 'memory'">+{{ rec.prizeValue }}MB</template>
+                  <template v-else-if="rec.prizeType === 'disk'">+{{ rec.prizeValue }}MB</template>
+                  <template v-else-if="rec.prizeType === 'traffic'">+{{ rec.prizeValue }}GB</template>
+                  <template v-else>-</template>
+                </td>
+                <td class="px-4 py-3 text-sm text-themed-muted">{{ formatDate(rec.createdAt) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        
+          <!-- 分页 -->
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-4 p-4 border-t border-themed">
+            <!-- 每页条数 -->
+            <div class="flex items-center gap-2 text-sm text-themed-muted">
+              <span>{{ $t('common.perPage') }}</span>
+              <select
+                :value="recordsPageSize"
+                class="input w-20 py-1 text-sm"
+                @change="recordsPageSize = Number(($event.target as HTMLSelectElement).value); recordsPage = 1; loadRecords()"
+              >
+                <option v-for="size in recordsPageSizeOptions" :key="size" :value="size">{{ size }}</option>
+              </select>
+              <span>{{ $t('common.totalCount', { count: recordsTotal }) }}</span>
+            </div>
+            <!-- 分页导航 -->
+            <div v-if="recordsTotalPages > 1" class="flex items-center gap-2">
+              <button
+                class="btn btn-sm btn-ghost"
+                :disabled="recordsPage <= 1"
+                @click="recordsPage--; loadRecords()"
+              >
+                {{ $t('common.prevPage') }}
+              </button>
+              <span class="text-sm text-themed-muted">{{ recordsPage }} / {{ recordsTotalPages }}</span>
+              <button
+                class="btn btn-sm btn-ghost"
+                :disabled="recordsPage >= recordsTotalPages"
+                @click="recordsPage++; loadRecords()"
+              >
+                {{ $t('common.nextPage') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 积分明细 TAB -->
+      <div v-show="activeTab === 'points'" class="card">
+        <div v-if="pointsLogsLoading" class="p-8 text-center text-themed-muted">
+          {{ $t('common.loading') }}...
+        </div>
+        <div v-else-if="pointsLogs.length === 0" class="p-8 text-center text-themed-muted">
+          {{ $t('entertainment.noPointsLogs') }}
+        </div>
+        <div v-else class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-themed text-left text-sm text-themed-muted">
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.pointsLogType') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.pointsChange') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.pointsAfter') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.remark') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('entertainment.time') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="log in pointsLogs" :key="log.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3 text-sm text-themed">{{ getPointsLogTypeName(log.type) }}</td>
+                <td class="px-4 py-3 text-sm" :class="log.amount >= 0 ? 'text-green-500' : 'text-red-500'">
+                  {{ log.amount >= 0 ? '+' : '' }}{{ log.amount }}
+                </td>
+                <td class="px-4 py-3 text-sm text-themed">{{ log.pointsAfter }}</td>
+                <td class="px-4 py-3 text-sm text-themed-muted">{{ log.remark || '-' }}</td>
+                <td class="px-4 py-3 text-sm text-themed-muted">{{ formatDate(log.createdAt) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        
+          <!-- 分页 -->
+          <div v-if="pointsLogsTotalPages > 1" class="flex justify-center items-center gap-2 p-4 border-t border-themed">
+            <button
+              class="btn btn-sm btn-ghost"
+              :disabled="pointsLogsPage <= 1"
+              @click="pointsLogsPage--; loadPointsLogs()"
+            >
+              {{ $t('common.prevPage') }}
+            </button>
+            <span class="text-sm text-themed-muted">{{ pointsLogsPage }} / {{ pointsLogsTotalPages }}</span>
+            <button
+              class="btn btn-sm btn-ghost"
+              :disabled="pointsLogsPage >= pointsLogsTotalPages"
+              @click="pointsLogsPage++; loadPointsLogs()"
+            >
+              {{ $t('common.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    <!-- 抽奖功能区域结束 -->
+    </div>
+
+    <div v-if="mainTab === 'badge'">
+      <BadgeCenter :initial-tab="badgeInitialTab" @points-updated="loadPoints" />
+    </div>
+
+    <!-- ==================== 签到功能区域 ==================== -->
+    <div v-show="checkinFeatureEnabled && mainTab === 'checkin'" class="space-y-6">
+      <!-- 资源池卡片（总览） -->
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4">
+        <div class="card p-3 sm:p-4 border-l-4 border-blue-500">
+          <div class="flex items-center gap-2 sm:gap-3">
+            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0">
+              <svg class="w-4 h-4 sm:w-5 sm:h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <div class="min-w-0">
+              <div class="text-xs text-themed-muted">CPU</div>
+              <div class="text-sm sm:text-lg font-bold text-blue-500 whitespace-nowrap">{{ resourcePool.cpu }}%</div>
+            </div>
+          </div>
+        </div>
+        <div class="card p-3 sm:p-4 border-l-4 border-purple-500">
+          <div class="flex items-center gap-2 sm:gap-3">
+            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-purple-500/10 flex items-center justify-center flex-shrink-0">
+              <svg class="w-4 h-4 sm:w-5 sm:h-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+              </svg>
+            </div>
+            <div class="min-w-0">
+              <div class="text-xs text-themed-muted">{{ $t('checkin.memory') }}</div>
+              <div class="text-sm sm:text-lg font-bold text-purple-500 whitespace-nowrap">{{ resourcePool.memory }} MB</div>
+            </div>
+          </div>
+        </div>
+        <div class="card p-3 sm:p-4 border-l-4 border-amber-500">
+          <div class="flex items-center gap-2 sm:gap-3">
+            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-amber-500/10 flex items-center justify-center flex-shrink-0">
+              <svg class="w-4 h-4 sm:w-5 sm:h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+              </svg>
+            </div>
+            <div class="min-w-0">
+              <div class="text-xs text-themed-muted">{{ $t('checkin.disk') }}</div>
+              <div class="text-sm sm:text-lg font-bold text-amber-500 whitespace-nowrap">{{ resourcePool.disk }} MB</div>
+            </div>
+          </div>
+        </div>
+        <div class="card p-3 sm:p-4 border-l-4 border-emerald-500">
+          <div class="flex items-center gap-2 sm:gap-3">
+            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
+              <svg class="w-4 h-4 sm:w-5 sm:h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+              </svg>
+            </div>
+            <div class="min-w-0">
+              <div class="text-xs text-themed-muted">{{ $t('checkin.traffic') }}</div>
+              <div class="text-sm sm:text-lg font-bold text-emerald-500 whitespace-nowrap">{{ resourcePool.traffic }} GB</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 签到子TAB切换 -->
+      <div class="flex border-b border-themed">
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="checkinTab === 'checkin' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchCheckinTab('checkin')"
+        >
+          {{ $t('checkin.tabCheckin') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="checkinTab === 'redeem' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchCheckinTab('redeem')"
+        >
+          {{ $t('checkin.tabRedeem') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="checkinTab === 'pool' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchCheckinTab('pool')"
+        >
+          {{ $t('checkin.tabPool') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="checkinTab === 'logs' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchCheckinTab('logs')"
+        >
+          {{ $t('checkin.tabLogs') }}
+        </button>
+      </div>
+
+      <!-- 签到子TAB: 签到 -->
+      <div v-show="checkinTab === 'checkin'" class="card p-6">
+        <div class="flex flex-col items-center">
+          <!-- 签到礼盒动画 -->
+          <div class="relative w-48 h-48 mb-6">
+            <!-- 纸屑动画 -->
+            <div v-if="checkinPhase === 'revealing' || checkinPhase === 'done'" class="absolute inset-0 overflow-hidden pointer-events-none">
+              <div
+                v-for="particle in confettiParticles"
+                :key="particle.id"
+                class="absolute animate-confetti"
+                :style="{
+                  left: `${particle.x}%`,
+                  top: '-10%',
+                  width: `${particle.size}px`,
+                  height: `${particle.size}px`,
+                  backgroundColor: particle.color,
+                  animationDelay: `${particle.delay}s`,
+                  borderRadius: Math.random() > 0.5 ? '50%' : '0'
+                }"
+              ></div>
+            </div>
+            
+            <!-- 礼盒容器 -->
+            <div class="w-full h-full flex items-center justify-center">
+              <!-- 未签到状态：可点击的礼盒 -->
+              <div 
+                v-if="checkinPhase === 'idle' || checkinPhase === 'shaking' || checkinPhase === 'opening'"
+                class="cursor-pointer"
+                @click="checkinStatus?.hasCheckedIn ? null : doCheckin()"
+              >
+                <!-- 礼盒图标 - 只有这里应用shake动画 -->
+                <div 
+                  :class="[
+                    'w-32 h-32 mx-auto rounded-2xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center shadow-lg transition-all duration-200',
+                    {
+                      'animate-shake-box': checkinPhase === 'shaking',
+                      'animate-open-box': checkinPhase === 'opening',
+                      'hover:scale-105 hover:shadow-xl': checkinPhase === 'idle'
+                    }
+                  ]"
+                >
+                  <svg class="w-16 h-16 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+                  </svg>
+                </div>
+              </div>
+              
+              <!-- 签到结果显示 -->
+              <div v-else-if="checkinPhase === 'revealing' || checkinPhase === 'done'" class="text-center animate-scale-in">
+                <div :class="['w-24 h-24 mx-auto mb-4 rounded-2xl flex items-center justify-center', getResourceBgColor(checkinResult?.type || 'c')]">
+                  <span :class="['text-3xl font-bold', getResourceColor(checkinResult?.type || 'c')]">
+                    +{{ checkinResult?.value }}{{ getResourceUnit(checkinResult?.type || 'c') }}
+                  </span>
+                </div>
+                <p class="text-lg font-semibold text-themed">{{ getResourceTypeName(checkinResult?.type || 'c') }}</p>
+                <p class="text-sm text-themed-muted mt-1">{{ $t('checkin.bonusPoints', { points: checkinResult?.bonusPoints }) }}</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 签到提示文字 - 在动画容器外部，不受动画影响 -->
+          <p v-if="checkinPhase === 'idle' && !checkinStatus?.hasCheckedIn" class="text-sm text-themed-muted mb-4">
+            {{ $t('checkin.clickToCheckin') }}
+          </p>
+
+          <!-- 签到状态 -->
+          <div v-if="checkinStatus" class="text-center">
+            <!-- 签到结果显示时不显示"今日已签到"，因为结果本身就说明已签到 -->
+            <div v-if="checkinStatus.hasCheckedIn && checkinPhase === 'idle'" class="flex items-center justify-center gap-2 text-emerald-500 mb-4">
+              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span>{{ $t('checkin.alreadyCheckedIn') }}</span>
+            </div>
+            <div v-else-if="!checkinStatus.hasInstances && checkinPhase === 'idle'" class="text-amber-500 text-sm mb-4">
+              {{ $t('checkin.noInstances') }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 签到子TAB: 兑换码 -->
+      <div v-show="checkinTab === 'redeem'" class="card p-6">
+        <h3 class="text-lg font-medium text-themed mb-4">{{ $t('checkin.redeemSystemCode') }}</h3>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-themed-muted mb-1">{{ $t('checkin.enterCode') }}</label>
+            <input
+              v-model="redeemCodeInput"
+              type="text"
+              class="input w-full"
+              :placeholder="$t('checkin.systemCodePlaceholder')"
+            />
+          </div>
+          <!-- 系统码必须选择实例 -->
+          <div>
+            <label class="block text-sm text-themed-muted mb-1">{{ $t('checkin.targetInstance') }}</label>
+            <InstanceSelector
+              v-model="redeemSelectedInstance"
+              :instances="poolInstances"
+              :placeholder="$t('checkin.selectInstance')"
+            />
+          </div>
+          <div class="text-xs text-themed-muted p-3 rounded-lg bg-themed-secondary">
+            <p>{{ $t('checkin.systemCodeHint') }}</p>
+          </div>
+          <button
+            class="btn btn-primary w-full"
+            :disabled="redeemLoading || !redeemCodeInput.trim() || !redeemSelectedInstance"
+            @click="redeemCode"
+          >
+            <svg v-if="redeemLoading" class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            {{ $t('checkin.redeem') }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 签到子TAB: 资源池应用 -->
+      <div v-show="checkinTab === 'pool'" class="card p-6">
+        <h3 class="text-lg font-medium text-themed mb-4">{{ $t('checkin.applyToInstance') }}</h3>
+        <div class="grid gap-4 md:grid-cols-2">
+          <div>
+            <label class="block text-sm text-themed-muted mb-1">{{ $t('checkin.resourceType') }}</label>
+            <select v-model="applyForm.resourceType" class="input w-full">
+              <option value="c">CPU ({{ resourcePool.cpu }}%)</option>
+              <option value="r">{{ $t('checkin.memory') }} ({{ resourcePool.memory }} MB)</option>
+              <option value="d">{{ $t('checkin.disk') }} ({{ resourcePool.disk }} MB)</option>
+              <option value="t">{{ $t('checkin.traffic') }} ({{ resourcePool.traffic }} GB)</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm text-themed-muted mb-1">{{ $t('checkin.amount') }}</label>
+            <input
+              v-model.number="applyForm.amount"
+              type="number"
+              min="1"
+              class="input w-full"
+            />
+          </div>
+          <div class="md:col-span-2">
+            <label class="block text-sm text-themed-muted mb-1">{{ $t('checkin.targetInstance') }}</label>
+            <InstanceSelector
+              v-model="applyForm.instanceId"
+              :instances="poolInstances"
+              :placeholder="$t('checkin.selectInstance')"
+            />
+          </div>
+        </div>
+        <!-- KVM 实例限制提示 -->
+        <div class="text-xs text-amber-500 mt-2 space-y-1">
+          <p>{{ $t('checkin.kvmHint') }}</p>
+        </div>
+        <button
+          class="btn btn-primary w-full mt-4"
+          :disabled="applyLoading || !applyForm.instanceId || applyForm.amount <= 0"
+          @click="applyResource"
+        >
+          <svg v-if="applyLoading" class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          {{ $t('checkin.apply') }}
+        </button>
+      </div>
+
+      <!-- 签到子TAB: 记录 -->
+      <div v-show="checkinTab === 'logs'" class="card">
+        <!-- 筛选 -->
+        <div class="flex flex-wrap gap-4 p-4 border-b border-themed">
+          <select v-model="poolLogsFilter.action" class="input py-1.5 text-sm" @change="poolLogsPage = 1; loadPoolLogs()">
+            <option value="">{{ $t('checkin.allActions') }}</option>
+            <option value="checkin">{{ $t('checkin.actionCheckin') }}</option>
+            <option value="redeem">{{ $t('checkin.actionRedeem') }}</option>
+            <option value="apply">{{ $t('checkin.actionApply') }}</option>
+            <option value="admin_grant">{{ $t('checkin.actionAdminGrant') }}</option>
+            <option value="lottery">{{ $t('checkin.actionLottery') }}</option>
+            <option value="system_redeem">{{ $t('checkin.actionSystemRedeem') }}</option>
+          </select>
+          <select v-model="poolLogsFilter.resourceType" class="input py-1.5 text-sm" @change="poolLogsPage = 1; loadPoolLogs()">
+            <option value="">{{ $t('checkin.allResources') }}</option>
+            <option value="c">CPU</option>
+            <option value="r">{{ $t('checkin.memory') }}</option>
+            <option value="d">{{ $t('checkin.disk') }}</option>
+            <option value="t">{{ $t('checkin.traffic') }}</option>
+          </select>
+        </div>
+        
+        <div v-if="poolLogsLoading" class="p-8 text-center text-themed-muted">{{ $t('common.loading') }}...</div>
+        <div v-else-if="poolLogs.length === 0" class="p-8 text-center text-themed-muted">{{ $t('checkin.noLogs') }}</div>
+        <div v-else class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-themed text-left text-sm text-themed-muted">
+                <th class="px-4 py-3 font-medium">{{ $t('checkin.action') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('checkin.resourceType') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('checkin.amount') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('checkin.instance') }}</th>
+                <th class="px-4 py-3 font-medium">{{ $t('checkin.time') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="log in poolLogs" :key="log.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3 text-sm text-themed">{{ getActionName(log.action) }}</td>
+                <td class="px-4 py-3 text-sm">
+                  <span :class="['px-2 py-0.5 rounded text-xs font-medium', getResourceBgColor(log.resourceType), getResourceColor(log.resourceType)]">
+                    {{ getResourceTypeName(log.resourceType) }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-sm" :class="log.amount >= 0 ? 'text-emerald-500' : 'text-red-500'">
+                  {{ log.amount >= 0 ? '+' : '' }}{{ log.amount }}{{ getResourceUnit(log.resourceType) }}
+                </td>
+                <td class="px-4 py-3 text-sm text-themed-muted">{{ log.instance?.name || '-' }}</td>
+                <td class="px-4 py-3 text-sm text-themed-muted">{{ new Date(log.createdAt).toLocaleString() }}</td>
+              </tr>
+            </tbody>
+          </table>
+          
+          <!-- 分页 -->
+          <div v-if="poolLogsTotalPages > 1" class="flex justify-center items-center gap-2 p-4 border-t border-themed">
+            <button class="btn btn-sm btn-ghost" :disabled="poolLogsPage <= 1" @click="poolLogsPage--; loadPoolLogs()">
+              {{ $t('common.prevPage') }}
+            </button>
+            <span class="text-sm text-themed-muted">{{ poolLogsPage }} / {{ poolLogsTotalPages }}</span>
+            <button class="btn btn-sm btn-ghost" :disabled="poolLogsPage >= poolLogsTotalPages" @click="poolLogsPage++; loadPoolLogs()">
+              {{ $t('common.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <BadgeRewardModal
+      :visible="lotteryBadgeRewardModal.visible"
+      mode="draw"
+      :ownership="lotteryBadgeRewardModal.ownership"
+      :remaining-points="lotteryBadgeRewardModal.remainingPoints"
+      :show-primary-action="true"
+      :primary-action-label="isSpinning ? $t('common.processing') : $t('entertainment.badges.rewardDrawAgain')"
+      :primary-action-disabled="!canSpinAgainFromLotteryBadgeReward"
+      @close="closeLotteryBadgeRewardModal"
+      @view-mine="jumpToMyBadgesFromLotteryReward"
+      @primary-action="spinAgainFromLotteryBadgeReward"
+    />
+
+    <!-- 中奖结果弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div 
+          v-if="showResultModal" 
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          @click.self="closeResultModal"
+        >
+          <div class="card p-6 w-full max-w-sm text-center animate-scale-in">
+            <div v-if="spinResult?.prizeType === 'nothing'" class="mb-4">
+              <div class="w-16 h-16 mx-auto mb-3 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
+                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-medium text-themed">{{ $t('entertainment.betterLuckNextTime') }}</h3>
+              <p class="text-sm text-themed-muted mt-1">{{ spinResult?.prizeName }}</p>
+            </div>
+            <div v-else class="mb-4">
+              <div class="w-16 h-16 mx-auto mb-3 rounded-full bg-amber-500/10 flex items-center justify-center">
+                <svg class="w-8 h-8 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-medium text-themed">{{ $t('entertainment.congratulations') }}</h3>
+              <p class="text-xl font-bold mt-2" :style="{ color: getPrizeColor(spinResult?.prizeType) }">
+                {{ spinResult?.prizeName }}
+              </p>
+              <p class="text-sm text-themed-muted mt-2">
+                <template v-if="spinResult?.prizeType === 'points'">
+                  {{ $t('entertainment.wonPoints', { points: spinResult.prizeValue }) }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'balance'">
+                  {{ $t('entertainment.wonBalance', { amount: (spinResult.prizeValue / 100).toFixed(2) }) }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'badge'">
+                  {{ $t('entertainment.wonBadge', { badge: spinResult.prizeName }) }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'instance'">
+                  {{ $t('entertainment.wonInstance') }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'cpu'">
+                  {{ $t('entertainment.wonCpu', { value: spinResult.prizeValue }) }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'memory'">
+                  {{ $t('entertainment.wonMemory', { value: spinResult.prizeValue }) }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'disk'">
+                  {{ $t('entertainment.wonDisk', { value: spinResult.prizeValue }) }}
+                </template>
+                <template v-else-if="spinResult?.prizeType === 'traffic'">
+                  {{ $t('entertainment.wonTraffic', { value: spinResult.prizeValue }) }}
+                </template>
+              </p>
+            </div>
+            <button class="btn btn-primary w-full" @click="closeResultModal">
+              {{ $t('common.confirm') }}
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <BadgeBatchRewardModal
+      :visible="showMultiDrawBadgeModal"
+      :badges="multiDrawBadgeRewards"
+      :title="$t('entertainment.multiDrawBadgesTitle')"
+      :subtitle="$t('entertainment.multiDrawBadgesSubtitle', { count: multiDrawBadgeRewards.length })"
+      :confirm-label="$t('entertainment.continueToMultiResults')"
+      @close="continueToMultiDrawResults"
+    />
+
+    <!-- 十连抽结果弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div 
+          v-if="showMultiDrawModal" 
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          @click.self="closeMultiDrawModal"
+        >
+          <div class="card p-6 w-full max-w-lg animate-scale-in">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-themed">{{ $t('entertainment.multiDrawResults') }}</h3>
+              <button 
+                class="p-1 hover:bg-themed-hover rounded-lg transition-colors"
+                @click="closeMultiDrawModal"
+              >
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            
+            <!-- 结果列表 -->
+            <div class="max-h-80 overflow-y-auto space-y-2 mb-4">
+              <div 
+                v-for="(result, idx) in multiDrawResults" 
+                :key="result.id"
+                class="flex items-center gap-3 p-3 rounded-lg bg-themed-hover"
+              >
+                <span class="text-sm text-themed-muted w-6">#{{ idx + 1 }}</span>
+                <div 
+                  class="w-3 h-3 rounded-full flex-shrink-0"
+                  :style="{ backgroundColor: getPrizeColor(result.prizeType) }"
+                ></div>
+                <span class="text-sm text-themed flex-1 truncate">{{ result.prizeName }}</span>
+                <span class="text-xs text-themed-muted">
+                  <template v-if="result.prizeType === 'points'">+{{ result.prizeValue }} {{ $t('entertainment.pointsUnit') }}</template>
+                  <template v-else-if="result.prizeType === 'balance'">+¥{{ (result.prizeValue / 100).toFixed(2) }}</template>
+                  <template v-else-if="result.prizeType === 'badge'">+1 {{ $t('entertainment.badgeUnit') }}</template>
+                  <template v-else-if="result.prizeType === 'instance'">{{ $t('entertainment.wonInstance') }}</template>
+                  <template v-else-if="result.prizeType === 'cpu'">+{{ result.prizeValue }}%</template>
+                  <template v-else-if="result.prizeType === 'memory'">+{{ result.prizeValue }}MB</template>
+                  <template v-else-if="result.prizeType === 'disk'">+{{ result.prizeValue }}MB</template>
+                  <template v-else-if="result.prizeType === 'traffic'">+{{ result.prizeValue }}GB</template>
+                  <template v-else>-</template>
+                </span>
+              </div>
+            </div>
+
+            <!-- 统计摘要 -->
+            <div class="border-t border-themed pt-4 mb-4">
+              <div class="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span class="text-themed-muted">{{ $t('entertainment.totalDraws') }}:</span>
+                  <span class="text-themed font-medium ml-2">{{ multiDrawResults.length }}</span>
+                </div>
+                <div>
+                  <span class="text-themed-muted">{{ $t('entertainment.totalPointsSpent') }}:</span>
+                  <span class="text-themed font-medium ml-2">{{ multiDrawResults.reduce((sum, r) => sum + r.pointsSpent, 0) }}</span>
+                </div>
+              </div>
+              <!-- 奖品统计：显示各类奖品总值 -->
+              <div class="flex flex-wrap gap-2 mt-3">
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('balance') + '20', color: getPrizeColor('balance') }">
+                  {{ $t('entertainment.prizeTypes.balance') }}: {{ multiDrawSummary.balance.toFixed(2) }}
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('badge') + '20', color: getPrizeColor('badge') }">
+                  {{ $t('entertainment.prizeTypes.badge') }}: {{ multiDrawSummary.badge }} {{ $t('entertainment.badgeUnit') }}
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('instance') + '20', color: getPrizeColor('instance') }">
+                  {{ $t('entertainment.prizeTypes.instance') }}: {{ multiDrawSummary.instance }} {{ $t('entertainment.instanceUnit') }}
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('cpu') + '20', color: getPrizeColor('cpu') }">
+                  CPU: {{ multiDrawSummary.cpu }}%
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('memory') + '20', color: getPrizeColor('memory') }">
+                  {{ $t('entertainment.prizeTypes.memory') }}: {{ multiDrawSummary.memory }}MB
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('disk') + '20', color: getPrizeColor('disk') }">
+                  {{ $t('entertainment.prizeTypes.disk') }}: {{ multiDrawSummary.disk }}MB
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('traffic') + '20', color: getPrizeColor('traffic') }">
+                  {{ $t('entertainment.prizeTypes.traffic') }}: {{ multiDrawSummary.traffic }}GB
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('points') + '20', color: getPrizeColor('points') }">
+                  {{ $t('entertainment.prizeTypes.points') }}: {{ multiDrawSummary.points }}
+                </div>
+                <div class="flex items-center gap-1.5 px-2 py-1 rounded text-xs" :style="{ backgroundColor: getPrizeColor('nothing') + '20', color: getPrizeColor('nothing') }">
+                  {{ $t('entertainment.prizeTypes.nothing') }}: {{ multiDrawSummary.nothing }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 错误提示 -->
+            <div v-if="multiDrawError" class="text-sm text-amber-500 bg-amber-500/10 rounded-lg p-3 mb-4">
+              {{ $t('entertainment.multiDrawStopped') }}: {{ multiDrawError }}
+            </div>
+
+            <!-- 按钮组: 确认(30%) + 再次十连(70%) -->
+            <div class="flex gap-2">
+              <button 
+                class="btn btn-secondary flex-[3]"
+                @click="closeMultiDrawModal"
+              >
+                {{ $t('common.confirm') }}
+              </button>
+              <button 
+                class="btn btn-primary flex-[7] flex items-center justify-center gap-1"
+                :disabled="isMultiDrawing || !selectedLottery || points.points < selectedLottery.costPoints * 10"
+                @click="multiDrawAgain"
+              >
+                <svg 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 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                {{ $t('entertainment.multiDrawAgain') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+/* 转盘旋转动画 */
+.wheel-spin {
+  transition-property: transform;
+  will-change: transform;
+}
+
+/* 慢速脉冲动画 - 吸引注意力 */
+@keyframes pulse-slow {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.02);
+    box-shadow: 0 0 0 10px rgba(251, 191, 36, 0);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 2s ease-in-out infinite;
+}
+
+/* 灯泡闪烁效果 */
+@keyframes bulb-blink {
+  0%, 50%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.6);
+  }
+  25%, 75% {
+    opacity: 0.6;
+    box-shadow: none;
+  }
+}
+
+/* 中奖弹窗动画 */
+.animate-scale-in {
+  animation: scale-in 0.3s ease-out;
+}
+
+@keyframes scale-in {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 签到礼盒摇晃动画 - Q弹效果 */
+@keyframes shake-box {
+  0%, 100% { 
+    transform: rotate(0deg) scale(1); 
+  }
+  10% { 
+    transform: rotate(-12deg) scale(1.05); 
+  }
+  20% { 
+    transform: rotate(10deg) scale(1.08); 
+  }
+  30% { 
+    transform: rotate(-10deg) scale(1.05); 
+  }
+  40% { 
+    transform: rotate(8deg) scale(1.08); 
+  }
+  50% { 
+    transform: rotate(-6deg) scale(1.05); 
+  }
+  60% { 
+    transform: rotate(6deg) scale(1.08); 
+  }
+  70% { 
+    transform: rotate(-4deg) scale(1.05); 
+  }
+  80% { 
+    transform: rotate(3deg) scale(1.03); 
+  }
+  90% { 
+    transform: rotate(-2deg) scale(1.01); 
+  }
+}
+
+.animate-shake-box {
+  animation: shake-box 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
+  transform-origin: center bottom;
+}
+
+/* 签到礼盒打开动画 - Q弹效果 */
+@keyframes open-box {
+  0% { 
+    transform: scale(1) rotate(0deg); 
+  }
+  20% { 
+    transform: scale(1.15) rotate(-3deg); 
+  }
+  40% { 
+    transform: scale(1.2) rotate(2deg); 
+  }
+  60% { 
+    transform: scale(1.1) rotate(-1deg); 
+  }
+  80% { 
+    transform: scale(0.95) rotate(0deg); 
+  }
+  100% { 
+    transform: scale(0.8) rotate(0deg); 
+    opacity: 0; 
+  }
+}
+
+.animate-open-box {
+  animation: open-box 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+  transform-origin: center center;
+}
+
+/* 纸屑下落动画 */
+@keyframes confetti {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(300px) rotate(720deg);
+    opacity: 0;
+  }
+}
+
+.animate-confetti {
+  animation: confetti 2s ease-out forwards;
+}
+</style>
diff --git a/client/src/views/ExtensionsView.vue b/client/src/views/ExtensionsView.vue
new file mode 100644
index 0000000..940c1f0
--- /dev/null
+++ b/client/src/views/ExtensionsView.vue
@@ -0,0 +1,339 @@
+<script setup lang="ts">
+/**
+ * ExtensionsView - 扩展管理页面
+ * 
+ * TAB 结构：
+ * - 初始化命令：用户自定义的实例初始化命令模板
+ */
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import InitCommandModal from '@/components/extensions/InitCommandModal.vue'
+import InitCommandDetailModal from '@/components/extensions/InitCommandDetailModal.vue'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+
+const { t } = useI18n()
+const toast = useToast()
+
+// TAB 状态
+const activeTab = ref<'init-commands'>('init-commands')
+
+// 命令列表
+interface InitCommand {
+  id: number
+  name: string
+  commandPreview: string
+  commandLineCount: number
+  distros: string[]
+  description: string | null
+  enabled: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+const commands = ref<InitCommand[]>([])
+const loading = ref(false)
+
+// 发行版图标映射
+const distroIcons: Record<string, string> = {
+  ubuntu: 'ubuntu',
+  debian: 'debian',
+  rhel: 'almalinux',
+  alpine: 'alpine',
+  arch: 'arch',
+  suse: 'opensuse',
+  all: 'linux'
+}
+
+// 分页
+const currentPage = ref(1)
+const pageSize = 10
+
+const totalPages = computed(() => Math.ceil(commands.value.length / pageSize))
+const paginatedCommands = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  return commands.value.slice(start, start + pageSize)
+})
+
+function goToPrevPage(): void {
+  if (currentPage.value > 1) currentPage.value--
+}
+
+function goToNextPage(): void {
+  if (currentPage.value < totalPages.value) currentPage.value++
+}
+
+// 加载命令列表
+async function loadCommands(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.initCommands.list()
+    commands.value = response.commands
+  } catch (error: any) {
+    toast.error(t('extensions.initCommands.loadFailed') + ': ' + (error?.message || String(error)))
+  } finally {
+    loading.value = false
+  }
+}
+
+// 新增/编辑弹窗
+const showCommandModal = ref(false)
+const editingCommand = ref<InitCommand | null>(null)
+
+function openAddModal(): void {
+  editingCommand.value = null
+  showCommandModal.value = true
+}
+
+function openEditModal(cmd: InitCommand): void {
+  editingCommand.value = cmd
+  showCommandModal.value = true
+}
+
+function onModalClose(): void {
+  showCommandModal.value = false
+  editingCommand.value = null
+}
+
+async function onModalSave(): Promise<void> {
+  await loadCommands()
+  onModalClose()
+}
+
+// 详情弹窗
+const showDetailModal = ref(false)
+const viewingCommand = ref<InitCommand | null>(null)
+
+function openDetailModal(cmd: InitCommand): void {
+  viewingCommand.value = cmd
+  showDetailModal.value = true
+}
+
+function closeDetailModal(): void {
+  showDetailModal.value = false
+  viewingCommand.value = null
+}
+
+// 删除命令
+async function deleteCommand(cmd: InitCommand): Promise<void> {
+  if (!confirm(t('extensions.initCommands.confirmDelete', { name: cmd.name }))) return
+  
+  try {
+    await api.initCommands.delete(cmd.id)
+    toast.success(t('extensions.initCommands.deleteSuccess'))
+    await loadCommands()
+    // 删除后如果当前页已无数据，返回上一页
+    if (paginatedCommands.value.length === 0 && currentPage.value > 1) {
+      currentPage.value--
+    }
+  } catch (error: any) {
+    toast.error(t('extensions.initCommands.deleteFailed') + ': ' + (error?.message || String(error)))
+  }
+}
+
+// 切换启用状态
+async function toggleEnabled(cmd: InitCommand): Promise<void> {
+  try {
+    await api.initCommands.update(cmd.id, { enabled: !cmd.enabled })
+    cmd.enabled = !cmd.enabled
+    toast.success(cmd.enabled ? t('extensions.initCommands.enabled') : t('extensions.initCommands.disabled'))
+  } catch (error: any) {
+    toast.error(t('extensions.initCommands.toggleFailed') + ': ' + (error?.message || String(error)))
+  }
+}
+
+// 获取发行版显示名称（使用翻译键）
+function getDistroName(distro: string): string {
+  const key = `extensions.initCommands.distroNames.${distro}`
+  const translated = t(key)
+  return translated !== key ? translated : distro
+}
+
+// 挂载时加载
+loadCommands()
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('nav.extensions') }}</h1>
+      <p class="text-sm text-themed-muted mt-1">{{ $t('extensions.description') }}</p>
+    </div>
+
+    <!-- TAB 导航 -->
+    <div class="border-b border-themed">
+      <nav class="flex -mb-px">
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
+          :class="activeTab === 'init-commands' 
+            ? 'border-primary-500 text-primary-600 dark:text-primary-400' 
+            : 'border-transparent text-themed-muted hover:text-themed-secondary hover:border-themed'"
+          @click="activeTab = 'init-commands'"
+        >
+          {{ $t('extensions.initCommands.title') }}
+        </button>
+      </nav>
+    </div>
+
+    <!-- 初始化命令 TAB -->
+    <div v-if="activeTab === 'init-commands'" class="card p-5">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
+        <p class="text-xs text-themed-faint">{{ $t('extensions.initCommands.description') }}</p>
+        <button class="btn-primary btn-sm" @click="openAddModal">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ $t('extensions.initCommands.add') }}
+        </button>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="text-center py-8">
+        <div class="inline-flex items-center gap-2 text-themed-muted">
+          <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <span>{{ $t('common.loading') }}</span>
+        </div>
+      </div>
+
+      <!-- 命令列表 -->
+      <div v-else-if="commands.length" class="space-y-2">
+        <div 
+          v-for="cmd in paginatedCommands" 
+          :key="cmd.id" 
+          class="group flex items-center justify-between gap-3 p-3 bg-themed-tertiary border border-themed rounded-lg hover:border-themed-secondary transition-colors"
+          :class="{ 'opacity-50': !cmd.enabled }"
+        >
+          <div class="flex items-center gap-3 min-w-0 flex-1">
+            <!-- 图标 -->
+            <div class="w-9 h-9 rounded-lg bg-themed-secondary flex items-center justify-center flex-shrink-0">
+              <svg class="w-5 h-5 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <!-- 信息 -->
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <span class="text-sm text-themed-secondary font-medium truncate">{{ cmd.name }}</span>
+                <span v-if="!cmd.enabled" class="text-xs px-1.5 py-0.5 rounded bg-themed-secondary text-themed-muted">
+                  {{ $t('extensions.initCommands.statusDisabled') }}
+                </span>
+              </div>
+              <div class="text-xs text-themed-faint truncate mt-0.5">
+                {{ cmd.commandPreview || $t('extensions.initCommands.noContent') }}
+              </div>
+              <div class="flex flex-wrap items-center gap-1.5 mt-1.5">
+                <span 
+                  v-for="distro in cmd.distros" 
+                  :key="distro"
+                  class="inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-themed-secondary/80 text-themed-muted"
+                >
+                  <DistroIcon :distro="distroIcons[distro] || 'linux'" :size="14" />
+                  {{ getDistroName(distro) }}
+                </span>
+                <span class="text-xs text-themed-faint">
+                  · {{ $t('extensions.initCommands.lineCount', { count: cmd.commandLineCount }) }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <!-- 操作按钮 -->
+          <div class="flex items-center gap-2 flex-shrink-0">
+            <button 
+              class="text-themed-faint hover:text-themed-secondary transition-colors"
+              :title="$t('extensions.initCommands.viewDetail')"
+              @click="openDetailModal(cmd)"
+            >
+              <svg 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>
+            </button>
+            <button 
+              class="text-themed-faint hover:text-themed-secondary transition-colors"
+              :title="$t('common.edit')"
+              @click="openEditModal(cmd)"
+            >
+              <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+              </svg>
+            </button>
+            <button 
+              class="transition-colors"
+              :class="cmd.enabled ? 'text-green-500 hover:text-green-600' : 'text-themed-faint hover:text-green-500'"
+              :title="cmd.enabled ? $t('extensions.initCommands.clickToDisable') : $t('extensions.initCommands.clickToEnable')"
+              @click="toggleEnabled(cmd)"
+            >
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path v-if="cmd.enabled" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+            <button 
+              class="text-themed-faint hover:text-red-400 transition-colors"
+              :title="$t('common.delete')"
+              @click="deleteCommand(cmd)"
+            >
+              <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="text-center py-12 border border-dashed border-themed rounded-lg">
+        <svg class="w-12 h-12 mx-auto mb-3 text-themed-faint opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        <p class="text-sm text-themed-muted mb-3">{{ $t('extensions.initCommands.empty') }}</p>
+        <button class="btn-primary btn-sm" @click="openAddModal">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ $t('extensions.initCommands.addFirst') }}
+        </button>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex items-center justify-between mt-4 pt-3 border-t border-themed">
+        <span class="text-xs text-themed-muted">
+          {{ $t('common.pageInfo', { current: currentPage, total: totalPages, count: commands.length }) }}
+        </span>
+        <div class="flex items-center gap-2">
+          <button class="btn-ghost btn-sm" :disabled="currentPage <= 1" @click="goToPrevPage">
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+            {{ $t('common.prevPage') }}
+          </button>
+          <button class="btn-ghost btn-sm" :disabled="currentPage >= totalPages" @click="goToNextPage">
+            {{ $t('common.nextPage') }}
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 新增/编辑弹窗 -->
+    <InitCommandModal
+      v-if="showCommandModal"
+      :command="editingCommand"
+      @close="onModalClose"
+      @save="onModalSave"
+    />
+
+    <!-- 详情弹窗 -->
+    <InitCommandDetailModal
+      v-if="showDetailModal && viewingCommand"
+      :command="viewingCommand"
+      @close="closeDetailModal"
+    />
+  </div>
+</template>
diff --git a/client/src/views/ForgotPasswordView.vue b/client/src/views/ForgotPasswordView.vue
new file mode 100644
index 0000000..4e0653f
--- /dev/null
+++ b/client/src/views/ForgotPasswordView.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import TurnstileWidget from '@/components/TurnstileWidget.vue'
+import api from '@/api'
+import { useBrand } from '@/composables/useBrand'
+
+const router = useRouter()
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+const brand = useBrand()
+
+const email = ref<string>('')
+const code = ref<string>('')
+const loading = ref<boolean>(false)
+const sendingCode = ref<boolean>(false)
+const error = ref<string>('')
+const success = ref<string>('')
+const step = ref<'email' | 'verify'>('email')
+
+// Turnstile 验证
+const turnstileEnabled = ref<boolean>(false)
+const turnstileSiteKey = ref<string>('')
+const turnstileToken = ref<string>('')
+const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
+
+onMounted(async (): Promise<void> => {
+  try {
+    const configResponse = await api.systemConfig.getPublic()
+    turnstileEnabled.value = configResponse.turnstileEnabled || false
+    turnstileSiteKey.value = configResponse.turnstileSiteKey || ''
+  } catch (e) {
+    console.error('Failed to load config:', e)
+  }
+})
+
+function onTurnstileExpire() {
+  turnstileToken.value = ''
+}
+
+async function sendVerificationCode(): Promise<void> {
+  if (!email.value || !email.value.includes('@')) {
+    error.value = t('auth.invalidEmail')
+    return
+  }
+
+  if (turnstileEnabled.value && !turnstileToken.value) {
+    error.value = t('auth.turnstileRequired')
+    return
+  }
+
+  sendingCode.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    await api.auth.sendForgotPasswordCode(email.value, turnstileEnabled.value ? turnstileToken.value : undefined)
+    success.value = t('auth.forgotPassword.codeSent')
+    step.value = 'verify'
+    // Reset turnstile
+    if (turnstileRef.value) {
+      turnstileRef.value.reset?.()
+    }
+    turnstileToken.value = ''
+  } catch (err: any) {
+    error.value = err?.message || t('common.error')
+    // Reset turnstile on error
+    if (turnstileRef.value) {
+      turnstileRef.value.reset?.()
+    }
+    turnstileToken.value = ''
+  } finally {
+    sendingCode.value = false
+  }
+}
+
+async function resetPassword(): Promise<void> {
+  if (!code.value || code.value.length !== 6) {
+    error.value = t('auth.invalidCode')
+    return
+  }
+
+  if (turnstileEnabled.value && !turnstileToken.value) {
+    error.value = t('auth.turnstileRequired')
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+  success.value = ''
+
+  try {
+    const response = await api.auth.resetPassword(
+      email.value,
+      code.value,
+      turnstileEnabled.value ? turnstileToken.value : undefined
+    )
+    
+    toast.success(t('auth.forgotPassword.resetSuccess'))
+    
+    // 如果取消了2FA，显示提示
+    if (response.twoFactorDisabled) {
+      toast.info(t('auth.forgotPassword.twoFactorDisabled'))
+    }
+    
+    // 跳转到登录页面
+    setTimeout(() => {
+      router.push('/login')
+    }, 2000)
+  } catch (err: any) {
+    error.value = err?.message || t('common.error')
+    // Reset turnstile on error
+    if (turnstileRef.value) {
+      turnstileRef.value.reset?.()
+    }
+    turnstileToken.value = ''
+  } finally {
+    loading.value = false
+  }
+}
+
+function backToEmail() {
+  step.value = 'email'
+  code.value = ''
+  error.value = ''
+  success.value = ''
+  if (turnstileRef.value) {
+    turnstileRef.value.reset?.()
+  }
+  turnstileToken.value = ''
+}
+</script>
+
+<template>
+  <div 
+    class="min-h-screen flex items-center justify-center p-4"
+    :class="themeStore.isDark ? 'bg-[#0a0a0a]' : 'bg-gray-50'"
+  >
+    <div class="w-full max-w-sm">
+      <!-- Logo -->
+      <div class="text-center mb-8">
+        <img
+          :src="brand.brandLogoUrl"
+          :alt="brand.brandName"
+          class="w-16 h-16 mx-auto mb-2 rounded-xl"
+        />
+        <h2 
+          class="text-lg font-semibold mb-1"
+          :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+        >
+          {{ $t('auth.forgotPassword.title') }}
+        </h2>
+        <p 
+          class="text-sm"
+          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-600'"
+        >
+          {{ $t('auth.forgotPassword.subtitle') }}
+        </p>
+      </div>
+
+      <!-- 表单 -->
+      <div class="card p-6">
+        <!-- 步骤1：输入邮箱 -->
+        <form v-if="step === 'email'" class="space-y-4" @submit.prevent="sendVerificationCode">
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >{{ $t('auth.email') }}</label>
+            <input
+              v-model="email"
+              type="email"
+              class="input"
+              :placeholder="$t('auth.emailPlaceholder')"
+              autocomplete="email"
+              required
+            />
+          </div>
+
+          <!-- Turnstile 验证 -->
+          <TurnstileWidget
+            v-if="turnstileEnabled && turnstileSiteKey"
+            ref="turnstileRef"
+            v-model="turnstileToken"
+            :site-key="turnstileSiteKey"
+            :theme="themeStore.isDark ? 'dark' : 'light'"
+            @expire="onTurnstileExpire"
+          />
+
+          <!-- 错误提示 -->
+          <div v-if="error" class="text-sm text-red-500">
+            {{ error }}
+          </div>
+
+          <!-- 成功提示 -->
+          <div v-if="success" class="text-sm text-green-500">
+            {{ success }}
+          </div>
+
+          <button
+            type="submit"
+            :disabled="sendingCode"
+            class="btn-primary w-full"
+          >
+            {{ sendingCode ? $t('common.sending') : $t('auth.forgotPassword.sendCode') }}
+          </button>
+
+          <button
+            type="button"
+            class="btn-ghost w-full"
+            @click="router.push('/login')"
+          >
+            {{ $t('common.back') }}
+          </button>
+        </form>
+
+        <!-- 步骤2：验证码验证 -->
+        <form v-else class="space-y-4" @submit.prevent="resetPassword">
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >{{ $t('auth.email') }}</label>
+            <input
+              :value="email"
+              type="email"
+              class="input"
+              disabled
+            />
+          </div>
+
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >{{ $t('auth.verificationCode') }}</label>
+            <input
+              v-model="code"
+              type="text"
+              maxlength="6"
+              class="input"
+              :placeholder="$t('auth.verificationCodePlaceholder')"
+              autocomplete="one-time-code"
+              required
+            />
+            <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+              {{ $t('auth.forgotPassword.codeHint') }}
+            </p>
+          </div>
+
+          <!-- Turnstile 验证 -->
+          <TurnstileWidget
+            v-if="turnstileEnabled && turnstileSiteKey"
+            ref="turnstileRef"
+            v-model="turnstileToken"
+            :site-key="turnstileSiteKey"
+            :theme="themeStore.isDark ? 'dark' : 'light'"
+            @expire="onTurnstileExpire"
+          />
+
+          <!-- 错误提示 -->
+          <div v-if="error" class="text-sm text-red-500">
+            {{ error }}
+          </div>
+
+          <!-- 成功提示 -->
+          <div v-if="success" class="text-sm text-green-500">
+            {{ success }}
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="btn-primary w-full"
+          >
+            {{ loading ? $t('common.processing') : $t('auth.forgotPassword.resetPassword') }}
+          </button>
+
+          <button
+            type="button"
+            class="btn-ghost w-full"
+            @click="backToEmail"
+          >
+            {{ $t('common.back') }}
+          </button>
+        </form>
+      </div>
+
+      <p class="mt-6 text-center text-sm" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+        {{ $t('auth.rememberPassword') }}
+        <RouterLink 
+          to="/login" 
+          class="transition-colors"
+          :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-700 hover:text-gray-900'"
+        >
+          {{ $t('auth.login') }}
+        </RouterLink>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/FriendsView.vue b/client/src/views/FriendsView.vue
new file mode 100644
index 0000000..de86ab4
--- /dev/null
+++ b/client/src/views/FriendsView.vue
@@ -0,0 +1,1297 @@
+<script setup lang="ts">
+import { ref, onMounted, onActivated, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import type { Package } from '@/types/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { translateError } from '@/utils/errorHandler'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'FriendsView' })
+
+// 记录是否已经首次加载
+let hasInitialLoad = false
+
+// 类型定义
+interface Friend {
+  id: number  // 好友的用户ID
+  friendshipId?: number  // friendship 记录的ID
+  friendId?: number  // 好友的用户ID（与 id 相同，为了向后兼容）
+  username: string
+  email?: string
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  status?: string
+  createdAt: string
+  acceptedAt?: string | null
+  initiatedByMe?: boolean
+  hostCount?: number
+  instanceCount?: number
+}
+
+interface PendingRequest {
+  id: number
+  userId: number
+  username: string
+  email?: string
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  remark: string | null
+  createdAt: string
+}
+
+interface HistoryRecord {
+  id: number
+  userId: number
+  username: string
+  email?: string
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  remark: string | null
+  status: 'accepted' | 'rejected' | 'removed'
+  createdAt: string
+  acceptedAt: string | null
+  rejectedAt: string | null
+  initiatedByMe: boolean  // 是否是我发起的请求
+}
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 当前激活的 Tab
+const activeTab = ref('friends')
+
+// 好友列表
+const friends = ref<Friend[]>([])
+const friendsLoading = ref(true)
+
+// 好友列表分页（3行 x 3列 = 9条/页）
+const friendsPage = ref(1)
+const friendsPageSize = 9
+
+// 待处理请求
+const pendingRequests = ref<PendingRequest[]>([])
+const pendingLoading = ref(true)
+
+// 待处理请求分页（3行 x 3列 = 9条/页）
+const pendingPage = ref(1)
+const pendingPageSize = 9
+const pendingTotalPages = computed(() => Math.max(1, Math.ceil(pendingRequests.value.length / pendingPageSize)))
+const paginatedPendingRequests = computed(() => {
+  const start = (pendingPage.value - 1) * pendingPageSize
+  return pendingRequests.value.slice(start, start + pendingPageSize)
+})
+
+// 添加好友弹窗
+const showAddFriendModal = ref(false)
+const friendUsername = ref('')
+const friendRemark = ref('')
+const addFriendLoading = ref(false)
+
+// 历史记录
+const historyRecords = ref<HistoryRecord[]>([])
+const historyLoading = ref(true)
+const historyFilter = ref<'all' | 'accepted' | 'rejected' | 'removed'>('all')
+
+// 历史记录分页（10条/页）
+const historyPage = ref(1)
+const historyPageSize = 10
+const historySearch = ref('')
+
+// 搜索和筛选后的历史记录
+const filteredHistoryRecords = computed(() => {
+  if (!historySearch.value.trim()) return historyRecords.value
+  const keyword = historySearch.value.toLowerCase()
+  return historyRecords.value.filter(r =>
+    r.username.toLowerCase().includes(keyword) ||
+    (r.email && r.email.toLowerCase().includes(keyword)) ||
+    (r.remark && r.remark.toLowerCase().includes(keyword))
+  )
+})
+
+const historyTotalPages = computed(() => Math.max(1, Math.ceil(filteredHistoryRecords.value.length / historyPageSize)))
+const paginatedHistoryRecords = computed(() => {
+  const start = (historyPage.value - 1) * historyPageSize
+  return filteredHistoryRecords.value.slice(start, start + historyPageSize)
+})
+
+// 好友列表搜索
+const friendsSearch = ref('')
+const filteredFriends = computed(() => {
+  if (!friendsSearch.value.trim()) return friends.value
+  const keyword = friendsSearch.value.toLowerCase()
+  return friends.value.filter(f =>
+    f.username.toLowerCase().includes(keyword) ||
+    (f.email && f.email.toLowerCase().includes(keyword))
+  )
+})
+
+const filteredFriendsTotalPages = computed(() => Math.max(1, Math.ceil(filteredFriends.value.length / friendsPageSize)))
+const paginatedFilteredFriends = computed(() => {
+  const start = (friendsPage.value - 1) * friendsPageSize
+  return filteredFriends.value.slice(start, start + friendsPageSize)
+})
+
+// 待处理数量
+const pendingCount = computed(() => pendingRequests.value.length)
+
+// ========== 套餐共享相关 ==========
+interface PackageShare {
+  id: number
+  packageId: number
+  packageName: string
+  ownerId: number
+  ownerUsername: string
+  sharedToId: number
+  sharedToUsername: string
+  quotaMultiplier: number | null
+  maxInstances: number | null
+  usage?: {
+    instanceCount: number
+    totalCpu: number
+    totalMemory: number
+  }
+  createdAt: string
+}
+
+// 选中的好友
+const selectedFriend = ref<Friend | null>(null)
+
+// 我的套餐列表
+const myPackages = ref<Package[]>([])
+const myPackagesLoading = ref(false)
+
+// 好友已获得的共享套餐
+const friendShares = ref<PackageShare[]>([])
+const friendSharesLoading = ref(false)
+
+// 共享操作
+const shareLoading = ref(false)
+const unshareLoading = ref<number | null>(null)
+
+// 编辑配额弹窗
+const showEditQuotaModal = ref(false)
+const editingShare = ref<PackageShare | null>(null)
+const editQuotaMultiplier = ref<number | null>(null)
+const editMaxInstances = ref<number | null>(null)
+const editQuotaLoading = ref(false)
+
+// 添加共享弹窗
+const showAddShareModal = ref(false)
+const selectedPackageId = ref<number | null>(null)
+const newQuotaMultiplier = ref<number | null>(null)
+const newMaxInstances = ref<number | null>(null)
+const addShareLoading = ref(false)
+
+// 可共享套餐搜索
+const packageSearch = ref('')
+
+// 选中好友
+function selectFriend(friend: Friend) {
+  selectedFriend.value = friend
+  loadFriendShares()
+}
+
+// 取消选中
+function deselectFriend() {
+  selectedFriend.value = null
+  friendShares.value = []
+}
+
+// 加载我的套餐
+async function loadMyPackages() {
+  myPackagesLoading.value = true
+  try {
+    const res = await api.packages.list()
+    // 服务端返回 { packages: [...], total: ... }，需要提取 packages 数组
+    myPackages.value = res.packages || []
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    myPackagesLoading.value = false
+  }
+}
+
+// 加载共享给当前好友的套餐
+async function loadFriendShares() {
+  if (!selectedFriend.value) return
+  
+  friendSharesLoading.value = true
+  try {
+    // 获取我共享出去的所有套餐，然后过滤出共享给当前好友的
+    const res = await api.packages.getShared()
+    friendShares.value = (res.shares || []).filter(
+      s => s.sharedToId === selectedFriend.value?.id
+    )
+  } catch (err) {
+    console.error('加载共享列表失败:', err)
+    friendShares.value = []
+  } finally {
+    friendSharesLoading.value = false
+  }
+}
+
+// 打开添加共享弹窗
+function openAddShareModal(packageId?: number) {
+  // 从套餐卡片点击时传入 packageId，自动选中
+  // 从“添加共享”按钮点击时不传参数，清空选择
+  selectedPackageId.value = packageId ?? null
+  newQuotaMultiplier.value = null
+  newMaxInstances.value = null
+  showAddShareModal.value = true
+}
+
+// 可以共享的套餐（只返回用户自己拥有的套餐，排除已共享给当前好友的）
+const availablePackages = computed(() => {
+  const sharedIds = new Set(friendShares.value.map(s => s.packageId))
+  // 只返回用户自己拥有的套餐（isOwn === true），排除共享给自己的套餐
+  return myPackages.value.filter(p => 
+    (p.isOwn === true) && !sharedIds.has(p.id)
+  )
+})
+
+// 搜索过滤后的可共享套餐
+const filteredAvailablePackages = computed(() => {
+  if (!packageSearch.value.trim()) return availablePackages.value
+  const keyword = packageSearch.value.toLowerCase()
+  return availablePackages.value.filter(p =>
+    p.name.toLowerCase().includes(keyword) ||
+    (p.description && p.description.toLowerCase().includes(keyword))
+  )
+})
+
+// 刷新套餐共享数据
+async function refreshShareData() {
+  await Promise.all([
+    loadMyPackages(),
+    selectedFriend.value ? loadFriendShares() : Promise.resolve()
+  ])
+  toast.success(t('common.refresh') + ' ' + t('common.success'))
+}
+
+// 添加共享
+async function addShare() {
+  if (!selectedFriend.value || !selectedPackageId.value) return
+  
+  // 处理 NaN 值（用户清空输入框时）
+  const quotaMultiplier = Number.isNaN(newQuotaMultiplier.value) ? null : newQuotaMultiplier.value
+  const maxInstances = Number.isNaN(newMaxInstances.value) ? null : newMaxInstances.value
+  
+  addShareLoading.value = true
+  try {
+    await api.packages.share(
+      selectedPackageId.value,
+      selectedFriend.value.id,
+      quotaMultiplier,
+      maxInstances
+    )
+    toast.success(t('friends.shareAdded'))
+    showAddShareModal.value = false
+    loadFriendShares()
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    addShareLoading.value = false
+  }
+}
+
+// 取消共享
+async function removeShare(share: PackageShare) {
+  if (!selectedFriend.value) return
+  if (!confirm(t('friends.confirmRemoveShare', { package: share.packageName }))) return
+  
+  unshareLoading.value = share.id
+  try {
+    await api.packages.unshare(share.packageId, selectedFriend.value.id)
+    toast.success(t('friends.shareRemoved'))
+    loadFriendShares()
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    unshareLoading.value = null
+  }
+}
+
+// 打开编辑配额弹窗
+function openEditQuotaModal(share: PackageShare) {
+  editingShare.value = share
+  editQuotaMultiplier.value = share.quotaMultiplier
+  editMaxInstances.value = share.maxInstances
+  showEditQuotaModal.value = true
+}
+
+// 保存配额编辑
+async function saveQuotaEdit() {
+  if (!editingShare.value) return
+  
+  // 处理 NaN 值（用户清空输入框时）
+  const quotaMultiplier = Number.isNaN(editQuotaMultiplier.value) ? null : editQuotaMultiplier.value
+  const maxInstances = Number.isNaN(editMaxInstances.value) ? null : editMaxInstances.value
+  
+  editQuotaLoading.value = true
+  try {
+    await api.packages.updateShareQuota(
+      editingShare.value.packageId,
+      editingShare.value.id,
+      quotaMultiplier,
+      maxInstances
+    )
+    toast.success(t('friends.quotaUpdated'))
+    showEditQuotaModal.value = false
+    loadFriendShares()
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    editQuotaLoading.value = false
+  }
+}
+
+// 格式化内存
+function formatMemory(mb: number): string {
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(1)} GB`
+  }
+  return `${mb} MB`
+}
+
+// 加载好友列表
+async function loadFriends() {
+  friendsLoading.value = true
+  try {
+    const res = await api.friends.list()
+    friends.value = res.friends || []
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    friendsLoading.value = false
+  }
+}
+
+// 加载待处理请求
+async function loadPendingRequests() {
+  pendingLoading.value = true
+  try {
+    const res = await api.friends.getPendingRequests()
+    pendingRequests.value = res.requests || []
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    pendingLoading.value = false
+  }
+}
+
+// 加载历史记录
+async function loadHistoryRecords() {
+  historyLoading.value = true
+  try {
+    const res = await api.friends.getHistory(historyFilter.value)
+    historyRecords.value = res.history || []
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    historyLoading.value = false
+  }
+}
+
+// 发送好友请求
+async function sendFriendRequest() {
+  if (!friendUsername.value.trim()) return
+  
+  addFriendLoading.value = true
+  try {
+    await api.friends.sendRequest(friendUsername.value.trim(), friendRemark.value.trim() || undefined)
+    toast.success(t('friends.requestSent'))
+    showAddFriendModal.value = false
+    friendUsername.value = ''
+    friendRemark.value = ''
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    addFriendLoading.value = false
+  }
+}
+
+// 接受好友请求
+async function acceptRequest(request: PendingRequest) {
+  try {
+    await api.friends.accept(request.id)
+    toast.success(t('friends.requestAccepted'))
+    pendingRequests.value = pendingRequests.value.filter(r => r.id !== request.id)
+    loadFriends()
+  } catch (err) {
+    toast.error(translateError(err))
+  }
+}
+
+// 拒绝好友请求
+async function rejectRequest(request: PendingRequest) {
+  try {
+    await api.friends.reject(request.id)
+    toast.success(t('friends.requestRejected'))
+    pendingRequests.value = pendingRequests.value.filter(r => r.id !== request.id)
+    // 刷新历史记录
+    loadHistoryRecords()
+  } catch (err) {
+    toast.error(translateError(err))
+  }
+}
+
+// 删除好友
+async function removeFriend(friend: Friend) {
+  if (!confirm(t('friends.confirmRemove', { name: friend.username }))) return
+  
+  try {
+    // 必须使用 friendshipId（friendship 记录的ID），而不是 friend.id（好友的用户ID）
+    const friendshipId = friend.friendshipId || friend.id
+    await api.friends.remove(friendshipId)
+    toast.success(t('friends.friendRemoved'))
+    friends.value = friends.value.filter(f => f.id !== friend.id)
+    // 如果删除的是当前选中的好友，清空选中状态
+    if (selectedFriend.value?.id === friend.id) {
+      deselectFriend()
+    }
+  } catch (err) {
+    toast.error(translateError(err))
+  }
+}
+
+// 格式化时间
+function formatDate(dateStr: string | null | undefined) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleDateString()
+}
+
+// 切换tab时加载数据
+function switchTab(tab: string) {
+  activeTab.value = tab
+}
+
+onMounted(async () => {
+  // 并行加载所有初始数据
+  await Promise.all([loadFriends(), loadPendingRequests(), loadHistoryRecords(), loadMyPackages()])
+  hasInitialLoad = true
+})
+
+// 当组件从 KeepAlive 缓存中激活时，重新加载数据
+onActivated(async () => {
+  if (hasInitialLoad) {
+    // 并行刷新所有数据
+    await Promise.all([loadFriends(), loadPendingRequests(), loadMyPackages()])
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ t('friends.title') }}</h1>
+        <p class="page-description">{{ t('friends.description') }}</p>
+      </div>
+    </div>
+
+    <!-- Tab 切换 -->
+    <div
+      class="flex items-center gap-1 p-1 rounded-lg w-full sm:w-fit overflow-x-auto"
+      :class="themeStore.isDark ? 'bg-gray-900/50' : 'bg-gray-100'"
+    >
+      <button
+        :class="[
+          'px-3 sm:px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap flex-1 sm:flex-none',
+          activeTab === 'friends'
+            ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-white text-gray-900 shadow')
+            : 'text-themed-muted hover:text-themed-secondary'
+        ]"
+        @click="switchTab('friends')"
+      >
+        {{ t('friends.friendsList') }}
+        <span class="ml-1.5 text-xs text-themed-muted">{{ friends.length }}</span>
+      </button>
+      <button
+        :class="[
+          'px-3 sm:px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap flex-1 sm:flex-none',
+          activeTab === 'pending'
+            ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-white text-gray-900 shadow')
+            : 'text-themed-muted hover:text-themed-secondary'
+        ]"
+        @click="switchTab('pending')"
+      >
+        {{ t('friends.pendingRequests') }}
+        <span
+          v-if="pendingCount > 0"
+          class="ml-1.5 text-xs bg-red-500 text-white px-1.5 py-0.5 rounded-full min-w-[20px] text-center"
+        >{{ pendingCount }}</span>
+      </button>
+      <button
+        :class="[
+          'px-3 sm:px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap flex-1 sm:flex-none',
+          activeTab === 'history'
+            ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-white text-gray-900 shadow')
+            : 'text-themed-muted hover:text-themed-secondary'
+        ]"
+        @click="switchTab('history')"
+      >
+        {{ t('friends.historyRequests') }}
+      </button>
+    </div>
+
+    <!-- Tab Content with Transition -->
+    <Transition name="tab" mode="out-in">
+      <div :key="activeTab">
+        <!-- 好友列表 Tab - 双栏布局 -->
+        <div v-if="activeTab === 'friends'" class="space-y-4">
+          <!-- 工具栏 -->
+          <div class="flex items-center justify-between gap-4">
+            <div class="relative w-full lg:w-80 xl:w-96">
+              <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                v-model="friendsSearch"
+                type="text"
+                class="input pl-9 py-1.5 text-sm"
+                :placeholder="t('common.searchPlaceholder')"
+                @input="friendsPage = 1"
+              />
+            </div>
+            <button class="btn-primary" @click="showAddFriendModal = true">
+              <svg 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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
+              </svg>
+              {{ t('friends.addFriend') }}
+            </button>
+          </div>
+
+          <SkeletonLoader v-if="friendsLoading" type="list" />
+
+          <div v-else-if="friends.length === 0" class="card p-12 text-center">
+            <svg
+              class="w-12 h-12 mx-auto mb-4"
+              :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            <p class="text-themed-secondary">{{ t('friends.noFriends') }}</p>
+            <p class="text-xs text-themed-muted mt-2">{{ t('friends.noFriendsHint') }}</p>
+          </div>
+
+          <div v-else-if="filteredFriends.length === 0" class="card p-12 text-center">
+            <svg
+              class="w-12 h-12 mx-auto mb-4"
+              :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <p class="text-themed-secondary">{{ t('friends.noSearchResult') }}</p>
+          </div>
+
+          <!-- 双栏布局 -->
+          <template v-else>
+            <div class="flex flex-col lg:flex-row gap-6">
+              <!-- 左侧: 好友列表 -->
+              <div class="lg:w-80 xl:w-96 flex-shrink-0">
+                <div class="space-y-2">
+                  <div
+                    v-for="friend in paginatedFilteredFriends"
+                    :key="friend.id"
+                    class="card p-3 cursor-pointer transition-all"
+                    :class="[
+                      selectedFriend?.id === friend.id
+                        ? (themeStore.isDark ? 'border-blue-500 bg-blue-900/20' : 'border-blue-500 bg-blue-50')
+                        : (themeStore.isDark ? 'hover:border-gray-700' : 'hover:border-gray-300')
+                    ]"
+                    @click="selectFriend(friend)"
+                  >
+                    <div class="flex items-center gap-3">
+                      <UserAvatar
+                        :username="friend.username || ''"
+                        :email="friend.email"
+                        :avatar-style="friend.avatarStyle || ''"
+                        :badge-id="friend.avatarBadgeId || null"
+                        :size="36"
+                        class="flex-shrink-0"
+                      />
+                      <div class="flex-1 min-w-0">
+                        <div
+                          class="font-medium truncate text-sm"
+                          :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+                        >
+                          {{ friend.username }}
+                        </div>
+                        <div class="text-xs text-themed-muted truncate">
+                          {{ friend.email || t('friends.addedOn') + ' ' + formatDate(friend.createdAt) }}
+                        </div>
+                      </div>
+                      <svg
+                        v-if="selectedFriend?.id === friend.id"
+                        class="w-5 h-5 text-blue-500 flex-shrink-0"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 好友列表分页控件 -->
+                <div v-if="filteredFriendsTotalPages > 1" class="flex items-center justify-between text-xs text-themed-muted mt-3 pt-3 border-t border-themed">
+                  <span>{{ filteredFriends.length }} {{ t('common.items') }}</span>
+                  <div class="flex items-center gap-1">
+                    <button :disabled="friendsPage <= 1" class="btn-ghost btn-xs" @click="friendsPage--">
+                      <svg 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 19l-7-7 7-7" />
+                      </svg>
+                    </button>
+                    <span>{{ friendsPage }}/{{ filteredFriendsTotalPages }}</span>
+                    <button :disabled="friendsPage >= filteredFriendsTotalPages" class="btn-ghost btn-xs" @click="friendsPage++">
+                      <svg 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="M9 5l7 7-7 7" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 右侧: 套餐管理面板 -->
+              <div class="flex-1 min-w-0">
+                <!-- 未选择好友 -->
+                <div v-if="!selectedFriend" class="card p-12 text-center">
+                  <svg
+                    class="w-12 h-12 mx-auto mb-4"
+                    :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
+                  </svg>
+                  <p class="text-themed-secondary">{{ t('friends.selectFriendHint') }}</p>
+                  <p class="text-xs text-themed-muted mt-2">{{ t('friends.selectFriendDesc') }}</p>
+                </div>
+
+                <!-- 已选择好友 -->
+                <template v-else>
+                  <!-- 好友信息头部 -->
+                  <div class="card p-4 mb-4">
+                    <div class="flex items-center justify-between">
+                      <div class="flex items-center gap-3">
+                        <UserAvatar
+                          :username="selectedFriend.username || ''"
+                          :email="selectedFriend.email"
+                          :avatar-style="selectedFriend.avatarStyle || ''"
+                          :badge-id="selectedFriend.avatarBadgeId || null"
+                          :size="48"
+                        />
+                        <div>
+                          <div class="font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                            {{ selectedFriend.username }}
+                          </div>
+                          <div v-if="selectedFriend.email" class="text-sm text-themed-muted">{{ selectedFriend.email }}</div>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+                        <button
+                          class="btn-ghost btn-xs sm:btn-sm p-1.5 sm:p-2"
+                          :title="t('common.refresh')"
+                          @click="refreshShareData"
+                        >
+                          <svg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                          </svg>
+                        </button>
+                        <button
+                          class="btn-ghost btn-xs sm:btn-sm p-1.5 sm:p-2 text-error"
+                          :title="t('friends.removeFriend')"
+                          @click="removeFriend(selectedFriend)"
+                        >
+                          <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                        <button class="btn-ghost btn-xs sm:btn-sm p-1.5 sm:p-2 lg:hidden" @click="deselectFriend">
+                          <svg 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="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 已分配的套餐 -->
+                  <div class="mb-4">
+                    <div class="flex items-center justify-between mb-3">
+                      <h3 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                        {{ t('friends.sharedPackages') }}
+                        <span class="text-themed-muted font-normal">({{ friendShares.length }})</span>
+                      </h3>
+                      <button
+                        v-if="availablePackages.length > 0"
+                        class="btn-primary btn-sm"
+                        @click="openAddShareModal()"
+                      >
+                        <svg 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="M12 4v16m8-8H4" />
+                        </svg>
+                        {{ t('friends.addShare') }}
+                      </button>
+                    </div>
+
+                    <SkeletonLoader v-if="friendSharesLoading" type="card" />
+
+                    <div v-else-if="friendShares.length === 0" class="card p-8 text-center">
+                      <svg
+                        class="w-10 h-10 mx-auto mb-3"
+                        :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                      </svg>
+                      <p class="text-sm text-themed-secondary">{{ t('friends.noSharedPackages') }}</p>
+                      <button
+                        v-if="availablePackages.length > 0"
+                        class="btn-primary btn-sm mt-3"
+                        @click="openAddShareModal()"
+                      >
+                        {{ t('friends.addFirstShare') }}
+                      </button>
+                    </div>
+
+                    <div v-else class="space-y-2">
+                      <div
+                        v-for="share in friendShares"
+                        :key="share.id"
+                        class="card p-4"
+                      >
+                        <div class="flex items-start justify-between gap-4">
+                          <div class="flex-1 min-w-0">
+                            <div class="font-medium text-sm" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                              {{ share.packageName }}
+                            </div>
+                            <div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-xs text-themed-muted">
+                              <span v-if="share.quotaMultiplier !== null">
+                                {{ t('friends.quotaMultiplier') }}: {{ share.quotaMultiplier }}x
+                              </span>
+                              <span v-if="share.maxInstances !== null">
+                                {{ t('friends.maxInstances') }}: {{ share.maxInstances }}
+                              </span>
+                              <span v-if="share.usage">
+                                {{ t('friends.currentUsage') }}: {{ share.usage.instanceCount }} {{ t('friends.instances') }}
+                              </span>
+                            </div>
+                          </div>
+                          <div class="flex items-center gap-1 flex-shrink-0">
+                            <button
+                              class="btn-ghost btn-sm"
+                              :title="t('friends.editQuota')"
+                              @click="openEditQuotaModal(share)"
+                            >
+                              <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                              </svg>
+                            </button>
+                            <button
+                              class="btn-ghost btn-sm text-error"
+                              :disabled="unshareLoading === share.id"
+                              :title="t('friends.removeShare')"
+                              @click="removeShare(share)"
+                            >
+                              <span v-if="unshareLoading === share.id" class="loading-spinner w-4 h-4"></span>
+                              <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 可分配的套餐 -->
+                  <div v-if="availablePackages.length > 0">
+                    <div class="flex items-center justify-between mb-3">
+                      <h3 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                        {{ t('friends.availablePackages') }}
+                        <span class="text-themed-muted font-normal">({{ filteredAvailablePackages.length }})</span>
+                      </h3>
+                      <!-- 套餐搜索框 -->
+                      <div v-if="availablePackages.length > 3" class="relative">
+                        <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                        <input
+                          v-model="packageSearch"
+                          type="text"
+                          class="input pl-8 py-1 text-xs w-32"
+                          :placeholder="t('common.searchPlaceholder')"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- 搜索无结果 -->
+                    <div v-if="filteredAvailablePackages.length === 0" class="card p-4 text-center">
+                      <p class="text-sm text-themed-muted">{{ t('friends.noPackageSearchResult') }}</p>
+                    </div>
+
+                    <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                      <div
+                        v-for="pkg in filteredAvailablePackages"
+                        :key="pkg.id"
+                        class="card p-3 flex items-center justify-between gap-3"
+                      >
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium text-sm truncate" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                            {{ pkg.name }}
+                          </div>
+                          <div class="text-xs text-themed-muted">
+                            {{ pkg.cpu_max }}%CPU · {{ formatMemory(pkg.memory_max) }}
+                          </div>
+                        </div>
+                        <button
+                          class="btn-secondary btn-sm flex-shrink-0"
+                          :disabled="shareLoading"
+                          @click="openAddShareModal(pkg.id)"
+                        >
+                          <svg 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="M12 4v16m8-8H4" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 用户没有套餐时的提示 -->
+                  <div v-else-if="myPackages.length === 0 && friendShares.length === 0" class="card p-6 text-center">
+                    <svg
+                      class="w-10 h-10 mx-auto mb-3"
+                      :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+                      fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                    </svg>
+                    <p class="text-sm text-themed-secondary">{{ t('friends.noPackagesToShare') }}</p>
+                    <p class="text-xs text-themed-muted mt-1">{{ t('friends.createPackageFirst') }}</p>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- 待处理请求 Tab -->
+        <div v-if="activeTab === 'pending'" class="space-y-4">
+          <SkeletonLoader v-if="pendingLoading" type="list" />
+
+          <div v-else-if="pendingRequests.length === 0" class="card p-12 text-center">
+            <svg
+              class="w-12 h-12 mx-auto mb-4"
+              :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+            </svg>
+            <p class="text-themed-secondary">{{ t('friends.noPendingRequests') }}</p>
+          </div>
+
+          <template v-else>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              <div
+                v-for="request in paginatedPendingRequests"
+                :key="request.id"
+                class="card p-4"
+              >
+                <div class="flex items-start gap-3">
+                  <UserAvatar
+                    :username="request.username || ''"
+                    :email="request.email"
+                    :avatar-style="request.avatarStyle || ''"
+                    :badge-id="request.avatarBadgeId || null"
+                    :size="40"
+                    class="flex-shrink-0"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div
+                      class="font-medium truncate"
+                      :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+                    >
+                      {{ request.username }}
+                    </div>
+                    <div v-if="request.email" class="text-xs text-themed-secondary truncate">{{ request.email }}</div>
+                    <div class="text-xs text-themed-muted">
+                      {{ t('friends.requestedOn') }} {{ formatDate(request.createdAt) }}
+                    </div>
+                    <div v-if="request.remark" class="text-xs mt-1 truncate" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('friends.remark') }}: {{ request.remark }}
+                    </div>
+                    <div class="flex items-center gap-2 mt-3">
+                      <button
+                        class="btn-primary btn-sm"
+                        @click="acceptRequest(request)"
+                      >
+                        {{ t('friends.accept') }}
+                      </button>
+                      <button
+                        class="btn-secondary btn-sm"
+                        @click="rejectRequest(request)"
+                      >
+                        {{ t('friends.reject') }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <!-- 待处理请求分页控件 -->
+          <div v-if="pendingTotalPages > 1" class="flex items-center justify-between text-sm text-themed-muted">
+            <span>{{ t('common.total') }} {{ pendingRequests.length }} {{ t('common.items') }}</span>
+            <div class="flex items-center gap-2">
+              <button :disabled="pendingPage <= 1" class="btn-ghost btn-sm" @click="pendingPage--">{{ t('instance.prevPage') }}</button>
+              <span>{{ pendingPage }} / {{ pendingTotalPages }}</span>
+              <button :disabled="pendingPage >= pendingTotalPages" class="btn-ghost btn-sm" @click="pendingPage++">{{ t('instance.nextPage') }}</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史记录 Tab -->
+        <div v-if="activeTab === 'history'" class="space-y-4">
+          <!-- 搜索和筛选工具栏 -->
+          <div class="flex items-center justify-between gap-4">
+            <div class="relative flex-1 max-w-xs">
+              <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                v-model="historySearch"
+                type="text"
+                class="input pl-9 py-1.5 text-sm"
+                :placeholder="t('common.searchPlaceholder')"
+                @input="historyPage = 1"
+              />
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-themed-muted">{{ t('common.filter') }}:</span>
+              <select
+                v-model="historyFilter"
+                class="input py-1.5 px-3 text-sm w-auto"
+                @change="loadHistoryRecords(); historyPage = 1"
+              >
+                <option value="all">{{ t('friends.filterAll') }}</option>
+                <option value="accepted">{{ t('friends.filterAccepted') }}</option>
+                <option value="rejected">{{ t('friends.filterRejected') }}</option>
+              </select>
+            </div>
+          </div>
+
+          <SkeletonLoader v-if="historyLoading" type="list" />
+
+          <div v-else-if="historyRecords.length === 0" class="card p-12 text-center">
+            <svg
+              class="w-12 h-12 mx-auto mb-4"
+              :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <p class="text-themed-secondary">{{ t('friends.noHistoryRecords') }}</p>
+            <p class="text-xs text-themed-muted mt-2">{{ t('friends.noHistoryRecordsHint') }}</p>
+          </div>
+
+          <div v-else-if="filteredHistoryRecords.length === 0" class="card p-12 text-center">
+            <svg
+              class="w-12 h-12 mx-auto mb-4"
+              :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <p class="text-themed-secondary">{{ t('friends.noHistorySearchResult') }}</p>
+          </div>
+
+          <div v-else class="space-y-3">
+            <div
+              v-for="record in paginatedHistoryRecords"
+              :key="record.id"
+              class="card p-4"
+            >
+              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                <div class="flex items-start gap-3 min-w-0 flex-1">
+                  <UserAvatar
+                    :username="record.username || ''"
+                    :email="record.email"
+                    :avatar-style="record.avatarStyle || ''"
+                    :badge-id="record.avatarBadgeId || null"
+                    :size="40"
+                    class="flex-shrink-0"
+                  />
+                  <div class="min-w-0 flex-1">
+                    <div
+                      class="font-medium truncate"
+                      :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+                    >
+                      {{ record.initiatedByMe ? t('friends.sentTo', { username: record.username }) : record.username }}
+                    </div>
+                    <div v-if="record.email" class="text-xs text-themed-secondary truncate">{{ record.email }}</div>
+                    <div class="text-xs text-themed-muted">
+                      {{ record.initiatedByMe ? t('friends.sentOn') : t('friends.requestedOn') }} {{ formatDate(record.createdAt) }}
+                    </div>
+                    <div v-if="record.remark" class="text-xs mt-1 truncate" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                      {{ t('friends.remark') }}: {{ record.remark }}
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row sm:flex-col items-center sm:items-end gap-1 flex-shrink-0">
+                  <span
+                    class="text-xs px-2 py-1 rounded-full whitespace-nowrap"
+                    :class="record.status === 'accepted'
+                      ? (themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-700')
+                      : (themeStore.isDark ? 'bg-red-900/50 text-red-400' : 'bg-red-100 text-red-700')
+                    "
+                  >
+                    {{ record.status === 'accepted' ? t('friends.statusAccepted') : t('friends.statusRejected') }}
+                  </span>
+                  <span class="text-xs text-themed-muted whitespace-nowrap">
+                    {{ t('friends.processedOn') }} {{ formatDate(record.status === 'accepted' ? record.acceptedAt : record.rejectedAt) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 历史记录分页控件 -->
+          <div v-if="historyTotalPages > 1" class="flex items-center justify-between text-sm text-themed-muted">
+            <span>{{ t('common.total') }} {{ filteredHistoryRecords.length }} {{ t('common.items') }}</span>
+            <div class="flex items-center gap-2">
+              <button :disabled="historyPage <= 1" class="btn-ghost btn-sm" @click="historyPage--">{{ t('instance.prevPage') }}</button>
+              <span>{{ historyPage }} / {{ historyTotalPages }}</span>
+              <button :disabled="historyPage >= historyTotalPages" class="btn-ghost btn-sm" @click="historyPage++">{{ t('instance.nextPage') }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 添加好友弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showAddFriendModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showAddFriendModal = false"></div>
+          <div class="modal-content max-w-sm">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('friends.addFriend') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showAddFriendModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form class="modal-body space-y-4" @submit.prevent="sendFriendRequest">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.username') }} <span class="text-error">*</span></label>
+                <input
+                  v-model="friendUsername"
+                  type="text"
+                  class="input"
+                  :placeholder="t('friends.usernamePlaceholder')"
+                  required
+                />
+                <p class="text-xs text-themed-muted mt-1.5">{{ t('friends.usernameHint') }}</p>
+              </div>
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.remark') }}</label>
+                <textarea
+                  v-model="friendRemark"
+                  class="input"
+                  rows="3"
+                  :placeholder="t('friends.remarkPlaceholder')"
+                ></textarea>
+                <p class="text-xs text-themed-muted mt-1.5">{{ t('friends.remarkHint') }}</p>
+              </div>
+            </form>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showAddFriendModal = false">{{ t('common.cancel') }}</button>
+              <button
+                :disabled="!friendUsername.trim() || addFriendLoading"
+                class="btn-primary"
+                @click="sendFriendRequest"
+              >
+                <span v-if="addFriendLoading" class="loading-spinner w-4 h-4"></span>
+                <span v-else>{{ t('friends.sendRequest') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 添加共享弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showAddShareModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showAddShareModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('friends.addShareTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showAddShareModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <!-- 目标好友 -->
+              <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+                <div class="flex items-center gap-3">
+                  <UserAvatar
+                    v-if="selectedFriend"
+                    :username="selectedFriend.username || ''"
+                    :email="selectedFriend.email"
+                    :avatar-style="selectedFriend.avatarStyle || ''"
+                    :badge-id="selectedFriend.avatarBadgeId || null"
+                    :size="36"
+                  />
+                  <div>
+                    <div class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                      {{ selectedFriend?.username }}
+                    </div>
+                    <div class="text-xs text-themed-muted">{{ t('friends.shareToFriend') }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 选择套餐 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.selectPackage') }} <span class="text-error">*</span></label>
+                <select v-model="selectedPackageId" class="input">
+                  <option :value="null" disabled>{{ t('friends.selectPackagePlaceholder') }}</option>
+                  <option v-for="pkg in availablePackages" :key="pkg.id" :value="pkg.id">
+                    {{ pkg.name }} ({{ pkg.cpu_max }} CPU, {{ formatMemory(pkg.memory_max) }})
+                  </option>
+                </select>
+              </div>
+
+              <!-- 配额限制 -->
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.quotaMultiplier') }}</label>
+                  <div class="relative">
+                    <input
+                      v-model.number="newQuotaMultiplier"
+                      type="number"
+                      step="0.1"
+                      min="0.1"
+                      max="10"
+                      class="input pr-8"
+                      :placeholder="t('friends.noLimit')"
+                    />
+                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-themed-muted text-sm">×</span>
+                  </div>
+                  <p class="text-xs text-themed-muted mt-1">{{ t('friends.quotaMultiplierHint') }}</p>
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.maxInstances') }}</label>
+                  <input
+                    v-model.number="newMaxInstances"
+                    type="number"
+                    min="0"
+                    class="input"
+                    :placeholder="t('friends.noLimit')"
+                  />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('friends.maxInstancesHint') }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showAddShareModal = false">{{ t('common.cancel') }}</button>
+              <button
+                :disabled="!selectedPackageId || addShareLoading"
+                class="btn-primary"
+                @click="addShare"
+              >
+                <span v-if="addShareLoading" class="loading-spinner w-4 h-4"></span>
+                <span v-else>{{ t('friends.confirmShare') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 编辑配额弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showEditQuotaModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showEditQuotaModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('friends.editQuotaTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showEditQuotaModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <!-- 套餐信息 -->
+              <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+                <div class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                  {{ editingShare?.packageName }}
+                </div>
+                <div class="text-xs text-themed-muted mt-1">
+                  {{ t('friends.sharedTo') }}: {{ selectedFriend?.username }}
+                </div>
+              </div>
+
+              <!-- 配额限制 -->
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.quotaMultiplier') }}</label>
+                  <div class="relative">
+                    <input
+                      v-model.number="editQuotaMultiplier"
+                      type="number"
+                      step="0.1"
+                      min="0.1"
+                      max="10"
+                      class="input pr-8"
+                      :placeholder="t('friends.noLimit')"
+                    />
+                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-themed-muted text-sm">×</span>
+                  </div>
+                  <p class="text-xs text-themed-muted mt-1">{{ t('friends.quotaMultiplierHint') }}</p>
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('friends.maxInstances') }}</label>
+                  <input
+                    v-model.number="editMaxInstances"
+                    type="number"
+                    min="0"
+                    class="input"
+                    :placeholder="t('friends.noLimit')"
+                  />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('friends.maxInstancesHint') }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showEditQuotaModal = false">{{ t('common.cancel') }}</button>
+              <button
+                :disabled="editQuotaLoading"
+                class="btn-primary"
+                @click="saveQuotaEdit"
+              >
+                <span v-if="editQuotaLoading" class="loading-spinner w-4 h-4"></span>
+                <span v-else>{{ t('common.save') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/HelpView.vue b/client/src/views/HelpView.vue
new file mode 100644
index 0000000..68f4d15
--- /dev/null
+++ b/client/src/views/HelpView.vue
@@ -0,0 +1,750 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { parseMarkdown } from '@/utils/markdown'
+
+const route = useRoute()
+const router = useRouter()
+const { locale, t } = useI18n()
+
+// 列表视图
+interface HelpArticle {
+  id: number
+  title: string
+  slug: string
+  content: string
+  category: string
+  sort_order: number
+  published: number
+  created_at: string
+  updated_at: string
+}
+const articles = ref<HelpArticle[]>([])
+const loading = ref<boolean>(true)
+const page = ref<number>(1)
+const pageSize = ref<number>(10)
+const total = ref<number>(0)
+const totalPages = ref<number>(0)
+
+// 详情视图
+const currentArticle = ref<HelpArticle | null>(null)
+const articleLoading = ref<boolean>(false)
+// 标记是否已完成首次加载（用于区分初始状态和真正的404）
+const articleLoaded = ref<boolean>(false)
+
+// 分类筛选
+interface CategoryWithCount {
+  category: string
+  count: number
+}
+const categories = ref<CategoryWithCount[]>([])
+const selectedCategory = ref<string>('')
+
+// 分类配置（从服务器加载）
+interface Category {
+  id: string
+  name: string
+  color: string
+}
+const categoryConfig = ref<Category[]>([
+  { id: 'general', name: '', color: '#6b7280' },
+  { id: 'getting-started', name: '', color: '#22c55e' },
+  { id: 'instances', name: '', color: '#3b82f6' },
+  { id: 'networking', name: '', color: '#8b5cf6' },
+  { id: 'billing', name: '', color: '#f59e0b' },
+  { id: 'faq', name: '', color: '#ef4444' }
+])
+
+// 计算属性：是否正在查看文章？
+const isDetailView = computed<boolean>(() => !!(route.params.slug as string | undefined))
+
+onMounted(async (): Promise<void> => {
+  // 并行加载分类配置和分类列表
+  await Promise.all([loadCategoryConfig(), loadCategories()])
+  
+  if (route.params.slug) {
+    await loadArticle(route.params.slug as string)
+  } else {
+    await loadArticles()
+  }
+})
+
+async function loadCategoryConfig(): Promise<void> {
+  try {
+    const response = await api.help.categoryConfig()
+    if (response.categories && response.categories.length > 0) {
+      categoryConfig.value = response.categories
+    }
+  } catch (err) {
+    console.error('Failed to load category config:', err)
+    // 加载失败时使用默认配置
+  }
+}
+
+watch(() => route.params.slug, async (newSlug) => {
+  if (newSlug) {
+    await loadArticle(newSlug as string)
+  } else {
+    currentArticle.value = null
+    articleLoaded.value = false
+    await loadArticles()
+  }
+})
+
+async function loadCategories(): Promise<void> {
+  try {
+    const response = await api.help.categories()
+    const cats = (response as { categories?: CategoryWithCount[] | string[] }).categories || []
+    // 处理 string[] 和 CategoryWithCount[] 两种格式
+    if (cats.length > 0 && typeof cats[0] === 'string') {
+      // 将 string[] 转换为 CategoryWithCount[]
+      categories.value = (cats as string[]).map(cat => ({ category: cat, count: 0 }))
+    } else {
+      categories.value = cats as CategoryWithCount[]
+    }
+  } catch (err) {
+    console.error('Failed to load categories:', err)
+  }
+}
+
+async function loadArticles(): Promise<void> {
+  loading.value = true
+  try {
+    const params: { page: number; pageSize: number; category?: string } = { page: page.value, pageSize: pageSize.value }
+    if (selectedCategory.value) {
+      params.category = selectedCategory.value
+    }
+    const response = await api.help.list(params)
+    const data = response as { articles?: HelpArticle[]; total?: number; totalPages?: number }
+    articles.value = data.articles || []
+    total.value = data.total || 0
+    totalPages.value = data.totalPages || 1
+  } catch (err) {
+    console.error('Failed to load articles:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadArticle(slug: string): Promise<void> {
+  articleLoading.value = true
+  articleLoaded.value = false
+  try {
+    const response = await api.help.getBySlug(slug)
+    currentArticle.value = (response as { article?: HelpArticle }).article || null
+  } catch (err) {
+    console.error('Failed to load article:', err)
+    currentArticle.value = null
+  } finally {
+    articleLoading.value = false
+    articleLoaded.value = true
+  }
+}
+
+function filterByCategory(cat: string): void {
+  selectedCategory.value = cat
+  page.value = 1
+  loadArticles()
+}
+
+function goToArticle(slug: string): void {
+  router.push(`/help/${slug}`)
+}
+
+function goBack(): void {
+  router.push('/help')
+}
+
+// 计算文章 HTML
+const articleHtml = computed<string>(() => {
+  if (!currentArticle.value?.content) return ''
+  return parseMarkdown(currentArticle.value.content)
+})
+
+function getCategoryLabel(catId: string): string {
+  const cat = categoryConfig.value.find(c => c.id === catId)
+  if (cat?.name) return cat.name
+
+  const key = `help.categories.${catId.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase())}`
+  const label = t(key)
+  return label === key ? catId : label
+}
+
+function getCategoryColor(catId: string): string {
+  const cat = categoryConfig.value.find(c => c.id === catId)
+  return cat ? cat.color : '#6b7280'
+}
+
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return ''
+  // 支援 zh-CN, zh-TW, en 三種語言
+  const localeMap: Record<string, string> = {
+    'zh-CN': 'zh-CN',
+    'zh-TW': 'zh-TW',
+    'en': 'en-US'
+  }
+  const localeCode = localeMap[locale.value] || 'en-US'
+  return new Date(dateStr).toLocaleDateString(localeCode, { 
+    year: 'numeric', month: 'long', day: 'numeric'
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- Header -->
+    <div class="page-header">
+      <div>
+        <!-- 详情视图加载中时显示返回按钮和骨架屏 -->
+        <template v-if="isDetailView && !articleLoaded">
+          <div class="mb-2">
+            <button class="flex items-center gap-2 text-themed-muted hover:text-themed transition-colors" @click="goBack">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+              </svg>
+              <span class="text-sm">{{ $t('help.backToHelp') }}</span>
+            </button>
+          </div>
+          <div class="h-7 w-48 bg-themed-tertiary rounded animate-pulse"></div>
+        </template>
+        <!-- 详情视图加载完成后显示文章标题 -->
+        <template v-else-if="isDetailView && currentArticle">
+          <div class="mb-2">
+            <button class="flex items-center gap-2 text-themed-muted hover:text-themed transition-colors" @click="goBack">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+              </svg>
+              <span class="text-sm">{{ $t('help.backToHelp') }}</span>
+            </button>
+          </div>
+          <h1 class="page-title">{{ currentArticle.title }}</h1>
+          <p class="text-sm text-themed-muted">
+            {{ $t('help.updatedAt', { date: formatDate(currentArticle.updated_at) }) }}
+          </p>
+        </template>
+        <!-- 列表视图 -->
+        <template v-else-if="!isDetailView">
+          <h1 class="page-title">{{ $t('help.title') }}</h1>
+          <p class="page-description">{{ $t('help.description') }}</p>
+        </template>
+        <!-- 详情视图 404 情况 -->
+        <template v-else-if="isDetailView && articleLoaded && !currentArticle">
+          <div class="mb-2">
+            <button class="flex items-center gap-2 text-themed-muted hover:text-themed transition-colors" @click="goBack">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+              </svg>
+              <span class="text-sm">{{ $t('help.backToHelp') }}</span>
+            </button>
+          </div>
+          <h1 class="page-title">{{ $t('help.title') }}</h1>
+        </template>
+      </div>
+    </div>
+
+    <!-- Article List View -->
+    <template v-if="!isDetailView">
+      <!-- Category Filter -->
+      <div v-if="categories.length > 0" class="flex flex-wrap gap-2">
+        <button
+          :class="[
+            'px-3 py-1.5 text-sm rounded-lg transition-colors',
+            !selectedCategory 
+              ? 'bg-accent text-white' 
+              : 'bg-themed-secondary text-themed-secondary hover:text-themed'
+          ]"
+          @click="filterByCategory('')"
+        >
+          {{ $t('help.all') }}
+        </button>
+        <button
+          v-for="cat in categories"
+          :key="cat.category"
+          :class="[
+            'px-3 py-1.5 text-sm rounded-lg transition-colors',
+            selectedCategory === cat.category 
+              ? 'bg-accent text-white' 
+              : 'bg-themed-secondary text-themed-secondary hover:text-themed'
+          ]"
+          @click="filterByCategory(cat.category)"
+        >
+          {{ getCategoryLabel(cat.category) }}
+          <span class="ml-1 opacity-60">({{ cat.count }})</span>
+        </button>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="loading" class="card p-8 text-center text-themed-muted">
+        <svg class="w-6 h-6 animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+      
+      <!-- Empty -->
+      <div v-else-if="articles.length === 0" class="card p-8 text-center text-themed-muted">
+        {{ $t('help.noArticles') }}
+      </div>
+
+      <!-- Article List -->
+      <div v-else class="space-y-3">
+        <div 
+          v-for="article in articles" 
+          :key="article.id"
+          class="card p-4 cursor-pointer hover:border-accent/50 transition-colors"
+          @click="goToArticle(article.slug)"
+        >
+          <div class="flex items-start justify-between">
+            <div>
+              <h3 class="text-themed font-medium hover:text-accent transition-colors">{{ article.title }}</h3>
+              <div class="flex items-center gap-3 mt-1 text-sm text-themed-muted">
+                <span 
+                  class="inline-flex items-center gap-1.5 px-2 py-0.5 bg-themed-tertiary rounded text-xs"
+                >
+                  <span 
+                    class="w-2 h-2 rounded-full" 
+                    :style="{ backgroundColor: getCategoryColor(article.category) }"
+                  ></span>
+                  {{ getCategoryLabel(article.category) }}
+                </span>
+                <span>{{ formatDate(article.updated_at) }}</span>
+              </div>
+            </div>
+            <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="totalPages > 1" class="flex items-center justify-between text-sm text-themed-muted">
+        <span>{{ $t('help.totalArticles', { count: total }) }}</span>
+        <div class="flex items-center gap-2">
+          <button :disabled="page <= 1" class="btn-ghost btn-sm" @click="page--; loadArticles()">{{ $t('instance.prevPage') }}</button>
+          <span>{{ page }} / {{ totalPages }}</span>
+          <button :disabled="page >= totalPages" class="btn-ghost btn-sm" @click="page++; loadArticles()">{{ $t('instance.nextPage') }}</button>
+        </div>
+      </div>
+    </template>
+
+    <!-- Article Detail View -->
+    <template v-else>
+      <!-- Loading（加载中或尚未开始加载时显示） -->
+      <div v-if="articleLoading || !articleLoaded" class="card p-8 text-center text-themed-muted">
+        <svg class="w-6 h-6 animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+
+      <!-- Not Found（仅在加载完成后且文章为空时显示） -->
+      <div v-else-if="articleLoaded && !currentArticle" class="card p-8 text-center">
+        <svg class="w-12 h-12 mx-auto text-themed-muted mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <p class="text-themed-muted mb-4">{{ $t('help.articleNotFound') }}</p>
+        <button class="btn-secondary" @click="goBack">{{ $t('help.backToHelp') }}</button>
+      </div>
+
+      <!-- Article Content -->
+      <div v-else class="card p-6 md:p-8">
+        <div class="markdown-body" v-html="articleHtml"></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+/* ============ Markdown 基础样式 ============ */
+.markdown-body {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* 标题 */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  color: var(--text-primary);
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.markdown-body h1 { font-size: 1.75em; }
+.markdown-body h2 { 
+  font-size: 1.5em; 
+  border-bottom: 1px solid var(--border-color); 
+  padding-bottom: 0.3em; 
+}
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1.1em; }
+.markdown-body h5 { font-size: 1em; }
+.markdown-body h6 { font-size: 0.9em; color: var(--text-secondary); }
+
+/* 段落 */
+.markdown-body p {
+  margin: 1em 0;
+}
+
+/* 链接 */
+.markdown-body a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+/* 图片 */
+.markdown-body img {
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+.markdown-body figure {
+  margin: 1.5em 0;
+}
+
+/* 列表 */
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.5em;
+  margin: 1em 0;
+}
+
+.markdown-body ul {
+  list-style-type: disc;
+}
+
+.markdown-body ol {
+  list-style-type: decimal;
+}
+
+.markdown-body li {
+  margin: 0.5em 0;
+}
+
+.markdown-body li > ul,
+.markdown-body li > ol {
+  margin: 0.25em 0;
+}
+
+/* 任务列表 */
+.markdown-body ul:has(li > span:first-child > svg) {
+  list-style: none;
+  padding-left: 0;
+}
+
+/* 行内代码 */
+.markdown-body code {
+  background: var(--bg-tertiary);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+/* 代码块 */
+.markdown-body pre {
+  background: var(--bg-tertiary);
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1em 0;
+  border: 1px solid var(--border-color);
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+/* 引用块 */
+.markdown-body blockquote {
+  border-left: 4px solid var(--accent);
+  padding-left: 1em;
+  margin: 1em 0;
+  color: var(--text-secondary);
+}
+
+.markdown-body blockquote p {
+  margin: 0.5em 0;
+}
+
+/* 表格 */
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  font-size: 0.9em;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid var(--border-color);
+  padding: 0.6em 1em;
+  text-align: left;
+}
+
+.markdown-body th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.markdown-body tr:hover td {
+  background: var(--bg-secondary);
+}
+
+/* 水平线 */
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: 2em 0;
+}
+
+/* 删除线 */
+.markdown-body del {
+  color: var(--text-tertiary);
+}
+
+/* 强调 */
+.markdown-body strong {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.markdown-body em {
+  font-style: italic;
+}
+
+/* 键盘按键 */
+.markdown-body kbd {
+  display: inline-block;
+  padding: 0.2em 0.4em;
+  font-size: 0.85em;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 0 var(--border-color);
+}
+
+/* ============ 自定义 Alert 样式 ============ */
+.md-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 0.5rem;
+  border-width: 1px;
+}
+
+.md-alert svg {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+.md-alert > div {
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Alert 颜色变体 - 暗色主题 */
+.dark .md-alert-info {
+  background-color: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.dark .md-alert-info svg,
+.dark .md-alert-info > div {
+  color: #60a5fa;
+}
+
+.dark .md-alert-success {
+  background-color: rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.dark .md-alert-success svg,
+.dark .md-alert-success > div {
+  color: #4ade80;
+}
+
+.dark .md-alert-warning {
+  background-color: rgba(234, 179, 8, 0.15);
+  border-color: rgba(234, 179, 8, 0.3);
+}
+.dark .md-alert-warning svg,
+.dark .md-alert-warning > div {
+  color: #facc15;
+}
+
+.dark .md-alert-danger {
+  background-color: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.dark .md-alert-danger svg,
+.dark .md-alert-danger > div {
+  color: #f87171;
+}
+
+.dark .md-alert-note {
+  background-color: rgba(107, 114, 128, 0.15);
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.dark .md-alert-note svg,
+.dark .md-alert-note > div {
+  color: #9ca3af;
+}
+
+/* Alert 颜色变体 - 亮色主题 */
+.light .md-alert-info {
+  background-color: #eff6ff;
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.light .md-alert-info svg,
+.light .md-alert-info > div {
+  color: #2563eb;
+}
+
+.light .md-alert-success {
+  background-color: #f0fdf4;
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.light .md-alert-success svg,
+.light .md-alert-success > div {
+  color: #16a34a;
+}
+
+.light .md-alert-warning {
+  background-color: #fefce8;
+  border-color: rgba(234, 179, 8, 0.3);
+}
+.light .md-alert-warning svg,
+.light .md-alert-warning > div {
+  color: #ca8a04;
+}
+
+.light .md-alert-danger {
+  background-color: #fef2f2;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.light .md-alert-danger svg,
+.light .md-alert-danger > div {
+  color: #dc2626;
+}
+
+.light .md-alert-note {
+  background-color: #f9fafb;
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.light .md-alert-note svg,
+.light .md-alert-note > div {
+  color: #4b5563;
+}
+
+/* ============ 代码高亮主题适配 ============ */
+/* 暗色主题代码高亮 */
+.dark .markdown-body pre {
+  background: #0d1117;
+  border-color: #30363d;
+}
+
+.dark .markdown-body .hljs {
+  color: #c9d1d9;
+  background: transparent;
+}
+
+.dark .markdown-body .hljs-keyword,
+.dark .markdown-body .hljs-selector-tag,
+.dark .markdown-body .hljs-title {
+  color: #ff7b72;
+}
+
+.dark .markdown-body .hljs-string,
+.dark .markdown-body .hljs-attr {
+  color: #a5d6ff;
+}
+
+.dark .markdown-body .hljs-comment {
+  color: #8b949e;
+}
+
+.dark .markdown-body .hljs-number,
+.dark .markdown-body .hljs-literal {
+  color: #79c0ff;
+}
+
+.dark .markdown-body .hljs-function,
+.dark .markdown-body .hljs-built_in {
+  color: #d2a8ff;
+}
+
+.dark .markdown-body .hljs-variable,
+.dark .markdown-body .hljs-template-variable {
+  color: #ffa657;
+}
+
+/* 亮色主题代码高亮 */
+.light .markdown-body pre {
+  background: #f6f8fa;
+  border-color: #d0d7de;
+}
+
+.light .markdown-body .hljs {
+  color: #24292f;
+  background: transparent;
+}
+
+.light .markdown-body .hljs-keyword,
+.light .markdown-body .hljs-selector-tag,
+.light .markdown-body .hljs-title {
+  color: #cf222e;
+}
+
+.light .markdown-body .hljs-string,
+.light .markdown-body .hljs-attr {
+  color: #0a3069;
+}
+
+.light .markdown-body .hljs-comment {
+  color: #6e7781;
+}
+
+.light .markdown-body .hljs-number,
+.light .markdown-body .hljs-literal {
+  color: #0550ae;
+}
+
+.light .markdown-body .hljs-function,
+.light .markdown-body .hljs-built_in {
+  color: #8250df;
+}
+
+.light .markdown-body .hljs-variable,
+.light .markdown-body .hljs-template-variable {
+  color: #953800;
+}
+</style>
diff --git a/client/src/views/HostingWalletView.vue b/client/src/views/HostingWalletView.vue
new file mode 100644
index 0000000..6d4bf84
--- /dev/null
+++ b/client/src/views/HostingWalletView.vue
@@ -0,0 +1,1492 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useConfigStore } from '@/stores/config'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { getVipBadgeInlineStyle, normalizeVipBadgeStyle, type VipBadgeStyle } from '@/utils/vipBadge'
+
+defineOptions({ name: 'HostingWalletView' })
+
+const { t } = useI18n()
+const toast = useToast()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const configStore = useConfigStore()
+
+interface HostingBalance {
+  available: number
+  frozen: number
+  pendingWithdrawal: number
+  totalIncome: number
+  totalWithdrawn: number
+}
+
+interface HostingConfig {
+  minWithdrawalAmount: number
+  feeRateBalance: number
+}
+
+interface HostingLog {
+  id: number
+  type: string
+  actionType: string | null
+  amount: number
+  frozen: boolean
+  unfreezeAt: string | null
+  relatedId: number | null
+  remark: string | null
+  createdAt: string
+  instance: {
+    id: number
+    name: string
+    deleted?: boolean
+    buyer: {
+      id: number
+      username: string
+      email: string | null
+      avatarStyle: string
+      avatarBadgeId?: string | null
+    }
+    host: {
+      id: number
+      name: string
+    }
+    package: {
+      id: number
+      name: string
+    } | null
+    plan: {
+      id: number
+      name: string
+    } | null
+  } | null
+}
+
+interface Withdrawal {
+  id: number
+  amount: number
+  feeRate: number
+  feeAmount: number
+  actualAmount: number
+  target: string
+  status: string
+  rejectReason: string | null
+  processedAt: string | null
+  createdAt: string
+}
+
+interface HostingBlock {
+  id: number
+  blockedUserId: number
+  username: string
+  email: string | null
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  remark: string | null
+  createdAt: string
+}
+
+interface HostingBlockCandidate {
+  id: number
+  username: string
+  email: string | null
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  blocked: boolean
+}
+
+interface HostingStats {
+  myHostsCount: number
+  instancesOnMyHosts: number
+  uniqueCustomersCount: number
+  monthIncome: number
+  vipLevel: number
+  vipBadgeStyle?: VipBadgeStyle | null
+}
+
+type WalletTab = 'overview' | 'logs' | 'withdrawals' | 'blocks'
+type LogFilter = 'all' | 'purchase' | 'renew' | 'destroy'
+type MetricTone = 'default' | 'success' | 'warning' | 'info'
+
+// 状态
+const loading = ref(true)
+const balance = ref<HostingBalance | null>(null)
+const config = ref<HostingConfig | null>(null)
+const logs = ref<HostingLog[]>([])
+const withdrawals = ref<Withdrawal[]>([])
+const stats = ref<HostingStats | null>(null)
+const activeTab = ref<WalletTab>('overview')
+
+// 提现表单
+const showWithdrawModal = ref(false)
+const withdrawForm = ref({
+  amount: 10
+})
+const withdrawing = ref(false)
+
+// 分页 - 收支明细
+const logsPage = ref(1)
+const logsTotal = ref(0)
+const logsPageSize = ref(30)
+const logsSearch = ref('')
+const logsSearchInput = ref('')
+const logsLoading = ref(false)
+const logsFilter = ref<LogFilter>('all')
+
+// 分页 - 提现记录
+const withdrawalsPage = ref(1)
+const withdrawalsTotal = ref(0)
+const withdrawalsPageSize = ref(30)
+const withdrawalsLoading = ref(false)
+const blocks = ref<HostingBlock[]>([])
+const blocksLoading = ref(false)
+const blockSearch = ref('')
+const blockCandidates = ref<HostingBlockCandidate[]>([])
+const blockSearching = ref(false)
+const blockActionLoading = ref<number | null>(null)
+
+// 每页条数选项
+const pageSizeOptions = [10, 30, 50, 100]
+
+// 计算属性
+const canWithdraw = computed(() => {
+  if (!balance.value || !config.value) return false
+  return balance.value.available >= config.value.minWithdrawalAmount
+})
+
+const logsTotalPages = computed(() => Math.ceil(logsTotal.value / logsPageSize.value))
+const withdrawalsTotalPages = computed(() => Math.ceil(withdrawalsTotal.value / withdrawalsPageSize.value))
+
+const estimatedAmount = computed(() => {
+  if (!config.value) return 0
+  const fee = withdrawForm.value.amount * config.value.feeRateBalance
+  return withdrawForm.value.amount - fee
+})
+
+const tabs = computed((): Array<{ key: WalletTab; label: string }> => [
+  { key: 'overview', label: t('hostingWallet.tabs.overview') },
+  { key: 'logs', label: t('hostingWallet.tabs.logs') },
+  { key: 'withdrawals', label: t('hostingWallet.tabs.withdrawals') },
+  { key: 'blocks', label: t('hostingWallet.tabs.blocks') }
+])
+
+const headerStats = computed((): Array<{ key: string; label: string; value: string; tone: MetricTone }> => [
+  {
+    key: 'frozen',
+    label: t('hostingWallet.balance.frozen'),
+    value: formatMoney(balance.value?.frozen || 0),
+    tone: 'warning'
+  },
+  {
+    key: 'monthIncome',
+    label: t('hostingWallet.stats.monthIncome'),
+    value: formatMoney(stats.value?.monthIncome || 0),
+    tone: 'success'
+  },
+  {
+    key: 'totalIncome',
+    label: t('hostingWallet.balance.totalIncome'),
+    value: formatMoney(balance.value?.totalIncome || 0),
+    tone: 'info'
+  },
+  {
+    key: 'customers',
+    label: t('hostingWallet.stats.uniqueCustomersCount'),
+    value: String(stats.value?.uniqueCustomersCount || 0),
+    tone: 'default'
+  }
+])
+
+const logSummaryStats = computed((): Array<{ key: string; label: string; value: string; tone: MetricTone }> => [
+  {
+    key: 'available',
+    label: t('hostingWallet.balance.available'),
+    value: formatMoney(balance.value?.available || 0),
+    tone: 'default'
+  },
+  {
+    key: 'frozen',
+    label: t('hostingWallet.balance.frozen'),
+    value: formatMoney(balance.value?.frozen || 0),
+    tone: 'warning'
+  },
+  {
+    key: 'totalIncome',
+    label: t('hostingWallet.balance.totalIncome'),
+    value: formatMoney(balance.value?.totalIncome || 0),
+    tone: 'info'
+  }
+])
+
+const withdrawalSummaryStats = computed((): Array<{ key: string; label: string; value: string; tone: MetricTone }> => [
+  {
+    key: 'available',
+    label: t('hostingWallet.balance.available'),
+    value: formatMoney(balance.value?.available || 0),
+    tone: 'default'
+  },
+  {
+    key: 'monthIncome',
+    label: t('hostingWallet.stats.monthIncome'),
+    value: formatMoney(stats.value?.monthIncome || 0),
+    tone: 'success'
+  },
+  {
+    key: 'frozen',
+    label: t('hostingWallet.balance.frozen'),
+    value: formatMoney(balance.value?.frozen || 0),
+    tone: 'warning'
+  }
+])
+
+const hostMetaStats = computed((): Array<{ key: string; label: string; value: number }> => [
+  {
+    key: 'hosts',
+    label: t('hostingWallet.stats.myHostsCount'),
+    value: stats.value?.myHostsCount || 0
+  },
+  {
+    key: 'instances',
+    label: t('hostingWallet.stats.instancesOnMyHosts'),
+    value: stats.value?.instancesOnMyHosts || 0
+  }
+])
+
+const flowSteps = computed((): Array<{ key: string; title: string; desc: string }> => [
+  {
+    key: 'purchase',
+    title: t('hostingWallet.overview.step1Title'),
+    desc: t('hostingWallet.overview.step1Desc')
+  },
+  {
+    key: 'freeze',
+    title: t('hostingWallet.overview.step2Title'),
+    desc: t('hostingWallet.overview.step2Desc')
+  },
+  {
+    key: 'withdraw',
+    title: t('hostingWallet.overview.step3Title'),
+    desc: t('hostingWallet.overview.step3Desc')
+  }
+])
+
+const overviewRules = computed((): Array<{ key: string; title: string; desc: string }> => [
+  {
+    key: 'minimum',
+    title: t('hostingWallet.overview.minAmountTitle'),
+    desc: t('hostingWallet.overview.minAmount', { amount: formatMoney(config.value?.minWithdrawalAmount || 10) })
+  },
+  {
+    key: 'fee',
+    title: t('hostingWallet.overview.feeTitle'),
+    desc: t('hostingWallet.overview.feeDescNew')
+  },
+  {
+    key: 'method',
+    title: t('hostingWallet.overview.withdrawMethodTitle'),
+    desc: t('hostingWallet.overview.withdrawMethodDesc')
+  }
+])
+
+const logFilterOptions = computed((): Array<{ key: LogFilter; label: string }> => [
+  { key: 'all', label: t('hostingWallet.logs.filterAll') },
+  { key: 'purchase', label: t('hostingWallet.logs.actionTypes.purchase') },
+  { key: 'renew', label: t('hostingWallet.logs.actionTypes.renew') },
+  { key: 'destroy', label: t('hostingWallet.logs.actionTypes.destroy') }
+])
+
+const withdrawalHint = computed(() =>
+  canWithdraw.value
+    ? t('hostingWallet.modal.availableNote', { amount: formatMoney(balance.value?.available || 0) })
+    : t('hostingWallet.withdraw.minAmountNote', { amount: formatMoney(config.value?.minWithdrawalAmount || 10) })
+)
+
+const hostingNotice = computed(() => configStore.hostingNotice?.trim() || '')
+
+// logsFilter 改为后端参数，过滤通过 type 参数传给 API
+
+// 加载数据
+async function loadBalance() {
+  try {
+    const res = await api.hosting.getBalance()
+    balance.value = res.balance
+    config.value = res.config
+  } catch (err) {
+    console.error('Failed to load hosting balance:', err)
+  }
+}
+
+async function loadStats() {
+  try {
+    const res = await api.hosting.getStats()
+    stats.value = res.stats
+  } catch (err) {
+    console.error('Failed to load hosting stats:', err)
+  }
+}
+
+async function loadLogs(page = 1) {
+  logsLoading.value = true
+  try {
+    const res = await api.hosting.getLogs({ 
+      page, 
+      pageSize: logsPageSize.value,
+      search: logsSearch.value || undefined,
+      actionType: logsFilter.value !== 'all' ? logsFilter.value : undefined
+    })
+    logs.value = res.logs
+    logsTotal.value = res.total
+    logsPage.value = page
+  } catch (err) {
+    console.error('Failed to load hosting logs:', err)
+  } finally {
+    logsLoading.value = false
+  }
+}
+
+async function loadWithdrawals(page = 1) {
+  withdrawalsLoading.value = true
+  try {
+    const res = await api.hosting.getWithdrawals({ 
+      page, 
+      pageSize: withdrawalsPageSize.value
+    })
+    withdrawals.value = res.records
+    withdrawalsTotal.value = res.total
+    withdrawalsPage.value = page
+  } catch (err) {
+    console.error('Failed to load withdrawals:', err)
+  } finally {
+    withdrawalsLoading.value = false
+  }
+}
+
+async function loadBlocks() {
+  blocksLoading.value = true
+  try {
+    const res = await api.hosting.getBlocks()
+    blocks.value = res.blocks || []
+  } catch (err) {
+    console.error('Failed to load hosting blocks:', err)
+  } finally {
+    blocksLoading.value = false
+  }
+}
+
+async function searchBlockCandidates() {
+  const keyword = blockSearch.value.trim()
+  if (keyword.length < 2) {
+    blockCandidates.value = []
+    return
+  }
+
+  blockSearching.value = true
+  try {
+    const res = await api.hosting.searchBlockUsers(keyword)
+    blockCandidates.value = res.users || []
+  } catch (err: any) {
+    toast.error(err?.message || t('common.loadFailed'))
+  } finally {
+    blockSearching.value = false
+  }
+}
+
+// 搜索
+function handleLogsSearch() {
+  logsSearch.value = logsSearchInput.value
+  loadLogs(1)
+}
+
+// 分页
+function handleLogsPageSizeChange() {
+  loadLogs(1)
+}
+
+function handleWithdrawalsPageSizeChange() {
+  loadWithdrawals(1)
+}
+
+function handleTabChange(tab: WalletTab) {
+  activeTab.value = tab
+
+  if (tab === 'logs') {
+    loadLogs()
+  } else if (tab === 'withdrawals') {
+    loadWithdrawals()
+  } else if (tab === 'blocks') {
+    loadBlocks()
+  }
+}
+
+function handleLogsFilterChange(filter: LogFilter) {
+  logsFilter.value = filter
+  loadLogs(1)
+}
+
+// 提现
+async function submitWithdraw() {
+  if (!config.value) return
+  
+  if (withdrawForm.value.amount < config.value.minWithdrawalAmount) {
+    toast.error(t('hostingWallet.errors.minAmount', { amount: formatMoney(config.value.minWithdrawalAmount) }))
+    return
+  }
+  
+  if (balance.value && withdrawForm.value.amount > balance.value.available) {
+    toast.error(t('hostingWallet.errors.exceedBalance'))
+    return
+  }
+  
+  withdrawing.value = true
+  try {
+    const res = await api.hosting.withdraw({
+      amount: withdrawForm.value.amount
+    })
+    toast.success(res.message)
+    showWithdrawModal.value = false
+    await Promise.all([loadBalance(), loadLogs(), loadWithdrawals()])
+  } catch (err: any) {
+    toast.error(err?.message || t('common.error'))
+  } finally {
+    withdrawing.value = false
+  }
+}
+
+async function blockUser(userId: number) {
+  blockActionLoading.value = userId
+  try {
+    await api.hosting.blockUser({ userId })
+    toast.success(t('hostingWallet.blocks.blockSuccess'))
+    blockCandidates.value = blockCandidates.value.map(user => user.id === userId ? { ...user, blocked: true } : user)
+    await loadBlocks()
+  } catch (err: any) {
+    toast.error(err?.message || t('common.error'))
+  } finally {
+    blockActionLoading.value = null
+  }
+}
+
+async function unblockUser(userId: number) {
+  blockActionLoading.value = userId
+  try {
+    await api.hosting.unblockUser(userId)
+    toast.success(t('hostingWallet.blocks.unblockSuccess'))
+    blocks.value = blocks.value.filter(block => block.blockedUserId !== userId)
+    blockCandidates.value = blockCandidates.value.map(user => user.id === userId ? { ...user, blocked: false } : user)
+  } catch (err: any) {
+    toast.error(err?.message || t('common.error'))
+  } finally {
+    blockActionLoading.value = null
+  }
+}
+
+// 格式化函数
+function formatMoney(amount: number): string {
+  return `¥${amount.toFixed(2)}`
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+function formatShortDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
+}
+
+function getActionTypeLabel(actionType: string | null): string {
+  if (!actionType) return '-'
+  const key = `hostingWallet.logs.actionTypes.${actionType}`
+  const label = t(key)
+  return label === key ? actionType : label
+}
+
+function getStatusLabel(status: string): string {
+  const key = `hostingWallet.withdrawals.status.${status}`
+  const label = t(key)
+  return label === key ? status : label
+}
+
+function getStatusClass(status: string): string {
+  const classes: Record<string, string> = {
+    pending: 'text-yellow-700 bg-yellow-100 dark:text-yellow-300 dark:bg-yellow-900/30',
+    approved: 'text-blue-700 bg-blue-100 dark:text-blue-300 dark:bg-blue-900/30',
+    rejected: 'text-red-700 bg-red-100 dark:text-red-300 dark:bg-red-900/30',
+    completed: 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-900/30'
+  }
+  return classes[status] || 'text-gray-600 bg-gray-100'
+}
+
+function getActionTypeBadgeClass(actionType: string | null): string {
+  const classes: Record<string, string> = {
+    purchase: 'badge-success',
+    renew: 'badge-info',
+    upgrade: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+    destroy: 'badge-error',
+    unfreeze: 'badge-warning',
+    withdraw: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+    admin_adjust: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400'
+  }
+  return classes[actionType || ''] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+}
+
+function getMetricCardClass(tone: MetricTone): string {
+  const classes: Record<MetricTone, string> = {
+    default: 'border-themed bg-themed-tertiary',
+    success: 'border-emerald-500/15 bg-emerald-500/[0.06]',
+    warning: 'border-amber-500/15 bg-amber-500/[0.06]',
+    info: 'border-blue-500/15 bg-blue-500/[0.06]'
+  }
+
+  return classes[tone]
+}
+
+function getMetricValueClass(tone: MetricTone): string {
+  const classes: Record<MetricTone, string> = {
+    default: 'text-themed',
+    success: 'text-emerald-600 dark:text-emerald-300',
+    warning: 'text-amber-600 dark:text-amber-300',
+    info: 'text-blue-600 dark:text-blue-300'
+  }
+
+  return classes[tone]
+}
+
+function getFlowCardClass(index: number): string {
+  const classes = [
+    'border-blue-500/15 bg-blue-500/[0.04]',
+    'border-amber-500/15 bg-amber-500/[0.04]',
+    'border-emerald-500/15 bg-emerald-500/[0.04]'
+  ]
+
+  return classes[index] || 'border-themed bg-themed-tertiary'
+}
+
+function getFlowIndexClass(index: number): string {
+  const classes = [
+    'bg-blue-600 text-white dark:bg-blue-500',
+    'bg-amber-500 text-white',
+    'bg-emerald-600 text-white dark:bg-emerald-500'
+  ]
+
+  return classes[index] || 'bg-themed-secondary text-themed'
+}
+
+onMounted(async () => {
+  loading.value = true
+  await Promise.all([loadBalance(), loadStats(), loadLogs(), loadWithdrawals(), configStore.loadPublicConfig()])
+  loading.value = false
+})
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 顶部胶囊 Tabs -->
+    <div class="mb-4 flex justify-center sm:mb-5">
+      <div
+        class="inline-flex max-w-full overflow-x-auto p-1 rounded-full"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+      >
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          class="px-4 py-2 text-sm font-medium rounded-full transition-all duration-300 whitespace-nowrap sm:px-5"
+          :class="activeTab === tab.key
+            ? themeStore.isDark
+              ? 'bg-white text-gray-900 shadow-lg'
+              : 'bg-gray-900 text-white shadow-lg'
+            : themeStore.isDark
+              ? 'text-gray-400 hover:text-gray-200'
+              : 'text-gray-600 hover:text-gray-900'"
+          @click="handleTabChange(tab.key)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+    
+    <!-- 骨架屏加载态 -->
+    <div v-if="loading" class="space-y-6">
+      <div class="card p-6 animate-pulse">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+          <div class="flex-1">
+            <div class="h-4 bg-themed-secondary rounded w-24 mb-3"></div>
+            <div class="h-10 bg-themed-secondary rounded w-48"></div>
+          </div>
+          <div class="grid grid-cols-4 gap-3">
+            <div v-for="i in 4" :key="i" class="h-16 bg-themed-secondary rounded-lg"></div>
+          </div>
+        </div>
+      </div>
+      <div class="card p-6 animate-pulse">
+        <div class="h-6 bg-themed-secondary rounded w-32 mb-4"></div>
+        <div class="space-y-3">
+          <div v-for="i in 5" :key="i" class="h-12 bg-themed-secondary rounded-lg"></div>
+        </div>
+      </div>
+    </div>
+    
+    <template v-else>
+      <!-- 头部统计区 -->
+      <div v-if="activeTab === 'overview'" class="card rounded-2xl p-4 sm:p-6 lg:p-7 mb-6">
+        <div class="flex flex-col gap-5 xl:flex-row xl:items-stretch xl:justify-between">
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+              <div class="min-w-0 flex items-center gap-4">
+                <div class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl border border-themed bg-themed-tertiary p-1.5 shadow-sm">
+                  <UserAvatar
+                    :username="authStore.user?.username || ''"
+                    :email="authStore.user?.email"
+                    :avatar-style="authStore.user?.avatarStyle || 'adventurer'"
+                    :size="54"
+                  />
+                </div>
+                <div class="min-w-0">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="badge badge-default">{{ t('hostingWallet.hostingMember') }}</span>
+                    <span
+                      v-if="stats && stats.vipLevel > 0"
+                      class="inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium"
+                      :style="getVipBadgeInlineStyle(normalizeVipBadgeStyle(stats.vipBadgeStyle, stats.vipLevel))"
+                    >
+                      VIP{{ stats.vipLevel }}
+                    </span>
+                  </div>
+                  <div class="mt-2 truncate text-lg font-semibold text-themed">{{ authStore.user?.username || '--' }}</div>
+                  <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-themed-muted sm:text-sm">
+                    <span v-for="item in hostMetaStats" :key="item.key">
+                      {{ item.label }} {{ item.value }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex flex-wrap gap-2 sm:justify-end">
+                <button
+                  class="wallet-withdraw-btn wallet-withdraw-btn--hero"
+                  :disabled="!canWithdraw"
+                  @click="showWithdrawModal = true"
+                >
+                  <span class="wallet-withdraw-btn__icon">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9l-5 5-5-5m10 6H7" />
+                    </svg>
+                  </span>
+                  <span>{{ t('hostingWallet.withdraw.button') }}</span>
+                </button>
+                <button
+                  class="btn btn-secondary"
+                  @click="handleTabChange('withdrawals')"
+                >
+                  {{ t('hostingWallet.tabs.withdrawals') }}
+                </button>
+              </div>
+            </div>
+
+            <div class="mt-5 rounded-2xl border border-themed bg-themed-tertiary p-5 sm:p-6">
+              <div class="text-xs font-medium uppercase tracking-[0.24em] text-themed-muted">
+                {{ t('hostingWallet.balance.available') }}
+              </div>
+              <div class="mt-3 text-4xl font-semibold text-themed font-mono tabular-nums sm:text-5xl lg:text-6xl">
+                {{ formatMoney(balance?.available || 0) }}
+              </div>
+              <div class="mt-4 flex flex-wrap items-center gap-2 text-sm text-themed-muted">
+                <span class="inline-flex items-center rounded-full border border-themed bg-themed px-3 py-1 text-xs font-medium text-themed-secondary">
+                  {{ t('hostingWallet.balance.frozenNote') }}
+                </span>
+                <span>{{ withdrawalHint }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 gap-3 xl:w-[22rem]">
+            <div
+              v-for="item in headerStats"
+              :key="item.key"
+              :class="['rounded-2xl border p-4 sm:p-5', getMetricCardClass(item.tone)]"
+            >
+              <div class="text-xs font-medium uppercase tracking-[0.18em] text-themed-muted">
+                {{ item.label }}
+              </div>
+              <div :class="['mt-3 text-xl font-semibold font-mono tabular-nums sm:text-2xl', getMetricValueClass(item.tone)]">
+                {{ item.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="activeTab === 'logs'" class="card rounded-2xl p-4 sm:p-5 mb-4">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div class="min-w-0">
+            <div class="text-sm font-semibold text-themed">{{ t('hostingWallet.tabs.logs') }}</div>
+            <div class="mt-1 text-sm text-themed-muted">{{ t('hostingWallet.balance.frozenNote') }}</div>
+          </div>
+          <div class="grid grid-cols-3 gap-2 sm:gap-3 lg:w-auto">
+            <div
+              v-for="item in logSummaryStats"
+              :key="item.key"
+              :class="['rounded-xl border p-3 sm:p-4', getMetricCardClass(item.tone)]"
+            >
+              <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-themed-muted">
+                {{ item.label }}
+              </div>
+              <div :class="['mt-2 text-base font-semibold font-mono tabular-nums sm:text-lg', getMetricValueClass(item.tone)]">
+                {{ item.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="activeTab === 'withdrawals'" class="card rounded-2xl p-4 sm:p-5 mb-4">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div class="min-w-0">
+            <div class="text-sm font-semibold text-themed">{{ t('hostingWallet.tabs.withdrawals') }}</div>
+            <div class="mt-1 text-sm text-themed-muted">{{ withdrawalHint }}</div>
+          </div>
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <div class="grid grid-cols-3 gap-2 sm:gap-3">
+              <div
+                v-for="item in withdrawalSummaryStats"
+                :key="item.key"
+                :class="['rounded-xl border p-3 sm:p-4', getMetricCardClass(item.tone)]"
+              >
+                <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-themed-muted">
+                  {{ item.label }}
+                </div>
+                <div :class="['mt-2 text-base font-semibold font-mono tabular-nums sm:text-lg', getMetricValueClass(item.tone)]">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="activeTab === 'blocks'" class="card rounded-2xl p-4 sm:p-5 mb-4">
+        <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <div class="text-sm font-semibold text-themed">{{ t('hostingWallet.blocks.title') }}</div>
+            <div class="mt-1 text-sm text-themed-muted">{{ t('hostingWallet.blocks.description') }}</div>
+          </div>
+          <div class="rounded-xl border border-themed bg-themed-tertiary px-4 py-3 text-sm text-themed-secondary">
+            {{ t('hostingWallet.blocks.total', { count: blocks.length }) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 概览内容 -->
+      <div v-if="activeTab === 'overview'" class="grid gap-4 xl:grid-cols-[minmax(0,1.45fr)_minmax(19rem,0.95fr)]">
+        <div class="card rounded-2xl p-5 sm:p-6">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h3 class="text-base font-semibold text-themed">{{ t('hostingWallet.overview.howItWorks') }}</h3>
+              <p class="mt-1 text-sm text-themed-muted">{{ t('hostingWallet.description') }}</p>
+            </div>
+            <span class="inline-flex w-fit items-center rounded-full border border-themed bg-themed-tertiary px-3 py-1 text-xs font-medium text-themed-secondary">
+              {{ t('hostingWallet.balance.frozenNote') }}
+            </span>
+          </div>
+
+          <div class="mt-5 grid gap-3 md:grid-cols-3">
+            <div
+              v-for="(step, index) in flowSteps"
+              :key="step.key"
+              :class="['rounded-2xl border p-4 sm:p-5', getFlowCardClass(index)]"
+            >
+              <div class="flex items-start gap-3">
+                <div :class="['flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-xs font-semibold', getFlowIndexClass(index)]">
+                  {{ index + 1 }}
+                </div>
+                <div class="min-w-0">
+                  <div class="text-sm font-semibold text-themed">{{ step.title }}</div>
+                  <div class="mt-1 text-sm leading-6 text-themed-muted">{{ step.desc }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="hostingNotice"
+            class="mt-5 rounded-2xl border border-sky-200/70 bg-sky-50/70 p-4 shadow-sm shadow-sky-100/40 dark:border-sky-900/30 dark:bg-sky-500/[0.06] dark:shadow-none sm:p-5"
+          >
+            <div class="flex items-center gap-2 text-sky-700 dark:text-sky-200">
+              <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl bg-white/90 shadow-sm dark:bg-white/[0.06]">
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" />
+                </svg>
+              </div>
+              <div class="text-sm font-semibold text-themed">{{ t('hostingWallet.notice.title') }}</div>
+            </div>
+
+            <div class="mt-3 rounded-xl border border-white/80 bg-white/85 p-4 shadow-sm shadow-sky-100/40 dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none sm:p-5">
+              <div class="whitespace-pre-line break-words text-sm leading-7 text-themed-secondary">
+                {{ hostingNotice }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div class="card rounded-2xl p-5 sm:p-6">
+            <h3 class="text-base font-semibold text-themed">{{ t('hostingWallet.overview.title') }}</h3>
+            <div class="mt-4 divide-y divide-themed">
+              <div
+                v-for="rule in overviewRules"
+                :key="rule.key"
+                class="py-4 first:pt-0 last:pb-0"
+              >
+                <div class="text-sm font-medium text-themed">{{ rule.title }}</div>
+                <div class="mt-1 text-sm leading-6 text-themed-muted">{{ rule.desc }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div :class="['rounded-2xl border p-5 sm:p-6', canWithdraw ? 'border-emerald-500/20 bg-emerald-500/[0.06]' : 'border-themed bg-themed-tertiary']">
+            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div class="min-w-0">
+                <div class="text-sm font-semibold text-themed">{{ t('hostingWallet.withdraw.button') }}</div>
+                <div class="mt-1 text-sm leading-6 text-themed-muted">{{ withdrawalHint }}</div>
+              </div>
+              <button
+                class="wallet-withdraw-btn wallet-withdraw-btn--hero shrink-0"
+                :disabled="!canWithdraw"
+                @click="showWithdrawModal = true"
+              >
+                <span class="wallet-withdraw-btn__icon">
+                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9l-5 5-5-5m10 6H7" />
+                  </svg>
+                </span>
+                <span>{{ t('hostingWallet.withdraw.button') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 收支明细 -->
+      <div v-if="activeTab === 'logs'" class="card rounded-2xl">
+        <!-- 搜索和筛选 -->
+        <div class="border-b border-themed p-4 sm:p-5">
+          <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+            <div class="flex w-full items-center gap-2 xl:max-w-xl">
+              <div class="relative flex-1">
+                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <input
+                  v-model="logsSearchInput"
+                  type="text"
+                  :placeholder="t('hostingWallet.logs.searchPlaceholder')"
+                  class="input h-12 rounded-xl bg-themed pl-9"
+                  @keyup.enter="handleLogsSearch"
+                />
+              </div>
+              <button
+                class="btn btn-secondary h-12 shrink-0 whitespace-nowrap px-4 sm:px-5"
+                @click="handleLogsSearch"
+              >
+                {{ t('common.search') }}
+              </button>
+            </div>
+
+            <div class="flex flex-col gap-3 lg:flex-row lg:items-center xl:justify-end">
+              <div class="w-full lg:w-auto">
+                <div class="flex w-full min-w-0 gap-1 rounded-2xl border border-themed bg-themed-tertiary p-1 lg:inline-flex lg:min-w-max">
+                  <button
+                    v-for="filter in logFilterOptions"
+                    :key="filter.key"
+                    class="min-w-0 flex-1 whitespace-nowrap rounded-xl px-2.5 py-2 text-sm font-medium transition-all lg:flex-none lg:px-4"
+                    :class="logsFilter === filter.key
+                      ? 'bg-themed text-themed shadow-sm border border-themed'
+                      : 'text-themed-muted hover:bg-themed-hover hover:text-themed'"
+                    @click="handleLogsFilterChange(filter.key)"
+                  >
+                    {{ filter.label }}
+                  </button>
+                </div>
+              </div>
+
+              <select
+                v-model="logsPageSize"
+                class="input w-full rounded-xl bg-themed lg:w-auto"
+                @change="handleLogsPageSizeChange"
+              >
+                <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }} {{ t('hostingWallet.perPage') }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 骨架屏加载态 -->
+        <div v-if="logsLoading" class="p-4 space-y-3">
+          <div v-for="i in 5" :key="i" class="animate-pulse">
+            <div class="flex items-center gap-4 p-4 bg-themed-secondary rounded-lg">
+              <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
+              <div class="flex-1 space-y-2">
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+              </div>
+              <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 空状态 -->
+        <div v-else-if="logs.length === 0" class="p-12 text-center">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-themed-secondary flex items-center justify-center">
+            <svg class="w-8 h-8 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+            </svg>
+          </div>
+          <div class="text-base font-medium text-themed">{{ logsSearch ? t('common.noSearchResults') : t('hostingWallet.logs.noRecords') }}</div>
+          <div class="text-sm text-themed-muted mt-1">{{ t('hostingWallet.logs.emptyHint') }}</div>
+        </div>
+        
+        <template v-else>
+          <!-- PC端表格 -->
+          <div class="hidden md:block overflow-x-auto">
+            <table class="w-full">
+              <thead class="bg-themed-secondary">
+                <tr>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.logs.columns.type') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.logs.columns.amount') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.logs.columns.status') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.logs.columns.buyer') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.logs.columns.instance') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.logs.columns.time') }}</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-themed">
+                <tr v-for="log in logs" :key="log.id" :class="['hover:bg-themed-secondary transition-colors', { 'opacity-60': log.instance?.deleted }]">
+                  <td class="px-4 py-3">
+                    <span :class="['badge', getActionTypeBadgeClass(log.actionType)]">
+                      {{ getActionTypeLabel(log.actionType) }}
+                    </span>
+                  </td>
+                  <td class="px-4 py-3">
+                    <span :class="['font-mono font-semibold', log.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400']">
+                      {{ log.amount >= 0 ? '+' : '' }}{{ formatMoney(log.amount) }}
+                    </span>
+                  </td>
+                  <td class="px-4 py-3">
+                    <span v-if="log.frozen" class="inline-flex items-center gap-1.5 text-yellow-600 dark:text-yellow-400 text-sm">
+                      <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
+                      {{ t('hostingWallet.logs.status.frozen') }}
+                    </span>
+                    <span v-else class="inline-flex items-center gap-1.5 text-green-600 dark:text-green-400 text-sm">
+                      <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                      {{ t('hostingWallet.logs.status.unfrozen') }}
+                    </span>
+                  </td>
+                  <td class="px-4 py-3">
+                    <div v-if="log.instance" class="flex items-center gap-2">
+                      <UserAvatar :username="log.instance.buyer.username" :avatar-style="log.instance.buyer.avatarStyle" :badge-id="log.instance.buyer.avatarBadgeId || null" :size="28" class="shrink-0" />
+                      <span class="text-sm text-themed truncate max-w-[120px]">{{ log.instance.buyer.username || t('hostingWallet.logs.unknownUser') }}</span>
+                    </div>
+                    <span v-else class="text-themed-muted">-</span>
+                  </td>
+                  <td class="px-4 py-3">
+                    <template v-if="log.instance">
+                      <div class="text-sm text-themed">
+                        <RouterLink
+                          :to="{ name: 'instance-detail', params: { id: log.instance.id } }"
+                          class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 hover:underline font-mono"
+                        >
+                          {{ log.instance.id }}
+                        </RouterLink>
+                        <span class="mx-1">{{ log.instance.name }}</span>
+                        <span v-if="log.instance.deleted" class="text-xs text-themed-muted">({{ t('common.deleted') }})</span>
+                      </div>
+                      <div class="text-xs text-themed-muted">
+                        <RouterLink
+                          :to="{ name: 'my-host-detail', params: { id: log.instance.host.id } }"
+                          class="hover:text-blue-500 dark:hover:text-blue-400 hover:underline"
+                        >
+                          {{ log.instance.host.name }}
+                        </RouterLink>
+                      </div>
+                    </template>
+                    <span v-else class="text-sm text-themed-muted">-</span>
+                  </td>
+                  <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">{{ formatShortDate(log.createdAt) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <!-- 移动端卡片 -->
+          <div class="md:hidden p-4 space-y-2">
+            <div
+              v-for="log in logs"
+              :key="log.id"
+              :class="['rounded-lg border border-themed', { 'opacity-60': log.instance?.deleted }]"
+            >
+              <!-- 无实例信息的紧凑卡片（提现、扣余额等） -->
+              <div v-if="!log.instance" class="flex items-center justify-between gap-2 px-4 py-3">
+                <div class="flex items-center gap-2">
+                  <span :class="['badge', getActionTypeBadgeClass(log.actionType)]">
+                    {{ getActionTypeLabel(log.actionType) }}
+                  </span>
+                  <span :class="['font-mono font-semibold text-sm', log.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400']">
+                    {{ log.amount >= 0 ? '+' : '' }}{{ formatMoney(log.amount) }}
+                  </span>
+                </div>
+                <span class="text-xs text-themed-muted whitespace-nowrap">{{ formatShortDate(log.createdAt) }}</span>
+              </div>
+
+              <!-- 有实例信息的详细卡片 -->
+              <template v-else>
+                <div class="px-4 pt-3 pb-2">
+                  <!-- 第一行：类型 + 金额 -->
+                  <div class="flex items-center justify-between gap-2 mb-2">
+                    <span :class="['badge', getActionTypeBadgeClass(log.actionType)]">
+                      {{ getActionTypeLabel(log.actionType) }}
+                    </span>
+                    <span :class="['font-mono font-semibold text-sm', log.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400']">
+                      {{ log.amount >= 0 ? '+' : '' }}{{ formatMoney(log.amount) }}
+                    </span>
+                  </div>
+                  <!-- 第二行：购买者 -->
+                  <div class="flex items-center gap-2">
+                    <UserAvatar :username="log.instance.buyer.username" :avatar-style="log.instance.buyer.avatarStyle" :badge-id="log.instance.buyer.avatarBadgeId || null" :size="20" class="shrink-0" />
+                    <span class="text-sm text-themed truncate">{{ log.instance.buyer.username }}</span>
+                  </div>
+                </div>
+                <!-- 底栏：实例信息 + 时间 -->
+                <div class="flex items-center justify-between gap-2 px-4 py-2 border-t border-themed text-xs text-themed-muted">
+                  <span class="truncate">
+                    <RouterLink
+                      :to="{ name: 'instance-detail', params: { id: log.instance.id } }"
+                      class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 hover:underline font-mono"
+                    >{{ log.instance.id }}</RouterLink>
+                    <span class="mx-0.5">{{ log.instance.name }}</span>
+                    <span v-if="log.instance.deleted" class="text-themed-muted">({{ t('common.deleted') }})</span>
+                    <span class="mx-0.5">·</span>
+                    <RouterLink
+                      :to="{ name: 'my-host-detail', params: { id: log.instance.host.id } }"
+                      class="hover:text-blue-500 dark:hover:text-blue-400 hover:underline"
+                    >{{ log.instance.host.name }}</RouterLink>
+                  </span>
+                  <span class="whitespace-nowrap">{{ formatShortDate(log.createdAt) }}</span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+        
+        <!-- 分页 -->
+        <div v-if="logsTotalPages > 1" class="p-4 border-t border-themed flex items-center justify-between">
+          <span class="text-sm text-themed-muted">{{ t('common.total') }} {{ logsTotal }} {{ t('common.items') }}</span>
+          <div class="flex items-center gap-2">
+            <button
+              :disabled="logsPage === 1"
+              class="btn btn-sm btn-ghost"
+              @click="loadLogs(logsPage - 1)"
+            >
+              {{ t('hostingWallet.prevPage') }}
+            </button>
+            <span class="text-sm text-themed-muted px-2">{{ logsPage }} / {{ logsTotalPages }}</span>
+            <button
+              :disabled="logsPage >= logsTotalPages"
+              class="btn btn-sm btn-ghost"
+              @click="loadLogs(logsPage + 1)"
+            >
+              {{ t('hostingWallet.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 提现记录 -->
+      <div v-if="activeTab === 'withdrawals'" class="card rounded-2xl">
+        <!-- 分页控制 -->
+        <div class="border-b border-themed p-4 sm:p-5">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <div class="text-sm font-medium text-themed">{{ t('hostingWallet.tabs.withdrawals') }}</div>
+              <div class="mt-1 text-sm text-themed-muted">{{ t('common.total') }} {{ withdrawalsTotal }} {{ t('common.items') }}</div>
+            </div>
+            <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+              <select
+                v-model="withdrawalsPageSize"
+                class="input w-full rounded-xl bg-themed sm:w-auto"
+                @change="handleWithdrawalsPageSizeChange"
+              >
+                <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }} {{ t('hostingWallet.perPage') }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 骨架屏加载态 -->
+        <div v-if="withdrawalsLoading" class="p-4 space-y-3">
+          <div v-for="i in 3" :key="i" class="animate-pulse">
+            <div class="flex items-center gap-4 p-4 bg-themed-secondary rounded-lg">
+              <div class="flex-1 space-y-2">
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+              </div>
+              <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 空状态 -->
+        <div v-else-if="withdrawals.length === 0" class="p-12 text-center">
+          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-themed-secondary flex items-center justify-center">
+            <svg class="w-8 h-8 text-themed-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 12V8H6a2 2 0 01-2-2c0-1.1.9-2 2-2h12v4M4 6v12a2 2 0 002 2h14v-4M18 12a2 2 0 100 4 2 2 0 000-4z" />
+            </svg>
+          </div>
+          <div class="text-base font-medium text-themed">{{ t('hostingWallet.withdrawals.emptyTitle') }}</div>
+          <div class="text-sm text-themed-muted mt-1">{{ t('hostingWallet.withdrawals.emptyHint') }}</div>
+          <button
+            v-if="canWithdraw"
+            class="wallet-withdraw-btn wallet-withdraw-btn--hero mt-4"
+            @click="showWithdrawModal = true"
+          >
+            <span class="wallet-withdraw-btn__icon">
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9l-5 5-5-5m10 6H7" />
+              </svg>
+            </span>
+            <span>{{ t('hostingWallet.withdrawals.startEarning') }}</span>
+          </button>
+        </div>
+        
+        <template v-else>
+          <!-- PC端表格 -->
+          <div class="hidden md:block overflow-x-auto">
+            <table class="w-full">
+              <thead class="bg-themed-secondary">
+                <tr>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.withdrawals.columns.amount') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.withdrawals.columns.actualAmount') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.withdrawals.columns.target') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.withdrawals.columns.status') }}</th>
+                  <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('hostingWallet.withdrawals.columns.time') }}</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-themed">
+                <tr v-for="w in withdrawals" :key="w.id" class="hover:bg-themed-secondary transition-colors">
+                  <td class="px-4 py-3 font-mono text-sm text-themed">{{ formatMoney(w.amount) }}</td>
+                  <td class="px-4 py-3 font-mono text-sm font-semibold text-green-600 dark:text-green-400">{{ formatMoney(w.actualAmount) }}</td>
+                  <td class="px-4 py-3 text-sm text-themed">{{ t('hostingWallet.withdrawals.target.balance') }}</td>
+                  <td class="px-4 py-3">
+                    <span :class="['badge', getStatusClass(w.status)]">
+                      {{ getStatusLabel(w.status) }}
+                    </span>
+                    <div v-if="w.rejectReason" class="text-xs text-red-500 mt-1">{{ w.rejectReason }}</div>
+                  </td>
+                  <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">{{ formatDate(w.createdAt) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <!-- 移动端卡片 -->
+          <div class="md:hidden p-4 space-y-3">
+            <div v-for="w in withdrawals" :key="w.id" class="p-4 bg-themed-secondary rounded-lg">
+              <div class="flex items-center justify-between mb-2">
+                <span class="font-mono font-semibold text-lg text-themed">{{ formatMoney(w.amount) }}</span>
+                <span :class="['badge', getStatusClass(w.status)]">
+                  {{ getStatusLabel(w.status) }}
+                </span>
+              </div>
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-themed-muted">{{ t('hostingWallet.withdrawals.columns.actualAmount') }}</span>
+                <span class="font-mono font-semibold text-green-600 dark:text-green-400">{{ formatMoney(w.actualAmount) }}</span>
+              </div>
+              <div class="flex items-center justify-between text-sm mt-1">
+                <span class="text-themed-muted">{{ t('hostingWallet.withdrawals.columns.time') }}</span>
+                <span class="text-themed">{{ formatShortDate(w.createdAt) }}</span>
+              </div>
+              <div v-if="w.rejectReason" class="mt-2 text-xs text-red-500 bg-red-50 dark:bg-red-900/20 rounded-lg p-2">{{ w.rejectReason }}</div>
+            </div>
+          </div>
+        </template>
+        
+        <!-- 分页 -->
+        <div v-if="withdrawalsTotalPages > 1" class="p-4 border-t border-themed flex justify-center">
+          <div class="flex items-center gap-2">
+            <button
+              :disabled="withdrawalsPage === 1"
+              class="btn btn-sm btn-ghost"
+              @click="loadWithdrawals(withdrawalsPage - 1)"
+            >
+              {{ t('hostingWallet.prevPage') }}
+            </button>
+            <span class="text-sm text-themed-muted px-2">{{ withdrawalsPage }} / {{ withdrawalsTotalPages }}</span>
+            <button
+              :disabled="withdrawalsPage >= withdrawalsTotalPages"
+              class="btn btn-sm btn-ghost"
+              @click="loadWithdrawals(withdrawalsPage + 1)"
+            >
+              {{ t('hostingWallet.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 黑名单 -->
+      <div v-if="activeTab === 'blocks'" class="space-y-4">
+        <div class="card rounded-2xl p-4 sm:p-5">
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-end">
+            <div class="flex-1">
+              <label class="mb-2 block text-sm font-medium text-themed">{{ t('hostingWallet.blocks.searchLabel') }}</label>
+              <input
+                v-model="blockSearch"
+                type="text"
+                class="input h-12 rounded-xl bg-themed"
+                :placeholder="t('hostingWallet.blocks.searchPlaceholder')"
+                @keyup.enter="searchBlockCandidates"
+              />
+            </div>
+            <button
+              class="btn btn-primary h-12 px-5"
+              :disabled="blockSearching"
+              @click="searchBlockCandidates"
+            >
+              {{ blockSearching ? t('common.loading') : t('common.search') }}
+            </button>
+          </div>
+
+          <div v-if="blockCandidates.length > 0" class="mt-4 divide-y divide-themed rounded-xl border border-themed">
+            <div
+              v-for="candidate in blockCandidates"
+              :key="candidate.id"
+              class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between"
+            >
+              <div class="flex min-w-0 items-center gap-3">
+                <UserAvatar
+                  :username="candidate.username"
+                  :email="candidate.email"
+                  :avatar-style="candidate.avatarStyle"
+                  :badge-id="candidate.avatarBadgeId || null"
+                  :size="36"
+                />
+                <div class="min-w-0">
+                  <div class="truncate text-sm font-medium text-themed">{{ candidate.username }}</div>
+                  <div class="truncate text-xs text-themed-muted">UID {{ candidate.id }} · {{ candidate.email || t('common.notSet') }}</div>
+                </div>
+              </div>
+              <button
+                v-if="candidate.blocked"
+                class="btn btn-secondary btn-sm"
+                :disabled="blockActionLoading === candidate.id"
+                @click="unblockUser(candidate.id)"
+              >
+                {{ t('hostingWallet.blocks.unblock') }}
+              </button>
+              <button
+                v-else
+                class="btn btn-danger btn-sm"
+                :disabled="blockActionLoading === candidate.id"
+                @click="blockUser(candidate.id)"
+              >
+                {{ t('hostingWallet.blocks.block') }}
+              </button>
+            </div>
+          </div>
+          <div v-else-if="blockSearch.trim().length >= 2 && !blockSearching" class="mt-4 rounded-xl border border-themed p-4 text-sm text-themed-muted">
+            {{ t('hostingWallet.blocks.noSearchResults') }}
+          </div>
+        </div>
+
+        <div class="card rounded-2xl">
+          <div class="border-b border-themed p-4 sm:p-5">
+            <div class="text-sm font-medium text-themed">{{ t('hostingWallet.blocks.blockedUsers') }}</div>
+            <div class="mt-1 text-sm text-themed-muted">{{ t('hostingWallet.blocks.effectHint') }}</div>
+          </div>
+
+          <div v-if="blocksLoading" class="p-8 text-center text-themed-muted">
+            {{ t('common.loading') }}
+          </div>
+          <div v-else-if="blocks.length === 0" class="p-12 text-center">
+            <div class="text-base font-medium text-themed">{{ t('hostingWallet.blocks.emptyTitle') }}</div>
+            <div class="mt-1 text-sm text-themed-muted">{{ t('hostingWallet.blocks.emptyHint') }}</div>
+          </div>
+          <div v-else class="divide-y divide-themed">
+            <div
+              v-for="block in blocks"
+              :key="block.id"
+              class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between"
+            >
+              <div class="flex min-w-0 items-center gap-3">
+                <UserAvatar
+                  :username="block.username"
+                  :email="block.email"
+                  :avatar-style="block.avatarStyle"
+                  :badge-id="block.avatarBadgeId || null"
+                  :size="38"
+                />
+                <div class="min-w-0">
+                  <div class="truncate text-sm font-medium text-themed">{{ block.username }}</div>
+                  <div class="truncate text-xs text-themed-muted">
+                    UID {{ block.blockedUserId }} · {{ block.email || t('common.notSet') }} · {{ formatShortDate(block.createdAt) }}
+                  </div>
+                </div>
+              </div>
+              <button
+                class="btn btn-secondary btn-sm"
+                :disabled="blockActionLoading === block.blockedUserId"
+                @click="unblockUser(block.blockedUserId)"
+              >
+                {{ t('hostingWallet.blocks.unblock') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 提现弹窗 -->
+    <Teleport to="body">
+      <div v-if="showWithdrawModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showWithdrawModal = false"></div>
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('hostingWallet.modal.title') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showWithdrawModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <div>
+              <label class="label">{{ t('hostingWallet.modal.amount') }}</label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-themed-muted font-medium">¥</span>
+                <input
+                  v-model.number="withdrawForm.amount"
+                  type="number"
+                  :min="config?.minWithdrawalAmount || 10"
+                  :max="balance?.available || 0"
+                  class="input w-full pl-7 font-mono"
+                />
+              </div>
+              <div class="text-xs text-themed-muted mt-2">{{ t('hostingWallet.modal.availableNote', { amount: formatMoney(balance?.available || 0) }) }}</div>
+            </div>
+            
+            <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+              <div class="flex items-center gap-2 text-blue-700 dark:text-blue-300">
+                <svg 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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                </svg>
+                <span class="text-sm font-medium">{{ t('hostingWallet.modal.targetBalance', { rate: ((config?.feeRateBalance || 0.05) * 100).toFixed(0) }) }}</span>
+              </div>
+              <div class="text-xs text-blue-600 dark:text-blue-400 mt-2">
+                {{ t('hostingWallet.modal.manualWithdrawNote') }}
+              </div>
+            </div>
+            
+            <div class="bg-themed-secondary rounded-lg p-4 space-y-2">
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ t('hostingWallet.modal.summary.amount') }}</span>
+                <span class="font-mono text-themed">{{ formatMoney(withdrawForm.amount) }}</span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ t('hostingWallet.modal.summary.fee') }}</span>
+                <span class="font-mono text-red-500">-{{ formatMoney(withdrawForm.amount - estimatedAmount) }}</span>
+              </div>
+              <div class="flex justify-between text-base pt-2 border-t border-themed">
+                <span class="font-medium text-themed">{{ t('hostingWallet.modal.summary.actual') }}</span>
+                <span class="font-mono font-bold text-green-600 dark:text-green-400">{{ formatMoney(estimatedAmount) }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showWithdrawModal = false">
+              {{ t('hostingWallet.modal.cancel') }}
+            </button>
+            <button
+              :disabled="withdrawing"
+              class="btn btn-primary"
+              @click="submitWithdraw"
+            >
+              <span v-if="withdrawing" class="loading loading-spinner loading-sm mr-2"></span>
+              {{ withdrawing ? t('hostingWallet.modal.submitting') : t('hostingWallet.modal.confirm') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+/* 类型标签样式 */
+.badge-success {
+  @apply bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400;
+}
+.badge-warning {
+  @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400;
+}
+.badge-error {
+  @apply bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400;
+}
+.badge-info {
+  @apply bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400;
+}
+
+.wallet-withdraw-btn {
+  @apply inline-flex items-center justify-center gap-2 rounded-2xl border px-4 text-sm font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none;
+}
+
+.wallet-withdraw-btn--hero {
+  @apply h-11 px-4;
+}
+
+.wallet-withdraw-btn--compact {
+  @apply h-12 px-4;
+}
+
+.wallet-withdraw-btn__icon {
+  @apply flex h-8 w-8 items-center justify-center rounded-xl transition-colors duration-200;
+}
+
+.light .wallet-withdraw-btn {
+  @apply border-gray-900 bg-gray-900 text-white shadow-sm hover:border-gray-800 hover:bg-gray-800;
+  --tw-ring-offset-color: #ffffff;
+}
+
+.dark .wallet-withdraw-btn {
+  @apply border-white bg-white text-gray-900 shadow-sm hover:bg-gray-100;
+  --tw-ring-offset-color: #0a0a0a;
+}
+
+.light .wallet-withdraw-btn__icon {
+  @apply bg-white/10 text-white;
+}
+
+.dark .wallet-withdraw-btn__icon {
+  @apply bg-gray-900/10 text-gray-900;
+}
+
+.light .wallet-withdraw-btn:disabled {
+  @apply border-gray-200 bg-gray-100 text-gray-400 shadow-none;
+}
+
+.dark .wallet-withdraw-btn:disabled {
+  @apply border-gray-800 bg-gray-900 text-gray-500 shadow-none;
+}
+
+.light .wallet-withdraw-btn:disabled .wallet-withdraw-btn__icon {
+  @apply bg-gray-200 text-gray-400;
+}
+
+.dark .wallet-withdraw-btn:disabled .wallet-withdraw-btn__icon {
+  @apply bg-white/5 text-gray-500;
+}
+</style>
diff --git a/client/src/views/InboxView.vue b/client/src/views/InboxView.vue
new file mode 100644
index 0000000..c702341
--- /dev/null
+++ b/client/src/views/InboxView.vue
@@ -0,0 +1,434 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useThemeStore } from '@/stores/theme'
+import { useInboxStore } from '@/stores/inbox'
+import { useToast } from '@/stores/toast'
+import { useAuthStore } from '@/stores/auth'
+import { formatRelativeTime } from '@/utils/formatters'
+import {
+  getMessageCategory,
+  getCategoryColorClass,
+  getMessageRoute,
+  canNavigate,
+  getAllCategories,
+  type MessageCategory
+} from '@/utils/inboxHelper'
+import type { InboxMessage } from '@/types/api'
+import api from '@/api'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const themeStore = useThemeStore()
+const inboxStore = useInboxStore()
+const toast = useToast()
+const authStore = useAuthStore()
+
+// 消息列表
+const messages = ref<InboxMessage[]>([])
+const loading = ref(false)
+const loaded = ref(false)
+
+// 分页
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+
+// 筛选
+const filter = ref<'all' | 'unread'>('all')
+const categoryFilter = ref<MessageCategory | 'all'>('all')
+
+// 所有类别（根据用户配额过滤）
+const allCategories = getAllCategories()
+
+// 根据用户配额过滤显示的类别
+const categories = computed(() => {
+  const quota = authStore.quota
+  return allCategories.filter(cat => {
+    // 好友功能已禁用，隐藏好友分类
+    if (cat.key === 'social') {
+      return false
+    }
+    // 如果套餐配额为0，隐藏套餐分类
+    if (cat.key === 'package' && quota?.packageLimit === 0) {
+      return false
+    }
+    // 如果套餐配额和节点配额都为0，隐藏配额分类（没有配额警告的意义）
+    if (cat.key === 'quota' && quota?.packageLimit === 0 && quota?.hostLimit === 0) {
+      return false
+    }
+    return true
+  })
+})
+
+// 根据类别筛选后的消息
+const filteredMessages = computed(() => {
+  if (categoryFilter.value === 'all') return messages.value
+  return messages.value.filter(m => getMessageCategory(m.eventType) === categoryFilter.value)
+})
+
+// 加载消息列表
+async function loadMessages() {
+  loading.value = true
+  try {
+    const res = await api.inbox.list({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      isRead: filter.value === 'unread' ? false : undefined
+    })
+    messages.value = res.messages
+    total.value = res.total
+  } catch (err) {
+    console.error('Failed to load inbox messages:', err)
+    toast.error(t('common.error'))
+  } finally {
+    loading.value = false
+    loaded.value = true
+  }
+}
+
+// 标记单条已读
+async function markAsRead(message: InboxMessage) {
+  if (message.isRead) return
+  try {
+    await api.inbox.markAsRead(message.id)
+    message.isRead = true
+    inboxStore.decrementUnread()
+  } catch {
+    // 静默失败
+  }
+}
+
+// 全部标记已读
+async function markAllAsRead() {
+  try {
+    const res = await api.inbox.markAllAsRead()
+    messages.value.forEach(m => m.isRead = true)
+    inboxStore.clearUnread()
+    toast.success(t('inbox.markedAllRead'))
+    if (res.count > 0) {
+      loadMessages()
+    }
+  } catch {
+    toast.error(t('common.error'))
+  }
+}
+
+// 删除单条消息
+async function deleteMessage(message: InboxMessage) {
+  if (!confirm(t('inbox.deleteConfirm'))) return
+  try {
+    await api.inbox.delete(message.id)
+    messages.value = messages.value.filter(m => m.id !== message.id)
+    total.value--
+    if (!message.isRead) {
+      inboxStore.decrementUnread()
+    }
+    toast.success(t('inbox.deleted'))
+  } catch {
+    toast.error(t('common.error'))
+  }
+}
+
+// 清空已读
+async function deleteReadMessages() {
+  if (!confirm(t('inbox.clearConfirm'))) return
+  try {
+    await api.inbox.deleteRead()
+    loadMessages()
+    toast.success(t('inbox.cleared'))
+  } catch {
+    toast.error(t('common.error'))
+  }
+}
+
+// 切换筛选
+function setFilter(newFilter: 'all' | 'unread') {
+  filter.value = newFilter
+  currentPage.value = 1
+  loadMessages()
+}
+
+// 切换类别筛选
+function setCategoryFilter(category: MessageCategory | 'all') {
+  categoryFilter.value = category
+}
+
+// 点击消息 - 标记已读并跳转
+async function handleMessageClick(message: InboxMessage) {
+  await markAsRead(message)
+  const targetRoute = getMessageRoute(message)
+  if (targetRoute) {
+    router.push(targetRoute)
+  }
+}
+
+// 获取消息的类别标签颜色
+function getTagColorClass(message: InboxMessage): string {
+  const category = getMessageCategory(message.eventType)
+  return getCategoryColorClass(category, themeStore.isDark)
+}
+
+// 获取消息类别标签文本
+function getCategoryLabel(message: InboxMessage): string {
+  const category = getMessageCategory(message.eventType)
+  return t(`inbox.categories.${category}`)
+}
+
+// 分页
+function goToPage(page: number) {
+  if (page < 1 || page > totalPages.value) return
+  currentPage.value = page
+  loadMessages()
+}
+
+// 格式化时间
+function formatTime(dateStr: string): string {
+  return formatRelativeTime(dateStr, t)
+}
+
+onMounted(() => {
+  loadMessages()
+})
+
+// 路由变化时刷新
+watch(() => route.path, () => {
+  if (route.path === '/inbox') {
+    inboxStore.refresh()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ t('inbox.title') }}</h1>
+        <p class="page-description">{{ t('inbox.description') }}</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <!-- 清空已读 -->
+        <button
+          class="btn-secondary text-sm"
+          @click="deleteReadMessages"
+        >
+          {{ t('inbox.clearRead') }}
+        </button>
+        <!-- 全部已读 -->
+        <button
+          class="btn-primary text-sm"
+          @click="markAllAsRead"
+        >
+          {{ t('inbox.markAllRead') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 筛选标签 -->
+    <div class="space-y-3 sm:space-y-0 sm:flex sm:flex-wrap sm:items-center sm:gap-2 mb-4">
+      <!-- 已读/未读筛选 -->
+      <div class="flex items-center gap-1 sm:mr-4">
+        <button
+          class="px-3 py-1.5 text-sm rounded-lg transition-colors"
+          :class="filter === 'all' 
+            ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-gray-200 text-gray-800')
+            : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-800')"
+          @click="setFilter('all')"
+        >
+          {{ t('inbox.all') }}
+        </button>
+        <button
+          class="px-3 py-1.5 text-sm rounded-lg transition-colors flex items-center gap-1.5"
+          :class="filter === 'unread'
+            ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-gray-200 text-gray-800')
+            : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-800')"
+          @click="setFilter('unread')"
+        >
+          {{ t('inbox.unread') }}
+          <span
+            v-if="inboxStore.unreadCount > 0"
+            class="px-1.5 py-0.5 text-xs rounded-full bg-red-500 text-white"
+          >
+            {{ inboxStore.unreadCount }}
+          </span>
+        </button>
+      </div>
+
+      <!-- 分隔线 - 仅桌面端显示 -->
+      <div class="hidden sm:block h-5 w-px" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-300'"></div>
+
+      <!-- 类别筛选 -->
+      <div class="flex flex-wrap items-center gap-1.5 sm:ml-2">
+        <button
+          class="px-2 py-1 text-xs rounded transition-colors"
+          :class="categoryFilter === 'all'
+            ? (themeStore.isDark ? 'bg-gray-600 text-white' : 'bg-gray-300 text-gray-800')
+            : (themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700')"
+          @click="setCategoryFilter('all')"
+        >
+          {{ t('inbox.allCategories') }}
+        </button>
+        <button
+          v-for="cat in categories"
+          :key="cat.key"
+          class="px-2 py-1 text-xs rounded transition-colors"
+          :class="categoryFilter === cat.key
+            ? getCategoryColorClass(cat.key, themeStore.isDark)
+            : (themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700')"
+          @click="setCategoryFilter(cat.key)"
+        >
+          {{ t(cat.config.label) }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 消息列表 -->
+    <div class="card">
+      <!-- 加载中 -->
+      <div v-if="loading && !loaded" class="p-8 text-center">
+        <svg class="animate-spin h-6 w-6 mx-auto" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="mt-2 text-sm text-themed-muted">{{ t('common.loading') }}</p>
+      </div>
+
+      <!-- 无消息 -->
+      <div v-else-if="messages.length === 0" class="p-8 text-center">
+        <svg class="w-12 h-12 mx-auto mb-3" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+        </svg>
+        <p class="text-themed-muted">
+          {{ filter === 'unread' ? t('inbox.noUnread') : t('inbox.noMessages') }}
+        </p>
+      </div>
+
+      <!-- 消息列表 -->
+      <div v-else class="divide-y" :class="themeStore.isDark ? 'divide-gray-700' : 'divide-gray-200'">
+        <!-- 无筛选结果提示 -->
+        <div v-if="filteredMessages.length === 0" class="p-6 text-center">
+          <p class="text-sm text-themed-muted">{{ t('inbox.noCategoryMessages') }}</p>
+        </div>
+
+        <div
+          v-for="message in filteredMessages"
+          :key="message.id"
+          class="px-4 py-2.5 flex items-start gap-3 transition-colors"
+          :class="[
+            !message.isRead ? (themeStore.isDark ? 'bg-gray-800/30' : 'bg-blue-50/50') : '',
+            themeStore.isDark ? 'hover:bg-gray-800/50' : 'hover:bg-gray-50',
+            canNavigate(message) ? 'cursor-pointer' : ''
+          ]"
+        >
+          <!-- 未读标记 -->
+          <div class="flex-shrink-0 pt-1.5">
+            <span
+              v-if="!message.isRead"
+              class="block w-1.5 h-1.5 rounded-full bg-blue-500"
+            ></span>
+            <span
+              v-else
+              class="block w-1.5 h-1.5"
+            ></span>
+          </div>
+
+          <!-- 内容 -->
+          <div class="flex-1 min-w-0" @click="handleMessageClick(message)">
+            <div class="flex flex-wrap items-center gap-2">
+              <!-- 类别标签 -->
+              <span
+                class="px-1.5 py-0.5 text-[10px] font-medium rounded"
+                :class="getTagColorClass(message)"
+              >
+                {{ getCategoryLabel(message) }}
+              </span>
+              <h3 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'">
+                {{ message.title }}
+              </h3>
+              <span class="text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                {{ formatTime(message.createdAt) }}
+              </span>
+              <!-- 可跳转图标 -->
+              <svg
+                v-if="canNavigate(message)"
+                class="w-3 h-3 flex-shrink-0"
+                :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </div>
+            <p class="text-sm whitespace-pre-line leading-relaxed mt-0.5" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+              {{ message.content }}
+            </p>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="flex-shrink-0 flex items-center gap-1">
+            <button
+              v-if="!message.isRead"
+              class="p-1 rounded transition-colors"
+              :class="themeStore.isDark ? 'hover:bg-gray-700 text-gray-500 hover:text-gray-300' : 'hover:bg-gray-200 text-gray-400 hover:text-gray-600'"
+              :title="t('inbox.markRead')"
+              @click.stop="markAsRead(message)"
+            >
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            </button>
+            <button
+              class="p-1 rounded transition-colors"
+              :class="themeStore.isDark ? 'hover:bg-gray-700 text-gray-500 hover:text-red-400' : 'hover:bg-gray-200 text-gray-400 hover:text-red-500'"
+              :title="t('common.delete')"
+              @click.stop="deleteMessage(message)"
+            >
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1 && categoryFilter === 'all'" class="px-4 py-3 border-t flex items-center justify-between" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+        <div class="text-sm text-themed-muted">
+          {{ t('common.total') }} {{ total }} {{ t('common.items') }}
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            class="px-3 py-1 text-sm rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'"
+            :disabled="currentPage === 1"
+            @click="goToPage(currentPage - 1)"
+          >
+            {{ t('common.previous') }}
+          </button>
+          <span class="px-3 py-1 text-sm" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+            {{ currentPage }} / {{ totalPages }}
+          </span>
+          <button
+            class="px-3 py-1 text-sm rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'"
+            :disabled="currentPage === totalPages"
+            @click="goToPage(currentPage + 1)"
+          >
+            {{ t('common.next') }}
+          </button>
+        </div>
+      </div>
+      <!-- 类别筛选时显示当前页筛选结果数量 -->
+      <div v-else-if="categoryFilter !== 'all'" class="px-4 py-3 border-t" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+        <div class="text-sm text-themed-muted">
+          {{ t('inbox.currentPageFiltered', { count: filteredMessages.length }) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/InstanceCreateView.vue b/client/src/views/InstanceCreateView.vue
new file mode 100644
index 0000000..0d426a4
--- /dev/null
+++ b/client/src/views/InstanceCreateView.vue
@@ -0,0 +1,1373 @@
+<script setup lang="ts">
+/**
+ * 实例创建页面
+ * 已拆分为以下子组件：
+ * - RegionSelector: 地区选择
+ * - PackageSelector: 套餐选择
+ * - ResourceSliders: 资源配置滑块
+ * - HostSelector: 宝主机选择
+ * - ImageSelector: 镜像选择
+ * - SSHKeySelector: SSH密钥选择
+ */
+
+// 为 KeepAlive exclude 匹配定义组件名称
+defineOptions({
+  name: 'InstanceCreateView'
+})
+
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useConfigStore } from '@/stores/config'
+import RegionSelector from '@/components/instance/RegionSelector.vue'
+import type { Region } from '@/components/instance/RegionSelector.vue'
+import PackageSelector from '@/components/instance/PackageSelector.vue'
+import PlanSelector from '@/components/instance/PlanSelector.vue'
+import ResourceSliders from '@/components/instance/ResourceSliders.vue'
+import HostSelector from '@/components/instance/HostSelector.vue'
+import ImageSelector from '@/components/instance/ImageSelector.vue'
+import SSHKeySelector from '@/components/instance/SSHKeySelector.vue'
+import InitCommandSelector from '@/components/extensions/InitCommandSelector.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import type { Package, UserQuota, SshKey, AvailableHost, CreateInstanceRequest } from '@/types/api'
+import { normalizePackageSourceQuery, toPackageSourceRequest, type PackageSource } from '@/utils/publicCatalog'
+import { validateName as validateInstanceName } from '@/utils/validation'
+import { translateError } from '@/utils/errorHandler'
+import { freeSiteCopy, getFreeSiteBillingCycleLabel } from '@/utils/freeSiteFun'
+import { getVipBadgeInlineStyle, normalizeVipBadgeStyle, type VipBadgeStyle } from '@/utils/vipBadge'
+
+interface ImageOption {
+  value: string
+  label: string
+  icon: string | null
+}
+
+interface PackagePlan {
+  id: number
+  name: string
+  description: string | null
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: string
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  setupFee: number
+  monthlyPrice: number
+  isActive: boolean
+  isSoldOut: boolean
+  sortOrder: number
+  slaGuarantee: number | null
+}
+
+type HostingZoneTab = Awaited<ReturnType<typeof api.packages.getHostingZones>>['zones'][number]
+
+interface SourceTab {
+  key: PackageSource
+  type: 'official' | 'market' | 'zone'
+  label: string
+  logoUrl?: string
+}
+
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const toast = useToast()
+const themeStore = useThemeStore()
+const configStore = useConfigStore()
+
+// 右栏滚动容器 ref（选套餐后滚回顶部）
+const rightPanelScrollRef = ref<HTMLElement | null>(null)
+
+// 当前选中的套餐来源
+const packageSource = ref<PackageSource>('official')
+const sourceLoading = ref<boolean>(false)
+const hostingZones = ref<HostingZoneTab[]>([])
+
+// 数据加载状态
+// 地区选择
+const regions = ref<Region[]>([])
+const selectedRegion = ref<string | null>(null)
+const regionsLoading = ref<boolean>(false)
+
+const packages = ref<Package[]>([])
+const userQuota = ref<UserQuota | null>(null)
+const sshKeys = ref<SshKey[]>([])
+const availableHosts = ref<AvailableHost[]>([])
+const availableImages = ref<ImageOption[]>([])
+const packagePlans = ref<PackagePlan[]>([])
+const imagesLoading = ref<boolean>(false)
+const hostsLoading = ref<boolean>(false)
+const plansLoading = ref<boolean>(false)
+const loading = ref<boolean>(true)
+const submitting = ref<boolean>(false)
+const error = ref<string>('')
+
+// 表单数据
+interface InstanceForm {
+  name: string
+  packageId: number | null
+  planId: number | null  // 付费方案ID
+  hostId: number | null
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+  sshKeyId: number | null
+  customInitCommandIds: number[]  // 用户自定义初始化命令
+  promoCode: string  // 优惠码
+}
+
+const form = ref<InstanceForm>({
+  name: '',
+  packageId: null,
+  planId: null,
+  hostId: null,
+  image: '',
+  cpu: 15,
+  memory: 128,
+  disk: 512,
+  sshKeyId: null,
+  customInitCommandIds: [],
+  promoCode: ''
+})
+
+// 优惠码验证状态
+const promoCodeVerifying = ref(false)
+const promoCodeValid = ref<boolean | null>(null)
+const promoCodeDiscount = ref<number>(0)
+const promoCodeCommissionRate = ref<number>(0)  // 返利率
+const promoCodeError = ref('')
+
+// 托管者信息弹窗
+const showHostOwnerModal = ref(false)
+const hostOwnerLoading = ref(false)
+const hostOwnerInfo = ref<{
+  id: number
+  username: string
+  email: string
+  avatarStyle: string
+  avatarBadgeId?: string | null
+  hostCount: number
+  instanceCount: number
+  registeredDays: number
+  vipLevel: number
+  vipBadgeStyle?: VipBadgeStyle | null
+} | null>(null)
+
+// 是否为付费套餐（有方案）
+const isPaidPackage = computed<boolean>(() => packagePlans.value.length > 0)
+
+// 是否是用户自己的付费套餐（不允许自己开通）
+const isOwnPaidPackage = computed<boolean>(() => {
+  if (!selectedPackage.value || !isPaidPackage.value) return false
+  return selectedPackage.value.ownerId === authStore.user?.id
+})
+
+const showDestroyTrafficNotice = computed<boolean>(() => {
+  return isPaidPackage.value
+    && form.value.planId !== null
+    && !isOwnPaidPackage.value
+})
+
+// 根据选中地区过滤的套餐列表
+const filteredPackages = computed<Package[]>(() => {
+  let result: Package[]
+  
+  if (selectedRegion.value === null) {
+    // "全部"选项：返回所有套餐
+    result = packages.value
+  } else {
+    // 根据地区过滤：查找选中地区包含的套餐 ID
+    const region = regions.value.find(r => r.code === selectedRegion.value)
+    if (!region) {
+      result = packages.value
+    } else {
+      result = packages.value.filter(pkg => region.packageIds.includes(pkg.id))
+    }
+  }
+  
+  // 售罄的套餐排在最后
+  return [...result].sort((a, b) => {
+    if (a.soldOut === b.soldOut) return 0
+    return a.soldOut ? 1 : -1
+  })
+})
+
+// 当前选中的套餐
+const selectedPackage = computed<Package | undefined>(() => packages.value.find(p => p.id === form.value.packageId))
+
+// 当前选中的方案
+const selectedPlan = computed<PackagePlan | undefined>(() => packagePlans.value.find(p => p.id === form.value.planId))
+
+const prerequisitePackageName = computed<string | null>(() => {
+  if (!selectedPackage.value?.required_package_id) return null
+  return selectedPackage.value.required_package_name || `#${selectedPackage.value.required_package_id}`
+})
+
+const prerequisiteMissing = computed<boolean>(() => {
+  return !!selectedPackage.value?.required_package_id
+    && (selectedPackage.value as Package & { has_required_package_instance?: boolean }).has_required_package_instance !== true
+})
+
+const prerequisiteMessage = computed<string>(() => {
+  return t('instance.createPage.packagePrerequisiteRequired', {
+    package: prerequisitePackageName.value || ''
+  })
+})
+
+// 流量格式化
+function formatTraffic(bytes: string): string {
+  const b = BigInt(bytes || '0')
+  if (b === BigInt(0)) return t('common.unlimited')
+  if (b >= BigInt(1024 * 1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024 * 1024)).toFixed(1) + ' TB'
+  }
+  if (b >= BigInt(1024 * 1024 * 1024)) {
+    return (Number(b) / (1024 * 1024 * 1024)).toFixed(0) + ' GB'
+  }
+  return (Number(b) / (1024 * 1024)).toFixed(0) + ' MB'
+}
+
+// 计费周期标签
+function getBillingCycleLabel(months: number): string {
+  if (configStore.freeSiteMode) return getFreeSiteBillingCycleLabel(months)
+  switch (months) {
+    case 1: return t('billing.cycle.monthly')
+    case 3: return t('billing.cycle.quarterly')
+    case 6: return t('billing.cycle.semiAnnual')
+    case 12: return t('billing.cycle.annual')
+    default: return `${months} ${t('billing.cycle.months')}`
+  }
+}
+
+// 方案价格计算（注意：数据库存储为分，需要转换为元）
+const planPriceInfo = computed(() => {
+  if (!selectedPlan.value) return null
+  const plan = selectedPlan.value
+  // 价格单位转换：分 -> 元
+  const planPriceYuan = plan.price / 100
+  const originalPrice = planPriceYuan
+  const discount = promoCodeValid.value ? promoCodeDiscount.value : 0
+  const discountAmount = Number((planPriceYuan * discount).toFixed(2))
+  const finalPrice = Number((originalPrice - discountAmount).toFixed(2))
+  return {
+    originalPrice,
+    planPrice: planPriceYuan,
+    discountAmount,
+    finalPrice,
+    discountRate: discount
+  }
+})
+
+// 内存格式化（MB -> GB/MB）
+function formatMemory(mb: number): string {
+  if (mb >= 1024) {
+    return (mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+// 硬盘格式化（MB -> GB，使用1024进制）
+function formatDisk(mb: number): string {
+  if (mb >= 1024) {
+    return (mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+// 从镜像名称提取发行版标识（用于 DistroIcon 组件）
+function getDistroFromName(name: string): string {
+  const lowerName = (name || '').toLowerCase()
+  const distros = ['almalinux', 'alma', 'alpine', 'arch', 'centos', 'debian', 'fedora', 'gentoo', 'kali', 'mint', 'opensuse', 'suse', 'oracle', 'redhat', 'rhel', 'rockylinux', 'rocky', 'ubuntu', 'void']
+  for (const distro of distros) {
+    if (lowerName.includes(distro)) return distro
+  }
+  return 'linux'
+}
+
+// 获取当前选中镜像的发行版标识
+const selectedImageDistro = computed(() => {
+  const img = availableImages.value.find(i => i.value === form.value.image)
+  return img?.icon || 'linux'
+})
+
+// 配额检查
+interface QuotaCheckResult {
+  valid: boolean
+  errors: string[]
+}
+
+const quotaCheck = computed<QuotaCheckResult>(() => {
+  if (!userQuota.value) {
+    return { valid: true, errors: [] }
+  }
+  
+  // 注意：不再限制实例配额，用户可以创建无限数量的实例
+  // CPU/内存/磁盘限制由套餐包控制
+  const errors: string[] = []
+  
+  return { valid: errors.length === 0, errors }
+})
+
+// 资源限制检查（基于套餐配额信息）
+const resourceLimitCheck = computed<QuotaCheckResult>(() => {
+  const errors: string[] = []
+  const quotaInfo = selectedPackage.value?.quotaInfo
+  
+  if (!quotaInfo) {
+    // 如果没有配额信息，允许提交（可能是自己的套餐，无限制）
+    return { valid: true, errors: [] }
+  }
+  
+  // 检查实例个数限制：实例个数 = 0 时禁止创建
+  if (quotaInfo.remainingInstances !== null && quotaInfo.remainingInstances <= 0) {
+    errors.push(t('instance.createPage.resourceLimit.noInstances'))
+  }
+  
+  // 检查内存限制：内存 < 128MB 时禁止创建
+  if (quotaInfo.remainingMemory !== null && quotaInfo.remainingMemory < 128) {
+    errors.push(t('instance.createPage.resourceLimit.insufficientMemory'))
+  }
+  
+  // 检查CPU限制：CPU < 15% 时禁止创建
+  if (quotaInfo.remainingCpu !== null && quotaInfo.remainingCpu < 15) {
+    errors.push(t('instance.createPage.resourceLimit.insufficientCpu'))
+  }
+  
+  return { valid: errors.length === 0, errors }
+})
+
+const canSubmit = computed<boolean>(() => {
+  // 售罄套餐不允许创建
+  if (selectedPackage.value?.soldOut) {
+    return false
+  }
+
+  if (prerequisiteMissing.value) {
+    return false
+  }
+  
+  const baseChecks = !!form.value.name &&
+         form.value.packageId !== null &&
+         form.value.hostId !== null &&
+         !!form.value.image &&
+         availableImages.value.length > 0 &&
+         sshKeys.value.length > 0 &&
+         form.value.sshKeyId !== null &&
+         quotaCheck.value.valid &&
+         resourceLimitCheck.value.valid &&
+         !submitting.value &&
+         !isOwnPaidPackage.value  // 不允许使用自己的付费套餐
+  
+  // 付费套餐需要选择方案
+  if (isPaidPackage.value) {
+    return baseChecks && form.value.planId !== null && !!selectedPlan.value && !selectedPlan.value.isSoldOut
+  }
+  
+  return baseChecks
+})
+
+// 检测资源不足的情况
+const hostsInsufficient = computed<boolean>(() => {
+  // 付费套餐未选方案时，不显示资源不足警告（因为还没加载宿主机）
+  if (isPaidPackage.value && form.value.planId === null) {
+    return false
+  }
+  // 套餐绑定了宿主机但没有可用的，且不在加载中
+  return !hostsLoading.value &&
+         selectedPackage.value !== undefined &&
+         !!selectedPackage.value.host_ids &&
+         selectedPackage.value.host_ids.length > 0 &&
+         availableHosts.value.length === 0
+})
+
+const createPageTextPrefix = computed(() => configStore.freeSiteMode ? 'instance.createPage.fun' : 'instance.selector')
+const packageCountLabelKey = computed(() => `${createPageTextPrefix.value}.packageCount`)
+
+function getCreatePageText(key: string): string {
+  return t(`${createPageTextPrefix.value}.${key}`)
+}
+
+function getPackageSourceLabel(source: 'official' | 'market'): string {
+  if (configStore.freeSiteMode) {
+    return t(`instance.createPage.source.${source}`)
+  }
+
+  return t(`publicSite.market.${source}`)
+}
+
+const sourceTabs = computed<SourceTab[]>(() => {
+  const tabs: SourceTab[] = [
+    {
+      key: 'official',
+      type: 'official',
+      label: getPackageSourceLabel('official')
+    }
+  ]
+
+  if (configStore.hostingMarketEntryEnabled) {
+    tabs.push(
+      ...hostingZones.value.map(zone => ({
+        key: `zone:${zone.id}` as PackageSource,
+        type: 'zone' as const,
+        label: zone.name,
+        logoUrl: zone.logoUrl
+      })),
+      {
+        key: 'market',
+        type: 'market',
+        label: getPackageSourceLabel('market')
+      }
+    )
+  }
+
+  return tabs
+})
+
+function isPackageSourceSelectable(source: PackageSource): boolean {
+  return source === 'official' || sourceTabs.value.some(tab => tab.key === source)
+}
+
+function getSelectablePackageSource(source: PackageSource): PackageSource {
+  return isPackageSourceSelectable(source) ? source : 'official'
+}
+
+const selectedHostingZone = computed<HostingZoneTab | null>(() => {
+  if (!String(packageSource.value).startsWith('zone:')) return null
+  const zoneId = Number(String(packageSource.value).slice('zone:'.length))
+  if (!Number.isInteger(zoneId) || zoneId <= 0) return null
+  return hostingZones.value.find(zone => zone.id === zoneId) || null
+})
+
+onMounted(async (): Promise<void> => {
+  await configStore.loadPublicConfig(true)
+
+  // 检查 URL 参数（分享链接）
+  const packageParam = route.query.package as string | undefined
+  const planParam = route.query.plan as string | undefined
+  const targetPackageId = packageParam ? Number(packageParam) : null
+  const targetPlanId = planParam ? Number(planParam) : null
+  
+  // 确定初始加载的套餐来源
+  const initialSource = normalizePackageSourceQuery(route.query.source, route.query.zoneId)
+  
+  try {
+    const [zonesRes, userRes, keysRes] = await Promise.all([
+      configStore.hostingMarketEntryEnabled ? api.packages.getHostingZones() : Promise.resolve({ zones: [] as HostingZoneTab[] }),
+      api.users.get(authStore.user!.id),
+      api.sshKeys.list()
+    ])
+    hostingZones.value = configStore.hostingMarketEntryEnabled ? (zonesRes.zones || []) : []
+
+    const effectiveInitialSource = getSelectablePackageSource(initialSource)
+    const initialSourceRequest = toPackageSourceRequest(effectiveInitialSource)
+
+    const [packagesRes, regionsRes] = await Promise.all([
+      api.packages.list(initialSourceRequest),
+      api.packages.getRegions(initialSourceRequest)
+    ])
+    
+    packages.value = ((packagesRes as { packages?: Package[] }).packages || []).filter(p => p.active === 1)
+    const userData = userRes as { user?: { quota?: UserQuota } }
+    userQuota.value = userData.user?.quota || null
+    sshKeys.value = keysRes.keys || []
+    regions.value = regionsRes.regions || []
+    
+    // 如果有 URL 参数指定的来源，更新状态
+    if (effectiveInitialSource !== 'official') {
+      packageSource.value = effectiveInitialSource as PackageSource
+    }
+    
+    // 处理分享链接参数：自动选择地区和套餐
+    if (targetPackageId) {
+      // 查找包含该套餐的地区
+      const targetRegion = regions.value.find(r => r.packageIds.includes(targetPackageId))
+      if (targetRegion) {
+        selectedRegion.value = targetRegion.code
+      }
+      
+      // 选择套餐
+      const targetPkg = packages.value.find(p => p.id === targetPackageId)
+      if (targetPkg) {
+        await selectPackage(targetPkg, targetPlanId)
+      } else {
+        // 套餐不存在，提示用户并选择第一个
+        toast.warning(t('instance.createPage.sharedPackageNotFound'))
+        if (filteredPackages.value.length > 0) {
+          selectPackage(filteredPackages.value[0])
+        }
+      }
+    } else {
+      // 没有分享链接参数，默认选中第一个套餐
+      if (filteredPackages.value.length > 0) {
+        selectPackage(filteredPackages.value[0])
+      }
+    }
+    
+    if (sshKeys.value.length > 0) {
+      form.value.sshKeyId = sshKeys.value[0].id
+    }
+  } catch (err: any) {
+    error.value = t('instance.createPage.loadFailed') + ': ' + (err?.message || String(err))
+  } finally {
+    loading.value = false
+  }
+})
+
+/**
+ * 切换套餐来源
+ */
+async function switchPackageSource(source: PackageSource): Promise<void> {
+  if (!isPackageSourceSelectable(source)) return
+  if (source === packageSource.value || sourceLoading.value) return
+  
+  sourceLoading.value = true
+  packageSource.value = source
+  
+  // 重置选择状态
+  form.value.packageId = null
+  form.value.planId = null
+  form.value.hostId = null
+  form.value.image = ''
+  packagePlans.value = []
+  availableHosts.value = []
+  availableImages.value = []
+  selectedRegion.value = null
+  
+  try {
+    const sourceRequest = toPackageSourceRequest(source)
+    // 并行加载套餐和地区数据
+    const [packagesRes, regionsRes] = await Promise.all([
+      api.packages.list(sourceRequest),
+      api.packages.getRegions(sourceRequest)
+    ])
+    
+    packages.value = ((packagesRes as { packages?: Package[] }).packages || []).filter(p => p.active === 1)
+    regions.value = regionsRes.regions || []
+    
+    // 如果有套餐，默认选中第一个
+    if (filteredPackages.value.length > 0) {
+      selectPackage(filteredPackages.value[0])
+    }
+  } catch (err: any) {
+    toast.error(t('common.loadFailed'))
+    console.error('Failed to load packages:', err)
+  } finally {
+    sourceLoading.value = false
+  }
+}
+
+/**
+ * 判断当前选中的套餐是否来自托管市场
+ */
+const isHostedMarketPackage = computed<boolean>(() => {
+  if (!selectedPackage.value) return false
+  return selectedPackage.value?.sourceType === 'market' || selectedPackage.value?.sourceType === 'zone'
+})
+
+// 是否正在切换套餐（用于防止 watch 意外触发 loadAvailableHosts）
+const isSwitchingPackage = ref(false)
+
+/**
+ * 选择地区
+ */
+function selectRegion(regionCode: string | null): void {
+  selectedRegion.value = regionCode
+  // 重置套餐选择
+  form.value.packageId = null
+  form.value.planId = null
+  form.value.hostId = null
+  form.value.image = ''
+  packagePlans.value = []
+  availableHosts.value = []
+  availableImages.value = []
+  
+  // 如果过滤后有套餐，自动选中第一个
+  if (filteredPackages.value.length > 0) {
+    selectPackage(filteredPackages.value[0])
+  }
+}
+
+async function selectPackage(pkg: Package, preferredPlanId?: number | null): Promise<void> {
+  isSwitchingPackage.value = true  // 开始切换套餐
+  
+  form.value.packageId = pkg.id
+  form.value.hostId = null
+  form.value.image = ''
+  form.value.planId = null  // 重置方案选择
+  packagePlans.value = []   // 清空方案列表
+  availableHosts.value = [] // 清空宿主机列表，避免显示旧数据
+  availableImages.value = []
+  resetPromoCode()          // 重置优惠码状态
+  
+  // 先加载套餐方案（这样才能正确判断是否是付费套餐）
+  await loadPackagePlans(pkg.id)
+
+  if (packagePlans.value.length > 0 && preferredPlanId) {
+    const matchedPlan = packagePlans.value.find(plan => plan.id === preferredPlanId)
+    if (matchedPlan && !matchedPlan.isSoldOut) {
+      selectPlan(matchedPlan)
+    }
+  }
+  
+  // 如果是免费套餐（没有方案），设置默认资源值
+  if (packagePlans.value.length === 0) {
+    // CPU：最小15%，步长5%，确保不超过套餐最大值
+    const cpuMax = Math.max(15, pkg.cpu_max) // 确保套餐最大值至少为15%
+    const cpuHalf = Math.ceil(cpuMax / 2)
+    form.value.cpu = Math.max(15, Math.min(Math.floor(cpuHalf / 5) * 5, cpuMax))
+    
+    // 内存：最小128MB，步长64MB，确保不超过套餐最大值
+    const memoryMax = Math.max(128, pkg.memory_max) // 确保套餐最大值至少为128MB
+    const memoryHalf = Math.ceil(memoryMax / 2)
+    form.value.memory = Math.max(128, Math.min(Math.floor(memoryHalf / 64) * 64, memoryMax))
+    
+    // 硬盘：最小512MB，步长0.1GB (102MB)，确保不超过套餐最大值
+    const diskMax = Math.max(512, pkg.disk_max) // 确保套餐最大值至少为512MB
+    const diskHalf = Math.ceil(diskMax / 2)
+    form.value.disk = Math.max(512, Math.min(Math.floor(diskHalf / 102) * 102, diskMax))
+  }
+  
+  isSwitchingPackage.value = false  // 结束切换套餐
+
+  // 选套餐后右栏滚回顶部
+  if (rightPanelScrollRef.value) {
+    rightPanelScrollRef.value.scrollTop = 0
+  }
+  
+  // 加载套餐详情以获取quotaInfo（仅在套餐信息中还没有quotaInfo时加载）
+  const currentPkg = packages.value.find(p => p.id === pkg.id)
+  if (!currentPkg?.quotaInfo) {
+    try {
+      const detailRes = await api.packages.get(pkg.id) as any
+      const detailPkg = detailRes.package || detailRes
+      // 更新packages数组中的套餐信息，包含quotaInfo
+      const index = packages.value.findIndex(p => p.id === pkg.id)
+      if (index !== -1) {
+        packages.value[index] = { 
+          ...packages.value[index], 
+          quotaInfo: detailPkg.quotaInfo || null,
+          required_package_id: detailPkg.required_package_id ?? packages.value[index].required_package_id ?? null,
+          required_package_name: detailPkg.required_package_name ?? packages.value[index].required_package_name ?? null,
+          has_required_package_instance: detailPkg.has_required_package_instance ?? (packages.value[index] as any).has_required_package_instance ?? true
+        }
+      }
+    } catch (err) {
+      // 静默失败，不影响其他功能
+      console.warn('Failed to load package quota info:', err)
+    }
+  }
+  
+  // 检查套餐是否绑定了宿主机
+  if (!pkg.host_ids || pkg.host_ids.length === 0) {
+    availableHosts.value = []
+    availableImages.value = []
+    form.value.image = ''
+    toast.warning(t('instance.createPage.packageNoHosts'))
+  } else {
+    // 免费套餐需要加载宿主机，付费套餐由方案选择时加载
+    if (!isPaidPackage.value) {
+      loadAvailableHosts()
+    }
+  }
+  
+  previousMemoryIsLow = form.value.memory <= 128
+}
+
+/**
+ * 加载套餐方案列表
+ */
+async function loadPackagePlans(packageId: number): Promise<void> {
+  plansLoading.value = true
+  try {
+    const res = await api.packages.getPlans(packageId, { activeOnly: true })
+    packagePlans.value = res.plans || []
+  } catch (err) {
+    console.warn('Failed to load package plans:', err)
+    packagePlans.value = []
+  } finally {
+    plansLoading.value = false
+  }
+}
+
+/**
+ * 选择付费方案
+ */
+function selectPlan(plan: PackagePlan): void {
+  if (plan.isSoldOut || !plan.isActive) {
+    return
+  }
+
+  form.value.planId = plan.id
+  // 使用方案的固定资源配置
+  form.value.cpu = plan.cpu
+  form.value.memory = plan.memory
+  form.value.disk = plan.disk
+  // 重置优惠码状态
+  resetPromoCode()
+  // 加载可用宿主机
+  loadAvailableHosts()
+}
+
+/**
+ * 重置优惠码状态
+ */
+function resetPromoCode(): void {
+  form.value.promoCode = ''
+  promoCodeValid.value = null
+  promoCodeDiscount.value = 0
+  promoCodeCommissionRate.value = 0
+  promoCodeError.value = ''
+}
+
+/**
+ * 验证优惠码
+ */
+async function verifyPromoCode(): Promise<void> {
+  if (!form.value.promoCode.trim() || !form.value.planId) {
+    resetPromoCode()
+    return
+  }
+  
+  promoCodeVerifying.value = true
+  promoCodeError.value = ''
+  
+  try {
+    const res = await api.aff.validateCode(form.value.promoCode.trim(), form.value.planId)
+    if ((res as any).valid) {
+      promoCodeValid.value = true
+      promoCodeDiscount.value = parseFloat((res as any).discountRate) || 0
+      // 从验证响应中获取返利率（如果有的话）
+      const commissionRate = parseFloat((res as any).commissionRate) || 0
+      promoCodeCommissionRate.value = commissionRate
+    } else {
+      promoCodeValid.value = false
+      promoCodeError.value = (res as any).error || t('aff.promoCodeInvalid')
+    }
+  } catch (err: any) {
+    promoCodeValid.value = false
+    promoCodeError.value = err.message || t('aff.promoCodeInvalid')
+  } finally {
+    promoCodeVerifying.value = false
+  }
+}
+
+/**
+ * 加载托管者信息（点击 UID 标签时触发）
+ */
+async function loadHostOwnerInfo(packageId: number): Promise<void> {
+  hostOwnerLoading.value = true
+  hostOwnerInfo.value = null
+  showHostOwnerModal.value = true
+  
+  try {
+    const res = await api.packages.getOwnerInfo(packageId)
+    hostOwnerInfo.value = res
+  } catch (err: any) {
+    toast.error(err.message || t('common.loadFailed'))
+    showHostOwnerModal.value = false
+  } finally {
+    hostOwnerLoading.value = false
+  }
+}
+
+async function loadAvailableHosts(): Promise<void> {
+  if (!form.value.packageId) {
+    availableHosts.value = []
+    form.value.hostId = null
+    availableImages.value = []
+    form.value.image = ''
+    return
+  }
+  
+  // 如果套餐没有绑定宿主机，不发起 API 请求
+  if (!selectedPackage.value?.host_ids || selectedPackage.value.host_ids.length === 0) {
+    availableHosts.value = []
+    form.value.hostId = null
+    availableImages.value = []
+    form.value.image = ''
+    return
+  }
+  
+  hostsLoading.value = true
+  try {
+    const res = await api.instances.getAvailableHosts({
+      packageId: form.value.packageId,
+      planId: form.value.planId || undefined,
+      cpu: form.value.cpu,
+      memory: form.value.memory,
+      disk: form.value.disk
+    })
+    availableHosts.value = (res as { hosts?: AvailableHost[] }).hosts || []
+
+    if (availableHosts.value.length === 0) {
+      form.value.hostId = null
+      availableImages.value = []
+      form.value.image = ''
+      return
+    }
+
+    const currentExists = availableHosts.value.some(host => host.id === form.value.hostId)
+    if (!currentExists) {
+      form.value.hostId = availableHosts.value[0].id
+    }
+  } catch (err: any) {
+    availableHosts.value = []
+    form.value.hostId = null
+    availableImages.value = []
+    form.value.image = ''
+    
+    // 如果是套餐没有绑定宿主机的错误，显示友好提示
+    if (err?.response?.data?.code === 'PACKAGE_NO_HOSTS' || err?.message?.includes('bind at least one host')) {
+      toast.error(t('instance.createPage.packageNoHosts'))
+    }
+  } finally {
+    hostsLoading.value = false
+  }
+}
+
+watch(() => form.value.packageId, () => {
+  if (selectedPackage.value) {
+    // 确保CPU值符合最小值和步长要求（15%起步，步长5%）
+    const cpuMax = Math.max(15, selectedPackage.value.cpu_max)
+    const normalizedCpu = Math.max(15, Math.min(Math.floor(form.value.cpu / 5) * 5, cpuMax))
+    form.value.cpu = normalizedCpu
+    // 确保内存和硬盘值符合最小值和步长要求
+    const memoryMax = Math.max(128, selectedPackage.value.memory_max)
+    const normalizedMemory = Math.max(128, Math.min(Math.floor(form.value.memory / 64) * 64, memoryMax))
+    const diskMax = Math.max(512, selectedPackage.value.disk_max)
+    const normalizedDisk = Math.max(512, Math.min(Math.floor(form.value.disk / 102) * 102, diskMax))
+    form.value.memory = normalizedMemory
+    form.value.disk = normalizedDisk
+  }
+})
+
+watch([() => form.value.cpu, () => form.value.memory, () => form.value.disk], () => {
+  // 付费套餐不需要监听资源变化（配置固定）
+  // 切换套餐时也不触发（避免用旧资源值查询）
+  if (form.value.packageId && !isPaidPackage.value && !isSwitchingPackage.value) {
+    loadAvailableHosts()
+  }
+}, { immediate: false })
+
+watch(() => form.value.hostId, (newHostId) => {
+  if (!selectedPackage.value || isSwitchingPackage.value) return
+
+  if (!newHostId) {
+    availableImages.value = []
+    form.value.image = ''
+    return
+  }
+
+  loadAvailableImages(
+    selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+    form.value.memory,
+    newHostId
+  )
+}, { immediate: false })
+
+// 内存变化时重新加载镜像（128MB 限制只能选 Alpine/Debian）
+let previousMemoryIsLow = false
+watch(() => form.value.memory, (newMemory) => {
+  if (!selectedPackage.value || isSwitchingPackage.value) return
+  
+  const currentIsLow = newMemory <= 128
+  // 只有在跨越 128MB 阈值时才重新加载镜像
+  if (currentIsLow !== previousMemoryIsLow) {
+    previousMemoryIsLow = currentIsLow
+    loadAvailableImages(
+      selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+      newMemory,
+      form.value.hostId || undefined
+    )
+  }
+}, { immediate: false })
+
+async function loadAvailableImages(instanceType?: 'container' | 'vm', memory?: number, hostId?: number): Promise<void> {
+  if (!hostId) {
+    availableImages.value = []
+    form.value.image = ''
+    return
+  }
+
+  imagesLoading.value = true
+  try {
+    const res = await api.images.getSystemImages(instanceType, memory, hostId)
+    availableImages.value = (res.images || []).map(img => ({
+      value: img.remoteAlias,
+      label: img.name,
+      icon: img.icon || getDistroFromName(img.name)
+    }))
+    
+    if (availableImages.value.length > 0) {
+      const currentExists = availableImages.value.some((img) => img.value === form.value.image)
+      if (!currentExists) {
+        form.value.image = availableImages.value[0].value
+      }
+    } else {
+      form.value.image = ''
+    }
+  } catch (_err) {
+    availableImages.value = []
+    form.value.image = ''
+  } finally {
+    imagesLoading.value = false
+  }
+}
+
+async function handleSubmit(): Promise<void> {
+  if (!canSubmit.value) return
+  
+  error.value = ''
+  submitting.value = true
+  
+  try {
+    if (form.value.packageId === null) throw new Error(t('instance.createPage.selectPackage'))
+    if (form.value.hostId === null) throw new Error(getCreatePageText('selectHost'))
+    if (form.value.sshKeyId === null) throw new Error(getCreatePageText('selectSshKey'))
+    
+    // 验证实例名称
+    const nameValidation = validateInstanceName(form.value.name)
+    if (!nameValidation.valid) {
+      throw new Error(nameValidation.message)
+    }
+
+    await api.instances.create({
+      name: form.value.name,
+      packageId: form.value.packageId,
+      planId: form.value.planId || undefined,
+      hostId: form.value.hostId,
+      image: form.value.image,
+      cpu: form.value.cpu,
+      memory: form.value.memory,
+      disk: form.value.disk,
+      sshKeyId: form.value.sshKeyId,
+      customInitCommandIds: form.value.customInitCommandIds.length > 0 ? form.value.customInitCommandIds : undefined,
+      promoCode: (isPaidPackage.value && promoCodeValid.value && form.value.promoCode.trim()) ? form.value.promoCode.trim() : undefined
+    } as CreateInstanceRequest & { promoCode?: string })
+    
+    toast.success(t('instance.createPage.createSuccess'))
+    router.push('/instances')
+  } catch (err: any) {
+    error.value = translateError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="animate-fade-in lg:h-full lg:flex lg:flex-col">
+    <!-- 套餐来源切换器 -->
+    <div v-if="!loading" class="flex justify-center mb-4 lg:mb-3 shrink-0">
+      <div
+        class="inline-flex max-w-full overflow-x-auto p-1 rounded-full scrollbar-hide"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+      >
+        <button
+          v-for="source in sourceTabs"
+          :key="source.key"
+          type="button"
+          :disabled="sourceLoading"
+          class="relative shrink-0 px-4 py-2 text-sm font-medium rounded-full transition-all duration-300"
+          :class="[
+            packageSource === source.key
+              ? themeStore.isDark
+                ? 'bg-white text-gray-900 shadow-lg'
+                : 'bg-gray-900 text-white shadow-lg'
+              : themeStore.isDark
+                ? 'text-gray-400 hover:text-gray-200'
+                : 'text-gray-600 hover:text-gray-900',
+            sourceLoading ? 'cursor-not-allowed opacity-50' : ''
+          ]"
+          @click="switchPackageSource(source.key)"
+        >
+          <span class="relative z-10 flex items-center gap-1.5">
+            <!-- 加载中 -->
+            <svg 
+              v-if="sourceLoading && packageSource === source.key"
+              class="w-4 h-4 animate-spin" 
+              fill="none" viewBox="0 0 24 24"
+            >
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <!-- 图标 -->
+            <template v-else>
+              <svg v-if="source.type === 'official'" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+              </svg>
+              <img
+                v-else-if="source.type === 'zone'"
+                :src="source.logoUrl"
+                :alt="source.label"
+                class="w-5 h-5 rounded-full object-cover"
+              />
+              <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+            </template>
+            {{ source.label }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading" class="card p-8 text-center text-themed-muted">
+      <svg class="w-8 h-8 mx-auto mb-2 animate-spin icon-themed-muted" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      {{ $t('common.loading') }}
+    </div>
+
+    <form v-else class="lg:flex-1 lg:min-h-0 lg:flex lg:flex-col" @submit.prevent="handleSubmit">
+      <div class="lg:flex lg:flex-1 lg:min-h-0 lg:gap-6">
+        <!-- LEFT: 选择区（独立滚动）-->
+        <div class="space-y-4 mb-4 lg:mb-0 lg:flex-[3] lg:overflow-y-auto lg:pr-1 lg:pb-4 scrollbar-hide">
+          <div
+            v-if="selectedHostingZone"
+            class="rounded-lg border border-themed bg-themed-tertiary px-5 py-3 text-center"
+          >
+            <p class="text-sm font-medium leading-6 text-themed-secondary">
+              {{ $t('instance.createPage.zoneNotice.content', { uid: selectedHostingZone.ownerId, username: selectedHostingZone.ownerUsername }) }}
+            </p>
+          </div>
+          <RegionSelector
+            v-if="regions.length > 0"
+            :regions="regions"
+            :selected-region="selectedRegion"
+            :loading="regionsLoading"
+            :title="getCreatePageText('selectRegion')"
+            :package-count-label-key="packageCountLabelKey"
+            @select="selectRegion"
+          />
+          <PackageSelector
+            :packages="filteredPackages"
+            :selected-package-id="form.packageId"
+            :step-number="regions.length > 0 ? 2 : 1"
+            :title="getCreatePageText('selectPackage')"
+            :empty-message="getCreatePageText('noPackages')"
+            :sold-out-label="getCreatePageText('planSoldOut')"
+            @select="selectPackage"
+            @show-owner-info="(packageId) => loadHostOwnerInfo(packageId)"
+          />
+        </div>
+        <!-- RIGHT: 配置区（独立滚动）-->
+        <div class="lg:flex-[2] lg:overflow-y-auto lg:pb-4 scrollbar-hide">
+          <div ref="rightPanelScrollRef" class="space-y-4">
+            <PlanSelector
+              v-if="isPaidPackage"
+              :plans="packagePlans"
+              :selected-plan-id="form.planId"
+              :instance-type="(selectedPackage?.instance_type === 'vm' ? 'vm' : 'container')"
+              :loading="plansLoading"
+              :step-number="regions.length > 0 ? 3 : 2"
+              :prerequisite-message="prerequisiteMissing ? prerequisiteMessage : null"
+              :free-site-mode="configStore.freeSiteMode"
+              :title="getCreatePageText('selectPlan')"
+              :description="getCreatePageText('planDesc')"
+              :empty-message="getCreatePageText('noPlans')"
+              :sold-out-label="getCreatePageText('planSoldOut')"
+              :custom-plan-hint="getCreatePageText('customPlanHint')"
+              @select="selectPlan"
+            />
+            <div
+              v-else-if="prerequisiteMissing"
+              class="rounded-lg border px-4 py-3 text-sm"
+              :class="themeStore.isDark ? 'border-amber-500/30 bg-amber-900/20 text-amber-300' : 'border-amber-200 bg-amber-50 text-amber-700'"
+            >
+              {{ prerequisiteMessage }}
+            </div>
+            <ResourceSliders
+              v-else
+              :selected-package="selectedPackage || null"
+              :user-quota="userQuota"
+              :cpu="form.cpu"
+              :memory="form.memory"
+              :disk="form.disk"
+              :step-number="regions.length > 0 ? 3 : 2"
+              @update:cpu="form.cpu = $event"
+              @update:memory="form.memory = $event"
+              @update:disk="form.disk = $event"
+            />
+            <HostSelector
+              :available-hosts="availableHosts"
+              :selected-host-id="form.hostId"
+              :hosts-loading="hostsLoading"
+              :hosts-insufficient="hostsInsufficient"
+              :cpu="form.cpu"
+              :memory="form.memory"
+              :selected-package="selectedPackage || null"
+              :show-deduction="!isPaidPackage || form.planId !== null"
+              :title="getCreatePageText('selectHost')"
+              :auto-selected-label="getCreatePageText('hostAutoSelected')"
+              @update:selected-host-id="form.hostId = $event"
+            />
+            <ImageSelector
+              :available-images="availableImages"
+              :selected-image="form.image"
+              :images-loading="imagesLoading"
+              :step-number="regions.length > 0 ? 4 : 3"
+              :title="getCreatePageText('selectSystem')"
+              :empty-message="getCreatePageText('noImages')"
+              @update:selected-image="form.image = $event"
+            />
+            <div v-if="form.image" class="card p-5">
+              <InitCommandSelector v-model="form.customInitCommandIds" :distro="selectedImageDistro" />
+            </div>
+            <SSHKeySelector
+              :ssh-keys="sshKeys"
+              :selected-key-id="form.sshKeyId"
+              :step-number="regions.length > 0 ? 5 : 4"
+              :title="getCreatePageText('selectSshKey')"
+              @update:selected-key-id="form.sshKeyId = $event"
+            />
+            <!-- 订单概览 -->
+            <div v-if="isPaidPackage && form.planId && selectedPlan" class="card p-5">
+              <div class="flex items-center gap-3 mb-5">
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" :class="themeStore.isDark ? 'bg-blue-500/20' : 'bg-blue-100'">
+                  <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="font-semibold text-themed">{{ configStore.freeSiteMode ? freeSiteCopy.createOrderSummary : $t('instance.createPage.orderSummary') }}</h3>
+                  <p class="text-xs text-themed-muted">{{ selectedPackage?.name }} - {{ selectedPlan.name }}</p>
+                </div>
+              </div>
+              <div class="space-y-4">
+                <div class="p-4 rounded-xl border-2" :class="themeStore.isDark ? 'border-blue-500/30 bg-blue-500/5' : 'border-blue-200 bg-blue-50/50'">
+                  <div class="flex items-center justify-between mb-3">
+                    <span class="px-2.5 py-1 rounded-full text-xs font-medium" :class="themeStore.isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-700'">{{ getBillingCycleLabel(selectedPlan.billingCycle) }}</span>
+                    <span v-if="selectedPlan.slaGuarantee" class="flex items-center gap-1 text-xs text-green-500">
+                      <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
+                      SLA {{ selectedPlan.slaGuarantee }}%
+                    </span>
+                  </div>
+                  <div class="grid grid-cols-4 gap-3 text-center">
+                    <div><div class="text-lg font-bold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ selectedPlan.cpu }}%</div><div class="text-xs text-themed-muted">CPU</div></div>
+                    <div>
+                      <div class="text-lg font-bold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ formatMemory(selectedPlan.memory) }}</div>
+                      <div class="text-xs text-themed-muted leading-tight">
+                        <div>{{ $t('instance.memory') }}</div>
+                        <div v-if="selectedPackage?.instance_type !== 'vm' && selectedPlan.swapSize > 0" class="opacity-60">SWAP ✅</div>
+                      </div>
+                    </div>
+                    <div><div class="text-lg font-bold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ formatDisk(selectedPlan.disk) }}</div><div class="text-xs text-themed-muted">{{ $t('instance.disk') }}</div></div>
+                    <div><div class="text-lg font-bold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">{{ formatTraffic(selectedPlan.trafficLimit) }}</div><div class="text-xs text-themed-muted">{{ $t('billing.traffic') }} <span class="opacity-60">({{ $t('billing.trafficBidirectional') }})</span></div></div>
+                  </div>
+                  <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mt-3 pt-3 border-t text-xs" :class="themeStore.isDark ? 'border-blue-500/20' : 'border-blue-200'">
+                    <span class="text-themed-muted"><span class="opacity-75">{{ $t('instance.ports') }}:</span> {{ selectedPlan.portLimit }}</span>
+                    <span class="text-themed-muted"><span class="opacity-75">{{ $t('instance.snapshots') }}:</span> {{ selectedPlan.snapshotLimit }}</span>
+                  </div>
+                </div>
+                <!-- 优惠码 -->
+                <div class="space-y-3">
+                  <div>
+                    <label class="label text-xs uppercase tracking-wide text-themed-muted mb-2">{{ configStore.freeSiteMode ? freeSiteCopy.createPromoCode : $t('aff.promoCode') }}</label>
+                    <div class="relative">
+                      <input v-model="form.promoCode" type="text" class="input w-full pr-10" :placeholder="isHostedMarketPackage ? (configStore.freeSiteMode ? freeSiteCopy.createPromoHostedDisabled : $t('aff.promoCodeHostedDisabled')) : (configStore.freeSiteMode ? freeSiteCopy.createPromoPlaceholder : $t('aff.promoCodePlaceholder'))" :disabled="promoCodeVerifying || isHostedMarketPackage" @blur="verifyPromoCode" @keyup.enter="verifyPromoCode" />
+                      <div v-if="promoCodeVerifying" class="absolute right-3 top-1/2 -translate-y-1/2"><svg class="w-5 h-5 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>
+                      <div v-else-if="promoCodeValid === true" class="absolute right-3 top-1/2 -translate-y-1/2"><svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
+                      <div v-else-if="promoCodeValid === false" class="absolute right-3 top-1/2 -translate-y-1/2"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></div>
+                    </div>
+                    <p v-if="promoCodeValid === true" class="text-xs text-green-500 mt-1.5 flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>{{ configStore.freeSiteMode ? freeSiteCopy.createPromoValid.replace('{rate}', (promoCodeDiscount * 100).toFixed(0) + '%') : $t('aff.promoCodeValid', { rate: (promoCodeDiscount * 100).toFixed(0) + '%' }) }}</p>
+                    <p v-else-if="promoCodeError" class="text-xs text-red-500 mt-1.5">{{ promoCodeError }}</p>
+                  </div>
+                  <div v-if="promoCodeValid === true" class="p-3 rounded-lg text-sm" :class="themeStore.isDark ? 'bg-blue-900/20 border border-blue-800/30 text-blue-300' : 'bg-blue-50 border border-blue-200 text-blue-700'">
+                    <div class="flex items-start gap-2">
+                      <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>
+                      <div>
+                        <p class="font-medium">{{ configStore.freeSiteMode ? freeSiteCopy.createPromoUsing : $t('aff.usingPromoCode') }}</p>
+                        <p class="text-xs mt-1 opacity-80">{{ configStore.freeSiteMode ? freeSiteCopy.createPromoBenefit : $t('aff.promoCodeBenefit', { discount: (promoCodeDiscount * 100).toFixed(0) + '%', commission: (promoCodeCommissionRate * 100).toFixed(0) }) }}</p>
+                        <p v-if="planPriceInfo && selectedPlan" class="text-xs mt-1 opacity-80">{{ configStore.freeSiteMode ? freeSiteCopy.createCommissionEstimate.replace('{amount}', (planPriceInfo.planPrice * promoCodeCommissionRate).toFixed(2)) : $t('aff.commissionEstimate', { amount: (planPriceInfo.planPrice * promoCodeCommissionRate).toFixed(2) }) }}</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- 价格明细 -->
+                <div v-if="planPriceInfo" class="space-y-3">
+                  <div v-if="promoCodeValid && planPriceInfo.discountAmount > 0" class="p-4 rounded-xl space-y-2" :class="themeStore.isDark ? 'bg-gray-800/50' : 'bg-gray-100'">
+                    <div class="flex justify-between text-sm"><span class="text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.createPlanFee : $t('instance.createPage.planFee') }}</span><span class="text-themed font-medium">¥{{ planPriceInfo.planPrice.toFixed(2) }}</span></div>
+                    <div v-if="promoCodeValid && planPriceInfo.discountAmount > 0" class="flex justify-between text-sm pt-1 border-t border-themed/20">
+                      <span class="text-green-500 flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd" /></svg>{{ $t('aff.discountAmount') }} (-{{ (planPriceInfo.discountRate * 100).toFixed(0) }}%)</span>
+                      <span class="text-green-600 dark:text-green-400 font-medium">-¥{{ planPriceInfo.discountAmount.toFixed(2) }}</span>
+                    </div>
+                  </div>
+                  <div class="rounded-xl overflow-hidden" :class="themeStore.isDark ? 'border border-blue-800/50' : 'border border-blue-200'">
+                    <div class="p-5 flex items-center justify-between" :class="themeStore.isDark ? 'bg-gradient-to-r from-blue-900/50 to-indigo-900/50' : 'bg-gradient-to-r from-blue-50 to-indigo-50'">
+                      <div>
+                        <div class="text-sm font-medium" :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'">{{ configStore.freeSiteMode ? freeSiteCopy.finalPrice : $t('aff.finalPrice') }}</div>
+                        <div v-if="selectedPlan.billingCycle > 1" class="text-xs mt-1">
+                          <span :class="themeStore.isDark ? 'text-blue-400/70' : 'text-blue-600/70'">{{ configStore.freeSiteMode ? freeSiteCopy.createMonthlyEquivalent : `≈ ¥${(planPriceInfo.finalPrice / selectedPlan.billingCycle).toFixed(2)}/${$t('instance.createPage.month')}` }}</span>
+                        </div>
+                      </div>
+                      <div class="text-3xl font-bold" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">¥{{ planPriceInfo.finalPrice.toFixed(2) }}</div>
+                    </div>
+                    <div v-if="isHostedMarketPackage" class="px-4 py-3 flex items-center gap-2" :class="themeStore.isDark ? 'bg-amber-900/20 border-t border-amber-500/20' : 'bg-amber-50/80 border-t border-amber-200'">
+                      <svg class="w-4 h-4 flex-shrink-0" :class="themeStore.isDark ? 'text-amber-400' : 'text-amber-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                      <p class="text-xs" :class="themeStore.isDark ? 'text-amber-300/90' : 'text-amber-700'"><span class="font-medium">{{ $t('instance.createPage.hostedDisclaimer.title') }}</span> {{ $t('instance.createPage.hostedDisclaimer.content', { uid: selectedPackage?.ownerId }) }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div><!-- end scrollable -->
+
+          <!-- 吸底提交区 -->
+          <div class="card p-4 mt-4 space-y-3">
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1.5">{{ $t('instance.createPage.instanceName') }}</label>
+              <p v-if="showDestroyTrafficNotice" class="mb-2 text-xs leading-relaxed flex items-start gap-1.5" :class="themeStore.isDark ? 'text-amber-300' : 'text-amber-700'">
+                <svg class="w-3.5 h-3.5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 3a9 9 0 110 18 9 9 0 010-18z" />
+                </svg>
+                <span>{{ $t('instance.createPage.destroyTrafficNotice') }}</span>
+              </p>
+              <input v-model="form.name" type="text" class="input w-full" :placeholder="$t('instance.createPage.instanceNamePlaceholder')" required />
+            </div>
+            <div v-if="sshKeys.length === 0" class="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-400 dark:border-yellow-500/30 rounded-lg">
+              <p class="text-sm text-yellow-800 dark:text-yellow-300 font-medium mb-1">⚠️ {{ $t('instance.createPage.missingSshKey') }}</p>
+              <p class="text-xs text-yellow-700 dark:text-yellow-400">{{ $t('instance.createPage.missingSshKeyDesc') }} <router-link to="/profile" class="underline hover:text-yellow-900 dark:hover:text-yellow-200 font-medium">{{ $t('instance.createPage.profileSettings') }}</router-link> {{ $t('instance.createPage.addSshKey') }}</p>
+            </div>
+            <div v-if="!quotaCheck.valid" class="p-3 rounded-lg border" :class="themeStore.isDark ? 'bg-red-900/20 border-red-500/30' : 'bg-red-50 border-red-200'">
+              <p class="text-sm font-medium mb-2" :class="themeStore.isDark ? 'text-red-400' : 'text-red-700'">{{ $t('instance.createPage.quotaInsufficient') }}</p>
+              <ul class="text-xs space-y-1" :class="themeStore.isDark ? 'text-red-300' : 'text-red-600'"><li v-for="(err, idx) in quotaCheck.errors" :key="idx">• {{ err }}</li></ul>
+            </div>
+            <div v-if="!resourceLimitCheck.valid" class="p-3 rounded-lg border" :class="themeStore.isDark ? 'bg-red-900/20 border-red-500/30' : 'bg-red-50 border-red-200'">
+              <p class="text-sm font-medium mb-2" :class="themeStore.isDark ? 'text-red-400' : 'text-red-700'">{{ $t('instance.createPage.resourceLimit.title') }}</p>
+              <ul class="text-xs space-y-1" :class="themeStore.isDark ? 'text-red-300' : 'text-red-600'"><li v-for="(err, idx) in resourceLimitCheck.errors" :key="idx">• {{ err }}</li></ul>
+            </div>
+            <div v-if="isOwnPaidPackage" class="p-3 rounded-lg border" :class="themeStore.isDark ? 'bg-amber-900/20 border-amber-500/30' : 'bg-amber-50 border-amber-200'">
+              <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-amber-400' : 'text-amber-700'">{{ $t('instance.createPage.ownPaidPackageWarning') }}</p>
+            </div>
+            <div v-if="prerequisiteMissing" class="p-3 rounded-lg border" :class="themeStore.isDark ? 'bg-amber-900/20 border-amber-500/30' : 'bg-amber-50 border-amber-200'">
+              <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-amber-400' : 'text-amber-700'">{{ prerequisiteMessage }}</p>
+            </div>
+            <div v-if="error" class="p-3 rounded-lg border text-sm" :class="themeStore.isDark ? 'bg-red-900/20 border-red-500/30 text-red-400' : 'bg-red-50 border-red-200 text-red-700'">{{ error }}</div>
+            <button type="submit" :disabled="!canSubmit" class="btn-primary w-full">{{ submitting ? $t('instance.createPage.creating') : $t('instance.create') }}</button>
+          </div>
+        </div><!-- end right col -->
+      </div><!-- end grid -->
+    </form>
+  </div>
+
+  <!-- 托管者信息弹窗 -->
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="showHostOwnerModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showHostOwnerModal = false"></div>
+        <div class="modal-content max-w-sm">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('instance.detail.info.hostOwnerTitle') }}</h3>
+            <button type="button" class="text-themed-muted hover:text-themed" @click="showHostOwnerModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <!-- 加载状态 -->
+            <div v-if="hostOwnerLoading" class="flex justify-center py-8">
+              <svg class="w-8 h-8 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            <!-- 托管者信息 -->
+            <template v-else-if="hostOwnerInfo">
+              <!-- 用户头像区域 -->
+              <div class="flex items-center gap-4 mb-6">
+                <UserAvatar
+                  :username="hostOwnerInfo.username"
+                  :email="hostOwnerInfo.email"
+                  :avatar-style="hostOwnerInfo.avatarStyle"
+                  :badge-id="hostOwnerInfo.avatarBadgeId || null"
+                  :size="56"
+                />
+                <div class="flex-1">
+                  <p class="font-medium text-themed">{{ hostOwnerInfo.username }}</p>
+                  <p class="text-sm text-themed-muted">UID: {{ hostOwnerInfo.id }}</p>
+                </div>
+                <!-- VIP徽章 -->
+                <div 
+                  v-if="hostOwnerInfo.vipLevel > 0"
+                  class="px-3 py-1.5 rounded-full border text-xs font-bold flex items-center gap-1.5 shadow-sm"
+                  :style="getVipBadgeInlineStyle(normalizeVipBadgeStyle(hostOwnerInfo.vipBadgeStyle, hostOwnerInfo.vipLevel))"
+                >
+                  <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+                  </svg>
+                  VIP{{ hostOwnerInfo.vipLevel }}
+                </div>
+              </div>
+              <!-- 详细信息 -->
+              <div class="space-y-3">
+                <div 
+                  class="flex items-center justify-between p-3 rounded-lg"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                >
+                  <span class="text-sm text-themed-muted flex items-center gap-2">
+                    <svg 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+                    </svg>
+                    {{ $t('instance.detail.info.hostOwnerHostCount') }}
+                  </span>
+                  <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'">
+                    {{ hostOwnerInfo.hostCount }}
+                  </span>
+                </div>
+                <div 
+                  class="flex items-center justify-between p-3 rounded-lg"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                >
+                  <span class="text-sm text-themed-muted flex items-center gap-2">
+                    <svg 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                    </svg>
+                    {{ $t('instance.detail.info.hostOwnerInstanceCount') }}
+                  </span>
+                  <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">
+                    {{ hostOwnerInfo.instanceCount }}
+                  </span>
+                </div>
+                <div 
+                  class="flex items-center justify-between p-3 rounded-lg"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+                >
+                  <span class="text-sm text-themed-muted flex items-center gap-2">
+                    <svg 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    {{ $t('instance.detail.info.hostOwnerRegisteredDays') }}
+                  </span>
+                  <span class="text-sm font-semibold" :class="themeStore.isDark ? 'text-purple-400' : 'text-purple-600'">
+                    {{ hostOwnerInfo.registeredDays }} {{ $t('common.days') }}
+                  </span>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn-primary" @click="showHostOwnerModal = false">
+              {{ $t('common.close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/client/src/views/InstanceDetailView.vue b/client/src/views/InstanceDetailView.vue
new file mode 100644
index 0000000..14e89c7
--- /dev/null
+++ b/client/src/views/InstanceDetailView.vue
@@ -0,0 +1,3606 @@
+<script setup lang="ts">
+// 为 KeepAlive exclude 匹配定义组件名称
+defineOptions({
+  name: 'InstanceDetailView'
+})
+
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+import { useConfigStore } from '@/stores/config'
+import InstanceInfoTab from '@/components/instance/InstanceInfoTab.vue'
+import InstanceNetworkTab from '@/components/instance/InstanceNetworkTab.vue'
+import InstanceQuotaTab from '@/components/instance/InstanceQuotaTab.vue'
+import InstanceConfigTab from '@/components/instance/InstanceConfigTab.vue'
+import InstanceSitesTab from '@/components/instance/InstanceSitesTab.vue'
+import InstanceLogsTab from '@/components/instance/InstanceLogsTab.vue'
+import SnapshotManager from '@/components/SnapshotManager.vue'
+import TrafficStats from '@/components/instance/TrafficStats.vue'
+import AddPortModal from '@/components/instance/modals/AddPortModal.vue'
+import PortConflictModal from '@/components/instance/modals/PortConflictModal.vue'
+import RebuildModal from '@/components/instance/modals/RebuildModal.vue'
+import RecreateModal from '@/components/instance/modals/RecreateModal.vue'
+import TransferModal from '@/components/instance/modals/TransferModal.vue'
+import ConfigEditModal from '@/components/instance/modals/ConfigEditModal.vue'
+import RenewModal from '@/components/instance/modals/RenewModal.vue'
+import ApplyAffCodeModal from '@/components/instance/modals/ApplyAffCodeModal.vue'
+import ChangePlanModal from '@/components/instance/modals/ChangePlanModal.vue'
+import DestroyInstanceModal from '@/components/instance/modals/DestroyInstanceModal.vue'
+import TerminalModal from '@/components/instance/TerminalModal.vue'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+import InstanceBadgeModal from '@/components/instance/InstanceBadgeModal.vue'
+import AnnouncementIcon from '@/components/icons/AnnouncementIcon.vue'
+import { getStatusInfo } from '@/utils/formatters'
+import { translateError } from '@/utils/errorHandler'
+import { freeSiteCopy, getFreeSiteBillingCycleLabel, getFreeSiteBillingCycleShort } from '@/utils/freeSiteFun'
+import type { Instance, InstanceWithDetails, Snapshot, UserQuota, UpdateInstanceRequest, Package, CloudInitState, CloudInitStatusResponse } from '@/types/api'
+
+// 格式化镜像名称：优先使用 imageName，否则去掉 images: 前缀
+function formatImageName(image: string, imageName?: string | null): string {
+  if (imageName) return imageName
+  return image?.replace(/^images:/, '') || ''
+}
+
+// 获取付费实例的图标类型
+function getInstanceIconType(inst: { instanceType?: string; host?: { name?: string } } | null): 'pro' | 'prime' | 'peer' {
+  if (!inst) return 'pro'
+  
+  // 如果节点名称以 PEER 开头（不区分大小写），则是托管实例，显示 peer 图标
+  const hostName = inst.host?.name || ''
+  if (/^PEER\d/i.test(hostName)) {
+    return 'peer'
+  }
+  
+  // 根据实例类型判断：虚拟机显示 prime，容器显示 pro
+  return inst.instanceType === 'vm' ? 'prime' : 'pro'
+}
+
+const { t } = useI18n()
+
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+
+// 获取返回路径：如果是从宿主机页面进入，则返回到宿主机页面
+function getReturnPath(): string {
+  const fromHost = route.query.fromHost as string | undefined
+  if (fromHost) {
+    // 验证 hostId 是否为有效数字
+    const hostId = parseInt(fromHost, 10)
+    if (!isNaN(hostId) && hostId > 0) {
+      return `/resources/hosts/${hostId}`
+    }
+    // 如果 hostId 无效，返回实例列表
+    return '/instances'
+  }
+  return '/instances'
+}
+
+// 标签页状态
+type TabType = 'info' | 'network' | 'sites' | 'traffic' | 'snapshots' | 'quota' | 'config' | 'logs'
+const activeTab = ref<TabType>('info')
+
+// 实例数据
+const instance = ref<InstanceWithDetails | null>(null)
+const loading = ref<boolean>(true)
+const actionLoading = ref<string>('')
+const copied = ref<string>('')
+const showPassword = ref<Record<string, boolean>>({})  // 用于控制密码显示/隐藏
+const instancePassword = ref<Record<string, string | null>>({})  // 存储实例密码
+
+// 资源统计
+interface ResourceStats {
+  memory: { usage: number; limit: number; usagePercent: number }
+  disk: { usage: number; limit: number; usagePercent: number }
+  network: { bytesReceived: number; bytesSent: number }
+}
+const stats = ref<ResourceStats>({
+  memory: { usage: 0, limit: 0, usagePercent: 0 },
+  disk: { usage: 0, limit: 0, usagePercent: 0 },
+  network: { bytesReceived: 0, bytesSent: 0 }
+})
+const statsLoading = ref<boolean>(false)
+
+// 流量数据
+interface TrafficData {
+  monthlyUsed: string
+  monthlyUsedFormatted: string
+  monthlyLimit: string | null
+  monthlyLimitFormatted: string | null
+  trafficStatus: 'NORMAL' | 'WARNING' | 'LIMITED'
+  percentage: number
+}
+const trafficData = ref<TrafficData | null>(null)
+const trafficLoading = ref<boolean>(false)
+
+// 端口映射
+const showAddPortModal = ref<boolean>(false)
+const portLoading = ref<boolean>(false)
+const portError = ref<string>('')
+// 端口冲突解决
+const showPortConflictModal = ref<boolean>(false)
+const portConflicts = ref<Array<{ publicPort: number; suggestedPort: number | null }>>([])// 用于冲突解决后重新提交的原始数据
+const pendingBatchPortData = ref<{
+  protocol: 'tcp' | 'udp' | 'both'
+  privatePortStart: number
+  privatePortEnd: number
+  publicPortStart?: number
+  publicPortEnd?: number
+  remark?: string
+} | null>(null)
+
+// 快照 - 现在使用 SnapshotManager 组件
+const snapshots = ref<Snapshot[]>([]) // Still needed for quota tab
+
+// 重命名
+const showRenameModal = ref<boolean>(false)
+const renameLoading = ref<boolean>(false)
+const newInstanceName = ref<string>('')
+
+// 重装
+const showRebuildModal = ref<boolean>(false)
+const rebuildLoading = ref<boolean>(false)
+
+// 重建
+const showRecreateModal = ref<boolean>(false)
+const recreateLoading = ref<boolean>(false)
+
+interface ImageOption {
+  incusAlias: string
+  name: string
+  description: string | null
+  icon?: string | null
+}
+
+// 转移
+const showTransferModal = ref<boolean>(false)
+const hasPendingTransfer = ref<boolean>(false)
+
+// 续费弹窗
+const showRenewModal = ref<boolean>(false)
+const showApplyAffModal = ref<boolean>(false)
+
+// 自动续费弹窗
+const showAutoRenewModal = ref<boolean>(false)
+const autoRenewLoading = ref<boolean>(false)
+
+// 变更方案弹窗
+const showChangePlanModal = ref<boolean>(false)
+
+// 销毁弹窗
+const showDestroyModal = ref<boolean>(false)
+const destroyLoading = ref<boolean>(false)
+const errorDestroyLoading = ref<boolean>(false)
+const destroyInfo = ref<{
+  canDestroy: boolean
+  cannotDestroyReason: string
+  isFreeInstance: boolean
+  isFirstTime: boolean
+  rules: { feeRate: number }
+  refund: { remainingDays: number; remainingValue: number; feeRate: number; feeAmount: number; refundAmount: number; destroyCount: number; maxRefundable: number }
+  instance: { id: number; name: string; hostName: string; planName: string | null }
+} | null>(null)
+
+// 复制
+const showCloneModal = ref<boolean>(false)
+const cloneLoading = ref<boolean>(false)
+const showInstanceBadgeModal = ref<boolean>(false)
+
+// 封停/解封
+const suspendLoading = ref<boolean>(false)
+const showSuspendModal = ref<boolean>(false)
+const suspendReason = ref<string>('')
+
+// 同步状态
+const syncStatusLoading = ref<boolean>(false)
+
+// 重新分配 IPv6
+const reassignIpv6Loading = ref<boolean>(false)
+
+const availableImages = ref<ImageOption[]>([])
+interface SshKeyOption {
+  id: number
+  name: string
+}
+const sshKeys = ref<SshKeyOption[]>([])
+
+// 实例配额
+interface InstanceQuotaForm {
+  portLimit: number | null
+  snapshotLimit: number | null
+}
+const instanceQuotaForm = ref<InstanceQuotaForm>({
+  portLimit: null,
+  snapshotLimit: null
+})
+const quotaSaving = ref<boolean>(false)
+const quotaError = ref<string>('')
+const userQuota = ref<UserQuota | null>(null) // 用户配额信息
+interface RemainingQuota {
+  port: number
+  snapshot: number
+}
+const remainingQuota = ref<RemainingQuota>({ // 剩余额度
+  port: 0,
+  snapshot: 0
+})
+
+// 配置编辑
+const showConfigEditModal = ref<boolean>(false)
+const configEditLoading = ref<boolean>(false)
+const instancePackage = ref<Package | null>(null)
+
+// 兑换资源
+const showRedeemModal = ref<boolean>(false)
+const redeemCodeInput = ref<string>('')
+const redeemLoading = ref<boolean>(false)
+
+// 检查是否可以删除实例（根据套餐设置和付费状态）
+// 注意：宿主机拥有者不受套餐限制，可以删除其宿主机上的所有实例
+const canDeleteInstance = computed<boolean>(() => {
+  if (!instance.value) return false
+  
+  // 宿主机拥有者不受套餐限制
+  const inst = instance.value as { isHostOwner?: boolean } | null
+  if (inst?.isHostOwner === true) return true
+  
+  // 付费实例禁止删除（无论套餐是否允许）
+  if (instance.value.packagePlanId) return false
+  
+  // 没有套餐时允许删除
+  if (!instance.value.package_id) return true
+  
+  // 套餐信息未加载时不允许（避免误删）
+  if (!instancePackage.value) return false
+  
+  // 只有明确设置为true时才允许删除
+  return (instancePackage.value as any).allow_instance_deletion === true
+})
+
+// 敏感操作验证
+
+// 终端模态框
+const showTerminalModal = ref<boolean>(false)
+const terminalConnected = ref<boolean>(false)
+const terminalSessionActive = ref<boolean>(false)  // 终端会话是否存在（无论连接状态）
+const terminalForceDisconnect = ref<boolean>(false)
+const terminalTabCount = ref<number>(0)  // 终端标签数量
+
+// 终端悄浮按钮拖动状态
+const terminalFabY = ref<number | null>(null) // null 表示使用默认位置
+const isDragging = ref(false)
+
+// Cloud-init 初始化状态
+const cloudInitReady = ref<boolean>(true) // 默认 true，只有检测到未完成时才显示提示
+const cloudInitState = ref<CloudInitState | null>(null)
+const cloudInitChecking = ref<boolean>(false)
+const cloudInitManualCompleting = ref<boolean>(false)
+let cloudInitRetryCount = 0 // 重试计数器
+let cloudInitRetryTimer: ReturnType<typeof setTimeout> | null = null // 重试定时器
+const CLOUD_INIT_AUTO_RETRY_DELAY_MS = 10000
+const CLOUD_INIT_MAX_AUTO_RETRIES = 12
+let dragStartY = 0
+let dragStartFabY = 0
+
+// 开始拖动（鼠标/触摸）
+function startDrag(e: MouseEvent | TouchEvent) {
+    isDragging.value = true
+    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+    dragStartY = clientY
+    // 如果还没有设置过位置，从当前位置计算
+    if (terminalFabY.value === null) {
+        dragStartFabY = window.innerHeight - 96 - 48 // bottom-24 (96px) + 按钮高度
+    } else {
+        dragStartFabY = terminalFabY.value
+    }
+    // 添加全局事件监听
+    window.addEventListener('mousemove', onDrag)
+    window.addEventListener('mouseup', endDrag)
+    window.addEventListener('touchmove', onDrag, { passive: false })
+    window.addEventListener('touchend', endDrag)
+}
+
+// 拖动中
+function onDrag(e: MouseEvent | TouchEvent) {
+    if (!isDragging.value) return
+    e.preventDefault()
+    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+    const deltaY = clientY - dragStartY
+    let newY = dragStartFabY + deltaY
+    // 限制在屏幕范围内 (顶部 64px 到底部 32px)
+    const minY = 64
+    const maxY = window.innerHeight - 48 - 32
+    newY = Math.max(minY, Math.min(maxY, newY))
+    terminalFabY.value = newY
+}
+
+// 结束拖动
+function endDrag() {
+    isDragging.value = false
+    window.removeEventListener('mousemove', onDrag)
+    window.removeEventListener('mouseup', endDrag)
+    window.removeEventListener('touchmove', onDrag)
+    window.removeEventListener('touchend', endDrag)
+}
+
+let refreshInterval: ReturnType<typeof setInterval> | null = null
+let statsInterval: ReturnType<typeof setInterval> | null = null
+let isComponentMounted = ref<boolean>(true)  // 组件挂载状态标志
+
+onMounted(async (): Promise<void> => {
+  isComponentMounted.value = true
+  await configStore.loadPublicConfig()
+  await loadInstance()
+  // 注意：loadInstance() 内部已经处理了 loadStats() 和 loadTrafficData() 的调用
+  // 不需要在这里重复调用
+  if (isComponentMounted.value) {
+    refreshInterval = setInterval(loadInstance, 5000)
+  }
+})
+
+onUnmounted(() => {
+  isComponentMounted.value = false
+  // 关闭终端模态框（确保断开连接）
+  showTerminalModal.value = false
+  terminalConnected.value = false
+  terminalSessionActive.value = false
+  terminalTabCount.value = 0
+  // 清理拖动事件监听器（如果正在拖动时组件卸载）
+  if (isDragging.value) {
+    endDrag()
+  }
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+  if (statsInterval) {
+    clearInterval(statsInterval)
+    statsInterval = null
+  }
+  // 清理任务轮询
+  if (taskPollingInterval) {
+    clearInterval(taskPollingInterval)
+    taskPollingInterval = null
+  }
+  // 清理 cloud-init 重试定时器
+  if (cloudInitRetryTimer) {
+    clearTimeout(cloudInitRetryTimer)
+    cloudInitRetryTimer = null
+  }
+})
+
+// 路由离开守卫 - 确保离开页面时断开终端连接
+onBeforeRouteLeave(() => {
+  // 关闭终端模态框，触发其内部的断开逻辑
+  showTerminalModal.value = false
+  terminalConnected.value = false
+})
+
+// 监听标签页变化以加载数据
+watch(activeTab, async (tab: TabType) => {
+  if (tab === 'quota') {
+    // 并行加载配额相关数据，加快标签页加载速度
+    await Promise.all([
+      loadInstance(),
+      loadSnapshotsForQuota(),
+      loadUserQuota()
+    ])
+  }
+  // 快照加载由 SnapshotManager 组件处理
+})
+
+const isRunning = computed<boolean>(() => {
+  const s = instance.value?.status?.toLowerCase()
+  return s === 'running'
+})
+
+const isStopped = computed<boolean>(() => {
+  const s = instance.value?.status?.toLowerCase()
+  return s === 'stopped'
+})
+
+const isSuspended = computed<boolean>(() => {
+  const s = instance.value?.status?.toLowerCase()
+  return s === 'suspended'
+})
+
+const canDestroyExpiredSuspendedPaidInstance = computed<boolean>(() => {
+  if (!instance.value || !isSuspended.value) return false
+  return instance.value.suspend_reason === 'expired'
+    && !!instance.value.packagePlanId
+    && !!instance.value.expires_at
+    && new Date(instance.value.expires_at).getTime() <= Date.now()
+})
+
+const destroyButtonDisabled = computed<boolean>(() =>
+  isSuspended.value && !canDestroyExpiredSuspendedPaidInstance.value
+)
+
+const subscriptionRemainingDays = computed<number>(() =>
+  getRemainingDays(instance.value?.expires_at ?? null)
+)
+
+const subscriptionRemainingDisplay = computed(() =>
+  getRemainingDaysDisplay(subscriptionRemainingDays.value, instance.value?.expires_at ?? null)
+)
+
+const subscriptionAutoRenewEnabled = computed<boolean>(() =>
+  Boolean((instance.value as any)?.autoRenew)
+)
+
+const showPaidSubscriptionCard = computed<boolean>(() =>
+  Boolean((instance.value as any)?.planName && instance.value?.expires_at)
+)
+
+const isError = computed<boolean>(() => {
+  const s = instance.value?.status?.toLowerCase()
+  return s === 'error'
+})
+
+// AUTH004: 节点所有者权限控制
+// 节点所有者可以操作实例（启停/删除/快照），但不能执行仅所有者的操作
+const isHostOwnerOnly = computed<boolean>(() => {
+  // 仅当用户是节点所有者但不是实例所有者时，才限制某些操作
+  // 后端返回 isHostOwner = true 表示是节点所有者
+  // 后端返回 isInstanceOwner = true 表示同时也是实例所有者
+  const inst = instance.value as { isHostOwner?: boolean; isInstanceOwner?: boolean } | null
+  return inst?.isHostOwner === true && inst?.isInstanceOwner !== true
+})
+
+// 节点所有者禁止的操作：转移、重建、端口映射
+const canTransfer = computed<boolean>(() => !isHostOwnerOnly.value)
+const canRebuild = computed<boolean>(() => !isHostOwnerOnly.value)
+const hasCloudInitManualPermission = computed<boolean>(() => !isHostOwnerOnly.value)
+// 复制功能仅限宿主机所有者
+const canClone = computed<boolean>(() => {
+  const inst = instance.value as { isHostOwner?: boolean } | null
+  return inst?.isHostOwner === true
+})
+// 封停/解封功能仅限宿主机所有者
+const canSuspend = computed<boolean>(() => {
+  const inst = instance.value as { isHostOwner?: boolean } | null
+  return inst?.isHostOwner === true
+})
+const canSyncStatus = computed<boolean>(() => {
+  const inst = instance.value
+  return !!inst && (inst.isHostOwner === true || inst.isInstanceOwner === true)
+})
+const canManagePorts = computed<boolean>(() => !isHostOwnerOnly.value)
+
+const instanceHostName = computed<string>(() => {
+  const host = (instance.value as any)?.host
+  if (typeof host === 'string') return host
+  return host?.name || '-'
+})
+
+// 监听路由参数变化，重新加载实例数据
+watch(() => route.params.id, async (newId, oldId) => {
+  if (newId !== oldId) {
+    // 如果路由参数从有效变为无效，或者路由名称变化，清除定时器
+    if (!newId || route.name !== 'instance-detail') {
+      if (refreshInterval) {
+        clearInterval(refreshInterval)
+        refreshInterval = null
+      }
+      if (statsInterval) {
+        clearInterval(statsInterval)
+        statsInterval = null
+      }
+    } else {
+      // 切换到新实例，先清除所有定时器
+      if (refreshInterval) {
+        clearInterval(refreshInterval)
+        refreshInterval = null
+      }
+      if (statsInterval) {
+        clearInterval(statsInterval)
+        statsInterval = null
+      }
+      if (taskPollingInterval) {
+        clearInterval(taskPollingInterval)
+        taskPollingInterval = null
+      }
+      if (cloudInitRetryTimer) {
+        clearTimeout(cloudInitRetryTimer)
+        cloudInitRetryTimer = null
+      }
+      cloudInitRetryCount = 0
+      
+      // 重置所有状态
+      loading.value = true
+      activeTab.value = 'info'
+      instance.value = null
+      actionLoading.value = ''
+      copied.value = ''
+      showPassword.value = {}
+      instancePassword.value = {}
+      stats.value = {
+        memory: { usage: 0, limit: 0, usagePercent: 0 },
+        disk: { usage: 0, limit: 0, usagePercent: 0 },
+        network: { bytesReceived: 0, bytesSent: 0 }
+      }
+      trafficData.value = null
+      snapshots.value = []
+      hasPendingTransfer.value = false
+      destroyInfo.value = null
+      
+      // 重置配额相关状态
+      instanceQuotaForm.value = { portLimit: null, snapshotLimit: null }
+      quotaError.value = ''
+      userQuota.value = null
+      remainingQuota.value = { port: 0, snapshot: 0 }
+      instancePackage.value = null
+      
+      // 重置 cloud-init 状态
+      cloudInitReady.value = true
+      cloudInitState.value = null
+      cloudInitChecking.value = false
+      cloudInitManualCompleting.value = false
+      
+      // 重置终端状态
+      terminalConnected.value = false
+      terminalSessionActive.value = false
+      terminalTabCount.value = 0
+      
+      // 关闭所有弹窗
+      showAddPortModal.value = false
+      showRenameModal.value = false
+      showRebuildModal.value = false
+      showRecreateModal.value = false
+      showTransferModal.value = false
+      showRenewModal.value = false
+      showApplyAffModal.value = false
+      showAutoRenewModal.value = false
+      showChangePlanModal.value = false
+      showDestroyModal.value = false
+      showCloneModal.value = false
+      showSuspendModal.value = false
+      showTerminalModal.value = false
+      showConfigEditModal.value = false
+      
+      // 加载新实例数据
+      await loadInstance()
+      
+      // 重新启动定时刷新
+      if (isComponentMounted.value) {
+        refreshInterval = setInterval(loadInstance, 5000)
+      }
+    }
+  }
+})
+
+// 监听实例状态变化，动态管理统计信息定时器
+// 注意：必须在 isRunning 定义之后
+watch(isRunning, (running: boolean) => {
+  // 如果组件已卸载，不执行任何操作
+  if (!isComponentMounted.value) return
+  
+  if (running) {
+    // 实例启动时，启动统计信息定时刷新
+    if (!statsInterval && instance.value?.id) {
+      loadStats()
+      if (isComponentMounted.value) {
+        statsInterval = setInterval(loadStats, 3000)
+      }
+    }
+    // 实例启动时，延迟检查 cloud-init 状态（等待实例完全就绪）
+    cloudInitRetryCount = 0 // 重置重试计数器
+    setTimeout(() => {
+      if (isComponentMounted.value && isRunning.value) {
+        checkCloudInitStatus()
+      }
+    }, 3000) // 延迟 3 秒再检测
+  } else {
+    // 实例停止时，停止统计信息定时刷新
+    if (statsInterval) {
+      clearInterval(statsInterval)
+      statsInterval = null
+    }
+    // 实例停止时，重置 cloud-init 状态
+    cloudInitReady.value = true
+    cloudInitState.value = null
+    // 清理重试定时器
+    if (cloudInitRetryTimer) {
+      clearTimeout(cloudInitRetryTimer)
+      cloudInitRetryTimer = null
+    }
+  }
+})
+
+// 检查 Cloud-init 初始化状态
+async function checkCloudInitStatus(): Promise<void> {
+  if (!instance.value?.id || !isComponentMounted.value) return
+  if (cloudInitChecking.value) return
+  
+  cloudInitChecking.value = true
+  try {
+    const result = await api.instances.checkCloudInitStatus(instance.value.id) as CloudInitStatusResponse
+    cloudInitReady.value = result.ready
+    cloudInitState.value = result.state
+
+    if (result.ready) {
+      cloudInitRetryCount = 0
+      if (cloudInitRetryTimer) {
+        clearTimeout(cloudInitRetryTimer)
+        cloudInitRetryTimer = null
+      }
+      return
+    }
+
+    // 如果未就绪且重试次数未达上限，自动重试
+    if (cloudInitRetryCount < CLOUD_INIT_MAX_AUTO_RETRIES && isComponentMounted.value && isRunning.value) {
+      cloudInitRetryCount++
+      console.log(`[CloudInit] 未就绪，${CLOUD_INIT_AUTO_RETRY_DELAY_MS / 1000}秒后重试 (${cloudInitRetryCount}/${CLOUD_INIT_MAX_AUTO_RETRIES})`)
+      cloudInitRetryTimer = setTimeout(() => {
+        if (isComponentMounted.value && isRunning.value) {
+          checkCloudInitStatus()
+        }
+      }, CLOUD_INIT_AUTO_RETRY_DELAY_MS)
+    }
+  } catch (err) {
+    // 检查失败时显示未知状态，允许用户选择重试或手动结束检测
+    console.error('Failed to check cloud-init status:', err)
+    cloudInitReady.value = false
+    cloudInitState.value = 'unknown'
+  } finally {
+    cloudInitChecking.value = false
+  }
+}
+
+const cloudInitNeedsManualAttention = computed<boolean>(() =>
+  cloudInitState.value === 'unknown' || cloudInitState.value === 'agent_unavailable'
+)
+
+const cloudInitRetriesExhausted = computed<boolean>(() =>
+  !cloudInitReady.value
+  && cloudInitState.value === 'running'
+  && cloudInitRetryCount >= CLOUD_INIT_MAX_AUTO_RETRIES
+)
+
+const canManualCompleteCloudInit = computed<boolean>(() =>
+  hasCloudInitManualPermission.value && (cloudInitNeedsManualAttention.value || cloudInitRetriesExhausted.value)
+)
+
+const cloudInitBannerTitle = computed<string>(() =>
+  cloudInitNeedsManualAttention.value
+    ? t('instance.detail.cloudInit.statusUnknown')
+    : cloudInitRetriesExhausted.value
+      ? t('instance.detail.cloudInit.stalled')
+    : t('instance.detail.cloudInit.initializing')
+)
+
+const cloudInitBannerShort = computed<string>(() =>
+  cloudInitNeedsManualAttention.value
+    ? t('instance.detail.cloudInit.shortUnknown')
+    : cloudInitRetriesExhausted.value
+      ? t('instance.detail.cloudInit.shortStalled')
+    : t('instance.detail.cloudInit.short')
+)
+
+const cloudInitBannerRetryText = computed<string>(() =>
+  cloudInitNeedsManualAttention.value
+    ? t('instance.detail.cloudInit.retryUnknown')
+    : cloudInitRetriesExhausted.value
+      ? t('instance.detail.cloudInit.retryStalled')
+    : t('instance.detail.cloudInit.retry')
+)
+
+const cloudInitBannerTooltip = computed<string>(() =>
+  cloudInitNeedsManualAttention.value
+    ? t('instance.detail.cloudInit.clickToRetryUnknown')
+    : cloudInitRetriesExhausted.value
+      ? t('instance.detail.cloudInit.clickToRetryStalled')
+    : t('instance.detail.cloudInit.clickToRetry')
+)
+
+async function manualCompleteCloudInit(): Promise<void> {
+  if (!instance.value?.id) return
+
+  cloudInitManualCompleting.value = true
+  try {
+    const result = await api.instances.manualCompleteCloudInit(instance.value.id) as CloudInitStatusResponse
+    cloudInitReady.value = result.ready
+    cloudInitState.value = result.state
+    if (cloudInitRetryTimer) {
+      clearTimeout(cloudInitRetryTimer)
+      cloudInitRetryTimer = null
+    }
+    cloudInitRetryCount = 0
+    toast.success(t('instance.detail.cloudInit.manualCompleteSuccess'))
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    cloudInitManualCompleting.value = false
+  }
+}
+
+function handleTerminalCloudInitManualComplete(): void {
+  cloudInitReady.value = true
+  cloudInitState.value = 'manual'
+  if (cloudInitRetryTimer) {
+    clearTimeout(cloudInitRetryTimer)
+    cloudInitRetryTimer = null
+  }
+  cloudInitRetryCount = 0
+}
+
+// 分页数据 - 已移至子组件
+const portMappingsCount = computed<number>(() => (instance.value as any)?.port_mappings?.length || 0)
+
+// Tab definitions - config tab visible to all, quota tab only visible to host owners
+interface DetailTab {
+  key: TabType
+  labelKey: string
+  icon: string
+}
+
+const allTabs: DetailTab[] = [
+  { key: 'info', labelKey: 'instance.detail.tabs.info', icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
+  { key: 'network', labelKey: 'instance.detail.tabs.network', icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9' },
+  { key: 'sites', labelKey: 'instance.sites.title', icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
+  { key: 'traffic', labelKey: 'instance.detail.tabs.traffic', icon: 'M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z' },
+  { key: 'quota', labelKey: 'instance.detail.tabs.quota', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+  { key: 'snapshots', labelKey: 'instance.detail.tabs.snapshots', icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' },
+  { key: 'logs', labelKey: 'instance.detail.tabs.logs', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
+  { key: 'config', labelKey: 'instance.detail.tabs.config', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' }
+]
+
+function normalizeQuotaLimit(value: unknown): number | null {
+  if (value === null || value === undefined || value === '') return null
+  const numericValue = Number(value)
+  return Number.isFinite(numericValue) ? numericValue : null
+}
+
+function getInstanceQuotaLimit(type: 'site' | 'snapshot'): number | null {
+  const inst = instance.value as any
+  if (!inst) return null
+
+  const effectiveLimit = normalizeQuotaLimit(inst.effective_quota_limit?.[type])
+  if (effectiveLimit !== null) return effectiveLimit
+
+  if (type === 'site') {
+    return normalizeQuotaLimit(inst.site_limit ?? inst.siteLimit)
+  }
+
+  return normalizeQuotaLimit(inst.snapshot_limit ?? inst.snapshotLimit)
+}
+
+const hasSiteQuota = computed<boolean>(() => getInstanceQuotaLimit('site') !== 0)
+const hasSnapshotQuota = computed<boolean>(() => getInstanceQuotaLimit('snapshot') !== 0)
+
+const visibleTabs = computed(() => {
+  const tabs = allTabs.filter(tab => {
+    if (tab.key === 'sites') return hasSiteQuota.value
+    if (tab.key === 'snapshots') return hasSnapshotQuota.value
+    return true
+  })
+
+  // Quota tab visible to host owners or admins
+  // Config tab visible to all users (read-only for non-host owners)
+  if (instance.value?.isHostOwner || authStore.isAdmin) {
+    return tabs
+  }
+  return tabs.filter(tab => tab.key !== 'quota')
+})
+
+watch(visibleTabs, (tabs) => {
+  if (tabs.some(tab => tab.key === activeTab.value)) return
+  activeTab.value = tabs[0]?.key ?? 'info'
+})
+
+// 加载函数
+async function loadInstance(): Promise<void> {
+  // 如果组件已卸载，直接返回，不执行任何操作
+  if (!isComponentMounted.value) {
+    return
+  }
+  
+  if (actionLoading.value) return
+  
+  try {
+    // 检查当前路由是否仍然是实例详情页面
+    if (!route.params.id || route.name !== 'instance-detail') {
+      // 路由已经变化，清除定时器并返回
+      if (refreshInterval) {
+        clearInterval(refreshInterval)
+        refreshInterval = null
+      }
+      return
+    }
+    
+    const instanceId = parseInt(route.params.id as string)
+    
+    // 验证 ID 是否为有效数字
+    if (isNaN(instanceId) || instanceId <= 0) {
+      // 如果组件仍然挂载，才显示错误并跳转
+      if (isComponentMounted.value) {
+        toast.error(t('instance.detail.invalidId'))
+        router.replace(getReturnPath())
+      }
+      // 清除定时器
+      if (refreshInterval) {
+        clearInterval(refreshInterval)
+        refreshInterval = null
+      }
+      return
+    }
+    
+    const response = await api.instances.get(instanceId)
+    instance.value = (response as { instance?: Instance }).instance || null
+    if (instance.value) {
+      // 如果实例绑定了套餐，加载套餐信息以检查删除权限
+      if (instance.value.package_id && instance.value.package_id > 0) {
+        try {
+          const pkgResponse = await api.packages.get(instance.value.package_id) as any
+          instancePackage.value = pkgResponse.package || pkgResponse
+        } catch (err) {
+          console.error('Failed to load package:', err)
+          instancePackage.value = null
+        }
+      } else {
+        instancePackage.value = null
+      }
+      // 初始化配额表单
+      instanceQuotaForm.value = {
+        portLimit: (instance.value as any).portLimit ?? null,
+        snapshotLimit: (instance.value as any).snapshotLimit ?? null
+      }
+      // 计算剩余额度（使用后端返回的实时数据）
+      await calculateRemainingQuota()
+      // 检查是否有待处理的转移（只在首次加载时检查，避免频繁请求）
+      // 转移状态变化不频繁，不需要每5秒检查一次
+      if (loading.value) {
+        // 并行执行独立的检查请求，加快首次加载速度
+        await Promise.all([
+          checkPendingTransfer(),
+          checkActiveTask()
+        ])
+        // 实例加载成功后，并行加载统计信息和流量数据
+        if (instance.value.id && isComponentMounted.value) {
+          const loadPromises: Promise<void>[] = []
+          if (isRunning.value) {
+            loadPromises.push(loadStats())
+          }
+          loadPromises.push(loadTrafficData())
+          await Promise.all(loadPromises)
+          
+          // 启动统计信息定时刷新（只有运行时）
+          if (!statsInterval && isRunning.value && isComponentMounted.value) {
+            statsInterval = setInterval(loadStats, 3000)
+          }
+        }
+      } else {
+        // 非首次加载时也更新流量数据（但不需要等待）
+        loadTrafficData().catch(() => {
+          // 静默失败
+        })
+      }
+    } else {
+      // 响应成功但实例为空，跳转到实例列表
+      toast.error(t('instance.detail.notExist'))
+      router.replace(getReturnPath())
+    }
+  } catch (error: any) {
+    console.error('Failed to load instance:', error)
+    // 处理 404 或其他错误，跳转到实例列表
+    const errorMsg = error?.message || t('instance.detail.loadFailed')
+    if (errorMsg.includes('不存在') || errorMsg.includes('404') || errorMsg.includes('无权')) {
+      toast.error(errorMsg)
+      router.replace(getReturnPath())
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadStats(): Promise<void> {
+  // 如果组件已卸载，直接返回
+  if (!isComponentMounted.value) {
+    return
+  }
+  
+  if (!instance.value || statsLoading.value) return
+  
+  // 只有在实例正在运行时才加载统计信息
+  // 停止、重启、创建、启动、停止中等状态都不需要监控
+  const status = instance.value.status?.toLowerCase()
+  if (status !== 'running') {
+    return  // 只有 running 状态才监控统计信息
+  }
+  
+  // 使用实例对象的 ID，而不是从路由参数获取（更可靠）
+  const instanceId = instance.value.id
+  if (!instanceId || instanceId <= 0) {
+    return
+  }
+  
+  // 只在首次加载时显示 loading 状态，后续静默刷新避免闪烁
+  const isInitialLoad = stats.value.memory.limit === 0 && stats.value.disk.limit === 0
+  if (isInitialLoad) {
+    statsLoading.value = true
+  }
+  
+  try {
+    const response = await api.instances.getStats(instanceId)
+    const newStats = (response as { stats?: ResourceStats; status?: string }).stats
+    const newStatus = (response as { stats?: ResourceStats; status?: string }).status
+    
+    if (newStats) {
+      // 确保完整更新stats对象，保持响应式
+      stats.value = {
+        memory: {
+          usage: newStats.memory?.usage ?? 0,
+          limit: newStats.memory?.limit ?? 0,
+          usagePercent: newStats.memory?.usagePercent ?? 0
+        },
+        disk: {
+          usage: newStats.disk?.usage ?? 0,
+          limit: newStats.disk?.limit ?? 0,
+          usagePercent: newStats.disk?.usagePercent ?? 0
+        },
+        network: {
+          bytesReceived: newStats.network?.bytesReceived ?? 0,
+          bytesSent: newStats.network?.bytesSent ?? 0
+        }
+      }
+    }
+    
+    // 检查实例状态是否变化（被动同步更新）
+    if (newStatus && instance.value) {
+      const normalizedStatus = newStatus.toLowerCase()
+      const currentStatus = instance.value.status?.toLowerCase()
+      if (normalizedStatus !== currentStatus) {
+        // 状态变化，立即更新实例状态
+        instance.value.status = normalizedStatus as 'creating' | 'running' | 'stopped' | 'error' | 'deleted'
+        
+        // 如果实例不再运行，停止统计信息轮询
+        if (normalizedStatus !== 'running' && statsInterval) {
+          clearInterval(statsInterval)
+          statsInterval = null
+        }
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load stats:', error)
+    // 失败时保持上一次的值，不做任何改变
+  } finally {
+    if (isInitialLoad) {
+      statsLoading.value = false
+    }
+  }
+}
+
+async function loadTrafficData(): Promise<void> {
+  if (!instance.value || trafficLoading.value) return
+  
+  const instanceId = instance.value.id
+  if (!instanceId || instanceId <= 0) {
+    return
+  }
+  
+  // 只在首次加载时显示 loading 状态，后续静默刷新避免闪烁
+  const isInitialLoad = !trafficData.value
+  if (isInitialLoad) {
+    trafficLoading.value = true
+  }
+  
+  try {
+    const data = await api.traffic.getInstanceTraffic(instanceId)
+    trafficData.value = data
+  } catch (error) {
+    console.error('Failed to load traffic data:', error)
+    // 失败时保持上一次的值，不重置为 null，避免闪烁
+  } finally {
+    if (isInitialLoad) {
+      trafficLoading.value = false
+    }
+  }
+}
+
+// 仅为配额标签页加载快照
+async function loadSnapshotsForQuota(): Promise<void> {
+  if (!instance.value) return
+  try {
+    // 使用实例对象的 ID，而不是从路由参数获取（更可靠）
+    const instanceId = instance.value.id
+    if (!instanceId || instanceId <= 0) {
+      return
+    }
+    const response = await api.instances.getSnapshots(instanceId)
+    snapshots.value = Array.isArray(response) ? response : []
+  } catch (error) {
+    console.error('Failed to load snapshots:', error)
+  }
+}
+
+async function loadAvailableImages(): Promise<void> {
+  try {
+    const hostId = (instance.value as any)?.hostId || (instance.value as any)?.host_id
+    if (!hostId) {
+      toast.error(t('instance.detail.rebuild.noHostInfo'))
+      return
+    }
+
+    // 根据实例类型和内存获取对应的系统镜像列表
+    const instanceType = (instance.value as any)?.instanceType || (instance.value as any)?.instance_type || 'container'
+    const imageType: 'container' | 'vm' = instanceType === 'vm' ? 'vm' : 'container'
+    // 传递实例内存，128MB 只返回 Alpine/Debian
+    const memory = instance.value?.memory
+    
+    const res = await api.images.getSystemImages(imageType, memory, hostId)
+    const images = res.images || []
+    
+    availableImages.value = images.map((img: any) => ({
+      incusAlias: img.remoteAlias,
+      name: img.name,
+      description: null,
+      icon: img.icon || null
+    }))
+  } catch (err: any) {
+    console.error('Failed to load available images:', err)
+    toast.error(t('instance.detail.rebuild.loadImagesFailed') + ': ' + (err?.message || String(err)))
+  }
+}
+
+// 重命名
+function openRenameModal(): void {
+  if (instance.value) {
+    newInstanceName.value = instance.value.name
+    showRenameModal.value = true
+  }
+}
+
+async function doRename(): Promise<void> {
+  if (!instance.value || !newInstanceName.value.trim()) return
+  
+  renameLoading.value = true
+  try {
+    await api.instances.rename(instance.value.id, newInstanceName.value.trim())
+    toast.success(t('instance.renameModal.success'))
+    showRenameModal.value = false
+    await loadInstance()
+  } catch (err: any) {
+    toast.error(`${t('instance.renameModal.failed')}: ${translateError(err)}`)
+  } finally {
+    renameLoading.value = false
+  }
+}
+
+// 复制实例
+async function doClone(): Promise<void> {
+  if (!instance.value) return
+  
+  cloneLoading.value = true
+  try {
+    await api.instances.clone(instance.value.id)
+    toast.success(t('instance.detail.actions.cloneSuccess'))
+    showCloneModal.value = false
+    // 跳转到返回路径，让用户看到新复制的实例
+    router.push(getReturnPath())
+  } catch (err: any) {
+    toast.error(`${t('instance.detail.actions.cloneFailed')}: ${translateError(err)}`)
+  } finally {
+    cloneLoading.value = false
+  }
+}
+
+// 配置编辑
+async function openConfigEditModal(): Promise<void> {
+  if (!instance.value) return
+  
+  // 加载套餐信息（如果实例绑定了套餐）
+  if (instance.value.package_id && instance.value.package_id > 0) {
+    try {
+      const response = await api.packages.get(instance.value.package_id) as any
+      // API 返回 { package: {...} } 格式
+      instancePackage.value = response.package || response
+    } catch (err) {
+      console.error('Failed to load package:', err)
+      instancePackage.value = null
+    }
+  } else {
+    // 如果没有绑定套餐，设置为 null
+    instancePackage.value = null
+  }
+  
+  // 加载用户配额
+  await loadUserQuota()
+  
+  showConfigEditModal.value = true
+}
+
+async function handleConfigEdit(data: { cpu?: number; memory?: number; disk?: number; monthlyTrafficLimit?: string | null }): Promise<void> {
+  if (!instance.value) return
+  
+  configEditLoading.value = true
+  try {
+    await api.instances.updateConfig(instance.value.id, data)
+    toast.success(t('instance.configEdit.success'))
+    showConfigEditModal.value = false
+    // 并行刷新实例信息和用户配额
+    await Promise.all([loadInstance(), loadUserQuota()])
+  } catch (err: any) {
+    toast.error(`${t('instance.configEdit.failed')}: ${translateError(err)}`)
+  } finally {
+    configEditLoading.value = false
+  }
+}
+
+// 打开兑换资源模态框
+function openRedeemModal(): void {
+  redeemCodeInput.value = ''
+  showRedeemModal.value = true
+}
+
+// 兑换系统兑换码到当前实例
+async function handleRedeem(): Promise<void> {
+  if (!instance.value || redeemLoading.value) return
+  const code = redeemCodeInput.value.trim()
+  if (!code) {
+    toast.warning(t('checkin.enterCode'))
+    return
+  }
+  
+  redeemLoading.value = true
+  try {
+    const result = await api.checkin.redeem(code, instance.value.id)
+    // 显示成功提示
+    const typeMap: Record<string, string> = { c: t('checkin.cpu'), r: t('checkin.memory'), d: t('checkin.disk'), t: t('checkin.traffic') }
+    const unitMap: Record<string, string> = { c: '%', r: 'MB', d: 'MB', t: 'GB' }
+    const typeName = typeMap[result.codeType] || result.codeType
+    const unit = unitMap[result.codeType] || ''
+    toast.success(t('checkin.redeemToInstanceSuccess', { type: typeName, value: result.actualAdded, unit, instance: instance.value.name }))
+    
+    showRedeemModal.value = false
+    redeemCodeInput.value = ''
+    // 刷新实例信息
+    await loadInstance()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    redeemLoading.value = false
+  }
+}
+
+// 续费成功处理
+async function handleRenewSuccess(): Promise<void> {
+  toast.success(t('instance.subscription.renewSuccess'))
+  await loadInstance()
+}
+
+// 绑定 AFF 优惠码成功处理
+async function handleApplyAffSuccess(): Promise<void> {
+  toast.success(t('instance.subscription.applyAffSuccess'))
+  await loadInstance()
+}
+
+// 变更方案成功处理
+async function handleChangePlanSuccess(): Promise<void> {
+  toast.success(t('billing.changePlanSuccess'))
+  await loadInstance()
+}
+
+// 设置自动续费
+async function handleSetAutoRenew(autoRenew: boolean): Promise<void> {
+  if (!instance.value) return
+  autoRenewLoading.value = true
+  try {
+    await api.billing.setAutoRenew(instance.value.id, autoRenew)
+    toast.success(autoRenew 
+      ? t('instance.subscription.autoRenewEnabled') 
+      : t('instance.subscription.autoRenewDisabled')
+    )
+    await loadInstance()
+    showAutoRenewModal.value = false
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    autoRenewLoading.value = false
+  }
+}
+
+// 加载销毁信息
+async function loadDestroyInfo(): Promise<void> {
+  if (!instance.value) return
+  destroyInfo.value = null
+  try {
+    destroyInfo.value = await api.billing.getDestroyInfo(instance.value.id) as any
+  } catch {
+    toast.error(t('instance.destroy.loadFailed'))
+    showDestroyModal.value = false
+  }
+}
+
+// 执行销毁
+async function handleDestroy(): Promise<void> {
+  if (!instance.value || !destroyInfo.value?.canDestroy) return
+  destroyLoading.value = true
+  try {
+    const result = await api.billing.destroyInstance(instance.value.id)
+    if (result.isFreeInstance) {
+      toast.success(t('instance.destroy.success'))
+    } else {
+      toast.success(t('instance.destroy.successWithRefund', { amount: result.refundAmount.toFixed(2) }))
+    }
+    showDestroyModal.value = false
+    // 跳转到实例列表
+    router.push({ name: 'instances' })
+  } catch (err) {
+    const apiErr = err as { code?: string }
+    if (apiErr.code === 'INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED') {
+      await loadDestroyInfo()
+    }
+    toast.error(translateError(err))
+  } finally {
+    destroyLoading.value = false
+  }
+}
+
+// 监听销毁弹窗打开，加载销毁信息
+watch(showDestroyModal, async (visible) => {
+  if (visible) {
+    await loadDestroyInfo()
+  } else {
+    destroyInfo.value = null
+  }
+})
+
+// 异常实例快速销毁（免手续费）
+async function handleErrorDestroy(): Promise<void> {
+  if (!instance.value) return
+  if (!confirm(t('instance.errorBanner.confirmDestroy'))) return
+  errorDestroyLoading.value = true
+  try {
+    const result = await api.billing.destroyInstance(instance.value.id, { feeWaiver: 'error' })
+    if (result.isFreeInstance) {
+      toast.success(t('instance.destroy.success'))
+    } else {
+      toast.success(t('instance.destroy.successWithRefund', { amount: result.refundAmount.toFixed(2) }))
+    }
+    router.push({ name: 'instances' })
+  } catch (err) {
+    toast.error(translateError(err))
+  } finally {
+    errorDestroyLoading.value = false
+  }
+}
+
+// 任务状态轮询
+const activeTask = ref<{
+  id: number
+  taskType: string
+  status: string
+  progress?: string | null
+  error?: string | null
+  queuePosition: number
+} | null>(null)
+let taskPollingInterval: ReturnType<typeof setInterval> | null = null
+
+// 是否禁用所有操作按钮（有任务进行中、有待处理转移或实例被封停时）
+// 注意：封停状态下，实例所有者禁止所有操作，仅宿主机所有者/管理员可以解封
+const isOperationDisabled = computed<boolean>(() => {
+  // 封停状态下，实例所有者禁止操作（仅节点所有者可解封）
+  // isHostOwner = true 表示当前用户是节点所有者
+  const inst = instance.value as { isHostOwner?: boolean } | null
+  const isHostOwner = inst?.isHostOwner === true
+  if (isSuspended.value && !isHostOwner) {
+    return true
+  }
+  return !!actionLoading.value || !!activeTask.value || hasPendingTransfer.value
+})
+
+// 操作
+type InstanceAction = 'start' | 'stop' | 'restart' | 'delete' | 'clone'
+
+// 开始任务轮询
+// 注：_taskId 参数保留用于未来扩展（如按 taskId 指定轮询）
+function startTaskPolling(_taskId: number): void {
+  // 清除旧的轮询
+  if (taskPollingInterval) {
+    clearInterval(taskPollingInterval)
+  }
+  
+  const pollTask = async (): Promise<void> => {
+    if (!instance.value || !isComponentMounted.value) {
+      stopTaskPolling()
+      return
+    }
+    
+    try {
+      const response = await api.instances.getActiveTask(instance.value.id)
+      activeTask.value = response.task
+      
+      // 如果任务已完成或失败，停止轮询并刷新实例
+      if (!response.task || response.task.status === 'COMPLETED' || response.task.status === 'FAILED') {
+        stopTaskPolling()
+        if (response.task?.status === 'FAILED' && response.task.error) {
+          toast.error(`${t('instance.detail.actions.actionFailed')}: ${response.task.error}`)
+        }
+        await loadInstance()
+      }
+    } catch (err) {
+      console.error('Failed to poll task status:', err)
+      // 出错时也停止轮询
+      stopTaskPolling()
+    }
+  }
+  
+  // 立即执行一次
+  pollTask()
+  // 每2秒轮询一次
+  taskPollingInterval = setInterval(pollTask, 2000)
+}
+
+function stopTaskPolling(): void {
+  if (taskPollingInterval) {
+    clearInterval(taskPollingInterval)
+    taskPollingInterval = null
+  }
+  activeTask.value = null
+}
+
+async function handleAction(action: InstanceAction): Promise<void> {
+  if (!instance.value) return
+  actionLoading.value = action
+  try {
+    if (action === 'start') {
+      const response = await api.instances.start(instance.value.id)
+      toast.success(t('instance.detail.actions.taskQueued'))
+      // 开始轮询任务状态
+      startTaskPolling(response.taskId)
+    }
+    else if (action === 'stop') {
+      const response = await api.instances.stop(instance.value.id)
+      toast.success(t('instance.detail.actions.taskQueued'))
+      startTaskPolling(response.taskId)
+    }
+    else if (action === 'restart') {
+      const response = await api.instances.restart(instance.value.id)
+      toast.success(t('instance.detail.actions.taskQueued'))
+      startTaskPolling(response.taskId)
+    }
+    else if (action === 'delete') {
+      if (!confirm(t('instance.detail.actions.confirmDelete', { name: instance.value.name }))) {
+        actionLoading.value = ''
+        return
+      }
+      
+      await api.instances.delete(instance.value.id)
+      toast.success(t('instance.detail.actions.deleted'))
+      router.push(getReturnPath())
+      return
+    }
+    else if (action === 'clone') {
+      // 显示确认模态框
+      showCloneModal.value = true
+      actionLoading.value = ''
+      return
+    }
+  } catch (error: any) {
+    // 检查是否有活跃任务
+    if (error?.code === 'TASK_IN_PROGRESS') {
+      toast.warning(t('instance.detail.actions.taskInProgress'))
+      // 开始轮询现有任务
+      if (error?.taskId) {
+        startTaskPolling(error.taskId)
+      }
+      return
+    }
+    toast.error(`${t('instance.detail.actions.actionFailed')}: ${translateError(error)}`)
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 重建系统
+// 点击重建按钮时的处理：运行中提示需要先关机
+function handleRebuildClick(): void {
+  if (isRunning.value) {
+    toast.warning(t('instance.detail.actions.stopRequired'))
+    return
+  }
+  openRebuildModal()
+}
+
+async function openRebuildModal(): Promise<void> {
+  await Promise.all([loadAvailableImages(), loadSshKeys()])
+  showRebuildModal.value = true
+}
+
+async function loadSshKeys(): Promise<void> {
+  try {
+    const response = await api.sshKeys.list()
+    const keys = response.keys || []
+    sshKeys.value = keys.map((k) => ({ id: k.id, name: k.name }))
+  } catch (err: any) {
+    console.error('Failed to load SSH keys:', err)
+    toast.error(t('instance.detail.rebuild.loadKeysFailed'))
+  }
+}
+
+async function doRebuild(data: { image: string; sshKeyId: number; customInitCommandIds?: number[] }): Promise<void> {
+  if (!data.image || !data.sshKeyId || !instance.value) {
+    toast.error(t('instance.detail.actions.selectImageAndKey'))
+    return
+  }
+  
+  rebuildLoading.value = true
+  try {
+    const response = await api.instances.rebuild(instance.value.id, {
+      image: data.image,
+      sshKeyId: data.sshKeyId,
+      customInitCommandIds: data.customInitCommandIds
+    })
+    toast.success(t('instance.detail.actions.taskQueued'))
+    showRebuildModal.value = false
+    startTaskPolling(response.taskId)
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    rebuildLoading.value = false
+  }
+}
+
+async function doRecreate(data: { image: string; sshKeyId: number; customInitCommandIds?: number[] }): Promise<void> {
+  if (!data.image || !data.sshKeyId || !instance.value) {
+    toast.error(t('instance.detail.actions.selectImageAndKey'))
+    return
+  }
+  
+  recreateLoading.value = true
+  try {
+    const response = await api.instances.recreate(instance.value.id, {
+      image: data.image,
+      sshKeyId: data.sshKeyId,
+      customInitCommandIds: data.customInitCommandIds
+    })
+    toast.success(t('instance.detail.actions.taskQueued'))
+    showRecreateModal.value = false
+    startTaskPolling(response.taskId)
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    recreateLoading.value = false
+  }
+}
+
+// 端口映射 - addPort 函数已移至 handleAddPort
+
+async function deletePort(portId: number): Promise<void> {
+  if (!instance.value || !confirm(t('instance.detail.port.confirmDelete'))) return
+  
+  try {
+    await api.instances.deletePort(instance.value.id, portId)
+    // 立即从本地数据移除，提供即时反馈
+    if ((instance.value as any).port_mappings) {
+      (instance.value as any).port_mappings = (instance.value as any).port_mappings.filter(
+        (m: any) => m.id !== portId
+      )
+    }
+    toast.success(t('instance.detail.port.deleted'))
+  } catch (err: any) {
+    toast.error(t('instance.detail.port.deleteFailed') + ': ' + translateError(err))
+    // 失败时重新加载以恢复正确状态
+    await loadInstance()
+  }
+}
+
+// 批量删除端口映射
+const deletePortsLoading = ref<boolean>(false)
+
+async function deletePorts(portIds: number[]): Promise<void> {
+  if (!instance.value || portIds.length === 0) return
+  if (!confirm(t('instance.detail.port.confirmBatchDelete', { count: portIds.length }))) return
+  
+  deletePortsLoading.value = true
+  let successCount = 0
+  let failCount = 0
+  
+  try {
+    for (const portId of portIds) {
+      try {
+        await api.instances.deletePort(instance.value.id, portId)
+        // 立即从本地数据移除
+        if ((instance.value as any).port_mappings) {
+          (instance.value as any).port_mappings = (instance.value as any).port_mappings.filter(
+            (m: any) => m.id !== portId
+          )
+        }
+        successCount++
+      } catch {
+        failCount++
+      }
+    }
+    
+    if (failCount === 0) {
+      toast.success(t('instance.detail.port.batchDeleted', { count: successCount }))
+    } else {
+      toast.warning(t('instance.detail.port.batchDeletePartial', { success: successCount, fail: failCount }))
+      // 部分失败时重新加载以确保状态一致
+      await loadInstance()
+    }
+  } finally {
+    deletePortsLoading.value = false
+  }
+}
+
+// 快照操作现在由 SnapshotManager 组件处理
+
+// 封停/解封操作（仅宿主机所有者可操作）
+function handleSuspend(): void {
+  if (!instance.value || !canSuspend.value) return
+  suspendReason.value = ''
+  showSuspendModal.value = true
+}
+
+async function confirmSuspend(): Promise<void> {
+  if (!instance.value || !canSuspend.value) return
+  
+  suspendLoading.value = true
+  try {
+    await api.instances.suspend(instance.value.id, suspendReason.value.trim() || undefined)
+    toast.success(t('instance.detail.actions.suspendSuccess'))
+    showSuspendModal.value = false
+    suspendReason.value = ''
+    await loadInstance()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    suspendLoading.value = false
+  }
+}
+
+async function handleUnsuspend(): Promise<void> {
+  if (!instance.value || !canSuspend.value) return
+  
+  if (!confirm(t('instance.detail.actions.confirmUnsuspend', { name: instance.value.name }))) {
+    return
+  }
+  
+  suspendLoading.value = true
+  try {
+    await api.instances.unsuspend(instance.value.id)
+    toast.success(t('instance.detail.actions.unsuspendSuccess'))
+    await loadInstance()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    suspendLoading.value = false
+  }
+}
+
+// 同步实例状态
+async function handleSyncStatus(): Promise<void> {
+  if (!instance.value) return
+  
+  syncStatusLoading.value = true
+  try {
+    const result = await api.instances.syncStatus(instance.value.id)
+    const messages: string[] = []
+
+    // 状态变更
+    if (result.statusChanged) {
+      messages.push(t('instance.detail.actions.syncStatusChanged', {
+        from: result.from,
+        to: result.to
+      }))
+    }
+
+    // IPv4 变更
+    if (result.ipv4Changed) {
+      messages.push(t('instance.detail.actions.syncIpv4Changed', {
+        from: result.oldIpv4 || 'N/A',
+        to: result.newIpv4 || 'N/A'
+      }))
+      // 如果有反代站点更新
+      if (result.proxySitesUpdated && result.proxySitesUpdated > 0) {
+        messages.push(t('instance.detail.actions.syncProxySitesUpdated', {
+          count: result.proxySitesUpdated
+        }))
+      }
+    }
+
+    if (messages.length > 0) {
+      toast.success(messages.join('\n'))
+      await loadInstance()
+    } else {
+      toast.info(t('instance.detail.actions.syncStatusNoChange'))
+    }
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    syncStatusLoading.value = false
+  }
+}
+
+// 重新分配 IPv6
+async function handleReassignIpv6(): Promise<void> {
+  if (!instance.value) return
+  
+  // 检查网络模式
+  if (instance.value.network_mode !== 'nat_ipv6') {
+    toast.error(t('instance.detail.network.reassignIpv6NotSupported'))
+    return
+  }
+  
+  // 检查实例状态
+  if (instance.value.status !== 'stopped') {
+    toast.warning(t('instance.detail.network.reassignIpv6StopRequired'))
+    return
+  }
+  
+  // 确认操作
+  if (!confirm(t('instance.detail.network.reassignIpv6Confirm') + '\n\n' + t('instance.detail.network.reassignIpv6ConfirmHint'))) {
+    return
+  }
+  
+  reassignIpv6Loading.value = true
+  try {
+    const result = await api.instances.reassignIpv6(instance.value.id)
+    console.log('IPv6 reassigned:', result.oldIpv6, '->', result.newIpv6)
+    toast.success(t('instance.detail.network.reassignIpv6Success'))
+    // 重新加载实例以获取新的 IPv6
+    await loadInstance()
+  } catch (err: any) {
+    toast.error(`${t('instance.detail.network.reassignIpv6Failed')}: ${translateError(err)}`)
+  } finally {
+    reassignIpv6Loading.value = false
+  }
+}
+
+
+// 加载用户配额
+async function loadUserQuota(): Promise<void> {
+  if (!instance.value) return
+  
+  try {
+    // 先尝试获取当前用户信息
+    const meResponse = await api.auth.me()
+    const currentUser = (meResponse as { user?: { id: number; role: string; quota?: UserQuota } }).user
+    
+    // 获取实例的用户ID（可能是userId或user_id）
+    const instanceUserId = (instance.value as any).userId || instance.value.user_id
+    
+    // 如果是管理员或者是自己的实例，可以获取配额
+    if (currentUser && (currentUser.role === 'admin' || currentUser.id === instanceUserId)) {
+      if (currentUser.id === instanceUserId) {
+        // 自己的实例，使用当前用户配额
+        userQuota.value = currentUser.quota || null
+      } else {
+        // 管理员查看其他用户的实例，通过users API获取
+        const userResponse = await api.users.get(instanceUserId)
+        userQuota.value = ((userResponse as { user?: { quota?: UserQuota } }).user?.quota) || null
+      }
+      
+      if (userQuota.value) {
+        await calculateRemainingQuota()
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load user quota:', err)
+  }
+}
+
+// 检查是否有待处理的转移
+// 注意：转移状态变化不频繁，不需要频繁检查
+// 只在页面首次加载时检查，或在用户执行相关操作时检查
+async function checkPendingTransfer(): Promise<void> {
+  if (!instance.value) return
+  
+  try {
+    // 检查发送的转移
+    const sentResponse = await api.transfers.list('sent', { status: 'pending', pageSize: 100 })
+    const hasSentPending = sentResponse.transfers.some(t => t.instanceId === instance.value?.id)
+    
+    // 检查接收的转移
+    const receivedResponse = await api.transfers.list('received', { status: 'pending', pageSize: 100 })
+    const hasReceivedPending = receivedResponse.transfers.some(t => t.instanceId === instance.value?.id)
+    
+    hasPendingTransfer.value = hasSentPending || hasReceivedPending
+  } catch (err) {
+    console.error('Failed to check pending transfer:', err)
+    hasPendingTransfer.value = false
+  }
+}
+
+// 检查是否有活跃的实例操作任务
+async function checkActiveTask(): Promise<void> {
+  if (!instance.value) return
+  
+  try {
+    const response = await api.instances.getActiveTask(instance.value.id)
+    if (response.task && (response.task.status === 'PENDING' || response.task.status === 'PROCESSING')) {
+      activeTask.value = response.task
+      // 开始轮询
+      startTaskPolling(response.task.id)
+    }
+  } catch (err) {
+    console.error('Failed to check active task:', err)
+  }
+}
+
+// 点击转移按钮时的处理：运行中提示需要先关机
+function handleTransferBtnClick(): void {
+  if (isRunning.value) {
+    toast.warning(t('instance.detail.actions.stopRequired'))
+    return
+  }
+  handleTransferClick()
+}
+
+// 处理转移按钮点击：在打开转移弹窗前检查转移状态
+async function handleTransferClick(): Promise<void> {
+  // 在执行转移操作前，先检查是否有待处理的转移
+  await checkPendingTransfer()
+  if (!hasPendingTransfer.value) {
+    showTransferModal.value = true
+  }
+}
+
+// 计算剩余额度
+async function calculateRemainingQuota(): Promise<void> {
+  if (!instance.value) return
+  
+  try {
+    // 优先使用后端返回的实时剩余额度
+    if ((instance.value as any).remainingQuota) {
+      remainingQuota.value = {
+        port: (instance.value as any).remainingQuota.port || 0,
+        snapshot: (instance.value as any).remainingQuota.snapshot || 0
+      }
+      return
+    }
+    
+    // 新配额系统：端口/快照配额是实例级别的（从套餐包继承）
+    // 直接从实例数据获取配额和使用量
+    const portLimit = (instance.value as any).portLimit || 0
+    const portMappings = (instance.value as any).port_mappings || []
+    const portUsed = portMappings.length
+    
+    const snapshotLimit = (instance.value as any).snapshotLimit || 0
+    const snapshots = (instance.value as any).snapshots || []
+    const snapshotUsed = snapshots.length
+    
+    remainingQuota.value = {
+      port: Math.max(0, portLimit - portUsed),
+      snapshot: Math.max(0, snapshotLimit - snapshotUsed)
+    }
+  } catch (err) {
+    console.error('Failed to calculate remaining quota:', err)
+  }
+}
+
+// 实例配额
+async function saveInstanceQuota(): Promise<void> {
+  if (!instance.value) return
+  quotaSaving.value = true
+  quotaError.value = ''
+  
+  try {
+    // 处理输入值：null、undefined、NaN都转为null
+    const portLimit = (instanceQuotaForm.value.portLimit === null || 
+                       instanceQuotaForm.value.portLimit === undefined ||
+                       isNaN(Number(instanceQuotaForm.value.portLimit)))
+                      ? null 
+                      : Number(instanceQuotaForm.value.portLimit)
+    
+    const snapshotLimit = (instanceQuotaForm.value.snapshotLimit === null || 
+                           instanceQuotaForm.value.snapshotLimit === undefined ||
+                           isNaN(Number(instanceQuotaForm.value.snapshotLimit)))
+                          ? null 
+                          : Number(instanceQuotaForm.value.snapshotLimit)
+    
+    // 验证：不能小于当前已使用量
+    if (portLimit !== null && portLimit < portMappingsCount.value) {
+      quotaError.value = t('instance.detail.quota.portExceedUsed', { used: portMappingsCount.value, input: portLimit })
+      quotaSaving.value = false
+      return
+    }
+    
+    if (snapshotLimit !== null && snapshotLimit < snapshots.value.length) {
+      quotaError.value = t('instance.detail.quota.snapshotExceedUsed', { used: snapshots.value.length, input: snapshotLimit })
+      quotaSaving.value = false
+      return
+    }
+    
+    // 验证：端口数、快照数必须在 1-1000 范围内（null 表示不限制）
+    if (portLimit !== null && (portLimit < 1 || portLimit > 1000)) {
+      quotaError.value = t('instance.detail.quota.portOutOfRange')
+      quotaSaving.value = false
+      return
+    }
+    
+    if (snapshotLimit !== null && (snapshotLimit < 1 || snapshotLimit > 1000)) {
+      quotaError.value = t('instance.detail.quota.snapshotOutOfRange')
+      quotaSaving.value = false
+      return
+    }
+    
+    const payload: UpdateInstanceRequest = {
+      portLimit: portLimit ?? undefined,
+      snapshotLimit: snapshotLimit ?? undefined
+    }
+    
+    // 使用实例对象的 ID，而不是从路由参数获取（更可靠）
+    if (!instance.value || !instance.value.id) {
+      quotaError.value = t('instance.detail.invalidId')
+      quotaSaving.value = false
+      return
+    }
+    const instanceId = instance.value.id
+    await api.instances.updateQuota(instanceId, payload)
+    toast.success(t('instance.detail.quota.saved'))
+    
+    // 清除错误信息
+    quotaError.value = ''
+    
+    // 并行重新加载所有相关数据
+    await Promise.all([
+      loadInstance(),
+      loadSnapshotsForQuota(),
+      loadUserQuota()
+    ])
+  } catch (err: any) {
+    quotaError.value = translateError(err)
+    toast.error(t('instance.detail.quota.saveFailed') + ': ' + translateError(err))
+  } finally {
+    quotaSaving.value = false
+  }
+}
+
+// 实用函数
+async function copyToClipboard(text: string, key?: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text)
+    if (key) {
+      copied.value = key
+      setTimeout(() => copied.value = '', 2000)
+    } else {
+      toast.success(t('instance.detail.copy.success'))
+    }
+  } catch {
+    toast.error(t('instance.detail.copy.failed'))
+  }
+}
+
+async function handleAddPort(form: { 
+  protocol: 'tcp' | 'udp' | 'both'
+  privatePort: string
+  publicPort: string
+  remark: string
+  isRange?: boolean
+  privatePortStart?: number
+  privatePortEnd?: number
+  publicPortStart?: number
+  publicPortEnd?: number
+}): Promise<void> {
+  if (!form.privatePort || !instance.value) {
+    portError.value = t('instance.detail.port.fillPrivatePort')
+    return
+  }
+  
+  portLoading.value = true
+  portError.value = ''
+  
+  try {
+    // 判断是否为范围输入
+    if (form.isRange && form.privatePortStart !== undefined && form.privatePortEnd !== undefined) {
+      // 批量端口映射
+      const batchData: {
+        protocol: 'tcp' | 'udp' | 'both'
+        privatePortStart: number
+        privatePortEnd: number
+        publicPortStart?: number
+        publicPortEnd?: number
+        remark?: string
+      } = {
+        protocol: form.protocol,
+        privatePortStart: form.privatePortStart,
+        privatePortEnd: form.privatePortEnd
+      }
+      
+      if (form.publicPortStart !== undefined && form.publicPortEnd !== undefined) {
+        batchData.publicPortStart = form.publicPortStart
+        batchData.publicPortEnd = form.publicPortEnd
+      }
+      
+      if (form.remark?.trim()) {
+        batchData.remark = form.remark.trim()
+      }
+      
+      const response = await api.instances.addPortBatch(instance.value.id, batchData)
+      
+      // 检查是否有冲突
+      if ('conflicts' in response && response.conflicts) {
+        // 保存原始数据用于重新提交
+        pendingBatchPortData.value = batchData
+        portConflicts.value = response.conflicts
+        showPortConflictModal.value = true
+        showAddPortModal.value = false
+        return
+      }
+      
+      // 成功
+      if ('mappings' in response && response.mappings) {
+        showAddPortModal.value = false
+        toast.success(t('instance.detail.port.batchAdded', { count: response.count }))
+        // 重新加载实例数据
+        loadInstance().catch(() => {})
+      }
+    } else {
+      // 单个端口映射（原有逻辑）
+      if (form.protocol === 'both') {
+        let sharedPublicPort: number | undefined = form.publicPort ? parseInt(form.publicPort) : undefined
+        
+        // 先创建 TCP 映射
+        const tcpPayload: { protocol: 'tcp' | 'udp'; privatePort: number; publicPort?: number; remark?: string } = {
+          protocol: 'tcp',
+          privatePort: parseInt(form.privatePort)
+        }
+        if (sharedPublicPort) {
+          tcpPayload.publicPort = sharedPublicPort
+        }
+        if (form.remark?.trim()) {
+          tcpPayload.remark = form.remark.trim()
+        }
+        
+        const tcpResponse = await api.instances.addPort(instance.value!.id, tcpPayload)
+        // @ts-ignore - API response structure
+        const tcpMapping = tcpResponse.mapping
+        if (tcpMapping && instance.value) {
+          if (!(instance.value as any).port_mappings) {
+            (instance.value as any).port_mappings = []
+          }
+          (instance.value as any).port_mappings.push({
+            id: tcpMapping.id,
+            protocol: tcpMapping.protocol,
+            publicPort: tcpMapping.publicPort,
+            privatePort: tcpMapping.privatePort,
+            remark: tcpMapping.remark
+          })
+          // 如果用户没有指定端口，使用 TCP 分配到的端口作为 UDP 的端口
+          if (!sharedPublicPort) {
+            sharedPublicPort = tcpMapping.publicPort
+          }
+        }
+        
+        // 再创建 UDP 映射，使用相同的公网端口
+        const udpPayload: { protocol: 'tcp' | 'udp'; privatePort: number; publicPort?: number; remark?: string } = {
+          protocol: 'udp',
+          privatePort: parseInt(form.privatePort),
+          publicPort: sharedPublicPort
+        }
+        if (form.remark?.trim()) {
+          udpPayload.remark = form.remark.trim()
+        }
+        
+        const udpResponse = await api.instances.addPort(instance.value!.id, udpPayload)
+        // @ts-ignore - API response structure
+        const udpMapping = udpResponse.mapping
+        if (udpMapping && instance.value) {
+          (instance.value as any).port_mappings.push({
+            id: udpMapping.id,
+            protocol: udpMapping.protocol,
+            publicPort: udpMapping.publicPort,
+            privatePort: udpMapping.privatePort,
+            remark: udpMapping.remark
+          })
+        }
+        
+        showAddPortModal.value = false
+        toast.success(t('instance.detail.port.addedBoth'))
+      } else {
+        // 单协议：原逻辑
+        const payload: { protocol: 'tcp' | 'udp'; privatePort: number; publicPort?: number; remark?: string } = {
+          protocol: form.protocol,
+          privatePort: parseInt(form.privatePort)
+        }
+        
+        if (form.publicPort) {
+          payload.publicPort = parseInt(form.publicPort)
+        }
+        
+        if (form.remark?.trim()) {
+          payload.remark = form.remark.trim()
+        }
+        
+        const response = await api.instances.addPort(instance.value.id, payload)
+        // @ts-ignore - API response structure
+        const newMapping = response.mapping
+        if (newMapping && instance.value) {
+          if (!(instance.value as any).port_mappings) {
+            (instance.value as any).port_mappings = []
+          }
+          (instance.value as any).port_mappings.push({
+            id: newMapping.id,
+            protocol: newMapping.protocol,
+            publicPort: newMapping.publicPort,
+            privatePort: newMapping.privatePort,
+            remark: newMapping.remark
+          })
+        }
+        showAddPortModal.value = false
+        toast.success(t('instance.detail.port.added'))
+      }
+      // 后台重新加载以确保数据同步
+      loadInstance().catch(() => {})
+    }
+  } catch (err: any) {
+    // 检查是否是端口冲突错误，如果是则显示冲突弹窗
+    if ((err?.error === 'PORT_CONFLICT' || err?.message === 'PORT_CONFLICT') && err?.conflicts) {
+      // 保存原始数据用于重新提交
+      if (form.isRange && form.privatePortStart !== undefined && form.privatePortEnd !== undefined) {
+        pendingBatchPortData.value = {
+          protocol: form.protocol,
+          privatePortStart: form.privatePortStart,
+          privatePortEnd: form.privatePortEnd,
+          publicPortStart: form.publicPortStart,
+          publicPortEnd: form.publicPortEnd,
+          remark: form.remark?.trim() || undefined
+        }
+      }
+      portConflicts.value = err.conflicts
+      showPortConflictModal.value = true
+      showAddPortModal.value = false
+      return
+    }
+    portError.value = err?.message || String(err)
+  } finally {
+    portLoading.value = false
+  }
+}
+
+// 端口冲突解决后重新提交
+async function handlePortConflictConfirm(resolvedPorts: Array<{ original: number; resolved: number }>): Promise<void> {
+  if (!instance.value || !pendingBatchPortData.value) return
+  
+  portLoading.value = true
+  
+  try {
+    const data = pendingBatchPortData.value
+    const privatePortCount = data.privatePortEnd - data.privatePortStart + 1
+    
+    // 构建新的端口映射列表
+    const portMappings: Array<{ privatePort: number; publicPort: number }> = []
+    
+    // 获取原始的公网端口列表
+    const originalPublicPorts: number[] = []
+    if (data.publicPortStart !== undefined && data.publicPortEnd !== undefined) {
+      for (let i = 0; i < privatePortCount; i++) {
+        originalPublicPorts.push(data.publicPortStart + i)
+      }
+    }
+    
+    // 替换冲突的端口
+    const resolvedMap = new Map(resolvedPorts.map(r => [r.original, r.resolved]))
+    
+    for (let i = 0; i < privatePortCount; i++) {
+      const privatePort = data.privatePortStart + i
+      const originalPublic = originalPublicPorts[i]
+      const resolvedPublic = resolvedMap.get(originalPublic) ?? originalPublic
+      
+      portMappings.push({
+        privatePort,
+        publicPort: resolvedPublic
+      })
+    }
+    
+    // 重新提交，带上修改后的端口映射
+    const response = await api.instances.addPortBatch(instance.value.id, {
+      protocol: data.protocol,
+      privatePortStart: data.privatePortStart,
+      privatePortEnd: data.privatePortEnd,
+      remark: data.remark,
+      portMappings
+    })
+    
+    if ('mappings' in response && response.mappings) {
+      showPortConflictModal.value = false
+      pendingBatchPortData.value = null
+      portConflicts.value = []
+      toast.success(t('instance.detail.port.batchAdded', { count: response.count }))
+      loadInstance().catch(() => {})
+    } else if ('conflicts' in response && response.conflicts) {
+      // 仍有冲突
+      portConflicts.value = response.conflicts
+      toast.error(t('instance.detail.port.stillConflict'))
+    }
+  } catch (err: any) {
+    toast.error(err?.message || String(err))
+  } finally {
+    portLoading.value = false
+  }
+}
+
+function handlePortConflictCancel(): void {
+  showPortConflictModal.value = false
+  pendingBatchPortData.value = null
+  portConflicts.value = []
+}
+
+async function togglePasswordVisibility(instanceId: number): Promise<void> {
+  const isCurrentlyVisible = showPassword.value[instanceId]
+  
+  if (!isCurrentlyVisible && !instancePassword.value[instanceId]) {
+    // 如果密码未加载，先加载密码
+    try {
+      const response = await api.instances.getPassword(instanceId)
+      instancePassword.value[instanceId] = (response as { rootPassword?: string | null }).rootPassword || null
+    } catch (error: any) {
+      toast.error(`${t('instance.detail.password.loadFailed')}: ${translateError(error)}`)
+      return
+    }
+  }
+  
+  showPassword.value[instanceId] = !showPassword.value[instanceId]
+}
+
+// 计算剩余天数（向上取整，与后端保持一致）
+function getRemainingDays(expiresAt: string | Date | null): number {
+  if (!expiresAt) return 0
+  const now = new Date()
+  const expires = new Date(expiresAt)
+  if (Number.isNaN(expires.getTime())) return 0
+  const diff = expires.getTime() - now.getTime()
+  return Math.max(0, Math.ceil(diff / (1000 * 60 * 60 * 24)))
+}
+
+function getRemainingDaysDisplay(days: number, expiresAt: string | Date | null): { text: string; className: string } {
+  if (!expiresAt || Number.isNaN(new Date(expiresAt).getTime())) {
+    return {
+      text: t('instance.freeInstanceLabel'),
+      className: themeStore.isDark ? 'text-green-400' : 'text-green-600'
+    }
+  }
+
+  if (days <= 0) {
+    return {
+      text: t('instance.expiredLabel'),
+      className: themeStore.isDark ? 'text-red-400' : 'text-red-600'
+    }
+  }
+
+  if (days <= 3) {
+    return {
+      text: `${days} ${t('common.days')}`,
+      className: themeStore.isDark ? 'text-red-400' : 'text-red-600'
+    }
+  }
+
+  if (days <= 7) {
+    return {
+      text: `${days} ${t('common.days')}`,
+      className: themeStore.isDark ? 'text-yellow-400' : 'text-yellow-600'
+    }
+  }
+
+  return {
+    text: `${days} ${t('common.days')}`,
+    className: themeStore.isDark ? 'text-green-400' : 'text-green-600'
+  }
+}
+
+// 获取续费价格（应用 AFF 折扣后的实际价格）
+// 优先使用实例专属价格 billingPrice，如果没有则使用方案价格 planPrice
+function getRenewPrice(inst: InstanceWithDetails | null): number {
+  if (!inst) return 0
+  const instAny = inst as any
+  // 优先使用实例专属价格（管理员设置的价格）
+  const originalPrice = instAny.billingPrice ?? instAny.planPrice
+  if (originalPrice !== undefined && originalPrice !== null) {
+    // 如果有 AFF 折扣率，应用折扣
+    if (instAny.affDiscountRate && instAny.affDiscountRate > 0) {
+      const discountAmount = originalPrice * instAny.affDiscountRate
+      return Math.round((originalPrice - discountAmount) * 100) / 100
+    }
+    return originalPrice
+  }
+  return 0
+}
+
+// 检查实例是否有 AFF 折扣
+function hasAffDiscount(inst: InstanceWithDetails | null): boolean {
+  if (!inst) return false
+  const instAny = inst as any
+  return instAny.affDiscountRate && instAny.affDiscountRate > 0
+}
+
+function hasAffBinding(inst: InstanceWithDetails | null): boolean {
+  if (!inst) return false
+  const instAny = inst as any
+  return instAny.hasAffBinding === true || hasAffDiscount(inst)
+}
+
+// 获取 AFF 折扣百分比文本
+function getAffDiscountText(inst: InstanceWithDetails | null): string {
+  if (!inst) return ''
+  const instAny = inst as any
+  if (instAny.affDiscountRate && instAny.affDiscountRate > 0) {
+    return `-${(instAny.affDiscountRate * 100).toFixed(0)}%`
+  }
+  return ''
+}
+
+function isHostedInstanceForAff(inst: InstanceWithDetails | null): boolean {
+  if (!inst) return false
+  const instAny = inst as any
+  const hostName = instAny.host?.name || ''
+  return instAny.isHostedInstance === true || hostName.toLowerCase().startsWith('peer')
+}
+
+function canApplyAffCode(inst: InstanceWithDetails | null): boolean {
+  if (!inst || isHostOwnerOnly.value) return false
+  const instAny = inst as any
+  return Boolean(instAny.packagePlanId && instAny.expires_at)
+    && !hasAffBinding(inst)
+    && !isHostedInstanceForAff(inst)
+}
+
+// 获取计费周期文本
+function getBillingCycleText(cycle: number | null | undefined): string {
+  if (!cycle) return '-'
+  if (configStore.freeSiteMode) return getFreeSiteBillingCycleLabel(cycle)
+  switch (cycle) {
+    case 1: return t('instance.subscription.monthly')
+    case 3: return t('instance.subscription.quarterly')
+    case 6: return t('instance.subscription.semiAnnual')
+    case 12: return t('instance.subscription.annual')
+    default: return `${cycle} ${t('instance.subscription.months')}`
+  }
+}
+
+// 获取计费周期简称（用于价格显示）
+function getBillingCycleShort(cycle: number | null | undefined): string {
+  if (!cycle) return ''
+  if (configStore.freeSiteMode) return getFreeSiteBillingCycleShort(cycle)
+  switch (cycle) {
+    case 1: return t('instance.subscription.perMonth')
+    case 3: return t('instance.subscription.perQuarter')
+    case 6: return t('instance.subscription.perHalfYear')
+    case 12: return t('instance.subscription.perYear')
+    default: return `/${cycle}${t('instance.subscription.months')}`
+  }
+}
+
+function handleInstanceBadgeUpdated(badgeId: string | null): void {
+  if (!instance.value) return
+  instance.value.iconBadgeId = badgeId
+}
+
+function formatShortDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '-'
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 格式化函数现在在 @/utils/formatters 中
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div v-if="loading">
+      <SkeletonLoader type="detail" />
+    </div>
+
+    <template v-else-if="instance">
+      <!-- Header -->
+      <div class="page-header flex-col lg:flex-row gap-4 lg:gap-0">
+        <div class="flex items-center gap-3 sm:gap-4 min-w-0">
+          <RouterLink 
+            :to="getReturnPath()" 
+            class="flex h-11 w-11 sm:h-12 sm:w-12 flex-shrink-0 items-center justify-center rounded-2xl border transition-all duration-200"
+            :class="themeStore.isDark 
+              ? 'border-gray-800 bg-gray-950 text-gray-500 hover:border-gray-700 hover:bg-gray-900 hover:text-gray-200' 
+              : 'border-gray-200 bg-white text-gray-400 shadow-sm hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7" />
+            </svg>
+          </RouterLink>
+
+          <div class="relative flex-shrink-0">
+            <div
+              class="absolute inset-0 rounded-[1.4rem] blur-xl opacity-70"
+              :class="themeStore.isDark ? 'bg-blue-500/15' : 'bg-blue-200/70'"
+            />
+            <button
+              type="button"
+              class="relative flex h-14 w-14 sm:h-16 sm:w-16 items-center justify-center rounded-[1.4rem] border shadow-sm transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+              :class="themeStore.isDark
+                ? 'border-gray-800 bg-gradient-to-br from-gray-900 via-gray-950 to-black hover:border-gray-700 hover:shadow-[0_0_0_1px_rgba(59,130,246,0.2)]'
+                : 'border-gray-200 bg-gradient-to-br from-white via-gray-50 to-slate-100 hover:border-gray-300 hover:shadow-md'"
+              :aria-label="$t('instance.badgeModal.open')"
+              :title="$t('instance.badgeModal.open')"
+              @click="showInstanceBadgeModal = true"
+            >
+              <InstanceDisplayIcon
+                :badge-id="instance.iconBadgeId"
+                :fallback-icon="getInstanceIconType(instance)"
+                :alt="instance.name"
+                :size="36"
+              />
+            </button>
+            <div
+              class="absolute -bottom-1 -right-1 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide shadow-sm"
+              :class="themeStore.isDark
+                ? 'border-gray-800 bg-gray-950 text-gray-300'
+                : 'border-gray-200 bg-white text-gray-700'"
+            >
+              {{ $t(`common.instanceType.${instance.instanceType}`) }}
+            </div>
+          </div>
+
+          <div class="min-w-0">
+            <div class="flex items-center gap-2 sm:gap-3 flex-wrap">
+              <div :class="['w-2.5 h-2.5 rounded-full flex-shrink-0', getStatusInfo(instance.status, t).dot]"></div>
+              <h1 class="page-title max-w-full truncate">{{ instance.name }}</h1>
+              <span :class="['badge', getStatusInfo(instance.status, t).class]">
+                {{ getStatusInfo(instance.status, t).label }}
+              </span>
+            </div>
+            <p class="page-description mt-0.5">{{ formatImageName(instance.image, (instance as any).imageName) }} · <span class="uppercase">{{ (instance as any).host?.name || (instance as any).host || '-' }}</span></p>
+          </div>
+        </div>
+        
+        <div class="flex items-center gap-2 flex-wrap">
+          <!-- Active Task Indicator -->
+          <div 
+            v-if="activeTask"
+            class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg text-xs sm:text-sm"
+            :class="themeStore.isDark ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'"
+          >
+            <svg class="w-4 h-4 flex-shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span class="hidden sm:inline">{{ $t(`instance.detail.task.${activeTask.taskType}`) }}</span>
+          </div>
+          <!-- Transfer Lock Warning -->
+          <div 
+            v-if="hasPendingTransfer"
+            class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg text-xs sm:text-sm"
+            :class="themeStore.isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-700'"
+          >
+            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span class="hidden sm:inline">{{ $t('transfer.messages.instanceLocked') }}</span>
+          </div>
+          <!-- Suspended Warning -->
+          <div 
+            v-if="isSuspended"
+            class="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg text-xs sm:text-sm"
+            :class="themeStore.isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-700'"
+          >
+            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+            </svg>
+            <span class="hidden sm:inline">{{ $t('instance.detail.info.suspended') }}</span>
+          </div>
+          <!-- Cloud-init Initializing -->
+          <div
+            v-if="isRunning && !cloudInitReady"
+            class="flex items-center gap-2"
+          >
+            <button
+              class="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all"
+              :class="[
+                themeStore.isDark ? 'bg-amber-500/15 text-amber-400 border border-amber-500/30' : 'bg-amber-50 text-amber-600 border border-amber-200',
+                cloudInitChecking ? 'opacity-70 cursor-wait' : 'hover:opacity-80 cursor-pointer'
+              ]"
+              :disabled="cloudInitChecking || cloudInitManualCompleting"
+              :title="cloudInitBannerTooltip"
+              @click="checkCloudInitStatus"
+            >
+              <svg v-if="cloudInitChecking" class="w-4 h-4 flex-shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+              <svg v-else class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="sm:hidden">{{ cloudInitBannerShort }}</span>
+              <span class="hidden sm:inline">{{ cloudInitBannerTitle }}</span>
+              <span
+                class="hidden sm:inline text-xs font-medium"
+                :class="themeStore.isDark ? 'text-amber-300' : 'text-amber-700'"
+              >
+                · {{ cloudInitBannerRetryText }}
+              </span>
+            </button>
+            <button
+              v-if="canManualCompleteCloudInit"
+              class="btn-secondary btn-sm sm:btn inline-flex"
+              :disabled="cloudInitChecking || cloudInitManualCompleting"
+              :title="$t('instance.detail.cloudInit.manualComplete')"
+              @click="manualCompleteCloudInit"
+            >
+              <svg v-if="cloudInitManualCompleting" class="w-4 h-4 sm:hidden animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+              <span class="sm:hidden">{{ $t('instance.detail.cloudInit.manualShort') }}</span>
+              <span class="hidden sm:inline">{{ $t('instance.detail.cloudInit.manualComplete') }}</span>
+            </button>
+          </div>
+          <!-- Rename Button -->
+          <button 
+            :disabled="isOperationDisabled" 
+            class="btn-ghost btn-sm sm:btn inline-flex" 
+            :title="$t('instance.actions.rename')"
+            @click="openRenameModal"
+          >
+            <svg class="w-4 h-4 sm:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+            <span class="hidden sm:inline">{{ $t('instance.actions.rename') }}</span>
+          </button>
+          <!-- Terminal Button -->
+          <button 
+            v-if="isRunning" 
+            class="btn-sm sm:btn inline-flex rounded-lg"
+            :class="themeStore.isDark ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-500 hover:bg-green-600 text-white'"
+            :title="$t('terminal.title')"
+            @click="showTerminalModal = true"
+          >
+            <svg 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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            <span class="hidden sm:inline ml-1">{{ $t('terminal.title') }}</span>
+          </button>
+          <!-- Terminal Button (Disabled when not running) -->
+          <button 
+            v-if="isStopped" 
+            disabled
+            class="btn-sm sm:btn inline-flex rounded-lg opacity-50 cursor-not-allowed"
+            :class="themeStore.isDark ? 'bg-green-600/50 text-white' : 'bg-green-500/50 text-white'"
+            :title="$t('terminal.requiresRunning')"
+          >
+            <svg 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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            <span class="hidden sm:inline ml-1">{{ $t('terminal.title') }}</span>
+          </button>
+          <button v-if="isStopped" :disabled="isOperationDisabled" class="btn-secondary btn-sm sm:btn" @click="handleAction('start')">
+            <svg v-if="actionLoading === 'start'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ $t('instance.actions.start') }}</span>
+          </button>
+          <button v-if="isRunning" :disabled="isOperationDisabled" class="btn-secondary btn-sm sm:btn" @click="handleAction('stop')">
+            <svg v-if="actionLoading === 'stop'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ $t('instance.actions.stop') }}</span>
+          </button>
+          <button v-if="isRunning" :disabled="isOperationDisabled" class="btn-secondary btn-sm sm:btn" @click="handleAction('restart')">
+            <svg v-if="actionLoading === 'restart'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ $t('instance.actions.restart') }}</span>
+          </button>
+          <!-- 复制按钮（特殊颜色标记，只在停机时可用） -->
+          <button 
+            v-if="isStopped && canClone" 
+            :disabled="isOperationDisabled" 
+            class="btn-sm sm:btn inline-flex rounded-lg"
+            :class="themeStore.isDark ? 'bg-purple-600 hover:bg-purple-700 text-white' : 'bg-purple-500 hover:bg-purple-600 text-white'"
+            :title="actionLoading === 'clone' ? '' : $t('instance.actions.clone')"
+            @click="handleAction('clone')"
+          >
+            <svg v-if="actionLoading === 'clone'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            <span v-if="actionLoading !== 'clone'" class="hidden sm:inline ml-1">{{ $t('instance.actions.clone') }}</span>
+          </button>
+          <!-- 复制按钮（运行时显示但禁用，hover 提示） -->
+          <button 
+            v-if="isRunning && canClone" 
+            disabled
+            class="btn-sm sm:btn inline-flex rounded-lg opacity-50 cursor-not-allowed"
+            :class="themeStore.isDark ? 'bg-purple-600/50 text-white' : 'bg-purple-500/50 text-white'"
+            :title="$t('instance.detail.actions.stopRequiredHint')"
+          >
+            <svg 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            <span class="hidden sm:inline ml-1">{{ $t('instance.actions.clone') }}</span>
+          </button>
+          <!-- 重建按钮（始终可点击，运行时提示需要先关机） -->
+          <button 
+            v-if="canRebuild" 
+            :disabled="isOperationDisabled"
+            class="btn-secondary btn-sm sm:btn inline-flex"
+            :title="$t('instance.detail.rebuild.title')"
+            @click="handleRebuildClick"
+          >
+            <span class="sm:hidden">{{ $t('instance.detail.rebuild.title') }}</span>
+            <span class="hidden sm:inline">{{ $t('instance.detail.rebuild.title') }}</span>
+          </button>
+          <!-- 同步状态按钮 -->
+          <button
+            v-if="canSyncStatus"
+            :disabled="syncStatusLoading"
+            class="btn-secondary btn-sm sm:btn inline-flex"
+            :title="$t('instance.detail.actions.syncStatus')"
+            @click="handleSyncStatus"
+          >
+            <svg v-if="syncStatusLoading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else class="sm:hidden">{{ $t('instance.detail.actions.syncStatus') }}</span>
+            <span class="hidden sm:inline">{{ $t('instance.detail.actions.syncStatus') }}</span>
+          </button>
+          <button
+            v-if="canTransfer && !showPaidSubscriptionCard"
+            :disabled="isOperationDisabled"
+            class="btn-secondary btn-sm sm:btn inline-flex"
+            :title="$t('transfer.actions.transfer')"
+            @click="handleTransferBtnClick"
+          >
+            <span class="sm:hidden">{{ $t('transfer.actions.transfer') }}</span>
+            <span class="hidden sm:inline">{{ $t('transfer.actions.transfer') }}</span>
+          </button>
+          <!-- 帮助按钮 -->
+          <RouterLink 
+            to="/help"
+            class="btn-secondary btn-sm sm:btn inline-flex items-center"
+            :title="$t('instance.detail.actions.help')"
+          >
+            <svg 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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span class="hidden sm:inline ml-1">{{ $t('instance.detail.actions.help') }}</span>
+          </RouterLink>
+          <!-- 封停按钮（仅宿主机所有者可见，实例未封停时） -->
+          <button 
+            v-if="canSuspend && !isSuspended" 
+            :disabled="suspendLoading" 
+            class="btn-sm sm:btn inline-flex rounded-lg"
+            :class="themeStore.isDark ? 'bg-orange-600 hover:bg-orange-700 text-white' : 'bg-orange-500 hover:bg-orange-600 text-white'"
+            :title="$t('instance.detail.actions.suspend')"
+            @click="handleSuspend"
+          >
+            <svg v-if="suspendLoading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+            </svg>
+            <span class="hidden sm:inline ml-1">{{ $t('instance.actions.suspend') }}</span>
+          </button>
+          <!-- 解封按钮（仅宿主机所有者可见，实例已封停时） -->
+          <button 
+            v-if="canSuspend && isSuspended" 
+            :disabled="suspendLoading" 
+            class="btn-sm sm:btn inline-flex rounded-lg"
+            :class="themeStore.isDark ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-500 hover:bg-green-600 text-white'"
+            :title="$t('instance.detail.actions.unsuspend')"
+            @click="handleUnsuspend"
+          >
+            <svg v-if="suspendLoading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span class="hidden sm:inline ml-1">{{ $t('instance.actions.unsuspend') }}</span>
+          </button>
+          <button v-if="canDeleteInstance" :disabled="isOperationDisabled" class="btn-danger btn-sm sm:btn" @click="handleAction('delete')">
+            <svg v-if="actionLoading === 'delete'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ $t('common.delete') }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Tab Navigation -->
+      <div 
+        class="flex gap-1 p-1 rounded-lg w-full sm:w-fit overflow-x-auto"
+        :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-100'"
+      >
+        <button 
+          v-for="tab in visibleTabs"
+          :key="tab.key"
+          :class="[
+            'flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-colors whitespace-nowrap',
+            activeTab === tab.key 
+              ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-white text-gray-900 shadow-sm')
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-900')
+          ]"
+          @click="activeTab = tab.key as TabType"
+        >
+          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="tab.icon" />
+          </svg>
+          <span class="hidden sm:inline">{{ $t(tab.labelKey) }}</span>
+        </button>
+      </div>
+
+      <!-- Error State Banner -->
+      <div 
+        v-if="instance && isError"
+        class="rounded-xl p-4 flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4"
+        :class="themeStore.isDark 
+          ? 'bg-red-500/10 border border-red-500/30' 
+          : 'bg-red-50 border border-red-200'"
+      >
+        <div class="flex items-start gap-3 flex-1 min-w-0">
+          <svg 
+            class="w-5 h-5 flex-shrink-0 mt-0.5"
+            :class="themeStore.isDark ? 'text-red-400' : 'text-red-600'"
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+          </svg>
+          <div class="min-w-0">
+            <p 
+              class="text-sm font-medium"
+              :class="themeStore.isDark ? 'text-red-400' : 'text-red-700'"
+            >
+              {{ $t('instance.errorBanner.title') }}
+            </p>
+            <p 
+              class="text-xs mt-0.5"
+              :class="themeStore.isDark ? 'text-red-300/70' : 'text-red-600'"
+            >
+              {{ $t('instance.errorBanner.description') }}
+            </p>
+          </div>
+        </div>
+        <button
+          class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-lg transition-colors w-full sm:w-auto text-center"
+          :class="themeStore.isDark 
+            ? 'bg-red-600 hover:bg-red-700 text-white' 
+            : 'bg-red-600 hover:bg-red-700 text-white'"
+          :disabled="errorDestroyLoading"
+          @click="handleErrorDestroy"
+        >
+          <span v-if="errorDestroyLoading" class="inline-flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('common.processing') }}
+          </span>
+          <span v-else>{{ $t('instance.errorBanner.destroyNow') }}</span>
+        </button>
+      </div>
+
+      <!-- Tab Content -->
+      <Transition name="tab" mode="out-in">
+        <div :key="activeTab">
+          <!-- Info Tab -->
+          <div v-if="activeTab === 'info' && instance" class="space-y-4">
+            <!-- Host Announcement Banner -->
+            <div 
+              v-if="(instance as any).hostAnnouncement"
+              class="relative overflow-hidden rounded-[1.4rem] border px-4 py-3.5 sm:px-5 sm:py-4"
+              :class="themeStore.isDark
+                ? 'border-slate-700/80 bg-gradient-to-br from-slate-900 via-[#0f141b] to-[#0a0a0a]'
+                : 'border-slate-200 bg-gradient-to-br from-slate-50 via-white to-slate-100 shadow-sm'"
+            >
+              <div class="pointer-events-none absolute inset-0 overflow-hidden">
+                <div
+                  class="absolute -top-8 -right-8 h-24 w-24 rounded-full blur-3xl"
+                  :class="themeStore.isDark ? 'bg-sky-500/10' : 'bg-sky-100/70'"
+                />
+                <div
+                  class="absolute left-8 bottom-0 h-16 w-16 rounded-full blur-3xl"
+                  :class="themeStore.isDark ? 'bg-slate-400/8' : 'bg-slate-200/80'"
+                />
+              </div>
+
+              <div class="relative flex flex-col gap-3">
+                <div class="flex flex-col gap-2.5 sm:flex-row sm:items-start sm:justify-between">
+                  <div class="flex items-start gap-3 min-w-0">
+                    <div
+                      class="flex h-10 w-10 sm:h-11 sm:w-11 flex-shrink-0 items-center justify-center rounded-xl border shadow-sm"
+                      :class="themeStore.isDark
+                        ? 'border-slate-700 bg-gradient-to-br from-slate-800 via-slate-900 to-[#101722] text-sky-300'
+                        : 'border-slate-200 bg-gradient-to-br from-white via-slate-50 to-slate-100 text-sky-600'"
+                    >
+                      <AnnouncementIcon class="h-7 w-7 sm:h-[30px] sm:w-[30px]" />
+                    </div>
+
+                    <div class="min-w-0">
+                      <div class="flex flex-wrap items-center gap-2">
+                        <h3
+                          class="text-sm sm:text-[15px] font-semibold"
+                          :class="themeStore.isDark ? 'text-slate-100' : 'text-slate-900'"
+                        >
+                          {{ $t('instance.hostAnnouncement') }}
+                        </h3>
+                      </div>
+                      <p
+                        class="mt-0.5 text-[11px] sm:text-xs uppercase tracking-[0.16em]"
+                        :class="themeStore.isDark ? 'text-slate-400' : 'text-slate-500'"
+                      >
+                        {{ instanceHostName }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div
+                    class="hidden sm:flex h-9 items-center rounded-full border px-3 text-[10px] font-medium uppercase tracking-[0.18em]"
+                    :class="themeStore.isDark
+                      ? 'border-slate-700 bg-slate-900/70 text-slate-300'
+                      : 'border-slate-200 bg-white/80 text-slate-600'"
+                  >
+                    {{ instanceHostName }}
+                  </div>
+                </div>
+
+                <p
+                  class="text-sm leading-6 sm:text-[15px] sm:leading-7 whitespace-pre-wrap break-words"
+                  :class="themeStore.isDark ? 'text-slate-200/92' : 'text-slate-700'"
+                >
+                  {{ (instance as any).hostAnnouncement }}
+                </p>
+              </div>
+            </div>
+
+            <!-- Paid Subscription Card (only for paid instances) -->
+            <div 
+              v-if="showPaidSubscriptionCard"
+              class="card p-4 sm:p-5"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                  <div class="min-w-0 flex-1">
+                    <div class="flex flex-wrap items-center gap-2">
+                      <span
+                        class="inline-flex rounded-full border px-2.5 py-0.5 text-[11px] font-medium"
+                        :class="themeStore.isDark ? 'border-gray-800 bg-gray-900 text-gray-300' : 'border-gray-200 bg-gray-50 text-gray-600'"
+                      >
+                        {{ $t('instance.subscription.premium') }}
+                      </span>
+                      <span
+                        class="inline-flex rounded-full px-2.5 py-0.5 text-[11px] font-medium"
+                        :class="
+                          subscriptionRemainingDays <= 0
+                            ? (themeStore.isDark ? 'bg-red-500/10 text-red-400' : 'bg-red-50 text-red-600')
+                            : subscriptionRemainingDays <= 7
+                              ? (themeStore.isDark ? 'bg-amber-500/10 text-amber-400' : 'bg-amber-50 text-amber-700')
+                              : (themeStore.isDark ? 'bg-green-500/10 text-green-400' : 'bg-green-50 text-green-700')
+                        "
+                      >
+                        {{ subscriptionRemainingDisplay.text }}
+                      </span>
+                      <span
+                        class="inline-flex rounded-full px-2.5 py-0.5 text-[11px] font-medium"
+                        :class="subscriptionAutoRenewEnabled
+                          ? (themeStore.isDark ? 'bg-emerald-500/10 text-emerald-400' : 'bg-emerald-50 text-emerald-700')
+                          : (themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-600')"
+                      >
+                        {{ subscriptionAutoRenewEnabled ? $t('instance.subscription.autoRenewOn') : $t('instance.subscription.autoRenewOff') }}
+                      </span>
+                    </div>
+
+                    <div class="mt-4 min-w-0">
+                      <h3
+                        class="text-lg sm:text-xl font-semibold truncate"
+                        :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                      >
+                        {{ (instance as any).planName }}
+                      </h3>
+                      <p
+                        class="mt-1 text-sm truncate"
+                        :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+                      >
+                        {{ (instance as any).packageName }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div
+                    class="rounded-xl border px-4 py-3 lg:min-w-[220px]"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/80' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="min-w-0">
+                        <div class="text-[11px]" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                          {{ configStore.freeSiteMode ? freeSiteCopy.renewPrice : $t('instance.subscription.renewPrice') }}
+                        </div>
+                        <div class="mt-1.5 flex items-end gap-1.5">
+                          <span
+                            class="text-3xl font-semibold leading-none"
+                            :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+                          >
+                            ¥{{ getRenewPrice(instance).toFixed(2) }}
+                          </span>
+                          <span
+                            class="pb-0.5 text-xs"
+                            :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'"
+                          >
+                            {{ getBillingCycleShort((instance as any).billingCycle) }}
+                          </span>
+                        </div>
+                      </div>
+
+                      <span
+                        v-if="hasAffDiscount(instance)"
+                        class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium"
+                        :class="themeStore.isDark ? 'bg-emerald-500/10 text-emerald-400' : 'bg-emerald-50 text-emerald-700'"
+                      >
+                        {{ getAffDiscountText(instance) }}
+                      </span>
+                      <button
+                        v-else-if="canApplyAffCode(instance)"
+                        type="button"
+                        class="inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[11px] font-medium transition-colors"
+                        :class="themeStore.isDark
+                          ? 'bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/20'
+                          : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'"
+                        @click="showApplyAffModal = true"
+                      >
+                        {{ $t('instance.subscription.applyAffShort') }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-2.5 xl:grid-cols-4">
+                  <div
+                    class="min-h-[84px] rounded-xl border p-3"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="text-[11px]" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                      {{ $t('instance.subscription.expiresAt') }}
+                    </div>
+                    <div class="mt-1.5 text-sm font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      {{ formatShortDate(instance.expires_at) }}
+                    </div>
+                  </div>
+
+                  <div
+                    class="min-h-[84px] rounded-xl border p-3"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="text-[11px]" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                      {{ $t('instance.subscription.expiresIn') }}
+                    </div>
+                    <div class="mt-1.5 text-sm font-medium" :class="subscriptionRemainingDisplay.className">
+                      {{ subscriptionRemainingDisplay.text }}
+                    </div>
+                  </div>
+
+                  <div
+                    class="min-h-[84px] rounded-xl border p-3"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="text-[11px]" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                      {{ configStore.freeSiteMode ? freeSiteCopy.billingCycle : $t('instance.subscription.billingCycle') }}
+                    </div>
+                    <div class="mt-1.5 text-sm font-medium" :class="themeStore.isDark ? 'text-white' : 'text-gray-900'">
+                      {{ getBillingCycleText((instance as any).billingCycle) }}
+                    </div>
+                  </div>
+
+                  <div
+                    class="min-h-[84px] rounded-xl border p-3"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="text-[11px]" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                      {{ $t('instance.subscription.autoRenew') }}
+                    </div>
+                    <div
+                      class="mt-1.5 text-sm font-medium"
+                      :class="subscriptionAutoRenewEnabled
+                        ? (themeStore.isDark ? 'text-emerald-400' : 'text-emerald-700')
+                        : (themeStore.isDark ? 'text-gray-200' : 'text-gray-900')"
+                    >
+                      {{ subscriptionAutoRenewEnabled ? $t('instance.subscription.autoRenewEnabled') : $t('instance.subscription.autoRenewDisabled') }}
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  v-if="!isHostOwnerOnly"
+                  class="border-t pt-4"
+                  :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+                >
+                  <div class="flex flex-col gap-2.5 lg:flex-row lg:items-center lg:justify-between">
+                    <div class="grid w-full grid-cols-2 gap-2 sm:flex sm:flex-wrap">
+                      <button
+                        class="btn-secondary btn-sm w-full justify-center sm:w-auto sm:min-w-[110px]"
+                        @click="showRenewModal = true"
+                      >
+                        {{ $t('instance.subscription.renew') }}
+                      </button>
+
+                      <button
+                        class="btn-secondary btn-sm w-full justify-center sm:w-auto sm:min-w-[110px]"
+                        @click="showAutoRenewModal = true"
+                      >
+                        {{ $t('instance.subscription.autoRenew') }}
+                      </button>
+
+                      <button
+                        v-if="instance.package_id && (instance as any).planId"
+                        class="btn-secondary btn-sm w-full justify-center sm:w-auto sm:min-w-[110px]"
+                        @click="showChangePlanModal = true"
+                      >
+                        {{ $t('billing.changePlan') }}
+                      </button>
+
+                      <button
+                        v-if="canTransfer"
+                        :disabled="isOperationDisabled"
+                        class="btn-secondary btn-sm w-full justify-center sm:w-auto sm:min-w-[110px]"
+                        @click="handleTransferBtnClick"
+                      >
+                        {{ $t('transfer.actions.transfer') }}
+                      </button>
+                    </div>
+
+                    <button
+                      :disabled="destroyButtonDisabled"
+                      class="btn-danger btn-sm w-full lg:w-auto lg:min-w-[110px]"
+                      :class="destroyButtonDisabled ? 'opacity-50 cursor-not-allowed' : ''"
+                      @click="showDestroyModal = true"
+                    >
+                      {{ $t('instance.destroy.button') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Original Info Tab Content -->
+            <InstanceInfoTab
+              :instance="instance"
+              :stats="stats"
+              :stats-loading="statsLoading"
+              :traffic-data="trafficData"
+              :traffic-loading="trafficLoading"
+              :show-password="showPassword"
+              :instance-password="instancePassword"
+              :can-edit-config="instance.isHostOwner === true"
+              :enable-resource-pool="(instance as any).enableResourcePool === true"
+              @toggle-password="togglePasswordVisibility"
+              @copy="copyToClipboard"
+              @edit-config="openConfigEditModal"
+              @redeem="openRedeemModal"
+            />
+          </div>
+
+          <!-- Network Tab -->
+          <InstanceNetworkTab
+            v-if="activeTab === 'network' && instance"
+            :instance="instance"
+            :copied="copied"
+            :can-manage-ports="canManagePorts"
+            :is-instance-owner="!isHostOwnerOnly"
+            :reassign-ipv6-loading="reassignIpv6Loading"
+            :last-ipv6-reassign-at="(instance as any).last_ipv6_reassign_at"
+            :delete-ports-loading="deletePortsLoading"
+            @copy="copyToClipboard"
+            @add-port="showAddPortModal = true"
+            @delete-port="deletePort"
+            @delete-ports="deletePorts"
+            @reassign-ipv6="handleReassignIpv6"
+          />
+
+          <!-- Sites Tab -->
+          <InstanceSitesTab
+            v-if="activeTab === 'sites' && instance"
+            :instance-id="instance.id"
+          />
+
+          <!-- Traffic Tab -->
+          <TrafficStats
+            v-if="activeTab === 'traffic' && instance"
+            :instance-id="instance.id"
+          />
+
+          <!-- Snapshots Tab -->
+          <SnapshotManager
+            v-if="activeTab === 'snapshots' && instance"
+            :instance-id="instance.id"
+            :instance-name="instance.name"
+            :instance-status="instance.status"
+            :snapshot-limit="(instance as any).snapshot_limit"
+          />
+
+          <!-- Quota Tab -->
+          <InstanceQuotaTab
+            v-if="activeTab === 'quota' && instance"
+            :instance="instance"
+            :port-mappings-count="portMappingsCount"
+            :snapshots="snapshots"
+            :quota-form="instanceQuotaForm"
+            :quota-saving="quotaSaving"
+            :quota-error="quotaError"
+            :remaining-quota="remainingQuota"
+            @update:quota-form="instanceQuotaForm = $event"
+            @save="saveInstanceQuota"
+          />
+
+          <!-- Config Tab -->
+          <InstanceConfigTab
+            v-if="activeTab === 'config' && instance"
+            :instance-id="instance.id"
+            :can-edit-config="instance.isHostOwner === true"
+            :show-boot-settings="instance.isHostOwner === true"
+            :instance-type="(instance as any).instanceType || 'container'"
+            :instance-status="instance.status"
+            :is-instance-owner="(instance as any).isInstanceOwner === true || authStore.isAdmin"
+            @change-host-task="startTaskPolling"
+          />
+
+          <!-- Logs Tab -->
+          <InstanceLogsTab
+            v-if="activeTab === 'logs' && instance"
+            :instance-id="instance.id"
+            :instance-name="instance.name"
+          />
+        </div>
+      </Transition>
+    </template>
+
+    <!-- Modals -->
+    <AddPortModal
+      v-model:visible="showAddPortModal"
+      :loading="portLoading"
+      :error="portError"
+      :port-range-start="(instance as any)?.port_range_start"
+      :port-range-end="(instance as any)?.port_range_end"
+      :port-quota-current="(instance as any)?.port_mappings?.length || 0"
+      :port-quota-limit="(instance as any)?.port_limit || 0"
+      :network-mode="(instance as any)?.network_mode"
+      @submit="handleAddPort"
+    />
+
+    <PortConflictModal
+      v-model:visible="showPortConflictModal"
+      :loading="portLoading"
+      :conflicts="portConflicts"
+      :port-range-start="(instance as any)?.port_range_start"
+      :port-range-end="(instance as any)?.port_range_end"
+      @confirm="handlePortConflictConfirm"
+      @cancel="handlePortConflictCancel"
+    />
+
+    <RebuildModal
+      v-model:visible="showRebuildModal"
+      :loading="rebuildLoading"
+      :available-images="availableImages"
+      :ssh-keys="sshKeys"
+      @submit="doRebuild"
+    />
+
+    <RecreateModal
+      v-model:visible="showRecreateModal"
+      :loading="recreateLoading"
+      :available-images="availableImages"
+      :ssh-keys="sshKeys"
+      @submit="doRecreate"
+    />
+
+    <!-- Transfer Modal -->
+    <TransferModal
+      v-if="instance"
+      :show="showTransferModal"
+      :instance="{ id: instance.id, name: instance.name, cpu: instance.cpu, memory: instance.memory, disk: instance.disk }"
+      @close="showTransferModal = false"
+      @success="loadInstance"
+    />
+
+    <!-- Config Edit Modal -->
+    <ConfigEditModal
+      v-if="instance"
+      :show="showConfigEditModal"
+      :instance="instance"
+      :pkg="instancePackage"
+      :user-quota="userQuota"
+      :stats="stats"
+      :loading="configEditLoading"
+      @update:show="showConfigEditModal = $event"
+      @confirm="handleConfigEdit"
+    />
+
+    <!-- Redeem Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showRedeemModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showRedeemModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ $t('instance.detail.info.redeemTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showRedeemModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <div>
+                <label class="block text-sm text-themed-muted mb-1">{{ $t('checkin.enterCode') }}</label>
+                <input
+                  v-model="redeemCodeInput"
+                  type="text"
+                  class="input w-full"
+                  :placeholder="$t('checkin.systemCodePlaceholder')"
+                  @keyup.enter="handleRedeem"
+                />
+              </div>
+              <div v-if="instance" class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                <div class="flex items-center gap-2">
+                  <span class="text-sm text-themed-muted">{{ $t('checkin.targetInstance') }}:</span>
+                  <span class="text-sm font-medium text-themed">{{ instance.name }}</span>
+                </div>
+              </div>
+              <div class="text-xs text-themed-muted p-3 rounded-lg bg-themed-secondary">
+                <p>{{ $t('checkin.systemCodeHint') }}</p>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn" @click="showRedeemModal = false">{{ $t('common.cancel') }}</button>
+              <button 
+                class="btn btn-primary"
+                :disabled="redeemLoading || !redeemCodeInput.trim()"
+                @click="handleRedeem"
+              >
+                <svg v-if="redeemLoading" class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {{ $t('checkin.redeemButton') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Renew Modal -->
+    <RenewModal
+      v-if="instance"
+      v-model:show="showRenewModal"
+      :instance-id="instance.id"
+      :instance-name="instance.name"
+      @success="handleRenewSuccess"
+    />
+
+    <!-- Apply AFF Code Modal -->
+    <ApplyAffCodeModal
+      v-if="instance"
+      v-model:show="showApplyAffModal"
+      :instance-id="instance.id"
+      :instance-name="instance.name"
+      :renew-price="getRenewPrice(instance)"
+      :billing-cycle-label="getBillingCycleShort((instance as any).billingCycle)"
+      @success="handleApplyAffSuccess"
+    />
+
+    <!-- Change Plan Modal -->
+    <ChangePlanModal
+      v-if="instance && instance.package_id && (instance as any).planId"
+      v-model:show="showChangePlanModal"
+      :instance-id="instance.id"
+      :instance-name="instance.name"
+      :package-id="instance.package_id"
+      :current-plan-id="(instance as any).planId"
+      :current-billing-price="(instance as any).billingPrice ?? null"
+      :current-billing-cycle="(instance as any).billingCycle ?? null"
+      :instance-type="(instance as any).instanceType || 'container'"
+      @success="handleChangePlanSuccess"
+    />
+
+    <!-- Destroy Instance Modal -->
+    <DestroyInstanceModal
+      v-model:visible="showDestroyModal"
+      :loading="destroyLoading"
+      :destroy-info="destroyInfo"
+      @destroy="handleDestroy"
+    />
+
+    <!-- Rename Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showRenameModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showRenameModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ $t('instance.renameModal.title') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showRenameModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <label class="block text-sm text-themed-secondary mb-1.5">{{ $t('instance.renameModal.name') }}</label>
+              <input 
+                v-model="newInstanceName" 
+                type="text" 
+                class="input" 
+                :placeholder="$t('instance.renameModal.namePlaceholder')"
+                @keyup.enter="doRename"
+              />
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showRenameModal = false">{{ $t('instance.renameModal.cancel') }}</button>
+              <button :disabled="renameLoading || !newInstanceName.trim()" class="btn-primary" @click="doRename">
+                {{ renameLoading ? $t('instance.renameModal.renaming') : $t('instance.renameModal.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Clone Confirm Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showCloneModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showCloneModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ $t('instance.detail.actions.clone') }}</h3>
+              <button 
+                class="text-themed-muted hover:text-themed" 
+                :disabled="cloneLoading"
+                @click="showCloneModal = false"
+              >
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="text-themed mb-4">{{ $t('instance.detail.actions.confirmClone', { name: instance?.name || '' }) }}</p>
+              <div class="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20 mb-4">
+                <p class="text-sm text-blue-400">
+                  {{ $t('instance.detail.actions.cloneNotice') }}
+                </p>
+              </div>
+              <div v-if="cloneLoading" class="flex items-center justify-center py-4">
+                <svg class="w-6 h-6 animate-spin text-primary" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                <span class="ml-2 text-themed">{{ $t('instance.detail.actions.cloning') }}</span>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button 
+                class="btn-secondary" 
+                :disabled="cloneLoading"
+                @click="showCloneModal = false"
+              >
+                {{ $t('common.cancel') }}
+              </button>
+              <button 
+                :disabled="cloneLoading" 
+                class="btn-primary"
+                :class="themeStore.isDark ? 'bg-purple-600 hover:bg-purple-700' : 'bg-purple-500 hover:bg-purple-600'"
+                @click="doClone"
+              >
+                {{ cloneLoading ? $t('instance.detail.actions.cloning') : $t('common.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Suspend Confirm Modal -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showSuspendModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showSuspendModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <h3 class="modal-title text-orange-500">{{ $t('instance.detail.actions.suspend') }}</h3>
+              <button 
+                class="text-themed-muted hover:text-themed" 
+                :disabled="suspendLoading"
+                @click="showSuspendModal = false"
+              >
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <p class="text-themed">{{ $t('instance.detail.actions.confirmSuspend', { name: instance?.name || '' }) }}</p>
+              <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-orange-500/10 border border-orange-500/20' : 'bg-orange-50 border border-orange-200'">
+                <p class="text-sm" :class="themeStore.isDark ? 'text-orange-400' : 'text-orange-600'">
+                  {{ $t('instance.detail.actions.confirmSuspendNotice') }}
+                </p>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed-secondary mb-1">{{ $t('instance.detail.actions.suspendReason') }}</label>
+                <textarea
+                  v-model="suspendReason"
+                  rows="3"
+                  maxlength="500"
+                  :placeholder="$t('instance.detail.actions.suspendReasonPlaceholder')"
+                  class="input w-full resize-none"
+                />
+                <p class="mt-1 text-xs text-themed-muted">{{ suspendReason.length }}/500</p>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button 
+                class="btn-secondary" 
+                :disabled="suspendLoading"
+                @click="showSuspendModal = false"
+              >
+                {{ $t('common.cancel') }}
+              </button>
+              <button 
+                :disabled="suspendLoading" 
+                class="text-white"
+                :class="themeStore.isDark ? 'bg-orange-600 hover:bg-orange-700 px-4 py-2 rounded-lg' : 'bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg'"
+                @click="confirmSuspend"
+              >
+                <svg v-if="suspendLoading" class="w-4 h-4 mr-1 inline animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ suspendLoading ? $t('instance.detail.actions.suspending') : $t('instance.detail.actions.suspend') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Terminal Modal -->
+    <TerminalModal
+      v-model:visible="showTerminalModal"
+      v-model:force-disconnect="terminalForceDisconnect"
+      :instance-id="instance?.id || null"
+      :instance-name="instance?.name"
+      :allow-manual-cloud-init-complete="hasCloudInitManualPermission"
+      @update:connected="terminalConnected = $event"
+      @update:session-active="terminalSessionActive = $event"
+      @update:tab-count="terminalTabCount = $event"
+      @cloud-init-manual-complete="handleTerminalCloudInitManualComplete"
+    />
+
+    <!-- 终端悬浮按钮 - 当终端会话存在但模态框关闭时显示 -->
+    <Transition name="slide-up">
+      <div
+        v-if="terminalSessionActive && !showTerminalModal && isRunning"
+        class="fixed right-4 z-40 flex items-center gap-1 rounded-xl shadow-xl select-none"
+        :class="[
+          themeStore.isDark 
+            ? 'bg-neutral-900/95 border border-neutral-700 backdrop-blur-sm' 
+            : 'bg-white/95 border border-gray-200 backdrop-blur-sm shadow-lg',
+          isDragging ? 'cursor-grabbing' : ''
+        ]"
+        :style="terminalFabY !== null ? { top: terminalFabY + 'px' } : { bottom: '96px' }"
+      >
+        <!-- 拖动手柄 -->
+        <div
+          class="flex items-center px-2 py-3 cursor-grab active:cursor-grabbing touch-none"
+          :class="themeStore.isDark ? 'text-neutral-500 hover:text-neutral-300' : 'text-gray-400 hover:text-gray-600'"
+          @mousedown="startDrag"
+          @touchstart.prevent="startDrag"
+        >
+          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M8 6a2 2 0 11-4 0 2 2 0 014 0zM8 12a2 2 0 11-4 0 2 2 0 014 0zM8 18a2 2 0 11-4 0 2 2 0 014 0zM14 6a2 2 0 11-4 0 2 2 0 014 0zM14 12a2 2 0 11-4 0 2 2 0 014 0zM14 18a2 2 0 11-4 0 2 2 0 014 0z" />
+          </svg>
+        </div>
+        <!-- 分割线 -->
+        <div class="w-px h-6" :class="themeStore.isDark ? 'bg-neutral-700' : 'bg-gray-200'" />
+        <!-- 恢复按钮 -->
+        <button
+          class="flex items-center gap-2.5 px-3 py-2.5 transition-colors"
+          :class="themeStore.isDark 
+            ? 'hover:bg-neutral-800 text-white' 
+            : 'hover:bg-gray-50 text-gray-900'"
+          :title="$t('terminal.restore')"
+          @click="showTerminalModal = true"
+        >
+          <!-- 连接状态指示器：绿色闪烁=连接中，灰色=断开 -->
+          <span class="relative flex h-2 w-2">
+            <span 
+              v-if="terminalConnected" 
+              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
+            ></span>
+            <span 
+              class="relative inline-flex rounded-full h-2 w-2" 
+              :class="terminalConnected ? 'bg-emerald-500' : 'bg-neutral-400'"
+            ></span>
+          </span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          <span class="text-sm font-medium">{{ $t('terminal.title') }}</span>
+          <!-- 标签数量徽章 -->
+          <span 
+            v-if="terminalTabCount > 1" 
+            class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium rounded-full"
+            :class="themeStore.isDark ? 'bg-neutral-700 text-neutral-300' : 'bg-gray-200 text-gray-600'"
+          >
+            {{ terminalTabCount }}
+          </span>
+        </button>
+        <!-- 分割线 -->
+        <div class="w-px h-6" :class="themeStore.isDark ? 'bg-neutral-700' : 'bg-gray-200'" />
+        <!-- 断开连接按钮 -->
+        <button
+          class="p-2.5 rounded-r-xl transition-colors"
+          :class="themeStore.isDark 
+            ? 'text-neutral-400 hover:text-red-400 hover:bg-neutral-800' 
+            : 'text-gray-400 hover:text-red-500 hover:bg-gray-50'"
+          :title="$t('terminal.disconnect')"
+          @click="terminalForceDisconnect = true; terminalSessionActive = false; terminalTabCount = 0"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </Transition>
+
+    <!-- 自动续费设置弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div
+          v-if="showAutoRenewModal && instance"
+          class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        >
+          <!-- 背景遮罩 -->
+          <div 
+            class="absolute inset-0 bg-black/50" 
+            @click="showAutoRenewModal = false"
+          />
+          <!-- 弹窗内容 -->
+          <div 
+            class="relative w-full max-w-md rounded-xl shadow-xl overflow-hidden"
+            :class="themeStore.isDark ? 'bg-neutral-800' : 'bg-white'"
+          >
+            <!-- 标题 -->
+            <div 
+              class="px-6 py-4 border-b"
+              :class="themeStore.isDark ? 'border-neutral-700' : 'border-gray-100'"
+            >
+              <h3 
+                class="text-lg font-semibold"
+                :class="themeStore.isDark ? 'text-white' : 'text-gray-900'"
+              >
+                {{ $t('instance.subscription.autoRenew') }}
+              </h3>
+            </div>
+            <!-- 内容 -->
+            <div class="px-6 py-5">
+              <!-- 当前状态 -->
+              <div 
+                class="flex items-center justify-between p-4 rounded-lg mb-4"
+                :class="themeStore.isDark ? 'bg-neutral-700/50' : 'bg-gray-50'"
+              >
+                <span :class="themeStore.isDark ? 'text-slate-300' : 'text-gray-600'">
+                  {{ $t('instance.subscription.currentStatus') }}
+                </span>
+                <span 
+                  class="font-medium"
+                  :class="(instance as any).autoRenew 
+                    ? (themeStore.isDark ? 'text-emerald-400' : 'text-emerald-600')
+                    : (themeStore.isDark ? 'text-slate-400' : 'text-gray-500')"
+                >
+                  {{ (instance as any).autoRenew 
+                    ? $t('instance.subscription.autoRenewEnabled') 
+                    : $t('instance.subscription.autoRenewDisabled') }}
+                </span>
+              </div>
+              <!-- 说明 -->
+              <p 
+                class="text-sm mb-4"
+                :class="themeStore.isDark ? 'text-slate-400' : 'text-gray-500'"
+              >
+                {{ $t('instance.subscription.autoRenewDesc', { 
+                  cycle: getBillingCycleText((instance as any).billingCycle),
+                  price: getRenewPrice(instance).toFixed(2)
+                }) }}
+              </p>
+              <!-- 提示 -->
+              <div 
+                class="flex items-start gap-2 p-3 rounded-lg text-sm"
+                :class="themeStore.isDark ? 'bg-blue-500/10 text-blue-400' : 'bg-blue-50 text-blue-600'"
+              >
+                <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span>{{ $t('instance.subscription.autoRenewHint') }}</span>
+              </div>
+            </div>
+            <!-- 操作按钮 -->
+            <div 
+              class="px-6 py-4 border-t flex gap-3"
+              :class="themeStore.isDark ? 'border-neutral-700' : 'border-gray-100'"
+            >
+              <button
+                class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+                :class="themeStore.isDark 
+                  ? 'bg-neutral-700 text-white hover:bg-neutral-600' 
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+                @click="showAutoRenewModal = false"
+              >
+                {{ $t('common.cancel') }}
+              </button>
+              <button
+                v-if="(instance as any).autoRenew"
+                class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+                :class="themeStore.isDark 
+                  ? 'bg-red-600 hover:bg-red-700 text-white' 
+                  : 'bg-red-500 hover:bg-red-600 text-white'"
+                :disabled="autoRenewLoading"
+                @click="handleSetAutoRenew(false)"
+              >
+                <span v-if="autoRenewLoading" class="flex items-center justify-center gap-2">
+                  <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10" stroke-width="4" class="opacity-25" />
+                    <path d="M4 12a8 8 0 018-8" stroke-width="4" class="opacity-75" />
+                  </svg>
+                  {{ $t('common.processing') }}
+                </span>
+                <span v-else>{{ $t('instance.subscription.disableAutoRenew') }}</span>
+              </button>
+              <button
+                v-else
+                class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+                :class="themeStore.isDark 
+                  ? 'bg-emerald-600 hover:bg-emerald-700 text-white' 
+                  : 'bg-emerald-500 hover:bg-emerald-600 text-white'"
+                :disabled="autoRenewLoading"
+                @click="handleSetAutoRenew(true)"
+              >
+                <span v-if="autoRenewLoading" class="flex items-center justify-center gap-2">
+                  <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10" stroke-width="4" class="opacity-25" />
+                    <path d="M4 12a8 8 0 018-8" stroke-width="4" class="opacity-75" />
+                  </svg>
+                  {{ $t('common.processing') }}
+                </span>
+                <span v-else>{{ $t('instance.subscription.enableAutoRenew') }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <InstanceBadgeModal
+      v-if="instance"
+      :visible="showInstanceBadgeModal"
+      :instance-id="instance.id"
+      :instance-name="instance.name"
+      :badge-id="instance.iconBadgeId"
+      :fallback-icon="getInstanceIconType(instance)"
+      @close="showInstanceBadgeModal = false"
+      @updated="handleInstanceBadgeUpdated"
+    />
+  </div>
+</template>
diff --git a/client/src/views/InstancesView.vue b/client/src/views/InstancesView.vue
new file mode 100644
index 0000000..b6bc204
--- /dev/null
+++ b/client/src/views/InstancesView.vue
@@ -0,0 +1,2645 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, onActivated, onDeactivated, watch, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+import { getLocalizedCountryName } from '@/utils/countryDisplay'
+import { formatMemory, formatDisk, formatBytes, getStatusInfo } from '@/utils/formatters'
+import { translateError } from '@/utils/errorHandler'
+import type { Instance, UserBalance } from '@/types/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+import InstanceOrderMenu from '@/components/instance/InstanceOrderMenu.vue'
+import { freeSiteCopy, getFreeSiteBillingCycleLabel } from '@/utils/freeSiteFun'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'InstancesView' })
+
+type InstanceLayoutMode = 'list' | 'card'
+const INSTANCE_LAYOUT_STORAGE_KEY = 'incudal.instances.layout'
+
+const route = useRoute()
+const router = useRouter()
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+const toast = useToast()
+void configStore.loadPublicConfig()
+
+const instances = ref<Instance[]>([])
+const loading = ref<boolean>(true)
+const actionLoading = ref<Record<number, string>>({})
+const orderLoading = ref<boolean>(false)
+const recentlyOrderedInstanceId = ref<number | null>(null)
+const batchActionLoading = ref<string>('')
+
+// 搜索和分页
+const search = ref<string>('')
+const page = ref<number>(1)
+const pageSize = ref<number>(30)
+const total = ref<number>(0)
+const totalPages = ref<number>(0)
+const pageSizeOptions = [10, 20, 30, 50, 100]
+const countryFilter = ref<string | null>(null)
+const availableCountries = ref<string[]>([])
+const userSelectedLayout = ref<InstanceLayoutMode | null>(null)
+const isDesktopViewport = ref<boolean>(true)
+
+// 批量选择
+const selectedIds = ref<Set<number>>(new Set())
+
+// 批量续费
+const showBatchRenewModal = ref(false)
+const batchRenewLoading = ref(false)
+const batchRenewSubmitting = ref(false)
+const batchRenewMonths = ref<number>(1)
+const batchRenewBalance = ref<UserBalance>({ balance: 0, frozen: 0, totalRecharge: 0, totalConsume: 0 })
+const batchRenewPreview = ref<Array<{
+  id: number
+  name: string
+  canRenew: boolean
+  autoRenew: boolean
+  reason?: string
+  isHostedInstance: boolean
+  daysUntilExpire: number | null
+  options: Array<{
+    months: number
+    price: number
+    discountedPrice: number
+    expiresAt: string
+  }>
+}>>([])
+
+// 批量销毁
+const showBatchDestroyModal = ref(false)
+const batchDestroyLoading = ref(false)
+const batchDestroySubmitting = ref(false)
+const batchDestroyConfirm = ref('')
+const batchDestroyPreview = ref<Array<{
+  id: number
+  name: string
+  canDestroy: boolean
+  cannotDestroyReason: string
+  isFreeInstance: boolean
+  isFirstTime: boolean
+  feeWaiverEligible: boolean
+  refund: {
+    remainingDays: number
+    remainingValue: number
+    feeRate: number
+    feeAmount: number
+    refundAmount: number
+    destroyCount: number
+    maxRefundable: number
+  }
+  instance: {
+    id: number
+    name: string
+    hostName: string
+    planName: string | null
+  }
+}>>([])
+
+// 筛选条件（从 URL 获取）
+const filterUserId = ref<number | null>(null)
+const filterUserName = ref<string>('')
+
+const isAllSelected = computed(() => instances.value.length > 0 && selectedIds.value.size === instances.value.length)
+const isPartialSelected = computed(() => selectedIds.value.size > 0 && selectedIds.value.size < instances.value.length)
+const selectedCount = computed(() => selectedIds.value.size)
+const selectedInstances = computed(() => instances.value.filter(instance => selectedIds.value.has(instance.id)))
+const selectedRunningCount = computed(() => selectedInstances.value.filter(instance => instance.status?.toLowerCase() === 'running').length)
+const selectedStoppedCount = computed(() => selectedInstances.value.filter(instance => instance.status?.toLowerCase() === 'stopped').length)
+const selectedPaidCount = computed(() => selectedInstances.value.filter(instance => !!instance.packagePlanId).length)
+const hasSelectedInstances = computed(() => selectedCount.value > 0)
+const isViewingAnotherUsersInstances = computed(() => (
+  isAdmin.value &&
+  filterUserId.value !== null &&
+  filterUserId.value !== (authStore.user?.id || null)
+))
+const countryFilterOptions = computed(() => availableCountries.value.map(code => code.toLowerCase()))
+const instanceLayoutMode = computed<InstanceLayoutMode>(() => (
+  isDesktopViewport.value
+    ? (userSelectedLayout.value || 'list')
+    : 'card'
+))
+const isCardLayout = computed<boolean>(() => instanceLayoutMode.value === 'card')
+
+const batchRenewMonthOptions = computed(() => {
+  const options = new Set<number>()
+  for (const item of batchRenewPreview.value) {
+    if (!item.canRenew) continue
+    for (const option of item.options) {
+      options.add(option.months)
+    }
+  }
+  return Array.from(options).sort((a, b) => a - b)
+})
+
+const batchRenewEligibleItems = computed(() => {
+  return batchRenewPreview.value
+    .map(item => ({
+      ...item,
+      selectedOption: item.options.find(option => option.months === batchRenewMonths.value) || null
+    }))
+    .filter(item => item.selectedOption !== null)
+})
+
+const batchRenewIneligibleItems = computed(() => {
+  return batchRenewPreview.value.filter(item => !item.canRenew || !item.options.some(option => option.months === batchRenewMonths.value))
+})
+
+const batchRenewTotal = computed(() => {
+  return batchRenewEligibleItems.value.reduce((sum, item) => sum + Number(item.selectedOption?.discountedPrice || 0), 0)
+})
+
+const batchRenewInsufficientBalance = computed(() => batchRenewBalance.value.balance < batchRenewTotal.value)
+const batchRenewBalanceAfter = computed(() => batchRenewBalance.value.balance - batchRenewTotal.value)
+const batchRenewCanSubmit = computed(() => (
+  batchRenewEligibleItems.value.length > 0 &&
+  batchRenewMonthOptions.value.length > 0 &&
+  !batchRenewInsufficientBalance.value &&
+  !batchRenewSubmitting.value
+))
+
+const batchDestroyEligibleItems = computed(() => batchDestroyPreview.value.filter(item => item.canDestroy))
+const batchDestroyIneligibleItems = computed(() => batchDestroyPreview.value.filter(item => !item.canDestroy))
+const batchDestroyTotalRefund = computed(() => batchDestroyEligibleItems.value.reduce((sum, item) => sum + item.refund.refundAmount, 0))
+const batchDestroyTotalFee = computed(() => batchDestroyEligibleItems.value.reduce((sum, item) => sum + item.refund.feeAmount, 0))
+const batchDestroyCanSubmit = computed(() => batchDestroyEligibleItems.value.length > 0 && batchDestroyConfirm.value === 'DESTROY' && !batchDestroySubmitting.value)
+const isInstanceOrderView = computed(() => search.value.trim() === '' && countryFilter.value === null)
+const canReorderInstances = computed(() => (
+  isInstanceOrderView.value &&
+  (
+    !isAdmin.value ||
+    filterUserId.value === (authStore.user?.id || null)
+  )
+))
+
+let refreshInterval: ReturnType<typeof setInterval> | null = null
+let orderFeedbackTimer: ReturnType<typeof setTimeout> | null = null
+
+// 监听搜索变化（防抖）
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+watch(search, () => {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    page.value = 1
+    loadInstances()
+  }, 300)
+})
+
+// 监听路由参数变化（管理员切换查看不同用户的实例）
+watch(
+  () => route.query.userId,
+  async (newUserId, oldUserId) => {
+    if (newUserId === oldUserId) return
+    
+    // 更新筛选条件
+    if (newUserId) {
+      filterUserId.value = parseInt(newUserId as string)
+      // 获取用户名
+      try {
+        const res = await api.users.get(filterUserId.value)
+        filterUserName.value = (res as { user?: { username?: string } }).user?.username || ''
+      } catch {
+        filterUserName.value = ''
+      }
+    } else {
+      filterUserId.value = null
+      filterUserName.value = ''
+    }
+    
+    // 重置分页并重新加载
+    page.value = 1
+    loading.value = true
+    await loadInstances()
+  },
+  { immediate: false }
+)
+
+// 判断是否为管理员
+const isAdmin = computed<boolean>(() => authStore.user?.role === 'admin')
+
+function updateViewportState(): void {
+  if (typeof window === 'undefined') return
+  isDesktopViewport.value = window.innerWidth >= 1024
+}
+
+function loadInstanceLayoutPreference(): void {
+  if (typeof window === 'undefined') return
+  try {
+    const stored = localStorage.getItem(INSTANCE_LAYOUT_STORAGE_KEY)
+    userSelectedLayout.value = stored === 'list' || stored === 'card' ? stored : null
+  } catch {
+    userSelectedLayout.value = null
+  }
+}
+
+function setInstanceLayoutMode(mode: InstanceLayoutMode): void {
+  userSelectedLayout.value = mode
+  if (typeof window === 'undefined') return
+  try {
+    localStorage.setItem(INSTANCE_LAYOUT_STORAGE_KEY, mode)
+  } catch {
+    // ignore storage errors
+  }
+}
+
+onMounted(async (): Promise<void> => {
+  updateViewportState()
+  loadInstanceLayoutPreference()
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', updateViewportState)
+  }
+
+  // 从 URL 获取 userId 参数（首次加载）
+  if (route.query.userId) {
+    filterUserId.value = parseInt(route.query.userId as string)
+    // 获取用户名
+    try {
+      const res = await api.users.get(filterUserId.value)
+      filterUserName.value = (res as { user?: { username?: string } }).user?.username || ''
+    } catch {
+      // 忽略错误
+    }
+  } else {
+    // 确保没有 userId 时清空筛选
+    filterUserId.value = null
+    filterUserName.value = ''
+  }
+  
+  await loadInstances()
+  // 每 15 秒自动刷新
+  refreshInterval = setInterval(loadInstances, 15000)
+})
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', updateViewportState)
+  }
+  if (refreshInterval) clearInterval(refreshInterval)
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = null
+  }
+  clearInstanceOrderFeedback()
+})
+
+// 当组件被 KeepAlive 停用时，暂停定时器
+onDeactivated(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+    refreshInterval = null
+  }
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = null
+  }
+  clearInstanceOrderFeedback()
+})
+
+// 当组件从 KeepAlive 缓存中激活时，重新加载数据
+onActivated(async () => {
+  updateViewportState()
+  // 恢复定时刷新
+  if (!refreshInterval) {
+    refreshInterval = setInterval(loadInstances, 15000)
+  }
+  
+  // 检查路由参数是否与当前筛选一致
+  const currentUserId = route.query.userId ? parseInt(route.query.userId as string) : null
+  
+  if (currentUserId !== filterUserId.value) {
+    // 路由参数已变化，更新筛选并重新加载
+    if (currentUserId) {
+      filterUserId.value = currentUserId
+      try {
+        const res = await api.users.get(filterUserId.value)
+        filterUserName.value = (res as { user?: { username?: string } }).user?.username || ''
+      } catch {
+        filterUserName.value = ''
+      }
+    } else {
+      filterUserId.value = null
+      filterUserName.value = ''
+    }
+    page.value = 1
+  }
+  
+  // 总是重新加载数据以确保最新
+  await loadInstances()
+})
+
+async function loadInstances(force = false): Promise<void> {
+  // 如果有操作进行中，跳过刷新
+  if (
+    !force &&
+    loading.value === false &&
+    (
+      Object.keys(actionLoading.value).length > 0 ||
+      orderLoading.value ||
+      batchActionLoading.value ||
+      batchRenewSubmitting.value ||
+      batchDestroySubmitting.value
+    )
+  ) return
+  
+  try {
+    const params: { page: number; pageSize: number; search: string; userId?: number } = {
+      page: page.value,
+      pageSize: pageSize.value,
+      search: search.value
+    }
+    
+    if (filterUserId.value) {
+      params.userId = filterUserId.value
+    }
+
+    if (countryFilter.value) {
+      ;(params as typeof params & { countryCode?: string }).countryCode = countryFilter.value
+    }
+    
+    const response = await api.instances.list(params)
+    const data = response as { instances?: Instance[]; total?: number; totalPages?: number; availableCountries?: string[] }
+    const nextInstances = data.instances || []
+    instances.value = nextInstances
+    total.value = data.total || 0
+    totalPages.value = Math.max(1, data.totalPages || 1)
+    availableCountries.value = (data.availableCountries || []).map(code => code.toLowerCase())
+
+    if (page.value > totalPages.value) {
+      page.value = totalPages.value
+      return loadInstances(force)
+    }
+
+    const visibleIds = new Set(nextInstances.map(instance => instance.id))
+    selectedIds.value = new Set([...selectedIds.value].filter(id => visibleIds.has(id)))
+  } catch (error) {
+    console.error('Failed to load instances:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function toggleSelectAll(): void {
+  if (isAllSelected.value) {
+    selectedIds.value = new Set()
+  } else {
+    selectedIds.value = new Set(instances.value.map(instance => instance.id))
+  }
+}
+
+function toggleSelect(id: number): void {
+  const next = new Set(selectedIds.value)
+  if (next.has(id)) {
+    next.delete(id)
+  } else {
+    next.add(id)
+  }
+  selectedIds.value = next
+}
+
+function clearSelection(): void {
+  selectedIds.value = new Set()
+}
+
+function setCountryFilter(code: string | null): void {
+  if (countryFilter.value === code) return
+  countryFilter.value = code
+  page.value = 1
+  clearSelection()
+  void loadInstances()
+}
+
+function getCountryLabel(code: string): string {
+  return getLocalizedCountryName(code, locale.value, (key, fallback) => t(key, fallback))
+}
+
+function handleCountryStripWheel(event: WheelEvent): void {
+  const container = event.currentTarget as HTMLElement | null
+  if (!container) return
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
+  container.scrollLeft += event.deltaY
+  event.preventDefault()
+}
+
+function handlePageSizeChange(): void {
+  page.value = 1
+  clearSelection()
+  void loadInstances()
+}
+
+function goToPage(nextPage: number): void {
+  if (nextPage < 1 || nextPage > totalPages.value || nextPage === page.value) return
+  page.value = nextPage
+  clearSelection()
+  void loadInstances()
+}
+
+function formatCurrency(value: number | null | undefined): string {
+  if (configStore.freeSiteMode) return freeSiteCopy.moneyJustForShow
+  return `¥${Number(value || 0).toFixed(2)}`
+}
+
+function getBatchRenewMonthsLabel(months: number): string {
+  return configStore.freeSiteMode ? getFreeSiteBillingCycleLabel(months) : t('billing.renewMonths', { months })
+}
+
+function getInstanceLayoutButtonClass(mode: InstanceLayoutMode): string {
+  const active = instanceLayoutMode.value === mode
+  if (active) {
+    return themeStore.isDark
+      ? 'bg-white text-gray-900 shadow-sm'
+      : 'bg-gray-900 text-white shadow-sm'
+  }
+  return themeStore.isDark
+    ? 'text-gray-400 hover:text-gray-100'
+    : 'text-gray-500 hover:text-gray-900'
+}
+
+function formatDate(value: string | null | undefined): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return formatExpiryDate(date)
+}
+
+function clearUserFilter(): void {
+  clearSelection()
+  page.value = 1
+  filterUserId.value = null
+  filterUserName.value = ''
+  router.replace({ query: {} })
+  void loadInstances()
+}
+
+// 遮蔽 IPv4 地址后两位，例如：1.2.3.4 -> 1.2.*.*
+function maskIpv4(ip: string | null | undefined): string | null {
+  if (!ip) return null
+  const parts = ip.split('.')
+  if (parts.length === 4) {
+    return `${parts[0]}.${parts[1]}.*.*`
+  }
+  return ip
+}
+
+function isIpv4Address(ip: string | null | undefined): boolean {
+  if (!ip) return false
+  return /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip)
+}
+
+function getHostIpv6(instance: Instance): string | null {
+  let hostIpv6 = instance.hostNatPublicIpv6 || null
+  if (!hostIpv6 && instance.hostIpAddress && instance.hostIpAddress.includes(':')) {
+    hostIpv6 = instance.hostIpAddress
+  }
+  if (!hostIpv6 && instance.hostIpv6Gateway) {
+    hostIpv6 = instance.hostIpv6Gateway
+  }
+  return hostIpv6
+}
+
+function getIps(instance: Instance): Array<{ip: string, type: 'ipv4' | 'ipv6'}> {
+  const mode = instance.networkMode || instance.network_mode
+  const ips: Array<{ip: string, type: 'ipv4' | 'ipv6'}> = []
+
+  const natPublicIp = instance.natPublicIp || instance.host?.nat_public_ip
+  const maskedNatIp = isIpv4Address(natPublicIp) ? maskIpv4(natPublicIp) : null
+  const maskedPrivateIp = maskIpv4(instance.ipv4)
+  const hostIpv6 = getHostIpv6(instance)
+
+  if (mode === 'nat') {
+    if (maskedNatIp) ips.push({ ip: maskedNatIp, type: 'ipv4' })
+    else if (maskedPrivateIp) ips.push({ ip: maskedPrivateIp, type: 'ipv4' })
+  } else if (mode === 'nat_ipv6') {
+    if (maskedNatIp) ips.push({ ip: maskedNatIp, type: 'ipv4' })
+    else if (maskedPrivateIp) ips.push({ ip: maskedPrivateIp, type: 'ipv4' })
+    if (instance.ipv6) ips.push({ ip: instance.ipv6, type: 'ipv6' })
+  } else if (mode === 'nat_ipv6_nat') {
+    if (maskedNatIp) ips.push({ ip: maskedNatIp, type: 'ipv4' })
+    else if (maskedPrivateIp) ips.push({ ip: maskedPrivateIp, type: 'ipv4' })
+    if (hostIpv6) ips.push({ ip: hostIpv6, type: 'ipv6' })
+  } else if (mode === 'ipv6_nat') {
+    if (hostIpv6) ips.push({ ip: hostIpv6, type: 'ipv6' })
+  } else if (mode === 'ipv6_only') {
+    if (instance.ipv6) ips.push({ ip: instance.ipv6, type: 'ipv6' })
+  } else {
+    if (maskedPrivateIp) ips.push({ ip: maskedPrivateIp, type: 'ipv4' })
+    if (instance.ipv6) ips.push({ ip: instance.ipv6, type: 'ipv6' })
+  }
+
+  return ips
+}
+
+function getInstanceNetworkMode(instance: Instance): string {
+  return String((instance as any).networkMode || instance.network_mode || 'nat')
+}
+
+function getInstanceNetworkModeClass(instance: Instance): string {
+  switch (getInstanceNetworkMode(instance)) {
+    case 'nat':
+      return themeStore.isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-50 text-yellow-700'
+    case 'nat_ipv6':
+      return themeStore.isDark ? 'bg-blue-900/50 text-blue-400' : 'bg-blue-100 text-blue-600'
+    case 'nat_ipv6_nat':
+      return themeStore.isDark ? 'bg-cyan-900/50 text-cyan-400' : 'bg-cyan-100 text-cyan-600'
+    case 'ipv6_only':
+      return themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600'
+    case 'ipv6_nat':
+      return themeStore.isDark ? 'bg-teal-900/50 text-teal-400' : 'bg-teal-100 text-teal-600'
+    default:
+      return themeStore.isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-50 text-yellow-700'
+  }
+}
+
+function getInstanceTypeBadgeClass(instance: Instance): string {
+  return (instance as any).instanceType === 'vm'
+    ? (themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600')
+    : (themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-600')
+}
+
+function getInstanceTypeDisplayLabel(instance: Instance): string {
+  return (instance as any).instanceType === 'vm' ? t('common.instanceType.vm') : t('common.instanceType.container')
+}
+
+function getInstanceHostName(instance: Instance): string {
+  return (instance as any).host?.name || (instance as any).host || '-'
+}
+
+function getInstancePackageName(instance: Instance): string | null {
+  return (instance as any).packageName || (instance as any).package?.name || null
+}
+
+function getCardActionButtonClass(variant: 'default' | 'danger' = 'default'): string {
+  if (variant === 'danger') {
+    return themeStore.isDark
+      ? 'border-red-500/20 bg-red-500/5 text-red-300 hover:border-red-500/35 hover:bg-red-500/10'
+      : 'border-red-200 bg-red-50/70 text-red-600 hover:border-red-300 hover:bg-red-100'
+  }
+
+  return themeStore.isDark
+    ? 'border-gray-800 bg-gray-900/60 text-gray-300 hover:border-gray-700 hover:bg-gray-900'
+    : 'border-gray-200 bg-gray-50/80 text-gray-600 hover:border-gray-300 hover:bg-gray-100'
+}
+
+// 从镜像名称提取发行版标识（用于 DistroIcon 组件）
+function getDistroFromName(name: string): string {
+  const lowerName = (name || '').toLowerCase()
+  const distros = ['almalinux', 'alma', 'alpine', 'arch', 'centos', 'debian', 'fedora', 'gentoo', 'kali', 'mint', 'opensuse', 'suse', 'oracle', 'redhat', 'rhel', 'rockylinux', 'rocky', 'ubuntu', 'void']
+  for (const distro of distros) {
+    if (lowerName.includes(distro)) return distro
+  }
+  return 'linux'
+}
+
+// 获取付费实例的图标类型（根据节点名称判断）
+// 返回 'pro' | 'prime' | 'peer' | null
+function getPaidIconType(instance: Instance): 'pro' | 'prime' | 'peer' | null {
+  // 只有付费实例才显示付费图标
+  if (!instance.packagePlanId) return null
+  
+  // 如果节点名称以 PEER 开头（不区分大小写），则是托管实例，显示 peer 图标
+  const hostName = instance.host?.name || ''
+  if (/^PEER\d/i.test(hostName)) {
+    return 'peer'
+  }
+  
+  // 根据实例类型判断：虚拟机显示 prime，容器显示 pro
+  return instance.instanceType === 'vm' ? 'prime' : 'pro'
+}
+
+// 格式化镜像名称：优先使用 imageName，否则去掉 images: 前缀
+function formatImageName(image: string, imageName?: string | null): string {
+  if (imageName) return imageName
+  return image?.replace(/^images:/, '') || ''
+}
+
+interface InstanceExpiryInfo {
+  dateText: string | null
+  remainingText: string
+  className: string
+  title: string | null
+}
+
+function formatExpiryDate(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+function getInstanceExpiryInfo(instance: Instance): InstanceExpiryInfo {
+  const expiresAt = instance.expires_at || (instance as any).expiresAt || null
+  if (!expiresAt) {
+    return {
+      dateText: null,
+      remainingText: t('instance.freeInstanceLabel'),
+      className: 'text-green-500 dark:text-green-400',
+      title: null
+    }
+  }
+
+  const expires = new Date(expiresAt)
+  if (Number.isNaN(expires.getTime())) {
+    return {
+      dateText: null,
+      remainingText: t('instance.freeInstanceLabel'),
+      className: 'text-green-500 dark:text-green-400',
+      title: null
+    }
+  }
+
+  const now = new Date()
+  const diff = expires.getTime() - now.getTime()
+  const remainingDays = Math.ceil(diff / (1000 * 60 * 60 * 24))
+  const dateText = formatExpiryDate(expires)
+  const autoRenew = (instance as any).autoRenew === true
+
+  if (autoRenew) {
+    return {
+      dateText,
+      remainingText: t('billing.autoRenewing'),
+      className: 'text-green-500 dark:text-green-400',
+      title: expires.toLocaleString()
+    }
+  }
+
+  if (remainingDays <= 0) {
+    return {
+      dateText,
+      remainingText: t('instance.expiredLabel'),
+      className: 'text-red-500 dark:text-red-400',
+      title: expires.toLocaleString()
+    }
+  }
+
+  if (remainingDays <= 3) {
+    return {
+      dateText,
+      remainingText: `${remainingDays} ${t('common.days')}`,
+      className: 'text-red-500 dark:text-red-400',
+      title: expires.toLocaleString()
+    }
+  }
+
+  if (remainingDays <= 7) {
+    return {
+      dateText,
+      remainingText: `${remainingDays} ${t('common.days')}`,
+      className: 'text-yellow-500 dark:text-yellow-400',
+      title: expires.toLocaleString()
+    }
+  }
+
+  return {
+    dateText,
+    remainingText: `${remainingDays} ${t('common.days')}`,
+    className: 'text-green-500 dark:text-green-400',
+    title: expires.toLocaleString()
+  }
+}
+
+type InstanceAction = 'start' | 'stop' | 'restart' | 'delete'
+type BatchSimpleAction = 'start' | 'stop' | 'restart' | 'sync'
+type InstanceOrderAction = 'top' | 'up' | 'down' | 'bottom'
+const SIMPLE_BATCH_CONCURRENCY = 5
+const INSTANCE_ORDER_ACTIONS: InstanceOrderAction[] = ['top', 'up', 'down', 'bottom']
+
+const instanceOrderLabels = computed<Record<InstanceOrderAction, string>>(() => ({
+  top: t('instance.order.top'),
+  up: t('instance.order.up'),
+  down: t('instance.order.down'),
+  bottom: t('instance.order.bottom')
+}))
+
+function getInstanceIndex(instanceId: number): number {
+  return instances.value.findIndex(instance => instance.id === instanceId)
+}
+
+function canMoveInstance(instanceId: number, action: InstanceOrderAction): boolean {
+  if (orderLoading.value || !canReorderInstances.value || total.value <= 1) return false
+  const index = getInstanceIndex(instanceId)
+  if (index < 0) return false
+  const globalIndex = (page.value - 1) * pageSize.value + index
+  if (action === 'top' || action === 'up') return globalIndex > 0
+  return globalIndex < total.value - 1
+}
+
+function getInstanceOrderDisabledActions(instanceId: number): Record<InstanceOrderAction, boolean> {
+  return {
+    top: !canMoveInstance(instanceId, 'top'),
+    up: !canMoveInstance(instanceId, 'up'),
+    down: !canMoveInstance(instanceId, 'down'),
+    bottom: !canMoveInstance(instanceId, 'bottom')
+  }
+}
+
+function clearInstanceOrderFeedback(): void {
+  if (orderFeedbackTimer) {
+    clearTimeout(orderFeedbackTimer)
+    orderFeedbackTimer = null
+  }
+  recentlyOrderedInstanceId.value = null
+}
+
+function markInstanceOrderFeedback(instanceId: number): void {
+  clearInstanceOrderFeedback()
+  recentlyOrderedInstanceId.value = instanceId
+  orderFeedbackTimer = setTimeout(() => {
+    recentlyOrderedInstanceId.value = null
+    orderFeedbackTimer = null
+  }, 1100)
+}
+
+function getVisibleReorderTargetIndex(currentIndex: number, action: InstanceOrderAction): number | null {
+  const pageStartIndex = (page.value - 1) * pageSize.value
+  const globalIndex = pageStartIndex + currentIndex
+  let targetGlobalIndex = globalIndex
+  if (action === 'top') targetGlobalIndex = 0
+  else if (action === 'up') targetGlobalIndex = globalIndex - 1
+  else if (action === 'down') targetGlobalIndex = globalIndex + 1
+  else targetGlobalIndex = total.value - 1
+
+  const targetIndex = targetGlobalIndex - pageStartIndex
+  if (targetIndex < 0 || targetIndex >= instances.value.length) {
+    return null
+  }
+  return targetIndex
+}
+
+async function reorderInstance(instance: Instance, action: InstanceOrderAction): Promise<void> {
+  if (!canMoveInstance(instance.id, action)) return
+
+  const currentIndex = getInstanceIndex(instance.id)
+  if (currentIndex < 0) return
+
+  const nextInstances = [...instances.value]
+  const targetIndex = getVisibleReorderTargetIndex(currentIndex, action)
+  if (targetIndex !== null) {
+    const [moved] = nextInstances.splice(currentIndex, 1)
+    if (!moved) return
+    nextInstances.splice(targetIndex, 0, moved)
+  }
+
+  try {
+    orderLoading.value = true
+    if (targetIndex !== null) {
+      instances.value = nextInstances
+      markInstanceOrderFeedback(instance.id)
+    }
+    await api.instances.updateOrder(instance.id, action)
+    await loadInstances(true)
+    toast.success(t('instance.order.updateSuccess'))
+  } catch (error: any) {
+    clearInstanceOrderFeedback()
+    toast.error(t('instance.order.updateFailed') + ': ' + translateError(error))
+    await loadInstances(true)
+  } finally {
+    orderLoading.value = false
+  }
+}
+
+async function handleAction(instance: Instance, action: InstanceAction): Promise<void> {
+  actionLoading.value[instance.id] = action
+  
+  try {
+    if (action === 'start') {
+      await api.instances.start(instance.id)
+      toast.success(t('instance.startingInstance', { name: instance.name }))
+      // 更新本地状态为启动中
+      const idx = instances.value.findIndex(i => i.id === instance.id)
+      if (idx !== -1) {
+        (instances.value[idx] as any).status = 'starting'
+      }
+    }
+    else if (action === 'stop') {
+      await api.instances.stop(instance.id)
+      toast.success(t('instance.stoppedInstance', { name: instance.name }))
+      // 更新本地状态为已停止
+      const idx = instances.value.findIndex(i => i.id === instance.id)
+      if (idx !== -1) {
+        instances.value[idx] = { ...instances.value[idx], status: 'stopped' }
+      }
+    }
+    else if (action === 'restart') {
+      await api.instances.restart(instance.id)
+      toast.success(t('instance.restartingInstance', { name: instance.name }))
+      // 更新本地状态为重启中
+      const idx = instances.value.findIndex(i => i.id === instance.id)
+      if (idx !== -1) {
+        (instances.value[idx] as any).status = 'restarting'
+      }
+    }
+    else if (action === 'delete') {
+      if (!confirm(t('instance.confirmDelete', { name: instance.name }))) {
+        delete actionLoading.value[instance.id]
+        return
+      }
+      await api.instances.delete(instance.id)
+      // 立即从本地列表移除，提供即时反馈
+      instances.value = instances.value.filter(i => i.id !== instance.id)
+      total.value = Math.max(0, total.value - 1)
+      toast.success(t('instance.deletedInstance', { name: instance.name }))
+    }
+  } catch (error: any) {
+    // 检查是否需要二次验证
+    if (error?.code === 'VERIFICATION_REQUIRED' || error?.message?.includes('Sensitive operation requires verification')) {
+      toast.error(t('instance.verificationRequiredHint'), 6000)
+    } else {
+      toast.error(`${t('instance.actionFailed')}: ${translateError(error)}`)
+    }
+    // 操作失败时重新加载以恢复正确状态
+    await loadInstances(true)
+  } finally {
+    delete actionLoading.value[instance.id]
+  }
+}
+
+function openInstanceDetail(instanceId: number): void {
+  router.push(`/instances/${instanceId}`)
+}
+
+function getBatchTargets(action: BatchSimpleAction): Instance[] {
+  if (action === 'start') {
+    return selectedInstances.value.filter(instance => instance.status?.toLowerCase() === 'stopped')
+  }
+  if (action === 'stop' || action === 'restart') {
+    return selectedInstances.value.filter(instance => instance.status?.toLowerCase() === 'running')
+  }
+  return selectedInstances.value
+}
+
+async function runWithConcurrency<T, R>(
+  items: T[],
+  concurrency: number,
+  handler: (item: T) => Promise<R>
+): Promise<PromiseSettledResult<R>[]> {
+  const results: PromiseSettledResult<R>[] = new Array(items.length)
+  let currentIndex = 0
+
+  async function worker(): Promise<void> {
+    while (true) {
+      const index = currentIndex
+      currentIndex += 1
+      if (index >= items.length) break
+      try {
+        const value = await handler(items[index])
+        results[index] = { status: 'fulfilled', value }
+      } catch (error) {
+        results[index] = { status: 'rejected', reason: error }
+      }
+    }
+  }
+
+  await Promise.all(Array.from({ length: Math.min(concurrency, items.length) }, () => worker()))
+  return results
+}
+
+function translateBatchReason(reason?: string): string {
+  if (!reason) return t('instance.batch.unknownReason')
+  if (reason === '实例不存在' || reason === '实例不存在或无权操作' || reason === '无权操作该实例') {
+    return t('instance.batchReason.notFoundOrForbidden')
+  }
+  if (reason === '免费实例无需续费') {
+    return t('instance.batchReason.freeNoRenew')
+  }
+  if (reason === '无法获取实例计费信息') {
+    return t('instance.batchReason.billingUnavailable')
+  }
+  if (reason === '暂无可用续费选项') {
+    return t('instance.batchReason.noRenewOptions')
+  }
+  if (reason === '该实例不支持当前续费时长') {
+    return t('instance.batch.unsupportedPeriod')
+  }
+  if (reason === '免费实例不支持自动续费') {
+    return t('instance.batchReason.freeNoAutoRenew')
+  }
+  if (reason === '已经开启自动续费') {
+    return t('instance.batchReason.autoRenewAlreadyOn')
+  }
+  if (reason === '已经关闭自动续费') {
+    return t('instance.batchReason.autoRenewAlreadyOff')
+  }
+  if (reason === '实例已删除') {
+    return t('instance.batchReason.deleted')
+  }
+  if (reason === '实例正在创建中，无法销毁') {
+    return t('instance.batchReason.creating')
+  }
+  if (reason === '实例已被封停，无法销毁，请先联系管理员解封') {
+    return t('instance.batchReason.suspended')
+  }
+  if (reason === '当前月流量周期无法销毁，已用流量达到或超过 5G') {
+    return t('instance.batchReason.destroyTrafficLimit')
+  }
+  if (reason === '续费失败') {
+    return t('instance.batchReason.renewFailed')
+  }
+  if (reason === '自动续费设置失败') {
+    return t('instance.batchReason.autoRenewFailed')
+  }
+  if (reason === '销毁实例失败') {
+    return t('instance.batchReason.destroyFailed')
+  }
+
+  const renewWindowMatch = reason.match(/^仅可在到期前\s*(\d+)\s*天内续费$/)
+  if (renewWindowMatch) {
+    return t('instance.batchReason.renewWindow', { days: renewWindowMatch[1] })
+  }
+
+  return reason
+}
+
+async function handleBatchSimpleAction(action: BatchSimpleAction): Promise<void> {
+  const targets = getBatchTargets(action)
+  if (targets.length === 0) {
+    toast.warning(t('instance.batch.noEligibleAction'))
+    return
+  }
+
+  batchActionLoading.value = action
+  try {
+    const settled = await runWithConcurrency(
+      targets,
+      SIMPLE_BATCH_CONCURRENCY,
+      async (instance) => {
+        if (action === 'start') return api.instances.start(instance.id)
+        if (action === 'stop') return api.instances.stop(instance.id)
+        if (action === 'restart') return api.instances.restart(instance.id)
+        return api.instances.syncStatus(instance.id)
+      }
+    )
+
+    const successCount = settled.filter(item => item.status === 'fulfilled').length
+    const failedCount = settled.length - successCount
+    const skippedCount = selectedCount.value - targets.length
+
+    if (failedCount > 0) {
+      toast.warning(t('instance.batch.partialResult', { success: successCount, failed: failedCount, skipped: skippedCount }))
+    } else {
+      toast.success(t('instance.batch.successResult', { count: successCount }))
+    }
+
+    clearSelection()
+    await loadInstances(true)
+  } catch (error: any) {
+    toast.error(t('instance.batch.actionFailed') + ': ' + translateError(error))
+  } finally {
+    batchActionLoading.value = ''
+  }
+}
+
+async function handleBatchAutoRenew(autoRenew: boolean): Promise<void> {
+  if (selectedCount.value === 0 || isViewingAnotherUsersInstances.value) return
+
+  batchActionLoading.value = autoRenew ? 'autoRenewOn' : 'autoRenewOff'
+  try {
+    const result = await api.billing.setAutoRenewBatch(Array.from(selectedIds.value), autoRenew)
+    if (result.failedCount > 0) {
+      toast.warning(t('instance.batch.partialResult', {
+        success: result.successCount,
+        failed: result.failedCount,
+        skipped: result.skippedCount
+      }))
+    } else {
+      toast.success(t(autoRenew ? 'billing.autoRenewEnabled' : 'billing.autoRenewDisabled'))
+    }
+    clearSelection()
+    await loadInstances(true)
+  } catch (error: any) {
+    toast.error(t('instance.batch.actionFailed') + ': ' + translateError(error))
+  } finally {
+    batchActionLoading.value = ''
+  }
+}
+
+async function openBatchRenewModal(): Promise<void> {
+  if (selectedCount.value === 0 || isViewingAnotherUsersInstances.value) return
+
+  showBatchRenewModal.value = true
+  batchRenewLoading.value = true
+  batchRenewPreview.value = []
+  batchRenewMonths.value = 1
+
+  try {
+    const [previewRes, balanceRes] = await Promise.all([
+      api.billing.previewBatchRenew(Array.from(selectedIds.value)),
+      api.billing.getUserBalance()
+    ])
+    batchRenewPreview.value = previewRes.items
+    batchRenewBalance.value = balanceRes.balance
+    batchRenewMonths.value = batchRenewMonthOptions.value.includes(1)
+      ? 1
+      : (batchRenewMonthOptions.value[0] || 1)
+  } catch (error: any) {
+    toast.error(t('instance.batch.previewFailed') + ': ' + translateError(error))
+    showBatchRenewModal.value = false
+  } finally {
+    batchRenewLoading.value = false
+  }
+}
+
+function closeBatchRenewModal(force = false): void {
+  if (batchRenewSubmitting.value && !force) return
+  showBatchRenewModal.value = false
+  batchRenewPreview.value = []
+  batchRenewMonths.value = 1
+}
+
+async function confirmBatchRenew(): Promise<void> {
+  if (!batchRenewCanSubmit.value) return
+
+  batchRenewSubmitting.value = true
+  try {
+    const result = await api.billing.renewInstancesBatch(Array.from(selectedIds.value), batchRenewMonths.value)
+    if (result.failedCount > 0) {
+      toast.warning(t('instance.batch.partialResult', {
+        success: result.successCount,
+        failed: result.failedCount,
+        skipped: result.skippedCount
+      }))
+    } else {
+      toast.success(t('instance.batch.successResult', { count: result.successCount }))
+    }
+    closeBatchRenewModal(true)
+    clearSelection()
+    await loadInstances(true)
+  } catch (error: any) {
+    toast.error(t('instance.batch.actionFailed') + ': ' + translateError(error))
+  } finally {
+    batchRenewSubmitting.value = false
+  }
+}
+
+async function openBatchDestroyModal(): Promise<void> {
+  if (selectedCount.value === 0 || isViewingAnotherUsersInstances.value) return
+
+  showBatchDestroyModal.value = true
+  batchDestroyLoading.value = true
+  batchDestroyConfirm.value = ''
+  batchDestroyPreview.value = []
+
+  try {
+    const result = await api.billing.getBatchDestroyInfo(Array.from(selectedIds.value))
+    batchDestroyPreview.value = result.items
+  } catch (error: any) {
+    toast.error(t('instance.batch.previewFailed') + ': ' + translateError(error))
+    showBatchDestroyModal.value = false
+  } finally {
+    batchDestroyLoading.value = false
+  }
+}
+
+function closeBatchDestroyModal(force = false): void {
+  if (batchDestroySubmitting.value && !force) return
+  showBatchDestroyModal.value = false
+  batchDestroyConfirm.value = ''
+  batchDestroyPreview.value = []
+}
+
+async function confirmBatchDestroy(): Promise<void> {
+  if (!batchDestroyCanSubmit.value) return
+
+  batchDestroySubmitting.value = true
+  try {
+    const result = await api.billing.destroyInstancesBatch(Array.from(selectedIds.value))
+    if (result.failedCount > 0) {
+      toast.warning(t('instance.batch.partialResult', {
+        success: result.successCount,
+        failed: result.failedCount,
+        skipped: result.skippedCount
+      }))
+    } else {
+      toast.success(t('instance.batch.successResult', { count: result.successCount }))
+    }
+    closeBatchDestroyModal(true)
+    clearSelection()
+    await loadInstances(true)
+  } catch (error: any) {
+    toast.error(t('instance.batch.actionFailed') + ': ' + translateError(error))
+  } finally {
+    batchDestroySubmitting.value = false
+  }
+}
+
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- 页面头部 -->
+    <div class="page-header flex-col sm:flex-row gap-4 sm:gap-0">
+      <div>
+        <h1 class="page-title text-lg sm:text-xl">{{ $t('instance.title') }}</h1>
+        <p class="page-description">
+          <template v-if="filterUserId && filterUserName">
+            {{ $t('instance.userInstances', { name: filterUserName }) }}
+            <button class="text-blue-500 hover:text-blue-400 ml-2 text-sm" @click="clearUserFilter">
+              {{ $t('instance.clearFilter') }}
+            </button>
+          </template>
+          <template v-else>
+            {{ $t('instance.manageDesc') }}
+          </template>
+        </p>
+      </div>
+      <RouterLink to="/instances/create" class="btn-primary w-full sm:w-auto justify-center">
+        <svg 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="M12 4v16m8-8H4" />
+        </svg>
+        {{ configStore.freeSiteMode ? freeSiteCopy.instanceCreate : $t('instance.create') }}
+      </RouterLink>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+      <div class="flex flex-col gap-3 flex-1 min-w-0 xl:flex-row xl:items-center">
+        <div class="relative w-full xl:max-w-sm">
+          <input
+            v-model="search"
+            type="text"
+            :placeholder="$t('instance.searchPlaceholder')"
+            class="input pl-9 w-full"
+          />
+          <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+
+        <div
+          v-if="countryFilterOptions.length > 0"
+          class="hidden sm:flex items-center min-w-0 flex-1"
+        >
+          <div
+            class="flex items-center gap-2 overflow-x-auto pb-1 pr-1 min-w-0 scrollbar-thin"
+            @wheel="handleCountryStripWheel"
+          >
+            <button
+              type="button"
+              class="h-10 px-3 rounded-xl border text-xs font-semibold shrink-0 transition-colors"
+              :class="countryFilter === null
+                ? (themeStore.isDark ? 'border-blue-400 bg-blue-500/15 text-blue-300' : 'border-blue-500 bg-blue-50 text-blue-700')
+                : (themeStore.isDark ? 'border-gray-700 bg-gray-900 text-gray-300 hover:border-gray-600' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300')"
+              @click="setCountryFilter(null)"
+            >
+              ALL
+            </button>
+            <button
+              v-for="code in countryFilterOptions"
+              :key="`desktop-country-${code}`"
+              type="button"
+              class="h-10 w-10 rounded-xl border flex items-center justify-center shrink-0 transition-all"
+              :class="countryFilter === code
+                ? (themeStore.isDark ? 'border-blue-400 bg-blue-500/15 shadow-sm shadow-blue-500/10' : 'border-blue-500 bg-blue-50 shadow-sm shadow-blue-500/10')
+                : (themeStore.isDark ? 'border-gray-700 bg-gray-900 hover:border-gray-600' : 'border-gray-200 bg-white hover:border-gray-300')"
+              :title="getCountryLabel(code)"
+              :aria-label="getCountryLabel(code)"
+              @click="setCountryFilter(code)"
+            >
+              <FlagIcon :code="code" size="sm" />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="hidden sm:flex flex-wrap items-center gap-3 xl:justify-end">
+        <div
+          class="inline-flex items-center rounded-xl border p-0.5"
+          :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/70' : 'border-gray-200 bg-gray-50/80'"
+        >
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors"
+            :class="getInstanceLayoutButtonClass('list')"
+            :title="$t('instance.listLayout')"
+            @click="setInstanceLayoutMode('list')"
+          >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+            <span class="hidden sm:inline">{{ $t('instance.listLayout') }}</span>
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors"
+            :class="getInstanceLayoutButtonClass('card')"
+            :title="$t('instance.cardLayout')"
+            @click="setInstanceLayoutMode('card')"
+          >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 5h6v6H5V5zm8 0h6v6h-6V5zM5 13h6v6H5v-6zm8 0h6v6h-6v-6z" />
+            </svg>
+            <span class="hidden sm:inline">{{ $t('instance.cardLayout') }}</span>
+          </button>
+        </div>
+        <span class="text-sm text-themed-muted whitespace-nowrap">{{ $t('instance.totalCount', { count: total }) }}</span>
+        <div class="inline-flex items-center gap-2 shrink-0">
+          <span class="text-sm text-themed-muted whitespace-nowrap">{{ $t('common.perPage') }}</span>
+          <div class="relative">
+            <select
+              v-model.number="pageSize"
+              class="input h-10 min-w-[96px] appearance-none rounded-xl py-2 pl-3 pr-9 text-sm leading-none"
+              @change="handlePageSizeChange"
+            >
+              <option v-for="size in pageSizeOptions" :key="size" :value="size">
+                {{ size }}
+              </option>
+            </select>
+            <svg
+              class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-themed-muted"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm:hidden flex items-center justify-between gap-3">
+      <span class="text-sm text-themed-muted whitespace-nowrap">{{ $t('instance.totalCount', { count: total }) }}</span>
+      <div class="flex items-center gap-2 shrink-0">
+        <span class="text-sm text-themed-muted whitespace-nowrap">{{ $t('common.perPage') }}</span>
+        <div class="relative">
+          <select
+            v-model.number="pageSize"
+            class="input h-10 min-w-[90px] appearance-none rounded-xl py-2 pl-3 pr-9 text-sm leading-none"
+            @change="handlePageSizeChange"
+          >
+            <option v-for="size in pageSizeOptions" :key="size" :value="size">
+              {{ size }}
+            </option>
+          </select>
+          <svg
+            class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-themed-muted"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="countryFilterOptions.length > 0"
+      class="sm:hidden"
+    >
+      <div
+        class="card p-3"
+      >
+        <div
+          class="flex items-center gap-2 overflow-x-auto min-w-0 scrollbar-thin"
+          @wheel="handleCountryStripWheel"
+        >
+          <button
+            type="button"
+            class="h-10 px-3 rounded-xl border text-xs font-semibold shrink-0 transition-colors"
+            :class="countryFilter === null
+              ? (themeStore.isDark ? 'border-blue-400 bg-blue-500/15 text-blue-300' : 'border-blue-500 bg-blue-50 text-blue-700')
+              : (themeStore.isDark ? 'border-gray-700 bg-gray-900 text-gray-300 hover:border-gray-600' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300')"
+            @click="setCountryFilter(null)"
+          >
+            ALL
+          </button>
+          <button
+            v-for="code in countryFilterOptions"
+            :key="`mobile-country-${code}`"
+            type="button"
+            class="h-10 w-10 rounded-xl border flex items-center justify-center shrink-0 transition-all"
+            :class="countryFilter === code
+              ? (themeStore.isDark ? 'border-blue-400 bg-blue-500/15 shadow-sm shadow-blue-500/10' : 'border-blue-500 bg-blue-50 shadow-sm shadow-blue-500/10')
+              : (themeStore.isDark ? 'border-gray-700 bg-gray-900 hover:border-gray-600' : 'border-gray-200 bg-white hover:border-gray-300')"
+            :title="getCountryLabel(code)"
+            :aria-label="getCountryLabel(code)"
+            @click="setCountryFilter(code)"
+          >
+            <FlagIcon :code="code" size="sm" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 批量操作条 -->
+    <div
+      v-if="hasSelectedInstances && !loading && instances.length > 0"
+      class="card p-4 space-y-4"
+    >
+      <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+        <div class="flex flex-wrap items-center gap-3">
+          <div
+            class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium"
+            :class="themeStore.isDark ? 'bg-blue-500/15 text-blue-300' : 'bg-blue-50 text-blue-700'"
+          >
+            <span class="inline-flex h-2 w-2 rounded-full bg-current"></span>
+            {{ $t('instance.batch.selectedCount', { count: selectedCount }) }}
+          </div>
+          <span class="text-sm text-themed-muted">{{ $t('instance.batch.currentPageOnly') }}</span>
+          <button class="btn-ghost btn-sm" @click="clearSelection">
+            {{ $t('instance.batch.clear') }}
+          </button>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2">
+          <button
+            class="btn-ghost btn-sm"
+            :disabled="selectedStoppedCount === 0 || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="handleBatchSimpleAction('start')"
+          >
+            <svg v-if="batchActionLoading === 'start'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('instance.batch.start') }}
+          </button>
+          <button
+            class="btn-ghost btn-sm"
+            :disabled="selectedRunningCount === 0 || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="handleBatchSimpleAction('stop')"
+          >
+            <svg v-if="batchActionLoading === 'stop'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('instance.batch.stop') }}
+          </button>
+          <button
+            class="btn-ghost btn-sm"
+            :disabled="selectedRunningCount === 0 || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="handleBatchSimpleAction('restart')"
+          >
+            <svg v-if="batchActionLoading === 'restart'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('instance.batch.restart') }}
+          </button>
+          <button
+            class="btn-ghost btn-sm"
+            :disabled="!hasSelectedInstances || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="handleBatchSimpleAction('sync')"
+          >
+            <svg v-if="batchActionLoading === 'sync'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('instance.batch.sync') }}
+          </button>
+          <button
+            class="btn-ghost btn-sm"
+            :disabled="selectedPaidCount === 0 || isViewingAnotherUsersInstances || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="handleBatchAutoRenew(true)"
+          >
+            <svg v-if="batchActionLoading === 'autoRenewOn'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('instance.batch.autoRenewOn') }}
+          </button>
+          <button
+            class="btn-ghost btn-sm"
+            :disabled="selectedPaidCount === 0 || isViewingAnotherUsersInstances || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="handleBatchAutoRenew(false)"
+          >
+            <svg v-if="batchActionLoading === 'autoRenewOff'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            {{ $t('instance.batch.autoRenewOff') }}
+          </button>
+          <button
+            class="btn-secondary btn-sm"
+            :disabled="selectedPaidCount === 0 || isViewingAnotherUsersInstances || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="openBatchRenewModal"
+          >
+            {{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchRenewAction : $t('instance.batch.renew') }}
+          </button>
+          <button
+            class="btn-danger btn-sm"
+            :disabled="!hasSelectedInstances || isViewingAnotherUsersInstances || !!batchActionLoading || batchRenewSubmitting || batchDestroySubmitting"
+            @click="openBatchDestroyModal"
+          >
+            {{ $t('instance.batch.destroy') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 加载骨架屏 -->
+    <SkeletonLoader
+      v-if="loading"
+      :type="isCardLayout ? 'grid' : 'table'"
+      :rows="isCardLayout ? 3 : 8"
+      :cols="isDesktopViewport ? 3 : 1"
+    />
+
+    <!-- 空状态 -->
+    <div v-else-if="instances.length === 0" class="card p-12 text-center">
+      <svg 
+        class="w-16 h-16 mx-auto mb-4" 
+        :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+      </svg>
+      <h3 
+        class="text-lg font-medium mb-2"
+        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+      >
+        {{ search ? $t('instance.noMatchingInstances') : $t('instance.noInstances') }}
+      </h3>
+      <p class="text-themed-muted mb-4">{{ search ? $t('instance.tryOtherKeywords') : $t('instance.createFirstInstance') }}</p>
+      <RouterLink v-if="!search" to="/instances/create" class="btn-primary">{{ configStore.freeSiteMode ? freeSiteCopy.instanceCreateFirst : $t('instance.create') }}</RouterLink>
+    </div>
+
+    <!-- 实例列表 -->
+    <template v-else>
+      <!-- 列表布局 -->
+      <div v-if="instanceLayoutMode === 'list'" class="hidden sm:block card overflow-x-auto">
+        <table class="w-full min-w-[1180px]">
+          <thead
+            class="border-b"
+            :class="themeStore.isDark ? 'bg-gray-900/50 border-gray-800' : 'bg-gray-50 border-gray-200'"
+          >
+            <tr>
+              <th class="px-4 py-3 w-12">
+                <div class="flex items-center justify-center">
+                  <button
+                    type="button"
+                    class="relative flex h-4 w-4 items-center justify-center rounded border transition-colors"
+                    :class="themeStore.isDark ? 'border-gray-600 bg-gray-950 text-blue-400' : 'border-gray-300 bg-white text-blue-600'"
+                    @click="toggleSelectAll"
+                  >
+                    <span v-if="isAllSelected" class="h-2 w-2 rounded-sm bg-current"></span>
+                    <span v-else-if="isPartialSelected" class="h-0.5 w-2 rounded-full bg-current"></span>
+                  </button>
+                </div>
+              </th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3">{{ $t('instance.name') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-3 py-3">{{ $t('instance.statusLabel') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-3 py-3">{{ $t('instance.ip') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-3 py-3">{{ $t('instance.modeLabel') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-3 py-3">{{ $t('instance.config') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-3 py-3">{{ $t('instance.quotaLabel') }}</th>
+              <th v-if="isAdmin" class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-3 py-3">{{ $t('instance.user') }}</th>
+              <th class="text-right text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3">{{ $t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <TransitionGroup
+            tag="tbody"
+            name="instance-table-order"
+            :class="themeStore.isDark ? 'divide-y divide-gray-800' : 'divide-y divide-gray-100'"
+          >
+            <tr
+              v-for="instance in instances"
+              :key="instance.id"
+              class="cursor-pointer"
+              :class="[
+                themeStore.isDark ? 'hover:bg-gray-900/30' : 'hover:bg-gray-50',
+                selectedIds.has(instance.id) ? (themeStore.isDark ? 'bg-blue-500/10' : 'bg-blue-50/80') : '',
+                recentlyOrderedInstanceId === instance.id ? (themeStore.isDark ? 'is-order-feedback-dark' : 'is-order-feedback-light') : '',
+                instance.status?.toLowerCase() === 'creating' ? 'creating-row' : ''
+              ]"
+              @click="openInstanceDetail(instance.id)"
+            >
+              <td class="px-4 py-3" @click.stop>
+                <div class="flex items-center justify-center">
+                  <input
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
+                    :checked="selectedIds.has(instance.id)"
+                    @change="toggleSelect(instance.id)"
+                  />
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-2.5">
+                  <div
+                    class="w-9 h-9 rounded flex items-center justify-center transition-colors flex-shrink-0 overflow-hidden"
+                    :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+                  >
+                    <InstanceDisplayIcon
+                      v-if="instance.iconBadgeId || getPaidIconType(instance)"
+                      :badge-id="instance.iconBadgeId"
+                      :fallback-icon="getPaidIconType(instance)"
+                      :alt="instance.name"
+                      :size="36"
+                    />
+                    <DistroIcon
+                      v-else
+                      :distro="getDistroFromName(instance.image)"
+                      :size="32"
+                    />
+                  </div>
+                  <div class="min-w-0">
+                    <div
+                      class="font-medium text-sm truncate"
+                      :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+                    >
+                      {{ instance.name }}
+                    </div>
+                    <div
+                      class="text-xs truncate"
+                      :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'"
+                    >
+                      {{ formatImageName(instance.image, (instance as any).imageName) }}
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-3 py-3">
+                <span :class="['badge inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs', getStatusInfo(instance.status, t).class]">
+                  <span :class="['w-1.5 h-1.5 rounded-full', getStatusInfo(instance.status, t).dot]"></span>
+                  {{ getStatusInfo(instance.status, t).label }}
+                </span>
+              </td>
+              <td class="pl-4 pr-3 py-3">
+                <div class="flex items-center gap-2">
+                  <FlagIcon :code="(instance as any).host?.country_code || (instance as any).hostCountryCode || 'us'" size="xs" class="flex-shrink-0" />
+                  <div class="space-y-0.5 min-w-0">
+                    <template v-if="getIps(instance).length > 0">
+                      <div
+                        v-for="(ipObj, idx) in getIps(instance)"
+                        :key="idx"
+                        class="text-xs font-mono truncate"
+                        :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'"
+                        :title="ipObj.ip"
+                      >
+                        {{ ipObj.type === 'ipv6' ? (ipObj.ip.length > 18 ? ipObj.ip.substring(0, 18) + '...' : ipObj.ip) : ipObj.ip }}
+                      </div>
+                    </template>
+                    <span v-else class="text-themed-muted text-xs">-</span>
+                  </div>
+                </div>
+              </td>
+              <td class="px-3 py-3">
+                <div class="flex items-center gap-1.5">
+                  <span
+                    class="text-xs px-1.5 py-0.5 rounded"
+                    :class="(instance as any).instanceType === 'vm'
+                      ? (themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600')
+                      : (themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-600')"
+                  >
+                    {{ (instance as any).instanceType === 'vm' ? $t('common.instanceType.vm') : $t('common.instanceType.container') }}
+                  </span>
+                  <span
+                    class="text-xs px-1.5 py-0.5 rounded"
+                    :class="{
+                      [themeStore.isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-50 text-yellow-700']: ((instance as any).networkMode || instance.network_mode) === 'nat',
+                      [themeStore.isDark ? 'bg-blue-900/50 text-blue-400' : 'bg-blue-100 text-blue-600']: ((instance as any).networkMode || instance.network_mode) === 'nat_ipv6',
+                      [themeStore.isDark ? 'bg-cyan-900/50 text-cyan-400' : 'bg-cyan-100 text-cyan-600']: ((instance as any).networkMode || instance.network_mode) === 'nat_ipv6_nat',
+                      [themeStore.isDark ? 'bg-purple-900/50 text-purple-400' : 'bg-purple-100 text-purple-600']: ((instance as any).networkMode || instance.network_mode) === 'ipv6_only',
+                      [themeStore.isDark ? 'bg-teal-900/50 text-teal-400' : 'bg-teal-100 text-teal-600']: ((instance as any).networkMode || instance.network_mode) === 'ipv6_nat'
+                    }"
+                  >
+                    {{ $t('common.networkMode.' + ((instance as any).networkMode || instance.network_mode || 'nat')) }}
+                  </span>
+                </div>
+              </td>
+              <td class="px-3 py-3">
+                <div class="space-y-0.5">
+                  <div class="text-sm text-themed-muted">
+                    {{ instance.cpu }}% / {{ formatMemory(instance.memory) }} / {{ formatDisk(instance.disk) }}
+                  </div>
+                  <div class="text-xs text-gray-400 dark:text-gray-500">
+                    {{ formatBytes(Number((instance as any).monthlyTrafficUsed || 0)) }}
+                    <span> / </span>
+                    <template v-if="(instance as any).monthlyTrafficLimit">
+                      {{ formatBytes(Number((instance as any).monthlyTrafficLimit)) }}
+                    </template>
+                    <template v-else>
+                      {{ $t('instance.mobileCard.unlimited') }}
+                    </template>
+                  </div>
+                </div>
+              </td>
+              <td class="px-3 py-3">
+                <div class="space-y-0.5">
+                  <div class="text-sm text-themed-muted whitespace-nowrap">
+                    {{ (instance as any).portLimit ?? '-' }} {{ $t('instance.mobileCard.ports') }}
+                    <span class="mx-0.5">/</span>
+                    {{ (instance as any).snapshotLimit ?? '-' }} {{ $t('instance.mobileCard.snapshots') }}
+                    <span class="mx-0.5">/</span>
+                    {{ (instance as any).siteLimit ?? '-' }} {{ $t('instance.mobileCard.sites') }}
+                  </div>
+                  <div class="text-xs">
+                    <span class="text-themed-muted">{{ $t('instance.expireAt') }}:</span>
+                    <span class="ml-1 text-themed-muted" :title="getInstanceExpiryInfo(instance).title || ''">
+                      <template v-if="getInstanceExpiryInfo(instance).dateText">
+                        {{ getInstanceExpiryInfo(instance).dateText }}
+                        <span class="mx-1">|</span>
+                      </template>
+                      <span class="font-medium" :class="getInstanceExpiryInfo(instance).className">
+                        {{ getInstanceExpiryInfo(instance).remainingText }}
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td v-if="isAdmin" class="px-3 py-3">
+                <span
+                  class="text-xs truncate"
+                  :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+                >{{ (instance as any).username || '-' }}</span>
+              </td>
+              <td class="px-4 py-3 text-right">
+                <div class="flex items-center justify-end gap-1">
+                  <InstanceOrderMenu
+                    v-if="canReorderInstances"
+                    class="mr-1"
+                    :actions="INSTANCE_ORDER_ACTIONS"
+                    :labels="instanceOrderLabels"
+                    :label="$t('instance.order.label')"
+                    :disabled-actions="getInstanceOrderDisabledActions(instance.id)"
+                    :loading="orderLoading"
+                    :dark="themeStore.isDark"
+                    align="right"
+                    @reorder="reorderInstance(instance, $event)"
+                  />
+                  <button
+                    v-if="instance.status?.toLowerCase() === 'stopped'"
+                    :disabled="!!actionLoading[instance.id]"
+                    class="p-1.5 rounded hover:bg-green-50 dark:hover:bg-green-900/20 text-green-500 transition-colors disabled:opacity-50"
+                    :title="$t('instance.actions.start')"
+                    @click.stop="handleAction(instance, 'start')"
+                  >
+                    <svg v-if="actionLoading[instance.id] === 'start'" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M8 5v14l11-7z" />
+                    </svg>
+                  </button>
+                  <button
+                    v-if="instance.status?.toLowerCase() === 'running'"
+                    :disabled="!!actionLoading[instance.id]"
+                    class="p-1.5 rounded hover:bg-amber-50 dark:hover:bg-amber-900/20 text-amber-500 transition-colors disabled:opacity-50"
+                    :title="$t('instance.actions.stop')"
+                    @click.stop="handleAction(instance, 'stop')"
+                  >
+                    <svg v-if="actionLoading[instance.id] === 'stop'" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M6 6h12v12H6z" />
+                    </svg>
+                  </button>
+                  <button
+                    v-if="instance.status?.toLowerCase() === 'running'"
+                    :disabled="!!actionLoading[instance.id]"
+                    class="p-1.5 rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 text-blue-500 transition-colors disabled:opacity-50"
+                    :title="$t('instance.actions.restart')"
+                    @click.stop="handleAction(instance, 'restart')"
+                  >
+                    <svg v-if="actionLoading[instance.id] === 'restart'" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                  </button>
+                  <span
+                    class="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-themed-muted transition-colors"
+                    :title="$t('instance.details')"
+                  >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </TransitionGroup>
+        </table>
+      </div>
+
+      <!-- 卡片布局 -->
+      <div v-else>
+        <TransitionGroup name="instance-stack-order" tag="div" class="space-y-3 sm:hidden">
+          <div
+            v-for="instance in instances"
+            :key="instance.id"
+            class="card overflow-hidden transition-all"
+            :class="[
+              instance.status?.toLowerCase() === 'creating' ? 'creating-card' : '',
+              recentlyOrderedInstanceId === instance.id ? (themeStore.isDark ? 'is-order-feedback-dark' : 'is-order-feedback-light') : '',
+              selectedIds.has(instance.id) ? (themeStore.isDark ? 'ring-1 ring-blue-500/40' : 'ring-1 ring-blue-500/30') : ''
+            ]"
+          >
+            <div class="block p-4">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="pt-1 shrink-0" @click.stop>
+                  <input
+                    type="checkbox"
+                    class="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer touch-manipulation"
+                    :checked="selectedIds.has(instance.id)"
+                    @click.stop
+                    @change.stop="toggleSelect(instance.id)"
+                  />
+                </div>
+                <div
+                  class="w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden"
+                  :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+                >
+                  <InstanceDisplayIcon
+                    v-if="instance.iconBadgeId || getPaidIconType(instance)"
+                    :badge-id="instance.iconBadgeId"
+                    :fallback-icon="getPaidIconType(instance)"
+                    :alt="instance.name"
+                    :size="44"
+                  />
+                  <DistroIcon
+                    v-else
+                    :distro="getDistroFromName(instance.image)"
+                    :size="40"
+                  />
+                </div>
+                <div class="flex-1 min-w-0 cursor-pointer" @click="openInstanceDetail(instance.id)">
+                  <div class="flex items-center gap-2 mb-1">
+                    <div
+                      class="font-semibold truncate"
+                      :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+                    >
+                      {{ instance.name }}
+                    </div>
+                    <span :class="['badge badge-sm inline-flex items-center gap-1 flex-shrink-0', getStatusInfo(instance.status, t).class]">
+                      <span :class="['w-1 h-1 rounded-full', getStatusInfo(instance.status, t).dot]"></span>
+                      <span class="text-[10px]">{{ getStatusInfo(instance.status, t).label }}</span>
+                    </span>
+                  </div>
+                  <div
+                    class="text-xs truncate"
+                    :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'"
+                  >
+                    {{ formatImageName(instance.image, (instance as any).imageName) }}
+                  </div>
+                </div>
+                <div
+                  v-if="(instance as any).packageName"
+                  class="text-xs px-2 py-1 rounded truncate max-w-[130px]"
+                  :class="themeStore.isDark ? 'bg-blue-500/10 text-blue-400' : 'bg-blue-50 text-blue-600'"
+                  :title="(instance as any).packageName"
+                  @click="openInstanceDetail(instance.id)"
+                >
+                  {{ (instance as any).packageName }}
+                </div>
+              </div>
+
+              <div class="space-y-2 text-sm cursor-pointer" @click="openInstanceDetail(instance.id)">
+                <div class="flex items-start justify-between">
+                  <span class="text-themed-muted text-xs mt-0.5">{{ $t('instance.mobileCard.ipAddress') }}</span>
+                  <div class="flex flex-col items-end gap-1">
+                    <template v-if="getIps(instance).length > 0">
+                      <span
+                        v-for="(ipObj, idx) in getIps(instance)"
+                        :key="idx"
+                        class="font-mono text-xs max-w-[200px] truncate"
+                        :class="[themeStore.isDark ? 'text-gray-300' : 'text-gray-700', ipObj.type === 'ipv6' ? 'opacity-75' : '']"
+                        :title="ipObj.ip"
+                      >
+                        {{ ipObj.type === 'ipv6' ? (ipObj.ip.length > 18 ? ipObj.ip.substring(0, 18) + '...' : ipObj.ip) : ipObj.ip }}
+                      </span>
+                    </template>
+                    <span v-else class="text-themed-muted text-xs">-</span>
+                  </div>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-themed-muted text-xs">{{ $t('instance.mobileCard.config') }}</span>
+                  <span
+                    class="text-xs"
+                    :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                  >
+                    {{ instance.cpu }}{{ $t('instance.mobileCard.cpuCore') }} / {{ formatMemory(instance.memory) }} / {{ formatDisk(instance.disk) }}
+                  </span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-themed-muted text-xs">{{ $t('instance.mobileCard.quota') }}</span>
+                  <span
+                    class="text-xs"
+                    :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                  >
+                    {{ (instance as any).portLimit ?? '-' }} {{ $t('instance.mobileCard.ports') }} / {{ (instance as any).snapshotLimit ?? '-' }} {{ $t('instance.mobileCard.snapshots') }} / {{ (instance as any).siteLimit ?? '-' }} {{ $t('instance.mobileCard.sites') }}
+                  </span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-themed-muted text-xs">{{ $t('instance.mobileCard.traffic') }}</span>
+                  <span
+                    class="text-xs"
+                    :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                  >
+                    <template v-if="(instance as any).monthlyTrafficLimit">
+                      {{ formatBytes(Number((instance as any).monthlyTrafficUsed || 0)) }} / {{ formatBytes(Number((instance as any).monthlyTrafficLimit)) }}
+                    </template>
+                    <template v-else>
+                      {{ formatBytes(Number((instance as any).monthlyTrafficUsed || 0)) }} / {{ $t('instance.mobileCard.unlimited') }}
+                    </template>
+                  </span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-themed-muted text-xs">{{ $t('instance.mobileCard.host') }}</span>
+                  <span class="inline-flex items-center gap-1.5">
+                    <FlagIcon :code="(instance as any).host?.country_code || (instance as any).hostCountryCode || 'us'" size="xs" />
+                    <span
+                      class="uppercase text-xs font-medium"
+                      :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                    >{{ (instance as any).host?.name || (instance as any).host || '-' }}</span>
+                  </span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-themed-muted text-xs">{{ $t('instance.expireAt') }}</span>
+                  <span class="text-xs text-right" :title="getInstanceExpiryInfo(instance).title || ''">
+                    <template v-if="getInstanceExpiryInfo(instance).dateText">
+                      <span class="text-themed-muted">{{ getInstanceExpiryInfo(instance).dateText }}</span>
+                      <span class="mx-1 text-themed-muted">|</span>
+                    </template>
+                    <span class="font-medium" :class="getInstanceExpiryInfo(instance).className">
+                      {{ getInstanceExpiryInfo(instance).remainingText }}
+                    </span>
+                  </span>
+                </div>
+                <div v-if="isAdmin" class="flex items-center justify-between">
+                  <span class="text-themed-muted text-xs">{{ $t('instance.mobileCard.user') }}</span>
+                  <span
+                    class="text-xs"
+                    :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'"
+                  >
+                    {{ (instance as any).username || '-' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="flex items-center justify-center gap-2 px-4 py-3 border-t"
+              :class="themeStore.isDark ? 'border-gray-800 bg-gray-900/30' : 'border-gray-100 bg-gray-50'"
+            >
+              <InstanceOrderMenu
+                v-if="canReorderInstances"
+                :actions="INSTANCE_ORDER_ACTIONS"
+                :labels="instanceOrderLabels"
+                :label="$t('instance.order.label')"
+                :disabled-actions="getInstanceOrderDisabledActions(instance.id)"
+                :loading="orderLoading"
+                :dark="themeStore.isDark"
+                align="left"
+                @reorder="reorderInstance(instance, $event)"
+              />
+              <button
+                v-if="instance.status?.toLowerCase() === 'stopped'"
+                :disabled="!!actionLoading[instance.id]"
+                class="btn-ghost btn-sm flex-1"
+                @click.stop="handleAction(instance, 'start')"
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span class="text-xs">{{ actionLoading[instance.id] === 'start' ? '...' : $t('instance.actions.start') }}</span>
+              </button>
+              <button
+                v-if="instance.status?.toLowerCase() === 'running'"
+                :disabled="!!actionLoading[instance.id]"
+                class="btn-ghost btn-sm flex-1"
+                @click.stop="handleAction(instance, 'stop')"
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
+                </svg>
+                <span class="text-xs">{{ actionLoading[instance.id] === 'stop' ? '...' : $t('instance.actions.stop') }}</span>
+              </button>
+              <button
+                v-if="instance.status?.toLowerCase() === 'running'"
+                :disabled="!!actionLoading[instance.id]"
+                class="btn-ghost btn-sm flex-1"
+                @click.stop="handleAction(instance, 'restart')"
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                <span class="text-xs">{{ actionLoading[instance.id] === 'restart' ? '...' : $t('instance.actions.restart') }}</span>
+              </button>
+              <button
+                v-if="!instance.packagePlanId && (instance as any).allow_instance_deletion !== false"
+                :disabled="!!actionLoading[instance.id]"
+                class="btn-ghost btn-sm flex-1 text-red-500 hover:text-red-400"
+                @click.stop="handleAction(instance, 'delete')"
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                <span class="text-xs">{{ actionLoading[instance.id] === 'delete' ? '...' : $t('instance.actions.delete') }}</span>
+              </button>
+            </div>
+          </div>
+        </TransitionGroup>
+
+        <TransitionGroup
+          name="instance-card-order"
+          tag="div"
+          class="hidden sm:grid grid-cols-1 gap-3 xl:grid-cols-2 2xl:grid-cols-3"
+        >
+          <article
+            v-for="instance in instances"
+            :key="instance.id"
+            class="group relative overflow-hidden rounded-2xl border transition-colors duration-200"
+            :class="[
+              instance.status?.toLowerCase() === 'creating' ? 'creating-card' : '',
+              recentlyOrderedInstanceId === instance.id ? (themeStore.isDark ? 'is-order-feedback-dark' : 'is-order-feedback-light') : '',
+              selectedIds.has(instance.id) ? (themeStore.isDark ? 'ring-1 ring-blue-500/40' : 'ring-1 ring-blue-500/30') : '',
+              themeStore.isDark
+                ? 'border-gray-800 bg-gray-950 hover:border-gray-700'
+                : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'
+            ]"
+          >
+            <div class="flex h-full flex-col p-3.5">
+              <div class="flex items-start gap-2.5">
+                <button
+                  type="button"
+                  class="group/avatar relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl border transition-all duration-150"
+                  :class="themeStore.isDark
+                    ? 'border-gray-800 bg-gray-900 hover:border-gray-700'
+                    : 'border-gray-200 bg-gray-50 hover:border-gray-300'"
+                  :aria-pressed="selectedIds.has(instance.id)"
+                  @click.stop="toggleSelect(instance.id)"
+                >
+                  <span
+                    class="absolute inset-0 flex items-center justify-center transition-opacity duration-150"
+                    :class="selectedIds.has(instance.id) ? 'opacity-0' : 'opacity-100 group-hover/avatar:opacity-0'"
+                  >
+                    <InstanceDisplayIcon
+                      v-if="instance.iconBadgeId || getPaidIconType(instance)"
+                      :badge-id="instance.iconBadgeId"
+                      :fallback-icon="getPaidIconType(instance)"
+                      :alt="instance.name"
+                      :size="40"
+                    />
+                    <DistroIcon
+                      v-else
+                      :distro="getDistroFromName(instance.image)"
+                      :size="34"
+                    />
+                  </span>
+                  <span
+                    class="pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity duration-150"
+                    :class="selectedIds.has(instance.id) ? 'opacity-100' : 'opacity-0 group-hover/avatar:opacity-100'"
+                  >
+                    <span
+                      class="flex h-5 w-5 items-center justify-center rounded-md border shadow-sm"
+                      :class="selectedIds.has(instance.id)
+                        ? 'border-blue-500 bg-blue-500 text-white'
+                        : (themeStore.isDark ? 'border-gray-600 bg-gray-950 text-transparent' : 'border-gray-300 bg-white text-transparent')"
+                    >
+                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+
+                <div class="min-w-0 flex-1 cursor-pointer" @click="openInstanceDetail(instance.id)">
+                  <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                      <div
+                        class="truncate text-[14px] font-semibold leading-5"
+                        :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+                      >
+                        {{ instance.name }}
+                      </div>
+                      <div
+                        class="mt-0.5 truncate text-xs"
+                        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'"
+                      >
+                        {{ formatImageName(instance.image, (instance as any).imageName) }}
+                      </div>
+                    </div>
+                    <span :class="['badge badge-sm inline-flex items-center gap-1.5 shrink-0', getStatusInfo(instance.status, t).class]">
+                      <span :class="['w-1 h-1 rounded-full', getStatusInfo(instance.status, t).dot]"></span>
+                      <span class="text-[10px]">{{ getStatusInfo(instance.status, t).label }}</span>
+                    </span>
+                  </div>
+
+                  <div class="mt-1.5 flex flex-wrap items-center gap-1">
+                    <span
+                      class="inline-flex max-w-[9.5rem] items-center gap-1 rounded-full px-2 py-0.5 text-[10px] sm:max-w-[11rem] sm:gap-1.5 sm:text-[11px]"
+                      :class="themeStore.isDark ? 'bg-gray-900 text-gray-300 ring-1 ring-white/5' : 'bg-gray-50 text-gray-700 ring-1 ring-black/5'"
+                    >
+                      <FlagIcon :code="(instance as any).host?.country_code || (instance as any).hostCountryCode || 'us'" size="xs" />
+                      <span class="truncate">{{ getInstanceHostName(instance) }}</span>
+                    </span>
+                    <span
+                      v-if="getInstancePackageName(instance)"
+                      class="max-w-[9.5rem] truncate rounded-full px-2 py-0.5 text-[10px] sm:max-w-[11rem] sm:text-[11px]"
+                      :class="themeStore.isDark ? 'bg-blue-500/10 text-blue-300' : 'bg-blue-50 text-blue-700'"
+                      :title="getInstancePackageName(instance) || ''"
+                    >
+                      {{ getInstancePackageName(instance) }}
+                    </span>
+                    <span
+                      class="shrink-0 rounded-full px-2 py-0.5 text-[10px] sm:text-[11px] whitespace-nowrap"
+                      :class="getInstanceTypeBadgeClass(instance)"
+                    >
+                      {{ getInstanceTypeDisplayLabel(instance) }}
+                    </span>
+                    <span
+                      class="max-w-[9rem] truncate rounded-full px-2 py-0.5 text-[10px] sm:max-w-[10rem] sm:text-[11px]"
+                      :class="getInstanceNetworkModeClass(instance)"
+                    >
+                      {{ $t('common.networkMode.' + getInstanceNetworkMode(instance)) }}
+                    </span>
+                    <span
+                      v-if="isAdmin"
+                      class="max-w-[8rem] truncate rounded-full px-2 py-0.5 text-[10px] sm:text-[11px]"
+                      :class="themeStore.isDark ? 'bg-gray-900 text-gray-300 ring-1 ring-white/5' : 'bg-gray-50 text-gray-700 ring-1 ring-black/5'"
+                    >
+                      {{ (instance as any).username || '-' }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="mt-auto">
+                <div
+                  class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 border-t pt-2"
+                  :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+                  @click="openInstanceDetail(instance.id)"
+                >
+                  <div class="min-w-0">
+                    <div class="text-[11px] text-themed-muted">{{ $t('instance.mobileCard.config') }}</div>
+                    <div class="mt-1 truncate text-[13px] font-medium sm:text-sm" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                      {{ instance.cpu }}% / {{ formatMemory(instance.memory) }} / {{ formatDisk(instance.disk) }}
+                    </div>
+                  </div>
+                  <div class="min-w-0">
+                    <div class="text-[11px] text-themed-muted">{{ $t('instance.mobileCard.quota') }}</div>
+                    <div class="mt-1 truncate text-[13px] font-medium sm:text-sm" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                      {{ (instance as any).portLimit ?? '-' }} / {{ (instance as any).snapshotLimit ?? '-' }} / {{ (instance as any).siteLimit ?? '-' }}
+                    </div>
+                  </div>
+                  <div class="min-w-0">
+                    <div class="text-[11px] text-themed-muted">{{ $t('instance.mobileCard.traffic') }}</div>
+                    <div class="mt-1 truncate text-[13px] font-medium sm:text-sm" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                      <template v-if="(instance as any).monthlyTrafficLimit">
+                        {{ formatBytes(Number((instance as any).monthlyTrafficUsed || 0)) }} / {{ formatBytes(Number((instance as any).monthlyTrafficLimit)) }}
+                      </template>
+                      <template v-else>
+                        {{ formatBytes(Number((instance as any).monthlyTrafficUsed || 0)) }} / {{ $t('instance.mobileCard.unlimited') }}
+                      </template>
+                    </div>
+                  </div>
+                  <div class="min-w-0">
+                    <div class="text-[11px] text-themed-muted">{{ $t('instance.expireAt') }}</div>
+                    <div class="mt-1 truncate text-[13px] font-medium sm:text-sm" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                      <span>{{ getInstanceExpiryInfo(instance).dateText || '-' }}</span>
+                      <span class="mx-1 text-themed-muted">·</span>
+                      <span :class="getInstanceExpiryInfo(instance).className" :title="getInstanceExpiryInfo(instance).title || ''">
+                        {{ getInstanceExpiryInfo(instance).remainingText }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="mt-2 grid grid-cols-1 gap-2 border-t pt-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end"
+                  :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+                >
+                  <div class="min-h-[36px] min-w-0 cursor-pointer" @click="openInstanceDetail(instance.id)">
+                    <div class="mb-1 text-[11px] text-themed-muted">{{ $t('instance.mobileCard.ipAddress') }}</div>
+                    <div class="space-y-1">
+                      <template v-if="getIps(instance).length > 0">
+                        <div
+                          v-for="(ipObj, idx) in getIps(instance)"
+                          :key="idx"
+                          class="truncate font-mono text-xs"
+                          :class="[themeStore.isDark ? 'text-gray-300' : 'text-gray-700', ipObj.type === 'ipv6' ? 'opacity-80' : '']"
+                          :title="ipObj.ip"
+                        >
+                          {{ ipObj.ip }}
+                        </div>
+                      </template>
+                      <span v-else class="text-themed-muted text-xs">-</span>
+                    </div>
+                  </div>
+
+                  <div class="flex min-w-[9.5rem] flex-wrap items-center justify-end gap-1.5 sm:max-w-[18rem] sm:justify-self-end">
+                    <InstanceOrderMenu
+                      v-if="canReorderInstances"
+                      :actions="INSTANCE_ORDER_ACTIONS"
+                      :labels="instanceOrderLabels"
+                      :label="$t('instance.order.label')"
+                      :disabled-actions="getInstanceOrderDisabledActions(instance.id)"
+                      :loading="orderLoading"
+                      :dark="themeStore.isDark"
+                      align="right"
+                      @reorder="reorderInstance(instance, $event)"
+                    />
+                    <button
+                      v-if="instance.status?.toLowerCase() === 'stopped'"
+                      :disabled="!!actionLoading[instance.id]"
+                      class="inline-flex h-8 w-8 items-center justify-center rounded-lg border transition-colors"
+                      :class="getCardActionButtonClass()"
+                      :title="$t('instance.actions.start')"
+                      :aria-label="$t('instance.actions.start')"
+                      @click.stop="handleAction(instance, 'start')"
+                    >
+                      <svg v-if="actionLoading[instance.id] === 'start'" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                      </svg>
+                      <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                      </svg>
+                    </button>
+                    <button
+                      v-if="instance.status?.toLowerCase() === 'running'"
+                      :disabled="!!actionLoading[instance.id]"
+                      class="inline-flex h-8 w-8 items-center justify-center rounded-lg border transition-colors"
+                      :class="getCardActionButtonClass()"
+                      :title="$t('instance.actions.stop')"
+                      :aria-label="$t('instance.actions.stop')"
+                      @click.stop="handleAction(instance, 'stop')"
+                    >
+                      <svg v-if="actionLoading[instance.id] === 'stop'" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                      </svg>
+                      <svg v-else class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <rect x="5" y="5" width="10" height="10" rx="1.8" />
+                      </svg>
+                    </button>
+
+                    <button
+                      v-if="instance.status?.toLowerCase() === 'running'"
+                      :disabled="!!actionLoading[instance.id]"
+                      class="inline-flex h-8 w-8 items-center justify-center rounded-lg border transition-colors"
+                      :class="getCardActionButtonClass()"
+                      :title="$t('instance.actions.restart')"
+                      :aria-label="$t('instance.actions.restart')"
+                      @click.stop="handleAction(instance, 'restart')"
+                    >
+                      <svg v-if="actionLoading[instance.id] === 'restart'" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                      </svg>
+                      <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                    </button>
+
+                    <button
+                      v-if="!instance.packagePlanId && (instance as any).allow_instance_deletion !== false"
+                      :disabled="!!actionLoading[instance.id]"
+                      class="inline-flex h-8 w-8 items-center justify-center rounded-lg border transition-colors"
+                      :class="getCardActionButtonClass('danger')"
+                      :title="$t('instance.actions.delete')"
+                      :aria-label="$t('instance.actions.delete')"
+                      @click.stop="handleAction(instance, 'delete')"
+                    >
+                      <svg v-if="actionLoading[instance.id] === 'delete'" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                      </svg>
+                      <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+
+                    <button
+                      type="button"
+                      class="inline-flex h-8 w-8 items-center justify-center rounded-lg border transition-colors"
+                      :class="getCardActionButtonClass()"
+                      :title="$t('instance.details')"
+                      :aria-label="$t('instance.details')"
+                      @click.stop="openInstanceDetail(instance.id)"
+                    >
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </article>
+        </TransitionGroup>
+      </div>
+    </template>
+
+    <div v-if="!loading && instances.length > 0" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between text-sm text-themed-muted">
+      <span>{{ $t('instance.totalRecords', { count: total }) }} · {{ page }} / {{ totalPages }}</span>
+      <div class="flex items-center gap-2">
+        <button
+          :disabled="page <= 1"
+          class="btn-ghost btn-sm"
+          @click="goToPage(page - 1)"
+        >
+          {{ $t('common.prevPage') }}
+        </button>
+        <span class="min-w-[84px] text-center">{{ page }} / {{ totalPages }}</span>
+        <button
+          :disabled="page >= totalPages"
+          class="btn-ghost btn-sm"
+          @click="goToPage(page + 1)"
+        >
+          {{ $t('common.nextPage') }}
+        </button>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="showBatchRenewModal"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        @click.self="closeBatchRenewModal()"
+      >
+        <div class="absolute inset-0 bg-black/60" @click="closeBatchRenewModal()"></div>
+        <div
+          class="relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-2xl shadow-2xl flex flex-col"
+          :class="themeStore.isDark ? 'bg-gray-900 border border-gray-800' : 'bg-white border border-gray-200'"
+        >
+          <div class="flex items-center justify-between px-5 py-4 border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+            <div>
+              <h3 class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                {{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchRenewTitle : $t('instance.batch.renewTitle') }}
+              </h3>
+              <p class="text-sm text-themed-muted mt-1">{{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchRenewDescription : $t('instance.batch.renewDescription') }}</p>
+            </div>
+            <button class="p-1 rounded hover:bg-gray-500/20" @click="closeBatchRenewModal()">
+              <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="flex-1 overflow-y-auto p-5 space-y-4">
+            <div v-if="batchRenewLoading" class="flex items-center justify-center py-12">
+              <svg class="w-8 h-8 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+            </div>
+
+            <template v-else>
+              <div class="grid gap-3 md:grid-cols-4">
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('instance.batch.selectedCount', { count: selectedCount }) }}</div>
+                  <div class="mt-2 text-2xl font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ selectedCount }}</div>
+                </div>
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('instance.batch.eligibleCount') }}</div>
+                  <div class="mt-2 text-2xl font-semibold text-emerald-500">{{ batchRenewEligibleItems.length }}</div>
+                </div>
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchTotalAmount : $t('instance.batch.totalAmount') }}</div>
+                  <div class="mt-2 text-2xl font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ formatCurrency(batchRenewTotal) }}</div>
+                </div>
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchBalanceAfter : $t('billing.balanceAfterRenew') }}</div>
+                  <div class="mt-2 text-2xl font-semibold" :class="batchRenewInsufficientBalance ? 'text-red-500' : 'text-blue-500'">{{ formatCurrency(batchRenewBalanceAfter) }}</div>
+                </div>
+              </div>
+
+              <div v-if="batchRenewMonthOptions.length > 0" class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-gray-50/80'">
+                <div class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ $t('instance.batch.selectedMonths') }}</div>
+                <div class="mt-3 flex flex-wrap gap-2">
+                  <button
+                    v-for="months in batchRenewMonthOptions"
+                    :key="months"
+                    class="px-3 py-2 rounded-lg border text-sm transition-colors"
+                    :class="months === batchRenewMonths
+                      ? 'border-blue-500 bg-blue-500/10 text-blue-500'
+                      : themeStore.isDark
+                        ? 'border-gray-700 text-gray-300 hover:border-gray-600'
+                        : 'border-gray-200 text-gray-700 hover:border-gray-300'"
+                    @click="batchRenewMonths = months"
+                  >
+                    {{ getBatchRenewMonthsLabel(months) }}
+                  </button>
+                </div>
+              </div>
+
+              <div
+                v-else
+                class="rounded-xl border p-4 text-sm"
+                :class="themeStore.isDark ? 'border-yellow-500/20 bg-yellow-500/10 text-yellow-300' : 'border-yellow-200 bg-yellow-50 text-yellow-700'"
+              >
+                {{ $t('instance.batch.renewEmpty') }}
+              </div>
+
+              <div
+                v-if="batchRenewInsufficientBalance"
+                class="rounded-xl border p-4 text-sm"
+                :class="themeStore.isDark ? 'border-red-500/20 bg-red-500/10 text-red-300' : 'border-red-200 bg-red-50 text-red-700'"
+              >
+                {{ $t('billing.insufficientBalance') }}
+                <RouterLink to="/wallet" class="underline ml-1">{{ $t('billing.goRecharge') }}</RouterLink>
+              </div>
+
+              <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-white'">
+                <div class="flex items-center justify-between gap-3 mb-3">
+                  <h4 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                    {{ $t('instance.batch.eligibleList', { count: batchRenewEligibleItems.length }) }}
+                  </h4>
+                  <span class="text-xs text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchCurrentBalance : $t('billing.currentBalance') }}: {{ formatCurrency(batchRenewBalance.balance) }}</span>
+                </div>
+                <div v-if="batchRenewEligibleItems.length > 0" class="space-y-3 max-h-64 overflow-y-auto pr-1">
+                  <div
+                    v-for="item in batchRenewEligibleItems"
+                    :key="item.id"
+                    class="rounded-xl border px-3 py-3"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-black/20' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="min-w-0">
+                        <div class="text-sm font-medium truncate" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ item.name }}</div>
+                        <div class="mt-1 flex flex-wrap gap-2 text-xs">
+                          <span class="inline-flex items-center rounded-full px-2 py-0.5" :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'">
+                            {{ item.autoRenew ? $t('billing.autoRenewEnabled') : $t('billing.autoRenewDisabled') }}
+                          </span>
+                          <span
+                            v-if="item.isHostedInstance"
+                            class="inline-flex items-center rounded-full px-2 py-0.5"
+                            :class="themeStore.isDark ? 'bg-blue-500/10 text-blue-300' : 'bg-blue-50 text-blue-700'"
+                          >
+                            {{ $t('instance.batch.hosted') }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="text-right shrink-0">
+                        <div class="text-sm font-semibold text-emerald-500">{{ formatCurrency(item.selectedOption?.discountedPrice) }}</div>
+                        <div class="text-xs text-themed-muted">{{ formatDate(item.selectedOption?.expiresAt) }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="text-sm text-themed-muted">{{ $t('instance.batch.renewEmpty') }}</div>
+              </div>
+
+              <div
+                v-if="batchRenewIneligibleItems.length > 0"
+                class="rounded-xl border p-4"
+                :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-white'"
+              >
+                <h4 class="text-sm font-medium mb-3" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                  {{ $t('instance.batch.skippedList', { count: batchRenewIneligibleItems.length }) }}
+                </h4>
+                <div class="space-y-2 max-h-56 overflow-y-auto pr-1">
+                  <div
+                    v-for="item in batchRenewIneligibleItems"
+                    :key="`renew-skip-${item.id}`"
+                    class="rounded-lg border px-3 py-2"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-black/20' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ item.name }}</div>
+                    <div class="mt-1 text-xs" :class="themeStore.isDark ? 'text-red-300' : 'text-red-600'">
+                      {{ translateBatchReason(item.reason || (item.canRenew ? '该实例不支持当前续费时长' : undefined)) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <div class="flex items-center justify-between gap-3 px-5 py-4 border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+            <span class="text-xs text-themed-muted">{{ $t('instance.batch.currentPageOnly') }}</span>
+            <div class="flex items-center gap-2">
+              <button class="btn-ghost btn-sm" :disabled="batchRenewSubmitting" @click="closeBatchRenewModal()">
+                {{ $t('common.cancel') }}
+              </button>
+              <button class="btn-primary btn-sm" :disabled="!batchRenewCanSubmit" @click="confirmBatchRenew">
+                <svg v-if="batchRenewSubmitting" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ configStore.freeSiteMode ? freeSiteCopy.instanceBatchRenewAction : $t('instance.batch.renew') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <Teleport to="body">
+      <div
+        v-if="showBatchDestroyModal"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        @click.self="closeBatchDestroyModal()"
+      >
+        <div class="absolute inset-0 bg-black/60" @click="closeBatchDestroyModal()"></div>
+        <div
+          class="relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-2xl shadow-2xl flex flex-col"
+          :class="themeStore.isDark ? 'bg-gray-900 border border-gray-800' : 'bg-white border border-gray-200'"
+        >
+          <div class="flex items-center justify-between px-5 py-4 border-b" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+            <div>
+              <h3 class="text-lg font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                {{ $t('instance.batch.destroyTitle') }}
+              </h3>
+              <p class="text-sm text-themed-muted mt-1">{{ $t('instance.batch.destroyDescription') }}</p>
+            </div>
+            <button class="p-1 rounded hover:bg-gray-500/20" @click="closeBatchDestroyModal()">
+              <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="flex-1 overflow-y-auto p-5 space-y-4">
+            <div v-if="batchDestroyLoading" class="flex items-center justify-center py-12">
+              <svg class="w-8 h-8 animate-spin text-red-500" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+            </div>
+
+            <template v-else>
+              <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-red-500/20 bg-red-500/10' : 'border-red-200 bg-red-50'">
+                <div class="flex items-start gap-3">
+                  <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                  <p class="text-sm font-medium" :class="themeStore.isDark ? 'text-red-200' : 'text-red-700'">
+                    {{ $t('instance.destroy.warning') }}
+                  </p>
+                </div>
+              </div>
+
+              <div class="grid gap-3 md:grid-cols-4">
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('instance.batch.selectedCount', { count: selectedCount }) }}</div>
+                  <div class="mt-2 text-2xl font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ selectedCount }}</div>
+                </div>
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('instance.batch.eligibleCount') }}</div>
+                  <div class="mt-2 text-2xl font-semibold text-emerald-500">{{ batchDestroyEligibleItems.length }}</div>
+                </div>
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('instance.batch.refundTotal') }}</div>
+                  <div class="mt-2 text-2xl font-semibold text-emerald-500">{{ formatCurrency(batchDestroyTotalRefund) }}</div>
+                </div>
+                <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/60' : 'border-gray-200 bg-gray-50'">
+                  <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('instance.batch.feeTotal') }}</div>
+                  <div class="mt-2 text-2xl font-semibold" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ formatCurrency(batchDestroyTotalFee) }}</div>
+                </div>
+              </div>
+
+              <div
+                v-if="batchDestroyEligibleItems.length === 0"
+                class="rounded-xl border p-4 text-sm"
+                :class="themeStore.isDark ? 'border-yellow-500/20 bg-yellow-500/10 text-yellow-300' : 'border-yellow-200 bg-yellow-50 text-yellow-700'"
+              >
+                {{ $t('instance.batch.destroyEmpty') }}
+              </div>
+
+              <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-white'">
+                <h4 class="text-sm font-medium mb-3" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                  {{ $t('instance.batch.eligibleList', { count: batchDestroyEligibleItems.length }) }}
+                </h4>
+                <div v-if="batchDestroyEligibleItems.length > 0" class="space-y-3 max-h-64 overflow-y-auto pr-1">
+                  <div
+                    v-for="item in batchDestroyEligibleItems"
+                    :key="item.id"
+                    class="rounded-xl border px-3 py-3"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-black/20' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="min-w-0">
+                        <div class="text-sm font-medium truncate" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ item.name }}</div>
+                        <div class="mt-1 text-xs text-themed-muted">
+                          {{ item.instance.hostName }} · {{ item.instance.planName || $t('billing.freeInstance') }}
+                        </div>
+                        <div class="mt-2 flex flex-wrap gap-2 text-xs">
+                          <span class="inline-flex items-center rounded-full px-2 py-0.5" :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'">
+                            {{ item.isFreeInstance ? $t('billing.freeInstance') : $t('billing.paidInstance') }}
+                          </span>
+                          <span
+                            v-if="!item.isFreeInstance && item.isFirstTime"
+                            class="inline-flex items-center rounded-full px-2 py-0.5"
+                            :class="themeStore.isDark ? 'bg-emerald-500/10 text-emerald-300' : 'bg-emerald-50 text-emerald-700'"
+                          >
+                            {{ $t('instance.destroy.firstTimeFree') }}
+                          </span>
+                          <span
+                            v-else-if="!item.isFreeInstance && item.feeWaiverEligible"
+                            class="inline-flex items-center rounded-full px-2 py-0.5"
+                            :class="themeStore.isDark ? 'bg-emerald-500/10 text-emerald-300' : 'bg-emerald-50 text-emerald-700'"
+                          >
+                            {{ $t('instance.batch.feeWaived') }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="text-right shrink-0">
+                        <div class="text-sm font-semibold text-emerald-500">{{ formatCurrency(item.refund.refundAmount) }}</div>
+                        <div class="text-xs text-themed-muted">{{ $t('instance.destroy.feeAmount') }} {{ formatCurrency(item.refund.feeAmount) }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="text-sm text-themed-muted">{{ $t('instance.batch.destroyEmpty') }}</div>
+              </div>
+
+              <div
+                v-if="batchDestroyIneligibleItems.length > 0"
+                class="rounded-xl border p-4"
+                :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-white'"
+              >
+                <h4 class="text-sm font-medium mb-3" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                  {{ $t('instance.batch.skippedList', { count: batchDestroyIneligibleItems.length }) }}
+                </h4>
+                <div class="space-y-2 max-h-56 overflow-y-auto pr-1">
+                  <div
+                    v-for="item in batchDestroyIneligibleItems"
+                    :key="`destroy-skip-${item.id}`"
+                    class="rounded-lg border px-3 py-2"
+                    :class="themeStore.isDark ? 'border-gray-800 bg-black/20' : 'border-gray-200 bg-gray-50/80'"
+                  >
+                    <div class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">{{ item.name }}</div>
+                    <div class="mt-1 text-xs" :class="themeStore.isDark ? 'text-red-300' : 'text-red-600'">
+                      {{ item.cannotDestroyReason ? translateBatchReason(item.cannotDestroyReason) : $t('instance.destroy.cannotDestroy') }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-xl border p-4" :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/50' : 'border-gray-200 bg-gray-50/80'">
+                <label class="block text-sm font-medium mb-2" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+                  {{ $t('instance.batch.confirmHint') }}
+                </label>
+                <input
+                  v-model="batchDestroyConfirm"
+                  type="text"
+                  class="input w-full"
+                  :placeholder="$t('instance.batch.confirmPlaceholder')"
+                />
+              </div>
+            </template>
+          </div>
+
+          <div class="flex items-center justify-between gap-3 px-5 py-4 border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'">
+            <span class="text-xs text-themed-muted">{{ $t('instance.batch.currentPageOnly') }}</span>
+            <div class="flex items-center gap-2">
+              <button class="btn-ghost btn-sm" :disabled="batchDestroySubmitting" @click="closeBatchDestroyModal()">
+                {{ $t('common.cancel') }}
+              </button>
+              <button
+                class="btn-sm text-white"
+                :class="themeStore.isDark ? 'bg-red-500/80 hover:bg-red-500 disabled:bg-red-500/40' : 'bg-red-500 hover:bg-red-600 disabled:bg-red-300'"
+                :disabled="!batchDestroyCanSubmit"
+                @click="confirmBatchDestroy"
+              >
+                <svg v-if="batchDestroySubmitting" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ $t('instance.batch.destroy') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.instance-table-order-move,
+.instance-stack-order-move,
+.instance-card-order-move {
+  transition:
+    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    background-color 520ms ease,
+    border-color 520ms ease;
+}
+
+.is-order-feedback-light {
+  background-color: rgb(249 250 251);
+  box-shadow: 0 10px 28px rgb(15 23 42 / 0.08);
+}
+
+.is-order-feedback-dark {
+  background-color: rgb(17 24 39 / 0.82);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .instance-table-order-move,
+  .instance-stack-order-move,
+  .instance-card-order-move {
+    transition-duration: 1ms;
+  }
+}
+</style>
diff --git a/client/src/views/InvitesView.vue b/client/src/views/InvitesView.vue
new file mode 100644
index 0000000..ef49eea
--- /dev/null
+++ b/client/src/views/InvitesView.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import api from '@/api'
+import type { InviteCostOption, UserInvite, UserInviteSummary } from '@/types/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import UserAvatar from '@/components/UserAvatar.vue'
+
+defineOptions({ name: 'InvitesView' })
+
+const toast = useToast()
+const themeStore = useThemeStore()
+
+const loading = ref(true)
+const listLoading = ref(false)
+const generating = ref(false)
+const summary = ref<UserInviteSummary | null>(null)
+const invites = ref<UserInvite[]>([])
+const page = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const totalPages = ref(1)
+const selectedCostResource = ref('')
+const generatedInvites = ref<UserInvite[]>([])
+
+const enabledCostOptions = computed(() => {
+  return (summary.value?.costOptions || []).filter(option => option.enabled)
+})
+
+const selectedCostOption = computed(() => {
+  return enabledCostOptions.value.find(option => option.resource === selectedCostResource.value) || null
+})
+
+const canGenerate = computed(() => {
+  const option = selectedCostOption.value
+  if (!option || generating.value) return false
+  return hasEnoughResource(option)
+})
+
+onMounted(loadPage)
+
+async function loadPage(): Promise<void> {
+  loading.value = true
+  try {
+    await Promise.all([loadSummary(), loadInvites()])
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadSummary(): Promise<void> {
+  summary.value = await api.userInvites.summary()
+  if (!selectedCostResource.value && enabledCostOptions.value.length > 0) {
+    selectedCostResource.value = enabledCostOptions.value[0].resource
+  }
+  if (selectedCostResource.value && !enabledCostOptions.value.some(option => option.resource === selectedCostResource.value)) {
+    selectedCostResource.value = enabledCostOptions.value[0]?.resource || ''
+  }
+}
+
+async function loadInvites(): Promise<void> {
+  listLoading.value = true
+  try {
+    const res = await api.userInvites.list({ page: page.value, pageSize: pageSize.value })
+    invites.value = res.invites || []
+    total.value = res.total || 0
+    totalPages.value = res.totalPages || 1
+    if (page.value > totalPages.value && totalPages.value > 0) {
+      page.value = totalPages.value
+      await loadInvites()
+    }
+  } finally {
+    listLoading.value = false
+  }
+}
+
+async function generateInvite(): Promise<void> {
+  if (!selectedCostResource.value || !canGenerate.value) return
+
+  generating.value = true
+  try {
+    const res = await api.userInvites.generate({ costResource: selectedCostResource.value })
+    generatedInvites.value = res.invites || []
+    toast.success('邀请码已生成')
+    page.value = 1
+    await Promise.all([loadSummary(), loadInvites()])
+  } catch (err: any) {
+    toast.error(err?.message || '生成邀请码失败')
+  } finally {
+    generating.value = false
+  }
+}
+
+function hasEnoughResource(option: InviteCostOption): boolean {
+  if (!summary.value) return false
+  if (option.amount <= 0) return true
+  if (option.resource === 'balance') return summary.value.balances.balance >= option.amount
+  if (option.resource === 'points') return summary.value.balances.points >= option.amount
+  return false
+}
+
+function getBalanceLabel(resource: string): string {
+  if (!summary.value) return '-'
+  if (resource === 'balance') return `¥${summary.value.balances.balance.toFixed(2)}`
+  if (resource === 'points') return `${summary.value.balances.points} 积分`
+  return '-'
+}
+
+function getStatus(invite: UserInvite): { label: string; className: string } {
+  if (invite.usedBy) {
+    return { label: '已使用', className: 'badge-success' }
+  }
+  if (invite.expiresAt && new Date(invite.expiresAt) < new Date()) {
+    return { label: '已过期', className: 'badge-error' }
+  }
+  return { label: '未使用', className: 'badge-warning' }
+}
+
+function formatDate(value: string | null): string {
+  if (!value) return '-'
+  return new Date(value).toLocaleString()
+}
+
+function getInviteLink(invite: UserInvite): string {
+  const origin = window.location.origin
+  return `${origin}${invite.registerUrl}`
+}
+
+async function copyText(text: string, successMessage: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text)
+    toast.success(successMessage)
+  } catch {
+    toast.error('复制失败')
+  }
+}
+
+function previousPage(): void {
+  if (page.value <= 1) return
+  page.value -= 1
+  loadInvites()
+}
+
+function nextPage(): void {
+  if (page.value >= totalPages.value) return
+  page.value += 1
+  loadInvites()
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header flex-col gap-4 sm:flex-row sm:gap-0">
+      <div>
+        <h1 class="page-title">邀请码管理</h1>
+        <p class="page-description">生成新的注册链接，并查看每个邀请码的使用情况。</p>
+      </div>
+      <RouterLink to="/dashboard" class="btn-ghost w-full justify-center sm:w-auto">
+        返回概览
+      </RouterLink>
+    </div>
+
+    <div v-if="loading" class="card p-6 animate-pulse">
+      <div class="h-6 w-1/4 rounded bg-themed-secondary mb-5"></div>
+      <div class="grid gap-3 md:grid-cols-3">
+        <div v-for="i in 3" :key="i" class="h-24 rounded-lg bg-themed-secondary"></div>
+      </div>
+    </div>
+
+    <template v-else>
+      <div class="grid gap-3 md:grid-cols-3">
+        <div class="card p-5">
+          <p class="text-sm text-themed-muted">已生成</p>
+          <p class="mt-2 text-3xl font-bold text-themed">{{ summary?.stats.total || 0 }}</p>
+        </div>
+        <div class="card p-5">
+          <p class="text-sm text-themed-muted">已使用</p>
+          <p class="mt-2 text-3xl font-bold text-emerald-500">{{ summary?.stats.used || 0 }}</p>
+        </div>
+        <div class="card p-5">
+          <p class="text-sm text-themed-muted">使用率</p>
+          <p class="mt-2 text-3xl font-bold text-sky-500">{{ summary?.stats.usageRate || 0 }}%</p>
+        </div>
+      </div>
+
+      <div class="card p-5">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div class="min-w-0 flex-1">
+            <h2 class="text-base font-semibold text-themed">生成邀请码</h2>
+            <p class="mt-1 text-sm text-themed-muted">选择一种管理员配置的成本方式，生成成功后可复制注册链接给新用户。</p>
+
+            <div v-if="enabledCostOptions.length > 0" class="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+              <button
+                v-for="option in enabledCostOptions"
+                :key="option.resource"
+                type="button"
+                class="rounded-lg border p-4 text-left transition-all"
+                :class="selectedCostResource === option.resource
+                  ? (themeStore.isDark ? 'border-white bg-white/5' : 'border-gray-900 bg-gray-50')
+                  : (themeStore.isDark ? 'border-gray-800 hover:border-gray-600' : 'border-gray-200 hover:border-gray-300')"
+                @click="selectedCostResource = option.resource"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <div>
+                    <p class="text-sm font-semibold text-themed">{{ option.label }}</p>
+                    <p class="mt-1 text-2xl font-bold text-themed">{{ option.displayAmount }}</p>
+                  </div>
+                  <span
+                    class="badge"
+                    :class="hasEnoughResource(option) ? 'badge-success' : 'badge-error'"
+                  >
+                    {{ getBalanceLabel(option.resource) }}
+                  </span>
+                </div>
+              </button>
+            </div>
+
+            <div v-else class="mt-4 rounded-lg border border-themed bg-themed-secondary/40 p-4 text-sm text-themed-muted">
+              管理员尚未开启用户生成邀请码的价格选项。
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="btn-primary w-full justify-center lg:w-auto"
+            :disabled="!canGenerate"
+            @click="generateInvite"
+          >
+            <svg v-if="generating" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span>{{ generating ? '生成中' : '生成邀请码' }}</span>
+          </button>
+        </div>
+
+        <div v-if="generatedInvites.length > 0" class="mt-5 rounded-lg border border-themed bg-themed-secondary/40 p-4">
+          <p class="text-sm font-medium text-themed">刚刚生成</p>
+          <div class="mt-3 space-y-2">
+            <div v-for="invite in generatedInvites" :key="invite.id" class="flex flex-col gap-2 rounded-lg bg-themed p-3 sm:flex-row sm:items-center sm:justify-between">
+              <code class="text-sm text-themed-secondary">{{ invite.code }}</code>
+              <div class="flex gap-2">
+                <button class="btn-ghost btn-sm" @click="copyText(invite.code, '邀请码已复制')">复制码</button>
+                <button class="btn-secondary btn-sm" @click="copyText(getInviteLink(invite), '邀请链接已复制')">复制链接</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card overflow-hidden">
+        <div class="flex flex-col gap-3 border-b border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 class="text-base font-semibold text-themed">我的邀请码</h2>
+            <p class="text-sm text-themed-muted">可查看是否已被注册使用，以及注册用户的用户名和邮箱。</p>
+          </div>
+          <button class="btn-ghost btn-sm" :disabled="listLoading" @click="loadInvites">刷新</button>
+        </div>
+
+        <div v-if="listLoading" class="p-8 text-center text-themed-muted">加载中...</div>
+        <div v-else-if="invites.length === 0" class="p-8 text-center text-themed-muted">
+          暂无邀请码
+        </div>
+        <div v-else class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-themed">
+            <thead>
+              <tr>
+                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">邀请码</th>
+                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">状态</th>
+                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">使用人</th>
+                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">生成成本</th>
+                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-themed-muted">时间</th>
+                <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-themed-muted">操作</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="invite in invites" :key="invite.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <code class="text-sm text-themed-secondary">{{ invite.code }}</code>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="badge" :class="getStatus(invite).className">{{ getStatus(invite).label }}</span>
+                </td>
+                <td class="px-4 py-3 min-w-[220px]">
+                  <div v-if="invite.usedByUser" class="flex items-center gap-2">
+                    <UserAvatar
+                      :username="invite.usedByUser.username"
+                      :email="invite.usedByUser.email"
+                      :avatar-style="invite.usedByUser.avatarStyle"
+                      :badge-id="invite.usedByUser.avatarBadgeId"
+                      :size="32"
+                    />
+                    <div class="min-w-0">
+                      <p class="truncate text-sm font-medium text-themed">{{ invite.usedByUser.username }}</p>
+                      <p class="truncate text-xs text-themed-muted">{{ invite.usedByUser.email || '-' }}</p>
+                    </div>
+                  </div>
+                  <span v-else class="text-sm text-themed-muted">-</span>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-themed-muted">
+                  {{ invite.costSnapshot?.displayAmount || '管理员生成' }}
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-sm text-themed-muted">
+                  <div>生成 {{ formatDate(invite.createdAt) }}</div>
+                  <div v-if="invite.usedAt">使用 {{ formatDate(invite.usedAt) }}</div>
+                  <div v-else-if="invite.expiresAt">过期 {{ formatDate(invite.expiresAt) }}</div>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap text-right">
+                  <div class="inline-flex gap-2">
+                    <button class="btn-ghost btn-sm" @click="copyText(invite.code, '邀请码已复制')">复制码</button>
+                    <button class="btn-secondary btn-sm" @click="copyText(getInviteLink(invite), '邀请链接已复制')">复制链接</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="total > 0" class="flex flex-col gap-3 border-t border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <p class="text-sm text-themed-muted">共 {{ total }} 条</p>
+          <div class="flex items-center gap-2">
+            <button class="btn-ghost btn-sm" :disabled="page <= 1" @click="previousPage">上一页</button>
+            <span class="text-sm text-themed-muted">{{ page }} / {{ totalPages }}</span>
+            <button class="btn-ghost btn-sm" :disabled="page >= totalPages" @click="nextPage">下一页</button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/client/src/views/LoginView.vue b/client/src/views/LoginView.vue
new file mode 100644
index 0000000..304d4fe
--- /dev/null
+++ b/client/src/views/LoginView.vue
@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import TurnstileWidget from '@/components/TurnstileWidget.vue'
+import { getSafeRedirectUrl } from '@/utils/validation'
+import api from '@/api'
+import { useBrand } from '@/composables/useBrand'
+
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+
+const username = ref<string>('')
+const password = ref<string>('')
+const totpCode = ref<string>('')
+const recoveryCode = ref<string>('')
+const useRecoveryCode = ref<boolean>(false)
+const loading = ref<boolean>(false)
+const error = ref<string>('')
+
+// Turnstile 验证
+const turnstileEnabled = ref<boolean>(false)
+const turnstileSiteKey = ref<string>('')
+const turnstileToken = ref<string>('')
+const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
+void turnstileRef.value // 模板中通过 ref 使用
+const footerContactEmail = ref<string | null>(null)
+const registrationEnabled = ref<boolean>(true)
+
+const contactEmailHref = computed(() => {
+  const email = footerContactEmail.value?.trim()
+  if (!email) return null
+  return email.startsWith('mailto:') ? email : `mailto:${email}`
+})
+
+// OAuth 提供商
+const oauthProviders = ref<string[]>([])
+
+onMounted(async (): Promise<void> => {
+  // 加载 Turnstile 配置和 OAuth 提供商
+  try {
+    const [configResponse, oauthResponse] = await Promise.all([
+      api.systemConfig.getPublic(),
+      api.oauth.getProviders()
+    ])
+    
+    registrationEnabled.value = configResponse.registrationEnabled ?? true
+    turnstileEnabled.value = configResponse.turnstileEnabled || false
+    turnstileSiteKey.value = configResponse.turnstileSiteKey || ''
+    footerContactEmail.value = configResponse.footerContactEmail || null
+    oauthProviders.value = (oauthResponse as { providers?: string[] }).providers || []
+  } catch (e) {
+    console.error('Failed to load config:', e)
+  }
+  
+  // 检查 OAuth 回调错误
+  checkOAuthErrors()
+})
+
+function onTurnstileExpire() {
+  turnstileToken.value = ''
+}
+
+function checkOAuthErrors(): void {
+  const urlError = route.query.error as string | undefined
+  const provider = route.query.provider as string | undefined
+  
+  if (urlError) {
+    const errorMessages: Record<string, string> = {
+      'not_bound': t('auth.oauthNotBound', { provider: (provider || '').toUpperCase() }),
+      'user_not_found': t('auth.oauthUserNotFound'),
+      'account_banned': t('auth.oauthAccountBanned'),
+      'provider_disabled': t('auth.oauthProviderDisabled'),
+      'token_error': t('auth.oauthTokenError'),
+      'oauth_error': t('auth.oauthError')
+    }
+    error.value = errorMessages[urlError] || t('auth.loginFailed') + ': ' + urlError
+    
+    // 清除 URL 参数
+    router.replace({ query: {} })
+  }
+}
+
+async function handleLogin(): Promise<void> {
+  if (!username.value || !password.value) {
+    error.value = t('auth.enterUsernameOrEmailPassword')
+    return
+  }
+
+  // 检查 Turnstile 验证
+  if (turnstileEnabled.value && !turnstileToken.value) {
+    error.value = t('auth.turnstileRequired')
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+
+  try {
+    // 始终发送2FA代码（如果有），后端会根据用户是否启用2FA来决定是否验证
+    await authStore.login(
+      username.value, 
+      password.value, 
+      !useRecoveryCode.value && totpCode.value ? totpCode.value : undefined,
+      useRecoveryCode.value && recoveryCode.value ? recoveryCode.value : undefined,
+      turnstileEnabled.value ? turnstileToken.value : undefined
+    )
+    
+    // 根据用户角色决定跳转目标
+    // 安全改进：验证 redirect 参数防止开放重定向漏洞
+    const defaultRedirect = authStore.isAdmin ? '/admin/users' : '/'
+    const safeRedirect = getSafeRedirectUrl(route.query.redirect as string, defaultRedirect)
+    router.push(safeRedirect)
+  } catch (err: any) {
+    error.value = err?.message || String(err)
+    // 如果验证码错误，清空验证码让用户重新输入
+    if (useRecoveryCode.value) {
+      recoveryCode.value = ''
+    } else {
+      totpCode.value = ''
+    }
+    // Reset turnstile on any error (token can only be used once)
+    if (turnstileRef.value) {
+      turnstileRef.value.reset?.()
+    }
+    turnstileToken.value = ''
+  } finally {
+    loading.value = false
+  }
+}
+
+function loginWithOAuth(provider: string): void {
+  // 安全改进：验证 redirect 参数防止开放重定向漏洞
+  // 默认跳转到根路径，路由守卫会根据用户角色自动跳转
+  const defaultRedirect = '/'
+  const safeRedirect = getSafeRedirectUrl(route.query.redirect as string, defaultRedirect)
+  window.location.href = `/api/oauth/authorize/${provider}?mode=login&redirect=${encodeURIComponent(safeRedirect)}`
+}
+
+interface ProviderInfo {
+  name: string
+  bgClass: string
+  textClass: string
+  icon: string
+}
+
+function getProviderInfo(provider: string): ProviderInfo {
+  const info: Record<string, ProviderInfo> = {
+    github: {
+      name: 'GitHub',
+      bgClass: 'bg-[#24292e] hover:bg-[#2f363d]',
+      textClass: 'text-white',
+      icon: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>`
+    },
+    google: {
+      name: 'Google',
+      bgClass: 'bg-white hover:bg-gray-50 border border-gray-300',
+      textClass: 'text-gray-700',
+      icon: `<svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path></svg>`
+    }
+  }
+  return info[provider] || { name: provider, bgClass: 'bg-gray-700 hover:bg-gray-600', textClass: 'text-white', icon: '' }
+}
+</script>
+
+<template>
+  <div 
+    class="min-h-screen flex items-center justify-center p-4"
+    :class="themeStore.isDark ? 'bg-[#0a0a0a]' : 'bg-gray-50'"
+  >
+    <div class="w-full max-w-sm">
+      <!-- Logo -->
+      <div class="text-center mb-8">
+        <img
+          :src="brand.brandLogoUrl"
+          :alt="brand.brandName"
+          class="w-16 h-16 mx-auto mb-2 rounded-xl"
+        />
+        <h2 
+          class="text-lg font-semibold mb-1"
+          :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+        >
+          {{ brand.brandName }}
+        </h2>
+        <p 
+          class="text-sm"
+          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-600'"
+        >
+          {{ $t('auth.loginTo') }}
+        </p>
+      </div>
+
+      <!-- 登录表单 -->
+      <div class="card p-6">
+        <form class="space-y-4" @submit.prevent="handleLogin">
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >{{ $t('auth.usernameOrEmail') }}</label>
+            <input
+              v-model="username"
+              type="text"
+              class="input"
+              :placeholder="$t('auth.usernameOrEmailPlaceholder')"
+              autocomplete="username"
+            />
+          </div>
+
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >{{ $t('auth.password') }}</label>
+            <input
+              v-model="password"
+              type="password"
+              class="input"
+              :placeholder="$t('auth.passwordPlaceholder')"
+              autocomplete="current-password"
+            />
+          </div>
+
+          <!-- 2FA 验证码输入（始终显示，可选） -->
+          <div>
+            <!-- TOTP 验证码 -->
+            <div v-if="!useRecoveryCode">
+              <label 
+                class="block text-sm mb-1.5"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+              >
+                {{ $t('auth.twoFactorCode') }}
+                <span class="ml-2 text-xs" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                  ({{ $t('auth.twoFactorOptional') }})
+                </span>
+              </label>
+              <input
+                v-model="totpCode"
+                type="text"
+                maxlength="6"
+                class="input"
+                :placeholder="$t('auth.twoFactorCodePlaceholder')"
+                autocomplete="one-time-code"
+              />
+              <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ $t('auth.twoFactorOptionalHint') }}
+              </p>
+            </div>
+            <!-- 恢复码 -->
+            <div v-else>
+              <label 
+                class="block text-sm mb-1.5"
+                :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+              >{{ $t('auth.recoveryCode') }}</label>
+              <input
+                v-model="recoveryCode"
+                type="text"
+                class="input"
+                :placeholder="$t('auth.recoveryCodePlaceholder')"
+              />
+              <p class="text-xs mt-1" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+                {{ $t('auth.recoveryCodeHint') }}
+              </p>
+            </div>
+            <!-- 切换按钮 -->
+            <button
+              type="button"
+              class="text-xs mt-2 transition-colors"
+              :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-800'"
+              @click="useRecoveryCode = !useRecoveryCode; totpCode = ''; recoveryCode = ''"
+            >
+              {{ useRecoveryCode ? $t('auth.useTotpCode') : $t('auth.useRecoveryCode') }}
+            </button>
+          </div>
+
+          <!-- Turnstile 验证 -->
+          <TurnstileWidget
+            v-if="turnstileEnabled && turnstileSiteKey"
+            ref="turnstileRef"
+            v-model="turnstileToken"
+            :site-key="turnstileSiteKey"
+            :theme="themeStore.isDark ? 'dark' : 'light'"
+            @expire="onTurnstileExpire"
+          />
+
+          <!-- 错误提示 -->
+          <div v-if="error" class="text-sm text-red-500">
+            {{ error }}
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="btn-primary w-full"
+          >
+            {{ loading ? $t('auth.loggingIn') : $t('auth.continue') }}
+          </button>
+        </form>
+
+        <!-- OAuth Quick Login -->
+        <div v-if="oauthProviders.length > 0" class="mt-6">
+          <div class="relative">
+            <div class="absolute inset-0 flex items-center">
+              <div 
+                class="w-full border-t"
+                :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-200'"
+              ></div>
+            </div>
+            <div class="relative flex justify-center text-sm">
+              <span 
+                class="px-2"
+                :class="themeStore.isDark ? 'bg-gray-900 text-gray-500' : 'bg-white text-gray-500'"
+              >{{ $t('auth.orUse') }}</span>
+            </div>
+          </div>
+
+          <div class="mt-4 grid gap-3" :class="oauthProviders.length > 1 ? 'grid-cols-2' : 'grid-cols-1'">
+            <button
+              v-for="provider in oauthProviders"
+              :key="provider"
+              :class="[
+                'flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors',
+                getProviderInfo(provider).bgClass,
+                getProviderInfo(provider).textClass
+              ]"
+              @click="loginWithOAuth(provider)"
+            >
+              <span v-html="getProviderInfo(provider).icon"></span>
+              {{ getProviderInfo(provider).name }}
+            </button>
+          </div>
+          
+          <p 
+            class="mt-3 text-xs text-center"
+            :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+          >
+            {{ $t('auth.oauthBindHint') }}
+          </p>
+        </div>
+      </div>
+
+      <div class="mt-6 space-y-2 text-center text-sm">
+        <p v-if="registrationEnabled" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+          {{ $t('auth.noAccount') }}
+          <RouterLink 
+            to="/register" 
+            class="transition-colors"
+            :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-700 hover:text-gray-900'"
+          >
+            {{ $t('auth.register') }}
+          </RouterLink>
+        </p>
+        <p v-else :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+          {{ $t('auth.registrationClosedShort') }}
+        </p>
+        <p :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+          <RouterLink 
+            to="/forgot-password" 
+            class="transition-colors"
+            :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-700 hover:text-gray-900'"
+          >
+            {{ $t('auth.forgotPasswordLink') }}
+          </RouterLink>
+        </p>
+      </div>
+
+      <!-- 右下角操作按钮 -->
+      <div class="fixed bottom-4 right-4 z-10 flex items-center gap-2">
+        <a
+          v-if="contactEmailHref"
+          :href="contactEmailHref"
+          class="p-2 rounded-lg transition-colors"
+          :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-800' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200'"
+          :title="$t('auth.contactEmail')"
+          :aria-label="$t('auth.contactEmail')"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+            />
+          </svg>
+        </a>
+
+        <button
+          class="p-2 rounded-lg transition-colors"
+          :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-800' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200'"
+          :title="themeStore.mode === 'dark' ? $t('theme.dark') : themeStore.mode === 'light' ? $t('theme.light') : $t('theme.system')"
+          @click="themeStore.toggleTheme"
+        >
+          <!-- 深色图标 -->
+          <svg v-if="themeStore.mode === 'dark'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+          </svg>
+          <!-- 浅色图标 -->
+          <svg v-else-if="themeStore.mode === 'light'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+          </svg>
+          <!-- 系统图标 -->
+          <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/LogsView.vue b/client/src/views/LogsView.vue
new file mode 100644
index 0000000..811c4d5
--- /dev/null
+++ b/client/src/views/LogsView.vue
@@ -0,0 +1,356 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import type { Log } from '@/types/api'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'LogsView' })
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 数据
+const logs = ref<Log[]>([])
+const loading = ref<boolean>(true)   // 首次加载
+const refreshing = ref<boolean>(false)  // 后台刷新
+const modules = ref<string[]>([])
+
+// 分页
+const page = ref<number>(1)
+const pageSize = ref<number>(100)
+const total = ref<number>(0)
+const totalPages = ref<number>(0)
+
+// 筛选
+const selectedModule = ref<string>('')
+const searchQuery = ref<string>('')
+
+// 展开的内容行
+const expandedRows = ref<Set<number>>(new Set())
+
+// 加载日志
+async function loadLogs(silent = false): Promise<void> {
+  if (!silent) loading.value = true
+  else refreshing.value = true
+  try {
+    const params: { page: number; pageSize: number; module?: string; search?: string } = {
+      page: page.value,
+      pageSize: pageSize.value
+    }
+    if (selectedModule.value) {
+      params.module = selectedModule.value
+    }
+    if (searchQuery.value) {
+      params.search = searchQuery.value
+    }
+    
+    const response = await api.logs.list(params)
+    const data = response as { logs?: Log[]; total?: number; totalPages?: number }
+    logs.value = data.logs || []
+    total.value = data.total || 0
+    totalPages.value = data.totalPages || 0
+  } catch (err: any) {
+    toast.error(t('logs.loadFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+// 加载模块
+async function loadModules(): Promise<void> {
+  try {
+    const response = await api.logs.getModules()
+    modules.value = (response as { modules?: string[] }).modules || []
+  } catch {
+    // 静默失败
+  }
+}
+
+// 搜索
+function handleSearch(): void {
+  page.value = 1
+  loadLogs(true)  // 静默刷新
+}
+
+// 重置筛选
+function resetFilters(): void {
+  selectedModule.value = ''
+  searchQuery.value = ''
+  page.value = 1
+  loadLogs(true)  // 静默刷新
+}
+
+// 修改每页数量
+function handlePageSizeChange(): void {
+  page.value = 1
+  loadLogs(true)
+}
+
+// 格式化日期
+function formatDate(dateString: string | null | undefined): string {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  // 支援 zh-CN, zh-TW, en 三種語言
+  const localeMap: Record<string, string> = {
+    'zh-CN': 'zh-CN',
+    'zh-TW': 'zh-TW',
+    'en': 'en-US'
+  }
+  const localeCode = localeMap[locale.value] || 'en-US'
+  return date.toLocaleString(localeCode, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+// 获取结果徽章类名
+function getResultClass(result: string): string {
+  if (result === 'success') {
+    return 'badge-success'
+  } else if (result === 'failed') {
+    return 'badge-error'
+  } else {
+    return 'badge-warning'
+  }
+}
+
+// 格式化结果文本 - 直接显示原始值
+function formatResult(result: string): string {
+  return result
+}
+
+// 格式化模块文本 - 直接显示原始值
+function formatModule(module: string): string {
+  return module
+}
+
+// 格式化操作文本 - 直接显示原始值
+function formatAction(action: string): string {
+  return action
+}
+
+// 切换内容展开/收起
+function toggleContent(logId: number): void {
+  if (expandedRows.value.has(logId)) {
+    expandedRows.value.delete(logId)
+  } else {
+    expandedRows.value.add(logId)
+  }
+}
+
+// 检查内容是否需要截断
+function isContentLong(content: string): boolean {
+  return !!content && content.length > 60
+}
+
+onMounted(async () => {
+  await Promise.all([loadModules(), loadLogs()])
+})
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('logs.title') }}</h1>
+    </div>
+
+    <!-- Filters -->
+    <div class="card p-4">
+      <div class="flex flex-wrap items-end gap-4">
+        <!-- Module filter -->
+        <div class="flex-1 min-w-[200px]">
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('logs.module') }}</label>
+          <select 
+            v-model="selectedModule" 
+            class="input"
+            @change="handleSearch"
+          >
+            <option value="">{{ $t('logs.allModules') }}</option>
+            <option v-for="m in modules" :key="m" :value="m">{{ formatModule(m) }}</option>
+          </select>
+        </div>
+
+        <!-- Search -->
+        <div class="flex-1 min-w-[200px]">
+          <label class="block text-xs text-themed-muted mb-1.5">{{ $t('logs.search') }}</label>
+          <div class="flex gap-2">
+            <input 
+              v-model="searchQuery" 
+              type="text"
+              class="input flex-1" 
+              :placeholder="$t('logs.searchPlaceholder')" 
+              @keyup.enter="handleSearch"
+            />
+            <button class="btn-secondary h-[38px]" @click="handleSearch">{{ $t('logs.search') }}</button>
+            <button class="btn-secondary h-[38px]" @click="resetFilters">{{ $t('logs.reset') }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Logs Table -->
+    <SkeletonLoader v-if="loading" type="table" />
+
+    <div v-else class="card overflow-x-auto">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[800px]">
+          <thead>
+            <tr class="border-b border-themed">
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.time') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.user') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.module') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.action') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.content') }}</th>
+              <th class="text-left py-3 px-4 text-xs font-medium text-themed-muted whitespace-nowrap">{{ $t('logs.result') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="logs.length === 0" class="border-b border-themed">
+              <td colspan="6" class="py-8 text-center text-themed-secondary">
+                {{ $t('logs.noLogs') }}
+              </td>
+            </tr>
+            <tr 
+              v-for="log in logs" 
+              :key="log.id"
+              class="border-b border-themed hover:bg-themed/5 transition-colors"
+            >
+              <td class="py-3 px-4 text-sm text-themed-secondary whitespace-nowrap">
+                {{ formatDate(log.created_at) }}
+              </td>
+              <td class="py-3 px-4 text-sm text-themed whitespace-nowrap">
+                {{ log.username || $t('logs.system') }}
+              </td>
+              <td class="py-3 px-4 text-sm text-themed whitespace-nowrap">
+                <span class="badge badge-default whitespace-nowrap">{{ formatModule(log.module) }}</span>
+              </td>
+              <td class="py-3 px-4 text-sm text-themed whitespace-nowrap">
+                {{ formatAction(log.action) }}
+              </td>
+              <td class="py-3 px-4 text-sm">
+                <div class="max-w-xs lg:max-w-md">
+                  <!-- 短内容直接显示 -->
+                  <span v-if="!isContentLong(log.content)" class="text-themed-secondary">
+                    {{ log.content }}
+                  </span>
+                  <!-- 长内容可展开 -->
+                  <template v-else>
+                    <div v-if="!expandedRows.has(log.id)" class="flex items-center gap-1.5">
+                      <span class="text-themed-secondary truncate flex-1">{{ log.content.slice(0, 50) }}...</span>
+                      <button
+                        class="flex-shrink-0 p-1 rounded transition-colors"
+                        :class="themeStore.isDark ? 'hover:bg-gray-700 text-blue-400' : 'hover:bg-gray-100 text-blue-500'"
+                        :title="$t('logs.expand')"
+                        @click="toggleContent(log.id)"
+                      >
+                        <svg 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="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                    </div>
+                    <div v-else class="space-y-2">
+                      <p class="text-themed-secondary whitespace-pre-wrap break-words">{{ log.content }}</p>
+                      <button
+                        class="text-xs flex items-center gap-1 transition-colors"
+                        :class="themeStore.isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-500 hover:text-blue-600'"
+                        @click="toggleContent(log.id)"
+                      >
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                        </svg>
+                        {{ $t('logs.collapse') }}
+                      </button>
+                    </div>
+                  </template>
+                </div>
+              </td>
+              <td class="py-3 px-4 whitespace-nowrap">
+                <span :class="['badge whitespace-nowrap', getResultClass(log.result)]">
+                  {{ formatResult(log.result) }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <div 
+        v-if="total > 0" 
+        class="flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-3 border-t border-themed"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm text-themed-secondary">
+            {{ $t('logs.totalRecords', { total, page, totalPages }) }}
+          </span>
+          <select
+            v-model="pageSize"
+            class="text-sm rounded-md border-0 py-1 pl-2 pr-7 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer"
+            :class="themeStore.isDark 
+              ? 'bg-gray-800 text-gray-300 ring-gray-700' 
+              : 'bg-gray-50 text-gray-700 ring-gray-200'"
+            @change="handlePageSizeChange"
+          >
+            <option :value="10">10 / {{ $t('common.page') }}</option>
+            <option :value="30">30 / {{ $t('common.page') }}</option>
+            <option :value="50">50 / {{ $t('common.page') }}</option>
+            <option :value="100">100 / {{ $t('common.page') }}</option>
+          </select>
+        </div>
+        <div v-if="totalPages > 1" class="flex items-center gap-1">
+          <button
+            :disabled="page === 1 || refreshing"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              page === 1 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="page = Math.max(1, page - 1); loadLogs(true)"
+          >
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div 
+            class="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium"
+            :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+          >
+            <span>{{ page }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">/</span>
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ totalPages }}</span>
+          </div>
+          <button
+            :disabled="page === totalPages || refreshing"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              page === totalPages 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="page = Math.min(totalPages, page + 1); loadLogs(true)"
+          >
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
diff --git a/client/src/views/MailDomainView.vue b/client/src/views/MailDomainView.vue
new file mode 100644
index 0000000..26e4d09
--- /dev/null
+++ b/client/src/views/MailDomainView.vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { translateError } from '@/utils/errorHandler'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const toast = useToast()
+
+// TAB 状态
+const activeTab = ref<'accounts' | 'dns' | 'settings'>('accounts')
+
+// 加载状态
+const loading = ref(true)
+const actionLoading = ref('')
+
+// 域名数据
+const domain = ref<any>(null)
+const dnsConfig = ref<any>(null)
+
+const domainId = computed(() => parseInt(route.params.id as string))
+
+// 过滤后的 DNS 记录（排除验证记录，因为它单独显示）
+const filteredDnsRecords = computed(() => {
+  if (!dnsConfig.value?.dnsRecords) return []
+  return dnsConfig.value.dnsRecords.filter(
+    (r: { record: string }) => r.record !== 'workspace-verification'
+  )
+})
+
+onMounted(async () => {
+  await loadDomain()
+})
+
+async function loadDomain() {
+  loading.value = true
+  try {
+    const res = await api.mail.getDomain(domainId.value)
+    domain.value = res.domain
+  } catch (err: any) {
+    toast.error(translateError(err))
+    router.push('/mail')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadDnsConfig() {
+  try {
+    const res = await api.mail.getDomainDns(domainId.value)
+    dnsConfig.value = res
+  } catch (err: any) {
+    toast.error(translateError(err))
+  }
+}
+
+async function verifyDomain() {
+  actionLoading.value = 'verify'
+  try {
+    const res = await api.mail.verifyDomain(domainId.value)
+    if (res.verified) {
+      toast.success(t('mail.domainVerified'))
+      await loadDomain()
+    } else {
+      toast.info(t('mail.domainNotVerified'))
+    }
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 删除域名
+async function deleteDomain() {
+  if (!confirm(t('mail.deleteDomainConfirm', { domain: domain.value?.domain }))) return
+  
+  actionLoading.value = 'delete-domain'
+  try {
+    await api.mail.deleteDomain(domainId.value)
+    toast.success(t('mail.domainDeleted'))
+    router.push('/mail')
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 复制状态
+const copiedKey = ref<string>('')
+const showPassword = ref(false)
+
+// Webmail 登录地址
+const webmailUrl = computed(() => {
+  if (!domain.value?.sourceCode) return ''
+  const code = domain.value.sourceCode
+  // us -> us2, 其他 -> {code}1
+  const subdomain = code === 'us' ? 'us2' : `${code}1`
+  return `https://${subdomain}.workspace.org/`
+})
+
+function copyValue(text: string, key: string) {
+  navigator.clipboard.writeText(text)
+  copiedKey.value = key
+  toast.success(t('common.copied'))
+  setTimeout(() => {
+    if (copiedKey.value === key) copiedKey.value = ''
+  }, 2000)
+}
+
+// DNS 记录格式化函数
+function formatHostRecord(record: string): string {
+  // 如果是 @，直接返回
+  if (record === '@') return '@'
+  // 移除末尾的点
+  return record.replace(/\.$/, '')
+}
+
+function formatRecordValue(record: { type: string; value: string; prio?: number }): string {
+  // MX 记录显示优先级
+  if (record.type === 'MX' && record.prio !== undefined) {
+    return `${record.prio} ${record.value}`
+  }
+  return record.value
+}
+
+function getDnsRecordDescription(record: { type: string; value: string; record?: string }): string {
+  switch (record.type) {
+    case 'MX': return t('mail.dnsHint.mx')
+    case 'CNAME': return t('mail.dnsHint.cname')
+    case 'TXT':
+      if (record.value?.toLowerCase().includes('spf')) return t('mail.dnsHint.spf')
+      if (record.value?.toLowerCase().includes('dkim')) return t('mail.dnsHint.dkim')
+      if (record.record === '_dmarc') return t('mail.dnsHint.dmarc')
+      return t('mail.dnsHint.txt')
+    default: return ''
+  }
+}
+
+function getStatusBadge(status: string) {
+  switch (status) {
+    case 'verified': return 'badge-success'
+    case 'pending': return 'badge-warning'
+    case 'suspended': return 'badge-error'
+    default: return 'badge-ghost'
+  }
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString()
+}
+
+// 切换到 DNS 配置 TAB 时加载配置
+function switchTab(tab: 'accounts' | 'dns' | 'settings') {
+  activeTab.value = tab
+  if (tab === 'dns' && !dnsConfig.value) {
+    loadDnsConfig()
+  }
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 返回按钮和标题 -->
+    <div class="mb-6">
+      <button class="btn btn-ghost btn-sm gap-1 mb-2 -ml-2" @click="router.push('/mail')">
+        <svg 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 19l-7-7 7-7"></path>
+        </svg>
+        {{ t('common.back') }}
+      </button>
+      
+      <div v-if="loading" class="h-8 bg-themed-secondary rounded animate-pulse w-48"></div>
+      <div v-else-if="domain" class="flex items-center gap-3">
+        <h1 class="text-xl font-bold text-themed">{{ domain.domain }}</h1>
+        <span :class="['badge', getStatusBadge(domain.status)]">
+          {{ t('mail.domainStatus.' + domain.status) }}
+        </span>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <template v-else-if="domain">
+      <!-- TAB 切换 -->
+      <div class="flex border-b border-themed mb-6">
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="activeTab === 'accounts' 
+            ? 'border-blue-500 text-blue-500' 
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab('accounts')"
+        >
+          {{ t('mail.tabs.accounts') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="activeTab === 'dns' 
+            ? 'border-blue-500 text-blue-500' 
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab('dns')"
+        >
+          {{ t('mail.tabs.dns') }}
+        </button>
+        <button
+          class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+          :class="activeTab === 'settings' 
+            ? 'border-blue-500 text-blue-500' 
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab('settings')"
+        >
+          {{ t('mail.tabs.settings') }}
+        </button>
+      </div>
+
+      <!-- 邮箱账户 TAB -->
+      <div v-show="activeTab === 'accounts'" class="space-y-6">
+        <!-- DNS 未完成提示 -->
+        <div v-if="domain.status !== 'verified'" class="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900/50 rounded-lg p-4">
+          <div class="flex items-center gap-3">
+            <svg class="w-5 h-5 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+            </svg>
+            <span class="text-sm text-amber-700 dark:text-amber-400 flex-1">{{ t('mail.completeDnsFirst') }}</span>
+            <button class="text-sm text-amber-700 dark:text-amber-400 hover:underline" @click="activeTab = 'dns'">{{ t('mail.goDnsConfig') }}</button>
+          </div>
+        </div>
+
+        <!-- 管理员账号卡片 -->
+        <div v-if="domain.adminUsername" class="border border-themed rounded-lg">
+          <div class="p-4 border-b border-themed">
+            <h4 class="text-sm font-medium text-themed">{{ t('mail.adminAccount') }}</h4>
+            <p class="text-xs text-themed-muted mt-1">{{ t('mail.adminAccountDesc') }}</p>
+          </div>
+          <div class="p-4 space-y-4">
+            <!-- 邮箱地址 -->
+            <div>
+              <div class="text-xs text-themed-muted mb-1.5">{{ t('mail.emailAddress') }}</div>
+              <div class="flex items-center gap-2">
+                <code class="text-sm text-themed">{{ domain.adminUsername }}</code>
+                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" :title="t('common.copy')" @click="copyValue(domain.adminUsername, 'admin-email')">
+                  <svg v-if="copiedKey !== 'admin-email'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                  <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                </button>
+              </div>
+            </div>
+            <!-- 密码 -->
+            <div>
+              <div class="text-xs text-themed-muted mb-1.5">{{ t('mail.password') }}</div>
+              <div class="flex items-center gap-2">
+                <code class="text-sm text-themed">{{ showPassword ? domain.adminPassword : '••••••••' }}</code>
+                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" :title="showPassword ? t('common.hide') : t('common.show')" @click="showPassword = !showPassword">
+                  <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>
+                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" :title="t('common.copy')" @click="copyValue(domain.adminPassword, 'admin-password')">
+                  <svg v-if="copiedKey !== 'admin-password'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                  <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                </button>
+              </div>
+            </div>
+            <!-- 登录地址 -->
+            <div>
+              <div class="text-xs text-themed-muted mb-1.5">{{ t('mail.webmailUrl') }}</div>
+              <div class="flex items-center gap-2">
+                <a :href="webmailUrl" target="_blank" class="text-sm text-blue-500 hover:underline">{{ webmailUrl }}</a>
+                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" :title="t('common.copy')" @click="copyValue(webmailUrl, 'webmail-url')">
+                  <svg v-if="copiedKey !== 'webmail-url'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                  <svg v-else class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                </button>
+              </div>
+            </div>
+            <!-- 帮助文档 -->
+            <div>
+              <router-link to="/help/mail" class="text-sm text-blue-500 hover:underline inline-flex items-center gap-1">
+                <svg 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                {{ t('mail.helpDoc') }}
+              </router-link>
+            </div>
+          </div>
+        </div>
+
+        <!-- 无管理员账号提示 -->
+        <div v-else class="border border-themed border-dashed rounded-lg p-8 text-center">
+          <svg class="w-10 h-10 mx-auto mb-3 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+          </svg>
+          <p class="text-sm text-themed-muted">{{ t('mail.noAdminAccount') }}</p>
+        </div>
+      </div>
+
+      <!-- DNS 配置 TAB -->
+      <div v-show="activeTab === 'dns'" class="space-y-6">
+        <div class="flex justify-between items-center">
+          <p class="text-sm text-themed-muted">{{ t('mail.dnsDescription') }}</p>
+          <button class="btn btn-sm btn-outline" :disabled="actionLoading === 'verify'" @click="verifyDomain">
+            <span v-if="actionLoading === 'verify'" class="loading loading-spinner loading-xs mr-1"></span>
+            {{ t('mail.refreshStatus') }}
+          </button>
+        </div>
+
+        <div v-if="!dnsConfig" class="flex justify-center py-8">
+          <span class="loading loading-spinner loading-md"></span>
+        </div>
+
+        <!-- DNS 记录列表 -->
+        <div v-else class="space-y-3">
+          <!-- TXT 验证记录 -->
+          <div v-if="dnsConfig.txtRecord" class="border border-themed rounded-lg p-4">
+            <div class="mb-3">
+              <span class="text-xs font-medium text-themed-muted uppercase tracking-wide">TXT</span>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-4 text-sm">
+              <div>
+                <div class="text-themed-muted text-xs mb-1">{{ t('mail.hostRecord') }}</div>
+                <div class="flex items-center gap-1.5">
+                  <code class="text-themed">workspace-verification</code>
+                  <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" :title="t('common.copy')" @click="copyValue('workspace-verification', 'txt-host')">
+                    <svg v-if="copiedKey !== 'txt-host'" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                    <svg v-else class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <div class="text-themed-muted text-xs mb-1">{{ t('mail.recordValue') }}</div>
+                <div class="flex items-start gap-1.5">
+                  <code class="text-themed break-all">{{ dnsConfig.txtRecord }}</code>
+                  <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0 mt-0.5" :title="t('common.copy')" @click="copyValue(dnsConfig.txtRecord, 'txt-value')">
+                    <svg v-if="copiedKey !== 'txt-value'" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                    <svg v-else class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <p class="text-xs text-themed-muted mt-3">{{ t('mail.dnsHint.txt') }}</p>
+          </div>
+
+          <!-- 其他 DNS 记录（来自 API 返回的原始数据，跳过验证记录） -->
+          <div v-for="(record, idx) in filteredDnsRecords" :key="idx" class="border border-themed rounded-lg p-4">
+            <div class="mb-3">
+              <span class="text-xs font-medium text-themed-muted uppercase tracking-wide">{{ record.type }}</span>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-[180px_1fr] gap-4 text-sm">
+              <div>
+                <div class="text-themed-muted text-xs mb-1">{{ t('mail.hostRecord') }}</div>
+                <div class="flex items-center gap-1.5">
+                  <code class="text-themed truncate">{{ formatHostRecord(record.record) }}</code>
+                  <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0" :title="t('common.copy')" @click="copyValue(formatHostRecord(record.record), `dns-${idx}-host`)">
+                    <svg v-if="copiedKey !== `dns-${idx}-host`" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                    <svg v-else class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <div class="text-themed-muted text-xs mb-1">{{ t('mail.recordValue') }}</div>
+                <div class="flex items-start gap-1.5">
+                  <code class="text-themed break-all">{{ formatRecordValue(record) }}</code>
+                  <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0 mt-0.5" :title="t('common.copy')" @click="copyValue(formatRecordValue(record), `dns-${idx}-value`)">
+                    <svg v-if="copiedKey !== `dns-${idx}-value`" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                    <svg v-else class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <p class="text-xs text-themed-muted mt-3">{{ getDnsRecordDescription(record) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 设置 TAB -->
+      <div v-show="activeTab === 'settings'" class="space-y-4">
+        <div class="card p-4">
+          <h4 class="font-medium text-themed mb-3">{{ t('mail.domainInfo') }}</h4>
+          <div class="space-y-2 text-sm">
+            <div class="flex justify-between">
+              <span class="text-themed-muted">{{ t('mail.domainName') }}</span>
+              <span class="text-themed">{{ domain.domain }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-themed-muted">{{ t('common.status') }}</span>
+              <span :class="['badge badge-sm', getStatusBadge(domain.status)]">
+                {{ t('mail.domainStatus.' + domain.status) }}
+              </span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-themed-muted">{{ t('mail.createdAt') }}</span>
+              <span class="text-themed">{{ formatDate(domain.createdAt) }}</span>
+            </div>
+            <div v-if="domain.verifiedAt" class="flex justify-between">
+              <span class="text-themed-muted">{{ t('mail.verifiedAt') }}</span>
+              <span class="text-themed">{{ formatDate(domain.verifiedAt) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card border border-red-200 dark:border-red-900/50 overflow-hidden">
+          <div class="px-4 py-3 bg-red-50 dark:bg-red-950/30 border-b border-red-200 dark:border-red-900/50">
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <h4 class="text-sm font-medium text-red-600 dark:text-red-400">{{ t('mail.dangerZone') }}</h4>
+            </div>
+          </div>
+          <div class="p-4 flex items-center justify-between">
+            <p class="text-sm text-themed-muted">{{ t('mail.deleteDomainWarning') }}</p>
+            <button 
+              class="btn btn-error btn-sm flex-shrink-0 ml-4" 
+              :disabled="actionLoading === 'delete-domain'"
+              @click="deleteDomain"
+            >
+              <span v-if="actionLoading === 'delete-domain'" class="loading loading-spinner loading-xs mr-1"></span>
+              {{ t('mail.deleteDomain') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/client/src/views/MailView.vue b/client/src/views/MailView.vue
new file mode 100644
index 0000000..a37fc7f
--- /dev/null
+++ b/client/src/views/MailView.vue
@@ -0,0 +1,864 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useConfigStore } from '@/stores/config'
+import { translateError } from '@/utils/errorHandler'
+import FlagIcon from '@/components/FlagIcon.vue'
+import { freeSiteCopy } from '@/utils/freeSiteFun'
+
+const { t } = useI18n()
+const router = useRouter()
+const toast = useToast()
+const configStore = useConfigStore()
+void configStore.loadPublicConfig()
+
+// TAB 状态
+const activeTab = ref<'my' | 'buy'>('my')
+
+// 加载状态
+const loading = ref(true)
+const buyLoading = ref(false)
+
+// 订阅数据
+const subscription = ref<any>(null)
+
+// 购买相关
+const sources = ref<any[]>([])
+const selectedSourceId = ref<number | null>(null)
+const selectedPlanId = ref<number | null>(null)
+
+// 优惠码相关
+const affCode = ref('')
+const affCodeValid = ref<boolean | null>(null)
+const affCodeDiscount = ref(0)
+const affCodeCommissionRate = ref(0)
+const affCodeError = ref('')
+const affCodeVerifying = ref(false)
+
+// 计算属性
+const selectedSource = computed(() => sources.value.find(s => s.id === selectedSourceId.value))
+const selectedPlan = computed(() => selectedSource.value?.plans.find((p: any) => p.id === selectedPlanId.value))
+const checkoutPriceInfo = computed(() => {
+  if (!selectedPlan.value) {
+    return null
+  }
+
+  const originalPrice = Number(selectedPlan.value.price)
+  const discountAmount = affCodeValid.value
+    ? Number((originalPrice * affCodeDiscount.value).toFixed(2))
+    : 0
+  const finalPrice = Number((originalPrice - discountAmount).toFixed(2))
+
+  return {
+    originalPrice,
+    discountAmount,
+    finalPrice
+  }
+})
+
+// 检查选中地区是否已有订阅
+const hasSubscriptionInSelectedRegion = computed(() => {
+  if (!subscription.value || !selectedSourceId.value) return false
+  return subscription.value.source.id === selectedSourceId.value
+})
+
+// 域名添加弹窗
+const showAddDomainModal = ref(false)
+const addDomainLoading = ref(false)
+const newDomain = ref('')
+
+// 续费弹窗
+const showRenewModal = ref(false)
+const renewLoading = ref(false)
+const renewMonths = ref(1)
+
+onMounted(async () => {
+  await loadData()
+})
+
+async function loadData() {
+  loading.value = true
+  try {
+    const [subRes, srcRes] = await Promise.all([
+      api.mail.getSubscription(),
+      api.mail.getSources()
+    ])
+    subscription.value = subRes.subscription
+    sources.value = srcRes.sources
+    
+    // 默认选择第一个源和方案
+    if (sources.value.length > 0 && !selectedSourceId.value) {
+      selectedSourceId.value = sources.value[0].id
+      if (sources.value[0].plans.length > 0) {
+        selectedPlanId.value = sources.value[0].plans[0].id
+      }
+    }
+    
+    // 如果没有订阅，自动切换到购买 TAB
+    if (!subscription.value) {
+      activeTab.value = 'buy'
+    }
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectSource(id: number) {
+  selectedSourceId.value = id
+  const source = sources.value.find(s => s.id === id)
+  if (source?.plans.length > 0) {
+    selectedPlanId.value = source.plans[0].id
+  } else {
+    selectedPlanId.value = null
+  }
+}
+
+function selectPlan(id: number) {
+  selectedPlanId.value = id
+  // 重置优惠码状态
+  resetAffCode()
+}
+
+function resetAffCode() {
+  affCode.value = ''
+  affCodeValid.value = null
+  affCodeDiscount.value = 0
+  affCodeCommissionRate.value = 0
+  affCodeError.value = ''
+}
+
+async function verifyAffCode() {
+  if (!affCode.value.trim()) {
+    resetAffCode()
+    return
+  }
+  
+  affCodeVerifying.value = true
+  affCodeError.value = ''
+  
+  try {
+    const res = await api.mail.validateAffCode(affCode.value.trim())
+    if (res.valid) {
+      affCodeValid.value = true
+      affCodeDiscount.value = res.discountRate || 0
+      affCodeCommissionRate.value = res.commissionRate || 0
+    } else {
+      affCodeValid.value = false
+      affCodeError.value = res.error || t('aff.promoCodeInvalid')
+    }
+  } catch (err: any) {
+    affCodeValid.value = false
+    affCodeError.value = err.message || t('aff.promoCodeInvalid')
+  } finally {
+    affCodeVerifying.value = false
+  }
+}
+
+async function purchaseSubscription() {
+  if (!selectedPlanId.value) {
+    toast.error(t('mail.selectPlanFirst'))
+    return
+  }
+  
+  buyLoading.value = true
+  try {
+    await api.mail.purchaseSubscription(
+      selectedPlanId.value,
+      affCodeValid.value ? affCode.value.trim() : undefined
+    )
+    toast.success(t('mail.purchaseSuccess'))
+    resetAffCode()
+    await loadData()
+    activeTab.value = 'my'
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    buyLoading.value = false
+  }
+}
+
+// 添加域名
+function openAddDomainModal() {
+  newDomain.value = ''
+  showAddDomainModal.value = true
+}
+
+async function addDomain() {
+  if (!newDomain.value.trim()) {
+    toast.error(t('mail.domainRequired'))
+    return
+  }
+  
+  addDomainLoading.value = true
+  try {
+    await api.mail.addDomain(newDomain.value.trim())
+    toast.success(t('mail.domainAdded'))
+    showAddDomainModal.value = false
+    await loadData()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    addDomainLoading.value = false
+  }
+}
+
+function goToDomain(id: number) {
+  router.push(`/mail/domains/${id}`)
+}
+
+// 续费相关
+function openRenewModal() {
+  // 根据计费周期设置默认值
+  if (subscription.value?.plan?.billingCycle === 'yearly') {
+    renewMonths.value = 12
+  } else {
+    renewMonths.value = 1
+  }
+  showRenewModal.value = true
+}
+
+const renewMonthlyPrice = computed(() => {
+  if (!subscription.value?.plan) return 0
+  const plan = subscription.value.plan
+  return plan.billingCycle === 'monthly' 
+    ? Number(plan.price) 
+    : Number(plan.price) / 12
+})
+
+const renewOriginalPrice = computed(() => {
+  return Math.round(renewMonthlyPrice.value * renewMonths.value * 100) / 100
+})
+
+const renewDiscountRate = computed(() => {
+  return subscription.value?.affBinding?.affCode?.discountRate || 0
+})
+
+const renewDiscountAmount = computed(() => {
+  return Math.round(renewOriginalPrice.value * renewDiscountRate.value * 100) / 100
+})
+
+const renewFinalPrice = computed(() => {
+  return renewOriginalPrice.value - renewDiscountAmount.value
+})
+
+async function renewSubscription() {
+  renewLoading.value = true
+  try {
+    await api.mail.renewSubscription(renewMonths.value)
+    toast.success(t('mail.renewSuccess'))
+    showRenewModal.value = false
+    await loadData()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    renewLoading.value = false
+  }
+}
+
+function getStatusBadge(status: string) {
+  switch (status) {
+    case 'verified': return 'badge-success'
+    case 'pending': return 'badge-warning'
+    case 'suspended': return 'badge-error'
+    default: return 'badge-ghost'
+  }
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString()
+}
+
+function formatPrice(price: number | string | null | undefined) {
+  if (configStore.freeSiteMode) return freeSiteCopy.mailPrice
+  const num = Number(price) || 0
+  return `¥${num.toFixed(2)}`
+}
+
+function getBillingCycleLabel(cycle: string | null | undefined) {
+  if (configStore.freeSiteMode) return freeSiteCopy.mailBillingCycle
+  return cycle === 'monthly' ? t('mail.monthly') : t('mail.yearly')
+}
+
+function getBillingCycleSuffix(cycle: string | null | undefined) {
+  if (configStore.freeSiteMode) return ''
+  return `/${cycle === 'monthly' ? t('mail.month') : t('mail.year')}`
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h1 class="page-title">{{ t('mail.title') }}</h1>
+      <p class="text-sm text-themed-muted mt-1">{{ t('mail.description') }}</p>
+    </div>
+
+    <!-- TAB 切换 -->
+    <div class="flex border-b border-themed mb-6">
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'my' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="activeTab = 'my'"
+      >
+        {{ t('mail.tabs.my') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'buy' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="activeTab = 'buy'"
+      >
+        {{ t('mail.tabs.buy') }}
+      </button>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg"></span>
+    </div>
+
+    <!-- 我的域名邮箱 TAB -->
+    <div v-else-if="activeTab === 'my'" class="space-y-6">
+      <!-- 无订阅状态 -->
+      <div v-if="!subscription" class="card p-12 text-center">
+        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-themed-secondary flex items-center justify-center">
+          <svg class="w-8 h-8 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+          </svg>
+        </div>
+        <h3 class="text-lg font-medium text-themed mb-2">{{ t('mail.noSubscription') }}</h3>
+        <p class="text-sm text-themed-muted mb-6">{{ t('mail.buyNowHint') }}</p>
+        <button class="btn btn-primary" @click="activeTab = 'buy'">
+          {{ t('mail.buyNow') }}
+        </button>
+      </div>
+
+      <!-- 有订阅状态 -->
+      <template v-else>
+        <!-- 订阅概览卡片 -->
+        <div class="card p-6">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-base font-medium text-themed">{{ t('mail.subscriptionOverview') }}</h3>
+            <span :class="['badge', getStatusBadge(subscription.status)]">
+              {{ t('mail.status.' + subscription.status) }}
+            </span>
+          </div>
+          
+          <div class="grid grid-cols-3 gap-4 mb-4">
+            <div class="bg-themed-secondary rounded-lg p-3">
+              <div class="text-xs text-themed-muted mb-1">{{ t('mail.expiresAt') }}</div>
+              <div class="text-sm font-medium text-themed">{{ formatDate(subscription.expiresAt) }}</div>
+            </div>
+            <div class="bg-themed-secondary rounded-lg p-3">
+              <div class="text-xs text-themed-muted mb-1">{{ t('mail.domainsUsed') }}</div>
+              <div class="text-sm font-medium text-themed">{{ subscription.usage.domainCount }}/{{ subscription.plan.domainLimit }}</div>
+            </div>
+            <div class="bg-themed-secondary rounded-lg p-3">
+              <div class="text-xs text-themed-muted mb-1">{{ t('mail.totalSpace') }}</div>
+              <div class="text-sm font-medium text-themed">{{ subscription.plan.diskLimitGb }} GB</div>
+            </div>
+          </div>
+          
+          <div class="flex items-center justify-between text-sm">
+            <span class="text-themed-muted">
+              {{ t('mail.plan') }}：{{ subscription.plan.name }} ({{ subscription.source.name }}) · 
+              {{ subscription.plan.domainLimit }} {{ t('mail.domains') }} / {{ subscription.plan.diskLimitGb }}GB · 
+              {{ formatPrice(subscription.plan.price) }}{{ getBillingCycleSuffix(subscription.plan.billingCycle) }}
+            </span>
+            <button class="btn btn-sm btn-outline" @click="openRenewModal">
+              {{ t('mail.renew') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- 我的域名 -->
+        <div class="card">
+          <div class="flex items-center justify-between p-4 border-b border-themed">
+            <h3 class="text-base font-medium text-themed">{{ t('mail.myDomains') }}</h3>
+            <button 
+              class="btn btn-sm btn-primary"
+              :disabled="subscription.usage.domainCount >= subscription.plan.domainLimit"
+              @click="openAddDomainModal"
+            >
+              + {{ t('mail.addDomain') }}
+            </button>
+          </div>
+          
+          <div v-if="subscription.domains.length === 0" class="p-8 text-center text-themed-muted">
+            {{ t('mail.noDomains') }}
+          </div>
+          
+          <div v-else class="divide-y divide-themed">
+            <div 
+              v-for="domain in subscription.domains" 
+              :key="domain.id"
+              class="p-4 hover:bg-themed-secondary cursor-pointer transition-colors"
+              @click="goToDomain(domain.id)"
+            >
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <span class="font-medium text-themed">{{ domain.domain }}</span>
+                    <span :class="['badge badge-sm', getStatusBadge(domain.status)]">
+                      {{ t('mail.domainStatus.' + domain.status) }}
+                    </span>
+                  </div>
+                </div>
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- 购买域名邮箱 TAB -->
+    <div v-else-if="activeTab === 'buy'" class="lg:flex lg:gap-8">
+      <!-- 左侧主内容区域 -->
+      <div class="flex-1 min-w-0 space-y-6">
+        <!-- Step 1: 选择服务地区 -->
+        <div class="card p-5">
+          <div class="flex items-center gap-2.5 mb-4">
+            <span class="w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold flex items-center justify-center">1</span>
+            <h3 class="text-sm font-semibold text-themed">{{ t('mail.selectRegion') }}</h3>
+          </div>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div
+              v-for="source in sources"
+              :key="source.id"
+              :class="[
+                'relative p-4 rounded-xl border-2 transition-all cursor-pointer group',
+                selectedSourceId === source.id 
+                  ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-950/20' 
+                  : 'border-themed hover:border-blue-300 dark:hover:border-blue-800'
+              ]"
+              @click="selectSource(source.id)"
+            >
+              <div class="flex items-center gap-3">
+                <!-- 国旗 -->
+                <div class="w-10 h-10 rounded-lg bg-themed-secondary flex items-center justify-center overflow-hidden">
+                  <FlagIcon :code="source.code" size="lg" />
+                </div>
+                <div class="min-w-0 flex-1">
+                  <div class="font-medium text-themed">{{ source.name }}</div>
+                  <div class="text-xs text-yellow-600 dark:text-yellow-400 mt-0.5">{{ t('mail.nodeStatus.limited') }}</div>
+                </div>
+                <!-- 选中指示器 -->
+                <div 
+                  :class="[
+                    'w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all',
+                    selectedSourceId === source.id 
+                      ? 'border-blue-500 bg-blue-500' 
+                      : 'border-gray-300 dark:border-gray-600 group-hover:border-blue-400'
+                  ]"
+                >
+                  <svg v-if="selectedSourceId === source.id" class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 已购买该地区提示 -->
+        <div v-if="hasSubscriptionInSelectedRegion" class="card p-5 border-amber-200 dark:border-amber-800/50 bg-amber-50/50 dark:bg-amber-950/20">
+          <div class="flex items-start gap-3">
+            <svg class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <div>
+              <h4 class="font-medium text-amber-800 dark:text-amber-200">{{ t('mail.alreadyPurchased') }}</h4>
+              <p class="text-sm text-amber-600 dark:text-amber-300/80 mt-1">{{ t('mail.alreadyPurchasedDesc') }}</p>
+              <button 
+                class="btn btn-sm btn-ghost mt-3 text-amber-700 dark:text-amber-200 hover:bg-amber-100 dark:hover:bg-amber-900/30"
+                @click="activeTab = 'my'"
+              >
+                {{ t('mail.viewMySubscription') }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 2: 方案配置详情 -->
+        <div v-if="selectedSource && !hasSubscriptionInSelectedRegion" class="card p-5">
+          <div class="flex items-center gap-2.5 mb-4">
+            <span class="w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold flex items-center justify-center">2</span>
+            <h3 class="text-sm font-semibold text-themed">{{ t('mail.planDetails') }}</h3>
+          </div>
+          
+          <div v-for="plan in selectedSource.plans" :key="plan.id" class="mb-4 last:mb-0">
+            <div
+              :class="[
+                'relative p-5 rounded-xl border-2 transition-all cursor-pointer',
+                selectedPlanId === plan.id 
+                  ? 'border-blue-500 bg-blue-50/30 dark:bg-blue-950/10' 
+                  : 'border-themed hover:border-blue-300 dark:hover:border-blue-800'
+              ]"
+              @click="selectPlan(plan.id)"
+            >
+              <!-- 方案标题和价格 -->
+              <div class="flex items-start justify-between mb-4">
+                <div class="flex-1 min-w-0">
+                  <h4 class="text-lg font-semibold text-themed">{{ plan.name }}</h4>
+                  <!-- 方案描述（从后端获取）-->
+                  <p v-if="plan.description" class="text-sm text-themed-muted mt-1">{{ plan.description }}</p>
+                </div>
+                <div class="text-right flex-shrink-0 ml-4">
+                  <div class="text-2xl font-bold text-themed">{{ formatPrice(plan.price) }}<span class="text-sm font-normal text-themed-muted">{{ getBillingCycleSuffix(plan.billingCycle) }}</span></div>
+                </div>
+              </div>
+              
+              <!-- 配额信息 + 功能特性 -->
+              <div class="grid grid-cols-2 gap-3 pt-4 border-t border-themed">
+                <div class="flex items-center gap-2.5 text-sm text-themed-muted">
+                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                  </svg>
+                  <span>{{ t('mail.feature.domainStorage', { count: plan.domainLimit, storage: plan.diskLimitGb }) }}</span>
+                </div>
+                <div class="flex items-center gap-2.5 text-sm text-themed-muted">
+                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                  <span>{{ t('mail.feature.unlimitedAliases') }}</span>
+                </div>
+                <div class="flex items-center gap-2.5 text-sm text-themed-muted">
+                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                  </svg>
+                  <span>{{ t('mail.feature.unlimitedMailboxes') }}</span>
+                </div>
+                <div class="flex items-center gap-2.5 text-sm text-themed-muted">
+                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                  <span>{{ t('mail.feature.emailLimit') }}</span>
+                </div>
+                <div class="flex items-center gap-2.5 text-sm text-themed-muted">
+                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+                  </svg>
+                  <span>{{ t('mail.feature.emClientPro') }}</span>
+                </div>
+                <div class="flex items-center gap-2.5 text-sm text-themed-muted">
+                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                  </svg>
+                  <span>{{ t('mail.feature.catchAll') }}</span>
+                </div>
+              </div>
+              
+              <!-- 选中指示器 -->
+              <div 
+                v-if="selectedPlanId === plan.id"
+                class="absolute bottom-4 right-4 w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center"
+              >
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 3: 其他选项 (优惠码) -->
+        <div v-if="selectedPlan && !hasSubscriptionInSelectedRegion" class="card p-5">
+          <div class="flex items-center gap-2.5 mb-4">
+            <span class="w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold flex items-center justify-center">3</span>
+            <h3 class="text-sm font-semibold text-themed">{{ t('mail.otherOptions') }}</h3>
+          </div>
+          
+          <div>
+            <label class="text-xs font-medium text-themed-muted mb-2 block">{{ t('aff.promoCodeOptional') }}</label>
+            <div class="flex gap-2">
+              <input 
+                v-model="affCode" 
+                type="text" 
+                class="input flex-1" 
+                :placeholder="t('aff.promoCodeInputPlaceholder')"
+                :disabled="affCodeVerifying"
+                @keyup.enter="verifyAffCode"
+              />
+              <button 
+                class="btn btn-outline px-4"
+                :disabled="affCodeVerifying || !affCode.trim()"
+                @click="verifyAffCode"
+              >
+                <span v-if="affCodeVerifying" class="loading loading-spinner loading-sm"></span>
+                <span v-else>{{ t('mail.verify') }}</span>
+              </button>
+            </div>
+            <p v-if="affCodeValid === true" class="text-xs text-green-500 mt-2 flex items-center gap-1">
+              <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+              </svg>
+              {{ t('aff.promoCodeValid', { rate: (affCodeDiscount * 100).toFixed(0) + '%' }) }}
+            </p>
+            <p v-else-if="affCodeValid === false" class="text-xs text-red-500 mt-2">
+              {{ affCodeError }}
+            </p>
+          </div>
+        </div>
+        
+        <!-- 移动端结算汇总（仅在小屏幕显示） -->
+        <div v-if="selectedPlan && !hasSubscriptionInSelectedRegion" class="lg:hidden card p-5">
+          <div class="flex items-center gap-2 mb-4">
+            <svg class="w-5 h-5 text-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            <h3 class="text-sm font-semibold text-themed">{{ configStore.freeSiteMode ? freeSiteCopy.mailCheckoutTitle : t('mail.checkout.title') }}</h3>
+          </div>
+          
+          <div class="space-y-3 text-sm">
+            <div class="flex justify-between">
+              <span class="text-themed-muted">{{ t('mail.checkout.region') }}</span>
+              <span class="text-themed font-medium">{{ selectedSource?.name }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.mailBillingCycle : t('mail.billingCycle') }}</span>
+              <span class="text-blue-500 font-medium">{{ getBillingCycleLabel(selectedPlan.billingCycle) }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-themed-muted">{{ t('mail.checkout.serviceStatus') }}</span>
+              <span class="text-green-500 font-medium">{{ t('mail.checkout.instant') }}</span>
+            </div>
+            
+            <div class="border-t border-themed pt-3 mt-3">
+              <div v-if="affCodeValid && checkoutPriceInfo" class="flex justify-between text-themed-muted mb-2">
+                <span>{{ t('aff.originalPrice') }}</span>
+                <span>¥{{ checkoutPriceInfo.originalPrice.toFixed(2) }}</span>
+              </div>
+              <div v-if="affCodeValid && checkoutPriceInfo" class="flex justify-between text-green-500 mb-2">
+                <span>{{ t('aff.discountAmount') }}</span>
+                <span>-¥{{ checkoutPriceInfo.discountAmount.toFixed(2) }}</span>
+              </div>
+              <div class="flex justify-between items-baseline">
+                <span class="text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.mailCheckoutAmount : t('mail.checkout.amount') }}</span>
+                <span class="text-2xl font-bold text-themed">{{ formatPrice(checkoutPriceInfo?.finalPrice ?? selectedPlan.price) }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <button 
+            class="btn btn-primary w-full mt-5" 
+            :disabled="buyLoading"
+            @click="purchaseSubscription"
+          >
+            <span v-if="buyLoading" class="loading loading-spinner loading-sm mr-2"></span>
+            {{ configStore.freeSiteMode ? freeSiteCopy.mailCheckoutConfirm : t('mail.checkout.confirm') }}
+          </button>
+          
+          <p class="text-xs text-themed-muted text-center mt-3 flex items-center justify-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            {{ configStore.freeSiteMode ? freeSiteCopy.mailBalanceRequired : t('mail.checkout.balanceRequired') }}
+          </p>
+        </div>
+      </div>
+      
+      <!-- 右侧结算汇总卡片（大屏幕显示） -->
+      <div v-if="selectedPlan && !hasSubscriptionInSelectedRegion" class="hidden lg:block w-80 flex-shrink-0">
+        <div class="sticky top-6">
+          <div class="card p-5">
+            <div class="flex items-center gap-2 mb-5 pb-4 border-b border-themed">
+              <svg class="w-5 h-5 text-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              <h3 class="text-sm font-semibold text-themed">{{ configStore.freeSiteMode ? freeSiteCopy.mailCheckoutTitle : t('mail.checkout.title') }}</h3>
+            </div>
+            
+            <div class="space-y-3 text-sm">
+              <div class="flex justify-between">
+                <span class="text-themed-muted">{{ t('mail.checkout.region') }}</span>
+                <span class="text-themed font-medium">{{ selectedSource?.name }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.mailBillingCycle : t('mail.billingCycle') }}</span>
+                <span class="text-blue-500 font-medium">{{ getBillingCycleLabel(selectedPlan.billingCycle) }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-themed-muted">{{ t('mail.checkout.serviceStatus') }}</span>
+                <span class="text-green-500 font-medium">{{ t('mail.checkout.instant') }}</span>
+              </div>
+              
+              <div class="border-t border-themed pt-4 mt-4">
+                <div v-if="affCodeValid && checkoutPriceInfo" class="flex justify-between text-themed-muted mb-2">
+                  <span>{{ t('aff.originalPrice') }}</span>
+                  <span>¥{{ checkoutPriceInfo.originalPrice.toFixed(2) }}</span>
+                </div>
+                <div v-if="affCodeValid && checkoutPriceInfo" class="flex justify-between text-green-500 mb-2">
+                  <span>{{ t('aff.discountAmount') }}</span>
+                  <span>-¥{{ checkoutPriceInfo.discountAmount.toFixed(2) }}</span>
+                </div>
+                <div class="flex justify-between items-baseline">
+                  <span class="text-themed-muted">{{ configStore.freeSiteMode ? freeSiteCopy.mailCheckoutAmount : t('mail.checkout.amount') }}</span>
+                  <span class="text-2xl font-bold text-themed">{{ formatPrice(checkoutPriceInfo?.finalPrice ?? selectedPlan.price) }}</span>
+                </div>
+              </div>
+            </div>
+            
+            <button 
+              class="btn btn-primary w-full mt-5" 
+              :disabled="buyLoading"
+              @click="purchaseSubscription"
+            >
+              <span v-if="buyLoading" class="loading loading-spinner loading-sm mr-2"></span>
+              {{ configStore.freeSiteMode ? freeSiteCopy.mailCheckoutConfirm : t('mail.checkout.confirm') }}
+              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+            
+            <p class="text-xs text-themed-muted text-center mt-3 flex items-center justify-center gap-1">
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              {{ configStore.freeSiteMode ? freeSiteCopy.mailBalanceRequired : t('mail.checkout.balanceRequired') }}
+            </p>
+          </div>
+          
+          <!-- 帮助提示 -->
+          <div class="card p-4 mt-4 bg-themed-secondary">
+            <div class="flex items-start gap-3">
+              <svg class="w-5 h-5 text-themed-muted flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <div>
+                <h4 class="text-sm font-medium text-themed">{{ t('mail.help.title') }}</h4>
+                <p class="text-xs text-themed-muted mt-1">{{ t('mail.help.desc') }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加域名弹窗 -->
+    <Teleport to="body">
+      <div v-if="showAddDomainModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showAddDomainModal = false"></div>
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('mail.addDomain') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showAddDomainModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <label class="label">{{ t('mail.domainName') }}</label>
+              <input 
+                v-model="newDomain"
+                type="text" 
+                :placeholder="t('mail.domainPlaceholder')"
+                class="input w-full"
+                @keyup.enter="addDomain"
+              />
+              <p class="text-xs text-themed-muted mt-1">{{ t('mail.domainHint') }}</p>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showAddDomainModal = false">{{ t('common.cancel') }}</button>
+            <button 
+              class="btn btn-primary" 
+              :disabled="addDomainLoading || !newDomain.trim()"
+              @click="addDomain"
+            >
+              <span v-if="addDomainLoading" class="loading-spinner w-4 h-4 mr-2"></span>
+              {{ t('common.confirm') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 续费弹窗 -->
+    <Teleport to="body">
+      <div v-if="showRenewModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showRenewModal = false"></div>
+        <div class="modal-content max-w-sm">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('mail.renewSubscription') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showRenewModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body space-y-4">
+            <!-- 续费时长选择 -->
+            <div>
+              <label class="label">{{ t('mail.renewDuration') }}</label>
+              <!-- 按年计费：只能续费1年 -->
+              <div v-if="subscription?.plan?.billingCycle === 'yearly'" class="input w-full bg-themed-secondary flex items-center">
+                1 {{ t('mail.year') }}
+              </div>
+              <!-- 按月计费：可选择1/3/6/12个月 -->
+              <select v-else v-model="renewMonths" class="input w-full">
+                <option :value="1">1 {{ t('mail.month') }}</option>
+                <option :value="3">3 {{ t('mail.months') }}</option>
+                <option :value="6">6 {{ t('mail.months') }}</option>
+                <option :value="12">12 {{ t('mail.months') }}</option>
+              </select>
+            </div>
+            
+            <!-- 费用明细 -->
+            <div class="bg-themed-secondary rounded-lg p-4 space-y-2">
+              <!-- 按年计费 -->
+              <template v-if="subscription?.plan?.billingCycle === 'yearly'">
+                <div class="flex justify-between text-sm">
+                  <span class="text-themed-muted">{{ t('mail.yearlyPrice') }}</span>
+                  <span class="text-themed">¥{{ Number(subscription.plan.price).toFixed(2) }}/{{ t('mail.year') }}</span>
+                </div>
+              </template>
+              <!-- 按月计费 -->
+              <template v-else>
+                <div class="flex justify-between text-sm">
+                  <span class="text-themed-muted">{{ t('mail.monthlyPrice') }}</span>
+                  <span class="text-themed">¥{{ renewMonthlyPrice.toFixed(2) }}/{{ t('mail.month') }}</span>
+                </div>
+                <div class="flex justify-between text-sm">
+                  <span class="text-themed-muted">{{ t('mail.renewDuration') }}</span>
+                  <span class="text-themed">{{ renewMonths }} {{ renewMonths > 1 ? t('mail.months') : t('mail.month') }}</span>
+                </div>
+              </template>
+              <div v-if="renewDiscountRate > 0" class="flex justify-between text-sm text-green-500">
+                <span>{{ t('aff.promoDiscount') }} ({{ (renewDiscountRate * 100).toFixed(0) }}%)</span>
+                <span>-¥{{ renewDiscountAmount.toFixed(2) }}</span>
+              </div>
+              <div class="border-t border-themed pt-2 flex justify-between font-medium">
+                <span class="text-themed-muted">{{ t('mail.totalPrice') }}</span>
+                <span class="text-themed text-lg">¥{{ renewFinalPrice.toFixed(2) }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showRenewModal = false">{{ t('common.cancel') }}</button>
+            <button 
+              class="btn btn-primary" 
+              :disabled="renewLoading"
+              @click="renewSubscription"
+            >
+              <span v-if="renewLoading" class="loading-spinner w-4 h-4 mr-2"></span>
+              {{ t('mail.confirmRenew') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/MarketView.vue b/client/src/views/MarketView.vue
new file mode 100644
index 0000000..2450e97
--- /dev/null
+++ b/client/src/views/MarketView.vue
@@ -0,0 +1,1146 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { usePageSeo } from '@/composables/usePageSeo'
+import { useBrand } from '@/composables/useBrand'
+import FlagIcon from '@/components/FlagIcon.vue'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import { useThemeStore } from '@/stores/theme'
+import { getLocalizedCountryName } from '@/utils/countryDisplay'
+import {
+  formatPublicPrice,
+  formatPublicTraffic,
+  getStartingMonthlyPrice,
+  normalizePackageSourceQuery,
+  parsePackageIdQuery,
+  parseTextQuery,
+  type PublicPackage,
+  type PublicRegion
+} from '@/utils/publicCatalog'
+import { freeSiteCopy, getFreeSiteBillingCycleLabel } from '@/utils/freeSiteFun'
+
+defineOptions({
+  name: 'MarketView'
+})
+
+const route = useRoute()
+const router = useRouter()
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+void configStore.loadPublicConfig()
+
+type PublicPackageSource = 'official' | 'market'
+
+function normalizePublicPackageSource(value: unknown): PublicPackageSource {
+  return normalizePackageSourceQuery(value) === 'market' ? 'market' : 'official'
+}
+
+const packageSource = ref<PublicPackageSource>(normalizePublicPackageSource(route.query.source))
+const selectedRegion = ref<string | null>(parseTextQuery(route.query.region) || null)
+const selectedPackageId = ref<number | null>(parsePackageIdQuery(route.query.package))
+const selectedPlanId = ref<number | null>(parsePackageIdQuery(route.query.plan))
+const searchQuery = ref(parseTextQuery(route.query.q))
+const packages = ref<PublicPackage[]>([])
+const regions = ref<PublicRegion[]>([])
+const loading = ref(true)
+const loadError = ref('')
+const detailColumnRef = ref<HTMLElement | null>(null)
+const detailCardRef = ref<HTMLElement | null>(null)
+const detailColumnStyle = ref<Record<string, string>>({})
+const detailCardStyle = ref<Record<string, string>>({})
+
+let searchTimer: number | null = null
+let detailCardFrame: number | null = null
+
+function getRegionLabel(code: string): string {
+  return getLocalizedCountryName(code, locale.value, (key, fallback) => t(key, fallback))
+}
+
+const filteredPackages = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase()
+  let result = packages.value
+
+  if (selectedRegion.value) {
+    const region = regions.value.find(item => item.code === selectedRegion.value)
+    if (region) {
+      result = result.filter(pkg => region.packageIds.includes(pkg.id))
+    } else {
+      result = []
+    }
+  }
+
+  if (query) {
+    result = result.filter(pkg => {
+      const text = [
+        pkg.name,
+        pkg.description || '',
+        pkg.instance_type === 'vm' ? 'kvm' : 'lxc'
+      ].join(' ').toLowerCase()
+      return text.includes(query)
+    })
+  }
+
+  return [...result].sort((left, right) => {
+    if (left.soldOut !== right.soldOut) {
+      return left.soldOut ? 1 : -1
+    }
+
+    const leftPrice = getStartingMonthlyPrice(left)
+    const rightPrice = getStartingMonthlyPrice(right)
+
+    if (leftPrice !== null && rightPrice !== null && leftPrice !== rightPrice) {
+      return leftPrice - rightPrice
+    }
+
+    if (leftPrice === null && rightPrice !== null) {
+      return -1
+    }
+
+    if (leftPrice !== null && rightPrice === null) {
+      return 1
+    }
+
+    return left.name.localeCompare(right.name, 'zh')
+  })
+})
+
+const selectedPackage = computed(() => {
+  if (!selectedPackageId.value) {
+    return null
+  }
+
+  return filteredPackages.value.find(pkg => pkg.id === selectedPackageId.value)
+    || packages.value.find(pkg => pkg.id === selectedPackageId.value)
+    || null
+})
+
+const selectedPlan = computed(() => {
+  if (!selectedPackage.value || !selectedPlanId.value) {
+    return null
+  }
+
+  return selectedPackage.value.plans.find(plan => plan.id === selectedPlanId.value && !plan.isSoldOut) || null
+})
+
+const ui = computed(() => themeStore.isDark
+  ? {
+      heroTint: 'bg-[linear-gradient(180deg,rgba(26,44,82,0.55)_0%,rgba(26,44,82,0.25)_45%,rgba(17,20,24,0)_100%)]',
+      body: 'text-[#c3c6cf]',
+      title: 'text-[#e3e2e6]',
+      badge: 'border-[#284777] bg-[#1a2c52] text-[#d3e3fd]',
+      badgeDot: 'bg-[#a8c7fa]',
+      infoBanner: 'bg-[#1a2c52] text-[#d3e3fd]',
+      summaryCard: 'border-[#43474e] bg-[#1d2024]',
+      summaryLabel: 'text-[#8e9199]',
+      summaryValue: 'text-[#e3e2e6]',
+      filterWrap: 'border-[#43474e] bg-[#1d2024]',
+      chipActive: 'bg-[#a8c7fa] text-[#062e6f]',
+      chipIdle: 'bg-[#272a2f] text-[#c3c6cf] hover:bg-[#313438]',
+      searchInput: 'border-[#43474e] bg-[#111418] text-[#e3e2e6] placeholder:text-[#8e9199] focus:border-[#a8c7fa]',
+      searchClear: 'text-[#8e9199] hover:bg-[#272a2f] hover:text-[#e3e2e6]',
+      errorBanner: 'bg-[#3a1618] text-[#ffb4ab] border border-[#5a2a2d]',
+      skeleton: 'bg-[#272a2f]',
+      emptyState: 'border-[#43474e] bg-[#1d2024] text-[#8e9199]',
+      emptyStateTitle: 'text-[#e3e2e6]',
+      emptyStateButton: 'bg-[#d3e3fd] text-[#041e49] hover:bg-[#c1d6fc] dark:bg-[#284777] dark:text-[#d3e3fd] dark:hover:bg-[#304f81]',
+      packageCard: 'bg-[#1d2024] shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)] hover:bg-[#22252a] hover:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_4px_8px_3px_rgba(0,0,0,0.15)]',
+      packageCardSelected: 'bg-[#1a2c52] text-[#d3e3fd] shadow-[0_1px_3px_rgba(0,0,0,0.3),0_4px_8px_3px_rgba(0,0,0,0.2)]',
+      packageCardMuted: 'text-[#8e9199]',
+      chipKvm: 'border border-[#ffdfa6]/60 text-[#ffdfa6]',
+      chipLxc: 'border border-[#8e9199]/60 text-[#c3c6cf]',
+      chipInStock: 'border border-[#a1cdb3]/60 text-[#a1cdb3]',
+      chipSoldOut: 'border border-[#ffb4ab]/60 text-[#ffb4ab]',
+      chipOfficial: 'border border-[#a8c7fa]/70 text-[#a8c7fa]',
+      chipMarket: 'border border-[#a1cdb3]/70 text-[#a1cdb3]',
+      statChip: 'border border-[#43474e] text-[#c3c6cf]',
+      statDivider: 'border-[#43474e]',
+      statBlockLabel: 'text-[#8e9199]',
+      detailCard: 'border-[#43474e] bg-[#1d2024] shadow-[0_4px_8px_3px_rgba(0,0,0,0.15),0_1px_3px_rgba(0,0,0,0.3)]',
+      detailSummaryCard: 'bg-[#1a2c52] text-[#d3e3fd]',
+      detailSummaryLabel: 'text-[#a8c7fa]',
+      detailSummaryIcon: 'text-[#a8c7fa]',
+      planIdle: 'bg-[#272a2f] text-[#e3e2e6] hover:bg-[#303339]',
+      planSelected: 'bg-[#1a2c52] text-[#d3e3fd]',
+      radioIdle: 'border-[#8e9199]',
+      radioActive: 'border-[#a8c7fa] bg-[#a8c7fa]',
+      infoCard: 'bg-[#272a2f] text-[#c3c6cf]',
+      ctaButton: 'bg-[#a8c7fa] text-[#062e6f] shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)] hover:bg-[#bdd3fb]'
+    }
+  : {
+      heroTint: 'bg-[linear-gradient(180deg,rgba(211,227,253,0.7)_0%,rgba(223,235,254,0.35)_45%,rgba(252,252,253,0)_100%)]',
+      body: 'text-[#43474e]',
+      title: 'text-[#1a1b20]',
+      badge: 'border-[#aac7fa]/60 bg-[#d3e3fd] text-[#041e49]',
+      badgeDot: 'bg-[#0b57d0]',
+      infoBanner: 'bg-[#d3e3fd] text-[#041e49]',
+      summaryCard: 'bg-white shadow-[0_1px_2px_rgba(15,23,42,0.08),0_1px_3px_1px_rgba(15,23,42,0.06)]',
+      summaryLabel: 'text-[#74777f]',
+      summaryValue: 'text-[#1a1b20]',
+      filterWrap: 'bg-white shadow-[0_1px_2px_rgba(15,23,42,0.08),0_1px_3px_1px_rgba(15,23,42,0.06)]',
+      chipActive: 'bg-[#0b57d0] text-white',
+      chipIdle: 'bg-[#eef0f8] text-[#1a1b20] hover:bg-[#e1e5f1]',
+      searchInput: 'border-[#c3c6cf] bg-white text-[#1a1b20] placeholder:text-[#74777f] focus:border-[#0b57d0]',
+      searchClear: 'text-[#74777f] hover:bg-[#eef0f8] hover:text-[#1a1b20]',
+      errorBanner: 'bg-[#ffedea] text-[#93000a] border border-[#ffb4ab]',
+      skeleton: 'bg-[#e2e4ed]',
+      emptyState: 'border-[#c3c6cf] bg-white text-[#74777f]',
+      emptyStateTitle: 'text-[#1a1b20]',
+      emptyStateButton: 'bg-[#d3e3fd] text-[#041e49] hover:bg-[#c1d6fc]',
+      packageCard: 'bg-white shadow-[0_1px_2px_rgba(15,23,42,0.08),0_1px_3px_1px_rgba(15,23,42,0.06)] hover:bg-[#f8f9fc] hover:shadow-[0_1px_3px_rgba(15,23,42,0.1),0_4px_8px_3px_rgba(15,23,42,0.08)]',
+      packageCardSelected: 'bg-[#d3e3fd] text-[#041e49] shadow-[0_1px_3px_rgba(11,87,208,0.15),0_4px_8px_3px_rgba(11,87,208,0.1)]',
+      packageCardMuted: 'text-[#74777f]',
+      chipKvm: 'border border-[#7a5900]/40 text-[#7a5900]',
+      chipLxc: 'border border-[#74777f]/40 text-[#43474e]',
+      chipInStock: 'border border-[#3a6a49]/40 text-[#3a6a49]',
+      chipSoldOut: 'border border-[#ba1a1a]/40 text-[#ba1a1a]',
+      chipOfficial: 'border border-[#0b57d0]/40 text-[#0b57d0]',
+      chipMarket: 'border border-[#3a6a49]/40 text-[#3a6a49]',
+      statChip: 'border border-[#c3c6cf] text-[#43474e]',
+      statDivider: 'border-[#e3e5ec]',
+      statBlockLabel: 'text-[#74777f]',
+      detailCard: 'border-[#c3c6cf] bg-white shadow-[0_4px_8px_3px_rgba(15,23,42,0.08),0_1px_3px_rgba(15,23,42,0.06)]',
+      detailSummaryCard: 'bg-[#d3e3fd] text-[#041e49]',
+      detailSummaryLabel: 'text-[#1a4191]',
+      detailSummaryIcon: 'text-[#0b57d0]',
+      planIdle: 'bg-[#eef0f8] text-[#1a1b20] hover:bg-[#e1e5f1]',
+      planSelected: 'bg-[#d3e3fd] text-[#041e49]',
+      radioIdle: 'border-[#74777f]',
+      radioActive: 'border-[#0b57d0] bg-[#0b57d0]',
+      infoCard: 'bg-[#eef0f8] text-[#43474e]',
+      ctaButton: 'bg-[#0b57d0] text-white shadow-[0_1px_2px_rgba(11,87,208,0.3),0_1px_3px_1px_rgba(11,87,208,0.15)] hover:bg-[#0848ad]'
+    }
+)
+
+const summaryCards = computed(() => [
+  { label: t('publicSite.market.summary.total'), value: String(packages.value.length) },
+  { label: t('publicSite.market.summary.available'), value: String(packages.value.filter(pkg => !pkg.soldOut).length) },
+  { label: t('publicSite.market.summary.regions'), value: String(regions.value.length) },
+  { label: t('publicSite.market.summary.source'), value: packageSource.value === 'official' ? t('publicSite.market.official') : t('publicSite.market.market') }
+])
+
+usePageSeo(() => {
+  const selected = selectedPackage.value
+  const plan = selectedPlan.value
+  const origin = window.location.origin
+  const canonical = selected
+    ? `${origin}/market?source=${selected.sourceType}&package=${selected.id}${plan ? `&plan=${plan.id}` : ''}`
+    : packageSource.value === 'market'
+      ? `${origin}/market?source=market`
+      : `${origin}/market`
+
+  if (selected) {
+    return {
+      title: t('publicSite.seo.marketPackageTitle', { name: selected.name }).replace(/Incudal/g, brand.brandName),
+      description: t('publicSite.seo.marketPackageDescription', {
+        name: selected.name,
+        type: selected.instance_type === 'vm' ? 'KVM' : 'LXC',
+        traffic: formatTraffic(selected.monthly_traffic_limit)
+      }),
+      canonical,
+      keywords: t('publicSite.seo.keywords').replace(/Incudal/g, brand.brandName)
+    }
+  }
+
+  return {
+    title: t('publicSite.seo.marketTitle').replace(/Incudal/g, brand.brandName),
+    description: t('publicSite.seo.marketDescription'),
+    canonical,
+    keywords: t('publicSite.seo.keywords').replace(/Incudal/g, brand.brandName)
+  }
+})
+
+const infoBannerText = computed(() => {
+  if (!authStore.isAuthenticated && parsePackageIdQuery(route.query.package)) {
+    return t('publicSite.market.buyLinkNotice')
+  }
+
+  return t('publicSite.market.publicNotice')
+})
+
+function formatTraffic(bytes: string | null): string {
+  return formatPublicTraffic(bytes, t('common.unlimited'))
+}
+
+function formatMemory(mb: number): string {
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1)} GB`
+  }
+
+  return `${mb} MB`
+}
+
+function formatDisk(mb: number): string {
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(mb % 1024 === 0 ? 0 : 1)} GB`
+  }
+
+  return `${mb} MB`
+}
+
+function getNetworkLabel(pkg: PublicPackage): string {
+  return t(`common.networkMode.${pkg.network_mode}`)
+}
+
+function getPackagePriceLabel(pkg: PublicPackage): string {
+  if (configStore.freeSiteMode) {
+    return freeSiteCopy.marketPriceFree
+  }
+
+  const startPrice = getStartingMonthlyPrice(pkg)
+  if (startPrice === null) {
+    return t('publicSite.market.free')
+  }
+
+  return t('publicSite.market.fromMonthly', { price: formatPublicPrice(startPrice) })
+}
+
+function getPlanLabel(pkg: PublicPackage): string {
+  if (!pkg.isPaid || pkg.plans.length === 0) {
+    return t('publicSite.market.free')
+  }
+
+  if (configStore.freeSiteMode) {
+    return freeSiteCopy.marketPlanCount.replace('{count}', String(pkg.plans.length))
+  }
+
+  return t('publicSite.market.planCount', { count: pkg.plans.length })
+}
+
+function getMarketPlanCycleLabel(months: number): string {
+  return configStore.freeSiteMode ? getFreeSiteBillingCycleLabel(months) : t('publicSite.market.planCycle', { months })
+}
+
+function getMarketMonthlyPriceLabel(price: number): string {
+  return configStore.freeSiteMode ? freeSiteCopy.marketMonthlyPrice : `≈ ¥${formatPublicPrice(price)}/${t('common.month')}`
+}
+
+function getMarketCtaText(pkg: PublicPackage): string {
+  if (pkg.soldOut) return t('publicSite.market.soldOut')
+  if (configStore.freeSiteMode) {
+    return authStore.isAuthenticated ? freeSiteCopy.marketCreateNow : freeSiteCopy.marketLoginToOrder
+  }
+  return authStore.isAuthenticated ? t('publicSite.market.createNow') : t('publicSite.market.loginToOrder')
+}
+
+function getRouteSignatureFromState(): string {
+  return JSON.stringify({
+    source: packageSource.value,
+    region: selectedRegion.value || '',
+    packageId: selectedPackageId.value || '',
+    planId: selectedPlanId.value || '',
+    q: searchQuery.value.trim()
+  })
+}
+
+function getRouteSignatureFromQuery(): string {
+  return JSON.stringify({
+    source: normalizePublicPackageSource(route.query.source),
+    region: parseTextQuery(route.query.region),
+    packageId: parsePackageIdQuery(route.query.package) || '',
+    planId: parsePackageIdQuery(route.query.plan) || '',
+    q: parseTextQuery(route.query.q)
+  })
+}
+
+function syncRouteQuery(): void {
+  if (getRouteSignatureFromState() === getRouteSignatureFromQuery()) {
+    return
+  }
+
+  const nextQuery: Record<string, string> = {}
+
+  if (packageSource.value !== 'official') {
+    nextQuery.source = packageSource.value
+  }
+
+  if (selectedRegion.value) {
+    nextQuery.region = selectedRegion.value
+  }
+
+  if (selectedPackageId.value) {
+    nextQuery.package = String(selectedPackageId.value)
+  }
+
+  if (selectedPlanId.value) {
+    nextQuery.plan = String(selectedPlanId.value)
+  }
+
+  const trimmedSearch = searchQuery.value.trim()
+  if (trimmedSearch) {
+    nextQuery.q = trimmedSearch
+  }
+
+  void router.replace({
+    name: 'market',
+    query: nextQuery
+  })
+}
+
+function ensureSelectedPackage(
+  preferredPackageId: number | null = selectedPackageId.value,
+  options: { syncRegionWithPackage?: boolean } = {}
+): void {
+  const { syncRegionWithPackage = true } = options
+
+  if (selectedRegion.value && !regions.value.some(region => region.code === selectedRegion.value)) {
+    selectedRegion.value = null
+  }
+
+  if (preferredPackageId && syncRegionWithPackage) {
+    const preferredPackage = packages.value.find(pkg => pkg.id === preferredPackageId)
+    if (preferredPackage) {
+      const currentRegion = selectedRegion.value
+        ? regions.value.find(region => region.code === selectedRegion.value)
+        : null
+
+      if (currentRegion && !currentRegion.packageIds.includes(preferredPackage.id)) {
+        const preferredRegion = regions.value.find(region => region.packageIds.includes(preferredPackage.id))
+        if (preferredRegion) {
+          selectedRegion.value = preferredRegion.code
+        }
+      }
+    }
+  }
+
+  if (filteredPackages.value.length === 0 && selectedRegion.value !== null) {
+    selectedRegion.value = null
+  }
+
+  if (filteredPackages.value.length === 0) {
+    selectedPackageId.value = null
+    return
+  }
+
+  if (!selectedPackageId.value || !filteredPackages.value.some(pkg => pkg.id === selectedPackageId.value)) {
+    selectedPackageId.value = filteredPackages.value[0].id
+  }
+}
+
+function ensureSelectedPlan(preferredPlanId: number | null = selectedPlanId.value): void {
+  if (!selectedPackage.value || selectedPackage.value.plans.length === 0) {
+    selectedPlanId.value = null
+    return
+  }
+
+  const matchedPlan = preferredPlanId
+    ? selectedPackage.value.plans.find(plan => plan.id === preferredPlanId && !plan.isSoldOut)
+    : null
+
+  const firstAvailablePlan = selectedPackage.value.plans.find(plan => !plan.isSoldOut)
+  selectedPlanId.value = matchedPlan?.id || firstAvailablePlan?.id || null
+}
+
+async function loadData(
+  preferredPackageId: number | null = selectedPackageId.value,
+  preferredPlanId: number | null = selectedPlanId.value
+): Promise<void> {
+  loading.value = true
+  loadError.value = ''
+
+  try {
+    const [packagesResponse, regionsResponse] = await Promise.all([
+      api.packages.listPublic({ source: packageSource.value }),
+      api.packages.getPublicRegions({ source: packageSource.value })
+    ])
+
+    packages.value = (packagesResponse.packages || []) as unknown as PublicPackage[]
+    regions.value = regionsResponse.regions || []
+
+    ensureSelectedPackage(preferredPackageId)
+    ensureSelectedPlan(preferredPlanId)
+    syncRouteQuery()
+  } catch (error) {
+    console.error('Failed to load public market:', error)
+    packages.value = []
+    regions.value = []
+    loadError.value = t('common.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function syncFromRoute(): Promise<void> {
+  const nextSource = normalizePublicPackageSource(route.query.source)
+  const nextRegion = parseTextQuery(route.query.region) || null
+  const nextPackageId = parsePackageIdQuery(route.query.package)
+  const nextPlanId = parsePackageIdQuery(route.query.plan)
+  const nextSearch = parseTextQuery(route.query.q)
+  const sourceChanged = nextSource !== packageSource.value
+
+  packageSource.value = nextSource
+  selectedRegion.value = nextRegion
+  selectedPackageId.value = nextPackageId
+  selectedPlanId.value = nextPlanId
+  searchQuery.value = nextSearch
+
+  if (sourceChanged || packages.value.length === 0) {
+    await loadData(nextPackageId, nextPlanId)
+    return
+  }
+
+  ensureSelectedPackage(nextPackageId)
+  ensureSelectedPlan(nextPlanId)
+  syncRouteQuery()
+}
+
+async function switchSource(source: PublicPackageSource): Promise<void> {
+  if (source === packageSource.value) {
+    return
+  }
+
+  packageSource.value = source
+  selectedRegion.value = null
+  selectedPackageId.value = null
+  selectedPlanId.value = null
+  searchQuery.value = ''
+  await loadData(null, null)
+}
+
+function selectRegion(code: string | null): void {
+  const currentPackageId = selectedPackageId.value
+  selectedRegion.value = code
+
+  // 用户主动切换地区时，优先尊重新地区筛选；
+  // 只有当前套餐仍在筛选结果内时才保留，避免把地区强行改回旧值。
+  const preferredPackageId = currentPackageId !== null && filteredPackages.value.some(pkg => pkg.id === currentPackageId)
+    ? currentPackageId
+    : null
+
+  if (preferredPackageId === null) {
+    selectedPlanId.value = null
+  }
+
+  ensureSelectedPackage(preferredPackageId, { syncRegionWithPackage: false })
+  ensureSelectedPlan(selectedPlanId.value)
+  syncRouteQuery()
+}
+
+function selectPackage(pkg: PublicPackage): void {
+  selectedPackageId.value = pkg.id
+  ensureSelectedPlan(null)
+  syncRouteQuery()
+}
+
+function selectPlan(planId: number): void {
+  const plan = selectedPackage.value?.plans.find(item => item.id === planId)
+  if (!plan || plan.isSoldOut) {
+    return
+  }
+
+  selectedPlanId.value = planId
+  syncRouteQuery()
+}
+
+function handleSearchInput(): void {
+  ensureSelectedPackage(selectedPackageId.value)
+
+  if (searchTimer !== null) {
+    window.clearTimeout(searchTimer)
+  }
+
+  searchTimer = window.setTimeout(() => {
+    syncRouteQuery()
+    searchTimer = null
+  }, 120)
+}
+
+function clearSearch(): void {
+  searchQuery.value = ''
+  ensureSelectedPackage(selectedPackageId.value)
+  syncRouteQuery()
+}
+
+function createInstance(pkg: PublicPackage): void {
+  const source = pkg.sourceType === 'official' ? 'official' : 'market'
+  const query: Record<string, string> = {
+    source,
+    package: String(pkg.id)
+  }
+
+  if (selectedPlan.value) {
+    query.plan = String(selectedPlan.value.id)
+  }
+
+  if (authStore.isAuthenticated) {
+    void router.push({
+      path: '/instances/create',
+      query
+    })
+    return
+  }
+
+  const redirect = `/instances/create?${new URLSearchParams(query).toString()}`
+  void router.push({
+    path: '/login',
+    query: { redirect }
+  })
+}
+
+function resetFloatingDetailCard(): void {
+  detailColumnStyle.value = {}
+  detailCardStyle.value = {}
+}
+
+// 右侧详情卡需要跨过当前 section 和页脚区域持续停驻，
+// 单纯依赖 sticky 会在左列过短时提前失效，所以这里改为手动计算 fixed 位置。
+function updateFloatingDetailCard(): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const detailColumn = detailColumnRef.value
+  const detailCard = detailCardRef.value
+
+  if (!detailColumn || !detailCard || window.innerWidth < 1024) {
+    resetFloatingDetailCard()
+    return
+  }
+
+  const header = document.querySelector('header')
+  const footer = document.querySelector('footer')
+  const headerHeight = header instanceof HTMLElement ? header.getBoundingClientRect().height : 64
+  const topOffset = Math.round(headerHeight + 32)
+  const bottomGap = 24
+  const columnRect = detailColumn.getBoundingClientRect()
+
+  if (columnRect.top > topOffset) {
+    resetFloatingDetailCard()
+    return
+  }
+
+  const footerTop = footer instanceof HTMLElement ? footer.getBoundingClientRect().top : window.innerHeight
+  const naturalCardHeight = detailCard.scrollHeight
+  const maxCardHeight = Math.max(0, window.innerHeight - topOffset - bottomGap)
+  const renderedCardHeight = Math.min(naturalCardHeight, maxCardHeight)
+  const footerCollisionOffset = Math.max(0, topOffset + renderedCardHeight + bottomGap - footerTop)
+
+  detailColumnStyle.value = {
+    height: `${renderedCardHeight}px`
+  }
+
+  detailCardStyle.value = {
+    position: 'fixed',
+    // 页脚进入碰撞区后，让卡片继续固定，但被 footer 顶着向上移动。
+    top: `${topOffset - footerCollisionOffset}px`,
+    width: `${columnRect.width}px`,
+    maxHeight: `${maxCardHeight}px`,
+    overflowY: 'auto',
+    zIndex: '30'
+  }
+}
+
+function scheduleFloatingDetailCardUpdate(): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  if (detailCardFrame !== null) {
+    window.cancelAnimationFrame(detailCardFrame)
+  }
+
+  detailCardFrame = window.requestAnimationFrame(() => {
+    detailCardFrame = null
+    updateFloatingDetailCard()
+  })
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    void syncFromRoute()
+  }
+)
+
+watch(
+  [
+    loading,
+    packageSource,
+    selectedRegion,
+    selectedPackageId,
+    selectedPlanId,
+    searchQuery,
+    () => filteredPackages.value.length
+  ],
+  async () => {
+    await nextTick()
+    scheduleFloatingDetailCardUpdate()
+  }
+)
+
+onMounted(() => {
+  window.addEventListener('scroll', scheduleFloatingDetailCardUpdate, { passive: true })
+  window.addEventListener('resize', scheduleFloatingDetailCardUpdate, { passive: true })
+  void loadData(selectedPackageId.value)
+  void nextTick(() => {
+    scheduleFloatingDetailCardUpdate()
+  })
+})
+
+onUnmounted(() => {
+  if (searchTimer !== null) {
+    window.clearTimeout(searchTimer)
+  }
+
+  if (detailCardFrame !== null) {
+    window.cancelAnimationFrame(detailCardFrame)
+  }
+
+  window.removeEventListener('scroll', scheduleFloatingDetailCardUpdate)
+  window.removeEventListener('resize', scheduleFloatingDetailCardUpdate)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <section class="relative px-4 pb-10 pt-14 sm:px-6 lg:px-8">
+      <div class="relative mx-auto max-w-7xl">
+        <div class="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
+          <div class="max-w-3xl">
+            <div
+              class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium"
+              :class="ui.badge"
+            >
+              <span class="h-1.5 w-1.5 rounded-full" :class="ui.badgeDot"></span>
+              {{ t('publicSite.market.badge') }}
+            </div>
+
+            <h1 class="mt-6 text-4xl font-normal tracking-[-0.02em] sm:text-5xl lg:text-[3.5rem] lg:leading-[1.1]" :class="ui.title">
+              {{ t('publicSite.market.title') }}
+            </h1>
+            <p class="mt-5 max-w-2xl text-base leading-7 sm:text-lg sm:leading-8" :class="ui.body">
+              {{ t('publicSite.market.description') }}
+            </p>
+
+            <div class="mt-8 flex items-start gap-3 rounded-2xl px-4 py-3.5 text-sm leading-6" :class="ui.infoBanner">
+              <svg class="mt-0.5 h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span>{{ infoBannerText }}</span>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <div
+              v-for="card in summaryCards"
+              :key="card.label"
+              class="rounded-2xl p-4 sm:p-5"
+              :class="ui.summaryCard"
+            >
+              <div class="text-xs font-medium" :class="ui.summaryLabel">
+                {{ card.label }}
+              </div>
+              <div class="mt-2 text-2xl font-normal tracking-[-0.02em]" :class="ui.summaryValue">
+                {{ card.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="relative px-4 pb-20 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-7xl">
+        <div
+          class="rounded-3xl p-5 sm:p-6"
+          :class="ui.filterWrap"
+        >
+          <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div
+              class="inline-flex overflow-hidden rounded-full p-1 self-start"
+              :class="themeStore.isDark ? 'bg-[#272a2f]' : 'bg-[#eef0f8]'"
+            >
+              <button
+                class="h-9 rounded-full px-5 text-sm font-medium tracking-[0.01em] transition-colors duration-150"
+                :class="packageSource === 'official' ? ui.chipActive : 'text-[#43474e] hover:bg-black/5 dark:text-[#c3c6cf] dark:hover:bg-white/5'"
+                @click="switchSource('official')"
+              >
+                {{ t('publicSite.market.official') }}
+              </button>
+              <button
+                class="h-9 rounded-full px-5 text-sm font-medium tracking-[0.01em] transition-colors duration-150"
+                :class="packageSource === 'market' ? ui.chipActive : 'text-[#43474e] hover:bg-black/5 dark:text-[#c3c6cf] dark:hover:bg-white/5'"
+                @click="switchSource('market')"
+              >
+                {{ t('publicSite.market.market') }}
+              </button>
+            </div>
+
+            <div class="relative w-full lg:max-w-sm">
+              <svg class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2" :class="ui.searchClear" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 110-16 8 8 0 010 16z" />
+              </svg>
+              <input
+                v-model="searchQuery"
+                type="text"
+                class="h-12 w-full rounded-full border pl-11 pr-12 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 dark:focus:ring-[#a8c7fa]/30"
+                :class="ui.searchInput"
+                :placeholder="t('publicSite.market.searchPlaceholder')"
+                @input="handleSearchInput"
+              />
+              <button
+                v-if="searchQuery"
+                class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 transition-colors duration-150"
+                :class="ui.searchClear"
+                @click="clearSearch"
+              >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div v-if="regions.length > 0" class="mt-5 flex flex-wrap gap-2">
+            <button
+              class="inline-flex h-8 items-center rounded-lg px-3 text-sm font-medium transition-colors duration-150"
+              :class="selectedRegion === null ? ui.chipActive : ui.chipIdle"
+              @click="selectRegion(null)"
+            >
+              <svg v-if="selectedRegion === null" class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+              </svg>
+              {{ t('publicSite.market.allRegions') }}
+            </button>
+
+            <button
+              v-for="region in regions"
+              :key="region.code"
+              class="inline-flex h-8 items-center gap-1.5 rounded-lg px-3 text-sm font-medium transition-colors duration-150"
+              :class="selectedRegion === region.code ? ui.chipActive : ui.chipIdle"
+              @click="selectRegion(region.code)"
+            >
+              <svg v-if="selectedRegion === region.code" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+              </svg>
+              <FlagIcon :code="region.code" class="w-4 h-3" />
+              <span>{{ getRegionLabel(region.code) }}</span>
+            </button>
+          </div>
+        </div>
+
+        <div v-if="loadError" class="mt-6 flex items-start gap-3 rounded-2xl px-4 py-4 text-sm leading-6" :class="ui.errorBanner">
+          <svg class="mt-0.5 h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M4.93 19h14.14a2 2 0 001.73-3l-7.07-12a2 2 0 00-3.46 0L3.2 16a2 2 0 001.73 3z" />
+          </svg>
+          <span>{{ loadError }}</span>
+        </div>
+
+        <div v-else-if="loading" class="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.85fr)]">
+          <div class="grid gap-4 md:grid-cols-2">
+            <div
+              v-for="index in 6"
+              :key="index"
+              class="h-52 animate-pulse rounded-2xl"
+              :class="ui.skeleton"
+            ></div>
+          </div>
+          <div
+            class="h-[32rem] animate-pulse rounded-3xl"
+            :class="ui.skeleton"
+          ></div>
+        </div>
+
+        <div
+          v-else-if="packages.length === 0"
+          class="mt-6 rounded-3xl border border-dashed px-6 py-16 text-center"
+          :class="ui.emptyState"
+        >
+          {{ t('publicSite.market.noPackages') }}
+        </div>
+
+        <div v-else class="mt-6 grid items-start gap-6 lg:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.85fr)]">
+          <div class="min-w-0 lg:pr-2">
+            <div v-if="filteredPackages.length === 0" class="rounded-3xl border border-dashed px-6 py-16 text-center" :class="ui.emptyState">
+              <div class="text-base font-medium" :class="ui.emptyStateTitle">
+                {{ t('publicSite.market.noResults') }}
+              </div>
+              <button
+                v-if="searchQuery || selectedRegion"
+                class="mt-4 inline-flex h-10 items-center rounded-full px-6 text-sm font-medium transition-colors duration-150"
+                :class="ui.emptyStateButton"
+                @click="searchQuery = ''; selectRegion(null)"
+              >
+                {{ t('common.reset') }}
+              </button>
+            </div>
+
+            <div v-else class="grid gap-4 md:grid-cols-2">
+              <button
+                v-for="pkg in filteredPackages"
+                :key="pkg.id"
+                class="rounded-3xl p-5 text-left transition-[background-color,box-shadow] duration-150"
+                :class="[
+                  selectedPackage?.id === pkg.id ? ui.packageCardSelected : ui.packageCard,
+                  pkg.soldOut ? 'opacity-70' : ''
+                ]"
+                @click="selectPackage(pkg)"
+              >
+                <div class="flex items-start justify-between gap-4">
+                  <div class="min-w-0">
+                    <div class="flex flex-wrap items-center gap-2">
+                      <span
+                        class="rounded-lg px-2 py-0.5 text-[11px] font-medium tracking-[0.02em]"
+                        :class="pkg.instance_type === 'vm' ? ui.chipKvm : ui.chipLxc"
+                      >
+                        {{ pkg.instance_type === 'vm' ? 'KVM' : 'LXC' }}
+                      </span>
+                      <span
+                        class="rounded-lg px-2 py-0.5 text-[11px] font-medium tracking-[0.02em]"
+                        :class="pkg.soldOut ? ui.chipSoldOut : ui.chipInStock"
+                      >
+                        {{ pkg.soldOut ? t('publicSite.market.soldOut') : t('publicSite.market.inStock') }}
+                      </span>
+                    </div>
+
+                    <div class="mt-4 truncate text-lg font-medium tracking-[-0.01em]">
+                      {{ pkg.name }}
+                    </div>
+                    <p class="mt-2 line-clamp-2 text-sm leading-5" :class="selectedPackage?.id === pkg.id ? '' : ui.packageCardMuted">
+                      {{ pkg.description || t('publicSite.portal.packageFallback') }}
+                    </p>
+                  </div>
+
+                  <div class="shrink-0 text-right">
+                    <div class="text-sm font-medium">
+                      {{ getPackagePriceLabel(pkg) }}
+                    </div>
+                    <div class="mt-1 text-xs" :class="selectedPackage?.id === pkg.id ? '' : ui.packageCardMuted">
+                      {{ formatTraffic(pkg.monthly_traffic_limit) }}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="mt-5 grid grid-cols-2 gap-6 border-t pt-4" :class="selectedPackage?.id === pkg.id ? 'border-[#0b57d0]/20 dark:border-[#a8c7fa]/20' : ui.statDivider">
+                  <div>
+                    <div class="text-[11px] font-medium" :class="selectedPackage?.id === pkg.id ? 'opacity-70' : ui.statBlockLabel">{{ t('publicSite.market.labels.plans') }}</div>
+                    <div class="mt-1 text-sm font-medium">{{ getPlanLabel(pkg) }}</div>
+                  </div>
+                  <div>
+                    <div class="text-[11px] font-medium" :class="selectedPackage?.id === pkg.id ? 'opacity-70' : ui.statBlockLabel">{{ t('publicSite.market.labels.network') }}</div>
+                    <div class="mt-1 text-sm font-medium leading-5">{{ getNetworkLabel(pkg) }}</div>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div
+            ref="detailColumnRef"
+            class="min-w-0 lg:self-start"
+            :style="detailColumnStyle"
+          >
+            <div
+              ref="detailCardRef"
+              class="rounded-3xl border p-6"
+              :class="ui.detailCard"
+              :style="detailCardStyle"
+            >
+              <template v-if="selectedPackage">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span
+                    class="rounded-lg px-2 py-0.5 text-[11px] font-medium tracking-[0.02em]"
+                    :class="selectedPackage.sourceType === 'official' ? ui.chipOfficial : ui.chipMarket"
+                  >
+                    {{ selectedPackage.sourceType === 'official' ? t('publicSite.market.official') : t('publicSite.market.market') }}
+                  </span>
+                  <span
+                    class="rounded-lg px-2 py-0.5 text-[11px] font-medium tracking-[0.02em]"
+                    :class="selectedPackage.instance_type === 'vm' ? ui.chipKvm : ui.chipLxc"
+                  >
+                    {{ selectedPackage.instance_type === 'vm' ? 'KVM' : 'LXC' }}
+                  </span>
+                </div>
+
+                <h2 class="mt-4 text-2xl font-normal tracking-[-0.02em]" :class="ui.title">
+                  {{ selectedPackage.name }}
+                </h2>
+                <p class="mt-3 text-sm leading-6" :class="ui.body">
+                  {{ selectedPackage.description || t('publicSite.portal.packageFallback') }}
+                </p>
+
+                <div class="mt-6 grid grid-cols-2 gap-3">
+                  <div class="rounded-2xl p-4" :class="ui.detailSummaryCard">
+                    <div class="flex items-center gap-2">
+                      <svg class="h-4 w-4" :class="ui.detailSummaryIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      <div class="text-xs font-medium" :class="ui.detailSummaryLabel">
+                        {{ t('publicSite.market.labels.startingPrice') }}
+                      </div>
+                    </div>
+                    <div class="mt-2 text-lg font-medium">{{ getPackagePriceLabel(selectedPackage) }}</div>
+                  </div>
+                  <div class="rounded-2xl p-4" :class="ui.detailSummaryCard">
+                    <div class="flex items-center gap-2">
+                      <svg class="h-4 w-4" :class="ui.detailSummaryIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                      </svg>
+                      <div class="text-xs font-medium" :class="ui.detailSummaryLabel">
+                        {{ t('publicSite.market.labels.traffic') }}
+                      </div>
+                    </div>
+                    <div class="mt-2 text-lg font-medium">{{ formatTraffic(selectedPackage.monthly_traffic_limit) }}</div>
+                  </div>
+                </div>
+
+                <div class="mt-6 space-y-3">
+                  <div class="text-sm font-medium" :class="ui.title">
+                    {{ t('publicSite.market.plansTitle') }}
+                  </div>
+                  <div v-if="selectedPackage.isPaid && selectedPackage.plans.length > 0" class="space-y-2 lg:max-h-72 lg:overflow-y-auto lg:pr-1">
+                    <button
+                      v-for="plan in selectedPackage.plans"
+                      :key="plan.id"
+                      class="w-full rounded-2xl px-3 py-3 text-left transition-colors duration-150"
+                      :class="[
+                        selectedPlan?.id === plan.id ? ui.planSelected : ui.planIdle,
+                        plan.isSoldOut ? 'cursor-not-allowed opacity-60 hover:bg-inherit' : ''
+                      ]"
+                      :disabled="plan.isSoldOut"
+                      @click="selectPlan(plan.id)"
+                    >
+                      <div class="flex items-start gap-3">
+                        <div
+                          class="mt-1 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2"
+                          :class="selectedPlan?.id === plan.id ? ui.radioActive : ui.radioIdle"
+                        >
+                          <div v-if="selectedPlan?.id === plan.id" class="h-1.5 w-1.5 rounded-full" :class="themeStore.isDark ? 'bg-[#062e6f]' : 'bg-white'"></div>
+                        </div>
+                        <div class="min-w-0 flex-1">
+                          <div class="flex items-start justify-between gap-3">
+                            <div class="min-w-0">
+                              <div class="truncate text-sm font-medium">
+                                {{ plan.name }}
+                              </div>
+                              <div class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[11px] opacity-70">
+                                <span>{{ getMarketPlanCycleLabel(plan.billingCycle) }}</span>
+                                <span
+                                  v-if="plan.isSoldOut"
+                                  class="rounded-full border px-1.5 py-0.5 opacity-100"
+                                  :class="ui.chipSoldOut"
+                                >
+                                  {{ t('publicSite.market.soldOut') }}
+                                </span>
+                              </div>
+                            </div>
+                            <div class="shrink-0 text-right">
+                              <div class="text-sm font-medium">
+                                {{ configStore.freeSiteMode ? freeSiteCopy.moneyJustForShow : `¥${formatPublicPrice(plan.price)}` }}
+                              </div>
+                              <div class="mt-0.5 text-[11px] opacity-70">
+                                {{ getMarketMonthlyPriceLabel(plan.monthlyPrice) }}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="mt-2 flex flex-wrap gap-1.5 text-[11px]">
+                            <span class="rounded-lg border px-2 py-0.5 font-medium" :class="selectedPlan?.id === plan.id ? 'border-current' : ui.statChip">
+                              CPU {{ plan.cpu }}%
+                            </span>
+                            <span class="rounded-lg border px-2 py-0.5 font-medium" :class="selectedPlan?.id === plan.id ? 'border-current' : ui.statChip">
+                              {{ formatMemory(plan.memory) }}
+                            </span>
+                            <span class="rounded-lg border px-2 py-0.5 font-medium" :class="selectedPlan?.id === plan.id ? 'border-current' : ui.statChip">
+                              {{ formatDisk(plan.disk) }}
+                            </span>
+                            <span class="rounded-lg border px-2 py-0.5 font-medium" :class="selectedPlan?.id === plan.id ? 'border-current' : ui.statChip">
+                              {{ formatTraffic(plan.trafficLimit) }}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    v-else
+                    class="rounded-2xl p-4 text-sm leading-6"
+                    :class="ui.infoCard"
+                  >
+                    <div class="font-medium" :class="ui.title">
+                      {{ t('publicSite.market.customConfigTitle') }}
+                    </div>
+                    <p class="mt-2">
+                      {{ t('publicSite.market.customConfigDescription') }}
+                    </p>
+                  </div>
+                </div>
+
+                <div v-if="selectedPlan" class="mt-5">
+                  <div class="rounded-2xl px-4 py-4" :class="ui.detailSummaryCard">
+                    <div class="flex items-start justify-between gap-4">
+                      <div class="min-w-0">
+                        <div class="text-xs font-medium" :class="ui.statBlockLabel">
+                          {{ t('publicSite.market.selectedPlanTitle') }}
+                        </div>
+                        <div class="mt-1 truncate text-base font-medium" :class="ui.title">
+                          {{ selectedPlan.name }}
+                        </div>
+                        <div class="mt-1 text-xs" :class="ui.statBlockLabel">
+                          {{ getMarketPlanCycleLabel(selectedPlan.billingCycle) }} · {{ getNetworkLabel(selectedPackage) }}
+                        </div>
+                      </div>
+                      <div class="shrink-0 text-right">
+                        <div class="text-xl font-normal tracking-[-0.02em]" :class="ui.title">
+                          {{ configStore.freeSiteMode ? freeSiteCopy.moneyJustForShow : `¥${formatPublicPrice(selectedPlan.price)}` }}
+                        </div>
+                        <div class="mt-0.5 text-[11px]" :class="ui.statBlockLabel">
+                          {{ getMarketMonthlyPriceLabel(selectedPlan.monthlyPrice) }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="mt-3 flex flex-wrap gap-1.5 text-[11px]">
+                      <span class="rounded-lg border border-current px-2 py-0.5 font-medium opacity-90">
+                        CPU {{ selectedPlan.cpu }}%
+                      </span>
+                      <span class="rounded-lg border border-current px-2 py-0.5 font-medium opacity-90">
+                        {{ formatMemory(selectedPlan.memory) }}
+                      </span>
+                      <span class="rounded-lg border border-current px-2 py-0.5 font-medium opacity-90">
+                        {{ formatDisk(selectedPlan.disk) }}
+                      </span>
+                      <span class="rounded-lg border border-current px-2 py-0.5 font-medium opacity-90">
+                        {{ formatTraffic(selectedPlan.trafficLimit) }}
+                      </span>
+                      <span class="rounded-lg border border-current px-2 py-0.5 font-medium opacity-90">
+                        {{ t('publicSite.market.labels.hosts') }} {{ selectedPackage.host_ids.length }}
+                      </span>
+                      <span class="rounded-lg border border-current px-2 py-0.5 font-medium opacity-90">
+                        {{ t('publicSite.market.labels.nesting') }} {{ selectedPackage.nested ? t('common.yes') : t('common.no') }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <button
+                  class="mt-8 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full px-6 text-sm font-medium tracking-[0.01em] transition-[background-color,box-shadow] duration-150 disabled:cursor-not-allowed disabled:opacity-60"
+                  :class="ui.ctaButton"
+                  :disabled="selectedPackage.soldOut || (selectedPackage.isPaid && !selectedPlan)"
+                  @click="createInstance(selectedPackage)"
+                >
+                  {{ getMarketCtaText(selectedPackage) }}
+                </button>
+
+                <p v-if="!authStore.isAuthenticated" class="mt-3 text-center text-xs leading-5" :class="ui.statBlockLabel">
+                  {{ t('publicSite.market.loginHint') }}
+                </p>
+              </template>
+
+              <template v-else>
+                <div class="flex min-h-[20rem] items-center justify-center text-center text-sm" :class="ui.statBlockLabel">
+                  {{ t('publicSite.market.choosePackage') }}
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/client/src/views/NotFoundView.vue b/client/src/views/NotFoundView.vue
new file mode 100644
index 0000000..4ebf732
--- /dev/null
+++ b/client/src/views/NotFoundView.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+</script>
+
+<template>
+  <div 
+    class="min-h-screen flex items-center justify-center"
+    :class="themeStore.isDark ? 'bg-[#0a0a0a]' : 'bg-white'"
+  >
+    <div class="text-center">
+      <h1 
+        class="text-8xl font-bold"
+        :class="themeStore.isDark ? 'text-gray-800' : 'text-gray-200'"
+      >
+        404
+      </h1>
+      <p 
+        class="mt-4"
+        :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-600'"
+      >
+        {{ $t('error.notFound') }}
+      </p>
+      <RouterLink to="/" class="btn-secondary mt-6 inline-block">{{ $t('error.backHome') }}</RouterLink>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/PortalView.vue b/client/src/views/PortalView.vue
new file mode 100644
index 0000000..d453686
--- /dev/null
+++ b/client/src/views/PortalView.vue
@@ -0,0 +1,575 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { usePageSeo } from '@/composables/usePageSeo'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useBrand } from '@/composables/useBrand'
+import {
+  formatPublicPrice,
+  formatPublicTraffic,
+  getStartingMonthlyPrice,
+  type PackageSource,
+  type PublicPackage,
+  type PublicRegion
+} from '@/utils/publicCatalog'
+
+defineOptions({
+  name: 'PortalView'
+})
+
+const router = useRouter()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+
+const packages = ref<PublicPackage[]>([])
+const regions = ref<PublicRegion[]>([])
+const loading = ref(true)
+
+const spotlightPackages = computed(() => {
+  const allPackages = [...packages.value].sort((left, right) => {
+    if (left.soldOut !== right.soldOut) {
+      return left.soldOut ? 1 : -1
+    }
+
+    const leftPrice = getStartingMonthlyPrice(left)
+    const rightPrice = getStartingMonthlyPrice(right)
+
+    if (leftPrice !== null && rightPrice !== null && leftPrice !== rightPrice) {
+      return leftPrice - rightPrice
+    }
+
+    return left.name.localeCompare(right.name, 'zh')
+  })
+
+  return allPackages.slice(0, 4)
+})
+
+const statCards = computed(() => [
+  { label: t('publicSite.portal.stats.packages'), value: String(packages.value.length) },
+  { label: t('publicSite.portal.stats.regions'), value: String(regions.value.length) },
+  { label: t('publicSite.portal.stats.official'), value: String(packages.value.filter(pkg => pkg.sourceType === 'official').length) },
+  { label: t('publicSite.portal.stats.market'), value: String(packages.value.filter(pkg => pkg.sourceType === 'market').length) }
+])
+
+const platformCards = computed(() => [
+  {
+    title: t('publicSite.portal.experienceNoLoginTitle'),
+    description: t('publicSite.portal.experienceNoLoginDescription')
+  },
+  {
+    title: t('publicSite.portal.experienceRoutingTitle'),
+    description: t('publicSite.portal.experienceRoutingDescription')
+  },
+  {
+    title: t('publicSite.portal.experienceThemeTitle'),
+    description: t('publicSite.portal.experienceThemeDescription')
+  }
+])
+
+const ecosystemCards = computed(() => [
+  {
+    key: 'official',
+    source: 'official' as PackageSource,
+    title: t('publicSite.portal.officialTitle'),
+    description: t('publicSite.portal.officialDescription'),
+    points: [
+      t('publicSite.portal.officialPoint1'),
+      t('publicSite.portal.officialPoint2'),
+      t('publicSite.portal.officialPoint3')
+    ]
+  },
+  {
+    key: 'market',
+    source: 'market' as PackageSource,
+    title: t('publicSite.portal.marketTitle'),
+    description: t('publicSite.portal.marketDescription'),
+    points: [
+      t('publicSite.portal.marketPoint1'),
+      t('publicSite.portal.marketPoint2'),
+      t('publicSite.portal.marketPoint3')
+    ]
+  }
+])
+
+const consoleActionLabel = computed(() => (
+  authStore.isAuthenticated ? t('publicSite.actions.console') : t('publicSite.actions.signIn')
+))
+
+const consoleActionCompactLabel = computed(() => (
+  authStore.isAuthenticated ? t('publicSite.actions.consoleCompact') : t('publicSite.actions.signIn')
+))
+
+// Material 3 baseline tokens
+// Light: primary #0b57d0, on-primary #fff, primary-container #d3e3fd, on-primary-container #041e49
+//        surface #faf9fd, surface-container #eef0f8, surface-container-high #e8eaf2, outline-variant #c3c6cf
+// Dark:  primary #a8c7fa, on-primary #062e6f, primary-container #284777, on-primary-container #d3e3fd
+//        surface #111418, surface-container #1d2024, surface-container-high #272a2f, outline-variant #43474e
+const ui = computed(() => themeStore.isDark
+  ? {
+      badge: 'border-[#284777] bg-[#1a2c52] text-[#d3e3fd]',
+      body: 'text-[#c3c6cf]',
+      primaryButton: 'bg-[#a8c7fa] text-[#062e6f] shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)] hover:bg-[#bdd3fb] hover:shadow-[0_1px_2px_rgba(0,0,0,0.3),0_2px_6px_2px_rgba(0,0,0,0.15)] focus-visible:ring-[#a8c7fa]/40',
+      secondaryButton: 'bg-[#284777] text-[#d3e3fd] hover:bg-[#304f81] focus-visible:ring-[#a8c7fa]/40',
+      statCard: 'border-[#43474e] bg-[#1d2024]',
+      statValue: 'text-[#e3e2e6]',
+      statLabel: 'text-[#8e9199]',
+      heroTint: 'bg-[linear-gradient(180deg,rgba(26,44,82,0.55)_0%,rgba(26,44,82,0.25)_45%,rgba(17,20,24,0)_100%)]',
+      previewCard: 'bg-[#1a2c52] text-[#d3e3fd] shadow-[0_4px_8px_3px_rgba(0,0,0,0.15),0_1px_3px_rgba(0,0,0,0.3)]',
+      previewLabel: 'text-[#a8c7fa]',
+      previewTitle: 'text-[#eaf1ff]',
+      previewButton: 'bg-[#a8c7fa] text-[#062e6f] hover:bg-[#bdd3fb]',
+      previewBody: 'text-[#c3dafd]',
+      terminalCard: 'bg-[#0b1422] text-[#d3e3fd]',
+      terminalMeta: 'text-[#89a2cf]',
+      platformCard: 'bg-[#1f3159] text-[#eaf1ff]',
+      platformTitle: 'text-[#eaf1ff]',
+      platformBody: 'text-[#b8cbe8]',
+      sectionLabel: 'text-[#8e9199]',
+      sectionBody: 'text-[#c3c6cf]',
+      ecosystemOfficialCard: 'bg-[#1a2c52] text-[#d3e3fd]',
+      ecosystemMarketCard: 'bg-[#223527] text-[#c8e6c9]',
+      ecosystemOfficialBody: 'text-[#c3dafd]',
+      ecosystemMarketBody: 'text-[#b7d3b7]',
+      ecosystemOfficialList: 'text-[#eaf1ff]',
+      ecosystemMarketList: 'text-[#dbeadb]',
+      ecosystemOfficialButton: 'bg-[#a8c7fa] text-[#062e6f] hover:bg-[#bdd3fb]',
+      ecosystemMarketButton: 'bg-[#a0cfa2] text-[#0c3810] hover:bg-[#b4d9b5]',
+      browseWrap: 'border-[#43474e] bg-[#1d2024]',
+      browseCard: 'shadow-[0_1px_2px_rgba(0,0,0,0.3),0_1px_3px_1px_rgba(0,0,0,0.15)] hover:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_4px_8px_3px_rgba(0,0,0,0.15)]',
+      emptyState: 'border-[#43474e] bg-[#1d2024] text-[#8e9199]',
+      skeleton: 'bg-[#272a2f]'
+    }
+  : {
+      badge: 'border-[#aac7fa]/60 bg-[#d3e3fd] text-[#041e49]',
+      body: 'text-[#43474e]',
+      primaryButton: 'bg-[#0b57d0] text-white shadow-[0_1px_2px_rgba(11,87,208,0.3),0_1px_3px_1px_rgba(11,87,208,0.15)] hover:bg-[#0848ad] hover:shadow-[0_1px_2px_rgba(11,87,208,0.3),0_2px_6px_2px_rgba(11,87,208,0.15)] focus-visible:ring-[#0b57d0]/30',
+      secondaryButton: 'bg-[#d3e3fd] text-[#041e49] hover:bg-[#c1d6fc] focus-visible:ring-[#0b57d0]/30',
+      statCard: 'bg-white shadow-[0_1px_2px_rgba(15,23,42,0.08),0_1px_3px_1px_rgba(15,23,42,0.06)]',
+      statValue: 'text-[#1a1b20]',
+      statLabel: 'text-[#74777f]',
+      heroTint: 'bg-[linear-gradient(180deg,rgba(211,227,253,0.7)_0%,rgba(223,235,254,0.35)_45%,rgba(252,252,253,0)_100%)]',
+      previewCard: 'bg-[#d3e3fd] text-[#041e49] shadow-[0_1px_3px_rgba(11,87,208,0.1),0_4px_8px_3px_rgba(11,87,208,0.08)]',
+      previewLabel: 'text-[#1a4191]',
+      previewTitle: 'text-[#041e49]',
+      previewButton: 'bg-[#0b57d0] text-white hover:bg-[#0848ad]',
+      previewBody: 'text-[#24366e]',
+      terminalCard: 'bg-[#1b273e] text-[#e3ebff]',
+      terminalMeta: 'text-[#a8bce6]',
+      platformCard: 'bg-white/80 text-[#041e49]',
+      platformTitle: 'text-[#041e49]',
+      platformBody: 'text-[#3b4a73]',
+      sectionLabel: 'text-[#74777f]',
+      sectionBody: 'text-[#43474e]',
+      ecosystemOfficialCard: 'bg-[#d3e3fd] text-[#041e49]',
+      ecosystemMarketCard: 'bg-[#d7edd9] text-[#0c3810]',
+      ecosystemOfficialBody: 'text-[#24366e]',
+      ecosystemMarketBody: 'text-[#295330]',
+      ecosystemOfficialList: 'text-[#041e49]',
+      ecosystemMarketList: 'text-[#0c3810]',
+      ecosystemOfficialButton: 'bg-[#0b57d0] text-white hover:bg-[#0848ad]',
+      ecosystemMarketButton: 'bg-[#3a6a49] text-white hover:bg-[#2c5238]',
+      browseWrap: 'bg-[#eef0f8]',
+      browseCard: 'shadow-[0_1px_2px_rgba(15,23,42,0.08),0_1px_3px_1px_rgba(15,23,42,0.06)] hover:shadow-[0_1px_3px_rgba(15,23,42,0.1),0_4px_8px_3px_rgba(15,23,42,0.08)]',
+      emptyState: 'border-[#c3c6cf] bg-white text-[#74777f]',
+      skeleton: 'bg-[#e2e4ed]'
+    }
+)
+
+usePageSeo(() => ({
+  title: `${brand.brandName} - ${brand.brandSubtitle}`,
+  description: brand.brandSubtitle,
+  canonical: `${window.location.origin}/`,
+  keywords: t('publicSite.seo.keywords').replace(/Incudal/g, brand.brandName)
+}))
+
+function formatTraffic(bytes: string | null): string {
+  return formatPublicTraffic(bytes, t('common.unlimited'))
+}
+
+function getPriceLabel(pkg: PublicPackage): string {
+  const startPrice = getStartingMonthlyPrice(pkg)
+  if (startPrice === null) {
+    return t('publicSite.market.free')
+  }
+
+  return t('publicSite.market.fromMonthly', { price: formatPublicPrice(startPrice) })
+}
+
+function getSourceChipClass(source: PackageSource): string {
+  if (source === 'official') {
+    return themeStore.isDark
+      ? 'border border-[#a8c7fa]/70 text-[#a8c7fa]'
+      : 'border border-[#0b57d0]/40 text-[#0b57d0]'
+  }
+
+  return themeStore.isDark
+    ? 'border border-[#a1cdb3]/70 text-[#a1cdb3]'
+    : 'border border-[#3a6a49]/40 text-[#3a6a49]'
+}
+
+function getSourceDotClass(source: PackageSource): string {
+  if (source === 'official') {
+    return themeStore.isDark ? 'bg-[#a8c7fa]' : 'bg-[#0b57d0]'
+  }
+
+  return themeStore.isDark ? 'bg-[#a1cdb3]' : 'bg-[#3a6a49]'
+}
+
+function getInstanceChipClass(instanceType: string): string {
+  if (instanceType === 'vm') {
+    return themeStore.isDark
+      ? 'border border-[#ffdfa6]/60 text-[#ffdfa6]'
+      : 'border border-[#7a5900]/40 text-[#7a5900]'
+  }
+
+  return themeStore.isDark
+    ? 'border border-[#8e9199]/60 text-[#c3c6cf]'
+    : 'border border-[#74777f]/40 text-[#43474e]'
+}
+
+function getEcosystemCardClass(source: PackageSource): string {
+  if (source === 'official') {
+    return themeStore.isDark ? ui.value.ecosystemOfficialCard : ui.value.ecosystemOfficialCard
+  }
+  return themeStore.isDark ? ui.value.ecosystemMarketCard : ui.value.ecosystemMarketCard
+}
+
+function getPackageCardClass(_source: PackageSource): string {
+  return themeStore.isDark
+    ? 'bg-[#272a2f] hover:bg-[#2d3136]'
+    : 'bg-white hover:bg-[#f8f9fc]'
+}
+
+function getPriceTextClass(source: PackageSource): string {
+  if (source === 'official') {
+    return themeStore.isDark ? 'text-[#a8c7fa]' : 'text-[#0b57d0]'
+  }
+  return themeStore.isDark ? 'text-[#a1cdb3]' : 'text-[#3a6a49]'
+}
+
+function browseCatalog(source?: PackageSource): void {
+  void router.push({
+    path: '/market',
+    query: source ? { source } : undefined
+  })
+}
+
+function openPackage(pkg: PublicPackage): void {
+  void router.push({
+    path: '/market',
+    query: {
+      source: pkg.sourceType,
+      package: String(pkg.id)
+    }
+  })
+}
+
+function goToConsole(): void {
+  if (authStore.isAuthenticated) {
+    const target = authStore.isAdmin ? '/admin/users' : '/dashboard'
+    void router.push(target)
+    return
+  }
+
+  void router.push('/login')
+}
+
+async function loadCatalog(): Promise<void> {
+  loading.value = true
+
+  try {
+    const [packagesResponse, regionsResponse] = await Promise.all([
+      api.packages.listPublic(),
+      api.packages.getPublicRegions()
+    ])
+
+    packages.value = (packagesResponse.packages || []) as unknown as PublicPackage[]
+    regions.value = regionsResponse.regions || []
+  } catch (error) {
+    console.error('Failed to load public catalog:', error)
+    packages.value = []
+    regions.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  void loadCatalog()
+})
+</script>
+
+<template>
+  <div class="relative">
+    <section class="relative px-4 pb-20 pt-14 sm:px-6 lg:px-8">
+      <div class="relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
+        <div class="max-w-3xl">
+          <div
+            class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium"
+            :class="ui.badge"
+          >
+            <span class="h-1.5 w-1.5 rounded-full" :class="themeStore.isDark ? 'bg-[#a8c7fa]' : 'bg-[#0b57d0]'"></span>
+            {{ t('publicSite.portal.badge') }}
+          </div>
+
+          <h1 class="mt-6 text-4xl font-normal tracking-[-0.02em] sm:text-5xl lg:text-[3.5rem] lg:leading-[1.1]">
+            {{ t('publicSite.portal.title') }}
+          </h1>
+          <p class="mt-6 max-w-2xl text-base leading-7 sm:text-lg sm:leading-8" :class="ui.body">
+            {{ t('publicSite.portal.description') }}
+          </p>
+
+          <div class="mt-8 flex flex-col gap-3 sm:flex-row">
+            <button
+              class="inline-flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm font-medium tracking-[0.01em] transition-[background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-4"
+              :class="ui.primaryButton"
+              @click="browseCatalog()"
+            >
+              <span>{{ t('publicSite.actions.browseProducts') }}</span>
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 4.5l6 6m0 0l-6 6m6-6h-15" />
+              </svg>
+            </button>
+
+            <button
+              class="inline-flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm font-medium tracking-[0.01em] transition-colors duration-150 focus-visible:outline-none focus-visible:ring-4"
+              :class="ui.secondaryButton"
+              @click="goToConsole"
+            >
+              <span class="sm:hidden">{{ consoleActionCompactLabel }}</span>
+              <span class="hidden sm:inline">{{ consoleActionLabel }}</span>
+            </button>
+          </div>
+
+          <div class="mt-10 grid grid-cols-2 gap-3 xl:grid-cols-4">
+            <div
+              v-for="item in statCards"
+              :key="item.label"
+              class="rounded-2xl px-4 py-4 transition-shadow duration-150"
+              :class="ui.statCard"
+            >
+              <div class="text-xs font-medium" :class="ui.statLabel">
+                {{ item.label }}
+              </div>
+              <div class="mt-2 text-2xl font-normal tracking-[-0.02em]" :class="ui.statValue">
+                {{ item.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="relative">
+          <div
+            class="relative overflow-hidden rounded-[28px] p-6"
+            :class="ui.previewCard"
+          >
+            <div class="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <div class="text-xs font-medium" :class="ui.previewLabel">
+                  {{ t('publicSite.portal.previewLabel') }}
+                </div>
+                <div class="mt-2 text-2xl font-normal tracking-[-0.02em]" :class="ui.previewTitle">
+                  {{ t('publicSite.portal.previewTitle') }}
+                </div>
+              </div>
+
+              <button
+                class="h-10 rounded-full px-5 text-sm font-medium transition-colors duration-150"
+                :class="ui.previewButton"
+                @click="browseCatalog()"
+              >
+                {{ t('publicSite.actions.viewCatalog') }}
+              </button>
+            </div>
+
+            <p class="mt-4 text-sm leading-6" :class="ui.previewBody">
+              {{ t('publicSite.portal.previewDescription') }}
+            </p>
+
+            <div class="mt-6 rounded-2xl p-5 font-mono text-xs leading-6" :class="ui.terminalCard">
+              <div class="flex flex-wrap items-center justify-between gap-2">
+                <span>root@incudal</span>
+                <span :class="ui.terminalMeta">incus console</span>
+              </div>
+              <div class="mt-4 space-y-1">
+                <div>{{ t('publicSite.portal.controlPoint1') }}</div>
+                <div>{{ t('publicSite.portal.controlPoint2') }}</div>
+                <div>{{ t('publicSite.portal.controlPoint3') }}</div>
+              </div>
+            </div>
+
+            <div class="mt-6 grid gap-3 sm:grid-cols-3">
+              <div
+                v-for="card in platformCards"
+                :key="card.title"
+                class="rounded-2xl p-4 transition-colors duration-150"
+                :class="ui.platformCard"
+              >
+                <div class="text-sm font-medium" :class="ui.platformTitle">
+                  {{ card.title }}
+                </div>
+                <p class="mt-2 text-xs leading-5" :class="ui.platformBody">
+                  {{ card.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="px-4 py-20 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-7xl">
+        <div class="max-w-2xl">
+          <div class="text-xs font-medium" :class="ui.sectionLabel">
+            {{ t('publicSite.portal.catalogLabel') }}
+          </div>
+          <h2 class="mt-4 text-3xl font-normal tracking-[-0.02em] sm:text-[2.25rem] sm:leading-[1.15]">
+            {{ t('publicSite.portal.catalogTitle') }}
+          </h2>
+          <p class="mt-4 text-base leading-7" :class="ui.sectionBody">
+            {{ t('publicSite.portal.catalogDescription') }}
+          </p>
+        </div>
+
+        <div class="mt-10 grid gap-6 lg:grid-cols-2">
+          <article
+            v-for="line in ecosystemCards"
+            :key="line.key"
+            class="rounded-[28px] p-7 transition-shadow duration-150"
+            :class="getEcosystemCardClass(line.source)"
+          >
+            <div class="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <h3 class="text-2xl font-normal tracking-[-0.02em]">
+                  {{ line.title }}
+                </h3>
+                <p class="mt-3 text-sm leading-6" :class="line.source === 'official' ? ui.ecosystemOfficialBody : ui.ecosystemMarketBody">
+                  {{ line.description }}
+                </p>
+              </div>
+              <span
+                class="rounded-lg px-2.5 py-1 text-[11px] font-medium tracking-[0.02em]"
+                :class="getSourceChipClass(line.source)"
+              >
+                {{ line.source === 'official' ? t('publicSite.market.official') : t('publicSite.market.market') }}
+              </span>
+            </div>
+
+            <div class="mt-6 space-y-3 text-sm" :class="line.source === 'official' ? ui.ecosystemOfficialList : ui.ecosystemMarketList">
+              <div v-for="point in line.points" :key="point" class="flex items-start gap-3">
+                <span class="mt-1.5 h-1.5 w-1.5 rounded-full" :class="getSourceDotClass(line.source)"></span>
+                <span>{{ point }}</span>
+              </div>
+            </div>
+
+            <div class="mt-6">
+              <button
+                class="inline-flex h-10 items-center gap-2 rounded-full px-6 text-sm font-medium transition-colors duration-150"
+                :class="line.source === 'official' ? ui.ecosystemOfficialButton : ui.ecosystemMarketButton"
+                @click="browseCatalog(line.source)"
+              >
+                {{ line.source === 'official' ? t('publicSite.actions.browseOfficial') : t('publicSite.actions.browseMarket') }}
+              </button>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="px-4 pb-20 sm:px-6 lg:px-8">
+      <div
+        class="mx-auto max-w-7xl rounded-[28px] px-6 py-10 sm:px-10"
+        :class="ui.browseWrap"
+      >
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div class="max-w-2xl">
+            <div class="text-xs font-medium" :class="ui.sectionLabel">
+              {{ t('publicSite.portal.browseLabel') }}
+            </div>
+            <h2 class="mt-4 text-3xl font-normal tracking-[-0.02em] sm:text-[2.25rem] sm:leading-[1.15]">
+              {{ t('publicSite.portal.browseTitle') }}
+            </h2>
+            <p class="mt-4 text-base leading-7" :class="ui.sectionBody">
+              {{ t('publicSite.portal.browseDescription') }}
+            </p>
+          </div>
+
+          <button
+            class="inline-flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm font-medium tracking-[0.01em] transition-[background-color,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-4"
+            :class="ui.primaryButton"
+            @click="browseCatalog()"
+          >
+            {{ t('publicSite.actions.browseProducts') }}
+          </button>
+        </div>
+
+        <div class="mt-8 grid gap-4 lg:grid-cols-2">
+          <template v-if="loading">
+            <div
+              v-for="index in 4"
+              :key="index"
+              class="h-40 animate-pulse rounded-xl"
+              :class="ui.skeleton"
+            ></div>
+          </template>
+
+          <template v-else-if="spotlightPackages.length > 0">
+            <button
+              v-for="pkg in spotlightPackages"
+              :key="pkg.id"
+              class="flex flex-col gap-4 rounded-2xl p-5 text-left transition-[background-color,box-shadow] duration-150 sm:flex-row sm:items-start sm:justify-between"
+              :class="[ui.browseCard, getPackageCardClass(pkg.sourceType)]"
+              @click="openPackage(pkg)"
+            >
+              <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span
+                    class="rounded-lg px-2 py-0.5 text-[11px] font-medium tracking-[0.02em]"
+                    :class="getSourceChipClass(pkg.sourceType)"
+                  >
+                    {{ pkg.sourceType === 'official' ? t('publicSite.market.official') : t('publicSite.market.market') }}
+                  </span>
+                  <span
+                    class="rounded-lg px-2 py-0.5 text-[11px] font-medium tracking-[0.02em]"
+                    :class="getInstanceChipClass(pkg.instance_type)"
+                  >
+                    {{ pkg.instance_type === 'vm' ? 'KVM' : 'LXC' }}
+                  </span>
+                </div>
+                <div class="mt-3 truncate text-lg font-medium" :class="ui.platformTitle">
+                  {{ pkg.name }}
+                </div>
+                <div class="mt-2 line-clamp-2 text-sm leading-5" :class="ui.sectionBody">
+                  {{ pkg.description || t('publicSite.portal.packageFallback') }}
+                </div>
+              </div>
+
+              <div class="sm:shrink-0 sm:text-right">
+                <div class="text-sm font-medium" :class="getPriceTextClass(pkg.sourceType)">
+                  {{ getPriceLabel(pkg) }}
+                </div>
+                <div class="mt-1 text-xs" :class="ui.statLabel">
+                  {{ formatTraffic(pkg.monthly_traffic_limit) }}
+                </div>
+              </div>
+            </button>
+          </template>
+
+          <div
+            v-else
+            class="rounded-2xl border border-dashed px-4 py-8 text-center text-sm"
+            :class="ui.emptyState"
+          >
+            {{ t('publicSite.portal.emptyPackages') }}
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/client/src/views/ProfileView.vue b/client/src/views/ProfileView.vue
new file mode 100644
index 0000000..b9bbdd1
--- /dev/null
+++ b/client/src/views/ProfileView.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+/**
+ * ProfileView - 用户设置页面
+ * 
+ * 已拆分为以下子组件：
+ * - AccountSection: 账户信息和配额显示、API Keys
+ * - PasswordSection: 密码修改
+ * - TwoFactorSection: 双因素认证 (2FA)
+ * - OAuthSection: OAuth 账号绑定
+ * - TelegramBindingSection: Telegram 绑定
+ * - SSHKeysSection: SSH 公钥管理（仅普通用户）
+ * - NotificationSection: 通知渠道管理
+ * - LoginHistorySection: 登录历史记录
+ * 
+ * 注意：账户余额已移至独立的 WalletView 页面
+ */
+import { useAuthStore } from '@/stores/auth'
+import AccountSection from '@/components/profile/AccountSection.vue'
+import PasswordSection from '@/components/profile/PasswordSection.vue'
+import TwoFactorSection from '@/components/profile/TwoFactorSection.vue'
+import OAuthSection from '@/components/profile/OAuthSection.vue'
+import TelegramBindingSection from '@/components/profile/TelegramBindingSection.vue'
+import SSHKeysSection from '@/components/profile/SSHKeysSection.vue'
+import NotificationSection from '@/components/profile/NotificationSection.vue'
+import LoginHistorySection from '@/components/profile/LoginHistorySection.vue'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'ProfileView' })
+
+const authStore = useAuthStore()
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('nav.settings') }}</h1>
+    </div>
+
+    <!-- 账户信息和配额 -->
+    <AccountSection />
+
+    <!-- 修改密码 -->
+    <PasswordSection />
+
+    <!-- 双因素认证 -->
+    <TwoFactorSection />
+
+    <!-- OAuth 账号绑定 -->
+    <OAuthSection />
+
+    <!-- Telegram 绑定 -->
+    <TelegramBindingSection />
+
+    <!-- SSH 公钥（仅普通用户） -->
+    <SSHKeysSection v-if="!authStore.isAdmin" />
+
+    <!-- 通知渠道 -->
+    <NotificationSection />
+
+    <!-- 登录历史记录 -->
+    <LoginHistorySection />
+  </div>
+</template>
diff --git a/client/src/views/RegisterView.vue b/client/src/views/RegisterView.vue
new file mode 100644
index 0000000..3d7b490
--- /dev/null
+++ b/client/src/views/RegisterView.vue
@@ -0,0 +1,607 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { validateIdentifier, containsDangerousChars } from '@/utils/validation'
+import { translateError } from '@/utils/errorHandler'
+import TurnstileWidget from '@/components/TurnstileWidget.vue'
+import TermsOfServiceModal from '@/components/TermsOfServiceModal.vue'
+import api from '@/api'
+import { useBrand } from '@/composables/useBrand'
+
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const brand = useBrand()
+
+interface RegisterForm {
+  username: string
+  email: string
+  password: string
+  confirmPassword: string
+  inviteCode: string
+  emailCode: string
+}
+
+const form = ref<RegisterForm>({
+  username: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+  inviteCode: (route.params.code as string) || '',
+  emailCode: ''
+})
+
+const loading = ref<boolean>(false)
+const error = ref<string>('')
+const success = ref<boolean>(false)
+const registrationEnabled = ref<boolean>(true)
+const requireInviteCode = ref<boolean>(true)
+const configLoading = ref<boolean>(true)
+
+// Email verification
+const emailVerificationEnabled = ref<boolean>(false)
+const sendingCode = ref<boolean>(false)
+const codeSent = ref<boolean>(false)
+const codeCountdown = ref<number>(0)
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+
+// Email domain whitelist
+const emailDomainWhitelistEnabled = ref<boolean>(false)
+const allowedEmailDomains = ref<string[]>([])
+const emailUsername = ref<string>('')
+const selectedEmailDomain = ref<string>('')
+
+// 当白名单模式时，自动组合邮箱地址
+watch([emailUsername, selectedEmailDomain], () => {
+  if (emailDomainWhitelistEnabled.value && allowedEmailDomains.value.length > 0) {
+    if (emailUsername.value && selectedEmailDomain.value) {
+      form.value.email = `${emailUsername.value}@${selectedEmailDomain.value}`
+    } else {
+      form.value.email = ''
+    }
+  }
+})
+
+// Turnstile
+const turnstileEnabled = ref<boolean>(false)
+const turnstileSiteKey = ref<string>('')
+const turnstileToken = ref<string>('')
+const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
+void turnstileRef.value // 模板中通过 ref 使用
+
+// Terms of Service
+const agreedToTerms = ref<boolean>(false)
+const showTermsModal = ref<boolean>(false)
+
+// Email confirmation modal
+const showEmailConfirmModal = ref<boolean>(false)
+
+function onTurnstileExpire() {
+  turnstileToken.value = ''
+}
+
+// Show email confirmation before sending code
+function handleSendCodeClick(): void {
+  if (!registrationEnabled.value) {
+    error.value = t('auth.registrationClosedMessage')
+    return
+  }
+
+  if (!form.value.email) {
+    error.value = t('auth.invalidEmail')
+    return
+  }
+
+  // Validate email format
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailRegex.test(form.value.email)) {
+    error.value = t('auth.invalidEmail')
+    return
+  }
+
+  // Check Turnstile if enabled
+  if (turnstileEnabled.value && !turnstileToken.value) {
+    error.value = t('auth.turnstileRequired')
+    return
+  }
+
+  // Show confirmation modal
+  showEmailConfirmModal.value = true
+}
+
+// Confirm and send verification code
+function confirmSendCode(): void {
+  showEmailConfirmModal.value = false
+  sendVerificationCode()
+}
+
+// 加载系统配置
+onMounted(async () => {
+  try {
+    const config = await api.systemConfig.getPublic()
+    registrationEnabled.value = config.registrationEnabled ?? true
+    requireInviteCode.value = config.requireInviteCode
+    turnstileEnabled.value = config.turnstileEnabled || false
+    turnstileSiteKey.value = config.turnstileSiteKey || ''
+    emailVerificationEnabled.value = config.emailVerificationEnabled || false
+    emailDomainWhitelistEnabled.value = config.emailDomainWhitelistEnabled || false
+    allowedEmailDomains.value = config.allowedEmailDomains || []
+    // 设置默认选中的域名
+    if (allowedEmailDomains.value.length > 0) {
+      selectedEmailDomain.value = allowedEmailDomains.value[0]
+    }
+  } catch {
+    // 默认需要邀请码
+    requireInviteCode.value = true
+  } finally {
+    configLoading.value = false
+  }
+})
+
+// Send verification code (called after confirmation)
+async function sendVerificationCode(): Promise<void> {
+  if (!registrationEnabled.value) {
+    error.value = t('auth.registrationClosedMessage')
+    return
+  }
+
+  sendingCode.value = true
+  error.value = ''
+
+  try {
+    await api.auth.sendVerificationCode(
+      form.value.email,
+      turnstileEnabled.value ? turnstileToken.value : undefined
+    )
+    codeSent.value = true
+    // Start countdown
+    codeCountdown.value = 60
+    countdownTimer = setInterval(() => {
+      codeCountdown.value--
+      if (codeCountdown.value <= 0) {
+        if (countdownTimer) {
+          clearInterval(countdownTimer)
+          countdownTimer = null
+        }
+      }
+    }, 1000)
+    // Reset turnstile after successful send (token can only be used once)
+    if (turnstileRef.value) {
+      turnstileRef.value.reset?.()
+    }
+    turnstileToken.value = ''
+  } catch (err: any) {
+    error.value = translateError(err)
+    // Reset turnstile if failed
+    if (turnstileRef.value) {
+      turnstileRef.value.reset?.()
+    }
+    turnstileToken.value = ''
+  } finally {
+    sendingCode.value = false
+  }
+}
+
+async function handleRegister(): Promise<void> {
+  if (!registrationEnabled.value) {
+    error.value = t('auth.registrationClosedMessage')
+    return
+  }
+
+  if (!form.value.username || !form.value.password || !form.value.email) {
+    error.value = t('auth.fillAllRequired')
+    return
+  }
+
+  // 如果需要邀请码但未填写
+  if (requireInviteCode.value && !form.value.inviteCode) {
+    error.value = t('auth.fillAllRequired')
+    return
+  }
+
+  // 如果需要邮件验证码但未填写
+  if (emailVerificationEnabled.value && !form.value.emailCode) {
+    error.value = t('auth.emailCodeRequired')
+    return
+  }
+
+  // 验证用户名（防止危险字符）
+  const fieldName = t('auth.username')
+  const usernameValidation = validateIdentifier(form.value.username, fieldName, 3, 32)
+  if (!usernameValidation.valid) {
+    error.value = usernameValidation.message || t('auth.fillAllRequired')
+    return
+  }
+
+  // 验证邮箱格式
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailRegex.test(form.value.email)) {
+    error.value = t('auth.invalidEmail')
+    return
+  }
+
+  // 检查邮箱是否包含危险字符
+  const emailWithoutAllowed = form.value.email.replace(/@/g, '').replace(/\./g, '')
+  if (containsDangerousChars(emailWithoutAllowed)) {
+    error.value = t('auth.emailContainsIllegal')
+    return
+  }
+
+  if (form.value.password !== form.value.confirmPassword) {
+    error.value = t('auth.passwordMismatch')
+    return
+  }
+
+  if (form.value.password.length < 8) {
+    error.value = t('auth.passwordTooShort')
+    return
+  }
+
+  // 密码复杂度检查
+  if (!/[A-Z]/.test(form.value.password)) {
+    error.value = t('auth.passwordNeedsUppercase')
+    return
+  }
+  if (!/[a-z]/.test(form.value.password)) {
+    error.value = t('auth.passwordNeedsLowercase')
+    return
+  }
+  if (!/[0-9]/.test(form.value.password)) {
+    error.value = t('auth.passwordNeedsNumber')
+    return
+  }
+
+  // 检查 Turnstile 验证
+  if (turnstileEnabled.value && !turnstileToken.value) {
+    error.value = t('auth.turnstileRequired')
+    return
+  }
+
+  // 检查是否同意服务条款
+  if (!agreedToTerms.value) {
+    error.value = t('auth.tos.mustAgree')
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+
+  try {
+    await authStore.register({
+      username: form.value.username,
+      email: form.value.email,
+      password: form.value.password,
+      inviteCode: form.value.inviteCode,
+      turnstileToken: turnstileEnabled.value ? turnstileToken.value : undefined,
+      emailCode: emailVerificationEnabled.value ? form.value.emailCode : undefined
+    })
+    success.value = true
+    // Clean up countdown timer
+    if (countdownTimer) {
+      clearInterval(countdownTimer)
+      countdownTimer = null
+    }
+    // 注册成功后自动登录并跳转到后台
+    // 管理员跳转到用户管理页面，普通用户跳转到 dashboard
+    // 优化：减少延迟时间从 1.5 秒到 0.5 秒
+    const targetRoute = authStore.isAdmin ? '/admin/users' : '/'
+    setTimeout(() => router.push(targetRoute), 500)
+  } catch (err: any) {
+    error.value = translateError(err)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div 
+    class="min-h-screen flex items-center justify-center p-4"
+    :class="themeStore.isDark ? 'bg-[#0a0a0a]' : 'bg-gray-50'"
+  >
+    <div class="w-full max-w-sm">
+      <!-- Logo -->
+      <div class="text-center mb-8">
+        <img
+          :src="brand.brandLogoUrl"
+          :alt="brand.brandName"
+          class="w-16 h-16 mx-auto mb-2 rounded-xl"
+        />
+        <h2 
+          class="text-lg font-semibold mb-1"
+          :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'"
+        >
+          {{ brand.brandName }}
+        </h2>
+        <p 
+          class="text-sm"
+          :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-600'"
+        >
+          {{ $t('auth.createAccount') }}
+        </p>
+      </div>
+
+      <!-- 注册成功 -->
+      <div v-if="success" class="card p-6 text-center">
+        <svg class="w-12 h-12 mx-auto mb-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <p :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ $t('auth.registerSuccess') }}</p>
+      </div>
+
+      <div v-else-if="configLoading" class="card p-6 text-center">
+        <p :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ $t('common.loading') }}...</p>
+      </div>
+
+      <div v-else-if="!registrationEnabled" class="card p-6 text-center">
+        <svg class="w-12 h-12 mx-auto mb-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m0 3.75h.007v.008H12v-.008z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.34 3.94 1.82 18a1.875 1.875 0 0 0 1.604 2.812h17.152A1.875 1.875 0 0 0 22.18 18L13.66 3.94a1.875 1.875 0 0 0-3.32 0Z" />
+        </svg>
+        <h3 class="text-base font-semibold mb-2" :class="themeStore.isDark ? 'text-gray-100' : 'text-gray-900'">
+          {{ $t('auth.registrationClosedTitle') }}
+        </h3>
+        <p class="text-sm leading-6 mb-5" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+          {{ $t('auth.registrationClosedMessage') }}
+        </p>
+        <button type="button" class="btn-primary w-full" @click="router.push('/login')">
+          {{ $t('auth.backToLogin') }}
+        </button>
+      </div>
+
+      <!-- 注册表单 -->
+      <div v-else class="card p-6">
+        <form class="space-y-4" @submit.prevent="handleRegister">
+          <div v-if="requireInviteCode">
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.inviteCode') }} <span class="text-red-500">*</span>
+            </label>
+            <input v-model="form.inviteCode" type="text" class="input" :placeholder="$t('auth.inviteCodePlaceholder')" />
+          </div>
+
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.username') }} <span class="text-red-500">*</span>
+            </label>
+            <input v-model="form.username" type="text" class="input" :placeholder="$t('auth.usernameHint')" />
+          </div>
+
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.email') }} <span class="text-red-500">*</span>
+            </label>
+            <!-- 邮箱白名单模式：左边输入用户名，右边选择域名 -->
+            <div v-if="emailDomainWhitelistEnabled && allowedEmailDomains.length > 0" class="flex gap-2">
+              <input 
+                v-model="emailUsername" 
+                type="text" 
+                class="input flex-1" 
+                :placeholder="$t('auth.emailUsernamePlaceholder')" 
+              />
+              <div class="flex items-center text-themed-muted">@</div>
+              <select v-model="selectedEmailDomain" class="input w-auto min-w-[140px]">
+                <option v-for="domain in allowedEmailDomains" :key="domain" :value="domain">
+                  {{ domain }}
+                </option>
+              </select>
+            </div>
+            <!-- 普通模式：完整邮箱输入 -->
+            <input v-else v-model="form.email" type="email" class="input" placeholder="your@email.com" />
+          </div>
+
+          <!-- Email Verification Code -->
+          <div v-if="emailVerificationEnabled">
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.emailCode') }} <span class="text-red-500">*</span>
+            </label>
+            <div class="flex gap-2">
+              <input 
+                v-model="form.emailCode" 
+                type="text" 
+                class="input flex-1" 
+                maxlength="6"
+                :placeholder="$t('auth.emailCodePlaceholder')" 
+              />
+              <button
+                type="button"
+                class="btn-secondary whitespace-nowrap px-4"
+                :disabled="sendingCode || codeCountdown > 0 || !form.email || (turnstileEnabled && !turnstileToken)"
+                :title="!form.email ? $t('auth.enterEmailFirst') : (turnstileEnabled && !turnstileToken) ? $t('auth.turnstileRequired') : ''"
+                @click="handleSendCodeClick"
+              >
+                <template v-if="sendingCode">
+                  {{ $t('auth.sendingCode') }}
+                </template>
+                <template v-else-if="codeCountdown > 0">
+                  {{ codeCountdown }}s
+                </template>
+                <template v-else>
+                  {{ $t('auth.sendCode') }}
+                </template>
+              </button>
+            </div>
+            <p 
+              v-if="codeSent" 
+              class="text-xs mt-1"
+              :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'"
+            >
+              {{ $t('auth.codeSentHint') }}
+            </p>
+          </div>
+
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.password') }} <span class="text-red-500">*</span>
+            </label>
+            <input v-model="form.password" type="password" class="input" :placeholder="$t('auth.passwordHint')" />
+          </div>
+
+          <div>
+            <label 
+              class="block text-sm mb-1.5"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.confirmPassword') }} <span class="text-red-500">*</span>
+            </label>
+            <input v-model="form.confirmPassword" type="password" class="input" :placeholder="$t('auth.confirmPasswordPlaceholder')" />
+          </div>
+
+          <!-- Turnstile 验证 -->
+          <TurnstileWidget
+            v-if="turnstileEnabled && turnstileSiteKey"
+            ref="turnstileRef"
+            v-model="turnstileToken"
+            :site-key="turnstileSiteKey"
+            :theme="themeStore.isDark ? 'dark' : 'light'"
+            @expire="onTurnstileExpire"
+          />
+
+          <!-- 服务条款 -->
+          <div class="flex items-start gap-2">
+            <input
+              id="agree-terms"
+              v-model="agreedToTerms"
+              type="checkbox"
+              class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              :class="themeStore.isDark ? 'bg-gray-800 border-gray-600' : ''"
+            />
+            <label 
+              for="agree-terms" 
+              class="text-sm"
+              :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'"
+            >
+              {{ $t('auth.tos.agreePrefix') }}
+              <button
+                type="button"
+                class="text-blue-500 hover:text-blue-400 hover:underline"
+                @click="showTermsModal = true"
+              >
+                {{ $t('auth.tos.termsLink') }}
+              </button>
+            </label>
+          </div>
+
+          <div v-if="error" class="text-sm text-red-500">{{ error }}</div>
+
+          <button 
+            type="submit" 
+            :disabled="loading || (emailVerificationEnabled && !form.emailCode) || !agreedToTerms" 
+            class="btn-primary w-full"
+          >
+            {{ loading ? $t('auth.creatingAccount') : $t('auth.createAccount') }}
+          </button>
+        </form>
+      </div>
+
+      <!-- 服务条款弹窗 -->
+      <TermsOfServiceModal
+        :show="showTermsModal"
+        @close="showTermsModal = false"
+      />
+
+      <!-- 邮箱确认弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showEmailConfirmModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showEmailConfirmModal = false" />
+            <div class="modal-content max-w-sm">
+              <div class="modal-header">
+                <h3 class="modal-title">{{ $t('auth.confirmEmail') }}</h3>
+                <button
+                  type="button"
+                  class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                  @click="showEmailConfirmModal = false"
+                >
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body text-center">
+                <p class="text-sm mb-4" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                  {{ $t('auth.confirmEmailMessage') }}
+                </p>
+                <p class="text-lg font-medium break-all">
+                  <span :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-800'">{{ emailUsername || form.email.split('@')[0] }}</span>
+                  <span class="text-red-500 font-bold">@{{ selectedEmailDomain || form.email.split('@')[1] }}</span>
+                </p>
+              </div>
+              <div class="modal-footer">
+                <button
+                  type="button"
+                  class="btn-secondary"
+                  @click="showEmailConfirmModal = false"
+                >
+                  {{ $t('common.cancel') }}
+                </button>
+                <button
+                  type="button"
+                  class="btn-primary"
+                  @click="confirmSendCode"
+                >
+                  {{ $t('auth.confirmAndSend') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <p class="mt-6 text-center text-sm" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'">
+        {{ $t('auth.hasAccount') }}
+        <RouterLink 
+          to="/login" 
+          class="transition-colors"
+          :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-700 hover:text-gray-900'"
+        >
+          {{ $t('auth.login') }}
+        </RouterLink>
+      </p>
+
+      <!-- 主题切换 -->
+      <button
+        class="fixed bottom-4 right-4 p-2 rounded-lg transition-colors"
+        :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-800' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-200'"
+        @click="themeStore.toggleTheme"
+      >
+        <svg v-if="themeStore.mode === 'dark'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+        <svg v-else-if="themeStore.mode === 'light'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/TerminalView.vue b/client/src/views/TerminalView.vue
new file mode 100644
index 0000000..88f6141
--- /dev/null
+++ b/client/src/views/TerminalView.vue
@@ -0,0 +1,2167 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { SearchAddon } from '@xterm/addon-search'
+import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { WebglAddon } from '@xterm/addon-webgl'
+import { SerializeAddon } from '@xterm/addon-serialize'
+import { ClipboardAddon } from '@xterm/addon-clipboard'
+import { useAuthStore } from '@/stores/auth'
+import { useThemeStore } from '@/stores/theme'
+import { useTerminalStore } from '@/stores/terminal'
+import TerminalSavedCommandsSidebar from '@/components/terminal/TerminalSavedCommandsSidebar.vue'
+import TerminalContextMenu from '@/components/instance/TerminalContextMenu.vue'
+import TerminalAccessoryBar from '@/components/instance/TerminalAccessoryBar.vue'
+import FlagIcon from '@/components/FlagIcon.vue'
+import {
+    buildTerminalWebSocketUrl,
+    createTerminalRuntime,
+    disposeTerminalRuntime,
+    handleTerminalSocketPayload,
+    shouldRetryTerminalClose,
+    TERMINAL_MAX_RECONNECT_ATTEMPTS
+} from '@/lib/terminal-core'
+import api from '@/api'
+import type { InstanceWithDetails } from '@/types/api'
+import '@xterm/xterm/css/xterm.css'
+
+const MAX_TABS = 5  // 集中式终端页面允许更多标签
+
+interface InstanceOption {
+    id: number
+    name: string
+    status: string
+    imageName: string
+    hostCountryCode: string
+    hostName?: string
+    packageName?: string
+}
+
+interface TerminalTab {
+    id: string
+    instanceId: number
+    instanceName: string
+    label: string
+    terminal: Terminal | null
+    fitAddon: FitAddon | null
+    searchAddon: SearchAddon | null
+    unicodeAddon: Unicode11Addon | null
+    webglAddon: WebglAddon | null
+    serializeAddon: SerializeAddon | null
+    clipboardAddon: ClipboardAddon | null
+    ws: WebSocket | null
+    status: 'disconnected' | 'connecting' | 'connected' | 'reconnecting' | 'error'
+    connectionMode: 'exec' | 'console' | null
+    error: string | null
+    container: HTMLElement | null
+    eventsBound: boolean
+    isWebGLEnabled: boolean
+    consoleWarningShown: boolean
+    connectAttempt: number
+}
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+const terminalStore = useTerminalStore()
+
+// 实例列表
+const instances = ref<InstanceOption[]>([])
+const loadingInstances = ref(false)
+
+// 标签管理
+const tabs = ref<TerminalTab[]>([])
+const activeTabId = ref<string>('')
+const containerRefs = ref<Map<string, HTMLElement>>(new Map())
+
+// 实例选择器弹窗
+const showInstanceSelector = ref(false)
+const selectedInstanceId = ref<number | null>(null)
+const instanceSearchQuery = ref('')
+const instancePage = ref(1)
+const instancePageSize = 3
+
+// 过滤后的运行中实例
+const filteredRunningInstances = computed(() => {
+  const query = instanceSearchQuery.value.toLowerCase().trim()
+  if (!query) return runningInstances.value
+  return runningInstances.value.filter(i => 
+    i.name.toLowerCase().includes(query) || 
+    i.imageName.toLowerCase().includes(query)
+  )
+})
+
+const selectedInstance = computed(() => {
+  if (!selectedInstanceId.value) return null
+  return runningInstances.value.find(instance => instance.id === selectedInstanceId.value) || null
+})
+
+// 分页后的实例列表
+const paginatedInstances = computed(() => {
+  const start = (instancePage.value - 1) * instancePageSize
+  return filteredRunningInstances.value.slice(start, start + instancePageSize)
+})
+
+// 总页数
+const instanceTotalPages = computed(() => 
+  Math.ceil(filteredRunningInstances.value.length / instancePageSize) || 1
+)
+
+// 搜索状态
+const searchInputRef = ref<HTMLInputElement | null>(null)
+const showSearch = ref(false)
+const searchText = ref('')
+
+// 帮助弹窗状态
+const showHelp = ref(false)
+
+// 设置弹窗状态
+const showSettings = ref(false)
+const showSavedCommandsMobile = ref(false)
+
+// 右键菜单状态
+const contextMenu = reactive({
+    visible: false,
+    x: 0,
+    y: 0
+})
+
+// 字体大小（从 store 读取，已持久化）
+const fontSize = computed(() => terminalStore.fontSize)
+// 动态计算字体大小选项，确保当前值始终在列表中
+const fontSizeOptions = computed(() => {
+    const baseOptions = [12, 14, 16, 18, 20]
+    const current = fontSize.value
+    // 如果当前值不在基础列表中，添加进去并排序
+    if (!baseOptions.includes(current)) {
+        return [...baseOptions, current].sort((a, b) => a - b)
+    }
+    return baseOptions
+})
+
+// 触控手势状态
+const touchState = reactive({
+    initialDistance: 0,
+    initialFontSize: 14,
+    isZooming: false
+})
+
+// 移动端检测（用于禁用 WebGL 和显示快捷工具栏）
+// 综合检测：UA + 触摸能力 + 屏幕宽度
+const isMobileDevice = (() => {
+    const ua = navigator.userAgent
+    // 传统移动端 UA 检测
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
+        return true
+    }
+    // iPadOS 桌面模式检测：UA 显示为 Mac，但支持触摸
+    if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) {
+        return true
+    }
+    // 小屏幕 + 触摸能力 = 移动设备（覆盖 Windows 平板等情况）
+    if (navigator.maxTouchPoints > 0 && window.innerWidth <= 1024) {
+        return true
+    }
+    // 纯小屏幕检测（如开发者工具模拟移动端）
+    if (window.innerWidth <= 768) {
+        return true
+    }
+    return false
+})()
+
+// 网络延迟检测
+const networkLatency = ref<Map<string, number>>(new Map())
+
+// 链接预览 tooltip
+const linkTooltip = reactive({
+    visible: false,
+    x: 0,
+    y: 0,
+    url: ''
+})
+
+// Cloud-init 状态检查（每个标签独立）
+const cloudInitStatus = ref<Map<string, 'idle' | 'checking' | 'not_ready' | 'ready' | 'skipped'>>(new Map())
+const cloudInitChecking = ref<Map<string, boolean>>(new Map())
+
+// 重连配置（更激进的保活策略）
+const reconnectAttempts = ref<Map<string, number>>(new Map())
+const reconnectTimers = ref<Map<string, ReturnType<typeof setTimeout>>>(new Map())
+
+// 计算属性
+const activeTab = computed(() => tabs.value.find(t => t.id === activeTabId.value))
+const runningInstances = computed(() => instances.value.filter(i => i.status.toLowerCase() === 'running'))
+
+const statusText = computed(() => {
+    const tab = activeTab.value
+    if (!tab) return ''
+    switch (tab.status) {
+        case 'connecting': return t('terminal.connecting')
+        case 'connected': return t('terminal.connected')
+        case 'reconnecting': return t('terminal.reconnecting')
+        case 'disconnected': return t('terminal.disconnected')
+        case 'error': return tab.error || t('terminal.connectionFailed')
+        default: return ''
+    }
+})
+
+// 加载用户实例列表
+async function loadInstances() {
+    loadingInstances.value = true
+    try {
+        const response = await api.instances.list({ limit: 100 })
+        const data = response as { instances?: Array<InstanceWithDetails & { imageName?: string; hostCountryCode?: string }>; total?: number }
+        instances.value = (data.instances || []).map((i) => ({
+            id: i.id,
+            name: i.name || `${t('instance.title')} #${i.id}`,
+            status: i.status,
+            imageName: i.imageName || i.image || '',
+            hostCountryCode: i.hostCountryCode || 'us',
+            hostName: i.host?.name,
+            packageName: i.package?.name
+        }))
+    } catch (err) {
+        console.error('Failed to load instances:', err)
+    } finally {
+        loadingInstances.value = false
+    }
+}
+
+// 生成唯一标签 ID
+function generateTabId(): string {
+    return `tab_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+}
+
+// 生成酷炫的 Incudal 欢迎信息
+function printWelcomeBanner(terminal: Terminal, instanceName: string) {
+    const banner = [
+        '',
+        '\x1b[1;38;5;39m  ◆\x1b[38;5;44m INCUDAL\x1b[0m',
+        '',
+        '\x1b[38;5;245m  ─────────────────────\x1b[0m',
+        `\x1b[38;5;250m  ${instanceName}\x1b[0m`,
+        '\x1b[38;5;245m  ─────────────────────\x1b[0m',
+        '',
+    ]
+    banner.forEach(line => terminal.writeln(line))
+    
+    // 移动端提示使用英文键盘
+    if (isMobileDevice) {
+        terminal.writeln(`\x1b[38;5;214m  ⚠ ${t('terminal.mobileKeyboardHint')}\x1b[0m`)
+        terminal.writeln('')
+    }
+}
+
+// 重连时的提示信息
+function printReconnectMessage(terminal: Terminal) {
+    terminal.write('\r\n\r\n\x1b[38;5;245m─── \x1b[38;5;214mReconnecting...\x1b[38;5;245m ───\x1b[0m\r\n\r\n')
+}
+
+function getConnectionModeLabel(mode: 'exec' | 'console' | null | undefined): string {
+    if (mode === 'console') return t('terminal.modeConsole')
+    if (mode === 'exec') return t('terminal.modeExec')
+    return t('terminal.modeUnknown')
+}
+
+function maybePrintConsoleFallbackWarning(tab: TerminalTab) {
+    if (!tab.terminal || tab.connectionMode !== 'console' || tab.consoleWarningShown) return
+
+    tab.terminal.writeln('')
+    tab.terminal.writeln(`\x1b[33m⚠ ${t('terminal.consoleFallback')}\x1b[0m`)
+    tab.terminal.writeln(`\x1b[90m${t('terminal.consoleFallbackHint')}\x1b[0m`)
+    tab.terminal.writeln('')
+    tab.consoleWarningShown = true
+}
+
+// 打开实例选择器
+function openInstanceSelector() {
+    if (tabs.value.length >= MAX_TABS) return
+    selectedInstanceId.value = null
+    instanceSearchQuery.value = ''
+    instancePage.value = 1
+    showInstanceSelector.value = true
+}
+
+// 实例搜索时重置分页
+function handleInstanceSearch(query: string) {
+    instanceSearchQuery.value = query
+    instancePage.value = 1
+    // 如果当前选中的实例不在过滤结果中，清除选择
+    if (selectedInstanceId.value && !filteredRunningInstances.value.find(i => i.id === selectedInstanceId.value)) {
+        selectedInstanceId.value = null
+    }
+}
+
+// 确认添加实例终端
+function confirmAddInstance() {
+    if (!selectedInstanceId.value) return
+    const instance = instances.value.find(i => i.id === selectedInstanceId.value)
+    if (!instance) return
+    
+    showInstanceSelector.value = false
+    addInstanceTab(instance.id, instance.name)
+}
+
+// 添加实例终端标签
+function addInstanceTab(instanceId: number, instanceName: string) {
+    if (tabs.value.length >= MAX_TABS) return
+    
+    const id = generateTabId()
+    const tab: TerminalTab = {
+        id,
+        instanceId,
+        instanceName,
+        label: instanceName,
+        terminal: null,
+        fitAddon: null,
+        searchAddon: null,
+        unicodeAddon: null,
+        webglAddon: null,
+        serializeAddon: null,
+        clipboardAddon: null,
+        ws: null,
+        status: 'disconnected',
+        connectionMode: null,
+        error: null,
+        container: null,
+        eventsBound: false,
+        isWebGLEnabled: false,
+        consoleWarningShown: false,
+        connectAttempt: 0
+    }
+    
+    tabs.value.push(tab)
+    activeTabId.value = id
+    
+    nextTick(() => {
+        initTabTerminal(id)
+    })
+}
+
+// 初始化标签的终端
+function initTabTerminal(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    const container = containerRefs.value.get(tabId)
+    if (!container) return
+    
+    tab.container = container
+    
+    const runtime = createTerminalRuntime({
+        container,
+        fontSize: fontSize.value,
+        fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+        theme: terminalStore.currentTheme,
+        isMobileDevice,
+        enableWebgl: false,
+        onBell: () => terminalStore.playBell(),
+        onSelectionCopy: (selection) => {
+            if (terminalStore.autoCopyOnSelect) {
+                navigator.clipboard.writeText(selection).catch(() => {
+                    // ignore
+                })
+            }
+        },
+        onLinkHover: (event, uri) => {
+            if (terminalStore.linkPreview) {
+                linkTooltip.visible = true
+                linkTooltip.url = uri
+                linkTooltip.x = event.clientX + 10
+                linkTooltip.y = event.clientY + 10
+            }
+        },
+        onLinkLeave: () => {
+            linkTooltip.visible = false
+        }
+    })
+
+    tab.terminal = runtime.terminal
+    tab.fitAddon = runtime.fitAddon
+    tab.searchAddon = runtime.searchAddon
+    tab.unicodeAddon = runtime.unicodeAddon
+    tab.webglAddon = runtime.webglAddon
+    tab.serializeAddon = runtime.serializeAddon
+    tab.clipboardAddon = runtime.clipboardAddon
+    tab.isWebGLEnabled = runtime.isWebGLEnabled
+    
+    // 输出欢迎信息
+    printWelcomeBanner(runtime.terminal, tab.instanceName)
+    
+    // 检查 Cloud-init 状态后再连接
+    checkCloudInitAndConnect(tabId)
+}
+
+// 检查 Cloud-init 状态并连接
+async function checkCloudInitAndConnect(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    // 如果已经检查过且结果是 ready 或 skipped，直接连接
+    const status = cloudInitStatus.value.get(tabId)
+    if (status === 'ready' || status === 'skipped') {
+        connectTab(tabId)
+        return
+    }
+    
+    cloudInitStatus.value.set(tabId, 'checking')
+    cloudInitChecking.value.set(tabId, true)
+    
+    try {
+        const result = await api.instances.checkCloudInitStatus(tab.instanceId)
+        if (result.ready) {
+            cloudInitStatus.value.set(tabId, 'ready')
+            connectTab(tabId)
+        } else {
+            cloudInitStatus.value.set(tabId, 'not_ready')
+            // 终端显示提示信息
+            if (tab.terminal) {
+                tab.terminal.writeln('')
+                tab.terminal.writeln('\x1b[33m⚠ ' + t('terminal.cloudInitInProgress') + '\x1b[0m')
+                tab.terminal.writeln('\x1b[90m' + t('terminal.cloudInitInProgressHint') + '\x1b[0m')
+                tab.terminal.writeln('')
+            }
+        }
+    } catch (err) {
+        console.error('[CloudInit] Check failed:', err)
+        // 检查失败时允许继续连接
+        cloudInitStatus.value.set(tabId, 'ready')
+        connectTab(tabId)
+    } finally {
+        cloudInitChecking.value.set(tabId, false)
+    }
+}
+
+// 重新检查 Cloud-init 状态
+async function retryCloudInitCheck(tabId: string) {
+    await checkCloudInitAndConnect(tabId)
+}
+
+// 跳过 Cloud-init 检查并连接
+function skipCloudInitAndConnect(tabId: string) {
+    cloudInitStatus.value.set(tabId, 'skipped')
+    connectTab(tabId)
+}
+
+// 连接标签到终端服务器
+async function connectTab(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    const token = authStore.token
+    if (!token) {
+        tab.status = 'error'
+        tab.error = 'Authentication required'
+        return
+    }
+    
+    if (tab.ws && (tab.ws.readyState === WebSocket.OPEN || tab.ws.readyState === WebSocket.CONNECTING)) {
+        return
+    }
+    
+    tab.status = 'connecting'
+    tab.error = null
+    tab.connectAttempt += 1
+    const connectAttempt = tab.connectAttempt
+    
+    try {
+        const ticketResponse = await api.instances.createTerminalTicket(tab.instanceId)
+        const currentTab = tabs.value.find(t => t.id === tabId)
+        if (!currentTab || currentTab.connectAttempt !== connectAttempt) {
+            return
+        }
+
+        const wsUrl = buildTerminalWebSocketUrl(currentTab.instanceId, ticketResponse.ticket)
+        const ws = new WebSocket(wsUrl)
+        // 使用 arraybuffer 确保二进制数据按顺序处理（避免 Blob 异步导致的乱序）
+        ws.binaryType = 'arraybuffer'
+        currentTab.ws = ws
+        
+        ws.onopen = () => {
+            console.log(`[Terminal Tab ${tabId}] WebSocket connected`)
+        }
+        
+        ws.onmessage = (event) => {
+            handleTerminalSocketPayload(event.data, () => tab.terminal, (message) => {
+                handleControlMessage(tabId, message)
+            })
+        }
+        
+        ws.onerror = () => {
+            currentTab.error = 'Connection error'
+        }
+        
+        ws.onclose = (event) => {
+            if (currentTab.ws !== ws) return
+
+            console.log(`[Terminal Tab ${tabId}] WebSocket closed:`, event.code)
+
+            // 意外断开时自动重连
+            if (shouldRetryTerminalClose(event.code) && (currentTab.status === 'connected' || currentTab.status === 'connecting' || currentTab.status === 'reconnecting')) {
+                const attempts = reconnectAttempts.value.get(tabId) || 0
+                if (attempts < TERMINAL_MAX_RECONNECT_ATTEMPTS) {
+                    reconnectAttempts.value.set(tabId, attempts + 1)
+                    currentTab.status = 'reconnecting'
+                    // 线性退避：1秒, 3秒, 5秒... 最多 15秒
+                    const delay = Math.min(1000 + attempts * 2000, 15000)
+                    console.log(`[Terminal Tab ${tabId}] Auto reconnecting in ${delay}ms (attempt ${attempts + 1}/${TERMINAL_MAX_RECONNECT_ATTEMPTS})`)
+                    const existingTimer = reconnectTimers.value.get(tabId)
+                    if (existingTimer) {
+                        clearTimeout(existingTimer)
+                    }
+                    const timer = setTimeout(() => {
+                        reconnectTimers.value.delete(tabId)
+                        if (currentTab.terminal) {
+                            printReconnectMessage(currentTab.terminal)
+                        }
+                        void connectTab(tabId)
+                    }, delay)
+                    reconnectTimers.value.set(tabId, timer)
+                } else {
+                    currentTab.status = 'error'
+                    currentTab.error = 'Connection lost'
+                    reconnectAttempts.value.delete(tabId)
+                }
+            } else {
+                currentTab.status = 'disconnected'
+            }
+        }
+        
+        // 绑定终端输入
+        if (currentTab.terminal && !currentTab.eventsBound) {
+            currentTab.eventsBound = true
+            
+            currentTab.terminal.onData((data) => {
+                if (currentTab.ws && currentTab.ws.readyState === WebSocket.OPEN) {
+                    try {
+                        currentTab.ws.send(data)
+                    } catch {
+                        // WebSocket may be closed during send, ignore
+                    }
+                }
+            })
+            
+            currentTab.terminal.onResize(({ cols, rows }) => {
+                // 检查标签是否仍然存在，防止在异步操作期间被销毁
+                if (tabs.value.find(t => t.id === tabId)) {
+                    sendResize(tabId, cols, rows)
+                }
+            })
+        }
+    } catch (err) {
+        const currentTab = tabs.value.find(t => t.id === tabId)
+        if (!currentTab || currentTab.connectAttempt !== connectAttempt) {
+            return
+        }
+
+        currentTab.status = 'error'
+        currentTab.error = err instanceof Error ? err.message : 'Failed to connect'
+    }
+}
+
+// 带重连提示的连接函数
+function reconnectTab(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    if (tab.status === 'connecting' || tab.status === 'reconnecting') return
+    
+    if (tab.terminal) {
+        printReconnectMessage(tab.terminal)
+    }
+    
+    void connectTab(tabId)
+}
+
+// 处理控制消息
+function handleControlMessage(tabId: string, message: { type: string; sessionId?: string; message?: string; reason?: string; mode?: 'exec' | 'console' }) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (!tab) return
+    
+    switch (message.type) {
+        case 'connected':
+            tab.status = 'connected'
+            tab.error = null
+            if (message.mode) {
+                tab.connectionMode = message.mode
+                if (message.mode !== 'console') {
+                    tab.consoleWarningShown = false
+                }
+            }
+            // 连接成功，重置重连计数
+            reconnectAttempts.value.delete(tabId)
+            if (tab.terminal && tab.fitAddon) {
+                tab.fitAddon.fit()
+                // 检查终端是否仍然存在，防止在异步操作期间被销毁
+                if (tab.terminal) {
+                    sendResize(tabId, tab.terminal.cols, tab.terminal.rows)
+                }
+            }
+            maybePrintConsoleFallbackWarning(tab)
+            break
+        case 'reconnecting':
+            tab.status = 'reconnecting'
+            tab.error = message.reason || null
+            if (message.mode) {
+                tab.connectionMode = message.mode
+            }
+            break
+        case 'disconnected':
+            tab.status = 'disconnected'
+            tab.error = message.reason || null
+            break
+        case 'error':
+            tab.status = 'error'
+            tab.error = message.message || 'Unknown error'
+            if (tab.terminal) {
+                tab.terminal.write(`\r\n\x1b[31mError: ${message.message}\x1b[0m\r\n`)
+            }
+            break
+    }
+}
+
+// 发送调整大小命令
+function sendResize(tabId: string, cols: number, rows: number) {
+    const tab = tabs.value.find(t => t.id === tabId)
+    if (tab?.ws && tab.ws.readyState === WebSocket.OPEN) {
+        try {
+            tab.ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+        } catch {
+            // WebSocket may be closed during send, ignore
+        }
+    }
+}
+
+// 关闭标签
+function closeTab(tabId: string) {
+    const index = tabs.value.findIndex(t => t.id === tabId)
+    if (index === -1) return
+    
+    const tab = tabs.value[index]
+    
+    // 清理重连定时器
+    const timer = reconnectTimers.value.get(tabId)
+    if (timer) {
+        clearTimeout(timer)
+        reconnectTimers.value.delete(tabId)
+    }
+    reconnectAttempts.value.delete(tabId)
+    
+    // 清理资源（按顺序：WebSocket -> GPU Addons -> Terminal）
+    // 1. 先关闭 WebSocket 连接
+    if (tab.ws) {
+        tab.ws.close(1000, 'Tab closed')
+        tab.ws = null
+    }
+    // 2. 清理终端资源
+    disposeTerminalRuntime(tab)
+    
+    // 移除标签
+    tabs.value.splice(index, 1)
+    containerRefs.value.delete(tabId)
+    
+    // 清理 Cloud-init 状态
+    cloudInitStatus.value.delete(tabId)
+    cloudInitChecking.value.delete(tabId)
+    
+    // 如果关闭的是当前标签，切换到其他标签
+    if (activeTabId.value === tabId && tabs.value.length > 0) {
+        activeTabId.value = tabs.value[Math.min(index, tabs.value.length - 1)].id
+        nextTick(() => {
+            const newTab = activeTab.value
+            if (newTab?.terminal && newTab.fitAddon) {
+                newTab.fitAddon.fit()
+                newTab.terminal.refresh(0, newTab.terminal.rows - 1)
+                newTab.terminal.focus()
+            }
+        })
+    }
+}
+
+// 切换标签
+function switchTab(tabId: string) {
+    if (activeTabId.value === tabId) return
+    activeTabId.value = tabId
+    
+    nextTick(() => {
+        const tab = activeTab.value
+        if (tab?.terminal && tab.fitAddon) {
+            tab.fitAddon.fit()
+            tab.terminal.refresh(0, tab.terminal.rows - 1)
+            tab.terminal.focus()
+        }
+    })
+}
+
+// 清空终端
+function clearTerminal() {
+    const tab = activeTab.value
+    if (tab?.terminal) {
+        tab.terminal.clear()
+    }
+}
+
+// 处理右键菜单
+function handleContextMenu(event: MouseEvent) {
+    event.preventDefault()
+    contextMenu.x = event.clientX
+    contextMenu.y = event.clientY
+    contextMenu.visible = true
+}
+
+function closeContextMenu() {
+    contextMenu.visible = false
+}
+
+// 复制粘贴
+async function handleCopy() {
+    const tab = activeTab.value
+    if (!tab?.terminal) {
+        closeContextMenu()
+        return
+    }
+    
+    const selection = tab.terminal.getSelection()
+    if (!selection) {
+        closeContextMenu()
+        return
+    }
+    
+    try {
+        await navigator.clipboard.writeText(selection)
+    } catch {
+        // 回退方案
+        const textarea = document.createElement('textarea')
+        textarea.value = selection
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy')
+        document.body.removeChild(textarea)
+    }
+    closeContextMenu()
+}
+
+async function handlePaste() {
+    const tab = activeTab.value
+    if (!tab?.ws || tab.ws.readyState !== WebSocket.OPEN) {
+        closeContextMenu()
+        return
+    }
+    
+    try {
+        const text = await navigator.clipboard.readText()
+        if (text) {
+            try {
+                tab.ws.send(text)
+            } catch {
+                // WebSocket may be closed during send, ignore
+            }
+        }
+    } catch {
+        // Clipboard API may fail due to permissions
+    }
+    closeContextMenu()
+}
+
+function sendToActiveTerminal(data: string): boolean {
+    const tab = activeTab.value
+    if (!tab?.ws || tab.ws.readyState !== WebSocket.OPEN) return false
+
+    try {
+        tab.ws.send(data)
+        return true
+    } catch {
+        return false
+    }
+}
+
+// 移动端快捷工具栏 - 发送数据
+function handleAccessorySend(data: string) {
+    sendToActiveTerminal(data)
+}
+
+// 移动端快捷工具栏 - 粘贴（不关闭右键菜单）
+async function handleAccessoryPaste() {
+    const tab = activeTab.value
+    if (!tab?.ws || tab.ws.readyState !== WebSocket.OPEN) return
+    
+    try {
+        const text = await navigator.clipboard.readText()
+        if (text) {
+            try {
+                tab.ws.send(text)
+            } catch {
+                // WebSocket may be closed during send, ignore
+            }
+        }
+    } catch {
+        // Clipboard API may fail due to permissions
+    }
+}
+
+function executeSavedCommand(command: string) {
+    const payload = command.endsWith('\n') || command.endsWith('\r')
+        ? command
+        : `${command}\r`
+    sendToActiveTerminal(payload)
+}
+
+// 移动端快捷工具栏 - 收起键盘
+function handleHideKeyboard() {
+    // 尝试收起虚拟键盘
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur()
+    }
+    // 重新聚焦终端（但不弹出键盘）
+    setTimeout(() => {
+        activeTab.value?.terminal?.focus()
+    }, 100)
+}
+
+function handleSelectAll() {
+    const tab = activeTab.value
+    if (tab?.terminal) {
+        tab.terminal.selectAll()
+    }
+    closeContextMenu()
+}
+
+// 搜索功能
+function openSearch() {
+    showSearch.value = true
+    nextTick(() => searchInputRef.value?.focus())
+}
+
+function closeSearch() {
+    showSearch.value = false
+    searchText.value = ''
+}
+
+function handleSearch() {
+    const tab = activeTab.value
+    if (tab?.searchAddon && searchText.value) {
+        tab.searchAddon.findNext(searchText.value)
+    }
+}
+
+function handleSearchPrevious() {
+    const tab = activeTab.value
+    if (tab?.searchAddon && searchText.value) {
+        tab.searchAddon.findPrevious(searchText.value)
+    }
+}
+
+// 去除 ANSI 转义序列（颜色控制码等）
+// 使用 RegExp 构造函数避免 ESLint 报错
+function stripAnsiSequences(text: string): string {
+    const ansiRegex = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*[a-zA-Z]', 'g')
+    return text.replace(ansiRegex, '')
+}
+
+// 导出终端日志
+function exportTerminalLog() {
+    const tab = activeTab.value
+    if (!tab?.serializeAddon) return
+    
+    try {
+        const raw = tab.serializeAddon.serialize()
+        if (!raw) return
+        
+        // 去除 ANSI 转义序列，避免在记事本中显示为方框
+        const content = stripAnsiSequences(raw)
+        
+        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `terminal-${tab.instanceName}-${Date.now()}.log`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+    } catch (err) {
+        console.error('[Terminal] Failed to export log:', err)
+    }
+}
+
+// 增大字体
+function increaseFontSize() {
+    const newSize = Math.min(fontSize.value + 2, 32)
+    updateFontSize(newSize)
+}
+
+// 减小字体
+function decreaseFontSize() {
+    const newSize = Math.max(fontSize.value - 2, 8)
+    updateFontSize(newSize)
+}
+
+// 重置字体大小
+function resetFontSize() {
+    updateFontSize(14)
+}
+
+// 更新字体大小
+function updateFontSize(size: number) {
+    terminalStore.setFontSize(size)
+    tabs.value.forEach(tab => {
+        if (tab.terminal) {
+            tab.terminal.options.fontSize = size
+            tab.fitAddon?.fit()
+        }
+    })
+}
+
+// 切换终端主题
+function handleThemeChange(event: Event) {
+    const value = (event.target as HTMLSelectElement).value as 'dark' | 'light' | 'highContrast'
+    terminalStore.setTheme(value)
+    // 更新所有终端的主题
+    tabs.value.forEach(tab => {
+        if (tab.terminal) {
+            tab.terminal.options.theme = terminalStore.currentTheme
+        }
+    })
+}
+
+// 键盘快捷键
+function handleKeydown(event: KeyboardEvent) {
+    // Ctrl+Shift+F 搜索
+    if (event.ctrlKey && event.shiftKey && event.key === 'F') {
+        event.preventDefault()
+        if (showSearch.value) {
+            closeSearch()
+        } else {
+            openSearch()
+        }
+        return
+    }
+    // Ctrl+Shift+C 复制
+    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'c') {
+        event.preventDefault()
+        handleCopy()
+        return
+    }
+    // Ctrl+Shift+V 粘贴
+    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'v') {
+        event.preventDefault()
+        handlePaste()
+        return
+    }
+    // Ctrl+= 或 Ctrl++ 增大字体
+    if (event.ctrlKey && (event.key === '=' || event.key === '+')) {
+        event.preventDefault()
+        increaseFontSize()
+        return
+    }
+    // Ctrl+- 减小字体
+    if (event.ctrlKey && event.key === '-') {
+        event.preventDefault()
+        decreaseFontSize()
+        return
+    }
+    // Ctrl+0 重置字体
+    if (event.ctrlKey && event.key === '0') {
+        event.preventDefault()
+        resetFontSize()
+        return
+    }
+    // Ctrl+Shift+S 导出日志
+    if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 's') {
+        event.preventDefault()
+        exportTerminalLog()
+        return
+    }
+    // Escape 关闭搜索
+    if (event.key === 'Escape' && showSearch.value) {
+        closeSearch()
+    }
+}
+
+// 触控手势处理
+function handleTouchStart(event: TouchEvent) {
+    if (!terminalStore.touchEnabled) return
+    if (event.touches.length === 2) {
+        event.preventDefault()
+        touchState.isZooming = true
+        touchState.initialDistance = getTouchDistance(event.touches)
+        touchState.initialFontSize = terminalStore.fontSize
+    }
+}
+
+function handleTouchMove(event: TouchEvent) {
+    if (!terminalStore.touchEnabled || !touchState.isZooming) return
+    if (event.touches.length === 2) {
+        event.preventDefault()
+        const currentDistance = getTouchDistance(event.touches)
+        // 防止除以零
+        if (touchState.initialDistance <= 0) return
+        const scale = currentDistance / touchState.initialDistance
+        const newSize = Math.round(touchState.initialFontSize * scale)
+        const clampedSize = Math.max(8, Math.min(32, newSize))
+        if (clampedSize !== terminalStore.fontSize) {
+            updateFontSize(clampedSize)
+        }
+    }
+}
+
+function handleTouchEnd() {
+    touchState.isZooming = false
+}
+
+function getTouchDistance(touches: TouchList): number {
+    const dx = touches[0].clientX - touches[1].clientX
+    const dy = touches[0].clientY - touches[1].clientY
+    return Math.sqrt(dx * dx + dy * dy)
+}
+
+// 窗口大小变化
+function handleResize() {
+    const tab = activeTab.value
+    if (tab?.fitAddon) {
+        tab.fitAddon.fit()
+    }
+}
+
+// 设置容器引用
+function setContainerRef(tabId: string, el: HTMLElement | null) {
+    if (el) {
+        containerRefs.value.set(tabId, el)
+    }
+}
+
+// 断开所有连接
+function disconnectAll() {
+    showSavedCommandsMobile.value = false
+    // 清理所有重连定时器
+    reconnectTimers.value.forEach(timer => clearTimeout(timer))
+    reconnectTimers.value.clear()
+    reconnectAttempts.value.clear()
+    
+    tabs.value.forEach(tab => {
+        if (tab.ws) {
+            tab.ws.close(1000, 'User disconnect')
+            tab.ws = null
+        }
+        disposeTerminalRuntime(tab)
+    })
+    tabs.value = []
+    containerRefs.value.clear()
+    
+    // 清理 Cloud-init 状态
+    cloudInitStatus.value.clear()
+    cloudInitChecking.value.clear()
+}
+
+onMounted(() => {
+    loadInstances()
+    window.addEventListener('resize', handleResize)
+    window.addEventListener('keydown', handleKeydown)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    
+    // 移动端：监听 visualViewport 变化（软键盘弹出/收起）
+    if (isMobileDevice && window.visualViewport) {
+        window.visualViewport.addEventListener('resize', handleViewportResize)
+    }
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    window.removeEventListener('keydown', handleKeydown)
+    document.removeEventListener('visibilitychange', handleVisibilityChange)
+    
+    // 移动端：移除 visualViewport 监听
+    if (isMobileDevice && window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', handleViewportResize)
+    }
+    
+    disconnectAll()
+})
+
+// 移动端 visualViewport 变化处理（软键盘弹出/收起）
+function handleViewportResize() {
+    // 延迟执行 fit，等待视口稳定
+    setTimeout(() => {
+        const tab = activeTab.value
+        if (tab?.fitAddon && tab.terminal) {
+            tab.fitAddon.fit()
+            // 刷新终端显示，确保光标正确渲染
+            tab.terminal.refresh(0, tab.terminal.rows - 1)
+        }
+    }, 100)
+}
+
+// 页面可见性变化时自动重连
+function handleVisibilityChange() {
+    if (document.visibilityState === 'visible') {
+        // 用户回来了，自动重连断开的连接
+        tabs.value.forEach(tab => {
+            if (tab.status === 'disconnected' || tab.status === 'error') {
+                console.log(`[Terminal Tab ${tab.id}] Page visible, auto reconnecting...`)
+                reconnectTab(tab.id)
+            }
+        })
+    }
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- 页面头部 -->
+    <div class="page-header flex-col sm:flex-row gap-4 sm:gap-0">
+      <div>
+        <h1 class="page-title text-lg sm:text-xl">{{ t('nav.terminal') }}</h1>
+        <p class="page-description">{{ t('terminalPage.description') }}</p>
+      </div>
+      <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+        <button 
+          v-if="tabs.length < MAX_TABS"
+          class="btn-primary w-full sm:w-auto justify-center"
+          @click="openInstanceSelector"
+        >
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('terminalPage.newConnection') }}
+        </button>
+        <button
+          v-if="isMobileDevice"
+          class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-xl border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-800 transition-colors hover:border-neutral-400 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:border-neutral-500 dark:hover:bg-neutral-800"
+          @click="showSavedCommandsMobile = true"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          {{ t('terminal.savedCommands.title') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 终端窗口 -->
+    <div class="rounded-lg overflow-hidden border border-neutral-800 shadow-2xl">
+      <!-- 工具栏（有标签时才显示） -->
+      <div 
+        v-if="tabs.length > 0"
+        class="flex items-center justify-between h-10 px-3 bg-[#0a0a0a] border-b border-neutral-800"
+      >
+        <!-- 左侧：标签栏 -->
+        <div class="flex items-center gap-1 overflow-x-auto flex-1 min-w-0">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            class="group flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap"
+            :class="activeTabId === tab.id 
+              ? 'bg-neutral-800 text-white' 
+              : 'text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800/50'"
+            @click="switchTab(tab.id)"
+          >
+            <!-- 状态指示点 -->
+            <span
+              class="w-1.5 h-1.5 rounded-full flex-shrink-0"
+              :class="{
+                'bg-emerald-400': tab.status === 'connected',
+                'bg-yellow-400 animate-pulse': tab.status === 'connecting' || tab.status === 'reconnecting',
+                'bg-red-400': tab.status === 'error',
+                'bg-orange-400': tab.status === 'disconnected'
+              }"
+            />
+            <span class="truncate max-w-[120px]">{{ tab.label }}</span>
+            <!-- 关闭按钮 -->
+            <button
+              class="ml-1 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-neutral-700 transition-opacity"
+              @click.stop="closeTab(tab.id)"
+            >
+              <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </button>
+          
+          <!-- 新建标签按钮（工具栏内） -->
+          <button
+            v-if="tabs.length > 0 && tabs.length < MAX_TABS"
+            class="flex items-center justify-center w-6 h-6 text-neutral-500 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+            :title="t('terminalPage.newConnection')"
+            @click="openInstanceSelector"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- 右侧工具 -->
+        <div v-if="tabs.length > 0" class="flex items-center gap-1 sm:gap-1.5 ml-2 flex-shrink-0">
+          <!-- 状态 -->
+          <span
+            v-if="activeTab"
+            class="hidden sm:inline-flex items-center gap-1.5 px-2 py-0.5 text-xs rounded-full"
+            :class="{
+              'bg-emerald-500/10 text-emerald-400': activeTab.status === 'connected',
+              'bg-yellow-500/10 text-yellow-400': activeTab.status === 'connecting' || activeTab.status === 'reconnecting',
+              'bg-red-500/10 text-red-400': activeTab.status === 'error',
+              'bg-orange-500/10 text-orange-400 border border-orange-500/30': activeTab.status === 'disconnected'
+            }"
+          >
+            <!-- 断开状态图标 -->
+            <svg v-if="activeTab.status === 'disconnected'" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3" />
+            </svg>
+            {{ statusText }}
+          </span>
+          <span
+            v-if="activeTab?.connectionMode"
+            class="hidden sm:inline-flex items-center px-2 py-0.5 text-xs rounded-full bg-neutral-800 text-neutral-300"
+          >
+            {{ getConnectionModeLabel(activeTab.connectionMode) }}
+          </span>
+
+          <!-- 字体大小（移动端隐藏，可用手势缩放） -->
+          <select
+            :value="fontSize"
+            class="hidden sm:block h-6 px-1.5 text-xs bg-neutral-900 border border-neutral-700 rounded text-neutral-300 cursor-pointer hover:border-neutral-500 transition-colors"
+            @change="updateFontSize(Number(($event.target as HTMLSelectElement).value))"
+          >
+            <option v-for="size in fontSizeOptions" :key="size" :value="size">{{ size }}px</option>
+          </select>
+
+          <!-- 清空 -->
+          <button
+            class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+            :title="t('terminal.clear')"
+            @click="clearTerminal"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+
+          <!-- 导出日志（移动端隐藏） -->
+          <button
+            class="hidden sm:block p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+            :title="t('terminal.exportLog')"
+            @click="exportTerminalLog"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+          </button>
+
+          <!-- 设置 -->
+          <button
+            class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+            :title="t('terminal.settings')"
+            @click="showSettings = true"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </button>
+
+          <!-- 帮助（移动端隐藏） -->
+          <button
+            class="hidden sm:block p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+            :title="t('terminal.help')"
+            @click="showHelp = true"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </button>
+
+          <!-- 重连 -->
+          <button
+            v-if="activeTab && (activeTab.status === 'disconnected' || activeTab.status === 'error')"
+            class="p-1 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded transition-colors"
+            :title="t('terminal.reconnect')"
+            @click="reconnectTab(activeTabId)"
+          >
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- 终端区域 -->
+      <div class="terminal-area group/terminal-workspace relative flex overflow-hidden">
+        <div class="relative min-w-0 flex-1 overflow-hidden">
+          <!-- 空状态 -->
+          <div
+            v-if="tabs.length === 0"
+            class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]"
+          >
+            <div class="text-center px-6">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-neutral-800 flex items-center justify-center">
+                <svg class="w-8 h-8 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <p class="text-neutral-400 mb-4">{{ t('terminalPage.noConnections') }}</p>
+              <div class="flex flex-col gap-2 sm:flex-row sm:justify-center">
+                <button
+                  class="px-4 py-2 bg-white text-black rounded-lg text-sm font-medium hover:bg-neutral-200 transition-colors"
+                  @click="openInstanceSelector"
+                >
+                  {{ t('terminalPage.newConnection') }}
+                </button>
+                <button
+                  v-if="isMobileDevice"
+                  class="px-4 py-2 rounded-lg text-sm font-medium border border-neutral-700 bg-neutral-900 text-neutral-100 hover:bg-neutral-800 transition-colors"
+                  @click="showSavedCommandsMobile = true"
+                >
+                  {{ t('terminal.savedCommands.title') }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 搜索框 -->
+          <Transition name="fade">
+            <div
+              v-if="showSearch"
+              class="absolute top-3 right-3 z-10 flex items-center gap-1.5 px-3 py-2 bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl"
+            >
+              <input
+                ref="searchInputRef"
+                v-model="searchText"
+                type="text"
+                class="w-44 px-2 py-1 text-sm bg-neutral-800 border border-neutral-600 rounded text-white placeholder-neutral-500 focus:border-neutral-400 focus:outline-none"
+                :placeholder="t('terminal.searchPlaceholder')"
+                @keydown.enter.exact="handleSearch"
+                @keydown.shift.enter.exact="handleSearchPrevious"
+                @keydown.escape="closeSearch"
+              >
+              <button class="p-1.5 text-neutral-400 hover:text-white rounded transition-colors" @click="handleSearchPrevious">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg>
+              </button>
+              <button class="p-1.5 text-neutral-400 hover:text-white rounded transition-colors" @click="handleSearch">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+              </button>
+              <button class="p-1.5 text-neutral-400 hover:text-white rounded transition-colors" @click="closeSearch">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+              </button>
+            </div>
+          </Transition>
+
+          <!-- 终端容器（每个标签一个） -->
+          <div
+            v-for="tab in tabs"
+            :key="tab.id"
+            :ref="(el) => setContainerRef(tab.id, el as HTMLElement)"
+            class="terminal-container bg-[#0a0a0a]"
+            :class="activeTabId === tab.id ? 'visible' : 'invisible absolute'"
+            @contextmenu="handleContextMenu"
+            @touchstart="handleTouchStart"
+            @touchmove="handleTouchMove"
+            @touchend="handleTouchEnd"
+          />
+
+          <!-- 连接中遮罩 -->
+          <Transition name="fade">
+            <div
+              v-if="activeTab && (activeTab.status === 'connecting' || activeTab.status === 'reconnecting')"
+              class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+            >
+              <div class="flex flex-col items-center gap-4">
+                <div class="w-8 h-8 border-2 border-neutral-600 border-t-white rounded-full animate-spin" />
+                <span class="text-sm text-neutral-400">{{ statusText }}</span>
+              </div>
+            </div>
+          </Transition>
+
+          <!-- Cloud-init 检查中遮罩 -->
+          <Transition name="fade">
+            <div
+              v-if="activeTab && cloudInitStatus.get(activeTab.id) === 'checking'"
+              class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+            >
+              <div class="flex flex-col items-center gap-4">
+                <div class="w-8 h-8 border-2 border-neutral-600 border-t-white rounded-full animate-spin" />
+                <span class="text-sm text-neutral-400">{{ t('terminal.cloudInitChecking') }}</span>
+              </div>
+            </div>
+          </Transition>
+
+          <!-- Cloud-init 未完成提示 -->
+          <Transition name="fade">
+            <div
+              v-if="activeTab && cloudInitStatus.get(activeTab.id) === 'not_ready'"
+              class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+            >
+              <div class="flex flex-col items-center gap-4 text-center px-6 max-w-md">
+                <div class="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                  <svg class="w-6 h-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <div>
+                  <p class="text-white font-medium">{{ t('terminal.cloudInitInProgress') }}</p>
+                  <p class="text-sm text-neutral-400 mt-1">{{ t('terminal.cloudInitInProgressHint') }}</p>
+                </div>
+                <div class="flex gap-3">
+                  <button
+                    class="px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-neutral-200 transition-colors"
+                    :disabled="cloudInitChecking.get(activeTab.id)"
+                    @click="retryCloudInitCheck(activeTab.id)"
+                  >
+                    <span v-if="cloudInitChecking.get(activeTab.id)" class="flex items-center gap-2">
+                      <div class="w-3 h-3 border border-black border-t-transparent rounded-full animate-spin" />
+                      {{ t('terminal.cloudInitChecking') }}
+                    </span>
+                    <span v-else>{{ t('terminal.cloudInitRetry') }}</span>
+                  </button>
+                  <button
+                    class="px-4 py-2 text-sm font-medium bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 transition-colors"
+                    @click="skipCloudInitAndConnect(activeTab.id)"
+                  >
+                    {{ t('terminal.cloudInitSkip') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </Transition>
+
+          <!-- 错误提示 -->
+          <Transition name="fade">
+            <div
+              v-if="activeTab && activeTab.status === 'error'"
+              class="absolute inset-0 flex items-center justify-center bg-[#0a0a0a]/95"
+            >
+              <div class="flex flex-col items-center gap-4 text-center px-6">
+                <div class="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center">
+                  <svg class="w-6 h-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <div>
+                  <p class="text-white font-medium">{{ t('terminal.connectionFailed') }}</p>
+                  <p class="text-sm text-neutral-400 mt-1">{{ activeTab.error }}</p>
+                </div>
+                <button
+                  class="px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-neutral-200 transition-colors"
+                  @click="reconnectTab(activeTabId)"
+                >
+                  {{ t('terminal.reconnect') }}
+                </button>
+              </div>
+            </div>
+          </Transition>
+        </div>
+
+        <TerminalSavedCommandsSidebar
+          v-if="!isMobileDevice"
+          :connected="activeTab?.status === 'connected'"
+          @execute="executeSavedCommand"
+        />
+      </div>
+
+      <!-- 移动端快捷工具栏 -->
+      <TerminalAccessoryBar
+        v-if="isMobileDevice && tabs.length > 0"
+        :connected="activeTab?.status === 'connected'"
+        @send="handleAccessorySend"
+        @paste="handleAccessoryPaste"
+        @hide-keyboard="handleHideKeyboard"
+        @saved-commands="showSavedCommandsMobile = true"
+      />
+
+      <TerminalSavedCommandsSidebar
+        v-if="isMobileDevice"
+        mobile
+        :visible="showSavedCommandsMobile"
+        :connected="activeTab?.status === 'connected'"
+        @execute="executeSavedCommand"
+        @close="showSavedCommandsMobile = false"
+      />
+    </div>
+
+    <!-- 右键菜单 -->
+    <TerminalContextMenu
+      :visible="contextMenu.visible"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      :has-selection="!!activeTab?.terminal?.hasSelection()"
+      :can-paste="activeTab?.status === 'connected'"
+      @close="closeContextMenu"
+      @copy="handleCopy"
+      @paste="handlePaste"
+      @select-all="handleSelectAll"
+      @clear="clearTerminal"
+    />
+
+    <!-- 实例选择弹窗 -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div v-if="showInstanceSelector" class="fixed inset-0 z-50 flex items-end justify-center p-2 sm:items-center sm:p-4">
+          <div
+            class="absolute inset-0 backdrop-blur-sm"
+            :class="themeStore.isDark
+              ? 'bg-[radial-gradient(circle_at_top,rgba(34,197,94,0.08),transparent_28%),radial-gradient(circle_at_bottom,rgba(59,130,246,0.12),transparent_32%),rgba(3,7,18,0.74)]'
+              : 'bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.10),transparent_30%),radial-gradient(circle_at_bottom,rgba(16,185,129,0.08),transparent_34%),rgba(244,246,249,0.82)]'"
+            @click="showInstanceSelector = false"
+          />
+          <div
+            class="relative flex w-full max-w-4xl flex-col overflow-hidden rounded-[28px] max-h-[calc(100dvh-1rem)] sm:max-h-[calc(100vh-2rem)]"
+            :class="themeStore.isDark
+              ? 'border border-white/10 bg-[linear-gradient(180deg,rgba(38,38,41,0.98),rgba(26,26,29,0.98))] shadow-[0_28px_90px_rgba(0,0,0,0.58)]'
+              : 'border border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,248,251,0.98))] shadow-[0_28px_90px_rgba(15,23,42,0.18)]'"
+          >
+            <div
+              class="relative overflow-hidden px-4 py-4 sm:p-6"
+              :class="themeStore.isDark
+                ? 'border-b border-white/8 bg-gradient-to-br from-stone-800 via-neutral-800 to-slate-900'
+                : 'border-b border-slate-200/80 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.97)_58%,rgba(241,245,249,0.96)_100%)]'"
+            >
+              <div
+                class="absolute inset-x-0 top-0 h-24"
+                :class="themeStore.isDark
+                  ? 'bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.18),transparent_55%),radial-gradient(circle_at_top_right,rgba(59,130,246,0.14),transparent_50%)]'
+                  : 'bg-[radial-gradient(circle_at_top_left,rgba(148,163,184,0.16),transparent_52%),radial-gradient(circle_at_top_right,rgba(16,185,129,0.10),transparent_48%)]'"
+              />
+              <div class="relative flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+                <div class="space-y-3">
+                  <div
+                    class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-medium"
+                    :class="themeStore.isDark
+                      ? 'border border-emerald-400/25 bg-emerald-300/10 text-emerald-200'
+                      : 'border border-emerald-500/20 bg-emerald-50 text-emerald-700'"
+                  >
+                    <span class="h-2 w-2 rounded-full bg-emerald-400" />
+                    {{ t('terminalPage.runningCount', { count: runningInstances.length }) }}
+                  </div>
+                  <div>
+                    <h3
+                      class="text-xl font-semibold sm:text-2xl"
+                      :class="themeStore.isDark ? 'text-white' : 'text-slate-900'"
+                    >
+                      {{ t('terminalPage.selectInstance') }}
+                    </h3>
+                    <p class="mt-1 text-sm" :class="themeStore.isDark ? 'text-neutral-300/90' : 'text-slate-600'">
+                      {{ t('terminalPage.selectionHint') }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:min-w-[360px]">
+                  <div
+                    class="rounded-2xl p-3 shadow-inner backdrop-blur-sm"
+                    :class="themeStore.isDark
+                      ? 'border border-white/10 bg-white/[0.06] shadow-black/10'
+                      : 'border border-slate-200 bg-white/90 shadow-slate-200/70'"
+                  >
+                    <div class="text-[11px] uppercase tracking-[0.2em]" :class="themeStore.isDark ? 'text-neutral-400' : 'text-slate-500'">
+                      {{ t('terminalPage.selectedInstance') }}
+                    </div>
+                    <div class="mt-2 truncate text-sm font-medium" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">
+                      {{ selectedInstance?.name || t('common.notSet') }}
+                    </div>
+                    <div class="mt-1 truncate text-xs" :class="themeStore.isDark ? 'text-neutral-300/75' : 'text-slate-500'">
+                      {{ selectedInstance?.imageName || t('terminalPage.selectInstance') }}
+                    </div>
+                  </div>
+                  <div
+                    class="rounded-2xl p-3 shadow-inner backdrop-blur-sm"
+                    :class="themeStore.isDark
+                      ? 'border border-white/10 bg-white/[0.06] shadow-black/10'
+                      : 'border border-slate-200 bg-white/90 shadow-slate-200/70'"
+                  >
+                    <div class="text-[11px] uppercase tracking-[0.2em]" :class="themeStore.isDark ? 'text-neutral-400' : 'text-slate-500'">
+                      {{ t('terminalPage.connect') }}
+                    </div>
+                    <div class="mt-2 text-sm font-medium" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">
+                      {{ t('terminalPage.directShell') }}
+                    </div>
+                    <div class="mt-1 text-xs" :class="themeStore.isDark ? 'text-neutral-300/75' : 'text-slate-500'">
+                      {{ t('terminalPage.directShellHint') }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="relative mt-4 sm:mt-5">
+                <svg
+                  class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2"
+                  :class="themeStore.isDark ? 'text-neutral-400' : 'text-slate-400'"
+                  fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <input
+                  type="text"
+                  :value="instanceSearchQuery"
+                  :placeholder="t('terminalPage.searchInstances')"
+                  class="w-full rounded-2xl py-3 pl-11 pr-10 text-sm transition-all focus:outline-none focus:ring-2"
+                  :class="themeStore.isDark
+                    ? 'border border-white/10 bg-white/[0.07] text-white placeholder:text-neutral-400 focus:border-emerald-400/60 focus:ring-emerald-400/20'
+                    : 'border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:border-emerald-500/50 focus:ring-emerald-500/15'"
+                  @input="handleInstanceSearch(($event.target as HTMLInputElement).value)"
+                >
+                <button
+                  v-if="instanceSearchQuery"
+                  class="absolute right-3 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors"
+                  :class="themeStore.isDark
+                    ? 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100'
+                    : 'text-slate-400 hover:bg-slate-100 hover:text-slate-700'"
+                  @click="handleInstanceSearch('')"
+                >
+                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <div class="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr),280px]">
+              <div class="min-h-0 overflow-y-auto px-4 py-4 sm:p-5">
+                <div v-if="loadingInstances" class="flex items-center justify-center py-20">
+                  <div
+                    class="h-8 w-8 rounded-full border-2 border-t-emerald-400 animate-spin"
+                    :class="themeStore.isDark ? 'border-neutral-700' : 'border-slate-300'"
+                  />
+                </div>
+                <div v-else-if="runningInstances.length === 0" class="flex h-full flex-col items-center justify-center text-center px-6 py-20">
+                  <div
+                    class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl"
+                    :class="themeStore.isDark ? 'border border-white/10 bg-white/[0.05]' : 'border border-slate-200 bg-slate-50'"
+                  >
+                    <svg class="h-8 w-8" :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                  <p class="text-base font-medium" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">{{ t('terminalPage.noRunningInstances') }}</p>
+                  <p class="mt-2 text-sm" :class="themeStore.isDark ? 'text-neutral-400' : 'text-slate-500'">{{ t('terminalPage.noRunningInstancesHint') }}</p>
+                </div>
+                <div v-else-if="filteredRunningInstances.length === 0" class="flex h-full flex-col items-center justify-center text-center px-6 py-20">
+                  <div
+                    class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl"
+                    :class="themeStore.isDark ? 'border border-white/10 bg-white/[0.05]' : 'border border-slate-200 bg-slate-50'"
+                  >
+                    <svg class="h-8 w-8" :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                  </div>
+                  <p class="text-base font-medium" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">{{ t('terminalPage.noMatchingInstances') }}</p>
+                  <p class="mt-2 text-sm" :class="themeStore.isDark ? 'text-neutral-400' : 'text-slate-500'">{{ t('terminalPage.noMatchingInstancesHint') }}</p>
+                </div>
+                <div v-else class="space-y-2.5 sm:space-y-3">
+                  <button
+                    v-for="instance in paginatedInstances"
+                    :key="instance.id"
+                    type="button"
+                    class="group w-full rounded-2xl border p-3 sm:p-4 text-left transition-all duration-200 shadow-sm"
+                    :class="selectedInstanceId === instance.id
+                      ? (themeStore.isDark
+                        ? 'border-emerald-400/70 bg-emerald-400/10 ring-1 ring-emerald-400/35'
+                        : 'border-emerald-500/40 bg-emerald-50 ring-1 ring-emerald-500/20')
+                      : (themeStore.isDark
+                        ? 'border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.08]'
+                        : 'border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50')"
+                    @click="selectedInstanceId = instance.id"
+                  >
+                    <div class="flex items-start gap-3 sm:gap-4">
+                      <div class="relative flex-shrink-0">
+                        <div
+                          class="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-xl sm:rounded-2xl"
+                          :class="themeStore.isDark ? 'border border-white/10 bg-white/[0.05]' : 'border border-slate-200 bg-slate-50'"
+                        >
+                          <FlagIcon :code="instance.hostCountryCode" class="h-3.5 w-5 sm:h-4 sm:w-6" />
+                        </div>
+                        <span
+                          class="absolute -bottom-1 -right-1 h-2.5 w-2.5 sm:h-3 sm:w-3 rounded-full border-2 bg-emerald-400"
+                          :class="themeStore.isDark ? 'border-[#1f2024]' : 'border-white'"
+                        />
+                      </div>
+
+                      <div class="min-w-0 flex-1">
+                        <div class="flex items-start justify-between gap-2">
+                          <div class="min-w-0">
+                            <div class="flex items-center gap-1.5 sm:gap-2">
+                              <span class="truncate text-sm font-semibold" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">{{ instance.name }}</span>
+                              <span
+                                class="rounded-full px-1.5 sm:px-2 py-0.5 text-[9px] sm:text-[10px] uppercase tracking-[0.14em] sm:tracking-[0.18em]"
+                                :class="themeStore.isDark
+                                  ? 'border border-white/10 bg-white/[0.04] text-neutral-300'
+                                  : 'border border-slate-200 bg-slate-50 text-slate-500'"
+                              >
+                                #{{ instance.id }}
+                              </span>
+                            </div>
+                            <div class="mt-0.5 sm:mt-1 truncate text-xs sm:text-sm" :class="themeStore.isDark ? 'text-neutral-300/75' : 'text-slate-500'">{{ instance.imageName }}</div>
+                          </div>
+                          <div
+                            class="mt-0.5 flex h-5 w-5 sm:h-6 sm:w-6 flex-shrink-0 items-center justify-center rounded-full border transition-colors"
+                            :class="selectedInstanceId === instance.id
+                              ? (themeStore.isDark
+                                ? 'border-emerald-400 bg-emerald-400 text-[#09130d]'
+                                : 'border-emerald-500 bg-emerald-500 text-white')
+                              : (themeStore.isDark ? 'border-white/15 text-transparent' : 'border-slate-300 text-transparent')"
+                          >
+                            <svg class="h-3 w-3 sm:h-3.5 sm:w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+                            </svg>
+                          </div>
+                        </div>
+
+                        <div class="mt-2 flex flex-wrap gap-1.5 sm:gap-2">
+                          <span
+                            v-if="instance.hostName"
+                            class="rounded-full px-2 py-0.5 sm:px-2.5 sm:py-1 text-[11px] sm:text-xs leading-5"
+                            :class="themeStore.isDark
+                              ? 'border border-sky-400/20 bg-sky-400/10 text-sky-200'
+                              : 'border border-sky-200 bg-sky-50 text-sky-700'"
+                          >
+                            {{ t('terminalPage.host') }}: {{ instance.hostName }}
+                          </span>
+                          <span
+                            v-if="instance.packageName"
+                            class="rounded-full px-2 py-0.5 sm:px-2.5 sm:py-1 text-[11px] sm:text-xs leading-5"
+                            :class="themeStore.isDark
+                              ? 'border border-violet-400/20 bg-violet-400/10 text-violet-200'
+                              : 'border border-violet-200 bg-violet-50 text-violet-700'"
+                          >
+                            {{ t('terminalPage.package') }}: {{ instance.packageName }}
+                          </span>
+                          <span
+                            class="rounded-full px-2 py-0.5 sm:px-2.5 sm:py-1 text-[11px] sm:text-xs leading-5"
+                            :class="themeStore.isDark
+                              ? 'border border-white/10 bg-white/[0.04] text-neutral-300/80'
+                              : 'border border-slate-200 bg-slate-50 text-slate-600'"
+                          >
+                            {{ t('terminalPage.statusRunning') }}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                </div>
+
+                <div
+                  v-if="filteredRunningInstances.length > instancePageSize"
+                  class="mt-4 flex items-center justify-between rounded-2xl border px-3.5 sm:px-4 py-2.5 sm:py-3"
+                  :class="themeStore.isDark ? 'border-white/10 bg-white/[0.04]' : 'border-slate-200 bg-slate-50/90'"
+                >
+                  <span class="text-xs" :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-500'">
+                    {{ (instancePage - 1) * instancePageSize + 1 }}-{{ Math.min(instancePage * instancePageSize, filteredRunningInstances.length) }} / {{ filteredRunningInstances.length }}
+                  </span>
+                  <div class="flex items-center gap-2">
+                    <button
+                      class="rounded-xl border px-3 py-1.5 text-xs transition-colors"
+                      :class="instancePage <= 1
+                        ? (themeStore.isDark
+                          ? 'border-white/5 text-neutral-600 cursor-not-allowed'
+                          : 'border-slate-200 bg-slate-100 text-slate-400 cursor-not-allowed')
+                        : (themeStore.isDark
+                          ? 'border-white/10 text-neutral-200 hover:border-white/20 hover:bg-white/[0.05]'
+                          : 'border-slate-300 bg-white text-slate-700 hover:border-slate-400 hover:bg-slate-100')"
+                      :disabled="instancePage <= 1"
+                      @click="instancePage--"
+                    >
+                      {{ t('common.prevPage') }}
+                    </button>
+                    <span class="text-sm" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">{{ instancePage }} / {{ instanceTotalPages }}</span>
+                    <button
+                      class="rounded-xl border px-3 py-1.5 text-xs transition-colors"
+                      :class="instancePage >= instanceTotalPages
+                        ? (themeStore.isDark
+                          ? 'border-white/5 text-neutral-600 cursor-not-allowed'
+                          : 'border-slate-200 bg-slate-100 text-slate-400 cursor-not-allowed')
+                        : (themeStore.isDark
+                          ? 'border-white/10 text-neutral-200 hover:border-white/20 hover:bg-white/[0.05]'
+                          : 'border-slate-300 bg-white text-slate-700 hover:border-slate-400 hover:bg-slate-100')"
+                      :disabled="instancePage >= instanceTotalPages"
+                      @click="instancePage++"
+                    >
+                      {{ t('common.nextPage') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="hidden min-h-0 overflow-y-auto p-5 lg:block"
+                :class="themeStore.isDark ? 'border-l border-white/8 bg-white/[0.03]' : 'border-l border-slate-200 bg-slate-50/80'"
+              >
+                <div
+                  class="rounded-2xl p-4"
+                  :class="themeStore.isDark ? 'border border-white/10 bg-white/[0.05]' : 'border border-slate-200 bg-white'"
+                >
+                  <div class="text-[11px] uppercase tracking-[0.2em]" :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-500'">{{ t('terminalPage.selectedInstance') }}</div>
+                  <template v-if="selectedInstance">
+                    <div class="mt-4 flex items-start gap-3">
+                      <div
+                        class="flex h-11 w-11 items-center justify-center rounded-2xl"
+                        :class="themeStore.isDark ? 'border border-white/10 bg-white/[0.05]' : 'border border-slate-200 bg-slate-50'"
+                      >
+                        <FlagIcon :code="selectedInstance.hostCountryCode" class="h-4 w-6" />
+                      </div>
+                      <div class="min-w-0">
+                        <div class="truncate text-sm font-semibold" :class="themeStore.isDark ? 'text-white' : 'text-slate-900'">{{ selectedInstance.name }}</div>
+                        <div class="mt-1 text-xs" :class="themeStore.isDark ? 'text-neutral-300/75' : 'text-slate-500'">{{ selectedInstance.imageName }}</div>
+                      </div>
+                    </div>
+                    <div class="mt-4 space-y-2 text-sm">
+                      <div class="flex items-center justify-between gap-3">
+                        <span :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-500'">{{ t('terminalPage.host') }}</span>
+                        <span class="truncate text-right" :class="themeStore.isDark ? 'text-neutral-200' : 'text-slate-900'">{{ selectedInstance.hostName || '-' }}</span>
+                      </div>
+                      <div class="flex items-center justify-between gap-3">
+                        <span :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-500'">{{ t('terminalPage.package') }}</span>
+                        <span class="truncate text-right" :class="themeStore.isDark ? 'text-neutral-200' : 'text-slate-900'">{{ selectedInstance.packageName || '-' }}</span>
+                      </div>
+                      <div class="flex items-center justify-between gap-3">
+                        <span :class="themeStore.isDark ? 'text-neutral-500' : 'text-slate-500'">{{ t('terminalPage.instanceId') }}</span>
+                        <span :class="themeStore.isDark ? 'text-neutral-200' : 'text-slate-900'">#{{ selectedInstance.id }}</span>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div
+                      class="mt-4 rounded-2xl border border-dashed px-4 py-10 text-center text-sm"
+                      :class="themeStore.isDark ? 'border-white/10 text-neutral-500' : 'border-slate-200 text-slate-500'"
+                    >
+                      {{ t('terminalPage.selectionHint') }}
+                    </div>
+                  </template>
+                </div>
+
+                <div
+                  class="mt-4 rounded-2xl p-4 text-sm"
+                  :class="themeStore.isDark ? 'border border-white/10 bg-white/[0.04] text-neutral-300/80' : 'border border-slate-200 bg-white text-slate-600'"
+                >
+                  <div class="font-medium" :class="themeStore.isDark ? 'text-neutral-200' : 'text-slate-900'">{{ t('terminalPage.directShell') }}</div>
+                  <p class="mt-2 leading-6">{{ t('terminalPage.directShellHint') }}</p>
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="flex shrink-0 flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5"
+              :class="themeStore.isDark
+                ? 'border-t border-white/8 bg-[linear-gradient(180deg,rgba(29,29,32,0.96),rgba(20,20,23,0.98))]'
+                : 'border-t border-slate-200 bg-[linear-gradient(180deg,rgba(250,250,251,0.98),rgba(244,246,249,0.98))]'"
+            >
+              <div class="text-xs" :class="themeStore.isDark ? 'text-neutral-400' : 'text-slate-500'">
+                {{ t('terminalPage.runningCount', { count: filteredRunningInstances.length }) }}
+              </div>
+              <div class="flex gap-3 sm:justify-end">
+                <button
+                  class="flex-1 rounded-xl border px-4 py-2 text-sm font-medium transition-colors sm:flex-none"
+                  :class="themeStore.isDark
+                    ? 'border-white/12 bg-white/[0.04] text-neutral-100 hover:border-white/20 hover:bg-white/[0.08]'
+                    : 'border-slate-300 bg-white text-slate-700 hover:border-slate-400 hover:bg-slate-50'"
+                  @click="showInstanceSelector = false"
+                >
+                  {{ t('common.cancel') }}
+                </button>
+                <button
+                  class="flex-1 rounded-xl px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 sm:flex-none"
+                  :class="themeStore.isDark
+                    ? 'bg-white text-neutral-900 hover:bg-neutral-100'
+                    : 'bg-slate-900 text-white hover:bg-slate-800'"
+                  :disabled="!selectedInstanceId"
+                  @click="confirmAddInstance"
+                >
+                  {{ t('terminalPage.connect') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 帮助弹窗 -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="showHelp"
+          class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          @click.self="showHelp = false"
+        >
+          <div class="bg-themed border border-themed rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-themed">{{ t('terminal.helpTitle') }}</h3>
+              <button
+                class="p-1 text-themed-muted hover:text-themed rounded transition-colors"
+                @click="showHelp = false"
+              >
+                <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="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- 快捷键 -->
+            <div class="mb-4">
+              <h4 class="text-sm font-medium text-themed mb-2">{{ t('terminal.helpShortcuts') }}</h4>
+              <div class="space-y-1.5 text-sm">
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutSearch') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl+Shift+F</kbd></div>
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutCopy') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl+Shift+C</kbd></div>
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutPaste') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl+Shift+V</kbd></div>
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutFontIncrease') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl++</kbd></div>
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutFontDecrease') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl+-</kbd></div>
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutFontReset') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl+0</kbd></div>
+                <div class="flex justify-between"><span class="text-themed-muted">{{ t('terminal.helpShortcutExport') }}</span><kbd class="px-1.5 py-0.5 bg-neutral-200 dark:bg-neutral-800 rounded text-themed-muted text-xs">Ctrl+Shift+S</kbd></div>
+              </div>
+            </div>
+
+            <!-- 鼠标操作 -->
+            <div class="mb-4">
+              <h4 class="text-sm font-medium text-themed mb-2">{{ t('terminal.helpMouseOps') }}</h4>
+              <ul class="space-y-1 text-sm text-themed-muted">
+                <li>• {{ t('terminal.helpMouseSelect') }}</li>
+                <li>• {{ t('terminal.helpMouseCopy') }}</li>
+                <li>• {{ t('terminal.helpMouseScroll') }}</li>
+              </ul>
+            </div>
+
+            <!-- 触控操作 -->
+            <div class="mb-4">
+              <h4 class="text-sm font-medium text-themed mb-2">{{ t('terminal.helpTouchOps') }}</h4>
+              <ul class="space-y-1 text-sm text-themed-muted">
+                <li>• {{ t('terminal.helpTouchPinchZoom') }}</li>
+                <li>• {{ t('terminal.helpTouchSwipeScroll') }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 链接预览 Tooltip -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="linkTooltip.visible"
+          class="fixed z-[9999] px-2 py-1 text-xs bg-neutral-800 border border-neutral-600 rounded shadow-lg text-neutral-200 max-w-xs truncate pointer-events-none"
+          :style="{ left: linkTooltip.x + 'px', top: linkTooltip.y + 'px' }"
+        >
+          {{ linkTooltip.url }}
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 设置弹窗 -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="showSettings"
+          class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          @click.self="showSettings = false"
+        >
+          <div class="bg-themed border border-themed rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-themed">{{ t('terminal.settings') }}</h3>
+              <button
+                class="p-1 text-themed-muted hover:text-themed rounded transition-colors"
+                @click="showSettings = false"
+              >
+                <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="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="space-y-4">
+              <!-- 终端铃声 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-themed">{{ t('terminal.settingBell') }}</div>
+                  <div class="text-xs text-themed-muted">{{ t('terminal.settingBellDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.bellEnabled ? 'bg-blue-600' : 'bg-neutral-400 dark:bg-neutral-700'"
+                  @click="terminalStore.toggleBell()"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.bellEnabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 选中自动复制 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-themed">{{ t('terminal.settingAutoCopy') }}</div>
+                  <div class="text-xs text-themed-muted">{{ t('terminal.settingAutoCopyDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.autoCopyOnSelect ? 'bg-blue-600' : 'bg-neutral-400 dark:bg-neutral-700'"
+                  @click="terminalStore.toggleAutoCopy()"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.autoCopyOnSelect ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 链接预览 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-themed">{{ t('terminal.settingLinkPreview') }}</div>
+                  <div class="text-xs text-themed-muted">{{ t('terminal.settingLinkPreviewDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.linkPreview ? 'bg-blue-600' : 'bg-neutral-400 dark:bg-neutral-700'"
+                  @click="terminalStore.linkPreview = !terminalStore.linkPreview"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.linkPreview ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 触控优化 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-themed">{{ t('terminal.settingTouch') }}</div>
+                  <div class="text-xs text-themed-muted">{{ t('terminal.settingTouchDesc') }}</div>
+                </div>
+                <button
+                  class="relative w-11 h-6 rounded-full transition-colors"
+                  :class="terminalStore.touchEnabled ? 'bg-blue-600' : 'bg-neutral-400 dark:bg-neutral-700'"
+                  @click="terminalStore.toggleTouch()"
+                >
+                  <span
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
+                    :class="terminalStore.touchEnabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <!-- 终端主题 -->
+              <div class="flex items-center justify-between">
+                <div>
+                  <div class="text-sm font-medium text-themed">{{ t('terminal.settingTheme') }}</div>
+                  <div class="text-xs text-themed-muted">{{ t('terminal.settingThemeDesc') }}</div>
+                </div>
+                <select
+                  :value="terminalStore.theme"
+                  class="px-2 py-1 text-sm bg-themed border border-themed rounded text-themed"
+                  @change="handleThemeChange($event)"
+                >
+                  <option value="dark">{{ t('terminal.themeDark') }}</option>
+                  <option value="light">{{ t('terminal.themeLight') }}</option>
+                  <option value="highContrast">{{ t('terminal.themeHighContrast') }}</option>
+                </select>
+              </div>
+
+              <!-- 当前状态 -->
+              <div class="pt-4 border-t border-themed">
+                <div class="text-xs text-themed-secondary mb-2">{{ t('terminal.currentStatus') }}</div>
+                <div class="flex items-center gap-4 text-xs text-themed">
+                  <span class="flex items-center gap-1">
+                    <span class="w-2 h-2 rounded-full" :class="activeTab?.isWebGLEnabled ? 'bg-emerald-400' : 'bg-yellow-400'" />
+                    {{ activeTab?.isWebGLEnabled ? 'WebGL' : 'Canvas' }}
+                  </span>
+                  <span v-if="networkLatency.get(activeTabId)">
+                    {{ t('terminal.latency') }}: {{ networkLatency.get(activeTabId) }}ms
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.terminal-area {
+  background-color: #0a0a0a;
+  /* 移动端使用较小的高度，避免超出可视区域 */
+  height: calc(100vh - 200px);
+  height: calc(100dvh - 200px);
+  min-height: 300px;
+}
+
+/* 桌面端使用更大的高度 */
+@media (min-width: 640px) {
+  .terminal-area {
+    height: calc(100vh - 280px);
+    height: calc(100dvh - 280px);
+    min-height: 400px;
+  }
+}
+
+.terminal-container {
+  position: absolute;
+  inset: 0;
+}
+
+.terminal-container.visible {
+  z-index: 1;
+}
+
+.terminal-container.invisible {
+  z-index: 0;
+  pointer-events: none;
+}
+
+:deep(.xterm) {
+  height: 100%;
+  padding: 0;
+}
+
+:deep(.xterm-viewport) {
+  overflow-y: auto !important;
+  background-color: #0a0a0a !important;
+}
+
+:deep(.xterm-screen) {
+  height: 100%;
+}
+
+/* 移动端光标修复 */
+:deep(.xterm-cursor-layer) {
+  /* 确保光标层可见 */
+  z-index: 10;
+}
+
+:deep(.xterm-cursor) {
+  /* 确保光标可见度 */
+  opacity: 1 !important;
+}
+
+/* 移动端触摸优化 */
+@media (hover: none) and (pointer: coarse) {
+  :deep(.xterm) {
+    /* 禁止移动端的默认触摸行为干扰终端 */
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
+  }
+  
+  :deep(.xterm-viewport) {
+    /* 移动端滚动优化 */
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  :deep(.xterm-cursor) {
+    /* 移动端光标加强显示 */
+    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
+  }
+}
+</style>
diff --git a/client/src/views/TicketsView.vue b/client/src/views/TicketsView.vue
new file mode 100644
index 0000000..55f8bbf
--- /dev/null
+++ b/client/src/views/TicketsView.vue
@@ -0,0 +1,1198 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useAuthStore } from '@/stores/auth'
+import { useConfigStore } from '@/stores/config'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import InstanceDisplayIcon from '@/components/InstanceDisplayIcon.vue'
+import InstanceSelector from '@/components/InstanceSelector.vue'
+import TicketImageLightbox from '@/components/tickets/TicketImageLightbox.vue'
+import TicketImageUploader from '@/components/tickets/TicketImageUploader.vue'
+import TicketInstanceOwnerCard from '@/components/tickets/TicketInstanceOwnerCard.vue'
+import type { Ticket, TicketMessage, TicketMessageAttachment, TicketStatus, TicketPriority, TicketCategory, InstanceWithDetails } from '@/types/api'
+
+const { t } = useI18n()
+const toast = useToast()
+const authStore = useAuthStore()
+const configStore = useConfigStore()
+const route = useRoute()
+const router = useRouter()
+
+// Tab state
+type TabType = 'my' | 'host'
+const activeTab = ref<TabType>('my')
+
+// View state
+type ViewMode = 'list' | 'detail' | 'create'
+const viewMode = ref<ViewMode>('list')
+
+// List data
+const tickets = ref<Ticket[]>([])
+const loading = ref(true)
+const refreshing = ref(false)
+const pendingCount = ref({ userTickets: 0, hostTickets: 0, total: 0, isHostOwner: false })
+
+// Pagination
+const page = ref(1)
+const pageSize = ref(100)
+const pageSizeOptions = [10, 20, 50, 100]
+const total = ref(0)
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+
+// Search
+const searchQuery = ref('')
+let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
+// Filters - 默认筛选活跃工单（排除已关闭）
+type StatusFilterType = TicketStatus | 'active' | 'all'
+type HostTicketSourceType = 'all' | 'user' | 'official' | 'hosted'
+const statusFilter = ref<StatusFilterType>('active')
+const hostFilter = ref<number | ''>('')
+const hostTicketSourceFilter = ref<HostTicketSourceType>('all')
+
+// Detail data
+const selectedTicket = ref<Ticket | null>(null)
+const messages = ref<TicketMessage[]>([])
+const messagesLoading = ref(false)
+const isOwner = ref(false)
+const isCreator = ref(false)
+
+// Messages pagination
+const messagesPage = ref(1)
+const messagesPageSize = ref(100)
+const messagesTotal = ref(0)
+const messagesTotalPages = computed(() => Math.ceil(messagesTotal.value / messagesPageSize.value))
+const messagesLoadingMore = ref(false)
+
+// Reply
+const replyContent = ref('')
+const replying = ref(false)
+const replyAttachments = ref<File[]>([])
+
+// Create form
+const createForm = ref({
+  instanceId: null as number | null,
+  subject: '',
+  category: 'general' as TicketCategory,
+  priority: 'normal' as TicketPriority,
+  content: ''
+})
+const creating = ref(false)
+const createAttachments = ref<File[]>([])
+const availableInstances = ref<InstanceWithDetails[]>([])
+const instancesLoading = ref(false)
+const attachmentObjectUrls = ref<Record<number, string>>({})
+const attachmentLoadingIds = ref<Record<number, boolean>>({})
+const lightboxOpen = ref(false)
+const lightboxStartIndex = ref(0)
+
+// 将实例列表转换为 InstanceSelector 组件需要的格式
+const formattedInstances = computed(() => {
+  return availableInstances.value.map(inst => ({
+    id: inst.id,
+    name: inst.name,
+    status: inst.status,
+    instanceType: (inst.instanceType || 'container') as 'vm' | 'container',
+    host: {
+      id: inst.host?.id ?? 0,
+      name: inst.host?.name ?? '',
+      location: inst.host?.location ?? null,
+      countryCode: inst.host?.country_code ?? 'us'
+    }
+  }))
+})
+
+// Statuses and priorities
+const statuses: TicketStatus[] = ['open', 'in_progress', 'resolved', 'closed']
+const priorities: TicketPriority[] = ['low', 'normal', 'high', 'urgent']
+const categories: TicketCategory[] = ['general', 'billing', 'technical', 'abuse']
+
+// Status colors
+const statusColors: Record<TicketStatus, string> = {
+  open: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  in_progress: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+  resolved: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  closed: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
+}
+
+const priorityColors: Record<TicketPriority, string> = {
+  low: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
+  normal: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+  high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+  urgent: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+}
+
+const lightboxImages = computed(() => {
+  return messages.value.flatMap(message =>
+    message.attachments
+      .map(attachment => {
+        const src = attachmentObjectUrls.value[attachment.id]
+        if (!src) return null
+        return {
+          id: attachment.id,
+          src,
+          alt: attachment.originalName || attachment.filename
+        }
+      })
+      .filter((item): item is { id: number; src: string; alt: string } => item !== null)
+  )
+})
+
+function revokeAttachmentUrls(): void {
+  for (const url of Object.values(attachmentObjectUrls.value)) {
+    URL.revokeObjectURL(url)
+  }
+  attachmentObjectUrls.value = {}
+  attachmentLoadingIds.value = {}
+}
+
+async function ensureAttachmentObjectUrl(attachment: TicketMessageAttachment): Promise<void> {
+  if (attachmentObjectUrls.value[attachment.id] || attachmentLoadingIds.value[attachment.id]) {
+    return
+  }
+
+  attachmentLoadingIds.value = {
+    ...attachmentLoadingIds.value,
+    [attachment.id]: true
+  }
+
+  try {
+    const blob = await api.tickets.getAttachmentContent(attachment.id)
+    attachmentObjectUrls.value = {
+      ...attachmentObjectUrls.value,
+      [attachment.id]: URL.createObjectURL(blob)
+    }
+  } catch (error) {
+    console.error('Failed to load ticket attachment:', error)
+  } finally {
+    const nextLoadingIds = { ...attachmentLoadingIds.value }
+    delete nextLoadingIds[attachment.id]
+    attachmentLoadingIds.value = nextLoadingIds
+  }
+}
+
+async function ensureMessageAttachmentUrls(messageList: TicketMessage[]): Promise<void> {
+  await Promise.all(messageList.flatMap(message => message.attachments.map(attachment => ensureAttachmentObjectUrl(attachment))))
+}
+
+function openAttachmentLightbox(attachmentId: number): void {
+  const index = lightboxImages.value.findIndex(image => image.id === attachmentId)
+  if (index === -1) return
+  lightboxStartIndex.value = index
+  lightboxOpen.value = true
+}
+
+onBeforeUnmount(() => {
+  revokeAttachmentUrls()
+})
+
+// 管理员或拥有节点的用户可以查看收到的工单
+const isHostOwner = computed(() => authStore.isAdmin || pendingCount.value.isHostOwner)
+
+const hostEmptyState = computed(() => {
+  if (activeTab.value !== 'host') {
+    return {
+      title: t('tickets.noTickets'),
+      hint: t('tickets.noTicketsHint')
+    }
+  }
+
+  if (!authStore.isAdmin) {
+    return {
+      title: t('tickets.noHostTickets'),
+      hint: t('tickets.noHostTicketsHint')
+    }
+  }
+
+  switch (hostTicketSourceFilter.value) {
+    case 'user':
+      return {
+        title: t('tickets.noUserTickets'),
+        hint: t('tickets.noUserTicketsHint')
+      }
+    case 'official':
+      return {
+        title: t('tickets.noOfficialTickets'),
+        hint: t('tickets.noOfficialTicketsHint')
+      }
+    case 'hosted':
+      return {
+        title: t('tickets.noHostedTickets'),
+        hint: t('tickets.noHostedTicketsHint')
+      }
+    default:
+      return {
+        title: t('tickets.noHostTickets'),
+        hint: t('tickets.noHostTicketsHint')
+      }
+  }
+})
+
+const routeStateReady = ref(false)
+
+function getDefaultTab(): TabType {
+  return authStore.isAdmin ? 'host' : 'my'
+}
+
+function normalizeTab(tab: unknown): TabType {
+  return tab === 'host' && isHostOwner.value ? 'host' : 'my'
+}
+
+function buildTicketsQuery(options: {
+  tab?: TabType
+  ticketId?: number | null
+  compose?: boolean
+}) {
+  const query: Record<string, string> = {}
+  const targetTab = options.tab ?? activeTab.value
+
+  if (targetTab !== getDefaultTab()) {
+    query.tab = targetTab
+  }
+
+  if (options.ticketId) {
+    query.ticket = String(options.ticketId)
+  }
+
+  if (options.compose) {
+    query.compose = '1'
+  }
+
+  return query
+}
+
+function resetDetailState() {
+  selectedTicket.value = null
+  messages.value = []
+  replyContent.value = ''
+  replyAttachments.value = []
+  messagesPage.value = 1
+  messagesTotal.value = 0
+  isOwner.value = false
+  isCreator.value = false
+  lightboxOpen.value = false
+  revokeAttachmentUrls()
+}
+
+function resetCreateForm() {
+  createForm.value = {
+    instanceId: null,
+    subject: '',
+    category: 'general',
+    priority: 'normal',
+    content: ''
+  }
+  createAttachments.value = []
+}
+
+async function navigateToList(replace = false): Promise<void> {
+  const location = {
+    name: 'tickets',
+    query: buildTicketsQuery({ tab: activeTab.value })
+  }
+
+  if (replace) {
+    await router.replace(location)
+  } else {
+    await router.push(location)
+  }
+}
+
+async function openTicketDetail(ticketId: number): Promise<void> {
+  viewMode.value = 'detail'
+  messagesLoading.value = true
+  messagesPage.value = 1
+  revokeAttachmentUrls()
+  messages.value = []
+  selectedTicket.value = selectedTicket.value?.id === ticketId ? selectedTicket.value : ({ id: ticketId } as Ticket)
+
+  try {
+    const [detailRes, messagesRes] = await Promise.all([
+      api.tickets.get(ticketId),
+      api.tickets.getMessages(ticketId, { page: 1, pageSize: messagesPageSize.value })
+    ])
+    selectedTicket.value = detailRes.ticket
+    isOwner.value = detailRes.isOwner
+    isCreator.value = detailRes.isCreator
+    messages.value = messagesRes.messages
+    messagesTotal.value = messagesRes.total
+    await ensureMessageAttachmentUrls(messagesRes.messages)
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+    await navigateToList(true)
+  } finally {
+    messagesLoading.value = false
+  }
+}
+
+async function openCreateView(): Promise<void> {
+  viewMode.value = 'create'
+  resetCreateForm()
+  if (availableInstances.value.length === 0) {
+    await loadAvailableInstances()
+  }
+}
+
+async function syncViewFromRoute(): Promise<void> {
+  const targetTab = normalizeTab(route.query.tab ?? getDefaultTab())
+  if (activeTab.value !== targetTab) {
+    activeTab.value = targetTab
+    await loadTickets(true)
+  }
+
+  const ticketIdParam = route.query.ticket
+  const compose = route.query.compose === '1'
+  const ticketId = typeof ticketIdParam === 'string' ? Number(ticketIdParam) : NaN
+
+  if (Number.isInteger(ticketId) && ticketId > 0) {
+    if (viewMode.value !== 'detail' || selectedTicket.value?.id !== ticketId) {
+      await openTicketDetail(ticketId)
+    }
+    return
+  }
+
+  if (compose && !authStore.isAdmin) {
+    if (viewMode.value !== 'create') {
+      await openCreateView()
+    }
+    return
+  }
+
+  if (viewMode.value !== 'list') {
+    viewMode.value = 'list'
+    resetDetailState()
+  }
+}
+
+// 管理员默认显示"收到的工单"标签，拥有节点的普通用户也显示但默认显示"我的工单"
+onMounted(async () => {
+  await loadPendingCount()
+  activeTab.value = normalizeTab(route.query.tab ?? getDefaultTab())
+  await loadTickets()
+  routeStateReady.value = true
+  await syncViewFromRoute()
+})
+
+watch(
+  () => [route.query.tab, route.query.ticket, route.query.compose],
+  async () => {
+    if (!routeStateReady.value) return
+    await syncViewFromRoute()
+  }
+)
+
+async function loadTickets(silent = false) {
+  if (!silent) loading.value = true
+  else refreshing.value = true
+  
+  try {
+    const params: Record<string, unknown> = {
+      page: page.value,
+      pageSize: pageSize.value
+    }
+    
+    // 状态筛选：'active' 传递给后端处理，'all' 不传 status
+    if (statusFilter.value === 'active') {
+      params.status = 'active'
+    } else if (statusFilter.value !== 'all') {
+      params.status = statusFilter.value
+    }
+    
+    // 搜索
+    if (searchQuery.value.trim()) {
+      params.search = searchQuery.value.trim()
+    }
+    
+    if (hostFilter.value) params.hostId = hostFilter.value
+    if (activeTab.value === 'host' && authStore.isAdmin && hostTicketSourceFilter.value !== 'all') {
+      params.sourceType = hostTicketSourceFilter.value
+    }
+    
+    let response
+    if (activeTab.value === 'my') {
+      response = await api.tickets.list(params as { status?: TicketStatus | 'active'; search?: string; page?: number; pageSize?: number })
+    } else {
+      response = await api.tickets.getMyHostTickets(params as { status?: TicketStatus | 'active'; hostId?: number; search?: string; page?: number; pageSize?: number })
+    }
+    
+    tickets.value = response.tickets
+    total.value = response.total
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+// 搜索防抖处理
+function handleSearchInput() {
+  if (searchDebounceTimer) {
+    clearTimeout(searchDebounceTimer)
+  }
+  searchDebounceTimer = setTimeout(() => {
+    page.value = 1
+    loadTickets(true)
+  }, 300)
+}
+
+// 分页大小变更
+function handlePageSizeChange(newSize: number) {
+  pageSize.value = newSize
+  page.value = 1
+  loadTickets(true)
+}
+
+async function loadPendingCount() {
+  try {
+    pendingCount.value = await api.tickets.getPendingCount()
+  } catch (error) {
+    console.error('Failed to load pending count:', error)
+  }
+}
+
+async function switchTab(tab: TabType) {
+  page.value = 1
+  statusFilter.value = 'active'
+  hostFilter.value = ''
+  hostTicketSourceFilter.value = 'all'
+  searchQuery.value = ''
+  await router.replace({
+    name: 'tickets',
+    query: buildTicketsQuery({ tab })
+  })
+}
+
+function handlePageChange(newPage: number) {
+  page.value = newPage
+  loadTickets(true)
+}
+
+watch([statusFilter, hostFilter, hostTicketSourceFilter], () => {
+  page.value = 1
+  loadTickets(true)
+})
+
+watch(hostTicketSourceFilter, (value) => {
+  if (value === 'user' && hostFilter.value) {
+    hostFilter.value = ''
+  }
+})
+
+// Detail view
+async function viewTicket(ticket: Ticket) {
+  await router.push({
+    name: 'tickets',
+    query: buildTicketsQuery({ tab: activeTab.value, ticketId: ticket.id })
+  })
+}
+
+// Load more messages
+async function loadMoreMessages() {
+  if (!selectedTicket.value || messagesLoadingMore.value) return
+  if (messagesPage.value >= messagesTotalPages.value) return
+  
+  messagesLoadingMore.value = true
+  try {
+    messagesPage.value++
+    const res = await api.tickets.getMessages(selectedTicket.value.id, {
+      page: messagesPage.value,
+      pageSize: messagesPageSize.value
+    })
+    messages.value.push(...res.messages)
+    await ensureMessageAttachmentUrls(res.messages)
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+    messagesPage.value--
+  } finally {
+    messagesLoadingMore.value = false
+  }
+}
+
+async function backToList() {
+  await navigateToList()
+}
+
+// Reply
+async function handleReply() {
+  if (!selectedTicket.value) return
+  if (!replyContent.value.trim() && replyAttachments.value.length === 0) return
+  
+  replying.value = true
+  try {
+    const res = await api.tickets.reply(selectedTicket.value.id, replyContent.value.trim(), replyAttachments.value)
+    messages.value.push(res.data)
+    messagesTotal.value++
+    await ensureMessageAttachmentUrls([res.data])
+    replyContent.value = ''
+    replyAttachments.value = []
+    toast.success(t('tickets.replySuccess'))
+    // Scroll to bottom
+    await nextTick()
+    const container = document.getElementById('messages-container')
+    if (container) container.scrollTop = container.scrollHeight
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    replying.value = false
+  }
+}
+
+// Status update
+async function updateStatus(status: TicketStatus) {
+  if (!selectedTicket.value) return
+  
+  try {
+    await api.tickets.updateStatus(selectedTicket.value.id, status)
+    selectedTicket.value.status = status
+    toast.success(t('tickets.statusUpdated'))
+    loadPendingCount()
+    loadTickets(true)
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  }
+}
+
+// Close ticket
+async function closeTicket() {
+  if (!selectedTicket.value) return
+  if (!confirm(t('tickets.confirmCloseHint'))) return
+  
+  try {
+    await api.tickets.close(selectedTicket.value.id)
+    selectedTicket.value.status = 'closed'
+    toast.success(t('tickets.closeSuccess'))
+    loadPendingCount()
+    loadTickets(true)
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  }
+}
+
+// Delete message (仅管理员)
+async function confirmDeleteMessage(message: TicketMessage) {
+  if (!selectedTicket.value) return
+  if (!confirm(t('tickets.confirmDeleteMessage'))) return
+  
+  try {
+    await api.tickets.deleteMessage(selectedTicket.value.id, message.id)
+    // 从列表中移除已删除的消息
+    messages.value = messages.value.filter(m => m.id !== message.id)
+    messagesTotal.value--
+    toast.success(t('tickets.deleteMessageSuccess'))
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  }
+}
+
+// Create ticket
+function openCreateForm() {
+  if (!configStore.ticketEnabled) return
+  router.push({
+    name: 'tickets',
+    query: buildTicketsQuery({ tab: activeTab.value, compose: true })
+  })
+}
+
+async function loadAvailableInstances() {
+  instancesLoading.value = true
+  try {
+    const response = await api.instances.list({ pageSize: 100 }) as unknown as { instances: InstanceWithDetails[] }
+    availableInstances.value = response.instances || []
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    instancesLoading.value = false
+  }
+}
+
+async function submitCreate() {
+  if (!configStore.ticketEnabled) return
+  if (createForm.value.subject.trim().length < 2) {
+    toast.error(t('tickets.subject') + ' ' + t('common.error'))
+    return
+  }
+  if (createAttachments.value.length === 0 && createForm.value.content.trim().length < 10) {
+    toast.error(t('tickets.content') + ' ' + t('common.error'))
+    return
+  }
+  
+  creating.value = true
+  try {
+    const res = await api.tickets.create({
+      instanceId: createForm.value.instanceId || undefined,
+      subject: createForm.value.subject.trim(),
+      category: createForm.value.category,
+      priority: createForm.value.priority,
+      content: createForm.value.content.trim(),
+      attachments: createAttachments.value
+    })
+    toast.success(t('tickets.createSuccess'))
+    activeTab.value = 'my'
+    await Promise.all([loadTickets(), loadPendingCount()])
+    await router.replace({
+      name: 'tickets',
+      query: buildTicketsQuery({ tab: 'my', ticketId: res.ticket.id })
+    })
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    creating.value = false
+  }
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleString()
+}
+
+function formatDateShort(dateString: string) {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  
+  if (days === 0) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  } else if (days < 7) {
+    return t('inbox.daysAgo', { n: days })
+  } else {
+    return date.toLocaleDateString()
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div class="py-6">
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center gap-3 mb-4 sm:mb-0">
+          <button v-if="viewMode !== 'list'" class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" @click="backToList">
+            <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+            {{ viewMode === 'detail' ? t('tickets.ticketDetails') : viewMode === 'create' ? t('tickets.newTicket') : t('tickets.title') }}
+          </h1>
+        </div>
+        
+        <!-- 管理员不显示"创建工单"按钮 -->
+        <button v-if="viewMode === 'list' && !authStore.isAdmin && configStore.ticketEnabled" class="flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors text-sm font-medium" @click="openCreateForm">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('tickets.createTicket') }}
+        </button>
+      </div>
+      
+      <!-- List View -->
+      <template v-if="viewMode === 'list'">
+        <!-- Tabs -->
+        <div class="flex border-b border-gray-200 dark:border-gray-700 mb-6">
+          <!-- 普通用户显示"我的工单"标签，管理员不显示 -->
+          <button v-if="!authStore.isAdmin" :class="['px-4 py-3 text-sm font-medium border-b-2 transition-colors', activeTab === 'my' ? 'border-black dark:border-white text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300']" @click="switchTab('my')">
+            {{ t('tickets.myTickets') }}
+            <span v-if="pendingCount.userTickets > 0" class="ml-2 px-2 py-0.5 text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">
+              {{ pendingCount.userTickets }}
+            </span>
+          </button>
+          <button v-if="isHostOwner" :class="['px-4 py-3 text-sm font-medium border-b-2 transition-colors', activeTab === 'host' ? 'border-black dark:border-white text-gray-900 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300']" @click="switchTab('host')">
+            {{ t('tickets.hostTickets') }}
+            <span v-if="pendingCount.hostTickets > 0" class="ml-2 px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full">
+              {{ pendingCount.hostTickets }}
+            </span>
+          </button>
+        </div>
+        
+        <!-- Filters & Search Row -->
+        <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-4">
+          <!-- Status Filter - 分段按钮组 -->
+          <div class="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0 flex-shrink-0">
+            <div class="inline-flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <button
+                :class="[
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all whitespace-nowrap',
+                  statusFilter === 'active'
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                ]"
+                @click="statusFilter = 'active'"
+              >
+                {{ t('tickets.activeStatus') }}
+              </button>
+              <button
+                v-for="status in statuses"
+                :key="status"
+                :class="[
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all whitespace-nowrap',
+                  statusFilter === status
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                ]"
+                @click="statusFilter = status"
+              >
+                {{ t(`tickets.status.${status}`) }}
+              </button>
+              <button
+                :class="[
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all whitespace-nowrap',
+                  statusFilter === 'all'
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                ]"
+                @click="statusFilter = 'all'"
+              >
+                {{ t('tickets.allStatus') }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'host' && authStore.isAdmin" class="overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0 flex-shrink-0">
+            <div class="inline-flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <button
+                v-for="sourceType in ['all', 'user', 'official', 'hosted']"
+                :key="sourceType"
+                :class="[
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all whitespace-nowrap',
+                  hostTicketSourceFilter === sourceType
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+                ]"
+                @click="hostTicketSourceFilter = sourceType as HostTicketSourceType"
+              >
+                {{ t(`tickets.sourceFilter.${sourceType}`) }}
+              </button>
+            </div>
+          </div>
+          
+          <!-- Search Box -->
+          <div class="flex-1 max-w-xs">
+            <div class="relative">
+              <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('tickets.searchPlaceholder')"
+                class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent"
+                @input="handleSearchInput"
+              />
+              <button
+                v-if="searchQuery"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                @click="searchQuery = ''; handleSearchInput()"
+              >
+                <svg 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="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Loading -->
+        <template v-if="loading">
+          <SkeletonLoader type="list" :count="5" />
+        </template>
+        
+        <!-- Empty State -->
+        <template v-else-if="tickets.length === 0">
+          <div class="text-center py-16">
+            <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
+              {{ activeTab === 'my' ? t('tickets.noTickets') : hostEmptyState.title }}
+            </h3>
+            <p class="text-gray-500 dark:text-gray-400">
+              {{ activeTab === 'my' ? t('tickets.noTicketsHint') : hostEmptyState.hint }}
+            </p>
+          </div>
+        </template>
+        
+        <!-- Ticket List -->
+        <template v-else>
+          <div class="space-y-3">
+            <div v-for="ticket in tickets" :key="ticket.id" :class="['bg-white dark:bg-gray-800 rounded-xl border p-4 cursor-pointer transition-colors', ticket.needsReply ? 'border-orange-300 dark:border-orange-600 hover:border-orange-400 dark:hover:border-orange-500 ring-1 ring-orange-100 dark:ring-orange-900/30' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600']" @click="viewTicket(ticket)">
+              <div class="flex flex-col sm:flex-row sm:items-center gap-3">
+                <!-- User avatar (for host tab) -->
+                <UserAvatar
+                  v-if="activeTab === 'host' && ticket.user"
+                  :username="ticket.user.username"
+                  :avatar-style="ticket.user.avatarStyle"
+                  :badge-id="ticket.user.avatarBadgeId || null"
+                  :size="32"
+                  class="shrink-0"
+                />
+                
+                <!-- Content -->
+                <div class="flex-1 min-w-0">
+                  <div class="flex flex-wrap items-center gap-2 mb-1">
+                    <!-- 需要回复标记 -->
+                    <span v-if="ticket.needsReply" class="px-2 py-0.5 text-xs font-medium rounded-full bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 flex items-center gap-1">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+                      </svg>
+                      {{ t('tickets.needsReply') }}
+                    </span>
+                    <span :class="['px-2 py-0.5 text-xs font-medium rounded-full', statusColors[ticket.status]]">
+                      {{ t(`tickets.status.${ticket.status}`) }}
+                    </span>
+                    <span :class="['px-2 py-0.5 text-xs rounded-full', priorityColors[ticket.priority]]">
+                      {{ t(`tickets.priority.${ticket.priority}`) }}
+                    </span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">
+                      #{{ ticket.id }}
+                    </span>
+                  </div>
+                  <h3 class="font-medium text-gray-900 dark:text-white truncate">
+                    {{ ticket.subject }}
+                  </h3>
+                  <div class="flex flex-wrap items-center gap-2 mt-1 text-sm text-gray-500 dark:text-gray-400">
+                    <span v-if="activeTab === 'host' && ticket.user">
+                      {{ t('tickets.from') }}: {{ ticket.user.username }}
+                    </span>
+                    <span v-if="ticket.host">
+                      {{ ticket.host.name }}
+                    </span>
+                    <span v-if="ticket.instance" class="inline-flex items-center gap-1.5 text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
+                      <InstanceDisplayIcon
+                        v-if="ticket.instance.iconBadgeId"
+                        :badge-id="ticket.instance.iconBadgeId"
+                        :alt="ticket.instance.name"
+                        :size="18"
+                      />
+                      {{ ticket.instance.name }}
+                    </span>
+                  </div>
+                </div>
+                
+                <!-- Meta -->
+                <div class="flex sm:flex-col items-center sm:items-end gap-2 sm:gap-1 text-sm text-gray-500 dark:text-gray-400">
+                  <span>{{ formatDateShort(ticket.createdAt) }}</span>
+                  <span v-if="ticket.messageCount" class="flex items-center gap-1">
+                    <svg 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                    </svg>
+                    {{ ticket.messageCount }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Pagination -->
+          <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
+            <!-- Page Size Selector -->
+            <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <span>{{ t('tickets.perPage') }}</span>
+              <select
+                :value="pageSize"
+                class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent"
+                @change="handlePageSizeChange(Number(($event.target as HTMLSelectElement).value))"
+              >
+                <option v-for="size in pageSizeOptions" :key="size" :value="size">
+                  {{ size }}
+                </option>
+              </select>
+              <span>{{ t('tickets.totalCount', { count: total }) }}</span>
+            </div>
+            
+            <!-- Page Navigation -->
+            <nav v-if="totalPages > 1" class="flex items-center gap-1">
+              <button :disabled="page === 1" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-700" @click="handlePageChange(page - 1)">
+                <svg 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 19l-7-7 7-7" />
+                </svg>
+              </button>
+              <span class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300">
+                {{ page }} / {{ totalPages }}
+              </span>
+              <button :disabled="page === totalPages" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-700" @click="handlePageChange(page + 1)">
+                <svg 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="M9 5l7 7-7 7" />
+                </svg>
+              </button>
+            </nav>
+          </div>
+        </template>
+      </template>
+      
+      <!-- Detail View -->
+      <template v-else-if="viewMode === 'detail' && selectedTicket">
+        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
+          <!-- Header -->
+          <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex flex-wrap items-center gap-2 mb-2">
+              <span :class="['px-2 py-0.5 text-xs font-medium rounded-full', statusColors[selectedTicket.status]]">
+                {{ t(`tickets.status.${selectedTicket.status}`) }}
+              </span>
+              <span :class="['px-2 py-0.5 text-xs rounded-full', priorityColors[selectedTicket.priority]]">
+                {{ t(`tickets.priority.${selectedTicket.priority}`) }}
+              </span>
+              <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full">
+                {{ t(`tickets.category.${selectedTicket.category}`) }}
+              </span>
+            </div>
+            <div class="flex items-center gap-3 mb-3">
+              <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+                {{ selectedTicket.subject }}
+              </h2>
+              <span class="text-sm text-gray-500 dark:text-gray-400 font-mono">#{{ selectedTicket.id }}</span>
+            </div>
+            <div class="flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
+              <span v-if="selectedTicket.user" class="inline-flex items-center gap-2">
+                <span>{{ t('tickets.from') }}:</span>
+                <UserAvatar
+                  :username="selectedTicket.user.username"
+                  :avatar-style="selectedTicket.user.avatarStyle"
+                  :badge-id="selectedTicket.user.avatarBadgeId || null"
+                  :size="24"
+                />
+                <span class="text-gray-900 dark:text-white">{{ selectedTicket.user.username }}</span>
+              </span>
+              <span v-if="selectedTicket.host">
+                {{ t('tickets.host') }}: <span class="text-gray-900 dark:text-white">{{ selectedTicket.host.name }}</span>
+              </span>
+              <span v-if="selectedTicket.instance" class="inline-flex items-center gap-2">
+                <span>{{ t('tickets.instance') }}:</span>
+                <InstanceDisplayIcon
+                  v-if="selectedTicket.instance.iconBadgeId"
+                  :badge-id="selectedTicket.instance.iconBadgeId"
+                  :alt="selectedTicket.instance.name"
+                  :size="24"
+                />
+                <span class="text-gray-900 dark:text-white">{{ selectedTicket.instance.name }}</span>
+              </span>
+              <span>
+                {{ t('tickets.createdAt') }}: {{ formatDate(selectedTicket.createdAt) }}
+              </span>
+            </div>
+            
+            <TicketInstanceOwnerCard
+              v-if="isOwner && selectedTicket.instance"
+              :instance-summary="selectedTicket.instance"
+            />
+            
+            <!-- Owner Actions -->
+            <div v-if="isOwner && selectedTicket.status !== 'closed'" class="flex flex-wrap gap-2 mt-4">
+              <button v-if="selectedTicket.status === 'open'" class="px-3 py-1.5 text-sm bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors" @click="updateStatus('in_progress')">
+                {{ t('tickets.markInProgress') }}
+              </button>
+              <button v-if="selectedTicket.status !== 'resolved'" class="px-3 py-1.5 text-sm bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-lg hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors" @click="updateStatus('resolved')">
+                {{ t('tickets.markResolved') }}
+              </button>
+              <button class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" @click="closeTicket">
+                {{ t('tickets.close') }}
+              </button>
+            </div>
+            <div v-else-if="isCreator && selectedTicket.status !== 'closed'" class="mt-4">
+              <button class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" @click="closeTicket">
+                {{ t('tickets.close') }}
+              </button>
+            </div>
+          </div>
+          
+          <!-- Messages -->
+          <div id="messages-container" class="max-h-96 overflow-y-auto p-4 sm:p-6 space-y-4">
+            <!-- Load More Button (at top) -->
+            <div v-if="messagesTotalPages > 1 && messagesPage < messagesTotalPages" class="flex justify-center">
+              <button :disabled="messagesLoadingMore" class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 transition-colors" @click="loadMoreMessages">
+                <span v-if="messagesLoadingMore" class="flex items-center gap-2">
+                  <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  {{ t('common.loading') }}
+                </span>
+                <span v-else>{{ t('tickets.loadMoreMessages') }} ({{ messagesTotal - messages.length }} {{ t('tickets.remaining') }})</span>
+              </button>
+            </div>
+            
+            <template v-if="messagesLoading">
+              <SkeletonLoader type="list" :count="3" />
+            </template>
+            <template v-else>
+              <div v-for="message in messages" :key="message.id" :class="['flex gap-3', message.senderId === authStore.user?.id ? 'flex-row-reverse' : '']">
+                <UserAvatar :username="message.sender?.username || ''" :avatar-style="message.sender?.avatarStyle" :badge-id="message.sender?.avatarBadgeId || null" :size="32" />
+                <div :class="['flex-1 max-w-[80%]', message.senderId === authStore.user?.id ? 'text-right' : '']">
+                  <div class="flex items-center gap-2 mb-1" :class="message.senderId === authStore.user?.id ? 'justify-end' : ''">
+                    <span class="font-medium text-sm text-gray-900 dark:text-white">
+                      {{ message.sender?.username }}
+                    </span>
+                    <span v-if="message.isFromOwner" class="text-xs text-blue-600 dark:text-blue-400">
+                      {{ t('tickets.ownerReply') }}
+                    </span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">
+                      {{ formatDate(message.createdAt) }}
+                    </span>
+                    <!-- 管理员删除按钮 -->
+                    <button
+                      v-if="authStore.isAdmin"
+                      class="p-1 text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors"
+                      :title="t('tickets.deleteMessage')"
+                      @click="confirmDeleteMessage(message)"
+                    >
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+                  <div :class="['inline-block max-w-full p-3 rounded-lg text-sm', message.senderId === authStore.user?.id ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-900 dark:text-blue-100' : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white']">
+                    <p v-if="message.content" class="whitespace-pre-wrap text-left">{{ message.content }}</p>
+                    <div v-if="message.attachments.length > 0" :class="['grid gap-2', message.content ? 'mt-3' : '', message.attachments.length === 1 ? 'grid-cols-1 max-w-xs' : 'grid-cols-2']">
+                      <button
+                        v-for="attachment in message.attachments"
+                        :key="attachment.id"
+                        type="button"
+                        class="relative overflow-hidden rounded-lg border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5"
+                        :title="attachment.originalName"
+                        @click="openAttachmentLightbox(attachment.id)"
+                      >
+                        <img
+                          v-if="attachmentObjectUrls[attachment.id]"
+                          :src="attachmentObjectUrls[attachment.id]"
+                          :alt="attachment.originalName"
+                          class="h-32 w-full object-cover"
+                        >
+                        <div v-else class="flex h-32 w-full items-center justify-center text-xs text-gray-500 dark:text-gray-400">
+                          {{ attachmentLoadingIds[attachment.id] ? t('common.loading') : t('tickets.images.loadFailed') }}
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          
+          <!-- Reply Box -->
+          <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700">
+            <template v-if="selectedTicket.status === 'closed'">
+              <p class="text-center text-gray-500 dark:text-gray-400">
+                {{ t('tickets.ticketClosed') }}
+              </p>
+            </template>
+            <template v-else>
+              <div class="flex gap-3">
+                <textarea v-model="replyContent" :placeholder="t('tickets.replyPlaceholder')" rows="3" class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent resize-none" />
+              </div>
+              <div class="mt-4">
+                <TicketImageUploader v-model="replyAttachments" :disabled="replying" />
+              </div>
+              <div class="flex justify-end mt-3">
+                <button :disabled="replying || (!replyContent.trim() && replyAttachments.length === 0)" class="px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm font-medium" @click="handleReply">
+                  {{ replying ? t('common.sending') : t('tickets.reply') }}
+                </button>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+      
+      <!-- Create View -->
+      <template v-else-if="viewMode === 'create'">
+        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 sm:p-6">
+          <form class="space-y-6" @submit.prevent="submitCreate">
+            <!-- Instance -->
+            <div>
+              <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+                {{ t('tickets.selectInstance') }}
+              </label>
+              <InstanceSelector
+                v-model="createForm.instanceId"
+                :instances="formattedInstances"
+                :placeholder="t('tickets.selectInstanceHint')"
+              />
+              <p v-if="availableInstances.length === 0 && !instancesLoading" class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                {{ t('tickets.noInstancesHint') }}
+              </p>
+            </div>
+            
+            <!-- Subject -->
+            <div>
+              <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+                {{ t('tickets.subject') }} *
+              </label>
+              <input v-model="createForm.subject" type="text" required minlength="2" maxlength="200" :placeholder="t('tickets.subjectPlaceholder')" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent" />
+            </div>
+            
+            <!-- Category & Priority -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+                  {{ t('tickets.selectCategory') }}
+                </label>
+                <select v-model="createForm.category" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent">
+                  <option v-for="cat in categories" :key="cat" :value="cat">
+                    {{ t(`tickets.category.${cat}`) }}
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+                  {{ t('tickets.selectPriority') }}
+                </label>
+                <select v-model="createForm.priority" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent">
+                  <option v-for="p in priorities" :key="p" :value="p">
+                    {{ t(`tickets.priority.${p}`) }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            
+            <!-- Content -->
+            <div>
+              <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+                {{ t('tickets.content') }}
+              </label>
+              <textarea v-model="createForm.content" maxlength="5000" rows="6" :placeholder="t('tickets.contentPlaceholder')" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent resize-none" />
+            </div>
+
+            <TicketImageUploader v-model="createAttachments" :disabled="creating" />
+            
+            <!-- 托管实例提示 -->
+            <div class="flex items-start gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800/50">
+              <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-blue-100 dark:bg-blue-900/50">
+                <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-300">
+                  {{ t('tickets.hostedInstanceHintTitle') }}
+                </p>
+                <p class="text-xs mt-0.5 text-blue-700/80 dark:text-blue-400/80">
+                  {{ t('tickets.hostedInstanceHint') }}
+                </p>
+              </div>
+            </div>
+            
+            <!-- Submit -->
+            <div class="flex justify-end gap-3">
+              <button type="button" class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors" @click="backToList">
+                {{ t('common.cancel') }}
+              </button>
+              <button type="submit" :disabled="creating" class="px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm font-medium">
+                {{ creating ? t('common.processing') : t('tickets.createTicket') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </template>
+    </div>
+    <TicketImageLightbox
+      :show="lightboxOpen"
+      :images="lightboxImages"
+      :start-index="lightboxStartIndex"
+      @close="lightboxOpen = false"
+    />
+  </div>
+</template>
diff --git a/client/src/views/TransfersView.vue b/client/src/views/TransfersView.vue
new file mode 100644
index 0000000..ebfa197
--- /dev/null
+++ b/client/src/views/TransfersView.vue
@@ -0,0 +1,703 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import FlagIcon from '@/components/FlagIcon.vue'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+const toast = useToast()
+
+// Tab state
+type TabType = 'sent' | 'received'
+const activeTab = ref<TabType>('sent')
+
+// Data
+interface TransferSnapshot {
+  packageId?: number | null
+  packageName?: string | null
+  hostId?: number | null
+  hostName?: string | null
+  hostLocation?: string | null
+  hostCountryCode?: string | null
+  originalName?: string | null
+  cpu?: number
+  memory?: number
+  disk?: number
+  networkMode?: string | null
+  portMappingsCount?: number
+  snapshotsCount?: number
+  backupsCount?: number
+  ipv4?: string | null
+  ipv6?: string | null
+}
+
+interface Transfer {
+  id: number
+  instanceId: number
+  instanceName: string
+  instanceStatus: string
+  instanceImage: string
+  fromUser: { id: number; username: string; email?: string | null; avatarStyle?: string; avatarBadgeId?: string | null } | null
+  toUser: { id: number; username: string; email?: string | null; avatarStyle?: string; avatarBadgeId?: string | null } | null
+  status: string
+  snapshot: TransferSnapshot | null
+  remark: string | null
+  rejectReason: string | null
+  createdAt: string
+  acceptedAt: string | null
+  rejectedAt: string | null
+  cancelledAt: string | null
+  canPush?: boolean
+}
+
+const transfers = ref<Transfer[]>([])
+const loading = ref(true)      // 首次加载
+const refreshing = ref(false)  // 后台刷新（不显示骨架屏）
+const pendingCount = ref(0)
+
+// Search
+const searchQuery = ref('')
+
+// Pagination
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+
+// Reject modal
+const showRejectModal = ref(false)
+const rejectingTransferId = ref<number | null>(null)
+const rejectReason = ref('')
+const rejectLoading = ref(false)
+
+// Action loading
+const actionLoading = ref<number | null>(null)
+const pushLoading = ref<number | null>(null)
+
+// 配置详情弹窗
+const showConfigModal = ref(false)
+const selectedTransfer = ref<Transfer | null>(null)
+
+// 备注展开状态
+const expandedRemarks = ref<Set<number>>(new Set())
+
+onMounted(async () => {
+  await Promise.all([loadTransfers(), loadPendingCount()])
+})
+
+async function loadTransfers(silent = false) {
+  if (!silent) loading.value = true
+  else refreshing.value = true
+  try {
+    const response = await api.transfers.list(activeTab.value, {
+      page: page.value,
+      pageSize: pageSize.value,
+      search: searchQuery.value.trim() || undefined
+    })
+    transfers.value = response.transfers
+    total.value = response.total
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+async function loadPendingCount() {
+  try {
+    const response = await api.transfers.getPendingCount()
+    pendingCount.value = response.count
+  } catch (error) {
+    console.error('Failed to load pending count:', error)
+  }
+}
+
+async function switchTab(tab: TabType) {
+  activeTab.value = tab
+  page.value = 1
+  // 使用静默刷新，避免 Tab 切换时内容闪烁
+  await loadTransfers(true)
+}
+
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+function handleSearch() {
+  page.value = 1
+  // 清除之前的定时器
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+    searchTimeout = null
+  }
+  // 防抖：延迟300ms执行搜索
+  searchTimeout = setTimeout(() => {
+    loadTransfers(true)
+    searchTimeout = null
+  }, 300)
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  page.value = 1
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+    searchTimeout = null
+  }
+  loadTransfers(true)
+}
+
+function handleSearchEnter() {
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+    searchTimeout = null
+  }
+  page.value = 1
+  loadTransfers(true)
+}
+
+// 监听搜索框变化，自动触发搜索
+watch(searchQuery, () => {
+  handleSearch()
+})
+
+async function handleAccept(transfer: Transfer) {
+  if (!confirm(t('transfer.actions.accept') + '?')) return
+  
+  actionLoading.value = transfer.id
+  try {
+    await api.transfers.accept(transfer.id)
+    toast.success(t('transfer.messages.acceptSuccess'))
+    await Promise.all([loadTransfers(true), loadPendingCount()])
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    actionLoading.value = null
+  }
+}
+
+function openRejectModal(transfer: Transfer) {
+  rejectingTransferId.value = transfer.id
+  rejectReason.value = ''
+  showRejectModal.value = true
+}
+
+async function handleReject() {
+  if (!rejectingTransferId.value) return
+  
+  rejectLoading.value = true
+  try {
+    await api.transfers.reject(rejectingTransferId.value, rejectReason.value || undefined)
+    toast.success(t('transfer.messages.rejectSuccess'))
+    showRejectModal.value = false
+    await Promise.all([loadTransfers(true), loadPendingCount()])
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    rejectLoading.value = false
+  }
+}
+
+async function handleCancel(transfer: Transfer) {
+  if (!confirm(t('transfer.actions.cancel') + '?')) return
+  
+  actionLoading.value = transfer.id
+  try {
+    await api.transfers.cancel(transfer.id)
+    toast.success(t('transfer.messages.cancelSuccess'))
+    await loadTransfers(true)
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    actionLoading.value = null
+  }
+}
+
+async function handlePush(transfer: Transfer) {
+  if (!confirm(t('transfer.actions.push') + '?')) return
+  
+  pushLoading.value = transfer.id
+  try {
+    await api.transfers.push(transfer.id)
+    toast.success(t('transfer.messages.pushSuccess'))
+    await Promise.all([loadTransfers(true), loadPendingCount()])
+  } catch (error: any) {
+    toast.error(error?.message || t('common.error'))
+  } finally {
+    pushLoading.value = null
+  }
+}
+
+function getStatusClass(status: string) {
+  switch (status) {
+    case 'pending': return 'badge-warning'
+    case 'processing': return 'badge-info'
+    case 'accepted': return 'badge-success'
+    case 'rejected': return 'badge-error'
+    case 'cancelled': return 'badge-default'
+    default: return 'badge-default'
+  }
+}
+
+function formatDate(dateStr: string | null) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+function formatMemory(mb: number) {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
+  return `${mb} MB`
+}
+
+function formatDisk(mb: number) {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
+  return `${mb} MB`
+}
+
+// 打开配置详情弹窗
+function openConfigModal(transfer: Transfer) {
+  selectedTransfer.value = transfer
+  showConfigModal.value = true
+}
+
+// 切换备注展开状态
+function toggleRemark(transferId: number) {
+  if (expandedRemarks.value.has(transferId)) {
+    expandedRemarks.value.delete(transferId)
+  } else {
+    expandedRemarks.value.add(transferId)
+  }
+}
+
+// 获取网络模式显示文本
+function getNetworkModeText(mode: string | null | undefined) {
+  if (!mode) return '-'
+  return mode === 'nat' ? 'NAT' : (mode === 'routed' ? t('instance.networkMode.routed') : mode)
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- Header -->
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ $t('transfer.title') }}</h1>
+      </div>
+    </div>
+
+    <!-- Tab Navigation -->
+    <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
+      <div 
+        class="flex gap-1 p-1 rounded-lg w-full sm:w-fit"
+        :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-100'"
+      >
+        <button 
+          :class="[
+            'flex-1 sm:flex-none px-3 sm:px-4 py-2 text-sm font-medium rounded-md transition-colors',
+            activeTab === 'sent' 
+              ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-white text-gray-900 shadow-sm')
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-900')
+          ]"
+          @click="switchTab('sent')"
+        >
+          {{ $t('transfer.sentTab') }}
+        </button>
+        <button 
+          :class="[
+            'relative flex-1 sm:flex-none px-3 sm:px-4 py-2 text-sm font-medium rounded-md transition-colors',
+            activeTab === 'received' 
+              ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-white text-gray-900 shadow-sm')
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-600 hover:text-gray-900')
+          ]"
+          @click="switchTab('received')"
+        >
+          {{ $t('transfer.receivedTab') }}
+          <span 
+            v-if="pendingCount > 0"
+            class="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center text-xs font-bold text-white bg-red-500 rounded-full"
+          >
+            {{ pendingCount > 9 ? '9+' : pendingCount }}
+          </span>
+        </button>
+      </div>
+
+      <!-- Search -->
+      <div class="flex-1 max-w-md w-full sm:w-auto">
+        <div class="relative">
+          <input
+            v-model="searchQuery"
+            type="text"
+            class="input w-full pl-10 pr-10"
+            :placeholder="$t('transfer.searchPlaceholder')"
+            @keyup.enter="handleSearchEnter"
+          />
+          <svg 
+            class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4"
+            :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-500'"
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <button
+            v-if="searchQuery"
+            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            @click="clearSearch"
+          >
+            <svg 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="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading">
+      <SkeletonLoader type="table" />
+    </div>
+
+    <!-- Transfer List -->
+    <div v-else-if="transfers.length > 0" class="card overflow-x-auto">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[900px]">
+          <thead :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+            <tr>
+              <th class="px-4 py-3 text-left text-sm font-medium whitespace-nowrap">{{ $t('transfer.detail.instance') }}</th>
+              <th class="px-4 py-3 text-left text-sm font-medium whitespace-nowrap">
+                {{ activeTab === 'sent' ? $t('transfer.detail.toUser') : $t('transfer.detail.fromUser') }}
+              </th>
+              <th class="px-4 py-3 text-left text-sm font-medium whitespace-nowrap">{{ $t('transfer.detail.snapshot') }}</th>
+              <th class="px-4 py-3 text-left text-sm font-medium whitespace-nowrap">{{ $t('transfer.modal.remark') }}</th>
+              <th class="px-4 py-3 text-left text-sm font-medium whitespace-nowrap">{{ $t('common.status') }}</th>
+              <th class="px-4 py-3 text-left text-sm font-medium whitespace-nowrap">{{ $t('common.createdAt') }}</th>
+              <th class="px-4 py-3 text-right text-sm font-medium whitespace-nowrap">{{ $t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y" :class="themeStore.isDark ? 'divide-gray-800' : 'divide-gray-100'">
+            <tr 
+              v-for="transfer in transfers" 
+              :key="transfer.id"
+              :class="themeStore.isDark ? 'hover:bg-gray-800/50' : 'hover:bg-gray-50'"
+            >
+              <!-- 实例列：名称 + ID -->
+              <td class="px-4 py-3 whitespace-nowrap">
+                <div class="font-medium">{{ transfer.instanceName }}</div>
+                <div class="text-xs font-mono" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-400'">
+                  ID: {{ transfer.instanceId }}
+                </div>
+              </td>
+              <!-- 发起方/接收方 -->
+              <td class="px-4 py-3 whitespace-nowrap">
+                <div class="flex items-center gap-2">
+                  <UserAvatar 
+                    :username="activeTab === 'sent' ? (transfer.toUser?.username || '') : (transfer.fromUser?.username || '')" 
+                    :email="activeTab === 'sent' ? (transfer.toUser?.email || null) : (transfer.fromUser?.email || null)"
+                    :avatar-style="activeTab === 'sent' ? (transfer.toUser?.avatarStyle || 'bigSmile') : (transfer.fromUser?.avatarStyle || 'bigSmile')"
+                    :badge-id="activeTab === 'sent' ? (transfer.toUser?.avatarBadgeId || null) : (transfer.fromUser?.avatarBadgeId || null)"
+                    :size="28"
+                  />
+                  <span>{{ activeTab === 'sent' ? transfer.toUser?.username : transfer.fromUser?.username }}</span>
+                </div>
+              </td>
+              <!-- 转移时配置：可点击查看详情 -->
+              <td class="px-4 py-3 text-sm whitespace-nowrap">
+                <button
+                  v-if="transfer.snapshot"
+                  class="flex items-center gap-2 hover:underline transition-colors"
+                  :class="themeStore.isDark ? 'text-gray-300 hover:text-white' : 'text-gray-700 hover:text-gray-900'"
+                  @click="openConfigModal(transfer)"
+                >
+                  <FlagIcon :code="transfer.snapshot.hostCountryCode || 'us'" size="xs" />
+                  <span>{{ (transfer.snapshot.hostName || '-').toUpperCase() }}</span>
+                  <svg class="w-3.5 h-3.5 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </button>
+                <span v-else class="text-gray-400">-</span>
+              </td>
+              <!-- 备注：可展开 -->
+              <td class="px-4 py-3 text-sm">
+                <template v-if="transfer.remark">
+                  <div v-if="!expandedRemarks.has(transfer.id)" class="flex items-center gap-1">
+                    <span class="text-gray-500">{{ $t('transfer.hasRemark') }}</span>
+                    <button 
+                      class="text-xs hover:underline"
+                      :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'"
+                      @click="toggleRemark(transfer.id)"
+                    >
+                      {{ $t('common.expand') }}
+                    </button>
+                  </div>
+                  <div v-else class="max-w-xs">
+                    <div class="break-words" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">
+                      {{ transfer.remark }}
+                    </div>
+                    <button 
+                      class="text-xs hover:underline mt-1"
+                      :class="themeStore.isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'"
+                      @click="toggleRemark(transfer.id)"
+                    >
+                      {{ $t('common.collapse') }}
+                    </button>
+                  </div>
+                </template>
+                <span v-else class="text-gray-400">-</span>
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap">
+                <span :class="['badge whitespace-nowrap', getStatusClass(transfer.status)]">
+                  {{ $t(`transfer.status.${transfer.status}`) }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">
+                {{ formatDate(transfer.createdAt) }}
+              </td>
+              <td class="px-4 py-3 text-right whitespace-nowrap">
+                <div class="flex items-center justify-end gap-2">
+                  <!-- Sent tab actions -->
+                  <template v-if="activeTab === 'sent'">
+                    <template v-if="transfer.status === 'pending'">
+                      <!-- 直接推送按钮（仅当发起方是宿主机所有者时显示） -->
+                      <button
+                        v-if="transfer.canPush"
+                        class="btn-secondary"
+                        :disabled="pushLoading === transfer.id || actionLoading === transfer.id"
+                        @click="handlePush(transfer)"
+                      >
+                        {{ pushLoading === transfer.id ? $t('common.processing') : $t('transfer.actions.push') }}
+                      </button>
+                      <button
+                        class="btn-ghost text-red-500 hover:text-red-600"
+                        :disabled="actionLoading === transfer.id || pushLoading === transfer.id"
+                        @click="handleCancel(transfer)"
+                      >
+                        {{ $t('transfer.actions.cancel') }}
+                      </button>
+                    </template>
+                    <div v-else-if="transfer.status === 'accepted'" class="text-sm text-gray-500">
+                      {{ $t('transfer.completedAt') }}: {{ formatDate(transfer.acceptedAt) }}
+                    </div>
+                    <div v-else-if="transfer.status === 'rejected'" class="text-sm text-gray-500 text-right max-w-xs">
+                      <div>{{ $t('transfer.rejectedAt') }}: {{ formatDate(transfer.rejectedAt) }}</div>
+                      <div v-if="transfer.rejectReason" class="text-xs text-gray-400 mt-1 truncate" :title="transfer.rejectReason">
+                        {{ transfer.rejectReason }}
+                      </div>
+                    </div>
+                    <div v-else-if="transfer.status === 'cancelled'" class="text-sm text-gray-500">
+                      {{ $t('transfer.cancelledAt') }}: {{ formatDate(transfer.cancelledAt) }}
+                    </div>
+                  </template>
+                  <!-- Received tab actions -->
+                  <template v-else>
+                    <template v-if="transfer.status === 'pending'">
+                      <button
+                        class="btn-secondary"
+                        :disabled="actionLoading === transfer.id"
+                        @click="handleAccept(transfer)"
+                      >
+                        {{ $t('transfer.actions.accept') }}
+                      </button>
+                      <button
+                        class="btn-ghost text-red-500 hover:text-red-600"
+                        :disabled="actionLoading === transfer.id"
+                        @click="openRejectModal(transfer)"
+                      >
+                        {{ $t('transfer.actions.reject') }}
+                      </button>
+                    </template>
+                    <div v-else-if="transfer.status === 'accepted'" class="text-sm text-gray-500">
+                      {{ $t('transfer.completedAt') }}: {{ formatDate(transfer.acceptedAt) }}
+                    </div>
+                    <div v-else-if="transfer.status === 'rejected'" class="text-sm text-gray-500 text-right max-w-xs">
+                      <div>{{ $t('transfer.rejectedAt') }}: {{ formatDate(transfer.rejectedAt) }}</div>
+                      <div v-if="transfer.rejectReason" class="text-xs text-gray-400 mt-1 truncate" :title="transfer.rejectReason">
+                        {{ transfer.rejectReason }}
+                      </div>
+                    </div>
+                    <div v-else-if="transfer.status === 'cancelled'" class="text-sm text-gray-500">
+                      {{ $t('transfer.cancelledAt') }}: {{ formatDate(transfer.cancelledAt) }}
+                    </div>
+                  </template>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- Pagination -->
+        <div 
+          v-if="totalPages > 1"
+          class="flex items-center justify-between px-4 py-3 border-t"
+          :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'"
+        >
+          <div class="text-sm text-gray-500">
+            {{ total }} {{ $t('common.total') }}
+          </div>
+          <div class="flex gap-2">
+            <button
+              class="btn-ghost"
+              :disabled="page <= 1 || refreshing"
+              @click="page--; loadTransfers(true)"
+            >
+              {{ $t('instance.prevPage') }}
+            </button>
+            <button
+              class="btn-ghost"
+              :disabled="page >= totalPages || refreshing"
+              @click="page++; loadTransfers(true)"
+            >
+              {{ $t('instance.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="!loading && transfers.length === 0" class="card p-8 text-center">
+      <div class="text-gray-500">
+        {{ activeTab === 'sent' ? $t('transfer.noTransfers') : $t('transfer.noPendingTransfers') }}
+      </div>
+    </div>
+
+    <!-- Reject Modal -->
+    <div 
+      v-if="showRejectModal"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      @click.self="showRejectModal = false"
+    >
+      <div 
+        class="w-full max-w-md p-6 rounded-lg shadow-xl"
+        :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+      >
+        <h3 class="text-lg font-medium mb-4">{{ $t('transfer.rejectModal.title') }}</h3>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium mb-1">{{ $t('transfer.rejectModal.reason') }}</label>
+            <textarea
+              v-model="rejectReason"
+              class="input w-full h-24 resize-none"
+              :placeholder="$t('transfer.rejectModal.reasonPlaceholder')"
+            ></textarea>
+          </div>
+          <div class="flex justify-end gap-2">
+            <button class="btn-ghost" @click="showRejectModal = false">
+              {{ $t('common.cancel') }}
+            </button>
+            <button 
+              class="btn-danger"
+              :disabled="rejectLoading"
+              @click="handleReject"
+            >
+              {{ rejectLoading ? $t('common.loading') : $t('transfer.actions.reject') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Config Detail Modal -->
+    <div 
+      v-if="showConfigModal && selectedTransfer"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      @click.self="showConfigModal = false"
+    >
+      <div 
+        class="w-full max-w-lg p-6 rounded-lg shadow-xl"
+        :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+      >
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-medium">{{ $t('transfer.configModal.title') }}</h3>
+          <button 
+            class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            @click="showConfigModal = false"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <div class="space-y-4">
+          <!-- 实例信息 -->
+          <div class="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <div class="text-gray-500 mb-1">{{ $t('transfer.configModal.instanceName') }}</div>
+              <div class="font-medium">{{ selectedTransfer.snapshot?.originalName || selectedTransfer.instanceName }}</div>
+            </div>
+            <div>
+              <div class="text-gray-500 mb-1">{{ $t('instance.detail.info.instanceId') }}</div>
+              <div class="font-mono">{{ selectedTransfer.instanceId }}</div>
+            </div>
+          </div>
+
+          <!-- 宿主机信息 -->
+          <div 
+            class="p-3 rounded-lg"
+            :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+          >
+            <div class="text-sm font-medium mb-2">{{ $t('transfer.configModal.hostInfo') }}</div>
+            <div class="flex items-center gap-2">
+              <FlagIcon :code="selectedTransfer.snapshot?.hostCountryCode || 'us'" size="sm" />
+              <span class="font-medium">{{ (selectedTransfer.snapshot?.hostName || '-').toUpperCase() }}</span>
+              <span v-if="selectedTransfer.snapshot?.hostLocation" class="text-gray-500">
+                ({{ selectedTransfer.snapshot.hostLocation }})
+              </span>
+            </div>
+          </div>
+
+          <!-- 配置信息 -->
+          <div class="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <div class="text-gray-500 mb-1">CPU</div>
+              <div>{{ selectedTransfer.snapshot?.cpu ?? '-' }}%</div>
+            </div>
+            <div>
+              <div class="text-gray-500 mb-1">{{ $t('instance.detail.info.memory') }}</div>
+              <div>{{ selectedTransfer.snapshot?.memory ? formatMemory(selectedTransfer.snapshot.memory) : '-' }}</div>
+            </div>
+            <div>
+              <div class="text-gray-500 mb-1">{{ $t('instance.detail.info.disk') }}</div>
+              <div>{{ selectedTransfer.snapshot?.disk ? formatDisk(selectedTransfer.snapshot.disk) : '-' }}</div>
+            </div>
+            <div>
+              <div class="text-gray-500 mb-1">{{ $t('transfer.configModal.networkMode') }}</div>
+              <div>{{ getNetworkModeText(selectedTransfer.snapshot?.networkMode) }}</div>
+            </div>
+          </div>
+
+          <!-- 网络信息 -->
+          <div class="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <div class="text-gray-500 mb-1">IPv4</div>
+              <div class="font-mono text-xs">{{ selectedTransfer.snapshot?.ipv4 || '-' }}</div>
+            </div>
+            <div>
+              <div class="text-gray-500 mb-1">IPv6</div>
+              <div class="font-mono text-xs truncate" :title="selectedTransfer.snapshot?.ipv6 || ''">
+                {{ selectedTransfer.snapshot?.ipv6 || '-' }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 套餐信息 -->
+          <div v-if="selectedTransfer.snapshot?.packageName" class="text-sm">
+            <div class="text-gray-500 mb-1">{{ $t('transfer.configModal.package') }}</div>
+            <div>{{ selectedTransfer.snapshot.packageName }}</div>
+          </div>
+        </div>
+
+        <div class="mt-6 flex justify-end">
+          <button class="btn-ghost" @click="showConfigModal = false">
+            {{ $t('common.close') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/WalletView.vue b/client/src/views/WalletView.vue
new file mode 100644
index 0000000..6ce36a6
--- /dev/null
+++ b/client/src/views/WalletView.vue
@@ -0,0 +1,2273 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter, useRoute } from 'vue-router'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useConfigStore } from '@/stores/config'
+import TermsOfServiceModal from '@/components/TermsOfServiceModal.vue'
+import { freeSiteCopy } from '@/utils/freeSiteFun'
+
+const { t } = useI18n()
+const toast = useToast()
+const router = useRouter()
+const route = useRoute()
+const themeStore = useThemeStore()
+const configStore = useConfigStore()
+
+type WalletTab = 'balance' | 'logs' | 'records' | 'aff'
+type MetricTone = 'slate' | 'emerald' | 'rose' | 'amber' | 'blue' | 'violet'
+
+interface WalletMetric {
+  label: string
+  value: string
+  tone: MetricTone
+}
+
+// 当前 TAB
+const activeTab = ref<WalletTab>('balance')
+const walletTabs = computed((): Array<{ key: WalletTab; label: string }> => [
+  { key: 'balance', label: configStore.freeSiteMode ? freeSiteCopy.walletBalanceTab : t('wallet.tabs.balance') },
+  { key: 'logs', label: configStore.freeSiteMode ? freeSiteCopy.walletLogsTab : t('wallet.tabs.logs') },
+  ...(
+    configStore.freeSiteMode
+      ? []
+      : [
+          { key: 'records' as WalletTab, label: t('wallet.tabs.records') },
+          { key: 'aff' as WalletTab, label: t('aff.title') }
+        ]
+  )
+])
+
+// 余额数据
+const balance = ref({
+  balance: 0,
+  totalRecharge: 0,
+  totalConsume: 0,
+  destroyedValue: 0
+})
+const loading = ref(true)
+
+// 余额日志
+const logs = ref<any[]>([])
+const logsLoading = ref(false)
+const logsPage = ref(1)
+const logsPageSize = ref(10)
+const logsTotal = ref(0)
+const showLotteryGiftOnly = ref(false) // 抽奖赠送筛选：false=排除抽奖赠送, true=仅显示抽奖赠送
+
+// 充值弹窗
+const showRechargeModal = ref(false)
+const rechargeLoading = ref(false)
+const providers = ref<any[]>([])
+const selectedProvider = ref<number | null>(null)
+const rechargeAmount = ref(10)
+// 新增：支付方式选择
+const selectedPaymentMethod = ref<string>('')
+// 服务条款勾选
+const agreedToTerms = ref(false)
+const showTermsModal = ref(false)
+// 无退款确认
+const agreedToNoRefund = ref(false)
+const agreedToRechargeNotice = ref(false)
+
+// 充值记录
+const rechargeRecords = ref<any[]>([])
+const recordsLoading = ref(false)
+const recordsPage = ref(1)
+const recordsPageSize = ref(10)
+const recordsTotal = ref(0)
+
+// 操作加载状态
+const repayLoading = ref<string | null>(null)
+const cancelLoading = ref<string | null>(null)
+
+// AFF 推荐计划数据
+interface AffStatus {
+  activated: boolean
+  totalEarnings: number
+  totalConverted: number
+  currentBalance: number
+  totalCodes: number
+  totalUsed: number
+}
+interface AffCode {
+  id: number
+  code: string
+  packagePlanId: number | null
+  planName: string | null
+  packageName: string | null
+  price: number | null
+  discountRate: number
+  commissionRate: number
+  usedCount: number
+  totalEarnings: number
+  createdAt: string
+  isGlobal: boolean
+}
+interface AffPlan {
+  id: number
+  name: string
+  packageName: string
+  price: string
+  hasCode: boolean
+}
+interface AffLog {
+  id: number
+  type: string
+  amount: number
+  originalAmount: number | null
+  balanceBefore: number
+  balanceAfter: number
+  instanceId: number | null
+  affCodeId: number | null
+  affCode: string | null
+  remark: string | null
+  createdAt: string
+}
+interface AffWithdrawal {
+  id: number
+  amount: number
+  status: string
+  rejectReason: string | null
+  createdAt: string
+  reviewedAt: string | null
+}
+
+const affStatus = ref<AffStatus | null>(null)
+const affCodes = ref<AffCode[]>([])
+const affPlans = ref<AffPlan[]>([])
+const affLogs = ref<AffLog[]>([])
+const affWithdrawals = ref<AffWithdrawal[]>([])
+const affLoading = ref(false)
+const affCodesLoading = ref(false)
+const affPlansLoading = ref(false)
+const affLogsLoading = ref(false)
+const affWithdrawalsLoading = ref(false)
+const affLogsPage = ref(1)
+const affLogsPageSize = ref(10)
+const affLogsTotal = ref(0)
+const affWithdrawalsPage = ref(1)
+const affWithdrawalsPageSize = ref(10)
+const affWithdrawalsTotal = ref(0)
+
+// 创建优惠码弹窗
+const showCreateCodeModal = ref(false)
+const createCodeLoading = ref(false)
+const selectedPlanId = ref<number | null>(null)
+
+// 删除优惠码
+const deleteCodeLoading = ref<number | null>(null)
+
+// 转化申请弹窗
+const showConvertModal = ref(false)
+const convertLoading = ref(false)
+const convertAmount = ref<number>(0)
+
+// AFF 榜单弹窗
+interface LeaderboardEntry {
+  rank: number
+  username: string
+  totalEarnings: number
+  isCurrentUser: boolean
+}
+const showLeaderboardModal = ref(false)
+const leaderboardLoading = ref(false)
+const leaderboard = ref<LeaderboardEntry[]>([])
+
+// 充值验证状态
+const verifyingRecharge = ref(false)
+
+onMounted(async () => {
+  await configStore.loadPublicConfig()
+  loadBalance()
+  
+  // 处理支付回调参数
+  if (!configStore.freeSiteMode && route.query.recharge === 'success') {
+    const orderNo = route.query.out_trade_no as string
+    
+    // 清除 URL 参数，避免刷新页面重复处理
+    router.replace({ path: '/wallet' })
+    
+    // 切换到充值记录标签页
+    switchTab('records')
+    
+    if (orderNo) {
+      // 有订单号，主动查询易支付订单状态
+      await verifyRechargeOrder(orderNo)
+    } else {
+      // 没有订单号，显示等待到账提示
+      toast.info(t('wallet.verifyingPayment'))
+      // 刷新余额和记录
+      loadBalance()
+      loadRecords()
+    }
+  }
+})
+
+// 验证充值订单状态
+async function verifyRechargeOrder(orderNo: string) {
+  verifyingRecharge.value = true
+  try {
+    toast.info(t('wallet.verifyingPayment'))
+    
+    const res = await api.billing.verifyRechargeOrder(orderNo)
+    
+    if (res.verified && res.status === 'completed') {
+      // 支付成功，已到账
+      toast.success(t('wallet.rechargeSuccess'))
+      // 刷新余额
+      loadBalance()
+    } else if (res.status === 'pending') {
+      // 订单待支付，可能回调还没到
+      toast.info(t('wallet.paymentProcessing'))
+    } else if (res.status === 'failed') {
+      // 支付失败或金额异常
+      toast.error(res.message || t('wallet.verifyFailed'))
+    } else if (res.status === 'cancelled') {
+      // 订单已取消
+      toast.warning(t('wallet.orderCancelled'))
+    } else if (res.message && res.message.includes('不匹配')) {
+      // 金额不匹配
+      toast.error(t('wallet.amountMismatch'))
+    } else {
+      // 其他状态
+      toast.info(res.message || t('wallet.verifyingPayment'))
+    }
+    
+    // 刷新充值记录
+    loadRecords()
+  } catch (err: any) {
+    console.error('Verify recharge order failed:', err)
+    toast.error(t('wallet.verifyFailed'))
+    // 仍然刷新记录
+    loadRecords()
+  } finally {
+    verifyingRecharge.value = false
+  }
+}
+
+async function loadBalance() {
+  loading.value = true
+  try {
+    const res = await api.billing.getUserBalance()
+    balance.value = {
+      ...balance.value,
+      ...res.balance
+    }
+  } catch (err: any) {
+    console.error('Failed to load balance:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadLogs() {
+  logsLoading.value = true
+  try {
+    const res = await api.billing.getBalanceLogs({
+      page: logsPage.value,
+      pageSize: logsPageSize.value,
+      lotteryGift: showLotteryGiftOnly.value ? 'only' : 'exclude'
+    })
+    logs.value = res.records || []
+    logsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('wallet.loadLogsFailed') + ': ' + err.message)
+  } finally {
+    logsLoading.value = false
+  }
+}
+
+async function loadProviders() {
+  try {
+    const res = await api.billing.getPaymentProviders()
+    providers.value = res.providers || []
+    if (providers.value.length > 0) {
+      selectedProvider.value = providers.value[0].id
+      // 自动选中第一个支付方式
+      updateDefaultPaymentMethod(providers.value[0])
+    }
+  } catch (err: any) {
+    toast.error(t('wallet.loadProvidersFailed') + ': ' + err.message)
+  }
+}
+
+// 更新默认支付方式
+function updateDefaultPaymentMethod(provider: any) {
+  if (provider?.type === 'heleket') {
+    selectedPaymentMethod.value = ''
+  } else if (provider && provider.methods && provider.methods.length > 0) {
+    selectedPaymentMethod.value = provider.methods[0]
+  } else {
+    selectedPaymentMethod.value = ''
+  }
+}
+
+// 监听支付渠道变化，自动更新默认支付方式
+watch(selectedProvider, (newProviderId) => {
+  if (newProviderId) {
+    const provider = providers.value.find(p => p.id === newProviderId)
+    updateDefaultPaymentMethod(provider)
+  }
+})
+
+async function loadRecords() {
+  recordsLoading.value = true
+  try {
+    const res = await api.billing.getRechargeOrders({
+      page: recordsPage.value,
+      pageSize: recordsPageSize.value
+    })
+    rechargeRecords.value = res.records || []
+    recordsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('wallet.loadRecordsFailed') + ': ' + err.message)
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
+// 重新支付订单
+async function repayOrder(orderNo: string) {
+  repayLoading.value = orderNo
+  try {
+    const res = await api.billing.repayRechargeOrder(orderNo)
+    if (res.payUrl) {
+      toast.success(t('wallet.redirecting'))
+      setTimeout(() => {
+        window.location.href = res.payUrl
+      }, 500)
+    } else {
+      toast.error(t('wallet.noPayUrl'))
+    }
+  } catch (err: any) {
+    toast.error(t('wallet.repayFailed') + ': ' + err.message)
+  } finally {
+    repayLoading.value = null
+  }
+}
+
+// 取消订单
+async function cancelOrder(orderNo: string) {
+  cancelLoading.value = orderNo
+  try {
+    await api.billing.cancelRechargeOrder(orderNo)
+    toast.success(t('wallet.orderCancelled'))
+    loadRecords()
+  } catch (err: any) {
+    toast.error(t('wallet.cancelFailed') + ': ' + err.message)
+  } finally {
+    cancelLoading.value = null
+  }
+}
+
+function switchTab(tab: WalletTab) {
+  if (configStore.freeSiteMode && (tab === 'records' || tab === 'aff')) {
+    activeTab.value = 'balance'
+    return
+  }
+
+  activeTab.value = tab
+  if (tab === 'logs' && logs.value.length === 0) {
+    loadLogs()
+  } else if (tab === 'records' && rechargeRecords.value.length === 0) {
+    loadRecords()
+  } else if (tab === 'aff' && affStatus.value === null) {
+    loadAffStatus()
+  }
+}
+
+function openRechargeModal() {
+  if (configStore.freeSiteMode) return
+  rechargeAmount.value = 10
+  agreedToTerms.value = false
+  agreedToNoRefund.value = false
+  agreedToRechargeNotice.value = false
+  loadProviders()
+  showRechargeModal.value = true
+}
+
+async function createRechargeOrder() {
+  if (configStore.freeSiteMode) return
+
+  if (!selectedProvider.value) {
+    toast.error(t('wallet.selectProvider'))
+    return
+  }
+  if (rechargeAmount.value <= 0) {
+    toast.error(t('wallet.invalidAmount'))
+    return
+  }
+
+  rechargeLoading.value = true
+  try {
+    // 获取选中的支付方式
+    const provider = providers.value.find(p => p.id === selectedProvider.value)
+    let paymentMethod = ''
+    if (provider && provider.type !== 'heleket' && provider.methods && provider.methods.length > 0) {
+      // 如果用户选择了特定支付方式，使用该方式；否则使用默认第一个
+      paymentMethod = selectedPaymentMethod.value || provider.methods[0]
+    }
+    
+    const res = await api.billing.createRechargeOrder(selectedProvider.value, rechargeAmount.value, paymentMethod)
+    
+    // 如果有支付链接，跳转支付
+    if (res.payUrl) {
+      toast.success(t('wallet.redirecting'))
+      showRechargeModal.value = false
+      const payUrl = res.payUrl
+      setTimeout(() => {
+        window.location.href = payUrl
+      }, 500)
+      return
+    }
+    
+    // 如果没有支付链接（如人工充值）
+    toast.success(t('wallet.orderCreated'))
+    showRechargeModal.value = false
+    toast.info(`${t('wallet.orderNo')}: ${res.order.orderNo}`)
+    
+    // 刷新记录
+    if (activeTab.value === 'records') {
+      loadRecords()
+    }
+  } catch (err: any) {
+    toast.error(t('wallet.createOrderFailed') + ': ' + err.message)
+  } finally {
+    rechargeLoading.value = false
+  }
+}
+
+function formatMoney(amount: number): string {
+  return `¥${amount.toFixed(2)}`
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+function getLogTypeName(type: string): string {
+  const map: Record<string, string> = {
+    recharge: t('wallet.logTypes.recharge'),
+    consume: t('wallet.logTypes.consume'),
+    refund: t('wallet.logTypes.refund'),
+    admin_adjust: t('wallet.logTypes.adminAdjust'),
+    gift: t('wallet.logTypes.gift'),
+    transfer_fee: t('wallet.logTypes.transferFee'),
+    transfer_refund: t('wallet.logTypes.transferRefund'),
+    hosting_withdraw: t('wallet.logTypes.hostingWithdraw'),
+    hosting_deduction: t('wallet.logTypes.hostingDeduction'),
+    invite_generate: '生成邀请码'
+  }
+  return map[type] || type
+}
+
+function getStatusName(status: string): string {
+  const map: Record<string, string> = {
+    pending: t('wallet.status.pending'),
+    paid: t('wallet.status.paid'),
+    completed: t('wallet.status.completed'),
+    failed: t('wallet.status.failed'),
+    cancelled: t('wallet.status.cancelled'),
+    refunded: t('wallet.status.refunded')
+  }
+  return map[status] || status
+}
+
+function getPaymentMethodName(method: string): string {
+  const map: Record<string, string> = {
+    alipay: t('wallet.paymentMethods.alipay'),
+    wxpay: t('wallet.paymentMethods.wxpay'),
+    qqpay: t('wallet.paymentMethods.qqpay'),
+    bank: t('wallet.paymentMethods.bank'),
+    jdpay: t('wallet.paymentMethods.jdpay'),
+  }
+  if (map[method]) {
+    return map[method]
+  }
+
+  const normalized = method.trim()
+  const matched = normalized.match(/^([A-Za-z0-9._-]+)\s*(?:[@:/]\s*([A-Za-z0-9._-]+))?$/)
+  if (!matched) {
+    return normalized || method
+  }
+
+  const currency = matched[1]?.toUpperCase() || normalized
+  const network = matched[2]?.toUpperCase()
+  return network ? `${currency} (${network})` : currency
+}
+
+function getRechargeMethodDisplay(rec: any): string {
+  if (rec.actualPaymentMethod) {
+    return getPaymentMethodName(rec.actualPaymentMethod)
+  }
+  if (rec.paymentMethod) {
+    return getPaymentMethodName(rec.paymentMethod)
+  }
+  return ''
+}
+
+function getRechargeCreditLabelKey(status: string): string {
+  return status === 'completed' ? 'wallet.actualAmount' : 'wallet.estimatedAmount'
+}
+
+function getRechargeGatewayStatusText(rec: any): string {
+  return rec.status === 'pending' && rec.gatewayStatusDescription ? rec.gatewayStatusDescription : ''
+}
+
+// 检查订单是否已过期
+function isOrderExpired(expiredAt: string | null): boolean {
+  if (!expiredAt) return false
+  return new Date(expiredAt) < new Date()
+}
+
+function getTagClass(tone: MetricTone): string {
+  const map: Record<MetricTone, string> = {
+    slate: 'border-zinc-200/80 bg-white text-zinc-700 shadow-sm dark:border-white/10 dark:bg-white/[0.04] dark:text-zinc-300',
+    emerald: 'border-emerald-200/80 bg-emerald-50/70 text-emerald-700 dark:border-emerald-500/15 dark:bg-emerald-500/[0.08] dark:text-emerald-200',
+    rose: 'border-rose-200/80 bg-rose-50/70 text-rose-700 dark:border-rose-500/15 dark:bg-rose-500/[0.08] dark:text-rose-200',
+    amber: 'border-amber-200/80 bg-amber-50/70 text-amber-700 dark:border-amber-500/15 dark:bg-amber-500/[0.08] dark:text-amber-200',
+    blue: 'border-blue-200/80 bg-blue-50/70 text-blue-700 dark:border-blue-500/15 dark:bg-blue-500/[0.08] dark:text-blue-200',
+    violet: 'border-violet-200/80 bg-violet-50/70 text-violet-700 dark:border-violet-500/15 dark:bg-violet-500/[0.08] dark:text-violet-200'
+  }
+
+  return map[tone]
+}
+
+function getMetricDotClass(tone: MetricTone): string {
+  const map: Record<MetricTone, string> = {
+    slate: 'bg-zinc-400 dark:bg-zinc-500',
+    emerald: 'bg-emerald-500/70 dark:bg-emerald-400/80',
+    rose: 'bg-rose-500/70 dark:bg-rose-400/80',
+    amber: 'bg-amber-500/70 dark:bg-amber-400/80',
+    blue: 'bg-blue-500/70 dark:bg-blue-400/80',
+    violet: 'bg-violet-500/70 dark:bg-violet-400/80'
+  }
+
+  return map[tone]
+}
+
+function getAmountValueClass(amount: number): string {
+  return amount >= 0
+    ? 'text-emerald-700 dark:text-emerald-200'
+    : 'text-zinc-950 dark:text-zinc-100'
+}
+
+function getLogTypeTagClass(type: string): string {
+  const map: Record<string, MetricTone> = {
+    recharge: 'emerald',
+    refund: 'blue',
+    admin_adjust: 'blue',
+    gift: 'violet',
+    transfer_refund: 'blue',
+    consume: 'rose',
+    transfer_fee: 'amber',
+    hosting_withdraw: 'amber',
+    hosting_deduction: 'rose',
+    invite_generate: 'violet'
+  }
+
+  return getTagClass(map[type] || 'slate')
+}
+
+function getStatusTagClass(status: string): string {
+  const map: Record<string, MetricTone> = {
+    pending: 'amber',
+    paid: 'blue',
+    completed: 'emerald',
+    failed: 'rose',
+    cancelled: 'slate',
+    refunded: 'violet'
+  }
+
+  return getTagClass(map[status] || 'slate')
+}
+
+function getAffLogTypeTagClass(type: string): string {
+  const map: Record<string, MetricTone> = {
+    new_purchase: 'emerald',
+    renew: 'blue',
+    convert: 'violet'
+  }
+
+  return getTagClass(map[type] || 'slate')
+}
+
+function getWithdrawalStatusTagClass(status: string): string {
+  const map: Record<string, MetricTone> = {
+    pending: 'amber',
+    approved: 'emerald',
+    rejected: 'rose'
+  }
+
+  return getTagClass(map[status] || 'slate')
+}
+
+const logsTotalPages = computed(() => Math.ceil(logsTotal.value / logsPageSize.value))
+const recordsTotalPages = computed(() => Math.ceil(recordsTotal.value / recordsPageSize.value))
+const selectedProviderInfo = computed(() => providers.value.find(p => p.id === selectedProvider.value))
+function getSelectedPaymentMethodForProvider(provider: any): string {
+  if (!provider || provider.type === 'heleket') return ''
+  if (!provider.methods || provider.methods.length === 0) return ''
+  return selectedPaymentMethod.value || provider.methods[0]
+}
+
+function getProviderFeeConfig(provider: any, method?: string): { feeRate: number; feeFixed: number } {
+  const methodFee = provider?.type === 'yipay' && method && provider?.methodFees ? provider.methodFees[method] : null
+  if (methodFee) {
+    return {
+      feeRate: Number(methodFee.feeRate || 0),
+      feeFixed: Number(methodFee.feeFixed || 0)
+    }
+  }
+
+  return {
+    feeRate: Number(provider?.feeRate || 0),
+    feeFixed: Number(provider?.feeFixed || 0)
+  }
+}
+
+const selectedFeeConfig = computed(() => {
+  const provider = selectedProviderInfo.value
+  return getProviderFeeConfig(provider, getSelectedPaymentMethodForProvider(provider))
+})
+
+const selectedRechargeFee = computed(() => {
+  const amount = Number(rechargeAmount.value || 0)
+  const feeRate = selectedFeeConfig.value.feeRate
+  const feeFixed = selectedFeeConfig.value.feeFixed
+  return Math.max(0, Math.round((amount * feeRate + feeFixed) * 100) / 100)
+})
+
+const selectedFeeIsSurcharge = computed(() => selectedProviderInfo.value?.type === 'yipay')
+
+const selectedPayableAmount = computed(() => {
+  const amount = Number(rechargeAmount.value || 0)
+  const total = selectedFeeIsSurcharge.value ? amount + selectedRechargeFee.value : amount
+  return Math.max(0, Math.round(total * 100) / 100)
+})
+
+const selectedCreditAmount = computed(() => {
+  const amount = Number(rechargeAmount.value || 0)
+  const total = selectedFeeIsSurcharge.value ? amount : amount - selectedRechargeFee.value
+  return Math.max(0, Math.round(total * 100) / 100)
+})
+const affLogsTotalPages = computed(() => Math.ceil(affLogsTotal.value / affLogsPageSize.value))
+const affWithdrawalsTotalPages = computed(() => Math.ceil(affWithdrawalsTotal.value / affWithdrawalsPageSize.value))
+const logsPositiveAmount = computed(() => logs.value.filter(log => log.amount > 0).reduce((sum, log) => sum + log.amount, 0))
+const logsNegativeAmount = computed(() => logs.value.filter(log => log.amount < 0).reduce((sum, log) => sum + Math.abs(log.amount), 0))
+const pendingRechargeCount = computed(() => rechargeRecords.value.filter(rec => rec.status === 'pending' && !isOrderExpired(rec.expiredAt)).length)
+const completedRechargeCount = computed(() => rechargeRecords.value.filter(rec => ['paid', 'completed'].includes(rec.status)).length)
+const expiredRechargeCount = computed(() => rechargeRecords.value.filter(rec => rec.status === 'pending' && isOrderExpired(rec.expiredAt)).length)
+const affPendingWithdrawalCount = computed(() => affWithdrawals.value.filter(withdrawal => withdrawal.status === 'pending').length)
+const balanceMetrics = computed<WalletMetric[]>(() => [
+  { label: configStore.freeSiteMode ? freeSiteCopy.walletTotalRecharge : t('wallet.totalRecharge'), value: formatMoney(balance.value.totalRecharge), tone: 'emerald' },
+  { label: configStore.freeSiteMode ? freeSiteCopy.walletTotalConsume : t('wallet.totalConsume'), value: formatMoney(balance.value.totalConsume), tone: 'rose' },
+  { label: configStore.freeSiteMode ? freeSiteCopy.walletDestroyedValue : t('wallet.totalDestroyedValue'), value: formatMoney(balance.value.destroyedValue), tone: 'slate' }
+])
+const logMetrics = computed<WalletMetric[]>(() => [
+  { label: configStore.freeSiteMode ? freeSiteCopy.walletTotalRecharge : t('wallet.totalRecharge'), value: formatMoney(logsPositiveAmount.value), tone: 'emerald' },
+  { label: configStore.freeSiteMode ? freeSiteCopy.walletTotalConsume : t('wallet.totalConsume'), value: formatMoney(logsNegativeAmount.value), tone: 'rose' }
+])
+const recordMetrics = computed<WalletMetric[]>(() => [
+  { label: t('wallet.status.pending'), value: pendingRechargeCount.value.toLocaleString(), tone: 'amber' },
+  { label: t('wallet.status.completed'), value: completedRechargeCount.value.toLocaleString(), tone: 'emerald' },
+  { label: t('wallet.orderExpired'), value: expiredRechargeCount.value.toLocaleString(), tone: 'slate' }
+])
+const affMetrics = computed<WalletMetric[]>(() => {
+  if (!affStatus.value) return []
+  return [
+    { label: t('aff.totalEarnings'), value: formatMoney(affStatus.value.totalEarnings), tone: 'emerald' },
+    { label: t('aff.myCodes'), value: affStatus.value.totalCodes.toLocaleString(), tone: 'blue' },
+    { label: t('aff.usedCount'), value: affStatus.value.totalUsed.toLocaleString(), tone: 'amber' },
+    { label: t('aff.withdrawalStatus.pending'), value: affPendingWithdrawalCount.value.toLocaleString(), tone: 'violet' }
+  ]
+})
+
+// AFF 加载函数
+async function loadAffStatus() {
+  affLoading.value = true
+  try {
+    const res = await api.aff.getStatus()
+    affStatus.value = res as AffStatus
+    // 如果已激活，加载优惠码列表
+    if (affStatus.value?.activated) {
+      loadAffCodes()
+      loadAffLogs()
+      loadAffWithdrawals()
+    }
+  } catch (err: any) {
+    console.error('Failed to load AFF status:', err)
+  } finally {
+    affLoading.value = false
+  }
+}
+
+async function loadAffCodes() {
+  affCodesLoading.value = true
+  try {
+    const res = await api.aff.getCodes()
+    affCodes.value = (res as any).codes || []
+  } catch (err: any) {
+    console.error('Failed to load AFF codes:', err)
+  } finally {
+    affCodesLoading.value = false
+  }
+}
+
+async function loadAffPlans() {
+  affPlansLoading.value = true
+  try {
+    const res = await api.aff.getAvailablePlans()
+    affPlans.value = (res as any).plans || []
+  } catch (err: any) {
+    console.error('Failed to load AFF plans:', err)
+  } finally {
+    affPlansLoading.value = false
+  }
+}
+
+async function loadAffLogs() {
+  affLogsLoading.value = true
+  try {
+    const res = await api.aff.getLogs({
+      page: affLogsPage.value,
+      pageSize: affLogsPageSize.value
+    })
+    affLogs.value = (res as any).logs || []
+    affLogsTotal.value = (res as any).total || 0
+  } catch (err: any) {
+    console.error('Failed to load AFF logs:', err)
+  } finally {
+    affLogsLoading.value = false
+  }
+}
+
+async function loadAffWithdrawals() {
+  affWithdrawalsLoading.value = true
+  try {
+    const res = await api.aff.getWithdrawals({
+      page: affWithdrawalsPage.value,
+      pageSize: affWithdrawalsPageSize.value
+    })
+    affWithdrawals.value = (res as any).withdrawals || []
+    affWithdrawalsTotal.value = (res as any).total || 0
+  } catch (err: any) {
+    console.error('Failed to load AFF withdrawals:', err)
+  } finally {
+    affWithdrawalsLoading.value = false
+  }
+}
+
+// 打开创建优惠码弹窗
+function openCreateCodeModal() {
+  selectedPlanId.value = null
+  loadAffPlans()
+  showCreateCodeModal.value = true
+}
+
+// 创建优惠码
+async function createAffCode() {
+  if (selectedPlanId.value === null) return
+  createCodeLoading.value = true
+  try {
+    // selectedPlanId = -1 表示全局码
+    if (selectedPlanId.value === -1) {
+      await api.aff.createCode(undefined)
+    } else {
+      await api.aff.createCode(selectedPlanId.value)
+    }
+    toast.success(t('aff.createSuccess'))
+    showCreateCodeModal.value = false
+    loadAffCodes()
+    loadAffPlans() // 刷新全局码状态
+  } catch (err: any) {
+    toast.error(t('aff.createFailed') + ': ' + err.message)
+  } finally {
+    createCodeLoading.value = false
+  }
+}
+
+// 打开转化申请弹窗
+function openConvertModal() {
+  convertAmount.value = affStatus.value?.currentBalance || 0
+  showConvertModal.value = true
+}
+
+// 打开 AFF 榜单弹窗
+async function openLeaderboardModal() {
+  showLeaderboardModal.value = true
+  leaderboardLoading.value = true
+  try {
+    const res = await api.aff.getLeaderboard()
+    leaderboard.value = res.leaderboard
+  } catch (err: any) {
+    toast.error(t('aff.leaderboard.loadFailed') + ': ' + err.message)
+  } finally {
+    leaderboardLoading.value = false
+  }
+}
+
+// 获取榜单排名样式
+function getRankStyle(rank: number): string {
+  if (rank === 1) return 'bg-gradient-to-r from-amber-400 to-yellow-300 text-amber-900'
+  if (rank === 2) return 'bg-gradient-to-r from-gray-300 to-gray-200 text-gray-700'
+  if (rank === 3) return 'bg-gradient-to-r from-amber-600 to-amber-500 text-amber-100'
+  return 'bg-themed-secondary text-themed'
+}
+
+// 获取榜单排名 emoji
+function getRankEmoji(rank: number): string {
+  if (rank === 1) return '🥇'
+  if (rank === 2) return '🥈'
+  if (rank === 3) return '🥉'
+  return ''
+}
+
+// 提交转化申请
+async function submitConvert() {
+  if (convertAmount.value < 0.1) {
+    toast.error(t('aff.convertModal.invalidAmount'))
+    return
+  }
+  convertLoading.value = true
+  try {
+    await api.aff.createConvert(convertAmount.value)
+    toast.success(t('aff.convertModal.success'))
+    showConvertModal.value = false
+    // 刷新 AFF 状态和转化记录
+    loadAffStatus()
+    loadAffWithdrawals()
+    // 刷新账户余额（转化成功后已转入主余额）
+    loadBalance()
+    // 切换到账户余额标签页，让用户看到更新后的余额
+    switchTab('balance')
+  } catch (err: any) {
+    toast.error(t('aff.convertModal.failed') + ': ' + err.message)
+  } finally {
+    convertLoading.value = false
+  }
+}
+
+// AFF 日志类型名称
+function getAffLogTypeName(type: string): string {
+  const map: Record<string, string> = {
+    new_purchase: t('aff.logType.new_purchase'),
+    renew: t('aff.logType.renew'),
+    convert: t('aff.logType.convert')
+  }
+  return map[type] || type
+}
+
+// AFF 转化状态名称
+function getWithdrawalStatusName(status: string): string {
+  const map: Record<string, string> = {
+    pending: t('aff.withdrawalStatus.pending'),
+    approved: t('aff.withdrawalStatus.approved'),
+    rejected: t('aff.withdrawalStatus.rejected')
+  }
+  return map[status] || status
+}
+
+// AFF 转化状态样式
+// 复制优惠码
+async function copyCode(code: string) {
+  try {
+    await navigator.clipboard.writeText(code)
+    toast.success(t('common.copied'))
+  } catch {
+    toast.error(t('common.copyFailed'))
+  }
+}
+
+// 删除优惠码
+async function deleteAffCode(codeId: number, code: string) {
+  if (!confirm(t('aff.deleteCodeConfirm', { code }))) {
+    return
+  }
+  
+  deleteCodeLoading.value = codeId
+  try {
+    await api.aff.deleteCode(codeId)
+    toast.success(t('aff.deleteCodeSuccess'))
+    loadAffCodes()
+  } catch (err: any) {
+    toast.error(t('aff.deleteCodeFailed') + ': ' + err.message)
+  } finally {
+    deleteCodeLoading.value = null
+  }
+}
+
+// 格式化金额：限制两位小数
+function formatAmount() {
+  if (rechargeAmount.value) {
+    rechargeAmount.value = Math.round(rechargeAmount.value * 100) / 100
+  }
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 顶部胶囊 Tabs -->
+    <div class="mb-4 flex justify-center overflow-x-auto pb-1 sm:mb-5">
+      <div
+        class="inline-flex max-w-full min-w-max rounded-full p-1"
+        :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+        role="tablist"
+        :aria-label="$t('wallet.title')"
+      >
+        <button
+          v-for="tab in walletTabs"
+          :key="tab.key"
+          type="button"
+          role="tab"
+          :aria-selected="activeTab === tab.key"
+          class="whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all duration-300 focus-visible:outline-none sm:px-5"
+          :class="activeTab === tab.key
+            ? themeStore.isDark
+              ? 'bg-white text-gray-900 shadow-lg'
+              : 'bg-gray-900 text-white shadow-lg'
+            : themeStore.isDark
+              ? 'text-gray-400 hover:text-gray-200'
+              : 'text-gray-600 hover:text-gray-900'"
+          @click="switchTab(tab.key)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 账户余额 TAB -->
+    <div v-show="activeTab === 'balance'" class="space-y-6">
+      <div class="card rounded-[28px] border border-zinc-200/80 bg-white/95 p-6 shadow-[0_24px_80px_-56px_rgba(15,23,42,0.32)] dark:border-white/10 dark:bg-zinc-950/60 sm:p-8">
+        <div v-if="loading" class="animate-pulse space-y-6">
+          <div class="h-3 w-24 rounded bg-themed-secondary"></div>
+          <div class="h-16 w-64 rounded bg-themed-secondary"></div>
+          <div class="grid gap-3 sm:grid-cols-3">
+            <div v-for="i in 3" :key="i" class="h-32 rounded-3xl bg-themed-secondary"></div>
+          </div>
+        </div>
+        <div v-else>
+          <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+            <div class="max-w-3xl">
+              <div class="text-xs font-medium uppercase tracking-[0.24em] text-zinc-500 dark:text-zinc-400">
+                {{ configStore.freeSiteMode ? freeSiteCopy.walletCurrentBalance : $t('wallet.currentBalance') }}
+              </div>
+              <div class="mt-4 text-5xl font-semibold tracking-[-0.05em] text-zinc-950 tabular-nums dark:text-zinc-50 sm:text-6xl">
+                {{ formatMoney(balance.balance) }}
+              </div>
+              <p class="mt-4 max-w-2xl text-sm leading-6 text-themed-muted">
+                {{ configStore.freeSiteMode ? freeSiteCopy.walletDescription : $t('wallet.description') }}
+              </p>
+              <div v-if="!configStore.freeSiteMode" class="mt-7 flex flex-wrap gap-3 lg:hidden">
+                <button class="btn btn-primary btn-lg" @click="openRechargeModal">
+                  <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                  </svg>
+                  {{ $t('wallet.recharge') }}
+                </button>
+              </div>
+            </div>
+
+            <div v-if="!configStore.freeSiteMode" class="hidden lg:flex lg:flex-shrink-0 lg:justify-end">
+              <button class="btn btn-primary btn-lg" @click="openRechargeModal">
+                <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                </svg>
+                {{ $t('wallet.recharge') }}
+              </button>
+            </div>
+          </div>
+
+          <div class="mt-8 grid gap-3 lg:grid-cols-3">
+            <div
+              v-for="metric in balanceMetrics"
+              :key="metric.label"
+              class="rounded-3xl border border-zinc-200/80 bg-zinc-50/80 p-5 dark:border-white/10 dark:bg-white/[0.03]"
+            >
+              <div class="flex items-center gap-2">
+                <span class="h-2 w-2 rounded-full" :class="getMetricDotClass(metric.tone)"></span>
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
+                  {{ metric.label }}
+                </div>
+              </div>
+              <div class="mt-4 text-[30px] font-semibold tracking-[-0.04em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                {{ metric.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 余额明细 TAB -->
+    <div v-show="activeTab === 'logs'" class="space-y-6">
+      <div class="card rounded-[28px] border border-zinc-200/80 bg-white/95 p-6 shadow-[0_24px_80px_-56px_rgba(15,23,42,0.32)] dark:border-white/10 dark:bg-zinc-950/60 sm:p-7">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
+            <div>
+              <div class="text-xs font-medium uppercase tracking-[0.24em] text-zinc-500 dark:text-zinc-400">
+                {{ configStore.freeSiteMode ? freeSiteCopy.walletLogsTab : $t('wallet.tabs.logs') }}
+              </div>
+              <div class="mt-4 text-4xl font-semibold tracking-[-0.04em] text-zinc-950 tabular-nums dark:text-zinc-50 sm:text-5xl">
+                {{ logsTotal.toLocaleString() }}
+              </div>
+              <div class="mt-2 text-sm text-themed-muted">
+                {{ $t('common.total') }} {{ logsTotal }} {{ $t('common.items') }}
+              </div>
+            </div>
+
+            <button
+              class="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-colors"
+              :class="showLotteryGiftOnly
+                ? 'border-gray-900 bg-gray-900 text-white dark:border-white dark:bg-white dark:text-gray-900'
+                : 'border-zinc-200 bg-white text-zinc-700 hover:border-zinc-300 hover:text-zinc-950 dark:border-white/10 dark:bg-white/[0.03] dark:text-zinc-300 dark:hover:text-white'"
+              @click="showLotteryGiftOnly = !showLotteryGiftOnly; logsPage = 1; loadLogs()"
+            >
+              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+              {{ showLotteryGiftOnly ? $t('wallet.showingLotteryGift') : $t('wallet.showLotteryGift') }}
+            </button>
+          </div>
+
+          <div class="grid gap-3 lg:grid-cols-2">
+            <div
+              v-for="metric in logMetrics"
+              :key="metric.label"
+              class="rounded-3xl border border-zinc-200/80 bg-zinc-50/80 p-5 dark:border-white/10 dark:bg-white/[0.03]"
+            >
+              <div class="flex items-center gap-2">
+                <span class="h-2 w-2 rounded-full" :class="getMetricDotClass(metric.tone)"></span>
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
+                  {{ metric.label }}
+                </div>
+              </div>
+              <div class="mt-4 text-[28px] font-semibold tracking-[-0.04em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                {{ metric.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card overflow-hidden rounded-[28px] border border-zinc-200/80 bg-white/95 dark:border-white/10 dark:bg-zinc-950/60">
+        <div class="border-b border-themed px-5 py-5 sm:px-6">
+          <div class="text-base font-semibold text-themed">{{ configStore.freeSiteMode ? freeSiteCopy.walletLogsTab : $t('wallet.tabs.logs') }}</div>
+          <div class="mt-1 text-sm text-themed-muted">
+            {{ showLotteryGiftOnly ? $t('wallet.showingLotteryGift') : (configStore.freeSiteMode ? freeSiteCopy.walletLogsDescription : $t('wallet.description')) }}
+          </div>
+        </div>
+
+        <div v-if="logsLoading" class="p-8 text-center text-themed-muted">
+          {{ $t('common.loading') }}...
+        </div>
+        <div v-else-if="logs.length === 0" class="p-8 text-center text-themed-muted">
+          {{ $t('wallet.noLogs') }}
+        </div>
+        <div v-else>
+          <div class="hidden grid-cols-[minmax(0,1fr)_128px_128px_196px] gap-5 border-b border-themed px-5 py-4 text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:grid sm:px-6">
+            <div>{{ $t('wallet.instanceOrRemark') }}</div>
+            <div>{{ $t('wallet.amount') }}</div>
+            <div>{{ $t('wallet.balanceAfter') }}</div>
+            <div>{{ $t('wallet.time') }}</div>
+          </div>
+
+          <div class="divide-y divide-themed">
+            <div
+              v-for="log in logs"
+              :key="log.id"
+              class="grid gap-4 px-5 py-5 transition-colors hover:bg-zinc-50/60 dark:hover:bg-white/[0.03] sm:px-6 lg:grid-cols-[minmax(0,1fr)_128px_128px_196px] lg:items-center lg:py-3.5"
+            >
+              <div class="min-w-0">
+                <div class="lg:hidden">
+                  <div class="flex flex-wrap items-center gap-2.5">
+                    <span :class="['inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium', getLogTypeTagClass(log.type)]">
+                      {{ getLogTypeName(log.type) }}
+                    </span>
+                    <button
+                      v-if="log.instanceId"
+                      class="text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                      @click="router.push(`/instances/${log.instanceId}`)"
+                    >
+                      #{{ log.instanceId }}
+                    </button>
+                  </div>
+                  <div class="mt-3 truncate text-[15px] leading-7 text-zinc-500 dark:text-zinc-400">
+                    {{ log.remark || '-' }}
+                  </div>
+                </div>
+
+                <div class="hidden min-w-0 items-center gap-3 lg:flex">
+                  <span :class="['inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-xs font-medium', getLogTypeTagClass(log.type)]">
+                    {{ getLogTypeName(log.type) }}
+                  </span>
+                  <button
+                    v-if="log.instanceId"
+                    class="shrink-0 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                    @click="router.push(`/instances/${log.instanceId}`)"
+                  >
+                    #{{ log.instanceId }}
+                  </button>
+                  <span class="min-w-0 truncate text-[15px] leading-6 text-zinc-600 dark:text-zinc-400">
+                    {{ log.remark || '-' }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.amount') }}
+                </div>
+                <div class="text-[15px] font-semibold tracking-[-0.01em] tabular-nums" :class="getAmountValueClass(log.amount)">
+                  {{ log.amount >= 0 ? '+' : '-' }}{{ formatMoney(Math.abs(log.amount)) }}
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.balanceAfter') }}
+                </div>
+                <div class="text-[15px] font-medium tracking-[-0.01em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                  {{ formatMoney(log.balanceAfter) }}
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.time') }}
+                </div>
+                <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300">
+                  {{ formatDate(log.createdAt) }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="logsTotalPages > 1" class="flex flex-col gap-3 border-t border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+            <span class="text-sm text-themed-muted">
+              {{ $t('common.total') }} {{ logsTotal }} {{ $t('common.items') }}
+            </span>
+            <div class="flex items-center gap-2">
+              <button
+                class="btn btn-sm btn-ghost"
+                :disabled="logsPage <= 1"
+                @click="logsPage--; loadLogs()"
+              >
+                {{ $t('common.prevPage') }}
+              </button>
+              <span class="rounded-full border border-themed px-3 py-1.5 text-sm text-themed-muted">
+                {{ logsPage }} / {{ logsTotalPages }}
+              </span>
+              <button
+                class="btn btn-sm btn-ghost"
+                :disabled="logsPage >= logsTotalPages"
+                @click="logsPage++; loadLogs()"
+              >
+                {{ $t('common.nextPage') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 充值记录 TAB -->
+    <div v-if="!configStore.freeSiteMode" v-show="activeTab === 'records'" class="space-y-6">
+      <div class="card rounded-[28px] border border-zinc-200/80 bg-white/95 p-6 shadow-[0_24px_80px_-56px_rgba(15,23,42,0.32)] dark:border-white/10 dark:bg-zinc-950/60 sm:p-7">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
+            <div>
+              <div class="text-xs font-medium uppercase tracking-[0.24em] text-zinc-500 dark:text-zinc-400">
+                {{ $t('wallet.tabs.records') }}
+              </div>
+              <div class="mt-4 text-4xl font-semibold tracking-[-0.04em] text-zinc-950 tabular-nums dark:text-zinc-50 sm:text-5xl">
+                {{ recordsTotal.toLocaleString() }}
+              </div>
+              <div class="mt-2 text-sm text-themed-muted">
+                {{ $t('common.total') }} {{ recordsTotal }} {{ $t('common.items') }}
+              </div>
+              <div v-if="verifyingRecharge" :class="['mt-4 inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium', getTagClass('blue')]">
+                {{ $t('wallet.verifyingPayment') }}
+              </div>
+            </div>
+
+            <button class="btn btn-primary btn-lg" @click="openRechargeModal">
+              <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              </svg>
+              {{ $t('wallet.recharge') }}
+            </button>
+          </div>
+
+          <div class="grid gap-3 lg:grid-cols-3">
+            <div
+              v-for="metric in recordMetrics"
+              :key="metric.label"
+              class="rounded-3xl border border-zinc-200/80 bg-zinc-50/80 p-5 dark:border-white/10 dark:bg-white/[0.03]"
+            >
+              <div class="flex items-center gap-2">
+                <span class="h-2 w-2 rounded-full" :class="getMetricDotClass(metric.tone)"></span>
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
+                  {{ metric.label }}
+                </div>
+              </div>
+              <div class="mt-4 text-[28px] font-semibold tracking-[-0.04em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                {{ metric.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card overflow-hidden rounded-[28px] border border-zinc-200/80 bg-white/95 dark:border-white/10 dark:bg-zinc-950/60">
+        <div class="border-b border-themed px-5 py-5 sm:px-6">
+          <div class="text-base font-semibold text-themed">{{ $t('wallet.tabs.records') }}</div>
+          <div class="mt-1 text-sm text-themed-muted">{{ $t('wallet.description') }}</div>
+        </div>
+
+        <div v-if="recordsLoading" class="p-8 text-center text-themed-muted">
+          {{ $t('common.loading') }}...
+        </div>
+        <div v-else-if="rechargeRecords.length === 0" class="p-8 text-center text-themed-muted">
+          {{ $t('wallet.noRecords') }}
+        </div>
+        <div v-else>
+          <div class="hidden grid-cols-[minmax(0,1fr)_110px_150px_110px_188px_auto] gap-5 border-b border-themed px-5 py-4 text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:grid sm:px-6">
+            <div>{{ $t('wallet.orderNo') }}</div>
+            <div>{{ $t('wallet.amount') }}</div>
+            <div>{{ $t('wallet.paymentChannel') }}</div>
+            <div>{{ $t('wallet.statusLabel') }}</div>
+            <div>{{ $t('wallet.time') }}</div>
+            <div>{{ $t('common.actions') }}</div>
+          </div>
+
+          <div class="divide-y divide-themed">
+            <div
+              v-for="rec in rechargeRecords"
+              :key="rec.id"
+              class="grid gap-4 px-5 py-5 transition-colors hover:bg-zinc-50/60 dark:hover:bg-white/[0.03] sm:px-6 lg:grid-cols-[minmax(0,1fr)_110px_150px_110px_188px_auto] lg:items-center lg:py-3.5"
+            >
+              <div class="min-w-0">
+                <div class="lg:hidden">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="truncate text-[15px] font-semibold tracking-[-0.01em] text-zinc-950 dark:text-zinc-50">{{ rec.orderNo }}</span>
+                  </div>
+                  <div class="mt-2 text-[15px] leading-7 text-zinc-500 dark:text-zinc-400">
+                    {{ rec.provider?.name || '-' }}
+                    <span v-if="getRechargeMethodDisplay(rec)">· {{ getRechargeMethodDisplay(rec) }}</span>
+                  </div>
+                  <div v-if="rec.paymentUuid || rec.paymentTxid || rec.completedAt" class="mt-1 break-all text-xs leading-6 text-zinc-500 dark:text-zinc-400">
+                    <span v-if="rec.paymentUuid">{{ $t('wallet.paymentUuid') }} {{ rec.paymentUuid }}</span>
+                    <span v-if="rec.paymentUuid && (rec.paymentTxid || rec.completedAt)"> · </span>
+                    <span v-if="rec.paymentTxid">{{ $t('wallet.paymentTxid') }} {{ rec.paymentTxid }}</span>
+                    <span v-if="rec.paymentTxid && rec.completedAt"> · </span>
+                    <span v-if="rec.completedAt">{{ $t('wallet.completedAt') }} {{ formatDate(rec.completedAt) }}</span>
+                  </div>
+                </div>
+
+                <div class="hidden lg:block">
+                  <span class="block truncate text-[15px] font-semibold tracking-[-0.01em] text-zinc-950 dark:text-zinc-50">
+                    {{ rec.orderNo }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.amount') }}
+                </div>
+                <div class="text-[15px] font-medium tracking-[-0.01em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                  {{ formatMoney(rec.amount) }}
+                </div>
+                <div v-if="rec.actualAmount !== null" class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+                  {{ $t(getRechargeCreditLabelKey(rec.status)) }} {{ formatMoney(rec.actualAmount) }}
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.paymentChannel') }}
+                </div>
+                <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300 lg:truncate">
+                  {{ rec.provider?.name || '-' }}<span v-if="getRechargeMethodDisplay(rec)"> · {{ getRechargeMethodDisplay(rec) }}</span>
+                </div>
+                <div v-if="rec.paymentUuid" class="mt-1 hidden truncate text-xs text-zinc-500 dark:text-zinc-400 lg:block" :title="rec.paymentUuid">
+                  {{ $t('wallet.paymentUuid') }} {{ rec.paymentUuid }}
+                </div>
+                <div v-if="rec.paymentTxid" class="mt-1 hidden truncate text-xs text-zinc-500 dark:text-zinc-400 lg:block" :title="rec.paymentTxid">
+                  {{ $t('wallet.paymentTxid') }} {{ rec.paymentTxid }}
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.statusLabel') }}
+                </div>
+                <span :class="['inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium', getStatusTagClass(rec.status)]">
+                  {{ getStatusName(rec.status) }}
+                </span>
+                <div v-if="getRechargeGatewayStatusText(rec)" class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+                  {{ getRechargeGatewayStatusText(rec) }}
+                </div>
+              </div>
+
+              <div class="flex items-center justify-between gap-3 lg:block">
+                <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                  {{ $t('wallet.time') }}
+                </div>
+                <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300">
+                  {{ formatDate(rec.createdAt) }}
+                </div>
+                <div v-if="rec.completedAt" class="mt-1 hidden text-xs text-zinc-500 dark:text-zinc-400 lg:block">
+                  {{ $t('wallet.completedAt') }} {{ formatDate(rec.completedAt) }}
+                </div>
+              </div>
+
+              <div class="flex flex-wrap gap-2 lg:justify-end">
+                <template v-if="rec.status === 'pending' && !isOrderExpired(rec.expiredAt)">
+                  <button
+                    class="btn btn-sm btn-primary"
+                    :disabled="repayLoading === rec.orderNo"
+                    @click="repayOrder(rec.orderNo)"
+                  >
+                    {{ repayLoading === rec.orderNo ? $t('common.processing') : $t('wallet.pay') }}
+                  </button>
+                  <button
+                    class="btn btn-sm btn-ghost text-red-500 hover:bg-red-500/10"
+                    :disabled="cancelLoading === rec.orderNo"
+                    @click="cancelOrder(rec.orderNo)"
+                  >
+                    {{ cancelLoading === rec.orderNo ? $t('common.processing') : $t('wallet.void') }}
+                  </button>
+                </template>
+                <template v-else-if="rec.status === 'pending' && isOrderExpired(rec.expiredAt)">
+                  <span :class="['inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium', getTagClass('rose')]">
+                    {{ $t('wallet.orderExpired') }}
+                  </span>
+                </template>
+                <template v-else>
+                  <span class="text-sm text-themed-muted">-</span>
+                </template>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="recordsTotalPages > 1" class="flex flex-col gap-3 border-t border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+            <span class="text-sm text-themed-muted">
+              {{ $t('common.total') }} {{ recordsTotal }} {{ $t('common.items') }}
+            </span>
+            <div class="flex items-center gap-2">
+              <button
+                class="btn btn-sm btn-ghost"
+                :disabled="recordsPage <= 1"
+                @click="recordsPage--; loadRecords()"
+              >
+                {{ $t('common.prevPage') }}
+              </button>
+              <span class="rounded-full border border-themed px-3 py-1.5 text-sm text-themed-muted">
+                {{ recordsPage }} / {{ recordsTotalPages }}
+              </span>
+              <button
+                class="btn btn-sm btn-ghost"
+                :disabled="recordsPage >= recordsTotalPages"
+                @click="recordsPage++; loadRecords()"
+              >
+                {{ $t('common.nextPage') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 推荐计划 TAB -->
+    <div v-if="!configStore.freeSiteMode" v-show="activeTab === 'aff'" class="space-y-6">
+      <!-- 加载中 -->
+      <div v-if="affLoading" class="card p-8 text-center text-themed-muted">
+        {{ $t('common.loading') }}...
+      </div>
+
+      <div v-else-if="affStatus && !affStatus.activated" class="card rounded-[28px] border border-zinc-200/80 bg-white/95 p-8 text-center shadow-[0_24px_80px_-56px_rgba(15,23,42,0.32)] dark:border-white/10 dark:bg-zinc-950/60 sm:p-10">
+        <div>
+          <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-200/80 bg-zinc-50 dark:border-white/10 dark:bg-white/[0.03]">
+            <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-themed">{{ $t('aff.notActivated') }}</h3>
+          <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-themed-muted">{{ $t('aff.activateHint') }}</p>
+          <div class="mt-6 flex justify-center">
+            <button class="btn btn-primary" @click="switchTab('balance'); openRechargeModal()">
+              {{ $t('aff.goRecharge') }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <template v-else-if="affStatus && affStatus.activated">
+        <div class="card rounded-[28px] border border-zinc-200/80 bg-white/95 p-6 shadow-[0_24px_80px_-56px_rgba(15,23,42,0.32)] dark:border-white/10 dark:bg-zinc-950/60 sm:p-8">
+          <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+              <div class="min-w-0 flex-1">
+                <div class="text-xs font-medium uppercase tracking-[0.24em] text-zinc-500 dark:text-zinc-400">
+                  {{ $t('aff.affBalance') }}
+                </div>
+                <div class="mt-4 text-5xl font-semibold tracking-[-0.05em] text-zinc-950 tabular-nums dark:text-zinc-50 sm:text-6xl">
+                  {{ formatMoney(affStatus.currentBalance) }}
+                </div>
+                <p class="mt-4 max-w-2xl text-sm leading-6 text-themed-muted">
+                  {{ $t('aff.balanceHint') }}
+                </p>
+              </div>
+
+              <div class="flex flex-wrap gap-2">
+                <button class="btn btn-ghost" @click="openLeaderboardModal">
+                  <svg class="mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  </svg>
+                  {{ $t('aff.leaderboard.title') }}
+                </button>
+                <button
+                  class="btn btn-primary"
+                  :disabled="affStatus.currentBalance < 0.1"
+                  @click="openConvertModal"
+                >
+                  {{ $t('aff.convert') }}
+                </button>
+              </div>
+            </div>
+
+            <div class="grid gap-3 xl:grid-cols-4">
+              <div
+                v-for="metric in affMetrics"
+                :key="metric.label"
+                class="rounded-3xl border border-zinc-200/80 bg-zinc-50/80 p-5 dark:border-white/10 dark:bg-white/[0.03]"
+              >
+                <div class="flex items-center gap-2">
+                  <span class="h-2 w-2 rounded-full" :class="getMetricDotClass(metric.tone)"></span>
+                  <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
+                    {{ metric.label }}
+                  </div>
+                </div>
+                <div class="mt-4 text-[28px] font-semibold tracking-[-0.04em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                  {{ metric.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card overflow-hidden rounded-[28px] border border-zinc-200/80 bg-white/95 dark:border-white/10 dark:bg-zinc-950/60">
+          <div class="flex flex-col gap-4 border-b border-themed px-5 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+            <div>
+              <div class="text-base font-semibold text-themed">{{ $t('aff.myCodes') }}</div>
+              <div class="mt-1 text-sm text-themed-muted">
+                {{ $t('common.total') }} {{ affStatus.totalCodes }} {{ $t('common.items') }}
+              </div>
+            </div>
+            <button class="btn btn-sm btn-primary" @click="openCreateCodeModal">
+              <svg class="mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              </svg>
+              {{ $t('aff.createCode') }}
+            </button>
+          </div>
+          
+          <div v-if="affCodesLoading" class="p-8 text-center text-themed-muted">
+            {{ $t('common.loading') }}...
+          </div>
+          <div v-else-if="affCodes.length === 0" class="p-8 text-center text-themed-muted">
+            {{ $t('aff.noCodes') }}
+          </div>
+          <div v-else>
+            <div class="hidden grid-cols-[minmax(0,1.5fr)_minmax(0,1.25fr)_150px_100px_120px_auto] gap-5 border-b border-themed px-5 py-4 text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:grid sm:px-6">
+              <div>{{ $t('aff.code') }}</div>
+              <div>{{ $t('aff.plan') }}</div>
+              <div>{{ $t('aff.discount') }}/{{ $t('aff.commission') }}</div>
+              <div>{{ $t('aff.usedCount') }}</div>
+              <div>{{ $t('aff.earnings') }}</div>
+              <div></div>
+            </div>
+
+            <div class="divide-y divide-themed">
+              <div
+                v-for="code in affCodes"
+                :key="code.id"
+                class="grid gap-4 px-5 py-5 transition-colors hover:bg-zinc-50/60 dark:hover:bg-white/[0.03] sm:px-6 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1.25fr)_150px_100px_120px_auto] lg:items-center lg:py-3.5"
+              >
+                <div class="min-w-0">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="text-[15px] font-semibold tracking-[-0.01em] text-zinc-950 dark:text-zinc-50">{{ code.code }}</span>
+                    <button class="text-themed-muted transition-colors hover:text-themed" @click="copyCode(code.code)">
+                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                      </svg>
+                    </button>
+                    <span
+                      v-if="code.isGlobal"
+                      :class="['inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium', getTagClass('blue')]"
+                    >
+                      {{ $t('aff.globalCodeBadge') }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300 lg:truncate">
+                  {{ code.isGlobal ? $t('aff.globalCode') : `${code.packageName} / ${code.planName}` }}
+                </div>
+
+                <div class="flex items-center justify-between gap-3 lg:block">
+                  <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                    {{ $t('aff.discount') }}/{{ $t('aff.commission') }}
+                  </div>
+                  <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300">
+                    {{ (code.discountRate * 100).toFixed(0) }}% / {{ (code.commissionRate * 100).toFixed(0) }}%
+                  </div>
+                </div>
+
+                <div class="flex items-center justify-between gap-3 lg:block">
+                  <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                    {{ $t('aff.usedCount') }}
+                  </div>
+                  <div class="text-[15px] font-medium tracking-[-0.01em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                    {{ code.usedCount.toLocaleString() }}
+                  </div>
+                </div>
+
+                <div class="flex items-center justify-between gap-3 lg:block">
+                  <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                    {{ $t('aff.earnings') }}
+                  </div>
+                  <div class="text-[15px] font-medium tracking-[-0.01em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                    {{ formatMoney(code.totalEarnings) }}
+                  </div>
+                </div>
+
+                <div class="flex justify-start lg:justify-end">
+                  <button
+                    v-if="code.usedCount === 0"
+                    class="rounded-full p-2 text-red-500 transition-colors hover:bg-red-500/10"
+                    :disabled="deleteCodeLoading === code.id"
+                    :title="$t('common.delete')"
+                    @click="deleteAffCode(code.id, code.code)"
+                  >
+                    <svg v-if="deleteCodeLoading !== code.id" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                    <svg v-else class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-6 xl:grid-cols-[minmax(0,1.45fr)_minmax(20rem,0.95fr)]">
+          <div class="card overflow-hidden rounded-[28px] border border-zinc-200/80 bg-white/95 dark:border-white/10 dark:bg-zinc-950/60">
+            <div class="border-b border-themed px-5 py-5 sm:px-6">
+              <div class="text-base font-semibold text-themed">{{ $t('aff.earningsLog') }}</div>
+              <div class="mt-1 text-sm text-themed-muted">{{ $t('common.total') }} {{ affLogsTotal }} {{ $t('common.items') }}</div>
+            </div>
+            
+            <div v-if="affLogsLoading" class="p-8 text-center text-themed-muted">
+              {{ $t('common.loading') }}...
+            </div>
+            <div v-else-if="affLogs.length === 0" class="p-8 text-center text-themed-muted">
+              {{ $t('aff.noLogs') }}
+            </div>
+            <div v-else>
+              <div class="hidden grid-cols-[minmax(0,1fr)_128px_128px_196px] gap-5 border-b border-themed px-5 py-4 text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:grid sm:px-6">
+                <div>{{ $t('wallet.instanceOrRemark') }}</div>
+                <div>{{ $t('wallet.amount') }}</div>
+                <div>{{ $t('wallet.balanceAfter') }}</div>
+                <div>{{ $t('wallet.time') }}</div>
+              </div>
+
+              <div class="divide-y divide-themed">
+                <div
+                  v-for="log in affLogs"
+                  :key="log.id"
+                  class="grid gap-4 px-5 py-5 transition-colors hover:bg-zinc-50/60 dark:hover:bg-white/[0.03] sm:px-6 lg:grid-cols-[minmax(0,1fr)_128px_128px_196px] lg:items-center lg:py-3.5"
+                >
+                  <div class="min-w-0">
+                    <div class="lg:hidden">
+                      <div class="flex flex-wrap items-center gap-2">
+                        <span :class="['inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium', getAffLogTypeTagClass(log.type)]">
+                          {{ getAffLogTypeName(log.type) }}
+                        </span>
+                        <button
+                          v-if="log.instanceId"
+                          class="text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                          @click="router.push(`/instances/${log.instanceId}`)"
+                        >
+                          #{{ log.instanceId }}
+                        </button>
+                        <span v-else-if="log.affCode" class="text-sm text-zinc-500 dark:text-zinc-400">
+                          {{ log.affCode }}
+                        </span>
+                      </div>
+                      <div class="mt-3 truncate text-[15px] leading-7 text-zinc-500 dark:text-zinc-400">
+                        {{ log.remark || '-' }}
+                      </div>
+                    </div>
+
+                    <div class="hidden min-w-0 items-center gap-3 lg:flex">
+                      <span :class="['inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-xs font-medium', getAffLogTypeTagClass(log.type)]">
+                        {{ getAffLogTypeName(log.type) }}
+                      </span>
+                      <button
+                        v-if="log.instanceId"
+                        class="shrink-0 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                        @click="router.push(`/instances/${log.instanceId}`)"
+                      >
+                        #{{ log.instanceId }}
+                      </button>
+                      <span v-else-if="log.affCode" class="shrink-0 text-sm text-zinc-500 dark:text-zinc-400">
+                        {{ log.affCode }}
+                      </span>
+                      <span class="min-w-0 truncate text-[15px] leading-6 text-zinc-600 dark:text-zinc-400">
+                        {{ log.remark || '-' }}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center justify-between gap-3 lg:block">
+                    <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                      {{ $t('wallet.amount') }}
+                    </div>
+                    <div class="text-[15px] font-semibold tracking-[-0.01em] tabular-nums" :class="getAmountValueClass(log.amount)">
+                      {{ log.amount >= 0 ? '+' : '-' }}{{ formatMoney(Math.abs(log.amount)) }}
+                    </div>
+                  </div>
+
+                  <div class="flex items-center justify-between gap-3 lg:block">
+                    <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                      {{ $t('wallet.balanceAfter') }}
+                    </div>
+                    <div class="text-[15px] font-medium tracking-[-0.01em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                      {{ formatMoney(log.balanceAfter) }}
+                    </div>
+                  </div>
+
+                  <div class="flex items-center justify-between gap-3 lg:block">
+                    <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                      {{ $t('wallet.time') }}
+                    </div>
+                    <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300">
+                      {{ formatDate(log.createdAt) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="affLogsTotalPages > 1" class="flex flex-col gap-3 border-t border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+                <span class="text-sm text-themed-muted">
+                  {{ $t('common.total') }} {{ affLogsTotal }} {{ $t('common.items') }}
+                </span>
+                <div class="flex items-center gap-2">
+                  <button
+                    class="btn btn-sm btn-ghost"
+                    :disabled="affLogsPage <= 1"
+                    @click="affLogsPage--; loadAffLogs()"
+                  >
+                    {{ $t('common.prevPage') }}
+                  </button>
+                  <span class="rounded-full border border-themed px-3 py-1.5 text-sm text-themed-muted">
+                    {{ affLogsPage }} / {{ affLogsTotalPages }}
+                  </span>
+                  <button
+                    class="btn btn-sm btn-ghost"
+                    :disabled="affLogsPage >= affLogsTotalPages"
+                    @click="affLogsPage++; loadAffLogs()"
+                  >
+                    {{ $t('common.nextPage') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card overflow-hidden rounded-[28px] border border-zinc-200/80 bg-white/95 dark:border-white/10 dark:bg-zinc-950/60">
+            <div class="border-b border-themed px-5 py-5 sm:px-6">
+              <div class="text-base font-semibold text-themed">{{ $t('aff.withdrawals') }}</div>
+              <div class="mt-1 text-sm text-themed-muted">{{ $t('common.total') }} {{ affWithdrawalsTotal }} {{ $t('common.items') }}</div>
+            </div>
+            
+            <div v-if="affWithdrawalsLoading" class="p-8 text-center text-themed-muted">
+              {{ $t('common.loading') }}...
+            </div>
+            <div v-else-if="affWithdrawals.length === 0" class="p-8 text-center text-themed-muted">
+              {{ $t('aff.noWithdrawals') }}
+            </div>
+            <div v-else>
+              <div class="hidden grid-cols-[120px_110px_180px_minmax(0,1fr)] gap-5 border-b border-themed px-5 py-4 text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:grid sm:px-6">
+                <div>{{ $t('wallet.amount') }}</div>
+                <div>{{ $t('aff.status') }}</div>
+                <div>{{ $t('aff.requestTime') }}</div>
+                <div>{{ $t('aff.rejectReason') }}</div>
+              </div>
+
+              <div class="divide-y divide-themed">
+                <div
+                  v-for="w in affWithdrawals"
+                  :key="w.id"
+                  class="grid gap-4 px-5 py-5 transition-colors hover:bg-zinc-50/60 dark:hover:bg-white/[0.03] sm:px-6 lg:grid-cols-[120px_110px_180px_minmax(0,1fr)] lg:items-center lg:py-3.5"
+                >
+                  <div class="flex items-center justify-between gap-3 lg:block">
+                    <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                      {{ $t('wallet.amount') }}
+                    </div>
+                    <div class="text-[15px] font-medium tracking-[-0.01em] text-zinc-950 tabular-nums dark:text-zinc-50">
+                      {{ formatMoney(w.amount) }}
+                    </div>
+                  </div>
+
+                  <div class="flex items-center justify-between gap-3 lg:block">
+                    <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                      {{ $t('aff.status') }}
+                    </div>
+                    <span :class="['inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium', getWithdrawalStatusTagClass(w.status)]">
+                      {{ getWithdrawalStatusName(w.status) }}
+                    </span>
+                  </div>
+
+                  <div class="flex items-center justify-between gap-3 lg:block">
+                    <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400 lg:hidden">
+                      {{ $t('aff.requestTime') }}
+                    </div>
+                    <div class="text-[15px] leading-6 text-zinc-700 dark:text-zinc-300">
+                      {{ formatDate(w.createdAt) }}
+                    </div>
+                  </div>
+
+                  <div class="text-[15px] leading-7 text-zinc-500 dark:text-zinc-400 lg:truncate lg:leading-6">
+                    {{ w.rejectReason || '-' }}
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="affWithdrawalsTotalPages > 1" class="flex flex-col gap-3 border-t border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+                <span class="text-sm text-themed-muted">
+                  {{ $t('common.total') }} {{ affWithdrawalsTotal }} {{ $t('common.items') }}
+                </span>
+                <div class="flex items-center gap-2">
+                  <button
+                    class="btn btn-sm btn-ghost"
+                    :disabled="affWithdrawalsPage <= 1"
+                    @click="affWithdrawalsPage--; loadAffWithdrawals()"
+                  >
+                    {{ $t('common.prevPage') }}
+                  </button>
+                  <span class="rounded-full border border-themed px-3 py-1.5 text-sm text-themed-muted">
+                    {{ affWithdrawalsPage }} / {{ affWithdrawalsTotalPages }}
+                  </span>
+                  <button
+                    class="btn btn-sm btn-ghost"
+                    :disabled="affWithdrawalsPage >= affWithdrawalsTotalPages"
+                    @click="affWithdrawalsPage++; loadAffWithdrawals()"
+                  >
+                    {{ $t('common.nextPage') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- 充值弹窗 -->
+    <Teleport to="body">
+      <div v-if="showRechargeModal && !configStore.freeSiteMode" class="modal-overlay" @click.self="showRechargeModal = false">
+        <div class="modal-content max-w-md">
+          <!-- 头部 -->
+          <div class="modal-header border-b-0 pb-2">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-900 dark:bg-white">
+                <svg class="w-5 h-5 text-white dark:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div>
+                <h3 class="modal-title text-lg">{{ $t('wallet.recharge') }}</h3>
+                <p class="text-xs text-themed-muted">{{ $t('wallet.description') }}</p>
+              </div>
+            </div>
+            <button class="btn btn-ghost btn-sm rounded-full" @click="showRechargeModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-5 pt-4">
+            <!-- 支付渠道选择 -->
+            <div>
+              <label class="label text-xs uppercase tracking-wide text-themed-muted mb-2">{{ $t('wallet.paymentMethod') }}</label>
+              <div v-if="providers.length === 0" class="text-themed-muted text-sm p-4 rounded-lg bg-themed-secondary text-center">
+                {{ $t('wallet.noProviders') }}
+              </div>
+              <div v-else class="grid grid-cols-2 gap-3">
+                <button
+                  v-for="p in providers"
+                  :key="p.id"
+                  class="p-4 rounded-xl border-2 text-sm font-medium transition-all duration-200 flex items-center justify-center gap-2"
+                  :class="selectedProvider === p.id 
+                    ? 'border-gray-900 dark:border-white bg-gray-900/5 dark:bg-white/10' 
+                    : 'border-themed hover:border-gray-400 hover:bg-themed-hover'"
+                  @click="selectedProvider = p.id; selectedPaymentMethod = ''"
+                >
+                  {{ p.name }}
+                </button>
+              </div>
+            </div>
+
+            <!-- 支付方式选择 (仅当所选渠道支持多种方式时显示) -->
+            <div v-if="selectedProviderInfo && selectedProviderInfo.type !== 'heleket' && selectedProviderInfo.methods && selectedProviderInfo.methods.length > 1">
+              <label class="label text-xs uppercase tracking-wide text-themed-muted mb-2">{{ $t('wallet.paymentMethodType') }}</label>
+              <div class="grid grid-cols-2 gap-3">
+                <button
+                  v-for="method in selectedProviderInfo.methods"
+                  :key="method"
+                  class="p-3 rounded-xl border-2 text-sm font-medium transition-all duration-200 flex items-center justify-center gap-2.5"
+                  :class="[
+                    selectedPaymentMethod === method || (!selectedPaymentMethod && selectedProviderInfo.methods[0] === method)
+                      ? (method === 'alipay' 
+                        ? 'border-blue-500 bg-blue-500/10 shadow-md shadow-blue-500/10' 
+                        : method === 'wxpay' 
+                          ? 'border-green-500 bg-green-500/10 shadow-md shadow-green-500/10'
+                          : 'border-blue-500 bg-blue-500/10 shadow-md shadow-blue-500/10')
+                      : 'border-themed hover:border-gray-400 hover:bg-themed-hover'
+                  ]"
+                  @click="selectedPaymentMethod = method"
+                >
+                  <!-- 支付宝图标 -->
+                  <svg v-if="method === 'alipay'" class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" :class="selectedPaymentMethod === method || (!selectedPaymentMethod && selectedProviderInfo.methods[0] === method) ? 'text-blue-500' : 'text-blue-400'">
+                    <path d="M21.422 15.358c-3.83-1.153-6.055-1.84-7.358-2.22a15.503 15.503 0 001.07-3.122h-4.067v-1.2h4.89V7.69h-4.89V5.5H9.333v2.19H4.5v1.126h4.833v1.2H5.266v1.124h7.09a12.14 12.14 0 01-.671 1.883c-1.627-.396-3.177-.586-4.384-.513-3.407.206-5.136 2.051-5.26 3.708-.153 2.038 1.57 3.728 4.49 3.782 2.448.045 4.793-1.083 6.51-3.058.756.39 1.603.831 2.542 1.323.939.492 1.97 1.033 3.114 1.632h5.25v-3.514c-.167-.053-.324-.095-.525-.025zM7.028 18.93c-1.86-.143-2.66-1.062-2.583-1.95.076-.882.973-1.712 2.526-1.806.984-.06 2.243.13 3.685.508a7.016 7.016 0 01-3.628 3.248z" />
+                  </svg>
+                  <!-- 微信支付图标 -->
+                  <svg v-else-if="method === 'wxpay'" class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" :class="selectedPaymentMethod === method || (!selectedPaymentMethod && selectedProviderInfo.methods[0] === method) ? 'text-green-500' : 'text-green-400'">
+                    <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098 10.16 10.16 0 002.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178A1.17 1.17 0 014.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178 1.17 1.17 0 01-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 01.598.082l1.584.926a.272.272 0 00.14.045c.133 0 .241-.108.241-.241 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 01-.023-.156.49.49 0 01.201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088l-.105-.001-.301-.033zm-2.746 2.769a.96.96 0 110 1.92.96.96 0 010-1.92zm4.93 0a.96.96 0 110 1.92.96.96 0 010-1.92z" />
+                  </svg>
+                  <!-- 其他支付方式 -->
+                  <svg v-else class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                  </svg>
+                  <span>{{ getPaymentMethodName(method) }}</span>
+                </button>
+              </div>
+            </div>
+
+            <div v-else-if="selectedProviderInfo?.type === 'heleket'" class="text-xs text-themed-muted rounded-lg bg-themed-secondary px-3 py-2">
+              {{ $t('wallet.heleketSelectionHint') }}
+            </div>
+
+            <!-- 充值金额 -->
+            <div>
+              <label class="label text-xs uppercase tracking-wide text-themed-muted mb-2">{{ $t('wallet.amountLabel') }}</label>
+              <div class="grid grid-cols-4 gap-2 mb-3">
+                <button
+                  v-for="amt in [10, 50, 100, 200]"
+                  :key="amt"
+                  class="py-2.5 rounded-lg text-sm font-semibold transition-all duration-200"
+                  :class="rechargeAmount === amt 
+                    ? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900' 
+                    : 'bg-themed-secondary hover:bg-themed-hover text-themed'"
+                  @click="rechargeAmount = amt"
+                >
+                  ¥{{ amt }}
+                </button>
+              </div>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-themed-muted font-medium">¥</span>
+                <input
+                  v-model.number="rechargeAmount"
+                  type="number"
+                  class="input w-full pl-8 text-lg font-semibold"
+                  :min="selectedProviderInfo?.minAmount || 1"
+                  :max="selectedProviderInfo?.maxAmount || undefined"
+                  step="0.01"
+                  placeholder="0"
+                  @blur="formatAmount"
+                />
+              </div>
+              <div v-if="selectedProviderInfo" class="text-xs text-themed-muted mt-2 flex items-center gap-1">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {{ $t('wallet.amountRange') }}: 
+                {{ selectedProviderInfo.minAmount.toFixed(2) }} - 
+                {{ selectedProviderInfo.maxAmount ? selectedProviderInfo.maxAmount.toFixed(2) : $t('common.unlimited') }}
+              </div>
+            </div>
+
+            <!-- 费用预览 -->
+            <div
+              v-if="selectedProviderInfo && selectedRechargeFee > 0"
+              class="p-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-sm"
+            >
+              <div class="flex items-start gap-2 text-amber-600 dark:text-amber-400">
+                <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <div class="min-w-0 space-y-1">
+                  <div>
+                    {{ $t('wallet.feeNote') }}:
+                    <span v-if="selectedFeeConfig.feeRate > 0" class="font-medium">{{ (selectedFeeConfig.feeRate * 100).toFixed(2) }}%</span>
+                    <span v-if="selectedFeeConfig.feeRate > 0 && selectedFeeConfig.feeFixed > 0"> + </span>
+                    <span v-if="selectedFeeConfig.feeFixed > 0" class="font-medium">¥{{ selectedFeeConfig.feeFixed.toFixed(2) }}</span>
+                    <span class="font-medium"> = ¥{{ selectedRechargeFee.toFixed(2) }}</span>
+                  </div>
+                  <div>
+                    {{ $t('wallet.payableAmount') }}:
+                    <span class="font-semibold">¥{{ selectedPayableAmount.toFixed(2) }}</span>
+                    <span class="text-themed-muted"> / {{ $t('wallet.actualAmount') }} ¥{{ selectedCreditAmount.toFixed(2) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 确认复选框组 -->
+            <div class="space-y-2">
+              <!-- 无退款确认 -->
+              <label for="agree-no-refund" class="flex items-start gap-2 cursor-pointer">
+                <input
+                  id="agree-no-refund"
+                  v-model="agreedToNoRefund"
+                  type="checkbox"
+                  class="mt-0.5 h-4 w-4 flex-shrink-0 rounded border-gray-300 dark:border-gray-600 text-red-600 focus:ring-red-500 bg-transparent"
+                />
+                <span class="text-xs text-red-500 leading-relaxed">
+                  {{ $t('wallet.noRefundNotice') }}
+                </span>
+              </label>
+
+              <!-- 充值须知确认 -->
+              <label for="agree-recharge-notice" class="flex items-start gap-2 cursor-pointer">
+                <input
+                  id="agree-recharge-notice"
+                  v-model="agreedToRechargeNotice"
+                  type="checkbox"
+                  class="mt-0.5 h-4 w-4 flex-shrink-0 rounded border-gray-300 dark:border-gray-600 text-red-600 focus:ring-red-500 bg-transparent"
+                />
+                <span class="text-xs text-red-500 leading-relaxed">
+                  {{ $t('wallet.rechargeNotice') }}
+                </span>
+              </label>
+
+              <!-- 服务条款勾选 -->
+              <label for="agree-terms-recharge" class="flex items-start gap-2 cursor-pointer">
+                <input
+                  id="agree-terms-recharge"
+                  v-model="agreedToTerms"
+                  type="checkbox"
+                  class="mt-0.5 h-4 w-4 flex-shrink-0 rounded border-gray-300 dark:border-gray-600 text-red-600 focus:ring-red-500 bg-transparent"
+                />
+                <span class="text-xs text-red-500 leading-relaxed">
+                  {{ $t('auth.tos.agreePrefix') }}
+                  <button
+                    type="button"
+                    class="text-red-600 hover:text-red-500 hover:underline font-medium"
+                    @click.prevent="showTermsModal = true"
+                  >
+                    {{ $t('auth.tos.termsLink') }}
+                  </button>
+                </span>
+              </label>
+            </div>
+          </div>
+          
+          <div class="modal-footer border-t-0 pt-2">
+            <button class="btn btn-ghost" @click="showRechargeModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary min-w-[120px]"
+              :disabled="rechargeLoading || !selectedProvider || rechargeAmount <= 0 || !agreedToNoRefund || !agreedToRechargeNotice || !agreedToTerms"
+              @click="createRechargeOrder"
+            >
+              <svg v-if="!rechargeLoading" class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              <svg v-else class="w-4 h-4 mr-1.5 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ rechargeLoading ? $t('common.processing') : $t('wallet.pay') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 创建优惠码弹窗 -->
+    <Teleport to="body">
+      <div v-if="showCreateCodeModal" class="modal-overlay" @click.self="showCreateCodeModal = false">
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('aff.createCode') }}</h3>
+            <button class="btn btn-ghost btn-sm rounded-full" @click="showCreateCodeModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <div>
+              <label class="label text-sm mb-2">{{ $t('aff.selectPlan') }}</label>
+              <p class="text-xs text-themed-muted mb-3">{{ $t('aff.selectPlanHint') }}</p>
+              
+              <div v-if="affPlansLoading" class="p-4 text-center text-themed-muted">
+                {{ $t('common.loading') }}...
+              </div>
+              <div v-else-if="affPlans.length === 0" class="p-4 text-center text-themed-muted">
+                {{ $t('aff.noCodes') }}
+              </div>
+              <div v-else class="space-y-2 max-h-64 overflow-y-auto">
+                <!-- 全局优惠码选项 -->
+                <label
+                  class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors"
+                  :class="[
+                    selectedPlanId === -1 
+                      ? 'border-blue-500 bg-blue-500/10' 
+                      : 'border-themed hover:border-gray-400 hover:bg-themed-hover'
+                  ]"
+                >
+                  <input
+                    v-model="selectedPlanId"
+                    type="radio"
+                    :value="-1"
+                    class="w-4 h-4"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                      <span class="font-medium text-themed">{{ $t('aff.globalCode') }}</span>
+                      <span class="badge badge-xs badge-primary">{{ $t('aff.globalCodeBadge') }}</span>
+                    </div>
+                    <div class="text-xs text-themed-muted">{{ $t('aff.globalCodeHint') }}</div>
+                  </div>
+                </label>
+                
+                <!-- 分隔线 -->
+                <div v-if="affPlans.length > 0" class="relative py-2">
+                  <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-themed"></div>
+                  </div>
+                  <div class="relative flex justify-center text-xs">
+                    <span class="px-2 bg-themed text-themed-muted">{{ $t('aff.orSelectPlan') }}</span>
+                  </div>
+                </div>
+                
+                <!-- 方案专有码选项 -->
+                <label
+                  v-for="plan in affPlans"
+                  :key="plan.id"
+                  class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors"
+                  :class="[
+                    plan.hasCode 
+                      ? 'border-themed bg-themed-secondary cursor-not-allowed opacity-50'
+                      : selectedPlanId === plan.id 
+                        ? 'border-blue-500 bg-blue-500/10' 
+                        : 'border-themed hover:border-gray-400 hover:bg-themed-hover'
+                  ]"
+                >
+                  <input
+                    v-model="selectedPlanId"
+                    type="radio"
+                    :value="plan.id"
+                    :disabled="plan.hasCode"
+                    class="w-4 h-4"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                      <span class="font-medium text-themed">{{ plan.name }}</span>
+                      <span v-if="plan.hasCode" class="text-xs text-themed-muted">({{ $t('aff.alreadyCreated') }})</span>
+                    </div>
+                    <div class="text-xs text-themed-muted">{{ plan.packageName }} · ¥{{ (parseFloat(plan.price) / 100).toFixed(2) }}</div>
+                  </div>
+                </label>
+              </div>
+            </div>
+            
+            <!-- 固定折扣说明 -->
+            <div class="mt-5 pt-4 border-t border-themed">
+              <div class="flex items-center justify-between">
+                <div>
+                  <label class="text-sm font-medium text-themed">{{ $t('aff.fixedRate') }}</label>
+                  <p class="text-xs text-themed-muted mt-0.5">{{ $t('aff.fixedRateHint') }}</p>
+                </div>
+                <div class="text-right">
+                  <div class="text-2xl font-bold text-themed tabular-nums">5%</div>
+                  <div class="text-xs text-themed-muted">{{ $t('aff.discount') }} 5% / {{ $t('aff.commission') }} 5%</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showCreateCodeModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary"
+              :disabled="createCodeLoading || selectedPlanId === null"
+              @click="createAffCode"
+            >
+              {{ createCodeLoading ? $t('common.processing') : $t('common.create') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 转化申请弹窗 -->
+    <Teleport to="body">
+      <div v-if="showConvertModal" class="modal-overlay" @click.self="showConvertModal = false">
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('aff.convertModal.title') }}</h3>
+            <button class="btn btn-ghost btn-sm rounded-full" @click="showConvertModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <div>
+              <label class="label text-sm mb-1">{{ $t('aff.convertModal.currentBalance') }}</label>
+              <div class="text-2xl font-bold text-themed">¥{{ affStatus?.currentBalance.toFixed(2) || '0.00' }}</div>
+            </div>
+            
+            <div>
+              <label class="label text-sm mb-2">{{ $t('aff.convertModal.amount') }}</label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-themed-muted font-medium">¥</span>
+                <input
+                  v-model.number="convertAmount"
+                  type="number"
+                  class="input w-full pl-8"
+                  :max="affStatus?.currentBalance || 0"
+                  min="2"
+                  step="0.01"
+                />
+              </div>
+              <p class="text-xs text-themed-muted mt-1">{{ $t('aff.convertModal.minAmount') }}</p>
+            </div>
+            
+            <div class="p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg">
+              <div class="flex items-start gap-2 text-amber-600 dark:text-amber-400 text-sm">
+                <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                <span>{{ $t('aff.convertModal.hint') }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showConvertModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary"
+              :disabled="convertLoading || convertAmount < 0.1 || convertAmount > (affStatus?.currentBalance || 0)"
+              @click="submitConvert"
+            >
+              {{ convertLoading ? $t('common.processing') : $t('aff.convertModal.submit') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- AFF 榜单弹窗 -->
+    <Teleport to="body">
+      <div v-if="showLeaderboardModal" class="modal-overlay" @click.self="showLeaderboardModal = false">
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <div class="flex items-center gap-2">
+              <span class="text-xl">🏆</span>
+              <h3 class="modal-title">{{ $t('aff.leaderboard.title') }}</h3>
+            </div>
+            <button class="btn btn-ghost btn-sm rounded-full" @click="showLeaderboardModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body p-0">
+            <!-- 加载中 -->
+            <div v-if="leaderboardLoading" class="p-8 text-center text-themed-muted">
+              {{ $t('common.loading') }}...
+            </div>
+            
+            <!-- 空状态 -->
+            <div v-else-if="leaderboard.length === 0" class="p-8 text-center">
+              <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-themed-secondary flex items-center justify-center">
+                <svg class="w-8 h-8 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+              </div>
+              <p class="text-themed-muted">{{ $t('aff.leaderboard.empty') }}</p>
+            </div>
+            
+            <!-- 榜单列表 -->
+            <div v-else class="divide-y divide-themed">
+              <div 
+                v-for="(entry, index) in leaderboard" 
+                :key="entry.rank"
+                class="flex items-center justify-between px-4 py-3 transition-all duration-300"
+                :class="[
+                  entry.isCurrentUser ? 'bg-blue-500/10 dark:bg-blue-500/20' : 'hover:bg-themed-hover',
+                ]"
+                :style="{ animationDelay: `${index * 50}ms` }"
+              >
+                <div class="flex items-center gap-3">
+                  <!-- 排名 -->
+                  <div 
+                    class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+                    :class="getRankStyle(entry.rank)"
+                  >
+                    <span v-if="entry.rank <= 3">{{ getRankEmoji(entry.rank) }}</span>
+                    <span v-else>{{ entry.rank }}</span>
+                  </div>
+                  <!-- 用户名 -->
+                  <div class="flex flex-col">
+                    <span 
+                      class="font-medium"
+                      :class="entry.isCurrentUser ? 'text-blue-500' : 'text-themed'"
+                    >
+                      {{ entry.username }}
+                    </span>
+                    <span v-if="entry.isCurrentUser" class="text-xs text-blue-500">
+                      {{ $t('aff.leaderboard.you') }}
+                    </span>
+                  </div>
+                </div>
+                <!-- 收益金额 -->
+                <div class="text-right">
+                  <span class="text-green-500 font-semibold">¥{{ entry.totalEarnings.toFixed(2) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="modal-footer border-t border-themed">
+            <button class="btn btn-primary w-full" @click="showLeaderboardModal = false">
+              {{ $t('common.close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 服务条款弹窗 -->
+    <TermsOfServiceModal
+      :show="showTermsModal"
+      @close="showTermsModal = false"
+    />
+  </div>
+</template>
diff --git a/client/src/views/admin/AdminInstanceCreateView.vue b/client/src/views/admin/AdminInstanceCreateView.vue
new file mode 100644
index 0000000..b035bba
--- /dev/null
+++ b/client/src/views/admin/AdminInstanceCreateView.vue
@@ -0,0 +1,833 @@
+<script setup lang="ts">
+/**
+ * 管理员创建实例页面
+ * 支持创建免费实例或付费实例
+ */
+import { ref, onMounted, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import PackageSelector from '@/components/instance/PackageSelector.vue'
+import ResourceSliders from '@/components/instance/ResourceSliders.vue'
+import HostSelector from '@/components/instance/HostSelector.vue'
+import ImageSelector from '@/components/instance/ImageSelector.vue'
+import type { Package, AvailableHost, PackagePlan } from '@/types/api'
+import { validateName as validateInstanceName } from '@/utils/validation'
+import { translateError } from '@/utils/errorHandler'
+
+interface ImageOption {
+  value: string
+  label: string
+  icon: string | null
+}
+
+type PackageScope = 'official' | 'hosted'
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 数据加载状态
+const packages = ref<Package[]>([])
+const availableHosts = ref<AvailableHost[]>([])
+const availableImages = ref<ImageOption[]>([])
+const imagesLoading = ref<boolean>(false)
+const hostsLoading = ref<boolean>(false)
+const loading = ref<boolean>(true)
+const packagesLoading = ref<boolean>(false)
+const submitting = ref<boolean>(false)
+const error = ref<string>('')
+
+// 用户名搜索
+const usernameInput = ref('')
+const usernameValid = ref<boolean | null>(null)
+const usernameChecking = ref(false)
+const targetUser = ref<{ id: number; username: string; balance?: number } | null>(null)
+
+// 实例类型选择：免费/付费
+const instanceType = ref<'free' | 'paid'>('free')
+const packageScope = ref<PackageScope>('official')
+
+// 付费方案相关
+const plans = ref<PackagePlan[]>([])
+const plansLoading = ref(false)
+const selectedPlanId = ref<number | null>(null)
+const chargeFirstMonth = ref(true)
+
+let packageRequestSeq = 0
+let plansRequestSeq = 0
+let hostsRequestSeq = 0
+let imagesRequestSeq = 0
+
+// 表单数据
+interface InstanceForm {
+  name: string
+  packageId: number | null
+  hostId: number | null
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+}
+
+const form = ref<InstanceForm>({
+  name: '',
+  packageId: null,
+  hostId: null,
+  image: '',
+  cpu: 15,
+  memory: 128,
+  disk: 512
+})
+
+// 当前选中的套餐
+const selectedPackage = computed<Package | undefined>(() => packages.value.find(p => p.id === form.value.packageId))
+
+// 当前选中的方案
+const selectedPlan = computed<PackagePlan | undefined>(() => plans.value.find(p => p.id === selectedPlanId.value))
+
+// 计算费用（付费实例）
+const billingInfo = computed(() => {
+  if (!selectedPlan.value) return null
+  const plan = selectedPlan.value
+  const price = plan.price / 100  // 分转元
+  return {
+    price,
+    totalPrice: price,
+    billingCycle: plan.billingCycle
+  }
+})
+
+// 检查用户余额是否充足
+const isBalanceSufficient = computed(() => {
+  if (instanceType.value === 'free') return true
+  if (!chargeFirstMonth.value) return true
+  if (!billingInfo.value || !targetUser.value) return true
+  return (targetUser.value.balance ?? 0) >= billingInfo.value.totalPrice
+})
+
+// 从镜像名称提取发行版标识
+function getDistroFromName(name: string): string {
+  const lowerName = (name || '').toLowerCase()
+  const distros = ['almalinux', 'alma', 'alpine', 'arch', 'centos', 'debian', 'fedora', 'gentoo', 'kali', 'mint', 'opensuse', 'suse', 'oracle', 'redhat', 'rhel', 'rockylinux', 'rocky', 'ubuntu', 'void']
+  for (const distro of distros) {
+    if (lowerName.includes(distro)) return distro
+  }
+  return 'linux'
+}
+
+const canSubmit = computed<boolean>(() => {
+  // 基本条件
+  const basic = !!form.value.name &&
+         form.value.packageId !== null &&
+         form.value.hostId !== null &&
+         !!form.value.image &&
+         availableImages.value.length > 0 &&
+         usernameValid.value === true &&
+         targetUser.value !== null &&
+         !submitting.value
+  
+  // 付费实例需要选择方案且余额充足
+  if (instanceType.value === 'paid') {
+    return basic && selectedPlanId.value !== null && !!selectedPlan.value && !selectedPlan.value.isSoldOut && isBalanceSufficient.value
+  }
+  
+  return basic
+})
+
+// 检测资源不足
+const hostsInsufficient = computed<boolean>(() => {
+  return !hostsLoading.value &&
+         selectedPackage.value !== undefined &&
+         !!selectedPackage.value.host_ids &&
+         selectedPackage.value.host_ids.length > 0 &&
+         availableHosts.value.length === 0
+})
+
+onMounted(async (): Promise<void> => {
+  loading.value = true
+  try {
+    await loadPackagesForScope(packageScope.value)
+  } catch (err: any) {
+    error.value = t('instance.createPage.loadFailed') + ': ' + (err?.message || String(err))
+  } finally {
+    loading.value = false
+  }
+})
+
+// 验证用户名
+async function checkUsername(): Promise<void> {
+  if (!usernameInput.value.trim()) {
+    usernameValid.value = null
+    targetUser.value = null
+    return
+  }
+
+  usernameChecking.value = true
+  try {
+    // 使用精确查找接口，按用户名绝对匹配
+    const res = await api.admin.lookupUser(usernameInput.value.trim()) as any
+    usernameValid.value = true
+    targetUser.value = { 
+      id: res.user.id, 
+      username: res.user.username,
+      balance: res.user.balance ?? 0
+    }
+  } catch {
+    usernameValid.value = false
+    targetUser.value = null
+  } finally {
+    usernameChecking.value = false
+  }
+}
+
+function sortPackagesForCreate(items: Package[]): Package[] {
+  return [...items].sort((a, b) => {
+    if (a.soldOut === b.soldOut) return 0
+    return a.soldOut ? 1 : -1
+  })
+}
+
+function resetPackageDependentState(): void {
+  plansRequestSeq += 1
+  hostsRequestSeq += 1
+  imagesRequestSeq += 1
+  form.value.packageId = null
+  form.value.hostId = null
+  form.value.image = ''
+  availableHosts.value = []
+  availableImages.value = []
+  plans.value = []
+  selectedPlanId.value = null
+  plansLoading.value = false
+  hostsLoading.value = false
+  imagesLoading.value = false
+}
+
+function clearImages(): void {
+  imagesRequestSeq += 1
+  availableImages.value = []
+  form.value.image = ''
+  imagesLoading.value = false
+}
+
+async function loadPackagesForScope(scope: PackageScope): Promise<void> {
+  const requestSeq = ++packageRequestSeq
+  packagesLoading.value = true
+  resetPackageDependentState()
+  packages.value = []
+
+  try {
+    const packagesRes = await api.packages.list({ scope })
+    if (requestSeq !== packageRequestSeq) return
+
+    const allPackages = ((packagesRes as { packages?: Package[] }).packages || []).filter(p => p.active === 1)
+    packages.value = sortPackagesForCreate(allPackages)
+
+    if (packages.value.length > 0) {
+      await selectPackage(packages.value[0])
+    }
+  } finally {
+    if (requestSeq === packageRequestSeq) {
+      packagesLoading.value = false
+    }
+  }
+}
+
+async function switchPackageScope(scope: PackageScope): Promise<void> {
+  if (scope === packageScope.value || packagesLoading.value) return
+
+  packageScope.value = scope
+  error.value = ''
+
+  try {
+    await loadPackagesForScope(scope)
+  } catch (err: any) {
+    packages.value = []
+    error.value = t('instance.createPage.loadFailed') + ': ' + (err?.message || String(err))
+  }
+}
+
+// 加载套餐方案列表
+async function loadPlans(packageId: number): Promise<void> {
+  const requestSeq = ++plansRequestSeq
+  plansLoading.value = true
+  selectedPlanId.value = null
+  try {
+    const res = await api.packages.getPlans(packageId) as any
+    if (requestSeq !== plansRequestSeq || form.value.packageId !== packageId) return
+
+    plans.value = ((res.plans || []) as PackagePlan[]).filter(p => p.isActive)
+    // 默认选中第一个方案
+    selectedPlanId.value = plans.value.find(plan => !plan.isSoldOut)?.id ?? null
+  } catch {
+    if (requestSeq === plansRequestSeq) {
+      plans.value = []
+    }
+  } finally {
+    if (requestSeq === plansRequestSeq) {
+      plansLoading.value = false
+    }
+  }
+}
+
+const isSwitchingPackage = ref(false)
+
+async function selectPackage(pkg: Package): Promise<void> {
+  plansRequestSeq += 1
+  hostsRequestSeq += 1
+  imagesRequestSeq += 1
+  isSwitchingPackage.value = true
+
+  form.value.packageId = pkg.id
+  form.value.hostId = null
+  form.value.image = ''
+  availableHosts.value = []
+  availableImages.value = []
+  
+  // 重置方案选择
+  plans.value = []
+  selectedPlanId.value = null
+
+  // 设置默认资源配置（套餐最大值的一半）- 仅用于免费实例
+  const cpuMax = Math.max(15, pkg.cpu_max || 15)
+  const cpuHalf = Math.ceil(cpuMax / 2)
+  form.value.cpu = Math.max(15, Math.min(Math.floor(cpuHalf / 5) * 5, cpuMax))
+
+  const memoryMax = Math.max(128, pkg.memory_max || 128)
+  const memoryHalf = Math.ceil(memoryMax / 2)
+  form.value.memory = Math.max(128, Math.min(Math.floor(memoryHalf / 64) * 64, memoryMax))
+
+  const diskMax = Math.max(512, pkg.disk_max || 512)
+  const diskHalf = Math.ceil(diskMax / 2)
+  form.value.disk = Math.max(512, Math.min(Math.floor(diskHalf / 102) * 102, diskMax))
+
+  isSwitchingPackage.value = false
+
+  if (!pkg.host_ids || pkg.host_ids.length === 0) {
+    availableHosts.value = []
+    availableImages.value = []
+    form.value.image = ''
+    toast.warning(t('instance.createPage.packageNoHosts'))
+  } else {
+    loadAvailableHosts()
+  }
+
+  previousMemoryIsLow = form.value.memory <= 128
+  
+  // 加载方案列表（用于付费实例）
+  await loadPlans(pkg.id)
+}
+
+async function loadAvailableHosts(): Promise<void> {
+  const requestSeq = ++hostsRequestSeq
+  const packageId = form.value.packageId
+  const planId = instanceType.value === 'paid' ? selectedPlanId.value || null : null
+
+  if (!packageId) {
+    availableHosts.value = []
+    form.value.hostId = null
+    hostsLoading.value = false
+    clearImages()
+    return
+  }
+
+  if (!selectedPackage.value?.host_ids || selectedPackage.value.host_ids.length === 0) {
+    availableHosts.value = []
+    form.value.hostId = null
+    hostsLoading.value = false
+    clearImages()
+    return
+  }
+
+  // 确定资源配置：付费实例用方案配置，免费实例用自定义配置
+  const cpu = instanceType.value === 'paid' && selectedPlan.value ? selectedPlan.value.cpu : form.value.cpu
+  const memory = instanceType.value === 'paid' && selectedPlan.value ? selectedPlan.value.memory : form.value.memory
+  const disk = instanceType.value === 'paid' && selectedPlan.value ? selectedPlan.value.disk : form.value.disk
+
+  hostsLoading.value = true
+  try {
+    const res = await api.instances.getAvailableHosts({
+      packageId,
+      planId: planId || undefined,
+      cpu,
+      memory,
+      disk
+    })
+    if (
+      requestSeq !== hostsRequestSeq ||
+      form.value.packageId !== packageId ||
+      (instanceType.value === 'paid' ? (selectedPlanId.value || null) !== planId : planId !== null)
+    ) {
+      return
+    }
+
+    availableHosts.value = (res as { hosts?: AvailableHost[] }).hosts || []
+
+    if (availableHosts.value.length === 0) {
+      form.value.hostId = null
+      clearImages()
+      return
+    }
+
+    const currentExists = availableHosts.value.some(host => host.id === form.value.hostId)
+    if (!currentExists) {
+      form.value.hostId = availableHosts.value[0].id
+    }
+  } catch {
+    if (requestSeq === hostsRequestSeq) {
+      availableHosts.value = []
+      form.value.hostId = null
+      clearImages()
+    }
+  } finally {
+    if (requestSeq === hostsRequestSeq) {
+      hostsLoading.value = false
+    }
+  }
+}
+
+watch(() => form.value.packageId, () => {
+  if (selectedPackage.value) {
+    const cpuMax = Math.max(15, selectedPackage.value.cpu_max || 15)
+    const normalizedCpu = Math.max(15, Math.min(Math.floor(form.value.cpu / 5) * 5, cpuMax))
+    form.value.cpu = normalizedCpu
+    const memoryMax = Math.max(128, selectedPackage.value.memory_max || 128)
+    const normalizedMemory = Math.max(128, Math.min(Math.floor(form.value.memory / 64) * 64, memoryMax))
+    const diskMax = Math.max(512, selectedPackage.value.disk_max || 512)
+    const normalizedDisk = Math.max(512, Math.min(Math.floor(form.value.disk / 102) * 102, diskMax))
+    form.value.memory = normalizedMemory
+    form.value.disk = normalizedDisk
+  }
+})
+
+watch([() => form.value.cpu, () => form.value.memory, () => form.value.disk], () => {
+  // 免费实例资源变更时重新加载宿主机
+  if (form.value.packageId && !isSwitchingPackage.value && instanceType.value === 'free') {
+    loadAvailableHosts()
+  }
+}, { immediate: false })
+
+watch(() => form.value.hostId, (newHostId) => {
+  if (!selectedPackage.value || isSwitchingPackage.value) return
+
+  if (!newHostId) {
+    availableImages.value = []
+    form.value.image = ''
+    return
+  }
+
+  const currentMemory = instanceType.value === 'paid' && selectedPlan.value ? selectedPlan.value.memory : form.value.memory
+  loadAvailableImages(
+    selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+    currentMemory,
+    newHostId
+  )
+}, { immediate: false })
+
+// 内存变化时重新加载镜像（128MB 限制只能选 Alpine/Debian）
+let previousMemoryIsLow = false
+watch(() => form.value.memory, (newMemory) => {
+  if (!selectedPackage.value || isSwitchingPackage.value) return
+  
+  const currentIsLow = newMemory <= 128
+  // 只有在跨越 128MB 阈值时才重新加载镜像
+  if (currentIsLow !== previousMemoryIsLow) {
+    previousMemoryIsLow = currentIsLow
+    loadAvailableImages(
+      selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+      newMemory,
+      form.value.hostId || undefined
+    )
+  }
+}, { immediate: false })
+
+// 实例类型或方案变更时重新加载宿主机
+watch([instanceType, selectedPlanId], async () => {
+  if (form.value.packageId && !isSwitchingPackage.value) {
+    await loadAvailableHosts()
+
+    if (form.value.hostId && selectedPackage.value) {
+      const currentMemory = instanceType.value === 'paid' && selectedPlan.value ? selectedPlan.value.memory : form.value.memory
+      await loadAvailableImages(
+        selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+        currentMemory,
+        form.value.hostId
+      )
+    }
+  }
+})
+
+// 付费方案变化时重新加载镜像（根据方案内存过滤）
+watch(selectedPlanId, (newPlanId) => {
+  if (!newPlanId || !selectedPackage.value) return
+  
+  const plan = plans.value.find(p => p.id === newPlanId)
+  if (!plan) return
+  
+  const planMemory = plan.memory
+  const currentIsLow = planMemory <= 128
+  
+  // 只有在跨越 128MB 阈值时才重新加载镜像
+  if (currentIsLow !== previousMemoryIsLow) {
+    previousMemoryIsLow = currentIsLow
+    loadAvailableImages(
+      selectedPackage.value.instance_type as 'container' | 'vm' | undefined,
+      planMemory,
+      form.value.hostId || undefined
+    )
+  }
+})
+
+async function loadAvailableImages(pkgInstanceType?: 'container' | 'vm', memory?: number, hostId?: number): Promise<void> {
+  const requestSeq = ++imagesRequestSeq
+  if (!hostId) {
+    availableImages.value = []
+    form.value.image = ''
+    imagesLoading.value = false
+    return
+  }
+
+  imagesLoading.value = true
+  try {
+    const res = await api.images.getSystemImages(pkgInstanceType, memory, hostId)
+    if (requestSeq !== imagesRequestSeq || form.value.hostId !== hostId) return
+
+    availableImages.value = (res.images || []).map(img => ({
+      value: img.remoteAlias,
+      label: img.name,
+      icon: img.icon || getDistroFromName(img.name)
+    }))
+
+    if (availableImages.value.length > 0) {
+      const currentExists = availableImages.value.some((img) => img.value === form.value.image)
+      if (!currentExists) {
+        form.value.image = availableImages.value[0].value
+      }
+    } else {
+      form.value.image = ''
+    }
+  } catch {
+    if (requestSeq === imagesRequestSeq) {
+      availableImages.value = []
+      form.value.image = ''
+    }
+  } finally {
+    if (requestSeq === imagesRequestSeq) {
+      imagesLoading.value = false
+    }
+  }
+}
+
+async function handleSubmit(): Promise<void> {
+  if (!canSubmit.value) return
+
+  error.value = ''
+  submitting.value = true
+
+  try {
+    if (form.value.packageId === null) throw new Error(t('instance.createPage.selectPackage'))
+    if (form.value.hostId === null) throw new Error(t('instance.selector.selectHost'))
+    if (!targetUser.value) throw new Error(t('admin.instanceCreate.selectUser'))
+
+    const nameValidation = validateInstanceName(form.value.name)
+    if (!nameValidation.valid) {
+      throw new Error(nameValidation.message)
+    }
+
+    // 构建请求参数
+    const params: any = {
+      username: targetUser.value.username,
+      name: form.value.name,
+      packageId: form.value.packageId,
+      hostId: form.value.hostId,
+      image: form.value.image
+    }
+
+    // 付费实例参数
+    if (instanceType.value === 'paid' && selectedPlanId.value) {
+      params.planId = selectedPlanId.value
+      params.chargeFirstMonth = chargeFirstMonth.value
+    } else {
+      // 免费实例使用自定义资源配置
+      params.cpu = form.value.cpu
+      params.memory = form.value.memory
+      params.disk = form.value.disk
+    }
+
+    const res = await api.admin.createInstance(params)
+
+    toast.success(t('admin.instanceCreate.success'))
+
+    // 显示创建结果
+    const instance = (res as any).instance
+    if (instance?.rootPassword) {
+      toast.info(`SSH Port: ${instance.sshPort}, Password: ${instance.rootPassword}`, 10000)
+    }
+
+    // 重置表单
+    usernameInput.value = ''
+    usernameValid.value = null
+    targetUser.value = null
+    form.value.name = ''
+    instanceType.value = 'free'
+    chargeFirstMonth.value = true
+    // 重置套餐选择，触发资源和镜像重新加载
+    if (packages.value.length > 0) {
+      await selectPackage(packages.value[0])
+    }
+  } catch (err: any) {
+    error.value = translateError(err)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ $t('admin.instanceCreate.title') }}</h1>
+        <p class="page-description">{{ $t('admin.instanceCreate.description') }}</p>
+      </div>
+    </div>
+
+    <div v-if="loading" class="card p-8 text-center text-themed-muted">
+      <svg class="w-8 h-8 mx-auto mb-2 animate-spin icon-themed-muted" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      {{ $t('common.loading') }}
+    </div>
+
+    <form v-else class="space-y-6" @submit.prevent="handleSubmit">
+      <!-- 目标用户 -->
+      <div class="card p-5">
+        <h3 class="font-medium text-themed mb-4">{{ $t('admin.instanceCreate.targetUser') }}</h3>
+        <div class="relative">
+          <input
+            v-model="usernameInput"
+            type="text"
+            class="input w-full pr-10"
+            :placeholder="$t('admin.instanceCreate.usernamePlaceholder')"
+            @blur="checkUsername"
+            @keyup.enter="checkUsername"
+          />
+          <div v-if="usernameChecking" class="absolute right-3 top-1/2 -translate-y-1/2">
+            <svg class="w-5 h-5 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+          </div>
+          <div v-else-if="usernameValid === true" class="absolute right-3 top-1/2 -translate-y-1/2">
+            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <div v-else-if="usernameValid === false" class="absolute right-3 top-1/2 -translate-y-1/2">
+            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </div>
+        </div>
+        <p v-if="usernameValid === true && targetUser" class="text-xs text-green-500 mt-2">
+          {{ $t('admin.instanceCreate.userFound', { id: targetUser.id }) }}
+        </p>
+        <p v-else-if="usernameValid === false" class="text-xs text-red-500 mt-2">
+          {{ $t('admin.instanceCreate.userNotFound') }}
+        </p>
+        <p class="text-xs text-themed-muted mt-2">
+          {{ $t('admin.instanceCreate.userHint') }}
+        </p>
+      </div>
+
+      <!-- 套餐选择 -->
+      <PackageSelector
+        :packages="packages"
+        :selected-package-id="form.packageId"
+        :loading="packagesLoading"
+        @select="selectPackage"
+      >
+        <template #header-actions>
+          <div class="inline-flex rounded-lg p-1" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+            <button
+              type="button"
+              class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+              :class="packageScope === 'official'
+                ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm')
+                : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+              :disabled="packagesLoading"
+              @click="switchPackageScope('official')"
+            >
+              {{ $t('admin.instanceCreate.packageScope.official') }}
+            </button>
+            <button
+              type="button"
+              class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+              :class="packageScope === 'hosted'
+                ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm')
+                : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+              :disabled="packagesLoading"
+              @click="switchPackageScope('hosted')"
+            >
+              {{ $t('admin.instanceCreate.packageScope.hosted') }}
+            </button>
+          </div>
+        </template>
+      </PackageSelector>
+
+      <!-- 实例类型选择 -->
+      <div class="card p-5">
+        <h3 class="font-medium text-themed mb-4">{{ $t('admin.instanceCreate.instanceType') }}</h3>
+        <div class="flex gap-4">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input v-model="instanceType" type="radio" value="free" class="w-4 h-4 accent-blue-500" />
+            <span class="text-themed">{{ $t('admin.instanceCreate.freeInstance') }}</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer" :class="{ 'opacity-50': plans.length === 0 }">
+            <input v-model="instanceType" type="radio" value="paid" class="w-4 h-4 accent-blue-500" :disabled="plans.length === 0" />
+            <span class="text-themed">{{ $t('admin.instanceCreate.paidInstance') }}</span>
+          </label>
+        </div>
+        <p v-if="plans.length === 0" class="text-xs text-themed-muted mt-2">
+          {{ $t('admin.instanceCreate.noPlanHint') }}
+        </p>
+      </div>
+
+      <!-- 付费方案选择（仅付费实例） -->
+      <div v-if="instanceType === 'paid' && plans.length > 0" class="card p-5">
+        <h3 class="font-medium text-themed mb-4">{{ $t('admin.instanceCreate.selectPlan') }}</h3>
+        
+        <div v-if="plansLoading" class="text-center py-4 text-themed-muted">
+          {{ $t('common.loading') }}
+        </div>
+        
+        <div v-else class="space-y-3">
+          <!-- 方案列表 -->
+          <div
+            v-for="plan in plans"
+            :key="plan.id"
+            class="p-4 rounded-lg border cursor-pointer transition-all"
+            :class="[
+              plan.isSoldOut ? 'cursor-not-allowed opacity-60' : '',
+              selectedPlanId === plan.id && !plan.isSoldOut
+                ? 'border-blue-500 bg-blue-500/10'
+                : plan.isSoldOut
+                  ? (themeStore.isDark ? 'border-gray-700 bg-gray-800/40' : 'border-gray-200 bg-gray-50')
+                  : 'border-themed hover:border-blue-300'
+            ]"
+            @click="!plan.isSoldOut && (selectedPlanId = plan.id)"
+          >
+            <div class="flex justify-between items-start">
+              <div>
+                <div class="flex items-center gap-2">
+                  <span class="font-medium text-themed">{{ plan.name }}</span>
+                  <span
+                    v-if="plan.isSoldOut"
+                    class="text-xs px-2 py-0.5 rounded-full"
+                    :class="themeStore.isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-50 text-red-700'"
+                  >
+                    {{ $t('instance.selector.planSoldOut') }}
+                  </span>
+                </div>
+                <div class="text-sm text-themed-muted mt-1">
+                  CPU {{ plan.cpu }}% | {{ plan.memory >= 1024 ? `${(plan.memory / 1024).toFixed(1)} GB` : `${plan.memory} MB` }} | {{ plan.disk >= 1024 ? `${(plan.disk / 1024).toFixed(0)} GB` : `${plan.disk} MB` }}
+                </div>
+              </div>
+              <div class="text-right">
+                <div class="font-semibold text-blue-500">¥{{ (plan.price / 100).toFixed(2) }}/{{ plan.billingCycle }}月</div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 扣除首月费用选项 -->
+          <div class="mt-4 pt-4 border-t border-themed">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input v-model="chargeFirstMonth" type="checkbox" class="w-4 h-4 accent-blue-500" />
+              <span class="text-sm text-themed">{{ $t('admin.instanceCreate.chargeFirstMonth') }}</span>
+            </label>
+            <p class="text-xs text-themed-muted mt-2 ml-6">
+              {{ chargeFirstMonth ? $t('admin.instanceCreate.chargeFirstMonthHint') : $t('admin.instanceCreate.noChargeFirstMonthHint') }}
+            </p>
+          </div>
+          
+          <!-- 费用摘要 -->
+          <div v-if="billingInfo && targetUser" class="mt-4 p-4 rounded-lg" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+            <div class="space-y-2 text-sm">
+              <div class="flex justify-between">
+                <span class="text-themed-muted">{{ $t('admin.instanceCreate.planPrice') }}</span>
+                <span class="text-themed">¥{{ billingInfo.price.toFixed(2) }}</span>
+              </div>
+              <div class="flex justify-between font-medium pt-2 border-t border-themed">
+                <span class="text-themed">{{ chargeFirstMonth ? $t('admin.instanceCreate.totalCharge') : $t('admin.instanceCreate.freeFirstMonth') }}</span>
+                <span :class="chargeFirstMonth ? 'text-blue-500' : 'text-green-500'">
+                  {{ chargeFirstMonth ? `¥${billingInfo.totalPrice.toFixed(2)}` : '¥0.00' }}
+                </span>
+              </div>
+              <div class="flex justify-between text-xs">
+                <span class="text-themed-muted">{{ $t('admin.instanceCreate.userBalance') }}</span>
+                <span :class="isBalanceSufficient ? 'text-green-500' : 'text-red-500'">
+                  ¥{{ (targetUser.balance ?? 0).toFixed(2) }}
+                  <span v-if="!isBalanceSufficient">(余额不足)</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 资源配置（仅免费实例） -->
+      <ResourceSliders
+        v-if="instanceType === 'free'"
+        :selected-package="selectedPackage || null"
+        :user-quota="null"
+        :cpu="form.cpu"
+        :memory="form.memory"
+        :disk="form.disk"
+        @update:cpu="form.cpu = $event"
+        @update:memory="form.memory = $event"
+        @update:disk="form.disk = $event"
+      />
+
+      <!-- 宿主机选择 -->
+      <HostSelector
+        :available-hosts="availableHosts"
+        :selected-host-id="form.hostId"
+        :hosts-loading="hostsLoading"
+        :hosts-insufficient="hostsInsufficient"
+        :cpu="instanceType === 'paid' && selectedPlan ? selectedPlan.cpu : form.cpu"
+        :memory="instanceType === 'paid' && selectedPlan ? selectedPlan.memory : form.memory"
+        :selected-package="selectedPackage || null"
+        @update:selected-host-id="form.hostId = $event"
+      />
+
+      <!-- 镜像选择 -->
+      <ImageSelector
+        :available-images="availableImages"
+        :selected-image="form.image"
+        :images-loading="imagesLoading"
+        @update:selected-image="form.image = $event"
+      />
+
+      <!-- 实例名称和提交 -->
+      <div class="card p-5">
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-themed-secondary mb-1.5">{{ $t('instance.createPage.instanceName') }}</label>
+            <input v-model="form.name" type="text" class="input" :placeholder="$t('instance.createPage.instanceNamePlaceholder')" required />
+          </div>
+
+          <div v-if="error" class="p-3 rounded-lg border text-sm" :class="themeStore.isDark ? 'bg-red-900/20 border-red-500/30 text-red-400' : 'bg-red-50 border-red-200 text-red-700'">
+            {{ error }}
+          </div>
+
+          <button type="submit" :disabled="!canSubmit" class="btn-primary w-full">
+            {{ submitting ? $t('instance.createPage.creating') : $t('admin.instanceCreate.submit') }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/client/src/views/admin/AdminMailView.vue b/client/src/views/admin/AdminMailView.vue
new file mode 100644
index 0000000..eba1ce3
--- /dev/null
+++ b/client/src/views/admin/AdminMailView.vue
@@ -0,0 +1,942 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { translateError } from '@/utils/errorHandler'
+import FlagIcon from '@/components/FlagIcon.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// TAB 状态
+const activeTab = ref<'sources' | 'plans' | 'subscriptions' | 'domains'>('sources')
+
+// 加载状态
+const loading = ref(true)
+const actionLoading = ref('')
+
+// 数据
+const sources = ref<any[]>([])
+const plans = ref<any[]>([])
+const subscriptions = ref<any[]>([])
+const domains = ref<any[]>([])
+
+// 邮箱源弹窗
+const showSourceModal = ref(false)
+const editingSource = ref<any>(null)
+const sourceForm = ref({
+  name: '',
+  code: 'us',
+  apiUrl: '',
+  apiKey: '',
+  smarterMailUrl: ''
+})
+
+// 方案弹窗
+const showPlanModal = ref(false)
+const editingPlan = ref<any>(null)
+const planForm = ref({
+  sourceId: 0,
+  name: '',
+  description: '',
+  domainLimit: 1,
+  diskLimitGb: 10,
+  price: 0,
+  billingCycle: 'monthly' as 'monthly' | 'yearly'
+})
+
+// 分页
+const subscriptionsPage = ref(1)
+const domainsPage = ref(1)
+const pageSize = ref(20)
+const totalSubscriptions = ref(0)
+const totalDomains = ref(0)
+
+// 搜索
+const subscriptionsSearch = ref('')
+const domainsSearch = ref('')
+
+// 分页计算属性
+const subscriptionsTotalPages = computed(() => Math.ceil(totalSubscriptions.value / pageSize.value))
+const domainsTotalPages = computed(() => Math.ceil(totalDomains.value / pageSize.value))
+
+onMounted(async () => {
+  await loadSources()
+})
+
+async function switchTab(tab: typeof activeTab.value) {
+  activeTab.value = tab
+  if (tab === 'sources' && sources.value.length === 0) {
+    await loadSources()
+  } else if (tab === 'plans' && plans.value.length === 0) {
+    await loadPlans()
+  } else if (tab === 'subscriptions') {
+    subscriptionsPage.value = 1
+    subscriptionsSearch.value = '' // 重置搜索条件
+    await loadSubscriptions()
+  } else if (tab === 'domains') {
+    domainsPage.value = 1
+    domainsSearch.value = '' // 重置搜索条件
+    await loadDomains()
+  }
+}
+
+// ===== 邮箱源管理 =====
+async function loadSources() {
+  loading.value = true
+  try {
+    const res = await api.mail.adminGetSources()
+    sources.value = res.sources || []
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreateSourceModal() {
+  editingSource.value = null
+  sourceForm.value = {
+    name: '',
+    code: 'us',
+    apiUrl: '',
+    apiKey: '',
+    smarterMailUrl: ''
+  }
+  showSourceModal.value = true
+}
+
+function openEditSourceModal(source: any) {
+  editingSource.value = source
+  sourceForm.value = {
+    name: source.name,
+    code: source.code,
+    apiUrl: source.apiUrl || '',
+    apiKey: source.apiKey || '',
+    smarterMailUrl: source.smarterMailUrl || ''
+  }
+  showSourceModal.value = true
+}
+
+async function saveSource() {
+  if (!sourceForm.value.name || !sourceForm.value.apiUrl) {
+    toast.error(t('admin.mail.fillRequired'))
+    return
+  }
+
+  actionLoading.value = 'save-source'
+  try {
+    if (editingSource.value) {
+      await api.mail.adminUpdateSource(editingSource.value.id, sourceForm.value)
+      toast.success(t('admin.mail.sourceUpdated'))
+    } else {
+      await api.mail.adminCreateSource(sourceForm.value)
+      toast.success(t('admin.mail.sourceCreated'))
+    }
+    showSourceModal.value = false
+    await loadSources()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function deleteSource(source: any) {
+  if (!confirm(t('admin.mail.confirmDeleteSource', { name: source.name }))) return
+
+  actionLoading.value = `delete-source-${source.id}`
+  try {
+    await api.mail.adminDeleteSource(source.id)
+    toast.success(t('admin.mail.sourceDeleted'))
+    await loadSources()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// ===== 方案管理 =====
+async function loadPlans() {
+  loading.value = true
+  try {
+    const res = await api.mail.adminGetPlans()
+    plans.value = res.plans || []
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreatePlanModal() {
+  if (sources.value.length === 0) {
+    toast.error(t('admin.mail.createSourceFirst'))
+    return
+  }
+  editingPlan.value = null
+  planForm.value = {
+    sourceId: sources.value[0]?.id || 0,
+    name: '',
+    description: '',
+    domainLimit: 1,
+    diskLimitGb: 10,
+    price: 0,
+    billingCycle: 'monthly'
+  }
+  showPlanModal.value = true
+}
+
+function openEditPlanModal(plan: any) {
+  editingPlan.value = plan
+  planForm.value = {
+    sourceId: plan.sourceId,
+    name: plan.name,
+    description: plan.description || '',
+    domainLimit: plan.domainLimit,
+    diskLimitGb: plan.diskLimitGb,
+    price: plan.price,
+    billingCycle: plan.billingCycle
+  }
+  showPlanModal.value = true
+}
+
+async function savePlan() {
+  if (!planForm.value.name || !planForm.value.sourceId || planForm.value.price <= 0) {
+    toast.error(t('admin.mail.fillRequired'))
+    return
+  }
+
+  actionLoading.value = 'save-plan'
+  try {
+    if (editingPlan.value) {
+      await api.mail.adminUpdatePlan(editingPlan.value.id, planForm.value)
+      toast.success(t('admin.mail.planUpdated'))
+    } else {
+      await api.mail.adminCreatePlan(planForm.value)
+      toast.success(t('admin.mail.planCreated'))
+    }
+    showPlanModal.value = false
+    await loadPlans()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function deletePlan(plan: any) {
+  if (!confirm(t('admin.mail.confirmDeletePlan', { name: plan.name }))) return
+
+  actionLoading.value = `delete-plan-${plan.id}`
+  try {
+    await api.mail.adminDeletePlan(plan.id)
+    toast.success(t('admin.mail.planDeleted'))
+    await loadPlans()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// ===== 订阅管理 =====
+async function loadSubscriptions() {
+  loading.value = true
+  try {
+    const res = await api.mail.adminGetSubscriptions({ 
+      page: subscriptionsPage.value, 
+      pageSize: pageSize.value,
+      search: subscriptionsSearch.value || undefined
+    })
+    subscriptions.value = res.subscriptions || []
+    totalSubscriptions.value = res.total || 0
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    loading.value = false
+  }
+}
+
+function searchSubscriptions() {
+  subscriptionsPage.value = 1
+  loadSubscriptions()
+}
+
+function goToSubscriptionsPage(newPage: number) {
+  if (newPage >= 1 && newPage <= subscriptionsTotalPages.value) {
+    subscriptionsPage.value = newPage
+    loadSubscriptions()
+  }
+}
+
+// ===== 域名管理 =====
+async function loadDomains() {
+  loading.value = true
+  try {
+    const res = await api.mail.adminGetDomains({ 
+      page: domainsPage.value, 
+      pageSize: pageSize.value,
+      search: domainsSearch.value || undefined
+    })
+    domains.value = res.domains || []
+    totalDomains.value = res.total || 0
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    loading.value = false
+  }
+}
+
+function searchDomains() {
+  domainsPage.value = 1
+  loadDomains()
+}
+
+function goToDomainsPage(newPage: number) {
+  if (newPage >= 1 && newPage <= domainsTotalPages.value) {
+    domainsPage.value = newPage
+    loadDomains()
+  }
+}
+
+// ===== 退订管理 =====
+const showUnsubModal = ref(false)
+const unsubTarget = ref<any>(null)
+const unsubForm = ref({
+  refundType: 'none' as 'none' | 'full' | 'remaining',
+  reason: ''
+})
+
+function openUnsubModal(sub: any) {
+  unsubTarget.value = sub
+  unsubForm.value = { refundType: 'none', reason: '' }
+  showUnsubModal.value = true
+}
+
+async function handleUnsubscribe() {
+  if (!unsubTarget.value) return
+  if (unsubForm.value.refundType !== 'none' && !unsubForm.value.reason.trim()) {
+    toast.error(t('admin.mail.unsub.reasonRequired'))
+    return
+  }
+
+  actionLoading.value = 'unsub'
+  try {
+    const result = await api.mail.adminCancelSubscription(unsubTarget.value.id, {
+      refundType: unsubForm.value.refundType,
+      reason: unsubForm.value.refundType !== 'none' ? unsubForm.value.reason.trim() : undefined
+    })
+    if (result.refundAmount > 0) {
+      toast.success(t('admin.mail.unsub.successWithRefund', { amount: result.refundAmount.toFixed(2) }))
+    } else {
+      toast.success(t('admin.mail.unsub.success'))
+    }
+    showUnsubModal.value = false
+    await loadSubscriptions()
+  } catch (err: any) {
+    toast.error(translateError(err))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+function formatPrice(price: number | string | null | undefined) {
+  const num = Number(price) || 0
+  return `¥${num.toFixed(2)}`
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString()
+}
+
+function getStatusBadge(status: string) {
+  switch (status) {
+    case 'active':
+    case 'verified': return 'badge-success'
+    case 'pending': return 'badge-warning'
+    case 'expired':
+    case 'suspended': return 'badge-error'
+    default: return 'badge-ghost'
+  }
+}
+
+const regionOptions = [
+  { code: 'us', name: '美国' },
+  { code: 'nl', name: '荷兰' }
+]
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- Header -->
+    <div class="page-header">
+      <h1 class="page-title">{{ t('admin.mail.title') }}</h1>
+      <p class="page-description">{{ t('admin.mail.description') }}</p>
+    </div>
+
+    <!-- TAB 切换 -->
+    <div class="flex border-b border-themed">
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'sources' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('sources')"
+      >
+        {{ t('admin.mail.tabs.sources') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'plans' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('plans')"
+      >
+        {{ t('admin.mail.tabs.plans') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'subscriptions' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('subscriptions')"
+      >
+        {{ t('admin.mail.tabs.subscriptions') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'domains' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('domains')"
+      >
+        {{ t('admin.mail.tabs.domains') }}
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="card p-12 text-center">
+      <div class="loading-spinner w-8 h-8 mx-auto"></div>
+      <p class="text-themed-muted mt-4">{{ t('common.loading') }}</p>
+    </div>
+
+    <!-- 邮箱源 TAB -->
+    <div v-else-if="activeTab === 'sources'" class="space-y-4">
+      <div class="flex justify-end">
+        <button class="btn btn-primary btn-sm" @click="openCreateSourceModal">
+          + {{ t('admin.mail.createSource') }}
+        </button>
+      </div>
+
+      <div v-if="sources.length === 0" class="card p-8 text-center text-themed-muted">
+        {{ t('admin.mail.noSources') }}
+      </div>
+
+      <div v-else class="card overflow-x-auto">
+        <table class="table-auto w-full min-w-[640px]">
+          <thead>
+            <tr :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.region') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('common.name') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.apiEndpoint') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.plans') }}</th>
+              <th class="px-4 py-3 text-right text-xs font-medium text-themed-muted uppercase">{{ t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="source in sources" :key="source.id">
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-2">
+                  <FlagIcon :code="source.code" class="w-5 h-5" />
+                  <span class="text-sm text-themed">{{ source.code.toUpperCase() }}</span>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ source.name }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted font-mono text-xs">{{ source.apiUrl }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ source.planCount || 0 }}</td>
+              <td class="px-4 py-3 text-right">
+                <button class="btn btn-ghost btn-xs" @click="openEditSourceModal(source)">
+                  {{ t('common.edit') }}
+                </button>
+                <button 
+                  class="btn btn-ghost btn-xs text-error" 
+                  :disabled="actionLoading === `delete-source-${source.id}`"
+                  @click="deleteSource(source)"
+                >
+                  <span v-if="actionLoading === `delete-source-${source.id}`" class="loading loading-spinner loading-xs"></span>
+                  <span v-else>{{ t('common.delete') }}</span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 方案 TAB -->
+    <div v-else-if="activeTab === 'plans'" class="space-y-4">
+      <div class="flex justify-end">
+        <button class="btn btn-primary btn-sm" @click="openCreatePlanModal">
+          + {{ t('admin.mail.createPlan') }}
+        </button>
+      </div>
+
+      <div v-if="plans.length === 0" class="card p-8 text-center text-themed-muted">
+        {{ t('admin.mail.noPlans') }}
+      </div>
+
+      <div v-else class="card overflow-x-auto">
+        <table class="table-auto w-full min-w-[640px]">
+          <thead>
+            <tr :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('common.name') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.source') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.domainLimit') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.diskLimit') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.price') }}</th>
+              <th class="px-4 py-3 text-right text-xs font-medium text-themed-muted uppercase">{{ t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="plan in plans" :key="plan.id">
+              <td class="px-4 py-3">
+                <div class="text-sm font-medium text-themed">{{ plan.name }}</div>
+                <div v-if="plan.description" class="text-xs text-themed-muted">{{ plan.description }}</div>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ plan.source?.name || '-' }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ plan.domainLimit }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ plan.diskLimitGb }} GB</td>
+              <td class="px-4 py-3 text-sm text-themed">
+                {{ formatPrice(plan.price) }}/{{ plan.billingCycle === 'monthly' ? t('mail.month') : t('mail.year') }}
+              </td>
+              <td class="px-4 py-3 text-right">
+                <button class="btn btn-ghost btn-xs" @click="openEditPlanModal(plan)">
+                  {{ t('common.edit') }}
+                </button>
+                <button 
+                  class="btn btn-ghost btn-xs text-error" 
+                  :disabled="actionLoading === `delete-plan-${plan.id}`"
+                  @click="deletePlan(plan)"
+                >
+                  <span v-if="actionLoading === `delete-plan-${plan.id}`" class="loading loading-spinner loading-xs"></span>
+                  <span v-else>{{ t('common.delete') }}</span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 订阅 TAB -->
+    <div v-else-if="activeTab === 'subscriptions'" class="space-y-4">
+      <!-- 搜索框 -->
+      <div class="flex items-center gap-3">
+        <div class="relative flex-1 max-w-sm">
+          <input 
+            v-model="subscriptionsSearch" 
+            type="text" 
+            class="input w-full pl-10" 
+            :placeholder="t('admin.mail.searchSubscriptions')"
+            @keyup.enter="searchSubscriptions"
+          />
+          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <button class="btn btn-primary btn-sm" @click="searchSubscriptions">
+          {{ t('common.search') }}
+        </button>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="card p-8 text-center text-themed-muted">
+        {{ t('common.loading') }}
+      </div>
+
+      <!-- 无数据/搜索无结果 -->
+      <div v-else-if="subscriptions.length === 0" class="card p-8 text-center text-themed-muted">
+        {{ subscriptionsSearch ? t('common.noSearchResults') : t('admin.mail.noSubscriptions') }}
+      </div>
+
+      <div v-else class="card overflow-x-auto">
+        <table class="table-auto w-full min-w-[800px]">
+          <thead>
+            <tr :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.user') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.plan') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('common.status') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.expiresAt') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('common.createdAt') }}</th>
+              <th class="px-4 py-3 text-right text-xs font-medium text-themed-muted uppercase">{{ t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="sub in subscriptions" :key="sub.id">
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-3">
+                  <UserAvatar :username="sub.user?.username || ''" :email="sub.user?.email" :avatar-style="sub.user?.avatarStyle" :badge-id="sub.user?.avatarBadgeId || null" :size="32" />
+                  <div class="min-w-0">
+                    <div class="text-sm font-medium text-themed">{{ sub.user?.username || '-' }}</div>
+                    <div class="text-xs text-themed-muted">ID: {{ sub.user?.id || '-' }} · {{ sub.user?.email || '-' }}</div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ sub.plan?.name || '-' }}</td>
+              <td class="px-4 py-3">
+                <span :class="['badge badge-sm', getStatusBadge(sub.status)]">
+                  {{ t('mail.status.' + sub.status) }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ formatDate(sub.expiresAt) }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ formatDate(sub.createdAt) }}</td>
+              <td class="px-4 py-3 text-right">
+                <button 
+                  class="btn btn-ghost btn-xs text-error" 
+                  :disabled="actionLoading === 'unsub'"
+                  @click="openUnsubModal(sub)"
+                >
+                  {{ t('admin.mail.unsub.button') }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 订阅分页 -->
+      <div v-if="totalSubscriptions > 0" class="flex items-center justify-between text-sm text-themed-muted">
+        <span>{{ t('common.totalRecords', { count: totalSubscriptions }) }}</span>
+        <div v-if="subscriptionsTotalPages > 1" class="flex items-center gap-2">
+          <button 
+            class="btn btn-sm btn-ghost" 
+            :disabled="subscriptionsPage <= 1"
+            @click="goToSubscriptionsPage(subscriptionsPage - 1)"
+          >
+            {{ t('common.prevPage') }}
+          </button>
+          <span>{{ subscriptionsPage }} / {{ subscriptionsTotalPages }}</span>
+          <button 
+            class="btn btn-sm btn-ghost" 
+            :disabled="subscriptionsPage >= subscriptionsTotalPages"
+            @click="goToSubscriptionsPage(subscriptionsPage + 1)"
+          >
+            {{ t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 域名 TAB -->
+    <div v-else-if="activeTab === 'domains'" class="space-y-4">
+      <!-- 搜索框 -->
+      <div class="flex items-center gap-3">
+        <div class="relative flex-1 max-w-sm">
+          <input 
+            v-model="domainsSearch" 
+            type="text" 
+            class="input w-full pl-10" 
+            :placeholder="t('admin.mail.searchDomains')"
+            @keyup.enter="searchDomains"
+          />
+          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <button class="btn btn-primary btn-sm" @click="searchDomains">
+          {{ t('common.search') }}
+        </button>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="card p-8 text-center text-themed-muted">
+        {{ t('common.loading') }}
+      </div>
+
+      <!-- 无数据/搜索无结果 -->
+      <div v-else-if="domains.length === 0" class="card p-8 text-center text-themed-muted">
+        {{ domainsSearch ? t('common.noSearchResults') : t('admin.mail.noDomains') }}
+      </div>
+
+      <div v-else class="card overflow-x-auto">
+        <table class="table-auto w-full min-w-[800px]">
+          <thead>
+            <tr :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.domain') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.user') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('common.status') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.mail.accounts') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('common.createdAt') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="domain in domains" :key="domain.id">
+              <td class="px-4 py-3 text-sm font-medium text-themed">{{ domain.domain }}</td>
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-3">
+                  <UserAvatar :username="domain.subscription?.user?.username || ''" :email="domain.subscription?.user?.email" :avatar-style="domain.subscription?.user?.avatarStyle" :badge-id="domain.subscription?.user?.avatarBadgeId || null" :size="32" />
+                  <div class="min-w-0">
+                    <div class="text-sm font-medium text-themed">{{ domain.subscription?.user?.username || '-' }}</div>
+                    <div class="text-xs text-themed-muted">ID: {{ domain.subscription?.user?.id || '-' }} · {{ domain.subscription?.user?.email || '-' }}</div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <span :class="['badge badge-sm', getStatusBadge(domain.status)]">
+                  {{ t('mail.domainStatus.' + domain.status) }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ domain._count?.accounts || 0 }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ formatDate(domain.createdAt) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 域名分页 -->
+      <div v-if="totalDomains > 0" class="flex items-center justify-between text-sm text-themed-muted">
+        <span>{{ t('common.totalRecords', { count: totalDomains }) }}</span>
+        <div v-if="domainsTotalPages > 1" class="flex items-center gap-2">
+          <button 
+            class="btn btn-sm btn-ghost" 
+            :disabled="domainsPage <= 1"
+            @click="goToDomainsPage(domainsPage - 1)"
+          >
+            {{ t('common.prevPage') }}
+          </button>
+          <span>{{ domainsPage }} / {{ domainsTotalPages }}</span>
+          <button 
+            class="btn btn-sm btn-ghost" 
+            :disabled="domainsPage >= domainsTotalPages"
+            @click="goToDomainsPage(domainsPage + 1)"
+          >
+            {{ t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 邮箱源弹窗 -->
+    <Teleport to="body">
+      <div v-if="showSourceModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showSourceModal = false"></div>
+        <div class="modal-content max-w-lg">
+          <div class="modal-header">
+            <h3 class="modal-title">
+              {{ editingSource ? t('admin.mail.editSource') : t('admin.mail.createSource') }}
+            </h3>
+            <button class="btn btn-ghost btn-sm" @click="showSourceModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <label class="label">{{ t('common.name') }} *</label>
+              <input v-model="sourceForm.name" type="text" class="input w-full" :placeholder="t('admin.mail.sourcePlaceholder')" />
+            </div>
+            <div>
+              <label class="label">{{ t('admin.mail.region') }} *</label>
+              <select v-model="sourceForm.code" class="input w-full">
+                <option v-for="opt in regionOptions" :key="opt.code" :value="opt.code">
+                  {{ opt.name }} ({{ opt.code.toUpperCase() }})
+                </option>
+              </select>
+            </div>
+            <div>
+              <label class="label">{{ t('admin.mail.apiEndpoint') }} *</label>
+              <input v-model="sourceForm.apiUrl" type="text" class="input w-full" placeholder="https://api.cranemail.com" />
+            </div>
+            <div>
+              <label class="label">{{ t('admin.mail.apiKey') }}</label>
+              <input v-model="sourceForm.apiKey" type="password" class="input w-full" />
+            </div>
+            <div>
+              <label class="label">{{ t('admin.mail.webmailUrl') }}</label>
+              <input v-model="sourceForm.smarterMailUrl" type="text" class="input w-full" placeholder="https://smartermail.example.com" />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showSourceModal = false">{{ t('common.cancel') }}</button>
+            <button 
+              class="btn btn-primary" 
+              :disabled="actionLoading === 'save-source'"
+              @click="saveSource"
+            >
+              <span v-if="actionLoading === 'save-source'" class="loading-spinner w-4 h-4 mr-2"></span>
+              {{ t('common.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 方案弹窗 -->
+    <Teleport to="body">
+      <div v-if="showPlanModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showPlanModal = false"></div>
+        <div class="modal-content max-w-lg">
+          <div class="modal-header">
+            <h3 class="modal-title">
+              {{ editingPlan ? t('admin.mail.editPlan') : t('admin.mail.createPlan') }}
+            </h3>
+            <button class="btn btn-ghost btn-sm" @click="showPlanModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <label class="label">{{ t('admin.mail.source') }} *</label>
+              <select v-model="planForm.sourceId" class="input w-full">
+                <option v-for="source in sources" :key="source.id" :value="source.id">
+                  {{ source.name }}
+                </option>
+              </select>
+            </div>
+            <div>
+              <label class="label">{{ t('common.name') }} *</label>
+              <input v-model="planForm.name" type="text" class="input w-full" :placeholder="t('admin.mail.planPlaceholder')" />
+            </div>
+            <div>
+              <label class="label">{{ t('common.description') }}</label>
+              <textarea v-model="planForm.description" class="input w-full" rows="2"></textarea>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="label">{{ t('admin.mail.domainLimit') }} *</label>
+                <input v-model.number="planForm.domainLimit" type="number" min="1" class="input w-full" />
+              </div>
+              <div>
+                <label class="label">{{ t('admin.mail.diskLimitGb') }} *</label>
+                <input v-model.number="planForm.diskLimitGb" type="number" min="1" class="input w-full" />
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="label">{{ t('admin.mail.price') }} (¥) *</label>
+                <input v-model.number="planForm.price" type="number" min="0" step="0.01" class="input w-full" />
+              </div>
+              <div>
+                <label class="label">{{ t('admin.mail.billingCycle') }} *</label>
+                <select v-model="planForm.billingCycle" class="input w-full">
+                  <option value="monthly">{{ t('mail.monthly') }}</option>
+                  <option value="yearly">{{ t('mail.yearly') }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showPlanModal = false">{{ t('common.cancel') }}</button>
+            <button 
+              class="btn btn-primary" 
+              :disabled="actionLoading === 'save-plan'"
+              @click="savePlan"
+            >
+              <span v-if="actionLoading === 'save-plan'" class="loading-spinner w-4 h-4 mr-2"></span>
+              {{ t('common.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 退订弹窗 -->
+    <Teleport to="body">
+      <div v-if="showUnsubModal" class="modal-overlay">
+        <div class="modal-backdrop" @click="showUnsubModal = false"></div>
+        <div class="modal-content max-w-lg">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('admin.mail.unsub.title') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showUnsubModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div v-if="unsubTarget" class="modal-body">
+            <!-- 订阅信息 -->
+            <div class="rounded-lg p-3 mb-4" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+              <div class="text-sm space-y-1">
+                <div class="flex justify-between">
+                  <span class="text-themed-muted">{{ t('admin.mail.user') }}</span>
+                  <span class="text-themed font-medium">{{ unsubTarget.user?.username }} (ID: {{ unsubTarget.user?.id }})</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-themed-muted">{{ t('admin.mail.plan') }}</span>
+                  <span class="text-themed">{{ unsubTarget.plan?.name }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-themed-muted">{{ t('admin.mail.price') }}</span>
+                  <span class="text-themed">{{ formatPrice(unsubTarget.plan?.price) }}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-themed-muted">{{ t('admin.mail.expiresAt') }}</span>
+                  <span class="text-themed">{{ formatDate(unsubTarget.expiresAt) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 退款方式 -->
+            <div class="mb-4">
+              <label class="label">{{ t('admin.mail.unsub.refundType') }}</label>
+              <div class="space-y-2">
+                <label class="flex items-center gap-3 p-2 rounded-lg cursor-pointer" :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'">
+                  <input v-model="unsubForm.refundType" type="radio" value="none" class="radio radio-sm" />
+                  <div>
+                    <div class="text-sm font-medium text-themed">{{ t('admin.mail.unsub.refundNone') }}</div>
+                    <div class="text-xs text-themed-muted">{{ t('admin.mail.unsub.refundNoneDesc') }}</div>
+                  </div>
+                </label>
+                <label class="flex items-center gap-3 p-2 rounded-lg cursor-pointer" :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'">
+                  <input v-model="unsubForm.refundType" type="radio" value="full" class="radio radio-sm" />
+                  <div>
+                    <div class="text-sm font-medium text-themed">{{ t('admin.mail.unsub.refundFull') }}</div>
+                    <div class="text-xs text-themed-muted">{{ t('admin.mail.unsub.refundFullDesc', { amount: formatPrice(unsubTarget.plan?.price) }) }}</div>
+                  </div>
+                </label>
+                <label class="flex items-center gap-3 p-2 rounded-lg cursor-pointer" :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50'">
+                  <input v-model="unsubForm.refundType" type="radio" value="remaining" class="radio radio-sm" />
+                  <div>
+                    <div class="text-sm font-medium text-themed">{{ t('admin.mail.unsub.refundRemaining') }}</div>
+                    <div class="text-xs text-themed-muted">{{ t('admin.mail.unsub.refundRemainingDesc') }}</div>
+                  </div>
+                </label>
+              </div>
+            </div>
+
+            <!-- 退款原因 -->
+            <div v-if="unsubForm.refundType !== 'none'">
+              <label class="label">{{ t('admin.mail.unsub.reason') }} *</label>
+              <textarea 
+                v-model="unsubForm.reason" 
+                class="input w-full" 
+                rows="3" 
+                :placeholder="t('admin.mail.unsub.reasonPlaceholder')"
+              ></textarea>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showUnsubModal = false">{{ t('common.cancel') }}</button>
+            <button 
+              class="btn btn-error" 
+              :disabled="actionLoading === 'unsub'"
+              @click="handleUnsubscribe"
+            >
+              <span v-if="actionLoading === 'unsub'" class="loading-spinner w-4 h-4 mr-2"></span>
+              {{ t('admin.mail.unsub.confirm') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/AffReviewView.vue b/client/src/views/admin/AffReviewView.vue
new file mode 100644
index 0000000..fc922a5
--- /dev/null
+++ b/client/src/views/admin/AffReviewView.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+
+const { t } = useI18n()
+const toast = useToast()
+
+const props = withDefaults(defineProps<{
+  embedded?: boolean
+}>(), {
+  embedded: false
+})
+
+// 转化申请列表
+interface AffWithdrawal {
+  id: number
+  userId: number
+  username: string
+  userAffBalance: number
+  amount: number
+  status: string
+  rejectReason: string | null
+  reviewedBy: number | null
+  createdAt: string
+  reviewedAt: string | null
+}
+
+const withdrawals = ref<AffWithdrawal[]>([])
+const loading = ref(true)
+const page = ref(1)
+const pageSize = ref(100)
+const total = ref(0)
+const statusFilter = ref('')
+
+// 操作状态
+const approveLoading = ref<number | null>(null)
+const showRejectModal = ref(false)
+const rejectTarget = ref<AffWithdrawal | null>(null)
+const rejectReason = ref('')
+const rejectLoading = ref(false)
+
+onMounted(() => {
+  loadWithdrawals()
+})
+
+async function loadWithdrawals() {
+  loading.value = true
+  try {
+    const res = await api.aff.adminGetWithdrawals({
+      page: page.value,
+      pageSize: pageSize.value,
+      status: statusFilter.value || undefined
+    })
+    withdrawals.value = (res as any).withdrawals || []
+    total.value = (res as any).total || 0
+  } catch (err: any) {
+    toast.error(t('common.loadFailed') + ': ' + err.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function approveWithdrawal(w: AffWithdrawal) {
+  approveLoading.value = w.id
+  try {
+    await api.aff.adminApprove(w.id)
+    toast.success(t('aff.approveSuccess'))
+    loadWithdrawals()
+  } catch (err: any) {
+    toast.error(t('aff.approveFailed') + ': ' + err.message)
+  } finally {
+    approveLoading.value = null
+  }
+}
+
+function openRejectModal(w: AffWithdrawal) {
+  rejectTarget.value = w
+  rejectReason.value = ''
+  showRejectModal.value = true
+}
+
+async function submitReject() {
+  if (!rejectTarget.value || !rejectReason.value.trim()) {
+    toast.error(t('aff.rejectReasonPlaceholder'))
+    return
+  }
+  rejectLoading.value = true
+  try {
+    await api.aff.adminReject(rejectTarget.value.id, rejectReason.value.trim())
+    toast.success(t('aff.rejectSuccess'))
+    showRejectModal.value = false
+    loadWithdrawals()
+  } catch (err: any) {
+    toast.error(t('aff.rejectFailed') + ': ' + err.message)
+  } finally {
+    rejectLoading.value = false
+  }
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+function formatMoney(amount: string | number): string {
+  const num = typeof amount === 'string' ? parseFloat(amount) : amount
+  return `¥${num.toFixed(2)}`
+}
+
+function getStatusBadge(status: string): string {
+  const map: Record<string, string> = {
+    pending: 'badge-warning',
+    approved: 'badge-success',
+    rejected: 'badge-error'
+  }
+  return map[status] || ''
+}
+
+function getStatusName(status: string): string {
+  const map: Record<string, string> = {
+    pending: t('aff.withdrawalStatus.pending'),
+    approved: t('aff.withdrawalStatus.approved'),
+    rejected: t('aff.withdrawalStatus.rejected')
+  }
+  return map[status] || status
+}
+
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+</script>
+
+<template>
+  <div :class="['animate-fade-in', props.embedded ? 'space-y-4' : '']">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('aff.adminTitle') }}</h1>
+      <p class="text-sm text-themed-muted mt-1">{{ $t('aff.adminDescription') }}</p>
+    </div>
+
+    <!-- 筛选栏 -->
+    <div class="mb-6 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:gap-4">
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-themed-muted">{{ $t('aff.filterStatus') }}:</label>
+        <select
+          v-model="statusFilter"
+          class="input min-w-32 px-3 py-1.5 text-sm"
+          @change="page = 1; loadWithdrawals()"
+        >
+          <option value="">{{ $t('aff.all') }}</option>
+          <option value="pending">{{ $t('aff.withdrawalStatus.pending') }}</option>
+          <option value="approved">{{ $t('aff.withdrawalStatus.approved') }}</option>
+          <option value="rejected">{{ $t('aff.withdrawalStatus.rejected') }}</option>
+        </select>
+      </div>
+      <button class="btn btn-sm btn-ghost" @click="loadWithdrawals">
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+        {{ $t('common.refresh') }}
+      </button>
+    </div>
+
+    <!-- 列表 -->
+    <div class="card">
+      <div v-if="loading" class="p-8 text-center text-themed-muted">
+        {{ $t('common.loading') }}...
+      </div>
+      <div v-else-if="withdrawals.length === 0" class="p-8 text-center text-themed-muted">
+        {{ $t('aff.noRequests') }}
+      </div>
+      <div v-else class="overflow-x-auto">
+        <table class="w-full min-w-[960px]">
+          <thead>
+            <tr class="border-b border-themed text-left text-sm text-themed-muted">
+              <th class="px-4 py-3 font-medium">ID</th>
+              <th class="px-4 py-3 font-medium">{{ $t('aff.user') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('aff.requestAmount') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('aff.userBalance') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('aff.status') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('aff.requestTime') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('aff.rejectReason') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="w in withdrawals" :key="w.id" class="hover:bg-themed-hover">
+              <td class="px-4 py-3 text-sm text-themed font-mono">#{{ w.id }}</td>
+              <td class="px-4 py-3">
+                <div class="text-sm text-themed font-medium">{{ w.username }}</div>
+                <div class="text-xs text-themed-muted">ID: {{ w.userId }}</div>
+              </td>
+              <td class="px-4 py-3 text-sm font-medium text-themed">{{ formatMoney(w.amount) }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ formatMoney(w.userAffBalance) }}</td>
+              <td class="px-4 py-3">
+                <span :class="['badge badge-sm', getStatusBadge(w.status)]">
+                  {{ getStatusName(w.status) }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ formatDate(w.createdAt) }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ w.rejectReason || '-' }}</td>
+              <td class="px-4 py-3">
+                <template v-if="w.status === 'pending'">
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      class="btn btn-xs btn-success"
+                      :disabled="approveLoading === w.id"
+                      @click="approveWithdrawal(w)"
+                    >
+                      {{ approveLoading === w.id ? $t('common.processing') : $t('aff.approve') }}
+                    </button>
+                    <button
+                      class="btn btn-xs btn-ghost text-red-500 hover:bg-red-500/10"
+                      @click="openRejectModal(w)"
+                    >
+                      {{ $t('aff.reject') }}
+                    </button>
+                  </div>
+                </template>
+                <template v-else>
+                  <span class="text-themed-muted">-</span>
+                </template>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- 分页 -->
+        <div v-if="totalPages > 1" class="flex justify-center items-center gap-2 p-4 border-t border-themed">
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="page <= 1"
+            @click="page--; loadWithdrawals()"
+          >
+            {{ $t('common.prevPage') }}
+          </button>
+          <span class="text-sm text-themed-muted">{{ page }} / {{ totalPages }}</span>
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="page >= totalPages"
+            @click="page++; loadWithdrawals()"
+          >
+            {{ $t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 拒绝弹窗 -->
+    <Teleport to="body">
+      <div v-if="showRejectModal" class="modal-overlay" @click.self="showRejectModal = false">
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('aff.reject') }}</h3>
+            <button class="btn btn-ghost btn-sm rounded-full" @click="showRejectModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body space-y-4">
+            <div v-if="rejectTarget" class="p-3 bg-themed-secondary rounded-lg">
+              <div class="text-sm text-themed-muted">{{ $t('aff.user') }}: {{ rejectTarget.username }}</div>
+              <div class="text-sm text-themed-muted">{{ $t('aff.requestAmount') }}: {{ formatMoney(rejectTarget.amount) }}</div>
+            </div>
+            
+            <div>
+              <label class="label text-sm mb-2">{{ $t('aff.rejectReason') }} *</label>
+              <textarea
+                v-model="rejectReason"
+                class="input w-full h-24 resize-none"
+                :placeholder="$t('aff.rejectReasonPlaceholder')"
+              ></textarea>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showRejectModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-error"
+              :disabled="rejectLoading || !rejectReason.trim()"
+              @click="submitReject"
+            >
+              {{ rejectLoading ? $t('common.processing') : $t('aff.reject') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/BillingView.vue b/client/src/views/admin/BillingView.vue
new file mode 100644
index 0000000..c369186
--- /dev/null
+++ b/client/src/views/admin/BillingView.vue
@@ -0,0 +1,2577 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch, defineAsyncComponent } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import LoadingSpinner from '@/components/LoadingSpinner.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import BillingOverviewIcon from '@/components/admin/BillingOverviewIcon.vue'
+import { calculateDiscountedPrice } from '@/utils/billing'
+
+const PaymentProvidersView = defineAsyncComponent(() => import('@/views/admin/PaymentProvidersView.vue'))
+const AffReviewView = defineAsyncComponent(() => import('@/views/admin/AffReviewView.vue'))
+
+type BatchPriceUpdateItemStatus = 'ready' | 'unchanged' | 'failed'
+
+interface BatchPriceUpdatePreview {
+  summary: {
+    selectedCount: number
+    validCount: number
+    changedCount: number
+    unchangedCount: number
+    failedCount: number
+    totalCharge: number
+    totalRefund: number
+    netAmount: number
+  }
+  canSubmit: boolean
+  items: Array<{
+    id: number
+    name: string | null
+    user: { id: number; username: string; balance: number } | null
+    oldPrice: number | null
+    newPrice: number
+    billingCycle: number | null
+    remainingDays: number
+    priceDiff: number
+    discountRate: number
+    instanceVersion?: number
+    status: BatchPriceUpdateItemStatus
+    error?: string
+  }>
+  userImpacts: Array<{
+    userId: number
+    username: string
+    balanceBefore: number
+    balanceAfter: number
+    totalCharge: number
+    totalRefund: number
+    netDiff: number
+    insufficientBalance: boolean
+  }>
+}
+
+const router = useRouter()
+const route = useRoute()
+
+const { t } = useI18n()
+const toast = useToast()
+
+// Tab 切换
+type BillingTab = 'overview' | 'instances' | 'records' | 'rechargeRecords' | 'affConversions' | 'paymentProviders'
+const billingTabs: BillingTab[] = ['overview', 'instances', 'records', 'rechargeRecords', 'affConversions', 'paymentProviders']
+function normalizeTab(tab: unknown): BillingTab {
+  return typeof tab === 'string' && billingTabs.includes(tab as BillingTab)
+    ? tab as BillingTab
+    : 'overview'
+}
+
+const activeTab = ref<BillingTab>(normalizeTab(route.query.tab))
+const hasVisitedPaymentProviders = ref(activeTab.value === 'paymentProviders')
+const hasVisitedAffConversions = ref(activeTab.value === 'affConversions')
+
+// 分页大小选项
+const pageSizeOptions = [10, 20, 50, 100]
+
+// 宿主机列表（用于筛选）
+const hosts = ref<Array<{ id: number; name: string }>>([])
+
+type OverviewIconName = 'wallet' | 'chart' | 'store' | 'cloud' | 'server' | 'pulse' | 'ban' | 'clock' | 'sparkles'
+
+interface BillingRevenueBucket {
+  totalAmount: number
+  thisMonthAmount: number
+  todayAmount: number
+}
+
+interface BillingOverview {
+  totalRevenue: number
+  thisMonthRevenue: number
+  lastMonthRevenue: number
+  todayRevenue: number
+  totalRefunds: number
+  netRevenue: number
+  paidInstancesCount: number
+  activePaidInstancesCount: number
+  suspendedCount: number
+  expiringCount: number
+  revenueMix: {
+    direct: BillingRevenueBucket
+    hosted: BillingRevenueBucket
+  }
+  recharge: {
+    totalAmount: number
+    totalCount: number
+    thisMonthAmount: number
+    thisMonthCount: number
+    todayAmount: number
+    todayCount: number
+  }
+  aff: {
+    totalCommission: number
+    totalOrders: number
+    thisMonthCommission: number
+    totalConverted: number
+    pendingConvertCount: number
+  }
+}
+
+interface PeriodComparisonCard {
+  key: string
+  label: string
+  revenueAmount: number
+  rechargeAmount: number
+  rechargeCount: number
+  badgeClass: string
+  iconClass: string
+}
+
+interface RevenueMixRow {
+  key: string
+  label: string
+  directAmount: number
+  hostedAmount: number
+  directRatio: number
+  hostedRatio: number
+}
+
+interface MetricCard {
+  key: string
+  label: string
+  value: number
+  format: 'money' | 'count'
+  icon: OverviewIconName
+  toneClass: string
+  surfaceClass: string
+  progress?: number
+}
+
+// 概览数据
+const overview = ref<BillingOverview | null>(null)
+const overviewLoading = ref(true)
+
+// 付费实例列表
+const instances = ref<any[]>([])
+const instancesLoading = ref(false)
+const instancesPage = ref(1)
+const instancesPageSize = ref(100)
+const instancesTotal = ref(0)
+const instancesFilter = ref('')
+const instancesHostFilter = ref<number | ''>('')
+const instancesSearch = ref('')
+const showExpiring = ref(false)
+const showDateColumns = ref(false)  // 默认隐藏购买日期和到期时间列
+const selectedInstanceIds = ref<number[]>([])
+
+// 扣费记录
+const records = ref<any[]>([])
+const recordsLoading = ref(false)
+const recordsPage = ref(1)
+const recordsPageSize = ref(100)
+const recordsTotal = ref(0)
+
+// 充值记录
+const rechargeRecords = ref<any[]>([])
+const rechargeRecordsLoading = ref(false)
+const rechargeRecordsPage = ref(1)
+const rechargeRecordsPageSize = ref(100)
+const rechargeRecordsTotal = ref(0)
+const rechargeRecordsFilter = ref('')
+const syncingRecordId = ref<number | null>(null)
+
+// 操作弹窗
+const showActionModal = ref(false)
+const actionType = ref<'suspend' | 'unsuspend' | 'extend' | 'deleteRefund' | 'deleteRefundDatabaseOnly' | 'applyDiscount'>('suspend')
+const actionTarget = ref<any>(null)
+const actionLoading = ref(false)
+const actionForm = ref({
+  reason: '',
+  days: 7,
+  freeExtend: false,
+  amount: 0,
+  refundType: 'remaining' as 'remaining' | 'full',
+  affCode: ''
+})
+
+// 修改价格弹窗
+const showPriceModal = ref(false)
+const priceTarget = ref<any>(null)
+const priceLoading = ref(false)
+const pricePreviewLoading = ref(false)
+const pricePreview = ref<{
+  oldPrice: number
+  newPrice: number
+  billingCycle: number
+  remainingDays: number
+  priceDiff: number
+  discountRate: number
+  userBalance: number
+  instanceVersion: number
+} | null>(null)
+const priceForm = ref({
+  newPrice: 0,
+  settleBalance: true
+})
+
+// 批量修改价格弹窗
+const showBatchPriceModal = ref(false)
+const batchPriceLoading = ref(false)
+const batchPricePreviewLoading = ref(false)
+const batchPricePreview = ref<BatchPriceUpdatePreview | null>(null)
+const batchPriceForm = ref({
+  newPrice: 0,
+  settleBalance: true
+})
+
+function isValidPriceInput(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0
+}
+
+// 计算实际续费价格（应用 AFF 折扣后）
+const actualRenewPrice = computed(() => {
+  if (!priceTarget.value) return { old: 0, new: 0 }
+  const inst = priceTarget.value
+  const discountRate = inst.affDiscountRate || 0
+  const oldPrice = inst.billingPrice || 0
+  const newPrice = priceForm.value.newPrice
+  
+  return {
+    old: calculateDiscountedPrice(oldPrice, discountRate),
+    new: calculateDiscountedPrice(newPrice, discountRate)
+  }
+})
+
+// 计算价格差价（使用公共方法，确保与后端一致）
+const priceDiff = computed(() => {
+  return pricePreview.value?.priceDiff || 0
+})
+
+// 切换方案弹窗
+const showUpgradeModal = ref(false)
+const upgradeTarget = ref<any>(null)
+const upgradeLoading = ref(false)
+const upgradeSubmitting = ref(false)
+const upgradeData = ref<{
+  currentPlan: {
+    id: number
+    name: string
+    price: number
+    billingCycle: number
+    monthlyPrice: number
+    cpu: number
+    memory: number
+    disk: number
+  } | null
+  remainingDays: number
+  availablePlans: Array<{
+    id: number
+    name: string
+    description: string | null
+    price: number
+    billingCycle: number
+    monthlyPrice: number
+    priceDiff: number
+    cpu: number
+    memory: number
+    disk: number
+  }>
+  userBalance: number
+}>({
+  currentPlan: null,
+  remainingDays: 0,
+  availablePlans: [],
+  userBalance: 0
+})
+const selectedPlanId = ref<number | null>(null)
+
+// 计算选中方案的补差价
+const upgradePriceDiff = computed(() => {
+  if (!upgradeData.value.currentPlan || !selectedPlanId.value) return 0
+  const newPlan = upgradeData.value.availablePlans.find(p => p.id === selectedPlanId.value)
+  if (!newPlan) return 0
+  return newPlan.priceDiff
+})
+
+const selectedInstanceIdSet = computed(() => new Set(selectedInstanceIds.value))
+
+const selectableInstances = computed(() => {
+  return instances.value.filter(inst => inst.status !== 'deleted')
+})
+
+const selectedInstances = computed(() => {
+  const selectedIds = selectedInstanceIdSet.value
+  return instances.value.filter(inst => selectedIds.has(inst.id))
+})
+
+const selectedInstancesCount = computed(() => selectedInstanceIds.value.length)
+
+const allCurrentPageSelected = computed(() => {
+  return selectableInstances.value.length > 0 &&
+    selectableInstances.value.every(inst => selectedInstanceIdSet.value.has(inst.id))
+})
+
+const someCurrentPageSelected = computed(() => {
+  return selectableInstances.value.some(inst => selectedInstanceIdSet.value.has(inst.id))
+})
+
+const selectedPriceBaseline = computed(() => {
+  if (selectedInstances.value.length === 0) return 0
+  const firstSelected = selectedInstances.value.find(inst => typeof inst.billingPrice === 'number')
+  return firstSelected?.billingPrice || 0
+})
+
+const batchPriceExpectations = computed(() => {
+  return batchPricePreview.value?.items
+    .filter(item => typeof item.instanceVersion === 'number')
+    .map(item => ({ instanceId: item.id, version: item.instanceVersion! })) || []
+})
+
+const batchPricePreviewHasVersionSnapshot = computed(() => {
+  if (!batchPricePreview.value) return false
+  return batchPricePreview.value.items.every(item => item.status === 'failed' || typeof item.instanceVersion === 'number')
+})
+
+const periodComparisonCards = computed<PeriodComparisonCard[]>(() => {
+  if (!overview.value) return []
+
+  return [
+    {
+      key: 'total',
+      label: t('admin.billing.overviewPeriods.total'),
+      revenueAmount: overview.value.totalRevenue,
+      rechargeAmount: overview.value.recharge.totalAmount,
+      rechargeCount: overview.value.recharge.totalCount,
+      badgeClass: 'bg-themed-tertiary text-themed',
+      iconClass: 'text-slate-600 dark:text-slate-300'
+    },
+    {
+      key: 'thisMonth',
+      label: t('admin.billing.overviewPeriods.thisMonth'),
+      revenueAmount: overview.value.thisMonthRevenue,
+      rechargeAmount: overview.value.recharge.thisMonthAmount,
+      rechargeCount: overview.value.recharge.thisMonthCount,
+      badgeClass: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
+      iconClass: 'text-emerald-600 dark:text-emerald-300'
+    },
+    {
+      key: 'today',
+      label: t('admin.billing.overviewPeriods.today'),
+      revenueAmount: overview.value.todayRevenue,
+      rechargeAmount: overview.value.recharge.todayAmount,
+      rechargeCount: overview.value.recharge.todayCount,
+      badgeClass: 'bg-cyan-500/10 text-cyan-700 dark:text-cyan-300',
+      iconClass: 'text-cyan-600 dark:text-cyan-300'
+    }
+  ]
+})
+
+const revenueMixRows = computed<RevenueMixRow[]>(() => {
+  if (!overview.value) return []
+
+  const direct = overview.value.revenueMix.direct
+  const hosted = overview.value.revenueMix.hosted
+
+  return [
+    {
+      key: 'total',
+      label: t('admin.billing.overviewPeriods.total'),
+      directAmount: direct.totalAmount,
+      hostedAmount: hosted.totalAmount,
+      directRatio: calculateRatio(direct.totalAmount, direct.totalAmount + hosted.totalAmount),
+      hostedRatio: calculateRatio(hosted.totalAmount, direct.totalAmount + hosted.totalAmount)
+    },
+    {
+      key: 'thisMonth',
+      label: t('admin.billing.overviewPeriods.thisMonth'),
+      directAmount: direct.thisMonthAmount,
+      hostedAmount: hosted.thisMonthAmount,
+      directRatio: calculateRatio(direct.thisMonthAmount, direct.thisMonthAmount + hosted.thisMonthAmount),
+      hostedRatio: calculateRatio(hosted.thisMonthAmount, direct.thisMonthAmount + hosted.thisMonthAmount)
+    },
+    {
+      key: 'today',
+      label: t('admin.billing.overviewPeriods.today'),
+      directAmount: direct.todayAmount,
+      hostedAmount: hosted.todayAmount,
+      directRatio: calculateRatio(direct.todayAmount, direct.todayAmount + hosted.todayAmount),
+      hostedRatio: calculateRatio(hosted.todayAmount, direct.todayAmount + hosted.todayAmount)
+    }
+  ]
+})
+
+const instanceStatusCards = computed<MetricCard[]>(() => {
+  if (!overview.value) return []
+
+  return [
+    {
+      key: 'active',
+      label: t('admin.billing.activeInstances'),
+      value: overview.value.activePaidInstancesCount,
+      format: 'count',
+      icon: 'pulse',
+      toneClass: 'text-emerald-600 dark:text-emerald-300',
+      surfaceClass: 'bg-emerald-500/10 ring-1 ring-emerald-500/20',
+      progress: calculateRatio(overview.value.activePaidInstancesCount, overview.value.paidInstancesCount)
+    },
+    {
+      key: 'suspended',
+      label: t('admin.billing.suspendedInstances'),
+      value: overview.value.suspendedCount,
+      format: 'count',
+      icon: 'ban',
+      toneClass: 'text-rose-600 dark:text-rose-300',
+      surfaceClass: 'bg-rose-500/10 ring-1 ring-rose-500/20',
+      progress: calculateRatio(overview.value.suspendedCount, overview.value.paidInstancesCount)
+    },
+    {
+      key: 'expiring',
+      label: t('admin.billing.expiringInstances'),
+      value: overview.value.expiringCount,
+      format: 'count',
+      icon: 'clock',
+      toneClass: 'text-amber-600 dark:text-amber-300',
+      surfaceClass: 'bg-amber-500/10 ring-1 ring-amber-500/20',
+      progress: calculateRatio(overview.value.expiringCount, overview.value.paidInstancesCount)
+    }
+  ]
+})
+
+const affCards = computed<MetricCard[]>(() => {
+  if (!overview.value) return []
+
+  return [
+    {
+      key: 'aff-total',
+      label: t('admin.billing.totalAffCommission'),
+      value: overview.value.aff.totalCommission,
+      format: 'money',
+      icon: 'sparkles',
+      toneClass: 'text-sky-600 dark:text-sky-300',
+      surfaceClass: 'bg-sky-500/10 ring-1 ring-sky-500/20'
+    },
+    {
+      key: 'aff-month',
+      label: t('admin.billing.thisMonthAff'),
+      value: overview.value.aff.thisMonthCommission,
+      format: 'money',
+      icon: 'sparkles',
+      toneClass: 'text-emerald-600 dark:text-emerald-300',
+      surfaceClass: 'bg-emerald-500/10 ring-1 ring-emerald-500/20'
+    },
+    {
+      key: 'aff-converted',
+      label: t('admin.billing.affConverted'),
+      value: overview.value.aff.totalConverted,
+      format: 'money',
+      icon: 'wallet',
+      toneClass: 'text-slate-700 dark:text-slate-200',
+      surfaceClass: 'bg-slate-500/10 ring-1 ring-slate-500/20'
+    },
+    {
+      key: 'aff-pending',
+      label: t('admin.billing.affPendingConvert'),
+      value: overview.value.aff.pendingConvertCount,
+      format: 'count',
+      icon: 'clock',
+      toneClass: 'text-amber-600 dark:text-amber-300',
+      surfaceClass: 'bg-amber-500/10 ring-1 ring-amber-500/20'
+    }
+  ]
+})
+
+const refundRate = computed(() => {
+  if (!overview.value) return 0
+  return calculateRatio(overview.value.totalRefunds, overview.value.totalRevenue)
+})
+
+const hostedRevenueShare = computed(() => {
+  if (!overview.value) return 0
+  return calculateRatio(overview.value.revenueMix.hosted.totalAmount, overview.value.totalRevenue)
+})
+
+const activeInstanceShare = computed(() => {
+  if (!overview.value) return 0
+  return calculateRatio(overview.value.activePaidInstancesCount, overview.value.paidInstancesCount)
+})
+
+const monthlyRevenueChange = computed(() => {
+  if (!overview.value) return null
+  return calculateChange(overview.value.thisMonthRevenue, overview.value.lastMonthRevenue)
+})
+
+function loadTabData(tab: BillingTab) {
+  if (tab === 'overview' && !overview.value) {
+    loadOverview()
+  }
+  if (tab === 'instances' && instances.value.length === 0) {
+    loadInstances()
+  }
+  if (tab === 'records' && records.value.length === 0) {
+    loadRecords()
+  }
+  if (tab === 'rechargeRecords' && rechargeRecords.value.length === 0) {
+    loadRechargeRecords()
+  }
+}
+
+onMounted(() => {
+  loadTabData(activeTab.value)
+})
+
+async function loadOverview() {
+  overviewLoading.value = true
+  try {
+    const res = await api.admin.getBillingOverview()
+    overview.value = res.overview
+  } catch (err: any) {
+    toast.error(t('admin.billing.loadFailed') + ': ' + err.message)
+  } finally {
+    overviewLoading.value = false
+  }
+}
+
+async function loadInstances() {
+  instancesLoading.value = true
+  try {
+    const res = await api.admin.getBillingInstances({
+      page: instancesPage.value,
+      pageSize: instancesPageSize.value,
+      status: instancesFilter.value || undefined,
+      expiring: showExpiring.value || undefined,
+      hostId: instancesHostFilter.value || undefined,
+      search: instancesSearch.value.trim() || undefined
+    })
+    instances.value = res.instances || []
+    instancesTotal.value = res.total
+    const currentPageSelectableIds = new Set(instances.value.filter(inst => inst.status !== 'deleted').map(inst => inst.id))
+    selectedInstanceIds.value = selectedInstanceIds.value.filter(id => currentPageSelectableIds.has(id))
+    // 从返回中获取有付费实例的节点列表
+    if (res.hosts) {
+      hosts.value = res.hosts
+    }
+  } catch (err: any) {
+    toast.error(t('admin.billing.loadInstancesFailed') + ': ' + err.message)
+  } finally {
+    instancesLoading.value = false
+  }
+}
+
+async function loadRecords() {
+  recordsLoading.value = true
+  try {
+    const res = await api.admin.getBillingRecords({
+      page: recordsPage.value,
+      pageSize: recordsPageSize.value
+    })
+    records.value = res.records || []
+    recordsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('admin.billing.loadRecordsFailed') + ': ' + err.message)
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
+async function loadRechargeRecords() {
+  rechargeRecordsLoading.value = true
+  try {
+    const res = await api.admin.getRechargeRecords({
+      page: rechargeRecordsPage.value,
+      pageSize: rechargeRecordsPageSize.value,
+      status: rechargeRecordsFilter.value || undefined
+    })
+    rechargeRecords.value = res.records || []
+    rechargeRecordsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('admin.billing.loadRechargeRecordsFailed') + ': ' + err.message)
+  } finally {
+    rechargeRecordsLoading.value = false
+  }
+}
+
+async function syncRechargeRecord(record: any) {
+  if (syncingRecordId.value) return
+  
+  syncingRecordId.value = record.id
+  try {
+    const res = await api.admin.syncRechargeRecord(record.id)
+    if (res.synced) {
+      toast.success(t('admin.billing.syncSuccess'))
+      // 并行刷新充值记录和概览
+      await Promise.all([loadRechargeRecords(), loadOverview()])
+    } else {
+      toast.info(res.message)
+    }
+  } catch (err: any) {
+    toast.error(err.message)
+  } finally {
+    syncingRecordId.value = null
+  }
+}
+
+function switchTab(tab: BillingTab) {
+  activeTab.value = tab
+  if (tab === 'paymentProviders') {
+    hasVisitedPaymentProviders.value = true
+  }
+  if (tab === 'affConversions') {
+    hasVisitedAffConversions.value = true
+  }
+  router.replace({
+    path: route.path,
+    query: tab === 'overview'
+      ? { ...route.query, tab: undefined }
+      : { ...route.query, tab }
+  })
+  loadTabData(tab)
+}
+
+watch(
+  () => route.query.tab,
+  (tab) => {
+    const nextTab = normalizeTab(tab)
+    if (nextTab !== activeTab.value) {
+      switchTab(nextTab)
+    }
+  }
+)
+
+function openActionModal(type: 'suspend' | 'unsuspend' | 'extend' | 'deleteRefund' | 'deleteRefundDatabaseOnly' | 'applyDiscount', instance: any) {
+  actionType.value = type
+  actionTarget.value = instance
+  actionForm.value = {
+    reason: '',
+    days: 7,
+    freeExtend: false,
+    amount: 0,
+    refundType: 'remaining',
+    affCode: ''
+  }
+  showActionModal.value = true
+}
+
+async function executeAction() {
+  if (!actionTarget.value) return
+  
+  actionLoading.value = true
+  try {
+    const id = actionTarget.value.id
+    
+    switch (actionType.value) {
+      case 'suspend':
+        await api.admin.suspendInstance(id, actionForm.value.reason)
+        toast.success(t('admin.billing.suspendSuccess'))
+        break
+      case 'unsuspend':
+        await api.admin.unsuspendInstance(id)
+        toast.success(t('admin.billing.unsuspendSuccess'))
+        break
+      case 'extend':
+        await api.admin.extendInstance(id, actionForm.value.days, actionForm.value.reason, actionForm.value.freeExtend)
+        toast.success(t('admin.billing.extendSuccess'))
+        break
+      case 'deleteRefund':
+        if (!actionForm.value.reason.trim()) {
+          toast.error(t('admin.billing.deleteRefundReasonRequired'))
+          actionLoading.value = false
+          return
+        }
+        {
+          const result = await api.admin.deleteAndRefundInstance(id, actionForm.value.refundType, actionForm.value.reason)
+          toast.success(result.message || t('admin.billing.deleteRefundSuccess'))
+        }
+        break
+      case 'deleteRefundDatabaseOnly':
+        if (!actionForm.value.reason.trim()) {
+          toast.error(t('admin.billing.deleteRefundReasonRequired'))
+          actionLoading.value = false
+          return
+        }
+        {
+          const result = await api.admin.deleteAndRefundInstance(id, actionForm.value.refundType, actionForm.value.reason, true)
+          toast.success(result.message || t('admin.billing.deleteRefundDatabaseOnlySuccess'))
+        }
+        break
+      case 'applyDiscount':
+        if (!actionForm.value.affCode.trim()) {
+          toast.error(t('admin.billing.affCodeRequired'))
+          actionLoading.value = false
+          return
+        }
+        await api.admin.applyAffCode(id, actionForm.value.affCode.trim())
+        toast.success(t('admin.billing.applyDiscountSuccess'))
+        break
+    }
+    
+    showActionModal.value = false
+    // 并行刷新实例列表和概览
+    await Promise.all([loadInstances(), loadOverview()])
+  } catch (err: any) {
+    toast.error(err.message)
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+// 打开修改价格弹窗
+function openPriceModal(instance: any) {
+  priceTarget.value = instance
+  pricePreviewRequestId += 1
+  priceForm.value = {
+    newPrice: instance.billingPrice || 0,
+    settleBalance: true
+  }
+  pricePreview.value = null
+  showPriceModal.value = true
+}
+
+let pricePreviewTimer: ReturnType<typeof setTimeout> | null = null
+let pricePreviewRequestId = 0
+
+async function loadPricePreview() {
+  if (!showPriceModal.value || !priceTarget.value) return
+  if (!isValidPriceInput(priceForm.value.newPrice)) {
+    pricePreviewRequestId += 1
+    pricePreview.value = null
+    pricePreviewLoading.value = false
+    return
+  }
+
+  const requestId = ++pricePreviewRequestId
+  pricePreviewLoading.value = true
+  try {
+    const res = await api.admin.previewInstancePriceUpdate(
+      priceTarget.value.id,
+      priceForm.value.newPrice,
+      priceForm.value.settleBalance
+    )
+    if (requestId !== pricePreviewRequestId) return
+    pricePreview.value = res
+  } catch (err: any) {
+    if (requestId !== pricePreviewRequestId) return
+    pricePreview.value = null
+    toast.error(err.message)
+  } finally {
+    if (requestId === pricePreviewRequestId) {
+      pricePreviewLoading.value = false
+    }
+  }
+}
+
+watch(
+  () => [showPriceModal.value, priceTarget.value?.id, priceForm.value.newPrice, priceForm.value.settleBalance],
+  ([visible]) => {
+    if (pricePreviewTimer) {
+      clearTimeout(pricePreviewTimer)
+      pricePreviewTimer = null
+    }
+
+    if (!visible || !priceTarget.value) {
+      if (!visible) {
+        pricePreviewRequestId += 1
+        pricePreviewLoading.value = false
+      }
+      if (!visible) {
+        pricePreview.value = null
+      }
+      return
+    }
+
+    pricePreviewTimer = setTimeout(() => {
+      loadPricePreview()
+    }, 150)
+  }
+)
+
+function toggleSelectAllCurrentPage() {
+  const selected = new Set(selectedInstanceIds.value)
+  if (allCurrentPageSelected.value) {
+    for (const inst of selectableInstances.value) {
+      selected.delete(inst.id)
+    }
+  } else {
+    for (const inst of selectableInstances.value) {
+      selected.add(inst.id)
+    }
+  }
+  selectedInstanceIds.value = Array.from(selected)
+}
+
+function openBatchPriceModal() {
+  if (selectedInstanceIds.value.length === 0) {
+    toast.warning(t('admin.billing.batchPriceNoSelection'))
+    return
+  }
+
+  batchPricePreviewRequestId += 1
+  batchPriceForm.value = {
+    newPrice: selectedPriceBaseline.value,
+    settleBalance: true
+  }
+  batchPricePreview.value = null
+  showBatchPriceModal.value = true
+}
+
+let batchPricePreviewTimer: ReturnType<typeof setTimeout> | null = null
+let batchPricePreviewRequestId = 0
+
+async function loadBatchPricePreview() {
+  if (!showBatchPriceModal.value || selectedInstanceIds.value.length === 0) return
+  if (!isValidPriceInput(batchPriceForm.value.newPrice)) {
+    batchPricePreviewRequestId += 1
+    batchPricePreview.value = null
+    batchPricePreviewLoading.value = false
+    return
+  }
+
+  const requestId = ++batchPricePreviewRequestId
+  batchPricePreviewLoading.value = true
+  try {
+    const res = await api.admin.previewBatchInstancePriceUpdate(
+      selectedInstanceIds.value,
+      batchPriceForm.value.newPrice,
+      batchPriceForm.value.settleBalance
+    )
+    if (requestId !== batchPricePreviewRequestId) return
+    batchPricePreview.value = res
+  } catch (err: any) {
+    if (requestId !== batchPricePreviewRequestId) return
+    batchPricePreview.value = err?.preview || null
+    toast.error(err.message)
+  } finally {
+    if (requestId === batchPricePreviewRequestId) {
+      batchPricePreviewLoading.value = false
+    }
+  }
+}
+
+watch(
+  () => [showBatchPriceModal.value, selectedInstanceIds.value.join(','), batchPriceForm.value.newPrice, batchPriceForm.value.settleBalance],
+  ([visible]) => {
+    if (batchPricePreviewTimer) {
+      clearTimeout(batchPricePreviewTimer)
+      batchPricePreviewTimer = null
+    }
+
+    if (!visible || selectedInstanceIds.value.length === 0) {
+      if (!visible) {
+        batchPricePreviewRequestId += 1
+        batchPricePreviewLoading.value = false
+      }
+      if (!visible) {
+        batchPricePreview.value = null
+      }
+      return
+    }
+
+    batchPricePreviewTimer = setTimeout(() => {
+      loadBatchPricePreview()
+    }, 150)
+  }
+)
+
+async function submitBatchUpdatePrice() {
+  if (selectedInstanceIds.value.length === 0) return
+
+  batchPriceLoading.value = true
+  try {
+    const res = await api.admin.updateBatchInstancePrice(
+      selectedInstanceIds.value,
+      batchPriceForm.value.newPrice,
+      batchPriceForm.value.settleBalance,
+      batchPriceExpectations.value
+    )
+    toast.success(res.message)
+    batchPricePreview.value = res.preview
+    showBatchPriceModal.value = false
+    selectedInstanceIds.value = []
+    await Promise.all([loadInstances(), loadOverview()])
+  } catch (err: any) {
+    batchPricePreview.value = err?.preview || batchPricePreview.value
+    toast.error(err.message)
+  } finally {
+    batchPriceLoading.value = false
+  }
+}
+
+// 提交修改价格
+async function submitUpdatePrice() {
+  if (!priceTarget.value) return
+  
+  priceLoading.value = true
+  try {
+    const res = await api.admin.updateInstancePrice(
+      priceTarget.value.id,
+      priceForm.value.newPrice,
+      priceForm.value.settleBalance,
+      pricePreview.value?.instanceVersion
+    )
+    toast.success(res.message)
+    showPriceModal.value = false
+    // 并行刷新实例列表和概览
+    await Promise.all([loadInstances(), loadOverview()])
+  } catch (err: any) {
+    toast.error(err.message)
+  } finally {
+    priceLoading.value = false
+  }
+}
+
+// 打开切换方案弹窗
+async function openUpgradeModal(instance: any) {
+  upgradeTarget.value = instance
+  selectedPlanId.value = null
+  upgradeData.value = { currentPlan: null, remainingDays: 0, availablePlans: [], userBalance: 0 }
+  showUpgradeModal.value = true
+  upgradeLoading.value = true
+  
+  try {
+    const res = await api.admin.getAvailablePlans(instance.id)
+    upgradeData.value = res
+  } catch (err: any) {
+    toast.error(err.message)
+    showUpgradeModal.value = false
+  } finally {
+    upgradeLoading.value = false
+  }
+}
+
+// 执行升级
+async function executeUpgrade() {
+  if (!upgradeTarget.value || !selectedPlanId.value) return
+  
+  upgradeSubmitting.value = true
+  try {
+    const res = await api.admin.upgradePlan(upgradeTarget.value.id, selectedPlanId.value)
+    toast.success(res.message)
+    showUpgradeModal.value = false
+    // 并行刷新实例列表和概览
+    await Promise.all([loadInstances(), loadOverview()])
+  } catch (err: any) {
+    toast.error(err.message)
+  } finally {
+    upgradeSubmitting.value = false
+  }
+}
+
+// 格式化计费周期
+function formatBillingCycle(cycle: number): string {
+  const map: Record<number, string> = {
+    1: t('admin.billing.monthly'),
+    3: t('admin.billing.quarterly'),
+    6: t('admin.billing.semiAnnual'),
+    12: t('admin.billing.yearly')
+  }
+  return map[cycle] || `${cycle} ${t('admin.billing.months')}`
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+const currencyFormatter = new Intl.NumberFormat('zh-CN', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+})
+
+const countFormatter = new Intl.NumberFormat('zh-CN')
+
+function formatMoney(amount: number): string {
+  return `¥${currencyFormatter.format(amount || 0)}`
+}
+
+function formatCount(value: number): string {
+  return countFormatter.format(value || 0)
+}
+
+function formatPercent(value: number): string {
+  const rounded = value >= 10 ? value.toFixed(0) : value.toFixed(1)
+  return `${rounded}%`
+}
+
+function formatSignedPercent(value: number | null): string {
+  if (value === null) return '--'
+  const rounded = Math.abs(value) >= 10 ? value.toFixed(0) : value.toFixed(1)
+  return `${value > 0 ? '+' : ''}${rounded}%`
+}
+
+function calculateRatio(part: number, total: number): number {
+  if (total <= 0) return 0
+  return Math.min(100, Math.max(0, (part / total) * 100))
+}
+
+function calculateChange(current: number, previous: number): number | null {
+  if (previous === 0) {
+    return current === 0 ? 0 : null
+  }
+  return ((current - previous) / previous) * 100
+}
+
+// 获取扣费记录类型标签
+function getRecordTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    newPurchase: t('admin.billing.recordTypes.newPurchase'),
+    renew: t('admin.billing.recordTypes.renew'),
+    upgrade: t('admin.billing.recordTypes.upgrade'),
+    downgrade: t('admin.billing.recordTypes.downgrade'),
+    refund: t('admin.billing.recordTypes.refund'),
+    transfer_fee: t('admin.billing.recordTypes.transfer_fee')
+  }
+  return labels[type] || type
+}
+
+function getStatusBadge(status: string) {
+  const map: Record<string, string> = {
+    running: 'badge-success',
+    stopped: 'badge-warning',
+    suspended: 'badge-error',
+    creating: 'badge-info'
+  }
+  return map[status] || ''
+}
+
+function getBatchPriceItemStatusClass(status: BatchPriceUpdateItemStatus): string {
+  const map: Record<BatchPriceUpdateItemStatus, string> = {
+    ready: 'text-blue-600 dark:text-blue-400',
+    unchanged: 'text-themed-muted',
+    failed: 'text-red-600 dark:text-red-400'
+  }
+  return map[status]
+}
+
+function getBatchPriceItemStatusLabel(status: BatchPriceUpdateItemStatus): string {
+  const map: Record<BatchPriceUpdateItemStatus, string> = {
+    ready: t('admin.billing.batchPriceStatusReady'),
+    unchanged: t('admin.billing.batchPriceStatusUnchanged'),
+    failed: t('admin.billing.batchPriceStatusFailed')
+  }
+  return map[status]
+}
+
+function formatPriceDiff(value: number): string {
+  if (value > 0) return `+${formatMoney(value)}`
+  if (value < 0) return `-${formatMoney(Math.abs(value))}`
+  return formatMoney(0)
+}
+
+const instancesTotalPages = computed(() => Math.ceil(instancesTotal.value / instancesPageSize.value))
+const recordsTotalPages = computed(() => Math.ceil(recordsTotal.value / recordsPageSize.value))
+const rechargeRecordsTotalPages = computed(() => Math.ceil(rechargeRecordsTotal.value / rechargeRecordsPageSize.value))
+
+function getRechargeStatusBadge(status: string) {
+  const map: Record<string, string> = {
+    pending: 'badge-warning',
+    completed: 'badge-success',
+    cancelled: 'badge-ghost',
+    failed: 'badge-error'
+  }
+  return map[status] || ''
+}
+
+// 获取支付渠道显示文本（渠道名 - 支付方式）
+function getPayChannelDisplay(rec: any): string {
+  const providerName = rec.provider?.displayName || rec.provider?.name || ''
+  const methodCode = rec.payMethod || ''
+  const methodKey = methodCode ? `wallet.paymentMethods.${methodCode}` : ''
+  const methodLabel = methodKey ? t(methodKey) : ''
+  // 如果翻译不存在（返回原 key），则使用原始值
+  const method = methodLabel === methodKey ? methodCode : methodLabel
+  
+  if (providerName && method) {
+    return `${method} - ${providerName}`
+  } else if (providerName) {
+    return providerName
+  } else if (method) {
+    return method
+  }
+  return '-'
+}
+
+function getRechargePaymentDetailsDisplay(rec: any): string {
+  if (rec.actualPaymentMethod) {
+    const methodKey = `wallet.paymentMethods.${rec.actualPaymentMethod}`
+    const translated = t(methodKey)
+    return translated === methodKey ? rec.actualPaymentMethod : translated
+  }
+  return '-'
+}
+
+function getRechargeCreditLabelKey(status: string): string {
+  return status === 'completed' ? 'admin.billing.actualAmount' : 'admin.billing.estimatedAmount'
+}
+
+function getRechargeGatewayStatusText(rec: any): string {
+  return rec.status === 'pending' && rec.gatewayStatusDescription ? rec.gatewayStatusDescription : ''
+}
+
+function copyToClipboard(text: string) {
+  window.navigator.clipboard.writeText(text)
+  toast.success(t('common.copied'))
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <h1 class="page-title">{{ $t('admin.billing.title') }}</h1>
+      <p class="text-sm text-themed-muted mt-1">{{ $t('admin.billing.description') }}</p>
+    </div>
+
+    <!-- Tab 切换 -->
+    <div class="mb-6 overflow-x-auto border-b border-themed">
+      <nav class="flex min-w-max gap-5">
+        <button
+          v-for="tab in billingTabs"
+          :key="tab"
+          class="border-b-2 px-1 pb-3 text-sm font-medium transition-colors"
+          :class="activeTab === tab
+            ? 'border-gray-900 text-gray-900 dark:border-white dark:text-white'
+            : 'border-transparent text-themed-muted hover:text-themed'"
+          @click="switchTab(tab)"
+        >
+          {{ $t(`admin.billing.tabs.${tab}`) }}
+        </button>
+      </nav>
+    </div>
+
+    <!-- 概览 Tab -->
+    <div v-show="activeTab === 'overview'">
+      <div v-if="overviewLoading" class="space-y-5">
+        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          <div v-for="i in 4" :key="`overview-kpi-${i}`" class="card h-36 animate-pulse p-5">
+            <div class="h-4 w-20 rounded bg-themed-secondary"></div>
+            <div class="mt-5 h-8 w-36 rounded bg-themed-secondary"></div>
+            <div class="mt-4 h-3 w-28 rounded bg-themed-secondary"></div>
+          </div>
+        </div>
+        <div class="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]">
+          <div class="card h-80 animate-pulse p-5">
+            <div class="h-5 w-28 rounded bg-themed-secondary"></div>
+            <div class="mt-6 space-y-5">
+              <div v-for="i in 3" :key="`overview-mix-${i}`" class="h-16 rounded bg-themed-secondary"></div>
+            </div>
+          </div>
+          <div class="card h-80 animate-pulse p-5">
+            <div class="h-5 w-28 rounded bg-themed-secondary"></div>
+            <div class="mt-6 h-24 rounded bg-themed-secondary"></div>
+            <div class="mt-5 space-y-3">
+              <div v-for="i in 3" :key="`overview-health-${i}`" class="h-12 rounded bg-themed-secondary"></div>
+            </div>
+          </div>
+        </div>
+        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          <div v-for="i in 4" :key="`overview-aff-${i}`" class="card h-28 animate-pulse p-5">
+            <div class="h-4 w-24 rounded bg-themed-secondary"></div>
+            <div class="mt-5 h-7 w-32 rounded bg-themed-secondary"></div>
+          </div>
+        </div>
+      </div>
+
+      <template v-else-if="overview">
+        <div class="space-y-6">
+          <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            <article class="card min-w-0 p-5 sm:p-6 xl:col-span-2">
+              <div class="flex items-start justify-between gap-4">
+                <div class="min-w-0">
+                  <p class="text-sm font-medium text-themed-muted">{{ $t('admin.billing.netRevenueLabel') }}</p>
+                  <p class="mt-3 break-words text-3xl font-semibold leading-tight tracking-normal text-themed md:text-4xl">
+                    {{ formatMoney(overview.netRevenue) }}
+                  </p>
+                </div>
+                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-300">
+                  <BillingOverviewIcon name="wallet" class="h-5 w-5" />
+                </div>
+              </div>
+
+              <div class="mt-6 grid gap-4 sm:grid-cols-2">
+                <div class="min-w-0 border-l-2 border-sky-500/40 pl-3">
+                  <p class="text-xs text-themed-muted">{{ $t('admin.billing.todayRevenue') }}</p>
+                  <p class="mt-1 break-words text-xl font-semibold text-themed">{{ formatMoney(overview.todayRevenue) }}</p>
+                  <p class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.todayRecharge') }} {{ formatMoney(overview.recharge.todayAmount) }}</p>
+                </div>
+                <div class="min-w-0 border-l-2 border-emerald-500/40 pl-3">
+                  <p class="text-xs text-themed-muted">{{ $t('admin.billing.thisMonthRevenue') }}</p>
+                  <p class="mt-1 break-words text-xl font-semibold text-themed">{{ formatMoney(overview.thisMonthRevenue) }}</p>
+                  <p class="mt-1 text-xs" :class="monthlyRevenueChange !== null && monthlyRevenueChange < 0 ? 'text-rose-500 dark:text-rose-300' : 'text-emerald-600 dark:text-emerald-300'">
+                    {{ $t('admin.billing.thisMonthVsLastMonth') }} {{ formatSignedPercent(monthlyRevenueChange) }}
+                  </p>
+                </div>
+              </div>
+            </article>
+
+            <article class="card min-w-0 p-5">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="text-sm text-themed-muted">{{ $t('admin.billing.totalRevenue') }}</p>
+                  <p class="mt-2 break-words text-2xl font-semibold text-themed">{{ formatMoney(overview.totalRevenue) }}</p>
+                </div>
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-300">
+                  <BillingOverviewIcon name="chart" class="h-5 w-5" />
+                </div>
+              </div>
+              <p class="mt-3 text-xs text-themed-muted">{{ $t('admin.billing.todayRevenue') }} {{ formatMoney(overview.todayRevenue) }}</p>
+            </article>
+
+            <article class="card min-w-0 p-5">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="text-sm text-themed-muted">{{ $t('admin.billing.totalRecharge') }}</p>
+                  <p class="mt-2 break-words text-2xl font-semibold text-themed">{{ formatMoney(overview.recharge.totalAmount) }}</p>
+                </div>
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-300">
+                  <BillingOverviewIcon name="wallet" class="h-5 w-5" />
+                </div>
+              </div>
+              <p class="mt-3 text-xs text-themed-muted">{{ formatCount(overview.recharge.totalCount) }} {{ $t('admin.billing.orders') }}</p>
+            </article>
+
+            <article class="card min-w-0 p-5">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="text-sm text-themed-muted">{{ $t('admin.billing.hostedRevenueShare') }}</p>
+                  <p class="mt-2 break-words text-2xl font-semibold text-themed">{{ formatPercent(hostedRevenueShare) }}</p>
+                </div>
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-300">
+                  <BillingOverviewIcon name="cloud" class="h-5 w-5" />
+                </div>
+              </div>
+              <p class="mt-3 text-xs text-themed-muted">{{ formatMoney(overview.revenueMix.hosted.totalAmount) }}</p>
+            </article>
+
+            <article class="card min-w-0 p-5">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <p class="text-sm text-themed-muted">{{ $t('admin.billing.totalRefunds') }}</p>
+                  <p class="mt-2 break-words text-2xl font-semibold text-themed">{{ formatMoney(overview.totalRefunds) }}</p>
+                </div>
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-rose-500/10 text-rose-600 dark:text-rose-300">
+                  <BillingOverviewIcon name="ban" class="h-5 w-5" />
+                </div>
+              </div>
+              <p class="mt-3 text-xs text-themed-muted">{{ formatPercent(refundRate) }}</p>
+            </article>
+          </section>
+
+          <section>
+            <div class="mb-3 flex items-center justify-between gap-4">
+              <div>
+                <h2 class="text-base font-semibold text-themed">{{ $t('admin.billing.rechargeLabel') }} / {{ $t('admin.billing.revenueLabel') }}</h2>
+                <p class="mt-1 text-sm text-themed-muted">{{ $t('admin.billing.overviewPeriods.total') }} · {{ $t('admin.billing.overviewPeriods.thisMonth') }} · {{ $t('admin.billing.overviewPeriods.today') }}</p>
+              </div>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-3">
+              <article
+                v-for="period in periodComparisonCards"
+                :key="period.key"
+                class="card min-w-0 p-5"
+              >
+                <div class="flex items-start justify-between gap-4">
+                  <div class="min-w-0">
+                    <span class="inline-flex rounded-md px-2.5 py-1 text-xs font-medium" :class="period.badgeClass">
+                      {{ period.label }}
+                    </span>
+                    <p class="mt-3 text-xs text-themed-muted">{{ $t('admin.billing.rechargeLabel') }} / {{ $t('admin.billing.revenueLabel') }}</p>
+                  </div>
+                  <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-themed-tertiary" :class="period.iconClass">
+                    <BillingOverviewIcon name="wallet" class="h-5 w-5" />
+                  </div>
+                </div>
+
+                <dl class="mt-5 divide-y divide-themed">
+                  <div class="flex items-center justify-between gap-4 pb-3">
+                    <dt class="text-sm text-themed-muted">{{ $t('admin.billing.rechargeLabel') }}</dt>
+                    <dd class="min-w-0 text-right">
+                      <div class="break-words text-lg font-semibold text-themed">{{ formatMoney(period.rechargeAmount) }}</div>
+                      <div class="mt-1 text-xs text-themed-muted">{{ formatCount(period.rechargeCount) }} {{ $t('admin.billing.orders') }}</div>
+                    </dd>
+                  </div>
+                  <div class="flex items-center justify-between gap-4 pt-3">
+                    <dt class="text-sm text-themed-muted">{{ $t('admin.billing.revenueLabel') }}</dt>
+                    <dd class="min-w-0 break-words text-right text-lg font-semibold text-themed">{{ formatMoney(period.revenueAmount) }}</dd>
+                  </div>
+                </dl>
+              </article>
+            </div>
+          </section>
+
+          <div class="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]">
+            <section class="card min-w-0 p-5">
+              <div class="flex flex-col gap-3 border-b border-themed pb-4 sm:flex-row sm:items-start sm:justify-between">
+                <div class="min-w-0">
+                  <h2 class="text-base font-semibold text-themed">{{ $t('admin.billing.revenueBreakdownTitle') }}</h2>
+                  <p class="mt-1 text-sm text-themed-muted">{{ $t('admin.billing.directRevenue') }} / {{ $t('admin.billing.hostedRevenue') }}</p>
+                </div>
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:text-sky-300">
+                  <BillingOverviewIcon name="chart" class="h-5 w-5" />
+                </div>
+              </div>
+
+              <div class="mt-5 grid gap-4 sm:grid-cols-2">
+                <div class="min-w-0 border-l-2 border-sky-500 pl-3">
+                  <p class="text-sm text-themed-muted">{{ $t('admin.billing.directRevenue') }}</p>
+                  <p class="mt-1 break-words text-2xl font-semibold text-themed">{{ formatMoney(overview.revenueMix.direct.totalAmount) }}</p>
+                  <p class="mt-1 text-xs text-themed-muted">{{ formatPercent(revenueMixRows[0]?.directRatio || 0) }}</p>
+                </div>
+                <div class="min-w-0 border-l-2 border-amber-500 pl-3">
+                  <p class="text-sm text-themed-muted">{{ $t('admin.billing.hostedRevenue') }}</p>
+                  <p class="mt-1 break-words text-2xl font-semibold text-themed">{{ formatMoney(overview.revenueMix.hosted.totalAmount) }}</p>
+                  <p class="mt-1 text-xs text-themed-muted">{{ formatPercent(revenueMixRows[0]?.hostedRatio || 0) }}</p>
+                </div>
+              </div>
+
+              <div class="mt-5 h-2.5 overflow-hidden rounded-full bg-themed-tertiary">
+                <div class="flex h-full w-full">
+                  <div class="bg-sky-500" :style="{ width: `${revenueMixRows[0]?.directRatio || 0}%` }"></div>
+                  <div class="bg-amber-500" :style="{ width: `${revenueMixRows[0]?.hostedRatio || 0}%` }"></div>
+                </div>
+              </div>
+
+              <div class="mt-5 divide-y divide-themed">
+                <div v-for="row in revenueMixRows" :key="row.key" class="py-4 first:pt-0 last:pb-0">
+                  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div class="min-w-0">
+                      <p class="font-medium text-themed">{{ row.label }}</p>
+                      <p class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.revenueLabel') }} {{ formatMoney(row.directAmount + row.hostedAmount) }}</p>
+                    </div>
+                    <div class="flex flex-wrap gap-2 text-xs">
+                      <span class="inline-flex items-center gap-2 rounded-md bg-sky-500/10 px-2.5 py-1 font-medium text-sky-600 dark:text-sky-300">
+                        <span class="h-2 w-2 rounded-full bg-sky-500"></span>
+                        {{ formatPercent(row.directRatio) }}
+                      </span>
+                      <span class="inline-flex items-center gap-2 rounded-md bg-amber-500/10 px-2.5 py-1 font-medium text-amber-600 dark:text-amber-300">
+                        <span class="h-2 w-2 rounded-full bg-amber-500"></span>
+                        {{ formatPercent(row.hostedRatio) }}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="mt-3 grid gap-3 sm:grid-cols-2">
+                    <div class="min-w-0">
+                      <div class="flex items-center justify-between gap-3 text-sm">
+                        <span class="text-themed-muted">{{ $t('admin.billing.directRevenue') }}</span>
+                        <span class="break-words text-right font-semibold text-themed">{{ formatMoney(row.directAmount) }}</span>
+                      </div>
+                    </div>
+                    <div class="min-w-0">
+                      <div class="flex items-center justify-between gap-3 text-sm">
+                        <span class="text-themed-muted">{{ $t('admin.billing.hostedRevenue') }}</span>
+                        <span class="break-words text-right font-semibold text-themed">{{ formatMoney(row.hostedAmount) }}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="mt-3 h-2 overflow-hidden rounded-full bg-themed-tertiary">
+                    <div class="flex h-full w-full">
+                      <div class="bg-sky-500" :style="{ width: `${row.directRatio}%` }"></div>
+                      <div class="bg-amber-500" :style="{ width: `${row.hostedRatio}%` }"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="card min-w-0 p-5">
+              <div class="flex items-start justify-between gap-4 border-b border-themed pb-4">
+                <div class="min-w-0">
+                  <h2 class="text-base font-semibold text-themed">{{ $t('admin.billing.instanceHealthTitle') }}</h2>
+                  <p class="mt-1 text-sm text-themed-muted">{{ formatCount(overview.activePaidInstancesCount) }} / {{ formatCount(overview.paidInstancesCount) }}</p>
+                </div>
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-300">
+                  <BillingOverviewIcon name="server" class="h-5 w-5" />
+                </div>
+              </div>
+
+              <div class="mt-5">
+                <div class="flex items-end justify-between gap-4">
+                  <div class="min-w-0">
+                    <p class="text-sm text-themed-muted">{{ $t('admin.billing.paidInstances') }}</p>
+                    <p class="mt-1 break-words text-3xl font-semibold text-themed">{{ formatCount(overview.paidInstancesCount) }}</p>
+                  </div>
+                  <div class="rounded-md bg-emerald-500/10 px-2.5 py-1 text-sm font-medium text-emerald-600 dark:text-emerald-300">
+                    {{ formatPercent(activeInstanceShare) }}
+                  </div>
+                </div>
+
+                <div class="mt-4 h-2.5 overflow-hidden rounded-full bg-themed-tertiary">
+                  <div class="h-full rounded-full bg-emerald-500" :style="{ width: `${activeInstanceShare}%` }"></div>
+                </div>
+              </div>
+
+              <div class="mt-5 divide-y divide-themed">
+                <div
+                  v-for="card in instanceStatusCards"
+                  :key="card.key"
+                  class="py-4 first:pt-0 last:pb-0"
+                >
+                  <div class="flex items-center justify-between gap-4">
+                    <div class="flex min-w-0 items-center gap-3">
+                      <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg" :class="card.surfaceClass">
+                        <BillingOverviewIcon :name="card.icon" class="h-4 w-4" :class="card.toneClass" />
+                      </div>
+                      <div class="min-w-0">
+                        <p class="text-sm font-medium text-themed">{{ card.label }}</p>
+                        <p class="mt-1 text-xs text-themed-muted">{{ formatPercent(card.progress || 0) }}</p>
+                      </div>
+                    </div>
+                    <div class="shrink-0 text-xl font-semibold text-themed">{{ formatCount(card.value) }}</div>
+                  </div>
+                  <div class="mt-3 h-2 overflow-hidden rounded-full bg-themed-tertiary">
+                    <div class="h-full rounded-full bg-current" :class="card.toneClass" :style="{ width: `${card.progress || 0}%` }"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <section>
+            <div class="mb-3 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+              <div>
+                <h2 class="text-base font-semibold text-themed">{{ $t('admin.billing.affOverviewTitle') }}</h2>
+                <p class="mt-1 text-sm text-themed-muted">{{ formatCount(overview.aff.totalOrders) }} {{ $t('admin.billing.orders') }}</p>
+              </div>
+            </div>
+
+            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+              <article
+                v-for="card in affCards"
+                :key="card.key"
+                class="card min-w-0 p-5"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <p class="text-sm text-themed-muted">{{ card.label }}</p>
+                    <p class="mt-2 break-words text-2xl font-semibold text-themed">
+                      {{ card.format === 'money' ? formatMoney(card.value) : formatCount(card.value) }}
+                    </p>
+                  </div>
+                  <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg" :class="card.surfaceClass">
+                    <BillingOverviewIcon :name="card.icon" class="h-5 w-5" :class="card.toneClass" />
+                  </div>
+                </div>
+              </article>
+            </div>
+          </section>
+        </div>
+      </template>
+
+      <div v-else class="card p-8 text-center text-sm text-themed-muted">
+        {{ $t('common.noData') }}
+      </div>
+    </div>
+
+    <!-- 实例 Tab -->
+    <div v-show="activeTab === 'instances'">
+      <!-- 筛选 -->
+      <div class="card mb-4 p-4 md:p-5">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <div class="text-sm font-medium text-themed">{{ $t('admin.billing.tabs.instances') }}</div>
+            <div class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.totalCount', { count: instancesTotal }) }}</div>
+          </div>
+          <div class="flex flex-wrap items-center gap-3">
+            <select v-model="instancesFilter" class="input w-40" @change="instancesPage = 1; loadInstances()">
+              <option value="">{{ $t('admin.billing.allStatus') }}</option>
+              <option value="running">{{ $t('instance.status.running') }}</option>
+              <option value="stopped">{{ $t('instance.status.stopped') }}</option>
+              <option value="suspended">{{ $t('instance.status.suspended') }}</option>
+            </select>
+            <select v-model="instancesHostFilter" class="input w-48" @change="instancesPage = 1; loadInstances()">
+              <option value="">{{ $t('admin.billing.allHosts') }}</option>
+              <option v-for="host in hosts" :key="host.id" :value="host.id">{{ host.name }}</option>
+            </select>
+            <label class="inline-flex items-center gap-2 rounded-xl bg-themed-tertiary px-3 py-2 text-sm">
+              <input v-model="showExpiring" type="checkbox" class="checkbox" @change="instancesPage = 1; loadInstances()" />
+              {{ $t('admin.billing.showExpiring') }}
+            </label>
+            <label class="inline-flex items-center gap-2 rounded-xl bg-themed-tertiary px-3 py-2 text-sm">
+              <input v-model="showDateColumns" type="checkbox" class="checkbox" />
+              {{ $t('admin.billing.showDateColumns') }}
+            </label>
+          </div>
+        </div>
+
+        <div class="mt-4 flex flex-col gap-3 sm:flex-row">
+          <div class="flex-1">
+            <input
+              v-model="instancesSearch"
+              type="text"
+              class="input w-full"
+              :placeholder="$t('admin.billing.searchPlaceholder')"
+              @keyup.enter="instancesPage = 1; loadInstances()"
+            />
+          </div>
+          <button
+            class="btn btn-primary sm:w-auto"
+            @click="instancesPage = 1; loadInstances()"
+          >
+            {{ $t('common.search') }}
+          </button>
+        </div>
+      </div>
+
+      <SkeletonLoader v-if="instancesLoading" :count="3" />
+
+      <div v-else-if="instances.length > 0" class="card overflow-hidden">
+        <div class="flex flex-col gap-3 border-b border-themed px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <div class="text-sm font-medium text-themed">{{ $t('admin.billing.tabs.instances') }}</div>
+            <div class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.totalCount', { count: instancesTotal }) }}</div>
+          </div>
+          <div class="flex flex-wrap items-center gap-3 sm:justify-end">
+            <div class="hidden rounded-xl bg-themed-secondary px-3 py-2 text-xs text-themed-muted md:block">
+              {{ selectedInstancesCount > 0 ? $t('admin.billing.batchSelectedCount', { count: selectedInstancesCount }) : (showExpiring ? $t('admin.billing.showExpiring') : $t('admin.billing.allStatus')) }}
+            </div>
+            <button
+              class="btn btn-primary btn-sm"
+              :disabled="selectedInstancesCount === 0"
+              @click="openBatchPriceModal"
+            >
+              {{ $t('admin.billing.batchUpdatePrice') }}
+            </button>
+          </div>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-themed-secondary/80">
+              <tr>
+                <th class="w-11 p-3 whitespace-nowrap">
+                  <input
+                    type="checkbox"
+                    class="checkbox"
+                    :checked="allCurrentPageSelected"
+                    :indeterminate="someCurrentPageSelected && !allCurrentPageSelected"
+                    :disabled="selectableInstances.length === 0"
+                    :aria-label="$t('admin.billing.selectAllCurrentPage')"
+                    @change="toggleSelectAllCurrentPage"
+                  />
+                </th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.hostingType') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.instanceType') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">ID</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.instanceName') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.instanceStatus') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.user') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.package') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.plan') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.host') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.price') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.cycle') }}</th>
+                <th v-if="showDateColumns" class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.purchaseDate') }}</th>
+                <th v-if="showDateColumns" class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.expiresAt') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.remainingDays') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('common.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="inst in instances" :key="inst.id" class="border-t border-themed hover:bg-themed-secondary/50 transition-colors">
+                <td class="p-3 whitespace-nowrap">
+                  <input
+                    v-model="selectedInstanceIds"
+                    type="checkbox"
+                    class="checkbox"
+                    :value="inst.id"
+                    :disabled="inst.status === 'deleted'"
+                    :aria-label="$t('admin.billing.selectInstance')"
+                  />
+                </td>
+                <!-- 托管类型 -->
+                <td class="p-3 whitespace-nowrap">
+                  <span 
+                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
+                    :class="inst.isHostedInstance 
+                      ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300' 
+                      : 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'"
+                  >
+                    {{ inst.isHostedInstance ? $t('admin.billing.hosted') : $t('admin.billing.direct') }}
+                  </span>
+                </td>
+                <!-- 实例类型图标 -->
+                <td class="p-3 whitespace-nowrap">
+                  <span 
+                    class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium cursor-pointer"
+                    :class="inst.instanceTypeLabel === 'PRIME' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300' : 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300'"
+                    @click="router.push(`/instances/${inst.id}`)"
+                  >
+                    <svg v-if="inst.instanceTypeLabel === 'PRIME'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                    <svg v-else class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
+                    </svg>
+                    {{ inst.instanceTypeLabel }}
+                  </span>
+                </td>
+                <!-- ID -->
+                <td class="p-3 whitespace-nowrap">
+                  <div class="flex flex-col gap-0.5">
+                    <span 
+                      class="text-blue-500 hover:text-blue-600 cursor-pointer font-mono text-xs"
+                      @click="router.push(`/instances/${inst.id}`)"
+                    >#{{ inst.id }}</span>
+                    <span class="text-themed-muted font-mono text-xs" :title="inst.incusId">{{ inst.incusId?.slice(0, 8) }}</span>
+                  </div>
+                </td>
+                <!-- 实例名 -->
+                <td class="p-3">
+                  <span 
+                    class="text-themed font-medium hover:text-blue-500 cursor-pointer"
+                    @click="router.push(`/instances/${inst.id}`)"
+                  >{{ inst.name }}</span>
+                </td>
+                <!-- 状态 -->
+                <td class="p-3 whitespace-nowrap">
+                  <span :class="['badge', getStatusBadge(inst.status)]">{{ $t('instance.status.' + inst.status) }}</span>
+                  <span v-if="inst.autoRenew" class="badge badge-info ml-1">{{ $t('admin.billing.autoRenew') }}</span>
+                </td>
+                <!-- 用户 -->
+                <td class="p-3 whitespace-nowrap">
+                  <div class="flex items-center gap-2">
+                    <UserAvatar :username="inst.user?.username || ''" :avatar-style="inst.user?.avatarStyle || 'bottts'" :badge-id="inst.user?.avatarBadgeId || null" :size="28" />
+                    <div class="flex flex-col">
+                      <span class="text-themed font-medium">{{ inst.user?.username || '-' }}</span>
+                      <div class="flex items-center gap-1 text-xs text-themed-muted">
+                        <span>#{{ inst.user?.id }}</span>
+                        <span v-if="inst.user?.email" class="truncate max-w-32" :title="inst.user.email">{{ inst.user.email }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <!-- 套餐名 -->
+                <td class="p-3 whitespace-nowrap">{{ inst.package?.name || '-' }}</td>
+                <!-- 方案名 -->
+                <td class="p-3 whitespace-nowrap">{{ inst.packagePlan?.name || '-' }}</td>
+                <!-- 宿主机名 -->
+                <td class="p-3 whitespace-nowrap">{{ inst.host?.name || '-' }}</td>
+                <!-- 价格（可点击修改） -->
+                <td class="p-3 whitespace-nowrap">
+                  <button
+                    v-if="inst.billingPrice"
+                    class="text-blue-500 hover:text-blue-600 hover:underline cursor-pointer font-medium"
+                    @click="openPriceModal(inst)"
+                  >
+                    {{ formatMoney(inst.billingPrice) }}
+                  </button>
+                  <span v-else>-</span>
+                </td>
+                <!-- 周期 -->
+                <td class="p-3 whitespace-nowrap">{{ inst.billingCycle ? $t('admin.billing.cycleMonths', { months: inst.billingCycle }) : '-' }}</td>
+                <!-- 购买日期 -->
+                <td v-if="showDateColumns" class="p-3 whitespace-nowrap text-themed-muted">{{ formatDate(inst.createdAt) }}</td>
+                <!-- 到期时间 -->
+                <td v-if="showDateColumns" class="p-3 whitespace-nowrap text-themed-muted">{{ formatDate(inst.expiresAt) }}</td>
+                <!-- 剩余天数 -->
+                <td class="p-3 whitespace-nowrap">
+                  <span 
+                    v-if="inst.remainingDays !== null"
+                    :class="[
+                      'font-medium',
+                      inst.remainingDays <= 0 ? 'text-red-500' : 
+                      inst.remainingDays <= 7 ? 'text-yellow-500' : 'text-green-500'
+                    ]"
+                  >
+                    {{ inst.remainingDays <= 0 ? $t('admin.billing.expired') : inst.remainingDays + ' ' + $t('admin.billing.days') }}
+                  </span>
+                  <span v-else>-</span>
+                </td>
+                <!-- 操作 -->
+                <td class="p-3 whitespace-nowrap">
+                  <div class="flex items-center gap-1">
+                    <button
+                      v-if="inst.status === 'suspended'"
+                      class="btn btn-xs btn-ghost text-green-500"
+                      @click="openActionModal('unsuspend', inst)"
+                    >
+                      {{ $t('admin.billing.unsuspend') }}
+                    </button>
+                    <button class="btn btn-xs btn-ghost" @click="openActionModal('extend', inst)">
+                      {{ $t('admin.billing.extend') }}
+                    </button>
+                    <button 
+                      v-if="inst.remainingDays > 0" 
+                      class="btn btn-xs btn-ghost text-blue-500" 
+                      @click="openUpgradeModal(inst)"
+                    >
+                      {{ $t('admin.billing.upgradePlan') }}
+                    </button>
+                    <button
+                      v-if="!inst.hasAffBinding"
+                      class="btn btn-xs btn-ghost text-purple-500"
+                      @click="openActionModal('applyDiscount', inst)"
+                    >
+                      {{ $t('admin.billing.applyDiscount') }}
+                    </button>
+                    <button class="btn btn-xs btn-ghost text-red-500" @click="openActionModal('deleteRefund', inst)">
+                      {{ $t('admin.billing.deleteRefund') }}
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-else class="card p-10 text-center">
+        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-3xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-300">
+          <BillingOverviewIcon name="server" class="h-7 w-7" />
+        </div>
+        <div class="mt-4 text-base font-medium text-themed">{{ $t('admin.billing.noInstances') }}</div>
+        <div class="mt-1 text-sm text-themed-muted">{{ $t('admin.billing.searchPlaceholder') }}</div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="instances.length > 0" class="card mt-4 flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between">
+        <!-- 每页条数选择器 -->
+        <div class="flex items-center gap-2 text-sm text-themed-muted">
+          <span>{{ $t('admin.billing.perPage') }}</span>
+          <select
+            :value="instancesPageSize"
+            class="input w-20 py-1"
+            @change="instancesPageSize = Number(($event.target as HTMLSelectElement).value); instancesPage = 1; loadInstances()"
+          >
+            <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}</option>
+          </select>
+          <span>{{ $t('admin.billing.totalCount', { count: instancesTotal }) }}</span>
+        </div>
+        <!-- 分页导航 -->
+        <div v-if="instancesTotalPages > 1" class="flex items-center gap-2">
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="instancesPage <= 1"
+            @click="instancesPage--; loadInstances()"
+          >
+            {{ $t('common.prevPage') }}
+          </button>
+          <span class="text-sm text-themed-muted">
+            {{ instancesPage }} / {{ instancesTotalPages }}
+          </span>
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="instancesPage >= instancesTotalPages"
+            @click="instancesPage++; loadInstances()"
+          >
+            {{ $t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 记录 Tab -->
+    <div v-show="activeTab === 'records'">
+      <SkeletonLoader v-if="recordsLoading" :count="5" />
+
+      <div v-else-if="records.length > 0" class="card overflow-hidden">
+        <div class="flex items-center justify-between gap-4 border-b border-themed px-5 py-4">
+          <div>
+            <div class="text-sm font-medium text-themed">{{ $t('admin.billing.tabs.records') }}</div>
+            <div class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.totalCount', { count: recordsTotal }) }}</div>
+          </div>
+          <div class="hidden rounded-xl bg-themed-secondary px-3 py-2 text-xs text-themed-muted md:block">
+            {{ $t('admin.billing.recordType') }} / {{ $t('admin.billing.amount') }}
+          </div>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-themed-secondary/80">
+              <tr>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.recordType') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.amount') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.instance') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.user') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.remark') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.time') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="rec in records" :key="rec.id" class="border-t border-themed hover:bg-themed-secondary/40 transition-colors">
+                <td class="p-3 whitespace-nowrap">{{ getRecordTypeLabel(rec.type) }}</td>
+                <td class="p-3 whitespace-nowrap" :class="rec.amount >= 0 ? 'text-green-500' : 'text-red-500'">
+                  {{ formatMoney(rec.amount) }}
+                </td>
+                <td class="p-3 whitespace-nowrap">{{ rec.instance?.name || '-' }}</td>
+                <td class="p-3 whitespace-nowrap">{{ rec.user?.username || '-' }}</td>
+                <td class="p-3 text-themed-muted max-w-xs truncate">{{ rec.remark || '-' }}</td>
+                <td class="p-3 text-themed-muted whitespace-nowrap">{{ formatDate(rec.createdAt) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-else class="card p-10 text-center">
+        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-3xl bg-sky-500/10 text-sky-600 dark:text-sky-300">
+          <BillingOverviewIcon name="chart" class="h-7 w-7" />
+        </div>
+        <div class="mt-4 text-base font-medium text-themed">{{ $t('admin.billing.noRecords') }}</div>
+        <div class="mt-1 text-sm text-themed-muted">{{ $t('admin.billing.tabs.records') }}</div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="records.length > 0" class="card mt-4 flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between">
+        <!-- 每页条数选择器 -->
+        <div class="flex items-center gap-2 text-sm text-themed-muted">
+          <span>{{ $t('admin.billing.perPage') }}</span>
+          <select
+            :value="recordsPageSize"
+            class="input w-20 py-1"
+            @change="recordsPageSize = Number(($event.target as HTMLSelectElement).value); recordsPage = 1; loadRecords()"
+          >
+            <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}</option>
+          </select>
+          <span>{{ $t('admin.billing.totalCount', { count: recordsTotal }) }}</span>
+        </div>
+        <!-- 分页导航 -->
+        <div v-if="recordsTotalPages > 1" class="flex items-center gap-2">
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="recordsPage <= 1"
+            @click="recordsPage--; loadRecords()"
+          >
+            {{ $t('common.prevPage') }}
+          </button>
+          <span class="text-sm text-themed-muted">
+            {{ recordsPage }} / {{ recordsTotalPages }}
+          </span>
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="recordsPage >= recordsTotalPages"
+            @click="recordsPage++; loadRecords()"
+          >
+            {{ $t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 充值记录 Tab -->
+    <div v-show="activeTab === 'rechargeRecords'">
+      <!-- 筛选 -->
+      <div class="card mb-4 p-4 md:p-5">
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <div class="text-sm font-medium text-themed">{{ $t('admin.billing.tabs.rechargeRecords') }}</div>
+            <div class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.totalCount', { count: rechargeRecordsTotal }) }}</div>
+          </div>
+          <div class="flex items-center gap-3">
+            <select v-model="rechargeRecordsFilter" class="input w-44" @change="rechargeRecordsPage = 1; loadRechargeRecords()">
+              <option value="">{{ $t('admin.billing.allStatus') }}</option>
+              <option value="pending">{{ $t('admin.billing.rechargeStatus.pending') }}</option>
+              <option value="completed">{{ $t('admin.billing.rechargeStatus.completed') }}</option>
+              <option value="cancelled">{{ $t('admin.billing.rechargeStatus.cancelled') }}</option>
+              <option value="failed">{{ $t('admin.billing.rechargeStatus.failed') }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <SkeletonLoader v-if="rechargeRecordsLoading" :count="5" />
+
+      <div v-else-if="rechargeRecords.length > 0" class="card overflow-hidden">
+        <div class="flex items-center justify-between gap-4 border-b border-themed px-5 py-4">
+          <div>
+            <div class="text-sm font-medium text-themed">{{ $t('admin.billing.tabs.rechargeRecords') }}</div>
+            <div class="mt-1 text-xs text-themed-muted">{{ $t('admin.billing.totalCount', { count: rechargeRecordsTotal }) }}</div>
+          </div>
+          <div class="hidden rounded-xl bg-themed-secondary px-3 py-2 text-xs text-themed-muted md:block">
+            {{ rechargeRecordsFilter ? $t(`admin.billing.rechargeStatus.${rechargeRecordsFilter}`) : $t('admin.billing.allStatus') }}
+          </div>
+        </div>
+        <div class="divide-y divide-themed md:hidden">
+          <div v-for="rec in rechargeRecords" :key="rec.id" class="space-y-3 px-5 py-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="truncate font-mono text-xs text-themed">
+                  <span class="cursor-pointer hover:text-blue-500" @click="copyToClipboard(rec.orderNo)">{{ rec.orderNo }}</span>
+                </div>
+                <div class="mt-1 text-sm text-themed">{{ rec.user?.username || '-' }}</div>
+                <div class="mt-1 text-xs text-themed-muted">{{ formatDate(rec.createdAt) }}</div>
+              </div>
+              <span :class="['badge', getRechargeStatusBadge(rec.status)]">{{ $t(`admin.billing.rechargeStatus.${rec.status}`) }}</span>
+            </div>
+
+            <div class="grid grid-cols-2 gap-3 text-sm">
+              <div>
+                <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('admin.billing.amount') }}</div>
+                <div class="mt-1 text-themed">{{ formatMoney(rec.amount) }}</div>
+              </div>
+              <div>
+                <div class="text-xs uppercase tracking-wide text-themed-muted">{{ $t('admin.billing.creditAmount') }}</div>
+                <div class="mt-1 text-themed">{{ rec.actualAmount !== null ? formatMoney(rec.actualAmount) : '-' }}</div>
+                <div v-if="rec.actualAmount !== null" class="mt-1 text-xs text-themed-muted">
+                  {{ $t(getRechargeCreditLabelKey(rec.status)) }}
+                </div>
+              </div>
+            </div>
+
+            <div class="space-y-1 text-xs text-themed-muted">
+              <div>{{ $t('admin.billing.payChannel') }}: {{ getPayChannelDisplay(rec) }}</div>
+              <div>{{ $t('admin.billing.paymentDetails') }}: {{ getRechargePaymentDetailsDisplay(rec) }}</div>
+              <div v-if="getRechargeGatewayStatusText(rec)">{{ getRechargeGatewayStatusText(rec) }}</div>
+              <div v-if="rec.paymentUuid" class="truncate font-mono" :title="rec.paymentUuid">
+                {{ $t('admin.billing.paymentUuid') }} {{ rec.paymentUuid }}
+              </div>
+              <div v-if="rec.paymentTxid" class="truncate font-mono" :title="rec.paymentTxid">
+                {{ $t('admin.billing.paymentTxid') }} {{ rec.paymentTxid }}
+              </div>
+              <div v-if="rec.tradeNo" class="truncate font-mono" :title="rec.tradeNo">
+                {{ $t('admin.billing.tradeNo') }} {{ rec.tradeNo }}
+              </div>
+            </div>
+
+            <div class="flex justify-end">
+              <button
+                v-if="rec.status === 'pending'"
+                class="btn btn-sm btn-ghost text-blue-500"
+                :disabled="syncingRecordId === rec.id"
+                @click="syncRechargeRecord(rec)"
+              >
+                {{ syncingRecordId === rec.id ? $t('common.syncing') : $t('admin.billing.sync') }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="hidden overflow-x-auto md:block">
+          <table class="w-full text-sm">
+            <thead class="bg-themed-secondary/80">
+              <tr>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.rechargeOrderNo') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.user') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.amount') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.creditAmount') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.payChannel') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.paymentDetails') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.rechargeStatusLabel') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.tradeNo') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('admin.billing.time') }}</th>
+                <th class="text-left p-3 whitespace-nowrap">{{ $t('common.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="rec in rechargeRecords" :key="rec.id" class="border-t border-themed hover:bg-themed-secondary/40 transition-colors">
+                <td class="p-3 font-mono text-xs whitespace-nowrap">
+                  <span class="cursor-pointer hover:text-blue-500" @click="copyToClipboard(rec.orderNo)">{{ rec.orderNo }}</span>
+                </td>
+                <td class="p-3 whitespace-nowrap">{{ rec.user?.username || '-' }}</td>
+                <td class="p-3 whitespace-nowrap">{{ formatMoney(rec.amount) }}</td>
+                <td class="p-3 whitespace-nowrap">
+                  <div>{{ rec.actualAmount !== null ? formatMoney(rec.actualAmount) : '-' }}</div>
+                  <div v-if="rec.actualAmount !== null" class="mt-1 text-xs text-themed-muted">
+                    {{ $t(getRechargeCreditLabelKey(rec.status)) }}
+                  </div>
+                </td>
+                <td class="p-3 whitespace-nowrap">{{ getPayChannelDisplay(rec) }}</td>
+                <td class="p-3 text-xs text-themed-muted max-w-[220px]">
+                  <div>{{ getRechargePaymentDetailsDisplay(rec) }}</div>
+                  <div v-if="getRechargeGatewayStatusText(rec)" class="mt-1">{{ getRechargeGatewayStatusText(rec) }}</div>
+                  <div v-if="rec.paymentUuid" class="mt-1 truncate font-mono" :title="rec.paymentUuid">
+                    {{ $t('admin.billing.paymentUuid') }} {{ rec.paymentUuid }}
+                  </div>
+                  <div v-if="rec.paymentTxid" class="mt-1 truncate font-mono" :title="rec.paymentTxid">
+                    {{ $t('admin.billing.paymentTxid') }} {{ rec.paymentTxid }}
+                  </div>
+                </td>
+                <td class="p-3 whitespace-nowrap">
+                  <span :class="['badge', getRechargeStatusBadge(rec.status)]">{{ $t(`admin.billing.rechargeStatus.${rec.status}`) }}</span>
+                </td>
+                <td class="p-3 font-mono text-xs whitespace-nowrap text-themed-muted max-w-[150px] truncate" :title="rec.tradeNo || ''">
+                  <span 
+                    v-if="rec.tradeNo" 
+                    class="cursor-pointer hover:text-blue-500" 
+                    @click="copyToClipboard(rec.tradeNo)"
+                  >{{ rec.tradeNo }}</span>
+                  <span v-else>-</span>
+                </td>
+                <td class="p-3 text-themed-muted whitespace-nowrap">{{ formatDate(rec.createdAt) }}</td>
+                <td class="p-3 whitespace-nowrap">
+                  <button
+                    v-if="rec.status === 'pending'"
+                    class="btn btn-sm btn-ghost text-blue-500"
+                    :disabled="syncingRecordId === rec.id"
+                    @click="syncRechargeRecord(rec)"
+                  >
+                    {{ syncingRecordId === rec.id ? $t('common.syncing') : $t('admin.billing.sync') }}
+                  </button>
+                  <span v-else class="text-themed-muted">-</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-else class="card p-10 text-center">
+        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-3xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-300">
+          <BillingOverviewIcon name="wallet" class="h-7 w-7" />
+        </div>
+        <div class="mt-4 text-base font-medium text-themed">{{ $t('admin.billing.noRechargeRecords') }}</div>
+        <div class="mt-1 text-sm text-themed-muted">{{ $t('admin.billing.tabs.rechargeRecords') }}</div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="rechargeRecords.length > 0" class="card mt-4 flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between">
+        <!-- 每页条数选择器 -->
+        <div class="flex items-center gap-2 text-sm text-themed-muted">
+          <span>{{ $t('admin.billing.perPage') }}</span>
+          <select
+            :value="rechargeRecordsPageSize"
+            class="input w-20 py-1"
+            @change="rechargeRecordsPageSize = Number(($event.target as HTMLSelectElement).value); rechargeRecordsPage = 1; loadRechargeRecords()"
+          >
+            <option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}</option>
+          </select>
+          <span>{{ $t('admin.billing.totalCount', { count: rechargeRecordsTotal }) }}</span>
+        </div>
+        <!-- 分页导航 -->
+        <div v-if="rechargeRecordsTotalPages > 1" class="flex items-center gap-2">
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="rechargeRecordsPage <= 1"
+            @click="rechargeRecordsPage--; loadRechargeRecords()"
+          >
+            {{ $t('common.prevPage') }}
+          </button>
+          <span class="text-sm text-themed-muted">
+            {{ rechargeRecordsPage }} / {{ rechargeRecordsTotalPages }}
+          </span>
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="rechargeRecordsPage >= rechargeRecordsTotalPages"
+            @click="rechargeRecordsPage++; loadRechargeRecords()"
+          >
+            {{ $t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 支付渠道 Tab -->
+    <div v-show="activeTab === 'paymentProviders'">
+      <PaymentProvidersView v-if="hasVisitedPaymentProviders" embedded />
+    </div>
+
+    <!-- AFF 转化 Tab -->
+    <div v-show="activeTab === 'affConversions'">
+      <AffReviewView v-if="hasVisitedAffConversions" embedded />
+    </div>
+
+    <!-- 操作弹窗 -->
+    <Teleport to="body">
+      <div v-if="showActionModal" class="modal-overlay" @click.self="showActionModal = false">
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t(`admin.billing.${actionType}Title`) }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showActionModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <p class="text-themed-secondary">
+              {{ $t('admin.billing.targetInstance') }}: <strong>{{ actionTarget?.name }}</strong>
+            </p>
+
+            <!-- 封停/解封 -->
+            <template v-if="actionType === 'suspend'">
+              <div>
+                <label class="label">{{ $t('admin.billing.reason') }}</label>
+                <textarea v-model="actionForm.reason" class="input w-full" rows="3" :placeholder="$t('admin.billing.reasonPlaceholder')"></textarea>
+              </div>
+            </template>
+
+            <!-- 延期 -->
+            <template v-if="actionType === 'extend'">
+              <div>
+                <label class="label">{{ $t('admin.billing.extendDays') }}</label>
+                <input v-model.number="actionForm.days" type="number" class="input w-full" min="1" max="365" />
+              </div>
+              <label class="flex items-center gap-2">
+                <input v-model="actionForm.freeExtend" type="checkbox" class="checkbox" />
+                {{ $t('admin.billing.freeExtend') }}
+              </label>
+              <div>
+                <label class="label">{{ $t('admin.billing.reason') }}</label>
+                <input v-model="actionForm.reason" type="text" class="input w-full" />
+              </div>
+            </template>
+
+            <!-- 删除并退款 -->
+            <template v-if="actionType === 'deleteRefund'">
+              <div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
+                <p class="text-sm text-red-600 dark:text-red-400">
+                  {{ $t('admin.billing.deleteRefundWarning') }}
+                </p>
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.billing.refundTypeLabel') }} *</label>
+                <div class="flex flex-col gap-2">
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input v-model="actionForm.refundType" type="radio" value="remaining" class="radio" />
+                    <span>{{ $t('admin.billing.refundTypeRemaining') }}</span>
+                  </label>
+                  <label class="flex items-center gap-2 cursor-pointer">
+                    <input v-model="actionForm.refundType" type="radio" value="full" class="radio" />
+                    <span>{{ $t('admin.billing.refundTypeFull') }}</span>
+                  </label>
+                </div>
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.billing.reason') }} *</label>
+                <textarea v-model="actionForm.reason" class="input w-full" rows="3" :placeholder="$t('admin.billing.deleteRefundReasonPlaceholder')"></textarea>
+              </div>
+            </template>
+
+            <!-- 应用折扣 -->
+            <template v-if="actionType === 'applyDiscount'">
+              <div class="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
+                <p class="text-sm text-purple-600 dark:text-purple-400">
+                  {{ $t('admin.billing.applyDiscountHint') }}
+                </p>
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.billing.affCodeLabel') }} *</label>
+                <input 
+                  v-model="actionForm.affCode" 
+                  type="text" 
+                  class="input w-full uppercase" 
+                  :placeholder="$t('admin.billing.affCodePlaceholder')"
+                />
+              </div>
+            </template>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showActionModal = false">{{ $t('common.cancel') }}</button>
+            <!-- 删除并退款模式下显示仅数据库删除按钮 -->
+            <button
+              v-if="actionType === 'deleteRefund'"
+              class="btn btn-warning"
+              :disabled="actionLoading"
+              @click="actionType = 'deleteRefundDatabaseOnly'; executeAction()"
+            >
+              {{ actionLoading ? $t('common.processing') : $t('admin.billing.databaseOnlyDelete') }}
+            </button>
+            <button
+              class="btn"
+              :class="actionType === 'suspend' || actionType === 'deleteRefund' || actionType === 'deleteRefundDatabaseOnly' ? 'btn-error' : 'btn-primary'"
+              :disabled="actionLoading"
+              @click="executeAction"
+            >
+              {{ actionLoading ? $t('common.processing') : $t('common.confirm') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 批量修改价格弹窗 -->
+    <Teleport to="body">
+      <div v-if="showBatchPriceModal" class="modal-overlay" @click.self="showBatchPriceModal = false">
+        <div class="modal-content max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('admin.billing.batchUpdatePrice') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showBatchPriceModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="modal-body space-y-4 overflow-y-auto flex-1">
+            <div class="grid gap-3 sm:grid-cols-3">
+              <div class="rounded-lg bg-themed-secondary p-3">
+                <div class="text-xs text-themed-muted">{{ $t('admin.billing.batchSelected') }}</div>
+                <div class="mt-1 text-lg font-semibold text-themed">{{ selectedInstancesCount }}</div>
+              </div>
+              <div class="rounded-lg bg-themed-secondary p-3">
+                <div class="text-xs text-themed-muted">{{ $t('admin.billing.batchPreviewChanged') }}</div>
+                <div class="mt-1 text-lg font-semibold text-themed">{{ batchPricePreview?.summary.changedCount || 0 }}</div>
+              </div>
+              <div class="rounded-lg bg-themed-secondary p-3">
+                <div class="text-xs text-themed-muted">{{ $t('admin.billing.batchPreviewFailed') }}</div>
+                <div class="mt-1 text-lg font-semibold" :class="(batchPricePreview?.summary.failedCount || 0) > 0 ? 'text-red-600 dark:text-red-400' : 'text-themed'">
+                  {{ batchPricePreview?.summary.failedCount || 0 }}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <label class="label">{{ $t('admin.billing.newPrice') }} *</label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-themed-muted">¥</span>
+                <input
+                  v-model.number="batchPriceForm.newPrice"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  class="input input-bordered w-full pl-7"
+                  :placeholder="$t('admin.billing.enterNewPrice')"
+                />
+              </div>
+              <p class="text-xs text-themed-muted mt-1">{{ $t('admin.billing.batchPriceHint') }}</p>
+            </div>
+
+            <div class="flex items-center gap-3">
+              <input
+                id="batchSettleBalance"
+                v-model="batchPriceForm.settleBalance"
+                type="checkbox"
+                class="checkbox"
+              />
+              <label for="batchSettleBalance" class="text-sm cursor-pointer">
+                {{ $t('admin.billing.settleBalance') }}
+              </label>
+            </div>
+
+            <div v-if="batchPricePreviewLoading" class="p-3 rounded-lg border bg-gray-50 dark:bg-gray-800 border-themed text-sm text-themed-muted">
+              {{ $t('common.loading') }}
+            </div>
+
+            <template v-else-if="batchPricePreview">
+              <div
+                class="rounded-lg border p-3"
+                :class="batchPricePreview.canSubmit ? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20' : 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20'"
+              >
+                <div class="grid gap-3 sm:grid-cols-3">
+                  <div>
+                    <div class="text-xs text-themed-muted">{{ $t('admin.billing.batchTotalCharge') }}</div>
+                    <div class="mt-1 text-base font-semibold text-red-600 dark:text-red-400">{{ formatMoney(batchPricePreview.summary.totalCharge) }}</div>
+                  </div>
+                  <div>
+                    <div class="text-xs text-themed-muted">{{ $t('admin.billing.batchTotalRefund') }}</div>
+                    <div class="mt-1 text-base font-semibold text-green-600 dark:text-green-400">{{ formatMoney(batchPricePreview.summary.totalRefund) }}</div>
+                  </div>
+                  <div>
+                    <div class="text-xs text-themed-muted">{{ $t('admin.billing.batchNetAmount') }}</div>
+                    <div class="mt-1 text-base font-semibold text-themed">{{ formatPriceDiff(batchPricePreview.summary.netAmount) }}</div>
+                  </div>
+                </div>
+                <p v-if="!batchPricePreview.canSubmit" class="mt-3 text-sm font-medium text-red-700 dark:text-red-300">
+                  {{ $t('admin.billing.batchPreviewBlocked') }}
+                </p>
+              </div>
+
+              <div v-if="batchPricePreview.userImpacts.length > 0" class="rounded-lg border border-themed overflow-hidden">
+                <div class="bg-themed-secondary px-3 py-2 text-sm font-medium text-themed">{{ $t('admin.billing.batchUserImpact') }}</div>
+                <div class="max-h-40 overflow-auto">
+                  <div
+                    v-for="impact in batchPricePreview.userImpacts"
+                    :key="impact.userId"
+                    class="grid min-w-[520px] grid-cols-4 gap-2 border-t border-themed px-3 py-2 text-sm"
+                  >
+                    <div class="font-medium text-themed">{{ impact.username }}</div>
+                    <div class="text-themed-muted">{{ formatMoney(impact.balanceBefore) }}</div>
+                    <div :class="impact.netDiff > 0 ? 'text-red-600 dark:text-red-400' : impact.netDiff < 0 ? 'text-green-600 dark:text-green-400' : 'text-themed-muted'">{{ formatPriceDiff(impact.netDiff) }}</div>
+                    <div :class="impact.insufficientBalance ? 'text-red-600 dark:text-red-400 font-medium' : 'text-themed'">{{ formatMoney(impact.balanceAfter) }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="rounded-lg border border-themed overflow-hidden">
+                <div class="bg-themed-secondary px-3 py-2 text-sm font-medium text-themed">{{ $t('admin.billing.batchPreviewDetails') }}</div>
+                <div class="max-h-64 overflow-auto">
+                  <table class="w-full min-w-[720px] text-sm">
+                    <thead class="bg-themed-secondary/60">
+                      <tr>
+                        <th class="text-left p-2">{{ $t('admin.billing.instance') }}</th>
+                        <th class="text-left p-2">{{ $t('admin.billing.user') }}</th>
+                        <th class="text-right p-2">{{ $t('admin.billing.currentPrice') }}</th>
+                        <th class="text-right p-2">{{ $t('admin.billing.newPrice') }}</th>
+                        <th class="text-right p-2">{{ $t('admin.billing.priceDifference') }}</th>
+                        <th class="text-left p-2">{{ $t('admin.billing.result') }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="item in batchPricePreview.items" :key="item.id" class="border-t border-themed">
+                        <td class="p-2">
+                          <div class="font-medium text-themed">{{ item.name || '-' }}</div>
+                          <div class="text-xs text-themed-muted">#{{ item.id }}</div>
+                        </td>
+                        <td class="p-2 text-themed-muted">{{ item.user?.username || '-' }}</td>
+                        <td class="p-2 text-right">{{ item.oldPrice !== null ? formatMoney(item.oldPrice) : '-' }}</td>
+                        <td class="p-2 text-right">{{ formatMoney(item.newPrice) }}</td>
+                        <td class="p-2 text-right" :class="item.priceDiff > 0 ? 'text-red-600 dark:text-red-400' : item.priceDiff < 0 ? 'text-green-600 dark:text-green-400' : 'text-themed-muted'">
+                          {{ formatPriceDiff(item.priceDiff) }}
+                        </td>
+                        <td class="p-2">
+                          <span :class="getBatchPriceItemStatusClass(item.status)">{{ item.error || getBatchPriceItemStatusLabel(item.status) }}</span>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </template>
+
+            <div v-else class="p-3 rounded-lg border border-themed text-sm text-themed-muted">
+              {{ $t('admin.billing.batchPreviewWaiting') }}
+            </div>
+
+            <div v-if="!batchPriceForm.settleBalance" class="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+              <p class="text-sm text-yellow-700 dark:text-yellow-300">
+                {{ $t('admin.billing.noSettleHint') }}
+              </p>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button class="btn btn-ghost" :disabled="batchPriceLoading" @click="showBatchPriceModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary"
+              :disabled="batchPriceLoading || batchPricePreviewLoading || !isValidPriceInput(batchPriceForm.newPrice) || !batchPricePreview?.canSubmit || !batchPricePreviewHasVersionSnapshot"
+              @click="submitBatchUpdatePrice"
+            >
+              {{ batchPriceLoading ? $t('common.processing') : $t('common.confirm') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 修改价格弹窗 -->
+    <Teleport to="body">
+      <div v-if="showPriceModal" class="modal-overlay" @click.self="showPriceModal = false">
+        <div class="modal-content max-w-md">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('admin.billing.updatePrice') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showPriceModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <!-- 实例信息 -->
+            <div class="p-3 bg-themed-secondary rounded-lg space-y-2">
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.instanceName') }}:</span>
+                <span class="font-medium">{{ priceTarget?.name }}</span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.owner') }}:</span>
+                <span>{{ priceTarget?.user?.username }}</span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.currentPrice') }}:</span>
+                <span class="font-medium text-blue-500">¥{{ (priceTarget?.billingPrice || 0).toFixed(2) }}</span>
+              </div>
+              <!-- 优惠码状态 -->
+              <div v-if="priceTarget?.hasAffBinding && priceTarget?.affDiscountRate > 0" class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.affDiscount') }}:</span>
+                <span class="text-green-500 font-medium">-{{ (priceTarget.affDiscountRate * 100).toFixed(0) }}%</span>
+              </div>
+              <!-- 实际续费价（如果有折扣） -->
+              <div v-if="priceTarget?.hasAffBinding && priceTarget?.affDiscountRate > 0" class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.actualRenewPrice') }}:</span>
+                <span class="font-medium text-green-600 dark:text-green-400">¥{{ actualRenewPrice.old.toFixed(2) }}</span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.cycle') }}:</span>
+                <span>{{ formatBillingCycle(priceTarget?.billingCycle || 1) }}</span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.remainingDays') }}:</span>
+                <span :class="priceTarget?.remainingDays <= 7 ? 'text-yellow-500' : ''">
+                  {{ Math.ceil(pricePreview?.remainingDays || priceTarget?.remainingDays || 0) }} {{ $t('admin.billing.days') }}
+                </span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-themed-muted">{{ $t('admin.billing.userBalance') }}:</span>
+                <span>¥{{ (priceTarget?.user?.balance || 0).toFixed(2) }}</span>
+              </div>
+            </div>
+            
+            <!-- 优惠码提示 -->
+            <div v-if="priceTarget?.hasAffBinding && priceTarget?.affDiscountRate > 0" class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+              <p class="text-sm text-green-700 dark:text-green-300">
+                🎁 {{ $t('admin.billing.affAppliedHint', { discount: (priceTarget.affDiscountRate * 100).toFixed(0) }) }}
+              </p>
+            </div>
+            
+            <!-- 新价格输入 -->
+            <div>
+              <label class="label">{{ $t('admin.billing.newPrice') }} *</label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-themed-muted">¥</span>
+                <input 
+                  v-model.number="priceForm.newPrice" 
+                  type="number" 
+                  step="0.01"
+                  min="0"
+                  class="input input-bordered w-full pl-7"
+                  :placeholder="$t('admin.billing.enterNewPrice')"
+                />
+              </div>
+              <p class="text-xs text-themed-muted mt-1">{{ $t('admin.billing.priceHint') }}</p>
+              <!-- 新价格的实际续费价（如果有折扣） -->
+              <p v-if="priceTarget?.hasAffBinding && priceTarget?.affDiscountRate > 0 && priceForm.newPrice > 0" class="text-xs text-green-600 dark:text-green-400 mt-1">
+                → {{ $t('admin.billing.newActualPrice') }}: ¥{{ actualRenewPrice.new.toFixed(2) }}
+              </p>
+            </div>
+            
+            <!-- 是否结算差价 -->
+            <div class="flex items-center gap-3">
+              <input 
+                id="settleBalance" 
+                v-model="priceForm.settleBalance" 
+                type="checkbox"
+                class="checkbox"
+              />
+              <label for="settleBalance" class="text-sm cursor-pointer">
+                {{ $t('admin.billing.settleBalance') }}
+              </label>
+            </div>
+            
+            <!-- 差价计算结果 -->
+            <div v-if="pricePreviewLoading" class="p-3 rounded-lg border bg-gray-50 dark:bg-gray-800 border-themed text-sm text-themed-muted">
+              {{ $t('common.loading') }}
+            </div>
+
+            <div v-else-if="priceForm.settleBalance && (pricePreview?.remainingDays || 0) > 0 && priceForm.newPrice !== priceTarget?.billingPrice" class="p-3 rounded-lg border" :class="priceDiff > 0 && priceDiff > (pricePreview?.userBalance || priceTarget?.user?.balance || 0) ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800' : 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'">
+              <div class="flex justify-between items-center">
+                <span class="text-sm" :class="priceDiff > 0 && priceDiff > (pricePreview?.userBalance || priceTarget?.user?.balance || 0) ? 'text-red-700 dark:text-red-300' : 'text-blue-700 dark:text-blue-300'">
+                  {{ priceDiff > 0 ? $t('admin.billing.needPay') : $t('admin.billing.willRefund') }}:
+                </span>
+                <span class="text-xl font-bold" :class="priceDiff > 0 && priceDiff > (pricePreview?.userBalance || priceTarget?.user?.balance || 0) ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'">
+                  ¥{{ Math.abs(priceDiff).toFixed(2) }}
+                </span>
+              </div>
+              <p v-if="priceDiff > 0 && priceDiff > (pricePreview?.userBalance || priceTarget?.user?.balance || 0)" class="text-xs text-red-600 dark:text-red-400 mt-2 font-medium">
+                ⚠️ {{ $t('admin.billing.insufficientBalance') }}
+              </p>
+              <p v-else class="text-xs mt-1" :class="priceDiff > 0 && priceDiff > (pricePreview?.userBalance || priceTarget?.user?.balance || 0) ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'">
+                {{ $t('admin.billing.priceDiffHint', { days: Math.ceil(pricePreview?.remainingDays || 0) }) }}
+              </p>
+            </div>
+            
+            <!-- 不结算差价提示 -->
+            <div v-if="!priceForm.settleBalance" class="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+              <p class="text-sm text-yellow-700 dark:text-yellow-300">
+                ⚠️ {{ $t('admin.billing.noSettleHint') }}
+              </p>
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showPriceModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary"
+              :disabled="priceLoading || pricePreviewLoading || !isValidPriceInput(priceForm.newPrice) || (priceForm.settleBalance && priceDiff > 0 && priceDiff > (pricePreview?.userBalance || priceTarget?.user?.balance || 0))"
+              @click="submitUpdatePrice"
+            >
+              {{ priceLoading ? $t('common.processing') : $t('common.confirm') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 切换方案弹窗 -->
+    <Teleport to="body">
+      <div v-if="showUpgradeModal" class="modal-overlay" @click.self="showUpgradeModal = false">
+        <div class="modal-content max-w-lg">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ $t('admin.billing.upgradePlanTitle') }}</h3>
+            <button class="btn btn-ghost btn-sm" @click="showUpgradeModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <p class="text-themed-secondary">
+              {{ $t('admin.billing.targetInstance') }}: <strong>{{ upgradeTarget?.name }}</strong>
+            </p>
+
+            <!-- 加载中 -->
+            <div v-if="upgradeLoading" class="py-8 text-center">
+              <LoadingSpinner size="xl" color="primary" class="mx-auto" />
+              <p class="mt-2 text-themed-muted">{{ $t('common.loading') }}</p>
+            </div>
+
+            <template v-else-if="upgradeData.currentPlan">
+              <!-- 当前方案信息 -->
+              <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                <h4 class="text-sm font-medium text-themed-secondary mb-2">{{ $t('admin.billing.currentPlan') }}</h4>
+                <div class="grid grid-cols-2 gap-2 text-sm">
+                  <div>{{ $t('admin.billing.planName') }}: <strong>{{ upgradeData.currentPlan.name }}</strong></div>
+                  <div>{{ $t('admin.billing.monthlyPrice') }}: <strong>¥{{ upgradeData.currentPlan.monthlyPrice.toFixed(2) }}</strong></div>
+                  <div>CPU: <strong>{{ upgradeData.currentPlan.cpu }}%</strong></div>
+                  <div>{{ $t('admin.billing.memoryLabel') }}: <strong>{{ upgradeData.currentPlan.memory }}MB</strong></div>
+                  <div>{{ $t('admin.billing.diskLabel') }}: <strong>{{ upgradeData.currentPlan.disk }}MB</strong></div>
+                  <div>{{ $t('admin.billing.remainingDays') }}: <strong>{{ Math.ceil(upgradeData.remainingDays) }} {{ $t('admin.billing.days') }}</strong></div>
+                </div>
+              </div>
+
+              <!-- 可升级方案列表 -->
+              <div v-if="upgradeData.availablePlans.length > 0">
+                <label class="label">{{ $t('admin.billing.selectNewPlan') }} *</label>
+                <div class="space-y-2 max-h-48 overflow-y-auto">
+                  <label 
+                    v-for="plan in upgradeData.availablePlans" 
+                    :key="plan.id"
+                    class="flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors"
+                    :class="selectedPlanId === plan.id ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-themed hover:bg-gray-50 dark:hover:bg-gray-800'"
+                  >
+                    <input v-model="selectedPlanId" type="radio" :value="plan.id" class="radio mt-1" />
+                    <div class="flex-1">
+                      <div class="font-medium">{{ plan.name }}</div>
+                      <div class="text-sm text-themed-muted">
+                        ¥{{ plan.price.toFixed(2) }} / {{ formatBillingCycle(plan.billingCycle) }}
+                        (¥{{ plan.monthlyPrice.toFixed(2) }}/{{ $t('admin.billing.month') }})
+                      </div>
+                      <div class="text-xs text-themed-muted mt-1">
+                        CPU {{ plan.cpu }}% | {{ plan.memory }}MB RAM | {{ plan.disk }}MB {{ $t('admin.billing.diskLabel') }}
+                      </div>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <div v-else class="p-4 text-center text-themed-muted bg-gray-50 dark:bg-gray-800 rounded-lg">
+                {{ $t('admin.billing.noAvailablePlans') }}
+              </div>
+
+              <!-- 差价计算结果 -->
+              <div v-if="selectedPlanId" class="p-3 rounded-lg border" :class="upgradePriceDiff > upgradeData.userBalance ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800' : 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'">
+                <div class="flex justify-between items-center">
+                  <span :class="upgradePriceDiff > upgradeData.userBalance ? 'text-red-700 dark:text-red-300' : 'text-blue-700 dark:text-blue-300'">{{ $t('admin.billing.priceDifference') }}:</span>
+                  <span class="text-xl font-bold" :class="upgradePriceDiff > upgradeData.userBalance ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'">¥{{ upgradePriceDiff.toFixed(2) }}</span>
+                </div>
+                <div class="flex justify-between items-center mt-1">
+                  <span :class="upgradePriceDiff > upgradeData.userBalance ? 'text-red-700 dark:text-red-300' : 'text-blue-700 dark:text-blue-300'" class="text-sm">{{ $t('admin.billing.userBalance') }}:</span>
+                  <span class="font-medium" :class="upgradePriceDiff > upgradeData.userBalance ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'">¥{{ upgradeData.userBalance.toFixed(2) }}</span>
+                </div>
+                <p v-if="upgradePriceDiff > upgradeData.userBalance" class="text-xs text-red-600 dark:text-red-400 mt-2 font-medium">
+                  ⚠️ {{ $t('admin.billing.insufficientBalance') }}
+                </p>
+                <p v-else class="text-xs mt-1" :class="upgradePriceDiff > upgradeData.userBalance ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'">
+                  {{ $t('admin.billing.priceDifferenceHint') }}
+                </p>
+              </div>
+            </template>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showUpgradeModal = false">{{ $t('common.cancel') }}</button>
+            <button
+              class="btn btn-primary"
+              :disabled="upgradeSubmitting || !selectedPlanId || upgradeData.availablePlans.length === 0"
+              @click="executeUpgrade"
+            >
+              {{ upgradeSubmitting ? $t('common.processing') : $t('admin.billing.confirmUpgrade') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/BroadcastView.vue b/client/src/views/admin/BroadcastView.vue
new file mode 100644
index 0000000..fe8619d
--- /dev/null
+++ b/client/src/views/admin/BroadcastView.vue
@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+
+const { t, d } = useI18n()
+const toast = useToast()
+
+const title = ref('')
+const content = ref('')
+const sending = ref(false)
+
+// 历史记录
+interface AnnouncementItem {
+  id: number
+  type: 'system_broadcast' | 'host_broadcast' | 'admin_message' | 'host_message'
+  title: string
+  content: string
+  recipientCount: number
+  createdAt: string
+  sender: { id: number; username: string }
+}
+
+const historyList = ref<AnnouncementItem[]>([])
+const historyLoading = ref(false)
+const historyPage = ref(1)
+const historyTotal = ref(0)
+const historyTotalPages = ref(0)
+const pageSize = 100
+
+// 展开/收起历史记录
+const showHistory = ref(false)
+
+// 查看详情弹窗
+const selectedAnnouncement = ref<AnnouncementItem | null>(null)
+
+// 获取公告类型标签样式
+const getTypeBadgeClass = (type: string) => {
+  switch (type) {
+    case 'system_broadcast':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
+    case 'host_broadcast':
+      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+    case 'admin_message':
+      return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
+    case 'host_message':
+      return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300'
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
+  }
+}
+
+async function loadHistory(page = 1) {
+  historyLoading.value = true
+  try {
+    const result = await api.announcements.list({ page, pageSize })
+    historyList.value = result.items
+    historyPage.value = result.page
+    historyTotal.value = result.total
+    historyTotalPages.value = result.totalPages
+  } catch (_err: any) {
+    toast.error(t('common.loadFailed'))
+  } finally {
+    historyLoading.value = false
+  }
+}
+
+function toggleHistory() {
+  showHistory.value = !showHistory.value
+  if (showHistory.value && historyList.value.length === 0) {
+    loadHistory()
+  }
+}
+
+function viewDetail(item: AnnouncementItem) {
+  selectedAnnouncement.value = item
+}
+
+function closeDetail() {
+  selectedAnnouncement.value = null
+}
+
+async function sendBroadcast() {
+  if (!title.value.trim()) {
+    toast.error(t('admin.broadcast.titleRequired'))
+    return
+  }
+  if (!content.value.trim()) {
+    toast.error(t('admin.broadcast.contentRequired'))
+    return
+  }
+  if (title.value.length > 200) {
+    toast.error(t('admin.broadcast.titleTooLong'))
+    return
+  }
+  if (content.value.length > 5000) {
+    toast.error(t('admin.broadcast.contentTooLong'))
+    return
+  }
+
+  sending.value = true
+  try {
+    const result = await api.inbox.broadcast({
+      title: title.value.trim(),
+      content: content.value.trim()
+    })
+    toast.success(t('admin.broadcast.sendSuccess', { count: result.count }))
+    // 清空表单
+    title.value = ''
+    content.value = ''
+    // 刷新历史列表
+    if (showHistory.value) {
+      loadHistory(1)
+    }
+  } catch (err: any) {
+    toast.error(t('admin.broadcast.sendFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    sending.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- 页面标题 -->
+    <div>
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+        {{ t('admin.broadcast.title') }}
+      </h2>
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        {{ t('admin.broadcast.description') }}
+      </p>
+    </div>
+
+    <!-- 发送表单 -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <form class="space-y-4" @submit.prevent="sendBroadcast">
+        <!-- 标题 -->
+        <div>
+          <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {{ t('admin.broadcast.messageTitle') }}
+          </label>
+          <input
+            id="title"
+            v-model="title"
+            type="text"
+            maxlength="200"
+            :placeholder="t('admin.broadcast.titlePlaceholder')"
+            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md 
+                   bg-white dark:bg-gray-700 text-gray-900 dark:text-white
+                   focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent"
+          />
+          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            {{ title.length }}/200
+          </p>
+        </div>
+
+        <!-- 内容 -->
+        <div>
+          <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {{ t('admin.broadcast.messageContent') }}
+          </label>
+          <textarea
+            id="content"
+            v-model="content"
+            rows="8"
+            maxlength="5000"
+            :placeholder="t('admin.broadcast.contentPlaceholder')"
+            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md 
+                   bg-white dark:bg-gray-700 text-gray-900 dark:text-white
+                   focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent
+                   resize-none"
+          />
+          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            {{ content.length }}/5000
+          </p>
+        </div>
+
+        <!-- 发送按钮 -->
+        <div class="flex justify-end">
+          <button
+            type="submit"
+            :disabled="sending || !title.trim() || !content.trim()"
+            class="px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-md
+                   hover:bg-gray-800 dark:hover:bg-gray-200
+                   disabled:opacity-50 disabled:cursor-not-allowed
+                   transition-colors duration-200"
+          >
+            <span v-if="sending">{{ t('common.sending') }}</span>
+            <span v-else>{{ t('admin.broadcast.send') }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- 提示信息 -->
+    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+      <div class="flex">
+        <svg class="w-5 h-5 text-blue-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+        </svg>
+        <div class="ml-3">
+          <p class="text-sm text-blue-700 dark:text-blue-300">
+            {{ t('admin.broadcast.hint') }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 历史记录 -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
+      <!-- 标题栏 -->
+      <button
+        type="button"
+        class="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+        @click="toggleHistory"
+      >
+        <div class="flex items-center gap-2">
+          <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span class="font-medium text-gray-900 dark:text-white">{{ t('admin.broadcast.history') }}</span>
+          <span v-if="historyTotal > 0" class="text-sm text-gray-500 dark:text-gray-400">({{ historyTotal }})</span>
+        </div>
+        <svg
+          class="w-5 h-5 text-gray-400 transition-transform duration-200"
+          :class="{ 'rotate-180': showHistory }"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      <!-- 列表内容 -->
+      <div v-if="showHistory" class="border-t border-gray-200 dark:border-gray-700">
+        <!-- 加载中 -->
+        <div v-if="historyLoading" class="p-8 flex justify-center">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-else-if="historyList.length === 0" class="p-8 text-center text-gray-500 dark:text-gray-400">
+          {{ t('admin.broadcast.noHistory') }}
+        </div>
+
+        <!-- 列表 -->
+        <div v-else>
+          <div class="divide-y divide-gray-200 dark:divide-gray-700">
+            <div
+              v-for="item in historyList"
+              :key="item.id"
+              class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer"
+              @click="viewDetail(item)"
+            >
+              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <span
+                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
+                      :class="getTypeBadgeClass(item.type)"
+                    >
+                      {{ t(`admin.broadcast.types.${item.type}`) }}
+                    </span>
+                    <h4 class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ item.title }}</h4>
+                  </div>
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 truncate">{{ item.content }}</p>
+                </div>
+                <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 shrink-0">
+                  <span>{{ t('admin.broadcast.recipients', { count: item.recipientCount }) }}</span>
+                  <span class="hidden sm:inline">{{ d(new Date(item.createdAt), 'short') }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页 -->
+          <div v-if="historyTotalPages > 1" class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <button
+              type="button"
+              :disabled="historyPage <= 1"
+              class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md
+                     text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700
+                     disabled:opacity-50 disabled:cursor-not-allowed"
+              @click="loadHistory(historyPage - 1)"
+            >
+              {{ t('common.previous') }}
+            </button>
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+              {{ historyPage }} / {{ historyTotalPages }}
+            </span>
+            <button
+              type="button"
+              :disabled="historyPage >= historyTotalPages"
+              class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md
+                     text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700
+                     disabled:opacity-50 disabled:cursor-not-allowed"
+              @click="loadHistory(historyPage + 1)"
+            >
+              {{ t('common.next') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <Teleport to="body">
+      <div
+        v-if="selectedAnnouncement"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
+        @click.self="closeDetail"
+      >
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+          <!-- 弹窗头部 -->
+          <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <span
+                class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
+                :class="getTypeBadgeClass(selectedAnnouncement.type)"
+              >
+                {{ t(`admin.broadcast.types.${selectedAnnouncement.type}`) }}
+              </span>
+              <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ selectedAnnouncement.title }}</h3>
+            </div>
+            <button
+              type="button"
+              class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
+              @click="closeDetail"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 弹窗内容 -->
+          <div class="px-6 py-4 overflow-y-auto max-h-[60vh]">
+            <div class="mb-4 flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
+              <span>{{ t('admin.broadcast.sender') }}: {{ selectedAnnouncement.sender.username }}</span>
+              <span>{{ t('admin.broadcast.recipients', { count: selectedAnnouncement.recipientCount }) }}</span>
+              <span>{{ d(new Date(selectedAnnouncement.createdAt), 'long') }}</span>
+            </div>
+            <div class="prose dark:prose-invert max-w-none">
+              <pre class="whitespace-pre-wrap text-sm text-gray-700 dark:text-gray-300 font-normal">{{ selectedAnnouncement.content }}</pre>
+            </div>
+          </div>
+
+          <!-- 弹窗底部 -->
+          <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+            <button
+              type="button"
+              class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md
+                     hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+              @click="closeDetail"
+            >
+              {{ t('common.close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/EntertainmentView.vue b/client/src/views/admin/EntertainmentView.vue
new file mode 100644
index 0000000..0b71b89
--- /dev/null
+++ b/client/src/views/admin/EntertainmentView.vue
@@ -0,0 +1,1637 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useBadgeStore } from '@/stores/badges'
+import type { BadgeCatalogItem, BadgeSeriesItem } from '@/types/api'
+
+const { t } = useI18n()
+const toast = useToast()
+const badgeStore = useBadgeStore()
+
+// 当前 TAB
+const activeTab = ref<'lotteries' | 'records' | 'users' | 'badges'>('lotteries')
+
+// 抽奖列表
+const lotteries = ref<any[]>([])
+const lotteriesLoading = ref(false)
+const lotteriesPage = ref(1)
+const lotteriesPageSize = ref(100)
+const lotteriesTotal = ref(0)
+
+// 中奖记录
+const records = ref<any[]>([])
+const recordsLoading = ref(false)
+const recordsPage = ref(1)
+const recordsPageSize = ref(100)
+const recordsTotal = ref(0)
+const recordsSearch = ref('')
+const recordsPrizeType = ref('')
+
+// 用户积分列表
+const users = ref<any[]>([])
+const usersLoading = ref(false)
+const usersPage = ref(1)
+const usersPageSize = ref(100)
+const usersTotal = ref(0)
+
+// 创建/编辑抽奖弹窗
+const showLotteryModal = ref(false)
+const editingLottery = ref<any>(null)
+const lotteryForm = ref({
+  name: '',
+  description: '',
+  costPoints: 100,
+  isActive: true,
+  startAt: '',
+  endAt: ''
+})
+const savingLottery = ref(false)
+
+// 奖品管理弹窗
+const showPrizesModal = ref(false)
+const editingPrizes = ref<any>(null)
+const prizes = ref<any[]>([])
+const savingPrizes = ref(false)
+
+// 删除确认
+const deleteConfirmId = ref<number | null>(null)
+const deleting = ref(false)
+
+// 通知配置弹窗
+const showNotificationModal = ref(false)
+const editingNotification = ref<any>(null)
+const notificationForm = ref({
+  enabled: true,
+  type: 'telegram' as 'telegram' | 'discord' | 'webhook',
+  notifyBalance: true,
+  notifyInstance: true,
+  // Telegram 配置
+  telegramBotToken: '',
+  telegramChatId: '',
+  // Discord 配置
+  discordWebhookUrl: '',
+  // Webhook 配置
+  webhookUrl: '',
+  webhookSecret: ''
+})
+const savingNotification = ref(false)
+
+// 徽章目录
+const badgeSeries = ref<BadgeSeriesItem[]>([])
+const badges = ref<BadgeCatalogItem[]>([])
+const badgesLoading = ref(false)
+const selectedBadgeSeriesId = ref<string>('all')
+const showSeriesModal = ref(false)
+const showBadgeModal = ref(false)
+const editingSeries = ref<BadgeSeriesItem | null>(null)
+const editingBadge = ref<BadgeCatalogItem | null>(null)
+const deletingSeriesId = ref<string | null>(null)
+const deletingBadgeId = ref<string | null>(null)
+const savingSeries = ref(false)
+const savingBadge = ref(false)
+const seriesForm = ref({
+  id: '',
+  title: '',
+  nameZh: '',
+  nameEn: '',
+  description: '',
+  sourceId: '',
+  sourceLabel: '',
+  displayOrder: 0,
+  isActive: true
+})
+const badgeForm = ref({
+  id: '',
+  name: '',
+  nameEn: '',
+  fullLabel: '',
+  seriesId: '',
+  sourceId: '',
+  sourceLabel: '',
+  assetUrl: '',
+  assetUrlDark: '',
+  assetUrlLight: '',
+  displayOrder: 0,
+  isActive: true
+})
+
+const filteredBadges = computed(() => {
+  if (selectedBadgeSeriesId.value === 'all') return badges.value
+  return badges.value.filter(badge => badge.seriesId === selectedBadgeSeriesId.value)
+})
+
+onMounted(() => {
+  loadLotteries()
+})
+
+async function loadLotteries() {
+  lotteriesLoading.value = true
+  try {
+    const res = await api.entertainment.adminGetLotteries({
+      page: lotteriesPage.value,
+      pageSize: lotteriesPageSize.value
+    })
+    lotteries.value = res.lotteries || []
+    lotteriesTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.loadLotteriesFailed') + ': ' + err.message)
+  } finally {
+    lotteriesLoading.value = false
+  }
+}
+
+async function loadRecords() {
+  recordsLoading.value = true
+  try {
+    const res = await api.entertainment.adminGetLotteryRecords({
+      page: recordsPage.value,
+      pageSize: recordsPageSize.value,
+      prizeType: recordsPrizeType.value || undefined,
+      search: recordsSearch.value || undefined
+    })
+    records.value = res.records || []
+    recordsTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.loadRecordsFailed') + ': ' + err.message)
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
+function searchRecords() {
+  recordsPage.value = 1
+  loadRecords()
+}
+
+async function loadUsers() {
+  usersLoading.value = true
+  try {
+    const res = await api.entertainment.adminGetUserPoints({
+      page: usersPage.value,
+      pageSize: usersPageSize.value
+    })
+    users.value = res.records || []
+    usersTotal.value = res.total
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.loadUsersFailed') + ': ' + err.message)
+  } finally {
+    usersLoading.value = false
+  }
+}
+
+function switchTab(tab: 'lotteries' | 'records' | 'users' | 'badges') {
+  activeTab.value = tab
+  if (tab === 'records' && records.value.length === 0) {
+    loadRecords()
+  } else if (tab === 'users' && users.value.length === 0) {
+    loadUsers()
+  } else if (tab === 'badges' && badgeSeries.value.length === 0 && badges.value.length === 0) {
+    loadBadgeCatalog()
+  }
+}
+
+// 打开创建抽奖弹窗
+function openCreateLotteryModal() {
+  editingLottery.value = null
+  lotteryForm.value = {
+    name: '',
+    description: '',
+    costPoints: 100,
+    isActive: true,
+    startAt: '',
+    endAt: ''
+  }
+  showLotteryModal.value = true
+}
+
+// 打开编辑抽奖弹窗
+function openEditLotteryModal(lottery: any) {
+  editingLottery.value = lottery
+  lotteryForm.value = {
+    name: lottery.name,
+    description: lottery.description || '',
+    costPoints: lottery.costPoints,
+    isActive: lottery.isActive,
+    startAt: lottery.startAt ? lottery.startAt.split('T')[0] : '',
+    endAt: lottery.endAt ? lottery.endAt.split('T')[0] : ''
+  }
+  showLotteryModal.value = true
+}
+
+// 保存抽奖
+async function saveLottery() {
+  if (!lotteryForm.value.name.trim()) {
+    toast.warning(t('entertainment.admin.enterName'))
+    return
+  }
+  if (lotteryForm.value.costPoints <= 0) {
+    toast.warning(t('entertainment.admin.invalidCostPoints'))
+    return
+  }
+
+  savingLottery.value = true
+  try {
+    const data = {
+      name: lotteryForm.value.name.trim(),
+      description: lotteryForm.value.description.trim() || undefined,
+      costPoints: lotteryForm.value.costPoints,
+      isActive: lotteryForm.value.isActive,
+      startAt: lotteryForm.value.startAt || undefined,
+      endAt: lotteryForm.value.endAt || undefined
+    }
+
+    if (editingLottery.value) {
+      await api.entertainment.adminUpdateLottery(editingLottery.value.id, data)
+      toast.success(t('entertainment.admin.updateSuccess'))
+    } else {
+      await api.entertainment.adminCreateLottery(data)
+      toast.success(t('entertainment.admin.createSuccess'))
+    }
+    showLotteryModal.value = false
+    loadLotteries()
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.saveFailed') + ': ' + err.message)
+  } finally {
+    savingLottery.value = false
+  }
+}
+
+// 删除抽奖
+async function deleteLottery(id: number) {
+  deleting.value = true
+  try {
+    await api.entertainment.adminDeleteLottery(id)
+    toast.success(t('entertainment.admin.deleteSuccess'))
+    deleteConfirmId.value = null
+    loadLotteries()
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.deleteFailed') + ': ' + err.message)
+  } finally {
+    deleting.value = false
+  }
+}
+
+// 打开奖品管理弹窗
+async function openPrizesModal(lottery: any) {
+  editingPrizes.value = lottery
+  prizes.value = lottery.prizes?.map((p: any) => ({ ...p, replenishAmount: 0 })) || []
+  showPrizesModal.value = true
+}
+
+// 添加奖品
+function addPrize() {
+  prizes.value.push({
+    id: 0, // 0 表示新奖品
+    name: '',
+    type: 'nothing',
+    value: 0,
+    probability: 10,
+    totalQuantity: null,
+    displayOrder: prizes.value.length,
+    instanceDesc: ''
+  })
+}
+
+// 删除奖品
+function removePrize(index: number) {
+  prizes.value.splice(index, 1)
+}
+
+// 保存奖品
+async function savePrizes() {
+  // 验证
+  for (const prize of prizes.value) {
+    if (!prize.name.trim()) {
+      toast.warning(t('entertainment.admin.enterPrizeName'))
+      return
+    }
+    if (prize.probability <= 0) {
+      toast.warning(t('entertainment.admin.invalidProbability'))
+      return
+    }
+  }
+
+  savingPrizes.value = true
+  try {
+    const lotteryId = editingPrizes.value.id
+    const existingPrizes = editingPrizes.value.prizes || []
+    const existingIds = existingPrizes.map((p: any) => p.id)
+    const newPrizeIds = prizes.value.filter(p => p.id).map(p => p.id)
+    
+    // 删除不在新列表中的奖品
+    for (const existingId of existingIds) {
+      if (!newPrizeIds.includes(existingId)) {
+        await api.entertainment.adminDeletePrize(existingId)
+      }
+    }
+    
+    // 更新或创建奖品
+    for (let i = 0; i < prizes.value.length; i++) {
+      const prize = prizes.value[i]
+      // 计算新的剩余数量（如果有补充）
+      let newRemainQuantity = prize.remainQuantity
+      if (prize.replenishAmount && prize.replenishAmount > 0) {
+        newRemainQuantity = (prize.remainQuantity || 0) + prize.replenishAmount
+      }
+      
+      const prizeData = {
+        name: prize.name.trim(),
+        type: prize.type,
+        value: prize.value || 0,
+        probability: prize.probability,
+        totalQuantity: prize.totalQuantity || undefined,
+        remainQuantity: newRemainQuantity,
+        displayOrder: i,
+        instanceDesc: prize.type === 'instance' ? prize.instanceDesc : undefined
+      }
+      
+      if (prize.id && existingIds.includes(prize.id)) {
+        // 更新现有奖品
+        await api.entertainment.adminUpdatePrize(prize.id, prizeData)
+      } else {
+        // 创建新奖品
+        await api.entertainment.adminCreatePrize(lotteryId, prizeData)
+      }
+    }
+    
+    toast.success(t('entertainment.admin.savePrizesSuccess'))
+    showPrizesModal.value = false
+    loadLotteries()
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.savePrizesFailed') + ': ' + err.message)
+  } finally {
+    savingPrizes.value = false
+  }
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleString()
+}
+
+function getPrizeTypeName(type: string): string {
+  const map: Record<string, string> = {
+    nothing: t('entertainment.prizeTypes.nothing'),
+    points: t('entertainment.prizeTypes.points'),
+    balance: t('entertainment.prizeTypes.balance'),
+    badge: t('entertainment.prizeTypes.badge'),
+    instance: t('entertainment.prizeTypes.instance'),
+    cpu: t('entertainment.prizeTypes.cpu'),
+    memory: t('entertainment.prizeTypes.memory'),
+    disk: t('entertainment.prizeTypes.disk'),
+    traffic: t('entertainment.prizeTypes.traffic')
+  }
+  return map[type] || type
+}
+
+const lotteriesTotalPages = computed(() => Math.ceil(lotteriesTotal.value / lotteriesPageSize.value))
+const recordsTotalPages = computed(() => Math.ceil(recordsTotal.value / recordsPageSize.value))
+const usersTotalPages = computed(() => Math.ceil(usersTotal.value / usersPageSize.value))
+
+// 打开通知配置弹窗
+function openNotificationModal(lottery: any) {
+  editingNotification.value = lottery
+  const config = lottery.notificationConfig
+  if (config) {
+    notificationForm.value = {
+      enabled: config.enabled,
+      type: config.type || 'telegram',
+      notifyBalance: config.notifyBalance,
+      notifyInstance: config.notifyInstance,
+      telegramBotToken: config.config?.botToken || '',
+      telegramChatId: config.config?.chatId || '',
+      discordWebhookUrl: config.config?.webhookUrl || '',
+      webhookUrl: config.config?.url || '',
+      webhookSecret: config.config?.secret || ''
+    }
+  } else {
+    notificationForm.value = {
+      enabled: true,
+      type: 'telegram',
+      notifyBalance: true,
+      notifyInstance: true,
+      telegramBotToken: '',
+      telegramChatId: '',
+      discordWebhookUrl: '',
+      webhookUrl: '',
+      webhookSecret: ''
+    }
+  }
+  showNotificationModal.value = true
+}
+
+// 保存通知配置
+async function saveNotification() {
+  const form = notificationForm.value
+  
+  // 根据类型构建配置
+  let config: Record<string, string> = {}
+  if (form.type === 'telegram') {
+    if (!form.telegramBotToken || !form.telegramChatId) {
+      toast.warning(t('entertainment.admin.notification.fillTelegram'))
+      return
+    }
+    config = { botToken: form.telegramBotToken, chatId: form.telegramChatId }
+  } else if (form.type === 'discord') {
+    if (!form.discordWebhookUrl) {
+      toast.warning(t('entertainment.admin.notification.fillDiscord'))
+      return
+    }
+    config = { webhookUrl: form.discordWebhookUrl }
+  } else if (form.type === 'webhook') {
+    if (!form.webhookUrl) {
+      toast.warning(t('entertainment.admin.notification.fillWebhook'))
+      return
+    }
+    config = { url: form.webhookUrl, secret: form.webhookSecret }
+  }
+  
+  savingNotification.value = true
+  try {
+    await api.entertainment.adminUpdateNotification(editingNotification.value.id, {
+      enabled: form.enabled,
+      type: form.type,
+      config,
+      notifyBalance: form.notifyBalance,
+      notifyInstance: form.notifyInstance
+    })
+    toast.success(t('entertainment.admin.notification.saveSuccess'))
+    showNotificationModal.value = false
+    loadLotteries()
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.notification.saveFailed') + ': ' + err.message)
+  } finally {
+    savingNotification.value = false
+  }
+}
+
+async function loadBadgeCatalog() {
+  badgesLoading.value = true
+  try {
+    const res = await api.entertainment.adminGetBadgeCatalog()
+    badgeSeries.value = res.series || []
+    badges.value = res.badges || []
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.badgeCatalog.loadFailed') + ': ' + err.message)
+  } finally {
+    badgesLoading.value = false
+  }
+}
+
+function openCreateSeriesModal() {
+  editingSeries.value = null
+  seriesForm.value = {
+    id: '',
+    title: '',
+    nameZh: '',
+    nameEn: '',
+    description: '',
+    sourceId: '',
+    sourceLabel: '',
+    displayOrder: (badgeSeries.value.length + 1) * 100,
+    isActive: true
+  }
+  showSeriesModal.value = true
+}
+
+function openEditSeriesModal(series: BadgeSeriesItem) {
+  editingSeries.value = series
+  seriesForm.value = {
+    id: series.id,
+    title: series.title,
+    nameZh: series.nameZh,
+    nameEn: series.nameEn || '',
+    description: series.description,
+    sourceId: series.sourceId || '',
+    sourceLabel: series.sourceLabel || '',
+    displayOrder: series.displayOrder,
+    isActive: series.isActive
+  }
+  showSeriesModal.value = true
+}
+
+async function saveSeries() {
+  const form = seriesForm.value
+  if (!form.id.trim() || !form.title.trim() || !form.nameZh.trim() || !form.description.trim()) {
+    toast.warning(t('entertainment.admin.badgeCatalog.fillSeriesRequired'))
+    return
+  }
+
+  savingSeries.value = true
+  try {
+    const data = {
+      title: form.title.trim(),
+      nameZh: form.nameZh.trim(),
+      nameEn: form.nameEn.trim() || null,
+      description: form.description.trim(),
+      sourceId: form.sourceId.trim() || null,
+      sourceLabel: form.sourceLabel.trim() || null,
+      displayOrder: Number(form.displayOrder) || 0,
+      isActive: form.isActive
+    }
+    if (editingSeries.value) {
+      await api.entertainment.adminUpdateBadgeSeries(editingSeries.value.id, data)
+      toast.success(t('entertainment.admin.badgeCatalog.seriesUpdated'))
+    } else {
+      await api.entertainment.adminCreateBadgeSeries({ id: form.id.trim(), ...data })
+      toast.success(t('entertainment.admin.badgeCatalog.seriesCreated'))
+    }
+    showSeriesModal.value = false
+    await loadBadgeCatalog()
+    await badgeStore.loadCatalog(true)
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.badgeCatalog.saveSeriesFailed') + ': ' + err.message)
+  } finally {
+    savingSeries.value = false
+  }
+}
+
+async function deleteSeries(id: string) {
+  try {
+    await api.entertainment.adminDeleteBadgeSeries(id)
+    toast.success(t('entertainment.admin.badgeCatalog.seriesDeleted'))
+    deletingSeriesId.value = null
+    if (selectedBadgeSeriesId.value === id) selectedBadgeSeriesId.value = 'all'
+    await loadBadgeCatalog()
+    await badgeStore.loadCatalog(true)
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.badgeCatalog.deleteSeriesFailed') + ': ' + err.message)
+  }
+}
+
+function openCreateBadgeModal(seriesId?: string) {
+  editingBadge.value = null
+  const targetSeriesId = seriesId && seriesId !== 'all'
+    ? seriesId
+    : badgeSeries.value[0]?.id || ''
+  badgeForm.value = {
+    id: '',
+    name: '',
+    nameEn: '',
+    fullLabel: '',
+    seriesId: targetSeriesId,
+    sourceId: '',
+    sourceLabel: '',
+    assetUrl: '',
+    assetUrlDark: '',
+    assetUrlLight: '',
+    displayOrder: (badges.value.filter(badge => badge.seriesId === targetSeriesId).length + 1) * 10,
+    isActive: true
+  }
+  showBadgeModal.value = true
+}
+
+function openEditBadgeModal(badge: BadgeCatalogItem) {
+  editingBadge.value = badge
+  badgeForm.value = {
+    id: badge.id,
+    name: badge.name,
+    nameEn: badge.nameEn || '',
+    fullLabel: badge.fullLabel,
+    seriesId: badge.seriesId,
+    sourceId: badge.sourceId || '',
+    sourceLabel: badge.sourceLabel || '',
+    assetUrl: badge.assetUrl,
+    assetUrlDark: badge.assetUrlDark || '',
+    assetUrlLight: badge.assetUrlLight || '',
+    displayOrder: badge.displayOrder || 0,
+    isActive: badge.isActive ?? true
+  }
+  showBadgeModal.value = true
+}
+
+async function saveBadge() {
+  const form = badgeForm.value
+  if (!form.id.trim() || !form.name.trim() || !form.fullLabel.trim() || !form.seriesId.trim() || !form.assetUrl.trim()) {
+    toast.warning(t('entertainment.admin.badgeCatalog.fillBadgeRequired'))
+    return
+  }
+
+  savingBadge.value = true
+  try {
+    const data = {
+      name: form.name.trim(),
+      nameEn: form.nameEn.trim() || null,
+      fullLabel: form.fullLabel.trim(),
+      seriesId: form.seriesId.trim(),
+      sourceId: form.sourceId.trim() || null,
+      sourceLabel: form.sourceLabel.trim() || null,
+      assetUrl: form.assetUrl.trim(),
+      assetUrlDark: form.assetUrlDark.trim() || null,
+      assetUrlLight: form.assetUrlLight.trim() || null,
+      displayOrder: Number(form.displayOrder) || 0,
+      isActive: form.isActive
+    }
+    if (editingBadge.value) {
+      await api.entertainment.adminUpdateBadge(editingBadge.value.id, data)
+      toast.success(t('entertainment.admin.badgeCatalog.badgeUpdated'))
+    } else {
+      await api.entertainment.adminCreateBadge({ id: form.id.trim(), ...data })
+      toast.success(t('entertainment.admin.badgeCatalog.badgeCreated'))
+    }
+    showBadgeModal.value = false
+    await loadBadgeCatalog()
+    await badgeStore.loadCatalog(true)
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.badgeCatalog.saveBadgeFailed') + ': ' + err.message)
+  } finally {
+    savingBadge.value = false
+  }
+}
+
+async function deleteBadge(id: string) {
+  try {
+    await api.entertainment.adminDeleteBadge(id)
+    toast.success(t('entertainment.admin.badgeCatalog.badgeDeleted'))
+    deletingBadgeId.value = null
+    await loadBadgeCatalog()
+    await badgeStore.loadCatalog(true)
+  } catch (err: any) {
+    toast.error(t('entertainment.admin.badgeCatalog.deleteBadgeFailed') + ': ' + err.message)
+  }
+}
+
+function getSeriesTitle(seriesId: string): string {
+  return badgeSeries.value.find(series => series.id === seriesId)?.title || seriesId
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <!-- 页面标题 -->
+    <div class="page-header flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+      <div>
+        <h1 class="page-title">{{ $t('entertainment.admin.title') }}</h1>
+        <p class="text-sm text-themed-muted mt-1">{{ $t('entertainment.admin.description') }}</p>
+      </div>
+      <button v-if="activeTab === 'lotteries'" class="btn btn-primary" @click="openCreateLotteryModal">
+        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        {{ $t('entertainment.admin.createLottery') }}
+      </button>
+      <div v-else-if="activeTab === 'badges'" class="flex gap-2">
+        <button class="btn btn-ghost" @click="openCreateSeriesModal">
+          {{ $t('entertainment.admin.badgeCatalog.addSeries') }}
+        </button>
+        <button class="btn btn-primary" :disabled="badgeSeries.length === 0" @click="openCreateBadgeModal(selectedBadgeSeriesId)">
+          {{ $t('entertainment.admin.badgeCatalog.addBadge') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- TAB 切换 -->
+    <div class="flex border-b border-themed mb-6">
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'lotteries' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('lotteries')"
+      >
+        {{ $t('entertainment.admin.tabs.lotteries') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'records' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('records')"
+      >
+        {{ $t('entertainment.admin.tabs.records') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'users' 
+          ? 'border-blue-500 text-blue-500' 
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('users')"
+      >
+        {{ $t('entertainment.admin.tabs.users') }}
+      </button>
+      <button
+        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px"
+        :class="activeTab === 'badges'
+          ? 'border-blue-500 text-blue-500'
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('badges')"
+      >
+        {{ $t('entertainment.admin.tabs.badges') }}
+      </button>
+    </div>
+
+    <!-- 抽奖活动 TAB -->
+    <div v-show="activeTab === 'lotteries'" class="card">
+      <div v-if="lotteriesLoading" class="p-8 text-center text-themed-muted">
+        {{ $t('common.loading') }}...
+      </div>
+      <div v-else-if="lotteries.length === 0" class="p-8 text-center text-themed-muted">
+        {{ $t('entertainment.admin.noLotteries') }}
+      </div>
+      <div v-else class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-themed text-left text-sm text-themed-muted">
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.lotteryName') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.costPoints') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.prizes') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.totalDraws') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.status') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="lottery in lotteries" :key="lottery.id" class="hover:bg-themed-hover">
+              <td class="px-4 py-3">
+                <div class="text-sm font-medium text-themed">{{ lottery.name }}</div>
+                <div v-if="lottery.description" class="text-xs text-themed-muted truncate max-w-xs">
+                  {{ lottery.description }}
+                </div>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ lottery.costPoints }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ lottery.prizesCount || lottery.prizes?.length || 0 }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ lottery.totalDraws }}</td>
+              <td class="px-4 py-3">
+                <span :class="['badge badge-sm', lottery.isActive ? 'badge-success' : 'badge-ghost']">
+                  {{ lottery.isActive ? $t('entertainment.admin.active') : $t('entertainment.admin.inactive') }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <div class="flex gap-1">
+                  <button class="btn btn-xs btn-ghost" :title="$t('entertainment.admin.managePrizes')" @click="openPrizesModal(lottery)">
+                    <svg 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="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H4.5a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21" />
+                    </svg>
+                  </button>
+                  <button 
+                    class="btn btn-xs btn-ghost" 
+                    :class="{ 'text-green-500': lottery.notificationConfig?.enabled }"
+                    :title="$t('entertainment.admin.notification.title')" 
+                    @click="openNotificationModal(lottery)"
+                  >
+                    <svg 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                    </svg>
+                  </button>
+                  <button class="btn btn-xs btn-ghost" @click="openEditLotteryModal(lottery)">
+                    <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                    </svg>
+                  </button>
+                  <button 
+                    v-if="deleteConfirmId !== lottery.id"
+                    class="btn btn-xs btn-ghost text-red-500" 
+                    @click="deleteConfirmId = lottery.id"
+                  >
+                    <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                  <template v-else>
+                    <button 
+                      class="btn btn-xs btn-error"
+                      :disabled="deleting"
+                      @click="deleteLottery(lottery.id)"
+                    >
+                      {{ $t('common.confirm') }}
+                    </button>
+                    <button 
+                      class="btn btn-xs btn-ghost"
+                      @click="deleteConfirmId = null"
+                    >
+                      {{ $t('common.cancel') }}
+                    </button>
+                  </template>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+        <!-- 分页 -->
+        <div v-if="lotteriesTotalPages > 1" class="flex justify-center items-center gap-2 p-4 border-t border-themed">
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="lotteriesPage <= 1"
+            @click="lotteriesPage--; loadLotteries()"
+          >
+            {{ $t('common.prevPage') }}
+          </button>
+          <span class="text-sm text-themed-muted">{{ lotteriesPage }} / {{ lotteriesTotalPages }}</span>
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="lotteriesPage >= lotteriesTotalPages"
+            @click="lotteriesPage++; loadLotteries()"
+          >
+            {{ $t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 中奖记录 TAB -->
+    <div v-show="activeTab === 'records'" class="card">
+      <!-- 搜索和筛选 -->
+      <div class="p-4 border-b border-themed flex flex-wrap gap-3 items-center">
+        <!-- 用户名搜索 -->
+        <div class="flex items-center gap-2">
+          <input
+            v-model="recordsSearch"
+            type="text"
+            class="input input-sm w-40"
+            :placeholder="$t('entertainment.admin.searchUser')"
+            @keyup.enter="searchRecords"
+          />
+          <button class="btn btn-sm btn-primary" @click="searchRecords">
+            {{ $t('common.search') }}
+          </button>
+        </div>
+        <!-- 奖品类型筛选 -->
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-themed-muted">{{ $t('entertainment.admin.prizeType') }}:</span>
+          <select v-model="recordsPrizeType" class="input input-sm" @change="searchRecords">
+            <option value="">{{ $t('common.all') }}</option>
+            <option value="nothing">{{ $t('entertainment.prizeTypes.nothing') }}</option>
+            <option value="points">{{ $t('entertainment.prizeTypes.points') }}</option>
+            <option value="balance">{{ $t('entertainment.prizeTypes.balance') }}</option>
+            <option value="badge">{{ $t('entertainment.prizeTypes.badge') }}</option>
+            <option value="instance">{{ $t('entertainment.prizeTypes.instance') }}</option>
+            <option value="cpu">{{ $t('entertainment.prizeTypes.cpu') }}</option>
+            <option value="memory">{{ $t('entertainment.prizeTypes.memory') }}</option>
+            <option value="disk">{{ $t('entertainment.prizeTypes.disk') }}</option>
+            <option value="traffic">{{ $t('entertainment.prizeTypes.traffic') }}</option>
+          </select>
+        </div>
+      </div>
+      
+      <div v-if="recordsLoading" class="p-8 text-center text-themed-muted">
+        {{ $t('common.loading') }}...
+      </div>
+      <div v-else-if="records.length === 0" class="p-8 text-center text-themed-muted">
+        {{ $t('entertainment.admin.noRecords') }}
+      </div>
+      <div v-else class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-themed text-left text-sm text-themed-muted">
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.user') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.lotteryName') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.prize') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.prizeType') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.value') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.time') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="rec in records" :key="rec.id" class="hover:bg-themed-hover">
+              <td class="px-4 py-3 text-sm text-themed">{{ rec.username || rec.userId }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ rec.lotteryName || '-' }}</td>
+              <td class="px-4 py-3 text-sm text-themed">{{ rec.prizeName || '-' }}</td>
+              <td class="px-4 py-3 text-sm">
+                <span class="badge badge-sm">{{ getPrizeTypeName(rec.prizeType) }}</span>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">
+                <template v-if="rec.prizeType === 'points'">+{{ rec.prizeValue }}</template>
+                <template v-else-if="rec.prizeType === 'balance'">+¥{{ (rec.prizeValue / 100).toFixed(2) }}</template>
+                <template v-else-if="rec.prizeType === 'badge'">{{ rec.prizeName || $t('entertainment.prizeTypes.badge') }}</template>
+                <template v-else-if="rec.prizeType === 'instance'">{{ rec.instanceDesc || $t('entertainment.wonInstance') }}</template>
+                <template v-else-if="rec.prizeType === 'cpu'">+{{ rec.prizeValue }}%</template>
+                <template v-else-if="rec.prizeType === 'memory'">+{{ rec.prizeValue }}MB</template>
+                <template v-else-if="rec.prizeType === 'disk'">+{{ rec.prizeValue }}MB</template>
+                <template v-else-if="rec.prizeType === 'traffic'">+{{ rec.prizeValue }}GB</template>
+                <template v-else>-</template>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ formatDate(rec.createdAt) }}</td>
+            </tr>
+          </tbody>
+        </table>
+        
+        <!-- 分页 -->
+        <div class="flex justify-between items-center p-4 border-t border-themed">
+          <!-- 每页数量 -->
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-themed-muted">{{ $t('common.perPage') }}:</span>
+            <select 
+              v-model.number="recordsPageSize" 
+              class="input input-sm w-20"
+              @change="recordsPage = 1; loadRecords()"
+            >
+              <option :value="10">10</option>
+              <option :value="20">20</option>
+              <option :value="50">50</option>
+              <option :value="100">100</option>
+            </select>
+          </div>
+          <!-- 分页按钮 -->
+          <div class="flex items-center gap-2">
+            <button
+              class="btn btn-sm btn-ghost"
+              :disabled="recordsPage <= 1"
+              @click="recordsPage--; loadRecords()"
+            >
+              {{ $t('common.prevPage') }}
+            </button>
+            <span class="text-sm text-themed-muted">{{ recordsPage }} / {{ recordsTotalPages || 1 }}</span>
+            <button
+              class="btn btn-sm btn-ghost"
+              :disabled="recordsPage >= recordsTotalPages"
+              @click="recordsPage++; loadRecords()"
+            >
+              {{ $t('common.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 用户积分 TAB -->
+    <div v-show="activeTab === 'users'" class="card">
+      <div v-if="usersLoading" class="p-8 text-center text-themed-muted">
+        {{ $t('common.loading') }}...
+      </div>
+      <div v-else-if="users.length === 0" class="p-8 text-center text-themed-muted">
+        {{ $t('entertainment.admin.noUsers') }}
+      </div>
+      <div v-else class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-themed text-left text-sm text-themed-muted">
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.user') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.currentPoints') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.totalEarned') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.totalSpent') }}</th>
+              <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.lastConvertedAt') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-themed">
+            <tr v-for="user in users" :key="user.userId" class="hover:bg-themed-hover">
+              <td class="px-4 py-3 text-sm text-themed">{{ user.username || user.userId }}</td>
+              <td class="px-4 py-3 text-sm font-medium text-amber-500">{{ user.points?.toLocaleString() }}</td>
+              <td class="px-4 py-3 text-sm text-green-500">+{{ user.totalEarned?.toLocaleString() }}</td>
+              <td class="px-4 py-3 text-sm text-red-500">-{{ user.totalSpent?.toLocaleString() }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted">
+                {{ user.lastConvertedAt ? formatDate(user.lastConvertedAt) : '-' }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+        <!-- 分页 -->
+        <div v-if="usersTotalPages > 1" class="flex justify-center items-center gap-2 p-4 border-t border-themed">
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="usersPage <= 1"
+            @click="usersPage--; loadUsers()"
+          >
+            {{ $t('common.prevPage') }}
+          </button>
+          <span class="text-sm text-themed-muted">{{ usersPage }} / {{ usersTotalPages }}</span>
+          <button
+            class="btn btn-sm btn-ghost"
+            :disabled="usersPage >= usersTotalPages"
+            @click="usersPage++; loadUsers()"
+          >
+            {{ $t('common.nextPage') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 徽章管理 TAB -->
+    <div v-show="activeTab === 'badges'" class="space-y-6">
+      <div v-if="badgesLoading" class="card p-8 text-center text-themed-muted">
+        {{ $t('common.loading') }}...
+      </div>
+      <template v-else>
+        <div class="grid grid-cols-1 xl:grid-cols-[360px_1fr] gap-6">
+          <div class="card">
+            <div class="p-4 border-b border-themed flex items-center justify-between">
+              <div>
+                <div class="text-base font-semibold text-themed">{{ $t('entertainment.admin.badgeCatalog.series.title') }}</div>
+                <div class="text-xs text-themed-muted mt-1">{{ $t('entertainment.admin.badgeCatalog.series.description') }}</div>
+              </div>
+              <button class="btn btn-sm btn-primary" @click="openCreateSeriesModal">{{ $t('entertainment.admin.badgeCatalog.series.add') }}</button>
+            </div>
+            <div class="divide-y divide-themed">
+              <button
+                class="w-full px-4 py-3 text-left flex items-center justify-between hover:bg-themed-hover"
+                :class="selectedBadgeSeriesId === 'all' ? 'bg-themed-secondary' : ''"
+                @click="selectedBadgeSeriesId = 'all'"
+              >
+                <span class="text-sm font-medium text-themed">{{ $t('entertainment.admin.badgeCatalog.series.all') }}</span>
+                <span class="badge badge-sm">{{ badges.length }}</span>
+              </button>
+              <div v-for="series in badgeSeries" :key="series.id" class="p-4 hover:bg-themed-hover">
+                <div class="flex items-start justify-between gap-3">
+                  <button class="min-w-0 text-left flex-1" @click="selectedBadgeSeriesId = series.id">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm font-semibold text-themed truncate">{{ series.nameZh }}</span>
+                      <span :class="['badge badge-sm', series.isActive ? 'badge-success' : 'badge-ghost']">
+                        {{ series.isActive ? $t('common.active') : $t('common.inactive') }}
+                      </span>
+                    </div>
+                    <div class="text-xs text-themed-muted mt-1 truncate">{{ series.title }}</div>
+                    <div class="text-xs text-themed-faint mt-1">
+                      {{ $t('entertainment.admin.badgeCatalog.series.enabledCount', { active: series.activeBadgeCount || 0, total: series.badgeCount || 0 }) }}
+                    </div>
+                  </button>
+                  <div class="flex gap-1">
+                    <button class="btn btn-xs btn-ghost" @click="openEditSeriesModal(series)">{{ $t('common.edit') }}</button>
+                    <template v-if="deletingSeriesId === series.id">
+                      <button class="btn btn-xs btn-error" @click="deleteSeries(series.id)">{{ $t('common.confirm') }}</button>
+                      <button class="btn btn-xs btn-ghost" @click="deletingSeriesId = null">{{ $t('common.cancel') }}</button>
+                    </template>
+                    <button v-else class="btn btn-xs btn-ghost text-red-500" @click="deletingSeriesId = series.id">{{ $t('common.delete') }}</button>
+                  </div>
+                </div>
+              </div>
+              <div v-if="badgeSeries.length === 0" class="p-6 text-center text-themed-muted">
+                {{ $t('entertainment.admin.badgeCatalog.series.empty') }}
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="p-4 border-b border-themed flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+              <div>
+                <div class="text-base font-semibold text-themed">{{ $t('entertainment.admin.badgeCatalog.badges.title') }}</div>
+                <div class="text-xs text-themed-muted mt-1">
+                  {{ $t('entertainment.admin.badgeCatalog.badges.currentFilter', { name: selectedBadgeSeriesId === 'all' ? $t('entertainment.admin.badgeCatalog.series.all') : getSeriesTitle(selectedBadgeSeriesId) }) }}
+                </div>
+              </div>
+              <button class="btn btn-sm btn-primary" :disabled="badgeSeries.length === 0" @click="openCreateBadgeModal(selectedBadgeSeriesId)">
+                {{ $t('entertainment.admin.badgeCatalog.addBadge') }}
+              </button>
+            </div>
+            <div v-if="filteredBadges.length === 0" class="p-8 text-center text-themed-muted">
+              {{ $t('entertainment.admin.badgeCatalog.badges.empty') }}
+            </div>
+            <div v-else class="overflow-x-auto">
+              <table class="w-full">
+                <thead>
+                  <tr class="border-b border-themed text-left text-sm text-themed-muted">
+                    <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.badgeCatalog.badges.tableBadge') }}</th>
+                    <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.badgeCatalog.badges.tableSeries') }}</th>
+                    <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.badgeCatalog.badges.tableAssetUrl') }}</th>
+                    <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.badgeCatalog.badges.tableStatus') }}</th>
+                    <th class="px-4 py-3 font-medium">{{ $t('entertainment.admin.badgeCatalog.badges.tableUsage') }}</th>
+                    <th class="px-4 py-3 font-medium">{{ $t('common.actions') }}</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-themed">
+                  <tr v-for="badge in filteredBadges" :key="badge.id" class="hover:bg-themed-hover">
+                    <td class="px-4 py-3">
+                      <div class="flex items-center gap-3">
+                        <img :src="badge.assetUrlLight || badge.assetUrl" :alt="badge.fullLabel" class="w-10 h-10 object-contain rounded-lg" loading="lazy" />
+                        <div class="min-w-0">
+                          <div class="text-sm font-semibold text-themed">{{ badge.name }}</div>
+                          <div class="text-xs text-themed-muted truncate max-w-52">{{ badge.fullLabel }}</div>
+                          <div class="text-xs text-themed-faint">{{ badge.id }}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-4 py-3 text-sm text-themed">{{ badge.seriesNameZh || badge.seriesTitle }}</td>
+                    <td class="px-4 py-3 text-xs text-themed-muted max-w-64 truncate">{{ badge.assetUrl }}</td>
+                    <td class="px-4 py-3">
+                      <span :class="['badge badge-sm', badge.isActive && badge.seriesIsActive ? 'badge-success' : 'badge-ghost']">
+                        {{ badge.isActive && badge.seriesIsActive ? $t('entertainment.admin.badgeCatalog.badges.drawable') : $t('entertainment.admin.badgeCatalog.badges.notDrawable') }}
+                      </span>
+                    </td>
+                    <td class="px-4 py-3 text-xs text-themed-muted">
+                      {{ $t('entertainment.admin.badgeCatalog.badges.usage', { ownership: badge.ownershipCount || 0, avatar: badge.avatarUseCount || 0, instance: badge.instanceUseCount || 0 }) }}
+                    </td>
+                    <td class="px-4 py-3">
+                      <div class="flex gap-1">
+                        <button class="btn btn-xs btn-ghost" @click="openEditBadgeModal(badge)">{{ $t('common.edit') }}</button>
+                        <template v-if="deletingBadgeId === badge.id">
+                          <button class="btn btn-xs btn-error" @click="deleteBadge(badge.id)">{{ $t('common.confirm') }}</button>
+                          <button class="btn btn-xs btn-ghost" @click="deletingBadgeId = null">{{ $t('common.cancel') }}</button>
+                        </template>
+                        <button v-else class="btn btn-xs btn-ghost text-red-500" @click="deletingBadgeId = badge.id">{{ $t('common.delete') }}</button>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- 创建/编辑抽奖弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div 
+          v-if="showLotteryModal" 
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          @click.self="showLotteryModal = false"
+        >
+          <div class="card p-6 w-full max-w-md">
+            <h3 class="text-lg font-medium text-themed mb-4">
+              {{ editingLottery ? $t('entertainment.admin.editLottery') : $t('entertainment.admin.createLottery') }}
+            </h3>
+            
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.lotteryName') }}</label>
+                <input 
+                  v-model="lotteryForm.name"
+                  type="text" 
+                  class="input w-full"
+                  :placeholder="$t('entertainment.admin.enterLotteryName')"
+                />
+              </div>
+              
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.lotteryDesc') }}</label>
+                <textarea 
+                  v-model="lotteryForm.description"
+                  class="input w-full h-20 resize-none"
+                  :placeholder="$t('entertainment.admin.enterDescription')"
+                ></textarea>
+              </div>
+              
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.costPoints') }}</label>
+                <input 
+                  v-model.number="lotteryForm.costPoints"
+                  type="number" 
+                  class="input w-full"
+                  min="1"
+                />
+              </div>
+              
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.startAt') }}</label>
+                  <input 
+                    v-model="lotteryForm.startAt"
+                    type="date" 
+                    class="input w-full"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.endAt') }}</label>
+                  <input 
+                    v-model="lotteryForm.endAt"
+                    type="date" 
+                    class="input w-full"
+                  />
+                </div>
+              </div>
+              
+              <div class="flex items-center gap-2">
+                <input 
+                  id="isActive"
+                  v-model="lotteryForm.isActive" 
+                  type="checkbox"
+                  class="checkbox"
+                />
+                <label for="isActive" class="text-sm text-themed">{{ $t('entertainment.admin.isActive') }}</label>
+              </div>
+            </div>
+            
+            <div class="flex justify-end gap-2 mt-6">
+              <button class="btn btn-ghost" @click="showLotteryModal = false">{{ $t('common.cancel') }}</button>
+              <button class="btn btn-primary" :disabled="savingLottery" @click="saveLottery">
+                {{ savingLottery ? $t('common.saving') : $t('common.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 奖品管理弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div 
+          v-if="showPrizesModal" 
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto"
+          @click.self="showPrizesModal = false"
+        >
+          <div class="card p-6 w-full max-w-2xl my-8">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-medium text-themed">
+                {{ $t('entertainment.admin.managePrizes') }} - {{ editingPrizes?.name }}
+              </h3>
+              <button class="btn btn-sm btn-primary" @click="addPrize">
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                </svg>
+                {{ $t('entertainment.admin.addPrize') }}
+              </button>
+            </div>
+            
+            <div class="space-y-3 max-h-96 overflow-y-auto">
+              <div 
+                v-for="(prize, index) in prizes" 
+                :key="index"
+                class="p-3 border border-themed rounded-lg"
+              >
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-2">
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1">{{ $t('entertainment.admin.prizeName') }}</label>
+                    <input v-model="prize.name" type="text" class="input input-sm w-full" />
+                  </div>
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1">{{ $t('entertainment.admin.prizeType') }}</label>
+                    <select v-model="prize.type" class="input input-sm w-full">
+                      <option value="nothing">{{ $t('entertainment.prizeTypes.nothing') }}</option>
+                      <option value="points">{{ $t('entertainment.prizeTypes.points') }}</option>
+                      <option value="balance">{{ $t('entertainment.prizeTypes.balance') }}</option>
+                      <option value="badge">{{ $t('entertainment.prizeTypes.badge') }}</option>
+                      <option value="instance">{{ $t('entertainment.prizeTypes.instance') }}</option>
+                      <option value="cpu">{{ $t('entertainment.prizeTypes.cpu') }}</option>
+                      <option value="memory">{{ $t('entertainment.prizeTypes.memory') }}</option>
+                      <option value="disk">{{ $t('entertainment.prizeTypes.disk') }}</option>
+                      <option value="traffic">{{ $t('entertainment.prizeTypes.traffic') }}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                  <div v-if="prize.type !== 'nothing' && prize.type !== 'badge'">
+                    <label class="block text-xs text-themed-muted mb-1">
+                      {{ prize.type === 'balance' ? $t('entertainment.admin.balanceValue') : $t('entertainment.admin.prizeValue') }}
+                      <span v-if="prize.type === 'cpu'" class="text-orange-500">(%)</span>
+                      <span v-else-if="prize.type === 'memory' || prize.type === 'disk'" class="text-orange-500">(MB)</span>
+                      <span v-else-if="prize.type === 'traffic'" class="text-orange-500">(GB)</span>
+                    </label>
+                    <input 
+                      v-model.number="prize.value" 
+                      type="number" 
+                      class="input input-sm w-full"
+                      :placeholder="prize.type === 'balance' ? $t('entertainment.admin.balanceCents') : 
+                        prize.type === 'cpu' ? $t('entertainment.admin.cpuPercent') :
+                        prize.type === 'memory' ? $t('entertainment.admin.memoryMB') :
+                        prize.type === 'disk' ? $t('entertainment.admin.diskMB') :
+                        prize.type === 'traffic' ? $t('entertainment.admin.trafficGB') : ''"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1">{{ $t('entertainment.admin.probability') }}</label>
+                    <input v-model.number="prize.probability" type="number" class="input input-sm w-full" min="0.01" step="0.01" />
+                  </div>
+                  <div>
+                    <label class="block text-xs text-themed-muted mb-1">{{ $t('entertainment.admin.quantity') }}</label>
+                    <input 
+                      v-model.number="prize.totalQuantity" 
+                      type="number" 
+                      class="input input-sm w-full" 
+                      :placeholder="$t('entertainment.admin.unlimited')"
+                      :disabled="prize.type === 'points' || prize.type === 'nothing'"
+                      :title="(prize.type === 'points' || prize.type === 'nothing') ? $t('entertainment.admin.noQuantityForType') : ''"
+                    />
+                  </div>
+                  <!-- 补充库存（仅对有数量限制的非 points/nothing 奖品显示） -->
+                  <div v-if="prize.id && prize.type !== 'points' && prize.type !== 'nothing' && prize.totalQuantity">
+                    <label class="block text-xs text-themed-muted mb-1">
+                      {{ $t('entertainment.admin.replenish') }}
+                      <span class="text-orange-500">({{ $t('entertainment.admin.remaining') }}: {{ prize.remainQuantity ?? 0 }})</span>
+                    </label>
+                    <input 
+                      v-model.number="prize.replenishAmount" 
+                      type="number" 
+                      class="input input-sm w-full" 
+                      min="0"
+                      :placeholder="$t('entertainment.admin.replenishPlaceholder')"
+                    />
+                  </div>
+                </div>
+                <div v-if="prize.type === 'instance'" class="mt-2">
+                  <label class="block text-xs text-themed-muted mb-1">{{ $t('entertainment.admin.instanceDesc') }}</label>
+                  <input v-model="prize.instanceDesc" type="text" class="input input-sm w-full" :placeholder="$t('entertainment.admin.instanceDescPlaceholder')" />
+                </div>
+                <div class="flex justify-end mt-2">
+                  <button class="btn btn-xs btn-ghost text-red-500" @click="removePrize(index)">
+                    {{ $t('common.delete') }}
+                  </button>
+                </div>
+              </div>
+              
+              <div v-if="prizes.length === 0" class="text-center text-themed-muted py-4">
+                {{ $t('entertainment.admin.noPrizes') }}
+              </div>
+            </div>
+            
+            <div class="flex justify-end gap-2 mt-6">
+              <button class="btn btn-ghost" @click="showPrizesModal = false">{{ $t('common.cancel') }}</button>
+              <button class="btn btn-primary" :disabled="savingPrizes" @click="savePrizes">
+                {{ savingPrizes ? $t('common.saving') : $t('common.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 通知配置弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div 
+          v-if="showNotificationModal" 
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          @click.self="showNotificationModal = false"
+        >
+          <div class="card p-6 w-full max-w-md">
+            <h3 class="text-lg font-medium text-themed mb-4">
+              {{ $t('entertainment.admin.notification.title') }} - {{ editingNotification?.name }}
+            </h3>
+            
+            <div class="space-y-4">
+              <!-- 启用开关 -->
+              <div class="flex items-center justify-between">
+                <label class="text-sm font-medium text-themed">{{ $t('entertainment.admin.notification.enabled') }}</label>
+                <label class="relative inline-flex items-center cursor-pointer">
+                  <input v-model="notificationForm.enabled" type="checkbox" class="sr-only peer">
+                  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
+                </label>
+              </div>
+              
+              <!-- 通知方式选择 -->
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.notification.type') }}</label>
+                <select v-model="notificationForm.type" class="input w-full">
+                  <option value="telegram">Telegram</option>
+                  <option value="discord">Discord</option>
+                  <option value="webhook">Webhook</option>
+                </select>
+              </div>
+              
+              <!-- Telegram 配置 -->
+              <template v-if="notificationForm.type === 'telegram'">
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">Bot Token</label>
+                  <input 
+                    v-model="notificationForm.telegramBotToken"
+                    type="text" 
+                    class="input w-full"
+                    placeholder="123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">Chat ID</label>
+                  <input 
+                    v-model="notificationForm.telegramChatId"
+                    type="text" 
+                    class="input w-full"
+                    placeholder="-1001234567890"
+                  />
+                </div>
+              </template>
+              
+              <!-- Discord 配置 -->
+              <template v-if="notificationForm.type === 'discord'">
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">Webhook URL</label>
+                  <input 
+                    v-model="notificationForm.discordWebhookUrl"
+                    type="text" 
+                    class="input w-full"
+                    placeholder="https://discord.com/api/webhooks/..."
+                  />
+                </div>
+              </template>
+              
+              <!-- Webhook 配置 -->
+              <template v-if="notificationForm.type === 'webhook'">
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">Webhook URL</label>
+                  <input 
+                    v-model="notificationForm.webhookUrl"
+                    type="text" 
+                    class="input w-full"
+                    placeholder="https://your-server.com/webhook"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.notification.secret') }}</label>
+                  <input 
+                    v-model="notificationForm.webhookSecret"
+                    type="text" 
+                    class="input w-full"
+                    :placeholder="$t('entertainment.admin.notification.secretPlaceholder')"
+                  />
+                </div>
+              </template>
+              
+              <!-- 通知条件 -->
+              <div class="border-t border-themed pt-4">
+                <label class="block text-sm font-medium text-themed mb-2">{{ $t('entertainment.admin.notification.conditions') }}</label>
+                <div class="space-y-2">
+                  <div class="flex items-center gap-2">
+                    <input 
+                      id="notifyBalance"
+                      v-model="notificationForm.notifyBalance" 
+                      type="checkbox"
+                      class="checkbox"
+                    />
+                    <label for="notifyBalance" class="text-sm text-themed">{{ $t('entertainment.admin.notification.notifyBalance') }}</label>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <input 
+                      id="notifyInstance"
+                      v-model="notificationForm.notifyInstance" 
+                      type="checkbox"
+                      class="checkbox"
+                    />
+                    <label for="notifyInstance" class="text-sm text-themed">{{ $t('entertainment.admin.notification.notifyInstance') }}</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div class="flex justify-end gap-2 mt-6">
+              <button class="btn btn-ghost" @click="showNotificationModal = false">{{ $t('common.cancel') }}</button>
+              <button class="btn btn-primary" :disabled="savingNotification" @click="saveNotification">
+                {{ savingNotification ? $t('common.saving') : $t('common.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 系列编辑弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="showSeriesModal"
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto"
+          @click.self="showSeriesModal = false"
+        >
+          <div class="card p-6 w-full max-w-2xl my-8">
+            <h3 class="text-lg font-medium text-themed mb-4">
+              {{ editingSeries ? $t('entertainment.admin.badgeCatalog.series.editTitle') : $t('entertainment.admin.badgeCatalog.series.createTitle') }}
+            </h3>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.id') }}</label>
+                <input v-model="seriesForm.id" type="text" class="input w-full" :disabled="!!editingSeries" placeholder="supreme" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.sort') }}</label>
+                <input v-model.number="seriesForm.displayOrder" type="number" class="input w-full" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.nameZh') }}</label>
+                <input v-model="seriesForm.nameZh" type="text" class="input w-full" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.nameEn') }}</label>
+                <input v-model="seriesForm.nameEn" type="text" class="input w-full" />
+              </div>
+              <div class="sm:col-span-2">
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.titleLabel') }}</label>
+                <input v-model="seriesForm.title" type="text" class="input w-full" :placeholder="$t('entertainment.admin.badgeCatalog.series.titlePlaceholder')" />
+              </div>
+              <div class="sm:col-span-2">
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.descriptionLabel') }}</label>
+                <textarea v-model="seriesForm.description" class="input w-full h-20 resize-none"></textarea>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.sourceId') }}</label>
+                <input v-model="seriesForm.sourceId" type="text" class="input w-full" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.series.sourceLabel') }}</label>
+                <input v-model="seriesForm.sourceLabel" type="text" class="input w-full" />
+              </div>
+              <label class="flex items-center gap-2 sm:col-span-2 text-sm text-themed">
+                <input v-model="seriesForm.isActive" type="checkbox" class="checkbox" />
+                {{ $t('entertainment.admin.badgeCatalog.series.enable') }}
+              </label>
+            </div>
+            <div class="flex justify-end gap-2 mt-6">
+              <button class="btn btn-ghost" @click="showSeriesModal = false">{{ $t('common.cancel') }}</button>
+              <button class="btn btn-primary" :disabled="savingSeries" @click="saveSeries">
+                {{ savingSeries ? $t('common.saving') : $t('common.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 徽章编辑弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="showBadgeModal"
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto"
+          @click.self="showBadgeModal = false"
+        >
+          <div class="card p-6 w-full max-w-3xl my-8">
+            <h3 class="text-lg font-medium text-themed mb-4">
+              {{ editingBadge ? $t('entertainment.admin.badgeCatalog.badges.editTitle') : $t('entertainment.admin.badgeCatalog.badges.createTitle') }}
+            </h3>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.id') }}</label>
+                <input v-model="badgeForm.id" type="text" class="input w-full" :disabled="!!editingBadge" placeholder="elite" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.series') }}</label>
+                <select v-model="badgeForm.seriesId" class="input w-full">
+                  <option v-for="series in badgeSeries" :key="series.id" :value="series.id">
+                    {{ series.nameZh }} · {{ series.id }}
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.name') }}</label>
+                <input v-model="badgeForm.name" type="text" class="input w-full" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.nameEn') }}</label>
+                <input v-model="badgeForm.nameEn" type="text" class="input w-full" />
+              </div>
+              <div class="sm:col-span-2">
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.fullLabel') }}</label>
+                <input v-model="badgeForm.fullLabel" type="text" class="input w-full" :placeholder="$t('entertainment.admin.badgeCatalog.badges.fullLabelPlaceholder')" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.sourceId') }}</label>
+                <input v-model="badgeForm.sourceId" type="text" class="input w-full" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.sourceLabel') }}</label>
+                <input v-model="badgeForm.sourceLabel" type="text" class="input w-full" />
+              </div>
+              <div class="sm:col-span-2">
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.assetUrl') }}</label>
+                <input v-model="badgeForm.assetUrl" type="text" class="input w-full" :placeholder="$t('entertainment.admin.badgeCatalog.badges.assetUrlPlaceholder')" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.assetUrlDark') }}</label>
+                <input v-model="badgeForm.assetUrlDark" type="text" class="input w-full" placeholder="/badges/dark/elite.svg" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.assetUrlLight') }}</label>
+                <input v-model="badgeForm.assetUrlLight" type="text" class="input w-full" placeholder="/badges/light/elite.svg" />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-themed mb-1">{{ $t('entertainment.admin.badgeCatalog.badges.sort') }}</label>
+                <input v-model.number="badgeForm.displayOrder" type="number" class="input w-full" />
+              </div>
+              <label class="flex items-center gap-2 text-sm text-themed self-end pb-3">
+                <input v-model="badgeForm.isActive" type="checkbox" class="checkbox" />
+                {{ $t('entertainment.admin.badgeCatalog.badges.enable') }}
+              </label>
+            </div>
+            <div class="mt-5 rounded-lg border border-themed p-4">
+              <div class="text-sm font-medium text-themed mb-3">{{ $t('entertainment.admin.badgeCatalog.badges.preview') }}</div>
+              <div class="flex items-center gap-4">
+                <img
+                  v-if="badgeForm.assetUrl"
+                  :src="badgeForm.assetUrlLight || badgeForm.assetUrl"
+                  :alt="badgeForm.fullLabel || badgeForm.id"
+                  class="w-16 h-16 object-contain rounded-xl"
+                  loading="lazy"
+                />
+                <div>
+                  <div class="text-base font-semibold text-themed">{{ badgeForm.name || $t('entertainment.admin.badgeCatalog.badges.previewName') }}</div>
+                  <div class="text-sm text-themed-muted">{{ badgeForm.fullLabel || $t('entertainment.admin.badgeCatalog.badges.previewLabel') }}</div>
+                  <div class="text-xs text-themed-faint mt-1">{{ badgeForm.id || 'badge-id' }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="flex justify-end gap-2 mt-6">
+              <button class="btn btn-ghost" @click="showBadgeModal = false">{{ $t('common.cancel') }}</button>
+              <button class="btn btn-primary" :disabled="savingBadge" @click="saveBadge">
+                {{ savingBadge ? $t('common.saving') : $t('common.save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/HelpManageView.vue b/client/src/views/admin/HelpManageView.vue
new file mode 100644
index 0000000..bc05fbd
--- /dev/null
+++ b/client/src/views/admin/HelpManageView.vue
@@ -0,0 +1,1125 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { parseMarkdown } from '@/utils/markdown'
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// Article list
+interface HelpArticle {
+  id: number
+  title: string
+  slug: string
+  content: string
+  category: string
+  sort_order: number
+  published: number
+  pinned?: number
+  created_at: string
+  updated_at: string
+}
+const articles = ref<HelpArticle[]>([])
+const loading = ref<boolean>(true)
+const page = ref<number>(1)
+const pageSize = ref<number>(100)
+const total = ref<number>(0)
+const totalPages = ref<number>(0)
+
+// Editor
+const showEditor = ref<boolean>(false)
+type EditorMode = 'create' | 'edit'
+const editorMode = ref<EditorMode>('create')
+const editingId = ref<number | null>(null)
+interface ArticleForm {
+  title: string
+  slug: string
+  content: string
+  category: string
+  sortOrder: number
+  published: boolean
+  pinned: boolean
+}
+const form = ref<ArticleForm>({
+  title: '',
+  slug: '',
+  content: '',
+  category: 'general',
+  sortOrder: 0,
+  published: true,
+  pinned: false
+})
+const formLoading = ref<boolean>(false)
+const formError = ref<string>('')
+const previewMode = ref<boolean>(false)
+const showMarkdownHelp = ref<boolean>(false)
+
+// Tab
+type TabType = 'articles' | 'categories'
+const activeTab = ref<TabType>('articles')
+
+// Categories - now dynamic
+interface Category {
+  id: string
+  name: string
+  color: string
+}
+const categories = ref<Category[]>([
+  { id: 'general', name: '常规', color: '#6b7280' },
+  { id: 'getting-started', name: '快速开始', color: '#22c55e' },
+  { id: 'instances', name: '实例管理', color: '#3b82f6' },
+  { id: 'networking', name: '网络配置', color: '#8b5cf6' },
+  { id: 'billing', name: '计费相关', color: '#f59e0b' },
+  { id: 'faq', name: '常见问题', color: '#ef4444' }
+])
+
+// Category editor
+const showCategoryModal = ref<boolean>(false)
+type CategoryMode = 'create' | 'edit'
+const categoryMode = ref<CategoryMode>('create')
+const editingCategoryId = ref<string | null>(null)
+const categoryForm = ref<Category>({ id: '', name: '', color: '#3b82f6' })
+const categoryError = ref<string>('')
+
+// Predefined colors for categories
+const categoryColors = [
+  '#6b7280', '#ef4444', '#f59e0b', '#22c55e', '#14b8a6', 
+  '#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
+]
+
+onMounted(async (): Promise<void> => {
+  // 并行加载分类配置和文章列表
+  await Promise.all([loadCategoriesFromServer(), loadArticles()])
+})
+
+// Load categories from server
+async function loadCategoriesFromServer(): Promise<void> {
+  try {
+    const response = await api.help.categoryConfig()
+    if (response.categories && response.categories.length > 0) {
+      categories.value = response.categories
+    }
+  } catch (err) {
+    console.error('Failed to load category config:', err)
+    // 加载失败时使用默认配置
+  }
+}
+
+// Save categories to server
+async function saveCategoriesToServer(): Promise<void> {
+  try {
+    await api.help.saveCategoryConfig(categories.value)
+  } catch (err: any) {
+    toast.error(t('admin.helpManage.saveFailed') + ': ' + (err?.message || String(err)))
+    throw err
+  }
+}
+
+// Category management functions
+function openAddCategory(): void {
+  categoryMode.value = 'create'
+  editingCategoryId.value = null
+  categoryForm.value = { id: '', name: '', color: '#3b82f6' }
+  categoryError.value = ''
+  showCategoryModal.value = true
+}
+
+function openEditCategory(cat: Category): void {
+  categoryMode.value = 'edit'
+  editingCategoryId.value = cat.id
+  categoryForm.value = { id: cat.id, name: cat.name, color: cat.color }
+  categoryError.value = ''
+  showCategoryModal.value = true
+}
+
+async function saveCategory(): Promise<void> {
+  if (!categoryForm.value.id || !categoryForm.value.name) {
+    categoryError.value = t('admin.helpManage.fillCategoryIdAndName')
+    return
+  }
+  
+  // Validate ID format
+  if (!/^[a-z0-9-]+$/.test(categoryForm.value.id)) {
+    categoryError.value = t('admin.helpManage.invalidCategoryId')
+    return
+  }
+  
+  if (categoryMode.value === 'create') {
+    // Check duplicate ID
+    if (categories.value.some(c => c.id === categoryForm.value.id)) {
+      categoryError.value = t('admin.helpManage.duplicateCategoryId')
+      return
+    }
+    categories.value.push({ ...categoryForm.value })
+  } else {
+    const index = categories.value.findIndex(c => c.id === editingCategoryId.value)
+    if (index !== -1) {
+      categories.value[index] = { ...categoryForm.value }
+    }
+  }
+  
+  try {
+    await saveCategoriesToServer()
+    showCategoryModal.value = false
+    toast.success(categoryMode.value === 'create' ? t('admin.helpManage.categoryAdded') : t('admin.helpManage.categoryUpdated'))
+  } catch {
+    // 保存失败，回滚操作
+    await loadCategoriesFromServer()
+  }
+}
+
+async function deleteCategory(cat: Category): Promise<void> {
+  // Check if category is in use
+  const inUse = articles.value.some(a => a.category === cat.id)
+  if (inUse) {
+    toast.error(t('admin.helpManage.categoryInUse'))
+    return
+  }
+  
+  if (!confirm(t('admin.helpManage.confirmDeleteCategory', { name: cat.name }))) return
+  
+  categories.value = categories.value.filter(c => c.id !== cat.id)
+  try {
+    await saveCategoriesToServer()
+    toast.success(t('admin.helpManage.categoryDeleted'))
+  } catch {
+    // 保存失败，回滚操作
+    await loadCategoriesFromServer()
+  }
+}
+
+async function loadArticles(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.help.adminList({ page: page.value, pageSize: pageSize.value })
+    const data = response as { articles?: HelpArticle[]; total?: number; totalPages?: number }
+    articles.value = data.articles || []
+    total.value = data.total || 0
+    totalPages.value = data.totalPages || 1
+  } catch (err: any) {
+    toast.error(t('admin.helpManage.loadFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate(): void {
+  editorMode.value = 'create'
+  editingId.value = null
+  form.value = {
+    title: '',
+    slug: '',
+    content: '',
+    category: 'general',
+    sortOrder: 0,
+    published: true,
+    pinned: false
+  }
+  formError.value = ''
+  previewMode.value = false
+  showEditor.value = true
+}
+
+async function openEdit(article: HelpArticle): Promise<void> {
+  editorMode.value = 'edit'
+  editingId.value = article.id
+  formLoading.value = true
+  formError.value = ''
+  previewMode.value = false
+  showEditor.value = true
+  
+  try {
+    const response = await api.help.adminGet(article.id)
+    const data = response as { article?: HelpArticle }
+    const a = data.article
+    if (!a) throw new Error('Article not found')
+    form.value = {
+      title: a.title,
+      slug: a.slug,
+      content: a.content,
+      category: a.category || 'general',
+      sortOrder: a.sort_order || 0,
+      published: a.published === 1,
+      pinned: a.pinned === 1
+    }
+  } catch (err: any) {
+    toast.error(t('admin.helpManage.loadFailed') + ': ' + (err?.message || String(err)))
+    showEditor.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+async function saveArticle(): Promise<void> {
+  if (!form.value.title || !form.value.slug || !form.value.content) {
+    formError.value = t('admin.helpManage.fillRequired')
+    return
+  }
+  
+  // Validate slug format
+  if (!/^[a-z0-9-]+$/.test(form.value.slug)) {
+    formError.value = t('admin.helpManage.invalidSlug')
+    return
+  }
+  
+  formLoading.value = true
+  formError.value = ''
+  
+  try {
+    if (editorMode.value === 'create') {
+      await api.help.create({
+        title: form.value.title,
+        slug: form.value.slug,
+        content: form.value.content,
+        category: form.value.category,
+        sortOrder: form.value.sortOrder,
+        published: form.value.published,
+        pinned: form.value.pinned
+      })
+      toast.success(t('admin.helpManage.articleCreated'))
+    } else {
+      if (editingId.value === null) throw new Error('Invalid article ID')
+      await api.help.update(editingId.value, {
+        title: form.value.title,
+        slug: form.value.slug,
+        content: form.value.content,
+        category: form.value.category,
+        sortOrder: form.value.sortOrder,
+        published: form.value.published,
+        pinned: form.value.pinned
+      })
+      toast.success(t('admin.helpManage.articleUpdated'))
+    }
+    showEditor.value = false
+    await loadArticles()
+  } catch (err: any) {
+    formError.value = err?.message || String(err)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+async function deleteArticle(article: HelpArticle): Promise<void> {
+  if (!confirm(t('admin.helpManage.confirmDelete', { title: article.title }))) return
+  
+  try {
+    await api.help.delete(article.id)
+    toast.success(t('admin.helpManage.articleDeleted'))
+    await loadArticles()
+  } catch (err: any) {
+    toast.error(t('admin.helpManage.deleteFailed') + ': ' + (err?.message || String(err)))
+  }
+}
+
+async function togglePublished(article: HelpArticle): Promise<void> {
+  try {
+    await api.help.update(article.id, { published: article.published === 0 })
+    toast.success(article.published === 1 ? t('admin.helpManage.articleHidden') : t('admin.helpManage.articlePublished'))
+    await loadArticles()
+  } catch (err: any) {
+    toast.error(t('admin.helpManage.operationFailed') + ': ' + (err?.message || String(err)))
+  }
+}
+
+// Auto-generate slug from title
+function generateSlug(): void {
+  if (editorMode.value === 'create' && form.value.title && !form.value.slug) {
+    form.value.slug = form.value.title
+      .toLowerCase()
+      .replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-')
+      .replace(/^-|-$/g, '')
+      .slice(0, 50)
+  }
+}
+
+// Computed preview HTML
+const previewHtml = computed<string>(() => {
+  return parseMarkdown(form.value.content || '')
+})
+
+function getCategoryLabel(catId: string): string {
+  const cat = categories.value.find(c => c.id === catId)
+  return cat ? cat.name : catId
+}
+
+function getCategoryColor(catId: string): string {
+  const cat = categories.value.find(c => c.id === catId)
+  return cat ? cat.color : '#6b7280'
+}
+
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleDateString('zh-CN', { 
+    month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' 
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header flex-col sm:flex-row gap-4 sm:gap-0">
+      <div>
+        <h1 class="page-title">{{ t('admin.helpManage.title') }}</h1>
+        <p class="page-description">{{ t('admin.helpManage.description') }}</p>
+      </div>
+      <div class="flex gap-2 w-full sm:w-auto">
+        <button v-if="activeTab === 'categories'" class="btn-secondary flex-1 sm:flex-none justify-center" @click="openAddCategory">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('admin.helpManage.addCategory') }}
+        </button>
+        <button v-if="activeTab === 'articles'" class="btn-primary flex-1 sm:flex-none justify-center" @click="openCreate">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('admin.helpManage.create') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Tab 切换 -->
+    <div class="border-b border-themed overflow-x-auto">
+      <nav class="flex gap-4 sm:gap-6 min-w-max">
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap',
+            activeTab === 'articles'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="activeTab = 'articles'"
+        >
+          {{ t('admin.helpManage.articlesTab') }}
+          <span class="ml-1.5 px-1.5 py-0.5 text-xs rounded bg-themed-secondary">{{ total }}</span>
+        </button>
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap',
+            activeTab === 'categories'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="activeTab = 'categories'"
+        >
+          {{ t('admin.helpManage.categoriesTab') }}
+          <span class="ml-1.5 px-1.5 py-0.5 text-xs rounded bg-themed-secondary">{{ categories.length }}</span>
+        </button>
+      </nav>
+    </div>
+
+    <!-- Categories Tab -->
+    <div v-if="activeTab === 'categories'" class="space-y-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div 
+          v-for="cat in categories" 
+          :key="cat.id"
+          class="card p-4 hover:border-themed-secondary transition-colors"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div 
+                class="w-4 h-4 rounded-full" 
+                :style="{ backgroundColor: cat.color }"
+              ></div>
+              <div>
+                <div class="text-themed font-medium">{{ cat.name }}</div>
+                <div class="text-xs text-themed-muted font-mono">{{ cat.id }}</div>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button class="btn-ghost btn-sm" @click="openEditCategory(cat)">{{ t('common.edit') }}</button>
+              <button class="btn-ghost btn-sm text-error" @click="deleteCategory(cat)">{{ t('common.delete') }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div v-if="categories.length === 0" class="card p-8 text-center text-themed-muted">
+        {{ t('admin.helpManage.noCategories') }}
+      </div>
+    </div>
+
+    <!-- Article List -->
+    <div v-if="activeTab === 'articles' && loading" class="card p-8 text-center text-themed-muted">
+      <svg class="w-6 h-6 animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      <p class="mt-2">{{ t('common.loading') }}</p>
+    </div>
+    
+    <div v-else-if="activeTab === 'articles' && articles.length === 0" class="card p-8 text-center">
+      <div class="text-themed-muted text-sm mb-4">{{ t('admin.helpManage.noArticles') }}</div>
+      <button class="btn-secondary btn-sm" @click="openCreate">{{ t('admin.helpManage.createFirst') }}</button>
+    </div>
+
+    <div v-else-if="activeTab === 'articles'" class="space-y-4">
+      <div class="card overflow-x-auto">
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-[800px]">
+            <thead class="bg-themed-tertiary border-b border-themed">
+              <tr>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.helpManage.articleTitleCol') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.helpManage.categoryCol') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.helpManage.statusCol') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.helpManage.updatedAtCol') }}</th>
+                <th class="text-right text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.helpManage.actionsCol') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-themed">
+              <tr v-for="article in articles" :key="article.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="text-themed font-medium">{{ article.title }}</div>
+                  <div class="text-xs text-themed-muted font-mono">/help/{{ article.slug }}</div>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex items-center gap-2">
+                    <span 
+                      class="w-2.5 h-2.5 rounded-full flex-shrink-0" 
+                      :style="{ backgroundColor: getCategoryColor(article.category) }"
+                    ></span>
+                    <span class="text-sm text-themed-secondary">{{ getCategoryLabel(article.category) }}</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span :class="['badge whitespace-nowrap', article.published ? 'badge-success' : 'badge-default']">
+                    {{ article.published ? t('admin.helpManage.published') : t('admin.helpManage.draft') }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">{{ formatDate(article.updated_at) }}</td>
+                <td class="px-4 py-3 text-right whitespace-nowrap">
+                  <div class="flex items-center justify-end gap-2">
+                    <button class="btn-ghost btn-sm" @click="openEdit(article)">{{ t('common.edit') }}</button>
+                    <button class="btn-ghost btn-sm" @click="togglePublished(article)">
+                      {{ article.published ? t('admin.helpManage.hide') : t('admin.helpManage.publish') }}
+                    </button>
+                    <button class="btn-ghost btn-sm text-error" @click="deleteArticle(article)">{{ t('common.delete') }}</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="totalPages > 1" class="flex items-center justify-between text-sm text-themed-muted">
+        <span>{{ t('admin.helpManage.totalArticles', { count: total }) }}</span>
+        <div class="flex items-center gap-2">
+          <button :disabled="page <= 1" class="btn-ghost btn-sm" @click="page--; loadArticles()">{{ t('admin.helpManage.prevPage') }}</button>
+          <span>{{ page }} / {{ totalPages }}</span>
+          <button :disabled="page >= totalPages" class="btn-ghost btn-sm" @click="page++; loadArticles()">{{ t('admin.helpManage.nextPage') }}</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Editor Modal -->
+    <Teleport to="body">
+      <div v-if="showEditor" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="showEditor = false"></div>
+        
+        <div class="relative w-full max-w-5xl h-[90vh] bg-themed border border-themed rounded-xl shadow-2xl animate-fade-in flex flex-col">
+          <!-- Header -->
+          <div class="flex items-center justify-between px-6 py-4 border-b border-themed">
+            <h3 class="text-lg font-semibold text-themed">
+              {{ editorMode === 'create' ? t('admin.helpManage.createArticle') : t('admin.helpManage.editArticle') }}
+            </h3>
+            <div class="flex items-center gap-3">
+              <button
+                :class="['btn-ghost btn-sm', previewMode && 'bg-themed-secondary']"
+                @click="previewMode = !previewMode"
+              >
+                {{ previewMode ? t('common.edit') : t('admin.helpManage.preview') }}
+              </button>
+              <button class="text-themed-muted hover:text-themed" @click="showEditor = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          
+          <!-- Content -->
+          <div class="flex-1 overflow-hidden flex">
+            <!-- Left: Form -->
+            <div v-if="!previewMode" class="flex-1 overflow-y-auto p-6 space-y-4">
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.articleTitle') }} *</label>
+                  <input 
+                    v-model="form.title" 
+                    type="text"
+                    class="input" 
+                    :placeholder="t('admin.helpManage.titlePlaceholder')" 
+                    @blur="generateSlug"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.urlSlug') }} *</label>
+                  <input 
+                    v-model="form.slug" 
+                    type="text" 
+                    class="input font-mono" 
+                    :placeholder="t('admin.helpManage.urlSlugPlaceholder')"
+                  />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.helpManage.urlSlugHint') }}</p>
+                </div>
+              </div>
+              
+              <div class="grid grid-cols-3 gap-4">
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.category') }}</label>
+                  <select v-model="form.category" class="input">
+                    <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.sortOrder') }}</label>
+                  <input v-model.number="form.sortOrder" type="number" class="input" min="0" />
+                </div>
+                <div class="flex items-end">
+                  <label class="flex items-center gap-3 cursor-pointer select-none">
+                    <div class="relative">
+                      <input 
+                        v-model="form.published" 
+                        type="checkbox" 
+                        class="sr-only peer"
+                      />
+                      <div 
+                        class="w-10 h-6 rounded-full transition-colors peer-checked:bg-green-500"
+                        :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-300'"
+                      ></div>
+                      <div 
+                        class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4"
+                      ></div>
+                    </div>
+                    <span class="text-sm text-themed-secondary">
+                      {{ form.published ? t('admin.helpManage.published') : t('admin.helpManage.draft') }}
+                    </span>
+                  </label>
+                  
+                  <!-- 置顶开关 -->
+                  <label class="flex items-center gap-3 cursor-pointer select-none ml-4">
+                    <div class="relative">
+                      <input
+                        v-model="form.pinned"
+                        type="checkbox"
+                        class="sr-only peer"
+                      />
+                      <div 
+                        class="w-10 h-6 rounded-full transition-colors peer-checked:bg-blue-500"
+                        :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-300'"
+                      ></div>
+                      <div 
+                        class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4"
+                      ></div>
+                    </div>
+                    <span class="text-sm text-themed-secondary">
+                      {{ form.pinned ? t('admin.helpManage.pinned') : t('admin.helpManage.notPinned') }}
+                    </span>
+                  </label>
+                </div>
+              </div>
+              
+              <div class="flex-1">
+                <div class="flex items-center justify-between mb-1.5">
+                  <label class="block text-sm text-themed-secondary">{{ t('admin.helpManage.contentMarkdown') }} *</label>
+                  <button 
+                    type="button"
+                    class="text-xs text-themed-muted hover:text-themed transition-colors"
+                    @click="showMarkdownHelp = !showMarkdownHelp"
+                  >
+                    {{ showMarkdownHelp ? t('admin.helpManage.hideMarkdownHelp') : t('admin.helpManage.showMarkdownHelp') }}
+                  </button>
+                </div>
+                
+                <!-- Markdown 语法帮助 -->
+                <div v-if="showMarkdownHelp" class="mb-3 p-3 bg-themed-tertiary rounded-lg text-xs text-themed-secondary space-y-2">
+                  <div class="grid grid-cols-2 gap-x-4 gap-y-1">
+                    <div><code class="bg-themed-secondary px-1 rounded"># Title</code> {{ t('admin.helpManage.markdownHeading1') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">## Title</code> {{ t('admin.helpManage.markdownHeading2') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">**bold**</code> {{ t('admin.helpManage.markdownBold') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">*italic*</code> {{ t('admin.helpManage.markdownItalic') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">[link](url)</code> {{ t('admin.helpManage.markdownLink') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">![image](url)</code> {{ t('admin.helpManage.markdownImage') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">- item</code> {{ t('admin.helpManage.markdownUnorderedList') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">1. item</code> {{ t('admin.helpManage.markdownOrderedList') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">`code`</code> {{ t('admin.helpManage.markdownInlineCode') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">```code```</code> {{ t('admin.helpManage.markdownCodeBlock') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">> quote</code> {{ t('admin.helpManage.markdownQuote') }}</div>
+                    <div><code class="bg-themed-secondary px-1 rounded">---</code> {{ t('admin.helpManage.markdownHr') }}</div>
+                  </div>
+                  <div class="pt-2 border-t border-themed">
+                    <div class="font-medium text-themed mb-1">{{ t('admin.helpManage.customAlerts') }}</div>
+                    <div class="grid grid-cols-2 gap-x-4 gap-y-1">
+                      <div><code class="bg-themed-secondary px-1 rounded">?{info}[text]</code> {{ t('admin.helpManage.alertInfo') }}</div>
+                      <div><code class="bg-themed-secondary px-1 rounded">?{success}[text]</code> {{ t('admin.helpManage.alertSuccess') }}</div>
+                      <div><code class="bg-themed-secondary px-1 rounded">?{warning}[text]</code> {{ t('admin.helpManage.alertWarning') }}</div>
+                      <div><code class="bg-themed-secondary px-1 rounded">?{danger}[text]</code> {{ t('admin.helpManage.alertDanger') }}</div>
+                      <div><code class="bg-themed-secondary px-1 rounded">?{note}[text]</code> {{ t('admin.helpManage.alertNote') }}</div>
+                    </div>
+                  </div>
+                </div>
+                
+                <textarea 
+                  v-model="form.content" 
+                  class="input w-full font-mono text-sm resize-none"
+                  style="height: calc(100vh - 400px); min-height: 300px;"
+                  placeholder="# 标题&#10;&#10;正文内容...&#10;&#10;```javascript&#10;// 代码示例&#10;console.log('Hello')&#10;```&#10;&#10;?{info}[提示信息]&#10;?{success}[成功信息]&#10;?{warning}[警告信息]&#10;?{danger}[危险信息]"
+                ></textarea>
+              </div>
+              
+              <div v-if="formError" class="text-sm text-error">{{ formError }}</div>
+            </div>
+            
+            <!-- Right: Preview -->
+            <div v-else class="flex-1 overflow-y-auto p-6">
+              <div class="prose prose-invert max-w-none">
+                <h1 class="text-themed">{{ form.title || t('admin.helpManage.noTitle') }}</h1>
+                <div class="markdown-body" v-html="previewHtml"></div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Footer -->
+          <div class="flex justify-end gap-3 px-6 py-4 border-t border-themed">
+            <button class="btn-secondary" @click="showEditor = false">{{ t('common.cancel') }}</button>
+            <button :disabled="formLoading" class="btn-primary" @click="saveArticle">
+              {{ formLoading ? t('common.loading') : t('common.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Category Modal -->
+    <Teleport to="body">
+      <div v-if="showCategoryModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="showCategoryModal = false"></div>
+        
+        <div class="relative w-full max-w-md bg-themed border border-themed rounded-xl shadow-2xl animate-fade-in">
+          <div class="flex items-center justify-between px-6 py-4 border-b border-themed">
+            <h3 class="text-lg font-semibold text-themed">
+              {{ categoryMode === 'create' ? t('admin.helpManage.addCategory') : t('common.edit') }}
+            </h3>
+            <button class="text-themed-muted hover:text-themed" @click="showCategoryModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="p-6 space-y-4">
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.categoryId') }} *</label>
+              <input 
+                v-model="categoryForm.id" 
+                type="text" 
+                class="input font-mono" 
+                placeholder="getting-started"
+                :disabled="categoryMode === 'edit'"
+              />
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.helpManage.categoryIdHint') }}</p>
+            </div>
+            
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.categoryName') }} *</label>
+              <input 
+                v-model="categoryForm.name" 
+                type="text" 
+                class="input" 
+                placeholder="Getting Started"
+              />
+            </div>
+            
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.helpManage.categoryColor') }}</label>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  v-for="color in categoryColors"
+                  :key="color"
+                  class="w-8 h-8 rounded-lg transition-all"
+                  :class="categoryForm.color === color ? 'ring-2 ring-white ring-offset-2 ring-offset-gray-900' : ''"
+                  :style="{ backgroundColor: color }"
+                  @click="categoryForm.color = color"
+                ></button>
+              </div>
+            </div>
+            
+            <div v-if="categoryError" class="text-sm text-error">{{ categoryError }}</div>
+          </div>
+          
+          <div class="flex justify-end gap-3 px-6 py-4 border-t border-themed">
+            <button class="btn-secondary" @click="showCategoryModal = false">{{ t('common.cancel') }}</button>
+            <button class="btn-primary" @click="saveCategory">{{ t('common.save') }}</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style>
+/* ============ Markdown 基础样式 ============ */
+.markdown-body {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* 标题 */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  color: var(--text-primary);
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.markdown-body h1 { font-size: 1.75em; }
+.markdown-body h2 { 
+  font-size: 1.5em; 
+  border-bottom: 1px solid var(--border-color); 
+  padding-bottom: 0.3em; 
+}
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1.1em; }
+
+/* 段落 */
+.markdown-body p {
+  margin: 1em 0;
+}
+
+/* 链接 */
+.markdown-body a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+/* 图片 */
+.markdown-body img {
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+.markdown-body figure {
+  margin: 1.5em 0;
+}
+
+/* 列表 */
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.5em;
+  margin: 1em 0;
+}
+
+.markdown-body ul {
+  list-style-type: disc;
+}
+
+.markdown-body ol {
+  list-style-type: decimal;
+}
+
+.markdown-body li {
+  margin: 0.5em 0;
+}
+
+.markdown-body li > ul,
+.markdown-body li > ol {
+  margin: 0.25em 0;
+}
+
+/* 任务列表 */
+.markdown-body ul:has(li > span:first-child > svg) {
+  list-style: none;
+  padding-left: 0;
+}
+
+/* 行内代码 */
+.markdown-body code {
+  background: var(--bg-tertiary);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+/* 代码块 */
+.markdown-body pre {
+  background: var(--bg-tertiary);
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1em 0;
+  border: 1px solid var(--border-color);
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+/* 引用块 */
+.markdown-body blockquote {
+  border-left: 4px solid var(--accent);
+  padding-left: 1em;
+  margin: 1em 0;
+  color: var(--text-secondary);
+}
+
+.markdown-body blockquote p {
+  margin: 0.5em 0;
+}
+
+/* 表格 */
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  font-size: 0.9em;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid var(--border-color);
+  padding: 0.6em 1em;
+  text-align: left;
+}
+
+.markdown-body th {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.markdown-body tr:hover td {
+  background: var(--bg-secondary);
+}
+
+/* 水平线 */
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: 2em 0;
+}
+
+/* 强调 */
+.markdown-body strong {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* ============ 自定义 Alert 样式 ============ */
+.md-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 0.5rem;
+  border-width: 1px;
+}
+
+.md-alert svg {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+.md-alert > div {
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Alert 颜色变体 - 暗色主题 */
+.dark .md-alert-info {
+  background-color: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.dark .md-alert-info svg,
+.dark .md-alert-info > div {
+  color: #60a5fa;
+}
+
+.dark .md-alert-success {
+  background-color: rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.dark .md-alert-success svg,
+.dark .md-alert-success > div {
+  color: #4ade80;
+}
+
+.dark .md-alert-warning {
+  background-color: rgba(234, 179, 8, 0.15);
+  border-color: rgba(234, 179, 8, 0.3);
+}
+.dark .md-alert-warning svg,
+.dark .md-alert-warning > div {
+  color: #facc15;
+}
+
+.dark .md-alert-danger {
+  background-color: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.dark .md-alert-danger svg,
+.dark .md-alert-danger > div {
+  color: #f87171;
+}
+
+.dark .md-alert-note {
+  background-color: rgba(107, 114, 128, 0.15);
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.dark .md-alert-note svg,
+.dark .md-alert-note > div {
+  color: #9ca3af;
+}
+
+/* Alert 颜色变体 - 亮色主题 */
+.light .md-alert-info {
+  background-color: #eff6ff;
+  border-color: rgba(59, 130, 246, 0.3);
+}
+.light .md-alert-info svg,
+.light .md-alert-info > div {
+  color: #2563eb;
+}
+
+.light .md-alert-success {
+  background-color: #f0fdf4;
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.light .md-alert-success svg,
+.light .md-alert-success > div {
+  color: #16a34a;
+}
+
+.light .md-alert-warning {
+  background-color: #fefce8;
+  border-color: rgba(234, 179, 8, 0.3);
+}
+.light .md-alert-warning svg,
+.light .md-alert-warning > div {
+  color: #ca8a04;
+}
+
+.light .md-alert-danger {
+  background-color: #fef2f2;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.light .md-alert-danger svg,
+.light .md-alert-danger > div {
+  color: #dc2626;
+}
+
+.light .md-alert-note {
+  background-color: #f9fafb;
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.light .md-alert-note svg,
+.light .md-alert-note > div {
+  color: #4b5563;
+}
+
+/* ============ 代码高亮主题适配 ============ */
+/* 暗色主题代码高亮 */
+.dark .markdown-body pre {
+  background: #0d1117;
+  border-color: #30363d;
+}
+
+.dark .markdown-body .hljs {
+  color: #c9d1d9;
+  background: transparent;
+}
+
+.dark .markdown-body .hljs-keyword,
+.dark .markdown-body .hljs-selector-tag,
+.dark .markdown-body .hljs-title {
+  color: #ff7b72;
+}
+
+.dark .markdown-body .hljs-string,
+.dark .markdown-body .hljs-attr {
+  color: #a5d6ff;
+}
+
+.dark .markdown-body .hljs-comment {
+  color: #8b949e;
+}
+
+.dark .markdown-body .hljs-number,
+.dark .markdown-body .hljs-literal {
+  color: #79c0ff;
+}
+
+.dark .markdown-body .hljs-function,
+.dark .markdown-body .hljs-built_in {
+  color: #d2a8ff;
+}
+
+/* 亮色主题代码高亮 */
+.light .markdown-body pre {
+  background: #f6f8fa;
+  border-color: #d0d7de;
+}
+
+.light .markdown-body .hljs {
+  color: #24292f;
+  background: transparent;
+}
+
+.light .markdown-body .hljs-keyword,
+.light .markdown-body .hljs-selector-tag,
+.light .markdown-body .hljs-title {
+  color: #cf222e;
+}
+
+.light .markdown-body .hljs-string,
+.light .markdown-body .hljs-attr {
+  color: #0a3069;
+}
+
+.light .markdown-body .hljs-comment {
+  color: #6e7781;
+}
+
+.light .markdown-body .hljs-number,
+.light .markdown-body .hljs-literal {
+  color: #0550ae;
+}
+
+.light .markdown-body .hljs-function,
+.light .markdown-body .hljs-built_in {
+  color: #8250df;
+}
+</style>
+
diff --git a/client/src/views/admin/HostingView.vue b/client/src/views/admin/HostingView.vue
new file mode 100644
index 0000000..cdcae4c
--- /dev/null
+++ b/client/src/views/admin/HostingView.vue
@@ -0,0 +1,635 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import VipLevelRulesEditor from '@/components/admin/VipLevelRulesEditor.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { getVipBadgeInlineStyle, normalizeVipBadgeStyle } from '@/utils/vipBadge'
+
+type HostingOwnersResponse = Awaited<ReturnType<typeof api.admin.getHostingOwners>>
+type HostingOwner = HostingOwnersResponse['owners'][number]
+type HostingZonesResponse = Awaited<ReturnType<typeof api.admin.getHostingZones>>
+type HostingZone = HostingZonesResponse['zones'][number]
+type HostingOwnerSortBy = 'vipLevel' | 'hostingBalance' | 'frozenBalance' | 'totalIncome' | 'hostCount' | 'packageCount' | 'instanceCount'
+type SortOrder = 'asc' | 'desc'
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+const activeTab = ref<'owners' | 'zones' | 'hostingVipLevels'>('owners')
+const owners = ref<HostingOwner[]>([])
+const zones = ref<HostingZone[]>([])
+const summary = ref<HostingOwnersResponse['summary'] | null>(null)
+const loading = ref(true)
+const zonesLoading = ref(false)
+const creatingZone = ref(false)
+const deletingZoneId = ref<number | null>(null)
+const search = ref('')
+const zoneOwnerSearch = ref('')
+const page = ref(1)
+const pageSize = ref(50)
+const total = ref(0)
+const totalPages = ref(1)
+const sortBy = ref<HostingOwnerSortBy>('totalIncome')
+const sortOrder = ref<SortOrder>('desc')
+const zoneForm = ref({
+  name: '',
+  ownerId: null as number | null,
+  logoUrl: ''
+})
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+let zoneOwnerSearchTimer: ReturnType<typeof setTimeout> | null = null
+let requestSeq = 0
+let zonesRequestSeq = 0
+
+const numberFormatter = computed(() => new Intl.NumberFormat(locale.value))
+const moneyFormatter = computed(() =>
+  new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: 'CNY',
+    maximumFractionDigits: 2
+  })
+)
+const dateTimeFormatter = computed(() =>
+  new Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+)
+
+const summaryCards = computed(() => [
+  {
+    key: 'owners',
+    label: t('admin.hosting.cards.owners'),
+    value: numberFormatter.value.format(total.value),
+    caption: t('admin.hosting.cards.ownersCaption')
+  },
+  {
+    key: 'hosts',
+    label: t('admin.hosting.cards.hosts'),
+    value: numberFormatter.value.format(summary.value?.totalHosts || 0),
+    caption: t('admin.hosting.cards.hostsCaption')
+  },
+  {
+    key: 'instances',
+    label: t('admin.hosting.cards.instances'),
+    value: numberFormatter.value.format(summary.value?.totalInstances || 0),
+    caption: t('admin.hosting.cards.instancesCaption')
+  },
+  {
+    key: 'income',
+    label: t('admin.hosting.cards.totalIncome'),
+    value: formatMoney(summary.value?.totalHostingIncome || 0),
+    caption: t('admin.hosting.cards.totalIncomeCaption')
+  }
+])
+
+const sortableOwnerColumns: Array<{
+  key: HostingOwnerSortBy
+  labelKey: string
+  align: 'left' | 'right'
+}> = [
+  { key: 'vipLevel', labelKey: 'admin.hosting.owners.vipLevel', align: 'left' },
+  { key: 'hostingBalance', labelKey: 'admin.hosting.owners.hostingBalance', align: 'right' },
+  { key: 'frozenBalance', labelKey: 'admin.hosting.owners.frozenBalance', align: 'right' },
+  { key: 'totalIncome', labelKey: 'admin.hosting.owners.totalIncome', align: 'right' },
+  { key: 'hostCount', labelKey: 'admin.hosting.owners.hostCount', align: 'right' },
+  { key: 'packageCount', labelKey: 'admin.hosting.owners.packageCount', align: 'right' },
+  { key: 'instanceCount', labelKey: 'admin.hosting.owners.instanceCount', align: 'right' }
+]
+
+onMounted(() => {
+  void loadOwners()
+  void loadZones()
+})
+
+onBeforeUnmount(() => {
+  requestSeq += 1
+  zonesRequestSeq += 1
+  if (searchTimer) clearTimeout(searchTimer)
+  if (zoneOwnerSearchTimer) clearTimeout(zoneOwnerSearchTimer)
+})
+
+watch(search, () => {
+  if (activeTab.value !== 'owners') return
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    page.value = 1
+    void loadOwners()
+  }, 300)
+})
+
+watch(zoneOwnerSearch, () => {
+  if (activeTab.value !== 'zones') return
+  if (zoneOwnerSearchTimer) clearTimeout(zoneOwnerSearchTimer)
+  zoneOwnerSearchTimer = setTimeout(() => {
+    page.value = 1
+    void loadOwners()
+  }, 300)
+})
+
+const availableZoneOwners = computed(() => owners.value.filter(owner => !owner.hostingZoneId || owner.id === zoneForm.value.ownerId))
+
+async function loadOwners() {
+  const currentRequest = ++requestSeq
+  loading.value = true
+  try {
+    const response = await api.admin.getHostingOwners({
+      page: page.value,
+      pageSize: pageSize.value,
+      search: (activeTab.value === 'zones' ? zoneOwnerSearch.value.trim() : search.value.trim()) || undefined,
+      sortBy: sortBy.value,
+      sortOrder: sortOrder.value
+    })
+    if (currentRequest !== requestSeq) return
+    owners.value = response.owners || []
+    summary.value = response.summary
+    total.value = response.total || 0
+    totalPages.value = response.totalPages || 1
+  } catch (error: any) {
+    if (currentRequest !== requestSeq) return
+    toast.error(t('admin.hosting.loadFailed', { message: error?.message || t('admin.hosting.unknownError') }))
+  } finally {
+    if (currentRequest === requestSeq) {
+      loading.value = false
+    }
+  }
+}
+
+async function loadZones() {
+  const currentRequest = ++zonesRequestSeq
+  zonesLoading.value = true
+  try {
+    const response = await api.admin.getHostingZones()
+    if (currentRequest !== zonesRequestSeq) return
+    zones.value = response.zones || []
+  } catch (error: any) {
+    if (currentRequest !== zonesRequestSeq) return
+    toast.error(t('admin.hosting.zones.loadFailed', { message: error?.message || t('admin.hosting.unknownError') }))
+  } finally {
+    if (currentRequest === zonesRequestSeq) {
+      zonesLoading.value = false
+    }
+  }
+}
+
+async function switchTab(tab: 'owners' | 'zones' | 'hostingVipLevels') {
+  activeTab.value = tab
+  if (tab === 'owners') {
+    await loadOwners()
+  } else if (tab === 'zones') {
+    page.value = 1
+    await Promise.all([loadOwners(), loadZones()])
+  }
+}
+
+async function refreshActiveTab() {
+  if (activeTab.value === 'zones') {
+    await Promise.all([loadOwners(), loadZones()])
+  } else if (activeTab.value === 'owners') {
+    await loadOwners()
+  }
+}
+
+function changePage(nextPage: number) {
+  const normalizedPage = Math.min(Math.max(1, nextPage), totalPages.value)
+  if (normalizedPage === page.value) return
+  page.value = normalizedPage
+  void loadOwners()
+}
+
+function changePageSize() {
+  page.value = 1
+  void loadOwners()
+}
+
+function toggleOwnerSort(column: HostingOwnerSortBy) {
+  if (sortBy.value === column) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortBy.value = column
+    sortOrder.value = 'desc'
+  }
+  page.value = 1
+  void loadOwners()
+}
+
+function getSortAria(column: HostingOwnerSortBy): 'ascending' | 'descending' | 'none' {
+  if (sortBy.value !== column) return 'none'
+  return sortOrder.value === 'asc' ? 'ascending' : 'descending'
+}
+
+function isValidLogoUrl(value: string): boolean {
+  if (!value || value.length > 2048 || /\s/.test(value)) return false
+  try {
+    const url = new URL(value)
+    return (url.protocol === 'http:' || url.protocol === 'https:') && !!url.hostname && !url.username && !url.password
+  } catch {
+    return false
+  }
+}
+
+async function createZone() {
+  const name = zoneForm.value.name.trim()
+  const ownerId = zoneForm.value.ownerId
+  const logoUrl = zoneForm.value.logoUrl.trim()
+
+  if (!name || !ownerId || !logoUrl) {
+    toast.error(t('admin.hosting.zones.formRequired'))
+    return
+  }
+  if (!isValidLogoUrl(logoUrl)) {
+    toast.error(t('admin.hosting.zones.logoInvalid'))
+    return
+  }
+
+  creatingZone.value = true
+  try {
+    await api.admin.createHostingZone({ name, ownerId, logoUrl })
+    toast.success(t('admin.hosting.zones.createSuccess'))
+    zoneForm.value = { name: '', ownerId: null, logoUrl: '' }
+    await Promise.all([loadOwners(), loadZones()])
+  } catch (error: any) {
+    toast.error(error?.message || t('admin.hosting.zones.createFailed'))
+  } finally {
+    creatingZone.value = false
+  }
+}
+
+async function deleteZone(zone: HostingZone) {
+  if (!window.confirm(t('admin.hosting.zones.deleteConfirm', { name: zone.name }))) return
+  deletingZoneId.value = zone.id
+  try {
+    await api.admin.deleteHostingZone(zone.id)
+    toast.success(t('admin.hosting.zones.deleteSuccess'))
+    await Promise.all([loadOwners(), loadZones()])
+  } catch (error: any) {
+    toast.error(error?.message || t('admin.hosting.zones.deleteFailed'))
+  } finally {
+    deletingZoneId.value = null
+  }
+}
+
+function formatMoney(value: number): string {
+  return moneyFormatter.value.format(value || 0)
+}
+
+function formatDate(value: string): string {
+  if (!value) return '-'
+  return dateTimeFormatter.value.format(new Date(value))
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <div class="page-header flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div>
+        <h1 class="page-title">{{ t('admin.hosting.title') }}</h1>
+        <p class="text-sm text-themed-muted mt-1">{{ t('admin.hosting.description') }}</p>
+      </div>
+      <button
+        v-if="activeTab !== 'hostingVipLevels'"
+        class="btn btn-secondary self-start lg:self-auto"
+        :disabled="loading || zonesLoading"
+        @click="refreshActiveTab"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 4v5h.58m15.36 2A8 8 0 0 0 5.07 8.11M20 20v-5h-.58m0 0A8 8 0 0 1 4.06 12.03" />
+        </svg>
+        {{ t('common.refresh') }}
+      </button>
+    </div>
+
+    <div class="border-b border-themed mb-6 overflow-x-auto whitespace-nowrap">
+      <button
+        class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
+        :class="activeTab === 'owners'
+          ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('owners')"
+      >
+        {{ t('admin.hosting.tabs.owners') }}
+      </button>
+      <button
+        class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
+        :class="activeTab === 'zones'
+          ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('zones')"
+      >
+        {{ t('admin.hosting.tabs.zones') }}
+      </button>
+      <button
+        class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
+        :class="activeTab === 'hostingVipLevels'
+          ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+          : 'border-transparent text-themed-muted hover:text-themed'"
+        @click="switchTab('hostingVipLevels')"
+      >
+        {{ t('admin.hosting.tabs.hostingVipLevels') }}
+      </button>
+    </div>
+
+    <div v-if="activeTab === 'owners' && loading && owners.length === 0" class="space-y-6">
+      <SkeletonLoader type="stats" />
+      <SkeletonLoader type="table" />
+    </div>
+
+    <div v-else-if="activeTab === 'owners'" class="space-y-6">
+      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+        <div v-for="card in summaryCards" :key="card.key" class="card p-4">
+          <p class="text-sm text-themed-muted">{{ card.label }}</p>
+          <p class="mt-2 text-2xl font-semibold text-themed">{{ card.value }}</p>
+          <p class="mt-1 text-xs text-themed-faint">{{ card.caption }}</p>
+        </div>
+      </div>
+
+      <section class="card overflow-hidden">
+        <div class="p-4 border-b border-themed flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h2 class="text-base font-semibold text-themed">{{ t('admin.hosting.owners.title') }}</h2>
+            <p class="text-sm text-themed-muted mt-1">{{ t('admin.hosting.owners.description') }}</p>
+          </div>
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+            <div class="relative sm:w-72">
+              <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" />
+              </svg>
+              <input
+                v-model="search"
+                type="text"
+                class="input pl-9"
+                :placeholder="t('admin.hosting.owners.searchPlaceholder')"
+              />
+            </div>
+            <select v-model.number="pageSize" class="input sm:w-28" @change="changePageSize">
+              <option :value="20">20</option>
+              <option :value="50">50</option>
+              <option :value="100">100</option>
+            </select>
+          </div>
+        </div>
+
+        <div v-if="loading" class="p-6">
+          <SkeletonLoader type="table" />
+        </div>
+
+        <div v-else-if="owners.length === 0" class="p-12 text-center">
+          <p class="text-themed-secondary">{{ t('admin.hosting.owners.empty') }}</p>
+          <p class="text-sm text-themed-muted mt-2">{{ t('admin.hosting.owners.emptyHint') }}</p>
+        </div>
+
+        <div v-else class="overflow-x-auto">
+          <table class="w-full min-w-[1040px]">
+            <thead class="bg-themed-secondary border-b border-themed">
+              <tr>
+                <th class="text-left px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.owners.user') }}</th>
+                <th
+                  v-for="column in sortableOwnerColumns"
+                  :key="column.key"
+                  class="px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider"
+                  :class="column.align === 'right' ? 'text-right' : 'text-left'"
+                  :aria-sort="getSortAria(column.key)"
+                >
+                  <button
+                    type="button"
+                    class="inline-flex items-center gap-1 rounded px-1.5 py-1 -mx-1.5 -my-1 transition-colors hover:bg-themed-hover hover:text-themed"
+                    :class="[
+                      column.align === 'right' ? 'justify-end' : 'justify-start',
+                      sortBy === column.key ? 'text-themed' : ''
+                    ]"
+                    @click="toggleOwnerSort(column.key)"
+                  >
+                    <span>{{ t(column.labelKey) }}</span>
+                    <span class="inline-flex w-3 justify-center text-[10px] leading-none text-themed-muted">
+                      <template v-if="sortBy === column.key">{{ sortOrder === 'asc' ? '↑' : '↓' }}</template>
+                      <template v-else>↕</template>
+                    </span>
+                  </button>
+                </th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.owners.createdAt') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="owner in owners" :key="owner.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-3 min-w-0">
+                    <UserAvatar
+                      :username="owner.username"
+                      :email="owner.email"
+                      :avatar-style="owner.avatarStyle"
+                      :badge-id="owner.avatarBadgeId"
+                      :size="36"
+                    />
+                    <div class="min-w-0">
+                      <div class="flex items-center gap-2">
+                        <span class="font-medium text-themed truncate">{{ owner.username }}</span>
+                        <span class="text-xs text-themed-muted">#{{ owner.id }}</span>
+                      </div>
+                      <div class="text-xs text-themed-muted truncate">{{ owner.email || t('admin.hosting.owners.noEmail') }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span
+                    class="badge border"
+                    :class="owner.vipLevel > 0 ? '' : 'badge-default'"
+                    :style="owner.vipLevel > 0 ? getVipBadgeInlineStyle(normalizeVipBadgeStyle(owner.vipBadgeStyle, owner.vipLevel)) : undefined"
+                  >
+                    VIP {{ owner.vipLevel }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-right font-mono text-sm text-themed whitespace-nowrap">
+                  {{ formatMoney(owner.hostingBalance.available) }}
+                </td>
+                <td class="px-4 py-3 text-right font-mono text-sm text-amber-600 dark:text-amber-400 whitespace-nowrap">
+                  {{ formatMoney(owner.hostingBalance.frozen) }}
+                </td>
+                <td class="px-4 py-3 text-right font-mono text-sm text-emerald-600 dark:text-emerald-400 whitespace-nowrap">
+                  {{ formatMoney(owner.hostingBalance.historicalTotal) }}
+                </td>
+                <td class="px-4 py-3 text-right text-sm text-themed whitespace-nowrap">{{ numberFormatter.format(owner.hostCount) }}</td>
+                <td class="px-4 py-3 text-right text-sm text-themed whitespace-nowrap">{{ numberFormatter.format(owner.listedPackageCount) }}</td>
+                <td class="px-4 py-3 text-right text-sm text-themed whitespace-nowrap">{{ numberFormatter.format(owner.instanceCount) }}</td>
+                <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">{{ formatDate(owner.createdAt) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="px-4 py-3 border-t border-themed flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <span class="text-sm text-themed-muted">
+            {{ t('common.total') }} {{ numberFormatter.format(total) }} {{ t('common.items') }}
+          </span>
+          <div class="flex items-center gap-2">
+            <button class="btn btn-ghost btn-sm" :disabled="page <= 1" @click="changePage(page - 1)">
+              {{ t('common.prevPage') }}
+            </button>
+            <span class="text-sm text-themed-muted">{{ page }} / {{ totalPages }}</span>
+            <button class="btn btn-ghost btn-sm" :disabled="page >= totalPages" @click="changePage(page + 1)">
+              {{ t('common.nextPage') }}
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div v-else-if="activeTab === 'zones'" class="space-y-6">
+      <section class="card p-4">
+        <div class="mb-4">
+          <h2 class="text-base font-semibold text-themed">{{ t('admin.hosting.zones.createTitle') }}</h2>
+          <p class="text-sm text-themed-muted mt-1">{{ t('admin.hosting.zones.createDescription') }}</p>
+        </div>
+
+        <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1fr)_320px]">
+          <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <div>
+              <label class="block text-sm font-medium text-themed mb-2">{{ t('admin.hosting.zones.name') }}</label>
+              <input
+                v-model="zoneForm.name"
+                type="text"
+                maxlength="40"
+                class="input"
+                :placeholder="t('admin.hosting.zones.namePlaceholder')"
+              />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-themed mb-2">{{ t('admin.hosting.zones.logo') }}</label>
+              <input
+                v-model.trim="zoneForm.logoUrl"
+                type="url"
+                maxlength="2048"
+                class="input"
+                :placeholder="t('admin.hosting.zones.logoPlaceholder')"
+              />
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosting.zones.logoHint') }}</p>
+            </div>
+
+            <div class="lg:col-span-2">
+              <label class="block text-sm font-medium text-themed mb-2">{{ t('admin.hosting.zones.owner') }}</label>
+              <div class="grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                <input
+                  v-model="zoneOwnerSearch"
+                  type="text"
+                  class="input"
+                  :placeholder="t('admin.hosting.zones.ownerSearchPlaceholder')"
+                />
+                <select v-model.number="zoneForm.ownerId" class="input">
+                  <option value="">{{ t('admin.hosting.zones.selectOwner') }}</option>
+                  <option
+                    v-for="owner in availableZoneOwners"
+                    :key="owner.id"
+                    :value="owner.id"
+                  >
+                    {{ owner.username }} #{{ owner.id }} · {{ owner.email || t('admin.hosting.owners.noEmail') }}
+                  </option>
+                </select>
+              </div>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosting.zones.ownerHint') }}</p>
+            </div>
+          </div>
+
+          <div class="rounded-md border border-themed bg-themed-secondary p-4 flex flex-col gap-4">
+            <div class="flex items-center gap-3">
+              <div class="w-14 h-14 rounded-full bg-themed-secondary border border-themed overflow-hidden flex shrink-0 items-center justify-center">
+                <img
+                  v-if="isValidLogoUrl(zoneForm.logoUrl)"
+                  :src="zoneForm.logoUrl"
+                  :alt="t('admin.hosting.zones.logoPreview')"
+                  class="w-full h-full object-cover"
+                />
+                <span v-else class="text-xs text-themed-muted">{{ t('admin.hosting.zones.noLogo') }}</span>
+              </div>
+              <div class="min-w-0">
+                <div class="text-sm font-medium text-themed truncate">
+                  {{ zoneForm.name || t('admin.hosting.zones.previewName') }}
+                </div>
+                <div class="text-xs text-themed-muted mt-1">{{ t('admin.hosting.zones.previewHint') }}</div>
+              </div>
+            </div>
+            <button class="btn btn-primary w-full justify-center" :disabled="creatingZone" @click="createZone">
+              {{ creatingZone ? t('common.processing') : t('admin.hosting.zones.create') }}
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section class="card overflow-hidden">
+        <div class="p-4 border-b border-themed flex flex-col gap-1">
+          <h2 class="text-base font-semibold text-themed">{{ t('admin.hosting.zones.title') }}</h2>
+          <p class="text-sm text-themed-muted">{{ t('admin.hosting.zones.description') }}</p>
+        </div>
+
+        <div v-if="zonesLoading" class="p-6">
+          <SkeletonLoader type="table" />
+        </div>
+
+        <div v-else-if="zones.length === 0" class="p-12 text-center">
+          <p class="text-themed-secondary">{{ t('admin.hosting.zones.empty') }}</p>
+          <p class="text-sm text-themed-muted mt-2">{{ t('admin.hosting.zones.emptyHint') }}</p>
+        </div>
+
+        <div v-else class="overflow-x-auto">
+          <table class="w-full min-w-[820px]">
+            <thead class="bg-themed-secondary border-b border-themed">
+              <tr>
+                <th class="text-left px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.zones.zone') }}</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.zones.owner') }}</th>
+                <th class="text-right px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.owners.hostCount') }}</th>
+                <th class="text-right px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.owners.packageCount') }}</th>
+                <th class="text-left px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('admin.hosting.owners.createdAt') }}</th>
+                <th class="text-right px-4 py-3 text-xs font-medium text-themed-muted uppercase tracking-wider">{{ t('common.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="zone in zones" :key="zone.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-3 min-w-0">
+                    <img :src="zone.logoUrl" :alt="zone.name" class="w-10 h-10 rounded-full object-cover border border-themed" />
+                    <div class="min-w-0">
+                      <div class="font-medium text-themed truncate">{{ zone.name }}</div>
+                      <div class="text-xs text-themed-muted">#{{ zone.id }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-3 min-w-0">
+                    <UserAvatar
+                      :username="zone.owner.username"
+                      :email="zone.owner.email"
+                      :avatar-style="zone.owner.avatarStyle"
+                      :badge-id="zone.owner.avatarBadgeId"
+                      :size="32"
+                    />
+                    <div class="min-w-0">
+                      <div class="font-medium text-themed truncate">{{ zone.owner.username }} <span class="text-xs text-themed-muted">#{{ zone.owner.id }}</span></div>
+                      <div class="text-xs text-themed-muted truncate">{{ zone.owner.email || t('admin.hosting.owners.noEmail') }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-right text-sm text-themed whitespace-nowrap">{{ numberFormatter.format(zone.hostCount) }}</td>
+                <td class="px-4 py-3 text-right text-sm text-themed whitespace-nowrap">{{ numberFormatter.format(zone.listedPackageCount) }}</td>
+                <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">{{ formatDate(zone.createdAt) }}</td>
+                <td class="px-4 py-3 text-right whitespace-nowrap">
+                  <button class="btn btn-ghost btn-sm text-red-600 dark:text-red-400" :disabled="deletingZoneId === zone.id" @click="deleteZone(zone)">
+                    {{ deletingZoneId === zone.id ? t('common.processing') : t('common.delete') }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+
+    <VipLevelRulesEditor v-else-if="activeTab === 'hostingVipLevels'" type="hosting" />
+  </div>
+</template>
diff --git a/client/src/views/admin/ImagesView.vue b/client/src/views/admin/ImagesView.vue
new file mode 100644
index 0000000..9df1e5d
--- /dev/null
+++ b/client/src/views/admin/ImagesView.vue
@@ -0,0 +1,449 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import DistroIcon from '@/components/icons/DistroIcon.vue'
+import type { SystemImage, CreateSystemImageRequest, UpdateSystemImageRequest } from '@/types/api'
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+// 状态
+const loading = ref(true)
+const saving = ref(false)
+const images = ref<SystemImage[]>([])
+const showModal = ref(false)
+const editingImage = ref<SystemImage | null>(null)
+const activeArchitecture = ref<'all' | 'x86_64' | 'aarch64'>('all')
+
+// 表单
+interface ImageForm {
+  name: string
+  remoteAlias: string
+  osType: string
+  architecture: 'x86_64' | 'aarch64'
+  instanceType: 'container' | 'vm' | 'both'
+  icon: string
+  sortOrder: number
+  hidden: boolean
+}
+
+const form = ref<ImageForm>(getDefaultForm())
+
+function getDefaultForm(): ImageForm {
+  return {
+    name: '',
+    remoteAlias: '',
+    osType: 'Linux',
+    architecture: 'x86_64',
+    instanceType: 'both',
+    icon: '',
+    sortOrder: 0,
+    hidden: false
+  }
+}
+
+// 常用图标列表
+const iconOptions = [
+  'almalinux', 'alpine', 'archlinux', 'centos', 'debian',
+  'fedora', 'kali', 'opensuse', 'oracle', 'rockylinux', 'ubuntu'
+]
+
+const architectureOptions: Array<{ value: 'x86_64' | 'aarch64'; label: string }> = [
+  { value: 'x86_64', label: 'x86_64' },
+  { value: 'aarch64', label: 'aarch64' }
+]
+
+const architectureTabs: Array<{ value: 'all' | 'x86_64' | 'aarch64'; labelKey?: string; label?: string }> = [
+  { value: 'all', labelKey: 'common.all' },
+  { value: 'x86_64', label: 'x86_64' },
+  { value: 'aarch64', label: 'aarch64' }
+]
+
+// 计算属性
+const isEditMode = computed(() => editingImage.value !== null)
+const modalTitle = computed(() => isEditMode.value 
+  ? t('admin.images.edit') 
+  : t('admin.images.create')
+)
+const filteredImages = computed(() => {
+  if (activeArchitecture.value === 'all') {
+    return images.value
+  }
+  return images.value.filter(image => image.architecture === activeArchitecture.value)
+})
+
+function getArchitectureCount(architecture: 'all' | 'x86_64' | 'aarch64'): number {
+  if (architecture === 'all') {
+    return images.value.length
+  }
+  return images.value.filter(image => image.architecture === architecture).length
+}
+
+function getArchitectureBadgeClass(architecture?: string): string {
+  if (architecture === 'aarch64') {
+    return 'bg-emerald-100 text-emerald-800 ring-1 ring-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:ring-emerald-800/70'
+  }
+  return 'bg-sky-100 text-sky-800 ring-1 ring-sky-200 dark:bg-sky-950/60 dark:text-sky-300 dark:ring-sky-800/70'
+}
+
+function getInstanceTypeBadgeClass(instanceType?: string): string {
+  if (instanceType === 'container') {
+    return 'bg-cyan-100 text-cyan-800 ring-1 ring-cyan-200 dark:bg-cyan-950/60 dark:text-cyan-300 dark:ring-cyan-800/70'
+  }
+  if (instanceType === 'vm') {
+    return 'bg-violet-100 text-violet-800 ring-1 ring-violet-200 dark:bg-violet-950/60 dark:text-violet-300 dark:ring-violet-800/70'
+  }
+  return 'bg-amber-100 text-amber-800 ring-1 ring-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:ring-amber-800/70'
+}
+
+// 加载镜像列表
+async function loadImages(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.images.list()
+    images.value = response.images || []
+  } catch (err: any) {
+    toast.error(err.message || t('admin.images.loadFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+// 打开创建弹窗
+function openCreateModal(): void {
+  editingImage.value = null
+  const defaultForm = getDefaultForm()
+  if (activeArchitecture.value !== 'all') {
+    defaultForm.architecture = activeArchitecture.value
+  }
+  form.value = defaultForm
+  showModal.value = true
+}
+
+// 打开编辑弹窗
+function openEditModal(image: SystemImage): void {
+  editingImage.value = image
+  form.value = {
+    name: image.name,
+    remoteAlias: image.remoteAlias,
+    osType: image.osType || 'Linux',
+    architecture: image.architecture || 'x86_64',
+    instanceType: image.instanceType || 'both',
+    icon: image.icon,
+    sortOrder: image.sortOrder || 0,
+    hidden: image.hidden || false
+  }
+  showModal.value = true
+}
+
+// 保存镜像
+async function saveImage(): Promise<void> {
+  if (!form.value.name || !form.value.remoteAlias || !form.value.icon) {
+    toast.error(t('admin.images.validation.requiredFields'))
+    return
+  }
+
+  saving.value = true
+  try {
+    if (isEditMode.value && editingImage.value) {
+      const data: UpdateSystemImageRequest = {
+        name: form.value.name,
+        remoteAlias: form.value.remoteAlias,
+        osType: form.value.osType,
+        architecture: form.value.architecture,
+        instanceType: form.value.instanceType,
+        icon: form.value.icon,
+        sortOrder: form.value.sortOrder,
+        hidden: form.value.hidden
+      }
+      await api.images.update(editingImage.value.id, data)
+      toast.success(t('admin.images.updateSuccess'))
+    } else {
+      const data: CreateSystemImageRequest = {
+        name: form.value.name,
+        remoteAlias: form.value.remoteAlias,
+        osType: form.value.osType,
+        architecture: form.value.architecture,
+        instanceType: form.value.instanceType,
+        icon: form.value.icon,
+        sortOrder: form.value.sortOrder,
+        hidden: form.value.hidden
+      }
+      await api.images.create(data)
+      toast.success(t('admin.images.createSuccess'))
+    }
+    showModal.value = false
+    await loadImages()
+  } catch (err: any) {
+    toast.error(err.message || t('admin.images.saveFailed'))
+  } finally {
+    saving.value = false
+  }
+}
+
+// 切换隐藏状态
+async function toggleHidden(image: SystemImage): Promise<void> {
+  try {
+    await api.images.update(image.id, { hidden: !image.hidden })
+    toast.success(image.hidden ? t('admin.images.shown') : t('admin.images.hidden'))
+    await loadImages()
+  } catch (err: any) {
+    toast.error(err.message)
+  }
+}
+
+// 删除镜像
+async function deleteImage(image: SystemImage): Promise<void> {
+  if (!confirm(t('admin.images.confirmDelete', { name: image.name }))) return
+  
+  try {
+    await api.images.delete(image.id)
+    toast.success(t('admin.images.deleteSuccess'))
+    await loadImages()
+  } catch (err: any) {
+    toast.error(err.message || t('admin.images.deleteFailed'))
+  }
+}
+
+onMounted(() => {
+  loadImages()
+})
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- Header -->
+    <div class="page-header flex items-center justify-between">
+      <div>
+        <h1 class="page-title">{{ t('admin.images.title') }}</h1>
+        <p class="page-description">{{ t('admin.images.description') }}</p>
+      </div>
+      <button class="btn-primary whitespace-nowrap" @click="openCreateModal">
+        <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('admin.images.create') }}
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="card p-12 text-center">
+      <div class="loading-spinner w-8 h-8 mx-auto"></div>
+      <p class="text-themed-muted mt-4">{{ t('common.loading') }}</p>
+    </div>
+
+    <template v-else>
+      <!-- Architecture Tabs -->
+      <div class="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700">
+        <button
+          v-for="tab in architectureTabs"
+          :key="tab.value"
+          type="button"
+          class="shrink-0 px-4 py-3 text-sm font-medium border-b-2 transition-colors"
+          :class="activeArchitecture === tab.value
+            ? 'border-black dark:border-white text-gray-900 dark:text-white'
+            : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
+          @click="activeArchitecture = tab.value"
+        >
+          <span>{{ tab.labelKey ? t(tab.labelKey) : tab.label }}</span>
+          <span
+            class="ml-2 rounded-full px-2 py-0.5 text-xs"
+            :class="activeArchitecture === tab.value
+              ? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300'"
+          >
+            {{ getArchitectureCount(tab.value) }}
+          </span>
+        </button>
+      </div>
+
+      <!-- Images Table -->
+      <div class="card overflow-x-auto">
+        <table class="table-auto w-full min-w-[640px]">
+          <thead>
+            <tr :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'">
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.icon') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.name') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.remoteAlias') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.architecture') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.instanceType') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.sortOrder') }}</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-themed-muted uppercase">{{ t('admin.images.fields.status') }}</th>
+              <th class="px-4 py-3 text-right text-xs font-medium text-themed-muted uppercase">{{ t('common.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y" :class="themeStore.isDark ? 'divide-gray-800' : 'divide-gray-100'">
+            <tr
+              v-for="image in filteredImages"
+              :key="image.id"
+              :class="[
+                'transition-colors',
+                image.hidden ? (themeStore.isDark ? 'bg-gray-900/50 opacity-60' : 'bg-gray-50/50 opacity-60') : '',
+                themeStore.isDark ? 'hover:bg-gray-800/50' : 'hover:bg-gray-50'
+              ]"
+            >
+              <td class="px-4 py-3">
+                <DistroIcon :distro="image.icon" :size="32" />
+              </td>
+              <td class="px-4 py-3 text-sm text-themed">{{ image.name }}</td>
+              <td class="px-4 py-3 text-sm text-themed-muted font-mono text-xs">{{ image.remoteAlias }}</td>
+              <td class="px-4 py-3">
+                <span
+                  class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                  :class="getArchitectureBadgeClass(image.architecture)"
+                >
+                  {{ image.architecture }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <span
+                  class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                  :class="getInstanceTypeBadgeClass(image.instanceType)"
+                >
+                  {{ image.instanceType === 'container' ? t('admin.images.typeContainer') : image.instanceType === 'vm' ? t('admin.images.typeVm') : t('admin.images.typeBoth') }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed-muted">{{ image.sortOrder }}</td>
+              <td class="px-4 py-3">
+                <span
+                  class="px-2 py-1 text-xs rounded-full"
+                  :class="image.hidden
+                    ? (themeStore.isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-600')
+                    : (themeStore.isDark ? 'bg-green-900/50 text-green-400' : 'bg-green-100 text-green-700')"
+                >
+                  {{ image.hidden ? t('admin.images.statusHidden') : t('admin.images.statusVisible') }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-right">
+                <div class="flex items-center justify-end gap-2">
+                  <button
+                    class="p-1.5 rounded transition-colors"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100'"
+                    :title="image.hidden ? t('admin.images.show') : t('admin.images.hide')"
+                    @click="toggleHidden(image)"
+                  >
+                    <svg v-if="image.hidden" class="w-4 h-4 text-themed-muted" 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 text-themed-muted" 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>
+                  <button
+                    class="p-1.5 rounded transition-colors"
+                    :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100'"
+                    :title="t('common.edit')"
+                    @click="openEditModal(image)"
+                  >
+                    <svg class="w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                    </svg>
+                  </button>
+                  <button
+                    class="p-1.5 rounded transition-colors"
+                    :class="themeStore.isDark ? 'hover:bg-red-900/50' : 'hover:bg-red-50'"
+                    :title="t('common.delete')"
+                    @click="deleteImage(image)"
+                  >
+                    <svg class="w-4 h-4 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div v-if="filteredImages.length === 0" class="p-12 text-center text-themed-muted">
+          {{ images.length === 0 ? t('admin.images.noImages') : t('admin.images.noImagesForArchitecture') }}
+        </div>
+      </div>
+    </template>
+
+    <!-- Modal -->
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="absolute inset-0 bg-black/50" @click="showModal = false"></div>
+        <div 
+          class="relative w-full max-w-lg mx-4 rounded-lg shadow-xl"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+        >
+          <div class="p-6">
+            <h3 class="text-lg font-medium mb-4 text-themed">{{ modalTitle }}</h3>
+            
+            <form class="space-y-4" @submit.prevent="saveImage">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.name') }} *</label>
+                <input v-model="form.name" type="text" class="input" :placeholder="t('admin.images.placeholder.name')" />
+              </div>
+              
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.remoteAlias') }} *</label>
+                <input v-model="form.remoteAlias" type="text" class="input font-mono" :placeholder="t('admin.images.placeholder.remoteAlias')" />
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.images.hint.remoteAlias') }}</p>
+              </div>
+              
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.osType') }}</label>
+                  <input v-model="form.osType" type="text" class="input" />
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.architecture') }}</label>
+                  <select v-model="form.architecture" class="input">
+                    <option v-for="option in architectureOptions" :key="option.value" :value="option.value">
+                      {{ option.label }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+              
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.instanceType') }}</label>
+                <select v-model="form.instanceType" class="input">
+                  <option value="both">{{ t('admin.images.typeBoth') }}</option>
+                  <option value="container">{{ t('admin.images.typeContainer') }}</option>
+                  <option value="vm">{{ t('admin.images.typeVm') }}</option>
+                </select>
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.images.hint.instanceType') }}</p>
+              </div>
+              
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.icon') }} *</label>
+                <select v-model="form.icon" class="input">
+                  <option value="">{{ t('admin.images.placeholder.icon') }}</option>
+                  <option v-for="icon in iconOptions" :key="icon" :value="icon">{{ icon }}</option>
+                </select>
+              </div>
+              
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.images.fields.sortOrder') }}</label>
+                <input v-model.number="form.sortOrder" type="number" class="input" min="0" />
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.images.hint.sortOrder') }}</p>
+              </div>
+              
+              <div class="flex items-center gap-2">
+                <input :id="'hidden'" v-model="form.hidden" type="checkbox" class="w-4 h-4 rounded" />
+                <label :for="'hidden'" class="text-sm text-themed-secondary cursor-pointer">{{ t('admin.images.fields.hidden') }}</label>
+              </div>
+              
+              <div class="flex justify-end gap-3 pt-4">
+                <button type="button" class="btn-secondary" @click="showModal = false">{{ t('common.cancel') }}</button>
+                <button type="submit" class="btn-primary" :disabled="saving">
+                  <span v-if="saving" class="loading-spinner w-4 h-4 mr-2"></span>
+                  {{ isEditMode ? t('common.save') : t('common.create') }}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/OAuthConfigView.vue b/client/src/views/admin/OAuthConfigView.vue
new file mode 100644
index 0000000..4d1f87a
--- /dev/null
+++ b/client/src/views/admin/OAuthConfigView.vue
@@ -0,0 +1,348 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import type { OAuthConfig, UpdateOAuthConfigRequest } from '@/types/api'
+
+const { t } = useI18n()
+const toast = useToast()
+const themeStore = useThemeStore()
+
+const loading = ref<boolean>(true)
+interface ProviderConfig {
+  clientId: string
+  clientSecret: string
+  enabled: boolean
+  configured: boolean
+}
+type ProviderType = 'github' | 'google'
+const configs = ref<Record<ProviderType, ProviderConfig>>({
+  github: { clientId: '', clientSecret: '', enabled: false, configured: false },
+  google: { clientId: '', clientSecret: '', enabled: false, configured: false }
+})
+
+// Edit modal
+const showModal = ref<boolean>(false)
+const editProvider = ref<ProviderType | ''>('')
+const form = ref<UpdateOAuthConfigRequest>({ clientId: '', clientSecret: '', enabled: false })
+const formLoading = ref<boolean>(false)
+
+onMounted(async (): Promise<void> => {
+  await loadConfigs()
+})
+
+async function loadConfigs(): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.oauth.getConfigs()
+    const data = response as { configs?: OAuthConfig[] }
+    
+    // Reset configs
+    configs.value = {
+      github: { clientId: '', clientSecret: '', enabled: false, configured: false },
+      google: { clientId: '', clientSecret: '', enabled: false, configured: false }
+    }
+    
+    // Map response to configs
+    for (const config of data.configs || []) {
+      const provider = config.provider as ProviderType
+      if (provider && configs.value[provider]) {
+        // 后端返回 clientId（驼峰）和 enabled（布尔值）
+        const configAny = config as any
+        configs.value[provider] = {
+          clientId: configAny.clientId || config.client_id || '',
+          clientSecret: configAny.clientSecretMasked || '',
+          enabled: Boolean(configAny.enabled ?? config.enabled),
+          configured: true
+        }
+      }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function openEdit(provider: ProviderType): void {
+  editProvider.value = provider
+  const config = configs.value[provider]
+  form.value = {
+    clientId: config.clientId || '',
+    clientSecret: '',  // Always empty for security
+    enabled: config.enabled
+  }
+  showModal.value = true
+}
+
+async function saveConfig(): Promise<void> {
+  if (!form.value.clientId) {
+    toast.error(t('admin.oauth.clientId'))
+    return
+  }
+  
+  if (!editProvider.value) return
+  
+  // If already configured but no new secret provided, use a placeholder check
+  const isUpdate = configs.value[editProvider.value].configured
+  if (!isUpdate && !form.value.clientSecret) {
+    toast.error(t('admin.oauth.clientSecret'))
+    return
+  }
+  
+  formLoading.value = true
+  try {
+    await api.oauth.updateConfig(editProvider.value, {
+      clientId: form.value.clientId,
+      clientSecret: form.value.clientSecret || 'UNCHANGED',  // Backend should handle this
+      enabled: form.value.enabled
+    })
+    
+    toast.success(t('admin.oauth.saveSuccess'))
+    showModal.value = false
+    await loadConfigs()
+  } catch (err: any) {
+    toast.error(t('admin.oauth.saveFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    formLoading.value = false
+  }
+}
+
+async function deleteConfig(provider: ProviderType): Promise<void> {
+  if (!confirm(`Delete ${provider.toUpperCase()} config?`)) return
+  
+  try {
+    await api.oauth.deleteConfig(provider)
+    toast.success(t('common.success'))
+    await loadConfigs()
+  } catch (err: any) {
+    toast.error(err?.message || String(err))
+  }
+}
+
+// Provider info with reactive icons based on theme
+interface ProviderInfo {
+  name: string
+  icon: string
+  docsUrl: string
+  callbackPath: string
+}
+
+const providerInfo = computed<Record<ProviderType, ProviderInfo>>(() => {
+  const isDark = themeStore.isDark
+  return {
+    github: {
+      name: 'GitHub',
+      icon: `<svg class="w-6 h-6" fill="${isDark ? '#ededed' : '#18181b'}" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>`,
+      docsUrl: 'https://github.com/settings/developers',
+      callbackPath: '/api/oauth/callback/github'
+    },
+    google: {
+      name: 'Google',
+      // Google 图标保持原色，但需要根据主题调整背景
+      icon: `<svg class="w-6 h-6" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path></svg>`,
+      docsUrl: 'https://console.cloud.google.com/apis/credentials',
+      callbackPath: '/api/oauth/callback/google'
+    }
+  }
+})
+
+// function getProviderInfo(provider: ProviderType | ''): ProviderInfo | undefined {
+//   if (!provider) return undefined
+//   return providerInfo.value[provider as ProviderType]
+// }
+
+const callbackUrl: string = window.location.origin
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ t('admin.oauth.title') }}</h1>
+        <p class="page-description">{{ t('admin.oauth.description') }}</p>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div v-for="i in 2" :key="i" class="card p-6 animate-pulse">
+        <div class="h-8 bg-themed-secondary rounded w-1/3 mb-4"></div>
+        <div class="h-4 bg-themed-secondary rounded w-2/3 mb-2"></div>
+        <div class="h-4 bg-themed-secondary rounded w-1/2"></div>
+      </div>
+    </div>
+
+    <!-- Provider Cards -->
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div 
+        v-for="(config, provider) in configs" 
+        :key="provider"
+        class="card p-6"
+      >
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <div 
+              class="w-12 h-12 rounded-xl flex items-center justify-center"
+              :class="[
+                config.configured 
+                  ? 'bg-themed-secondary' 
+                  : (themeStore.isDark ? 'bg-gray-800' : 'bg-gray-200'),
+                provider === 'google' && !themeStore.isDark && 'bg-white'
+              ]"
+              v-html="providerInfo[provider]?.icon"
+            ></div>
+            <div>
+              <h3 class="text-themed font-medium">{{ providerInfo[provider]?.name }}</h3>
+              <span 
+                :class="[
+                  'text-xs',
+                  config.configured 
+                    ? (config.enabled ? 'text-green-400' : 'text-yellow-400')
+                    : 'text-themed-muted'
+                ]"
+              >
+                {{ config.configured ? (config.enabled ? t('admin.oauth.enabled') : t('admin.oauth.disabled')) : '-' }}
+              </span>
+            </div>
+          </div>
+          
+          <div class="flex gap-2">
+            <button class="btn-secondary btn-sm" @click="openEdit(provider)">
+              {{ config.configured ? t('admin.oauth.edit') : t('common.create') }}
+            </button>
+            <button 
+              v-if="config.configured" 
+              class="btn-ghost btn-sm text-error" 
+              @click="deleteConfig(provider)"
+            >
+              {{ t('common.delete') }}
+            </button>
+          </div>
+        </div>
+
+        <div v-if="config.configured" class="space-y-2 text-sm">
+          <div class="flex justify-between">
+            <span class="text-themed-secondary">Client ID</span>
+            <span class="text-themed font-mono text-xs">{{ config.clientId }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-themed-secondary">Client Secret</span>
+            <span class="text-themed font-mono text-xs">{{ config.clientSecret }}</span>
+          </div>
+        </div>
+
+        <div v-else class="text-sm text-themed-muted">
+          <p>
+            {{ t('admin.oauth.notConfigured') }} 
+            <a 
+              :href="providerInfo[provider]?.docsUrl" 
+              target="_blank" 
+              class="text-accent hover:underline"
+            >
+              {{ providerInfo[provider]?.name }} {{ t('admin.oauth.developerConsole') }}
+            </a>
+            {{ t('admin.oauth.createOAuthApp') }}
+          </p>
+        </div>
+
+        <!-- Callback URL Info -->
+        <div class="mt-4 p-3 bg-themed-tertiary rounded-lg">
+          <div class="text-xs text-themed-secondary mb-1">{{ t('admin.oauth.callbackUrl') }}</div>
+          <code class="text-xs text-themed font-mono break-all">
+            {{ callbackUrl }}{{ providerInfo[provider]?.callbackPath }}
+          </code>
+        </div>
+      </div>
+    </div>
+
+    <!-- Usage Guide -->
+    <div class="card p-6">
+      <h3 class="text-themed font-medium mb-4">{{ t('admin.oauth.usageGuide') }}</h3>
+      <div class="space-y-3 text-sm text-themed-secondary">
+        <p>{{ t('admin.oauth.step1') }}</p>
+        <p>{{ t('admin.oauth.step2') }}</p>
+        <p>{{ t('admin.oauth.step3') }}</p>
+        <p>{{ t('admin.oauth.step4') }}</p>
+        <p class="text-yellow-500">⚠️ {{ t('admin.oauth.warning') }}</p>
+      </div>
+    </div>
+
+    <!-- Edit Modal -->
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="showModal = false"></div>
+        
+        <div class="relative w-full max-w-md bg-themed border border-themed rounded-xl p-6 shadow-2xl animate-fade-in">
+          <div class="flex items-center justify-between mb-6">
+            <div class="flex items-center gap-3">
+              <div 
+                class="w-10 h-10 rounded-lg flex items-center justify-center"
+                :class="[
+                  'bg-themed-secondary',
+                  editProvider === 'google' && !themeStore.isDark && 'bg-white'
+                ]"
+                v-html="editProvider ? providerInfo[editProvider]?.icon : ''"
+              ></div>
+              <h3 class="text-lg font-semibold text-themed">
+                {{ t('admin.oauth.configure') }} {{ editProvider ? providerInfo[editProvider]?.name : '' }}
+              </h3>
+            </div>
+            <button class="text-themed-secondary hover:text-themed" @click="showModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <form class="space-y-4" @submit.prevent="saveConfig">
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1">{{ t('admin.oauth.clientId') }} *</label>
+              <input 
+                v-model="form.clientId" 
+                type="text" 
+                class="input" 
+                :placeholder="t('admin.oauth.enterClientId')"
+              />
+            </div>
+
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1">
+                {{ t('admin.oauth.clientSecret') }} {{ editProvider && configs[editProvider]?.configured ? t('admin.oauth.leaveEmptyUnchanged') : '*' }}
+              </label>
+              <input 
+                v-model="form.clientSecret" 
+                type="password" 
+                class="input" 
+                :placeholder="t('admin.oauth.enterClientSecret')"
+              />
+            </div>
+
+            <label class="flex items-center gap-3 cursor-pointer">
+              <input 
+                v-model="form.enabled" 
+                type="checkbox" 
+                :class="[
+                  'w-4 h-4 rounded text-accent',
+                  themeStore.isDark ? 'border-gray-600 bg-gray-800 focus:ring-offset-gray-900' : 'border-gray-300 bg-white focus:ring-offset-white'
+                ]"
+              />
+              <div>
+                <div class="text-sm text-themed">{{ t('admin.oauth.enableLogin') }}</div>
+                <div class="text-xs text-themed-muted">{{ t('admin.oauth.enableLoginHint') }}</div>
+              </div>
+            </label>
+
+            <div class="flex justify-end gap-3 pt-4">
+              <button type="button" class="btn-secondary" @click="showModal = false">{{ t('common.cancel') }}</button>
+              <button type="submit" :disabled="formLoading" class="btn-primary">
+                {{ formLoading ? t('admin.oauth.saving') : t('admin.oauth.save') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
diff --git a/client/src/views/admin/PaymentProvidersView.vue b/client/src/views/admin/PaymentProvidersView.vue
new file mode 100644
index 0000000..7ae1934
--- /dev/null
+++ b/client/src/views/admin/PaymentProvidersView.vue
@@ -0,0 +1,744 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+
+const props = withDefaults(defineProps<{
+  embedded?: boolean
+}>(), {
+  embedded: false
+})
+
+const { t } = useI18n()
+const toast = useToast()
+
+// 支付渠道列表
+const providers = ref<any[]>([])
+const loading = ref(true)
+
+// 编辑/创建弹窗
+const showModal = ref(false)
+const isEditing = ref(false)
+const modalLoading = ref(false)
+const formData = ref({
+  id: 0,
+  name: '',
+  type: 'yipay',
+  config: {
+    apiurl: '',
+    pid: '',
+    platform_public_key: '',
+    merchant_private_key: ''
+  } as Record<string, unknown>,
+  methods: [] as string[],
+  minAmount: 1,
+  maxAmount: null as number | null,
+  feeRate: 0,
+  feeFixed: 0,
+  sortOrder: 0
+})
+
+const DEFAULT_YIPAY_METHODS = ['alipay', 'wxpay']
+const YIPAY_METHODS = ['alipay', 'wxpay', 'qqpay']
+const IMPLEMENTED_PROVIDER_TYPES = new Set(['yipay', 'heleket'])
+
+function getConfigMethodFees(config: Record<string, unknown>): Record<string, { feeRate?: number; feeFixed?: number }> {
+  const raw = (config as any).methodFees
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    return {}
+  }
+  return raw as Record<string, { feeRate?: number; feeFixed?: number }>
+}
+
+function getYipayMethodFeePercent(method: string): number {
+  const methodFees = getConfigMethodFees(formData.value.config)
+  const feeRate = methodFees[method]?.feeRate !== undefined
+    ? Number(methodFees[method]?.feeRate || 0)
+    : Number(formData.value.feeRate || 0) / 100
+  return Number.isFinite(feeRate) ? Number((feeRate * 100).toFixed(2)) : 0
+}
+
+function setYipayMethodFeePercent(method: string, value: string | number) {
+  const percent = Number(value)
+  const feeRate = Number.isFinite(percent) && percent > 0 ? percent / 100 : 0
+  const methodFees = {
+    ...getConfigMethodFees(formData.value.config),
+    [method]: {
+      ...getConfigMethodFees(formData.value.config)[method],
+      feeRate
+    }
+  }
+  formData.value.config = {
+    ...formData.value.config,
+    methodFees
+  }
+}
+
+function getProviderMethodFeePercent(provider: any, method: string): number {
+  const methodFees = getConfigMethodFees(provider.config || {})
+  const feeRate = methodFees[method]?.feeRate !== undefined
+    ? Number(methodFees[method]?.feeRate || 0)
+    : Number(provider.feeRate || 0)
+  return Number.isFinite(feeRate) ? feeRate * 100 : 0
+}
+
+function getProviderMethodSummary(provider: any): string {
+  const methods = provider.methods || []
+  if (provider.type !== 'yipay' || methods.length === 0) {
+    return methods.join(', ') || '-'
+  }
+
+  return methods.map((method: string) => {
+    const percent = getProviderMethodFeePercent(provider, method)
+    const name = t(`wallet.paymentMethods.${method}`)
+    const label = name === `wallet.paymentMethods.${method}` ? method : name
+    return percent > 0 ? `${label} (${percent.toFixed(2)}%)` : label
+  }).join(', ')
+}
+
+// 支付渠道类型选项
+const providerTypes = computed(() => [
+  { value: 'yipay', label: t('admin.paymentProviders.providerTypes.yipay') },
+  { value: 'heleket', label: t('admin.paymentProviders.providerTypes.heleket') },
+  { value: 'stripe', label: t('admin.paymentProviders.providerTypes.stripe') },
+  { value: 'alipay_direct', label: t('admin.paymentProviders.providerTypes.alipayDirect') },
+  { value: 'wechat_direct', label: t('admin.paymentProviders.providerTypes.wechatDirect') },
+  { value: 'manual', label: t('admin.paymentProviders.providerTypes.manual') }
+].map(option => {
+  const implemented = IMPLEMENTED_PROVIDER_TYPES.has(option.value)
+  return {
+    ...option,
+    disabled: !implemented,
+    label: implemented ? option.label : `${option.label} (${t('admin.paymentProviders.notImplemented')})`
+  }
+}))
+
+// 状态选项
+const statusOptions = computed(() => [
+  { value: 'active', label: t('admin.paymentProviders.statusActive'), class: 'badge-success' },
+  { value: 'disabled', label: t('admin.paymentProviders.statusDisabled'), class: 'badge-error' },
+  { value: 'testing', label: t('admin.paymentProviders.statusTesting'), class: 'badge-warning' }
+])
+
+// 删除确认弹窗
+const showDeleteModal = ref(false)
+const deleteTarget = ref<any>(null)
+const deleteLoading = ref(false)
+
+onMounted(() => {
+  loadProviders()
+})
+
+async function loadProviders() {
+  loading.value = true
+  try {
+    const res = await api.admin.getPaymentProviders()
+    providers.value = res.providers || []
+  } catch (err: any) {
+    toast.error(t('admin.paymentProviders.loadFailed') + ': ' + err.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 根据渠道类型获取默认配置
+function getDefaultConfig(type: string, version?: string): Record<string, unknown> {
+  switch (type) {
+    case 'yipay':
+      if (version === 'v1') {
+        return {
+          version: 'v1',
+          apiurl: '',
+          pid: '',
+          key: '',
+          methodFees: {}
+        }
+      }
+      return {
+        version: 'v2',
+        apiurl: '',
+        pid: '',
+        platform_public_key: '',
+        merchant_private_key: '',
+        methodFees: {}
+      }
+    case 'heleket':
+      return {
+        apiurl: 'https://api.heleket.com',
+        merchant_uuid: '',
+        api_key: '',
+        currency: 'CNY',
+        lifetime: 3600
+      }
+    case 'stripe':
+      return {
+        publishable_key: '',
+        secret_key: '',
+        webhook_secret: ''
+      }
+    case 'alipay_direct':
+      return {
+        app_id: '',
+        private_key: '',
+        public_key: ''
+      }
+    case 'wechat_direct':
+      return {
+        app_id: '',
+        mch_id: '',
+        api_key: '',
+        cert_path: '',
+        key_path: ''
+      }
+    case 'manual':
+      return {
+        instructions: ''
+      }
+    default:
+      return {}
+  }
+}
+
+function getDefaultMethods(type: string): string[] {
+  switch (type) {
+    case 'yipay':
+      return [...DEFAULT_YIPAY_METHODS]
+    default:
+      return []
+  }
+}
+
+function handleProviderTypeChange(type: string) {
+  formData.value.config = getDefaultConfig(type)
+  formData.value.methods = getDefaultMethods(type)
+}
+
+function openCreateModal() {
+  isEditing.value = false
+  formData.value = {
+    id: 0,
+    name: '',
+    type: 'yipay',
+    config: getDefaultConfig('yipay', 'v2'),
+    methods: getDefaultMethods('yipay'),
+    minAmount: 1,
+    maxAmount: null,
+    feeRate: 0,
+    feeFixed: 0,
+    sortOrder: 0
+  }
+  showModal.value = true
+}
+
+function openEditModal(provider: any) {
+  isEditing.value = true
+  // 确保 config 字段有默认值
+  const version = provider.config?.version || 'v2'
+  const defaultConfig = getDefaultConfig(provider.type, version)
+  const mergedConfig = { ...defaultConfig, ...(provider.config || {}) }
+  
+  formData.value = {
+    id: provider.id,
+    name: provider.name,
+    type: provider.type,
+    config: mergedConfig,
+    methods: provider.methods?.length ? provider.methods : getDefaultMethods(provider.type),
+    minAmount: provider.minAmount,
+    maxAmount: provider.maxAmount,
+    feeRate: provider.feeRate * 100, // 转换为百分比显示
+    feeFixed: provider.feeFixed,
+    sortOrder: provider.sortOrder
+  }
+  showModal.value = true
+}
+
+function buildConfigForSave(): Record<string, unknown> {
+  if (formData.value.type !== 'yipay') {
+    return formData.value.config
+  }
+
+  const sourceFees = getConfigMethodFees(formData.value.config)
+  const methodFees: Record<string, { feeRate: number; feeFixed: number }> = {}
+  const globalFallbackRate = Number(formData.value.feeRate || 0) / 100
+  const globalFallbackFixed = Number(formData.value.feeFixed || 0)
+  for (const method of formData.value.methods) {
+    const feeRate = sourceFees[method]?.feeRate !== undefined
+      ? Number(sourceFees[method]?.feeRate || 0)
+      : globalFallbackRate
+    const feeFixed = sourceFees[method]?.feeFixed !== undefined
+      ? Number(sourceFees[method]?.feeFixed || 0)
+      : globalFallbackFixed
+    methodFees[method] = {
+      feeRate: Number.isFinite(feeRate) && feeRate > 0 ? feeRate : 0,
+      feeFixed: Number.isFinite(feeFixed) && feeFixed > 0 ? feeFixed : 0
+    }
+  }
+
+  return {
+    ...formData.value.config,
+    methodFees
+  }
+}
+
+async function saveProvider() {
+  if (!formData.value.name.trim()) {
+    toast.error(t('admin.paymentProviders.nameRequired'))
+    return
+  }
+  
+  modalLoading.value = true
+  try {
+    const data = {
+      name: formData.value.name.trim(),
+      type: formData.value.type,
+      config: buildConfigForSave(),
+      methods: formData.value.methods,
+      minAmount: formData.value.minAmount,
+      maxAmount: formData.value.maxAmount,
+      feeRate: formData.value.type === 'yipay' ? 0 : formData.value.feeRate / 100, // 转换回小数
+      feeFixed: formData.value.type === 'yipay' ? 0 : formData.value.feeFixed,
+      sortOrder: formData.value.sortOrder
+    }
+    
+    if (isEditing.value) {
+      await api.admin.updatePaymentProvider(formData.value.id, data)
+      toast.success(t('admin.paymentProviders.updateSuccess'))
+    } else {
+      await api.admin.createPaymentProvider(data)
+      toast.success(t('admin.paymentProviders.createSuccess'))
+    }
+    
+    showModal.value = false
+    await loadProviders()
+  } catch (err: any) {
+    toast.error((isEditing.value ? t('admin.paymentProviders.updateFailed') : t('admin.paymentProviders.createFailed')) + ': ' + err.message)
+  } finally {
+    modalLoading.value = false
+  }
+}
+
+async function updateStatus(provider: any, newStatus: string) {
+  try {
+    await api.admin.updatePaymentProviderStatus(provider.id, newStatus)
+    toast.success(t('admin.paymentProviders.statusUpdateSuccess'))
+    await loadProviders()
+  } catch (err: any) {
+    toast.error(t('admin.paymentProviders.statusUpdateFailed') + ': ' + err.message)
+  }
+}
+
+function confirmDelete(provider: any) {
+  deleteTarget.value = provider
+  showDeleteModal.value = true
+}
+
+async function deleteProvider() {
+  if (!deleteTarget.value) return
+  
+  deleteLoading.value = true
+  try {
+    await api.admin.deletePaymentProvider(deleteTarget.value.id)
+    toast.success(t('admin.paymentProviders.deleteSuccess'))
+    showDeleteModal.value = false
+    deleteTarget.value = null
+    await loadProviders()
+  } catch (err: any) {
+    toast.error(t('admin.paymentProviders.deleteFailed') + ': ' + err.message)
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+function getTypeName(type: string): string {
+  return providerTypes.value.find(t => t.value === type)?.label || type
+}
+
+function getStatusInfo(status: string) {
+  return statusOptions.value.find(s => s.value === status) || { label: status, class: '' }
+}
+
+function togglePaymentMethod(method: string) {
+  const index = formData.value.methods.indexOf(method)
+  if (index === -1) {
+    formData.value.methods.push(method)
+  } else {
+    formData.value.methods.splice(index, 1)
+  }
+}
+</script>
+
+<template>
+  <div :class="['animate-fade-in', props.embedded ? 'space-y-4' : '']">
+    <!-- 页面头部 -->
+    <div class="page-header flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 class="page-title">{{ $t('admin.paymentProviders.title') }}</h1>
+        <p class="text-sm text-themed-muted mt-1">{{ $t('admin.paymentProviders.description') }}</p>
+      </div>
+      <button class="btn btn-primary" @click="openCreateModal">
+        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        {{ $t('admin.paymentProviders.add') }}
+      </button>
+    </div>
+
+    <!-- 加载中 -->
+    <SkeletonLoader v-if="loading" :count="3" />
+
+    <!-- 支付渠道列表 -->
+    <div v-else-if="providers.length > 0" class="space-y-4">
+      <div
+        v-for="provider in providers"
+        :key="provider.id"
+        class="card p-4"
+      >
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-3">
+              <h3 class="font-medium text-themed">{{ provider.name }}</h3>
+              <span :class="['badge', getStatusInfo(provider.status).class]">
+                {{ getStatusInfo(provider.status).label }}
+              </span>
+              <span class="badge badge-info">{{ getTypeName(provider.type) }}</span>
+            </div>
+            
+            <div class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+              <div>
+                <span class="text-themed-muted">{{ $t('admin.paymentProviders.minAmount') }}:</span>
+                <span class="ml-1 text-themed">¥{{ provider.minAmount }}</span>
+              </div>
+              <div>
+                <span class="text-themed-muted">{{ $t('admin.paymentProviders.maxAmount') }}:</span>
+                <span class="ml-1 text-themed">{{ provider.maxAmount ? `¥${provider.maxAmount}` : $t('common.unlimited') }}</span>
+              </div>
+              <div>
+                <span class="text-themed-muted">{{ $t('admin.paymentProviders.feeRate') }}:</span>
+                <span class="ml-1 text-themed">{{ (provider.feeRate * 100).toFixed(2) }}%</span>
+              </div>
+              <div>
+                <span class="text-themed-muted">{{ $t('admin.paymentProviders.feeFixed') }}:</span>
+                <span class="ml-1 text-themed">¥{{ provider.feeFixed }}</span>
+              </div>
+            </div>
+            
+            <div class="mt-2 text-xs text-themed-muted">
+              {{ $t('admin.paymentProviders.methods') }}: {{ getProviderMethodSummary(provider) }}
+            </div>
+          </div>
+          
+          <div class="flex flex-wrap items-center gap-2 lg:ml-4 lg:justify-end">
+            <!-- 状态切换 -->
+            <select
+              :value="provider.status"
+              class="input input-sm w-24"
+              @change="(e) => updateStatus(provider, (e.target as HTMLSelectElement).value)"
+            >
+              <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
+            
+            <button class="btn btn-sm btn-ghost" @click="openEditModal(provider)">
+              <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+              </svg>
+            </button>
+            
+            <button class="btn btn-sm btn-ghost text-red-500" @click="confirmDelete(provider)">
+              <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else class="card p-12 text-center">
+      <svg class="w-16 h-16 mx-auto text-themed-muted opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+      </svg>
+      <p class="mt-4 text-themed-muted">{{ $t('admin.paymentProviders.empty') }}</p>
+      <button class="btn btn-primary mt-4" @click="openCreateModal">
+        {{ $t('admin.paymentProviders.add') }}
+      </button>
+    </div>
+
+    <!-- 创建/编辑弹窗 -->
+    <Teleport to="body">
+      <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
+        <div class="modal-content max-w-lg">
+          <div class="modal-header">
+            <h3 class="modal-title">
+              {{ isEditing ? $t('admin.paymentProviders.edit') : $t('admin.paymentProviders.add') }}
+            </h3>
+            <button class="btn btn-ghost btn-sm" @click="showModal = false">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="modal-body space-y-4">
+            <div>
+              <label class="label">{{ $t('admin.paymentProviders.name') }} *</label>
+              <input v-model="formData.name" type="text" class="input w-full" :placeholder="$t('admin.paymentProviders.namePlaceholder')" />
+            </div>
+            
+            <div>
+              <label class="label">{{ $t('admin.paymentProviders.type') }}</label>
+              <select v-model="formData.type" class="input w-full" :disabled="isEditing" @change="handleProviderTypeChange(formData.type)">
+                <option v-for="opt in providerTypes" :key="opt.value" :value="opt.value" :disabled="opt.disabled">
+                  {{ opt.label }}
+                </option>
+              </select>
+            </div>
+            
+            <!-- 易支付配置 -->
+            <template v-if="formData.type === 'yipay'">
+              <!-- 版本选择 -->
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.sdkVersion') }} *</label>
+                <select 
+                  v-model="(formData.config as any).version" 
+                  class="input w-full"
+                  @change="formData.config = getDefaultConfig('yipay', (formData.config as any).version)"
+                >
+                  <option value="v1">{{ $t('admin.paymentProviders.config.yipayVersionV1') }}</option>
+                  <option value="v2">{{ $t('admin.paymentProviders.config.yipayVersionV2') }}</option>
+                </select>
+                <p class="text-xs text-themed-muted mt-1">
+                  {{ (formData.config as any).version === 'v1' 
+                    ? $t('admin.paymentProviders.config.yipayVersionV1Hint')
+                    : $t('admin.paymentProviders.config.yipayVersionV2Hint')
+                  }}
+                </p>
+              </div>
+
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.apiurl') }} *</label>
+                <input v-model="(formData.config as any).apiurl" type="text" class="input w-full" :placeholder="$t('admin.paymentProviders.config.yipayApiUrlPlaceholder')" />
+                <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.yipayApiUrlHint') }}</p>
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.pid') }} *</label>
+                <input v-model="(formData.config as any).pid" type="text" class="input w-full" :placeholder="$t('admin.paymentProviders.config.yipayPidPlaceholder')" />
+              </div>
+
+              <!-- V1 版本: MD5密钥 -->
+              <template v-if="(formData.config as any).version === 'v1'">
+                <div>
+                  <label class="label">{{ $t('admin.paymentProviders.config.key') }} *</label>
+                  <input v-model="(formData.config as any).key" type="text" class="input w-full font-mono" :placeholder="$t('admin.paymentProviders.config.yipayKeyPlaceholder')" />
+                  <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.yipayKeyHint') }}</p>
+                </div>
+              </template>
+
+              <!-- V2 版本: RSA密钥对 -->
+              <template v-else>
+                <div>
+                  <label class="label">{{ $t('admin.paymentProviders.config.platformPublicKey') }} *</label>
+                  <textarea v-model="(formData.config as any).platform_public_key" class="input w-full h-24 resize-none font-mono text-xs" :placeholder="$t('admin.paymentProviders.config.platformPublicKeyPlaceholder')"></textarea>
+                  <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.platformPublicKeyHint') }}</p>
+                </div>
+                <div>
+                  <label class="label">{{ $t('admin.paymentProviders.config.merchantPrivateKey') }} *</label>
+                  <textarea v-model="(formData.config as any).merchant_private_key" class="input w-full h-24 resize-none font-mono text-xs" :placeholder="$t('admin.paymentProviders.config.merchantPrivateKeyPlaceholder')"></textarea>
+                  <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.merchantPrivateKeyHint') }}</p>
+                </div>
+              </template>
+
+              <!-- 支付方式选择（V1/V2通用） -->
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.paymentMethods') }}</label>
+                <div class="mt-2 space-y-2">
+                  <div
+                    v-for="method in YIPAY_METHODS"
+                    :key="method"
+                    class="rounded-lg border border-themed p-3"
+                  >
+                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <label class="flex items-center gap-2 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          :checked="formData.methods.includes(method)"
+                          class="checkbox checkbox-primary"
+                          @change="togglePaymentMethod(method)"
+                        />
+                        <span class="text-themed">{{ $t(`wallet.paymentMethods.${method}`) }}</span>
+                      </label>
+                      <div class="flex items-center gap-2 sm:w-44">
+                        <span class="whitespace-nowrap text-xs text-themed-muted">{{ $t('admin.paymentProviders.feeRate') }}</span>
+                        <input
+                          :value="getYipayMethodFeePercent(method)"
+                          type="number"
+                          class="input w-full"
+                          min="0"
+                          max="100"
+                          step="0.01"
+                          :disabled="!formData.methods.includes(method)"
+                          @input="setYipayMethodFeePercent(method, ($event.target as HTMLInputElement).value)"
+                        />
+                        <span class="text-sm text-themed-muted">%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.yipayMethodsHint') }}</p>
+                <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.yipayMethodFeeHint') }}</p>
+              </div>
+            </template>
+
+            <!-- Heleket 配置 -->
+            <template v-else-if="formData.type === 'heleket'">
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.apiurl') }} *</label>
+                <input v-model="(formData.config as any).apiurl" type="text" class="input w-full" placeholder="https://api.heleket.com" />
+                <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.heleketApiUrlHint') }}</p>
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.heleketMerchantUuid') }} *</label>
+                <input v-model="(formData.config as any).merchant_uuid" type="text" class="input w-full font-mono" :placeholder="$t('admin.paymentProviders.config.heleketMerchantUuid')" />
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.heleketApiKey') }} *</label>
+                <input v-model="(formData.config as any).api_key" type="password" class="input w-full font-mono" :placeholder="$t('admin.paymentProviders.config.heleketApiKey')" />
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.heleketInvoiceCurrency') }}</label>
+                <input v-model="(formData.config as any).currency" type="text" class="input w-full uppercase" placeholder="CNY" />
+                <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.heleketCurrencyHint') }}</p>
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.heleketLifetime') }}</label>
+                <input v-model.number="(formData.config as any).lifetime" type="number" class="input w-full" min="300" max="43200" step="1" placeholder="3600" />
+                <p class="text-xs text-themed-muted mt-1">{{ $t('admin.paymentProviders.config.heleketLifetimeHint') }}</p>
+              </div>
+            </template>
+            
+            <!-- Stripe 配置 -->
+            <template v-else-if="formData.type === 'stripe'">
+              <div>
+                <label class="label">Publishable Key *</label>
+                <input v-model="(formData.config as any).publishable_key" type="text" class="input w-full" placeholder="pk_live_..." />
+              </div>
+              <div>
+                <label class="label">Secret Key *</label>
+                <input v-model="(formData.config as any).secret_key" type="password" class="input w-full" placeholder="sk_live_..." />
+              </div>
+              <div>
+                <label class="label">Webhook Secret</label>
+                <input v-model="(formData.config as any).webhook_secret" type="password" class="input w-full" placeholder="whsec_..." />
+              </div>
+            </template>
+            
+            <!-- 支付宝直连配置 -->
+            <template v-else-if="formData.type === 'alipay_direct'">
+              <div>
+                <label class="label">App ID *</label>
+                <input v-model="(formData.config as any).app_id" type="text" class="input w-full" />
+              </div>
+              <div>
+                <label class="label">应用私钥 *</label>
+                <textarea v-model="(formData.config as any).private_key" class="input w-full h-24 resize-none font-mono text-xs"></textarea>
+              </div>
+              <div>
+                <label class="label">支付宝公钥 *</label>
+                <textarea v-model="(formData.config as any).public_key" class="input w-full h-24 resize-none font-mono text-xs"></textarea>
+              </div>
+            </template>
+            
+            <!-- 微信直连配置 -->
+            <template v-else-if="formData.type === 'wechat_direct'">
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="label">App ID *</label>
+                  <input v-model="(formData.config as any).app_id" type="text" class="input w-full" />
+                </div>
+                <div>
+                  <label class="label">商户号 *</label>
+                  <input v-model="(formData.config as any).mch_id" type="text" class="input w-full" />
+                </div>
+              </div>
+              <div>
+                <label class="label">API 密钥 *</label>
+                <input v-model="(formData.config as any).api_key" type="password" class="input w-full" />
+              </div>
+            </template>
+            
+            <!-- 人工充值配置 -->
+            <template v-else-if="formData.type === 'manual'">
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.config.instructions') }}</label>
+                <textarea v-model="(formData.config as any).instructions" class="input w-full h-24 resize-none" :placeholder="$t('admin.paymentProviders.config.instructionsPlaceholder')"></textarea>
+              </div>
+            </template>
+            
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.minAmount') }}</label>
+                <input v-model.number="formData.minAmount" type="number" class="input w-full" min="0" step="0.01" />
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.maxAmount') }}</label>
+                <input v-model.number="formData.maxAmount" type="number" class="input w-full" min="0" step="0.01" :placeholder="$t('common.unlimited')" />
+              </div>
+            </div>
+            
+            <div v-if="formData.type !== 'yipay'" class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.feeRate') }} (%)</label>
+                <input v-model.number="formData.feeRate" type="number" class="input w-full" min="0" max="100" step="0.01" />
+              </div>
+              <div>
+                <label class="label">{{ $t('admin.paymentProviders.feeFixed') }}</label>
+                <input v-model.number="formData.feeFixed" type="number" class="input w-full" min="0" step="0.01" />
+              </div>
+            </div>
+            <div v-else class="rounded-lg bg-themed-secondary px-3 py-2 text-xs text-themed-muted">
+              {{ $t('admin.paymentProviders.config.yipayFeeFieldHint') }}
+            </div>
+            
+            <div>
+              <label class="label">{{ $t('admin.paymentProviders.sortOrder') }}</label>
+              <input v-model.number="formData.sortOrder" type="number" class="input w-full" min="0" />
+            </div>
+          </div>
+          
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showModal = false">{{ $t('common.cancel') }}</button>
+            <button class="btn btn-primary" :disabled="modalLoading" @click="saveProvider">
+              {{ modalLoading ? $t('common.saving') : $t('common.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 删除确认弹窗 -->
+    <Teleport to="body">
+      <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+        <div class="modal-content max-w-sm">
+          <div class="modal-header">
+            <h3 class="modal-title text-red-500">{{ $t('admin.paymentProviders.deleteConfirm') }}</h3>
+          </div>
+          <div class="modal-body">
+            <p class="text-themed-secondary">
+              {{ $t('admin.paymentProviders.deleteWarning', { name: deleteTarget?.name }) }}
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-ghost" @click="showDeleteModal = false">{{ $t('common.cancel') }}</button>
+            <button class="btn btn-error" :disabled="deleteLoading" @click="deleteProvider">
+              {{ deleteLoading ? $t('common.deleting') : $t('common.delete') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/admin/StatisticsView.vue b/client/src/views/admin/StatisticsView.vue
new file mode 100644
index 0000000..bbc385f
--- /dev/null
+++ b/client/src/views/admin/StatisticsView.vue
@@ -0,0 +1,679 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import { useToast } from '@/stores/toast'
+
+type StatisticsOverview = Awaited<ReturnType<typeof api.admin.getStatisticsOverview>>
+type TabKey = 'users' | 'instances' | 'billing'
+type PeriodKey = 'daily' | 'monthly'
+type BillingMetricKey = 'recharge' | 'consume' | 'aff' | 'destroyFee'
+type ChartValueType = 'number' | 'money'
+type Tone = 'blue' | 'emerald' | 'amber' | 'rose'
+
+interface StatPoint {
+  label: string
+  value: number
+}
+
+interface SummaryCard {
+  label: string
+  value: number
+  type: ChartValueType
+  caption: string
+  tone: Tone
+}
+
+const toast = useToast()
+const { t, locale } = useI18n()
+const loading = ref(true)
+const stats = ref<StatisticsOverview | null>(null)
+const activeTab = ref<TabKey>('users')
+const userPeriod = ref<PeriodKey>('daily')
+const instancePeriod = ref<PeriodKey>('daily')
+const billingPeriod = ref<PeriodKey>('daily')
+const billingMetric = ref<BillingMetricKey>('recharge')
+
+const tabItems: Array<{ value: TabKey; labelKey: string }> = [
+  { value: 'users', labelKey: 'admin.statistics.tabs.users' },
+  { value: 'instances', labelKey: 'admin.statistics.tabs.instances' },
+  { value: 'billing', labelKey: 'admin.statistics.tabs.billing' }
+]
+
+const periodItems: Array<{ value: PeriodKey; labelKey: string }> = [
+  { value: 'daily', labelKey: 'admin.statistics.periods.daily' },
+  { value: 'monthly', labelKey: 'admin.statistics.periods.monthly' }
+]
+
+const billingMetricItems: Array<{ value: BillingMetricKey; labelKey: string; tone: Tone }> = [
+  { value: 'recharge', labelKey: 'admin.statistics.billingMetrics.recharge', tone: 'blue' },
+  { value: 'consume', labelKey: 'admin.statistics.billingMetrics.consume', tone: 'emerald' },
+  { value: 'aff', labelKey: 'admin.statistics.billingMetrics.aff', tone: 'amber' },
+  { value: 'destroyFee', labelKey: 'admin.statistics.billingMetrics.destroyFee', tone: 'rose' }
+]
+
+const moneyFormatter = computed(() =>
+  new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: 'CNY',
+    maximumFractionDigits: 2
+  })
+)
+const compactMoneyFormatter = computed(() =>
+  new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: 'CNY',
+    notation: 'compact',
+    maximumFractionDigits: 1
+  })
+)
+const numberFormatter = computed(() => new Intl.NumberFormat(locale.value))
+const compactNumberFormatter = computed(() =>
+  new Intl.NumberFormat(locale.value, {
+    notation: 'compact',
+    maximumFractionDigits: 1
+  })
+)
+
+const userSeries = computed<StatPoint[]>(() => {
+  if (!stats.value) return []
+  return userPeriod.value === 'daily'
+    ? stats.value.users.dailyNewUsers
+    : stats.value.users.monthlyNewUsers
+})
+
+const instanceSeries = computed<StatPoint[]>(() => {
+  if (!stats.value) return []
+  return instancePeriod.value === 'daily'
+    ? stats.value.instances.dailyCreatedInstances
+    : stats.value.instances.monthlyCreatedInstances
+})
+
+const currentBillingMetric = computed(() =>
+  billingMetricItems.find(item => item.value === billingMetric.value) || billingMetricItems[0]
+)
+
+const billingSeries = computed<StatPoint[]>(() => {
+  if (!stats.value) return []
+
+  if (billingMetric.value === 'consume') {
+    return billingPeriod.value === 'daily'
+      ? stats.value.billing.dailyConsume
+      : stats.value.billing.monthlyConsume
+  }
+
+  if (billingMetric.value === 'aff') {
+    return billingPeriod.value === 'daily'
+      ? stats.value.billing.dailyAff
+      : stats.value.billing.monthlyAff
+  }
+
+  if (billingMetric.value === 'destroyFee') {
+    return billingPeriod.value === 'daily'
+      ? stats.value.billing.dailyDestroyFee
+      : stats.value.billing.monthlyDestroyFee
+  }
+
+  return billingPeriod.value === 'daily'
+    ? stats.value.billing.dailyRecharge
+    : stats.value.billing.monthlyRecharge
+})
+
+const userCards = computed<SummaryCard[]>(() => [
+  {
+    label: t('admin.statistics.cards.totalUsers'),
+    value: stats.value?.users.total || 0,
+    type: 'number',
+    caption: t('admin.statistics.captions.currentTotal'),
+    tone: 'blue'
+  },
+  {
+    label: userPeriod.value === 'daily'
+      ? t('admin.statistics.cards.recentDailyNewUsers')
+      : t('admin.statistics.cards.recentMonthlyNewUsers'),
+    value: sumSeries(userSeries.value),
+    type: 'number',
+    caption: userPeriod.value === 'daily'
+      ? t('admin.statistics.captions.dailyAggregate')
+      : t('admin.statistics.captions.monthlyAggregate'),
+    tone: 'emerald'
+  },
+  {
+    label: t('admin.statistics.cards.averageNewUsers'),
+    value: averageSeries(userSeries.value),
+    type: 'number',
+    caption: userPeriod.value === 'daily'
+      ? t('admin.statistics.captions.dailyAverage')
+      : t('admin.statistics.captions.monthlyAverage'),
+    tone: 'amber'
+  }
+])
+
+const instanceCards = computed<SummaryCard[]>(() => [
+  {
+    label: t('admin.statistics.cards.totalInstances'),
+    value: stats.value?.instances.total || 0,
+    type: 'number',
+    caption: t('admin.statistics.captions.nonDeletedInstances'),
+    tone: 'blue'
+  },
+  {
+    label: t('admin.statistics.cards.availableInstances'),
+    value: stats.value?.instances.active || 0,
+    type: 'number',
+    caption: t('admin.statistics.captions.notDeletedOrSuspended'),
+    tone: 'emerald'
+  },
+  {
+    label: instancePeriod.value === 'daily'
+      ? t('admin.statistics.cards.recentDailyCreatedInstances')
+      : t('admin.statistics.cards.recentMonthlyCreatedInstances'),
+    value: sumSeries(instanceSeries.value),
+    type: 'number',
+    caption: instancePeriod.value === 'daily'
+      ? t('admin.statistics.captions.dailyAggregate')
+      : t('admin.statistics.captions.monthlyAggregate'),
+    tone: 'amber'
+  }
+])
+
+const billingCards = computed<SummaryCard[]>(() => [
+  {
+    label: t('admin.statistics.cards.totalRecharge'),
+    value: stats.value?.billing.totals.recharge || 0,
+    type: 'money',
+    caption: t('admin.statistics.captions.completedOrders'),
+    tone: 'blue'
+  },
+  {
+    label: t('admin.statistics.cards.totalConsume'),
+    value: stats.value?.billing.totals.consume || 0,
+    type: 'money',
+    caption: t('admin.statistics.captions.totalScope'),
+    tone: 'emerald'
+  },
+  {
+    label: t('admin.statistics.cards.totalAff'),
+    value: stats.value?.billing.totals.aff || 0,
+    type: 'money',
+    caption: t('admin.statistics.captions.affCommission'),
+    tone: 'amber'
+  },
+  {
+    label: t('admin.statistics.cards.totalDestroyFee'),
+    value: stats.value?.billing.totals.destroyFee || 0,
+    type: 'money',
+    caption: t('admin.statistics.captions.userDestroyFee'),
+    tone: 'rose'
+  }
+])
+
+const paidFreeTotal = computed(() =>
+  (stats.value?.instances.paid || 0) + (stats.value?.instances.free || 0)
+)
+
+const paidPercent = computed(() => getPercent(stats.value?.instances.paid || 0, paidFreeTotal.value))
+const freePercent = computed(() => getPercent(stats.value?.instances.free || 0, paidFreeTotal.value))
+
+onMounted(() => {
+  void loadStatistics()
+})
+
+async function loadStatistics() {
+  loading.value = true
+  try {
+    stats.value = await api.admin.getStatisticsOverview()
+  } catch (error: any) {
+    toast.error(t('admin.statistics.loadFailed', {
+      message: error?.message || t('admin.statistics.unknownError')
+    }))
+  } finally {
+    loading.value = false
+  }
+}
+
+function sumSeries(points: StatPoint[]): number {
+  return points.reduce((sum, point) => sum + point.value, 0)
+}
+
+function averageSeries(points: StatPoint[]): number {
+  if (points.length === 0) return 0
+  return Number((sumSeries(points) / points.length).toFixed(2))
+}
+
+function maxSeries(points: StatPoint[]): number {
+  return Math.max(0, ...points.map(point => point.value))
+}
+
+function barHeight(point: StatPoint, points: StatPoint[]): number {
+  const max = maxSeries(points)
+  if (max <= 0) return 0
+  return Math.max((point.value / max) * 100, point.value > 0 ? 3 : 0)
+}
+
+function shouldShowTick(index: number, length: number): boolean {
+  if (length <= 12) return true
+  return index === 0 || index === length - 1 || index % 5 === 0
+}
+
+function formatTick(label: string): string {
+  return label.length === 10 ? label.slice(5) : label
+}
+
+function formatValue(value: number, type: ChartValueType): string {
+  if (type === 'money') return moneyFormatter.value.format(value)
+  return numberFormatter.value.format(value)
+}
+
+function formatCompactValue(value: number, type: ChartValueType): string {
+  if (type === 'money') return Math.abs(value) >= 10000
+    ? compactMoneyFormatter.value.format(value)
+    : moneyFormatter.value.format(value)
+  return Math.abs(value) >= 10000
+    ? compactNumberFormatter.value.format(value)
+    : numberFormatter.value.format(value)
+}
+
+function getPercent(value: number, total: number): number {
+  if (total <= 0) return 0
+  return Number(((value / total) * 100).toFixed(1))
+}
+
+function cardToneClass(tone: Tone): string {
+  switch (tone) {
+    case 'emerald':
+      return 'text-emerald-500 bg-emerald-500/10 border-emerald-500/20'
+    case 'amber':
+      return 'text-amber-500 bg-amber-500/10 border-amber-500/20'
+    case 'rose':
+      return 'text-rose-500 bg-rose-500/10 border-rose-500/20'
+    default:
+      return 'text-blue-500 bg-blue-500/10 border-blue-500/20'
+  }
+}
+
+function barToneClass(tone: Tone): string {
+  switch (tone) {
+    case 'emerald':
+      return 'chart-bar-emerald'
+    case 'amber':
+      return 'chart-bar-amber'
+    case 'rose':
+      return 'chart-bar-rose'
+    default:
+      return 'chart-bar-blue'
+  }
+}
+</script>
+
+<template>
+  <div class="animate-fade-in">
+    <div class="page-header flex items-center justify-between gap-4">
+      <div>
+        <h1 class="page-title">{{ t('admin.statistics.title') }}</h1>
+        <p class="text-sm text-themed-muted mt-1">
+          {{ t('admin.statistics.description') }}
+          <span v-if="stats" class="ml-2">{{ t('admin.statistics.timezone', { timezone: stats.meta.timezone }) }}</span>
+        </p>
+      </div>
+      <button class="btn btn-secondary" :disabled="loading" @click="loadStatistics">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 4v5h.58m15.36 2A8 8 0 0 0 5.07 8.11M20 20v-5h-.58m0 0A8 8 0 0 1 4.06 12.03" />
+        </svg>
+        {{ t('admin.statistics.refresh') }}
+      </button>
+    </div>
+
+    <div v-if="loading" class="space-y-6">
+      <SkeletonLoader type="stats" />
+      <SkeletonLoader type="card" />
+    </div>
+
+    <div v-else-if="stats" class="space-y-6">
+      <div class="inline-flex rounded-lg border border-themed p-1 bg-themed-tertiary">
+        <button
+          v-for="tab in tabItems"
+          :key="tab.value"
+          class="px-4 py-2 text-sm font-medium rounded-md transition-colors"
+          :class="activeTab === tab.value ? 'bg-themed text-themed shadow-sm' : 'text-themed-muted hover:text-themed hover:bg-themed-hover'"
+          @click="activeTab = tab.value"
+        >
+          {{ t(tab.labelKey) }}
+        </button>
+      </div>
+
+      <section v-if="activeTab === 'users'" class="space-y-5">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div v-for="card in userCards" :key="card.label" class="card p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <p class="text-sm text-themed-muted">{{ card.label }}</p>
+                <p class="mt-2 text-2xl font-semibold text-themed">{{ formatValue(card.value, card.type) }}</p>
+                <p class="mt-1 text-xs text-themed-faint">{{ card.caption }}</p>
+              </div>
+              <div :class="['w-10 h-10 rounded-lg border flex items-center justify-center', cardToneClass(card.tone)]">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 19.13a9.38 9.38 0 0 0 2.63.37 9.34 9.34 0 0 0 4.12-.95 4.13 4.13 0 0 0-7.54-2.5M15 19.13v.1A12.32 12.32 0 0 1 8.62 21a12.32 12.32 0 0 1-6.37-1.77v-.1a6.38 6.38 0 0 1 11.96-3.08M12 6.38a3.38 3.38 0 1 1-6.75 0 3.38 3.38 0 0 1 6.75 0Zm8.25 2.25a2.63 2.63 0 1 1-5.25 0 2.63 2.63 0 0 1 5.25 0Z" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card p-5">
+          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div>
+              <h2 class="text-base font-semibold text-themed">{{ t('admin.statistics.sections.newUsers') }}</h2>
+              <p class="text-sm text-themed-muted mt-1">
+                {{ userPeriod === 'daily' ? t('admin.statistics.ranges.last30Days') : t('admin.statistics.ranges.last12Months') }}
+              </p>
+            </div>
+            <div class="inline-flex rounded-lg border border-themed p-1 bg-themed-tertiary">
+              <button
+                v-for="period in periodItems"
+                :key="period.value"
+                class="px-3 py-1.5 text-sm rounded-md transition-colors"
+                :class="userPeriod === period.value ? 'bg-themed text-themed shadow-sm' : 'text-themed-muted hover:text-themed'"
+                @click="userPeriod = period.value"
+              >
+                {{ t(period.labelKey) }}
+              </button>
+            </div>
+          </div>
+
+          <div class="chart-area mt-6">
+            <div v-for="(point, index) in userSeries" :key="point.label" class="chart-column group">
+              <div class="chart-value" :title="`${point.label}: ${formatValue(point.value, 'number')}`">
+                <span class="chart-tooltip">{{ t('admin.statistics.tooltip', { label: point.label, value: formatValue(point.value, 'number') }) }}</span>
+                <div
+                  :class="['chart-bar', barToneClass('blue')]"
+                  :style="{ height: `${barHeight(point, userSeries)}%` }"
+                ></div>
+              </div>
+              <span class="chart-tick">{{ shouldShowTick(index, userSeries.length) ? formatTick(point.label) : '' }}</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section v-else-if="activeTab === 'instances'" class="space-y-5">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div v-for="card in instanceCards" :key="card.label" class="card p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <p class="text-sm text-themed-muted">{{ card.label }}</p>
+                <p class="mt-2 text-2xl font-semibold text-themed">{{ formatValue(card.value, card.type) }}</p>
+                <p class="mt-1 text-xs text-themed-faint">{{ card.caption }}</p>
+              </div>
+              <div :class="['w-10 h-10 rounded-lg border flex items-center justify-center', cardToneClass(card.tone)]">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 7.5h14M5 12h14M5 16.5h14M6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11A2.5 2.5 0 0 1 6.5 4Z" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_360px] gap-5">
+          <div class="card p-5">
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+              <div>
+                <h2 class="text-base font-semibold text-themed">{{ t('admin.statistics.sections.createdInstances') }}</h2>
+                <p class="text-sm text-themed-muted mt-1">
+                  {{ instancePeriod === 'daily' ? t('admin.statistics.ranges.last30Days') : t('admin.statistics.ranges.last12Months') }}
+                </p>
+              </div>
+              <div class="inline-flex rounded-lg border border-themed p-1 bg-themed-tertiary">
+                <button
+                  v-for="period in periodItems"
+                  :key="period.value"
+                  class="px-3 py-1.5 text-sm rounded-md transition-colors"
+                  :class="instancePeriod === period.value ? 'bg-themed text-themed shadow-sm' : 'text-themed-muted hover:text-themed'"
+                  @click="instancePeriod = period.value"
+                >
+                  {{ t(period.labelKey) }}
+                </button>
+              </div>
+            </div>
+
+            <div class="chart-area mt-6">
+              <div v-for="(point, index) in instanceSeries" :key="point.label" class="chart-column group">
+                <div class="chart-value" :title="`${point.label}: ${formatValue(point.value, 'number')}`">
+                  <span class="chart-tooltip">{{ t('admin.statistics.tooltip', { label: point.label, value: formatValue(point.value, 'number') }) }}</span>
+                  <div
+                    :class="['chart-bar', barToneClass('emerald')]"
+                    :style="{ height: `${barHeight(point, instanceSeries)}%` }"
+                  ></div>
+                </div>
+                <span class="chart-tick">{{ shouldShowTick(index, instanceSeries.length) ? formatTick(point.label) : '' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card p-5">
+            <h2 class="text-base font-semibold text-themed">{{ t('admin.statistics.sections.paidFreeInstances') }}</h2>
+            <p class="text-sm text-themed-muted mt-1">{{ t('admin.statistics.sections.paidFreeDescription') }}</p>
+
+            <div class="mt-8">
+              <div class="h-3 rounded-full overflow-hidden bg-themed-tertiary flex">
+                <div class="bg-blue-500" :style="{ width: `${paidPercent}%` }"></div>
+                <div class="bg-emerald-500" :style="{ width: `${freePercent}%` }"></div>
+              </div>
+
+              <div class="mt-6 space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+                    <span class="text-sm text-themed-secondary">{{ t('admin.statistics.labels.paidInstances') }}</span>
+                  </div>
+                  <div class="text-right">
+                    <p class="text-sm font-medium text-themed">{{ formatValue(stats.instances.paid, 'number') }}</p>
+                    <p class="text-xs text-themed-muted">{{ paidPercent }}%</p>
+                  </div>
+                </div>
+
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
+                    <span class="text-sm text-themed-secondary">{{ t('admin.statistics.labels.freeInstances') }}</span>
+                  </div>
+                  <div class="text-right">
+                    <p class="text-sm font-medium text-themed">{{ formatValue(stats.instances.free, 'number') }}</p>
+                    <p class="text-xs text-themed-muted">{{ freePercent }}%</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section v-else class="space-y-5">
+        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <div v-for="card in billingCards" :key="card.label" class="card p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <p class="text-sm text-themed-muted">{{ card.label }}</p>
+                <p class="mt-2 text-2xl font-semibold text-themed">{{ formatCompactValue(card.value, card.type) }}</p>
+                <p class="mt-1 text-xs text-themed-faint">{{ card.caption }}</p>
+              </div>
+              <div :class="['w-10 h-10 rounded-lg border flex items-center justify-center', cardToneClass(card.tone)]">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 7.5A2.5 2.5 0 0 1 5.5 5h11A2.5 2.5 0 0 1 19 7.5V9h-2.5a3.5 3.5 0 1 0 0 7H19v.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 3 16.5v-9Z" />
+                  <circle cx="16.5" cy="12.5" r="0.75" fill="currentColor" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card p-5">
+          <div class="flex flex-col lg:flex-row lg:items-start justify-between gap-4">
+            <div>
+              <h2 class="text-base font-semibold text-themed">
+                {{ t('admin.statistics.sections.metricTrend', { metric: t(currentBillingMetric.labelKey) }) }}
+              </h2>
+              <p class="text-sm text-themed-muted mt-1">
+                {{ t('admin.statistics.sections.billingScope', {
+                  range: billingPeriod === 'daily' ? t('admin.statistics.ranges.last30Days') : t('admin.statistics.ranges.last12Months')
+                }) }}
+              </p>
+            </div>
+
+            <div class="flex flex-col sm:flex-row gap-3">
+              <div class="flex flex-wrap rounded-lg border border-themed p-1 bg-themed-tertiary">
+                <button
+                  v-for="metric in billingMetricItems"
+                  :key="metric.value"
+                  class="px-3 py-1.5 text-sm rounded-md transition-colors"
+                  :class="billingMetric === metric.value ? 'bg-themed text-themed shadow-sm' : 'text-themed-muted hover:text-themed'"
+                  @click="billingMetric = metric.value"
+                >
+                  {{ t(metric.labelKey) }}
+                </button>
+              </div>
+
+              <div class="inline-flex rounded-lg border border-themed p-1 bg-themed-tertiary">
+                <button
+                  v-for="period in periodItems"
+                  :key="period.value"
+                  class="px-3 py-1.5 text-sm rounded-md transition-colors"
+                  :class="billingPeriod === period.value ? 'bg-themed text-themed shadow-sm' : 'text-themed-muted hover:text-themed'"
+                  @click="billingPeriod = period.value"
+                >
+                  {{ t(period.labelKey) }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="chart-area mt-6">
+            <div v-for="(point, index) in billingSeries" :key="point.label" class="chart-column group">
+              <div class="chart-value" :title="`${point.label}: ${formatValue(point.value, 'money')}`">
+                <span class="chart-tooltip">{{ t('admin.statistics.tooltip', { label: point.label, value: formatCompactValue(point.value, 'money') }) }}</span>
+                <div
+                  :class="['chart-bar', barToneClass(currentBillingMetric.tone)]"
+                  :style="{ height: `${barHeight(point, billingSeries)}%` }"
+                ></div>
+              </div>
+              <span class="chart-tick">{{ shouldShowTick(index, billingSeries.length) ? formatTick(point.label) : '' }}</span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div v-else class="card p-12 text-center">
+      <p class="text-themed-muted">{{ t('admin.statistics.noData') }}</p>
+      <button class="btn btn-primary mt-4" @click="loadStatistics">{{ t('admin.statistics.reload') }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chart-area {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(26px, 1fr);
+  align-items: end;
+  gap: 0.5rem;
+  min-height: 18rem;
+  overflow-x: auto;
+  padding: 2.75rem 0.25rem 1.25rem;
+  scrollbar-gutter: stable;
+}
+
+.chart-column {
+  min-width: 26px;
+}
+
+.chart-value {
+  position: relative;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  height: 15rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.chart-bar {
+  width: min(70%, 1.6rem);
+  min-height: 0;
+  border-radius: 0.45rem 0.45rem 0 0;
+  transition: height 0.25s ease, opacity 0.15s ease;
+}
+
+.chart-column:hover .chart-bar {
+  opacity: 0.78;
+}
+
+.chart-bar-blue {
+  background-color: #2563eb;
+}
+
+.chart-bar-emerald {
+  background-color: #059669;
+}
+
+.chart-bar-amber {
+  background-color: #d97706;
+}
+
+.chart-bar-rose {
+  background-color: #e11d48;
+}
+
+:global(.dark) .chart-bar-blue {
+  background-color: #60a5fa;
+}
+
+:global(.dark) .chart-bar-emerald {
+  background-color: #34d399;
+}
+
+:global(.dark) .chart-bar-amber {
+  background-color: #fbbf24;
+}
+
+:global(.dark) .chart-bar-rose {
+  background-color: #fb7185;
+}
+
+.chart-tooltip {
+  position: absolute;
+  top: -2.25rem;
+  left: 50%;
+  z-index: 10;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.chart-column:hover .chart-tooltip {
+  opacity: 1;
+}
+
+.chart-tick {
+  display: block;
+  width: max-content;
+  min-height: 1rem;
+  margin: 0.5rem auto 0;
+  text-align: center;
+  font-size: 0.68rem;
+  line-height: 1rem;
+  white-space: nowrap;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  color: var(--text-tertiary);
+}
+</style>
diff --git a/client/src/views/admin/SystemConfigView.vue b/client/src/views/admin/SystemConfigView.vue
new file mode 100644
index 0000000..1ba7895
--- /dev/null
+++ b/client/src/views/admin/SystemConfigView.vue
@@ -0,0 +1,1828 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import api from '@/api'
+import { useConfigStore } from '@/stores/config'
+import { useToast } from '@/stores/toast'
+import type { Package } from '@/types/api'
+import { translateError } from '@/utils/errorHandler'
+import {
+  systemSettingsNavigationItems,
+  systemSettingsSections,
+  type SystemSettingsSectionKey
+} from '@/constants/adminSettings'
+
+const { t } = useI18n()
+const toast = useToast()
+const route = useRoute()
+const configStore = useConfigStore()
+
+const loading = ref(true)
+// 每个卡片独立的 saving 状态
+const savingRegistration = ref(false)
+const savingInvitePricing = ref(false)
+const savingPopupAnnouncement = ref(false)
+const savingPopupPromo = ref(false)
+const savingHostingFeature = ref(false)
+const savingQuota = ref(false)
+const savingTurnstile = ref(false)
+const savingAvatar = ref(false)
+const savingSmtp = ref(false)
+const savingEmailDomain = ref(false)
+const savingTransfer = ref(false)
+const savingFooterLinks = ref(false)
+const savingBrand = ref(false)
+const savingTicket = ref(false)
+const savingFreeSite = ref(false)
+const savingTicketImages = ref(false)
+const testingSmtp = ref(false)
+const sendingTestEmail = ref(false)
+const testEmailTo = ref('')
+const popupPromoPackages = ref<Package[]>([])
+const popupPromoPackagesLoading = ref(false)
+const popupPromoPackagesLoaded = ref(false)
+const MAX_TRANSFER_FEE = 100
+
+interface ConfigItem {
+  id: number
+  key: string
+  value: string
+  type: string
+  label: string | null
+  description: string | null
+}
+
+const configs = ref<ConfigItem[]>([])
+
+// 表单数据
+const form = ref({
+  default_quota_host: 0,
+  default_quota_friend: 0,
+  default_quota_package: 0,
+  registration_enabled: true,
+  require_invite_code: true,
+  invite_generation_costs: [
+    { resource: 'balance', amount: 0, enabled: false },
+    { resource: 'points', amount: 0, enabled: false }
+  ],
+  invite_default_expire_days: 0,
+  popup_announcement: '',
+  popup_promo_image_url: '',
+  popup_promo_package_id: '',
+  hosting_feature_enabled: true,
+  hosting_market_entry_enabled: true,
+  hosting_notice: '',
+  ticket_enabled: true,
+  free_site_mode: false,
+  free_site_register_gift_enabled: false,
+  free_site_register_gift_balance: 0,
+  free_site_register_gift_points: 0,
+  // Turnstile 配置
+  turnstile_enabled: false,
+  turnstile_site_key: '',
+  turnstile_secret_key: '',
+  // 头像 API 配置
+  avatar_api_base: 'https://api.dicebear.com/9.x',
+  // SMTP 邮件配置
+  smtp_enabled: false,
+  smtp_host: '',
+  smtp_port: 587,
+  smtp_secure: false,
+  smtp_username: '',
+  smtp_password: '',
+  smtp_from_email: '',
+  smtp_from_name: 'Incudal',
+  brand_name: 'Incudal',
+  brand_subtitle: '基于 Incus 的低价 NAT VPS',
+  brand_logo_url: '/incudal_logo.webp',
+  // 邮箱域名白名单配置
+  email_domain_whitelist_enabled: false,
+  email_allowed_domains: '',
+  // 转移手续费配置
+  transfer_fee: 0,
+  // 侧边栏底部联系方式
+  footer_contact_email: 'incudal@sent.com',
+  // 工单图片 Lsky 配置
+  ticket_image_lsky_base_url: '',
+  ticket_image_lsky_token: '',
+  ticket_image_lsky_api_version: 'v1',
+  ticket_image_lsky_target_id: ''
+})
+
+// Config metadata - computed to support i18n
+// 注意：好友配额已禁用，不再显示 default_quota_friend
+const configMeta = computed(() => {
+  try {
+    return {
+      default_quota_host: {
+        label: t('admin.system.quotaHost') || '默认宿主机配额',
+        unit: t('admin.system.unitCount') || '个',
+        description: t('admin.system.quotaHostDesc') || '新用户默认可创建宿主机数量'
+      },
+      default_quota_package: {
+        label: t('admin.system.quotaPackage') || '默认套餐配额',
+        unit: t('admin.system.unitCount') || '个',
+        description: t('admin.system.quotaPackageDesc') || '新用户默认可创建套餐数量（0 = 未授权）'
+      }
+    }
+  } catch (err) {
+    console.error('Config metadata computation failed:', err)
+    // 返回默认值，确保组件能正常渲染
+    return {
+      default_quota_host: { label: '默认宿主机配额', unit: '个', description: '新用户默认可创建宿主机数量（0 = 未授权）' },
+      default_quota_package: { label: '默认套餐配额', unit: '个', description: '新用户默认可创建套餐数量（0 = 未授权）' }
+    }
+  }
+})
+
+// 数字类型的配置键
+// 注意：不再限制实例配额，已删除 default_quota_instance
+const numericConfigKeys = ['default_quota_host', 'default_quota_friend', 'default_quota_package', 'smtp_port', 'free_site_register_gift_points', 'invite_default_expire_days']
+
+// 浮点数类型的配置键
+const floatConfigKeys = ['transfer_fee', 'free_site_register_gift_balance']
+
+// 布尔类型的配置键
+const booleanConfigKeys = ['registration_enabled', 'require_invite_code', 'hosting_feature_enabled', 'hosting_market_entry_enabled', 'ticket_enabled', 'free_site_mode', 'free_site_register_gift_enabled', 'turnstile_enabled', 'smtp_enabled', 'smtp_secure', 'email_domain_whitelist_enabled']
+
+// 字符串类型的配置键
+const stringConfigKeys = ['turnstile_site_key', 'turnstile_secret_key', 'avatar_api_base', 'smtp_host', 'smtp_username', 'smtp_password', 'smtp_from_email', 'smtp_from_name', 'email_allowed_domains', 'footer_contact_email', 'brand_name', 'brand_subtitle', 'brand_logo_url', 'hosting_notice']
+stringConfigKeys.push('popup_announcement', 'popup_promo_image_url', 'popup_promo_package_id', 'ticket_image_lsky_base_url', 'ticket_image_lsky_token', 'ticket_image_lsky_api_version', 'ticket_image_lsky_target_id')
+
+const jsonConfigKeys = ['invite_generation_costs']
+
+const currentSectionKey = computed<SystemSettingsSectionKey>(() => {
+  return systemSettingsSections.find(section => section.path === route.path)?.key || 'access'
+})
+
+const currentSection = computed(() =>
+  systemSettingsSections.find(section => section.key === currentSectionKey.value) || systemSettingsSections[0]
+)
+
+const isAccessSection = computed(() => currentSectionKey.value === 'access')
+const isHostingSection = computed(() => currentSectionKey.value === 'hosting')
+const isBrandSection = computed(() => currentSectionKey.value === 'brand')
+const isSecuritySection = computed(() => currentSectionKey.value === 'security')
+const isMailSection = computed(() => currentSectionKey.value === 'mail')
+const isTicketSection = computed(() => currentSectionKey.value === 'tickets')
+const isPopupAnnouncementTab = computed(() => currentSectionKey.value === 'popup')
+
+function hasAtMostTwoDecimalPlaces(value: number): boolean {
+  const cents = value * 100
+  return Math.abs(cents - Math.round(cents)) < 1e-8
+}
+
+function getConfigSaveErrorMessage(err: any): string {
+  const details = typeof err?.details === 'string' ? err.details : ''
+  if (details && !Object.prototype.hasOwnProperty.call(form.value, details)) {
+    return details
+  }
+  return translateError({ ...err, details: null })
+}
+
+onMounted(async () => {
+  try {
+    const tasks: Promise<void>[] = [loadConfigs()]
+    if (isPopupAnnouncementTab.value) {
+      tasks.push(loadPopupPromoPackages())
+    }
+    await Promise.all(tasks)
+  } catch (err: unknown) {
+    console.error('[SystemConfigView] Failed to load configs:', err)
+    const errorMessage = (err && typeof err === 'object' && 'message' in err)
+      ? String(err.message)
+      : String(err)
+    try {
+      toast.error((t('admin.system.loadFailed') || '加载配置失败') + ': ' + errorMessage)
+    } catch (toastErr) {
+      console.error('[SystemConfigView] Failed to show toast:', toastErr)
+    }
+    // 即使加载失败，也要确保页面能够显示
+    loading.value = false
+  }
+})
+
+watch(isPopupAnnouncementTab, (active) => {
+  if (active) {
+    void loadPopupPromoPackages()
+  }
+})
+
+async function loadConfigs() {
+  loading.value = true
+  try {
+    const response = await api.systemConfig.list()
+
+    if (!response || typeof response !== 'object') {
+      console.warn('[SystemConfigView] Invalid response format:', response)
+      configs.value = []
+      return
+    }
+
+    configs.value = Array.isArray(response.configs) ? response.configs : []
+
+    // 填充表单
+    if (Array.isArray(response.configs)) {
+      for (const config of response.configs) {
+        if (config && typeof config === 'object' && config.key && config.key in form.value) {
+          try {
+            if (numericConfigKeys.includes(config.key)) {
+              (form.value as any)[config.key] = parseInt(config.value, 10) || 0
+            } else if (floatConfigKeys.includes(config.key)) {
+              (form.value as any)[config.key] = parseFloat(config.value) || 0
+            } else if (booleanConfigKeys.includes(config.key)) {
+              (form.value as any)[config.key] = config.value === 'true'
+            } else if (stringConfigKeys.includes(config.key)) {
+              (form.value as any)[config.key] = config.value || ''
+            } else if (jsonConfigKeys.includes(config.key)) {
+              try {
+                (form.value as any)[config.key] = JSON.parse(config.value || '[]')
+              } catch {
+                (form.value as any)[config.key] = []
+              }
+            }
+          } catch (configErr) {
+            console.error(`[SystemConfigView] Failed to process config key "${config.key}":`, configErr)
+          }
+        }
+      }
+    }
+  } catch (err: any) {
+    console.error('[SystemConfigView] Error loading configs:', err)
+    try {
+      toast.error((t('admin.system.loadFailed') || '加载配置失败') + ': ' + (err?.message || String(err)))
+    } catch (toastErr) {
+      console.error('[SystemConfigView] Failed to show toast:', toastErr)
+    }
+    // 确保configs是一个空数组，避免后续代码出错
+    configs.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadPopupPromoPackages() {
+  if (popupPromoPackagesLoading.value || popupPromoPackagesLoaded.value) {
+    return
+  }
+  popupPromoPackagesLoading.value = true
+  try {
+    const [officialResponse, marketResponse] = await Promise.all([
+      api.packages.list({ source: 'official' }),
+      api.packages.list({ source: 'market' })
+    ])
+    popupPromoPackages.value = [
+      ...(officialResponse.packages || []),
+      ...(marketResponse.packages || [])
+    ].filter(pkg => pkg.active === 1)
+    popupPromoPackagesLoaded.value = true
+  } catch (err) {
+    console.error('[SystemConfigView] Failed to load promo packages:', err)
+    popupPromoPackages.value = []
+  } finally {
+    popupPromoPackagesLoading.value = false
+  }
+}
+
+// 通用保存函数
+async function saveConfigGroup(keys: string[], savingRef: { value: boolean }) {
+  savingRef.value = true
+  try {
+    const configsToUpdate = keys.map(key => ({
+      key,
+      value: jsonConfigKeys.includes(key)
+        ? JSON.stringify((form.value as any)[key] || [])
+        : typeof (form.value as any)[key] === 'boolean'
+          ? ((form.value as any)[key] ? 'true' : 'false')
+          : String((form.value as any)[key])
+    }))
+
+    await api.systemConfig.update(configsToUpdate)
+    toast.success(t('admin.system.saveSuccess'))
+    await loadConfigs()
+  } catch (err: any) {
+    toast.error(t('admin.system.saveFailed') + ': ' + getConfigSaveErrorMessage(err))
+  } finally {
+    savingRef.value = false
+  }
+}
+
+// 注册设置保存
+const registrationKeys = ['registration_enabled', 'require_invite_code']
+async function saveRegistration() {
+  await saveConfigGroup(registrationKeys, savingRegistration)
+}
+const hasRegistrationChanges = computed(() => {
+  return registrationKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+function normalizeInviteCostOptions() {
+  const options = Array.isArray(form.value.invite_generation_costs)
+    ? form.value.invite_generation_costs
+    : []
+  const optionMap = new Map(options.map((option: any) => [option.resource, option]))
+  for (const resource of ['balance', 'points']) {
+    if (!optionMap.has(resource)) {
+      optionMap.set(resource, { resource, amount: 0, enabled: false })
+    }
+  }
+  form.value.invite_generation_costs = Array.from(optionMap.values()).map((option: any) => ({
+    resource: option.resource,
+    amount: option.resource === 'points'
+      ? Math.max(0, Math.floor(Number(option.amount) || 0))
+      : Math.max(0, Math.round((Number(option.amount) || 0) * 100) / 100),
+    enabled: option.enabled === true
+  }))
+}
+
+const invitePricingKeys = ['invite_generation_costs', 'invite_default_expire_days']
+async function saveInvitePricing() {
+  normalizeInviteCostOptions()
+  await saveConfigGroup(invitePricingKeys, savingInvitePricing)
+}
+const hasInvitePricingChanges = computed(() => {
+  return invitePricingKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    const currentValue = jsonConfigKeys.includes(key)
+      ? JSON.stringify((form.value as any)[key] || [])
+      : String((form.value as any)[key])
+    return currentValue !== config.value
+  })
+})
+
+const popupAnnouncementKeys = ['popup_announcement']
+async function savePopupAnnouncement() {
+  await saveConfigGroup(popupAnnouncementKeys, savingPopupAnnouncement)
+  await configStore.loadPublicConfig(true)
+}
+const hasPopupAnnouncementChanges = computed(() => {
+  return popupAnnouncementKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const popupPromoKeys = ['popup_promo_image_url', 'popup_promo_package_id']
+async function savePopupPromo() {
+  await saveConfigGroup(popupPromoKeys, savingPopupPromo)
+  await configStore.loadPublicConfig(true)
+}
+const hasPopupPromoChanges = computed(() => {
+  return popupPromoKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+const selectedPopupPromoPackage = computed(() => {
+  const packageId = Number(form.value.popup_promo_package_id)
+  if (!Number.isInteger(packageId) || packageId <= 0) return null
+  return popupPromoPackages.value.find(pkg => pkg.id === packageId) || null
+})
+
+// 转移设置保存
+const transferKeys = ['transfer_fee']
+async function saveTransfer() {
+  const fee = Number(form.value.transfer_fee)
+  if (!Number.isFinite(fee) || fee < 0 || fee > MAX_TRANSFER_FEE || !hasAtMostTwoDecimalPlaces(fee)) {
+    toast.error(t('admin.system.transfer.feeRangeError', { max: MAX_TRANSFER_FEE.toFixed(2) }))
+    return
+  }
+  form.value.transfer_fee = Math.round(fee * 100) / 100
+  await saveConfigGroup(transferKeys, savingTransfer)
+  await configStore.loadPublicConfig(true)
+}
+const hasTransferChanges = computed(() => {
+  return transferKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const hostingFeatureKeys = ['hosting_feature_enabled', 'hosting_market_entry_enabled', 'hosting_notice']
+async function saveHostingFeature() {
+  await saveConfigGroup(hostingFeatureKeys, savingHostingFeature)
+  await configStore.loadPublicConfig(true)
+}
+const hasHostingFeatureChanges = computed(() => {
+  return hostingFeatureKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const footerLinkKeys = ['footer_contact_email']
+async function saveFooterLinks() {
+  await saveConfigGroup(footerLinkKeys, savingFooterLinks)
+}
+const hasFooterLinkChanges = computed(() => {
+  return footerLinkKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const brandKeys = ['brand_name', 'brand_subtitle', 'brand_logo_url']
+async function saveBrand() {
+  await saveConfigGroup(brandKeys, savingBrand)
+  await configStore.loadPublicConfig(true)
+}
+const hasBrandChanges = computed(() => {
+  return brandKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const ticketKeys = ['ticket_enabled']
+async function saveTicket() {
+  await saveConfigGroup(ticketKeys, savingTicket)
+  await configStore.loadPublicConfig(true)
+}
+const hasTicketChanges = computed(() => {
+  return ticketKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const freeSiteKeys = ['free_site_mode', 'free_site_register_gift_enabled', 'free_site_register_gift_balance', 'free_site_register_gift_points']
+async function saveFreeSite() {
+  await saveConfigGroup(freeSiteKeys, savingFreeSite)
+  await configStore.loadPublicConfig(true)
+}
+function toggleFreeSiteMode() {
+  form.value.free_site_mode = !form.value.free_site_mode
+  if (!form.value.free_site_mode) {
+    form.value.free_site_register_gift_enabled = false
+    form.value.free_site_register_gift_balance = 0
+    form.value.free_site_register_gift_points = 0
+  }
+}
+function toggleFreeSiteRegisterGift() {
+  if (!form.value.free_site_mode) return
+  form.value.free_site_register_gift_enabled = !form.value.free_site_register_gift_enabled
+  if (!form.value.free_site_register_gift_enabled) {
+    form.value.free_site_register_gift_balance = 0
+    form.value.free_site_register_gift_points = 0
+  }
+}
+const hasFreeSiteChanges = computed(() => {
+  return freeSiteKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const ticketImageKeys = ['ticket_image_lsky_base_url', 'ticket_image_lsky_token', 'ticket_image_lsky_api_version', 'ticket_image_lsky_target_id']
+async function saveTicketImages() {
+  await saveConfigGroup(ticketImageKeys, savingTicketImages)
+}
+const hasTicketImageChanges = computed(() => {
+  return ticketImageKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+// 用户默认配额保存
+// 注意：不再限制实例配额，已删除 default_quota_instance
+// 注意：好友配额已禁用，保留 default_quota_friend 以确保旧数据兼容
+const quotaKeys = ['default_quota_host', 'default_quota_friend', 'default_quota_package']
+async function saveQuota() {
+  await saveConfigGroup(quotaKeys, savingQuota)
+}
+const hasQuotaChanges = computed(() => {
+  return quotaKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+// Turnstile 保存
+const turnstileKeys = ['turnstile_enabled', 'turnstile_site_key', 'turnstile_secret_key']
+async function saveTurnstile() {
+  await saveConfigGroup(turnstileKeys, savingTurnstile)
+}
+const hasTurnstileChanges = computed(() => {
+  return turnstileKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+// 头像 API 保存
+const avatarKeys = ['avatar_api_base']
+async function saveAvatar() {
+  await saveConfigGroup(avatarKeys, savingAvatar)
+}
+const hasAvatarChanges = computed(() => {
+  return avatarKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+// SMTP 保存
+const smtpKeys = ['smtp_enabled', 'smtp_host', 'smtp_port', 'smtp_secure', 'smtp_username', 'smtp_password', 'smtp_from_email', 'smtp_from_name']
+async function saveSmtp() {
+  await saveConfigGroup(smtpKeys, savingSmtp)
+}
+const hasSmtpChanges = computed(() => {
+  return smtpKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+// 邮箱域名白名单保存
+const emailDomainKeys = ['email_domain_whitelist_enabled', 'email_allowed_domains']
+async function saveEmailDomain() {
+  await saveConfigGroup(emailDomainKeys, savingEmailDomain)
+}
+const hasEmailDomainChanges = computed(() => {
+  return emailDomainKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+async function testSmtpConnection() {
+  testingSmtp.value = true
+  try {
+    const result = await api.systemConfig.testSmtp()
+    if (result.success) {
+      toast.success(t('admin.system.smtp.testSuccess'))
+    } else {
+      toast.error(t('admin.system.smtp.testFailed') + ': ' + (result.error || 'Unknown error'))
+    }
+  } catch (err: any) {
+    toast.error(t('admin.system.smtp.testFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    testingSmtp.value = false
+  }
+}
+
+async function sendTestEmail() {
+  if (!testEmailTo.value || !testEmailTo.value.includes('@')) {
+    toast.error(t('admin.system.smtp.invalidEmail'))
+    return
+  }
+
+  sendingTestEmail.value = true
+  try {
+    const result = await api.systemConfig.sendTestEmail(testEmailTo.value)
+    if (result.success) {
+      toast.success(t('admin.system.smtp.testEmailSent', { email: testEmailTo.value }))
+      testEmailTo.value = ''
+    } else {
+      toast.error(t('admin.system.smtp.testEmailFailed') + ': ' + (result.error || 'Unknown error'))
+    }
+  } catch (err: any) {
+    toast.error(t('admin.system.smtp.testEmailFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    sendingTestEmail.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ t('admin.system.title') || '系统设置' }}</h1>
+        <p class="page-description">{{ t(currentSection.descriptionKey) || t('admin.system.description') }}</p>
+      </div>
+    </div>
+
+    <div class="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700">
+      <router-link
+        v-for="item in systemSettingsNavigationItems"
+        :key="item.path"
+        :to="item.path"
+        class="shrink-0 px-4 py-3 text-sm font-medium border-b-2 transition-colors"
+        :class="route.path === item.path
+          ? 'border-black dark:border-white text-gray-900 dark:text-white'
+          : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
+      >
+        {{ t(item.labelKey) }}
+      </router-link>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="card p-6 animate-pulse">
+      <div class="h-6 bg-themed-secondary rounded w-1/4 mb-6"></div>
+      <div class="space-y-4">
+        <div v-for="i in 7" :key="i" class="h-12 bg-themed-secondary rounded"></div>
+      </div>
+    </div>
+
+    <!-- Config Form -->
+    <div v-else class="space-y-6">
+      <div v-if="isPopupAnnouncementTab" class="card p-6">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-2">
+          <div>
+            <h3 class="text-themed font-medium">{{ t('admin.system.popupAnnouncement.title') }}</h3>
+            <p class="text-sm text-themed-muted mt-1">{{ t('admin.system.popupAnnouncement.description') }}</p>
+          </div>
+          <button
+            type="button"
+            class="btn-primary text-sm px-4 py-1.5"
+            :disabled="!hasPopupAnnouncementChanges || savingPopupAnnouncement || form.popup_announcement.length > 5000"
+            @click="savePopupAnnouncement"
+          >
+            {{ savingPopupAnnouncement ? t('admin.system.saving') : t('admin.system.save') }}
+          </button>
+        </div>
+
+        <div class="mt-6 space-y-2">
+          <label class="block text-sm text-themed-secondary">
+            {{ t('admin.system.popupAnnouncement.content') }}
+          </label>
+          <textarea
+            v-model="form.popup_announcement"
+            rows="8"
+            maxlength="5000"
+            class="input min-h-[180px] resize-y"
+            :placeholder="t('admin.system.popupAnnouncement.placeholder')"
+          />
+          <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-xs text-themed-muted">{{ t('admin.system.popupAnnouncement.hint') }}</p>
+            <p class="text-xs" :class="form.popup_announcement.length > 5000 ? 'text-red-500' : 'text-themed-muted'">
+              {{ form.popup_announcement.length }}/5000
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="isPopupAnnouncementTab" class="card p-6">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-2">
+          <div>
+            <h3 class="text-themed font-medium">{{ t('admin.system.popupAnnouncement.promoTitle') }}</h3>
+            <p class="text-sm text-themed-muted mt-1">{{ t('admin.system.popupAnnouncement.promoDescription') }}</p>
+          </div>
+          <button
+            type="button"
+            class="btn-primary text-sm px-4 py-1.5"
+            :disabled="!hasPopupPromoChanges || savingPopupPromo || form.popup_promo_image_url.length > 1000"
+            @click="savePopupPromo"
+          >
+            {{ savingPopupPromo ? t('admin.system.saving') : t('admin.system.save') }}
+          </button>
+        </div>
+
+        <div class="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1.5">
+                {{ t('admin.system.popupAnnouncement.promoImageUrl') }}
+              </label>
+              <input
+                v-model="form.popup_promo_image_url"
+                type="url"
+                maxlength="1000"
+                class="input w-full"
+                :placeholder="t('admin.system.popupAnnouncement.promoImagePlaceholder')"
+              />
+              <div class="mt-1 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+                <p class="text-xs text-themed-muted">{{ t('admin.system.popupAnnouncement.promoImageHint') }}</p>
+                <p class="text-xs" :class="form.popup_promo_image_url.length > 1000 ? 'text-red-500' : 'text-themed-muted'">
+                  {{ form.popup_promo_image_url.length }}/1000
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <label class="block text-sm text-themed-secondary mb-1.5">
+                {{ t('admin.system.popupAnnouncement.promoPackage') }}
+              </label>
+              <select
+                v-model="form.popup_promo_package_id"
+                class="input w-full"
+                :disabled="popupPromoPackagesLoading"
+              >
+                <option value="">
+                  {{ popupPromoPackagesLoading ? t('admin.system.popupAnnouncement.promoPackageLoading') : t('admin.system.popupAnnouncement.promoPackagePlaceholder') }}
+                </option>
+                <option v-if="!popupPromoPackagesLoading && popupPromoPackages.length === 0" value="" disabled>
+                  {{ t('admin.system.popupAnnouncement.promoPackageEmpty') }}
+                </option>
+                <option v-for="pkg in popupPromoPackages" :key="pkg.id" :value="String(pkg.id)">
+                  #{{ pkg.id }} · {{ pkg.name }}
+                </option>
+              </select>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.popupAnnouncement.promoPackageHint') }}</p>
+            </div>
+          </div>
+
+          <div class="rounded-lg border border-themed overflow-hidden bg-themed-secondary/30">
+            <div class="max-h-[360px] min-h-[160px] bg-themed-secondary flex items-center justify-center overflow-hidden">
+              <img
+                v-if="form.popup_promo_image_url"
+                :src="form.popup_promo_image_url"
+                :alt="selectedPopupPromoPackage?.name || t('admin.system.popupAnnouncement.promoPreview')"
+                class="max-h-[360px] max-w-full object-contain"
+              />
+              <div v-else class="px-6 text-center text-sm text-themed-muted">
+                {{ t('admin.system.popupAnnouncement.promoPreviewEmpty') }}
+              </div>
+            </div>
+            <div class="p-4">
+              <p class="text-xs text-themed-muted">{{ t('admin.system.popupAnnouncement.promoPreview') }}</p>
+              <p class="mt-1 text-sm font-medium text-themed truncate">
+                {{ selectedPopupPromoPackage?.name || t('admin.system.popupAnnouncement.promoNoPackage') }}
+              </p>
+              <button type="button" class="btn-primary w-full mt-3 text-sm" disabled>
+                {{ t('popupAnnouncement.buyNow', { name: selectedPopupPromoPackage?.name || t('admin.system.popupAnnouncement.promoPackageFallback') }) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template v-else>
+        <!-- Registration settings -->
+        <div v-if="isAccessSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.registration') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasRegistrationChanges || savingRegistration"
+              @click="saveRegistration"
+            >
+              {{ savingRegistration ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.registrationDesc') }}</p>
+
+          <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50 mb-4">
+            <div class="flex-1">
+              <label class="text-sm font-medium text-themed">{{ t('admin.system.registrationEnabled') }}</label>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.registrationEnabledDesc') }}</p>
+            </div>
+            <div class="flex items-center gap-3 ml-4">
+              <span class="text-xs" :class="form.registration_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                {{ t('admin.system.registrationClosed') }}
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.registration_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.registration_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.registration_enabled = !form.registration_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.registration_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.registration_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                {{ t('admin.system.registrationOpen') }}
+              </span>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50">
+            <div class="flex-1">
+              <label class="text-sm font-medium text-themed">{{ t('admin.system.requireInviteCode') }}</label>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.requireInviteCodeDesc') }}</p>
+            </div>
+            <div class="flex items-center gap-3 ml-4">
+              <span class="text-xs" :class="form.require_invite_code ? 'text-themed-muted' : 'text-themed font-medium'">
+                {{ t('admin.system.openRegistration') }}
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.require_invite_code"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.require_invite_code
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.require_invite_code = !form.require_invite_code"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.require_invite_code ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.require_invite_code ? 'text-themed font-medium' : 'text-themed-muted'">
+                {{ t('admin.system.inviteOnly') }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isAccessSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">邀请码生成定价</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasInvitePricingChanges || savingInvitePricing"
+              @click="saveInvitePricing"
+            >
+              {{ savingInvitePricing ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">配置普通用户生成一个邀请码需要消耗的资源。当前支持余额和积分，价格保存为可扩展的成本项列表。</p>
+
+          <div class="grid gap-4 lg:grid-cols-2">
+            <div
+              v-for="option in form.invite_generation_costs"
+              :key="option.resource"
+              class="rounded-lg bg-themed-secondary/50 p-4"
+            >
+              <div class="flex items-center justify-between gap-4">
+                <div>
+                  <label class="text-sm font-medium text-themed">
+                    {{ option.resource === 'balance' ? '余额生成' : option.resource === 'points' ? '积分生成' : option.resource }}
+                  </label>
+                  <p class="mt-1 text-xs text-themed-muted">
+                    {{ option.resource === 'balance' ? '用户每生成 1 个邀请码扣除账户余额' : '用户每生成 1 个邀请码扣除积分' }}
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  role="switch"
+                  :aria-checked="option.enabled"
+                  class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  :class="option.enabled ? 'bg-green-500 focus:ring-green-500' : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'"
+                  @click="option.enabled = !option.enabled"
+                >
+                  <span
+                    class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                    :class="option.enabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+              </div>
+
+              <div class="mt-4">
+                <label class="block text-xs text-themed-muted mb-1.5">
+                  {{ option.resource === 'balance' ? '单个价格（元）' : '单个价格（积分）' }}
+                </label>
+                <div class="relative max-w-xs">
+                  <span v-if="option.resource === 'balance'" class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+                  <input
+                    v-model.number="option.amount"
+                    type="number"
+                    min="0"
+                    :step="option.resource === 'balance' ? '0.01' : '1'"
+                    class="input"
+                    :class="option.resource === 'balance' ? 'pl-8' : ''"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-5 space-y-2">
+            <label class="block text-sm text-themed-secondary">默认有效期</label>
+            <div class="relative max-w-xs">
+              <input
+                v-model.number="form.invite_default_expire_days"
+                type="number"
+                min="0"
+                max="3650"
+                step="1"
+                class="input pr-12"
+              />
+              <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">天</span>
+            </div>
+            <p class="text-xs text-themed-muted">0 表示用户生成的邀请码永不过期。</p>
+          </div>
+        </div>
+
+        <div v-if="isHostingSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.hostingFeature.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasHostingFeatureChanges || savingHostingFeature"
+              @click="saveHostingFeature"
+            >
+              {{ savingHostingFeature ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.hostingFeature.description') }}</p>
+
+          <div class="space-y-4">
+            <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50">
+              <div class="flex-1">
+                <label class="text-sm font-medium text-themed">{{ t('admin.system.hostingFeature.enable') }}</label>
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.hostingFeature.enableDesc') }}</p>
+              </div>
+              <div class="flex items-center gap-3 ml-4">
+                <span class="text-xs" :class="form.hosting_feature_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                  {{ t('admin.system.hostingFeature.hiddenForNewUsers') }}
+                </span>
+                <button
+                  type="button"
+                  role="switch"
+                  :aria-checked="form.hosting_feature_enabled"
+                  class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  :class="[
+                    form.hosting_feature_enabled
+                      ? 'bg-green-500 focus:ring-green-500'
+                      : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                  ]"
+                  @click="form.hosting_feature_enabled = !form.hosting_feature_enabled"
+                >
+                  <span
+                    class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                    :class="form.hosting_feature_enabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+                <span class="text-xs" :class="form.hosting_feature_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                  {{ t('admin.system.hostingFeature.visibleToAll') }}
+                </span>
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50">
+              <div class="flex-1">
+                <label class="text-sm font-medium text-themed">{{ t('admin.system.hostingFeature.marketEntry') }}</label>
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.hostingFeature.marketEntryDesc') }}</p>
+              </div>
+              <div class="flex items-center gap-3 ml-4">
+                <span class="text-xs" :class="form.hosting_market_entry_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                  {{ t('admin.system.hostingFeature.marketEntryHidden') }}
+                </span>
+                <button
+                  type="button"
+                  role="switch"
+                  :aria-checked="form.hosting_market_entry_enabled"
+                  class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  :class="[
+                    form.hosting_market_entry_enabled
+                      ? 'bg-green-500 focus:ring-green-500'
+                      : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                  ]"
+                  @click="form.hosting_market_entry_enabled = !form.hosting_market_entry_enabled"
+                >
+                  <span
+                    class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                    :class="form.hosting_market_entry_enabled ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+                <span class="text-xs" :class="form.hosting_market_entry_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                  {{ t('admin.system.hostingFeature.marketEntryVisible') }}
+                </span>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.hostingFeature.notice') }}
+              </label>
+              <textarea
+                v-model="form.hosting_notice"
+                rows="5"
+                class="input min-h-[120px] resize-y"
+                :placeholder="t('admin.system.hostingFeature.noticePlaceholder')"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.hostingFeature.noticeHint') }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Transfer Settings -->
+        <div v-if="isAccessSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.transfer.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasTransferChanges || savingTransfer"
+              @click="saveTransfer"
+            >
+              {{ savingTransfer ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.transfer.description') }}</p>
+
+          <div class="space-y-2">
+            <label class="block text-sm text-themed-secondary">
+              {{ t('admin.system.transfer.feeLabel') }}
+            </label>
+            <div class="relative max-w-xs">
+              <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+              <input
+                v-model.number="form.transfer_fee"
+                type="number"
+                min="0"
+                :max="MAX_TRANSFER_FEE"
+                step="0.01"
+                class="input pl-8 pr-12"
+                placeholder="0.00"
+              />
+              <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">
+                {{ t('admin.system.transfer.feeUnit') }}
+              </span>
+            </div>
+            <p class="text-xs text-themed-muted">{{ t('admin.system.transfer.feeDesc') }}</p>
+          </div>
+        </div>
+
+        <!-- Footer Contact Settings -->
+        <div v-if="isBrandSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.footerLinks.title') || '底部联系方式' }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasFooterLinkChanges || savingFooterLinks"
+              @click="saveFooterLinks"
+            >
+              {{ savingFooterLinks ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.footerLinks.description') || '配置侧边栏底部的邮箱按钮' }}</p>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.footerLinks.email') || '联系邮箱' }}
+              </label>
+              <input
+                v-model="form.footer_contact_email"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.footerLinks.emailPlaceholder') || 'support@example.com 或 mailto:support@example.com'"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.footerLinks.emailDesc') || '留空则隐藏邮箱按钮；支持填写邮箱地址或完整 mailto: 链接。' }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Brand Settings -->
+        <div v-if="isBrandSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.brand.title') || '品牌设置' }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasBrandChanges || savingBrand"
+              @click="saveBrand"
+            >
+              {{ savingBrand ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.brand.description') || '配置站点顶部、登录页、SEO 等位置使用的系统名称与 Logo。留空则使用默认值。' }}</p>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.brand.name') || '系统名称' }}
+              </label>
+              <input
+                v-model="form.brand_name"
+                type="text"
+                class="input"
+                placeholder="Incudal"
+              />
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.brand.subtitle') || '网站副标题' }}
+              </label>
+              <input
+                v-model="form.brand_subtitle"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.brand.subtitlePlaceholder') || '基于 Incus 的低价 NAT VPS'"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.brand.subtitleDesc') || '显示在公开站头部/底部、浏览器默认标题和 SEO 默认描述中。' }}</p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.brand.logo') || 'Logo 地址' }}
+              </label>
+              <input
+                v-model="form.brand_logo_url"
+                type="text"
+                class="input"
+                placeholder="/incudal_logo.webp"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.brand.logoDesc') || '支持 http(s) 图片地址或站点内绝对路径。' }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Free Site Settings -->
+        <div v-if="isHostingSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.freeSite.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasFreeSiteChanges || savingFreeSite"
+              @click="saveFreeSite"
+            >
+              {{ savingFreeSite ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.freeSite.description') }}</p>
+
+          <div class="space-y-4">
+            <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50">
+              <div class="flex-1">
+                <label class="text-sm font-medium text-themed">{{ t('admin.system.freeSite.enable') }}</label>
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.freeSite.enableDesc') }}</p>
+              </div>
+              <div class="flex items-center gap-3 ml-4">
+                <span class="text-xs" :class="form.free_site_mode ? 'text-themed-muted' : 'text-themed font-medium'">
+                  {{ t('admin.system.freeSite.disabled') }}
+                </span>
+                <button
+                  type="button"
+                  role="switch"
+                  :aria-checked="form.free_site_mode"
+                  class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  :class="[
+                    form.free_site_mode
+                      ? 'bg-green-500 focus:ring-green-500'
+                      : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                  ]"
+                  @click="toggleFreeSiteMode"
+                >
+                  <span
+                    class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                    :class="form.free_site_mode ? 'translate-x-5' : 'translate-x-0'"
+                  />
+                </button>
+                <span class="text-xs" :class="form.free_site_mode ? 'text-themed font-medium' : 'text-themed-muted'">
+                  {{ t('admin.system.freeSite.enabled') }}
+                </span>
+              </div>
+            </div>
+
+            <div
+              class="space-y-4 p-4 rounded-lg bg-themed-secondary/50 transition-opacity"
+              :class="form.free_site_mode ? 'opacity-100' : 'opacity-60'"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex-1">
+                  <label class="text-sm font-medium text-themed">{{ t('admin.system.freeSite.registerGift') }}</label>
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.freeSite.registerGiftDesc') }}</p>
+                </div>
+                <div class="flex items-center gap-3 ml-4">
+                  <span class="text-xs" :class="form.free_site_register_gift_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                    {{ t('admin.system.freeSite.giftDisabled') }}
+                  </span>
+                  <button
+                    type="button"
+                    role="switch"
+                    :aria-checked="form.free_site_register_gift_enabled && form.free_site_mode"
+                    :disabled="!form.free_site_mode"
+                    class="relative inline-flex h-7 w-12 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed"
+                    :class="[
+                      form.free_site_mode && form.free_site_register_gift_enabled
+                        ? 'bg-green-500 focus:ring-green-500 cursor-pointer'
+                        : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400',
+                      form.free_site_mode ? 'cursor-pointer' : 'cursor-not-allowed'
+                    ]"
+                    @click="toggleFreeSiteRegisterGift"
+                  >
+                    <span
+                      class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                      :class="form.free_site_mode && form.free_site_register_gift_enabled ? 'translate-x-5' : 'translate-x-0'"
+                    />
+                  </button>
+                  <span class="text-xs" :class="form.free_site_mode && form.free_site_register_gift_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                    {{ t('admin.system.freeSite.giftEnabled') }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div class="space-y-2">
+                  <label class="block text-sm text-themed-secondary">
+                    {{ t('admin.system.freeSite.giftBalance') }}
+                  </label>
+                  <div class="relative">
+                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+                    <input
+                      v-model.number="form.free_site_register_gift_balance"
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      class="input pl-8"
+                      placeholder="0.00"
+                      :disabled="!form.free_site_mode || !form.free_site_register_gift_enabled"
+                    />
+                  </div>
+                  <p class="text-xs text-themed-muted">{{ t('admin.system.freeSite.giftBalanceDesc') }}</p>
+                </div>
+
+                <div class="space-y-2">
+                  <label class="block text-sm text-themed-secondary">
+                    {{ t('admin.system.freeSite.giftPoints') }}
+                  </label>
+                  <input
+                    v-model.number="form.free_site_register_gift_points"
+                    type="number"
+                    min="0"
+                    step="1"
+                    class="input"
+                    placeholder="0"
+                    :disabled="!form.free_site_mode || !form.free_site_register_gift_enabled"
+                  />
+                  <p class="text-xs text-themed-muted">{{ t('admin.system.freeSite.giftPointsDesc') }}</p>
+                </div>
+              </div>
+
+              <p v-if="!form.free_site_mode" class="text-xs text-themed-muted">
+                {{ t('admin.system.freeSite.giftRequiresFreeSite') }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Ticket Settings -->
+        <div v-if="isTicketSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.ticket.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasTicketChanges || savingTicket"
+              @click="saveTicket"
+            >
+              {{ savingTicket ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.ticket.description') }}</p>
+
+          <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50">
+            <div class="flex-1">
+              <label class="text-sm font-medium text-themed">{{ t('admin.system.ticket.enable') }}</label>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.ticket.enableDesc') }}</p>
+            </div>
+            <div class="flex items-center gap-3 ml-4">
+              <span class="text-xs" :class="form.ticket_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                {{ t('admin.system.ticket.disabled') }}
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.ticket_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.ticket_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.ticket_enabled = !form.ticket_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.ticket_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.ticket_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                {{ t('admin.system.ticket.enabled') }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Ticket Image Settings -->
+        <div v-if="isTicketSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.ticketImages.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasTicketImageChanges || savingTicketImages"
+              @click="saveTicketImages"
+            >
+              {{ savingTicketImages ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.ticketImages.description') }}</p>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.ticketImages.baseUrl') }}
+              </label>
+              <input
+                v-model="form.ticket_image_lsky_base_url"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.ticketImages.baseUrlPlaceholder')"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.ticketImages.baseUrlDesc') }}</p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.ticketImages.token') }}
+              </label>
+              <input
+                v-model="form.ticket_image_lsky_token"
+                type="password"
+                class="input"
+                :placeholder="t('admin.system.ticketImages.tokenPlaceholder')"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.ticketImages.tokenDesc') }}</p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.ticketImages.apiVersion') }}
+              </label>
+              <select v-model="form.ticket_image_lsky_api_version" class="input">
+                <option value="v1">v1</option>
+                <option value="v2">v2</option>
+              </select>
+              <p class="text-xs text-themed-muted">{{ t('admin.system.ticketImages.apiVersionDesc') }}</p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.ticketImages.targetId') }}
+              </label>
+              <input
+                v-model="form.ticket_image_lsky_target_id"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.ticketImages.targetIdPlaceholder')"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.ticketImages.targetIdDesc') }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Default user quota -->
+        <div v-if="isAccessSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.defaultQuota') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasQuotaChanges || savingQuota"
+              @click="saveQuota"
+            >
+              {{ savingQuota ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.defaultQuotaDesc') }}</p>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="(meta, key) in configMeta" :key="key" class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ meta.label }}
+              </label>
+              <div class="relative">
+                <input
+                  v-model.number="(form as any)[key]"
+                  type="number"
+                  min="0"
+                  class="input pr-12"
+                  :placeholder="meta.label"
+                />
+                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">
+                  {{ meta.unit }}
+                </span>
+              </div>
+              <p class="text-xs text-themed-muted">{{ meta.description }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Turnstile Settings -->
+        <div v-if="isSecuritySection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.turnstile.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasTurnstileChanges || savingTurnstile"
+              @click="saveTurnstile"
+            >
+              {{ savingTurnstile ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.turnstile.description') }}</p>
+
+          <!-- Enable Toggle -->
+          <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50 mb-6">
+            <div class="flex-1">
+              <label class="text-sm font-medium text-themed">{{ t('admin.system.turnstile.enable') }}</label>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.turnstile.enableDesc') }}</p>
+            </div>
+            <div class="flex items-center gap-3 ml-4">
+              <span class="text-xs" :class="form.turnstile_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                {{ t('admin.system.turnstile.disabled') }}
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.turnstile_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.turnstile_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.turnstile_enabled = !form.turnstile_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.turnstile_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.turnstile_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                {{ t('admin.system.turnstile.enabled') }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Site Key & Secret Key -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.turnstile.siteKey') }}
+              </label>
+              <input
+                v-model="form.turnstile_site_key"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.turnstile.siteKeyPlaceholder')"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.turnstile.siteKeyDesc') }}</p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.turnstile.secretKey') }}
+              </label>
+              <input
+                v-model="form.turnstile_secret_key"
+                type="password"
+                class="input"
+                :placeholder="t('admin.system.turnstile.secretKeyPlaceholder')"
+              />
+              <p class="text-xs text-themed-muted">{{ t('admin.system.turnstile.secretKeyDesc') }}</p>
+            </div>
+          </div>
+
+          <!-- Help Link -->
+          <div class="mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <p class="text-sm text-blue-400">
+              💡 {{ t('admin.system.turnstile.helpText') }}
+              <a
+                href="https://dash.cloudflare.com/?to=/:account/turnstile"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline hover:text-blue-300"
+              >
+                Cloudflare Turnstile Dashboard
+              </a>
+            </p>
+          </div>
+        </div>
+
+        <!-- Avatar API Settings -->
+        <div v-if="isBrandSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.avatar.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasAvatarChanges || savingAvatar"
+              @click="saveAvatar"
+            >
+              {{ savingAvatar ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.avatar.description') }}</p>
+
+          <div class="space-y-2">
+            <label class="block text-sm text-themed-secondary">
+              {{ t('admin.system.avatar.apiBase') }}
+            </label>
+            <input
+              v-model="form.avatar_api_base"
+              type="text"
+              class="input"
+              placeholder="https://api.dicebear.com/9.x"
+            />
+            <p class="text-xs text-themed-muted">{{ t('admin.system.avatar.apiBaseDesc') }}</p>
+          </div>
+
+          <!-- Help Link -->
+          <div class="mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <p class="text-sm text-blue-400">
+              💡 {{ t('admin.system.avatar.helpText') }}
+              <a
+                href="https://www.dicebear.com/how-to-use/http-api"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="underline hover:text-blue-300"
+              >
+                DiceBear HTTP API
+              </a>
+            </p>
+          </div>
+        </div>
+
+        <!-- SMTP Email Settings -->
+        <div v-if="isMailSection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.smtp.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasSmtpChanges || savingSmtp"
+              @click="saveSmtp"
+            >
+              {{ savingSmtp ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.smtp.description') }}</p>
+
+          <!-- Enable Toggle -->
+          <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50 mb-6">
+            <div class="flex-1">
+              <label class="text-sm font-medium text-themed">{{ t('admin.system.smtp.enable') }}</label>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.smtp.enableDesc') }}</p>
+            </div>
+            <div class="flex items-center gap-3 ml-4">
+              <span class="text-xs" :class="form.smtp_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                {{ t('admin.system.smtp.disabled') }}
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.smtp_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.smtp_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.smtp_enabled = !form.smtp_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.smtp_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.smtp_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                {{ t('admin.system.smtp.enabled') }}
+              </span>
+            </div>
+          </div>
+
+          <!-- SMTP Server Settings -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.smtp.host') }}
+              </label>
+              <input
+                v-model="form.smtp_host"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.smtp.hostPlaceholder')"
+              />
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.smtp.port') }}
+              </label>
+              <input
+                v-model.number="form.smtp_port"
+                type="number"
+                class="input"
+                placeholder="587"
+              />
+            </div>
+          </div>
+
+          <!-- SSL/TLS Toggle -->
+          <div class="flex items-center gap-3 mb-6 p-3 rounded-lg bg-themed-secondary/30">
+            <input
+              id="smtp_secure"
+              v-model="form.smtp_secure"
+              type="checkbox"
+              class="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500"
+            />
+            <label for="smtp_secure" class="text-sm text-themed">
+              {{ t('admin.system.smtp.secure') }}
+            </label>
+            <span class="text-xs text-themed-muted">{{ t('admin.system.smtp.secureHint') }}</span>
+          </div>
+
+          <!-- Auth Settings -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.smtp.username') }}
+              </label>
+              <input
+                v-model="form.smtp_username"
+                type="text"
+                class="input"
+                :placeholder="t('admin.system.smtp.usernamePlaceholder')"
+              />
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.smtp.password') }}
+              </label>
+              <input
+                v-model="form.smtp_password"
+                type="password"
+                class="input"
+                :placeholder="t('admin.system.smtp.passwordPlaceholder')"
+              />
+            </div>
+          </div>
+
+          <!-- From Settings -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.smtp.fromEmail') }}
+              </label>
+              <input
+                v-model="form.smtp_from_email"
+                type="email"
+                class="input"
+                :placeholder="t('admin.system.smtp.fromEmailPlaceholder')"
+              />
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                {{ t('admin.system.smtp.fromName') }}
+              </label>
+              <input
+                v-model="form.smtp_from_name"
+                type="text"
+                class="input"
+                placeholder="Incudal"
+              />
+            </div>
+          </div>
+
+          <!-- Test Connection & Send Test Email -->
+          <div class="space-y-4">
+            <!-- Test Connection Button -->
+            <div class="flex justify-end">
+              <button
+                type="button"
+                class="btn-secondary"
+                :disabled="testingSmtp || !form.smtp_host || !form.smtp_username"
+                @click="testSmtpConnection"
+              >
+                {{ testingSmtp ? t('admin.system.smtp.testing') : t('admin.system.smtp.testConnection') }}
+              </button>
+            </div>
+
+            <!-- Send Test Email -->
+            <div class="p-4 rounded-lg bg-themed-secondary/30 border border-themed-border">
+              <label class="block text-sm font-medium text-themed mb-2">
+                {{ t('admin.system.smtp.sendTestEmail') }}
+              </label>
+              <p class="text-xs text-themed-muted mb-3">
+                {{ t('admin.system.smtp.sendTestEmailDesc') }}
+              </p>
+              <div class="flex gap-2">
+                <input
+                  v-model="testEmailTo"
+                  type="email"
+                  class="input flex-1"
+                  :placeholder="t('admin.system.smtp.testEmailPlaceholder')"
+                  :disabled="sendingTestEmail"
+                />
+                <button
+                  type="button"
+                  class="btn-secondary whitespace-nowrap"
+                  :disabled="sendingTestEmail || !testEmailTo || !form.smtp_host || !form.smtp_username"
+                  @click="sendTestEmail"
+                >
+                  {{ sendingTestEmail ? t('admin.system.smtp.sending') : t('admin.system.smtp.send') }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Help Link -->
+          <div class="mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <p class="text-sm text-blue-400">
+              💡 {{ t('admin.system.smtp.helpText') }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Email Domain Whitelist Settings -->
+        <div v-if="isSecuritySection" class="card p-6">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="text-themed font-medium">{{ t('admin.system.emailDomain.title') }}</h3>
+            <button
+              type="button"
+              class="btn-primary text-sm px-4 py-1.5"
+              :disabled="!hasEmailDomainChanges || savingEmailDomain"
+              @click="saveEmailDomain"
+            >
+              {{ savingEmailDomain ? t('admin.system.saving') : t('admin.system.save') }}
+            </button>
+          </div>
+          <p class="text-sm text-themed-muted mb-6">{{ t('admin.system.emailDomain.description') }}</p>
+
+          <!-- Enable Toggle -->
+          <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50 mb-6">
+            <div class="flex-1">
+              <label class="text-sm font-medium text-themed">{{ t('admin.system.emailDomain.enable') }}</label>
+              <p class="text-xs text-themed-muted mt-1">{{ t('admin.system.emailDomain.enableDesc') }}</p>
+            </div>
+            <div class="flex items-center gap-3 ml-4">
+              <span class="text-xs" :class="form.email_domain_whitelist_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                {{ t('admin.system.emailDomain.disabled') }}
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.email_domain_whitelist_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.email_domain_whitelist_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.email_domain_whitelist_enabled = !form.email_domain_whitelist_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.email_domain_whitelist_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.email_domain_whitelist_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                {{ t('admin.system.emailDomain.enabled') }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Allowed Domains -->
+          <div class="space-y-2">
+            <label class="block text-sm text-themed-secondary">
+              {{ t('admin.system.emailDomain.allowedDomains') }}
+            </label>
+            <textarea
+              v-model="form.email_allowed_domains"
+              class="input min-h-[120px] font-mono text-sm"
+              :placeholder="t('admin.system.emailDomain.allowedDomainsPlaceholder')"
+              :disabled="!form.email_domain_whitelist_enabled"
+            />
+            <p class="text-xs text-themed-muted">{{ t('admin.system.emailDomain.allowedDomainsDesc') }}</p>
+          </div>
+
+          <!-- Help Link -->
+          <div class="mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <p class="text-sm text-blue-400">
+              💡 {{ t('admin.system.emailDomain.helpText') }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- Notes -->
+    <div v-if="isAccessSection" class="card p-6">
+      <h3 class="text-themed font-medium mb-4">{{ t('admin.system.notes') }}</h3>
+      <div class="space-y-2 text-sm text-themed-secondary">
+        <p>• {{ t('admin.system.note1') }}</p>
+        <p>• {{ t('admin.system.note2') }}</p>
+        <p>• {{ t('admin.system.note3') }}</p>
+        <p>• {{ t('admin.system.note4') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/admin/TelegramConfigView.vue b/client/src/views/admin/TelegramConfigView.vue
new file mode 100644
index 0000000..3fcd933
--- /dev/null
+++ b/client/src/views/admin/TelegramConfigView.vue
@@ -0,0 +1,1261 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useToast } from '@/stores/toast'
+import type { TelegramAdminBinding, TelegramAdminBindingsResponse } from '@/types/api'
+import { systemSettingsNavigationItems } from '@/constants/adminSettings'
+
+const route = useRoute()
+const toast = useToast()
+const { t } = useI18n()
+
+const loading = ref(true)
+const savingTelegramBot = ref(false)
+const savingFooterTelegramLink = ref(false)
+const settingTelegramWebhook = ref(false)
+const checkingTelegramWebhook = ref(false)
+const deletingTelegramWebhook = ref(false)
+
+interface ConfigItem {
+  id: number
+  key: string
+  value: string
+  type: string
+  label: string | null
+  description: string | null
+}
+
+interface TelegramWebhookInfoView {
+  url: string
+  pending_update_count?: number
+  last_error_date?: number
+  last_error_message?: string
+  max_connections?: number
+  allowed_updates?: string[]
+}
+
+interface GlobalChannel {
+  id: number
+  name: string
+  type: string
+  enabled: boolean
+  boundPackages: number
+  configPreview: string
+  createdAt: string
+}
+
+const configs = ref<ConfigItem[]>([])
+const telegramWebhookInfo = ref<TelegramWebhookInfoView | null>(null)
+const globalChannels = ref<GlobalChannel[]>([])
+const channelLoading = ref(false)
+const savingChannel = ref(false)
+const deletingChannelId = ref<number | null>(null)
+const testingChannelId = ref<number | null>(null)
+const showChannelForm = ref(false)
+const editingChannel = ref<{ id: number; name: string; botToken: string; chatId: string; enabled: boolean } | null>(null)
+const channelFormError = ref('')
+const channelForm = ref({ name: '', botToken: '', chatId: '', enabled: true })
+const bindingLoading = ref(false)
+const bindingSearch = ref('')
+const telegramBindings = ref<TelegramAdminBinding[]>([])
+const telegramBindingsTotal = ref(0)
+const telegramBindingsPage = ref(1)
+const telegramBindingsPageSize = ref(5)
+const unlinkingBindingId = ref<number | null>(null)
+const telegramBindingGroup = ref<TelegramAdminBindingsResponse['group'] | null>(null)
+const telegramBindingVipGroup = ref<TelegramAdminBindingsResponse['vipGroup'] | null>(null)
+
+const form = ref({
+  footer_telegram_link: 'https://t.me/incudal_com',
+  telegram_bot_enabled: false,
+  telegram_bot_username: '',
+  telegram_bot_token: '',
+  telegram_webhook_secret: '',
+  telegram_group_join_enabled: false,
+  telegram_group_chat_id: '',
+  telegram_group_join_mode: 'any',
+  telegram_group_min_recharge: 0,
+  telegram_group_min_consume: 0,
+  telegram_group_invite_expire_minutes: 30,
+  telegram_vip_group_join_enabled: false,
+  telegram_vip_group_chat_id: '',
+  telegram_vip_group_join_mode: 'all',
+  telegram_vip_group_min_recharge: 0,
+  telegram_vip_group_min_consume: 0,
+  telegram_vip_group_invite_expire_minutes: 30
+})
+
+const numericConfigKeys = ['telegram_group_invite_expire_minutes', 'telegram_vip_group_invite_expire_minutes']
+const floatConfigKeys = ['telegram_group_min_recharge', 'telegram_group_min_consume', 'telegram_vip_group_min_recharge', 'telegram_vip_group_min_consume']
+const booleanConfigKeys = ['telegram_bot_enabled', 'telegram_group_join_enabled', 'telegram_vip_group_join_enabled']
+const stringConfigKeys = [
+  'footer_telegram_link',
+  'telegram_bot_username',
+  'telegram_bot_token',
+  'telegram_webhook_secret',
+  'telegram_group_chat_id',
+  'telegram_group_join_mode',
+  'telegram_vip_group_chat_id',
+  'telegram_vip_group_join_mode'
+]
+
+const telegramBotKeys = [
+  'telegram_bot_enabled',
+  'telegram_bot_username',
+  'telegram_bot_token',
+  'telegram_webhook_secret',
+  'telegram_group_join_enabled',
+  'telegram_group_chat_id',
+  'telegram_group_join_mode',
+  'telegram_group_min_recharge',
+  'telegram_group_min_consume',
+  'telegram_group_invite_expire_minutes',
+  'telegram_vip_group_join_enabled',
+  'telegram_vip_group_chat_id',
+  'telegram_vip_group_join_mode',
+  'telegram_vip_group_min_recharge',
+  'telegram_vip_group_min_consume',
+  'telegram_vip_group_invite_expire_minutes'
+]
+const footerTelegramLinkKeys = ['footer_telegram_link']
+
+const maskedSecretPlaceholder = '********'
+const telegramWebhookSecretPattern = /^[A-Za-z0-9_-]{1,256}$/
+
+const currentSiteOrigin = computed(() => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  return window.location.origin
+})
+
+const telegramWebhookUrl = computed(() => {
+  if (!currentSiteOrigin.value) {
+    return '/api/telegram/webhook'
+  }
+  return `${currentSiteOrigin.value}/api/telegram/webhook`
+})
+
+const telegramWebhookSecretError = computed(() => {
+  const value = form.value.telegram_webhook_secret
+  if (!value || value === maskedSecretPlaceholder) {
+    return ''
+  }
+  return telegramWebhookSecretPattern.test(value)
+    ? ''
+    : 'Webhook Secret 只能包含字母、数字、下划线和连字符，长度 1-256。'
+})
+
+const hasTelegramBotChanges = computed(() => {
+  return telegramBotKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const canManageTelegramWebhook = computed(() => {
+  return Boolean(form.value.telegram_bot_token && form.value.telegram_webhook_secret && !telegramWebhookSecretError.value)
+})
+
+const hasFooterTelegramLinkChanges = computed(() => {
+  return footerTelegramLinkKeys.some(key => {
+    const config = configs.value.find(c => c.key === key)
+    if (!config) return false
+    return String((form.value as any)[key]) !== config.value
+  })
+})
+
+const telegramBindingsTotalPages = computed(() => {
+  return Math.max(1, Math.ceil(telegramBindingsTotal.value / telegramBindingsPageSize.value))
+})
+
+onMounted(async () => {
+  await Promise.all([loadConfigs(), loadChannels(), loadTelegramBindings()])
+})
+
+async function loadConfigs() {
+  loading.value = true
+  try {
+    const response = await api.systemConfig.list()
+    configs.value = Array.isArray(response.configs) ? response.configs : []
+
+    for (const config of configs.value) {
+      if (!(config.key in form.value)) continue
+
+      if (numericConfigKeys.includes(config.key)) {
+        ;(form.value as any)[config.key] = parseInt(config.value, 10) || 0
+      } else if (floatConfigKeys.includes(config.key)) {
+        ;(form.value as any)[config.key] = parseFloat(config.value) || 0
+      } else if (booleanConfigKeys.includes(config.key)) {
+        ;(form.value as any)[config.key] = config.value === 'true'
+      } else if (stringConfigKeys.includes(config.key)) {
+        ;(form.value as any)[config.key] = config.value || ''
+      }
+    }
+  } catch (err: any) {
+    toast.error('加载 Telegram 配置失败: ' + (err?.message || String(err)))
+    configs.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveConfigGroup(keys: string[], savingRef: { value: boolean }) {
+  savingRef.value = true
+  try {
+    const configsToUpdate = keys.map(key => ({
+      key,
+      value: typeof (form.value as any)[key] === 'boolean'
+        ? ((form.value as any)[key] ? 'true' : 'false')
+        : String((form.value as any)[key])
+    }))
+
+    await api.systemConfig.update(configsToUpdate)
+    toast.success('保存成功')
+    await loadConfigs()
+  } catch (err: any) {
+    toast.error('保存失败: ' + (err?.message || String(err)))
+  } finally {
+    savingRef.value = false
+  }
+}
+
+async function saveTelegramBot() {
+  if (telegramWebhookSecretError.value) {
+    toast.error(telegramWebhookSecretError.value)
+    return
+  }
+  if (!['any', 'all'].includes(form.value.telegram_group_join_mode)) {
+    toast.error('普通群入群门槛模式无效')
+    return
+  }
+  if (!['any', 'all'].includes(form.value.telegram_vip_group_join_mode)) {
+    toast.error('高级群入群门槛模式无效')
+    return
+  }
+  if (form.value.telegram_group_invite_expire_minutes < 1 || form.value.telegram_group_invite_expire_minutes > 10080) {
+    toast.error('普通群邀请链接有效期必须在 1 到 10080 分钟之间')
+    return
+  }
+  if (form.value.telegram_vip_group_invite_expire_minutes < 1 || form.value.telegram_vip_group_invite_expire_minutes > 10080) {
+    toast.error('高级群邀请链接有效期必须在 1 到 10080 分钟之间')
+    return
+  }
+  await saveConfigGroup(telegramBotKeys, savingTelegramBot)
+}
+
+async function saveFooterTelegramLink() {
+  await saveConfigGroup(footerTelegramLinkKeys, savingFooterTelegramLink)
+}
+
+function generateTelegramWebhookSecret() {
+  const cryptoApi = globalThis.crypto
+  if (!cryptoApi?.getRandomValues) {
+    toast.error('当前浏览器不支持安全随机数生成，请使用 openssl rand -hex 32 手动生成。')
+    return
+  }
+
+  const bytes = new Uint8Array(32)
+  cryptoApi.getRandomValues(bytes)
+  form.value.telegram_webhook_secret = Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('')
+  toast.success('Webhook Secret 已生成，请保存 Telegram 配置。')
+}
+
+function getApiErrorMessage(err: unknown): string {
+  if (err && typeof err === 'object') {
+    const apiError = err as { error?: unknown; message?: unknown; description?: unknown }
+    if (apiError.error) return String(apiError.error)
+    if (apiError.message) return String(apiError.message)
+    if (apiError.description) return String(apiError.description)
+  }
+  return String(err)
+}
+
+function formatTelegramWebhookDate(value?: number): string {
+  if (!value) return ''
+  return new Date(value * 1000).toLocaleString('zh-CN')
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString('zh-CN')
+}
+
+function formatMoney(value: number): string {
+  return Number(value || 0).toFixed(2)
+}
+
+function formatTelegramName(binding: TelegramAdminBinding): string {
+  if (binding.telegramUsername) return `@${binding.telegramUsername}`
+  const fullName = [binding.firstName, binding.lastName].filter(Boolean).join(' ')
+  return fullName || `ID ${binding.telegramUserId}`
+}
+
+function eligibilityLabel(status: TelegramAdminBinding['eligibility']['status']): string {
+  switch (status) {
+    case 'eligible':
+      return '已达标'
+    case 'ineligible':
+      return '未达标'
+    case 'disabled':
+      return '未启用'
+    case 'unconfigured':
+      return '未配置'
+    default:
+      return '未知'
+  }
+}
+
+function eligibilityClass(status: TelegramAdminBinding['eligibility']['status']): string {
+  switch (status) {
+    case 'eligible':
+      return 'bg-green-500/20 text-green-400'
+    case 'ineligible':
+      return 'bg-amber-500/20 text-amber-400'
+    default:
+      return 'bg-gray-500/20 text-gray-400'
+  }
+}
+
+function formatGroupRule(group: TelegramAdminBindingsResponse['group'] | null): string {
+  if (!group) return '加载中'
+  if (!group.enabled) return '未启用'
+  if (!group.configured) return '未配置 Chat ID'
+
+  const thresholds = [
+    group.minRecharge > 0 ? `累计充值 ¥${formatMoney(group.minRecharge)}` : null,
+    group.minConsume > 0 ? `累计消费 ¥${formatMoney(group.minConsume)}` : null
+  ].filter(Boolean)
+
+  if (thresholds.length === 0) {
+    return '无金额门槛'
+  }
+
+  return `${group.joinMode === 'all' ? '同时满足' : '满足任一'}：${thresholds.join('；')}`
+}
+
+async function setupTelegramWebhook() {
+  settingTelegramWebhook.value = true
+  try {
+    const response = await api.telegram.setupWebhook({
+      baseUrl: currentSiteOrigin.value || undefined
+    })
+    toast.success(response.commandsSynced ? 'Telegram Webhook 和机器人指令已设置' : 'Telegram Webhook 已设置')
+    telegramWebhookInfo.value = {
+      ...(telegramWebhookInfo.value || { url: '' }),
+      url: response.webhookUrl
+    }
+    await checkTelegramWebhook(false)
+  } catch (err: any) {
+    toast.error('设置 Telegram Webhook 失败: ' + getApiErrorMessage(err))
+  } finally {
+    settingTelegramWebhook.value = false
+  }
+}
+
+async function checkTelegramWebhook(showSuccess = true) {
+  checkingTelegramWebhook.value = true
+  try {
+    const response = await api.telegram.getWebhookInfo()
+    telegramWebhookInfo.value = response.info
+    if (showSuccess) {
+      toast.success('Telegram Webhook 状态已更新')
+    }
+  } catch (err: any) {
+    toast.error('检查 Telegram Webhook 失败: ' + getApiErrorMessage(err))
+  } finally {
+    checkingTelegramWebhook.value = false
+  }
+}
+
+async function deleteTelegramWebhook() {
+  if (!confirm('确定删除 Telegram Webhook？删除后机器人将不再把消息回调到本站。')) return
+
+  deletingTelegramWebhook.value = true
+  try {
+    await api.telegram.deleteWebhook()
+    telegramWebhookInfo.value = { url: '' }
+    toast.success('Telegram Webhook 已删除')
+  } catch (err: any) {
+    toast.error('删除 Telegram Webhook 失败: ' + getApiErrorMessage(err))
+  } finally {
+    deletingTelegramWebhook.value = false
+  }
+}
+
+async function loadTelegramBindings(page = telegramBindingsPage.value) {
+  bindingLoading.value = true
+  try {
+    const response = await api.telegram.listBindings({
+      page,
+      pageSize: telegramBindingsPageSize.value,
+      search: bindingSearch.value.trim() || undefined
+    })
+    telegramBindings.value = response.bindings
+    telegramBindingsTotal.value = response.total
+    telegramBindingsPage.value = response.page
+    telegramBindingsPageSize.value = response.pageSize
+    telegramBindingGroup.value = response.group
+    telegramBindingVipGroup.value = response.vipGroup
+  } catch (err: any) {
+    toast.error('加载 Telegram 绑定用户失败: ' + (err?.message || String(err)))
+    telegramBindings.value = []
+    telegramBindingsTotal.value = 0
+    telegramBindingGroup.value = null
+    telegramBindingVipGroup.value = null
+  } finally {
+    bindingLoading.value = false
+  }
+}
+
+async function searchTelegramBindings() {
+  telegramBindingsPage.value = 1
+  await loadTelegramBindings(1)
+}
+
+async function resetTelegramBindingSearch() {
+  bindingSearch.value = ''
+  telegramBindingsPage.value = 1
+  await loadTelegramBindings(1)
+}
+
+async function goTelegramBindingsPage(page: number) {
+  if (page < 1 || page > telegramBindingsTotalPages.value || page === telegramBindingsPage.value) return
+  await loadTelegramBindings(page)
+}
+
+async function unlinkTelegramBinding(binding: TelegramAdminBinding) {
+  const userLabel = binding.user?.username || `用户 #${binding.userId}`
+  if (!confirm(`确定解除 ${userLabel} 的 Telegram 绑定？解除后该用户需要重新绑定后才能申请入群。`)) return
+
+  unlinkingBindingId.value = binding.id
+  try {
+    await api.telegram.unlinkAdminBinding(binding.id)
+    toast.success('Telegram 绑定已解除')
+    await loadTelegramBindings()
+  } catch (err: any) {
+    toast.error('解除绑定失败: ' + (err?.message || String(err)))
+  } finally {
+    unlinkingBindingId.value = null
+  }
+}
+
+async function loadChannels() {
+  channelLoading.value = true
+  try {
+    const response = await api.adminNotificationChannels.list()
+    globalChannels.value = response.channels || []
+  } catch {
+    globalChannels.value = []
+  } finally {
+    channelLoading.value = false
+  }
+}
+
+function openCreateChannelForm() {
+  editingChannel.value = null
+  channelForm.value = { name: '', botToken: '', chatId: '', enabled: true }
+  channelFormError.value = ''
+  showChannelForm.value = true
+}
+
+async function openEditChannelForm(ch: GlobalChannel) {
+  channelFormError.value = ''
+  try {
+    const response = await api.adminNotificationChannels.get(ch.id)
+    const channel = response.channel as any
+    const config = channel.config || {}
+    const botToken = typeof config.botToken === 'string' ? config.botToken : ''
+    const chatId = typeof config.chatId === 'string' ? config.chatId : ''
+
+    editingChannel.value = {
+      id: channel.id,
+      name: channel.name,
+      botToken,
+      chatId,
+      enabled: channel.enabled
+    }
+    channelForm.value = {
+      name: channel.name,
+      botToken,
+      chatId,
+      enabled: channel.enabled
+    }
+    showChannelForm.value = true
+  } catch {
+    toast.error('加载渠道失败')
+  }
+}
+
+async function saveChannel() {
+  channelFormError.value = ''
+  if (!channelForm.value.name || !channelForm.value.chatId) {
+    channelFormError.value = '请填写渠道名称和 Chat ID'
+    return
+  }
+  if (!editingChannel.value && !channelForm.value.botToken) {
+    channelFormError.value = '请填写 Bot Token'
+    return
+  }
+
+  savingChannel.value = true
+  try {
+    if (editingChannel.value) {
+      await api.adminNotificationChannels.update(editingChannel.value.id, {
+        name: channelForm.value.name,
+        chatId: channelForm.value.chatId,
+        enabled: channelForm.value.enabled,
+        ...(channelForm.value.botToken && !channelForm.value.botToken.includes('...') ? { botToken: channelForm.value.botToken } : {})
+      })
+      toast.success('渠道已更新')
+    } else {
+      await api.adminNotificationChannels.create(channelForm.value)
+      toast.success('渠道已创建')
+    }
+    showChannelForm.value = false
+    await loadChannels()
+  } catch (err: any) {
+    channelFormError.value = err?.message || '保存失败'
+  } finally {
+    savingChannel.value = false
+  }
+}
+
+async function deleteChannel(id: number) {
+  if (!confirm('确定删除该渠道？将同时解绑所有绑定此渠道的套餐。')) return
+
+  deletingChannelId.value = id
+  try {
+    await api.adminNotificationChannels.delete(id)
+    toast.success('删除成功')
+    await loadChannels()
+  } catch (err: any) {
+    toast.error('删除失败: ' + (err?.message || ''))
+  } finally {
+    deletingChannelId.value = null
+  }
+}
+
+async function testChannel(id: number) {
+  testingChannelId.value = id
+  try {
+    await api.adminNotificationChannels.test(id)
+    toast.success('测试消息发送成功')
+  } catch (err: any) {
+    toast.error('测试失败: ' + (err?.message || ''))
+  } finally {
+    testingChannelId.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">Telegram 设置</h1>
+        <p class="page-description">集中管理网站专用机器人、Webhook、入群申请和全局通知渠道。</p>
+      </div>
+    </div>
+
+    <div class="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700">
+      <router-link
+        v-for="item in systemSettingsNavigationItems"
+        :key="item.path"
+        :to="item.path"
+        class="shrink-0 px-4 py-3 text-sm font-medium border-b-2 transition-colors"
+        :class="route.path === item.path
+          ? 'border-black dark:border-white text-gray-900 dark:text-white'
+          : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'"
+      >
+        {{ t(item.labelKey) }}
+      </router-link>
+    </div>
+
+    <div v-if="loading" class="card p-6 animate-pulse">
+      <div class="h-6 bg-themed-secondary rounded w-1/4 mb-6"></div>
+      <div class="space-y-4">
+        <div v-for="i in 5" :key="i" class="h-12 bg-themed-secondary rounded"></div>
+      </div>
+    </div>
+
+    <div v-else class="space-y-6">
+      <div class="card p-6">
+        <div class="flex items-center justify-between mb-2">
+          <h3 class="text-themed font-medium">站点 Telegram 入口</h3>
+          <button
+            type="button"
+            class="btn-primary text-sm px-4 py-1.5"
+            :disabled="!hasFooterTelegramLinkChanges || savingFooterTelegramLink"
+            @click="saveFooterTelegramLink"
+          >
+            {{ savingFooterTelegramLink ? '保存中...' : '保存' }}
+          </button>
+        </div>
+        <p class="text-sm text-themed-muted mb-6">
+          配置侧边栏底部 Telegram 群按钮。留空后隐藏该按钮。
+        </p>
+        <div class="space-y-2">
+          <label class="block text-sm text-themed-secondary">
+            Telegram 群链接
+          </label>
+          <input
+            v-model="form.footer_telegram_link"
+            type="text"
+            class="input"
+            placeholder="https://t.me/your_group"
+          />
+          <p class="text-xs text-themed-muted">
+            这是网站展示入口，不影响机器人绑定、Webhook 或入群申请逻辑。
+          </p>
+        </div>
+      </div>
+
+      <div class="card p-6">
+        <div class="flex items-center justify-between mb-2">
+          <h3 class="text-themed font-medium">Telegram 专用机器人</h3>
+          <button
+            type="button"
+            class="btn-primary text-sm px-4 py-1.5"
+            :disabled="!hasTelegramBotChanges || savingTelegramBot"
+            @click="saveTelegramBot"
+          >
+            {{ savingTelegramBot ? '保存中...' : '保存' }}
+          </button>
+        </div>
+        <p class="text-sm text-themed-muted mb-6">
+          配置网站配套 Bot，用于用户 Telegram 账号绑定和后续私有群准入。
+        </p>
+
+        <div class="flex items-center justify-between p-4 rounded-lg bg-themed-secondary/50 mb-6">
+          <div class="flex-1">
+            <label class="text-sm font-medium text-themed">启用绑定机器人</label>
+            <p class="text-xs text-themed-muted mt-1">
+              关闭后用户个人设置页会显示未启用，不允许生成绑定链接。
+            </p>
+          </div>
+          <div class="flex items-center gap-3 ml-4">
+            <span class="text-xs" :class="form.telegram_bot_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+              关闭
+            </span>
+            <button
+              type="button"
+              role="switch"
+              :aria-checked="form.telegram_bot_enabled"
+              class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+              :class="[
+                form.telegram_bot_enabled
+                  ? 'bg-green-500 focus:ring-green-500'
+                  : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+              ]"
+              @click="form.telegram_bot_enabled = !form.telegram_bot_enabled"
+            >
+              <span
+                class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                :class="form.telegram_bot_enabled ? 'translate-x-5' : 'translate-x-0'"
+              />
+            </button>
+            <span class="text-xs" :class="form.telegram_bot_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+              启用
+            </span>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm text-themed-secondary">
+              Bot 用户名
+            </label>
+            <input
+              v-model="form.telegram_bot_username"
+              type="text"
+              class="input"
+              placeholder="your_bot_username"
+            />
+            <p class="text-xs text-themed-muted">不需要填写 @，用于生成 https://t.me/... 绑定链接。</p>
+          </div>
+          <div class="space-y-2">
+            <label class="block text-sm text-themed-secondary">
+              Bot Token
+            </label>
+            <input
+              v-model="form.telegram_bot_token"
+              type="password"
+              class="input"
+              placeholder="********"
+            />
+            <p class="text-xs text-themed-muted">由 BotFather 分配，保存后只会显示为占位符。</p>
+          </div>
+          <div class="space-y-2 md:col-span-2">
+            <label class="block text-sm text-themed-secondary">
+              Webhook Secret
+            </label>
+            <div class="flex flex-col sm:flex-row gap-2">
+              <input
+                v-model="form.telegram_webhook_secret"
+                type="password"
+                class="input flex-1"
+                placeholder="********"
+              />
+              <button
+                type="button"
+                class="btn-secondary text-sm px-4 py-2 whitespace-nowrap"
+                @click="generateTelegramWebhookSecret"
+              >
+                自动生成 Secret
+              </button>
+            </div>
+            <p v-if="telegramWebhookSecretError" class="text-xs text-error">
+              {{ telegramWebhookSecretError }}
+            </p>
+            <p class="text-xs text-themed-muted">
+              必填。自动生成会覆盖当前输入，保存配置后生效；也可用 openssl rand -hex 32 手动生成。
+            </p>
+          </div>
+        </div>
+
+        <div class="mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+          <p class="text-sm text-blue-400">
+            Webhook 地址：<code class="px-1 py-0.5 rounded bg-black/20">{{ telegramWebhookUrl }}</code>
+          </p>
+          <p class="text-xs text-blue-400/80 mt-1">
+            按当前访问域名动态生成；点击“设置 Webhook”时会使用该地址。
+          </p>
+        </div>
+
+        <div class="mt-4 p-4 rounded-lg bg-themed-secondary/40 border border-themed">
+          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 mb-4">
+            <div>
+              <h4 class="text-sm font-medium text-themed">Webhook 管理</h4>
+              <p class="text-xs text-themed-muted mt-1">
+                保存 Bot Token 和 Webhook Secret 后，可由系统自动设置回调并同步机器人指令菜单。
+              </p>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <button
+                type="button"
+                class="btn-secondary text-sm px-3 py-1.5"
+                :disabled="!canManageTelegramWebhook || settingTelegramWebhook"
+                @click="setupTelegramWebhook"
+              >
+                {{ settingTelegramWebhook ? '设置中' : '设置 Webhook' }}
+              </button>
+              <button
+                type="button"
+                class="btn-ghost text-sm px-3 py-1.5"
+                :disabled="!form.telegram_bot_token || checkingTelegramWebhook"
+                @click="() => checkTelegramWebhook()"
+              >
+                {{ checkingTelegramWebhook ? '检查中' : '检查 Webhook' }}
+              </button>
+              <button
+                type="button"
+                class="btn-ghost text-sm px-3 py-1.5 text-error"
+                :disabled="!form.telegram_bot_token || deletingTelegramWebhook"
+                @click="deleteTelegramWebhook"
+              >
+                {{ deletingTelegramWebhook ? '删除中' : '删除 Webhook' }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="telegramWebhookInfo" class="space-y-2 text-xs text-themed-muted">
+            <p>
+              当前地址：
+              <span class="text-themed break-all">{{ telegramWebhookInfo.url || '未设置' }}</span>
+            </p>
+            <p>待处理更新：{{ telegramWebhookInfo.pending_update_count ?? 0 }}</p>
+            <p v-if="telegramWebhookInfo.max_connections">
+              最大连接数：{{ telegramWebhookInfo.max_connections }}
+            </p>
+            <p v-if="telegramWebhookInfo.allowed_updates?.length">
+              允许更新：{{ telegramWebhookInfo.allowed_updates.join(', ') }}
+            </p>
+            <p v-if="telegramWebhookInfo.last_error_message" class="text-error">
+              最近错误：{{ telegramWebhookInfo.last_error_message }}
+              <span v-if="telegramWebhookInfo.last_error_date">
+                （{{ formatTelegramWebhookDate(telegramWebhookInfo.last_error_date) }}）
+              </span>
+            </p>
+          </div>
+        </div>
+
+        <div class="mt-4 p-4 rounded-lg bg-themed-secondary/40 border border-themed">
+          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 mb-4">
+            <div>
+              <h4 class="text-sm font-medium text-themed">普通用户群入群申请</h4>
+              <p class="text-xs text-themed-muted mt-1">
+                用户绑定 Telegram 后，私聊机器人发送 /join。达标时机器人返回普通群一次性邀请链接。
+              </p>
+            </div>
+            <div class="flex items-center gap-3">
+              <span class="text-xs" :class="form.telegram_group_join_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                关闭
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.telegram_group_join_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.telegram_group_join_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.telegram_group_join_enabled = !form.telegram_group_join_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.telegram_group_join_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.telegram_group_join_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                启用
+              </span>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                普通群 Chat ID
+              </label>
+              <input
+                v-model="form.telegram_group_chat_id"
+                type="text"
+                class="input"
+                placeholder="-1001234567890"
+              />
+              <p class="text-xs text-themed-muted">
+                Bot 必须是该私有群管理员，并拥有创建邀请链接权限。
+              </p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                门槛模式
+              </label>
+              <select v-model="form.telegram_group_join_mode" class="input">
+                <option value="any">累计充值或累计消费，任一达标</option>
+                <option value="all">累计充值和累计消费，同时达标</option>
+              </select>
+              <p class="text-xs text-themed-muted">
+                门槛为 0 表示该项不参与判断。
+              </p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                累计充值门槛
+              </label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+                <input
+                  v-model.number="form.telegram_group_min_recharge"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input pl-8"
+                  placeholder="0.00"
+                />
+              </div>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                累计消费门槛
+              </label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+                <input
+                  v-model.number="form.telegram_group_min_consume"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input pl-8"
+                  placeholder="0.00"
+                />
+              </div>
+            </div>
+            <div class="space-y-2 md:col-span-2">
+              <label class="block text-sm text-themed-secondary">
+                邀请链接有效期
+              </label>
+              <div class="relative max-w-xs">
+                <input
+                  v-model.number="form.telegram_group_invite_expire_minutes"
+                  type="number"
+                  min="1"
+                  max="10080"
+                  step="1"
+                  class="input pr-16"
+                  placeholder="30"
+                />
+                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">
+                  分钟
+                </span>
+              </div>
+              <p class="text-xs text-themed-muted">
+                每次申请生成一个 member_limit=1 的一次性邀请链接。
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 p-4 rounded-lg bg-themed-secondary/40 border border-themed">
+          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 mb-4">
+            <div>
+              <h4 class="text-sm font-medium text-themed">高级用户群入群申请</h4>
+              <p class="text-xs text-themed-muted mt-1">
+                用户绑定 Telegram 后，私聊机器人发送 /join_vip。达标时机器人返回高级群一次性邀请链接。
+              </p>
+            </div>
+            <div class="flex items-center gap-3">
+              <span class="text-xs" :class="form.telegram_vip_group_join_enabled ? 'text-themed-muted' : 'text-themed font-medium'">
+                关闭
+              </span>
+              <button
+                type="button"
+                role="switch"
+                :aria-checked="form.telegram_vip_group_join_enabled"
+                class="relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                :class="[
+                  form.telegram_vip_group_join_enabled
+                    ? 'bg-green-500 focus:ring-green-500'
+                    : 'bg-gray-400 dark:bg-gray-500 focus:ring-gray-400'
+                ]"
+                @click="form.telegram_vip_group_join_enabled = !form.telegram_vip_group_join_enabled"
+              >
+                <span
+                  class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+                  :class="form.telegram_vip_group_join_enabled ? 'translate-x-5' : 'translate-x-0'"
+                />
+              </button>
+              <span class="text-xs" :class="form.telegram_vip_group_join_enabled ? 'text-themed font-medium' : 'text-themed-muted'">
+                启用
+              </span>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                高级群 Chat ID
+              </label>
+              <input
+                v-model="form.telegram_vip_group_chat_id"
+                type="text"
+                class="input"
+                placeholder="-1001234567890"
+              />
+              <p class="text-xs text-themed-muted">
+                可以和普通群不同；Bot 必须是该群管理员，并拥有创建邀请链接权限。
+              </p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                门槛模式
+              </label>
+              <select v-model="form.telegram_vip_group_join_mode" class="input">
+                <option value="any">累计充值或累计消费，任一达标</option>
+                <option value="all">累计充值和累计消费，同时达标</option>
+              </select>
+              <p class="text-xs text-themed-muted">
+                高级群默认建议使用更高门槛，门槛为 0 表示该项不参与判断。
+              </p>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                累计充值门槛
+              </label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+                <input
+                  v-model.number="form.telegram_vip_group_min_recharge"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input pl-8"
+                  placeholder="0.00"
+                />
+              </div>
+            </div>
+            <div class="space-y-2">
+              <label class="block text-sm text-themed-secondary">
+                累计消费门槛
+              </label>
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">¥</span>
+                <input
+                  v-model.number="form.telegram_vip_group_min_consume"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  class="input pl-8"
+                  placeholder="0.00"
+                />
+              </div>
+            </div>
+            <div class="space-y-2 md:col-span-2">
+              <label class="block text-sm text-themed-secondary">
+                邀请链接有效期
+              </label>
+              <div class="relative max-w-xs">
+                <input
+                  v-model.number="form.telegram_vip_group_invite_expire_minutes"
+                  type="number"
+                  min="1"
+                  max="10080"
+                  step="1"
+                  class="input pr-16"
+                  placeholder="30"
+                />
+                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-themed-muted">
+                  分钟
+                </span>
+              </div>
+              <p class="text-xs text-themed-muted">
+                每次申请生成一个 member_limit=1 的高级群一次性邀请链接。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card p-4">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between mb-3">
+          <div>
+            <h3 class="text-themed font-medium">绑定用户与入群资格</h3>
+            <p class="text-sm text-themed-muted mt-1">
+              查看已绑定 Telegram 的站内用户、累计充值/消费和当前入群资格，可人工解除异常绑定。
+            </p>
+          </div>
+          <button
+            type="button"
+            class="btn-secondary text-xs px-3 py-1.5"
+            :disabled="bindingLoading"
+            @click="() => loadTelegramBindings()"
+          >
+            {{ bindingLoading ? '刷新中...' : '刷新列表' }}
+          </button>
+        </div>
+
+        <div class="flex flex-col sm:flex-row gap-2 mb-3">
+          <input
+            v-model="bindingSearch"
+            type="search"
+            class="input flex-1 text-sm"
+            placeholder="搜索站内用户名、邮箱、用户 ID、Telegram ID 或用户名"
+            @keyup.enter="searchTelegramBindings"
+          />
+          <button
+            type="button"
+            class="btn-primary text-xs px-3 py-2"
+            :disabled="bindingLoading"
+            @click="searchTelegramBindings"
+          >
+            搜索
+          </button>
+          <button
+            type="button"
+            class="btn-ghost text-xs px-3 py-2"
+            :disabled="bindingLoading || !bindingSearch"
+            @click="resetTelegramBindingSearch"
+          >
+            清空
+          </button>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-3 text-xs">
+          <div class="p-3 rounded-lg bg-themed-secondary/30 border border-themed-border">
+            <div class="text-themed font-medium">普通群门槛</div>
+            <div class="text-themed-muted mt-1">{{ formatGroupRule(telegramBindingGroup) }}</div>
+          </div>
+          <div class="p-3 rounded-lg bg-themed-secondary/30 border border-themed-border">
+            <div class="text-themed font-medium">高级群门槛</div>
+            <div class="text-themed-muted mt-1">{{ formatGroupRule(telegramBindingVipGroup) }}</div>
+          </div>
+        </div>
+
+        <div v-if="bindingLoading" class="text-sm text-themed-muted p-3 rounded-lg bg-themed-secondary/30">
+          加载中...
+        </div>
+        <div v-else-if="telegramBindings.length === 0" class="text-sm text-themed-muted p-3 rounded-lg bg-themed-secondary/30">
+          暂无 Telegram 绑定用户。
+        </div>
+        <div v-else class="space-y-2">
+          <div
+            v-for="binding in telegramBindings"
+            :key="binding.id"
+            class="p-3 rounded-lg bg-themed-secondary/30 border border-themed-border"
+          >
+            <div class="flex flex-col gap-2 xl:flex-row xl:items-start xl:justify-between">
+              <div class="min-w-0 flex-1">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span class="text-sm font-medium text-themed">
+                    {{ binding.user?.username || `用户 #${binding.userId}` }}
+                  </span>
+                  <span
+                    v-if="binding.user"
+                    class="text-xs px-1.5 py-0.5 rounded-full"
+                    :class="binding.user.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'"
+                  >
+                    {{ binding.user.status === 'active' ? '正常' : '已封禁' }}
+                  </span>
+                  <span class="text-xs text-themed-muted">用户 ID {{ binding.userId }}</span>
+                  <span class="text-xs text-themed-muted">Telegram {{ formatTelegramName(binding) }}</span>
+                  <span class="text-xs text-themed-muted">ID {{ binding.telegramUserId }}</span>
+                </div>
+                <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-themed-muted">
+                  <span v-if="binding.user?.email" class="break-all">{{ binding.user.email }}</span>
+                  <span>充值 ¥{{ formatMoney(binding.stats.totalRecharge) }}</span>
+                  <span>消费 ¥{{ formatMoney(binding.stats.totalConsume) }}</span>
+                  <span>绑定 {{ formatDate(binding.boundAt) }}</span>
+                </div>
+              </div>
+              <div class="flex flex-wrap items-center gap-2 xl:ml-4 xl:justify-end">
+                <span
+                  class="text-xs px-2 py-1 rounded-full"
+                  :class="eligibilityClass(binding.eligibility.status)"
+                >
+                  普通：{{ eligibilityLabel(binding.eligibility.status) }}
+                </span>
+                <span
+                  class="text-xs px-2 py-1 rounded-full"
+                  :class="eligibilityClass(binding.vipEligibility.status)"
+                >
+                  高级：{{ eligibilityLabel(binding.vipEligibility.status) }}
+                </span>
+                <button
+                  type="button"
+                  class="text-xs text-red-400 hover:text-red-300"
+                  :disabled="unlinkingBindingId === binding.id"
+                  @click="unlinkTelegramBinding(binding)"
+                >
+                  {{ unlinkingBindingId === binding.id ? '解绑中...' : '解除绑定' }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-if="telegramBindingsTotal > 0"
+          class="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between text-xs text-themed-muted"
+        >
+          <span>
+            共 {{ telegramBindingsTotal }} 条，当前第 {{ telegramBindingsPage }} / {{ telegramBindingsTotalPages }} 页
+          </span>
+          <div class="flex gap-2">
+            <button
+              type="button"
+              class="btn-ghost text-xs px-3 py-1.5"
+              :disabled="bindingLoading || telegramBindingsPage <= 1"
+              @click="goTelegramBindingsPage(telegramBindingsPage - 1)"
+            >
+              上一页
+            </button>
+            <button
+              type="button"
+              class="btn-ghost text-xs px-3 py-1.5"
+              :disabled="bindingLoading || telegramBindingsPage >= telegramBindingsTotalPages"
+              @click="goTelegramBindingsPage(telegramBindingsPage + 1)"
+            >
+              下一页
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="card p-6">
+        <div class="flex items-center justify-between mb-2">
+          <h3 class="text-themed font-medium">全局 Telegram 通知渠道</h3>
+          <button type="button" class="btn-primary text-sm px-4 py-1.5" @click="openCreateChannelForm">+ 添加渠道</button>
+        </div>
+        <p class="text-sm text-themed-muted mb-4">创建全局 Telegram 通知渠道后，托管用户可在套餐设置中绑定，当有用户新购或销毁实例时自动发送通知。</p>
+
+        <div v-if="channelLoading" class="text-sm text-themed-muted">加载中...</div>
+        <div v-else-if="globalChannels.length === 0" class="text-sm text-themed-muted p-3 rounded-lg bg-themed-secondary/30">
+          暂无全局通知渠道，点击右上角「添加渠道」创建。
+        </div>
+        <div v-else class="space-y-3">
+          <div
+            v-for="ch in globalChannels"
+            :key="ch.id"
+            class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between p-3 rounded-lg bg-themed-secondary/30 border border-themed-border"
+          >
+            <div class="flex-1 min-w-0">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="font-medium text-sm text-themed">{{ ch.name }}</span>
+                <span
+                  class="text-xs px-1.5 py-0.5 rounded-full"
+                  :class="ch.enabled ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'"
+                >
+                  {{ ch.enabled ? '已启用' : '已停用' }}
+                </span>
+                <span class="text-xs text-themed-muted">绑定 {{ ch.boundPackages }} 个套餐</span>
+              </div>
+              <p class="text-xs text-themed-muted mt-0.5">{{ ch.configPreview }}</p>
+            </div>
+            <div class="flex items-center gap-2 md:ml-4">
+              <button
+                type="button"
+                class="text-xs text-blue-400 hover:text-blue-300"
+                :disabled="testingChannelId === ch.id"
+                @click="testChannel(ch.id)"
+              >
+                {{ testingChannelId === ch.id ? '发送中...' : '测试' }}
+              </button>
+              <button type="button" class="text-xs text-themed-muted hover:text-themed" @click="openEditChannelForm(ch)">编辑</button>
+              <button
+                type="button"
+                class="text-xs text-red-400 hover:text-red-300"
+                :disabled="deletingChannelId === ch.id"
+                @click="deleteChannel(ch.id)"
+              >
+                {{ deletingChannelId === ch.id ? '删除中...' : '删除' }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="showChannelForm" class="mt-4 p-4 rounded-lg border border-themed-border bg-themed-secondary/20 space-y-3">
+          <h4 class="font-medium text-sm text-themed">{{ editingChannel ? '编辑渠道' : '新建渠道' }}</h4>
+          <div v-if="channelFormError" class="text-xs text-red-400">{{ channelFormError }}</div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div class="space-y-1">
+              <label class="block text-xs text-themed-muted">渠道名称 *</label>
+              <input v-model="channelForm.name" type="text" class="input" placeholder="例：新购通知频道" />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-xs text-themed-muted">Chat ID *</label>
+              <input v-model="channelForm.chatId" type="text" class="input" placeholder="例：-1001234567890" />
+              <p class="text-xs text-themed-muted">负数为群组/频道，正数为用户。</p>
+            </div>
+            <div class="md:col-span-2 space-y-1">
+              <label class="block text-xs text-themed-muted">Bot Token {{ editingChannel ? '（留空保持不变）' : '*' }}</label>
+              <input v-model="channelForm.botToken" type="password" class="input" placeholder="例：123456:ABC-DEF..." />
+            </div>
+            <div class="md:col-span-2 flex items-center gap-2">
+              <input id="telegramChannelEnabled" v-model="channelForm.enabled" type="checkbox" class="w-4 h-4 rounded" />
+              <label for="telegramChannelEnabled" class="text-sm text-themed-secondary">启用此渠道</label>
+            </div>
+          </div>
+          <div class="flex gap-2 justify-end">
+            <button type="button" class="btn-secondary text-sm" @click="showChannelForm = false">取消</button>
+            <button type="button" class="btn-primary text-sm" :disabled="savingChannel" @click="saveChannel">
+              {{ savingChannel ? '保存中...' : '保存' }}
+            </button>
+          </div>
+        </div>
+
+        <div class="mt-4 p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
+          <p class="text-sm text-blue-400">
+            需要 Telegram Bot Token？去
+            <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer" class="underline hover:text-blue-300">@BotFather</a>
+            创建机器人，并将机器人添加为群组/频道管理员。
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/admin/UsersView.vue b/client/src/views/admin/UsersView.vue
new file mode 100644
index 0000000..5fab21e
--- /dev/null
+++ b/client/src/views/admin/UsersView.vue
@@ -0,0 +1,2806 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import VipLevelRulesEditor from '@/components/admin/VipLevelRulesEditor.vue'
+import VipBenefitHallSettings from '@/components/admin/VipBenefitHallSettings.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import { normalizeCountryName } from '@/utils/countryDisplay'
+
+const { t } = useI18n()
+const router = useRouter()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+const normalizedCountryLabels = computed(() => ({
+  mainlandChina: t('common.countries.cn'),
+  hongKong: t('common.countries.hk'),
+  macau: t('common.countries.mo'),
+  taiwan: t('common.countries.tw')
+}))
+
+// Tab 切换
+const activeTab = ref('users')
+
+// 用户数据
+const USER_SEARCH_FIELDS = ['username', 'id', 'email']
+const USER_SEARCH_FIELD_OPTIONS = [
+  { value: 'username', label: 'admin.users.searchFieldUsername' },
+  { value: 'id', label: 'admin.users.searchFieldId' },
+  { value: 'email', label: 'admin.users.searchFieldEmail' }
+]
+const users = ref([])
+const usersLoading = ref(true)
+const userSearch = ref('')
+const userSearchFields = ref([...USER_SEARCH_FIELDS])
+const userSearchExact = ref(false)
+const userPage = ref(1)
+const userPageSize = ref(100)
+const userTotal = ref(0)
+const userTotalPages = ref(0)
+
+// 邀请码数据
+const invites = ref([])
+const invitesLoading = ref(false)
+const invitesPage = ref(1)
+const invitesPageSize = ref(100)
+const invitesTotal = ref(0)
+const invitesTotalPages = ref(1)
+const inviteStatusFilter = ref('all')
+const inviteStatusFilterOptions = computed(() => [
+  { value: 'all', label: t('admin.users.inviteFilterAll') },
+  { value: 'unused', label: t('admin.users.inviteFilterUnused') },
+  { value: 'used', label: t('admin.users.inviteFilterUsed') }
+])
+
+// 生成邀请码弹窗
+const showInviteModal = ref(false)
+const showGenerateModal = ref(false)  // 生成前的配置弹窗
+const inviteExpireDays = ref(7)  // 默认7天过期
+const inviteCount = ref(1)  // 生成数量
+const newInviteCode = ref('')
+const newInviteCodes = ref([])  // 批量生成的邀请码
+const newInviteExpiresAt = ref('')
+const inviteGenerating = ref(false)
+const copied = ref(false)
+
+// 重置密码弹窗
+const showResetPasswordModal = ref(false)
+const showResetPasswordResultModal = ref(false)
+const resetPasswordUser = ref(null)
+const generatedPassword = ref('')
+const resetPasswordLoading = ref(false)
+const passwordCopied = ref(false)
+
+// 取消2FA弹窗
+const showDisable2FAModal = ref(false)
+const disable2FAUser = ref(null)
+const disable2FALoading = ref(false)
+
+// 解绑GitHub弹窗
+const showUnbindGitHubModal = ref(false)
+const unbindGitHubUser = ref(null)
+const unbindGitHubLoading = ref(false)
+
+// 登录记录弹窗
+const showLoginRecordsModal = ref(false)
+const loginRecordsUser = ref(null)
+const loginRecords = ref([])
+const loginRecordsLoading = ref(false)
+const loginRecordsPage = ref(1)
+const loginRecordsPageSize = ref(100)
+const loginRecordsTotal = ref(0)
+const loginRecordsTotalPages = ref(1)
+
+// 发送站内信弹窗
+const showSendMessageModal = ref(false)
+const sendMessageUser = ref(null)
+const sendMessageForm = ref({ title: '', content: '' })
+const sendMessageLoading = ref(false)
+
+// 用户余额详情弹窗（包含余额、明细、充值记录、调整余额）
+const showBalanceModal = ref(false)
+const balanceUser = ref(null)
+const balanceTab = ref('overview')  // 'overview' | 'logs' | 'recharge' | 'adjust'
+const balanceInfo = ref({ balance: 0, totalRecharge: 0, totalConsume: 0 })
+const balanceInfoLoading = ref(false)
+const balanceLogs = ref([])
+const balanceLogsLoading = ref(false)
+const balanceLogsPage = ref(1)
+const balanceLogsPageSize = ref(100)
+const balanceLogsTotal = ref(0)
+const balanceLogsTotalPages = ref(1)
+const balanceLogsShowLotteryGiftOnly = ref(false) // 抽奖赠送筛选
+const rechargeRecords = ref([])
+const rechargeRecordsLoading = ref(false)
+const rechargeRecordsPage = ref(1)
+const rechargeRecordsPageSize = ref(100)
+const rechargeRecordsTotal = ref(0)
+const rechargeRecordsTotalPages = ref(1)
+const adjustBalanceForm = ref({
+  type: 'add',  // 'add' | 'deduct'
+  amount: '',
+  reason: ''
+})
+const adjustBalanceLoading = ref(false)
+
+// 用户积分调整弹窗
+const showPointsModal = ref(false)
+const pointsUser = ref(null)
+const adjustPointsForm = ref({
+  amount: '',
+  reason: ''
+})
+const adjustPointsLoading = ref(false)
+
+// 托管余额弹窗
+const showHostingBalanceModal = ref(false)
+const hostingBalanceUser = ref(null)
+const hostingBalanceTab = ref('overview')  // 'overview' | 'logs' | 'adjust'
+const hostingBalanceInfo = ref({ available: 0, frozen: 0 })
+const hostingBalanceInfoLoading = ref(false)
+const hostingBalanceLogs = ref([])
+const hostingBalanceLogsLoading = ref(false)
+const hostingBalanceLogsPage = ref(1)
+const hostingBalanceLogsPageSize = ref(50)
+const hostingBalanceLogsTotal = ref(0)
+const hostingBalanceLogsTotalPages = ref(1)
+const adjustHostingBalanceForm = ref({
+  type: 'available',  // 'available' | 'frozen'
+  operation: 'add',   // 'add' | 'deduct'
+  amount: '',
+  reason: ''
+})
+const adjustHostingBalanceLoading = ref(false)
+
+// 关联账号检测
+const linkedAccountsData = ref(null)
+const linkedAccountsLoading = ref(false)
+const linkedAccountsDays = ref(90)
+const linkedAccountsExpandedIP = ref(new Set())
+const linkedAccountsExpandedEmail = ref(new Set())
+const linkedAccountsExpandedUsername = ref(new Set())
+
+// 计算注册链接
+const registerLink = computed(() => {
+  return `${window.location.origin}/register/${newInviteCode.value}`
+})
+const normalizedUserSearchFields = computed(() => {
+  return USER_SEARCH_FIELDS.filter(field => userSearchFields.value.includes(field))
+})
+
+onMounted(async () => {
+  await loadUsers()
+})
+
+// 搜索防抖
+let searchTimer = null
+watch([userSearch, userSearchExact, () => normalizedUserSearchFields.value.join(',')], () => {
+  clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    userPage.value = 1
+    loadUsers()
+  }, 300)
+})
+
+async function loadUsers() {
+  usersLoading.value = true
+  try {
+    const response = await api.users.list({
+      page: userPage.value,
+      pageSize: userPageSize.value,
+      search: userSearch.value,
+      searchFields: normalizedUserSearchFields.value.join(','),
+      exact: userSearchExact.value
+    })
+    users.value = response.users || []
+    userTotal.value = response.total || 0
+    userTotalPages.value = response.totalPages || 1
+  } catch (err) {
+    toast.error(t('admin.users.loadFailed') + ': ' + err.message)
+  } finally {
+    usersLoading.value = false
+  }
+}
+
+async function loadInvites() {
+  invitesLoading.value = true
+  try {
+    const response = await api.auth.getInvites({
+      page: invitesPage.value,
+      pageSize: invitesPageSize.value,
+      ...(inviteStatusFilter.value !== 'all' ? { status: inviteStatusFilter.value } : {})
+    })
+    invites.value = response.invites || []
+    invitesTotal.value = response.total || 0
+    invitesTotalPages.value = response.totalPages || 1
+    if (invitesPage.value > invitesTotalPages.value && invitesTotalPages.value > 0) {
+      invitesPage.value = invitesTotalPages.value
+      await loadInvites()
+    }
+  } finally {
+    invitesLoading.value = false
+  }
+}
+
+function switchTab(tab) {
+  activeTab.value = tab
+  if (tab === 'invites' && invites.value.length === 0) {
+    loadInvites()
+  }
+  if (tab === 'linkedAccounts' && !linkedAccountsData.value) {
+    loadLinkedAccounts()
+  }
+}
+
+function openGenerateModal() {
+  inviteExpireDays.value = 7
+  inviteCount.value = 1
+  showGenerateModal.value = true
+}
+
+async function generateInvite() {
+  inviteGenerating.value = true
+  try {
+    // 构建请求参数
+    const payload = {
+      ...(inviteExpireDays.value > 0 ? { expiresInDays: inviteExpireDays.value } : {}),
+      count: inviteCount.value
+    }
+    const response = await api.auth.generateInvite(payload)
+    
+    // 处理单个或批量返回
+    if (response.codes) {
+      newInviteCodes.value = response.codes
+      newInviteCode.value = ''
+    } else {
+      newInviteCode.value = response.code
+      newInviteCodes.value = []
+    }
+    newInviteExpiresAt.value = response.expiresAt
+    
+    showGenerateModal.value = false
+    showInviteModal.value = true
+    if (activeTab.value === 'invites') {
+      loadInvites()
+    }
+  } catch (err) {
+    toast.error(t('admin.users.generateFailed') + ': ' + err.message)
+  } finally {
+    inviteGenerating.value = false
+  }
+}
+
+async function deleteInvite(invite) {
+  if (!confirm(t('admin.users.confirmDeleteInvite', { code: invite.code }))) return
+  
+  try {
+    await api.auth.deleteInvite(invite.id)
+    if (invites.value.length === 1 && invitesPage.value > 1) {
+      invitesPage.value = invitesPage.value - 1
+    }
+    await loadInvites()
+    toast.success(t('admin.users.inviteDeleted'))
+  } catch (err) {
+    toast.error(t('admin.users.deleteFailed') + ': ' + err.message)
+  }
+}
+
+async function copyCode() {
+  // 获取要复制的内容
+  const textToCopy = newInviteCodes.value.length > 0 
+    ? newInviteCodes.value.join('\n')
+    : newInviteCode.value
+  
+  try {
+    await navigator.clipboard.writeText(textToCopy)
+    copied.value = true
+    setTimeout(() => copied.value = false, 2000)
+  } catch {
+    const input = document.createElement('textarea')
+    input.value = textToCopy
+    document.body.appendChild(input)
+    input.select()
+    document.execCommand('copy')
+    document.body.removeChild(input)
+    copied.value = true
+    setTimeout(() => copied.value = false, 2000)
+  }
+}
+
+function copyLink() {
+  navigator.clipboard.writeText(registerLink.value).then(() => {
+    copied.value = true
+    setTimeout(() => copied.value = false, 2000)
+  })
+}
+
+// 切换用户状态（封禁/解封）
+async function toggleUserStatus(user) {
+  const newStatus = user.status === 'active' ? 'banned' : 'active'
+  
+  const confirmMsg = newStatus === 'banned' 
+    ? t('admin.users.confirmBan', { name: user.username })
+    : t('admin.users.confirmUnban', { name: user.username })
+  
+  if (!confirm(confirmMsg)) return
+
+  try {
+    await api.users.updateStatus(user.id, newStatus)
+    // 立即更新本地状态，提供即时反馈
+    const idx = users.value.findIndex(u => u.id === user.id)
+    if (idx !== -1) {
+      users.value[idx] = { ...users.value[idx], status: newStatus }
+    }
+    toast.success(newStatus === 'banned' ? t('admin.users.userBanned') : t('admin.users.userUnbanned'))
+  } catch (err) {
+    toast.error(err.message)
+    // 失败时重新加载以恢复正确状态
+    await loadUsers()
+  }
+}
+
+// 切换用户管理员角色
+async function toggleUserRole(user) {
+  const newRole = user.role === 'admin' ? 'user' : 'admin'
+
+  if (newRole === 'admin' && user.status !== 'active') {
+    toast.error(t('admin.users.onlyActiveCanBeAdmin'))
+    return
+  }
+
+  const confirmMsg = newRole === 'admin'
+    ? t('admin.users.confirmPromoteAdmin', { name: user.username })
+    : t('admin.users.confirmDemoteAdmin', { name: user.username })
+
+  if (!confirm(confirmMsg)) return
+
+  try {
+    await api.users.updateRole(user.id, newRole)
+    const idx = users.value.findIndex(u => u.id === user.id)
+    if (idx !== -1) {
+      users.value[idx] = { ...users.value[idx], role: newRole }
+    }
+    toast.success(newRole === 'admin' ? t('admin.users.userPromotedAdmin') : t('admin.users.userDemotedAdmin'))
+  } catch (err) {
+    toast.error(err.details || err.message)
+    await loadUsers()
+  }
+}
+
+// 查看用户实例
+function viewUserInstances(user) {
+  router.push({ path: '/instances', query: { userId: user.id } })
+}
+
+// 打开重置密码确认弹窗
+function openResetPasswordModal(user) {
+  resetPasswordUser.value = user
+  showResetPasswordModal.value = true
+}
+
+// 重置密码（自动生成）
+async function resetPassword() {
+  resetPasswordLoading.value = true
+  
+  try {
+    const result = await api.users.resetPassword(resetPasswordUser.value.id)
+    generatedPassword.value = result.newPassword
+    showResetPasswordModal.value = false
+    showResetPasswordResultModal.value = true
+    passwordCopied.value = false
+  } catch (err) {
+    toast.error(err.message)
+  } finally {
+    resetPasswordLoading.value = false
+  }
+}
+
+// 复制生成的密码
+async function copyGeneratedPassword() {
+  try {
+    await navigator.clipboard.writeText(generatedPassword.value)
+    passwordCopied.value = true
+    setTimeout(() => passwordCopied.value = false, 2000)
+  } catch {
+    // 降级方案
+    const input = document.createElement('textarea')
+    input.value = generatedPassword.value
+    document.body.appendChild(input)
+    input.select()
+    document.execCommand('copy')
+    document.body.removeChild(input)
+    passwordCopied.value = true
+    setTimeout(() => passwordCopied.value = false, 2000)
+  }
+}
+
+// 打开取消2FA弹窗
+function openDisable2FAModal(user) {
+  disable2FAUser.value = user
+  showDisable2FAModal.value = true
+}
+
+// 取消2FA
+async function disable2FA() {
+  disable2FALoading.value = true
+  
+  try {
+    await api.users.disable2FA(disable2FAUser.value.id)
+    showDisable2FAModal.value = false
+    toast.success(t('admin.users.twoFADisabled'))
+    await loadUsers()
+  } catch (err) {
+    toast.error(err.message)
+  } finally {
+    disable2FALoading.value = false
+  }
+}
+
+// 打开解绑GitHub弹窗
+function openUnbindGitHubModal(user) {
+  unbindGitHubUser.value = user
+  showUnbindGitHubModal.value = true
+}
+
+// 解绑GitHub
+async function unbindGitHub() {
+  unbindGitHubLoading.value = true
+  
+  try {
+    await api.users.unbindOAuth(unbindGitHubUser.value.id, 'github')
+    showUnbindGitHubModal.value = false
+    toast.success(t('admin.users.githubUnbound'))
+    await loadUsers()
+  } catch (err) {
+    toast.error(err.message)
+  } finally {
+    unbindGitHubLoading.value = false
+  }
+}
+
+// 打开登录记录弹窗
+async function openLoginRecordsModal(user) {
+  loginRecordsUser.value = user
+  loginRecordsPage.value = 1
+  loginRecords.value = []
+  showLoginRecordsModal.value = true
+  await loadLoginRecords()
+}
+
+// 加载登录记录
+async function loadLoginRecords() {
+  if (!loginRecordsUser.value) return
+  
+  loginRecordsLoading.value = true
+  try {
+    const response = await api.users.getLoginRecords(loginRecordsUser.value.id, {
+      page: loginRecordsPage.value,
+      pageSize: loginRecordsPageSize.value
+    })
+    loginRecords.value = response.records || []
+    loginRecordsTotal.value = response.total || 0
+    loginRecordsTotalPages.value = response.totalPages || 1
+  } catch (err) {
+    toast.error(t('admin.users.loadLoginRecordsFailed') + ': ' + err.message)
+  } finally {
+    loginRecordsLoading.value = false
+  }
+}
+
+// 加载关联账号检测数据
+async function loadLinkedAccounts() {
+  linkedAccountsLoading.value = true
+  try {
+    const response = await api.users.detectLinkedAccounts(linkedAccountsDays.value)
+    linkedAccountsData.value = response
+    // 重置展开状态
+    linkedAccountsExpandedIP.value = new Set()
+    linkedAccountsExpandedEmail.value = new Set()
+    linkedAccountsExpandedUsername.value = new Set()
+  } catch (err) {
+    toast.error(t('admin.users.loadLinkedAccountsFailed') + ': ' + err.message)
+  } finally {
+    linkedAccountsLoading.value = false
+  }
+}
+
+// 切换IP组展开状态
+function toggleIPGroup(ip) {
+  if (linkedAccountsExpandedIP.value.has(ip)) {
+    linkedAccountsExpandedIP.value.delete(ip)
+  } else {
+    linkedAccountsExpandedIP.value.add(ip)
+  }
+}
+
+// 切换邮箱组展开状态
+function toggleEmailGroup(pattern) {
+  if (linkedAccountsExpandedEmail.value.has(pattern)) {
+    linkedAccountsExpandedEmail.value.delete(pattern)
+  } else {
+    linkedAccountsExpandedEmail.value.add(pattern)
+  }
+}
+
+// 切换用户名组展开状态
+function toggleUsernameGroup(pattern) {
+  if (linkedAccountsExpandedUsername.value.has(pattern)) {
+    linkedAccountsExpandedUsername.value.delete(pattern)
+  } else {
+    linkedAccountsExpandedUsername.value.add(pattern)
+  }
+}
+
+// 打开发送站内信弹窗
+function openSendMessageModal(user) {
+  sendMessageUser.value = user
+  sendMessageForm.value = { title: '', content: '' }
+  showSendMessageModal.value = true
+}
+
+// 发送站内信
+async function sendMessage() {
+  if (!sendMessageUser.value) return
+  
+  if (!sendMessageForm.value.title.trim()) {
+    toast.error(t('admin.users.messageTitleRequired'))
+    return
+  }
+  if (!sendMessageForm.value.content.trim()) {
+    toast.error(t('admin.users.messageContentRequired'))
+    return
+  }
+
+  sendMessageLoading.value = true
+  try {
+    await api.inbox.sendToUser(sendMessageUser.value.id, {
+      title: sendMessageForm.value.title.trim(),
+      content: sendMessageForm.value.content.trim()
+    })
+    toast.success(t('admin.users.messageSent'))
+    showSendMessageModal.value = false
+    sendMessageForm.value = { title: '', content: '' }
+    sendMessageUser.value = null
+  } catch (err) {
+    toast.error(t('admin.users.messageSendFailed') + ': ' + err.message)
+  } finally {
+    sendMessageLoading.value = false
+  }
+}
+
+// 打开用户余额详情弹窗
+async function openBalanceModal(user) {
+  balanceUser.value = user
+  balanceTab.value = 'overview'
+  balanceInfo.value = { balance: user.balance || 0, totalRecharge: 0, totalConsume: 0 }
+  balanceLogs.value = []
+  balanceLogsPage.value = 1
+  balanceLogsShowLotteryGiftOnly.value = false // 重置抽奖筛选状态
+  rechargeRecords.value = []
+  rechargeRecordsPage.value = 1
+  adjustBalanceForm.value = { type: 'add', amount: '', reason: '' }
+  showBalanceModal.value = true
+  await loadBalanceInfo()
+}
+
+// 加载用户余额信息
+async function loadBalanceInfo() {
+  if (!balanceUser.value) return
+  balanceInfoLoading.value = true
+  try {
+    const res = await api.admin.getUserBalance(balanceUser.value.id)
+    balanceInfo.value = {
+      balance: res.balance,
+      totalRecharge: res.totalRecharge,
+      totalConsume: res.totalConsume
+    }
+  } catch (err) {
+    toast.error(t('admin.users.loadBalanceFailed') + ': ' + err.message)
+  } finally {
+    balanceInfoLoading.value = false
+  }
+}
+
+// 加载余额明细
+async function loadBalanceLogs() {
+  if (!balanceUser.value) return
+  balanceLogsLoading.value = true
+  try {
+    const res = await api.admin.getUserBalanceLogs(balanceUser.value.id, {
+      page: balanceLogsPage.value,
+      pageSize: balanceLogsPageSize.value,
+      lotteryGift: balanceLogsShowLotteryGiftOnly.value ? 'only' : 'exclude'
+    })
+    balanceLogs.value = res.logs || []
+    balanceLogsTotal.value = res.total || 0
+    balanceLogsTotalPages.value = Math.ceil(res.total / balanceLogsPageSize.value) || 1
+  } catch (err) {
+    toast.error(t('admin.users.loadBalanceLogsFailed') + ': ' + err.message)
+  } finally {
+    balanceLogsLoading.value = false
+  }
+}
+
+// 加载充值记录
+async function loadRechargeRecords() {
+  if (!balanceUser.value) return
+  rechargeRecordsLoading.value = true
+  try {
+    const res = await api.admin.getRechargeOrders({
+      page: rechargeRecordsPage.value,
+      pageSize: rechargeRecordsPageSize.value,
+      userId: balanceUser.value.id
+    })
+    rechargeRecords.value = res.records || []
+    rechargeRecordsTotal.value = res.total || 0
+    rechargeRecordsTotalPages.value = Math.ceil(res.total / rechargeRecordsPageSize.value) || 1
+  } catch (err) {
+    toast.error(t('admin.users.loadRechargeRecordsFailed') + ': ' + err.message)
+  } finally {
+    rechargeRecordsLoading.value = false
+  }
+}
+
+// 切换余额弹窗TAB
+function switchBalanceTab(tab) {
+  balanceTab.value = tab
+  if (tab === 'logs' && balanceLogs.value.length === 0) {
+    loadBalanceLogs()
+  } else if (tab === 'recharge' && rechargeRecords.value.length === 0) {
+    loadRechargeRecords()
+  }
+}
+
+// 提交调整余额
+async function submitAdjustBalance() {
+  if (!balanceUser.value) return
+
+  const amount = parseFloat(adjustBalanceForm.value.amount)
+  if (isNaN(amount) || amount <= 0) {
+    toast.error(t('admin.users.invalidAmount'))
+    return
+  }
+
+  if (!adjustBalanceForm.value.reason.trim()) {
+    toast.error(t('admin.users.reasonRequired'))
+    return
+  }
+
+  // 根据类型计算实际金额
+  const finalAmount = adjustBalanceForm.value.type === 'add' ? amount : -amount
+
+  adjustBalanceLoading.value = true
+  try {
+    await api.admin.adjustUserBalance(
+      balanceUser.value.id,
+      finalAmount,
+      adjustBalanceForm.value.reason.trim()
+    )
+    toast.success(t('admin.users.balanceAdjusted'))
+    adjustBalanceForm.value = { type: 'add', amount: '', reason: '' }
+    // 刷新余额信息和明细
+    await loadBalanceInfo()
+    if (balanceLogs.value.length > 0) {
+      await loadBalanceLogs()
+    }
+    // 刷新用户列表
+    await loadUsers()
+    // 切换到概览TAB
+    balanceTab.value = 'overview'
+  } catch (err) {
+    toast.error(t('admin.users.balanceAdjustFailed') + ': ' + err.message)
+  } finally {
+    adjustBalanceLoading.value = false
+  }
+}
+
+// 打开积分调整弹窗
+function openPointsModal(user) {
+  pointsUser.value = user
+  adjustPointsForm.value = { amount: '', reason: '' }
+  showPointsModal.value = true
+}
+
+// 提交调整积分
+async function submitAdjustPoints() {
+  if (!pointsUser.value) return
+
+  const amount = parseInt(adjustPointsForm.value.amount)
+  if (isNaN(amount) || amount === 0) {
+    toast.error(t('admin.users.invalidPointsAmount'))
+    return
+  }
+
+  if (!adjustPointsForm.value.reason.trim()) {
+    toast.error(t('admin.users.reasonRequired'))
+    return
+  }
+
+  adjustPointsLoading.value = true
+  try {
+    await api.entertainment.adminAdjustPoints(
+      pointsUser.value.id,
+      amount,
+      adjustPointsForm.value.reason.trim()
+    )
+    toast.success(t('admin.users.pointsAdjusted'))
+    showPointsModal.value = false
+    // 刷新用户列表
+    await loadUsers()
+  } catch (err) {
+    toast.error(t('admin.users.pointsAdjustFailed') + ': ' + err.message)
+  } finally {
+    adjustPointsLoading.value = false
+  }
+}
+
+// 打开托管余额弹窗
+async function openHostingBalanceModal(user) {
+  hostingBalanceUser.value = user
+  hostingBalanceTab.value = 'overview'
+  hostingBalanceInfo.value = { 
+    available: user.hostingBalance || 0, 
+    frozen: user.hostingBalanceFrozen || 0 
+  }
+  hostingBalanceLogs.value = []
+  adjustHostingBalanceForm.value = { type: 'available', operation: 'add', amount: '', reason: '' }
+  showHostingBalanceModal.value = true
+  // 加载详细信息
+  await loadHostingBalanceInfo()
+}
+
+// 加载托管余额详情
+async function loadHostingBalanceInfo() {
+  if (!hostingBalanceUser.value) return
+  hostingBalanceInfoLoading.value = true
+  try {
+    const res = await api.admin.getHostingBalanceLogs(hostingBalanceUser.value.id, { page: 1, pageSize: 1 })
+    hostingBalanceInfo.value = {
+      available: res.available,
+      frozen: res.frozen
+    }
+  } catch (err) {
+    console.error('Failed to load hosting balance info:', err)
+  } finally {
+    hostingBalanceInfoLoading.value = false
+  }
+}
+
+// 加载托管余额明细
+async function loadHostingBalanceLogs() {
+  if (!hostingBalanceUser.value) return
+  hostingBalanceLogsLoading.value = true
+  try {
+    const res = await api.admin.getHostingBalanceLogs(hostingBalanceUser.value.id, {
+      page: hostingBalanceLogsPage.value,
+      pageSize: hostingBalanceLogsPageSize.value
+    })
+    hostingBalanceLogs.value = res.logs
+    hostingBalanceLogsTotal.value = res.total
+    hostingBalanceLogsTotalPages.value = res.totalPages
+    // 同步更新余额信息
+    hostingBalanceInfo.value = {
+      available: res.available,
+      frozen: res.frozen
+    }
+  } catch (err) {
+    toast.error(t('admin.users.loadHostingLogsFailed') + ': ' + err.message)
+  } finally {
+    hostingBalanceLogsLoading.value = false
+  }
+}
+
+// 切换托管余额弹窗TAB
+function switchHostingBalanceTab(tab) {
+  hostingBalanceTab.value = tab
+  if (tab === 'logs' && hostingBalanceLogs.value.length === 0) {
+    hostingBalanceLogsPage.value = 1
+    loadHostingBalanceLogs()
+  }
+}
+
+// 托管余额明细翻页
+function changeHostingBalanceLogsPage(page) {
+  hostingBalanceLogsPage.value = page
+  loadHostingBalanceLogs()
+}
+
+// 提交调整托管余额
+async function submitAdjustHostingBalance() {
+  if (!hostingBalanceUser.value) return
+
+  const amount = parseFloat(adjustHostingBalanceForm.value.amount)
+  if (isNaN(amount) || amount <= 0) {
+    toast.error(t('admin.users.invalidAmount'))
+    return
+  }
+
+  if (!adjustHostingBalanceForm.value.reason.trim()) {
+    toast.error(t('admin.users.reasonRequired'))
+    return
+  }
+
+  // 根据操作类型计算实际金额
+  const finalAmount = adjustHostingBalanceForm.value.operation === 'add' ? amount : -amount
+
+  adjustHostingBalanceLoading.value = true
+  try {
+    const res = await api.admin.adjustHostingBalance(
+      hostingBalanceUser.value.id,
+      adjustHostingBalanceForm.value.type,
+      finalAmount,
+      adjustHostingBalanceForm.value.reason.trim()
+    )
+    toast.success(t('admin.users.hostingBalanceAdjusted'))
+    // 更新显示
+    hostingBalanceInfo.value = {
+      available: res.available,
+      frozen: res.frozen
+    }
+    // 重置表单
+    adjustHostingBalanceForm.value = { type: 'available', operation: 'add', amount: '', reason: '' }
+    // 刷新明细
+    if (hostingBalanceLogs.value.length > 0) {
+      await loadHostingBalanceLogs()
+    }
+    // 刷新用户列表
+    await loadUsers()
+    // 切换到概览TAB
+    hostingBalanceTab.value = 'overview'
+  } catch (err) {
+    toast.error(t('admin.users.hostingBalanceAdjustFailed') + ': ' + err.message)
+  } finally {
+    adjustHostingBalanceLoading.value = false
+  }
+}
+
+// 获取托管余额记录类型标签
+function getHostingLogTypeLabel(type, actionType) {
+  if (actionType === 'admin_adjust') return t('admin.users.hostingLogType.admin_adjust')
+  const labels = {
+    income: t('admin.users.hostingLogType.income'),
+    deduction: t('admin.users.hostingLogType.deduction'),
+    unfreeze: t('admin.users.hostingLogType.unfreeze'),
+    withdraw: t('admin.users.hostingLogType.withdraw')
+  }
+  return labels[type] || type
+}
+
+// 获取余额记录类型标签
+function getBalanceLogTypeLabel(type) {
+  const labels = {
+    recharge: t('admin.users.balanceType.recharge'),
+    consume: t('admin.users.balanceType.consume'),
+    refund: t('admin.users.balanceType.refund'),
+    admin_adjust: t('admin.users.balanceType.admin_adjust'),
+    gift: t('admin.users.balanceType.gift'),
+    transfer_fee: t('admin.users.balanceType.transfer_fee'),
+    transfer_refund: t('admin.users.balanceType.transfer_refund')
+  }
+  return labels[type] || type
+}
+
+// 获取充值记录状态样式
+function getRechargeStatusStyle(status) {
+  const styles = {
+    completed: 'badge-success',
+    pending: 'badge-warning',
+    failed: 'badge-error',
+    cancelled: 'badge-default',
+    expired: 'badge-default'
+  }
+  return styles[status] || 'badge-default'
+}
+
+function formatLocation(record) {
+  const parts = [
+    normalizeCountryName(record.country, normalizedCountryLabels.value),
+    record.region,
+    record.city
+  ].filter(Boolean)
+  return parts.length > 0 ? parts.join(', ') : '-'
+}
+
+// 解析 User-Agent 获取设备信息
+function formatDevice(userAgent) {
+  if (!userAgent) return '-'
+  if (userAgent.includes('Windows')) return 'Windows'
+  if (userAgent.includes('Mac OS')) return 'macOS'
+  if (userAgent.includes('Linux') && !userAgent.includes('Android')) return 'Linux'
+  if (userAgent.includes('Android')) return 'Android'
+  if (userAgent.includes('iPhone')) return 'iPhone'
+  if (userAgent.includes('iPad')) return 'iPad'
+  return '-'
+}
+
+// 解析 User-Agent 获取浏览器信息
+function formatBrowser(userAgent) {
+  if (!userAgent) return '-'
+  if (userAgent.includes('Edg')) return 'Edge'
+  if (userAgent.includes('Chrome')) return 'Chrome'
+  if (userAgent.includes('Firefox')) return 'Firefox'
+  if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) return 'Safari'
+  if (userAgent.includes('Opera') || userAgent.includes('OPR')) return 'Opera'
+  return '-'
+}
+
+function handleUserPageSizeChange() {
+  userPage.value = 1
+  loadUsers()
+}
+
+function handleInvitesPageSizeChange() {
+  invitesPage.value = 1
+  loadInvites()
+}
+
+function handleInviteStatusFilterChange(status) {
+  if (inviteStatusFilter.value === status) return
+  inviteStatusFilter.value = status
+  invitesPage.value = 1
+  loadInvites()
+}
+
+function getInviteStatus(invite) {
+  if (invite.used_by || invite.usedBy) {
+    return { label: t('admin.users.inviteUsed'), class: 'badge-success' }
+  }
+  if (invite.expires_at || invite.expiresAt) {
+    const expiry = new Date(invite.expires_at || invite.expiresAt)
+    if (expiry < new Date()) {
+      return { label: t('admin.users.inviteExpired'), class: 'badge-error' }
+    }
+  }
+  return { label: t('admin.users.inviteUnused'), class: 'badge-warning' }
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+function formatRegisteredAge(createdAt) {
+  if (!createdAt) return '-'
+  const createdDate = new Date(createdAt)
+  if (Number.isNaN(createdDate.getTime())) return '-'
+
+  const today = new Date()
+  const msPerDay = 24 * 60 * 60 * 1000
+  const todayDay = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) / msPerDay
+  const createdDay = Date.UTC(createdDate.getFullYear(), createdDate.getMonth(), createdDate.getDate()) / msPerDay
+  const days = Math.max(0, Math.floor(todayDay - createdDay))
+
+  return days === 0
+    ? t('admin.users.registeredNew')
+    : t('admin.users.registeredDays', { days })
+}
+
+function _formatMemory(mb) {
+  if (!mb) return '0'
+  if (mb >= 1024) return (mb / 1024).toFixed(0) + ' GB'
+  return mb + ' MB'
+}
+
+function _getQuotaPercent(used, limit) {
+  if (!limit) return 0
+  return Math.min(100, Math.round((used / limit) * 100))
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- 页面头部 -->
+    <div class="page-header flex-col sm:flex-row gap-4 sm:gap-0">
+      <div>
+        <h1 class="page-title">{{ t('admin.users.title') }}</h1>
+        <p class="page-description">{{ t('admin.users.description') }}</p>
+      </div>
+      <button class="btn-primary w-full sm:w-auto justify-center" @click="openGenerateModal">
+        <svg 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="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('admin.users.generateInvite') }}
+      </button>
+    </div>
+
+    <!-- Tab 切换 -->
+    <div class="border-b border-themed overflow-x-auto">
+      <nav class="flex flex-nowrap gap-3 sm:gap-4 md:gap-6 min-w-max">
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex-shrink-0',
+            activeTab === 'users'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="switchTab('users')"
+        >
+          {{ t('nav.users') }}
+          <span class="ml-1.5 px-1.5 py-0.5 text-xs rounded count-badge">
+            {{ userTotal }}
+          </span>
+        </button>
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex-shrink-0',
+            activeTab === 'invites'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="switchTab('invites')"
+        >
+          {{ t('admin.users.invites') }}
+          <span v-if="invitesTotal" class="ml-1.5 px-1.5 py-0.5 text-xs rounded count-badge">
+            {{ invitesTotal }}
+          </span>
+        </button>
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex-shrink-0',
+            activeTab === 'linkedAccounts'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="switchTab('linkedAccounts')"
+        >
+          {{ t('admin.users.linkedAccounts') }}
+        </button>
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex-shrink-0',
+            activeTab === 'userVipLevels'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="switchTab('userVipLevels')"
+        >
+          {{ t('admin.users.userVipLevels') }}
+        </button>
+        <button
+          :class="[
+            'pb-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex-shrink-0',
+            activeTab === 'vipBenefits'
+              ? (themeStore.isDark ? 'border-white text-white' : 'border-gray-900 text-gray-900')
+              : 'border-transparent text-themed-muted hover:text-themed-secondary'
+          ]"
+          @click="switchTab('vipBenefits')"
+        >
+          {{ t('admin.users.vipBenefits') }}
+        </button>
+      </nav>
+    </div>
+
+    <!-- 用户列表 -->
+    <div v-if="activeTab === 'users'" class="space-y-4">
+      <!-- 搜索栏 -->
+      <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+        <div class="relative w-full xl:max-w-sm">
+          <input 
+            v-model="userSearch" 
+            type="text" 
+            :placeholder="t('admin.users.searchPlaceholder')" 
+            class="input pl-9 w-full"
+          />
+          <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <div class="flex flex-wrap items-center gap-4">
+          <div class="flex flex-wrap items-center gap-3">
+            <span class="text-sm text-themed-secondary whitespace-nowrap">{{ t('admin.users.searchRange') }}</span>
+            <label
+              v-for="field in USER_SEARCH_FIELD_OPTIONS"
+              :key="field.value"
+              class="inline-flex items-center gap-2 text-sm text-themed-secondary whitespace-nowrap cursor-pointer select-none"
+            >
+              <input
+                v-model="userSearchFields"
+                :value="field.value"
+                type="checkbox"
+                class="h-4 w-4 shrink-0 rounded border accent-accent focus:ring-2 focus:ring-accent/20 disabled:cursor-not-allowed disabled:opacity-50"
+                :class="themeStore.isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-300 bg-white'"
+                :disabled="normalizedUserSearchFields.length === 1 && normalizedUserSearchFields.includes(field.value)"
+              />
+              <span>{{ t(field.label) }}</span>
+            </label>
+          </div>
+          <label class="inline-flex items-center gap-2 text-sm text-themed-secondary whitespace-nowrap cursor-pointer select-none">
+            <input
+              v-model="userSearchExact"
+              type="checkbox"
+              class="h-4 w-4 shrink-0 rounded border accent-accent focus:ring-2 focus:ring-accent/20"
+              :class="themeStore.isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-300 bg-white'"
+            />
+            <span>{{ t('admin.users.exactMatch') }}</span>
+          </label>
+        </div>
+      </div>
+
+      <SkeletonLoader v-if="usersLoading" type="list" />
+      
+      <div v-else-if="users.length === 0" class="card p-8 text-center text-themed-muted text-sm">
+        {{ userSearch ? t('admin.users.noMatchingUsers') : t('admin.users.noUsers') }}
+      </div>
+      
+      <!-- 用户表格 -->
+      <div v-else class="card overflow-x-auto">
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-[800px]">
+            <thead class="bg-themed-tertiary border-b border-themed">
+              <tr>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">ID</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.userInfo') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.role') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.status') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.balance') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.points') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.hostingBalance') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.allInstances') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.userActivity') }}</th>
+                <th class="text-right text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('common.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-themed">
+              <tr v-for="user in users" :key="user.id" class="hover:bg-themed-hover transition-colors">
+                <!-- 用户 ID -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="text-sm font-mono text-themed-muted">#{{ user.id }}</span>
+                </td>
+                <!-- 用户信息 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex items-center gap-3">
+                    <UserAvatar 
+                      :username="user.username" 
+                      :email="user.email"
+                      :avatar-style="user.avatarStyle || 'bigSmile'"
+                      :badge-id="user.avatarBadgeId || null"
+                      :size="36"
+                    />
+                    <div class="min-w-0">
+                      <div class="text-sm font-medium text-themed truncate">{{ user.username }}</div>
+                      <div class="text-xs text-themed-muted truncate">{{ user.email || t('admin.users.noEmail') }}</div>
+                    </div>
+                  </div>
+                </td>
+                <!-- 角色 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span :class="['badge whitespace-nowrap', user.role === 'admin' ? 'badge-default' : 'badge-default']">
+                    {{ user.role === 'admin' ? t('admin.users.admin') : t('admin.users.user') }}
+                  </span>
+                </td>
+                <!-- 状态 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span :class="['badge whitespace-nowrap', user.status === 'active' ? 'badge-success' : 'badge-error']">
+                    {{ user.status === 'active' ? t('admin.users.active') : t('admin.users.banned') }}
+                  </span>
+                </td>
+                <!-- 余额 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex flex-col gap-0.5">
+                    <button 
+                      class="text-sm font-medium hover:text-primary transition-colors text-left"
+                      :class="user.balance > 0 ? 'text-success' : 'text-themed-muted'"
+                      :title="t('admin.users.viewBalance')"
+                      @click="openBalanceModal(user)"
+                    >
+                      ¥{{ (user.balance || 0).toFixed(2) }}
+                    </button>
+                    <span 
+                      v-if="user.totalConsume > 0" 
+                      class="text-xs text-themed-muted"
+                      :title="t('admin.users.totalConsumed')"
+                    >
+                      {{ t('admin.users.consumed') }} ¥{{ (user.totalConsume || 0).toFixed(2) }}
+                    </span>
+                  </div>
+                </td>
+                <!-- 积分 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex flex-col gap-0.5">
+                    <button 
+                      class="text-sm font-medium hover:text-primary transition-colors text-left"
+                      :class="user.points > 0 ? 'text-amber-500' : 'text-themed-muted'"
+                      :title="t('admin.users.adjustPoints')"
+                      @click="openPointsModal(user)"
+                    >
+                      {{ user.points || 0 }}
+                    </button>
+                    <span 
+                      v-if="(user.totalEarnedPoints - user.points) > 0" 
+                      class="text-xs text-themed-muted"
+                      :title="t('admin.users.spentPoints')"
+                    >
+                      {{ t('admin.users.spent') }} {{ user.totalEarnedPoints - user.points }}
+                    </span>
+                  </div>
+                </td>
+                <!-- 托管余额 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex flex-col gap-0.5">
+                    <button 
+                      class="text-sm font-medium hover:text-primary transition-colors text-left"
+                      :class="user.hostingBalance > 0 ? 'text-success' : 'text-themed-muted'"
+                      :title="t('admin.users.viewHostingBalance')"
+                      @click="openHostingBalanceModal(user)"
+                    >
+                      ¥{{ (user.hostingBalance || 0).toFixed(2) }}
+                    </button>
+                    <span 
+                      v-if="user.hostingBalanceFrozen > 0" 
+                      class="text-xs text-themed-muted"
+                      :title="t('admin.users.frozenHostingBalance')"
+                    >
+                      {{ t('admin.users.frozen') }} ¥{{ (user.hostingBalanceFrozen || 0).toFixed(2) }}
+                    </span>
+                  </div>
+                </td>
+                <!-- 所有实例 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div v-if="user.quota" class="flex items-center gap-1.5">
+                    <span class="text-sm text-themed-secondary">{{ user.instanceCount || 0 }} {{ t('admin.users.instances') }}</span>
+                    <button 
+                      v-if="user.instanceCount > 0"
+                      class="btn-ghost btn-xs p-1 text-themed-muted hover:text-themed"
+                      :title="t('admin.users.viewInstances')"
+                      @click="viewUserInstances(user)"
+                    >
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                      </svg>
+                    </button>
+                  </div>
+                  <span v-else class="text-sm text-themed-muted">-</span>
+                </td>
+                <!-- 用户活动 -->
+                <td class="px-4 py-3 whitespace-nowrap align-middle">
+                  <button 
+                    v-if="user.lastLogin"
+                    class="-mx-1.5 -my-0.5 flex min-h-[40px] w-full flex-col justify-center rounded px-1.5 py-0.5 text-left transition-colors hover:bg-themed-hover"
+                    :title="t('admin.users.viewLoginRecords')"
+                    @click="openLoginRecordsModal(user)"
+                  >
+                    <div class="flex items-center gap-1.5 text-xs leading-4 text-themed-secondary">
+                      <span :title="t('admin.users.createdAt') + ' ' + formatDate(user.createdAt)">
+                        {{ formatRegisteredAge(user.createdAt) }}
+                      </span>
+                      <span class="text-themed-muted">·</span>
+                      <span>{{ formatDate(user.lastLogin.createdAt) }}</span>
+                    </div>
+                    <div class="text-xs text-themed-muted truncate max-w-[120px]" :title="user.lastLogin.ip">
+                      {{ user.lastLogin.ip }}
+                    </div>
+                  </button>
+                  <button 
+                    v-else
+                    class="-mx-1.5 -my-0.5 flex min-h-[40px] w-full flex-col justify-center rounded px-1.5 py-0.5 text-left transition-colors hover:bg-themed-hover"
+                    :title="t('admin.users.viewLoginRecords')"
+                    @click="openLoginRecordsModal(user)"
+                  >
+                    <span class="text-xs leading-4 text-themed-secondary" :title="t('admin.users.createdAt') + ' ' + formatDate(user.createdAt)">
+                      {{ formatRegisteredAge(user.createdAt) }}
+                    </span>
+                    <span class="text-xs text-themed-muted">{{ t('admin.users.noLoginRecord') }}</span>
+                  </button>
+                </td>
+                <!-- 操作 -->
+                <td class="px-4 py-3 text-right whitespace-nowrap">
+                  <div class="flex items-center justify-end gap-1">
+                    <button class="btn-ghost btn-sm" :title="t('admin.users.viewInstances')" @click="viewUserInstances(user)">
+                      <svg 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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+                      </svg>
+                    </button>
+                    <!-- 发送站内信 -->
+                    <button 
+                      v-if="user.id !== authStore.user?.id"
+                      class="btn-ghost btn-sm" 
+                      :title="t('admin.users.sendMessage')" 
+                      @click="openSendMessageModal(user)"
+                    >
+                      <svg 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                      </svg>
+                    </button>
+                    <!-- 重置密码 -->
+                    <button class="btn-ghost btn-sm" :title="t('admin.users.resetPassword')" @click="openResetPasswordModal(user)">
+                      <svg 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 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                      </svg>
+                    </button>
+                    <!-- 管理员角色 -->
+                    <button
+                      v-if="user.id !== authStore.user?.id"
+                      class="btn-ghost btn-sm"
+                      :class="user.role === 'admin' ? 'text-warning' : 'text-info'"
+                      :title="user.role === 'admin' ? t('admin.users.demoteAdmin') : t('admin.users.promoteAdmin')"
+                      @click="toggleUserRole(user)"
+                    >
+                      <svg v-if="user.role === 'admin'" 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="M18 12H6" />
+                      </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="M12 3.75l7.5 3v5.25c0 4.35-2.94 8.4-7.5 9.75-4.56-1.35-7.5-5.4-7.5-9.75V6.75l7.5-3z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 12.25l1.5 1.5 3.5-3.75" />
+                      </svg>
+                    </button>
+                    <!-- 取消2FA -->
+                    <button 
+                      v-if="user.twoFAEnabled"
+                      class="btn-ghost btn-sm text-warning" 
+                      :title="t('admin.users.disable2FA')" 
+                      @click="openDisable2FAModal(user)"
+                    >
+                      <svg 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                      </svg>
+                    </button>
+                    <!-- 解绑GitHub -->
+                    <button 
+                      v-if="user.hasGithubBinding"
+                      class="btn-ghost btn-sm text-info" 
+                      :title="t('admin.users.unbindGitHub')" 
+                      @click="openUnbindGitHubModal(user)"
+                    >
+                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                      </svg>
+                    </button>
+                    <button 
+                      v-if="user.role !== 'admin'"
+                      class="btn-ghost btn-sm"
+                      :class="user.status === 'active' ? 'text-warning' : 'text-success'"
+                      :title="user.status === 'active' ? t('admin.users.ban') : t('admin.users.unban')"
+                      @click="toggleUserStatus(user)"
+                    >
+                      <svg v-if="user.status === 'active'" 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                      </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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div 
+        v-if="userTotal > 0" 
+        class="flex items-center justify-between px-4 py-3 border-t border-themed"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+            {{ t('admin.users.totalRecords', { count: userTotal }) }}
+          </span>
+          <select
+            v-model="userPageSize"
+            class="text-sm rounded-md border-0 py-1 pl-2 pr-7 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer"
+            :class="themeStore.isDark 
+              ? 'bg-gray-800 text-gray-300 ring-gray-700' 
+              : 'bg-gray-50 text-gray-700 ring-gray-200'"
+            @change="handleUserPageSizeChange"
+          >
+            <option :value="10">10 / {{ t('common.page') }}</option>
+            <option :value="30">30 / {{ t('common.page') }}</option>
+            <option :value="50">50 / {{ t('common.page') }}</option>
+            <option :value="100">100 / {{ t('common.page') }}</option>
+          </select>
+        </div>
+        <div v-if="userTotalPages > 1" class="flex items-center gap-1">
+          <button
+            :disabled="userPage <= 1"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              userPage <= 1 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="userPage--; loadUsers()"
+          >
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div 
+            class="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium"
+            :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+          >
+            <span>{{ userPage }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">/</span>
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ userTotalPages }}</span>
+          </div>
+          <button
+            :disabled="userPage >= userTotalPages"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              userPage >= userTotalPages 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="userPage++; loadUsers()"
+          >
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 邀请码列表 -->
+    <div v-if="activeTab === 'invites'" class="space-y-4">
+      <div class="flex justify-end">
+        <div
+          class="inline-flex items-center gap-1 rounded-lg p-1"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'"
+        >
+          <button
+            v-for="option in inviteStatusFilterOptions"
+            :key="option.value"
+            type="button"
+            :disabled="invitesLoading"
+            class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            :class="inviteStatusFilter === option.value
+              ? themeStore.isDark
+                ? 'bg-gray-700 text-white shadow-sm'
+                : 'bg-white text-gray-900 shadow-sm'
+              : themeStore.isDark
+                ? 'text-gray-400 hover:text-gray-200'
+                : 'text-gray-600 hover:text-gray-900'"
+            @click="handleInviteStatusFilterChange(option.value)"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+      </div>
+
+      <SkeletonLoader v-if="invitesLoading" type="list" />
+      
+      <div v-else-if="invites.length === 0" class="card p-8 text-center text-themed-muted text-sm">
+        {{ inviteStatusFilter === 'all' ? t('admin.users.noInvites') : t('admin.users.noMatchingInvites') }}
+      </div>
+
+      <div v-else class="card overflow-x-auto">
+        <div class="overflow-x-auto">
+          <table class="w-full min-w-[800px]">
+            <thead class="bg-themed-tertiary border-b border-themed">
+              <tr>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.inviteCode') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.createdBy') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.inviteStatus') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.usedBy') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.createdAt') }}</th>
+                <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.users.usedExpireAt') }}</th>
+                <th class="text-right text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('common.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody class="divide-themed">
+              <tr v-for="invite in invites" :key="invite.id" class="hover:bg-themed-hover">
+                <td class="px-4 py-3 font-mono text-sm text-themed-secondary whitespace-nowrap">{{ invite.code }}</td>
+                <td class="px-4 py-3 text-sm whitespace-nowrap">
+                  <div v-if="invite.createdByUsername" class="flex items-center gap-2">
+                    <UserAvatar
+                      v-if="invite.createdByAvatarStyle"
+                      :username="invite.createdByUsername"
+                      :email="invite.createdByEmail"
+                      :avatar-style="invite.createdByAvatarStyle"
+                      :badge-id="invite.createdByAvatarBadgeId || null"
+                      :size="24"
+                    />
+                    <span class="text-themed">{{ invite.createdByUsername }}</span>
+                  </div>
+                  <span v-else class="text-themed-muted">-</span>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span :class="['badge whitespace-nowrap', getInviteStatus(invite).class]">{{ getInviteStatus(invite).label }}</span>
+                </td>
+                <td class="px-4 py-3 text-sm whitespace-nowrap">
+                  <div v-if="invite.usedByUsername" class="flex items-center gap-2">
+                    <UserAvatar
+                      v-if="invite.usedByAvatarStyle"
+                      :username="invite.usedByUsername"
+                      :email="invite.usedByEmail"
+                      :avatar-style="invite.usedByAvatarStyle"
+                      :badge-id="invite.usedByAvatarBadgeId || null"
+                      :size="24"
+                    />
+                    <span class="text-themed">{{ invite.usedByUsername }}</span>
+                  </div>
+                  <span v-else class="text-themed-muted">-</span>
+                </td>
+                <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">{{ formatDate(invite.createdAt) }}</td>
+                <td class="px-4 py-3 text-sm text-themed-muted whitespace-nowrap">
+                  <span v-if="invite.usedAt">{{ formatDate(invite.usedAt) }}</span>
+                  <span v-else-if="invite.expiresAt">{{ formatDate(invite.expiresAt) }}</span>
+                  <span v-else class="text-themed-faint">{{ t('admin.users.permanent') }}</span>
+                </td>
+                <td class="px-4 py-3 text-right whitespace-nowrap">
+                  <button 
+                    class="btn-ghost btn-sm text-error"
+                    @click="deleteInvite(invite)"
+                  >
+                    {{ t('admin.users.deleteInvite') }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div 
+        v-if="invitesTotal > 0" 
+        class="flex items-center justify-between px-4 py-3 border-t border-themed"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-sm" :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">
+            {{ t('admin.users.totalRecords', { count: invitesTotal }) }}
+          </span>
+          <select
+            v-model="invitesPageSize"
+            class="text-sm rounded-md border-0 py-1 pl-2 pr-7 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer"
+            :class="themeStore.isDark 
+              ? 'bg-gray-800 text-gray-300 ring-gray-700' 
+              : 'bg-gray-50 text-gray-700 ring-gray-200'"
+            @change="handleInvitesPageSizeChange"
+          >
+            <option :value="10">10 / {{ t('common.page') }}</option>
+            <option :value="30">30 / {{ t('common.page') }}</option>
+            <option :value="50">50 / {{ t('common.page') }}</option>
+            <option :value="100">100 / {{ t('common.page') }}</option>
+          </select>
+        </div>
+        <div v-if="invitesTotalPages > 1" class="flex items-center gap-1">
+          <button
+            :disabled="invitesPage <= 1"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              invitesPage <= 1 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="invitesPage--; loadInvites()"
+          >
+            <svg 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 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div 
+            class="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium"
+            :class="themeStore.isDark ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'"
+          >
+            <span>{{ invitesPage }}</span>
+            <span :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'">/</span>
+            <span :class="themeStore.isDark ? 'text-gray-500' : 'text-gray-500'">{{ invitesTotalPages }}</span>
+          </div>
+          <button
+            :disabled="invitesPage >= invitesTotalPages"
+            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors"
+            :class="[
+              invitesPage >= invitesTotalPages 
+                ? 'opacity-40 cursor-not-allowed' 
+                : themeStore.isDark 
+                  ? 'hover:bg-gray-800 text-gray-400' 
+                  : 'hover:bg-gray-100 text-gray-600'
+            ]"
+            @click="invitesPage++; loadInvites()"
+          >
+            <svg 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="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关联账号检测 -->
+    <div v-if="activeTab === 'linkedAccounts'" class="space-y-4">
+      <!-- 操作栏 -->
+      <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-4">
+        <div class="flex items-center gap-3">
+          <label class="text-sm text-themed-secondary whitespace-nowrap">{{ t('admin.users.detectDays') }}</label>
+          <select v-model.number="linkedAccountsDays" class="input w-auto flex-1 sm:flex-none">
+            <option :value="30">30 {{ t('admin.users.daysUnit') }}</option>
+            <option :value="60">60 {{ t('admin.users.daysUnit') }}</option>
+            <option :value="90">90 {{ t('admin.users.daysUnit') }}</option>
+            <option :value="180">180 {{ t('admin.users.daysUnit') }}</option>
+            <option :value="365">365 {{ t('admin.users.daysUnit') }}</option>
+          </select>
+        </div>
+        <button 
+          class="btn-primary w-full sm:w-auto justify-center" 
+          :disabled="linkedAccountsLoading"
+          @click="loadLinkedAccounts"
+        >
+          <svg v-if="linkedAccountsLoading" class="w-4 h-4 animate-spin mr-1" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          {{ linkedAccountsLoading ? t('admin.users.detecting') : t('admin.users.startDetect') }}
+        </button>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="linkedAccountsLoading" class="card p-8 text-center">
+        <svg class="w-8 h-8 animate-spin mx-auto text-themed-muted" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="text-sm text-themed-muted mt-3">{{ t('admin.users.detectingHint') }}</p>
+      </div>
+
+      <!-- 未检测 -->
+      <div v-else-if="!linkedAccountsData" class="card p-8 text-center text-themed-muted text-sm">
+        <svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+        {{ t('admin.users.clickToDetect') }}
+      </div>
+
+      <!-- 检测结果 -->
+      <template v-else>
+        <!-- 摘要信息 -->
+        <div class="card p-4">
+          <div class="flex flex-wrap items-center gap-4 text-sm">
+            <div class="flex items-center gap-2">
+              <span class="text-themed-muted">{{ t('admin.users.detectTime') }}:</span>
+              <span class="text-themed-secondary">{{ formatDate(linkedAccountsData.detectedAt) }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-themed-muted">{{ t('admin.users.detectDuration') }}:</span>
+              <span class="text-themed-secondary">{{ linkedAccountsData.durationMs }}ms</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-themed-muted">{{ t('admin.users.detectRange') }}:</span>
+              <span class="text-themed-secondary">{{ linkedAccountsData.days }} {{ t('admin.users.daysUnit') }}</span>
+            </div>
+          </div>
+          <div class="flex flex-wrap gap-4 mt-3 pt-3 border-t border-themed">
+            <div class="flex items-center gap-2">
+              <span class="badge badge-warning">{{ linkedAccountsData.summary.ipGroups }}</span>
+              <span class="text-sm text-themed-secondary">{{ t('admin.users.ipGroupCount') }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="badge badge-info">{{ linkedAccountsData.summary.emailGroups }}</span>
+              <span class="text-sm text-themed-secondary">{{ t('admin.users.emailGroupCount') }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="badge badge-default">{{ linkedAccountsData.summary.usernameGroups }}</span>
+              <span class="text-sm text-themed-secondary">{{ t('admin.users.usernameGroupCount') }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- IP 关联组 -->
+        <div v-if="linkedAccountsData.ipGroups.length > 0" class="space-y-2">
+          <h3 class="text-sm font-medium text-themed flex items-center gap-2">
+            <svg 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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+            </svg>
+            {{ t('admin.users.ipLinkedGroups') }} ({{ linkedAccountsData.ipGroups.length }})
+          </h3>
+          <div class="space-y-2">
+            <div 
+              v-for="group in linkedAccountsData.ipGroups" 
+              :key="group.ip" 
+              class="card overflow-hidden"
+            >
+              <button 
+                class="w-full px-4 py-3 flex items-center justify-between hover:bg-themed-hover transition-colors text-left"
+                @click="toggleIPGroup(group.ip)"
+              >
+                <div class="flex items-center gap-3">
+                  <span class="font-mono text-sm text-themed">{{ group.ip }}</span>
+                  <span class="badge badge-warning">{{ group.userCount }} {{ t('admin.users.usersCount') }}</span>
+                  <span class="text-xs text-themed-muted">{{ group.totalLogins }} {{ t('admin.users.loginsCount') }}</span>
+                </div>
+                <svg 
+                  class="w-4 h-4 text-themed-muted transition-transform" 
+                  :class="{ 'rotate-180': linkedAccountsExpandedIP.has(group.ip) }"
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              <div v-if="linkedAccountsExpandedIP.has(group.ip)" class="border-t border-themed">
+                <div class="divide-y divide-themed">
+                  <div 
+                    v-for="user in group.users" 
+                    :key="user.id" 
+                    class="px-4 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-1 sm:gap-3 text-sm hover:bg-themed-hover"
+                  >
+                    <div class="flex flex-wrap items-center gap-2 sm:gap-3">
+                      <span class="font-mono text-themed-muted">#{{ user.id }}</span>
+                      <span class="font-medium text-themed">{{ user.username }}</span>
+                      <span v-if="user.email" class="text-themed-muted truncate max-w-[200px]">{{ user.email }}</span>
+                      <span :class="['badge', user.status === 'active' ? 'badge-success' : 'badge-error']">{{ user.status === 'active' ? t('admin.users.active') : t('admin.users.banned') }}</span>
+                    </div>
+                    <div class="text-xs text-themed-muted whitespace-nowrap">
+                      {{ user.loginCount }} {{ t('admin.users.loginsCount') }} · {{ t('admin.users.lastLoginAt') }} {{ formatDate(user.lastLogin) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 邮箱相似组 -->
+        <div v-if="linkedAccountsData.emailGroups.length > 0" class="space-y-2">
+          <h3 class="text-sm font-medium text-themed flex items-center gap-2">
+            <svg 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            {{ t('admin.users.emailSimilarGroups') }} ({{ linkedAccountsData.emailGroups.length }})
+          </h3>
+          <div class="space-y-2">
+            <div 
+              v-for="group in linkedAccountsData.emailGroups" 
+              :key="group.pattern" 
+              class="card overflow-hidden"
+            >
+              <button 
+                class="w-full px-4 py-3 flex items-center justify-between hover:bg-themed-hover transition-colors text-left"
+                @click="toggleEmailGroup(group.pattern)"
+              >
+                <div class="flex items-center gap-3">
+                  <span class="font-mono text-sm text-themed">{{ group.pattern }}*</span>
+                  <span class="badge badge-info">{{ group.userCount }} {{ t('admin.users.usersCount') }}</span>
+                </div>
+                <svg 
+                  class="w-4 h-4 text-themed-muted transition-transform" 
+                  :class="{ 'rotate-180': linkedAccountsExpandedEmail.has(group.pattern) }"
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              <div v-if="linkedAccountsExpandedEmail.has(group.pattern)" class="border-t border-themed">
+                <div class="divide-y divide-themed">
+                  <div 
+                    v-for="user in group.users" 
+                    :key="user.id" 
+                    class="px-4 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-1 sm:gap-3 text-sm hover:bg-themed-hover"
+                  >
+                    <div class="flex flex-wrap items-center gap-2 sm:gap-3">
+                      <span class="font-mono text-themed-muted">#{{ user.id }}</span>
+                      <span class="font-medium text-themed">{{ user.username }}</span>
+                      <span class="text-themed-secondary truncate max-w-[200px]">{{ user.email }}</span>
+                      <span :class="['badge', user.status === 'active' ? 'badge-success' : 'badge-error']">{{ user.status === 'active' ? t('admin.users.active') : t('admin.users.banned') }}</span>
+                    </div>
+                    <div class="text-xs text-themed-muted whitespace-nowrap">
+                      {{ t('admin.users.createdAt') }} {{ formatDate(user.createdAt) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 用户名相似组 -->
+        <div v-if="linkedAccountsData.usernameGroups.length > 0" class="space-y-2">
+          <h3 class="text-sm font-medium text-themed flex items-center gap-2">
+            <svg 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            {{ t('admin.users.usernameSimilarGroups') }} ({{ linkedAccountsData.usernameGroups.length }})
+          </h3>
+          <div class="space-y-2">
+            <div 
+              v-for="group in linkedAccountsData.usernameGroups" 
+              :key="group.pattern" 
+              class="card overflow-hidden"
+            >
+              <button 
+                class="w-full px-4 py-3 flex items-center justify-between hover:bg-themed-hover transition-colors text-left"
+                @click="toggleUsernameGroup(group.pattern)"
+              >
+                <div class="flex items-center gap-3">
+                  <span class="font-mono text-sm text-themed">{{ group.pattern }}*</span>
+                  <span class="badge badge-default">{{ group.userCount }} {{ t('admin.users.usersCount') }}</span>
+                </div>
+                <svg 
+                  class="w-4 h-4 text-themed-muted transition-transform" 
+                  :class="{ 'rotate-180': linkedAccountsExpandedUsername.has(group.pattern) }"
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              <div v-if="linkedAccountsExpandedUsername.has(group.pattern)" class="border-t border-themed">
+                <div class="divide-y divide-themed">
+                  <div 
+                    v-for="user in group.users" 
+                    :key="user.id" 
+                    class="px-4 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-1 sm:gap-3 text-sm hover:bg-themed-hover"
+                  >
+                    <div class="flex flex-wrap items-center gap-2 sm:gap-3">
+                      <span class="font-mono text-themed-muted">#{{ user.id }}</span>
+                      <span class="font-medium text-themed">{{ user.username }}</span>
+                      <span v-if="user.email" class="text-themed-muted truncate max-w-[200px]">{{ user.email }}</span>
+                      <span :class="['badge', user.status === 'active' ? 'badge-success' : 'badge-error']">{{ user.status === 'active' ? t('admin.users.active') : t('admin.users.banned') }}</span>
+                    </div>
+                    <div class="text-xs text-themed-muted whitespace-nowrap">
+                      {{ t('admin.users.createdAt') }} {{ formatDate(user.createdAt) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 无检测结果 -->
+        <div 
+          v-if="linkedAccountsData.ipGroups.length === 0 && linkedAccountsData.emailGroups.length === 0 && linkedAccountsData.usernameGroups.length === 0" 
+          class="card p-8 text-center text-themed-muted text-sm"
+        >
+          <svg class="w-12 h-12 mx-auto mb-3 text-success opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          {{ t('admin.users.noLinkedAccounts') }}
+        </div>
+      </template>
+    </div>
+
+    <VipLevelRulesEditor v-if="activeTab === 'userVipLevels'" type="user" />
+    <VipBenefitHallSettings v-if="activeTab === 'vipBenefits'" />
+
+    <!-- 生成邀请码配置弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showGenerateModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showGenerateModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.generateInviteTitle') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showGenerateModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <div>
+                <label class="block text-sm text-themed-secondary mb-2">{{ t('admin.users.inviteCount') }}</label>
+                <select v-model.number="inviteCount" class="input">
+                  <option :value="1">1 {{ t('admin.users.countUnit') }}</option>
+                  <option :value="5">5 {{ t('admin.users.countUnit') }}</option>
+                  <option :value="20">20 {{ t('admin.users.countUnit') }}</option>
+                  <option :value="50">50 {{ t('admin.users.countUnit') }}</option>
+                  <option :value="100">100 {{ t('admin.users.countUnit') }}</option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm text-themed-secondary mb-2">{{ t('admin.users.expireDays') }}</label>
+                <select v-model.number="inviteExpireDays" class="input">
+                  <option :value="1">{{ t('admin.users.day1') }}</option>
+                  <option :value="3">{{ t('admin.users.day3') }}</option>
+                  <option :value="7">{{ t('admin.users.day7') }}</option>
+                  <option :value="14">{{ t('admin.users.day14') }}</option>
+                  <option :value="30">{{ t('admin.users.day30') }}</option>
+                  <option :value="0">{{ t('admin.users.permanentValid') }}</option>
+                </select>
+                <p class="text-xs text-themed-muted mt-1.5">{{ t('admin.users.expireHint') }}</p>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showGenerateModal = false">{{ t('common.cancel') }}</button>
+              <button :disabled="inviteGenerating" class="btn-primary" @click="generateInvite">
+                <svg v-if="inviteGenerating" class="w-4 h-4 animate-spin mr-1" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {{ inviteGenerating ? t('admin.users.generating') : t('admin.users.generate') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 邀请码生成结果弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showInviteModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showInviteModal = false"></div>
+          <div class="modal-content" :class="{ 'max-w-lg': newInviteCodes.length > 0 }">
+            <div class="modal-header">
+              <h3 class="modal-title">
+                {{ t('admin.users.inviteGenerated') }}
+                <span v-if="newInviteCodes.length > 0" class="text-themed-muted font-normal text-sm ml-2">
+                  ({{ newInviteCodes.length }} {{ t('admin.users.countUnit') }})
+                </span>
+              </h3>
+              <button class="text-themed-muted hover:text-themed" @click="showInviteModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <!-- 单个邀请码 -->
+              <template v-if="newInviteCode">
+                <div class="bg-themed-tertiary rounded-lg p-4 font-mono text-lg text-center text-themed tracking-wider mb-3">
+                  {{ newInviteCode }}
+                </div>
+              </template>
+              <!-- 批量邀请码 -->
+              <template v-else-if="newInviteCodes.length > 0">
+                <div class="bg-themed-tertiary rounded-lg p-3 font-mono text-sm text-themed max-h-64 overflow-y-auto mb-3">
+                  <div v-for="(code, index) in newInviteCodes" :key="code" class="py-1 px-2 hover:bg-themed-hover rounded flex items-center justify-between">
+                    <span>{{ index + 1 }}. {{ code }}</span>
+                  </div>
+                </div>
+              </template>
+              <div v-if="newInviteExpiresAt" class="text-center text-sm text-themed-muted mb-4">
+                {{ t('admin.users.validUntil') }}: {{ formatDate(newInviteExpiresAt) }}
+              </div>
+              <div v-else class="text-center text-sm text-themed-muted mb-4">{{ t('admin.users.permanentValid') }}</div>
+              <div class="flex gap-2">
+                <button class="btn-primary flex-1" @click="copyCode">
+                  {{ copied ? t('admin.users.copied') : (newInviteCodes.length > 0 ? t('admin.users.copyAllCodes') : t('admin.users.copyCode')) }}
+                </button>
+                <button v-if="newInviteCode" class="btn-secondary flex-1" @click="copyLink">{{ t('admin.users.copyLink') }}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 重置密码确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showResetPasswordModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showResetPasswordModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.resetPassword') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showResetPasswordModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="text-themed-secondary">
+                {{ t('admin.users.resetPasswordConfirm', { name: resetPasswordUser?.username }) }}
+              </p>
+              <p class="text-sm text-themed-muted mt-2">{{ t('admin.users.resetPasswordHint') }}</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showResetPasswordModal = false">{{ t('common.cancel') }}</button>
+              <button :disabled="resetPasswordLoading" class="btn-primary" @click="resetPassword">
+                <svg v-if="resetPasswordLoading" class="w-4 h-4 animate-spin mr-1" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                {{ resetPasswordLoading ? t('admin.users.resetting') : t('admin.users.confirmResetPassword') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 重置密码结果弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showResetPasswordResultModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showResetPasswordResultModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.passwordResetSuccess') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showResetPasswordResultModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="text-sm text-themed-secondary mb-3">{{ t('admin.users.newPasswordFor', { name: resetPasswordUser?.username }) }}</p>
+              <div class="bg-themed-tertiary rounded-lg p-4 font-mono text-lg text-center text-themed tracking-wider mb-3 select-all">
+                {{ generatedPassword }}
+              </div>
+              <p class="text-xs text-themed-muted text-center">{{ t('admin.users.copyPasswordHint') }}</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showResetPasswordResultModal = false">{{ t('common.close') }}</button>
+              <button class="btn-primary" @click="copyGeneratedPassword">
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                {{ passwordCopied ? t('admin.users.copied') : t('admin.users.copyPassword') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 取消2FA确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showDisable2FAModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showDisable2FAModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.disable2FA') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showDisable2FAModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="text-themed-secondary">
+                {{ t('admin.users.disable2FAConfirm', { name: disable2FAUser?.username }) }}
+              </p>
+              <p class="text-sm text-themed-muted mt-2">{{ t('admin.users.disable2FAWarning') }}</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showDisable2FAModal = false">{{ t('common.cancel') }}</button>
+              <button :disabled="disable2FALoading" class="btn-danger" @click="disable2FA">
+                {{ disable2FALoading ? t('admin.system.saving') : t('common.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 解绑GitHub确认弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showUnbindGitHubModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showUnbindGitHubModal = false"></div>
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.unbindGitHub') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showUnbindGitHubModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p class="text-themed-secondary">
+                {{ t('admin.users.unbindGitHubConfirm', { name: unbindGitHubUser?.username }) }}
+              </p>
+              <p class="text-sm text-themed-muted mt-2">{{ t('admin.users.unbindGitHubWarning') }}</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showUnbindGitHubModal = false">{{ t('common.cancel') }}</button>
+              <button :disabled="unbindGitHubLoading" class="btn-danger" @click="unbindGitHub">
+                {{ unbindGitHubLoading ? t('admin.system.saving') : t('common.confirm') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 登录记录弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showLoginRecordsModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showLoginRecordsModal = false"></div>
+          <div class="modal-content max-w-2xl">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.loginRecords') }} - {{ loginRecordsUser?.username }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showLoginRecordsModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div class="modal-body">
+              <!-- 加载中 -->
+              <div v-if="loginRecordsLoading" class="flex items-center justify-center py-8">
+                <svg class="w-6 h-6 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              </div>
+              <!-- 无记录 -->
+              <div v-else-if="loginRecords.length === 0" class="text-center py-8 text-themed-muted text-sm">
+                {{ t('admin.users.noLoginRecords') }}
+              </div>
+              <!-- 记录列表 -->
+              <div v-else class="space-y-2 max-h-96 overflow-y-auto">
+                <div 
+                  v-for="record in loginRecords" 
+                  :key="record.id" 
+                  class="bg-themed-tertiary rounded-lg p-3 text-sm"
+                >
+                  <div class="flex items-start justify-between gap-4">
+                    <div class="min-w-0 flex-1 space-y-1">
+                      <!-- IP 地址 -->
+                      <div class="font-mono text-themed">{{ record.ip }}</div>
+                      <!-- 地理位置 -->
+                      <div v-if="record.country" class="text-xs text-themed-muted">
+                        {{ formatLocation(record) }}
+                        <span v-if="record.isp" class="text-themed-faint"> · {{ record.isp }}</span>
+                      </div>
+                      <div v-else-if="record.isp" class="text-xs text-themed-muted">{{ record.isp }}</div>
+                      <!-- 设备和浏览器 -->
+                      <div v-if="record.userAgent" class="text-xs text-themed-faint">
+                        {{ formatDevice(record.userAgent) }} · {{ formatBrowser(record.userAgent) }}
+                      </div>
+                    </div>
+                    <div class="text-xs text-themed-muted whitespace-nowrap flex-shrink-0">
+                      {{ formatDate(record.createdAt) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- 分页/记录数 -->
+              <div v-if="loginRecords.length > 0" class="flex items-center justify-between text-sm text-themed-muted mt-4 pt-4 border-t border-themed">
+                <span>{{ t('admin.users.totalRecords', { count: loginRecordsTotal }) }}</span>
+                <div v-if="loginRecordsTotalPages > 1" class="flex items-center gap-2">
+                  <button 
+                    :disabled="loginRecordsPage <= 1" 
+                    class="btn-ghost btn-sm"
+                    @click="loginRecordsPage--; loadLoginRecords()"
+                  >
+                    {{ t('admin.users.prevPage') }}
+                  </button>
+                  <span>{{ loginRecordsPage }} / {{ loginRecordsTotalPages }}</span>
+                  <button 
+                    :disabled="loginRecordsPage >= loginRecordsTotalPages" 
+                    class="btn-ghost btn-sm"
+                    @click="loginRecordsPage++; loadLoginRecords()"
+                  >
+                    {{ t('admin.users.nextPage') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showLoginRecordsModal = false">{{ t('common.close') }}</button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 发送站内信弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showSendMessageModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showSendMessageModal = false"></div>
+          <div class="modal-content max-w-lg">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.sendMessageTo', { username: sendMessageUser?.username }) }}</h3>
+              <button class="modal-close" @click="showSendMessageModal = false">&times;</button>
+            </div>
+            <div class="modal-body space-y-4">
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.messageTitle') }}</label>
+                <input 
+                  v-model="sendMessageForm.title" 
+                  type="text" 
+                  class="input" 
+                  :placeholder="t('admin.users.messageTitlePlaceholder')"
+                  maxlength="200"
+                />
+                <p class="mt-1 text-xs text-themed-muted">{{ sendMessageForm.title.length }}/200</p>
+              </div>
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.messageContent') }}</label>
+                <textarea 
+                  v-model="sendMessageForm.content" 
+                  class="input min-h-[120px]" 
+                  :placeholder="t('admin.users.messageContentPlaceholder')"
+                  maxlength="5000"
+                ></textarea>
+                <p class="mt-1 text-xs text-themed-muted">{{ sendMessageForm.content.length }}/5000</p>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showSendMessageModal = false">{{ t('common.cancel') }}</button>
+              <button 
+                class="btn-primary" 
+                :disabled="sendMessageLoading || !sendMessageForm.title.trim() || !sendMessageForm.content.trim()"
+                @click="sendMessage"
+              >
+                <svg v-if="sendMessageLoading" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                {{ sendMessageLoading ? t('common.sending') : t('common.send') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 用户余额详情弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showBalanceModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showBalanceModal = false"></div>
+          <div class="modal-content max-w-2xl">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.balanceDetails') }} - {{ balanceUser?.username }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showBalanceModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <!-- TAB 切换 -->
+            <div class="flex gap-1 border-b border-themed px-4">
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="balanceTab === 'overview' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchBalanceTab('overview')"
+              >
+                {{ t('admin.users.balanceOverview') }}
+              </button>
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="balanceTab === 'logs' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchBalanceTab('logs')"
+              >
+                {{ t('admin.users.balanceLogs') }}
+              </button>
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="balanceTab === 'recharge' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchBalanceTab('recharge')"
+              >
+                {{ t('admin.users.rechargeRecords') }}
+              </button>
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="balanceTab === 'adjust' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchBalanceTab('adjust')"
+              >
+                {{ t('admin.users.adjustBalance') }}
+              </button>
+            </div>
+            <div class="modal-body">
+              <!-- 余额概览 TAB -->
+              <div v-if="balanceTab === 'overview'">
+                <div v-if="balanceInfoLoading" class="flex items-center justify-center py-8">
+                  <svg class="w-6 h-6 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                </div>
+                <div v-else class="grid grid-cols-3 gap-4">
+                  <div class="bg-themed-tertiary rounded-lg p-4 text-center">
+                    <div class="text-2xl font-semibold" :class="balanceInfo.balance > 0 ? 'text-success' : 'text-themed'">
+                      ¥{{ balanceInfo.balance.toFixed(2) }}
+                    </div>
+                    <div class="text-xs text-themed-muted mt-1">{{ t('admin.users.currentBalance') }}</div>
+                  </div>
+                  <div class="bg-themed-tertiary rounded-lg p-4 text-center">
+                    <div class="text-2xl font-semibold text-info">
+                      ¥{{ balanceInfo.totalRecharge.toFixed(2) }}
+                    </div>
+                    <div class="text-xs text-themed-muted mt-1">{{ t('admin.users.totalRecharge') }}</div>
+                  </div>
+                  <div class="bg-themed-tertiary rounded-lg p-4 text-center">
+                    <div class="text-2xl font-semibold text-warning">
+                      ¥{{ balanceInfo.totalConsume.toFixed(2) }}
+                    </div>
+                    <div class="text-xs text-themed-muted mt-1">{{ t('admin.users.totalConsume') }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 余额明细 TAB -->
+              <div v-if="balanceTab === 'logs'">
+                <!-- 抽奖筛选按钮 -->
+                <div class="flex justify-end mb-3">
+                  <button
+                    class="btn btn-xs"
+                    :class="balanceLogsShowLotteryGiftOnly ? 'btn-primary' : 'btn-ghost'"
+                    @click="balanceLogsShowLotteryGiftOnly = !balanceLogsShowLotteryGiftOnly; balanceLogsPage = 1; loadBalanceLogs()"
+                  >
+                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    {{ balanceLogsShowLotteryGiftOnly ? t('wallet.showingLotteryGift') : t('wallet.showLotteryGift') }}
+                  </button>
+                </div>
+                <div v-if="balanceLogsLoading" class="flex items-center justify-center py-8">
+                  <svg class="w-6 h-6 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                </div>
+                <div v-else-if="balanceLogs.length === 0" class="text-center py-8 text-themed-muted text-sm">
+                  {{ t('admin.users.noBalanceLogs') }}
+                </div>
+                <div v-else>
+                  <div class="space-y-2 max-h-80 overflow-y-auto">
+                    <div 
+                      v-for="log in balanceLogs" 
+                      :key="log.id" 
+                      class="bg-themed-tertiary rounded-lg p-3 text-sm flex items-center justify-between"
+                    >
+                      <div class="min-w-0 flex-1">
+                        <div class="flex items-center gap-2">
+                          <span class="badge" :class="log.amount > 0 ? 'badge-success' : 'badge-error'">
+                            {{ getBalanceLogTypeLabel(log.type) }}
+                          </span>
+                          <span class="font-medium" :class="log.amount > 0 ? 'text-success' : 'text-error'">
+                            {{ log.amount > 0 ? '+' : '' }}¥{{ log.amount.toFixed(2) }}
+                          </span>
+                        </div>
+                        <div v-if="log.remark" class="text-xs text-themed-muted mt-1 truncate">{{ log.remark }}</div>
+                      </div>
+                      <div class="text-xs text-themed-muted whitespace-nowrap ml-4">{{ formatDate(log.createdAt) }}</div>
+                    </div>
+                  </div>
+                  <!-- 分页 -->
+                  <div v-if="balanceLogsTotalPages > 1" class="flex items-center justify-between text-sm text-themed-muted mt-4 pt-4 border-t border-themed">
+                    <span>{{ t('admin.users.totalRecords', { count: balanceLogsTotal }) }}</span>
+                    <div class="flex items-center gap-2">
+                      <button 
+                        :disabled="balanceLogsPage <= 1" 
+                        class="btn-ghost btn-sm"
+                        @click="balanceLogsPage--; loadBalanceLogs()"
+                      >
+                        {{ t('admin.users.prevPage') }}
+                      </button>
+                      <span>{{ balanceLogsPage }} / {{ balanceLogsTotalPages }}</span>
+                      <button 
+                        :disabled="balanceLogsPage >= balanceLogsTotalPages" 
+                        class="btn-ghost btn-sm"
+                        @click="balanceLogsPage++; loadBalanceLogs()"
+                      >
+                        {{ t('admin.users.nextPage') }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 充值记录 TAB -->
+              <div v-if="balanceTab === 'recharge'">
+                <div v-if="rechargeRecordsLoading" class="flex items-center justify-center py-8">
+                  <svg class="w-6 h-6 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                </div>
+                <div v-else-if="rechargeRecords.length === 0" class="text-center py-8 text-themed-muted text-sm">
+                  {{ t('admin.users.noRechargeRecords') }}
+                </div>
+                <div v-else>
+                  <div class="space-y-2 max-h-80 overflow-y-auto">
+                    <div 
+                      v-for="record in rechargeRecords" 
+                      :key="record.id" 
+                      class="bg-themed-tertiary rounded-lg p-3 text-sm flex items-center justify-between"
+                    >
+                      <div class="min-w-0 flex-1">
+                        <div class="flex items-center gap-2">
+                          <span class="font-medium text-themed">¥{{ record.amount.toFixed(2) }}</span>
+                          <span :class="['badge', getRechargeStatusStyle(record.status)]">
+                            {{ t('wallet.status.' + record.status) }}
+                          </span>
+                        </div>
+                        <div class="text-xs text-themed-muted mt-1">
+                          {{ record.orderNo }}
+                          <span v-if="record.provider"> · {{ record.provider.name }}</span>
+                        </div>
+                      </div>
+                      <div class="text-xs text-themed-muted whitespace-nowrap ml-4">{{ formatDate(record.createdAt) }}</div>
+                    </div>
+                  </div>
+                  <!-- 分页 -->
+                  <div v-if="rechargeRecordsTotalPages > 1" class="flex items-center justify-between text-sm text-themed-muted mt-4 pt-4 border-t border-themed">
+                    <span>{{ t('admin.users.totalRecords', { count: rechargeRecordsTotal }) }}</span>
+                    <div class="flex items-center gap-2">
+                      <button 
+                        :disabled="rechargeRecordsPage <= 1" 
+                        class="btn-ghost btn-sm"
+                        @click="rechargeRecordsPage--; loadRechargeRecords()"
+                      >
+                        {{ t('admin.users.prevPage') }}
+                      </button>
+                      <span>{{ rechargeRecordsPage }} / {{ rechargeRecordsTotalPages }}</span>
+                      <button 
+                        :disabled="rechargeRecordsPage >= rechargeRecordsTotalPages" 
+                        class="btn-ghost btn-sm"
+                        @click="rechargeRecordsPage++; loadRechargeRecords()"
+                      >
+                        {{ t('admin.users.nextPage') }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 调整余额 TAB -->
+              <div v-if="balanceTab === 'adjust'" class="space-y-4">
+                <!-- 调整类型 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-2">{{ t('admin.users.adjustType') }}</label>
+                  <div class="flex gap-3">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input 
+                        v-model="adjustBalanceForm.type" 
+                        type="radio" 
+                        value="add" 
+                        class="w-4 h-4 text-primary"
+                      />
+                      <span class="text-sm text-success">{{ t('admin.users.addBalance') }}</span>
+                    </label>
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input 
+                        v-model="adjustBalanceForm.type" 
+                        type="radio" 
+                        value="deduct" 
+                        class="w-4 h-4 text-primary"
+                      />
+                      <span class="text-sm text-error">{{ t('admin.users.deductBalance') }}</span>
+                    </label>
+                  </div>
+                </div>
+                <!-- 金额 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.amount') }}</label>
+                  <div class="relative">
+                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-themed-muted">¥</span>
+                    <input 
+                      v-model="adjustBalanceForm.amount" 
+                      type="number" 
+                      step="0.01"
+                      min="0.01"
+                      class="input pl-8" 
+                      :placeholder="t('admin.users.amountPlaceholder')"
+                    />
+                  </div>
+                </div>
+                <!-- 理由 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.adjustReason') }} <span class="text-error">*</span></label>
+                  <textarea 
+                    v-model="adjustBalanceForm.reason" 
+                    class="input min-h-[80px]" 
+                    :placeholder="t('admin.users.adjustReasonPlaceholder')"
+                    maxlength="500"
+                  ></textarea>
+                  <p class="mt-1 text-xs text-themed-muted">{{ adjustBalanceForm.reason.length }}/500</p>
+                </div>
+                <!-- 提交按钮 -->
+                <div class="pt-2">
+                  <button 
+                    class="btn-primary w-full" 
+                    :disabled="adjustBalanceLoading || !adjustBalanceForm.amount || !adjustBalanceForm.reason.trim()"
+                    @click="submitAdjustBalance"
+                  >
+                    <svg v-if="adjustBalanceLoading" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    {{ adjustBalanceLoading ? t('common.submitting') : t('common.confirm') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showBalanceModal = false">{{ t('common.close') }}</button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+    
+    <!-- 积分调整弹窗 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <div 
+          v-if="showPointsModal" 
+          class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          @click.self="showPointsModal = false"
+        >
+          <div class="card p-6 w-full max-w-md">
+            <h3 class="text-lg font-semibold text-themed mb-4">
+              {{ t('admin.users.adjustPoints') }} - {{ pointsUser?.username }}
+            </h3>
+            <div class="space-y-4">
+              <!-- 当前积分 -->
+              <div class="flex items-center justify-between py-2 px-3 bg-themed-tertiary rounded-lg">
+                <span class="text-sm text-themed-muted">{{ t('admin.users.currentPoints') }}</span>
+                <span class="text-lg font-semibold text-amber-500">{{ pointsUser?.points || 0 }}</span>
+              </div>
+              <!-- 调整数量 -->
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">
+                  {{ t('admin.users.pointsAmount') }}
+                  <span class="text-themed-muted text-xs">({{ t('admin.users.pointsAmountHint') }})</span>
+                </label>
+                <input 
+                  v-model="adjustPointsForm.amount" 
+                  type="number" 
+                  class="input" 
+                  :placeholder="t('admin.users.pointsAmountPlaceholder')"
+                />
+              </div>
+              <!-- 理由 -->
+              <div>
+                <label class="block text-sm text-themed-secondary mb-1.5">
+                  {{ t('admin.users.adjustReason') }} <span class="text-error">*</span>
+                </label>
+                <textarea 
+                  v-model="adjustPointsForm.reason" 
+                  class="input min-h-[80px]" 
+                  :placeholder="t('admin.users.pointsReasonPlaceholder')"
+                  maxlength="200"
+                ></textarea>
+              </div>
+              <!-- 按钮 -->
+              <div class="flex justify-end gap-2 pt-2">
+                <button class="btn btn-ghost" @click="showPointsModal = false">{{ t('common.cancel') }}</button>
+                <button 
+                  class="btn btn-primary" 
+                  :disabled="adjustPointsLoading || !adjustPointsForm.amount || !adjustPointsForm.reason.trim()"
+                  @click="submitAdjustPoints"
+                >
+                  <svg v-if="adjustPointsLoading" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                  </svg>
+                  {{ adjustPointsLoading ? t('common.submitting') : t('common.confirm') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 托管余额弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showHostingBalanceModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showHostingBalanceModal = false"></div>
+          <div class="modal-content max-w-2xl">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.users.hostingBalanceDetails') }} - {{ hostingBalanceUser?.username }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="showHostingBalanceModal = false">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <!-- TAB 切换 -->
+            <div class="flex gap-1 border-b border-themed px-4">
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="hostingBalanceTab === 'overview' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchHostingBalanceTab('overview')"
+              >
+                {{ t('admin.users.hostingBalanceOverview') }}
+              </button>
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="hostingBalanceTab === 'logs' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchHostingBalanceTab('logs')"
+              >
+                {{ t('admin.users.hostingBalanceLogs') }}
+              </button>
+              <button
+                class="px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px"
+                :class="hostingBalanceTab === 'adjust' ? 'border-blue-500 text-blue-500' : 'border-transparent text-themed-muted hover:text-themed'"
+                @click="switchHostingBalanceTab('adjust')"
+              >
+                {{ t('admin.users.adjustHostingBalance') }}
+              </button>
+            </div>
+            <div class="modal-body">
+              <!-- 概览 TAB -->
+              <div v-if="hostingBalanceTab === 'overview'">
+                <div v-if="hostingBalanceInfoLoading" class="flex items-center justify-center py-8">
+                  <svg class="w-6 h-6 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                </div>
+                <div v-else class="grid grid-cols-2 gap-4">
+                  <div class="bg-themed-tertiary rounded-lg p-4 text-center">
+                    <div class="text-2xl font-semibold" :class="hostingBalanceInfo.available > 0 ? 'text-success' : 'text-themed'">
+                      ¥{{ hostingBalanceInfo.available.toFixed(2) }}
+                    </div>
+                    <div class="text-xs text-themed-muted mt-1">{{ t('admin.users.availableBalance') }}</div>
+                  </div>
+                  <div class="bg-themed-tertiary rounded-lg p-4 text-center">
+                    <div class="text-2xl font-semibold text-warning">
+                      ¥{{ hostingBalanceInfo.frozen.toFixed(2) }}
+                    </div>
+                    <div class="text-xs text-themed-muted mt-1">{{ t('admin.users.frozenBalance') }}</div>
+                  </div>
+                </div>
+              </div>
+              <!-- 明细 TAB -->
+              <div v-else-if="hostingBalanceTab === 'logs'">
+                <div v-if="hostingBalanceLogsLoading" class="flex items-center justify-center py-8">
+                  <svg class="w-6 h-6 animate-spin text-themed-muted" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                </div>
+                <div v-else-if="hostingBalanceLogs.length === 0" class="text-center py-8 text-themed-muted">
+                  {{ t('common.noData') }}
+                </div>
+                <div v-else>
+                  <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                      <thead class="text-xs text-themed-muted uppercase border-b border-themed">
+                        <tr>
+                          <th class="text-left py-2 px-2">{{ t('admin.users.logTime') }}</th>
+                          <th class="text-left py-2 px-2">{{ t('admin.users.logType') }}</th>
+                          <th class="text-right py-2 px-2">{{ t('admin.users.logAmount') }}</th>
+                          <th class="text-left py-2 px-2">{{ t('admin.users.logStatus') }}</th>
+                          <th class="text-left py-2 px-2">{{ t('admin.users.logDescription') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody class="divide-y divide-themed">
+                        <tr v-for="log in hostingBalanceLogs" :key="log.id" class="hover:bg-themed-tertiary">
+                          <td class="py-2 px-2 whitespace-nowrap text-themed-muted">
+                            {{ new Date(log.createdAt).toLocaleString() }}
+                          </td>
+                          <td class="py-2 px-2 whitespace-nowrap">
+                            <span class="badge badge-default">{{ getHostingLogTypeLabel(log.type, log.actionType) }}</span>
+                          </td>
+                          <td class="py-2 px-2 text-right whitespace-nowrap" :class="log.type === 'income' || log.type === 'unfreeze' ? 'text-success' : 'text-error'">
+                            {{ log.type === 'income' || log.type === 'unfreeze' ? '+' : '-' }}¥{{ log.amount.toFixed(2) }}
+                          </td>
+                          <td class="py-2 px-2 whitespace-nowrap">
+                            <span v-if="log.frozen" class="badge badge-warning">{{ t('admin.users.frozen') }}</span>
+                            <span v-else class="badge badge-success">{{ t('admin.users.available') }}</span>
+                          </td>
+                          <td class="py-2 px-2 text-themed-muted max-w-xs truncate" :title="log.description">
+                            {{ log.description || '-' }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!-- 分页 -->
+                  <div v-if="hostingBalanceLogsTotalPages > 1" class="flex justify-center mt-4 gap-1">
+                    <button 
+                      class="btn btn-xs btn-ghost" 
+                      :disabled="hostingBalanceLogsPage <= 1"
+                      @click="changeHostingBalanceLogsPage(hostingBalanceLogsPage - 1)"
+                    >
+                      {{ t('common.prev') }}
+                    </button>
+                    <span class="px-2 text-sm text-themed-muted">
+                      {{ hostingBalanceLogsPage }} / {{ hostingBalanceLogsTotalPages }}
+                    </span>
+                    <button 
+                      class="btn btn-xs btn-ghost" 
+                      :disabled="hostingBalanceLogsPage >= hostingBalanceLogsTotalPages"
+                      @click="changeHostingBalanceLogsPage(hostingBalanceLogsPage + 1)"
+                    >
+                      {{ t('common.next') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <!-- 调整 TAB -->
+              <div v-else-if="hostingBalanceTab === 'adjust'" class="space-y-4">
+                <!-- 当前余额 -->
+                <div class="grid grid-cols-2 gap-4 py-2 px-3 bg-themed-tertiary rounded-lg">
+                  <div class="text-center">
+                    <div class="text-lg font-semibold text-success">¥{{ hostingBalanceInfo.available.toFixed(2) }}</div>
+                    <div class="text-xs text-themed-muted">{{ t('admin.users.availableBalance') }}</div>
+                  </div>
+                  <div class="text-center">
+                    <div class="text-lg font-semibold text-warning">¥{{ hostingBalanceInfo.frozen.toFixed(2) }}</div>
+                    <div class="text-xs text-themed-muted">{{ t('admin.users.frozenBalance') }}</div>
+                  </div>
+                </div>
+                <!-- 调整类型 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.adjustType') }}</label>
+                  <div class="flex gap-4">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input v-model="adjustHostingBalanceForm.type" type="radio" value="available" class="radio" />
+                      <span class="text-sm">{{ t('admin.users.availableBalance') }}</span>
+                    </label>
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input v-model="adjustHostingBalanceForm.type" type="radio" value="frozen" class="radio" />
+                      <span class="text-sm">{{ t('admin.users.frozenBalance') }}</span>
+                    </label>
+                  </div>
+                </div>
+                <!-- 操作类型 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.operation') }}</label>
+                  <div class="flex gap-4">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input v-model="adjustHostingBalanceForm.operation" type="radio" value="add" class="radio" />
+                      <span class="text-sm text-success">{{ t('admin.users.operationAdd') }}</span>
+                    </label>
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input v-model="adjustHostingBalanceForm.operation" type="radio" value="deduct" class="radio" />
+                      <span class="text-sm text-error">{{ t('admin.users.operationDeduct') }}</span>
+                    </label>
+                  </div>
+                </div>
+                <!-- 金额 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.amount') }} <span class="text-error">*</span></label>
+                  <input 
+                    v-model="adjustHostingBalanceForm.amount" 
+                    type="number" 
+                    step="0.01"
+                    min="0"
+                    class="input" 
+                    :placeholder="t('admin.users.amountPlaceholder')"
+                  />
+                </div>
+                <!-- 理由 -->
+                <div>
+                  <label class="block text-sm text-themed-secondary mb-1.5">{{ t('admin.users.adjustReason') }} <span class="text-error">*</span></label>
+                  <textarea 
+                    v-model="adjustHostingBalanceForm.reason" 
+                    class="input min-h-[80px]" 
+                    :placeholder="t('admin.users.hostingReasonPlaceholder')"
+                    maxlength="200"
+                  ></textarea>
+                  <p class="mt-1 text-xs text-themed-muted">{{ adjustHostingBalanceForm.reason.length }}/200</p>
+                </div>
+                <!-- 按钮 -->
+                <div class="flex justify-end gap-2 pt-2">
+                  <button class="btn btn-ghost" @click="hostingBalanceTab = 'overview'">{{ t('common.cancel') }}</button>
+                  <button 
+                    class="btn btn-primary" 
+                    :disabled="adjustHostingBalanceLoading || !adjustHostingBalanceForm.amount || !adjustHostingBalanceForm.reason.trim()"
+                    @click="submitAdjustHostingBalance"
+                  >
+                    <svg v-if="adjustHostingBalanceLoading" class="w-4 h-4 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    {{ adjustHostingBalanceLoading ? t('common.submitting') : t('common.confirm') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showHostingBalanceModal = false">{{ t('common.close') }}</button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/resources/MyHostCreateView.vue b/client/src/views/resources/MyHostCreateView.vue
new file mode 100644
index 0000000..16af5c0
--- /dev/null
+++ b/client/src/views/resources/MyHostCreateView.vue
@@ -0,0 +1,596 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import { useToast } from '@/stores/toast'
+import { onClickOutside } from '@vueuse/core'
+import { availableFlagCountryCodes, getLocalizedCountryName } from '@/utils/countryDisplay'
+import { buildHostApiUrl, validateIdentifier, validateName, validateHostAddress, validateIpAddress } from '@/utils/validation'
+import FlagIcon from '@/components/FlagIcon.vue'
+
+const { t, locale } = useI18n()
+const router = useRouter()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+
+const isAdmin = computed(() => authStore.user?.role === 'admin')
+
+// 节点名称前缀，仅普通用户需要
+const hostNamePrefix = computed(() => `PEER${authStore.user?.id}-`)
+
+const saving = ref(false)
+const showInstallScript = ref(false)
+const installCommand = ref('')
+
+
+const hostId = ref<number>(0)
+const installStatus = ref<'waiting' | 'verifying' | 'success' | 'error'>('waiting')
+const verifyError = ref('')
+
+const form = ref({
+  name: '',
+  nameSuffix: '',
+  hostAddress: '',
+  apiPort: 8443,
+  location: '',
+  countryCode: 'us',
+  cpuAllowanceMax: 0,
+  memoryMax: 0,
+  instanceType: 'container' as 'container' | 'vm' | 'both',
+  networkMode: 'nat' as 'nat' | 'nat_ipv6' | 'ipv6_only',
+  ipv6Subnet: '',
+  ipv6ParentInterface: '',
+  natPublicIp: '',
+  natPublicIpv6: '',
+  natBindIp: '',
+  natBindIpv6: '',
+  portRangeStart: 10000 as number | null,
+  portRangeEnd: 65000 as number | null
+})
+
+const showCountryDropdown = ref(false)
+const countrySearch = ref('')
+const countryDropdownRef = ref<HTMLElement | null>(null)
+onClickOutside(countryDropdownRef, () => closeCountryDropdown())
+
+const countries = computed(() => {
+  return availableFlagCountryCodes
+    .map(code => ({
+      code,
+      name: getLocalizedCountryName(code, locale.value, (key, fallback) => t(key, fallback))
+    }))
+    .sort((left, right) => left.name.localeCompare(right.name, locale.value))
+})
+
+const selectedCountry = computed(() => {
+  return countries.value.find(country => country.code === form.value.countryCode) || {
+    code: form.value.countryCode,
+    name: getLocalizedCountryName(form.value.countryCode, locale.value, (key, fallback) => t(key, fallback))
+  }
+})
+
+const filteredCountries = computed(() => {
+  const keyword = countrySearch.value.trim().toLowerCase()
+  if (!keyword) return countries.value
+
+  return countries.value.filter(country =>
+    country.name.toLowerCase().includes(keyword) ||
+    country.code.toLowerCase().includes(keyword)
+  )
+})
+
+function toggleCountryDropdown() {
+  showCountryDropdown.value = !showCountryDropdown.value
+  if (!showCountryDropdown.value) {
+    countrySearch.value = ''
+  }
+}
+
+function closeCountryDropdown() {
+  showCountryDropdown.value = false
+  countrySearch.value = ''
+}
+
+function selectCountry(code: string) {
+  form.value.countryCode = code
+  closeCountryDropdown()
+}
+
+// 验证并连接宿主机
+async function verifyHost() {
+  if (!hostId.value) return
+  installStatus.value = 'verifying'
+  verifyError.value = ''
+  
+  try {
+    const res = await api.hosts.verify(hostId.value)
+    if (res.success) {
+      installStatus.value = 'success'
+      toast.success(t('admin.hosts.verifySuccess'))
+    }
+  } catch (err: any) {
+    installStatus.value = 'error'
+    verifyError.value = err?.message || String(err)
+    toast.error(t('admin.hosts.verifyFailed') + ': ' + verifyError.value)
+  }
+}
+
+async function createHost() {
+  // 根据用户角色确定节点名称
+  let fullName: string
+  if (isAdmin.value) {
+    // 管理员直接使用完整名称
+    if (!form.value.name.trim()) {
+      toast.error(t('admin.hosts.hostNameRequired'))
+      return
+    }
+    fullName = form.value.name
+  } else {
+    // 普通用户：前缀 + 后缀
+    if (!form.value.nameSuffix.trim()) {
+      toast.error(t('resources.hosts.nameSuffixRequired'))
+      return
+    }
+    fullName = hostNamePrefix.value + form.value.nameSuffix
+  }
+  
+  // 验证完整名称
+  const nameValidation = validateIdentifier(fullName, t('admin.hosts.hostName'), 2, 64)
+  if (!nameValidation.valid) { toast.error(nameValidation.message || t('admin.hosts.hostNameHint')); return }
+  
+  // 验证服务器地址
+  if (!form.value.hostAddress) { toast.error(t('admin.hosts.ipAddressRequired')); return }
+  const ipValidation = validateHostAddress(form.value.hostAddress, t('admin.hosts.ipAddress'))
+  if (!ipValidation.valid) { toast.error(ipValidation.message || ''); return }
+  
+  // 验证描述（如果提供）
+  if (form.value.location) {
+    const locationValidation = validateName(form.value.location, t('admin.hosts.hostDesc'), 1, 100)
+    if (!locationValidation.valid) { toast.error(locationValidation.message || ''); return }
+  }
+  
+  // 网络模式场景映射：前端选项 -> 后端参数
+  const networkModeMap: Record<string, { networkMode: string; ipv6Mode: number; needsIpv6Subnet: boolean; needsNatConfig: boolean }> = {
+    'nat':          { networkMode: 'nat',      ipv6Mode: 3, needsIpv6Subnet: false, needsNatConfig: true },
+    'nat_ipv6':     { networkMode: 'nat_ipv6', ipv6Mode: 1, needsIpv6Subnet: true,  needsNatConfig: true },
+    'ipv6_only':    { networkMode: 'nat_ipv6', ipv6Mode: 1, needsIpv6Subnet: true,  needsNatConfig: false },
+  }
+  const modeConfig = networkModeMap[form.value.networkMode] || networkModeMap['nat']
+
+  // 验证 IPv6 网段。支持先创建节点，执行脚本后再回来补充。
+  if (modeConfig.needsIpv6Subnet) {
+    const hasSubnet = form.value.ipv6Subnet && form.value.ipv6Subnet.trim()
+    const hasInterface = form.value.ipv6ParentInterface && form.value.ipv6ParentInterface.trim()
+    // 如果填了其中一个，则两个都必须填写
+    if (hasSubnet && !hasInterface) {
+      toast.error(t('admin.hosts.ipv6ParentInterfaceRequired'))
+      return
+    }
+    if (!hasSubnet && hasInterface) {
+      toast.error(t('admin.hosts.ipv6SubnetRequired'))
+      return
+    }
+    // 如果填写了，校验格式
+    if (hasSubnet && !form.value.ipv6Subnet.includes('/')) {
+      toast.error(t('admin.hosts.ipv6SubnetInvalid'))
+      return
+    }
+  }
+  
+  // 验证端口范围：结束端口不能小于起始端口
+  if (form.value.portRangeStart != null && form.value.portRangeEnd != null) {
+    if (form.value.portRangeEnd < form.value.portRangeStart) {
+      toast.error(t('admin.hosts.portRangeEndMustBeGreater'))
+      return
+    }
+  }
+
+  // 验证 NAT 网卡 IP，支持 IPv4 / IPv6
+  if (form.value.natPublicIp) {
+    const natIpValidation = validateIpAddress(form.value.natPublicIp, t('admin.hosts.natPublicIp'))
+    if (!natIpValidation.valid) {
+      toast.error(natIpValidation.message || '')
+      return
+    }
+  }
+  if (form.value.natPublicIpv6) {
+    const publicIpv6Validation = validateIpAddress(form.value.natPublicIpv6, t('admin.hosts.natPublicIpv6'))
+    if (!publicIpv6Validation.valid || !(publicIpv6Validation.sanitized || form.value.natPublicIpv6).includes(':') ) {
+      toast.error(t('admin.hosts.natPublicIpv6Invalid'))
+      return
+    }
+  }
+  if (form.value.natBindIp) {
+    const bindIpValidation = validateIpAddress(form.value.natBindIp, t('admin.hosts.natBindIpv4'))
+    if (!bindIpValidation.valid) {
+      toast.error(bindIpValidation.message || '')
+      return
+    }
+  }
+  if (form.value.natBindIpv6) {
+    const bindIpv6Validation = validateIpAddress(form.value.natBindIpv6, t('admin.hosts.natBindIpv6'))
+    if (!bindIpv6Validation.valid || !(bindIpv6Validation.sanitized || form.value.natBindIpv6).includes(':') ) {
+      toast.error(t('admin.hosts.natBindIpv6Invalid'))
+      return
+    }
+  }
+
+  saving.value = true
+  try {
+    const url = buildHostApiUrl(form.value.hostAddress, form.value.apiPort || 8443)
+    
+    const formData: any = {
+      name: fullName,
+      url: url,
+      location: form.value.location || undefined,
+      countryCode: form.value.countryCode,
+      cpuAllowanceMax: form.value.cpuAllowanceMax || undefined,
+      memoryMax: form.value.memoryMax || undefined,
+      instanceType: form.value.instanceType,
+      ipv6Mode: modeConfig.ipv6Mode,
+      ipv6Subnet: modeConfig.needsIpv6Subnet ? form.value.ipv6Subnet.trim() : undefined,
+      ipv6ParentInterface: modeConfig.needsIpv6Subnet ? form.value.ipv6ParentInterface.trim() : undefined,
+      natConfig: modeConfig.needsNatConfig && (form.value.natPublicIp || form.value.natPublicIpv6 || form.value.natBindIp || form.value.natBindIpv6 || form.value.portRangeStart || form.value.portRangeEnd) ? {
+        publicIp: form.value.natPublicIp || undefined,
+        publicIpv6: form.value.natPublicIpv6 || undefined,
+        bindIp: form.value.natBindIp || undefined,
+        bindIpv6: form.value.natBindIpv6 || undefined,
+        portRangeStart: form.value.portRangeStart || undefined,
+        portRangeEnd: form.value.portRangeEnd || undefined
+      } : undefined
+    }
+
+    const response = await api.hosts.create(formData)
+    const command = (response as any).installCommand
+
+    hostId.value = (response as any).host?.id
+    toast.success(t('admin.hosts.hostAdded'))
+    if (command) {
+      installCommand.value = command
+      showInstallScript.value = true
+      installStatus.value = 'waiting'
+    } else {
+      router.push('/resources/hosts')
+    }
+  } catch (err: any) {
+    const errorCode = err?.code
+    const errorMessage = errorCode ? t(`errors.${errorCode}`) : (err?.message || String(err))
+    const details = err?.details ? ` (${err.details})` : ''
+    toast.error(`${t('admin.hosts.addFailed')}: ${errorMessage}${details}`)
+  } finally {
+    saving.value = false
+  }
+}
+
+function copyCommand() {
+  navigator.clipboard.writeText(installCommand.value)
+  toast.success(t('common.copied'))
+}
+
+function closeAndGoBack() {
+  showInstallScript.value = false
+  router.push('/resources/hosts')
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- 居中容器 -->
+    <div class="flex justify-center">
+      <div class="w-full max-w-3xl space-y-6">
+        <!-- 页面头部 -->
+        <div class="flex items-center gap-3">
+          <RouterLink to="/resources/hosts" class="transition-colors" :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7" /></svg>
+          </RouterLink>
+          <div>
+            <h1 class="page-title">{{ t('resources.hosts.create') }}</h1>
+            <p class="page-description">{{ t('resources.hosts.createDesc') }}</p>
+          </div>
+        </div>
+
+        <!-- 表单卡片 -->
+        <div class="card p-6">
+          <!-- 节点部署说明 -->
+          <div class="mb-6 p-4 rounded-lg border" :class="themeStore.isDark ? 'bg-blue-900/20 border-blue-800' : 'bg-blue-50 border-blue-200'">
+            <div class="flex items-start gap-3">
+              <svg class="w-5 h-5 flex-shrink-0 mt-0.5" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <div class="text-sm space-y-1.5" :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'">
+                <p>{{ t('resources.hosts.ubuntuOnlyHint') }}</p>
+                <p>{{ t('resources.hosts.installHintTitle') }}</p>
+                <p class="text-xs opacity-80">{{ t('resources.hosts.installHintIpv6') }}</p>
+              </div>
+            </div>
+          </div>
+
+          <form class="space-y-6" @submit.prevent="createHost">
+            <!-- 基本信息 -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.hostName') }}</label>
+                <!-- 管理员输入完整节点名称 -->
+                <template v-if="isAdmin">
+                  <input v-model="form.name" type="text" class="input" placeholder="node-01" required pattern="^[a-zA-Z0-9_-]+$" @input="form.name = form.name.replace(/[^a-zA-Z0-9_-]/g, '')" />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.hostNameHint') }}</p>
+                </template>
+                <!-- 普通用户输入节点名称后缀 -->
+                <template v-else>
+                  <div class="flex">
+                    <span class="inline-flex items-center px-3 text-sm border border-r-0 rounded-l-lg" :class="themeStore.isDark ? 'bg-gray-800 border-gray-700 text-gray-400' : 'bg-gray-100 border-gray-300 text-gray-500'">{{ hostNamePrefix }}</span>
+                    <input v-model="form.nameSuffix" type="text" class="input rounded-l-none flex-1" placeholder="myhost" required pattern="^[a-zA-Z0-9_-]+$" @input="form.nameSuffix = form.nameSuffix.replace(/[^a-zA-Z0-9_-]/g, '')" />
+                  </div>
+                  <p class="text-xs text-themed-muted mt-1">{{ t('resources.hosts.nameHint') }}</p>
+                </template>
+                <p class="text-xs text-orange-500 dark:text-orange-400 mt-1">{{ t('common.noIncudalHint') }}</p>
+              </div>
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.hostDesc') }}</label>
+                <input v-model="form.location" type="text" class="input" placeholder="Hong Kong DC1" />
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-[1fr_120px] gap-4">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ipAddress') }}</label>
+                <div class="flex gap-2">
+                  <input v-model="form.hostAddress" type="text" class="input flex-1" placeholder="10.0.0.1 / 2001:db8::1 / node.example.com" required />
+                </div>
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ipAddressHint') }}</p>
+              </div>
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.apiPort') }}</label>
+                <input v-model.number="form.apiPort" type="number" min="1" max="65535" class="input" placeholder="8443" required />
+                <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.apiPortHint') }}</p>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- 国家选择 -->
+              <div ref="countryDropdownRef" class="relative">
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.country') }}</label>
+                <button type="button" class="input w-full flex items-center justify-between" @click="toggleCountryDropdown">
+                  <span class="flex items-center gap-2"><FlagIcon :code="form.countryCode" size="sm" />{{ selectedCountry?.name }}</span>
+                  <svg class="w-4 h-4 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                </button>
+                <div v-if="showCountryDropdown" class="absolute z-50 w-full mt-1 overflow-hidden rounded-lg border shadow-xl" :class="themeStore.isDark ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'">
+                  <div class="p-2 border-b" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-100'">
+                    <input
+                      v-model="countrySearch"
+                      type="search"
+                      class="input h-9 text-sm"
+                      :placeholder="t('common.searchPlaceholder')"
+                      autocomplete="off"
+                      autofocus
+                      @keydown.enter.prevent.stop
+                      @keydown.stop
+                    />
+                  </div>
+                  <div class="max-h-60 overflow-auto py-1">
+                    <button
+                      v-for="c in filteredCountries"
+                      :key="c.code"
+                      type="button"
+                      class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors"
+                      :class="[
+                        themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100',
+                        form.countryCode === c.code ? (themeStore.isDark ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-900') : ''
+                      ]"
+                      @click="selectCountry(c.code)"
+                    >
+                      <FlagIcon :code="c.code" size="sm" />{{ c.name }}
+                    </button>
+                    <div v-if="filteredCountries.length === 0" class="px-3 py-6 text-center text-sm text-themed-muted">
+                      {{ t('common.noSearchResults') }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 网络模式选择 -->
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.networkModeLabel') }}</label>
+                <select v-model="form.networkMode" class="input">
+                  <option value="nat">{{ t('admin.hosts.networkModeNat') }}</option>
+                  <option value="nat_ipv6">{{ t('admin.hosts.networkModeNatIpv6') }}</option>
+                  <option value="ipv6_only">{{ t('admin.hosts.networkModeIpv6Only') }}</option>
+                </select>
+              </div>
+            </div>
+
+            <!-- IPv6 网段输入框（仅在选择 nat_ipv6 时显示） -->
+            <Transition name="fade">
+              <div v-if="form.networkMode === 'nat_ipv6' || form.networkMode === 'ipv6_only'" class="space-y-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ipv6Subnet') }}</label>
+                  <input 
+                    v-model="form.ipv6Subnet" 
+                    type="text" 
+                    class="input" 
+                    placeholder="2001:db8::/48" 
+                  />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ipv6SubnetHint') }}</p>
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.ipv6ParentInterface') }}</label>
+                  <input 
+                    v-model="form.ipv6ParentInterface" 
+                    type="text" 
+                    class="input" 
+                    placeholder="eth0" 
+                  />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.ipv6ParentInterfaceHint') }}</p>
+                </div>
+                <p class="text-xs text-amber-500">{{ t('resources.hosts.ipv6OptionalHint') }}</p>
+              </div>
+            </Transition>
+
+            <!-- NAT 端口映射配置，仅 IPv4 相关模式显示 -->
+            <div v-if="form.networkMode !== 'ipv6_only'" class="border-t border-themed pt-6">
+              <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.natConfig') }}</h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natPublicIpv4') }}</label>
+                  <input v-model="form.natPublicIp" type="text" class="input" :placeholder="t('admin.hosts.natPublicIpv4Placeholder')" />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natPublicIpv4Desc') }}</p>
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natPublicIpv6') }}</label>
+                  <input v-model="form.natPublicIpv6" type="text" class="input" :placeholder="t('admin.hosts.natPublicIpv6Placeholder')" />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natPublicIpv6Desc') }}</p>
+                </div>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natBindIpv4') }}</label>
+                  <input v-model="form.natBindIp" type="text" class="input" :placeholder="t('admin.hosts.natBindIpv4Placeholder')" />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natBindIpv4Desc') }}</p>
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.natBindIpv6') }}</label>
+                  <input v-model="form.natBindIpv6" type="text" class="input" :placeholder="t('admin.hosts.natBindIpv6Placeholder')" />
+                  <p class="text-xs text-themed-muted mt-1">{{ t('admin.hosts.natBindIpv6Desc') }}</p>
+                </div>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.portRangeStart') }}</label>
+                  <input v-model.number="form.portRangeStart" type="number" class="input" placeholder="10000" />
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.portRangeEnd') }}</label>
+                  <input v-model.number="form.portRangeEnd" type="number" class="input" placeholder="65000" />
+                </div>
+              </div>
+            </div>
+
+
+            <!-- 资源限制 -->
+            <div class="border-t border-themed pt-6">
+              <h3 class="text-sm font-medium text-themed mb-4">{{ t('admin.hosts.resourceLimits') }}</h3>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.cpuAllowanceMax') }}</label>
+                  <input v-model.number="form.cpuAllowanceMax" type="number" class="input" placeholder="0" :min="0" step="5" />
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.memoryMax') }} (MB)</label>
+                  <input v-model.number="form.memoryMax" type="number" class="input" placeholder="0" :min="0" step="64" />
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.instanceTypeLabel') }}</label>
+                  <select v-model="form.instanceType" class="input">
+                    <option value="container">{{ t('admin.hosts.typeContainer') }}</option>
+                    <option value="vm">{{ t('admin.hosts.typeVm') }}</option>
+                    <option value="both">{{ t('admin.hosts.typeBoth') }}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+
+            <div
+              class="rounded-lg border px-4 py-3"
+              :class="themeStore.isDark ? 'border-blue-800 bg-blue-950/30 text-blue-100' : 'border-blue-200 bg-blue-50 text-blue-900'"
+            >
+              <div class="flex items-start gap-2">
+                <svg class="w-4 h-4 mt-0.5 shrink-0 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
+                </svg>
+                <p class="text-xs leading-relaxed">{{ t('resources.hosts.storagePoolAfterConnectHint') }}</p>
+              </div>
+            </div>
+
+            <!-- 按钮 -->
+            <div class="flex items-center justify-end gap-3 pt-4 border-t border-themed">
+              <RouterLink to="/resources/hosts" class="btn-secondary">{{ t('common.cancel') }}</RouterLink>
+              <button type="submit" class="btn-primary" :disabled="saving || (isAdmin ? !form.name : !form.nameSuffix) || !form.hostAddress">
+                <svg v-if="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+                {{ t('common.create') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- 安装脚本弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showInstallScript" class="modal-overlay">
+          <div class="modal-backdrop" @click="closeAndGoBack"></div>
+          <div class="modal-content" style="max-width: 72rem; width: 95%;">
+            <div class="modal-header">
+              <h3 class="modal-title">{{ t('admin.hosts.installScript') }}</h3>
+              <button class="text-themed-muted hover:text-themed" @click="closeAndGoBack">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+              </button>
+            </div>
+            <div class="modal-body space-y-4">
+              <!-- 步骤 1: 执行安装命令 -->
+              <div class="space-y-2">
+                <div class="flex items-center gap-2">
+                  <span class="flex items-center justify-center w-6 h-6 rounded-full text-xs font-medium" :class="installStatus === 'success' ? 'bg-green-500 text-white' : 'bg-blue-500 text-white'">1</span>
+                  <span class="text-sm font-medium text-themed">{{ t('admin.hosts.step1RunScript') }}</span>
+                </div>
+                <p class="text-xs text-themed-muted ml-8">{{ t('admin.hosts.runOnHost') }}</p>
+                <div class="bg-gray-900 rounded-lg p-4 ml-8 overflow-x-auto">
+                  <code class="text-green-400 text-sm break-all whitespace-pre-wrap font-mono">{{ installCommand }}</code>
+                </div>
+                <div class="ml-8 mb-4">
+                  <button class="btn-secondary btn-sm" @click="copyCommand">{{ t('admin.hosts.copyCommand') }}</button>
+                </div>
+              </div>
+
+              <!-- 步骤 2：验证并连接 -->
+              <div class="space-y-2 pt-4 border-t border-themed">
+                <div class="flex items-center gap-2">
+                  <span class="flex items-center justify-center w-6 h-6 rounded-full text-xs font-medium" :class="installStatus === 'success' ? 'bg-green-500 text-white' : 'bg-gray-500 text-white'">2</span>
+                  <span class="text-sm font-medium text-themed">{{ t('admin.hosts.step2Verify') }}</span>
+                </div>
+                <p class="text-xs text-themed-muted ml-8">{{ t('admin.hosts.verifyHint') }}</p>
+              
+                <!-- 状态显示 -->
+                <div class="ml-8 flex items-center gap-3">
+                  <button 
+                    class="btn-secondary btn-sm" 
+                    :disabled="installStatus === 'verifying' || installStatus === 'success'"
+                    @click="verifyHost"
+                  >
+                    <svg v-if="installStatus === 'verifying'" class="w-4 h-4 animate-spin mr-1" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    {{ installStatus === 'verifying' ? t('admin.hosts.verifying') : t('admin.hosts.verifyAndConnect') }}
+                  </button>
+                
+                  <!-- 成功状态 -->
+                  <div v-if="installStatus === 'success'" class="flex items-center gap-2 text-green-500">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span class="text-sm">{{ t('admin.hosts.verifySuccess') }}</span>
+                  </div>
+                </div>
+              
+                <!-- 错误提示 -->
+                <div v-if="installStatus === 'error' && verifyError" class="ml-8 p-3 rounded-lg bg-red-500/10 text-red-500 text-sm">
+                  {{ verifyError }}
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="closeAndGoBack">{{ t('common.close') }}</button>
+              <button v-if="installStatus === 'success'" class="btn-primary" @click="closeAndGoBack">{{ t('common.done') }}</button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/resources/MyHostDetailView.vue b/client/src/views/resources/MyHostDetailView.vue
new file mode 100644
index 0000000..95b369e
--- /dev/null
+++ b/client/src/views/resources/MyHostDetailView.vue
@@ -0,0 +1,658 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import api from '@/api'
+import { useThemeStore } from '@/stores/theme'
+import { useToast } from '@/stores/toast'
+import { useAuthStore } from '@/stores/auth'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import HostInfoTab from '@/components/host/HostInfoTab.vue'
+import HostImagesTab from '@/components/host/HostImagesTab.vue'
+import MyHostConfigTab from '@/components/host/MyHostConfigTab.vue'
+import HostInstancesTab from '@/components/host/HostInstancesTab.vue'
+import HostStorageTab from '@/components/host/HostStorageTab.vue'
+import HostCaddyTab from '@/components/host/HostCaddyTab.vue'
+import HostRedeemCodesTab from '@/components/host/HostRedeemCodesTab.vue'
+import HostCreateInstanceTab from '@/components/host/HostCreateInstanceTab.vue'
+import HostOpsTab from '@/components/host/HostOpsTab.vue'
+import FlagIcon from '@/components/FlagIcon.vue'
+
+// 为 KeepAlive exclude 匹配定义组件名称
+defineOptions({
+  name: 'MyHostDetailView'
+})
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+
+// 是否是管理员
+const isAdmin = computed(() => authStore.user?.role === 'admin')
+
+type TabType = 'info' | 'config' | 'images' | 'instances' | 'storage' | 'caddy' | 'redeemCodes' | 'ops' | 'create'
+const activeTab = ref<TabType>('info')
+
+interface Host {
+  id: number
+  name: string
+  url: string
+  location?: string
+  countryCode: string
+  status: 'online' | 'offline' | 'maintenance'
+  instanceCount?: number
+  certPath?: string
+  keyPath?: string
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  notifyPurchase?: boolean
+  notifyRenew?: boolean
+  notifyDestroy?: boolean
+  resources?: {
+    cpuUsed: number
+    memoryUsed: number
+    diskTotal: number  // 计算值，来自 storage_size * 1024
+    diskUsed: number
+  }
+  natConfig?: {
+    publicIp: string | null
+    publicIpv6?: string | null
+    bindIp?: string | null
+    bindIpv6?: string | null
+    portRangeStart: number | null
+    portRangeEnd: number | null
+    portsUsedCount?: number
+  }
+  createdAt?: string
+  updatedAt?: string
+}
+
+const host = ref<Host | null>(null)
+const loading = ref(true)
+const actionLoading = ref('')
+
+// 删除确认弹窗
+const showDeleteModal = ref(false)
+const deleteConfirmName = ref('')
+
+// 批量延期弹窗（仅管理员）
+const showExtendModal = ref(false)
+const extendDays = ref<number | undefined>(undefined)
+const paidInstanceCount = ref(0)
+
+// 重新安装弹窗
+const showReinstallModal = ref(false)
+const reinstallCommand = ref('')
+
+const reinstallStatus = ref<'waiting' | 'verifying' | 'success' | 'error'>('waiting')
+const reinstallError = ref('')
+
+const statusInfo = computed(() => {
+  if (!host.value) return { label: '', class: '', dot: '' }
+  const map: Record<string, { label: string; class: string; dot: string }> = {
+    online: { label: t('admin.hosts.statusOnline'), class: 'badge-success', dot: 'bg-green-500' },
+    offline: { label: t('admin.hosts.statusOffline'), class: 'badge-default', dot: 'bg-gray-500' },
+    maintenance: { label: t('admin.hosts.statusMaintenance'), class: 'badge-warning', dot: 'bg-yellow-500' }
+  }
+  return map[host.value.status] || map.offline
+})
+
+onMounted(async () => {
+  await loadHost()
+})
+
+// 监听路由参数变化，重新加载数据
+watch(() => route.params.id, async (newId, oldId) => {
+  // 检查是否仍在节点详情页，防止路由切换到其他页面时误触发
+  if (route.name !== 'my-host-detail') return
+  
+  if (newId && newId !== oldId) {
+    // 重置所有状态
+    loading.value = true
+    activeTab.value = 'info'
+    host.value = null
+    actionLoading.value = ''
+    
+    // 关闭所有弹窗并重置其状态
+    showDeleteModal.value = false
+    deleteConfirmName.value = ''
+    
+    showExtendModal.value = false
+    extendDays.value = undefined
+    paidInstanceCount.value = 0
+    
+    showReinstallModal.value = false
+    reinstallCommand.value = ''
+    reinstallStatus.value = 'waiting'
+    reinstallError.value = ''
+    
+    await loadHost()
+  }
+})
+
+async function loadHost() {
+  const hostId = parseInt(route.params.id as string)
+  if (isNaN(hostId) || hostId <= 0) {
+    toast.error(t('admin.hosts.invalidId'))
+    router.replace('/resources/hosts')
+    return
+  }
+
+  try {
+    const res = await api.hosts.get(hostId)
+    host.value = (res as any).host || res
+  } catch (err: any) {
+    toast.error(t('admin.hosts.loadFailed') + ': ' + (err?.message || String(err)))
+    router.replace('/resources/hosts')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function testConnection() {
+  if (!host.value) return
+  actionLoading.value = 'test'
+  try {
+    const res = await api.hosts.test(host.value.id)
+    if (res.success) {
+      toast.success(t('admin.hosts.testSuccess'))
+    }
+    await loadHost()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.testFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 验证并连接宿主机（用于未完成安装的宿主机）
+async function verifyHost() {
+  if (!host.value) return
+  actionLoading.value = 'verify'
+  try {
+    const res = await api.hosts.verify(host.value.id)
+    if (res.success) {
+      toast.success(t('admin.hosts.verifySuccess'))
+    }
+    await loadHost()
+  } catch (err: any) {
+    toast.error(t('admin.hosts.verifyFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 是否需要验证（证书路径未配置）
+const needsVerification = computed(() => !host.value?.certPath)
+
+async function openDeleteModal() {
+  if (!host.value) return
+  
+  actionLoading.value = 'delete'
+  try {
+    const res = await api.instances.list({
+      hostId: host.value.id,
+      pageSize: 1
+    })
+    const instanceCount = (res as any).total || 0
+    
+    if (instanceCount > 0) {
+      toast.error(t('admin.hosts.hasInstances', { count: instanceCount }))
+      return
+    }
+    
+    deleteConfirmName.value = ''
+    showDeleteModal.value = true
+  } catch (err: any) {
+    toast.error(t('admin.hosts.checkFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+async function confirmDeleteHost() {
+  if (!host.value) return
+  if (deleteConfirmName.value !== host.value.name) {
+    toast.error(t('admin.hosts.deleteNameMismatch'))
+    return
+  }
+
+  actionLoading.value = 'delete'
+  showDeleteModal.value = false
+  try {
+    await api.hosts.delete(host.value.id)
+    toast.success(t('admin.hosts.hostDeleted'))
+    router.push('/resources/hosts')
+  } catch (err: any) {
+    toast.error(t('admin.hosts.deleteFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+const canDelete = computed(() => {
+  return deleteConfirmName.value === host.value?.name
+})
+
+function onConfigSaved() {
+  loadHost()
+}
+
+// 打开批量延期弹窗（仅管理员）
+async function openExtendModal() {
+  if (!host.value || !isAdmin.value) return
+  
+  // 查询该节点下付费实例数量
+  try {
+    const res = await api.admin.getBillingInstances({
+      hostId: host.value.id,
+      pageSize: 1
+    })
+    paidInstanceCount.value = (res as any).total || 0
+  } catch {
+    paidInstanceCount.value = 0
+  }
+  
+  extendDays.value = undefined
+  showExtendModal.value = true
+}
+
+// 确认批量延期
+async function confirmExtendAll() {
+  if (!host.value || !extendDays.value || extendDays.value < 1 || extendDays.value > 365) {
+    toast.error(t('admin.hosts.extendDaysInvalid'))
+    return
+  }
+  
+  actionLoading.value = 'extend'
+  showExtendModal.value = false
+  try {
+    const res = await api.hosts.batchExtendAll(host.value.id, extendDays.value)
+    if (res.success) {
+      toast.success(t('admin.hosts.extendSuccess', { count: res.extendedCount, days: extendDays.value }))
+    } else {
+      toast.info(res.message)
+    }
+  } catch (err: any) {
+    toast.error(t('admin.hosts.extendFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 重新安装：生成新的安装命令
+async function regenerateInstall() {
+  if (!host.value) return
+  
+  actionLoading.value = 'reinstall'
+  try {
+    const res = await api.hosts.regenerateInstall(host.value.id)
+    reinstallCommand.value = res.installCommand
+    reinstallStatus.value = 'waiting'
+    reinstallError.value = ''
+    showReinstallModal.value = true
+  } catch (err: any) {
+    toast.error(t('admin.hosts.reinstallFailed') + ': ' + (err?.message || String(err)))
+  } finally {
+    actionLoading.value = ''
+  }
+}
+
+// 重新安装后验证
+async function verifyAfterReinstall() {
+  if (!host.value) return
+  reinstallStatus.value = 'verifying'
+  reinstallError.value = ''
+  
+  try {
+    const res = await api.hosts.verify(host.value.id)
+    if (res.success) {
+      reinstallStatus.value = 'success'
+      toast.success(t('admin.hosts.verifySuccess'))
+      await loadHost()
+    }
+  } catch (err: any) {
+    reinstallStatus.value = 'error'
+    reinstallError.value = err?.message || String(err)
+    toast.error(t('admin.hosts.verifyFailed') + ': ' + reinstallError.value)
+  }
+}
+
+// 复制重新安装命令
+function copyReinstallCommand() {
+  navigator.clipboard.writeText(reinstallCommand.value)
+  toast.success(t('common.copied'))
+}
+
+
+
+// 关闭重新安装弹窗
+function closeReinstallModal() {
+  showReinstallModal.value = false
+  loadHost()
+}
+
+const tabs = [
+  { key: 'info', labelKey: 'admin.hosts.tabInfo', icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
+  { key: 'config', labelKey: 'admin.hosts.tabConfig', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' },
+  { key: 'images', labelKey: 'admin.hosts.tabImages', icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' },
+  { key: 'storage', labelKey: 'admin.hosts.tabStorage', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4' },
+  { key: 'caddy', labelKey: 'host.caddy.title', icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9' },
+  { key: 'redeemCodes', labelKey: 'redeemCodes.title', icon: 'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z' },
+  { key: 'instances', labelKey: 'admin.hosts.tabInstances', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
+  { key: 'ops', labelKey: 'admin.hosts.tabOps', icon: 'M5 13l4 4L19 7M12 6v6l4 2' },
+  { key: 'create', labelKey: 'admin.hosts.tabCreate', icon: 'M12 4v16m8-8H4' }
+]
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div v-if="loading">
+      <SkeletonLoader type="detail" />
+    </div>
+
+    <template v-else-if="host">
+      <!-- Header -->
+      <div class="page-header flex-col sm:flex-row gap-4">
+        <div class="flex items-center gap-3">
+          <RouterLink
+            to="/resources/hosts"
+            class="transition-colors"
+            :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300' : 'text-gray-400 hover:text-gray-600'"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7" />
+            </svg>
+          </RouterLink>
+          <div>
+            <div class="flex items-center gap-3">
+              <FlagIcon v-if="host.countryCode" :code="host.countryCode" size="md" />
+              <div :class="['w-2.5 h-2.5 rounded-full', statusInfo.dot]"></div>
+              <h1 class="page-title uppercase">{{ host.name }}</h1>
+              <span :class="['badge', statusInfo.class]">{{ statusInfo.label }}</span>
+            </div>
+            <p class="page-description mt-0.5">{{ host.location || host.url }}</p>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2 flex-wrap">
+          <!-- 批量延期按钮（仅管理员可见） -->
+          <button
+            v-if="isAdmin"
+            :disabled="!!actionLoading"
+            class="btn-primary btn-sm sm:btn"
+            @click="openExtendModal"
+          >
+            <svg v-if="actionLoading === 'extend'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ t('admin.hosts.batchExtend') }}</span>
+          </button>
+          <!-- 重新安装按钮：已安装和离线节点都允许重新生成安装脚本 -->
+          <button
+            :disabled="!!actionLoading"
+            class="btn-secondary btn-sm sm:btn"
+            @click="regenerateInstall"
+          >
+            <svg v-if="actionLoading === 'reinstall'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ t('admin.hosts.reinstall') }}</span>
+          </button>
+          <!-- 未验证的宿主机显示验证按钮 -->
+          <button
+            v-if="needsVerification"
+            :disabled="!!actionLoading"
+            class="btn-primary btn-sm sm:btn"
+            @click="verifyHost"
+          >
+            <svg v-if="actionLoading === 'verify'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ t('admin.hosts.verifyAndConnect') }}</span>
+          </button>
+          <!-- 已验证的宿主机显示测试连接按钮 -->
+          <button
+            v-else
+            :disabled="!!actionLoading"
+            class="btn-secondary btn-sm sm:btn"
+            @click="testConnection"
+          >
+            <svg v-if="actionLoading === 'test'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ t('admin.hosts.test') }}</span>
+          </button>
+          <button
+            :disabled="!!actionLoading"
+            class="btn-danger btn-sm sm:btn"
+            @click="openDeleteModal"
+          >
+            <svg v-if="actionLoading === 'delete'" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>{{ t('common.delete') }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Tab Navigation -->
+      <div class="relative">
+        <!-- 滚动容器 -->
+        <div
+          class="flex gap-1 p-1 rounded-xl overflow-x-auto scrollbar-hide scroll-smooth"
+          :class="themeStore.isDark ? 'bg-gray-900' : 'bg-gray-100'"
+        >
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            :class="[
+              'flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-lg transition-all whitespace-nowrap shrink-0',
+              activeTab === tab.key
+                ? (themeStore.isDark ? 'bg-gray-800 text-white shadow-sm' : 'bg-white text-gray-900 shadow-sm')
+                : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50' : 'text-gray-500 hover:text-gray-900 hover:bg-white/50')
+            ]"
+            @click="activeTab = tab.key as TabType"
+          >
+            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="tab.icon" />
+            </svg>
+            <span>{{ t(tab.labelKey) }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Tab Content -->
+      <div>
+        <HostInfoTab v-if="activeTab === 'info'" :host="host" @refresh="loadHost" />
+        <MyHostConfigTab v-if="activeTab === 'config'" :host="host" @saved="onConfigSaved" />
+        <HostImagesTab v-if="activeTab === 'images'" :host-id="host.id" :host-name="host.name" />
+        <HostStorageTab v-if="activeTab === 'storage'" :host-id="host.id" />
+        <HostCaddyTab v-if="activeTab === 'caddy'" :host-id="host.id" />
+        <HostRedeemCodesTab v-if="activeTab === 'redeemCodes'" :host-id="host.id" />
+        <HostInstancesTab v-if="activeTab === 'instances'" :host-id="host.id" :host-name="host.name" />
+        <HostOpsTab v-if="activeTab === 'ops'" :host-id="host.id" :host-name="host.name" />
+        <HostCreateInstanceTab v-if="activeTab === 'create'" :host-id="host.id" :host-name="host.name" :instance-type="host.instanceType" />
+      </div>
+
+      <!-- 批量延期弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showExtendModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showExtendModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title">{{ t('admin.hosts.batchExtend') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showExtendModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-blue-500/10' : 'bg-blue-50'">
+                  <p class="text-sm" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'">
+                    {{ t('admin.hosts.extendHint', { count: paidInstanceCount }) }}
+                  </p>
+                </div>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.extendDaysLabel') }}</label>
+                  <input
+                    v-model.number="extendDays"
+                    type="number"
+                    min="1"
+                    max="365"
+                    class="input"
+                    :placeholder="t('admin.hosts.extendDaysPlaceholder')"
+                  />
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" @click="showExtendModal = false">{{ t('common.cancel') }}</button>
+                <button
+                  class="btn-primary"
+                  :disabled="!extendDays || extendDays < 1 || extendDays > 365"
+                  @click="confirmExtendAll"
+                >
+                  {{ t('admin.hosts.confirmExtendBtn') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 删除确认弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showDeleteModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="showDeleteModal = false"></div>
+            <div class="modal-content max-w-md">
+              <div class="modal-header">
+                <h3 class="modal-title text-error">{{ t('admin.hosts.deleteHost') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="showDeleteModal = false">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <div class="p-3 rounded-lg" :class="themeStore.isDark ? 'bg-red-500/10' : 'bg-red-50'">
+                  <p class="text-sm text-error">{{ t('admin.hosts.deleteWarning') }}</p>
+                </div>
+                <p class="text-sm text-themed-secondary">
+                  {{ t('admin.hosts.deleteConfirmHint', { name: host.name }) }}
+                </p>
+                <div>
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.hosts.enterHostName') }}</label>
+                  <input
+                    v-model="deleteConfirmName"
+                    type="text"
+                    class="input"
+                    :placeholder="host.name"
+                    autocomplete="off"
+                  />
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" @click="showDeleteModal = false">{{ t('common.cancel') }}</button>
+                <button
+                  class="btn-danger"
+                  :disabled="!canDelete"
+                  @click="confirmDeleteHost"
+                >
+                  {{ t('admin.hosts.confirmDeleteBtn') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+
+      <!-- 重新安装弹窗 -->
+      <Teleport to="body">
+        <Transition name="modal">
+          <div v-if="showReinstallModal" class="modal-overlay">
+            <div class="modal-backdrop" @click="closeReinstallModal"></div>
+            <div class="modal-content" style="max-width: 72rem; width: 95%;">
+              <div class="modal-header">
+                <h3 class="modal-title">{{ t('admin.hosts.reinstallScript') }}</h3>
+                <button class="text-themed-muted hover:text-themed" @click="closeReinstallModal">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div class="modal-body space-y-4">
+                <!-- 步骤 1: 执行安装命令 -->
+                <div class="space-y-2">
+                  <div class="flex items-center gap-2">
+                    <span class="flex items-center justify-center w-6 h-6 rounded-full text-xs font-medium" :class="reinstallStatus === 'success' ? 'bg-green-500 text-white' : 'bg-blue-500 text-white'">1</span>
+                    <span class="text-sm font-medium text-themed">{{ t('admin.hosts.step1RunScript') }}</span>
+                  </div>
+                  <p class="text-xs text-themed-muted ml-8">{{ t('admin.hosts.runOnHost') }}</p>
+                  <div class="bg-gray-900 rounded-lg p-4 ml-8 overflow-x-auto">
+                    <code class="text-green-400 text-sm break-all whitespace-pre-wrap font-mono">{{ reinstallCommand }}</code>
+                  </div>
+                  <div class="ml-8 mb-4">
+                    <button class="btn-secondary btn-sm" @click="copyReinstallCommand">{{ t('admin.hosts.copyCommand') }}</button>
+                  </div>
+                </div>
+
+                <!-- 步骤 2: 验证并连接 -->
+                <div class="space-y-2 pt-4 border-t border-themed">
+                  <div class="flex items-center gap-2">
+                    <span class="flex items-center justify-center w-6 h-6 rounded-full text-xs font-medium" :class="reinstallStatus === 'success' ? 'bg-green-500 text-white' : 'bg-gray-500 text-white'">2</span>
+                    <span class="text-sm font-medium text-themed">{{ t('admin.hosts.step2Verify') }}</span>
+                  </div>
+                  <p class="text-xs text-themed-muted ml-8">{{ t('admin.hosts.verifyHint') }}</p>
+                
+                  <!-- 状态显示 -->
+                  <div class="ml-8 flex items-center gap-3">
+                    <button 
+                      class="btn-secondary btn-sm" 
+                      :disabled="reinstallStatus === 'verifying' || reinstallStatus === 'success'"
+                      @click="verifyAfterReinstall"
+                    >
+                      <svg v-if="reinstallStatus === 'verifying'" class="w-4 h-4 animate-spin mr-1" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                      </svg>
+                      {{ reinstallStatus === 'verifying' ? t('admin.hosts.verifying') : t('admin.hosts.verifyAndConnect') }}
+                    </button>
+                  
+                    <!-- 成功状态 -->
+                    <div v-if="reinstallStatus === 'success'" class="flex items-center gap-2 text-green-500">
+                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                      <span class="text-sm">{{ t('admin.hosts.verifySuccess') }}</span>
+                    </div>
+                  </div>
+                
+                  <!-- 错误提示 -->
+                  <div v-if="reinstallStatus === 'error' && reinstallError" class="ml-8 p-3 rounded-lg bg-red-500/10 text-red-500 text-sm">
+                    {{ reinstallError }}
+                  </div>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button class="btn-secondary" @click="closeReinstallModal">{{ t('common.close') }}</button>
+                <button v-if="reinstallStatus === 'success'" class="btn-primary" @click="closeReinstallModal">{{ t('common.done') }}</button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+    </template>
+  </div>
+</template>
diff --git a/client/src/views/resources/MyHostsView.vue b/client/src/views/resources/MyHostsView.vue
new file mode 100644
index 0000000..9f7c56a
--- /dev/null
+++ b/client/src/views/resources/MyHostsView.vue
@@ -0,0 +1,677 @@
+<script setup>
+import { ref, computed, onMounted, onActivated, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import api from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import FlagIcon from '@/components/FlagIcon.vue'
+import { translateError } from '@/utils/errorHandler'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'MyHostsView' })
+
+const { t, locale } = useI18n()
+const router = useRouter()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+const isAdmin = computed(() => authStore.user?.role === 'admin')
+
+// 管理员专用：节点范围切换器
+const scope = ref('mine') // 'mine' | 'hosted'
+const filterUserId = ref('')  // 用于筛选特定用户的托管节点
+
+// 托管准入检查
+const showAccessDeniedModal = ref(false)
+const accessDeniedDetails = ref(null)
+const accessDeniedConditionText = computed(() =>
+  accessDeniedDetails.value?.hiddenBySystemSetting
+    ? t('hosting.accessDenied.featureHiddenCondition')
+    : t('hosting.accessDenied.condition')
+)
+const accessDeniedStatusText = computed(() =>
+  accessDeniedDetails.value?.hiddenBySystemSetting
+    ? t('hosting.accessDenied.featureHiddenCurrent')
+    : t('hosting.accessDenied.currentInstances', { count: accessDeniedDetails.value?.instanceCount || 0 })
+)
+const accessDeniedHintText = computed(() =>
+  accessDeniedDetails.value?.hiddenBySystemSetting
+    ? t('hosting.accessDenied.featureHiddenHint')
+    : t('hosting.accessDenied.hint')
+)
+
+// 宿主机列表
+const hosts = ref([])
+const loading = ref(true)
+const search = ref('')
+const calibratingAll = ref(false)
+const page = ref(1)
+const pageSize = ref(100)
+const total = ref(0)
+const totalPages = ref(0)
+const takingOverHostId = ref(null)
+
+// 在线节点数量（用于校对按钮禁用状态）
+const onlineHostsCount = computed(() => hosts.value.filter(h => h.status === 'online').length)
+
+// 计算可显示的页码列表
+const pageNumbers = computed(() => {
+  const current = page.value
+  const total = totalPages.value
+  const pages = []
+  
+  if (total <= 7) {
+    // 总页数少于等于7，全部显示
+    for (let i = 1; i <= total; i++) pages.push(i)
+  } else {
+    // 始终显示第一页
+    pages.push(1)
+    
+    if (current <= 3) {
+      // 当前页靠前，显示 1 2 3 4 5 ... n
+      pages.push(2, 3, 4, 5, '...', total)
+    } else if (current >= total - 2) {
+      // 当前页靠后，显示 1 ... n-4 n-3 n-2 n-1 n
+      pages.push('...', total - 4, total - 3, total - 2, total - 1, total)
+    } else {
+      // 当前页在中间，显示 1 ... c-1 c c+1 ... n
+      pages.push('...', current - 1, current, current + 1, '...', total)
+    }
+  }
+  
+  return pages
+})
+
+// 跳转到指定页码
+function goToPage(p) {
+  if (typeof p !== 'number') return
+  if (p < 1 || p > totalPages.value) return
+  page.value = p
+  loadHosts()
+}
+
+// 修改每页数量
+function handlePageSizeChange() {
+  page.value = 1
+  loadHosts()
+}
+
+// 记录是否已经首次加载
+let hasInitialLoad = false
+
+// 加载宿主机列表
+async function loadHosts() {
+  loading.value = true
+  try {
+    let res
+    if (isAdmin.value && scope.value === 'hosted') {
+      // 管理员查看托管节点
+      res = await api.hosts.listHosted({
+        page: page.value,
+        pageSize: pageSize.value,
+        search: search.value,
+        ...(filterUserId.value ? { userId: parseInt(filterUserId.value, 10) } : {})
+      })
+    } else if (isAdmin.value && scope.value === 'mine') {
+      // 管理员查看自己的节点（传 scope: 'mine'）
+      res = await api.hosts.list({
+        page: page.value,
+        pageSize: pageSize.value,
+        search: search.value,
+        scope: 'mine'
+      })
+    } else {
+      // 普通用户查看自己的节点
+      res = await api.hosts.list({
+        page: page.value,
+        pageSize: pageSize.value,
+        search: search.value,
+        mine: true
+      })
+    }
+    hosts.value = res.hosts || []
+    total.value = res.total || 0
+    totalPages.value = res.totalPages || 1
+  } catch (err) {
+    toast.error(err.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 切换范围时重新加载
+function switchScope(newScope) {
+  scope.value = newScope
+  filterUserId.value = ''
+  page.value = 1
+  loadHosts()
+}
+
+// 按用户ID筛选时重新加载
+let filterTimer = null
+watch(filterUserId, () => {
+  clearTimeout(filterTimer)
+  filterTimer = setTimeout(() => {
+    page.value = 1
+    loadHosts()
+  }, 300)
+})
+
+// 搜索防抖
+let searchTimer = null
+watch(search, () => {
+  clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    page.value = 1
+    loadHosts()
+  }, 300)
+})
+
+// 跳转到创建页面（需检查托管准入条件）
+async function goToCreate() {
+  // 管理员直接放行
+  if (authStore.user?.role === 'admin') {
+    router.push('/resources/hosts/create')
+    return
+  }
+
+  try {
+    const res = await api.hosting.checkAccess()
+    if (res.allowed) {
+      router.push('/resources/hosts/create')
+    } else {
+      accessDeniedDetails.value = res.details || null
+      showAccessDeniedModal.value = true
+    }
+  } catch {
+    // 检查失败时也允许跳转，让后端再次校验
+    router.push('/resources/hosts/create')
+  }
+}
+
+// 跳转到详情页面
+function goToDetail(host) {
+  router.push(`/resources/hosts/${host.id}`)
+}
+
+// 测试宿主机连接
+async function testHost(host) {
+  try {
+    const res = await api.hosts.test(host.id)
+    if (res.success) {
+      toast.success(t('admin.hosts.testSuccess'))
+    }
+    loadHosts()
+  } catch (err) {
+    toast.error(t('admin.hosts.testFailed') + ': ' + err.message)
+  }
+}
+
+// 删除宿主机
+async function deleteHost(host) {
+  if (!confirm(t('admin.hosts.confirmDelete', { name: host.name }))) return
+
+  try {
+    await api.hosts.delete(host.id)
+    hosts.value = hosts.value.filter(h => h.id !== host.id)
+    total.value = Math.max(0, total.value - 1)
+    // 更新总页数
+    totalPages.value = Math.max(1, Math.ceil(total.value / pageSize.value))
+    // 如果当前页超出范围，跳转到最后一页
+    if (page.value > totalPages.value) {
+      page.value = totalPages.value
+      loadHosts()
+    }
+    toast.success(t('admin.hosts.hostDeleted'))
+  } catch (err) {
+    toast.error(t('admin.hosts.deleteFailed') + ': ' + err.message)
+  }
+}
+
+function formatLocalizedNameList(names, max = 3) {
+  const visibleNames = (names || [])
+    .slice(0, max)
+    .map(name => String(name))
+    .filter(Boolean)
+
+  if (visibleNames.length === 0) {
+    return '-'
+  }
+
+  try {
+    return new Intl.ListFormat(locale.value || 'en', {
+      style: 'short',
+      type: 'conjunction'
+    }).format(visibleNames)
+  } catch {
+    return visibleNames.join(', ')
+  }
+}
+
+async function takeoverHost(host) {
+  if (!isAdmin.value || scope.value !== 'hosted') return
+
+  const confirmed = confirm(t('resources.hosts.takeoverOfficialConfirm', { name: host.name }))
+  if (!confirmed) return
+
+  takingOverHostId.value = host.id
+  try {
+    const res = await api.hosts.takeoverOfficial(host.id)
+    const summary = res.summary
+    toast.success(t('resources.hosts.takeoverOfficialSuccess', {
+      name: summary.newHostName,
+      packages: summary.transferredPackageCount,
+      instances: summary.instanceCount
+    }))
+    if (summary.detachedPackageCount > 0) {
+      const detachedNames = formatLocalizedNameList(summary.detachedPackageNames)
+      toast.info(t('resources.hosts.takeoverOfficialDetached', {
+        count: summary.detachedPackageCount,
+        names: detachedNames || '-'
+      }))
+    }
+    await loadHosts()
+  } catch (err) {
+    const takeoverError = err && typeof err === 'object' ? err : null
+    if (takeoverError?.code === 'HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT') {
+      const packageNames = Array.isArray(takeoverError.packageNames) ? takeoverError.packageNames : []
+      toast.error(t('resources.hosts.takeoverOfficialBlocked', {
+        count: takeoverError.count || packageNames.length,
+        names: formatLocalizedNameList(packageNames)
+      }))
+      return
+    }
+
+    toast.error(translateError(err))
+  } finally {
+    takingOverHostId.value = null
+  }
+}
+
+// 校对全部宿主机资源（校对用户的所有节点，而不是当前页面）
+async function calibrateAll() {
+  calibratingAll.value = true
+  let successCount = 0
+  let changedCount = 0
+  
+  try {
+    // 先获取用户的所有节点（不分页）
+    const res = await api.hosts.list({
+      mine: true,
+      pageSize: 1000  // 获取所有节点
+    })
+    const allHosts = res.hosts || []
+    
+    // 只校对在线的节点
+    const onlineHosts = allHosts.filter(h => h.status === 'online')
+    if (onlineHosts.length === 0) {
+      toast.info(t('resources.hosts.noOnlineHosts'))
+      return
+    }
+    
+    for (const host of onlineHosts) {
+      try {
+        const res = await api.hosts.recalculateResources(host.id)
+        successCount++
+        if (res.hasChanges) changedCount++
+      } catch {
+        // 单个失败不影响其他
+      }
+    }
+    
+    if (changedCount > 0) {
+      toast.success(t('resources.hosts.calibrateAllDone', { total: successCount, changed: changedCount }))
+    } else {
+      toast.success(t('resources.hosts.calibrateAllNoChange', { total: successCount }))
+    }
+    
+    // 重新加载列表以显示最新数据
+    await loadHosts()
+  } finally {
+    calibratingAll.value = false
+  }
+}
+
+// 格式化内存
+function formatMemory(mb) {
+  if (!mb) return '0'
+  if (mb >= 1024) return (mb / 1024).toFixed(0) + ' GB'
+  return mb + ' MB'
+}
+
+// 获取状态样式
+function getStatusClass(status) {
+  const map = {
+    online: 'bg-green-500',
+    offline: 'bg-gray-600',
+    maintenance: 'bg-yellow-500'
+  }
+  return map[status] || 'bg-gray-600'
+}
+
+onMounted(() => {
+  loadHosts()
+  hasInitialLoad = true
+})
+
+// 当组件从 KeepAlive 缓存中激活时，重新加载数据
+// 解决从创建页面返回后需要手动刷新的问题
+onActivated(() => {
+  // 避免与 onMounted 重复加载
+  if (hasInitialLoad) {
+    loadHosts()
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ t('resources.hosts.title') }}</h1>
+        <p class="page-description">{{ t('resources.hosts.description') }}</p>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-4">
+      <div class="flex items-center gap-3 flex-wrap">
+        <div class="relative flex-1 sm:flex-none sm:w-48">
+          <input
+            v-model="search"
+            type="text"
+            :placeholder="t('admin.hosts.searchPlaceholder')"
+            class="input pl-9 w-full"
+          />
+          <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <!-- 管理员专用：节点范围切换器 -->
+        <div v-if="isAdmin" class="inline-flex rounded-lg p-1" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+          <button
+            class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
+            :class="scope === 'mine' 
+              ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm') 
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+            @click="switchScope('mine')"
+          >
+            {{ t('resources.hosts.mine') }}
+          </button>
+          <button
+            class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
+            :class="scope === 'hosted' 
+              ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm') 
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+            @click="switchScope('hosted')"
+          >
+            {{ t('resources.hosts.hosted') }}
+          </button>
+        </div>
+        <!-- 托管节点用户ID筛选 -->
+        <div v-if="isAdmin && scope === 'hosted'" class="relative sm:w-36">
+          <input
+            v-model="filterUserId"
+            type="text"
+            :placeholder="t('resources.hosts.filterByUserId')"
+            class="input pl-9 w-full"
+          />
+          <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 w-full sm:w-auto">
+        <button
+          v-if="scope === 'mine'"
+          class="btn-secondary flex-1 sm:flex-none justify-center"
+          :disabled="calibratingAll || onlineHostsCount === 0"
+          @click="calibrateAll"
+        >
+          <svg v-if="calibratingAll" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          {{ t('resources.hosts.calibrateAll') }}
+        </button>
+        <button v-if="scope === 'mine'" class="btn-primary flex-1 sm:flex-none justify-center" @click="goToCreate">
+          <svg 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="M12 4v16m8-8H4" />
+          </svg>
+          {{ t('resources.hosts.create') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 宿主机列表 -->
+    <SkeletonLoader v-if="loading" type="table" />
+
+    <div v-else-if="hosts.length === 0" class="card p-12 text-center">
+      <svg
+        class="w-12 h-12 mx-auto mb-4"
+        :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+      </svg>
+      <p class="text-themed-secondary">{{ t('resources.hosts.noHosts') }}</p>
+      <p class="text-xs text-themed-muted mt-2">{{ t('resources.hosts.noHostsHint') }}</p>
+    </div>
+
+    <div v-else class="card overflow-x-auto">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[800px]">
+          <thead
+            class="border-b"
+            :class="themeStore.isDark ? 'bg-gray-900/50 border-gray-800' : 'bg-gray-50 border-gray-200'"
+          >
+            <tr>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.hosts.name') }}</th>
+              <th v-if="isAdmin && scope === 'hosted'" class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('resources.hosts.owner') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.hosts.status') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.hosts.resources') }}</th>
+              <th class="text-left text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.hosts.instances') }}</th>
+              <th v-if="scope === 'mine' || (isAdmin && scope === 'hosted')" class="text-right text-xs font-medium text-themed-muted uppercase tracking-wider px-4 py-3 whitespace-nowrap">{{ t('admin.hosts.actions') }}</th>
+            </tr>
+          </thead>
+          <tbody
+            class="divide-y"
+            :class="themeStore.isDark ? 'divide-gray-800' : 'divide-gray-100'"
+          >
+            <tr
+              v-for="host in hosts"
+              :key="host.id"
+              class="transition-colors cursor-pointer"
+              :class="themeStore.isDark ? 'hover:bg-gray-900/30' : 'hover:bg-gray-50'"
+              @click="goToDetail(host)"
+            >
+              <td class="px-4 py-3 whitespace-nowrap">
+                <div class="flex items-center gap-2">
+                  <FlagIcon :code="host.countryCode" size="sm" />
+                  <div>
+                    <div
+                      class="font-medium"
+                      :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'"
+                    >
+                      {{ host.name?.toUpperCase() || host.name }}
+                    </div>
+                    <div
+                      class="text-xs"
+                      :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-500'"
+                    >
+                      {{ host.location || host.url }}
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <!-- 托管节点所有者信息 -->
+              <td v-if="isAdmin && scope === 'hosted'" class="px-4 py-3 whitespace-nowrap">
+                <div v-if="host.owner" class="flex items-center gap-2">
+                  <UserAvatar :avatar-style="host.owner.avatarStyle" :badge-id="host.owner.avatarBadgeId || null" :size="28" :username="host.owner.username" />
+                  <div>
+                    <div class="text-sm font-medium text-themed">{{ host.owner.username }}</div>
+                    <div class="text-xs text-themed-muted">UID: {{ host.owner.id }}</div>
+                  </div>
+                </div>
+                <span v-else class="text-themed-muted">-</span>
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap">
+                <span class="inline-flex items-center gap-1.5">
+                  <span :class="['w-2 h-2 rounded-full', getStatusClass(host.status)]"></span>
+                  <span class="text-sm text-themed-secondary">{{ host.status }}</span>
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed-secondary whitespace-nowrap">
+                <div>
+                  {{ t('admin.hosts.cpu') }}: {{ host.cpuAllowanceMax || 0 }}%
+                </div>
+                <div>
+                  {{ t('admin.hosts.memory') }}: {{ formatMemory(host.memoryMax || 0) }}
+                </div>
+              </td>
+              <td class="px-4 py-3 text-sm text-themed-secondary whitespace-nowrap">{{ host.instanceCount }}</td>
+              <td v-if="scope === 'mine' || (isAdmin && scope === 'hosted')" class="px-4 py-3 text-right whitespace-nowrap" @click.stop>
+                <div class="flex items-center justify-end gap-2">
+                  <template v-if="scope === 'mine'">
+                    <button class="btn-ghost btn-sm" @click.stop="testHost(host)">{{ t('admin.hosts.test') }}</button>
+                    <button class="btn-ghost btn-sm text-error" @click.stop="deleteHost(host)">{{ t('admin.hosts.delete') }}</button>
+                  </template>
+                  <template v-else-if="isAdmin && scope === 'hosted'">
+                    <button
+                      class="btn-ghost btn-sm text-primary"
+                      :disabled="takingOverHostId === host.id"
+                      @click.stop="takeoverHost(host)"
+                    >
+                      {{ takingOverHostId === host.id ? t('resources.hosts.takeoverOfficialLoading') : t('resources.hosts.takeoverOfficial') }}
+                    </button>
+                  </template>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="total > 0" class="flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-themed-muted">
+      <div class="flex items-center gap-3">
+        <span>{{ t('admin.users.totalRecords', { count: total }) }}</span>
+        <select
+          v-model="pageSize"
+          class="text-sm rounded-md border-0 py-1 pl-2 pr-7 ring-1 ring-inset focus:ring-2 focus:ring-primary cursor-pointer"
+          :class="themeStore.isDark 
+            ? 'bg-gray-800 text-gray-300 ring-gray-700' 
+            : 'bg-gray-50 text-gray-700 ring-gray-200'"
+          @change="handlePageSizeChange"
+        >
+          <option :value="10">10 / {{ t('common.page') }}</option>
+          <option :value="30">30 / {{ t('common.page') }}</option>
+          <option :value="50">50 / {{ t('common.page') }}</option>
+          <option :value="100">100 / {{ t('common.page') }}</option>
+        </select>
+      </div>
+      <div v-if="totalPages > 1" class="flex items-center gap-1">
+        <!-- 上一页 -->
+        <button
+          :disabled="page <= 1"
+          class="px-2 py-1 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'"
+          @click="goToPage(page - 1)"
+        >
+          <svg 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 19l-7-7 7-7" />
+          </svg>
+        </button>
+        
+        <!-- 页码按钮 -->
+        <template v-for="(p, idx) in pageNumbers" :key="idx">
+          <span v-if="p === '...'" class="px-2 py-1 text-themed-muted">…</span>
+          <button
+            v-else
+            class="min-w-[32px] px-2 py-1 rounded transition-colors"
+            :class="[
+              p === page
+                ? (themeStore.isDark ? 'bg-blue-600 text-white' : 'bg-blue-500 text-white')
+                : (themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100')
+            ]"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </template>
+        
+        <!-- 下一页 -->
+        <button
+          :disabled="page >= totalPages"
+          class="px-2 py-1 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'"
+          @click="goToPage(page + 1)"
+        >
+          <svg 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="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 托管准入条件不满足弹窗 -->
+  <div
+    v-if="showAccessDeniedModal"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    @click.self="showAccessDeniedModal = false"
+  >
+    <div
+      class="w-full max-w-md mx-4 p-6 rounded-xl shadow-xl"
+      :class="themeStore.isDark ? 'bg-gray-900' : 'bg-white'"
+    >
+      <div class="flex items-center gap-3 mb-4">
+        <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
+          <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+        </div>
+        <h3 class="text-lg font-semibold text-themed">{{ t('hosting.accessDenied.title') }}</h3>
+      </div>
+
+      <p class="text-sm text-themed-muted mb-4">{{ t('hosting.accessDenied.description') }}</p>
+
+      <div class="space-y-3 mb-6">
+        <!-- 条件：至少拥有过1台实例 -->
+        <div
+          class="flex items-center gap-3 p-3 rounded-lg"
+          :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-50'"
+        >
+          <div
+            class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 bg-gray-300 dark:bg-gray-600"
+          >
+            <span class="text-xs font-medium">!</span>
+          </div>
+          <div class="flex-1">
+            <div class="text-sm font-medium text-themed">{{ accessDeniedConditionText }}</div>
+            <div class="text-xs text-themed-muted">
+              {{ accessDeniedStatusText }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="text-xs text-themed-muted mb-4">{{ accessDeniedHintText }}</p>
+
+      <button
+        class="btn-primary w-full"
+        @click="showAccessDeniedModal = false"
+      >
+        {{ t('common.confirm') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/client/src/views/resources/MyPackagesView.vue b/client/src/views/resources/MyPackagesView.vue
new file mode 100644
index 0000000..90997ad
--- /dev/null
+++ b/client/src/views/resources/MyPackagesView.vue
@@ -0,0 +1,1862 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onActivated, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import api from '@/api'
+import SkeletonLoader from '@/components/SkeletonLoader.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import PackageQuotaReleaseModal from '@/components/PackageQuotaReleaseModal.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import { translateError } from '@/utils/errorHandler'
+import type { Package, Host } from '@/types/api'
+
+// 为 KeepAlive include 匹配定义组件名称（必须在所有 import 之后）
+defineOptions({ name: 'MyPackagesView' })
+
+const { t } = useI18n()
+const router = useRouter()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+const isAdmin = computed(() => authStore.user?.role === 'admin')
+const MAX_PACKAGE_PLAN_PRICE_CENTS = 99999999
+const MAX_PACKAGE_PLAN_PRICE = MAX_PACKAGE_PLAN_PRICE_CENTS / 100
+
+// 管理员专用：套餐范围切换器
+const scope = ref<'mine' | 'hosted'>('mine')
+const filterUserId = ref('')  // 用于筛选特定用户的托管套餐
+
+const packages = ref<Package[]>([])
+const hosts = ref<Host[]>([])
+const loading = ref<boolean>(true)
+
+// 搜索
+const searchQuery = ref('')
+
+// 过滤后的套餐（按套餐名、节点名、描述搜索）
+const filteredPackages = computed(() => {
+  const query = searchQuery.value.toLowerCase().trim()
+  if (!query) return packages.value
+  return packages.value.filter(pkg => {
+    // 按套餐名搜索
+    if (pkg.name.toLowerCase().includes(query)) return true
+    // 按描述搜索
+    if (pkg.description && pkg.description.toLowerCase().includes(query)) return true
+    // 按节点名搜索
+    const hostNames = getHostNames(pkg as Package & { host_ids?: number[] }).toLowerCase()
+    if (hostNames.includes(query)) return true
+    return false
+  })
+})
+
+// 分页配置
+const packagesPage = ref(1)
+const packagesPageSize = 100
+const packagesTotalPages = computed(() => Math.max(1, Math.ceil(filteredPackages.value.length / packagesPageSize)))
+const paginatedPackages = computed(() => {
+  const start = (packagesPage.value - 1) * packagesPageSize
+  return filteredPackages.value.slice(start, start + packagesPageSize)
+})
+
+// 计算可显示的页码列表
+const packagesPageNumbers = computed(() => {
+  const current = packagesPage.value
+  const total = packagesTotalPages.value
+  const pages: (number | string)[] = []
+  
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (current <= 3) {
+      pages.push(2, 3, 4, 5, '...', total)
+    } else if (current >= total - 2) {
+      pages.push('...', total - 4, total - 3, total - 2, total - 1, total)
+    } else {
+      pages.push('...', current - 1, current, current + 1, '...', total)
+    }
+  }
+  return pages
+})
+
+// 跳转到指定页码
+function goToPackagesPage(p: number | string) {
+  if (typeof p !== 'number') return
+  if (p < 1 || p > packagesTotalPages.value) return
+  packagesPage.value = p
+}
+
+// 监听总页数变化，防止页码越界
+watch(packagesTotalPages, (newTotal) => {
+  if (packagesPage.value > newTotal) {
+    packagesPage.value = Math.max(1, newTotal)
+  }
+})
+
+// 搜索时重置页码
+function onSearchChange() {
+  packagesPage.value = 1
+}
+
+// 清除搜索
+function clearSearch() {
+  searchQuery.value = ''
+  packagesPage.value = 1
+}
+
+// 记录是否已经首次加载
+let hasInitialLoad = false
+
+// 套餐共享相关
+interface Friend {
+  id: number
+  username: string
+  email?: string
+  avatarStyle: string
+  avatarBadgeId?: string | null
+}
+const friends = ref<Friend[]>([])
+const showShareModal = ref<boolean>(false)
+const currentPackageId = ref<number | null>(null)
+const selectedFriendId = ref<number | null>(null)
+const shareLoading = ref<boolean>(false)
+const showSharesModal = ref<boolean>(false)
+const shares = ref<Array<{
+  id: number
+  packageId: number
+  packageName: string
+  ownerId: number
+  ownerUsername: string
+  sharedToId: number
+  sharedToUsername: string
+  sharedToAvatarStyle?: string | null
+  sharedToAvatarBadgeId?: string | null
+  quotaMultiplier: number | null
+  maxInstances: number | null
+  usage?: {
+    instanceCount: number
+    totalCpu: number
+    totalMemory: number
+  }
+  createdAt: string
+}>>([])
+const sharesLoading = ref<boolean>(false)
+const friendSearchQuery = ref<string>('')
+
+// 共享配额限制
+const quotaMultiplierOptions = computed(() => [
+  { value: null, label: t('resources.packages.noLimit') },
+  { value: 0.5, label: '0.5x' },
+  { value: 1, label: '1x' },
+  { value: 1.5, label: '1.5x' },
+  { value: 2, label: '2x' },
+  { value: 3, label: '3x' },
+])
+const maxInstancesOptions = computed(() => [
+  { value: null, label: t('resources.packages.noLimit') },
+  { value: 1, label: t('resources.packages.instanceUnit', { n: 1 }) },
+  { value: 2, label: t('resources.packages.instanceUnit', { n: 2 }) },
+  { value: 3, label: t('resources.packages.instanceUnit', { n: 3 }) },
+  { value: 5, label: t('resources.packages.instanceUnit', { n: 5 }) },
+  { value: 10, label: t('resources.packages.instanceUnit', { n: 10 }) },
+])
+const selectedQuotaMultiplier = ref<number | null>(1)  // 默认 1x
+const selectedMaxInstances = ref<number | null>(null)   // 默认无限制
+const packageQuota = ref<{ cpuMax: number; memoryMax: number } | null>(null)
+const currentPackage = ref<Package | null>(null)
+
+// 配额释放相关
+const showQuotaReleaseModal = ref<boolean>(false)
+const quotaReleasePackage = ref<Package | null>(null)
+
+function openQuotaReleaseModal(pkg: Package): void {
+  quotaReleasePackage.value = pkg
+  showQuotaReleaseModal.value = true
+}
+
+function handleQuotaReleaseSuccess(): void {
+  // 可选：刷新套餐列表以显示最新配额
+}
+
+// 编辑配额相关
+const showEditQuotaModal = ref<boolean>(false)
+const editingShare = ref<typeof shares.value[0] | null>(null)
+const editQuotaMultiplier = ref<number | null>(null)
+const editMaxInstances = ref<number | null>(null)
+const editQuotaLoading = ref<boolean>(false)
+
+// 过滤已共享的好友，并支持搜索
+const availableFriends = computed(() => {
+  const sharedIds = new Set(shares.value.map(s => s.sharedToId))
+  let filtered = friends.value.filter(f => !sharedIds.has(f.id))
+  if (friendSearchQuery.value.trim()) {
+    const query = friendSearchQuery.value.toLowerCase().trim()
+    filtered = filtered.filter(f => f.username.toLowerCase().includes(query))
+  }
+  return filtered
+})
+
+function bytesToGB(bytes: string | null | undefined): number {
+  if (!bytes) return 1
+  try {
+    const b = Number(bytes)
+    if (isNaN(b) || b <= 0) return 1
+    // 使用浮点运算支持小于1GB的值，保甙6位小数避免精度丢失
+    const gb = b / (1024 * 1024 * 1024)
+    // 四舍五入到6位小数，避免浮点精度问题
+    const rounded = Math.round(gb * 1000000) / 1000000
+    return rounded || 1
+  } catch {
+    return 1
+  }
+}
+
+// 字节数转换为 Mbps（后端存储的是 bytes 但按 MB 计算为 Mbit）
+function bytesToMbps(bytes: string | null | undefined): number {
+  if (!bytes || bytes === '0') return 10
+  try {
+    const b = Number(bytes)
+    if (isNaN(b) || b <= 0) return 10
+    // 后端计算: bytes / (1024 * 1024) = Mbit
+    const mbps = b / (1024 * 1024)
+    return Math.round(mbps) || 10
+  } catch {
+    return 10
+  }
+}
+
+onMounted(async (): Promise<void> => {
+  // 好友共享功能已禁用，不再加载好友列表
+  await Promise.all([loadPackages(), loadHosts()])
+  hasInitialLoad = true
+})
+
+// 当组件从 KeepAlive 缓存中激活时，重新加载数据
+onActivated(async (): Promise<void> => {
+  if (hasInitialLoad) {
+    await Promise.all([loadPackages(), loadHosts()])
+  }
+})
+
+async function loadPackages(): Promise<void> {
+  loading.value = true
+  try {
+    if (isAdmin.value && scope.value === 'hosted') {
+      // 管理员查看托管套餐
+      const response = await api.packages.listHosted({
+        ...(filterUserId.value ? { userId: parseInt(filterUserId.value, 10) } : {})
+      })
+      packages.value = (response as { packages?: Package[] }).packages || []
+    } else if (isAdmin.value && scope.value === 'mine') {
+      // 管理员查看自己的套餐（传 scope: 'mine'）
+      const response = await api.packages.list({ all: true, scope: 'mine' })
+      packages.value = (response as { packages?: Package[] }).packages || []
+    } else {
+      // 普通用户查看自己的套餐
+      const response = await api.packages.list({ all: true })
+      const allPackages = (response as { packages?: Package[] }).packages || []
+      packages.value = allPackages.filter((p: any) => p.isOwn === true)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 切换范围时重新加载
+function switchScope(newScope: 'mine' | 'hosted'): void {
+  scope.value = newScope
+  filterUserId.value = ''
+  packagesPage.value = 1
+  loadPackages()
+}
+
+// 按用户ID筛选时重新加载
+let filterTimer: ReturnType<typeof setTimeout> | null = null
+watch(filterUserId, () => {
+  if (filterTimer) clearTimeout(filterTimer)
+  filterTimer = setTimeout(() => {
+    packagesPage.value = 1
+    loadPackages()
+  }, 300)
+})
+
+async function loadHosts(): Promise<void> {
+  try {
+    // 管理员加载所有节点（包括官方节点），普通用户只加载自己的节点
+    // 传递 pageSize 以获取所有宿主机，避免默认分页限制（默认只返回20条）
+    const response = await api.hosts.list(isAdmin.value ? { pageSize: '1000' } : { mine: 'true', pageSize: '1000' })
+    hosts.value = (response as { hosts?: Host[] }).hosts || []
+  } catch (err) {
+    console.error('加载宿主机失败:', err)
+  }
+}
+
+function getHostNames(pkg: Package & { host_ids?: number[] }): string {
+  const hostIds = pkg.host_ids || []
+  if (hostIds.length === 0) return t('admin.packages.noHostsBound')
+  const hostNames = hostIds.map(id => {
+    const host = hosts.value.find(h => h.id === id)
+    return host ? host.name : `Host #${id}`
+  })
+  return hostNames.join(', ')
+}
+
+function getPackageNetworkModeLabel(pkg: Package): string {
+  const mode = (pkg.network_mode || (pkg as { networkMode?: Package['network_mode'] }).networkMode || 'nat').toLowerCase()
+  const key = `common.networkMode.${mode}`
+  const translated = t(key)
+  return translated === key ? mode : translated
+}
+
+function getPackageInstanceTypeLabel(pkg: Package): string {
+  return pkg.instance_type === 'vm' ? t('common.instanceType.vm') : t('common.instanceType.container')
+}
+
+function formatTrafficMultiplier(value: unknown): string {
+  const multiplier = Number(value ?? 1)
+  if (!Number.isFinite(multiplier)) return '1x'
+  return `${Math.round(multiplier * 1000) / 1000}x`
+}
+
+function getPackageTrafficMultiplierItems(pkg: Package & { host_ids?: number[] }): Array<{ hostName: string; multiplier: string }> {
+  const hostIds = pkg.host_ids || []
+  const multipliers = pkg.host_traffic_multipliers || {}
+
+  if (hostIds.length === 0) {
+    return [{ hostName: t('admin.packages.noHostsBound'), multiplier: formatTrafficMultiplier(1) }]
+  }
+
+  return hostIds.map(id => {
+    const host = hosts.value.find(h => h.id === id)
+    return {
+      hostName: host ? host.name : `Host #${id}`,
+      multiplier: formatTrafficMultiplier(multipliers[String(id)] ?? 1)
+    }
+  })
+}
+
+function getPackageTrafficMultiplierLabel(pkg: Package & { host_ids?: number[] }): string {
+  const items = getPackageTrafficMultiplierItems(pkg)
+  const uniqueMultipliers = [...new Set(items.map(item => item.multiplier))]
+  return uniqueMultipliers.join(' / ')
+}
+
+function getPackageTrafficMultiplierTitle(pkg: Package & { host_ids?: number[] }): string {
+  return getPackageTrafficMultiplierItems(pkg)
+    .map(item => `${item.hostName}: ${item.multiplier}`)
+    .join(', ')
+}
+
+function isPackagePublic(pkg: Package): boolean {
+  const globalShared = (pkg as { global_shared?: unknown }).global_shared
+  const active = (pkg as { active?: unknown }).active
+  const isActive = active === true || active === 1
+  return isActive && (globalShared === true || globalShared === 1 || pkg.isGlobalShared === true)
+}
+
+/**
+ * 复制套餐分享链接
+ * 链接格式: /instances/create?source=market|official&package=123
+ */
+function copyShareLink(pkg: Package): void {
+  // 判断套餐来源：任一节点名以 PEER 开头 = 托管市场
+  const hostNames = getHostNames(pkg)
+  const isHostedPackage = hostNames.split(', ').some(name => name.toUpperCase().startsWith('PEER'))
+  const source = isHostedPackage ? 'market' : 'official'
+  const link = `${window.location.origin}/instances/create?source=${source}&package=${pkg.id}`
+  
+  navigator.clipboard.writeText(link).then(() => {
+    toast.success(t('resources.packages.shareLinkCopied'))
+  }).catch(() => {
+    toast.error(t('common.copyFailed'))
+  })
+}
+
+// 跳转到创建页面
+async function openCreate(): Promise<void> {
+  router.push({ name: 'my-package-create' })
+}
+
+function openEdit(pkg: Package): void {
+  router.push({ name: 'my-package-edit', params: { id: pkg.id } })
+}
+
+async function deletePackage(pkg: Package): Promise<void> {
+  if (!confirm(t('admin.packages.confirmDelete', { name: pkg.name }))) return
+
+  try {
+    await api.packages.delete(pkg.id)
+    packages.value = packages.value.filter(p => p.id !== pkg.id)
+    toast.success(t('admin.packages.packageDeleted'))
+  } catch (err: any) {
+    toast.error(t('admin.packages.deleteFailed') + ': ' + translateError(err))
+  }
+}
+
+// 格式化内存
+function formatMemory(mb: number): string {
+  if (!mb) return '0'
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+// 格式化磁盘（1024进制）
+function formatDisk(mb: number): string {
+  if (!mb) return '0'
+  if (mb >= 1024) {
+    const gb = mb / 1024
+    return gb % 1 === 0 ? gb.toFixed(0) + ' GB' : gb.toFixed(1) + ' GB'
+  }
+  return mb + ' MB'
+}
+
+// 好友共享功能已禁用，以下函数保留但不使用
+// @ts-ignore - 好友共享功能已禁用
+
+// 打开共享弹窗
+async function openShareModal(pkg: Package): Promise<void> {
+  currentPackageId.value = pkg.id
+  currentPackage.value = pkg
+  selectedFriendId.value = null
+  friendSearchQuery.value = ''
+  selectedQuotaMultiplier.value = 1  // 重置为默认值
+  selectedMaxInstances.value = null
+  showShareModal.value = true
+  // 预加载共享列表，用于过滤已共享的好友
+  await loadShares(pkg.id)
+}
+
+// @ts-ignore - 好友共享功能已禁用
+ 
+// 共享套餐给好友
+async function sharePackage(): Promise<void> {
+  if (!currentPackageId.value || !selectedFriendId.value) return
+
+  shareLoading.value = true
+  try {
+    await api.packages.share(
+      currentPackageId.value,
+      selectedFriendId.value,
+      selectedQuotaMultiplier.value,
+      selectedMaxInstances.value
+    )
+    toast.success(t('resources.packages.shareSuccess'))
+    showShareModal.value = false
+    await loadShares(currentPackageId.value)
+  } catch (err: any) {
+    toast.error(err.message || t('resources.packages.shareFailed'))
+  } finally {
+    shareLoading.value = false
+  }
+}
+
+// @ts-ignore - 好友共享功能已禁用
+ 
+// 加载共享列表
+async function loadShares(packageId: number): Promise<void> {
+  sharesLoading.value = true
+  try {
+    const res = await api.packages.getShares(packageId)
+    shares.value = res.shares || []
+    packageQuota.value = res.packageQuota || null
+  } catch (err) {
+    console.error('加载共享列表失败:', err)
+    shares.value = []
+    packageQuota.value = null
+  } finally {
+    sharesLoading.value = false
+  }
+}
+
+// @ts-ignore - 好友共享功能已禁用
+ 
+// 取消共享
+async function unsharePackage(sharedToId: number): Promise<void> {
+  if (!currentPackageId.value) return
+  if (!confirm(t('resources.packages.confirmUnshare'))) return
+
+  try {
+    await api.packages.unshare(currentPackageId.value, sharedToId)
+    toast.success(t('resources.packages.unshareSuccess'))
+    await loadShares(currentPackageId.value)
+  } catch (err: any) {
+    toast.error(err.message || t('resources.packages.unshareFailed'))
+  }
+}
+
+// 格式化时间
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+// @ts-ignore - 好友共享功能已禁用
+ 
+// 打开编辑配额弹窗
+function openEditQuotaModal(share: typeof shares.value[0]): void {
+  editingShare.value = share
+  editQuotaMultiplier.value = share.quotaMultiplier
+  editMaxInstances.value = share.maxInstances
+  showEditQuotaModal.value = true
+}
+
+// @ts-ignore - 好友共享功能已禁用
+ 
+// 保存编辑的配额
+async function saveEditQuota(): Promise<void> {
+  if (!currentPackageId.value || !editingShare.value) return
+
+  editQuotaLoading.value = true
+  try {
+    await api.packages.updateShareQuota(
+      currentPackageId.value,
+      editingShare.value.id,
+      editQuotaMultiplier.value,
+      editMaxInstances.value
+    )
+    toast.success(t('resources.packages.quotaUpdated'))
+    showEditQuotaModal.value = false
+    await loadShares(currentPackageId.value)
+  } catch (err: any) {
+    toast.error(err.message || t('resources.packages.quotaUpdateFailed'))
+  } finally {
+    editQuotaLoading.value = false
+  }
+}
+
+// @ts-ignore - 好友共享功能已禁用
+ 
+// 计算使用量百分比
+function getUsagePercent(share: typeof shares.value[0], type: 'cpu' | 'memory' | 'instances'): number {
+  if (!share.usage || !packageQuota.value) return 0
+  
+  if (type === 'instances') {
+    if (share.maxInstances === null) return 0
+    return Math.min(100, (share.usage.instanceCount / share.maxInstances) * 100)
+  }
+  
+  if (share.quotaMultiplier === null) return 0
+  
+  if (type === 'cpu') {
+    const maxCpu = Math.floor(packageQuota.value.cpuMax * share.quotaMultiplier)
+    return Math.min(100, (share.usage.totalCpu / maxCpu) * 100)
+  }
+  
+  const maxMemory = Math.floor(packageQuota.value.memoryMax * share.quotaMultiplier)
+  return Math.min(100, (share.usage.totalMemory / maxMemory) * 100)
+}
+
+// 方案管理相关
+interface PackagePlan {
+  id: number
+  name: string
+  description: string | null
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: string
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  monthlyPrice: number
+  isActive: boolean
+  isSoldOut: boolean
+  sortOrder: number
+  slaGuarantee: number | null
+}
+
+type PackagePlanStatus = 'active' | 'soldOut' | 'inactive'
+
+const showPlansModal = ref<boolean>(false)
+const plansPackage = ref<Package | null>(null)
+const plans = ref<PackagePlan[]>([])
+const plansLoading = ref<boolean>(false)
+const showPlanFormModal = ref<boolean>(false)
+const editingPlan = ref<PackagePlan | null>(null)
+const planFormLoading = ref<boolean>(false)
+
+const planForm = ref({
+  name: '',
+  description: '',
+  cpu: 100,
+  memory: 512,
+  disk: 5120,
+  portLimit: 3,
+  snapshotLimit: 3,
+  swapSize: 0,
+  siteLimit: 1,
+  trafficLimit: 1,
+  trafficLimitSpeed: 10, // Mbps
+  price: 0,
+  billingCycle: 1,  // 计费周期（月），默认月付
+  status: 'active' as PackagePlanStatus,
+  sortOrder: 0,
+  slaGuarantee: null as number | null
+})
+
+const planStatusOptions = computed(() => [
+  { value: 'active' as PackagePlanStatus, label: t('resources.plans.statusActive'), description: t('resources.plans.statusActiveHint') },
+  { value: 'soldOut' as PackagePlanStatus, label: t('resources.plans.statusSoldOut'), description: t('resources.plans.statusSoldOutHint') },
+  { value: 'inactive' as PackagePlanStatus, label: t('resources.plans.statusInactive'), description: t('resources.plans.statusInactiveHint') }
+])
+
+const selectedPlanStatusOption = computed(() =>
+  planStatusOptions.value.find(option => option.value === planForm.value.status) || planStatusOptions.value[0]
+)
+
+function getPlanStatus(plan: PackagePlan): PackagePlanStatus {
+  if (!plan.isActive) return 'inactive'
+  if (plan.isSoldOut) return 'soldOut'
+  return 'active'
+}
+
+function getPlanStatusLabel(plan: PackagePlan): string {
+  const status = getPlanStatus(plan)
+  if (status === 'soldOut') return t('resources.plans.statusSoldOut')
+  if (status === 'inactive') return t('resources.plans.statusInactive')
+  return t('resources.plans.statusActive')
+}
+
+function getPlanStatusBadgeClass(plan: PackagePlan): string {
+  const status = getPlanStatus(plan)
+  if (status === 'soldOut') {
+    return themeStore.isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-50 text-red-700'
+  }
+  if (status === 'inactive') {
+    return themeStore.isDark ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'
+  }
+  return 'badge-success'
+}
+
+function getPlanStatusSegmentClass(status: PackagePlanStatus): string {
+  const selected = planForm.value.status === status
+
+  if (!selected) {
+    return themeStore.isDark
+      ? 'text-gray-400 hover:bg-gray-800 hover:text-gray-200'
+      : 'text-gray-500 hover:bg-white hover:text-gray-900'
+  }
+
+  if (status === 'active') {
+    return themeStore.isDark
+      ? 'bg-emerald-500/15 text-emerald-300 shadow-sm ring-1 ring-emerald-500/30'
+      : 'bg-white text-emerald-700 shadow-sm ring-1 ring-emerald-200'
+  }
+
+  if (status === 'soldOut') {
+    return themeStore.isDark
+      ? 'bg-amber-500/15 text-amber-300 shadow-sm ring-1 ring-amber-500/30'
+      : 'bg-white text-amber-700 shadow-sm ring-1 ring-amber-200'
+  }
+
+  return themeStore.isDark
+    ? 'bg-gray-700 text-gray-200 shadow-sm ring-1 ring-gray-600'
+    : 'bg-white text-gray-700 shadow-sm ring-1 ring-gray-200'
+}
+
+function getPlanStatusDotClass(status: PackagePlanStatus): string {
+  if (status === 'active') {
+    return themeStore.isDark ? 'bg-emerald-300' : 'bg-emerald-500'
+  }
+  if (status === 'soldOut') {
+    return themeStore.isDark ? 'bg-amber-300' : 'bg-amber-500'
+  }
+  return themeStore.isDark ? 'bg-gray-400' : 'bg-gray-500'
+}
+
+// 计费周期选项（单位：月）- 非管理员只能选择月付
+const billingCycleOptions = computed(() => {
+  // 非管理员只能选择月付
+  if (!authStore.isAdmin) {
+    return [{ value: 1, label: t('resources.plans.monthly') }]
+  }
+  // 管理员可以选择所有周期
+  return [
+    { value: 1, label: t('resources.plans.monthly') },
+    { value: 3, label: t('resources.plans.quarterly') },
+    { value: 6, label: t('resources.plans.semiAnnual') },
+    { value: 12, label: t('resources.plans.yearly') }
+  ]
+})
+
+function normalizePlanPriceCents(value: unknown): number | null {
+  const price = Number(value)
+  if (!Number.isFinite(price) || price < 0 || price > MAX_PACKAGE_PLAN_PRICE) {
+    return null
+  }
+
+  const cents = price * 100
+  if (Math.abs(cents - Math.round(cents)) >= 1e-8) {
+    return null
+  }
+
+  const roundedCents = Math.round(cents)
+  return roundedCents <= MAX_PACKAGE_PLAN_PRICE_CENTS ? roundedCents : null
+}
+
+async function openPlansModal(pkg: Package): Promise<void> {
+  plansPackage.value = pkg
+  showPlansModal.value = true
+  await loadPlans(pkg.id)
+}
+
+async function loadPlans(packageId: number): Promise<void> {
+  plansLoading.value = true
+  try {
+    const res = await api.packages.getPlans(packageId)
+    plans.value = res.plans || []
+  } catch (err) {
+    console.error('加载方案列表失败:', err)
+    plans.value = []
+  } finally {
+    plansLoading.value = false
+  }
+}
+
+function openCreatePlanModal(): void {
+  editingPlan.value = null
+  planForm.value = {
+    name: '',
+    description: '',
+    cpu: plansPackage.value?.cpu_max || 100,
+    memory: plansPackage.value?.memory_max || 512,
+    disk: plansPackage.value?.disk_max || 5120,
+    portLimit: 3,
+    snapshotLimit: 3,
+    swapSize: 0,
+    siteLimit: 1,
+    trafficLimit: 1,
+    trafficLimitSpeed: 10, // Mbps
+    price: 0,
+    billingCycle: 1,  // 默认月付
+    status: 'active',
+    sortOrder: plans.value.length,
+    slaGuarantee: null
+  }
+  showPlanFormModal.value = true
+}
+
+function openEditPlanModal(plan: PackagePlan): void {
+  editingPlan.value = plan
+  planForm.value = {
+    name: plan.name,
+    description: plan.description || '',
+    cpu: plan.cpu,
+    memory: plan.memory,
+    disk: plan.disk,
+    portLimit: plan.portLimit,
+    snapshotLimit: plan.snapshotLimit,
+    swapSize: plan.swapSize,
+    siteLimit: plan.siteLimit,
+    trafficLimit: bytesToGB(plan.trafficLimit),
+    trafficLimitSpeed: bytesToMbps(plan.trafficLimitSpeed),
+    price: plan.price / 100,
+    billingCycle: plan.billingCycle,
+    status: getPlanStatus(plan),
+    sortOrder: plan.sortOrder,
+    slaGuarantee: plan.slaGuarantee
+  }
+  showPlanFormModal.value = true
+}
+
+function gbToBytes(gb: string | number): string {
+  if (gb === '' || gb === null || gb === undefined) return ''
+  try {
+    const gbNum = typeof gb === 'string' ? parseFloat(gb) : gb
+    if (isNaN(gbNum) || gbNum <= 0) return ''
+    // 使用普通数学运算支持小数，然后转为BigInt字符串
+    const bytes = Math.floor(gbNum * 1024 * 1024 * 1024)
+    return bytes.toString()
+  } catch {
+    return ''
+  }
+}
+
+// Mbps 转换为字节数（后端按 bytes / (1024*1024) = Mbit 计算）
+function mbpsToBytes(mbps: string | number): string {
+  if (mbps === '' || mbps === null || mbps === undefined) return ''
+  try {
+    const mbpsNum = typeof mbps === 'string' ? parseFloat(mbps) : mbps
+    if (isNaN(mbpsNum) || mbpsNum <= 0) return ''
+    // 后端计算: bytes / (1024 * 1024) = Mbit，所以 bytes = Mbit * 1024 * 1024
+    const bytes = Math.floor(mbpsNum * 1024 * 1024)
+    return bytes.toString()
+  } catch {
+    return ''
+  }
+}
+
+async function savePlan(): Promise<void> {
+  if (!plansPackage.value || !planForm.value.name.trim()) return
+
+  const priceCents = normalizePlanPriceCents(planForm.value.price)
+  if (priceCents === null) {
+    toast.error(t('resources.plans.priceRangeError', { max: MAX_PACKAGE_PLAN_PRICE.toFixed(2) }))
+    return
+  }
+  planForm.value.price = priceCents / 100
+
+  planFormLoading.value = true
+  try {
+    const data = {
+      name: planForm.value.name.trim(),
+      description: planForm.value.description.trim() || undefined,
+      cpu: planForm.value.cpu,
+      memory: planForm.value.memory,
+      disk: planForm.value.disk,
+      portLimit: planForm.value.portLimit,
+      snapshotLimit: planForm.value.snapshotLimit,
+      backupLimit: 0,
+      siteLimit: planForm.value.siteLimit,
+      swapSize: planForm.value.swapSize,
+      trafficLimit: gbToBytes(planForm.value.trafficLimit) || '0',
+      trafficLimitSpeed: mbpsToBytes(planForm.value.trafficLimitSpeed) || '0',
+      price: priceCents,
+      billingCycle: planForm.value.billingCycle,
+      isActive: planForm.value.status !== 'inactive',
+      isSoldOut: planForm.value.status === 'soldOut',
+      sortOrder: planForm.value.sortOrder,
+      slaGuarantee: planForm.value.slaGuarantee ?? undefined
+    }
+
+    if (editingPlan.value) {
+      await api.packages.updatePlan(plansPackage.value.id, editingPlan.value.id, data)
+      toast.success(t('resources.plans.updateSuccess'))
+    } else {
+      await api.packages.createPlan(plansPackage.value.id, data)
+      toast.success(t('resources.plans.createSuccess'))
+    }
+    showPlanFormModal.value = false
+    await loadPlans(plansPackage.value.id)
+  } catch (err: any) {
+    toast.error(translateError(err) || t('resources.plans.saveFailed'))
+  } finally {
+    planFormLoading.value = false
+  }
+}
+
+async function deletePlan(plan: PackagePlan): Promise<void> {
+  if (!plansPackage.value) return
+  if (!confirm(t('resources.plans.confirmDelete', { name: plan.name }))) return
+
+  try {
+    await api.packages.deletePlan(plansPackage.value.id, plan.id)
+    toast.success(t('resources.plans.deleteSuccess'))
+    await loadPlans(plansPackage.value.id)
+  } catch (err: any) {
+    toast.error(err.message || t('resources.plans.deleteFailed'))
+  }
+}
+
+function formatPrice(cents: number): string {
+  return (cents / 100).toFixed(2)
+}
+
+function getBillingCycleLabel(months: number): string {
+  const opt = billingCycleOptions.value.find(o => o.value === months)
+  return opt ? opt.label : `${months} ${t('resources.plans.months')}`
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ t('resources.packages.title') }}</h1>
+        <p class="page-description">{{ t('resources.packages.description') }}</p>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 sm:gap-4">
+      <div class="flex items-center gap-3 flex-wrap">
+        <!-- 搜索框 -->
+        <div class="relative flex-1 sm:flex-none sm:w-48">
+          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            v-model="searchQuery"
+            type="text"
+            class="input pl-10 pr-8 w-full"
+            :placeholder="t('resources.packages.searchPlaceholder')"
+            @input="onSearchChange"
+          />
+          <button
+            v-if="searchQuery"
+            class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded transition-colors"
+            :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-700' : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'"
+            @click="clearSearch"
+          >
+            <svg 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="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <!-- 管理员专用：套餐范围切换器 -->
+        <div v-if="isAdmin" class="inline-flex rounded-lg p-1" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+          <button
+            class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
+            :class="scope === 'mine' 
+              ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm') 
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+            @click="switchScope('mine')"
+          >
+            {{ t('resources.packages.mine') }}
+          </button>
+          <button
+            class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
+            :class="scope === 'hosted' 
+              ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm') 
+              : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+            @click="switchScope('hosted')"
+          >
+            {{ t('resources.packages.hosted') }}
+          </button>
+        </div>
+        <!-- 托管套餐用户ID筛选 -->
+        <div v-if="isAdmin && scope === 'hosted'" class="relative sm:w-36">
+          <input
+            v-model="filterUserId"
+            type="text"
+            :placeholder="t('resources.packages.filterByUserId')"
+            class="input pl-9 w-full"
+          />
+          <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </div>
+      </div>
+      <button v-if="scope === 'mine'" class="btn-primary" @click="openCreate">
+        <svg 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="M12 4v16m8-8H4" />
+        </svg>
+        {{ t('resources.packages.create') }}
+      </button>
+    </div>
+
+    <!-- 套餐列表 -->
+    <SkeletonLoader v-if="loading" type="list" />
+
+    <div v-else-if="filteredPackages.length === 0" class="card p-12 text-center">
+      <svg
+        class="w-12 h-12 mx-auto mb-4"
+        :class="themeStore.isDark ? 'text-gray-700' : 'text-gray-300'"
+        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+      <template v-if="searchQuery">
+        <p class="text-themed-secondary">{{ t('resources.packages.noSearchResults') }}</p>
+        <button class="text-xs text-primary hover:underline mt-2" @click="clearSearch">{{ t('resources.packages.clearSearch') }}</button>
+      </template>
+      <template v-else>
+        <p class="text-themed-secondary">{{ t('resources.packages.noPackages') }}</p>
+        <p class="text-xs text-themed-muted mt-2">{{ t('resources.packages.noPackagesHint') }}</p>
+      </template>
+    </div>
+
+    <template v-else>
+      <div class="card overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr :class="themeStore.isDark ? 'bg-gray-800/50 border-b border-gray-700' : 'bg-gray-50 border-b border-gray-200'">
+                <th class="text-left px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('admin.packages.name') }}</th>
+                <th v-if="isAdmin && scope === 'hosted'" class="text-left px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('resources.packages.owner') }}</th>
+                <th class="text-left px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('admin.packages.status') }}</th>
+                <th class="text-left px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('resources.packages.networkModeColumn') }}</th>
+                <th class="text-left px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('resources.packages.instanceTypeColumn') }}</th>
+                <th class="text-right px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('resources.packages.trafficMultiplierColumn') }}</th>
+                <th class="text-left px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('resources.packages.hostColumn') }}</th>
+                <th class="text-right px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('resources.packages.instanceColumn') }}</th>
+                <th v-if="scope === 'mine'" class="text-right px-4 py-3 font-medium text-themed-muted whitespace-nowrap">{{ t('common.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="pkg in paginatedPackages"
+                :key="pkg.id"
+                class="border-b transition-colors"
+                :class="[
+                  themeStore.isDark ? 'border-gray-800 hover:bg-gray-800/30' : 'border-gray-100 hover:bg-gray-50',
+                  pkg.active !== 1 ? 'opacity-60' : ''
+                ]"
+              >
+                <!-- 套餐名称 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex items-center gap-2 min-w-0">
+                    <span class="font-medium truncate" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">{{ pkg.name }}</span>
+                    <span
+                      v-if="isPackagePublic(pkg)"
+                      class="shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 bg-blue-50 text-blue-700 ring-blue-200 dark:bg-blue-500/15 dark:text-blue-300 dark:ring-blue-500/30"
+                    >
+                      {{ t('resources.packages.publicBadge') }}
+                    </span>
+                  </div>
+                  <div v-if="pkg.description" class="text-xs text-themed-muted mt-0.5 max-w-48 truncate">{{ pkg.description }}</div>
+                </td>
+                <!-- 托管套餐所有者信息 -->
+                <td v-if="isAdmin && scope === 'hosted'" class="px-4 py-3 whitespace-nowrap">
+                  <div v-if="pkg.owner" class="flex items-center gap-2">
+                    <UserAvatar :avatar-style="pkg.owner.avatarStyle" :badge-id="pkg.owner.avatarBadgeId || null" :size="28" :username="pkg.owner.username" />
+                    <div>
+                      <div class="text-sm font-medium text-themed">{{ pkg.owner.username }}</div>
+                      <div class="text-xs text-themed-muted">UID: {{ pkg.owner.id }}</div>
+                    </div>
+                  </div>
+                  <span v-else class="text-themed-muted">-</span>
+                </td>
+                <!-- 状态 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span v-if="pkg.active === 1" class="badge badge-success text-xs">{{ t('admin.packages.active') }}</span>
+                  <span v-else class="badge badge-default text-xs" :title="t('admin.packages.archivedHint')">{{ t('admin.packages.inactive') }}</span>
+                </td>
+                <!-- 网络模式 -->
+                <td class="px-4 py-3 whitespace-nowrap" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">
+                  {{ getPackageNetworkModeLabel(pkg) }}
+                </td>
+                <!-- 实例类型 -->
+                <td class="px-4 py-3 whitespace-nowrap" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">
+                  {{ getPackageInstanceTypeLabel(pkg) }}
+                </td>
+                <!-- 流量倍率 -->
+                <td
+                  class="px-4 py-3 text-right font-mono whitespace-nowrap"
+                  :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'"
+                  :title="getPackageTrafficMultiplierTitle(pkg)"
+                >
+                  {{ getPackageTrafficMultiplierLabel(pkg) }}
+                </td>
+                <!-- 绑定宿主机 -->
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <span class="text-xs text-themed-muted max-w-32 truncate block">{{ getHostNames(pkg) }}</span>
+                </td>
+                <!-- 套餐下实例数 -->
+                <td class="px-4 py-3 text-right font-mono whitespace-nowrap" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">
+                  {{ pkg.instance_count || 0 }}
+                </td>
+                <!-- 操作 -->
+                <td v-if="scope === 'mine'" class="px-4 py-3">
+                  <div class="flex items-center justify-end gap-1">
+                    <!-- 分享链接 -->
+                    <button
+                      type="button"
+                      class="p-1.5 transition-colors rounded"
+                      :class="themeStore.isDark ? 'text-gray-500 hover:text-blue-400 hover:bg-gray-800' : 'text-gray-400 hover:text-blue-600 hover:bg-gray-100'"
+                      :title="t('resources.packages.copyShareLink')"
+                      @click="copyShareLink(pkg)"
+                    >
+                      <svg 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.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+                      </svg>
+                    </button>
+                    <button
+                      class="p-1.5 transition-colors rounded"
+                      :class="themeStore.isDark ? 'text-gray-500 hover:text-indigo-400 hover:bg-gray-800' : 'text-gray-400 hover:text-indigo-600 hover:bg-gray-100'"
+                      :title="t('resources.plans.manage')"
+                      @click="openPlansModal(pkg)"
+                    >
+                      <svg 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                      </svg>
+                    </button>
+                    <!-- 好友共享功能已禁用，移除共享按钮 -->
+                    <button
+                      class="p-1.5 transition-colors rounded"
+                      :class="themeStore.isDark ? 'text-gray-500 hover:text-teal-400 hover:bg-gray-800' : 'text-gray-400 hover:text-teal-600 hover:bg-gray-100'"
+                      :title="t('quotaRelease.title')"
+                      @click="openQuotaReleaseModal(pkg)"
+                    >
+                      <svg 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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                      </svg>
+                    </button>
+                    <!-- 好友共享功能已禁用，移除查看共享列表按钮 -->
+                    <button
+                      class="p-1.5 transition-colors rounded"
+                      :class="themeStore.isDark ? 'text-gray-500 hover:text-gray-300 hover:bg-gray-800' : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'"
+                      :title="t('common.edit')"
+                      @click="openEdit(pkg)"
+                    >
+                      <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
+                    <button
+                      class="p-1.5 transition-colors rounded"
+                      :class="themeStore.isDark ? 'text-gray-500 hover:text-error hover:bg-gray-800' : 'text-gray-400 hover:text-error hover:bg-gray-100'"
+                      :title="t('common.delete')"
+                      @click="deletePackage(pkg)"
+                    >
+                      <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 分页控件 -->
+        <div v-if="packagesTotalPages > 1" class="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 text-sm text-themed-muted border-t" :class="themeStore.isDark ? 'border-gray-800' : 'border-gray-100'">
+          <span>{{ t('common.total') }} {{ filteredPackages.length }} {{ t('common.items') }}</span>
+          <div class="flex items-center gap-1 flex-wrap justify-center">
+            <button :disabled="packagesPage <= 1" class="btn-ghost btn-sm" :class="packagesPage <= 1 ? 'cursor-not-allowed' : ''" @click="goToPackagesPage(packagesPage - 1)">{{ t('instance.prevPage') }}</button>
+            <template v-for="(p, idx) in packagesPageNumbers" :key="idx">
+              <span v-if="p === '...'" class="px-2 py-1 text-themed-muted">…</span>
+              <button
+                v-else
+                class="min-w-[32px] px-2 py-1 rounded transition-colors"
+                :class="[
+                  p === packagesPage
+                    ? (themeStore.isDark ? 'bg-blue-600 text-white' : 'bg-blue-500 text-white')
+                    : (themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100')
+                ]"
+                @click="goToPackagesPage(p)"
+              >
+                {{ p }}
+              </button>
+            </template>
+            <button :disabled="packagesPage >= packagesTotalPages" class="btn-ghost btn-sm" :class="packagesPage >= packagesTotalPages ? 'cursor-not-allowed' : ''" @click="goToPackagesPage(packagesPage + 1)">{{ t('instance.nextPage') }}</button>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 共享套餐弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showShareModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showShareModal = false"></div>
+          <div class="modal-content max-w-lg">
+            <div class="modal-header">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-blue-500/20' : 'bg-blue-100'">
+                  <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="modal-title">{{ t('resources.packages.shareToFriend') }}</h3>
+                  <p v-if="currentPackage" class="text-xs text-themed-muted mt-0.5">
+                    {{ currentPackage.name }} · {{ currentPackage.cpu_max }}% CPU · {{ formatMemory(currentPackage.memory_max) }}
+                  </p>
+                </div>
+              </div>
+              <button class="p-1.5 rounded-lg transition-colors" :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'" @click="showShareModal = false">
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body space-y-4">
+              <!-- 搜索框 -->
+              <div class="relative">
+                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <input
+                  v-model="friendSearchQuery"
+                  type="text"
+                  class="input pl-10"
+                  :placeholder="t('resources.packages.searchFriend')"
+                />
+              </div>
+
+              <!-- 好友列表 -->
+              <div v-if="sharesLoading" class="py-8">
+                <SkeletonLoader type="list" />
+              </div>
+              <div v-else-if="friends.length === 0" class="text-center py-10">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                  <svg class="w-8 h-8" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </div>
+                <p class="text-themed-secondary font-medium">{{ t('resources.packages.noFriends') }}</p>
+                <p class="text-xs text-themed-muted mt-1">{{ t('resources.packages.noFriendsHint') }}</p>
+              </div>
+              <div v-else-if="availableFriends.length === 0" class="text-center py-10">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-green-500/10' : 'bg-green-50'">
+                  <svg class="w-8 h-8" :class="themeStore.isDark ? 'text-green-400' : 'text-green-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <p class="text-themed-secondary font-medium">{{ t('resources.packages.allFriendsShared') }}</p>
+                <p class="text-xs text-themed-muted mt-1">{{ t('resources.packages.noAvailableFriends') }}</p>
+              </div>
+              <div v-else class="space-y-2 max-h-56 overflow-y-auto">
+                <p class="text-xs text-themed-muted mb-2">{{ t('resources.packages.selectToShare') }}</p>
+                <button
+                  v-for="friend in availableFriends"
+                  :key="friend.id"
+                  type="button"
+                  class="w-full flex items-center gap-3 p-3 rounded-xl border transition-all"
+                  :class="[
+                    selectedFriendId === friend.id
+                      ? themeStore.isDark
+                        ? 'border-blue-500 bg-blue-500/10 ring-1 ring-blue-500/30'
+                        : 'border-blue-500 bg-blue-50 ring-1 ring-blue-200'
+                      : themeStore.isDark
+                        ? 'border-gray-700 hover:border-gray-600 hover:bg-gray-800/50'
+                        : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
+                  ]"
+                  @click="selectedFriendId = friend.id"
+                >
+                  <UserAvatar :username="friend.username" :email="friend.email" :avatar-style="friend.avatarStyle" :badge-id="friend.avatarBadgeId || null" :size="40" />
+                  <div class="flex-1 text-left min-w-0">
+                    <div class="font-medium truncate" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">{{ friend.username }}</div>
+                    <div v-if="friend.email" class="text-xs text-themed-muted truncate">{{ friend.email }}</div>
+                  </div>
+                  <div
+                    class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors"
+                    :class="[
+                      selectedFriendId === friend.id
+                        ? 'border-blue-500 bg-blue-500'
+                        : themeStore.isDark
+                          ? 'border-gray-600'
+                          : 'border-gray-300'
+                    ]"
+                  >
+                    <svg v-if="selectedFriendId === friend.id" class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                  </div>
+                </button>
+              </div>
+
+              <!-- 配额设置 -->
+              <Transition name="fade">
+                <div v-if="selectedFriendId" class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-800/50 border border-gray-700' : 'bg-gray-50 border border-gray-200'">
+                  <div class="flex items-center gap-2 mb-4">
+                    <svg class="w-4 h-4" :class="themeStore.isDark ? 'text-amber-400' : 'text-amber-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <h4 class="text-sm font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">
+                      {{ t('resources.packages.quotaSettings') }}
+                    </h4>
+                  </div>
+                  <div class="grid grid-cols-2 gap-4">
+                    <div>
+                      <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.packages.quotaMultiplier') }}</label>
+                      <select v-model="selectedQuotaMultiplier" class="input text-sm w-full">
+                        <option v-for="opt in quotaMultiplierOptions" :key="String(opt.value)" :value="opt.value">
+                          {{ opt.label }}
+                        </option>
+                      </select>
+                      <p class="text-xs text-themed-muted mt-1.5 leading-relaxed">{{ t('resources.packages.quotaMultiplierHint') }}</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.packages.maxInstances') }}</label>
+                      <select v-model="selectedMaxInstances" class="input text-sm w-full">
+                        <option v-for="opt in maxInstancesOptions" :key="String(opt.value)" :value="opt.value">
+                          {{ opt.label }}
+                        </option>
+                      </select>
+                      <p class="text-xs text-themed-muted mt-1.5 leading-relaxed">{{ t('resources.packages.maxInstancesHint') }}</p>
+                    </div>
+                  </div>
+                </div>
+              </Transition>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showShareModal = false">{{ t('common.cancel') }}</button>
+              <button
+                :disabled="!selectedFriendId || shareLoading || availableFriends.length === 0"
+                class="btn-primary"
+                @click="sharePackage"
+              >
+                <span v-if="shareLoading" class="loading-spinner w-4 h-4"></span>
+                <template v-else>
+                  <svg 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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+                  </svg>
+                  {{ t('resources.packages.confirmShare') }}
+                </template>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 共享列表弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showSharesModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showSharesModal = false"></div>
+          <div class="modal-content max-w-xl">
+            <div class="modal-header">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-purple-500/20' : 'bg-purple-100'">
+                  <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-purple-400' : 'text-purple-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </div>
+                <div>
+                  <div class="flex items-center gap-2">
+                    <h3 class="modal-title">{{ t('resources.packages.sharesList') }}</h3>
+                    <span v-if="shares.length > 0" class="text-xs px-2 py-0.5 rounded-full" :class="themeStore.isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600'">
+                      {{ shares.length }}
+                    </span>
+                  </div>
+                  <p v-if="currentPackage" class="text-xs text-themed-muted mt-0.5">
+                    {{ currentPackage.name }} · {{ currentPackage.cpu_max }}% CPU · {{ formatMemory(currentPackage.memory_max) }}
+                  </p>
+                </div>
+              </div>
+              <button class="p-1.5 rounded-lg transition-colors" :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'" @click="showSharesModal = false">
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body">
+              <SkeletonLoader v-if="sharesLoading" type="list" />
+              <div v-else-if="shares.length === 0" class="text-center py-12">
+                <div class="w-20 h-20 mx-auto mb-4 rounded-2xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                  <svg class="w-10 h-10" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                </div>
+                <p class="text-themed-secondary font-medium">{{ t('resources.packages.noShares') }}</p>
+                <p class="text-xs text-themed-muted mt-1">{{ t('resources.packages.noSharesHint') }}</p>
+              </div>
+              <div v-else class="space-y-3 max-h-96 overflow-y-auto">
+                <div
+                  v-for="share in shares"
+                  :key="share.id"
+                  class="rounded-xl border p-4 transition-colors"
+                  :class="themeStore.isDark ? 'border-gray-700 bg-gray-800/30' : 'border-gray-200 bg-gray-50/50'"
+                >
+                  <!-- 用户信息和操作按钮 -->
+                  <div class="flex items-center gap-3 mb-3">
+                    <UserAvatar :username="share.sharedToUsername" :avatar-style="share.sharedToAvatarStyle || ''" :badge-id="share.sharedToAvatarBadgeId || null" :size="44" />
+                    <div class="flex-1 min-w-0">
+                      <div class="font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                        {{ share.sharedToUsername }}
+                      </div>
+                      <div class="text-xs text-themed-muted flex items-center gap-1">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        {{ formatDate(share.createdAt) }}
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-1">
+                      <button
+                        class="p-2 rounded-lg transition-colors"
+                        :class="themeStore.isDark ? 'hover:bg-gray-700 text-gray-400 hover:text-blue-400' : 'hover:bg-gray-200 text-gray-500 hover:text-blue-600'"
+                        :title="t('resources.packages.editQuota')"
+                        @click="openEditQuotaModal(share)"
+                      >
+                        <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                        </svg>
+                      </button>
+                      <button
+                        class="p-2 rounded-lg transition-colors"
+                        :class="themeStore.isDark ? 'hover:bg-red-500/20 text-gray-400 hover:text-red-400' : 'hover:bg-red-50 text-gray-500 hover:text-red-500'"
+                        :title="t('resources.packages.unshare')"
+                        @click="unsharePackage(share.sharedToId)"
+                      >
+                        <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+
+                  <!-- 配额信息 -->
+                  <div class="grid grid-cols-2 gap-3 mb-3">
+                    <div class="rounded-lg px-3 py-2" :class="themeStore.isDark ? 'bg-gray-900/50' : 'bg-white'">
+                      <div class="text-xs text-themed-muted mb-0.5">{{ t('resources.packages.quotaMultiplier') }}</div>
+                      <div class="font-medium text-sm" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                        {{ share.quotaMultiplier !== null ? share.quotaMultiplier + 'x' : t('resources.packages.noLimit') }}
+                      </div>
+                    </div>
+                    <div class="rounded-lg px-3 py-2" :class="themeStore.isDark ? 'bg-gray-900/50' : 'bg-white'">
+                      <div class="text-xs text-themed-muted mb-0.5">{{ t('resources.packages.maxInstances') }}</div>
+                      <div class="font-medium text-sm" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+                        {{ share.maxInstances !== null ? t('resources.packages.instanceUnit', { n: share.maxInstances }) : t('resources.packages.noLimit') }}
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 使用量进度条 -->
+                  <div v-if="share.usage" class="space-y-2">
+                    <div class="text-xs font-medium text-themed-muted">{{ t('resources.packages.usageStatus') }}</div>
+                    
+                    <!-- 实例数 -->
+                    <div v-if="share.maxInstances !== null" class="space-y-1">
+                      <div class="flex justify-between text-xs">
+                        <span class="text-themed-muted">{{ t('resources.packages.instanceCount') }}</span>
+                        <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">{{ share.usage.instanceCount }} / {{ share.maxInstances }}</span>
+                      </div>
+                      <div class="h-1.5 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'">
+                        <div
+                          class="h-full rounded-full transition-all"
+                          :class="getUsagePercent(share, 'instances') > 80 ? 'bg-amber-500' : themeStore.isDark ? 'bg-blue-500' : 'bg-blue-500'"
+                          :style="{ width: getUsagePercent(share, 'instances') + '%' }"
+                        ></div>
+                      </div>
+                    </div>
+
+                    <!-- CPU -->
+                    <div v-if="share.quotaMultiplier !== null && packageQuota" class="space-y-1">
+                      <div class="flex justify-between text-xs">
+                        <span class="text-themed-muted">CPU</span>
+                        <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">{{ share.usage.totalCpu }}% / {{ Math.floor(packageQuota.cpuMax * share.quotaMultiplier) }}%</span>
+                      </div>
+                      <div class="h-1.5 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'">
+                        <div
+                          class="h-full rounded-full transition-all"
+                          :class="getUsagePercent(share, 'cpu') > 80 ? 'bg-amber-500' : themeStore.isDark ? 'bg-green-500' : 'bg-green-500'"
+                          :style="{ width: getUsagePercent(share, 'cpu') + '%' }"
+                        ></div>
+                      </div>
+                    </div>
+
+                    <!-- 内存 -->
+                    <div v-if="share.quotaMultiplier !== null && packageQuota" class="space-y-1">
+                      <div class="flex justify-between text-xs">
+                        <span class="text-themed-muted">{{ t('admin.packages.memory') }}</span>
+                        <span :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-600'">{{ formatMemory(share.usage.totalMemory) }} / {{ formatMemory(Math.floor(packageQuota.memoryMax * share.quotaMultiplier)) }}</span>
+                      </div>
+                      <div class="h-1.5 rounded-full overflow-hidden" :class="themeStore.isDark ? 'bg-gray-700' : 'bg-gray-200'">
+                        <div
+                          class="h-full rounded-full transition-all"
+                          :class="getUsagePercent(share, 'memory') > 80 ? 'bg-amber-500' : themeStore.isDark ? 'bg-purple-500' : 'bg-purple-500'"
+                          :style="{ width: getUsagePercent(share, 'memory') + '%' }"
+                        ></div>
+                      </div>
+                    </div>
+
+                    <!-- 无限制时显示简单统计 -->
+                    <div v-if="share.quotaMultiplier === null && share.maxInstances === null" class="text-xs text-themed-muted">
+                      {{ t('resources.packages.currentUsage', { cpu: share.usage.totalCpu, memory: share.usage.totalMemory, instances: share.usage.instanceCount }) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-primary" @click="openShareModal(currentPackage!)">
+                <svg 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="M12 4v16m8-8H4" />
+                </svg>
+                {{ t('resources.packages.addShare') }}
+              </button>
+              <button class="btn-secondary" @click="showSharesModal = false">{{ t('common.close') }}</button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 编辑配额弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showEditQuotaModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showEditQuotaModal = false"></div>
+          <div class="modal-content max-w-md">
+            <div class="modal-header">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-amber-500/20' : 'bg-amber-100'">
+                  <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-amber-400' : 'text-amber-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="modal-title">{{ t('resources.packages.editQuota') }}</h3>
+                  <p v-if="editingShare" class="text-xs text-themed-muted mt-0.5">
+                    {{ t('resources.packages.editQuotaFor', { username: editingShare.sharedToUsername }) }}
+                  </p>
+                </div>
+              </div>
+              <button class="p-1.5 rounded-lg transition-colors" :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'" @click="showEditQuotaModal = false">
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body">
+              <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-800/50 border border-gray-700' : 'bg-gray-50 border border-gray-200'">
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.packages.quotaMultiplier') }}</label>
+                    <select v-model="editQuotaMultiplier" class="input text-sm w-full">
+                      <option v-for="opt in quotaMultiplierOptions" :key="String(opt.value)" :value="opt.value">
+                        {{ opt.label }}
+                      </option>
+                    </select>
+                    <p class="text-xs text-themed-muted mt-1.5 leading-relaxed">{{ t('resources.packages.quotaMultiplierHint') }}</p>
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.packages.maxInstances') }}</label>
+                    <select v-model="editMaxInstances" class="input text-sm w-full">
+                      <option v-for="opt in maxInstancesOptions" :key="String(opt.value)" :value="opt.value">
+                        {{ opt.label }}
+                      </option>
+                    </select>
+                    <p class="text-xs text-themed-muted mt-1.5 leading-relaxed">{{ t('resources.packages.maxInstancesHint') }}</p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 当前使用量提示 -->
+              <div v-if="editingShare?.usage" class="mt-4 rounded-lg p-3" :class="themeStore.isDark ? 'bg-blue-500/10 border border-blue-500/30' : 'bg-blue-50 border border-blue-200'">
+                <div class="flex items-start gap-2">
+                  <svg class="w-4 h-4 mt-0.5 flex-shrink-0" :class="themeStore.isDark ? 'text-blue-400' : 'text-blue-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <div class="text-xs" :class="themeStore.isDark ? 'text-blue-300' : 'text-blue-700'">
+                    {{ t('resources.packages.currentUsageInfo', { cpu: editingShare.usage.totalCpu, memory: editingShare.usage.totalMemory, instances: editingShare.usage.instanceCount }) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showEditQuotaModal = false">{{ t('common.cancel') }}</button>
+              <button :disabled="editQuotaLoading" class="btn-primary" @click="saveEditQuota">
+                <span v-if="editQuotaLoading" class="loading-spinner w-4 h-4"></span>
+                <template v-else>
+                  <svg 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="M5 13l4 4L19 7" />
+                  </svg>
+                  {{ t('common.save') }}
+                </template>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 配额释放弹窗 -->
+    <PackageQuotaReleaseModal
+      :visible="showQuotaReleaseModal"
+      :package-id="quotaReleasePackage?.id || 0"
+      :package-name="quotaReleasePackage?.name || ''"
+      @close="showQuotaReleaseModal = false"
+      @success="handleQuotaReleaseSuccess"
+    />
+
+
+    <!-- 方案管理弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showPlansModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showPlansModal = false"></div>
+          <div class="modal-content max-w-3xl">
+            <div class="modal-header">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-indigo-500/20' : 'bg-indigo-100'">
+                  <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-indigo-400' : 'text-indigo-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                  </svg>
+                </div>
+                <div>
+                  <div class="flex items-center gap-2">
+                    <h3 class="modal-title">{{ t('resources.plans.title') }}</h3>
+                    <span v-if="plans.length > 0" class="text-xs px-2 py-0.5 rounded-full" :class="themeStore.isDark ? 'bg-indigo-500/20 text-indigo-400' : 'bg-indigo-100 text-indigo-600'">
+                      {{ plans.length }}
+                    </span>
+                  </div>
+                  <p v-if="plansPackage" class="text-xs text-themed-muted mt-0.5">
+                    {{ plansPackage.name }} · {{ plansPackage.cpu_max }}% CPU · {{ formatMemory(plansPackage.memory_max) }}
+                  </p>
+                </div>
+              </div>
+              <button class="p-1.5 rounded-lg transition-colors" :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'" @click="showPlansModal = false">
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body">
+              <SkeletonLoader v-if="plansLoading" type="list" />
+              <div v-else-if="plans.length === 0" class="text-center py-12">
+                <div class="w-20 h-20 mx-auto mb-4 rounded-2xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                  <svg class="w-10 h-10" :class="themeStore.isDark ? 'text-gray-600' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  </svg>
+                </div>
+                <p class="text-themed-secondary font-medium">{{ t('resources.plans.noPlans') }}</p>
+                <p class="text-xs text-themed-muted mt-1">{{ t('resources.plans.noPlansHint') }}</p>
+              </div>
+              <div v-else class="space-y-3 max-h-96 overflow-y-auto">
+                <div
+                  v-for="plan in plans"
+                  :key="plan.id"
+                  class="rounded-xl border p-4 transition-colors"
+                  :class="[
+                    themeStore.isDark ? 'border-gray-700 bg-gray-800/30' : 'border-gray-200 bg-gray-50/50',
+                    getPlanStatus(plan) !== 'active' ? 'opacity-70' : ''
+                  ]"
+                >
+                  <div class="flex items-start justify-between gap-4">
+                    <div class="flex-1 min-w-0">
+                      <div class="flex items-center gap-2 mb-1">
+                        <span class="font-medium" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">{{ plan.name }}</span>
+                        <span class="badge text-xs" :class="getPlanStatusBadgeClass(plan)">{{ getPlanStatusLabel(plan) }}</span>
+                      </div>
+                      <p v-if="plan.description" class="text-xs text-themed-muted mb-2">{{ plan.description }}</p>
+                      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
+                        <div>
+                          <span class="text-themed-muted">{{ t('admin.packages.cpu') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ plan.cpu }}%</span>
+                        </div>
+                        <div>
+                          <span class="text-themed-muted">{{ t('admin.packages.memory') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatMemory(plan.memory) }}</span>
+                        </div>
+                        <div>
+                          <span class="text-themed-muted">{{ t('admin.packages.disk') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ formatDisk(plan.disk) }}</span>
+                        </div>
+                        <div>
+                          <span class="text-themed-muted">{{ t('resources.plans.price') }}:</span>
+                          <span class="ml-1 font-medium" :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">¥{{ formatPrice(plan.price) }}/{{ getBillingCycleLabel(plan.billingCycle) }}</span>
+                        </div>
+                      </div>
+                      <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs mt-2">
+                        <div>
+                          <span class="text-themed-muted">{{ t('resources.plans.portLimit') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ plan.portLimit }}</span>
+                        </div>
+                        <div>
+                          <span class="text-themed-muted">{{ t('resources.plans.snapshotLimit') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ plan.snapshotLimit }}</span>
+                        </div>
+                        <div v-if="plansPackage?.instance_type !== 'vm'">
+                          <span class="text-themed-muted">{{ t('resources.plans.swapSize') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ plan.swapSize > 0 ? `${plan.swapSize} MB` : '-' }}</span>
+                        </div>
+                        <div>
+                          <span class="text-themed-muted">{{ t('resources.plans.siteLimit') }}:</span>
+                          <span class="ml-1 font-mono" :class="themeStore.isDark ? 'text-gray-300' : 'text-gray-700'">{{ plan.siteLimit }}</span>
+                        </div>
+                      </div>
+                      <div v-if="plan.slaGuarantee !== null" class="mt-2 text-xs">
+                        <span class="text-themed-muted">SLA保证:</span>
+                        <span class="ml-1 font-medium" :class="themeStore.isDark ? 'text-green-400' : 'text-green-600'">{{ plan.slaGuarantee }}%</span>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-1 flex-shrink-0">
+                      <button
+                        class="p-2 rounded-lg transition-colors"
+                        :class="themeStore.isDark ? 'hover:bg-gray-700 text-gray-400 hover:text-blue-400' : 'hover:bg-gray-200 text-gray-500 hover:text-blue-600'"
+                        :title="t('common.edit')"
+                        @click="openEditPlanModal(plan)"
+                      >
+                        <svg 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                        </svg>
+                      </button>
+                      <button
+                        class="p-2 rounded-lg transition-colors"
+                        :class="themeStore.isDark ? 'hover:bg-red-500/20 text-gray-400 hover:text-red-400' : 'hover:bg-red-50 text-gray-500 hover:text-red-500'"
+                        :title="t('common.delete')"
+                        @click="deletePlan(plan)"
+                      >
+                        <svg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-primary" @click="openCreatePlanModal">
+                <svg 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="M12 4v16m8-8H4" />
+                </svg>
+                {{ t('resources.plans.add') }}
+              </button>
+              <button class="btn-secondary" @click="showPlansModal = false">{{ t('common.close') }}</button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 方案表单弹窗 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div v-if="showPlanFormModal" class="modal-overlay">
+          <div class="modal-backdrop" @click="showPlanFormModal = false"></div>
+          <div class="modal-content max-w-2xl">
+            <div class="modal-header">
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="themeStore.isDark ? 'bg-indigo-500/20' : 'bg-indigo-100'">
+                  <svg class="w-5 h-5" :class="themeStore.isDark ? 'text-indigo-400' : 'text-indigo-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="modal-title">{{ editingPlan ? t('resources.plans.edit') : t('resources.plans.create') }}</h3>
+                  <p v-if="plansPackage" class="text-xs text-themed-muted mt-0.5">{{ plansPackage.name }}</p>
+                </div>
+              </div>
+              <button class="p-1.5 rounded-lg transition-colors" :class="themeStore.isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'" @click="showPlanFormModal = false">
+                <svg class="w-5 h-5 text-themed-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="modal-body space-y-4 max-h-[70vh] overflow-y-auto">
+              <!-- 基本信息 -->
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.name') }} *</label>
+                  <input v-model="planForm.name" type="text" class="input" :placeholder="t('resources.plans.namePlaceholder')" />
+                </div>
+                <div>
+                  <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.description') }}</label>
+                  <input v-model="planForm.description" type="text" class="input" :placeholder="t('resources.plans.descriptionPlaceholder')" />
+                </div>
+              </div>
+              <p class="text-xs text-orange-500 dark:text-orange-400 -mt-2">{{ t('common.noIncudalHint') }}</p>
+
+              <!-- 资源配置 -->
+              <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-800/50 border border-gray-700' : 'bg-gray-50 border border-gray-200'">
+                <h4 class="text-sm font-medium mb-3" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">{{ t('resources.plans.resourceConfig') }}</h4>
+                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">CPU (%)</label>
+                    <input v-model.number="planForm.cpu" type="number" min="15" max="10000" class="input" />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('admin.packages.memory') }} (MB)</label>
+                    <input v-model.number="planForm.memory" type="number" min="128" max="62144" class="input" />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('admin.packages.disk') }} (MB)</label>
+                    <input v-model.number="planForm.disk" type="number" min="512" max="104857600" class="input" />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.portLimit') }}</label>
+                    <input v-model.number="planForm.portLimit" type="number" min="0" class="input" />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.snapshotLimit') }}</label>
+                    <input v-model.number="planForm.snapshotLimit" type="number" min="0" class="input" />
+                  </div>
+                  <div v-if="plansPackage?.instance_type !== 'vm'">
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.swapSize') }} (MB)</label>
+                    <input v-model.number="planForm.swapSize" type="number" min="0" max="1048576" step="128" class="input" />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.siteLimit') }}</label>
+                    <input v-model.number="planForm.siteLimit" type="number" min="0" class="input" />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.trafficLimit') }} (GB) *</label>
+                    <input v-model="planForm.trafficLimit" type="number" min="1" max="100000" step="1" class="input" required />
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.trafficSpeed') }} (Mbps) *</label>
+                    <input v-model.number="planForm.trafficLimitSpeed" type="number" min="1" max="10000" step="1" class="input" required />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 计费配置 -->
+              <div class="rounded-xl p-4" :class="themeStore.isDark ? 'bg-gray-800/50 border border-gray-700' : 'bg-gray-50 border border-gray-200'">
+                <h4 class="text-sm font-medium mb-3" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-700'">{{ t('resources.plans.billingConfig') }}</h4>
+                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.price') }} (元)</label>
+                    <input v-model.number="planForm.price" type="number" min="0" :max="MAX_PACKAGE_PLAN_PRICE" step="0.01" class="input" />
+                    <p class="mt-1 text-xs text-themed-muted">{{ t('resources.plans.priceRangeHint', { max: MAX_PACKAGE_PLAN_PRICE.toFixed(2) }) }}</p>
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.billingCycle') }}</label>
+                    <select v-model.number="planForm.billingCycle" class="input">
+                      <option v-for="opt in billingCycleOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label class="block text-xs font-medium text-themed-muted mb-1.5">SLA保证 (%)</label>
+                    <input v-model.number="planForm.slaGuarantee" type="number" min="1" max="100" step="0.01" class="input" placeholder="如 99.9" />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 其他设置 -->
+              <div class="grid gap-4 sm:grid-cols-3 sm:items-start">
+                <div class="min-w-0 sm:col-span-2">
+                  <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.status') }}</label>
+                  <div
+                    class="h-10 rounded-lg border p-0.5"
+                    :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/60' : 'border-gray-200 bg-gray-100/70'"
+                  >
+                    <div class="grid h-full grid-cols-3 gap-0.5">
+                      <button
+                        v-for="option in planStatusOptions"
+                        :key="option.value"
+                        type="button"
+                        class="flex h-full min-w-0 items-center justify-center gap-2 rounded-md px-2 text-sm font-medium transition-all"
+                        :class="getPlanStatusSegmentClass(option.value)"
+                        :aria-pressed="planForm.status === option.value"
+                        @click="planForm.status = option.value"
+                      >
+                        <span class="h-2 w-2 flex-shrink-0 rounded-full" :class="getPlanStatusDotClass(option.value)"></span>
+                        <span class="truncate">{{ option.label }}</span>
+                      </button>
+                    </div>
+                  </div>
+                  <p class="mt-2 min-h-[2.5rem] text-xs leading-5 text-themed-muted">
+                    {{ selectedPlanStatusOption.description }}
+                  </p>
+                </div>
+                <div class="min-w-0">
+                  <label class="block text-xs font-medium text-themed-muted mb-1.5">{{ t('resources.plans.sortOrder') }}</label>
+                  <input v-model.number="planForm.sortOrder" type="number" min="0" class="input h-10 w-full text-center" />
+                </div>
+              </div>
+            </div>
+
+            <div class="modal-footer">
+              <button class="btn-secondary" @click="showPlanFormModal = false">{{ t('common.cancel') }}</button>
+              <button :disabled="!planForm.name.trim() || planFormLoading" class="btn-primary" @click="savePlan">
+                <span v-if="planFormLoading" class="loading-spinner w-4 h-4"></span>
+                <template v-else>
+                  <svg 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="M5 13l4 4L19 7" />
+                  </svg>
+                  {{ t('common.save') }}
+                </template>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/client/src/views/resources/PackageFormView.vue b/client/src/views/resources/PackageFormView.vue
new file mode 100644
index 0000000..320bb5f
--- /dev/null
+++ b/client/src/views/resources/PackageFormView.vue
@@ -0,0 +1,1501 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter, useRoute } from 'vue-router'
+import api from '@/api'
+import FlagIcon from '@/components/FlagIcon.vue'
+import { useToast } from '@/stores/toast'
+import { useThemeStore } from '@/stores/theme'
+import { useAuthStore } from '@/stores/auth'
+import type { Host, HostWithDetails, Package, CreatePackageRequest, UpdatePackageRequest } from '@/types/api'
+import { validateName, validateText } from '@/utils/validation'
+import { translateError } from '@/utils/errorHandler'
+
+// 为 KeepAlive exclude 匹配定义组件名称
+defineOptions({
+  name: 'PackageFormView'
+})
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const toast = useToast()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+
+// Mode: create or edit
+const isEditMode = computed(() => !!route.params.id)
+const packageId = computed(() => route.params.id ? Number(route.params.id) : null)
+type PackageCreationMode = 'free' | 'paid'
+const packageCreationMode = ref<PackageCreationMode>('free')
+const showPackageLevelInstanceDefaults = computed(() => isEditMode.value || packageCreationMode.value === 'free')
+
+// Loading states
+const loading = ref(false)
+const saving = ref(false)
+type HostScope = 'official' | 'hosted'
+type PackageHostOption = Host & {
+  countryCode?: string
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  owner?: HostWithDetails['owner']
+}
+
+const hosts = ref<PackageHostOption[]>([])
+const allKnownHosts = ref<PackageHostOption[]>([])
+const hostsLoading = ref(false)
+const hostScope = ref<HostScope>('official')
+const hostSearchInput = ref('')
+const hostSearchQuery = ref('')
+const prerequisitePackages = ref<Package[]>([])
+const currentPackageOwnerId = ref<number | null>(authStore.user?.id ?? null)
+
+const prerequisitePackageOptions = computed(() => {
+  const ownerId = currentPackageOwnerId.value ?? authStore.user?.id ?? null
+  const currentPackageId = packageId.value
+  const requiredPackageById = new Map(
+    prerequisitePackages.value.map(pkg => [pkg.id, pkg.required_package_id ?? null])
+  )
+  const wouldCreateCycle = (candidateId: number): boolean => {
+    if (!currentPackageId) return false
+
+    let cursor = requiredPackageById.get(candidateId) ?? null
+    const visited = new Set<number>()
+
+    while (cursor !== null) {
+      if (cursor === currentPackageId) return true
+      if (visited.has(cursor)) return false
+      visited.add(cursor)
+      cursor = requiredPackageById.get(cursor) ?? null
+    }
+
+    return false
+  }
+
+  return prerequisitePackages.value.filter(pkg => {
+    if (pkg.id === currentPackageId) return false
+    if (wouldCreateCycle(pkg.id)) return false
+    if (ownerId === null) return pkg.isOwn === true
+    return pkg.ownerId === ownerId || pkg.owner?.id === ownerId
+  })
+})
+
+interface HostStoragePoolOption {
+  name: string
+  driver: string
+  description: string
+  status: string
+  purpose?: 'instance_data' | 'instance_storage' | null
+}
+
+const storagePoolsByHost = ref<Record<number, HostStoragePoolOption[]>>({})
+const storagePoolsLoadingByHost = ref<Record<number, boolean>>({})
+
+
+
+// Form data
+interface PackageForm {
+  name: string
+  description: string
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  hostIds: number[]
+  hostStoragePools: Record<string, string>
+  hostTrafficMultipliers: Record<string, number>
+  networkMode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType: 'container' | 'vm'  // 实例类型
+  privileged: boolean
+  nested: boolean
+  active: boolean
+  monthlyTrafficLimitGB: string
+  // 实例配额
+  portLimit: number | null
+  snapshotLimit: number | null
+  siteLimit: number | null
+  // Storage I/O
+  ioLimitMode: 'throughput' | 'iops'
+  limitsRead: string
+  limitsReadUnit: string
+  limitsWrite: string
+  limitsWriteUnit: string
+  limitsReadIops: number
+  limitsWriteIops: number
+  // Network
+  limitsIngress: string
+  limitsIngressUnit: string
+  limitsEgress: string
+  limitsEgressUnit: string
+  // Process/CPU
+  limitsProcesses: number
+  limitsCpuPriority: number
+  // Boot settings
+  bootAutostart: boolean
+  bootAutostartPriority: number
+  bootAutostartDelay: number
+  bootHostShutdownTimeout: number
+  // Global sharing
+  globalShared: boolean
+  globalMaxInstances: number
+  requiredPackageId: number | null
+}
+
+const form = ref<PackageForm>(getDefaultForm())
+const formError = ref('')
+
+// Storage units
+const storageUnits = ['B', 'kB', 'MB', 'GB', 'TB', 'PB']
+const networkUnits = ['Mbit']
+const publicPackageMaxInstanceOptions = [1, 2, 3, 4, 5]
+
+// 网络模式（场景化 5 种选项，与节点创建页一致）
+const networkModes = [
+  { value: 'nat', labelKey: 'common.networkMode.nat' },
+  { value: 'nat_ipv6', labelKey: 'common.networkMode.nat_ipv6' },
+  { value: 'nat_ipv6_nat', labelKey: 'common.networkMode.nat_ipv6_nat' },
+  { value: 'ipv6_only', labelKey: 'common.networkMode.ipv6_only' },
+  { value: 'ipv6_nat', labelKey: 'common.networkMode.ipv6_nat' }
+]
+const disallowedKvmNetworkModes = new Set(['nat_ipv6_nat', 'ipv6_nat'])
+const availableNetworkModes = computed(() => {
+  if (form.value.instanceType === 'vm') {
+    return networkModes.filter(mode => !disallowedKvmNetworkModes.has(mode.value))
+  }
+  return networkModes
+})
+
+const selectedHostIdSet = computed(() => new Set(form.value.hostIds))
+const selectedKnownHosts = computed(() => {
+  return form.value.hostIds
+    .map(id => getHostById(id))
+    .filter((host): host is PackageHostOption => host !== null)
+})
+const selectedUnknownHostIds = computed(() => form.value.hostIds.filter(id => !getHostById(id)))
+const displayedHosts = computed(() => {
+  const query = hostSearchQuery.value.trim().toLowerCase()
+  if (!query) return hosts.value
+
+  return hosts.value.filter(host => {
+    const fields = [
+      host.name,
+      host.location,
+      host.url,
+      getHostCountryCode(host),
+      getHostOwnerLabel(host)
+    ]
+    return fields.some(value => String(value || '').toLowerCase().includes(query))
+  })
+})
+const hasHostSearch = computed(() => hostSearchQuery.value.trim().length > 0)
+
+watch(() => form.value.instanceType, (instanceType) => {
+  if (instanceType === 'vm' && disallowedKvmNetworkModes.has(form.value.networkMode)) {
+    form.value.networkMode = 'nat'
+  }
+}, { immediate: true })
+
+function resetPackageLevelInstanceDefaults(): void {
+  const defaults = getDefaultForm()
+  form.value.cpuMax = defaults.cpuMax
+  form.value.memoryMax = defaults.memoryMax
+  form.value.diskMax = defaults.diskMax
+  form.value.monthlyTrafficLimitGB = defaults.monthlyTrafficLimitGB
+  form.value.portLimit = defaults.portLimit
+  form.value.snapshotLimit = defaults.snapshotLimit
+  form.value.siteLimit = defaults.siteLimit
+  form.value.limitsIngress = defaults.limitsIngress
+  form.value.limitsIngressUnit = defaults.limitsIngressUnit
+  form.value.limitsEgress = defaults.limitsEgress
+  form.value.limitsEgressUnit = defaults.limitsEgressUnit
+}
+
+watch(packageCreationMode, (mode) => {
+  if (!isEditMode.value && mode === 'paid') {
+    resetPackageLevelInstanceDefaults()
+  }
+})
+
+watch(() => form.value.globalShared, (globalShared) => {
+  if (globalShared) {
+    const value = Number(form.value.globalMaxInstances)
+    if (!Number.isInteger(value) || value < 1 || value > 5) {
+      form.value.globalMaxInstances = 1
+    }
+  }
+})
+
+function getDefaultForm(): PackageForm {
+  return {
+    name: '',
+    description: '',
+    cpuMax: 100,
+    memoryMax: 4096,
+    diskMax: 51200,
+    hostIds: [],
+    hostStoragePools: {},
+    hostTrafficMultipliers: {},
+    networkMode: 'nat',
+    instanceType: 'container',
+    privileged: false,
+    nested: false,
+    active: true,
+    monthlyTrafficLimitGB: '',
+    // 实例配额默认值
+    portLimit: 20,
+    snapshotLimit: 10,
+    siteLimit: 10,
+    // Storage I/O defaults
+    ioLimitMode: 'throughput',
+    limitsRead: '100',
+    limitsReadUnit: 'MB',
+    limitsWrite: '100',
+    limitsWriteUnit: 'MB',
+    limitsReadIops: 500,
+    limitsWriteIops: 500,
+    // Network defaults
+    limitsIngress: '300',
+    limitsIngressUnit: 'Mbit',
+    limitsEgress: '300',
+    limitsEgressUnit: 'Mbit',
+    // Process/CPU defaults
+    limitsProcesses: 500,
+    limitsCpuPriority: 10,
+    // Boot settings defaults
+    bootAutostart: true,
+    bootAutostartPriority: 20,
+    bootAutostartDelay: 15,
+    bootHostShutdownTimeout: 30,
+    // Global sharing defaults
+    globalShared: false,
+    globalMaxInstances: 1,
+    requiredPackageId: null
+  }
+}
+
+// GB <-> Bytes conversion
+const GB_TO_BYTES = BigInt(1024 * 1024 * 1024)
+
+function bytesToGB(bytes: string | null | undefined): string {
+  if (!bytes) return ''
+  try {
+    const b = BigInt(bytes)
+    const gb = Number(b / GB_TO_BYTES)
+    return gb.toString()
+  } catch {
+    return ''
+  }
+}
+
+function gbToBytes(gb: string | number): string | null {
+  if (gb === '' || gb === null || gb === undefined) return null
+  const str = String(gb).trim()
+  if (str === '') return null
+  const num = parseFloat(str)
+  if (isNaN(num) || num <= 0) return null
+  return (BigInt(Math.round(num)) * GB_TO_BYTES).toString()
+}
+
+function normalizeTrafficMultiplier(value: unknown): number {
+  const num = Number(value)
+  if (!Number.isFinite(num) || num <= 0) return 1
+  return Math.round(Math.min(Math.max(num, 0.001), 100) * 1000) / 1000
+}
+
+// Parse storage value with unit (e.g., "100MB" -> { value: "100", unit: "MB" })
+function parseStorageValue(value: string | null | undefined): { value: string; unit: string } {
+  if (!value) return { value: '', unit: 'MB' }
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|kB|MB|GB|TB|PB)$/i)
+  if (match) {
+    return { value: match[1], unit: match[2] }
+  }
+  return { value: value, unit: 'MB' }
+}
+
+// Parse network value with unit (e.g., "300Mbit" -> { value: "300", unit: "Mbit" })
+// Only Mbit is supported; legacy Gbit values are automatically converted (×1000).
+function parseNetworkValue(value: string | null | undefined): { value: string; unit: string } {
+  if (!value) return { value: '', unit: 'Mbit' }
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*(Mbit|Gbit)$/i)
+  if (match) {
+    if (match[2].toLowerCase() === 'gbit') {
+      // Convert Gbit → Mbit
+      return { value: String(Math.round(Number(match[1]) * 1000)), unit: 'Mbit' }
+    }
+    return { value: match[1], unit: 'Mbit' }
+  }
+  return { value: value, unit: 'Mbit' }
+}
+
+// Combine value and unit
+function combineStorageValue(value: string, unit: string): string {
+  if (!value || value.trim() === '') return ''
+  return `${value}${unit}`
+}
+
+function getSystemStoragePools(hostId: number): HostStoragePoolOption[] {
+  return (storagePoolsByHost.value[hostId] || []).filter(pool => pool.purpose === 'instance_data')
+}
+
+function rememberHosts(nextHosts: PackageHostOption[]): void {
+  const merged = new Map<number, PackageHostOption>()
+  allKnownHosts.value.forEach(host => merged.set(host.id, host))
+  nextHosts.forEach(host => merged.set(host.id, host))
+  allKnownHosts.value = Array.from(merged.values())
+}
+
+function getHostById(hostId: number): PackageHostOption | null {
+  return allKnownHosts.value.find(item => item.id === hostId) || hosts.value.find(item => item.id === hostId) || null
+}
+
+function getSelectedHostLabel(hostId: number): string {
+  const host = getHostById(hostId)
+  if (!host) return `Host #${hostId}`
+  return host.location ? `${host.name} (${host.location})` : host.name
+}
+
+function getHostCountryCode(host: PackageHostOption | null): string {
+  return host?.countryCode || host?.country_code || 'us'
+}
+
+function getHostStatusLabel(status: string | undefined): string {
+  if (status === 'online') return t('resources.hosts.online')
+  if (status === 'offline') return t('resources.hosts.offline')
+  if (status === 'maintenance') return t('resources.hosts.maintenance')
+  return status || '-'
+}
+
+function getHostStatusClass(status: string | undefined): string {
+  if (status === 'online') {
+    return themeStore.isDark ? 'bg-emerald-500/15 text-emerald-300 ring-emerald-500/30' : 'bg-emerald-50 text-emerald-700 ring-emerald-200'
+  }
+  if (status === 'maintenance') {
+    return themeStore.isDark ? 'bg-amber-500/15 text-amber-300 ring-amber-500/30' : 'bg-amber-50 text-amber-700 ring-amber-200'
+  }
+  return themeStore.isDark ? 'bg-gray-700 text-gray-300 ring-gray-600' : 'bg-gray-100 text-gray-600 ring-gray-200'
+}
+
+function getHostOwnerLabel(host: PackageHostOption | null): string {
+  if (!host?.owner) return ''
+  return `${host.owner.username} UID:${host.owner.id}`
+}
+
+function getHostSummary(host: PackageHostOption): string {
+  return [
+    host.location,
+    host.architecture,
+    host.instanceType || host.instance_type,
+    getHostOwnerLabel(host)
+  ].filter(Boolean).join(' · ')
+}
+
+function toggleHostSelection(hostId: number): void {
+  const selected = new Set(form.value.hostIds)
+  if (selected.has(hostId)) {
+    selected.delete(hostId)
+  } else {
+    selected.add(hostId)
+  }
+  form.value.hostIds = Array.from(selected)
+}
+
+function applyHostSearch(): void {
+  hostSearchQuery.value = hostSearchInput.value
+}
+
+function clearHostSearch(): void {
+  hostSearchInput.value = ''
+  hostSearchQuery.value = ''
+}
+
+async function switchHostScope(scope: HostScope): Promise<void> {
+  if (hostScope.value === scope) return
+  hostScope.value = scope
+  clearHostSearch()
+  await loadHosts()
+}
+
+async function loadHostStoragePools(hostId: number): Promise<void> {
+  if (storagePoolsByHost.value[hostId] || storagePoolsLoadingByHost.value[hostId]) {
+    return
+  }
+
+  storagePoolsLoadingByHost.value = {
+    ...storagePoolsLoadingByHost.value,
+    [hostId]: true
+  }
+
+  try {
+    const response = await api.hosts.getStoragePools(hostId)
+    storagePoolsByHost.value = {
+      ...storagePoolsByHost.value,
+      [hostId]: response.pools || []
+    }
+  } catch (err) {
+    console.error(`Failed to load storage pools for host ${hostId}:`, err)
+    storagePoolsByHost.value = {
+      ...storagePoolsByHost.value,
+      [hostId]: []
+    }
+  } finally {
+    storagePoolsLoadingByHost.value = {
+      ...storagePoolsLoadingByHost.value,
+      [hostId]: false
+    }
+  }
+}
+
+async function syncHostStoragePoolSelections(hostIds: number[]): Promise<void> {
+  const requestedHostIds = [...new Set(hostIds)]
+  await Promise.all(requestedHostIds.map(hostId => loadHostStoragePools(hostId)))
+
+  const uniqueHostIds = [...new Set(form.value.hostIds)]
+  const nextSelections: Record<string, string> = {}
+  for (const hostId of uniqueHostIds) {
+    const key = String(hostId)
+    const currentSelection = form.value.hostStoragePools[key] || ''
+    const systemPools = getSystemStoragePools(hostId)
+    const hasCurrentSelection = currentSelection
+      ? systemPools.some(pool => pool.name === currentSelection)
+      : false
+
+    if (hasCurrentSelection) {
+      nextSelections[key] = currentSelection
+      continue
+    }
+
+    if (systemPools.length === 1) {
+      nextSelections[key] = systemPools[0].name
+      continue
+    }
+
+    nextSelections[key] = ''
+  }
+
+  form.value.hostStoragePools = nextSelections
+
+  const nextMultipliers: Record<string, number> = {}
+  for (const hostId of uniqueHostIds) {
+    const key = String(hostId)
+    nextMultipliers[key] = normalizeTrafficMultiplier(form.value.hostTrafficMultipliers[key])
+  }
+  form.value.hostTrafficMultipliers = nextMultipliers
+}
+
+onMounted(async () => {
+  await Promise.all([
+    loadHosts(),
+    loadPrerequisitePackages()
+  ])
+  if (isEditMode.value && packageId.value) {
+    await loadPackage(packageId.value)
+  }
+})
+
+// 监听路由参数变化，重新加载套餐数据
+watch(() => route.params.id, async (newId, oldId) => {
+  if (newId !== oldId) {
+    // 重置状态
+    formError.value = ''
+    saving.value = false
+    if (newId) {
+      loading.value = true
+      form.value = getDefaultForm()
+      await loadPrerequisitePackages()
+      await loadPackage(Number(newId))
+    } else {
+      // 切换到创建模式
+      form.value = getDefaultForm()
+      packageCreationMode.value = 'free'
+      currentPackageOwnerId.value = authStore.user?.id ?? null
+      await loadPrerequisitePackages()
+    }
+  }
+})
+
+watch(() => form.value.hostIds.slice(), (hostIds) => {
+  void syncHostStoragePoolSelections(hostIds)
+})
+
+async function loadHosts(): Promise<void> {
+  hostsLoading.value = true
+  try {
+    // 管理员可以看到所有节点并绑定任意节点
+    // 普通用户只能看到并绑定自己的节点
+    const canBindAnyHost = authStore.isAdmin
+    // 传递 pageSize 以获取所有宿主机，避免默认分页限制（默认只返回20条）
+    const params = canBindAnyHost
+      ? { pageSize: '1000', scope: hostScope.value }
+      : { mine: 'true', pageSize: '1000' }
+    const response = await api.hosts.list(params)
+    hosts.value = ((response as { hosts?: PackageHostOption[] }).hosts || [])
+    rememberHosts(hosts.value)
+  } catch (err) {
+    console.error('Failed to load hosts:', err)
+  } finally {
+    hostsLoading.value = false
+  }
+}
+
+async function loadPrerequisitePackages(): Promise<void> {
+  try {
+    const response = await api.packages.list({ all: true })
+    prerequisitePackages.value = (response as { packages?: Package[] }).packages || []
+  } catch (err) {
+    console.error('Failed to load prerequisite packages:', err)
+    prerequisitePackages.value = []
+  }
+}
+
+async function loadPackage(id: number): Promise<void> {
+  loading.value = true
+  try {
+    const response = await api.packages.get(id) as any
+    // API 返回 { package: {...} } 格式
+    const pkg = response.package || response
+    currentPackageOwnerId.value = pkg.ownerId ?? pkg.user_id ?? authStore.user?.id ?? null
+    
+    // Parse storage I/O values
+    const readParsed = parseStorageValue(pkg.limits_read)
+    const writeParsed = parseStorageValue(pkg.limits_write)
+    const ingressParsed = parseNetworkValue(pkg.limits_ingress)
+    const egressParsed = parseNetworkValue(pkg.limits_egress)
+    
+    form.value = {
+      name: pkg.name || '',
+      description: pkg.description || '',
+      cpuMax: Number(pkg.cpu_max) || 100,
+      memoryMax: Number(pkg.memory_max) || 4096,
+      diskMax: Number(pkg.disk_max) || 51200,
+      hostIds: pkg.host_ids || [],
+      hostStoragePools: Object.fromEntries(
+        Object.entries((pkg.host_storage_pools || {}) as Record<string, string | null>)
+          .map(([hostId, poolName]) => [hostId, poolName || ''])
+      ),
+      hostTrafficMultipliers: Object.fromEntries(
+        Object.entries((pkg.host_traffic_multipliers || {}) as Record<string, number>)
+          .map(([hostId, multiplier]) => [hostId, normalizeTrafficMultiplier(multiplier)])
+      ),
+      networkMode: pkg.network_mode || 'nat',
+      instanceType: (pkg.instance_type === 'vm' ? 'vm' : 'container') as 'container' | 'vm',
+      // 处理布尔值：可能是 1/0 或 true/false
+      privileged: pkg.privileged === 1 || pkg.privileged === true,
+      nested: pkg.nested === 1 || pkg.nested === true,
+      active: pkg.active === 1 || pkg.active === true,
+      monthlyTrafficLimitGB: bytesToGB(pkg.monthly_traffic_limit),
+      // 实例配额
+      portLimit: pkg.port_limit ?? 20,
+      snapshotLimit: pkg.snapshot_limit ?? 10,
+      siteLimit: pkg.site_limit ?? 10,
+      // Storage I/O
+      ioLimitMode: (pkg.io_limit_mode === 'iops' ? 'iops' : 'throughput') as 'throughput' | 'iops',
+      limitsRead: readParsed.value || '100',
+      limitsReadUnit: readParsed.unit || 'MB',
+      limitsWrite: writeParsed.value || '100',
+      limitsWriteUnit: writeParsed.unit || 'MB',
+      limitsReadIops: Number(pkg.limits_read_iops) || 500,
+      limitsWriteIops: Number(pkg.limits_write_iops) || 500,
+      // Network
+      limitsIngress: ingressParsed.value || '300',
+      limitsIngressUnit: ingressParsed.unit || 'Mbit',
+      limitsEgress: egressParsed.value || '300',
+      limitsEgressUnit: egressParsed.unit || 'Mbit',
+      // Process/CPU
+      limitsProcesses: Number(pkg.limits_processes) || 500,
+      limitsCpuPriority: Number(pkg.limits_cpu_priority) || 10,
+      // Boot settings
+      bootAutostart: pkg.boot_autostart === 1 || pkg.boot_autostart === true || pkg.boot_autostart == null,
+      bootAutostartPriority: Number(pkg.boot_autostart_priority) || 20,
+      bootAutostartDelay: Number(pkg.boot_autostart_delay) || 15,
+      bootHostShutdownTimeout: Number(pkg.boot_host_shutdown_timeout) || 30,
+      // Global sharing
+      globalShared: pkg.global_shared === true || pkg.global_shared === 1,
+      globalMaxInstances: Number.isInteger(Number(pkg.global_max_instances)) && Number(pkg.global_max_instances) >= 1 && Number(pkg.global_max_instances) <= 5 ? Number(pkg.global_max_instances) : 1,
+      requiredPackageId: pkg.required_package_id ?? null
+    }
+  } catch (_err: any) {
+    toast.error(t('admin.packages.loadFailed') || 'Failed to load package')
+    router.push({ name: 'my-packages' })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function savePackage(): Promise<void> {
+  formError.value = ''
+  
+  // Validation
+  if (!form.value.name) {
+    formError.value = t('admin.packages.enterName')
+    return
+  }
+
+  const nameValidation = validateName(form.value.name, t('admin.packages.name'), 2, 64)
+  if (!nameValidation.valid) {
+    formError.value = nameValidation.message || t('admin.packages.enterName')
+    return
+  }
+
+  if (form.value.description) {
+    const descValidation = validateText(form.value.description, t('admin.packages.descLabel'), 500)
+    if (!descValidation.valid) {
+      formError.value = descValidation.message || ''
+      return
+    }
+  }
+
+  if (!form.value.hostIds || form.value.hostIds.length === 0) {
+    formError.value = t('admin.packages.mustBindHost')
+    return
+  }
+
+  // 确保数值字段有有效值（处理空字符串或 NaN 的情况）
+  const cpuPriority = Number(form.value.limitsCpuPriority) || 10
+  const bootPriority = Number(form.value.bootAutostartPriority) || 20
+  const startupDelay = Number(form.value.bootAutostartDelay) || 15
+  const shutdownTimeout = Number(form.value.bootHostShutdownTimeout) || 30
+
+  // Validate CPU priority (0-10)
+  if (cpuPriority < 0 || cpuPriority > 10) {
+    formError.value = t('packageForm.validation.cpuPriorityRange')
+    return
+  }
+
+  // Validate boot priority (0-100)
+  if (bootPriority < 0 || bootPriority > 100) {
+    formError.value = t('packageForm.validation.bootPriorityRange')
+    return
+  }
+
+  // Validate startup delay (5-600)
+  if (startupDelay < 5 || startupDelay > 600) {
+    formError.value = t('packageForm.validation.startupDelayRange')
+    return
+  }
+
+  // Validate shutdown timeout (30-600)
+  if (shutdownTimeout < 30 || shutdownTimeout > 600) {
+    formError.value = t('packageForm.validation.shutdownTimeoutRange')
+    return
+  }
+
+  // Validate port limit (must be >= 1, cannot be 0)
+  if (form.value.portLimit !== null && form.value.portLimit !== undefined) {
+    if (form.value.portLimit < 1) {
+      formError.value = t('packageForm.validation.portLimitMin')
+      return
+    }
+  }
+
+  const globalMaxInstances = Number(form.value.globalMaxInstances)
+  if (form.value.globalShared && (!Number.isInteger(globalMaxInstances) || globalMaxInstances < 1 || globalMaxInstances > 5)) {
+    formError.value = t('packageForm.validation.globalMaxInstancesRange')
+    return
+  }
+
+  // 更新表单值为验证后的数值
+  form.value.limitsCpuPriority = cpuPriority
+  form.value.bootAutostartPriority = bootPriority
+  form.value.bootAutostartDelay = startupDelay
+  form.value.bootHostShutdownTimeout = shutdownTimeout
+
+  saving.value = true
+
+  try {
+    const trafficLimitBytes = gbToBytes(form.value.monthlyTrafficLimitGB)
+    const hostStoragePools = Object.fromEntries(
+      form.value.hostIds.map(hostId => {
+        const selectedPool = form.value.hostStoragePools[String(hostId)] || ''
+        return [String(hostId), selectedPool.trim() || null]
+      })
+    )
+    const hostTrafficMultipliers = Object.fromEntries(
+      form.value.hostIds.map(hostId => [
+        String(hostId),
+        normalizeTrafficMultiplier(form.value.hostTrafficMultipliers[String(hostId)])
+      ])
+    )
+    
+    const data: CreatePackageRequest | UpdatePackageRequest = {
+      name: form.value.name,
+      description: form.value.description || undefined,
+      cpuMax: form.value.cpuMax,
+      memoryMax: form.value.memoryMax,
+      diskMax: form.value.diskMax,
+      hostIds: form.value.hostIds,
+      hostStoragePools,
+      hostTrafficMultipliers,
+      networkMode: form.value.networkMode,
+      instanceType: form.value.instanceType,
+      privileged: form.value.privileged,
+      nested: form.value.nested,
+      active: form.value.active,
+      monthlyTrafficLimit: trafficLimitBytes,
+      // 实例配额
+      portLimit: form.value.portLimit ?? undefined,
+      snapshotLimit: form.value.snapshotLimit ?? undefined,
+      siteLimit: form.value.siteLimit ?? undefined,
+      // Storage I/O
+      ioLimitMode: form.value.ioLimitMode,
+      limitsRead: combineStorageValue(form.value.limitsRead, form.value.limitsReadUnit) || undefined,
+      limitsWrite: combineStorageValue(form.value.limitsWrite, form.value.limitsWriteUnit) || undefined,
+      limitsReadIops: form.value.limitsReadIops,
+      limitsWriteIops: form.value.limitsWriteIops,
+      // Network
+      limitsIngress: combineStorageValue(form.value.limitsIngress, form.value.limitsIngressUnit) || undefined,
+      limitsEgress: combineStorageValue(form.value.limitsEgress, form.value.limitsEgressUnit) || undefined,
+      // Process/CPU
+      limitsProcesses: form.value.limitsProcesses,
+      limitsCpuPriority: form.value.limitsCpuPriority,
+      // Boot settings
+      bootAutostart: form.value.bootAutostart,
+      bootAutostartPriority: form.value.bootAutostartPriority,
+      bootAutostartDelay: form.value.bootAutostartDelay,
+      bootHostShutdownTimeout: form.value.bootHostShutdownTimeout,
+      // Global sharing
+      globalShared: form.value.globalShared,
+      globalQuotaMultiplier: null,
+      globalMaxInstances: form.value.globalShared ? globalMaxInstances : null,
+      requiredPackageId: form.value.requiredPackageId
+    }
+
+    if (isEditMode.value && packageId.value) {
+      await api.packages.update(packageId.value, data as UpdatePackageRequest)
+      toast.success(t('admin.packages.packageUpdated'))
+    } else {
+      await api.packages.create(data as CreatePackageRequest)
+      toast.success(t('admin.packages.packageCreated'))
+    }
+
+    router.push({ name: 'my-packages' })
+  } catch (err: any) {
+    formError.value = translateError(err) || t('admin.packages.saveFailed')
+  } finally {
+    saving.value = false
+  }
+}
+
+function goBack(): void {
+  router.push({ name: 'my-packages' })
+}
+</script>
+
+<template>
+  <div class="space-y-6 animate-fade-in">
+    <!-- Header -->
+    <div class="page-header">
+      <div class="flex items-center gap-4">
+        <button
+          class="p-2 rounded-lg transition-colors"
+          :class="themeStore.isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-100'"
+          @click="goBack"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <div>
+          <h1 class="page-title">
+            {{ isEditMode ? t('packageForm.editTitle') : t('packageForm.createTitle') }}
+          </h1>
+          <p class="page-description">{{ t('packageForm.description') }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="card p-12 text-center">
+      <div class="loading-spinner w-8 h-8 mx-auto"></div>
+      <p class="text-themed-muted mt-4">{{ t('common.loading') }}</p>
+    </div>
+
+    <!-- Form -->
+    <form v-else class="space-y-6" novalidate @submit.prevent="savePackage">
+      <!-- Error message -->
+      <div v-if="formError" class="p-4 rounded-lg bg-red-500/10 text-error text-sm">
+        {{ formError }}
+      </div>
+
+      <!-- Basic Info Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.basicInfo') }}
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="md:col-span-2">
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.packages.name') }} *</label>
+            <input v-model="form.name" type="text" class="input" required />
+          </div>
+          <div class="md:col-span-2">
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.packages.descLabel') }}</label>
+            <input v-model="form.description" type="text" class="input" />
+            <p class="text-xs text-orange-500 dark:text-orange-400 mt-1">{{ t('common.noIncudalHint') }}</p>
+          </div>
+          <div v-if="!isEditMode" class="md:col-span-2">
+            <label class="block text-xs text-themed-muted mb-2">{{ t('packageForm.fields.packageCreationMode') }}</label>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <button
+                type="button"
+                class="p-4 rounded-lg border-2 transition-all text-left cursor-pointer"
+                :class="[
+                  packageCreationMode === 'free'
+                    ? (themeStore.isDark ? 'border-teal-500 bg-teal-900/20 ring-2 ring-teal-500/30' : 'border-teal-500 bg-teal-50 ring-2 ring-teal-200')
+                    : (themeStore.isDark ? 'border-gray-700 bg-gray-900/30 hover:border-gray-600' : 'border-gray-200 bg-gray-50 hover:border-gray-300')
+                ]"
+                @click="packageCreationMode = 'free'"
+              >
+                <div class="flex items-center gap-2 mb-2">
+                  <svg class="w-5 h-5" :class="packageCreationMode === 'free' ? 'text-teal-500' : 'text-themed-muted'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span class="text-sm font-medium" :class="packageCreationMode === 'free' ? (themeStore.isDark ? 'text-teal-400' : 'text-teal-700') : 'text-themed'">
+                    {{ t('packageForm.creationModes.free.title') }}
+                  </span>
+                </div>
+                <p class="text-xs leading-relaxed" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                  {{ t('packageForm.creationModes.free.description') }}
+                </p>
+              </button>
+              <button
+                type="button"
+                class="p-4 rounded-lg border-2 transition-all text-left cursor-pointer"
+                :class="[
+                  packageCreationMode === 'paid'
+                    ? (themeStore.isDark ? 'border-amber-500 bg-amber-900/20 ring-2 ring-amber-500/30' : 'border-amber-500 bg-amber-50 ring-2 ring-amber-200')
+                    : (themeStore.isDark ? 'border-gray-700 bg-gray-900/30 hover:border-gray-600' : 'border-gray-200 bg-gray-50 hover:border-gray-300')
+                ]"
+                @click="packageCreationMode = 'paid'"
+              >
+                <div class="flex items-center gap-2 mb-2">
+                  <svg class="w-5 h-5" :class="packageCreationMode === 'paid' ? 'text-amber-500' : 'text-themed-muted'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                  </svg>
+                  <span class="text-sm font-medium" :class="packageCreationMode === 'paid' ? (themeStore.isDark ? 'text-amber-400' : 'text-amber-700') : 'text-themed'">
+                    {{ t('packageForm.creationModes.paid.title') }}
+                  </span>
+                </div>
+                <p class="text-xs leading-relaxed" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                  {{ t('packageForm.creationModes.paid.description') }}
+                </p>
+              </button>
+            </div>
+            <div
+              class="mt-3 rounded-lg border px-3 py-3 text-sm"
+              :class="packageCreationMode === 'free'
+                ? (themeStore.isDark ? 'border-teal-700/70 bg-teal-950/30 text-teal-100' : 'border-teal-200 bg-teal-50 text-teal-900')
+                : (themeStore.isDark ? 'border-amber-700/70 bg-amber-950/30 text-amber-100' : 'border-amber-200 bg-amber-50 text-amber-900')"
+            >
+              <div class="flex items-start gap-2">
+                <svg class="w-4 h-4 mt-0.5 shrink-0" :class="packageCreationMode === 'free' ? 'text-teal-500' : 'text-amber-500'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
+                </svg>
+                <p class="text-xs leading-relaxed">
+                  {{ packageCreationMode === 'free' ? t('packageForm.hints.freePackageCreationMode') : t('packageForm.hints.paidPackageCreationMode') }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="md:col-span-2">
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.networkMode') }} *</label>
+            <select v-model="form.networkMode" class="input">
+              <option v-for="mode in availableNetworkModes" :key="mode.value" :value="mode.value">{{ t(mode.labelKey) }}</option>
+            </select>
+          </div>
+          <div class="md:col-span-2">
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.instanceType') }} *</label>
+            <!-- 点击卡片选择实例类型 -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <!-- 容器卡片 -->
+              <button 
+                type="button"
+                class="p-4 rounded-xl border-2 transition-all text-left cursor-pointer"
+                :class="[
+                  form.instanceType === 'container' 
+                    ? (themeStore.isDark ? 'border-teal-500 bg-teal-900/20 ring-2 ring-teal-500/30' : 'border-teal-500 bg-teal-50 ring-2 ring-teal-200')
+                    : (themeStore.isDark ? 'border-gray-700 bg-gray-900/30 hover:border-gray-600' : 'border-gray-200 bg-gray-50 hover:border-gray-300')
+                ]"
+                @click="form.instanceType = 'container'"
+              >
+                <div class="flex items-center gap-2 mb-2">
+                  <svg class="w-5 h-5" :class="form.instanceType === 'container' ? 'text-teal-500' : 'text-themed-muted'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                  </svg>
+                  <span class="text-sm font-medium" :class="form.instanceType === 'container' ? (themeStore.isDark ? 'text-teal-400' : 'text-teal-700') : 'text-themed'">{{ t('common.instanceType.container') }}</span>
+                </div>
+                <ul class="text-xs space-y-1" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                  <li>• {{ t('packageForm.typeHelp.containerFast') }}</li>
+                  <li>• {{ t('packageForm.typeHelp.containerLight') }}</li>
+                  <li>• {{ t('packageForm.typeHelp.containerDocker') }}</li>
+                </ul>
+              </button>
+              <!-- VM卡片 -->
+              <button 
+                type="button"
+                class="p-4 rounded-xl border-2 transition-all text-left cursor-pointer"
+                :class="[
+                  form.instanceType === 'vm' 
+                    ? (themeStore.isDark ? 'border-amber-500 bg-amber-900/20 ring-2 ring-amber-500/30' : 'border-amber-500 bg-amber-50 ring-2 ring-amber-200')
+                    : (themeStore.isDark ? 'border-gray-700 bg-gray-900/30 hover:border-gray-600' : 'border-gray-200 bg-gray-50 hover:border-gray-300')
+                ]"
+                @click="form.instanceType = 'vm'"
+              >
+                <div class="flex items-center gap-2 mb-2">
+                  <svg class="w-5 h-5" :class="form.instanceType === 'vm' ? 'text-amber-500' : 'text-themed-muted'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+                  </svg>
+                  <span class="text-sm font-medium" :class="form.instanceType === 'vm' ? (themeStore.isDark ? 'text-amber-400' : 'text-amber-700') : 'text-themed'">{{ t('common.instanceType.vm') }}</span>
+                </div>
+                <ul class="text-xs space-y-1" :class="themeStore.isDark ? 'text-gray-400' : 'text-gray-600'">
+                  <li>• {{ t('packageForm.typeHelp.vmIsolation') }}</li>
+                  <li>• {{ t('packageForm.typeHelp.vmKernel') }}</li>
+                  <li>• {{ t('packageForm.typeHelp.vmWindows') }}</li>
+                </ul>
+              </button>
+            </div>
+          </div>
+          <div class="md:col-span-2">
+            <div class="mb-2 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+              <div>
+                <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.packages.boundHosts') }} *</label>
+                <div class="text-xs text-themed-muted">
+                  {{ t('packageForm.hostSelector.selectedCount', { count: form.hostIds.length }) }}
+                </div>
+              </div>
+              <div v-if="authStore.isAdmin" class="inline-flex self-start rounded-lg p-1" :class="themeStore.isDark ? 'bg-gray-800' : 'bg-gray-100'">
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
+                  :class="hostScope === 'official'
+                    ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm')
+                    : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+                  @click="switchHostScope('official')"
+                >
+                  {{ t('packageForm.hostSelector.official') }}
+                </button>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
+                  :class="hostScope === 'hosted'
+                    ? (themeStore.isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900 shadow-sm')
+                    : (themeStore.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')"
+                  @click="switchHostScope('hosted')"
+                >
+                  {{ t('resources.hosts.hosted') }}
+                </button>
+              </div>
+            </div>
+            <div class="rounded-lg border p-3" :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/40' : 'border-gray-200 bg-gray-50'">
+              <div class="flex flex-col gap-2 sm:flex-row">
+                <div class="relative flex-1">
+                  <input
+                    v-model="hostSearchInput"
+                    type="text"
+                    :placeholder="t('packageForm.hostSelector.searchPlaceholder')"
+                    class="input pl-9 w-full"
+                    @keyup.enter="applyHostSearch"
+                  />
+                  <svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 icon-themed" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </div>
+                <button type="button" class="btn-secondary h-[38px] px-4 justify-center" @click="applyHostSearch">
+                  {{ t('common.search') }}
+                </button>
+                <button
+                  v-if="hasHostSearch"
+                  type="button"
+                  class="btn-ghost h-[38px] px-3 justify-center"
+                  @click="clearHostSearch"
+                >
+                  {{ t('resources.packages.clearSearch') }}
+                </button>
+              </div>
+
+              <div class="mt-3 max-h-72 overflow-y-auto pr-1">
+                <div v-if="hostsLoading" class="py-8 text-center text-sm text-themed-muted">
+                  {{ t('common.loading') }}
+                </div>
+                <div v-else-if="displayedHosts.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                  <button
+                    v-for="host in displayedHosts"
+                    :key="host.id"
+                    type="button"
+                    class="w-full rounded-lg border p-3 text-left transition-colors"
+                    :class="selectedHostIdSet.has(host.id)
+                      ? (themeStore.isDark ? 'border-teal-500 bg-teal-500/10 ring-1 ring-teal-500/40' : 'border-teal-400 bg-teal-50 ring-1 ring-teal-300')
+                      : (themeStore.isDark ? 'border-gray-800 bg-gray-950/40 hover:border-gray-700 hover:bg-gray-900/70' : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50')"
+                    @click="toggleHostSelection(host.id)"
+                  >
+                    <div class="flex items-start gap-3">
+                      <input
+                        :checked="selectedHostIdSet.has(host.id)"
+                        type="checkbox"
+                        class="mt-1 w-4 h-4 rounded pointer-events-none"
+                        tabindex="-1"
+                        readonly
+                      />
+                      <FlagIcon :code="getHostCountryCode(host)" size="sm" class="mt-0.5 shrink-0" />
+                      <div class="min-w-0 flex-1">
+                        <div class="flex min-w-0 items-center gap-2">
+                          <span class="truncate text-sm font-medium text-themed">{{ host.name }}</span>
+                          <span
+                            class="shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ring-1"
+                            :class="getHostStatusClass(host.status)"
+                          >
+                            {{ getHostStatusLabel(host.status) }}
+                          </span>
+                        </div>
+                        <div class="mt-1 truncate text-xs text-themed-muted">
+                          {{ getHostSummary(host) || host.url }}
+                        </div>
+                        <div v-if="host.owner" class="mt-1 text-xs text-themed-muted">
+                          {{ t('resources.hosts.owner') }}: {{ host.owner.username }} · UID {{ host.owner.id }}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                </div>
+                <div v-else class="py-8 text-center text-sm text-themed-muted">
+                  {{ hasHostSearch ? t('packageForm.hostSelector.noSearchResults') : t('admin.packages.noHostsAvailable') }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-if="form.hostIds.length > 0" class="md:col-span-2">
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.hostStoragePools') }}</label>
+            <div
+              class="space-y-3 border rounded-lg p-3"
+              :class="themeStore.isDark ? 'border-gray-700 bg-gray-900/40' : 'border-gray-200 bg-gray-50'"
+            >
+              <div
+                v-for="host in selectedKnownHosts"
+                :key="host.id"
+                class="rounded-lg border p-3"
+                :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/40' : 'border-gray-200 bg-white'"
+              >
+                <div class="flex items-center justify-between gap-3 mb-2">
+                  <div class="flex min-w-0 items-center gap-2">
+                    <FlagIcon :code="getHostCountryCode(host)" size="sm" class="shrink-0" />
+                    <div class="min-w-0">
+                      <div class="truncate text-sm font-medium text-themed">{{ getSelectedHostLabel(host.id) }}</div>
+                      <div class="text-xs text-themed-muted">ID: {{ host.id }}</div>
+                    </div>
+                  </div>
+                  <span v-if="storagePoolsLoadingByHost[host.id]" class="text-xs text-themed-muted">
+                    {{ t('common.loading') }}
+                  </span>
+                </div>
+
+                <template v-if="getSystemStoragePools(host.id).length > 0">
+                  <select
+                    v-model="form.hostStoragePools[String(host.id)]"
+                    class="input w-full"
+                  >
+                    <option value="">{{ t('packageForm.placeholders.autoStoragePool') }}</option>
+                    <option
+                      v-for="pool in getSystemStoragePools(host.id)"
+                      :key="pool.name"
+                      :value="pool.name"
+                    >
+                      {{ pool.name }} ({{ pool.driver.toUpperCase() }})
+                    </option>
+                  </select>
+                  <p class="text-xs text-themed-muted mt-1.5">
+                    {{ t('packageForm.hints.hostStoragePools') }}
+                  </p>
+                </template>
+                <p v-else-if="!storagePoolsLoadingByHost[host.id]" class="text-xs text-amber-600 dark:text-amber-400">
+                  {{ t('packageForm.hints.noSystemStoragePools') }}
+                </p>
+                <div class="mt-3">
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.hostTrafficMultiplier') }}</label>
+                  <input
+                    v-model.number="form.hostTrafficMultipliers[String(host.id)]"
+                    type="number"
+                    class="input w-full"
+                    min="0.001"
+                    max="100"
+                    step="0.001"
+                    placeholder="1"
+                  />
+                  <p class="text-xs text-themed-muted mt-1.5">
+                    {{ t('packageForm.hints.hostTrafficMultiplier') }}
+                  </p>
+                </div>
+              </div>
+              <div
+                v-for="hostId in selectedUnknownHostIds"
+                :key="hostId"
+                class="rounded-lg border p-3"
+                :class="themeStore.isDark ? 'border-gray-800 bg-gray-950/40' : 'border-gray-200 bg-white'"
+              >
+                <div class="flex items-center justify-between gap-3 mb-2">
+                  <div>
+                    <div class="text-sm font-medium text-themed">{{ getSelectedHostLabel(hostId) }}</div>
+                    <div class="text-xs text-themed-muted">ID: {{ hostId }}</div>
+                    <div class="mt-0.5 text-xs text-themed-muted">{{ t('packageForm.hostSelector.detailUnavailable') }}</div>
+                  </div>
+                  <span v-if="storagePoolsLoadingByHost[hostId]" class="text-xs text-themed-muted">
+                    {{ t('common.loading') }}
+                  </span>
+                </div>
+
+                <template v-if="getSystemStoragePools(hostId).length > 0">
+                  <select
+                    v-model="form.hostStoragePools[String(hostId)]"
+                    class="input w-full"
+                  >
+                    <option value="">{{ t('packageForm.placeholders.autoStoragePool') }}</option>
+                    <option
+                      v-for="pool in getSystemStoragePools(hostId)"
+                      :key="pool.name"
+                      :value="pool.name"
+                    >
+                      {{ pool.name }} ({{ pool.driver.toUpperCase() }})
+                    </option>
+                  </select>
+                  <p class="text-xs text-themed-muted mt-1.5">
+                    {{ t('packageForm.hints.hostStoragePools') }}
+                  </p>
+                </template>
+                <p v-else-if="!storagePoolsLoadingByHost[hostId]" class="text-xs text-amber-600 dark:text-amber-400">
+                  {{ t('packageForm.hints.noSystemStoragePools') }}
+                </p>
+                <div class="mt-3">
+                  <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.hostTrafficMultiplier') }}</label>
+                  <input
+                    v-model.number="form.hostTrafficMultipliers[String(hostId)]"
+                    type="number"
+                    class="input w-full"
+                    min="0.001"
+                    max="100"
+                    step="0.001"
+                    placeholder="1"
+                  />
+                  <p class="text-xs text-themed-muted mt-1.5">
+                    {{ t('packageForm.hints.hostTrafficMultiplier') }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="md:col-span-2 flex items-center gap-6">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input v-model="form.active" type="checkbox" class="w-4 h-4 rounded" />
+              <span class="text-sm text-themed-secondary">{{ t('admin.packages.activeLabel') }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Resource Limits Section -->
+      <div v-if="showPackageLevelInstanceDefaults" class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.resourceLimits') }}
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('admin.packages.cpu') }} (%)
+              <span class="text-themed-muted font-normal">- {{ t('admin.packages.instanceMaxLimit') }}</span>
+            </label>
+            <input v-model.number="form.cpuMax" type="number" class="input" min="15" max="10000" step="5" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('admin.packages.memory') }} (MB)
+              <span class="text-themed-muted font-normal">- {{ t('admin.packages.instanceMaxLimit') }}</span>
+            </label>
+            <input v-model.number="form.memoryMax" type="number" class="input" min="128" step="64" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('admin.packages.disk') }} (MB)
+              <span class="text-themed-muted font-normal">- {{ t('admin.packages.instanceMaxLimit') }}</span>
+            </label>
+            <input v-model.number="form.diskMax" type="number" class="input" min="512" step="1024" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('admin.packages.trafficLimit') }} (GB)</label>
+            <input 
+              v-model="form.monthlyTrafficLimitGB" 
+              type="text" 
+              class="input" 
+              :placeholder="t('admin.packages.unlimitedPlaceholder')" 
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Instance Quota Section -->
+      <div v-if="showPackageLevelInstanceDefaults" class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.instanceQuota') }}
+        </h2>
+        <p class="text-sm text-themed-muted mb-4">{{ t('packageForm.hints.instanceQuota') }}</p>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.portLimit') }}</label>
+            <input v-model.number="form.portLimit" type="number" class="input" min="1" max="1000" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.portLimit') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.snapshotLimit') }}</label>
+            <input v-model.number="form.snapshotLimit" type="number" class="input" min="0" max="1000" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.snapshotLimit') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.siteLimit') }}</label>
+            <input v-model.number="form.siteLimit" type="number" class="input" min="0" max="1000" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.siteLimit') }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Storage I/O Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.storageIO') }}
+        </h2>
+
+        <!-- IO Limit Mode Toggle -->
+        <div class="mb-4">
+          <label class="block text-xs text-themed-muted mb-2">{{ t('packageForm.fields.ioLimitMode') }}</label>
+          <div class="flex gap-2">
+            <button
+              type="button"
+              class="flex-1 px-3 py-2 rounded-lg border-2 transition-all text-sm font-medium cursor-pointer"
+              :class="[
+                form.ioLimitMode === 'throughput'
+                  ? (themeStore.isDark ? 'border-teal-500 bg-teal-900/20 text-teal-400 ring-1 ring-teal-500/30' : 'border-teal-500 bg-teal-50 text-teal-700 ring-1 ring-teal-200')
+                  : (themeStore.isDark ? 'border-gray-700 bg-gray-900/30 text-gray-400 hover:border-gray-600' : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300')
+              ]"
+              @click="form.ioLimitMode = 'throughput'"
+            >
+              {{ t('packageForm.ioMode.throughput') }}
+            </button>
+            <button
+              type="button"
+              class="flex-1 px-3 py-2 rounded-lg border-2 transition-all text-sm font-medium cursor-pointer"
+              :class="[
+                form.ioLimitMode === 'iops'
+                  ? (themeStore.isDark ? 'border-amber-500 bg-amber-900/20 text-amber-400 ring-1 ring-amber-500/30' : 'border-amber-500 bg-amber-50 text-amber-700 ring-1 ring-amber-200')
+                  : (themeStore.isDark ? 'border-gray-700 bg-gray-900/30 text-gray-400 hover:border-gray-600' : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300')
+              ]"
+              @click="form.ioLimitMode = 'iops'"
+            >
+              {{ t('packageForm.ioMode.iops') }}
+            </button>
+          </div>
+          <p class="text-xs text-themed-muted mt-1.5">{{ t('packageForm.hints.ioLimitMode') }}</p>
+        </div>
+
+        <!-- Throughput fields -->
+        <div v-if="form.ioLimitMode === 'throughput'" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsRead') }}</label>
+            <div class="flex gap-2">
+              <input v-model="form.limitsRead" type="text" class="input flex-1" />
+              <select v-model="form.limitsReadUnit" class="input w-24">
+                <option v-for="unit in storageUnits" :key="unit" :value="unit">{{ unit }}</option>
+              </select>
+            </div>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsWrite') }}</label>
+            <div class="flex gap-2">
+              <input v-model="form.limitsWrite" type="text" class="input flex-1" />
+              <select v-model="form.limitsWriteUnit" class="input w-24">
+                <option v-for="unit in storageUnits" :key="unit" :value="unit">{{ unit }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <!-- IOPS fields -->
+        <div v-if="form.ioLimitMode === 'iops'" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsReadIops') }}</label>
+            <input v-model.number="form.limitsReadIops" type="number" class="input" min="0" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsWriteIops') }}</label>
+            <input v-model.number="form.limitsWriteIops" type="number" class="input" min="0" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Network Limits Section -->
+      <div v-if="showPackageLevelInstanceDefaults" class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.networkLimits') }}
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsIngress') }}</label>
+            <div class="flex gap-2">
+              <input v-model="form.limitsIngress" type="text" class="input flex-1" />
+              <select v-model="form.limitsIngressUnit" class="input w-24">
+                <option v-for="unit in networkUnits" :key="unit" :value="unit">{{ unit }}</option>
+              </select>
+            </div>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsEgress') }}</label>
+            <div class="flex gap-2">
+              <input v-model="form.limitsEgress" type="text" class="input flex-1" />
+              <select v-model="form.limitsEgressUnit" class="input w-24">
+                <option v-for="unit in networkUnits" :key="unit" :value="unit">{{ unit }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Process and CPU Scheduling Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.processScheduling') }}
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.limitsProcesses') }}</label>
+            <input v-model.number="form.limitsProcesses" type="number" class="input" min="1" />
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('packageForm.fields.limitsCpuPriority') }}
+              <span class="text-themed-muted font-normal">(0-10)</span>
+            </label>
+            <input v-model.number="form.limitsCpuPriority" type="number" class="input" min="0" max="10" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.cpuPriority') }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Boot Settings Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.bootSettings') }}
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="md:col-span-2">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input v-model="form.bootAutostart" type="checkbox" class="w-4 h-4 rounded" />
+              <span class="text-sm text-themed-secondary">{{ t('packageForm.fields.bootAutostart') }}</span>
+            </label>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('packageForm.fields.bootAutostartPriority') }}
+              <span class="text-themed-muted font-normal">(0-100)</span>
+            </label>
+            <input v-model.number="form.bootAutostartPriority" type="number" class="input" min="0" max="100" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.bootPriority') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('packageForm.fields.bootAutostartDelay') }}
+              <span class="text-themed-muted font-normal">({{ t('packageForm.units.seconds') }})</span>
+            </label>
+            <input v-model.number="form.bootAutostartDelay" type="number" class="input" min="5" max="600" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.startupDelay') }}</p>
+          </div>
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">
+              {{ t('packageForm.fields.bootHostShutdownTimeout') }}
+              <span class="text-themed-muted font-normal">({{ t('packageForm.units.seconds') }})</span>
+            </label>
+            <input v-model.number="form.bootHostShutdownTimeout" type="number" class="input" min="30" max="600" />
+            <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.shutdownTimeout') }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Prerequisite Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.prerequisite') }}
+        </h2>
+        <div class="space-y-3">
+          <div>
+            <label class="block text-xs text-themed-muted mb-1.5">{{ t('packageForm.fields.requiredPackage') }}</label>
+            <select v-model="form.requiredPackageId" class="input">
+              <option :value="null">{{ t('packageForm.placeholders.noPrerequisite') }}</option>
+              <option
+                v-for="pkg in prerequisitePackageOptions"
+                :key="pkg.id"
+                :value="pkg.id"
+              >
+                {{ pkg.name }}
+              </option>
+            </select>
+          </div>
+          <p class="text-xs text-themed-muted">
+            {{ t('packageForm.hints.requiredPackage') }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Visibility Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.visibility') }}
+        </h2>
+        <div class="space-y-4">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input v-model="form.globalShared" type="checkbox" class="w-4 h-4 rounded" />
+            <span class="text-sm text-themed-secondary">{{ t('packageForm.fields.publicAccess') }}</span>
+          </label>
+          <p class="text-xs text-themed-muted">{{ t('packageForm.hints.publicAccess') }}</p>
+          
+          <div v-if="form.globalShared" class="mt-4 space-y-4 pl-6 border-l-2" :class="themeStore.isDark ? 'border-gray-700' : 'border-gray-200'">
+            <div>
+              <label class="block text-xs text-themed-muted mb-1.5">
+                {{ t('packageForm.fields.globalMaxInstances') }}
+              </label>
+              <select
+                v-model.number="form.globalMaxInstances"
+                required
+                class="input"
+              >
+                <option v-for="count in publicPackageMaxInstanceOptions" :key="count" :value="count">
+                  {{ count }}
+                </option>
+              </select>
+              <p class="text-xs text-themed-muted mt-1">{{ t('packageForm.hints.globalMaxInstances') }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Advanced Options Section -->
+      <div class="card p-6">
+        <h2 class="text-lg font-medium mb-4" :class="themeStore.isDark ? 'text-gray-200' : 'text-gray-900'">
+          {{ t('packageForm.sections.advancedOptions') }}
+        </h2>
+        <div class="flex items-center gap-6">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input v-model="form.privileged" type="checkbox" class="w-4 h-4 rounded" />
+            <span class="text-sm text-themed-secondary">{{ t('admin.packages.privileged') }}</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input v-model="form.nested" type="checkbox" class="w-4 h-4 rounded" />
+            <span class="text-sm text-themed-secondary">{{ t('admin.packages.nested') }}</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Form Actions -->
+      <div class="flex items-center justify-end gap-4">
+        <button type="button" class="btn-secondary" @click="goBack">
+          {{ t('common.cancel') }}
+        </button>
+        <button type="submit" class="btn-primary" :disabled="saving || !form.name">
+          <span v-if="saving" class="loading-spinner w-4 h-4"></span>
+          <span v-else>{{ isEditMode ? t('common.save') : t('common.create') }}</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
new file mode 100644
index 0000000..ba7b910
--- /dev/null
+++ b/client/tailwind.config.js
@@ -0,0 +1,85 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}'
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Vercel/GitHub 风格 - 极简黑白灰
+        gray: {
+          50: '#fafafa',
+          100: '#f5f5f5',
+          200: '#e5e5e5',
+          300: '#d4d4d4',
+          400: '#a3a3a3',
+          500: '#737373',
+          600: '#525252',
+          700: '#404040',
+          800: '#262626',
+          900: '#171717',
+          950: '#0a0a0a'
+        },
+        // 强调色 - 简洁蓝
+        accent: {
+          DEFAULT: '#0070f3',
+          hover: '#0060df',
+          light: '#3291ff'
+        },
+        // 状态色
+        success: '#10b981',
+        warning: '#f59e0b', 
+        error: '#ef4444'
+      },
+      fontFamily: {
+        sans: [
+          'Geist',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Noto Sans SC',
+          'sans-serif'
+        ],
+        mono: [
+          'Geist Mono',
+          'SF Mono',
+          'Monaco',
+          'Consolas',
+          'monospace'
+        ]
+      },
+      fontSize: {
+        '2xs': ['0.6875rem', { lineHeight: '1rem' }],
+      },
+      borderRadius: {
+        DEFAULT: '6px',
+        'lg': '8px',
+        'xl': '12px'
+      },
+      boxShadow: {
+        'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1)',
+        'border': '0 0 0 1px rgb(255 255 255 / 0.1)',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.15s ease-out',
+        'slide-up': 'slideUp 0.2s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' }
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(4px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        }
+      }
+    }
+  },
+  plugins: [
+    require('@tailwindcss/forms')({ strategy: 'class' })
+  ]
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 0000000..4b0bc8a
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Vue specific */
+    "types": ["vite/client"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
new file mode 100644
index 0000000..9338fe5
--- /dev/null
+++ b/client/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}
+
diff --git a/client/vite.config.ts b/client/vite.config.ts
new file mode 100644
index 0000000..2fe148b
--- /dev/null
+++ b/client/vite.config.ts
@@ -0,0 +1,109 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import obfuscator from 'rollup-plugin-obfuscator'
+import { fileURLToPath, URL } from 'node:url'
+
+export default defineConfig(({ mode }) => {
+  const isProd = mode === 'production'
+
+  return {
+    // 使用绝对路径根路径，在生产环境中静态资源需要从根路径加载
+    base: '/',
+    
+    plugins: [
+      vue(),
+      // 代码混淆器（仅生产环境）
+      // 注意：如果遇到白屏问题，可能是混淆配置过于严格
+      // 临时禁用混淆以排查问题，确认问题后再启用
+      // isProd && obfuscator({
+      //   include: ['src/**/*.{js,ts,vue}'],
+      //   exclude: [/node_modules/, /\.html$/],
+      //   options: {
+      //     compact: true,
+      //     controlFlowFlattening: true,
+      //     controlFlowFlatteningThreshold: 0.3,
+      //     identifierNamesGenerator: 'hexadecimal',
+      //     stringArray: true,
+      //     stringArrayEncoding: ['base64'],
+      //     stringArrayThreshold: 0.5,
+      //     debugProtection: false,
+      //     debugProtectionInterval: 0,
+      //     disableConsoleOutput: true,
+      //   }
+      // }),
+    ].filter(Boolean),
+    
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    
+    server: {
+      port: 43173,
+      proxy: {
+        '/api': {
+          target: 'http://localhost:8888',
+          changeOrigin: true,
+          ws: true,
+          timeout: 10000,
+          configure: (proxy, _options) => {
+            proxy.on('error', (err, _req, res) => {
+              // Handle proxy errors gracefully
+              if (res && !res.headersSent) {
+                res.writeHead(500, {
+                  'Content-Type': 'application/json'
+                })
+                res.end(JSON.stringify({ error: 'Proxy error: Backend server may not be ready yet' }))
+              }
+            })
+            proxy.on('proxyReq', (proxyReq, req, _res) => {
+              // Log proxy requests in development
+              if (process.env.NODE_ENV === 'development') {
+                console.log(`[Proxy] ${req.method} ${req.url} -> ${proxyReq.path}`)
+              }
+            })
+          }
+        }
+      }
+    },
+    
+    build: {
+      outDir: 'dist',
+      sourcemap: false,
+      assetsDir: 'assets',
+      // 优化代码分割，提升加载性能
+      rollupOptions: {
+        output: {
+          // 使用纯哈希命名，不包含文件名，提高安全性
+          chunkFileNames: 'assets/[hash].js',
+          entryFileNames: 'assets/[hash].js',
+          assetFileNames: 'assets/[hash].[ext]',
+          // 手动分割代码块，优化缓存和加载
+          manualChunks: {
+            // 核心 Vue 库（基础库，缓存利用率高）
+            'vue-core': ['vue', 'vue-router', 'pinia'],
+            // 国际化库
+            'vue-i18n': ['vue-i18n'],
+            // 网络请求库
+            'axios': ['axios'],
+          },
+        },
+        onwarn(warning, warn) {
+          // 忽略 sourcemap 相关警告
+          if (warning.message?.includes('sourcemap')) return
+          warn(warning)
+        }
+      },
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          // 临时保留 console.error 和 console.warn，方便调试白屏问题
+          drop_console: false,  // 临时禁用，方便调试
+          pure_funcs: ['console.log', 'console.debug', 'console.info'],  // 只移除这些
+          drop_debugger: true,
+        },
+      },
+    },
+  }
+})
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
new file mode 100644
index 0000000..340c812
--- /dev/null
+++ b/docker-compose.dev.yml
@@ -0,0 +1,76 @@
+services:
+  dev:
+    image: node:22-alpine
+    working_dir: /workspace
+    ports:
+      - "43173:43173"
+      - "8888:8888"
+    environment:
+      - NODE_ENV=development
+      - HOST=0.0.0.0
+      - PORT=8888
+      - FRONTEND_URL=${FRONTEND_URL:-https://idev.bitpd.com}
+      - DATABASE_URL=postgresql://incudal:incudal_dev_password@db:5432/incudal
+      - REDIS_URL=redis://redis:6379
+      - CHOKIDAR_USEPOLLING=true
+      - WATCHPACK_POLLING=true
+      - DB_POOL_MAX=${DB_POOL_MAX:-20}
+      - DB_POOL_MIN=${DB_POOL_MIN:-5}
+      - DB_CONNECTION_TIMEOUT=${DB_CONNECTION_TIMEOUT:-5000}
+      - DB_IDLE_TIMEOUT=${DB_IDLE_TIMEOUT:-30000}
+      - DB_STATEMENT_TIMEOUT=${DB_STATEMENT_TIMEOUT:-30000}
+      - DB_QUERY_TIMEOUT=${DB_QUERY_TIMEOUT:-30000}
+      - TRAFFIC_CONCURRENCY_PER_HOST=${TRAFFIC_CONCURRENCY_PER_HOST:-10}
+      - TRAFFIC_HOST_CONCURRENCY=${TRAFFIC_HOST_CONCURRENCY:-3}
+      - DB_WORKER_BACKOFF_MS=${DB_WORKER_BACKOFF_MS:-15000}
+    volumes:
+      - .:/workspace
+      - node_modules:/workspace/node_modules
+      - client_node_modules:/workspace/client/node_modules
+      - server_node_modules:/workspace/server/node_modules
+      - pnpm_store:/root/.local/share/pnpm/store
+    command: >
+      sh -lc "
+      corepack enable &&
+      corepack prepare pnpm@9.14.2 --activate &&
+      pnpm install &&
+      pnpm --filter server exec prisma migrate deploy &&
+      pnpm exec concurrently
+      -n server,client,migrate
+      -c blue,green,magenta
+      \"pnpm --filter server dev\"
+      \"pnpm --filter client dev --host 0.0.0.0 --port 43173\"
+      \"node scripts/watch-migrations.mjs\"
+      "
+    depends_on:
+      db:
+        condition: service_healthy
+      redis:
+        condition: service_started
+
+  db:
+    image: postgres:16-alpine
+    environment:
+      - POSTGRES_USER=incudal
+      - POSTGRES_PASSWORD=incudal_dev_password
+      - POSTGRES_DB=incudal
+    volumes:
+      - postgres_data_dev:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U incudal"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  redis:
+    image: redis:7-alpine
+    volumes:
+      - redis_data_dev:/data
+
+volumes:
+  node_modules:
+  client_node_modules:
+  server_node_modules:
+  pnpm_store:
+  postgres_data_dev:
+  redis_data_dev:
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..2434797
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,74 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "127.0.0.1:${APP_PORT:-3000}:3000"
+    environment:
+      - NODE_ENV=production
+      - HOST=0.0.0.0
+      - PORT=3000
+      - DATABASE_URL=postgresql://${POSTGRES_USER:-incudal}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-incudal}
+      - REDIS_URL=redis://:${REDIS_PASSWORD:-}@redis:6379
+      - JWT_SECRET=${JWT_SECRET}
+      - COOKIE_SECRET=${COOKIE_SECRET:-}
+      - ENCRYPTION_KEY=${ENCRYPTION_KEY}
+      - FRONTEND_URL=${FRONTEND_URL:-}
+      - SITE_URL=${SITE_URL:-}
+      - LOG_LEVEL=${LOG_LEVEL:-info}
+      - DISABLE_REQUEST_LOG=${DISABLE_REQUEST_LOG:-true}
+      - ADMIN_PASSWORD=${ADMIN_PASSWORD:-}
+      - ALERT_WEBHOOK_URL=${ALERT_WEBHOOK_URL:-}
+      - DB_POOL_MAX=${DB_POOL_MAX:-20}
+      - DB_POOL_MIN=${DB_POOL_MIN:-5}
+      - DB_CONNECTION_TIMEOUT=${DB_CONNECTION_TIMEOUT:-5000}
+      - DB_IDLE_TIMEOUT=${DB_IDLE_TIMEOUT:-30000}
+      - DB_STATEMENT_TIMEOUT=${DB_STATEMENT_TIMEOUT:-30000}
+      - DB_QUERY_TIMEOUT=${DB_QUERY_TIMEOUT:-30000}
+      - TRAFFIC_CONCURRENCY_PER_HOST=${TRAFFIC_CONCURRENCY_PER_HOST:-10}
+      - TRAFFIC_HOST_CONCURRENCY=${TRAFFIC_HOST_CONCURRENCY:-3}
+      - DB_WORKER_BACKOFF_MS=${DB_WORKER_BACKOFF_MS:-15000}
+    volumes:
+      - ./server/certs:/app/server/certs:ro
+    depends_on:
+      db:
+        condition: service_healthy
+      redis:
+        condition: service_started
+    restart: unless-stopped
+
+  db:
+    image: postgres:16-alpine
+    environment:
+      - POSTGRES_USER=${POSTGRES_USER:-incudal}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+      - POSTGRES_DB=${POSTGRES_DB:-incudal}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-incudal}"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    command: redis-server --requirepass ${REDIS_PASSWORD:-}
+    volumes:
+      - redis_data:/data
+    restart: unless-stopped
+
+volumes:
+  postgres_data:
+  redis_data:
+
+networks:
+  default:
+    driver: bridge
+    enable_ipv6: true
+    ipam:
+      config:
+        - subnet: "172.31.0.0/16"
+        - subnet: "fd42:dead:beef:10::/64"
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..41897a6
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,332 @@
+{
+  "name": "incudal",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "incudal",
+      "version": "1.0.0",
+      "devDependencies": {
+        "concurrently": "^9.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
+      "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "4.1.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.8.3",
+        "supports-color": "8.1.1",
+        "tree-kill": "1.2.2",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8de79cd
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "incudal",
+  "version": "1.0.0",
+  "description": "Incudal 容器虚拟化管理平台",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently -n \"server,client\" -c \"blue,green\" \"pnpm --filter server dev\" \"pnpm --filter client dev\"",
+    "build": "pnpm --filter client build && pnpm --filter server build",
+    "start": "pnpm --filter server start",
+    "lint": "pnpm -r lint",
+    "migrate:data": "pnpm --filter server migrate:data",
+    "test:prisma": "pnpm --filter server test:prisma"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "packageManager": "pnpm@9.14.2"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..9298d96
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,8322 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      concurrently:
+        specifier: ^9.1.0
+        version: 9.2.1
+
+  client:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^12.0.0
+        version: 12.8.2(typescript@5.9.3)
+      '@xterm/addon-clipboard':
+        specifier: ^0.2.0
+        version: 0.2.0
+      '@xterm/addon-fit':
+        specifier: ^0.11.0
+        version: 0.11.0
+      '@xterm/addon-image':
+        specifier: ^0.9.0
+        version: 0.9.0
+      '@xterm/addon-search':
+        specifier: ^0.16.0
+        version: 0.16.0
+      '@xterm/addon-serialize':
+        specifier: ^0.14.0
+        version: 0.14.0
+      '@xterm/addon-unicode11':
+        specifier: ^0.9.0
+        version: 0.9.0
+      '@xterm/addon-web-links':
+        specifier: ^0.12.0
+        version: 0.12.0
+      '@xterm/addon-webgl':
+        specifier: ^0.19.0
+        version: 0.19.0
+      '@xterm/xterm':
+        specifier: ^6.0.0
+        version: 6.0.0
+      axios:
+        specifier: ^1.7.9
+        version: 1.13.2
+      flag-icons:
+        specifier: ^7.5.0
+        version: 7.5.0
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
+      pinia:
+        specifier: ^2.2.8
+        version: 2.3.1(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
+      simple-icons:
+        specifier: ^16.1.0
+        version: 16.1.0
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.25(typescript@5.9.3)
+      vue-i18n:
+        specifier: ^11.2.2
+        version: 11.2.2(vue@3.5.25(typescript@5.9.3))
+      vue-router:
+        specifier: ^4.5.0
+        version: 4.6.3(vue@3.5.25(typescript@5.9.3))
+      vue-turnstile:
+        specifier: ^1.0.11
+        version: 1.0.11(vue@3.5.25(typescript@5.9.3))
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.16.0
+        version: 9.39.1
+      '@tailwindcss/forms':
+        specifier: ^0.5.9
+        version: 0.5.10(tailwindcss@3.4.18(tsx@4.21.0))
+      '@types/node':
+        specifier: ^24.10.1
+        version: 24.10.1
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.48.1
+        version: 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.48.1
+        version: 8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.1
+        version: 5.2.4(vite@6.4.1(@types/node@24.10.1)(jiti@1.21.7)(terser@5.44.1)(tsx@4.21.0))(vue@3.5.25(typescript@5.9.3))
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.22(postcss@8.5.6)
+      eslint:
+        specifier: ^9.16.0
+        version: 9.39.1(jiti@1.21.7)
+      eslint-plugin-vue:
+        specifier: ^9.32.0
+        version: 9.33.0(eslint@9.39.1(jiti@1.21.7))
+      javascript-obfuscator:
+        specifier: ^5.0.1
+        version: 5.0.1
+      postcss:
+        specifier: ^8.4.49
+        version: 8.5.6
+      rollup-plugin-obfuscator:
+        specifier: ^1.1.0
+        version: 1.1.0(javascript-obfuscator@5.0.1)(rollup@4.53.3)
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.18(tsx@4.21.0)
+      terser:
+        specifier: ^5.44.1
+        version: 5.44.1
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^6.0.3
+        version: 6.4.1(@types/node@24.10.1)(jiti@1.21.7)(terser@5.44.1)(tsx@4.21.0)
+      vue-eslint-parser:
+        specifier: ^9.4.2
+        version: 9.4.3(eslint@9.39.1(jiti@1.21.7))
+      vue-tsc:
+        specifier: ^3.1.6
+        version: 3.1.6(typescript@5.9.3)
+
+  server:
+    dependencies:
+      '@fastify/cookie':
+        specifier: ^11.0.2
+        version: 11.0.2
+      '@fastify/cors':
+        specifier: ^10.0.1
+        version: 10.1.0
+      '@fastify/helmet':
+        specifier: ^13.0.2
+        version: 13.0.2
+      '@fastify/jwt':
+        specifier: ^9.0.1
+        version: 9.1.0
+      '@fastify/multipart':
+        specifier: ^9.0.3
+        version: 9.4.0
+      '@fastify/rate-limit':
+        specifier: ^10.3.0
+        version: 10.3.0
+      '@fastify/static':
+        specifier: ^8.0.3
+        version: 8.3.0
+      '@fastify/websocket':
+        specifier: ^11.0.1
+        version: 11.2.0
+      '@libsql/client':
+        specifier: ^0.14.0
+        version: 0.14.0
+      '@prisma/adapter-pg':
+        specifier: ^7.1.0
+        version: 7.1.0
+      '@prisma/client':
+        specifier: ^7.1.0
+        version: 7.1.0(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(typescript@5.9.3)
+      '@types/ws':
+        specifier: ^8.18.1
+        version: 8.18.1
+      basic-ftp:
+        specifier: ^5.0.5
+        version: 5.0.5
+      bcryptjs:
+        specifier: ^2.4.3
+        version: 2.4.3
+      dotenv:
+        specifier: ^17.2.3
+        version: 17.2.3
+      drizzle-orm:
+        specifier: ^0.38.2
+        version: 0.38.4(@electric-sql/pglite@0.3.2)(@libsql/client@0.14.0)(@prisma/client@7.1.0(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(typescript@5.9.3))(@types/pg@8.15.6)(@types/react@19.2.7)(mysql2@3.15.3)(pg@8.16.3)(postgres@3.4.7)(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(react@19.2.1)(sql.js@1.13.0)
+      fastify:
+        specifier: ^5.1.0
+        version: 5.6.2
+      fastify-cloudflare-turnstile:
+        specifier: ^2.0.2
+        version: 2.0.2
+      ip-address:
+        specifier: ^10.1.0
+        version: 10.1.0
+      jsonwebtoken:
+        specifier: ^9.0.3
+        version: 9.0.3
+      nanoid:
+        specifier: ^5.1.6
+        version: 5.1.6
+      node-cron:
+        specifier: ^4.2.1
+        version: 4.2.1
+      nodemailer:
+        specifier: ^7.0.11
+        version: 7.0.11
+      otplib:
+        specifier: ^12.0.1
+        version: 12.0.1
+      p-limit:
+        specifier: ^7.2.0
+        version: 7.2.0
+      pg:
+        specifier: ^8.16.3
+        version: 8.16.3
+      pino-pretty:
+        specifier: ^13.0.0
+        version: 13.1.3
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
+      ssh2-sftp-client:
+        specifier: ^11.0.0
+        version: 11.0.0
+      undici:
+        specifier: ^7.1.0
+        version: 7.16.0
+      webdav:
+        specifier: ^5.8.0
+        version: 5.8.0
+      ws:
+        specifier: ^8.18.3
+        version: 8.18.3
+    devDependencies:
+      '@types/node':
+        specifier: ^24.10.1
+        version: 24.10.1
+      '@types/node-cron':
+        specifier: ^3.0.11
+        version: 3.0.11
+      '@types/nodemailer':
+        specifier: ^7.0.4
+        version: 7.0.4
+      '@types/pg':
+        specifier: ^8.15.6
+        version: 8.15.6
+      '@types/qrcode':
+        specifier: ^1.5.6
+        version: 1.5.6
+      '@types/ssh2-sftp-client':
+        specifier: ^9.0.4
+        version: 9.0.6
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.48.1
+        version: 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser':
+        specifier: ^8.48.1
+        version: 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      cross-env:
+        specifier: ^10.1.0
+        version: 10.1.0
+      drizzle-kit:
+        specifier: ^0.30.1
+        version: 0.30.6
+      prisma:
+        specifier: ^7.1.0
+        version: 7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@aws-crypto/sha256-browser@5.2.0':
+    resolution: {integrity: sha512-AXfN/lGotSQwu6HNcEsIASo7kWXZ5HYWvfOmSNKDsEqC4OashTp8alTmaz+F7TC2L083SFv5RdB+qU3Vs1kZqw==}
+
+  '@aws-crypto/sha256-js@5.2.0':
+    resolution: {integrity: sha512-FFQQyu7edu4ufvIZ+OadFpHHOt+eSTBaYaki44c+akjg7qZg9oOQeLlk77F6tSYqjDAFClrHJk9tMf0HdVyOvA==}
+    engines: {node: '>=16.0.0'}
+
+  '@aws-crypto/supports-web-crypto@5.2.0':
+    resolution: {integrity: sha512-iAvUotm021kM33eCdNfwIN//F77/IADDSs58i+MDaOqFrVjZo9bAal0NK7HurRuWLLpF1iLX7gbWrjHjeo+YFg==}
+
+  '@aws-crypto/util@5.2.0':
+    resolution: {integrity: sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ==}
+
+  '@aws-sdk/client-sesv2@3.947.0':
+    resolution: {integrity: sha512-XttaaNh2rPf0PrGShFIGh56QyNstKfQ9ozAfE+TGsYsMNok3yxbdZnFub8PrI1boYceJolhK2m6VBk3J5nDkAg==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/client-sso@3.947.0':
+    resolution: {integrity: sha512-sDwcO8SP290WSErY1S8pz8hTafeghKmmWjNVks86jDK30wx62CfazOTeU70IpWgrUBEygyXk/zPogHsUMbW2Rg==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/core@3.947.0':
+    resolution: {integrity: sha512-Khq4zHhuAkvCFuFbgcy3GrZTzfSX7ZIjIcW1zRDxXRLZKRtuhnZdonqTUfaWi5K42/4OmxkYNpsO7X7trQOeHw==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-env@3.947.0':
+    resolution: {integrity: sha512-VR2V6dRELmzwAsCpK4GqxUi6UW5WNhAXS9F9AzWi5jvijwJo3nH92YNJUP4quMpgFZxJHEWyXLWgPjh9u0zYOA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-http@3.947.0':
+    resolution: {integrity: sha512-inF09lh9SlHj63Vmr5d+LmwPXZc2IbK8lAruhOr3KLsZAIHEgHgGPXWDC2ukTEMzg0pkexQ6FOhXXad6klK4RA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-ini@3.947.0':
+    resolution: {integrity: sha512-A2ZUgJUJZERjSzvCi2NR/hBVbVkTXPD0SdKcR/aITb30XwF+n3T963b+pJl90qhOspoy7h0IVYNR7u5Nr9tJdQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-login@3.947.0':
+    resolution: {integrity: sha512-u7M3hazcB7aJiVwosNdJRbIJDzbwQ861NTtl6S0HmvWpixaVb7iyhJZWg8/plyUznboZGBm7JVEdxtxv3u0bTA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-node@3.947.0':
+    resolution: {integrity: sha512-S0Zqebr71KyrT6J4uYPhwV65g4V5uDPHnd7dt2W34FcyPu+hVC7Hx4MFmsPyVLeT5cMCkkZvmY3kAoEzgUPJJg==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-process@3.947.0':
+    resolution: {integrity: sha512-WpanFbHe08SP1hAJNeDdBDVz9SGgMu/gc0XJ9u3uNpW99nKZjDpvPRAdW7WLA4K6essMjxWkguIGNOpij6Do2Q==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-sso@3.947.0':
+    resolution: {integrity: sha512-NktnVHTGaUMaozxycYrepvb3yfFquHTQ53lt6hBEVjYBzK3C4tVz0siUpr+5RMGLSiZ5bLBp2UjJPgwx4i4waQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/credential-provider-web-identity@3.947.0':
+    resolution: {integrity: sha512-gokm/e/YHiHLrZgLq4j8tNAn8RJDPbIcglFRKgy08q8DmAqHQ8MXAKW3eS0QjAuRXU9mcMmUo1NrX6FRNBCCPw==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/middleware-host-header@3.936.0':
+    resolution: {integrity: sha512-tAaObaAnsP1XnLGndfkGWFuzrJYuk9W0b/nLvol66t8FZExIAf/WdkT2NNAWOYxljVs++oHnyHBCxIlaHrzSiw==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/middleware-logger@3.936.0':
+    resolution: {integrity: sha512-aPSJ12d3a3Ea5nyEnLbijCaaYJT2QjQ9iW+zGh5QcZYXmOGWbKVyPSxmVOboZQG+c1M8t6d2O7tqrwzIq8L8qw==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/middleware-recursion-detection@3.936.0':
+    resolution: {integrity: sha512-l4aGbHpXM45YNgXggIux1HgsCVAvvBoqHPkqLnqMl9QVapfuSTjJHfDYDsx1Xxct6/m7qSMUzanBALhiaGO2fA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/middleware-sdk-s3@3.947.0':
+    resolution: {integrity: sha512-DS2tm5YBKhPW2PthrRBDr6eufChbwXe0NjtTZcYDfUCXf0OR+W6cIqyKguwHMJ+IyYdey30AfVw9/Lb5KB8U8A==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/middleware-user-agent@3.947.0':
+    resolution: {integrity: sha512-7rpKV8YNgCP2R4F9RjWZFcD2R+SO/0R4VHIbY9iZJdH2MzzJ8ZG7h8dZ2m8QkQd1fjx4wrFJGGPJUTYXPV3baA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/nested-clients@3.947.0':
+    resolution: {integrity: sha512-DjRJEYNnHUTu9kGPPQDTSXquwSEd6myKR4ssI4FaYLFhdT3ldWpj73yYt807H3tdmhS7vPmdVqchSJnjurUQAw==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/region-config-resolver@3.936.0':
+    resolution: {integrity: sha512-wOKhzzWsshXGduxO4pqSiNyL9oUtk4BEvjWm9aaq6Hmfdoydq6v6t0rAGHWPjFwy9z2haovGRi3C8IxdMB4muw==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/signature-v4-multi-region@3.947.0':
+    resolution: {integrity: sha512-UaYmzoxf9q3mabIA2hc4T6x5YSFUG2BpNjAZ207EA1bnQMiK+d6vZvb83t7dIWL/U1de1sGV19c1C81Jf14rrA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/token-providers@3.947.0':
+    resolution: {integrity: sha512-X/DyB8GuK44rsE89Tn5+s542B3PhGbXQSgV8lvqHDzvicwCt0tWny6790st6CPETrVVV2K3oJMfG5U3/jAmaZA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/types@3.936.0':
+    resolution: {integrity: sha512-uz0/VlMd2pP5MepdrHizd+T+OKfyK4r3OA9JI+L/lPKg0YFQosdJNCKisr6o70E3dh8iMpFYxF1UN/4uZsyARg==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/util-arn-parser@3.893.0':
+    resolution: {integrity: sha512-u8H4f2Zsi19DGnwj5FSZzDMhytYF/bCh37vAtBsn3cNDL3YG578X5oc+wSX54pM3tOxS+NY7tvOAo52SW7koUA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/util-endpoints@3.936.0':
+    resolution: {integrity: sha512-0Zx3Ntdpu+z9Wlm7JKUBOzS9EunwKAb4KdGUQQxDqh5Lc3ta5uBoub+FgmVuzwnmBu9U1Os8UuwVTH0Lgu+P5w==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/util-locate-window@3.893.0':
+    resolution: {integrity: sha512-T89pFfgat6c8nMmpI8eKjBcDcgJq36+m9oiXbcUzeU55MP9ZuGgBomGjGnHaEyF36jenW9gmg3NfZDm0AO2XPg==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws-sdk/util-user-agent-browser@3.936.0':
+    resolution: {integrity: sha512-eZ/XF6NxMtu+iCma58GRNRxSq4lHo6zHQLOZRIeL/ghqYJirqHdenMOwrzPettj60KWlv827RVebP9oNVrwZbw==}
+
+  '@aws-sdk/util-user-agent-node@3.947.0':
+    resolution: {integrity: sha512-+vhHoDrdbb+zerV4noQk1DHaUMNzWFWPpPYjVTwW2186k5BEJIecAMChYkghRrBVJ3KPWP1+JnZwOd72F3d4rQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      aws-crt: '>=1.0.0'
+    peerDependenciesMeta:
+      aws-crt:
+        optional: true
+
+  '@aws-sdk/xml-builder@3.930.0':
+    resolution: {integrity: sha512-YIfkD17GocxdmlUVc3ia52QhcWuRIUJonbF8A2CYfcWNV3HzvAqpcPeC0bYUhkK+8e8YO1ARnLKZQE0TlwzorA==}
+    engines: {node: '>=18.0.0'}
+
+  '@aws/lambda-invoke-store@0.2.2':
+    resolution: {integrity: sha512-C0NBLsIqzDIae8HFw9YIrIBsbc0xTiOtt7fAukGPnqQ/+zZNaq+4jhuccltK0QuWHBnNm/a6kLIRA6GFiM10eg==}
+    engines: {node: '>=18.0.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
+    engines: {node: '>=6.9.0'}
+
+  '@buttercup/fetch@0.2.1':
+    resolution: {integrity: sha512-sCgECOx8wiqY8NN1xN22BqqKzXYIG2AicNLlakOAI4f0WgyLVUbAigMf8CZhBtJxdudTcB1gD5lciqi44jwJvg==}
+
+  '@chevrotain/cst-dts-gen@10.5.0':
+    resolution: {integrity: sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==}
+
+  '@chevrotain/gast@10.5.0':
+    resolution: {integrity: sha512-pXdMJ9XeDAbgOWKuD1Fldz4ieCs6+nLNmyVhe2gZVqoO7v8HXuHYs5OV2EzUtbuai37TlOAQHrTDvxMnvMJz3A==}
+
+  '@chevrotain/types@10.5.0':
+    resolution: {integrity: sha512-f1MAia0x/pAVPWH/T73BJVyO2XU5tI4/iE7cnxb7tqdNTNhQI3Uq3XkqcoteTmD4t1aM0LbHCJOhgIDn07kl2A==}
+
+  '@chevrotain/utils@10.5.0':
+    resolution: {integrity: sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==}
+
+  '@drizzle-team/brocli@0.10.2':
+    resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
+
+  '@electric-sql/pglite-socket@0.0.6':
+    resolution: {integrity: sha512-6RjmgzphIHIBA4NrMGJsjNWK4pu+bCWJlEWlwcxFTVY3WT86dFpKwbZaGWZV6C5Rd7sCk1Z0CI76QEfukLAUXw==}
+    hasBin: true
+    peerDependencies:
+      '@electric-sql/pglite': 0.3.2
+
+  '@electric-sql/pglite-tools@0.2.7':
+    resolution: {integrity: sha512-9dAccClqxx4cZB+Ar9B+FZ5WgxDc/Xvl9DPrTWv+dYTf0YNubLzi4wHHRGRGhrJv15XwnyKcGOZAP1VXSneSUg==}
+    peerDependencies:
+      '@electric-sql/pglite': 0.3.2
+
+  '@electric-sql/pglite@0.3.2':
+    resolution: {integrity: sha512-zfWWa+V2ViDCY/cmUfRqeWY1yLto+EpxjXnZzenB1TyxsTiXaTWeZFIZw6mac52BsuQm0RjCnisjBtdBaXOI6w==}
+
+  '@epic-web/invariant@1.0.0':
+    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
+
+  '@esbuild-kit/core-utils@3.3.2':
+    resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
+    deprecated: 'Merged into tsx: https://tsx.is'
+
+  '@esbuild-kit/esm-loader@2.6.5':
+    resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
+    deprecated: 'Merged into tsx: https://tsx.is'
+
+  '@esbuild/aix-ppc64@0.19.12':
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.27.1':
+    resolution: {integrity: sha512-HHB50pdsBX6k47S4u5g/CaLjqS3qwaOVE5ILsq64jyzgMhLuCuZ8rGzM9yhsAjfjkbgUPMzZEPa7DAp7yz6vuA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.18.20':
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.19.12':
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.27.1':
+    resolution: {integrity: sha512-45fuKmAJpxnQWixOGCrS+ro4Uvb4Re9+UTieUY2f8AEc+t7d4AaZ6eUJ3Hva7dtrxAAWHtlEFsXFMAgNnGU9uQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.18.20':
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.19.12':
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.1':
+    resolution: {integrity: sha512-kFqa6/UcaTbGm/NncN9kzVOODjhZW8e+FRdSeypWe6j33gzclHtwlANs26JrupOntlcWmB0u8+8HZo8s7thHvg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.18.20':
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.19.12':
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.1':
+    resolution: {integrity: sha512-LBEpOz0BsgMEeHgenf5aqmn/lLNTFXVfoWMUox8CtWWYK9X4jmQzWjoGoNb8lmAYml/tQ/Ysvm8q7szu7BoxRQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.18.20':
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.19.12':
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.27.1':
+    resolution: {integrity: sha512-veg7fL8eMSCVKL7IW4pxb54QERtedFDfY/ASrumK/SbFsXnRazxY4YykN/THYqFnFwJ0aVjiUrVG2PwcdAEqQQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.18.20':
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.19.12':
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.1':
+    resolution: {integrity: sha512-+3ELd+nTzhfWb07Vol7EZ+5PTbJ/u74nC6iv4/lwIU99Ip5uuY6QoIf0Hn4m2HoV0qcnRivN3KSqc+FyCHjoVQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.18.20':
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.19.12':
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.27.1':
+    resolution: {integrity: sha512-/8Rfgns4XD9XOSXlzUDepG8PX+AVWHliYlUkFI3K3GB6tqbdjYqdhcb4BKRd7C0BhZSoaCxhv8kTcBrcZWP+xg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.18.20':
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.19.12':
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.1':
+    resolution: {integrity: sha512-GITpD8dK9C+r+5yRT/UKVT36h/DQLOHdwGVwwoHidlnA168oD3uxA878XloXebK4Ul3gDBBIvEdL7go9gCUFzQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.18.20':
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.19.12':
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.27.1':
+    resolution: {integrity: sha512-W9//kCrh/6in9rWIBdKaMtuTTzNj6jSeG/haWBADqLLa9P8O5YSRDzgD5y9QBok4AYlzS6ARHifAb75V6G670Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.18.20':
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.19.12':
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.1':
+    resolution: {integrity: sha512-ieMID0JRZY/ZeCrsFQ3Y3NlHNCqIhTprJfDgSB3/lv5jJZ8FX3hqPyXWhe+gvS5ARMBJ242PM+VNz/ctNj//eA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.18.20':
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.19.12':
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.1':
+    resolution: {integrity: sha512-VIUV4z8GD8rtSVMfAj1aXFahsi/+tcoXXNYmXgzISL+KB381vbSTNdeZHHHIYqFyXcoEhu9n5cT+05tRv13rlw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.18.20':
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.19.12':
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.1':
+    resolution: {integrity: sha512-l4rfiiJRN7sTNI//ff65zJ9z8U+k6zcCg0LALU5iEWzY+a1mVZ8iWC1k5EsNKThZ7XCQ6YWtsZ8EWYm7r1UEsg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.18.20':
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.19.12':
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.1':
+    resolution: {integrity: sha512-U0bEuAOLvO/DWFdygTHWY8C067FXz+UbzKgxYhXC0fDieFa0kDIra1FAhsAARRJbvEyso8aAqvPdNxzWuStBnA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.18.20':
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.19.12':
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.1':
+    resolution: {integrity: sha512-NzdQ/Xwu6vPSf/GkdmRNsOfIeSGnh7muundsWItmBsVpMoNPVpM61qNzAVY3pZ1glzzAxLR40UyYM23eaDDbYQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.18.20':
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.19.12':
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.1':
+    resolution: {integrity: sha512-7zlw8p3IApcsN7mFw0O1Z1PyEk6PlKMu18roImfl3iQHTnr/yAfYv6s4hXPidbDoI2Q0pW+5xeoM4eTCC0UdrQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.18.20':
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.19.12':
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.1':
+    resolution: {integrity: sha512-cGj5wli+G+nkVQdZo3+7FDKC25Uh4ZVwOAK6A06Hsvgr8WqBBuOy/1s+PUEd/6Je+vjfm6stX0kmib5b/O2Ykw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.18.20':
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.19.12':
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.1':
+    resolution: {integrity: sha512-z3H/HYI9MM0HTv3hQZ81f+AKb+yEoCRlUby1F80vbQ5XdzEMyY/9iNlAmhqiBKw4MJXwfgsh7ERGEOhrM1niMA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.1':
+    resolution: {integrity: sha512-wzC24DxAvk8Em01YmVXyjl96Mr+ecTPyOuADAvjGg+fyBpGmxmcr2E5ttf7Im8D0sXZihpxzO1isus8MdjMCXQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.18.20':
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.19.12':
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.1':
+    resolution: {integrity: sha512-1YQ8ybGi2yIXswu6eNzJsrYIGFpnlzEWRl6iR5gMgmsrR0FcNoV1m9k9sc3PuP5rUBLshOZylc9nqSgymI+TYg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-arm64@0.27.1':
+    resolution: {integrity: sha512-5Z+DzLCrq5wmU7RDaMDe2DVXMRm2tTDvX2KU14JJVBN2CT/qov7XVix85QoJqHltpvAOZUAc3ndU56HSMWrv8g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.18.20':
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.19.12':
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.1':
+    resolution: {integrity: sha512-Q73ENzIdPF5jap4wqLtsfh8YbYSZ8Q0wnxplOlZUOyZy7B4ZKW8DXGWgTCZmF8VWD7Tciwv5F4NsRf6vYlZtqg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.1':
+    resolution: {integrity: sha512-ajbHrGM/XiK+sXM0JzEbJAen+0E+JMQZ2l4RR4VFwvV9JEERx+oxtgkpoKv1SevhjavK2z2ReHk32pjzktWbGg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.18.20':
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.19.12':
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.27.1':
+    resolution: {integrity: sha512-IPUW+y4VIjuDVn+OMzHc5FV4GubIwPnsz6ubkvN8cuhEqH81NovB53IUlrlBkPMEPxvNnf79MGBoz8rZ2iW8HA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.18.20':
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.19.12':
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.27.1':
+    resolution: {integrity: sha512-RIVRWiljWA6CdVu8zkWcRmGP7iRRIIwvhDKem8UMBjPql2TXM5PkDVvvrzMtj1V+WFPB4K7zkIGM7VzRtFkjdg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.18.20':
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.19.12':
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.1':
+    resolution: {integrity: sha512-2BR5M8CPbptC1AK5JbJT1fWrHLvejwZidKx3UMSF0ecHMa+smhi16drIrCEggkgviBwLYd5nwrFLSl5Kho96RQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.18.20':
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.19.12':
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.1':
+    resolution: {integrity: sha512-d5X6RMYv6taIymSk8JBP+nxv8DQAMY6A51GPgusqLdK9wBz5wWIXy1KjTck6HnjE9hqJzJRdk+1p/t5soSbCtw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.3':
+    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.1':
+    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@fastify/accept-negotiator@2.0.1':
+    resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
+
+  '@fastify/ajv-compiler@4.0.5':
+    resolution: {integrity: sha512-KoWKW+MhvfTRWL4qrhUwAAZoaChluo0m0vbiJlGMt2GXvL4LVPQEjt8kSpHI3IBq5Rez8fg+XeH3cneztq+C7A==}
+
+  '@fastify/busboy@3.2.0':
+    resolution: {integrity: sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==}
+
+  '@fastify/cookie@11.0.2':
+    resolution: {integrity: sha512-GWdwdGlgJxyvNv+QcKiGNevSspMQXncjMZ1J8IvuDQk0jvkzgWWZFNC2En3s+nHndZBGV8IbLwOI/sxCZw/mzA==}
+
+  '@fastify/cors@10.1.0':
+    resolution: {integrity: sha512-MZyBCBJtII60CU9Xme/iE4aEy8G7QpzGR8zkdXZkDFt7ElEMachbE61tfhAG/bvSaULlqlf0huMT12T7iqEmdQ==}
+
+  '@fastify/deepmerge@3.2.1':
+    resolution: {integrity: sha512-N5Oqvltoa2r9z1tbx4xjky0oRR60v+T47Ic4J1ukoVQcptLOrIdRnCSdTGmOmajZuHVKlTnfcmrjyqsGEW1ztA==}
+
+  '@fastify/error@4.2.0':
+    resolution: {integrity: sha512-RSo3sVDXfHskiBZKBPRgnQTtIqpi/7zhJOEmAxCiBcM7d0uwdGdxLlsCaLzGs8v8NnxIRlfG0N51p5yFaOentQ==}
+
+  '@fastify/fast-json-stringify-compiler@5.0.3':
+    resolution: {integrity: sha512-uik7yYHkLr6fxd8hJSZ8c+xF4WafPK+XzneQDPU+D10r5X19GW8lJcom2YijX2+qtFF1ENJlHXKFM9ouXNJYgQ==}
+
+  '@fastify/forwarded@3.0.1':
+    resolution: {integrity: sha512-JqDochHFqXs3C3Ml3gOY58zM7OqO9ENqPo0UqAjAjH8L01fRZqwX9iLeX34//kiJubF7r2ZQHtBRU36vONbLlw==}
+
+  '@fastify/helmet@13.0.2':
+    resolution: {integrity: sha512-tO1QMkOfNeCt9l4sG/FiWErH4QMm+RjHzbMTrgew1DYOQ2vb/6M1G2iNABBrD7Xq6dUk+HLzWW8u+rmmhQHifA==}
+
+  '@fastify/jwt@9.1.0':
+    resolution: {integrity: sha512-CiGHCnS5cPMdb004c70sUWhQTfzrJHAeTywt7nVw6dAiI0z1o4WRvU94xfijhkaId4bIxTCOjFgn4sU+Gvk43w==}
+
+  '@fastify/merge-json-schemas@0.2.1':
+    resolution: {integrity: sha512-OA3KGBCy6KtIvLf8DINC5880o5iBlDX4SxzLQS8HorJAbqluzLRn80UXU0bxZn7UOFhFgpRJDasfwn9nG4FG4A==}
+
+  '@fastify/multipart@9.4.0':
+    resolution: {integrity: sha512-Z404bzZeLSXTBmp/trCBuoVFX28pM7rhv849Q5TsbTFZHuk1lc4QjQITTPK92DKVpXmNtJXeHSSc7GYvqFpxAQ==}
+
+  '@fastify/proxy-addr@5.1.0':
+    resolution: {integrity: sha512-INS+6gh91cLUjB+PVHfu1UqcB76Sqtpyp7bnL+FYojhjygvOPA9ctiD/JDKsyD9Xgu4hUhCSJBPig/w7duNajw==}
+
+  '@fastify/rate-limit@10.3.0':
+    resolution: {integrity: sha512-eIGkG9XKQs0nyynatApA3EVrojHOuq4l6fhB4eeCk4PIOeadvOJz9/4w3vGI44Go17uaXOWEcPkaD8kuKm7g6Q==}
+
+  '@fastify/send@4.1.0':
+    resolution: {integrity: sha512-TMYeQLCBSy2TOFmV95hQWkiTYgC/SEx7vMdV+wnZVX4tt8VBLKzmH8vV9OzJehV0+XBfg+WxPMt5wp+JBUKsVw==}
+
+  '@fastify/static@8.3.0':
+    resolution: {integrity: sha512-yKxviR5PH1OKNnisIzZKmgZSus0r2OZb8qCSbqmw34aolT4g3UlzYfeBRym+HJ1J471CR8e2ldNub4PubD1coA==}
+
+  '@fastify/websocket@11.2.0':
+    resolution: {integrity: sha512-3HrDPbAG1CzUCqnslgJxppvzaAZffieOVbLp1DAy1huCSynUWPifSvfdEDUR8HlJLp3sp1A36uOM2tJogADS8w==}
+
+  '@hono/node-server@1.19.6':
+    resolution: {integrity: sha512-Shz/KjlIeAhfiuE93NDKVdZ7HdBVLQAfdbaXEaoAVO3ic9ibRSLGIQGkcBbFyuLr+7/1D5ZCINM8B+6IvXeMtw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: ^4
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@intlify/core-base@11.2.2':
+    resolution: {integrity: sha512-0mCTBOLKIqFUP3BzwuFW23hYEl9g/wby6uY//AC5hTgQfTsM2srCYF2/hYGp+a5DZ/HIFIgKkLJMzXTt30r0JQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.2.2':
+    resolution: {integrity: sha512-XS2p8Ff5JxWsKhgfld4/MRQzZRQ85drMMPhb7Co6Be4ZOgqJX1DzcZt0IFgGTycgqL8rkYNwgnD443Q+TapOoA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.2.2':
+    resolution: {integrity: sha512-OtCmyFpSXxNu/oET/aN6HtPCbZ01btXVd0f3w00YsHOb13Kverk1jzA2k47pAekM55qbUw421fvPF1yxZ+gicw==}
+    engines: {node: '>= 16'}
+
+  '@inversifyjs/common@1.3.3':
+    resolution: {integrity: sha512-ZH0wrgaJwIo3s9gMCDM2wZoxqrJ6gB97jWXncROfYdqZJv8f3EkqT57faZqN5OTeHWgtziQ6F6g3L8rCvGceCw==}
+
+  '@inversifyjs/core@1.3.4':
+    resolution: {integrity: sha512-gCCmA4BdbHEFwvVZ2elWgHuXZWk6AOu/1frxsS+2fWhjEk2c/IhtypLo5ytSUie1BCiT6i9qnEo4bruBomQsAA==}
+
+  '@inversifyjs/reflect-metadata-utils@0.2.3':
+    resolution: {integrity: sha512-d3D0o9TeSlvaGM2I24wcNw/Aj3rc4OYvHXOKDC09YEph5fMMiKd6fq1VTQd9tOkDNWvVbw+cnt45Wy9P/t5Lvw==}
+    peerDependencies:
+      reflect-metadata: 0.2.2
+
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@javascript-obfuscator/escodegen@2.3.1':
+    resolution: {integrity: sha512-Z0HEAVwwafOume+6LFXirAVZeuEMKWuPzpFbQhCEU9++BMz0IwEa9bmedJ+rMn/IlXRBID9j3gQ0XYAa6jM10g==}
+    engines: {node: '>=6.0'}
+
+  '@javascript-obfuscator/estraverse@5.4.0':
+    resolution: {integrity: sha512-CZFX7UZVN9VopGbjTx4UXaXsi9ewoM1buL0kY7j1ftYdSs7p2spv9opxFjHlQ/QGTgh4UqufYqJJ0WKLml7b6w==}
+    engines: {node: '>=4.0'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@libsql/client@0.14.0':
+    resolution: {integrity: sha512-/9HEKfn6fwXB5aTEEoMeFh4CtG0ZzbncBb1e++OCdVpgKZ/xyMsIVYXm0w7Pv4RUel803vE6LwniB3PqD72R0Q==}
+
+  '@libsql/core@0.14.0':
+    resolution: {integrity: sha512-nhbuXf7GP3PSZgdCY2Ecj8vz187ptHlZQ0VRc751oB2C1W8jQUXKKklvt7t1LJiUTQBVJuadF628eUk+3cRi4Q==}
+
+  '@libsql/darwin-arm64@0.4.7':
+    resolution: {integrity: sha512-yOL742IfWUlUevnI5PdnIT4fryY3LYTdLm56bnY0wXBw7dhFcnjuA7jrH3oSVz2mjZTHujxoITgAE7V6Z+eAbg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@libsql/darwin-x64@0.4.7':
+    resolution: {integrity: sha512-ezc7V75+eoyyH07BO9tIyJdqXXcRfZMbKcLCeF8+qWK5nP8wWuMcfOVywecsXGRbT99zc5eNra4NEx6z5PkSsA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@libsql/hrana-client@0.7.0':
+    resolution: {integrity: sha512-OF8fFQSkbL7vJY9rfuegK1R7sPgQ6kFMkDamiEccNUvieQ+3urzfDFI616oPl8V7T9zRmnTkSjMOImYCAVRVuw==}
+
+  '@libsql/isomorphic-fetch@0.3.1':
+    resolution: {integrity: sha512-6kK3SUK5Uu56zPq/Las620n5aS9xJq+jMBcNSOmjhNf/MUvdyji4vrMTqD7ptY7/4/CAVEAYDeotUz60LNQHtw==}
+    engines: {node: '>=18.0.0'}
+
+  '@libsql/isomorphic-ws@0.1.5':
+    resolution: {integrity: sha512-DtLWIH29onUYR00i0GlQ3UdcTRC6EP4u9w/h9LxpUZJWRMARk6dQwZ6Jkd+QdwVpuAOrdxt18v0K2uIYR3fwFg==}
+
+  '@libsql/linux-arm64-gnu@0.4.7':
+    resolution: {integrity: sha512-WlX2VYB5diM4kFfNaYcyhw5y+UJAI3xcMkEUJZPtRDEIu85SsSFrQ+gvoKfcVh76B//ztSeEX2wl9yrjF7BBCA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@libsql/linux-arm64-musl@0.4.7':
+    resolution: {integrity: sha512-6kK9xAArVRlTCpWeqnNMCoXW1pe7WITI378n4NpvU5EJ0Ok3aNTIC2nRPRjhro90QcnmLL1jPcrVwO4WD1U0xw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@libsql/linux-x64-gnu@0.4.7':
+    resolution: {integrity: sha512-CMnNRCmlWQqqzlTw6NeaZXzLWI8bydaXDke63JTUCvu8R+fj/ENsLrVBtPDlxQ0wGsYdXGlrUCH8Qi9gJep0yQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@libsql/linux-x64-musl@0.4.7':
+    resolution: {integrity: sha512-nI6tpS1t6WzGAt1Kx1n1HsvtBbZ+jHn0m7ogNNT6pQHZQj7AFFTIMeDQw/i/Nt5H38np1GVRNsFe99eSIMs9XA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@libsql/win32-x64-msvc@0.4.7':
+    resolution: {integrity: sha512-7pJzOWzPm6oJUxml+PCDRzYQ4A1hTMHAciTAHfFK4fkbDZX33nWPVG7Y3vqdKtslcwAzwmrNDc6sXy2nwWnbiw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@lukeed/ms@2.0.2':
+    resolution: {integrity: sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA==}
+    engines: {node: '>=8'}
+
+  '@mrleebo/prisma-ast@0.12.1':
+    resolution: {integrity: sha512-JwqeCQ1U3fvccttHZq7Tk0m/TMC6WcFAQZdukypW3AzlJYKYTGNVd1ANU2GuhKnv4UQuOFj3oAl0LLG/gxFN1w==}
+    engines: {node: '>=16'}
+
+  '@neon-rs/load@0.0.4':
+    resolution: {integrity: sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@otplib/core@12.0.1':
+    resolution: {integrity: sha512-4sGntwbA/AC+SbPhbsziRiD+jNDdIzsZ3JUyfZwjtKyc/wufl1pnSIaG4Uqx8ymPagujub0o92kgBnB89cuAMA==}
+
+  '@otplib/plugin-crypto@12.0.1':
+    resolution: {integrity: sha512-qPuhN3QrT7ZZLcLCyKOSNhuijUi9G5guMRVrxq63r9YNOxxQjPm59gVxLM+7xGnHnM6cimY57tuKsjK7y9LM1g==}
+
+  '@otplib/plugin-thirty-two@12.0.1':
+    resolution: {integrity: sha512-MtT+uqRso909UkbrrYpJ6XFjj9D+x2Py7KjTO9JDPhL0bJUYVu5kFP4TFZW4NFAywrAtFRxOVY261u0qwb93gA==}
+
+  '@otplib/preset-default@12.0.1':
+    resolution: {integrity: sha512-xf1v9oOJRyXfluBhMdpOkr+bsE+Irt+0D5uHtvg6x1eosfmHCsCC6ej/m7FXiWqdo0+ZUI6xSKDhJwc8yfiOPQ==}
+
+  '@otplib/preset-v11@12.0.1':
+    resolution: {integrity: sha512-9hSetMI7ECqbFiKICrNa4w70deTUfArtwXykPUvSHWOdzOlfa9ajglu7mNCntlvxycTiOAXkQGwjQCzzDEMRMg==}
+
+  '@petamoriken/float16@3.9.3':
+    resolution: {integrity: sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g==}
+
+  '@pinojs/redact@0.4.0':
+    resolution: {integrity: sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==}
+
+  '@prisma/adapter-pg@7.1.0':
+    resolution: {integrity: sha512-DSAnUwkKfX4bUzhkrjGN4IBQzwg0nvFw2W17H0Oa532I5w9nLtTJ9mAEGDs1nUBEGRAsa0c7qsf8CSgfJ4DsBQ==}
+
+  '@prisma/client-runtime-utils@7.1.0':
+    resolution: {integrity: sha512-39xmeBrNTN40FzF34aJMjfX1PowVCqoT3UKUWBBSP3aXV05NRqGBC3x2wCDs96ti6ZgdiVzqnRDHtbzU8X+lPQ==}
+
+  '@prisma/client@7.1.0':
+    resolution: {integrity: sha512-qf7GPYHmS/xybNiSOpzv9wBo+UwqfL2PeyX+08v+KVHDI0AlSCQIh5bBySkH3alu06NX9wy98JEnckhMHoMFfA==}
+    engines: {node: ^20.19 || ^22.12 || >=24.0}
+    peerDependencies:
+      prisma: '*'
+      typescript: '>=5.4.0'
+    peerDependenciesMeta:
+      prisma:
+        optional: true
+      typescript:
+        optional: true
+
+  '@prisma/config@7.1.0':
+    resolution: {integrity: sha512-Uz+I43Wn1RYNHtuYtOhOnUcNMWp2Pd3GUDDKs37xlHptCGpzEG3MRR9L+8Y2ISMsMI24z/Ni+ww6OB/OO8M0sQ==}
+
+  '@prisma/debug@6.8.2':
+    resolution: {integrity: sha512-4muBSSUwJJ9BYth5N8tqts8JtiLT8QI/RSAzEogwEfpbYGFo9mYsInsVo8dqXdPO2+Rm5OG5q0qWDDE3nyUbVg==}
+
+  '@prisma/debug@7.1.0':
+    resolution: {integrity: sha512-pPAckG6etgAsEBusmZiFwM9bldLSNkn++YuC4jCTJACdK5hLOVnOzX7eSL2FgaU6Gomd6wIw21snUX2dYroMZQ==}
+
+  '@prisma/dev@0.15.0':
+    resolution: {integrity: sha512-KhWaipnFlS/fWEs6I6Oqjcy2S08vKGmxJ5LexqUl/3Ve0EgLUsZwdKF0MvqPM5F5ttw8GtfZarjM5y7VLwv9Ow==}
+
+  '@prisma/driver-adapter-utils@7.1.0':
+    resolution: {integrity: sha512-AlVLzeXkw81+47MvQ9M8DvTiHkRfJ8xzklTbYjpskb0cTTDVHboTI/OVwT6Wcep/bNvfLKJYO0nylBiM5rxgww==}
+
+  '@prisma/engines-version@7.1.0-6.ab635e6b9d606fa5c8fb8b1a7f909c3c3c1c98ba':
+    resolution: {integrity: sha512-qZUevUh+yPhGT28rDQnV8V2kLnFjirzhVD67elRPIJHRsUV/mkII10HSrJrhK/U2GYgAxXR2VEREtq7AsfS8qw==}
+
+  '@prisma/engines@7.1.0':
+    resolution: {integrity: sha512-KQlraOybdHAzVv45KWKJzpR9mJLkib7/TyApQpqrsL7FUHfgjIcy8jrVGt3iNfG6/GDDl+LNlJ84JSQwIfdzxA==}
+
+  '@prisma/fetch-engine@7.1.0':
+    resolution: {integrity: sha512-GZYF5Q8kweXWGfn87hTu17kw7x1DgnehgKoE4Zg1BmHYF3y1Uu0QRY/qtSE4veH3g+LW8f9HKqA0tARG66bxxQ==}
+
+  '@prisma/get-platform@6.8.2':
+    resolution: {integrity: sha512-vXSxyUgX3vm1Q70QwzwkjeYfRryIvKno1SXbIqwSptKwqKzskINnDUcx85oX+ys6ooN2ATGSD0xN2UTfg6Zcow==}
+
+  '@prisma/get-platform@7.1.0':
+    resolution: {integrity: sha512-lq8hMdjKiZftuT5SssYB3EtQj8+YjL24/ZTLflQqzFquArKxBcyp6Xrblto+4lzIKJqnpOjfMiBjMvl7YuD7+Q==}
+
+  '@prisma/query-plan-executor@6.18.0':
+    resolution: {integrity: sha512-jZ8cfzFgL0jReE1R10gT8JLHtQxjWYLiQ//wHmVYZ2rVkFHoh0DT8IXsxcKcFlfKN7ak7k6j0XMNn2xVNyr5cA==}
+
+  '@prisma/studio-core@0.8.2':
+    resolution: {integrity: sha512-/iAEWEUpTja+7gVMu1LtR2pPlvDmveAwMHdTWbDeGlT7yiv0ZTCPpmeAGdq/Y9aJ9Zj1cEGBXGRbmmNPj022PQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.53.3':
+    resolution: {integrity: sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.53.3':
+    resolution: {integrity: sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.53.3':
+    resolution: {integrity: sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.53.3':
+    resolution: {integrity: sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.53.3':
+    resolution: {integrity: sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.53.3':
+    resolution: {integrity: sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
+    resolution: {integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
+    resolution: {integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.53.3':
+    resolution: {integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.53.3':
+    resolution: {integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.53.3':
+    resolution: {integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
+    resolution: {integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
+    resolution: {integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.53.3':
+    resolution: {integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.53.3':
+    resolution: {integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.53.3':
+    resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.53.3':
+    resolution: {integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openharmony-arm64@4.53.3':
+    resolution: {integrity: sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.53.3':
+    resolution: {integrity: sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.53.3':
+    resolution: {integrity: sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.53.3':
+    resolution: {integrity: sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.53.3':
+    resolution: {integrity: sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@smithy/abort-controller@4.2.5':
+    resolution: {integrity: sha512-j7HwVkBw68YW8UmFRcjZOmssE77Rvk0GWAIN1oFBhsaovQmZWYCIcGa9/pwRB0ExI8Sk9MWNALTjftjHZea7VA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/config-resolver@4.4.3':
+    resolution: {integrity: sha512-ezHLe1tKLUxDJo2LHtDuEDyWXolw8WGOR92qb4bQdWq/zKenO5BvctZGrVJBK08zjezSk7bmbKFOXIVyChvDLw==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/core@3.18.7':
+    resolution: {integrity: sha512-axG9MvKhMWOhFbvf5y2DuyTxQueO0dkedY9QC3mAfndLosRI/9LJv8WaL0mw7ubNhsO4IuXX9/9dYGPFvHrqlw==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/credential-provider-imds@4.2.5':
+    resolution: {integrity: sha512-BZwotjoZWn9+36nimwm/OLIcVe+KYRwzMjfhd4QT7QxPm9WY0HiOV8t/Wlh+HVUif0SBVV7ksq8//hPaBC/okQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/fetch-http-handler@5.3.6':
+    resolution: {integrity: sha512-3+RG3EA6BBJ/ofZUeTFJA7mHfSYrZtQIrDP9dI8Lf7X6Jbos2jptuLrAAteDiFVrmbEmLSuRG/bUKzfAXk7dhg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/hash-node@4.2.5':
+    resolution: {integrity: sha512-DpYX914YOfA3UDT9CN1BM787PcHfWRBB43fFGCYrZFUH0Jv+5t8yYl+Pd5PW4+QzoGEDvn5d5QIO4j2HyYZQSA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/invalid-dependency@4.2.5':
+    resolution: {integrity: sha512-2L2erASEro1WC5nV+plwIMxrTXpvpfzl4e+Nre6vBVRR2HKeGGcvpJyyL3/PpiSg+cJG2KpTmZmq934Olb6e5A==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/is-array-buffer@2.2.0':
+    resolution: {integrity: sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==}
+    engines: {node: '>=14.0.0'}
+
+  '@smithy/is-array-buffer@4.2.0':
+    resolution: {integrity: sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/middleware-content-length@4.2.5':
+    resolution: {integrity: sha512-Y/RabVa5vbl5FuHYV2vUCwvh/dqzrEY/K2yWPSqvhFUwIY0atLqO4TienjBXakoy4zrKAMCZwg+YEqmH7jaN7A==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/middleware-endpoint@4.3.14':
+    resolution: {integrity: sha512-v0q4uTKgBM8dsqGjqsabZQyH85nFaTnFcgpWU1uydKFsdyyMzfvOkNum9G7VK+dOP01vUnoZxIeRiJ6uD0kjIg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/middleware-retry@4.4.14':
+    resolution: {integrity: sha512-Z2DG8Ej7FyWG1UA+7HceINtSLzswUgs2np3sZX0YBBxCt+CXG4QUxv88ZDS3+2/1ldW7LqtSY1UO/6VQ1pND8Q==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/middleware-serde@4.2.6':
+    resolution: {integrity: sha512-VkLoE/z7e2g8pirwisLz8XJWedUSY8my/qrp81VmAdyrhi94T+riBfwP+AOEEFR9rFTSonC/5D2eWNmFabHyGQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/middleware-stack@4.2.5':
+    resolution: {integrity: sha512-bYrutc+neOyWxtZdbB2USbQttZN0mXaOyYLIsaTbJhFsfpXyGWUxJpEuO1rJ8IIJm2qH4+xJT0mxUSsEDTYwdQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/node-config-provider@4.3.5':
+    resolution: {integrity: sha512-UTurh1C4qkVCtqggI36DGbLB2Kv8UlcFdMXDcWMbqVY2uRg0XmT9Pb4Vj6oSQ34eizO1fvR0RnFV4Axw4IrrAg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/node-http-handler@4.4.5':
+    resolution: {integrity: sha512-CMnzM9R2WqlqXQGtIlsHMEZfXKJVTIrqCNoSd/QpAyp+Dw0a1Vps13l6ma1fH8g7zSPNsA59B/kWgeylFuA/lw==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/property-provider@4.2.5':
+    resolution: {integrity: sha512-8iLN1XSE1rl4MuxvQ+5OSk/Zb5El7NJZ1td6Tn+8dQQHIjp59Lwl6bd0+nzw6SKm2wSSriH2v/I9LPzUic7EOg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/protocol-http@5.3.5':
+    resolution: {integrity: sha512-RlaL+sA0LNMp03bf7XPbFmT5gN+w3besXSWMkA8rcmxLSVfiEXElQi4O2IWwPfxzcHkxqrwBFMbngB8yx/RvaQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/querystring-builder@4.2.5':
+    resolution: {integrity: sha512-y98otMI1saoajeik2kLfGyRp11e5U/iJYH/wLCh3aTV/XutbGT9nziKGkgCaMD1ghK7p6htHMm6b6scl9JRUWg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/querystring-parser@4.2.5':
+    resolution: {integrity: sha512-031WCTdPYgiQRYNPXznHXof2YM0GwL6SeaSyTH/P72M1Vz73TvCNH2Nq8Iu2IEPq9QP2yx0/nrw5YmSeAi/AjQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/service-error-classification@4.2.5':
+    resolution: {integrity: sha512-8fEvK+WPE3wUAcDvqDQG1Vk3ANLR8Px979te96m84CbKAjBVf25rPYSzb4xU4hlTyho7VhOGnh5i62D/JVF0JQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/shared-ini-file-loader@4.4.0':
+    resolution: {integrity: sha512-5WmZ5+kJgJDjwXXIzr1vDTG+RhF9wzSODQBfkrQ2VVkYALKGvZX1lgVSxEkgicSAFnFhPj5rudJV0zoinqS0bA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/signature-v4@5.3.5':
+    resolution: {integrity: sha512-xSUfMu1FT7ccfSXkoLl/QRQBi2rOvi3tiBZU2Tdy3I6cgvZ6SEi9QNey+lqps/sJRnogIS+lq+B1gxxbra2a/w==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/smithy-client@4.9.10':
+    resolution: {integrity: sha512-Jaoz4Jw1QYHc1EFww/E6gVtNjhoDU+gwRKqXP6C3LKYqqH2UQhP8tMP3+t/ePrhaze7fhLE8vS2q6vVxBANFTQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/types@4.9.0':
+    resolution: {integrity: sha512-MvUbdnXDTwykR8cB1WZvNNwqoWVaTRA0RLlLmf/cIFNMM2cKWz01X4Ly6SMC4Kks30r8tT3Cty0jmeWfiuyHTA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/url-parser@4.2.5':
+    resolution: {integrity: sha512-VaxMGsilqFnK1CeBX+LXnSuaMx4sTL/6znSZh2829txWieazdVxr54HmiyTsIbpOTLcf5nYpq9lpzmwRdxj6rQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-base64@4.3.0':
+    resolution: {integrity: sha512-GkXZ59JfyxsIwNTWFnjmFEI8kZpRNIBfxKjv09+nkAWPt/4aGaEWMM04m4sxgNVWkbt2MdSvE3KF/PfX4nFedQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-body-length-browser@4.2.0':
+    resolution: {integrity: sha512-Fkoh/I76szMKJnBXWPdFkQJl2r9SjPt3cMzLdOB6eJ4Pnpas8hVoWPYemX/peO0yrrvldgCUVJqOAjUrOLjbxg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-body-length-node@4.2.1':
+    resolution: {integrity: sha512-h53dz/pISVrVrfxV1iqXlx5pRg3V2YWFcSQyPyXZRrZoZj4R4DeWRDo1a7dd3CPTcFi3kE+98tuNyD2axyZReA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-buffer-from@2.2.0':
+    resolution: {integrity: sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==}
+    engines: {node: '>=14.0.0'}
+
+  '@smithy/util-buffer-from@4.2.0':
+    resolution: {integrity: sha512-kAY9hTKulTNevM2nlRtxAG2FQ3B2OR6QIrPY3zE5LqJy1oxzmgBGsHLWTcNhWXKchgA0WHW+mZkQrng/pgcCew==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-config-provider@4.2.0':
+    resolution: {integrity: sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-defaults-mode-browser@4.3.13':
+    resolution: {integrity: sha512-hlVLdAGrVfyNei+pKIgqDTxfu/ZI2NSyqj4IDxKd5bIsIqwR/dSlkxlPaYxFiIaDVrBy0he8orsFy+Cz119XvA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-defaults-mode-node@4.2.16':
+    resolution: {integrity: sha512-F1t22IUiJLHrxW9W1CQ6B9PN+skZ9cqSuzB18Eh06HrJPbjsyZ7ZHecAKw80DQtyGTRcVfeukKaCRYebFwclbg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-endpoints@3.2.5':
+    resolution: {integrity: sha512-3O63AAWu2cSNQZp+ayl9I3NapW1p1rR5mlVHcF6hAB1dPZUQFfRPYtplWX/3xrzWthPGj5FqB12taJJCfH6s8A==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-hex-encoding@4.2.0':
+    resolution: {integrity: sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-middleware@4.2.5':
+    resolution: {integrity: sha512-6Y3+rvBF7+PZOc40ybeZMcGln6xJGVeY60E7jy9Mv5iKpMJpHgRE6dKy9ScsVxvfAYuEX4Q9a65DQX90KaQ3bA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-retry@4.2.5':
+    resolution: {integrity: sha512-GBj3+EZBbN4NAqJ/7pAhsXdfzdlznOh8PydUijy6FpNIMnHPSMO2/rP4HKu+UFeikJxShERk528oy7GT79YiJg==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-stream@4.5.6':
+    resolution: {integrity: sha512-qWw/UM59TiaFrPevefOZ8CNBKbYEP6wBAIlLqxn3VAIo9rgnTNc4ASbVrqDmhuwI87usnjhdQrxodzAGFFzbRQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-uri-escape@4.2.0':
+    resolution: {integrity: sha512-igZpCKV9+E/Mzrpq6YacdTQ0qTiLm85gD6N/IrmyDvQFA4UnU3d5g3m8tMT/6zG/vVkWSU+VxeUyGonL62DuxA==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/util-utf8@2.3.0':
+    resolution: {integrity: sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==}
+    engines: {node: '>=14.0.0'}
+
+  '@smithy/util-utf8@4.2.0':
+    resolution: {integrity: sha512-zBPfuzoI8xyBtR2P6WQj63Rz8i3AmfAaJLuNG8dWsfvPe8lO4aCPYLn879mEgHndZH1zQ2oXmG8O1GGzzaoZiw==}
+    engines: {node: '>=18.0.0'}
+
+  '@smithy/uuid@1.1.0':
+    resolution: {integrity: sha512-4aUIteuyxtBUhVdiQqcDhKFitwfd9hqoSDYY2KRXiWtgoWJ9Bmise+KfEPDiVHWeJepvF8xJO9/9+WDIciMFFw==}
+    engines: {node: '>=18.0.0'}
+
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@tailwindcss/forms@0.5.10':
+    resolution: {integrity: sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/minimatch@3.0.5':
+    resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
+
+  '@types/node-cron@3.0.11':
+    resolution: {integrity: sha512-0ikrnug3/IyneSHqCBeslAhlK2aBfYek1fGo4bP4QnZPmiqSGRK+Oy7ZMisLWkesffJvQ1cqAcBnJC+8+nxIAg==}
+
+  '@types/node@18.19.130':
+    resolution: {integrity: sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==}
+
+  '@types/node@24.10.1':
+    resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==}
+
+  '@types/nodemailer@7.0.4':
+    resolution: {integrity: sha512-ee8fxWqOchH+Hv6MDDNNy028kwvVnLplrStm4Zf/3uHWw5zzo8FoYYeffpJtGs2wWysEumMH0ZIdMGMY1eMAow==}
+
+  '@types/pg@8.15.6':
+    resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
+
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
+
+  '@types/react@19.2.7':
+    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
+
+  '@types/ssh2-sftp-client@9.0.6':
+    resolution: {integrity: sha512-4+KvXO/V77y9VjI2op2T8+RCGI/GXQAwR0q5Qkj/EJ5YSeyKszqZP6F8i3H3txYoBqjc7sgorqyvBP3+w1EHyg==}
+
+  '@types/ssh2@1.15.5':
+    resolution: {integrity: sha512-N1ASjp/nXH3ovBHddRJpli4ozpk6UdDYIX4RJWFa9L1YKnzdhTlVmiGHm4DZnj/jLbqZpes4aeR30EFGQtvhQQ==}
+
+  '@types/validator@13.15.10':
+    resolution: {integrity: sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==}
+
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
+  '@typescript-eslint/eslint-plugin@8.48.1':
+    resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.48.1
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.48.1':
+    resolution: {integrity: sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.48.1':
+    resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.48.1':
+    resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.48.1':
+    resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.48.1':
+    resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.48.1':
+    resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.48.1':
+    resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.48.1':
+    resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.48.1':
+    resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@vitejs/plugin-vue@5.2.4':
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
+
+  '@volar/language-core@2.4.26':
+    resolution: {integrity: sha512-hH0SMitMxnB43OZpyF1IFPS9bgb2I3bpCh76m2WEK7BE0A0EzpYsRp0CCH2xNKshr7kacU5TQBLYn4zj7CG60A==}
+
+  '@volar/source-map@2.4.26':
+    resolution: {integrity: sha512-JJw0Tt/kSFsIRmgTQF4JSt81AUSI1aEye5Zl65EeZ8H35JHnTvFGmpDOBn5iOxd48fyGE+ZvZBp5FcgAy/1Qhw==}
+
+  '@volar/typescript@2.4.26':
+    resolution: {integrity: sha512-N87ecLD48Sp6zV9zID/5yuS1+5foj0DfuYGdQ6KHj/IbKvyKv1zNX6VCmnKYwtmHadEO6mFc2EKISiu3RDPAvA==}
+
+  '@vue/compiler-core@3.5.25':
+    resolution: {integrity: sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==}
+
+  '@vue/compiler-dom@3.5.25':
+    resolution: {integrity: sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==}
+
+  '@vue/compiler-sfc@3.5.25':
+    resolution: {integrity: sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==}
+
+  '@vue/compiler-ssr@3.5.25':
+    resolution: {integrity: sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/language-core@3.1.6':
+    resolution: {integrity: sha512-F3BIvDVyyj+6Sgl9Ev9zsb/DJ48rrH2EiI5NnIEpJKo7Yk8v0n2QjfG7/RYyFhYSMOJcsf6aAt5hx4JaNbhKbg==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/reactivity@3.5.25':
+    resolution: {integrity: sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==}
+
+  '@vue/runtime-core@3.5.25':
+    resolution: {integrity: sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==}
+
+  '@vue/runtime-dom@3.5.25':
+    resolution: {integrity: sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==}
+
+  '@vue/server-renderer@3.5.25':
+    resolution: {integrity: sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==}
+    peerDependencies:
+      vue: 3.5.25
+
+  '@vue/shared@3.5.25':
+    resolution: {integrity: sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==}
+
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
+  '@xterm/addon-clipboard@0.2.0':
+    resolution: {integrity: sha512-Dl31BCtBhLaUEECUbEiVcCLvLBbaeGYdT7NofB8OJkGTD3MWgBsaLjXvfGAD4tQNHhm6mbKyYkR7XD8kiZsdNg==}
+
+  '@xterm/addon-fit@0.11.0':
+    resolution: {integrity: sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==}
+
+  '@xterm/addon-image@0.9.0':
+    resolution: {integrity: sha512-oYWA8/QAr5/Emwl1xL7WCoOqeG3IZfpzEz/OVq1j4Oi9934TQmHiyubClikRf0D/jL3JNiNuz/Lsqx0kXQ02BA==}
+
+  '@xterm/addon-search@0.16.0':
+    resolution: {integrity: sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA==}
+
+  '@xterm/addon-serialize@0.14.0':
+    resolution: {integrity: sha512-uteyTU1EkrQa2Ux6P/uFl2fzmXI46jy5uoQMKEOM0fKTyiW7cSn0WrFenHm5vO5uEXX/GpwW/FgILvv3r0WbkA==}
+
+  '@xterm/addon-unicode11@0.9.0':
+    resolution: {integrity: sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==}
+
+  '@xterm/addon-web-links@0.12.0':
+    resolution: {integrity: sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==}
+
+  '@xterm/addon-webgl@0.19.0':
+    resolution: {integrity: sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A==}
+
+  '@xterm/xterm@6.0.0':
+    resolution: {integrity: sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==}
+
+  abstract-logging@2.0.1:
+    resolution: {integrity: sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  alien-signals@3.1.1:
+    resolution: {integrity: sha512-ogkIWbVrLwKtHY6oOAXaYkAxP+cTH7V5FZ5+Tm4NZFd8VDZ6uNMDrfzqctTZ42eTMCSR3ne3otpcxmqSnFfPYA==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-differ@3.0.0:
+    resolution: {integrity: sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==}
+    engines: {node: '>=8'}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  arrify@2.0.1:
+    resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
+    engines: {node: '>=8'}
+
+  asn1.js@5.4.1:
+    resolution: {integrity: sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==}
+
+  asn1@0.2.6:
+    resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
+
+  assert@2.1.0:
+    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  atomic-sleep@1.0.0:
+    resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
+    engines: {node: '>=8.0.0'}
+
+  atomically@2.1.0:
+    resolution: {integrity: sha512-+gDffFXRW6sl/HCwbta7zK4uNqbPjv4YJEAdz7Vu+FLQHe77eZ4bvbJGi4hE0QPeJlMYMA3piXEr1UL3dAwx7Q==}
+
+  autoprefixer@10.4.22:
+    resolution: {integrity: sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  avvio@9.1.0:
+    resolution: {integrity: sha512-fYASnYi600CsH/j9EQov7lECAniYiBFiiAtBNuZYLA2leLe9qOvZzqYHFjtIj6gD2VMoMLP14834LFWvr4IfDw==}
+
+  aws-ssl-profiles@1.1.2:
+    resolution: {integrity: sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==}
+    engines: {node: '>= 6.0.0'}
+
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  base-64@1.0.0:
+    resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
+
+  baseline-browser-mapping@2.9.2:
+    resolution: {integrity: sha512-PxSsosKQjI38iXkmb3d0Y32efqyA0uW4s41u4IVBsLlWLhCiYNpH/AfNOVWRqCQBlD8TFJTz6OUWNd4DFJCnmw==}
+    hasBin: true
+
+  basic-ftp@5.0.5:
+    resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
+    engines: {node: '>=10.0.0'}
+
+  bcrypt-pbkdf@1.0.2:
+    resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
+
+  bcryptjs@2.4.3:
+    resolution: {integrity: sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bn.js@4.12.2:
+    resolution: {integrity: sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  bowser@2.13.1:
+    resolution: {integrity: sha512-OHawaAbjwx6rqICCKgSG0SAnT05bzd7ppyKLVUITZpANBaaMFBAsaNkto3LoQ31tyFP5kNujE8Cdx85G9VzOkw==}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buildcheck@0.0.7:
+    resolution: {integrity: sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA==}
+    engines: {node: '>=10.0.0'}
+
+  byte-length@1.0.2:
+    resolution: {integrity: sha512-ovBpjmsgd/teRmgcPh23d4gJvxDoXtAzEL9xTfMU8Yc2kqCDb7L9jAG0XHl1nzuGl+h3ebCIF1i62UFyA9V/2Q==}
+
+  c12@3.1.0:
+    resolution: {integrity: sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001759:
+    resolution: {integrity: sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chance@1.1.13:
+    resolution: {integrity: sha512-V6lQCljcLznE7tUYUM9EOAnnKXbctE6j/rdQkYOHIWbfGQbrzTsAXNW9CdU5XCo4ArXQCj/rb6HgxPlmGJcaUg==}
+
+  char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+
+  charenc@0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+
+  chevrotain@10.5.0:
+    resolution: {integrity: sha512-Pkv5rBY3+CsHOYfV5g/Vs5JY9WTHHDEKOlohI2XeygaZhUeqhAlldZ8Hz9cRmxu709bvS08YzxHdTPHhffc13A==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+
+  class-validator@0.14.3:
+    resolution: {integrity: sha512-rXXekcjofVN1LTOSw+u4u9WXVEUvNBVjORW154q/IdmYWy1nMbOU9aNtZB0t8m+FJQ9q91jlr2f9CwwUFdFMRA==}
+
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  concat-stream@2.0.0:
+    resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
+    engines: {'0': node >= 6.0}
+
+  concurrently@9.2.1:
+    resolution: {integrity: sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conf@15.0.2:
+    resolution: {integrity: sha512-JBSrutapCafTrddF9dH3lc7+T2tBycGF4uPkI4Js+g4vLLEhG6RZcFi3aJd5zntdf5tQxAejJt8dihkoQ/eSJw==}
+    engines: {node: '>=20'}
+
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  cpu-features@0.0.10:
+    resolution: {integrity: sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA==}
+    engines: {node: '>=10.0.0'}
+
+  cross-env@10.1.0:
+    resolution: {integrity: sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crypt@0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
+  dateformat@4.6.3:
+    resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
+
+  debounce-fn@6.0.0:
+    resolution: {integrity: sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==}
+    engines: {node: '>=18'}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge-ts@7.1.5:
+    resolution: {integrity: sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==}
+    engines: {node: '>=16.0.0'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  detect-libc@2.0.2:
+    resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==}
+    engines: {node: '>=8'}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dot-prop@10.1.0:
+    resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
+    engines: {node: '>=20'}
+
+  dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
+
+  dotenv@17.2.3:
+    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+    engines: {node: '>=12'}
+
+  drizzle-kit@0.30.6:
+    resolution: {integrity: sha512-U4wWit0fyZuGuP7iNmRleQyK2V8wCuv57vf5l3MnG4z4fzNTjY/U13M8owyQ5RavqvqxBifWORaR3wIUzlN64g==}
+    hasBin: true
+
+  drizzle-orm@0.38.4:
+    resolution: {integrity: sha512-s7/5BpLKO+WJRHspvpqTydxFob8i1vo2rEx4pY6TGY7QSMuUfWUuzaY0DIpXCkgHOo37BaFC+SJQb99dDUXT3Q==}
+    peerDependencies:
+      '@aws-sdk/client-rds-data': '>=3'
+      '@cloudflare/workers-types': '>=4'
+      '@electric-sql/pglite': '>=0.2.0'
+      '@libsql/client': '>=0.10.0'
+      '@libsql/client-wasm': '>=0.10.0'
+      '@neondatabase/serverless': '>=0.10.0'
+      '@op-engineering/op-sqlite': '>=2'
+      '@opentelemetry/api': ^1.4.1
+      '@planetscale/database': '>=1'
+      '@prisma/client': '*'
+      '@tidbcloud/serverless': '*'
+      '@types/better-sqlite3': '*'
+      '@types/pg': '*'
+      '@types/react': '>=18'
+      '@types/sql.js': '*'
+      '@vercel/postgres': '>=0.8.0'
+      '@xata.io/client': '*'
+      better-sqlite3: '>=7'
+      bun-types: '*'
+      expo-sqlite: '>=14.0.0'
+      knex: '*'
+      kysely: '*'
+      mysql2: '>=2'
+      pg: '>=8'
+      postgres: '>=3'
+      prisma: '*'
+      react: '>=18'
+      sql.js: '>=1'
+      sqlite3: '>=5'
+    peerDependenciesMeta:
+      '@aws-sdk/client-rds-data':
+        optional: true
+      '@cloudflare/workers-types':
+        optional: true
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      '@libsql/client-wasm':
+        optional: true
+      '@neondatabase/serverless':
+        optional: true
+      '@op-engineering/op-sqlite':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@prisma/client':
+        optional: true
+      '@tidbcloud/serverless':
+        optional: true
+      '@types/better-sqlite3':
+        optional: true
+      '@types/pg':
+        optional: true
+      '@types/react':
+        optional: true
+      '@types/sql.js':
+        optional: true
+      '@vercel/postgres':
+        optional: true
+      '@xata.io/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      bun-types:
+        optional: true
+      expo-sqlite:
+        optional: true
+      knex:
+        optional: true
+      kysely:
+        optional: true
+      mysql2:
+        optional: true
+      pg:
+        optional: true
+      postgres:
+        optional: true
+      prisma:
+        optional: true
+      react:
+        optional: true
+      sql.js:
+        optional: true
+      sqlite3:
+        optional: true
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexify@4.1.3:
+    resolution: {integrity: sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
+  effect@3.18.4:
+    resolution: {integrity: sha512-b1LXQJLe9D11wfnOKAk3PKxuqYshQ0Heez+y5pnkd3jLj1yx9QhM72zZ9uUrOQyNvrs2GZZd/3maL0ZV18YuDA==}
+
+  electron-to-chromium@1.5.264:
+    resolution: {integrity: sha512-1tEf0nLgltC3iy9wtlYDlQDc5Rg9lEKVjEmIHJ21rI9OcqkvD45K1oyNIRA4rR1z3LgJ7KeGzEBojVcV6m4qjA==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  empathic@2.0.0:
+    resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
+    engines: {node: '>=14'}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  env-paths@3.0.0:
+    resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  err-code@2.0.3:
+    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  esbuild-register@3.6.0:
+    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
+    peerDependencies:
+      esbuild: '>=0.12 <1'
+
+  esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.19.12:
+    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.1:
+    resolution: {integrity: sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-plugin-vue@9.33.0:
+    resolution: {integrity: sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.39.1:
+    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  fast-check@3.23.2:
+    resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==}
+    engines: {node: '>=8.0.0'}
+
+  fast-copy@4.0.0:
+    resolution: {integrity: sha512-/oA0gx1xyXE9R2YlV4FXwZJXngFdm9Du0zN8FhY38jnLkhp1u35h6bCyKgRhlsA6C9I+1vfXE4KISdt7xc6M9w==}
+
+  fast-decode-uri-component@1.0.1:
+    resolution: {integrity: sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-json-stringify@6.1.1:
+    resolution: {integrity: sha512-DbgptncYEXZqDUOEl4krff4mUiVrTZZVI7BBrQR/T3BqMj/eM1flTC1Uk2uUoLcWCxjT95xKulV/Lc6hhOZsBQ==}
+
+  fast-jwt@5.0.6:
+    resolution: {integrity: sha512-LPE7OCGUl11q3ZgW681cEU2d0d2JZ37hhJAmetCgNyW8waVaJVZXhyFF6U2so1Iim58Yc7pfxJe2P7MNetQH2g==}
+    engines: {node: '>=20'}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-querystring@1.1.2:
+    resolution: {integrity: sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==}
+
+  fast-safe-stringify@2.1.1:
+    resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fast-xml-parser@4.5.3:
+    resolution: {integrity: sha512-RKihhV+SHsIUGXObeVy9AXiBbFwkVk7Syp8XgwN5U3JV416+Gwp/GO9i0JYKmikykgz/UHRrrV4ROuZEo/T0ig==}
+    hasBin: true
+
+  fast-xml-parser@5.2.5:
+    resolution: {integrity: sha512-pfX9uG9Ki0yekDHx2SiuRIyFdyAr1kMIMitPvb0YBo8SUfKvia7w7FIyd/l6av85pFYRhZscS75MwMnbvY+hcQ==}
+    hasBin: true
+
+  fastfall@1.5.1:
+    resolution: {integrity: sha512-KH6p+Z8AKPXnmA7+Iz2Lh8ARCMr+8WNPVludm1LGkZoD2MjY6LVnRMtTKhkdzI+jr0RzQWXKzKyBJm1zoHEL4Q==}
+    engines: {node: '>=0.10.0'}
+
+  fastify-cloudflare-turnstile@2.0.2:
+    resolution: {integrity: sha512-TshbsPhcYfqkn4uuzj3mr79a9Ow6v8nAuylVHnQZCZBoOTfnIv5X7DozfhCuuI9hfKxHDMTtFpKYxkj16UtLVQ==}
+    engines: {node: '>=20'}
+
+  fastify-plugin@5.1.0:
+    resolution: {integrity: sha512-FAIDA8eovSt5qcDgcBvDuX/v0Cjz0ohGhENZ/wpc3y+oZCY2afZ9Baqql3g/lC+OHRnciQol4ww7tuthOb9idw==}
+
+  fastify@5.6.2:
+    resolution: {integrity: sha512-dPugdGnsvYkBlENLhCgX8yhyGCsCPrpA8lFWbTNU428l+YOnLgYHR69hzV8HWPC79n536EqzqQtvhtdaCE0dKg==}
+
+  fastparallel@2.4.1:
+    resolution: {integrity: sha512-qUmhxPgNHmvRjZKBFUNI0oZuuH9OlSIOXmJ98lhKPxMZZ7zS/Fi0wRHOihDSz0R1YiIOjxzOY4bq65YTcdBi2Q==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fastseries@1.7.2:
+    resolution: {integrity: sha512-dTPFrPGS8SNSzAt7u/CbMKCJ3s01N04s4JFbORHcmyvVfVKmbhMD1VtRbh5enGHxkaQDqWyLefiKOGGmohGDDQ==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-my-way@9.3.0:
+    resolution: {integrity: sha512-eRoFWQw+Yv2tuYlK2pjFS2jGXSxSppAs3hSQjfxVKxM5amECzIgYYc1FEI8ZmhSh/Ig+FrKEz43NLRKJjYCZVg==}
+    engines: {node: '>=20'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flag-icons@7.5.0:
+    resolution: {integrity: sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg==}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gel@2.2.0:
+    resolution: {integrity: sha512-q0ma7z2swmoamHQusey8ayo8+ilVdzDt4WTxSPzq/yRqvucWRfymRVMvNgmSC0XK7eNjjEZEcplxpgaNojKdmQ==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+
+  generate-function@2.3.1:
+    resolution: {integrity: sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==}
+
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-port-please@3.1.2:
+    resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
+  giget@2.0.0:
+    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
+    hasBin: true
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@11.1.0:
+    resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  grammex@3.1.12:
+    resolution: {integrity: sha512-6ufJOsSA7LcQehIJNCO7HIBykfM7DXQual0Ny780/DEcJIpBlHRvcqEBWGPYd7hrXL2GJ3oJI1MIhaXjWmLQOQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  helmet@8.1.0:
+    resolution: {integrity: sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==}
+    engines: {node: '>=18.0.0'}
+
+  help-me@5.0.0:
+    resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
+
+  hono@4.10.6:
+    resolution: {integrity: sha512-BIdolzGpDO9MQ4nu3AUuDwHZZ+KViNm+EZ75Ae55eMXMqLVhDFqEMXxtUe9Qh8hjL+pIna/frs2j6Y2yD5Ua/g==}
+    engines: {node: '>=16.9.0'}
+
+  hot-patcher@2.0.1:
+    resolution: {integrity: sha512-ECg1JFG0YzehicQaogenlcs2qg6WsXQsxtnbr1i696u5tLUjtJdQAh0u2g0Q5YV45f263Ta1GnUJsc8WIfJf4Q==}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-status-codes@2.3.0:
+    resolution: {integrity: sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==}
+
+  iconv-lite@0.7.0:
+    resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  inversify@6.1.4:
+    resolution: {integrity: sha512-PbxrZH/gTa1fpPEEGAjJQzK8tKMIp5gRg6EFNJlCtzUcycuNdmhv3uk5P8Itm/RIjgHJO16oQRLo9IHzQN51bA==}
+
+  ip-address@10.1.0:
+    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@2.3.0:
+    resolution: {integrity: sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==}
+    engines: {node: '>= 10'}
+
+  is-arguments@1.2.0:
+    resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-nan@1.3.2:
+    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-property@1.0.2:
+    resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
+  jackspeak@4.1.1:
+    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
+    engines: {node: 20 || >=22}
+
+  javascript-obfuscator@5.0.1:
+    resolution: {integrity: sha512-x7EId6zLv5in+4MavFzOSY8KX7obmayNP1OEv47BiX6NDRm6vZvFJJAWW9N7ZkVS7BKoadO7nn5GjVG3bUZ9xQ==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+
+  js-base64@3.7.8:
+    resolution: {integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==}
+
+  js-string-escape@1.0.1:
+    resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
+    engines: {node: '>= 0.8'}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-ref-resolver@3.0.0:
+    resolution: {integrity: sha512-hOrZIVL5jyYFjzk7+y7n5JDzGlU8rfWDuYyHwGa2WA8/pcmMHezp2xsVwxrebD/Q9t8Nc5DboieySDpCp4WG4A==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  jsonwebtoken@9.0.3:
+    resolution: {integrity: sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  jwa@2.0.1:
+    resolution: {integrity: sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==}
+
+  jws@4.0.1:
+    resolution: {integrity: sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  layerr@3.0.0:
+    resolution: {integrity: sha512-tv754Ki2dXpPVApOrjTyRo4/QegVb9eVFq4mjqp4+NM5NaX7syQvN5BBNfV/ZpAHCEHV24XdUVrBAoka4jt3pA==}
+
+  levn@0.3.0:
+    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
+    engines: {node: '>= 0.8.0'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  libphonenumber-js@1.12.31:
+    resolution: {integrity: sha512-Z3IhgVgrqO1S5xPYM3K5XwbkDasU67/Vys4heW+lfSBALcUZjeIIzI8zCLifY+OCzSq+fpDdywMDa7z+4srJPQ==}
+
+  libsql@0.4.7:
+    resolution: {integrity: sha512-T9eIRCs6b0J1SHKYIvD8+KCJMcWZ900iZyxdnSCdqxN12Z1ijzT+jY5nrk72Jw4B0HGzms2NgpryArlJqvc3Lw==}
+    cpu: [x64, arm64, wasm32]
+    os: [darwin, linux, win32]
+
+  light-my-request@6.6.0:
+    resolution: {integrity: sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==}
+
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+
+  lru-cache@11.2.4:
+    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lru.min@1.1.3:
+    resolution: {integrity: sha512-Lkk/vx6ak3rYkRR0Nhu4lFUT2VDnQSxBe8Hbl7f36358p6ow8Bnvr8lrLt98H8J1aGxfhbX4Fs5tYg2+FTwr5Q==}
+    engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  md5@2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+
+  minimalistic-assert@1.0.1:
+    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
+
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  mnemonist@0.40.0:
+    resolution: {integrity: sha512-kdd8AFNig2AD5Rkih7EPCXhu/iMvwevQFX/uEiGhZyPZi7fHqOoF4V4kHLpCfysxXMgQ4B52kdPMCwARshKvEg==}
+
+  mnemonist@0.40.3:
+    resolution: {integrity: sha512-Vjyr90sJ23CKKH/qPAgUKicw/v6pRoamxIEDFOF8uSgFME7DqPRpHgRTejWVjkdGg5dXj0/NyxZHZ9bcjH+2uQ==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  multimatch@5.0.0:
+    resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
+    engines: {node: '>=10'}
+
+  mysql2@3.15.3:
+    resolution: {integrity: sha512-FBrGau0IXmuqg4haEZRBfHNWB5mUARw6hNwPDXXGg0XzVJ50mr/9hb267lvpVMnhZ1FON3qNd4Xfcez1rbFwSg==}
+    engines: {node: '>= 8.0'}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  named-placeholders@1.1.3:
+    resolution: {integrity: sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==}
+    engines: {node: '>=12.0.0'}
+
+  nan@2.24.0:
+    resolution: {integrity: sha512-Vpf9qnVW1RaDkoNKFUvfxqAbtI8ncb8OJlqZ9wwpXzWPEsvsB1nvdUi6oYrHIkQ1Y/tMDnr1h4nczS0VB9Xykg==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.6:
+    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  nested-property@4.0.0:
+    resolution: {integrity: sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA==}
+
+  node-cron@4.2.1:
+    resolution: {integrity: sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==}
+    engines: {node: '>=6.0.0'}
+
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  nodemailer@7.0.11:
+    resolution: {integrity: sha512-gnXhNRE0FNhD7wPSCGhdNh46Hs6nm+uTyg+Kq0cZukNQiYdnCsoQjodNP9BQVG9XrcK/v6/MgpAPBUFyzh9pvw==}
+    engines: {node: '>=6.0.0'}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  nypm@0.6.2:
+    resolution: {integrity: sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  object-is@1.1.6:
+    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  obliterator@2.0.5:
+    resolution: {integrity: sha512-42CPE9AhahZRsMNslczq0ctAEtqk8Eka26QofnqC346BZdHDySk3LWka23LI7ULIw11NmltpiLagIq8gBozxTw==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  on-exit-leak-free@2.1.2:
+    resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
+    engines: {node: '>=14.0.0'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  optionator@0.8.3:
+    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
+    engines: {node: '>= 0.8.0'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  otplib@12.0.1:
+    resolution: {integrity: sha512-xDGvUOQjop7RDgxTQ+o4pOol0/3xSZzawTiPKRrHnQWAy0WjhNs/5HdIDJCrqC4MBynmjXgULc6YfioaxZeFgg==}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@7.2.0:
+    resolution: {integrity: sha512-ATHLtwoTNDloHRFFxFJdHnG6n2WUeFjaR8XQMFdKIv0xkXjrER8/iG9iu265jOM95zXHAfv9oTkqhrfbIzosrQ==}
+    engines: {node: '>=20'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-posix@1.0.0:
+    resolution: {integrity: sha512-1gJ0WpNIiYcQydgg3Ed8KzvIqTsDpNwq+cjBCssvBtuTWjEqY1AW+i+OepiEMqDCzyro9B2sLAe4RBPajMYFiA==}
+
+  path-scurry@2.0.1:
+    resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
+    engines: {node: 20 || >=22}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  pg-cloudflare@1.2.7:
+    resolution: {integrity: sha512-YgCtzMH0ptvZJslLM1ffsY4EuGaU0cx4XSdXLRFae8bPP4dS5xL1tNB3k2o/N64cHJpwU7dxKli/nZ2lUa5fLg==}
+
+  pg-connection-string@2.9.1:
+    resolution: {integrity: sha512-nkc6NpDcvPVpZXxrreI/FOtX3XemeLl8E0qFr6F2Lrm/I8WOnaWNhIPK2Z7OHpw7gh5XJThi6j6ppgNoaT1w4w==}
+
+  pg-int8@1.0.1:
+    resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
+    engines: {node: '>=4.0.0'}
+
+  pg-pool@3.10.1:
+    resolution: {integrity: sha512-Tu8jMlcX+9d8+QVzKIvM/uJtp07PKr82IUOYEphaWcoBhIYkoHpLXN3qO59nAI11ripznDsEzEv8nUxBVWajGg==}
+    peerDependencies:
+      pg: '>=8.0'
+
+  pg-protocol@1.10.3:
+    resolution: {integrity: sha512-6DIBgBQaTKDJyxnXaLiLR8wBpQQcGWuAESkRBX/t6OwA8YsqP+iVSiond2EDy6Y/dsGk8rh/jtax3js5NeV7JQ==}
+
+  pg-types@2.2.0:
+    resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
+    engines: {node: '>=4'}
+
+  pg@8.16.3:
+    resolution: {integrity: sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==}
+    engines: {node: '>= 16.0.0'}
+    peerDependencies:
+      pg-native: '>=3.0.1'
+    peerDependenciesMeta:
+      pg-native:
+        optional: true
+
+  pgpass@1.0.5:
+    resolution: {integrity: sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pinia@2.3.1:
+    resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pino-abstract-transport@2.0.0:
+    resolution: {integrity: sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==}
+
+  pino-abstract-transport@3.0.0:
+    resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
+
+  pino-pretty@13.1.3:
+    resolution: {integrity: sha512-ttXRkkOz6WWC95KeY9+xxWL6AtImwbyMHrL1mSwqwW9u+vLp/WIElvHvCSDg0xO/Dzrggz1zv3rN5ovTRVowKg==}
+    hasBin: true
+
+  pino-std-serializers@7.0.0:
+    resolution: {integrity: sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==}
+
+  pino@10.1.0:
+    resolution: {integrity: sha512-0zZC2ygfdqvqK8zJIr1e+wT1T/L+LF6qvqvbzEQ6tiMAoTqEVK9a1K3YRu8HEUvGEvNqZyPJTtb2sNIoTkB83w==}
+    hasBin: true
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postgres-array@2.0.0:
+    resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
+    engines: {node: '>=4'}
+
+  postgres-array@3.0.4:
+    resolution: {integrity: sha512-nAUSGfSDGOaOAEGwqsRY27GPOea7CNipJPOA7lPbdEpx5Kg3qzdP0AaWC5MlhTWV9s4hFX39nomVZ+C4tnGOJQ==}
+    engines: {node: '>=12'}
+
+  postgres-bytea@1.0.0:
+    resolution: {integrity: sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-date@1.0.7:
+    resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-interval@1.2.0:
+    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
+    engines: {node: '>=0.10.0'}
+
+  postgres@3.4.7:
+    resolution: {integrity: sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==}
+    engines: {node: '>=12'}
+
+  prelude-ls@1.1.2:
+    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
+    engines: {node: '>= 0.8.0'}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prisma@7.1.0:
+    resolution: {integrity: sha512-dy/3urE4JjhdiW5b09pGjVhGI7kPESK2VlCDrCqeYK5m5SslAtG5FCGnZWP7E8Sdg+Ow1wV2mhJH5RTFL5gEsw==}
+    engines: {node: ^20.19 || ^22.12 || >=24.0}
+    hasBin: true
+    peerDependencies:
+      better-sqlite3: '>=9.0.0'
+      typescript: '>=5.4.0'
+    peerDependenciesMeta:
+      better-sqlite3:
+        optional: true
+      typescript:
+        optional: true
+
+  process-warning@4.0.1:
+    resolution: {integrity: sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q==}
+
+  process-warning@5.0.0:
+    resolution: {integrity: sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==}
+
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
+  promise-limit@2.7.0:
+    resolution: {integrity: sha512-7nJ6v5lnJsXwGprnGXga4wx6d1POjvi5Qmf1ivTRxTjH4Z/9Czja/UCMLVmB9N93GeWOU93XaFaEt6jbuoagNw==}
+
+  promise-retry@2.0.1:
+    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
+    engines: {node: '>=10'}
+
+  proper-lockfile@4.1.2:
+    resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
+
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  quick-format-unescaped@4.0.4:
+    resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
+
+  rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+
+  react-dom@19.2.1:
+    resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
+    peerDependencies:
+      react: ^19.2.1
+
+  react@19.2.1:
+    resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  real-require@0.2.0:
+    resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
+    engines: {node: '>= 12.13.0'}
+
+  reflect-metadata@0.2.2:
+    resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
+
+  regexp-to-ast@0.5.0:
+    resolution: {integrity: sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==}
+
+  remeda@2.21.3:
+    resolution: {integrity: sha512-XXrZdLA10oEOQhLLzEJEiFFSKi21REGAkHdImIb4rt/XXy8ORGXh5HCcpUOsElfPNDb+X6TA/+wkh+p2KffYmg==}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  ret@0.5.0:
+    resolution: {integrity: sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==}
+    engines: {node: '>=10'}
+
+  retry@0.12.0:
+    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
+    engines: {node: '>= 4'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rollup-plugin-obfuscator@1.1.0:
+    resolution: {integrity: sha512-cMfQIKyGePlfHGGO+rSDhSATMBx7WWxXW/X66c53HylUE/owanTbG6nhttUQOkbdCiQH8tClskNEH/IPRoqZwA==}
+    peerDependencies:
+      javascript-obfuscator: '*'
+      rollup: ^2.56.3||^3.0.0||^4.0.0
+
+  rollup@4.53.3:
+    resolution: {integrity: sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex2@5.0.0:
+    resolution: {integrity: sha512-YwJwe5a51WlK7KbOJREPdjNrpViQBI3p4T50lfwPuDhZnE3XGVTlGvi+aolc5+RvxDD6bnUmjVsU9n1eboLUYw==}
+
+  safe-stable-stringify@2.5.0:
+    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
+    engines: {node: '>=10'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  secure-json-parse@4.1.0:
+    resolution: {integrity: sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==}
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  seq-queue@0.0.5:
+    resolution: {integrity: sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==}
+
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-icons@16.1.0:
+    resolution: {integrity: sha512-fL95b22MWTn3y+zQ/QC9oKqJ6mXXNwm35oy5XMVPdvJZGfGNWDMMb33kfqm50OuRKNcdjbk7HQ73NdWcvaBXIQ==}
+    engines: {node: '>=0.12.18'}
+
+  sonic-boom@4.2.0:
+    resolution: {integrity: sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  sql.js@1.13.0:
+    resolution: {integrity: sha512-RJbVP1HRDlUUXahJ7VMTcu9Rm1Nzw+EBpoPr94vnbD4LwR715F3CcxE2G2k45PewcaZ57pjetYa+LoSJLAASgA==}
+
+  sqlstring@2.3.3:
+    resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
+    engines: {node: '>= 0.6'}
+
+  ssh2-sftp-client@11.0.0:
+    resolution: {integrity: sha512-lOjgNYtioYquhtgyHwPryFNhllkuENjvCKkUXo18w/Q4UpEffCnEUBfiOTlwFdKIhG1rhrOGnA6DeKPSF2CP6w==}
+    engines: {node: '>=18.20.4'}
+
+  ssh2@1.17.0:
+    resolution: {integrity: sha512-wPldCk3asibAjQ/kziWQQt1Wh3PgDFpC0XpwclzKcdT1vql6KeYxf5LIt4nlFkUeR8WuphYMKqUA56X4rjbfgQ==}
+    engines: {node: '>=10.16.0'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+
+  steed@1.1.3:
+    resolution: {integrity: sha512-EUkci0FAUiE4IvGTSKcDJIQ/eRUP2JJb56+fvZ4sdnguLTqIdKjSxUe138poW8mkvKWXW2sFPrgTsxqoISnmoA==}
+
+  stream-shift@1.0.3:
+    resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
+
+  string-template@1.0.0:
+    resolution: {integrity: sha512-SLqR3GBUXuoPP5MmYtD7ompvXiG87QjT6lzOszyXjTM86Uu7At7vNnt2xgyTLq5o9T4IxTYFyGxcULqpsmsfdg==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringz@2.1.0:
+    resolution: {integrity: sha512-KlywLT+MZ+v0IRepfMxRtnSvDCMc3nR1qqCs3m/qIbSOWkNZYT8XHQA31rS3TnKp0c5xjZu3M4GY/2aRKSi/6A==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@5.0.3:
+    resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
+    engines: {node: '>=14.16'}
+
+  strnum@1.1.2:
+    resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
+
+  strnum@2.1.1:
+    resolution: {integrity: sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==}
+
+  stubborn-fs@2.0.0:
+    resolution: {integrity: sha512-Y0AvSwDw8y+nlSNFXMm2g6L51rBGdAQT20J3YSOqxC53Lo3bjWRtr2BKcfYoAf352WYpsZSTURrA0tqhfgudPA==}
+
+  stubborn-utils@1.0.2:
+    resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwindcss@3.4.18:
+    resolution: {integrity: sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  terser@5.44.1:
+    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  thirty-two@1.0.2:
+    resolution: {integrity: sha512-OEI0IWCe+Dw46019YLl6V10Us5bi574EvlJEOcAkB29IzQ/mYD1A6RyNHLjZPiHCmuodxvgF6U+vZO1L15lxVA==}
+    engines: {node: '>=0.2.6'}
+
+  thread-stream@3.1.0:
+    resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toad-cache@3.7.0:
+    resolution: {integrity: sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==}
+    engines: {node: '>=12'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  tweetnacl@0.14.5:
+    resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
+
+  type-check@0.3.2:
+    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
+    engines: {node: '>= 0.8.0'}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  type-fest@5.3.1:
+    resolution: {integrity: sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==}
+    engines: {node: '>=20'}
+
+  typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uint8array-extras@1.5.0:
+    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
+    engines: {node: '>=18'}
+
+  undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
+  undici@6.22.0:
+    resolution: {integrity: sha512-hU/10obOIu62MGYjdskASR3CUAiYaFTtC9Pa6vHyf//mAipSvSQg6od2CnJswq7fvzNS3zJhxoRkgNVaHurWKw==}
+    engines: {node: '>=18.17'}
+
+  undici@7.16.0:
+    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
+    engines: {node: '>=20.18.1'}
+
+  update-browserslist-db@1.2.2:
+    resolution: {integrity: sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  url-join@5.0.0:
+    resolution: {integrity: sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  util@0.12.5:
+    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
+
+  valibot@1.2.0:
+    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  validator@13.15.23:
+    resolution: {integrity: sha512-4yoz1kEWqUjzi5zsPbAS/903QXSYp0UOtHsPpp7p9rHAw/W+dkInskAE386Fat3oKRROwO98d9ZB0G4cObgUyw==}
+    engines: {node: '>= 0.10'}
+
+  vite@6.4.1:
+    resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-eslint-parser@9.4.3:
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  vue-i18n@11.2.2:
+    resolution: {integrity: sha512-ULIKZyRluUPRCZmihVgUvpq8hJTtOqnbGZuv4Lz+byEKZq4mU0g92og414l6f/4ju+L5mORsiUuEPYrAuX2NJg==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-router@4.6.3:
+    resolution: {integrity: sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  vue-tsc@3.1.6:
+    resolution: {integrity: sha512-h5mMNGIDI+WMZxTeuYcpfSeDtBIiHXAg3qsrt65H4vcFTYmuM1THNHMzlnDvD8kX0fwLuf6auxWP340bH/zcpw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue-turnstile@1.0.11:
+    resolution: {integrity: sha512-iaTBoZ5oUqtNRto6bmbn6FQvW0h/sK7mPUJc1Qn4em+cELXN59U2FQTcpWfKssV3OY6lEZzmCpcn/zrb7htK3A==}
+    peerDependencies:
+      vue: ^3.2.45
+
+  vue@3.5.25:
+    resolution: {integrity: sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
+  webdav@5.8.0:
+    resolution: {integrity: sha512-iuFG7NamJ41Oshg4930iQgfIpRrUiatPWIekeznYgEf2EOraTRcDPTjy7gIOMtkdpKTaqPk1E68NO5PAGtJahA==}
+    engines: {node: '>=14'}
+
+  when-exit@2.1.5:
+    resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
+
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
+  zeptomatch@2.0.2:
+    resolution: {integrity: sha512-H33jtSKf8Ijtb5BW6wua3G5DhnFjbFML36eFu+VdOoVY4HD9e7ggjqdM6639B+L87rjnR6Y+XeRzBXZdy52B/g==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@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.936.0
+      '@aws-sdk/util-locate-window': 3.893.0
+      '@smithy/util-utf8': 2.3.0
+      tslib: 2.8.1
+
+  '@aws-crypto/sha256-js@5.2.0':
+    dependencies:
+      '@aws-crypto/util': 5.2.0
+      '@aws-sdk/types': 3.936.0
+      tslib: 2.8.1
+
+  '@aws-crypto/supports-web-crypto@5.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@aws-crypto/util@5.2.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@smithy/util-utf8': 2.3.0
+      tslib: 2.8.1
+
+  '@aws-sdk/client-sesv2@3.947.0':
+    dependencies:
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/credential-provider-node': 3.947.0
+      '@aws-sdk/middleware-host-header': 3.936.0
+      '@aws-sdk/middleware-logger': 3.936.0
+      '@aws-sdk/middleware-recursion-detection': 3.936.0
+      '@aws-sdk/middleware-user-agent': 3.947.0
+      '@aws-sdk/region-config-resolver': 3.936.0
+      '@aws-sdk/signature-v4-multi-region': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/util-endpoints': 3.936.0
+      '@aws-sdk/util-user-agent-browser': 3.936.0
+      '@aws-sdk/util-user-agent-node': 3.947.0
+      '@smithy/config-resolver': 4.4.3
+      '@smithy/core': 3.18.7
+      '@smithy/fetch-http-handler': 5.3.6
+      '@smithy/hash-node': 4.2.5
+      '@smithy/invalid-dependency': 4.2.5
+      '@smithy/middleware-content-length': 4.2.5
+      '@smithy/middleware-endpoint': 4.3.14
+      '@smithy/middleware-retry': 4.4.14
+      '@smithy/middleware-serde': 4.2.6
+      '@smithy/middleware-stack': 4.2.5
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/node-http-handler': 4.4.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/url-parser': 4.2.5
+      '@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.13
+      '@smithy/util-defaults-mode-node': 4.2.16
+      '@smithy/util-endpoints': 3.2.5
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-retry': 4.2.5
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/client-sso@3.947.0':
+    dependencies:
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/middleware-host-header': 3.936.0
+      '@aws-sdk/middleware-logger': 3.936.0
+      '@aws-sdk/middleware-recursion-detection': 3.936.0
+      '@aws-sdk/middleware-user-agent': 3.947.0
+      '@aws-sdk/region-config-resolver': 3.936.0
+      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/util-endpoints': 3.936.0
+      '@aws-sdk/util-user-agent-browser': 3.936.0
+      '@aws-sdk/util-user-agent-node': 3.947.0
+      '@smithy/config-resolver': 4.4.3
+      '@smithy/core': 3.18.7
+      '@smithy/fetch-http-handler': 5.3.6
+      '@smithy/hash-node': 4.2.5
+      '@smithy/invalid-dependency': 4.2.5
+      '@smithy/middleware-content-length': 4.2.5
+      '@smithy/middleware-endpoint': 4.3.14
+      '@smithy/middleware-retry': 4.4.14
+      '@smithy/middleware-serde': 4.2.6
+      '@smithy/middleware-stack': 4.2.5
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/node-http-handler': 4.4.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/url-parser': 4.2.5
+      '@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.13
+      '@smithy/util-defaults-mode-node': 4.2.16
+      '@smithy/util-endpoints': 3.2.5
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-retry': 4.2.5
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/core@3.947.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/xml-builder': 3.930.0
+      '@smithy/core': 3.18.7
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/property-provider': 4.2.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/signature-v4': 5.3.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-env@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/property-provider': 4.2.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-http@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/fetch-http-handler': 5.3.6
+      '@smithy/node-http-handler': 4.4.5
+      '@smithy/property-provider': 4.2.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/util-stream': 4.5.6
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-ini@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/credential-provider-env': 3.947.0
+      '@aws-sdk/credential-provider-http': 3.947.0
+      '@aws-sdk/credential-provider-login': 3.947.0
+      '@aws-sdk/credential-provider-process': 3.947.0
+      '@aws-sdk/credential-provider-sso': 3.947.0
+      '@aws-sdk/credential-provider-web-identity': 3.947.0
+      '@aws-sdk/nested-clients': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/credential-provider-imds': 4.2.5
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/credential-provider-login@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/nested-clients': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/property-provider': 4.2.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/credential-provider-node@3.947.0':
+    dependencies:
+      '@aws-sdk/credential-provider-env': 3.947.0
+      '@aws-sdk/credential-provider-http': 3.947.0
+      '@aws-sdk/credential-provider-ini': 3.947.0
+      '@aws-sdk/credential-provider-process': 3.947.0
+      '@aws-sdk/credential-provider-sso': 3.947.0
+      '@aws-sdk/credential-provider-web-identity': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/credential-provider-imds': 4.2.5
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/credential-provider-process@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/credential-provider-sso@3.947.0':
+    dependencies:
+      '@aws-sdk/client-sso': 3.947.0
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/token-providers': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/credential-provider-web-identity@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/nested-clients': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/middleware-host-header@3.936.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-logger@3.936.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-recursion-detection@3.936.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@aws/lambda-invoke-store': 0.2.2
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-sdk-s3@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/util-arn-parser': 3.893.0
+      '@smithy/core': 3.18.7
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/signature-v4': 5.3.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/util-config-provider': 4.2.0
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-stream': 4.5.6
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+
+  '@aws-sdk/middleware-user-agent@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/util-endpoints': 3.936.0
+      '@smithy/core': 3.18.7
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/nested-clients@3.947.0':
+    dependencies:
+      '@aws-crypto/sha256-browser': 5.2.0
+      '@aws-crypto/sha256-js': 5.2.0
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/middleware-host-header': 3.936.0
+      '@aws-sdk/middleware-logger': 3.936.0
+      '@aws-sdk/middleware-recursion-detection': 3.936.0
+      '@aws-sdk/middleware-user-agent': 3.947.0
+      '@aws-sdk/region-config-resolver': 3.936.0
+      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/util-endpoints': 3.936.0
+      '@aws-sdk/util-user-agent-browser': 3.936.0
+      '@aws-sdk/util-user-agent-node': 3.947.0
+      '@smithy/config-resolver': 4.4.3
+      '@smithy/core': 3.18.7
+      '@smithy/fetch-http-handler': 5.3.6
+      '@smithy/hash-node': 4.2.5
+      '@smithy/invalid-dependency': 4.2.5
+      '@smithy/middleware-content-length': 4.2.5
+      '@smithy/middleware-endpoint': 4.3.14
+      '@smithy/middleware-retry': 4.4.14
+      '@smithy/middleware-serde': 4.2.6
+      '@smithy/middleware-stack': 4.2.5
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/node-http-handler': 4.4.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/url-parser': 4.2.5
+      '@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.13
+      '@smithy/util-defaults-mode-node': 4.2.16
+      '@smithy/util-endpoints': 3.2.5
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-retry': 4.2.5
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/region-config-resolver@3.936.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@smithy/config-resolver': 4.4.3
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/signature-v4-multi-region@3.947.0':
+    dependencies:
+      '@aws-sdk/middleware-sdk-s3': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/signature-v4': 5.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/token-providers@3.947.0':
+    dependencies:
+      '@aws-sdk/core': 3.947.0
+      '@aws-sdk/nested-clients': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@aws-sdk/types@3.936.0':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/util-arn-parser@3.893.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@aws-sdk/util-endpoints@3.936.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@smithy/types': 4.9.0
+      '@smithy/url-parser': 4.2.5
+      '@smithy/util-endpoints': 3.2.5
+      tslib: 2.8.1
+
+  '@aws-sdk/util-locate-window@3.893.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@aws-sdk/util-user-agent-browser@3.936.0':
+    dependencies:
+      '@aws-sdk/types': 3.936.0
+      '@smithy/types': 4.9.0
+      bowser: 2.13.1
+      tslib: 2.8.1
+
+  '@aws-sdk/util-user-agent-node@3.947.0':
+    dependencies:
+      '@aws-sdk/middleware-user-agent': 3.947.0
+      '@aws-sdk/types': 3.936.0
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@aws-sdk/xml-builder@3.930.0':
+    dependencies:
+      '@smithy/types': 4.9.0
+      fast-xml-parser: 5.2.5
+      tslib: 2.8.1
+
+  '@aws/lambda-invoke-store@0.2.2': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/parser@7.28.5':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/types@7.28.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@buttercup/fetch@0.2.1':
+    optionalDependencies:
+      node-fetch: 3.3.2
+
+  '@chevrotain/cst-dts-gen@10.5.0':
+    dependencies:
+      '@chevrotain/gast': 10.5.0
+      '@chevrotain/types': 10.5.0
+      lodash: 4.17.21
+
+  '@chevrotain/gast@10.5.0':
+    dependencies:
+      '@chevrotain/types': 10.5.0
+      lodash: 4.17.21
+
+  '@chevrotain/types@10.5.0': {}
+
+  '@chevrotain/utils@10.5.0': {}
+
+  '@drizzle-team/brocli@0.10.2': {}
+
+  '@electric-sql/pglite-socket@0.0.6(@electric-sql/pglite@0.3.2)':
+    dependencies:
+      '@electric-sql/pglite': 0.3.2
+
+  '@electric-sql/pglite-tools@0.2.7(@electric-sql/pglite@0.3.2)':
+    dependencies:
+      '@electric-sql/pglite': 0.3.2
+
+  '@electric-sql/pglite@0.3.2': {}
+
+  '@epic-web/invariant@1.0.0': {}
+
+  '@esbuild-kit/core-utils@3.3.2':
+    dependencies:
+      esbuild: 0.18.20
+      source-map-support: 0.5.21
+
+  '@esbuild-kit/esm-loader@2.6.5':
+    dependencies:
+      '@esbuild-kit/core-utils': 3.3.2
+      get-tsconfig: 4.13.0
+
+  '@esbuild/aix-ppc64@0.19.12':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.1':
+    optional: true
+
+  '@esbuild/android-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/android-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/android-arm@0.18.20':
+    optional: true
+
+  '@esbuild/android-arm@0.19.12':
+    optional: true
+
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm@0.27.1':
+    optional: true
+
+  '@esbuild/android-x64@0.18.20':
+    optional: true
+
+  '@esbuild/android-x64@0.19.12':
+    optional: true
+
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
+  '@esbuild/android-x64@0.27.1':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/darwin-x64@0.18.20':
+    optional: true
+
+  '@esbuild/darwin-x64@0.19.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.1':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.19.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.1':
+    optional: true
+
+  '@esbuild/linux-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/linux-arm@0.18.20':
+    optional: true
+
+  '@esbuild/linux-arm@0.19.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.1':
+    optional: true
+
+  '@esbuild/linux-ia32@0.18.20':
+    optional: true
+
+  '@esbuild/linux-ia32@0.19.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.1':
+    optional: true
+
+  '@esbuild/linux-loong64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-loong64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.1':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.18.20':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.19.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.1':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.1':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.1':
+    optional: true
+
+  '@esbuild/linux-s390x@0.18.20':
+    optional: true
+
+  '@esbuild/linux-s390x@0.19.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.1':
+    optional: true
+
+  '@esbuild/linux-x64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-x64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.1':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.19.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.1':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.19.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.1':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/sunos-x64@0.18.20':
+    optional: true
+
+  '@esbuild/sunos-x64@0.19.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.1':
+    optional: true
+
+  '@esbuild/win32-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/win32-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.1':
+    optional: true
+
+  '@esbuild/win32-ia32@0.18.20':
+    optional: true
+
+  '@esbuild/win32-ia32@0.19.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.1':
+    optional: true
+
+  '@esbuild/win32-x64@0.18.20':
+    optional: true
+
+  '@esbuild/win32-x64@0.19.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.1':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@1.21.7))':
+    dependencies:
+      eslint: 9.39.1(jiti@1.21.7)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.3':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.1': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@fastify/accept-negotiator@2.0.1': {}
+
+  '@fastify/ajv-compiler@4.0.5':
+    dependencies:
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      fast-uri: 3.1.0
+
+  '@fastify/busboy@3.2.0': {}
+
+  '@fastify/cookie@11.0.2':
+    dependencies:
+      cookie: 1.1.1
+      fastify-plugin: 5.1.0
+
+  '@fastify/cors@10.1.0':
+    dependencies:
+      fastify-plugin: 5.1.0
+      mnemonist: 0.40.0
+
+  '@fastify/deepmerge@3.2.1': {}
+
+  '@fastify/error@4.2.0': {}
+
+  '@fastify/fast-json-stringify-compiler@5.0.3':
+    dependencies:
+      fast-json-stringify: 6.1.1
+
+  '@fastify/forwarded@3.0.1': {}
+
+  '@fastify/helmet@13.0.2':
+    dependencies:
+      fastify-plugin: 5.1.0
+      helmet: 8.1.0
+
+  '@fastify/jwt@9.1.0':
+    dependencies:
+      '@fastify/error': 4.2.0
+      '@lukeed/ms': 2.0.2
+      fast-jwt: 5.0.6
+      fastify-plugin: 5.1.0
+      steed: 1.1.3
+
+  '@fastify/merge-json-schemas@0.2.1':
+    dependencies:
+      dequal: 2.0.3
+
+  '@fastify/multipart@9.4.0':
+    dependencies:
+      '@fastify/busboy': 3.2.0
+      '@fastify/deepmerge': 3.2.1
+      '@fastify/error': 4.2.0
+      fastify-plugin: 5.1.0
+      secure-json-parse: 4.1.0
+
+  '@fastify/proxy-addr@5.1.0':
+    dependencies:
+      '@fastify/forwarded': 3.0.1
+      ipaddr.js: 2.3.0
+
+  '@fastify/rate-limit@10.3.0':
+    dependencies:
+      '@lukeed/ms': 2.0.2
+      fastify-plugin: 5.1.0
+      toad-cache: 3.7.0
+
+  '@fastify/send@4.1.0':
+    dependencies:
+      '@lukeed/ms': 2.0.2
+      escape-html: 1.0.3
+      fast-decode-uri-component: 1.0.1
+      http-errors: 2.0.1
+      mime: 3.0.0
+
+  '@fastify/static@8.3.0':
+    dependencies:
+      '@fastify/accept-negotiator': 2.0.1
+      '@fastify/send': 4.1.0
+      content-disposition: 0.5.4
+      fastify-plugin: 5.1.0
+      fastq: 1.19.1
+      glob: 11.1.0
+
+  '@fastify/websocket@11.2.0':
+    dependencies:
+      duplexify: 4.1.3
+      fastify-plugin: 5.1.0
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@hono/node-server@1.19.6(hono@4.10.6)':
+    dependencies:
+      hono: 4.10.6
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@intlify/core-base@11.2.2':
+    dependencies:
+      '@intlify/message-compiler': 11.2.2
+      '@intlify/shared': 11.2.2
+
+  '@intlify/message-compiler@11.2.2':
+    dependencies:
+      '@intlify/shared': 11.2.2
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.2.2': {}
+
+  '@inversifyjs/common@1.3.3': {}
+
+  '@inversifyjs/core@1.3.4(reflect-metadata@0.2.2)':
+    dependencies:
+      '@inversifyjs/common': 1.3.3
+      '@inversifyjs/reflect-metadata-utils': 0.2.3(reflect-metadata@0.2.2)
+    transitivePeerDependencies:
+      - reflect-metadata
+
+  '@inversifyjs/reflect-metadata-utils@0.2.3(reflect-metadata@0.2.2)':
+    dependencies:
+      reflect-metadata: 0.2.2
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@javascript-obfuscator/escodegen@2.3.1':
+    dependencies:
+      '@javascript-obfuscator/estraverse': 5.4.0
+      esprima: 4.0.1
+      esutils: 2.0.3
+      optionator: 0.8.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  '@javascript-obfuscator/estraverse@5.4.0': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@libsql/client@0.14.0':
+    dependencies:
+      '@libsql/core': 0.14.0
+      '@libsql/hrana-client': 0.7.0
+      js-base64: 3.7.8
+      libsql: 0.4.7
+      promise-limit: 2.7.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@libsql/core@0.14.0':
+    dependencies:
+      js-base64: 3.7.8
+
+  '@libsql/darwin-arm64@0.4.7':
+    optional: true
+
+  '@libsql/darwin-x64@0.4.7':
+    optional: true
+
+  '@libsql/hrana-client@0.7.0':
+    dependencies:
+      '@libsql/isomorphic-fetch': 0.3.1
+      '@libsql/isomorphic-ws': 0.1.5
+      js-base64: 3.7.8
+      node-fetch: 3.3.2
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@libsql/isomorphic-fetch@0.3.1': {}
+
+  '@libsql/isomorphic-ws@0.1.5':
+    dependencies:
+      '@types/ws': 8.18.1
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@libsql/linux-arm64-gnu@0.4.7':
+    optional: true
+
+  '@libsql/linux-arm64-musl@0.4.7':
+    optional: true
+
+  '@libsql/linux-x64-gnu@0.4.7':
+    optional: true
+
+  '@libsql/linux-x64-musl@0.4.7':
+    optional: true
+
+  '@libsql/win32-x64-msvc@0.4.7':
+    optional: true
+
+  '@lukeed/ms@2.0.2': {}
+
+  '@mrleebo/prisma-ast@0.12.1':
+    dependencies:
+      chevrotain: 10.5.0
+      lilconfig: 2.1.0
+
+  '@neon-rs/load@0.0.4': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@otplib/core@12.0.1': {}
+
+  '@otplib/plugin-crypto@12.0.1':
+    dependencies:
+      '@otplib/core': 12.0.1
+
+  '@otplib/plugin-thirty-two@12.0.1':
+    dependencies:
+      '@otplib/core': 12.0.1
+      thirty-two: 1.0.2
+
+  '@otplib/preset-default@12.0.1':
+    dependencies:
+      '@otplib/core': 12.0.1
+      '@otplib/plugin-crypto': 12.0.1
+      '@otplib/plugin-thirty-two': 12.0.1
+
+  '@otplib/preset-v11@12.0.1':
+    dependencies:
+      '@otplib/core': 12.0.1
+      '@otplib/plugin-crypto': 12.0.1
+      '@otplib/plugin-thirty-two': 12.0.1
+
+  '@petamoriken/float16@3.9.3': {}
+
+  '@pinojs/redact@0.4.0': {}
+
+  '@prisma/adapter-pg@7.1.0':
+    dependencies:
+      '@prisma/driver-adapter-utils': 7.1.0
+      pg: 8.16.3
+      postgres-array: 3.0.4
+    transitivePeerDependencies:
+      - pg-native
+
+  '@prisma/client-runtime-utils@7.1.0': {}
+
+  '@prisma/client@7.1.0(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(typescript@5.9.3)':
+    dependencies:
+      '@prisma/client-runtime-utils': 7.1.0
+    optionalDependencies:
+      prisma: 7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
+      typescript: 5.9.3
+
+  '@prisma/config@7.1.0':
+    dependencies:
+      c12: 3.1.0
+      deepmerge-ts: 7.1.5
+      effect: 3.18.4
+      empathic: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
+  '@prisma/debug@6.8.2': {}
+
+  '@prisma/debug@7.1.0': {}
+
+  '@prisma/dev@0.15.0(typescript@5.9.3)':
+    dependencies:
+      '@electric-sql/pglite': 0.3.2
+      '@electric-sql/pglite-socket': 0.0.6(@electric-sql/pglite@0.3.2)
+      '@electric-sql/pglite-tools': 0.2.7(@electric-sql/pglite@0.3.2)
+      '@hono/node-server': 1.19.6(hono@4.10.6)
+      '@mrleebo/prisma-ast': 0.12.1
+      '@prisma/get-platform': 6.8.2
+      '@prisma/query-plan-executor': 6.18.0
+      foreground-child: 3.3.1
+      get-port-please: 3.1.2
+      hono: 4.10.6
+      http-status-codes: 2.3.0
+      pathe: 2.0.3
+      proper-lockfile: 4.1.2
+      remeda: 2.21.3
+      std-env: 3.9.0
+      valibot: 1.2.0(typescript@5.9.3)
+      zeptomatch: 2.0.2
+    transitivePeerDependencies:
+      - typescript
+
+  '@prisma/driver-adapter-utils@7.1.0':
+    dependencies:
+      '@prisma/debug': 7.1.0
+
+  '@prisma/engines-version@7.1.0-6.ab635e6b9d606fa5c8fb8b1a7f909c3c3c1c98ba': {}
+
+  '@prisma/engines@7.1.0':
+    dependencies:
+      '@prisma/debug': 7.1.0
+      '@prisma/engines-version': 7.1.0-6.ab635e6b9d606fa5c8fb8b1a7f909c3c3c1c98ba
+      '@prisma/fetch-engine': 7.1.0
+      '@prisma/get-platform': 7.1.0
+
+  '@prisma/fetch-engine@7.1.0':
+    dependencies:
+      '@prisma/debug': 7.1.0
+      '@prisma/engines-version': 7.1.0-6.ab635e6b9d606fa5c8fb8b1a7f909c3c3c1c98ba
+      '@prisma/get-platform': 7.1.0
+
+  '@prisma/get-platform@6.8.2':
+    dependencies:
+      '@prisma/debug': 6.8.2
+
+  '@prisma/get-platform@7.1.0':
+    dependencies:
+      '@prisma/debug': 7.1.0
+
+  '@prisma/query-plan-executor@6.18.0': {}
+
+  '@prisma/studio-core@0.8.2(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@types/react': 19.2.7
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
+  '@rollup/pluginutils@5.3.0(rollup@4.53.3)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.53.3
+
+  '@rollup/rollup-android-arm-eabi@4.53.3':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.53.3':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.53.3':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.53.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.53.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.53.3':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.53.3':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.53.3':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.53.3':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.53.3':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.53.3':
+    optional: true
+
+  '@smithy/abort-controller@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/config-resolver@4.4.3':
+    dependencies:
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/types': 4.9.0
+      '@smithy/util-config-provider': 4.2.0
+      '@smithy/util-endpoints': 3.2.5
+      '@smithy/util-middleware': 4.2.5
+      tslib: 2.8.1
+
+  '@smithy/core@3.18.7':
+    dependencies:
+      '@smithy/middleware-serde': 4.2.6
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      '@smithy/util-base64': 4.3.0
+      '@smithy/util-body-length-browser': 4.2.0
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-stream': 4.5.6
+      '@smithy/util-utf8': 4.2.0
+      '@smithy/uuid': 1.1.0
+      tslib: 2.8.1
+
+  '@smithy/credential-provider-imds@4.2.5':
+    dependencies:
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/property-provider': 4.2.5
+      '@smithy/types': 4.9.0
+      '@smithy/url-parser': 4.2.5
+      tslib: 2.8.1
+
+  '@smithy/fetch-http-handler@5.3.6':
+    dependencies:
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/querystring-builder': 4.2.5
+      '@smithy/types': 4.9.0
+      '@smithy/util-base64': 4.3.0
+      tslib: 2.8.1
+
+  '@smithy/hash-node@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      '@smithy/util-buffer-from': 4.2.0
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/invalid-dependency@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/is-array-buffer@2.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/is-array-buffer@4.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/middleware-content-length@4.2.5':
+    dependencies:
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/middleware-endpoint@4.3.14':
+    dependencies:
+      '@smithy/core': 3.18.7
+      '@smithy/middleware-serde': 4.2.6
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      '@smithy/url-parser': 4.2.5
+      '@smithy/util-middleware': 4.2.5
+      tslib: 2.8.1
+
+  '@smithy/middleware-retry@4.4.14':
+    dependencies:
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/service-error-classification': 4.2.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-retry': 4.2.5
+      '@smithy/uuid': 1.1.0
+      tslib: 2.8.1
+
+  '@smithy/middleware-serde@4.2.6':
+    dependencies:
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/middleware-stack@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/node-config-provider@4.3.5':
+    dependencies:
+      '@smithy/property-provider': 4.2.5
+      '@smithy/shared-ini-file-loader': 4.4.0
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/node-http-handler@4.4.5':
+    dependencies:
+      '@smithy/abort-controller': 4.2.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/querystring-builder': 4.2.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/property-provider@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/protocol-http@5.3.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/querystring-builder@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      '@smithy/util-uri-escape': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/querystring-parser@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/service-error-classification@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+
+  '@smithy/shared-ini-file-loader@4.4.0':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/signature-v4@5.3.5':
+    dependencies:
+      '@smithy/is-array-buffer': 4.2.0
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      '@smithy/util-hex-encoding': 4.2.0
+      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-uri-escape': 4.2.0
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/smithy-client@4.9.10':
+    dependencies:
+      '@smithy/core': 3.18.7
+      '@smithy/middleware-endpoint': 4.3.14
+      '@smithy/middleware-stack': 4.2.5
+      '@smithy/protocol-http': 5.3.5
+      '@smithy/types': 4.9.0
+      '@smithy/util-stream': 4.5.6
+      tslib: 2.8.1
+
+  '@smithy/types@4.9.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/url-parser@4.2.5':
+    dependencies:
+      '@smithy/querystring-parser': 4.2.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/util-base64@4.3.0':
+    dependencies:
+      '@smithy/util-buffer-from': 4.2.0
+      '@smithy/util-utf8': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/util-body-length-browser@4.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/util-body-length-node@4.2.1':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/util-buffer-from@2.2.0':
+    dependencies:
+      '@smithy/is-array-buffer': 2.2.0
+      tslib: 2.8.1
+
+  '@smithy/util-buffer-from@4.2.0':
+    dependencies:
+      '@smithy/is-array-buffer': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/util-config-provider@4.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/util-defaults-mode-browser@4.3.13':
+    dependencies:
+      '@smithy/property-provider': 4.2.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/util-defaults-mode-node@4.2.16':
+    dependencies:
+      '@smithy/config-resolver': 4.4.3
+      '@smithy/credential-provider-imds': 4.2.5
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/property-provider': 4.2.5
+      '@smithy/smithy-client': 4.9.10
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/util-endpoints@3.2.5':
+    dependencies:
+      '@smithy/node-config-provider': 4.3.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/util-hex-encoding@4.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/util-middleware@4.2.5':
+    dependencies:
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/util-retry@4.2.5':
+    dependencies:
+      '@smithy/service-error-classification': 4.2.5
+      '@smithy/types': 4.9.0
+      tslib: 2.8.1
+
+  '@smithy/util-stream@4.5.6':
+    dependencies:
+      '@smithy/fetch-http-handler': 5.3.6
+      '@smithy/node-http-handler': 4.4.5
+      '@smithy/types': 4.9.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.8.1
+
+  '@smithy/util-uri-escape@4.2.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@smithy/util-utf8@2.3.0':
+    dependencies:
+      '@smithy/util-buffer-from': 2.2.0
+      tslib: 2.8.1
+
+  '@smithy/util-utf8@4.2.0':
+    dependencies:
+      '@smithy/util-buffer-from': 4.2.0
+      tslib: 2.8.1
+
+  '@smithy/uuid@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@standard-schema/spec@1.0.0': {}
+
+  '@tailwindcss/forms@0.5.10(tailwindcss@3.4.18(tsx@4.21.0))':
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.4.18(tsx@4.21.0)
+
+  '@types/estree@1.0.8': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/minimatch@3.0.5': {}
+
+  '@types/node-cron@3.0.11': {}
+
+  '@types/node@18.19.130':
+    dependencies:
+      undici-types: 5.26.5
+
+  '@types/node@24.10.1':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/nodemailer@7.0.4':
+    dependencies:
+      '@aws-sdk/client-sesv2': 3.947.0
+      '@types/node': 24.10.1
+    transitivePeerDependencies:
+      - aws-crt
+
+  '@types/pg@8.15.6':
+    dependencies:
+      '@types/node': 24.10.1
+      pg-protocol: 1.10.3
+      pg-types: 2.2.0
+
+  '@types/qrcode@1.5.6':
+    dependencies:
+      '@types/node': 24.10.1
+
+  '@types/react@19.2.7':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/ssh2-sftp-client@9.0.6':
+    dependencies:
+      '@types/ssh2': 1.15.5
+
+  '@types/ssh2@1.15.5':
+    dependencies:
+      '@types/node': 18.19.130
+
+  '@types/validator@13.15.10': {}
+
+  '@types/web-bluetooth@0.0.21': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 24.10.1
+
+  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.48.1
+      '@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.48.1
+      eslint: 9.39.1(jiti@1.21.7)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.48.1
+      '@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.48.1
+      eslint: 9.39.1(jiti@2.6.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.48.1
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.48.1
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.48.1
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.48.1
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.48.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.48.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.48.1':
+    dependencies:
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/visitor-keys': 8.48.1
+
+  '@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@1.21.7)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@2.6.1)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.48.1': {}
+
+  '@typescript-eslint/typescript-estree@8.48.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/visitor-keys': 8.48.1
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.48.1(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@1.21.7))
+      '@typescript-eslint/scope-manager': 8.48.1
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      eslint: 9.39.1(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.48.1
+      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.48.1':
+    dependencies:
+      '@typescript-eslint/types': 8.48.1
+      eslint-visitor-keys: 4.2.1
+
+  '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@24.10.1)(jiti@1.21.7)(terser@5.44.1)(tsx@4.21.0))(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      vite: 6.4.1(@types/node@24.10.1)(jiti@1.21.7)(terser@5.44.1)(tsx@4.21.0)
+      vue: 3.5.25(typescript@5.9.3)
+
+  '@volar/language-core@2.4.26':
+    dependencies:
+      '@volar/source-map': 2.4.26
+
+  '@volar/source-map@2.4.26': {}
+
+  '@volar/typescript@2.4.26':
+    dependencies:
+      '@volar/language-core': 2.4.26
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/compiler-core@3.5.25':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.25
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.25':
+    dependencies:
+      '@vue/compiler-core': 3.5.25
+      '@vue/shared': 3.5.25
+
+  '@vue/compiler-sfc@3.5.25':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/compiler-core': 3.5.25
+      '@vue/compiler-dom': 3.5.25
+      '@vue/compiler-ssr': 3.5.25
+      '@vue/shared': 3.5.25
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.25':
+    dependencies:
+      '@vue/compiler-dom': 3.5.25
+      '@vue/shared': 3.5.25
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/language-core@3.1.6(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.26
+      '@vue/compiler-dom': 3.5.25
+      '@vue/shared': 3.5.25
+      alien-signals: 3.1.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@vue/reactivity@3.5.25':
+    dependencies:
+      '@vue/shared': 3.5.25
+
+  '@vue/runtime-core@3.5.25':
+    dependencies:
+      '@vue/reactivity': 3.5.25
+      '@vue/shared': 3.5.25
+
+  '@vue/runtime-dom@3.5.25':
+    dependencies:
+      '@vue/reactivity': 3.5.25
+      '@vue/runtime-core': 3.5.25
+      '@vue/shared': 3.5.25
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.25(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.25
+      '@vue/shared': 3.5.25
+      vue: 3.5.25(typescript@5.9.3)
+
+  '@vue/shared@3.5.25': {}
+
+  '@vueuse/core@12.8.2(typescript@5.9.3)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      vue: 3.5.25(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/metadata@12.8.2': {}
+
+  '@vueuse/shared@12.8.2(typescript@5.9.3)':
+    dependencies:
+      vue: 3.5.25(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@xterm/addon-clipboard@0.2.0':
+    dependencies:
+      js-base64: 3.7.8
+
+  '@xterm/addon-fit@0.11.0': {}
+
+  '@xterm/addon-image@0.9.0': {}
+
+  '@xterm/addon-search@0.16.0': {}
+
+  '@xterm/addon-serialize@0.14.0': {}
+
+  '@xterm/addon-unicode11@0.9.0': {}
+
+  '@xterm/addon-web-links@0.12.0': {}
+
+  '@xterm/addon-webgl@0.19.0': {}
+
+  '@xterm/xterm@6.0.0': {}
+
+  abstract-logging@2.0.1: {}
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  ajv-formats@3.0.1(ajv@8.17.1):
+    optionalDependencies:
+      ajv: 8.17.1
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  alien-signals@3.1.1: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.3: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@5.0.2: {}
+
+  argparse@2.0.1: {}
+
+  array-differ@3.0.0: {}
+
+  array-union@2.1.0: {}
+
+  arrify@2.0.1: {}
+
+  asn1.js@5.4.1:
+    dependencies:
+      bn.js: 4.12.2
+      inherits: 2.0.4
+      minimalistic-assert: 1.0.1
+      safer-buffer: 2.1.2
+
+  asn1@0.2.6:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  assert@2.1.0:
+    dependencies:
+      call-bind: 1.0.8
+      is-nan: 1.3.2
+      object-is: 1.1.6
+      object.assign: 4.1.7
+      util: 0.12.5
+
+  asynckit@0.4.0: {}
+
+  atomic-sleep@1.0.0: {}
+
+  atomically@2.1.0:
+    dependencies:
+      stubborn-fs: 2.0.0
+      when-exit: 2.1.5
+
+  autoprefixer@10.4.22(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001759
+      fraction.js: 5.3.4
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  avvio@9.1.0:
+    dependencies:
+      '@fastify/error': 4.2.0
+      fastq: 1.19.1
+
+  aws-ssl-profiles@1.1.2: {}
+
+  axios@1.13.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  balanced-match@1.0.2: {}
+
+  base-64@1.0.0: {}
+
+  baseline-browser-mapping@2.9.2: {}
+
+  basic-ftp@5.0.5: {}
+
+  bcrypt-pbkdf@1.0.2:
+    dependencies:
+      tweetnacl: 0.14.5
+
+  bcryptjs@2.4.3: {}
+
+  binary-extensions@2.3.0: {}
+
+  bn.js@4.12.2: {}
+
+  boolbase@1.0.0: {}
+
+  bowser@2.13.1: {}
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.2
+      caniuse-lite: 1.0.30001759
+      electron-to-chromium: 1.5.264
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.2(browserslist@4.28.1)
+
+  buffer-equal-constant-time@1.0.1: {}
+
+  buffer-from@1.1.2: {}
+
+  buildcheck@0.0.7:
+    optional: true
+
+  byte-length@1.0.2: {}
+
+  c12@3.1.0:
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 16.6.1
+      exsolve: 1.0.8
+      giget: 2.0.0
+      jiti: 2.6.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camelcase-css@2.0.1: {}
+
+  camelcase@5.3.1: {}
+
+  caniuse-lite@1.0.30001759: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chance@1.1.13: {}
+
+  char-regex@1.0.2: {}
+
+  charenc@0.0.2: {}
+
+  chevrotain@10.5.0:
+    dependencies:
+      '@chevrotain/cst-dts-gen': 10.5.0
+      '@chevrotain/gast': 10.5.0
+      '@chevrotain/types': 10.5.0
+      '@chevrotain/utils': 10.5.0
+      lodash: 4.17.21
+      regexp-to-ast: 0.5.0
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  citty@0.1.6:
+    dependencies:
+      consola: 3.4.2
+
+  class-validator@0.14.3:
+    dependencies:
+      '@types/validator': 13.15.10
+      libphonenumber-js: 1.12.31
+      validator: 13.15.23
+
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  colorette@2.0.20: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@12.1.0: {}
+
+  commander@2.20.3: {}
+
+  commander@4.1.1: {}
+
+  concat-map@0.0.1: {}
+
+  concat-stream@2.0.0:
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+      typedarray: 0.0.6
+
+  concurrently@9.2.1:
+    dependencies:
+      chalk: 4.1.2
+      rxjs: 7.8.2
+      shell-quote: 1.8.3
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
+  conf@15.0.2:
+    dependencies:
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      atomically: 2.1.0
+      debounce-fn: 6.0.0
+      dot-prop: 10.1.0
+      env-paths: 3.0.0
+      json-schema-typed: 8.0.2
+      semver: 7.7.3
+      uint8array-extras: 1.5.0
+
+  confbox@0.2.2: {}
+
+  consola@3.4.2: {}
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  cookie@1.1.1: {}
+
+  cpu-features@0.0.10:
+    dependencies:
+      buildcheck: 0.0.7
+      nan: 2.24.0
+    optional: true
+
+  cross-env@10.1.0:
+    dependencies:
+      '@epic-web/invariant': 1.0.0
+      cross-spawn: 7.0.6
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crypt@0.0.2: {}
+
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
+  data-uri-to-buffer@4.0.1: {}
+
+  dateformat@4.6.3: {}
+
+  debounce-fn@6.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decamelize@1.2.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge-ts@7.1.5: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  defu@6.1.4: {}
+
+  delayed-stream@1.0.0: {}
+
+  denque@2.1.0: {}
+
+  depd@2.0.0: {}
+
+  dequal@2.0.3: {}
+
+  destr@2.0.5: {}
+
+  detect-libc@2.0.2: {}
+
+  didyoumean@1.2.2: {}
+
+  dijkstrajs@1.0.3: {}
+
+  dlv@1.1.3: {}
+
+  dot-prop@10.1.0:
+    dependencies:
+      type-fest: 5.3.1
+
+  dotenv@16.6.1: {}
+
+  dotenv@17.2.3: {}
+
+  drizzle-kit@0.30.6:
+    dependencies:
+      '@drizzle-team/brocli': 0.10.2
+      '@esbuild-kit/esm-loader': 2.6.5
+      esbuild: 0.19.12
+      esbuild-register: 3.6.0(esbuild@0.19.12)
+      gel: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  drizzle-orm@0.38.4(@electric-sql/pglite@0.3.2)(@libsql/client@0.14.0)(@prisma/client@7.1.0(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(typescript@5.9.3))(@types/pg@8.15.6)(@types/react@19.2.7)(mysql2@3.15.3)(pg@8.16.3)(postgres@3.4.7)(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(react@19.2.1)(sql.js@1.13.0):
+    optionalDependencies:
+      '@electric-sql/pglite': 0.3.2
+      '@libsql/client': 0.14.0
+      '@prisma/client': 7.1.0(prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3))(typescript@5.9.3)
+      '@types/pg': 8.15.6
+      '@types/react': 19.2.7
+      mysql2: 3.15.3
+      pg: 8.16.3
+      postgres: 3.4.7
+      prisma: 7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
+      react: 19.2.1
+      sql.js: 1.13.0
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  duplexify@4.1.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+      stream-shift: 1.0.3
+
+  eastasianwidth@0.2.0: {}
+
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  effect@3.18.4:
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      fast-check: 3.23.2
+
+  electron-to-chromium@1.5.264: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  empathic@2.0.0: {}
+
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
+  env-paths@3.0.0: {}
+
+  err-code@2.0.3: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  esbuild-register@3.6.0(esbuild@0.19.12):
+    dependencies:
+      debug: 4.4.3
+      esbuild: 0.19.12
+    transitivePeerDependencies:
+      - supports-color
+
+  esbuild@0.18.20:
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+
+  esbuild@0.19.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
+
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
+  esbuild@0.27.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.1
+      '@esbuild/android-arm': 0.27.1
+      '@esbuild/android-arm64': 0.27.1
+      '@esbuild/android-x64': 0.27.1
+      '@esbuild/darwin-arm64': 0.27.1
+      '@esbuild/darwin-x64': 0.27.1
+      '@esbuild/freebsd-arm64': 0.27.1
+      '@esbuild/freebsd-x64': 0.27.1
+      '@esbuild/linux-arm': 0.27.1
+      '@esbuild/linux-arm64': 0.27.1
+      '@esbuild/linux-ia32': 0.27.1
+      '@esbuild/linux-loong64': 0.27.1
+      '@esbuild/linux-mips64el': 0.27.1
+      '@esbuild/linux-ppc64': 0.27.1
+      '@esbuild/linux-riscv64': 0.27.1
+      '@esbuild/linux-s390x': 0.27.1
+      '@esbuild/linux-x64': 0.27.1
+      '@esbuild/netbsd-arm64': 0.27.1
+      '@esbuild/netbsd-x64': 0.27.1
+      '@esbuild/openbsd-arm64': 0.27.1
+      '@esbuild/openbsd-x64': 0.27.1
+      '@esbuild/openharmony-arm64': 0.27.1
+      '@esbuild/sunos-x64': 0.27.1
+      '@esbuild/win32-arm64': 0.27.1
+      '@esbuild/win32-ia32': 0.27.1
+      '@esbuild/win32-x64': 0.27.1
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-plugin-vue@9.33.0(eslint@9.39.1(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@1.21.7))
+      eslint: 9.39.1(jiti@1.21.7)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.3
+      vue-eslint-parser: 9.4.3(eslint@9.39.1(jiti@1.21.7))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.39.1(jiti@1.21.7):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.3
+      '@eslint/js': 9.39.1
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 1.21.7
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint@9.39.1(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.3
+      '@eslint/js': 9.39.1
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-walker@2.0.2: {}
+
+  esutils@2.0.3: {}
+
+  exsolve@1.0.8: {}
+
+  fast-check@3.23.2:
+    dependencies:
+      pure-rand: 6.1.0
+
+  fast-copy@4.0.0: {}
+
+  fast-decode-uri-component@1.0.1: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-json-stringify@6.1.1:
+    dependencies:
+      '@fastify/merge-json-schemas': 0.2.1
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      fast-uri: 3.1.0
+      json-schema-ref-resolver: 3.0.0
+      rfdc: 1.4.1
+
+  fast-jwt@5.0.6:
+    dependencies:
+      '@lukeed/ms': 2.0.2
+      asn1.js: 5.4.1
+      ecdsa-sig-formatter: 1.0.11
+      mnemonist: 0.40.3
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-querystring@1.1.2:
+    dependencies:
+      fast-decode-uri-component: 1.0.1
+
+  fast-safe-stringify@2.1.1: {}
+
+  fast-uri@3.1.0: {}
+
+  fast-xml-parser@4.5.3:
+    dependencies:
+      strnum: 1.1.2
+
+  fast-xml-parser@5.2.5:
+    dependencies:
+      strnum: 2.1.1
+
+  fastfall@1.5.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fastify-cloudflare-turnstile@2.0.2:
+    dependencies:
+      fastify-plugin: 5.1.0
+      undici: 6.22.0
+
+  fastify-plugin@5.1.0: {}
+
+  fastify@5.6.2:
+    dependencies:
+      '@fastify/ajv-compiler': 4.0.5
+      '@fastify/error': 4.2.0
+      '@fastify/fast-json-stringify-compiler': 5.0.3
+      '@fastify/proxy-addr': 5.1.0
+      abstract-logging: 2.0.1
+      avvio: 9.1.0
+      fast-json-stringify: 6.1.1
+      find-my-way: 9.3.0
+      light-my-request: 6.6.0
+      pino: 10.1.0
+      process-warning: 5.0.0
+      rfdc: 1.4.1
+      secure-json-parse: 4.1.0
+      semver: 7.7.3
+      toad-cache: 3.7.0
+
+  fastparallel@2.4.1:
+    dependencies:
+      reusify: 1.1.0
+      xtend: 4.0.2
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fastseries@1.7.2:
+    dependencies:
+      reusify: 1.1.0
+      xtend: 4.0.2
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-my-way@9.3.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-querystring: 1.1.2
+      safe-regex2: 5.0.0
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flag-icons@7.5.0: {}
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  follow-redirects@1.15.11: {}
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  form-data@4.0.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
+
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
+  fraction.js@5.3.4: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gel@2.2.0:
+    dependencies:
+      '@petamoriken/float16': 3.9.3
+      debug: 4.4.3
+      env-paths: 3.0.0
+      semver: 7.7.3
+      shell-quote: 1.8.3
+      which: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  generate-function@2.3.1:
+    dependencies:
+      is-property: 1.0.2
+
+  generator-function@2.0.1: {}
+
+  get-caller-file@2.0.5: {}
+
+  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
+
+  get-port-please@3.1.2: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  giget@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      defu: 6.1.4
+      node-fetch-native: 1.6.7
+      nypm: 0.6.2
+      pathe: 2.0.3
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@11.1.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 4.1.1
+      minimatch: 10.1.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 2.0.1
+
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
+  globals@14.0.0: {}
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  grammex@3.1.12: {}
+
+  graphemer@1.4.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  helmet@8.1.0: {}
+
+  help-me@5.0.0: {}
+
+  hono@4.10.6: {}
+
+  hot-patcher@2.0.1: {}
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-status-codes@2.3.0: {}
+
+  iconv-lite@0.7.0:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  inherits@2.0.4: {}
+
+  inversify@6.1.4(reflect-metadata@0.2.2):
+    dependencies:
+      '@inversifyjs/common': 1.3.3
+      '@inversifyjs/core': 1.3.4(reflect-metadata@0.2.2)
+    transitivePeerDependencies:
+      - reflect-metadata
+
+  ip-address@10.1.0: {}
+
+  ipaddr.js@2.3.0: {}
+
+  is-arguments@1.2.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-buffer@1.1.6: {}
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-nan@1.3.2:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+
+  is-number@7.0.0: {}
+
+  is-property@1.0.2: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  isexe@2.0.0: {}
+
+  isexe@3.1.1: {}
+
+  jackspeak@4.1.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+
+  javascript-obfuscator@5.0.1:
+    dependencies:
+      '@javascript-obfuscator/escodegen': 2.3.1
+      '@javascript-obfuscator/estraverse': 5.4.0
+      acorn: 8.15.0
+      assert: 2.1.0
+      chalk: 4.1.2
+      chance: 1.1.13
+      class-validator: 0.14.3
+      commander: 12.1.0
+      conf: 15.0.2
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      fast-deep-equal: 3.1.3
+      inversify: 6.1.4(reflect-metadata@0.2.2)
+      js-string-escape: 1.0.1
+      md5: 2.3.0
+      mkdirp: 3.0.1
+      multimatch: 5.0.0
+      process: 0.11.10
+      reflect-metadata: 0.2.2
+      source-map-support: 0.5.21
+      string-template: 1.0.0
+      stringz: 2.1.0
+      tslib: 2.8.1
+
+  jiti@1.21.7: {}
+
+  jiti@2.6.1: {}
+
+  joycon@3.1.1: {}
+
+  js-base64@3.7.8: {}
+
+  js-string-escape@1.0.1: {}
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  json-buffer@3.0.1: {}
+
+  json-schema-ref-resolver@3.0.0:
+    dependencies:
+      dequal: 2.0.3
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  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.1.1
+      ms: 2.1.3
+      semver: 7.7.3
+
+  jwa@2.0.1:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@4.0.1:
+    dependencies:
+      jwa: 2.0.1
+      safe-buffer: 5.2.1
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  layerr@3.0.0: {}
+
+  levn@0.3.0:
+    dependencies:
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  libphonenumber-js@1.12.31: {}
+
+  libsql@0.4.7:
+    dependencies:
+      '@neon-rs/load': 0.0.4
+      detect-libc: 2.0.2
+    optionalDependencies:
+      '@libsql/darwin-arm64': 0.4.7
+      '@libsql/darwin-x64': 0.4.7
+      '@libsql/linux-arm64-gnu': 0.4.7
+      '@libsql/linux-arm64-musl': 0.4.7
+      '@libsql/linux-x64-gnu': 0.4.7
+      '@libsql/linux-x64-musl': 0.4.7
+      '@libsql/win32-x64-msvc': 0.4.7
+
+  light-my-request@6.6.0:
+    dependencies:
+      cookie: 1.1.1
+      process-warning: 4.0.1
+      set-cookie-parser: 2.7.2
+
+  lilconfig@2.1.0: {}
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  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.merge@4.6.2: {}
+
+  lodash.once@4.1.1: {}
+
+  lodash@4.17.21: {}
+
+  long@5.3.2: {}
+
+  lru-cache@11.2.4: {}
+
+  lru-cache@7.18.3: {}
+
+  lru.min@1.1.3: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  marked@17.0.1: {}
+
+  math-intrinsics@1.1.0: {}
+
+  md5@2.3.0:
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime@3.0.0: {}
+
+  mimic-function@5.0.1: {}
+
+  mini-svg-data-uri@1.4.4: {}
+
+  minimalistic-assert@1.0.1: {}
+
+  minimatch@10.1.1:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  mkdirp@3.0.1: {}
+
+  mnemonist@0.40.0:
+    dependencies:
+      obliterator: 2.0.5
+
+  mnemonist@0.40.3:
+    dependencies:
+      obliterator: 2.0.5
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  multimatch@5.0.0:
+    dependencies:
+      '@types/minimatch': 3.0.5
+      array-differ: 3.0.0
+      array-union: 2.1.0
+      arrify: 2.0.1
+      minimatch: 3.1.2
+
+  mysql2@3.15.3:
+    dependencies:
+      aws-ssl-profiles: 1.1.2
+      denque: 2.1.0
+      generate-function: 2.3.1
+      iconv-lite: 0.7.0
+      long: 5.3.2
+      lru.min: 1.1.3
+      named-placeholders: 1.1.3
+      seq-queue: 0.0.5
+      sqlstring: 2.3.3
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  named-placeholders@1.1.3:
+    dependencies:
+      lru-cache: 7.18.3
+
+  nan@2.24.0:
+    optional: true
+
+  nanoid@3.3.11: {}
+
+  nanoid@5.1.6: {}
+
+  natural-compare@1.4.0: {}
+
+  nested-property@4.0.0: {}
+
+  node-cron@4.2.1: {}
+
+  node-domexception@1.0.0: {}
+
+  node-fetch-native@1.6.7: {}
+
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
+  node-releases@2.0.27: {}
+
+  nodemailer@7.0.11: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  nypm@0.6.2:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      tinyexec: 1.0.2
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  object-is@1.1.6:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  obliterator@2.0.5: {}
+
+  ohash@2.0.11: {}
+
+  on-exit-leak-free@2.1.2: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  optionator@0.8.3:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.3.0
+      prelude-ls: 1.1.2
+      type-check: 0.3.2
+      word-wrap: 1.2.5
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  otplib@12.0.1:
+    dependencies:
+      '@otplib/core': 12.0.1
+      '@otplib/preset-default': 12.0.1
+      '@otplib/preset-v11': 12.0.1
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-limit@7.2.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  path-browserify@1.0.1: {}
+
+  path-exists@4.0.0: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-posix@1.0.0: {}
+
+  path-scurry@2.0.1:
+    dependencies:
+      lru-cache: 11.2.4
+      minipass: 7.1.2
+
+  pathe@2.0.3: {}
+
+  perfect-debounce@1.0.0: {}
+
+  pg-cloudflare@1.2.7:
+    optional: true
+
+  pg-connection-string@2.9.1: {}
+
+  pg-int8@1.0.1: {}
+
+  pg-pool@3.10.1(pg@8.16.3):
+    dependencies:
+      pg: 8.16.3
+
+  pg-protocol@1.10.3: {}
+
+  pg-types@2.2.0:
+    dependencies:
+      pg-int8: 1.0.1
+      postgres-array: 2.0.0
+      postgres-bytea: 1.0.0
+      postgres-date: 1.0.7
+      postgres-interval: 1.2.0
+
+  pg@8.16.3:
+    dependencies:
+      pg-connection-string: 2.9.1
+      pg-pool: 3.10.1(pg@8.16.3)
+      pg-protocol: 1.10.3
+      pg-types: 2.2.0
+      pgpass: 1.0.5
+    optionalDependencies:
+      pg-cloudflare: 1.2.7
+
+  pgpass@1.0.5:
+    dependencies:
+      split2: 4.2.0
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  pify@2.3.0: {}
+
+  pinia@2.3.1(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.25(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.25(typescript@5.9.3))
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  pino-abstract-transport@2.0.0:
+    dependencies:
+      split2: 4.2.0
+
+  pino-abstract-transport@3.0.0:
+    dependencies:
+      split2: 4.2.0
+
+  pino-pretty@13.1.3:
+    dependencies:
+      colorette: 2.0.20
+      dateformat: 4.6.3
+      fast-copy: 4.0.0
+      fast-safe-stringify: 2.1.1
+      help-me: 5.0.0
+      joycon: 3.1.1
+      minimist: 1.2.8
+      on-exit-leak-free: 2.1.2
+      pino-abstract-transport: 3.0.0
+      pump: 3.0.3
+      secure-json-parse: 4.1.0
+      sonic-boom: 4.2.0
+      strip-json-comments: 5.0.3
+
+  pino-std-serializers@7.0.0: {}
+
+  pino@10.1.0:
+    dependencies:
+      '@pinojs/redact': 0.4.0
+      atomic-sleep: 1.0.0
+      on-exit-leak-free: 2.1.2
+      pino-abstract-transport: 2.0.0
+      pino-std-serializers: 7.0.0
+      process-warning: 5.0.0
+      quick-format-unescaped: 4.0.4
+      real-require: 0.2.0
+      safe-stable-stringify: 2.5.0
+      sonic-boom: 4.2.0
+      thread-stream: 3.1.0
+
+  pirates@4.0.7: {}
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  pngjs@5.0.0: {}
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-import@15.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.11
+
+  postcss-js@4.1.0(postcss@8.5.6):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.6
+
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.21.0):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 1.21.7
+      postcss: 8.5.6
+      tsx: 4.21.0
+
+  postcss-nested@6.2.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postgres-array@2.0.0: {}
+
+  postgres-array@3.0.4: {}
+
+  postgres-bytea@1.0.0: {}
+
+  postgres-date@1.0.7: {}
+
+  postgres-interval@1.2.0:
+    dependencies:
+      xtend: 4.0.2
+
+  postgres@3.4.7: {}
+
+  prelude-ls@1.1.2: {}
+
+  prelude-ls@1.2.1: {}
+
+  prisma@7.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3):
+    dependencies:
+      '@prisma/config': 7.1.0
+      '@prisma/dev': 0.15.0(typescript@5.9.3)
+      '@prisma/engines': 7.1.0
+      '@prisma/studio-core': 0.8.2(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      mysql2: 3.15.3
+      postgres: 3.4.7
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - magicast
+      - react
+      - react-dom
+
+  process-warning@4.0.1: {}
+
+  process-warning@5.0.0: {}
+
+  process@0.11.10: {}
+
+  promise-limit@2.7.0: {}
+
+  promise-retry@2.0.1:
+    dependencies:
+      err-code: 2.0.3
+      retry: 0.12.0
+
+  proper-lockfile@4.1.2:
+    dependencies:
+      graceful-fs: 4.2.11
+      retry: 0.12.0
+      signal-exit: 3.0.7
+
+  proxy-from-env@1.1.0: {}
+
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
+  punycode@2.3.1: {}
+
+  pure-rand@6.1.0: {}
+
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
+  querystringify@2.2.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  quick-format-unescaped@4.0.4: {}
+
+  rc9@2.1.2:
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.5
+
+  react-dom@19.2.1(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      scheduler: 0.27.0
+
+  react@19.2.1: {}
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  readdirp@4.1.2: {}
+
+  real-require@0.2.0: {}
+
+  reflect-metadata@0.2.2: {}
+
+  regexp-to-ast@0.5.0: {}
+
+  remeda@2.21.3:
+    dependencies:
+      type-fest: 4.41.0
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  require-main-filename@2.0.0: {}
+
+  requires-port@1.0.0: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  ret@0.5.0: {}
+
+  retry@0.12.0: {}
+
+  reusify@1.1.0: {}
+
+  rfdc@1.4.1: {}
+
+  rollup-plugin-obfuscator@1.1.0(javascript-obfuscator@5.0.1)(rollup@4.53.3):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
+      javascript-obfuscator: 5.0.1
+      rollup: 4.53.3
+
+  rollup@4.53.3:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.53.3
+      '@rollup/rollup-android-arm64': 4.53.3
+      '@rollup/rollup-darwin-arm64': 4.53.3
+      '@rollup/rollup-darwin-x64': 4.53.3
+      '@rollup/rollup-freebsd-arm64': 4.53.3
+      '@rollup/rollup-freebsd-x64': 4.53.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.53.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.53.3
+      '@rollup/rollup-linux-arm64-gnu': 4.53.3
+      '@rollup/rollup-linux-arm64-musl': 4.53.3
+      '@rollup/rollup-linux-loong64-gnu': 4.53.3
+      '@rollup/rollup-linux-ppc64-gnu': 4.53.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.53.3
+      '@rollup/rollup-linux-riscv64-musl': 4.53.3
+      '@rollup/rollup-linux-s390x-gnu': 4.53.3
+      '@rollup/rollup-linux-x64-gnu': 4.53.3
+      '@rollup/rollup-linux-x64-musl': 4.53.3
+      '@rollup/rollup-openharmony-arm64': 4.53.3
+      '@rollup/rollup-win32-arm64-msvc': 4.53.3
+      '@rollup/rollup-win32-ia32-msvc': 4.53.3
+      '@rollup/rollup-win32-x64-gnu': 4.53.3
+      '@rollup/rollup-win32-x64-msvc': 4.53.3
+      fsevents: 2.3.3
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  safe-buffer@5.2.1: {}
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safe-regex2@5.0.0:
+    dependencies:
+      ret: 0.5.0
+
+  safe-stable-stringify@2.5.0: {}
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.27.0: {}
+
+  secure-json-parse@4.1.0: {}
+
+  semver@7.7.3: {}
+
+  seq-queue@0.0.5: {}
+
+  set-blocking@2.0.0: {}
+
+  set-cookie-parser@2.7.2: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  setprototypeof@1.2.0: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  shell-quote@1.8.3: {}
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-icons@16.1.0: {}
+
+  sonic-boom@4.2.0:
+    dependencies:
+      atomic-sleep: 1.0.0
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  split2@4.2.0: {}
+
+  sql.js@1.13.0:
+    optional: true
+
+  sqlstring@2.3.3: {}
+
+  ssh2-sftp-client@11.0.0:
+    dependencies:
+      concat-stream: 2.0.0
+      promise-retry: 2.0.1
+      ssh2: 1.17.0
+
+  ssh2@1.17.0:
+    dependencies:
+      asn1: 0.2.6
+      bcrypt-pbkdf: 1.0.2
+    optionalDependencies:
+      cpu-features: 0.0.10
+      nan: 2.24.0
+
+  statuses@2.0.2: {}
+
+  std-env@3.9.0: {}
+
+  steed@1.1.3:
+    dependencies:
+      fastfall: 1.5.1
+      fastparallel: 2.4.1
+      fastq: 1.19.1
+      fastseries: 1.7.2
+      reusify: 1.1.0
+
+  stream-shift@1.0.3: {}
+
+  string-template@1.0.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  stringz@2.1.0:
+    dependencies:
+      char-regex: 1.0.2
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-json-comments@3.1.1: {}
+
+  strip-json-comments@5.0.3: {}
+
+  strnum@1.1.2: {}
+
+  strnum@2.1.1: {}
+
+  stubborn-fs@2.0.0:
+    dependencies:
+      stubborn-utils: 1.0.2
+
+  stubborn-utils@1.0.2: {}
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.15
+      ts-interface-checker: 0.1.13
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  tagged-tag@1.0.0: {}
+
+  tailwindcss@3.4.18(tsx@4.21.0):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.1.0(postcss@8.5.6)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.21.0)
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.11
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
+  terser@5.44.1:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.15.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  thirty-two@1.0.2: {}
+
+  thread-stream@3.1.0:
+    dependencies:
+      real-require: 0.2.0
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toad-cache@3.7.0: {}
+
+  toidentifier@1.0.1: {}
+
+  tree-kill@1.2.2: {}
+
+  ts-api-utils@2.1.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.8.1: {}
+
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.1
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  tweetnacl@0.14.5: {}
+
+  type-check@0.3.2:
+    dependencies:
+      prelude-ls: 1.1.2
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.20.2: {}
+
+  type-fest@4.41.0: {}
+
+  type-fest@5.3.1:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  typedarray@0.0.6: {}
+
+  typescript@5.9.3: {}
+
+  uint8array-extras@1.5.0: {}
+
+  undici-types@5.26.5: {}
+
+  undici-types@7.16.0: {}
+
+  undici@6.22.0: {}
+
+  undici@7.16.0: {}
+
+  update-browserslist-db@1.2.2(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  url-join@5.0.0: {}
+
+  url-parse@1.5.10:
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
+  util-deprecate@1.0.2: {}
+
+  util@0.12.5:
+    dependencies:
+      inherits: 2.0.4
+      is-arguments: 1.2.0
+      is-generator-function: 1.1.2
+      is-typed-array: 1.1.15
+      which-typed-array: 1.1.19
+
+  valibot@1.2.0(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  validator@13.15.23: {}
+
+  vite@6.4.1(@types/node@24.10.1)(jiti@1.21.7)(terser@5.44.1)(tsx@4.21.0):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.53.3
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.10.1
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      terser: 5.44.1
+      tsx: 4.21.0
+
+  vscode-uri@3.1.0: {}
+
+  vue-demi@0.14.10(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.25(typescript@5.9.3)
+
+  vue-eslint-parser@9.4.3(eslint@9.39.1(jiti@1.21.7)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@1.21.7)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      lodash: 4.17.21
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-i18n@11.2.2(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      '@intlify/core-base': 11.2.2
+      '@intlify/shared': 11.2.2
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.25(typescript@5.9.3)
+
+  vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.25(typescript@5.9.3)
+
+  vue-tsc@3.1.6(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.26
+      '@vue/language-core': 3.1.6(typescript@5.9.3)
+      typescript: 5.9.3
+
+  vue-turnstile@1.0.11(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.25(typescript@5.9.3)
+
+  vue@3.5.25(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.25
+      '@vue/compiler-sfc': 3.5.25
+      '@vue/runtime-dom': 3.5.25
+      '@vue/server-renderer': 3.5.25(vue@3.5.25(typescript@5.9.3))
+      '@vue/shared': 3.5.25
+    optionalDependencies:
+      typescript: 5.9.3
+
+  web-streams-polyfill@3.3.3: {}
+
+  webdav@5.8.0:
+    dependencies:
+      '@buttercup/fetch': 0.2.1
+      base-64: 1.0.0
+      byte-length: 1.0.2
+      entities: 6.0.1
+      fast-xml-parser: 4.5.3
+      hot-patcher: 2.0.1
+      layerr: 3.0.0
+      md5: 2.3.0
+      minimatch: 9.0.5
+      nested-property: 4.0.0
+      node-fetch: 3.3.2
+      path-posix: 1.0.0
+      url-join: 5.0.0
+      url-parse: 1.5.10
+
+  when-exit@2.1.5: {}
+
+  which-module@2.0.1: {}
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.1
+
+  word-wrap@1.2.5: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrappy@1.0.2: {}
+
+  ws@8.18.3: {}
+
+  xml-name-validator@4.0.0: {}
+
+  xtend@4.0.2: {}
+
+  y18n@4.0.3: {}
+
+  y18n@5.0.8: {}
+
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs-parser@21.1.1: {}
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yocto-queue@0.1.0: {}
+
+  yocto-queue@1.2.2: {}
+
+  zeptomatch@2.0.2:
+    dependencies:
+      grammex: 3.1.12
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..274c4b4
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,4 @@
+packages:
+  - 'client'
+  - 'server'
+
diff --git a/scripts/generate-badges-from-html.mjs b/scripts/generate-badges-from-html.mjs
new file mode 100644
index 0000000..ab745a3
--- /dev/null
+++ b/scripts/generate-badges-from-html.mjs
@@ -0,0 +1,315 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import vm from 'node:vm'
+
+import ts from '../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/typescript.js'
+
+const rootDir = process.cwd()
+const outputDir = path.join(rootDir, 'client', 'public', 'badges')
+const manifestPath = path.join(rootDir, 'server', 'src', 'config', 'badges.generated.json')
+const manifestTsPath = path.join(rootDir, 'server', 'src', 'config', 'badges.generated.ts')
+const sourceFiles = [
+  {
+    fileName: 'aaaa.html',
+    sourceId: 'core',
+    sourceLabel: '核心科幻'
+  },
+  {
+    fileName: 'bbbb.html',
+    sourceId: 'astro-zodiac',
+    sourceLabel: '星相生肖'
+  }
+]
+
+function writeManifestTs(manifest) {
+  fs.writeFileSync(
+    manifestTsPath,
+    `export const badgeCatalogData = ${JSON.stringify(manifest, null, 2)} as const\n`
+  )
+}
+
+const passthroughAttributes = new Set(['viewBox', 'xmlns', 'preserveAspectRatio'])
+
+function toKebabCase(value) {
+  return value.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}
+
+function toAttributeName(name) {
+  if (name === 'className') return 'class'
+  if (passthroughAttributes.has(name)) return name
+  return toKebabCase(name)
+}
+
+function escapeAttribute(value) {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+function serializeStyle(style) {
+  return Object.entries(style)
+    .map(([key, value]) => `${toKebabCase(key)}:${value}`)
+    .join(';')
+}
+
+function h(tag, props, ...children) {
+  const normalizedProps = props || {}
+  if (typeof tag === 'function') {
+    return tag({ ...normalizedProps, children })
+  }
+
+  const attributes = Object.entries(normalizedProps)
+    .filter(([, value]) => value !== null && value !== undefined && value !== false)
+    .map(([key, value]) => {
+      if (value === true) {
+        return toAttributeName(key)
+      }
+
+      const attrValue = key === 'style' && typeof value === 'object'
+        ? serializeStyle(value)
+        : value
+
+      return `${toAttributeName(key)}="${escapeAttribute(attrValue)}"`
+    })
+    .join(' ')
+
+  const content = children
+    .flat(Infinity)
+    .filter(value => value !== null && value !== undefined && value !== false)
+    .join('')
+
+  return `<${tag}${attributes ? ` ${attributes}` : ''}>${content}</${tag}>`
+}
+
+function Fragment(_props, ...children) {
+  return children.flat(Infinity).join('')
+}
+
+const gradients = [
+  { id: 'supreme', dark: ['#2a2d3e', '#0a0a0f'], light: ['#ffffff', '#cbd5e1'] },
+  { id: 'void', dark: ['#1a0033', '#05000a', '#000000'], light: ['#312e81', '#0f172a', '#020617'] },
+  { id: 'ice', dark: ['#002244', '#000a1a'], light: ['#e0f2fe', '#7dd3fc'] },
+  { id: 'gold', dark: ['#4a3b1c', '#1a140a'], light: ['#fef3c7', '#fbbf24'] },
+  { id: 'moon', dark: ['#334155', '#0f172a'], light: ['#f8fafc', '#94a3b8'] },
+  { id: 'omega', dark: ['#4a0000', '#1a0000'], light: ['#fee2e2', '#f87171'] },
+  { id: 'matrix', dark: ['#003311', '#001100'], light: ['#dcfce7', '#4ade80'] },
+  { id: 'platinum', dark: ['#475569', '#1e293b'], light: ['#ffffff', '#94a3b8'] },
+  { id: 'nebula', dark: ['#581c87', '#831843', '#171717'], light: ['#f3e8ff', '#fbcfe8', '#cbd5e1'] },
+  { id: 'aegis', dark: ['#0f172a', '#020617'], light: ['#f1f5f9', '#94a3b8'] },
+  { id: 'reactor', dark: ['#14532d', '#052e16'], light: ['#dcfce7', '#4ade80'] },
+  { id: 'tactical', dark: ['#450a0a', '#2a0000'], light: ['#fee2e2', '#f87171'] },
+  { id: 'arcane', dark: ['#3b0764', '#17002e'], light: ['#f3e8ff', '#c084fc'] }
+]
+
+function buildDefs() {
+  const filters = `
+<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="blur"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
+  <feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
+  <feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="glow"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>
+<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
+  <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
+  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
+  <feMerge>
+    <feMergeNode in="shadow"></feMergeNode>
+    <feMergeNode in="b1"></feMergeNode>
+    <feMergeNode in="b2"></feMergeNode>
+    <feMergeNode in="SourceGraphic"></feMergeNode>
+  </feMerge>
+</filter>`
+
+  const gradientMarkup = gradients.map(gradient => {
+    const buildGradient = (colors, theme) => {
+      const stops = colors.map((color, index) => {
+        const offset = colors.length === 1
+          ? '0%'
+          : `${(index / (colors.length - 1)) * 100}%`
+        return `<stop offset="${offset}" stop-color="${color}"></stop>`
+      }).join('')
+      return `<linearGradient id="bg-${gradient.id}-${theme}" x1="0%" y1="0%" x2="100%" y2="100%">${stops}</linearGradient>`
+    }
+
+    return [
+      buildGradient(gradient.dark, 'd'),
+      buildGradient(gradient.light, 'l')
+    ].join('')
+  }).join('')
+
+  return `<defs>${filters}${gradientMarkup}</defs>`
+}
+
+const defsMarkup = buildDefs()
+
+function injectDefs(svg, extraStyles = '') {
+  const withXmlns = svg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ')
+  const styleBlock = extraStyles ? `<style>${extraStyles}</style>` : ''
+  return withXmlns.replace(/^(<svg[^>]*>)/, `$1${styleBlock}${defsMarkup}`)
+}
+
+function splitLabel(label) {
+  const matched = label.match(/^(.*?)\s+\((.*?)\)$/)
+  if (!matched) {
+    return {
+      name: label.trim(),
+      nameEn: null
+    }
+  }
+
+  return {
+    name: matched[1].trim(),
+    nameEn: matched[2].trim()
+  }
+}
+
+function splitSeriesMeta(title) {
+  const normalized = title.replace(/^[^\p{L}\p{N}]+/u, '').trim()
+  const matched = normalized.match(/^([A-Z]+)\s+(.+)$/)
+  if (!matched) {
+    return {
+      seriesId: 'misc',
+      seriesNameEn: null,
+      seriesNameZh: normalized
+    }
+  }
+
+  return {
+    seriesId: matched[1].toLowerCase(),
+    seriesNameEn: matched[1],
+    seriesNameZh: matched[2].trim()
+  }
+}
+
+const availableSourceFiles = sourceFiles.filter(source => fs.existsSync(path.join(rootDir, source.fileName)))
+
+if (availableSourceFiles.length !== sourceFiles.length) {
+  if (fs.existsSync(manifestPath)) {
+    const existingManifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+    writeManifestTs(existingManifest)
+    console.warn('Badge source html files are missing. Kept existing badge assets and regenerated TypeScript manifest from JSON only.')
+    process.exit(0)
+  }
+
+  throw new Error('Badge source html files are missing and no existing manifest is available.')
+}
+
+fs.rmSync(outputDir, { recursive: true, force: true })
+fs.mkdirSync(outputDir, { recursive: true })
+fs.mkdirSync(path.join(outputDir, 'dark'), { recursive: true })
+fs.mkdirSync(path.join(outputDir, 'light'), { recursive: true })
+
+const manifest = []
+const seenBadgeIds = new Set()
+
+for (const source of availableSourceFiles) {
+  const sourcePath = path.join(rootDir, source.fileName)
+  const html = fs.readFileSync(sourcePath, 'utf8')
+  const styleMatches = Array.from(html.matchAll(/<style>([\s\S]*?)<\/style>/g))
+  const extraStyles = styleMatches
+    .map(match => match[1].trim())
+    .filter(Boolean)
+    .join('\n')
+
+  const scriptMatch = html.match(/<script type="text\/babel">([\s\S]*?)<\/script>/)
+  if (!scriptMatch) {
+    throw new Error(`Failed to locate badge source script in ${source.fileName}`)
+  }
+
+  const scriptContent = scriptMatch[1]
+  const componentStart = scriptContent.indexOf('const SvgFilters')
+  const componentEnd = scriptContent.indexOf('const App = () =>')
+  if (componentStart === -1 || componentEnd === -1) {
+    throw new Error(`Failed to locate badge component section in ${source.fileName}`)
+  }
+
+  const componentSource = scriptContent.slice(componentStart, componentEnd)
+  const transpiled = ts.transpileModule(componentSource, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ES2022,
+      module: ts.ModuleKind.CommonJS,
+      jsx: ts.JsxEmit.React,
+      jsxFactory: 'h',
+      jsxFragmentFactory: 'Fragment'
+    }
+  }).outputText
+
+  const context = {
+    h,
+    Fragment,
+    console
+  }
+  vm.createContext(context)
+  vm.runInContext(`${transpiled}
+this.seriesData = seriesData;`, context)
+
+  for (const series of context.seriesData) {
+    const seriesMeta = splitSeriesMeta(series.title)
+    const seriesId = seriesMeta.seriesId
+    const seriesTitle = series.title
+    for (const item of series.icons) {
+      if (seenBadgeIds.has(item.id)) {
+        throw new Error(`Duplicate badge id detected: ${item.id}`)
+      }
+      seenBadgeIds.add(item.id)
+
+      const parts = splitLabel(item.label)
+      const renderProps = {
+        d: true,
+        c1: item.c1,
+        c2: item.c2,
+        bgId: item.bg,
+        element: item.el,
+        lines: item.lines,
+        nodes: item.nodes
+      }
+      const darkSvgMarkup = injectDefs(item.component(renderProps), extraStyles)
+      const lightSvgMarkup = injectDefs(item.component({ ...renderProps, d: false }), extraStyles)
+      const fileName = `${item.id}.svg`
+      fs.writeFileSync(path.join(outputDir, 'dark', fileName), `${darkSvgMarkup}\n`)
+      fs.writeFileSync(path.join(outputDir, 'light', fileName), `${lightSvgMarkup}\n`)
+      manifest.push({
+        id: item.id,
+        name: parts.name,
+        nameEn: parts.nameEn,
+        fullLabel: item.label,
+        sourceId: source.sourceId,
+        sourceLabel: source.sourceLabel,
+        seriesId,
+        seriesTitle,
+        seriesNameZh: seriesMeta.seriesNameZh,
+        seriesNameEn: seriesMeta.seriesNameEn,
+        seriesDescription: series.desc,
+        assetUrl: `/badges/dark/${fileName}`,
+        assetUrlDark: `/badges/dark/${fileName}`,
+        assetUrlLight: `/badges/light/${fileName}`
+      })
+    }
+  }
+}
+
+fs.writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`)
+writeManifestTs(manifest)
+console.log(`Generated ${manifest.length} badge assets and manifest.`)
diff --git a/scripts/init-env.sh b/scripts/init-env.sh
new file mode 100644
index 0000000..afb77d5
--- /dev/null
+++ b/scripts/init-env.sh
@@ -0,0 +1,97 @@
+#!/usr/bin/env bash
+# ============================================================================
+# Incudal 本地 .env 初始化脚本
+#
+# 用法：
+#   bash scripts/init-env.sh
+#
+# 行为：
+#   - 如果 .env 不存在，创建 .env
+#   - 如果 .env 已存在，只补齐缺失或空值的关键变量
+#   - 不覆盖已有非空配置，避免破坏已部署实例
+# ============================================================================
+set -euo pipefail
+
+ENV_FILE="${ENV_FILE:-.env}"
+
+log() {
+    echo "[✓] $1" >&2
+}
+
+info() {
+    echo "[i] $1" >&2
+}
+
+gen_password() {
+    openssl rand -hex 64 | cut -c "1-${1:-24}"
+}
+
+gen_secret() {
+    printf 'A1!%s' "$(openssl rand -hex 64)" | cut -c "1-${1:-48}"
+}
+
+get_env_value() {
+    local key="$1"
+    if [[ ! -f "$ENV_FILE" ]]; then
+        return 0
+    fi
+    grep -E "^${key}=" "$ENV_FILE" 2>/dev/null | tail -n 1 | cut -d'=' -f2- || true
+}
+
+set_env_if_missing() {
+    local key="$1"
+    local value="$2"
+    local label="$3"
+    local current
+    current="$(get_env_value "$key")"
+
+    if [[ -n "$current" ]]; then
+        return 0
+    fi
+
+    if grep -qE "^${key}=" "$ENV_FILE" 2>/dev/null; then
+        local tmp_file
+        tmp_file="$(mktemp)"
+        awk -v key="$key" -v value="$value" '
+            BEGIN { replaced = 0 }
+            $0 ~ "^" key "=" && replaced == 0 {
+                print key "=" value
+                replaced = 1
+                next
+            }
+            { print }
+        ' "$ENV_FILE" > "$tmp_file"
+        cat "$tmp_file" > "$ENV_FILE"
+        rm -f "$tmp_file"
+    else
+        printf '\n%s=%s\n' "$key" "$value" >> "$ENV_FILE"
+    fi
+
+    log "已自动补充 ${label}: ${key}"
+}
+
+if [[ ! -f "$ENV_FILE" ]]; then
+    cat > "$ENV_FILE" <<EOF_ENV
+# ============================================================================
+# Incudal Docker 部署环境配置
+# 由 scripts/init-env.sh 自动生成于 $(date '+%Y-%m-%d %H:%M:%S')
+# ============================================================================
+EOF_ENV
+    info "已创建 ${ENV_FILE}"
+fi
+
+set_env_if_missing "POSTGRES_USER" "incudal" "PostgreSQL 用户"
+set_env_if_missing "POSTGRES_PASSWORD" "$(gen_password 24)" "PostgreSQL 密码"
+set_env_if_missing "POSTGRES_DB" "incudal" "PostgreSQL 数据库名"
+set_env_if_missing "REDIS_PASSWORD" "$(gen_password 24)" "Redis 密码"
+set_env_if_missing "JWT_SECRET" "$(gen_secret 48)" "JWT 密钥"
+set_env_if_missing "COOKIE_SECRET" "$(gen_secret 48)" "Cookie 密钥"
+set_env_if_missing "ENCRYPTION_KEY" "$(openssl rand -base64 32)" "敏感数据加密密钥"
+set_env_if_missing "APP_PORT" "3000" "应用端口"
+set_env_if_missing "ADMIN_PASSWORD" "$(gen_password 16)" "管理员初始密码"
+set_env_if_missing "LOG_LEVEL" "info" "日志级别"
+set_env_if_missing "DISABLE_REQUEST_LOG" "true" "请求日志开关"
+
+chmod 600 "$ENV_FILE"
+log "环境配置已就绪: ${ENV_FILE}"
+info "请备份 ${ENV_FILE}，尤其是 ENCRYPTION_KEY，生产环境不能随意更换。"
diff --git a/scripts/install-docker.sh b/scripts/install-docker.sh
new file mode 100644
index 0000000..7f5a9d7
--- /dev/null
+++ b/scripts/install-docker.sh
@@ -0,0 +1,759 @@
+#!/usr/bin/env bash
+# ============================================================================
+# Incudal 面板一键部署脚本（Docker 模式）
+#
+# 功能：
+#   - 自动安装 Docker Engine 和 Docker Compose
+#   - 从 GitHub Container Registry (ghcr.io) 拉取预构建镜像
+#   - 自动配置 docker-compose.yml、环境变量
+#   - PostgreSQL 16 + Redis 7 全容器化运行
+#   - 支持 Nginx+Certbot / Cloudflare Tunnel / 纯端口 三种外部访问方案
+#   - 支持升级和卸载
+#
+# 用法：
+#   安装：  sudo bash install-docker.sh
+#   升级：  sudo bash install-docker.sh --upgrade
+#   卸载：  sudo bash install-docker.sh --uninstall
+#
+# 项目地址: https://github.com/0xdabiaoge/incudal
+# ============================================================================
+set -euo pipefail
+
+# ========================== 全局常量 ==========================
+readonly SCRIPT_VERSION="1.0.0"
+readonly GITHUB_REPO="0xdabiaoge/incudal"
+readonly DOCKER_IMAGE="ghcr.io/${GITHUB_REPO}"
+readonly INSTALL_DIR="/opt/incudal"
+readonly ENV_FILE="${INSTALL_DIR}/.env"
+readonly COMPOSE_FILE="${INSTALL_DIR}/docker-compose.yml"
+readonly DEFAULT_PORT=3000
+
+# ========================== 颜色定义 ==========================
+readonly RED='\033[1;31m'
+readonly GREEN='\033[1;32m'
+readonly YELLOW='\033[1;33m'
+readonly CYAN='\033[1;36m'
+readonly BOLD='\033[1m'
+readonly DIM='\033[2m'
+readonly NC='\033[0m'
+
+# ========================== 工具函数 ==========================
+# 所有日志输出到 stderr，避免在 $() 子 shell 中被捕获
+log()   { echo -e "${GREEN}[✓]${NC} $1" >&2; }
+info()  { echo -e "${CYAN}[i]${NC} $1" >&2; }
+warn()  { echo -e "${YELLOW}[!]${NC} $1" >&2; }
+error() { echo -e "${RED}[✗]${NC} $1" >&2; }
+step()  { echo -e "\n${CYAN}[▶]${NC} ${BOLD}$1${NC}" >&2; }
+
+divider() {
+    echo -e "${DIM}────────────────────────────────────────────────────${NC}" >&2
+}
+
+# 生成随机密码
+gen_password() {
+    openssl rand -hex 64 | cut -c "1-${1:-24}"
+}
+
+gen_secret() {
+    printf 'A1!%s' "$(openssl rand -hex 64)" | cut -c "1-${1:-48}"
+}
+
+get_env_value() {
+    local key="$1"
+    if [[ ! -f "$ENV_FILE" ]]; then
+        return 0
+    fi
+    grep -E "^${key}=" "$ENV_FILE" 2>/dev/null | tail -n 1 | cut -d'=' -f2- || true
+}
+
+set_env_if_missing() {
+    local key="$1"
+    local value="$2"
+    local label="$3"
+    local current
+    current="$(get_env_value "$key")"
+
+    if [[ -n "$current" ]]; then
+        return 0
+    fi
+
+    if grep -qE "^${key}=" "$ENV_FILE" 2>/dev/null; then
+        local tmp_file
+        tmp_file="$(mktemp)"
+        awk -v key="$key" -v value="$value" '
+            BEGIN { replaced = 0 }
+            $0 ~ "^" key "=" && replaced == 0 {
+                print key "=" value
+                replaced = 1
+                next
+            }
+            { print }
+        ' "$ENV_FILE" > "$tmp_file"
+        cat "$tmp_file" > "$ENV_FILE"
+        rm -f "$tmp_file"
+    else
+        printf '\n%s=%s\n' "$key" "$value" >> "$ENV_FILE"
+    fi
+
+    log "已自动补充 ${label}: ${key}"
+}
+
+ensure_env_keys() {
+    if [[ ! -f "$ENV_FILE" ]]; then
+        return 0
+    fi
+
+    set_env_if_missing "POSTGRES_PASSWORD" "$(gen_password 24)" "PostgreSQL 密码"
+    set_env_if_missing "REDIS_PASSWORD" "$(gen_password 24)" "Redis 密码"
+    set_env_if_missing "JWT_SECRET" "$(gen_secret 48)" "JWT 密钥"
+    set_env_if_missing "COOKIE_SECRET" "$(gen_secret 48)" "Cookie 密钥"
+    set_env_if_missing "ENCRYPTION_KEY" "$(openssl rand -base64 32)" "敏感数据加密密钥"
+    set_env_if_missing "ADMIN_PASSWORD" "$(gen_password 16)" "管理员初始密码"
+
+    chmod 600 "$ENV_FILE"
+}
+
+# ========================== 系统检查 ==========================
+check_root() {
+    if [[ "$EUID" -ne 0 ]]; then
+        error "请以 root 权限运行此部署脚本！"
+        error "用法: sudo bash $0"
+        exit 1
+    fi
+}
+
+check_os() {
+    if [[ ! -f /etc/os-release ]]; then
+        error "无法检测操作系统（/etc/os-release 不存在）"
+        exit 1
+    fi
+
+    source /etc/os-release
+    OS_ID="${ID:-unknown}"
+    OS_VERSION="${VERSION_ID:-unknown}"
+    ARCH=$(dpkg --print-architecture 2>/dev/null || uname -m)
+
+    # 仅支持 Ubuntu 和 Debian
+    if [[ "$OS_ID" != "ubuntu" && "$OS_ID" != "debian" ]]; then
+        error "不支持的操作系统: ${OS_ID}"
+        error "本脚本仅支持 Ubuntu 和 Debian 系统"
+        exit 1
+    fi
+
+    # 架构检查
+    case "$ARCH" in
+        amd64|x86_64) ARCH="amd64" ;;
+        arm64|aarch64) ARCH="arm64" ;;
+        *)
+            error "不支持的系统架构: ${ARCH}"
+            error "仅支持 amd64 (x86_64) 和 arm64 (aarch64)"
+            exit 1
+            ;;
+    esac
+
+    log "系统检测通过: ${OS_ID} ${OS_VERSION} (${ARCH})"
+}
+
+# ========================== 显示横幅 ==========================
+show_banner() {
+    echo -e "${CYAN}" >&2
+    echo "╔══════════════════════════════════════════════════╗" >&2
+    echo "║                                                  ║" >&2
+    echo "║          Incudal 面板一键部署脚本                ║" >&2
+    echo "║          Docker Compose Deploy                   ║" >&2
+    echo "║                                                  ║" >&2
+    echo "╚══════════════════════════════════════════════════╝" >&2
+    echo -e "${NC}" >&2
+    echo -e "  版本: ${BOLD}${SCRIPT_VERSION}${NC}  |  仓库: ${DIM}${GITHUB_REPO}${NC}" >&2
+    echo "" >&2
+}
+
+# ========================== 安装 Docker ==========================
+install_docker() {
+    step "安装 Docker..."
+
+    if command -v docker &>/dev/null; then
+        local docker_version
+        docker_version=$(docker --version 2>/dev/null | awk '{print $3}' | tr -d ',')
+        log "Docker ${docker_version} 已安装，跳过"
+    else
+        info "正在安装 Docker Engine..."
+        export DEBIAN_FRONTEND=noninteractive
+        apt-get update -qq >/dev/null 2>&1
+
+        # 安装前置依赖
+        apt-get install -y -qq ca-certificates curl gnupg >/dev/null 2>&1
+
+        # 添加 Docker 官方 GPG 密钥
+        install -m 0755 -d /etc/apt/keyrings
+        curl -fsSL "https://download.docker.com/linux/${OS_ID}/gpg" -o /etc/apt/keyrings/docker.asc
+        chmod a+r /etc/apt/keyrings/docker.asc
+
+        # 添加 Docker 仓库
+        echo "deb [arch=${ARCH} signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/${OS_ID} ${VERSION_CODENAME:-$(. /etc/os-release && echo "$VERSION_CODENAME")} stable" \
+            > /etc/apt/sources.list.d/docker.list
+
+        apt-get update -qq >/dev/null 2>&1
+        apt-get install -y -qq docker-ce docker-ce-cli containerd.io docker-compose-plugin >/dev/null 2>&1
+
+        # 确保 Docker 启动
+        systemctl enable docker >/dev/null 2>&1
+        systemctl start docker
+
+        log "Docker 安装完成"
+    fi
+
+    # 检查 Docker Compose
+    if docker compose version &>/dev/null; then
+        log "Docker Compose 已可用"
+    else
+        error "Docker Compose 不可用，请手动安装 docker-compose-plugin"
+        exit 1
+    fi
+}
+
+# ========================== 生成面板客户端证书 ==========================
+generate_panel_cert() {
+    local cert_dir="${INSTALL_DIR}/server/certs"
+    local cert_file="${cert_dir}/client.crt"
+    local key_file="${cert_dir}/client.key"
+
+    step "配置面板客户端证书..."
+
+    # 幂等性：证书已存在则跳过
+    if [[ -f "$cert_file" && -f "$key_file" ]]; then
+        log "面板客户端证书已存在，跳过生成"
+        return 0
+    fi
+
+    mkdir -p "$cert_dir"
+
+    # 生成自签名客户端证书（用于面板与 Incus API 的 mTLS 通信）
+    info "生成面板客户端证书（RSA 4096 位，有效期 10 年）..."
+    openssl req -x509 -newkey rsa:4096 \
+        -keyout "$key_file" \
+        -out "$cert_file" \
+        -days 3650 -nodes \
+        -subj "/CN=incudal-panel/O=Incudal" \
+        2>/dev/null
+
+    chmod 644 "$cert_file" "$key_file"
+
+    log "面板客户端证书生成完成"
+}
+
+# ========================== 生成 .env 文件 ==========================
+generate_env() {
+    step "生成环境配置..."
+
+    if [[ -f "$ENV_FILE" ]]; then
+        info ".env 文件已存在，检查并补齐缺失的密钥配置"
+        ensure_env_keys
+        return 0
+    fi
+
+    local pg_password
+    pg_password=$(gen_password 24)
+    local redis_password
+    redis_password=$(gen_password 24)
+    local jwt_secret
+    jwt_secret=$(gen_secret 48)
+    local cookie_secret
+    cookie_secret=$(gen_secret 48)
+    local encryption_key
+    encryption_key=$(openssl rand -base64 32)
+    local admin_password
+    admin_password=$(gen_password 16)
+
+    cat > "$ENV_FILE" << EOF
+# ============================================================================
+# Incudal Docker 部署环境配置
+# 由安装脚本自动生成于 $(date '+%Y-%m-%d %H:%M:%S')
+# ============================================================================
+
+# ============ 数据库配置 ============
+POSTGRES_USER=incudal
+POSTGRES_PASSWORD=${pg_password}
+POSTGRES_DB=incudal
+
+# ============ Redis 配置 ============
+REDIS_PASSWORD=${redis_password}
+
+# ============ 安全配置（请勿泄露！）============
+JWT_SECRET=${jwt_secret}
+COOKIE_SECRET=${cookie_secret}
+ENCRYPTION_KEY=${encryption_key}
+
+# ============ 应用配置 ============
+APP_PORT=${DEFAULT_PORT}
+ADMIN_PASSWORD=${admin_password}
+LOG_LEVEL=info
+DISABLE_REQUEST_LOG=true
+
+# ============ 面板访问地址 ============
+# 节点安装脚本、支付回调等功能依赖此地址
+FRONTEND_URL=${DETECTED_FRONTEND_URL:-}
+EOF
+
+    chmod 600 "$ENV_FILE"
+    log "环境配置文件生成完成: ${ENV_FILE}"
+    info "管理员密码: ${admin_password}"
+    info "PostgreSQL 密码: ${pg_password}"
+}
+
+# ========================== 生成 docker-compose.yml ==========================
+generate_compose() {
+    step "生成 Docker Compose 配置..."
+
+    if [[ -f "$COMPOSE_FILE" ]]; then
+        info "docker-compose.yml 已存在，跳过生成"
+        return 0
+    fi
+
+    cat > "$COMPOSE_FILE" << 'COMPOSEFILE'
+services:
+  app:
+    image: ghcr.io/0xdabiaoge/incudal:latest
+    ports:
+      - "${APP_PORT:-3000}:3000"
+    environment:
+      - NODE_ENV=production
+      - HOST=0.0.0.0
+      - PORT=3000
+      - DATABASE_URL=postgresql://${POSTGRES_USER:-incudal}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-incudal}
+      - REDIS_URL=redis://:${REDIS_PASSWORD:-}@redis:6379
+      - JWT_SECRET=${JWT_SECRET}
+      - COOKIE_SECRET=${COOKIE_SECRET:-}
+      - ENCRYPTION_KEY=${ENCRYPTION_KEY}
+      - FRONTEND_URL=${FRONTEND_URL:-}
+      - SITE_URL=${SITE_URL:-}
+      - LOG_LEVEL=${LOG_LEVEL:-info}
+      - DISABLE_REQUEST_LOG=${DISABLE_REQUEST_LOG:-true}
+      - ADMIN_PASSWORD=${ADMIN_PASSWORD:-}
+    volumes:
+      - ./server/certs:/app/server/certs:ro
+    depends_on:
+      db:
+        condition: service_healthy
+      redis:
+        condition: service_started
+    restart: unless-stopped
+
+  db:
+    image: postgres:16-alpine
+    environment:
+      - POSTGRES_USER=${POSTGRES_USER:-incudal}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+      - POSTGRES_DB=${POSTGRES_DB:-incudal}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-incudal}"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    command: redis-server --requirepass ${REDIS_PASSWORD:-}
+    volumes:
+      - redis_data:/data
+    restart: unless-stopped
+
+volumes:
+  postgres_data:
+  redis_data:
+
+networks:
+  default:
+    driver: bridge
+    enable_ipv6: true
+    ipam:
+      config:
+        - subnet: "172.31.0.0/16"
+        - subnet: "fd42:dead:beef:10::/64"
+COMPOSEFILE
+
+    log "Docker Compose 配置生成完成: ${COMPOSE_FILE}"
+}
+
+# ========================== 拉取镜像并启动 ==========================
+start_docker() {
+    step "拉取镜像并启动服务..."
+
+    cd "$INSTALL_DIR"
+
+    info "拉取最新镜像..."
+    docker compose pull 2>&1 | tail -5
+
+    info "启动容器..."
+    docker compose up -d 2>&1
+
+    # 等待服务就绪
+    info "等待服务启动..."
+    local retries=0
+    local max_retries=30
+    while [[ $retries -lt $max_retries ]]; do
+        if curl -sf "http://127.0.0.1:${DEFAULT_PORT}/api/health" &>/dev/null 2>&1; then
+            log "服务启动成功！"
+            return 0
+        fi
+        retries=$((retries + 1))
+        sleep 2
+    done
+
+    warn "服务尚未就绪，请查看日志确认状态:"
+    warn "  docker compose -f ${COMPOSE_FILE} logs -f app"
+}
+
+# ========================== Nginx + Certbot ==========================
+setup_nginx_certbot() {
+    info "准备配置 Nginx 反代及 Let's Encrypt SSL 自动证书"
+    echo -ne "  ${BOLD}请输入你要绑定的域名 (例如 panel.yourdomain.com): ${NC}"
+    read -r DOMAIN
+
+    if [[ -z "$DOMAIN" ]]; then
+        error "域名不能为空！"
+        return 1
+    fi
+
+    echo -ne "  ${BOLD}请输入你的邮箱 (用于证书过期通知，可留空): ${NC}"
+    read -r EMAIL
+
+    info "安装 Nginx 与 Certbot..."
+    apt-get install -y -qq nginx certbot python3-certbot-nginx >/dev/null 2>&1
+
+    # 更新 FRONTEND_URL
+    sed -i "s|^FRONTEND_URL=.*|FRONTEND_URL=https://${DOMAIN}|" "$ENV_FILE"
+
+    log "配置 Nginx 站点..."
+    cat > /etc/nginx/sites-available/incudal.conf <<NGINX
+server {
+    listen 80;
+    listen [::]:80;
+    server_name ${DOMAIN};
+
+    # 安全头
+    add_header X-Content-Type-Options nosniff;
+    add_header X-Frame-Options DENY;
+
+    location / {
+        proxy_pass http://127.0.0.1:${DEFAULT_PORT};
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade \$http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+        proxy_cache_bypass \$http_upgrade;
+
+        # WebSocket 超时
+        proxy_read_timeout 300s;
+        proxy_send_timeout 300s;
+    }
+}
+NGINX
+
+    # 启用站点
+    ln -sf /etc/nginx/sites-available/incudal.conf /etc/nginx/sites-enabled/
+    rm -f /etc/nginx/sites-enabled/default 2>/dev/null || true
+
+    # 测试并重载 Nginx
+    nginx -t >/dev/null 2>&1
+    systemctl restart nginx
+
+    # 申请 SSL 证书
+    info "申请 Let's Encrypt SSL 证书..."
+    if [[ -n "$EMAIL" ]]; then
+        certbot --nginx -d "$DOMAIN" --non-interactive --agree-tos -m "$EMAIL" --redirect
+    else
+        certbot --nginx -d "$DOMAIN" --non-interactive --agree-tos --register-unsafely-without-email --redirect
+    fi
+
+    log "Nginx + HTTPS 配置完成"
+    info "面板地址: https://${DOMAIN}"
+
+    # 重启容器使新 FRONTEND_URL 生效
+    cd "$INSTALL_DIR"
+    docker compose up -d --force-recreate app 2>/dev/null || true
+}
+
+# ========================== Cloudflare Tunnel ==========================
+setup_cf_tunnel() {
+    info "请前往 Cloudflare Zero Trust 控制台创建 Tunnel"
+    info "配置 Tunnel 时，将 Public Hostname 指向 http://127.0.0.1:${DEFAULT_PORT}"
+    echo ""
+    echo -ne "  ${BOLD}请输入你绑定的域名 (用于更新 FRONTEND_URL): ${NC}"
+    read -r CF_DOMAIN
+
+    if [[ -n "$CF_DOMAIN" ]]; then
+        sed -i "s|^FRONTEND_URL=.*|FRONTEND_URL=https://${CF_DOMAIN}|" "$ENV_FILE"
+        log "已更新 FRONTEND_URL 为 https://${CF_DOMAIN}"
+
+        # 重启容器以应用新环境变量
+        cd "$INSTALL_DIR"
+        docker compose up -d 2>/dev/null
+    fi
+}
+
+# ========================== 显示结果 ==========================
+show_result() {
+    # 从 .env 中提取信息
+    local admin_pass
+    admin_pass=$(grep '^ADMIN_PASSWORD=' "$ENV_FILE" | cut -d'=' -f2-)
+    local frontend_url
+    frontend_url=$(grep '^FRONTEND_URL=' "$ENV_FILE" | cut -d'=' -f2-)
+    local app_port
+    app_port=$(grep '^APP_PORT=' "$ENV_FILE" | cut -d'=' -f2- || echo "$DEFAULT_PORT")
+
+    echo "" >&2
+    echo -e "${GREEN}" >&2
+    echo "╔══════════════════════════════════════════════════╗" >&2
+    echo "║                                                  ║" >&2
+    echo "║          ✅  Incudal 部署完成！                  ║" >&2
+    echo "║                                                  ║" >&2
+    echo "╚══════════════════════════════════════════════════╝" >&2
+    echo -e "${NC}" >&2
+    divider
+    echo -e "  ${BOLD}部署模式${NC}     Docker Compose" >&2
+    echo -e "  ${BOLD}访问地址${NC}     ${frontend_url:-http://服务器IP:${app_port}}" >&2
+    echo -e "  ${BOLD}管理员账号${NC}   admin" >&2
+    echo -e "  ${BOLD}管理员密码${NC}   ${admin_pass}" >&2
+    divider
+    echo "" >&2
+    echo -e "  ${YELLOW}常用运维命令:${NC}" >&2
+    echo -e "  ${DIM}查看日志${NC}     docker compose -f ${COMPOSE_FILE} logs -f app" >&2
+    echo -e "  ${DIM}重启服务${NC}     docker compose -f ${COMPOSE_FILE} restart" >&2
+    echo -e "  ${DIM}停止服务${NC}     docker compose -f ${COMPOSE_FILE} down" >&2
+    echo -e "  ${DIM}更新镜像${NC}     sudo bash $0 --upgrade" >&2
+    divider
+    echo "" >&2
+
+    if [[ -z "$frontend_url" ]]; then
+        warn "FRONTEND_URL 尚未配置，面板部分功能（如节点注册）将不可用"
+        warn "请编辑 ${ENV_FILE} 设置 FRONTEND_URL 字段"
+    fi
+}
+
+# ========================== 升级 ==========================
+do_upgrade() {
+    show_banner
+    check_os
+
+    if [[ ! -f "$COMPOSE_FILE" ]]; then
+        error "未检测到 Docker 部署，无法升级"
+        error "请先运行安装: sudo bash $0"
+        exit 1
+    fi
+
+    step "升级 Incudal..."
+
+    cd "$INSTALL_DIR"
+
+    info "拉取最新镜像..."
+    docker compose pull 2>&1 | tail -5
+
+    info "重建容器（使用新镜像）..."
+    docker compose up -d --force-recreate app 2>&1
+
+    # 等待服务就绪
+    info "等待服务启动..."
+    local retries=0
+    while [[ $retries -lt 20 ]]; do
+        if curl -sf "http://127.0.0.1:${DEFAULT_PORT}/api/health" &>/dev/null 2>&1; then
+            break
+        fi
+        retries=$((retries + 1))
+        sleep 2
+    done
+
+    log "升级完成！"
+    info "当前镜像: $(docker compose images app --format '{{.Repository}}:{{.Tag}}' 2>/dev/null || echo 'unknown')"
+}
+
+# ========================== 卸载 ==========================
+do_uninstall() {
+    show_banner
+    echo -e "  ${RED}${BOLD}⚠  警告：卸载将删除所有 Incudal 数据！${NC}" >&2
+    echo "" >&2
+    echo -ne "  ${BOLD}确认卸载？输入 'yes' 继续: ${NC}"
+    read -r confirm
+
+    if [[ "$confirm" != "yes" ]]; then
+        info "已取消卸载"
+        exit 0
+    fi
+
+    step "卸载 Incudal..."
+
+    if [[ -f "$COMPOSE_FILE" ]]; then
+        cd "$INSTALL_DIR"
+        info "停止并移除容器..."
+        docker compose down -v 2>/dev/null || true
+    fi
+
+    # 移除 Nginx 配置
+    if [[ -f /etc/nginx/sites-enabled/incudal.conf ]]; then
+        info "移除 Nginx 配置..."
+        rm -f /etc/nginx/sites-enabled/incudal.conf
+        rm -f /etc/nginx/sites-available/incudal.conf
+        systemctl reload nginx 2>/dev/null || true
+    fi
+
+    # 删除安装目录
+    if [[ -d "$INSTALL_DIR" ]]; then
+        info "删除安装目录 ${INSTALL_DIR}..."
+        rm -rf "$INSTALL_DIR"
+    fi
+
+    log "卸载完成"
+    info "Docker Engine 未被移除，如需卸载请手动执行: apt-get remove docker-ce"
+}
+
+# ========================== 安装 ==========================
+do_install() {
+    show_banner
+    check_os
+
+    # 检查是否已安装
+    if [[ -f "$COMPOSE_FILE" ]]; then
+        warn "检测到已有安装 (${INSTALL_DIR})"
+        echo -ne "  ${BOLD}覆盖安装？[y/N]: ${NC}"
+        read -r overwrite
+        if [[ "${overwrite,,}" != "y" ]]; then
+            info "已取消安装。如需升级请使用: sudo bash $0 --upgrade"
+            exit 0
+        fi
+    fi
+
+    # 更新系统包
+    step "更新系统包索引..."
+    export DEBIAN_FRONTEND=noninteractive
+    apt-get update -qq >/dev/null 2>&1
+    # 安装基础工具
+    apt-get install -y -qq curl openssl >/dev/null 2>&1
+
+    # 安装 Docker
+    install_docker
+
+    # 创建安装目录
+    mkdir -p "${INSTALL_DIR}/server/certs"
+
+    # 生成面板客户端证书
+    generate_panel_cert
+
+    # 生成 .env
+    generate_env
+
+    # 生成 docker-compose.yml
+    generate_compose
+
+    # 登录 GHCR（私有仓库需要）
+    step "配置镜像仓库访问..."
+    if docker pull "${DOCKER_IMAGE}:latest" &>/dev/null 2>&1; then
+        log "镜像仓库可访问"
+    else
+        warn "无法拉取镜像（仓库可能是私有的）"
+        info "如果仓库是私有的，请先登录:"
+        info "  echo 'YOUR_GITHUB_TOKEN' | docker login ghcr.io -u USERNAME --password-stdin"
+        echo ""
+        echo -ne "  ${BOLD}是否已登录或仓库为公开？继续安装？[y/N]: ${NC}"
+        read -r cont
+        if [[ "${cont,,}" != "y" ]]; then
+            info "请登录后重新运行安装脚本"
+            exit 0
+        fi
+    fi
+
+    # ---- 先选择网络方案，确保 FRONTEND_URL 在容器启动前就已写入 .env ----
+    echo ""
+    divider
+    echo -e "  ${BOLD}请选择外部访问方案：${NC}" >&2
+    divider
+    echo -e "  ${CYAN}[1]${NC} Nginx + Certbot   ${YELLOW}（推荐：自动 HTTPS，需要公网 IP 和域名）${NC}" >&2
+    echo -e "  ${CYAN}[2]${NC} Cloudflare Tunnel  ${YELLOW}（适合无公网 IP 或隐藏源站 IP）${NC}" >&2
+    echo -e "  ${CYAN}[3]${NC} 仅启动服务        ${DIM}（手动配置反代，稍后输入面板地址）${NC}" >&2
+    echo ""
+    echo -ne "  ${BOLD}请选择 [1-3]: ${NC}"
+    read -r net_opt
+
+    # 方案 3 或无效选项：需要在启动前确定面板访问地址
+    case "${net_opt:-3}" in
+        1|2)
+            ;; # Nginx/CF 方案会在后续步骤中自动写入 FRONTEND_URL
+        *)
+            # 自动探测面板公网地址，用于写入 FRONTEND_URL
+            local detected_ip=""
+            detected_ip=$(curl -4sf --connect-timeout 5 https://api.ipify.org 2>/dev/null || \
+                          curl -4sf --connect-timeout 5 https://ifconfig.me 2>/dev/null || \
+                          curl -6sf --connect-timeout 5 https://api6.ipify.org 2>/dev/null || echo "")
+
+            echo ""
+            if [[ -n "$detected_ip" ]]; then
+                # 检测到公网 IP，构建默认地址
+                local default_url="http://${detected_ip}:${DEFAULT_PORT}"
+                info "检测到公网 IP: ${detected_ip}"
+                echo -ne "  ${BOLD}请输入面板访问地址 [默认 ${default_url}]: ${NC}"
+                read -r manual_url
+                manual_url=${manual_url:-${default_url}}
+            else
+                echo -ne "  ${BOLD}请输入面板访问地址 (例如 https://panel.example.com 或 http://IP:${DEFAULT_PORT}): ${NC}"
+                read -r manual_url
+            fi
+
+            if [[ -n "$manual_url" ]]; then
+                # 去掉末尾斜杠
+                manual_url="${manual_url%/}"
+                sed -i "s|^FRONTEND_URL=.*|FRONTEND_URL=${manual_url}|" "$ENV_FILE"
+                log "面板访问地址已设置: ${manual_url}"
+            else
+                warn "未设置面板访问地址，节点注册功能将不可用"
+                warn "请后续编辑 ${ENV_FILE} 手动设置 FRONTEND_URL"
+            fi
+            ;;
+    esac
+
+    # 启动服务（此时 .env 中 FRONTEND_URL 已有值）
+    start_docker
+
+    # 方案 1/2 在服务启动后配置外部访问并更新 FRONTEND_URL
+    case "${net_opt:-3}" in
+        1) setup_nginx_certbot ;;
+        2) setup_cf_tunnel ;;
+    esac
+
+    # 显示结果
+    show_result
+}
+
+# ========================== 主入口 ==========================
+main() {
+    check_root
+
+    case "${1:-}" in
+        --upgrade|-u)
+            do_upgrade
+            ;;
+        --uninstall|--remove)
+            do_uninstall
+            ;;
+        --help|-h)
+            echo "Incudal 面板部署脚本（Docker 模式）v${SCRIPT_VERSION}"
+            echo ""
+            echo "用法: sudo bash $0 [选项]"
+            echo ""
+            echo "选项:"
+            echo "  (无参数)      全新安装"
+            echo "  --upgrade     拉取最新镜像并重建"
+            echo "  --uninstall   卸载 Incudal（包含数据）"
+            echo "  --help        显示帮助"
+            ;;
+        *)
+            do_install
+            ;;
+    esac
+}
+
+main "$@"
diff --git a/scripts/install-panel.sh b/scripts/install-panel.sh
new file mode 100644
index 0000000..ff6cbb2
--- /dev/null
+++ b/scripts/install-panel.sh
@@ -0,0 +1,1155 @@
+#!/usr/bin/env bash
+# ============================================================================
+# Incudal 面板一键部署脚本（产物包模式）
+#
+# 功能：
+#   - 安装 Node.js 22、PostgreSQL 16、Redis 7
+#   - 从 GitHub Releases 下载预构建产物包
+#   - 自动配置数据库、环境变量、systemd 服务
+#   - 支持 Nginx+Certbot / Cloudflare Tunnel / 纯端口 三种外部访问方案
+#   - 支持升级已有安装
+#
+# 用法：
+#   安装：  sudo bash install-panel.sh
+#   升级：  sudo bash install-panel.sh --upgrade
+#   卸载：  sudo bash install-panel.sh --uninstall
+#
+# 项目地址: https://github.com/0xdabiaoge/incudal
+# ============================================================================
+set -euo pipefail
+
+# ========================== 全局常量 ==========================
+readonly SCRIPT_VERSION="3.0.0"
+readonly GITHUB_REPO="0xdabiaoge/incudal"
+readonly INSTALL_DIR="/opt/incudal"
+readonly SERVICE_NAME="incudal"
+readonly SERVICE_FILE="/etc/systemd/system/${SERVICE_NAME}.service"
+readonly ENV_FILE="${INSTALL_DIR}/.env"
+readonly RUN_USER="incudal"
+readonly DEFAULT_PORT=3000
+readonly NODE_MAJOR=22
+readonly PG_VERSION=16
+
+# ========================== 颜色定义 ==========================
+readonly RED='\033[1;31m'
+readonly GREEN='\033[1;32m'
+readonly YELLOW='\033[1;33m'
+readonly CYAN='\033[1;36m'
+readonly BOLD='\033[1m'
+readonly DIM='\033[2m'
+readonly NC='\033[0m'
+
+# ========================== 工具函数 ==========================
+# 所有日志输出到 stderr，避免在 $() 子 shell 中被捕获
+log()   { echo -e "${GREEN}[✓]${NC} $1" >&2; }
+info()  { echo -e "${CYAN}[i]${NC} $1" >&2; }
+warn()  { echo -e "${YELLOW}[!]${NC} $1" >&2; }
+error() { echo -e "${RED}[✗]${NC} $1" >&2; }
+step()  { echo -e "\n${CYAN}[▶]${NC} ${BOLD}$1${NC}" >&2; }
+
+divider() {
+    echo -e "${DIM}────────────────────────────────────────────────────${NC}" >&2
+}
+
+# 生成随机密码
+gen_password() {
+    openssl rand -hex 64 | cut -c "1-${1:-24}"
+}
+
+gen_secret() {
+    printf 'A1!%s' "$(openssl rand -hex 64)" | cut -c "1-${1:-48}"
+}
+
+get_env_value() {
+    local key="$1"
+    if [[ ! -f "$ENV_FILE" ]]; then
+        return 0
+    fi
+    grep -E "^${key}=" "$ENV_FILE" 2>/dev/null | tail -n 1 | cut -d'=' -f2- || true
+}
+
+set_env_if_missing() {
+    local key="$1"
+    local value="$2"
+    local label="$3"
+    local current
+    current="$(get_env_value "$key")"
+
+    if [[ -n "$current" ]]; then
+        return 0
+    fi
+
+    if grep -qE "^${key}=" "$ENV_FILE" 2>/dev/null; then
+        local tmp_file
+        tmp_file="$(mktemp)"
+        awk -v key="$key" -v value="$value" '
+            BEGIN { replaced = 0 }
+            $0 ~ "^" key "=" && replaced == 0 {
+                print key "=" value
+                replaced = 1
+                next
+            }
+            { print }
+        ' "$ENV_FILE" > "$tmp_file"
+        cat "$tmp_file" > "$ENV_FILE"
+        rm -f "$tmp_file"
+    else
+        printf '\n%s=%s\n' "$key" "$value" >> "$ENV_FILE"
+    fi
+
+    log "已自动补充 ${label}: ${key}"
+}
+
+ensure_env_keys() {
+    if [[ ! -f "$ENV_FILE" ]]; then
+        return 0
+    fi
+
+    set_env_if_missing "JWT_SECRET" "$(gen_secret 48)" "JWT 密钥"
+    set_env_if_missing "COOKIE_SECRET" "$(gen_secret 48)" "Cookie 密钥"
+    set_env_if_missing "ENCRYPTION_KEY" "$(openssl rand -base64 32)" "敏感数据加密密钥"
+    set_env_if_missing "ADMIN_PASSWORD" "$(gen_password 16)" "管理员初始密码"
+
+    chmod 600 "$ENV_FILE"
+    chown "${RUN_USER}:${RUN_USER}" "$ENV_FILE" 2>/dev/null || true
+}
+
+# ========================== 系统检查 ==========================
+check_root() {
+    if [[ "$EUID" -ne 0 ]]; then
+        error "请以 root 权限运行此部署脚本！"
+        error "用法: sudo bash $0"
+        exit 1
+    fi
+}
+
+check_os() {
+    if [[ ! -f /etc/os-release ]]; then
+        error "无法检测操作系统（/etc/os-release 不存在）"
+        exit 1
+    fi
+
+    source /etc/os-release
+    OS_ID="${ID:-unknown}"
+    OS_VERSION="${VERSION_ID:-unknown}"
+    OS_CODENAME="${VERSION_CODENAME:-unknown}"
+    ARCH=$(dpkg --print-architecture 2>/dev/null || uname -m)
+
+    # 仅支持 Ubuntu 和 Debian
+    if [[ "$OS_ID" != "ubuntu" && "$OS_ID" != "debian" ]]; then
+        error "不支持的操作系统: ${OS_ID}"
+        error "本脚本仅支持 Ubuntu 和 Debian 系统"
+        exit 1
+    fi
+
+    # 版本检查
+    case "$OS_ID" in
+        ubuntu)
+            local major="${OS_VERSION%%.*}"
+            if [[ "$major" -lt 22 ]] 2>/dev/null; then
+                error "Ubuntu 版本过低 (${OS_VERSION})，最低要求 Ubuntu 22.04"
+                exit 1
+            fi
+            ;;
+        debian)
+            local major="${OS_VERSION%%.*}"
+            if [[ "$major" -lt 12 ]] 2>/dev/null; then
+                error "Debian 版本过低 (${OS_VERSION})，最低要求 Debian 12 (Bookworm)"
+                exit 1
+            fi
+            ;;
+    esac
+
+    # 架构检查
+    case "$ARCH" in
+        amd64|x86_64) ARCH="amd64" ;;
+        arm64|aarch64) ARCH="arm64" ;;
+        *)
+            error "不支持的系统架构: ${ARCH}"
+            error "仅支持 amd64 (x86_64) 和 arm64 (aarch64)"
+            exit 1
+            ;;
+    esac
+
+    log "系统检测通过: ${OS_ID} ${OS_VERSION} (${ARCH})"
+}
+
+# ========================== 显示横幅 ==========================
+show_banner() {
+    clear 2>/dev/null || true
+    echo ""
+    echo -e "${CYAN}  ╔══════════════════════════════════════════════════╗${NC}"
+    echo -e "${CYAN}  ║                                                  ║${NC}"
+    echo -e "${CYAN}  ║          ${BOLD}Incudal 面板一键部署脚本${NC}${CYAN}                ║${NC}"
+    echo -e "${CYAN}  ║          ${DIM}Pre-built Package Deploy${NC}${CYAN}                ║${NC}"
+    echo -e "${CYAN}  ║                                                  ║${NC}"
+    echo -e "${CYAN}  ╚══════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "  ${DIM}版本: ${SCRIPT_VERSION}  |  仓库: ${GITHUB_REPO}${NC}"
+    echo ""
+}
+
+# ========================== 检查已有安装 ==========================
+check_existing() {
+    if [[ -d "$INSTALL_DIR" && -f "${INSTALL_DIR}/server/dist/app.js" ]]; then
+        return 0  # 已安装
+    fi
+    return 1  # 未安装
+}
+
+# ========================== 安装 Node.js ==========================
+install_nodejs() {
+    step "安装 Node.js ${NODE_MAJOR}..."
+
+    if command -v node &>/dev/null; then
+        local current_ver
+        current_ver=$(node -v 2>/dev/null | sed 's/v//' | cut -d. -f1)
+        if [[ "$current_ver" -ge "$NODE_MAJOR" ]] 2>/dev/null; then
+            log "Node.js $(node -v) 已安装，跳过"
+            return 0
+        fi
+        warn "当前 Node.js 版本较低 ($(node -v))，将升级到 v${NODE_MAJOR}"
+    fi
+
+    # 通过 NodeSource 安装
+    info "添加 NodeSource APT 源..."
+    curl -fsSL "https://deb.nodesource.com/setup_${NODE_MAJOR}.x" | bash - >/dev/null 2>&1
+    apt-get install -y -qq nodejs >/dev/null 2>&1
+
+    log "Node.js $(node -v) 安装完成"
+}
+
+# ========================== 安装 PostgreSQL ==========================
+install_postgresql() {
+    step "安装 PostgreSQL ${PG_VERSION}..."
+
+    if command -v psql &>/dev/null; then
+        local pg_ver
+        pg_ver=$(psql --version 2>/dev/null | awk '{print $3}' | cut -d. -f1)
+        if [[ "$pg_ver" -ge "$PG_VERSION" ]] 2>/dev/null; then
+            log "PostgreSQL ${pg_ver} 已安装，跳过"
+            return 0
+        fi
+    fi
+
+    # 添加 PostgreSQL 官方 APT 源
+    info "添加 PostgreSQL 官方 APT 源..."
+    apt-get install -y -qq gnupg lsb-release >/dev/null 2>&1
+
+    curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc \
+        | gpg --yes --dearmor -o /etc/apt/keyrings/postgresql.gpg
+
+    echo "deb [signed-by=/etc/apt/keyrings/postgresql.gpg] https://apt.postgresql.org/pub/repos/apt ${OS_CODENAME}-pgdg main" \
+        > /etc/apt/sources.list.d/pgdg.list
+
+    apt-get update -qq >/dev/null 2>&1
+    apt-get install -y -qq "postgresql-${PG_VERSION}" >/dev/null 2>&1
+
+    # 确保服务启动
+    systemctl enable postgresql >/dev/null 2>&1
+    systemctl start postgresql
+
+    log "PostgreSQL ${PG_VERSION} 安装完成"
+}
+
+# ========================== 安装 Redis ==========================
+install_redis() {
+    step "安装 Redis..."
+
+    if command -v redis-server &>/dev/null; then
+        log "Redis $(redis-server --version | awk '{print $3}' | sed 's/v=//') 已安装，跳过"
+        return 0
+    fi
+
+    apt-get install -y -qq redis-server >/dev/null 2>&1
+
+    # 确保服务启动
+    systemctl enable redis-server >/dev/null 2>&1
+    systemctl start redis-server
+
+    log "Redis 安装完成"
+}
+
+# ========================== 手动包目录 ==========================
+readonly MANUAL_PKG_DIR="/tmp/incudal"
+
+# ========================== 获取最新版本号（快速尝试） ==========================
+get_latest_version() {
+    local api_url="https://api.github.com/repos/${GITHUB_REPO}/releases/latest"
+    local response=""
+    local version=""
+
+    # 5 秒超时速查，不阻塞
+    response=$(curl -sL --connect-timeout 5 --max-time 8 "$api_url" 2>/dev/null) || true
+
+    if [[ -n "$response" ]]; then
+        version=$(echo "$response" | grep '"tag_name"' | sed -E 's/.*"tag_name": *"([^"]+)".*/\1/' || true)
+    fi
+
+    echo "$version"
+}
+
+# ========================== 自动下载产物包 ==========================
+download_release() {
+    local version="$1"
+    local filename="incudal-${version}-linux-${ARCH}.tar.gz"
+    local download_url="https://github.com/${GITHUB_REPO}/releases/download/${version}/${filename}"
+    local tmp_file="/tmp/${filename}"
+
+    info "下载地址: ${download_url}"
+
+    if curl -fSL --progress-bar --connect-timeout 15 --max-time 600 \
+        "$download_url" -o "$tmp_file" 2>/dev/null; then
+        local file_size
+        file_size=$(du -h "$tmp_file" | cut -f1 || true)
+        log "下载完成 (${file_size})"
+        echo "$tmp_file"
+        return 0
+    fi
+
+    rm -f "$tmp_file" 2>/dev/null || true
+    return 1
+}
+
+# ========================== 扫描手动放置的产物包 ==========================
+scan_manual_package() {
+    local found=""
+
+    if [[ ! -d "$MANUAL_PKG_DIR" ]]; then
+        return 1
+    fi
+
+    # 优先匹配当前架构的包
+    found=$(find "$MANUAL_PKG_DIR" -maxdepth 1 -name "incudal-*-linux-${ARCH}.tar.gz" -type f 2>/dev/null | head -n1 || true)
+
+    # 退而匹配任意 incudal tar.gz
+    if [[ -z "$found" ]]; then
+        found=$(find "$MANUAL_PKG_DIR" -maxdepth 1 -name "incudal-*.tar.gz" -type f 2>/dev/null | head -n1 || true)
+    fi
+
+    if [[ -n "$found" ]]; then
+        echo "$found"
+        return 0
+    fi
+
+    return 1
+}
+
+# ========================== 等待用户放置产物包 ==========================
+wait_for_manual_package() {
+    echo "" >&2
+    divider
+    echo -e "  ${YELLOW}${BOLD}⚠ 自动获取产物包失败${NC}" >&2
+    echo -e "  ${DIM}（仓库可能是私有的，或网络无法连接 GitHub）${NC}" >&2
+    divider
+    echo "" >&2
+    echo -e "  ${BOLD}请手动下载产物包并放到以下目录：${NC}" >&2
+    echo "" >&2
+    echo -e "  ${CYAN}${BOLD}${MANUAL_PKG_DIR}/${NC}" >&2
+    echo "" >&2
+    echo -e "  ${BOLD}下载地址：${NC}" >&2
+    echo -e "  ${CYAN}https://github.com/${GITHUB_REPO}/releases${NC}" >&2
+    echo "" >&2
+    echo -e "  ${BOLD}所需文件名格式：${NC}" >&2
+    echo -e "  ${GREEN}incudal-vX.Y.Z-linux-${ARCH}.tar.gz${NC}" >&2
+    echo "" >&2
+    echo -e "  ${DIM}提示: 可使用 scp、wget、rz 等方式将文件传到服务器${NC}" >&2
+    echo -e "  ${DIM}例如: scp incudal-v1.0.0-linux-${ARCH}.tar.gz root@服务器IP:${MANUAL_PKG_DIR}/${NC}" >&2
+    divider
+    echo "" >&2
+
+    # 创建目录
+    mkdir -p "$MANUAL_PKG_DIR"
+
+    # 轮询等待文件出现
+    local wait_count=0
+    local max_wait=600  # 最多等 10 分钟（含上传时间）
+    local spin_chars='⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'
+    local MIN_SIZE_KB=10240  # 产物包至少 10MB
+
+    while true; do
+        # 尝试扫描
+        local pkg_file=""
+        pkg_file=$(scan_manual_package) || true
+
+        if [[ -n "$pkg_file" ]]; then
+            # 检测到文件，等待上传完成（文件大小稳定）
+            echo "" >&2
+            info "检测到文件: $(basename "$pkg_file")"
+            info "等待上传完成..."
+
+            local stable_count=0
+            local last_size=0
+
+            while true; do
+                local current_size
+                current_size=$(stat -c%s "$pkg_file" 2>/dev/null || echo "0")
+                local current_size_human
+                current_size_human=$(du -h "$pkg_file" 2>/dev/null | cut -f1 || echo "?")
+
+                if [[ "$current_size" -eq "$last_size" && "$current_size" -gt 0 ]]; then
+                    stable_count=$((stable_count + 1))
+                else
+                    stable_count=0
+                    last_size="$current_size"
+                fi
+
+                # 连续 3 次（9 秒）大小不变，认为上传完成
+                if [[ $stable_count -ge 3 ]]; then
+                    # 检查最小文件大小
+                    local size_kb=$((current_size / 1024))
+                    if [[ $size_kb -lt $MIN_SIZE_KB ]]; then
+                        warn "文件过小 (${current_size_human})，产物包通常 >100MB，可能不完整"
+                        warn "如确认无误，请将文件删除后重新放置"
+                        # 继续等待
+                        stable_count=0
+                        last_size=0
+                        sleep 3
+                        continue
+                    fi
+
+                    log "上传完成！文件大小: ${current_size_human}"
+                    echo "$pkg_file"
+                    return 0
+                fi
+
+                printf "\r  ${CYAN}⏳${NC} 上传中... 当前大小: ${current_size_human}  " >&2
+                sleep 3
+                wait_count=$((wait_count + 3))
+
+                if [[ $wait_count -ge $max_wait ]]; then
+                    echo "" >&2
+                    error "等待超时 (${max_wait}s)，请重新运行脚本"
+                    return 1
+                fi
+            done
+        fi
+
+        # 显示等待动画（输出到 stderr）
+        local spin_idx=$((wait_count % ${#spin_chars}))
+        local spin_char="${spin_chars:$spin_idx:1}"
+        printf "\r  ${CYAN}${spin_char}${NC} 等待产物包... (已等待 %ds，输入 Ctrl+C 取消)  " "$wait_count" >&2
+
+        sleep 2
+        wait_count=$((wait_count + 2))
+
+        if [[ $wait_count -ge $max_wait ]]; then
+            echo "" >&2
+            error "等待超时 (${max_wait}s)，请重新运行脚本"
+            return 1
+        fi
+    done
+}
+
+# ========================== 统一入口：获取产物包 ==========================
+obtain_release() {
+    step "获取 Incudal 产物包..."
+
+    # ---- 阶段 0：检查是否已有手动放置的包 ----
+    local existing_pkg=""
+    existing_pkg=$(scan_manual_package) || true
+    if [[ -n "$existing_pkg" ]]; then
+        log "检测到手动放置的产物包: $(basename "$existing_pkg")"
+        echo "$existing_pkg"
+        return 0
+    fi
+
+    # ---- 阶段 1：尝试 API 自动获取版本号 ----
+    info "正在查询最新版本（5 秒超时）..."
+    local version=""
+    version=$(get_latest_version)
+
+    if [[ -n "$version" ]]; then
+        info "最新版本: ${version}"
+
+        # ---- 阶段 2：尝试自动下载 ----
+        local tar_file=""
+        tar_file=$(download_release "$version") || true
+
+        if [[ -n "$tar_file" && -f "$tar_file" ]]; then
+            echo "$tar_file"
+            return 0
+        fi
+
+        warn "自动下载失败（文件可能不存在或网络受限）"
+    else
+        warn "自动获取版本号失败（仓库可能是私有的）"
+    fi
+
+    # ---- 阶段 3：引导用户手动放置包 ----
+    local manual_file=""
+    manual_file=$(wait_for_manual_package) || return 1
+    echo "$manual_file"
+    return 0
+}
+
+# ========================== 解压安装 ==========================
+install_release() {
+    local tar_file="$1"
+    local is_upgrade="${2:-false}"
+
+    step "安装产物包..."
+
+    # 创建安装目录
+    mkdir -p "$INSTALL_DIR"
+
+    if [[ "$is_upgrade" == "true" ]]; then
+        # 升级模式：先备份当前版本
+        info "备份当前版本..."
+        local backup_dir="${INSTALL_DIR}.bak.$(date +%Y%m%d%H%M%S)"
+        cp -r "$INSTALL_DIR" "$backup_dir"
+        info "备份已保存到: ${backup_dir}"
+
+        # 保留 .env 文件和证书目录
+        local env_backup=""
+        local certs_backup=""
+        if [[ -f "${INSTALL_DIR}/.env" ]]; then
+            env_backup=$(mktemp)
+            cp "${INSTALL_DIR}/.env" "$env_backup"
+        fi
+        if [[ -d "${INSTALL_DIR}/server/certs" ]]; then
+            certs_backup=$(mktemp -d)
+            cp -r "${INSTALL_DIR}/server/certs" "$certs_backup/"
+        fi
+
+        # 清理旧文件（保留 .env 和 certs）
+        rm -rf "${INSTALL_DIR}/client" "${INSTALL_DIR}/server/dist" "${INSTALL_DIR}/server/node_modules"
+
+        # 解压新版本
+        tar -xzf "$tar_file" -C "$INSTALL_DIR" --strip-components=0
+
+        # 恢复 .env 和证书
+        if [[ -n "$env_backup" && -f "$env_backup" ]]; then
+            cp "$env_backup" "${INSTALL_DIR}/.env"
+            rm -f "$env_backup"
+        fi
+        if [[ -n "$certs_backup" && -d "$certs_backup/certs" ]]; then
+            mkdir -p "${INSTALL_DIR}/server/certs"
+            cp -r "$certs_backup/certs/"* "${INSTALL_DIR}/server/certs/" 2>/dev/null || true
+            rm -rf "$certs_backup"
+        fi
+    else
+        # 全新安装
+        tar -xzf "$tar_file" -C "$INSTALL_DIR" --strip-components=0
+    fi
+
+    # 清理下载的临时文件
+    rm -f "$tar_file"
+
+    # 创建证书目录
+    mkdir -p "${INSTALL_DIR}/server/certs"
+
+    log "产物包安装完成"
+}
+
+# ========================== 创建系统用户 ==========================
+create_user() {
+    step "配置系统用户..."
+
+    if id "$RUN_USER" &>/dev/null; then
+        log "用户 ${RUN_USER} 已存在，跳过"
+    else
+        useradd --system --home-dir "${INSTALL_DIR}" --shell /usr/sbin/nologin "$RUN_USER"
+        log "系统用户 ${RUN_USER} 创建完成"
+    fi
+
+    # 创建 npm 缓存目录（npx/prisma 需要可写的 home 目录）
+    mkdir -p "${INSTALL_DIR}/.npm"
+    mkdir -p "${INSTALL_DIR}/.cache"
+
+    # 设置目录权限
+    chown -R "${RUN_USER}:${RUN_USER}" "$INSTALL_DIR"
+    chmod 750 "$INSTALL_DIR"
+    chmod 600 "${ENV_FILE}" 2>/dev/null || true
+}
+
+# ========================== 生成面板客户端证书 ==========================
+generate_panel_cert() {
+    local cert_dir="${INSTALL_DIR}/server/certs"
+    local cert_file="${cert_dir}/client.crt"
+    local key_file="${cert_dir}/client.key"
+
+    step "配置面板客户端证书..."
+
+    # 幂等性：证书已存在则跳过
+    if [[ -f "$cert_file" && -f "$key_file" ]]; then
+        log "面板客户端证书已存在，跳过生成"
+        return 0
+    fi
+
+    mkdir -p "$cert_dir"
+
+    # 生成自签名客户端证书（用于面板与 Incus API 的 mTLS 通信）
+    info "生成面板客户端证书（RSA 4096 位，有效期 10 年）..."
+    openssl req -x509 -newkey rsa:4096 \
+        -keyout "$key_file" \
+        -out "$cert_file" \
+        -days 3650 -nodes \
+        -subj "/CN=incudal-panel/O=Incudal" \
+        2>/dev/null
+
+    # 设置权限：只有 incudal 用户可读
+    chmod 600 "$cert_file" "$key_file"
+    chown "${RUN_USER}:${RUN_USER}" "$cert_file" "$key_file"
+
+    log "面板客户端证书生成完成"
+    info "证书路径: ${cert_file}"
+    info "密钥路径: ${key_file}"
+}
+
+# ========================== 配置数据库 ==========================
+setup_database() {
+    local db_password="$1"
+
+    step "配置 PostgreSQL 数据库..."
+
+    # 检查数据库和用户是否已存在
+    local db_exists
+    db_exists=$(sudo -u postgres psql -tAc "SELECT 1 FROM pg_database WHERE datname='incudal'" 2>/dev/null || echo "")
+
+    if [[ "$db_exists" == "1" ]]; then
+        info "数据库 'incudal' 已存在，跳过创建"
+        # 更新密码
+        sudo -u postgres psql -c "ALTER USER incudal WITH PASSWORD '${db_password}';" >/dev/null 2>&1 || true
+    else
+        # 创建用户和数据库
+        sudo -u postgres psql -c "CREATE USER incudal WITH PASSWORD '${db_password}';" >/dev/null 2>&1 || true
+        sudo -u postgres psql -c "CREATE DATABASE incudal OWNER incudal;" >/dev/null 2>&1
+        sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE incudal TO incudal;" >/dev/null 2>&1
+        log "数据库 'incudal' 创建完成"
+    fi
+}
+
+# ========================== 生成环境变量 ==========================
+generate_env() {
+    local db_password="$1"
+    local redis_password="$2"
+    local admin_password="${3:-admin123}"
+
+    step "生成环境配置..."
+
+    if [[ -f "$ENV_FILE" ]]; then
+        info ".env 文件已存在，检查并补齐缺失的密钥配置"
+        ensure_env_keys
+        return 0
+    fi
+
+    local jwt_secret
+    jwt_secret=$(gen_secret 48)
+    local cookie_secret
+    cookie_secret=$(gen_secret 48)
+    local encryption_key
+    encryption_key=$(openssl rand -base64 32)
+
+    cat > "$ENV_FILE" << EOF
+# ============================================================================
+# Incudal 环境配置
+# 由安装脚本自动生成于 $(date '+%Y-%m-%d %H:%M:%S')
+# ============================================================================
+
+# ============ 运行环境 ============
+NODE_ENV=production
+HOST=127.0.0.1
+PORT=${DEFAULT_PORT}
+
+# ============ 数据库配置 ============
+DATABASE_URL=postgresql://incudal:${db_password}@127.0.0.1:5432/incudal
+
+# ============ Redis 配置 ============
+REDIS_URL=redis://:${redis_password}@127.0.0.1:6379
+
+# ============ 安全配置（请勿泄露！）============
+JWT_SECRET=${jwt_secret}
+COOKIE_SECRET=${cookie_secret}
+ENCRYPTION_KEY=${encryption_key}
+
+# ============ 应用配置 ============
+APP_PORT=${DEFAULT_PORT}
+ADMIN_PASSWORD=${admin_password}
+LOG_LEVEL=info
+DISABLE_REQUEST_LOG=true
+
+# ============ CORS 配置（必须修改为实际域名！）============
+# 支付回调地址也会使用这个域名，必须是公网可访问的地址
+FRONTEND_URL=
+
+# ============ 监控告警（可选）============
+# ALERT_WEBHOOK_URL=https://your-webhook-url
+EOF
+
+    chmod 600 "$ENV_FILE"
+    chown "${RUN_USER}:${RUN_USER}" "$ENV_FILE"
+
+    log "环境配置文件生成完成: ${ENV_FILE}"
+}
+
+# ========================== 配置 Redis 密码 ==========================
+setup_redis() {
+    local redis_password="$1"
+
+    step "配置 Redis..."
+
+    local redis_conf="/etc/redis/redis.conf"
+    if [[ -f "$redis_conf" ]]; then
+        # 设置密码
+        if grep -q "^requirepass" "$redis_conf" 2>/dev/null; then
+            sed -i "s/^requirepass.*/requirepass ${redis_password}/" "$redis_conf"
+        elif grep -q "^# requirepass" "$redis_conf" 2>/dev/null; then
+            sed -i "s/^# requirepass.*/requirepass ${redis_password}/" "$redis_conf"
+        else
+            echo "requirepass ${redis_password}" >> "$redis_conf"
+        fi
+
+        systemctl restart redis-server
+        log "Redis 密码配置完成"
+    else
+        warn "Redis 配置文件不存在，跳过密码配置"
+    fi
+}
+
+# ========================== 运行数据库迁移 ==========================
+run_migrations() {
+    step "执行数据库迁移..."
+
+    cd "${INSTALL_DIR}/server"
+
+    # 以 incudal 用户身份加载 .env 并运行迁移
+    # HOME 需要指向有写权限的目录，否则 npm 缓存报 EACCES
+    sudo -u "$RUN_USER" HOME="${INSTALL_DIR}" bash -c "
+        set -a
+        source '${ENV_FILE}'
+        set +a
+        cd '${INSTALL_DIR}/server'
+        npx prisma migrate deploy
+    "
+
+    log "数据库迁移完成"
+}
+
+# ========================== 创建 systemd 服务 ==========================
+create_service() {
+    step "创建 systemd 服务..."
+
+    cat > "$SERVICE_FILE" << EOF
+[Unit]
+Description=Incudal 容器虚拟化管理平台
+Documentation=https://github.com/${GITHUB_REPO}
+After=network.target postgresql.service redis-server.service
+Requires=postgresql.service redis-server.service
+
+[Service]
+Type=simple
+User=${RUN_USER}
+Group=${RUN_USER}
+WorkingDirectory=${INSTALL_DIR}
+EnvironmentFile=${ENV_FILE}
+
+# 确保 npm 缓存目录可写
+Environment=HOME=${INSTALL_DIR}
+Environment=NPM_CONFIG_CACHE=${INSTALL_DIR}/.npm
+
+# 启动前自动执行数据库迁移
+ExecStartPre=/usr/bin/bash -c 'cd ${INSTALL_DIR}/server && npx prisma migrate deploy'
+
+# 启动主程序
+ExecStart=/usr/bin/node ${INSTALL_DIR}/server/dist/app.js
+
+# 优雅关闭
+KillMode=mixed
+KillSignal=SIGTERM
+TimeoutStopSec=30
+
+# 自动重启
+Restart=on-failure
+RestartSec=10
+StartLimitBurst=5
+StartLimitIntervalSec=300
+
+# 安全加固
+NoNewPrivileges=true
+ProtectSystem=strict
+ProtectHome=true
+ReadWritePaths=${INSTALL_DIR}/server/certs
+PrivateTmp=true
+
+# 资源限制
+LimitNOFILE=65536
+
+# 日志
+StandardOutput=journal
+StandardError=journal
+SyslogIdentifier=${SERVICE_NAME}
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+    systemctl daemon-reload
+    systemctl enable "$SERVICE_NAME" >/dev/null 2>&1
+
+    log "systemd 服务创建完成"
+}
+
+# ========================== Nginx + Certbot ==========================
+setup_nginx_certbot() {
+    info "准备配置 Nginx 反代及 Let's Encrypt SSL 自动证书"
+    echo -ne "  ${BOLD}请输入你要绑定的域名 (例如 panel.yourdomain.com): ${NC}"
+    read -r DOMAIN
+
+    if [[ -z "$DOMAIN" ]]; then
+        error "域名不能为空！"
+        return 1
+    fi
+
+    echo -ne "  ${BOLD}请输入你的邮箱 (用于证书过期通知，可留空): ${NC}"
+    read -r EMAIL
+
+    info "安装 Nginx 与 Certbot..."
+    apt-get install -y -qq nginx certbot python3-certbot-nginx >/dev/null 2>&1
+
+    # 更新 FRONTEND_URL
+    sed -i "s|^FRONTEND_URL=.*|FRONTEND_URL=https://${DOMAIN}|" "$ENV_FILE"
+
+    log "配置 Nginx 站点..."
+    cat > /etc/nginx/sites-available/incudal.conf <<NGINX
+server {
+    listen 80;
+    listen [::]:80;
+    server_name ${DOMAIN};
+
+    # 安全头
+    add_header X-Content-Type-Options nosniff;
+    add_header X-Frame-Options DENY;
+
+    location / {
+        proxy_pass http://127.0.0.1:${DEFAULT_PORT};
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade \$http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host \$host;
+        proxy_set_header X-Real-IP \$remote_addr;
+        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto \$scheme;
+        proxy_cache_bypass \$http_upgrade;
+
+        # WebSocket 超时
+        proxy_read_timeout 300s;
+        proxy_send_timeout 300s;
+    }
+}
+NGINX
+
+    ln -sf /etc/nginx/sites-available/incudal.conf /etc/nginx/sites-enabled/
+    # 移除默认站点（避免冲突）
+    rm -f /etc/nginx/sites-enabled/default 2>/dev/null || true
+    nginx -t >/dev/null 2>&1
+    systemctl reload nginx
+
+    log "申请 Let's Encrypt SSL 证书..."
+    if [[ -n "$EMAIL" ]]; then
+        certbot --nginx -d "$DOMAIN" --non-interactive --agree-tos -m "$EMAIL" --redirect
+    else
+        certbot --nginx -d "$DOMAIN" --non-interactive --agree-tos --register-unsafely-without-email --redirect
+    fi
+
+    log "HTTPS 配置完成！访问地址: https://${DOMAIN}"
+}
+
+# ========================== Cloudflare Tunnel ==========================
+setup_cf_tunnel() {
+    info "准备配置 Cloudflare Tunnel 内网穿透"
+    echo -e "  ${DIM}请先在 Cloudflare Zero Trust 管理后台创建 Tunnel${NC}"
+    echo -e "  ${DIM}并将 Public Hostname 的目标路由设置为 http://localhost:${DEFAULT_PORT}${NC}"
+    echo ""
+    echo -ne "  ${BOLD}请输入 Cloudflare Tunnel Token: ${NC}"
+    read -r CF_TOKEN
+
+    if [[ -z "$CF_TOKEN" ]]; then
+        error "Token 不能为空！"
+        return 1
+    fi
+
+    echo -ne "  ${BOLD}请输入绑定的域名 (例: panel.yourdomain.com): ${NC}"
+    read -r DOMAIN
+
+    if [[ -n "$DOMAIN" ]]; then
+        sed -i "s|^FRONTEND_URL=.*|FRONTEND_URL=https://${DOMAIN}|" "$ENV_FILE"
+    fi
+
+    # 安装 cloudflared
+    if ! command -v cloudflared &>/dev/null; then
+        info "安装 cloudflared..."
+        curl -fsSL https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-${ARCH} \
+            -o /usr/local/bin/cloudflared
+        chmod +x /usr/local/bin/cloudflared
+    fi
+
+    # 创建 cloudflared systemd 服务
+    cloudflared service install "$CF_TOKEN" 2>/dev/null || true
+
+    log "Cloudflare Tunnel 配置完成！"
+    if [[ -n "$DOMAIN" ]]; then
+        echo -e "  访问地址: ${GREEN}https://${DOMAIN}${NC}"
+    fi
+}
+
+# ========================== 启动服务 ==========================
+start_service() {
+    step "启动 Incudal 服务..."
+
+    systemctl start "$SERVICE_NAME"
+
+    # 等待几秒检查状态
+    sleep 3
+
+    if systemctl is-active --quiet "$SERVICE_NAME"; then
+        log "Incudal 服务启动成功！"
+    else
+        error "服务启动失败，查看日志："
+        journalctl -u "$SERVICE_NAME" --no-pager -n 20
+        exit 1
+    fi
+}
+
+# ========================== 显示安装结果 ==========================
+show_result() {
+    echo ""
+    divider
+    echo -e "  ${GREEN}${BOLD}✅ Incudal 面板部署成功！${NC}"
+    divider
+    echo ""
+    echo -e "  ${BOLD}面板信息${NC}"
+    echo -e "  安装路径  :  ${GREEN}${INSTALL_DIR}${NC}"
+    echo -e "  配置文件  :  ${GREEN}${ENV_FILE}${NC}"
+    echo -e "  服务名称  :  ${GREEN}${SERVICE_NAME}${NC}"
+    echo -e "  监听端口  :  ${GREEN}${DEFAULT_PORT}${NC}"
+    echo ""
+    echo -e "  ${BOLD}默认账号${NC}"
+    echo -e "  用户名    :  ${GREEN}admin${NC}"
+    echo -e "  密码      :  ${GREEN}admin123${NC}  ${YELLOW}（请在首次登录后立即修改！）${NC}"
+    echo ""
+    echo -e "  ${BOLD}常用命令${NC}"
+    echo -e "  启动服务  :  ${CYAN}systemctl start ${SERVICE_NAME}${NC}"
+    echo -e "  停止服务  :  ${CYAN}systemctl stop ${SERVICE_NAME}${NC}"
+    echo -e "  重启服务  :  ${CYAN}systemctl restart ${SERVICE_NAME}${NC}"
+    echo -e "  查看状态  :  ${CYAN}systemctl status ${SERVICE_NAME}${NC}"
+    echo -e "  查看日志  :  ${CYAN}journalctl -u ${SERVICE_NAME} -f${NC}"
+    echo ""
+    divider
+}
+
+# ========================== 升级流程 ==========================
+do_upgrade() {
+    show_banner
+    check_os
+
+    if ! check_existing; then
+        error "未检测到已安装的 Incudal，请先执行全新安装"
+        exit 1
+    fi
+
+    info "检测到已安装的 Incudal，准备升级..."
+
+    # 停止服务
+    info "停止当前服务..."
+    systemctl stop "$SERVICE_NAME" 2>/dev/null || true
+
+    # 获取产物包（自动下载或手动放置）
+    local tar_file
+    tar_file=$(obtain_release) || exit 1
+    if [[ -z "$tar_file" ]]; then
+        exit 1
+    fi
+    install_release "$tar_file" true
+
+    # 修复权限
+    chown -R "${RUN_USER}:${RUN_USER}" "$INSTALL_DIR"
+
+    # 运行迁移
+    run_migrations
+
+    # 重启服务
+    start_service
+
+    echo ""
+    divider
+    echo -e "  ${GREEN}${BOLD}✅ Incudal 升级到 ${version} 完成！${NC}"
+    divider
+}
+
+# ========================== 卸载流程 ==========================
+do_uninstall() {
+    show_banner
+
+    echo -e "  ${RED}${BOLD}⚠️  警告：卸载将执行以下操作：${NC}"
+    echo -e "  ${RED}  1. 停止并删除 Incudal systemd 服务${NC}"
+    echo -e "  ${RED}  2. 删除安装目录 ${INSTALL_DIR}${NC}"
+    echo -e "  ${RED}  3. 删除系统用户 ${RUN_USER}${NC}"
+    echo -e "  ${YELLOW}  注意：PostgreSQL/Redis 和数据库数据不会被删除${NC}"
+    echo ""
+    echo -ne "  ${BOLD}确认卸载？${NC}[y/N]: "
+    read -r confirm
+    if [[ ! "$confirm" =~ ^[yY]$ ]]; then
+        info "已取消卸载"
+        exit 0
+    fi
+
+    # 停止服务
+    systemctl stop "$SERVICE_NAME" 2>/dev/null || true
+    systemctl disable "$SERVICE_NAME" 2>/dev/null || true
+    rm -f "$SERVICE_FILE"
+    systemctl daemon-reload
+
+    # 删除安装目录
+    rm -rf "$INSTALL_DIR"
+
+    # 删除用户
+    userdel "$RUN_USER" 2>/dev/null || true
+
+    # 清理 Nginx 配置
+    rm -f /etc/nginx/sites-enabled/incudal.conf 2>/dev/null || true
+    rm -f /etc/nginx/sites-available/incudal.conf 2>/dev/null || true
+    systemctl reload nginx 2>/dev/null || true
+
+    echo ""
+    log "Incudal 已完全卸载"
+    info "数据库数据保留在 PostgreSQL 中，如需删除请手动执行："
+    echo -e "  ${CYAN}sudo -u postgres psql -c \"DROP DATABASE incudal;\"${NC}"
+    echo -e "  ${CYAN}sudo -u postgres psql -c \"DROP USER incudal;\"${NC}"
+}
+
+# ========================== 全新安装流程 ==========================
+do_install() {
+    show_banner
+    check_os
+
+    if check_existing; then
+        warn "检测到已安装的 Incudal (${INSTALL_DIR})"
+        info "产物包已解压就绪，将跳过下载步骤，直接从配置阶段继续"
+        info "如需全新安装，请先运行: sudo bash $0 --uninstall"
+        echo "" >&2
+    fi
+
+    # 密码处理：如果 .env 已存在则复用旧密码，避免密码不一致
+    local db_password
+    local redis_password
+
+    if [[ -f "$ENV_FILE" ]]; then
+        info "检测到已有 .env 配置，复用现有密码"
+        # 从 DATABASE_URL 提取密码: postgresql://user:PASSWORD@host:port/db
+        db_password=$(grep -oP 'DATABASE_URL=postgresql://[^:]+:\K[^@]+' "$ENV_FILE" 2>/dev/null || echo "")
+        # 从 REDIS_URL 提取密码: redis://:PASSWORD@host:port
+        redis_password=$(grep -oP 'REDIS_URL=redis://:\K[^@]+' "$ENV_FILE" 2>/dev/null || echo "")
+
+        if [[ -z "$db_password" ]]; then
+            warn "无法从 .env 提取数据库密码，将生成新密码并重写 .env"
+            db_password=$(gen_password 24)
+            rm -f "$ENV_FILE"
+        fi
+        if [[ -z "$redis_password" ]]; then
+            redis_password=$(gen_password 24)
+        fi
+    else
+        db_password=$(gen_password 24)
+        redis_password=$(gen_password 24)
+    fi
+
+    # 安装依赖
+    step "更新系统包索引..."
+    apt-get update -qq >/dev/null 2>&1
+
+    install_nodejs
+    install_postgresql
+    install_redis
+
+    # 仅在全新安装时获取和解压产物包（已安装则跳过）
+    if ! check_existing; then
+        # 获取产物包（自动下载或手动放置）
+        local tar_file
+        tar_file=$(obtain_release) || exit 1
+        if [[ -z "$tar_file" ]]; then
+            exit 1
+        fi
+
+        # 解压安装
+        install_release "$tar_file" false
+    else
+        log "产物包已就绪，跳过下载和解压"
+    fi
+
+    # 创建用户
+    create_user
+
+    # 生成面板客户端证书（与 Incus API mTLS 通信所需）
+    generate_panel_cert
+
+    # 配置数据库
+    setup_database "$db_password"
+
+    # 配置 Redis
+    setup_redis "$redis_password"
+
+    # 生成 .env
+    generate_env "$db_password" "$redis_password"
+
+    # 创建 systemd 服务
+    create_service
+
+    # 运行数据库迁移
+    run_migrations
+
+    # 选择网络方案
+    echo ""
+    divider
+    echo -e "  ${BOLD}请选择外部访问方案：${NC}"
+    divider
+    echo -e "  ${CYAN}[1]${NC} Nginx + Certbot   ${YELLOW}（推荐：自动 HTTPS，需要公网 IP 和域名）${NC}"
+    echo -e "  ${CYAN}[2]${NC} Cloudflare Tunnel  ${YELLOW}（适合无公网 IP 或隐藏源站 IP）${NC}"
+    echo -e "  ${CYAN}[3]${NC} 仅启动服务        ${DIM}（手动配置反代）${NC}"
+    echo ""
+    echo -ne "  ${BOLD}请选择 [1-3]: ${NC}"
+    read -r net_opt
+
+    case "${net_opt:-3}" in
+        1) setup_nginx_certbot ;;
+        2) setup_cf_tunnel ;;
+        3) info "跳过网络配置，服务将监听 127.0.0.1:${DEFAULT_PORT}" ;;
+        *) info "无效选项，跳过网络配置" ;;
+    esac
+
+    # 启动服务
+    start_service
+
+    # 显示结果
+    show_result
+}
+
+# ========================== 主入口 ==========================
+main() {
+    check_root
+
+    case "${1:-}" in
+        --upgrade|-u)
+            do_upgrade
+            ;;
+        --uninstall|--remove)
+            do_uninstall
+            ;;
+        --help|-h)
+            echo "Incudal 面板部署脚本 v${SCRIPT_VERSION}"
+            echo ""
+            echo "用法: sudo bash $0 [选项]"
+            echo ""
+            echo "选项:"
+            echo "  (无参数)      全新安装"
+            echo "  --upgrade     升级已有安装"
+            echo "  --uninstall   卸载 Incudal"
+            echo "  --help        显示帮助"
+            ;;
+        *)
+            do_install
+            ;;
+    esac
+}
+
+main "$@"
diff --git a/scripts/local-ci-macos.sh b/scripts/local-ci-macos.sh
new file mode 100644
index 0000000..285069b
--- /dev/null
+++ b/scripts/local-ci-macos.sh
@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+cd "$ROOT_DIR"
+
+print_step() {
+  printf '\n\033[33m[%s/6] %s\033[0m\n' "$1" "$2"
+}
+
+print_ok() {
+  printf '\033[32mOK\033[0m\n'
+}
+
+ensure_pnpm() {
+  if command -v pnpm >/dev/null 2>&1; then
+    PNPM_CMD=(pnpm)
+    return
+  fi
+
+  if command -v corepack >/dev/null 2>&1; then
+    LOCAL_CI_HOME="${TMPDIR:-/tmp}/incudal-local-ci"
+    export COREPACK_HOME="$LOCAL_CI_HOME/corepack"
+    mkdir -p "$COREPACK_HOME"
+    mkdir -p "$LOCAL_CI_HOME/bin"
+    cat > "$LOCAL_CI_HOME/bin/pnpm" <<'SH'
+#!/usr/bin/env bash
+exec corepack pnpm "$@"
+SH
+    chmod +x "$LOCAL_CI_HOME/bin/pnpm"
+    export PATH="$LOCAL_CI_HOME/bin:$PATH"
+    PNPM_CMD=(corepack pnpm)
+    return
+  fi
+
+  printf '\033[31mFAILED: pnpm is not installed and corepack is unavailable\033[0m\n' >&2
+  exit 1
+}
+
+printf '\033[36m========================================\033[0m\n'
+printf '\033[36m  Local CI Test (macOS)\033[0m\n'
+printf '\033[36m========================================\033[0m\n'
+
+ensure_pnpm
+
+print_step 1 "Installing dependencies..."
+"${PNPM_CMD[@]}" install --frozen-lockfile --ignore-scripts
+print_ok
+
+print_step 2 "Generating Prisma Client..."
+export DATABASE_URL="postgresql://user:pass@localhost:5432/db"
+"${PNPM_CMD[@]}" --filter server exec prisma generate
+print_ok
+
+print_step 3 "Running lint..."
+"${PNPM_CMD[@]}" lint
+print_ok
+
+print_step 4 "Type checking client..."
+"${PNPM_CMD[@]}" --filter client type-check
+print_ok
+
+print_step 5 "Type checking server..."
+"${PNPM_CMD[@]}" --filter server type-check
+print_ok
+
+print_step 6 "Building..."
+"${PNPM_CMD[@]}" build
+print_ok
+
+printf '\n\033[32m========================================\033[0m\n'
+printf '\033[32m  All CI checks passed!\033[0m\n'
+printf '\033[32m========================================\033[0m\n'
diff --git a/scripts/local-ci.ps1 b/scripts/local-ci.ps1
new file mode 100644
index 0000000..508786d
--- /dev/null
+++ b/scripts/local-ci.ps1
@@ -0,0 +1,74 @@
+# Local CI Test Script
+# Runs the same checks as GitHub Actions CI
+
+$ErrorActionPreference = "Stop"
+
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host "  Local CI Test" -ForegroundColor Cyan
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host ""
+
+# Step 1: Install dependencies
+Write-Host "[1/6] Installing dependencies..." -ForegroundColor Yellow
+pnpm install --frozen-lockfile --ignore-scripts
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "FAILED: pnpm install" -ForegroundColor Red
+    exit 1
+}
+Write-Host "OK" -ForegroundColor Green
+Write-Host ""
+
+# Step 2: Generate Prisma Client
+Write-Host "[2/6] Generating Prisma Client..." -ForegroundColor Yellow
+$env:DATABASE_URL = "postgresql://user:pass@localhost:5432/db"
+pnpm --filter server exec prisma generate
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "FAILED: prisma generate" -ForegroundColor Red
+    exit 1
+}
+Write-Host "OK" -ForegroundColor Green
+Write-Host ""
+
+# Step 3: Lint
+Write-Host "[3/6] Running lint..." -ForegroundColor Yellow
+pnpm lint
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "FAILED: lint" -ForegroundColor Red
+    exit 1
+}
+Write-Host "OK" -ForegroundColor Green
+Write-Host ""
+
+# Step 4: Type check (client)
+Write-Host "[4/6] Type checking client..." -ForegroundColor Yellow
+pnpm --filter client type-check
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "FAILED: client type-check" -ForegroundColor Red
+    exit 1
+}
+Write-Host "OK" -ForegroundColor Green
+Write-Host ""
+
+# Step 5: Type check (server)
+Write-Host "[5/6] Type checking server..." -ForegroundColor Yellow
+pnpm --filter server type-check
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "FAILED: server type-check" -ForegroundColor Red
+    exit 1
+}
+Write-Host "OK" -ForegroundColor Green
+Write-Host ""
+
+# Step 6: Build
+Write-Host "[6/6] Building..." -ForegroundColor Yellow
+pnpm build
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "FAILED: build" -ForegroundColor Red
+    exit 1
+}
+Write-Host "OK" -ForegroundColor Green
+Write-Host ""
+
+Write-Host "========================================" -ForegroundColor Green
+Write-Host "  All CI checks passed!" -ForegroundColor Green
+Write-Host "========================================" -ForegroundColor Green
diff --git a/scripts/watch-migrations.mjs b/scripts/watch-migrations.mjs
new file mode 100644
index 0000000..120584e
--- /dev/null
+++ b/scripts/watch-migrations.mjs
@@ -0,0 +1,122 @@
+import { createHash } from 'node:crypto'
+import path from 'node:path'
+import { spawn } from 'node:child_process'
+import { readdir, stat } from 'node:fs/promises'
+
+const watchDir = process.env.MIGRATIONS_DIR || '/workspace/server/prisma/migrations'
+const intervalMs = Number(process.env.MIGRATION_WATCH_INTERVAL_MS || 3000)
+
+let initialized = false
+let lastFingerprint = ''
+let isRunning = false
+let rerunRequested = false
+
+async function collectFiles(dir, files = []) {
+  const entries = await readdir(dir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      await collectFiles(fullPath, files)
+      continue
+    }
+    if (!entry.isFile()) continue
+
+    const info = await stat(fullPath)
+    files.push({
+      path: fullPath,
+      size: info.size,
+      mtimeMs: Math.trunc(info.mtimeMs)
+    })
+  }
+
+  return files
+}
+
+async function buildFingerprint() {
+  try {
+    const files = await collectFiles(watchDir)
+    files.sort((a, b) => a.path.localeCompare(b.path))
+
+    const hash = createHash('sha1')
+    for (const file of files) {
+      hash.update(file.path)
+      hash.update(':')
+      hash.update(String(file.size))
+      hash.update(':')
+      hash.update(String(file.mtimeMs))
+      hash.update('\n')
+    }
+
+    return hash.digest('hex')
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    return `missing:${message}`
+  }
+}
+
+function runCommand(command, args) {
+  return new Promise((resolve) => {
+    const child = spawn(command, args, { stdio: 'inherit' })
+    child.on('error', () => resolve(1))
+    child.on('close', (code) => resolve(typeof code === 'number' ? code : 1))
+  })
+}
+
+async function applyMigrations(reason) {
+  if (isRunning) {
+    rerunRequested = true
+    return
+  }
+
+  isRunning = true
+  console.log(`[MigrationWatcher] Change detected (${reason}). Running migrate deploy...`)
+
+  const deployCode = await runCommand('pnpm', ['--filter', 'server', 'exec', 'prisma', 'migrate', 'deploy'])
+  let generateCode = 0
+  if (deployCode === 0) {
+    generateCode = await runCommand('pnpm', ['--filter', 'server', 'exec', 'prisma', 'generate'])
+  }
+
+  if (deployCode === 0 && generateCode === 0) {
+    console.log('[MigrationWatcher] Migration sync finished.')
+  } else {
+    console.error(
+      `[MigrationWatcher] Migration sync failed (deploy=${deployCode}, generate=${generateCode}).`
+    )
+  }
+
+  isRunning = false
+  if (rerunRequested) {
+    rerunRequested = false
+    await applyMigrations('queued rerun')
+  }
+}
+
+async function tick() {
+  const current = await buildFingerprint()
+  if (!initialized) {
+    initialized = true
+    lastFingerprint = current
+    console.log(`[MigrationWatcher] Watching ${watchDir} (interval: ${intervalMs}ms).`)
+    return
+  }
+
+  if (current === lastFingerprint) return
+
+  const previous = lastFingerprint
+  lastFingerprint = current
+  await applyMigrations(`${previous} -> ${current}`)
+}
+
+setInterval(() => {
+  tick().catch((error) => {
+    const message = error instanceof Error ? error.message : String(error)
+    console.error(`[MigrationWatcher] Tick failed: ${message}`)
+  })
+}, intervalMs)
+
+tick().catch((error) => {
+  const message = error instanceof Error ? error.message : String(error)
+  console.error(`[MigrationWatcher] Initial tick failed: ${message}`)
+})
diff --git a/server/certs/.gitkeep b/server/certs/.gitkeep
new file mode 100644
index 0000000..cf78567
--- /dev/null
+++ b/server/certs/.gitkeep
@@ -0,0 +1,4 @@
+# 此目录用于存放 Incus mTLS 证书
+# 请将 client.crt 和 client.key 放置于此
+# 注意：证书文件不应提交到 Git
+
diff --git a/server/docker-entrypoint.sh b/server/docker-entrypoint.sh
new file mode 100644
index 0000000..c119ab1
--- /dev/null
+++ b/server/docker-entrypoint.sh
@@ -0,0 +1,10 @@
+#!/bin/sh
+set -e
+
+echo "🔄 Running database migrations..."
+cd /app/server
+npx prisma migrate deploy
+
+echo "🚀 Starting application..."
+cd /app
+exec node server/dist/app.js
diff --git a/server/package-lock.json b/server/package-lock.json
new file mode 100644
index 0000000..70a94af
--- /dev/null
+++ b/server/package-lock.json
@@ -0,0 +1,6829 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "server",
+      "version": "1.0.0",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fastify/cookie": "^11.0.2",
+        "@fastify/cors": "^10.0.1",
+        "@fastify/helmet": "^13.0.2",
+        "@fastify/jwt": "^9.0.1",
+        "@fastify/rate-limit": "^10.3.0",
+        "@fastify/static": "^8.0.3",
+        "@fastify/websocket": "^11.0.1",
+        "@libsql/client": "^0.14.0",
+        "@prisma/adapter-pg": "^7.1.0",
+        "@prisma/client": "^7.1.0",
+        "@types/ws": "^8.18.1",
+        "basic-ftp": "^5.0.5",
+        "bcryptjs": "^2.4.3",
+        "dotenv": "^17.2.3",
+        "drizzle-orm": "^0.38.2",
+        "fastify": "^5.1.0",
+        "fastify-cloudflare-turnstile": "^2.0.2",
+        "ip-address": "^10.1.0",
+        "jsonwebtoken": "^9.0.3",
+        "nanoid": "^5.1.6",
+        "node-cron": "^4.2.1",
+        "nodemailer": "^7.0.11",
+        "otplib": "^12.0.1",
+        "p-limit": "^7.2.0",
+        "pg": "^8.16.3",
+        "pino-pretty": "^13.0.0",
+        "qrcode": "^1.5.4",
+        "ssh2-sftp-client": "^11.0.0",
+        "undici": "^7.1.0",
+        "webdav": "^5.8.0",
+        "ws": "^8.18.3"
+      },
+      "devDependencies": {
+        "@types/node": "^24.10.1",
+        "@types/node-cron": "^3.0.11",
+        "@types/nodemailer": "^7.0.4",
+        "@types/pg": "^8.15.6",
+        "@types/qrcode": "^1.5.6",
+        "@types/ssh2-sftp-client": "^9.0.4",
+        "@typescript-eslint/eslint-plugin": "^8.48.1",
+        "@typescript-eslint/parser": "^8.48.1",
+        "cross-env": "^10.1.0",
+        "drizzle-kit": "^0.30.1",
+        "prisma": "^7.1.0",
+        "tsx": "^4.21.0",
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/@buttercup/fetch": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@buttercup/fetch/-/fetch-0.2.1.tgz",
+      "integrity": "sha512-sCgECOx8wiqY8NN1xN22BqqKzXYIG2AicNLlakOAI4f0WgyLVUbAigMf8CZhBtJxdudTcB1gD5lciqi44jwJvg==",
+      "license": "MIT",
+      "optionalDependencies": {
+        "node-fetch": "^3.3.0"
+      }
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.5.0.tgz",
+      "integrity": "sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/gast": "10.5.0",
+        "@chevrotain/types": "10.5.0",
+        "lodash": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-10.5.0.tgz",
+      "integrity": "sha512-pXdMJ9XeDAbgOWKuD1Fldz4ieCs6+nLNmyVhe2gZVqoO7v8HXuHYs5OV2EzUtbuai37TlOAQHrTDvxMnvMJz3A==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/types": "10.5.0",
+        "lodash": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-10.5.0.tgz",
+      "integrity": "sha512-f1MAia0x/pAVPWH/T73BJVyO2XU5tI4/iE7cnxb7tqdNTNhQI3Uq3XkqcoteTmD4t1aM0LbHCJOhgIDn07kl2A==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz",
+      "integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@drizzle-team/brocli": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.10.2.tgz",
+      "integrity": "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@electric-sql/pglite": {
+      "version": "0.3.15",
+      "resolved": "https://registry.npmjs.org/@electric-sql/pglite/-/pglite-0.3.15.tgz",
+      "integrity": "sha512-Cj++n1Mekf9ETfdc16TlDi+cDDQF0W7EcbyRHYOAeZdsAe8M/FJg18itDTSwyHfar2WIezawM9o0EKaRGVKygQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@electric-sql/pglite-socket": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@electric-sql/pglite-socket/-/pglite-socket-0.0.20.tgz",
+      "integrity": "sha512-J5nLGsicnD9wJHnno9r+DGxfcZWh+YJMCe0q/aCgtG6XOm9Z7fKeite8IZSNXgZeGltSigM9U/vAWZQWdgcSFg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "pglite-server": "dist/scripts/server.js"
+      },
+      "peerDependencies": {
+        "@electric-sql/pglite": "0.3.15"
+      }
+    },
+    "node_modules/@electric-sql/pglite-tools": {
+      "version": "0.2.20",
+      "resolved": "https://registry.npmjs.org/@electric-sql/pglite-tools/-/pglite-tools-0.2.20.tgz",
+      "integrity": "sha512-BK50ZnYa3IG7ztXhtgYf0Q7zijV32Iw1cYS8C+ThdQlwx12V5VZ9KRJ42y82Hyb4PkTxZQklVQA9JHyUlex33A==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@electric-sql/pglite": "0.3.15"
+      }
+    },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@esbuild-kit/core-utils": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@esbuild-kit/core-utils/-/core-utils-3.3.2.tgz",
+      "integrity": "sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==",
+      "deprecated": "Merged into tsx: https://tsx.is",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.18.20",
+        "source-map-support": "^0.5.21"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/darwin-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-loong64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-s390x": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/sunos-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild-kit/core-utils/node_modules/esbuild": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
+      }
+    },
+    "node_modules/@esbuild-kit/esm-loader": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@esbuild-kit/esm-loader/-/esm-loader-2.6.5.tgz",
+      "integrity": "sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==",
+      "deprecated": "Merged into tsx: https://tsx.is",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@esbuild-kit/core-utils": "^3.3.2",
+        "get-tsconfig": "^4.7.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.2.tgz",
+      "integrity": "sha512-YF+fE6LV4v5MGWRGj7G404/OZzGNepVF8fxk7jqmqo3lrza7a0uUcDnROGRBG1WFC1omYUS/Wp1f42i0M+3Q3A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@eslint/object-schema": "^3.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.5.2.tgz",
+      "integrity": "sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@eslint/core": "^1.1.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.1.0.tgz",
+      "integrity": "sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.2.tgz",
+      "integrity": "sha512-HOy56KJt48Bx8KmJ+XGQNSUMT/6dZee/M54XyUyuvTvPXJmsERRvBchsUVx1UMe1WwIH49XLAczNC7V2INsuUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.6.0.tgz",
+      "integrity": "sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@eslint/core": "^1.1.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@fastify/accept-negotiator": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-2.0.1.tgz",
+      "integrity": "sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/@fastify/ajv-compiler": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-4.0.5.tgz",
+      "integrity": "sha512-KoWKW+MhvfTRWL4qrhUwAAZoaChluo0m0vbiJlGMt2GXvL4LVPQEjt8kSpHI3IBq5Rez8fg+XeH3cneztq+C7A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.12.0",
+        "ajv-formats": "^3.0.1",
+        "fast-uri": "^3.0.0"
+      }
+    },
+    "node_modules/@fastify/ajv-compiler/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@fastify/ajv-compiler/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/@fastify/cookie": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/@fastify/cookie/-/cookie-11.0.2.tgz",
+      "integrity": "sha512-GWdwdGlgJxyvNv+QcKiGNevSspMQXncjMZ1J8IvuDQk0jvkzgWWZFNC2En3s+nHndZBGV8IbLwOI/sxCZw/mzA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.0",
+        "fastify-plugin": "^5.0.0"
+      }
+    },
+    "node_modules/@fastify/cors": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/cors/-/cors-10.1.0.tgz",
+      "integrity": "sha512-MZyBCBJtII60CU9Xme/iE4aEy8G7QpzGR8zkdXZkDFt7ElEMachbE61tfhAG/bvSaULlqlf0huMT12T7iqEmdQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fastify-plugin": "^5.0.0",
+        "mnemonist": "0.40.0"
+      }
+    },
+    "node_modules/@fastify/error": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/error/-/error-4.2.0.tgz",
+      "integrity": "sha512-RSo3sVDXfHskiBZKBPRgnQTtIqpi/7zhJOEmAxCiBcM7d0uwdGdxLlsCaLzGs8v8NnxIRlfG0N51p5yFaOentQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/@fastify/fast-json-stringify-compiler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-5.0.3.tgz",
+      "integrity": "sha512-uik7yYHkLr6fxd8hJSZ8c+xF4WafPK+XzneQDPU+D10r5X19GW8lJcom2YijX2+qtFF1ENJlHXKFM9ouXNJYgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fast-json-stringify": "^6.0.0"
+      }
+    },
+    "node_modules/@fastify/forwarded": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@fastify/forwarded/-/forwarded-3.0.1.tgz",
+      "integrity": "sha512-JqDochHFqXs3C3Ml3gOY58zM7OqO9ENqPo0UqAjAjH8L01fRZqwX9iLeX34//kiJubF7r2ZQHtBRU36vONbLlw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/@fastify/helmet": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/@fastify/helmet/-/helmet-13.0.2.tgz",
+      "integrity": "sha512-tO1QMkOfNeCt9l4sG/FiWErH4QMm+RjHzbMTrgew1DYOQ2vb/6M1G2iNABBrD7Xq6dUk+HLzWW8u+rmmhQHifA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fastify-plugin": "^5.0.0",
+        "helmet": "^8.0.0"
+      }
+    },
+    "node_modules/@fastify/jwt": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/jwt/-/jwt-9.1.0.tgz",
+      "integrity": "sha512-CiGHCnS5cPMdb004c70sUWhQTfzrJHAeTywt7nVw6dAiI0z1o4WRvU94xfijhkaId4bIxTCOjFgn4sU+Gvk43w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/error": "^4.0.0",
+        "@lukeed/ms": "^2.0.2",
+        "fast-jwt": "^5.0.0",
+        "fastify-plugin": "^5.0.0",
+        "steed": "^1.1.3"
+      }
+    },
+    "node_modules/@fastify/merge-json-schemas": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@fastify/merge-json-schemas/-/merge-json-schemas-0.2.1.tgz",
+      "integrity": "sha512-OA3KGBCy6KtIvLf8DINC5880o5iBlDX4SxzLQS8HorJAbqluzLRn80UXU0bxZn7UOFhFgpRJDasfwn9nG4FG4A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@fastify/proxy-addr": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/proxy-addr/-/proxy-addr-5.1.0.tgz",
+      "integrity": "sha512-INS+6gh91cLUjB+PVHfu1UqcB76Sqtpyp7bnL+FYojhjygvOPA9ctiD/JDKsyD9Xgu4hUhCSJBPig/w7duNajw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/forwarded": "^3.0.0",
+        "ipaddr.js": "^2.1.0"
+      }
+    },
+    "node_modules/@fastify/rate-limit": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@fastify/rate-limit/-/rate-limit-10.3.0.tgz",
+      "integrity": "sha512-eIGkG9XKQs0nyynatApA3EVrojHOuq4l6fhB4eeCk4PIOeadvOJz9/4w3vGI44Go17uaXOWEcPkaD8kuKm7g6Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@lukeed/ms": "^2.0.2",
+        "fastify-plugin": "^5.0.0",
+        "toad-cache": "^3.7.0"
+      }
+    },
+    "node_modules/@fastify/send": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/send/-/send-4.1.0.tgz",
+      "integrity": "sha512-TMYeQLCBSy2TOFmV95hQWkiTYgC/SEx7vMdV+wnZVX4tt8VBLKzmH8vV9OzJehV0+XBfg+WxPMt5wp+JBUKsVw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@lukeed/ms": "^2.0.2",
+        "escape-html": "~1.0.3",
+        "fast-decode-uri-component": "^1.0.1",
+        "http-errors": "^2.0.0",
+        "mime": "^3"
+      }
+    },
+    "node_modules/@fastify/static": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@fastify/static/-/static-8.3.0.tgz",
+      "integrity": "sha512-yKxviR5PH1OKNnisIzZKmgZSus0r2OZb8qCSbqmw34aolT4g3UlzYfeBRym+HJ1J471CR8e2ldNub4PubD1coA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/accept-negotiator": "^2.0.0",
+        "@fastify/send": "^4.0.0",
+        "content-disposition": "^0.5.4",
+        "fastify-plugin": "^5.0.0",
+        "fastq": "^1.17.1",
+        "glob": "^11.0.0"
+      }
+    },
+    "node_modules/@fastify/websocket": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/websocket/-/websocket-11.2.0.tgz",
+      "integrity": "sha512-3HrDPbAG1CzUCqnslgJxppvzaAZffieOVbLp1DAy1huCSynUWPifSvfdEDUR8HlJLp3sp1A36uOM2tJogADS8w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "duplexify": "^4.1.3",
+        "fastify-plugin": "^5.0.0",
+        "ws": "^8.16.0"
+      }
+    },
+    "node_modules/@hono/node-server": {
+      "version": "1.19.9",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
+      "integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
+      "integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@libsql/client": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@libsql/client/-/client-0.14.0.tgz",
+      "integrity": "sha512-/9HEKfn6fwXB5aTEEoMeFh4CtG0ZzbncBb1e++OCdVpgKZ/xyMsIVYXm0w7Pv4RUel803vE6LwniB3PqD72R0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@libsql/core": "^0.14.0",
+        "@libsql/hrana-client": "^0.7.0",
+        "js-base64": "^3.7.5",
+        "libsql": "^0.4.4",
+        "promise-limit": "^2.7.0"
+      }
+    },
+    "node_modules/@libsql/core": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@libsql/core/-/core-0.14.0.tgz",
+      "integrity": "sha512-nhbuXf7GP3PSZgdCY2Ecj8vz187ptHlZQ0VRc751oB2C1W8jQUXKKklvt7t1LJiUTQBVJuadF628eUk+3cRi4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-base64": "^3.7.5"
+      }
+    },
+    "node_modules/@libsql/darwin-arm64": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/darwin-arm64/-/darwin-arm64-0.4.7.tgz",
+      "integrity": "sha512-yOL742IfWUlUevnI5PdnIT4fryY3LYTdLm56bnY0wXBw7dhFcnjuA7jrH3oSVz2mjZTHujxoITgAE7V6Z+eAbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@libsql/darwin-x64": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/darwin-x64/-/darwin-x64-0.4.7.tgz",
+      "integrity": "sha512-ezc7V75+eoyyH07BO9tIyJdqXXcRfZMbKcLCeF8+qWK5nP8wWuMcfOVywecsXGRbT99zc5eNra4NEx6z5PkSsA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@libsql/hrana-client": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@libsql/hrana-client/-/hrana-client-0.7.0.tgz",
+      "integrity": "sha512-OF8fFQSkbL7vJY9rfuegK1R7sPgQ6kFMkDamiEccNUvieQ+3urzfDFI616oPl8V7T9zRmnTkSjMOImYCAVRVuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@libsql/isomorphic-fetch": "^0.3.1",
+        "@libsql/isomorphic-ws": "^0.1.5",
+        "js-base64": "^3.7.5",
+        "node-fetch": "^3.3.2"
+      }
+    },
+    "node_modules/@libsql/isomorphic-fetch": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@libsql/isomorphic-fetch/-/isomorphic-fetch-0.3.1.tgz",
+      "integrity": "sha512-6kK3SUK5Uu56zPq/Las620n5aS9xJq+jMBcNSOmjhNf/MUvdyji4vrMTqD7ptY7/4/CAVEAYDeotUz60LNQHtw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@libsql/isomorphic-ws": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@libsql/isomorphic-ws/-/isomorphic-ws-0.1.5.tgz",
+      "integrity": "sha512-DtLWIH29onUYR00i0GlQ3UdcTRC6EP4u9w/h9LxpUZJWRMARk6dQwZ6Jkd+QdwVpuAOrdxt18v0K2uIYR3fwFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ws": "^8.5.4",
+        "ws": "^8.13.0"
+      }
+    },
+    "node_modules/@libsql/linux-arm64-gnu": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-arm64-gnu/-/linux-arm64-gnu-0.4.7.tgz",
+      "integrity": "sha512-WlX2VYB5diM4kFfNaYcyhw5y+UJAI3xcMkEUJZPtRDEIu85SsSFrQ+gvoKfcVh76B//ztSeEX2wl9yrjF7BBCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@libsql/linux-arm64-musl": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-arm64-musl/-/linux-arm64-musl-0.4.7.tgz",
+      "integrity": "sha512-6kK9xAArVRlTCpWeqnNMCoXW1pe7WITI378n4NpvU5EJ0Ok3aNTIC2nRPRjhro90QcnmLL1jPcrVwO4WD1U0xw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@libsql/linux-x64-gnu": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-x64-gnu/-/linux-x64-gnu-0.4.7.tgz",
+      "integrity": "sha512-CMnNRCmlWQqqzlTw6NeaZXzLWI8bydaXDke63JTUCvu8R+fj/ENsLrVBtPDlxQ0wGsYdXGlrUCH8Qi9gJep0yQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@libsql/linux-x64-musl": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/linux-x64-musl/-/linux-x64-musl-0.4.7.tgz",
+      "integrity": "sha512-nI6tpS1t6WzGAt1Kx1n1HsvtBbZ+jHn0m7ogNNT6pQHZQj7AFFTIMeDQw/i/Nt5H38np1GVRNsFe99eSIMs9XA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@libsql/win32-x64-msvc": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@libsql/win32-x64-msvc/-/win32-x64-msvc-0.4.7.tgz",
+      "integrity": "sha512-7pJzOWzPm6oJUxml+PCDRzYQ4A1hTMHAciTAHfFK4fkbDZX33nWPVG7Y3vqdKtslcwAzwmrNDc6sXy2nwWnbiw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@lukeed/ms": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@lukeed/ms/-/ms-2.0.2.tgz",
+      "integrity": "sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@mrleebo/prisma-ast": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@mrleebo/prisma-ast/-/prisma-ast-0.13.1.tgz",
+      "integrity": "sha512-XyroGQXcHrZdvmrGJvsA9KNeOOgGMg1Vg9OlheUsBOSKznLMDl+YChxbkboRHvtFYJEMRYmlV3uoo/njCw05iw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "chevrotain": "^10.5.0",
+        "lilconfig": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@neon-rs/load": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@neon-rs/load/-/load-0.0.4.tgz",
+      "integrity": "sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==",
+      "license": "MIT"
+    },
+    "node_modules/@otplib/core": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@otplib/core/-/core-12.0.1.tgz",
+      "integrity": "sha512-4sGntwbA/AC+SbPhbsziRiD+jNDdIzsZ3JUyfZwjtKyc/wufl1pnSIaG4Uqx8ymPagujub0o92kgBnB89cuAMA==",
+      "license": "MIT"
+    },
+    "node_modules/@otplib/plugin-crypto": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@otplib/plugin-crypto/-/plugin-crypto-12.0.1.tgz",
+      "integrity": "sha512-qPuhN3QrT7ZZLcLCyKOSNhuijUi9G5guMRVrxq63r9YNOxxQjPm59gVxLM+7xGnHnM6cimY57tuKsjK7y9LM1g==",
+      "deprecated": "Please upgrade to v13 of otplib. Refer to otplib docs for migration paths",
+      "license": "MIT",
+      "dependencies": {
+        "@otplib/core": "^12.0.1"
+      }
+    },
+    "node_modules/@otplib/plugin-thirty-two": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@otplib/plugin-thirty-two/-/plugin-thirty-two-12.0.1.tgz",
+      "integrity": "sha512-MtT+uqRso909UkbrrYpJ6XFjj9D+x2Py7KjTO9JDPhL0bJUYVu5kFP4TFZW4NFAywrAtFRxOVY261u0qwb93gA==",
+      "deprecated": "Please upgrade to v13 of otplib. Refer to otplib docs for migration paths",
+      "license": "MIT",
+      "dependencies": {
+        "@otplib/core": "^12.0.1",
+        "thirty-two": "^1.0.2"
+      }
+    },
+    "node_modules/@otplib/preset-default": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@otplib/preset-default/-/preset-default-12.0.1.tgz",
+      "integrity": "sha512-xf1v9oOJRyXfluBhMdpOkr+bsE+Irt+0D5uHtvg6x1eosfmHCsCC6ej/m7FXiWqdo0+ZUI6xSKDhJwc8yfiOPQ==",
+      "deprecated": "Please upgrade to v13 of otplib. Refer to otplib docs for migration paths",
+      "license": "MIT",
+      "dependencies": {
+        "@otplib/core": "^12.0.1",
+        "@otplib/plugin-crypto": "^12.0.1",
+        "@otplib/plugin-thirty-two": "^12.0.1"
+      }
+    },
+    "node_modules/@otplib/preset-v11": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@otplib/preset-v11/-/preset-v11-12.0.1.tgz",
+      "integrity": "sha512-9hSetMI7ECqbFiKICrNa4w70deTUfArtwXykPUvSHWOdzOlfa9ajglu7mNCntlvxycTiOAXkQGwjQCzzDEMRMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@otplib/core": "^12.0.1",
+        "@otplib/plugin-crypto": "^12.0.1",
+        "@otplib/plugin-thirty-two": "^12.0.1"
+      }
+    },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.3.tgz",
+      "integrity": "sha512-8awtpHXCx/bNpFt4mt2xdkgtgVvKqty8VbjHI/WWWQuEw+KLzFot3f4+LkQY9YmOtq7A5GdOnqoIC8Pdygjk2g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@pinojs/redact": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@pinojs/redact/-/redact-0.4.0.tgz",
+      "integrity": "sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==",
+      "license": "MIT"
+    },
+    "node_modules/@prisma/adapter-pg": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/adapter-pg/-/adapter-pg-7.4.1.tgz",
+      "integrity": "sha512-AH9XrqvSoBAaStn0Gm/sAnF97pDKz8uLpNmn51j1S9O9dhUva6LIxGdoDiiU9VXRIR89wAJXsvJSy+mK40m2xw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/driver-adapter-utils": "7.4.1",
+        "pg": "^8.16.3",
+        "postgres-array": "3.0.4"
+      }
+    },
+    "node_modules/@prisma/client": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-7.4.1.tgz",
+      "integrity": "sha512-pgIll2W1NVdof37xLeyySW+yfQ4rI+ERGCRwnO3BjVOx42GpYq6jhTyuALK8VKirvJJIvImgfGDA2qwhYVvMuA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/client-runtime-utils": "7.4.1"
+      },
+      "engines": {
+        "node": "^20.19 || ^22.12 || >=24.0"
+      },
+      "peerDependencies": {
+        "prisma": "*",
+        "typescript": ">=5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/client-runtime-utils": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/client-runtime-utils/-/client-runtime-utils-7.4.1.tgz",
+      "integrity": "sha512-8fy74OMYC7mt9cJ2MncIDk1awPRgmtXVvwTN2FlW4JVhbck8Dgt0wTkhPG85myfj4ZeP2stjF9Sdg12n5HrpQg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/config": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/config/-/config-7.4.1.tgz",
+      "integrity": "sha512-vteSXm8N46bo3FW9MhPGVHAj+KRgrR6TWtlSk6GqToCKjTnOexXdPZyiDyEsfVW38YhqEmVl6w/6iHN8uYVJcw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "c12": "3.1.0",
+        "deepmerge-ts": "7.1.5",
+        "effect": "3.18.4",
+        "empathic": "2.0.0"
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-7.4.1.tgz",
+      "integrity": "sha512-qEtzO8oLouRv18JDQUC3G3Gnv+fGVscHZm/x1DBB/WT+kOvPDQLM2woX6IGgWnSMYYlrxjuALshT7G/blvY0bQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/dev": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/@prisma/dev/-/dev-0.20.0.tgz",
+      "integrity": "sha512-ovlBYwWor0OzG+yH4J3Ot+AneD818BttLA+Ii7wjbcLHUrnC4tbUPVGyNd3c/+71KETPKZfjhkTSpdS15dmXNQ==",
+      "devOptional": true,
+      "license": "ISC",
+      "dependencies": {
+        "@electric-sql/pglite": "0.3.15",
+        "@electric-sql/pglite-socket": "0.0.20",
+        "@electric-sql/pglite-tools": "0.2.20",
+        "@hono/node-server": "1.19.9",
+        "@mrleebo/prisma-ast": "0.13.1",
+        "@prisma/get-platform": "7.2.0",
+        "@prisma/query-plan-executor": "7.2.0",
+        "foreground-child": "3.3.1",
+        "get-port-please": "3.2.0",
+        "hono": "4.11.4",
+        "http-status-codes": "2.3.0",
+        "pathe": "2.0.3",
+        "proper-lockfile": "4.1.2",
+        "remeda": "2.33.4",
+        "std-env": "3.10.0",
+        "valibot": "1.2.0",
+        "zeptomatch": "2.1.0"
+      }
+    },
+    "node_modules/@prisma/driver-adapter-utils": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/driver-adapter-utils/-/driver-adapter-utils-7.4.1.tgz",
+      "integrity": "sha512-gEZOC2tnlHaZNbHUdbK8YvQphq2tKq/Ovu1YixJ/hPSutDAvNzC3R+xUeBuJ4AJp236eELMzwxb7rgo3UbRkTg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.4.1"
+      }
+    },
+    "node_modules/@prisma/engines": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-7.4.1.tgz",
+      "integrity": "sha512-BZEBdHvNJx5PzIG37EI/Zi5UUI5hGWjkYsQmKa7OIK6evAvebOTwutjS/VRI6cA6grmA52eLZR+oekGRMqkKxQ==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.4.1",
+        "@prisma/engines-version": "7.5.0-4.55ae170b1ced7fc6ed07a15f110549408c501bb3",
+        "@prisma/fetch-engine": "7.4.1",
+        "@prisma/get-platform": "7.4.1"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "7.5.0-4.55ae170b1ced7fc6ed07a15f110549408c501bb3",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-7.5.0-4.55ae170b1ced7fc6ed07a15f110549408c501bb3.tgz",
+      "integrity": "sha512-fUxVd1TjOW8K4XsZ8dAm88sDW5Ry7AxWDfsYEWwScS6Fjo3caKC6hgNumUfsmsy0Il9LjDn5X0PpVXNt3iwayw==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/engines/node_modules/@prisma/get-platform": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-7.4.1.tgz",
+      "integrity": "sha512-kN4tmkQzlgm/KtE+jTNSYjsDxxe/5i6GApPI32BN9T0tlgsgSBtDJbjGBICttkAIjsh73dXf8raPKxO/2n2UUg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.4.1"
+      }
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-7.4.1.tgz",
+      "integrity": "sha512-Z9kbuxX2bvEsyeS3LZEiEnxG0lVtZbpYgaAnPj69N+A9f2De8Lta0EoFtld9zhfERVPIQWhSWUc8himky3qYdA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.4.1",
+        "@prisma/engines-version": "7.5.0-4.55ae170b1ced7fc6ed07a15f110549408c501bb3",
+        "@prisma/get-platform": "7.4.1"
+      }
+    },
+    "node_modules/@prisma/fetch-engine/node_modules/@prisma/get-platform": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-7.4.1.tgz",
+      "integrity": "sha512-kN4tmkQzlgm/KtE+jTNSYjsDxxe/5i6GApPI32BN9T0tlgsgSBtDJbjGBICttkAIjsh73dXf8raPKxO/2n2UUg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.4.1"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-7.2.0.tgz",
+      "integrity": "sha512-k1V0l0Td1732EHpAfi2eySTezyllok9dXb6UQanajkJQzPUGi3vO2z7jdkz67SypFTdmbnyGYxvEvYZdZsMAVA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "7.2.0"
+      }
+    },
+    "node_modules/@prisma/get-platform/node_modules/@prisma/debug": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-7.2.0.tgz",
+      "integrity": "sha512-YSGTiSlBAVJPzX4ONZmMotL+ozJwQjRmZweQNIq/ER0tQJKJynNkRB3kyvt37eOfsbMCXk3gnLF6J9OJ4QWftw==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/query-plan-executor": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@prisma/query-plan-executor/-/query-plan-executor-7.2.0.tgz",
+      "integrity": "sha512-EOZmNzcV8uJ0mae3DhTsiHgoNCuu1J9mULQpGCh62zN3PxPTd+qI9tJvk5jOst8WHKQNwJWR3b39t0XvfBB0WQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/studio-core": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@prisma/studio-core/-/studio-core-0.13.1.tgz",
+      "integrity": "sha512-agdqaPEePRHcQ7CexEfkX1RvSH9uWDb6pXrZnhCRykhDFAV0/0P3d07WtfiY8hZWb7oRU4v+NkT4cGFHkQJIPg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/node": {
+      "version": "24.10.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.13.tgz",
+      "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/node-cron": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/node-cron/-/node-cron-3.0.11.tgz",
+      "integrity": "sha512-0ikrnug3/IyneSHqCBeslAhlK2aBfYek1fGo4bP4QnZPmiqSGRK+Oy7ZMisLWkesffJvQ1cqAcBnJC+8+nxIAg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/nodemailer": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/pg": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.16.0.tgz",
+      "integrity": "sha512-RmhMd/wD+CF8Dfo+cVIy3RR5cl8CyfXQ0tGgW6XBL8L4LM/UTEbNXYRbLwU6w+CgrKBNbrQWt4FUtTfaU5jSYQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "pg-protocol": "*",
+        "pg-types": "^2.2.0"
+      }
+    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/ssh2": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/@types/ssh2/-/ssh2-1.15.5.tgz",
+      "integrity": "sha512-N1ASjp/nXH3ovBHddRJpli4ozpk6UdDYIX4RJWFa9L1YKnzdhTlVmiGHm4DZnj/jLbqZpes4aeR30EFGQtvhQQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^18.11.18"
+      }
+    },
+    "node_modules/@types/ssh2-sftp-client": {
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/@types/ssh2-sftp-client/-/ssh2-sftp-client-9.0.6.tgz",
+      "integrity": "sha512-4+KvXO/V77y9VjI2op2T8+RCGI/GXQAwR0q5Qkj/EJ5YSeyKszqZP6F8i3H3txYoBqjc7sgorqyvBP3+w1EHyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/ssh2": "^1.0.0"
+      }
+    },
+    "node_modules/@types/ssh2/node_modules/@types/node": {
+      "version": "18.19.130",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.130.tgz",
+      "integrity": "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/ssh2/node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
+      "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/type-utils": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.56.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
+      "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
+      "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.56.0",
+        "@typescript-eslint/types": "^8.56.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
+      "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
+      "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
+      "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
+      "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
+      "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.56.0",
+        "@typescript-eslint/tsconfig-utils": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
+      "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
+      "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/abstract-logging": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",
+      "integrity": "sha512-2BjRTZxTPvheOvGbBslFSYOUkr+SjPtOnrLP33f+VIWLzezQpZcqVg7ja3L4dBXmzzgwT+a029jRx5PCi3JuiA==",
+      "license": "MIT"
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "license": "MIT",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/atomic-sleep": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
+      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/avvio": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/avvio/-/avvio-9.2.0.tgz",
+      "integrity": "sha512-2t/sy01ArdHHE0vRH5Hsay+RtCZt3dLPji7W7/MMOCEgze5b7SNDC4j5H6FnVgPkI1MTNFGzHdHrVXDDl7QSSQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/error": "^4.0.0",
+        "fastq": "^1.17.1"
+      }
+    },
+    "node_modules/aws-ssl-profiles": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz",
+      "integrity": "sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/base-64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==",
+      "license": "MIT"
+    },
+    "node_modules/basic-ftp": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.1.0.tgz",
+      "integrity": "sha512-RkaJzeJKDbaDWTIPiJwubyljaEPwpVWkm9Rt5h9Nd6h7tEXTJ3VB4qxdZBioV7JO5yLUaOKwz7vDOzlncUsegw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
+    "node_modules/bn.js": {
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
+      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz",
+      "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/buildcheck": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/buildcheck/-/buildcheck-0.0.7.tgz",
+      "integrity": "sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA==",
+      "optional": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/byte-length/-/byte-length-1.0.2.tgz",
+      "integrity": "sha512-ovBpjmsgd/teRmgcPh23d4gJvxDoXtAzEL9xTfMU8Yc2kqCDb7L9jAG0XHl1nzuGl+h3ebCIF1i62UFyA9V/2Q==",
+      "license": "MIT"
+    },
+    "node_modules/c12": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
+      "integrity": "sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.3",
+        "confbox": "^0.2.2",
+        "defu": "^6.1.4",
+        "dotenv": "^16.6.1",
+        "exsolve": "^1.0.7",
+        "giget": "^2.0.0",
+        "jiti": "^2.4.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^2.2.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/c12/node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/chevrotain": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-10.5.0.tgz",
+      "integrity": "sha512-Pkv5rBY3+CsHOYfV5g/Vs5JY9WTHHDEKOlohI2XeygaZhUeqhAlldZ8Hz9cRmxu709bvS08YzxHdTPHhffc13A==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "10.5.0",
+        "@chevrotain/gast": "10.5.0",
+        "@chevrotain/types": "10.5.0",
+        "@chevrotain/utils": "10.5.0",
+        "lodash": "4.17.21",
+        "regexp-to-ast": "0.5.0"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "license": "MIT"
+    },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cpu-features": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cpu-features/-/cpu-features-0.0.10.tgz",
+      "integrity": "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "buildcheck": "~0.0.6",
+        "nan": "^2.19.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/dateformat": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
+      "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/deepmerge-ts": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
+      "integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==",
+      "devOptional": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/drizzle-kit": {
+      "version": "0.30.6",
+      "resolved": "https://registry.npmjs.org/drizzle-kit/-/drizzle-kit-0.30.6.tgz",
+      "integrity": "sha512-U4wWit0fyZuGuP7iNmRleQyK2V8wCuv57vf5l3MnG4z4fzNTjY/U13M8owyQ5RavqvqxBifWORaR3wIUzlN64g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@drizzle-team/brocli": "^0.10.2",
+        "@esbuild-kit/esm-loader": "^2.5.5",
+        "esbuild": "^0.19.7",
+        "esbuild-register": "^3.5.0",
+        "gel": "^2.0.0"
+      },
+      "bin": {
+        "drizzle-kit": "bin.cjs"
+      }
+    },
+    "node_modules/drizzle-orm": {
+      "version": "0.38.4",
+      "resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.38.4.tgz",
+      "integrity": "sha512-s7/5BpLKO+WJRHspvpqTydxFob8i1vo2rEx4pY6TGY7QSMuUfWUuzaY0DIpXCkgHOo37BaFC+SJQb99dDUXT3Q==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@aws-sdk/client-rds-data": ">=3",
+        "@cloudflare/workers-types": ">=4",
+        "@electric-sql/pglite": ">=0.2.0",
+        "@libsql/client": ">=0.10.0",
+        "@libsql/client-wasm": ">=0.10.0",
+        "@neondatabase/serverless": ">=0.10.0",
+        "@op-engineering/op-sqlite": ">=2",
+        "@opentelemetry/api": "^1.4.1",
+        "@planetscale/database": ">=1",
+        "@prisma/client": "*",
+        "@tidbcloud/serverless": "*",
+        "@types/better-sqlite3": "*",
+        "@types/pg": "*",
+        "@types/react": ">=18",
+        "@types/sql.js": "*",
+        "@vercel/postgres": ">=0.8.0",
+        "@xata.io/client": "*",
+        "better-sqlite3": ">=7",
+        "bun-types": "*",
+        "expo-sqlite": ">=14.0.0",
+        "knex": "*",
+        "kysely": "*",
+        "mysql2": ">=2",
+        "pg": ">=8",
+        "postgres": ">=3",
+        "react": ">=18",
+        "sql.js": ">=1",
+        "sqlite3": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "@aws-sdk/client-rds-data": {
+          "optional": true
+        },
+        "@cloudflare/workers-types": {
+          "optional": true
+        },
+        "@electric-sql/pglite": {
+          "optional": true
+        },
+        "@libsql/client": {
+          "optional": true
+        },
+        "@libsql/client-wasm": {
+          "optional": true
+        },
+        "@neondatabase/serverless": {
+          "optional": true
+        },
+        "@op-engineering/op-sqlite": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@planetscale/database": {
+          "optional": true
+        },
+        "@prisma/client": {
+          "optional": true
+        },
+        "@tidbcloud/serverless": {
+          "optional": true
+        },
+        "@types/better-sqlite3": {
+          "optional": true
+        },
+        "@types/pg": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "@types/sql.js": {
+          "optional": true
+        },
+        "@vercel/postgres": {
+          "optional": true
+        },
+        "@xata.io/client": {
+          "optional": true
+        },
+        "better-sqlite3": {
+          "optional": true
+        },
+        "bun-types": {
+          "optional": true
+        },
+        "expo-sqlite": {
+          "optional": true
+        },
+        "knex": {
+          "optional": true
+        },
+        "kysely": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "pg": {
+          "optional": true
+        },
+        "postgres": {
+          "optional": true
+        },
+        "prisma": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "sql.js": {
+          "optional": true
+        },
+        "sqlite3": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/duplexify": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
+      "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.2"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/effect": {
+      "version": "3.18.4",
+      "resolved": "https://registry.npmjs.org/effect/-/effect-3.18.4.tgz",
+      "integrity": "sha512-b1LXQJLe9D11wfnOKAk3PKxuqYshQ0Heez+y5pnkd3jLj1yx9QhM72zZ9uUrOQyNvrs2GZZd/3maL0ZV18YuDA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "fast-check": "^3.23.1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/empathic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/empathic/-/empathic-2.0.0.tgz",
+      "integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
+      "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
+      }
+    },
+    "node_modules/esbuild-register": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.0.1.tgz",
+      "integrity": "sha512-20MV9SUdeN6Jd84xESsKhRly+/vxI+hwvpBMA93s+9dAcjdCuCojn4IqUGS3lvVaqjVYGYHSRMCpeFtF2rQYxQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.2",
+        "@eslint/config-helpers": "^0.5.2",
+        "@eslint/core": "^1.1.0",
+        "@eslint/plugin-kit": "^0.6.0",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^9.1.1",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.1.1",
+        "esquery": "^1.7.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "minimatch": "^10.2.1",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.1.tgz",
+      "integrity": "sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/espree": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.1.1.tgz",
+      "integrity": "sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-check": {
+      "version": "3.23.2",
+      "resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.23.2.tgz",
+      "integrity": "sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "pure-rand": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/fast-copy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-4.0.2.tgz",
+      "integrity": "sha512-ybA6PDXIXOXivLJK/z9e+Otk7ve13I4ckBvGO5I2RRmBU1gMHLVDJYEuJYhGwez7YNlYji2M2DvVU+a9mSFDlw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-decode-uri-component": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
+      "integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/fast-json-stringify": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-6.3.0.tgz",
+      "integrity": "sha512-oRCntNDY/329HJPlmdNLIdogNtt6Vyjb1WuT01Soss3slIdyUp8kAcDU3saQTOquEK8KFVfwIIF7FebxUAu+yA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/merge-json-schemas": "^0.2.0",
+        "ajv": "^8.12.0",
+        "ajv-formats": "^3.0.1",
+        "fast-uri": "^3.0.0",
+        "json-schema-ref-resolver": "^3.0.0",
+        "rfdc": "^1.2.0"
+      }
+    },
+    "node_modules/fast-json-stringify/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fast-json-stringify/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/fast-jwt": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/fast-jwt/-/fast-jwt-5.0.6.tgz",
+      "integrity": "sha512-LPE7OCGUl11q3ZgW681cEU2d0d2JZ37hhJAmetCgNyW8waVaJVZXhyFF6U2so1Iim58Yc7pfxJe2P7MNetQH2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@lukeed/ms": "^2.0.2",
+        "asn1.js": "^5.4.1",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "mnemonist": "^0.40.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/fast-querystring": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.1.2.tgz",
+      "integrity": "sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-decode-uri-component": "^1.0.1"
+      }
+    },
+    "node_modules/fast-safe-stringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
+      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.7.tgz",
+      "integrity": "sha512-JzVLro9NQv92pOM/jTCR6mHlJh2FGwtomH8ZQjhFj/R29P2Fnj38OgPJVtcvYw6SuKClhgYuwUZf5b3rd8u2mA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "strnum": "^2.1.2"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
+    "node_modules/fastfall": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/fastfall/-/fastfall-1.5.1.tgz",
+      "integrity": "sha512-KH6p+Z8AKPXnmA7+Iz2Lh8ARCMr+8WNPVludm1LGkZoD2MjY6LVnRMtTKhkdzI+jr0RzQWXKzKyBJm1zoHEL4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "reusify": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fastify": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/fastify/-/fastify-5.7.4.tgz",
+      "integrity": "sha512-e6l5NsRdaEP8rdD8VR0ErJASeyaRbzXYpmkrpr2SuvuMq6Si3lvsaVy5C+7gLanEkvjpMDzBXWE5HPeb/hgTxA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/ajv-compiler": "^4.0.5",
+        "@fastify/error": "^4.0.0",
+        "@fastify/fast-json-stringify-compiler": "^5.0.0",
+        "@fastify/proxy-addr": "^5.0.0",
+        "abstract-logging": "^2.0.1",
+        "avvio": "^9.0.0",
+        "fast-json-stringify": "^6.0.0",
+        "find-my-way": "^9.0.0",
+        "light-my-request": "^6.0.0",
+        "pino": "^10.1.0",
+        "process-warning": "^5.0.0",
+        "rfdc": "^1.3.1",
+        "secure-json-parse": "^4.0.0",
+        "semver": "^7.6.0",
+        "toad-cache": "^3.7.0"
+      }
+    },
+    "node_modules/fastify-cloudflare-turnstile": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastify-cloudflare-turnstile/-/fastify-cloudflare-turnstile-2.0.2.tgz",
+      "integrity": "sha512-TshbsPhcYfqkn4uuzj3mr79a9Ow6v8nAuylVHnQZCZBoOTfnIv5X7DozfhCuuI9hfKxHDMTtFpKYxkj16UtLVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fastify-plugin": "^5.0.1",
+        "undici": "^6.9.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/fastify-cloudflare-turnstile/node_modules/undici": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.23.0.tgz",
+      "integrity": "sha512-VfQPToRA5FZs/qJxLIinmU59u0r7LXqoJkCzinq3ckNJp3vKEh7jTWN589YQ5+aoAC/TGRLyJLCPKcLQbM8r9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/fastify-plugin": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/fastify-plugin/-/fastify-plugin-5.1.0.tgz",
+      "integrity": "sha512-FAIDA8eovSt5qcDgcBvDuX/v0Cjz0ohGhENZ/wpc3y+oZCY2afZ9Baqql3g/lC+OHRnciQol4ww7tuthOb9idw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/fastparallel": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/fastparallel/-/fastparallel-2.4.1.tgz",
+      "integrity": "sha512-qUmhxPgNHmvRjZKBFUNI0oZuuH9OlSIOXmJ98lhKPxMZZ7zS/Fi0wRHOihDSz0R1YiIOjxzOY4bq65YTcdBi2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fastseries": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/fastseries/-/fastseries-1.7.2.tgz",
+      "integrity": "sha512-dTPFrPGS8SNSzAt7u/CbMKCJ3s01N04s4JFbORHcmyvVfVKmbhMD1VtRbh5enGHxkaQDqWyLefiKOGGmohGDDQ==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/find-my-way": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/find-my-way/-/find-my-way-9.5.0.tgz",
+      "integrity": "sha512-VW2RfnmscZO5KgBY5XVyKREMW5nMZcxDy+buTOsL+zIPnBlbKm+00sgzoQzq1EVh4aALZLfKdwv6atBGcjvjrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-querystring": "^1.0.0",
+        "safe-regex2": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gel": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/gel/-/gel-2.2.0.tgz",
+      "integrity": "sha512-q0ma7z2swmoamHQusey8ayo8+ilVdzDt4WTxSPzq/yRqvucWRfymRVMvNgmSC0XK7eNjjEZEcplxpgaNojKdmQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@petamoriken/float16": "^3.8.7",
+        "debug": "^4.3.4",
+        "env-paths": "^3.0.0",
+        "semver": "^7.6.2",
+        "shell-quote": "^1.8.1",
+        "which": "^4.0.0"
+      },
+      "bin": {
+        "gel": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      }
+    },
+    "node_modules/gel/node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gel/node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-property": "^1.0.2"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-port-please": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.2.0.tgz",
+      "integrity": "sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.6.tgz",
+      "integrity": "sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/giget": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
+      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "defu": "^6.1.4",
+        "node-fetch-native": "^1.6.6",
+        "nypm": "^0.6.0",
+        "pathe": "^2.0.3"
+      },
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/glob": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "foreground-child": "^3.3.1",
+        "jackspeak": "^4.1.1",
+        "minimatch": "^10.1.1",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "devOptional": true,
+      "license": "ISC"
+    },
+    "node_modules/grammex": {
+      "version": "3.1.12",
+      "resolved": "https://registry.npmjs.org/grammex/-/grammex-3.1.12.tgz",
+      "integrity": "sha512-6ufJOsSA7LcQehIJNCO7HIBykfM7DXQual0Ny780/DEcJIpBlHRvcqEBWGPYd7hrXL2GJ3oJI1MIhaXjWmLQOQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/graphmatch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/graphmatch/-/graphmatch-1.1.1.tgz",
+      "integrity": "sha512-5ykVn/EXM1hF0XCaWh05VbYvEiOL2lY1kBxZtaYsyvjp7cmWOU1XsAdfQBwClraEofXDT197lFbXOEVMHpvQOg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/helmet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/help-me": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
+      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
+      "license": "MIT"
+    },
+    "node_modules/hono": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.4.tgz",
+      "integrity": "sha512-U7tt8JsyrxSRKspfhtLET79pU8K+tInj5QZXs1jSugO1Vq5dFj3kmZsRldo29mTBfcjDRVRXrEZ6LS63Cog9ZA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
+    "node_modules/hot-patcher": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/hot-patcher/-/hot-patcher-2.0.1.tgz",
+      "integrity": "sha512-ECg1JFG0YzehicQaogenlcs2qg6WsXQsxtnbr1i696u5tLUjtJdQAh0u2g0Q5YV45f263Ta1GnUJsc8WIfJf4Q==",
+      "license": "MIT"
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/http-status-codes": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+      "integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ip-address": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.3.0.tgz",
+      "integrity": "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.2.3.tgz",
+      "integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^9.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/joycon": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
+      "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/js-base64": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
+      "integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/json-schema-ref-resolver": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-ref-resolver/-/json-schema-ref-resolver-3.0.0.tgz",
+      "integrity": "sha512-hOrZIVL5jyYFjzk7+y7n5JDzGlU8rfWDuYyHwGa2WA8/pcmMHezp2xsVwxrebD/Q9t8Nc5DboieySDpCp4WG4A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "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"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/layerr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/layerr/-/layerr-3.0.0.tgz",
+      "integrity": "sha512-tv754Ki2dXpPVApOrjTyRo4/QegVb9eVFq4mjqp4+NM5NaX7syQvN5BBNfV/ZpAHCEHV24XdUVrBAoka4jt3pA==",
+      "license": "MIT"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/libsql": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/libsql/-/libsql-0.4.7.tgz",
+      "integrity": "sha512-T9eIRCs6b0J1SHKYIvD8+KCJMcWZ900iZyxdnSCdqxN12Z1ijzT+jY5nrk72Jw4B0HGzms2NgpryArlJqvc3Lw==",
+      "cpu": [
+        "x64",
+        "arm64",
+        "wasm32"
+      ],
+      "license": "MIT",
+      "os": [
+        "darwin",
+        "linux",
+        "win32"
+      ],
+      "dependencies": {
+        "@neon-rs/load": "^0.0.4",
+        "detect-libc": "2.0.2"
+      },
+      "optionalDependencies": {
+        "@libsql/darwin-arm64": "0.4.7",
+        "@libsql/darwin-x64": "0.4.7",
+        "@libsql/linux-arm64-gnu": "0.4.7",
+        "@libsql/linux-arm64-musl": "0.4.7",
+        "@libsql/linux-x64-gnu": "0.4.7",
+        "@libsql/linux-x64-musl": "0.4.7",
+        "@libsql/win32-x64-msvc": "0.4.7"
+      }
+    },
+    "node_modules/light-my-request": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-6.6.0.tgz",
+      "integrity": "sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "process-warning": "^4.0.0",
+        "set-cookie-parser": "^2.6.0"
+      }
+    },
+    "node_modules/light-my-request/node_modules/process-warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-4.0.1.tgz",
+      "integrity": "sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lru.min": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.4.tgz",
+      "integrity": "sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "bun": ">=1.0.0",
+        "deno": ">=1.30.0",
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wellwelwel"
+      }
+    },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.6.tgz",
+      "integrity": "sha512-kQAVowdR33euIqeA0+VZTDqU+qo1IeVY+hrKYtZMio3Pg0P0vuh/kwRylLUddJhB6pf3q/botcOvRtx4IN1wqQ==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mnemonist": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/mnemonist/-/mnemonist-0.40.0.tgz",
+      "integrity": "sha512-kdd8AFNig2AD5Rkih7EPCXhu/iMvwevQFX/uEiGhZyPZi7fHqOoF4V4kHLpCfysxXMgQ4B52kdPMCwARshKvEg==",
+      "license": "MIT",
+      "dependencies": {
+        "obliterator": "^2.0.4"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/mysql2": {
+      "version": "3.15.3",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.15.3.tgz",
+      "integrity": "sha512-FBrGau0IXmuqg4haEZRBfHNWB5mUARw6hNwPDXXGg0XzVJ50mr/9hb267lvpVMnhZ1FON3qNd4Xfcez1rbFwSg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "aws-ssl-profiles": "^1.1.1",
+        "denque": "^2.1.0",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.7.0",
+        "long": "^5.2.1",
+        "lru.min": "^1.0.0",
+        "named-placeholders": "^1.1.3",
+        "seq-queue": "^0.0.5",
+        "sqlstring": "^2.3.2"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/named-placeholders": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.6.tgz",
+      "integrity": "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "lru.min": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/nan": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.25.0.tgz",
+      "integrity": "sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/nanoid": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
+      "integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nested-property": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
+      "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA==",
+      "license": "MIT"
+    },
+    "node_modules/node-cron": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
+      "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/nodemailer": {
+      "version": "7.0.13",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.13.tgz",
+      "integrity": "sha512-PNDFSJdP+KFgdsG3ZzMXCgquO7I6McjY2vlqILjtJd0hy8wEvtugS9xKRF2NWlPNGxvLCXlTNIae4serI7dinw==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/nypm": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.5.tgz",
+      "integrity": "sha512-K6AJy1GMVyfyMXRVB88700BJqNUkByijGJM8kEHpLdcAt+vSQAVfkWWHYzuRXHSY6xA2sNc5RjTj0p9rE2izVQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.2.0",
+        "pathe": "^2.0.3",
+        "tinyexec": "^1.0.2"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/nypm/node_modules/citty": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz",
+      "integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/obliterator": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/obliterator/-/obliterator-2.0.5.tgz",
+      "integrity": "sha512-42CPE9AhahZRsMNslczq0ctAEtqk8Eka26QofnqC346BZdHDySk3LWka23LI7ULIw11NmltpiLagIq8gBozxTw==",
+      "license": "MIT"
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/on-exit-leak-free": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
+      "integrity": "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/otplib": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/otplib/-/otplib-12.0.1.tgz",
+      "integrity": "sha512-xDGvUOQjop7RDgxTQ+o4pOol0/3xSZzawTiPKRrHnQWAy0WjhNs/5HdIDJCrqC4MBynmjXgULc6YfioaxZeFgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@otplib/core": "^12.0.1",
+        "@otplib/preset-default": "^12.0.1",
+        "@otplib/preset-v11": "^12.0.1"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-7.3.0.tgz",
+      "integrity": "sha512-7cIXg/Z0M5WZRblrsOla88S4wAK+zOQQWeBYfV3qJuJXMr+LnbYjaadrFaS0JILfEDPVqHyKnZ1Z/1d6J9VVUw==",
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate/node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-posix": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/path-posix/-/path-posix-1.0.0.tgz",
+      "integrity": "sha512-1gJ0WpNIiYcQydgg3Ed8KzvIqTsDpNwq+cjBCssvBtuTWjEqY1AW+i+OepiEMqDCzyro9B2sLAe4RBPajMYFiA==",
+      "license": "ISC"
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/pg": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.18.0.tgz",
+      "integrity": "sha512-xqrUDL1b9MbkydY/s+VZ6v+xiMUmOUk7SS9d/1kpyQxoJ6U9AO1oIJyUWVZojbfe5Cc/oluutcgFG4L9RDP1iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-connection-string": "^2.11.0",
+        "pg-pool": "^3.11.0",
+        "pg-protocol": "^1.11.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.11.0.tgz",
+      "integrity": "sha512-kecgoJwhOpxYU21rZjULrmrBJ698U2RxXofKVzOn5UDj61BPj/qMb7diYUR1nLScCDbrztQFl1TaQZT0t1EtzQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.11.0.tgz",
+      "integrity": "sha512-MJYfvHwtGp870aeusDh+hg9apvOe2zmpZJpyt+BMtzUWlVqbhFmMK6bOBXLBUPd7iRtIF9fZplDc7KrPN3PN7w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.11.0.tgz",
+      "integrity": "sha512-pfsxk2M9M3BuGgDOfuy37VNRRX3jmKgMjcvAcWqNDpZSf4cUmv8HSOl5ViRQFsfARFn0KuUQTgLxVMbNq5NW3g==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pg-types/node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pino": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/pino/-/pino-10.3.1.tgz",
+      "integrity": "sha512-r34yH/GlQpKZbU1BvFFqOjhISRo1MNx1tWYsYvmj6KIRHSPMT2+yHOEb1SG6NMvRoHRF0a07kCOox/9yakl1vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@pinojs/redact": "^0.4.0",
+        "atomic-sleep": "^1.0.0",
+        "on-exit-leak-free": "^2.1.0",
+        "pino-abstract-transport": "^3.0.0",
+        "pino-std-serializers": "^7.0.0",
+        "process-warning": "^5.0.0",
+        "quick-format-unescaped": "^4.0.3",
+        "real-require": "^0.2.0",
+        "safe-stable-stringify": "^2.3.1",
+        "sonic-boom": "^4.0.1",
+        "thread-stream": "^4.0.0"
+      },
+      "bin": {
+        "pino": "bin.js"
+      }
+    },
+    "node_modules/pino-abstract-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-3.0.0.tgz",
+      "integrity": "sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.0.0"
+      }
+    },
+    "node_modules/pino-pretty": {
+      "version": "13.1.3",
+      "resolved": "https://registry.npmjs.org/pino-pretty/-/pino-pretty-13.1.3.tgz",
+      "integrity": "sha512-ttXRkkOz6WWC95KeY9+xxWL6AtImwbyMHrL1mSwqwW9u+vLp/WIElvHvCSDg0xO/Dzrggz1zv3rN5ovTRVowKg==",
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.7",
+        "dateformat": "^4.6.3",
+        "fast-copy": "^4.0.0",
+        "fast-safe-stringify": "^2.1.1",
+        "help-me": "^5.0.0",
+        "joycon": "^3.1.1",
+        "minimist": "^1.2.6",
+        "on-exit-leak-free": "^2.1.0",
+        "pino-abstract-transport": "^3.0.0",
+        "pump": "^3.0.0",
+        "secure-json-parse": "^4.0.0",
+        "sonic-boom": "^4.0.1",
+        "strip-json-comments": "^5.0.2"
+      },
+      "bin": {
+        "pino-pretty": "bin.js"
+      }
+    },
+    "node_modules/pino-std-serializers": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-7.1.0.tgz",
+      "integrity": "sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==",
+      "license": "MIT"
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/postgres": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.7.tgz",
+      "integrity": "sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==",
+      "devOptional": true,
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/porsager"
+      }
+    },
+    "node_modules/postgres-array": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.4.tgz",
+      "integrity": "sha512-nAUSGfSDGOaOAEGwqsRY27GPOea7CNipJPOA7lPbdEpx5Kg3qzdP0AaWC5MlhTWV9s4hFX39nomVZ+C4tnGOJQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prisma": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-7.4.1.tgz",
+      "integrity": "sha512-gDKOXwnPiMdB+uYMhMeN8jj4K7Cu3Q2wB/wUsITOoOk446HtVb8T9BZxFJ1Zop6alc89k6PMNdR2FZCpbXp/jw==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/config": "7.4.1",
+        "@prisma/dev": "0.20.0",
+        "@prisma/engines": "7.4.1",
+        "@prisma/studio-core": "0.13.1",
+        "mysql2": "3.15.3",
+        "postgres": "3.4.7"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": "^20.19 || ^22.12 || >=24.0"
+      },
+      "peerDependencies": {
+        "better-sqlite3": ">=9.0.0",
+        "typescript": ">=5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "better-sqlite3": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/process-warning": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/process-warning/-/process-warning-5.0.0.tgz",
+      "integrity": "sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/promise-limit": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/promise-limit/-/promise-limit-2.7.0.tgz",
+      "integrity": "sha512-7nJ6v5lnJsXwGprnGXga4wx6d1POjvi5Qmf1ivTRxTjH4Z/9Czja/UCMLVmB9N93GeWOU93XaFaEt6jbuoagNw==",
+      "license": "ISC"
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/proper-lockfile/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "devOptional": true,
+      "license": "ISC"
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pure-rand": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
+      "integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
+    "node_modules/quick-format-unescaped": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz",
+      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==",
+      "license": "MIT"
+    },
+    "node_modules/rc9": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
+      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/real-require": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz",
+      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/regexp-to-ast": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz",
+      "integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/remeda": {
+      "version": "2.33.4",
+      "resolved": "https://registry.npmjs.org/remeda/-/remeda-2.33.4.tgz",
+      "integrity": "sha512-ygHswjlc/opg2VrtiYvUOPLjxjtdKvjGz1/plDhkG66hjNjFr1xmfrs2ClNFo/E6TyUFiwYNh53bKV26oBoMGQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/remeda"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/ret": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.5.0.tgz",
+      "integrity": "sha512-I1XxrZSQ+oErkRR4jYbAyEEu2I0avBvvMM5JN+6EBprOGRCs63ENqZ3vjavq8fBw2+62G5LF5XelKwuJpcvcxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-regex2": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex2/-/safe-regex2-5.0.0.tgz",
+      "integrity": "sha512-YwJwe5a51WlK7KbOJREPdjNrpViQBI3p4T50lfwPuDhZnE3XGVTlGvi+aolc5+RvxDD6bnUmjVsU9n1eboLUYw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "ret": "~0.5.0"
+      }
+    },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/secure-json-parse": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-4.1.0.tgz",
+      "integrity": "sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==",
+      "devOptional": true
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sonic-boom": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.1.tgz",
+      "integrity": "sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "atomic-sleep": "^1.0.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/sqlstring": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ssh2": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.17.0.tgz",
+      "integrity": "sha512-wPldCk3asibAjQ/kziWQQt1Wh3PgDFpC0XpwclzKcdT1vql6KeYxf5LIt4nlFkUeR8WuphYMKqUA56X4rjbfgQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "asn1": "^0.2.6",
+        "bcrypt-pbkdf": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      },
+      "optionalDependencies": {
+        "cpu-features": "~0.0.10",
+        "nan": "^2.23.0"
+      }
+    },
+    "node_modules/ssh2-sftp-client": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ssh2-sftp-client/-/ssh2-sftp-client-11.0.0.tgz",
+      "integrity": "sha512-lOjgNYtioYquhtgyHwPryFNhllkuENjvCKkUXo18w/Q4UpEffCnEUBfiOTlwFdKIhG1rhrOGnA6DeKPSF2CP6w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "concat-stream": "^2.0.0",
+        "promise-retry": "^2.0.1",
+        "ssh2": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=18.20.4"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://square.link/u/4g7sPflL"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/steed": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/steed/-/steed-1.1.3.tgz",
+      "integrity": "sha512-EUkci0FAUiE4IvGTSKcDJIQ/eRUP2JJb56+fvZ4sdnguLTqIdKjSxUe138poW8mkvKWXW2sFPrgTsxqoISnmoA==",
+      "license": "MIT",
+      "dependencies": {
+        "fastfall": "^1.5.0",
+        "fastparallel": "^2.2.0",
+        "fastq": "^1.3.0",
+        "fastseries": "^1.7.0",
+        "reusify": "^1.0.0"
+      }
+    },
+    "node_modules/stream-shift": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
+      "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==",
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.3.tgz",
+      "integrity": "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strnum": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
+      "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/thirty-two": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/thirty-two/-/thirty-two-1.0.2.tgz",
+      "integrity": "sha512-OEI0IWCe+Dw46019YLl6V10Us5bi574EvlJEOcAkB29IzQ/mYD1A6RyNHLjZPiHCmuodxvgF6U+vZO1L15lxVA==",
+      "engines": {
+        "node": ">=0.2.6"
+      }
+    },
+    "node_modules/thread-stream": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-4.0.0.tgz",
+      "integrity": "sha512-4iMVL6HAINXWf1ZKZjIPcz5wYaOdPhtO8ATvZ+Xqp3BTdaqtAwQkNmKORqcIo5YkQqGXq5cwfswDwMqqQNrpJA==",
+      "license": "MIT",
+      "dependencies": {
+        "real-require": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/toad-cache": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/toad-cache/-/toad-cache-3.7.0.tgz",
+      "integrity": "sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tsx": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.27.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/esbuild": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+      "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.3",
+        "@esbuild/android-arm": "0.27.3",
+        "@esbuild/android-arm64": "0.27.3",
+        "@esbuild/android-x64": "0.27.3",
+        "@esbuild/darwin-arm64": "0.27.3",
+        "@esbuild/darwin-x64": "0.27.3",
+        "@esbuild/freebsd-arm64": "0.27.3",
+        "@esbuild/freebsd-x64": "0.27.3",
+        "@esbuild/linux-arm": "0.27.3",
+        "@esbuild/linux-arm64": "0.27.3",
+        "@esbuild/linux-ia32": "0.27.3",
+        "@esbuild/linux-loong64": "0.27.3",
+        "@esbuild/linux-mips64el": "0.27.3",
+        "@esbuild/linux-ppc64": "0.27.3",
+        "@esbuild/linux-riscv64": "0.27.3",
+        "@esbuild/linux-s390x": "0.27.3",
+        "@esbuild/linux-x64": "0.27.3",
+        "@esbuild/netbsd-arm64": "0.27.3",
+        "@esbuild/netbsd-x64": "0.27.3",
+        "@esbuild/openbsd-arm64": "0.27.3",
+        "@esbuild/openbsd-x64": "0.27.3",
+        "@esbuild/openharmony-arm64": "0.27.3",
+        "@esbuild/sunos-x64": "0.27.3",
+        "@esbuild/win32-arm64": "0.27.3",
+        "@esbuild/win32-ia32": "0.27.3",
+        "@esbuild/win32-x64": "0.27.3"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "license": "Unlicense"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
+      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/url-join": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-5.0.0.tgz",
+      "integrity": "sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/valibot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.2.0.tgz",
+      "integrity": "sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/webdav": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/webdav/-/webdav-5.9.0.tgz",
+      "integrity": "sha512-OMJ6wtK1WvCO++aOLoQgE96S8KT4e5aaClWHmHXfFU369r4eyELN569B7EqT4OOUb99mmO58GkyuiCv/Ag6J0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@buttercup/fetch": "^0.2.1",
+        "base-64": "^1.0.0",
+        "byte-length": "^1.0.2",
+        "entities": "^6.0.1",
+        "fast-xml-parser": "^5.3.4",
+        "hot-patcher": "^2.0.1",
+        "layerr": "^3.0.0",
+        "md5": "^2.3.0",
+        "minimatch": "^9.0.5",
+        "nested-property": "^4.0.0",
+        "node-fetch": "^3.3.2",
+        "path-posix": "^1.0.0",
+        "url-join": "^5.0.0",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zeptomatch": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/zeptomatch/-/zeptomatch-2.1.0.tgz",
+      "integrity": "sha512-KiGErG2J0G82LSpniV0CtIzjlJ10E04j02VOudJsPyPwNZgGnRKQy7I1R7GMyg/QswnE4l7ohSGrQbQbjXPPDA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "grammex": "^3.1.11",
+        "graphmatch": "^1.1.0"
+      }
+    }
+  }
+}
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 0000000..6ee1e88
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,77 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "Incudal 后端服务",
+  "type": "module",
+  "main": "dist/app.js",
+  "types": "dist/app.d.ts",
+  "scripts": {
+    "postinstall": "prisma generate",
+    "dev": "cross-env NODE_ENV=development JWT_SECRET=dev-secret-12345678 PORT=8888 tsx watch src/app.ts",
+    "start": "node dist/app.js",
+    "build": "tsc",
+    "type-check": "tsc --noEmit",
+    "migrate:data": "tsx scripts/migrate-data.ts",
+    "backfill:instance-network": "tsx scripts/backfill-instance-network-addresses.ts",
+    "fix:migrated-billing": "tsx scripts/fix-migrated-instance-billing.ts",
+    "reset:db": "tsx scripts/reset-db.ts",
+    "seed:test-data": "tsx scripts/seed-test-data.ts",
+    "seed:bulk-local-data": "tsx scripts/seed-bulk-local-data.ts",
+    "update:admin-quota": "tsx scripts/update-admin-quota.ts",
+    "test:prisma": "tsx scripts/test-prisma.ts",
+    "test:app": "tsx scripts/test-app-start.ts",
+    "test:agent-auth": "tsx scripts/test-agent-auth.ts",
+    "test:security-config": "tsx scripts/test-security-config.ts",
+    "test:api": "tsx scripts/test-api.ts",
+    "analyze:queries": "tsx scripts/analyze-queries.ts"
+  },
+  "dependencies": {
+    "@fastify/cookie": "^11.0.2",
+    "@fastify/cors": "^10.0.1",
+    "@fastify/helmet": "^13.0.2",
+    "@fastify/jwt": "^9.0.1",
+    "@fastify/multipart": "^9.0.3",
+    "@fastify/rate-limit": "^10.3.0",
+    "@fastify/static": "^8.0.3",
+    "@fastify/websocket": "^11.0.1",
+    "@libsql/client": "^0.14.0",
+    "@prisma/adapter-pg": "^7.1.0",
+    "@prisma/client": "^7.1.0",
+    "@types/ws": "^8.18.1",
+    "basic-ftp": "^5.0.5",
+    "bcryptjs": "^2.4.3",
+    "dotenv": "^17.2.3",
+    "drizzle-orm": "^0.38.2",
+    "fastify": "^5.1.0",
+    "fastify-cloudflare-turnstile": "^2.0.2",
+    "ip-address": "^10.1.0",
+    "jsonwebtoken": "^9.0.3",
+    "nanoid": "^5.1.6",
+    "node-cron": "^4.2.1",
+    "nodemailer": "^7.0.11",
+    "otplib": "^12.0.1",
+    "p-limit": "^7.2.0",
+    "pg": "^8.16.3",
+    "pino-pretty": "^13.0.0",
+    "qrcode": "^1.5.4",
+    "ssh2-sftp-client": "^11.0.0",
+    "undici": "^7.1.0",
+    "webdav": "^5.8.0",
+    "ws": "^8.18.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/node-cron": "^3.0.11",
+    "@types/nodemailer": "^7.0.4",
+    "@types/pg": "^8.15.6",
+    "@types/qrcode": "^1.5.6",
+    "@types/ssh2-sftp-client": "^9.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "cross-env": "^10.1.0",
+    "drizzle-kit": "^0.30.1",
+    "prisma": "^7.1.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/server/prisma.config.ts b/server/prisma.config.ts
new file mode 100644
index 0000000..35d4beb
--- /dev/null
+++ b/server/prisma.config.ts
@@ -0,0 +1,15 @@
+// This file was generated by Prisma and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig, env } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: env("DATABASE_URL"),
+    provider: "postgresql",
+  },
+});
diff --git a/server/prisma/migrations/20241209000000_add_email_verification_codes/migration.sql b/server/prisma/migrations/20241209000000_add_email_verification_codes/migration.sql
new file mode 100644
index 0000000..9235386
--- /dev/null
+++ b/server/prisma/migrations/20241209000000_add_email_verification_codes/migration.sql
@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "email_verification_codes" (
+    "id" SERIAL NOT NULL,
+    "email" TEXT NOT NULL,
+    "code" TEXT NOT NULL,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "email_verification_codes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "email_verification_codes_email_code_idx" ON "email_verification_codes"("email", "code");
+
+-- CreateIndex
+CREATE INDEX "email_verification_codes_expires_at_idx" ON "email_verification_codes"("expires_at");
+
diff --git a/server/prisma/migrations/20251206045256_init/migration.sql b/server/prisma/migrations/20251206045256_init/migration.sql
new file mode 100644
index 0000000..38a6f27
--- /dev/null
+++ b/server/prisma/migrations/20251206045256_init/migration.sql
@@ -0,0 +1,535 @@
+-- CreateEnum
+CREATE TYPE "UserRole" AS ENUM ('admin', 'user');
+
+-- CreateEnum
+CREATE TYPE "UserStatus" AS ENUM ('active', 'banned');
+
+-- CreateEnum
+CREATE TYPE "HostStatus" AS ENUM ('online', 'offline', 'maintenance');
+
+-- CreateEnum
+CREATE TYPE "InstanceType" AS ENUM ('container', 'vm', 'both');
+
+-- CreateEnum
+CREATE TYPE "NetworkMode" AS ENUM ('nat', 'ipv6', 'dual');
+
+-- CreateEnum
+CREATE TYPE "InstanceStatus" AS ENUM ('creating', 'running', 'stopped', 'error', 'deleted');
+
+-- CreateEnum
+CREATE TYPE "Protocol" AS ENUM ('tcp', 'udp');
+
+-- CreateEnum
+CREATE TYPE "BackupStatus" AS ENUM ('creating', 'ready', 'error', 'deleted');
+
+-- CreateEnum
+CREATE TYPE "NotificationChannelType" AS ENUM ('telegram', 'discord', 'email', 'webhook');
+
+-- CreateEnum
+CREATE TYPE "NotificationLogStatus" AS ENUM ('pending', 'sent', 'failed');
+
+-- CreateEnum
+CREATE TYPE "OAuthProvider" AS ENUM ('github', 'google');
+
+-- CreateEnum
+CREATE TYPE "HostImageStatus" AS ENUM ('pending', 'syncing', 'ready', 'error');
+
+-- CreateTable
+CREATE TABLE "users" (
+    "id" SERIAL NOT NULL,
+    "username" TEXT NOT NULL,
+    "email" TEXT,
+    "password_hash" TEXT NOT NULL,
+    "role" "UserRole" NOT NULL DEFAULT 'user',
+    "status" "UserStatus" NOT NULL DEFAULT 'active',
+    "balance" DECIMAL(10,2) NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "users_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "user_quotas" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "cpu_limit" INTEGER NOT NULL DEFAULT 20,
+    "cpu_used" INTEGER NOT NULL DEFAULT 0,
+    "memory_limit" INTEGER NOT NULL DEFAULT 102400,
+    "memory_used" INTEGER NOT NULL DEFAULT 0,
+    "disk_limit" INTEGER NOT NULL DEFAULT 512000,
+    "disk_used" INTEGER NOT NULL DEFAULT 0,
+    "instance_limit" INTEGER NOT NULL DEFAULT 10,
+    "instance_used" INTEGER NOT NULL DEFAULT 0,
+    "port_limit" INTEGER NOT NULL DEFAULT 20,
+    "port_used" INTEGER NOT NULL DEFAULT 0,
+    "snapshot_limit" INTEGER NOT NULL DEFAULT 50,
+    "snapshot_used" INTEGER NOT NULL DEFAULT 0,
+    "backup_limit" INTEGER NOT NULL DEFAULT 30,
+    "backup_used" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "user_quotas_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "invite_codes" (
+    "id" SERIAL NOT NULL,
+    "code" TEXT NOT NULL,
+    "created_by" INTEGER NOT NULL,
+    "used_by" INTEGER,
+    "used_at" TIMESTAMP(3),
+    "expires_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "invite_codes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ssh_keys" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "public_key" TEXT NOT NULL,
+    "fingerprint" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ssh_keys_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "node_groups" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "color" TEXT NOT NULL DEFAULT '#3b82f6',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "node_groups_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "hosts" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "location" TEXT,
+    "country_code" TEXT NOT NULL DEFAULT 'us',
+    "node_group_id" INTEGER,
+    "status" "HostStatus" NOT NULL DEFAULT 'offline',
+    "cert_path" TEXT,
+    "key_path" TEXT,
+    "nat_public_ip" TEXT,
+    "nat_port_start" INTEGER,
+    "nat_port_end" INTEGER,
+    "cpu_total" INTEGER NOT NULL DEFAULT 0,
+    "cpu_used" INTEGER NOT NULL DEFAULT 0,
+    "memory_total" INTEGER NOT NULL DEFAULT 0,
+    "memory_used" INTEGER NOT NULL DEFAULT 0,
+    "disk_total" INTEGER NOT NULL DEFAULT 0,
+    "disk_used" INTEGER NOT NULL DEFAULT 0,
+    "tags" JSONB DEFAULT '[]',
+    "nat_ports_used_count" INTEGER NOT NULL DEFAULT 0,
+    "cpu_allowance_max" INTEGER NOT NULL DEFAULT 0,
+    "memory_max" INTEGER NOT NULL DEFAULT 0,
+    "instance_type" "InstanceType" NOT NULL DEFAULT 'container',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "hosts_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "packages" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "cpu_max" INTEGER NOT NULL,
+    "memory_max" INTEGER NOT NULL,
+    "disk_max" INTEGER NOT NULL,
+    "bandwidth_max" INTEGER,
+    "network_mode" "NetworkMode" NOT NULL DEFAULT 'nat',
+    "node_group_id" INTEGER,
+    "node_selectors" JSONB DEFAULT '[]',
+    "privileged" BOOLEAN NOT NULL DEFAULT false,
+    "nested" BOOLEAN NOT NULL DEFAULT false,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "port_limit" INTEGER NOT NULL DEFAULT 20,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "packages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "instances" (
+    "id" SERIAL NOT NULL,
+    "incus_id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "package_id" INTEGER,
+    "image" TEXT NOT NULL,
+    "status" "InstanceStatus" NOT NULL DEFAULT 'creating',
+    "cpu" INTEGER NOT NULL,
+    "memory" INTEGER NOT NULL,
+    "disk" INTEGER NOT NULL,
+    "ipv4" TEXT,
+    "ipv6" TEXT,
+    "network_mode" "NetworkMode" NOT NULL DEFAULT 'nat',
+    "ssh_port" INTEGER,
+    "root_password" TEXT,
+    "snapshotted_specs" JSONB DEFAULT '{}',
+    "port_limit" INTEGER,
+    "snapshot_limit" INTEGER,
+    "backup_limit" INTEGER,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "instances_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "port_mappings" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "protocol" "Protocol" NOT NULL DEFAULT 'tcp',
+    "public_port" INTEGER NOT NULL,
+    "private_port" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "port_mappings_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "snapshots" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "incus_name" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "stateful" BOOLEAN NOT NULL DEFAULT false,
+    "size" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "snapshots_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "backups" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "incus_name" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "size" INTEGER NOT NULL DEFAULT 0,
+    "status" "BackupStatus" NOT NULL DEFAULT 'creating',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expires_at" TIMESTAMP(3),
+
+    CONSTRAINT "backups_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "backup_policies" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT false,
+    "interval_hours" INTEGER NOT NULL DEFAULT 24,
+    "retention_count" INTEGER NOT NULL DEFAULT 3,
+    "last_run_at" TIMESTAMP(3),
+    "next_run_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "backup_policies_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "snapshot_policies" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT false,
+    "interval_hours" INTEGER NOT NULL DEFAULT 6,
+    "retention_count" INTEGER NOT NULL DEFAULT 5,
+    "last_run_at" TIMESTAMP(3),
+    "next_run_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "snapshot_policies_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "notification_channels" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "type" "NotificationChannelType" NOT NULL,
+    "name" TEXT NOT NULL,
+    "config" JSONB NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "notification_channels_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "notification_logs" (
+    "id" SERIAL NOT NULL,
+    "channel_id" INTEGER NOT NULL,
+    "event_type" TEXT NOT NULL,
+    "message" TEXT NOT NULL,
+    "status" "NotificationLogStatus" NOT NULL,
+    "error" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "notification_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "oauth_configs" (
+    "id" SERIAL NOT NULL,
+    "provider" "OAuthProvider" NOT NULL,
+    "client_id" TEXT NOT NULL,
+    "client_secret" TEXT NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "oauth_configs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "user_oauth_bindings" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "provider" "OAuthProvider" NOT NULL,
+    "provider_user_id" TEXT NOT NULL,
+    "provider_username" TEXT,
+    "provider_email" TEXT,
+    "provider_avatar" TEXT,
+    "access_token" TEXT,
+    "refresh_token" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_oauth_bindings_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "help_articles" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "category" TEXT NOT NULL DEFAULT 'general',
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "published" BOOLEAN NOT NULL DEFAULT true,
+    "created_by" INTEGER,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "help_articles_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "images" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "os_type" TEXT NOT NULL DEFAULT 'Linux',
+    "remote_alias" TEXT NOT NULL,
+    "architecture" TEXT NOT NULL DEFAULT 'x86_64',
+    "description" TEXT,
+    "icon" TEXT,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "images_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "host_images" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "image_id" INTEGER NOT NULL,
+    "fingerprint" TEXT,
+    "alias" TEXT,
+    "size" INTEGER NOT NULL DEFAULT 0,
+    "status" "HostImageStatus" NOT NULL DEFAULT 'pending',
+    "error_message" TEXT,
+    "synced_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "host_images_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "logs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER,
+    "module" TEXT NOT NULL,
+    "action" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "result" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_username_key" ON "users"("username");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_quotas_user_id_key" ON "user_quotas"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "invite_codes_code_key" ON "invite_codes"("code");
+
+-- CreateIndex
+CREATE INDEX "invite_codes_code_idx" ON "invite_codes"("code");
+
+-- CreateIndex
+CREATE INDEX "ssh_keys_user_id_idx" ON "ssh_keys"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "node_groups_name_key" ON "node_groups"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosts_name_key" ON "hosts"("name");
+
+-- CreateIndex
+CREATE INDEX "hosts_node_group_id_idx" ON "hosts"("node_group_id");
+
+-- CreateIndex
+CREATE INDEX "instances_user_id_idx" ON "instances"("user_id");
+
+-- CreateIndex
+CREATE INDEX "instances_host_id_idx" ON "instances"("host_id");
+
+-- CreateIndex
+CREATE INDEX "instances_status_idx" ON "instances"("status");
+
+-- CreateIndex
+CREATE INDEX "port_mappings_instance_id_idx" ON "port_mappings"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "snapshots_instance_id_idx" ON "snapshots"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "backups_instance_id_idx" ON "backups"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "backups_status_idx" ON "backups"("status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "backup_policies_instance_id_key" ON "backup_policies"("instance_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "snapshot_policies_instance_id_key" ON "snapshot_policies"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "notification_channels_user_id_idx" ON "notification_channels"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "oauth_configs_provider_key" ON "oauth_configs"("provider");
+
+-- CreateIndex
+CREATE INDEX "user_oauth_bindings_user_id_idx" ON "user_oauth_bindings"("user_id");
+
+-- CreateIndex
+CREATE INDEX "user_oauth_bindings_provider_provider_user_id_idx" ON "user_oauth_bindings"("provider", "provider_user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_oauth_bindings_user_id_provider_key" ON "user_oauth_bindings"("user_id", "provider");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_oauth_bindings_provider_provider_user_id_key" ON "user_oauth_bindings"("provider", "provider_user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "help_articles_slug_key" ON "help_articles"("slug");
+
+-- CreateIndex
+CREATE INDEX "host_images_host_id_idx" ON "host_images"("host_id");
+
+-- CreateIndex
+CREATE INDEX "host_images_image_id_idx" ON "host_images"("image_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "host_images_host_id_image_id_key" ON "host_images"("host_id", "image_id");
+
+-- CreateIndex
+CREATE INDEX "logs_user_id_idx" ON "logs"("user_id");
+
+-- CreateIndex
+CREATE INDEX "logs_module_idx" ON "logs"("module");
+
+-- CreateIndex
+CREATE INDEX "logs_created_at_idx" ON "logs"("created_at");
+
+-- AddForeignKey
+ALTER TABLE "user_quotas" ADD CONSTRAINT "user_quotas_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "invite_codes" ADD CONSTRAINT "invite_codes_created_by_fkey" FOREIGN KEY ("created_by") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "invite_codes" ADD CONSTRAINT "invite_codes_used_by_fkey" FOREIGN KEY ("used_by") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ssh_keys" ADD CONSTRAINT "ssh_keys_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "hosts" ADD CONSTRAINT "hosts_node_group_id_fkey" FOREIGN KEY ("node_group_id") REFERENCES "node_groups"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "packages" ADD CONSTRAINT "packages_node_group_id_fkey" FOREIGN KEY ("node_group_id") REFERENCES "node_groups"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "instances" ADD CONSTRAINT "instances_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "instances" ADD CONSTRAINT "instances_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "instances" ADD CONSTRAINT "instances_package_id_fkey" FOREIGN KEY ("package_id") REFERENCES "packages"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "port_mappings" ADD CONSTRAINT "port_mappings_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "port_mappings" ADD CONSTRAINT "port_mappings_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "snapshots" ADD CONSTRAINT "snapshots_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "backups" ADD CONSTRAINT "backups_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "backup_policies" ADD CONSTRAINT "backup_policies_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "snapshot_policies" ADD CONSTRAINT "snapshot_policies_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "notification_channels" ADD CONSTRAINT "notification_channels_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "notification_logs" ADD CONSTRAINT "notification_logs_channel_id_fkey" FOREIGN KEY ("channel_id") REFERENCES "notification_channels"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_oauth_bindings" ADD CONSTRAINT "user_oauth_bindings_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "help_articles" ADD CONSTRAINT "help_articles_created_by_fkey" FOREIGN KEY ("created_by") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "host_images" ADD CONSTRAINT "host_images_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "host_images" ADD CONSTRAINT "host_images_image_id_fkey" FOREIGN KEY ("image_id") REFERENCES "images"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "logs" ADD CONSTRAINT "logs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251206110301_add_2fa_fields/migration.sql b/server/prisma/migrations/20251206110301_add_2fa_fields/migration.sql
new file mode 100644
index 0000000..fc6e204
--- /dev/null
+++ b/server/prisma/migrations/20251206110301_add_2fa_fields/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "two_factor_enabled" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "two_factor_secret" TEXT;
diff --git a/server/prisma/migrations/20251206120241_add_2fa_recovery_codes/migration.sql b/server/prisma/migrations/20251206120241_add_2fa_recovery_codes/migration.sql
new file mode 100644
index 0000000..531f369
--- /dev/null
+++ b/server/prisma/migrations/20251206120241_add_2fa_recovery_codes/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "two_factor_recovery_codes" TEXT;
diff --git a/server/prisma/migrations/20251207072151_add_host_init_fields/migration.sql b/server/prisma/migrations/20251207072151_add_host_init_fields/migration.sql
new file mode 100644
index 0000000..f7d8621
--- /dev/null
+++ b/server/prisma/migrations/20251207072151_add_host_init_fields/migration.sql
@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[install_token]` on the table `hosts` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN     "enable_api" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "install_token" TEXT,
+ADD COLUMN     "ip_address" TEXT,
+ADD COLUMN     "ipv6_gateway" TEXT,
+ADD COLUMN     "ipv6_mode" INTEGER NOT NULL DEFAULT 1,
+ADD COLUMN     "ipv6_subnet" TEXT,
+ADD COLUMN     "is_installed" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "zfs_size" INTEGER NOT NULL DEFAULT 60;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosts_install_token_key" ON "hosts"("install_token");
diff --git a/server/prisma/migrations/20251207123655_add_system_config/migration.sql b/server/prisma/migrations/20251207123655_add_system_config/migration.sql
new file mode 100644
index 0000000..d171135
--- /dev/null
+++ b/server/prisma/migrations/20251207123655_add_system_config/migration.sql
@@ -0,0 +1,16 @@
+-- CreateTable
+CREATE TABLE "system_configs" (
+    "id" SERIAL NOT NULL,
+    "key" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "type" TEXT NOT NULL DEFAULT 'string',
+    "label" TEXT,
+    "description" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "system_configs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "system_configs_key_key" ON "system_configs"("key");
diff --git a/server/prisma/migrations/20251208050057_add_traffic_quota/migration.sql b/server/prisma/migrations/20251208050057_add_traffic_quota/migration.sql
new file mode 100644
index 0000000..8aba7b8
--- /dev/null
+++ b/server/prisma/migrations/20251208050057_add_traffic_quota/migration.sql
@@ -0,0 +1,52 @@
+-- CreateEnum
+CREATE TYPE "TrafficStatus" AS ENUM ('NORMAL', 'WARNING', 'LIMITED');
+
+-- AlterTable
+ALTER TABLE "instances" ADD COLUMN     "monthly_traffic_limit" BIGINT,
+ADD COLUMN     "monthly_traffic_used" BIGINT NOT NULL DEFAULT 0,
+ADD COLUMN     "traffic_status" "TrafficStatus" NOT NULL DEFAULT 'NORMAL';
+
+-- AlterTable
+ALTER TABLE "user_quotas" ADD COLUMN     "extra_traffic_quota" BIGINT NOT NULL DEFAULT 0,
+ADD COLUMN     "extra_traffic_used" BIGINT NOT NULL DEFAULT 0,
+ADD COLUMN     "monthly_traffic_limit" BIGINT,
+ADD COLUMN     "monthly_traffic_used" BIGINT NOT NULL DEFAULT 0,
+ADD COLUMN     "traffic_status" "TrafficStatus" NOT NULL DEFAULT 'NORMAL',
+ADD COLUMN     "traffic_warning_sent_at" TIMESTAMP(3);
+
+-- CreateTable
+CREATE TABLE "traffic_snapshots" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "rx_raw" BIGINT NOT NULL,
+    "tx_raw" BIGINT NOT NULL,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "traffic_snapshots_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "daily_traffic" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "date" DATE NOT NULL,
+    "rx_total" BIGINT NOT NULL,
+    "tx_total" BIGINT NOT NULL,
+
+    CONSTRAINT "daily_traffic_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "traffic_snapshots_instance_id_key" ON "traffic_snapshots"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "daily_traffic_instance_id_date_idx" ON "daily_traffic"("instance_id", "date");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "daily_traffic_instance_id_date_key" ON "daily_traffic"("instance_id", "date");
+
+-- AddForeignKey
+ALTER TABLE "traffic_snapshots" ADD CONSTRAINT "traffic_snapshots_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "daily_traffic" ADD CONSTRAINT "daily_traffic_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251208054106_add_package_traffic_limit/migration.sql b/server/prisma/migrations/20251208054106_add_package_traffic_limit/migration.sql
new file mode 100644
index 0000000..6e2103c
--- /dev/null
+++ b/server/prisma/migrations/20251208054106_add_package_traffic_limit/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN     "monthly_traffic_limit" BIGINT;
diff --git a/server/prisma/migrations/20251208072207_add_restore_task_model/migration.sql b/server/prisma/migrations/20251208072207_add_restore_task_model/migration.sql
new file mode 100644
index 0000000..9cd3e6f
--- /dev/null
+++ b/server/prisma/migrations/20251208072207_add_restore_task_model/migration.sql
@@ -0,0 +1,30 @@
+-- CreateEnum
+CREATE TYPE "RestoreTaskStatus" AS ENUM ('PENDING', 'PROCESSING', 'COMPLETED', 'FAILED');
+
+-- AlterTable
+ALTER TABLE "instances" ADD COLUMN     "restored_from" JSONB;
+
+-- CreateTable
+CREATE TABLE "restore_tasks" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "backup_id" INTEGER,
+    "host_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "status" "RestoreTaskStatus" NOT NULL DEFAULT 'PENDING',
+    "temp_instance_name" TEXT,
+    "original_instance_name" TEXT NOT NULL,
+    "original_incus_id" TEXT NOT NULL,
+    "error" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "started_at" TIMESTAMP(3),
+    "finished_at" TIMESTAMP(3),
+
+    CONSTRAINT "restore_tasks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "restore_tasks_host_id_status_idx" ON "restore_tasks"("host_id", "status");
+
+-- CreateIndex
+CREATE INDEX "restore_tasks_instance_id_idx" ON "restore_tasks"("instance_id");
diff --git a/server/prisma/migrations/20251208084341_add_storage_and_upload_tasks/migration.sql b/server/prisma/migrations/20251208084341_add_storage_and_upload_tasks/migration.sql
new file mode 100644
index 0000000..1b056c6
--- /dev/null
+++ b/server/prisma/migrations/20251208084341_add_storage_and_upload_tasks/migration.sql
@@ -0,0 +1,61 @@
+-- CreateEnum
+CREATE TYPE "StorageType" AS ENUM ('S3', 'WEBDAV', 'FTP', 'SFTP');
+
+-- CreateEnum
+CREATE TYPE "BackupUploadTaskStatus" AS ENUM ('PENDING', 'PROCESSING', 'COMPLETED', 'FAILED');
+
+-- CreateTable
+CREATE TABLE "storage_configs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "type" "StorageType" NOT NULL,
+    "host" TEXT NOT NULL,
+    "port" INTEGER,
+    "username" TEXT,
+    "password" TEXT,
+    "base_path" TEXT,
+    "extra" JSONB,
+    "is_default" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "storage_configs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "backup_upload_tasks" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "backup_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "storage_config_id" INTEGER NOT NULL,
+    "status" "BackupUploadTaskStatus" NOT NULL DEFAULT 'PENDING',
+    "remote_file_name" TEXT,
+    "file_size" BIGINT,
+    "error" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "started_at" TIMESTAMP(3),
+    "finished_at" TIMESTAMP(3),
+
+    CONSTRAINT "backup_upload_tasks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "storage_configs_user_id_idx" ON "storage_configs"("user_id");
+
+-- CreateIndex
+CREATE INDEX "backup_upload_tasks_host_id_status_idx" ON "backup_upload_tasks"("host_id", "status");
+
+-- CreateIndex
+CREATE INDEX "backup_upload_tasks_user_id_idx" ON "backup_upload_tasks"("user_id");
+
+-- CreateIndex
+CREATE INDEX "backup_upload_tasks_instance_id_idx" ON "backup_upload_tasks"("instance_id");
+
+-- AddForeignKey
+ALTER TABLE "storage_configs" ADD CONSTRAINT "storage_configs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "backup_upload_tasks" ADD CONSTRAINT "backup_upload_tasks_storage_config_id_fkey" FOREIGN KEY ("storage_config_id") REFERENCES "storage_configs"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251208090039_add_storage_config_index/migration.sql b/server/prisma/migrations/20251208090039_add_storage_config_index/migration.sql
new file mode 100644
index 0000000..eb1e102
--- /dev/null
+++ b/server/prisma/migrations/20251208090039_add_storage_config_index/migration.sql
@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "backup_upload_tasks_storage_config_id_status_idx" ON "backup_upload_tasks"("storage_config_id", "status");
diff --git a/server/prisma/migrations/20251208120000_add_instance_transfer/migration.sql b/server/prisma/migrations/20251208120000_add_instance_transfer/migration.sql
new file mode 100644
index 0000000..1cc4e36
--- /dev/null
+++ b/server/prisma/migrations/20251208120000_add_instance_transfer/migration.sql
@@ -0,0 +1,38 @@
+-- CreateEnum
+CREATE TYPE "TransferStatus" AS ENUM ('pending', 'accepted', 'rejected', 'cancelled');
+
+-- CreateTable
+CREATE TABLE "instance_transfers" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "from_user_id" INTEGER NOT NULL,
+    "to_user_id" INTEGER NOT NULL,
+    "status" "TransferStatus" NOT NULL DEFAULT 'pending',
+    "snapshot" JSONB NOT NULL,
+    "remark" TEXT,
+    "reject_reason" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "accepted_at" TIMESTAMP(3),
+    "rejected_at" TIMESTAMP(3),
+    "cancelled_at" TIMESTAMP(3),
+
+    CONSTRAINT "instance_transfers_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "instance_transfers_from_user_id_status_idx" ON "instance_transfers"("from_user_id", "status");
+
+-- CreateIndex
+CREATE INDEX "instance_transfers_to_user_id_status_idx" ON "instance_transfers"("to_user_id", "status");
+
+-- CreateIndex
+CREATE INDEX "instance_transfers_instance_id_status_idx" ON "instance_transfers"("instance_id", "status");
+
+-- AddForeignKey
+ALTER TABLE "instance_transfers" ADD CONSTRAINT "instance_transfers_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "instance_transfers" ADD CONSTRAINT "instance_transfers_from_user_id_fkey" FOREIGN KEY ("from_user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "instance_transfers" ADD CONSTRAINT "instance_transfers_to_user_id_fkey" FOREIGN KEY ("to_user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251208140941_add_avatar_style/migration.sql b/server/prisma/migrations/20251208140941_add_avatar_style/migration.sql
new file mode 100644
index 0000000..b875da2
--- /dev/null
+++ b/server/prisma/migrations/20251208140941_add_avatar_style/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "avatar_style" TEXT NOT NULL DEFAULT 'bigSmile';
diff --git a/server/prisma/migrations/20251208154011_add_port_mapping_remark/migration.sql b/server/prisma/migrations/20251208154011_add_port_mapping_remark/migration.sql
new file mode 100644
index 0000000..c7e518b
--- /dev/null
+++ b/server/prisma/migrations/20251208154011_add_port_mapping_remark/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "port_mappings" ADD COLUMN     "remark" TEXT;
diff --git a/server/prisma/migrations/20251209000000_add_user_ownership_and_friendship/migration.sql b/server/prisma/migrations/20251209000000_add_user_ownership_and_friendship/migration.sql
new file mode 100644
index 0000000..9493e53
--- /dev/null
+++ b/server/prisma/migrations/20251209000000_add_user_ownership_and_friendship/migration.sql
@@ -0,0 +1,107 @@
+-- 创建好友关系状态枚举
+CREATE TYPE "FriendshipStatus" AS ENUM ('pending', 'accepted');
+
+-- 创建好友关系表
+CREATE TABLE "friendships" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "friend_id" INTEGER NOT NULL,
+    "status" "FriendshipStatus" NOT NULL DEFAULT 'pending',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "accepted_at" TIMESTAMP(3),
+
+    CONSTRAINT "friendships_pkey" PRIMARY KEY ("id")
+);
+
+-- 添加 user_id 列到 hosts 表（先允许 NULL）
+ALTER TABLE "hosts" ADD COLUMN "user_id" INTEGER;
+
+-- 添加 user_id 列到 images 表（先允许 NULL）
+ALTER TABLE "images" ADD COLUMN "user_id" INTEGER;
+
+-- 添加 user_id 列到 packages 表（先允许 NULL）
+ALTER TABLE "packages" ADD COLUMN "user_id" INTEGER;
+
+-- 添加 user_id 列到 node_groups 表（先允许 NULL）
+ALTER TABLE "node_groups" ADD COLUMN "user_id" INTEGER;
+
+-- 将现有数据的 user_id 设置为第一个管理员用户
+-- 如果没有管理员用户，则设置为第一个用户
+UPDATE "hosts" SET "user_id" = (
+    SELECT "id" FROM "users" WHERE "role" = 'admin' ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+UPDATE "images" SET "user_id" = (
+    SELECT "id" FROM "users" WHERE "role" = 'admin' ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+UPDATE "packages" SET "user_id" = (
+    SELECT "id" FROM "users" WHERE "role" = 'admin' ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+UPDATE "node_groups" SET "user_id" = (
+    SELECT "id" FROM "users" WHERE "role" = 'admin' ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+-- 如果仍有 NULL 值（没有管理员用户的情况），使用第一个用户
+UPDATE "hosts" SET "user_id" = (
+    SELECT "id" FROM "users" ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+UPDATE "images" SET "user_id" = (
+    SELECT "id" FROM "users" ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+UPDATE "packages" SET "user_id" = (
+    SELECT "id" FROM "users" ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+UPDATE "node_groups" SET "user_id" = (
+    SELECT "id" FROM "users" ORDER BY "id" LIMIT 1
+) WHERE "user_id" IS NULL;
+
+-- 删除 hosts 表原有的唯一约束
+DROP INDEX IF EXISTS "hosts_name_key";
+
+-- 删除 node_groups 表原有的唯一约束
+DROP INDEX IF EXISTS "node_groups_name_key";
+
+-- 设置 NOT NULL 约束
+ALTER TABLE "hosts" ALTER COLUMN "user_id" SET NOT NULL;
+ALTER TABLE "images" ALTER COLUMN "user_id" SET NOT NULL;
+ALTER TABLE "packages" ALTER COLUMN "user_id" SET NOT NULL;
+ALTER TABLE "node_groups" ALTER COLUMN "user_id" SET NOT NULL;
+
+-- 添加外键约束
+ALTER TABLE "friendships" ADD CONSTRAINT "friendships_user_id_fkey" 
+    FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "friendships" ADD CONSTRAINT "friendships_friend_id_fkey" 
+    FOREIGN KEY ("friend_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "hosts" ADD CONSTRAINT "hosts_user_id_fkey" 
+    FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "images" ADD CONSTRAINT "images_user_id_fkey" 
+    FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "packages" ADD CONSTRAINT "packages_user_id_fkey" 
+    FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "node_groups" ADD CONSTRAINT "node_groups_user_id_fkey" 
+    FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- 添加唯一约束
+CREATE UNIQUE INDEX "friendships_user_id_friend_id_key" ON "friendships"("user_id", "friend_id");
+CREATE UNIQUE INDEX "hosts_user_id_name_key" ON "hosts"("user_id", "name");
+CREATE UNIQUE INDEX "images_user_id_name_key" ON "images"("user_id", "name");
+CREATE UNIQUE INDEX "packages_user_id_name_key" ON "packages"("user_id", "name");
+CREATE UNIQUE INDEX "node_groups_user_id_name_key" ON "node_groups"("user_id", "name");
+
+-- 添加索引
+CREATE INDEX "friendships_friend_id_status_idx" ON "friendships"("friend_id", "status");
+CREATE INDEX "friendships_user_id_status_idx" ON "friendships"("user_id", "status");
+CREATE INDEX "hosts_user_id_idx" ON "hosts"("user_id");
+CREATE INDEX "images_user_id_idx" ON "images"("user_id");
+CREATE INDEX "packages_user_id_idx" ON "packages"("user_id");
+CREATE INDEX "node_groups_user_id_idx" ON "node_groups"("user_id");
diff --git a/server/prisma/migrations/20251209022207_add_friendship_remark_and_rejected/migration.sql b/server/prisma/migrations/20251209022207_add_friendship_remark_and_rejected/migration.sql
new file mode 100644
index 0000000..85b360a
--- /dev/null
+++ b/server/prisma/migrations/20251209022207_add_friendship_remark_and_rejected/migration.sql
@@ -0,0 +1,6 @@
+-- AlterEnum
+ALTER TYPE "FriendshipStatus" ADD VALUE 'rejected';
+
+-- AlterTable
+ALTER TABLE "friendships" ADD COLUMN     "rejected_at" TIMESTAMP(3),
+ADD COLUMN     "remark" TEXT;
diff --git a/server/prisma/migrations/20251209064035_add_package_shares/migration.sql b/server/prisma/migrations/20251209064035_add_package_shares/migration.sql
new file mode 100644
index 0000000..7270aa7
--- /dev/null
+++ b/server/prisma/migrations/20251209064035_add_package_shares/migration.sql
@@ -0,0 +1,63 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `backup_limit` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `backup_used` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `cpu_limit` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `cpu_used` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `disk_limit` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `disk_used` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `memory_limit` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `memory_used` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `port_limit` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `port_used` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `snapshot_limit` on the `user_quotas` table. All the data in the column will be lost.
+  - You are about to drop the column `snapshot_used` on the `user_quotas` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "user_quotas" DROP COLUMN "backup_limit",
+DROP COLUMN "backup_used",
+DROP COLUMN "cpu_limit",
+DROP COLUMN "cpu_used",
+DROP COLUMN "disk_limit",
+DROP COLUMN "disk_used",
+DROP COLUMN "memory_limit",
+DROP COLUMN "memory_used",
+DROP COLUMN "port_limit",
+DROP COLUMN "port_used",
+DROP COLUMN "snapshot_limit",
+DROP COLUMN "snapshot_used",
+ALTER COLUMN "instance_limit" SET DEFAULT 50;
+
+-- CreateTable
+CREATE TABLE "package_shares" (
+    "id" SERIAL NOT NULL,
+    "package_id" INTEGER NOT NULL,
+    "owner_id" INTEGER NOT NULL,
+    "shared_to_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "package_shares_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "package_shares_shared_to_id_idx" ON "package_shares"("shared_to_id");
+
+-- CreateIndex
+CREATE INDEX "package_shares_owner_id_idx" ON "package_shares"("owner_id");
+
+-- CreateIndex
+CREATE INDEX "package_shares_package_id_idx" ON "package_shares"("package_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "package_shares_package_id_shared_to_id_key" ON "package_shares"("package_id", "shared_to_id");
+
+-- AddForeignKey
+ALTER TABLE "package_shares" ADD CONSTRAINT "package_shares_package_id_fkey" FOREIGN KEY ("package_id") REFERENCES "packages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "package_shares" ADD CONSTRAINT "package_shares_owner_id_fkey" FOREIGN KEY ("owner_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "package_shares" ADD CONSTRAINT "package_shares_shared_to_id_fkey" FOREIGN KEY ("shared_to_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251209073625_add_host_install_config/migration.sql b/server/prisma/migrations/20251209073625_add_host_install_config/migration.sql
new file mode 100644
index 0000000..953765f
--- /dev/null
+++ b/server/prisma/migrations/20251209073625_add_host_install_config/migration.sql
@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `zfs_size` on the `hosts` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "hosts" DROP COLUMN "zfs_size",
+ADD COLUMN     "install_token_expire" TIMESTAMP(3),
+ADD COLUMN     "storage_driver" TEXT NOT NULL DEFAULT 'zfs',
+ADD COLUMN     "storage_path" TEXT,
+ADD COLUMN     "storage_size" INTEGER NOT NULL DEFAULT 60,
+ADD COLUMN     "storage_type" TEXT NOT NULL DEFAULT 'loop',
+ADD COLUMN     "sysctl_config" TEXT;
diff --git a/server/prisma/migrations/20251209110000_refactor_quota_system/migration.sql b/server/prisma/migrations/20251209110000_refactor_quota_system/migration.sql
new file mode 100644
index 0000000..94bc014
--- /dev/null
+++ b/server/prisma/migrations/20251209110000_refactor_quota_system/migration.sql
@@ -0,0 +1,67 @@
+-- 配额系统重构迁移
+-- 用户配额从 CPU/内存/磁盘/端口/快照/备份 改为 宿主机数量/实例数量/好友数量
+-- 套餐新增 snapshotLimit 和 backupLimit 字段
+
+-- =====================================================
+-- 1. 修改 user_quotas 表
+-- =====================================================
+
+-- 添加新字段
+ALTER TABLE "user_quotas" ADD COLUMN IF NOT EXISTS "host_limit" INTEGER NOT NULL DEFAULT 5;
+ALTER TABLE "user_quotas" ADD COLUMN IF NOT EXISTS "host_used" INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE "user_quotas" ADD COLUMN IF NOT EXISTS "friend_limit" INTEGER NOT NULL DEFAULT 20;
+ALTER TABLE "user_quotas" ADD COLUMN IF NOT EXISTS "friend_used" INTEGER NOT NULL DEFAULT 0;
+
+-- 更新 instance_limit 默认值为 50（可选，不影响现有数据）
+-- ALTER TABLE "user_quotas" ALTER COLUMN "instance_limit" SET DEFAULT 50;
+
+-- 统计并更新现有用户的 host_used
+UPDATE "user_quotas" q SET "host_used" = (
+  SELECT COUNT(*) FROM "hosts" h WHERE h."user_id" = q."user_id"
+);
+
+-- 统计并更新现有用户的 instance_used
+UPDATE "user_quotas" q SET "instance_used" = (
+  SELECT COUNT(*) FROM "instances" i WHERE i."user_id" = q."user_id" AND i."status" != 'deleted'
+);
+
+-- 统计并更新现有用户的 friend_used（已接受的好友数）
+UPDATE "user_quotas" q SET "friend_used" = (
+  SELECT COUNT(*) FROM "friendships" f 
+  WHERE (f."user_id" = q."user_id" OR f."friend_id" = q."user_id") 
+  AND f."status" = 'accepted'
+);
+
+-- 删除旧字段（可选，建议先保留一段时间后再删除）
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "cpu_limit";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "cpu_used";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "memory_limit";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "memory_used";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "disk_limit";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "disk_used";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "port_limit";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "port_used";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "snapshot_limit";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "snapshot_used";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "backup_limit";
+-- ALTER TABLE "user_quotas" DROP COLUMN IF EXISTS "backup_used";
+
+-- =====================================================
+-- 2. 修改 packages 表
+-- =====================================================
+
+-- 添加新字段
+ALTER TABLE "packages" ADD COLUMN IF NOT EXISTS "snapshot_limit" INTEGER NOT NULL DEFAULT 5;
+ALTER TABLE "packages" ADD COLUMN IF NOT EXISTS "backup_limit" INTEGER NOT NULL DEFAULT 3;
+
+-- =====================================================
+-- 3. 更新实例配额（从套餐继承）
+-- =====================================================
+
+-- 对于有套餐的实例，如果 snapshot_limit 或 backup_limit 为 NULL，则从套餐继承
+UPDATE "instances" i SET 
+  "snapshot_limit" = COALESCE(i."snapshot_limit", p."snapshot_limit"),
+  "backup_limit" = COALESCE(i."backup_limit", p."backup_limit")
+FROM "packages" p 
+WHERE i."package_id" = p."id" 
+AND (i."snapshot_limit" IS NULL OR i."backup_limit" IS NULL);
diff --git a/server/prisma/migrations/20251209120000_cleanup_old_quota_configs/migration.sql b/server/prisma/migrations/20251209120000_cleanup_old_quota_configs/migration.sql
new file mode 100644
index 0000000..07f7f12
--- /dev/null
+++ b/server/prisma/migrations/20251209120000_cleanup_old_quota_configs/migration.sql
@@ -0,0 +1,11 @@
+-- 清理系统配置表中的旧配额字段
+-- 删除不再使用的 CPU/内存/磁盘/端口/快照/备份 配额配置
+
+DELETE FROM "system_configs" WHERE "key" IN (
+    'default_quota_cpu',
+    'default_quota_memory',
+    'default_quota_disk',
+    'default_quota_port',
+    'default_quota_snapshot',
+    'default_quota_backup'
+);
diff --git a/server/prisma/migrations/20251210133511_replace_node_group_with_package_host/migration.sql b/server/prisma/migrations/20251210133511_replace_node_group_with_package_host/migration.sql
new file mode 100644
index 0000000..a3b1f4a
--- /dev/null
+++ b/server/prisma/migrations/20251210133511_replace_node_group_with_package_host/migration.sql
@@ -0,0 +1,59 @@
+/*
+  迁移说明：
+  1. 创建 package_hosts 表（套餐与宿主机的多对多关联）
+  2. 迁移数据：将基于 node_group_id 的绑定转换为精确的宿主机绑定
+  3. 删除 node_group_id 字段和 node_groups 表
+  4. 对于没有绑定节点组的套餐，绑定套餐所有者的所有宿主机
+*/
+
+-- 步骤1: 创建 package_hosts 表
+CREATE TABLE "package_hosts" (
+    "id" SERIAL NOT NULL,
+    "package_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "package_hosts_pkey" PRIMARY KEY ("id")
+);
+
+-- 步骤2: 创建索引和外键
+CREATE INDEX "package_hosts_package_id_idx" ON "package_hosts"("package_id");
+CREATE INDEX "package_hosts_host_id_idx" ON "package_hosts"("host_id");
+CREATE UNIQUE INDEX "package_hosts_package_id_host_id_key" ON "package_hosts"("package_id", "host_id");
+
+ALTER TABLE "package_hosts" ADD CONSTRAINT "package_hosts_package_id_fkey" FOREIGN KEY ("package_id") REFERENCES "packages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "package_hosts" ADD CONSTRAINT "package_hosts_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- 步骤3: 迁移数据
+-- 3.1: 对于有 node_group_id 的套餐，绑定该节点组下的所有宿主机
+INSERT INTO "package_hosts" ("package_id", "host_id", "created_at")
+SELECT DISTINCT p.id, h.id, CURRENT_TIMESTAMP
+FROM "packages" p
+INNER JOIN "hosts" h ON h.node_group_id = p.node_group_id
+WHERE p.node_group_id IS NOT NULL;
+
+-- 3.2: 对于没有 node_group_id 的套餐，绑定套餐所有者的所有宿主机
+INSERT INTO "package_hosts" ("package_id", "host_id", "created_at")
+SELECT DISTINCT p.id, h.id, CURRENT_TIMESTAMP
+FROM "packages" p
+INNER JOIN "hosts" h ON h.user_id = p.user_id
+WHERE p.node_group_id IS NULL
+  AND NOT EXISTS (
+    SELECT 1 FROM "package_hosts" ph 
+    WHERE ph.package_id = p.id AND ph.host_id = h.id
+  );
+
+-- 步骤4: 删除外键约束
+ALTER TABLE "hosts" DROP CONSTRAINT IF EXISTS "hosts_node_group_id_fkey";
+ALTER TABLE "node_groups" DROP CONSTRAINT IF EXISTS "node_groups_user_id_fkey";
+ALTER TABLE "packages" DROP CONSTRAINT IF EXISTS "packages_node_group_id_fkey";
+
+-- 步骤5: 删除索引
+DROP INDEX IF EXISTS "hosts_node_group_id_idx";
+
+-- 步骤6: 删除字段
+ALTER TABLE "hosts" DROP COLUMN IF EXISTS "node_group_id";
+ALTER TABLE "packages" DROP COLUMN IF EXISTS "node_group_id";
+
+-- 步骤7: 删除 node_groups 表
+DROP TABLE IF EXISTS "node_groups";
diff --git a/server/prisma/migrations/20251211000000_simplify_host_images/migration.sql b/server/prisma/migrations/20251211000000_simplify_host_images/migration.sql
new file mode 100644
index 0000000..f540bc8
--- /dev/null
+++ b/server/prisma/migrations/20251211000000_simplify_host_images/migration.sql
@@ -0,0 +1,76 @@
+-- 简化镜像管理：移除 Image 表，直接在 HostImage 中存储镜像信息
+
+-- 1. 备份现有数据（如果需要恢复）
+-- 创建临时表保存现有的 host_images 数据
+CREATE TEMP TABLE temp_host_images AS
+SELECT 
+    hi.id,
+    hi.host_id,
+    i.remote_alias as image_id,
+    i.name,
+    i.os_type,
+    i.remote_alias,
+    COALESCE(i.icon, SPLIT_PART(i.remote_alias, '/', 1)) as icon,
+    hi.fingerprint,
+    hi.alias,
+    hi.size,
+    hi.status,
+    hi.error_message,
+    hi.synced_at,
+    hi.created_at,
+    hi.updated_at
+FROM host_images hi
+JOIN images i ON hi.image_id = i.id;
+
+-- 2. 删除外键约束和旧表
+DROP TABLE IF EXISTS host_images;
+DROP TABLE IF EXISTS images;
+
+-- 3. 创建新的 host_images 表
+CREATE TABLE host_images (
+    id SERIAL PRIMARY KEY,
+    host_id INTEGER NOT NULL,
+    image_id VARCHAR(100) NOT NULL,
+    name VARCHAR(100) NOT NULL,
+    os_type VARCHAR(50) NOT NULL DEFAULT 'Linux',
+    remote_alias VARCHAR(200) NOT NULL,
+    icon VARCHAR(50),
+    fingerprint VARCHAR(100),
+    alias VARCHAR(100),
+    size INTEGER NOT NULL DEFAULT 0,
+    status VARCHAR(20) NOT NULL DEFAULT 'pending',
+    error_message TEXT,
+    synced_at TIMESTAMP,
+    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT fk_host_images_host FOREIGN KEY (host_id) REFERENCES hosts(id) ON DELETE CASCADE,
+    CONSTRAINT uq_host_images_host_image UNIQUE (host_id, image_id)
+);
+
+-- 4. 创建索引
+CREATE INDEX idx_host_images_host_id ON host_images(host_id);
+
+-- 5. 恢复数据（将 remote_alias 转换为 image_id 格式）
+INSERT INTO host_images (
+    host_id, image_id, name, os_type, remote_alias, icon,
+    fingerprint, alias, size, status, error_message, synced_at, created_at, updated_at
+)
+SELECT 
+    host_id,
+    LOWER(REPLACE(REPLACE(remote_alias, '/', '-'), '.', '-')) as image_id,
+    name,
+    os_type,
+    remote_alias,
+    icon,
+    fingerprint,
+    alias,
+    size,
+    status::VARCHAR,
+    error_message,
+    synced_at,
+    created_at,
+    updated_at
+FROM temp_host_images;
+
+-- 6. 清理临时表
+DROP TABLE temp_host_images;
diff --git a/server/prisma/migrations/20251211045923_add_package_advanced_config/migration.sql b/server/prisma/migrations/20251211045923_add_package_advanced_config/migration.sql
new file mode 100644
index 0000000..903c3a6
--- /dev/null
+++ b/server/prisma/migrations/20251211045923_add_package_advanced_config/migration.sql
@@ -0,0 +1,60 @@
+/*
+  Warnings:
+
+  - The `status` column on the `host_images` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+
+*/
+-- DropForeignKey
+ALTER TABLE "host_images" DROP CONSTRAINT "fk_host_images_host";
+
+-- AlterTable
+ALTER TABLE "host_images" ALTER COLUMN "image_id" SET DATA TYPE TEXT,
+ALTER COLUMN "name" SET DATA TYPE TEXT,
+ALTER COLUMN "os_type" SET DATA TYPE TEXT,
+ALTER COLUMN "remote_alias" SET DATA TYPE TEXT,
+ALTER COLUMN "icon" SET DATA TYPE TEXT,
+ALTER COLUMN "fingerprint" SET DATA TYPE TEXT,
+ALTER COLUMN "alias" SET DATA TYPE TEXT,
+DROP COLUMN "status",
+ADD COLUMN     "status" "HostImageStatus" NOT NULL DEFAULT 'pending',
+ALTER COLUMN "synced_at" SET DATA TYPE TIMESTAMP(3),
+ALTER COLUMN "created_at" SET DATA TYPE TIMESTAMP(3),
+ALTER COLUMN "updated_at" DROP DEFAULT,
+ALTER COLUMN "updated_at" SET DATA TYPE TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "instances" ADD COLUMN     "boot_autostart" BOOLEAN,
+ADD COLUMN     "boot_autostart_delay" INTEGER,
+ADD COLUMN     "boot_autostart_priority" INTEGER,
+ADD COLUMN     "boot_host_shutdown_timeout" INTEGER,
+ADD COLUMN     "limits_cpu_priority" INTEGER,
+ADD COLUMN     "limits_egress" TEXT,
+ADD COLUMN     "limits_ingress" TEXT,
+ADD COLUMN     "limits_processes" INTEGER,
+ADD COLUMN     "limits_read" TEXT,
+ADD COLUMN     "limits_read_iops" INTEGER,
+ADD COLUMN     "limits_write" TEXT,
+ADD COLUMN     "limits_write_iops" INTEGER;
+
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN     "boot_autostart" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "boot_autostart_delay" INTEGER NOT NULL DEFAULT 15,
+ADD COLUMN     "boot_autostart_priority" INTEGER NOT NULL DEFAULT 20,
+ADD COLUMN     "boot_host_shutdown_timeout" INTEGER NOT NULL DEFAULT 30,
+ADD COLUMN     "limits_cpu_priority" INTEGER NOT NULL DEFAULT 10,
+ADD COLUMN     "limits_egress" TEXT NOT NULL DEFAULT '300Mbit',
+ADD COLUMN     "limits_ingress" TEXT NOT NULL DEFAULT '300Mbit',
+ADD COLUMN     "limits_processes" INTEGER NOT NULL DEFAULT 500,
+ADD COLUMN     "limits_read" TEXT NOT NULL DEFAULT '100MB',
+ADD COLUMN     "limits_read_iops" INTEGER NOT NULL DEFAULT 500,
+ADD COLUMN     "limits_write" TEXT NOT NULL DEFAULT '100MB',
+ADD COLUMN     "limits_write_iops" INTEGER NOT NULL DEFAULT 500;
+
+-- AddForeignKey
+ALTER TABLE "host_images" ADD CONSTRAINT "host_images_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- RenameIndex
+ALTER INDEX "idx_host_images_host_id" RENAME TO "host_images_host_id_idx";
+
+-- RenameIndex
+ALTER INDEX "uq_host_images_host_image" RENAME TO "host_images_host_id_image_id_key";
diff --git a/server/prisma/migrations/20251211045937_add_package_advanced_config/migration.sql b/server/prisma/migrations/20251211045937_add_package_advanced_config/migration.sql
new file mode 100644
index 0000000..af5102c
--- /dev/null
+++ b/server/prisma/migrations/20251211045937_add_package_advanced_config/migration.sql
@@ -0,0 +1 @@
+-- This is an empty migration.
\ No newline at end of file
diff --git a/server/prisma/migrations/20251211060512_remove_host_images/migration.sql b/server/prisma/migrations/20251211060512_remove_host_images/migration.sql
new file mode 100644
index 0000000..7d3c6f0
--- /dev/null
+++ b/server/prisma/migrations/20251211060512_remove_host_images/migration.sql
@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - You are about to drop the `host_images` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "host_images" DROP CONSTRAINT "host_images_host_id_fkey";
+
+-- DropTable
+DROP TABLE "host_images";
+
+-- DropEnum
+DROP TYPE "HostImageStatus";
diff --git a/server/prisma/migrations/20251211060523_remove_host_images/migration.sql b/server/prisma/migrations/20251211060523_remove_host_images/migration.sql
new file mode 100644
index 0000000..af5102c
--- /dev/null
+++ b/server/prisma/migrations/20251211060523_remove_host_images/migration.sql
@@ -0,0 +1 @@
+-- This is an empty migration.
\ No newline at end of file
diff --git a/server/prisma/migrations/20251211071708_add_ip_address_table/migration.sql b/server/prisma/migrations/20251211071708_add_ip_address_table/migration.sql
new file mode 100644
index 0000000..bff53a1
--- /dev/null
+++ b/server/prisma/migrations/20251211071708_add_ip_address_table/migration.sql
@@ -0,0 +1,32 @@
+-- CreateEnum (with IF NOT EXISTS to handle partial migrations)
+DO $$ BEGIN
+    CREATE TYPE "IpType" AS ENUM ('inet4', 'inet6');
+EXCEPTION
+    WHEN duplicate_object THEN null;
+END $$;
+
+-- CreateTable (with IF NOT EXISTS)
+CREATE TABLE IF NOT EXISTS "ip_addresses" (
+    "id" SERIAL NOT NULL,
+    "address" TEXT NOT NULL,
+    "type" "IpType" NOT NULL DEFAULT 'inet6',
+    "is_primary" BOOLEAN NOT NULL DEFAULT false,
+    "device" TEXT NOT NULL DEFAULT 'eth0',
+    "instance_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ip_addresses_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex (with IF NOT EXISTS)
+CREATE UNIQUE INDEX IF NOT EXISTS "ip_addresses_address_key" ON "ip_addresses"("address");
+
+-- CreateIndex (with IF NOT EXISTS)
+CREATE INDEX IF NOT EXISTS "ip_addresses_instance_id_idx" ON "ip_addresses"("instance_id");
+
+-- AddForeignKey (check if not exists)
+DO $$ BEGIN
+    ALTER TABLE "ip_addresses" ADD CONSTRAINT "ip_addresses_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+EXCEPTION
+    WHEN duplicate_object THEN null;
+END $$;
diff --git a/server/prisma/migrations/20251211145415_add_token_invalidation/migration.sql b/server/prisma/migrations/20251211145415_add_token_invalidation/migration.sql
new file mode 100644
index 0000000..9ebc890
--- /dev/null
+++ b/server/prisma/migrations/20251211145415_add_token_invalidation/migration.sql
@@ -0,0 +1,56 @@
+-- CreateTable
+CREATE TABLE "refresh_tokens" (
+    "id" SERIAL NOT NULL,
+    "token" TEXT NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "username" TEXT NOT NULL,
+    "role" "UserRole" NOT NULL,
+    "ip" TEXT,
+    "user_agent" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "last_active_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "refresh_tokens_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "token_invalidations" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "session_id" TEXT,
+    "invalidated_at" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "token_invalidations_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "refresh_tokens_token_key" ON "refresh_tokens"("token");
+
+-- CreateIndex
+CREATE INDEX "refresh_tokens_user_id_idx" ON "refresh_tokens"("user_id");
+
+-- CreateIndex
+CREATE INDEX "refresh_tokens_token_idx" ON "refresh_tokens"("token");
+
+-- CreateIndex
+CREATE INDEX "refresh_tokens_expires_at_idx" ON "refresh_tokens"("expires_at");
+
+-- CreateIndex
+CREATE INDEX "token_invalidations_user_id_idx" ON "token_invalidations"("user_id");
+
+-- CreateIndex
+CREATE INDEX "token_invalidations_session_id_idx" ON "token_invalidations"("session_id");
+
+-- CreateIndex
+CREATE INDEX "token_invalidations_invalidated_at_idx" ON "token_invalidations"("invalidated_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "token_invalidations_user_id_session_id_key" ON "token_invalidations"("user_id", "session_id");
+
+-- AddForeignKey
+ALTER TABLE "refresh_tokens" ADD CONSTRAINT "refresh_tokens_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "token_invalidations" ADD CONSTRAINT "token_invalidations_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251211151239_add_friendship_removed_status/migration.sql b/server/prisma/migrations/20251211151239_add_friendship_removed_status/migration.sql
new file mode 100644
index 0000000..a9ec6d7
--- /dev/null
+++ b/server/prisma/migrations/20251211151239_add_friendship_removed_status/migration.sql
@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FriendshipStatus" ADD VALUE 'removed';
diff --git a/server/prisma/migrations/20251212152400_remove_cpu_memory_disk_total_fields/migration.sql b/server/prisma/migrations/20251212152400_remove_cpu_memory_disk_total_fields/migration.sql
new file mode 100644
index 0000000..8cc8df7
--- /dev/null
+++ b/server/prisma/migrations/20251212152400_remove_cpu_memory_disk_total_fields/migration.sql
@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `cpu_total` on the `hosts` table. All the data in the column will be lost.
+  - You are about to drop the column `disk_total` on the `hosts` table. All the data in the column will be lost.
+  - You are about to drop the column `memory_total` on the `hosts` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "hosts" DROP COLUMN "cpu_total",
+DROP COLUMN "disk_total",
+DROP COLUMN "memory_total";
diff --git a/server/prisma/migrations/20251212205000_add_queue_progress_and_retry/migration.sql b/server/prisma/migrations/20251212205000_add_queue_progress_and_retry/migration.sql
new file mode 100644
index 0000000..4f7d9be
--- /dev/null
+++ b/server/prisma/migrations/20251212205000_add_queue_progress_and_retry/migration.sql
@@ -0,0 +1,7 @@
+-- Add progress and retryCount fields to RestoreTask
+ALTER TABLE "restore_tasks" ADD COLUMN "progress" TEXT;
+ALTER TABLE "restore_tasks" ADD COLUMN "retry_count" INTEGER NOT NULL DEFAULT 0;
+
+-- Add progress and retryCount fields to BackupUploadTask
+ALTER TABLE "backup_upload_tasks" ADD COLUMN "progress" TEXT;
+ALTER TABLE "backup_upload_tasks" ADD COLUMN "retry_count" INTEGER NOT NULL DEFAULT 0;
diff --git a/server/prisma/migrations/20251212221500_add_cert_download_count/migration.sql b/server/prisma/migrations/20251212221500_add_cert_download_count/migration.sql
new file mode 100644
index 0000000..a3b9fa4
--- /dev/null
+++ b/server/prisma/migrations/20251212221500_add_cert_download_count/migration.sql
@@ -0,0 +1,2 @@
+-- Add cert_download_count field to hosts table
+ALTER TABLE "hosts" ADD COLUMN "cert_download_count" INTEGER NOT NULL DEFAULT 0;
diff --git a/server/prisma/migrations/20251212221600_add_operation_verification_and_locks/migration.sql b/server/prisma/migrations/20251212221600_add_operation_verification_and_locks/migration.sql
new file mode 100644
index 0000000..79bd68a
--- /dev/null
+++ b/server/prisma/migrations/20251212221600_add_operation_verification_and_locks/migration.sql
@@ -0,0 +1,51 @@
+-- CreateEnum
+CREATE TYPE "OperationType" AS ENUM ('change_password', 'disable_2fa', 'change_email', 'delete_account', 'delete_instance', 'reinstall_instance', 'transfer_instance', 'delete_snapshot', 'delete_backup');
+
+-- CreateEnum
+CREATE TYPE "VerificationChannel" AS ENUM ('email', 'telegram', 'discord', 'webhook');
+
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "cert_download_expire" TIMESTAMP(3);
+
+-- CreateTable
+CREATE TABLE "operation_verifications" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "operation_type" "OperationType" NOT NULL,
+    "code" TEXT NOT NULL,
+    "channel" "VerificationChannel" NOT NULL,
+    "resource_id" INTEGER,
+    "resource_type" TEXT,
+    "verified" BOOLEAN NOT NULL DEFAULT false,
+    "verified_at" TIMESTAMP(3),
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "operation_verifications_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "distributed_locks" (
+    "id" SERIAL NOT NULL,
+    "lock_key" TEXT NOT NULL,
+    "owner_id" TEXT NOT NULL,
+    "acquired_at" TIMESTAMP(3) NOT NULL,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "distributed_locks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "operation_verifications_user_id_operation_type_code_idx" ON "operation_verifications"("user_id", "operation_type", "code");
+
+-- CreateIndex
+CREATE INDEX "operation_verifications_expires_at_idx" ON "operation_verifications"("expires_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "distributed_locks_lock_key_key" ON "distributed_locks"("lock_key");
+
+-- CreateIndex
+CREATE INDEX "distributed_locks_expires_at_idx" ON "distributed_locks"("expires_at");
+
+-- AddForeignKey
+ALTER TABLE "operation_verifications" ADD CONSTRAINT "operation_verifications_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251213000000_add_network_mode_and_system_images/migration.sql b/server/prisma/migrations/20251213000000_add_network_mode_and_system_images/migration.sql
new file mode 100644
index 0000000..2432dfa
--- /dev/null
+++ b/server/prisma/migrations/20251213000000_add_network_mode_and_system_images/migration.sql
@@ -0,0 +1,85 @@
+-- 修改 NetworkMode 枚举：添加新值并重命名
+-- 旧值: nat, ipv6, dual
+-- 新值: nat, nat_ipv6, ipv4, ipv4_ipv6
+-- 注意: PostgreSQL 不允许在同一事务中添加新枚举值后立即使用，所以使用替换枚举类型的方法
+
+-- 1. 创建新的枚举类型
+CREATE TYPE "NetworkMode_new" AS ENUM ('nat', 'nat_ipv6', 'ipv4', 'ipv4_ipv6');
+
+-- 2. 修改 packages 表：先删除默认值，转换类型，再恢复默认值
+ALTER TABLE "packages" ALTER COLUMN "network_mode" DROP DEFAULT;
+ALTER TABLE "packages" ALTER COLUMN "network_mode" TYPE TEXT;
+UPDATE "packages" SET "network_mode" = 'nat_ipv6' WHERE "network_mode" = 'ipv6';
+UPDATE "packages" SET "network_mode" = 'ipv4_ipv6' WHERE "network_mode" = 'dual';
+ALTER TABLE "packages" ALTER COLUMN "network_mode" TYPE "NetworkMode_new" USING "network_mode"::"NetworkMode_new";
+ALTER TABLE "packages" ALTER COLUMN "network_mode" SET DEFAULT 'nat'::"NetworkMode_new";
+
+-- 3. 修改 instances 表：先删除默认值，转换类型，再恢复默认值
+ALTER TABLE "instances" ALTER COLUMN "network_mode" DROP DEFAULT;
+ALTER TABLE "instances" ALTER COLUMN "network_mode" TYPE TEXT;
+UPDATE "instances" SET "network_mode" = 'nat_ipv6' WHERE "network_mode" = 'ipv6';
+UPDATE "instances" SET "network_mode" = 'ipv4_ipv6' WHERE "network_mode" = 'dual';
+ALTER TABLE "instances" ALTER COLUMN "network_mode" TYPE "NetworkMode_new" USING "network_mode"::"NetworkMode_new";
+ALTER TABLE "instances" ALTER COLUMN "network_mode" SET DEFAULT 'nat'::"NetworkMode_new";
+
+-- 4. 删除旧枚举类型，重命名新类型
+DROP TYPE "NetworkMode";
+ALTER TYPE "NetworkMode_new" RENAME TO "NetworkMode";
+
+-- CreateTable
+CREATE TABLE "system_images" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "remote_alias" TEXT NOT NULL,
+    "os_type" TEXT NOT NULL DEFAULT 'Linux',
+    "architecture" TEXT NOT NULL DEFAULT 'x86_64',
+    "icon" TEXT NOT NULL,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "hidden" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "system_images_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "system_images_remote_alias_key" ON "system_images"("remote_alias");
+
+-- 插入默认镜像数据（remote_alias 包含完整的源前缀）
+INSERT INTO "system_images" ("name", "remote_alias", "os_type", "architecture", "icon", "sort_order", "updated_at") VALUES
+-- AlmaLinux
+('AlmaLinux 8', 'images:almalinux/8/cloud', 'Linux', 'x86_64', 'almalinux', 10, NOW()),
+('AlmaLinux 9', 'images:almalinux/9/cloud', 'Linux', 'x86_64', 'almalinux', 11, NOW()),
+('AlmaLinux 10', 'images:almalinux/10/cloud', 'Linux', 'x86_64', 'almalinux', 12, NOW()),
+-- Alpine
+('Alpine 3.19', 'images:alpine/3.19/cloud', 'Linux', 'x86_64', 'alpine', 20, NOW()),
+('Alpine 3.20', 'images:alpine/3.20/cloud', 'Linux', 'x86_64', 'alpine', 21, NOW()),
+('Alpine 3.21', 'images:alpine/3.21/cloud', 'Linux', 'x86_64', 'alpine', 22, NOW()),
+('Alpine Edge', 'images:alpine/edge/cloud', 'Linux', 'x86_64', 'alpine', 29, NOW()),
+-- CentOS
+('CentOS 9 Stream', 'images:centos/9-Stream/cloud', 'Linux', 'x86_64', 'centos', 30, NOW()),
+('CentOS 10 Stream', 'images:centos/10-Stream/cloud', 'Linux', 'x86_64', 'centos', 31, NOW()),
+-- Debian
+('Debian 11 (Bullseye)', 'images:debian/11/cloud', 'Linux', 'x86_64', 'debian', 40, NOW()),
+('Debian 12 (Bookworm)', 'images:debian/12/cloud', 'Linux', 'x86_64', 'debian', 41, NOW()),
+('Debian 13 (Trixie)', 'images:debian/13/cloud', 'Linux', 'x86_64', 'debian', 42, NOW()),
+-- Fedora
+('Fedora 41', 'images:fedora/41/cloud', 'Linux', 'x86_64', 'fedora', 50, NOW()),
+('Fedora 42', 'images:fedora/42/cloud', 'Linux', 'x86_64', 'fedora', 51, NOW()),
+-- Kali
+('Kali Linux', 'images:kali/cloud', 'Linux', 'x86_64', 'kali', 60, NOW()),
+-- openSUSE
+('openSUSE 15.6', 'images:opensuse/15.6/cloud', 'Linux', 'x86_64', 'opensuse', 70, NOW()),
+('openSUSE Tumbleweed', 'images:opensuse/tumbleweed/cloud', 'Linux', 'x86_64', 'opensuse', 79, NOW()),
+-- Oracle
+('Oracle Linux 8', 'images:oracle/8/cloud', 'Linux', 'x86_64', 'oracle', 80, NOW()),
+('Oracle Linux 9', 'images:oracle/9/cloud', 'Linux', 'x86_64', 'oracle', 81, NOW()),
+-- Rocky Linux
+('Rocky Linux 8', 'images:rockylinux/8/cloud', 'Linux', 'x86_64', 'rockylinux', 90, NOW()),
+('Rocky Linux 9', 'images:rockylinux/9/cloud', 'Linux', 'x86_64', 'rockylinux', 91, NOW()),
+('Rocky Linux 10', 'images:rockylinux/10/cloud', 'Linux', 'x86_64', 'rockylinux', 92, NOW()),
+-- Ubuntu
+('Ubuntu 22.04 (Jammy)', 'images:ubuntu/jammy/cloud', 'Linux', 'x86_64', 'ubuntu', 100, NOW()),
+('Ubuntu 24.04 (Noble)', 'images:ubuntu/noble/cloud', 'Linux', 'x86_64', 'ubuntu', 101, NOW()),
+('Ubuntu 25.04 (Plucky)', 'images:ubuntu/25.04/cloud', 'Linux', 'x86_64', 'ubuntu', 102, NOW()),
+('Ubuntu 25.10 (Questing)', 'images:ubuntu/25.10/cloud', 'Linux', 'x86_64', 'ubuntu', 103, NOW());
diff --git a/server/prisma/migrations/20251213100000_refactor_auto_policy_intervals/migration.sql b/server/prisma/migrations/20251213100000_refactor_auto_policy_intervals/migration.sql
new file mode 100644
index 0000000..a5a931a
--- /dev/null
+++ b/server/prisma/migrations/20251213100000_refactor_auto_policy_intervals/migration.sql
@@ -0,0 +1,31 @@
+-- 自动快照/备份策略重构迁移
+-- 1. 将 interval_hours 改为 interval_minutes（支持更细粒度的频率设置）
+-- 2. 移除 retention_count（额度直接继承自套餐包）
+
+-- =====================================================
+-- 1. 修改 snapshot_policies 表
+-- =====================================================
+
+-- 添加 interval_minutes 字段，默认值为原 interval_hours * 60
+ALTER TABLE "snapshot_policies" ADD COLUMN "interval_minutes" INTEGER NOT NULL DEFAULT 360;
+
+-- 迁移现有数据：将 interval_hours 转换为分钟
+UPDATE "snapshot_policies" SET "interval_minutes" = "interval_hours" * 60;
+
+-- 删除旧字段
+ALTER TABLE "snapshot_policies" DROP COLUMN "interval_hours";
+ALTER TABLE "snapshot_policies" DROP COLUMN "retention_count";
+
+-- =====================================================
+-- 2. 修改 backup_policies 表
+-- =====================================================
+
+-- 添加 interval_minutes 字段，默认值为原 interval_hours * 60
+ALTER TABLE "backup_policies" ADD COLUMN "interval_minutes" INTEGER NOT NULL DEFAULT 1440;
+
+-- 迁移现有数据：将 interval_hours 转换为分钟
+UPDATE "backup_policies" SET "interval_minutes" = "interval_hours" * 60;
+
+-- 删除旧字段
+ALTER TABLE "backup_policies" DROP COLUMN "interval_hours";
+ALTER TABLE "backup_policies" DROP COLUMN "retention_count";
diff --git a/server/prisma/migrations/20251214084943_add_port_mapping_unique_constraint/migration.sql b/server/prisma/migrations/20251214084943_add_port_mapping_unique_constraint/migration.sql
new file mode 100644
index 0000000..b1b66bf
--- /dev/null
+++ b/server/prisma/migrations/20251214084943_add_port_mapping_unique_constraint/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[host_id,protocol,public_port]` on the table `port_mappings` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "port_mappings_host_id_protocol_public_port_key" ON "port_mappings"("host_id", "protocol", "public_port");
diff --git a/server/prisma/migrations/20251214090959_add_package_share_quota_fields/migration.sql b/server/prisma/migrations/20251214090959_add_package_share_quota_fields/migration.sql
new file mode 100644
index 0000000..9110c34
--- /dev/null
+++ b/server/prisma/migrations/20251214090959_add_package_share_quota_fields/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "package_shares" ADD COLUMN     "max_instances" INTEGER,
+ADD COLUMN     "quota_multiplier" DECIMAL(3,1);
diff --git a/server/prisma/migrations/20251214115302_add_package_instance_type/migration.sql b/server/prisma/migrations/20251214115302_add_package_instance_type/migration.sql
new file mode 100644
index 0000000..b96522f
--- /dev/null
+++ b/server/prisma/migrations/20251214115302_add_package_instance_type/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN     "instance_type" "InstanceType" NOT NULL DEFAULT 'container';
diff --git a/server/prisma/migrations/20251214200000_add_system_image_instance_type/migration.sql b/server/prisma/migrations/20251214200000_add_system_image_instance_type/migration.sql
new file mode 100644
index 0000000..9cd4b4e
--- /dev/null
+++ b/server/prisma/migrations/20251214200000_add_system_image_instance_type/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "system_images" ADD COLUMN "instance_type" TEXT NOT NULL DEFAULT 'both';
diff --git a/server/prisma/migrations/20251215081921_ipv6_routed_mode/migration.sql b/server/prisma/migrations/20251215081921_ipv6_routed_mode/migration.sql
new file mode 100644
index 0000000..2ca203a
--- /dev/null
+++ b/server/prisma/migrations/20251215081921_ipv6_routed_mode/migration.sql
@@ -0,0 +1,27 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN     "ipv6_parent_interface" TEXT;
+
+-- AlterTable
+ALTER TABLE "ip_addresses" ADD COLUMN     "is_custom" BOOLEAN NOT NULL DEFAULT false,
+ALTER COLUMN "device" SET DEFAULT 'eth1';
+
+-- CreateTable
+CREATE TABLE "ipv6_subnets" (
+    "id" SERIAL NOT NULL,
+    "cidr" TEXT NOT NULL,
+    "primary_ip" TEXT NOT NULL,
+    "device" TEXT NOT NULL DEFAULT 'eth1',
+    "instance_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ipv6_subnets_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ipv6_subnets_cidr_key" ON "ipv6_subnets"("cidr");
+
+-- CreateIndex
+CREATE INDEX "ipv6_subnets_instance_id_idx" ON "ipv6_subnets"("instance_id");
+
+-- AddForeignKey
+ALTER TABLE "ipv6_subnets" ADD CONSTRAINT "ipv6_subnets_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251216162514_add_storage_pools/migration.sql b/server/prisma/migrations/20251216162514_add_storage_pools/migration.sql
new file mode 100644
index 0000000..0d1b38c
--- /dev/null
+++ b/server/prisma/migrations/20251216162514_add_storage_pools/migration.sql
@@ -0,0 +1,46 @@
+/*
+  Warnings:
+
+  - The values [ipv4,ipv4_ipv6] on the enum `NetworkMode` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- CreateEnum
+CREATE TYPE "StoragePurpose" AS ENUM ('instance_data', 'instance_storage');
+
+-- AlterEnum
+BEGIN;
+CREATE TYPE "NetworkMode_new" AS ENUM ('nat', 'nat_ipv6');
+ALTER TABLE "public"."instances" ALTER COLUMN "network_mode" DROP DEFAULT;
+ALTER TABLE "public"."packages" ALTER COLUMN "network_mode" DROP DEFAULT;
+ALTER TABLE "packages" ALTER COLUMN "network_mode" TYPE "NetworkMode_new" USING ("network_mode"::text::"NetworkMode_new");
+ALTER TABLE "instances" ALTER COLUMN "network_mode" TYPE "NetworkMode_new" USING ("network_mode"::text::"NetworkMode_new");
+ALTER TYPE "NetworkMode" RENAME TO "NetworkMode_old";
+ALTER TYPE "NetworkMode_new" RENAME TO "NetworkMode";
+DROP TYPE "public"."NetworkMode_old";
+ALTER TABLE "instances" ALTER COLUMN "network_mode" SET DEFAULT 'nat';
+ALTER TABLE "packages" ALTER COLUMN "network_mode" SET DEFAULT 'nat';
+COMMIT;
+
+-- CreateTable
+CREATE TABLE "storage_pools" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "driver" TEXT NOT NULL,
+    "purpose" "StoragePurpose" NOT NULL DEFAULT 'instance_data',
+    "description" TEXT,
+    "config" JSONB DEFAULT '{}',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "storage_pools_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "storage_pools_host_id_idx" ON "storage_pools"("host_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "storage_pools_host_id_name_key" ON "storage_pools"("host_id", "name");
+
+-- AddForeignKey
+ALTER TABLE "storage_pools" ADD CONSTRAINT "storage_pools_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251217135047_add_caddy_proxy_sites/migration.sql b/server/prisma/migrations/20251217135047_add_caddy_proxy_sites/migration.sql
new file mode 100644
index 0000000..55f6401
--- /dev/null
+++ b/server/prisma/migrations/20251217135047_add_caddy_proxy_sites/migration.sql
@@ -0,0 +1,39 @@
+-- CreateEnum
+CREATE TYPE "ProxySiteStatus" AS ENUM ('pending', 'active', 'error');
+
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN     "caddy_enabled" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "caddy_password" TEXT,
+ADD COLUMN     "caddy_port" INTEGER NOT NULL DEFAULT 8444,
+ADD COLUMN     "caddy_username" TEXT;
+
+-- CreateTable
+CREATE TABLE "proxy_sites" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "domain" TEXT NOT NULL,
+    "target_port" INTEGER NOT NULL,
+    "status" "ProxySiteStatus" NOT NULL DEFAULT 'pending',
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "error" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "proxy_sites_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "proxy_sites_instance_id_idx" ON "proxy_sites"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "proxy_sites_host_id_idx" ON "proxy_sites"("host_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "proxy_sites_host_id_domain_key" ON "proxy_sites"("host_id", "domain");
+
+-- AddForeignKey
+ALTER TABLE "proxy_sites" ADD CONSTRAINT "proxy_sites_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "proxy_sites" ADD CONSTRAINT "proxy_sites_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251217142200_add_site_limit/migration.sql b/server/prisma/migrations/20251217142200_add_site_limit/migration.sql
new file mode 100644
index 0000000..88cd2f4
--- /dev/null
+++ b/server/prisma/migrations/20251217142200_add_site_limit/migration.sql
@@ -0,0 +1,12 @@
+-- AlterTable: 为套餐添加站点数量限制
+ALTER TABLE "packages" ADD COLUMN IF NOT EXISTS "site_limit" INTEGER NOT NULL DEFAULT 10;
+
+-- AlterTable: 为实例添加站点数量限制（可覆盖套餐设置）
+ALTER TABLE "instances" ADD COLUMN IF NOT EXISTS "site_limit" INTEGER;
+
+-- 对于已有实例，从套餐继承站点限制
+UPDATE "instances" i SET 
+  "site_limit" = COALESCE(i."site_limit", p."site_limit")
+FROM "packages" p 
+WHERE i."package_id" = p."id" 
+AND i."site_limit" IS NULL;
diff --git a/server/prisma/migrations/20251218042321_add_https_enabled_to_proxy_sites/migration.sql b/server/prisma/migrations/20251218042321_add_https_enabled_to_proxy_sites/migration.sql
new file mode 100644
index 0000000..313c9c1
--- /dev/null
+++ b/server/prisma/migrations/20251218042321_add_https_enabled_to_proxy_sites/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "proxy_sites" ADD COLUMN     "https_enabled" BOOLEAN NOT NULL DEFAULT true;
diff --git a/server/prisma/migrations/20251221104032_add_package_quota_and_update_defaults/migration.sql b/server/prisma/migrations/20251221104032_add_package_quota_and_update_defaults/migration.sql
new file mode 100644
index 0000000..7c29daf
--- /dev/null
+++ b/server/prisma/migrations/20251221104032_add_package_quota_and_update_defaults/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "user_quotas" ADD COLUMN     "package_limit" INTEGER NOT NULL DEFAULT 0,
+ADD COLUMN     "package_used" INTEGER NOT NULL DEFAULT 0,
+ALTER COLUMN "host_limit" SET DEFAULT 0,
+ALTER COLUMN "friend_limit" SET DEFAULT 0;
diff --git a/server/prisma/migrations/20251221125025_add_global_shared_to_package/migration.sql b/server/prisma/migrations/20251221125025_add_global_shared_to_package/migration.sql
new file mode 100644
index 0000000..711e95f
--- /dev/null
+++ b/server/prisma/migrations/20251221125025_add_global_shared_to_package/migration.sql
@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN     "global_max_instances" INTEGER,
+ADD COLUMN     "global_quota_multiplier" DECIMAL(3,1),
+ADD COLUMN     "global_shared" BOOLEAN NOT NULL DEFAULT false;
diff --git a/server/prisma/migrations/20251221135737_add_allow_instance_deletion_to_package/migration.sql b/server/prisma/migrations/20251221135737_add_allow_instance_deletion_to_package/migration.sql
new file mode 100644
index 0000000..4388bd1
--- /dev/null
+++ b/server/prisma/migrations/20251221135737_add_allow_instance_deletion_to_package/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN     "allow_instance_deletion" BOOLEAN NOT NULL DEFAULT true;
diff --git a/server/prisma/migrations/20251221141834_change_allow_instance_deletion_default_to_false/migration.sql b/server/prisma/migrations/20251221141834_change_allow_instance_deletion_default_to_false/migration.sql
new file mode 100644
index 0000000..0d78ab6
--- /dev/null
+++ b/server/prisma/migrations/20251221141834_change_allow_instance_deletion_default_to_false/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "packages" ALTER COLUMN "allow_instance_deletion" SET DEFAULT false;
diff --git a/server/prisma/migrations/20251221194038_remove_instance_quota_and_add_pinned/migration.sql b/server/prisma/migrations/20251221194038_remove_instance_quota_and_add_pinned/migration.sql
new file mode 100644
index 0000000..12005d8
--- /dev/null
+++ b/server/prisma/migrations/20251221194038_remove_instance_quota_and_add_pinned/migration.sql
@@ -0,0 +1,7 @@
+-- AlterTable: Add pinned field to help_articles
+ALTER TABLE "help_articles" ADD COLUMN "pinned" BOOLEAN NOT NULL DEFAULT false;
+
+-- AlterTable: Remove instance quota fields from user_quotas
+ALTER TABLE "user_quotas" DROP COLUMN "instance_limit";
+ALTER TABLE "user_quotas" DROP COLUMN "instance_used";
+
diff --git a/server/prisma/migrations/20251227014516_add_ban_reason/migration.sql b/server/prisma/migrations/20251227014516_add_ban_reason/migration.sql
new file mode 100644
index 0000000..e768482
--- /dev/null
+++ b/server/prisma/migrations/20251227014516_add_ban_reason/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "ban_reason" TEXT;
diff --git a/server/prisma/migrations/20251227054559_add_inbox_message/migration.sql b/server/prisma/migrations/20251227054559_add_inbox_message/migration.sql
new file mode 100644
index 0000000..fdc0ece
--- /dev/null
+++ b/server/prisma/migrations/20251227054559_add_inbox_message/migration.sql
@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "inbox_messages" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "event_type" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "is_read" BOOLEAN NOT NULL DEFAULT false,
+    "data" JSONB,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "inbox_messages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "inbox_messages_user_id_is_read_idx" ON "inbox_messages"("user_id", "is_read");
+
+-- CreateIndex
+CREATE INDEX "inbox_messages_user_id_created_at_idx" ON "inbox_messages"("user_id", "created_at" DESC);
+
+-- AddForeignKey
+ALTER TABLE "inbox_messages" ADD CONSTRAINT "inbox_messages_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251227063752_add_package_release_channel/migration.sql b/server/prisma/migrations/20251227063752_add_package_release_channel/migration.sql
new file mode 100644
index 0000000..babc008
--- /dev/null
+++ b/server/prisma/migrations/20251227063752_add_package_release_channel/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN     "release_channel_id" INTEGER;
+
+-- AddForeignKey
+ALTER TABLE "packages" ADD CONSTRAINT "packages_release_channel_id_fkey" FOREIGN KEY ("release_channel_id") REFERENCES "notification_channels"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251227085332_add_instance_task/migration.sql b/server/prisma/migrations/20251227085332_add_instance_task/migration.sql
new file mode 100644
index 0000000..f982b2c
--- /dev/null
+++ b/server/prisma/migrations/20251227085332_add_instance_task/migration.sql
@@ -0,0 +1,40 @@
+-- CreateEnum
+CREATE TYPE "InstanceTaskType" AS ENUM ('start', 'stop', 'restart', 'rebuild', 'clone');
+
+-- CreateEnum
+CREATE TYPE "InstanceTaskStatus" AS ENUM ('PENDING', 'PROCESSING', 'COMPLETED', 'FAILED');
+
+-- CreateTable
+CREATE TABLE "instance_tasks" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "task_type" "InstanceTaskType" NOT NULL,
+    "status" "InstanceTaskStatus" NOT NULL DEFAULT 'PENDING',
+    "progress" TEXT,
+    "retry_count" INTEGER NOT NULL DEFAULT 0,
+    "image_alias" TEXT,
+    "target_name" TEXT,
+    "target_host_id" INTEGER,
+    "snapshot_name" TEXT,
+    "new_instance_id" INTEGER,
+    "error" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "started_at" TIMESTAMP(3),
+    "finished_at" TIMESTAMP(3),
+
+    CONSTRAINT "instance_tasks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "instance_tasks_host_id_status_idx" ON "instance_tasks"("host_id", "status");
+
+-- CreateIndex
+CREATE INDEX "instance_tasks_instance_id_idx" ON "instance_tasks"("instance_id");
+
+-- CreateIndex
+CREATE INDEX "instance_tasks_user_id_idx" ON "instance_tasks"("user_id");
+
+-- AddForeignKey
+ALTER TABLE "instance_tasks" ADD CONSTRAINT "instance_tasks_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251227113416_add_proxy_site_remark/migration.sql b/server/prisma/migrations/20251227113416_add_proxy_site_remark/migration.sql
new file mode 100644
index 0000000..4edb62f
--- /dev/null
+++ b/server/prisma/migrations/20251227113416_add_proxy_site_remark/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "proxy_sites" ADD COLUMN     "remark" TEXT;
diff --git a/server/prisma/migrations/20251227123500_add_login_record/migration.sql b/server/prisma/migrations/20251227123500_add_login_record/migration.sql
new file mode 100644
index 0000000..3f1419c
--- /dev/null
+++ b/server/prisma/migrations/20251227123500_add_login_record/migration.sql
@@ -0,0 +1,24 @@
+-- CreateTable
+CREATE TABLE "login_records" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "ip" TEXT NOT NULL,
+    "country" TEXT,
+    "region" TEXT,
+    "city" TEXT,
+    "isp" TEXT,
+    "timezone" TEXT,
+    "user_agent" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "login_records_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "login_records_user_id_created_at_idx" ON "login_records"("user_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "login_records_user_id_ip_idx" ON "login_records"("user_id", "ip");
+
+-- AddForeignKey
+ALTER TABLE "login_records" ADD CONSTRAINT "login_records_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20251227151951_add_last_synced_at/migration.sql b/server/prisma/migrations/20251227151951_add_last_synced_at/migration.sql
new file mode 100644
index 0000000..1edab1b
--- /dev/null
+++ b/server/prisma/migrations/20251227151951_add_last_synced_at/migration.sql
@@ -0,0 +1,11 @@
+-- AlterTable
+ALTER TABLE "instances" ADD COLUMN     "last_synced_at" TIMESTAMP(3);
+
+-- CreateIndex
+CREATE INDEX "backup_policies_enabled_next_run_at_idx" ON "backup_policies"("enabled", "next_run_at");
+
+-- CreateIndex
+CREATE INDEX "instances_host_id_status_idx" ON "instances"("host_id", "status");
+
+-- CreateIndex
+CREATE INDEX "snapshot_policies_enabled_next_run_at_idx" ON "snapshot_policies"("enabled", "next_run_at");
diff --git a/server/prisma/migrations/20251228075452_add_ssh_key_id_to_instance_task/migration.sql b/server/prisma/migrations/20251228075452_add_ssh_key_id_to_instance_task/migration.sql
new file mode 100644
index 0000000..af31b09
--- /dev/null
+++ b/server/prisma/migrations/20251228075452_add_ssh_key_id_to_instance_task/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "instance_tasks" ADD COLUMN     "ssh_key_id" INTEGER;
diff --git a/server/prisma/migrations/20251229000000_add_transfer_processing_status/migration.sql b/server/prisma/migrations/20251229000000_add_transfer_processing_status/migration.sql
new file mode 100644
index 0000000..7eee774
--- /dev/null
+++ b/server/prisma/migrations/20251229000000_add_transfer_processing_status/migration.sql
@@ -0,0 +1,5 @@
+-- AlterEnum: Add 'processing' to TransferStatus
+ALTER TYPE "TransferStatus" ADD VALUE 'processing';
+
+-- AlterTable: Add updated_at column to instance_transfers
+ALTER TABLE "instance_transfers" ADD COLUMN "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
diff --git a/server/prisma/migrations/20260101100908_add_ticket_system/migration.sql b/server/prisma/migrations/20260101100908_add_ticket_system/migration.sql
new file mode 100644
index 0000000..163543a
--- /dev/null
+++ b/server/prisma/migrations/20260101100908_add_ticket_system/migration.sql
@@ -0,0 +1,99 @@
+-- CreateEnum
+CREATE TYPE "AnnouncementType" AS ENUM ('system_broadcast', 'host_broadcast', 'admin_message', 'host_message');
+
+-- CreateEnum
+CREATE TYPE "TicketStatus" AS ENUM ('open', 'in_progress', 'resolved', 'closed');
+
+-- CreateEnum
+CREATE TYPE "TicketPriority" AS ENUM ('low', 'normal', 'high', 'urgent');
+
+-- AlterTable
+ALTER TABLE "instance_transfers" ALTER COLUMN "updated_at" DROP DEFAULT;
+
+-- CreateTable
+CREATE TABLE "announcements" (
+    "id" SERIAL NOT NULL,
+    "type" "AnnouncementType" NOT NULL,
+    "sender_id" INTEGER NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "recipient_count" INTEGER NOT NULL,
+    "host_id" INTEGER,
+    "target_user_id" INTEGER,
+    "instance_id" INTEGER,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "announcements_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "tickets" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "instance_id" INTEGER,
+    "subject" TEXT NOT NULL,
+    "category" TEXT NOT NULL DEFAULT 'general',
+    "priority" "TicketPriority" NOT NULL DEFAULT 'normal',
+    "status" "TicketStatus" NOT NULL DEFAULT 'open',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "resolved_at" TIMESTAMP(3),
+    "closed_at" TIMESTAMP(3),
+
+    CONSTRAINT "tickets_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ticket_messages" (
+    "id" SERIAL NOT NULL,
+    "ticket_id" INTEGER NOT NULL,
+    "sender_id" INTEGER NOT NULL,
+    "content" TEXT NOT NULL,
+    "is_from_owner" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ticket_messages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "announcements_sender_id_created_at_idx" ON "announcements"("sender_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "announcements_host_id_created_at_idx" ON "announcements"("host_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "announcements_type_created_at_idx" ON "announcements"("type", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "tickets_user_id_status_idx" ON "tickets"("user_id", "status");
+
+-- CreateIndex
+CREATE INDEX "tickets_host_id_status_idx" ON "tickets"("host_id", "status");
+
+-- CreateIndex
+CREATE INDEX "tickets_status_created_at_idx" ON "tickets"("status", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "ticket_messages_ticket_id_created_at_idx" ON "ticket_messages"("ticket_id", "created_at");
+
+-- AddForeignKey
+ALTER TABLE "announcements" ADD CONSTRAINT "announcements_sender_id_fkey" FOREIGN KEY ("sender_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "announcements" ADD CONSTRAINT "announcements_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "tickets" ADD CONSTRAINT "tickets_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "tickets" ADD CONSTRAINT "tickets_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "tickets" ADD CONSTRAINT "tickets_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ticket_messages" ADD CONSTRAINT "ticket_messages_ticket_id_fkey" FOREIGN KEY ("ticket_id") REFERENCES "tickets"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ticket_messages" ADD CONSTRAINT "ticket_messages_sender_id_fkey" FOREIGN KEY ("sender_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260101100917_add_ticket_system/migration.sql b/server/prisma/migrations/20260101100917_add_ticket_system/migration.sql
new file mode 100644
index 0000000..af5102c
--- /dev/null
+++ b/server/prisma/migrations/20260101100917_add_ticket_system/migration.sql
@@ -0,0 +1 @@
+-- This is an empty migration.
\ No newline at end of file
diff --git a/server/prisma/migrations/20260101163409_add_checkin_system/migration.sql b/server/prisma/migrations/20260101163409_add_checkin_system/migration.sql
new file mode 100644
index 0000000..3abb79c
--- /dev/null
+++ b/server/prisma/migrations/20260101163409_add_checkin_system/migration.sql
@@ -0,0 +1,57 @@
+-- CreateEnum
+CREATE TYPE "RedeemCodeType" AS ENUM ('c', 'r', 'd', 't');
+
+-- CreateTable
+CREATE TABLE "checkin_records" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "redeem_code" TEXT NOT NULL,
+    "code_type" "RedeemCodeType" NOT NULL,
+    "code_value" INTEGER NOT NULL,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "used_at" TIMESTAMP(3),
+    "used_by" INTEGER,
+    "used_for" INTEGER,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "checkin_records_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "checkin_stats" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "last_checkin_date" TIMESTAMP(3),
+    "last_redeem_date" TIMESTAMP(3),
+    "consecutive_others_use" INTEGER NOT NULL DEFAULT 0,
+    "self_only_mode" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "checkin_stats_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "checkin_records_redeem_code_key" ON "checkin_records"("redeem_code");
+
+-- CreateIndex
+CREATE INDEX "checkin_records_user_id_idx" ON "checkin_records"("user_id");
+
+-- CreateIndex
+CREATE INDEX "checkin_records_used_by_idx" ON "checkin_records"("used_by");
+
+-- CreateIndex
+CREATE INDEX "checkin_records_expires_at_idx" ON "checkin_records"("expires_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "checkin_stats_user_id_key" ON "checkin_stats"("user_id");
+
+-- AddForeignKey
+ALTER TABLE "checkin_records" ADD CONSTRAINT "checkin_records_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "checkin_records" ADD CONSTRAINT "checkin_records_used_by_fkey" FOREIGN KEY ("used_by") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "checkin_records" ADD CONSTRAINT "checkin_records_used_for_fkey" FOREIGN KEY ("used_for") REFERENCES "instances"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "checkin_stats" ADD CONSTRAINT "checkin_stats_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260103130305_add_redeem_codes/migration.sql b/server/prisma/migrations/20260103130305_add_redeem_codes/migration.sql
new file mode 100644
index 0000000..bc3b765
--- /dev/null
+++ b/server/prisma/migrations/20260103130305_add_redeem_codes/migration.sql
@@ -0,0 +1,64 @@
+-- CreateTable
+CREATE TABLE "redeem_codes" (
+    "id" SERIAL NOT NULL,
+    "code" TEXT NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "created_by_id" INTEGER NOT NULL,
+    "code_type" "RedeemCodeType" NOT NULL,
+    "code_value" INTEGER NOT NULL,
+    "max_uses" INTEGER NOT NULL DEFAULT 1,
+    "used_count" INTEGER NOT NULL DEFAULT 0,
+    "expires_at" TIMESTAMP(3),
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "redeem_codes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "redeem_code_usages" (
+    "id" SERIAL NOT NULL,
+    "redeem_code_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "used_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "redeem_code_usages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "redeem_codes_code_key" ON "redeem_codes"("code");
+
+-- CreateIndex
+CREATE INDEX "redeem_codes_host_id_idx" ON "redeem_codes"("host_id");
+
+-- CreateIndex
+CREATE INDEX "redeem_codes_created_by_id_idx" ON "redeem_codes"("created_by_id");
+
+-- CreateIndex
+CREATE INDEX "redeem_codes_enabled_idx" ON "redeem_codes"("enabled");
+
+-- CreateIndex
+CREATE INDEX "redeem_code_usages_redeem_code_id_idx" ON "redeem_code_usages"("redeem_code_id");
+
+-- CreateIndex
+CREATE INDEX "redeem_code_usages_user_id_idx" ON "redeem_code_usages"("user_id");
+
+-- CreateIndex
+CREATE INDEX "redeem_code_usages_instance_id_idx" ON "redeem_code_usages"("instance_id");
+
+-- AddForeignKey
+ALTER TABLE "redeem_codes" ADD CONSTRAINT "redeem_codes_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "redeem_codes" ADD CONSTRAINT "redeem_codes_created_by_id_fkey" FOREIGN KEY ("created_by_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "redeem_code_usages" ADD CONSTRAINT "redeem_code_usages_redeem_code_id_fkey" FOREIGN KEY ("redeem_code_id") REFERENCES "redeem_codes"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "redeem_code_usages" ADD CONSTRAINT "redeem_code_usages_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "redeem_code_usages" ADD CONSTRAINT "redeem_code_usages_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260103140651_add_redeem_code_batch_id/migration.sql b/server/prisma/migrations/20260103140651_add_redeem_code_batch_id/migration.sql
new file mode 100644
index 0000000..767f0af
--- /dev/null
+++ b/server/prisma/migrations/20260103140651_add_redeem_code_batch_id/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "redeem_codes" ADD COLUMN     "batch_id" TEXT;
+
+-- CreateIndex
+CREATE INDEX "redeem_codes_batch_id_idx" ON "redeem_codes"("batch_id");
diff --git a/server/prisma/migrations/20260103141836_add_batch_id_to_usage/migration.sql b/server/prisma/migrations/20260103141836_add_batch_id_to_usage/migration.sql
new file mode 100644
index 0000000..322d29a
--- /dev/null
+++ b/server/prisma/migrations/20260103141836_add_batch_id_to_usage/migration.sql
@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[user_id,batch_id]` on the table `redeem_code_usages` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "redeem_code_usages" ADD COLUMN     "batch_id" TEXT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "redeem_code_usages_user_id_batch_id_key" ON "redeem_code_usages"("user_id", "batch_id");
diff --git a/server/prisma/migrations/20260103_add_billing_and_suspend_fields/migration.sql b/server/prisma/migrations/20260103_add_billing_and_suspend_fields/migration.sql
new file mode 100644
index 0000000..da241e3
--- /dev/null
+++ b/server/prisma/migrations/20260103_add_billing_and_suspend_fields/migration.sql
@@ -0,0 +1,18 @@
+-- AlterEnum: Add 'suspended' to InstanceStatus
+ALTER TYPE "InstanceStatus" ADD VALUE 'suspended';
+
+-- AlterTable: Add billing fields to packages
+ALTER TABLE "packages" ADD COLUMN "price_monthly" DECIMAL(10,2);
+ALTER TABLE "packages" ADD COLUMN "setup_fee" DECIMAL(10,2) NOT NULL DEFAULT 0;
+
+-- AlterTable: Add billing and suspend fields to instances
+ALTER TABLE "instances" ADD COLUMN "expires_at" TIMESTAMP(3);
+ALTER TABLE "instances" ADD COLUMN "suspended_at" TIMESTAMP(3);
+ALTER TABLE "instances" ADD COLUMN "suspended_by" INTEGER;
+ALTER TABLE "instances" ADD COLUMN "suspend_reason" TEXT;
+ALTER TABLE "instances" ADD COLUMN "billing_price" DECIMAL(10,2);
+ALTER TABLE "instances" ADD COLUMN "auto_renew" BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE "instances" ADD COLUMN "expiry_notified_at" TIMESTAMP(3);
+
+-- CreateIndex: For billing scheduler to find expiring instances
+CREATE INDEX "instances_expires_at_idx" ON "instances"("expires_at");
diff --git a/server/prisma/migrations/20260106000000_add_custom_init_commands/migration.sql b/server/prisma/migrations/20260106000000_add_custom_init_commands/migration.sql
new file mode 100644
index 0000000..0b8ec46
--- /dev/null
+++ b/server/prisma/migrations/20260106000000_add_custom_init_commands/migration.sql
@@ -0,0 +1,26 @@
+-- CreateTable
+CREATE TABLE "custom_init_commands" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "command" TEXT NOT NULL,
+    "distros" TEXT NOT NULL,
+    "description" TEXT,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "custom_init_commands_pkey" PRIMARY KEY ("id")
+);
+
+-- AlterTable: Add custom_init_command_ids to instance_tasks
+ALTER TABLE "instance_tasks" ADD COLUMN "custom_init_command_ids" TEXT;
+
+-- CreateIndex
+CREATE INDEX "custom_init_commands_user_id_idx" ON "custom_init_commands"("user_id");
+
+-- CreateIndex
+CREATE INDEX "custom_init_commands_user_id_enabled_idx" ON "custom_init_commands"("user_id", "enabled");
+
+-- AddForeignKey
+ALTER TABLE "custom_init_commands" ADD CONSTRAINT "custom_init_commands_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260106190000_add_last_ipv6_reassign_at/migration.sql b/server/prisma/migrations/20260106190000_add_last_ipv6_reassign_at/migration.sql
new file mode 100644
index 0000000..1224b6c
--- /dev/null
+++ b/server/prisma/migrations/20260106190000_add_last_ipv6_reassign_at/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable: 添加 IPv6 重新分配冷却时间字段（每实例每天限一次）
+ALTER TABLE "instances" ADD COLUMN "last_ipv6_reassign_at" TIMESTAMP(3);
diff --git a/server/prisma/migrations/20260110000000_add_host_transfer_enabled/migration.sql b/server/prisma/migrations/20260110000000_add_host_transfer_enabled/migration.sql
new file mode 100644
index 0000000..63b0a73
--- /dev/null
+++ b/server/prisma/migrations/20260110000000_add_host_transfer_enabled/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "transfer_enabled" BOOLEAN NOT NULL DEFAULT true;
diff --git a/server/prisma/migrations/20260111_add_billing_system/migration.sql b/server/prisma/migrations/20260111_add_billing_system/migration.sql
new file mode 100644
index 0000000..b7cbf56
--- /dev/null
+++ b/server/prisma/migrations/20260111_add_billing_system/migration.sql
@@ -0,0 +1,209 @@
+-- CreateEnum: Balance Log Types
+CREATE TYPE "BalanceLogType" AS ENUM ('recharge', 'consume', 'refund', 'admin_adjust', 'gift');
+
+-- CreateEnum: Payment Provider Types
+CREATE TYPE "PaymentProviderType" AS ENUM ('yipay', 'stripe', 'alipay_direct', 'wechat_direct', 'manual');
+
+-- CreateEnum: Payment Provider Status
+CREATE TYPE "PaymentProviderStatus" AS ENUM ('active', 'disabled', 'testing');
+
+-- CreateEnum: Recharge Status
+CREATE TYPE "RechargeStatus" AS ENUM ('pending', 'paid', 'completed', 'failed', 'cancelled', 'refunded');
+
+-- CreateEnum: Billing Record Types
+CREATE TYPE "BillingRecordType" AS ENUM ('newPurchase', 'renew', 'upgrade', 'downgrade', 'refund');
+
+-- AlterTable: Add balance field to users
+ALTER TABLE "users" ADD COLUMN IF NOT EXISTS "balance" DECIMAL(10,2) NOT NULL DEFAULT 0;
+
+-- AlterTable: Add billing fields to instances
+ALTER TABLE "instances" ADD COLUMN IF NOT EXISTS "package_plan_id" INTEGER;
+ALTER TABLE "instances" ADD COLUMN IF NOT EXISTS "billing_cycle" INTEGER;
+ALTER TABLE "instances" ADD COLUMN IF NOT EXISTS "auto_renew_attempts" INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE "instances" ADD COLUMN IF NOT EXISTS "last_auto_renew_attempt_at" TIMESTAMP(3);
+ALTER TABLE "instances" ADD COLUMN IF NOT EXISTS "version" INTEGER NOT NULL DEFAULT 0;
+
+-- CreateTable: PaymentProvider
+CREATE TABLE IF NOT EXISTS "payment_providers" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "type" "PaymentProviderType" NOT NULL,
+    "status" "PaymentProviderStatus" NOT NULL DEFAULT 'disabled',
+    "config" JSONB NOT NULL DEFAULT '{}',
+    "methods" JSONB NOT NULL DEFAULT '[]',
+    "fee_rate" DECIMAL(5,4) NOT NULL DEFAULT 0,
+    "fee_fixed" DECIMAL(10,2) NOT NULL DEFAULT 0,
+    "min_amount" DECIMAL(10,2) NOT NULL DEFAULT 1,
+    "max_amount" DECIMAL(10,2),
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "payment_providers_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: BalanceLog
+CREATE TABLE IF NOT EXISTS "balance_logs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "type" "BalanceLogType" NOT NULL,
+    "amount" DECIMAL(10,2) NOT NULL,
+    "balance_before" DECIMAL(10,2) NOT NULL,
+    "balance_after" DECIMAL(10,2) NOT NULL,
+    "order_id" TEXT,
+    "instance_id" INTEGER,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "balance_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: RechargeRecord
+CREATE TABLE IF NOT EXISTS "recharge_records" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "provider_id" INTEGER NOT NULL,
+    "order_no" TEXT NOT NULL,
+    "trade_no" TEXT,
+    "amount" DECIMAL(10,2) NOT NULL,
+    "actual_amount" DECIMAL(10,2),
+    "fee" DECIMAL(10,2) NOT NULL DEFAULT 0,
+    "payment_method" TEXT,
+    "status" "RechargeStatus" NOT NULL DEFAULT 'pending',
+    "callback_data" JSONB,
+    "callback_at" TIMESTAMP(3),
+    "fail_reason" TEXT,
+    "ip" TEXT,
+    "user_agent" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "expired_at" TIMESTAMP(3),
+    "completed_at" TIMESTAMP(3),
+
+    CONSTRAINT "recharge_records_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: PackagePlan
+CREATE TABLE IF NOT EXISTS "package_plans" (
+    "id" SERIAL NOT NULL,
+    "package_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "cpu" INTEGER NOT NULL,
+    "memory" INTEGER NOT NULL,
+    "disk" INTEGER NOT NULL,
+    "port_limit" INTEGER NOT NULL,
+    "snapshot_limit" INTEGER NOT NULL,
+    "backup_limit" INTEGER NOT NULL,
+    "site_limit" INTEGER NOT NULL,
+    "traffic_limit" BIGINT NOT NULL,
+    "traffic_limit_speed" TEXT NOT NULL DEFAULT '1Mbit',
+    "price" DECIMAL(10,2) NOT NULL,
+    "billing_cycle" INTEGER NOT NULL DEFAULT 1,
+    "setup_fee" DECIMAL(10,2) NOT NULL DEFAULT 0,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "stock_limit" INTEGER,
+    "stock_used" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "package_plans_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: InstanceBillingRecord
+CREATE TABLE IF NOT EXISTS "instance_billing_records" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "type" "BillingRecordType" NOT NULL,
+    "amount" DECIMAL(10,2) NOT NULL,
+    "months" INTEGER NOT NULL DEFAULT 1,
+    "period_start" TIMESTAMP(3) NOT NULL,
+    "period_end" TIMESTAMP(3) NOT NULL,
+    "balance_log_id" INTEGER,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "instance_billing_records_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX IF NOT EXISTS "recharge_records_order_no_key" ON "recharge_records"("order_no");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "balance_logs_user_id_created_at_idx" ON "balance_logs"("user_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "balance_logs_type_idx" ON "balance_logs"("type");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "recharge_records_user_id_status_idx" ON "recharge_records"("user_id", "status");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "recharge_records_status_created_at_idx" ON "recharge_records"("status", "created_at");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "recharge_records_order_no_idx" ON "recharge_records"("order_no");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "recharge_records_trade_no_idx" ON "recharge_records"("trade_no");
+
+-- CreateIndex
+CREATE UNIQUE INDEX IF NOT EXISTS "package_plans_package_id_name_key" ON "package_plans"("package_id", "name");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "package_plans_package_id_is_active_idx" ON "package_plans"("package_id", "is_active");
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "instance_billing_records_instance_id_created_at_idx" ON "instance_billing_records"("instance_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX IF NOT EXISTS "instance_billing_records_user_id_created_at_idx" ON "instance_billing_records"("user_id", "created_at" DESC);
+
+-- AddForeignKey (only if not exists - handle gracefully)
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'balance_logs_user_id_fkey') THEN
+        ALTER TABLE "balance_logs" ADD CONSTRAINT "balance_logs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'recharge_records_user_id_fkey') THEN
+        ALTER TABLE "recharge_records" ADD CONSTRAINT "recharge_records_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'recharge_records_provider_id_fkey') THEN
+        ALTER TABLE "recharge_records" ADD CONSTRAINT "recharge_records_provider_id_fkey" FOREIGN KEY ("provider_id") REFERENCES "payment_providers"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'package_plans_package_id_fkey') THEN
+        ALTER TABLE "package_plans" ADD CONSTRAINT "package_plans_package_id_fkey" FOREIGN KEY ("package_id") REFERENCES "packages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'instances_package_plan_id_fkey') THEN
+        ALTER TABLE "instances" ADD CONSTRAINT "instances_package_plan_id_fkey" FOREIGN KEY ("package_plan_id") REFERENCES "package_plans"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'instance_billing_records_instance_id_fkey') THEN
+        ALTER TABLE "instance_billing_records" ADD CONSTRAINT "instance_billing_records_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- Remove old billing fields from packages (if exist)
+ALTER TABLE "packages" DROP COLUMN IF EXISTS "price_monthly";
+ALTER TABLE "packages" DROP COLUMN IF EXISTS "setup_fee";
diff --git a/server/prisma/migrations/20260113000000_replace_stock_with_sla_guarantee/migration.sql b/server/prisma/migrations/20260113000000_replace_stock_with_sla_guarantee/migration.sql
new file mode 100644
index 0000000..8a38aab
--- /dev/null
+++ b/server/prisma/migrations/20260113000000_replace_stock_with_sla_guarantee/migration.sql
@@ -0,0 +1,9 @@
+-- Replace stock_limit/stock_used with sla_guarantee in package_plans table
+-- This migration converts the inventory system to an SLA guarantee display
+
+-- Step 1: Add the new sla_guarantee column
+ALTER TABLE "package_plans" ADD COLUMN IF NOT EXISTS "sla_guarantee" DECIMAL(5,2);
+
+-- Step 2: Drop the old stock columns (no data migration needed as we're changing the concept entirely)
+ALTER TABLE "package_plans" DROP COLUMN IF EXISTS "stock_limit";
+ALTER TABLE "package_plans" DROP COLUMN IF EXISTS "stock_used";
diff --git a/server/prisma/migrations/20260115000000_add_aff_system/migration.sql b/server/prisma/migrations/20260115000000_add_aff_system/migration.sql
new file mode 100644
index 0000000..593719f
--- /dev/null
+++ b/server/prisma/migrations/20260115000000_add_aff_system/migration.sql
@@ -0,0 +1,152 @@
+-- CreateEnum: AFF Log Types (if not exists)
+DO $$ BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'AffLogType') THEN
+        CREATE TYPE "AffLogType" AS ENUM ('new_purchase', 'renew', 'convert');
+    END IF;
+END $$;
+
+-- CreateEnum: AFF Withdrawal Status (if not exists)
+DO $$ BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'AffWithdrawalStatus') THEN
+        CREATE TYPE "AffWithdrawalStatus" AS ENUM ('pending', 'approved', 'rejected');
+    END IF;
+END $$;
+
+-- AlterTable: Add AFF fields to users
+ALTER TABLE "users" ADD COLUMN IF NOT EXISTS "aff_balance" DECIMAL(10,2) NOT NULL DEFAULT 0;
+ALTER TABLE "users" ADD COLUMN IF NOT EXISTS "aff_activated_at" TIMESTAMP(3);
+
+-- CreateTable: AffCode (优惠码)
+CREATE TABLE IF NOT EXISTS "aff_codes" (
+    "id" SERIAL NOT NULL,
+    "code" TEXT NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "package_plan_id" INTEGER NOT NULL,
+    "discount_rate" DECIMAL(5,4) NOT NULL DEFAULT 0.05,
+    "commission_rate" DECIMAL(5,4) NOT NULL DEFAULT 0.05,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "used_count" INTEGER NOT NULL DEFAULT 0,
+    "total_earnings" DECIMAL(10,2) NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "aff_codes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: AffBinding (实例与优惠码绑定)
+CREATE TABLE IF NOT EXISTS "aff_bindings" (
+    "id" SERIAL NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "aff_code_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "aff_bindings_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: AffLog (AFF余额变动日志)
+CREATE TABLE IF NOT EXISTS "aff_logs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "aff_code_id" INTEGER,
+    "instance_id" INTEGER,
+    "type" "AffLogType" NOT NULL,
+    "amount" DECIMAL(10,2) NOT NULL,
+    "original_amount" DECIMAL(10,2),
+    "balance_before" DECIMAL(10,2) NOT NULL,
+    "balance_after" DECIMAL(10,2) NOT NULL,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "aff_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable: AffWithdrawal (AFF余额转化申请)
+CREATE TABLE IF NOT EXISTS "aff_withdrawals" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "amount" DECIMAL(10,2) NOT NULL,
+    "status" "AffWithdrawalStatus" NOT NULL DEFAULT 'pending',
+    "reject_reason" TEXT,
+    "reviewed_by" INTEGER,
+    "reviewed_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "aff_withdrawals_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex: Unique code
+CREATE UNIQUE INDEX IF NOT EXISTS "aff_codes_code_key" ON "aff_codes"("code");
+
+-- CreateIndex: User can only have one code per plan
+CREATE UNIQUE INDEX IF NOT EXISTS "aff_codes_user_id_package_plan_id_key" ON "aff_codes"("user_id", "package_plan_id");
+
+-- CreateIndex: AffCode indexes
+CREATE INDEX IF NOT EXISTS "aff_codes_user_id_idx" ON "aff_codes"("user_id");
+CREATE INDEX IF NOT EXISTS "aff_codes_package_plan_id_idx" ON "aff_codes"("package_plan_id");
+
+-- CreateIndex: AffBinding - one instance can only bind one code
+CREATE UNIQUE INDEX IF NOT EXISTS "aff_bindings_instance_id_key" ON "aff_bindings"("instance_id");
+CREATE INDEX IF NOT EXISTS "aff_bindings_aff_code_id_idx" ON "aff_bindings"("aff_code_id");
+
+-- CreateIndex: AffLog indexes
+CREATE INDEX IF NOT EXISTS "aff_logs_user_id_created_at_idx" ON "aff_logs"("user_id", "created_at" DESC);
+CREATE INDEX IF NOT EXISTS "aff_logs_aff_code_id_idx" ON "aff_logs"("aff_code_id");
+
+-- CreateIndex: AffWithdrawal indexes
+CREATE INDEX IF NOT EXISTS "aff_withdrawals_user_id_status_idx" ON "aff_withdrawals"("user_id", "status");
+CREATE INDEX IF NOT EXISTS "aff_withdrawals_status_created_at_idx" ON "aff_withdrawals"("status", "created_at");
+
+-- AddForeignKey: AffCode -> User
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_codes_user_id_fkey') THEN
+        ALTER TABLE "aff_codes" ADD CONSTRAINT "aff_codes_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- AddForeignKey: AffCode -> PackagePlan
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_codes_package_plan_id_fkey') THEN
+        ALTER TABLE "aff_codes" ADD CONSTRAINT "aff_codes_package_plan_id_fkey" FOREIGN KEY ("package_plan_id") REFERENCES "package_plans"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- AddForeignKey: AffBinding -> Instance
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_bindings_instance_id_fkey') THEN
+        ALTER TABLE "aff_bindings" ADD CONSTRAINT "aff_bindings_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- AddForeignKey: AffBinding -> AffCode
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_bindings_aff_code_id_fkey') THEN
+        ALTER TABLE "aff_bindings" ADD CONSTRAINT "aff_bindings_aff_code_id_fkey" FOREIGN KEY ("aff_code_id") REFERENCES "aff_codes"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- AddForeignKey: AffLog -> User
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_logs_user_id_fkey') THEN
+        ALTER TABLE "aff_logs" ADD CONSTRAINT "aff_logs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- AddForeignKey: AffLog -> AffCode (SetNull on delete)
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_logs_aff_code_id_fkey') THEN
+        ALTER TABLE "aff_logs" ADD CONSTRAINT "aff_logs_aff_code_id_fkey" FOREIGN KEY ("aff_code_id") REFERENCES "aff_codes"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+    END IF;
+END $$;
+
+-- AddForeignKey: AffWithdrawal -> User
+DO $$
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conname = 'aff_withdrawals_user_id_fkey') THEN
+        ALTER TABLE "aff_withdrawals" ADD CONSTRAINT "aff_withdrawals_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+    END IF;
+END $$;
diff --git a/server/prisma/migrations/20260117000000_add_payment_callback_table/migration.sql b/server/prisma/migrations/20260117000000_add_payment_callback_table/migration.sql
new file mode 100644
index 0000000..d3b22ae
--- /dev/null
+++ b/server/prisma/migrations/20260117000000_add_payment_callback_table/migration.sql
@@ -0,0 +1,18 @@
+-- CreateTable: 支付回调防重放记录
+CREATE TABLE IF NOT EXISTS "payment_callbacks" (
+    "id" SERIAL NOT NULL,
+    "provider_id" INTEGER NOT NULL,
+    "order_no" TEXT NOT NULL,
+    "trade_no" TEXT,
+    "callback_ip" TEXT,
+    "processed" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "payment_callbacks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex: 联合唯一索引防重放
+CREATE UNIQUE INDEX IF NOT EXISTS "payment_callbacks_provider_id_order_no_trade_no_key" ON "payment_callbacks"("provider_id", "order_no", "trade_no");
+
+-- CreateIndex: 用于定期清理
+CREATE INDEX IF NOT EXISTS "payment_callbacks_created_at_idx" ON "payment_callbacks"("created_at");
diff --git a/server/prisma/migrations/20260117000000_ticket_optional_host/migration.sql b/server/prisma/migrations/20260117000000_ticket_optional_host/migration.sql
new file mode 100644
index 0000000..585a3b6
--- /dev/null
+++ b/server/prisma/migrations/20260117000000_ticket_optional_host/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable: Make host_id optional in tickets table
+-- This allows users to create tickets without selecting an instance
+-- (e.g., for billing/recharge issues before having any instances)
+
+ALTER TABLE "tickets" ALTER COLUMN "host_id" DROP NOT NULL;
diff --git a/server/prisma/migrations/20260118000000_add_last_plan_change_at/migration.sql b/server/prisma/migrations/20260118000000_add_last_plan_change_at/migration.sql
new file mode 100644
index 0000000..577c448
--- /dev/null
+++ b/server/prisma/migrations/20260118000000_add_last_plan_change_at/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "instances" ADD COLUMN "last_plan_change_at" TIMESTAMP(3);
diff --git a/server/prisma/migrations/20260121000000_add_global_aff_code/migration.sql b/server/prisma/migrations/20260121000000_add_global_aff_code/migration.sql
new file mode 100644
index 0000000..dadfe67
--- /dev/null
+++ b/server/prisma/migrations/20260121000000_add_global_aff_code/migration.sql
@@ -0,0 +1,18 @@
+-- AlterTable: Make package_plan_id nullable to support global AFF codes
+-- Global AFF codes have package_plan_id = NULL and can be used for all paid plans
+
+-- Step 1: Drop the existing foreign key constraint
+ALTER TABLE "aff_codes" DROP CONSTRAINT IF EXISTS "aff_codes_package_plan_id_fkey";
+
+-- Step 2: Alter column to be nullable
+ALTER TABLE "aff_codes" ALTER COLUMN "package_plan_id" DROP NOT NULL;
+
+-- Step 3: Re-add foreign key with ON DELETE CASCADE (allows NULL values)
+ALTER TABLE "aff_codes" ADD CONSTRAINT "aff_codes_package_plan_id_fkey" 
+    FOREIGN KEY ("package_plan_id") REFERENCES "package_plans"("id") 
+    ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- Note: The unique constraint on (user_id, package_plan_id) remains
+-- In PostgreSQL, NULL values are not considered equal for unique constraints,
+-- so multiple rows with (same_user_id, NULL) would be allowed by the database.
+-- The application layer uses transactions to prevent duplicate global codes per user.
diff --git a/server/prisma/migrations/20260130000000_add_host_traffic_reset_day/migration.sql b/server/prisma/migrations/20260130000000_add_host_traffic_reset_day/migration.sql
new file mode 100644
index 0000000..08714c0
--- /dev/null
+++ b/server/prisma/migrations/20260130000000_add_host_traffic_reset_day/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "traffic_reset_day" INTEGER NOT NULL DEFAULT 1;
diff --git a/server/prisma/migrations/20260130200000_add_entertainment_lottery_tables/migration.sql b/server/prisma/migrations/20260130200000_add_entertainment_lottery_tables/migration.sql
new file mode 100644
index 0000000..dcdaa9e
--- /dev/null
+++ b/server/prisma/migrations/20260130200000_add_entertainment_lottery_tables/migration.sql
@@ -0,0 +1,145 @@
+-- CreateEnum
+CREATE TYPE "PointsLogType" AS ENUM ('convert', 'lottery_win', 'lottery_spend', 'admin_adjust');
+
+-- CreateEnum
+CREATE TYPE "LotteryPrizeType" AS ENUM ('nothing', 'points', 'balance', 'instance');
+
+-- CreateEnum
+CREATE TYPE "LotteryRecordStatus" AS ENUM ('pending', 'delivered', 'claimed', 'expired');
+
+-- CreateTable
+CREATE TABLE "user_points" (
+    "user_id" INTEGER NOT NULL,
+    "points" INTEGER NOT NULL DEFAULT 0,
+    "total_earned" INTEGER NOT NULL DEFAULT 0,
+    "total_spent" INTEGER NOT NULL DEFAULT 0,
+    "converted_consume" DECIMAL(10,2) NOT NULL DEFAULT 0,
+    "last_converted_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_points_pkey" PRIMARY KEY ("user_id")
+);
+
+-- CreateTable
+CREATE TABLE "points_logs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "type" "PointsLogType" NOT NULL,
+    "amount" INTEGER NOT NULL,
+    "points_before" INTEGER NOT NULL,
+    "points_after" INTEGER NOT NULL,
+    "related_id" INTEGER,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "points_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "lotteries" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "cost_points" INTEGER NOT NULL,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "start_at" TIMESTAMP(3),
+    "end_at" TIMESTAMP(3),
+    "total_draws" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+    "created_by" INTEGER NOT NULL,
+
+    CONSTRAINT "lotteries_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "lottery_prizes" (
+    "id" SERIAL NOT NULL,
+    "lottery_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "type" "LotteryPrizeType" NOT NULL,
+    "value" INTEGER NOT NULL DEFAULT 0,
+    "probability" DECIMAL(5,2) NOT NULL,
+    "total_quantity" INTEGER,
+    "remain_quantity" INTEGER,
+    "display_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "instance_desc" TEXT,
+
+    CONSTRAINT "lottery_prizes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "lottery_records" (
+    "id" SERIAL NOT NULL,
+    "lottery_id" INTEGER NOT NULL,
+    "prize_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "prize_type" "LotteryPrizeType" NOT NULL,
+    "prize_value" INTEGER NOT NULL,
+    "prize_name" TEXT NOT NULL,
+    "status" "LotteryRecordStatus" NOT NULL DEFAULT 'delivered',
+    "points_spent" INTEGER NOT NULL,
+    "delivered_at" TIMESTAMP(3),
+    "delivered_by" INTEGER,
+    "ticket_id" INTEGER,
+    "notification_sent" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "lottery_records_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "lottery_notification_configs" (
+    "id" SERIAL NOT NULL,
+    "lottery_id" INTEGER NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "type" TEXT NOT NULL,
+    "config" JSONB NOT NULL,
+    "notify_balance" BOOLEAN NOT NULL DEFAULT true,
+    "notify_instance" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "lottery_notification_configs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "points_logs_user_id_created_at_idx" ON "points_logs"("user_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "lottery_prizes_lottery_id_idx" ON "lottery_prizes"("lottery_id");
+
+-- CreateIndex
+CREATE INDEX "lottery_records_user_id_created_at_idx" ON "lottery_records"("user_id", "created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "lottery_records_lottery_id_idx" ON "lottery_records"("lottery_id");
+
+-- CreateIndex
+CREATE INDEX "lottery_records_status_idx" ON "lottery_records"("status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "lottery_notification_configs_lottery_id_key" ON "lottery_notification_configs"("lottery_id");
+
+-- AddForeignKey
+ALTER TABLE "user_points" ADD CONSTRAINT "user_points_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "points_logs" ADD CONSTRAINT "points_logs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "lottery_prizes" ADD CONSTRAINT "lottery_prizes_lottery_id_fkey" FOREIGN KEY ("lottery_id") REFERENCES "lotteries"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "lottery_records" ADD CONSTRAINT "lottery_records_lottery_id_fkey" FOREIGN KEY ("lottery_id") REFERENCES "lotteries"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "lottery_records" ADD CONSTRAINT "lottery_records_prize_id_fkey" FOREIGN KEY ("prize_id") REFERENCES "lottery_prizes"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "lottery_records" ADD CONSTRAINT "lottery_records_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "lottery_notification_configs" ADD CONSTRAINT "lottery_notification_configs_lottery_id_fkey" FOREIGN KEY ("lottery_id") REFERENCES "lotteries"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260202000000_add_checkin_to_points_log_type/migration.sql b/server/prisma/migrations/20260202000000_add_checkin_to_points_log_type/migration.sql
new file mode 100644
index 0000000..abd5bd5
--- /dev/null
+++ b/server/prisma/migrations/20260202000000_add_checkin_to_points_log_type/migration.sql
@@ -0,0 +1,2 @@
+-- Add 'checkin' value to PointsLogType enum
+ALTER TYPE "PointsLogType" ADD VALUE 'checkin';
diff --git a/server/prisma/migrations/20260210000000_add_recreate_task_type/migration.sql b/server/prisma/migrations/20260210000000_add_recreate_task_type/migration.sql
new file mode 100644
index 0000000..7dbfda5
--- /dev/null
+++ b/server/prisma/migrations/20260210000000_add_recreate_task_type/migration.sql
@@ -0,0 +1,2 @@
+-- AlterEnum: Add 'recreate' to InstanceTaskType
+ALTER TYPE "InstanceTaskType" ADD VALUE 'recreate';
diff --git a/server/prisma/migrations/20260210000001_add_recreate_operation_type/migration.sql b/server/prisma/migrations/20260210000001_add_recreate_operation_type/migration.sql
new file mode 100644
index 0000000..d1ee81e
--- /dev/null
+++ b/server/prisma/migrations/20260210000001_add_recreate_operation_type/migration.sql
@@ -0,0 +1,2 @@
+-- AlterEnum: Add 'recreate_instance' to OperationType
+ALTER TYPE "OperationType" ADD VALUE 'recreate_instance';
diff --git a/server/prisma/migrations/20260222140000_add_transfer_fee/migration.sql b/server/prisma/migrations/20260222140000_add_transfer_fee/migration.sql
new file mode 100644
index 0000000..15938e7
--- /dev/null
+++ b/server/prisma/migrations/20260222140000_add_transfer_fee/migration.sql
@@ -0,0 +1,6 @@
+-- Add transfer fee field to instance_transfers table
+ALTER TABLE "instance_transfers" ADD COLUMN "fee" DECIMAL(10,2);
+
+-- Add transfer_fee and transfer_refund to BalanceLogType enum
+ALTER TYPE "BalanceLogType" ADD VALUE IF NOT EXISTS 'transfer_fee';
+ALTER TYPE "BalanceLogType" ADD VALUE IF NOT EXISTS 'transfer_refund';
diff --git a/server/prisma/migrations/20260222150000_add_transfer_fee_to_billing_record_type/migration.sql b/server/prisma/migrations/20260222150000_add_transfer_fee_to_billing_record_type/migration.sql
new file mode 100644
index 0000000..47743d4
--- /dev/null
+++ b/server/prisma/migrations/20260222150000_add_transfer_fee_to_billing_record_type/migration.sql
@@ -0,0 +1,3 @@
+-- Add transfer_fee to BillingRecordType enum
+-- This is safe: adding a new enum value does not affect existing records
+ALTER TYPE "BillingRecordType" ADD VALUE IF NOT EXISTS 'transfer_fee';
diff --git a/server/prisma/migrations/20260222160000_add_host_announcement/migration.sql b/server/prisma/migrations/20260222160000_add_host_announcement/migration.sql
new file mode 100644
index 0000000..b53760f
--- /dev/null
+++ b/server/prisma/migrations/20260222160000_add_host_announcement/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "announcement" TEXT;
diff --git a/server/prisma/migrations/20260222170000_add_resource_pool/migration.sql b/server/prisma/migrations/20260222170000_add_resource_pool/migration.sql
new file mode 100644
index 0000000..a8ac084
--- /dev/null
+++ b/server/prisma/migrations/20260222170000_add_resource_pool/migration.sql
@@ -0,0 +1,47 @@
+-- CreateEnum
+CREATE TYPE "ResourcePoolAction" AS ENUM ('checkin', 'redeem', 'admin_grant', 'system_grant', 'lottery', 'apply');
+
+-- CreateTable
+CREATE TABLE "user_resource_pools" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "cpu" INTEGER NOT NULL DEFAULT 0,
+    "memory" INTEGER NOT NULL DEFAULT 0,
+    "disk" INTEGER NOT NULL DEFAULT 0,
+    "traffic" BIGINT NOT NULL DEFAULT 0,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "user_resource_pools_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "resource_pool_logs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "action" "ResourcePoolAction" NOT NULL,
+    "resource_type" "RedeemCodeType" NOT NULL,
+    "amount" INTEGER NOT NULL,
+    "instance_id" INTEGER,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "resource_pool_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_resource_pools_user_id_key" ON "user_resource_pools"("user_id");
+
+-- CreateIndex
+CREATE INDEX "resource_pool_logs_user_id_idx" ON "resource_pool_logs"("user_id");
+
+-- CreateIndex
+CREATE INDEX "resource_pool_logs_user_id_action_idx" ON "resource_pool_logs"("user_id", "action");
+
+-- AddForeignKey
+ALTER TABLE "user_resource_pools" ADD CONSTRAINT "user_resource_pools_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "resource_pool_logs" ADD CONSTRAINT "resource_pool_logs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "resource_pool_logs" ADD CONSTRAINT "resource_pool_logs_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260222180000_add_lottery_resource_prizes_and_system_redeem/migration.sql b/server/prisma/migrations/20260222180000_add_lottery_resource_prizes_and_system_redeem/migration.sql
new file mode 100644
index 0000000..e84a155
--- /dev/null
+++ b/server/prisma/migrations/20260222180000_add_lottery_resource_prizes_and_system_redeem/migration.sql
@@ -0,0 +1,8 @@
+-- AlterEnum: Add resource prize types to LotteryPrizeType
+ALTER TYPE "LotteryPrizeType" ADD VALUE 'cpu';
+ALTER TYPE "LotteryPrizeType" ADD VALUE 'memory';
+ALTER TYPE "LotteryPrizeType" ADD VALUE 'disk';
+ALTER TYPE "LotteryPrizeType" ADD VALUE 'traffic';
+
+-- AlterEnum: Add system_redeem to ResourcePoolAction
+ALTER TYPE "ResourcePoolAction" ADD VALUE 'system_redeem';
diff --git a/server/prisma/migrations/20260222190000_add_user_destroy_record/migration.sql b/server/prisma/migrations/20260222190000_add_user_destroy_record/migration.sql
new file mode 100644
index 0000000..3efe5b7
--- /dev/null
+++ b/server/prisma/migrations/20260222190000_add_user_destroy_record/migration.sql
@@ -0,0 +1,29 @@
+-- CreateTable
+CREATE TABLE "user_destroy_records" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "instance_name" TEXT NOT NULL,
+    "destroyed_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "refund_amount" DECIMAL(10,2) NOT NULL,
+    "fee_amount" DECIMAL(10,2) NOT NULL,
+    "is_first_time" BOOLEAN NOT NULL,
+
+    CONSTRAINT "user_destroy_records_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "user_destroy_records_user_id_idx" ON "user_destroy_records"("user_id");
+
+-- CreateIndex
+CREATE INDEX "user_destroy_records_user_id_host_id_idx" ON "user_destroy_records"("user_id", "host_id");
+
+-- AddForeignKey
+ALTER TABLE "user_destroy_records" ADD CONSTRAINT "user_destroy_records_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_destroy_records" ADD CONSTRAINT "user_destroy_records_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_destroy_records" ADD CONSTRAINT "user_destroy_records_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260222200000_add_hosting_balance_system/migration.sql b/server/prisma/migrations/20260222200000_add_hosting_balance_system/migration.sql
new file mode 100644
index 0000000..b53e80d
--- /dev/null
+++ b/server/prisma/migrations/20260222200000_add_hosting_balance_system/migration.sql
@@ -0,0 +1,53 @@
+-- 托管余额系统
+-- 允许满足条件的用户自行托管节点并获得收益
+
+-- 枚举类型
+CREATE TYPE "HostingBalanceType" AS ENUM ('income', 'unfreeze', 'withdraw');
+CREATE TYPE "WithdrawalStatus" AS ENUM ('pending', 'approved', 'rejected', 'completed');
+CREATE TYPE "WithdrawalTarget" AS ENUM ('balance', 'usdt');
+
+-- 在 users 表添加托管余额字段
+ALTER TABLE "users" ADD COLUMN "hosting_balance" DECIMAL(10, 2) NOT NULL DEFAULT 0;
+
+-- 托管余额变动日志表
+CREATE TABLE "hosting_balance_logs" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "type" "HostingBalanceType" NOT NULL,
+    "amount" DECIMAL(10, 2) NOT NULL,
+    "frozen" BOOLEAN NOT NULL DEFAULT true,
+    "unfreeze_at" TIMESTAMP(3),
+    "related_id" INTEGER,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "hosting_balance_logs_pkey" PRIMARY KEY ("id")
+);
+
+-- 托管余额提现记录表
+CREATE TABLE "hosting_withdrawals" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "amount" DECIMAL(10, 2) NOT NULL,
+    "fee_rate" DECIMAL(5, 4) NOT NULL,
+    "fee_amount" DECIMAL(10, 2) NOT NULL,
+    "actual_amount" DECIMAL(10, 2) NOT NULL,
+    "target" "WithdrawalTarget" NOT NULL,
+    "usdt_address" TEXT,
+    "status" "WithdrawalStatus" NOT NULL DEFAULT 'pending',
+    "reject_reason" TEXT,
+    "processed_at" TIMESTAMP(3),
+    "processed_by" INTEGER,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "hosting_withdrawals_pkey" PRIMARY KEY ("id")
+);
+
+-- 索引
+CREATE INDEX "hosting_balance_logs_user_id_frozen_idx" ON "hosting_balance_logs"("user_id", "frozen");
+CREATE INDEX "hosting_balance_logs_unfreeze_at_idx" ON "hosting_balance_logs"("unfreeze_at");
+CREATE INDEX "hosting_withdrawals_user_id_status_idx" ON "hosting_withdrawals"("user_id", "status");
+
+-- 外键约束
+ALTER TABLE "hosting_balance_logs" ADD CONSTRAINT "hosting_balance_logs_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "hosting_withdrawals" ADD CONSTRAINT "hosting_withdrawals_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260222210000_add_hosting_deduction_type/migration.sql b/server/prisma/migrations/20260222210000_add_hosting_deduction_type/migration.sql
new file mode 100644
index 0000000..9b43452
--- /dev/null
+++ b/server/prisma/migrations/20260222210000_add_hosting_deduction_type/migration.sql
@@ -0,0 +1,2 @@
+-- Add hosting_deduction to BalanceLogType enum
+ALTER TYPE "BalanceLogType" ADD VALUE IF NOT EXISTS 'hosting_deduction';
diff --git a/server/prisma/migrations/20260222220000_add_hosting_deduction_enum/migration.sql b/server/prisma/migrations/20260222220000_add_hosting_deduction_enum/migration.sql
new file mode 100644
index 0000000..1a43e69
--- /dev/null
+++ b/server/prisma/migrations/20260222220000_add_hosting_deduction_enum/migration.sql
@@ -0,0 +1,2 @@
+-- Add deduction to HostingBalanceType enum
+ALTER TYPE "HostingBalanceType" ADD VALUE IF NOT EXISTS 'deduction';
diff --git a/server/prisma/migrations/20260309000000_add_hosting_action_type/migration.sql b/server/prisma/migrations/20260309000000_add_hosting_action_type/migration.sql
new file mode 100644
index 0000000..d0174f5
--- /dev/null
+++ b/server/prisma/migrations/20260309000000_add_hosting_action_type/migration.sql
@@ -0,0 +1,13 @@
+-- Add HostingActionType enum and action_type column to hosting_balance_logs
+
+-- Create HostingActionType enum
+CREATE TYPE "HostingActionType" AS ENUM ('purchase', 'renew', 'upgrade', 'destroy', 'unfreeze', 'withdraw');
+
+-- Add action_type column (nullable for existing records)
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "action_type" "HostingActionType";
+
+-- Backfill action_type for existing records based on type
+UPDATE "hosting_balance_logs" SET "action_type" = 'purchase' WHERE "type" = 'income' AND "action_type" IS NULL;
+UPDATE "hosting_balance_logs" SET "action_type" = 'unfreeze' WHERE "type" = 'unfreeze' AND "action_type" IS NULL;
+UPDATE "hosting_balance_logs" SET "action_type" = 'destroy' WHERE "type" = 'deduction' AND "action_type" IS NULL;
+UPDATE "hosting_balance_logs" SET "action_type" = 'withdraw' WHERE "type" = 'withdraw' AND "action_type" IS NULL;
diff --git a/server/prisma/migrations/20260310000000_add_host_enable_resource_pool/migration.sql b/server/prisma/migrations/20260310000000_add_host_enable_resource_pool/migration.sql
new file mode 100644
index 0000000..e366c88
--- /dev/null
+++ b/server/prisma/migrations/20260310000000_add_host_enable_resource_pool/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "enable_resource_pool" BOOLEAN NOT NULL DEFAULT true;
diff --git a/server/prisma/migrations/20260311000000_add_hosting_withdraw_balance_log_type/migration.sql b/server/prisma/migrations/20260311000000_add_hosting_withdraw_balance_log_type/migration.sql
new file mode 100644
index 0000000..c591f27
--- /dev/null
+++ b/server/prisma/migrations/20260311000000_add_hosting_withdraw_balance_log_type/migration.sql
@@ -0,0 +1,4 @@
+-- 为 BalanceLogType 枚举添加 hosting_withdraw 值
+-- 用于记录托管余额提现到面板余额的操作
+
+ALTER TYPE "BalanceLogType" ADD VALUE IF NOT EXISTS 'hosting_withdraw';
diff --git a/server/prisma/migrations/20260312000000_add_admin_adjust_action_type/migration.sql b/server/prisma/migrations/20260312000000_add_admin_adjust_action_type/migration.sql
new file mode 100644
index 0000000..2621995
--- /dev/null
+++ b/server/prisma/migrations/20260312000000_add_admin_adjust_action_type/migration.sql
@@ -0,0 +1,4 @@
+-- 为 HostingActionType 枚举添加 admin_adjust 值
+-- 用于标识管理员调整托管余额的操作
+
+ALTER TYPE "HostingActionType" ADD VALUE IF NOT EXISTS 'admin_adjust';
diff --git a/server/prisma/migrations/20260312000001_add_host_probe_url/migration.sql b/server/prisma/migrations/20260312000001_add_host_probe_url/migration.sql
new file mode 100644
index 0000000..301bcfa
--- /dev/null
+++ b/server/prisma/migrations/20260312000001_add_host_probe_url/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "probe_url" TEXT;
diff --git a/server/prisma/migrations/20260313000000_add_mail_module/migration.sql b/server/prisma/migrations/20260313000000_add_mail_module/migration.sql
new file mode 100644
index 0000000..f73aa14
--- /dev/null
+++ b/server/prisma/migrations/20260313000000_add_mail_module/migration.sql
@@ -0,0 +1,112 @@
+-- 域名邮箱模块
+-- 包含邮箱源、方案、订阅、域名、账户管理
+
+-- 创建枚举类型
+CREATE TYPE "MailDomainStatus" AS ENUM ('pending', 'verified', 'suspended');
+CREATE TYPE "MailSubscriptionStatus" AS ENUM ('active', 'expired', 'suspended');
+CREATE TYPE "MailBillingCycle" AS ENUM ('monthly', 'yearly');
+
+-- 邮箱源表（数据中心）
+CREATE TABLE "mail_sources" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "code" TEXT NOT NULL,
+    "api_url" TEXT NOT NULL,
+    "api_key" TEXT NOT NULL,
+    "smartermail_url" TEXT NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "mail_sources_pkey" PRIMARY KEY ("id")
+);
+
+-- 套餐方案表
+CREATE TABLE "mail_plans" (
+    "id" SERIAL NOT NULL,
+    "source_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "domain_limit" INTEGER NOT NULL,
+    "disk_limit_gb" INTEGER NOT NULL,
+    "billing_cycle" "MailBillingCycle" NOT NULL,
+    "price" DECIMAL(10,2) NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "mail_plans_pkey" PRIMARY KEY ("id")
+);
+
+-- 用户订阅表
+CREATE TABLE "mail_subscriptions" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "source_id" INTEGER NOT NULL,
+    "plan_id" INTEGER NOT NULL,
+    "status" "MailSubscriptionStatus" NOT NULL DEFAULT 'active',
+    "domain_limit" INTEGER NOT NULL,
+    "disk_limit_gb" INTEGER NOT NULL,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "auto_renew" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "mail_subscriptions_pkey" PRIMARY KEY ("id")
+);
+
+-- 域名表
+CREATE TABLE "mail_domains" (
+    "id" SERIAL NOT NULL,
+    "subscription_id" INTEGER NOT NULL,
+    "source_id" INTEGER NOT NULL,
+    "domain" TEXT NOT NULL,
+    "status" "MailDomainStatus" NOT NULL DEFAULT 'pending',
+    "admin_username" TEXT,
+    "admin_password" TEXT,
+    "disk_used_mb" INTEGER NOT NULL DEFAULT 0,
+    "verified_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "mail_domains_pkey" PRIMARY KEY ("id")
+);
+
+-- 邮箱账户表
+CREATE TABLE "mail_accounts" (
+    "id" SERIAL NOT NULL,
+    "domain_id" INTEGER NOT NULL,
+    "email" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "display_name" TEXT,
+    "disk_limit_mb" INTEGER NOT NULL DEFAULT 2048,
+    "disk_used_mb" INTEGER NOT NULL DEFAULT 0,
+    "is_admin" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "mail_accounts_pkey" PRIMARY KEY ("id")
+);
+
+-- 创建唯一索引
+CREATE UNIQUE INDEX "mail_sources_code_key" ON "mail_sources"("code");
+CREATE UNIQUE INDEX "mail_domains_domain_source_id_key" ON "mail_domains"("domain", "source_id");
+CREATE UNIQUE INDEX "mail_accounts_domain_id_username_key" ON "mail_accounts"("domain_id", "username");
+
+-- 创建普通索引
+CREATE INDEX "mail_plans_source_id_enabled_idx" ON "mail_plans"("source_id", "enabled");
+CREATE INDEX "mail_subscriptions_user_id_status_idx" ON "mail_subscriptions"("user_id", "status");
+CREATE INDEX "mail_subscriptions_expires_at_idx" ON "mail_subscriptions"("expires_at");
+CREATE INDEX "mail_domains_subscription_id_idx" ON "mail_domains"("subscription_id");
+CREATE INDEX "mail_accounts_domain_id_idx" ON "mail_accounts"("domain_id");
+
+-- 添加外键约束
+ALTER TABLE "mail_plans" ADD CONSTRAINT "mail_plans_source_id_fkey" FOREIGN KEY ("source_id") REFERENCES "mail_sources"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_subscriptions" ADD CONSTRAINT "mail_subscriptions_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_subscriptions" ADD CONSTRAINT "mail_subscriptions_source_id_fkey" FOREIGN KEY ("source_id") REFERENCES "mail_sources"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_subscriptions" ADD CONSTRAINT "mail_subscriptions_plan_id_fkey" FOREIGN KEY ("plan_id") REFERENCES "mail_plans"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_domains" ADD CONSTRAINT "mail_domains_subscription_id_fkey" FOREIGN KEY ("subscription_id") REFERENCES "mail_subscriptions"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_domains" ADD CONSTRAINT "mail_domains_source_id_fkey" FOREIGN KEY ("source_id") REFERENCES "mail_sources"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_accounts" ADD CONSTRAINT "mail_accounts_domain_id_fkey" FOREIGN KEY ("domain_id") REFERENCES "mail_domains"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260314000000_add_mail_aff_support/migration.sql b/server/prisma/migrations/20260314000000_add_mail_aff_support/migration.sql
new file mode 100644
index 0000000..29a7222
--- /dev/null
+++ b/server/prisma/migrations/20260314000000_add_mail_aff_support/migration.sql
@@ -0,0 +1,32 @@
+-- 邮箱订阅 AFF 优惠码支持
+-- 1. 创建邮箱订阅与优惠码绑定表
+-- 2. 在 AFF 日志表添加邮箱订阅关联字段
+
+-- 创建邮箱订阅 AFF 绑定表
+CREATE TABLE "mail_subscription_aff_bindings" (
+    "id" SERIAL NOT NULL,
+    "mail_subscription_id" INTEGER NOT NULL,
+    "aff_code_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "mail_subscription_aff_bindings_pkey" PRIMARY KEY ("id")
+);
+
+-- 创建唯一索引（一个订阅只能绑定一个优惠码）
+CREATE UNIQUE INDEX "mail_subscription_aff_bindings_mail_subscription_id_key" ON "mail_subscription_aff_bindings"("mail_subscription_id");
+
+-- 创建优惠码索引
+CREATE INDEX "mail_subscription_aff_bindings_aff_code_id_idx" ON "mail_subscription_aff_bindings"("aff_code_id");
+
+-- 添加外键约束
+ALTER TABLE "mail_subscription_aff_bindings" ADD CONSTRAINT "mail_subscription_aff_bindings_mail_subscription_id_fkey" FOREIGN KEY ("mail_subscription_id") REFERENCES "mail_subscriptions"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "mail_subscription_aff_bindings" ADD CONSTRAINT "mail_subscription_aff_bindings_aff_code_id_fkey" FOREIGN KEY ("aff_code_id") REFERENCES "aff_codes"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- 在 AFF 日志表添加邮箱订阅关联字段
+ALTER TABLE "aff_logs" ADD COLUMN "mail_subscription_id" INTEGER;
+
+-- 创建邮箱订阅索引
+CREATE INDEX "aff_logs_mail_subscription_id_idx" ON "aff_logs"("mail_subscription_id");
+
+-- 添加外键约束（允许级联设置为 NULL）
+ALTER TABLE "aff_logs" ADD CONSTRAINT "aff_logs_mail_subscription_id_fkey" FOREIGN KEY ("mail_subscription_id") REFERENCES "mail_subscriptions"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260318000000_add_hosting_log_snapshot_fields/migration.sql b/server/prisma/migrations/20260318000000_add_hosting_log_snapshot_fields/migration.sql
new file mode 100644
index 0000000..3d5e483
--- /dev/null
+++ b/server/prisma/migrations/20260318000000_add_hosting_log_snapshot_fields/migration.sql
@@ -0,0 +1,28 @@
+-- AlterTable
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_buyer_name" TEXT;
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_buyer_email" TEXT;
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_buyer_avatar" TEXT;
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_instance_name" TEXT;
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_host_name" TEXT;
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_package_name" TEXT;
+ALTER TABLE "hosting_balance_logs" ADD COLUMN "snapshot_plan_name" TEXT;
+
+-- Backfill snapshot data from existing instances
+UPDATE "hosting_balance_logs" AS hbl
+SET
+  "snapshot_buyer_name" = u.username,
+  "snapshot_buyer_email" = u.email,
+  "snapshot_buyer_avatar" = u.avatar_style,
+  "snapshot_instance_name" = i.name,
+  "snapshot_host_name" = h.name,
+  "snapshot_package_name" = pkg.name,
+  "snapshot_plan_name" = pp.name
+FROM "instances" i
+LEFT JOIN "users" u ON i.user_id = u.id
+LEFT JOIN "hosts" h ON i.host_id = h.id
+LEFT JOIN "packages" pkg ON i.package_id = pkg.id
+LEFT JOIN "package_plans" pp ON i.package_plan_id = pp.id
+WHERE hbl.related_id = i.id
+  AND hbl.related_id IS NOT NULL
+  AND hbl.type IN ('income', 'deduction')
+  AND hbl.snapshot_instance_name IS NULL;
diff --git a/server/prisma/migrations/20260324000000_add_notification_channel_is_global/migration.sql b/server/prisma/migrations/20260324000000_add_notification_channel_is_global/migration.sql
new file mode 100644
index 0000000..f73897f
--- /dev/null
+++ b/server/prisma/migrations/20260324000000_add_notification_channel_is_global/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable: Add is_global column to notification_channels
+ALTER TABLE "notification_channels" ADD COLUMN "is_global" BOOLEAN NOT NULL DEFAULT false;
diff --git a/server/prisma/migrations/20260328000000_add_io_limit_mode/migration.sql b/server/prisma/migrations/20260328000000_add_io_limit_mode/migration.sql
new file mode 100644
index 0000000..24c4680
--- /dev/null
+++ b/server/prisma/migrations/20260328000000_add_io_limit_mode/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "packages" ADD COLUMN "io_limit_mode" TEXT NOT NULL DEFAULT 'throughput';
diff --git a/server/prisma/migrations/20260406090000_add_host_architecture_and_allowed_images/migration.sql b/server/prisma/migrations/20260406090000_add_host_architecture_and_allowed_images/migration.sql
new file mode 100644
index 0000000..79aedc8
--- /dev/null
+++ b/server/prisma/migrations/20260406090000_add_host_architecture_and_allowed_images/migration.sql
@@ -0,0 +1,26 @@
+-- Add host architecture field
+ALTER TABLE "hosts"
+ADD COLUMN "architecture" TEXT NOT NULL DEFAULT 'x86_64';
+
+-- Add host-level allowed image whitelist
+CREATE TABLE "host_allowed_images" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "image_id" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "host_allowed_images_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "host_allowed_images_host_id_idx" ON "host_allowed_images"("host_id");
+CREATE INDEX "host_allowed_images_image_id_idx" ON "host_allowed_images"("image_id");
+CREATE UNIQUE INDEX "host_allowed_images_host_id_image_id_key" ON "host_allowed_images"("host_id", "image_id");
+
+ALTER TABLE "host_allowed_images"
+ADD CONSTRAINT "host_allowed_images_host_id_fkey"
+FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "host_allowed_images"
+ADD CONSTRAINT "host_allowed_images_image_id_fkey"
+FOREIGN KEY ("image_id") REFERENCES "system_images"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260406110000_add_host_notification_email_queue/migration.sql b/server/prisma/migrations/20260406110000_add_host_notification_email_queue/migration.sql
new file mode 100644
index 0000000..5d04692
--- /dev/null
+++ b/server/prisma/migrations/20260406110000_add_host_notification_email_queue/migration.sql
@@ -0,0 +1,29 @@
+CREATE TYPE "HostNotificationEmailTaskStatus" AS ENUM ('PENDING', 'PROCESSING', 'SENT', 'FAILED');
+
+CREATE TABLE "host_notification_email_tasks" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "email" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "host_name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "status" "HostNotificationEmailTaskStatus" NOT NULL DEFAULT 'PENDING',
+    "retry_count" INTEGER NOT NULL DEFAULT 0,
+    "last_error" TEXT,
+    "scheduled_for" TIMESTAMP(3) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "started_at" TIMESTAMP(3),
+    "finished_at" TIMESTAMP(3),
+
+    CONSTRAINT "host_notification_email_tasks_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "host_notification_email_tasks_status_scheduled_for_idx" ON "host_notification_email_tasks"("status", "scheduled_for");
+CREATE INDEX "host_notification_email_tasks_user_id_idx" ON "host_notification_email_tasks"("user_id");
+CREATE INDEX "host_notification_email_tasks_host_id_idx" ON "host_notification_email_tasks"("host_id");
+CREATE INDEX "host_notification_email_tasks_started_at_idx" ON "host_notification_email_tasks"("started_at");
+
+ALTER TABLE "host_notification_email_tasks" ADD CONSTRAINT "host_notification_email_tasks_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "host_notification_email_tasks" ADD CONSTRAINT "host_notification_email_tasks_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260407100000_add_host_address_registry/migration.sql b/server/prisma/migrations/20260407100000_add_host_address_registry/migration.sql
new file mode 100644
index 0000000..d86537f
--- /dev/null
+++ b/server/prisma/migrations/20260407100000_add_host_address_registry/migration.sql
@@ -0,0 +1,73 @@
+CREATE TYPE "HostAddressKind" AS ENUM ('domain', 'ipv4', 'ipv6');
+CREATE TYPE "HostAddressSource" AS ENUM ('input', 'resolved');
+CREATE TYPE "HostAddressCheckTrigger" AS ENUM ('create', 'update', 'backfill', 'poll');
+CREATE TYPE "HostAddressCheckStatus" AS ENUM ('success', 'failed');
+CREATE TYPE "HostAddressConflictStatus" AS ENUM ('active', 'resolved');
+
+CREATE TABLE "host_address_aliases" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "address" TEXT NOT NULL,
+    "kind" "HostAddressKind" NOT NULL,
+    "source" "HostAddressSource" NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "host_address_aliases_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "host_address_resolution_logs" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "input_address" TEXT NOT NULL,
+    "input_kind" "HostAddressKind" NOT NULL,
+    "trigger" "HostAddressCheckTrigger" NOT NULL,
+    "status" "HostAddressCheckStatus" NOT NULL,
+    "resolved_addresses" JSONB NOT NULL DEFAULT '[]',
+    "error" TEXT,
+    "details" JSONB DEFAULT '{}',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "host_address_resolution_logs_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "host_address_conflicts" (
+    "id" SERIAL NOT NULL,
+    "host_a_id" INTEGER NOT NULL,
+    "host_b_id" INTEGER NOT NULL,
+    "address" TEXT NOT NULL,
+    "status" "HostAddressConflictStatus" NOT NULL DEFAULT 'active',
+    "first_detected_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "last_detected_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "resolved_at" TIMESTAMP(3),
+
+    CONSTRAINT "host_address_conflicts_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "host_address_aliases_host_id_address_key" ON "host_address_aliases"("host_id", "address");
+CREATE INDEX "host_address_aliases_host_id_idx" ON "host_address_aliases"("host_id");
+CREATE INDEX "host_address_aliases_address_idx" ON "host_address_aliases"("address");
+CREATE INDEX "host_address_aliases_source_kind_idx" ON "host_address_aliases"("source", "kind");
+
+CREATE INDEX "host_address_resolution_logs_host_id_created_at_idx" ON "host_address_resolution_logs"("host_id", "created_at" DESC);
+CREATE INDEX "host_address_resolution_logs_status_created_at_idx" ON "host_address_resolution_logs"("status", "created_at" DESC);
+
+CREATE UNIQUE INDEX "host_address_conflicts_host_a_id_host_b_id_address_key" ON "host_address_conflicts"("host_a_id", "host_b_id", "address");
+CREATE INDEX "host_address_conflicts_address_idx" ON "host_address_conflicts"("address");
+CREATE INDEX "host_address_conflicts_status_last_detected_at_idx" ON "host_address_conflicts"("status", "last_detected_at" DESC);
+
+ALTER TABLE "host_address_aliases"
+    ADD CONSTRAINT "host_address_aliases_host_id_fkey"
+    FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "host_address_resolution_logs"
+    ADD CONSTRAINT "host_address_resolution_logs_host_id_fkey"
+    FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "host_address_conflicts"
+    ADD CONSTRAINT "host_address_conflicts_host_a_id_fkey"
+    FOREIGN KEY ("host_a_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "host_address_conflicts"
+    ADD CONSTRAINT "host_address_conflicts_host_b_id_fkey"
+    FOREIGN KEY ("host_b_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260407103000_add_host_notification_preferences/migration.sql b/server/prisma/migrations/20260407103000_add_host_notification_preferences/migration.sql
new file mode 100644
index 0000000..08c5b58
--- /dev/null
+++ b/server/prisma/migrations/20260407103000_add_host_notification_preferences/migration.sql
@@ -0,0 +1,4 @@
+ALTER TABLE "hosts"
+ADD COLUMN "notify_purchase" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN "notify_renew" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN "notify_destroy" BOOLEAN NOT NULL DEFAULT false;
diff --git a/server/prisma/migrations/20260409123000_add_instance_cloud_init_state/migration.sql b/server/prisma/migrations/20260409123000_add_instance_cloud_init_state/migration.sql
new file mode 100644
index 0000000..5a3e78e
--- /dev/null
+++ b/server/prisma/migrations/20260409123000_add_instance_cloud_init_state/migration.sql
@@ -0,0 +1,7 @@
+ALTER TABLE "instances"
+ADD COLUMN "cloud_init_state" TEXT,
+ADD COLUMN "cloud_init_source" TEXT,
+ADD COLUMN "cloud_init_last_checked_at" TIMESTAMP(3),
+ADD COLUMN "cloud_init_completed_at" TIMESTAMP(3),
+ADD COLUMN "cloud_init_manual_completed_at" TIMESTAMP(3),
+ADD COLUMN "cloud_init_manual_completed_by" INTEGER;
diff --git a/server/prisma/migrations/20260410093000_add_instance_swap_support/migration.sql b/server/prisma/migrations/20260410093000_add_instance_swap_support/migration.sql
new file mode 100644
index 0000000..f77a506
--- /dev/null
+++ b/server/prisma/migrations/20260410093000_add_instance_swap_support/migration.sql
@@ -0,0 +1,6 @@
+ALTER TABLE "package_plans"
+ADD COLUMN IF NOT EXISTS "swap_size" INTEGER NOT NULL DEFAULT 0;
+
+ALTER TABLE "instances"
+ADD COLUMN IF NOT EXISTS "swap_enabled" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN IF NOT EXISTS "swap_size" INTEGER;
diff --git a/server/prisma/migrations/20260412093000_add_terminal_saved_commands/migration.sql b/server/prisma/migrations/20260412093000_add_terminal_saved_commands/migration.sql
new file mode 100644
index 0000000..02d19f6
--- /dev/null
+++ b/server/prisma/migrations/20260412093000_add_terminal_saved_commands/migration.sql
@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "terminal_saved_commands" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "command" TEXT NOT NULL,
+    "description" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "terminal_saved_commands_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "terminal_saved_commands_user_id_updated_at_idx" ON "terminal_saved_commands"("user_id", "updated_at");
+
+-- AddForeignKey
+ALTER TABLE "terminal_saved_commands" ADD CONSTRAINT "terminal_saved_commands_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260412113000_add_badge_system/migration.sql b/server/prisma/migrations/20260412113000_add_badge_system/migration.sql
new file mode 100644
index 0000000..1f69657
--- /dev/null
+++ b/server/prisma/migrations/20260412113000_add_badge_system/migration.sql
@@ -0,0 +1,32 @@
+ALTER TYPE "PointsLogType" ADD VALUE IF NOT EXISTS 'badge_draw_spend';
+ALTER TYPE "PointsLogType" ADD VALUE IF NOT EXISTS 'badge_select_spend';
+
+CREATE TYPE "UserBadgeSource" AS ENUM ('draw', 'select', 'admin_grant');
+CREATE TYPE "BadgeApplicationTarget" AS ENUM ('avatar', 'instance');
+
+ALTER TABLE "users" ADD COLUMN "avatar_badge_id" TEXT;
+ALTER TABLE "instances" ADD COLUMN "icon_badge_id" TEXT;
+
+CREATE TABLE "user_badge_ownerships" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "badge_id" TEXT NOT NULL,
+    "source" "UserBadgeSource" NOT NULL DEFAULT 'draw',
+    "application_target" "BadgeApplicationTarget",
+    "applied_instance_id" INTEGER,
+    "applied_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "user_badge_ownerships_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "user_badge_ownerships_user_id_created_at_idx" ON "user_badge_ownerships"("user_id", "created_at" DESC);
+CREATE INDEX "user_badge_ownerships_user_id_badge_id_idx" ON "user_badge_ownerships"("user_id", "badge_id");
+CREATE INDEX "user_badge_ownerships_user_id_application_target_idx" ON "user_badge_ownerships"("user_id", "application_target");
+CREATE INDEX "user_badge_ownerships_applied_instance_id_idx" ON "user_badge_ownerships"("applied_instance_id");
+CREATE UNIQUE INDEX "user_badge_ownerships_one_avatar_per_user_idx" ON "user_badge_ownerships"("user_id") WHERE "application_target" = 'avatar';
+CREATE UNIQUE INDEX "user_badge_ownerships_one_badge_per_instance_idx" ON "user_badge_ownerships"("applied_instance_id") WHERE "application_target" = 'instance' AND "applied_instance_id" IS NOT NULL;
+
+ALTER TABLE "user_badge_ownerships" ADD CONSTRAINT "user_badge_ownerships_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "user_badge_ownerships" ADD CONSTRAINT "user_badge_ownerships_applied_instance_id_fkey" FOREIGN KEY ("applied_instance_id") REFERENCES "instances"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260413143000_add_lottery_badge_prize_type/migration.sql b/server/prisma/migrations/20260413143000_add_lottery_badge_prize_type/migration.sql
new file mode 100644
index 0000000..fd808cf
--- /dev/null
+++ b/server/prisma/migrations/20260413143000_add_lottery_badge_prize_type/migration.sql
@@ -0,0 +1,2 @@
+ALTER TYPE "UserBadgeSource" ADD VALUE IF NOT EXISTS 'lottery';
+ALTER TYPE "LotteryPrizeType" ADD VALUE IF NOT EXISTS 'badge';
diff --git a/server/prisma/migrations/20260413150000_expand_network_mode_enum/migration.sql b/server/prisma/migrations/20260413150000_expand_network_mode_enum/migration.sql
new file mode 100644
index 0000000..e848630
--- /dev/null
+++ b/server/prisma/migrations/20260413150000_expand_network_mode_enum/migration.sql
@@ -0,0 +1,4 @@
+-- AlterEnum
+ALTER TYPE "NetworkMode" ADD VALUE 'nat_ipv6_nat';
+ALTER TYPE "NetworkMode" ADD VALUE 'ipv6_only';
+ALTER TYPE "NetworkMode" ADD VALUE 'ipv6_nat';
diff --git a/server/prisma/migrations/20260414040844_add_host_nat_public_ipv6/migration.sql b/server/prisma/migrations/20260414040844_add_host_nat_public_ipv6/migration.sql
new file mode 100644
index 0000000..cef49f6
--- /dev/null
+++ b/server/prisma/migrations/20260414040844_add_host_nat_public_ipv6/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN "nat_public_ipv6" TEXT;
diff --git a/server/prisma/migrations/20260416000000_add_storage_pool_selection/migration.sql b/server/prisma/migrations/20260416000000_add_storage_pool_selection/migration.sql
new file mode 100644
index 0000000..99478e6
--- /dev/null
+++ b/server/prisma/migrations/20260416000000_add_storage_pool_selection/migration.sql
@@ -0,0 +1,5 @@
+ALTER TABLE "package_hosts"
+ADD COLUMN "storage_pool_name" TEXT;
+
+ALTER TABLE "instances"
+ADD COLUMN "storage_pool_name" TEXT;
diff --git a/server/prisma/migrations/20260417110000_add_ticket_message_attachments/migration.sql b/server/prisma/migrations/20260417110000_add_ticket_message_attachments/migration.sql
new file mode 100644
index 0000000..8250dd1
--- /dev/null
+++ b/server/prisma/migrations/20260417110000_add_ticket_message_attachments/migration.sql
@@ -0,0 +1,36 @@
+CREATE TABLE "ticket_message_attachments" (
+    "id" SERIAL NOT NULL,
+    "ticket_id" INTEGER NOT NULL,
+    "message_id" INTEGER NOT NULL,
+    "uploader_id" INTEGER NOT NULL,
+    "provider" TEXT NOT NULL DEFAULT 'lsky',
+    "provider_version" TEXT NOT NULL DEFAULT 'v1',
+    "provider_file_id" TEXT,
+    "filename" TEXT NOT NULL,
+    "original_name" TEXT NOT NULL,
+    "mime_type" TEXT NOT NULL,
+    "size_bytes" INTEGER NOT NULL,
+    "width" INTEGER,
+    "height" INTEGER,
+    "url" TEXT NOT NULL,
+    "thumbnail_url" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ticket_message_attachments_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "ticket_message_attachments_ticket_id_created_at_idx" ON "ticket_message_attachments"("ticket_id", "created_at");
+CREATE INDEX "ticket_message_attachments_message_id_idx" ON "ticket_message_attachments"("message_id");
+CREATE INDEX "ticket_message_attachments_uploader_id_idx" ON "ticket_message_attachments"("uploader_id");
+
+ALTER TABLE "ticket_message_attachments"
+ADD CONSTRAINT "ticket_message_attachments_ticket_id_fkey"
+FOREIGN KEY ("ticket_id") REFERENCES "tickets"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "ticket_message_attachments"
+ADD CONSTRAINT "ticket_message_attachments_message_id_fkey"
+FOREIGN KEY ("message_id") REFERENCES "ticket_messages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "ticket_message_attachments"
+ADD CONSTRAINT "ticket_message_attachments_uploader_id_fkey"
+FOREIGN KEY ("uploader_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260421090000_add_host_bind_addresses/migration.sql b/server/prisma/migrations/20260421090000_add_host_bind_addresses/migration.sql
new file mode 100644
index 0000000..6c0eff1
--- /dev/null
+++ b/server/prisma/migrations/20260421090000_add_host_bind_addresses/migration.sql
@@ -0,0 +1,3 @@
+ALTER TABLE "hosts"
+ADD COLUMN "nat_bind_ip" TEXT,
+ADD COLUMN "nat_bind_ipv6" TEXT;
diff --git a/server/prisma/migrations/20260424103000_relax_ip_address_uniqueness/migration.sql b/server/prisma/migrations/20260424103000_relax_ip_address_uniqueness/migration.sql
new file mode 100644
index 0000000..938ddeb
--- /dev/null
+++ b/server/prisma/migrations/20260424103000_relax_ip_address_uniqueness/migration.sql
@@ -0,0 +1,3 @@
+DROP INDEX IF EXISTS "ip_addresses_address_key";
+
+CREATE INDEX IF NOT EXISTS "ip_addresses_address_idx" ON "ip_addresses"("address");
diff --git a/server/prisma/migrations/20260424113000_restore_scoped_ip_uniqueness/migration.sql b/server/prisma/migrations/20260424113000_restore_scoped_ip_uniqueness/migration.sql
new file mode 100644
index 0000000..dd546b0
--- /dev/null
+++ b/server/prisma/migrations/20260424113000_restore_scoped_ip_uniqueness/migration.sql
@@ -0,0 +1,234 @@
+ALTER TABLE "ip_addresses"
+  ADD COLUMN IF NOT EXISTS "host_id" INTEGER;
+
+UPDATE "ip_addresses" AS ip
+SET "host_id" = i."host_id"
+FROM "instances" AS i
+WHERE ip."instance_id" = i."id"
+  AND (ip."host_id" IS NULL OR ip."host_id" IS DISTINCT FROM i."host_id");
+
+DELETE FROM "ip_addresses"
+WHERE "instance_id" IN (
+  SELECT "id"
+  FROM "instances"
+  WHERE "status" = 'deleted'
+);
+
+WITH duplicate_ipv4_instances AS (
+  SELECT
+    "id",
+    ROW_NUMBER() OVER (
+      PARTITION BY "host_id", "ipv4"
+      ORDER BY "id" ASC
+    ) AS rn
+  FROM "instances"
+  WHERE "status" <> 'deleted'
+    AND "ipv4" IS NOT NULL
+)
+UPDATE "instances" AS i
+SET "ipv4" = NULL
+FROM duplicate_ipv4_instances AS d
+WHERE i."id" = d."id"
+  AND d.rn > 1;
+
+WITH duplicate_ipv6_instances AS (
+  SELECT
+    "id",
+    ROW_NUMBER() OVER (
+      PARTITION BY "ipv6"
+      ORDER BY "id" ASC
+    ) AS rn
+  FROM "instances"
+  WHERE "status" <> 'deleted'
+    AND "ipv6" IS NOT NULL
+)
+UPDATE "instances" AS i
+SET "ipv6" = NULL
+FROM duplicate_ipv6_instances AS d
+WHERE i."id" = d."id"
+  AND d.rn > 1;
+
+WITH duplicate_ipv4_rows AS (
+  SELECT
+    "id",
+    ROW_NUMBER() OVER (
+      PARTITION BY "host_id", "address"
+      ORDER BY "is_primary" DESC, "instance_id" ASC, "created_at" ASC, "id" ASC
+    ) AS rn
+  FROM "ip_addresses"
+  WHERE "type" = 'inet4'
+)
+DELETE FROM "ip_addresses" AS ip
+USING duplicate_ipv4_rows AS d
+WHERE ip."id" = d."id"
+  AND d.rn > 1;
+
+WITH duplicate_ipv6_rows AS (
+  SELECT
+    "id",
+    ROW_NUMBER() OVER (
+      PARTITION BY "address"
+      ORDER BY "is_primary" DESC, "instance_id" ASC, "created_at" ASC, "id" ASC
+    ) AS rn
+  FROM "ip_addresses"
+  WHERE "type" = 'inet6'
+)
+DELETE FROM "ip_addresses" AS ip
+USING duplicate_ipv6_rows AS d
+WHERE ip."id" = d."id"
+  AND d.rn > 1;
+
+DELETE FROM "ip_addresses" AS ip
+USING "instances" AS i
+WHERE ip."instance_id" = i."id"
+  AND ip."type" = 'inet4'
+  AND ip."is_primary" = true
+  AND (i."ipv4" IS NULL OR ip."address" <> i."ipv4");
+
+DELETE FROM "ip_addresses" AS ip
+USING "instances" AS i
+WHERE ip."instance_id" = i."id"
+  AND ip."type" = 'inet6'
+  AND ip."is_primary" = true
+  AND (i."ipv6" IS NULL OR ip."address" <> i."ipv6");
+
+DELETE FROM "ip_addresses" AS ip
+WHERE ip."type" = 'inet6'
+  AND ip."is_primary" = false
+  AND EXISTS (
+    SELECT 1
+    FROM "instances" AS i
+    WHERE i."status" <> 'deleted'
+      AND i."ipv6" = ip."address"
+  );
+
+INSERT INTO "ip_addresses" ("address", "type", "is_primary", "is_custom", "device", "host_id", "instance_id")
+SELECT
+  i."ipv4",
+  'inet4',
+  true,
+  false,
+  'eth0',
+  i."host_id",
+  i."id"
+FROM "instances" AS i
+LEFT JOIN "ip_addresses" AS ip
+  ON ip."instance_id" = i."id"
+ AND ip."type" = 'inet4'
+ AND ip."is_primary" = true
+ AND ip."is_custom" = false
+WHERE i."status" <> 'deleted'
+  AND i."ipv4" IS NOT NULL
+  AND ip."id" IS NULL;
+
+INSERT INTO "ip_addresses" ("address", "type", "is_primary", "is_custom", "device", "host_id", "instance_id")
+SELECT
+  i."ipv6",
+  'inet6',
+  true,
+  false,
+  'eth1',
+  i."host_id",
+  i."id"
+FROM "instances" AS i
+LEFT JOIN "ip_addresses" AS ip
+  ON ip."instance_id" = i."id"
+ AND ip."type" = 'inet6'
+ AND ip."is_primary" = true
+ AND ip."is_custom" = false
+WHERE i."status" <> 'deleted'
+  AND i."ipv6" IS NOT NULL
+  AND ip."id" IS NULL;
+
+ALTER TABLE "ip_addresses"
+  ALTER COLUMN "host_id" SET NOT NULL;
+
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_constraint
+    WHERE conname = 'ip_addresses_host_id_fkey'
+  ) THEN
+    ALTER TABLE "ip_addresses"
+      ADD CONSTRAINT "ip_addresses_host_id_fkey"
+      FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+  END IF;
+END $$;
+
+CREATE INDEX IF NOT EXISTS "ip_addresses_host_id_idx" ON "ip_addresses"("host_id");
+CREATE INDEX IF NOT EXISTS "ip_addresses_host_id_address_idx" ON "ip_addresses"("host_id", "address");
+
+DROP INDEX IF EXISTS "ip_addresses_address_key";
+DROP INDEX IF EXISTS "ip_addresses_ipv6_address_key";
+DROP INDEX IF EXISTS "ip_addresses_host_id_address_inet4_key";
+DROP INDEX IF EXISTS "instances_active_ipv6_key";
+DROP INDEX IF EXISTS "instances_active_host_id_ipv4_key";
+
+CREATE UNIQUE INDEX "ip_addresses_ipv6_address_key"
+  ON "ip_addresses"("address")
+  WHERE "type" = 'inet6';
+
+CREATE UNIQUE INDEX "ip_addresses_host_id_address_inet4_key"
+  ON "ip_addresses"("host_id", "address")
+  WHERE "type" = 'inet4';
+
+CREATE UNIQUE INDEX "instances_active_ipv6_key"
+  ON "instances"("ipv6")
+  WHERE "status" <> 'deleted'
+    AND "ipv6" IS NOT NULL;
+
+CREATE UNIQUE INDEX "instances_active_host_id_ipv4_key"
+  ON "instances"("host_id", "ipv4")
+  WHERE "status" <> 'deleted'
+    AND "ipv4" IS NOT NULL;
+
+CREATE OR REPLACE FUNCTION sync_ip_address_host_id()
+RETURNS TRIGGER AS $$
+BEGIN
+  SELECT "host_id"
+  INTO NEW."host_id"
+  FROM "instances"
+  WHERE "id" = NEW."instance_id";
+
+  IF NEW."host_id" IS NULL THEN
+    RAISE EXCEPTION 'Unable to resolve host_id for instance %', NEW."instance_id";
+  END IF;
+
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+DROP TRIGGER IF EXISTS "ip_addresses_sync_host_id" ON "ip_addresses";
+
+CREATE TRIGGER "ip_addresses_sync_host_id"
+BEFORE INSERT OR UPDATE
+ON "ip_addresses"
+FOR EACH ROW
+EXECUTE FUNCTION sync_ip_address_host_id();
+
+CREATE OR REPLACE FUNCTION sync_instance_ip_addresses()
+RETURNS TRIGGER AS $$
+BEGIN
+  IF NEW."host_id" IS DISTINCT FROM OLD."host_id" THEN
+    UPDATE "ip_addresses"
+    SET "host_id" = NEW."host_id"
+    WHERE "instance_id" = NEW."id";
+  END IF;
+
+  IF NEW."status" = 'deleted' AND OLD."status" IS DISTINCT FROM 'deleted' THEN
+    DELETE FROM "ip_addresses"
+    WHERE "instance_id" = NEW."id";
+  END IF;
+
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+DROP TRIGGER IF EXISTS "instances_sync_ip_addresses" ON "instances";
+
+CREATE TRIGGER "instances_sync_ip_addresses"
+AFTER UPDATE OF "host_id", "status"
+ON "instances"
+FOR EACH ROW
+EXECUTE FUNCTION sync_instance_ip_addresses();
diff --git a/server/prisma/migrations/20260424114000_add_hosting_feature_visibility/migration.sql b/server/prisma/migrations/20260424114000_add_hosting_feature_visibility/migration.sql
new file mode 100644
index 0000000..8a804fc
--- /dev/null
+++ b/server/prisma/migrations/20260424114000_add_hosting_feature_visibility/migration.sql
@@ -0,0 +1,21 @@
+ALTER TABLE "users"
+ADD COLUMN IF NOT EXISTS "has_created_host_before" BOOLEAN NOT NULL DEFAULT false;
+
+UPDATE "users" AS u
+SET "has_created_host_before" = true
+WHERE EXISTS (
+  SELECT 1
+  FROM "hosts" AS h
+  WHERE h."user_id" = u."id"
+)
+OR EXISTS (
+  SELECT 1
+  FROM "packages" AS p
+  WHERE p."user_id" = u."id"
+)
+OR EXISTS (
+  SELECT 1
+  FROM "logs" AS l
+  WHERE l."user_id" = u."id"
+    AND l."action" = 'host.create'
+);
diff --git a/server/prisma/migrations/20260425114500_add_hosting_user_blocks/migration.sql b/server/prisma/migrations/20260425114500_add_hosting_user_blocks/migration.sql
new file mode 100644
index 0000000..613a501
--- /dev/null
+++ b/server/prisma/migrations/20260425114500_add_hosting_user_blocks/migration.sql
@@ -0,0 +1,25 @@
+-- CreateTable
+CREATE TABLE "hosting_user_blocks" (
+    "id" SERIAL NOT NULL,
+    "blocker_id" INTEGER NOT NULL,
+    "blocked_user_id" INTEGER NOT NULL,
+    "remark" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "hosting_user_blocks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosting_user_blocks_blocker_id_blocked_user_id_key" ON "hosting_user_blocks"("blocker_id", "blocked_user_id");
+
+-- CreateIndex
+CREATE INDEX "hosting_user_blocks_blocked_user_id_idx" ON "hosting_user_blocks"("blocked_user_id");
+
+-- CreateIndex
+CREATE INDEX "hosting_user_blocks_blocker_id_idx" ON "hosting_user_blocks"("blocker_id");
+
+-- AddForeignKey
+ALTER TABLE "hosting_user_blocks" ADD CONSTRAINT "hosting_user_blocks_blocker_id_fkey" FOREIGN KEY ("blocker_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "hosting_user_blocks" ADD CONSTRAINT "hosting_user_blocks_blocked_user_id_fkey" FOREIGN KEY ("blocked_user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260426102000_add_heleket_payment_provider_type/migration.sql b/server/prisma/migrations/20260426102000_add_heleket_payment_provider_type/migration.sql
new file mode 100644
index 0000000..e06b7e2
--- /dev/null
+++ b/server/prisma/migrations/20260426102000_add_heleket_payment_provider_type/migration.sql
@@ -0,0 +1 @@
+ALTER TYPE "PaymentProviderType" ADD VALUE IF NOT EXISTS 'heleket';
diff --git a/server/prisma/migrations/20260426134000_add_recharge_snapshot_and_payment_details/migration.sql b/server/prisma/migrations/20260426134000_add_recharge_snapshot_and_payment_details/migration.sql
new file mode 100644
index 0000000..68931d8
--- /dev/null
+++ b/server/prisma/migrations/20260426134000_add_recharge_snapshot_and_payment_details/migration.sql
@@ -0,0 +1,3 @@
+ALTER TABLE "recharge_records"
+ADD COLUMN IF NOT EXISTS "provider_config_snapshot" TEXT,
+ADD COLUMN IF NOT EXISTS "payment_details" JSONB;
diff --git a/server/prisma/migrations/20260427090000_add_telegram_user_binding/migration.sql b/server/prisma/migrations/20260427090000_add_telegram_user_binding/migration.sql
new file mode 100644
index 0000000..6f8be94
--- /dev/null
+++ b/server/prisma/migrations/20260427090000_add_telegram_user_binding/migration.sql
@@ -0,0 +1,46 @@
+CREATE TABLE "user_telegram_bindings" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "telegram_user_id" TEXT NOT NULL,
+    "telegram_username" TEXT,
+    "first_name" TEXT,
+    "last_name" TEXT,
+    "bound_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "user_telegram_bindings_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "telegram_bind_tokens" (
+    "id" SERIAL NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "token_hash" TEXT NOT NULL,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "used_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "telegram_bind_tokens_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "user_telegram_bindings_user_id_key" ON "user_telegram_bindings"("user_id");
+CREATE UNIQUE INDEX "user_telegram_bindings_telegram_user_id_key" ON "user_telegram_bindings"("telegram_user_id");
+CREATE UNIQUE INDEX "telegram_bind_tokens_token_hash_key" ON "telegram_bind_tokens"("token_hash");
+CREATE INDEX "telegram_bind_tokens_user_id_idx" ON "telegram_bind_tokens"("user_id");
+
+ALTER TABLE "user_telegram_bindings"
+    ADD CONSTRAINT "user_telegram_bindings_user_id_fkey"
+    FOREIGN KEY ("user_id") REFERENCES "users"("id")
+    ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "telegram_bind_tokens"
+    ADD CONSTRAINT "telegram_bind_tokens_user_id_fkey"
+    FOREIGN KEY ("user_id") REFERENCES "users"("id")
+    ON DELETE CASCADE ON UPDATE CASCADE;
+
+INSERT INTO "system_configs" ("key", "value", "type", "label", "description", "updated_at")
+VALUES
+    ('telegram_bot_enabled', 'false', 'boolean', 'Telegram 专用机器人', '是否启用 Telegram 账号绑定机器人', CURRENT_TIMESTAMP),
+    ('telegram_bot_username', '', 'string', 'Telegram Bot 用户名', '机器人用户名，不含 @，用于生成绑定链接', CURRENT_TIMESTAMP),
+    ('telegram_bot_token', '', 'secret', 'Telegram Bot Token', 'BotFather 分配的专用机器人 Token', CURRENT_TIMESTAMP),
+    ('telegram_webhook_secret', '', 'secret', 'Telegram Webhook Secret', 'Telegram webhook 请求头 X-Telegram-Bot-Api-Secret-Token 校验值', CURRENT_TIMESTAMP)
+ON CONFLICT ("key") DO NOTHING;
diff --git a/server/prisma/migrations/20260427143000_add_telegram_group_join_configs/migration.sql b/server/prisma/migrations/20260427143000_add_telegram_group_join_configs/migration.sql
new file mode 100644
index 0000000..80402a0
--- /dev/null
+++ b/server/prisma/migrations/20260427143000_add_telegram_group_join_configs/migration.sql
@@ -0,0 +1,9 @@
+INSERT INTO "system_configs" ("key", "value", "type", "label", "description", "updated_at")
+VALUES
+    ('telegram_group_join_enabled', 'false', 'boolean', 'Telegram 入群申请', '是否允许绑定用户通过机器人申请私有群邀请链接', CURRENT_TIMESTAMP),
+    ('telegram_group_chat_id', '', 'string', 'Telegram 私有群 Chat ID', '用于 createChatInviteLink 的私有群或超级群 chat_id', CURRENT_TIMESTAMP),
+    ('telegram_group_join_mode', 'any', 'string', 'Telegram 入群门槛模式', 'any=充值或消费任一达标，all=充值和消费同时达标', CURRENT_TIMESTAMP),
+    ('telegram_group_min_recharge', '0', 'number', 'Telegram 入群累计充值门槛', '累计充值金额达到该值后可申请入群，0 表示不要求', CURRENT_TIMESTAMP),
+    ('telegram_group_min_consume', '0', 'number', 'Telegram 入群累计消费门槛', '累计消费金额达到该值后可申请入群，0 表示不要求', CURRENT_TIMESTAMP),
+    ('telegram_group_invite_expire_minutes', '30', 'number', 'Telegram 邀请链接有效期', '机器人生成的一次性邀请链接有效分钟数', CURRENT_TIMESTAMP)
+ON CONFLICT ("key") DO NOTHING;
diff --git a/server/prisma/migrations/20260427170000_add_telegram_vip_group_configs/migration.sql b/server/prisma/migrations/20260427170000_add_telegram_vip_group_configs/migration.sql
new file mode 100644
index 0000000..efb635c
--- /dev/null
+++ b/server/prisma/migrations/20260427170000_add_telegram_vip_group_configs/migration.sql
@@ -0,0 +1,9 @@
+INSERT INTO "system_configs" ("key", "value", "type", "label", "description", "updated_at")
+VALUES
+    ('telegram_vip_group_join_enabled', 'false', 'boolean', 'Telegram 高级群入群申请', '是否允许绑定用户通过机器人申请高级用户群邀请链接', CURRENT_TIMESTAMP),
+    ('telegram_vip_group_chat_id', '', 'string', 'Telegram 高级群 Chat ID', '用于 createChatInviteLink 的高级私有群或超级群 chat_id', CURRENT_TIMESTAMP),
+    ('telegram_vip_group_join_mode', 'all', 'string', 'Telegram 高级群门槛模式', 'any=充值或消费任一达标，all=充值和消费同时达标', CURRENT_TIMESTAMP),
+    ('telegram_vip_group_min_recharge', '0', 'number', 'Telegram 高级群累计充值门槛', '累计充值金额达到该值后可申请高级群，0 表示不要求', CURRENT_TIMESTAMP),
+    ('telegram_vip_group_min_consume', '0', 'number', 'Telegram 高级群累计消费门槛', '累计消费金额达到该值后可申请高级群，0 表示不要求', CURRENT_TIMESTAMP),
+    ('telegram_vip_group_invite_expire_minutes', '30', 'number', 'Telegram 高级群邀请链接有效期', '机器人生成的高级群一次性邀请链接有效分钟数', CURRENT_TIMESTAMP)
+ON CONFLICT ("key") DO NOTHING;
diff --git a/server/prisma/migrations/20260427190000_add_instance_audit_tables/migration.sql b/server/prisma/migrations/20260427190000_add_instance_audit_tables/migration.sql
new file mode 100644
index 0000000..351086c
--- /dev/null
+++ b/server/prisma/migrations/20260427190000_add_instance_audit_tables/migration.sql
@@ -0,0 +1,103 @@
+-- Manual instance audit rules, whitelists, scan history, and action history.
+-- These tables are isolated from core instance and billing state so deployment is additive.
+
+CREATE TABLE "instance_audit_rules" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER,
+    "created_by_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "severity" TEXT NOT NULL DEFAULT 'medium',
+    "category" TEXT NOT NULL DEFAULT 'custom',
+    "target_types" JSONB NOT NULL DEFAULT '[]',
+    "match_type" TEXT NOT NULL DEFAULT 'contains',
+    "pattern" TEXT NOT NULL,
+    "case_sensitive" BOOLEAN NOT NULL DEFAULT false,
+    "recommendation" TEXT,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "instance_audit_rules_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "instance_audit_ignores" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "instance_id" INTEGER,
+    "created_by_id" INTEGER NOT NULL,
+    "rule_id" TEXT,
+    "target_type" TEXT,
+    "match_text" TEXT,
+    "scope" TEXT NOT NULL DEFAULT 'instance',
+    "reason" TEXT,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "expires_at" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "instance_audit_ignores_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "instance_audit_scans" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "status" TEXT NOT NULL DEFAULT 'success',
+    "capability" TEXT,
+    "risk_level" TEXT NOT NULL,
+    "finding_count" INTEGER NOT NULL DEFAULT 0,
+    "ignored_count" INTEGER NOT NULL DEFAULT 0,
+    "process_count" INTEGER NOT NULL DEFAULT 0,
+    "connection_count" INTEGER NOT NULL DEFAULT 0,
+    "listening_count" INTEGER NOT NULL DEFAULT 0,
+    "startup_item_count" INTEGER NOT NULL DEFAULT 0,
+    "findings" JSONB NOT NULL DEFAULT '[]',
+    "error" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "instance_audit_scans_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "instance_audit_actions" (
+    "id" SERIAL NOT NULL,
+    "scan_id" INTEGER,
+    "host_id" INTEGER NOT NULL,
+    "instance_id" INTEGER NOT NULL,
+    "user_id" INTEGER NOT NULL,
+    "action_type" TEXT NOT NULL,
+    "pid" INTEGER,
+    "signal" TEXT,
+    "process_command" TEXT,
+    "reason" TEXT NOT NULL,
+    "result" TEXT NOT NULL,
+    "stdout" TEXT,
+    "stderr" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "instance_audit_actions_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "instance_audit_rules_host_id_enabled_idx" ON "instance_audit_rules"("host_id", "enabled");
+CREATE INDEX "instance_audit_rules_created_by_id_idx" ON "instance_audit_rules"("created_by_id");
+CREATE INDEX "instance_audit_ignores_host_id_enabled_idx" ON "instance_audit_ignores"("host_id", "enabled");
+CREATE INDEX "instance_audit_ignores_instance_id_idx" ON "instance_audit_ignores"("instance_id");
+CREATE INDEX "instance_audit_ignores_rule_id_idx" ON "instance_audit_ignores"("rule_id");
+CREATE INDEX "instance_audit_scans_host_id_created_at_idx" ON "instance_audit_scans"("host_id", "created_at" DESC);
+CREATE INDEX "instance_audit_scans_instance_id_created_at_idx" ON "instance_audit_scans"("instance_id", "created_at" DESC);
+CREATE INDEX "instance_audit_actions_host_id_created_at_idx" ON "instance_audit_actions"("host_id", "created_at" DESC);
+CREATE INDEX "instance_audit_actions_instance_id_created_at_idx" ON "instance_audit_actions"("instance_id", "created_at" DESC);
+
+ALTER TABLE "instance_audit_rules" ADD CONSTRAINT "instance_audit_rules_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_rules" ADD CONSTRAINT "instance_audit_rules_created_by_id_fkey" FOREIGN KEY ("created_by_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_ignores" ADD CONSTRAINT "instance_audit_ignores_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_ignores" ADD CONSTRAINT "instance_audit_ignores_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_ignores" ADD CONSTRAINT "instance_audit_ignores_created_by_id_fkey" FOREIGN KEY ("created_by_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_scans" ADD CONSTRAINT "instance_audit_scans_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_scans" ADD CONSTRAINT "instance_audit_scans_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_scans" ADD CONSTRAINT "instance_audit_scans_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_actions" ADD CONSTRAINT "instance_audit_actions_scan_id_fkey" FOREIGN KEY ("scan_id") REFERENCES "instance_audit_scans"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_actions" ADD CONSTRAINT "instance_audit_actions_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_actions" ADD CONSTRAINT "instance_audit_actions_instance_id_fkey" FOREIGN KEY ("instance_id") REFERENCES "instances"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_actions" ADD CONSTRAINT "instance_audit_actions_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260427193000_add_instance_audit_builtin_rule_overrides/migration.sql b/server/prisma/migrations/20260427193000_add_instance_audit_builtin_rule_overrides/migration.sql
new file mode 100644
index 0000000..00f8e1a
--- /dev/null
+++ b/server/prisma/migrations/20260427193000_add_instance_audit_builtin_rule_overrides/migration.sql
@@ -0,0 +1,27 @@
+CREATE TABLE "instance_audit_builtin_rule_overrides" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "builtin_rule_id" TEXT NOT NULL,
+    "created_by_id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "severity" TEXT NOT NULL DEFAULT 'medium',
+    "category" TEXT NOT NULL DEFAULT 'custom',
+    "target_types" JSONB NOT NULL DEFAULT '[]',
+    "match_type" TEXT NOT NULL DEFAULT 'contains',
+    "pattern" TEXT NOT NULL,
+    "case_sensitive" BOOLEAN NOT NULL DEFAULT false,
+    "recommendation" TEXT,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "instance_audit_builtin_rule_overrides_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "instance_audit_builtin_rule_overrides_host_id_builtin_rule_id_key" ON "instance_audit_builtin_rule_overrides"("host_id", "builtin_rule_id");
+CREATE INDEX "instance_audit_builtin_rule_overrides_host_id_enabled_idx" ON "instance_audit_builtin_rule_overrides"("host_id", "enabled");
+CREATE INDEX "instance_audit_builtin_rule_overrides_created_by_id_idx" ON "instance_audit_builtin_rule_overrides"("created_by_id");
+
+ALTER TABLE "instance_audit_builtin_rule_overrides" ADD CONSTRAINT "instance_audit_builtin_rule_overrides_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+ALTER TABLE "instance_audit_builtin_rule_overrides" ADD CONSTRAINT "instance_audit_builtin_rule_overrides_created_by_id_fkey" FOREIGN KEY ("created_by_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260428110000_add_host_agent_identity/migration.sql b/server/prisma/migrations/20260428110000_add_host_agent_identity/migration.sql
new file mode 100644
index 0000000..ed5a796
--- /dev/null
+++ b/server/prisma/migrations/20260428110000_add_host_agent_identity/migration.sql
@@ -0,0 +1,47 @@
+CREATE TABLE "host_agents" (
+    "id" SERIAL NOT NULL,
+    "host_id" INTEGER NOT NULL,
+    "agent_id" TEXT NOT NULL,
+    "secret_hash" TEXT NOT NULL,
+    "secret_encrypted" TEXT NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "status" TEXT NOT NULL DEFAULT 'offline',
+    "version" TEXT,
+    "capabilities" JSONB DEFAULT '[]',
+    "last_report" JSONB DEFAULT '{}',
+    "last_seen_at" TIMESTAMP(3),
+    "last_heartbeat_ip" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "host_agents_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "host_agent_nonces" (
+    "id" SERIAL NOT NULL,
+    "agent_id" TEXT NOT NULL,
+    "nonce" TEXT NOT NULL,
+    "expires_at" TIMESTAMP(3) NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "host_agent_nonces_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "host_agents_host_id_key" ON "host_agents"("host_id");
+CREATE UNIQUE INDEX "host_agents_agent_id_key" ON "host_agents"("agent_id");
+CREATE INDEX "host_agents_enabled_idx" ON "host_agents"("enabled");
+CREATE INDEX "host_agents_status_idx" ON "host_agents"("status");
+CREATE INDEX "host_agents_last_seen_at_idx" ON "host_agents"("last_seen_at");
+CREATE UNIQUE INDEX "host_agent_nonces_agent_id_nonce_key" ON "host_agent_nonces"("agent_id", "nonce");
+CREATE INDEX "host_agent_nonces_agent_id_idx" ON "host_agent_nonces"("agent_id");
+CREATE INDEX "host_agent_nonces_expires_at_idx" ON "host_agent_nonces"("expires_at");
+
+ALTER TABLE "host_agents"
+    ADD CONSTRAINT "host_agents_host_id_fkey"
+    FOREIGN KEY ("host_id") REFERENCES "hosts"("id")
+    ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "host_agent_nonces"
+    ADD CONSTRAINT "host_agent_nonces_agent_id_fkey"
+    FOREIGN KEY ("agent_id") REFERENCES "host_agents"("agent_id")
+    ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260428233000_add_change_host_task_type/migration.sql b/server/prisma/migrations/20260428233000_add_change_host_task_type/migration.sql
new file mode 100644
index 0000000..2faed6b
--- /dev/null
+++ b/server/prisma/migrations/20260428233000_add_change_host_task_type/migration.sql
@@ -0,0 +1 @@
+ALTER TYPE "InstanceTaskType" ADD VALUE IF NOT EXISTS 'change_host';
diff --git a/server/prisma/migrations/20260429080000_add_host_agent_install_token/migration.sql b/server/prisma/migrations/20260429080000_add_host_agent_install_token/migration.sql
new file mode 100644
index 0000000..d921759
--- /dev/null
+++ b/server/prisma/migrations/20260429080000_add_host_agent_install_token/migration.sql
@@ -0,0 +1,7 @@
+ALTER TABLE "host_agents"
+ADD COLUMN "install_token_hash" TEXT,
+ADD COLUMN "install_token_expires_at" TIMESTAMP(3),
+ADD COLUMN "install_token_used_at" TIMESTAMP(3);
+
+CREATE UNIQUE INDEX "host_agents_install_token_hash_key" ON "host_agents"("install_token_hash");
+CREATE INDEX "host_agents_install_token_expires_at_idx" ON "host_agents"("install_token_expires_at");
diff --git a/server/prisma/migrations/20260429120000_add_package_plan_sold_out/migration.sql b/server/prisma/migrations/20260429120000_add_package_plan_sold_out/migration.sql
new file mode 100644
index 0000000..a3cf3de
--- /dev/null
+++ b/server/prisma/migrations/20260429120000_add_package_plan_sold_out/migration.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "package_plans"
+ADD COLUMN "is_sold_out" BOOLEAN NOT NULL DEFAULT false;
diff --git a/server/prisma/migrations/20260501090000_add_package_host_traffic_multiplier/migration.sql b/server/prisma/migrations/20260501090000_add_package_host_traffic_multiplier/migration.sql
new file mode 100644
index 0000000..9d4127b
--- /dev/null
+++ b/server/prisma/migrations/20260501090000_add_package_host_traffic_multiplier/migration.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "package_hosts"
+ADD COLUMN "traffic_multiplier" DECIMAL(8, 3) NOT NULL DEFAULT 1.0;
diff --git a/server/prisma/migrations/20260501133000_add_log_instance_id/migration.sql b/server/prisma/migrations/20260501133000_add_log_instance_id/migration.sql
new file mode 100644
index 0000000..6fa63f2
--- /dev/null
+++ b/server/prisma/migrations/20260501133000_add_log_instance_id/migration.sql
@@ -0,0 +1,157 @@
+ALTER TABLE "logs"
+ADD COLUMN "instance_id" INTEGER;
+
+ALTER TABLE "logs"
+ADD CONSTRAINT "logs_instance_id_fkey"
+FOREIGN KEY ("instance_id") REFERENCES "instances"("id")
+ON DELETE SET NULL ON UPDATE CASCADE;
+
+CREATE INDEX "logs_instance_id_idx" ON "logs"("instance_id");
+
+WITH id_matches AS (
+  SELECT
+    l."id" AS "log_id",
+    l."user_id",
+    (m."match")[1]::integer AS "instance_id"
+  FROM "logs" l
+  CROSS JOIN LATERAL regexp_matches(l."content", 'instance[[:space:]]*#([0-9]+)', 'gi') AS m("match")
+  WHERE l."instance_id" IS NULL
+
+  UNION ALL
+
+  SELECT
+    l."id" AS "log_id",
+    l."user_id",
+    (m."match")[1]::integer AS "instance_id"
+  FROM "logs" l
+  CROSS JOIN LATERAL regexp_matches(l."content", 'instance:[[:space:]]*[^()]*\(#([0-9]+)\)', 'gi') AS m("match")
+  WHERE l."instance_id" IS NULL
+
+  UNION ALL
+
+  SELECT
+    l."id" AS "log_id",
+    l."user_id",
+    (m."match")[1]::integer AS "instance_id"
+  FROM "logs" l
+  CROSS JOIN LATERAL regexp_matches(l."content", 'new instance ID:[[:space:]]*([0-9]+)', 'gi') AS m("match")
+  WHERE l."instance_id" IS NULL
+),
+id_candidates AS (
+  SELECT
+    im."log_id",
+    MIN(im."instance_id") AS "instance_id",
+    COUNT(DISTINCT im."instance_id") AS "match_count"
+  FROM id_matches im
+  JOIN "instances" i
+    ON i."id" = im."instance_id"
+   AND (im."user_id" IS NULL OR i."user_id" = im."user_id")
+  GROUP BY im."log_id"
+)
+UPDATE "logs" l
+SET "instance_id" = c."instance_id"
+FROM id_candidates c
+WHERE l."id" = c."log_id"
+  AND c."match_count" = 1;
+
+WITH rename_logs AS (
+  SELECT
+    l."id",
+    l."user_id",
+    l."created_at",
+    substring(l."content" from 'Renamed instance from "([^"]+)" to "[^"]+"') AS "old_name",
+    substring(l."content" from 'Renamed instance from "[^"]+" to "([^"]+)"') AS "new_name"
+  FROM "logs" l
+  WHERE l."action" = 'instance.rename'
+    AND l."instance_id" IS NULL
+),
+rename_candidates AS (
+  SELECT
+    r."id" AS "log_id",
+    i."id" AS "instance_id",
+    COUNT(*) OVER (PARTITION BY r."id") AS "match_count"
+  FROM rename_logs r
+  JOIN "instances" i
+    ON i."user_id" = r."user_id"
+   AND i."name" = r."new_name"
+   AND i."created_at" <= r."created_at"
+  WHERE r."old_name" IS NOT NULL
+    AND r."new_name" IS NOT NULL
+)
+UPDATE "logs" l
+SET "instance_id" = c."instance_id"
+FROM rename_candidates c
+WHERE l."id" = c."log_id"
+  AND c."match_count" = 1;
+
+WITH RECURSIVE rename_history AS (
+  SELECT
+    l."user_id",
+    l."instance_id",
+    i."created_at" AS "instance_created_at",
+    substring(l."content" from 'Renamed instance from "([^"]+)" to "[^"]+"') AS "old_name",
+    substring(l."content" from 'Renamed instance from "[^"]+" to "([^"]+)"') AS "new_name",
+    l."created_at",
+    1 AS "depth"
+  FROM "logs" l
+  JOIN "instances" i
+    ON i."id" = l."instance_id"
+  WHERE l."action" = 'instance.rename'
+    AND l."instance_id" IS NOT NULL
+
+  UNION ALL
+
+  SELECT
+    prev."user_id",
+    rh."instance_id",
+    rh."instance_created_at",
+    substring(prev."content" from 'Renamed instance from "([^"]+)" to "[^"]+"') AS "old_name",
+    substring(prev."content" from 'Renamed instance from "[^"]+" to "([^"]+)"') AS "new_name",
+    prev."created_at",
+    rh."depth" + 1 AS "depth"
+  FROM rename_history rh
+  JOIN "logs" prev
+    ON prev."action" = 'instance.rename'
+   AND prev."user_id" = rh."user_id"
+   AND prev."created_at" < rh."created_at"
+   AND substring(prev."content" from 'Renamed instance from "[^"]+" to "([^"]+)"') = rh."old_name"
+  WHERE rh."depth" < 20
+),
+old_name_candidates AS (
+  SELECT
+    l."id" AS "log_id",
+    r."instance_id",
+    COUNT(*) OVER (PARTITION BY l."id") AS "match_count"
+  FROM "logs" l
+  JOIN rename_history r
+    ON r."user_id" = l."user_id"
+   AND l."created_at" < r."created_at"
+   AND l."created_at" >= r."instance_created_at"
+   AND strpos(lower(l."content"), lower('instance "' || r."old_name" || '"')) > 0
+  WHERE l."instance_id" IS NULL
+    AND r."old_name" IS NOT NULL
+    AND r."new_name" IS NOT NULL
+)
+UPDATE "logs" l
+SET "instance_id" = c."instance_id"
+FROM old_name_candidates c
+WHERE l."id" = c."log_id"
+  AND c."match_count" = 1;
+
+WITH current_name_candidates AS (
+  SELECT
+    l."id" AS "log_id",
+    i."id" AS "instance_id",
+    COUNT(*) OVER (PARTITION BY l."id") AS "match_count"
+  FROM "logs" l
+  JOIN "instances" i
+    ON i."user_id" = l."user_id"
+   AND l."created_at" >= i."created_at"
+   AND strpos(lower(l."content"), lower('instance "' || i."name" || '"')) > 0
+  WHERE l."instance_id" IS NULL
+)
+UPDATE "logs" l
+SET "instance_id" = c."instance_id"
+FROM current_name_candidates c
+WHERE l."id" = c."log_id"
+  AND c."match_count" = 1;
diff --git a/server/prisma/migrations/20260504120000_add_hosting_zones/migration.sql b/server/prisma/migrations/20260504120000_add_hosting_zones/migration.sql
new file mode 100644
index 0000000..e46c26c
--- /dev/null
+++ b/server/prisma/migrations/20260504120000_add_hosting_zones/migration.sql
@@ -0,0 +1,20 @@
+CREATE TABLE "hosting_zones" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "owner_id" INTEGER NOT NULL,
+    "logo_data_url" TEXT NOT NULL,
+    "sort_order" INTEGER NOT NULL DEFAULT 0,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "hosting_zones_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "hosting_zones_owner_id_key" ON "hosting_zones"("owner_id");
+CREATE INDEX "hosting_zones_active_sort_order_idx" ON "hosting_zones"("active", "sort_order");
+
+ALTER TABLE "hosting_zones"
+ADD CONSTRAINT "hosting_zones_owner_id_fkey"
+FOREIGN KEY ("owner_id") REFERENCES "users"("id")
+ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260504123000_rename_hosting_zone_logo_url/migration.sql b/server/prisma/migrations/20260504123000_rename_hosting_zone_logo_url/migration.sql
new file mode 100644
index 0000000..07ac010
--- /dev/null
+++ b/server/prisma/migrations/20260504123000_rename_hosting_zone_logo_url/migration.sql
@@ -0,0 +1,10 @@
+ALTER TABLE "hosting_zones"
+RENAME COLUMN "logo_data_url" TO "logo_url";
+
+UPDATE "hosting_zones"
+SET "logo_url" = 'https://example.com/hosting-zone-logo-migration-required.png'
+WHERE "logo_url" !~* '^https?://';
+
+ALTER TABLE "hosting_zones"
+ADD CONSTRAINT "hosting_zones_logo_url_http_check"
+CHECK ("logo_url" ~* '^https?://[^[:space:]]+$');
diff --git a/server/prisma/migrations/20260504160000_add_instance_display_order/migration.sql b/server/prisma/migrations/20260504160000_add_instance_display_order/migration.sql
new file mode 100644
index 0000000..8596113
--- /dev/null
+++ b/server/prisma/migrations/20260504160000_add_instance_display_order/migration.sql
@@ -0,0 +1,19 @@
+ALTER TABLE "instances"
+ADD COLUMN "display_order" INTEGER NOT NULL DEFAULT 0;
+
+WITH ordered_instances AS (
+  SELECT
+    "id",
+    (ROW_NUMBER() OVER (
+      PARTITION BY "user_id"
+      ORDER BY "created_at" DESC, "id" ASC
+    ) - 1) * 1000 AS "initial_display_order"
+  FROM "instances"
+)
+UPDATE "instances"
+SET "display_order" = ordered_instances."initial_display_order"
+FROM ordered_instances
+WHERE "instances"."id" = ordered_instances."id";
+
+CREATE INDEX "instances_user_id_display_order_created_at_idx"
+ON "instances"("user_id", "display_order", "created_at" DESC);
diff --git a/server/prisma/migrations/20260505090000_add_package_prerequisite/migration.sql b/server/prisma/migrations/20260505090000_add_package_prerequisite/migration.sql
new file mode 100644
index 0000000..770fea0
--- /dev/null
+++ b/server/prisma/migrations/20260505090000_add_package_prerequisite/migration.sql
@@ -0,0 +1,12 @@
+ALTER TABLE "packages"
+ADD COLUMN "required_package_id" INTEGER;
+
+CREATE INDEX "packages_required_package_id_idx"
+ON "packages"("required_package_id");
+
+ALTER TABLE "packages"
+ADD CONSTRAINT "packages_required_package_id_fkey"
+FOREIGN KEY ("required_package_id")
+REFERENCES "packages"("id")
+ON DELETE NO ACTION
+ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20260505170000_harden_instance_destroy_idempotency/migration.sql b/server/prisma/migrations/20260505170000_harden_instance_destroy_idempotency/migration.sql
new file mode 100644
index 0000000..10df467
--- /dev/null
+++ b/server/prisma/migrations/20260505170000_harden_instance_destroy_idempotency/migration.sql
@@ -0,0 +1,21 @@
+-- Remove historical duplicate destroy markers before adding the guard.
+-- Balance remediation for duplicate refunds must be handled separately because
+-- those rows already affected user balances.
+CREATE TABLE IF NOT EXISTS "user_destroy_records_duplicate_archive" AS
+SELECT a.*, now() AS "archived_at"
+FROM "user_destroy_records" a
+JOIN "user_destroy_records" b
+  ON a."instance_id" = b."instance_id"
+WHERE a."destroyed_at" < b."destroyed_at"
+  OR (a."destroyed_at" = b."destroyed_at" AND a."id" < b."id");
+
+DELETE FROM "user_destroy_records" a
+USING "user_destroy_records" b
+WHERE a."instance_id" = b."instance_id"
+  AND (
+    a."destroyed_at" < b."destroyed_at"
+    OR (a."destroyed_at" = b."destroyed_at" AND a."id" < b."id")
+  );
+
+CREATE UNIQUE INDEX "user_destroy_records_instance_id_key"
+ON "user_destroy_records"("instance_id");
diff --git a/server/prisma/migrations/20260522090000_add_user_invite_costs/migration.sql b/server/prisma/migrations/20260522090000_add_user_invite_costs/migration.sql
new file mode 100644
index 0000000..74beeee
--- /dev/null
+++ b/server/prisma/migrations/20260522090000_add_user_invite_costs/migration.sql
@@ -0,0 +1,5 @@
+ALTER TYPE "BalanceLogType" ADD VALUE IF NOT EXISTS 'invite_generate';
+ALTER TYPE "PointsLogType" ADD VALUE IF NOT EXISTS 'invite_generate';
+
+ALTER TABLE "invite_codes"
+ADD COLUMN IF NOT EXISTS "cost_snapshot" JSONB;
diff --git a/server/prisma/migrations/20260522100000_enable_package_instance_deletion_default/migration.sql b/server/prisma/migrations/20260522100000_enable_package_instance_deletion_default/migration.sql
new file mode 100644
index 0000000..98d4729
--- /dev/null
+++ b/server/prisma/migrations/20260522100000_enable_package_instance_deletion_default/migration.sql
@@ -0,0 +1,4 @@
+-- This setting is no longer exposed in the package form. Keep the column for
+-- compatibility, but make the hidden default consistently allow deletion.
+UPDATE "packages" SET "allow_instance_deletion" = true WHERE "allow_instance_deletion" = false;
+ALTER TABLE "packages" ALTER COLUMN "allow_instance_deletion" SET DEFAULT true;
diff --git a/server/prisma/migrations/20260614120000_add_vip_level_rules/migration.sql b/server/prisma/migrations/20260614120000_add_vip_level_rules/migration.sql
new file mode 100644
index 0000000..e255b65
--- /dev/null
+++ b/server/prisma/migrations/20260614120000_add_vip_level_rules/migration.sql
@@ -0,0 +1,38 @@
+CREATE TYPE "VipLevelRuleType" AS ENUM ('user', 'hosting');
+
+CREATE TYPE "VipLevelConditionMode" AS ENUM ('any', 'all');
+
+CREATE TABLE "vip_level_rules" (
+  "id" SERIAL NOT NULL,
+  "type" "VipLevelRuleType" NOT NULL,
+  "level" INTEGER NOT NULL,
+  "enabled" BOOLEAN NOT NULL DEFAULT true,
+  "condition_mode" "VipLevelConditionMode" NOT NULL DEFAULT 'any',
+  "min_recharge" DECIMAL(10, 2),
+  "min_consume" DECIMAL(10, 2),
+  "min_hosting_income" DECIMAL(10, 2),
+  "min_hosting_instances" INTEGER,
+  "benefits" JSONB NOT NULL DEFAULT '{}',
+  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+  CONSTRAINT "vip_level_rules_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "vip_level_rules_type_level_key" ON "vip_level_rules"("type", "level");
+CREATE INDEX "vip_level_rules_type_enabled_idx" ON "vip_level_rules"("type", "enabled");
+
+INSERT INTO "vip_level_rules" (
+  "type",
+  "level",
+  "enabled",
+  "condition_mode",
+  "min_hosting_income",
+  "min_hosting_instances",
+  "benefits"
+) VALUES
+  ('hosting', 1, true, 'any', 50.00, 10, '{}'),
+  ('hosting', 2, true, 'any', 100.00, 25, '{}'),
+  ('hosting', 3, true, 'any', 200.00, 50, '{}'),
+  ('hosting', 4, true, 'any', 300.00, 75, '{}'),
+  ('hosting', 5, true, 'any', 500.00, 100, '{}');
diff --git a/server/prisma/migrations/20260615090000_add_user_vip_metric_config/migration.sql b/server/prisma/migrations/20260615090000_add_user_vip_metric_config/migration.sql
new file mode 100644
index 0000000..c1364a9
--- /dev/null
+++ b/server/prisma/migrations/20260615090000_add_user_vip_metric_config/migration.sql
@@ -0,0 +1,11 @@
+INSERT INTO "system_configs" ("key", "value", "type", "label", "description", "created_at", "updated_at")
+VALUES (
+  'user_vip_metric',
+  'totalRecharge',
+  'string',
+  '用户 VIP 统计口径',
+  '用户 VIP 等级全局计算口径：totalRecharge=累计充值，totalConsume=累计消费',
+  CURRENT_TIMESTAMP,
+  CURRENT_TIMESTAMP
+)
+ON CONFLICT ("key") DO NOTHING;
diff --git a/server/prisma/migrations/20260616120000_add_vip_benefit_hall/migration.sql b/server/prisma/migrations/20260616120000_add_vip_benefit_hall/migration.sql
new file mode 100644
index 0000000..2848506
--- /dev/null
+++ b/server/prisma/migrations/20260616120000_add_vip_benefit_hall/migration.sql
@@ -0,0 +1,182 @@
+DO $$
+BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'VipBenefitRewardType') THEN
+    CREATE TYPE "VipBenefitRewardType" AS ENUM ('balance', 'points', 'instance');
+  END IF;
+END $$;
+
+DO $$
+BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'VipBenefitClaimStatus') THEN
+    CREATE TYPE "VipBenefitClaimStatus" AS ENUM ('delivered', 'pending');
+  END IF;
+END $$;
+
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_enum e
+    JOIN pg_type t ON t.oid = e.enumtypid
+    WHERE t.typname = 'PointsLogType' AND e.enumlabel = 'vip_benefit'
+  ) THEN
+    ALTER TYPE "PointsLogType" ADD VALUE 'vip_benefit';
+  END IF;
+END $$;
+
+CREATE TABLE IF NOT EXISTS "vip_benefit_rewards" (
+  "id" SERIAL NOT NULL,
+  "level" INTEGER NOT NULL,
+  "type" "VipBenefitRewardType" NOT NULL,
+  "title" TEXT NOT NULL,
+  "description" TEXT,
+  "claim_limit" INTEGER NOT NULL DEFAULT 1,
+  "sort_order" INTEGER NOT NULL DEFAULT 0,
+  "enabled" BOOLEAN NOT NULL DEFAULT true,
+  "config" JSONB NOT NULL DEFAULT '{}',
+  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+  CONSTRAINT "vip_benefit_rewards_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE IF NOT EXISTS "vip_benefit_claims" (
+  "id" SERIAL NOT NULL,
+  "user_id" INTEGER NOT NULL,
+  "reward_id" INTEGER NOT NULL,
+  "level" INTEGER NOT NULL,
+  "status" "VipBenefitClaimStatus" NOT NULL,
+  "claim_no" INTEGER NOT NULL,
+  "snapshot" JSONB NOT NULL DEFAULT '{}',
+  "delivered_at" TIMESTAMP(3),
+  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+  CONSTRAINT "vip_benefit_claims_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX IF NOT EXISTS "vip_benefit_rewards_level_enabled_sort_order_idx" ON "vip_benefit_rewards"("level", "enabled", "sort_order");
+CREATE INDEX IF NOT EXISTS "vip_benefit_rewards_type_idx" ON "vip_benefit_rewards"("type");
+CREATE UNIQUE INDEX IF NOT EXISTS "vip_benefit_claims_user_id_reward_id_claim_no_key" ON "vip_benefit_claims"("user_id", "reward_id", "claim_no");
+CREATE INDEX IF NOT EXISTS "vip_benefit_claims_user_id_level_idx" ON "vip_benefit_claims"("user_id", "level");
+CREATE INDEX IF NOT EXISTS "vip_benefit_claims_reward_id_idx" ON "vip_benefit_claims"("reward_id");
+CREATE INDEX IF NOT EXISTS "vip_benefit_claims_status_created_at_idx" ON "vip_benefit_claims"("status", "created_at");
+
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1 FROM pg_constraint WHERE conname = 'vip_benefit_claims_user_id_fkey'
+  ) THEN
+    ALTER TABLE "vip_benefit_claims"
+      ADD CONSTRAINT "vip_benefit_claims_user_id_fkey"
+      FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+  END IF;
+END $$;
+
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1 FROM pg_constraint WHERE conname = 'vip_benefit_claims_reward_id_fkey'
+  ) THEN
+    ALTER TABLE "vip_benefit_claims"
+      ADD CONSTRAINT "vip_benefit_claims_reward_id_fkey"
+      FOREIGN KEY ("reward_id") REFERENCES "vip_benefit_rewards"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+  END IF;
+END $$;
+
+INSERT INTO "vip_benefit_rewards" (
+  "level",
+  "type",
+  "title",
+  "description",
+  "claim_limit",
+  "sort_order",
+  "enabled",
+  "config"
+)
+SELECT
+  r."level",
+  'balance'::"VipBenefitRewardType",
+  'VIP' || r."level" || ' 赠金',
+  '用户达到 VIP' || r."level" || ' 后可领取的余额奖励',
+  1,
+  10,
+  true,
+  jsonb_build_object('amount', ((r."benefits"->'benefitHall'->'balance'->>'amount')::numeric))
+FROM "vip_level_rules" r
+WHERE r."type" = 'user'
+  AND COALESCE((r."benefits"->'benefitHall'->'balance'->>'enabled')::boolean, false) = true
+  AND COALESCE((r."benefits"->'benefitHall'->'balance'->>'amount')::numeric, 0) > 0
+  AND NOT EXISTS (
+    SELECT 1 FROM "vip_benefit_rewards" existing
+    WHERE existing."level" = r."level"
+      AND existing."type" = 'balance'::"VipBenefitRewardType"
+      AND existing."sort_order" = 10
+  );
+
+INSERT INTO "vip_benefit_rewards" (
+  "level",
+  "type",
+  "title",
+  "description",
+  "claim_limit",
+  "sort_order",
+  "enabled",
+  "config"
+)
+SELECT
+  r."level",
+  'points'::"VipBenefitRewardType",
+  'VIP' || r."level" || ' 积分',
+  '用户达到 VIP' || r."level" || ' 后可领取的积分奖励',
+  1,
+  20,
+  true,
+  jsonb_build_object('amount', ((r."benefits"->'benefitHall'->'points'->>'amount')::integer))
+FROM "vip_level_rules" r
+WHERE r."type" = 'user'
+  AND COALESCE((r."benefits"->'benefitHall'->'points'->>'enabled')::boolean, false) = true
+  AND COALESCE((r."benefits"->'benefitHall'->'points'->>'amount')::integer, 0) > 0
+  AND NOT EXISTS (
+    SELECT 1 FROM "vip_benefit_rewards" existing
+    WHERE existing."level" = r."level"
+      AND existing."type" = 'points'::"VipBenefitRewardType"
+      AND existing."sort_order" = 20
+  );
+
+INSERT INTO "vip_benefit_rewards" (
+  "level",
+  "type",
+  "title",
+  "description",
+  "claim_limit",
+  "sort_order",
+  "enabled",
+  "config"
+)
+SELECT
+  r."level",
+  'instance'::"VipBenefitRewardType",
+  'VIP' || r."level" || ' 套餐实例',
+  '用户达到 VIP' || r."level" || ' 后可登记领取的套餐实例奖励',
+  1,
+  30,
+  true,
+  jsonb_build_object(
+    'packageId', ((r."benefits"->'benefitHall'->'instance'->>'packageId')::integer),
+    'packageName', r."benefits"->'benefitHall'->'instance'->>'packageName',
+    'planId', ((r."benefits"->'benefitHall'->'instance'->>'planId')::integer),
+    'planName', r."benefits"->'benefitHall'->'instance'->>'planName',
+    'days', COALESCE((r."benefits"->'benefitHall'->'instance'->>'days')::integer, 30),
+    'quantity', COALESCE((r."benefits"->'benefitHall'->'instance'->>'quantity')::integer, 1)
+  )
+FROM "vip_level_rules" r
+WHERE r."type" = 'user'
+  AND COALESCE((r."benefits"->'benefitHall'->'instance'->>'enabled')::boolean, false) = true
+  AND COALESCE((r."benefits"->'benefitHall'->'instance'->>'packageId')::integer, 0) > 0
+  AND COALESCE((r."benefits"->'benefitHall'->'instance'->>'planId')::integer, 0) > 0
+  AND NOT EXISTS (
+    SELECT 1 FROM "vip_benefit_rewards" existing
+    WHERE existing."level" = r."level"
+      AND existing."type" = 'instance'::"VipBenefitRewardType"
+      AND existing."sort_order" = 30
+  );
diff --git a/server/prisma/migrations/20260619193000_refresh_default_system_images/migration.sql b/server/prisma/migrations/20260619193000_refresh_default_system_images/migration.sql
new file mode 100644
index 0000000..2a8d586
--- /dev/null
+++ b/server/prisma/migrations/20260619193000_refresh_default_system_images/migration.sql
@@ -0,0 +1,86 @@
+-- Refresh default system image catalog.
+-- Keep custom admin-created images, but remove the old built-in defaults that
+-- are no longer part of the supported catalog.
+
+DELETE FROM "system_images"
+WHERE "remote_alias" IN (
+  'images:alpine/3.19/cloud',
+  'images:alpine/3.20/cloud',
+  'images:fedora/41/cloud',
+  'images:fedora/42/cloud',
+  'images:kali/cloud',
+  'images:opensuse/15.6/cloud',
+  'images:opensuse/tumbleweed/cloud',
+  'images:oracle/8/cloud',
+  'images:oracle/9/cloud',
+  'images:ubuntu/25.04/cloud'
+);
+
+INSERT INTO "system_images" ("name", "remote_alias", "os_type", "architecture", "instance_type", "icon", "sort_order", "updated_at") VALUES
+-- Alpine
+('Alpine 3.21', 'images:alpine/3.21/cloud', 'Linux', 'x86_64', 'both', 'alpine', 100, NOW()),
+('Alpine 3.21', 'images:alpine/3.21/cloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 101, NOW()),
+('Alpine 3.21 Tiny Cloud', 'images:alpine/3.21/tinycloud', 'Linux', 'x86_64', 'both', 'alpine', 102, NOW()),
+('Alpine 3.21 Tiny Cloud', 'images:alpine/3.21/tinycloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 103, NOW()),
+('Alpine 3.22', 'images:alpine/3.22/cloud', 'Linux', 'x86_64', 'both', 'alpine', 104, NOW()),
+('Alpine 3.22', 'images:alpine/3.22/cloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 105, NOW()),
+('Alpine 3.22 Tiny Cloud', 'images:alpine/3.22/tinycloud', 'Linux', 'x86_64', 'both', 'alpine', 106, NOW()),
+('Alpine 3.22 Tiny Cloud', 'images:alpine/3.22/tinycloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 107, NOW()),
+('Alpine 3.23', 'images:alpine/3.23/cloud', 'Linux', 'x86_64', 'both', 'alpine', 108, NOW()),
+('Alpine 3.23', 'images:alpine/3.23/cloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 109, NOW()),
+('Alpine 3.23 Tiny Cloud', 'images:alpine/3.23/tinycloud', 'Linux', 'x86_64', 'both', 'alpine', 110, NOW()),
+('Alpine 3.23 Tiny Cloud', 'images:alpine/3.23/tinycloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 111, NOW()),
+('Alpine 3.24', 'images:alpine/3.24/cloud', 'Linux', 'x86_64', 'both', 'alpine', 112, NOW()),
+('Alpine 3.24', 'images:alpine/3.24/cloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 113, NOW()),
+('Alpine 3.24 Tiny Cloud', 'images:alpine/3.24/tinycloud', 'Linux', 'x86_64', 'both', 'alpine', 114, NOW()),
+('Alpine 3.24 Tiny Cloud', 'images:alpine/3.24/tinycloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 115, NOW()),
+('Alpine Edge', 'images:alpine/edge/cloud', 'Linux', 'x86_64', 'both', 'alpine', 116, NOW()),
+('Alpine Edge', 'images:alpine/edge/cloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 117, NOW()),
+('Alpine Edge Tiny Cloud', 'images:alpine/edge/tinycloud', 'Linux', 'x86_64', 'both', 'alpine', 118, NOW()),
+('Alpine Edge Tiny Cloud', 'images:alpine/edge/tinycloud/arm64', 'Linux', 'aarch64', 'both', 'alpine', 119, NOW()),
+-- Debian
+('Debian 11 (Bullseye)', 'images:debian/11/cloud', 'Linux', 'x86_64', 'both', 'debian', 200, NOW()),
+('Debian 11 (Bullseye)', 'images:debian/11/cloud/arm64', 'Linux', 'aarch64', 'both', 'debian', 201, NOW()),
+('Debian 12 (Bookworm)', 'images:debian/12/cloud', 'Linux', 'x86_64', 'both', 'debian', 202, NOW()),
+('Debian 12 (Bookworm)', 'images:debian/12/cloud/arm64', 'Linux', 'aarch64', 'both', 'debian', 203, NOW()),
+('Debian 13 (Trixie)', 'images:debian/13/cloud', 'Linux', 'x86_64', 'both', 'debian', 204, NOW()),
+('Debian 13 (Trixie)', 'images:debian/13/cloud/arm64', 'Linux', 'aarch64', 'both', 'debian', 205, NOW()),
+('Debian 14 (Forky)', 'images:debian/14/cloud', 'Linux', 'x86_64', 'both', 'debian', 206, NOW()),
+('Debian 14 (Forky)', 'images:debian/14/cloud/arm64', 'Linux', 'aarch64', 'both', 'debian', 207, NOW()),
+-- Ubuntu
+('Ubuntu 22.04 (Jammy)', 'images:ubuntu/jammy/cloud', 'Linux', 'x86_64', 'both', 'ubuntu', 300, NOW()),
+('Ubuntu 22.04 (Jammy)', 'images:ubuntu/jammy/cloud/arm64', 'Linux', 'aarch64', 'both', 'ubuntu', 301, NOW()),
+('Ubuntu 24.04 (Noble)', 'images:ubuntu/noble/cloud', 'Linux', 'x86_64', 'both', 'ubuntu', 302, NOW()),
+('Ubuntu 24.04 (Noble)', 'images:ubuntu/noble/cloud/arm64', 'Linux', 'aarch64', 'both', 'ubuntu', 303, NOW()),
+('Ubuntu 25.10 (Questing)', 'images:ubuntu/25.10/cloud', 'Linux', 'x86_64', 'both', 'ubuntu', 304, NOW()),
+('Ubuntu 25.10 (Questing)', 'images:ubuntu/25.10/cloud/arm64', 'Linux', 'aarch64', 'both', 'ubuntu', 305, NOW()),
+('Ubuntu 26.04 (Resolute)', 'images:ubuntu/26.04/cloud', 'Linux', 'x86_64', 'both', 'ubuntu', 306, NOW()),
+('Ubuntu 26.04 (Resolute)', 'images:ubuntu/26.04/cloud/arm64', 'Linux', 'aarch64', 'both', 'ubuntu', 307, NOW()),
+-- Rocky Linux
+('Rocky Linux 8', 'images:rockylinux/8/cloud', 'Linux', 'x86_64', 'both', 'rockylinux', 400, NOW()),
+('Rocky Linux 8', 'images:rockylinux/8/cloud/arm64', 'Linux', 'aarch64', 'container', 'rockylinux', 401, NOW()),
+('Rocky Linux 9', 'images:rockylinux/9/cloud', 'Linux', 'x86_64', 'both', 'rockylinux', 402, NOW()),
+('Rocky Linux 9', 'images:rockylinux/9/cloud/arm64', 'Linux', 'aarch64', 'container', 'rockylinux', 403, NOW()),
+('Rocky Linux 10', 'images:rockylinux/10/cloud', 'Linux', 'x86_64', 'both', 'rockylinux', 404, NOW()),
+('Rocky Linux 10', 'images:rockylinux/10/cloud/arm64', 'Linux', 'aarch64', 'container', 'rockylinux', 405, NOW()),
+-- AlmaLinux
+('AlmaLinux 8', 'images:almalinux/8/cloud', 'Linux', 'x86_64', 'both', 'almalinux', 500, NOW()),
+('AlmaLinux 8', 'images:almalinux/8/cloud/arm64', 'Linux', 'aarch64', 'container', 'almalinux', 501, NOW()),
+('AlmaLinux 9', 'images:almalinux/9/cloud', 'Linux', 'x86_64', 'both', 'almalinux', 502, NOW()),
+('AlmaLinux 9', 'images:almalinux/9/cloud/arm64', 'Linux', 'aarch64', 'container', 'almalinux', 503, NOW()),
+('AlmaLinux 10', 'images:almalinux/10/cloud', 'Linux', 'x86_64', 'both', 'almalinux', 504, NOW()),
+('AlmaLinux 10', 'images:almalinux/10/cloud/arm64', 'Linux', 'aarch64', 'container', 'almalinux', 505, NOW()),
+-- CentOS
+('CentOS 9 Stream', 'images:centos/9-Stream/cloud', 'Linux', 'x86_64', 'both', 'centos', 600, NOW()),
+('CentOS 9 Stream', 'images:centos/9-Stream/cloud/arm64', 'Linux', 'aarch64', 'container', 'centos', 601, NOW()),
+('CentOS 10 Stream', 'images:centos/10-Stream/cloud', 'Linux', 'x86_64', 'both', 'centos', 602, NOW()),
+('CentOS 10 Stream', 'images:centos/10-Stream/cloud/arm64', 'Linux', 'aarch64', 'container', 'centos', 603, NOW())
+ON CONFLICT ("remote_alias") DO UPDATE SET
+  "name" = EXCLUDED."name",
+  "os_type" = EXCLUDED."os_type",
+  "architecture" = EXCLUDED."architecture",
+  "instance_type" = EXCLUDED."instance_type",
+  "icon" = EXCLUDED."icon",
+  "sort_order" = EXCLUDED."sort_order",
+  "hidden" = false,
+  "updated_at" = NOW();
diff --git a/server/prisma/migrations/20260619210000_add_hosting_market_entry_config/migration.sql b/server/prisma/migrations/20260619210000_add_hosting_market_entry_config/migration.sql
new file mode 100644
index 0000000..b757805
--- /dev/null
+++ b/server/prisma/migrations/20260619210000_add_hosting_market_entry_config/migration.sql
@@ -0,0 +1,11 @@
+INSERT INTO "system_configs" ("key", "value", "type", "label", "description", "created_at", "updated_at")
+VALUES (
+  'hosting_market_entry_enabled',
+  'true',
+  'boolean',
+  '托管套餐购买入口',
+  '控制开通实例页面是否显示托管专区和托管套餐购买入口',
+  CURRENT_TIMESTAMP,
+  CURRENT_TIMESTAMP
+)
+ON CONFLICT ("key") DO NOTHING;
diff --git a/server/prisma/migrations/20260620110000_add_dynamic_badge_catalog/migration.sql b/server/prisma/migrations/20260620110000_add_dynamic_badge_catalog/migration.sql
new file mode 100644
index 0000000..4174492
--- /dev/null
+++ b/server/prisma/migrations/20260620110000_add_dynamic_badge_catalog/migration.sql
@@ -0,0 +1,157 @@
+CREATE TABLE "badge_series" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "name_zh" TEXT NOT NULL,
+    "name_en" TEXT,
+    "description" TEXT NOT NULL,
+    "source_id" TEXT,
+    "source_label" TEXT,
+    "display_order" INTEGER NOT NULL DEFAULT 0,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "badge_series_pkey" PRIMARY KEY ("id")
+);
+
+CREATE TABLE "badges" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "name_en" TEXT,
+    "full_label" TEXT NOT NULL,
+    "series_id" TEXT NOT NULL,
+    "source_id" TEXT,
+    "source_label" TEXT,
+    "asset_url" TEXT NOT NULL,
+    "asset_url_dark" TEXT,
+    "asset_url_light" TEXT,
+    "display_order" INTEGER NOT NULL DEFAULT 0,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "badges_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "badge_series_display_order_idx" ON "badge_series"("display_order");
+CREATE INDEX "badge_series_is_active_idx" ON "badge_series"("is_active");
+CREATE INDEX "badges_series_id_display_order_idx" ON "badges"("series_id", "display_order");
+CREATE INDEX "badges_is_active_idx" ON "badges"("is_active");
+
+ALTER TABLE "badges"
+  ADD CONSTRAINT "badges_series_id_fkey"
+  FOREIGN KEY ("series_id") REFERENCES "badge_series"("id")
+  ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- Seed the current built-in badge catalog into the database.
+INSERT INTO "badge_series" ("id", "title", "name_zh", "name_en", "description", "source_id", "source_label", "display_order", "is_active") VALUES
+('supreme', '👑 SUPREME 尊贵系列', '尊贵系列', 'SUPREME', '极致尊贵的云实例，代表统治级的算力引擎与物理机。', 'core', '核心科幻', 100, true),
+('celestial', '🌌 CELESTIAL 行星系列', '行星系列', 'CELESTIAL', '浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。', 'core', '核心科幻', 200, true),
+('aegis', '🛡️ AEGIS 防御装甲', '防御装甲', 'AEGIS', '重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。', 'core', '核心科幻', 300, true),
+('reactor', '☢️ REACTOR 能源核心', '能源核心', 'REACTOR', '狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。', 'core', '核心科幻', 400, true),
+('tactical', '👁️ TACTICAL 战术打击', '战术打击', 'TACTICAL', '锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。', 'core', '核心科幻', 500, true),
+('arcane', '✡️ ARCANE 魔能矩阵', '魔能矩阵', 'ARCANE', '神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。', 'core', '核心科幻', 600, true),
+('zodiac', '🐉 ZODIAC 生肖机甲 (五行重铸)', '生肖机甲 (五行重铸)', 'ZODIAC', '打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。', 'astro-zodiac', '星相生肖', 700, true),
+('astral', '✨ ASTRAL 全息星图 (四象法则)', '全息星图 (四象法则)', 'ASTRAL', '火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。', 'astro-zodiac', '星相生肖', 800, true)
+ON CONFLICT ("id") DO NOTHING;
+
+INSERT INTO "badges" ("id", "name", "name_en", "full_label", "series_id", "source_id", "source_label", "asset_url", "asset_url_dark", "asset_url_light", "display_order", "is_active") VALUES
+('elite', '精英', 'Elite', '精英 (Elite)', 'supreme', 'core', '核心科幻', '/badges/dark/elite.svg', '/badges/dark/elite.svg', '/badges/light/elite.svg', 10, true),
+('ultra', '极致', 'Ultra', '极致 (Ultra)', 'supreme', 'core', '核心科幻', '/badges/dark/ultra.svg', '/badges/dark/ultra.svg', '/badges/light/ultra.svg', 20, true),
+('apex', '巅峰', 'Apex', '巅峰 (Apex)', 'supreme', 'core', '核心科幻', '/badges/dark/apex.svg', '/badges/dark/apex.svg', '/badges/light/apex.svg', 30, true),
+('quantum', '量子', 'Quantum', '量子 (Quantum)', 'supreme', 'core', '核心科幻', '/badges/dark/quantum.svg', '/badges/dark/quantum.svg', '/badges/light/quantum.svg', 40, true),
+('titan', '泰坦', 'Titan', '泰坦 (Titan)', 'supreme', 'core', '核心科幻', '/badges/dark/titan.svg', '/badges/dark/titan.svg', '/badges/light/titan.svg', 50, true),
+('omega', '终极', 'Omega', '终极 (Omega)', 'supreme', 'core', '核心科幻', '/badges/dark/omega.svg', '/badges/dark/omega.svg', '/badges/light/omega.svg', 60, true),
+('matrix', '矩阵', 'Matrix', '矩阵 (Matrix)', 'supreme', 'core', '核心科幻', '/badges/dark/matrix.svg', '/badges/dark/matrix.svg', '/badges/light/matrix.svg', 70, true),
+('vanguard', '先锋', 'Vanguard', '先锋 (Vanguard)', 'supreme', 'core', '核心科幻', '/badges/dark/vanguard.svg', '/badges/dark/vanguard.svg', '/badges/light/vanguard.svg', 80, true),
+('genesis', '创世', 'Genesis', '创世 (Genesis)', 'supreme', 'core', '核心科幻', '/badges/dark/genesis.svg', '/badges/dark/genesis.svg', '/badges/light/genesis.svg', 90, true),
+('nexus', '枢纽', 'Nexus', '枢纽 (Nexus)', 'supreme', 'core', '核心科幻', '/badges/dark/nexus.svg', '/badges/dark/nexus.svg', '/badges/light/nexus.svg', 100, true),
+('solaris', '恒星', 'Solaris', '恒星 (Solaris)', 'celestial', 'core', '核心科幻', '/badges/dark/solaris.svg', '/badges/dark/solaris.svg', '/badges/light/solaris.svg', 110, true),
+('earth', '地球', 'Earth', '地球 (Earth)', 'celestial', 'core', '核心科幻', '/badges/dark/earth.svg', '/badges/dark/earth.svg', '/badges/light/earth.svg', 120, true),
+('moon', '月球', 'Luna', '月球 (Luna)', 'celestial', 'core', '核心科幻', '/badges/dark/moon.svg', '/badges/dark/moon.svg', '/badges/light/moon.svg', 130, true),
+('ares', '火星', 'Ares', '火星 (Ares)', 'celestial', 'core', '核心科幻', '/badges/dark/ares.svg', '/badges/dark/ares.svg', '/badges/light/ares.svg', 140, true),
+('jupiter', '木星', 'Jupiter', '木星 (Jupiter)', 'celestial', 'core', '核心科幻', '/badges/dark/jupiter.svg', '/badges/dark/jupiter.svg', '/badges/light/jupiter.svg', 150, true),
+('cronus', '土星', 'Cronus', '土星 (Cronus)', 'celestial', 'core', '核心科幻', '/badges/dark/cronus.svg', '/badges/dark/cronus.svg', '/badges/light/cronus.svg', 160, true),
+('uranus', '天王星', 'Uranus', '天王星 (Uranus)', 'celestial', 'core', '核心科幻', '/badges/dark/uranus.svg', '/badges/dark/uranus.svg', '/badges/light/uranus.svg', 170, true),
+('neptune', '海王星', 'Neptune', '海王星 (Neptune)', 'celestial', 'core', '核心科幻', '/badges/dark/neptune.svg', '/badges/dark/neptune.svg', '/badges/light/neptune.svg', 180, true),
+('pluto', '冥王星', 'Pluto', '冥王星 (Pluto)', 'celestial', 'core', '核心科幻', '/badges/dark/pluto.svg', '/badges/dark/pluto.svg', '/badges/light/pluto.svg', 190, true),
+('blackhole', '黑洞', 'Black Hole', '黑洞 (Black Hole)', 'celestial', 'core', '核心科幻', '/badges/dark/blackhole.svg', '/badges/dark/blackhole.svg', '/badges/light/blackhole.svg', 200, true),
+('mercury', '水星', 'Mercury', '水星 (Mercury)', 'celestial', 'core', '核心科幻', '/badges/dark/mercury.svg', '/badges/dark/mercury.svg', '/badges/light/mercury.svg', 210, true),
+('nebula', '星云', 'Nebula', '星云 (Nebula)', 'celestial', 'core', '核心科幻', '/badges/dark/nebula.svg', '/badges/dark/nebula.svg', '/badges/light/nebula.svg', 220, true),
+('pulsar', '脉冲星', 'Pulsar', '脉冲星 (Pulsar)', 'celestial', 'core', '核心科幻', '/badges/dark/pulsar.svg', '/badges/dark/pulsar.svg', '/badges/light/pulsar.svg', 230, true),
+('wormhole', '虫洞', 'Wormhole', '虫洞 (Wormhole)', 'celestial', 'core', '核心科幻', '/badges/dark/wormhole.svg', '/badges/dark/wormhole.svg', '/badges/light/wormhole.svg', 240, true),
+('galaxy', '星系', 'Galaxy', '星系 (Galaxy)', 'celestial', 'core', '核心科幻', '/badges/dark/galaxy.svg', '/badges/dark/galaxy.svg', '/badges/light/galaxy.svg', 250, true),
+('bastion', '堡垒', 'Bastion', '堡垒 (Bastion)', 'aegis', 'core', '核心科幻', '/badges/dark/bastion.svg', '/badges/dark/bastion.svg', '/badges/light/bastion.svg', 260, true),
+('phalanx', '方阵', 'Phalanx', '方阵 (Phalanx)', 'aegis', 'core', '核心科幻', '/badges/dark/phalanx.svg', '/badges/dark/phalanx.svg', '/badges/light/phalanx.svg', 270, true),
+('sentinel', '哨兵', 'Sentinel', '哨兵 (Sentinel)', 'aegis', 'core', '核心科幻', '/badges/dark/sentinel.svg', '/badges/dark/sentinel.svg', '/badges/light/sentinel.svg', 280, true),
+('fortress', '要塞', 'Fortress', '要塞 (Fortress)', 'aegis', 'core', '核心科幻', '/badges/dark/fortress.svg', '/badges/dark/fortress.svg', '/badges/light/fortress.svg', 290, true),
+('guardian', '守护', 'Guardian', '守护 (Guardian)', 'aegis', 'core', '核心科幻', '/badges/dark/guardian.svg', '/badges/dark/guardian.svg', '/badges/light/guardian.svg', 300, true),
+('citadel', '城塞', 'Citadel', '城塞 (Citadel)', 'aegis', 'core', '核心科幻', '/badges/dark/citadel.svg', '/badges/dark/citadel.svg', '/badges/light/citadel.svg', 310, true),
+('paladin', '圣骑', 'Paladin', '圣骑 (Paladin)', 'aegis', 'core', '核心科幻', '/badges/dark/paladin.svg', '/badges/dark/paladin.svg', '/badges/light/paladin.svg', 320, true),
+('barrier', '壁垒', 'Barrier', '壁垒 (Barrier)', 'aegis', 'core', '核心科幻', '/badges/dark/barrier.svg', '/badges/dark/barrier.svg', '/badges/light/barrier.svg', 330, true),
+('ward', '结界', 'Ward', '结界 (Ward)', 'aegis', 'core', '核心科幻', '/badges/dark/ward.svg', '/badges/dark/ward.svg', '/badges/light/ward.svg', 340, true),
+('defender', '卫士', 'Defender', '卫士 (Defender)', 'aegis', 'core', '核心科幻', '/badges/dark/defender.svg', '/badges/dark/defender.svg', '/badges/light/defender.svg', 350, true),
+('fusion', '聚变', 'Fusion', '聚变 (Fusion)', 'reactor', 'core', '核心科幻', '/badges/dark/fusion.svg', '/badges/dark/fusion.svg', '/badges/light/fusion.svg', 360, true),
+('plasma', '等离子', 'Plasma', '等离子 (Plasma)', 'reactor', 'core', '核心科幻', '/badges/dark/plasma.svg', '/badges/dark/plasma.svg', '/badges/light/plasma.svg', 370, true),
+('pulse', '脉冲', 'Pulse', '脉冲 (Pulse)', 'reactor', 'core', '核心科幻', '/badges/dark/pulse.svg', '/badges/dark/pulse.svg', '/badges/light/pulse.svg', 380, true),
+('ignition', '点火', 'Ignition', '点火 (Ignition)', 'reactor', 'core', '核心科幻', '/badges/dark/ignition.svg', '/badges/dark/ignition.svg', '/badges/light/ignition.svg', 390, true),
+('core', '内核', 'Core', '内核 (Core)', 'reactor', 'core', '核心科幻', '/badges/dark/core.svg', '/badges/dark/core.svg', '/badges/light/core.svg', 400, true),
+('fission', '裂变', 'Fission', '裂变 (Fission)', 'reactor', 'core', '核心科幻', '/badges/dark/fission.svg', '/badges/dark/fission.svg', '/badges/light/fission.svg', 410, true),
+('overload', '过载', 'Overload', '过载 (Overload)', 'reactor', 'core', '核心科幻', '/badges/dark/overload.svg', '/badges/dark/overload.svg', '/badges/light/overload.svg', 420, true),
+('dynamo', '动力', 'Dynamo', '动力 (Dynamo)', 'reactor', 'core', '核心科幻', '/badges/dark/dynamo.svg', '/badges/dark/dynamo.svg', '/badges/light/dynamo.svg', 430, true),
+('radiance', '辐射', 'Radiance', '辐射 (Radiance)', 'reactor', 'core', '核心科幻', '/badges/dark/radiance.svg', '/badges/dark/radiance.svg', '/badges/light/radiance.svg', 440, true),
+('vortex', '涡流', 'Vortex', '涡流 (Vortex)', 'reactor', 'core', '核心科幻', '/badges/dark/vortex.svg', '/badges/dark/vortex.svg', '/badges/light/vortex.svg', 450, true),
+('sniper', '狙击', 'Sniper', '狙击 (Sniper)', 'tactical', 'core', '核心科幻', '/badges/dark/sniper.svg', '/badges/dark/sniper.svg', '/badges/light/sniper.svg', 460, true),
+('lockon', '锁定', 'Lock-On', '锁定 (Lock-On)', 'tactical', 'core', '核心科幻', '/badges/dark/lockon.svg', '/badges/dark/lockon.svg', '/badges/light/lockon.svg', 470, true),
+('radar', '雷达', 'Radar', '雷达 (Radar)', 'tactical', 'core', '核心科幻', '/badges/dark/radar.svg', '/badges/dark/radar.svg', '/badges/light/radar.svg', 480, true),
+('strike', '打击', 'Strike', '打击 (Strike)', 'tactical', 'core', '核心科幻', '/badges/dark/strike.svg', '/badges/dark/strike.svg', '/badges/light/strike.svg', 490, true),
+('recon', '侦察', 'Recon', '侦察 (Recon)', 'tactical', 'core', '核心科幻', '/badges/dark/recon.svg', '/badges/dark/recon.svg', '/badges/light/recon.svg', 500, true),
+('crosshair', '准星', 'Crosshair', '准星 (Crosshair)', 'tactical', 'core', '核心科幻', '/badges/dark/crosshair.svg', '/badges/dark/crosshair.svg', '/badges/light/crosshair.svg', 510, true),
+('tracer', '追踪', 'Tracer', '追踪 (Tracer)', 'tactical', 'core', '核心科幻', '/badges/dark/tracer.svg', '/badges/dark/tracer.svg', '/badges/light/tracer.svg', 520, true),
+('overwatch', '天眼', 'Overwatch', '天眼 (Overwatch)', 'tactical', 'core', '核心科幻', '/badges/dark/overwatch.svg', '/badges/dark/overwatch.svg', '/badges/light/overwatch.svg', 530, true),
+('intercept', '拦截', 'Intercept', '拦截 (Intercept)', 'tactical', 'core', '核心科幻', '/badges/dark/intercept.svg', '/badges/dark/intercept.svg', '/badges/light/intercept.svg', 540, true),
+('barrage', '弹幕', 'Barrage', '弹幕 (Barrage)', 'tactical', 'core', '核心科幻', '/badges/dark/barrage.svg', '/badges/dark/barrage.svg', '/badges/light/barrage.svg', 550, true),
+('oracle', '神谕', 'Oracle', '神谕 (Oracle)', 'arcane', 'core', '核心科幻', '/badges/dark/oracle.svg', '/badges/dark/oracle.svg', '/badges/light/oracle.svg', 560, true),
+('mystic', '秘法', 'Mystic', '秘法 (Mystic)', 'arcane', 'core', '核心科幻', '/badges/dark/mystic.svg', '/badges/dark/mystic.svg', '/badges/light/mystic.svg', 570, true),
+('rune', '符文', 'Rune', '符文 (Rune)', 'arcane', 'core', '核心科幻', '/badges/dark/rune.svg', '/badges/dark/rune.svg', '/badges/light/rune.svg', 580, true),
+('glyph', '印记', 'Glyph', '印记 (Glyph)', 'arcane', 'core', '核心科幻', '/badges/dark/glyph.svg', '/badges/dark/glyph.svg', '/badges/light/glyph.svg', 590, true),
+('aether', '以太', 'Aether', '以太 (Aether)', 'arcane', 'core', '核心科幻', '/badges/dark/aether.svg', '/badges/dark/aether.svg', '/badges/light/aether.svg', 600, true),
+('sigil', '刻印', 'Sigil', '刻印 (Sigil)', 'arcane', 'core', '核心科幻', '/badges/dark/sigil.svg', '/badges/dark/sigil.svg', '/badges/light/sigil.svg', 610, true),
+('astral', '星灵', 'Astral', '星灵 (Astral)', 'arcane', 'core', '核心科幻', '/badges/dark/astral.svg', '/badges/dark/astral.svg', '/badges/light/astral.svg', 620, true),
+('abyss', '深渊', 'Abyss', '深渊 (Abyss)', 'arcane', 'core', '核心科幻', '/badges/dark/abyss.svg', '/badges/dark/abyss.svg', '/badges/light/abyss.svg', 630, true),
+('paradox', '悖论', 'Paradox', '悖论 (Paradox)', 'arcane', 'core', '核心科幻', '/badges/dark/paradox.svg', '/badges/dark/paradox.svg', '/badges/light/paradox.svg', 640, true),
+('enigma', '谜团', 'Enigma', '谜团 (Enigma)', 'arcane', 'core', '核心科幻', '/badges/dark/enigma.svg', '/badges/dark/enigma.svg', '/badges/light/enigma.svg', 650, true),
+('rat', '子鼠', 'Water', '子鼠 (Water)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/rat.svg', '/badges/dark/rat.svg', '/badges/light/rat.svg', 660, true),
+('pig', '亥猪', 'Water', '亥猪 (Water)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/pig.svg', '/badges/dark/pig.svg', '/badges/light/pig.svg', 670, true),
+('tiger', '寅虎', 'Wood', '寅虎 (Wood)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/tiger.svg', '/badges/dark/tiger.svg', '/badges/light/tiger.svg', 680, true),
+('rabbit', '卯兔', 'Wood', '卯兔 (Wood)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/rabbit.svg', '/badges/dark/rabbit.svg', '/badges/light/rabbit.svg', 690, true),
+('snake', '巳蛇', 'Fire', '巳蛇 (Fire)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/snake.svg', '/badges/dark/snake.svg', '/badges/light/snake.svg', 700, true),
+('horse', '午马', 'Fire', '午马 (Fire)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/horse.svg', '/badges/dark/horse.svg', '/badges/light/horse.svg', 710, true),
+('monkey', '申猴', 'Metal', '申猴 (Metal)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/monkey.svg', '/badges/dark/monkey.svg', '/badges/light/monkey.svg', 720, true),
+('rooster', '酉鸡', 'Metal', '酉鸡 (Metal)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/rooster.svg', '/badges/dark/rooster.svg', '/badges/light/rooster.svg', 730, true),
+('ox', '丑牛', 'Earth', '丑牛 (Earth)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/ox.svg', '/badges/dark/ox.svg', '/badges/light/ox.svg', 740, true),
+('dragon', '辰龙', 'Earth', '辰龙 (Earth)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/dragon.svg', '/badges/dark/dragon.svg', '/badges/light/dragon.svg', 750, true),
+('goat', '未羊', 'Earth', '未羊 (Earth)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/goat.svg', '/badges/dark/goat.svg', '/badges/light/goat.svg', 760, true),
+('dog', '戌狗', 'Earth', '戌狗 (Earth)', 'zodiac', 'astro-zodiac', '星相生肖', '/badges/dark/dog.svg', '/badges/dark/dog.svg', '/badges/light/dog.svg', 770, true),
+('aries', '白羊', 'Fire', '白羊 (Fire)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/aries.svg', '/badges/dark/aries.svg', '/badges/light/aries.svg', 780, true),
+('leo', '狮子', 'Fire', '狮子 (Fire)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/leo.svg', '/badges/dark/leo.svg', '/badges/light/leo.svg', 790, true),
+('sagittarius', '射手', 'Fire', '射手 (Fire)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/sagittarius.svg', '/badges/dark/sagittarius.svg', '/badges/light/sagittarius.svg', 800, true),
+('taurus', '金牛', 'Earth', '金牛 (Earth)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/taurus.svg', '/badges/dark/taurus.svg', '/badges/light/taurus.svg', 810, true),
+('virgo', '处女', 'Earth', '处女 (Earth)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/virgo.svg', '/badges/dark/virgo.svg', '/badges/light/virgo.svg', 820, true),
+('capricorn', '摩羯', 'Earth', '摩羯 (Earth)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/capricorn.svg', '/badges/dark/capricorn.svg', '/badges/light/capricorn.svg', 830, true),
+('gemini', '双子', 'Air', '双子 (Air)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/gemini.svg', '/badges/dark/gemini.svg', '/badges/light/gemini.svg', 840, true),
+('libra', '天秤', 'Air', '天秤 (Air)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/libra.svg', '/badges/dark/libra.svg', '/badges/light/libra.svg', 850, true),
+('aquarius', '水瓶', 'Air', '水瓶 (Air)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/aquarius.svg', '/badges/dark/aquarius.svg', '/badges/light/aquarius.svg', 860, true),
+('cancer', '巨蟹', 'Water', '巨蟹 (Water)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/cancer.svg', '/badges/dark/cancer.svg', '/badges/light/cancer.svg', 870, true),
+('scorpio', '天蝎', 'Water', '天蝎 (Water)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/scorpio.svg', '/badges/dark/scorpio.svg', '/badges/light/scorpio.svg', 880, true),
+('pisces', '双鱼', 'Water', '双鱼 (Water)', 'astral', 'astro-zodiac', '星相生肖', '/badges/dark/pisces.svg', '/badges/dark/pisces.svg', '/badges/light/pisces.svg', 890, true)
+ON CONFLICT ("id") DO NOTHING;
+
+INSERT INTO "system_configs" ("key", "value", "type", "label", "description", "created_at", "updated_at") VALUES
+('badge_catalog_seeded', 'true', 'boolean', '徽章目录已初始化', '用于避免启动时重复导入默认徽章目录', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP)
+ON CONFLICT ("key") DO UPDATE SET
+  "value" = EXCLUDED."value",
+  "type" = EXCLUDED."type",
+  "label" = EXCLUDED."label",
+  "description" = EXCLUDED."description",
+  "updated_at" = CURRENT_TIMESTAMP;
diff --git a/server/prisma/migrations/migration_lock.toml b/server/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..044d57c
--- /dev/null
+++ b/server/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"
diff --git a/server/prisma/schema.prisma b/server/prisma/schema.prisma
new file mode 100644
index 0000000..236540f
--- /dev/null
+++ b/server/prisma/schema.prisma
@@ -0,0 +1,2978 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider      = "prisma-client-js"
+  binaryTargets = ["native", "linux-musl-openssl-3.0.x", "debian-openssl-3.0.x", "linux-musl-arm64-openssl-3.0.x", "linux-arm64-openssl-3.0.x"]
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+// ==================== 枚举类型 ====================
+
+enum UserRole {
+  admin
+  user
+}
+
+enum UserStatus {
+  active
+  banned
+}
+
+enum HostStatus {
+  online
+  offline
+  maintenance
+}
+
+enum HostAddressKind {
+  domain
+  ipv4
+  ipv6
+}
+
+enum HostAddressSource {
+  input
+  resolved
+}
+
+enum HostAddressCheckTrigger {
+  create
+  update
+  backfill
+  poll
+}
+
+enum HostAddressCheckStatus {
+  success
+  failed
+}
+
+enum HostAddressConflictStatus {
+  active
+  resolved
+}
+
+enum InstanceType {
+  container
+  vm
+  both
+}
+
+enum NetworkMode {
+  nat          // 纯 IPv4 NAT
+  nat_ipv6     // IPv4 NAT + IPv6 独立（Routed）
+  nat_ipv6_nat // IPv4 NAT + IPv6 NAT（共享宿主机 IPv6）
+  ipv6_only    // 纯 IPv6 独立（Routed），无 NAT 端口映射
+  ipv6_nat     // 纯 IPv6 NAT（共享宿主机 IPv6），无 NAT 端口映射
+}
+
+// 存储池用途枚举
+enum StoragePurpose {
+  instance_data // 用于实例数据盘（创建实例时默认存储）
+  instance_storage // 用于实例存储盘（可手动挂载）
+}
+
+// 反代站点状态枚举
+enum ProxySiteStatus {
+  pending // 等待 DNS 解析
+  active // 已生效
+  error // 配置失败
+}
+
+enum InstanceStatus {
+  creating
+  running
+  stopped
+  suspended // 封停状态（到期或手动封停）
+  error
+  deleted
+}
+
+enum Protocol {
+  tcp
+  udp
+}
+
+enum BackupStatus {
+  creating
+  ready
+  error
+  deleted
+}
+
+enum RestoreTaskStatus {
+  PENDING
+  PROCESSING
+  COMPLETED
+  FAILED
+}
+
+// 存储类型枚举
+enum StorageType {
+  S3 // 预留
+  WEBDAV
+  FTP
+  SFTP
+}
+
+// 备份上传任务状态
+enum BackupUploadTaskStatus {
+  PENDING
+  PROCESSING
+  COMPLETED
+  FAILED
+}
+
+// 实例操作任务类型
+enum InstanceTaskType {
+  start
+  stop
+  restart
+  rebuild
+  clone
+  recreate  // 重建：创建新实例替换旧实例
+  change_host // 改节点：在其他节点重建实例并保留数据库实例 ID
+}
+
+// 实例操作任务状态
+enum InstanceTaskStatus {
+  PENDING
+  PROCESSING
+  COMPLETED
+  FAILED
+}
+
+enum HostNotificationEmailTaskStatus {
+  PENDING
+  PROCESSING
+  SENT
+  FAILED
+}
+
+// ==================== 恢复任务模型 ====================
+
+model RestoreTask {
+  id                   Int               @id @default(autoincrement())
+  instanceId           Int               @map("instance_id")
+  backupId             Int?              @map("backup_id")
+  hostId               Int               @map("host_id")
+  userId               Int               @map("user_id")
+  status               RestoreTaskStatus @default(PENDING)
+  progress             String? // 当前执行步骤: stopping, restoring, cleaning, replacing, starting
+  retryCount           Int               @default(0) @map("retry_count") // 重试次数
+  tempInstanceName     String?           @map("temp_instance_name")
+  originalInstanceName String            @map("original_instance_name")
+  originalIncusId      String            @map("original_incus_id")
+  error                String?
+  createdAt            DateTime          @default(now()) @map("created_at")
+  startedAt            DateTime?         @map("started_at")
+  finishedAt           DateTime?         @map("finished_at")
+
+  @@index([hostId, status])
+  @@index([instanceId])
+  @@map("restore_tasks")
+}
+
+// ==================== 实例操作任务模型 ====================
+
+model InstanceTask {
+  id         Int                @id @default(autoincrement())
+  instanceId Int                @map("instance_id")
+  hostId     Int                @map("host_id")
+  userId     Int                @map("user_id")
+  taskType   InstanceTaskType   @map("task_type")
+  status     InstanceTaskStatus @default(PENDING)
+  progress   String? // 当前执行步骤
+  retryCount Int                @default(0) @map("retry_count")
+
+  // 重装/克隆操作特有字段
+  imageAlias           String? @map("image_alias") // 重装使用的镜像别名
+  sshKeyId             Int?    @map("ssh_key_id") // 重装使用的 SSH 密钥 ID
+  customInitCommandIds String? @map("custom_init_command_ids") // 重装使用的自定义初始化命令ID列表 (JSON数组)
+  targetName           String? @map("target_name") // 克隆的目标名称
+  targetHostId         Int?    @map("target_host_id") // 克隆的目标宿主机
+  snapshotName         String? @map("snapshot_name") // 克隆时的快照名称
+  newInstanceId        Int?    @map("new_instance_id") // 克隆后的新实例 ID
+
+  error      String?
+  createdAt  DateTime  @default(now()) @map("created_at")
+  startedAt  DateTime? @map("started_at")
+  finishedAt DateTime? @map("finished_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@index([hostId, status])
+  @@index([instanceId])
+  @@index([userId])
+  @@map("instance_tasks")
+}
+
+enum NotificationChannelType {
+  telegram
+  discord
+  email
+  webhook
+}
+
+enum NotificationLogStatus {
+  pending
+  sent
+  failed
+}
+
+enum OAuthProvider {
+  github
+  google
+}
+
+// ==================== 计费相关枚举 ====================
+
+// 余额变动类型
+enum BalanceLogType {
+  recharge          // 充值
+  consume           // 消费（开通/续费实例）
+  refund            // 退款
+  admin_adjust      // 管理员调整
+  gift              // 赠送
+  transfer_fee      // 转移手续费
+  transfer_refund   // 转移手续费退还
+  hosting_withdraw  // 托管余额提现
+  hosting_deduction // 托管实例销毁扣款（从面板余额补扣）
+  invite_generate   // 生成邀请码扣款
+}
+
+enum VipBenefitRewardType {
+  balance
+  points
+  instance
+}
+
+enum VipBenefitClaimStatus {
+  delivered
+  pending
+}
+
+// 支付渠道类型
+enum PaymentProviderType {
+  yipay         // 易支付
+  heleket       // Heleket 加密支付
+  stripe        // Stripe
+  alipay_direct // 支付宝直连（预留）
+  wechat_direct // 微信直连（预留）
+  manual        // 人工充值
+}
+
+// 支付渠道状态
+enum PaymentProviderStatus {
+  active        // 启用
+  disabled      // 禁用
+  testing       // 测试模式
+}
+
+// 充值记录状态
+enum RechargeStatus {
+  pending       // 待支付
+  paid          // 已支付，处理中
+  completed     // 已完成（余额已到账）
+  failed        // 失败
+  cancelled     // 已取消
+  refunded      // 已退款
+}
+
+enum VipLevelRuleType {
+  user
+  hosting
+}
+
+enum VipLevelConditionMode {
+  any
+  all
+}
+
+// 实例计费记录类型
+enum BillingRecordType {
+  newPurchase   // 新开
+  renew         // 续费
+  upgrade       // 升级
+  downgrade     // 降级
+  refund        // 退款（仅管理员操作）
+  transfer_fee  // 转移手续费
+}
+
+// AFF余额变动类型
+enum AffLogType {
+  new_purchase  // 新购返利
+  renew         // 续费返利
+  convert       // 转化为主余额
+}
+
+// AFF转化申请状态
+enum AffWithdrawalStatus {
+  pending   // 待审核
+  approved  // 已通过
+  rejected  // 已拒绝
+}
+
+// 流量状态枚举
+enum TrafficStatus {
+  NORMAL // 正常
+  WARNING // 已发送 80% 预警
+  LIMITED // 已限速
+}
+
+// 好友关系状态枚举
+enum FriendshipStatus {
+  pending // 待确认
+  accepted // 已接受
+  rejected // 已拒绝
+  removed // 已删除（双方都已不是好友，但保留历史记录）
+}
+
+// ==================== 用户相关模型 ====================
+
+model User {
+  id           Int        @id @default(autoincrement())
+  username     String     @unique
+  email        String?
+  passwordHash String     @map("password_hash")
+  role         UserRole   @default(user)
+  status       UserStatus @default(active)
+  banReason    String?    @map("ban_reason") // 封禁原因（管理员可选填写）
+  balance      Decimal    @default(0) @db.Decimal(10, 2)
+  avatarStyle  String     @default("bigSmile") @map("avatar_style") // bigSmile, croodles, notionists, lorelei
+  avatarBadgeId String?   @map("avatar_badge_id")
+  hasCreatedHostBefore Boolean @default(false) @map("has_created_host_before")
+
+  // 2FA 双因素认证
+  twoFactorEnabled       Boolean @default(false) @map("two_factor_enabled")
+  twoFactorSecret        String? @map("two_factor_secret")
+  twoFactorRecoveryCodes String? @map("two_factor_recovery_codes") // JSON array of encrypted codes
+
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  // 关系
+  quota                UserQuota?
+  inviteCodes          InviteCode[]          @relation("CreatedInviteCodes")
+  usedInviteCodes      InviteCode[]          @relation("UsedInviteCodes")
+  sshKeys              SshKey[]
+  instances            Instance[]
+  notificationChannels NotificationChannel[]
+  storageConfigs       StorageConfig[]
+  oauthBindings        UserOAuthBinding[]
+  telegramBinding      UserTelegramBinding?
+  telegramBindTokens   TelegramBindToken[]
+  helpArticles         HelpArticle[]         @relation("CreatedArticles")
+  logs                 Log[]
+  transfersSent        InstanceTransfer[]    @relation("TransferFrom")
+  transfersReceived    InstanceTransfer[]    @relation("TransferTo")
+  refreshTokens        RefreshToken[]
+  tokenInvalidations   TokenInvalidation[]
+
+  // 用户资源关系
+  hosts    Host[]
+  packages Package[]
+
+  // 好友关系
+  friendshipsSent     Friendship[] @relation("FriendshipSent")
+  friendshipsReceived Friendship[] @relation("FriendshipReceived")
+
+  // 套餐共享关系
+  packageSharesOwned    PackageShare[] @relation("PackageShareOwner")
+  packageSharesReceived PackageShare[] @relation("PackageShareReceiver")
+
+  // 敏感操作验证
+  operationVerifications OperationVerification[]
+
+  // 站内信
+  inboxMessages InboxMessage[]
+  hostNotificationEmailTasks HostNotificationEmailTask[]
+
+  // 登录记录
+  loginRecords LoginRecord[]
+
+  // 公告发送记录
+  announcements Announcement[] @relation("AnnouncementSender")
+
+  // 工单系统
+  ticketsCreated   Ticket[]        @relation("TicketCreator")
+  ticketMessages   TicketMessage[] @relation("TicketMessageSender")
+  ticketAttachments TicketMessageAttachment[] @relation("TicketAttachmentUploader")
+
+  // 签到系统
+  checkinRecords   CheckinRecord[] @relation("CheckinRecords")
+  redeemRecords    CheckinRecord[] @relation("RedeemRecords")
+  checkinStats     CheckinStats?
+
+  // 系统兑换码
+  redeemCodesCreated RedeemCode[]      @relation("RedeemCodesCreated")
+  redeemCodeUsages   RedeemCodeUsage[] @relation("RedeemCodeUsages")
+
+  // 用户自定义初始化命令
+  customInitCommands CustomInitCommand[]
+
+  // 用户终端快捷命令
+  terminalSavedCommands TerminalSavedCommand[]
+
+  // 计费相关
+  balanceLogs     BalanceLog[]
+  rechargeRecords RechargeRecord[]
+  badgeOwnerships UserBadgeOwnership[]
+  vipBenefitClaims VipBenefitClaim[]
+
+  // AFF推荐计划
+  affBalance       Decimal         @default(0) @map("aff_balance") @db.Decimal(10, 2)  // AFF余额
+  affActivatedAt   DateTime?       @map("aff_activated_at")                            // AFF激活时间
+  affCodes         AffCode[]
+  affLogs          AffLog[]
+  affWithdrawals   AffWithdrawal[]
+
+  // 托管余额系统
+  hostingBalance      Decimal              @default(0) @map("hosting_balance") @db.Decimal(10, 2) // 可用托管余额
+  hostingBalanceLogs  HostingBalanceLog[]
+  hostingWithdrawals  HostingWithdrawal[]
+  hostingBlocksCreated  HostingUserBlock[] @relation("HostingBlocker")
+  hostingBlocksReceived HostingUserBlock[] @relation("HostingBlockedUser")
+  hostingZone         HostingZone?         @relation("HostingZoneOwner")
+
+  // 域名邮箱系统
+  mailSubscriptions   MailSubscription[]
+
+  // 抽奖系统
+  userPoints       UserPoints?
+  pointsLogs       PointsLog[]
+  lotteryRecords   LotteryRecord[]
+
+  // 资源池系统
+  resourcePool     UserResourcePool?
+  resourcePoolLogs ResourcePoolLog[]
+
+  // 销毁记录
+  destroyRecords   UserDestroyRecord[]
+  instanceAuditRules InstanceAuditRule[] @relation("InstanceAuditRuleCreator")
+  instanceAuditBuiltinRuleOverrides InstanceAuditBuiltinRuleOverride[] @relation("InstanceAuditBuiltinRuleOverrideCreator")
+  instanceAuditIgnores InstanceAuditIgnore[] @relation("InstanceAuditIgnoreCreator")
+  instanceAuditScans InstanceAuditScan[] @relation("InstanceAuditScanUser")
+  instanceAuditActions InstanceAuditAction[] @relation("InstanceAuditActionUser")
+
+  @@map("users")
+}
+
+model UserQuota {
+  id     Int @id @default(autoincrement())
+  userId Int @unique @map("user_id")
+
+  // 新配额系统：控制用户可拥有的资源数量
+  // 默认值为 0，表示功能未开放，需要管理员授权才能使用
+  // 注意：不再限制实例配额，用户可以创建无限数量的实例
+  hostLimit    Int @default(0) @map("host_limit") // 宿主机数量上限（0 = 未授权）
+  hostUsed     Int @default(0) @map("host_used") // 已使用宿主机数量
+  friendLimit  Int @default(0) @map("friend_limit") // 好友数量上限（0 = 未授权）
+  friendUsed   Int @default(0) @map("friend_used") // 已使用好友数量
+  packageLimit Int @default(0) @map("package_limit") // 套餐数量上限（0 = 未授权）
+  packageUsed  Int @default(0) @map("package_used") // 已使用套餐数量
+
+  // 流量控制 (单位: Bytes)
+  monthlyTrafficLimit  BigInt?       @map("monthly_traffic_limit") // null = 无限制
+  monthlyTrafficUsed   BigInt        @default(0) @map("monthly_traffic_used")
+  trafficStatus        TrafficStatus @default(NORMAL) @map("traffic_status")
+  trafficWarningSentAt DateTime?     @map("traffic_warning_sent_at")
+
+  // 流量包扩展 (预留)
+  extraTrafficQuota BigInt @default(0) @map("extra_traffic_quota")
+  extraTrafficUsed  BigInt @default(0) @map("extra_traffic_used")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("user_quotas")
+}
+
+model InviteCode {
+  id           Int       @id @default(autoincrement())
+  code         String    @unique
+  createdBy    Int       @map("created_by")
+  usedBy       Int?      @map("used_by")
+  usedAt       DateTime? @map("used_at")
+  expiresAt    DateTime? @map("expires_at")
+  costSnapshot Json?     @map("cost_snapshot")
+  createdAt    DateTime  @default(now()) @map("created_at")
+
+  creator User  @relation("CreatedInviteCodes", fields: [createdBy], references: [id])
+  user    User? @relation("UsedInviteCodes", fields: [usedBy], references: [id])
+
+  @@index([code])
+  @@map("invite_codes")
+}
+
+model SshKey {
+  id          Int      @id @default(autoincrement())
+  userId      Int      @map("user_id")
+  name        String
+  publicKey   String   @map("public_key")
+  fingerprint String
+  createdAt   DateTime @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@map("ssh_keys")
+}
+
+// ==================== 会话管理模型 ====================
+
+model RefreshToken {
+  id           Int      @id @default(autoincrement())
+  token        String   @unique // Refresh Token 完整值
+  userId       Int      @map("user_id")
+  username     String
+  role         UserRole
+  ip           String? // 登录 IP
+  userAgent    String?  @map("user_agent") // 用户代理
+  createdAt    DateTime @default(now()) @map("created_at")
+  expiresAt    DateTime @map("expires_at") // 过期时间
+  lastActiveAt DateTime @default(now()) @updatedAt @map("last_active_at") // 最后活跃时间
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@index([token])
+  @@index([expiresAt]) // 用于清理过期 token
+  @@map("refresh_tokens")
+}
+
+// ==================== Token 失效标记模型 ====================
+
+model TokenInvalidation {
+  id            Int      @id @default(autoincrement())
+  userId        Int      @map("user_id")
+  sessionId     String?  @map("session_id") // 会话ID（Refresh Token 前缀），null 表示用户级别的失效
+  invalidatedAt Int      @map("invalidated_at") // 失效时间戳（秒级，与 JWT iat 一致）
+  createdAt     DateTime @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, sessionId]) // 每个用户每个会话只能有一条失效记录（sessionId 为 null 时表示用户级别）
+  @@index([userId])
+  @@index([sessionId])
+  @@index([invalidatedAt]) // 用于清理过期记录
+  @@map("token_invalidations")
+}
+
+// ==================== 好友关系模型 ====================
+
+model Friendship {
+  id         Int              @id @default(autoincrement())
+  userId     Int              @map("user_id") // 发起者
+  friendId   Int              @map("friend_id") // 接收者
+  status     FriendshipStatus @default(pending)
+  remark     String? // 申请备注
+  createdAt  DateTime         @default(now()) @map("created_at")
+  acceptedAt DateTime?        @map("accepted_at")
+  rejectedAt DateTime?        @map("rejected_at")
+
+  user   User @relation("FriendshipSent", fields: [userId], references: [id], onDelete: Cascade)
+  friend User @relation("FriendshipReceived", fields: [friendId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, friendId])
+  @@index([friendId, status])
+  @@index([userId, status])
+  @@map("friendships")
+}
+
+// ==================== 节点相关模型 ====================
+
+model Host {
+  id                  Int          @id @default(autoincrement())
+  userId              Int          @map("user_id") // 所有者
+  name                String
+  url                 String
+  location            String?
+  countryCode         String       @default("us") @map("country_code")
+  architecture        String       @default("x86_64")
+  status              HostStatus   @default(offline)
+  certPath            String?      @map("cert_path")
+  keyPath             String?      @map("key_path")
+  natPublicIp         String?      @map("nat_public_ip")
+  natPublicIpv6       String?      @map("nat_public_ipv6") // 宿主机公网 IPv6（用于 nat_ipv6_nat / ipv6_nat 模式）
+  natBindIp           String?      @map("nat_bind_ip") // 端口映射实际监听的 IPv4 地址
+  natBindIpv6         String?      @map("nat_bind_ipv6") // 端口映射实际监听的 IPv6 地址
+  natPortStart        Int?         @map("nat_port_start")
+  natPortEnd          Int?         @map("nat_port_end")
+  cpuUsed             Int          @default(0) @map("cpu_used")
+  memoryUsed          Int          @default(0) @map("memory_used")
+  diskUsed            Int          @default(0) @map("disk_used")
+  tags                Json?        @default("[]")
+  natPortsUsedCount   Int          @default(0) @map("nat_ports_used_count")
+  cpuAllowanceMax     Int          @default(0) @map("cpu_allowance_max")
+  memoryMax           Int          @default(0) @map("memory_max")
+  instanceType        InstanceType @default(container) @map("instance_type")
+  // 初始化配置字段
+  ipAddress           String?      @map("ip_address")
+  // 存储配置
+  storageDriver       String       @default("zfs") @map("storage_driver") // zfs | lvm
+  storageType         String       @default("loop") @map("storage_type") // loop | disk
+  storagePath         String?      @map("storage_path") // 设备路径如 /dev/sdb，或 loop 模式下为空
+  storageSize         Int          @default(60) @map("storage_size") // loop 模式下的大小 (GB)
+  // 网络配置
+  ipv6Mode            Int          @default(1) @map("ipv6_mode") // 1=Routed, 2=NAT, 3=Disabled
+  ipv6Subnet          String?      @map("ipv6_subnet")
+  ipv6Gateway         String?      @map("ipv6_gateway")
+  ipv6ParentInterface String?      @map("ipv6_parent_interface") // 宿主机物理网卡名 (routed 模式)
+  // API 与内核配置
+  enableApi           Boolean      @default(true) @map("enable_api")
+  sysctlConfig        String?      @map("sysctl_config") // 自定义内核参数
+  // 安装流程
+  installToken        String?      @unique @map("install_token")
+  installTokenExpire  DateTime?    @map("install_token_expire")
+  isInstalled         Boolean      @default(false) @map("is_installed")
+  // 证书下载限制（每次安装操作独立计数）
+  certDownloadCount   Int          @default(0) @map("cert_download_count")
+  certDownloadExpire  DateTime?    @map("cert_download_expire")
+  createdAt           DateTime     @default(now()) @map("created_at")
+  updatedAt           DateTime     @updatedAt @map("updated_at")
+
+  // Caddy 反代配置
+  caddyEnabled  Boolean @default(false) @map("caddy_enabled") // 是否已安装 Caddy
+  caddyUsername String? @map("caddy_username") // Basic Auth 用户名
+  caddyPassword String? @map("caddy_password") // Basic Auth 密码
+  caddyPort     Int     @default(8444) @map("caddy_port") // Caddy API 端口
+
+  // 转移控制
+  transferEnabled Boolean @default(true) @map("transfer_enabled") // 是否允许该宿主机下的实例进行转移
+
+  // 流量配置
+  trafficResetDay Int @default(1) @map("traffic_reset_day") // 流量重置日（1-28），默认每月1号
+
+  // 节点公告
+  announcement String? @map("announcement") // 节点公告内容，显示给该节点下的实例用户
+
+  // 节点通知设置（仅托管主外部通知）
+  notifyPurchase Boolean @default(true) @map("notify_purchase") // 是否通知新购
+  notifyRenew    Boolean @default(true) @map("notify_renew") // 是否通知续费
+  notifyDestroy  Boolean @default(false) @map("notify_destroy") // 是否通知销毁/退款
+
+  // 资源池玩法
+  enableResourcePool Boolean @default(true) @map("enable_resource_pool") // 是否参与资源池玩法（签到/抽奖资源应用）
+
+  // 探针地址
+  probeUrl String? @map("probe_url") // 节点探针监控地址
+
+  user         User          @relation(fields: [userId], references: [id], onDelete: Cascade)
+  instances    Instance[]
+  ipAddresses  IpAddress[]
+  allowedImages HostAllowedImage[]
+  portMappings PortMapping[]
+  packageHosts PackageHost[]
+  storagePools StoragePool[]
+  proxySites   ProxySite[]
+  announcements Announcement[] @relation("HostAnnouncements")
+  tickets       Ticket[]       @relation("HostTickets")
+  redeemCodes   RedeemCode[]
+  destroyRecords UserDestroyRecord[]
+  hostNotificationEmailTasks HostNotificationEmailTask[]
+  addressAliases         HostAddressAlias[]         @relation("HostAddressAliases")
+  addressResolutionLogs  HostAddressResolutionLog[] @relation("HostAddressResolutionLogs")
+  addressConflictsA      HostAddressConflict[]      @relation("HostAddressConflictA")
+  addressConflictsB      HostAddressConflict[]      @relation("HostAddressConflictB")
+  agent                  HostAgent?
+  instanceAuditRules     InstanceAuditRule[]
+  instanceAuditBuiltinRuleOverrides InstanceAuditBuiltinRuleOverride[]
+  instanceAuditIgnores   InstanceAuditIgnore[]
+  instanceAuditScans     InstanceAuditScan[]
+  instanceAuditActions   InstanceAuditAction[]
+
+  @@unique([userId, name]) // 同一用户下名称唯一
+  @@index([userId])
+  @@map("hosts")
+}
+
+model HostAgent {
+  id                    Int       @id @default(autoincrement())
+  hostId                Int       @unique @map("host_id")
+  agentId               String    @unique @map("agent_id")
+  secretHash            String    @map("secret_hash")
+  secretEncrypted       String    @map("secret_encrypted")
+  installTokenHash      String?   @unique @map("install_token_hash")
+  installTokenExpiresAt DateTime? @map("install_token_expires_at")
+  installTokenUsedAt    DateTime? @map("install_token_used_at")
+  enabled               Boolean   @default(true)
+  status                String    @default("offline")
+  version               String?
+  capabilities          Json?     @default("[]")
+  lastReport            Json?     @default("{}") @map("last_report")
+  lastSeenAt            DateTime? @map("last_seen_at")
+  lastHeartbeatIp       String?   @map("last_heartbeat_ip")
+  createdAt             DateTime  @default(now()) @map("created_at")
+  updatedAt             DateTime  @updatedAt @map("updated_at")
+
+  host   Host             @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  nonces HostAgentNonce[]
+
+  @@index([enabled])
+  @@index([status])
+  @@index([lastSeenAt])
+  @@index([installTokenExpiresAt])
+  @@map("host_agents")
+}
+
+model HostAgentNonce {
+  id        Int      @id @default(autoincrement())
+  agentId   String   @map("agent_id")
+  nonce     String
+  expiresAt DateTime @map("expires_at")
+  createdAt DateTime @default(now()) @map("created_at")
+
+  agent HostAgent @relation(fields: [agentId], references: [agentId], onDelete: Cascade)
+
+  @@unique([agentId, nonce])
+  @@index([agentId])
+  @@index([expiresAt])
+  @@map("host_agent_nonces")
+}
+
+model HostAddressAlias {
+  id        Int               @id @default(autoincrement())
+  hostId    Int               @map("host_id")
+  address   String
+  kind      HostAddressKind
+  source    HostAddressSource
+  createdAt DateTime          @default(now()) @map("created_at")
+  updatedAt DateTime          @updatedAt @map("updated_at")
+
+  host Host @relation("HostAddressAliases", fields: [hostId], references: [id], onDelete: Cascade)
+
+  @@unique([hostId, address])
+  @@index([hostId])
+  @@index([address])
+  @@index([source, kind])
+  @@map("host_address_aliases")
+}
+
+model HostAddressResolutionLog {
+  id                Int                    @id @default(autoincrement())
+  hostId            Int                    @map("host_id")
+  inputAddress      String                 @map("input_address")
+  inputKind         HostAddressKind        @map("input_kind")
+  trigger           HostAddressCheckTrigger
+  status            HostAddressCheckStatus
+  resolvedAddresses Json                   @default("[]") @map("resolved_addresses")
+  error             String?
+  details           Json?                  @default("{}")
+  createdAt         DateTime               @default(now()) @map("created_at")
+
+  host Host @relation("HostAddressResolutionLogs", fields: [hostId], references: [id], onDelete: Cascade)
+
+  @@index([hostId, createdAt(sort: Desc)])
+  @@index([status, createdAt(sort: Desc)])
+  @@map("host_address_resolution_logs")
+}
+
+model HostAddressConflict {
+  id              Int                       @id @default(autoincrement())
+  hostAId         Int                       @map("host_a_id")
+  hostBId         Int                       @map("host_b_id")
+  address         String
+  status          HostAddressConflictStatus @default(active)
+  firstDetectedAt DateTime                  @default(now()) @map("first_detected_at")
+  lastDetectedAt  DateTime                  @updatedAt @map("last_detected_at")
+  resolvedAt      DateTime?                 @map("resolved_at")
+
+  hostA Host @relation("HostAddressConflictA", fields: [hostAId], references: [id], onDelete: Cascade)
+  hostB Host @relation("HostAddressConflictB", fields: [hostBId], references: [id], onDelete: Cascade)
+
+  @@unique([hostAId, hostBId, address])
+  @@index([address])
+  @@index([status, lastDetectedAt(sort: Desc)])
+  @@map("host_address_conflicts")
+}
+
+// 存储池模型
+model StoragePool {
+  id          Int            @id @default(autoincrement())
+  hostId      Int            @map("host_id")
+  name        String // 存储池名称（与 Incus 一致）
+  driver      String // zfs | lvm | btrfs | dir
+  purpose     StoragePurpose @default(instance_data)
+  description String?
+  config      Json?          @default("{}") // 存储原始配置
+  createdAt   DateTime       @default(now()) @map("created_at")
+  updatedAt   DateTime       @updatedAt @map("updated_at")
+
+  host Host @relation(fields: [hostId], references: [id], onDelete: Cascade)
+
+  @@unique([hostId, name]) // 同一宿主机下存储池名称唯一
+  @@index([hostId])
+  @@map("storage_pools")
+}
+
+// ==================== 套餐相关模型 ====================
+
+// 套餐与宿主机的多对多关联表
+model PackageHost {
+  id        Int      @id @default(autoincrement())
+  packageId Int      @map("package_id")
+  hostId    Int      @map("host_id")
+  storagePoolName String? @map("storage_pool_name")
+  trafficMultiplier Decimal @default(1.0) @map("traffic_multiplier") @db.Decimal(8, 3)
+  createdAt DateTime @default(now()) @map("created_at")
+
+  package Package @relation(fields: [packageId], references: [id], onDelete: Cascade)
+  host    Host    @relation(fields: [hostId], references: [id], onDelete: Cascade)
+
+  @@unique([packageId, hostId]) // 防止重复绑定
+  @@index([packageId])
+  @@index([hostId])
+  @@map("package_hosts")
+}
+
+model Package {
+  id                  Int          @id @default(autoincrement())
+  userId              Int          @map("user_id") // 所有者
+  name                String
+  description         String?
+  cpuMax              Int          @map("cpu_max")
+  memoryMax           Int          @map("memory_max")
+  diskMax             Int          @map("disk_max")
+  bandwidthMax        Int?         @map("bandwidth_max")
+  networkMode         NetworkMode  @default(nat) @map("network_mode")
+  instanceType        InstanceType @default(container) @map("instance_type") // 实例类型: 容器/虚拟机
+  nodeSelectors       Json?        @default("[]") @map("node_selectors")
+  privileged          Boolean      @default(false)
+  nested              Boolean      @default(false)
+  active              Boolean      @default(true)
+  // 套餐资源限制
+  portLimit           Int          @default(20) @map("port_limit") // 端口映射数上限
+  snapshotLimit       Int          @default(5) @map("snapshot_limit") // 快照数上限
+  backupLimit         Int          @default(3) @map("backup_limit") // 备份数上限
+  siteLimit           Int          @default(10) @map("site_limit") // 反代站点数上限
+  monthlyTrafficLimit BigInt?      @map("monthly_traffic_limit") // 月流量限额 (Bytes)，null = 无限制
+
+  // 存储 I/O 限制
+  ioLimitMode     String @default("throughput") @map("io_limit_mode") // "throughput" | "iops" - IO限制模式
+  limitsRead      String @default("100MB") @map("limits_read") // 磁盘读取吞吐限制
+  limitsWrite     String @default("100MB") @map("limits_write") // 磁盘写入吞吐限制
+  limitsReadIops  Int    @default(500) @map("limits_read_iops") // 磁盘读取 IOPS
+  limitsWriteIops Int    @default(500) @map("limits_write_iops") // 磁盘写入 IOPS
+
+
+  // 网络限制
+  limitsIngress String @default("300Mbit") @map("limits_ingress") // 网络入站带宽
+  limitsEgress  String @default("300Mbit") @map("limits_egress") // 网络出站带宽
+
+  // 进程与调度
+  limitsProcesses   Int @default(500) @map("limits_processes") // 进程数限制
+  limitsCpuPriority Int @default(10) @map("limits_cpu_priority") // CPU 调度优先级 (0-10)
+
+  // 启动配置
+  bootAutostart           Boolean @default(true) @map("boot_autostart") // 开机自启
+  bootAutostartPriority   Int     @default(20) @map("boot_autostart_priority") // 启动优先级 (0-100)
+  bootAutostartDelay      Int     @default(15) @map("boot_autostart_delay") // 启动延迟 (5-600秒)
+  bootHostShutdownTimeout Int     @default(30) @map("boot_host_shutdown_timeout") // 关机超时 (30-600秒)
+
+  // 全局共享配置（当 globalShared = true 时，所有用户都可以使用此套餐）
+  globalShared          Boolean  @default(false) @map("global_shared") // 是否全局共享
+  globalQuotaMultiplier Decimal? @map("global_quota_multiplier") @db.Decimal(3, 1) // 全局共享的配额倍数限制，如 0.5, 1.0, 1.5, 2.0，null 表示无限制（1x）
+  globalMaxInstances    Int?     @map("global_max_instances") // 全局共享的最大实例数，null 表示无限制
+
+  // 开通门槛：创建本套餐实例前，用户必须已持有指定前置套餐的正常实例
+  requiredPackageId Int? @map("required_package_id")
+
+  // 实例操作权限
+  allowInstanceDeletion Boolean @default(true) @map("allow_instance_deletion") // 是否允许用户删除实例
+
+  // 资源释放通知渠道（可选）
+  releaseChannelId Int? @map("release_channel_id")
+
+  createdAt DateTime @default(now()) @map("created_at")
+
+  user           User                 @relation(fields: [userId], references: [id], onDelete: Cascade)
+  instances      Instance[]
+  shares         PackageShare[]
+  packageHosts   PackageHost[]
+  plans          PackagePlan[]        // 套餐下的付费方案
+  requiredPackage  Package?  @relation("PackagePrerequisite", fields: [requiredPackageId], references: [id], onDelete: NoAction)
+  dependentPackages Package[] @relation("PackagePrerequisite")
+  releaseChannel NotificationChannel? @relation("PackageReleaseChannel", fields: [releaseChannelId], references: [id], onDelete: SetNull)
+
+  @@unique([userId, name]) // 同一用户下名称唯一
+  @@index([userId])
+  @@index([requiredPackageId])
+  @@map("packages")
+}
+
+// ==================== 实例相关模型 ====================
+
+model Instance {
+  id               Int            @id @default(autoincrement())
+  incusId          String         @map("incus_id")
+  name             String
+  userId           Int            @map("user_id")
+  hostId           Int            @map("host_id")
+  packageId        Int?           @map("package_id")
+  packagePlanId    Int?           @map("package_plan_id")  // 套餐方案 ID：null 表示免费实例
+  storagePoolName  String?        @map("storage_pool_name")
+  image            String
+  status           InstanceStatus @default(creating)
+  cpu              Int
+  memory           Int
+  disk             Int
+  ipv4             String?
+  ipv6             String?
+  networkMode      NetworkMode    @default(nat) @map("network_mode")
+  sshPort          Int?           @map("ssh_port")
+  rootPassword     String?        @map("root_password")
+  snapshottedSpecs Json?          @default("{}") @map("snapshotted_specs")
+  portLimit        Int?           @map("port_limit")
+  snapshotLimit    Int?           @map("snapshot_limit")
+  backupLimit      Int?           @map("backup_limit")
+  siteLimit        Int?           @map("site_limit")
+  swapEnabled      Boolean        @default(false) @map("swap_enabled")
+  swapSize         Int?           @map("swap_size") // SWAP 大小(MB)，null/0 表示未配置
+
+  // 实例级流量控制
+  monthlyTrafficLimit BigInt?       @map("monthly_traffic_limit")
+  monthlyTrafficUsed  BigInt        @default(0) @map("monthly_traffic_used")
+  trafficStatus       TrafficStatus @default(NORMAL) @map("traffic_status")
+
+  // 存储 I/O 限制 (null = 继承套餐)
+  limitsRead      String? @map("limits_read")
+  limitsWrite     String? @map("limits_write")
+  limitsReadIops  Int?    @map("limits_read_iops")
+  limitsWriteIops Int?    @map("limits_write_iops")
+
+  // 网络限制
+  limitsIngress String? @map("limits_ingress")
+  limitsEgress  String? @map("limits_egress")
+
+  // 进程与调度
+  limitsProcesses   Int? @map("limits_processes")
+  limitsCpuPriority Int? @map("limits_cpu_priority")
+
+  // 启动配置
+  bootAutostart           Boolean? @map("boot_autostart")
+  bootAutostartPriority   Int?     @map("boot_autostart_priority")
+  bootAutostartDelay      Int?     @map("boot_autostart_delay")
+  bootHostShutdownTimeout Int?     @map("boot_host_shutdown_timeout")
+
+  // 恢复来源信息
+  restoredFrom Json? @map("restored_from") // { backupId, backupName, restoredAt }
+
+  // ========== 计费与封停相关字段 ==========
+  // 到期时间：null 表示永不到期（免费实例），有值表示付费实例的到期时间
+  expiresAt        DateTime? @map("expires_at")
+  // 封停信息
+  suspendedAt      DateTime? @map("suspended_at")      // 封停时间
+  suspendedBy      Int?      @map("suspended_by")      // 封停操作者（null=系统自动，有值=用户ID）
+  suspendReason    String?   @map("suspend_reason")    // 封停原因（expired=到期封停，其他=手动封停原因）
+  // 计费价格（从方案复制，支持后续调整）
+  billingPrice     Decimal?  @map("billing_price") @db.Decimal(10, 2)  // 单周期价格
+  billingCycle     Int?      @map("billing_cycle")  // 计费周期（月）
+  // 自动续费
+  autoRenew        Boolean   @default(false) @map("auto_renew")
+  iconBadgeId      String?   @map("icon_badge_id")
+  autoRenewAttempts     Int        @default(0) @map("auto_renew_attempts")      // 已尝试次数
+  lastAutoRenewAttemptAt DateTime? @map("last_auto_renew_attempt_at")           // 上次尝试时间
+  // 到期提醒记录
+  expiryNotifiedAt DateTime? @map("expiry_notified_at") // 上次发送到期提醒时间
+  // 乐观锁
+  version          Int       @default(0)  // 版本号，用于并发控制
+  // IPv6 重新分配冷却
+  lastIpv6ReassignAt DateTime? @map("last_ipv6_reassign_at") // 上次重新分配 IPv6 时间（每实例每天限一次）
+  // 方案变更冷却
+  lastPlanChangeAt   DateTime? @map("last_plan_change_at")   // 上次变更方案时间（3天冷却期）
+  // 用户自定义显示顺序；相同顺序时按创建时间倒序
+  displayOrder       Int       @default(0) @map("display_order")
+
+  // Cloud-init 检测状态
+  cloudInitState             String?   @map("cloud_init_state")
+  cloudInitSource            String?   @map("cloud_init_source")
+  cloudInitLastCheckedAt     DateTime? @map("cloud_init_last_checked_at")
+  cloudInitCompletedAt       DateTime? @map("cloud_init_completed_at")
+  cloudInitManualCompletedAt DateTime? @map("cloud_init_manual_completed_at")
+  cloudInitManualCompletedBy Int?      @map("cloud_init_manual_completed_by")
+
+  createdAt    DateTime  @default(now()) @map("created_at")
+  updatedAt    DateTime  @updatedAt @map("updated_at")
+  lastSyncedAt DateTime? @map("last_synced_at") // 最后与 Incus 同步时间
+
+  user            User               @relation(fields: [userId], references: [id])
+  host            Host               @relation(fields: [hostId], references: [id])
+  package         Package?           @relation(fields: [packageId], references: [id], onDelete: SetNull)
+  packagePlan     PackagePlan?       @relation(fields: [packagePlanId], references: [id], onDelete: SetNull)
+  portMappings    PortMapping[]
+  snapshots       Snapshot[]
+  backups         Backup[]
+  backupPolicy    BackupPolicy?
+  snapshotPolicy  SnapshotPolicy?
+  trafficSnapshot TrafficSnapshot?
+  dailyTraffic    DailyTraffic[]
+  transfers       InstanceTransfer[]
+  ipAddresses     IpAddress[]
+  ipv6Subnets     Ipv6Subnet[]
+  proxySites       ProxySite[]
+  instanceTasks    InstanceTask[]
+  tickets          Ticket[]          @relation("InstanceTickets")
+  checkinRecords   CheckinRecord[]
+  redeemCodeUsages RedeemCodeUsage[]
+  billingRecords   InstanceBillingRecord[]  // 计费记录
+  affBinding       AffBinding?              // AFF优惠码绑定
+  resourcePoolLogs ResourcePoolLog[]        // 资源池应用记录
+  destroyRecords   UserDestroyRecord[]      // 销毁记录
+  appliedBadgeOwnerships UserBadgeOwnership[] @relation("InstanceAppliedBadgeOwnerships")
+  logs              Log[]
+  auditIgnores     InstanceAuditIgnore[]
+  auditScans       InstanceAuditScan[]
+  auditActions     InstanceAuditAction[]
+
+  @@index([userId])
+  @@index([hostId])
+  @@index([status])
+  @@index([hostId, status]) // 高可用优化：状态同步调度器使用
+  @@index([expiresAt])      // 计费调度器使用：查找即将到期的实例
+  @@index([userId, displayOrder, createdAt(sort: Desc)])
+  @@map("instances")
+}
+
+// IP 地址类型枚举
+enum IpType {
+  inet4
+  inet6
+}
+
+// IP 地址池模型 (支持多 IP)
+model IpAddress {
+  id        Int     @id @default(autoincrement())
+  address   String
+  type      IpType  @default(inet6)
+  isPrimary Boolean @default(false) @map("is_primary")
+  isCustom  Boolean @default(false) @map("is_custom") // 用户自定义 IP
+  device    String  @default("eth1") // 网卡名: eth0(NAT), eth1(routed IPv6)
+
+  hostId Int  @map("host_id")
+  host   Host @relation(fields: [hostId], references: [id], onDelete: Cascade)
+
+  instanceId Int      @map("instance_id")
+  instance   Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  createdAt DateTime @default(now()) @map("created_at")
+
+  @@index([address])
+  @@index([hostId])
+  @@index([hostId, address])
+  @@index([instanceId])
+  @@map("ip_addresses")
+}
+
+// IPv6 网段分配模型
+model Ipv6Subnet {
+  id        Int    @id @default(autoincrement())
+  cidr      String @unique // 网段 CIDR，如 "2a01:4f9:c012:e7:aaaa::/112"
+  primaryIp String @map("primary_ip") // 网段主 IP (通常是 ::1)
+  device    String @default("eth1")
+
+  instanceId Int      @map("instance_id")
+  instance   Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  createdAt DateTime @default(now()) @map("created_at")
+
+  @@index([instanceId])
+  @@map("ipv6_subnets")
+}
+
+model PortMapping {
+  id          Int      @id @default(autoincrement())
+  instanceId  Int      @map("instance_id")
+  hostId      Int      @map("host_id")
+  protocol    Protocol @default(tcp)
+  publicPort  Int      @map("public_port")
+  privatePort Int      @map("private_port")
+  remark      String?
+  createdAt   DateTime @default(now()) @map("created_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  host     Host     @relation(fields: [hostId], references: [id])
+
+  @@unique([hostId, protocol, publicPort])
+  @@index([instanceId])
+  @@map("port_mappings")
+}
+
+// ==================== 快照/备份相关模型 ====================
+
+model Snapshot {
+  id          Int      @id @default(autoincrement())
+  instanceId  Int      @map("instance_id")
+  incusName   String   @map("incus_name")
+  name        String
+  description String?
+  stateful    Boolean  @default(false)
+  size        Int      @default(0)
+  createdAt   DateTime @default(now()) @map("created_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@index([instanceId])
+  @@map("snapshots")
+}
+
+model Backup {
+  id          Int          @id @default(autoincrement())
+  instanceId  Int          @map("instance_id")
+  incusName   String       @map("incus_name")
+  name        String
+  description String?
+  size        Int          @default(0)
+  status      BackupStatus @default(creating)
+  createdAt   DateTime     @default(now()) @map("created_at")
+  expiresAt   DateTime?    @map("expires_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@index([instanceId])
+  @@index([status])
+  @@map("backups")
+}
+
+model BackupPolicy {
+  id              Int       @id @default(autoincrement())
+  instanceId      Int       @unique @map("instance_id")
+  enabled         Boolean   @default(false)
+  intervalMinutes Int       @default(1440) @map("interval_minutes") // 默认24小时
+  lastRunAt       DateTime? @map("last_run_at")
+  nextRunAt       DateTime? @map("next_run_at")
+  createdAt       DateTime  @default(now()) @map("created_at")
+  updatedAt       DateTime  @updatedAt @map("updated_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@index([enabled, nextRunAt]) // 高可用优化：自动策略调度器使用
+  @@map("backup_policies")
+}
+
+model SnapshotPolicy {
+  id              Int       @id @default(autoincrement())
+  instanceId      Int       @unique @map("instance_id")
+  enabled         Boolean   @default(false)
+  intervalMinutes Int       @default(360) @map("interval_minutes") // 默认6小时
+  lastRunAt       DateTime? @map("last_run_at")
+  nextRunAt       DateTime? @map("next_run_at")
+  createdAt       DateTime  @default(now()) @map("created_at")
+  updatedAt       DateTime  @updatedAt @map("updated_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@index([enabled, nextRunAt]) // 高可用优化：自动策略调度器使用
+  @@map("snapshot_policies")
+}
+
+// ==================== 通知相关模型 ====================
+
+model NotificationChannel {
+  id        Int                     @id @default(autoincrement())
+  userId    Int                     @map("user_id")
+  type      NotificationChannelType
+  name      String
+  config    Json
+  enabled   Boolean                 @default(true)
+  isGlobal  Boolean                 @default(false) @map("is_global") // 管理员创建的全局渠道，对所有托管用户开放
+  createdAt DateTime                @default(now()) @map("created_at")
+
+  user     User              @relation(fields: [userId], references: [id], onDelete: Cascade)
+  logs     NotificationLog[]
+  packages Package[]         @relation("PackageReleaseChannel") // 套餐资源释放通知
+
+  @@index([userId])
+  @@map("notification_channels")
+}
+
+model NotificationLog {
+  id        Int                   @id @default(autoincrement())
+  channelId Int                   @map("channel_id")
+  eventType String                @map("event_type")
+  message   String
+  status    NotificationLogStatus
+  error     String?
+  createdAt DateTime              @default(now()) @map("created_at")
+
+  channel NotificationChannel @relation(fields: [channelId], references: [id], onDelete: Cascade)
+
+  @@map("notification_logs")
+}
+
+// ==================== OAuth 相关模型 ====================
+
+model OAuthConfig {
+  id           Int           @id @default(autoincrement())
+  provider     OAuthProvider @unique
+  clientId     String        @map("client_id")
+  clientSecret String        @map("client_secret")
+  enabled      Boolean       @default(false)
+  createdAt    DateTime      @default(now()) @map("created_at")
+  updatedAt    DateTime      @updatedAt @map("updated_at")
+
+  @@map("oauth_configs")
+}
+
+model UserOAuthBinding {
+  id               Int           @id @default(autoincrement())
+  userId           Int           @map("user_id")
+  provider         OAuthProvider
+  providerUserId   String        @map("provider_user_id")
+  providerUsername String?       @map("provider_username")
+  providerEmail    String?       @map("provider_email")
+  providerAvatar   String?       @map("provider_avatar")
+  accessToken      String?       @map("access_token")
+  refreshToken     String?       @map("refresh_token")
+  createdAt        DateTime      @default(now()) @map("created_at")
+  updatedAt        DateTime      @updatedAt @map("updated_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, provider])
+  @@unique([provider, providerUserId])
+  @@index([userId])
+  @@index([provider, providerUserId])
+  @@map("user_oauth_bindings")
+}
+
+model UserTelegramBinding {
+  id               Int      @id @default(autoincrement())
+  userId           Int      @unique @map("user_id")
+  telegramUserId   String   @unique @map("telegram_user_id")
+  telegramUsername String?  @map("telegram_username")
+  firstName        String?  @map("first_name")
+  lastName         String?  @map("last_name")
+  boundAt          DateTime @default(now()) @map("bound_at")
+  updatedAt        DateTime @updatedAt @map("updated_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("user_telegram_bindings")
+}
+
+model TelegramBindToken {
+  id        Int       @id @default(autoincrement())
+  userId    Int       @map("user_id")
+  tokenHash String    @unique @map("token_hash")
+  expiresAt DateTime  @map("expires_at")
+  usedAt    DateTime? @map("used_at")
+  createdAt DateTime  @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@map("telegram_bind_tokens")
+}
+
+// ==================== 帮助文档模型 ====================
+
+model HelpArticle {
+  id        Int      @id @default(autoincrement())
+  title     String
+  slug      String   @unique
+  content   String
+  category  String   @default("general")
+  sortOrder Int      @default(0) @map("sort_order")
+  published Boolean  @default(true)
+  pinned    Boolean  @default(false) // 是否置顶，置顶文章会显示在用户后台首页
+  createdBy Int?     @map("created_by")
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  creator User? @relation("CreatedArticles", fields: [createdBy], references: [id], onDelete: SetNull)
+
+  @@map("help_articles")
+}
+
+// ==================== 系统配置模型 ====================
+
+model SystemConfig {
+  id          Int      @id @default(autoincrement())
+  key         String   @unique
+  value       String
+  type        String   @default("string") // string, number, boolean, json
+  label       String?
+  description String?
+  createdAt   DateTime @default(now()) @map("created_at")
+  updatedAt   DateTime @updatedAt @map("updated_at")
+
+  @@map("system_configs")
+}
+
+// ==================== 流量统计模型 ====================
+
+// 流量快照 (用于增量计算)
+model TrafficSnapshot {
+  id         Int      @id @default(autoincrement())
+  instanceId Int      @unique @map("instance_id")
+  rxRaw      BigInt   @map("rx_raw") // 上次采集的原始值
+  txRaw      BigInt   @map("tx_raw")
+  updatedAt  DateTime @updatedAt @map("updated_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@map("traffic_snapshots")
+}
+
+// 每日流量聚合 (用于图表)
+model DailyTraffic {
+  id         Int      @id @default(autoincrement())
+  instanceId Int      @map("instance_id")
+  date       DateTime @db.Date // 只存日期
+  rxTotal    BigInt   @map("rx_total")
+  txTotal    BigInt   @map("tx_total")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@unique([instanceId, date])
+  @@index([instanceId, date])
+  @@map("daily_traffic")
+}
+
+// ==================== 远程存储配置模型 ====================
+
+model StorageConfig {
+  id     Int         @id @default(autoincrement())
+  userId Int         @map("user_id")
+  name   String // e.g. "我的群晖 NAS"
+  type   StorageType
+
+  // 连接信息
+  host     String
+  port     Int?
+  username String?
+  password String? // ★ 注意：写入前必须 AES 加密，读取时解密
+  basePath String? @map("base_path") // e.g. "/backups/"
+
+  // 扩展配置 (预留 S3 bucket/region/accessKey/secretKey 等)
+  extra Json?
+
+  isDefault Boolean  @default(false) @map("is_default")
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  user        User               @relation(fields: [userId], references: [id], onDelete: Cascade)
+  uploadTasks BackupUploadTask[]
+
+  @@index([userId])
+  @@map("storage_configs")
+}
+
+// ==================== 备份上传任务模型 ====================
+
+model BackupUploadTask {
+  id              Int                    @id @default(autoincrement())
+  userId          Int                    @map("user_id")
+  instanceId      Int                    @map("instance_id")
+  backupId        Int                    @map("backup_id")
+  hostId          Int                    @map("host_id")
+  storageConfigId Int                    @map("storage_config_id")
+  status          BackupUploadTaskStatus @default(PENDING)
+  progress        String? // 当前执行步骤: preparing, uploading, finalizing
+  retryCount      Int                    @default(0) @map("retry_count") // 重试次数
+
+  // 上传结果
+  remoteFileName String? @map("remote_file_name")
+  fileSize       BigInt? @map("file_size")
+  error          String?
+
+  createdAt  DateTime  @default(now()) @map("created_at")
+  startedAt  DateTime? @map("started_at")
+  finishedAt DateTime? @map("finished_at")
+
+  storageConfig StorageConfig @relation(fields: [storageConfigId], references: [id], onDelete: Cascade)
+
+  @@index([hostId, status])
+  @@index([userId])
+  @@index([instanceId])
+  @@index([storageConfigId, status])
+  @@map("backup_upload_tasks")
+}
+
+// ==================== 日志模型 ====================
+
+model Log {
+  id         Int      @id @default(autoincrement())
+  userId     Int?     @map("user_id")
+  instanceId Int?     @map("instance_id")
+  module     String
+  action     String
+  content    String
+  result     String
+  createdAt  DateTime @default(now()) @map("created_at")
+
+  user     User?     @relation(fields: [userId], references: [id], onDelete: SetNull)
+  instance Instance? @relation(fields: [instanceId], references: [id], onDelete: SetNull)
+
+  @@index([userId])
+  @@index([instanceId])
+  @@index([module])
+  @@index([createdAt])
+  @@map("logs")
+}
+
+model InstanceAuditRule {
+  id             Int      @id @default(autoincrement())
+  hostId         Int?     @map("host_id")
+  createdById    Int      @map("created_by_id")
+  name           String
+  description    String?
+  severity       String   @default("medium")
+  category       String   @default("custom")
+  targetTypes    Json     @default("[]") @map("target_types")
+  matchType      String   @default("contains") @map("match_type")
+  pattern        String   @db.Text
+  caseSensitive  Boolean  @default(false) @map("case_sensitive")
+  recommendation String?  @db.Text
+  enabled        Boolean  @default(true)
+  createdAt      DateTime @default(now()) @map("created_at")
+  updatedAt      DateTime @updatedAt @map("updated_at")
+
+  host      Host? @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  createdBy User  @relation("InstanceAuditRuleCreator", fields: [createdById], references: [id], onDelete: Cascade)
+
+  @@index([hostId, enabled])
+  @@index([createdById])
+  @@map("instance_audit_rules")
+}
+
+model InstanceAuditBuiltinRuleOverride {
+  id             Int      @id @default(autoincrement())
+  hostId         Int      @map("host_id")
+  builtinRuleId  String   @map("builtin_rule_id")
+  createdById    Int      @map("created_by_id")
+  name           String
+  description    String?
+  severity       String   @default("medium")
+  category       String   @default("custom")
+  targetTypes    Json     @default("[]") @map("target_types")
+  matchType      String   @default("contains") @map("match_type")
+  pattern        String   @db.Text
+  caseSensitive  Boolean  @default(false) @map("case_sensitive")
+  recommendation String?  @db.Text
+  enabled        Boolean  @default(true)
+  createdAt      DateTime @default(now()) @map("created_at")
+  updatedAt      DateTime @updatedAt @map("updated_at")
+
+  host      Host @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  createdBy User @relation("InstanceAuditBuiltinRuleOverrideCreator", fields: [createdById], references: [id], onDelete: Cascade)
+
+  @@unique([hostId, builtinRuleId])
+  @@index([hostId, enabled])
+  @@index([createdById])
+  @@map("instance_audit_builtin_rule_overrides")
+}
+
+model InstanceAuditIgnore {
+  id          Int       @id @default(autoincrement())
+  hostId      Int       @map("host_id")
+  instanceId  Int?      @map("instance_id")
+  createdById Int       @map("created_by_id")
+  ruleId      String?   @map("rule_id")
+  targetType  String?   @map("target_type")
+  matchText   String?   @map("match_text")
+  scope       String    @default("instance")
+  reason      String?   @db.Text
+  enabled     Boolean   @default(true)
+  expiresAt   DateTime? @map("expires_at")
+  createdAt   DateTime  @default(now()) @map("created_at")
+  updatedAt   DateTime  @updatedAt @map("updated_at")
+
+  host      Host      @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  instance  Instance? @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  createdBy User      @relation("InstanceAuditIgnoreCreator", fields: [createdById], references: [id], onDelete: Cascade)
+
+  @@index([hostId, enabled])
+  @@index([instanceId])
+  @@index([ruleId])
+  @@map("instance_audit_ignores")
+}
+
+model InstanceAuditScan {
+  id               Int      @id @default(autoincrement())
+  hostId           Int      @map("host_id")
+  instanceId       Int      @map("instance_id")
+  userId           Int      @map("user_id")
+  status           String   @default("success")
+  capability       String?
+  riskLevel        String   @map("risk_level")
+  findingCount     Int      @default(0) @map("finding_count")
+  ignoredCount     Int      @default(0) @map("ignored_count")
+  processCount     Int      @default(0) @map("process_count")
+  connectionCount  Int      @default(0) @map("connection_count")
+  listeningCount   Int      @default(0) @map("listening_count")
+  startupItemCount Int      @default(0) @map("startup_item_count")
+  findings         Json     @default("[]")
+  error            String?  @db.Text
+  createdAt        DateTime @default(now()) @map("created_at")
+
+  host     Host     @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  user     User     @relation("InstanceAuditScanUser", fields: [userId], references: [id], onDelete: Cascade)
+  actions  InstanceAuditAction[]
+
+  @@index([hostId, createdAt(sort: Desc)])
+  @@index([instanceId, createdAt(sort: Desc)])
+  @@map("instance_audit_scans")
+}
+
+model InstanceAuditAction {
+  id             Int      @id @default(autoincrement())
+  scanId         Int?     @map("scan_id")
+  hostId         Int      @map("host_id")
+  instanceId     Int      @map("instance_id")
+  userId         Int      @map("user_id")
+  actionType     String   @map("action_type")
+  pid            Int?
+  signal         String?
+  processCommand String?  @map("process_command") @db.Text
+  reason         String   @db.Text
+  result         String
+  stdout         String?  @db.Text
+  stderr         String?  @db.Text
+  createdAt      DateTime @default(now()) @map("created_at")
+
+  scan     InstanceAuditScan? @relation(fields: [scanId], references: [id], onDelete: SetNull)
+  host     Host      @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  instance Instance  @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  user     User      @relation("InstanceAuditActionUser", fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([hostId, createdAt(sort: Desc)])
+  @@index([instanceId, createdAt(sort: Desc)])
+  @@map("instance_audit_actions")
+}
+
+// ==================== 邮件验证码模型 ====================
+
+model EmailVerificationCode {
+  id        Int      @id @default(autoincrement())
+  email     String
+  code      String
+  expiresAt DateTime @map("expires_at")
+  createdAt DateTime @default(now()) @map("created_at")
+
+  @@index([email, code])
+  @@index([expiresAt])
+  @@map("email_verification_codes")
+}
+
+// ==================== 套餐共享模型 ====================
+
+model PackageShare {
+  id              Int      @id @default(autoincrement())
+  packageId       Int      @map("package_id") // 被共享的套餐
+  ownerId         Int      @map("owner_id") // 套餐所有者
+  sharedToId      Int      @map("shared_to_id") // 共享给谁（必须是好友）
+  quotaMultiplier Decimal? @map("quota_multiplier") @db.Decimal(3, 1) // 配额倍数限制，如 0.5, 1.0, 1.5, 2.0，null 表示无限制
+  maxInstances    Int?     @map("max_instances") // 最多可开实例数，null 表示无限制
+  createdAt       DateTime @default(now()) @map("created_at")
+
+  package  Package @relation(fields: [packageId], references: [id], onDelete: Cascade)
+  owner    User    @relation("PackageShareOwner", fields: [ownerId], references: [id], onDelete: Cascade)
+  sharedTo User    @relation("PackageShareReceiver", fields: [sharedToId], references: [id], onDelete: Cascade)
+
+  @@unique([packageId, sharedToId]) // 同一套餐不能重复共享给同一人
+  @@index([sharedToId])
+  @@index([ownerId])
+  @@index([packageId])
+  @@map("package_shares")
+}
+
+// ==================== 实例转移模型 ====================
+
+enum TransferStatus {
+  pending // 等待接收
+  processing // 处理中（临时锁定状态，防止并发）
+  accepted // 已接收
+  rejected // 已拒绝
+  cancelled // 已取消
+}
+
+model InstanceTransfer {
+  id           Int            @id @default(autoincrement())
+  instanceId   Int            @map("instance_id")
+  fromUserId   Int            @map("from_user_id")
+  toUserId     Int            @map("to_user_id")
+  status       TransferStatus @default(pending)
+  snapshot     Json // 转移时的实例快照信息
+  remark       String? // 转移备注
+  rejectReason String?        @map("reject_reason")
+  fee          Decimal?       @db.Decimal(10, 2) // 转移手续费（元），拒绝时退还
+  createdAt    DateTime       @default(now()) @map("created_at")
+  updatedAt    DateTime       @updatedAt @map("updated_at") // 状态变更时自动更新，用于超时检测
+  acceptedAt   DateTime?      @map("accepted_at")
+  rejectedAt   DateTime?      @map("rejected_at")
+  cancelledAt  DateTime?      @map("cancelled_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  fromUser User     @relation("TransferFrom", fields: [fromUserId], references: [id])
+  toUser   User     @relation("TransferTo", fields: [toUserId], references: [id])
+
+  @@index([fromUserId, status])
+  @@index([toUserId, status])
+  @@index([instanceId, status])
+  @@map("instance_transfers")
+}
+
+// ==================== 敏感操作二次验证模型 ====================
+
+enum OperationType {
+  // 账号相关操作（邮件验证）
+  change_password
+  disable_2fa
+  change_email
+  delete_account
+  // 资源相关操作（通知渠道验证）
+  delete_instance
+  reinstall_instance
+  recreate_instance  // 重建实例
+  transfer_instance
+  delete_snapshot
+  delete_backup
+}
+
+enum VerificationChannel {
+  email
+  telegram
+  discord
+  webhook
+}
+
+model OperationVerification {
+  id            Int                 @id @default(autoincrement())
+  userId        Int                 @map("user_id")
+  operationType OperationType       @map("operation_type")
+  code          String // 6位验证码
+  channel       VerificationChannel // 验证渠道
+  resourceId    Int?                @map("resource_id") // 资源ID（如实例ID、快照ID等）
+  resourceType  String?             @map("resource_type") // 资源类型（instance/snapshot/backup）
+  verified      Boolean             @default(false)
+  verifiedAt    DateTime?           @map("verified_at")
+  expiresAt     DateTime            @map("expires_at")
+  createdAt     DateTime            @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, operationType, code])
+  @@index([expiresAt])
+  @@map("operation_verifications")
+}
+
+// ==================== 分布式锁模型 ====================
+// LOGIC004: 支持多实例部署的分布式锁
+
+model DistributedLock {
+  id         Int      @id @default(autoincrement())
+  lockKey    String   @unique @map("lock_key") // 锁的唯一标识
+  ownerId    String   @map("owner_id") // 锁持有者ID（进程ID+随机字符串）
+  acquiredAt DateTime @map("acquired_at") // 获取时间
+  expiresAt  DateTime @map("expires_at") // 过期时间
+
+  @@index([expiresAt]) // 用于清理过期锁
+  @@map("distributed_locks")
+}
+
+// ==================== 系统镜像模型 ====================
+
+model SystemImage {
+  id           Int      @id @default(autoincrement())
+  name         String // 显示名称，如 "Ubuntu 24.04 LTS"
+  remoteAlias  String   @unique @map("remote_alias") // Incus 别名，如 "ubuntu/noble/cloud"
+  osType       String   @default("Linux") @map("os_type")
+  architecture String   @default("x86_64")
+  instanceType String   @default("both") @map("instance_type") // 支持的实例类型: container, vm, both
+  icon         String // 图标标识，如 "ubuntu"
+  sortOrder    Int      @default(0) @map("sort_order")
+  hidden       Boolean  @default(false) // 是否隐藏
+  createdAt    DateTime @default(now()) @map("created_at")
+  updatedAt    DateTime @updatedAt @map("updated_at")
+  allowedHosts HostAllowedImage[]
+
+  @@map("system_images")
+}
+
+model HostAllowedImage {
+  id        Int         @id @default(autoincrement())
+  hostId    Int         @map("host_id")
+  imageId   Int         @map("image_id")
+  createdAt DateTime    @default(now()) @map("created_at")
+  updatedAt DateTime    @updatedAt @map("updated_at")
+  host      Host        @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  image     SystemImage @relation(fields: [imageId], references: [id], onDelete: Cascade)
+
+  @@unique([hostId, imageId])
+  @@index([hostId])
+  @@index([imageId])
+  @@map("host_allowed_images")
+}
+
+// ==================== 公告/通知历史记录模型 ====================
+
+enum AnnouncementType {
+  system_broadcast // 管理员全站公告
+  host_broadcast   // 宿主机节点公告
+  admin_message    // 管理员私信
+  host_message     // 宿主机所有者私信
+}
+
+model Announcement {
+  id             Int              @id @default(autoincrement())
+  type           AnnouncementType // 公告类型
+  senderId       Int              @map("sender_id") // 发送者 ID
+  title          String           // 标题
+  content        String           // 内容
+  recipientCount Int              @map("recipient_count") // 发送人数
+
+  // 可选关联（根据类型）
+  hostId       Int? @map("host_id") // 节点公告时的节点 ID
+  targetUserId Int? @map("target_user_id") // 私信时的目标用户
+  instanceId   Int? @map("instance_id") // 实例私信时的实例 ID
+
+  createdAt DateTime @default(now()) @map("created_at")
+
+  sender User @relation("AnnouncementSender", fields: [senderId], references: [id], onDelete: Cascade)
+  host   Host? @relation("HostAnnouncements", fields: [hostId], references: [id], onDelete: SetNull)
+
+  @@index([senderId, createdAt(sort: Desc)])
+  @@index([hostId, createdAt(sort: Desc)])
+  @@index([type, createdAt(sort: Desc)])
+  @@map("announcements")
+}
+
+// ==================== 站内信模型 ====================
+
+model InboxMessage {
+  id        Int      @id @default(autoincrement())
+  userId    Int      @map("user_id")
+  eventType String   @map("event_type") // 事件类型，与 notifier.ts 一致
+  title     String                       // 消息标题
+  content   String                       // 消息内容
+  isRead    Boolean  @default(false) @map("is_read")
+  data      Json?                        // 原始事件数据，用于前端跳转
+  createdAt DateTime @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, isRead])
+  @@index([userId, createdAt(sort: Desc)])
+  @@map("inbox_messages")
+}
+
+model HostNotificationEmailTask {
+  id          Int                             @id @default(autoincrement())
+  userId      Int                             @map("user_id")
+  hostId      Int                             @map("host_id")
+  email       String
+  username    String
+  hostName    String                          @map("host_name")
+  title       String
+  content     String
+  status      HostNotificationEmailTaskStatus @default(PENDING)
+  retryCount  Int                             @default(0) @map("retry_count")
+  lastError   String?                         @map("last_error")
+  scheduledFor DateTime                       @map("scheduled_for")
+  createdAt   DateTime                        @default(now()) @map("created_at")
+  startedAt   DateTime?                       @map("started_at")
+  finishedAt  DateTime?                       @map("finished_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  host Host @relation(fields: [hostId], references: [id], onDelete: Cascade)
+
+  @@index([status, scheduledFor])
+  @@index([userId])
+  @@index([hostId])
+  @@index([startedAt])
+  @@map("host_notification_email_tasks")
+}
+
+// ==================== 反代站点模型 ====================
+
+model ProxySite {
+  id           Int             @id @default(autoincrement())
+  instanceId   Int             @map("instance_id")
+  hostId       Int             @map("host_id") // 冗余存储，方便查询
+  domain       String // 域名（不允许泛域名）
+  targetPort   Int             @map("target_port") // 实例内部端口
+  httpsEnabled Boolean         @default(true) @map("https_enabled") // 是否启用 HTTPS（自动申请 Let's Encrypt 证书）
+  remark       String? // 站点备注
+  status       ProxySiteStatus @default(pending)
+  enabled      Boolean         @default(true)
+  error        String? // 错误信息
+  createdAt    DateTime        @default(now()) @map("created_at")
+  updatedAt    DateTime        @updatedAt @map("updated_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  host     Host     @relation(fields: [hostId], references: [id], onDelete: Cascade)
+
+  @@unique([hostId, domain]) // 同一宿主机下域名唯一
+  @@index([instanceId])
+  @@index([hostId])
+  @@map("proxy_sites")
+}
+
+// ==================== 登录记录模型 ====================
+
+model LoginRecord {
+  id        Int      @id @default(autoincrement())
+  userId    Int      @map("user_id")
+  ip        String   // 登录 IP
+  country   String?  // 国家
+  region    String?  // 地区/省份
+  city      String?  // 城市
+  isp       String?  // ISP 服务商
+  timezone  String?  // 时区
+  userAgent String?  @map("user_agent") // 用户代理
+  createdAt DateTime @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, createdAt(sort: Desc)])
+  @@index([userId, ip])
+  @@map("login_records")
+}
+
+// ==================== 工单系统模型 ====================
+
+// 工单状态枚举
+enum TicketStatus {
+  open        // 待处理
+  in_progress // 处理中
+  resolved    // 已解决
+  closed      // 已关闭
+}
+
+// 工单优先级枚举
+enum TicketPriority {
+  low
+  normal
+  high
+  urgent
+}
+
+// 工单主表
+model Ticket {
+  id          Int            @id @default(autoincrement())
+  userId      Int            @map("user_id")      // 发起工单的用户
+  hostId      Int?           @map("host_id")      // 可选：关联的宿主机（无实例时为null，工单直接发给管理员）
+  instanceId  Int?           @map("instance_id")  // 可选：关联的实例
+  
+  subject     String                              // 工单标题
+  category    String         @default("general")  // 分类：general/billing/technical/abuse
+  priority    TicketPriority @default(normal)
+  status      TicketStatus   @default(open)
+  
+  createdAt   DateTime       @default(now()) @map("created_at")
+  updatedAt   DateTime       @updatedAt @map("updated_at")
+  resolvedAt  DateTime?      @map("resolved_at")
+  closedAt    DateTime?      @map("closed_at")
+  
+  user        User           @relation("TicketCreator", fields: [userId], references: [id], onDelete: Cascade)
+  host        Host?          @relation("HostTickets", fields: [hostId], references: [id], onDelete: Cascade)
+  instance    Instance?      @relation("InstanceTickets", fields: [instanceId], references: [id], onDelete: SetNull)
+  messages    TicketMessage[]
+  attachments TicketMessageAttachment[]
+  
+  @@index([userId, status])
+  @@index([hostId, status])
+  @@index([status, createdAt(sort: Desc)])
+  @@map("tickets")
+}
+
+// 工单消息表
+model TicketMessage {
+  id          Int      @id @default(autoincrement())
+  ticketId    Int      @map("ticket_id")
+  senderId    Int      @map("sender_id")    // 发送者（用户或宿主机所有者）
+  content     String                         // 消息内容
+  isFromOwner Boolean  @default(false) @map("is_from_owner") // 是否来自宿主机所有者
+  createdAt   DateTime @default(now()) @map("created_at")
+  
+  ticket      Ticket   @relation(fields: [ticketId], references: [id], onDelete: Cascade)
+  sender      User     @relation("TicketMessageSender", fields: [senderId], references: [id], onDelete: Cascade)
+  attachments TicketMessageAttachment[]
+  
+  @@index([ticketId, createdAt])
+  @@map("ticket_messages")
+}
+
+// 工单消息图片附件
+model TicketMessageAttachment {
+  id              Int      @id @default(autoincrement())
+  ticketId        Int      @map("ticket_id")
+  messageId       Int      @map("message_id")
+  uploaderId      Int      @map("uploader_id")
+  provider        String   @default("lsky")
+  providerVersion String   @default("v1") @map("provider_version")
+  providerFileId  String?  @map("provider_file_id")
+  filename        String
+  originalName    String   @map("original_name")
+  mimeType        String   @map("mime_type")
+  sizeBytes       Int      @map("size_bytes")
+  width           Int?
+  height          Int?
+  url             String
+  thumbnailUrl    String?  @map("thumbnail_url")
+  createdAt       DateTime @default(now()) @map("created_at")
+
+  ticket   Ticket        @relation(fields: [ticketId], references: [id], onDelete: Cascade)
+  message  TicketMessage @relation(fields: [messageId], references: [id], onDelete: Cascade)
+  uploader User          @relation("TicketAttachmentUploader", fields: [uploaderId], references: [id], onDelete: Cascade)
+
+  @@index([ticketId, createdAt])
+  @@index([messageId])
+  @@index([uploaderId])
+  @@map("ticket_message_attachments")
+}
+
+// ==================== 签到系统模型 ====================
+
+// 兑换码类型枚举
+enum RedeemCodeType {
+  c // CPU
+  r // 内存 (RAM)
+  d // 硬盘 (Disk)
+  t // 流量 (Traffic)
+  p // 积分 (Points)
+}
+
+// 签到记录表
+model CheckinRecord {
+  id         Int            @id @default(autoincrement())
+  userId     Int            @map("user_id")          // 签到用户（兑换码所有者）
+  redeemCode String         @unique @map("redeem_code") // 兑换码
+  codeType   RedeemCodeType @map("code_type")        // 兑换码类型
+  codeValue  Int            @map("code_value")       // 兑换码数值
+  expiresAt  DateTime       @map("expires_at")       // 过期时间（3小时）
+  usedAt     DateTime?      @map("used_at")          // 使用时间
+  usedBy     Int?           @map("used_by")          // 使用者ID
+  usedFor    Int?           @map("used_for")         // 使用的实例ID
+  createdAt  DateTime       @default(now()) @map("created_at")
+
+  user       User      @relation("CheckinRecords", fields: [userId], references: [id], onDelete: Cascade)
+  usedByUser User?     @relation("RedeemRecords", fields: [usedBy], references: [id], onDelete: SetNull)
+  instance   Instance? @relation(fields: [usedFor], references: [id], onDelete: SetNull)
+
+  @@index([userId])
+  @@index([usedBy])
+  @@index([expiresAt])
+  @@map("checkin_records")
+}
+
+// 用户签到统计表
+model CheckinStats {
+  id                   Int       @id @default(autoincrement())
+  userId               Int       @unique @map("user_id")
+  lastCheckinDate      DateTime? @map("last_checkin_date")       // 最后签到日期
+  lastRedeemDate       DateTime? @map("last_redeem_date")        // 最后兑换日期（签到码专用）
+  consecutiveOthersUse Int       @default(0) @map("consecutive_others_use") // 连续被他人使用天数
+  selfOnlyMode         Boolean   @default(false) @map("self_only_mode")     // 是否只能自己使用
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("checkin_stats")
+}
+
+// ==================== 系统兑换码模型 ====================
+
+// 系统兑换码（宿主机所有者生成）
+model RedeemCode {
+  id          Int            @id @default(autoincrement())
+  code        String         @unique                        // 兑换码，格式: h-{random18}
+  hostId      Int            @map("host_id")                // 关联的宿主机
+  createdById Int            @map("created_by_id")          // 创建者（宿主机所有者）
+  codeType    RedeemCodeType @map("code_type")              // 资源类型
+  codeValue   Int            @map("code_value")             // 资源数值
+  maxUses     Int            @default(1) @map("max_uses")   // 最大使用次数
+  usedCount   Int            @default(0) @map("used_count") // 已使用次数
+  expiresAt   DateTime?      @map("expires_at")             // 过期时间，null=永不过期
+  enabled     Boolean        @default(true)                 // 是否启用
+  remark      String?                                       // 备注
+  batchId     String?        @map("batch_id")               // 批次ID，同批次码每用户只能用一张
+  createdAt   DateTime       @default(now()) @map("created_at")
+
+  host        Host             @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  createdBy   User             @relation("RedeemCodesCreated", fields: [createdById], references: [id], onDelete: Cascade)
+  usages      RedeemCodeUsage[]
+
+  @@index([hostId])
+  @@index([createdById])
+  @@index([enabled])
+  @@index([batchId])
+  @@map("redeem_codes")
+}
+
+// 系统兑换码使用记录
+model RedeemCodeUsage {
+  id           Int      @id @default(autoincrement())
+  redeemCodeId Int      @map("redeem_code_id")  // 兑换码 ID
+  userId       Int      @map("user_id")         // 使用者
+  instanceId   Int      @map("instance_id")     // 应用到的实例
+  batchId      String?  @map("batch_id")        // 批次ID（冗余存储，用于唯一约束）
+  usedAt       DateTime @default(now()) @map("used_at")
+
+  redeemCode RedeemCode @relation(fields: [redeemCodeId], references: [id], onDelete: Cascade)
+  user       User       @relation("RedeemCodeUsages", fields: [userId], references: [id], onDelete: Cascade)
+  instance   Instance   @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, batchId])  // 同批次每用户只能使用一次（NULL值不参与约束）
+  @@index([redeemCodeId])
+  @@index([userId])
+  @@index([instanceId])
+  @@map("redeem_code_usages")
+}
+
+// ==================== 用户自定义初始化命令模型 ====================
+
+model CustomInitCommand {
+  id          Int      @id @default(autoincrement())
+  userId      Int      @map("user_id")
+  name        String   // 模板名称
+  command     String   @db.Text // 命令内容（多行文本）
+  distros     String   // JSON数组，适配的发行版 ["ubuntu","alpine","all"]
+  description String?  // 备注说明
+  enabled     Boolean  @default(true) // 是否启用
+  createdAt   DateTime @default(now()) @map("created_at")
+  updatedAt   DateTime @updatedAt @map("updated_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@index([userId, enabled])
+  @@map("custom_init_commands")
+}
+
+model TerminalSavedCommand {
+  id          Int      @id @default(autoincrement())
+  userId      Int      @map("user_id")
+  name        String
+  command     String   @db.Text
+  description String?
+  createdAt   DateTime @default(now()) @map("created_at")
+  updatedAt   DateTime @updatedAt @map("updated_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, updatedAt])
+  @@map("terminal_saved_commands")
+}
+
+// ==================== 计费系统模型 ====================
+
+// 余额变动日志
+model BalanceLog {
+  id            Int            @id @default(autoincrement())
+  userId        Int            @map("user_id")
+  type          BalanceLogType
+  amount        Decimal        @db.Decimal(10, 2) // 正数=增加，负数=减少
+  balanceBefore Decimal        @map("balance_before") @db.Decimal(10, 2)
+  balanceAfter  Decimal        @map("balance_after") @db.Decimal(10, 2)
+
+  // 关联信息
+  orderId    String? @map("order_id")    // 充值订单号
+  instanceId Int?    @map("instance_id") // 关联实例
+  remark     String?                      // 备注
+
+  createdAt DateTime @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, createdAt(sort: Desc)])
+  @@index([type])
+  @@map("balance_logs")
+}
+
+// 支付渠道配置
+model PaymentProvider {
+  id     Int                   @id @default(autoincrement())
+  name   String                // 显示名称，如"支付宝"、"微信支付"
+  type   PaymentProviderType
+  status PaymentProviderStatus @default(disabled)
+
+  // 通用配置（JSON，根据类型存储不同字段）
+  // 易支付: { pid, key, apiUrl, notifyUrl }
+  // Stripe: { publicKey, secretKey, webhookSecret }
+  config Json @default("{}")
+
+  // 支付方式支持（JSON数组）
+  // 如 ["alipay", "wxpay", "qqpay"] 或 ["card"]
+  methods Json @default("[]")
+
+  // 手续费设置
+  feeRate  Decimal @default(0) @map("fee_rate") @db.Decimal(5, 4) // 费率，如 0.006 = 0.6%
+  feeFixed Decimal @default(0) @map("fee_fixed") @db.Decimal(10, 2) // 固定手续费
+
+  // 限额设置
+  minAmount Decimal  @default(1) @map("min_amount") @db.Decimal(10, 2) // 最小充值金额
+  maxAmount Decimal? @map("max_amount") @db.Decimal(10, 2)              // 最大充值金额
+
+  sortOrder Int      @default(0) @map("sort_order") // 排序
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  rechargeRecords RechargeRecord[]
+
+  @@map("payment_providers")
+}
+
+// 充值记录
+model RechargeRecord {
+  id         Int @id @default(autoincrement())
+  userId     Int @map("user_id")
+  providerId Int @map("provider_id")
+
+  // 订单信息
+  orderNo String  @unique @map("order_no") // 系统订单号
+  tradeNo String? @map("trade_no")          // 第三方交易号
+
+  // 金额
+  amount       Decimal  @db.Decimal(10, 2)                                // 充值金额
+  actualAmount Decimal? @map("actual_amount") @db.Decimal(10, 2)          // 实际到账金额
+  fee          Decimal  @default(0) @db.Decimal(10, 2)                    // 平台手续费
+
+  // 支付方式
+  paymentMethod String? @map("payment_method") // alipay/wxpay/card 等
+
+  status RechargeStatus @default(pending)
+
+  // 回调信息
+  callbackData Json?     @map("callback_data") // 支付回调原始数据
+  callbackAt   DateTime? @map("callback_at")
+  providerConfigSnapshot String? @map("provider_config_snapshot") // 订单创建时的支付渠道配置快照（加密）
+  paymentDetails        Json?    @map("payment_details")          // 结构化支付详情（币种/网络/txid等）
+
+  // 失败信息
+  failReason String? @map("fail_reason")
+
+  // IP 与设备
+  ip        String?
+  userAgent String? @map("user_agent")
+
+  createdAt   DateTime  @default(now()) @map("created_at")
+  updatedAt   DateTime  @updatedAt @map("updated_at")
+  expiredAt   DateTime? @map("expired_at")   // 订单过期时间（按支付渠道发票有效期）
+  completedAt DateTime? @map("completed_at")
+
+  user     User            @relation(fields: [userId], references: [id], onDelete: Cascade)
+  provider PaymentProvider @relation(fields: [providerId], references: [id])
+
+  @@index([userId, status])
+  @@index([status, createdAt])
+  @@index([orderNo])
+  @@index([tradeNo])
+  @@map("recharge_records")
+}
+
+// VIP 等级规则配置
+model VipLevelRule {
+  id                  Int                   @id @default(autoincrement())
+  type                VipLevelRuleType
+  level               Int
+  enabled             Boolean               @default(true)
+  conditionMode       VipLevelConditionMode @default(any) @map("condition_mode")
+  minRecharge         Decimal?              @map("min_recharge") @db.Decimal(10, 2)
+  minConsume          Decimal?              @map("min_consume") @db.Decimal(10, 2)
+  minHostingIncome    Decimal?              @map("min_hosting_income") @db.Decimal(10, 2)
+  minHostingInstances Int?                  @map("min_hosting_instances")
+  benefits            Json                  @default("{}")
+  createdAt           DateTime              @default(now()) @map("created_at")
+  updatedAt           DateTime              @updatedAt @map("updated_at")
+
+  @@unique([type, level])
+  @@index([type, enabled])
+  @@map("vip_level_rules")
+}
+
+model VipBenefitReward {
+  id          Int                  @id @default(autoincrement())
+  level       Int
+  type        VipBenefitRewardType
+  title       String
+  description String?
+  claimLimit  Int                  @default(1) @map("claim_limit")
+  sortOrder   Int                  @default(0) @map("sort_order")
+  enabled     Boolean              @default(true)
+  config      Json                 @default("{}")
+  createdAt   DateTime             @default(now()) @map("created_at")
+  updatedAt   DateTime             @updatedAt @map("updated_at")
+
+  claims VipBenefitClaim[]
+
+  @@index([level, enabled, sortOrder])
+  @@index([type])
+  @@map("vip_benefit_rewards")
+}
+
+model VipBenefitClaim {
+  id          Int                   @id @default(autoincrement())
+  userId      Int                   @map("user_id")
+  rewardId    Int                   @map("reward_id")
+  level       Int
+  status      VipBenefitClaimStatus
+  claimNo     Int                   @map("claim_no")
+  snapshot    Json                  @default("{}")
+  deliveredAt DateTime?             @map("delivered_at")
+  createdAt   DateTime              @default(now()) @map("created_at")
+
+  user   User             @relation(fields: [userId], references: [id], onDelete: Cascade)
+  reward VipBenefitReward @relation(fields: [rewardId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, rewardId, claimNo])
+  @@index([userId, level])
+  @@index([rewardId])
+  @@index([status, createdAt])
+  @@map("vip_benefit_claims")
+}
+
+// 支付回调防重放记录
+model PaymentCallback {
+  id         Int      @id @default(autoincrement())
+  providerId Int      @map("provider_id")     // 支付渠道ID
+  orderNo    String   @map("order_no")        // 订单号
+  tradeNo    String?  @map("trade_no")        // 第三方交易号
+  callbackIp String?  @map("callback_ip")     // 回调IP
+  processed  Boolean  @default(true)          // 是否已处理
+  createdAt  DateTime @default(now()) @map("created_at")
+
+  @@unique([providerId, orderNo, tradeNo])    // 联合唯一索引防重放
+  @@index([createdAt])                        // 用于定期清理
+  @@map("payment_callbacks")
+}
+
+// 套餐方案（付费实例的核心）
+model PackagePlan {
+  id        Int @id @default(autoincrement())
+  packageId Int @map("package_id")
+
+  // 基本信息
+  name        String  // 方案名称，如"低配"、"高配"、"标准版"
+  description String? // 方案描述
+
+  // ========== 资源配置（预设固定值） ==========
+  cpu    Int // CPU 额度 (%)，如 50, 100, 200
+  memory Int // 内存 (MB)，如 512, 1024, 2048
+  disk   Int // 磁盘 (MB)，如 10240, 20480, 51200
+
+  // ========== 配额限制（方案级别独立配置） ==========
+  portLimit         Int    @map("port_limit")          // 端口映射数上限
+  snapshotLimit     Int    @map("snapshot_limit")      // 快照数上限
+  backupLimit       Int    @map("backup_limit")        // 备份数上限
+  siteLimit         Int    @map("site_limit")          // 反代站点数上限
+  swapSize          Int    @default(0) @map("swap_size") // SWAP 大小(MB)，0 表示不提供
+  trafficLimit      BigInt @map("traffic_limit")       // 月流量限额 (Bytes)
+  trafficLimitSpeed String @default("1Mbit") @map("traffic_limit_speed") // 流量超限后的限速值
+
+  // ========== 计费配置 ==========
+  price        Decimal @db.Decimal(10, 2)                             // 价格
+  billingCycle Int     @default(1) @map("billing_cycle")              // 计费周期（月）
+  setupFee     Decimal @default(0) @map("setup_fee") @db.Decimal(10, 2) // 开通费
+
+  // ========== 状态与排序 ==========
+  isActive  Boolean @default(true) @map("is_active") // 是否启用
+  isSoldOut Boolean @default(false) @map("is_sold_out") // 是否售罄：显示但不可新购/变更
+  sortOrder Int     @default(0) @map("sort_order")   // 排序
+
+  // ========== SLA保证（可选） ==========
+  slaGuarantee Decimal? @map("sla_guarantee") @db.Decimal(5, 2) // SLA保证百分比，1-100，两位小数，null=不显示
+
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  // 关系
+  package   Package    @relation(fields: [packageId], references: [id], onDelete: Cascade)
+  instances Instance[]
+  affCodes  AffCode[]  // AFF优惠码
+
+  @@unique([packageId, name]) // 同一套餐下方案名称唯一
+  @@index([packageId, isActive])
+  @@map("package_plans")
+}
+
+// 实例计费记录
+model InstanceBillingRecord {
+  id         Int @id @default(autoincrement())
+  instanceId Int @map("instance_id")
+  userId     Int @map("user_id")
+
+  type   BillingRecordType
+  amount Decimal           @db.Decimal(10, 2) // 扣费金额（正数）
+  months Int               @default(1)        // 购买/续费月数
+
+  // 计费周期
+  periodStart DateTime @map("period_start") // 计费开始时间
+  periodEnd   DateTime @map("period_end")   // 计费结束时间
+
+  // 关联
+  balanceLogId Int? @map("balance_log_id") // 关联余额日志
+
+  remark    String?
+  createdAt DateTime @default(now()) @map("created_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@index([instanceId, createdAt(sort: Desc)])
+  @@index([userId, createdAt(sort: Desc)])
+  @@map("instance_billing_records")
+}
+
+// ==================== AFF推荐计划模型 ====================
+
+// AFF优惠码
+model AffCode {
+  id              Int      @id @default(autoincrement())
+  code            String   @unique                                // 优惠码，如 AFF-123-A8K3M9
+  userId          Int      @map("user_id")                        // 创建者
+  packagePlanId   Int?     @map("package_plan_id")                // 绑定的方案（null表示全局码）
+  discountRate    Decimal  @default(0.05) @map("discount_rate") @db.Decimal(5, 4)   // 折扣率 5%
+  commissionRate  Decimal  @default(0.05) @map("commission_rate") @db.Decimal(5, 4) // 返利率 5%
+  enabled         Boolean  @default(true)
+  usedCount       Int      @default(0) @map("used_count")         // 使用次数
+  totalEarnings   Decimal  @default(0) @map("total_earnings") @db.Decimal(10, 2) // 总收益
+  createdAt       DateTime @default(now()) @map("created_at")
+
+  user        User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  packagePlan PackagePlan? @relation(fields: [packagePlanId], references: [id], onDelete: Cascade)
+  bindings    AffBinding[]
+  mailSubscriptionBindings MailSubscriptionAffBinding[]
+  logs        AffLog[]
+
+  @@unique([userId, packagePlanId]) // 每用户每方案仅一个优惠码（包括全局码：packagePlanId=null时每用户最多一个）
+  @@index([userId])
+  @@index([packagePlanId])
+  @@map("aff_codes")
+}
+
+// 实例与优惠码永久绑定
+model AffBinding {
+  id          Int      @id @default(autoincrement())
+  instanceId  Int      @unique @map("instance_id")  // 一个实例只能绑定一个优惠码
+  affCodeId   Int      @map("aff_code_id")
+  createdAt   DateTime @default(now()) @map("created_at")
+
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+  affCode  AffCode  @relation(fields: [affCodeId], references: [id], onDelete: Cascade)
+
+  @@index([affCodeId])
+  @@map("aff_bindings")
+}
+
+// 邮箱订阅与优惠码永久绑定
+model MailSubscriptionAffBinding {
+  id                 Int      @id @default(autoincrement())
+  mailSubscriptionId Int      @unique @map("mail_subscription_id")
+  affCodeId          Int      @map("aff_code_id")
+  createdAt          DateTime @default(now()) @map("created_at")
+
+  mailSubscription MailSubscription @relation(fields: [mailSubscriptionId], references: [id], onDelete: Cascade)
+  affCode          AffCode          @relation(fields: [affCodeId], references: [id], onDelete: Cascade)
+
+  @@index([affCodeId])
+  @@map("mail_subscription_aff_bindings")
+}
+
+// AFF余额变动日志
+model AffLog {
+  id                   Int        @id @default(autoincrement())
+  userId               Int        @map("user_id")                // 收益用户
+  affCodeId            Int?       @map("aff_code_id")            // 关联优惠码
+  instanceId           Int?       @map("instance_id")            // 关联实例
+  mailSubscriptionId   Int?       @map("mail_subscription_id")   // 关联邮箱订阅
+  type                 AffLogType
+  amount               Decimal    @db.Decimal(10, 2)             // 正数=收入，负数=转出
+  originalAmount       Decimal?   @map("original_amount") @db.Decimal(10, 2) // 原始订单金额
+  balanceBefore        Decimal    @map("balance_before") @db.Decimal(10, 2)
+  balanceAfter         Decimal    @map("balance_after") @db.Decimal(10, 2)
+  remark               String?
+  createdAt            DateTime   @default(now()) @map("created_at")
+
+  user             User              @relation(fields: [userId], references: [id], onDelete: Cascade)
+  affCode          AffCode?          @relation(fields: [affCodeId], references: [id], onDelete: SetNull)
+  mailSubscription MailSubscription? @relation(fields: [mailSubscriptionId], references: [id], onDelete: SetNull)
+
+  @@index([userId, createdAt(sort: Desc)])
+  @@index([affCodeId])
+  @@index([mailSubscriptionId])
+  @@map("aff_logs")
+}
+
+// AFF余额转化申请
+model AffWithdrawal {
+  id            Int                 @id @default(autoincrement())
+  userId        Int                 @map("user_id")
+  amount        Decimal             @db.Decimal(10, 2)  // 申请转化金额
+  status        AffWithdrawalStatus @default(pending)
+  rejectReason  String?             @map("reject_reason")
+  reviewedBy    Int?                @map("reviewed_by")  // 审核管理员ID
+  reviewedAt    DateTime?           @map("reviewed_at")
+  createdAt     DateTime            @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, status])
+  @@index([status, createdAt])
+  @@map("aff_withdrawals")
+}
+
+// ==================== 积分系统模型 ====================
+
+// 积分日志类型
+enum PointsLogType {
+  convert       // 消费兑换
+  lottery_win   // 抽奖获得
+  lottery_spend // 抽奖消耗
+  admin_adjust  // 管理员调整
+  checkin       // 签到奖励
+  badge_draw_spend   // 徽章随机抽取消耗
+  badge_select_spend // 徽章自选消耗
+  invite_generate    // 生成邀请码消耗
+  vip_benefit        // VIP福利领取
+}
+
+enum UserBadgeSource {
+  draw
+  lottery
+  select
+  admin_grant
+}
+
+enum BadgeApplicationTarget {
+  avatar
+  instance
+}
+
+// 用户积分表
+model UserPoints {
+  userId            Int       @id @map("user_id")              // user_id 是主键
+  points            Int       @default(0)                      // 当前积分
+  totalEarned       Int       @default(0) @map("total_earned") // 累计获得
+  totalSpent        Int       @default(0) @map("total_spent")  // 累计消耗
+  lastConvertedAt   DateTime? @map("last_converted_at")        // 上次兑换时间
+  convertedConsume  Decimal   @default(0) @db.Decimal(10, 2) @map("converted_consume") // 已兑换的消费金额
+  createdAt         DateTime  @default(now()) @map("created_at")
+  updatedAt         DateTime  @updatedAt @map("updated_at")
+
+  user              User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("user_points")
+}
+
+// 积分变动日志
+model PointsLog {
+  id           Int           @id @default(autoincrement())
+  userId       Int           @map("user_id")
+  type         PointsLogType
+  amount       Int                                                   // 变动数量（正数为获得，负数为消耗）
+  pointsBefore Int           @map("points_before")
+  pointsAfter  Int           @map("points_after")
+  relatedId    Int?          @map("related_id")                      // 关联ID（抽奖记录ID等）
+  remark       String?
+  createdAt    DateTime      @default(now()) @map("created_at")
+
+  user         User          @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, createdAt(sort: Desc)])
+  @@map("points_logs")
+}
+
+model BadgeSeries {
+  id            String   @id
+  title         String
+  nameZh        String   @map("name_zh")
+  nameEn        String?  @map("name_en")
+  description   String
+  sourceId      String?  @map("source_id")
+  sourceLabel   String?  @map("source_label")
+  displayOrder  Int      @default(0) @map("display_order")
+  isActive      Boolean  @default(true) @map("is_active")
+  createdAt     DateTime @default(now()) @map("created_at")
+  updatedAt     DateTime @updatedAt @map("updated_at")
+
+  badges Badge[]
+
+  @@index([displayOrder])
+  @@index([isActive])
+  @@map("badge_series")
+}
+
+model Badge {
+  id            String   @id
+  name          String
+  nameEn        String?  @map("name_en")
+  fullLabel     String   @map("full_label")
+  seriesId      String   @map("series_id")
+  sourceId      String?  @map("source_id")
+  sourceLabel   String?  @map("source_label")
+  assetUrl      String   @map("asset_url")
+  assetUrlDark  String?  @map("asset_url_dark")
+  assetUrlLight String?  @map("asset_url_light")
+  displayOrder  Int      @default(0) @map("display_order")
+  isActive      Boolean  @default(true) @map("is_active")
+  createdAt     DateTime @default(now()) @map("created_at")
+  updatedAt     DateTime @updatedAt @map("updated_at")
+
+  series             BadgeSeries          @relation(fields: [seriesId], references: [id], onDelete: Restrict)
+
+  @@index([seriesId, displayOrder])
+  @@index([isActive])
+  @@map("badges")
+}
+
+model UserBadgeOwnership {
+  id                Int                     @id @default(autoincrement())
+  userId            Int                     @map("user_id")
+  badgeId           String                  @map("badge_id")
+  source            UserBadgeSource         @default(draw)
+  applicationTarget BadgeApplicationTarget? @map("application_target")
+  appliedInstanceId Int?                    @map("applied_instance_id")
+  appliedAt         DateTime?               @map("applied_at")
+  createdAt         DateTime                @default(now()) @map("created_at")
+  updatedAt         DateTime                @updatedAt @map("updated_at")
+
+  user            User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  appliedInstance Instance? @relation("InstanceAppliedBadgeOwnerships", fields: [appliedInstanceId], references: [id], onDelete: SetNull)
+
+  @@index([userId, createdAt(sort: Desc)])
+  @@index([userId, badgeId])
+  @@index([userId, applicationTarget])
+  @@index([appliedInstanceId])
+  @@map("user_badge_ownerships")
+}
+
+// ==================== 抽奖系统模型 ====================
+
+// 奖品类型
+enum LotteryPrizeType {
+  nothing   // 再接再历
+  points    // 积分奖励
+  balance   // 余额奖励
+  badge     // 随机徽章奖励
+  instance  // 实例奖励（需手动发放）
+  cpu       // CPU资源（存入资源池）
+  memory    // 内存资源（存入资源池）
+  disk      // 硬盘资源（存入资源池）
+  traffic   // 流量资源（存入资源池）
+}
+
+// 中奖记录状态
+enum LotteryRecordStatus {
+  pending   // 待发放（仅实例奖励）
+  delivered // 已发放
+  claimed   // 已领取（用户提交工单后）
+}
+
+// 抽奖活动
+model Lottery {
+  id              Int       @id @default(autoincrement())
+  name            String                                             // 抽奖名称
+  description     String?                                            // 描述
+  costPoints      Int       @map("cost_points")                      // 每次抽奖消耗积分
+  isActive        Boolean   @default(true) @map("is_active")         // 是否启用
+  startAt         DateTime? @map("start_at")                         // 开始时间（可选）
+  endAt           DateTime? @map("end_at")                           // 结束时间（可选）
+  totalDraws      Int       @default(0) @map("total_draws")          // 总抽奖次数
+  createdAt       DateTime  @default(now()) @map("created_at")
+  updatedAt       DateTime  @updatedAt @map("updated_at")
+  createdBy       Int       @map("created_by")                       // 创建者管理员ID
+
+  prizes             LotteryPrize[]
+  records            LotteryRecord[]
+  notificationConfig LotteryNotificationConfig?
+
+  @@map("lotteries")
+}
+
+// 抽奖奖品
+model LotteryPrize {
+  id              Int              @id @default(autoincrement())
+  lotteryId       Int              @map("lottery_id")
+  name            String                                             // 奖品名称
+  type            LotteryPrizeType                                   // 奖品类型
+  value           Int              @default(0)                       // 奖品值（积分数/余额分/实例配置ID）
+  probability     Decimal          @db.Decimal(5, 2)                 // 中奖概率（百分比，如 30.00 表示 30%）
+  totalQuantity   Int?             @map("total_quantity")            // 总数量（null表示无限）
+  remainQuantity  Int?             @map("remain_quantity")           // 剩余数量
+  displayOrder    Int              @default(0) @map("display_order") // 显示顺序
+  createdAt       DateTime         @default(now()) @map("created_at")
+
+  // 实例奖励专用字段
+  instanceDesc    String?          @map("instance_desc")             // 实例描述（如：1核1G 30天）
+
+  lottery         Lottery          @relation(fields: [lotteryId], references: [id], onDelete: Cascade)
+  records         LotteryRecord[]
+
+  @@index([lotteryId])
+  @@map("lottery_prizes")
+}
+
+// 中奖记录
+model LotteryRecord {
+  id               Int                 @id @default(autoincrement())
+  lotteryId        Int                 @map("lottery_id")
+  prizeId          Int                 @map("prize_id")
+  userId           Int                 @map("user_id")
+  prizeType        LotteryPrizeType    @map("prize_type")
+  prizeValue       Int                 @map("prize_value")            // 中奖时的奖品值（快照）
+  prizeName        String              @map("prize_name")             // 中奖时的奖品名称（快照）
+  status           LotteryRecordStatus @default(delivered)
+  pointsSpent      Int                 @map("points_spent")           // 消耗的积分
+  deliveredAt      DateTime?           @map("delivered_at")           // 发放时间
+  deliveredBy      Int?                @map("delivered_by")           // 发放管理员（实例奖励）
+  ticketId         Int?                @map("ticket_id")              // 关联工单ID（实例奖励）
+  notificationSent Boolean             @default(false) @map("notification_sent")
+  createdAt        DateTime            @default(now()) @map("created_at")
+
+  lottery Lottery      @relation(fields: [lotteryId], references: [id], onDelete: Cascade)
+  prize   LotteryPrize @relation(fields: [prizeId], references: [id], onDelete: Cascade)
+  user    User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, createdAt(sort: Desc)])
+  @@index([lotteryId])
+  @@index([status])
+  @@map("lottery_records")
+}
+
+// 抽奖通知配置（管理员为抽奖配置的通知渠道）
+model LotteryNotificationConfig {
+  id              Int      @id @default(autoincrement())
+  lotteryId       Int      @unique @map("lottery_id")
+  enabled         Boolean  @default(true)
+
+  // 通知方式配置（与现有通知渠道类型一致）
+  type            String                                             // telegram, discord, webhook
+  config          Json                                               // { botToken, chatId } 或 { webhookUrl } 等
+
+  // 通知条件
+  notifyBalance   Boolean  @default(true) @map("notify_balance")     // 余额中奖通知
+  notifyInstance  Boolean  @default(true) @map("notify_instance")    // 实例中奖通知
+  // 注意：积分中奖不通知
+
+  createdAt       DateTime @default(now()) @map("created_at")
+  updatedAt       DateTime @updatedAt @map("updated_at")
+
+  lottery         Lottery  @relation(fields: [lotteryId], references: [id], onDelete: Cascade)
+
+  @@map("lottery_notification_configs")
+}
+
+// ==================== 用户资源池系统 ====================
+
+// 资源池操作类型枚举
+enum ResourcePoolAction {
+  checkin       // 签到获得
+  redeem        // 兑换码兑换
+  admin_grant   // 管理员赠送
+  system_grant  // 系统活动奖励
+  lottery       // 抽奖获得
+  apply         // 应用到实例
+  system_redeem // 系统h-兑换码兑换
+}
+
+// 用户资源池
+model UserResourcePool {
+  id        Int      @id @default(autoincrement())
+  userId    Int      @unique @map("user_id")
+  cpu       Int      @default(0)  // CPU额度 (%)
+  memory    Int      @default(0)  // 内存额度 (MB)
+  disk      Int      @default(0)  // 硬盘额度 (MB)
+  traffic   BigInt   @default(0)  // 流量额度 (GB)
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@map("user_resource_pools")
+}
+
+// 资源池变动记录
+model ResourcePoolLog {
+  id           Int                @id @default(autoincrement())
+  userId       Int                @map("user_id")
+  action       ResourcePoolAction
+  resourceType RedeemCodeType     @map("resource_type") // c/r/d/t
+  amount       Int                // 正数=获得，负数=消耗
+  instanceId   Int?               @map("instance_id")   // 应用到的实例
+  remark       String?
+  createdAt    DateTime           @default(now()) @map("created_at")
+
+  user     User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  instance Instance? @relation(fields: [instanceId], references: [id], onDelete: SetNull)
+
+  @@index([userId])
+  @@index([userId, action])
+  @@map("resource_pool_logs")
+}
+
+// 用户实例销毁记录
+model UserDestroyRecord {
+  id           Int      @id @default(autoincrement())
+  userId       Int      @map("user_id")
+  hostId       Int      @map("host_id")       // 节点ID（用于90天节点冷却期）
+  instanceId   Int      @map("instance_id")   // 被销毁的实例ID
+  instanceName String   @map("instance_name") // 实例名称（备份，因实例已删除）
+  destroyedAt  DateTime @default(now()) @map("destroyed_at")
+  refundAmount Decimal  @db.Decimal(10, 2) @map("refund_amount") // 实际退款金额
+  feeAmount    Decimal  @db.Decimal(10, 2) @map("fee_amount")    // 手续费金额
+  isFirstTime  Boolean  @map("is_first_time") // 是否首次销毁（首次免手续费）
+
+  user     User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  host     Host     @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  instance Instance @relation(fields: [instanceId], references: [id], onDelete: Cascade)
+
+  @@unique([instanceId])
+  @@index([userId])
+  @@index([userId, hostId])
+  @@map("user_destroy_records")
+}
+
+// ==================== 托管余额系统模型 ====================
+
+enum HostingBalanceType {
+  income    // 收入（用户购买/续费）
+  unfreeze  // 解冻
+  withdraw  // 提现
+  deduction // 扣除（用户销毁托管实例）
+}
+
+// 托管收支操作类型（用于区分具体操作）
+enum HostingActionType {
+  purchase     // 用户开通实例
+  renew        // 用户续费实例
+  upgrade      // 用户升级方案
+  destroy      // 用户销毁实例
+  unfreeze     // 自动解冻
+  withdraw     // 提现
+  admin_adjust // 管理员调整
+}
+
+enum WithdrawalStatus {
+  pending   // 待审核
+  approved  // 已通过
+  rejected  // 已拒绝
+  completed // 已完成
+}
+
+enum WithdrawalTarget {
+  balance // 提现到面板余额
+  usdt    // 提现到USDT
+}
+
+// ==================== 域名邮箱模块 ====================
+
+// 域名验证状态
+enum MailDomainStatus {
+  pending   // 等待 DNS 验证
+  verified  // 已验证
+  suspended // 已暂停
+}
+
+// 邮箱订阅状态
+enum MailSubscriptionStatus {
+  active    // 正常
+  expired   // 已过期
+  suspended // 已暂停
+}
+
+// 计费周期
+enum MailBillingCycle {
+  monthly // 月付
+  yearly  // 年付
+}
+
+// 邮箱源（数据中心）
+model MailSource {
+  id            Int      @id @default(autoincrement())
+  name          String   // 名称，如"美国拉斯维加斯"
+  code          String   @unique // 地区代码，如"us"
+  apiUrl        String   @map("api_url")      // CraneMail Reseller API 地址
+  apiKey        String   @map("api_key")      // CraneMail Reseller API Key
+  smarterMailUrl String  @map("smartermail_url") // SmarterMail API 地址
+  enabled       Boolean  @default(true)
+  sortOrder     Int      @default(0) @map("sort_order")
+  createdAt     DateTime @default(now()) @map("created_at")
+  updatedAt     DateTime @updatedAt @map("updated_at")
+
+  plans         MailPlan[]
+  subscriptions MailSubscription[]
+  domains       MailDomain[]
+
+  @@map("mail_sources")
+}
+
+// 套餐方案
+model MailPlan {
+  id            Int              @id @default(autoincrement())
+  sourceId      Int              @map("source_id")
+  name          String           // 方案名称，如"基础版"
+  description   String?          // 方案描述
+  domainLimit   Int              @map("domain_limit")  // 主域名数量限制
+  diskLimitGb   Int              @map("disk_limit_gb") // 存储空间 GB
+  billingCycle  MailBillingCycle @map("billing_cycle") // 计费周期
+  price         Decimal          @db.Decimal(10, 2)    // 价格
+  enabled       Boolean          @default(true)
+  sortOrder     Int              @default(0) @map("sort_order")
+  createdAt     DateTime         @default(now()) @map("created_at")
+  updatedAt     DateTime         @updatedAt @map("updated_at")
+
+  source        MailSource       @relation(fields: [sourceId], references: [id], onDelete: Cascade)
+  subscriptions MailSubscription[]
+
+  @@index([sourceId, enabled])
+  @@map("mail_plans")
+}
+
+// 用户订阅
+model MailSubscription {
+  id           Int                    @id @default(autoincrement())
+  userId       Int                    @map("user_id")
+  sourceId     Int                    @map("source_id")
+  planId       Int                    @map("plan_id")
+  status       MailSubscriptionStatus @default(active)
+  domainLimit  Int                    @map("domain_limit")  // 冗余存储购买时的限制
+  diskLimitGb  Int                    @map("disk_limit_gb") // 冗余存储购买时的限制
+  expiresAt    DateTime               @map("expires_at")
+  autoRenew    Boolean                @default(false) @map("auto_renew")
+  createdAt    DateTime               @default(now()) @map("created_at")
+  updatedAt    DateTime               @updatedAt @map("updated_at")
+
+  user         User                   @relation(fields: [userId], references: [id], onDelete: Cascade)
+  source       MailSource             @relation(fields: [sourceId], references: [id], onDelete: Cascade)
+  plan         MailPlan               @relation(fields: [planId], references: [id], onDelete: Cascade)
+  domains      MailDomain[]
+  affBinding   MailSubscriptionAffBinding?
+  affLogs      AffLog[]
+
+  @@index([userId, status])
+  @@index([expiresAt])
+  @@map("mail_subscriptions")
+}
+
+// 域名
+model MailDomain {
+  id             Int              @id @default(autoincrement())
+  subscriptionId Int              @map("subscription_id")
+  sourceId       Int              @map("source_id")
+  domain         String           // 域名
+  status         MailDomainStatus @default(pending)
+  adminUsername  String?          @map("admin_username") // CraneMail 返回的管理员账号
+  adminPassword  String?          @map("admin_password") // CraneMail 返回的管理员密码（加密存储）
+  diskUsedMb     Int              @default(0) @map("disk_used_mb") // 已用空间 MB
+  verifiedAt     DateTime?        @map("verified_at")
+  createdAt      DateTime         @default(now()) @map("created_at")
+  updatedAt      DateTime         @updatedAt @map("updated_at")
+
+  subscription   MailSubscription @relation(fields: [subscriptionId], references: [id], onDelete: Cascade)
+  source         MailSource       @relation(fields: [sourceId], references: [id], onDelete: Cascade)
+  accounts       MailAccount[]
+
+  @@unique([domain, sourceId])
+  @@index([subscriptionId])
+  @@map("mail_domains")
+}
+
+// 邮箱账户
+model MailAccount {
+  id          Int         @id @default(autoincrement())
+  domainId    Int         @map("domain_id")
+  email       String      // 完整邮箱地址
+  username    String      // 用户名部分 (@ 前面)
+  displayName String?     @map("display_name") // 显示名称
+  diskLimitMb Int         @default(2048) @map("disk_limit_mb") // 邮箱容量 MB
+  diskUsedMb  Int         @default(0) @map("disk_used_mb")     // 已用空间 MB
+  isAdmin     Boolean     @default(false) @map("is_admin")     // 是否为域管理员
+  createdAt   DateTime    @default(now()) @map("created_at")
+  updatedAt   DateTime    @updatedAt @map("updated_at")
+
+  domain      MailDomain  @relation(fields: [domainId], references: [id], onDelete: Cascade)
+
+  @@unique([domainId, username])
+  @@index([domainId])
+  @@map("mail_accounts")
+}
+
+// 托管余额变动日志
+model HostingBalanceLog {
+  id         Int                 @id @default(autoincrement())
+  userId     Int                 @map("user_id")
+  type       HostingBalanceType
+  actionType HostingActionType?  @map("action_type") // 具体操作类型（开通/续费/升级/销毁等）
+  amount     Decimal             @db.Decimal(10, 2) // 金额（正数）
+  frozen     Boolean             @default(true)     // 是否冻结状态
+  unfreezeAt DateTime?           @map("unfreeze_at") // 解冻时间
+  relatedId  Int?                @map("related_id") // 关联ID（实例ID/提现ID）
+  remark     String?
+
+  // Snapshot fields for data persistence
+  snapshotBuyerName    String?   @map("snapshot_buyer_name")
+  snapshotBuyerEmail   String?   @map("snapshot_buyer_email")
+  snapshotBuyerAvatar  String?   @map("snapshot_buyer_avatar")
+  snapshotInstanceName String?   @map("snapshot_instance_name")
+  snapshotHostName     String?   @map("snapshot_host_name")
+  snapshotPackageName  String?   @map("snapshot_package_name")
+  snapshotPlanName     String?   @map("snapshot_plan_name")
+
+  createdAt  DateTime            @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, frozen])
+  @@index([unfreezeAt])
+  @@map("hosting_balance_logs")
+}
+
+// 托管余额提现记录
+model HostingWithdrawal {
+  id           Int              @id @default(autoincrement())
+  userId       Int              @map("user_id")
+  amount       Decimal          @db.Decimal(10, 2) // 提现金额
+  feeRate      Decimal          @map("fee_rate") @db.Decimal(5, 4)  // 手续费率（如 0.1000 表示 10%）
+  feeAmount    Decimal          @map("fee_amount") @db.Decimal(10, 2) // 手续费金额
+  actualAmount Decimal          @map("actual_amount") @db.Decimal(10, 2) // 实际到账金额
+  target       WithdrawalTarget
+  usdtAddress  String?          @map("usdt_address") // USDT地址（仅USDT提现）
+  status       WithdrawalStatus @default(pending)
+  rejectReason String?          @map("reject_reason")
+  processedAt  DateTime?        @map("processed_at")
+  processedBy  Int?             @map("processed_by") // 处理的管理员ID
+  createdAt    DateTime         @default(now()) @map("created_at")
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId, status])
+  @@map("hosting_withdrawals")
+}
+
+// 托管用户拉黑关系
+model HostingUserBlock {
+  id            Int      @id @default(autoincrement())
+  blockerId     Int      @map("blocker_id") // 托管用户
+  blockedUserId Int      @map("blocked_user_id") // 被拉黑用户
+  remark        String?
+  createdAt     DateTime @default(now()) @map("created_at")
+
+  blocker     User @relation("HostingBlocker", fields: [blockerId], references: [id], onDelete: Cascade)
+  blockedUser User @relation("HostingBlockedUser", fields: [blockedUserId], references: [id], onDelete: Cascade)
+
+  @@unique([blockerId, blockedUserId])
+  @@index([blockedUserId])
+  @@index([blockerId])
+  @@map("hosting_user_blocks")
+}
+
+// 托管专区机主
+model HostingZone {
+  id        Int      @id @default(autoincrement())
+  name      String
+  ownerId   Int      @unique @map("owner_id")
+  logoUrl   String   @map("logo_url") @db.Text
+  sortOrder Int      @default(0) @map("sort_order")
+  active    Boolean  @default(true)
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  owner User @relation("HostingZoneOwner", fields: [ownerId], references: [id], onDelete: Cascade)
+
+  @@index([active, sortOrder])
+  @@map("hosting_zones")
+}
diff --git a/server/scripts/backfill-instance-network-addresses.ts b/server/scripts/backfill-instance-network-addresses.ts
new file mode 100644
index 0000000..902b2b7
--- /dev/null
+++ b/server/scripts/backfill-instance-network-addresses.ts
@@ -0,0 +1,164 @@
+import * as db from '../src/db/index.js'
+import { prisma } from '../src/db/prisma.js'
+import { getIncusClient, getInstance, getInstanceState } from '../src/lib/incus/index.js'
+import {
+  persistResolvedInstanceNetworkAddresses,
+  resolveInstanceNetworkAddresses,
+  type IncusNetworkStateLike
+} from '../src/lib/instance-network-sync.js'
+
+function parseArgs(argv: string[]): { dryRun: boolean; hostId: number | null } {
+  let dryRun = false
+  let hostId: number | null = null
+
+  for (const arg of argv) {
+    if (arg === '--dry-run') {
+      dryRun = true
+      continue
+    }
+
+    if (arg.startsWith('--host-id=')) {
+      const value = Number(arg.slice('--host-id='.length))
+      if (!Number.isNaN(value)) {
+        hostId = value
+      }
+    }
+  }
+
+  return { dryRun, hostId }
+}
+
+async function main(): Promise<void> {
+  const { dryRun, hostId } = parseArgs(process.argv.slice(2))
+
+  const allHosts = await db.getAllHosts()
+  const hosts = allHosts.filter(host => host.status !== 'offline' && (hostId === null || host.id === hostId))
+
+  if (hosts.length === 0) {
+    console.log('[BackfillInstanceNetwork] No matching online hosts found')
+    return
+  }
+
+  let scanned = 0
+  let changedInstances = 0
+  let ipv4ChangedCount = 0
+  let ipv6ChangedCount = 0
+  let failed = 0
+
+  console.log(`[BackfillInstanceNetwork] Starting${dryRun ? ' dry-run' : ''} for ${hosts.length} host(s)`)
+
+  for (const host of hosts) {
+    console.log(`[BackfillInstanceNetwork] Host #${host.id} ${host.name}`)
+
+    let client: Awaited<ReturnType<typeof getIncusClient>>
+    try {
+      client = await getIncusClient(host)
+    } catch (error) {
+      failed++
+      const message = error instanceof Error ? error.message : String(error)
+      console.error(`[BackfillInstanceNetwork] Failed to connect host #${host.id}: ${message}`)
+      continue
+    }
+
+    const instances = await prisma.instance.findMany({
+      where: {
+        hostId: host.id,
+        status: { notIn: ['deleted', 'creating'] }
+      },
+      orderBy: { id: 'asc' },
+      select: {
+        id: true,
+        name: true,
+        incusId: true,
+        networkMode: true,
+        ipv4: true,
+        ipv6: true
+      }
+    })
+
+    for (const instance of instances) {
+      scanned++
+
+      try {
+        const incusInstance = await getInstance(client, instance.incusId)
+
+        let state: IncusNetworkStateLike | null = null
+        try {
+          state = await getInstanceState(client, instance.incusId) as IncusNetworkStateLike
+        } catch {
+          state = null
+        }
+
+        const resolved = resolveInstanceNetworkAddresses(
+          {
+            id: instance.id,
+            name: instance.name,
+            networkMode: instance.networkMode,
+            ipv4: instance.ipv4,
+            ipv6: instance.ipv6
+          },
+          incusInstance,
+          state
+        )
+
+        const ipv4WillChange = (instance.ipv4 ?? null) !== (resolved.ipv4 ?? null)
+        const ipv6WillChange = (instance.ipv6 ?? null) !== (resolved.ipv6 ?? null)
+
+        if (!ipv4WillChange && !ipv6WillChange) {
+          continue
+        }
+
+        changedInstances++
+        if (ipv4WillChange) ipv4ChangedCount++
+        if (ipv6WillChange) ipv6ChangedCount++
+
+        if (dryRun) {
+          console.log(
+            `[BackfillInstanceNetwork] DRY-RUN instance #${instance.id} ${instance.name}: `
+            + `ipv4 ${instance.ipv4 ?? '-'} -> ${resolved.ipv4 ?? '-'}, `
+            + `ipv6 ${instance.ipv6 ?? '-'} -> ${resolved.ipv6 ?? '-'}`
+          )
+          continue
+        }
+
+        const persisted = await persistResolvedInstanceNetworkAddresses(
+          {
+            id: instance.id,
+            name: instance.name,
+            networkMode: instance.networkMode,
+            ipv4: instance.ipv4,
+            ipv6: instance.ipv6
+          },
+          resolved,
+          { updateLastSyncedAt: true }
+        )
+
+        console.log(
+          `[BackfillInstanceNetwork] Updated instance #${instance.id} ${instance.name}: `
+          + `ipv4 ${persisted.oldIpv4 ?? '-'} -> ${persisted.newIpv4 ?? '-'}, `
+          + `ipv6 ${persisted.oldIpv6 ?? '-'} -> ${persisted.newIpv6 ?? '-'}`
+        )
+      } catch (error) {
+        failed++
+        const message = error instanceof Error ? error.message : String(error)
+        console.error(`[BackfillInstanceNetwork] Failed instance #${instance.id} ${instance.name}: ${message}`)
+      }
+    }
+  }
+
+  console.log(
+    `[BackfillInstanceNetwork] Completed${dryRun ? ' dry-run' : ''}: `
+    + `scanned=${scanned}, changed=${changedInstances}, `
+    + `ipv4Changed=${ipv4ChangedCount}, ipv6Changed=${ipv6ChangedCount}, failed=${failed}`
+  )
+}
+
+main()
+  .catch(error => {
+    const message = error instanceof Error ? error.stack || error.message : String(error)
+    console.error(`[BackfillInstanceNetwork] Fatal error: ${message}`)
+    process.exitCode = 1
+  })
+  .finally(async () => {
+    await prisma.$disconnect()
+  })
diff --git a/server/scripts/fix-migrated-instance-billing.ts b/server/scripts/fix-migrated-instance-billing.ts
new file mode 100644
index 0000000..6c9aa13
--- /dev/null
+++ b/server/scripts/fix-migrated-instance-billing.ts
@@ -0,0 +1,122 @@
+import 'dotenv/config'
+
+import { prisma } from '../src/db/prisma.js'
+import { getInstanceBillingLineageIds, reassignInstanceBillingRecords } from '../src/db/billing-records.js'
+
+type MigrationMessageData = {
+  instanceId?: unknown
+}
+
+function isInteger(value: unknown): value is number {
+  return typeof value === 'number' && Number.isInteger(value)
+}
+
+async function countBillingRecords(instanceId: number): Promise<number> {
+  return prisma.instanceBillingRecord.count({
+    where: { instanceId }
+  })
+}
+
+async function main(): Promise<void> {
+  const apply = process.argv.includes('--apply')
+  const limitArg = process.argv.find(arg => arg.startsWith('--limit='))
+  const limit = limitArg ? Number(limitArg.split('=')[1]) : null
+
+  if (limitArg && (!Number.isInteger(limit) || Number(limit) <= 0)) {
+    throw new Error('参数 --limit 必须是正整数')
+  }
+
+  const migrationMessages = await prisma.inboxMessage.findMany({
+    where: {
+      eventType: 'instance_migrated'
+    },
+    orderBy: { createdAt: 'asc' },
+    ...(limit ? { take: limit } : {})
+  })
+
+  let scanned = 0
+  let eligible = 0
+  let movedRecords = 0
+  let unresolved = 0
+  let skipped = 0
+  const processedTargetIds = new Set<number>()
+
+  console.log(`[FixMigratedInstanceBilling] mode=${apply ? 'apply' : 'dry-run'}, messages=${migrationMessages.length}`)
+
+  for (const message of migrationMessages) {
+    scanned += 1
+
+    const data = (message.data || {}) as MigrationMessageData
+    if (!isInteger(data.instanceId)) {
+      skipped += 1
+      console.log(`[Skip] inboxMessage=${message.id} 原始数据缺失 newInstanceId`)
+      continue
+    }
+
+    if (processedTargetIds.has(data.instanceId)) {
+      skipped += 1
+      console.log(`[Skip] inboxMessage=${message.id} 目标实例 ${data.instanceId} 已处理过`)
+      continue
+    }
+
+    const newInstance = await prisma.instance.findFirst({
+      where: {
+        id: data.instanceId,
+        userId: message.userId
+      },
+      select: { id: true }
+    })
+
+    if (!newInstance) {
+      skipped += 1
+      console.log(`[Skip] inboxMessage=${message.id} 找不到目标实例 newInstanceId=${data.instanceId}`)
+      continue
+    }
+
+    processedTargetIds.add(newInstance.id)
+
+    const lineage = await getInstanceBillingLineageIds(newInstance.id)
+    const sourceInstanceIds = lineage.slice(0, -1)
+
+    if (sourceInstanceIds.length === 0) {
+      unresolved += 1
+      console.log(`[Unresolved] inboxMessage=${message.id} newInstance=${newInstance.id} 未解析到历史实例`)
+      continue
+    }
+
+    const sourceSummaries = await Promise.all(sourceInstanceIds.map(async sourceInstanceId => ({
+      sourceInstanceId,
+      billingRecordCount: await countBillingRecords(sourceInstanceId)
+    })))
+
+    eligible += 1
+    console.log(
+      `[Match] inboxMessage=${message.id} lineage=${lineage.join(' -> ')} ` +
+      `sources=${sourceSummaries.map(item => `${item.sourceInstanceId}(records=${item.billingRecordCount})`).join(', ')}`
+    )
+
+    if (!apply) {
+      continue
+    }
+
+    const moved = await prisma.$transaction(async tx => {
+      let totalMoved = 0
+      for (const sourceInstanceId of sourceInstanceIds) {
+        totalMoved += await reassignInstanceBillingRecords(sourceInstanceId, newInstance.id, tx)
+      }
+      return totalMoved
+    })
+
+    movedRecords += moved
+  }
+
+  console.log(`[Summary] scanned=${scanned}, eligible=${eligible}, movedRecords=${movedRecords}, unresolved=${unresolved}, skipped=${skipped}`)
+
+  await prisma.$disconnect()
+}
+
+void main().catch(async error => {
+  console.error('[FixMigratedInstanceBilling] failed:', error)
+  await prisma.$disconnect()
+  process.exit(1)
+})
diff --git a/server/scripts/seed-bulk-local-data.ts b/server/scripts/seed-bulk-local-data.ts
new file mode 100644
index 0000000..d1c198e
--- /dev/null
+++ b/server/scripts/seed-bulk-local-data.ts
@@ -0,0 +1,1690 @@
+import 'dotenv/config'
+
+// @ts-ignore - bcryptjs ships its own types in this repo setup
+import bcrypt from 'bcryptjs'
+
+import { prisma } from '../src/db/prisma.js'
+
+type SeedRole = 'admin' | 'user'
+type SeedUserStatus = 'active' | 'banned'
+type SeedHostStatus = 'online' | 'offline' | 'maintenance'
+type SeedHostInstanceType = 'container' | 'vm' | 'both'
+type SeedPackageInstanceType = 'container' | 'vm'
+type SeedNetworkMode = 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+type SeedInstanceStatus = 'running' | 'stopped' | 'suspended' | 'error'
+type SeedTrafficStatus = 'NORMAL' | 'WARNING' | 'LIMITED'
+type SeedProtocol = 'tcp' | 'udp'
+type SeedProxyStatus = 'pending' | 'active' | 'error'
+type SeedBackupStatus = 'ready' | 'error'
+type SeedTicketPriority = 'low' | 'normal' | 'high' | 'urgent'
+type SeedTicketStatus = 'open' | 'in_progress' | 'resolved' | 'closed'
+type SeedBalanceLogType = 'recharge' | 'consume' | 'gift' | 'admin_adjust'
+type SeedNotificationChannelType = 'telegram' | 'discord' | 'email' | 'webhook'
+type SeedAnnouncementType = 'system_broadcast' | 'host_broadcast' | 'admin_message' | 'host_message'
+type SeedPaymentProviderType = 'yipay' | 'stripe' | 'alipay_direct' | 'wechat_direct' | 'manual'
+type SeedRechargeStatus = 'pending' | 'paid' | 'completed' | 'failed' | 'cancelled' | 'refunded'
+type SeedAffLogType = 'new_purchase' | 'renew' | 'convert'
+type SeedAffWithdrawalStatus = 'pending' | 'approved' | 'rejected'
+type SeedRedeemCodeType = 'c' | 'r' | 'd' | 't' | 'p'
+
+type SeedQuota = {
+  hostLimit: number
+  packageLimit: number
+  monthlyTrafficLimit: bigint | null
+}
+
+type SeedUserSpec = {
+  username: string
+  email: string
+  role: SeedRole
+  status: SeedUserStatus
+  banReason: string | null
+  avatarStyle: string
+  quota: SeedQuota
+}
+
+type SeedHostSpec = {
+  ownerUsername: string
+  name: string
+  url: string
+  location: string
+  countryCode: string
+  architecture: 'x86_64' | 'aarch64'
+  status: SeedHostStatus
+  instanceType: SeedHostInstanceType
+  natPublicIp: string
+  natPublicIpv6: string
+  natBindIp: string
+  natBindIpv6: string
+  natPortStart: number
+  natPortEnd: number
+  ipAddress: string
+  ipv6Subnet: string
+  ipv6Gateway: string
+  tags: string[]
+  storageSize: number
+  cpuAllowanceMax: number
+  memoryMax: number
+  caddyEnabled: boolean
+}
+
+type SeedStoragePoolSpec = {
+  name: string
+  driver: string
+  purpose: 'instance_data' | 'instance_storage'
+  description: string
+}
+
+type SeedPlanSpec = {
+  name: string
+  description: string
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: bigint
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  setupFee: number
+  isActive: boolean
+  sortOrder: number
+  slaGuarantee: number | null
+}
+
+type SeedPackageSpec = {
+  key: string
+  ownerUsername: string
+  name: string
+  description: string
+  hostNames: string[]
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax: number
+  networkMode: SeedNetworkMode
+  instanceType: SeedPackageInstanceType
+  privileged: boolean
+  nested: boolean
+  active: boolean
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  monthlyTrafficLimit: bigint
+  ioLimitMode: 'throughput' | 'iops'
+  limitsRead: string
+  limitsWrite: string
+  limitsReadIops: number
+  limitsWriteIops: number
+  limitsIngress: string
+  limitsEgress: string
+  limitsProcesses: number
+  limitsCpuPriority: number
+  bootAutostart: boolean
+  bootAutostartPriority: number
+  bootAutostartDelay: number
+  bootHostShutdownTimeout: number
+  globalShared: boolean
+  globalQuotaMultiplier: number | null
+  globalMaxInstances: number | null
+  allowInstanceDeletion: boolean
+  plans: SeedPlanSpec[]
+}
+
+type GeneratedPackageRecord = {
+  id: number
+  spec: SeedPackageSpec
+  planIdsByName: Map<string, number>
+}
+
+type SeedInstanceSpec = {
+  name: string
+  incusId: string
+  userUsername: string
+  packageKey: string
+  planName: string
+  hostName: string
+  image: string
+  status: SeedInstanceStatus
+  createdAt: Date
+  expiresAt: Date | null
+  suspendedAt: Date | null
+  suspendedBy: number | null
+  suspendReason: string | null
+  autoRenew: boolean
+  cloudInitState: string | null
+  cloudInitSource: string | null
+  ipv4: string | null
+  ipv6: string | null
+  sshPort: number | null
+  monthlyTrafficUsed: bigint
+  trafficStatus: SeedTrafficStatus
+  lastIpv6ReassignAt: Date | null
+  lastPlanChangeAt: Date | null
+  lastSyncedAt: Date
+}
+
+type SeedBalanceLogSpec = {
+  userId: number
+  type: SeedBalanceLogType
+  amount: number
+  balanceBefore: number
+  balanceAfter: number
+  orderId: string | null
+  remark: string
+}
+
+type GeneratedInstanceRecord = {
+  id: number
+  userId: number
+  hostId: number
+  packageId: number
+  packagePlanId: number
+  spec: SeedInstanceSpec
+  packageSpec: SeedPackageSpec
+  plan: SeedPlanSpec
+}
+
+type CreatedNotificationChannel = {
+  id: number
+  userId: number
+  type: SeedNotificationChannelType
+}
+
+type CreatedAffCode = {
+  id: number
+  userId: number
+  packagePlanId: number | null
+  code: string
+}
+
+const SEED_PREFIX = 'bulkseed'
+const SEED_MARK = `[${SEED_PREFIX}]`
+const SEED_CODE_PREFIX = SEED_PREFIX.toUpperCase()
+const SHARED_PASSWORD = 'BulkSeed123!'
+const LOCAL_PASSWORD_SALT = '$2a$10$1234567890123456789012'
+const TODAY = new Date()
+
+const avatarStyles = ['bigSmile', 'croodles', 'notionists', 'lorelei']
+const countries = ['us', 'sg', 'jp', 'de', 'nl', 'au']
+const cities = ['Los Angeles', 'Singapore', 'Tokyo', 'Frankfurt', 'Amsterdam', 'Sydney']
+const containerImages = [
+  'images:ubuntu/24.04/cloud',
+  'images:debian/12/cloud',
+  'images:almalinux/9/cloud',
+  'images:rockylinux/9/cloud'
+]
+const vmImages = [
+  'images:ubuntu/24.04/cloud',
+  'images:debian/12/cloud',
+  'images:almalinux/9/cloud'
+]
+const redeemCodeTypes: SeedRedeemCodeType[] = ['c', 'r', 'd', 't', 'p']
+
+const ownerUsers: SeedUserSpec[] = [
+  createOwnerUser(1, 'admin', 'admin', 24, 40),
+  createOwnerUser(2, 'apac', 'user', 18, 32),
+  createOwnerUser(3, 'eu', 'user', 18, 32),
+  createOwnerUser(4, 'us', 'user', 18, 32),
+  createOwnerUser(5, 'edge', 'user', 18, 32),
+  createOwnerUser(6, 'lab', 'user', 18, 32)
+]
+
+const customerUsers: SeedUserSpec[] = Array.from({ length: 30 }, (_, index) => {
+  const id = index + 1
+  const status: SeedUserStatus = id % 17 === 0 ? 'banned' : 'active'
+  return {
+    username: `${SEED_PREFIX}-user-${pad(id, 2)}`,
+    email: `${SEED_PREFIX}-user-${pad(id, 2)}@incudal.local`,
+    role: 'user',
+    status,
+    banReason: status === 'banned' ? `${SEED_MARK} banned sample user` : null,
+    avatarStyle: avatarStyles[index % avatarStyles.length],
+    quota: {
+      hostLimit: 0,
+      packageLimit: 0,
+      monthlyTrafficLimit: bytesFromGb(800)
+    }
+  }
+})
+
+const allSeedUsers = [...ownerUsers, ...customerUsers]
+
+const hostSpecs: SeedHostSpec[] = [
+  createHostSpec(1, ownerUsers[0].username, 'official-us-west', 'Los Angeles, US', 'us', 'x86_64', 'both', 'online'),
+  createHostSpec(2, ownerUsers[0].username, 'official-eu-vm', 'Frankfurt, DE', 'de', 'x86_64', 'vm', 'online'),
+  createHostSpec(3, ownerUsers[1].username, 'apac-sg-edge', 'Singapore, SG', 'sg', 'x86_64', 'both', 'online'),
+  createHostSpec(4, ownerUsers[1].username, 'apac-tokyo-arm', 'Tokyo, JP', 'jp', 'aarch64', 'container', 'online'),
+  createHostSpec(5, ownerUsers[2].username, 'eu-amsterdam', 'Amsterdam, NL', 'nl', 'x86_64', 'both', 'online'),
+  createHostSpec(6, ownerUsers[2].username, 'eu-madrid-vm', 'Madrid, ES', 'us', 'x86_64', 'vm', 'online'),
+  createHostSpec(7, ownerUsers[3].username, 'us-ashburn', 'Ashburn, US', 'us', 'x86_64', 'both', 'online'),
+  createHostSpec(8, ownerUsers[3].username, 'us-dallas-container', 'Dallas, US', 'us', 'x86_64', 'container', 'online'),
+  createHostSpec(9, ownerUsers[4].username, 'edge-seoul', 'Seoul, KR', 'jp', 'aarch64', 'container', 'online'),
+  createHostSpec(10, ownerUsers[4].username, 'edge-sydney', 'Sydney, AU', 'au', 'x86_64', 'both', 'online'),
+  createHostSpec(11, ownerUsers[5].username, 'lab-london', 'London, GB', 'de', 'x86_64', 'both', 'online'),
+  createHostSpec(12, ownerUsers[5].username, 'lab-warsaw-vm', 'Warsaw, PL', 'nl', 'x86_64', 'vm', 'online')
+]
+
+const storagePools: SeedStoragePoolSpec[] = [
+  {
+    name: 'default',
+    driver: 'zfs',
+    purpose: 'instance_data',
+    description: `${SEED_MARK} default pool`
+  },
+  {
+    name: 'archive',
+    driver: 'dir',
+    purpose: 'instance_storage',
+    description: `${SEED_MARK} archive pool`
+  }
+]
+
+const packageSpecs = buildPackageSpecs()
+const instanceSpecs = buildInstanceSpecs(packageSpecs)
+
+function createOwnerUser(index: number, slug: string, role: SeedRole, hostLimit: number, packageLimit: number): SeedUserSpec {
+  return {
+    username: `${SEED_PREFIX}-owner-${slug}`,
+    email: `${SEED_PREFIX}-owner-${slug}@incudal.local`,
+    role,
+    status: 'active',
+    banReason: null,
+    avatarStyle: avatarStyles[(index - 1) % avatarStyles.length],
+    quota: {
+      hostLimit,
+      packageLimit,
+      monthlyTrafficLimit: bytesFromGb(3000)
+    }
+  }
+}
+
+function createHostSpec(
+  index: number,
+  ownerUsername: string,
+  slug: string,
+  location: string,
+  countryCode: string,
+  architecture: 'x86_64' | 'aarch64',
+  instanceType: SeedHostInstanceType,
+  status: SeedHostStatus
+): SeedHostSpec {
+  const natBase = 40 + index
+  const hex = (0x40 + index).toString(16)
+  return {
+    ownerUsername,
+    name: `${SEED_PREFIX}-host-${pad(index, 2)}-${slug}`,
+    url: `https://${SEED_PREFIX}-host-${pad(index, 2)}-${slug}.local`,
+    location,
+    countryCode,
+    architecture,
+    status,
+    instanceType,
+    natPublicIp: `198.51.100.${natBase}`,
+    natPublicIpv6: `2001:db8:feed:${hex}::${index}`,
+    natBindIp: `10.255.${index}.10`,
+    natBindIpv6: `fd00:255:${hex}::10`,
+    natPortStart: 20000 + (index - 1) * 400,
+    natPortEnd: 20000 + (index - 1) * 400 + 399,
+    ipAddress: `10.20.${index}.10`,
+    ipv6Subnet: `2001:db8:${hex}::/64`,
+    ipv6Gateway: `2001:db8:${hex}::1`,
+    tags: [SEED_PREFIX, slug, architecture, instanceType],
+    storageSize: 200 + index * 15,
+    cpuAllowanceMax: 2200 + index * 180,
+    memoryMax: 65536 + index * 4096,
+    caddyEnabled: index % 2 === 0
+  }
+}
+
+function bytesFromGb(gb: number): bigint {
+  return BigInt(gb) * 1024n * 1024n * 1024n
+}
+
+function pad(value: number, digits: number): string {
+  return String(value).padStart(digits, '0')
+}
+
+function daysAgo(days: number, hour = 10): Date {
+  const date = new Date(TODAY)
+  date.setUTCDate(date.getUTCDate() - days)
+  date.setUTCHours(hour, 0, 0, 0)
+  return date
+}
+
+function daysFromNow(days: number, hour = 10): Date {
+  const date = new Date(TODAY)
+  date.setUTCDate(date.getUTCDate() + days)
+  date.setUTCHours(hour, 0, 0, 0)
+  return date
+}
+
+function addMonths(input: Date, months: number): Date {
+  const output = new Date(input)
+  output.setUTCMonth(output.getUTCMonth() + months)
+  return output
+}
+
+function roundToStep(value: number, step: number): number {
+  return Math.max(step, Math.round(value / step) * step)
+}
+
+function getBaseRechargeAmount(user: SeedUserSpec, index: number, spend: number): number {
+  return Math.max(
+    user.role === 'admin' ? 30000 + index * 500 : 9000 + index * 120,
+    spend + 2000 + index * 50
+  )
+}
+
+function getGiftAmount(user: SeedUserSpec, index: number): number {
+  return user.role === 'admin' ? 1500 : 300 + index * 10
+}
+
+function getSeedOrderNo(index: number): string {
+  return `${SEED_PREFIX}-recharge-${pad(index + 1, 3)}`
+}
+
+function buildDemoPublicKey(username: string, index: number): string {
+  const body = Buffer.from(`${SEED_PREFIX}:${username}:${index}`).toString('base64')
+  return `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAI${body.slice(0, 40)} ${username}@seed.local`
+}
+
+function buildDemoFingerprint(username: string, index: number): string {
+  const body = Buffer.from(`${username}:${index}:${SEED_PREFIX}`).toString('base64')
+  return `SHA256:${body.slice(0, 32)}`
+}
+
+function getOwnerHosts(ownerUsername: string): SeedHostSpec[] {
+  return hostSpecs.filter(host => host.ownerUsername === ownerUsername)
+}
+
+function buildPackageSpecs(): SeedPackageSpec[] {
+  const thirdModes: SeedNetworkMode[] = ['nat_ipv6_nat', 'ipv6_only', 'ipv6_nat']
+  const packageList: SeedPackageSpec[] = []
+
+  ownerUsers.forEach((owner, ownerIndex) => {
+    const hosts = getOwnerHosts(owner.username)
+    const containerHosts = hosts.filter(host => host.instanceType !== 'vm')
+    const vmHosts = hosts.filter(host => host.instanceType !== 'container')
+    const cpuBase = 220 + ownerIndex * 20
+    const memoryBase = 8192 + ownerIndex * 1024
+    const diskBase = 102400 + ownerIndex * 10240
+    const thirdMode = thirdModes[ownerIndex % thirdModes.length]
+
+    packageList.push(
+      createPackageSpec({
+        index: packageList.length + 1,
+        ownerUsername: owner.username,
+        suffix: 'nat-box',
+        title: `NAT Box ${ownerIndex + 1}`,
+        description: `${SEED_MARK} public IPv4 NAT container package`,
+        hostNames: uniqueNames(containerHosts.map(host => host.name)),
+        networkMode: 'nat',
+        instanceType: 'container',
+        cpuMax: cpuBase,
+        memoryMax: memoryBase,
+        diskMax: diskBase,
+        bandwidthMax: 1200 + ownerIndex * 120,
+        globalShared: true,
+        portLimit: 24,
+        snapshotLimit: 5,
+        backupLimit: 3,
+        siteLimit: 4,
+        monthlyTrafficLimit: bytesFromGb(480 + ownerIndex * 40),
+        ioLimitMode: ownerIndex % 2 === 0 ? 'throughput' : 'iops',
+        globalQuotaMultiplier: 1.5
+      }),
+      createPackageSpec({
+        index: packageList.length + 2,
+        ownerUsername: owner.username,
+        suffix: 'dual-stack',
+        title: `Dual Stack ${ownerIndex + 1}`,
+        description: `${SEED_MARK} IPv4 NAT + routed IPv6 package`,
+        hostNames: uniqueNames(containerHosts.map(host => host.name)),
+        networkMode: 'nat_ipv6',
+        instanceType: 'container',
+        cpuMax: cpuBase + 30,
+        memoryMax: memoryBase + 1024,
+        diskMax: diskBase + 10240,
+        bandwidthMax: 1400 + ownerIndex * 120,
+        globalShared: ownerIndex % 2 === 0,
+        portLimit: 28,
+        snapshotLimit: 6,
+        backupLimit: 3,
+        siteLimit: 5,
+        monthlyTrafficLimit: bytesFromGb(560 + ownerIndex * 40),
+        ioLimitMode: 'throughput',
+        globalQuotaMultiplier: 1.8
+      }),
+      createPackageSpec({
+        index: packageList.length + 3,
+        ownerUsername: owner.username,
+        suffix: `ipv6-${thirdMode}`,
+        title: `IPv6 Mix ${ownerIndex + 1}`,
+        description: `${SEED_MARK} IPv6-heavy container package`,
+        hostNames: uniqueNames(containerHosts.map(host => host.name)),
+        networkMode: thirdMode,
+        instanceType: 'container',
+        cpuMax: cpuBase + 10,
+        memoryMax: memoryBase + 512,
+        diskMax: diskBase,
+        bandwidthMax: 1000 + ownerIndex * 100,
+        globalShared: true,
+        portLimit: thirdMode === 'ipv6_only' ? 0 : 18,
+        snapshotLimit: 4,
+        backupLimit: 2,
+        siteLimit: 4,
+        monthlyTrafficLimit: bytesFromGb(360 + ownerIndex * 30),
+        ioLimitMode: 'throughput',
+        globalQuotaMultiplier: 1.2
+      }),
+      createPackageSpec({
+        index: packageList.length + 4,
+        ownerUsername: owner.username,
+        suffix: 'vm-flex',
+        title: `VM Flex ${ownerIndex + 1}`,
+        description: `${SEED_MARK} KVM package for billing and lifecycle screens`,
+        hostNames: uniqueNames(vmHosts.map(host => host.name)),
+        networkMode: ownerIndex % 2 === 0 ? 'nat_ipv6' : 'nat',
+        instanceType: 'vm',
+        cpuMax: 300 + ownerIndex * 30,
+        memoryMax: 12288 + ownerIndex * 1024,
+        diskMax: 153600 + ownerIndex * 10240,
+        bandwidthMax: 1800 + ownerIndex * 100,
+        globalShared: ownerIndex % 3 !== 0,
+        portLimit: 10,
+        snapshotLimit: 4,
+        backupLimit: 3,
+        siteLimit: 1,
+        monthlyTrafficLimit: bytesFromGb(700 + ownerIndex * 50),
+        ioLimitMode: 'iops',
+        globalQuotaMultiplier: 1.0
+      })
+    )
+  })
+
+  return packageList
+}
+
+function createPackageSpec(input: {
+  index: number
+  ownerUsername: string
+  suffix: string
+  title: string
+  description: string
+  hostNames: string[]
+  networkMode: SeedNetworkMode
+  instanceType: SeedPackageInstanceType
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax: number
+  globalShared: boolean
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  monthlyTrafficLimit: bigint
+  ioLimitMode: 'throughput' | 'iops'
+  globalQuotaMultiplier: number | null
+}): SeedPackageSpec {
+  const isVm = input.instanceType === 'vm'
+  const key = `${SEED_PREFIX}-pkg-${pad(input.index, 2)}`
+  const planNames = isVm ? ['Starter', 'Business', 'Scale'] : ['Nano', 'Plus', 'Prime']
+  const planScales = isVm ? [0.28, 0.46, 0.68] : [0.18, 0.36, 0.58]
+
+  const plans = planNames.map((planName, index) => {
+    const scale = planScales[index]
+    const baseCpu = roundToStep(input.cpuMax * scale, isVm ? 20 : 5)
+    const baseMemory = roundToStep(input.memoryMax * scale, 256)
+    const baseDisk = roundToStep(input.diskMax * scale, 1024)
+    return {
+      name: planName,
+      description: `${SEED_MARK} ${planName} plan for ${input.title}`,
+      cpu: baseCpu,
+      memory: baseMemory,
+      disk: baseDisk,
+      portLimit: input.networkMode === 'ipv6_only' ? 0 : Math.max(0, Math.min(input.portLimit, 6 + index * (isVm ? 2 : 6))),
+      snapshotLimit: Math.min(input.snapshotLimit, 2 + index),
+      backupLimit: Math.min(input.backupLimit, 1 + Math.floor(index / 1)),
+      siteLimit: isVm ? Math.min(input.siteLimit, index === 2 ? 1 : 0) : Math.min(input.siteLimit, 1 + index * 2),
+      swapSize: isVm ? 0 : index === 0 ? 0 : index * 512,
+      trafficLimit: bytesFromGb((isVm ? 180 : 90) + index * (isVm ? 160 : 80) + input.index * 5),
+      trafficLimitSpeed: ['2Mbit', '5Mbit', '10Mbit'][index],
+      price: (isVm ? 2990 : 890) + input.index * (isVm ? 60 : 25) + index * (isVm ? 1800 : 900),
+      billingCycle: index === 2 && isVm ? 3 : 1,
+      setupFee: isVm ? index * 300 : 0,
+      isActive: true,
+      sortOrder: (index + 1) * 10,
+      slaGuarantee: [99.5, 99.9, 99.95][index]
+    }
+  })
+
+  return {
+    key,
+    ownerUsername: input.ownerUsername,
+    name: `${key}-${input.suffix}`,
+    description: input.description,
+    hostNames: input.hostNames,
+    networkMode: input.networkMode,
+    instanceType: input.instanceType,
+    cpuMax: input.cpuMax,
+    memoryMax: input.memoryMax,
+    diskMax: input.diskMax,
+    bandwidthMax: input.bandwidthMax,
+    privileged: !isVm,
+    nested: !isVm,
+    active: true,
+    portLimit: input.portLimit,
+    snapshotLimit: input.snapshotLimit,
+    backupLimit: input.backupLimit,
+    siteLimit: input.siteLimit,
+    monthlyTrafficLimit: input.monthlyTrafficLimit,
+    ioLimitMode: input.ioLimitMode,
+    limitsRead: isVm ? '350MB' : '220MB',
+    limitsWrite: isVm ? '350MB' : '220MB',
+    limitsReadIops: isVm ? 2200 : 1100,
+    limitsWriteIops: isVm ? 2200 : 1100,
+    limitsIngress: isVm ? '1Gbit' : '600Mbit',
+    limitsEgress: isVm ? '1Gbit' : '600Mbit',
+    limitsProcesses: isVm ? 800 : 1200,
+    limitsCpuPriority: isVm ? 8 : 10,
+    bootAutostart: true,
+    bootAutostartPriority: 10 + (input.index % 10),
+    bootAutostartDelay: 10 + (input.index % 5) * 5,
+    bootHostShutdownTimeout: isVm ? 60 : 45,
+    globalShared: input.globalShared,
+    globalQuotaMultiplier: input.globalQuotaMultiplier,
+    globalMaxInstances: 12,
+    allowInstanceDeletion: true,
+    plans
+  }
+}
+
+function uniqueNames(values: string[]): string[] {
+  return Array.from(new Set(values))
+}
+
+function buildInstanceSpecs(packages: SeedPackageSpec[]): SeedInstanceSpec[] {
+  return Array.from({ length: 64 }, (_, index) => {
+    const id = index + 1
+    const packageSpec = packages[index % packages.length]
+    const planName = packageSpec.plans[index % packageSpec.plans.length].name
+    const hostName = packageSpec.hostNames[index % packageSpec.hostNames.length]
+    const status = pickInstanceStatus(index)
+    const createdAt = daysAgo(4 + (index % 120), 8 + (index % 6))
+    const expiresAt = status === 'suspended' ? daysAgo(1 + (index % 4), 9) : daysFromNow(20 + (index % 90), 9)
+    const ipv4 = ['nat', 'nat_ipv6', 'nat_ipv6_nat'].includes(packageSpec.networkMode)
+      ? `10.${60 + (index % 20)}.${1 + Math.floor(index / 20)}.${20 + (index % 180)}`
+      : null
+    const routedIpv6 = packageSpec.networkMode === 'nat_ipv6' || packageSpec.networkMode === 'ipv6_only'
+      ? `2001:db8:${(0x900 + index).toString(16)}::${100 + id}`
+      : null
+    const sharedIpv6 = packageSpec.networkMode === 'nat_ipv6_nat' || packageSpec.networkMode === 'ipv6_nat'
+      ? `2001:db8:share::${id}`
+      : null
+    const primaryIpv6 = routedIpv6 ?? sharedIpv6
+    const firstPublicPort = packageSpec.networkMode === 'ipv6_only' ? null : 21000 + index * 6
+    const trafficStatus: SeedTrafficStatus = index % 11 === 0 ? 'LIMITED' : index % 7 === 0 ? 'WARNING' : 'NORMAL'
+    const monthlyTrafficUsed = trafficStatus === 'LIMITED'
+      ? bytesFromGb(240 + index * 3)
+      : trafficStatus === 'WARNING'
+        ? bytesFromGb(180 + index * 2)
+        : bytesFromGb(70 + index * 2)
+
+    return {
+      name: `${SEED_PREFIX}-inst-${pad(id, 3)}`,
+      incusId: `${SEED_PREFIX}-incus-${pad(id, 3)}`,
+      userUsername: customerUsers[(index * 7) % customerUsers.length].username,
+      packageKey: packageSpec.key,
+      planName,
+      hostName,
+      image: packageSpec.instanceType === 'vm'
+        ? vmImages[index % vmImages.length]
+        : containerImages[index % containerImages.length],
+      status,
+      createdAt,
+      expiresAt,
+      suspendedAt: status === 'suspended' ? daysAgo(index % 4, 9) : null,
+      suspendedBy: status === 'suspended' && index % 2 === 0 ? 1 : null,
+      suspendReason: status === 'suspended' ? `${SEED_MARK} expired sample` : null,
+      autoRenew: index % 3 !== 0,
+      cloudInitState: status === 'error' ? 'error' : 'done',
+      cloudInitSource: packageSpec.instanceType === 'vm' ? 'cloud-init' : 'lxd-agent',
+      ipv4,
+      ipv6: primaryIpv6,
+      sshPort: firstPublicPort ?? 22,
+      monthlyTrafficUsed,
+      trafficStatus,
+      lastIpv6ReassignAt: packageSpec.networkMode === 'nat_ipv6' && index % 5 === 0 ? daysAgo(index % 3, 7) : null,
+      lastPlanChangeAt: index % 6 === 0 ? daysAgo(2 + (index % 9), 11) : null,
+      lastSyncedAt: daysAgo(index % 5, 14)
+    }
+  })
+}
+
+function pickInstanceStatus(index: number): SeedInstanceStatus {
+  const mod = index % 20
+  if (mod === 17) return 'error'
+  if (mod === 18) return 'suspended'
+  if (mod === 19 || mod === 14 || mod === 15) return 'stopped'
+  return 'running'
+}
+
+async function ensureLocalDevGuard(): Promise<void> {
+  const databaseUrl = process.env.DATABASE_URL || ''
+  const isDevDb = databaseUrl.includes('incudal_dev_password@db:5432/incudal')
+  if (!isDevDb && process.env.FORCE_BULK_SEED !== '1') {
+    throw new Error(
+      `Refusing to run ${SEED_PREFIX} seed outside the local dev database. Set FORCE_BULK_SEED=1 to override.`
+    )
+  }
+}
+
+async function buildPasswordHash(password: string): Promise<string> {
+  return bcrypt.hash(password, LOCAL_PASSWORD_SALT)
+}
+
+async function syncUsers(passwordHash: string): Promise<Map<string, number>> {
+  const userIds = new Map<string, number>()
+
+  for (const [index, user] of allSeedUsers.entries()) {
+    const saved = await prisma.user.upsert({
+      where: { username: user.username },
+      create: {
+        username: user.username,
+        email: user.email,
+        passwordHash,
+        role: user.role,
+        status: user.status,
+        banReason: user.banReason,
+        balance: 0,
+        avatarStyle: user.avatarStyle
+      },
+      update: {
+        email: user.email,
+        passwordHash,
+        role: user.role,
+        status: user.status,
+        banReason: user.banReason,
+        avatarStyle: user.avatarStyle
+      }
+    })
+
+    await prisma.userQuota.upsert({
+      where: { userId: saved.id },
+      create: {
+        userId: saved.id,
+        hostLimit: user.quota.hostLimit,
+        packageLimit: user.quota.packageLimit,
+        monthlyTrafficLimit: user.quota.monthlyTrafficLimit
+      },
+      update: {
+        hostLimit: user.quota.hostLimit,
+        packageLimit: user.quota.packageLimit,
+        monthlyTrafficLimit: user.quota.monthlyTrafficLimit
+      }
+    })
+
+    userIds.set(user.username, saved.id)
+  }
+
+  const seedUserIds = Array.from(userIds.values())
+  await prisma.loginRecord.deleteMany({
+    where: {
+      userId: { in: seedUserIds },
+      userAgent: { startsWith: `${SEED_PREFIX}/` }
+    }
+  })
+
+  for (const [index, user] of allSeedUsers.entries()) {
+    const userId = userIds.get(user.username)!
+    const firstCountry = countries[index % countries.length]
+    const secondCountry = countries[(index + 2) % countries.length]
+    await prisma.loginRecord.createMany({
+      data: [
+        {
+          userId,
+          ip: `172.19.${10 + (index % 20)}.${20 + (index % 180)}`,
+          country: firstCountry.toUpperCase(),
+          region: cities[index % cities.length],
+          city: cities[index % cities.length],
+          isp: 'BulkSeedNet',
+          timezone: 'Asia/Shanghai',
+          userAgent: `${SEED_PREFIX}/web-chrome`
+        },
+        {
+          userId,
+          ip: `172.20.${10 + (index % 20)}.${40 + (index % 180)}`,
+          country: secondCountry.toUpperCase(),
+          region: cities[(index + 1) % cities.length],
+          city: cities[(index + 1) % cities.length],
+          isp: 'BulkSeedMobile',
+          timezone: 'Asia/Shanghai',
+          userAgent: `${SEED_PREFIX}/mobile-safari`
+        }
+      ]
+    })
+  }
+
+  return userIds
+}
+
+async function syncHosts(userIds: Map<string, number>): Promise<Map<string, number>> {
+  const hostIds = new Map<string, number>()
+
+  for (const host of hostSpecs) {
+    const userId = userIds.get(host.ownerUsername)
+    if (!userId) {
+      throw new Error(`Missing owner for host ${host.name}`)
+    }
+
+    const saved = await prisma.host.upsert({
+      where: {
+        userId_name: {
+          userId,
+          name: host.name
+        }
+      },
+      create: {
+        userId,
+        name: host.name,
+        url: host.url,
+        location: host.location,
+        countryCode: host.countryCode,
+        architecture: host.architecture,
+        status: host.status,
+        natPublicIp: host.natPublicIp,
+        natPublicIpv6: host.natPublicIpv6,
+        natBindIp: host.natBindIp,
+        natBindIpv6: host.natBindIpv6,
+        natPortStart: host.natPortStart,
+        natPortEnd: host.natPortEnd,
+        tags: host.tags,
+        cpuAllowanceMax: host.cpuAllowanceMax,
+        memoryMax: host.memoryMax,
+        instanceType: host.instanceType,
+        ipAddress: host.ipAddress,
+        storageDriver: 'zfs',
+        storageType: 'loop',
+        storageSize: host.storageSize,
+        ipv6Mode: 1,
+        ipv6Subnet: host.ipv6Subnet,
+        ipv6Gateway: host.ipv6Gateway,
+        ipv6ParentInterface: 'eth0',
+        enableApi: true,
+        isInstalled: true,
+        caddyEnabled: host.caddyEnabled,
+        caddyUsername: host.caddyEnabled ? `${SEED_PREFIX}-caddy` : null,
+        caddyPassword: host.caddyEnabled ? `${SEED_PREFIX}-password` : null,
+        caddyPort: 8444 + (host.natPortStart % 10),
+        transferEnabled: true,
+        trafficResetDay: 1 + (host.natPortStart % 20),
+        announcement: `${SEED_MARK} ${host.location} demo host`,
+        notifyPurchase: true,
+        notifyRenew: true,
+        notifyDestroy: host.instanceType === 'vm',
+        enableResourcePool: true,
+        probeUrl: `https://${host.name}.probe.local/health`
+      },
+      update: {
+        url: host.url,
+        location: host.location,
+        countryCode: host.countryCode,
+        architecture: host.architecture,
+        status: host.status,
+        natPublicIp: host.natPublicIp,
+        natPublicIpv6: host.natPublicIpv6,
+        natBindIp: host.natBindIp,
+        natBindIpv6: host.natBindIpv6,
+        natPortStart: host.natPortStart,
+        natPortEnd: host.natPortEnd,
+        tags: host.tags,
+        cpuAllowanceMax: host.cpuAllowanceMax,
+        memoryMax: host.memoryMax,
+        instanceType: host.instanceType,
+        ipAddress: host.ipAddress,
+        storageDriver: 'zfs',
+        storageType: 'loop',
+        storageSize: host.storageSize,
+        ipv6Mode: 1,
+        ipv6Subnet: host.ipv6Subnet,
+        ipv6Gateway: host.ipv6Gateway,
+        ipv6ParentInterface: 'eth0',
+        enableApi: true,
+        isInstalled: true,
+        caddyEnabled: host.caddyEnabled,
+        caddyUsername: host.caddyEnabled ? `${SEED_PREFIX}-caddy` : null,
+        caddyPassword: host.caddyEnabled ? `${SEED_PREFIX}-password` : null,
+        transferEnabled: true,
+        announcement: `${SEED_MARK} ${host.location} demo host`,
+        probeUrl: `https://${host.name}.probe.local/health`
+      }
+    })
+
+    hostIds.set(host.name, saved.id)
+
+    for (const pool of storagePools) {
+      await prisma.storagePool.upsert({
+        where: {
+          hostId_name: {
+            hostId: saved.id,
+            name: pool.name
+          }
+        },
+        create: {
+          hostId: saved.id,
+          name: pool.name,
+          driver: pool.driver,
+          purpose: pool.purpose,
+          description: pool.description,
+          config: {
+            generatedBy: SEED_PREFIX,
+            host: host.name
+          }
+        },
+        update: {
+          driver: pool.driver,
+          purpose: pool.purpose,
+          description: pool.description,
+          config: {
+            generatedBy: SEED_PREFIX,
+            host: host.name
+          }
+        }
+      })
+    }
+  }
+
+  return hostIds
+}
+
+async function syncPackages(
+  userIds: Map<string, number>,
+  hostIds: Map<string, number>
+): Promise<Map<string, GeneratedPackageRecord>> {
+  const packageMap = new Map<string, GeneratedPackageRecord>()
+
+  for (const pkg of packageSpecs) {
+    const userId = userIds.get(pkg.ownerUsername)
+    if (!userId) {
+      throw new Error(`Missing package owner ${pkg.ownerUsername}`)
+    }
+
+    const saved = await prisma.package.upsert({
+      where: {
+        userId_name: {
+          userId,
+          name: pkg.name
+        }
+      },
+      create: {
+        userId,
+        name: pkg.name,
+        description: pkg.description,
+        cpuMax: pkg.cpuMax,
+        memoryMax: pkg.memoryMax,
+        diskMax: pkg.diskMax,
+        bandwidthMax: pkg.bandwidthMax,
+        networkMode: pkg.networkMode,
+        instanceType: pkg.instanceType,
+        privileged: pkg.privileged,
+        nested: pkg.nested,
+        active: pkg.active,
+        portLimit: pkg.portLimit,
+        snapshotLimit: pkg.snapshotLimit,
+        backupLimit: pkg.backupLimit,
+        siteLimit: pkg.siteLimit,
+        monthlyTrafficLimit: pkg.monthlyTrafficLimit,
+        ioLimitMode: pkg.ioLimitMode,
+        limitsRead: pkg.limitsRead,
+        limitsWrite: pkg.limitsWrite,
+        limitsReadIops: pkg.limitsReadIops,
+        limitsWriteIops: pkg.limitsWriteIops,
+        limitsIngress: pkg.limitsIngress,
+        limitsEgress: pkg.limitsEgress,
+        limitsProcesses: pkg.limitsProcesses,
+        limitsCpuPriority: pkg.limitsCpuPriority,
+        bootAutostart: pkg.bootAutostart,
+        bootAutostartPriority: pkg.bootAutostartPriority,
+        bootAutostartDelay: pkg.bootAutostartDelay,
+        bootHostShutdownTimeout: pkg.bootHostShutdownTimeout,
+        globalShared: pkg.globalShared,
+        globalQuotaMultiplier: pkg.globalQuotaMultiplier,
+        globalMaxInstances: pkg.globalMaxInstances,
+        allowInstanceDeletion: pkg.allowInstanceDeletion
+      },
+      update: {
+        description: pkg.description,
+        cpuMax: pkg.cpuMax,
+        memoryMax: pkg.memoryMax,
+        diskMax: pkg.diskMax,
+        bandwidthMax: pkg.bandwidthMax,
+        networkMode: pkg.networkMode,
+        instanceType: pkg.instanceType,
+        privileged: pkg.privileged,
+        nested: pkg.nested,
+        active: pkg.active,
+        portLimit: pkg.portLimit,
+        snapshotLimit: pkg.snapshotLimit,
+        backupLimit: pkg.backupLimit,
+        siteLimit: pkg.siteLimit,
+        monthlyTrafficLimit: pkg.monthlyTrafficLimit,
+        ioLimitMode: pkg.ioLimitMode,
+        limitsRead: pkg.limitsRead,
+        limitsWrite: pkg.limitsWrite,
+        limitsReadIops: pkg.limitsReadIops,
+        limitsWriteIops: pkg.limitsWriteIops,
+        limitsIngress: pkg.limitsIngress,
+        limitsEgress: pkg.limitsEgress,
+        limitsProcesses: pkg.limitsProcesses,
+        limitsCpuPriority: pkg.limitsCpuPriority,
+        bootAutostart: pkg.bootAutostart,
+        bootAutostartPriority: pkg.bootAutostartPriority,
+        bootAutostartDelay: pkg.bootAutostartDelay,
+        bootHostShutdownTimeout: pkg.bootHostShutdownTimeout,
+        globalShared: pkg.globalShared,
+        globalQuotaMultiplier: pkg.globalQuotaMultiplier,
+        globalMaxInstances: pkg.globalMaxInstances,
+        allowInstanceDeletion: pkg.allowInstanceDeletion
+      }
+    })
+
+    await prisma.packageHost.deleteMany({ where: { packageId: saved.id } })
+    await prisma.packageHost.createMany({
+      data: pkg.hostNames.map(hostName => {
+        const hostId = hostIds.get(hostName)
+        if (!hostId) {
+          throw new Error(`Missing host ${hostName} for package ${pkg.name}`)
+        }
+        return {
+          packageId: saved.id,
+          hostId,
+          storagePoolName: 'default'
+        }
+      })
+    })
+
+    for (const plan of pkg.plans) {
+      await prisma.packagePlan.upsert({
+        where: {
+          packageId_name: {
+            packageId: saved.id,
+            name: plan.name
+          }
+        },
+        create: {
+          packageId: saved.id,
+          name: plan.name,
+          description: plan.description,
+          cpu: plan.cpu,
+          memory: plan.memory,
+          disk: plan.disk,
+          portLimit: plan.portLimit,
+          snapshotLimit: plan.snapshotLimit,
+          backupLimit: plan.backupLimit,
+          siteLimit: plan.siteLimit,
+          swapSize: plan.swapSize,
+          trafficLimit: plan.trafficLimit,
+          trafficLimitSpeed: plan.trafficLimitSpeed,
+          price: plan.price,
+          billingCycle: plan.billingCycle,
+          setupFee: plan.setupFee,
+          isActive: plan.isActive,
+          sortOrder: plan.sortOrder,
+          slaGuarantee: plan.slaGuarantee
+        },
+        update: {
+          description: plan.description,
+          cpu: plan.cpu,
+          memory: plan.memory,
+          disk: plan.disk,
+          portLimit: plan.portLimit,
+          snapshotLimit: plan.snapshotLimit,
+          backupLimit: plan.backupLimit,
+          siteLimit: plan.siteLimit,
+          swapSize: plan.swapSize,
+          trafficLimit: plan.trafficLimit,
+          trafficLimitSpeed: plan.trafficLimitSpeed,
+          price: plan.price,
+          billingCycle: plan.billingCycle,
+          setupFee: plan.setupFee,
+          isActive: plan.isActive,
+          sortOrder: plan.sortOrder,
+          slaGuarantee: plan.slaGuarantee
+        }
+      })
+    }
+
+    const savedPlans = await prisma.packagePlan.findMany({
+      where: { packageId: saved.id },
+      orderBy: { sortOrder: 'asc' }
+    })
+
+    packageMap.set(pkg.key, {
+      id: saved.id,
+      spec: pkg,
+      planIdsByName: new Map(savedPlans.map(plan => [plan.name, plan.id]))
+    })
+  }
+
+  return packageMap
+}
+
+async function syncInstances(
+  userIds: Map<string, number>,
+  hostIds: Map<string, number>,
+  packagesByKey: Map<string, GeneratedPackageRecord>
+): Promise<GeneratedInstanceRecord[]> {
+  const records: GeneratedInstanceRecord[] = []
+
+  for (const [index, instance] of instanceSpecs.entries()) {
+    const userId = userIds.get(instance.userUsername)
+    const pkg = packagesByKey.get(instance.packageKey)
+    const hostId = hostIds.get(instance.hostName)
+    const hostSpec = hostSpecs.find(candidate => candidate.name === instance.hostName)
+    if (!userId || !pkg || !hostId || !hostSpec) {
+      throw new Error(`Missing relation while seeding instance ${instance.name}`)
+    }
+
+    const planId = pkg.planIdsByName.get(instance.planName)
+    const plan = pkg.spec.plans.find(candidate => candidate.name === instance.planName)
+    if (!planId || !plan) {
+      throw new Error(`Missing plan ${instance.planName} for ${instance.name}`)
+    }
+
+    const existing = await prisma.instance.findFirst({
+      where: {
+        userId,
+        name: instance.name
+      }
+    })
+
+    const saved = existing
+      ? await prisma.instance.update({
+          where: { id: existing.id },
+          data: buildInstanceData(instance, userId, hostId, hostSpec, pkg.id, planId, pkg.spec, plan, index)
+        })
+      : await prisma.instance.create({
+          data: buildInstanceData(instance, userId, hostId, hostSpec, pkg.id, planId, pkg.spec, plan, index)
+        })
+
+    await syncInstanceChildren(saved.id, userId, hostId, hostSpec, instance, pkg.spec, plan, index)
+
+    records.push({
+      id: saved.id,
+      userId,
+      hostId,
+      packageId: pkg.id,
+      packagePlanId: planId,
+      spec: instance,
+      packageSpec: pkg.spec,
+      plan
+    })
+  }
+
+  return records
+}
+
+function buildInstanceData(
+  spec: SeedInstanceSpec,
+  userId: number,
+  hostId: number,
+  hostSpec: SeedHostSpec,
+  packageId: number,
+  packagePlanId: number,
+  pkg: SeedPackageSpec,
+  plan: SeedPlanSpec,
+  index: number
+) {
+  return {
+    incusId: spec.incusId,
+    name: spec.name,
+    userId,
+    hostId,
+    packageId,
+    packagePlanId,
+    storagePoolName: 'default',
+    image: spec.image,
+    status: spec.status,
+    cpu: plan.cpu,
+    memory: plan.memory,
+    disk: plan.disk,
+    ipv4: spec.ipv4,
+    ipv6: spec.ipv6,
+    networkMode: pkg.networkMode,
+    sshPort: pkg.networkMode === 'ipv6_only' ? 22 : hostSpec.natPortStart + 20 + index * 4,
+    rootPassword: `${SHARED_PASSWORD}!${pad(index + 1, 3)}`,
+    snapshottedSpecs: {
+      generatedBy: SEED_PREFIX,
+      packageKey: pkg.key,
+      planName: plan.name,
+      cpu: plan.cpu,
+      memory: plan.memory,
+      disk: plan.disk
+    },
+    portLimit: plan.portLimit,
+    snapshotLimit: plan.snapshotLimit,
+    backupLimit: plan.backupLimit,
+    siteLimit: plan.siteLimit,
+    swapEnabled: plan.swapSize > 0,
+    swapSize: plan.swapSize,
+    monthlyTrafficLimit: plan.trafficLimit,
+    monthlyTrafficUsed: spec.monthlyTrafficUsed,
+    trafficStatus: spec.trafficStatus,
+    limitsRead: pkg.limitsRead,
+    limitsWrite: pkg.limitsWrite,
+    limitsReadIops: pkg.limitsReadIops,
+    limitsWriteIops: pkg.limitsWriteIops,
+    limitsIngress: pkg.limitsIngress,
+    limitsEgress: pkg.limitsEgress,
+    limitsProcesses: pkg.limitsProcesses,
+    limitsCpuPriority: pkg.limitsCpuPriority,
+    bootAutostart: pkg.bootAutostart,
+    bootAutostartPriority: pkg.bootAutostartPriority,
+    bootAutostartDelay: pkg.bootAutostartDelay,
+    bootHostShutdownTimeout: pkg.bootHostShutdownTimeout,
+    expiresAt: spec.expiresAt,
+    suspendedAt: spec.suspendedAt,
+    suspendedBy: spec.suspendedBy,
+    suspendReason: spec.suspendReason,
+    billingPrice: plan.price,
+    billingCycle: plan.billingCycle,
+    autoRenew: spec.autoRenew,
+    iconBadgeId: index % 9 === 0 ? 'fire' : null,
+    autoRenewAttempts: spec.autoRenew ? index % 3 : 0,
+    lastAutoRenewAttemptAt: spec.autoRenew ? daysAgo(index % 5, 16) : null,
+    expiryNotifiedAt: spec.status === 'suspended' ? daysAgo(1, 17) : null,
+    version: index % 5,
+    lastIpv6ReassignAt: spec.lastIpv6ReassignAt,
+    lastPlanChangeAt: spec.lastPlanChangeAt,
+    cloudInitState: spec.cloudInitState,
+    cloudInitSource: spec.cloudInitSource,
+    cloudInitLastCheckedAt: spec.lastSyncedAt,
+    cloudInitCompletedAt: spec.status === 'error' ? null : addMonths(spec.createdAt, 0),
+    cloudInitManualCompletedAt: spec.status === 'error' ? null : null,
+    cloudInitManualCompletedBy: null,
+    createdAt: spec.createdAt,
+    lastSyncedAt: spec.lastSyncedAt
+  }
+}
+
+async function syncInstanceChildren(
+  instanceId: number,
+  userId: number,
+  hostId: number,
+  hostSpec: SeedHostSpec,
+  spec: SeedInstanceSpec,
+  pkg: SeedPackageSpec,
+  plan: SeedPlanSpec,
+  index: number
+): Promise<void> {
+  await prisma.portMapping.deleteMany({ where: { instanceId } })
+  await prisma.snapshot.deleteMany({ where: { instanceId } })
+  await prisma.backup.deleteMany({ where: { instanceId } })
+  await prisma.proxySite.deleteMany({ where: { instanceId } })
+  await prisma.ipAddress.deleteMany({ where: { instanceId } })
+  await prisma.ipv6Subnet.deleteMany({ where: { instanceId } })
+  await prisma.dailyTraffic.deleteMany({ where: { instanceId } })
+  await prisma.instanceBillingRecord.deleteMany({ where: { instanceId } })
+
+  const publicBase = hostSpec.natPortStart + 20 + index * 4
+  const supportsPortMappings = pkg.networkMode !== 'ipv6_only' && plan.portLimit > 0
+  if (supportsPortMappings) {
+    const portSet = pickPortSet(index, pkg.instanceType)
+    const mappings = portSet.map((privatePort, mappingIndex) => ({
+      instanceId,
+      hostId,
+      protocol: pickProtocol(index, mappingIndex),
+      publicPort: publicBase + mappingIndex,
+      privatePort,
+      remark: `${SEED_MARK} ${mappingIndex === 0 ? 'ssh-or-app' : 'service'}`
+    }))
+    await prisma.portMapping.createMany({ data: mappings })
+  }
+
+  const snapshotsToCreate = index % 3 === 0 ? 2 : index % 2 === 0 ? 1 : 0
+  if (snapshotsToCreate > 0) {
+    await prisma.snapshot.createMany({
+      data: Array.from({ length: snapshotsToCreate }, (_, snapshotIndex) => ({
+        instanceId,
+        incusName: `${spec.name}/snap-${snapshotIndex + 1}`,
+        name: `${SEED_PREFIX}-snap-${snapshotIndex + 1}`,
+        description: `${SEED_MARK} snapshot ${snapshotIndex + 1}`,
+        stateful: pkg.instanceType === 'vm' && snapshotIndex === 0,
+        size: 1024 + snapshotIndex * 512
+      }))
+    })
+  }
+
+  const backupsToCreate = index % 4 === 0 ? 2 : index % 3 === 0 ? 1 : 0
+  if (backupsToCreate > 0) {
+    await prisma.backup.createMany({
+      data: Array.from({ length: backupsToCreate }, (_, backupIndex) => ({
+        instanceId,
+        incusName: `${spec.name}/backup-${backupIndex + 1}`,
+        name: `${SEED_PREFIX}-backup-${backupIndex + 1}`,
+        description: `${SEED_MARK} backup ${backupIndex + 1}`,
+        size: 2048 + backupIndex * 768,
+        status: backupIndex === backupsToCreate - 1 && index % 8 === 0 ? 'error' : ('ready' as SeedBackupStatus),
+        expiresAt: daysFromNow(14 + backupIndex * 7, 6)
+      }))
+    })
+  }
+
+  if (index % 4 === 0) {
+    await prisma.backupPolicy.upsert({
+      where: { instanceId },
+      create: {
+        instanceId,
+        enabled: true,
+        intervalMinutes: 720,
+        lastRunAt: daysAgo(1, 2),
+        nextRunAt: daysFromNow(1, 2)
+      },
+      update: {
+        enabled: true,
+        intervalMinutes: 720,
+        lastRunAt: daysAgo(1, 2),
+        nextRunAt: daysFromNow(1, 2)
+      }
+    })
+  } else {
+    await prisma.backupPolicy.deleteMany({ where: { instanceId } })
+  }
+
+  if (index % 3 === 0) {
+    await prisma.snapshotPolicy.upsert({
+      where: { instanceId },
+      create: {
+        instanceId,
+        enabled: true,
+        intervalMinutes: 360,
+        lastRunAt: daysAgo(1, 4),
+        nextRunAt: daysFromNow(1, 4)
+      },
+      update: {
+        enabled: true,
+        intervalMinutes: 360,
+        lastRunAt: daysAgo(1, 4),
+        nextRunAt: daysFromNow(1, 4)
+      }
+    })
+  } else {
+    await prisma.snapshotPolicy.deleteMany({ where: { instanceId } })
+  }
+
+  await prisma.trafficSnapshot.upsert({
+    where: { instanceId },
+    create: {
+      instanceId,
+      rxRaw: 100_000_000n + BigInt(index) * 10_000n,
+      txRaw: 80_000_000n + BigInt(index) * 9_000n
+    },
+    update: {
+      rxRaw: 100_000_000n + BigInt(index) * 10_000n,
+      txRaw: 80_000_000n + BigInt(index) * 9_000n
+    }
+  })
+
+  await prisma.dailyTraffic.createMany({
+    data: Array.from({ length: 7 }, (_, dayOffset) => ({
+      instanceId,
+      date: daysAgo(6 - dayOffset, 0),
+      rxTotal: 2_000_000_000n + BigInt(index + dayOffset) * 30_000_000n,
+      txTotal: 1_200_000_000n + BigInt(index + dayOffset) * 20_000_000n
+    }))
+  })
+
+  const shouldAddIpv6 = pkg.networkMode === 'nat_ipv6' || pkg.networkMode === 'ipv6_only'
+  if (shouldAddIpv6 && spec.ipv6) {
+    await prisma.ipAddress.createMany({
+      data: [
+        {
+          instanceId,
+          address: spec.ipv6,
+          type: 'inet6',
+          isPrimary: true,
+          isCustom: false,
+          device: 'eth1'
+        },
+        ...(index % 5 === 0
+          ? [
+              {
+                instanceId,
+                address: `${spec.ipv6.split('::')[0]}::${400 + index}`,
+                type: 'inet6',
+                isPrimary: false,
+                isCustom: true,
+                device: 'eth1'
+              }
+            ]
+          : [])
+      ]
+    })
+  }
+
+  if (shouldAddIpv6 && spec.ipv6 && index % 6 === 0) {
+    await prisma.ipv6Subnet.create({
+      data: {
+        instanceId,
+        cidr: `${spec.ipv6.split('::')[0]}:100::/120`,
+        primaryIp: `${spec.ipv6.split('::')[0]}:100::1`,
+        device: 'eth1'
+      }
+    })
+  }
+
+  const proxyCount = pkg.instanceType === 'container' && plan.siteLimit > 0 && index % 3 !== 0 ? (index % 5 === 0 ? 2 : 1) : 0
+  if (proxyCount > 0) {
+    await prisma.proxySite.createMany({
+      data: Array.from({ length: proxyCount }, (_, siteIndex) => ({
+        instanceId,
+        hostId,
+        domain: `${spec.name}-${siteIndex + 1}.${SEED_PREFIX}.test`,
+        targetPort: [80, 443, 8080][siteIndex % 3],
+        httpsEnabled: siteIndex % 2 === 0,
+        remark: `${SEED_MARK} proxy ${siteIndex + 1}`,
+        status: pickProxyStatus(index, siteIndex),
+        enabled: siteIndex % 4 !== 0,
+        error: index % 9 === 0 && siteIndex === 0 ? `${SEED_MARK} DNS pending` : null
+      }))
+    })
+  }
+
+  await prisma.instanceBillingRecord.create({
+    data: {
+      instanceId,
+      userId,
+      type: 'newPurchase',
+      amount: plan.price,
+      months: plan.billingCycle,
+      periodStart: spec.createdAt,
+      periodEnd: addMonths(spec.createdAt, plan.billingCycle),
+      remark: `${SEED_MARK} initial purchase`
+    }
+  })
+
+  if (index % 6 === 0) {
+    const renewedStart = addMonths(spec.createdAt, plan.billingCycle)
+    await prisma.instanceBillingRecord.create({
+      data: {
+        instanceId,
+        userId,
+        type: 'renew',
+        amount: plan.price,
+        months: plan.billingCycle,
+        periodStart: renewedStart,
+        periodEnd: addMonths(renewedStart, plan.billingCycle),
+        remark: `${SEED_MARK} renewal sample`
+      }
+    })
+  }
+}
+
+function pickPortSet(index: number, instanceType: SeedPackageInstanceType): number[] {
+  if (instanceType === 'vm') {
+    return index % 2 === 0 ? [22, 3389] : [22, 8443]
+  }
+  const sets = [
+    [22, 80],
+    [22, 443],
+    [25565, 19132],
+    [8080, 8443]
+  ]
+  return sets[index % sets.length]
+}
+
+function pickProtocol(index: number, mappingIndex: number): SeedProtocol {
+  if (mappingIndex === 1 && index % 4 === 2) return 'udp'
+  return 'tcp'
+}
+
+function pickProxyStatus(index: number, siteIndex: number): SeedProxyStatus {
+  if (index % 9 === 0 && siteIndex === 0) return 'error'
+  if (index % 4 === 0) return 'pending'
+  return 'active'
+}
+
+async function syncTickets(instances: GeneratedInstanceRecord[]): Promise<void> {
+  await prisma.ticket.deleteMany({
+    where: {
+      subject: { startsWith: SEED_MARK }
+    }
+  })
+
+  const selected = instances.filter((_, index) => index % 5 === 0).slice(0, 12)
+  for (const [index, instance] of selected.entries()) {
+    const hostOwner = await prisma.host.findUniqueOrThrow({
+      where: { id: instance.hostId },
+      select: { userId: true }
+    })
+    const status = (['open', 'in_progress', 'resolved', 'closed'] as SeedTicketStatus[])[index % 4]
+    const createdAt = daysAgo(2 + index, 9)
+    await prisma.ticket.create({
+      data: {
+        userId: instance.userId,
+        hostId: instance.hostId,
+        instanceId: instance.id,
+        subject: `${SEED_MARK} ticket-${pad(index + 1, 2)} for ${instance.spec.name}`,
+        category: ['general', 'billing', 'technical', 'abuse'][index % 4],
+        priority: (['low', 'normal', 'high', 'urgent'] as SeedTicketPriority[])[index % 4],
+        status,
+        createdAt,
+        resolvedAt: status === 'resolved' || status === 'closed' ? daysAgo(1 + index, 12) : null,
+        closedAt: status === 'closed' ? daysAgo(index, 15) : null,
+        messages: {
+          create: [
+            {
+              senderId: instance.userId,
+              content: `${SEED_MARK} user asks about ${instance.spec.name}`,
+              isFromOwner: false,
+              createdAt
+            },
+            {
+              senderId: hostOwner.userId,
+              content: `${SEED_MARK} host owner replied for ${instance.spec.name}`,
+              isFromOwner: true,
+              createdAt: new Date(createdAt.getTime() + 60 * 60 * 1000)
+            },
+            ...(index % 3 === 0
+              ? [
+                  {
+                    senderId: instance.userId,
+                    content: `${SEED_MARK} follow-up confirmation`,
+                    isFromOwner: false,
+                    createdAt: new Date(createdAt.getTime() + 2 * 60 * 60 * 1000)
+                  }
+                ]
+              : [])
+          ]
+        }
+      }
+    })
+  }
+}
+
+async function syncBalances(
+  userIds: Map<string, number>,
+  instances: GeneratedInstanceRecord[]
+): Promise<void> {
+  const seedUserIds = Array.from(userIds.values())
+  await prisma.balanceLog.deleteMany({
+    where: {
+      userId: { in: seedUserIds },
+      remark: { startsWith: SEED_MARK }
+    }
+  })
+
+  const spendByUser = new Map<number, number>()
+  for (const instance of instances) {
+    spendByUser.set(instance.userId, (spendByUser.get(instance.userId) || 0) + instance.plan.price)
+  }
+
+  const logs: SeedBalanceLogSpec[] = []
+
+  for (const [index, user] of allSeedUsers.entries()) {
+    const userId = userIds.get(user.username)!
+    const spend = spendByUser.get(userId) || 0
+    const baseRecharge = getBaseRechargeAmount(user, index, spend)
+    const giftAmount = getGiftAmount(user, index)
+    let balanceBefore = 0
+
+    logs.push({
+      userId,
+      type: user.role === 'admin' ? 'admin_adjust' : 'recharge',
+      amount: baseRecharge,
+      balanceBefore,
+      balanceAfter: balanceBefore + baseRecharge,
+      orderId: user.role === 'admin' ? null : getSeedOrderNo(index),
+      remark: `${SEED_MARK} initial funding`
+    })
+    balanceBefore += baseRecharge
+
+    logs.push({
+      userId,
+      type: 'gift',
+      amount: giftAmount,
+      balanceBefore,
+      balanceAfter: balanceBefore + giftAmount,
+      orderId: null,
+      remark: `${SEED_MARK} promo gift`
+    })
+    balanceBefore += giftAmount
+
+    if (spend > 0) {
+      logs.push({
+        userId,
+        type: 'consume',
+        amount: -spend,
+        balanceBefore,
+        balanceAfter: balanceBefore - spend,
+        orderId: null,
+        remark: `${SEED_MARK} instance purchases`
+      })
+      balanceBefore -= spend
+    }
+
+    await prisma.user.update({
+      where: { id: userId },
+      data: { balance: balanceBefore }
+    })
+  }
+
+  await prisma.balanceLog.createMany({ data: logs })
+}
+
+async function refreshHostAndQuotaUsage(
+  userIds: Map<string, number>,
+  hostIds: Map<string, number>,
+  instances: GeneratedInstanceRecord[]
+): Promise<void> {
+  const hostStats = new Map<number, { cpu: number; memory: number; disk: number; ports: number }>()
+  for (const hostId of hostIds.values()) {
+    hostStats.set(hostId, { cpu: 0, memory: 0, disk: 0, ports: 0 })
+  }
+
+  for (const instance of instances) {
+    const stats = hostStats.get(instance.hostId)
+    if (!stats) continue
+    stats.cpu += instance.plan.cpu
+    stats.memory += instance.plan.memory
+    stats.disk += instance.plan.disk
+  }
+
+  const portCounts = await prisma.portMapping.groupBy({
+    by: ['hostId'],
+    where: {
+      hostId: { in: Array.from(hostIds.values()) }
+    },
+    _count: {
+      _all: true
+    }
+  })
+
+  for (const row of portCounts) {
+    const stats = hostStats.get(row.hostId)
+    if (stats) {
+      stats.ports = row._count._all
+    }
+  }
+
+  for (const [hostName, hostId] of hostIds.entries()) {
+    const stats = hostStats.get(hostId)!
+    await prisma.host.update({
+      where: { id: hostId },
+      data: {
+        cpuUsed: stats.cpu,
+        memoryUsed: stats.memory,
+        diskUsed: stats.disk,
+        natPortsUsedCount: stats.ports
+      }
+    })
+  }
+
+  const hostCountByOwner = new Map<number, number>()
+  const packageCountByOwner = new Map<number, number>()
+  ownerUsers.forEach(owner => {
+    const ownerId = userIds.get(owner.username)!
+    hostCountByOwner.set(ownerId, hostSpecs.filter(host => host.ownerUsername === owner.username).length)
+    packageCountByOwner.set(ownerId, packageSpecs.filter(pkg => pkg.ownerUsername === owner.username).length)
+  })
+
+  for (const user of allSeedUsers) {
+    const userId = userIds.get(user.username)!
+    await prisma.userQuota.update({
+      where: { userId },
+      data: {
+        hostUsed: hostCountByOwner.get(userId) || 0,
+        packageUsed: packageCountByOwner.get(userId) || 0
+      }
+    })
+  }
+}
+
+async function printSummary(): Promise<void> {
+  const [users, hosts, packages, plans, instances, ports, snapshots, backups, sites, tickets] = await Promise.all([
+    prisma.user.count({ where: { username: { startsWith: SEED_PREFIX } } }),
+    prisma.host.count({ where: { name: { startsWith: `${SEED_PREFIX}-host-` } } }),
+    prisma.package.count({ where: { name: { startsWith: `${SEED_PREFIX}-pkg-` } } }),
+    prisma.packagePlan.count({ where: { package: { name: { startsWith: `${SEED_PREFIX}-pkg-` } } } }),
+    prisma.instance.count({ where: { name: { startsWith: `${SEED_PREFIX}-inst-` } } }),
+    prisma.portMapping.count({ where: { instance: { name: { startsWith: `${SEED_PREFIX}-inst-` } } } }),
+    prisma.snapshot.count({ where: { instance: { name: { startsWith: `${SEED_PREFIX}-inst-` } } } }),
+    prisma.backup.count({ where: { instance: { name: { startsWith: `${SEED_PREFIX}-inst-` } } } }),
+    prisma.proxySite.count({ where: { instance: { name: { startsWith: `${SEED_PREFIX}-inst-` } } } }),
+    prisma.ticket.count({ where: { subject: { startsWith: SEED_MARK } } })
+  ])
+
+  console.log(`${SEED_MARK} completed`)
+  console.log(`${SEED_MARK} users=${users}, hosts=${hosts}, packages=${packages}, plans=${plans}, instances=${instances}`)
+  console.log(`${SEED_MARK} portMappings=${ports}, snapshots=${snapshots}, backups=${backups}, proxySites=${sites}, tickets=${tickets}`)
+  console.log(`${SEED_MARK} shared password for generated users: ${SHARED_PASSWORD}`)
+}
+
+async function main(): Promise<void> {
+  await ensureLocalDevGuard()
+  const passwordHash = await buildPasswordHash(SHARED_PASSWORD)
+  const userIds = await syncUsers(passwordHash)
+  const hostIds = await syncHosts(userIds)
+  const packagesByKey = await syncPackages(userIds, hostIds)
+  const instances = await syncInstances(userIds, hostIds, packagesByKey)
+  await syncTickets(instances)
+  await syncBalances(userIds, instances)
+  await refreshHostAndQuotaUsage(userIds, hostIds, instances)
+  await printSummary()
+}
+
+void main()
+  .catch(error => {
+    console.error(`${SEED_MARK} failed:`, error)
+    process.exitCode = 1
+  })
+  .finally(async () => {
+    await prisma.$disconnect()
+  })
diff --git a/server/scripts/seed-test-data.ts b/server/scripts/seed-test-data.ts
new file mode 100644
index 0000000..ad53e2b
--- /dev/null
+++ b/server/scripts/seed-test-data.ts
@@ -0,0 +1,975 @@
+import 'dotenv/config'
+
+// @ts-ignore - bcryptjs has its own types
+import bcrypt from 'bcryptjs'
+
+import * as db from '../src/db/index.js'
+import { prisma } from '../src/db/prisma.js'
+
+type SeedRole = 'admin' | 'user'
+type HostStatus = 'online' | 'offline' | 'maintenance'
+type HostArchitecture = 'x86_64' | 'aarch64'
+type HostInstanceType = 'container' | 'vm' | 'both'
+type PackageInstanceType = 'container' | 'vm'
+type NetworkMode = 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+type IoLimitMode = 'throughput' | 'iops'
+
+type SeedCounter = {
+  created: number
+  updated: number
+}
+
+type SeedStats = {
+  users: SeedCounter
+  hosts: SeedCounter
+  packages: SeedCounter
+  plans: SeedCounter
+}
+
+type SeedUserSpec = {
+  username: string
+  email: string
+  role: SeedRole
+  password?: string
+  quota?: {
+    hostLimit: number
+    packageLimit: number
+  }
+}
+
+type SeedHostSpec = {
+  ownerUsername: string
+  name: string
+  url: string
+  location: string
+  countryCode: string
+  architecture: HostArchitecture
+  instanceType: HostInstanceType
+  status: HostStatus
+  tags: string[]
+  natPublicIp: string
+  natPortStart: number
+  natPortEnd: number
+  ipAddress: string
+  storageDriver: string
+  storageType: string
+  storageSize: number
+  enableApi: boolean
+  isInstalled: boolean
+  cpuAllowanceMax: number
+  memoryMax: number
+}
+
+type SeedPlanSpec = {
+  name: string
+  description: string
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: bigint
+  trafficLimitSpeed: string
+  price: number
+  billingCycle: number
+  setupFee: number
+  isActive: boolean
+  sortOrder: number
+  slaGuarantee: number | null
+}
+
+type SeedPackageSpec = {
+  ownerUsername: string
+  name: string
+  description: string
+  hostNames: string[]
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax: number | null
+  networkMode: NetworkMode
+  instanceType: PackageInstanceType
+  privileged: boolean
+  nested: boolean
+  active: boolean
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  monthlyTrafficLimit: bigint | null
+  ioLimitMode: IoLimitMode
+  limitsRead: string
+  limitsWrite: string
+  limitsReadIops: number
+  limitsWriteIops: number
+  limitsIngress: string
+  limitsEgress: string
+  limitsProcesses: number
+  limitsCpuPriority: number
+  bootAutostart: boolean
+  bootAutostartPriority: number
+  bootAutostartDelay: number
+  bootHostShutdownTimeout: number
+  globalShared: boolean
+  globalQuotaMultiplier: number | null
+  globalMaxInstances: number | null
+  allowInstanceDeletion: boolean
+  plans: SeedPlanSpec[]
+}
+
+const LOCAL_PASSWORD_SALT = '$2a$10$1234567890123456789012'
+
+const stats: SeedStats = {
+  users: { created: 0, updated: 0 },
+  hosts: { created: 0, updated: 0 },
+  packages: { created: 0, updated: 0 },
+  plans: { created: 0, updated: 0 }
+}
+
+const userIds = new Map<string, number>()
+const hostIds = new Map<string, number>()
+
+function bytesFromGb(value: number): bigint {
+  return BigInt(value) * 1024n * 1024n * 1024n
+}
+
+function hostKey(ownerUsername: string, hostName: string): string {
+  return `${ownerUsername}:${hostName}`
+}
+
+function countPlans(packages: SeedPackageSpec[]): number {
+  return packages.reduce((total, pkg) => total + pkg.plans.length, 0)
+}
+
+function getUserId(username: string): number {
+  const userId = userIds.get(username)
+  if (!userId) {
+    throw new Error(`Missing seeded user: ${username}`)
+  }
+  return userId
+}
+
+function getHostId(ownerUsername: string, hostName: string): number {
+  const id = hostIds.get(hostKey(ownerUsername, hostName))
+  if (!id) {
+    throw new Error(`Missing seeded host: ${ownerUsername}/${hostName}`)
+  }
+  return id
+}
+
+async function buildPasswordHash(password: string): Promise<string> {
+  return bcrypt.hash(password, LOCAL_PASSWORD_SALT)
+}
+
+async function ensureUser(spec: SeedUserSpec): Promise<number> {
+  const existing = await db.findUserByUsername(spec.username)
+  const passwordHash = spec.password ? await buildPasswordHash(spec.password) : undefined
+
+  if (!existing) {
+    if (!passwordHash) {
+      throw new Error(`Cannot create user without password: ${spec.username}`)
+    }
+
+    const userId = await db.createUser(spec.username, spec.email, passwordHash, spec.role)
+
+    if (spec.quota) {
+      await db.updateUserQuotaLimits(userId, {
+        hostLimit: spec.quota.hostLimit,
+        packageLimit: spec.quota.packageLimit
+      })
+    }
+
+    stats.users.created += 1
+    userIds.set(spec.username, userId)
+    return userId
+  }
+
+  // 幂等处理：账号存在时只同步本脚本关心的字段，不重复创建脏数据。
+  await db.updateUser(existing.id, {
+    email: spec.email,
+    role: spec.role,
+    status: 'active',
+    ...(passwordHash ? { passwordHash } : {})
+  })
+
+  const quota = await db.getUserQuota(existing.id)
+  if (!quota) {
+    await db.createUserQuota(existing.id, {
+      hostLimit: spec.quota?.hostLimit ?? 8,
+      packageLimit: spec.quota?.packageLimit ?? 8
+    })
+  } else if (spec.quota) {
+    await db.updateUserQuotaLimits(existing.id, {
+      hostLimit: spec.quota.hostLimit,
+      packageLimit: spec.quota.packageLimit
+    })
+  }
+
+  stats.users.updated += 1
+  userIds.set(spec.username, existing.id)
+  return existing.id
+}
+
+async function ensureHost(spec: SeedHostSpec): Promise<number> {
+  const ownerId = getUserId(spec.ownerUsername)
+  const existing = await db.getHostByUserAndName(ownerId, spec.name)
+
+  if (!existing) {
+    const hostId = await db.createHost({
+      userId: ownerId,
+      name: spec.name,
+      url: spec.url,
+      location: spec.location,
+      countryCode: spec.countryCode,
+      architecture: spec.architecture,
+      instanceType: spec.instanceType,
+      tags: spec.tags,
+      natPublicIp: spec.natPublicIp,
+      natPortStart: spec.natPortStart,
+      natPortEnd: spec.natPortEnd,
+      ipAddress: spec.ipAddress,
+      storageDriver: spec.storageDriver,
+      storageType: spec.storageType,
+      storageSize: spec.storageSize,
+      enableApi: spec.enableApi,
+      isInstalled: spec.isInstalled,
+      cpuAllowanceMax: spec.cpuAllowanceMax,
+      memoryMax: spec.memoryMax
+    })
+
+    await db.updateHostStatus(hostId, spec.status)
+    await db.updateHostResources(hostId, {
+      architecture: spec.architecture,
+      instanceType: spec.instanceType,
+      cpuUsed: 0,
+      memoryUsed: 0,
+      diskUsed: 0,
+      cpuAllowanceMax: spec.cpuAllowanceMax,
+      memoryMax: spec.memoryMax
+    })
+
+    stats.hosts.created += 1
+    hostIds.set(hostKey(spec.ownerUsername, spec.name), hostId)
+    return hostId
+  }
+
+  // 关键流程：优先复用现有 helper 同步节点展示信息、状态和配额上限。
+  await db.updateHost(existing.id, {
+    url: spec.url,
+    location: spec.location,
+    countryCode: spec.countryCode,
+    tags: spec.tags,
+    natPublicIp: spec.natPublicIp,
+    natPortStart: spec.natPortStart,
+    natPortEnd: spec.natPortEnd
+  })
+  await db.updateHostStatus(existing.id, spec.status)
+  await db.updateHostResources(existing.id, {
+    architecture: spec.architecture,
+    instanceType: spec.instanceType,
+    cpuUsed: 0,
+    memoryUsed: 0,
+    diskUsed: 0,
+    cpuAllowanceMax: spec.cpuAllowanceMax,
+    memoryMax: spec.memoryMax
+  })
+
+  stats.hosts.updated += 1
+  hostIds.set(hostKey(spec.ownerUsername, spec.name), existing.id)
+  return existing.id
+}
+
+async function ensurePackage(spec: SeedPackageSpec): Promise<number> {
+  const ownerId = getUserId(spec.ownerUsername)
+  const owner = await db.findUserByUsername(spec.ownerUsername)
+
+  if (!owner) {
+    throw new Error(`Missing package owner: ${spec.ownerUsername}`)
+  }
+
+  const hostIdsForPackage = spec.hostNames.map(hostName => getHostId(spec.ownerUsername, hostName))
+  const existing = await db.getPackageByUserAndName(ownerId, spec.name)
+  const packageData = {
+    name: spec.name,
+    description: spec.description,
+    cpuMax: spec.cpuMax,
+    memoryMax: spec.memoryMax,
+    diskMax: spec.diskMax,
+    bandwidthMax: spec.bandwidthMax,
+    networkMode: spec.networkMode,
+    instanceType: spec.instanceType,
+    hostIds: hostIdsForPackage,
+    privileged: spec.privileged,
+    nested: spec.nested,
+    active: spec.active,
+    portLimit: spec.portLimit,
+    snapshotLimit: spec.snapshotLimit,
+    backupLimit: spec.backupLimit,
+    siteLimit: spec.siteLimit,
+    monthlyTrafficLimit: spec.monthlyTrafficLimit,
+    ioLimitMode: spec.ioLimitMode,
+    limitsRead: spec.limitsRead,
+    limitsWrite: spec.limitsWrite,
+    limitsReadIops: spec.limitsReadIops,
+    limitsWriteIops: spec.limitsWriteIops,
+    limitsIngress: spec.limitsIngress,
+    limitsEgress: spec.limitsEgress,
+    limitsProcesses: spec.limitsProcesses,
+    limitsCpuPriority: spec.limitsCpuPriority,
+    bootAutostart: spec.bootAutostart,
+    bootAutostartPriority: spec.bootAutostartPriority,
+    bootAutostartDelay: spec.bootAutostartDelay,
+    bootHostShutdownTimeout: spec.bootHostShutdownTimeout,
+    globalShared: spec.globalShared,
+    globalQuotaMultiplier: spec.globalQuotaMultiplier,
+    globalMaxInstances: spec.globalMaxInstances,
+    allowInstanceDeletion: spec.allowInstanceDeletion
+  }
+
+  if (!existing) {
+    const packageId = await db.createPackage(
+      {
+        userId: ownerId,
+        ...packageData
+      },
+      owner.role === 'admin'
+    )
+
+    stats.packages.created += 1
+    return packageId
+  }
+
+  await db.updatePackage(existing.id, packageData, owner.role === 'admin')
+  stats.packages.updated += 1
+  return existing.id
+}
+
+async function ensurePlans(packageId: number, plans: SeedPlanSpec[]): Promise<void> {
+  const existingPlans = await db.getPlansByPackageId(packageId)
+  const existingByName = new Map(existingPlans.map(plan => [plan.name, plan]))
+  const expectedNames = new Set<string>()
+
+  // 关键流程：方案使用 packageId + name 做唯一识别，重复执行时只更新不重复插入。
+  for (const plan of plans) {
+    expectedNames.add(plan.name)
+    const existing = existingByName.get(plan.name)
+
+    if (!existing) {
+      await db.createPlan({
+        packageId,
+        name: plan.name,
+        description: plan.description,
+        cpu: plan.cpu,
+        memory: plan.memory,
+        disk: plan.disk,
+        portLimit: plan.portLimit,
+        snapshotLimit: plan.snapshotLimit,
+        backupLimit: plan.backupLimit,
+        siteLimit: plan.siteLimit,
+        swapSize: plan.swapSize,
+        trafficLimit: plan.trafficLimit,
+        trafficLimitSpeed: plan.trafficLimitSpeed,
+        price: plan.price,
+        billingCycle: plan.billingCycle,
+        setupFee: plan.setupFee,
+        isActive: plan.isActive,
+        sortOrder: plan.sortOrder,
+        slaGuarantee: plan.slaGuarantee
+      })
+      stats.plans.created += 1
+      continue
+    }
+
+    await db.updatePlan(existing.id, {
+      description: plan.description,
+      cpu: plan.cpu,
+      memory: plan.memory,
+      disk: plan.disk,
+      portLimit: plan.portLimit,
+      snapshotLimit: plan.snapshotLimit,
+      backupLimit: plan.backupLimit,
+      siteLimit: plan.siteLimit,
+      swapSize: plan.swapSize,
+      trafficLimit: plan.trafficLimit,
+      trafficLimitSpeed: plan.trafficLimitSpeed,
+      price: plan.price,
+      billingCycle: plan.billingCycle,
+      setupFee: plan.setupFee,
+      isActive: plan.isActive,
+      sortOrder: plan.sortOrder,
+      slaGuarantee: plan.slaGuarantee
+    })
+    stats.plans.updated += 1
+  }
+
+  for (const existing of existingPlans) {
+    if (!expectedNames.has(existing.name) && existing.isActive) {
+      await db.updatePlan(existing.id, {
+        isActive: false
+      })
+      stats.plans.updated += 1
+    }
+  }
+}
+
+const seedUsers: SeedUserSpec[] = [
+  {
+    username: 'admin',
+    email: 'admin@incudal.local',
+    role: 'admin'
+  },
+  {
+    username: 'seed-market-alpha',
+    email: 'seed-market-alpha@incudal.local',
+    role: 'user',
+    password: 'SeedAlpha123!',
+    quota: {
+      hostLimit: 8,
+      packageLimit: 8
+    }
+  },
+  {
+    username: 'seed-market-beta',
+    email: 'seed-market-beta@incudal.local',
+    role: 'user',
+    password: 'SeedBeta123!',
+    quota: {
+      hostLimit: 8,
+      packageLimit: 8
+    }
+  }
+]
+
+const seedHosts: SeedHostSpec[] = [
+  {
+    ownerUsername: 'admin',
+    name: 'seed-official-us-west',
+    url: 'https://seed-official-us-west.local',
+    location: 'Los Angeles, US',
+    countryCode: 'us',
+    architecture: 'x86_64',
+    instanceType: 'both',
+    status: 'online',
+    tags: ['seed', 'official', 'us-west'],
+    natPublicIp: '198.51.100.10',
+    natPortStart: 20000,
+    natPortEnd: 24999,
+    ipAddress: '10.10.0.10',
+    storageDriver: 'zfs',
+    storageType: 'loop',
+    storageSize: 400,
+    enableApi: true,
+    isInstalled: true,
+    cpuAllowanceMax: 3200,
+    memoryMax: 131072
+  },
+  {
+    ownerUsername: 'admin',
+    name: 'seed-official-eu-vm',
+    url: 'https://seed-official-eu-vm.local',
+    location: 'Frankfurt, DE',
+    countryCode: 'de',
+    architecture: 'x86_64',
+    instanceType: 'vm',
+    status: 'online',
+    tags: ['seed', 'official', 'eu-central'],
+    natPublicIp: '198.51.100.11',
+    natPortStart: 25000,
+    natPortEnd: 29999,
+    ipAddress: '10.10.0.11',
+    storageDriver: 'zfs',
+    storageType: 'loop',
+    storageSize: 600,
+    enableApi: true,
+    isInstalled: true,
+    cpuAllowanceMax: 4800,
+    memoryMax: 196608
+  },
+  {
+    ownerUsername: 'admin',
+    name: 'seed-official-asia-arm',
+    url: 'https://seed-official-asia-arm.local',
+    location: 'Singapore, SG',
+    countryCode: 'sg',
+    architecture: 'aarch64',
+    instanceType: 'container',
+    status: 'online',
+    tags: ['seed', 'official', 'apac'],
+    natPublicIp: '198.51.100.12',
+    natPortStart: 30000,
+    natPortEnd: 34999,
+    ipAddress: '10.10.0.12',
+    storageDriver: 'zfs',
+    storageType: 'loop',
+    storageSize: 320,
+    enableApi: true,
+    isInstalled: true,
+    cpuAllowanceMax: 2400,
+    memoryMax: 98304
+  },
+  {
+    ownerUsername: 'seed-market-alpha',
+    name: 'seed-market-jp-tokyo',
+    url: 'https://seed-market-jp-tokyo.local',
+    location: 'Tokyo, JP',
+    countryCode: 'jp',
+    architecture: 'x86_64',
+    instanceType: 'container',
+    status: 'online',
+    tags: ['seed', 'market', 'tokyo'],
+    natPublicIp: '203.0.113.20',
+    natPortStart: 35000,
+    natPortEnd: 38999,
+    ipAddress: '10.20.0.20',
+    storageDriver: 'zfs',
+    storageType: 'loop',
+    storageSize: 240,
+    enableApi: true,
+    isInstalled: true,
+    cpuAllowanceMax: 2000,
+    memoryMax: 65536
+  },
+  {
+    ownerUsername: 'seed-market-alpha',
+    name: 'seed-market-sg-latency',
+    url: 'https://seed-market-sg-latency.local',
+    location: 'Singapore, SG',
+    countryCode: 'sg',
+    architecture: 'x86_64',
+    instanceType: 'container',
+    status: 'online',
+    tags: ['seed', 'market', 'singapore'],
+    natPublicIp: '203.0.113.21',
+    natPortStart: 39000,
+    natPortEnd: 42999,
+    ipAddress: '10.20.0.21',
+    storageDriver: 'zfs',
+    storageType: 'loop',
+    storageSize: 220,
+    enableApi: true,
+    isInstalled: true,
+    cpuAllowanceMax: 1800,
+    memoryMax: 49152
+  },
+  {
+    ownerUsername: 'seed-market-beta',
+    name: 'seed-market-us-east',
+    url: 'https://seed-market-us-east.local',
+    location: 'Ashburn, US',
+    countryCode: 'us',
+    architecture: 'x86_64',
+    instanceType: 'both',
+    status: 'online',
+    tags: ['seed', 'market', 'us-east'],
+    natPublicIp: '203.0.113.22',
+    natPortStart: 43000,
+    natPortEnd: 46999,
+    ipAddress: '10.30.0.22',
+    storageDriver: 'zfs',
+    storageType: 'loop',
+    storageSize: 260,
+    enableApi: true,
+    isInstalled: true,
+    cpuAllowanceMax: 2200,
+    memoryMax: 65536
+  }
+]
+
+const seedPackages: SeedPackageSpec[] = [
+  {
+    ownerUsername: 'admin',
+    name: 'SEED Official Edge Container',
+    description: 'Public official container package for local smoke testing across US and APAC.',
+    hostNames: ['seed-official-us-west', 'seed-official-asia-arm'],
+    cpuMax: 300,
+    memoryMax: 8192,
+    diskMax: 102400,
+    bandwidthMax: 2000,
+    networkMode: 'nat_ipv6',
+    instanceType: 'container',
+    privileged: true,
+    nested: true,
+    active: true,
+    portLimit: 40,
+    snapshotLimit: 8,
+    backupLimit: 4,
+    siteLimit: 12,
+    monthlyTrafficLimit: bytesFromGb(800),
+    ioLimitMode: 'throughput',
+    limitsRead: '250MB',
+    limitsWrite: '250MB',
+    limitsReadIops: 1200,
+    limitsWriteIops: 1200,
+    limitsIngress: '1Gbit',
+    limitsEgress: '1Gbit',
+    limitsProcesses: 1200,
+    limitsCpuPriority: 10,
+    bootAutostart: true,
+    bootAutostartPriority: 20,
+    bootAutostartDelay: 15,
+    bootHostShutdownTimeout: 45,
+    globalShared: true,
+    globalQuotaMultiplier: 2,
+    globalMaxInstances: 6,
+    allowInstanceDeletion: true,
+    plans: [
+      {
+        name: 'Mini',
+        description: '25% CPU / 512MB memory / 15GB disk',
+        cpu: 25,
+        memory: 512,
+        disk: 15360,
+        portLimit: 10,
+        snapshotLimit: 3,
+        backupLimit: 1,
+        siteLimit: 2,
+        swapSize: 0,
+        trafficLimit: bytesFromGb(120),
+        trafficLimitSpeed: '3Mbit',
+        price: 690,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 10,
+        slaGuarantee: 99.5
+      },
+      {
+        name: 'Standard',
+        description: '60% CPU / 2GB memory / 40GB disk',
+        cpu: 60,
+        memory: 2048,
+        disk: 40960,
+        portLimit: 20,
+        snapshotLimit: 5,
+        backupLimit: 2,
+        siteLimit: 5,
+        swapSize: 512,
+        trafficLimit: bytesFromGb(260),
+        trafficLimitSpeed: '5Mbit',
+        price: 1990,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 20,
+        slaGuarantee: 99.9
+      },
+      {
+        name: 'Compute',
+        description: '120% CPU / 4GB memory / 80GB disk',
+        cpu: 120,
+        memory: 4096,
+        disk: 81920,
+        portLimit: 35,
+        snapshotLimit: 8,
+        backupLimit: 4,
+        siteLimit: 8,
+        swapSize: 1024,
+        trafficLimit: bytesFromGb(520),
+        trafficLimitSpeed: '10Mbit',
+        price: 3990,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 30,
+        slaGuarantee: 99.95
+      }
+    ]
+  },
+  {
+    ownerUsername: 'admin',
+    name: 'SEED Official EU VM',
+    description: 'Public official VM package for local billing and scheduler testing.',
+    hostNames: ['seed-official-eu-vm'],
+    cpuMax: 600,
+    memoryMax: 16384,
+    diskMax: 204800,
+    bandwidthMax: 3000,
+    networkMode: 'nat_ipv6',
+    instanceType: 'vm',
+    privileged: false,
+    nested: false,
+    active: true,
+    portLimit: 20,
+    snapshotLimit: 6,
+    backupLimit: 4,
+    siteLimit: 2,
+    monthlyTrafficLimit: bytesFromGb(1000),
+    ioLimitMode: 'iops',
+    limitsRead: '300MB',
+    limitsWrite: '300MB',
+    limitsReadIops: 2000,
+    limitsWriteIops: 2000,
+    limitsIngress: '1Gbit',
+    limitsEgress: '1Gbit',
+    limitsProcesses: 600,
+    limitsCpuPriority: 8,
+    bootAutostart: true,
+    bootAutostartPriority: 15,
+    bootAutostartDelay: 20,
+    bootHostShutdownTimeout: 60,
+    globalShared: true,
+    globalQuotaMultiplier: 1.5,
+    globalMaxInstances: 4,
+    allowInstanceDeletion: true,
+    plans: [
+      {
+        name: 'VM Starter',
+        description: '100% CPU / 2GB memory / 40GB disk',
+        cpu: 100,
+        memory: 2048,
+        disk: 40960,
+        portLimit: 6,
+        snapshotLimit: 2,
+        backupLimit: 1,
+        siteLimit: 0,
+        swapSize: 0,
+        trafficLimit: bytesFromGb(200),
+        trafficLimitSpeed: '5Mbit',
+        price: 2990,
+        billingCycle: 1,
+        setupFee: 500,
+        isActive: true,
+        sortOrder: 10,
+        slaGuarantee: 99.9
+      },
+      {
+        name: 'VM Business',
+        description: '200% CPU / 4GB memory / 80GB disk',
+        cpu: 200,
+        memory: 4096,
+        disk: 81920,
+        portLimit: 12,
+        snapshotLimit: 4,
+        backupLimit: 2,
+        siteLimit: 1,
+        swapSize: 0,
+        trafficLimit: bytesFromGb(400),
+        trafficLimitSpeed: '10Mbit',
+        price: 5990,
+        billingCycle: 1,
+        setupFee: 1000,
+        isActive: true,
+        sortOrder: 20,
+        slaGuarantee: 99.95
+      }
+    ]
+  },
+  {
+    ownerUsername: 'seed-market-alpha',
+    name: 'SEED Market APAC Burst',
+    description: 'Hosted public package for local market testing in Tokyo and Singapore.',
+    hostNames: ['seed-market-jp-tokyo', 'seed-market-sg-latency'],
+    cpuMax: 240,
+    memoryMax: 6144,
+    diskMax: 81920,
+    bandwidthMax: 1500,
+    networkMode: 'nat_ipv6_nat',
+    instanceType: 'container',
+    privileged: true,
+    nested: true,
+    active: true,
+    portLimit: 32,
+    snapshotLimit: 6,
+    backupLimit: 3,
+    siteLimit: 6,
+    monthlyTrafficLimit: bytesFromGb(500),
+    ioLimitMode: 'throughput',
+    limitsRead: '180MB',
+    limitsWrite: '180MB',
+    limitsReadIops: 1000,
+    limitsWriteIops: 1000,
+    limitsIngress: '600Mbit',
+    limitsEgress: '600Mbit',
+    limitsProcesses: 900,
+    limitsCpuPriority: 9,
+    bootAutostart: true,
+    bootAutostartPriority: 25,
+    bootAutostartDelay: 10,
+    bootHostShutdownTimeout: 40,
+    globalShared: true,
+    globalQuotaMultiplier: 1.5,
+    globalMaxInstances: 5,
+    allowInstanceDeletion: true,
+    plans: [
+      {
+        name: 'Burst Nano',
+        description: '30% CPU / 768MB memory / 20GB disk',
+        cpu: 30,
+        memory: 768,
+        disk: 20480,
+        portLimit: 8,
+        snapshotLimit: 2,
+        backupLimit: 1,
+        siteLimit: 1,
+        swapSize: 0,
+        trafficLimit: bytesFromGb(80),
+        trafficLimitSpeed: '2Mbit',
+        price: 880,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 10,
+        slaGuarantee: 99.5
+      },
+      {
+        name: 'Burst Plus',
+        description: '80% CPU / 2GB memory / 45GB disk',
+        cpu: 80,
+        memory: 2048,
+        disk: 46080,
+        portLimit: 16,
+        snapshotLimit: 4,
+        backupLimit: 2,
+        siteLimit: 3,
+        swapSize: 512,
+        trafficLimit: bytesFromGb(180),
+        trafficLimitSpeed: '5Mbit',
+        price: 2280,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 20,
+        slaGuarantee: 99.8
+      },
+      {
+        name: 'Burst Pro',
+        description: '140% CPU / 4GB memory / 70GB disk',
+        cpu: 140,
+        memory: 4096,
+        disk: 71680,
+        portLimit: 24,
+        snapshotLimit: 6,
+        backupLimit: 3,
+        siteLimit: 5,
+        swapSize: 1024,
+        trafficLimit: bytesFromGb(320),
+        trafficLimitSpeed: '8Mbit',
+        price: 3680,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 30,
+        slaGuarantee: 99.9
+      }
+    ]
+  },
+  {
+    ownerUsername: 'seed-market-beta',
+    name: 'SEED Market US Balanced',
+    description: 'Hosted public package for local market testing in the US East region.',
+    hostNames: ['seed-market-us-east'],
+    cpuMax: 260,
+    memoryMax: 8192,
+    diskMax: 102400,
+    bandwidthMax: 1800,
+    networkMode: 'nat',
+    instanceType: 'container',
+    privileged: true,
+    nested: true,
+    active: true,
+    portLimit: 28,
+    snapshotLimit: 5,
+    backupLimit: 3,
+    siteLimit: 4,
+    monthlyTrafficLimit: bytesFromGb(420),
+    ioLimitMode: 'throughput',
+    limitsRead: '200MB',
+    limitsWrite: '200MB',
+    limitsReadIops: 1100,
+    limitsWriteIops: 1100,
+    limitsIngress: '700Mbit',
+    limitsEgress: '700Mbit',
+    limitsProcesses: 950,
+    limitsCpuPriority: 9,
+    bootAutostart: true,
+    bootAutostartPriority: 18,
+    bootAutostartDelay: 12,
+    bootHostShutdownTimeout: 40,
+    globalShared: true,
+    globalQuotaMultiplier: 1.2,
+    globalMaxInstances: 4,
+    allowInstanceDeletion: true,
+    plans: [
+      {
+        name: 'Balanced S',
+        description: '40% CPU / 1GB memory / 25GB disk',
+        cpu: 40,
+        memory: 1024,
+        disk: 25600,
+        portLimit: 10,
+        snapshotLimit: 2,
+        backupLimit: 1,
+        siteLimit: 1,
+        swapSize: 0,
+        trafficLimit: bytesFromGb(100),
+        trafficLimitSpeed: '3Mbit',
+        price: 1090,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 10,
+        slaGuarantee: 99.6
+      },
+      {
+        name: 'Balanced M',
+        description: '90% CPU / 3GB memory / 60GB disk',
+        cpu: 90,
+        memory: 3072,
+        disk: 61440,
+        portLimit: 20,
+        snapshotLimit: 4,
+        backupLimit: 2,
+        siteLimit: 2,
+        swapSize: 512,
+        trafficLimit: bytesFromGb(220),
+        trafficLimitSpeed: '6Mbit',
+        price: 2490,
+        billingCycle: 1,
+        setupFee: 0,
+        isActive: true,
+        sortOrder: 20,
+        slaGuarantee: 99.85
+      }
+    ]
+  }
+]
+
+async function main(): Promise<void> {
+  await db.initPrismaDatabase()
+
+  // 先准备账号，再按账号归属写入节点、公开套餐和套餐方案。
+  for (const user of seedUsers) {
+    await ensureUser(user)
+  }
+
+  for (const host of seedHosts) {
+    await ensureHost(host)
+  }
+
+  for (const pkg of seedPackages) {
+    const packageId = await ensurePackage(pkg)
+    await ensurePlans(packageId, pkg.plans)
+  }
+
+  console.log('[seed:test-data] completed')
+  console.log(
+    `[seed:test-data] users created=${stats.users.created} updated=${stats.users.updated}, ` +
+    `hosts created=${stats.hosts.created} updated=${stats.hosts.updated}, ` +
+    `packages created=${stats.packages.created} updated=${stats.packages.updated}, ` +
+    `plans created=${stats.plans.created} updated=${stats.plans.updated}`
+  )
+  console.log(
+    `[seed:test-data] seeded targets users=${seedUsers.length}, hosts=${seedHosts.length}, ` +
+    `packages=${seedPackages.length}, plans=${countPlans(seedPackages)}`
+  )
+}
+
+void main().catch(async error => {
+  console.error('[seed:test-data] failed:', error)
+  process.exitCode = 1
+}).finally(async () => {
+  await prisma.$disconnect()
+})
diff --git a/server/scripts/test-agent-auth.ts b/server/scripts/test-agent-auth.ts
new file mode 100644
index 0000000..834e09b
--- /dev/null
+++ b/server/scripts/test-agent-auth.ts
@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict'
+import {
+  createAgentBodyHash,
+  createAgentSignature,
+  generateAgentSecret,
+  isAgentTimestampFresh,
+  stableStringifyAgentBody,
+  verifyAgentSignature
+} from '../src/lib/agent-auth.js'
+
+const bodyA = {
+  version: '0.1.0',
+  resources: {
+    memory: 1024,
+    cpu: 8
+  },
+  capabilities: ['heartbeat', 'report']
+}
+
+const bodyB = {
+  capabilities: ['heartbeat', 'report'],
+  resources: {
+    cpu: 8,
+    memory: 1024
+  },
+  version: '0.1.0'
+}
+
+assert.equal(stableStringifyAgentBody(bodyA), stableStringifyAgentBody(bodyB))
+assert.equal(createAgentBodyHash(bodyA), createAgentBodyHash(bodyB))
+
+const secret = generateAgentSecret()
+const payload = {
+  method: 'POST',
+  path: '/api/agent/heartbeat',
+  timestamp: String(Date.now()),
+  nonce: 'nonce-123456',
+  bodyHash: createAgentBodyHash(bodyA)
+}
+const signature = createAgentSignature(secret, payload)
+
+assert.equal(verifyAgentSignature(secret, payload, signature), true)
+assert.equal(verifyAgentSignature(secret, { ...payload, path: '/api/agent/report' }, signature), false)
+assert.equal(isAgentTimestampFresh(payload.timestamp), true)
+assert.equal(isAgentTimestampFresh(String(Date.now() - 10 * 60 * 1000)), false)
+
+console.log('agent-auth self-test passed')
diff --git a/server/scripts/test-security-config.ts b/server/scripts/test-security-config.ts
new file mode 100644
index 0000000..9228fe1
--- /dev/null
+++ b/server/scripts/test-security-config.ts
@@ -0,0 +1,79 @@
+import assert from 'node:assert/strict'
+import { checkJwtConfig } from '../src/lib/security-config.js'
+
+const originalEnv = {
+  NODE_ENV: process.env.NODE_ENV,
+  JWT_SECRET: process.env.JWT_SECRET,
+  ENCRYPTION_KEY: process.env.ENCRYPTION_KEY
+}
+
+function setEnv(input: {
+  nodeEnv: string
+  jwtSecret?: string
+  encryptionKey?: string
+}) {
+  process.env.NODE_ENV = input.nodeEnv
+  if (input.jwtSecret === undefined) {
+    delete process.env.JWT_SECRET
+  } else {
+    process.env.JWT_SECRET = input.jwtSecret
+  }
+  if (input.encryptionKey === undefined) {
+    delete process.env.ENCRYPTION_KEY
+  } else {
+    process.env.ENCRYPTION_KEY = input.encryptionKey
+  }
+}
+
+function restoreEnv() {
+  for (const [key, value] of Object.entries(originalEnv)) {
+    if (value === undefined) {
+      delete process.env[key]
+    } else {
+      process.env[key] = value
+    }
+  }
+}
+
+const strongJwtSecret = 'JwT!AlphaBeta2026_Long_Value_ABCDE'
+const strongEncryptionKey = 'EncK!AlphaBeta2026_Long_Value_ABCDE'
+
+try {
+  setEnv({
+    nodeEnv: 'production',
+    jwtSecret: strongJwtSecret
+  })
+  let result = checkJwtConfig()
+  assert.equal(result.valid, false)
+  assert.ok(result.warnings.includes('ENCRYPTION_KEY must be configured in production'))
+
+  setEnv({
+    nodeEnv: 'production',
+    jwtSecret: strongJwtSecret,
+    encryptionKey: 'ShortEnc1!'
+  })
+  result = checkJwtConfig()
+  assert.equal(result.valid, false)
+  assert.ok(result.warnings.includes('ENCRYPTION_KEY must be at least 32 characters in production'))
+
+  setEnv({
+    nodeEnv: 'production',
+    jwtSecret: strongJwtSecret,
+    encryptionKey: strongEncryptionKey
+  })
+  result = checkJwtConfig()
+  assert.equal(result.valid, true)
+  assert.deepEqual(result.warnings, [])
+
+  setEnv({
+    nodeEnv: 'development',
+    jwtSecret: strongJwtSecret
+  })
+  result = checkJwtConfig()
+  assert.equal(result.valid, true)
+  assert.ok(result.warnings.includes('ENCRYPTION_KEY not configured, will use JWT_SECRET as fallback'))
+
+  console.log('security-config self-test passed')
+} finally {
+  restoreEnv()
+}
diff --git a/server/src/app.ts b/server/src/app.ts
new file mode 100644
index 0000000..bcd3b22
--- /dev/null
+++ b/server/src/app.ts
@@ -0,0 +1,951 @@
+// 确保环境变量被加载（必须在最前面）
+import 'dotenv/config'
+
+import Fastify, { type FastifyReply, type FastifyRequest } from 'fastify'
+import cors from '@fastify/cors'
+import helmet from '@fastify/helmet'
+import fastifyStatic from '@fastify/static'
+import fastifyJwt from '@fastify/jwt'
+import fastifyMultipart from '@fastify/multipart'
+import fastifyWebsocket from '@fastify/websocket'
+import fastifyCookie from '@fastify/cookie'
+import rateLimit from '@fastify/rate-limit'
+import { readFile } from 'fs/promises'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+// 导入数据库
+import { initPrismaDatabase } from './db/init-prisma.js'
+import { prisma } from './db/prisma.js'
+
+// 导入安全工具
+import { checkJwtConfig, isAccessTokenInvalidated } from './lib/security.js'
+
+// 导入日志敏感信息过滤器
+import { logSerializers } from './lib/log-sanitizer.js'
+
+// 导入速率限制配置
+import {
+  globalRateLimit,
+  findRateLimitRule,
+  isWhitelisted,
+  printRateLimitSummary
+} from './config/rate-limit.js'
+
+// 导入路由
+import authRoutes from './routes/auth.js'
+import userRoutes from './routes/users.js'
+import instanceRoutes from './routes/instances.js'
+import hostRoutes from './routes/hosts.js'
+import packageRoutes from './routes/packages.js'
+import snapshotRoutes from './routes/snapshots.js'
+import sshKeyRoutes from './routes/ssh-keys.js'
+import notificationRoutes from './routes/notifications.js'
+import oauthRoutes from './routes/oauth.js'
+import helpRoutes from './routes/help.js'
+import imageRoutes from './routes/images.js'
+import logRoutes from './routes/logs.js'
+import systemConfigRoutes from './routes/system-config.js'
+import trafficRoutes from './routes/traffic.js'
+import transferRoutes from './routes/transfers.js'
+import friendsRoutes from './routes/friends.js'
+import ipAddressRoutes from './routes/ip-addresses.js'
+import verificationRoutes from './routes/verification.js'
+import proxySitesRoutes from './routes/proxy-sites.js'
+import inboxRoutes from './routes/inbox.js'
+import terminalRoutes from './routes/terminal.js'
+import terminalSavedCommandRoutes from './routes/terminal-saved-commands.js'
+import announcementsRoutes from './routes/announcements.js'
+import ticketsRoutes from './routes/tickets.js'
+import checkinRoutes from './routes/checkin.js'
+import resourcePoolRoutes from './routes/resource-pool.js'
+import redeemCodesRoutes from './routes/redeem-codes.js'
+import customInitCommandRoutes from './routes/custom-init-commands.js'
+import batchConfigRoutes from './routes/batch-config.js'
+import balanceRoutes from './routes/balance.js'
+import hostingRoutes from './routes/hosting.js'
+import instanceBillingRoutes from './routes/instance-billing.js'
+import instanceDestroyRoutes from './routes/instance-destroy.js'
+import rechargeRoutes from './routes/recharge.js'
+import adminBillingRoutes from './routes/admin-billing.js'
+import adminStatisticsRoutes from './routes/admin-statistics.js'
+import adminHostingRoutes from './routes/admin-hosting.js'
+import affRoutes from './routes/aff.js'
+import entertainmentRoutes from './routes/entertainment.js'
+import adminEntertainmentRoutes from './routes/admin-entertainment.js'
+import mailRoutes from './routes/mail.js'
+import adminNotificationChannelsRoutes from './routes/admin-notification-channels.js'
+import telegramRoutes from './routes/telegram.js'
+import agentRoutes from './routes/agent.js'
+import userInviteRoutes from './routes/user-invites.js'
+import vipLevelRoutes from './routes/vip-levels.js'
+import vipBenefitRoutes from './routes/vip-benefits.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+async function failRetiredBackupTasks(): Promise<{ restoreCount: number; uploadCount: number }> {
+  const { prisma } = await import('./db/prisma.js')
+
+  const [restoreResult, uploadResult] = await Promise.all([
+    prisma.restoreTask.updateMany({
+      where: {
+        status: { in: ['PENDING', 'PROCESSING'] }
+      },
+      data: {
+        status: 'FAILED',
+        error: '备份恢复功能已下线，任务已终止',
+        finishedAt: new Date()
+      }
+    }),
+    prisma.backupUploadTask.updateMany({
+      where: {
+        status: { in: ['PENDING', 'PROCESSING'] }
+      },
+      data: {
+        status: 'FAILED',
+        error: '备份上传功能已下线，任务已终止',
+        finishedAt: new Date()
+      }
+    })
+  ])
+
+  return {
+    restoreCount: restoreResult.count,
+    uploadCount: uploadResult.count
+  }
+}
+
+// 创建 Fastify 实例
+// 日志级别: fatal, error, warn, info, debug, trace
+// 开发环境使用 'info' 减少噪音，可通过 LOG_LEVEL 环境变量覆盖
+const fastify = Fastify({
+  logger: {
+    level: process.env.LOG_LEVEL || (process.env.NODE_ENV === 'production' ? 'info' : 'info'),
+    transport: process.env.NODE_ENV !== 'production' ? {
+      target: 'pino-pretty',
+      options: { colorize: true }
+    } : undefined,
+    // 安全改进：使用序列化器过滤敏感信息
+    serializers: logSerializers
+  },
+  // 关闭请求/响应日志，减少噪音
+  disableRequestLogging: process.env.DISABLE_REQUEST_LOG !== 'false',
+  // 信任代理：当使用 Cloudflare 等代理时，需要信任 X-Forwarded-* 头
+  trustProxy: process.env.NODE_ENV === 'production',
+  // 请求大小限制（防止 DoS 攻击）
+  bodyLimit: parseInt(process.env.BODY_LIMIT || '10485760', 10), // 默认 10MB
+  // 参数长度限制（使用新的 routerOptions 格式）
+  routerOptions: {
+    maxParamLength: 500
+  },
+  // 服务器超时设置（默认为120秒，以支持长时间运行的操作）
+  requestTimeout: 125000, // 125秒，比操作超时稍长
+  keepAliveTimeout: 125000, // 125秒，保持连接时间
+  forceCloseConnections: false
+})
+
+// 自定义 schema 验证错误处理，返回友好的错误信息
+import type { FastifyError } from 'fastify'
+
+fastify.setErrorHandler((error: FastifyError, _request, reply) => {
+  if ((error as FastifyError & { code?: string }).code === 'FST_REQ_FILE_TOO_LARGE') {
+    return reply.code(413).send({
+      error: 'Uploaded file is too large',
+      code: 'FILE_TOO_LARGE'
+    })
+  }
+
+  // 处理 schema 验证错误
+  if (error.validation) {
+    const messages: string[] = []
+    for (const err of error.validation) {
+      const field = err.instancePath?.replace('/', '') || (err.params as Record<string, string>)?.missingProperty || 'field'
+      if (err.keyword === 'minLength') {
+        if (field === 'password') {
+          messages.push('Password must be at least 8 characters')
+        } else if (field === 'username') {
+          messages.push('Username must be at least 3 characters')
+        } else {
+          messages.push(`${field} is too short`)
+        }
+      } else if (err.keyword === 'maxLength') {
+        messages.push(`${field} is too long`)
+      } else if (err.keyword === 'pattern') {
+        if (field === 'username') {
+          messages.push('Username must start with a letter and contain only letters, numbers, underscores, and hyphens')
+        } else {
+          messages.push(`${field} format is invalid`)
+        }
+      } else if (err.keyword === 'format') {
+        if ((err.params as Record<string, string>)?.format === 'email') {
+          messages.push('Please enter a valid email address')
+        } else {
+          messages.push(`${field} format is invalid`)
+        }
+      } else if (err.keyword === 'required') {
+        messages.push(`${field} is required`)
+      } else {
+        messages.push(err.message || `${field} is invalid`)
+      }
+    }
+    return reply.code(400).send({
+      error: messages[0] || 'Validation failed',
+      code: 'VALIDATION_ERROR',
+      details: messages.length > 1 ? messages : undefined
+    })
+  }
+
+  // 其他错误：生产环境不回显 5xx 内部错误细节
+  const statusCode = error.statusCode || 500
+  const publicMessage = process.env.NODE_ENV === 'production' && statusCode >= 500
+    ? 'Internal server error'
+    : (error.message || 'Internal server error')
+  return reply.code(statusCode).send({ error: publicMessage })
+})
+
+// 注册插件
+await fastify.register(cors, {
+  origin: process.env.NODE_ENV === 'production'
+    ? (process.env.FRONTEND_URL ? process.env.FRONTEND_URL.split(',').map(url => url.trim()) : false)
+    : ['http://localhost:43173', 'http://127.0.0.1:43173'],
+  credentials: true
+})
+
+// 安全头 - 使用 @fastify/helmet
+await fastify.register(helmet, {
+  // Content Security Policy - 生产环境启用
+  contentSecurityPolicy: process.env.NODE_ENV === 'production' ? {
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: [
+        "'self'",
+        "'unsafe-inline'",  // Vue 需要
+        'https://challenges.cloudflare.com',  // Turnstile
+        'https://static.cloudflareinsights.com',  // Cloudflare Analytics
+      ],
+      styleSrc: [
+        "'self'",
+        "'unsafe-inline'",  // Vue 和 Tailwind 需要
+        'https://fonts.googleapis.com',
+      ],
+      fontSrc: [
+        "'self'",
+        'https://fonts.gstatic.com',
+        'data:',
+      ],
+      imgSrc: [
+        "'self'",
+        'data:',
+        'blob:',
+        'http:',
+        'https:',
+        'https://kkksr.com',  // 帮助文档图片
+        'https://api.dicebear.com',  // 头像服务
+        'https://dicebear.incudal.com',  // 自建头像服务
+        'https://*.githubusercontent.com',  // GitHub 头像
+        'https://avatars.githubusercontent.com',
+        'https://lh3.googleusercontent.com',  // Google 头像
+      ],
+      connectSrc: [
+        "'self'",
+        'wss:',  // WebSocket 连接
+        'https://challenges.cloudflare.com',  // Turnstile API
+        'https://cloudflareinsights.com',  // Cloudflare Analytics
+        'https://api.dicebear.com',  // 头像 API
+        'https://dicebear.incudal.com',  // 自建头像服务
+      ],
+      frameSrc: [
+        "'self'",
+        'https://challenges.cloudflare.com',  // Turnstile iframe
+      ],
+      objectSrc: ["'none'"],
+      baseUri: ["'self'"],
+      formAction: ["'self'"],
+      frameAncestors: ["'none'"],  // 防止点击劫持
+      upgradeInsecureRequests: null, // 必须显式为 null，否则 helmet 默认会加上该策略强制升级 HTTPS 引发白屏
+    },
+  } : false,
+  // 跨域嵌入策略 - 允许加载外部资源
+  crossOriginEmbedderPolicy: false,
+  // 跨域资源策略
+  crossOriginResourcePolicy: { policy: 'cross-origin' },
+  // HSTS - 纯 HTTP 部署需禁用
+  hsts: false,
+  // 禁止 MIME 类型嗅探
+  noSniff: true,
+  // 防止点击劫持
+  frameguard: { action: 'deny' },
+  // XSS 过滤
+  xssFilter: true,
+  // 隐藏 X-Powered-By
+  hidePoweredBy: true,
+  // Referrer Policy
+  referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
+})
+
+await fastify.register(fastifyJwt, {
+  secret: process.env.JWT_SECRET || 'dev-secret-change-in-production'
+})
+
+await fastify.register(fastifyCookie, {
+  secret: process.env.COOKIE_SECRET || 'cookie-secret-change-in-production',
+  parseOptions: {}
+})
+
+await fastify.register(fastifyMultipart, {
+  attachFieldsToBody: false,
+  limits: {
+    files: 6,
+    fileSize: 50 * 1024 * 1024,
+    parts: 30
+  }
+})
+
+// WebSocket 插件注册（安全增强：连接数限制）
+await fastify.register(fastifyWebsocket, {
+  options: {
+    maxPayload: 1048576, // 1MB 最大消息大小
+    // 安全增强：单 IP 最大连接数限制在路由层实现
+  }
+})
+
+// 全局速率限制 (配置来自 config/rate-limit.ts)
+await fastify.register(rateLimit, {
+  global: true,
+  max: globalRateLimit.max,
+  timeWindow: globalRateLimit.timeWindow,
+  keyGenerator: (request) => {
+    // 使用 IP + 路径作为限制键，实现接口级别限制
+    const rule = findRateLimitRule(request.url, request.method)
+    if (rule) {
+      return `${request.ip}:${rule.path}`
+    }
+    return request.ip
+  },
+  errorResponseBuilder: (_request, context) => ({
+    error: 'Too many requests, please try again later',
+    retryAfter: context.after
+  }),
+  // 跳过白名单路径和非 API 请求
+  allowList: (request) => {
+    if (!request.url.startsWith('/api/')) {
+      return true
+    }
+    return isWhitelisted(request.url)
+  }
+})
+
+// 应用接口级别的速率限制配置
+fastify.addHook('onRoute', (routeOptions) => {
+  const rule = findRateLimitRule(routeOptions.url, routeOptions.method as string)
+  if (rule) {
+    routeOptions.config = {
+      ...routeOptions.config,
+      rateLimit: {
+        max: rule.max,
+        timeWindow: rule.timeWindow
+      }
+    }
+  }
+})
+
+// JWT 认证装饰器（简化版：移除 Token 失效检查）
+async function ensureActiveAccessToken(
+  request: FastifyRequest,
+  reply: FastifyReply
+): Promise<boolean> {
+  const user = request.user as { id?: number; username?: string; role?: string; status?: string; sid?: string; iat?: number }
+
+  if (!user?.id || !user.iat) {
+    reply.code(401).send({ error: 'Unauthorized', code: 'UNAUTHORIZED' })
+    return false
+  }
+
+  const invalidated = await isAccessTokenInvalidated(user.id, user.iat, user.sid)
+  if (invalidated) {
+    reply.code(401).send({ error: 'Session expired', code: 'SESSION_INVALIDATED' })
+    return false
+  }
+
+  const currentUser = await prisma.user.findUnique({
+    where: { id: user.id },
+    select: {
+      username: true,
+      role: true,
+      status: true
+    }
+  })
+
+  if (!currentUser) {
+    reply.code(401).send({ error: 'Unauthorized', code: 'UNAUTHORIZED' })
+    return false
+  }
+
+  if (currentUser.status !== 'active') {
+    reply.code(401).send({ error: 'Account banned', code: 'ACCOUNT_BANNED' })
+    return false
+  }
+
+  user.username = currentUser.username
+  user.role = currentUser.role
+  user.status = currentUser.status
+
+  return true
+}
+
+async function ensureCurrentAdmin(
+  request: FastifyRequest,
+  reply: FastifyReply
+): Promise<boolean> {
+  const currentUser = request.user as { id?: number; role?: string; status?: string }
+  if (!currentUser?.id || currentUser.role !== 'admin' || currentUser.status !== 'active') {
+    reply.code(403).send({ error: 'Admin privileges required', code: 'ADMIN_REQUIRED' })
+    return false
+  }
+
+  return true
+}
+
+fastify.decorate('authenticate', async function (request, reply) {
+  try {
+    await request.jwtVerify()
+    if (!(await ensureActiveAccessToken(request, reply))) {
+      return
+    }
+  } catch (err) {
+    reply.code(401).send({ error: 'Unauthorized' })
+  }
+})
+
+// 管理员权限检查 (作为 preHandler 使用)
+fastify.decorate('requireAdmin', async function (request, reply) {
+  // 必须先通过 authenticate，确保 request.user 存在
+  if (!request.user) {
+    return reply.code(401).send({ error: 'Unauthorized', code: 'UNAUTHORIZED' })
+  }
+  if (!(await ensureCurrentAdmin(request, reply))) {
+    return
+  }
+})
+
+// 组合认证+管理员检查的便捷 preHandler（简化版）
+fastify.decorate('authenticateAdmin', async function (request, reply) {
+  try {
+    await request.jwtVerify()
+    if (!(await ensureActiveAccessToken(request, reply))) {
+      return
+    }
+    if (!(await ensureCurrentAdmin(request, reply))) {
+      return
+    }
+  } catch (err) {
+    return reply.code(401).send({ error: 'Unauthorized' })
+  }
+})
+
+// 组合认证+普通用户检查（禁止管理员访问）（简化版）
+fastify.decorate('authenticateUser', async function (request, reply) {
+  try {
+    await request.jwtVerify()
+    if (!(await ensureActiveAccessToken(request, reply))) {
+      return
+    }
+    const user = request.user as { id: number; role?: string }
+    // 禁止管理员访问普通用户专属功能
+    if (user.role === 'admin') {
+      return reply.code(403).send({ error: 'This feature is for regular users only', code: 'USER_ONLY' })
+    }
+  } catch (err) {
+    return reply.code(401).send({ error: 'Unauthorized' })
+  }
+})
+
+// 注意: 安全响应头已由 @fastify/helmet 处理
+// 包括: X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, 
+// Referrer-Policy, HSTS, CSP 等
+
+// 健康检查
+fastify.get('/api/health', async () => {
+  return { status: 'ok', timestamp: new Date().toISOString() }
+})
+
+// 注册 API 路由
+await fastify.register(authRoutes, { prefix: '/api/auth' })
+await fastify.register(userRoutes, { prefix: '/api/users' })
+await fastify.register(instanceRoutes, { prefix: '/api/instances' })
+await fastify.register(hostRoutes, { prefix: '/api/hosts' })
+await fastify.register(packageRoutes, { prefix: '/api/packages' })
+await fastify.register(snapshotRoutes, { prefix: '/api/instances' })
+await fastify.register(sshKeyRoutes, { prefix: '/api/ssh-keys' })
+await fastify.register(notificationRoutes, { prefix: '/api/notifications' })
+await fastify.register(oauthRoutes, { prefix: '/api/oauth' })
+await fastify.register(helpRoutes, { prefix: '/api/help' })
+await fastify.register(imageRoutes, { prefix: '/api/images' })
+await fastify.register(logRoutes, { prefix: '/api/logs' })
+await fastify.register(systemConfigRoutes, { prefix: '/api/system-config' })
+await fastify.register(trafficRoutes, { prefix: '/api' })
+await fastify.register(transferRoutes, { prefix: '/api/transfers' })
+await fastify.register(friendsRoutes, { prefix: '/api/friends' })
+await fastify.register(ipAddressRoutes, { prefix: '/api' })
+await fastify.register(verificationRoutes, { prefix: '/api/verification' })
+await fastify.register(proxySitesRoutes, { prefix: '/api' })
+await fastify.register(inboxRoutes, { prefix: '/api/inbox' })
+await fastify.register(terminalRoutes, { prefix: '/api/ws/instances' })
+await fastify.register(terminalSavedCommandRoutes, { prefix: '/api/terminal-saved-commands' })
+await fastify.register(announcementsRoutes, { prefix: '/api/announcements' })
+await fastify.register(ticketsRoutes, { prefix: '/api/tickets' })
+await fastify.register(checkinRoutes, { prefix: '/api/checkin' })
+  await fastify.register(resourcePoolRoutes, { prefix: '/api/resource-pool' })
+await fastify.register(redeemCodesRoutes, { prefix: '/api' })
+await fastify.register(customInitCommandRoutes, { prefix: '/api/init-commands' })
+await fastify.register(batchConfigRoutes, { prefix: '/api/hosts' })
+await fastify.register(balanceRoutes, { prefix: '/api/balance' })
+await fastify.register(hostingRoutes, { prefix: '/api/hosting' })
+await fastify.register(instanceBillingRoutes, { prefix: '/api/instances' })
+await fastify.register(instanceDestroyRoutes, { prefix: '/api/instances' })
+await fastify.register(rechargeRoutes)
+await fastify.register(adminBillingRoutes)
+await fastify.register(adminStatisticsRoutes)
+await fastify.register(adminHostingRoutes)
+await fastify.register(affRoutes, { prefix: '/api/aff' })
+await fastify.register(entertainmentRoutes, { prefix: '/api/entertainment' })
+await fastify.register(adminEntertainmentRoutes, { prefix: '/api/admin/entertainment' })
+await fastify.register(mailRoutes, { prefix: '/api/mail' })
+await fastify.register(adminNotificationChannelsRoutes, { prefix: '/api/admin/notification-channels' })
+await fastify.register(telegramRoutes, { prefix: '/api/telegram' })
+await fastify.register(agentRoutes, { prefix: '/api/agent' })
+await fastify.register(userInviteRoutes, { prefix: '/api/user-invites' })
+await fastify.register(vipLevelRoutes)
+await fastify.register(vipBenefitRoutes)
+
+// 生产环境：托管前端静态文件
+if (process.env.NODE_ENV === 'production') {
+  const clientDistPath = join(__dirname, '../../client/dist')
+  const indexHtmlPath = join(clientDistPath, 'index.html')
+  let indexHtmlCache: string | null = null
+  let previewBotSafeIndexHtmlCache: string | null = null
+  const linkPreviewBotPatterns = [
+    /telegrambot/i,
+    /discordbot/i,
+    /slackbot/i,
+    /twitterbot/i,
+    /linkedinbot/i,
+    /facebookexternalhit/i,
+    /facebot/i,
+    /skypeuripreview/i,
+    /teamsbot/i
+  ]
+
+  function isLinkPreviewBotRequest(request: FastifyRequest): boolean {
+    const userAgentHeader = request.headers['user-agent']
+    const userAgent = Array.isArray(userAgentHeader) ? userAgentHeader.join(' ') : (userAgentHeader || '')
+    return linkPreviewBotPatterns.some(pattern => pattern.test(userAgent))
+  }
+
+  function buildPreviewBotSafeIndexHtml(html: string): string {
+    return html
+      .replace(/^\s*<meta name="description"[^>]*>\s*$/gim, '')
+      .replace(/^\s*<meta property="og:[^"]+"[^>]*>\s*$/gim, '')
+      .replace(/^\s*<meta name="twitter:[^"]+"[^>]*>\s*$/gim, '')
+      .replace(
+        /<meta name="robots" content="[^"]*">/i,
+        '<meta name="robots" content="noindex,nofollow,noarchive,nosnippet,noimageindex">'
+      )
+  }
+
+  async function getIndexHtml(): Promise<string> {
+    if (indexHtmlCache === null) {
+      indexHtmlCache = await readFile(indexHtmlPath, 'utf8')
+    }
+    return indexHtmlCache
+  }
+
+  async function getPreviewBotSafeIndexHtml(): Promise<string> {
+    if (previewBotSafeIndexHtmlCache === null) {
+      previewBotSafeIndexHtmlCache = buildPreviewBotSafeIndexHtml(await getIndexHtml())
+    }
+    return previewBotSafeIndexHtmlCache
+  }
+
+  async function sendAppIndex(request: FastifyRequest, reply: FastifyReply): Promise<void> {
+    if (isLinkPreviewBotRequest(request)) {
+      reply
+        .type('text/html; charset=utf-8')
+        .header('Cache-Control', 'no-cache, no-store, must-revalidate')
+        .header('X-Robots-Tag', 'noindex, nofollow, noarchive, nosnippet, noimageindex')
+        .send(await getPreviewBotSafeIndexHtml())
+      return
+    }
+
+    await reply.sendFile('index.html', clientDistPath)
+  }
+
+  // 忽略 Cloudflare 的特殊路径（在 onRequest hook 中处理）
+  // 注意：这个 hook 必须在静态文件服务之前执行
+  fastify.addHook('onRequest', async (request, reply) => {
+    // 如果请求 Cloudflare 的 RUM 端点，直接返回 204 并跳过后续处理
+    if (request.url.startsWith('/cdn-cgi/')) {
+      reply.code(204)
+      reply.send()
+      return reply  // 明确返回，确保后续处理器不会执行
+    }
+  })
+
+  // 显式处理根路径，返回 index.html
+  // 必须在静态文件服务之前注册，确保优先匹配
+  fastify.get('/', async (request, reply) => {
+    await sendAppIndex(request, reply)
+  })
+
+  // 注册静态文件服务
+  // 注意：静态文件服务在 API 路由之后注册，Fastify 会按注册顺序匹配路由
+  // 由于 API 路由都有 /api 前缀，静态文件服务不会拦截它们
+  // 显式的 fastify.get('/') 路由会优先于静态文件服务的通配符匹配
+  await fastify.register(fastifyStatic, {
+    root: clientDistPath,
+    prefix: '/',
+    // 设置正确的MIME类型和缓存策略
+    setHeaders: (res, pathName) => {
+      // 注意：在 setHeaders 回调中，响应头尚未发送，所以不需要检查 headersSent
+      // 使用 try-catch 防止可能的错误
+      try {
+        // 确保JavaScript和CSS文件有正确的Content-Type
+        if (pathName.endsWith('.js')) {
+          res.setHeader('Content-Type', 'application/javascript; charset=utf-8')
+        } else if (pathName.endsWith('.css')) {
+          res.setHeader('Content-Type', 'text/css; charset=utf-8')
+        } else if (pathName.endsWith('.html')) {
+          res.setHeader('Content-Type', 'text/html; charset=utf-8')
+          // HTML 文件不缓存，确保总是获取最新版本
+          res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
+        }
+        // 静态资源缓存（JS/CSS/图片等）
+        if (!pathName.endsWith('.html')) {
+          res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
+        }
+      } catch (error) {
+        // 忽略设置响应头时的错误（例如响应头已发送）
+        // 这不应该发生，但作为安全措施
+      }
+    },
+    // 禁用目录列表
+    list: false,
+    // 不自动处理 index.html（由显式路由和 404 handler 处理）
+    index: false,
+    // 允许访问所有文件类型
+    wildcard: true
+  })
+
+  // 404 处理器必须在静态文件服务之后注册
+  // 注意：这个处理器会捕获所有未匹配的路由
+  fastify.setNotFoundHandler(async (request, reply) => {
+    // 忽略 Cloudflare 的特殊路径
+    if (request.url.startsWith('/cdn-cgi/')) {
+      return reply.code(204).send()
+    }
+
+    // API 路由返回 JSON 错误
+    if (request.url.startsWith('/api/')) {
+      return reply.code(404).send({ error: 'API 路由不存在' })
+    }
+
+    // 对于前端路由（非 API、非静态资源），返回 index.html
+    // 这样 Vue Router 的 history 模式可以正常工作
+    // 检查是否是静态资源请求（已有文件扩展名）
+    const hasExtension = /\.[a-zA-Z0-9]+$/.test(request.url.split('?')[0])
+    if (hasExtension) {
+      // 有扩展名的请求，返回 404
+      return reply.code(404).send({ error: '文件不存在' })
+    }
+
+    // 没有扩展名的请求，返回 index.html（前端路由）
+    await sendAppIndex(request, reply)
+  })
+}
+
+// 启动服务器
+const start = async (): Promise<void> => {
+  try {
+    // 安全配置检查
+    const jwtCheck = checkJwtConfig()
+    if (!jwtCheck.valid) {
+      console.error('❌ 安全配置错误:')
+      jwtCheck.warnings.forEach(w => console.error(`   - ${w}`))
+      process.exit(1)
+    }
+    if (jwtCheck.warnings.length > 0) {
+      console.warn('⚠️  安全配置警告:')
+      jwtCheck.warnings.forEach(w => console.warn(`   - ${w}`))
+    }
+
+    // 初始化 Prisma 数据库
+    // 支持通过环境变量 RESET_DATABASE=true 清空数据库
+    await initPrismaDatabase({
+      resetDatabase: process.env.RESET_DATABASE === 'true' || process.env.RESET_DATABASE === '1'
+    })
+
+    const retiredTaskCleanup = await failRetiredBackupTasks()
+    if (retiredTaskCleanup.restoreCount > 0 || retiredTaskCleanup.uploadCount > 0) {
+      console.log(`📦 已终止 ${retiredTaskCleanup.restoreCount} 个历史恢复任务，${retiredTaskCleanup.uploadCount} 个历史上传任务`)
+    }
+
+    const port = parseInt(process.env.PORT || '3000', 10)
+    const host = process.env.HOST || '127.0.0.1'
+
+    await fastify.listen({ port, host })
+    console.log(`🚀 Incudal 服务已启动: http://localhost:${port}`)
+
+    // 启动流量调度器
+    const { startTrafficScheduler } = await import('./services/traffic-scheduler.js')
+    startTrafficScheduler()
+
+    // 启动自动快照/备份调度器
+    const { startAutoPolicyScheduler } = await import('./services/auto-policy-scheduler.js')
+    startAutoPolicyScheduler()
+
+    // 启动计费调度器（自动续费、到期封停、到期删除、到期提醒）
+    const { startBillingScheduler } = await import('./services/billing-scheduler.js')
+    startBillingScheduler()
+
+    // 启动邮箱订阅过期检查调度器
+    const { startMailExpiryScheduler } = await import('./services/mail-expiry-scheduler.js')
+    startMailExpiryScheduler()
+
+    // 启动托管余额调度器（解冻）
+    const { startHostingScheduler } = await import('./services/hosting-scheduler.js')
+    startHostingScheduler()
+
+    // 启动实例状态同步调度器
+    const { startStatusScheduler } = await import('./services/status-scheduler.js')
+    startStatusScheduler()
+
+    // 启动实例操作任务调度器
+    const { cleanupStaleTasks: cleanupStaleInstanceTasks, startInstanceTaskWorker } = await import('./workers/instanceTaskWorker.js')
+    await cleanupStaleInstanceTasks()
+    startInstanceTaskWorker()
+    console.log('⚙️ 实例操作任务调度器已启动')
+
+    // 启动宿主机通知邮件队列 Worker
+    const {
+      cleanupStaleHostNotificationEmailTasks,
+      startHostNotificationEmailWorker,
+      stopHostNotificationEmailWorker
+    } = await import('./workers/hostNotificationEmailWorker.js')
+    const staleHostNotificationEmailTasks = await cleanupStaleHostNotificationEmailTasks()
+    if (staleHostNotificationEmailTasks > 0) {
+      console.log(`📧 重新入队了 ${staleHostNotificationEmailTasks} 个宿主机通知邮件任务`)
+    }
+    startHostNotificationEmailWorker()
+    console.log('📧 宿主机通知邮件队列已启动')
+
+    // 启动终端会话清理任务
+    const { startSessionCleanup, stopSessionCleanup } = await import('./lib/terminal-proxy.js')
+    startSessionCleanup()
+    console.log('🖥️ 终端会话清理任务已启动')
+
+    // 优雅关闭处理
+    const gracefulShutdown = async (signal: string) => {
+      console.log(`\n🛑 收到 ${signal} 信号，开始优雅关闭...`)
+      
+      // 停止终端会话清理定时器
+      stopSessionCleanup()
+      stopHostNotificationEmailWorker()
+      
+      // 清理所有活跃终端会话
+      const { closeAllSessions } = await import('./lib/terminal-proxy.js')
+      const closedSessions = closeAllSessions('Server shutdown')
+      if (closedSessions > 0) {
+        console.log(`🖥️ 关闭了 ${closedSessions} 个终端会话`)
+      }
+      
+      // 关闭 Fastify 服务器
+      try {
+        await fastify.close()
+        console.log('✅ 服务器已关闭')
+        process.exit(0)
+      } catch (err) {
+        console.error('❌ 关闭服务器失败:', err)
+        process.exit(1)
+      }
+    }
+    
+    // 监听进程信号
+    process.on('SIGTERM', () => gracefulShutdown('SIGTERM'))
+    process.on('SIGINT', () => gracefulShutdown('SIGINT'))
+
+    // 清理卡住的转移 processing 状态
+    const { cleanupStaleTransfers, cleanupTimeoutTransfers } = await import('./db/transfers.js')
+    const staleTransfers = await cleanupStaleTransfers()
+    if (staleTransfers > 0) {
+        console.log(`🔄 清理了 ${staleTransfers} 个卡住的转移请求`)
+    }
+    // 定期检查超时的 processing 状态（每5分钟）
+    setInterval(async () => {
+        try {
+            const count = await cleanupTimeoutTransfers()
+            if (count > 0) {
+                console.log(`🔄 清理了 ${count} 个超时的转移请求`)
+            }
+        } catch (err) {
+            console.error('转移超时清理失败:', err)
+        }
+    }, 5 * 60 * 1000) // 5分钟
+
+    // 启动创建超时清理任务（清理10分钟仍处于创建中的实例）
+    const { getStuckCreatingInstances, getHostById } = await import('./db/index.js')
+    const { getIncusClient, deleteInstance } = await import('./lib/incus/index.js')
+    const { createLog } = await import('./db/logs.js')
+    const CREATE_TIMEOUT_MS = 10 * 60 * 1000 // 10分钟
+    const CREATE_TIMEOUT_CHECK_INTERVAL = 2 * 60 * 1000 // 每2分钟检查一次
+    
+    const runCreateTimeoutCleanup = async () => {
+      try {
+        const stuckInstances = await getStuckCreatingInstances(CREATE_TIMEOUT_MS)
+        
+        for (const instance of stuckInstances) {
+          console.log(`[CreateTimeout] 清理超时创建实例: ${instance.name} (ID: ${instance.id})`)
+          
+          // 使用原子操作更新状态，防止与 createInstanceAsync 的失败回滚竞争
+          // 只有状态仍为 'creating' 时才执行清理
+          const { prisma } = await import('./db/prisma.js')
+          const updateResult = await prisma.instance.updateMany({
+            where: {
+              id: instance.id,
+              status: 'creating' // 原子条件：只有状态仍为 creating 时才更新
+            },
+            data: {
+              status: 'error'
+            }
+          })
+          
+          // 如果没有更新任何记录，说明状态已被其他进程修改（如 createInstanceAsync 失败回滚）
+          if (updateResult.count === 0) {
+            console.log(`[CreateTimeout] 实例 ${instance.name} 状态已被其他进程修改，跳过清理`)
+            continue
+          }
+          
+          // 状态更新成功，执行资源回滚
+          // 2. 回滚资源
+          try {
+            const { rollbackResources } = await import('./db/index.js')
+            await rollbackResources({
+              hostId: instance.host_id,
+              cpu: instance.cpu,
+              memory: instance.memory,
+              disk: instance.disk,
+              portCount: instance.network_mode === 'nat' ? (instance.port_limit || 0) : 0
+            })
+            console.log(`[CreateTimeout] 实例 ${instance.name} 资源已回滚`)
+          } catch (rollbackErr) {
+            console.error(`[CreateTimeout] 资源回滚失败:`, rollbackErr)
+          }
+          
+          // 3. 尝试清理 Incus 残留
+          try {
+            const host = await getHostById(instance.host_id)
+            if (host) {
+              const client = await getIncusClient(host)
+              await deleteInstance(client, instance.incus_id)
+              console.log(`[CreateTimeout] 残留容器 ${instance.incus_id} 已清理`)
+            }
+          } catch (cleanupErr) {
+            // 清理失败不影响流程（容器可能不存在或已被删除）
+            console.log(`[CreateTimeout] 清理残留容器失败 (可能不存在)`)
+          }
+          
+          // 4. 发送用户通知
+          try {
+            const { sendNotification } = await import('./lib/notifier.js')
+            const host = await getHostById(instance.host_id)
+            await sendNotification(instance.user_id, 'instance_create_timeout', {
+              instanceName: instance.name,
+              hostName: host?.name || undefined
+            })
+          } catch (notifyErr) {
+            console.error(`[CreateTimeout] 发送通知失败:`, notifyErr)
+          }
+          
+          // 5. 记录日志
+          await createLog(
+            instance.user_id,
+            'instance',
+            'instance.create_timeout',
+            `Instance "${instance.name}" creation timed out after 10 minutes`,
+            'failed',
+            { instanceId: instance.id }
+          )
+        }
+        
+        if (stuckInstances.length > 0) {
+          console.log(`[CreateTimeout] 清理了 ${stuckInstances.length} 个超时创建实例`)
+        }
+      } catch (err) {
+        console.error('[CreateTimeout] 清理失败:', err)
+      }
+    }
+    // 每2分钟检查一次
+    setInterval(runCreateTimeoutCleanup, CREATE_TIMEOUT_CHECK_INTERVAL)
+    // 启动时也执行一次
+    runCreateTimeoutCleanup()
+    console.log('⏱️ 创建超时清理任务已启动（10分钟超时）')
+
+    // 启动实例任务清理定时任务（清理7天前的已完成任务）
+    const { cleanupOldTasks } = await import('./db/instance-tasks.js')
+    const runInstanceTaskCleanup = async () => {
+      try {
+        const deleted = await cleanupOldTasks()
+        if (deleted > 0) {
+          console.log(`⚙️ 实例任务清理完成，删除 ${deleted} 条过期任务`)
+        }
+      } catch (err) {
+        console.error('实例任务清理失败:', err)
+      }
+    }
+    // 每天执行一次清理
+    setInterval(runInstanceTaskCleanup, 24 * 60 * 60 * 1000)
+    // 启动时也执行一次
+    runInstanceTaskCleanup()
+
+    // 启动站内信清理定时任务（30 天前的消息）
+    const { cleanupOldMessages } = await import('./db/inbox.js')
+    const runInboxCleanup = async () => {
+      try {
+        const deleted = await cleanupOldMessages(30)
+        if (deleted > 0) {
+          console.log(`📨 站内信清理完成，删除 ${deleted} 条过期消息`)
+        }
+      } catch (err) {
+        console.error('站内信清理失败:', err)
+      }
+    }
+    // 每天24小时执行一次清理
+    setInterval(runInboxCleanup, 24 * 60 * 60 * 1000)
+    // 启动时也执行一次
+    runInboxCleanup()
+
+    // 启动系统健康监控
+    const { startSystemMonitor } = await import('./services/system-monitor.js')
+    startSystemMonitor()
+
+    // 启动工单自动关闭调度器
+    const { startTicketAutoCloseScheduler } = await import('./services/ticket-auto-close-scheduler.js')
+    startTicketAutoCloseScheduler()
+
+    // 启动节点连接地址监控（启动即回填，之后每 30 分钟轮训域名型地址）
+    const { startHostAddressMonitor } = await import('./services/host-address-monitor.js')
+    startHostAddressMonitor()
+
+    console.log(`🔒 安全模式: ${process.env.NODE_ENV === 'production' ? '生产环境' : '开发环境'}`)
+    printRateLimitSummary()
+
+    if (process.env.RESET_DATABASE === 'true' || process.env.RESET_DATABASE === '1') {
+      console.log('⚠️  注意：数据库已在启动时清空，请在生产环境中移除 RESET_DATABASE 环境变量')
+    }
+  } catch (err) {
+    fastify.log.error(err)
+    process.exit(1)
+  }
+}
+
+start()
diff --git a/server/src/config/badges.generated.json b/server/src/config/badges.generated.json
new file mode 100644
index 0000000..f06a814
--- /dev/null
+++ b/server/src/config/badges.generated.json
@@ -0,0 +1,1426 @@
+[
+  {
+    "id": "elite",
+    "name": "精英",
+    "nameEn": "Elite",
+    "fullLabel": "精英 (Elite)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/elite.svg",
+    "assetUrlDark": "/badges/dark/elite.svg",
+    "assetUrlLight": "/badges/light/elite.svg"
+  },
+  {
+    "id": "ultra",
+    "name": "极致",
+    "nameEn": "Ultra",
+    "fullLabel": "极致 (Ultra)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/ultra.svg",
+    "assetUrlDark": "/badges/dark/ultra.svg",
+    "assetUrlLight": "/badges/light/ultra.svg"
+  },
+  {
+    "id": "apex",
+    "name": "巅峰",
+    "nameEn": "Apex",
+    "fullLabel": "巅峰 (Apex)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/apex.svg",
+    "assetUrlDark": "/badges/dark/apex.svg",
+    "assetUrlLight": "/badges/light/apex.svg"
+  },
+  {
+    "id": "quantum",
+    "name": "量子",
+    "nameEn": "Quantum",
+    "fullLabel": "量子 (Quantum)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/quantum.svg",
+    "assetUrlDark": "/badges/dark/quantum.svg",
+    "assetUrlLight": "/badges/light/quantum.svg"
+  },
+  {
+    "id": "titan",
+    "name": "泰坦",
+    "nameEn": "Titan",
+    "fullLabel": "泰坦 (Titan)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/titan.svg",
+    "assetUrlDark": "/badges/dark/titan.svg",
+    "assetUrlLight": "/badges/light/titan.svg"
+  },
+  {
+    "id": "omega",
+    "name": "终极",
+    "nameEn": "Omega",
+    "fullLabel": "终极 (Omega)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/omega.svg",
+    "assetUrlDark": "/badges/dark/omega.svg",
+    "assetUrlLight": "/badges/light/omega.svg"
+  },
+  {
+    "id": "matrix",
+    "name": "矩阵",
+    "nameEn": "Matrix",
+    "fullLabel": "矩阵 (Matrix)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/matrix.svg",
+    "assetUrlDark": "/badges/dark/matrix.svg",
+    "assetUrlLight": "/badges/light/matrix.svg"
+  },
+  {
+    "id": "vanguard",
+    "name": "先锋",
+    "nameEn": "Vanguard",
+    "fullLabel": "先锋 (Vanguard)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/vanguard.svg",
+    "assetUrlDark": "/badges/dark/vanguard.svg",
+    "assetUrlLight": "/badges/light/vanguard.svg"
+  },
+  {
+    "id": "genesis",
+    "name": "创世",
+    "nameEn": "Genesis",
+    "fullLabel": "创世 (Genesis)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/genesis.svg",
+    "assetUrlDark": "/badges/dark/genesis.svg",
+    "assetUrlLight": "/badges/light/genesis.svg"
+  },
+  {
+    "id": "nexus",
+    "name": "枢纽",
+    "nameEn": "Nexus",
+    "fullLabel": "枢纽 (Nexus)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/nexus.svg",
+    "assetUrlDark": "/badges/dark/nexus.svg",
+    "assetUrlLight": "/badges/light/nexus.svg"
+  },
+  {
+    "id": "solaris",
+    "name": "恒星",
+    "nameEn": "Solaris",
+    "fullLabel": "恒星 (Solaris)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/solaris.svg",
+    "assetUrlDark": "/badges/dark/solaris.svg",
+    "assetUrlLight": "/badges/light/solaris.svg"
+  },
+  {
+    "id": "earth",
+    "name": "地球",
+    "nameEn": "Earth",
+    "fullLabel": "地球 (Earth)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/earth.svg",
+    "assetUrlDark": "/badges/dark/earth.svg",
+    "assetUrlLight": "/badges/light/earth.svg"
+  },
+  {
+    "id": "moon",
+    "name": "月球",
+    "nameEn": "Luna",
+    "fullLabel": "月球 (Luna)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/moon.svg",
+    "assetUrlDark": "/badges/dark/moon.svg",
+    "assetUrlLight": "/badges/light/moon.svg"
+  },
+  {
+    "id": "ares",
+    "name": "火星",
+    "nameEn": "Ares",
+    "fullLabel": "火星 (Ares)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/ares.svg",
+    "assetUrlDark": "/badges/dark/ares.svg",
+    "assetUrlLight": "/badges/light/ares.svg"
+  },
+  {
+    "id": "jupiter",
+    "name": "木星",
+    "nameEn": "Jupiter",
+    "fullLabel": "木星 (Jupiter)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/jupiter.svg",
+    "assetUrlDark": "/badges/dark/jupiter.svg",
+    "assetUrlLight": "/badges/light/jupiter.svg"
+  },
+  {
+    "id": "cronus",
+    "name": "土星",
+    "nameEn": "Cronus",
+    "fullLabel": "土星 (Cronus)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/cronus.svg",
+    "assetUrlDark": "/badges/dark/cronus.svg",
+    "assetUrlLight": "/badges/light/cronus.svg"
+  },
+  {
+    "id": "uranus",
+    "name": "天王星",
+    "nameEn": "Uranus",
+    "fullLabel": "天王星 (Uranus)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/uranus.svg",
+    "assetUrlDark": "/badges/dark/uranus.svg",
+    "assetUrlLight": "/badges/light/uranus.svg"
+  },
+  {
+    "id": "neptune",
+    "name": "海王星",
+    "nameEn": "Neptune",
+    "fullLabel": "海王星 (Neptune)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/neptune.svg",
+    "assetUrlDark": "/badges/dark/neptune.svg",
+    "assetUrlLight": "/badges/light/neptune.svg"
+  },
+  {
+    "id": "pluto",
+    "name": "冥王星",
+    "nameEn": "Pluto",
+    "fullLabel": "冥王星 (Pluto)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/pluto.svg",
+    "assetUrlDark": "/badges/dark/pluto.svg",
+    "assetUrlLight": "/badges/light/pluto.svg"
+  },
+  {
+    "id": "blackhole",
+    "name": "黑洞",
+    "nameEn": "Black Hole",
+    "fullLabel": "黑洞 (Black Hole)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/blackhole.svg",
+    "assetUrlDark": "/badges/dark/blackhole.svg",
+    "assetUrlLight": "/badges/light/blackhole.svg"
+  },
+  {
+    "id": "mercury",
+    "name": "水星",
+    "nameEn": "Mercury",
+    "fullLabel": "水星 (Mercury)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/mercury.svg",
+    "assetUrlDark": "/badges/dark/mercury.svg",
+    "assetUrlLight": "/badges/light/mercury.svg"
+  },
+  {
+    "id": "nebula",
+    "name": "星云",
+    "nameEn": "Nebula",
+    "fullLabel": "星云 (Nebula)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/nebula.svg",
+    "assetUrlDark": "/badges/dark/nebula.svg",
+    "assetUrlLight": "/badges/light/nebula.svg"
+  },
+  {
+    "id": "pulsar",
+    "name": "脉冲星",
+    "nameEn": "Pulsar",
+    "fullLabel": "脉冲星 (Pulsar)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/pulsar.svg",
+    "assetUrlDark": "/badges/dark/pulsar.svg",
+    "assetUrlLight": "/badges/light/pulsar.svg"
+  },
+  {
+    "id": "wormhole",
+    "name": "虫洞",
+    "nameEn": "Wormhole",
+    "fullLabel": "虫洞 (Wormhole)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/wormhole.svg",
+    "assetUrlDark": "/badges/dark/wormhole.svg",
+    "assetUrlLight": "/badges/light/wormhole.svg"
+  },
+  {
+    "id": "galaxy",
+    "name": "星系",
+    "nameEn": "Galaxy",
+    "fullLabel": "星系 (Galaxy)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/galaxy.svg",
+    "assetUrlDark": "/badges/dark/galaxy.svg",
+    "assetUrlLight": "/badges/light/galaxy.svg"
+  },
+  {
+    "id": "bastion",
+    "name": "堡垒",
+    "nameEn": "Bastion",
+    "fullLabel": "堡垒 (Bastion)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/bastion.svg",
+    "assetUrlDark": "/badges/dark/bastion.svg",
+    "assetUrlLight": "/badges/light/bastion.svg"
+  },
+  {
+    "id": "phalanx",
+    "name": "方阵",
+    "nameEn": "Phalanx",
+    "fullLabel": "方阵 (Phalanx)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/phalanx.svg",
+    "assetUrlDark": "/badges/dark/phalanx.svg",
+    "assetUrlLight": "/badges/light/phalanx.svg"
+  },
+  {
+    "id": "sentinel",
+    "name": "哨兵",
+    "nameEn": "Sentinel",
+    "fullLabel": "哨兵 (Sentinel)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/sentinel.svg",
+    "assetUrlDark": "/badges/dark/sentinel.svg",
+    "assetUrlLight": "/badges/light/sentinel.svg"
+  },
+  {
+    "id": "fortress",
+    "name": "要塞",
+    "nameEn": "Fortress",
+    "fullLabel": "要塞 (Fortress)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/fortress.svg",
+    "assetUrlDark": "/badges/dark/fortress.svg",
+    "assetUrlLight": "/badges/light/fortress.svg"
+  },
+  {
+    "id": "guardian",
+    "name": "守护",
+    "nameEn": "Guardian",
+    "fullLabel": "守护 (Guardian)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/guardian.svg",
+    "assetUrlDark": "/badges/dark/guardian.svg",
+    "assetUrlLight": "/badges/light/guardian.svg"
+  },
+  {
+    "id": "citadel",
+    "name": "城塞",
+    "nameEn": "Citadel",
+    "fullLabel": "城塞 (Citadel)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/citadel.svg",
+    "assetUrlDark": "/badges/dark/citadel.svg",
+    "assetUrlLight": "/badges/light/citadel.svg"
+  },
+  {
+    "id": "paladin",
+    "name": "圣骑",
+    "nameEn": "Paladin",
+    "fullLabel": "圣骑 (Paladin)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/paladin.svg",
+    "assetUrlDark": "/badges/dark/paladin.svg",
+    "assetUrlLight": "/badges/light/paladin.svg"
+  },
+  {
+    "id": "barrier",
+    "name": "壁垒",
+    "nameEn": "Barrier",
+    "fullLabel": "壁垒 (Barrier)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/barrier.svg",
+    "assetUrlDark": "/badges/dark/barrier.svg",
+    "assetUrlLight": "/badges/light/barrier.svg"
+  },
+  {
+    "id": "ward",
+    "name": "结界",
+    "nameEn": "Ward",
+    "fullLabel": "结界 (Ward)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/ward.svg",
+    "assetUrlDark": "/badges/dark/ward.svg",
+    "assetUrlLight": "/badges/light/ward.svg"
+  },
+  {
+    "id": "defender",
+    "name": "卫士",
+    "nameEn": "Defender",
+    "fullLabel": "卫士 (Defender)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/defender.svg",
+    "assetUrlDark": "/badges/dark/defender.svg",
+    "assetUrlLight": "/badges/light/defender.svg"
+  },
+  {
+    "id": "fusion",
+    "name": "聚变",
+    "nameEn": "Fusion",
+    "fullLabel": "聚变 (Fusion)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/fusion.svg",
+    "assetUrlDark": "/badges/dark/fusion.svg",
+    "assetUrlLight": "/badges/light/fusion.svg"
+  },
+  {
+    "id": "plasma",
+    "name": "等离子",
+    "nameEn": "Plasma",
+    "fullLabel": "等离子 (Plasma)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/plasma.svg",
+    "assetUrlDark": "/badges/dark/plasma.svg",
+    "assetUrlLight": "/badges/light/plasma.svg"
+  },
+  {
+    "id": "pulse",
+    "name": "脉冲",
+    "nameEn": "Pulse",
+    "fullLabel": "脉冲 (Pulse)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/pulse.svg",
+    "assetUrlDark": "/badges/dark/pulse.svg",
+    "assetUrlLight": "/badges/light/pulse.svg"
+  },
+  {
+    "id": "ignition",
+    "name": "点火",
+    "nameEn": "Ignition",
+    "fullLabel": "点火 (Ignition)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/ignition.svg",
+    "assetUrlDark": "/badges/dark/ignition.svg",
+    "assetUrlLight": "/badges/light/ignition.svg"
+  },
+  {
+    "id": "core",
+    "name": "内核",
+    "nameEn": "Core",
+    "fullLabel": "内核 (Core)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/core.svg",
+    "assetUrlDark": "/badges/dark/core.svg",
+    "assetUrlLight": "/badges/light/core.svg"
+  },
+  {
+    "id": "fission",
+    "name": "裂变",
+    "nameEn": "Fission",
+    "fullLabel": "裂变 (Fission)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/fission.svg",
+    "assetUrlDark": "/badges/dark/fission.svg",
+    "assetUrlLight": "/badges/light/fission.svg"
+  },
+  {
+    "id": "overload",
+    "name": "过载",
+    "nameEn": "Overload",
+    "fullLabel": "过载 (Overload)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/overload.svg",
+    "assetUrlDark": "/badges/dark/overload.svg",
+    "assetUrlLight": "/badges/light/overload.svg"
+  },
+  {
+    "id": "dynamo",
+    "name": "动力",
+    "nameEn": "Dynamo",
+    "fullLabel": "动力 (Dynamo)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/dynamo.svg",
+    "assetUrlDark": "/badges/dark/dynamo.svg",
+    "assetUrlLight": "/badges/light/dynamo.svg"
+  },
+  {
+    "id": "radiance",
+    "name": "辐射",
+    "nameEn": "Radiance",
+    "fullLabel": "辐射 (Radiance)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/radiance.svg",
+    "assetUrlDark": "/badges/dark/radiance.svg",
+    "assetUrlLight": "/badges/light/radiance.svg"
+  },
+  {
+    "id": "vortex",
+    "name": "涡流",
+    "nameEn": "Vortex",
+    "fullLabel": "涡流 (Vortex)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/vortex.svg",
+    "assetUrlDark": "/badges/dark/vortex.svg",
+    "assetUrlLight": "/badges/light/vortex.svg"
+  },
+  {
+    "id": "sniper",
+    "name": "狙击",
+    "nameEn": "Sniper",
+    "fullLabel": "狙击 (Sniper)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/sniper.svg",
+    "assetUrlDark": "/badges/dark/sniper.svg",
+    "assetUrlLight": "/badges/light/sniper.svg"
+  },
+  {
+    "id": "lockon",
+    "name": "锁定",
+    "nameEn": "Lock-On",
+    "fullLabel": "锁定 (Lock-On)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/lockon.svg",
+    "assetUrlDark": "/badges/dark/lockon.svg",
+    "assetUrlLight": "/badges/light/lockon.svg"
+  },
+  {
+    "id": "radar",
+    "name": "雷达",
+    "nameEn": "Radar",
+    "fullLabel": "雷达 (Radar)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/radar.svg",
+    "assetUrlDark": "/badges/dark/radar.svg",
+    "assetUrlLight": "/badges/light/radar.svg"
+  },
+  {
+    "id": "strike",
+    "name": "打击",
+    "nameEn": "Strike",
+    "fullLabel": "打击 (Strike)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/strike.svg",
+    "assetUrlDark": "/badges/dark/strike.svg",
+    "assetUrlLight": "/badges/light/strike.svg"
+  },
+  {
+    "id": "recon",
+    "name": "侦察",
+    "nameEn": "Recon",
+    "fullLabel": "侦察 (Recon)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/recon.svg",
+    "assetUrlDark": "/badges/dark/recon.svg",
+    "assetUrlLight": "/badges/light/recon.svg"
+  },
+  {
+    "id": "crosshair",
+    "name": "准星",
+    "nameEn": "Crosshair",
+    "fullLabel": "准星 (Crosshair)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/crosshair.svg",
+    "assetUrlDark": "/badges/dark/crosshair.svg",
+    "assetUrlLight": "/badges/light/crosshair.svg"
+  },
+  {
+    "id": "tracer",
+    "name": "追踪",
+    "nameEn": "Tracer",
+    "fullLabel": "追踪 (Tracer)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/tracer.svg",
+    "assetUrlDark": "/badges/dark/tracer.svg",
+    "assetUrlLight": "/badges/light/tracer.svg"
+  },
+  {
+    "id": "overwatch",
+    "name": "天眼",
+    "nameEn": "Overwatch",
+    "fullLabel": "天眼 (Overwatch)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/overwatch.svg",
+    "assetUrlDark": "/badges/dark/overwatch.svg",
+    "assetUrlLight": "/badges/light/overwatch.svg"
+  },
+  {
+    "id": "intercept",
+    "name": "拦截",
+    "nameEn": "Intercept",
+    "fullLabel": "拦截 (Intercept)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/intercept.svg",
+    "assetUrlDark": "/badges/dark/intercept.svg",
+    "assetUrlLight": "/badges/light/intercept.svg"
+  },
+  {
+    "id": "barrage",
+    "name": "弹幕",
+    "nameEn": "Barrage",
+    "fullLabel": "弹幕 (Barrage)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/barrage.svg",
+    "assetUrlDark": "/badges/dark/barrage.svg",
+    "assetUrlLight": "/badges/light/barrage.svg"
+  },
+  {
+    "id": "oracle",
+    "name": "神谕",
+    "nameEn": "Oracle",
+    "fullLabel": "神谕 (Oracle)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/oracle.svg",
+    "assetUrlDark": "/badges/dark/oracle.svg",
+    "assetUrlLight": "/badges/light/oracle.svg"
+  },
+  {
+    "id": "mystic",
+    "name": "秘法",
+    "nameEn": "Mystic",
+    "fullLabel": "秘法 (Mystic)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/mystic.svg",
+    "assetUrlDark": "/badges/dark/mystic.svg",
+    "assetUrlLight": "/badges/light/mystic.svg"
+  },
+  {
+    "id": "rune",
+    "name": "符文",
+    "nameEn": "Rune",
+    "fullLabel": "符文 (Rune)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/rune.svg",
+    "assetUrlDark": "/badges/dark/rune.svg",
+    "assetUrlLight": "/badges/light/rune.svg"
+  },
+  {
+    "id": "glyph",
+    "name": "印记",
+    "nameEn": "Glyph",
+    "fullLabel": "印记 (Glyph)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/glyph.svg",
+    "assetUrlDark": "/badges/dark/glyph.svg",
+    "assetUrlLight": "/badges/light/glyph.svg"
+  },
+  {
+    "id": "aether",
+    "name": "以太",
+    "nameEn": "Aether",
+    "fullLabel": "以太 (Aether)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/aether.svg",
+    "assetUrlDark": "/badges/dark/aether.svg",
+    "assetUrlLight": "/badges/light/aether.svg"
+  },
+  {
+    "id": "sigil",
+    "name": "刻印",
+    "nameEn": "Sigil",
+    "fullLabel": "刻印 (Sigil)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/sigil.svg",
+    "assetUrlDark": "/badges/dark/sigil.svg",
+    "assetUrlLight": "/badges/light/sigil.svg"
+  },
+  {
+    "id": "astral",
+    "name": "星灵",
+    "nameEn": "Astral",
+    "fullLabel": "星灵 (Astral)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/astral.svg",
+    "assetUrlDark": "/badges/dark/astral.svg",
+    "assetUrlLight": "/badges/light/astral.svg"
+  },
+  {
+    "id": "abyss",
+    "name": "深渊",
+    "nameEn": "Abyss",
+    "fullLabel": "深渊 (Abyss)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/abyss.svg",
+    "assetUrlDark": "/badges/dark/abyss.svg",
+    "assetUrlLight": "/badges/light/abyss.svg"
+  },
+  {
+    "id": "paradox",
+    "name": "悖论",
+    "nameEn": "Paradox",
+    "fullLabel": "悖论 (Paradox)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/paradox.svg",
+    "assetUrlDark": "/badges/dark/paradox.svg",
+    "assetUrlLight": "/badges/light/paradox.svg"
+  },
+  {
+    "id": "enigma",
+    "name": "谜团",
+    "nameEn": "Enigma",
+    "fullLabel": "谜团 (Enigma)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/enigma.svg",
+    "assetUrlDark": "/badges/dark/enigma.svg",
+    "assetUrlLight": "/badges/light/enigma.svg"
+  },
+  {
+    "id": "rat",
+    "name": "子鼠",
+    "nameEn": "Water",
+    "fullLabel": "子鼠 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/rat.svg",
+    "assetUrlDark": "/badges/dark/rat.svg",
+    "assetUrlLight": "/badges/light/rat.svg"
+  },
+  {
+    "id": "pig",
+    "name": "亥猪",
+    "nameEn": "Water",
+    "fullLabel": "亥猪 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/pig.svg",
+    "assetUrlDark": "/badges/dark/pig.svg",
+    "assetUrlLight": "/badges/light/pig.svg"
+  },
+  {
+    "id": "tiger",
+    "name": "寅虎",
+    "nameEn": "Wood",
+    "fullLabel": "寅虎 (Wood)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/tiger.svg",
+    "assetUrlDark": "/badges/dark/tiger.svg",
+    "assetUrlLight": "/badges/light/tiger.svg"
+  },
+  {
+    "id": "rabbit",
+    "name": "卯兔",
+    "nameEn": "Wood",
+    "fullLabel": "卯兔 (Wood)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/rabbit.svg",
+    "assetUrlDark": "/badges/dark/rabbit.svg",
+    "assetUrlLight": "/badges/light/rabbit.svg"
+  },
+  {
+    "id": "snake",
+    "name": "巳蛇",
+    "nameEn": "Fire",
+    "fullLabel": "巳蛇 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/snake.svg",
+    "assetUrlDark": "/badges/dark/snake.svg",
+    "assetUrlLight": "/badges/light/snake.svg"
+  },
+  {
+    "id": "horse",
+    "name": "午马",
+    "nameEn": "Fire",
+    "fullLabel": "午马 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/horse.svg",
+    "assetUrlDark": "/badges/dark/horse.svg",
+    "assetUrlLight": "/badges/light/horse.svg"
+  },
+  {
+    "id": "monkey",
+    "name": "申猴",
+    "nameEn": "Metal",
+    "fullLabel": "申猴 (Metal)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/monkey.svg",
+    "assetUrlDark": "/badges/dark/monkey.svg",
+    "assetUrlLight": "/badges/light/monkey.svg"
+  },
+  {
+    "id": "rooster",
+    "name": "酉鸡",
+    "nameEn": "Metal",
+    "fullLabel": "酉鸡 (Metal)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/rooster.svg",
+    "assetUrlDark": "/badges/dark/rooster.svg",
+    "assetUrlLight": "/badges/light/rooster.svg"
+  },
+  {
+    "id": "ox",
+    "name": "丑牛",
+    "nameEn": "Earth",
+    "fullLabel": "丑牛 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/ox.svg",
+    "assetUrlDark": "/badges/dark/ox.svg",
+    "assetUrlLight": "/badges/light/ox.svg"
+  },
+  {
+    "id": "dragon",
+    "name": "辰龙",
+    "nameEn": "Earth",
+    "fullLabel": "辰龙 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/dragon.svg",
+    "assetUrlDark": "/badges/dark/dragon.svg",
+    "assetUrlLight": "/badges/light/dragon.svg"
+  },
+  {
+    "id": "goat",
+    "name": "未羊",
+    "nameEn": "Earth",
+    "fullLabel": "未羊 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/goat.svg",
+    "assetUrlDark": "/badges/dark/goat.svg",
+    "assetUrlLight": "/badges/light/goat.svg"
+  },
+  {
+    "id": "dog",
+    "name": "戌狗",
+    "nameEn": "Earth",
+    "fullLabel": "戌狗 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/dog.svg",
+    "assetUrlDark": "/badges/dark/dog.svg",
+    "assetUrlLight": "/badges/light/dog.svg"
+  },
+  {
+    "id": "aries",
+    "name": "白羊",
+    "nameEn": "Fire",
+    "fullLabel": "白羊 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/aries.svg",
+    "assetUrlDark": "/badges/dark/aries.svg",
+    "assetUrlLight": "/badges/light/aries.svg"
+  },
+  {
+    "id": "leo",
+    "name": "狮子",
+    "nameEn": "Fire",
+    "fullLabel": "狮子 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/leo.svg",
+    "assetUrlDark": "/badges/dark/leo.svg",
+    "assetUrlLight": "/badges/light/leo.svg"
+  },
+  {
+    "id": "sagittarius",
+    "name": "射手",
+    "nameEn": "Fire",
+    "fullLabel": "射手 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/sagittarius.svg",
+    "assetUrlDark": "/badges/dark/sagittarius.svg",
+    "assetUrlLight": "/badges/light/sagittarius.svg"
+  },
+  {
+    "id": "taurus",
+    "name": "金牛",
+    "nameEn": "Earth",
+    "fullLabel": "金牛 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/taurus.svg",
+    "assetUrlDark": "/badges/dark/taurus.svg",
+    "assetUrlLight": "/badges/light/taurus.svg"
+  },
+  {
+    "id": "virgo",
+    "name": "处女",
+    "nameEn": "Earth",
+    "fullLabel": "处女 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/virgo.svg",
+    "assetUrlDark": "/badges/dark/virgo.svg",
+    "assetUrlLight": "/badges/light/virgo.svg"
+  },
+  {
+    "id": "capricorn",
+    "name": "摩羯",
+    "nameEn": "Earth",
+    "fullLabel": "摩羯 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/capricorn.svg",
+    "assetUrlDark": "/badges/dark/capricorn.svg",
+    "assetUrlLight": "/badges/light/capricorn.svg"
+  },
+  {
+    "id": "gemini",
+    "name": "双子",
+    "nameEn": "Air",
+    "fullLabel": "双子 (Air)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/gemini.svg",
+    "assetUrlDark": "/badges/dark/gemini.svg",
+    "assetUrlLight": "/badges/light/gemini.svg"
+  },
+  {
+    "id": "libra",
+    "name": "天秤",
+    "nameEn": "Air",
+    "fullLabel": "天秤 (Air)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/libra.svg",
+    "assetUrlDark": "/badges/dark/libra.svg",
+    "assetUrlLight": "/badges/light/libra.svg"
+  },
+  {
+    "id": "aquarius",
+    "name": "水瓶",
+    "nameEn": "Air",
+    "fullLabel": "水瓶 (Air)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/aquarius.svg",
+    "assetUrlDark": "/badges/dark/aquarius.svg",
+    "assetUrlLight": "/badges/light/aquarius.svg"
+  },
+  {
+    "id": "cancer",
+    "name": "巨蟹",
+    "nameEn": "Water",
+    "fullLabel": "巨蟹 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/cancer.svg",
+    "assetUrlDark": "/badges/dark/cancer.svg",
+    "assetUrlLight": "/badges/light/cancer.svg"
+  },
+  {
+    "id": "scorpio",
+    "name": "天蝎",
+    "nameEn": "Water",
+    "fullLabel": "天蝎 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/scorpio.svg",
+    "assetUrlDark": "/badges/dark/scorpio.svg",
+    "assetUrlLight": "/badges/light/scorpio.svg"
+  },
+  {
+    "id": "pisces",
+    "name": "双鱼",
+    "nameEn": "Water",
+    "fullLabel": "双鱼 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/pisces.svg",
+    "assetUrlDark": "/badges/dark/pisces.svg",
+    "assetUrlLight": "/badges/light/pisces.svg"
+  }
+]
diff --git a/server/src/config/badges.generated.ts b/server/src/config/badges.generated.ts
new file mode 100644
index 0000000..e125133
--- /dev/null
+++ b/server/src/config/badges.generated.ts
@@ -0,0 +1,1426 @@
+export const badgeCatalogData = [
+  {
+    "id": "elite",
+    "name": "精英",
+    "nameEn": "Elite",
+    "fullLabel": "精英 (Elite)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/elite.svg",
+    "assetUrlDark": "/badges/dark/elite.svg",
+    "assetUrlLight": "/badges/light/elite.svg"
+  },
+  {
+    "id": "ultra",
+    "name": "极致",
+    "nameEn": "Ultra",
+    "fullLabel": "极致 (Ultra)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/ultra.svg",
+    "assetUrlDark": "/badges/dark/ultra.svg",
+    "assetUrlLight": "/badges/light/ultra.svg"
+  },
+  {
+    "id": "apex",
+    "name": "巅峰",
+    "nameEn": "Apex",
+    "fullLabel": "巅峰 (Apex)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/apex.svg",
+    "assetUrlDark": "/badges/dark/apex.svg",
+    "assetUrlLight": "/badges/light/apex.svg"
+  },
+  {
+    "id": "quantum",
+    "name": "量子",
+    "nameEn": "Quantum",
+    "fullLabel": "量子 (Quantum)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/quantum.svg",
+    "assetUrlDark": "/badges/dark/quantum.svg",
+    "assetUrlLight": "/badges/light/quantum.svg"
+  },
+  {
+    "id": "titan",
+    "name": "泰坦",
+    "nameEn": "Titan",
+    "fullLabel": "泰坦 (Titan)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/titan.svg",
+    "assetUrlDark": "/badges/dark/titan.svg",
+    "assetUrlLight": "/badges/light/titan.svg"
+  },
+  {
+    "id": "omega",
+    "name": "终极",
+    "nameEn": "Omega",
+    "fullLabel": "终极 (Omega)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/omega.svg",
+    "assetUrlDark": "/badges/dark/omega.svg",
+    "assetUrlLight": "/badges/light/omega.svg"
+  },
+  {
+    "id": "matrix",
+    "name": "矩阵",
+    "nameEn": "Matrix",
+    "fullLabel": "矩阵 (Matrix)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/matrix.svg",
+    "assetUrlDark": "/badges/dark/matrix.svg",
+    "assetUrlLight": "/badges/light/matrix.svg"
+  },
+  {
+    "id": "vanguard",
+    "name": "先锋",
+    "nameEn": "Vanguard",
+    "fullLabel": "先锋 (Vanguard)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/vanguard.svg",
+    "assetUrlDark": "/badges/dark/vanguard.svg",
+    "assetUrlLight": "/badges/light/vanguard.svg"
+  },
+  {
+    "id": "genesis",
+    "name": "创世",
+    "nameEn": "Genesis",
+    "fullLabel": "创世 (Genesis)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/genesis.svg",
+    "assetUrlDark": "/badges/dark/genesis.svg",
+    "assetUrlLight": "/badges/light/genesis.svg"
+  },
+  {
+    "id": "nexus",
+    "name": "枢纽",
+    "nameEn": "Nexus",
+    "fullLabel": "枢纽 (Nexus)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "supreme",
+    "seriesTitle": "👑 SUPREME 尊贵系列",
+    "seriesNameZh": "尊贵系列",
+    "seriesNameEn": "SUPREME",
+    "seriesDescription": "极致尊贵的云实例，代表统治级的算力引擎与物理机。",
+    "assetUrl": "/badges/dark/nexus.svg",
+    "assetUrlDark": "/badges/dark/nexus.svg",
+    "assetUrlLight": "/badges/light/nexus.svg"
+  },
+  {
+    "id": "solaris",
+    "name": "恒星",
+    "nameEn": "Solaris",
+    "fullLabel": "恒星 (Solaris)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/solaris.svg",
+    "assetUrlDark": "/badges/dark/solaris.svg",
+    "assetUrlLight": "/badges/light/solaris.svg"
+  },
+  {
+    "id": "earth",
+    "name": "地球",
+    "nameEn": "Earth",
+    "fullLabel": "地球 (Earth)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/earth.svg",
+    "assetUrlDark": "/badges/dark/earth.svg",
+    "assetUrlLight": "/badges/light/earth.svg"
+  },
+  {
+    "id": "moon",
+    "name": "月球",
+    "nameEn": "Luna",
+    "fullLabel": "月球 (Luna)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/moon.svg",
+    "assetUrlDark": "/badges/dark/moon.svg",
+    "assetUrlLight": "/badges/light/moon.svg"
+  },
+  {
+    "id": "ares",
+    "name": "火星",
+    "nameEn": "Ares",
+    "fullLabel": "火星 (Ares)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/ares.svg",
+    "assetUrlDark": "/badges/dark/ares.svg",
+    "assetUrlLight": "/badges/light/ares.svg"
+  },
+  {
+    "id": "jupiter",
+    "name": "木星",
+    "nameEn": "Jupiter",
+    "fullLabel": "木星 (Jupiter)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/jupiter.svg",
+    "assetUrlDark": "/badges/dark/jupiter.svg",
+    "assetUrlLight": "/badges/light/jupiter.svg"
+  },
+  {
+    "id": "cronus",
+    "name": "土星",
+    "nameEn": "Cronus",
+    "fullLabel": "土星 (Cronus)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/cronus.svg",
+    "assetUrlDark": "/badges/dark/cronus.svg",
+    "assetUrlLight": "/badges/light/cronus.svg"
+  },
+  {
+    "id": "uranus",
+    "name": "天王星",
+    "nameEn": "Uranus",
+    "fullLabel": "天王星 (Uranus)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/uranus.svg",
+    "assetUrlDark": "/badges/dark/uranus.svg",
+    "assetUrlLight": "/badges/light/uranus.svg"
+  },
+  {
+    "id": "neptune",
+    "name": "海王星",
+    "nameEn": "Neptune",
+    "fullLabel": "海王星 (Neptune)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/neptune.svg",
+    "assetUrlDark": "/badges/dark/neptune.svg",
+    "assetUrlLight": "/badges/light/neptune.svg"
+  },
+  {
+    "id": "pluto",
+    "name": "冥王星",
+    "nameEn": "Pluto",
+    "fullLabel": "冥王星 (Pluto)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/pluto.svg",
+    "assetUrlDark": "/badges/dark/pluto.svg",
+    "assetUrlLight": "/badges/light/pluto.svg"
+  },
+  {
+    "id": "blackhole",
+    "name": "黑洞",
+    "nameEn": "Black Hole",
+    "fullLabel": "黑洞 (Black Hole)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/blackhole.svg",
+    "assetUrlDark": "/badges/dark/blackhole.svg",
+    "assetUrlLight": "/badges/light/blackhole.svg"
+  },
+  {
+    "id": "mercury",
+    "name": "水星",
+    "nameEn": "Mercury",
+    "fullLabel": "水星 (Mercury)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/mercury.svg",
+    "assetUrlDark": "/badges/dark/mercury.svg",
+    "assetUrlLight": "/badges/light/mercury.svg"
+  },
+  {
+    "id": "nebula",
+    "name": "星云",
+    "nameEn": "Nebula",
+    "fullLabel": "星云 (Nebula)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/nebula.svg",
+    "assetUrlDark": "/badges/dark/nebula.svg",
+    "assetUrlLight": "/badges/light/nebula.svg"
+  },
+  {
+    "id": "pulsar",
+    "name": "脉冲星",
+    "nameEn": "Pulsar",
+    "fullLabel": "脉冲星 (Pulsar)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/pulsar.svg",
+    "assetUrlDark": "/badges/dark/pulsar.svg",
+    "assetUrlLight": "/badges/light/pulsar.svg"
+  },
+  {
+    "id": "wormhole",
+    "name": "虫洞",
+    "nameEn": "Wormhole",
+    "fullLabel": "虫洞 (Wormhole)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/wormhole.svg",
+    "assetUrlDark": "/badges/dark/wormhole.svg",
+    "assetUrlLight": "/badges/light/wormhole.svg"
+  },
+  {
+    "id": "galaxy",
+    "name": "星系",
+    "nameEn": "Galaxy",
+    "fullLabel": "星系 (Galaxy)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "celestial",
+    "seriesTitle": "🌌 CELESTIAL 行星系列",
+    "seriesNameZh": "行星系列",
+    "seriesNameEn": "CELESTIAL",
+    "seriesDescription": "浩瀚宇宙的星辰与奇观，赋予架构无尽的拓展想象。",
+    "assetUrl": "/badges/dark/galaxy.svg",
+    "assetUrlDark": "/badges/dark/galaxy.svg",
+    "assetUrlLight": "/badges/light/galaxy.svg"
+  },
+  {
+    "id": "bastion",
+    "name": "堡垒",
+    "nameEn": "Bastion",
+    "fullLabel": "堡垒 (Bastion)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/bastion.svg",
+    "assetUrlDark": "/badges/dark/bastion.svg",
+    "assetUrlLight": "/badges/light/bastion.svg"
+  },
+  {
+    "id": "phalanx",
+    "name": "方阵",
+    "nameEn": "Phalanx",
+    "fullLabel": "方阵 (Phalanx)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/phalanx.svg",
+    "assetUrlDark": "/badges/dark/phalanx.svg",
+    "assetUrlLight": "/badges/light/phalanx.svg"
+  },
+  {
+    "id": "sentinel",
+    "name": "哨兵",
+    "nameEn": "Sentinel",
+    "fullLabel": "哨兵 (Sentinel)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/sentinel.svg",
+    "assetUrlDark": "/badges/dark/sentinel.svg",
+    "assetUrlLight": "/badges/light/sentinel.svg"
+  },
+  {
+    "id": "fortress",
+    "name": "要塞",
+    "nameEn": "Fortress",
+    "fullLabel": "要塞 (Fortress)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/fortress.svg",
+    "assetUrlDark": "/badges/dark/fortress.svg",
+    "assetUrlLight": "/badges/light/fortress.svg"
+  },
+  {
+    "id": "guardian",
+    "name": "守护",
+    "nameEn": "Guardian",
+    "fullLabel": "守护 (Guardian)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/guardian.svg",
+    "assetUrlDark": "/badges/dark/guardian.svg",
+    "assetUrlLight": "/badges/light/guardian.svg"
+  },
+  {
+    "id": "citadel",
+    "name": "城塞",
+    "nameEn": "Citadel",
+    "fullLabel": "城塞 (Citadel)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/citadel.svg",
+    "assetUrlDark": "/badges/dark/citadel.svg",
+    "assetUrlLight": "/badges/light/citadel.svg"
+  },
+  {
+    "id": "paladin",
+    "name": "圣骑",
+    "nameEn": "Paladin",
+    "fullLabel": "圣骑 (Paladin)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/paladin.svg",
+    "assetUrlDark": "/badges/dark/paladin.svg",
+    "assetUrlLight": "/badges/light/paladin.svg"
+  },
+  {
+    "id": "barrier",
+    "name": "壁垒",
+    "nameEn": "Barrier",
+    "fullLabel": "壁垒 (Barrier)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/barrier.svg",
+    "assetUrlDark": "/badges/dark/barrier.svg",
+    "assetUrlLight": "/badges/light/barrier.svg"
+  },
+  {
+    "id": "ward",
+    "name": "结界",
+    "nameEn": "Ward",
+    "fullLabel": "结界 (Ward)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/ward.svg",
+    "assetUrlDark": "/badges/dark/ward.svg",
+    "assetUrlLight": "/badges/light/ward.svg"
+  },
+  {
+    "id": "defender",
+    "name": "卫士",
+    "nameEn": "Defender",
+    "fullLabel": "卫士 (Defender)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "aegis",
+    "seriesTitle": "🛡️ AEGIS 防御装甲",
+    "seriesNameZh": "防御装甲",
+    "seriesNameEn": "AEGIS",
+    "seriesDescription": "重金属质感与几何堡垒的结合，代表高防节点与零信任安全架构。",
+    "assetUrl": "/badges/dark/defender.svg",
+    "assetUrlDark": "/badges/dark/defender.svg",
+    "assetUrlLight": "/badges/light/defender.svg"
+  },
+  {
+    "id": "fusion",
+    "name": "聚变",
+    "nameEn": "Fusion",
+    "fullLabel": "聚变 (Fusion)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/fusion.svg",
+    "assetUrlDark": "/badges/dark/fusion.svg",
+    "assetUrlLight": "/badges/light/fusion.svg"
+  },
+  {
+    "id": "plasma",
+    "name": "等离子",
+    "nameEn": "Plasma",
+    "fullLabel": "等离子 (Plasma)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/plasma.svg",
+    "assetUrlDark": "/badges/dark/plasma.svg",
+    "assetUrlLight": "/badges/light/plasma.svg"
+  },
+  {
+    "id": "pulse",
+    "name": "脉冲",
+    "nameEn": "Pulse",
+    "fullLabel": "脉冲 (Pulse)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/pulse.svg",
+    "assetUrlDark": "/badges/dark/pulse.svg",
+    "assetUrlLight": "/badges/light/pulse.svg"
+  },
+  {
+    "id": "ignition",
+    "name": "点火",
+    "nameEn": "Ignition",
+    "fullLabel": "点火 (Ignition)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/ignition.svg",
+    "assetUrlDark": "/badges/dark/ignition.svg",
+    "assetUrlLight": "/badges/light/ignition.svg"
+  },
+  {
+    "id": "core",
+    "name": "内核",
+    "nameEn": "Core",
+    "fullLabel": "内核 (Core)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/core.svg",
+    "assetUrlDark": "/badges/dark/core.svg",
+    "assetUrlLight": "/badges/light/core.svg"
+  },
+  {
+    "id": "fission",
+    "name": "裂变",
+    "nameEn": "Fission",
+    "fullLabel": "裂变 (Fission)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/fission.svg",
+    "assetUrlDark": "/badges/dark/fission.svg",
+    "assetUrlLight": "/badges/light/fission.svg"
+  },
+  {
+    "id": "overload",
+    "name": "过载",
+    "nameEn": "Overload",
+    "fullLabel": "过载 (Overload)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/overload.svg",
+    "assetUrlDark": "/badges/dark/overload.svg",
+    "assetUrlLight": "/badges/light/overload.svg"
+  },
+  {
+    "id": "dynamo",
+    "name": "动力",
+    "nameEn": "Dynamo",
+    "fullLabel": "动力 (Dynamo)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/dynamo.svg",
+    "assetUrlDark": "/badges/dark/dynamo.svg",
+    "assetUrlLight": "/badges/light/dynamo.svg"
+  },
+  {
+    "id": "radiance",
+    "name": "辐射",
+    "nameEn": "Radiance",
+    "fullLabel": "辐射 (Radiance)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/radiance.svg",
+    "assetUrlDark": "/badges/dark/radiance.svg",
+    "assetUrlLight": "/badges/light/radiance.svg"
+  },
+  {
+    "id": "vortex",
+    "name": "涡流",
+    "nameEn": "Vortex",
+    "fullLabel": "涡流 (Vortex)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "reactor",
+    "seriesTitle": "☢️ REACTOR 能源核心",
+    "seriesNameZh": "能源核心",
+    "seriesNameEn": "REACTOR",
+    "seriesDescription": "狂暴流体加速与高频电涌，代表极速算力引擎与高并发枢纽。",
+    "assetUrl": "/badges/dark/vortex.svg",
+    "assetUrlDark": "/badges/dark/vortex.svg",
+    "assetUrlLight": "/badges/light/vortex.svg"
+  },
+  {
+    "id": "sniper",
+    "name": "狙击",
+    "nameEn": "Sniper",
+    "fullLabel": "狙击 (Sniper)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/sniper.svg",
+    "assetUrlDark": "/badges/dark/sniper.svg",
+    "assetUrlLight": "/badges/light/sniper.svg"
+  },
+  {
+    "id": "lockon",
+    "name": "锁定",
+    "nameEn": "Lock-On",
+    "fullLabel": "锁定 (Lock-On)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/lockon.svg",
+    "assetUrlDark": "/badges/dark/lockon.svg",
+    "assetUrlLight": "/badges/light/lockon.svg"
+  },
+  {
+    "id": "radar",
+    "name": "雷达",
+    "nameEn": "Radar",
+    "fullLabel": "雷达 (Radar)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/radar.svg",
+    "assetUrlDark": "/badges/dark/radar.svg",
+    "assetUrlLight": "/badges/light/radar.svg"
+  },
+  {
+    "id": "strike",
+    "name": "打击",
+    "nameEn": "Strike",
+    "fullLabel": "打击 (Strike)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/strike.svg",
+    "assetUrlDark": "/badges/dark/strike.svg",
+    "assetUrlLight": "/badges/light/strike.svg"
+  },
+  {
+    "id": "recon",
+    "name": "侦察",
+    "nameEn": "Recon",
+    "fullLabel": "侦察 (Recon)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/recon.svg",
+    "assetUrlDark": "/badges/dark/recon.svg",
+    "assetUrlLight": "/badges/light/recon.svg"
+  },
+  {
+    "id": "crosshair",
+    "name": "准星",
+    "nameEn": "Crosshair",
+    "fullLabel": "准星 (Crosshair)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/crosshair.svg",
+    "assetUrlDark": "/badges/dark/crosshair.svg",
+    "assetUrlLight": "/badges/light/crosshair.svg"
+  },
+  {
+    "id": "tracer",
+    "name": "追踪",
+    "nameEn": "Tracer",
+    "fullLabel": "追踪 (Tracer)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/tracer.svg",
+    "assetUrlDark": "/badges/dark/tracer.svg",
+    "assetUrlLight": "/badges/light/tracer.svg"
+  },
+  {
+    "id": "overwatch",
+    "name": "天眼",
+    "nameEn": "Overwatch",
+    "fullLabel": "天眼 (Overwatch)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/overwatch.svg",
+    "assetUrlDark": "/badges/dark/overwatch.svg",
+    "assetUrlLight": "/badges/light/overwatch.svg"
+  },
+  {
+    "id": "intercept",
+    "name": "拦截",
+    "nameEn": "Intercept",
+    "fullLabel": "拦截 (Intercept)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/intercept.svg",
+    "assetUrlDark": "/badges/dark/intercept.svg",
+    "assetUrlLight": "/badges/light/intercept.svg"
+  },
+  {
+    "id": "barrage",
+    "name": "弹幕",
+    "nameEn": "Barrage",
+    "fullLabel": "弹幕 (Barrage)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "tactical",
+    "seriesTitle": "👁️ TACTICAL 战术打击",
+    "seriesNameZh": "战术打击",
+    "seriesNameEn": "TACTICAL",
+    "seriesDescription": "锐利视差与军事级断点扫描HUD，代表CDN加速与精准网络。",
+    "assetUrl": "/badges/dark/barrage.svg",
+    "assetUrlDark": "/badges/dark/barrage.svg",
+    "assetUrlLight": "/badges/light/barrage.svg"
+  },
+  {
+    "id": "oracle",
+    "name": "神谕",
+    "nameEn": "Oracle",
+    "fullLabel": "神谕 (Oracle)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/oracle.svg",
+    "assetUrlDark": "/badges/dark/oracle.svg",
+    "assetUrlLight": "/badges/light/oracle.svg"
+  },
+  {
+    "id": "mystic",
+    "name": "秘法",
+    "nameEn": "Mystic",
+    "fullLabel": "秘法 (Mystic)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/mystic.svg",
+    "assetUrlDark": "/badges/dark/mystic.svg",
+    "assetUrlLight": "/badges/light/mystic.svg"
+  },
+  {
+    "id": "rune",
+    "name": "符文",
+    "nameEn": "Rune",
+    "fullLabel": "符文 (Rune)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/rune.svg",
+    "assetUrlDark": "/badges/dark/rune.svg",
+    "assetUrlLight": "/badges/light/rune.svg"
+  },
+  {
+    "id": "glyph",
+    "name": "印记",
+    "nameEn": "Glyph",
+    "fullLabel": "印记 (Glyph)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/glyph.svg",
+    "assetUrlDark": "/badges/dark/glyph.svg",
+    "assetUrlLight": "/badges/light/glyph.svg"
+  },
+  {
+    "id": "aether",
+    "name": "以太",
+    "nameEn": "Aether",
+    "fullLabel": "以太 (Aether)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/aether.svg",
+    "assetUrlDark": "/badges/dark/aether.svg",
+    "assetUrlLight": "/badges/light/aether.svg"
+  },
+  {
+    "id": "sigil",
+    "name": "刻印",
+    "nameEn": "Sigil",
+    "fullLabel": "刻印 (Sigil)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/sigil.svg",
+    "assetUrlDark": "/badges/dark/sigil.svg",
+    "assetUrlLight": "/badges/light/sigil.svg"
+  },
+  {
+    "id": "astral",
+    "name": "星灵",
+    "nameEn": "Astral",
+    "fullLabel": "星灵 (Astral)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/astral.svg",
+    "assetUrlDark": "/badges/dark/astral.svg",
+    "assetUrlLight": "/badges/light/astral.svg"
+  },
+  {
+    "id": "abyss",
+    "name": "深渊",
+    "nameEn": "Abyss",
+    "fullLabel": "深渊 (Abyss)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/abyss.svg",
+    "assetUrlDark": "/badges/dark/abyss.svg",
+    "assetUrlLight": "/badges/light/abyss.svg"
+  },
+  {
+    "id": "paradox",
+    "name": "悖论",
+    "nameEn": "Paradox",
+    "fullLabel": "悖论 (Paradox)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/paradox.svg",
+    "assetUrlDark": "/badges/dark/paradox.svg",
+    "assetUrlLight": "/badges/light/paradox.svg"
+  },
+  {
+    "id": "enigma",
+    "name": "谜团",
+    "nameEn": "Enigma",
+    "fullLabel": "谜团 (Enigma)",
+    "sourceId": "core",
+    "sourceLabel": "核心科幻",
+    "seriesId": "arcane",
+    "seriesTitle": "✡️ ARCANE 魔能矩阵",
+    "seriesNameZh": "魔能矩阵",
+    "seriesNameEn": "ARCANE",
+    "seriesDescription": "神秘法阵刻印与多层逆向旋转，代表前沿AI大模型与复杂算力。",
+    "assetUrl": "/badges/dark/enigma.svg",
+    "assetUrlDark": "/badges/dark/enigma.svg",
+    "assetUrlLight": "/badges/light/enigma.svg"
+  },
+  {
+    "id": "rat",
+    "name": "子鼠",
+    "nameEn": "Water",
+    "fullLabel": "子鼠 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/rat.svg",
+    "assetUrlDark": "/badges/dark/rat.svg",
+    "assetUrlLight": "/badges/light/rat.svg"
+  },
+  {
+    "id": "pig",
+    "name": "亥猪",
+    "nameEn": "Water",
+    "fullLabel": "亥猪 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/pig.svg",
+    "assetUrlDark": "/badges/dark/pig.svg",
+    "assetUrlLight": "/badges/light/pig.svg"
+  },
+  {
+    "id": "tiger",
+    "name": "寅虎",
+    "nameEn": "Wood",
+    "fullLabel": "寅虎 (Wood)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/tiger.svg",
+    "assetUrlDark": "/badges/dark/tiger.svg",
+    "assetUrlLight": "/badges/light/tiger.svg"
+  },
+  {
+    "id": "rabbit",
+    "name": "卯兔",
+    "nameEn": "Wood",
+    "fullLabel": "卯兔 (Wood)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/rabbit.svg",
+    "assetUrlDark": "/badges/dark/rabbit.svg",
+    "assetUrlLight": "/badges/light/rabbit.svg"
+  },
+  {
+    "id": "snake",
+    "name": "巳蛇",
+    "nameEn": "Fire",
+    "fullLabel": "巳蛇 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/snake.svg",
+    "assetUrlDark": "/badges/dark/snake.svg",
+    "assetUrlLight": "/badges/light/snake.svg"
+  },
+  {
+    "id": "horse",
+    "name": "午马",
+    "nameEn": "Fire",
+    "fullLabel": "午马 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/horse.svg",
+    "assetUrlDark": "/badges/dark/horse.svg",
+    "assetUrlLight": "/badges/light/horse.svg"
+  },
+  {
+    "id": "monkey",
+    "name": "申猴",
+    "nameEn": "Metal",
+    "fullLabel": "申猴 (Metal)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/monkey.svg",
+    "assetUrlDark": "/badges/dark/monkey.svg",
+    "assetUrlLight": "/badges/light/monkey.svg"
+  },
+  {
+    "id": "rooster",
+    "name": "酉鸡",
+    "nameEn": "Metal",
+    "fullLabel": "酉鸡 (Metal)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/rooster.svg",
+    "assetUrlDark": "/badges/dark/rooster.svg",
+    "assetUrlLight": "/badges/light/rooster.svg"
+  },
+  {
+    "id": "ox",
+    "name": "丑牛",
+    "nameEn": "Earth",
+    "fullLabel": "丑牛 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/ox.svg",
+    "assetUrlDark": "/badges/dark/ox.svg",
+    "assetUrlLight": "/badges/light/ox.svg"
+  },
+  {
+    "id": "dragon",
+    "name": "辰龙",
+    "nameEn": "Earth",
+    "fullLabel": "辰龙 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/dragon.svg",
+    "assetUrlDark": "/badges/dark/dragon.svg",
+    "assetUrlLight": "/badges/light/dragon.svg"
+  },
+  {
+    "id": "goat",
+    "name": "未羊",
+    "nameEn": "Earth",
+    "fullLabel": "未羊 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/goat.svg",
+    "assetUrlDark": "/badges/dark/goat.svg",
+    "assetUrlLight": "/badges/light/goat.svg"
+  },
+  {
+    "id": "dog",
+    "name": "戌狗",
+    "nameEn": "Earth",
+    "fullLabel": "戌狗 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "zodiac",
+    "seriesTitle": "🐉 ZODIAC 生肖机甲 (五行重铸)",
+    "seriesNameZh": "生肖机甲 (五行重铸)",
+    "seriesNameEn": "ZODIAC",
+    "seriesDescription": "打破千篇一律，赋予金木水火土专属的色彩与硬核独立的物理动效。",
+    "assetUrl": "/badges/dark/dog.svg",
+    "assetUrlDark": "/badges/dark/dog.svg",
+    "assetUrlLight": "/badges/light/dog.svg"
+  },
+  {
+    "id": "aries",
+    "name": "白羊",
+    "nameEn": "Fire",
+    "fullLabel": "白羊 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/aries.svg",
+    "assetUrlDark": "/badges/dark/aries.svg",
+    "assetUrlLight": "/badges/light/aries.svg"
+  },
+  {
+    "id": "leo",
+    "name": "狮子",
+    "nameEn": "Fire",
+    "fullLabel": "狮子 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/leo.svg",
+    "assetUrlDark": "/badges/dark/leo.svg",
+    "assetUrlLight": "/badges/light/leo.svg"
+  },
+  {
+    "id": "sagittarius",
+    "name": "射手",
+    "nameEn": "Fire",
+    "fullLabel": "射手 (Fire)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/sagittarius.svg",
+    "assetUrlDark": "/badges/dark/sagittarius.svg",
+    "assetUrlLight": "/badges/light/sagittarius.svg"
+  },
+  {
+    "id": "taurus",
+    "name": "金牛",
+    "nameEn": "Earth",
+    "fullLabel": "金牛 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/taurus.svg",
+    "assetUrlDark": "/badges/dark/taurus.svg",
+    "assetUrlLight": "/badges/light/taurus.svg"
+  },
+  {
+    "id": "virgo",
+    "name": "处女",
+    "nameEn": "Earth",
+    "fullLabel": "处女 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/virgo.svg",
+    "assetUrlDark": "/badges/dark/virgo.svg",
+    "assetUrlLight": "/badges/light/virgo.svg"
+  },
+  {
+    "id": "capricorn",
+    "name": "摩羯",
+    "nameEn": "Earth",
+    "fullLabel": "摩羯 (Earth)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/capricorn.svg",
+    "assetUrlDark": "/badges/dark/capricorn.svg",
+    "assetUrlLight": "/badges/light/capricorn.svg"
+  },
+  {
+    "id": "gemini",
+    "name": "双子",
+    "nameEn": "Air",
+    "fullLabel": "双子 (Air)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/gemini.svg",
+    "assetUrlDark": "/badges/dark/gemini.svg",
+    "assetUrlLight": "/badges/light/gemini.svg"
+  },
+  {
+    "id": "libra",
+    "name": "天秤",
+    "nameEn": "Air",
+    "fullLabel": "天秤 (Air)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/libra.svg",
+    "assetUrlDark": "/badges/dark/libra.svg",
+    "assetUrlLight": "/badges/light/libra.svg"
+  },
+  {
+    "id": "aquarius",
+    "name": "水瓶",
+    "nameEn": "Air",
+    "fullLabel": "水瓶 (Air)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/aquarius.svg",
+    "assetUrlDark": "/badges/dark/aquarius.svg",
+    "assetUrlLight": "/badges/light/aquarius.svg"
+  },
+  {
+    "id": "cancer",
+    "name": "巨蟹",
+    "nameEn": "Water",
+    "fullLabel": "巨蟹 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/cancer.svg",
+    "assetUrlDark": "/badges/dark/cancer.svg",
+    "assetUrlLight": "/badges/light/cancer.svg"
+  },
+  {
+    "id": "scorpio",
+    "name": "天蝎",
+    "nameEn": "Water",
+    "fullLabel": "天蝎 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/scorpio.svg",
+    "assetUrlDark": "/badges/dark/scorpio.svg",
+    "assetUrlLight": "/badges/light/scorpio.svg"
+  },
+  {
+    "id": "pisces",
+    "name": "双鱼",
+    "nameEn": "Water",
+    "fullLabel": "双鱼 (Water)",
+    "sourceId": "astro-zodiac",
+    "sourceLabel": "星相生肖",
+    "seriesId": "astral",
+    "seriesTitle": "✨ ASTRAL 全息星图 (四象法则)",
+    "seriesNameZh": "全息星图 (四象法则)",
+    "seriesNameEn": "ASTRAL",
+    "seriesDescription": "火象闪烁、水象涟漪、土象扫描、风象公转。真实坐标的完美重构。",
+    "assetUrl": "/badges/dark/pisces.svg",
+    "assetUrlDark": "/badges/dark/pisces.svg",
+    "assetUrlLight": "/badges/light/pisces.svg"
+  }
+] as const
diff --git a/server/src/config/badges.ts b/server/src/config/badges.ts
new file mode 100644
index 0000000..2a55967
--- /dev/null
+++ b/server/src/config/badges.ts
@@ -0,0 +1,26 @@
+import { badgeCatalogData } from './badges.generated.js'
+
+export interface BadgeCatalogItem {
+  id: string
+  name: string
+  nameEn: string | null
+  fullLabel: string
+  sourceId?: string
+  sourceLabel?: string
+  seriesId: string
+  seriesTitle: string
+  seriesNameZh?: string
+  seriesNameEn?: string | null
+  seriesDescription: string
+  assetUrl: string
+  assetUrlDark?: string
+  assetUrlLight?: string
+  displayOrder?: number
+  isActive?: boolean
+  seriesIsActive?: boolean
+}
+
+export const BADGE_RANDOM_DRAW_COST = 500
+export const BADGE_SELECT_COST = 1500
+
+export const DEFAULT_BADGE_CATALOG = badgeCatalogData as unknown as BadgeCatalogItem[]
diff --git a/server/src/config/rate-limit.ts b/server/src/config/rate-limit.ts
new file mode 100644
index 0000000..5f6b3c4
--- /dev/null
+++ b/server/src/config/rate-limit.ts
@@ -0,0 +1,710 @@
+/**
+ * 速率限制配置
+ * 
+ * 配置说明:
+ * - max: 时间窗口内最大请求数
+ * - timeWindow: 时间窗口 (支持 '1 minute', '1 hour', '1 second' 等)
+ * - description: 接口说明 (仅用于文档)
+ * 
+ * 调整建议:
+ * - 登录/注册: 较严格，防止暴力破解
+ * - 读取操作: 可以适当放宽
+ * - 写入操作: 适中限制
+ * - 敏感操作: 严格限制
+ */
+
+export interface RateLimitRule {
+    /** 路由路径 (支持通配符) */
+    path: string
+    /** HTTP 方法 */
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | '*'
+    /** 时间窗口内最大请求数 */
+    max: number
+    /** 时间窗口 */
+    timeWindow: string
+    /** 接口说明 */
+    description: string
+}
+
+// ==================== 全局默认配置 ====================
+
+export const globalRateLimit = {
+    /** 全局默认: 每分钟最大请求数 */
+    max: 300,
+    /** 全局默认: 时间窗口 */
+    timeWindow: '1 minute',
+    /** 描述 */
+    description: '全局默认限制'
+}
+
+// ==================== 接口级别配置 ====================
+
+export const rateLimitRules: RateLimitRule[] = [
+    // ========== 认证相关 (严格限制) ==========
+    {
+        path: '/api/auth/check-2fa',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '检查2FA状态 - 防止用户名枚举'
+    },
+    {
+        path: '/api/auth/login',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '登录接口 - 防止暴力破解'
+    },
+    {
+        path: '/api/auth/register',
+        method: 'POST',
+        max: 3,
+        timeWindow: '1 minute',
+        description: '注册接口 - 防止批量注册'
+    },
+    {
+        path: '/api/auth/refresh',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '刷新令牌 - 适中限制'
+    },
+    {
+        path: '/api/auth/2fa/*',
+        method: '*',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '2FA 相关操作'
+    },
+    {
+        path: '/api/auth/forgot-password/send-code',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 hour',
+        description: '发送找回密码验证码 - 防止滥用'
+    },
+    {
+        path: '/api/auth/forgot-password/reset',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '重置密码 - 防止暴力破解验证码'
+    },
+
+    // ========== 实例操作 (适中限制) ==========
+    {
+        path: '/api/instances',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '创建实例 - 防止滥用资源'
+    },
+    {
+        path: '/api/instances',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取实例列表'
+    },
+    {
+        path: '/api/instances/*/start',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '启动实例'
+    },
+    {
+        path: '/api/instances/*/stop',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '停止实例'
+    },
+    {
+        path: '/api/instances/*/restart',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '重启实例'
+    },
+    {
+        path: '/api/instances/*/reinstall',
+        method: 'POST',
+        max: 2,
+        timeWindow: '5 minutes',
+        description: '重装实例 - 严格限制'
+    },
+
+    // ========== 快照/备份 (严格限制) ==========
+    {
+        path: '/api/instances/*/snapshots',
+        method: 'POST',
+        max: 5,
+        timeWindow: '5 minutes',
+        description: '创建快照 - 资源密集操作'
+    },
+    {
+        path: '/api/instances/*/snapshots',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取快照列表'
+    },
+    {
+        path: '/api/instances/*/backups',
+        method: 'POST',
+        max: 3,
+        timeWindow: '10 minutes',
+        description: '创建备份 - 资源密集操作'
+    },
+    {
+        path: '/api/instances/*/backups',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取备份列表'
+    },
+    {
+        path: '/api/instances/*/backups/*/export',
+        method: 'POST',
+        max: 5,
+        timeWindow: '10 minutes',
+        description: '创建备份导出任务 - 资源密集操作'
+    },
+    {
+        path: '/api/instances/*/backups/export/*/download-token',
+        method: 'POST',
+        max: 10,
+        timeWindow: '10 minutes',
+        description: '获取备份下载令牌'
+    },
+    {
+        path: '/api/instances/*/backups/export/*/download',
+        method: 'GET',
+        max: 5,
+        timeWindow: '10 minutes',
+        description: '下载备份 - 带宽密集操作'
+    },
+
+    // ========== 端口映射 ==========
+    {
+        path: '/api/instances/*/ports',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '添加端口映射'
+    },
+    {
+        path: '/api/instances/*/ports',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取端口映射列表'
+    },
+
+    // ========== 反代站点 ==========
+    {
+        path: '/api/instances/*/sites',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取站点列表'
+    },
+    {
+        path: '/api/instances/*/sites',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '添加反代站点'
+    },
+    {
+        path: '/api/instances/*/sites/*',
+        method: 'DELETE',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '删除反代站点'
+    },
+    {
+        path: '/api/instances/*/sites/*/refresh',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '刷新站点配置'
+    },
+
+    // ========== 用户管理 ==========
+    {
+        path: '/api/users',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取用户列表 (管理员)'
+    },
+    {
+        path: '/api/users/*',
+        method: 'PATCH',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '更新用户信息'
+    },
+    {
+        path: '/api/users/*/change-email/send-code',
+        method: 'POST',
+        max: 5,
+        timeWindow: '10 minutes',
+        description: '发送修改邮箱验证码'
+    },
+
+    // ========== 主机/节点管理 (管理员) ==========
+    {
+        path: '/api/hosts',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取主机列表'
+    },
+    {
+        path: '/api/hosts',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '添加主机'
+    },
+    {
+        path: '/api/node-groups',
+        method: '*',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '节点组管理'
+    },
+
+    // ========== 套餐管理 ==========
+    {
+        path: '/api/packages',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取套餐列表'
+    },
+    {
+        path: '/api/packages',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '创建套餐 (管理员)'
+    },
+    {
+        path: '/api/packages/*/hosts-detail',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取套餐宿主机详情'
+    },
+    {
+        path: '/api/packages/*/release-channel',
+        method: 'PUT',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '设置释放通知渠道'
+    },
+    {
+        path: '/api/packages/*/release-quota',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '释放配额 - 敏感操作'
+    },
+
+    // ========== SSH 密钥 ==========
+    {
+        path: '/api/ssh-keys',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取 SSH 密钥列表'
+    },
+    {
+        path: '/api/ssh-keys',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '添加 SSH 密钥'
+    },
+    {
+        path: '/api/ssh-keys/generate',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '生成 SSH 密钥对 - CPU密集操作'
+    },
+
+    // ========== 通知 ==========
+    {
+        path: '/api/notifications',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取通知列表'
+    },
+    {
+        path: '/api/notifications/channels',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '添加通知渠道'
+    },
+
+    // ========== 站内信 ==========
+    {
+        path: '/api/inbox',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取站内信列表'
+    },
+    {
+        path: '/api/inbox/unread-count',
+        method: 'GET',
+        max: 120,
+        timeWindow: '1 minute',
+        description: '获取未读数量 - 轮询场景'
+    },
+    {
+        path: '/api/inbox/*/read',
+        method: 'POST',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '标记消息已读'
+    },
+    {
+        path: '/api/inbox/read-all',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '全部标记已读'
+    },
+    {
+        path: '/api/inbox/*',
+        method: 'DELETE',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '删除消息'
+    },
+    {
+        path: '/api/inbox/read',
+        method: 'DELETE',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '清空已读消息'
+    },
+    {
+        path: '/api/inbox/admin/send/*',
+        method: 'POST',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '管理员发送站内信给特定用户'
+    },
+    {
+        path: '/api/inbox/admin/broadcast',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '管理员全站广播'
+    },
+    {
+        path: '/api/inbox/instances/*/notify',
+        method: 'POST',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '宿主机所有者发送站内信给实例用户'
+    },
+    {
+        path: '/api/inbox/hosts/*/notify',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '宿主机所有者通知节点实例用户'
+    },
+
+    // ========== 镜像 ==========
+    {
+        path: '/api/images',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取镜像列表'
+    },
+    {
+        path: '/api/images/sync',
+        method: 'POST',
+        max: 2,
+        timeWindow: '5 minutes',
+        description: '同步镜像 - 资源密集操作'
+    },
+
+    // ========== 日志 ==========
+    {
+        path: '/api/logs',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取日志列表'
+    },
+
+    // ========== 帮助文档 ==========
+    {
+        path: '/api/help',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取帮助文档'
+    },
+
+    // ========== OAuth ==========
+    {
+        path: '/api/oauth/*',
+        method: '*',
+        max: 10,
+        timeWindow: '1 minute',
+        description: 'OAuth 认证'
+    },
+
+    // ========== 邀请码 ==========
+    {
+        path: '/api/auth/invite',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '生成邀请码 (管理员)'
+    },
+    {
+        path: '/api/auth/invites',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取邀请码列表'
+    },
+    {
+        path: '/api/auth/user/invite',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '生成邀请码 (用户)'
+    },
+    {
+        path: '/api/auth/user/invites',
+        method: 'GET',
+        max: 30,
+        timeWindow: '1 minute',
+        description: '获取用户邀请码列表'
+    },
+    {
+        path: '/api/auth/user/invites/*',
+        method: 'DELETE',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '删除用户邀请码'
+    },
+
+    // ========== 工单系统 ==========
+    {
+        path: '/api/tickets',
+        method: 'POST',
+        max: 5,
+        timeWindow: '1 minute',
+        description: '创建工单 - 防止滥发'
+    },
+
+    // ========== 自定义初始化命令 ==========
+    {
+        path: '/api/init-commands',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取初始化命令列表'
+    },
+    {
+        path: '/api/init-commands/available',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取可用初始化命令列表'
+    },
+    {
+        path: '/api/init-commands/distros',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取发行版列表'
+    },
+    {
+        path: '/api/init-commands',
+        method: 'POST',
+        max: 10,
+        timeWindow: '1 minute',
+        description: '创建初始化命令 - 防止滥用'
+    },
+    {
+        path: '/api/init-commands/*',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取单个初始化命令详情'
+    },
+    {
+        path: '/api/init-commands/*',
+        method: 'PUT',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '更新初始化命令'
+    },
+    {
+        path: '/api/init-commands/*',
+        method: 'DELETE',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '删除初始化命令'
+    },
+    {
+        path: '/api/tickets',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取工单列表'
+    },
+    {
+        path: '/api/tickets/pending-count',
+        method: 'GET',
+        max: 120,
+        timeWindow: '1 minute',
+        description: '获取待处理工单数量 - 轮询场景'
+    },
+    {
+        path: '/api/tickets/my-hosts',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取我的宿主机工单列表'
+    },
+    {
+        path: '/api/tickets/hosts/*',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取指定宿主机工单列表'
+    },
+    {
+        path: '/api/tickets/attachments/*/content',
+        method: 'GET',
+        max: 240,
+        timeWindow: '1 minute',
+        description: '读取工单图片内容'
+    },
+    {
+        path: '/api/tickets/*',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取工单详情'
+    },
+    {
+        path: '/api/tickets/*/messages',
+        method: 'GET',
+        max: 60,
+        timeWindow: '1 minute',
+        description: '获取工单消息列表'
+    },
+    {
+        path: '/api/tickets/*/messages',
+        method: 'POST',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '回复工单 - 防止刷屏'
+    },
+    {
+        path: '/api/tickets/*/status',
+        method: 'PATCH',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '更新工单状态'
+    },
+    {
+        path: '/api/tickets/*/close',
+        method: 'POST',
+        max: 20,
+        timeWindow: '1 minute',
+        description: '关闭工单'
+    }
+]
+
+// ==================== 白名单配置 ====================
+
+export const rateLimitWhitelist = {
+    /** 跳过速率限制的路径前缀 */
+    pathPrefixes: [
+        '/api/ws/instances/*/terminal'  // WebSocket 终端
+    ],
+    /** 跳过速率限制的完整路径 */
+    exactPaths: [
+        '/api/health'  // 健康检查
+    ]
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 根据请求路径和方法查找匹配的速率限制规则
+ */
+export function findRateLimitRule(path: string, method: string): RateLimitRule | null {
+    for (const rule of rateLimitRules) {
+        // 检查方法匹配
+        if (rule.method !== '*' && rule.method !== method) {
+            continue
+        }
+
+        // 检查路径匹配 (支持 * 通配符)
+        const pattern = rule.path
+            .replace(/\*/g, '[^/]+')  // * 匹配单个路径段
+            .replace(/\//g, '\\/')    // 转义斜杠
+
+        const regex = new RegExp(`^${pattern}$`)
+        if (regex.test(path)) {
+            return rule
+        }
+    }
+    return null
+}
+
+/**
+ * 检查路径是否在白名单中
+ */
+export function isWhitelisted(path: string): boolean {
+    // 检查完整路径
+    if (rateLimitWhitelist.exactPaths.includes(path)) {
+        return true
+    }
+
+    // 检查前缀匹配
+    for (const prefix of rateLimitWhitelist.pathPrefixes) {
+        const pattern = prefix
+            .replace(/\*/g, '[^/]+')
+            .replace(/\//g, '\\/')
+
+        const regex = new RegExp(`^${pattern}`)
+        if (regex.test(path)) {
+            return true
+        }
+    }
+
+    return false
+}
+
+/**
+ * 打印速率限制配置摘要
+ */
+export function printRateLimitSummary(): void {
+    console.log('\n📊 速率限制配置:')
+    console.log(`   全局默认: ${globalRateLimit.max} 次/${globalRateLimit.timeWindow}`)
+    console.log(`   自定义规则: ${rateLimitRules.length} 条`)
+    console.log(`   白名单路径: ${rateLimitWhitelist.exactPaths.length + rateLimitWhitelist.pathPrefixes.length} 条\n`)
+}
diff --git a/server/src/config/system-images.ts b/server/src/config/system-images.ts
new file mode 100644
index 0000000..2d028da
--- /dev/null
+++ b/server/src/config/system-images.ts
@@ -0,0 +1,297 @@
+/**
+ * 系统预定义镜像列表
+ * 这些镜像可供用户创建实例使用
+ * Incus 会在需要时自动从远程下载镜像
+ */
+
+export interface SystemImage {
+    id: string           // 唯一标识，用于前端选择
+    name: string         // 显示名称
+    osType: string       // 操作系统类型
+    remoteAlias: string  // LXC 远程镜像别名
+    architecture: string // 架构
+    icon: string         // 图标标识（发行版ID）
+}
+
+export const SYSTEM_IMAGES: SystemImage[] = [
+    // AlmaLinux
+    {
+        id: 'almalinux-8-cloud',
+        name: 'Almalinux 8 amd64',
+        osType: 'Linux',
+        remoteAlias: 'almalinux/8/cloud',
+        architecture: 'x86_64',
+        icon: 'almalinux'
+    },
+    {
+        id: 'almalinux-9-cloud',
+        name: 'Almalinux 9 amd64',
+        osType: 'Linux',
+        remoteAlias: 'almalinux/9/cloud',
+        architecture: 'x86_64',
+        icon: 'almalinux'
+    },
+    {
+        id: 'almalinux-10-cloud',
+        name: 'Almalinux 10 amd64',
+        osType: 'Linux',
+        remoteAlias: 'almalinux/10/cloud',
+        architecture: 'x86_64',
+        icon: 'almalinux'
+    },
+    // Alpine
+    {
+        id: 'alpine-3.19-cloud',
+        name: 'Alpine 3.19 amd64',
+        osType: 'Linux',
+        remoteAlias: 'alpine/3.19/cloud',
+        architecture: 'x86_64',
+        icon: 'alpine'
+    },
+    {
+        id: 'alpine-3.20-cloud',
+        name: 'Alpine 3.20 amd64',
+        osType: 'Linux',
+        remoteAlias: 'alpine/3.20/cloud',
+        architecture: 'x86_64',
+        icon: 'alpine'
+    },
+    {
+        id: 'alpine-3.21-cloud',
+        name: 'Alpine 3.21 amd64',
+        osType: 'Linux',
+        remoteAlias: 'alpine/3.21/cloud',
+        architecture: 'x86_64',
+        icon: 'alpine'
+    },
+    {
+        id: 'alpine-3.22-cloud',
+        name: 'Alpine 3.22 amd64',
+        osType: 'Linux',
+        remoteAlias: 'alpine/3.22/cloud',
+        architecture: 'x86_64',
+        icon: 'alpine'
+    },
+    {
+        id: 'alpine-3.23-cloud',
+        name: 'Alpine 3.23 amd64',
+        osType: 'Linux',
+        remoteAlias: 'alpine/3.23/cloud',
+        architecture: 'x86_64',
+        icon: 'alpine'
+    },
+    {
+        id: 'alpine-edge-cloud',
+        name: 'Alpine edge amd64',
+        osType: 'Linux',
+        remoteAlias: 'alpine/edge/cloud',
+        architecture: 'x86_64',
+        icon: 'alpine'
+    },
+    // CentOS Stream
+    {
+        id: 'centos-9-stream-cloud',
+        name: 'Centos 9-Stream amd64',
+        osType: 'Linux',
+        remoteAlias: 'centos/9-Stream/cloud',
+        architecture: 'x86_64',
+        icon: 'centos'
+    },
+    {
+        id: 'centos-10-stream-cloud',
+        name: 'Centos 10-Stream amd64',
+        osType: 'Linux',
+        remoteAlias: 'centos/10-Stream/cloud',
+        architecture: 'x86_64',
+        icon: 'centos'
+    },
+    // Debian
+    {
+        id: 'debian-11-cloud',
+        name: 'Debian bullseye amd64',
+        osType: 'Linux',
+        remoteAlias: 'debian/11/cloud',
+        architecture: 'x86_64',
+        icon: 'debian'
+    },
+    {
+        id: 'debian-12-cloud',
+        name: 'Debian bookworm amd64',
+        osType: 'Linux',
+        remoteAlias: 'debian/12/cloud',
+        architecture: 'x86_64',
+        icon: 'debian'
+    },
+    {
+        id: 'debian-13-cloud',
+        name: 'Debian trixie amd64',
+        osType: 'Linux',
+        remoteAlias: 'debian/13/cloud',
+        architecture: 'x86_64',
+        icon: 'debian'
+    },
+    {
+        id: 'debian-14-cloud',
+        name: 'Debian forky amd64',
+        osType: 'Linux',
+        remoteAlias: 'debian/14/cloud',
+        architecture: 'x86_64',
+        icon: 'debian'
+    },
+    // Fedora
+    {
+        id: 'fedora-41-cloud',
+        name: 'Fedora 41 amd64',
+        osType: 'Linux',
+        remoteAlias: 'fedora/41/cloud',
+        architecture: 'x86_64',
+        icon: 'fedora'
+    },
+    {
+        id: 'fedora-42-cloud',
+        name: 'Fedora 42 amd64',
+        osType: 'Linux',
+        remoteAlias: 'fedora/42/cloud',
+        architecture: 'x86_64',
+        icon: 'fedora'
+    },
+    {
+        id: 'fedora-43-cloud',
+        name: 'Fedora 43 amd64',
+        osType: 'Linux',
+        remoteAlias: 'fedora/43/cloud',
+        architecture: 'x86_64',
+        icon: 'fedora'
+    },
+    // Kali Linux
+    {
+        id: 'kali-current-cloud',
+        name: 'Kali current amd64',
+        osType: 'Linux',
+        remoteAlias: 'kali/cloud',
+        architecture: 'x86_64',
+        icon: 'kali'
+    },
+    // openSUSE
+    {
+        id: 'opensuse-15.6-cloud',
+        name: 'Opensuse 15.6 amd64',
+        osType: 'Linux',
+        remoteAlias: 'opensuse/15.6/cloud',
+        architecture: 'x86_64',
+        icon: 'opensuse'
+    },
+    {
+        id: 'opensuse-16.0-cloud',
+        name: 'Opensuse 16.0 amd64',
+        osType: 'Linux',
+        remoteAlias: 'opensuse/16.0/cloud',
+        architecture: 'x86_64',
+        icon: 'opensuse'
+    },
+    {
+        id: 'opensuse-tumbleweed-cloud',
+        name: 'Opensuse tumbleweed amd64',
+        osType: 'Linux',
+        remoteAlias: 'opensuse/tumbleweed/cloud',
+        architecture: 'x86_64',
+        icon: 'opensuse'
+    },
+    // Oracle Linux
+    {
+        id: 'oracle-8-cloud',
+        name: 'Oracle 8 amd64',
+        osType: 'Linux',
+        remoteAlias: 'oracle/8/cloud',
+        architecture: 'x86_64',
+        icon: 'oracle'
+    },
+    {
+        id: 'oracle-9-cloud',
+        name: 'Oracle 9 amd64',
+        osType: 'Linux',
+        remoteAlias: 'oracle/9/cloud',
+        architecture: 'x86_64',
+        icon: 'oracle'
+    },
+    // Rocky Linux
+    {
+        id: 'rockylinux-8-cloud',
+        name: 'Rockylinux 8 amd64',
+        osType: 'Linux',
+        remoteAlias: 'rockylinux/8/cloud',
+        architecture: 'x86_64',
+        icon: 'rockylinux'
+    },
+    {
+        id: 'rockylinux-9-cloud',
+        name: 'Rockylinux 9 amd64',
+        osType: 'Linux',
+        remoteAlias: 'rockylinux/9/cloud',
+        architecture: 'x86_64',
+        icon: 'rockylinux'
+    },
+    {
+        id: 'rockylinux-10-cloud',
+        name: 'Rockylinux 10 amd64',
+        osType: 'Linux',
+        remoteAlias: 'rockylinux/10/cloud',
+        architecture: 'x86_64',
+        icon: 'rockylinux'
+    },
+    // Ubuntu
+    {
+        id: 'ubuntu-25.04-cloud',
+        name: 'Ubuntu plucky amd64',
+        osType: 'Linux',
+        remoteAlias: 'ubuntu/25.04/cloud',
+        architecture: 'x86_64',
+        icon: 'ubuntu'
+    },
+    {
+        id: 'ubuntu-25.10-cloud',
+        name: 'Ubuntu questing amd64',
+        osType: 'Linux',
+        remoteAlias: 'ubuntu/25.10/cloud',
+        architecture: 'x86_64',
+        icon: 'ubuntu'
+    },
+    {
+        id: 'ubuntu-jammy-cloud',
+        name: 'Ubuntu jammy amd64',
+        osType: 'Linux',
+        remoteAlias: 'ubuntu/jammy/cloud',
+        architecture: 'x86_64',
+        icon: 'ubuntu'
+    },
+    {
+        id: 'ubuntu-noble-cloud',
+        name: 'Ubuntu noble amd64',
+        osType: 'Linux',
+        remoteAlias: 'ubuntu/noble/cloud',
+        architecture: 'x86_64',
+        icon: 'ubuntu'
+    }
+]
+
+/**
+ * 通过 ID 获取系统镜像
+ */
+export function getSystemImageById(id: string): SystemImage | undefined {
+    return SYSTEM_IMAGES.find(img => img.id === id)
+}
+
+/**
+ * 通过远程别名获取系统镜像
+ */
+export function getSystemImageByRemoteAlias(remoteAlias: string): SystemImage | undefined {
+    return SYSTEM_IMAGES.find(img => img.remoteAlias === remoteAlias)
+}
+
+/**
+ * 生成本地别名（从远程别名）
+ * e.g., "debian/12/cloud" -> "debian-12-cloud"
+ */
+export function generateLocalAlias(remoteAlias: string): string {
+    return remoteAlias.replace(/[/\.]/g, '-').toLowerCase()
+}
diff --git a/server/src/db/advisory-locks.ts b/server/src/db/advisory-locks.ts
new file mode 100644
index 0000000..560e467
--- /dev/null
+++ b/server/src/db/advisory-locks.ts
@@ -0,0 +1,36 @@
+import { Prisma } from '@prisma/client'
+
+export const HOST_TASK_CLAIM_LOCK_NAMESPACE = 4101
+export const HOST_NOTIFICATION_EMAIL_LOCK_NAMESPACE = 4102
+export const HOST_NOTIFICATION_EMAIL_LOCK_KEY = 1
+export const TRANSFER_CREATE_LOCK_NAMESPACE = 4103
+export const REDEEM_CODE_LOCK_NAMESPACE = 4104
+export const HOSTING_BALANCE_LOG_LOCK_NAMESPACE = 4105
+export const INSTANCE_OPERATION_LOCK_NAMESPACE = 4106
+export const USER_DESTROY_BILLING_LOCK_NAMESPACE = 4107
+export const USER_ADMIN_ROLE_LOCK_NAMESPACE = 4108
+
+export async function tryAdvisoryTransactionLock(
+  tx: Prisma.TransactionClient,
+  namespace: number,
+  key: number
+): Promise<boolean> {
+  const result = await tx.$queryRaw<Array<{ locked: boolean }>>(Prisma.sql`
+    SELECT pg_try_advisory_xact_lock(${namespace}, ${key}) AS locked
+  `)
+
+  return result[0]?.locked === true
+}
+
+export async function advisoryTransactionLock(
+  tx: Prisma.TransactionClient,
+  namespace: number,
+  key: number
+): Promise<void> {
+  await tx.$queryRaw<Array<{ locked: boolean }>>(Prisma.sql`
+    WITH acquired_lock AS (
+      SELECT pg_advisory_xact_lock(${namespace}, ${key})
+    )
+    SELECT true AS locked FROM acquired_lock
+  `)
+}
diff --git a/server/src/db/aff.ts b/server/src/db/aff.ts
new file mode 100644
index 0000000..7852389
--- /dev/null
+++ b/server/src/db/aff.ts
@@ -0,0 +1,1127 @@
+/**
+ * AFF 推荐计划相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { AffCode, AffLog, AffLogType, AffWithdrawal, AffWithdrawalStatus, Prisma, PrismaClient } from '@prisma/client'
+import { nanoid } from 'nanoid'
+
+// ==================== AFF 余额操作 ====================
+
+/**
+ * 获取用户 AFF 余额
+ */
+export async function getAffBalance(userId: number): Promise<number> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { affBalance: true }
+  })
+  return user ? Number(user.affBalance) : 0
+}
+
+/**
+ * 检查用户是否已激活 AFF
+ */
+export async function isAffActivated(userId: number): Promise<boolean> {
+  // 由于需求变更，AFF 推荐计划现在无需充值即可使用
+  // 所有用户都可以使用AFF推荐计划
+  // 保留userId参数以保持API兼容性，但暂时不需要实际查询数据库
+  userId; // 使用参数避免编译警告
+  return true;
+  
+  // 原来的逻辑（已注释）
+  // const user = await prisma.user.findUnique({
+  //   where: { id: userId },
+  //   select: { affActivatedAt: true }
+  // })
+  // return !!user?.affActivatedAt
+}
+
+/**
+ * 激活用户的 AFF 推荐计划（首次充值时调用）
+ */
+export async function activateAff(userId: number): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: { affActivatedAt: new Date() }
+  })
+}
+
+// AFF 余额变动输入
+export interface AffBalanceChangeInput {
+  userId: number
+  type: AffLogType
+  amount: number // 正数=收入，负数=转出
+  affCodeId?: number
+  instanceId?: number
+  mailSubscriptionId?: number
+  originalAmount?: number
+  remark?: string
+}
+
+// AFF 余额变动结果
+export interface AffBalanceChangeResult {
+  success: boolean
+  affLog?: AffLog
+  newBalance?: number
+  error?: string
+}
+
+/**
+ * 变更用户 AFF 余额（事务安全）
+ */
+export async function changeAffBalance(
+  input: AffBalanceChangeInput,
+  tx?: Prisma.TransactionClient
+): Promise<AffBalanceChangeResult> {
+  const { userId, type, amount, affCodeId, instanceId, mailSubscriptionId, originalAmount, remark } = input
+  const client = tx || prisma
+
+  try {
+    // 1. 获取当前 AFF 余额
+    const user = await client.user.findUnique({
+      where: { id: userId },
+      select: { affBalance: true }
+    })
+
+    if (!user) {
+      throw new Error('用户不存在')
+    }
+
+    const balanceBefore = Number(user.affBalance)
+    const balanceAfter = balanceBefore + amount
+
+    // 2. 检查余额是否足够（如果是扣款）
+    if (amount < 0 && balanceAfter < 0) {
+      throw new Error('AFF 余额不足')
+    }
+
+    // 3. 更新用户 AFF 余额
+    await client.user.update({
+      where: { id: userId },
+      data: { affBalance: balanceAfter }
+    })
+
+    // 4. 创建 AFF 余额变动日志
+    const affLog = await client.affLog.create({
+      data: {
+        userId,
+        type,
+        amount,
+        affCodeId,
+        instanceId,
+        mailSubscriptionId,
+        originalAmount,
+        balanceBefore,
+        balanceAfter,
+        remark
+      }
+    })
+
+    return {
+      success: true,
+      affLog,
+      newBalance: balanceAfter
+    }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'AFF 余额变动失败'
+    }
+  }
+}
+
+// ==================== AFF 优惠码操作 ====================
+
+/**
+ * 生成优惠码（格式：AFF-用户ID-8位随机码）
+ */
+export function generateAffCode(userId: number): string {
+  const random = nanoid(8).toUpperCase()
+  return `AFF-${userId}-${random}`
+}
+
+// 优惠码带关联信息的类型（支持全局码，packagePlan 可为 null）
+export type AffCodeWithPlan = AffCode & {
+  packagePlan: {
+    id: number
+    name: string
+    price: number
+    package: { id: number; name: string }
+  } | null
+}
+
+/**
+ * 获取用户的所有优惠码（包括全局码）
+ */
+export async function getUserAffCodes(userId: number): Promise<AffCodeWithPlan[]> {
+  const codes = await prisma.affCode.findMany({
+    where: { userId },
+    include: {
+      packagePlan: {
+        select: {
+          id: true,
+          name: true,
+          price: true,
+          package: { select: { id: true, name: true } }
+        }
+      }
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+  return codes.map(code => ({
+    ...code,
+    packagePlan: code.packagePlan ? {
+      ...code.packagePlan,
+      price: Number(code.packagePlan.price)
+    } : null
+  }))
+}
+
+/**
+ * 获取用户可以创建优惠码的方案列表
+ * 只返回用户购买过且尚未创建优惠码的付费方案
+ * 同时返回全局码状态
+ */
+export async function getAvailablePlansForAffCode(userId: number): Promise<{
+  plans: {
+    id: number
+    name: string
+    price: number
+    package: { id: number; name: string }
+    hasCode: boolean
+  }[]
+  hasGlobalCode: boolean
+}> {
+  // 1. 检查用户是否已有全局码
+  const globalCode = await prisma.affCode.findFirst({
+    where: { userId, packagePlanId: null }
+  })
+  const hasGlobalCode = !!globalCode
+
+  // 2. 获取用户购买过的付费方案 ID
+  const purchasedInstances = await prisma.instance.findMany({
+    where: {
+      userId,
+      packagePlanId: { not: null },
+      packagePlan: { price: { gt: 0 } } // 只要付费方案
+    },
+    select: { packagePlanId: true },
+    distinct: ['packagePlanId']
+  })
+  const purchasedPlanIds = purchasedInstances.map(i => i.packagePlanId!).filter(Boolean)
+
+  if (purchasedPlanIds.length === 0) {
+    return { plans: [], hasGlobalCode }
+  }
+
+  // 3. 获取这些方案的详细信息和是否已创建优惠码
+  const plans = await prisma.packagePlan.findMany({
+    where: {
+      id: { in: purchasedPlanIds },
+      isActive: true
+    },
+    include: {
+      package: { select: { id: true, name: true } },
+      affCodes: {
+        where: { userId },
+        select: { id: true }
+      }
+    }
+  })
+
+  return {
+    plans: plans.map(plan => ({
+      id: plan.id,
+      name: plan.name,
+      price: Number(plan.price),
+      package: plan.package,
+      hasCode: plan.affCodes.length > 0
+    })),
+    hasGlobalCode
+  }
+}
+
+/**
+ * 创建优惠码（支持方案专有码和全局码）
+ * @param packagePlanId 不传或传 undefined 则创建全局码
+ * 折扣率和返利率固定为 5%/5%
+ */
+export async function createAffCode(
+  userId: number,
+  packagePlanId?: number
+): Promise<{ success: boolean; affCode?: AffCode; error?: string }> {
+  try {
+    // 1. 检查是否已激活 AFF
+    const activated = await isAffActivated(userId)
+    if (!activated) {
+      return { success: false, error: '推荐计划尚未激活，请先充值任意金额' }
+    }
+
+    // 固定折扣率和返利率为 5%/5%
+    const discountRate = 0.05
+    const commissionRate = 0.05
+
+    // 全局码逻辑 - 允许创建多个
+    if (packagePlanId === undefined) {
+      try {
+        const code = generateAffCode(userId)
+        const affCode = await prisma.affCode.create({
+          data: {
+            code,
+            userId,
+            packagePlanId: null,
+            discountRate,
+            commissionRate
+          }
+        })
+        return { success: true, affCode }
+      } catch (error) {
+        return { success: false, error: '创建全局优惠码失败' }
+      }
+    }
+
+    // 方案专有码逻辑（原有逻辑）
+    // 2. 检查方案是否存在且为付费方案
+    const plan = await prisma.packagePlan.findUnique({
+      where: { id: packagePlanId },
+      select: { id: true, price: true, isActive: true }
+    })
+    if (!plan || Number(plan.price) <= 0) {
+      return { success: false, error: '方案不存在或不是付费方案' }
+    }
+    if (!plan.isActive) {
+      return { success: false, error: '方案已下架' }
+    }
+
+    // 3. 检查用户是否购买过该方案
+    const hasPurchased = await prisma.instance.count({
+      where: {
+        userId,
+        packagePlanId
+      }
+    })
+    if (hasPurchased === 0) {
+      return { success: false, error: '您尚未购买过此方案，无法创建优惠码' }
+    }
+
+    // 4. 检查是否已创建过（唯一约束会自动阻止，但这里提前检查给出友好提示）
+    const existing = await prisma.affCode.findUnique({
+      where: { userId_packagePlanId: { userId, packagePlanId } }
+    })
+    if (existing) {
+      return { success: false, error: '该方案已创建过优惠码' }
+    }
+
+    // 5. 创建优惠码
+    const code = generateAffCode(userId)
+    const affCode = await prisma.affCode.create({
+      data: {
+        code,
+        userId,
+        packagePlanId,
+        discountRate,
+        commissionRate
+      }
+    })
+
+    return { success: true, affCode }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : '创建优惠码失败'
+    }
+  }
+}
+
+/**
+ * 删除优惠码（仅允许删除未产生收益且未绑定任何订阅的优惠码）
+ */
+export async function deleteAffCode(
+  userId: number,
+  codeId: number
+): Promise<{ success: boolean; code?: string; error?: string }> {
+  try {
+    // 1. 查找优惠码
+    const affCode = await prisma.affCode.findUnique({
+      where: { id: codeId },
+      select: { id: true, code: true, userId: true, usedCount: true }
+    })
+
+    if (!affCode) {
+      return { success: false, error: '优惠码不存在' }
+    }
+
+    // 2. 检查所有权
+    if (affCode.userId !== userId) {
+      return { success: false, error: '无权删除此优惠码' }
+    }
+
+    // 3. 检查使用次数和现有绑定
+    if (affCode.usedCount > 0) {
+      return { success: false, error: '该优惠码已被使用，无法删除' }
+    }
+
+    const [instanceBindingCount, mailBindingCount] = await Promise.all([
+      prisma.affBinding.count({ where: { affCodeId: codeId } }),
+      prisma.mailSubscriptionAffBinding.count({ where: { affCodeId: codeId } })
+    ])
+
+    if (instanceBindingCount > 0 || mailBindingCount > 0) {
+      return { success: false, error: '该优惠码已绑定订阅，无法删除' }
+    }
+
+    // 4. 删除优惠码
+    await prisma.affCode.delete({
+      where: { id: codeId }
+    })
+
+    return { success: true, code: affCode.code }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : '删除优惠码失败'
+    }
+  }
+}
+
+/**
+ * 验证优惠码（支持全局码）
+ */
+export async function validateAffCode(
+  code: string,
+  packagePlanId: number,
+  userId: number
+): Promise<{
+  valid: boolean
+  affCode?: AffCode
+  discountRate?: number
+  commissionRate?: number
+  error?: string
+}> {
+  // 1. 查询优惠码
+  const affCode = await prisma.affCode.findUnique({
+    where: { code: code.toUpperCase() }
+  })
+
+  if (!affCode) {
+    return { valid: false, error: '优惠码不存在' }
+  }
+
+  // 2. 检查方案是否匹配（全局码跳过此检查）
+  if (affCode.packagePlanId !== null && affCode.packagePlanId !== packagePlanId) {
+    return { valid: false, error: '优惠码不适用于此方案' }
+  }
+
+  // 3. 检查是否自己的优惠码
+  if (affCode.userId === userId) {
+    return { valid: false, error: '不能使用自己的优惠码' }
+  }
+
+  return {
+    valid: true,
+    affCode,
+    discountRate: Number(affCode.discountRate),
+    commissionRate: Number(affCode.commissionRate)
+  }
+}
+
+// ==================== AFF 绑定与返利 ====================
+
+/**
+ * 创建实例与优惠码的绑定关系（开通时调用）
+ */
+export async function createAffBinding(
+  instanceId: number,
+  affCodeId: number,
+  tx?: Prisma.TransactionClient
+): Promise<void> {
+  const client = tx || prisma
+  await client.affBinding.create({
+    data: { instanceId, affCodeId }
+  })
+}
+
+/**
+ * 获取实例绑定的优惠码
+ */
+export async function getInstanceAffBinding(instanceId: number, tx?: Prisma.TransactionClient): Promise<{
+  affCode: AffCode
+  userId: number // 优惠码创建者
+} | null> {
+  const client = tx || prisma
+  const binding = await client.affBinding.findUnique({
+    where: { instanceId },
+    include: {
+      affCode: true
+    }
+  })
+
+  if (!binding) return null
+
+  return {
+    affCode: binding.affCode,
+    userId: binding.affCode.userId
+  }
+}
+
+/**
+ * 处理 AFF 返利（新购或续费时调用）
+ * @param originalAmount 订单原始金额（未打折前）
+ */
+export async function processAffCommission(
+  affCodeId: number,
+  instanceId: number,
+  originalAmount: number,
+  type: 'new_purchase' | 'renew',
+  tx?: Prisma.TransactionClient
+): Promise<void> {
+  const client = tx || prisma
+
+  // 1. 获取优惠码信息
+  const affCode = await client.affCode.findUnique({
+    where: { id: affCodeId }
+  })
+
+  if (!affCode) return
+
+  // 2. 计算返利金额
+  const commissionRate = Number(affCode.commissionRate)
+  const commission = Math.round(originalAmount * commissionRate * 100) / 100
+
+  if (commission <= 0) return
+
+  // 3. 给优惠码创建者增加 AFF 余额
+  await changeAffBalance({
+    userId: affCode.userId,
+    type,
+    amount: commission,
+    affCodeId,
+    instanceId,
+    originalAmount,
+    remark: type === 'new_purchase' ? '新购返利' : '续费返利'
+  }, client as PrismaClient)
+
+  // 4. 更新优惠码统计
+  await client.affCode.update({
+    where: { id: affCodeId },
+    data: {
+      usedCount: type === 'new_purchase' ? { increment: 1 } : undefined,
+      totalEarnings: { increment: commission }
+    }
+  })
+}
+
+// ==================== AFF 日志查询 ====================
+
+// AFF 日志带关联信息的类型
+export type AffLogWithDetails = AffLog & {
+  affCode?: { code: string } | null
+}
+
+/**
+ * 获取用户的 AFF 收益日志（分页）
+ */
+export async function getAffLogs(
+  userId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    type?: AffLogType
+  } = {}
+): Promise<{
+  logs: AffLogWithDetails[]
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const { page = 1, pageSize = 20, type } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.AffLogWhereInput = {
+    userId,
+    ...(type ? { type } : {})
+  }
+
+  const [logs, total] = await Promise.all([
+    prisma.affLog.findMany({
+      where,
+      include: {
+        affCode: { select: { code: true } }
+      },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.affLog.count({ where })
+  ])
+
+  return { logs, total, page, pageSize }
+}
+
+/**
+ * 获取用户 AFF 统计
+ */
+export async function getAffStats(userId: number): Promise<{
+  totalEarnings: number
+  totalConverted: number
+  currentBalance: number
+  totalCodes: number
+  totalUsed: number
+}> {
+  const [user, codes, earningsResult, convertResult] = await Promise.all([
+    prisma.user.findUnique({
+      where: { id: userId },
+      select: { affBalance: true }
+    }),
+    prisma.affCode.aggregate({
+      where: { userId },
+      _count: true,
+      _sum: { usedCount: true, totalEarnings: true }
+    }),
+    prisma.affLog.aggregate({
+      where: { userId, amount: { gt: 0 } },
+      _sum: { amount: true }
+    }),
+    prisma.affLog.aggregate({
+      where: { userId, type: 'convert' },
+      _sum: { amount: true }
+    })
+  ])
+
+  return {
+    // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+    totalEarnings: earningsResult._sum.amount !== null
+      ? parseFloat(String(earningsResult._sum.amount))
+      : 0,
+    totalConverted: convertResult._sum.amount !== null
+      ? Math.abs(parseFloat(String(convertResult._sum.amount)))
+      : 0,
+    currentBalance: user?.affBalance !== null && user?.affBalance !== undefined
+      ? parseFloat(String(user.affBalance))
+      : 0,
+    totalCodes: codes._count || 0,
+    totalUsed: codes._sum.usedCount || 0
+  }
+}
+
+// ==================== AFF 转化申请 ====================
+
+/**
+ * 创建转化申请（自动审批通过）
+ * 提交申请后系统自动完成审批，无需管理员手动操作
+ * 管理员后台仍可查看所有转化记录
+ */
+export async function createAffWithdrawal(
+  userId: number,
+  amount: number
+): Promise<{ success: boolean; withdrawal?: AffWithdrawal; error?: string }> {
+  try {
+    // 1. 检查最低转化金额（0.1 元起）
+    if (amount < 0.1) {
+      return { success: false, error: '最低转化金额为 0.1 元' }
+    }
+
+    // 2. 在事务中完成：创建申请 + 自动审批
+    const withdrawal = await prisma.$transaction(async (tx) => {
+      // 2.1 获取用户当前余额
+      const user = await tx.user.findUnique({
+        where: { id: userId },
+        select: { affBalance: true, balance: true }
+      })
+
+      if (!user) {
+        throw new Error('用户不存在')
+      }
+
+      const affBalanceBefore = Number(user.affBalance)
+      const balanceBefore = Number(user.balance)
+
+      // 2.2 检查 AFF 余额
+      if (affBalanceBefore < amount) {
+        throw new Error('AFF 余额不足')
+      }
+
+      // 2.3 创建申请记录（直接标记为已通过，方便管理员后台查看）
+      const newWithdrawal = await tx.affWithdrawal.create({
+        data: {
+          userId,
+          amount,
+          status: 'approved',
+          reviewedBy: null, // 系统自动审批，无审核人
+          reviewedAt: new Date()
+        }
+      })
+
+      // 2.4 扣除 AFF 余额
+      const affBalanceAfter = affBalanceBefore - amount
+      await tx.user.update({
+        where: { id: userId },
+        data: { affBalance: affBalanceAfter }
+      })
+
+      // 2.5 记录 AFF 日志
+      await tx.affLog.create({
+        data: {
+          userId,
+          type: 'convert',
+          amount: -amount,
+          balanceBefore: affBalanceBefore,
+          balanceAfter: affBalanceAfter,
+          remark: `转化申请 #${newWithdrawal.id} 审核通过`
+        }
+      })
+
+      // 2.6 增加用户主余额
+      const balanceAfter = balanceBefore + amount
+      await tx.user.update({
+        where: { id: userId },
+        data: { balance: balanceAfter }
+      })
+
+      // 2.7 记录余额日志
+      await tx.balanceLog.create({
+        data: {
+          userId,
+          type: 'gift',
+          amount,
+          balanceBefore,
+          balanceAfter,
+          remark: `AFF 余额转化 #${newWithdrawal.id}`
+        }
+      })
+
+      return newWithdrawal
+    })
+
+    return { success: true, withdrawal }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : '转化失败'
+    }
+  }
+}
+
+/**
+ * 根据 ID 获取转化申请
+ */
+export async function getAffWithdrawalById(withdrawalId: number): Promise<AffWithdrawal | null> {
+  return prisma.affWithdrawal.findUnique({
+    where: { id: withdrawalId }
+  })
+}
+
+/**
+ * 获取用户的转化申请（分页）
+ */
+export async function getUserAffWithdrawals(
+  userId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    status?: AffWithdrawalStatus
+  } = {}
+): Promise<{
+  withdrawals: AffWithdrawal[]
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const { page = 1, pageSize = 20, status } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.AffWithdrawalWhereInput = {
+    userId,
+    ...(status ? { status } : {})
+  }
+
+  const [withdrawals, total] = await Promise.all([
+    prisma.affWithdrawal.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.affWithdrawal.count({ where })
+  ])
+
+  return { withdrawals, total, page, pageSize }
+}
+
+// ==================== 管理员操作 ====================
+
+/**
+ * 获取所有待审核的转化申请（管理员）
+ */
+export async function getPendingAffWithdrawals(options: {
+  page?: number
+  pageSize?: number
+  status?: AffWithdrawalStatus
+} = {}): Promise<{
+  withdrawals: (AffWithdrawal & { user: { id: number; username: string; affBalance: number } })[]
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const { page = 1, pageSize = 20, status } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.AffWithdrawalWhereInput = status ? { status } : {}
+
+  const [withdrawals, total] = await Promise.all([
+    prisma.affWithdrawal.findMany({
+      where,
+      include: {
+        user: {
+          select: { id: true, username: true, affBalance: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.affWithdrawal.count({ where })
+  ])
+
+  return {
+    withdrawals: withdrawals.map(w => ({
+      ...w,
+      user: { ...w.user, affBalance: Number(w.user.affBalance) }
+    })),
+    total,
+    page,
+    pageSize
+  }
+}
+
+/**
+ * 审核通过转化申请（管理员）
+ */
+export async function approveAffWithdrawal(
+  withdrawalId: number,
+  adminId: number
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    await prisma.$transaction(async (tx) => {
+      // 1. 获取申请信息
+      const withdrawal = await tx.affWithdrawal.findUnique({
+        where: { id: withdrawalId },
+        include: { user: { select: { affBalance: true, balance: true } } }
+      })
+
+      if (!withdrawal) {
+        throw new Error('申请不存在')
+      }
+      if (withdrawal.status !== 'pending') {
+        throw new Error('申请已处理')
+      }
+
+      const amount = Number(withdrawal.amount)
+      const affBalanceBefore = Number(withdrawal.user.affBalance)
+      const balanceBefore = Number(withdrawal.user.balance)
+
+      if (affBalanceBefore < amount) {
+        throw new Error('AFF 余额不足')
+      }
+
+      // 2. 扣除 AFF 余额
+      const affBalanceAfter = affBalanceBefore - amount
+      await tx.user.update({
+        where: { id: withdrawal.userId },
+        data: { affBalance: affBalanceAfter }
+      })
+
+      // 3. 记录 AFF 日志
+      await tx.affLog.create({
+        data: {
+          userId: withdrawal.userId,
+          type: 'convert',
+          amount: -amount,
+          balanceBefore: affBalanceBefore,
+          balanceAfter: affBalanceAfter,
+          remark: `转化申请 #${withdrawalId} 审核通过`
+        }
+      })
+
+      // 4. 增加用户主余额
+      const balanceAfter = balanceBefore + amount
+      await tx.user.update({
+        where: { id: withdrawal.userId },
+        data: { balance: balanceAfter }
+      })
+
+      // 5. 记录余额日志
+      await tx.balanceLog.create({
+        data: {
+          userId: withdrawal.userId,
+          type: 'gift',
+          amount,
+          balanceBefore,
+          balanceAfter,
+          remark: `AFF 余额转化 #${withdrawalId}`
+        }
+      })
+
+      // 6. 更新申请状态
+      await tx.affWithdrawal.update({
+        where: { id: withdrawalId },
+        data: {
+          status: 'approved',
+          reviewedBy: adminId,
+          reviewedAt: new Date()
+        }
+      })
+    })
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : '审核失败'
+    }
+  }
+}
+
+/**
+ * 审核拒绝转化申请（管理员）
+ */
+export async function rejectAffWithdrawal(
+  withdrawalId: number,
+  adminId: number,
+  reason: string
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const withdrawal = await prisma.affWithdrawal.findUnique({
+      where: { id: withdrawalId }
+    })
+
+    if (!withdrawal) {
+      return { success: false, error: '申请不存在' }
+    }
+    if (withdrawal.status !== 'pending') {
+      return { success: false, error: '申请已处理' }
+    }
+
+    await prisma.affWithdrawal.update({
+      where: { id: withdrawalId },
+      data: {
+        status: 'rejected',
+        rejectReason: reason,
+        reviewedBy: adminId,
+        reviewedAt: new Date()
+      }
+    })
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : '拒绝失败'
+    }
+  }
+}
+
+// ==================== AFF 榜单 ====================
+
+export interface AffLeaderboardEntry {
+  rank: number
+  username: string  // 打码后的用户名
+  totalEarnings: number
+  isCurrentUser: boolean
+}
+
+/**
+ * 获取 AFF 收益榜单 TOP 10
+ * @param currentUserId 当前用户ID（用于标记是否为当前用户）
+ */
+export async function getAffLeaderboard(currentUserId?: number): Promise<AffLeaderboardEntry[]> {
+  // 聚合查询：按用户分组，统计 amount > 0 的总收益
+  const results = await prisma.affLog.groupBy({
+    by: ['userId'],
+    where: {
+      amount: { gt: 0 }
+    },
+    _sum: {
+      amount: true
+    },
+    orderBy: {
+      _sum: {
+        amount: 'desc'
+      }
+    },
+    take: 10
+  })
+
+  if (results.length === 0) {
+    return []
+  }
+
+  // 获取用户名
+  const userIds = results.map(r => r.userId)
+  const users = await prisma.user.findMany({
+    where: { id: { in: userIds } },
+    select: { id: true, username: true }
+  })
+
+  const userMap = new Map(users.map(u => [u.id, u.username]))
+
+  // 组装榜单数据
+  return results.map((r, index) => {
+    const username = userMap.get(r.userId) || 'Unknown'
+    const totalEarnings = r._sum.amount !== null
+      ? parseFloat(String(r._sum.amount))
+      : 0
+
+    return {
+      rank: index + 1,
+      username: maskUsername(username),
+      totalEarnings,
+      isCurrentUser: r.userId === currentUserId
+    }
+  })
+}
+
+/**
+ * 用户名打码：保留首尾各2字符，中间用 *** 替换
+ */
+function maskUsername(username: string): string {
+  if (username.length <= 4) {
+    // 太短的用户名，只显示首字符
+    return username.charAt(0) + '***'
+  }
+  const first = username.slice(0, 2)
+  const last = username.slice(-2)
+  return `${first}***${last}`
+}
+
+// ==================== 邮箱订阅 AFF 支持 ====================
+
+/**
+ * 验证邮箱订阅优惠码
+ * 邮箱订阅仅支持全局码
+ */
+export async function validateMailAffCode(
+  code: string,
+  userId: number
+): Promise<{
+  valid: boolean
+  affCode?: AffCode
+  discountRate?: number
+  commissionRate?: number
+  error?: string
+}> {
+  // 1. 查询优惠码
+  const affCode = await prisma.affCode.findUnique({
+    where: { code: code.toUpperCase() }
+  })
+
+  if (!affCode) {
+    return { valid: false, error: '优惠码不存在' }
+  }
+
+  // 2. 检查是否为全局码（邮箱订阅仅支持全局码）
+  if (affCode.packagePlanId !== null) {
+    return { valid: false, error: '该优惠码仅适用于特定实例套餐，不支持邮箱订阅' }
+  }
+
+  // 3. 检查是否为自己的优惠码（禁止自返利）
+  if (affCode.userId === userId) {
+    return { valid: false, error: '不能使用自己的优惠码' }
+  }
+
+  // 4. 检查优惠码是否启用
+  if (!affCode.enabled) {
+    return { valid: false, error: '优惠码已禁用' }
+  }
+
+  return {
+    valid: true,
+    affCode,
+    discountRate: Number(affCode.discountRate),
+    commissionRate: Number(affCode.commissionRate)
+  }
+}
+
+/**
+ * 创建邮箱订阅与优惠码的绑定
+ */
+export async function createMailAffBinding(
+  mailSubscriptionId: number,
+  affCodeId: number,
+  tx?: Prisma.TransactionClient
+): Promise<void> {
+  const client = tx || prisma
+  await client.mailSubscriptionAffBinding.create({
+    data: { mailSubscriptionId, affCodeId }
+  })
+}
+
+/**
+ * 处理邮箱订阅的 AFF 返利
+ */
+export async function processMailAffCommission(
+  affCodeId: number,
+  mailSubscriptionId: number,
+  originalAmount: number,
+  type: 'new_purchase' | 'renew',
+  tx?: Prisma.TransactionClient
+): Promise<void> {
+  const client = tx || prisma
+
+  // 1. 获取优惠码信息
+  const affCode = await client.affCode.findUnique({
+    where: { id: affCodeId }
+  })
+
+  if (!affCode) return
+
+  // 2. 计算返利金额
+  const commissionRate = Number(affCode.commissionRate)
+  const commission = Math.round(originalAmount * commissionRate * 100) / 100
+
+  if (commission <= 0) return
+
+  // 3. 给优惠码创建者增加 AFF 余额
+  await changeAffBalance({
+    userId: affCode.userId,
+    type,
+    amount: commission,
+    affCodeId,
+    mailSubscriptionId,
+    originalAmount,
+    remark: type === 'new_purchase' ? '邮箱新购返利' : '邮箱续费返利'
+  }, client as PrismaClient)
+
+  // 4. 更新优惠码统计
+  await client.affCode.update({
+    where: { id: affCodeId },
+    data: {
+      usedCount: type === 'new_purchase' ? { increment: 1 } : undefined,
+      totalEarnings: { increment: commission }
+    }
+  })
+}
+
+/**
+ * 获取邮箱订阅绑定的优惠码
+ */
+export async function getMailSubscriptionAffBinding(mailSubscriptionId: number): Promise<{
+  affCode: AffCode
+  userId: number
+} | null> {
+  const binding = await prisma.mailSubscriptionAffBinding.findUnique({
+    where: { mailSubscriptionId },
+    include: {
+      affCode: true
+    }
+  })
+
+  if (!binding) return null
+
+  return {
+    affCode: binding.affCode,
+    userId: binding.affCode.userId
+  }
+}
diff --git a/server/src/db/announcements.ts b/server/src/db/announcements.ts
new file mode 100644
index 0000000..a692a36
--- /dev/null
+++ b/server/src/db/announcements.ts
@@ -0,0 +1,170 @@
+/**
+ * 公告/通知历史记录数据库操作
+ */
+
+import { prisma } from './index.js'
+import type { AnnouncementType, Prisma } from '@prisma/client'
+
+/**
+ * 创建公告记录
+ */
+export async function createAnnouncement(data: {
+  type: AnnouncementType
+  senderId: number
+  title: string
+  content: string
+  recipientCount: number
+  hostId?: number
+  targetUserId?: number
+  instanceId?: number
+}) {
+  return prisma.announcement.create({
+    data: {
+      type: data.type,
+      senderId: data.senderId,
+      title: data.title,
+      content: data.content,
+      recipientCount: data.recipientCount,
+      hostId: data.hostId,
+      targetUserId: data.targetUserId,
+      instanceId: data.instanceId,
+    },
+  })
+}
+
+/**
+ * 获取公告历史列表（管理员）
+ */
+export async function getAnnouncementList(options: {
+  page?: number
+  pageSize?: number
+  type?: AnnouncementType
+  senderId?: number
+}) {
+  const { page = 1, pageSize = 20, type, senderId } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.AnnouncementWhereInput = {}
+  if (type) where.type = type
+  if (senderId) where.senderId = senderId
+
+  const [items, total] = await Promise.all([
+    prisma.announcement.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize,
+      select: {
+        id: true,
+        type: true,
+        title: true,
+        content: true,
+        recipientCount: true,
+        hostId: true,
+        targetUserId: true,
+        instanceId: true,
+        createdAt: true,
+        sender: {
+          select: {
+            id: true,
+            username: true,
+          },
+        },
+        host: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+      },
+    }),
+    prisma.announcement.count({ where }),
+  ])
+
+  return {
+    items,
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize),
+  }
+}
+
+/**
+ * 获取宿主机所有者的公告历史
+ */
+export async function getHostOwnerAnnouncementList(
+  senderId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    hostId?: number
+  }
+) {
+  const { page = 1, pageSize = 20, hostId } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.AnnouncementWhereInput = {
+    senderId,
+    type: { in: ['host_broadcast', 'host_message'] },
+  }
+  if (hostId) where.hostId = hostId
+
+  const [items, total] = await Promise.all([
+    prisma.announcement.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize,
+      select: {
+        id: true,
+        type: true,
+        title: true,
+        content: true,
+        recipientCount: true,
+        hostId: true,
+        targetUserId: true,
+        instanceId: true,
+        createdAt: true,
+        host: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+      },
+    }),
+    prisma.announcement.count({ where }),
+  ])
+
+  return {
+    items,
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize),
+  }
+}
+
+/**
+ * 获取公告详情
+ */
+export async function getAnnouncementById(id: number) {
+  return prisma.announcement.findUnique({
+    where: { id },
+    include: {
+      sender: {
+        select: {
+          id: true,
+          username: true,
+        },
+      },
+      host: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+    },
+  })
+}
diff --git a/server/src/db/backup-upload-tasks.ts b/server/src/db/backup-upload-tasks.ts
new file mode 100644
index 0000000..0123a61
--- /dev/null
+++ b/server/src/db/backup-upload-tasks.ts
@@ -0,0 +1,227 @@
+/**
+ * 备份上传任务数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { BackupUploadTask, BackupUploadTaskStatus } from '@prisma/client'
+
+/**
+ * 创建备份上传任务
+ */
+export async function createBackupUploadTask(data: {
+    userId: number
+    instanceId: number
+    backupId: number
+    hostId: number
+    storageConfigId: number
+}): Promise<BackupUploadTask> {
+    return prisma.backupUploadTask.create({
+        data: {
+            userId: data.userId,
+            instanceId: data.instanceId,
+            backupId: data.backupId,
+            hostId: data.hostId,
+            storageConfigId: data.storageConfigId,
+            status: 'PENDING'
+        }
+    })
+}
+
+/**
+ * 根据 ID 获取任务
+ */
+export async function getBackupUploadTaskById(id: number): Promise<BackupUploadTask | null> {
+    return prisma.backupUploadTask.findUnique({
+        where: { id }
+    })
+}
+
+/**
+ * 获取任务详情（包含关联数据）
+ */
+export async function getBackupUploadTaskWithDetails(id: number) {
+    return prisma.backupUploadTask.findUnique({
+        where: { id },
+        include: {
+            storageConfig: {
+                select: {
+                    id: true,
+                    name: true,
+                    type: true,
+                    host: true
+                }
+            }
+        }
+    })
+}
+
+/**
+ * 获取用户的上传任务列表
+ */
+export async function getBackupUploadTasksByUserId(
+    userId: number,
+    options?: { limit?: number; status?: BackupUploadTaskStatus }
+): Promise<BackupUploadTask[]> {
+    return prisma.backupUploadTask.findMany({
+        where: {
+            userId,
+            ...(options?.status ? { status: options.status } : {})
+        },
+        orderBy: { createdAt: 'desc' },
+        take: options?.limit || 50
+    })
+}
+
+/**
+ * 获取实例的上传任务列表
+ */
+export async function getBackupUploadTasksByInstanceId(
+    instanceId: number
+): Promise<BackupUploadTask[]> {
+    return prisma.backupUploadTask.findMany({
+        where: { instanceId },
+        orderBy: { createdAt: 'desc' }
+    })
+}
+
+/**
+ * 更新任务状态
+ */
+export async function updateBackupUploadTaskStatus(
+    id: number,
+    status: BackupUploadTaskStatus,
+    extra?: {
+        remoteFileName?: string
+        fileSize?: bigint
+        error?: string
+        startedAt?: Date
+        finishedAt?: Date
+    }
+): Promise<BackupUploadTask> {
+    return prisma.backupUploadTask.update({
+        where: { id },
+        data: {
+            status,
+            ...extra
+        }
+    })
+}
+
+/**
+ * 检查用户是否有进行中的上传任务
+ */
+export async function hasActiveUploadTask(userId: number): Promise<BackupUploadTask | null> {
+    return prisma.backupUploadTask.findFirst({
+        where: {
+            userId,
+            status: { in: ['PENDING', 'PROCESSING'] }
+        }
+    })
+}
+
+/**
+ * 检查实例是否有进行中的上传任务
+ */
+export async function hasActiveUploadTaskForInstance(instanceId: number): Promise<BackupUploadTask | null> {
+    return prisma.backupUploadTask.findFirst({
+        where: {
+            instanceId,
+            status: { in: ['PENDING', 'PROCESSING'] }
+        }
+    })
+}
+
+/**
+ * 获取队列中的位置
+ */
+export async function getUploadTaskQueuePosition(taskId: number): Promise<number> {
+    const task = await prisma.backupUploadTask.findUnique({
+        where: { id: taskId },
+        select: { hostId: true, createdAt: true, status: true }
+    })
+
+    if (!task || task.status !== 'PENDING') return 0
+
+    // 检查是否有正在执行的上传或恢复任务（共享锁）
+    const processingUploadTask = await prisma.backupUploadTask.findFirst({
+        where: {
+            hostId: task.hostId,
+            status: 'PROCESSING'
+        },
+        orderBy: { createdAt: 'asc' }
+    })
+    
+    const processingRestoreTask = await prisma.restoreTask.findFirst({
+        where: {
+            hostId: task.hostId,
+            status: 'PROCESSING'
+        },
+        orderBy: { createdAt: 'asc' }
+    })
+
+    // 如果有 PROCESSING 任务，且创建时间早于当前任务，则位置+1
+    const hasProcessingTask = 
+        (processingUploadTask && processingUploadTask.createdAt < task.createdAt) ||
+        (processingRestoreTask && processingRestoreTask.createdAt < task.createdAt)
+    
+    const processingCount = hasProcessingTask ? 1 : 0
+
+    // 统计创建时间更早的 PENDING 任务数量
+    const pendingCount = await prisma.backupUploadTask.count({
+        where: {
+            hostId: task.hostId,
+            status: 'PENDING',
+            createdAt: { lt: task.createdAt }
+        }
+    })
+
+    return processingCount + pendingCount + 1
+}
+
+/**
+ * 取消任务（仅 PENDING 状态）
+ */
+export async function cancelBackupUploadTask(id: number): Promise<BackupUploadTask> {
+    return prisma.backupUploadTask.update({
+        where: { id },
+        data: {
+            status: 'FAILED',
+            error: '用户取消',
+            finishedAt: new Date()
+        }
+    })
+}
+
+/**
+ * 获取实例的活跃上传任务（用于前端状态恢复）
+ */
+export async function getActiveUploadTaskForInstance(instanceId: number) {
+    return prisma.backupUploadTask.findFirst({
+        where: {
+            instanceId,
+            status: { in: ['PENDING', 'PROCESSING'] }
+        },
+        include: {
+            storageConfig: {
+                select: {
+                    id: true,
+                    name: true,
+                    type: true
+                }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+}
+
+/**
+ * 获取存储配置关联的活跃任务数量
+ */
+export async function countActiveTasksForStorageConfig(storageConfigId: number): Promise<number> {
+    return prisma.backupUploadTask.count({
+        where: {
+            storageConfigId,
+            status: { in: ['PENDING', 'PROCESSING'] }
+        }
+    })
+}
diff --git a/server/src/db/backups.ts b/server/src/db/backups.ts
new file mode 100644
index 0000000..4d9e586
--- /dev/null
+++ b/server/src/db/backups.ts
@@ -0,0 +1,202 @@
+/**
+ * 备份相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Backup } from '../types/database.js'
+
+/**
+ * 获取实例的备份列表
+ */
+export async function getBackupsByInstanceId(instanceId: number): Promise<Backup[]> {
+  const backups = await prisma.backup.findMany({
+    where: {
+      instanceId,
+      status: { not: 'deleted' }
+    },
+    orderBy: {
+      createdAt: 'desc'
+    }
+  })
+  
+  return backups.map(b => ({
+    id: b.id,
+    instance_id: b.instanceId,
+    incus_name: b.incusName,
+    name: b.name,
+    description: b.description,
+    size: b.size,
+    status: b.status,
+    created_at: b.createdAt.toISOString(),
+    expires_at: b.expiresAt?.toISOString() ?? null
+  }))
+}
+
+/**
+ * 根据 ID 获取备份
+ */
+export async function getBackupById(id: number): Promise<Backup | null> {
+  const backup = await prisma.backup.findUnique({
+    where: { id }
+  })
+  
+  if (!backup) return null
+  
+  return {
+    id: backup.id,
+    instance_id: backup.instanceId,
+    incus_name: backup.incusName,
+    name: backup.name,
+    description: backup.description,
+    size: backup.size,
+    status: backup.status,
+    created_at: backup.createdAt.toISOString(),
+    expires_at: backup.expiresAt?.toISOString() ?? null
+  }
+}
+
+/**
+ * 创建备份
+ */
+export async function createBackup(data: {
+  instanceId: number
+  incusName: string
+  name: string
+  description?: string | null
+  expiresAt?: string | null
+}): Promise<number> {
+  const backup = await prisma.backup.create({
+    data: {
+      instanceId: data.instanceId,
+      incusName: data.incusName,
+      name: data.name,
+      description: data.description ?? null,
+      expiresAt: data.expiresAt ? new Date(data.expiresAt) : null,
+      status: 'creating'
+    }
+  })
+  
+  return backup.id
+}
+
+/**
+ * 更新备份状态
+ */
+export async function updateBackupStatus(
+  id: number,
+  status: 'creating' | 'ready' | 'error' | 'deleted',
+  _error: string | null = null
+): Promise<void> {
+  // Prisma 不支持在同一个模型中存储 error 字段（backups 表没有 error 字段）
+  // 如果需要错误信息，应该存储在 description 或其他字段中
+  // _error 参数保留以保持 API 兼容性，但当前不使用
+  await prisma.backup.update({
+    where: { id },
+    data: { status }
+  })
+}
+
+/**
+ * 更新备份大小
+ */
+export async function updateBackupSize(id: number, size: number): Promise<void> {
+  await prisma.backup.update({
+    where: { id },
+    data: { size }
+  })
+}
+
+/**
+ * 删除备份（软删除）
+ */
+export async function deleteBackup(id: number): Promise<void> {
+  await prisma.backup.update({
+    where: { id },
+    data: { status: 'deleted' }
+  })
+}
+
+/**
+ * 获取备份策略
+ */
+export async function getBackupPolicy(instanceId: number): Promise<unknown | null> {
+  const policy = await prisma.backupPolicy.findUnique({
+    where: { instanceId }
+  })
+  
+  return policy as unknown || null
+}
+
+/**
+ * 创建或更新备份策略
+ */
+export async function upsertBackupPolicy(instanceId: number, data: {
+  enabled: boolean
+  intervalMinutes: number
+}): Promise<void> {
+  const nextRunAt = new Date()
+  nextRunAt.setMinutes(nextRunAt.getMinutes() + data.intervalMinutes)
+  
+  await prisma.backupPolicy.upsert({
+    where: { instanceId },
+    create: {
+      instanceId,
+      enabled: data.enabled,
+      intervalMinutes: data.intervalMinutes,
+      nextRunAt
+    },
+    update: {
+      enabled: data.enabled,
+      intervalMinutes: data.intervalMinutes
+    }
+  })
+}
+
+/**
+ * 更新备份策略最后运行时间
+ */
+export async function updateBackupPolicyLastRun(instanceId: number): Promise<void> {
+  const policy = await prisma.backupPolicy.findUnique({
+    where: { instanceId },
+    select: {
+      intervalMinutes: true
+    }
+  })
+  
+  if (!policy) return
+  
+  const now = new Date()
+  const nextRunAt = new Date()
+  nextRunAt.setMinutes(nextRunAt.getMinutes() + policy.intervalMinutes)
+  
+  await prisma.backupPolicy.update({
+    where: { instanceId },
+    data: {
+      lastRunAt: now,
+      nextRunAt
+    }
+  })
+}
+
+/**
+ * 获取待执行的备份策略
+ */
+export async function getPendingBackupPolicies(): Promise<unknown[]> {
+  const now = new Date()
+  
+  const policies = await prisma.backupPolicy.findMany({
+    where: {
+      enabled: true,
+      OR: [
+        { nextRunAt: null },
+        { nextRunAt: { lte: now } }
+      ]
+    },
+    orderBy: {
+      nextRunAt: 'asc'
+    }
+  })
+  
+  return policies as unknown[]
+}
diff --git a/server/src/db/badges.ts b/server/src/db/badges.ts
new file mode 100644
index 0000000..fb555b0
--- /dev/null
+++ b/server/src/db/badges.ts
@@ -0,0 +1,1121 @@
+import { Prisma } from '@prisma/client'
+import type { BadgeApplicationTarget, PointsLogType, UserBadgeSource } from '@prisma/client'
+
+import { BADGE_RANDOM_DRAW_COST, BADGE_SELECT_COST, DEFAULT_BADGE_CATALOG } from '../config/badges.js'
+import type { BadgeCatalogItem } from '../config/badges.js'
+import { prisma } from './prisma.js'
+
+type BadgeClient = typeof prisma | Prisma.TransactionClient
+
+type BadgeRow = {
+  id: string
+  name: string
+  nameEn: string | null
+  fullLabel: string
+  sourceId: string | null
+  sourceLabel: string | null
+  seriesId: string
+  assetUrl: string
+  assetUrlDark: string | null
+  assetUrlLight: string | null
+  displayOrder: number
+  isActive: boolean
+  series: {
+    id: string
+    title: string
+    nameZh: string
+    nameEn: string | null
+    description: string
+    sourceId: string | null
+    sourceLabel: string | null
+    isActive: boolean
+  }
+}
+
+function withoutUndefined<T extends object>(data: T): Partial<T> {
+  return Object.fromEntries(
+    Object.entries(data).filter(([, value]) => value !== undefined)
+  ) as Partial<T>
+}
+
+export interface BadgeSeriesView {
+  id: string
+  title: string
+  nameZh: string
+  nameEn: string | null
+  description: string
+  sourceId: string | null
+  sourceLabel: string | null
+  displayOrder: number
+  isActive: boolean
+  badgeCount?: number
+  activeBadgeCount?: number
+  createdAt?: string
+  updatedAt?: string
+}
+
+export interface BadgeOwnershipView {
+  id: number
+  badgeId: string
+  badgeName: string
+  badgeNameEn: string | null
+  badgeLabel: string
+  seriesId: string
+  seriesTitle: string
+  assetUrl: string
+  assetUrlDark: string | null
+  assetUrlLight: string | null
+  source: UserBadgeSource
+  applicationTarget: BadgeApplicationTarget | null
+  appliedInstanceId: number | null
+  appliedInstanceName: string | null
+  appliedAt: string | null
+  createdAt: string
+}
+
+function fallbackBadgeForId(id: string): BadgeCatalogItem {
+  return {
+    id,
+    name: id,
+    nameEn: null,
+    fullLabel: id,
+    seriesId: 'unknown',
+    seriesTitle: '未知系列',
+    seriesNameZh: '未知系列',
+    seriesNameEn: null,
+    seriesDescription: '该徽章目录记录不存在，保留占位以兼容历史数据。',
+    assetUrl: `/badges/dark/${id}.svg`,
+    assetUrlDark: `/badges/dark/${id}.svg`,
+    assetUrlLight: `/badges/light/${id}.svg`,
+    isActive: false,
+    seriesIsActive: false
+  }
+}
+
+function mapBadgeRow(row: BadgeRow): BadgeCatalogItem {
+  return {
+    id: row.id,
+    name: row.name,
+    nameEn: row.nameEn,
+    fullLabel: row.fullLabel,
+    sourceId: row.sourceId ?? row.series.sourceId ?? undefined,
+    sourceLabel: row.sourceLabel ?? row.series.sourceLabel ?? undefined,
+    seriesId: row.seriesId,
+    seriesTitle: row.series.title,
+    seriesNameZh: row.series.nameZh,
+    seriesNameEn: row.series.nameEn,
+    seriesDescription: row.series.description,
+    assetUrl: row.assetUrl,
+    assetUrlDark: row.assetUrlDark ?? undefined,
+    assetUrlLight: row.assetUrlLight ?? undefined,
+    displayOrder: row.displayOrder,
+    isActive: row.isActive,
+    seriesIsActive: row.series.isActive
+  }
+}
+
+async function getBadgeCatalogMap(client: BadgeClient = prisma): Promise<Map<string, BadgeCatalogItem>> {
+  const rows = await client.badge.findMany({
+    include: { series: true }
+  })
+
+  return new Map(rows.map(row => [row.id, mapBadgeRow(row)]))
+}
+
+async function getBadgeById(
+  id: string,
+  client: BadgeClient = prisma,
+  options: { activeOnly?: boolean } = {}
+): Promise<BadgeCatalogItem | null> {
+  const row = await client.badge.findFirst({
+    where: {
+      id,
+      ...(options.activeOnly
+        ? {
+          isActive: true,
+          series: { is: { isActive: true } }
+        }
+        : {})
+    },
+    include: { series: true }
+  })
+
+  return row ? mapBadgeRow(row) : null
+}
+
+export async function getBadgeCatalog(options: { activeOnly?: boolean } = {}): Promise<BadgeCatalogItem[]> {
+  const rows = await prisma.badge.findMany({
+    where: options.activeOnly
+      ? {
+        isActive: true,
+        series: { is: { isActive: true } }
+      }
+      : undefined,
+    include: { series: true },
+    orderBy: [
+      { series: { displayOrder: 'asc' } },
+      { displayOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+
+  return rows.map(mapBadgeRow)
+}
+
+export async function getBadgeSeriesList(options: { activeOnly?: boolean } = {}): Promise<BadgeSeriesView[]> {
+  const rows = await prisma.badgeSeries.findMany({
+    where: options.activeOnly ? { isActive: true } : undefined,
+    include: {
+      _count: {
+        select: { badges: true }
+      }
+    },
+    orderBy: [
+      { displayOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+
+  const activeCounts = rows.length === 0
+    ? new Map<string, number>()
+    : new Map((await prisma.badge.groupBy({
+      by: ['seriesId'],
+      where: {
+        isActive: true,
+        seriesId: { in: rows.map(row => row.id) },
+        series: { is: { isActive: true } }
+      },
+      _count: { _all: true }
+    })).map(item => [item.seriesId, item._count._all]))
+
+  return rows.map(row => ({
+    id: row.id,
+    title: row.title,
+    nameZh: row.nameZh,
+    nameEn: row.nameEn,
+    description: row.description,
+    sourceId: row.sourceId,
+    sourceLabel: row.sourceLabel,
+    displayOrder: row.displayOrder,
+    isActive: row.isActive,
+    badgeCount: row._count.badges,
+    activeBadgeCount: activeCounts.get(row.id) ?? 0,
+    createdAt: row.createdAt.toISOString(),
+    updatedAt: row.updatedAt.toISOString()
+  }))
+}
+
+export async function selectRandomBadgeOrThrow(client: BadgeClient = prisma) {
+  const catalog = await client.badge.findMany({
+    where: {
+      isActive: true,
+      series: { is: { isActive: true } }
+    },
+    include: { series: true },
+    orderBy: [
+      { series: { displayOrder: 'asc' } },
+      { displayOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+
+  if (catalog.length === 0) {
+    throw new Error('NO_BADGES_AVAILABLE')
+  }
+
+  return mapBadgeRow(catalog[Math.floor(Math.random() * catalog.length)])
+}
+
+function mapBadgeOwnership(
+  record: {
+    id: number
+    badgeId: string
+    source: UserBadgeSource
+    applicationTarget: BadgeApplicationTarget | null
+    appliedAt: Date | null
+    createdAt: Date
+    appliedInstance: { id: number; name: string } | null
+  },
+  badgeMap: Map<string, BadgeCatalogItem>
+): BadgeOwnershipView {
+  const badge = badgeMap.get(record.badgeId) ?? fallbackBadgeForId(record.badgeId)
+
+  return {
+    id: record.id,
+    badgeId: badge.id,
+    badgeName: badge.name,
+    badgeNameEn: badge.nameEn,
+    badgeLabel: badge.fullLabel,
+    seriesId: badge.seriesId,
+    seriesTitle: badge.seriesTitle,
+    assetUrl: badge.assetUrl,
+    assetUrlDark: badge.assetUrlDark ?? null,
+    assetUrlLight: badge.assetUrlLight ?? null,
+    source: record.source,
+    applicationTarget: record.applicationTarget,
+    appliedInstanceId: record.appliedInstance?.id ?? null,
+    appliedInstanceName: record.appliedInstance?.name ?? null,
+    appliedAt: record.appliedAt?.toISOString() ?? null,
+    createdAt: record.createdAt.toISOString()
+  }
+}
+
+export async function createBadgeOwnership(
+  tx: Prisma.TransactionClient,
+  userId: number,
+  badgeId: string,
+  source: UserBadgeSource,
+  badge?: BadgeCatalogItem
+) {
+  const ownership = await tx.userBadgeOwnership.create({
+    data: {
+      userId,
+      badgeId,
+      source
+    },
+    include: {
+      appliedInstance: {
+        select: { id: true, name: true }
+      }
+    }
+  })
+
+  const resolvedBadge = badge ?? await getBadgeById(badgeId, tx) ?? fallbackBadgeForId(badgeId)
+  const badgeMap = new Map([[resolvedBadge.id, resolvedBadge]])
+  return mapBadgeOwnership(ownership, badgeMap)
+}
+
+async function ensureUserPoints(userId: number, tx: typeof prisma = prisma) {
+  return tx.userPoints.upsert({
+    where: { userId },
+    update: {},
+    create: { userId }
+  })
+}
+
+async function spendBadgePoints(
+  tx: Prisma.TransactionClient,
+  userId: number,
+  amount: number,
+  logType: PointsLogType,
+  remark: string
+) {
+  await tx.userPoints.upsert({
+    where: { userId },
+    update: {},
+    create: { userId }
+  })
+
+  const updateResult = await tx.userPoints.updateMany({
+    where: {
+      userId,
+      points: { gte: amount }
+    },
+    data: {
+      points: { decrement: amount },
+      totalSpent: { increment: amount }
+    }
+  })
+
+  if (updateResult.count === 0) {
+    const currentPoints = await tx.userPoints.findUnique({
+      where: { userId },
+      select: { points: true }
+    })
+    return {
+      success: false as const,
+      points: currentPoints?.points ?? 0
+    }
+  }
+
+  const updatedPoints = await tx.userPoints.findUnique({
+    where: { userId },
+    select: { points: true }
+  })
+  const pointsAfter = updatedPoints?.points ?? 0
+  const pointsBefore = pointsAfter + amount
+
+  await tx.pointsLog.create({
+    data: {
+      userId,
+      type: logType,
+      amount: -amount,
+      pointsBefore,
+      pointsAfter,
+      remark
+    }
+  })
+
+  return {
+    success: true as const,
+    points: pointsAfter
+  }
+}
+
+function isRetryableTransactionError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false
+  const prismaError = error as Error & { code?: string }
+  return prismaError.code === 'P2034' ||
+    prismaError.message.includes('deadlock') ||
+    prismaError.message.includes('write conflict') ||
+    prismaError.message.includes('could not serialize')
+}
+
+async function runBadgeTransaction<T>(handler: (tx: Prisma.TransactionClient) => Promise<T>): Promise<T> {
+  const maxRetries = 5
+  let lastError: unknown = null
+
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      return await prisma.$transaction(handler, {
+        isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+        maxWait: 5000,
+        timeout: 10000
+      })
+    } catch (error) {
+      lastError = error
+      if (!isRetryableTransactionError(error) || attempt === maxRetries) {
+        throw error
+      }
+
+      const baseDelay = Math.floor(Math.random() * 250) + 50
+      await new Promise(resolve => setTimeout(resolve, baseDelay * attempt))
+    }
+  }
+
+  throw lastError
+}
+
+export async function getBadgeOverview(userId: number) {
+  const [user, userPoints, ownerships, instances, catalog, badgeMap] = await Promise.all([
+    prisma.user.findUnique({
+      where: { id: userId },
+      select: { avatarBadgeId: true }
+    }),
+    ensureUserPoints(userId),
+    prisma.userBadgeOwnership.findMany({
+      where: { userId },
+      include: {
+        appliedInstance: {
+          select: { id: true, name: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' }
+    }),
+    prisma.instance.findMany({
+      where: {
+        userId,
+        status: { not: 'deleted' }
+      },
+      include: {
+        host: {
+          select: {
+            id: true,
+            name: true,
+            location: true,
+            countryCode: true
+          }
+        },
+        package: {
+          select: {
+            instanceType: true
+          }
+        }
+      },
+      orderBy: { createdAt: 'desc' }
+    }),
+    getBadgeCatalog({ activeOnly: true }),
+    getBadgeCatalogMap()
+  ])
+
+  return {
+    costs: {
+      randomDraw: BADGE_RANDOM_DRAW_COST,
+      select: BADGE_SELECT_COST
+    },
+    currentPoints: userPoints.points,
+    avatarBadgeId: user?.avatarBadgeId ?? null,
+    catalog,
+    ownerships: ownerships.map(ownership => mapBadgeOwnership(ownership, badgeMap)),
+    instances: instances.map(instance => ({
+      id: instance.id,
+      name: instance.name,
+      status: instance.status,
+      iconBadgeId: instance.iconBadgeId,
+      packagePlanId: instance.packagePlanId,
+      instanceType: instance.package?.instanceType === 'vm' ? 'vm' as const : 'container' as const,
+      host: {
+        id: instance.host.id,
+        name: instance.host.name,
+        location: instance.host.location,
+        countryCode: instance.host.countryCode
+      }
+    }))
+  }
+}
+
+export async function performRandomBadgeDraw(userId: number) {
+  const result = await runBadgeTransaction(async (tx) => {
+    const selected = await selectRandomBadgeOrThrow(tx)
+    const spendResult = await spendBadgePoints(
+      tx,
+      userId,
+      BADGE_RANDOM_DRAW_COST,
+      'badge_draw_spend',
+      `徽章随机抽取：${selected.fullLabel}`
+    )
+
+    if (!spendResult.success) {
+      return {
+        success: false as const,
+        points: spendResult.points
+      }
+    }
+
+    return {
+      success: true as const,
+      points: spendResult.points,
+      ownership: await createBadgeOwnership(tx, userId, selected.id, 'draw', selected)
+    }
+  })
+
+  if (!result.success) {
+    return result
+  }
+
+  return {
+    success: true as const,
+    points: result.points,
+    ownership: result.ownership
+  }
+}
+
+export async function performRandomBadgeMultiDraw(userId: number, drawCount = 10) {
+  if (drawCount <= 0) {
+    return {
+      success: false as const,
+      points: 0,
+      ownerships: [] as BadgeOwnershipView[]
+    }
+  }
+
+  const totalCost = BADGE_RANDOM_DRAW_COST * drawCount
+
+  const result = await runBadgeTransaction(async (tx) => {
+    const spendResult = await spendBadgePoints(
+      tx,
+      userId,
+      totalCost,
+      'badge_draw_spend',
+      `徽章十连抽取：${drawCount} 次`
+    )
+
+    if (!spendResult.success) {
+      return {
+        success: false as const,
+        points: spendResult.points,
+        ownerships: [] as BadgeOwnershipView[]
+      }
+    }
+
+    const ownerships: BadgeOwnershipView[] = []
+    for (let index = 0; index < drawCount; index += 1) {
+      const selected = await selectRandomBadgeOrThrow(tx)
+      ownerships.push(await createBadgeOwnership(tx, userId, selected.id, 'draw', selected))
+    }
+
+    return {
+      success: true as const,
+      points: spendResult.points,
+      ownerships
+    }
+  })
+
+  if (!result.success) {
+    return result
+  }
+
+  return {
+    success: true as const,
+    points: result.points,
+    ownerships: result.ownerships
+  }
+}
+
+export async function performSelectBadge(userId: number, badgeId: string) {
+  const result = await runBadgeTransaction(async (tx) => {
+    const badge = await getBadgeById(badgeId, tx, { activeOnly: true })
+    if (!badge) {
+      throw new Error('BADGE_NOT_FOUND')
+    }
+
+    const spendResult = await spendBadgePoints(
+      tx,
+      userId,
+      BADGE_SELECT_COST,
+      'badge_select_spend',
+      `徽章自选领取：${badge.fullLabel}`
+    )
+
+    if (!spendResult.success) {
+      return {
+        success: false as const,
+        points: spendResult.points
+      }
+    }
+
+    return {
+      success: true as const,
+      points: spendResult.points,
+      ownership: await createBadgeOwnership(tx, userId, badge.id, 'select', badge)
+    }
+  })
+
+  if (!result.success) {
+    return result
+  }
+
+  return {
+    success: true as const,
+    points: result.points,
+    ownership: result.ownership
+  }
+}
+
+export async function applyBadgeToAvatar(userId: number, ownershipId: number) {
+  return runBadgeTransaction(async (tx) => {
+    const [user, ownership, badgeMap] = await Promise.all([
+      tx.user.findUnique({
+        where: { id: userId },
+        select: { avatarBadgeId: true }
+      }),
+      tx.userBadgeOwnership.findFirst({
+        where: { id: ownershipId, userId },
+        include: {
+          appliedInstance: {
+            select: { id: true, name: true }
+          }
+        }
+      }),
+      getBadgeCatalogMap(tx)
+    ])
+
+    if (!ownership) {
+      throw new Error('BADGE_OWNERSHIP_NOT_FOUND')
+    }
+
+    if (ownership.applicationTarget === 'avatar' && user?.avatarBadgeId === ownership.badgeId) {
+      return mapBadgeOwnership(ownership, badgeMap)
+    }
+
+    if (ownership.applicationTarget === 'instance' && ownership.appliedInstanceId) {
+      await tx.instance.updateMany({
+        where: {
+          id: ownership.appliedInstanceId,
+          userId,
+          iconBadgeId: ownership.badgeId
+        },
+        data: { iconBadgeId: null }
+      })
+    }
+
+    await tx.userBadgeOwnership.updateMany({
+      where: {
+        userId,
+        applicationTarget: 'avatar',
+        id: { not: ownership.id }
+      },
+      data: {
+        applicationTarget: null,
+        appliedInstanceId: null,
+        appliedAt: null
+      }
+    })
+
+    await tx.user.update({
+      where: { id: userId },
+      data: { avatarBadgeId: ownership.badgeId }
+    })
+
+    const applyOwnership = await tx.userBadgeOwnership.updateMany({
+      where: {
+        id: ownership.id
+      },
+      data: {
+        applicationTarget: 'avatar',
+        appliedInstanceId: null,
+        appliedAt: new Date()
+      }
+    })
+
+    if (applyOwnership.count === 0) {
+      throw new Error('BADGE_STATE_CONFLICT')
+    }
+
+    const updatedOwnership = await tx.userBadgeOwnership.findUniqueOrThrow({
+      where: { id: ownership.id },
+      include: {
+        appliedInstance: {
+          select: { id: true, name: true }
+        }
+      }
+    })
+
+    return mapBadgeOwnership(updatedOwnership, badgeMap)
+  })
+}
+
+export async function applyBadgeToInstance(userId: number, ownershipId: number, instanceId: number) {
+  return runBadgeTransaction(async (tx) => {
+    const [ownership, instance, badgeMap] = await Promise.all([
+      tx.userBadgeOwnership.findFirst({
+        where: { id: ownershipId, userId },
+        include: {
+          appliedInstance: {
+            select: { id: true, name: true }
+          }
+        }
+      }),
+      tx.instance.findFirst({
+        where: {
+          id: instanceId,
+          userId,
+          status: { not: 'deleted' }
+        },
+        select: {
+          id: true,
+          name: true,
+          iconBadgeId: true
+        }
+      }),
+      getBadgeCatalogMap(tx)
+    ])
+
+    if (!ownership) {
+      throw new Error('BADGE_OWNERSHIP_NOT_FOUND')
+    }
+
+    if (!instance) {
+      throw new Error('INSTANCE_NOT_FOUND')
+    }
+
+    if (ownership.applicationTarget === 'instance' && ownership.appliedInstanceId === instance.id && instance.iconBadgeId === ownership.badgeId) {
+      return mapBadgeOwnership(ownership, badgeMap)
+    }
+
+    if (ownership.applicationTarget === 'avatar') {
+      await tx.user.updateMany({
+        where: {
+          id: userId,
+          avatarBadgeId: ownership.badgeId
+        },
+        data: { avatarBadgeId: null }
+      })
+    }
+
+    if (ownership.applicationTarget === 'instance' && ownership.appliedInstanceId && ownership.appliedInstanceId !== instance.id) {
+      await tx.instance.updateMany({
+        where: {
+          id: ownership.appliedInstanceId,
+          userId,
+          iconBadgeId: ownership.badgeId
+        },
+        data: { iconBadgeId: null }
+      })
+    }
+
+    await tx.userBadgeOwnership.updateMany({
+      where: {
+        userId,
+        applicationTarget: 'instance',
+        appliedInstanceId: instance.id,
+        id: { not: ownership.id }
+      },
+      data: {
+        applicationTarget: null,
+        appliedInstanceId: null,
+        appliedAt: null
+      }
+    })
+
+    const updateInstance = await tx.instance.updateMany({
+      where: {
+        id: instance.id,
+        userId,
+        status: { not: 'deleted' }
+      },
+      data: { iconBadgeId: ownership.badgeId }
+    })
+
+    if (updateInstance.count === 0) {
+      throw new Error('BADGE_STATE_CONFLICT')
+    }
+
+    const applyOwnership = await tx.userBadgeOwnership.updateMany({
+      where: {
+        id: ownership.id
+      },
+      data: {
+        applicationTarget: 'instance',
+        appliedInstanceId: instance.id,
+        appliedAt: new Date()
+      }
+    })
+
+    if (applyOwnership.count === 0) {
+      throw new Error('BADGE_STATE_CONFLICT')
+    }
+
+    const updatedOwnership = await tx.userBadgeOwnership.findUniqueOrThrow({
+      where: { id: ownership.id },
+      include: {
+        appliedInstance: {
+          select: { id: true, name: true }
+        }
+      }
+    })
+
+    return mapBadgeOwnership(updatedOwnership, badgeMap)
+  })
+}
+
+export async function unapplyBadge(userId: number, ownershipId: number) {
+  return runBadgeTransaction(async (tx) => {
+    const [ownership, badgeMap] = await Promise.all([
+      tx.userBadgeOwnership.findFirst({
+        where: { id: ownershipId, userId },
+        include: {
+          appliedInstance: {
+            select: { id: true, name: true }
+          }
+        }
+      }),
+      getBadgeCatalogMap(tx)
+    ])
+
+    if (!ownership) {
+      throw new Error('BADGE_OWNERSHIP_NOT_FOUND')
+    }
+
+    if (!ownership.applicationTarget) {
+      throw new Error('BADGE_NOT_APPLIED')
+    }
+
+    if (ownership.applicationTarget === 'avatar') {
+      const clearAvatar = await tx.user.updateMany({
+        where: {
+          id: userId,
+          avatarBadgeId: ownership.badgeId
+        },
+        data: { avatarBadgeId: null }
+      })
+      if (clearAvatar.count === 0) {
+        throw new Error('BADGE_NOT_APPLIED')
+      }
+    } else if (ownership.appliedInstanceId) {
+      const clearInstance = await tx.instance.updateMany({
+        where: {
+          id: ownership.appliedInstanceId,
+          userId,
+          iconBadgeId: ownership.badgeId
+        },
+        data: { iconBadgeId: null }
+      })
+      if (clearInstance.count === 0) {
+        throw new Error('BADGE_NOT_APPLIED')
+      }
+    }
+
+    const clearOwnership = await tx.userBadgeOwnership.updateMany({
+      where: {
+        id: ownership.id,
+        userId,
+        applicationTarget: ownership.applicationTarget,
+        appliedInstanceId: ownership.appliedInstanceId
+      },
+      data: {
+        applicationTarget: null,
+        appliedInstanceId: null,
+        appliedAt: null
+      }
+    })
+
+    if (clearOwnership.count === 0) {
+      throw new Error('BADGE_NOT_APPLIED')
+    }
+
+    const updatedOwnership = await tx.userBadgeOwnership.findUniqueOrThrow({
+      where: { id: ownership.id },
+      include: {
+        appliedInstance: {
+          select: { id: true, name: true }
+        }
+      }
+    })
+
+    return mapBadgeOwnership(updatedOwnership, badgeMap)
+  })
+}
+
+export async function seedDefaultBadges() {
+  const seedState = await prisma.systemConfig.findUnique({
+    where: { key: 'badge_catalog_seeded' },
+    select: { value: true }
+  })
+  if (seedState?.value === 'true') {
+    return
+  }
+
+  const existingSeriesCount = await prisma.badgeSeries.count()
+  const existingBadgeCount = await prisma.badge.count()
+
+  if (existingSeriesCount > 0 || existingBadgeCount > 0) {
+    await prisma.systemConfig.upsert({
+      where: { key: 'badge_catalog_seeded' },
+      update: { value: 'true' },
+      create: {
+        key: 'badge_catalog_seeded',
+        value: 'true',
+        type: 'boolean',
+        label: '徽章目录已初始化',
+        description: '用于避免启动时重复导入默认徽章目录'
+      }
+    })
+    return
+  }
+
+  const seriesMap = new Map<string, {
+    id: string
+    title: string
+    nameZh: string
+    nameEn: string | null
+    description: string
+    sourceId: string | null
+    sourceLabel: string | null
+    displayOrder: number
+  }>()
+
+  DEFAULT_BADGE_CATALOG.forEach((badge) => {
+    if (!seriesMap.has(badge.seriesId)) {
+      seriesMap.set(badge.seriesId, {
+        id: badge.seriesId,
+        title: badge.seriesTitle,
+        nameZh: badge.seriesNameZh || badge.seriesTitle,
+        nameEn: badge.seriesNameEn ?? null,
+        description: badge.seriesDescription,
+        sourceId: badge.sourceId ?? null,
+        sourceLabel: badge.sourceLabel ?? null,
+        displayOrder: (seriesMap.size + 1) * 100
+      })
+    }
+  })
+
+  await prisma.$transaction(async (tx) => {
+    for (const series of seriesMap.values()) {
+      await tx.badgeSeries.upsert({
+        where: { id: series.id },
+        update: {},
+        create: series
+      })
+    }
+
+    for (let index = 0; index < DEFAULT_BADGE_CATALOG.length; index += 1) {
+      const badge = DEFAULT_BADGE_CATALOG[index]
+      await tx.badge.upsert({
+        where: { id: badge.id },
+        update: {},
+        create: {
+          id: badge.id,
+          name: badge.name,
+          nameEn: badge.nameEn,
+          fullLabel: badge.fullLabel,
+          seriesId: badge.seriesId,
+          sourceId: badge.sourceId ?? null,
+          sourceLabel: badge.sourceLabel ?? null,
+          assetUrl: badge.assetUrl,
+          assetUrlDark: badge.assetUrlDark ?? null,
+          assetUrlLight: badge.assetUrlLight ?? null,
+          displayOrder: (index + 1) * 10
+        }
+      })
+    }
+
+    await tx.systemConfig.upsert({
+      where: { key: 'badge_catalog_seeded' },
+      update: { value: 'true' },
+      create: {
+        key: 'badge_catalog_seeded',
+        value: 'true',
+        type: 'boolean',
+        label: '徽章目录已初始化',
+        description: '用于避免启动时重复导入默认徽章目录'
+      }
+    })
+  })
+
+  if (DEFAULT_BADGE_CATALOG.length > 0) {
+    console.log(`✅ 默认徽章目录已导入: ${seriesMap.size} 个系列，${DEFAULT_BADGE_CATALOG.length} 个徽章`)
+  }
+}
+
+export async function getAdminBadgeCatalog() {
+  const [series, badges, ownershipCounts, avatarUseCounts, instanceUseCounts] = await Promise.all([
+    getBadgeSeriesList(),
+    prisma.badge.findMany({
+      include: { series: true },
+      orderBy: [
+        { series: { displayOrder: 'asc' } },
+        { displayOrder: 'asc' },
+        { id: 'asc' }
+      ]
+    }),
+    prisma.userBadgeOwnership.groupBy({
+      by: ['badgeId'],
+      _count: { _all: true }
+    }),
+    prisma.user.groupBy({
+      by: ['avatarBadgeId'],
+      where: { avatarBadgeId: { not: null } },
+      _count: { _all: true }
+    }),
+    prisma.instance.groupBy({
+      by: ['iconBadgeId'],
+      where: { iconBadgeId: { not: null } },
+      _count: { _all: true }
+    })
+  ])
+
+  const ownershipMap = new Map(ownershipCounts.map(item => [item.badgeId, item._count._all]))
+  const avatarMap = new Map(avatarUseCounts.map(item => [item.avatarBadgeId ?? '', item._count._all]))
+  const instanceMap = new Map(instanceUseCounts.map(item => [item.iconBadgeId ?? '', item._count._all]))
+
+  return {
+    series,
+    badges: badges.map(row => ({
+      ...mapBadgeRow(row),
+      displayOrder: row.displayOrder,
+      isActive: row.isActive,
+      createdAt: row.createdAt.toISOString(),
+      updatedAt: row.updatedAt.toISOString(),
+      ownershipCount: ownershipMap.get(row.id) ?? 0,
+      avatarUseCount: avatarMap.get(row.id) ?? 0,
+      instanceUseCount: instanceMap.get(row.id) ?? 0
+    }))
+  }
+}
+
+export async function createBadgeSeries(data: {
+  id: string
+  title: string
+  nameZh: string
+  nameEn?: string | null
+  description: string
+  sourceId?: string | null
+  sourceLabel?: string | null
+  displayOrder?: number
+  isActive?: boolean
+}) {
+  return prisma.badgeSeries.create({
+    data: {
+      id: data.id,
+      title: data.title,
+      nameZh: data.nameZh,
+      nameEn: data.nameEn ?? null,
+      description: data.description,
+      sourceId: data.sourceId ?? null,
+      sourceLabel: data.sourceLabel ?? null,
+      displayOrder: data.displayOrder ?? 0,
+      isActive: data.isActive ?? true
+    }
+  })
+}
+
+export async function updateBadgeSeries(id: string, data: {
+  title?: string
+  nameZh?: string
+  nameEn?: string | null
+  description?: string
+  sourceId?: string | null
+  sourceLabel?: string | null
+  displayOrder?: number
+  isActive?: boolean
+}) {
+  return prisma.badgeSeries.update({
+    where: { id },
+    data: withoutUndefined(data)
+  })
+}
+
+export async function deleteBadgeSeries(id: string) {
+  const badgeCount = await prisma.badge.count({ where: { seriesId: id } })
+  if (badgeCount > 0) {
+    throw new Error('BADGE_SERIES_HAS_BADGES')
+  }
+
+  return prisma.badgeSeries.delete({ where: { id } })
+}
+
+export async function createBadge(data: {
+  id: string
+  name: string
+  nameEn?: string | null
+  fullLabel: string
+  seriesId: string
+  sourceId?: string | null
+  sourceLabel?: string | null
+  assetUrl: string
+  assetUrlDark?: string | null
+  assetUrlLight?: string | null
+  displayOrder?: number
+  isActive?: boolean
+}) {
+  return prisma.badge.create({
+    data: {
+      id: data.id,
+      name: data.name,
+      nameEn: data.nameEn ?? null,
+      fullLabel: data.fullLabel,
+      seriesId: data.seriesId,
+      sourceId: data.sourceId ?? null,
+      sourceLabel: data.sourceLabel ?? null,
+      assetUrl: data.assetUrl,
+      assetUrlDark: data.assetUrlDark ?? null,
+      assetUrlLight: data.assetUrlLight ?? null,
+      displayOrder: data.displayOrder ?? 0,
+      isActive: data.isActive ?? true
+    }
+  })
+}
+
+export async function updateBadge(id: string, data: {
+  name?: string
+  nameEn?: string | null
+  fullLabel?: string
+  seriesId?: string
+  sourceId?: string | null
+  sourceLabel?: string | null
+  assetUrl?: string
+  assetUrlDark?: string | null
+  assetUrlLight?: string | null
+  displayOrder?: number
+  isActive?: boolean
+}) {
+  return prisma.badge.update({
+    where: { id },
+    data: withoutUndefined(data)
+  })
+}
+
+export async function deleteBadge(id: string) {
+  const [ownershipCount, avatarUseCount, instanceUseCount] = await Promise.all([
+    prisma.userBadgeOwnership.count({ where: { badgeId: id } }),
+    prisma.user.count({ where: { avatarBadgeId: id } }),
+    prisma.instance.count({ where: { iconBadgeId: id } })
+  ])
+
+  if (ownershipCount > 0 || avatarUseCount > 0 || instanceUseCount > 0) {
+    throw new Error('BADGE_IN_USE')
+  }
+
+  return prisma.badge.delete({ where: { id } })
+}
diff --git a/server/src/db/balance.ts b/server/src/db/balance.ts
new file mode 100644
index 0000000..15d9bb8
--- /dev/null
+++ b/server/src/db/balance.ts
@@ -0,0 +1,427 @@
+/**
+ * 用户余额相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import { Prisma, type BalanceLog, type BalanceLogType } from '@prisma/client'
+
+type BalanceQueryClient = typeof prisma | Prisma.TransactionClient
+
+function toNumber(value: unknown): number {
+  if (value === null || value === undefined) return 0
+  const numberValue = Number(value)
+  return Number.isFinite(numberValue) ? numberValue : 0
+}
+
+// ==================== 余额查询 ====================
+
+/**
+ * 获取用户余额
+ */
+export async function getUserBalance(userId: number): Promise<number> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { balance: true }
+  })
+  return user ? Number(user.balance) : 0
+}
+
+// 余额日志带实例信息的类型
+export type BalanceLogWithInstance = BalanceLog & {
+  instance?: { id: number; name: string } | null
+}
+
+/**
+ * 获取用户余额变动日志（分页）
+ * 包含关联的实例名称
+ * @param lotteryGift - 'exclude' 排除抽奖赠送记录（默认）, 'only' 仅显示抽奖赠送记录, undefined 显示全部
+ */
+export async function getBalanceLogs(
+  userId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    type?: BalanceLogType
+    lotteryGift?: 'exclude' | 'only'
+  } = {}
+): Promise<{
+  logs: BalanceLogWithInstance[]
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const { page = 1, pageSize = 20, type, lotteryGift } = options
+  const skip = (page - 1) * pageSize
+
+  // 构建查询条件
+  const where: Prisma.BalanceLogWhereInput = {
+    userId,
+    ...(type ? { type } : {})
+  }
+
+  // 处理抽奖赠送筛选（抽奖赠送特征：type='gift' AND remark 包含 '抽奖中奖'）
+  if (lotteryGift === 'exclude') {
+    // 排除抽奖赠送：NOT (type='gift' AND remark contains '抽奖中奖')
+    where.NOT = {
+      type: 'gift',
+      remark: { contains: '抽奖中奖' }
+    }
+  } else if (lotteryGift === 'only') {
+    // 仅抽奖赠送
+    where.type = 'gift'
+    where.remark = { contains: '抽奖中奖' }
+  }
+
+  const [logs, total] = await Promise.all([
+    prisma.balanceLog.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.balanceLog.count({ where })
+  ])
+
+  // 查询关联的实例信息
+  const instanceIds = logs.filter(l => l.instanceId).map(l => l.instanceId!) as number[]
+  const instances = instanceIds.length > 0
+    ? await prisma.instance.findMany({
+        where: { id: { in: instanceIds } },
+        select: { id: true, name: true }
+      })
+    : []
+  const instanceMap = new Map(instances.map(i => [i.id, i]))
+
+  // 合并实例信息
+  const logsWithInstance: BalanceLogWithInstance[] = logs.map(log => ({
+    ...log,
+    instance: log.instanceId ? instanceMap.get(log.instanceId) || null : null
+  }))
+
+  return { logs: logsWithInstance, total, page, pageSize }
+}
+
+// ==================== 余额变动操作（事务安全） ====================
+
+export interface BalanceChangeInput {
+  userId: number
+  type: BalanceLogType
+  amount: number // 正数=增加，负数=减少
+  orderId?: string
+  instanceId?: number
+  remark?: string
+}
+
+export interface BalanceChangeResult {
+  success: boolean
+  balanceLog?: BalanceLog
+  newBalance?: number
+  error?: string
+}
+
+/**
+ * 变更用户余额（事务安全）
+ * 所有余额变动都应该通过这个函数进行，确保日志记录和数据一致性
+ */
+export async function changeBalance(
+  input: BalanceChangeInput
+): Promise<BalanceChangeResult> {
+  const { userId, type, amount, orderId, instanceId, remark } = input
+
+  try {
+    const result = await prisma.$transaction(async (tx) => {
+      // 1. 获取当前余额（加锁）
+      const user = await tx.user.findUnique({
+        where: { id: userId },
+        select: { balance: true }
+      })
+
+      if (!user) {
+        throw new Error('用户不存在')
+      }
+
+      const balanceBefore = Number(user.balance)
+      const balanceAfter = balanceBefore + amount
+
+      // 2. 检查余额是否足够（如果是扣款）
+      if (amount < 0 && balanceAfter < 0) {
+        throw new Error('余额不足')
+      }
+
+      // 3. 更新用户余额
+      await tx.user.update({
+        where: { id: userId },
+        data: { balance: balanceAfter }
+      })
+
+      // 4. 创建余额变动日志
+      const balanceLog = await tx.balanceLog.create({
+        data: {
+          userId,
+          type,
+          amount,
+          balanceBefore,
+          balanceAfter,
+          orderId,
+          instanceId,
+          remark
+        }
+      })
+
+      return { balanceLog, newBalance: balanceAfter }
+    })
+
+    return {
+      success: true,
+      balanceLog: result.balanceLog,
+      newBalance: result.newBalance
+    }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : '余额变动失败'
+    }
+  }
+}
+
+/**
+ * 充值到账（从充值订单完成）
+ */
+export async function rechargeToBalance(
+  userId: number,
+  amount: number,
+  orderId: string,
+  remark?: string
+): Promise<BalanceChangeResult> {
+  return changeBalance({
+    userId,
+    type: 'recharge',
+    amount,
+    orderId,
+    remark: remark || `充值订单 ${orderId}`
+  })
+}
+
+/**
+ * 消费扣款（开通/续费实例）
+ */
+export async function consumeBalance(
+  userId: number,
+  amount: number,
+  instanceId: number,
+  remark?: string
+): Promise<BalanceChangeResult> {
+  return changeBalance({
+    userId,
+    type: 'consume',
+    amount: -Math.abs(amount), // 确保是负数
+    instanceId,
+    remark
+  })
+}
+
+/**
+ * 退款到余额
+ */
+export async function refundToBalance(
+  userId: number,
+  amount: number,
+  instanceId: number,
+  remark?: string
+): Promise<BalanceChangeResult> {
+  return changeBalance({
+    userId,
+    type: 'refund',
+    amount: Math.abs(amount), // 确保是正数
+    instanceId,
+    remark
+  })
+}
+
+/**
+ * 管理员调整余额
+ */
+export async function adminAdjustBalance(
+  userId: number,
+  amount: number,
+  remark: string
+): Promise<BalanceChangeResult> {
+  return changeBalance({
+    userId,
+    type: 'admin_adjust',
+    amount,
+    remark
+  })
+}
+
+/**
+ * 赠送余额
+ */
+export async function giftBalance(
+  userId: number,
+  amount: number,
+  remark?: string
+): Promise<BalanceChangeResult> {
+  return changeBalance({
+    userId,
+    type: 'gift',
+    amount: Math.abs(amount), // 确保是正数
+    remark
+  })
+}
+
+/**
+ * 获取用户实际消费额。
+ * 历史上部分业务把 consume.amount 写成正数，不能直接 SUM(amount) 再取绝对值。
+ * 这里优先使用余额前后差额，兼容正负号不一致的历史日志。
+ */
+export async function getUsersTotalConsumeMap(
+  userIds: number[],
+  client: BalanceQueryClient = prisma
+): Promise<Map<number, number>> {
+  const validUserIds = Array.from(new Set(
+    userIds.filter(id => Number.isInteger(id) && id > 0)
+  ))
+
+  if (validUserIds.length === 0) {
+    return new Map()
+  }
+
+  const rows = await client.$queryRaw<Array<{ userId: number; totalConsume: unknown }>>(Prisma.sql`
+    SELECT
+      user_id AS "userId",
+      COALESCE(SUM(
+        CASE
+          WHEN balance_before > balance_after THEN balance_before - balance_after
+          ELSE ABS(amount)
+        END
+      ), 0)::numeric AS "totalConsume"
+    FROM balance_logs
+    WHERE user_id IN (${Prisma.join(validUserIds)})
+      AND type = 'consume'
+    GROUP BY user_id
+  `)
+
+  return new Map(rows.map(row => [row.userId, toNumber(row.totalConsume)]))
+}
+
+export async function getUserTotalConsume(
+  userId: number,
+  client: BalanceQueryClient = prisma
+): Promise<number> {
+  const consumeMap = await getUsersTotalConsumeMap([userId], client)
+  return consumeMap.get(userId) || 0
+}
+
+// ==================== 检查操作 ====================
+
+/**
+ * 检查用户余额是否足够
+ */
+export async function hasEnoughBalance(
+  userId: number,
+  amount: number
+): Promise<boolean> {
+  const balance = await getUserBalance(userId)
+  return balance >= amount
+}
+
+/**
+ * 获取用户消费统计
+ */
+export async function getUserConsumeStats(userId: number): Promise<{
+  totalRecharge: number
+  totalConsume: number
+  totalRefund: number
+  totalDestroyedValue: number
+}> {
+  const [logs, destroyedRefund, totalConsume] = await Promise.all([
+    prisma.balanceLog.groupBy({
+      by: ['type'],
+      where: { userId },
+      _sum: { amount: true }
+    }),
+    prisma.balanceLog.aggregate({
+      where: {
+        userId,
+        type: 'refund',
+        amount: { gt: 0 },
+        remark: { contains: '用户销毁实例退款' }
+      },
+      _sum: { amount: true }
+    }),
+    getUserTotalConsume(userId)
+  ])
+
+  const stats = {
+    totalRecharge: 0,
+    totalConsume,
+    totalRefund: 0,
+    totalDestroyedValue: destroyedRefund._sum.amount !== null && destroyedRefund._sum.amount !== undefined
+      ? parseFloat(String(destroyedRefund._sum.amount))
+      : 0
+  }
+
+  for (const log of logs) {
+    // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+    const amount = log._sum.amount !== null
+      ? parseFloat(String(log._sum.amount))
+      : 0
+    switch (log.type) {
+      case 'recharge':
+        stats.totalRecharge = amount
+        break
+      case 'refund':
+        stats.totalRefund = amount
+        break
+    }
+  }
+
+  return stats
+}
+
+/**
+ * 获取实例的历史消费总额（用于退款上限计算）
+ */
+export async function getInstanceTotalConsume(instanceId: number): Promise<number> {
+  const result = await prisma.balanceLog.aggregate({
+    where: {
+      instanceId,
+      type: 'consume'
+    },
+    _sum: { amount: true }
+  })
+  // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+  return result._sum.amount !== null
+    ? Math.abs(parseFloat(String(result._sum.amount)))
+    : 0
+}
+
+/**
+ * 获取实例的历史退款总额
+ */
+export async function getInstanceTotalRefund(instanceId: number): Promise<number> {
+  const result = await prisma.balanceLog.aggregate({
+    where: {
+      instanceId,
+      type: 'refund'
+    },
+    _sum: { amount: true }
+  })
+  // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+  return result._sum.amount !== null
+    ? parseFloat(String(result._sum.amount))
+    : 0
+}
+
+/**
+ * 计算实例可退款金额（历史消费 - 已退款）
+ */
+export async function getInstanceRefundableAmount(instanceId: number): Promise<number> {
+  const [totalConsume, totalRefund] = await Promise.all([
+    getInstanceTotalConsume(instanceId),
+    getInstanceTotalRefund(instanceId)
+  ])
+  return Math.max(0, totalConsume - totalRefund)
+}
diff --git a/server/src/db/billing-operations.ts b/server/src/db/billing-operations.ts
new file mode 100644
index 0000000..a80c33d
--- /dev/null
+++ b/server/src/db/billing-operations.ts
@@ -0,0 +1,1481 @@
+/**
+ * 计费业务逻辑操作
+ * 处理付费实例开通、续费、升降级等核心计费业务
+ */
+
+import { prisma } from './prisma.js'
+import type { Instance, PackagePlan, Prisma } from '@prisma/client'
+import { getInstanceAffBinding, processAffCommission } from './aff.js'
+import { getInstanceBillingLineageIds } from './billing-records.js'
+import {
+  calculateDiscountAmount,
+  calculateDiscountedPrice,
+  calculateRemainingDays,
+  calculateRemainingDaysPrecise,
+  calculatePriceDiff,
+  calculateRemainingValue,
+  calculatePlanChangeDetails,
+  addMonths as calcAddMonths
+} from '../lib/billing-calc.js'
+import { shouldSyncInstanceSwapSizeWithPlan } from '../lib/instance-swap.js'
+import { resolveInstanceTrafficLimitForHost } from '../lib/traffic-multiplier.js'
+import { calculateInstanceTrafficStatus } from '../services/traffic-utils.js'
+import { HOSTING_BALANCE_LOG_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from './advisory-locks.js'
+
+// ==================== 类型定义 ====================
+
+export interface CreateBillingResult {
+  plan: PackagePlan
+  price: number
+  billingCycle: number
+  setupFee: number
+  totalPrice: number
+  expiresAt: Date
+}
+
+export interface RenewBillingResult {
+  monthlyPrice: number
+  months: number
+  amount: number
+  newExpiresAt: Date
+}
+
+export interface InstanceRefundResult {
+  remainingDays: number
+  remainingValue: number
+  refundableValue: number
+  refundAmount: number
+  maxRefundable: number
+  discountRate: number
+  isPaid: boolean
+}
+
+export interface InstanceRemainingRefundQuote {
+  remainingDays: number
+  remainingValue: number
+  refundableValue: number
+  maxRefundable: number
+  isPaid: boolean
+}
+
+export interface HostingBalanceDeductionResult {
+  hostOwnerId: number
+  deductedAmount: number
+  fromFrozen: number
+  fromAvailable: number
+  fromBalance: number
+}
+
+export interface ChangePlanPreviewResult {
+  oldPlan: PackagePlan
+  newPlan: PackagePlan
+  remainingDays: number
+  // 计算详情（供前端展示）
+  oldDailyPrice: number        // 原方案日价（元）
+  newDailyPrice: number        // 新方案日价（元）
+  remainingValue: number       // 剩余价值（元）
+  newPlanCost: number          // 新方案费用（元）
+  // 折扣信息
+  discountRate: number         // 折扣率（0-1）
+  discountAmount: number       // 折扣金额（元）
+  // 最终费用
+  priceDiff: number            // 差价（元，正数=补交，负数=退款）
+  isUpgrade: boolean           // 是否升级（按日价判断）
+  newExpiresAt: Date           // 新到期时间（保持不变）
+  newConfig: { cpu: number; memory: number; disk: number }
+  // 冷却期信息
+  canChange: boolean           // 是否可以变更
+  cannotChangeReason?: string  // 不能变更的原因
+}
+
+export interface PlanChangeOptions {
+  preciseRemainingDays?: boolean
+  minRemainingDays?: number | null
+}
+
+export interface InstancePriceAdjustmentQuote {
+  oldPrice: number
+  newPrice: number
+  billingCycle: number
+  remainingDays: number
+  discountRate: number
+  priceDiff: number
+}
+
+// ==================== 费用计算函数 ====================
+
+/**
+ * 计算开通费用
+ * 注意：数据库中 price 存储的是分（cents），需要除以100转成元
+ * 开通费已废弃，固定为0
+ */
+export function calculateCreateBilling(plan: PackagePlan): CreateBillingResult {
+  const price = Number(plan.price) / 100  // 分转元
+  const totalPrice = price  // 不再计算开通费
+
+  // 计算到期时间（根据计费周期）
+  const expiresAt = addMonths(new Date(), plan.billingCycle)
+
+  return {
+    plan,
+    price,
+    billingCycle: plan.billingCycle,
+    setupFee: 0,  // 开通费已废弃
+    totalPrice,
+    expiresAt
+  }
+}
+
+/**
+ * 计算月价（将方案价格折算为月价）
+ */
+export function calculateMonthlyPrice(instance: { billingPrice: any; billingCycle: number | null }): number {
+  const price = Number(instance.billingPrice) || 0
+  const cycle = Math.max(instance.billingCycle || 1, 1) // 防止除零
+  return price / cycle
+}
+
+/**
+ * 查询实例的最大可退款金额（基于历史账单）
+ * maxRefundable = 历史总消费 - 历史已退
+ * lastPaymentAmount = 最近一次付款金额（用于按时间比例退款）
+ *
+ * @param instanceId 实例 ID
+ * @returns { maxRefundable, lastPaymentAmount }
+ */
+export async function getMaxRefundable(instanceId: number): Promise<{ maxRefundable: number; lastPaymentAmount: number }> {
+  const billingLineageInstanceIds = await getInstanceBillingLineageIds(instanceId)
+  const instanceIds = billingLineageInstanceIds.length > 0 ? billingLineageInstanceIds : [instanceId]
+
+  const [totalConsumed, refundRecords, lastPayment] = await Promise.all([
+    prisma.instanceBillingRecord.aggregate({
+      where: {
+        instanceId: { in: instanceIds },
+        type: { in: ['newPurchase', 'renew', 'upgrade'] },
+        amount: { gt: 0 }
+      },
+      _sum: { amount: true }
+    }),
+    prisma.instanceBillingRecord.findMany({
+      where: {
+        instanceId: { in: instanceIds },
+        type: 'refund'
+      },
+      select: { amount: true }
+    }),
+    prisma.instanceBillingRecord.findFirst({
+      where: {
+        instanceId: { in: instanceIds },
+        // 仅查询 newPurchase/renew（upgrade 记录的 amount 是差价，不是完整周期金额）
+        type: { in: ['newPurchase', 'renew'] },
+        amount: { gt: 0 }
+      },
+      orderBy: { createdAt: 'desc' },
+      select: { amount: true }
+    })
+  ])
+
+  const consumedAmount = totalConsumed._sum?.amount !== null && totalConsumed._sum?.amount !== undefined
+    ? parseFloat(String(totalConsumed._sum.amount))
+    : 0
+  const refundedAmount = refundRecords.reduce((sum, record) => sum + Math.abs(Number(record.amount)), 0)
+  const lastPaymentAmount = lastPayment?.amount !== null && lastPayment?.amount !== undefined
+    ? parseFloat(String(lastPayment.amount))
+    : 0
+
+  return {
+    maxRefundable: roundCurrency(Math.max(0, consumedAmount - refundedAmount)),
+    lastPaymentAmount
+  }
+}
+
+function roundCurrency(value: number): number {
+  return Number(value.toFixed(2))
+}
+
+/**
+ * 按账单记录计算实例的剩余价值退款报价
+ *
+ * 正向计费记录（newPurchase / renew / upgrade）各自对应独立的服务期区间，
+ * 退款时应按这些区间的未消耗比例逐条计算，而不是仅依赖实例当前 billingPrice。
+ * 这样升级补差价、后续续费、管理员延期等场景都能正确纳入剩余价值。
+ */
+export async function calculateInstanceRemainingRefundQuote(instance: {
+  id: number
+  billingPrice: any
+  billingCycle: number | null
+  expiresAt: Date | null
+  packagePlanId: number | null
+}): Promise<InstanceRemainingRefundQuote> {
+  const isPaid = !!(instance.packagePlanId && instance.expiresAt && instance.billingPrice)
+
+  if (!isPaid) {
+    return {
+      remainingDays: 0,
+      remainingValue: 0,
+      refundableValue: 0,
+      maxRefundable: 0,
+      isPaid: false
+    }
+  }
+
+  const now = new Date()
+  const expiresAt = new Date(instance.expiresAt!)
+
+  if (expiresAt <= now) {
+    return {
+      remainingDays: 0,
+      remainingValue: 0,
+      refundableValue: 0,
+      maxRefundable: 0,
+      isPaid: true
+    }
+  }
+
+  const remainingDays = calculateRemainingDays(expiresAt, now)
+  const billingLineageInstanceIds = await getInstanceBillingLineageIds(instance.id)
+  const instanceIds = billingLineageInstanceIds.length > 0 ? billingLineageInstanceIds : [instance.id]
+  const [maxRefundableInfo, positiveBillingRecords] = await Promise.all([
+    getMaxRefundable(instance.id),
+    prisma.instanceBillingRecord.findMany({
+      where: {
+        instanceId: { in: instanceIds },
+        type: { in: ['newPurchase', 'renew', 'upgrade'] },
+        amount: { gt: 0 }
+      },
+      select: {
+        amount: true,
+        periodStart: true,
+        periodEnd: true
+      },
+      orderBy: { periodStart: 'asc' }
+    })
+  ])
+  const { maxRefundable } = maxRefundableInfo
+
+  let remainingValue = 0
+
+  for (const record of positiveBillingRecords) {
+    const periodStart = new Date(record.periodStart)
+    const periodEnd = new Date(record.periodEnd)
+    const totalMs = periodEnd.getTime() - periodStart.getTime()
+
+    if (totalMs <= 0 || periodEnd <= now) {
+      continue
+    }
+
+    const remainingMs = Math.max(0, periodEnd.getTime() - now.getTime())
+    const unusedRatio = Math.min(remainingMs / totalMs, 1)
+    remainingValue += Number(record.amount) * unusedRatio
+  }
+
+  remainingValue = roundCurrency(remainingValue)
+
+  // 兼容历史/异常数据：如果缺少正向计费记录，则回退到旧逻辑，
+  // 避免老实例直接变成 0 退款。
+  if (positiveBillingRecords.length === 0 && instance.billingPrice && instance.billingCycle) {
+    let discountRate = 0
+    const affBinding = await getInstanceAffBinding(instance.id)
+    if (affBinding?.affCode?.enabled) {
+      discountRate = Number(affBinding.affCode.discountRate) || 0
+    }
+
+    remainingValue = calculateRemainingValue(
+      Number(instance.billingPrice),
+      instance.billingCycle,
+      remainingDays,
+      discountRate
+    )
+  }
+
+  const refundableValue = roundCurrency(Math.min(remainingValue, maxRefundable))
+
+  return {
+    remainingDays,
+    remainingValue,
+    refundableValue,
+    maxRefundable,
+    isPaid: true
+  }
+}
+
+/**
+ * 计算实例退款金额（用于节点所有者删除实例时）
+ * 节点所有者删除时不收取手续费
+ * 
+ * @param instance 实例信息（需包含计费相关字段）
+ * @returns 退款计算结果
+ */
+export async function calculateInstanceRefund(instance: {
+  id: number
+  billingPrice: any
+  billingCycle: number | null
+  expiresAt: Date | null
+  packagePlanId: number | null
+}): Promise<InstanceRefundResult> {
+  const quote = await calculateInstanceRemainingRefundQuote(instance)
+
+  return {
+    remainingDays: quote.remainingDays,
+    remainingValue: quote.remainingValue,
+    refundableValue: quote.refundableValue,
+    refundAmount: quote.refundableValue, // 节点所有者删除不收手续费
+    maxRefundable: quote.maxRefundable,
+    discountRate: 0,
+    isPaid: quote.isPaid
+  }
+}
+
+/**
+ * 续费费用计算（支持任意月数）
+ */
+export function calculateRenewBilling(
+  instance: { billingPrice: any; billingCycle: number | null; expiresAt: Date | null },
+  months: number = 1
+): RenewBillingResult {
+  // 验证续费月数范围
+  if (months < 1 || months > 24) {
+    throw new Error('续费月数必须在 1-24 之间')
+  }
+
+  const monthlyPrice = calculateMonthlyPrice(instance)
+  const amount = Number((monthlyPrice * months).toFixed(2)) // 保留两位小数
+
+  // 从当前到期时间续期（如已过期则从现在开始）
+  const now = new Date()
+  const baseDate = instance.expiresAt && instance.expiresAt > now
+    ? instance.expiresAt
+    : now
+
+  const newExpiresAt = addMonths(baseDate, months)
+
+  return { monthlyPrice, months, amount, newExpiresAt }
+}
+
+// 周期天数常量和 getCycleDays 函数已移至公共模块 billing-calc.ts
+// 从 ../lib/billing-calc.js 导入使用
+
+/**
+ * 计算升降级差价（带优惠码折扣和冷却期检查）
+ * 使用公共模块 billing-calc.ts 的计算方法确保一致性
+ * 
+ * 计算公式：
+ * 1. 原方案日价 = 原方案周期价格 / 原方案周期天数
+ * 2. 新方案日价 = 新方案周期价格 / 新方案周期天数
+ * 3. 剩余价值 = 原方案日价 × 剩余天数 × (1 - 折扣率)
+ * 4. 新方案费用 = 新方案日价 × 剩余天数 × (1 - 折扣率)
+ * 5. 差价 = 新方案费用 - 剩余价值
+ */
+export async function calculatePlanChange(
+  instance: Instance,
+  newPlan: PackagePlan,
+  options: PlanChangeOptions = {}
+): Promise<ChangePlanPreviewResult> {
+  const oldPlanId = instance.packagePlanId
+  if (!oldPlanId) {
+    throw new Error('免费实例不支持升降级')
+  }
+
+  const oldPlan = await prisma.packagePlan.findUnique({
+    where: { id: oldPlanId }
+  })
+
+  if (!oldPlan) {
+    throw new Error('原方案不存在')
+  }
+
+  const expiresAt = instance.expiresAt!
+  const preciseRemainingDays = options.preciseRemainingDays ?? true
+  const minRemainingDays = options.minRemainingDays === undefined ? 15 : options.minRemainingDays
+
+  // ========== 检查剩余天数 ==========
+  let canChange = true
+  let cannotChangeReason: string | undefined
+
+  // 使用统一方法计算剩余时间；金额口径默认使用精确剩余天数
+  const remainingDays = preciseRemainingDays
+    ? calculateRemainingDaysPrecise(expiresAt)
+    : calculateRemainingDays(expiresAt)
+
+  if (minRemainingDays !== null && remainingDays < minRemainingDays) {
+    canChange = false
+    cannotChangeReason = 'remaining_days_insufficient' // 剩余天数不足
+  }
+
+  // ========== 获取 AFF 折扣率 ==========
+  let discountRate = 0
+  const affBinding = await getInstanceAffBinding(instance.id)
+  if (affBinding) {
+    discountRate = Number(affBinding.affCode.discountRate) || 0
+  }
+
+  // ========== 使用公共方法计算差价 ==========
+  const oldCyclePrice = Number(instance.billingPrice) || 0 // 已是元
+  const newCyclePrice = Number(newPlan.price) / 100 // 分转元
+
+  // 使用公共方法计算详情
+  const calcResult = calculatePlanChangeDetails(
+    oldCyclePrice,
+    instance.billingCycle || 1,
+    newCyclePrice,
+    newPlan.billingCycle,
+    remainingDays,
+    discountRate
+  )
+
+  return {
+    oldPlan,
+    newPlan,
+    remainingDays,
+    oldDailyPrice: calcResult.oldDailyPrice,
+    newDailyPrice: calcResult.newDailyPrice,
+    remainingValue: calcResult.remainingValue,
+    newPlanCost: calcResult.newPlanCost,
+    discountRate,
+    discountAmount: calcResult.discountAmount,
+    priceDiff: calcResult.priceDiff,
+    isUpgrade: calcResult.isUpgrade,
+    newExpiresAt: expiresAt, // 到期时间保持不变
+    newConfig: {
+      cpu: newPlan.cpu,
+      memory: newPlan.memory,
+      disk: newPlan.disk
+    },
+    canChange,
+    cannotChangeReason
+  }
+}
+
+/**
+ * 计算管理员调整实例续费价格时的差价结算报价
+ * 统一使用精确剩余天数，避免与升级报价口径分叉。
+ */
+export async function calculateInstancePriceAdjustmentQuote(
+  instance: {
+    id: number
+    billingPrice: any
+    billingCycle: number | null
+    expiresAt: Date | null
+  },
+  newPrice: number,
+  settleBalance: boolean,
+  tx?: Prisma.TransactionClient
+): Promise<InstancePriceAdjustmentQuote> {
+  const oldPrice = Number(instance.billingPrice) || 0
+  const roundedNewPrice = roundCurrency(newPrice)
+  const billingCycle = instance.billingCycle || 1
+
+  let discountRate = 0
+  const affBinding = await getInstanceAffBinding(instance.id, tx)
+  if (affBinding?.affCode?.enabled) {
+    discountRate = Number(affBinding.affCode.discountRate) || 0
+  }
+
+  let remainingDays = 0
+  let priceDiff = 0
+
+  if (settleBalance && instance.expiresAt) {
+    remainingDays = calculateRemainingDaysPrecise(new Date(instance.expiresAt))
+    if (remainingDays > 0) {
+      priceDiff = calculatePriceDiff(
+        oldPrice,
+        billingCycle,
+        roundedNewPrice,
+        billingCycle,
+        remainingDays,
+        discountRate
+      )
+    }
+  }
+
+  return {
+    oldPrice,
+    newPrice: roundedNewPrice,
+    billingCycle,
+    remainingDays,
+    discountRate,
+    priceDiff
+  }
+}
+
+/**
+ * 续费价格预览（前端调用）
+ */
+export function previewRenewPrices(
+  instance: { billingPrice: any; billingCycle: number | null; expiresAt: Date | null }
+): Array<{ months: number; amount: number; expiresAt: Date }> {
+  const options = [1, 3, 6, 12] // 常用续费选项
+  return options.map(months => {
+    const result = calculateRenewBilling(instance, months)
+    return {
+      months,
+      amount: result.amount,
+      expiresAt: result.newExpiresAt
+    }
+  })
+}
+
+// ==================== 业务操作函数 ====================
+
+/**
+ * 执行续费操作（带乐观锁并发控制）
+ * 支持 AFF 优惠码折扣和返利
+ */
+export async function performRenewal(
+  userId: number,
+  instance: Instance,
+  months: number
+): Promise<{ newExpiresAt: Date; amount: number; balanceLogId: number; discountAmount?: number; hostingIncomeResult?: { hostOwnerId: number; hostName: string } | null }> {
+  // 验证付费实例
+  if (!instance.packagePlanId) {
+    throw new Error('免费实例无需续费')
+  }
+
+  // 验证续费月数
+  if (months < 1 || months > 24) {
+    throw new Error('续费月数必须在 1-24 之间')
+  }
+
+  // 手动封停的实例不允许续费
+  if (instance.status === 'suspended' && instance.suspendReason !== 'expired') {
+    throw new Error('实例已被手动封停，请联系宿主机所有者解封后再续费')
+  }
+
+  const { amount: originalAmount, newExpiresAt } = calculateRenewBilling(instance, months)
+
+  // 检查 AFF 绑定，计算折扣
+  const affBinding = await getInstanceAffBinding(instance.id)
+  let discountRate = 0
+  let discountAmount = 0
+  let finalAmount = originalAmount
+
+  if (affBinding) {
+    discountRate = Number(affBinding.affCode.discountRate)
+    discountAmount = calculateDiscountAmount(originalAmount, discountRate)
+    finalAmount = calculateDiscountedPrice(originalAmount, discountRate)
+  }
+
+  // 执行事务（带乐观锁）
+  const result = await prisma.$transaction(async (tx) => {
+    // 获取用户当前余额
+    const user = await tx.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    })
+
+    if (!user) {
+      throw new Error('用户不存在')
+    }
+
+    const oldBalance = Number(user.balance)
+    if (oldBalance < finalAmount) {
+      throw new Error('余额不足')
+    }
+
+    const newBalance = Number((oldBalance - finalAmount).toFixed(2))
+
+    // 扣除余额（使用条件更新确保并发安全）
+    const updateResult = await tx.user.updateMany({
+      where: {
+        id: userId,
+        balance: { gte: finalAmount }
+      },
+      data: { balance: { decrement: finalAmount } }
+    })
+
+    if (updateResult.count === 0) {
+      throw new Error('余额不足或并发冲突')
+    }
+
+    // 乐观锁：检查实例版本号并更新
+    const instanceUpdateResult = await tx.instance.updateMany({
+      where: {
+        id: instance.id,
+        version: instance.version  // 确保版本号未变
+      },
+      data: {
+        expiresAt: newExpiresAt,
+        autoRenewAttempts: 0,
+        version: { increment: 1 },  // 增加版本号
+        // 如果因到期被封停，续费后解除封停（恢复为 stopped）
+        ...(instance.status === 'suspended' && instance.suspendReason === 'expired' ? {
+          status: 'stopped',
+          suspendedAt: null,
+          suspendedBy: null,
+          suspendReason: null
+        } : {})
+      }
+    })
+
+    if (instanceUpdateResult.count === 0) {
+      throw new Error('实例状态已变更，请重试')
+    }
+
+    // 记录余额日志
+    const remarkText = discountAmount > 0
+      ? `续费（${months}个月）：${instance.name}，优惠码折扣 -¥${discountAmount.toFixed(2)}`
+      : `续费（${months}个月）：${instance.name}`
+
+    const balanceLog = await tx.balanceLog.create({
+      data: {
+        userId,
+        type: 'consume',
+        amount: -finalAmount,
+        balanceBefore: oldBalance,
+        balanceAfter: newBalance,
+        instanceId: instance.id,
+        remark: remarkText
+      }
+    })
+
+    // 记录扣费记录
+    await tx.instanceBillingRecord.create({
+      data: {
+        instanceId: instance.id,
+        userId,
+        type: 'renew',
+        amount: finalAmount,
+        months,
+        periodStart: instance.expiresAt || new Date(),
+        periodEnd: newExpiresAt,
+        balanceLogId: balanceLog.id,
+        remark: discountAmount > 0
+          ? `续费 ${months} 个月，优惠码折扣 -¥${discountAmount.toFixed(2)}`
+          : `续费 ${months} 个月`
+      }
+    })
+
+    // 如果有 AFF 绑定，给优惠码创建者返利
+    if (affBinding) {
+      await processAffCommission(
+        affBinding.affCode.id,
+        instance.id,
+        originalAmount, // 基于原价计算返利
+        'renew',
+        tx as any
+      )
+    }
+
+    let hostingIncomeResult: { hostOwnerId: number; hostName: string } | null = null
+
+    const hostingOwner = await resolveHostedIncomeOwner(tx, instance.hostId)
+    if (hostingOwner) {
+      // 用户托管节点，记录托管收入（带快照）
+      const unfreezeAt = addMonths(new Date(), 1)
+      await createHostingLogWithSnapshot(tx, {
+        userId: hostingOwner.userId,
+        type: 'income',
+        actionType: 'renew',
+        amount: finalAmount,
+        instanceId: instance.id,
+        frozen: true,
+        unfreezeAt,
+        remark: `用户续费实例收入（冻结30天）`
+      })
+      console.log(`[HostingIncome] 记录续费托管收入: hostOwnerId=${hostingOwner.userId}, amount=${finalAmount}, instanceId=${instance.id}`)
+      hostingIncomeResult = { hostOwnerId: hostingOwner.userId, hostName: hostingOwner.hostName }
+    }
+
+    return { balanceLogId: balanceLog.id, hostingIncomeResult }
+  })
+
+  return {
+    newExpiresAt,
+    amount: finalAmount,
+    balanceLogId: result.balanceLogId,
+    discountAmount: discountAmount > 0 ? discountAmount : undefined,
+    hostingIncomeResult: result.hostingIncomeResult
+  }
+}
+
+/**
+ * 执行升降级操作（带乐观锁并发控制）
+ * 
+ * 升级：从余额扣除差价
+ * 降级：差价退款到余额
+ */
+export async function performPlanChange(
+  userId: number,
+  instance: Instance,
+  newPlan: PackagePlan
+): Promise<{
+  priceDiff: number
+  newConfig: { cpu: number; memory: number; disk: number }
+  needRestart: boolean  // 标记是否需要重启
+  refundAmount?: number // 降级时的退款金额
+  hostingIncomeResult?: { hostOwnerId: number; hostName: string } | null // 托管收入结果
+}> {
+  const pkg = await prisma.package.findUnique({
+    where: { id: newPlan.packageId },
+    select: { instanceType: true }
+  })
+  const isVmPackage = pkg?.instanceType === 'vm'
+
+  // 验证
+  if (!instance.packagePlanId) {
+    throw new Error('免费实例不支持升降级')
+  }
+
+  // 升降级状态限制：仅 running 和 stopped 可以升降级
+  if (!['running', 'stopped'].includes(instance.status)) {
+    throw new Error('当前实例状态不允许升降级，仅运行中或已停止的实例可以升降级')
+  }
+
+  if (newPlan.packageId !== instance.packageId) {
+    throw new Error('新方案必须属于同一套餐')
+  }
+  if (!newPlan.isActive) {
+    throw new Error('新方案已下架')
+  }
+  if (newPlan.isSoldOut) {
+    throw new Error('新方案已售罄')
+  }
+  if (instance.packagePlanId === newPlan.id) {
+    throw new Error('不能切换到相同方案')
+  }
+
+  // 计算升级差价
+  const changeResult = await calculatePlanChange(instance, newPlan)
+
+  // 检查是否可以变更
+  if (!changeResult.canChange) {
+    if (changeResult.cannotChangeReason === 'remaining_days_insufficient') {
+      throw new Error('剩余时间不足 15 天，无法变更方案')
+    }
+    throw new Error('当前不能变更方案')
+  }
+
+  let refundAmount: number | undefined
+
+  // 执行事务（带乐观锁）
+  const txResult = await prisma.$transaction(async (tx) => {
+    // 获取用户当前余额
+    const user = await tx.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    })
+
+    if (!user) {
+      throw new Error('用户不存在')
+    }
+
+    const oldBalance = Number(user.balance)
+    let hostingIncomeResult: { hostOwnerId: number; hostName: string } | null = null
+
+    // 升级需要补差价
+    if (changeResult.priceDiff > 0) {
+      if (oldBalance < changeResult.priceDiff) {
+        throw new Error(`余额不足，需补差价 ${changeResult.priceDiff} 元`)
+      }
+
+      const balanceUpdateResult = await tx.user.updateMany({
+        where: { id: userId, balance: { gte: changeResult.priceDiff } },
+        data: { balance: { decrement: changeResult.priceDiff } }
+      })
+
+      if (balanceUpdateResult.count === 0) {
+        throw new Error('余额不足或并发冲突')
+      }
+
+      // 升级扣费记录
+      await tx.balanceLog.create({
+        data: {
+          userId,
+          type: 'consume',
+          amount: -changeResult.priceDiff,
+          balanceBefore: oldBalance,
+          balanceAfter: oldBalance - changeResult.priceDiff,
+          instanceId: instance.id,
+          remark: `升级方案：${changeResult.oldPlan.name} → ${newPlan.name}`
+        }
+      })
+
+      const hostingOwner = await resolveHostedIncomeOwner(tx, instance.hostId)
+      if (hostingOwner) {
+        // 用户托管节点，记录托管收入（升级差价，带快照）
+        const unfreezeAt = addMonths(new Date(), 1)
+        await createHostingLogWithSnapshot(tx, {
+          userId: hostingOwner.userId,
+          type: 'income',
+          actionType: 'upgrade',
+          amount: changeResult.priceDiff,
+          instanceId: instance.id,
+          frozen: true,
+          unfreezeAt,
+          remark: `用户升级实例方案收入（冻结30天）`
+        })
+        console.log(`[HostingIncome] 记录升级托管收入: hostOwnerId=${hostingOwner.userId}, amount=${changeResult.priceDiff}, instanceId=${instance.id}`)
+        hostingIncomeResult = { hostOwnerId: hostingOwner.userId, hostName: hostingOwner.hostName }
+      }
+    }
+
+    // 降级退款到余额
+    if (changeResult.priceDiff < 0) {
+      refundAmount = Math.abs(changeResult.priceDiff)
+      const newBalance = oldBalance + refundAmount
+
+      await tx.user.update({
+        where: { id: userId },
+        data: { balance: { increment: refundAmount } }
+      })
+
+      // 降级退款记录
+      await tx.balanceLog.create({
+        data: {
+          userId,
+          type: 'refund',
+          amount: refundAmount,
+          balanceBefore: oldBalance,
+          balanceAfter: newBalance,
+          instanceId: instance.id,
+          remark: `降级方案退款：${changeResult.oldPlan.name} → ${newPlan.name}`
+        }
+      })
+    }
+
+    const monthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(tx as any, {
+      packageId: instance.packageId,
+      hostId: instance.hostId,
+      baseTrafficLimit: newPlan.trafficLimit
+    })
+
+    // 乐观锁：更新实例配置，同时检查版本号
+    const instanceUpdateResult = await tx.instance.updateMany({
+      where: {
+        id: instance.id,
+        version: instance.version  // 确保版本号未变
+      },
+      data: {
+        packagePlanId: newPlan.id,
+        cpu: newPlan.cpu,
+        memory: newPlan.memory,
+        disk: newPlan.disk,
+        // 更新计费信息（注意：newPlan.price 是分，需要除以100转元）
+        billingPrice: Number(newPlan.price) / 100,
+        billingCycle: newPlan.billingCycle,
+        // 配额限制
+        portLimit: newPlan.portLimit,
+        snapshotLimit: newPlan.snapshotLimit,
+        backupLimit: newPlan.backupLimit,
+        siteLimit: newPlan.siteLimit,
+        swapEnabled: isVmPackage ? false : instance.swapEnabled,
+        swapSize: isVmPackage
+          ? null
+          : (shouldSyncInstanceSwapSizeWithPlan(instance.swapSize, changeResult.oldPlan.swapSize)
+              ? newPlan.swapSize
+              : instance.swapSize),
+        monthlyTrafficLimit,
+        trafficStatus: calculateInstanceTrafficStatus(instance.monthlyTrafficUsed, monthlyTrafficLimit),
+        // 更新冷却期时间
+        lastPlanChangeAt: new Date(),
+        // 版本号递增
+        version: { increment: 1 }
+        // 注意：到期时间保持不变
+      }
+    })
+
+    if (instanceUpdateResult.count === 0) {
+      throw new Error('实例状态已变更，请重试')
+    }
+
+    // 记录计费记录
+    await tx.instanceBillingRecord.create({
+      data: {
+        instanceId: instance.id,
+        userId,
+        type: changeResult.isUpgrade ? 'upgrade' : 'downgrade',
+        amount: changeResult.priceDiff > 0 ? changeResult.priceDiff : 0,
+        months: 0, // 升降级不改变时长
+        periodStart: new Date(),
+        periodEnd: instance.expiresAt!,
+        remark: `${changeResult.oldPlan.name} → ${newPlan.name}${refundAmount ? `，退款 ¥${refundAmount.toFixed(2)}` : ''}`
+      }
+    })
+
+    return { hostingIncomeResult }
+  })
+
+  return {
+    priceDiff: changeResult.priceDiff,
+    newConfig: changeResult.newConfig,
+    needRestart: true,  // 升降级后需要重启实例才能生效
+    refundAmount,
+    hostingIncomeResult: txResult.hostingIncomeResult
+  }
+}
+
+/**
+ * 更新自动续费设置
+ */
+export async function updateAutoRenew(
+  instanceId: number,
+  autoRenew: boolean
+): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: { autoRenew }
+  })
+}
+
+/**
+ * 获取实例计费信息
+ */
+export async function getInstanceBillingInfo(instanceId: number): Promise<{
+  isPaid: boolean
+  expiresAt: Date | null
+  billingPrice: number | null
+  billingCycle: number | null
+  monthlyPrice: number | null
+  autoRenew: boolean
+  status: string
+  suspendReason: string | null
+  packagePlan: {
+    id: number
+    name: string
+    isActive: boolean
+  } | null
+  renewPreview: Array<{ months: number; amount: number; discountedAmount: number; expiresAt: Date }> | null
+  affDiscount: {
+    discountRate: number  // 折扣率，如 0.05 表示 5%
+    affCodeId: number
+  } | null
+  // 托管实例相关信息
+  isHostedInstance: boolean
+  daysUntilExpire: number | null
+  hostingRenewRestriction: { monthsOnly: number; daysBeforeExpire: number } | null
+} | null> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    include: {
+      packagePlan: {
+        select: { id: true, name: true, isActive: true }
+      },
+      host: {
+        select: {
+          userId: true,
+          user: {
+            select: {
+              role: true
+            }
+          }
+        }
+      }
+    }
+  })
+
+  if (!instance) return null
+
+  const isPaid = instance.packagePlanId !== null
+
+  // 判断是否为托管实例（节点所有者不是管理员）
+  const isHostedInstance = instance.host?.user.role === 'user'
+
+  // 计算剩余天数
+  let daysUntilExpire: number | null = null
+  if (instance.expiresAt) {
+    const now = new Date()
+    daysUntilExpire = Math.ceil((instance.expiresAt.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+  }
+
+  // 托管续费限制
+  const hostingRenewRestriction = isHostedInstance ? { monthsOnly: 1, daysBeforeExpire: 7 } : null
+
+  let monthlyPrice: number | null = null
+  let renewPreview: Array<{ months: number; amount: number; discountedAmount: number; expiresAt: Date }> | null = null
+  let affDiscount: { discountRate: number; affCodeId: number } | null = null
+
+  if (isPaid && instance.billingPrice) {
+    monthlyPrice = calculateMonthlyPrice({
+      billingPrice: instance.billingPrice,
+      billingCycle: instance.billingCycle
+    })
+
+    // 获取 AFF 绑定信息，计算折扣
+    const affBinding = await getInstanceAffBinding(instanceId)
+    let discountRate = 0
+    if (affBinding) {
+      discountRate = Number(affBinding.affCode.discountRate)
+      affDiscount = {
+        discountRate,
+        affCodeId: affBinding.affCode.id
+      }
+    }
+
+    // 计算续费预览（包含折扣价）
+    const originalPreview = previewRenewPrices({
+      billingPrice: instance.billingPrice,
+      billingCycle: instance.billingCycle,
+      expiresAt: instance.expiresAt
+    })
+
+    // 托管实例只返回1个月的续费选项
+    const filteredPreview = isHostedInstance
+      ? originalPreview.filter(p => p.months === 1)
+      : originalPreview
+
+    renewPreview = filteredPreview.map(p => ({
+      months: p.months,
+      amount: p.amount,  // 原价（元）
+      discountedAmount: discountRate > 0
+        ? Number((p.amount * (1 - discountRate)).toFixed(2))  // 折扣价（元，保留两位小数）
+        : p.amount,
+      expiresAt: p.expiresAt
+    }))
+  }
+
+  return {
+    isPaid,
+    expiresAt: instance.expiresAt,
+    billingPrice: instance.billingPrice ? Number(instance.billingPrice) : null,
+    billingCycle: instance.billingCycle,
+    monthlyPrice,
+    autoRenew: instance.autoRenew,
+    status: instance.status,
+    suspendReason: instance.suspendReason,
+    packagePlan: instance.packagePlan,
+    renewPreview,
+    affDiscount,
+    isHostedInstance,
+    daysUntilExpire,
+    hostingRenewRestriction
+  }
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 添加月份到日期
+ * 使用公共方法 calcAddMonths
+ */
+function addMonths(date: Date, months: number): Date {
+  return calcAddMonths(date, months)
+}
+
+/**
+ * 检查实例是否为免费实例
+ */
+export function isFreeInstance(instance: { packagePlanId: number | null }): boolean {
+  return instance.packagePlanId === null
+}
+
+/**
+ * 检查实例是否为付费实例
+ */
+export function isPaidInstance(instance: { packagePlanId: number | null }): boolean {
+  return instance.packagePlanId !== null
+}
+
+/**
+ * 检查实例是否已过期
+ */
+export function isExpired(instance: { expiresAt: Date | null }): boolean {
+  if (instance.expiresAt === null) return false
+  return new Date() > instance.expiresAt
+}
+
+// ==================== 托管余额结算 ====================
+
+/**
+ * 内部辅助函数：统一创建带快照的托管日志
+ * 用于所有实例相关托管日志的写入，确保快照字段一致性
+ */
+async function createHostingLogWithSnapshot(
+  client: any,
+  params: {
+    userId: number
+    type: 'income' | 'deduction'
+    actionType: string
+    amount: number
+    instanceId: number
+    frozen: boolean
+    unfreezeAt?: Date | null
+    remark: string
+  }
+) {
+  // 查询实例及关联信息用于快照
+  const instance = await client.instance.findUnique({
+    where: { id: params.instanceId },
+    select: {
+      name: true,
+      user: { select: { username: true, email: true, avatarStyle: true } },
+      host: { select: { name: true } },
+      package: { select: { name: true } },
+      packagePlan: { select: { name: true } }
+    }
+  })
+
+  await client.hostingBalanceLog.create({
+    data: {
+      userId: params.userId,
+      type: params.type,
+      actionType: params.actionType,
+      amount: params.amount,
+      frozen: params.frozen,
+      unfreezeAt: params.unfreezeAt ?? null,
+      relatedId: params.instanceId,
+      remark: params.remark,
+      snapshotBuyerName: instance?.user.username ?? null,
+      snapshotBuyerEmail: instance?.user.email ?? null,
+      snapshotBuyerAvatar: instance?.user.avatarStyle ?? null,
+      snapshotInstanceName: instance?.name ?? null,
+      snapshotHostName: instance?.host.name ?? null,
+      snapshotPackageName: instance?.package?.name ?? null,
+      snapshotPlanName: instance?.packagePlan?.name ?? null
+    }
+  })
+}
+
+async function resolveHostedIncomeOwner(
+  client: any,
+  hostId: number,
+  options: {
+    instanceId?: number | null
+    allowHistoricalFallback?: boolean
+  } = {}
+): Promise<{ userId: number; hostName: string } | null> {
+  const { instanceId = null, allowHistoricalFallback = false } = options
+
+  const host = await client.host.findUnique({
+    where: { id: hostId },
+    select: {
+      userId: true,
+      name: true,
+      user: {
+        select: {
+          role: true
+        }
+      }
+    }
+  })
+
+  if (!host) {
+    return null
+  }
+
+  if (host.user.role !== 'admin') {
+    return {
+      userId: host.userId,
+      hostName: host.name
+    }
+  }
+
+  if (!allowHistoricalFallback || !instanceId) {
+    return null
+  }
+
+  const latestIncomeLog = await client.hostingBalanceLog.findFirst({
+    where: {
+      relatedId: instanceId,
+      type: 'income'
+    },
+    orderBy: {
+      createdAt: 'desc'
+    },
+    select: {
+      userId: true
+    }
+  })
+
+  if (!latestIncomeLog) {
+    return null
+  }
+
+  const historicalOwner = await client.user.findUnique({
+    where: { id: latestIncomeLog.userId },
+    select: {
+      role: true
+    }
+  })
+
+  if (!historicalOwner || historicalOwner.role === 'admin') {
+    return null
+  }
+
+  return {
+    userId: latestIncomeLog.userId,
+    hostName: host.name
+  }
+}
+
+/**
+ * 判断节点是否为用户托管节点（非管理员节点）
+ */
+export async function isUserHostedNode(hostId: number): Promise<boolean> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: {
+      user: {
+        select: {
+          role: true
+        }
+      }
+    }
+  })
+  return host?.user.role === 'user'
+}
+
+/**
+ * 获取节点所有者ID
+ */
+export async function getHostOwnerId(hostId: number): Promise<number | null> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: { userId: true }
+  })
+  return host?.userId ?? null
+}
+
+/**
+ * 记录托管收入（用户购买/续费用户托管节点上的实例时调用）
+ * 
+ * @param hostOwnerId 节点所有者用户ID
+ * @param amount 金额（元）
+ * @param instanceId 关联的实例ID
+ * @param remark 备注
+ * @param actionType 操作类型（purchase/renew/upgrade/destroy等）
+ * @param tx 可选的事务客户端
+ */
+export async function recordHostingIncome(
+  hostOwnerId: number,
+  amount: number,
+  instanceId: number,
+  remark: string,
+  actionType: 'purchase' | 'renew' | 'upgrade' | 'destroy' | 'unfreeze' | 'withdraw',
+  tx?: any
+): Promise<void> {
+  const client = tx || prisma
+
+  // 计算解冻时间（30天后）
+  const unfreezeAt = addMonths(new Date(), 1) // 使用 1 个月作为 30 天的近似
+
+  await createHostingLogWithSnapshot(client, {
+    userId: hostOwnerId,
+    type: 'income',
+    actionType,
+    amount,
+    instanceId,
+    frozen: true,
+    unfreezeAt,
+    remark
+  })
+}
+
+/**
+ * 处理托管收入结算
+ * 在用户购买或续费实例时调用，检查节点是否为用户托管，如是则记录收入
+ * 
+ * @param hostId 节点ID
+ * @param amount 金额（元）
+ * @param instanceId 实例ID
+ * @param type 类型：'purchase' | 'renew'
+ * @param tx 可选的事务客户端
+ * @returns 如果是用户托管节点，返回节点所有者信息；否则返回 null
+ */
+export async function processHostingIncome(
+  hostId: number,
+  amount: number,
+  instanceId: number,
+  type: 'purchase' | 'renew',
+  tx?: any
+): Promise<{ hostOwnerId: number; hostName: string } | null> {
+  const client = tx || prisma
+
+  // 获取节点所有者和节点名称
+  const host = await client.host.findUnique({
+    where: { id: hostId },
+    select: {
+      userId: true,
+      name: true,
+      user: {
+        select: {
+          role: true
+        }
+      }
+    }
+  })
+
+  if (!host || host.user.role === 'admin') {
+    // 管理员所有的节点不需要记录托管收入
+    return null
+  }
+
+  // 用户托管节点，记录托管收入
+  const remark = type === 'purchase'
+    ? `用户购买实例收入（冻结30天）`
+    : `用户续费实例收入（冻结30天）`
+
+  await recordHostingIncome(host.userId, amount, instanceId, remark, type, client)
+
+  console.log(`[HostingIncome] 记录托管收入: hostOwnerId=${host.userId}, amount=${amount}, instanceId=${instanceId}, type=${type}`)
+
+  return { hostOwnerId: host.userId, hostName: host.name }
+}
+
+/**
+ * 获取实例剩余天数
+ * 使用公共方法 calculateRemainingDays
+ */
+export function getRemainingDays(instance: { expiresAt: Date | null }): number | null {
+  if (instance.expiresAt === null) return null
+  return calculateRemainingDays(instance.expiresAt)
+}
+
+/**
+ * 托管实例销毁时扣除节点所有者的托管余额
+ * 
+ * 优先从该实例相关的冻结收入中扣除，不足部分从可用余额扣除
+ * 
+ * @param hostId 节点ID
+ * @param amount 扣除金额（元）
+ * @param instanceId 实例ID
+ * @param remark 备注
+ * @param tx 可选的事务客户端
+ * @returns 如果是用户托管节点，返回扣除结果；否则返回 null
+ */
+export async function deductHostingBalance(
+  hostId: number,
+  amount: number,
+  instanceId: number,
+  remark: string,
+  tx?: any
+): Promise<HostingBalanceDeductionResult | null> {
+  const run = async (client: Prisma.TransactionClient): Promise<HostingBalanceDeductionResult | null> => {
+    const hostingOwner = await resolveHostedIncomeOwner(client, hostId, {
+      instanceId,
+      allowHistoricalFallback: true
+    })
+    if (!hostingOwner) {
+      return null
+    }
+    const hostOwnerId = hostingOwner.userId
+
+    const locked = await tryAdvisoryTransactionLock(client, HOSTING_BALANCE_LOG_LOCK_NAMESPACE, hostOwnerId)
+    if (!locked) {
+      throw new Error('托管余额正在处理，请稍后重试')
+    }
+
+    // 查找该实例相关的冻结托管收入记录
+    const frozenLogs = await client.hostingBalanceLog.findMany({
+      where: {
+        userId: hostOwnerId,
+        relatedId: instanceId,
+        type: 'income',
+        frozen: true
+      },
+      orderBy: { createdAt: 'asc' }
+    })
+
+    let remainingToDeduct = amount
+    let fromFrozen = 0
+    let fromAvailable = 0
+    let fromBalance = 0
+
+    // 第一步：优先从冻结收入中扣除
+    // 冻结记录尚未计入 hostingBalance，通过删除/减少原记录来确保这部分钱不会被计入，
+    // 即账务上正确地抵消了这笔收入。同时在下方统一新建一条独立的审计扣除记录。
+    for (const log of frozenLogs) {
+      if (remainingToDeduct <= 0) break
+
+      const logAmount = Number(log.amount)
+      const deductFromThis = Math.min(logAmount, remainingToDeduct)
+
+      if (deductFromThis >= logAmount) {
+        // 全额抵扣：删除整条冻结收入记录（此笔收入永远不会进入 hostingBalance）
+        await client.hostingBalanceLog.delete({
+          where: { id: log.id }
+        })
+      } else {
+        // 部分抵扣：减少冻结记录金额，剩余部分继续冻结等待解冻
+        await client.hostingBalanceLog.update({
+          where: { id: log.id },
+          data: { amount: { decrement: deductFromThis } }
+        })
+      }
+
+      fromFrozen += deductFromThis
+      remainingToDeduct -= deductFromThis
+    }
+
+    // 第二步：如果冻结收入不足，从已解冻的托管余额扣除
+    if (remainingToDeduct > 0) {
+      const user = await client.user.findUnique({
+        where: { id: hostOwnerId },
+        select: { hostingBalance: true, balance: true }
+      })
+
+      const availableHostingBalance = Number(user?.hostingBalance || 0)
+      const deductFromAvailable = Math.min(availableHostingBalance, remainingToDeduct)
+
+      if (deductFromAvailable > 0) {
+        await client.user.update({
+          where: { id: hostOwnerId },
+          data: { hostingBalance: { decrement: deductFromAvailable } }
+        })
+
+        fromAvailable = deductFromAvailable
+        remainingToDeduct -= deductFromAvailable
+      }
+
+      // 第三步：如果托管余额仍不足，从面板余额扣除
+      if (remainingToDeduct > 0) {
+        const availableBalance = Number(user?.balance || 0)
+        const deductFromBalance = Math.min(availableBalance, remainingToDeduct)
+
+        if (deductFromBalance > 0) {
+          await client.user.update({
+            where: { id: hostOwnerId },
+            data: { balance: { decrement: deductFromBalance } }
+          })
+
+          // 记录面板余额变动日志
+          await client.balanceLog.create({
+            data: {
+              userId: hostOwnerId,
+              type: 'hosting_deduction',
+              amount: -deductFromBalance,
+              balanceBefore: availableBalance,
+              balanceAfter: availableBalance - deductFromBalance,
+              instanceId,
+              remark: `托管实例销毁扣款：用户退款需从面板余额补扣`
+            }
+          })
+
+          fromBalance = deductFromBalance
+          remainingToDeduct -= deductFromBalance
+        }
+      }
+    }
+
+    const totalDeducted = fromFrozen + fromAvailable + fromBalance
+
+    // 始终创建一条独立的销毁扣除审计记录（无论扣款来自冻结、托管余额还是面板余额）
+    // 原来的条件 (fromFrozen>0 || fromAvailable>0) 遗漏了纯从面板余额扣款的情况，
+    // 且金额也未包含 fromBalance，现统一修正。
+    if (totalDeducted > 0) {
+      const parts: string[] = []
+      if (fromFrozen > 0) parts.push(`冻结抵扣 ¥${fromFrozen.toFixed(2)}`)
+      if (fromAvailable > 0) parts.push(`托管余额扣除 ¥${fromAvailable.toFixed(2)}`)
+      if (fromBalance > 0) parts.push(`面板余额补扣 ¥${fromBalance.toFixed(2)}`)
+
+      await createHostingLogWithSnapshot(client, {
+        userId: hostOwnerId,
+        type: 'deduction',
+        actionType: 'destroy',
+        amount: -totalDeducted,
+        instanceId,
+        frozen: false,
+        remark: `${remark}（${parts.join('，')}）`
+      })
+    }
+
+    console.log(`[HostingBalance] 扣除托管余额: hostOwnerId=${hostOwnerId}, amount=${amount}, deducted=${totalDeducted}, fromFrozen=${fromFrozen}, fromAvailable=${fromAvailable}, fromBalance=${fromBalance}, instanceId=${instanceId}`)
+
+    return { hostOwnerId, deductedAmount: totalDeducted, fromFrozen, fromAvailable, fromBalance }
+  }
+
+  if (tx) {
+    return run(tx)
+  }
+
+  return prisma.$transaction(async (transaction) => run(transaction))
+}
diff --git a/server/src/db/billing-records.ts b/server/src/db/billing-records.ts
new file mode 100644
index 0000000..836ca75
--- /dev/null
+++ b/server/src/db/billing-records.ts
@@ -0,0 +1,502 @@
+/**
+ * 实例计费记录相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { InstanceBillingRecord, BillingRecordType, Prisma } from '@prisma/client'
+
+type BillingRecordDbClient = Prisma.TransactionClient | typeof prisma
+
+interface BillingLineageSeed {
+  id: number
+  userId: number
+  hostId: number
+  name: string
+  expiresAt: Date | null
+  createdAt: Date
+  updatedAt: Date
+}
+
+interface MigrationMessageData {
+  instanceId?: unknown
+  oldHostId?: unknown
+  newHostId?: unknown
+  instanceName?: unknown
+}
+
+function isInteger(value: unknown): value is number {
+  return typeof value === 'number' && Number.isInteger(value)
+}
+
+function isNonEmptyString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0
+}
+
+function sameDate(a: Date | null, b: Date | null): boolean {
+  if (a === null && b === null) return true
+  if (a === null || b === null) return false
+  return a.getTime() === b.getTime()
+}
+
+async function getBillingLineageSeed(
+  instanceId: number,
+  client: BillingRecordDbClient
+): Promise<BillingLineageSeed | null> {
+  return client.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      id: true,
+      userId: true,
+      hostId: true,
+      name: true,
+      expiresAt: true,
+      createdAt: true,
+      updatedAt: true
+    }
+  })
+}
+
+async function resolveImmediateMigratedBillingSource(
+  seed: BillingLineageSeed,
+  client: BillingRecordDbClient
+): Promise<number | null> {
+  const migrationMessages = await client.inboxMessage.findMany({
+    where: {
+      userId: seed.userId,
+      eventType: 'instance_migrated'
+    },
+    select: {
+      id: true,
+      data: true,
+      createdAt: true
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+
+  for (const message of migrationMessages) {
+    const data = (message.data || {}) as MigrationMessageData
+
+    if (!isInteger(data.instanceId) || data.instanceId !== seed.id) continue
+    if (!isInteger(data.oldHostId)) continue
+    if (isInteger(data.newHostId) && data.newHostId !== seed.hostId) continue
+
+    const expectedName = isNonEmptyString(data.instanceName) ? data.instanceName : seed.name
+    const windowStart = new Date(message.createdAt.getTime() - 30 * 60 * 1000)
+    const windowEnd = new Date(message.createdAt.getTime() + 30 * 60 * 1000)
+
+    const deletedCandidates = await client.instance.findMany({
+      where: {
+        userId: seed.userId,
+        hostId: data.oldHostId,
+        name: expectedName,
+        status: 'deleted',
+        id: { not: seed.id },
+        updatedAt: {
+          gte: windowStart,
+          lte: windowEnd
+        }
+      },
+      select: {
+        id: true,
+        expiresAt: true
+      }
+    })
+
+    if (deletedCandidates.length === 0) continue
+
+    const candidatesWithRecordCounts = await Promise.all(
+      deletedCandidates.map(async candidate => ({
+        candidate,
+        recordCount: await client.instanceBillingRecord.count({
+          where: { instanceId: candidate.id }
+        })
+      }))
+    )
+
+    if (candidatesWithRecordCounts.length === 1) {
+      return candidatesWithRecordCounts[0].candidate.id
+    }
+
+    const preferredCandidates = candidatesWithRecordCounts.filter(item =>
+      sameDate(item.candidate.expiresAt, seed.expiresAt)
+    )
+    if (preferredCandidates.length === 1) {
+      return preferredCandidates[0].candidate.id
+    }
+
+    const candidatesWithRecords = candidatesWithRecordCounts.filter(item => item.recordCount > 0)
+    if (candidatesWithRecords.length === 1) {
+      return candidatesWithRecords[0].candidate.id
+    }
+
+    const finalCandidates = preferredCandidates.length > 0 ? preferredCandidates : candidatesWithRecordCounts
+
+    if (finalCandidates.length === 1) {
+      return finalCandidates[0].candidate.id
+    }
+  }
+
+  return null
+}
+
+/**
+ * 获取实例的计费血缘链（从最早祖先到当前实例）
+ * 兼容旧数据中“改节点/迁移”后新建实例但未迁移账单记录的情况
+ */
+export async function getInstanceBillingLineageIds(
+  instanceId: number,
+  client: BillingRecordDbClient = prisma
+): Promise<number[]> {
+  const lineage: number[] = []
+  const visited = new Set<number>()
+
+  let current = await getBillingLineageSeed(instanceId, client)
+
+  while (current && !visited.has(current.id)) {
+    lineage.unshift(current.id)
+    visited.add(current.id)
+
+    const predecessorId = await resolveImmediateMigratedBillingSource(current, client)
+    if (!predecessorId || visited.has(predecessorId)) {
+      break
+    }
+
+    current = await getBillingLineageSeed(predecessorId, client)
+  }
+
+  return lineage.length > 0 ? lineage : [instanceId]
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 获取实例的计费记录
+ */
+export async function getInstanceBillingRecords(
+  instanceId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    type?: BillingRecordType
+  } = {}
+): Promise<{
+  records: InstanceBillingRecord[]
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const { page = 1, pageSize = 20, type } = options
+  const skip = (page - 1) * pageSize
+  const billingLineageInstanceIds = await getInstanceBillingLineageIds(instanceId)
+
+  const where: Prisma.InstanceBillingRecordWhereInput = {
+    instanceId: { in: billingLineageInstanceIds },
+    ...(type ? { type } : {})
+  }
+
+  const [records, total] = await Promise.all([
+    prisma.instanceBillingRecord.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.instanceBillingRecord.count({ where })
+  ])
+
+  return { records, total, page, pageSize }
+}
+
+/**
+ * 获取用户的所有计费记录
+ */
+export async function getUserBillingRecords(
+  userId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    type?: BillingRecordType
+  } = {}
+): Promise<{
+  records: InstanceBillingRecord[]
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const { page = 1, pageSize = 20, type } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.InstanceBillingRecordWhereInput = {
+    userId,
+    ...(type ? { type } : {})
+  }
+
+  const [records, total] = await Promise.all([
+    prisma.instanceBillingRecord.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize,
+      include: {
+        instance: {
+          select: { id: true, name: true }
+        }
+      }
+    }),
+    prisma.instanceBillingRecord.count({ where })
+  ])
+
+  return { records, total, page, pageSize }
+}
+
+// ==================== 创建操作 ====================
+
+export interface CreateBillingRecordInput {
+  instanceId: number
+  userId: number
+  type: BillingRecordType
+  amount: number
+  months: number
+  periodStart: Date
+  periodEnd: Date
+  balanceLogId?: number
+  remark?: string
+}
+
+/**
+ * 创建计费记录
+ */
+export async function createBillingRecord(
+  input: CreateBillingRecordInput
+): Promise<InstanceBillingRecord> {
+  return prisma.instanceBillingRecord.create({
+    data: {
+      instanceId: input.instanceId,
+      userId: input.userId,
+      type: input.type,
+      amount: input.amount,
+      months: input.months,
+      periodStart: input.periodStart,
+      periodEnd: input.periodEnd,
+      balanceLogId: input.balanceLogId,
+      remark: input.remark
+    }
+  })
+}
+
+/**
+ * 创建新开通记录
+ */
+export async function createNewPurchaseRecord(
+  instanceId: number,
+  userId: number,
+  amount: number,
+  months: number,
+  periodStart: Date,
+  periodEnd: Date,
+  balanceLogId?: number
+): Promise<InstanceBillingRecord> {
+  return createBillingRecord({
+    instanceId,
+    userId,
+    type: 'newPurchase',
+    amount,
+    months,
+    periodStart,
+    periodEnd,
+    balanceLogId,
+    remark: `新开通 ${months} 个月`
+  })
+}
+
+/**
+ * 创建续费记录
+ */
+export async function createRenewRecord(
+  instanceId: number,
+  userId: number,
+  amount: number,
+  months: number,
+  periodStart: Date,
+  periodEnd: Date,
+  balanceLogId?: number
+): Promise<InstanceBillingRecord> {
+  return createBillingRecord({
+    instanceId,
+    userId,
+    type: 'renew',
+    amount,
+    months,
+    periodStart,
+    periodEnd,
+    balanceLogId,
+    remark: `续费 ${months} 个月`
+  })
+}
+
+/**
+ * 创建升级记录
+ */
+export async function createUpgradeRecord(
+  instanceId: number,
+  userId: number,
+  amount: number,
+  periodStart: Date,
+  periodEnd: Date,
+  balanceLogId?: number,
+  remark?: string
+): Promise<InstanceBillingRecord> {
+  return createBillingRecord({
+    instanceId,
+    userId,
+    type: 'upgrade',
+    amount,
+    months: 0, // 升级不涉及月数变化
+    periodStart,
+    periodEnd,
+    balanceLogId,
+    remark: remark || '升级方案'
+  })
+}
+
+/**
+ * 创建降级记录
+ */
+export async function createDowngradeRecord(
+  instanceId: number,
+  userId: number,
+  periodStart: Date,
+  periodEnd: Date,
+  remark?: string
+): Promise<InstanceBillingRecord> {
+  return createBillingRecord({
+    instanceId,
+    userId,
+    type: 'downgrade',
+    amount: 0, // 降级不扣费
+    months: 0,
+    periodStart,
+    periodEnd,
+    remark: remark || '降级方案'
+  })
+}
+
+/**
+ * 将实例计费记录整体迁移到新的实例 ID
+ * 用于“改节点/迁移实例”后保持退款与计费历史连续
+ */
+export async function reassignInstanceBillingRecords(
+  sourceInstanceId: number,
+  targetInstanceId: number,
+  client: BillingRecordDbClient = prisma
+): Promise<number> {
+  if (sourceInstanceId === targetInstanceId) return 0
+
+  const result = await client.instanceBillingRecord.updateMany({
+    where: { instanceId: sourceInstanceId },
+    data: { instanceId: targetInstanceId }
+  })
+
+  return result.count
+}
+
+/**
+ * 创建退款记录
+ */
+export async function createRefundRecord(
+  instanceId: number,
+  userId: number,
+  amount: number,
+  balanceLogId?: number,
+  remark?: string
+): Promise<InstanceBillingRecord> {
+  const now = new Date()
+  return createBillingRecord({
+    instanceId,
+    userId,
+    type: 'refund',
+    amount: -Math.abs(amount),
+    months: 0,
+    periodStart: now,
+    periodEnd: now,
+    balanceLogId,
+    remark: remark || '管理员退款'
+  })
+}
+
+// ==================== 统计操作 ====================
+
+/**
+ * 获取实例的总消费金额
+ */
+export async function getInstanceTotalSpent(instanceId: number): Promise<number> {
+  const result = await prisma.instanceBillingRecord.aggregate({
+    where: {
+      instanceId,
+      type: { in: ['newPurchase', 'renew', 'upgrade'] }
+    },
+    _sum: { amount: true }
+  })
+  // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+  return result._sum.amount !== null
+    ? parseFloat(String(result._sum.amount))
+    : 0
+}
+
+/**
+ * 获取实例的总退款金额
+ */
+export async function getInstanceTotalRefunded(instanceId: number): Promise<number> {
+  const records = await prisma.instanceBillingRecord.findMany({
+    where: {
+      instanceId,
+      type: 'refund'
+    },
+    select: { amount: true }
+  })
+  return records.reduce((sum, record) => sum + Math.abs(Number(record.amount)), 0)
+}
+
+/**
+ * 获取用户的消费统计
+ */
+export async function getUserBillingStats(userId: number): Promise<{
+  totalSpent: number
+  totalRefunded: number
+  purchaseCount: number
+  renewCount: number
+}> {
+  const [spending, refunds, purchaseCount, renewCount] = await Promise.all([
+    prisma.instanceBillingRecord.aggregate({
+      where: {
+        userId,
+        type: { in: ['newPurchase', 'renew', 'upgrade'] }
+      },
+      _sum: { amount: true }
+    }),
+    prisma.instanceBillingRecord.findMany({
+      where: {
+        userId,
+        type: 'refund'
+      },
+      select: { amount: true }
+    }),
+    prisma.instanceBillingRecord.count({
+      where: { userId, type: 'newPurchase' }
+    }),
+    prisma.instanceBillingRecord.count({
+      where: { userId, type: 'renew' }
+    })
+  ])
+
+  return {
+    // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+    totalSpent: spending._sum.amount !== null
+      ? parseFloat(String(spending._sum.amount))
+      : 0,
+    totalRefunded: refunds.reduce((sum, record) => sum + Math.abs(Number(record.amount)), 0),
+    purchaseCount,
+    renewCount
+  }
+}
diff --git a/server/src/db/checkin.ts b/server/src/db/checkin.ts
new file mode 100644
index 0000000..b06c69b
--- /dev/null
+++ b/server/src/db/checkin.ts
@@ -0,0 +1,524 @@
+/**
+ * 签到系统数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { RedeemCodeType } from '@prisma/client'
+
+// 各类型可选数值
+const CODE_VALUES: Record<RedeemCodeType, number[]> = {
+  c: [1, 2, 3, 5],             // CPU: 1-5%
+  r: [2, 4, 6, 12],            // 内存: 2/4/6/12 MB
+  d: [16, 32, 64, 128],        // 硬盘: 16/32/64/128 MB
+  t: [1, 2, 3, 5],             // 流量: 1/2/3/5 GB
+  p: [100, 300, 500, 1000]     // 积分: 100/300/500/1000
+}
+
+// 资源类型列表（积分通过固定奖励发放，不走随机）
+const CODE_TYPES: RedeemCodeType[] = ['c', 'r', 'd', 't']
+
+/**
+ * 随机选择资源类型和数值
+ */
+function randomizeReward(): { type: RedeemCodeType; value: number } {
+  const type = CODE_TYPES[Math.floor(Math.random() * CODE_TYPES.length)]
+  const values = CODE_VALUES[type]
+  const value = values[Math.floor(Math.random() * values.length)]
+  return { type, value }
+}
+
+/**
+ * 检查用户是否拥有实例
+ */
+export async function userHasInstances(userId: number): Promise<boolean> {
+  const count = await prisma.instance.count({
+    where: {
+      userId,
+      status: { notIn: ['deleted', 'error'] }
+    }
+  })
+  return count > 0
+}
+
+/**
+ * 获取北京时间当天 0 点的 UTC 时间戳
+ */
+function getBeijingMidnight(): Date {
+  const now = new Date()
+  // 获取北京时间的日期字符串 (YYYY-MM-DD)
+  const beijingDateStr = now.toLocaleDateString('sv-SE', { timeZone: 'Asia/Shanghai' })
+  // 构建北京时间 0 点对应的 UTC 时间 (北京 00:00 = UTC 前一天 16:00)
+  return new Date(`${beijingDateStr}T00:00:00+08:00`)
+}
+
+/**
+ * 获取日期在北京时间的当天 0 点 UTC 时间戳
+ */
+function toBeijingMidnight(date: Date): Date {
+  const beijingDateStr = date.toLocaleDateString('sv-SE', { timeZone: 'Asia/Shanghai' })
+  return new Date(`${beijingDateStr}T00:00:00+08:00`)
+}
+
+/**
+ * 检查用户今日是否已签到（使用北京时间 0 点刷新）
+ */
+export async function hasCheckedInToday(userId: number): Promise<boolean> {
+  const stats = await prisma.checkinStats.findUnique({
+    where: { userId }
+  })
+  
+  if (!stats?.lastCheckinDate) return false
+  
+  const todayMidnight = getBeijingMidnight()
+  const lastCheckinMidnight = toBeijingMidnight(stats.lastCheckinDate)
+  
+  return lastCheckinMidnight.getTime() >= todayMidnight.getTime()
+}
+
+/**
+ * 检查用户今日是否已兑换（使用北京时间 0 点刷新）
+ */
+export async function hasRedeemedToday(userId: number): Promise<boolean> {
+  const stats = await prisma.checkinStats.findUnique({
+    where: { userId }
+  })
+  
+  if (!stats?.lastRedeemDate) return false
+  
+  const todayMidnight = getBeijingMidnight()
+  const lastRedeemMidnight = toBeijingMidnight(stats.lastRedeemDate)
+  
+  return lastRedeemMidnight.getTime() >= todayMidnight.getTime()
+}
+
+/**
+ * 获取用户签到统计
+ */
+export async function getCheckinStats(userId: number) {
+  return prisma.checkinStats.findUnique({
+    where: { userId }
+  })
+}
+
+/**
+ * 创建或更新用户签到统计
+ */
+export async function upsertCheckinStats(userId: number, data: {
+  lastCheckinDate?: Date
+  lastRedeemDate?: Date
+  consecutiveOthersUse?: number
+  selfOnlyMode?: boolean
+}) {
+  return prisma.checkinStats.upsert({
+    where: { userId },
+    update: data,
+    create: {
+      userId,
+      ...data
+    }
+  })
+}
+
+/**
+ * 执行签到，资源直接存入资源池
+ */
+export async function performCheckin(userId: number): Promise<{
+  codeType: RedeemCodeType
+  codeValue: number
+}> {
+  const { type, value } = randomizeReward()
+  const now = new Date()
+
+  // 资源类型到字段的映射
+  const fieldMap: Record<string, 'cpu' | 'memory' | 'disk' | 'traffic'> = {
+    c: 'cpu', r: 'memory', d: 'disk', t: 'traffic'
+  }
+  const field = fieldMap[type]
+
+  await prisma.$transaction([
+    // 更新资源池
+    prisma.userResourcePool.upsert({
+      where: { userId },
+      update: {
+        [field]: field === 'traffic'
+          ? { increment: BigInt(value) }
+          : { increment: value }
+      },
+      create: {
+        userId,
+        [field]: field === 'traffic' ? BigInt(value) : value
+      }
+    }),
+    // 记录资源池日志
+    prisma.resourcePoolLog.create({
+      data: {
+        userId,
+        action: 'checkin',
+        resourceType: type,
+        amount: value,
+        remark: '签到获得'
+      }
+    }),
+    // 更新签到统计
+    prisma.checkinStats.upsert({
+      where: { userId },
+      update: { lastCheckinDate: now },
+      create: {
+        userId,
+        lastCheckinDate: now
+      }
+    })
+  ])
+
+  return { codeType: type, codeValue: value }
+}
+
+/**
+ * 根据兑换码获取签到记录
+ */
+export async function getCheckinRecordByCode(redeemCode: string) {
+  return prisma.checkinRecord.findUnique({
+    where: { redeemCode },
+    include: {
+      user: {
+        select: {
+          id: true,
+          username: true
+        }
+      }
+    }
+  })
+}
+
+/**
+ * 使用兑换码
+ * @param usedFor 实例ID，null 表示存入资源池
+ */
+export async function useRedeemCode(
+  recordId: number,
+  usedBy: number,
+  usedFor: number | null
+): Promise<void> {
+  const now = new Date()
+  
+  await prisma.$transaction([
+    // 标记兑换码已使用
+    prisma.checkinRecord.update({
+      where: { id: recordId },
+      data: {
+        usedAt: now,
+        usedBy,
+        usedFor: usedFor // null 表示存入资源池
+      }
+    }),
+    // 更新兑换者的最后兑换日期
+    prisma.checkinStats.upsert({
+      where: { userId: usedBy },
+      update: { lastRedeemDate: now },
+      create: {
+        userId: usedBy,
+        lastRedeemDate: now
+      }
+    })
+  ])
+}
+
+/**
+ * 更新兑换码所有者的分享状态
+ */
+export async function updateOwnerShareStatus(
+  ownerId: number,
+  usedBySelf: boolean
+): Promise<void> {
+  const stats = await prisma.checkinStats.findUnique({
+    where: { userId: ownerId }
+  })
+
+  if (usedBySelf) {
+    // 自己使用了兑换码，重置连续计数和限制模式
+    await prisma.checkinStats.upsert({
+      where: { userId: ownerId },
+      update: {
+        consecutiveOthersUse: 0,
+        selfOnlyMode: false
+      },
+      create: {
+        userId: ownerId,
+        consecutiveOthersUse: 0,
+        selfOnlyMode: false
+      }
+    })
+  } else {
+    // 他人使用了兑换码
+    const currentCount = stats?.consecutiveOthersUse ?? 0
+    const newCount = currentCount + 1
+    const selfOnlyMode = newCount >= 2
+
+    await prisma.checkinStats.upsert({
+      where: { userId: ownerId },
+      update: {
+        consecutiveOthersUse: newCount,
+        selfOnlyMode
+      },
+      create: {
+        userId: ownerId,
+        consecutiveOthersUse: newCount,
+        selfOnlyMode
+      }
+    })
+  }
+}
+
+/**
+ * 获取用户签到记录列表
+ */
+export async function getCheckinRecords(
+  userId: number,
+  limit: number = 20,
+  offset: number = 0
+) {
+  const [records, total] = await Promise.all([
+    prisma.checkinRecord.findMany({
+      where: { userId },
+      orderBy: { createdAt: 'desc' },
+      take: limit,
+      skip: offset,
+      include: {
+        usedByUser: {
+          select: {
+            id: true,
+            username: true
+          }
+        },
+        instance: {
+          select: {
+            id: true,
+            name: true
+          }
+        }
+      }
+    }),
+    prisma.checkinRecord.count({ where: { userId } })
+  ])
+
+  return {
+    records: records.map(r => ({
+      id: r.id,
+      redeemCode: r.redeemCode,
+      codeType: r.codeType,
+      codeValue: r.codeValue,
+      expiresAt: r.expiresAt.toISOString(),
+      usedAt: r.usedAt?.toISOString() ?? null,
+      usedBy: r.usedByUser ? {
+        id: r.usedByUser.id,
+        username: r.usedByUser.username
+      } : null,
+      usedFor: r.instance ? {
+        id: r.instance.id,
+        name: r.instance.name
+      } : null,
+      createdAt: r.createdAt.toISOString()
+    })),
+    total
+  }
+}
+
+/**
+ * 获取用户兑换记录列表（包含签到兑换码和系统兑换码的使用记录）
+ */
+export async function getRedeemRecords(
+  userId: number,
+  limit: number = 20,
+  offset: number = 0
+) {
+  // 并行查询两种兑换记录
+  const [checkinRecords, checkinTotal, systemRecords, systemTotal] = await Promise.all([
+    // 1. 签到兑换码使用记录
+    prisma.checkinRecord.findMany({
+      where: { usedBy: userId },
+      orderBy: { usedAt: 'desc' },
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true
+          }
+        },
+        instance: {
+          select: {
+            id: true,
+            name: true
+          }
+        }
+      }
+    }),
+    prisma.checkinRecord.count({ where: { usedBy: userId } }),
+    // 2. 系统兑换码使用记录
+    prisma.redeemCodeUsage.findMany({
+      where: { userId },
+      orderBy: { usedAt: 'desc' },
+      include: {
+        redeemCode: {
+          select: {
+            code: true,
+            codeType: true,
+            codeValue: true,
+            createdBy: {
+              select: {
+                id: true,
+                username: true
+              }
+            }
+          }
+        },
+        instance: {
+          select: {
+            id: true,
+            name: true
+          }
+        }
+      }
+    }),
+    prisma.redeemCodeUsage.count({ where: { userId } })
+  ])
+
+  // 转换签到兑换码记录为统一格式
+  const checkinMapped = checkinRecords.map(r => ({
+    id: r.id,
+    redeemCode: r.redeemCode,
+    codeType: r.codeType,
+    codeValue: r.codeValue,
+    owner: {
+      id: r.user.id,
+      username: r.user.username
+    },
+    usedFor: r.instance ? {
+      id: r.instance.id,
+      name: r.instance.name
+    } : null,
+    usedAt: r.usedAt?.toISOString() ?? null,
+    isSystemCode: false
+  }))
+
+  // 转换系统兑换码记录为统一格式
+  const systemMapped = systemRecords.map(r => ({
+    id: r.id + 1000000, // 避免 ID 冲突
+    redeemCode: r.redeemCode.code,
+    codeType: r.redeemCode.codeType,
+    codeValue: r.redeemCode.codeValue,
+    owner: {
+      id: r.redeemCode.createdBy.id,
+      username: r.redeemCode.createdBy.username
+    },
+    usedFor: r.instance ? {
+      id: r.instance.id,
+      name: r.instance.name
+    } : null,
+    usedAt: r.usedAt.toISOString(),
+    isSystemCode: true
+  }))
+
+  // 合并并按使用时间排序
+  const allRecords = [...checkinMapped, ...systemMapped]
+    .sort((a, b) => {
+      const timeA = a.usedAt ? new Date(a.usedAt).getTime() : 0
+      const timeB = b.usedAt ? new Date(b.usedAt).getTime() : 0
+      return timeB - timeA // 降序
+    })
+    .slice(offset, offset + limit)
+
+  return {
+    records: allRecords,
+    total: checkinTotal + systemTotal
+  }
+}
+
+/**
+ * 获取今日签到状态
+ */
+export async function getCheckinStatus(userId: number) {
+  const stats = await getCheckinStats(userId)
+  const hasCheckedIn = await hasCheckedInToday(userId)
+  const hasInstances = await userHasInstances(userId)
+
+  return {
+    hasCheckedIn,
+    hasInstances,
+    selfOnlyMode: stats?.selfOnlyMode ?? false,
+    consecutiveOthersUse: stats?.consecutiveOthersUse ?? 0
+  }
+}
+
+/**
+ * 获取用户可用实例列表（用于兑换选择）
+ * 签到兑换码只能用于免费实例，因此只返回 packagePlanId 为 null 的实例
+ */
+export async function getUserInstancesForRedeem(userId: number) {
+  const instances = await prisma.instance.findMany({
+    where: {
+      userId,
+      status: { in: ['running', 'stopped'] },
+      packagePlanId: null  // 只返回免费实例
+    },
+    include: {
+      package: {
+        select: {
+          id: true,
+          name: true,
+          cpuMax: true,
+          memoryMax: true,
+          diskMax: true,
+          monthlyTrafficLimit: true
+        }
+      },
+      host: {
+        select: {
+          id: true,
+          name: true,
+          location: true,
+          countryCode: true
+        }
+      }
+    },
+    orderBy: { name: 'asc' }
+  })
+
+  return instances.map(inst => ({
+    id: inst.id,
+    name: inst.name,
+    status: inst.status,
+    cpu: inst.cpu,
+    memory: inst.memory,
+    disk: inst.disk,
+    monthlyTrafficLimit: inst.monthlyTrafficLimit?.toString() ?? null,
+    package: inst.package ? {
+      id: inst.package.id,
+      name: inst.package.name,
+      cpuMax: inst.package.cpuMax,
+      memoryMax: inst.package.memoryMax,
+      diskMax: inst.package.diskMax,
+      monthlyTrafficLimit: inst.package.monthlyTrafficLimit?.toString() ?? null
+    } : null,
+    host: {
+      id: inst.host.id,
+      name: inst.host.name,
+      location: inst.host.location,
+      countryCode: inst.host.countryCode
+    }
+  }))
+}
+
+/**
+ * 检查用户是否购买过付费实例
+ * 用于签到积分分层发放：有付费实例=500积分，无付费实例=100积分
+ */
+export async function userHasPaidInstance(userId: number): Promise<boolean> {
+  const count = await prisma.instance.count({
+    where: {
+      userId,
+      packagePlanId: { not: null }  // packagePlanId 不为空表示付费实例
+    }
+  })
+  return count > 0
+}
diff --git a/server/src/db/custom-init-commands.ts b/server/src/db/custom-init-commands.ts
new file mode 100644
index 0000000..d377434
--- /dev/null
+++ b/server/src/db/custom-init-commands.ts
@@ -0,0 +1,309 @@
+/**
+ * 用户自定义初始化命令相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+
+// 最大命令模板数量
+const MAX_COMMANDS_PER_USER = 50
+// 命令内容最大大小 (64KB)
+const MAX_COMMAND_SIZE = 64 * 1024
+
+export interface CustomInitCommandData {
+  id: number
+  userId: number
+  name: string
+  command: string
+  distros: string[] // 解析后的数组
+  description: string | null
+  enabled: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+/**
+ * 获取用户的所有自定义初始化命令
+ */
+export async function getCustomInitCommandsByUserId(userId: number): Promise<CustomInitCommandData[]> {
+  const commands = await prisma.customInitCommand.findMany({
+    where: { userId },
+    orderBy: { createdAt: 'desc' }
+  })
+
+  return commands.map(cmd => ({
+    id: cmd.id,
+    userId: cmd.userId,
+    name: cmd.name,
+    command: cmd.command,
+    distros: JSON.parse(cmd.distros) as string[],
+    description: cmd.description,
+    enabled: cmd.enabled,
+    createdAt: cmd.createdAt.toISOString(),
+    updatedAt: cmd.updatedAt.toISOString()
+  }))
+}
+
+/**
+ * 获取用户的启用状态的自定义初始化命令（按发行版筛选）
+ */
+export async function getEnabledCommandsByDistro(userId: number, distro: string): Promise<CustomInitCommandData[]> {
+  const commands = await prisma.customInitCommand.findMany({
+    where: {
+      userId,
+      enabled: true
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+
+  // 筛选适配当前发行版的命令（包括 "all" 通用命令）
+  const filtered = commands.filter(cmd => {
+    const distros = JSON.parse(cmd.distros) as string[]
+    return distros.includes('all') || distros.includes(distro)
+  })
+
+  return filtered.map(cmd => ({
+    id: cmd.id,
+    userId: cmd.userId,
+    name: cmd.name,
+    command: cmd.command,
+    distros: JSON.parse(cmd.distros) as string[],
+    description: cmd.description,
+    enabled: cmd.enabled,
+    createdAt: cmd.createdAt.toISOString(),
+    updatedAt: cmd.updatedAt.toISOString()
+  }))
+}
+
+/**
+ * 根据 ID 获取自定义初始化命令
+ */
+export async function getCustomInitCommandById(id: number): Promise<CustomInitCommandData | null> {
+  const cmd = await prisma.customInitCommand.findUnique({
+    where: { id }
+  })
+
+  if (!cmd) return null
+
+  return {
+    id: cmd.id,
+    userId: cmd.userId,
+    name: cmd.name,
+    command: cmd.command,
+    distros: JSON.parse(cmd.distros) as string[],
+    description: cmd.description,
+    enabled: cmd.enabled,
+    createdAt: cmd.createdAt.toISOString(),
+    updatedAt: cmd.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 根据 ID 列表批量获取自定义初始化命令
+ */
+export async function getCustomInitCommandsByIds(ids: number[]): Promise<CustomInitCommandData[]> {
+  if (ids.length === 0) return []
+
+  const commands = await prisma.customInitCommand.findMany({
+    where: {
+      id: { in: ids }
+    }
+  })
+
+  return commands.map(cmd => ({
+    id: cmd.id,
+    userId: cmd.userId,
+    name: cmd.name,
+    command: cmd.command,
+    distros: JSON.parse(cmd.distros) as string[],
+    description: cmd.description,
+    enabled: cmd.enabled,
+    createdAt: cmd.createdAt.toISOString(),
+    updatedAt: cmd.updatedAt.toISOString()
+  }))
+}
+
+/**
+ * 获取用户命令数量
+ */
+export async function getCustomInitCommandCount(userId: number): Promise<number> {
+  return prisma.customInitCommand.count({
+    where: { userId }
+  })
+}
+
+/**
+ * 创建自定义初始化命令
+ */
+export async function createCustomInitCommand(data: {
+  userId: number
+  name: string
+  command: string
+  distros: string[]
+  description?: string
+}): Promise<{ success: true; id: number } | { success: false; error: string }> {
+  // 验证命令内容大小
+  if (Buffer.byteLength(data.command, 'utf-8') > MAX_COMMAND_SIZE) {
+    return { success: false, error: 'COMMAND_TOO_LARGE' }
+  }
+
+  // 检查用户命令数量是否已达上限
+  const count = await getCustomInitCommandCount(data.userId)
+  if (count >= MAX_COMMANDS_PER_USER) {
+    return { success: false, error: 'MAX_COMMANDS_REACHED' }
+  }
+
+  // 验证发行版列表
+  const validDistros = ['ubuntu', 'debian', 'rhel', 'alpine', 'arch', 'suse', 'all']
+  const invalidDistros = data.distros.filter(d => !validDistros.includes(d))
+  if (invalidDistros.length > 0) {
+    return { success: false, error: 'INVALID_DISTROS' }
+  }
+
+  const cmd = await prisma.customInitCommand.create({
+    data: {
+      userId: data.userId,
+      name: data.name.trim(),
+      command: data.command,
+      distros: JSON.stringify(data.distros),
+      description: data.description?.trim() || null
+    }
+  })
+
+  return { success: true, id: cmd.id }
+}
+
+/**
+ * 更新自定义初始化命令
+ */
+export async function updateCustomInitCommand(
+  id: number,
+  userId: number,
+  data: {
+    name?: string
+    command?: string
+    distros?: string[]
+    description?: string | null
+    enabled?: boolean
+  }
+): Promise<{ success: true } | { success: false; error: string }> {
+  // 先验证命令属于该用户
+  const existing = await prisma.customInitCommand.findFirst({
+    where: { id, userId }
+  })
+
+  if (!existing) {
+    return { success: false, error: 'NOT_FOUND' }
+  }
+
+  // 验证命令内容大小
+  if (data.command && Buffer.byteLength(data.command, 'utf-8') > MAX_COMMAND_SIZE) {
+    return { success: false, error: 'COMMAND_TOO_LARGE' }
+  }
+
+  // 验证发行版列表
+  if (data.distros) {
+    const validDistros = ['ubuntu', 'debian', 'rhel', 'alpine', 'arch', 'suse', 'all']
+    const invalidDistros = data.distros.filter(d => !validDistros.includes(d))
+    if (invalidDistros.length > 0) {
+      return { success: false, error: 'INVALID_DISTROS' }
+    }
+  }
+
+  const updateData: Record<string, unknown> = {}
+  if (data.name !== undefined) updateData.name = data.name.trim()
+  if (data.command !== undefined) updateData.command = data.command
+  if (data.distros !== undefined) updateData.distros = JSON.stringify(data.distros)
+  if (data.description !== undefined) updateData.description = data.description?.trim() || null
+  if (data.enabled !== undefined) updateData.enabled = data.enabled
+
+  await prisma.customInitCommand.update({
+    where: { id },
+    data: updateData
+  })
+
+  return { success: true }
+}
+
+/**
+ * 删除自定义初始化命令
+ */
+export async function deleteCustomInitCommand(id: number, userId: number): Promise<boolean> {
+  const result = await prisma.customInitCommand.deleteMany({
+    where: { id, userId }
+  })
+
+  return result.count > 0
+}
+
+/**
+ * 验证命令列表是否属于用户且处于启用状态
+ */
+export async function validateCommandsOwnership(
+  commandIds: number[],
+  userId: number
+): Promise<{ valid: true; commands: CustomInitCommandData[] } | { valid: false; error: string }> {
+  if (commandIds.length === 0) {
+    return { valid: true, commands: [] }
+  }
+
+  const commands = await prisma.customInitCommand.findMany({
+    where: {
+      id: { in: commandIds },
+      userId,
+      enabled: true
+    }
+  })
+
+  if (commands.length !== commandIds.length) {
+    return { valid: false, error: 'INVALID_COMMAND_IDS' }
+  }
+
+  return {
+    valid: true,
+    commands: commands.map(cmd => ({
+      id: cmd.id,
+      userId: cmd.userId,
+      name: cmd.name,
+      command: cmd.command,
+      distros: JSON.parse(cmd.distros) as string[],
+      description: cmd.description,
+      enabled: cmd.enabled,
+      createdAt: cmd.createdAt.toISOString(),
+      updatedAt: cmd.updatedAt.toISOString()
+    }))
+  }
+}
+
+/**
+ * 合并多个命令模板的命令内容
+ * 返回用于注入到 cloud-init 的完整命令文本
+ */
+export function mergeCommandContents(commands: CustomInitCommandData[]): string {
+  if (commands.length === 0) return ''
+
+  // 按 ID 顺序（保持用户选择顺序）合并命令内容
+  return commands.map(cmd => cmd.command).join('\n')
+}
+
+/**
+ * 根据 ID 列表获取命令（别名，与 getCustomInitCommandsByIds 等价）
+ */
+export const getCommandsByIds = getCustomInitCommandsByIds
+
+/**
+ * 根据镜像别名解析出发行版标识
+ * 返回: ubuntu, debian, rhel, alpine, arch, suse, other
+ */
+export function getImageDistroFromAlias(imageAlias: string): string {
+  const alias = imageAlias.toLowerCase()
+
+  if (alias.includes('ubuntu')) return 'ubuntu'
+  if (alias.includes('debian') || alias.includes('kali')) return 'debian'
+  if (alias.includes('alpine')) return 'alpine'
+  if (alias.includes('arch')) return 'arch'
+  if (alias.includes('opensuse') || alias.includes('suse') || alias.includes('tumbleweed') || alias.includes('leap')) return 'suse'
+  if (alias.includes('alma') || alias.includes('rocky') || alias.includes('oracle') || alias.includes('centos') || alias.includes('rhel') || alias.includes('fedora')) return 'rhel'
+
+  return 'other'
+}
diff --git a/server/src/db/email-verification.ts b/server/src/db/email-verification.ts
new file mode 100644
index 0000000..f00ee6d
--- /dev/null
+++ b/server/src/db/email-verification.ts
@@ -0,0 +1,116 @@
+/**
+ * Email verification code database operations
+ */
+
+import { prisma } from './prisma.js'
+import crypto from 'crypto'
+
+// Verification code expiration time in minutes
+const CODE_EXPIRATION_MINUTES = 10
+
+// Rate limit: max codes per email per hour
+const MAX_CODES_PER_HOUR = 5
+
+/**
+ * Generate a cryptographically secure random 6-digit verification code
+ */
+export function generateVerificationCode(): string {
+    // Use crypto.randomInt for secure random number generation
+    const min = 100000
+    const max = 999999
+    return crypto.randomInt(min, max + 1).toString()
+}
+
+/**
+ * Create a new email verification code
+ */
+export async function createVerificationCode(email: string): Promise<{ code: string; expiresAt: Date } | null> {
+    const normalizedEmail = email.toLowerCase().trim()
+    
+    // Check rate limit
+    const oneHourAgo = new Date(Date.now() - 60 * 60 * 1000)
+    const recentCount = await prisma.emailVerificationCode.count({
+        where: {
+            email: normalizedEmail,
+            createdAt: { gte: oneHourAgo }
+        }
+    })
+
+    if (recentCount >= MAX_CODES_PER_HOUR) {
+        return null // Rate limited
+    }
+
+    // Delete any existing codes for this email
+    await prisma.emailVerificationCode.deleteMany({
+        where: { email: normalizedEmail }
+    })
+
+    // Generate new code
+    const code = generateVerificationCode()
+    const expiresAt = new Date(Date.now() + CODE_EXPIRATION_MINUTES * 60 * 1000)
+
+    await prisma.emailVerificationCode.create({
+        data: {
+            email: normalizedEmail,
+            code,
+            expiresAt
+        }
+    })
+
+    return { code, expiresAt }
+}
+
+/**
+ * Verify an email verification code
+ */
+export async function verifyCode(email: string, code: string): Promise<boolean> {
+    const normalizedEmail = email.toLowerCase().trim()
+    
+    const record = await prisma.emailVerificationCode.findFirst({
+        where: {
+            email: normalizedEmail,
+            code,
+            expiresAt: { gt: new Date() }
+        }
+    })
+
+    if (!record) {
+        return false
+    }
+
+    // Delete the code after successful verification
+    await prisma.emailVerificationCode.delete({
+        where: { id: record.id }
+    })
+
+    return true
+}
+
+/**
+ * Delete expired verification codes (cleanup job)
+ */
+export async function cleanupExpiredCodes(): Promise<number> {
+    const result = await prisma.emailVerificationCode.deleteMany({
+        where: {
+            expiresAt: { lt: new Date() }
+        }
+    })
+    return result.count
+}
+
+/**
+ * Check if an email has a valid pending verification code
+ */
+export async function hasPendingCode(email: string): Promise<boolean> {
+    const normalizedEmail = email.toLowerCase().trim()
+    
+    const count = await prisma.emailVerificationCode.count({
+        where: {
+            email: normalizedEmail,
+            expiresAt: { gt: new Date() }
+        }
+    })
+
+    return count > 0
+}
+
diff --git a/server/src/db/friendships.ts b/server/src/db/friendships.ts
new file mode 100644
index 0000000..f5114f9
--- /dev/null
+++ b/server/src/db/friendships.ts
@@ -0,0 +1,503 @@
+/**
+ * 好友关系数据库操作模块
+ */
+
+import { prisma } from './prisma.js'
+import type { FriendshipStatus } from '@prisma/client'
+
+// ==================== 类型定义 ====================
+
+export interface FriendInfo {
+    id: number  // 好友的用户ID（前端期望的格式）
+    friendshipId: number  // friendship 记录的ID
+    friendId: number  // 好友的用户ID（与 id 相同，为了向后兼容和清晰性）
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId: string | null
+    status: FriendshipStatus
+    createdAt: Date
+    acceptedAt: Date | null
+    // 标识是谁发起的好友请求
+    initiatedByMe: boolean
+    // 好友的资源统计
+    hostCount: number
+    instanceCount: number
+}
+
+export interface FriendRequest {
+    id: number
+    userId: number
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId: string | null
+    remark: string | null
+    createdAt: Date
+}
+
+export interface FriendRequestHistory {
+    id: number
+    userId: number  // 对方用户的ID（如果是收到的请求，这是发送者；如果是发送的请求，这是接收者）
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId: string | null
+    remark: string | null
+    status: FriendshipStatus
+    createdAt: Date
+    acceptedAt: Date | null
+    rejectedAt: Date | null
+    initiatedByMe: boolean  // 是否是我发起的请求
+}
+
+// ==================== 好友请求操作 ====================
+
+/**
+ * 发送好友请求
+ */
+export async function sendFriendRequest(userId: number, friendId: number, remark?: string) {
+    // 检查是否已经存在关系（任一方向）
+    const existing = await prisma.friendship.findFirst({
+        where: {
+            OR: [
+                { userId, friendId },
+                { userId: friendId, friendId: userId }
+            ]
+        }
+    })
+
+    if (existing) {
+        if (existing.status === 'accepted') {
+            throw new Error('ALREADY_FRIENDS')
+        }
+        if (existing.status === 'pending') {
+            // 如果对方已经向我发送了请求，直接接受
+            if (existing.userId === friendId && existing.friendId === userId) {
+                return acceptFriendRequest(existing.id, userId)
+            }
+            throw new Error('REQUEST_PENDING')
+        }
+        // 如果之前被拒绝过，允许重新发送请求
+        if (existing.status === 'rejected') {
+            return prisma.friendship.update({
+                where: { id: existing.id },
+                data: {
+                    status: 'pending',
+                    remark: remark || null,
+                    rejectedAt: null
+                }
+            })
+        }
+    }
+
+    return prisma.friendship.create({
+        data: {
+            userId,
+            friendId,
+            status: 'pending',
+            remark: remark || null
+        }
+    })
+}
+
+/**
+ * 接受好友请求
+ */
+export async function acceptFriendRequest(requestId: number, userId: number) {
+    const request = await prisma.friendship.findUnique({
+        where: { id: requestId }
+    })
+
+    if (!request) {
+        throw new Error('REQUEST_NOT_FOUND')
+    }
+
+    // 只有接收者才能接受
+    if (request.friendId !== userId) {
+        throw new Error('FORBIDDEN')
+    }
+
+    if (request.status !== 'pending') {
+        throw new Error('REQUEST_NOT_PENDING')
+    }
+
+    return prisma.friendship.update({
+        where: { id: requestId },
+        data: {
+            status: 'accepted',
+            acceptedAt: new Date()
+        }
+    })
+}
+
+/**
+ * 拒绝好友请求（更新状态为 rejected）
+ */
+export async function rejectFriendRequest(requestId: number, userId: number) {
+    const request = await prisma.friendship.findUnique({
+        where: { id: requestId }
+    })
+
+    if (!request) {
+        throw new Error('REQUEST_NOT_FOUND')
+    }
+
+    // 只有接收者才能拒绝
+    if (request.friendId !== userId) {
+        throw new Error('FORBIDDEN')
+    }
+
+    if (request.status !== 'pending') {
+        throw new Error('REQUEST_NOT_PENDING')
+    }
+
+    return prisma.friendship.update({
+        where: { id: requestId },
+        data: {
+            status: 'rejected',
+            rejectedAt: new Date()
+        }
+    })
+}
+
+/**
+ * 取消已发送的好友请求
+ */
+export async function cancelFriendRequest(requestId: number, userId: number) {
+    const request = await prisma.friendship.findUnique({
+        where: { id: requestId }
+    })
+
+    if (!request) {
+        throw new Error('REQUEST_NOT_FOUND')
+    }
+
+    // 只有发起者才能取消
+    if (request.userId !== userId) {
+        throw new Error('FORBIDDEN')
+    }
+
+    if (request.status !== 'pending') {
+        throw new Error('REQUEST_NOT_PENDING')
+    }
+
+    return prisma.friendship.delete({
+        where: { id: requestId }
+    })
+}
+
+// ==================== 好友关系操作 ====================
+
+/**
+ * 删除好友关系（双向删除：将状态更新为 removed，保留历史记录）
+ */
+export async function removeFriend(friendshipId: number, userId: number) {
+    const friendship = await prisma.friendship.findUnique({
+        where: { id: friendshipId }
+    })
+
+    if (!friendship) {
+        throw new Error('FRIENDSHIP_NOT_FOUND')
+    }
+
+    // 任一方都可以删除好友
+    if (friendship.userId !== userId && friendship.friendId !== userId) {
+        throw new Error('FORBIDDEN')
+    }
+
+    // 不删除记录，而是更新状态为 removed，以保留历史记录
+    // 这样可以实现双向删除：双方的好友列表都不会显示对方，但历史记录仍然保留
+    return prisma.friendship.update({
+        where: { id: friendshipId },
+        data: {
+            status: 'removed'
+        }
+    })
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 获取用户的好友列表（已接受的）
+ */
+export async function getFriendList(userId: number): Promise<FriendInfo[]> {
+    const friendships = await prisma.friendship.findMany({
+        where: {
+            status: 'accepted',
+            OR: [
+                { userId },
+                { friendId: userId }
+            ]
+        },
+        include: {
+            user: {
+                select: {
+                    id: true,
+                    username: true,
+                    email: true,
+                    avatarStyle: true,
+                    avatarBadgeId: true,
+                    _count: {
+                        select: {
+                            hosts: true
+                        }
+                    }
+                }
+            },
+            friend: {
+                select: {
+                    id: true,
+                    username: true,
+                    email: true,
+                    avatarStyle: true,
+                    avatarBadgeId: true,
+                    _count: {
+                        select: {
+                            hosts: true
+                        }
+                    }
+                }
+            }
+        },
+        orderBy: { acceptedAt: 'desc' }
+    })
+
+    // 收集所有好友的用户ID
+    const friendIds = friendships.map(f => {
+        const iAmInitiator = f.userId === userId
+        return iAmInitiator ? f.friend.id : f.user.id
+    })
+
+    // 批量查询所有好友的未删除实例数量
+    const instanceCounts = await Promise.all(
+        friendIds.map(friendId =>
+            prisma.instance.count({
+                where: {
+                    userId: friendId,
+                    status: { not: 'deleted' }
+                }
+            })
+        )
+    )
+
+    // 创建好友ID到实例数量的映射
+    const instanceCountMap = new Map<number, number>()
+    friendIds.forEach((friendId, index) => {
+        instanceCountMap.set(friendId, instanceCounts[index])
+    })
+
+    return friendships.map(f => {
+        const iAmInitiator = f.userId === userId
+        const friendUser = iAmInitiator ? f.friend : f.user
+        return {
+            id: friendUser.id,  // 好友的用户ID（前端期望的格式）
+            friendshipId: f.id,  // friendship 记录的ID
+            friendId: friendUser.id,  // 好友的用户ID（与 id 相同，为了向后兼容和清晰性）
+            username: friendUser.username,
+            email: friendUser.email,
+            avatarStyle: friendUser.avatarStyle,
+            avatarBadgeId: friendUser.avatarBadgeId,
+            status: f.status,
+            createdAt: f.createdAt,
+            acceptedAt: f.acceptedAt,
+            initiatedByMe: iAmInitiator,
+            hostCount: friendUser._count.hosts,
+            instanceCount: instanceCountMap.get(friendUser.id) || 0
+        }
+    })
+}
+
+/**
+ * 获取收到的待处理好友请求
+ */
+export async function getPendingFriendRequests(userId: number): Promise<FriendRequest[]> {
+    const requests = await prisma.friendship.findMany({
+        where: {
+            friendId: userId,
+            status: 'pending'
+        },
+        include: {
+            user: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return requests.map(r => ({
+        id: r.id,
+        userId: r.user.id,
+        username: r.user.username,
+        email: r.user.email,
+        avatarStyle: r.user.avatarStyle,
+        avatarBadgeId: r.user.avatarBadgeId,
+        remark: r.remark,
+        createdAt: r.createdAt
+    }))
+}
+
+/**
+ * 获取已发送的待处理好友请求
+ */
+export async function getSentFriendRequests(userId: number): Promise<FriendRequest[]> {
+    const requests = await prisma.friendship.findMany({
+        where: {
+            userId,
+            status: 'pending'
+        },
+        include: {
+            friend: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return requests.map(r => ({
+        id: r.id,
+        userId: r.friend.id,
+        username: r.friend.username,
+        email: r.friend.email,
+        avatarStyle: r.friend.avatarStyle,
+        avatarBadgeId: r.friend.avatarBadgeId,
+        remark: r.remark,
+        createdAt: r.createdAt
+    }))
+}
+
+/**
+ * 检查两个用户是否是好友
+ */
+export async function areFriends(userId1: number, userId2: number): Promise<boolean> {
+    const friendship = await prisma.friendship.findFirst({
+        where: {
+            status: 'accepted',
+            OR: [
+                { userId: userId1, friendId: userId2 },
+                { userId: userId2, friendId: userId1 }
+            ]
+        }
+    })
+
+    return !!friendship
+}
+
+/**
+ * 获取用户的所有好友ID列表（用于资源查询）
+ */
+export async function getFriendIds(userId: number): Promise<number[]> {
+    const friendships = await prisma.friendship.findMany({
+        where: {
+            status: 'accepted',
+            OR: [
+                { userId },
+                { friendId: userId }
+            ]
+        },
+        select: {
+            userId: true,
+            friendId: true
+        }
+    })
+
+    const friendIds = friendships.map(f =>
+        f.userId === userId ? f.friendId : f.userId
+    )
+
+    return [...new Set(friendIds)]
+}
+
+/**
+ * 根据用户名搜索用户（用于添加好友）
+ */
+export async function searchUserByUsername(username: string, excludeUserId: number) {
+    return prisma.user.findFirst({
+        where: {
+            username: {
+                equals: username,
+                mode: 'insensitive'
+            },
+            id: { not: excludeUserId },
+            status: 'active'
+        },
+        select: {
+            id: true,
+            username: true,
+            email: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+        }
+    })
+}
+
+/**
+ * 获取好友关系详情
+ */
+export async function getFriendshipById(friendshipId: number) {
+    return prisma.friendship.findUnique({
+        where: { id: friendshipId },
+        include: {
+            user: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            },
+            friend: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        }
+    })
+}
+
+/**
+ * 获取好友请求历史记录（已接受、已拒绝或已删除）
+ * 包括：我收到的请求和我发送的请求
+ * 已删除的好友关系也会出现在历史记录中（双向）
+ */
+export async function getRequestHistory(
+    userId: number,
+    filter?: 'accepted' | 'rejected' | 'removed' | 'all'
+): Promise<FriendRequestHistory[]> {
+    const statusFilter = filter === 'all' || !filter
+        ? { in: ['accepted' as const, 'rejected' as const, 'removed' as const] }
+        : filter
+
+    // 查询所有相关的好友请求：我收到的和我发送的
+    const requests = await prisma.friendship.findMany({
+        where: {
+            status: statusFilter,
+            OR: [
+                { friendId: userId },  // 我收到的请求
+                { userId: userId }     // 我发送的请求
+            ]
+        },
+        include: {
+            user: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            },
+            friend: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return requests.map(r => {
+        const iAmInitiator = r.userId === userId
+        const otherUser = iAmInitiator ? r.friend : r.user
+        
+        return {
+            id: r.id,
+            userId: otherUser.id,
+            username: otherUser.username,
+            email: otherUser.email,
+            avatarStyle: otherUser.avatarStyle,
+            avatarBadgeId: otherUser.avatarBadgeId,
+            remark: r.remark,
+            status: r.status,
+            createdAt: r.createdAt,
+            acceptedAt: r.acceptedAt,
+            rejectedAt: r.rejectedAt,
+            initiatedByMe: iAmInitiator
+        }
+    })
+}
diff --git a/server/src/db/help.ts b/server/src/db/help.ts
new file mode 100644
index 0000000..3569aef
--- /dev/null
+++ b/server/src/db/help.ts
@@ -0,0 +1,270 @@
+/**
+ * 帮助文档相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { HelpArticle } from '../types/database.js'
+
+/**
+ * 获取帮助文档列表（分页）
+ */
+export async function getHelpArticles(options: {
+  page?: number
+  pageSize?: number
+  publishedOnly?: boolean
+  category?: string | null
+  pinnedOnly?: boolean  // 只获取置顶文章
+} = {}): Promise<{
+  items: Array<Pick<HelpArticle, 'id' | 'title' | 'slug' | 'category' | 'sort_order' | 'published' | 'pinned' | 'created_at' | 'updated_at'>>
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}> {
+  const { page = 1, pageSize = 20, publishedOnly = true, category = null, pinnedOnly = false } = options
+
+  const where: any = {}
+
+  if (publishedOnly) {
+    where.published = true
+  }
+
+  if (category) {
+    where.category = category
+  }
+
+  if (pinnedOnly) {
+    where.pinned = true
+  }
+
+  // 获取总数
+  const total = await prisma.helpArticle.count({ where })
+
+  // 获取数据
+  const articles = await prisma.helpArticle.findMany({
+    where,
+    select: {
+      id: true,
+      title: true,
+      slug: true,
+      category: true,
+      sortOrder: true,
+      published: true,
+      pinned: true,
+      createdAt: true,
+      updatedAt: true
+    },
+    orderBy: pinnedOnly ? [
+      { sortOrder: 'asc' },
+      { createdAt: 'desc' }
+    ] : [
+      { pinned: 'desc' },  // 置顶文章优先
+      { sortOrder: 'asc' },
+      { createdAt: 'desc' }
+    ],
+    skip: (page - 1) * pageSize,
+    take: pageSize
+  })
+
+  return {
+    items: articles.map(a => ({
+      id: a.id,
+      title: a.title,
+      slug: a.slug,
+      category: a.category,
+      sort_order: a.sortOrder,
+      published: a.published ? 1 : 0,
+      pinned: a.pinned ? 1 : 0,
+      created_at: a.createdAt.toISOString(),
+      updated_at: a.updatedAt.toISOString()
+    })),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取置顶的帮助文档（用于首页显示）
+ */
+export async function getPinnedHelpArticles(limit: number = 6): Promise<Array<Pick<HelpArticle, 'id' | 'title' | 'slug' | 'category'>>> {
+  const articles = await prisma.helpArticle.findMany({
+    where: {
+      published: true,
+      pinned: true
+    },
+    select: {
+      id: true,
+      title: true,
+      slug: true,
+      category: true,
+      sortOrder: true
+    },
+    orderBy: [
+      { sortOrder: 'asc' },
+      { createdAt: 'desc' }
+    ],
+    take: limit
+  })
+
+  return articles.map(a => ({
+    id: a.id,
+    title: a.title,
+    slug: a.slug,
+    category: a.category
+  }))
+}
+
+/**
+ * 通过 ID 获取帮助文档
+ */
+export async function getHelpArticleById(id: number): Promise<HelpArticle | null> {
+  const article = await prisma.helpArticle.findUnique({
+    where: { id }
+  })
+
+  if (!article) return null
+
+  return {
+    id: article.id,
+    title: article.title,
+    slug: article.slug,
+    content: article.content,
+    category: article.category,
+    sort_order: article.sortOrder,
+    published: article.published ? 1 : 0,
+    pinned: article.pinned ? 1 : 0,
+    created_by: article.createdBy,
+    created_at: article.createdAt.toISOString(),
+    updated_at: article.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 通过 slug 获取帮助文档（公开，只返回已发布的）
+ */
+export async function getHelpArticleBySlug(slug: string): Promise<HelpArticle | null> {
+  const article = await prisma.helpArticle.findFirst({
+    where: {
+      slug,
+      published: true
+    }
+  })
+
+  if (!article) return null
+
+  return {
+    id: article.id,
+    title: article.title,
+    slug: article.slug,
+    content: article.content,
+    category: article.category,
+    sort_order: article.sortOrder,
+    published: article.published ? 1 : 0,
+    pinned: article.pinned ? 1 : 0,
+    created_by: article.createdBy,
+    created_at: article.createdAt.toISOString(),
+    updated_at: article.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 创建帮助文档
+ */
+export async function createHelpArticle(data: {
+  title: string
+  slug: string
+  content: string
+  category?: string
+  sortOrder?: number
+  published?: boolean
+  pinned?: boolean
+  createdBy?: number | null
+}): Promise<number> {
+  const article = await prisma.helpArticle.create({
+    data: {
+      title: data.title,
+      slug: data.slug,
+      content: data.content,
+      category: data.category ?? 'general',
+      sortOrder: data.sortOrder ?? 0,
+      published: data.published !== false,
+      pinned: data.pinned === true,
+      createdBy: data.createdBy ?? null
+    }
+  })
+
+  return article.id
+}
+
+/**
+ * 更新帮助文档
+ */
+export async function updateHelpArticle(id: number, data: {
+  title?: string
+  slug?: string
+  content?: string
+  category?: string
+  sortOrder?: number
+  published?: boolean
+  pinned?: boolean
+}): Promise<void> {
+  const updateData: {
+    title?: string
+    slug?: string
+    content?: string
+    category?: string
+    sortOrder?: number
+    published?: boolean
+    pinned?: boolean
+  } = {}
+
+  if (data.title !== undefined) updateData.title = data.title
+  if (data.slug !== undefined) updateData.slug = data.slug
+  if (data.content !== undefined) updateData.content = data.content
+  if (data.category !== undefined) updateData.category = data.category
+  if (data.sortOrder !== undefined) updateData.sortOrder = data.sortOrder
+  if (data.published !== undefined) updateData.published = data.published
+  if (data.pinned !== undefined) updateData.pinned = data.pinned
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.helpArticle.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 删除帮助文档
+ */
+export async function deleteHelpArticle(id: number): Promise<void> {
+  await prisma.helpArticle.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 获取帮助分类列表
+ */
+export async function getHelpCategories(): Promise<Array<{ category: string; count: number }>> {
+  const categories = await prisma.helpArticle.groupBy({
+    by: ['category'],
+    where: {
+      published: true
+    },
+    _count: {
+      id: true
+    },
+    orderBy: {
+      category: 'asc'
+    }
+  })
+
+  return categories.map(c => ({
+    category: c.category,
+    count: c._count.id
+  }))
+}
diff --git a/server/src/db/host-addresses.ts b/server/src/db/host-addresses.ts
new file mode 100644
index 0000000..920df52
--- /dev/null
+++ b/server/src/db/host-addresses.ts
@@ -0,0 +1,319 @@
+import type {
+  HostAddressCheckStatus,
+  HostAddressCheckTrigger,
+  HostAddressKind,
+  HostAddressSource,
+  Prisma
+} from '@prisma/client'
+import { prisma } from './prisma.js'
+
+type DbClient = Prisma.TransactionClient | typeof prisma
+
+export interface HostAddressAliasInput {
+  address: string
+  kind: HostAddressKind
+  source: HostAddressSource
+}
+
+export interface HostAddressConflictInfo {
+  id: number
+  address: string
+  hostAId: number
+  hostAName: string
+  hostBId: number
+  hostBName: string
+  wasCreated: boolean
+}
+
+export async function upsertHostInputAlias(
+  hostId: number,
+  alias: HostAddressAliasInput,
+  client: DbClient = prisma
+): Promise<void> {
+  await client.hostAddressAlias.upsert({
+    where: {
+      hostId_address: {
+        hostId,
+        address: alias.address
+      }
+    },
+    create: {
+      hostId,
+      address: alias.address,
+      kind: alias.kind,
+      source: alias.source
+    },
+    update: {
+      kind: alias.kind,
+      source: alias.source
+    }
+  })
+}
+
+export async function replaceHostResolvedAliases(
+  hostId: number,
+  aliases: HostAddressAliasInput[],
+  client: DbClient = prisma
+): Promise<void> {
+  await client.hostAddressAlias.deleteMany({
+    where: {
+      hostId,
+      source: 'resolved'
+    }
+  })
+
+  if (aliases.length === 0) {
+    return
+  }
+
+  await client.hostAddressAlias.createMany({
+    data: aliases.map(alias => ({
+      hostId,
+      address: alias.address,
+      kind: alias.kind,
+      source: alias.source
+    })),
+    skipDuplicates: true
+  })
+}
+
+export async function getAliasesByAddresses(
+  addresses: string[],
+  excludeHostId?: number,
+  client: DbClient = prisma
+) {
+  if (addresses.length === 0) {
+    return []
+  }
+
+  return client.hostAddressAlias.findMany({
+    where: {
+      address: {
+        in: addresses
+      },
+      ...(excludeHostId !== undefined
+        ? {
+            hostId: {
+              not: excludeHostId
+            }
+          }
+        : {})
+    },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          url: true
+        }
+      }
+    }
+  })
+}
+
+export async function createHostAddressResolutionLog(
+  data: {
+    hostId: number
+    inputAddress: string
+    inputKind: HostAddressKind
+    trigger: HostAddressCheckTrigger
+    status: HostAddressCheckStatus
+    resolvedAddresses: string[]
+    error?: string | null
+    details?: Record<string, unknown>
+  },
+  client: DbClient = prisma
+): Promise<void> {
+  await client.hostAddressResolutionLog.create({
+    data: {
+      hostId: data.hostId,
+      inputAddress: data.inputAddress,
+      inputKind: data.inputKind,
+      trigger: data.trigger,
+      status: data.status,
+      resolvedAddresses: data.resolvedAddresses as Prisma.InputJsonValue,
+      error: data.error ?? null,
+      details: (data.details ?? {}) as Prisma.InputJsonValue
+    }
+  })
+}
+
+export async function getHostsForAddressBackfill() {
+  return prisma.host.findMany({
+    select: {
+      id: true,
+      name: true,
+      url: true
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+}
+
+export async function getHostsWithDomainInputAlias() {
+  return prisma.host.findMany({
+    where: {
+      addressAliases: {
+        some: {
+          source: 'input',
+          kind: 'domain'
+        }
+      }
+    },
+    select: {
+      id: true,
+      name: true,
+      url: true
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+}
+
+export async function syncHostAddressConflicts(
+  addresses: string[],
+  client: DbClient = prisma
+): Promise<HostAddressConflictInfo[]> {
+  if (addresses.length === 0) {
+    return []
+  }
+
+  const uniqueAddresses = [...new Set(addresses)]
+  const aliases = await client.hostAddressAlias.findMany({
+    where: {
+      address: {
+        in: uniqueAddresses
+      }
+    },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true
+        }
+      }
+    },
+    orderBy: [
+      { address: 'asc' },
+      { hostId: 'asc' }
+    ]
+  })
+  type AliasRecord = (typeof aliases)[number]
+
+  const desiredKeys = new Set<string>()
+  const createdConflicts: HostAddressConflictInfo[] = []
+  const aliasesByAddress = new Map<string, AliasRecord[]>()
+
+  for (const alias of aliases) {
+    const list = aliasesByAddress.get(alias.address) ?? []
+    list.push(alias)
+    aliasesByAddress.set(alias.address, list)
+  }
+
+  for (const [address, aliasGroup] of aliasesByAddress.entries()) {
+    const uniqueHosts = new Map<number, { id: number; name: string }>()
+    for (const alias of aliasGroup) {
+      uniqueHosts.set(alias.host.id, alias.host)
+    }
+
+    const hosts = [...uniqueHosts.values()].sort((a, b) => a.id - b.id)
+    if (hosts.length < 2) {
+      continue
+    }
+
+    for (let i = 0; i < hosts.length; i++) {
+      for (let j = i + 1; j < hosts.length; j++) {
+        const hostA = hosts[i]
+        const hostB = hosts[j]
+        const key = `${hostA.id}:${hostB.id}:${address}`
+        desiredKeys.add(key)
+
+        const existing = await client.hostAddressConflict.findUnique({
+          where: {
+            hostAId_hostBId_address: {
+              hostAId: hostA.id,
+              hostBId: hostB.id,
+              address
+            }
+          }
+        })
+
+        if (!existing) {
+          const conflict = await client.hostAddressConflict.create({
+            data: {
+              hostAId: hostA.id,
+              hostBId: hostB.id,
+              address,
+              status: 'active'
+            }
+          })
+          createdConflicts.push({
+            id: conflict.id,
+            address,
+            hostAId: hostA.id,
+            hostAName: hostA.name,
+            hostBId: hostB.id,
+            hostBName: hostB.name,
+            wasCreated: true
+          })
+          continue
+        }
+
+        if (existing.status === 'resolved') {
+          const conflict = await client.hostAddressConflict.update({
+            where: { id: existing.id },
+            data: {
+              status: 'active',
+              resolvedAt: null
+            }
+          })
+          createdConflicts.push({
+            id: conflict.id,
+            address,
+            hostAId: hostA.id,
+            hostAName: hostA.name,
+            hostBId: hostB.id,
+            hostBName: hostB.name,
+            wasCreated: true
+          })
+          continue
+        }
+
+        await client.hostAddressConflict.update({
+          where: { id: existing.id },
+          data: {
+            resolvedAt: null
+          }
+        })
+      }
+    }
+  }
+
+  const existingActiveConflicts = await client.hostAddressConflict.findMany({
+    where: {
+      address: {
+        in: uniqueAddresses
+      },
+      status: 'active'
+    }
+  })
+
+  for (const conflict of existingActiveConflicts) {
+    const key = `${conflict.hostAId}:${conflict.hostBId}:${conflict.address}`
+    if (desiredKeys.has(key)) {
+      continue
+    }
+
+    await client.hostAddressConflict.update({
+      where: { id: conflict.id },
+      data: {
+        status: 'resolved',
+        resolvedAt: new Date()
+      }
+    })
+  }
+
+  return createdConflicts
+}
diff --git a/server/src/db/host-notification-email-tasks.ts b/server/src/db/host-notification-email-tasks.ts
new file mode 100644
index 0000000..f0a2a2a
--- /dev/null
+++ b/server/src/db/host-notification-email-tasks.ts
@@ -0,0 +1,239 @@
+import type { HostNotificationEmailTask } from '@prisma/client'
+import { prisma } from './prisma.js'
+import {
+  HOST_NOTIFICATION_EMAIL_LOCK_KEY,
+  HOST_NOTIFICATION_EMAIL_LOCK_NAMESPACE,
+  tryAdvisoryTransactionLock
+} from './advisory-locks.js'
+
+export const HOST_NOTIFICATION_EMAIL_INTERVAL_MS = 60 * 1000
+export const HOST_NOTIFICATION_EMAIL_RETRY_DELAY_MS = 5 * 60 * 1000
+export const HOST_NOTIFICATION_EMAIL_MAX_RETRIES = 3
+export const HOST_NOTIFICATION_EMAIL_PROCESSING_TIMEOUT_MS = 10 * 60 * 1000
+
+const ADVISORY_LOCK_RETRY_LIMIT = 20
+const ADVISORY_LOCK_RETRY_DELAY_MS = 100
+
+export interface EnqueueHostNotificationEmailTaskInput {
+  userId: number
+  hostId: number
+  email: string
+  username: string
+  hostName: string
+  title: string
+  content: string
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+export async function cleanupStaleHostNotificationEmailTasks(): Promise<number> {
+  const result = await prisma.hostNotificationEmailTask.updateMany({
+    where: { status: 'PROCESSING' },
+    data: {
+      status: 'PENDING',
+      scheduledFor: new Date(),
+      lastError: '系统重启，邮件任务已重新入队',
+      startedAt: null,
+      finishedAt: null
+    }
+  })
+
+  return result.count
+}
+
+export async function cleanupTimeoutHostNotificationEmailTasks(
+  timeoutMs: number = HOST_NOTIFICATION_EMAIL_PROCESSING_TIMEOUT_MS
+): Promise<number> {
+  const timeoutThreshold = new Date(Date.now() - timeoutMs)
+
+  const result = await prisma.hostNotificationEmailTask.updateMany({
+    where: {
+      status: 'PROCESSING',
+      startedAt: { lt: timeoutThreshold }
+    },
+    data: {
+      status: 'PENDING',
+      scheduledFor: new Date(),
+      lastError: '邮件任务处理超时，已重新入队',
+      startedAt: null,
+      finishedAt: null
+    }
+  })
+
+  return result.count
+}
+
+export async function enqueueHostNotificationEmailTasks(
+  tasks: EnqueueHostNotificationEmailTaskInput[]
+): Promise<number> {
+  if (tasks.length === 0) return 0
+
+  for (let attempt = 0; attempt < ADVISORY_LOCK_RETRY_LIMIT; attempt++) {
+    const queuedCount = await prisma.$transaction(async (tx) => {
+        const locked = await tryAdvisoryTransactionLock(
+          tx,
+          HOST_NOTIFICATION_EMAIL_LOCK_NAMESPACE,
+          HOST_NOTIFICATION_EMAIL_LOCK_KEY
+        )
+
+        if (!locked) return null
+
+        const now = new Date()
+        const [latestQueuedTask, latestAttemptedTask] = await Promise.all([
+          tx.hostNotificationEmailTask.findFirst({
+            where: {
+              status: { in: ['PENDING', 'PROCESSING'] }
+            },
+            orderBy: [
+              { scheduledFor: 'desc' },
+              { id: 'desc' }
+            ],
+            select: { scheduledFor: true }
+          }),
+          tx.hostNotificationEmailTask.findFirst({
+            where: {
+              startedAt: { not: null }
+            },
+            orderBy: [
+              { startedAt: 'desc' },
+              { id: 'desc' }
+            ],
+            select: { startedAt: true }
+          })
+        ])
+
+        let baseTime = now.getTime()
+
+        if (latestQueuedTask?.scheduledFor) {
+          baseTime = Math.max(
+            baseTime,
+            latestQueuedTask.scheduledFor.getTime() + HOST_NOTIFICATION_EMAIL_INTERVAL_MS
+          )
+        }
+
+        if (latestAttemptedTask?.startedAt) {
+          baseTime = Math.max(
+            baseTime,
+            latestAttemptedTask.startedAt.getTime() + HOST_NOTIFICATION_EMAIL_INTERVAL_MS
+          )
+        }
+
+        const queuedTasks = tasks.map((task, index) => ({
+          ...task,
+          scheduledFor: new Date(baseTime + index * HOST_NOTIFICATION_EMAIL_INTERVAL_MS)
+        }))
+
+        const result = await tx.hostNotificationEmailTask.createMany({
+          data: queuedTasks
+        })
+
+        return result.count
+      })
+
+    if (queuedCount !== null) {
+      return queuedCount
+    }
+
+    await sleep(ADVISORY_LOCK_RETRY_DELAY_MS * (attempt + 1))
+  }
+
+  throw new Error('Failed to acquire host notification email queue lock')
+}
+
+export async function claimNextHostNotificationEmailTask(): Promise<HostNotificationEmailTask | null> {
+  return prisma.$transaction(async (tx) => {
+        const locked = await tryAdvisoryTransactionLock(
+          tx,
+          HOST_NOTIFICATION_EMAIL_LOCK_NAMESPACE,
+          HOST_NOTIFICATION_EMAIL_LOCK_KEY
+        )
+
+        if (!locked) {
+          return null
+        }
+
+        const now = new Date()
+        const recentThreshold = new Date(now.getTime() - HOST_NOTIFICATION_EMAIL_INTERVAL_MS)
+
+        const throttledTask = await tx.hostNotificationEmailTask.findFirst({
+          where: {
+            OR: [
+              { status: 'PROCESSING' },
+              { startedAt: { gte: recentThreshold } }
+            ]
+          },
+          select: { id: true }
+        })
+
+        if (throttledTask) {
+          return null
+        }
+
+        const nextTask = await tx.hostNotificationEmailTask.findFirst({
+          where: {
+            status: 'PENDING',
+            scheduledFor: { lte: now }
+          },
+          orderBy: [
+            { scheduledFor: 'asc' },
+            { createdAt: 'asc' }
+          ]
+        })
+
+        if (!nextTask) {
+          return null
+        }
+
+        return tx.hostNotificationEmailTask.update({
+          where: { id: nextTask.id },
+          data: {
+            status: 'PROCESSING',
+            startedAt: now,
+            finishedAt: null,
+            lastError: null
+          }
+        })
+  })
+}
+
+export async function markHostNotificationEmailTaskSent(taskId: number): Promise<void> {
+  await prisma.hostNotificationEmailTask.update({
+    where: { id: taskId },
+    data: {
+      status: 'SENT',
+      lastError: null,
+      finishedAt: new Date()
+    }
+  })
+}
+
+export async function retryOrFailHostNotificationEmailTask(
+  taskId: number,
+  currentRetryCount: number,
+  errorMessage: string
+): Promise<void> {
+  if (currentRetryCount >= HOST_NOTIFICATION_EMAIL_MAX_RETRIES) {
+    await prisma.hostNotificationEmailTask.update({
+      where: { id: taskId },
+      data: {
+        status: 'FAILED',
+        lastError: errorMessage,
+        finishedAt: new Date()
+      }
+    })
+    return
+  }
+
+  await prisma.hostNotificationEmailTask.update({
+    where: { id: taskId },
+    data: {
+      status: 'PENDING',
+      retryCount: { increment: 1 },
+      lastError: errorMessage,
+      scheduledFor: new Date(Date.now() + HOST_NOTIFICATION_EMAIL_RETRY_DELAY_MS),
+      finishedAt: null
+    }
+  })
+}
diff --git a/server/src/db/hosting-blocks.ts b/server/src/db/hosting-blocks.ts
new file mode 100644
index 0000000..5bed141
--- /dev/null
+++ b/server/src/db/hosting-blocks.ts
@@ -0,0 +1,135 @@
+import { prisma } from './prisma.js'
+
+export interface HostingUserBlockInfo {
+  id: number
+  blockedUserId: number
+  username: string
+  email: string | null
+  avatarStyle: string
+  avatarBadgeId: string | null
+  remark: string | null
+  createdAt: string
+}
+
+export async function isUserBlockedByHoster(blockerId: number, blockedUserId: number, tx?: typeof prisma): Promise<boolean> {
+  if (blockerId === blockedUserId) {
+    return false
+  }
+
+  const client = tx || prisma
+  const block = await client.hostingUserBlock.findUnique({
+    where: {
+      blockerId_blockedUserId: {
+        blockerId,
+        blockedUserId
+      }
+    },
+    select: { id: true }
+  })
+
+  return !!block
+}
+
+export async function isUserBlockedFromPackage(userId: number, packageId: number, tx?: typeof prisma): Promise<boolean> {
+  const client = tx || prisma
+  const pkg = await client.package.findUnique({
+    where: { id: packageId },
+    select: { userId: true }
+  })
+
+  if (!pkg || pkg.userId === userId) {
+    return false
+  }
+
+  return isUserBlockedByHoster(pkg.userId, userId, client)
+}
+
+export async function getBlockerIdsForUser(userId: number): Promise<number[]> {
+  const blocks = await prisma.hostingUserBlock.findMany({
+    where: { blockedUserId: userId },
+    select: { blockerId: true }
+  })
+
+  return blocks.map(block => block.blockerId)
+}
+
+export async function listHostingUserBlocks(blockerId: number): Promise<HostingUserBlockInfo[]> {
+  const blocks = await prisma.hostingUserBlock.findMany({
+    where: { blockerId },
+    include: {
+      blockedUser: {
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          avatarStyle: true,
+          avatarBadgeId: true
+        }
+      }
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+
+  return blocks.map(block => ({
+    id: block.id,
+    blockedUserId: block.blockedUserId,
+    username: block.blockedUser.username,
+    email: block.blockedUser.email,
+    avatarStyle: block.blockedUser.avatarStyle,
+    avatarBadgeId: block.blockedUser.avatarBadgeId ?? null,
+    remark: block.remark,
+    createdAt: block.createdAt.toISOString()
+  }))
+}
+
+export async function createHostingUserBlock(blockerId: number, blockedUserId: number, remark?: string | null): Promise<HostingUserBlockInfo> {
+  const block = await prisma.hostingUserBlock.upsert({
+    where: {
+      blockerId_blockedUserId: {
+        blockerId,
+        blockedUserId
+      }
+    },
+    create: {
+      blockerId,
+      blockedUserId,
+      remark: remark?.trim() || null
+    },
+    update: {
+      remark: remark?.trim() || null
+    },
+    include: {
+      blockedUser: {
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          avatarStyle: true,
+          avatarBadgeId: true
+        }
+      }
+    }
+  })
+
+  return {
+    id: block.id,
+    blockedUserId: block.blockedUserId,
+    username: block.blockedUser.username,
+    email: block.blockedUser.email,
+    avatarStyle: block.blockedUser.avatarStyle,
+    avatarBadgeId: block.blockedUser.avatarBadgeId ?? null,
+    remark: block.remark,
+    createdAt: block.createdAt.toISOString()
+  }
+}
+
+export async function removeHostingUserBlock(blockerId: number, blockedUserId: number): Promise<boolean> {
+  const result = await prisma.hostingUserBlock.deleteMany({
+    where: {
+      blockerId,
+      blockedUserId
+    }
+  })
+
+  return result.count > 0
+}
diff --git a/server/src/db/hosts.ts b/server/src/db/hosts.ts
new file mode 100644
index 0000000..c24498c
--- /dev/null
+++ b/server/src/db/hosts.ts
@@ -0,0 +1,922 @@
+/**
+ * 主机相关数据库操�?
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Prisma } from '@prisma/client'
+import type { Host } from '../types/database.js'
+
+type DbClient = Prisma.TransactionClient | typeof prisma
+
+/**
+ * 获取所有主�?
+ */
+export async function getAllHosts(): Promise<Host[]> {
+  const hosts = await prisma.host.findMany({
+    orderBy: {
+      id: 'asc'
+    }
+  })
+
+  return hosts.map(host => ({
+    id: host.id,
+    name: host.name,
+    url: host.url,
+    location: host.location,
+    country_code: host.countryCode,
+    architecture: host.architecture as 'x86_64' | 'aarch64',
+    status: host.status,
+    cert_path: host.certPath,
+    key_path: host.keyPath,
+    nat_public_ip: host.natPublicIp,
+    nat_public_ipv6: host.natPublicIpv6,
+    nat_bind_ip: host.natBindIp,
+    nat_bind_ipv6: host.natBindIpv6,
+    nat_port_start: host.natPortStart,
+    nat_port_end: host.natPortEnd,
+    cpu_used: host.cpuUsed,
+    memory_used: host.memoryUsed,
+    disk_used: host.diskUsed,
+    cpu_allowance_max: host.cpuAllowanceMax,
+    memory_max: host.memoryMax,
+    storage_size: host.storageSize,
+    created_at: host.createdAt.toISOString(),
+    updated_at: host.updatedAt.toISOString()
+  }))
+}
+
+/**
+ * 检查是否有可用的节点（非离线状态）
+ * @param userId 可选，指定用户 ID 则只检查该用户的节�?
+ */
+export async function hasAvailableHosts(userId?: number): Promise<boolean> {
+  const count = await prisma.host.count({
+    where: {
+      status: { not: 'offline' as const },
+      ...(userId !== undefined ? { userId } : {})
+    }
+  })
+  return count > 0
+}
+
+/**
+ * 根据 ID 获取主机
+ */
+export async function getHostById(id: number): Promise<Host | null> {
+  const host = await prisma.host.findUnique({
+    where: { id }
+  })
+
+  if (!host) return null
+
+  return {
+    id: host.id,
+    user_id: host.userId,
+    name: host.name,
+    url: host.url,
+    location: host.location,
+    country_code: host.countryCode,
+    architecture: host.architecture as 'x86_64' | 'aarch64',
+    status: host.status,
+    cert_path: host.certPath,
+    key_path: host.keyPath,
+    nat_public_ip: host.natPublicIp,
+    nat_public_ipv6: host.natPublicIpv6,
+    nat_bind_ip: host.natBindIp,
+    nat_bind_ipv6: host.natBindIpv6,
+    nat_port_start: host.natPortStart,
+    nat_port_end: host.natPortEnd,
+    cpu_used: host.cpuUsed,
+    memory_used: host.memoryUsed,
+    disk_used: host.diskUsed,
+    ip_address: host.ipAddress,
+    storage_driver: host.storageDriver,
+    storage_type: host.storageType,
+    storage_path: host.storagePath,
+    storage_size: host.storageSize,
+    ipv6_mode: host.ipv6Mode,
+    ipv6_subnet: host.ipv6Subnet,
+    ipv6_gateway: host.ipv6Gateway,
+    ipv6_parent_interface: host.ipv6ParentInterface,
+    enable_api: host.enableApi,
+    sysctl_config: host.sysctlConfig,
+    cpu_allowance_max: host.cpuAllowanceMax,
+    memory_max: host.memoryMax,
+    instance_type: host.instanceType,
+    // Caddy 反代配置
+    caddy_enabled: host.caddyEnabled,
+    caddy_username: host.caddyUsername,
+    caddy_password: host.caddyPassword,
+    caddy_port: host.caddyPort,
+    // 转移控制
+    transfer_enabled: host.transferEnabled,
+    // 流量配置
+    traffic_reset_day: host.trafficResetDay,
+    // 节点通知设置
+    notify_purchase: host.notifyPurchase,
+    notify_renew: host.notifyRenew,
+    notify_destroy: host.notifyDestroy,
+    // 资源池玩�?
+    enable_resource_pool: host.enableResourcePool,
+    // 节点公告
+    announcement: host.announcement,
+    // 探针地址
+    probe_url: host.probeUrl,
+    created_at: host.createdAt.toISOString(),
+    updated_at: host.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 根据用户ID和名称获取主�?
+ */
+export async function getHostByUserAndName(userId: number, name: string): Promise<Host | null> {
+  const host = await prisma.host.findUnique({
+    where: { userId_name: { userId, name } }
+  })
+
+  if (!host) return null
+
+  return {
+    id: host.id,
+    user_id: host.userId,
+    name: host.name,
+    url: host.url,
+    location: host.location,
+    country_code: host.countryCode,
+    architecture: host.architecture as 'x86_64' | 'aarch64',
+    status: host.status,
+    cert_path: host.certPath,
+    key_path: host.keyPath,
+    nat_public_ip: host.natPublicIp,
+    nat_public_ipv6: host.natPublicIpv6,
+    nat_bind_ip: host.natBindIp,
+    nat_bind_ipv6: host.natBindIpv6,
+    nat_port_start: host.natPortStart,
+    nat_port_end: host.natPortEnd,
+    cpu_used: host.cpuUsed,
+    memory_used: host.memoryUsed,
+    disk_used: host.diskUsed,
+    created_at: host.createdAt.toISOString(),
+    updated_at: host.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 根据安装token获取主机
+ */
+export async function getHostByInstallToken(token: string): Promise<{
+  id: number
+  name: string
+  storage_driver: string
+  storage_type: string
+  storage_path: string | null
+  storage_size: number
+  ipv6_mode: number
+  ipv6_subnet: string | null
+  ipv6_gateway: string | null
+  enable_api: boolean
+  sysctl_config: string | null
+  install_token_expire: Date | null
+} | null> {
+  const host = await prisma.host.findUnique({
+    where: { installToken: token },
+    select: {
+      id: true,
+      name: true,
+      storageDriver: true,
+      storageType: true,
+      storagePath: true,
+      storageSize: true,
+      ipv6Mode: true,
+      ipv6Subnet: true,
+      ipv6Gateway: true,
+      enableApi: true,
+      sysctlConfig: true,
+      installTokenExpire: true
+    }
+  })
+
+  if (!host) return null
+
+  return {
+    id: host.id,
+    name: host.name,
+    storage_driver: host.storageDriver,
+    storage_type: host.storageType,
+    storage_path: host.storagePath,
+    storage_size: host.storageSize,
+    ipv6_mode: host.ipv6Mode,
+    ipv6_subnet: host.ipv6Subnet,
+    ipv6_gateway: host.ipv6Gateway,
+    enable_api: host.enableApi,
+    sysctl_config: host.sysctlConfig,
+    install_token_expire: host.installTokenExpire
+  }
+}
+
+/**
+ * 创建主机
+ */
+export async function createHost(data: {
+  userId: number  // 所有�?
+  name: string
+  url: string
+  location?: string | null
+  countryCode?: string
+  architecture?: 'x86_64' | 'aarch64'
+  tags?: string[]
+  certPath?: string | null
+  keyPath?: string | null
+  natPublicIp?: string | null
+  natPublicIpv6?: string | null
+  natBindIp?: string | null
+  natBindIpv6?: string | null
+  natPortStart?: number | null
+  natPortEnd?: number | null
+  ipAddress?: string | null
+  storageDriver?: string
+  storageType?: string
+  storagePath?: string | null
+  storageSize?: number
+  ipv6Mode?: number
+  ipv6Subnet?: string | null
+  ipv6Gateway?: string | null
+  ipv6ParentInterface?: string | null
+  enableApi?: boolean
+  sysctlConfig?: string | null
+  installToken?: string | null
+  installTokenExpire?: Date | null
+  isInstalled?: boolean
+  certDownloadCount?: number
+  certDownloadExpire?: Date | null
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+}, client: DbClient = prisma): Promise<number> {
+  const createData: any = {
+    userId: data.userId,
+    name: data.name,
+    url: data.url,
+    location: data.location ?? null,
+    countryCode: data.countryCode ?? 'us',
+    architecture: data.architecture ?? 'x86_64',
+    tags: (data.tags || []) as unknown as any,
+    certPath: data.certPath ?? null,
+    keyPath: data.keyPath ?? null,
+    natPublicIp: data.natPublicIp ?? null,
+    natPublicIpv6: data.natPublicIpv6 ?? null,
+    natBindIp: data.natBindIp ?? null,
+    natBindIpv6: data.natBindIpv6 ?? null,
+    natPortStart: data.natPortStart ?? null,
+    natPortEnd: data.natPortEnd ?? null,
+    ipAddress: data.ipAddress ?? null,
+    storageDriver: data.storageDriver ?? 'zfs',
+    storageType: data.storageType ?? 'loop',
+    storagePath: data.storagePath ?? null,
+    storageSize: data.storageSize ?? 60,
+    ipv6Mode: data.ipv6Mode ?? 1,
+    ipv6Subnet: data.ipv6Subnet ?? null,
+    ipv6Gateway: data.ipv6Gateway ?? null,
+    ipv6ParentInterface: data.ipv6ParentInterface ?? null,
+    enableApi: data.enableApi !== undefined ? data.enableApi : true,
+    sysctlConfig: data.sysctlConfig ?? null,
+    installToken: data.installToken ?? null,
+    installTokenExpire: data.installTokenExpire ?? null,
+    isInstalled: data.isInstalled ?? false,
+    certDownloadCount: data.certDownloadCount ?? 0,
+    certDownloadExpire: data.certDownloadExpire ?? null,
+    cpuAllowanceMax: data.cpuAllowanceMax ?? 0,
+    memoryMax: data.memoryMax ?? 0,
+    instanceType: data.instanceType ?? 'container',
+    status: 'offline'
+  }
+
+  const host = await client.host.create({
+    data: createData
+  })
+
+  return host.id
+}
+
+/**
+ * 更新主机
+ */
+export async function updateHost(id: number, data: {
+  name?: string
+  url?: string
+  location?: string | null
+  countryCode?: string
+  tags?: string[]
+  certPath?: string | null
+  keyPath?: string | null
+  natPublicIp?: string | null
+  natPublicIpv6?: string | null
+  natBindIp?: string | null
+  natBindIpv6?: string | null
+  natPortStart?: number | null
+  natPortEnd?: number | null
+  ipv6ParentInterface?: string | null
+  ipv6Subnet?: string | null
+  trafficResetDay?: number
+  notifyPurchase?: boolean
+  notifyRenew?: boolean
+  notifyDestroy?: boolean
+}, client: DbClient = prisma): Promise<void> {
+  const updateData: {
+    name?: string
+    url?: string
+    location?: string | null
+    countryCode?: string
+    tags?: any
+    certPath?: string | null
+    keyPath?: string | null
+    natPublicIp?: string | null
+    natPublicIpv6?: string | null
+    natBindIp?: string | null
+    natBindIpv6?: string | null
+    natPortStart?: number | null
+    natPortEnd?: number | null
+    ipv6ParentInterface?: string | null
+    ipv6Subnet?: string | null
+    trafficResetDay?: number
+    notifyPurchase?: boolean
+    notifyRenew?: boolean
+    notifyDestroy?: boolean
+  } = {}
+
+  if (data.name !== undefined) updateData.name = data.name
+  if (data.url !== undefined) updateData.url = data.url
+  if (data.location !== undefined) updateData.location = data.location ?? null
+  if (data.countryCode !== undefined) updateData.countryCode = data.countryCode
+  if (data.tags !== undefined) updateData.tags = data.tags as unknown as any
+  if (data.certPath !== undefined) updateData.certPath = data.certPath ?? null
+  if (data.keyPath !== undefined) updateData.keyPath = data.keyPath ?? null
+  if (data.natPublicIp !== undefined) updateData.natPublicIp = data.natPublicIp ?? null
+  if (data.natPublicIpv6 !== undefined) updateData.natPublicIpv6 = data.natPublicIpv6 ?? null
+  if (data.natBindIp !== undefined) updateData.natBindIp = data.natBindIp ?? null
+  if (data.natBindIpv6 !== undefined) updateData.natBindIpv6 = data.natBindIpv6 ?? null
+  if (data.natPortStart !== undefined) updateData.natPortStart = data.natPortStart ?? null
+  if (data.natPortEnd !== undefined) updateData.natPortEnd = data.natPortEnd ?? null
+  if (data.ipv6ParentInterface !== undefined) updateData.ipv6ParentInterface = data.ipv6ParentInterface ?? null
+  if (data.ipv6Subnet !== undefined) updateData.ipv6Subnet = data.ipv6Subnet ?? null
+  if (data.trafficResetDay !== undefined) updateData.trafficResetDay = data.trafficResetDay
+  if (data.notifyPurchase !== undefined) updateData.notifyPurchase = data.notifyPurchase
+  if (data.notifyRenew !== undefined) updateData.notifyRenew = data.notifyRenew
+  if (data.notifyDestroy !== undefined) updateData.notifyDestroy = data.notifyDestroy
+
+  if (Object.keys(updateData).length === 0) return
+
+  await client.host.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 更新主机状�?
+ */
+export async function updateHostStatus(
+  id: number,
+  status: 'online' | 'offline' | 'maintenance'
+): Promise<void> {
+  await prisma.host.update({
+    where: { id },
+    data: { status }
+  })
+}
+
+/**
+ * 基于数据库实例统计节点的已用资源（排除已删除的实例）
+ */
+export async function calculateHostResourcesFromInstances(hostId: number): Promise<{
+  cpuUsed: number
+  memoryUsed: number
+  diskUsed: number
+}> {
+  const result = await prisma.instance.aggregate({
+    where: {
+      hostId,
+      status: { not: 'deleted' }
+    },
+    _sum: {
+      cpu: true,
+      memory: true,
+      disk: true
+    }
+  })
+
+  return {
+    cpuUsed: result._sum.cpu ?? 0,
+    memoryUsed: result._sum.memory ?? 0,
+    diskUsed: result._sum.disk ?? 0
+  }
+}
+
+/**
+ * 更新主机资源
+ */
+export async function updateHostResources(id: number, resources: {
+  cpuUsed?: number
+  memoryUsed?: number
+  diskUsed?: number
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: string
+  architecture?: 'x86_64' | 'aarch64'
+}, client: DbClient = prisma): Promise<void> {
+  const updateData: {
+    cpuUsed?: number
+    memoryUsed?: number
+    diskUsed?: number
+    cpuAllowanceMax?: number
+    memoryMax?: number
+    instanceType?: 'container' | 'vm' | 'both'
+    architecture?: 'x86_64' | 'aarch64'
+  } = {}
+
+  if (resources.cpuUsed !== undefined) updateData.cpuUsed = resources.cpuUsed
+  if (resources.memoryUsed !== undefined) updateData.memoryUsed = resources.memoryUsed
+  if (resources.diskUsed !== undefined) updateData.diskUsed = resources.diskUsed
+  if (resources.cpuAllowanceMax !== undefined) updateData.cpuAllowanceMax = resources.cpuAllowanceMax
+  if (resources.memoryMax !== undefined) updateData.memoryMax = resources.memoryMax
+  if (resources.instanceType !== undefined) {
+    updateData.instanceType = resources.instanceType as 'container' | 'vm' | 'both'
+  }
+  if (resources.architecture !== undefined) updateData.architecture = resources.architecture
+
+  if (Object.keys(updateData).length === 0) return
+
+  await client.host.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 删除主机
+ * 注意：在删除宿主机之前，必须先删除所有关联的记录以解除外键约�?
+ */
+export async function deleteHost(id: number): Promise<void> {
+  // 1. 先删除所有端口映射（PortMapping 的外键到 Host �?RESTRICT�?
+  await prisma.portMapping.deleteMany({
+    where: { hostId: id }
+  })
+  
+  // 2. 删除所有关联的实例记录（包括已删除状态的�?
+  // 这会自动删除关联的快照、备份、端口映射等（通过 Cascade�?
+  await prisma.instance.deleteMany({
+    where: { hostId: id }
+  })
+  
+  // 3. 删除宿主机（会自动删除关联的 PackageHost，因为它�?Cascade�?
+  await prisma.host.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 获取主机的实例数�?
+ */
+export async function getInstanceCountByHost(hostId: number): Promise<number> {
+  const count = await prisma.instance.count({
+    where: {
+      hostId,
+      status: { not: 'deleted' }
+    }
+  })
+
+  return count
+}
+
+/**
+ * 获取主机的所有实�?
+ */
+export async function getInstancesByHost(hostId: number): Promise<unknown[]> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      hostId,
+      status: { not: 'deleted' }
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+
+  return instances as unknown[]
+}
+
+/**
+ * 增加宿主�?NAT 端口使用计数
+ */
+export async function incrementHostPortCount(hostId: number, count: number = 1): Promise<void> {
+  await prisma.host.update({
+    where: { id: hostId },
+    data: {
+      natPortsUsedCount: {
+        increment: count
+      }
+    }
+  })
+}
+
+/**
+ * 减少宿主�?NAT 端口使用计数
+ */
+export async function decrementHostPortCount(hostId: number, count: number = 1): Promise<void> {
+  // 先获取当前值，确保不会小于 0
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: { natPortsUsedCount: true }
+  })
+
+  if (!host) return
+
+  const newCount = Math.max(0, host.natPortsUsedCount - count)
+
+  await prisma.host.update({
+    where: { id: hostId },
+    data: {
+      natPortsUsedCount: newCount
+    }
+  })
+}
+
+
+/**
+ * 智能选择可用宿主�?
+ * 考虑节点组、标签选择器、资源容�?
+ * 
+ * 安全说明�?
+ * - ownerId 参数用于限制只能在指定用户的宿主机上创建实例
+ * - 当使用共享套餐时，必须传入套餐所有者的ID，确保实例只能创建在套餐所有者的宿主机上
+ * 
+ * 注意：NAT端口检查已移除，系统使用独立的端口映射表记录端口分�?
+ */
+export async function selectAvailableHost(options: {
+  packageHostIds?: number[]  // 套餐绑定的宿主机ID列表
+  nodeSelectors?: string[]
+  cpu: number
+  memory: number
+  disk: number
+  hostId?: number | null
+  ownerId?: number  // 套餐所有者ID，用于限制只能在该用户的宿主机上创建实例
+}): Promise<(Host & { cpu_allowance_max?: number; memory_max?: number }) | null> {
+  const { packageHostIds, nodeSelectors = [], cpu, memory, disk, hostId, ownerId } = options
+
+  // 构建查询条件
+  const where: {
+    status: 'online'
+    id?: number | { in: number[] }
+    userId?: number
+    tags?: { path: string[]; array_contains: string }
+  } = {
+    status: 'online'
+  }
+
+  // 安全检查：用户指定�?hostId 必须在套餐绑定的宿主机列表中
+  if (hostId) {
+    // 如果套餐绑定了宿主机，用户指定的 hostId 必须在列表中
+    if (packageHostIds && packageHostIds.length > 0) {
+      if (!packageHostIds.includes(hostId)) {
+        console.log(`[selectAvailableHost] 安全拒绝: hostId=${hostId} 不在套餐绑定的宿主机列表 [${packageHostIds.join(', ')}] 中`)
+        return null  // 拒绝不在套餐绑定列表中的宿主�?
+      }
+    }
+    where.id = hostId
+  } else if (packageHostIds && packageHostIds.length > 0) {
+    // 如果套餐绑定了宿主机，只在这些宿主机中选择
+    where.id = { in: packageHostIds }
+  } else if (ownerId) {
+    // 套餐没有绑定宿主机时，限制只能在套餐所有者的宿主机上创建实例
+    where.userId = ownerId
+  }
+
+  // 获取候选宿主机（包含实例信息用于实时计算资源使用量�?
+  const hosts = await prisma.host.findMany({
+    where,
+    include: {
+      instances: {
+        where: {
+          status: { not: 'deleted' }
+        },
+        select: {
+          cpu: true,
+          memory: true,
+          disk: true
+        }
+      }
+    },
+    orderBy: [
+      { memoryUsed: 'asc' }, // 优先选择负载较低�?
+      { cpuUsed: 'asc' }
+    ]
+  })
+
+  // 过滤和评�?
+  for (const host of hosts) {
+    // 检查标签选择�?
+    if (nodeSelectors.length > 0) {
+      const hostTags = (host.tags as string[]) || []
+      const hasAllTags = nodeSelectors.every(tag => hostTags.includes(tag))
+      if (!hasAllTags) {
+        console.log(`[selectAvailableHost] 宿主�?${host.name} 不满足标签选择器要求`)
+        continue
+      }
+    }
+
+    // 计算资源使用�?= 关联该宿主机的实例的资源总和
+    const cpuUsedCalculated = host.instances.reduce((sum, inst) => sum + inst.cpu, 0)
+    const memoryUsedCalculated = host.instances.reduce((sum, inst) => sum + inst.memory, 0)
+    const diskUsedCalculated = host.instances.reduce((sum, inst) => sum + inst.disk, 0)
+    const cpuUsedEffective = Math.max(cpuUsedCalculated, host.cpuUsed ?? 0)
+    const memoryUsedEffective = Math.max(memoryUsedCalculated, host.memoryUsed ?? 0)
+    const diskUsedEffective = Math.max(diskUsedCalculated, host.diskUsed ?? 0)
+
+    console.log(`[selectAvailableHost] 检查宿主机 ${host.name} (ID: ${host.id})`)
+    console.log(`  资源使用�? CPU=${cpuUsedCalculated}%, Memory=${memoryUsedCalculated}MB, Disk=${diskUsedCalculated}MB`)
+    console.log(`  请求资源: CPU=${cpu}%, Memory=${memory}MB, Disk=${disk}MB`)
+    console.log(`  配额配置: cpuAllowanceMax=${host.cpuAllowanceMax}, memoryMax=${host.memoryMax}, storageSize=${host.storageSize}GB`)
+
+    // 检�?CPU 配额
+    // 剩余�?= 用户输入的CPU配额上限 - 实例资源总和
+    const cpuAllowanceMax = host.cpuAllowanceMax
+    if (cpuAllowanceMax != null && cpuAllowanceMax > 0) {
+      // 剩余CPU配额 = cpuAllowanceMax - cpuUsedCalculated
+      // 需要满足：剩余CPU配额 >= 请求的CPU
+      if ((cpuUsedEffective + cpu) > cpuAllowanceMax) {
+        console.log(`[selectAvailableHost] 宿主�?${host.name} CPU配额不足: ${cpuUsedEffective} + ${cpu} > ${cpuAllowanceMax}`)
+        continue // CPU配额不足
+      }
+    } else {
+      // 如果没有设置CPU配额上限，该宿主机不可用（必须设置配额）
+      console.log(`[selectAvailableHost] 宿主�?${host.name} 未设置CPU配额上限`)
+      continue
+    }
+
+    // 检查内存配�?
+    // 剩余�?= 用户输入的内存配额上�?- 实例资源总和
+    const memoryMax = host.memoryMax
+    if (memoryMax != null && memoryMax > 0) {
+      // 剩余内存配额 = memoryMax - memoryUsedCalculated
+      // 需要满足：剩余内存配额 >= 请求的内�?
+      if ((memoryUsedEffective + memory) > memoryMax) {
+        console.log(`[selectAvailableHost] 宿主�?${host.name} 内存配额不足: ${memoryUsedEffective} + ${memory} > ${memoryMax}`)
+        continue // 内存配额不足
+      }
+    } else {
+      // 如果没有设置内存配额上限，该宿主机不可用（必须设置配额）
+      console.log(`[selectAvailableHost] 宿主�?${host.name} 未设置内存配额上限`)
+      continue
+    }
+
+    // 磁盘配额检查已移除：不再限制磁盘空�?
+
+    // NAT端口检查已移除：系统使用独立的端口映射表记录端口分配，不再限制NAT端口数量
+    console.log(`[selectAvailableHost] 宿主�?${host.name} 通过所有检查，可以使用`)
+
+    // 找到合适的宿主�?
+    return {
+      id: host.id,
+      name: host.name,
+      url: host.url,
+      location: host.location,
+      country_code: host.countryCode,
+      status: host.status,
+      cert_path: host.certPath,
+      key_path: host.keyPath,
+      nat_public_ip: host.natPublicIp,
+      nat_port_start: host.natPortStart,
+      nat_port_end: host.natPortEnd,
+      cpu_used: cpuUsedEffective,  // 实例资源总和
+      memory_used: memoryUsedEffective,  // 实例资源总和
+      disk_total: host.storageSize ? host.storageSize * 1024 : 0,  // 只使�?storageSize（GB转MB�?
+      disk_used: diskUsedEffective,  // 实例资源总和
+      created_at: host.createdAt.toISOString(),
+      updated_at: host.updatedAt.toISOString(),
+      cpu_allowance_max: host.cpuAllowanceMax,
+      memory_max: host.memoryMax,
+      ipv6_mode: host.ipv6Mode,
+      ipv6_subnet: host.ipv6Subnet,
+      ipv6_gateway: host.ipv6Gateway,
+      ipv6_parent_interface: host.ipv6ParentInterface,
+      instance_type: host.instanceType  // 添加实例类型字段
+    }
+  }
+
+  return null
+}
+
+/**
+ * 带行锁的宿主机选择和资源预占（原子操作�?
+ * 解决并发创建实例时的资源超额问题
+ * 
+ * 关键改进�?
+ * - 使用 FOR UPDATE 行锁防止并发资源分配
+ * - 在同一事务中完成资源检查和预占
+ * - 基于实时计算的实例资源总和进行检�?
+ * 
+ * @param tx - Prisma 事务客户�?
+ * @param options - 选择条件和请求的资源
+ * @returns 选中的宿主机�?null
+ */
+export async function selectAndReserveHostWithLock(
+  tx: Omit<typeof prisma, '$connect' | '$disconnect' | '$on' | '$transaction' | '$use' | '$extends'>,
+  options: {
+    packageHostIds?: number[]
+    nodeSelectors?: string[]
+    cpu: number
+    memory: number
+    disk: number
+    hostId?: number | null
+    ownerId?: number
+    portCount?: number
+  }
+): Promise<(Host & { cpu_allowance_max?: number; memory_max?: number }) | null> {
+  const { packageHostIds, nodeSelectors = [], cpu, memory, disk, hostId, ownerId, portCount = 0 } = options
+
+  // 构建候选宿主机查询条件
+  const whereConditions: string[] = ["status = 'online'"]
+  const params: unknown[] = []
+  
+  if (hostId) {
+    // 用户指定了特定宿主机
+    if (packageHostIds && packageHostIds.length > 0 && !packageHostIds.includes(hostId)) {
+      console.log(`[selectAndReserveHostWithLock] 安全拒绝: hostId=${hostId} 不在套餐绑定列表中`)
+      return null
+    }
+    whereConditions.push(`id = $${params.length + 1}`)
+    params.push(hostId)
+  } else if (packageHostIds && packageHostIds.length > 0) {
+    whereConditions.push(`id = ANY($${params.length + 1}::int[])`)
+    params.push(packageHostIds)
+  } else if (ownerId) {
+    // 套餐没有绑定宿主机时，限制只能在套餐所有者的宿主机上创建实例
+    whereConditions.push(`user_id = $${params.length + 1}`)
+    params.push(ownerId)
+  }
+
+  // 使用 FOR UPDATE 锁定候选宿主机记录
+  // 按负载排序，优先选择低负载的节点
+  const lockQuery = `
+    SELECT id, name, url, location, country_code, status, cert_path, key_path,
+           nat_public_ip, nat_port_start, nat_port_end, 
+           cpu_used, memory_used, disk_used,
+           cpu_allowance_max, memory_max, storage_size,
+           ipv6_mode, ipv6_subnet, ipv6_gateway, ipv6_parent_interface,
+           instance_type, tags, nat_ports_used_count,
+           created_at, updated_at
+    FROM hosts
+    WHERE ${whereConditions.join(' AND ')}
+    ORDER BY memory_used ASC, cpu_used ASC
+    FOR UPDATE
+  `
+  
+  const hosts = await tx.$queryRawUnsafe<Array<{
+    id: number
+    name: string
+    url: string
+    location: string | null
+    country_code: string
+    status: 'online' | 'offline' | 'maintenance'
+    cert_path: string | null
+    key_path: string | null
+    nat_public_ip: string | null
+    nat_port_start: number | null
+    nat_port_end: number | null
+    cpu_used: number
+    memory_used: number
+    disk_used: number
+    cpu_allowance_max: number | null
+    memory_max: number | null
+    storage_size: number | null
+    ipv6_mode: number
+    ipv6_subnet: string | null
+    ipv6_gateway: string | null
+    ipv6_parent_interface: string | null
+    instance_type: string
+    tags: unknown
+    nat_ports_used_count: number
+    created_at: Date
+    updated_at: Date
+  }>>(lockQuery, ...params)
+
+  console.log(`[selectAndReserveHostWithLock] 锁定 ${hosts.length} 个候选宿主机`)
+
+  // 遍历候选宿主机，检查资源并预占
+  for (const host of hosts) {
+    // 检查标签选择�?
+    if (nodeSelectors.length > 0) {
+      const hostTags = (host.tags as string[]) || []
+      const hasAllTags = nodeSelectors.every(tag => hostTags.includes(tag))
+      if (!hasAllTags) {
+        console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} 不满足标签选择器要求`)
+        continue
+      }
+    }
+
+    // 实时计算该宿主机上所有活跃实例的资源总和
+    const resourceSum = await tx.instance.aggregate({
+      where: {
+        hostId: host.id,
+        status: { not: 'deleted' }
+      },
+      _sum: {
+        cpu: true,
+        memory: true,
+        disk: true
+      }
+    })
+
+    const cpuUsedCalculated = resourceSum._sum.cpu ?? 0
+    const memoryUsedCalculated = resourceSum._sum.memory ?? 0
+    const diskUsedCalculated = resourceSum._sum.disk ?? 0
+    const cpuUsedEffective = Math.max(cpuUsedCalculated, host.cpu_used ?? 0)
+    const memoryUsedEffective = Math.max(memoryUsedCalculated, host.memory_used ?? 0)
+    const diskUsedEffective = Math.max(diskUsedCalculated, host.disk_used ?? 0)
+
+    console.log(`[selectAndReserveHostWithLock] 检查宿主机 ${host.name} (ID: ${host.id})`)
+    console.log(`  实时资源使用�? CPU=${cpuUsedCalculated}%, Memory=${memoryUsedCalculated}MB, Disk=${diskUsedCalculated}MB`)
+    console.log(`  请求资源: CPU=${cpu}%, Memory=${memory}MB, Disk=${disk}MB`)
+    console.log(`  配额配置: cpuAllowanceMax=${host.cpu_allowance_max}, memoryMax=${host.memory_max}`)
+
+    // 检�?CPU 配额
+    const cpuAllowanceMax = host.cpu_allowance_max ?? 0
+    if (cpuAllowanceMax <= 0) {
+      console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} 未设置CPU配额上限`)
+      continue
+    }
+    if ((cpuUsedEffective + cpu) > cpuAllowanceMax) {
+      console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} CPU配额不足: ${cpuUsedEffective} + ${cpu} > ${cpuAllowanceMax}`)
+      continue
+    }
+
+    // 检查内存配�?
+    const memoryMax = host.memory_max ?? 0
+    if (memoryMax <= 0) {
+      console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} 未设置内存配额上限`)
+      continue
+    }
+    if ((memoryUsedEffective + memory) > memoryMax) {
+      console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} 内存配额不足: ${memoryUsedEffective} + ${memory} > ${memoryMax}`)
+      continue
+    }
+
+    // 检�?NAT 端口配额（如果需要）
+    if (portCount > 0) {
+      const natPortsTotal = (host.nat_port_start && host.nat_port_end) 
+        ? (host.nat_port_end - host.nat_port_start + 1) 
+        : 0
+      if (host.nat_ports_used_count + portCount > natPortsTotal) {
+        console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} NAT端口不足`)
+        continue
+      }
+    }
+
+    console.log(`[selectAndReserveHostWithLock] 宿主�?${host.name} 通过检查，执行资源预占`)
+
+    // 资源检查通过，更新宿主机资源使用量（在同一事务中原子执行）
+    await tx.host.update({
+      where: { id: host.id },
+      data: {
+        cpuUsed: cpuUsedEffective + cpu,
+        memoryUsed: memoryUsedEffective + memory,
+        diskUsed: diskUsedEffective + disk,
+        ...(portCount > 0 ? { natPortsUsedCount: host.nat_ports_used_count + portCount } : {})
+      }
+    })
+
+    console.log(`[selectAndReserveHostWithLock] 资源预占成功: ${host.name}`)
+
+    // 返回选中的宿主机
+    return {
+      id: host.id,
+      name: host.name,
+      url: host.url,
+      location: host.location,
+      country_code: host.country_code,
+      status: host.status,
+      cert_path: host.cert_path,
+      key_path: host.key_path,
+      nat_public_ip: host.nat_public_ip,
+      nat_port_start: host.nat_port_start,
+      nat_port_end: host.nat_port_end,
+      cpu_used: cpuUsedEffective + cpu,
+      memory_used: memoryUsedEffective + memory,
+      disk_used: diskUsedEffective + disk,
+      created_at: host.created_at.toISOString(),
+      updated_at: host.updated_at.toISOString(),
+      cpu_allowance_max: host.cpu_allowance_max ?? undefined,
+      memory_max: host.memory_max ?? undefined,
+      ipv6_mode: host.ipv6_mode,
+      ipv6_subnet: host.ipv6_subnet,
+      ipv6_gateway: host.ipv6_gateway,
+      ipv6_parent_interface: host.ipv6_parent_interface,
+      instance_type: host.instance_type as 'container' | 'vm' | 'both'
+    }
+  }
+
+  console.log(`[selectAndReserveHostWithLock] 没有可用的宿主机`)
+  return null
+}
diff --git a/server/src/db/images.ts b/server/src/db/images.ts
new file mode 100644
index 0000000..957225d
--- /dev/null
+++ b/server/src/db/images.ts
@@ -0,0 +1,539 @@
+/**
+ * 镜像相关数据库操作
+ * 包含系统镜像 CRUD、节点镜像白名单和使用检查
+ */
+
+import { prisma } from './prisma.js'
+import type { SystemImage } from '@prisma/client'
+import { normalizeArchitecture, type SupportedArchitecture } from '../lib/architecture.js'
+
+type ImageType = 'container' | 'vm' | 'both'
+
+export interface HostImageSelectionState {
+  hostId: number
+  hostName: string
+  architecture: SupportedArchitecture
+  instanceType: ImageType
+  useDefault: boolean
+  allowedImageIds: number[]
+  images: SystemImage[]
+}
+
+export type ImageAvailabilityFailureReason =
+  | 'host_not_found'
+  | 'image_not_found'
+  | 'architecture_mismatch'
+  | 'host_instance_type_mismatch'
+  | 'instance_type_mismatch'
+  | 'memory_incompatible'
+  | 'not_allowed'
+
+export type HostImageAvailability =
+  | {
+      ok: true
+      hostId: number
+      imageId: number
+      architecture: SupportedArchitecture
+      useDefault: boolean
+    }
+  | {
+      ok: false
+      reason: ImageAvailabilityFailureReason
+    }
+
+// ==================== 系统镜像管理 ====================
+
+/**
+ * 获取所有系统镜像（排序）
+ */
+export async function getAllSystemImages(): Promise<SystemImage[]> {
+  return prisma.systemImage.findMany({
+    orderBy: [
+      { sortOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+}
+
+// 128MB 内存限制只能使用的发行版（轻量级系统）
+const LOW_MEMORY_ALLOWED_DISTROS = ['alpine', 'debian']
+const LOW_MEMORY_THRESHOLD = 128 // MB
+
+function getImageInstanceType(image: Pick<SystemImage, 'instanceType'>): ImageType {
+  return (image.instanceType || 'both') as ImageType
+}
+
+function getHostInstanceType(host: { instanceType: string | null }): ImageType {
+  return (host.instanceType || 'container') as ImageType
+}
+
+function isImageCompatibleWithTargetType(imageType: ImageType, targetType: ImageType): boolean {
+  if (targetType === 'both') {
+    return true
+  }
+
+  return imageType === 'both' || imageType === targetType
+}
+
+function isImageCompatibleWithLowMemory(image: Pick<SystemImage, 'icon'>, memory?: number): boolean {
+  if (memory === undefined || memory > LOW_MEMORY_THRESHOLD) {
+    return true
+  }
+
+  const icon = image.icon?.toLowerCase() || ''
+  return LOW_MEMORY_ALLOWED_DISTROS.includes(icon)
+}
+
+/**
+ * 获取所有可见的系统镜像
+ * @param instanceType 可选，按实例类型过滤 (container/vm)
+ * @param memory 可选，内存大小(MB)，128MB 时只返回 Alpine/Debian
+ * @param hostId 可选，按节点的架构和镜像白名单过滤
+ */
+export async function getVisibleSystemImages(
+  instanceType?: 'container' | 'vm',
+  memory?: number,
+  hostId?: number
+): Promise<SystemImage[]> {
+  if (!hostId) {
+    const where: { hidden: boolean; instanceType?: { in: string[] }; icon?: { in: string[] } } = { hidden: false }
+
+    if (instanceType) {
+      where.instanceType = { in: [instanceType, 'both'] }
+    }
+
+    if (memory !== undefined && memory <= LOW_MEMORY_THRESHOLD) {
+      where.icon = { in: LOW_MEMORY_ALLOWED_DISTROS }
+    }
+
+    return prisma.systemImage.findMany({
+      where,
+      orderBy: [
+        { sortOrder: 'asc' },
+        { id: 'asc' }
+      ]
+    })
+  }
+
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: {
+      architecture: true,
+      instanceType: true,
+      allowedImages: {
+        select: {
+          imageId: true
+        }
+      }
+    }
+  })
+
+  if (!host) {
+    return []
+  }
+
+  const hostArchitecture = normalizeArchitecture(host.architecture)
+  const hostInstanceType = getHostInstanceType(host)
+  const allowedImageIds = host.allowedImages.map(item => item.imageId)
+
+  const where: {
+    hidden: boolean
+    architecture: string
+    icon?: { in: string[] }
+    id?: { in: number[] }
+  } = {
+    hidden: false,
+    architecture: hostArchitecture
+  }
+
+  if (memory !== undefined && memory <= LOW_MEMORY_THRESHOLD) {
+    where.icon = { in: LOW_MEMORY_ALLOWED_DISTROS }
+  }
+
+  if (allowedImageIds.length > 0) {
+    where.id = { in: allowedImageIds }
+  }
+
+  const images = await prisma.systemImage.findMany({
+    where,
+    orderBy: [
+      { sortOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+
+  return images.filter(image => {
+    const imageType = getImageInstanceType(image)
+
+    if (!isImageCompatibleWithTargetType(imageType, hostInstanceType)) {
+      return false
+    }
+
+    if (instanceType && !isImageCompatibleWithTargetType(imageType, instanceType)) {
+      return false
+    }
+
+    return true
+  })
+}
+
+/**
+ * 获取节点镜像白名单配置
+ */
+export async function getHostImageSelectionState(hostId: number): Promise<HostImageSelectionState | null> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: {
+      id: true,
+      name: true,
+      architecture: true,
+      instanceType: true,
+      allowedImages: {
+        select: {
+          imageId: true
+        }
+      }
+    }
+  })
+
+  if (!host) {
+    return null
+  }
+
+  const hostArchitecture = normalizeArchitecture(host.architecture)
+  const hostInstanceType = getHostInstanceType(host)
+  const rawAllowedImageIds = host.allowedImages.map(item => item.imageId)
+
+  const images = await prisma.systemImage.findMany({
+    where: {
+      hidden: false,
+      architecture: hostArchitecture
+    },
+    orderBy: [
+      { sortOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+
+  const compatibleImages = images.filter(image => isImageCompatibleWithTargetType(getImageInstanceType(image), hostInstanceType))
+  const compatibleImageIds = new Set(compatibleImages.map(image => image.id))
+
+  return {
+    hostId: host.id,
+    hostName: host.name,
+    architecture: hostArchitecture,
+    instanceType: hostInstanceType,
+    useDefault: rawAllowedImageIds.length === 0,
+    allowedImageIds: rawAllowedImageIds.filter(imageId => compatibleImageIds.has(imageId)),
+    images: compatibleImages
+  }
+}
+
+/**
+ * 保存节点镜像白名单配置
+ */
+export async function saveHostAllowedImages(hostId: number, useDefault: boolean, imageIds: number[]): Promise<HostImageSelectionState | null> {
+  const selectionState = await getHostImageSelectionState(hostId)
+
+  if (!selectionState) {
+    return null
+  }
+
+  const allowedCandidateIds = new Set(selectionState.images.map(image => image.id))
+  const normalizedImageIds = [...new Set(imageIds)]
+
+  for (const imageId of normalizedImageIds) {
+    if (!allowedCandidateIds.has(imageId)) {
+      throw new Error(`INVALID_IMAGE_FOR_HOST:${imageId}`)
+    }
+  }
+
+  await prisma.$transaction(async tx => {
+    await tx.hostAllowedImage.deleteMany({
+      where: { hostId }
+    })
+
+    if (!useDefault && normalizedImageIds.length > 0) {
+      await tx.hostAllowedImage.createMany({
+        data: normalizedImageIds.map(imageId => ({
+          hostId,
+          imageId
+        })),
+        skipDuplicates: true
+      })
+    }
+  })
+
+  return getHostImageSelectionState(hostId)
+}
+
+/**
+ * 检查镜像是否可用于指定节点
+ */
+export async function getSystemImageAvailabilityForHost(
+  remoteAlias: string,
+  hostId: number,
+  options: {
+    instanceType?: 'container' | 'vm'
+    memory?: number
+  } = {}
+): Promise<HostImageAvailability> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: {
+      id: true,
+      architecture: true,
+      instanceType: true,
+      allowedImages: {
+        select: {
+          imageId: true
+        }
+      }
+    }
+  })
+
+  if (!host) {
+    return { ok: false, reason: 'host_not_found' }
+  }
+
+  const image = await prisma.systemImage.findUnique({
+    where: { remoteAlias },
+    select: {
+      id: true,
+      hidden: true,
+      architecture: true,
+      instanceType: true,
+      icon: true
+    }
+  })
+
+  if (!image || image.hidden) {
+    return { ok: false, reason: 'image_not_found' }
+  }
+
+  const hostArchitecture = normalizeArchitecture(host.architecture)
+  const imageArchitecture = normalizeArchitecture(image.architecture)
+  if (imageArchitecture !== hostArchitecture) {
+    return { ok: false, reason: 'architecture_mismatch' }
+  }
+
+  const hostInstanceType = getHostInstanceType(host)
+  const imageType = getImageInstanceType(image)
+
+  if (!isImageCompatibleWithTargetType(imageType, hostInstanceType)) {
+    return { ok: false, reason: 'host_instance_type_mismatch' }
+  }
+
+  if (options.instanceType && !isImageCompatibleWithTargetType(imageType, options.instanceType)) {
+    return { ok: false, reason: 'instance_type_mismatch' }
+  }
+
+  if (!isImageCompatibleWithLowMemory(image, options.memory)) {
+    return { ok: false, reason: 'memory_incompatible' }
+  }
+
+  const allowedImageIds = host.allowedImages.map(item => item.imageId)
+  if (allowedImageIds.length > 0 && !allowedImageIds.includes(image.id)) {
+    return { ok: false, reason: 'not_allowed' }
+  }
+
+  return {
+    ok: true,
+    hostId: host.id,
+    imageId: image.id,
+    architecture: hostArchitecture,
+    useDefault: allowedImageIds.length === 0
+  }
+}
+
+/**
+ * 根据 ID 获取系统镜像
+ */
+export async function getSystemImageById(id: number): Promise<SystemImage | null> {
+  return prisma.systemImage.findUnique({
+    where: { id }
+  })
+}
+
+/**
+ * 根据远程别名获取系统镜像
+ */
+export async function getSystemImageByRemoteAlias(remoteAlias: string): Promise<SystemImage | null> {
+  return prisma.systemImage.findUnique({
+    where: { remoteAlias }
+  })
+}
+
+/**
+ * 根据远程别名获取镜像显示名称
+ * 同时支持带 images: 前缀和不带前缀的格式
+ */
+export async function getImageDisplayName(imageAlias: string): Promise<string | null> {
+  const withoutPrefix = imageAlias.replace(/^images:/, '')
+
+  const image = await prisma.systemImage.findFirst({
+    where: {
+      OR: [
+        { remoteAlias: withoutPrefix },
+        { remoteAlias: imageAlias }
+      ]
+    }
+  })
+
+  return image?.name || null
+}
+
+/**
+ * 批量获取镜像显示名称
+ * @param imageAliases 镜像别名数组（可能包含 images: 前缀）
+ * @returns Map<原始别名, 显示名称>
+ */
+export async function getImageDisplayNames(imageAliases: string[]): Promise<Map<string, string>> {
+  const uniqueAliases = [...new Set(imageAliases)]
+  const allPossibleAliases: string[] = []
+
+  for (const alias of uniqueAliases) {
+    const withoutPrefix = alias.replace(/^images:/, '')
+    allPossibleAliases.push(withoutPrefix)
+    if (withoutPrefix !== alias) {
+      allPossibleAliases.push(alias)
+    }
+  }
+
+  const images = await prisma.systemImage.findMany({
+    where: {
+      remoteAlias: { in: allPossibleAliases }
+    },
+    select: {
+      name: true,
+      remoteAlias: true
+    }
+  })
+
+  const result = new Map<string, string>()
+  for (const alias of uniqueAliases) {
+    const withoutPrefix = alias.replace(/^images:/, '')
+    const image = images.find(item => item.remoteAlias === withoutPrefix || item.remoteAlias === alias)
+    if (image) {
+      result.set(alias, image.name)
+    }
+  }
+
+  return result
+}
+
+/**
+ * 创建系统镜像
+ */
+export async function createSystemImage(data: {
+  name: string
+  remoteAlias: string
+  osType?: string
+  architecture?: string
+  instanceType?: 'container' | 'vm' | 'both'
+  icon: string
+  sortOrder?: number
+  hidden?: boolean
+}): Promise<SystemImage> {
+  return prisma.systemImage.create({
+    data: {
+      name: data.name,
+      remoteAlias: data.remoteAlias,
+      osType: data.osType || 'Linux',
+      architecture: normalizeArchitecture(data.architecture),
+      instanceType: data.instanceType || 'both',
+      icon: data.icon,
+      sortOrder: data.sortOrder || 0,
+      hidden: data.hidden || false
+    }
+  })
+}
+
+/**
+ * 更新系统镜像
+ */
+export async function updateSystemImage(id: number, data: {
+  name?: string
+  remoteAlias?: string
+  osType?: string
+  architecture?: string
+  instanceType?: 'container' | 'vm' | 'both'
+  icon?: string
+  sortOrder?: number
+  hidden?: boolean
+}): Promise<SystemImage> {
+  return prisma.systemImage.update({
+    where: { id },
+    data: {
+      ...data,
+      ...(data.architecture !== undefined ? { architecture: normalizeArchitecture(data.architecture) } : {})
+    }
+  })
+}
+
+/**
+ * 删除系统镜像
+ */
+export async function deleteSystemImage(id: number): Promise<SystemImage> {
+  return prisma.systemImage.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 验证镜像是否在可用列表中（未隐藏）
+ */
+export async function isValidSystemImage(remoteAlias: string): Promise<boolean> {
+  const image = await prisma.systemImage.findUnique({
+    where: { remoteAlias }
+  })
+
+  return image !== null && !image.hidden
+}
+
+/**
+ * 验证镜像是否与套餐类型兼容
+ */
+export async function isImageCompatibleWithInstanceType(remoteAlias: string, instanceType: 'container' | 'vm'): Promise<boolean> {
+  const image = await prisma.systemImage.findUnique({
+    where: { remoteAlias }
+  })
+
+  if (!image || image.hidden) {
+    return false
+  }
+
+  return isImageCompatibleWithTargetType(getImageInstanceType(image), instanceType)
+}
+
+/**
+ * 验证镜像是否与内存配置兼容
+ */
+export async function isImageCompatibleWithMemory(remoteAlias: string, memory: number): Promise<boolean> {
+  const image = await prisma.systemImage.findUnique({
+    where: { remoteAlias }
+  })
+
+  if (!image || image.hidden) {
+    return false
+  }
+
+  return isImageCompatibleWithLowMemory(image, memory)
+}
+
+// ==================== 镜像使用检查 ====================
+
+/**
+ * 检查镜像是否被实例使用
+ */
+export async function checkImageInUse(hostId: number, remoteAlias: string): Promise<number> {
+  const count = await prisma.instance.count({
+    where: {
+      hostId,
+      status: { not: 'deleted' },
+      image: remoteAlias
+    }
+  })
+
+  return count
+}
diff --git a/server/src/db/inbox.ts b/server/src/db/inbox.ts
new file mode 100644
index 0000000..407ea09
--- /dev/null
+++ b/server/src/db/inbox.ts
@@ -0,0 +1,338 @@
+/**
+ * 站内信数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Prisma } from '@prisma/client'
+
+export interface CreateInboxMessageData {
+  userId: number
+  eventType: string
+  title: string
+  content: string
+  data?: Record<string, unknown>
+}
+
+export interface InboxMessage {
+  id: number
+  userId: number
+  eventType: string
+  title: string
+  content: string
+  isRead: boolean
+  data: Record<string, unknown> | null
+  createdAt: string
+}
+
+export interface PaginatedInboxMessages {
+  messages: InboxMessage[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+export interface HostNotificationRecipient {
+  userId: number
+  username: string
+  email: string | null
+}
+
+/**
+ * 创建站内信
+ */
+export async function createInboxMessage(data: CreateInboxMessageData): Promise<number> {
+  const message = await prisma.inboxMessage.create({
+    data: {
+      userId: data.userId,
+      eventType: data.eventType,
+      title: data.title,
+      content: data.content,
+      data: data.data as Prisma.InputJsonValue | undefined
+    },
+    select: { id: true }
+  })
+  return message.id
+}
+
+/**
+ * 获取用户站内信列表（分页）
+ */
+export async function getInboxMessages(
+  userId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    isRead?: boolean
+  } = {}
+): Promise<PaginatedInboxMessages> {
+  // 分页参数边界验证
+  const page = Math.max(1, options.page ?? 1)
+  const pageSize = Math.min(100, Math.max(1, options.pageSize ?? 20))
+  const skip = (page - 1) * pageSize
+
+  const where = {
+    userId,
+    ...(options.isRead !== undefined ? { isRead: options.isRead } : {})
+  }
+
+  const [messages, total] = await Promise.all([
+    prisma.inboxMessage.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.inboxMessage.count({ where })
+  ])
+
+  return {
+    messages: messages.map(msg => ({
+      id: msg.id,
+      userId: msg.userId,
+      eventType: msg.eventType,
+      title: msg.title,
+      content: msg.content,
+      isRead: msg.isRead,
+      data: msg.data as Record<string, unknown> | null,
+      createdAt: msg.createdAt.toISOString()
+    })),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取用户未读消息数量
+ */
+export async function getUnreadCount(userId: number): Promise<number> {
+  return prisma.inboxMessage.count({
+    where: {
+      userId,
+      isRead: false
+    }
+  })
+}
+
+/**
+ * 标记单条消息为已读
+ * 返回是否成功（消息存在且属于该用户）
+ */
+export async function markAsRead(id: number, userId: number): Promise<boolean> {
+  const result = await prisma.inboxMessage.updateMany({
+    where: {
+      id,
+      userId
+    },
+    data: {
+      isRead: true
+    }
+  })
+  return result.count > 0
+}
+
+/**
+ * 标记用户所有消息为已读
+ * 返回更新的消息数量
+ */
+export async function markAllAsRead(userId: number): Promise<number> {
+  const result = await prisma.inboxMessage.updateMany({
+    where: {
+      userId,
+      isRead: false
+    },
+    data: {
+      isRead: true
+    }
+  })
+  return result.count
+}
+
+/**
+ * 删除单条消息
+ * 返回是否成功（消息存在且属于该用户）
+ */
+export async function deleteMessage(id: number, userId: number): Promise<boolean> {
+  const result = await prisma.inboxMessage.deleteMany({
+    where: {
+      id,
+      userId
+    }
+  })
+  return result.count > 0
+}
+
+/**
+ * 删除用户所有已读消息
+ * 返回删除的消息数量
+ */
+export async function deleteReadMessages(userId: number): Promise<number> {
+  const result = await prisma.inboxMessage.deleteMany({
+    where: {
+      userId,
+      isRead: true
+    }
+  })
+  return result.count
+}
+
+/**
+ * 清理指定天数前的旧消息
+ * 用于定时任务
+ * 返回删除的消息数量
+ */
+export async function cleanupOldMessages(daysToKeep: number = 30): Promise<number> {
+  const cutoffDate = new Date()
+  cutoffDate.setDate(cutoffDate.getDate() - daysToKeep)
+
+  const result = await prisma.inboxMessage.deleteMany({
+    where: {
+      createdAt: {
+        lt: cutoffDate
+      }
+    }
+  })
+  return result.count
+}
+
+/**
+ * 获取单条消息详情
+ */
+export async function getMessageById(id: number, userId: number): Promise<InboxMessage | null> {
+  const msg = await prisma.inboxMessage.findFirst({
+    where: {
+      id,
+      userId
+    }
+  })
+
+  if (!msg) return null
+
+  return {
+    id: msg.id,
+    userId: msg.userId,
+    eventType: msg.eventType,
+    title: msg.title,
+    content: msg.content,
+    isRead: msg.isRead,
+    data: msg.data as Record<string, unknown> | null,
+    createdAt: msg.createdAt.toISOString()
+  }
+}
+
+/**
+ * 批量创建站内信（发送给多个用户）
+ * @returns 创建的消息数量
+ */
+export async function createBulkMessages(data: {
+  userIds: number[]
+  eventType: string
+  title: string
+  content: string
+  data?: Record<string, unknown>
+}): Promise<number> {
+  if (data.userIds.length === 0) return 0
+
+  const result = await prisma.inboxMessage.createMany({
+    data: data.userIds.map(userId => ({
+      userId,
+      eventType: data.eventType,
+      title: data.title,
+      content: data.content,
+      data: data.data as Prisma.InputJsonValue | undefined
+    }))
+  })
+
+  return result.count
+}
+
+/**
+ * 获取所有活跃用户ID（用于发送全站通知）
+ */
+export async function getAllActiveUserIds(): Promise<number[]> {
+  const users = await prisma.user.findMany({
+    where: {
+      status: 'active'
+    },
+    select: {
+      id: true
+    }
+  })
+
+  return users.map(u => u.id)
+}
+
+/**
+ * 获取某个宿主机下所有实例用户的ID（去重）
+ */
+export async function getUniqueUserIdsByHostId(hostId: number): Promise<number[]> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      hostId,
+      status: { not: 'deleted' }
+    },
+    select: {
+      userId: true
+    },
+    distinct: ['userId']
+  })
+
+  return instances.map(inst => inst.userId)
+}
+
+/**
+ * 获取指定实例ID列表中的用户ID（去重，且必须属于指定宿主机）
+ */
+export async function getUniqueUserIdsByInstanceIds(hostId: number, instanceIds: number[]): Promise<number[]> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      id: { in: instanceIds },
+      hostId,
+      status: { not: 'deleted' }
+    },
+    select: {
+      userId: true
+    },
+    distinct: ['userId']
+  })
+
+  return instances.map(inst => inst.userId)
+}
+
+/**
+ * 获取宿主机通知的目标用户（去重），包含用户名和邮箱
+ */
+export async function getUniqueRecipientsByHostId(
+  hostId: number,
+  instanceIds?: number[]
+): Promise<HostNotificationRecipient[]> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      hostId,
+      status: { not: 'deleted' },
+      ...(instanceIds && instanceIds.length > 0 ? { id: { in: instanceIds } } : {})
+    },
+    select: {
+      userId: true,
+      user: {
+        select: {
+          username: true,
+          email: true
+        }
+      }
+    },
+    distinct: ['userId'],
+    orderBy: {
+      userId: 'asc'
+    }
+  })
+
+  return instances.map((instance) => ({
+    userId: instance.userId,
+    username: instance.user.username,
+    email: instance.user.email
+  }))
+}
diff --git a/server/src/db/index.ts b/server/src/db/index.ts
new file mode 100644
index 0000000..75fea0b
--- /dev/null
+++ b/server/src/db/index.ts
@@ -0,0 +1,186 @@
+/**
+ * 数据库操作主入口
+ * 导出所有数据库操作函数
+ * 
+ * 已迁移到 Prisma ORM + PostgreSQL
+ */
+
+// 导出 Prisma 客户端和初始化函数
+export { prisma } from './prisma.js'
+export { initPrismaDatabase } from './init-prisma.js'
+export { resetDatabase, resetDatabaseFast } from './reset-database.js'
+
+// 导出用户相关操作
+export * from './users.js'
+
+// 导出配额操作
+export * from './quota-operations.js'
+
+// 导出日志操作
+export * from './logs.js'
+
+// 导出邀请码相关操作
+export * from './invite-codes.js'
+
+// 导出套餐相关操作
+export * from './packages.js'
+
+// 导出主机相关操作
+export * from './hosts.js'
+export * from './host-addresses.js'
+
+// 导出实例相关操作
+export * from './instances.js'
+
+// 导出端口映射相关操作
+export * from './port-mappings.js'
+
+// 导出快照相关操作
+export * from './snapshots.js'
+
+// 导出备份相关操作
+export * from './backups.js'
+
+// 导出 SSH 密钥相关操作
+export * from './ssh-keys.js'
+
+// 导出通知相关操作
+export * from './notifications.js'
+
+// 导出节点组相关操作
+
+// 导出 OAuth 相关操作
+export * from './oauth.js'
+
+// 导出帮助文档相关操作
+export * from './help.js'
+
+// 导出镜像相关操作
+export * from './images.js'
+
+// 导出分页查询函数
+export * from './pagination.js'
+
+// 导出系统配置相关操作
+export * from './system-config.js'
+
+// 导出流量统计相关操作
+export * from './traffic.js'
+
+// 导出恢复任务相关操作
+export * from './restore-tasks.js'
+
+// 导出远程存储配置相关操作
+export * from './storage-configs.js'
+
+// 导出备份上传任务相关操作
+export * from './backup-upload-tasks.js'
+
+// 导出实例转移相关操作
+export * from './transfers.js'
+
+// 导出好友关系相关操作
+export * from './friendships.js'
+
+// 导出套餐共享相关操作
+export * from './package-shares.js'
+
+// 导出 IP 地址相关操作
+export * from './ip-addresses.js'
+
+// 导出存储池相关操作
+export * from './storage-pools.js'
+
+// 导出实例操作任务相关操作
+export * from './instance-tasks.js'
+
+// 导出登录记录相关操作
+export * from './login-records.js'
+
+// 导出签到系统相关操作
+export * from './checkin.js'
+
+// 导出用户资源池相关操作
+export * from './resource-pool.js'
+
+// 导出系统兑换码相关操作
+export * from './redeem-codes.js'
+
+// 导出用户自定义初始化命令相关操作
+export * from './custom-init-commands.js'
+
+// 导出套餐方案相关操作
+export * from './package-plans.js'
+
+// 导出余额管理相关操作
+export * from './balance.js'
+
+// 导出计费记录相关操作
+export * from './billing-records.js'
+
+// 导出徽章相关操作
+export * from './badges.js'
+
+// 导出实例封停/解封相关操作（重命名以避免冲突）
+export {
+  suspendInstanceByExpiry,
+  suspendInstanceManually,
+  isInstanceSuspended,
+  isExpiredSuspension,
+  isManualSuspension,
+  getSuspendInfo,
+  updateExpiryNotifiedAt,
+  getAutoRenewInstances,
+  updateAutoRenewAttempt,
+  resetAutoRenewAttempts,
+  getSuspendedInstancesOlderThan
+} from './instance-suspend.js'
+
+// 导出计费业务操作（排除与 package-plans.js 冲突的 calculateMonthlyPrice）
+export {
+  calculateCreateBilling,
+  calculateRenewBilling,
+  calculatePlanChange,
+  calculateInstancePriceAdjustmentQuote,
+  previewRenewPrices,
+  performRenewal,
+  performPlanChange,
+  updateAutoRenew,
+  getInstanceBillingInfo,
+  isFreeInstance,
+  isPaidInstance,
+  isExpired,
+  getRemainingDays,
+  calculateInstanceRemainingRefundQuote,
+  calculateInstanceRefund,
+  // 托管余额相关
+  isUserHostedNode,
+  getHostOwnerId,
+  recordHostingIncome,
+  processHostingIncome,
+  deductHostingBalance
+} from './billing-operations.js'
+
+// 导出支付渠道相关操作
+export * from './payment-providers.js'
+
+// 导出充值记录相关操作
+export * from './recharge-records.js'
+
+// 导出 AFF 推荐计划相关操作
+export * from './aff.js'
+
+// 导出积分系统相关操作
+export * from './points.js'
+
+// 导出抽奖系统相关操作
+export * from './lottery.js'
+
+// 导出域名邮箱模块操作
+export * from './mail.js'
+
+// 导出宿主机通知邮件队列相关操作
+export * from './host-notification-email-tasks.js'
+
+// 导出托管拉黑相关操作
+export * from './hosting-blocks.js'
diff --git a/server/src/db/init-prisma.ts b/server/src/db/init-prisma.ts
new file mode 100644
index 0000000..4ca0ef8
--- /dev/null
+++ b/server/src/db/init-prisma.ts
@@ -0,0 +1,233 @@
+/**
+ * Prisma 数据库初始化
+ */
+
+// 确保环境变量被加载
+import 'dotenv/config'
+
+import { prisma } from './prisma.js'
+// @ts-ignore - bcryptjs has its own types
+import bcrypt from 'bcryptjs'
+import { resetDatabaseFast } from './reset-database.js'
+import { initSystemConfig } from './system-config.js'
+import { seedDefaultBadges } from './badges.js'
+
+function getInitialAdminPassword(): string {
+  const configuredPassword = process.env.ADMIN_PASSWORD || process.env.ADMIN_INITIAL_PASSWORD
+
+  if (process.env.NODE_ENV === 'production') {
+    if (!configuredPassword || configuredPassword === 'admin123') {
+      throw new Error('ADMIN_PASSWORD must be configured to a non-default value in production')
+    }
+  }
+
+  return configuredPassword || 'admin123'
+}
+
+/**
+ * 初始化 Prisma 数据库
+ * @param options 初始化选项
+ */
+export async function initPrismaDatabase(options: {
+  resetDatabase?: boolean
+} = {}) {
+  // 测试连接
+  await prisma.$connect()
+  console.log('✅ Prisma 数据库连接成功')
+
+  // 如果配置了清空数据库，先清空
+  const shouldReset = options.resetDatabase ??
+    (process.env.RESET_DATABASE === 'true' || process.env.RESET_DATABASE === '1')
+
+  if (shouldReset) {
+    console.log('⚠️  检测到 RESET_DATABASE=true，将清空数据库...')
+    await resetDatabaseFast()
+    console.log('✅ 数据库已清空')
+  }
+
+  // 创建默认数据
+  await createDefaultAdmin()
+  // 注释：管理员不再允许对套餐、节点等进行操作，因此不再自动创建默认套餐
+  // await createDefaultPackages()
+  await initDefaultSystemConfig()
+  await seedDefaultBadges()
+
+  console.log('📦 Prisma 数据库初始化完成')
+  return prisma
+}
+
+/**
+ * 创建默认管理员账户
+ */
+async function createDefaultAdmin() {
+  const existing = await prisma.user.findUnique({
+    where: { username: 'admin' },
+    include: { quota: true }
+  })
+
+  if (!existing) {
+    // 从环境变量读取管理员密码，默认值为 'admin123'（开发环境）
+    const adminPassword = getInitialAdminPassword()
+    const passwordHash = await bcrypt.hash(adminPassword, 12)
+
+    await prisma.user.create({
+      data: {
+        username: 'admin',
+        email: 'admin@incudal.local',
+        passwordHash,
+        role: 'admin',
+        status: 'active',
+        quota: {
+          create: {
+            // 新配额系统：管理员拥有超高配额
+            // 注意：不再限制实例配额
+            hostLimit: 1000,        // 宿主机数量上限
+            friendLimit: 1000,      // 好友数量上限
+            packageLimit: 1000      // 套餐数量上限
+          }
+        }
+      }
+    })
+
+    // 如果使用环境变量配置的密码，不直接输出密码（安全考虑）
+    const passwordDisplay = adminPassword === 'admin123'
+      ? 'admin123'
+      : '***（已从环境变量配置）'
+    console.log(`✅ 默认管理员账户已创建: admin / ${passwordDisplay}`)
+    console.log('   配额配置: 宿主机=1000, 好友=1000, 套餐=1000（实例无限制）')
+  } else {
+    // 如果管理员已存在，检查并更新配额（如果配额不存在或需要更新）
+    if (!existing.quota) {
+      await prisma.userQuota.create({
+        data: {
+          userId: existing.id,
+          // 新配额系统：管理员拥有超高配额
+          // 注意：不再限制实例配额
+          hostLimit: 1000,
+          friendLimit: 1000,
+          packageLimit: 1000
+        }
+      })
+      console.log('✅ 已为现有管理员账户创建配额')
+    } else {
+      // 可选：如果需要更新现有配额，取消下面的注释
+      // await prisma.userQuota.update({
+      //   where: { userId: existing.id },
+      //   data: {
+      //     hostLimit: 1000,
+      //     friendLimit: 1000,
+      //   }
+      // })
+      // console.log('✅ 已更新管理员账户配额')
+    }
+    console.log('ℹ️  管理员账户已存在，跳过创建')
+  }
+}
+
+/**
+ * 创建默认套餐
+ * 注意：套餐必须绑定至少一个宿主机，如果没有宿主机则不创建
+ * 
+ * 已注释：管理员不再允许对套餐、节点等进行操作，因此不再自动创建默认套餐
+ */
+// @ts-ignore - 函数已禁用但保留以供将来参考
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function createDefaultPackages() {
+  const count = await prisma.package.count()
+
+  if (count === 0) {
+    // 获取管理员用户ID作为默认套餐的所有者
+    const adminUser = await prisma.user.findFirst({
+      where: { role: 'admin' },
+      orderBy: { id: 'asc' }
+    })
+
+    if (!adminUser) {
+      console.log('⚠️  没有管理员用户，跳过创建默认套餐')
+      return
+    }
+
+    // 获取管理员的所有宿主机
+    const adminHosts = await prisma.host.findMany({
+      where: { userId: adminUser.id },
+      select: { id: true }
+    })
+
+    if (adminHosts.length === 0) {
+      console.log('⚠️  管理员没有宿主机，跳过创建默认套餐（套餐必须绑定至少一个宿主机）')
+      return
+    }
+
+    const hostIds = adminHosts.map(h => h.id)
+
+    // 创建套餐并绑定所有宿主机
+    const packages = [
+      {
+        userId: adminUser.id,
+        name: 'NAT基础款',
+        description: '适合轻量应用',
+        cpuMax: 50,        // 50% CPU
+        memoryMax: 512,    // 512MB
+        diskMax: 5120,     // 5GB = 5120MB
+        bandwidthMax: 100,
+        networkMode: 'nat' as const,
+        privileged: true,  // 特权容器
+        nested: true,      // 嵌套虚拟化
+        active: true,      // 启用套餐
+        portLimit: 20,
+        hostIds
+      },
+      {
+        userId: adminUser.id,
+        name: '独立IPv6款',
+        description: '适合中型应用',
+        cpuMax: 150,       // 150% CPU
+        memoryMax: 1024,   // 1GB = 1024MB
+        diskMax: 15360,    // 15GB = 15360MB
+        bandwidthMax: 200,
+        networkMode: 'nat_ipv6' as const, // NAT & IPv6
+        privileged: true,  // 特权容器
+        nested: true,      // 嵌套虚拟化
+        active: true,      // 启用套餐
+        portLimit: 30,
+        hostIds
+      },
+      {
+        userId: adminUser.id,
+        name: 'NAT+IPv6款',
+        description: '适合高负载应用',
+        cpuMax: 200,       // 200% CPU
+        memoryMax: 2048,   // 2GB = 2048MB
+        diskMax: 25600,    // 25GB = 25600MB
+        bandwidthMax: 500,
+        networkMode: 'nat_ipv6' as const, // NAT + IPv6
+        privileged: true,  // 特权容器
+        nested: true,      // 嵌套虚拟化
+        active: true,      // 启用套餐
+        portLimit: 50,
+        hostIds
+      }
+    ]
+
+    // 使用 createPackage 函数创建套餐（会自动处理宿主机绑定）
+    const { createPackage } = await import('./packages.js')
+    for (const pkg of packages) {
+      await createPackage(pkg)
+    }
+
+    console.log('✅ 默认套餐已创建（已绑定所有宿主机）')
+    console.log('   1. NAT基础款: 50%CPU, 512MB内存, 5GB硬盘')
+    console.log('   2. 独立IPv6款: 150%CPU, 1GB内存, 15GB硬盘')
+    console.log('   3. NAT+IPv6款: 200%CPU, 2GB内存, 25GB硬盘')
+  } else {
+    console.log('ℹ️  套餐已存在，跳过创建')
+  }
+}
+
+/**
+ * 初始化默认系统配置
+ */
+async function initDefaultSystemConfig() {
+  await initSystemConfig()
+  console.log('✅ 系统配置已初始化')
+}
diff --git a/server/src/db/instance-suspend.ts b/server/src/db/instance-suspend.ts
new file mode 100644
index 0000000..73ccc7b
--- /dev/null
+++ b/server/src/db/instance-suspend.ts
@@ -0,0 +1,266 @@
+/**
+ * 实例封停/解封相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Instance } from '@prisma/client'
+
+// ==================== 封停操作 ====================
+
+/**
+ * 封停实例（系统自动封停 - 到期）
+ */
+export async function suspendInstanceByExpiry(
+  instanceId: number
+): Promise<Instance> {
+  return prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      status: 'suspended',
+      suspendedAt: new Date(),
+      suspendedBy: null, // null 表示系统自动
+      suspendReason: 'expired'
+    }
+  })
+}
+
+/**
+ * 封停实例（管理员或宿主机所有者手动封停）
+ */
+export async function suspendInstanceManually(
+  instanceId: number,
+  operatorId: number,
+  reason: string
+): Promise<Instance> {
+  return prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      status: 'suspended',
+      suspendedAt: new Date(),
+      suspendedBy: operatorId,
+      suspendReason: reason
+    }
+  })
+}
+
+/**
+ * 解封实例
+ */
+export async function unsuspendInstance(
+  instanceId: number
+): Promise<Instance> {
+  return prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      status: 'stopped', // 解封后设为停止状态
+      suspendedAt: null,
+      suspendedBy: null,
+      suspendReason: null
+    }
+  })
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 检查实例是否已封停
+ */
+export async function isInstanceSuspended(instanceId: number): Promise<boolean> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: { status: true }
+  })
+  return instance?.status === 'suspended'
+}
+
+/**
+ * 检查实例是否到期封停（可续费解封）
+ */
+export async function isExpiredSuspension(instanceId: number): Promise<boolean> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: { status: true, suspendReason: true }
+  })
+  return instance?.status === 'suspended' && instance?.suspendReason === 'expired'
+}
+
+/**
+ * 检查实例是否手动封停（不可续费解封）
+ */
+export async function isManualSuspension(instanceId: number): Promise<boolean> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: { status: true, suspendReason: true, suspendedBy: true }
+  })
+  return instance?.status === 'suspended' && instance?.suspendedBy !== null
+}
+
+/**
+ * 获取实例的封停信息
+ */
+export async function getSuspendInfo(instanceId: number): Promise<{
+  isSuspended: boolean
+  suspendedAt: Date | null
+  suspendedBy: number | null
+  suspendReason: string | null
+  isExpiredSuspension: boolean
+  isManualSuspension: boolean
+} | null> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      status: true,
+      suspendedAt: true,
+      suspendedBy: true,
+      suspendReason: true
+    }
+  })
+
+  if (!instance) return null
+
+  const isSuspended = instance.status === 'suspended'
+  return {
+    isSuspended,
+    suspendedAt: instance.suspendedAt,
+    suspendedBy: instance.suspendedBy,
+    suspendReason: instance.suspendReason,
+    isExpiredSuspension: isSuspended && instance.suspendReason === 'expired',
+    isManualSuspension: isSuspended && instance.suspendedBy !== null
+  }
+}
+
+/**
+ * 获取即将到期的实例（用于发送提醒）
+ * @param hoursBeforeExpiry 到期前多少小时
+ * @param notifiedWithin 在多少小时内已通知过的不再返回
+ */
+export async function getExpiringInstances(
+  hoursBeforeExpiry: number,
+  notifiedWithin?: number
+): Promise<Instance[]> {
+  const now = new Date()
+  const expiryThreshold = new Date(now.getTime() + hoursBeforeExpiry * 60 * 60 * 1000)
+
+  const whereCondition: any = {
+    expiresAt: {
+      not: null,
+      lte: expiryThreshold,
+      gt: now // 还未到期
+    },
+    status: { notIn: ['suspended', 'deleted'] } // 未封停且未删除
+  }
+
+  // 如果指定了 notifiedWithin，排除最近已通知的
+  if (notifiedWithin) {
+    const notifiedThreshold = new Date(now.getTime() - notifiedWithin * 60 * 60 * 1000)
+    whereCondition.OR = [
+      { expiryNotifiedAt: null },
+      { expiryNotifiedAt: { lt: notifiedThreshold } }
+    ]
+  }
+
+  return prisma.instance.findMany({
+    where: whereCondition
+  })
+}
+
+/**
+ * 获取已到期但未封停的实例
+ * 注意：只查询付费实例（packagePlanId 不为 null）
+ * 排除已删除和已封停的实例
+ */
+export async function getExpiredUnsuspendedInstances(): Promise<Instance[]> {
+  return prisma.instance.findMany({
+    where: {
+      packagePlanId: { not: null },  // 明确排除免费实例
+      expiresAt: {
+        not: null,
+        lt: new Date()
+      },
+      status: { notIn: ['suspended', 'deleted'] }  // 排除已封停和已删除
+    }
+  })
+}
+
+/**
+ * 更新到期通知时间
+ */
+export async function updateExpiryNotifiedAt(instanceId: number): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: { expiryNotifiedAt: new Date() }
+  })
+}
+
+/**
+ * 获取需要自动续费的实例
+ * @param hoursBeforeExpiry 到期前多少小时
+ */
+export async function getAutoRenewInstances(
+  hoursBeforeExpiry: number
+): Promise<Instance[]> {
+  const now = new Date()
+  const expiryThreshold = new Date(now.getTime() + hoursBeforeExpiry * 60 * 60 * 1000)
+
+  return prisma.instance.findMany({
+    where: {
+      autoRenew: true,
+      expiresAt: {
+        not: null,
+        lte: expiryThreshold,
+        gt: now // 还未到期
+      },
+      status: { notIn: ['suspended', 'deleted'] } // 未封停且未删除
+    }
+  })
+}
+
+/**
+ * 更新自动续费尝试记录
+ */
+export async function updateAutoRenewAttempt(
+  instanceId: number,
+  attempt: number,
+  disableAutoRenew: boolean = false
+): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      autoRenewAttempts: attempt,
+      lastAutoRenewAttemptAt: new Date(),
+      ...(disableAutoRenew ? { autoRenew: false } : {})
+    }
+  })
+}
+
+/**
+ * 重置自动续费尝试记录（续费成功后）
+ */
+export async function resetAutoRenewAttempts(instanceId: number): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      autoRenewAttempts: 0,
+      lastAutoRenewAttemptAt: null
+    }
+  })
+}
+
+/**
+ * 获取封停超过指定天数的实例（用于自动删除）
+ */
+export async function getSuspendedInstancesOlderThan(days: number): Promise<Instance[]> {
+  const threshold = new Date()
+  threshold.setDate(threshold.getDate() - days)
+
+  return prisma.instance.findMany({
+    where: {
+      status: 'suspended',
+      suspendedAt: {
+        not: null,
+        lt: threshold
+      }
+    }
+  })
+}
diff --git a/server/src/db/instance-tasks.ts b/server/src/db/instance-tasks.ts
new file mode 100644
index 0000000..71b1003
--- /dev/null
+++ b/server/src/db/instance-tasks.ts
@@ -0,0 +1,210 @@
+/**
+ * 实例操作任务数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { InstanceTaskType, InstanceTaskStatus, Prisma } from '@prisma/client'
+
+export interface CreateInstanceTaskData {
+  instanceId: number
+  hostId: number
+  userId: number
+  taskType: InstanceTaskType
+  imageAlias?: string       // 重装使用的镜像别名
+  sshKeyId?: number         // 重装使用的 SSH 密钥 ID
+  customInitCommandIds?: number[]  // 重装使用的自定义初始化命令 ID 列表
+  targetName?: string       // 克隆的目标名称
+  targetHostId?: number     // 克隆的目标宿主机
+  snapshotName?: string     // 克隆时的快照名称
+}
+
+export interface InstanceTaskWithDetails {
+  id: number
+  instanceId: number
+  hostId: number
+  userId: number
+  taskType: InstanceTaskType
+  status: InstanceTaskStatus
+  progress: string | null
+  retryCount: number
+  imageAlias: string | null
+  sshKeyId: number | null
+  customInitCommandIds: string | null  // JSON 字符串，解析后为 number[]
+  targetName: string | null
+  targetHostId: number | null
+  snapshotName: string | null
+  newInstanceId: number | null
+  error: string | null
+  createdAt: Date
+  startedAt: Date | null
+  finishedAt: Date | null
+}
+
+/**
+ * 创建实例操作任务
+ */
+export async function createInstanceTask(data: CreateInstanceTaskData): Promise<InstanceTaskWithDetails> {
+  // 注：使用 as any 绕过 Prisma 类型检查，因为 customInitCommandIds 字段在迁移后才会生成类型
+  const result = await prisma.instanceTask.create({
+    data: {
+      instanceId: data.instanceId,
+      hostId: data.hostId,
+      userId: data.userId,
+      taskType: data.taskType,
+      imageAlias: data.imageAlias || null,
+      sshKeyId: data.sshKeyId || null,
+      customInitCommandIds: data.customInitCommandIds ? JSON.stringify(data.customInitCommandIds) : null,
+      targetName: data.targetName || null,
+      targetHostId: data.targetHostId || null,
+      snapshotName: data.snapshotName || null,
+      status: 'PENDING'
+    } as any
+  })
+  return result as unknown as InstanceTaskWithDetails
+}
+
+/**
+ * 获取任务详情
+ */
+export async function getInstanceTaskById(taskId: number): Promise<InstanceTaskWithDetails | null> {
+  const result = await prisma.instanceTask.findUnique({
+    where: { id: taskId }
+  })
+  return result as unknown as InstanceTaskWithDetails | null
+}
+
+/**
+ * 获取实例的活跃任务（PENDING 或 PROCESSING）
+ */
+export async function getActiveTaskForInstance(instanceId: number): Promise<InstanceTaskWithDetails | null> {
+  const result = await prisma.instanceTask.findFirst({
+    where: {
+      instanceId,
+      status: { in: ['PENDING', 'PROCESSING'] }
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+  return result as unknown as InstanceTaskWithDetails | null
+}
+
+/**
+ * 获取用户的任务列表
+ */
+export async function getUserInstanceTasks(
+  userId: number,
+  options: { page?: number; pageSize?: number; status?: InstanceTaskStatus[] } = {}
+): Promise<{ items: InstanceTaskWithDetails[]; total: number }> {
+  const { page = 1, pageSize = 20, status } = options
+
+  const where: Prisma.InstanceTaskWhereInput = { userId }
+  if (status && status.length > 0) {
+    where.status = { in: status }
+  }
+
+  const [items, total] = await Promise.all([
+    prisma.instanceTask.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      skip: (page - 1) * pageSize,
+      take: pageSize
+    }),
+    prisma.instanceTask.count({ where })
+  ])
+
+  return { items: items as unknown as InstanceTaskWithDetails[], total }
+}
+
+/**
+ * 更新任务状态
+ */
+export async function updateInstanceTaskStatus(
+  taskId: number,
+  status: InstanceTaskStatus,
+  updates?: {
+    progress?: string
+    error?: string
+    startedAt?: Date
+    finishedAt?: Date
+    newInstanceId?: number
+  }
+): Promise<InstanceTaskWithDetails> {
+  const result = await prisma.instanceTask.update({
+    where: { id: taskId },
+    data: {
+      status,
+      ...updates
+    }
+  })
+  return result as unknown as InstanceTaskWithDetails
+}
+
+/**
+ * 更新任务进度
+ */
+export async function updateInstanceTaskProgress(taskId: number, progress: string): Promise<void> {
+  await prisma.instanceTask.update({
+    where: { id: taskId },
+    data: { progress }
+  })
+}
+
+/**
+ * 获取队列位置
+ */
+export async function getTaskQueuePosition(taskId: number, hostId: number): Promise<number> {
+  const task = await prisma.instanceTask.findUnique({
+    where: { id: taskId },
+    select: { createdAt: true }
+  })
+
+  if (!task) return 0
+
+  const position = await prisma.instanceTask.count({
+    where: {
+      hostId,
+      status: 'PENDING',
+      createdAt: { lte: task.createdAt }
+    }
+  })
+
+  return position
+}
+
+/**
+ * 清理过期的已完成任务（保疙7天）
+ */
+export async function cleanupOldTasks(): Promise<number> {
+  const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+
+  const result = await prisma.instanceTask.deleteMany({
+    where: {
+      status: { in: ['COMPLETED', 'FAILED'] },
+      finishedAt: { lt: sevenDaysAgo }
+    }
+  })
+
+  return result.count
+}
+
+/**
+ * 取消 PENDING 状态的任务
+ */
+export async function cancelInstanceTask(taskId: number): Promise<InstanceTaskWithDetails | null> {
+  const task = await prisma.instanceTask.findUnique({
+    where: { id: taskId }
+  })
+
+  if (!task || task.status !== 'PENDING') {
+    return null
+  }
+
+  const result = await prisma.instanceTask.update({
+    where: { id: taskId },
+    data: {
+      status: 'FAILED',
+      error: '用户取消',
+      finishedAt: new Date()
+    }
+  })
+  return result as unknown as InstanceTaskWithDetails
+}
diff --git a/server/src/db/instances.ts b/server/src/db/instances.ts
new file mode 100644
index 0000000..010c51b
--- /dev/null
+++ b/server/src/db/instances.ts
@@ -0,0 +1,753 @@
+/**
+ * 实例相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Instance, InstanceStatus } from '../types/database.js'
+
+/**
+ * 根据用户 ID 获取实例列表
+ */
+export async function getInstancesByUserId(userId: number): Promise<Array<Instance & {
+  host_name?: string
+  host_location?: string
+  host_country_code?: string
+}>> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      userId,
+      status: { not: 'deleted' }
+    },
+    include: {
+      host: {
+        select: {
+          name: true,
+          location: true,
+          countryCode: true
+        }
+      }
+    },
+    orderBy: {
+      id: 'desc'
+    }
+  })
+
+  return instances.map(inst => ({
+    id: inst.id,
+    incus_id: inst.incusId,
+    name: inst.name,
+    user_id: inst.userId,
+    host_id: inst.hostId,
+    package_id: inst.packageId,
+    package_plan_id: inst.packagePlanId,
+    storage_pool_name: inst.storagePoolName ?? null,
+    icon_badge_id: inst.iconBadgeId,
+    image: inst.image,
+    status: inst.status,
+    cpu: inst.cpu,
+    memory: inst.memory,
+    disk: inst.disk,
+    ipv4: inst.ipv4,
+    ipv6: inst.ipv6,
+    network_mode: inst.networkMode,
+    ssh_port: inst.sshPort,
+    root_password: inst.rootPassword,
+    port_limit: inst.portLimit,
+    snapshot_limit: inst.snapshotLimit,
+    backup_limit: inst.backupLimit,
+    site_limit: inst.siteLimit,
+    swap_enabled: inst.swapEnabled,
+    swap_size: inst.swapSize,
+    monthly_traffic_limit: inst.monthlyTrafficLimit ? inst.monthlyTrafficLimit.toString() : null,
+    // 配置字段
+    limits_read: inst.limitsRead,
+    limits_write: inst.limitsWrite,
+    limits_read_iops: inst.limitsReadIops,
+    limits_write_iops: inst.limitsWriteIops,
+    limits_ingress: inst.limitsIngress,
+    limits_egress: inst.limitsEgress,
+    limits_processes: inst.limitsProcesses,
+    limits_cpu_priority: inst.limitsCpuPriority,
+    boot_autostart: inst.bootAutostart,
+    boot_autostart_priority: inst.bootAutostartPriority,
+    boot_autostart_delay: inst.bootAutostartDelay,
+    boot_host_shutdown_timeout: inst.bootHostShutdownTimeout,
+    // 封停相关字段
+    expires_at: inst.expiresAt?.toISOString() ?? null,
+    suspended_at: inst.suspendedAt?.toISOString() ?? null,
+    suspended_by: inst.suspendedBy,
+    suspend_reason: inst.suspendReason,
+    created_at: inst.createdAt.toISOString(),
+    updated_at: inst.updatedAt.toISOString(),
+    host_name: inst.host.name,
+    host_location: inst.host.location ?? undefined,
+    host_country_code: inst.host.countryCode
+  }))
+}
+
+/**
+ * 获取所有实例
+ */
+export async function getAllInstances(): Promise<Array<Instance & {
+  host_name?: string
+  host_country_code?: string
+  username?: string
+}>> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      status: { not: 'deleted' }
+    },
+    include: {
+      host: {
+        select: {
+          name: true,
+          countryCode: true
+        }
+      },
+      user: {
+        select: {
+          username: true
+        }
+      }
+    },
+    orderBy: {
+      id: 'desc'
+    }
+  })
+
+  return instances.map(inst => ({
+    id: inst.id,
+    incus_id: inst.incusId,
+    name: inst.name,
+    user_id: inst.userId,
+    host_id: inst.hostId,
+    package_id: inst.packageId,
+    package_plan_id: inst.packagePlanId,
+    storage_pool_name: inst.storagePoolName ?? null,
+    icon_badge_id: inst.iconBadgeId,
+    image: inst.image,
+    status: inst.status,
+    cpu: inst.cpu,
+    memory: inst.memory,
+    disk: inst.disk,
+    ipv4: inst.ipv4,
+    ipv6: inst.ipv6,
+    network_mode: inst.networkMode,
+    ssh_port: inst.sshPort,
+    root_password: inst.rootPassword,
+    port_limit: inst.portLimit,
+    snapshot_limit: inst.snapshotLimit,
+    backup_limit: inst.backupLimit,
+    site_limit: inst.siteLimit,
+    swap_enabled: inst.swapEnabled,
+    swap_size: inst.swapSize,
+    monthly_traffic_limit: inst.monthlyTrafficLimit ? inst.monthlyTrafficLimit.toString() : null,
+    // 配置字段
+    limits_read: inst.limitsRead,
+    limits_write: inst.limitsWrite,
+    limits_read_iops: inst.limitsReadIops,
+    limits_write_iops: inst.limitsWriteIops,
+    limits_ingress: inst.limitsIngress,
+    limits_egress: inst.limitsEgress,
+    limits_processes: inst.limitsProcesses,
+    limits_cpu_priority: inst.limitsCpuPriority,
+    boot_autostart: inst.bootAutostart,
+    boot_autostart_priority: inst.bootAutostartPriority,
+    boot_autostart_delay: inst.bootAutostartDelay,
+    boot_host_shutdown_timeout: inst.bootHostShutdownTimeout,
+    // 封停相关字段
+    expires_at: inst.expiresAt?.toISOString() ?? null,
+    suspended_at: inst.suspendedAt?.toISOString() ?? null,
+    suspended_by: inst.suspendedBy,
+    suspend_reason: inst.suspendReason,
+    created_at: inst.createdAt.toISOString(),
+    updated_at: inst.updatedAt.toISOString(),
+    host_name: inst.host.name,
+    host_country_code: inst.host.countryCode,
+    username: inst.user.username
+  }))
+}
+
+/**
+ * 根据 ID 获取实例
+ */
+export async function getInstanceById(id: number): Promise<(Instance & {
+  host_name?: string
+  host_country_code?: string
+  nat_public_ip?: string
+  host_storage_driver?: string
+  monthly_traffic_limit?: string | null
+  last_ipv6_reassign_at?: string | null
+  cloud_init_state?: string | null
+  cloud_init_source?: string | null
+  cloud_init_last_checked_at?: string | null
+  cloud_init_completed_at?: string | null
+  cloud_init_manual_completed_at?: string | null
+  cloud_init_manual_completed_by?: number | null
+  package_plan_id?: number | null
+  auto_renew?: boolean
+  billing_price?: number | null  // 实例专属价格（元）
+  swap_enabled?: boolean
+  swap_size?: number | null
+  storage_pool_name?: string | null
+}) | null> {
+  const inst = await prisma.instance.findUnique({
+    where: { id },
+    include: {
+      host: {
+        select: {
+          name: true,
+          countryCode: true,
+          natPublicIp: true,
+          storageDriver: true
+        }
+      }
+    }
+  })
+
+  if (!inst) return null
+
+  return {
+    id: inst.id,
+    incus_id: inst.incusId,
+    name: inst.name,
+    user_id: inst.userId,
+    host_id: inst.hostId,
+    package_id: inst.packageId,
+    storage_pool_name: inst.storagePoolName ?? null,
+    icon_badge_id: inst.iconBadgeId,
+    image: inst.image,
+    status: inst.status,
+    cpu: inst.cpu,
+    memory: inst.memory,
+    disk: inst.disk,
+    ipv4: inst.ipv4,
+    ipv6: inst.ipv6,
+    network_mode: inst.networkMode,
+    ssh_port: inst.sshPort,
+    root_password: inst.rootPassword,
+    port_limit: inst.portLimit,
+    snapshot_limit: inst.snapshotLimit,
+    backup_limit: inst.backupLimit,
+    site_limit: inst.siteLimit,
+    swap_enabled: inst.swapEnabled,
+    swap_size: inst.swapSize,
+    monthly_traffic_limit: inst.monthlyTrafficLimit ? inst.monthlyTrafficLimit.toString() : null,
+    // 配置字段
+    limits_read: inst.limitsRead,
+    limits_write: inst.limitsWrite,
+    limits_read_iops: inst.limitsReadIops,
+    limits_write_iops: inst.limitsWriteIops,
+    limits_ingress: inst.limitsIngress,
+    limits_egress: inst.limitsEgress,
+    limits_processes: inst.limitsProcesses,
+    limits_cpu_priority: inst.limitsCpuPriority,
+    boot_autostart: inst.bootAutostart,
+    boot_autostart_priority: inst.bootAutostartPriority,
+    boot_autostart_delay: inst.bootAutostartDelay,
+    boot_host_shutdown_timeout: inst.bootHostShutdownTimeout,
+    // 封停相关字段
+    expires_at: inst.expiresAt?.toISOString() ?? null,
+    suspended_at: inst.suspendedAt?.toISOString() ?? null,
+    suspended_by: inst.suspendedBy,
+    suspend_reason: inst.suspendReason,
+    cloud_init_state: inst.cloudInitState ?? null,
+    cloud_init_source: inst.cloudInitSource ?? null,
+    cloud_init_last_checked_at: inst.cloudInitLastCheckedAt?.toISOString() ?? null,
+    cloud_init_completed_at: inst.cloudInitCompletedAt?.toISOString() ?? null,
+    cloud_init_manual_completed_at: inst.cloudInitManualCompletedAt?.toISOString() ?? null,
+    cloud_init_manual_completed_by: inst.cloudInitManualCompletedBy ?? null,
+    created_at: inst.createdAt.toISOString(),
+    updated_at: inst.updatedAt.toISOString(),
+    host_name: inst.host.name,
+    host_country_code: inst.host.countryCode,
+    nat_public_ip: inst.host.natPublicIp ?? undefined,
+    host_storage_driver: inst.host.storageDriver,
+    last_ipv6_reassign_at: inst.lastIpv6ReassignAt?.toISOString() ?? null,
+    package_plan_id: inst.packagePlanId ?? null,
+    auto_renew: inst.autoRenew,
+    billing_price: inst.billingPrice ? Number(inst.billingPrice) : null
+  }
+}
+
+/**
+ * 更新实例配额
+ */
+export async function updateInstanceQuota(instanceId: number, data: {
+  portLimit?: number | null
+  snapshotLimit?: number | null
+  backupLimit?: number | null
+  siteLimit?: number | null
+}): Promise<void> {
+  return await updateInstance(instanceId, data)
+}
+
+/**
+ * 创建实例记录
+ */
+export async function createInstance(data: {
+  incusId: string
+  name: string
+  userId: number
+  hostId: number
+  packageId: number | null
+  storagePoolName?: string | null
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+  networkMode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  snapshotSpecs?: Record<string, unknown>
+  sshPort?: number | null
+  rootPassword?: string | null
+  monthlyTrafficLimit?: bigint | null
+  // 配额字段（从套餐继承）
+  portLimit?: number | null
+  snapshotLimit?: number | null
+  backupLimit?: number | null
+  siteLimit?: number | null
+  swapEnabled?: boolean
+  swapSize?: number | null
+}): Promise<number> {
+  const instance = await prisma.instance.create({
+    data: {
+      incusId: data.incusId,
+      name: data.name,
+      userId: data.userId,
+      hostId: data.hostId,
+      packageId: data.packageId,
+      storagePoolName: data.storagePoolName ?? null,
+      image: data.image,
+      cpu: data.cpu,
+      memory: data.memory,
+      disk: data.disk,
+      networkMode: data.networkMode,
+      snapshottedSpecs: (data.snapshotSpecs || {}) as unknown as any, // Prisma Json 类型
+      sshPort: data.sshPort ?? null,
+      rootPassword: data.rootPassword ?? null,
+      status: 'creating',
+      monthlyTrafficLimit: data.monthlyTrafficLimit ?? null,
+      // 配额字段
+      portLimit: data.portLimit ?? null,
+      snapshotLimit: data.snapshotLimit ?? null,
+      backupLimit: data.backupLimit ?? null,
+      siteLimit: data.siteLimit ?? null,
+      swapEnabled: data.swapEnabled ?? false,
+      swapSize: data.swapSize ?? null
+    }
+  })
+
+  return instance.id
+}
+
+/**
+ * 更新实例状态
+ */
+export async function updateInstanceStatus(
+  id: number,
+  status: InstanceStatus,
+  network: {
+    ipv4?: string | null
+    ipv6?: string | null
+  } | null = null
+): Promise<void> {
+  const updateData: {
+    status: InstanceStatus
+    ipv4?: string | null
+    ipv6?: string | null
+  } = { status }
+
+  if (network) {
+    if (network.ipv4 !== undefined) updateData.ipv4 = network.ipv4 ?? null
+    if (network.ipv6 !== undefined) updateData.ipv6 = network.ipv6 ?? null
+  }
+
+  if (status === 'deleted') {
+    await prisma.instance.update({
+      where: { id },
+      data: updateData
+    })
+    return
+  }
+
+  await prisma.instance.updateMany({
+    where: {
+      id,
+      status: { not: 'deleted' }
+    },
+    data: updateData
+  })
+}
+
+/**
+ * 更新实例
+ */
+export async function updateInstance(id: number, data: {
+  image?: string
+  name?: string
+  status?: InstanceStatus
+  sshPort?: number | null
+  rootPassword?: string | null
+  portLimit?: number | null
+  snapshotLimit?: number | null
+  backupLimit?: number | null
+  siteLimit?: number | null
+  swapEnabled?: boolean
+  swapSize?: number | null
+  storagePoolName?: string | null
+}): Promise<void> {
+  const updateData: {
+    image?: string
+    name?: string
+    status?: InstanceStatus
+    sshPort?: number | null
+    rootPassword?: string | null
+    portLimit?: number | null
+    snapshotLimit?: number | null
+    backupLimit?: number | null
+    siteLimit?: number | null
+    swapEnabled?: boolean
+    swapSize?: number | null
+    storagePoolName?: string | null
+  } = {}
+
+  if (data.image !== undefined) updateData.image = data.image
+  if (data.name !== undefined) updateData.name = data.name
+  if (data.status !== undefined) updateData.status = data.status
+  if (data.sshPort !== undefined) updateData.sshPort = data.sshPort ?? null
+  if (data.rootPassword !== undefined) updateData.rootPassword = data.rootPassword ?? null
+  if (data.portLimit !== undefined) updateData.portLimit = data.portLimit ?? null
+  if (data.snapshotLimit !== undefined) updateData.snapshotLimit = data.snapshotLimit ?? null
+  if (data.backupLimit !== undefined) updateData.backupLimit = data.backupLimit ?? null
+  if (data.siteLimit !== undefined) updateData.siteLimit = data.siteLimit ?? null
+  if (data.swapEnabled !== undefined) updateData.swapEnabled = data.swapEnabled
+  if (data.swapSize !== undefined) updateData.swapSize = data.swapSize ?? null
+  if (data.storagePoolName !== undefined) updateData.storagePoolName = data.storagePoolName ?? null
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.instance.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 更新实例资源配置（CPU、内存、磁盘、流量）
+ */
+export async function updateInstanceResources(id: number, data: {
+  cpu?: number
+  memory?: number
+  disk?: number
+  monthlyTrafficLimit?: bigint | null
+}): Promise<void> {
+  const updateData: {
+    cpu?: number
+    memory?: number
+    disk?: number
+    monthlyTrafficLimit?: bigint | null
+  } = {}
+
+  if (data.cpu !== undefined) updateData.cpu = data.cpu
+  if (data.memory !== undefined) updateData.memory = data.memory
+  if (data.disk !== undefined) updateData.disk = data.disk
+  if (data.monthlyTrafficLimit !== undefined) updateData.monthlyTrafficLimit = data.monthlyTrafficLimit
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.instance.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 获取实例配置（包含覆盖字段）
+ */
+export async function getInstanceConfig(instanceId: number): Promise<{
+  limits_read: string | null
+  limits_write: string | null
+  limits_read_iops: number | null
+  limits_write_iops: number | null
+  limits_ingress: string | null
+  limits_egress: string | null
+  limits_processes: number | null
+  limits_cpu_priority: number | null
+  boot_autostart: boolean | null
+  boot_autostart_priority: number | null
+  boot_autostart_delay: number | null
+  boot_host_shutdown_timeout: number | null
+} | null> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      limitsRead: true,
+      limitsWrite: true,
+      limitsReadIops: true,
+      limitsWriteIops: true,
+      limitsIngress: true,
+      limitsEgress: true,
+      limitsProcesses: true,
+      limitsCpuPriority: true,
+      bootAutostart: true,
+      bootAutostartPriority: true,
+      bootAutostartDelay: true,
+      bootHostShutdownTimeout: true
+    }
+  })
+
+  if (!instance) return null
+
+  return {
+    limits_read: instance.limitsRead,
+    limits_write: instance.limitsWrite,
+    limits_read_iops: instance.limitsReadIops,
+    limits_write_iops: instance.limitsWriteIops,
+    limits_ingress: instance.limitsIngress,
+    limits_egress: instance.limitsEgress,
+    limits_processes: instance.limitsProcesses,
+    limits_cpu_priority: instance.limitsCpuPriority,
+    boot_autostart: instance.bootAutostart,
+    boot_autostart_priority: instance.bootAutostartPriority,
+    boot_autostart_delay: instance.bootAutostartDelay,
+    boot_host_shutdown_timeout: instance.bootHostShutdownTimeout
+  }
+}
+
+/**
+ * 更新实例配置覆盖
+ */
+export async function updateInstanceConfig(instanceId: number, data: {
+  limitsRead?: string | null
+  limitsWrite?: string | null
+  limitsReadIops?: number | null
+  limitsWriteIops?: number | null
+  limitsIngress?: string | null
+  limitsEgress?: string | null
+  limitsProcesses?: number | null
+  limitsCpuPriority?: number | null
+  bootAutostart?: boolean | null
+  bootAutostartPriority?: number | null
+  bootAutostartDelay?: number | null
+  bootHostShutdownTimeout?: number | null
+}): Promise<void> {
+  const updateData: {
+    limitsRead?: string | null
+    limitsWrite?: string | null
+    limitsReadIops?: number | null
+    limitsWriteIops?: number | null
+    limitsIngress?: string | null
+    limitsEgress?: string | null
+    limitsProcesses?: number | null
+    limitsCpuPriority?: number | null
+    bootAutostart?: boolean | null
+    bootAutostartPriority?: number | null
+    bootAutostartDelay?: number | null
+    bootHostShutdownTimeout?: number | null
+  } = {}
+
+  if (data.limitsRead !== undefined) updateData.limitsRead = data.limitsRead
+  if (data.limitsWrite !== undefined) updateData.limitsWrite = data.limitsWrite
+  if (data.limitsReadIops !== undefined) updateData.limitsReadIops = data.limitsReadIops
+  if (data.limitsWriteIops !== undefined) updateData.limitsWriteIops = data.limitsWriteIops
+  if (data.limitsIngress !== undefined) updateData.limitsIngress = data.limitsIngress
+  if (data.limitsEgress !== undefined) updateData.limitsEgress = data.limitsEgress
+  if (data.limitsProcesses !== undefined) updateData.limitsProcesses = data.limitsProcesses
+  if (data.limitsCpuPriority !== undefined) updateData.limitsCpuPriority = data.limitsCpuPriority
+  if (data.bootAutostart !== undefined) updateData.bootAutostart = data.bootAutostart
+  if (data.bootAutostartPriority !== undefined) updateData.bootAutostartPriority = data.bootAutostartPriority
+  if (data.bootAutostartDelay !== undefined) updateData.bootAutostartDelay = data.bootAutostartDelay
+  if (data.bootHostShutdownTimeout !== undefined) updateData.bootHostShutdownTimeout = data.bootHostShutdownTimeout
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: updateData
+  })
+}
+
+/**
+ * 更新实例 SWAP 配置
+ */
+export async function updateInstanceSwap(instanceId: number, data: {
+  swapEnabled?: boolean
+  swapSize?: number | null
+}): Promise<void> {
+  const updateData: {
+    swapEnabled?: boolean
+    swapSize?: number | null
+  } = {}
+
+  if (data.swapEnabled !== undefined) updateData.swapEnabled = data.swapEnabled
+  if (data.swapSize !== undefined) updateData.swapSize = data.swapSize ?? null
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: updateData
+  })
+}
+
+/**
+ * 获取超时的创建中实例
+ * 返回创建时间超过指定时间且仍处于 creating 状态的实例
+ */
+export async function getStuckCreatingInstances(timeoutMs: number): Promise<Array<{
+  id: number
+  incus_id: string
+  name: string
+  host_id: number
+  user_id: number
+  cpu: number
+  memory: number
+  disk: number
+  network_mode: string
+  port_limit: number | null
+  created_at: Date
+}>> {
+  const threshold = new Date(Date.now() - timeoutMs)
+  
+  const instances = await prisma.instance.findMany({
+    where: {
+      status: 'creating',
+      createdAt: { lt: threshold }
+    },
+    select: {
+      id: true,
+      incusId: true,
+      name: true,
+      hostId: true,
+      userId: true,
+      cpu: true,
+      memory: true,
+      disk: true,
+      networkMode: true,
+      portLimit: true,
+      createdAt: true
+    }
+  })
+  
+  return instances.map(inst => ({
+    id: inst.id,
+    incus_id: inst.incusId,
+    name: inst.name,
+    host_id: inst.hostId,
+    user_id: inst.userId,
+    cpu: inst.cpu,
+    memory: inst.memory,
+    disk: inst.disk,
+    network_mode: inst.networkMode,
+    port_limit: inst.portLimit,
+    created_at: inst.createdAt
+  }))
+}
+
+/**
+ * 封停实例
+ */
+export async function suspendInstance(instanceId: number, data: {
+  suspendedBy: number | null  // null 表示系统自动封停
+  suspendReason: string       // 封停原因，'expired' 表示到期封停，其他为用户填写的原因，空字符串表示未填写
+}): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      status: 'suspended',
+      suspendedAt: new Date(),
+      suspendedBy: data.suspendedBy,
+      suspendReason: data.suspendReason
+    }
+  })
+}
+
+/**
+ * 解除封停
+ */
+export async function unsuspendInstance(instanceId: number): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      status: 'stopped',
+      suspendedAt: null,
+      suspendedBy: null,
+      suspendReason: null
+    }
+  })
+}
+
+/**
+ * 更新实例到期时间
+ */
+export async function updateInstanceExpiry(instanceId: number, expiresAt: Date | null): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: { expiresAt }
+  })
+}
+
+/**
+ * 获取即将到期的实例（用于计费调度器）
+ */
+export async function getExpiringInstances(beforeDate: Date): Promise<Array<{
+  id: number
+  name: string
+  user_id: number
+  expires_at: Date
+  status: string
+}>> {
+  const instances = await prisma.instance.findMany({
+    where: {
+      expiresAt: { lte: beforeDate },
+      status: { notIn: ['deleted', 'suspended'] }
+    },
+    select: {
+      id: true,
+      name: true,
+      userId: true,
+      expiresAt: true,
+      status: true
+    }
+  })
+
+  return instances.map(inst => ({
+    id: inst.id,
+    name: inst.name,
+    user_id: inst.userId,
+    expires_at: inst.expiresAt!,
+    status: inst.status
+  }))
+}
+
+/**
+ * 获取已到期未封停的实例
+ */
+export async function getExpiredUnsuspendedInstances(): Promise<Array<{
+  id: number
+  name: string
+  user_id: number
+  expires_at: Date
+}>> {
+  const now = new Date()
+  const instances = await prisma.instance.findMany({
+    where: {
+      expiresAt: { lte: now },
+      status: { notIn: ['deleted', 'suspended'] }
+    },
+    select: {
+      id: true,
+      name: true,
+      userId: true,
+      expiresAt: true
+    }
+  })
+
+  return instances.map(inst => ({
+    id: inst.id,
+    name: inst.name,
+    user_id: inst.userId,
+    expires_at: inst.expiresAt!
+  }))
+}
diff --git a/server/src/db/invite-codes.ts b/server/src/db/invite-codes.ts
new file mode 100644
index 0000000..eda6388
--- /dev/null
+++ b/server/src/db/invite-codes.ts
@@ -0,0 +1,313 @@
+/**
+ * 邀请码相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { InviteCode } from '../types/database.js'
+
+/**
+ * 查找邀请码
+ */
+export async function findInviteCode(code: string): Promise<InviteCode | null> {
+  const inviteCode = await prisma.inviteCode.findFirst({
+    where: {
+      code,
+      usedBy: null
+    }
+  })
+  
+  if (!inviteCode) return null
+  
+  return {
+    id: inviteCode.id,
+    code: inviteCode.code,
+    created_by: inviteCode.createdBy,
+    used_by: inviteCode.usedBy,
+    used_at: inviteCode.usedAt?.toISOString() ?? null,
+    expires_at: inviteCode.expiresAt?.toISOString() ?? null,
+    cost_snapshot: inviteCode.costSnapshot ?? null,
+    created_at: inviteCode.createdAt.toISOString()
+  }
+}
+
+/**
+ * 创建邀请码
+ */
+export async function createInviteCode(
+  code: string,
+  createdBy: number,
+  expiresAt: string | null = null
+): Promise<number> {
+  const inviteCode = await prisma.inviteCode.create({
+    data: {
+      code,
+      createdBy,
+      expiresAt: expiresAt ? new Date(expiresAt) : null
+    }
+  })
+  
+  return inviteCode.id
+}
+
+/**
+ * 使用邀请码
+ */
+export async function useInviteCode(code: string, userId: number): Promise<void> {
+  await prisma.inviteCode.updateMany({
+    where: { code },
+    data: {
+      usedBy: userId,
+      usedAt: new Date()
+    }
+  })
+}
+
+/**
+ * 获取邀请码列表
+ */
+export async function getInviteCodes(createdBy: number | null = null): Promise<InviteCode[]> {
+  const inviteCodes = await prisma.inviteCode.findMany({
+    where: createdBy ? { createdBy } : undefined,
+    orderBy: {
+      id: 'desc'
+    }
+  })
+  
+  return inviteCodes.map(ic => ({
+    id: ic.id,
+    code: ic.code,
+    created_by: ic.createdBy,
+    used_by: ic.usedBy,
+    used_at: ic.usedAt?.toISOString() ?? null,
+    expires_at: ic.expiresAt?.toISOString() ?? null,
+    cost_snapshot: ic.costSnapshot ?? null,
+    created_at: ic.createdAt.toISOString()
+  }))
+}
+
+/**
+ * 获取邀请码列表（包含用户信息）
+ */
+export async function getInviteCodesWithUsers(
+  page: number,
+  pageSize: number,
+  status?: 'used' | 'unused'
+): Promise<{
+  invites: Array<InviteCode & {
+    usedByUsername?: string
+    usedByEmail?: string | null
+    usedByAvatarStyle?: string
+    createdByUsername?: string
+    createdByEmail?: string | null
+    createdByAvatarStyle?: string
+  }>
+  total: number
+}> {
+  const where = status === 'used'
+    ? { usedBy: { not: null } }
+    : status === 'unused'
+      ? { usedBy: null }
+      : undefined
+
+  const [total, inviteCodes] = await Promise.all([
+    prisma.inviteCode.count({ where }),
+    prisma.inviteCode.findMany({
+      where,
+      skip: (page - 1) * pageSize,
+      take: pageSize,
+      include: {
+        user: {
+          select: {
+            username: true,
+            email: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        creator: {
+          select: {
+            username: true,
+            email: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        }
+      },
+      orderBy: {
+        id: 'desc'
+      }
+    })
+  ])
+  
+  return {
+    invites: inviteCodes.map(ic => ({
+      id: ic.id,
+      code: ic.code,
+      created_by: ic.createdBy,
+      used_by: ic.usedBy,
+      used_at: ic.usedAt?.toISOString() ?? null,
+      expires_at: ic.expiresAt?.toISOString() ?? null,
+      cost_snapshot: ic.costSnapshot ?? null,
+      created_at: ic.createdAt.toISOString(),
+      usedByUsername: ic.user?.username,
+      usedByEmail: ic.user?.email ?? null,
+      usedByAvatarStyle: ic.user?.avatarStyle,
+      usedByAvatarBadgeId: ic.user?.avatarBadgeId ?? null,
+      createdByUsername: ic.creator.username,
+      createdByEmail: ic.creator.email ?? null,
+      createdByAvatarStyle: ic.creator.avatarStyle,
+      createdByAvatarBadgeId: ic.creator.avatarBadgeId ?? null
+    })),
+    total
+  }
+}
+
+/**
+ * 获取用户的邀请码列表（包含用户信息）
+ */
+export async function getUserInviteCodesWithUsers(
+  userId: number,
+  page: number,
+  pageSize: number
+): Promise<{
+  invites: Array<InviteCode & {
+    usedByUsername?: string
+    usedByEmail?: string | null
+    usedByAvatarStyle?: string
+  }>
+  total: number
+}> {
+  const [total, inviteCodes] = await Promise.all([
+    prisma.inviteCode.count({
+      where: {
+        createdBy: userId
+      }
+    }),
+    prisma.inviteCode.findMany({
+      where: {
+        createdBy: userId
+      },
+      skip: (page - 1) * pageSize,
+      take: pageSize,
+      include: {
+        user: {
+          select: {
+            username: true,
+            email: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        }
+      },
+      orderBy: {
+        id: 'desc'
+      }
+    })
+  ])
+  
+  return {
+    invites: inviteCodes.map(ic => ({
+      id: ic.id,
+      code: ic.code,
+      created_by: ic.createdBy,
+      used_by: ic.usedBy,
+      used_at: ic.usedAt?.toISOString() ?? null,
+      expires_at: ic.expiresAt?.toISOString() ?? null,
+      cost_snapshot: ic.costSnapshot ?? null,
+      created_at: ic.createdAt.toISOString(),
+      usedByUsername: ic.user?.username,
+      usedByEmail: ic.user?.email ?? null,
+      usedByAvatarStyle: ic.user?.avatarStyle,
+      usedByAvatarBadgeId: ic.user?.avatarBadgeId ?? null
+    })),
+    total
+  }
+}
+
+/**
+ * 获取用户邀请码统计信息
+ */
+export async function getUserInviteCodeStats(userId: number): Promise<{
+  total: number
+  used: number
+  unused: number
+  usageRate: number
+}> {
+  const [total, used] = await Promise.all([
+    prisma.inviteCode.count({
+      where: { createdBy: userId }
+    }),
+    prisma.inviteCode.count({
+      where: {
+        createdBy: userId,
+        usedBy: { not: null }
+      }
+    })
+  ])
+  
+  const unused = total - used
+  const usageRate = total > 0 ? (used / total) * 100 : 0
+  
+  return {
+    total,
+    used,
+    unused,
+    usageRate
+  }
+}
+
+/**
+ * 根据 ID 获取邀请码
+ */
+export async function getInviteCodeById(id: number): Promise<InviteCode | null> {
+  const inviteCode = await prisma.inviteCode.findUnique({
+    where: { id }
+  })
+  
+  if (!inviteCode) return null
+  
+  return {
+    id: inviteCode.id,
+    code: inviteCode.code,
+    created_by: inviteCode.createdBy,
+    used_by: inviteCode.usedBy,
+    used_at: inviteCode.usedAt?.toISOString() ?? null,
+    expires_at: inviteCode.expiresAt?.toISOString() ?? null,
+    cost_snapshot: inviteCode.costSnapshot ?? null,
+    created_at: inviteCode.createdAt.toISOString()
+  }
+}
+
+/**
+ * 删除邀请码（允许删除已使用的）
+ */
+export async function deleteInviteCode(id: number): Promise<void> {
+  await prisma.inviteCode.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 检查用户是否可以生成邀请码
+ * 规则：当已生成的邀请码个数大于10个且注册使用率不足80%时，不允许再生成
+ */
+export async function canUserGenerateInviteCode(userId: number): Promise<{ allowed: boolean; reason?: string }> {
+  const stats = await getUserInviteCodeStats(userId)
+  
+  // 如果邀请码数量 <= 10，允许生成
+  if (stats.total <= 10) {
+    return { allowed: true }
+  }
+  
+  // 如果使用率 >= 80%，允许生成
+  if (stats.usageRate >= 80) {
+    return { allowed: true }
+  }
+  
+  // 否则不允许生成
+  return {
+    allowed: false,
+    reason: `邀请码使用率小于80%，无法创建更多邀请码。您已有 ${stats.total} 个邀请码，使用率为 ${stats.usageRate.toFixed(1)}%，需要达到 80% 才能继续生成`
+  }
+}
diff --git a/server/src/db/ip-addresses.ts b/server/src/db/ip-addresses.ts
new file mode 100644
index 0000000..aaeb817
--- /dev/null
+++ b/server/src/db/ip-addresses.ts
@@ -0,0 +1,220 @@
+/**
+ * IP 地址数据库操作
+ */
+import { prisma } from './prisma.js'
+import type { IpType } from '@prisma/client'
+
+export interface CreateIpAddressData {
+    address: string
+    type: IpType
+    isPrimary: boolean
+    isCustom?: boolean
+    device: string
+    hostId?: number
+    instanceId: number
+}
+
+async function resolveInstanceHostId(instanceId: number): Promise<number> {
+    const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        select: { hostId: true }
+    })
+
+    if (!instance) {
+        throw new Error(`Instance ${instanceId} not found while creating IP address record`)
+    }
+
+    return instance.hostId
+}
+
+/**
+ * 创建 IP 地址记录
+ */
+export async function createIpAddress(data: CreateIpAddressData) {
+    const hostId = data.hostId ?? await resolveInstanceHostId(data.instanceId)
+
+    return prisma.ipAddress.create({
+        data: {
+            address: data.address,
+            type: data.type,
+            isPrimary: data.isPrimary,
+            isCustom: data.isCustom ?? false,
+            device: data.device,
+            host: {
+                connect: { id: hostId }
+            },
+            instance: {
+                connect: { id: data.instanceId }
+            }
+        }
+    })
+}
+
+/**
+ * 获取实例的所有 IP 地址
+ */
+export async function getIpAddressesByInstanceId(instanceId: number) {
+    return prisma.ipAddress.findMany({
+        where: { instanceId },
+        orderBy: [
+            { isPrimary: 'desc' },
+            { createdAt: 'asc' }
+        ]
+    })
+}
+
+/**
+ * 获取实例的主 IP 地址
+ */
+export async function getPrimaryIpAddress(instanceId: number, type: IpType) {
+    return prisma.ipAddress.findFirst({
+        where: {
+            instanceId,
+            type,
+            isPrimary: true
+        }
+    })
+}
+
+/**
+ * 根据 ID 获取 IP 地址
+ */
+export async function getIpAddressById(id: number) {
+    return prisma.ipAddress.findUnique({
+        where: { id },
+        include: {
+            instance: {
+                include: {
+                    host: true
+                }
+            }
+        }
+    })
+}
+
+/**
+ * 删除 IP 地址
+ */
+export async function deleteIpAddress(id: number) {
+    return prisma.ipAddress.delete({
+        where: { id }
+    })
+}
+
+/**
+ * 获取实例下一个可用的网卡设备名
+ */
+export async function getNextDeviceName(instanceId: number): Promise<string> {
+    const existingIps = await prisma.ipAddress.findMany({
+        where: { instanceId },
+        select: { device: true }
+    })
+
+    // 提取已使用的设备编号
+    const usedIndices = existingIps
+        .map((ip: { device: string }) => {
+            const match = ip.device.match(/^eth(\d+)$/)
+            return match ? parseInt(match[1], 10) : -1
+        })
+        .filter((idx: number) => idx >= 0)
+
+    // 找到下一个可用编号
+    let nextIndex = 0
+    while (usedIndices.includes(nextIndex)) {
+        nextIndex++
+    }
+
+    return `eth${nextIndex}`
+}
+
+/**
+ * 检查 IP 地址是否已存在（全局检查）
+ * 用于 IPv6 等公网地址的全局唯一性检查
+ * 
+ * 检查两个来源：
+ * 1. IpAddress 表中的记录
+ * 2. Instance 表的 ipv6 字段（防止数据不一致导致的冲突）
+ * 
+ * 注意：排除已删除状态的实例
+ */
+export async function isIpAddressExists(address: string): Promise<boolean> {
+    // 1. 检查 IpAddress 表（排除已删除的实例）
+    const existingInIpTable = await prisma.ipAddress.findFirst({
+        where: {
+            address,
+            type: 'inet6',
+            instance: {
+                status: { not: 'deleted' }
+            }
+        }
+    })
+    if (existingInIpTable) {
+        return true
+    }
+
+    // 2. 检查 Instance 表的 ipv6 字段（防止数据不一致）
+    // 有些实例可能 ipv6 字段有值，但 IpAddress 表没有对应记录
+    const existingInInstanceTable = await prisma.instance.findFirst({
+        where: {
+            ipv6: address,
+            status: { not: 'deleted' }
+        }
+    })
+    
+    return !!existingInInstanceTable
+}
+
+/**
+ * 检查 IP 地址在指定宿主机范围内是否已存在
+ * 用于内网 IPv4 地址的按宿主机唯一性检查
+ * （不同宿主机的内网是隔离的，可以使用相同的内网 IP）
+ * 
+ * 检查两个来源：
+ * 1. IpAddress 表中的记录
+ * 2. Instance 表的 ipv4 字段（防止数据不一致导致的冲突）
+ * 
+ * 注意：排除已删除状态的实例
+ * 
+ * @param address IP 地址
+ * @param hostId 宿主机 ID
+ * @returns 是否已存在
+ */
+export async function isIpAddressExistsOnHost(address: string, hostId: number): Promise<boolean> {
+    // 1. 检查 IpAddress 表（排除已删除的实例）
+    const existingInIpTable = await prisma.ipAddress.findFirst({
+        where: {
+            address,
+            type: 'inet4',
+            host: {
+                is: { id: hostId }
+            },
+            instance: {
+                status: { not: 'deleted' }
+            }
+        }
+    })
+    if (existingInIpTable) {
+        return true
+    }
+
+    // 2. 检查 Instance 表的 ipv4 字段（防止数据不一致）
+    // 有些实例可能 ipv4 字段有值，但 IpAddress 表没有对应记录
+    const existingInInstanceTable = await prisma.instance.findFirst({
+        where: {
+            hostId,
+            ipv4: address,
+            status: { not: 'deleted' }
+        }
+    })
+    
+    return !!existingInInstanceTable
+}
+
+/**
+ * 统计实例的 IP 数量
+ */
+export async function countIpAddresses(instanceId: number): Promise<number> {
+    return prisma.ipAddress.count({
+        where: { instanceId }
+    })
+}
diff --git a/server/src/db/ipv6-subnets.ts b/server/src/db/ipv6-subnets.ts
new file mode 100644
index 0000000..b24fdc7
--- /dev/null
+++ b/server/src/db/ipv6-subnets.ts
@@ -0,0 +1,88 @@
+/**
+ * IPv6 网段数据库操作
+ */
+import { prisma } from './prisma.js'
+
+export interface CreateIpv6SubnetData {
+  cidr: string
+  primaryIp: string
+  device?: string
+  instanceId: number
+}
+
+/**
+ * 创建 IPv6 网段记录
+ */
+export async function createIpv6Subnet(data: CreateIpv6SubnetData) {
+  return prisma.ipv6Subnet.create({
+    data: {
+      cidr: data.cidr,
+      primaryIp: data.primaryIp,
+      device: data.device || 'eth1',
+      instanceId: data.instanceId
+    }
+  })
+}
+
+/**
+ * 获取实例的所有 IPv6 网段
+ */
+export async function getIpv6SubnetsByInstanceId(instanceId: number) {
+  return prisma.ipv6Subnet.findMany({
+    where: { instanceId },
+    orderBy: { createdAt: 'asc' }
+  })
+}
+
+/**
+ * 根据 ID 获取 IPv6 网段
+ */
+export async function getIpv6SubnetById(id: number) {
+  return prisma.ipv6Subnet.findUnique({
+    where: { id },
+    include: {
+      instance: {
+        include: {
+          host: true
+        }
+      }
+    }
+  })
+}
+
+/**
+ * 根据 CIDR 获取 IPv6 网段
+ */
+export async function getIpv6SubnetByCidr(cidr: string) {
+  return prisma.ipv6Subnet.findUnique({
+    where: { cidr }
+  })
+}
+
+/**
+ * 删除 IPv6 网段
+ */
+export async function deleteIpv6Subnet(id: number) {
+  return prisma.ipv6Subnet.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 检查网段 CIDR 是否已存在
+ */
+export async function isIpv6SubnetExists(cidr: string): Promise<boolean> {
+  const existing = await prisma.ipv6Subnet.findUnique({
+    where: { cidr }
+  })
+  return !!existing
+}
+
+/**
+ * 统计实例的网段数量
+ */
+export async function countIpv6Subnets(instanceId: number): Promise<number> {
+  return prisma.ipv6Subnet.count({
+    where: { instanceId }
+  })
+}
diff --git a/server/src/db/login-records.ts b/server/src/db/login-records.ts
new file mode 100644
index 0000000..ab25862
--- /dev/null
+++ b/server/src/db/login-records.ts
@@ -0,0 +1,454 @@
+/**
+ * 登录记录数据库操作
+ */
+
+import { prisma } from './prisma.js'
+
+export interface CreateLoginRecordParams {
+  userId: number
+  ip: string
+  country?: string | null
+  region?: string | null
+  city?: string | null
+  isp?: string | null
+  timezone?: string | null
+  userAgent?: string | null
+}
+
+export interface LoginRecordItem {
+  id: number
+  ip: string
+  country: string | null
+  region: string | null
+  city: string | null
+  isp: string | null
+  timezone: string | null
+  userAgent: string | null
+  createdAt: Date
+}
+
+/**
+ * 创建登录记录
+ */
+export async function createLoginRecord(params: CreateLoginRecordParams): Promise<void> {
+  await prisma.loginRecord.create({
+    data: {
+      userId: params.userId,
+      ip: params.ip,
+      country: params.country || null,
+      region: params.region || null,
+      city: params.city || null,
+      isp: params.isp || null,
+      timezone: params.timezone || null,
+      userAgent: params.userAgent || null
+    }
+  })
+}
+
+/**
+ * 获取用户登录记录列表（分页）
+ */
+export async function getUserLoginRecords(
+  userId: number,
+  page: number = 1,
+  pageSize: number = 20
+): Promise<{ records: LoginRecordItem[]; total: number }> {
+  const skip = (page - 1) * pageSize
+
+  const [records, total] = await Promise.all([
+    prisma.loginRecord.findMany({
+      where: { userId },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize,
+      select: {
+        id: true,
+        ip: true,
+        country: true,
+        region: true,
+        city: true,
+        isp: true,
+        timezone: true,
+        userAgent: true,
+        createdAt: true
+      }
+    }),
+    prisma.loginRecord.count({ where: { userId } })
+  ])
+
+  return { records, total }
+}
+
+/**
+ * 获取用户最近的登录记录（用于安全检查）
+ */
+export async function getRecentLoginRecords(
+  userId: number,
+  limit: number = 10
+): Promise<LoginRecordItem[]> {
+  return prisma.loginRecord.findMany({
+    where: { userId },
+    orderBy: { createdAt: 'desc' },
+    take: limit,
+    select: {
+      id: true,
+      ip: true,
+      country: true,
+      region: true,
+      city: true,
+      isp: true,
+      timezone: true,
+      userAgent: true,
+      createdAt: true
+    }
+  })
+}
+
+/**
+ * 删除用户所有登录记录（用于账户注销等场景）
+ */
+export async function deleteUserLoginRecords(userId: number): Promise<number> {
+  const result = await prisma.loginRecord.deleteMany({
+    where: { userId }
+  })
+  return result.count
+}
+
+/**
+ * 批量获取用户最后登录记录
+ * 用于管理员查看用户列表时显示最后活动
+ */
+export async function getLastLoginRecordsForUsers(
+  userIds: number[]
+): Promise<Map<number, LoginRecordItem | null>> {
+  if (userIds.length === 0) {
+    return new Map()
+  }
+
+  // 使用 Prisma 的 findMany + distinct，按用户分组获取最新记录
+  const records = await prisma.loginRecord.findMany({
+    where: {
+      userId: { in: userIds }
+    },
+    orderBy: {
+      createdAt: 'desc'
+    },
+    select: {
+      id: true,
+      userId: true,
+      ip: true,
+      country: true,
+      region: true,
+      city: true,
+      isp: true,
+      timezone: true,
+      userAgent: true,
+      createdAt: true
+    }
+  })
+
+  // 按用户分组，只保留每个用户的最新记录
+  const lastRecordMap = new Map<number, LoginRecordItem | null>()
+  for (const userId of userIds) {
+    lastRecordMap.set(userId, null)
+  }
+  
+  for (const record of records) {
+    if (!lastRecordMap.get(record.userId)) {
+      lastRecordMap.set(record.userId, {
+        id: record.id,
+        ip: record.ip,
+        country: record.country,
+        region: record.region,
+        city: record.city,
+        isp: record.isp,
+        timezone: record.timezone,
+        userAgent: record.userAgent,
+        createdAt: record.createdAt
+      })
+    }
+  }
+
+  return lastRecordMap
+}
+
+/**
+ * 获取被多个用户共享的IP组（用于检测关联账号）
+ * @param days 查询近多少天的登录记录
+ * @param minUsers 最少关联用户数（默认2）
+ */
+export async function getSharedIPGroups(
+  days: number = 90,
+  minUsers: number = 2
+): Promise<{
+  ip: string
+  users: {
+    id: number
+    username: string
+    email: string | null
+    status: string
+    loginCount: number
+    lastLogin: Date
+  }[]
+  totalLogins: number
+}[]> {
+  const sinceDate = new Date(Date.now() - days * 24 * 60 * 60 * 1000)
+
+  // 步骤1：查找被多个用户使用的IP
+  const sharedIPs = await prisma.loginRecord.groupBy({
+    by: ['ip'],
+    where: {
+      createdAt: { gte: sinceDate }
+    },
+    _count: {
+      userId: true
+    },
+    having: {
+      userId: {
+        _count: {
+          gte: minUsers
+        }
+      }
+    }
+  })
+
+  // 过滤出真正被不同用户使用的IP
+  const result: {
+    ip: string
+    users: {
+      id: number
+      username: string
+      email: string | null
+      status: string
+      loginCount: number
+      lastLogin: Date
+    }[]
+    totalLogins: number
+  }[] = []
+
+  for (const ipGroup of sharedIPs) {
+    // 查询该IP的所有用户和登录信息
+    const records = await prisma.loginRecord.findMany({
+      where: {
+        ip: ipGroup.ip,
+        createdAt: { gte: sinceDate }
+      },
+      select: {
+        userId: true,
+        createdAt: true,
+        user: {
+          select: {
+            id: true,
+            username: true,
+            email: true,
+            status: true
+          }
+        }
+      },
+      orderBy: {
+        createdAt: 'desc'
+      }
+    })
+
+    // 按用户分组统计
+    const userMap = new Map<number, {
+      id: number
+      username: string
+      email: string | null
+      status: string
+      loginCount: number
+      lastLogin: Date
+    }>()
+
+    for (const record of records) {
+      if (!userMap.has(record.userId)) {
+        userMap.set(record.userId, {
+          id: record.user.id,
+          username: record.user.username,
+          email: record.user.email,
+          status: record.user.status,
+          loginCount: 1,
+          lastLogin: record.createdAt
+        })
+      } else {
+        const user = userMap.get(record.userId)!
+        user.loginCount++
+      }
+    }
+
+    // 只有真正被多个不同用户使用的IP才加入结果
+    if (userMap.size >= minUsers) {
+      result.push({
+        ip: ipGroup.ip,
+        users: Array.from(userMap.values()).sort((a, b) => b.lastLogin.getTime() - a.lastLogin.getTime()),
+        totalLogins: records.length
+      })
+    }
+  }
+
+  // 按关联用户数降序排列
+  return result.sort((a, b) => b.users.length - a.users.length)
+}
+
+/**
+ * 获取邮箱相似的用户组（用于检测关联账号）
+ * 相似规则：邮箱前缀相同，仅差数字后缀
+ */
+export async function getSimilarEmailGroups(): Promise<{
+  pattern: string
+  users: {
+    id: number
+    username: string
+    email: string
+    status: string
+    createdAt: Date
+  }[]
+}[]> {
+  // 获取所有有邮箱的用户
+  const users = await prisma.user.findMany({
+    where: {
+      email: { not: null }
+    },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      status: true,
+      createdAt: true
+    }
+  })
+
+  // 提取邮箱前缀（去除末尾数字）
+  const prefixMap = new Map<string, {
+    id: number
+    username: string
+    email: string
+    status: string
+    createdAt: Date
+  }[]>()
+
+  for (const user of users) {
+    if (!user.email) continue
+    
+    const [localPart, domain] = user.email.split('@')
+    if (!localPart || !domain) continue
+    
+    // 提取前缀：去除末尾的数字、下划线、短横线
+    const prefix = localPart.replace(/[\d_-]+$/, '').toLowerCase()
+    if (prefix.length < 2) continue // 前缀太短无意义
+    
+    const key = `${prefix}*@${domain}`
+    
+    if (!prefixMap.has(key)) {
+      prefixMap.set(key, [])
+    }
+    prefixMap.get(key)!.push({
+      id: user.id,
+      username: user.username,
+      email: user.email,
+      status: user.status,
+      createdAt: user.createdAt
+    })
+  }
+
+  // 过滤出有多个用户的组
+  const result: {
+    pattern: string
+    users: {
+      id: number
+      username: string
+      email: string
+      status: string
+      createdAt: Date
+    }[]
+  }[] = []
+
+  for (const [pattern, groupUsers] of prefixMap) {
+    if (groupUsers.length >= 2) {
+      result.push({
+        pattern,
+        users: groupUsers.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+      })
+    }
+  }
+
+  // 按用户数降序排列
+  return result.sort((a, b) => b.users.length - a.users.length)
+}
+
+/**
+ * 获取用户名相似的用户组（用于检测关联账号）
+ * 相似规则：用户名前缀相同，仅差数字后缀
+ */
+export async function getSimilarUsernameGroups(): Promise<{
+  pattern: string
+  users: {
+    id: number
+    username: string
+    email: string | null
+    status: string
+    createdAt: Date
+  }[]
+}[]> {
+  const users = await prisma.user.findMany({
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      status: true,
+      createdAt: true
+    }
+  })
+
+  // 提取用户名前缀（去除末尾数字）
+  const prefixMap = new Map<string, {
+    id: number
+    username: string
+    email: string | null
+    status: string
+    createdAt: Date
+  }[]>()
+
+  for (const user of users) {
+    // 提取前缀：去除末尾的数字、下划线、短横线
+    const prefix = user.username.replace(/[\d_-]+$/, '').toLowerCase()
+    if (prefix.length < 2) continue // 前缀太短无意义
+    
+    const key = `${prefix}*`
+    
+    if (!prefixMap.has(key)) {
+      prefixMap.set(key, [])
+    }
+    prefixMap.get(key)!.push({
+      id: user.id,
+      username: user.username,
+      email: user.email,
+      status: user.status,
+      createdAt: user.createdAt
+    })
+  }
+
+  // 过滤出有多个用户的组
+  const result: {
+    pattern: string
+    users: {
+      id: number
+      username: string
+      email: string | null
+      status: string
+      createdAt: Date
+    }[]
+  }[] = []
+
+  for (const [pattern, groupUsers] of prefixMap) {
+    if (groupUsers.length >= 2) {
+      result.push({
+        pattern,
+        users: groupUsers.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+      })
+    }
+  }
+
+  // 按用户数降序排列
+  return result.sort((a, b) => b.users.length - a.users.length)
+}
diff --git a/server/src/db/logs.ts b/server/src/db/logs.ts
new file mode 100644
index 0000000..93d1250
--- /dev/null
+++ b/server/src/db/logs.ts
@@ -0,0 +1,388 @@
+/**
+ * 日志相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Log } from '../types/database.js'
+import type { Prisma } from '@prisma/client'
+
+// ==================== 日志模块常量 ====================
+
+export const LogModule = {
+  SECURITY: 'security',
+  INSTANCE: 'instance',
+  SNAPSHOT: 'snapshot',
+  BACKUP: 'backup',
+  IMAGE: 'image',
+  HOST: 'host',
+  PACKAGE: 'package',
+  USER: 'user',
+  PERSONAL: 'personal',
+  SSH_KEY: 'ssh_key',
+  NOTIFICATION: 'notification',
+  SYSTEM: 'system',
+  AUTH: 'auth'
+} as const
+
+// 日志操作常量
+export const LogAction = {
+  // 实例操作
+  INSTANCE_CREATE: 'instance.create',
+  INSTANCE_DELETE: 'instance.delete',
+  INSTANCE_START: 'instance.start',
+  INSTANCE_STOP: 'instance.stop',
+  INSTANCE_RESTART: 'instance.restart',
+  INSTANCE_REBUILD: 'instance.rebuild',
+  INSTANCE_UPDATE_QUOTA: 'instance.update_quota',
+  // 端口映射
+  PORT_ADD: 'port.add',
+  PORT_DELETE: 'port.delete',
+  // 快照操作
+  SNAPSHOT_CREATE: 'snapshot.create',
+  SNAPSHOT_DELETE: 'snapshot.delete',
+  SNAPSHOT_RESTORE: 'snapshot.restore',
+  // 备份操作
+  BACKUP_CREATE: 'backup.create',
+  BACKUP_DELETE: 'backup.delete',
+  BACKUP_EXPORT: 'backup.export',
+  // 镜像操作
+  IMAGE_SYNC: 'image.sync',
+  IMAGE_DELETE: 'image.delete',
+  IMAGE_CREATE: 'image.create',
+  IMAGE_UPDATE: 'image.update',
+  // 节点操作
+  HOST_CREATE: 'host.create',
+  HOST_UPDATE: 'host.update',
+  HOST_DELETE: 'host.delete',
+  HOST_TEST: 'host.test',
+  // 套餐操作
+  PACKAGE_CREATE: 'package.create',
+  PACKAGE_UPDATE: 'package.update',
+  PACKAGE_DELETE: 'package.delete',
+  // 用户管理
+  USER_BAN: 'user.ban',
+  USER_UNBAN: 'user.unban',
+  USER_DELETE: 'user.delete',
+  USER_UPDATE_QUOTA: 'user.update_quota',
+  USER_REVOKE_SESSIONS: 'user.revoke_sessions',
+  // 个人设置
+  PROFILE_UPDATE: 'profile.update',
+  PASSWORD_CHANGE: 'password.change',
+  // SSH 密钥
+  SSH_KEY_ADD: 'ssh_key.add',
+  SSH_KEY_DELETE: 'ssh_key.delete',
+  // 通知设置
+  NOTIFICATION_ADD: 'notification.add',
+  NOTIFICATION_DELETE: 'notification.delete',
+  // 安全设置
+  TWO_FA_SETUP: '2fa.setup',
+  TWO_FA_ENABLE: '2fa.enable',
+  TWO_FA_DISABLE: '2fa.disable',
+  TWO_FA_RECOVERY_RESET: '2fa.recovery_reset',
+  // 认证操作
+  SESSION_REVOKE: 'session.revoke',
+  SESSION_REVOKE_ALL: 'session.revoke_all',
+  // 系统配置
+  SYSTEM_CONFIG_UPDATE: 'system.config_update'
+} as const
+
+// 日志结果常量
+export const LogResult = {
+  SUCCESS: 'success',
+  FAILED: 'failed',
+  WARNING: 'warning'
+} as const
+
+export type CreateLogOptions = {
+  instanceId?: number | null
+}
+
+const INSTANCE_NAME_PATTERN = /instance\s+"([^"]+)"/gi
+const INSTANCE_ID_PATTERNS = [
+  /instance\s*#(\d+)/gi,
+  /instance:\s*[^()]*\(#(\d+)\)/gi,
+  /new instance ID:\s*(\d+)/gi
+]
+
+function extractLogInstanceIds(content: string): number[] {
+  const ids = new Set<number>()
+
+  for (const pattern of INSTANCE_ID_PATTERNS) {
+    pattern.lastIndex = 0
+    for (const match of content.matchAll(pattern)) {
+      const id = Number(match[1])
+      if (Number.isSafeInteger(id) && id > 0) {
+        ids.add(id)
+      }
+    }
+  }
+
+  return Array.from(ids)
+}
+
+async function inferLogInstanceId(userId: number | null, content: string): Promise<number | null> {
+  const instanceIds = extractLogInstanceIds(content)
+  if (instanceIds.length === 1) {
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceIds[0] },
+      select: { id: true, userId: true }
+    })
+
+    if (instance && (userId === null || instance.userId === userId)) {
+      return instance.id
+    }
+  }
+
+  const names = Array.from(content.matchAll(INSTANCE_NAME_PATTERN))
+    .map(match => match[1]?.trim())
+    .filter((name): name is string => Boolean(name))
+
+  const uniqueNames = Array.from(new Set(names))
+  if (uniqueNames.length !== 1) return null
+
+  const matches = await prisma.instance.findMany({
+    where: {
+      name: uniqueNames[0],
+      ...(userId !== null ? { userId } : {})
+    },
+    select: { id: true },
+    take: 2
+  })
+
+  return matches.length === 1 ? matches[0].id : null
+}
+
+// ==================== 基础日志函数 ====================
+
+/**
+ * 创建日志记录（基础函数）
+ */
+export async function createLog(
+  userId: number | null,
+  module: string,
+  action: string,
+  content: string,
+  result: string,
+  options: CreateLogOptions = {}
+): Promise<void> {
+  try {
+    const instanceId = options.instanceId !== undefined
+      ? options.instanceId
+      : await inferLogInstanceId(userId, content)
+
+    await prisma.log.create({
+      data: {
+        userId: userId ?? null,
+        instanceId: instanceId ?? null,
+        module,
+        action,
+        content,
+        result
+      }
+    })
+  } catch (error) {
+    // 日志记录失败不应该影响主业务流程，只打印错误
+    console.error('日志记录失败:', error)
+  }
+}
+
+// ==================== 便捷日志函数 ====================
+
+/**
+ * 记录成功操作日志
+ */
+export async function logSuccess(
+  userId: number | null,
+  module: string,
+  action: string,
+  content: string,
+  options?: CreateLogOptions
+): Promise<void> {
+  await createLog(userId, module, action, content, LogResult.SUCCESS, options)
+}
+
+/**
+ * 记录失败操作日志
+ */
+export async function logFailure(
+  userId: number | null,
+  module: string,
+  action: string,
+  content: string,
+  options?: CreateLogOptions
+): Promise<void> {
+  await createLog(userId, module, action, content, LogResult.FAILED, options)
+}
+
+/**
+ * 记录警告日志
+ */
+export async function logWarning(
+  userId: number | null,
+  module: string,
+  action: string,
+  content: string,
+  options?: CreateLogOptions
+): Promise<void> {
+  await createLog(userId, module, action, content, LogResult.WARNING, options)
+}
+
+function combineWhereWithAnd(where: Prisma.LogWhereInput, condition: Prisma.LogWhereInput): void {
+  const existingAnd = Array.isArray(where.AND) ? where.AND : []
+  const base: Prisma.LogWhereInput = { ...where }
+  delete base.AND
+
+  const nextAnd: Prisma.LogWhereInput[] = []
+  if (Object.keys(base).length > 0) nextAnd.push(base)
+  nextAnd.push(...existingAnd, condition)
+
+  const mutableWhere = where as Record<string, unknown>
+  for (const key of Object.keys(mutableWhere)) {
+    delete mutableWhere[key]
+  }
+
+  if (nextAnd.length === 1) {
+    Object.assign(where, nextAnd[0])
+  } else {
+    where.AND = nextAnd
+  }
+}
+
+/**
+ * 分页获取日志
+ */
+export async function getLogsPaginated(options: {
+  page?: number
+  pageSize?: number
+  module?: string
+  userId?: number
+  startDate?: string
+  endDate?: string
+  search?: string
+  instanceId?: number
+  instanceName?: string
+} = {}): Promise<{
+  items: Log[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}> {
+  const {
+    page = 1,
+    pageSize = 20,
+    module,
+    userId,
+    startDate,
+    endDate,
+    search,
+    instanceId,
+    instanceName
+  } = options
+  const safePage = Number.isInteger(page) && page > 0 ? page : 1
+  const safePageSize = Number.isInteger(pageSize) ? Math.min(Math.max(pageSize, 1), 100) : 20
+
+  const where: Prisma.LogWhereInput = {}
+
+  if (module) {
+    where.module = module
+  }
+
+  if (userId !== undefined) {
+    where.userId = userId
+  }
+
+  if (startDate || endDate) {
+    where.createdAt = {
+      ...(startDate ? { gte: new Date(startDate) } : {}),
+      ...(endDate ? { lte: new Date(endDate) } : {})
+    }
+  }
+
+  if (search) {
+    where.OR = [
+      { content: { contains: search, mode: 'insensitive' } },
+      { action: { contains: search, mode: 'insensitive' } },
+      { user: { username: { contains: search, mode: 'insensitive' } } }
+    ]
+  }
+
+  if (instanceId !== undefined) {
+    combineWhereWithAnd(where, { instanceId })
+  } else if (instanceName) {
+    combineWhereWithAnd(where, { content: { contains: `instance "${instanceName}"`, mode: 'insensitive' } })
+  }
+
+  // 获取总数
+  const total = await prisma.log.count({ where })
+
+  // 获取数据（包含用户名）
+  const logs = await prisma.log.findMany({
+    where,
+    include: {
+      user: {
+        select: {
+          username: true
+        }
+      }
+    },
+    orderBy: {
+      createdAt: 'desc'
+    },
+    skip: (safePage - 1) * safePageSize,
+    take: safePageSize
+  })
+
+  return {
+    items: logs.map(log => ({
+      id: log.id,
+      user_id: log.userId,
+      instance_id: log.instanceId,
+      username: log.user?.username || null,
+      module: log.module,
+      action: log.action,
+      content: log.content,
+      result: log.result,
+      created_at: log.createdAt.toISOString()
+    })),
+    total,
+    page: safePage,
+    pageSize: safePageSize,
+    totalPages: Math.ceil(total / safePageSize)
+  }
+}
+
+/**
+ * 获取日志模块列表
+ */
+export async function getLogModules(): Promise<string[]> {
+  const modules = await prisma.log.findMany({
+    select: {
+      module: true
+    },
+    distinct: ['module'],
+    orderBy: {
+      module: 'asc'
+    }
+  })
+
+  return modules.map(m => m.module)
+}
+
+/**
+ * 清理旧的操作日志（保留最近 N 天）
+ * 默认保留 90 天用于审计
+ */
+export async function cleanOldLogs(days: number = 90): Promise<number> {
+  const cutoffDate = new Date()
+  cutoffDate.setDate(cutoffDate.getDate() - days)
+
+  const result = await prisma.log.deleteMany({
+    where: {
+      createdAt: { lt: cutoffDate }
+    }
+  })
+
+  return result.count
+}
diff --git a/server/src/db/lottery.ts b/server/src/db/lottery.ts
new file mode 100644
index 0000000..a296328
--- /dev/null
+++ b/server/src/db/lottery.ts
@@ -0,0 +1,759 @@
+/**
+ * 抽奖系统数据库操作
+ */
+import { prisma } from './prisma.js'
+import { Prisma } from '@prisma/client'
+import type { LotteryPrizeType, LotteryRecordStatus } from '@prisma/client'
+import { createBadgeOwnership, selectRandomBadgeOrThrow } from './badges.js'
+import type { BadgeOwnershipView } from './badges.js'
+
+// ==================== 抽奖活动 ====================
+
+/**
+ * 创建抽奖活动
+ */
+export async function createLottery(data: {
+  name: string
+  description?: string
+  costPoints: number
+  isActive?: boolean
+  startAt?: Date
+  endAt?: Date
+  createdBy: number
+}) {
+  return prisma.lottery.create({
+    data: {
+      name: data.name,
+      description: data.description,
+      costPoints: data.costPoints,
+      isActive: data.isActive ?? true,
+      startAt: data.startAt,
+      endAt: data.endAt,
+      createdBy: data.createdBy
+    }
+  })
+}
+
+/**
+ * 更新抽奖活动
+ */
+export async function updateLottery(id: number, data: {
+  name?: string
+  description?: string
+  costPoints?: number
+  isActive?: boolean
+  startAt?: Date | null
+  endAt?: Date | null
+}) {
+  return prisma.lottery.update({
+    where: { id },
+    data
+  })
+}
+
+/**
+ * 删除抽奖活动
+ */
+export async function deleteLottery(id: number) {
+  return prisma.lottery.delete({ where: { id } })
+}
+
+/**
+ * 获取抽奖活动详情
+ */
+export async function getLotteryById(id: number) {
+  return prisma.lottery.findUnique({
+    where: { id },
+    include: {
+      prizes: {
+        orderBy: { displayOrder: 'asc' }
+      },
+      notificationConfig: true,
+      _count: {
+        select: { records: true }
+      }
+    }
+  })
+}
+
+/**
+ * 获取所有抽奖活动（管理端）
+ */
+export async function getAllLotteries(options: {
+  page?: number
+  pageSize?: number
+  isActive?: boolean
+} = {}) {
+  const { page = 1, pageSize = 20, isActive } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.LotteryWhereInput = {}
+  if (isActive !== undefined) {
+    where.isActive = isActive
+  }
+
+  const [lotteries, total] = await Promise.all([
+    prisma.lottery.findMany({
+      where,
+      include: {
+        prizes: {
+          orderBy: { displayOrder: 'asc' }
+        },
+        _count: {
+          select: { records: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: pageSize,
+      skip
+    }),
+    prisma.lottery.count({ where })
+  ])
+
+  return { lotteries, total, page, pageSize }
+}
+
+/**
+ * 获取可用抽奖活动（用户端）
+ */
+export async function getActiveLotteries() {
+  const now = new Date()
+
+  return prisma.lottery.findMany({
+    where: {
+      isActive: true,
+      OR: [
+        { startAt: null },
+        { startAt: { lte: now } }
+      ],
+      AND: [
+        {
+          OR: [
+            { endAt: null },
+            { endAt: { gte: now } }
+          ]
+        }
+      ]
+    },
+    include: {
+      prizes: {
+        orderBy: { displayOrder: 'asc' }
+      },
+      _count: {
+        select: { records: true }
+      }
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+}
+
+// ==================== 奖品管理 ====================
+
+/**
+ * 添加奖品
+ */
+export async function createPrize(data: {
+  lotteryId: number
+  name: string
+  type: LotteryPrizeType
+  value?: number
+  probability: number
+  totalQuantity?: number
+  displayOrder?: number
+  instanceDesc?: string
+}) {
+  return prisma.lotteryPrize.create({
+    data: {
+      lotteryId: data.lotteryId,
+      name: data.name,
+      type: data.type,
+      value: data.value ?? 0,
+      probability: data.probability,
+      totalQuantity: data.totalQuantity,
+      remainQuantity: data.totalQuantity, // 初始剩余等于总数
+      displayOrder: data.displayOrder ?? 0,
+      instanceDesc: data.instanceDesc
+    }
+  })
+}
+
+/**
+ * 更新奖品
+ */
+export async function updatePrize(id: number, data: {
+  name?: string
+  type?: LotteryPrizeType
+  value?: number
+  probability?: number
+  totalQuantity?: number | null
+  remainQuantity?: number | null
+  displayOrder?: number
+  instanceDesc?: string | null
+}) {
+  return prisma.lotteryPrize.update({
+    where: { id },
+    data
+  })
+}
+
+/**
+ * 删除奖品
+ */
+export async function deletePrize(id: number) {
+  return prisma.lotteryPrize.delete({ where: { id } })
+}
+
+/**
+ * 获取奖品详情
+ */
+export async function getPrizeById(id: number) {
+  return prisma.lotteryPrize.findUnique({
+    where: { id },
+    include: { lottery: true }
+  })
+}
+
+// ==================== 抽奖通知配置 ====================
+
+/**
+ * 更新或创建抽奖通知配置
+ */
+export async function upsertLotteryNotificationConfig(
+  lotteryId: number,
+  data: {
+    enabled: boolean
+    type: string
+    config: Record<string, unknown>
+    notifyBalance: boolean
+    notifyInstance: boolean
+  }
+) {
+  return prisma.lotteryNotificationConfig.upsert({
+    where: { lotteryId },
+    update: {
+      enabled: data.enabled,
+      type: data.type,
+      config: data.config as Prisma.JsonObject,
+      notifyBalance: data.notifyBalance,
+      notifyInstance: data.notifyInstance
+    },
+    create: {
+      lotteryId,
+      enabled: data.enabled,
+      type: data.type,
+      config: data.config as Prisma.JsonObject,
+      notifyBalance: data.notifyBalance,
+      notifyInstance: data.notifyInstance
+    }
+  })
+}
+
+/**
+ * 获取抽奖通知配置
+ */
+export async function getLotteryNotificationConfig(lotteryId: number) {
+  return prisma.lotteryNotificationConfig.findUnique({
+    where: { lotteryId }
+  })
+}
+
+// ==================== 中奖记录 ====================
+
+/**
+ * 创建中奖记录
+ */
+export async function createLotteryRecord(data: {
+  lotteryId: number
+  prizeId: number
+  userId: number
+  prizeType: LotteryPrizeType
+  prizeValue: number
+  prizeName: string
+  status: LotteryRecordStatus
+  pointsSpent: number
+  deliveredAt?: Date
+}) {
+  return prisma.lotteryRecord.create({
+    data: {
+      lotteryId: data.lotteryId,
+      prizeId: data.prizeId,
+      userId: data.userId,
+      prizeType: data.prizeType,
+      prizeValue: data.prizeValue,
+      prizeName: data.prizeName,
+      status: data.status,
+      pointsSpent: data.pointsSpent,
+      deliveredAt: data.deliveredAt
+    }
+  })
+}
+
+/**
+ * 更新中奖记录状态
+ */
+export async function updateLotteryRecordStatus(
+  id: number,
+  status: LotteryRecordStatus,
+  deliveredBy?: number,
+  ticketId?: number
+) {
+  return prisma.lotteryRecord.update({
+    where: { id },
+    data: {
+      status,
+      deliveredAt: status === 'delivered' || status === 'claimed' ? new Date() : undefined,
+      deliveredBy,
+      ticketId
+    }
+  })
+}
+
+/**
+ * 标记通知已发送
+ */
+export async function markRecordNotificationSent(id: number) {
+  return prisma.lotteryRecord.update({
+    where: { id },
+    data: { notificationSent: true }
+  })
+}
+
+/**
+ * 获取用户中奖记录
+ */
+export async function getUserLotteryRecords(
+  userId: number,
+  options: { page?: number; pageSize?: number; prizeType?: string } = {}
+) {
+  const { page = 1, pageSize = 20, prizeType } = options
+  const skip = (page - 1) * pageSize
+
+  const where: any = { userId }
+  if (prizeType) {
+    where.prizeType = prizeType
+  }
+
+  const [records, total] = await Promise.all([
+    prisma.lotteryRecord.findMany({
+      where,
+      include: {
+        lottery: {
+          select: { id: true, name: true }
+        },
+        prize: {
+          select: { instanceDesc: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: pageSize,
+      skip
+    }),
+    prisma.lotteryRecord.count({ where })
+  ])
+
+  return { records, total, page, pageSize }
+}
+
+/**
+ * 获取所有中奖记录（管理端）
+ */
+export async function getAllLotteryRecords(options: {
+  page?: number
+  pageSize?: number
+  lotteryId?: number
+  prizeType?: LotteryPrizeType
+  status?: LotteryRecordStatus
+  search?: string
+} = {}) {
+  const { page = 1, pageSize = 20, lotteryId, prizeType, status, search } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.LotteryRecordWhereInput = {}
+  if (lotteryId) where.lotteryId = lotteryId
+  if (prizeType) where.prizeType = prizeType
+  if (status) where.status = status
+  if (search) {
+    where.user = {
+      username: { contains: search, mode: 'insensitive' }
+    }
+  }
+
+  const [records, total] = await Promise.all([
+    prisma.lotteryRecord.findMany({
+      where,
+      include: {
+        lottery: {
+          select: { id: true, name: true }
+        },
+        user: {
+          select: { id: true, username: true, avatarStyle: true }
+        },
+        prize: {
+          select: { instanceDesc: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: pageSize,
+      skip
+    }),
+    prisma.lotteryRecord.count({ where })
+  ])
+
+  return { records, total, page, pageSize }
+}
+
+/**
+ * 获取待发放的实例奖励记录
+ */
+export async function getPendingInstancePrizes() {
+  return prisma.lotteryRecord.findMany({
+    where: {
+      prizeType: 'instance',
+      status: 'pending'
+    },
+    include: {
+      lottery: {
+        select: { id: true, name: true }
+      },
+      user: {
+        select: { id: true, username: true }
+      }
+    },
+    orderBy: { createdAt: 'asc' }
+  })
+}
+
+// ==================== 抽奖核心逻辑 ====================
+
+/**
+ * 加权随机选择奖品（绝对概率模式）
+ * 概率值按实际设定值计算，不足100%的部分自动归入"谢谢参与"
+ * 
+ * 关键设计：遍历所有奖品计算概率区间，而不是只遍历available
+ * 这样即使某奖品库存耗尽，其概率区间也被保留，命中该区间时回退到nothing
+ */
+export function weightedRandomSelect(prizes: Array<{
+  id: number
+  type: LotteryPrizeType
+  probability: number | Prisma.Decimal
+  remainQuantity: number | null
+}>) {
+  // 找到"谢谢参与"奖品（作为兜底）
+  const nothingPrize = prizes.find(p => p.type === 'nothing')
+  
+  // 检查是否有任何可用奖品
+  const hasAvailable = prizes.some(p =>
+    p.remainQuantity === null || p.remainQuantity > 0
+  )
+  if (!hasAvailable) {
+    throw new Error('NO_AVAILABLE_PRIZES')
+  }
+
+  // 使用绝对概率（基于100%）
+  const random = Math.random() * 100
+  let cumulative = 0
+
+  // 遍历所有奖品（包括已抽完的），保持概率区间不变
+  for (const prize of prizes) {
+    cumulative += Number(prize.probability)
+    if (random < cumulative) {
+      // 检查该奖品是否有库存
+      if (prize.remainQuantity === null || prize.remainQuantity > 0) {
+        return prize
+      }
+      // 库存已空，回退到"谢谢参与"
+      if (nothingPrize) return nothingPrize
+      // 如果没有nothing奖品，继续检查下一个
+    }
+  }
+
+  // 随机数超出所有概率之和，返回"谢谢参与"
+  if (nothingPrize) return nothingPrize
+
+  // 没有"谢谢参与"奖品且概率总和不足100%，这是配置错误
+  // 抛出明确错误，避免意外将剩余概率分配给其他奖品
+  throw new Error('LOTTERY_CONFIG_ERROR: 奖品概率总和不足100%且缺少"谢谢参与"奖品，请添加一个type为nothing的奖品来补足剩余概率')
+}
+
+/**
+ * 执行抽奖
+ */
+export async function performDraw(userId: number, lotteryId: number): Promise<{
+  success: boolean
+  record?: Awaited<ReturnType<typeof createLotteryRecord>>
+  prize?: {
+    id: number
+    name: string
+    type: LotteryPrizeType
+    value: number
+    instanceDesc: string | null
+    badgeOwnership: BadgeOwnershipView | null
+  }
+  currentPoints?: number
+  message?: string
+}> {
+  // 使用 RepeatableRead + 乐观锁确保并发安全，防止奖品超发
+  // 事务冲突会在路由层通过指数退避重试机制处理
+  return prisma.$transaction(
+    async (tx) => {
+    // 1. 检查抽奖是否有效
+    const lottery = await tx.lottery.findUnique({
+      where: { id: lotteryId },
+      include: { prizes: true }
+    })
+
+    if (!lottery) {
+      return { success: false, message: '抽奖活动不存在' }
+    }
+
+    if (!lottery.isActive) {
+      return { success: false, message: '抽奖活动已关闭' }
+    }
+
+    const now = new Date()
+    if (lottery.startAt && lottery.startAt > now) {
+      return { success: false, message: '抽奖活动尚未开始' }
+    }
+    if (lottery.endAt && lottery.endAt < now) {
+      return { success: false, message: '抽奖活动已结束' }
+    }
+
+    if (lottery.prizes.length === 0) {
+      return { success: false, message: '奖池为空' }
+    }
+
+    // 2. 检查用户积分（使用 upsert 避免并发时的唯一约束冲突）
+    const userPoints = await tx.userPoints.upsert({
+      where: { userId },
+      update: {},
+      create: { userId }
+    })
+
+    if (userPoints.points < lottery.costPoints) {
+      return { success: false, message: '积分不足' }
+    }
+
+    // 3. 扣除积分
+    await tx.userPoints.update({
+      where: { userId },
+      data: {
+        points: { decrement: lottery.costPoints },
+        totalSpent: { increment: lottery.costPoints }
+      }
+    })
+
+    // 4. 随机抽取奖品
+    const selectedPrize = weightedRandomSelect(lottery.prizes.map(p => ({
+      id: p.id,
+      type: p.type,
+      probability: p.probability,
+      remainQuantity: p.remainQuantity
+    })))
+
+    let prize = lottery.prizes.find(p => p.id === selectedPrize.id)!
+
+    // 5. 使用乐观锁扣减库存（防止超发）
+    if (prize.remainQuantity !== null) {
+      const updateResult = await tx.lotteryPrize.updateMany({
+        where: { 
+          id: prize.id,
+          remainQuantity: { gt: 0 }  // 只有库存 > 0 才扣减
+        },
+        data: { remainQuantity: { decrement: 1 } }
+      })
+      
+      // 如果扣减失败（库存已空），回退到"谢谢参与"奖品
+      if (updateResult.count === 0) {
+        const nothingPrize = lottery.prizes.find(p => p.type === 'nothing')
+        if (nothingPrize) {
+          prize = nothingPrize
+        } else {
+          // 没有谢谢参与奖品，返回失败
+          return { success: false, message: '奖品库存不足，请稍后再试' }
+        }
+      }
+    }
+
+    // 6. 处理奖品发放
+    let status: LotteryRecordStatus = 'delivered'
+    let currentPoints = userPoints.points - lottery.costPoints
+    let resolvedPrizeName = prize.name
+    const resolvedPrizeValue = prize.type === 'badge' ? 0 : prize.value
+    let badgeOwnership: BadgeOwnershipView | null = null
+
+    if (prize.type === 'balance') {
+      // 自动发放余额（value 存储分，转换为元）
+      const balanceAmount = prize.value / 100
+      const user = await tx.user.findUnique({
+        where: { id: userId },
+        select: { balance: true }
+      })
+      if (user) {
+        const balanceBefore = Number(user.balance)
+        const balanceAfter = balanceBefore + balanceAmount
+        await tx.user.update({
+          where: { id: userId },
+          data: { balance: balanceAfter }
+        })
+        // 记录余额日志
+        await tx.balanceLog.create({
+          data: {
+            userId,
+            type: 'gift',
+            amount: balanceAmount,
+            balanceBefore,
+            balanceAfter,
+            remark: `抽奖中奖：${prize.name}`
+          }
+        })
+      }
+    } else if (prize.type === 'points') {
+      // 自动发放积分
+      await tx.userPoints.update({
+        where: { userId },
+        data: {
+          points: { increment: prize.value },
+          totalEarned: { increment: prize.value }
+        }
+      })
+      currentPoints += prize.value
+    } else if (prize.type === 'badge') {
+      const selectedBadge = await selectRandomBadgeOrThrow(tx)
+      badgeOwnership = await createBadgeOwnership(tx, userId, selectedBadge.id, 'lottery', selectedBadge)
+      resolvedPrizeName = selectedBadge.fullLabel
+    } else if (prize.type === 'instance') {
+      // 实例奖励需手动发放
+      status = 'pending'
+    } else if (prize.type === 'cpu' || prize.type === 'memory' || prize.type === 'disk' || prize.type === 'traffic') {
+      // 资源奖品：存入用户资源池
+      const resourceFieldMap: Record<string, 'cpu' | 'memory' | 'disk' | 'traffic'> = {
+        cpu: 'cpu',
+        memory: 'memory',
+        disk: 'disk',
+        traffic: 'traffic'
+      }
+      const field = resourceFieldMap[prize.type]
+      const resourceTypeMap: Record<string, 'c' | 'r' | 'd' | 't'> = {
+        cpu: 'c',
+        memory: 'r',
+        disk: 'd',
+        traffic: 't'
+      }
+      const resourceType = resourceTypeMap[prize.type]
+
+      // 更新资源池
+      await tx.userResourcePool.upsert({
+        where: { userId },
+        update: {
+          [field]: field === 'traffic'
+            ? { increment: BigInt(prize.value) }
+            : { increment: prize.value }
+        },
+        create: {
+          userId,
+          [field]: field === 'traffic' ? BigInt(prize.value) : prize.value
+        }
+      })
+
+      // 记录资源池日志
+      await tx.resourcePoolLog.create({
+        data: {
+          userId,
+          action: 'lottery',
+          resourceType,
+          amount: prize.value,
+          remark: `抽奖中奖：${prize.name}`
+        }
+      })
+    }
+    // nothing 类型不需要任何操作
+
+    // 7. 创建中奖记录
+    const record = await tx.lotteryRecord.create({
+      data: {
+        lotteryId,
+        prizeId: prize.id,
+        userId,
+        prizeType: prize.type,
+        prizeValue: resolvedPrizeValue,
+        prizeName: resolvedPrizeName,
+        status,
+        pointsSpent: lottery.costPoints,
+        deliveredAt: status === 'delivered' ? new Date() : null
+      }
+    })
+
+    // 8. 记录积分日志
+    await tx.pointsLog.create({
+      data: {
+        userId,
+        type: 'lottery_spend',
+        amount: -lottery.costPoints,
+        pointsBefore: userPoints.points,
+        pointsAfter: userPoints.points - lottery.costPoints,
+        relatedId: record.id,
+        remark: `抽奖消耗：${lottery.name}`
+      }
+    })
+
+    // 如果中了积分奖励，再记一条获得日志
+    if (prize.type === 'points') {
+      await tx.pointsLog.create({
+        data: {
+          userId,
+          type: 'lottery_win',
+          amount: prize.value,
+          pointsBefore: userPoints.points - lottery.costPoints,
+          pointsAfter: userPoints.points - lottery.costPoints + prize.value,
+          relatedId: record.id,
+          remark: `抽奖中奖：${prize.name}`
+        }
+      })
+    }
+
+    // 注意：totalDraws 不在事务中更新，避免热点数据冲突导致死锁
+    // 统计数据可通过 count(lotteryRecord) 实时计算
+
+    return {
+      success: true,
+      record,
+      prize: {
+        id: prize.id,
+        name: resolvedPrizeName,
+        type: prize.type,
+        value: resolvedPrizeValue,
+        instanceDesc: prize.instanceDesc,
+        badgeOwnership
+      },
+      currentPoints
+    }
+  },
+  {
+    // RepeatableRead 比 Serializable 冲突更少，配合乐观锁防超发
+    isolationLevel: Prisma.TransactionIsolationLevel.RepeatableRead,
+    maxWait: 5000,
+    timeout: 10000
+  })
+}
+
+/**
+ * 获取抽奖统计（管理端）
+ */
+export async function getLotteryStats(lotteryId: number) {
+  const [totalRecords, prizeStats] = await Promise.all([
+    prisma.lotteryRecord.count({ where: { lotteryId } }),
+    prisma.lotteryRecord.groupBy({
+      by: ['prizeType'],
+      where: { lotteryId },
+      _count: true
+    })
+  ])
+
+  return {
+    totalDraws: totalRecords,
+    prizeStats: prizeStats.map(s => ({
+      type: s.prizeType,
+      count: s._count
+    }))
+  }
+}
diff --git a/server/src/db/mail.ts b/server/src/db/mail.ts
new file mode 100644
index 0000000..471bf6d
--- /dev/null
+++ b/server/src/db/mail.ts
@@ -0,0 +1,556 @@
+/**
+ * 域名邮箱模块数据库操作
+ * 包含邮箱源、套餐方案、订阅、域名、账户的 CRUD 操作
+ */
+
+import { prisma } from './prisma.js'
+import type { MailSource, MailPlan, MailSubscription, MailDomain, MailAccount, MailBillingCycle, MailDomainStatus, MailSubscriptionStatus } from '@prisma/client'
+
+// ==================== 邮箱源 (MailSource) ====================
+
+/**
+ * 获取所有邮箱源
+ */
+export async function getAllMailSources(includeDisabled = false): Promise<MailSource[]> {
+  return prisma.mailSource.findMany({
+    where: includeDisabled ? {} : { enabled: true },
+    orderBy: [{ sortOrder: 'asc' }, { id: 'asc' }]
+  })
+}
+
+/**
+ * 根据 ID 获取邮箱源
+ */
+export async function getMailSourceById(id: number): Promise<MailSource | null> {
+  return prisma.mailSource.findUnique({ where: { id } })
+}
+
+/**
+ * 根据代码获取邮箱源
+ */
+export async function getMailSourceByCode(code: string): Promise<MailSource | null> {
+  return prisma.mailSource.findUnique({ where: { code } })
+}
+
+/**
+ * 创建邮箱源
+ */
+export async function createMailSource(data: {
+  name: string
+  code: string
+  apiUrl: string
+  apiKey: string
+  smarterMailUrl: string
+  enabled?: boolean
+  sortOrder?: number
+}): Promise<MailSource> {
+  return prisma.mailSource.create({ data })
+}
+
+/**
+ * 更新邮箱源
+ */
+export async function updateMailSource(id: number, data: {
+  name?: string
+  code?: string
+  apiUrl?: string
+  apiKey?: string
+  smarterMailUrl?: string
+  enabled?: boolean
+  sortOrder?: number
+}): Promise<MailSource> {
+  return prisma.mailSource.update({ where: { id }, data })
+}
+
+/**
+ * 删除邮箱源
+ */
+export async function deleteMailSource(id: number): Promise<void> {
+  await prisma.mailSource.delete({ where: { id } })
+}
+
+/**
+ * 获取邮箱源统计信息
+ */
+export async function getMailSourceStats(sourceId: number): Promise<{
+  planCount: number
+  subscriptionCount: number
+  domainCount: number
+}> {
+  const [planCount, subscriptionCount, domainCount] = await Promise.all([
+    prisma.mailPlan.count({ where: { sourceId } }),
+    prisma.mailSubscription.count({ where: { sourceId } }),
+    prisma.mailDomain.count({ where: { sourceId } })
+  ])
+  return { planCount, subscriptionCount, domainCount }
+}
+
+// ==================== 套餐方案 (MailPlan) ====================
+
+/**
+ * 获取指定邮箱源的所有方案
+ */
+export async function getMailPlansBySource(sourceId: number, includeDisabled = false): Promise<MailPlan[]> {
+  return prisma.mailPlan.findMany({
+    where: {
+      sourceId,
+      ...(includeDisabled ? {} : { enabled: true })
+    },
+    orderBy: [{ sortOrder: 'asc' }, { price: 'asc' }]
+  })
+}
+
+/**
+ * 是否存在至少一个可购买的邮箱源和启用方案
+ */
+export async function hasAvailableMailOffering(): Promise<boolean> {
+  const count = await prisma.mailPlan.count({
+    where: {
+      enabled: true,
+      source: {
+        enabled: true
+      }
+    }
+  })
+  return count > 0
+}
+
+/**
+ * 获取所有方案（管理员用）
+ */
+export async function getAllMailPlans(): Promise<(MailPlan & { source: MailSource })[]> {
+  return prisma.mailPlan.findMany({
+    include: { source: true },
+    orderBy: [{ sourceId: 'asc' }, { sortOrder: 'asc' }, { price: 'asc' }]
+  })
+}
+
+/**
+ * 根据 ID 获取方案
+ */
+export async function getMailPlanById(id: number): Promise<(MailPlan & { source: MailSource }) | null> {
+  return prisma.mailPlan.findUnique({
+    where: { id },
+    include: { source: true }
+  })
+}
+
+/**
+ * 创建套餐方案
+ */
+export async function createMailPlan(data: {
+  sourceId: number
+  name: string
+  description?: string
+  domainLimit: number
+  diskLimitGb: number
+  billingCycle: MailBillingCycle
+  price: number
+  enabled?: boolean
+  sortOrder?: number
+}): Promise<MailPlan> {
+  return prisma.mailPlan.create({ data: { ...data, price: data.price } })
+}
+
+/**
+ * 更新套餐方案
+ */
+export async function updateMailPlan(id: number, data: {
+  name?: string
+  description?: string
+  domainLimit?: number
+  diskLimitGb?: number
+  billingCycle?: MailBillingCycle
+  price?: number
+  enabled?: boolean
+  sortOrder?: number
+}): Promise<MailPlan> {
+  return prisma.mailPlan.update({ where: { id }, data })
+}
+
+/**
+ * 删除套餐方案
+ */
+export async function deleteMailPlan(id: number): Promise<void> {
+  await prisma.mailPlan.delete({ where: { id } })
+}
+
+// ==================== 用户订阅 (MailSubscription) ====================
+
+/**
+ * 获取用户的订阅
+ */
+export async function getUserMailSubscription(userId: number): Promise<(MailSubscription & {
+  source: MailSource
+  plan: MailPlan
+  domains: MailDomain[]
+}) | null> {
+  return prisma.mailSubscription.findFirst({
+    where: { userId, status: 'active' },
+    include: {
+      source: true,
+      plan: true,
+      domains: {
+        include: { accounts: true }
+      }
+    }
+  })
+}
+
+/**
+ * 获取所有订阅（管理员用）
+ */
+export async function getAllMailSubscriptions(options?: {
+  sourceId?: number
+  status?: MailSubscriptionStatus
+  search?: string
+  page?: number
+  pageSize?: number
+}): Promise<{
+  subscriptions: (MailSubscription & { user: { id: number; username: string; email: string | null; avatarStyle: string | null; avatarBadgeId: string | null }; source: MailSource; plan: MailPlan })[]
+  total: number
+}> {
+  const page = options?.page || 1
+  const pageSize = options?.pageSize || 20
+  
+  const where: any = {
+    ...(options?.sourceId ? { sourceId: options.sourceId } : {}),
+    ...(options?.status ? { status: options.status } : {})
+  }
+  
+  // 搜索条件：用户名、邮箱、用户ID
+  if (options?.search) {
+    const searchTerm = options.search.trim()
+    const searchId = parseInt(searchTerm)
+    where.OR = [
+      { user: { username: { contains: searchTerm, mode: 'insensitive' } } },
+      { user: { email: { contains: searchTerm, mode: 'insensitive' } } },
+      ...(isNaN(searchId) ? [] : [{ userId: searchId }])
+    ]
+  }
+  
+  const [subscriptions, total] = await Promise.all([
+    prisma.mailSubscription.findMany({
+      where,
+      include: {
+        user: { select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true } },
+        source: true,
+        plan: true
+      },
+      orderBy: { createdAt: 'desc' },
+      skip: (page - 1) * pageSize,
+      take: pageSize
+    }),
+    prisma.mailSubscription.count({ where })
+  ])
+  
+  return { subscriptions, total }
+}
+
+/**
+ * 根据 ID 获取订阅
+ */
+export async function getMailSubscriptionById(id: number): Promise<(MailSubscription & {
+  source: MailSource
+  plan: MailPlan
+  domains: (MailDomain & { accounts: MailAccount[] })[]
+}) | null> {
+  return prisma.mailSubscription.findUnique({
+    where: { id },
+    include: {
+      source: true,
+      plan: true,
+      domains: {
+        include: { accounts: true }
+      }
+    }
+  })
+}
+
+/**
+ * 创建订阅
+ */
+export async function createMailSubscription(data: {
+  userId: number
+  sourceId: number
+  planId: number
+  domainLimit: number
+  diskLimitGb: number
+  expiresAt: Date
+  autoRenew?: boolean
+}): Promise<MailSubscription> {
+  return prisma.mailSubscription.create({ data })
+}
+
+/**
+ * 更新订阅
+ */
+export async function updateMailSubscription(id: number, data: {
+  status?: MailSubscriptionStatus
+  expiresAt?: Date
+  autoRenew?: boolean
+}): Promise<MailSubscription> {
+  return prisma.mailSubscription.update({ where: { id }, data })
+}
+
+/**
+ * 续费订阅
+ */
+export async function renewMailSubscription(id: number, months: number): Promise<MailSubscription> {
+  const subscription = await prisma.mailSubscription.findUnique({ where: { id } })
+  if (!subscription) throw new Error('Subscription not found')
+  
+  const currentExpiry = subscription.expiresAt > new Date() ? subscription.expiresAt : new Date()
+  const newExpiry = new Date(currentExpiry)
+  newExpiry.setMonth(newExpiry.getMonth() + months)
+  
+  return prisma.mailSubscription.update({
+    where: { id },
+    data: { expiresAt: newExpiry, status: 'active' }
+  })
+}
+
+// ==================== 域名 (MailDomain) ====================
+
+/**
+ * 获取订阅下的所有域名
+ */
+export async function getMailDomainsBySubscription(subscriptionId: number): Promise<(MailDomain & { accounts: MailAccount[] })[]> {
+  return prisma.mailDomain.findMany({
+    where: { subscriptionId },
+    include: { accounts: true },
+    orderBy: { createdAt: 'desc' }
+  })
+}
+
+/**
+ * 根据 ID 获取域名
+ */
+export async function getMailDomainById(id: number): Promise<(MailDomain & {
+  subscription: MailSubscription & { user: { id: number; username: string } }
+  source: MailSource
+  accounts: MailAccount[]
+}) | null> {
+  return prisma.mailDomain.findUnique({
+    where: { id },
+    include: {
+      subscription: {
+        include: { user: { select: { id: true, username: true } } }
+      },
+      source: true,
+      accounts: true
+    }
+  })
+}
+
+/**
+ * 检查域名是否已存在
+ */
+export async function checkMailDomainExists(domain: string, sourceId: number): Promise<boolean> {
+  const count = await prisma.mailDomain.count({
+    where: { domain, sourceId }
+  })
+  return count > 0
+}
+
+/**
+ * 创建域名
+ */
+export async function createMailDomain(data: {
+  subscriptionId: number
+  sourceId: number
+  domain: string
+  adminUsername?: string
+  adminPassword?: string
+}): Promise<MailDomain> {
+  return prisma.mailDomain.create({ data })
+}
+
+/**
+ * 更新域名
+ */
+export async function updateMailDomain(id: number, data: {
+  status?: MailDomainStatus
+  adminUsername?: string
+  adminPassword?: string
+  diskUsedMb?: number
+  verifiedAt?: Date
+}): Promise<MailDomain> {
+  return prisma.mailDomain.update({ where: { id }, data })
+}
+
+/**
+ * 删除域名
+ */
+export async function deleteMailDomain(id: number): Promise<void> {
+  await prisma.mailDomain.delete({ where: { id } })
+}
+
+/**
+ * 获取所有域名（管理员用）
+ */
+export async function getAllMailDomains(options?: {
+  sourceId?: number
+  status?: MailDomainStatus
+  search?: string
+  page?: number
+  pageSize?: number
+}): Promise<{
+  domains: (MailDomain & {
+    subscription: MailSubscription & { user: { id: number; username: string; email: string | null; avatarStyle: string | null; avatarBadgeId: string | null } }
+    source: MailSource
+    _count: { accounts: number }
+  })[]
+  total: number
+}> {
+  const page = options?.page || 1
+  const pageSize = options?.pageSize || 20
+  
+  const where: any = {
+    ...(options?.sourceId ? { sourceId: options.sourceId } : {}),
+    ...(options?.status ? { status: options.status } : {})
+  }
+  
+  // 搜索条件：域名、用户名、邮箱、用户ID
+  if (options?.search) {
+    const searchTerm = options.search.trim()
+    const searchId = parseInt(searchTerm)
+    where.OR = [
+      { domain: { contains: searchTerm, mode: 'insensitive' } },
+      { subscription: { user: { username: { contains: searchTerm, mode: 'insensitive' } } } },
+      { subscription: { user: { email: { contains: searchTerm, mode: 'insensitive' } } } },
+      ...(isNaN(searchId) ? [] : [{ subscription: { userId: searchId } }])
+    ]
+  }
+  
+  const [domains, total] = await Promise.all([
+    prisma.mailDomain.findMany({
+      where,
+      include: {
+        subscription: {
+          include: { user: { select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true } } }
+        },
+        source: true,
+        _count: { select: { accounts: true } }
+      },
+      orderBy: { createdAt: 'desc' },
+      skip: (page - 1) * pageSize,
+      take: pageSize
+    }),
+    prisma.mailDomain.count({ where })
+  ])
+  
+  return { domains, total }
+}
+
+// ==================== 邮箱账户 (MailAccount) ====================
+
+/**
+ * 获取域名下的所有账户
+ */
+export async function getMailAccountsByDomain(domainId: number): Promise<MailAccount[]> {
+  return prisma.mailAccount.findMany({
+    where: { domainId },
+    orderBy: [{ isAdmin: 'desc' }, { createdAt: 'asc' }]
+  })
+}
+
+/**
+ * 根据 ID 获取账户
+ */
+export async function getMailAccountById(id: number): Promise<(MailAccount & { domain: MailDomain }) | null> {
+  return prisma.mailAccount.findUnique({
+    where: { id },
+    include: { domain: true }
+  })
+}
+
+/**
+ * 检查账户是否已存在
+ */
+export async function checkMailAccountExists(domainId: number, username: string): Promise<boolean> {
+  const count = await prisma.mailAccount.count({
+    where: { domainId, username }
+  })
+  return count > 0
+}
+
+/**
+ * 创建邮箱账户
+ */
+export async function createMailAccount(data: {
+  domainId: number
+  email: string
+  username: string
+  displayName?: string
+  diskLimitMb?: number
+  isAdmin?: boolean
+}): Promise<MailAccount> {
+  return prisma.mailAccount.create({ data })
+}
+
+/**
+ * 更新邮箱账户
+ */
+export async function updateMailAccount(id: number, data: {
+  displayName?: string
+  diskLimitMb?: number
+  diskUsedMb?: number
+  isAdmin?: boolean
+}): Promise<MailAccount> {
+  return prisma.mailAccount.update({ where: { id }, data })
+}
+
+/**
+ * 删除邮箱账户
+ */
+export async function deleteMailAccount(id: number): Promise<void> {
+  await prisma.mailAccount.delete({ where: { id } })
+}
+
+/**
+ * 获取域名下的账户数量
+ */
+export async function getMailAccountCount(domainId: number): Promise<number> {
+  return prisma.mailAccount.count({ where: { domainId } })
+}
+
+// ==================== 统计查询 ====================
+
+/**
+ * 获取订阅的使用统计
+ */
+export async function getSubscriptionUsageStats(subscriptionId: number): Promise<{
+  domainCount: number
+  accountCount: number
+  diskUsedMb: number
+}> {
+  const domains = await prisma.mailDomain.findMany({
+    where: { subscriptionId },
+    include: {
+      _count: { select: { accounts: true } }
+    }
+  })
+  
+  return {
+    domainCount: domains.length,
+    accountCount: domains.reduce((sum, d) => sum + d._count.accounts, 0),
+    diskUsedMb: domains.reduce((sum, d) => sum + d.diskUsedMb, 0)
+  }
+}
+
+/**
+ * 检查即将过期的订阅（用于自动续费）
+ */
+export async function getExpiringSubscriptions(daysAhead: number): Promise<MailSubscription[]> {
+  const deadline = new Date()
+  deadline.setDate(deadline.getDate() + daysAhead)
+  
+  return prisma.mailSubscription.findMany({
+    where: {
+      status: 'active',
+      autoRenew: true,
+      expiresAt: { lte: deadline }
+    }
+  })
+}
diff --git a/server/src/db/notifications.ts b/server/src/db/notifications.ts
new file mode 100644
index 0000000..73ee299
--- /dev/null
+++ b/server/src/db/notifications.ts
@@ -0,0 +1,292 @@
+/**
+ * 通知相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { NotificationChannel } from '../types/database.js'
+
+/**
+ * 获取用户的所有通知渠道
+ */
+export async function getNotificationChannelsByUserId(userId: number): Promise<NotificationChannel[]> {
+  const channels = await prisma.notificationChannel.findMany({
+    where: { userId },
+    orderBy: {
+      createdAt: 'desc'
+    }
+  })
+
+  return channels.map(ch => ({
+    id: ch.id,
+    user_id: ch.userId,
+    type: ch.type,
+    name: ch.name,
+    config: JSON.stringify(ch.config as any),
+    enabled: ch.enabled ? 1 : 0,
+    created_at: ch.createdAt.toISOString()
+  }))
+}
+
+/**
+ * 根据 ID 获取通知渠道
+ */
+export async function getNotificationChannelById(id: number): Promise<NotificationChannel | null> {
+  const channel = await prisma.notificationChannel.findUnique({
+    where: { id }
+  })
+
+  if (!channel) return null
+
+  return {
+    id: channel.id,
+    user_id: channel.userId,
+    type: channel.type,
+    name: channel.name,
+    config: JSON.stringify(channel.config as any),
+    enabled: channel.enabled ? 1 : 0,
+    created_at: channel.createdAt.toISOString()
+  }
+}
+
+/**
+ * 创建通知渠道
+ */
+export async function createNotificationChannel(data: {
+  userId: number
+  type: 'telegram' | 'discord' | 'email' | 'webhook'
+  name: string
+  config: Record<string, unknown>
+  enabled?: boolean
+}): Promise<number> {
+  const channel = await prisma.notificationChannel.create({
+    data: {
+      userId: data.userId,
+      type: data.type,
+      name: data.name,
+      config: data.config as any,
+      enabled: data.enabled !== false
+    }
+  })
+
+  return channel.id
+}
+
+/**
+ * 更新通知渠道
+ */
+export async function updateNotificationChannel(id: number, data: {
+  name?: string
+  config?: Record<string, unknown>
+  enabled?: boolean
+}): Promise<void> {
+  const updateData: {
+    name?: string
+    config?: any
+    enabled?: boolean
+  } = {}
+
+  if (data.name !== undefined) updateData.name = data.name
+  if (data.config !== undefined) updateData.config = data.config as any
+  if (data.enabled !== undefined) updateData.enabled = data.enabled
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.notificationChannel.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 删除通知渠道
+ */
+export async function deleteNotificationChannel(id: number): Promise<void> {
+  await prisma.notificationChannel.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 获取用户启用的通知渠道
+ */
+export async function getEnabledChannelsByUserId(userId: number): Promise<NotificationChannel[]> {
+  const channels = await prisma.notificationChannel.findMany({
+    where: {
+      userId,
+      enabled: true,
+      isGlobal: false
+    }
+  })
+
+  return channels.map(ch => ({
+    id: ch.id,
+    user_id: ch.userId,
+    type: ch.type,
+    name: ch.name,
+    config: JSON.stringify(ch.config as any),
+    enabled: ch.enabled ? 1 : 0,
+    created_at: ch.createdAt.toISOString()
+  }))
+}
+
+/**
+ * 创建通知日志
+ */
+export async function createNotificationLog(data: {
+  channelId: number
+  eventType: string
+  message: string
+  status: 'pending' | 'sent' | 'failed'
+  error?: string | null
+}): Promise<number> {
+  const log = await prisma.notificationLog.create({
+    data: {
+      channelId: data.channelId,
+      eventType: data.eventType,
+      message: data.message,
+      status: data.status,
+      error: data.error ?? null
+    }
+  })
+
+  return log.id
+}
+
+/**
+ * 更新通知日志状态
+ */
+export async function updateNotificationLogStatus(
+  id: number,
+  status: 'pending' | 'sent' | 'failed',
+  error: string | null = null
+): Promise<void> {
+  await prisma.notificationLog.update({
+    where: { id },
+    data: {
+      status,
+      error: error ?? null
+    }
+  })
+}
+
+
+/**
+ * 获取用户的通知日志（分页）
+ */
+export async function getNotificationLogsByUserId(
+  userId: number,
+  options: {
+    page?: number
+    pageSize?: number
+    status?: 'pending' | 'sent' | 'failed'
+  } = {}
+): Promise<{
+  logs: Array<{
+    id: number
+    channelId: number
+    channelName: string
+    channelType: string
+    eventType: string
+    message: string
+    status: string
+    error: string | null
+    createdAt: string
+  }>
+  total: number
+  page: number
+  pageSize: number
+}> {
+  const page = options.page || 1
+  const pageSize = options.pageSize || 20
+  const skip = (page - 1) * pageSize
+
+  const where: {
+    channel: { userId: number }
+    status?: 'pending' | 'sent' | 'failed'
+  } = {
+    channel: { userId }
+  }
+
+  if (options.status) {
+    where.status = options.status
+  }
+
+  const [logs, total] = await Promise.all([
+    prisma.notificationLog.findMany({
+      where,
+      include: {
+        channel: {
+          select: {
+            name: true,
+            type: true
+          }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.notificationLog.count({ where })
+  ])
+
+  return {
+    logs: logs.map(log => ({
+      id: log.id,
+      channelId: log.channelId,
+      channelName: log.channel.name,
+      channelType: log.channel.type,
+      eventType: log.eventType,
+      message: log.message,
+      status: log.status,
+      error: log.error,
+      createdAt: log.createdAt.toISOString()
+    })),
+    total,
+    page,
+    pageSize
+  }
+}
+
+/**
+ * 获取通知统计
+ */
+export async function getNotificationStats(userId: number): Promise<{
+  total: number
+  sent: number
+  failed: number
+  pending: number
+}> {
+  const [total, sent, failed, pending] = await Promise.all([
+    prisma.notificationLog.count({
+      where: { channel: { userId } }
+    }),
+    prisma.notificationLog.count({
+      where: { channel: { userId }, status: 'sent' }
+    }),
+    prisma.notificationLog.count({
+      where: { channel: { userId }, status: 'failed' }
+    }),
+    prisma.notificationLog.count({
+      where: { channel: { userId }, status: 'pending' }
+    })
+  ])
+
+  return { total, sent, failed, pending }
+}
+
+/**
+ * 清理旧的通知日志（保留最近 N 天）
+ */
+export async function cleanOldNotificationLogs(days: number = 30): Promise<number> {
+  const cutoffDate = new Date()
+  cutoffDate.setDate(cutoffDate.getDate() - days)
+
+  const result = await prisma.notificationLog.deleteMany({
+    where: {
+      createdAt: { lt: cutoffDate }
+    }
+  })
+
+  return result.count
+}
diff --git a/server/src/db/oauth.ts b/server/src/db/oauth.ts
new file mode 100644
index 0000000..cfab02a
--- /dev/null
+++ b/server/src/db/oauth.ts
@@ -0,0 +1,250 @@
+/**
+ * OAuth 相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { OAuthConfig, UserOAuthBinding } from '../types/database.js'
+import { encryptSensitiveData } from '../lib/security.js'
+
+/**
+ * 获取所有 OAuth 配置
+ */
+export async function getOAuthConfigs(): Promise<OAuthConfig[]> {
+  const configs = await prisma.oAuthConfig.findMany({
+    orderBy: {
+      provider: 'asc'
+    }
+  })
+  
+  return configs.map(c => ({
+    id: c.id,
+    provider: c.provider,
+    client_id: c.clientId,
+    client_secret: c.clientSecret,
+    enabled: c.enabled ? 1 : 0,
+    created_at: c.createdAt.toISOString(),
+    updated_at: c.updatedAt.toISOString()
+  }))
+}
+
+/**
+ * 获取指定提供商的 OAuth 配置
+ */
+export async function getOAuthConfig(provider: 'github' | 'google'): Promise<OAuthConfig | null> {
+  const config = await prisma.oAuthConfig.findUnique({
+    where: { provider }
+  })
+  
+  if (!config) return null
+  
+  return {
+    id: config.id,
+    provider: config.provider,
+    client_id: config.clientId,
+    client_secret: config.clientSecret,
+    enabled: config.enabled ? 1 : 0,
+    created_at: config.createdAt.toISOString(),
+    updated_at: config.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 获取启用的 OAuth 配置（用于登录页面显示）
+ */
+export async function getEnabledOAuthConfigs(): Promise<Array<Pick<OAuthConfig, 'provider' | 'enabled'>>> {
+  const configs = await prisma.oAuthConfig.findMany({
+    where: { enabled: true },
+    select: {
+      provider: true,
+      enabled: true
+    }
+  })
+  
+  return configs.map(c => ({
+    provider: c.provider,
+    enabled: c.enabled ? 1 : 0
+  }))
+}
+
+/**
+ * 创建或更新 OAuth 配置
+ */
+export async function upsertOAuthConfig(
+  provider: 'github' | 'google',
+  data: {
+    clientId: string
+    clientSecret: string
+    enabled: boolean
+  }
+): Promise<number> {
+  const config = await prisma.oAuthConfig.upsert({
+    where: { provider },
+    create: {
+      provider,
+      clientId: data.clientId,
+      clientSecret: data.clientSecret,
+      enabled: data.enabled
+    },
+    update: {
+      clientId: data.clientId,
+      clientSecret: data.clientSecret,
+      enabled: data.enabled
+    }
+  })
+  
+  return config.id
+}
+
+/**
+ * 删除 OAuth 配置
+ */
+export async function deleteOAuthConfig(provider: 'github' | 'google'): Promise<void> {
+  await prisma.oAuthConfig.delete({
+    where: { provider }
+  })
+}
+
+/**
+ * 获取用户的所有 OAuth 绑定
+ */
+export async function getUserOAuthBindings(userId: number): Promise<UserOAuthBinding[]> {
+  const bindings = await prisma.userOAuthBinding.findMany({
+    where: { userId },
+    orderBy: {
+      provider: 'asc'
+    }
+  })
+  
+  return bindings.map(b => ({
+    id: b.id,
+    user_id: b.userId,
+    provider: b.provider,
+    provider_user_id: b.providerUserId,
+    provider_username: b.providerUsername,
+    provider_email: b.providerEmail,
+    provider_avatar: b.providerAvatar,
+    access_token: b.accessToken,
+    refresh_token: b.refreshToken,
+    created_at: b.createdAt.toISOString(),
+    updated_at: b.updatedAt.toISOString()
+  }))
+}
+
+/**
+ * 根据提供商用户 ID 查找绑定
+ */
+export async function findOAuthBinding(
+  provider: 'github' | 'google',
+  providerUserId: string
+): Promise<UserOAuthBinding | null> {
+  const binding = await prisma.userOAuthBinding.findUnique({
+    where: {
+      provider_providerUserId: {
+        provider,
+        providerUserId
+      }
+    }
+  })
+  
+  if (!binding) return null
+  
+  return {
+    id: binding.id,
+    user_id: binding.userId,
+    provider: binding.provider,
+    provider_user_id: binding.providerUserId,
+    provider_username: binding.providerUsername,
+    provider_email: binding.providerEmail,
+    provider_avatar: binding.providerAvatar,
+    access_token: binding.accessToken,
+    refresh_token: binding.refreshToken,
+    created_at: binding.createdAt.toISOString(),
+    updated_at: binding.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 检查用户是否已绑定某提供商
+ */
+export async function hasOAuthBinding(userId: number, provider: 'github' | 'google'): Promise<boolean> {
+  const binding = await prisma.userOAuthBinding.findUnique({
+    where: {
+      userId_provider: {
+        userId,
+        provider
+      }
+    }
+  })
+  
+  return binding !== null
+}
+
+/**
+ * 创建 OAuth 绑定
+ * 安全改进：加密存储 accessToken 和 refreshToken
+ */
+export async function createOAuthBinding(userId: number, data: {
+  provider: 'github' | 'google'
+  providerUserId: string
+  providerUsername?: string | null
+  providerEmail?: string | null
+  providerAvatar?: string | null
+  accessToken?: string | null
+  refreshToken?: string | null
+}): Promise<number> {
+  const binding = await prisma.userOAuthBinding.create({
+    data: {
+      userId,
+      provider: data.provider,
+      providerUserId: data.providerUserId,
+      providerUsername: data.providerUsername ?? null,
+      providerEmail: data.providerEmail ?? null,
+      providerAvatar: data.providerAvatar ?? null,
+      // 加密存储 OAuth Token
+      accessToken: data.accessToken ? encryptSensitiveData(data.accessToken) : null,
+      refreshToken: data.refreshToken ? encryptSensitiveData(data.refreshToken) : null
+    }
+  })
+  
+  return binding.id
+}
+
+/**
+ * 更新 OAuth 绑定的 Token
+ * 安全改进：加密存储 accessToken 和 refreshToken
+ */
+export async function updateOAuthBindingToken(
+  userId: number,
+  provider: 'github' | 'google',
+  accessToken: string,
+  refreshToken: string | null = null
+): Promise<void> {
+  await prisma.userOAuthBinding.update({
+    where: {
+      userId_provider: {
+        userId,
+        provider
+      }
+    },
+    data: {
+      // 加密存储
+      accessToken: encryptSensitiveData(accessToken),
+      refreshToken: refreshToken ? encryptSensitiveData(refreshToken) : undefined
+    }
+  })
+}
+
+/**
+ * 删除 OAuth 绑定
+ */
+export async function deleteOAuthBinding(userId: number, provider: 'github' | 'google'): Promise<void> {
+  await prisma.userOAuthBinding.delete({
+    where: {
+      userId_provider: {
+        userId,
+        provider
+      }
+    }
+  })
+}
diff --git a/server/src/db/optimizations.ts b/server/src/db/optimizations.ts
new file mode 100644
index 0000000..6fa08b6
--- /dev/null
+++ b/server/src/db/optimizations.ts
@@ -0,0 +1,321 @@
+/**
+ * 数据库查询优化工具
+ * PERF002: N+1 查询优化
+ * 
+ * 提供优化的查询方法，避免 N+1 问题
+ * 
+ * 优化策略：
+ * 1. 使用 Prisma include 预加载关系数据
+ * 2. 使用 select 只获取需要的字段
+ * 3. 批量查询代替循环单条查询
+ * 4. 游标分页代替 offset 分页（大数据集）
+ * 5. 事务批量更新代替多次单独更新
+ * 
+ * 安全改进：批量操作使用显式事务隔离级别
+ */
+
+import { prisma } from './prisma.js'
+import { Prisma } from '@prisma/client'
+
+// 事务隔离级别配置 - 配额更新使用 Serializable
+const QUOTA_UPDATE_TRANSACTION_OPTIONS = {
+    isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+    timeout: 10000,
+} as const
+
+/**
+ * 批量获取用户配额（避免 N+1 问题）
+ */
+export async function getUsersWithQuotasBatch(userIds: number[]) {
+  if (userIds.length === 0) return []
+  
+  const users = await prisma.user.findMany({
+    where: {
+      id: { in: userIds }
+    },
+    include: {
+      quota: true
+    }
+  })
+  
+  return users
+}
+
+/**
+ * 批量获取实例的主机信息（避免 N+1 问题）
+ */
+export async function getInstancesWithHostsBatch(instanceIds: number[]) {
+  if (instanceIds.length === 0) return []
+  
+  const instances = await prisma.instance.findMany({
+    where: {
+      id: { in: instanceIds }
+    },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          location: true,
+          countryCode: true,
+          status: true
+        }
+      }
+    }
+  })
+  
+  return instances
+}
+
+/**
+ * 优化的分页查询（使用游标分页，适合大数据集）
+ */
+export async function getInstancesCursorPaginated(cursor: number | null, limit: number = 20) {
+  const instances = await prisma.instance.findMany({
+    take: limit + 1, // 多取一条用于判断是否有下一页
+    ...(cursor ? { skip: 1, cursor: { id: cursor } } : {}),
+    where: {
+      status: { not: 'deleted' }
+    },
+    include: {
+      host: {
+        select: {
+          name: true,
+          location: true,
+          countryCode: true
+        }
+      },
+      user: {
+        select: {
+          username: true
+        }
+      }
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+  
+  const hasNextPage = instances.length > limit
+  const items = hasNextPage ? instances.slice(0, limit) : instances
+  const nextCursor = hasNextPage ? items[items.length - 1].id : null
+  
+  return {
+    items,
+    nextCursor,
+    hasNextPage
+  }
+}
+
+/**
+ * 使用 select 优化查询（只获取需要的字段）
+ */
+export async function getInstancesLightweight(limit: number = 20) {
+  return await prisma.instance.findMany({
+    take: limit,
+    where: {
+      status: { not: 'deleted' }
+    },
+    select: {
+      id: true,
+      incusId: true,
+      name: true,
+      status: true,
+      cpu: true,
+      memory: true,
+      disk: true,
+      ipv4: true,
+      ipv6: true,
+      createdAt: true,
+      host: {
+        select: {
+          name: true,
+          countryCode: true
+        }
+      },
+      user: {
+        select: {
+          username: true
+        }
+      }
+    },
+    orderBy: {
+      createdAt: 'desc'
+    }
+  })
+}
+
+/**
+ * 批量更新（使用事务优化）
+ * 安全改进：显式指定 Serializable 隔离级别，确保配额更新一致性
+ */
+export async function batchUpdateUserQuotas(updates: Array<{
+  userId: number
+  cpuUsed?: number
+  memoryUsed?: number
+  diskUsed?: number
+}>) {
+  return await prisma.$transaction(
+    updates.map(update => {
+      const data: any = {}
+      if (update.cpuUsed !== undefined) data.cpuUsed = { increment: update.cpuUsed }
+      if (update.memoryUsed !== undefined) data.memoryUsed = { increment: update.memoryUsed }
+      if (update.diskUsed !== undefined) data.diskUsed = { increment: update.diskUsed }
+      
+      return prisma.userQuota.update({
+        where: { userId: update.userId },
+        data
+      })
+    }),
+    QUOTA_UPDATE_TRANSACTION_OPTIONS
+  )
+}
+
+/**
+ * PERF002: 批量获取实例的完整信息（包含主机和用户）
+ * 避免在循环中单独查询主机或用户信息
+ */
+export async function getInstancesWithDetailsBatch(instanceIds: number[]) {
+  if (instanceIds.length === 0) return []
+  
+  return await prisma.instance.findMany({
+    where: {
+      id: { in: instanceIds }
+    },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          location: true,
+          countryCode: true,
+          status: true,
+          url: true
+        }
+      },
+      user: {
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          avatarStyle: true
+        }
+      }
+    }
+  })
+}
+
+/**
+ * PERF002: 批量获取备份信息（包含实例）
+ */
+export async function getBackupsWithDetailsBatch(backupIds: number[]) {
+  if (backupIds.length === 0) return []
+  
+  return await prisma.backup.findMany({
+    where: {
+      id: { in: backupIds }
+    },
+    include: {
+      instance: {
+        select: {
+          id: true,
+          name: true,
+          status: true
+        }
+      }
+    }
+  })
+}
+
+/**
+ * PERF002: 并行查询多个 count（避免串行等待）
+ */
+export async function getMultipleCounts(queries: {
+  instances?: { where?: any }
+  users?: { where?: any }
+  hosts?: { where?: any }
+  backups?: { where?: any }
+}) {
+  const countPromises: Promise<number>[] = []
+  const keys: string[] = []
+
+  if (queries.instances) {
+    keys.push('instances')
+    countPromises.push(prisma.instance.count({ where: queries.instances.where }))
+  }
+  if (queries.users) {
+    keys.push('users')
+    countPromises.push(prisma.user.count({ where: queries.users.where }))
+  }
+  if (queries.hosts) {
+    keys.push('hosts')
+    countPromises.push(prisma.host.count({ where: queries.hosts.where }))
+  }
+  if (queries.backups) {
+    keys.push('backups')
+    countPromises.push(prisma.backup.count({ where: queries.backups.where }))
+  }
+
+  const counts = await Promise.all(countPromises)
+  
+  const result: Record<string, number> = {}
+  keys.forEach((key, index) => {
+    result[key] = counts[index]
+  })
+  
+  return result
+}
+
+/**
+ * PERF002: 使用 Map 结构的批量获取（方便快速查找）
+ */
+export async function getUsersMapByIds(userIds: number[]): Promise<Map<number, {
+  id: number
+  username: string
+  email: string | null
+  avatarStyle: string | null
+}>> {
+  if (userIds.length === 0) return new Map()
+  
+  const users = await prisma.user.findMany({
+    where: {
+      id: { in: userIds }
+    },
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      avatarStyle: true
+    }
+  })
+  
+  return new Map(users.map(u => [u.id, u]))
+}
+
+/**
+ * PERF002: 使用 Map 结构的主机批量获取
+ */
+export async function getHostsMapByIds(hostIds: number[]): Promise<Map<number, {
+  id: number
+  name: string
+  location: string | null
+  countryCode: string | null
+  status: string
+}>> {
+  if (hostIds.length === 0) return new Map()
+  
+  const hosts = await prisma.host.findMany({
+    where: {
+      id: { in: hostIds }
+    },
+    select: {
+      id: true,
+      name: true,
+      location: true,
+      countryCode: true,
+      status: true
+    }
+  })
+  
+  return new Map(hosts.map(h => [h.id, h]))
+}
diff --git a/server/src/db/package-hosts.ts b/server/src/db/package-hosts.ts
new file mode 100644
index 0000000..2e876cb
--- /dev/null
+++ b/server/src/db/package-hosts.ts
@@ -0,0 +1,135 @@
+/**
+ * 套餐与宿主机绑定相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+
+/**
+ * 获取套餐绑定的宿主机ID列表
+ */
+export async function getPackageHostIds(packageId: number): Promise<number[]> {
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { packageId },
+    select: { hostId: true }
+  })
+  return packageHosts.map(ph => ph.hostId)
+}
+
+/**
+ * 获取套餐绑定的宿主机列表（包含详细信息）
+ */
+export async function getPackageHosts(packageId: number): Promise<Array<{
+  id: number
+  name: string
+  location: string | null
+  status: string
+}>> {
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { packageId },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          location: true,
+          status: true
+        }
+      }
+    }
+  })
+  return packageHosts.map(ph => ({
+    id: ph.host.id,
+    name: ph.host.name,
+    location: ph.host.location,
+    status: ph.host.status
+  }))
+}
+
+/**
+ * 设置套餐绑定的宿主机（替换所有绑定）
+ * 注意：必须至少绑定一个宿主机
+ */
+export async function setPackageHosts(packageId: number, hostIds: number[]): Promise<void> {
+  if (hostIds.length === 0) {
+    throw new Error('Package must have at least one host bound')
+  }
+
+  // 先删除所有现有绑定
+  await prisma.packageHost.deleteMany({
+    where: { packageId }
+  })
+
+  // 创建新绑定
+  await prisma.packageHost.createMany({
+    data: hostIds.map(hostId => ({
+      packageId,
+      hostId
+    })),
+    skipDuplicates: true
+  })
+}
+
+/**
+ * 添加套餐绑定的宿主机
+ */
+export async function addPackageHost(packageId: number, hostId: number): Promise<void> {
+  await prisma.packageHost.upsert({
+    where: {
+      packageId_hostId: {
+        packageId,
+        hostId
+      }
+    },
+    create: {
+      packageId,
+      hostId
+    },
+    update: {}
+  })
+}
+
+/**
+ * 删除套餐绑定的宿主机
+ * 注意：删除后必须至少保留一个宿主机
+ */
+export async function removePackageHost(packageId: number, hostId: number): Promise<void> {
+  const currentCount = await prisma.packageHost.count({
+    where: { packageId }
+  })
+
+  if (currentCount <= 1) {
+    throw new Error('Package must have at least one host bound')
+  }
+
+  await prisma.packageHost.delete({
+    where: {
+      packageId_hostId: {
+        packageId,
+        hostId
+      }
+    }
+  })
+}
+
+/**
+ * 检查套餐是否绑定了宿主机
+ */
+export async function hasPackageHosts(packageId: number): Promise<boolean> {
+  const count = await prisma.packageHost.count({
+    where: { packageId }
+  })
+  return count > 0
+}
+
+/**
+ * 获取宿主机被哪些套餐绑定
+ */
+export async function getHostPackages(hostId: number): Promise<number[]> {
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { hostId },
+    select: { packageId: true }
+  })
+  return packageHosts.map(ph => ph.packageId)
+}
+
diff --git a/server/src/db/package-plans.ts b/server/src/db/package-plans.ts
new file mode 100644
index 0000000..c0b0987
--- /dev/null
+++ b/server/src/db/package-plans.ts
@@ -0,0 +1,388 @@
+/**
+ * 套餐方案相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { PackagePlan } from '@prisma/client'
+import { applyTrafficMultiplier } from '../lib/traffic-multiplier.js'
+import { calculateInstanceTrafficStatus } from '../services/traffic-utils.js'
+
+// ==================== 查询操作 ====================
+
+/**
+ * 根据 ID 获取方案
+ */
+export async function getPlanById(id: number): Promise<PackagePlan | null> {
+  return prisma.packagePlan.findUnique({
+    where: { id }
+  })
+}
+
+/**
+ * 获取套餐下的所有方案
+ */
+export async function getPlansByPackageId(
+  packageId: number,
+  options: {
+    activeOnly?: boolean
+  } = {}
+): Promise<PackagePlan[]> {
+  const { activeOnly = false } = options
+  
+  return prisma.packagePlan.findMany({
+    where: {
+      packageId,
+      ...(activeOnly ? { isActive: true } : {})
+    },
+    orderBy: { sortOrder: 'asc' }
+  })
+}
+
+/**
+ * 获取套餐下的活跃方案
+ */
+export async function getActivePlansByPackageId(packageId: number): Promise<PackagePlan[]> {
+  return getPlansByPackageId(packageId, { activeOnly: true })
+}
+
+/**
+ * 检查套餐是否为付费套餐（有活跃方案）
+ */
+export async function isPaidPackage(packageId: number): Promise<boolean> {
+  const count = await prisma.packagePlan.count({
+    where: {
+      packageId,
+      isActive: true
+    }
+  })
+  return count > 0
+}
+
+/**
+ * 检查方案名称是否在套餐下唯一
+ */
+export async function isPlanNameUnique(
+  packageId: number,
+  name: string,
+  excludeId?: number
+): Promise<boolean> {
+  const existing = await prisma.packagePlan.findFirst({
+    where: {
+      packageId,
+      name,
+      ...(excludeId ? { id: { not: excludeId } } : {})
+    }
+  })
+  return !existing
+}
+
+// ==================== 创建操作 ====================
+
+export interface CreatePlanInput {
+  packageId: number
+  name: string
+  description?: string
+  cpu: number
+  memory: number
+  disk: number
+  portLimit: number
+  snapshotLimit: number
+  backupLimit: number
+  siteLimit: number
+  swapSize: number
+  trafficLimit: bigint
+  trafficLimitSpeed?: string
+  price: number
+  billingCycle?: number
+  setupFee?: number
+  isActive?: boolean
+  isSoldOut?: boolean
+  sortOrder?: number
+  slaGuarantee?: number | null
+}
+
+/**
+ * 创建套餐方案
+ */
+export async function createPlan(input: CreatePlanInput): Promise<PackagePlan> {
+  const {
+    packageId,
+    name,
+    description,
+    cpu,
+    memory,
+    disk,
+    portLimit,
+    snapshotLimit,
+    backupLimit,
+    siteLimit,
+    swapSize,
+    trafficLimit,
+    trafficLimitSpeed = '1Mbit',
+    price,
+    billingCycle = 1,
+    setupFee = 0,
+    isActive = true,
+    isSoldOut = false,
+    sortOrder = 0,
+    slaGuarantee = null
+  } = input
+
+  return prisma.packagePlan.create({
+    data: {
+      packageId,
+      name,
+      description,
+      cpu,
+      memory,
+      disk,
+      portLimit,
+      snapshotLimit,
+      backupLimit,
+      siteLimit,
+      swapSize,
+      trafficLimit,
+      trafficLimitSpeed,
+      price,
+      billingCycle,
+      setupFee,
+      isActive,
+      isSoldOut,
+      sortOrder,
+      slaGuarantee
+    }
+  })
+}
+
+// ==================== 更新操作 ====================
+
+export interface UpdatePlanInput {
+  name?: string
+  description?: string
+  cpu?: number
+  memory?: number
+  disk?: number
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  swapSize?: number
+  trafficLimit?: bigint
+  trafficLimitSpeed?: string
+  price?: number
+  billingCycle?: number
+  setupFee?: number
+  isActive?: boolean
+  isSoldOut?: boolean
+  sortOrder?: number
+  slaGuarantee?: number | null
+}
+
+/**
+ * 更新套餐方案
+ */
+export async function updatePlan(
+  id: number,
+  input: UpdatePlanInput
+): Promise<PackagePlan> {
+  return prisma.packagePlan.update({
+    where: { id },
+    data: input
+  })
+}
+
+/**
+ * 更新方案配额后，同步到所有关联实例
+ * 注意：只同步配额字段，不同步资源配置（CPU/内存/磁盘）
+ */
+export async function syncPlanQuotaToInstances(
+  planId: number,
+  plan: PackagePlan,
+  previousPlanSwapSize?: number
+): Promise<{ count: number; instanceIds: number[] }> {
+  const pkg = await prisma.package.findUnique({
+    where: { id: plan.packageId },
+    select: {
+      instanceType: true,
+      packageHosts: {
+        select: {
+          hostId: true,
+          trafficMultiplier: true
+        }
+      }
+    }
+  })
+
+  const multiplierByHostId = new Map((pkg?.packageHosts || []).map(binding => [
+    binding.hostId,
+    binding.trafficMultiplier
+  ]))
+
+  const updatedTrafficInstanceIds: number[] = []
+
+  async function applyTrafficLimitsToPlanInstances(): Promise<void> {
+    const instances = await prisma.instance.findMany({
+      where: { packagePlanId: planId },
+      select: { id: true, hostId: true, monthlyTrafficUsed: true }
+    })
+
+    await Promise.all(instances.map(instance => {
+      const monthlyTrafficLimit = applyTrafficMultiplier(plan.trafficLimit, multiplierByHostId.get(instance.hostId) ?? 1)
+      updatedTrafficInstanceIds.push(instance.id)
+      return prisma.instance.update({
+        where: { id: instance.id },
+        data: {
+          monthlyTrafficLimit,
+          trafficStatus: calculateInstanceTrafficStatus(instance.monthlyTrafficUsed, monthlyTrafficLimit)
+        }
+      })
+    }))
+  }
+
+  if (pkg?.instanceType === 'vm') {
+    const vmResult = await prisma.instance.updateMany({
+      where: { packagePlanId: planId },
+      data: {
+        portLimit: plan.portLimit,
+        snapshotLimit: plan.snapshotLimit,
+        backupLimit: plan.backupLimit,
+        siteLimit: plan.siteLimit,
+        swapEnabled: false,
+        swapSize: null
+      }
+    })
+    await applyTrafficLimitsToPlanInstances()
+    return { count: vmResult.count, instanceIds: updatedTrafficInstanceIds }
+  }
+
+  const enabledResult = await prisma.instance.updateMany({
+    where: { packagePlanId: planId, swapEnabled: true },
+    data: {
+      portLimit: plan.portLimit,
+      snapshotLimit: plan.snapshotLimit,
+      backupLimit: plan.backupLimit,
+      siteLimit: plan.siteLimit
+    }
+  })
+
+  const disabledQuotaResult = await prisma.instance.updateMany({
+    where: {
+      packagePlanId: planId,
+      swapEnabled: false
+    },
+    data: {
+      portLimit: plan.portLimit,
+      snapshotLimit: plan.snapshotLimit,
+      backupLimit: plan.backupLimit,
+      siteLimit: plan.siteLimit
+    }
+  })
+
+  await prisma.instance.updateMany({
+    where: {
+      packagePlanId: planId,
+      swapEnabled: false,
+      OR: [
+        { swapSize: null },
+        { swapSize: previousPlanSwapSize ?? 0 }
+      ]
+    },
+    data: {
+      swapSize: plan.swapSize,
+    }
+  })
+  await applyTrafficLimitsToPlanInstances()
+  return { count: enabledResult.count + disabledQuotaResult.count, instanceIds: updatedTrafficInstanceIds }
+}
+
+/**
+ * 启用/禁用方案
+ */
+export async function togglePlanActive(
+  id: number,
+  isActive: boolean
+): Promise<PackagePlan> {
+  return prisma.packagePlan.update({
+    where: { id },
+    data: { isActive }
+  })
+}
+
+// ==================== 删除操作 ====================
+
+/**
+ * 检查方案是否可以删除
+ * 如果方案还有关联的实例，则不能删除
+ */
+export async function canDeletePlan(id: number): Promise<{
+  canDelete: boolean
+  reason?: string
+  instanceCount?: number
+}> {
+  const instanceCount = await prisma.instance.count({
+    where: { packagePlanId: id }
+  })
+  
+  if (instanceCount > 0) {
+    return {
+      canDelete: false,
+      reason: `该方案下还有 ${instanceCount} 个实例，无法删除`,
+      instanceCount
+    }
+  }
+  
+  return { canDelete: true }
+}
+
+/**
+ * 删除套餐方案
+ */
+export async function deletePlan(id: number): Promise<void> {
+  await prisma.packagePlan.delete({
+    where: { id }
+  })
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 计算方案月价
+ * 注意：PackagePlan.price 存储的是分（cents），此函数返回的也是分
+ * 如需显示为元，调用方需要 / 100
+ */
+export function calculateMonthlyPrice(plan: PackagePlan): number {
+  const price = Number(plan.price) || 0  // 分
+  const cycle = Math.max(plan.billingCycle || 1, 1) // 防止除零
+  return price / cycle  // 返回分/月
+}
+
+/**
+ * 获取方案包含的资源配置（用于前端展示）
+ */
+export function getPlanResources(plan: PackagePlan) {
+  return {
+    cpu: plan.cpu,
+    memory: plan.memory,
+    disk: plan.disk,
+    portLimit: plan.portLimit,
+    snapshotLimit: plan.snapshotLimit,
+    backupLimit: plan.backupLimit,
+    siteLimit: plan.siteLimit,
+    swapSize: plan.swapSize,
+    trafficLimit: plan.trafficLimit.toString(),
+    trafficLimitSpeed: plan.trafficLimitSpeed
+  }
+}
+
+/**
+ * 获取方案计费信息（用于前端展示）
+ */
+export function getPlanBilling(plan: PackagePlan) {
+  return {
+    price: Number(plan.price),
+    billingCycle: plan.billingCycle,
+    setupFee: Number(plan.setupFee),
+    monthlyPrice: calculateMonthlyPrice(plan)
+  }
+}
diff --git a/server/src/db/package-shares.ts b/server/src/db/package-shares.ts
new file mode 100644
index 0000000..3bd213f
--- /dev/null
+++ b/server/src/db/package-shares.ts
@@ -0,0 +1,687 @@
+/**
+ * 套餐共享数据库操作模块
+ */
+
+import { prisma } from './prisma.js'
+import { getBlockerIdsForUser, isUserBlockedByHoster } from './hosting-blocks.js'
+
+function normalizeGlobalMaxInstances(value: number | null | undefined): number {
+    return typeof value === 'number' && Number.isInteger(value) && value >= 1 && value <= 5 ? value : 1
+}
+
+// ==================== 类型定义 ====================
+
+export interface PackageShareInfo {
+    id: number
+    packageId: number
+    packageName: string
+    ownerId: number
+    ownerUsername: string
+    sharedToId: number
+    sharedToUsername: string
+    sharedToAvatarStyle?: string | null
+    sharedToAvatarBadgeId?: string | null
+    quotaMultiplier: number | null  // 配额倍数限制，null 表示无限制
+    maxInstances: number | null     // 最多实例数，null 表示无限制
+    createdAt: Date
+}
+
+export interface SharedPackageInfo {
+    id: number
+    name: string
+    description: string | null
+    cpuMax: number
+    memoryMax: number
+    diskMax: number
+    bandwidthMax: number | null
+    networkMode: string
+    instanceType: 'container' | 'vm'  // 实例类型
+    portLimit: number
+    snapshotLimit: number
+    backupLimit: number
+    siteLimit: number
+    monthlyTrafficLimit: string | null
+    hostIds: number[]
+    nested: number  // 是否支持嵌套虚拟化
+    privileged: number  // 是否是特权容器
+    ownerId: number
+    ownerUsername: string
+    sharedAt: Date
+    isGlobalShared?: boolean  // 是否是全局共享
+    quotaMultiplier?: number | null  // 配额倍数（全局共享时使用）
+    maxInstances?: number | null  // 最大实例数（全局共享时使用）
+    requiredPackageId?: number | null
+    requiredPackageName?: string | null
+    allowInstanceDeletion?: boolean  // 是否允许用户删除实例
+}
+
+export interface HostingZoneInfo {
+    id: number
+    name: string
+    ownerId: number
+    ownerUsername: string
+    logoUrl: string
+    sortOrder: number
+}
+
+// ==================== 共享操作 ====================
+
+/**
+ * 共享套餐给好友
+ * @param quotaMultiplier 配额倍数限制，如 0.5, 1.0, 1.5, 2.0，null 表示无限制
+ * @param maxInstances 最多可开实例数，null 表示无限制
+ */
+export async function sharePackage(
+    packageId: number,
+    ownerId: number,
+    sharedToId: number,
+    quotaMultiplier?: number | null,
+    maxInstances?: number | null
+): Promise<number> {
+    const share = await prisma.packageShare.create({
+        data: {
+            packageId,
+            ownerId,
+            sharedToId,
+            quotaMultiplier: quotaMultiplier ?? null,
+            maxInstances: maxInstances ?? null
+        }
+    })
+    return share.id
+}
+
+/**
+ * 更新共享配额限制
+ * @param shareId 共享记录 ID
+ * @param packageId 套餐 ID（用于验证归属）
+ * @param quotaMultiplier 配额倍数
+ * @param maxInstances 最大实例数
+ * @returns 是否更新成功
+ */
+export async function updateShareQuota(
+    shareId: number,
+    packageId: number,
+    quotaMultiplier?: number | null,
+    maxInstances?: number | null
+): Promise<boolean> {
+    // 安全：确保 shareId 属于指定的 packageId
+    const result = await prisma.packageShare.updateMany({
+        where: {
+            id: shareId,
+            packageId: packageId  // 关键安全检查
+        },
+        data: {
+            quotaMultiplier: quotaMultiplier,
+            maxInstances: maxInstances
+        }
+    })
+    return result.count > 0
+}
+
+/**
+ * 获取用户使用某共享套餐已创建的实例统计
+ * @param tx 可选的事务客户端，用于在事务中统计（防止并发问题）
+ */
+export async function getSharedPackageUsage(
+    packageId: number, 
+    userId: number,
+    tx?: typeof prisma
+): Promise<{
+    instanceCount: number
+    totalCpu: number
+    totalMemory: number
+}> {
+    const client = tx || prisma
+    // 只统计已成功创建的实例（running 或 stopped），排除 creating、deleted、error 状态
+    // 这样可以确保配额统计的准确性，避免创建中的实例永久占用配额
+    const instances = await client.instance.findMany({
+        where: {
+            userId,
+            packageId,
+            status: { in: ['running', 'stopped'] }
+        },
+        select: {
+            cpu: true,
+            memory: true
+        }
+    })
+
+    return {
+        instanceCount: instances.length,
+        totalCpu: instances.reduce((sum, i) => sum + i.cpu, 0),
+        totalMemory: instances.reduce((sum, i) => sum + i.memory, 0)
+    }
+}
+
+/**
+ * 获取共享记录（用于实例创建时的配额检查）
+ * 返回公开套餐的配额信息
+ * 注意：已移除好友共享机制
+ * @param tx 可选的事务客户端，用于在事务中查询（防止并发问题）
+ */
+export async function getPackageShareForUser(
+    packageId: number, 
+    userId: number,
+    tx?: typeof prisma
+): Promise<{
+    id: number
+    quotaMultiplier: number | null
+    maxInstances: number | null
+    isGlobalShared: boolean  // 是否是公开套餐
+} | null> {
+    const client = tx || prisma
+
+    // 检查是否是公开套餐
+    const pkg = await client.package.findUnique({
+        where: { id: packageId },
+        select: {
+            globalShared: true,
+            globalQuotaMultiplier: true,
+            globalMaxInstances: true,
+            userId: true
+        }
+    })
+
+    if (pkg && pkg.globalShared && pkg.userId !== userId) {
+        if (await isUserBlockedByHoster(pkg.userId, userId, client)) {
+            return null
+        }
+
+        return {
+            id: packageId,  // 使用 packageId 作为标识
+            quotaMultiplier: null,
+            maxInstances: normalizeGlobalMaxInstances(pkg.globalMaxInstances),
+            isGlobalShared: true
+        }
+    }
+
+    return null
+}
+
+/**
+ * 取消套餐共享
+ */
+export async function unsharePackage(packageId: number, sharedToId: number): Promise<boolean> {
+    const result = await prisma.packageShare.deleteMany({
+        where: {
+            packageId,
+            sharedToId
+        }
+    })
+    return result.count > 0
+}
+
+/**
+ * 取消套餐的所有共享
+ */
+export async function unsharePackageAll(packageId: number): Promise<number> {
+    const result = await prisma.packageShare.deleteMany({
+        where: { packageId }
+    })
+    return result.count
+}
+
+/**
+ * 取消两个用户之间的所有套餐共享
+ * 用于删除好友关系时自动清理共享
+ */
+export async function unsharePackageBetweenUsers(userId1: number, userId2: number): Promise<number> {
+    // 删除 userId1 共享给 userId2 的套餐
+    const result1 = await prisma.packageShare.deleteMany({
+        where: {
+            ownerId: userId1,
+            sharedToId: userId2
+        }
+    })
+    
+    // 删除 userId2 共享给 userId1 的套餐
+    const result2 = await prisma.packageShare.deleteMany({
+        where: {
+            ownerId: userId2,
+            sharedToId: userId1
+        }
+    })
+    
+    return result1.count + result2.count
+}
+
+/**
+ * 检查套餐是否已共享给某用户
+ */
+export async function isPackageSharedTo(packageId: number, userId: number): Promise<boolean> {
+    const share = await prisma.packageShare.findUnique({
+        where: {
+            packageId_sharedToId: {
+                packageId,
+                sharedToId: userId
+            }
+        }
+    })
+    return !!share
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 获取套餐的共享列表（套餐所有者查看）
+ */
+export async function getPackageShares(packageId: number): Promise<PackageShareInfo[]> {
+    const shares = await prisma.packageShare.findMany({
+        where: { packageId },
+        include: {
+            package: {
+                select: { name: true }
+            },
+            owner: {
+                select: { username: true }
+            },
+            sharedTo: {
+                select: { username: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return shares.map(s => ({
+        id: s.id,
+        packageId: s.packageId,
+        packageName: s.package.name,
+        ownerId: s.ownerId,
+        ownerUsername: s.owner.username,
+        sharedToId: s.sharedToId,
+        sharedToUsername: s.sharedTo.username,
+        sharedToAvatarStyle: s.sharedTo.avatarStyle,
+        sharedToAvatarBadgeId: s.sharedTo.avatarBadgeId ?? null,
+        quotaMultiplier: s.quotaMultiplier ? Number(s.quotaMultiplier) : null,
+        maxInstances: s.maxInstances,
+        createdAt: s.createdAt
+    }))
+}
+
+/**
+ * 获取用户共享出去的所有套餐
+ */
+export async function getSharedByUser(userId: number): Promise<PackageShareInfo[]> {
+    const shares = await prisma.packageShare.findMany({
+        where: { ownerId: userId },
+        include: {
+            package: {
+                select: { name: true }
+            },
+            owner: {
+                select: { username: true }
+            },
+            sharedTo: {
+                select: { username: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return shares.map(s => ({
+        id: s.id,
+        packageId: s.packageId,
+        packageName: s.package.name,
+        ownerId: s.ownerId,
+        ownerUsername: s.owner.username,
+        sharedToId: s.sharedToId,
+        sharedToUsername: s.sharedTo.username,
+        sharedToAvatarStyle: s.sharedTo.avatarStyle,
+        sharedToAvatarBadgeId: s.sharedTo.avatarBadgeId ?? null,
+        quotaMultiplier: s.quotaMultiplier ? Number(s.quotaMultiplier) : null,
+        maxInstances: s.maxInstances,
+        createdAt: s.createdAt
+    }))
+}
+
+/**
+ * 获取共享给用户的套餐列表（好友共享）
+ * 通过 PackageShare 表查询好友共享的套餐
+ */
+export async function getSharedToUser(userId: number): Promise<SharedPackageInfo[]> {
+    const blockerIds = await getBlockerIdsForUser(userId)
+    const shares = await prisma.packageShare.findMany({
+        where: {
+            sharedToId: userId,
+            ...(blockerIds.length > 0 ? { ownerId: { notIn: blockerIds } } : {})
+        },
+        include: {
+            package: {
+                include: {
+                    packageHosts: {
+                        select: { hostId: true }
+                    },
+                    user: {
+                        select: { id: true, username: true }
+                    },
+                    requiredPackage: {
+                        select: {
+                            id: true,
+                            name: true
+                        }
+                    }
+                }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    // 只返回启用的套餐
+    return shares
+        .filter(s => s.package.active)
+        .map(s => ({
+            id: s.package.id,
+            name: s.package.name,
+            description: s.package.description,
+            cpuMax: s.package.cpuMax,
+            memoryMax: s.package.memoryMax,
+            diskMax: s.package.diskMax,
+            bandwidthMax: s.package.bandwidthMax,
+            networkMode: s.package.networkMode,
+            instanceType: s.package.instanceType === 'vm' ? 'vm' : 'container',
+            portLimit: s.package.portLimit,
+            snapshotLimit: s.package.snapshotLimit,
+            backupLimit: s.package.backupLimit,
+            siteLimit: s.package.siteLimit,
+            monthlyTrafficLimit: s.package.monthlyTrafficLimit?.toString() ?? null,
+            nested: s.package.nested ? 1 : 0,
+            privileged: s.package.privileged ? 1 : 0,
+            allowInstanceDeletion: s.package.allowInstanceDeletion,
+            hostIds: s.package.packageHosts.map(ph => ph.hostId),
+            ownerId: s.package.user.id,
+            ownerUsername: s.package.user.username,
+            sharedAt: s.createdAt,
+            isGlobalShared: false,
+            quotaMultiplier: s.quotaMultiplier ? Number(s.quotaMultiplier) : null,
+            maxInstances: s.maxInstances,
+            requiredPackageId: s.package.requiredPackageId,
+            requiredPackageName: s.package.requiredPackage?.name ?? null
+        }))
+}
+
+/**
+ * 获取托管市场的套餐列表（用户托管的公开套餐）
+ * 非管理员创建的 globalShared=true 的套餐
+ * 注意：现在包含用户自己的套餐（展示用），但创建实例时会校验
+ */
+export async function getActiveHostingZoneOwnerIds(): Promise<number[]> {
+    const zones = await prisma.hostingZone.findMany({
+        where: { active: true },
+        select: { ownerId: true }
+    })
+    return zones.map(zone => zone.ownerId)
+}
+
+export async function getHostingZonesForViewer(viewerId?: number): Promise<HostingZoneInfo[]> {
+    const blockerIds = viewerId ? await getBlockerIdsForUser(viewerId) : []
+    const zones = await prisma.hostingZone.findMany({
+        where: {
+            active: true,
+            ...(blockerIds.length > 0 ? { ownerId: { notIn: blockerIds } } : {})
+        },
+        include: {
+            owner: {
+                select: {
+                    id: true,
+                    username: true
+                }
+            }
+        },
+        orderBy: [
+            { sortOrder: 'asc' },
+            { id: 'asc' }
+        ]
+    })
+
+    return zones.map(zone => ({
+        id: zone.id,
+        name: zone.name,
+        ownerId: zone.ownerId,
+        ownerUsername: zone.owner.username,
+        logoUrl: zone.logoUrl,
+        sortOrder: zone.sortOrder
+    }))
+}
+
+export async function getActiveHostingZoneById(zoneId: number, viewerId?: number): Promise<HostingZoneInfo | null> {
+    const zone = await prisma.hostingZone.findFirst({
+        where: {
+            id: zoneId,
+            active: true
+        },
+        include: {
+            owner: {
+                select: {
+                    id: true,
+                    username: true
+                }
+            }
+        }
+    })
+
+    if (!zone) return null
+    if (viewerId && await isUserBlockedByHoster(zone.ownerId, viewerId)) return null
+
+    return {
+        id: zone.id,
+        name: zone.name,
+        ownerId: zone.ownerId,
+        ownerUsername: zone.owner.username,
+        logoUrl: zone.logoUrl,
+        sortOrder: zone.sortOrder
+    }
+}
+
+export async function getHostedMarketPackages(
+    viewerId?: number,
+    options: {
+        ownerId?: number
+        excludeOwnerIds?: number[]
+    } = {}
+): Promise<SharedPackageInfo[]> {
+    const blockerIds = viewerId ? await getBlockerIdsForUser(viewerId) : []
+    const excludedOwnerIds = Array.from(new Set([
+        ...blockerIds,
+        ...(options.excludeOwnerIds || [])
+    ]))
+
+    if (options.ownerId && excludedOwnerIds.includes(options.ownerId)) {
+        return []
+    }
+
+    const packages = await prisma.package.findMany({
+        where: {
+            globalShared: true,
+            active: true,
+            ...(options.ownerId
+                ? { userId: options.ownerId }
+                : excludedOwnerIds.length > 0
+                    ? { userId: { notIn: excludedOwnerIds } }
+                    : {}),
+            // 不再排除用户自己的套餐，允许展示
+            user: {
+                role: { not: 'admin' }  // 排除管理员创建的套餐（那是官方套餐）
+            }
+        },
+        include: {
+            packageHosts: {
+                select: { hostId: true }
+            },
+            user: {
+                select: { id: true, username: true }
+            },
+            requiredPackage: {
+                select: {
+                    id: true,
+                    name: true
+                }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return packages.map(pkg => ({
+        id: pkg.id,
+        name: pkg.name,
+        description: pkg.description,
+        cpuMax: pkg.cpuMax,
+        memoryMax: pkg.memoryMax,
+        diskMax: pkg.diskMax,
+        bandwidthMax: pkg.bandwidthMax,
+        networkMode: pkg.networkMode,
+        instanceType: pkg.instanceType === 'vm' ? 'vm' : 'container',
+        portLimit: pkg.portLimit,
+        snapshotLimit: pkg.snapshotLimit,
+        backupLimit: pkg.backupLimit,
+        siteLimit: pkg.siteLimit,
+        monthlyTrafficLimit: pkg.monthlyTrafficLimit?.toString() ?? null,
+        nested: pkg.nested ? 1 : 0,
+        privileged: pkg.privileged ? 1 : 0,
+        allowInstanceDeletion: pkg.allowInstanceDeletion,
+        hostIds: pkg.packageHosts.map(ph => ph.hostId),
+        ownerId: pkg.user.id,
+        ownerUsername: pkg.user.username,
+        sharedAt: pkg.createdAt,
+        isGlobalShared: true,  // 托管市场也是全局共享类型
+        quotaMultiplier: null,
+        maxInstances: normalizeGlobalMaxInstances(pkg.globalMaxInstances),
+        requiredPackageId: pkg.requiredPackageId,
+        requiredPackageName: pkg.requiredPackage?.name ?? null
+    }))
+}
+
+/**
+ * 获取全局共享的套餐列表（仅管理员创建的官方套餐）
+ * 注意：用户托管的套餐不在此列表中显示，将通过其他入口访问
+ * 注意：现在包含用户自己的套餐（展示用），但创建实例时会校验
+ */
+export async function getGlobalSharedPackages(): Promise<SharedPackageInfo[]> {
+    const packages = await prisma.package.findMany({
+        where: {
+            globalShared: true,
+            active: true,
+            // 不再排除用户自己的套餐，允许展示
+            user: {
+                role: 'admin'  // 只返回管理员创建的套餐（官方套餐）
+            }
+        },
+        include: {
+            packageHosts: {
+                select: { hostId: true }
+            },
+            user: {
+                select: { id: true, username: true }
+            },
+            requiredPackage: {
+                select: {
+                    id: true,
+                    name: true
+                }
+            }
+        },
+        orderBy: { createdAt: 'desc' }
+    })
+
+    return packages.map(pkg => ({
+        id: pkg.id,
+        name: pkg.name,
+        description: pkg.description,
+        cpuMax: pkg.cpuMax,
+        memoryMax: pkg.memoryMax,
+        diskMax: pkg.diskMax,
+        bandwidthMax: pkg.bandwidthMax,
+        networkMode: pkg.networkMode,
+        instanceType: pkg.instanceType === 'vm' ? 'vm' : 'container',
+        portLimit: pkg.portLimit,
+        snapshotLimit: pkg.snapshotLimit,
+        backupLimit: pkg.backupLimit,
+        siteLimit: pkg.siteLimit,
+        monthlyTrafficLimit: pkg.monthlyTrafficLimit?.toString() ?? null,
+        nested: pkg.nested ? 1 : 0,  // 嵌套虚拟化支持
+        privileged: pkg.privileged ? 1 : 0,  // 特权容器
+        allowInstanceDeletion: pkg.allowInstanceDeletion,  // 实例操作权限
+        hostIds: pkg.packageHosts.map(ph => ph.hostId),
+        ownerId: pkg.user.id,
+        ownerUsername: pkg.user.username,
+        sharedAt: pkg.createdAt,  // 使用套餐创建时间
+        isGlobalShared: true,
+        quotaMultiplier: null,
+        maxInstances: normalizeGlobalMaxInstances(pkg.globalMaxInstances),
+        requiredPackageId: pkg.requiredPackageId,
+        requiredPackageName: pkg.requiredPackage?.name ?? null
+    }))
+}
+
+/**
+ * 获取用户可用的套餐ID列表（自己的 + 公开的）
+ * 注意：已移除好友共享机制
+ */
+export async function getAccessiblePackageIds(userId: number): Promise<number[]> {
+    const blockerIds = await getBlockerIdsForUser(userId)
+    // 获取自己的套餐（管理员）
+    const ownPackages = await prisma.package.findMany({
+        where: { userId, active: true },
+        select: { id: true }
+    })
+
+    // 获取公开的套餐（globalShared = true）
+    const publicPackages = await prisma.package.findMany({
+        where: { 
+            globalShared: true,
+            active: true,
+            userId: {
+                not: userId,
+                ...(blockerIds.length > 0 ? { notIn: blockerIds } : {})
+            }
+        },
+        select: { id: true }
+    })
+
+    const ownIds = ownPackages.map(p => p.id)
+    const publicIds = publicPackages.map(p => p.id)
+
+    return [...new Set([...ownIds, ...publicIds])]
+}
+
+/**
+ * 检查用户是否有权使用某套餐
+ * 支持以下场景：
+ * - 套餐所有者（始终可访问）
+ * - 公开套餐（globalShared = true）
+ * - 好友共享套餐（通过 PackageShare 表）
+ */
+export async function canUserAccessPackage(userId: number, packageId: number): Promise<boolean> {
+    const pkg = await prisma.package.findUnique({
+        where: { id: packageId },
+        select: {
+            userId: true,
+            active: true,
+            globalShared: true
+        }
+    })
+    
+    if (!pkg) return false
+    
+    // 检查是否是自己的套餐（所有者始终可以访问，无论套餐是否启用）
+    if (pkg.userId === userId) return true
+
+    if (await isUserBlockedByHoster(pkg.userId, userId)) return false
+    
+    // 非所有者只能访问启用的套餐
+    if (!pkg.active) return false
+    
+    // 检查是否是公开套餐（包括官方直营和托管市场）
+    if (pkg.globalShared) return true
+
+    // 检查是否是好友共享的套餐
+    const share = await prisma.packageShare.findFirst({
+        where: {
+            packageId: packageId,
+            sharedToId: userId
+        }
+    })
+    if (share) return true
+
+    // 不是所有者、不是公开套餐、也没有好友共享，无权访问
+    return false
+}
diff --git a/server/src/db/packages.ts b/server/src/db/packages.ts
new file mode 100644
index 0000000..7791ea7
--- /dev/null
+++ b/server/src/db/packages.ts
@@ -0,0 +1,1459 @@
+/**
+ * 套餐相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import { Prisma, type InstanceStatus } from '@prisma/client'
+import type { Package } from '../types/database.js'
+import { normalizeTrafficMultiplier } from '../lib/traffic-multiplier.js'
+
+const NORMAL_PACKAGE_INSTANCE_STATUSES: InstanceStatus[] = ['running', 'stopped']
+const PACKAGE_PREREQUISITE_LOCK_NAMESPACE = 4201
+
+async function acquirePackagePrerequisiteLock(tx: Prisma.TransactionClient): Promise<void> {
+  await tx.$queryRaw<Array<{ locked: boolean }>>(Prisma.sql`
+    WITH acquired_lock AS (
+      SELECT pg_advisory_xact_lock(${PACKAGE_PREREQUISITE_LOCK_NAMESPACE}, 1)
+    )
+    SELECT true AS locked FROM acquired_lock
+  `)
+}
+
+type PackagePrerequisiteValidationResult =
+  | { valid: true }
+  | { valid: false; code: string; message: string }
+
+function buildHostStoragePoolMap(packageHosts: Array<{ hostId: number; storagePoolName: string | null }>): Record<string, string | null> {
+  return Object.fromEntries(packageHosts.map(ph => [String(ph.hostId), ph.storagePoolName ?? null]))
+}
+
+function buildHostTrafficMultiplierMap(packageHosts: Array<{ hostId: number; trafficMultiplier: unknown }>): Record<string, number> {
+  return Object.fromEntries(packageHosts.map(ph => [String(ph.hostId), normalizeTrafficMultiplier(ph.trafficMultiplier)]))
+}
+
+function normalizeHostStoragePools(hostStoragePools?: Record<string, string | null>): Record<number, string | null> {
+  const normalized: Record<number, string | null> = {}
+
+  if (!hostStoragePools) {
+    return normalized
+  }
+
+  for (const [hostIdKey, poolName] of Object.entries(hostStoragePools)) {
+    const hostId = Number(hostIdKey)
+    if (Number.isNaN(hostId)) {
+      throw new Error(`Invalid hostStoragePools key: ${hostIdKey}`)
+    }
+
+    const trimmedPoolName = typeof poolName === 'string' ? poolName.trim() : null
+    normalized[hostId] = trimmedPoolName ? trimmedPoolName : null
+  }
+
+  return normalized
+}
+
+function normalizeHostTrafficMultipliers(hostTrafficMultipliers?: Record<string, number | string | null>): Record<number, number> {
+  const normalized: Record<number, number> = {}
+
+  if (!hostTrafficMultipliers) {
+    return normalized
+  }
+
+  for (const [hostIdKey, multiplier] of Object.entries(hostTrafficMultipliers)) {
+    const hostId = Number(hostIdKey)
+    if (Number.isNaN(hostId)) {
+      throw new Error(`Invalid hostTrafficMultipliers key: ${hostIdKey}`)
+    }
+
+    normalized[hostId] = normalizeTrafficMultiplier(multiplier)
+  }
+
+  return normalized
+}
+
+async function validateHostStoragePools(
+  hostIds: number[],
+  hostStoragePools: Record<number, string | null>,
+  client: Prisma.TransactionClient | typeof prisma = prisma
+): Promise<void> {
+  const allowedHostIds = new Set(hostIds)
+
+  for (const hostIdKey of Object.keys(hostStoragePools)) {
+    const hostId = Number(hostIdKey)
+    if (!allowedHostIds.has(hostId)) {
+      throw new Error(`Storage pool mapping references an unbound host: ${hostId}`)
+    }
+  }
+
+  const requestedPools = Object.entries(hostStoragePools)
+    .filter(([, poolName]) => !!poolName)
+    .map(([hostId, poolName]) => ({
+      hostId: Number(hostId),
+      name: poolName as string
+    }))
+
+  if (requestedPools.length === 0) {
+    return
+  }
+
+  const matchedPools = await client.storagePool.findMany({
+    where: {
+      OR: requestedPools.map(pool => ({
+        hostId: pool.hostId,
+        name: pool.name,
+        purpose: 'instance_data'
+      }))
+    },
+    select: {
+      hostId: true,
+      name: true
+    }
+  })
+
+  const matchedPoolSet = new Set(matchedPools.map(pool => `${pool.hostId}:${pool.name}`))
+  const invalidPool = requestedPools.find(pool => !matchedPoolSet.has(`${pool.hostId}:${pool.name}`))
+  if (invalidPool) {
+    throw new Error(`Storage pool "${invalidPool.name}" is not available as a system disk pool on host ${invalidPool.hostId}`)
+  }
+}
+
+function validateHostTrafficMultipliers(
+  hostIds: number[],
+  hostTrafficMultipliers: Record<number, number>
+): void {
+  const allowedHostIds = new Set(hostIds)
+
+  for (const hostIdKey of Object.keys(hostTrafficMultipliers)) {
+    const hostId = Number(hostIdKey)
+    if (!allowedHostIds.has(hostId)) {
+      throw new Error(`Traffic multiplier mapping references an unbound host: ${hostId}`)
+    }
+  }
+}
+
+/**
+ * 获取用户自己的套餐列表
+ * 注意：共享套餐通过 package-shares.ts 的 getSharedToUser 获取
+ * @param activeOnly - 是否只返回启用的套餐
+ * @param options.userId - 如果提供，只返回用户自己的套餐
+ * @param options.excludeUserId - 排除指定用户的套餐（用于获取托管套餐）
+ * @param options.ownerRole - 按所有者角色过滤套餐
+ * @param options.includeOwnerEmail - 是否包含所有者邮箱
+ */
+export async function getAllPackages(
+  activeOnly: boolean = false,
+  options: {
+    userId?: number
+    excludeUserId?: number
+    ownerRole?: 'admin' | 'user'
+    includeOwnerEmail?: boolean
+  } = {}
+): Promise<Array<Package & {
+  user_id?: number
+  owner_username?: string
+  owner_email?: string | null
+  owner_avatar_style?: string
+  is_own?: boolean
+  host_ids?: number[]
+  host_storage_pools?: Record<string, string | null>
+  host_traffic_multipliers?: Record<string, number>
+}>> {
+  const { userId, excludeUserId, ownerRole, includeOwnerEmail = false } = options
+
+  // 构建查询条件
+  const whereCondition: any = {}
+
+  if (activeOnly) {
+    whereCondition.active = true
+  }
+
+  // 只返回用户自己的套餐
+  if (userId) {
+    whereCondition.userId = userId
+  }
+
+  // 排除指定用户的套餐
+  if (excludeUserId) {
+    whereCondition.userId = { not: excludeUserId }
+  }
+
+  // 按所有者角色过滤套餐
+  if (ownerRole) {
+    whereCondition.user = { role: ownerRole }
+  }
+
+  const packages = await prisma.package.findMany({
+    where: Object.keys(whereCondition).length > 0 ? whereCondition : undefined,
+    include: {
+      packageHosts: {
+        select: {
+          hostId: true,
+          storagePoolName: true,
+          trafficMultiplier: true
+        }
+      },
+      user: {
+        select: {
+          id: true,
+          username: true,
+          ...(includeOwnerEmail && { email: true, avatarStyle: true, avatarBadgeId: true })
+        }
+      },
+      requiredPackage: {
+        select: {
+          id: true,
+          name: true
+        }
+      }
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+
+  return packages.map(pkg => ({
+    id: pkg.id,
+    user_id: pkg.userId,
+    name: pkg.name,
+    description: pkg.description,
+    cpu_max: pkg.cpuMax,
+    memory_max: pkg.memoryMax,
+    disk_max: pkg.diskMax,
+    bandwidth_max: pkg.bandwidthMax,
+    network_mode: pkg.networkMode,
+    instance_type: pkg.instanceType,
+    privileged: pkg.privileged ? 1 : 0,
+    nested: pkg.nested ? 1 : 0,
+    active: pkg.active ? 1 : 0,
+    // 套餐资源限制
+    port_limit: pkg.portLimit,
+    snapshot_limit: pkg.snapshotLimit,
+    backup_limit: pkg.backupLimit,
+    site_limit: pkg.siteLimit,
+    monthly_traffic_limit: pkg.monthlyTrafficLimit?.toString() ?? null,
+    // 存储 I/O 限制
+    io_limit_mode: pkg.ioLimitMode,
+    limits_read: pkg.limitsRead,
+    limits_write: pkg.limitsWrite,
+    limits_read_iops: pkg.limitsReadIops,
+    limits_write_iops: pkg.limitsWriteIops,
+    // 网络限制
+    limits_ingress: pkg.limitsIngress,
+    limits_egress: pkg.limitsEgress,
+    // 进程与调度
+    limits_processes: pkg.limitsProcesses,
+    limits_cpu_priority: pkg.limitsCpuPriority,
+    // 启动配置
+    boot_autostart: pkg.bootAutostart,
+    boot_autostart_priority: pkg.bootAutostartPriority,
+    boot_autostart_delay: pkg.bootAutostartDelay,
+    boot_host_shutdown_timeout: pkg.bootHostShutdownTimeout,
+    global_shared: (pkg as any).globalShared ?? false,
+    global_quota_multiplier: (pkg as any).globalQuotaMultiplier ? Number((pkg as any).globalQuotaMultiplier) : ((pkg as any).globalQuotaMultiplier === null ? null : undefined),
+    global_max_instances: (pkg as any).globalMaxInstances !== null && (pkg as any).globalMaxInstances !== undefined ? (pkg as any).globalMaxInstances : undefined,
+    required_package_id: (pkg as any).requiredPackageId ?? null,
+    required_package_name: (pkg as any).requiredPackage?.name ?? null,
+    allow_instance_deletion: (pkg as any).allowInstanceDeletion ?? true,
+    created_at: pkg.createdAt.toISOString(),
+    owner_username: pkg.user?.username,
+    owner_email: includeOwnerEmail ? (pkg.user as any)?.email : undefined,
+    owner_avatar_style: includeOwnerEmail ? (pkg.user as any)?.avatarStyle : undefined,
+    owner_avatar_badge_id: includeOwnerEmail ? (pkg.user as any)?.avatarBadgeId : undefined,
+    is_own: true,  // 这个函数只返回自己的套餐
+    host_ids: pkg.packageHosts.map(ph => ph.hostId),  // 绑定的宿主机ID列表
+    host_storage_pools: buildHostStoragePoolMap(pkg.packageHosts),
+    host_traffic_multipliers: buildHostTrafficMultiplierMap(pkg.packageHosts)
+  }))
+}
+
+/**
+ * 根据 ID 获取套餐
+ */
+export async function getPackageById(id: number): Promise<(Package & { host_ids?: number[]; host_storage_pools?: Record<string, string | null>; host_traffic_multipliers?: Record<string, number> }) | null> {
+  const pkg = await prisma.package.findUnique({
+    where: { id },
+    include: {
+      packageHosts: {
+        select: {
+          hostId: true,
+          storagePoolName: true,
+          trafficMultiplier: true
+        }
+      },
+      requiredPackage: {
+        select: {
+          id: true,
+          name: true
+        }
+      }
+    }
+  })
+
+  if (!pkg) return null
+
+  return {
+    id: pkg.id,
+    user_id: pkg.userId,
+    name: pkg.name,
+    description: pkg.description,
+    cpu_max: pkg.cpuMax,
+    memory_max: pkg.memoryMax,
+    disk_max: pkg.diskMax,
+    bandwidth_max: pkg.bandwidthMax,
+    network_mode: pkg.networkMode,
+    instance_type: pkg.instanceType,
+    privileged: pkg.privileged ? 1 : 0,
+    nested: pkg.nested ? 1 : 0,
+    active: pkg.active ? 1 : 0,
+    // 套餐资源限制
+    port_limit: pkg.portLimit,
+    snapshot_limit: pkg.snapshotLimit,
+    backup_limit: pkg.backupLimit,
+    site_limit: pkg.siteLimit,
+    monthly_traffic_limit: pkg.monthlyTrafficLimit?.toString() ?? null,
+    // 存储 I/O 限制
+    io_limit_mode: pkg.ioLimitMode,
+    limits_read: pkg.limitsRead,
+    limits_write: pkg.limitsWrite,
+    limits_read_iops: pkg.limitsReadIops,
+    limits_write_iops: pkg.limitsWriteIops,
+    // 网络限制
+    limits_ingress: pkg.limitsIngress,
+    limits_egress: pkg.limitsEgress,
+    // 进程与调度
+    limits_processes: pkg.limitsProcesses,
+    limits_cpu_priority: pkg.limitsCpuPriority,
+    // 启动配置
+    boot_autostart: pkg.bootAutostart,
+    boot_autostart_priority: pkg.bootAutostartPriority,
+    boot_autostart_delay: pkg.bootAutostartDelay,
+    boot_host_shutdown_timeout: pkg.bootHostShutdownTimeout,
+    global_shared: pkg.globalShared ?? false,
+    global_quota_multiplier: pkg.globalQuotaMultiplier ? Number(pkg.globalQuotaMultiplier) : (pkg.globalQuotaMultiplier === null ? null : undefined),
+    global_max_instances: pkg.globalMaxInstances !== null && pkg.globalMaxInstances !== undefined ? pkg.globalMaxInstances : undefined,
+    required_package_id: pkg.requiredPackageId ?? null,
+    required_package_name: pkg.requiredPackage?.name ?? null,
+    allow_instance_deletion: pkg.allowInstanceDeletion,
+    created_at: pkg.createdAt.toISOString(),
+    host_ids: pkg.packageHosts.map(ph => ph.hostId),  // 绑定的宿主机ID列表
+    host_storage_pools: buildHostStoragePoolMap(pkg.packageHosts),
+    host_traffic_multipliers: buildHostTrafficMultiplierMap(pkg.packageHosts)
+  }
+}
+
+/**
+ * 根据名称获取套餐
+ */
+export async function getPackageByName(name: string): Promise<Package | null> {
+  const pkg = await prisma.package.findFirst({
+    where: { name }
+  })
+
+  if (!pkg) return null
+
+  return {
+    id: pkg.id,
+    user_id: pkg.userId,
+    name: pkg.name,
+    description: pkg.description,
+    cpu_max: pkg.cpuMax,
+    memory_max: pkg.memoryMax,
+    disk_max: pkg.diskMax,
+    bandwidth_max: pkg.bandwidthMax,
+    network_mode: pkg.networkMode,
+    instance_type: pkg.instanceType,
+    privileged: pkg.privileged ? 1 : 0,
+    nested: pkg.nested ? 1 : 0,
+    active: pkg.active ? 1 : 0,
+    // 套餐资源限制
+    port_limit: pkg.portLimit,
+    snapshot_limit: pkg.snapshotLimit,
+    backup_limit: pkg.backupLimit,
+    site_limit: pkg.siteLimit,
+    monthly_traffic_limit: pkg.monthlyTrafficLimit?.toString() ?? null,
+    // 存储 I/O 限制
+    io_limit_mode: pkg.ioLimitMode,
+    limits_read: pkg.limitsRead,
+    limits_write: pkg.limitsWrite,
+    limits_read_iops: pkg.limitsReadIops,
+    limits_write_iops: pkg.limitsWriteIops,
+    // 网络限制
+    limits_ingress: pkg.limitsIngress,
+    limits_egress: pkg.limitsEgress,
+    // 进程与调度
+    limits_processes: pkg.limitsProcesses,
+    limits_cpu_priority: pkg.limitsCpuPriority,
+    // 启动配置
+    boot_autostart: pkg.bootAutostart,
+    boot_autostart_priority: pkg.bootAutostartPriority,
+    boot_autostart_delay: pkg.bootAutostartDelay,
+    boot_host_shutdown_timeout: pkg.bootHostShutdownTimeout,
+    required_package_id: pkg.requiredPackageId ?? null,
+    allow_instance_deletion: pkg.allowInstanceDeletion,
+    created_at: pkg.createdAt.toISOString()
+  }
+}
+
+/**
+ * 根据用户ID和名称获取套餐（同一用户下名称唯一）
+ */
+export async function getPackageByUserAndName(userId: number, name: string): Promise<Package | null> {
+  const pkg = await prisma.package.findUnique({
+    where: { userId_name: { userId, name } }
+  })
+
+  if (!pkg) return null
+
+  return {
+    id: pkg.id,
+    user_id: pkg.userId,
+    name: pkg.name,
+    description: pkg.description,
+    cpu_max: pkg.cpuMax,
+    memory_max: pkg.memoryMax,
+    disk_max: pkg.diskMax,
+    bandwidth_max: pkg.bandwidthMax,
+    network_mode: pkg.networkMode,
+    instance_type: pkg.instanceType,
+    privileged: pkg.privileged ? 1 : 0,
+    nested: pkg.nested ? 1 : 0,
+    active: pkg.active ? 1 : 0,
+    port_limit: pkg.portLimit,
+    snapshot_limit: pkg.snapshotLimit,
+    backup_limit: pkg.backupLimit,
+    site_limit: pkg.siteLimit,
+    monthly_traffic_limit: pkg.monthlyTrafficLimit?.toString() ?? null,
+    // 存储 I/O 限制
+    io_limit_mode: pkg.ioLimitMode,
+    limits_read: pkg.limitsRead,
+    limits_write: pkg.limitsWrite,
+    limits_read_iops: pkg.limitsReadIops,
+    limits_write_iops: pkg.limitsWriteIops,
+    // 网络限制
+    limits_ingress: pkg.limitsIngress,
+    limits_egress: pkg.limitsEgress,
+    // 进程与调度
+    limits_processes: pkg.limitsProcesses,
+    limits_cpu_priority: pkg.limitsCpuPriority,
+    // 启动配置
+    boot_autostart: pkg.bootAutostart,
+    boot_autostart_priority: pkg.bootAutostartPriority,
+    boot_autostart_delay: pkg.bootAutostartDelay,
+    boot_host_shutdown_timeout: pkg.bootHostShutdownTimeout,
+    required_package_id: pkg.requiredPackageId ?? null,
+    allow_instance_deletion: pkg.allowInstanceDeletion,
+    created_at: pkg.createdAt.toISOString()
+  }
+}
+
+/**
+ * 创建套餐
+ * @param hostIds 必须至少绑定一个宿主机
+ */
+export async function createPackage(data: {
+  userId: number  // 所有者
+  name: string
+  description?: string | null
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax?: number | null
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'  // 实例类型
+  hostIds: number[]  // 必须至少绑定一个宿主机
+  hostStoragePools?: Record<string, string | null>
+  hostTrafficMultipliers?: Record<string, number | string | null>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  // 套餐资源限制
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  monthlyTrafficLimit?: bigint | null
+  // 存储 I/O 限制
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  // 网络限制
+  limitsIngress?: string
+  limitsEgress?: string
+  // 进程与调度
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  // 启动配置
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  // 全局共享配置
+  globalShared?: boolean
+  globalQuotaMultiplier?: number | null
+  globalMaxInstances?: number | null
+  requiredPackageId?: number | null
+  // 实例操作权限
+  allowInstanceDeletion?: boolean
+}, isAdmin?: boolean): Promise<number> {
+  if (data.requiredPackageId !== null && data.requiredPackageId !== undefined) {
+    return prisma.$transaction(async tx => {
+      await acquirePackagePrerequisiteLock(tx)
+
+      const prerequisiteValidation = await validatePackagePrerequisiteReferenceWithClient(
+        tx,
+        null,
+        data.requiredPackageId,
+        data.userId
+      )
+      if (!prerequisiteValidation.valid) {
+        throw new Error(`${prerequisiteValidation.code}: ${prerequisiteValidation.message}`)
+      }
+
+      return createPackageUnchecked(data, isAdmin, tx)
+    }, {
+      isolationLevel: Prisma.TransactionIsolationLevel.Serializable
+    })
+  }
+
+  return createPackageUnchecked(data, isAdmin, prisma)
+}
+
+async function createPackageUnchecked(data: {
+  userId: number
+  name: string
+  description?: string | null
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax?: number | null
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'
+  hostIds: number[]
+  hostStoragePools?: Record<string, string | null>
+  hostTrafficMultipliers?: Record<string, number | string | null>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  monthlyTrafficLimit?: bigint | null
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  limitsIngress?: string
+  limitsEgress?: string
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  globalShared?: boolean
+  globalQuotaMultiplier?: number | null
+  globalMaxInstances?: number | null
+  requiredPackageId?: number | null
+  allowInstanceDeletion?: boolean
+}, isAdmin: boolean | undefined, client: Prisma.TransactionClient | typeof prisma): Promise<number> {
+  // 验证必须至少绑定一个宿主机
+  if (!data.hostIds || data.hostIds.length === 0) {
+    throw new Error('Package must bind at least one host')
+  }
+
+  // 验证所有宿主机都存在
+  // 管理员可以绑定任何节点，普通用户只能绑定自己的节点
+  const hostsWhere = isAdmin 
+    ? { id: { in: data.hostIds } }
+    : { id: { in: data.hostIds }, userId: data.userId }
+  
+  const hosts = await client.host.findMany({ where: hostsWhere })
+
+  if (hosts.length !== data.hostIds.length) {
+    throw new Error(isAdmin ? 'Some hosts do not exist' : 'All hosts must belong to the package owner')
+  }
+
+  const normalizedHostStoragePools = normalizeHostStoragePools(data.hostStoragePools)
+  const normalizedHostTrafficMultipliers = normalizeHostTrafficMultipliers(data.hostTrafficMultipliers)
+  await validateHostStoragePools(data.hostIds, normalizedHostStoragePools, client)
+  validateHostTrafficMultipliers(data.hostIds, normalizedHostTrafficMultipliers)
+
+  const pkg = await client.package.create({
+    data: {
+      userId: data.userId,
+      name: data.name,
+      description: data.description ?? null,
+      cpuMax: data.cpuMax,
+      memoryMax: data.memoryMax,
+      diskMax: data.diskMax,
+      bandwidthMax: data.bandwidthMax ?? null,
+      networkMode: data.networkMode ?? 'nat',
+      instanceType: data.instanceType ?? 'container',
+      privileged: data.privileged ?? false,
+      nested: data.nested ?? false,
+      active: data.active !== false,
+      // 套餐资源限制
+      portLimit: data.portLimit ?? 20,
+      snapshotLimit: data.snapshotLimit ?? 5,
+      backupLimit: data.backupLimit ?? 3,
+      siteLimit: data.siteLimit ?? 10,
+      monthlyTrafficLimit: data.monthlyTrafficLimit ?? null,
+      // 存储 I/O 限制 (使用默认值如果未提供)
+      ioLimitMode: data.ioLimitMode ?? 'throughput',
+      limitsRead: data.limitsRead ?? '100MB',
+      limitsWrite: data.limitsWrite ?? '100MB',
+      limitsReadIops: data.limitsReadIops ?? 500,
+      limitsWriteIops: data.limitsWriteIops ?? 500,
+      // 网络限制
+      limitsIngress: data.limitsIngress ?? '300Mbit',
+      limitsEgress: data.limitsEgress ?? '300Mbit',
+      // 进程与调度
+      limitsProcesses: data.limitsProcesses ?? 500,
+      limitsCpuPriority: data.limitsCpuPriority ?? 10,
+      // 启动配置
+      bootAutostart: data.bootAutostart ?? true,
+      bootAutostartPriority: data.bootAutostartPriority ?? 20,
+      bootAutostartDelay: data.bootAutostartDelay ?? 15,
+      bootHostShutdownTimeout: data.bootHostShutdownTimeout ?? 30,
+      // 全局共享配置
+      globalShared: data.globalShared ?? false,
+      globalQuotaMultiplier: data.globalQuotaMultiplier ?? null,
+      globalMaxInstances: data.globalMaxInstances ?? null,
+      requiredPackageId: data.requiredPackageId ?? null,
+      // 实例操作权限
+      allowInstanceDeletion: data.allowInstanceDeletion ?? true,
+      // 绑定宿主机
+      packageHosts: {
+        create: data.hostIds.map(hostId => ({
+          hostId,
+          storagePoolName: hostId in normalizedHostStoragePools ? normalizedHostStoragePools[hostId] : null,
+          trafficMultiplier: hostId in normalizedHostTrafficMultipliers ? normalizedHostTrafficMultipliers[hostId] : 1
+        }))
+      }
+    }
+  })
+
+  return pkg.id
+}
+
+/**
+ * 更新套餐
+ * @param hostIds 如果提供，将更新绑定的宿主机（必须至少一个）
+ */
+export async function updatePackage(id: number, data: {
+  name?: string
+  description?: string | null
+  cpuMax?: number
+  memoryMax?: number
+  diskMax?: number
+  bandwidthMax?: number | null
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'  // 实例类型
+  hostIds?: number[]  // 如果提供，将更新绑定的宿主机
+  hostStoragePools?: Record<string, string | null>
+  hostTrafficMultipliers?: Record<string, number | string | null>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  // 套餐资源限制
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  monthlyTrafficLimit?: bigint | null
+  // 存储 I/O 限制
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  // 网络限制
+  limitsIngress?: string
+  limitsEgress?: string
+  // 进程与调度
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+    // 启动配置
+    bootAutostart?: boolean
+    bootAutostartPriority?: number
+    bootAutostartDelay?: number
+    bootHostShutdownTimeout?: number
+    // 全局共享配置
+    globalShared?: boolean
+    globalQuotaMultiplier?: number | null
+    globalMaxInstances?: number | null
+    requiredPackageId?: number | null
+    // 实例操作权限
+    allowInstanceDeletion?: boolean
+}, isAdmin?: boolean): Promise<void> {
+  if (data.requiredPackageId !== undefined) {
+    await prisma.$transaction(async tx => {
+      await acquirePackagePrerequisiteLock(tx)
+
+      const pkg = await tx.package.findUnique({
+        where: { id },
+        select: { userId: true }
+      })
+      if (!pkg) {
+        throw new Error('Package not found')
+      }
+
+      const prerequisiteValidation = await validatePackagePrerequisiteReferenceWithClient(
+        tx,
+        id,
+        data.requiredPackageId,
+        pkg.userId
+      )
+      if (!prerequisiteValidation.valid) {
+        throw new Error(`${prerequisiteValidation.code}: ${prerequisiteValidation.message}`)
+      }
+
+      await updatePackageUnchecked(id, data, isAdmin, tx)
+    }, {
+      isolationLevel: Prisma.TransactionIsolationLevel.Serializable
+    })
+    return
+  }
+
+  await updatePackageUnchecked(id, data, isAdmin, prisma)
+}
+
+async function updatePackageUnchecked(id: number, data: {
+  name?: string
+  description?: string | null
+  cpuMax?: number
+  memoryMax?: number
+  diskMax?: number
+  bandwidthMax?: number | null
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'
+  hostIds?: number[]
+  hostStoragePools?: Record<string, string | null>
+  hostTrafficMultipliers?: Record<string, number | string | null>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  monthlyTrafficLimit?: bigint | null
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  limitsIngress?: string
+  limitsEgress?: string
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  globalShared?: boolean
+  globalQuotaMultiplier?: number | null
+  globalMaxInstances?: number | null
+  requiredPackageId?: number | null
+  allowInstanceDeletion?: boolean
+}, isAdmin: boolean | undefined, client: Prisma.TransactionClient | typeof prisma): Promise<void> {
+  const updateData: {
+    name?: string
+    description?: string | null
+    cpuMax?: number
+    memoryMax?: number
+    diskMax?: number
+    bandwidthMax?: number | null
+    networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+    instanceType?: 'container' | 'vm'
+    privileged?: boolean
+    nested?: boolean
+    active?: boolean
+    portLimit?: number
+    snapshotLimit?: number
+    backupLimit?: number
+    siteLimit?: number
+    monthlyTrafficLimit?: bigint | null
+    // 存储 I/O 限制
+    ioLimitMode?: 'throughput' | 'iops'
+    limitsRead?: string
+    limitsWrite?: string
+    limitsReadIops?: number
+    limitsWriteIops?: number
+    // 网络限制
+    limitsIngress?: string
+    limitsEgress?: string
+    // 进程与调度
+    limitsProcesses?: number
+    limitsCpuPriority?: number
+    // 启动配置
+    bootAutostart?: boolean
+    bootAutostartPriority?: number
+    bootAutostartDelay?: number
+    bootHostShutdownTimeout?: number
+    // 全局共享配置
+    globalShared?: boolean
+    globalQuotaMultiplier?: number | null
+    globalMaxInstances?: number | null
+    requiredPackageId?: number | null
+    // 实例操作权限
+    allowInstanceDeletion?: boolean
+  } = {}
+
+  if (data.name !== undefined) updateData.name = data.name
+  if (data.description !== undefined) updateData.description = data.description ?? null
+  if (data.cpuMax !== undefined) updateData.cpuMax = data.cpuMax
+  if (data.memoryMax !== undefined) updateData.memoryMax = data.memoryMax
+  if (data.diskMax !== undefined) updateData.diskMax = data.diskMax
+  if (data.bandwidthMax !== undefined) updateData.bandwidthMax = data.bandwidthMax ?? null
+  if (data.networkMode !== undefined) updateData.networkMode = data.networkMode
+  if (data.instanceType !== undefined) updateData.instanceType = data.instanceType
+  if (data.privileged !== undefined) updateData.privileged = data.privileged
+  if (data.nested !== undefined) updateData.nested = data.nested
+  if (data.active !== undefined) updateData.active = data.active
+  // 套餐资源限制
+  if (data.portLimit !== undefined) updateData.portLimit = data.portLimit
+  if (data.snapshotLimit !== undefined) updateData.snapshotLimit = data.snapshotLimit
+  if (data.backupLimit !== undefined) updateData.backupLimit = data.backupLimit
+  if (data.siteLimit !== undefined) updateData.siteLimit = data.siteLimit
+  if (data.monthlyTrafficLimit !== undefined) updateData.monthlyTrafficLimit = data.monthlyTrafficLimit
+  // 存储 I/O 限制
+  if (data.ioLimitMode !== undefined) updateData.ioLimitMode = data.ioLimitMode
+  if (data.limitsRead !== undefined) updateData.limitsRead = data.limitsRead
+  if (data.limitsWrite !== undefined) updateData.limitsWrite = data.limitsWrite
+  if (data.limitsReadIops !== undefined) updateData.limitsReadIops = data.limitsReadIops
+  if (data.limitsWriteIops !== undefined) updateData.limitsWriteIops = data.limitsWriteIops
+  // 网络限制
+  if (data.limitsIngress !== undefined) updateData.limitsIngress = data.limitsIngress
+  if (data.limitsEgress !== undefined) updateData.limitsEgress = data.limitsEgress
+  // 进程与调度
+  if (data.limitsProcesses !== undefined) updateData.limitsProcesses = data.limitsProcesses
+  if (data.limitsCpuPriority !== undefined) updateData.limitsCpuPriority = data.limitsCpuPriority
+  // 启动配置
+  if (data.bootAutostart !== undefined) updateData.bootAutostart = data.bootAutostart
+  if (data.bootAutostartPriority !== undefined) updateData.bootAutostartPriority = data.bootAutostartPriority
+  if (data.bootAutostartDelay !== undefined) updateData.bootAutostartDelay = data.bootAutostartDelay
+  if (data.bootHostShutdownTimeout !== undefined) updateData.bootHostShutdownTimeout = data.bootHostShutdownTimeout
+  if (data.globalShared !== undefined) updateData.globalShared = data.globalShared
+  if (data.globalQuotaMultiplier !== undefined) updateData.globalQuotaMultiplier = data.globalQuotaMultiplier
+  if (data.globalMaxInstances !== undefined) updateData.globalMaxInstances = data.globalMaxInstances
+  if (data.requiredPackageId !== undefined) updateData.requiredPackageId = data.requiredPackageId
+  if (data.allowInstanceDeletion !== undefined) updateData.allowInstanceDeletion = data.allowInstanceDeletion
+
+  const needsPackageHostUpdate = data.hostIds !== undefined || data.hostStoragePools !== undefined || data.hostTrafficMultipliers !== undefined
+  if (needsPackageHostUpdate) {
+    const pkg = await client.package.findUnique({
+      where: { id },
+      select: {
+        userId: true,
+        packageHosts: {
+          select: {
+            hostId: true,
+            storagePoolName: true,
+            trafficMultiplier: true
+          }
+        }
+      }
+    })
+
+    if (!pkg) {
+      throw new Error('Package not found')
+    }
+
+    const currentHostStoragePools = new Map(pkg.packageHosts.map(ph => [ph.hostId, ph.storagePoolName ?? null]))
+    const currentHostTrafficMultipliers = new Map(pkg.packageHosts.map(ph => [ph.hostId, normalizeTrafficMultiplier(ph.trafficMultiplier)]))
+    const effectiveHostIds = data.hostIds ?? pkg.packageHosts.map(ph => ph.hostId)
+
+    if (effectiveHostIds.length === 0) {
+      throw new Error('Package must bind at least one host')
+    }
+
+    if (data.hostIds !== undefined) {
+      const hostsWhere = isAdmin
+        ? { id: { in: effectiveHostIds } }
+        : { id: { in: effectiveHostIds }, userId: pkg.userId }
+
+      const hosts = await client.host.findMany({ where: hostsWhere })
+      if (hosts.length !== effectiveHostIds.length) {
+        throw new Error(isAdmin ? 'Some hosts do not exist' : 'All hosts must belong to the package owner')
+      }
+    }
+
+    const normalizedHostStoragePools = normalizeHostStoragePools(data.hostStoragePools)
+    const normalizedHostTrafficMultipliers = normalizeHostTrafficMultipliers(data.hostTrafficMultipliers)
+    await validateHostStoragePools(effectiveHostIds, normalizedHostStoragePools, client)
+    validateHostTrafficMultipliers(effectiveHostIds, normalizedHostTrafficMultipliers)
+
+    if (data.hostIds !== undefined) {
+      await client.packageHost.deleteMany({
+        where: { packageId: id }
+      })
+
+      await client.packageHost.createMany({
+        data: effectiveHostIds.map(hostId => ({
+          packageId: id,
+          hostId,
+          storagePoolName: hostId in normalizedHostStoragePools
+            ? normalizedHostStoragePools[hostId]
+            : (currentHostStoragePools.get(hostId) ?? null),
+          trafficMultiplier: hostId in normalizedHostTrafficMultipliers
+            ? normalizedHostTrafficMultipliers[hostId]
+            : (currentHostTrafficMultipliers.get(hostId) ?? 1)
+        }))
+      })
+    } else {
+      for (const [hostIdKey, storagePoolName] of Object.entries(normalizedHostStoragePools)) {
+        await client.packageHost.update({
+          where: {
+            packageId_hostId: {
+              packageId: id,
+              hostId: Number(hostIdKey)
+            }
+          },
+          data: {
+            storagePoolName
+          }
+        })
+      }
+      for (const [hostIdKey, trafficMultiplier] of Object.entries(normalizedHostTrafficMultipliers)) {
+        await client.packageHost.update({
+          where: {
+            packageId_hostId: {
+              packageId: id,
+              hostId: Number(hostIdKey)
+            }
+          },
+          data: {
+            trafficMultiplier
+          }
+        })
+      }
+    }
+  }
+
+  if (Object.keys(updateData).length > 0) {
+    await client.package.update({
+      where: { id },
+      data: updateData
+    })
+  }
+}
+
+/**
+ * 获取套餐绑定的宿主机ID列表
+ */
+export async function getPackageHostIds(packageId: number): Promise<number[]> {
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { packageId },
+    select: { hostId: true }
+  })
+
+  return packageHosts.map(ph => ph.hostId)
+}
+
+/**
+ * 删除套餐
+ */
+export async function deletePackage(id: number): Promise<void> {
+  await prisma.package.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 获取套餐的实例数量
+ */
+export async function getInstanceCountByPackage(packageId: number): Promise<number> {
+  const count = await prisma.instance.count({
+    where: {
+      packageId,
+      status: { not: 'deleted' }
+    }
+  })
+
+  return count
+}
+
+/**
+ * 批量获取套餐下的正常实例数量。
+ * 正常实例只包含 running/stopped；error/deleted/creating/suspended 不统计。
+ * 统计范围包含直接绑定套餐的实例，以及历史数据中仅绑定套餐方案的实例。
+ */
+export async function getNormalInstanceCountsByPackages(packageIds: number[]): Promise<Map<number, number>> {
+  const validPackageIds = Array.from(new Set(
+    packageIds.filter(id => Number.isInteger(id) && id > 0)
+  ))
+
+  if (validPackageIds.length === 0) {
+    return new Map()
+  }
+
+  const plans = await prisma.packagePlan.findMany({
+    where: { packageId: { in: validPackageIds } },
+    select: { id: true, packageId: true }
+  })
+  const planPackageMap = new Map(plans.map(plan => [plan.id, plan.packageId]))
+  const planIds = plans.map(plan => plan.id)
+
+  const [directRows, planOnlyRows] = await Promise.all([
+    prisma.instance.groupBy({
+      by: ['packageId'],
+      where: {
+        packageId: { in: validPackageIds },
+        status: { in: NORMAL_PACKAGE_INSTANCE_STATUSES }
+      },
+      _count: { id: true }
+    }),
+    planIds.length > 0
+      ? prisma.instance.groupBy({
+          by: ['packagePlanId'],
+          where: {
+            packageId: null,
+            packagePlanId: { in: planIds },
+            status: { in: NORMAL_PACKAGE_INSTANCE_STATUSES }
+          },
+          _count: { id: true }
+        })
+      : Promise.resolve([])
+  ])
+
+  const countMap = new Map<number, number>()
+
+  for (const row of directRows) {
+    if (row.packageId !== null) {
+      countMap.set(row.packageId, row._count?.id || 0)
+    }
+  }
+
+  for (const row of planOnlyRows) {
+    if (row.packagePlanId === null) continue
+    const packageId = planPackageMap.get(row.packagePlanId)
+    if (!packageId) continue
+    countMap.set(packageId, (countMap.get(packageId) || 0) + (row._count?.id || 0))
+  }
+
+  return countMap
+}
+
+export async function userHasNormalInstanceForPackage(
+  userId: number,
+  packageId: number,
+  tx?: typeof prisma
+): Promise<boolean> {
+  const client = tx || prisma
+  const count = await client.instance.count({
+    where: {
+      userId,
+      status: { in: NORMAL_PACKAGE_INSTANCE_STATUSES },
+      OR: [
+        { packageId },
+        { packagePlan: { is: { packageId } } }
+      ]
+    }
+  })
+
+  return count > 0
+}
+
+export async function getPackagesDependingOnPackage(packageId: number): Promise<Array<{ id: number; name: string }>> {
+  return await prisma.package.findMany({
+    where: { requiredPackageId: packageId },
+    select: { id: true, name: true },
+    orderBy: { id: 'asc' }
+  })
+}
+
+async function validatePackagePrerequisiteReferenceWithClient(
+  client: Prisma.TransactionClient | typeof prisma,
+  packageId: number | null,
+  requiredPackageId: number | null | undefined,
+  ownerUserId?: number
+): Promise<PackagePrerequisiteValidationResult> {
+  if (requiredPackageId === null || requiredPackageId === undefined) {
+    return { valid: true }
+  }
+
+  if (!Number.isInteger(requiredPackageId) || requiredPackageId <= 0) {
+    return {
+      valid: false,
+      code: 'PACKAGE_PREREQUISITE_INVALID',
+      message: 'Required package is invalid'
+    }
+  }
+
+  if (packageId !== null && requiredPackageId === packageId) {
+    return {
+      valid: false,
+      code: 'PACKAGE_PREREQUISITE_SELF',
+      message: 'Package cannot require itself'
+    }
+  }
+
+  let cursor: number | null = requiredPackageId
+  const visited = new Set<number>()
+
+  while (cursor !== null) {
+    if (packageId !== null && cursor === packageId) {
+      return {
+        valid: false,
+        code: 'PACKAGE_PREREQUISITE_CYCLE',
+        message: 'Package prerequisite cannot form a cycle'
+      }
+    }
+
+    if (visited.has(cursor)) {
+      return {
+        valid: false,
+        code: 'PACKAGE_PREREQUISITE_CYCLE',
+        message: 'Package prerequisite cannot form a cycle'
+      }
+    }
+    visited.add(cursor)
+
+    const pkg: { requiredPackageId: number | null; userId: number } | null = await client.package.findUnique({
+      where: { id: cursor },
+      select: {
+        requiredPackageId: true,
+        userId: true
+      }
+    })
+
+    if (!pkg) {
+      return {
+        valid: false,
+        code: 'PACKAGE_PREREQUISITE_INVALID',
+        message: 'Required package does not exist'
+      }
+    }
+
+    if (ownerUserId !== undefined && pkg.userId !== ownerUserId) {
+      return {
+        valid: false,
+        code: 'PACKAGE_PREREQUISITE_SCOPE',
+        message: 'Required package must belong to the same owner'
+      }
+    }
+
+    cursor = pkg.requiredPackageId
+  }
+
+  return { valid: true }
+}
+
+export async function validatePackagePrerequisiteReference(
+  packageId: number | null,
+  requiredPackageId: number | null | undefined,
+  ownerUserId?: number
+): Promise<PackagePrerequisiteValidationResult> {
+  return validatePackagePrerequisiteReferenceWithClient(prisma, packageId, requiredPackageId, ownerUserId)
+}
+
+export async function validatePackagePrerequisiteReferenceLocked(
+  packageId: number | null,
+  requiredPackageId: number | null | undefined,
+  ownerUserId?: number
+): Promise<PackagePrerequisiteValidationResult> {
+  return prisma.$transaction(async tx => {
+    await acquirePackagePrerequisiteLock(tx)
+    return validatePackagePrerequisiteReferenceWithClient(tx, packageId, requiredPackageId, ownerUserId)
+  }, {
+    isolationLevel: Prisma.TransactionIsolationLevel.Serializable
+  })
+}
+
+/**
+ * 检测节点类型变更会影响哪些套餐
+ * @param hostId 节点ID
+ * @param newInstanceType 新的实例类型
+ * @returns 受影响的套餐列表（套餐类型与新节点类型不兼容）
+ */
+export async function getIncompatiblePackagesByHostTypeChange(hostId: number, newInstanceType: 'container' | 'vm' | 'both'): Promise<Array<{ id: number; name: string; instanceType: string }>> {
+  // 如果新类型是 both，则所有套餐都兼容
+  if (newInstanceType === 'both') {
+    return []
+  }
+
+  // 查找绑定到该节点的所有套餐
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { hostId },
+    include: {
+      package: {
+        select: {
+          id: true,
+          name: true,
+          instanceType: true
+        }
+      }
+    }
+  })
+
+  // 过滤出不兼容的套餐
+  // 如果节点只支持 container，则 vm 套餐不兼容
+  // 如果节点只支持 vm，则 container 套餐不兼容
+  return packageHosts
+    .filter(ph => ph.package.instanceType !== newInstanceType && ph.package.instanceType !== 'both')
+    .map(ph => ({
+      id: ph.package.id,
+      name: ph.package.name,
+      instanceType: ph.package.instanceType
+    }))
+}
+
+
+/**
+ * 获取套餐绑定的宿主机详情列表
+ */
+export async function getPackageHostsDetail(packageId: number): Promise<Array<{
+  id: number
+  name: string
+  countryCode: string
+  cpuAllowanceMax: number
+  memoryMax: number
+  cpuUsed: number
+  memoryUsed: number
+}>> {
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { packageId },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          countryCode: true,
+          cpuAllowanceMax: true,
+          memoryMax: true,
+          cpuUsed: true,
+          memoryUsed: true
+        }
+      }
+    }
+  })
+
+  return packageHosts.map(ph => ({
+    id: ph.host.id,
+    name: ph.host.name,
+    countryCode: ph.host.countryCode,
+    cpuAllowanceMax: ph.host.cpuAllowanceMax,
+    memoryMax: ph.host.memoryMax,
+    cpuUsed: ph.host.cpuUsed,
+    memoryUsed: ph.host.memoryUsed
+  }))
+}
+
+/**
+ * 为指定宿主机增加配额
+ */
+export async function increaseHostQuota(hostId: number, cpuAdd: number, memoryAdd: number): Promise<{
+  cpuAllowanceMax: number
+  memoryMax: number
+}> {
+  const host = await prisma.host.update({
+    where: { id: hostId },
+    data: {
+      cpuAllowanceMax: { increment: cpuAdd },
+      memoryMax: { increment: memoryAdd }
+    },
+    select: {
+      cpuAllowanceMax: true,
+      memoryMax: true
+    }
+  })
+
+  return host
+}
+
+/**
+ * 检查套餐是否售罄（所有绑定的宿主机都无法满足最低配置）
+ * - 免费套餐：最低配置 15% CPU + 128MB 内存
+ * - 付费套餐：最低配置为最低方案的 CPU/内存
+ */
+export async function checkPackageSoldOut(packageId: number): Promise<boolean> {
+  // 1. 获取套餐绑定的宿主机以及其资源使用情况
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { packageId },
+    include: {
+      host: {
+        select: {
+          id: true,
+          status: true,
+          cpuAllowanceMax: true,
+          memoryMax: true,
+          instances: {
+            where: { status: { not: 'deleted' } },
+            select: { cpu: true, memory: true }
+          }
+        }
+      }
+    }
+  })
+
+  // 没有绑定宿主机，视为售罄
+  if (packageHosts.length === 0) {
+    return true
+  }
+
+  // 2. 检查是否为付费套餐，并获取最低配置
+  const plans = await prisma.packagePlan.findMany({
+    where: { packageId, isActive: true },
+    select: { cpu: true, memory: true, isSoldOut: true },
+    orderBy: [{ cpu: 'asc' }, { memory: 'asc' }]
+  })
+  const availablePlans = plans.filter(plan => !plan.isSoldOut)
+
+  let minCpu: number
+  let minMemory: number
+
+  if (plans.length > 0) {
+    // 付费套餐：所有活跃方案都手动售罄时，套餐也视为售罄
+    if (availablePlans.length === 0) {
+      return true
+    }
+    // 付费套餐：只按可售方案计算最低可开通资源
+    minCpu = Math.min(...availablePlans.map(p => p.cpu))
+    minMemory = Math.min(...availablePlans.map(p => p.memory))
+  } else {
+    // 免费套餐：最低 15% CPU + 128MB 内存
+    minCpu = 15
+    minMemory = 128
+  }
+
+  // 3. 检查是否有任何一个在线宿主机可以满足最低配置
+  for (const ph of packageHosts) {
+    const host = ph.host
+    
+    // 跳过离线节点
+    if (host.status !== 'online') {
+      continue
+    }
+
+    // 检查是否设置了配额
+    if (!host.cpuAllowanceMax || !host.memoryMax) {
+      continue
+    }
+
+    // 计算实际使用量
+    const cpuUsed = host.instances.reduce((sum, inst) => sum + inst.cpu, 0)
+    const memoryUsed = host.instances.reduce((sum, inst) => sum + inst.memory, 0)
+
+    // 计算剩余资源
+    const cpuAvailable = host.cpuAllowanceMax - cpuUsed
+    const memoryAvailable = host.memoryMax - memoryUsed
+
+    // 如果能满足最低配置，则未售罄
+    if (cpuAvailable >= minCpu && memoryAvailable >= minMemory) {
+      return false
+    }
+  }
+
+  // 所有宿主机都无法满足最低配置，售罄
+  return true
+}
+
+/**
+ * 批量检查多个套餐的售罄状态
+ * 优化性能：一次性获取所有需要的数据
+ */
+export async function checkPackagesSoldOut(packageIds: number[]): Promise<Map<number, boolean>> {
+  if (packageIds.length === 0) {
+    return new Map()
+  }
+
+  // 1. 一次性获取所有套餐的宿主机绑定和资源信息
+  const allPackageHosts = await prisma.packageHost.findMany({
+    where: { packageId: { in: packageIds } },
+    include: {
+      host: {
+        select: {
+          id: true,
+          status: true,
+          cpuAllowanceMax: true,
+          memoryMax: true,
+          instances: {
+            where: { status: { not: 'deleted' } },
+            select: { cpu: true, memory: true }
+          }
+        }
+      }
+    }
+  })
+
+  // 2. 一次性获取所有套餐的活跃方案
+  const allPlans = await prisma.packagePlan.findMany({
+    where: { packageId: { in: packageIds }, isActive: true },
+    select: { packageId: true, cpu: true, memory: true, isSoldOut: true }
+  })
+
+  // 3. 按套餐分组数据
+  const hostsByPackage = new Map<number, typeof allPackageHosts>()
+  for (const ph of allPackageHosts) {
+    const list = hostsByPackage.get(ph.packageId) || []
+    list.push(ph)
+    hostsByPackage.set(ph.packageId, list)
+  }
+
+  const plansByPackage = new Map<number, typeof allPlans>()
+  for (const plan of allPlans) {
+    const list = plansByPackage.get(plan.packageId) || []
+    list.push(plan)
+    plansByPackage.set(plan.packageId, list)
+  }
+
+  // 4. 计算每个套餐的售罄状态
+  const result = new Map<number, boolean>()
+  
+  for (const packageId of packageIds) {
+    const packageHosts = hostsByPackage.get(packageId) || []
+    const plans = plansByPackage.get(packageId) || []
+    const availablePlans = plans.filter(plan => !plan.isSoldOut)
+
+    // 没有绑定宿主机，视为售罄
+    if (packageHosts.length === 0) {
+      result.set(packageId, true)
+      continue
+    }
+
+    // 确定最低配置
+    let minCpu: number
+    let minMemory: number
+
+    if (plans.length > 0) {
+      if (availablePlans.length === 0) {
+        result.set(packageId, true)
+        continue
+      }
+      minCpu = Math.min(...availablePlans.map(p => p.cpu))
+      minMemory = Math.min(...availablePlans.map(p => p.memory))
+    } else {
+      minCpu = 15
+      minMemory = 128
+    }
+
+    // 检查是否有任何宿主机可用
+    let hasAvailableHost = false
+    for (const ph of packageHosts) {
+      const host = ph.host
+      
+      if (host.status !== 'online' || !host.cpuAllowanceMax || !host.memoryMax) {
+        continue
+      }
+
+      const cpuUsed = host.instances.reduce((sum, inst) => sum + inst.cpu, 0)
+      const memoryUsed = host.instances.reduce((sum, inst) => sum + inst.memory, 0)
+      const cpuAvailable = host.cpuAllowanceMax - cpuUsed
+      const memoryAvailable = host.memoryMax - memoryUsed
+
+      if (cpuAvailable >= minCpu && memoryAvailable >= minMemory) {
+        hasAvailableHost = true
+        break
+      }
+    }
+
+    result.set(packageId, !hasAvailableHost)
+  }
+
+  return result
+}
diff --git a/server/src/db/pagination.ts b/server/src/db/pagination.ts
new file mode 100644
index 0000000..1112323
--- /dev/null
+++ b/server/src/db/pagination.ts
@@ -0,0 +1,845 @@
+/**
+ * 分页查询函数
+ * 使用 Prisma ORM
+ */
+
+import { Prisma } from '@prisma/client'
+import { prisma } from './prisma.js'
+import { getImageDisplayNames } from './images.js'
+import type { Host, User, Instance } from '../types/database.js'
+
+export const USER_SEARCH_FIELDS = ['username', 'id', 'email'] as const
+export type UserSearchField = (typeof USER_SEARCH_FIELDS)[number]
+
+export interface PaginationOptions {
+  page?: number
+  pageSize?: number
+  search?: string
+  searchFields?: UserSearchField[]
+  exactMatch?: boolean
+  userId?: number | null
+  hostId?: number | null
+  countryCode?: string | null
+  status?: string | null
+  sortBy?: string | null
+  sortOrder?: 'asc' | 'desc' | null
+  excludeUserId?: number | null  // 排除特定用户的数据
+  ownerRole?: 'admin' | 'user' | null  // 按所有者角色过滤
+  includeOwner?: boolean  // 是否包含所有者信息
+}
+
+export interface PaginatedResponse<T> {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+export interface PaginatedInstancesResponse<T> extends PaginatedResponse<T> {
+  availableCountries: string[]
+}
+
+type UserWithQuota = Prisma.UserGetPayload<{
+  include: {
+    quota: true
+  }
+}>
+
+function escapeSqlLike(value: string): string {
+  return value.replace(/[\\%_]/g, '\\$&')
+}
+
+function joinSqlFragments(fragments: Prisma.Sql[], operator: 'AND' | 'OR'): Prisma.Sql {
+  if (fragments.length === 0) {
+    return Prisma.empty
+  }
+
+  let result = fragments[0]!
+  for (let i = 1; i < fragments.length; i++) {
+    result = Prisma.sql`${result} ${Prisma.raw(operator)} ${fragments[i]!}`
+  }
+
+  return result
+}
+
+function normalizeUserSearchFields(fields?: UserSearchField[]): UserSearchField[] {
+  if (!Array.isArray(fields) || fields.length === 0) {
+    return [...USER_SEARCH_FIELDS]
+  }
+
+  const validFields = new Set(USER_SEARCH_FIELDS)
+  const normalized = fields.filter((field): field is UserSearchField => validFields.has(field))
+
+  return normalized.length > 0
+    ? USER_SEARCH_FIELDS.filter(field => normalized.includes(field))
+    : [...USER_SEARCH_FIELDS]
+}
+
+function buildUserSearchWhereClause(
+  rawSearch: string,
+  searchFields?: UserSearchField[],
+  exactMatch: boolean = false
+): Prisma.Sql | null {
+  const search = rawSearch.trim()
+  if (!search) {
+    return null
+  }
+
+  const fields = normalizeUserSearchFields(searchFields)
+  const fuzzyPattern = `%${escapeSqlLike(search)}%`
+  const fieldClauses: Prisma.Sql[] = []
+
+  if (fields.includes('username')) {
+    fieldClauses.push(
+      exactMatch
+        ? Prisma.sql`LOWER(u.username) = LOWER(${search})`
+        : Prisma.sql`u.username ILIKE ${fuzzyPattern} ESCAPE '\'`
+    )
+  }
+
+  if (fields.includes('id')) {
+    fieldClauses.push(
+      exactMatch
+        ? Prisma.sql`CAST(u.id AS TEXT) = ${search}`
+        : Prisma.sql`CAST(u.id AS TEXT) ILIKE ${fuzzyPattern} ESCAPE '\'`
+    )
+  }
+
+  if (fields.includes('email')) {
+    fieldClauses.push(
+      exactMatch
+        ? Prisma.sql`u.email IS NOT NULL AND LOWER(u.email) = LOWER(${search})`
+        : Prisma.sql`u.email IS NOT NULL AND u.email ILIKE ${fuzzyPattern} ESCAPE '\'`
+    )
+  }
+
+  if (fieldClauses.length === 0) {
+    return null
+  }
+
+  return Prisma.sql`(${joinSqlFragments(fieldClauses, 'OR')})`
+}
+
+/**
+ * 获取用户分页列表
+ */
+export async function getUsersPaginated(options: PaginationOptions = {}): Promise<PaginatedResponse<User>> {
+  const { page = 1, pageSize = 20, search = '', searchFields, exactMatch = false } = options
+  const searchWhereClause = buildUserSearchWhereClause(search, searchFields, exactMatch)
+
+  let total = 0
+  let users: UserWithQuota[] = []
+
+  if (searchWhereClause) {
+    const totalRows = await prisma.$queryRaw<Array<{ count: number }>>(Prisma.sql`
+      SELECT COUNT(*)::integer AS count
+      FROM "users" u
+      WHERE ${searchWhereClause}
+    `)
+    total = totalRows[0]?.count || 0
+
+    const userIdRows = await prisma.$queryRaw<Array<{ id: number }>>(Prisma.sql`
+      SELECT u.id
+      FROM "users" u
+      WHERE ${searchWhereClause}
+      ORDER BY u.created_at DESC
+      OFFSET ${(page - 1) * pageSize}
+      LIMIT ${pageSize}
+    `)
+
+    const userIds = userIdRows.map(row => row.id)
+    if (userIds.length > 0) {
+      users = await prisma.user.findMany({
+        where: {
+          id: { in: userIds }
+        },
+        include: {
+          quota: true
+        }
+      })
+
+      const orderMap = new Map(userIds.map((id, index) => [id, index]))
+      users.sort((a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0))
+    }
+  } else {
+    total = await prisma.user.count()
+    users = await prisma.user.findMany({
+      include: {
+        quota: true
+      },
+      orderBy: {
+        createdAt: 'desc'
+      },
+      skip: (page - 1) * pageSize,
+      take: pageSize
+    })
+  }
+
+  return {
+    items: users.map(u => ({
+      id: u.id,
+      username: u.username,
+      email: u.email,
+      password_hash: '', // 不返回密码哈希
+      role: u.role,
+      status: u.status,
+      avatar_style: u.avatarStyle,
+      created_at: u.createdAt.toISOString(),
+      updated_at: u.updatedAt.toISOString(),
+      // 配额信息（新配额系统）
+      // 注意：不再限制实例配额
+      ...(u.quota ? {
+        host_limit: u.quota.hostLimit,
+        host_used: u.quota.hostUsed,
+        friend_limit: u.quota.friendLimit,
+        friend_used: u.quota.friendUsed,
+        package_limit: u.quota.packageLimit,
+        package_used: u.quota.packageUsed,
+        // 流量配额
+        monthly_traffic_limit: u.quota.monthlyTrafficLimit?.toString() ?? null,
+        monthly_traffic_used: u.quota.monthlyTrafficUsed.toString(),
+        extra_traffic_quota: u.quota.extraTrafficQuota.toString(),
+        traffic_status: u.quota.trafficStatus
+      } : {})
+    })) as User[],
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取宿主机分页列表
+ * @param options.userId - 筛选指定用户的节点
+ * @param options.excludeUserId - 排除指定用户的节点（用于获取托管节点）
+ * @param options.ownerRole - 按所有者角色过滤节点
+ * @param options.includeOwner - 是否包含所有者信息
+ */
+export async function getHostsPaginated(options: PaginationOptions = {}): Promise<PaginatedResponse<Host>> {
+  const { page = 1, pageSize = 20, search = '', userId = null, excludeUserId = null, ownerRole = null, includeOwner = false } = options
+
+  const where: any = {}
+
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { location: { contains: search, mode: 'insensitive' } },
+      { url: { contains: search, mode: 'insensitive' } }
+    ]
+  }
+
+  // 如果指定了 userId，只返回该用户的宿主机（普通用户只能看到自己的宿主机）
+  if (userId) {
+    where.userId = userId
+  }
+
+  // 排除指定用户的节点（用于获取托管节点）
+  if (excludeUserId) {
+    where.userId = { not: excludeUserId }
+  }
+
+  // 按所有者角色过滤节点
+  if (ownerRole) {
+    where.user = { role: ownerRole }
+  }
+
+  // 获取总数
+  const total = await prisma.host.count({ where })
+
+  // 根据是否需要所有者信息，使用不同的查询
+  const selectFields = {
+    id: true,
+    name: true,
+    url: true,
+    location: true,
+    countryCode: true,
+    status: true,
+    certPath: true,
+    keyPath: true,
+    natPublicIp: true,
+    natPortStart: true,
+    natPortEnd: true,
+    natPortsUsedCount: true,
+    cpuUsed: true,
+    memoryUsed: true,
+    diskUsed: true,
+    cpuAllowanceMax: true,
+    memoryMax: true,
+    instanceType: true,
+    storageSize: true,
+    tags: true,
+    createdAt: true,
+    updatedAt: true,
+    userId: true,
+  } as const
+
+  // 获取数据
+  const hosts = includeOwner
+    ? await prisma.host.findMany({
+        where,
+        select: {
+          ...selectFields,
+          user: {
+            select: {
+              id: true,
+              username: true,
+              email: true,
+              avatarStyle: true,
+              avatarBadgeId: true
+            }
+          }
+        },
+        orderBy: { name: 'asc' },
+        skip: (page - 1) * pageSize,
+        take: pageSize
+      })
+    : await prisma.host.findMany({
+        where,
+        select: selectFields,
+        orderBy: { name: 'asc' },
+        skip: (page - 1) * pageSize,
+        take: pageSize
+      })
+
+  return {
+    items: hosts.map((h: any) => ({
+      id: h.id,
+      name: h.name,
+      url: h.url,
+      location: h.location,
+      country_code: h.countryCode,
+      architecture: h.architecture,
+      status: h.status,
+      cert_path: h.certPath,
+      key_path: h.keyPath,
+      nat_public_ip: h.natPublicIp,
+      nat_port_start: h.natPortStart,
+      nat_port_end: h.natPortEnd,
+      nat_ports_used_count: h.natPortsUsedCount,
+      cpu_used: h.cpuUsed,
+      memory_used: h.memoryUsed,
+      disk_total: h.storageSize ? Number(h.storageSize) * 1024 : 0, // 使用创建时输入的存储大小（GB转MB）
+      disk_used: h.diskUsed,
+      cpu_allowance_max: h.cpuAllowanceMax,
+      memory_max: h.memoryMax,
+      instance_type: h.instanceType,
+      storage_size: h.storageSize,
+      tags: Array.isArray(h.tags) ? (h.tags as string[]) : [],
+      created_at: h.createdAt.toISOString(),
+      updated_at: h.updatedAt.toISOString(),
+      user_id: h.userId,
+      // 所有者信息
+      ...(h.user && {
+        owner: {
+          id: h.user.id,
+          username: h.user.username,
+          email: h.user.email,
+          avatarStyle: h.user.avatarStyle,
+          avatarBadgeId: h.user.avatarBadgeId ?? null
+        }
+      })
+    })),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取实例分页列表
+ */
+export async function getInstancesPaginated(options: PaginationOptions = {}): Promise<PaginatedInstancesResponse<Instance>> {
+  const { page = 1, pageSize = 20, search = '', userId = null, hostId = null, countryCode = null, status = null, sortBy = null, sortOrder = null } = options
+
+  const baseWhere: any = {}
+
+  // 默认排除已删除的实例（除非明确指定 status='deleted'）
+  if (status === 'deleted') {
+    baseWhere.status = 'deleted'
+  } else if (status) {
+    baseWhere.status = status
+  } else {
+    baseWhere.status = { not: 'deleted' }
+  }
+
+  if (search) {
+    // 尝试将搜索词解析为数字（用于实例ID搜索）
+    const searchNum = parseInt(search, 10)
+    const isNumeric = !isNaN(searchNum) && searchNum.toString() === search.trim()
+    
+    const searchConditions: any[] = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { incusId: { contains: search, mode: 'insensitive' } },
+      { ipv4: { contains: search, mode: 'insensitive' } },
+      { ipv6: { contains: search, mode: 'insensitive' } },
+      // 关联用户表搜索用户名和邮箱
+      { user: { username: { contains: search, mode: 'insensitive' } } },
+      { user: { email: { contains: search, mode: 'insensitive' } } }
+    ]
+    
+    // 如果是数字，添加实例ID精确匹配
+    if (isNumeric) {
+      searchConditions.push({ id: searchNum })
+    }
+    
+    baseWhere.OR = searchConditions
+  }
+
+  if (userId) {
+    baseWhere.userId = userId
+  }
+
+  if (hostId) {
+    baseWhere.hostId = hostId
+  }
+
+  const where: any = { ...baseWhere }
+
+  if (countryCode) {
+    where.host = {
+      countryCode: countryCode.toLowerCase()
+    }
+  }
+
+  const availableCountryRows = await prisma.host.findMany({
+    where: {
+      instances: {
+        some: baseWhere
+      }
+    },
+    select: {
+      countryCode: true
+    },
+    distinct: ['countryCode'],
+    orderBy: {
+      countryCode: 'asc'
+    }
+  })
+  const availableCountries = availableCountryRows
+    .map(host => (host.countryCode || 'us').toLowerCase())
+    .filter((code, index, array) => array.indexOf(code) === index)
+
+  // 获取总数
+  const total = await prisma.instance.count({ where })
+
+  const orderBy: Prisma.InstanceOrderByWithRelationInput[] = sortBy === 'createdAt'
+    ? [{ createdAt: sortOrder || 'desc' }, { id: 'asc' }]
+    : userId
+      ? [{ displayOrder: 'asc' }, { createdAt: 'desc' }, { id: 'asc' }]
+      : [{ createdAt: 'desc' }, { id: 'asc' }]
+
+  // 获取数据
+  const instances = await prisma.instance.findMany({
+    where,
+    include: {
+      host: {
+        select: {
+          name: true,
+          location: true,
+          countryCode: true,
+          natPublicIp: true,
+          natPublicIpv6: true,
+          ipv6Gateway: true,
+          ipAddress: true,
+          url: true
+        }
+      },
+      user: {
+        select: {
+          username: true,
+          email: true,
+          avatarStyle: true,
+          avatarBadgeId: true
+        }
+      },
+      package: {
+        select: {
+          name: true,
+          allowInstanceDeletion: true,
+          instanceType: true
+        }
+      }
+    },
+    orderBy,
+    skip: (page - 1) * pageSize,
+    take: pageSize
+  })
+
+  // 批量获取镜像显示名称
+  const imageAliases = instances.map(i => i.image)
+  const imageDisplayNames = await getImageDisplayNames(imageAliases)
+
+  return {
+    items: instances.map(i => ({
+      id: i.id,
+      incus_id: i.incusId,
+      name: i.name,
+      user_id: i.userId,
+      host_id: i.hostId,
+      package_id: i.packageId,
+      display_order: i.displayOrder,
+      icon_badge_id: i.iconBadgeId,
+      image: i.image,
+      image_name: imageDisplayNames.get(i.image) || null,
+      status: i.status,
+      cpu: i.cpu,
+      memory: i.memory,
+      disk: i.disk,
+      ipv4: i.ipv4,
+      ipv6: i.ipv6,
+      network_mode: i.networkMode,
+      ssh_port: i.sshPort,
+      root_password: i.rootPassword,
+      port_limit: i.portLimit,
+      snapshot_limit: i.snapshotLimit,
+      backup_limit: i.backupLimit,
+      site_limit: i.siteLimit,
+      swap_enabled: i.swapEnabled,
+      swap_size: i.swapSize,
+      monthly_traffic_limit: i.monthlyTrafficLimit ? i.monthlyTrafficLimit.toString() : null,
+      monthly_traffic_used: i.monthlyTrafficUsed ? i.monthlyTrafficUsed.toString() : '0',
+      // 配置字段
+      limits_read: i.limitsRead,
+      limits_write: i.limitsWrite,
+      limits_read_iops: i.limitsReadIops,
+      limits_write_iops: i.limitsWriteIops,
+      limits_ingress: i.limitsIngress,
+      limits_egress: i.limitsEgress,
+      limits_processes: i.limitsProcesses,
+      limits_cpu_priority: i.limitsCpuPriority,
+      boot_autostart: i.bootAutostart,
+      boot_autostart_priority: i.bootAutostartPriority,
+      boot_autostart_delay: i.bootAutostartDelay,
+      boot_host_shutdown_timeout: i.bootHostShutdownTimeout,
+      // 封停相关字段
+      expires_at: i.expiresAt?.toISOString() ?? null,
+      auto_renew: i.autoRenew,
+      suspended_at: i.suspendedAt?.toISOString() ?? null,
+      suspended_by: i.suspendedBy,
+      suspend_reason: i.suspendReason,
+      created_at: i.createdAt.toISOString(),
+      updated_at: i.updatedAt.toISOString(),
+      host_name: i.host.name,
+      host_country_code: i.host.countryCode,
+      host_nat_public_ip: i.host.natPublicIp,
+      host_nat_public_ipv6: i.host.natPublicIpv6,
+      host_ipv6_gateway: i.host.ipv6Gateway,
+      host_ip_address: (() => {
+        if (i.host.ipAddress) return i.host.ipAddress
+        if (i.host.url) {
+          try {
+            const u = new URL(i.host.url)
+            return u.hostname.replace(/^\[|\]$/g, '')
+          } catch {
+            return null
+          }
+        }
+        return null
+      })(),
+      username: i.user.username,
+      user_email: i.user.email,
+      user_avatar_style: i.user.avatarStyle,
+      user_avatar_badge_id: i.user.avatarBadgeId,
+      package_name: i.package?.name || null,
+      package_plan_id: i.packagePlanId,
+      billing_price: i.billingPrice ? Number(i.billingPrice) : null,
+      package_instance_type: i.package?.instanceType || 'container',
+      allow_instance_deletion: i.package?.allowInstanceDeletion ?? true
+    })),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize),
+    availableCountries
+  }
+}
+
+/**
+ * 获取可用宿主机（用于创建实例时选择）
+ * 根据套餐所有权过滤：
+ * - 如果是自己的套餐，返回自己的节点
+ * - 如果是共享的套餐，返回套餐所有者的节点（部分信息）
+ */
+export async function getAvailableHosts(
+  packageHostIds: number[] | null = null,
+  cpu: number,
+  memory: number,
+  _disk: number,
+  options: {
+    userId?: number       // 当前用户ID
+    packageOwnerId?: number  // 套餐所有者ID（如果是共享套餐）
+  } = {}
+): Promise<any[]> {
+  const { userId, packageOwnerId } = options
+
+  // 构建查询条件
+  const whereCondition: any = {
+    status: 'online'
+  }
+
+  // 修复：当套餐绑定了宿主机时，直接使用绑定列表查询，不添加额外的所有权限制
+  // 套餐绑定宿主机的权限已在创建/编辑套餐时验证
+  if (packageHostIds && packageHostIds.length > 0) {
+    // 套餐绑定了特定宿主机，只在这些宿主机中选择
+    whereCondition.id = { in: packageHostIds }
+  } else {
+    // 套餐没有绑定宿主机时，根据所有权返回可用节点
+    if (packageOwnerId) {
+      // 共享套餐：返回套餐所有者的所有在线宿主机
+      whereCondition.userId = packageOwnerId
+    } else if (userId) {
+      // 自己的套餐：返回自己的所有在线宿主机
+      whereCondition.userId = userId
+    }
+  }
+
+  // 获取所有在线主机
+  const hosts = await prisma.host.findMany({
+    where: whereCondition,
+    select: {
+      id: true,
+      userId: true,  // 节点所有者ID
+      name: true,
+      url: true,
+      location: true,
+      countryCode: true,
+      architecture: true,
+      status: true,
+      certPath: true,
+      keyPath: true,
+      natPublicIp: true,
+      natPortStart: true,
+      natPortEnd: true,
+      natPortsUsedCount: true,
+      cpuUsed: true,
+      memoryUsed: true,
+      diskUsed: true,
+      cpuAllowanceMax: true,
+      memoryMax: true,
+      instanceType: true,
+      storageSize: true,
+      probeUrl: true,
+      tags: true,
+      createdAt: true,
+      updatedAt: true,
+      user: {  // 节点所有者信息
+        select: {
+          id: true,
+          username: true
+        }
+      },
+      instances: {
+        where: {
+          status: { not: 'deleted' }
+        },
+        select: {
+          cpu: true,
+          memory: true,
+          disk: true
+        }
+      }
+    }
+  })
+
+  // 计算每个主机的实际资源使用量
+  // 资源使用量 = 关联该宿主机的实例的资源总和
+  // 资源上限 = 用户输入的配额（cpuAllowanceMax、memoryMax、storageSize）
+  const hostsWithResources = hosts.map(host => {
+    // 计算实例资源总和（已使用量）
+    const cpuUsed = host.instances.reduce((sum, inst) => sum + inst.cpu, 0)
+    const memoryUsed = host.instances.reduce((sum, inst) => sum + inst.memory, 0)
+    const diskUsed = host.instances.reduce((sum, inst) => sum + inst.disk, 0)
+
+    return {
+      ...host,
+      cpuUsedCalculated: cpuUsed,
+      memoryUsedCalculated: memoryUsed,
+      diskUsedCalculated: diskUsed
+    }
+  })
+
+  const availableHosts = hostsWithResources
+    .filter(host => {
+      // 检查 CPU 配额
+      // 剩余量 = 用户输入的CPU配额上限 - 实例资源总和
+      const cpuAllowanceMax = host.cpuAllowanceMax
+      if (cpuAllowanceMax != null && cpuAllowanceMax > 0) {
+        // 剩余CPU配额 = cpuAllowanceMax - cpuUsedCalculated
+        // 需要满足：剩余CPU配额 >= 请求的CPU
+        if ((host.cpuUsedCalculated + cpu) > cpuAllowanceMax) {
+          return false // CPU配额不足
+        }
+      } else {
+        // 如果没有设置CPU配额上限，该宿主机不可用（必须设置配额）
+        return false
+      }
+
+      // 检查内存配额
+      // 剩余量 = 用户输入的内存配额上限 - 实例资源总和
+      const memoryMax = host.memoryMax
+      if (memoryMax != null && memoryMax > 0) {
+        // 剩余内存配额 = memoryMax - memoryUsedCalculated
+        // 需要满足：剩余内存配额 >= 请求的内存
+        if ((host.memoryUsedCalculated + memory) > memoryMax) {
+          return false // 内存配额不足
+        }
+      } else {
+        // 如果没有设置内存配额上限，该宿主机不可用（必须设置配额）
+        return false
+      }
+
+      // 磁盘配额检查已移除：不再限制磁盘空间
+      return true
+    })
+    .sort((a, b) => (b.memoryMax - b.memoryUsedCalculated) - (a.memoryMax - a.memoryUsedCalculated))
+
+  return availableHosts.map(h => {
+    const isOwn = userId ? h.userId === userId : false
+
+    // 基础信息（所有人都能看到）
+    const baseInfo = {
+      id: h.id,
+      user_id: h.userId,
+      owner_username: h.user?.username || null,
+      is_own: isOwn,
+      name: h.name,
+      location: h.location,
+      country_code: h.countryCode,
+      architecture: h.architecture,
+      status: h.status,
+      cpu_used: h.cpuUsedCalculated,
+      cpu_allowance_max: h.cpuAllowanceMax,
+      memory_used: h.memoryUsedCalculated,
+      memory_max: h.memoryMax,
+      disk_total: h.storageSize ? h.storageSize * 1024 : 0, // 只使用用户输入的存储大小（GB转MB），不使用实际磁盘容量
+      disk_used: h.diskUsedCalculated,
+      instance_type: h.instanceType,
+      storage_size: h.storageSize,
+      probe_url: h.probeUrl || null
+    }
+
+    // 如果是自己的节点，返回完整信息
+    if (isOwn) {
+      return {
+        ...baseInfo,
+        url: h.url,
+        cert_path: h.certPath,
+        key_path: h.keyPath,
+        nat_public_ip: h.natPublicIp,
+        nat_port_start: h.natPortStart,
+        nat_port_end: h.natPortEnd,
+        nat_ports_used_count: h.natPortsUsedCount,
+        tags: Array.isArray(h.tags) ? h.tags as string[] : [],
+        created_at: h.createdAt.toISOString(),
+        updated_at: h.updatedAt.toISOString()
+      }
+    }
+
+    // 共享套餐的节点，只返回基础信息
+    return baseInfo
+  })
+}
+
+/**
+ * 获取可用宿主机（用于实例创建，支持用户指定）
+ */
+export async function getAvailableHostsForInstance(
+  packageHostIds: number[] | null = null,
+  cpu: number,
+  memory: number,
+  _disk: number
+): Promise<any[]> {
+  const where: any = {
+    status: 'online'
+  }
+
+  if (packageHostIds && packageHostIds.length > 0) {
+    where.id = { in: packageHostIds }
+  }
+
+  const hosts = await prisma.host.findMany({
+    where,
+    select: {
+      id: true,
+      name: true,
+      url: true,
+      location: true,
+      countryCode: true,
+      architecture: true,
+      status: true,
+      certPath: true,
+      keyPath: true,
+      natPublicIp: true,
+      natPortStart: true,
+      natPortEnd: true,
+      natPortsUsedCount: true,
+      cpuUsed: true,
+      memoryUsed: true,
+      diskUsed: true,
+      cpuAllowanceMax: true,
+      memoryMax: true,
+      instanceType: true,
+      storageSize: true,
+      tags: true,
+      createdAt: true,
+      updatedAt: true
+    },
+    orderBy: {
+      cpuAllowanceMax: 'desc'
+    }
+  })
+
+  // 过滤可用主机
+  const availableHosts = hosts.filter(host => {
+    // 检查 CPU 配额
+    const cpuAllowanceMax = host.cpuAllowanceMax
+    if (cpuAllowanceMax != null && cpuAllowanceMax > 0) {
+      if ((host.cpuUsed + cpu) > cpuAllowanceMax) {
+        return false // CPU配额不足
+      }
+    } else {
+      // 如果没有设置CPU配额上限，该宿主机不可用
+      return false
+    }
+
+    // 检查内存配额
+    const memoryMax = host.memoryMax
+    if (memoryMax != null && memoryMax > 0) {
+      if ((host.memoryUsed + memory) > memoryMax) {
+        return false // 内存配额不足
+      }
+    } else {
+      // 如果没有设置内存配额上限，该宿主机不可用
+      return false
+    }
+
+    // 磁盘配额检查已移除：不再限制磁盘空间
+    return true
+  })
+
+  return availableHosts.map(h => ({
+    id: h.id,
+    name: h.name,
+    url: h.url,
+    location: h.location,
+    country_code: h.countryCode,
+    architecture: h.architecture,
+    status: h.status,
+    cert_path: h.certPath,
+    key_path: h.keyPath,
+    nat_public_ip: h.natPublicIp,
+    nat_port_start: h.natPortStart,
+    nat_port_end: h.natPortEnd,
+    cpu_used: h.cpuUsed,
+    cpu_allowance_max: h.cpuAllowanceMax,
+    memory_used: h.memoryUsed,
+    memory_max: h.memoryMax,
+    disk_total: h.storageSize ? h.storageSize * 1024 : 0,
+    disk_used: h.diskUsed,
+    created_at: h.createdAt.toISOString(),
+    updated_at: h.updatedAt.toISOString()
+  }))
+}
diff --git a/server/src/db/payment-providers.ts b/server/src/db/payment-providers.ts
new file mode 100644
index 0000000..1ad4a06
--- /dev/null
+++ b/server/src/db/payment-providers.ts
@@ -0,0 +1,385 @@
+/**
+ * 支付渠道管理数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { PaymentProvider, PaymentProviderType, PaymentProviderStatus } from '@prisma/client'
+import { encryptSensitiveData, decryptSensitiveData } from '../lib/security.js'
+
+// ==================== 类型定义 ====================
+
+export interface CreatePaymentProviderInput {
+  name: string
+  type: PaymentProviderType
+  status?: PaymentProviderStatus
+  config?: Record<string, unknown>
+  methods?: string[]
+  feeRate?: number
+  feeFixed?: number
+  minAmount?: number
+  maxAmount?: number | null
+  sortOrder?: number
+}
+
+export interface UpdatePaymentProviderInput {
+  name?: string
+  status?: PaymentProviderStatus
+  config?: Record<string, unknown>
+  methods?: string[]
+  feeRate?: number
+  feeFixed?: number
+  minAmount?: number
+  maxAmount?: number | null
+  sortOrder?: number
+}
+
+export interface PaymentMethodFeeConfig {
+  feeRate: number
+  feeFixed: number
+}
+
+export type PaymentMethodFeeMap = Record<string, PaymentMethodFeeConfig>
+
+// ==================== 配置加密工具函数 ====================
+
+/**
+ * 加密支付渠道配置（包含密钥、私钥等敏感信息）
+ */
+function encryptProviderConfig(config: Record<string, unknown>): string {
+  const configJson = JSON.stringify(config)
+  return encryptSensitiveData(configJson)
+}
+
+/**
+ * 解密支付渠道配置
+ */
+function decryptProviderConfig(encryptedConfig: unknown): Record<string, unknown> {
+  if (!encryptedConfig) {
+    return {}
+  }
+
+  // 如果是字符串（加密数据）
+  if (typeof encryptedConfig === 'string') {
+    // 检查是否是加密格式 (iv:tag:encrypted)
+    if (encryptedConfig.includes(':')) {
+      try {
+        const decrypted = decryptSensitiveData(encryptedConfig)
+        if (decrypted) {
+          return JSON.parse(decrypted)
+        }
+      } catch {
+        // 解密失败，尝试作为 JSON 解析
+      }
+    }
+    // 可能是未加密的旧数据 (JSON字符串)
+    try {
+      return JSON.parse(encryptedConfig)
+    } catch {
+      return {}
+    }
+  }
+
+  // 如果已经是对象（未加密的旧数据）
+  if (typeof encryptedConfig === 'object') {
+    return encryptedConfig as Record<string, unknown>
+  }
+
+  return {}
+}
+
+/**
+ * 解密单个 Provider 的配置
+ */
+function decryptProvider<T extends { config: unknown }>(provider: T): T & { config: Record<string, unknown> } {
+  return {
+    ...provider,
+    config: decryptProviderConfig(provider.config)
+  }
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 获取所有支付渠道（管理员）
+ * 返回解密后的配置
+ */
+export async function getAllPaymentProviders(): Promise<PaymentProvider[]> {
+  const providers = await prisma.paymentProvider.findMany({
+    orderBy: [{ sortOrder: 'asc' }, { id: 'asc' }]
+  })
+  return providers.map(p => decryptProvider(p)) as PaymentProvider[]
+}
+
+/**
+ * 获取已启用的支付渠道（用户可见）
+ * 返回解密后的配置
+ */
+export async function getActivePaymentProviders(): Promise<PaymentProvider[]> {
+  const providers = await prisma.paymentProvider.findMany({
+    where: { status: 'active' },
+    orderBy: [{ sortOrder: 'asc' }, { id: 'asc' }]
+  })
+  return providers.map(p => decryptProvider(p)) as PaymentProvider[]
+}
+
+/**
+ * 根据 ID 获取支付渠道
+ * 返回解密后的配置
+ */
+export async function getPaymentProviderById(id: number): Promise<PaymentProvider | null> {
+  const provider = await prisma.paymentProvider.findUnique({
+    where: { id }
+  })
+  return provider ? decryptProvider(provider) as PaymentProvider : null
+}
+
+/**
+ * 根据类型获取支付渠道
+ * 返回解密后的配置
+ */
+export async function getPaymentProviderByType(type: PaymentProviderType): Promise<PaymentProvider | null> {
+  const provider = await prisma.paymentProvider.findFirst({
+    where: { type, status: 'active' }
+  })
+  return provider ? decryptProvider(provider) as PaymentProvider : null
+}
+
+// ==================== 创建操作 ====================
+
+/**
+ * 创建支付渠道
+ * 配置会被加密存储
+ */
+export async function createPaymentProvider(input: CreatePaymentProviderInput): Promise<PaymentProvider> {
+  // 加密配置
+  const encryptedConfig = input.config ? encryptProviderConfig(input.config) : encryptProviderConfig({})
+  
+  const provider = await prisma.paymentProvider.create({
+    data: {
+      name: input.name,
+      type: input.type,
+      status: input.status || 'disabled',
+      config: encryptedConfig,
+      methods: input.methods || [],
+      feeRate: input.feeRate || 0,
+      feeFixed: input.feeFixed || 0,
+      minAmount: input.minAmount || 1,
+      maxAmount: input.maxAmount,
+      sortOrder: input.sortOrder || 0
+    }
+  })
+  
+  // 返回解密后的数据
+  return decryptProvider(provider) as PaymentProvider
+}
+
+// ==================== 更新操作 ====================
+
+/**
+ * 更新支付渠道
+ * 如果提供了 config，会被加密存储
+ */
+export async function updatePaymentProvider(
+  id: number,
+  input: UpdatePaymentProviderInput
+): Promise<PaymentProvider> {
+  const data: Record<string, unknown> = {}
+
+  if (input.name !== undefined) data.name = input.name
+  if (input.status !== undefined) data.status = input.status
+  if (input.config !== undefined) {
+    // 加密配置
+    data.config = encryptProviderConfig(input.config)
+  }
+  if (input.methods !== undefined) data.methods = input.methods
+  if (input.feeRate !== undefined) data.feeRate = input.feeRate
+  if (input.feeFixed !== undefined) data.feeFixed = input.feeFixed
+  if (input.minAmount !== undefined) data.minAmount = input.minAmount
+  if (input.maxAmount !== undefined) data.maxAmount = input.maxAmount
+  if (input.sortOrder !== undefined) data.sortOrder = input.sortOrder
+
+  const provider = await prisma.paymentProvider.update({
+    where: { id },
+    data
+  })
+  
+  // 返回解密后的数据
+  return decryptProvider(provider) as PaymentProvider
+}
+
+/**
+ * 启用支付渠道
+ */
+export async function enablePaymentProvider(id: number): Promise<PaymentProvider> {
+  return prisma.paymentProvider.update({
+    where: { id },
+    data: { status: 'active' }
+  })
+}
+
+/**
+ * 禁用支付渠道
+ */
+export async function disablePaymentProvider(id: number): Promise<PaymentProvider> {
+  return prisma.paymentProvider.update({
+    where: { id },
+    data: { status: 'disabled' }
+  })
+}
+
+// ==================== 删除操作 ====================
+
+/**
+ * 删除支付渠道
+ */
+export async function deletePaymentProvider(id: number): Promise<void> {
+  await prisma.paymentProvider.delete({
+    where: { id }
+  })
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 计算手续费
+ */
+export function calculateFee(provider: PaymentProvider, amount: number): number {
+  const feeRate = Number(provider.feeRate)
+  const feeFixed = Number(provider.feeFixed)
+  return Number((amount * feeRate + feeFixed).toFixed(2))
+}
+
+function normalizeMethodFeeEntry(entry: unknown): PaymentMethodFeeConfig {
+  if (typeof entry === 'number') {
+    return {
+      feeRate: Number.isFinite(entry) && entry > 0 ? entry : 0,
+      feeFixed: 0
+    }
+  }
+
+  if (!entry || typeof entry !== 'object' || Array.isArray(entry)) {
+    return { feeRate: 0, feeFixed: 0 }
+  }
+
+  const data = entry as Record<string, unknown>
+  const feeRate = Number(data.feeRate ?? 0)
+  const feeFixed = Number(data.feeFixed ?? 0)
+
+  return {
+    feeRate: Number.isFinite(feeRate) && feeRate > 0 && feeRate <= 1 ? feeRate : 0,
+    feeFixed: Number.isFinite(feeFixed) && feeFixed > 0 ? feeFixed : 0
+  }
+}
+
+/**
+ * 获取支付方式级手续费配置。
+ *
+ * methodFees 存在于 provider.config 中，格式：
+ * { alipay: { feeRate: 0.03, feeFixed: 0 }, wxpay: { feeRate: 0.04 } }
+ */
+export function getPaymentMethodFeeMap(provider: PaymentProvider): PaymentMethodFeeMap {
+  const config = provider.config && typeof provider.config === 'object' && !Array.isArray(provider.config)
+    ? provider.config as Record<string, unknown>
+    : {}
+  const rawMethodFees = config.methodFees
+
+  if (!rawMethodFees || typeof rawMethodFees !== 'object' || Array.isArray(rawMethodFees)) {
+    return {}
+  }
+
+  const result: PaymentMethodFeeMap = {}
+  for (const [method, entry] of Object.entries(rawMethodFees as Record<string, unknown>)) {
+    const normalizedMethod = method.trim()
+    if (!normalizedMethod) continue
+    result[normalizedMethod] = normalizeMethodFeeEntry(entry)
+  }
+
+  return result
+}
+
+export function getPaymentFeeConfig(
+  provider: PaymentProvider,
+  paymentMethod?: string | null
+): PaymentMethodFeeConfig {
+  const method = provider.type === 'yipay' ? paymentMethod?.trim() : ''
+  if (method) {
+    const methodFee = getPaymentMethodFeeMap(provider)[method]
+    if (methodFee) {
+      return methodFee
+    }
+  }
+
+  return {
+    feeRate: Number(provider.feeRate) || 0,
+    feeFixed: Number(provider.feeFixed) || 0
+  }
+}
+
+function isSurchargeFeeProvider(provider: PaymentProvider): boolean {
+  return provider.type === 'yipay'
+}
+
+/**
+ * 计算充值手续费。
+ */
+export function calculatePaymentFee(
+  provider: PaymentProvider,
+  amount: number,
+  paymentMethod?: string | null
+): number {
+  const feeConfig = getPaymentFeeConfig(provider, paymentMethod)
+  return Number((amount * feeConfig.feeRate + feeConfig.feeFixed).toFixed(2))
+}
+
+/**
+ * 计算用户实际需要支付给支付平台的金额。易支付为手续费外加，其它渠道沿用原始充值金额。
+ */
+export function calculatePayableAmount(
+  provider: PaymentProvider,
+  amount: number,
+  paymentMethod?: string | null
+): number {
+  if (!isSurchargeFeeProvider(provider)) {
+    return Number(amount.toFixed(2))
+  }
+
+  const fee = calculatePaymentFee(provider, amount, paymentMethod)
+  return Number((amount + fee).toFixed(2))
+}
+
+/**
+ * 计算实际到账金额
+ */
+export function calculateActualAmount(provider: PaymentProvider, amount: number): number {
+  if (!isSurchargeFeeProvider(provider)) {
+    const fee = calculateFee(provider, amount)
+    return Number((amount - fee).toFixed(2))
+  }
+
+  return Number(amount.toFixed(2))
+}
+
+/**
+ * 验证充值金额是否在渠道允许范围内
+ */
+export function validateRechargeAmount(provider: PaymentProvider, amount: number): { valid: boolean; error?: string } {
+  const minAmount = Number(provider.minAmount)
+  const maxAmount = provider.maxAmount ? Number(provider.maxAmount) : null
+
+  if (amount < minAmount) {
+    return { valid: false, error: `充值金额不能低于 ${minAmount} 元` }
+  }
+
+  if (maxAmount && amount > maxAmount) {
+    return { valid: false, error: `充值金额不能超过 ${maxAmount} 元` }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * 获取支付渠道支持的支付方式
+ */
+export function getProviderMethods(provider: PaymentProvider): string[] {
+  return (provider.methods as string[]) || []
+}
diff --git a/server/src/db/points.ts b/server/src/db/points.ts
new file mode 100644
index 0000000..8d3d117
--- /dev/null
+++ b/server/src/db/points.ts
@@ -0,0 +1,316 @@
+/**
+ * 积分系统数据库操作
+ */
+import { prisma } from './prisma.js'
+import type { PointsLogType, Prisma } from '@prisma/client'
+import { getUserTotalConsume } from './balance.js'
+
+// ==================== 用户积分 ====================
+
+/**
+ * 获取用户积分信息
+ */
+export async function getUserPoints(userId: number) {
+  // 使用 upsert 避免并发时的唯一约束冲突
+  const userPoints = await prisma.userPoints.upsert({
+    where: { userId },
+    update: {},
+    create: { userId }
+  })
+
+  return userPoints
+}
+
+/**
+ * 获取用户可兑换的消费金额
+ */
+export async function getConvertibleConsume(userId: number): Promise<{
+  totalConsume: number
+  convertedConsume: number
+  convertibleAmount: number
+  convertiblePoints: number
+}> {
+  // 获取用户积分记录
+  const userPoints = await getUserPoints(userId)
+
+  // 获取用户实际总消费额，兼容历史 consume 日志 amount 正负号不一致
+  const totalConsume = await getUserTotalConsume(userId)
+
+  // 计算可兑换金额
+  const convertedConsume = parseFloat(String(userPoints.convertedConsume))
+  const convertibleAmount = Math.max(0, totalConsume - convertedConsume)
+  const convertiblePoints = Math.floor(convertibleAmount * 100) // 1元 = 100积分
+
+  return {
+    totalConsume,
+    convertedConsume,
+    convertibleAmount,
+    convertiblePoints
+  }
+}
+
+/**
+ * 兑换积分
+ */
+export async function convertPointsFromConsumption(userId: number): Promise<{
+  success: boolean
+  converted: number
+  newPoints: number
+  consumeConverted: number
+  message?: string
+}> {
+  return prisma.$transaction(async (tx) => {
+    // 使用 upsert 避免并发时的唯一约束冲突
+    const userPoints = await tx.userPoints.upsert({
+      where: { userId },
+      update: {},
+      create: { userId }
+    })
+
+    // 2. 获取用户当前实际总消费额，兼容历史 consume 日志 amount 正负号不一致
+    const totalConsume = await getUserTotalConsume(userId, tx)
+
+    // 3. 计算可兑换的新积分
+    const alreadyConverted = parseFloat(String(userPoints.convertedConsume))
+    const newConvertableConsume = totalConsume - alreadyConverted
+
+    if (newConvertableConsume <= 0) {
+      return {
+        success: false,
+        converted: 0,
+        newPoints: userPoints.points,
+        consumeConverted: 0,
+        message: '暂无可兑换的消费额'
+      }
+    }
+
+    // 4. 计算新积分（1元 = 100积分）
+    const newPoints = Math.floor(newConvertableConsume * 100)
+
+    // 5. 更新用户积分
+    const updatedPoints = await tx.userPoints.update({
+      where: { userId },
+      data: {
+        points: { increment: newPoints },
+        totalEarned: { increment: newPoints },
+        convertedConsume: totalConsume,
+        lastConvertedAt: new Date()
+      }
+    })
+
+    // 6. 记录积分变动日志
+    await tx.pointsLog.create({
+      data: {
+        userId,
+        type: 'convert',
+        amount: newPoints,
+        pointsBefore: userPoints.points,
+        pointsAfter: updatedPoints.points,
+        remark: `消费兑换：¥${newConvertableConsume.toFixed(2)} → ${newPoints}积分`
+      }
+    })
+
+    return {
+      success: true,
+      converted: newPoints,
+      newPoints: updatedPoints.points,
+      consumeConverted: newConvertableConsume
+    }
+  })
+}
+
+/**
+ * 扣除用户积分（用于抽奖）
+ */
+export async function deductPoints(
+  userId: number,
+  amount: number,
+  relatedId?: number,
+  remark?: string
+): Promise<{ success: boolean; newPoints: number; message?: string }> {
+  return prisma.$transaction(async (tx) => {
+    const userPoints = await tx.userPoints.findUnique({ where: { userId } })
+    if (!userPoints) {
+      return { success: false, newPoints: 0, message: '积分账户不存在' }
+    }
+
+    if (userPoints.points < amount) {
+      return { success: false, newPoints: userPoints.points, message: '积分不足' }
+    }
+
+    const updatedPoints = await tx.userPoints.update({
+      where: { userId },
+      data: {
+        points: { decrement: amount },
+        totalSpent: { increment: amount }
+      }
+    })
+
+    await tx.pointsLog.create({
+      data: {
+        userId,
+        type: 'lottery_spend',
+        amount: -amount,
+        pointsBefore: userPoints.points,
+        pointsAfter: updatedPoints.points,
+        relatedId,
+        remark: remark || `抽奖消耗 ${amount} 积分`
+      }
+    })
+
+    return { success: true, newPoints: updatedPoints.points }
+  })
+}
+
+/**
+ * 增加用户积分（用于抽奖中奖）
+ */
+export async function addPoints(
+  userId: number,
+  amount: number,
+  type: PointsLogType,
+  relatedId?: number,
+  remark?: string
+): Promise<{ success: boolean; newPoints: number }> {
+  return prisma.$transaction(async (tx) => {
+    // 使用 upsert 避免并发时的唯一约束冲突
+    const userPoints = await tx.userPoints.upsert({
+      where: { userId },
+      update: {},
+      create: { userId }
+    })
+
+    const updatedPoints = await tx.userPoints.update({
+      where: { userId },
+      data: {
+        points: { increment: amount },
+        totalEarned: { increment: amount }
+      }
+    })
+
+    await tx.pointsLog.create({
+      data: {
+        userId,
+        type,
+        amount,
+        pointsBefore: userPoints.points,
+        pointsAfter: updatedPoints.points,
+        relatedId,
+        remark
+      }
+    })
+
+    return { success: true, newPoints: updatedPoints.points }
+  })
+}
+
+/**
+ * 管理员调整用户积分
+ */
+export async function adminAdjustPoints(
+  userId: number,
+  amount: number,
+  remark: string
+): Promise<{ success: boolean; newPoints: number; message?: string }> {
+  return prisma.$transaction(async (tx) => {
+    // 使用 upsert 避免并发时的唯一约束冲突
+    const userPoints = await tx.userPoints.upsert({
+      where: { userId },
+      update: {},
+      create: { userId }
+    })
+
+    // 检查扣除后是否会变成负数
+    if (amount < 0 && userPoints.points + amount < 0) {
+      return { success: false, newPoints: userPoints.points, message: '扣除后积分不能为负数' }
+    }
+
+    const updatedPoints = await tx.userPoints.update({
+      where: { userId },
+      data: {
+        points: { increment: amount },
+        totalEarned: amount > 0 ? { increment: amount } : undefined,
+        totalSpent: amount < 0 ? { increment: Math.abs(amount) } : undefined
+      }
+    })
+
+    await tx.pointsLog.create({
+      data: {
+        userId,
+        type: 'admin_adjust',
+        amount,
+        pointsBefore: userPoints.points,
+        pointsAfter: updatedPoints.points,
+        remark
+      }
+    })
+
+    return { success: true, newPoints: updatedPoints.points }
+  })
+}
+
+/**
+ * 获取用户积分日志
+ */
+export async function getPointsLogs(
+  userId: number,
+  options: { page?: number; pageSize?: number; type?: PointsLogType } = {}
+) {
+  const { page = 1, pageSize = 20, type } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.PointsLogWhereInput = { userId }
+  if (type) {
+    where.type = type
+  }
+
+  const [logs, total] = await Promise.all([
+    prisma.pointsLog.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      take: pageSize,
+      skip
+    }),
+    prisma.pointsLog.count({ where })
+  ])
+
+  return { logs, total, page, pageSize }
+}
+
+/**
+ * 获取所有用户积分列表（管理端）
+ */
+export async function getAllUserPoints(options: {
+  page?: number
+  pageSize?: number
+  search?: string
+  orderBy?: 'points' | 'totalEarned' | 'totalSpent'
+  order?: 'asc' | 'desc'
+} = {}) {
+  const { page = 1, pageSize = 20, search, orderBy = 'points', order = 'desc' } = options
+  const skip = (page - 1) * pageSize
+
+  const where: Prisma.UserPointsWhereInput = {}
+  if (search) {
+    where.user = {
+      username: { contains: search, mode: 'insensitive' }
+    }
+  }
+
+  const [records, total] = await Promise.all([
+    prisma.userPoints.findMany({
+      where,
+      include: {
+        user: {
+          select: { id: true, username: true, avatarStyle: true }
+        }
+      },
+      orderBy: { [orderBy]: order },
+      take: pageSize,
+      skip
+    }),
+    prisma.userPoints.count({ where })
+  ])
+
+  return { records, total, page, pageSize }
+}
diff --git a/server/src/db/port-mappings.ts b/server/src/db/port-mappings.ts
new file mode 100644
index 0000000..08dd0eb
--- /dev/null
+++ b/server/src/db/port-mappings.ts
@@ -0,0 +1,389 @@
+/**
+ * 端口映射相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import { getHostById } from './hosts.js'
+import type { PortMapping } from '../types/database.js'
+
+/**
+ * 获取实例的端口映射列表
+ */
+export async function getPortMappings(instanceId: number): Promise<PortMapping[]> {
+  const mappings = await prisma.portMapping.findMany({
+    where: { instanceId },
+    orderBy: {
+      createdAt: 'asc'
+    }
+  })
+
+  return mappings.map(m => ({
+    id: m.id,
+    instance_id: m.instanceId,
+    host_id: m.hostId,
+    protocol: m.protocol,
+    public_port: m.publicPort,
+    private_port: m.privatePort,
+    remark: m.remark,
+    created_at: m.createdAt.toISOString()
+  }))
+}
+
+/**
+ * 根据 ID 获取端口映射
+ */
+export async function getPortMappingById(id: number): Promise<PortMapping | null> {
+  const mapping = await prisma.portMapping.findUnique({
+    where: { id }
+  })
+
+  if (!mapping) return null
+
+  return {
+    id: mapping.id,
+    instance_id: mapping.instanceId,
+    host_id: mapping.hostId,
+    protocol: mapping.protocol,
+    public_port: mapping.publicPort,
+    private_port: mapping.privatePort,
+    remark: mapping.remark,
+    created_at: mapping.createdAt.toISOString()
+  }
+}
+
+/**
+ * 检查端口是否已被使用
+ */
+export async function checkPortInUse(
+  hostId: number,
+  port: number,
+  protocol: 'tcp' | 'udp'
+): Promise<PortMapping | null> {
+  const mapping = await prisma.portMapping.findFirst({
+    where: {
+      hostId,
+      publicPort: port,
+      protocol
+    }
+  })
+
+  if (!mapping) return null
+
+  return {
+    id: mapping.id,
+    instance_id: mapping.instanceId,
+    host_id: mapping.hostId,
+    protocol: mapping.protocol,
+    public_port: mapping.publicPort,
+    private_port: mapping.privatePort,
+    remark: mapping.remark,
+    created_at: mapping.createdAt.toISOString()
+  }
+}
+
+/**
+ * 创建端口映射
+ */
+export async function createPortMapping(data: {
+  instanceId: number
+  hostId: number
+  protocol: 'tcp' | 'udp'
+  publicPort: number
+  privatePort: number
+  remark?: string
+}): Promise<number> {
+  const mapping = await prisma.portMapping.create({
+    data: {
+      instanceId: data.instanceId,
+      hostId: data.hostId,
+      protocol: data.protocol,
+      publicPort: data.publicPort,
+      privatePort: data.privatePort,
+      remark: data.remark || null
+    }
+  })
+
+  return mapping.id
+}
+
+/**
+ * 从宿主机端口池自动分配一个可用端口
+ */
+export async function allocatePort(hostId: number, protocol: 'tcp' | 'udp' = 'tcp'): Promise<number | null> {
+  // 获取宿主机的端口范围
+  const host = await getHostById(hostId)
+  if (!host || !host.nat_port_start || !host.nat_port_end) {
+    return null
+  }
+
+  const portStart = host.nat_port_start
+  const portEnd = host.nat_port_end
+
+  // 获取该宿主机已使用的端口
+  const usedMappings = await prisma.portMapping.findMany({
+    where: {
+      hostId,
+      protocol
+    },
+    select: {
+      publicPort: true
+    }
+  })
+  const usedPorts = new Set(usedMappings.map(m => m.publicPort))
+
+  // 收集所有可用端口
+  const availablePorts: number[] = []
+  for (let port = portStart; port <= portEnd; port++) {
+    if (!usedPorts.has(port)) {
+      availablePorts.push(port)
+    }
+  }
+
+  // 如果没有可用端口，返回 null
+  if (availablePorts.length === 0) {
+    return null
+  }
+
+  // 随机选择一个可用端口
+  const randomIndex = Math.floor(Math.random() * availablePorts.length)
+  return availablePorts[randomIndex]
+}
+
+/**
+ * 批量分配多个端口
+ * @param checkBothProtocols 是否同时检查 TCP 和 UDP（Both 模式）
+ */
+export async function allocatePorts(
+  hostId: number,
+  count: number,
+  protocol: 'tcp' | 'udp' = 'tcp',
+  checkBothProtocols: boolean = false
+): Promise<number[]> {
+  const host = await getHostById(hostId)
+  if (!host || !host.nat_port_start || !host.nat_port_end) {
+    return []
+  }
+
+  const portStart = host.nat_port_start
+  const portEnd = host.nat_port_end
+
+  // 获取该宿主机已使用的端口
+  const usedPorts = new Set<number>()
+  
+  if (checkBothProtocols) {
+    // Both 模式：同时检查 TCP 和 UDP
+    const [tcpMappings, udpMappings] = await Promise.all([
+      prisma.portMapping.findMany({
+        where: { hostId, protocol: 'tcp' },
+        select: { publicPort: true }
+      }),
+      prisma.portMapping.findMany({
+        where: { hostId, protocol: 'udp' },
+        select: { publicPort: true }
+      })
+    ])
+    tcpMappings.forEach(m => usedPorts.add(m.publicPort))
+    udpMappings.forEach(m => usedPorts.add(m.publicPort))
+  } else {
+    const usedMappings = await prisma.portMapping.findMany({
+      where: { hostId, protocol },
+      select: { publicPort: true }
+    })
+    usedMappings.forEach(m => usedPorts.add(m.publicPort))
+  }
+
+  // 收集所有可用端口
+  const availablePorts: number[] = []
+  for (let port = portStart; port <= portEnd; port++) {
+    if (!usedPorts.has(port)) {
+      availablePorts.push(port)
+    }
+  }
+
+  // 如果没有足够的可用端口，返回已收集的
+  if (availablePorts.length < count) {
+    // 随机打乱并返回
+    for (let i = availablePorts.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [availablePorts[i], availablePorts[j]] = [availablePorts[j], availablePorts[i]];
+    }
+    return availablePorts
+  }
+
+  // 随机选择指定数量的端口
+  const shuffled = [...availablePorts]
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled.slice(0, count)
+}
+
+/**
+ * 获取宿主机端口池统计
+ */
+export async function getHostPortStats(hostId: number): Promise<{
+  total: number
+  used: number
+  available: number
+  rangeStart: number
+  rangeEnd: number
+} | null> {
+  const host = await getHostById(hostId)
+  if (!host || !host.nat_port_start || !host.nat_port_end) {
+    return null
+  }
+
+  const totalPorts = host.nat_port_end - host.nat_port_start + 1
+
+  const usedCount = await prisma.portMapping.groupBy({
+    by: ['publicPort'],
+    where: { hostId },
+    _count: {
+      id: true
+    }
+  })
+  const usedPorts = usedCount.length
+
+  return {
+    total: totalPorts,
+    used: usedPorts,
+    available: totalPorts - usedPorts,
+    rangeStart: host.nat_port_start,
+    rangeEnd: host.nat_port_end
+  }
+}
+
+/**
+ * 删除端口映射
+ */
+export async function deletePortMapping(id: number): Promise<void> {
+  await prisma.portMapping.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 批量检查端口占用情况
+ * @returns 被占用的端口列表，包含端口号和占用该端口的实例ID
+ */
+export async function checkPortsInUse(
+  hostId: number,
+  ports: number[],
+  protocol: 'tcp' | 'udp'
+): Promise<{ port: number; instanceId: number }[]> {
+  if (ports.length === 0) return []
+
+  const mappings = await prisma.portMapping.findMany({
+    where: {
+      hostId,
+      protocol,
+      publicPort: { in: ports }
+    },
+    select: {
+      publicPort: true,
+      instanceId: true
+    }
+  })
+
+  return mappings.map(m => ({
+    port: m.publicPort,
+    instanceId: m.instanceId
+  }))
+}
+
+/**
+ * 批量建议可用端口（替换被占用的端口）
+ * @param excludePorts 需要排除的端口（用户已选择的未冲突端口）
+ * @param checkBothProtocols 是否同时检查 TCP 和 UDP（Both 模式）
+ */
+export async function suggestAvailablePorts(
+  hostId: number,
+  count: number,
+  protocol: 'tcp' | 'udp',
+  excludePorts: number[] = [],
+  checkBothProtocols: boolean = false
+): Promise<number[]> {
+  const host = await getHostById(hostId)
+  if (!host || !host.nat_port_start || !host.nat_port_end) {
+    return []
+  }
+
+  const portStart = host.nat_port_start
+  const portEnd = host.nat_port_end
+
+  // 获取该宿主机已使用的端口
+  const usedPorts = new Set<number>()
+  
+  if (checkBothProtocols) {
+    // Both 模式：同时检查 TCP 和 UDP
+    const [tcpMappings, udpMappings] = await Promise.all([
+      prisma.portMapping.findMany({
+        where: { hostId, protocol: 'tcp' },
+        select: { publicPort: true }
+      }),
+      prisma.portMapping.findMany({
+        where: { hostId, protocol: 'udp' },
+        select: { publicPort: true }
+      })
+    ])
+    tcpMappings.forEach(m => usedPorts.add(m.publicPort))
+    udpMappings.forEach(m => usedPorts.add(m.publicPort))
+  } else {
+    // 单协议模式
+    const usedMappings = await prisma.portMapping.findMany({
+      where: { hostId, protocol },
+      select: { publicPort: true }
+    })
+    usedMappings.forEach(m => usedPorts.add(m.publicPort))
+  }
+  
+  // 将排除端口也加入已使用集合
+  excludePorts.forEach(p => usedPorts.add(p))
+
+  // 收集所有可用端口
+  const availablePorts: number[] = []
+  for (let port = portStart; port <= portEnd; port++) {
+    if (!usedPorts.has(port)) {
+      availablePorts.push(port)
+    }
+  }
+
+  // 如果可用端口不足，返回所有可用的
+  if (availablePorts.length <= count) {
+    return availablePorts
+  }
+
+  // 顺序返回指定数量的可用端口（不随机，方便用户理解）
+  return availablePorts.slice(0, count)
+}
+
+/**
+ * 批量创建端口映射
+ */
+export async function createPortMappingsBatch(data: Array<{
+  instanceId: number
+  hostId: number
+  protocol: 'tcp' | 'udp'
+  publicPort: number
+  privatePort: number
+  remark?: string
+}>): Promise<number[]> {
+  const results = await prisma.$transaction(
+    data.map(item => 
+      prisma.portMapping.create({
+        data: {
+          instanceId: item.instanceId,
+          hostId: item.hostId,
+          protocol: item.protocol,
+          publicPort: item.publicPort,
+          privatePort: item.privatePort,
+          remark: item.remark || null
+        }
+      })
+    )
+  )
+
+  return results.map(r => r.id)
+}
diff --git a/server/src/db/prisma.ts b/server/src/db/prisma.ts
new file mode 100644
index 0000000..9b1195f
--- /dev/null
+++ b/server/src/db/prisma.ts
@@ -0,0 +1,186 @@
+/**
+ * Prisma Client 单例
+ * 用于数据库操作
+ */
+
+// 确保环境变量被加载
+import 'dotenv/config'
+
+import { PrismaClient } from '@prisma/client'
+import { Pool } from 'pg'
+import { PrismaPg } from '@prisma/adapter-pg'
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined
+}
+
+const CURRENT_NETWORK_MODES = ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_only', 'ipv6_nat'] as const
+const LEGACY_NETWORK_MODE_MAP: Record<string, (typeof CURRENT_NETWORK_MODES)[number]> = {
+  nat: 'nat',
+  nat_ipv6: 'nat_ipv6',
+  ipv4: 'nat',
+  ipv6: 'nat_ipv6',
+  dual: 'nat_ipv6',
+  ipv4_ipv6: 'nat_ipv6',
+  nat_ipv6_nat: 'nat_ipv6_nat',
+  ipv6_nat: 'ipv6_nat',
+  ipv6_only: 'ipv6_only'
+}
+
+// 验证 DATABASE_URL
+if (!process.env.DATABASE_URL) {
+  throw new Error('DATABASE_URL 环境变量未设置')
+}
+
+// 创建 PostgreSQL 连接池
+// 优化配置以提高性能和稳定性
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  // 连接池大小：根据应用负载调整
+  max: parseInt(process.env.DB_POOL_MAX || '20', 10), // 最大连接数
+  min: parseInt(process.env.DB_POOL_MIN || '5', 10),  // 最小连接数
+  // 连接超时
+  connectionTimeoutMillis: parseInt(process.env.DB_CONNECTION_TIMEOUT || '5000', 10),
+  // 空闲连接超时（30秒）
+  idleTimeoutMillis: parseInt(process.env.DB_IDLE_TIMEOUT || '30000', 10),
+  // 语句超时（30秒）
+  statement_timeout: parseInt(process.env.DB_STATEMENT_TIMEOUT || '30000', 10),
+  // 查询超时（30秒）
+  query_timeout: parseInt(process.env.DB_QUERY_TIMEOUT || '30000', 10),
+})
+
+async function normalizeLegacyNetworkModes(dbPool: Pool): Promise<void> {
+  const enumValuesResult = await dbPool.query<{ enumlabel: string }>(`
+    SELECT e.enumlabel
+    FROM pg_type t
+    JOIN pg_enum e ON t.oid = e.enumtypid
+    WHERE t.typname = 'NetworkMode'
+    ORDER BY e.enumsortorder
+  `)
+
+  if (enumValuesResult.rows.length === 0) {
+    return
+  }
+
+  const initialEnumValues = enumValuesResult.rows.map(row => row.enumlabel)
+
+  const dependentColumnsResult = await dbPool.query<{
+    table_schema: string
+    table_name: string
+    column_name: string
+  }>(`
+    SELECT table_schema, table_name, column_name
+    FROM information_schema.columns
+    WHERE udt_schema = 'public'
+      AND udt_name = 'NetworkMode'
+    ORDER BY table_schema, table_name, ordinal_position
+  `)
+
+  if (dependentColumnsResult.rows.length === 0) {
+    return
+  }
+
+  const quoteIdent = (value: string): string => `"${value.replace(/"/g, '""')}"`
+  const legacyModeValues = Object.keys(LEGACY_NETWORK_MODE_MAP).filter(mode => !CURRENT_NETWORK_MODES.includes(mode as (typeof CURRENT_NETWORK_MODES)[number]))
+  const legacyModesSql = legacyModeValues.map(mode => `'${mode}'`).join(', ')
+  const hasPackagesNetworkModeColumn = dependentColumnsResult.rows.some(column =>
+    column.table_schema === 'public' &&
+    column.table_name === 'packages' &&
+    column.column_name === 'network_mode'
+  )
+  const hasInstancesNetworkModeColumn = dependentColumnsResult.rows.some(column =>
+    column.table_schema === 'public' &&
+    column.table_name === 'instances' &&
+    column.column_name === 'network_mode'
+  )
+
+  for (const mode of CURRENT_NETWORK_MODES) {
+    if (!initialEnumValues.includes(mode)) {
+      await dbPool.query(`ALTER TYPE "NetworkMode" ADD VALUE IF NOT EXISTS '${mode}'`)
+    }
+  }
+
+  for (const column of dependentColumnsResult.rows) {
+    const qualifiedColumn = `${quoteIdent(column.table_schema)}.${quoteIdent(column.table_name)}`
+    const columnName = quoteIdent(column.column_name)
+
+    await dbPool.query(`
+      UPDATE ${qualifiedColumn}
+      SET ${columnName} = CASE ${columnName}::text
+        WHEN 'ipv4' THEN 'nat'::"NetworkMode"
+        WHEN 'ipv6' THEN 'nat_ipv6'::"NetworkMode"
+        WHEN 'dual' THEN 'nat_ipv6'::"NetworkMode"
+        WHEN 'ipv4_ipv6' THEN 'nat_ipv6'::"NetworkMode"
+        WHEN 'nat_ipv6_nat' THEN 'nat_ipv6_nat'::"NetworkMode"
+        WHEN 'ipv6_nat' THEN 'ipv6_nat'::"NetworkMode"
+        WHEN 'ipv6_only' THEN 'ipv6_only'::"NetworkMode"
+        ELSE ${columnName}
+      END
+      WHERE ${columnName}::text IN (${legacyModesSql})
+    `)
+  }
+
+  if (hasPackagesNetworkModeColumn) {
+    await dbPool.query(`ALTER TABLE "packages" ALTER COLUMN "network_mode" SET DEFAULT 'nat'`)
+  }
+  if (hasInstancesNetworkModeColumn) {
+    await dbPool.query(`ALTER TABLE "instances" ALTER COLUMN "network_mode" SET DEFAULT 'nat'`)
+  }
+
+  const modeSnapshots = await Promise.all(
+    dependentColumnsResult.rows.map(async column => {
+      const qualifiedColumn = `${quoteIdent(column.table_schema)}.${quoteIdent(column.table_name)}`
+      const columnName = quoteIdent(column.column_name)
+      const result = await dbPool.query<{ network_mode: string; count: string }>(`
+        SELECT ${columnName}::text AS network_mode, COUNT(*)::text AS count
+        FROM ${qualifiedColumn}
+        GROUP BY ${columnName}::text
+        ORDER BY ${columnName}::text
+      `)
+
+      return {
+        table: `${column.table_schema}.${column.table_name}.${column.column_name}`,
+        modes: result.rows.map(row => `${row.network_mode}(${row.count})`).join(', ') || 'none'
+      }
+    })
+  )
+
+  console.warn('[Prisma] Normalized legacy NetworkMode values', {
+    enumValuesBefore: initialEnumValues,
+    dependentColumns: modeSnapshots,
+    mapping: LEGACY_NETWORK_MODE_MAP
+  })
+}
+
+await normalizeLegacyNetworkModes(pool)
+
+// 创建 Prisma PostgreSQL 适配器
+const adapter = new PrismaPg(pool)
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient({
+  adapter,
+  // 开发环境也只记录错误，减少日志噪音
+  // 如需调试查询，可设置环境变量 PRISMA_LOG=query,error,warn
+  log: process.env.PRISMA_LOG
+    ? (process.env.PRISMA_LOG.split(',') as ('query' | 'error' | 'warn' | 'info')[])
+    : ['error'],
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = prisma
+}
+
+export function getDbPoolStats(): {
+  totalCount: number
+  idleCount: number
+  waitingCount: number
+} {
+  return {
+    totalCount: pool.totalCount,
+    idleCount: pool.idleCount,
+    waitingCount: pool.waitingCount
+  }
+}
+
+export default prisma
+
diff --git a/server/src/db/proxy-sites.ts b/server/src/db/proxy-sites.ts
new file mode 100644
index 0000000..afbfe75
--- /dev/null
+++ b/server/src/db/proxy-sites.ts
@@ -0,0 +1,229 @@
+/**
+ * 反代站点数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { ProxySiteStatus } from '@prisma/client'
+import { isIpLiteral } from '../lib/network-address.js'
+
+export interface CreateProxySiteData {
+  instanceId: number
+  hostId: number
+  domain: string
+  targetPort: number
+  httpsEnabled?: boolean
+  remark?: string
+}
+
+/**
+ * 创建反代站点
+ */
+export async function createProxySite(data: CreateProxySiteData) {
+  return prisma.proxySite.create({
+    data: {
+      instanceId: data.instanceId,
+      hostId: data.hostId,
+      domain: data.domain,
+      targetPort: data.targetPort,
+      httpsEnabled: data.httpsEnabled ?? true,
+      remark: data.remark || null,
+      status: 'pending',
+      enabled: true
+    }
+  })
+}
+
+/**
+ * 获取实例的反代站点列表
+ */
+export async function getProxySitesByInstanceId(instanceId: number) {
+  return prisma.proxySite.findMany({
+    where: { instanceId },
+    orderBy: { createdAt: 'desc' }
+  })
+}
+
+/**
+ * 获取宿主机的所有反代站点
+ */
+export async function getProxySitesByHostId(hostId: number) {
+  return prisma.proxySite.findMany({
+    where: { hostId },
+    include: {
+      instance: {
+        select: {
+          id: true,
+          name: true,
+          ipv4: true,
+          status: true
+        }
+      }
+    },
+    orderBy: { createdAt: 'desc' }
+  })
+}
+
+/**
+ * 获取反代站点详情
+ */
+export async function getProxySiteById(id: number) {
+  return prisma.proxySite.findUnique({
+    where: { id },
+    include: {
+      instance: {
+        select: {
+          id: true,
+          name: true,
+          ipv4: true,
+          hostId: true,
+          userId: true,
+          status: true,
+          suspendReason: true
+        }
+      },
+      host: {
+        select: {
+          id: true,
+          name: true,
+          natPublicIp: true,
+          ipAddress: true,
+          caddyEnabled: true,
+          caddyUsername: true,
+          caddyPassword: true,
+          caddyPort: true
+        }
+      }
+    }
+  })
+}
+
+/**
+ * 通过域名查找反代站点
+ */
+export async function getProxySiteByDomain(hostId: number, domain: string) {
+  return prisma.proxySite.findUnique({
+    where: {
+      hostId_domain: {
+        hostId,
+        domain
+      }
+    }
+  })
+}
+
+/**
+ * 更新反代站点状态
+ */
+export async function updateProxySiteStatus(
+  id: number,
+  status: ProxySiteStatus,
+  error?: string | null,
+  enabled?: boolean
+) {
+  const data: { status: ProxySiteStatus; error: string | null; enabled?: boolean } = {
+    status,
+    error: error ?? null
+  }
+  
+  // 可选更新 enabled 字段
+  if (enabled !== undefined) {
+    data.enabled = enabled
+  }
+  
+  return prisma.proxySite.update({
+    where: { id },
+    data
+  })
+}
+
+/**
+ * 更新反代站点配置
+ */
+export async function updateProxySite(
+  id: number,
+  data: {
+    targetPort?: number
+    httpsEnabled?: boolean
+    remark?: string | null
+    status?: ProxySiteStatus
+    error?: string | null
+  }
+) {
+  return prisma.proxySite.update({
+    where: { id },
+    data
+  })
+}
+
+/**
+ * 切换反代站点启用状态
+ */
+export async function toggleProxySiteEnabled(id: number, enabled: boolean) {
+  return prisma.proxySite.update({
+    where: { id },
+    data: { enabled }
+  })
+}
+
+/**
+ * 删除反代站点
+ */
+export async function deleteProxySite(id: number) {
+  return prisma.proxySite.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 检查域名是否已被使用
+ */
+export async function isDomainUsed(hostId: number, domain: string): Promise<boolean> {
+  const existing = await prisma.proxySite.findUnique({
+    where: {
+      hostId_domain: {
+        hostId,
+        domain
+      }
+    }
+  })
+  return existing !== null
+}
+
+/**
+ * 验证域名格式（不允许泛域名）
+ */
+export function isValidDomain(domain: string): boolean {
+  // 不允许泛域名（以 * 开头）
+  if (domain.startsWith('*')) {
+    return false
+  }
+  
+  // 基本域名格式验证
+  const domainRegex = /^(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.[A-Za-z0-9-]{1,63})*\.[A-Za-z]{2,}$/
+  return domainRegex.test(domain)
+}
+
+/**
+ * 判断是否为 IP 地址
+ */
+export function isIpAddress(value: string): boolean {
+  return isIpLiteral(value)
+}
+
+/**
+ * 统计实例的站点数量
+ */
+export async function getProxySiteCountByInstance(instanceId: number): Promise<number> {
+  return prisma.proxySite.count({
+    where: { instanceId }
+  })
+}
+
+/**
+ * 统计宿主机的站点数量
+ */
+export async function getProxySiteCountByHost(hostId: number): Promise<number> {
+  return prisma.proxySite.count({
+    where: { hostId }
+  })
+}
diff --git a/server/src/db/quota-operations.ts b/server/src/db/quota-operations.ts
new file mode 100644
index 0000000..9f892fb
--- /dev/null
+++ b/server/src/db/quota-operations.ts
@@ -0,0 +1,559 @@
+/**
+ * 配额操作相关数据库操作
+ * 使用 Prisma ORM
+ * 
+ * 新配额系统：控制用户可拥有的资源数量
+ * - hostLimit/hostUsed: 宿主机数量
+ * - friendLimit/friendUsed: 好友数量
+ * - packageLimit/packageUsed: 套餐数量
+ * 注意：不再限制实例配额，用户可以创建无限数量的实例
+ * 
+ * 安全改进：
+ * - 所有 decrement 操作使用 Math.max(0, ...) 防止负数
+ * - 资源预占前先检查配额
+ * - 使用交互式事务确保数据一致性
+ */
+
+import { prisma } from './prisma.js'
+import { Prisma } from '@prisma/client'
+
+// 事务隔离级别配置
+// 使用 Serializable 隔离级别确保配额操作的一致性
+const QUOTA_TRANSACTION_OPTIONS = {
+  isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+  timeout: 10000, // 10秒超时
+} as const
+
+/**
+ * 直接设置用户配额使用量（覆盖原值）
+ * 用于配额重新计算等场景
+ */
+export async function updateUserQuotaUsed(userId: number, data: {
+  hostUsed?: number
+  friendUsed?: number
+  packageUsed?: number
+}): Promise<void> {
+  // 注意：不再限制实例配额，不再更新 instanceUsed
+  const updateData: {
+    hostUsed?: number
+    friendUsed?: number
+    packageUsed?: number
+  } = {}
+
+  if (data.hostUsed !== undefined) updateData.hostUsed = data.hostUsed
+  if (data.friendUsed !== undefined) updateData.friendUsed = data.friendUsed
+  if (data.packageUsed !== undefined) updateData.packageUsed = data.packageUsed
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.userQuota.update({
+    where: { userId },
+    data: updateData
+  })
+}
+
+/**
+ * 增量更新用户配额使用量
+ * 用于资源分配/释放等场景
+ */
+export async function incrementUserQuotaUsed(userId: number, data: {
+  hostUsed?: number
+  friendUsed?: number
+  packageUsed?: number
+}): Promise<void> {
+  // 注意：不再限制实例配额，不再更新 instanceUsed
+  const updateData: {
+    hostUsed?: { increment: number }
+    friendUsed?: { increment: number }
+    packageUsed?: { increment: number }
+  } = {}
+
+  if (data.hostUsed !== undefined) updateData.hostUsed = { increment: data.hostUsed }
+  if (data.friendUsed !== undefined) updateData.friendUsed = { increment: data.friendUsed }
+  if (data.packageUsed !== undefined) updateData.packageUsed = { increment: data.packageUsed }
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.userQuota.update({
+    where: { userId },
+    data: updateData
+  })
+}
+
+/**
+ * 减少用户配额使用量
+ */
+export async function decrementUserQuotaUsed(userId: number, type: 'host' | 'friend' | 'package'): Promise<void> {
+  // 注意：不再限制实例配额，不再更新 instanceUsed
+  const updateData: {
+    hostUsed?: { decrement: number }
+    friendUsed?: { decrement: number }
+    packageUsed?: { decrement: number }
+  } = {}
+
+  switch (type) {
+    case 'host':
+      updateData.hostUsed = { decrement: 1 }
+      break
+    case 'friend':
+      updateData.friendUsed = { decrement: 1 }
+      break
+    case 'package':
+      updateData.packageUsed = { decrement: 1 }
+      break
+  }
+
+  await prisma.userQuota.update({
+    where: { userId },
+    data: updateData
+  })
+}
+
+/**
+ * 资源预占 - 事务性地预扣配额和更新宿主机资源
+ * 新系统：只更新实例数量和宿主机资源
+ * 
+ * 安全改进：
+ * - 使用交互式事务而非数组事务
+ * - 显式指定 Serializable 隔离级别
+ * - 预占前检查配额边界
+ */
+export async function reserveResources(options: {
+  hostId: number
+  cpu: number
+  memory: number
+  disk: number
+  portCount?: number
+}): Promise<void> {
+  const { hostId, cpu, memory, disk, portCount = 0 } = options
+
+  // 使用交互式事务 + Serializable 隔离级别确保一致性
+  await prisma.$transaction(async (tx) => {
+    // 注意：不再限制用户的实例配额，只检查宿主机资源
+
+    // 检查并更新宿主机资源使用量
+    // 注意：使用 cpuAllowanceMax/memoryMax/storageSize（用户配置的配额上限）
+    // 而不是 cpuTotal/memoryTotal/diskTotal（物理资源，可能未同步）
+    const host = await tx.host.findUnique({
+      where: { id: hostId },
+      select: {
+        cpuAllowanceMax: true,  // CPU 配额上限
+        memoryMax: true,        // 内存配额上限
+        storageSize: true,      // 存储池大小 (GB)
+        cpuUsed: true,
+        memoryUsed: true,
+        diskUsed: true,
+        natPortStart: true,
+        natPortEnd: true,
+        natPortsUsedCount: true
+      }
+    })
+
+    if (!host) {
+      throw new Error('Host not found')
+    }
+
+    // 检查资源是否超限（与 selectAvailableHost 逻辑保持一致）
+    const cpuLimit = host.cpuAllowanceMax || 0
+    const memoryLimit = host.memoryMax || 0
+
+    if (cpuLimit > 0 && host.cpuUsed + cpu > cpuLimit) {
+      throw new Error(`Host CPU exceeded: ${host.cpuUsed + cpu}/${cpuLimit}`)
+    }
+    if (memoryLimit > 0 && host.memoryUsed + memory > memoryLimit) {
+      throw new Error(`Host memory exceeded: ${host.memoryUsed + memory}/${memoryLimit}`)
+    }
+    // 磁盘配额检查已移除：不再限制磁盘空间
+    // 计算端口总数
+    const natPortsTotal = (host.natPortStart && host.natPortEnd) 
+      ? (host.natPortEnd - host.natPortStart + 1) 
+      : 0
+    if (portCount > 0 && host.natPortsUsedCount + portCount > natPortsTotal) {
+      throw new Error(`Host ports exceeded: ${host.natPortsUsedCount + portCount}/${natPortsTotal}`)
+    }
+
+    await tx.host.update({
+      where: { id: hostId },
+      data: {
+        cpuUsed: host.cpuUsed + cpu,
+        memoryUsed: host.memoryUsed + memory,
+        diskUsed: host.diskUsed + disk,
+        ...(portCount > 0 ? {
+          natPortsUsedCount: host.natPortsUsedCount + portCount
+        } : {})
+      }
+    })
+  }, QUOTA_TRANSACTION_OPTIONS)
+}
+
+/**
+ * 资源回滚 - 释放预占的资源
+ * 
+ * 安全改进：
+ * - 使用 Math.max(0, ...) 确保不会出现负数
+ * - 显式指定 Serializable 隔离级别
+ */
+export async function rollbackResources(options: {
+  hostId: number
+  cpu: number
+  memory: number
+  disk: number
+  portCount?: number
+}): Promise<void> {
+  const { hostId, cpu, memory, disk, portCount = 0 } = options
+
+  // 使用交互式事务 + Serializable 隔离级别
+  await prisma.$transaction(async (tx) => {
+    // 注意：不再限制用户的实例配额，只回滚宿主机资源
+
+    // 回滚宿主机资源使用量
+    const host = await tx.host.findUnique({
+      where: { id: hostId },
+      select: {
+        cpuUsed: true,
+        memoryUsed: true,
+        diskUsed: true,
+        natPortsUsedCount: true
+      }
+    })
+
+    if (host) {
+      await tx.host.update({
+        where: { id: hostId },
+        data: {
+          cpuUsed: Math.max(0, host.cpuUsed - cpu),
+          memoryUsed: Math.max(0, host.memoryUsed - memory),
+          diskUsed: Math.max(0, host.diskUsed - disk),
+          ...(portCount > 0 ? {
+            natPortsUsedCount: Math.max(0, host.natPortsUsedCount - portCount)
+          } : {})
+        }
+      })
+    }
+  }, QUOTA_TRANSACTION_OPTIONS)
+}
+
+/**
+ * 计算用户配额使用量（新配额系统）
+ */
+export async function calculateUserQuotaUsed(userId: number): Promise<{
+  hostUsed: number
+  friendUsed: number
+  packageUsed: number
+}> {
+  // 计算宿主机数量
+  const hostUsed = await prisma.host.count({
+    where: { userId }
+  })
+
+  // 注意：不再计算实例数量，因为不再限制用户的实例配额
+
+  // 计算好友数量（已接受的好友关系）
+  const friendUsed = await prisma.friendship.count({
+    where: {
+      OR: [
+        { userId, status: 'accepted' },
+        { friendId: userId, status: 'accepted' }
+      ]
+    }
+  })
+
+  // 计算套餐数量
+  const packageUsed = await prisma.package.count({
+    where: { userId }
+  })
+
+  return {
+    hostUsed,
+    friendUsed,
+    packageUsed
+  }
+}
+
+/**
+ * 检查宿主机配额
+ */
+export async function checkHostQuota(userId: number): Promise<{
+  allowed: boolean
+  current: number
+  limit: number
+  message?: string
+}> {
+  const quota = await prisma.userQuota.findUnique({
+    where: { userId },
+    select: {
+      hostLimit: true,
+      hostUsed: true
+    }
+  })
+
+  if (!quota) {
+    return { allowed: false, current: 0, limit: 0, message: 'User quota not found' }
+  }
+
+  // 如果配额为 0，表示功能未授权
+  if (quota.hostLimit === 0) {
+    return {
+      allowed: false,
+      current: quota.hostUsed,
+      limit: quota.hostLimit,
+      message: 'Host feature is not authorized. Please contact administrator.'
+    }
+  }
+
+  if (quota.hostUsed >= quota.hostLimit) {
+    return {
+      allowed: false,
+      current: quota.hostUsed,
+      limit: quota.hostLimit,
+      message: `Host quota full (${quota.hostUsed}/${quota.hostLimit})`
+    }
+  }
+
+  return { allowed: true, current: quota.hostUsed, limit: quota.hostLimit }
+}
+
+/**
+ * 检查实例配额
+ * @deprecated 已删除实例配额限制，此函数不再需要
+ * 注意：不再限制用户的实例配额，用户可以创建无限数量的实例
+ */
+
+/**
+ * 检查好友配额
+ */
+export async function checkFriendQuota(userId: number): Promise<{
+  allowed: boolean
+  current: number
+  limit: number
+  message?: string
+}> {
+  const quota = await prisma.userQuota.findUnique({
+    where: { userId },
+    select: {
+      friendLimit: true,
+      friendUsed: true
+    }
+  })
+
+  if (!quota) {
+    return { allowed: false, current: 0, limit: 0, message: 'User quota not found' }
+  }
+
+  // 如果配额为 0，表示功能未授权
+  if (quota.friendLimit === 0) {
+    return {
+      allowed: false,
+      current: quota.friendUsed,
+      limit: quota.friendLimit,
+      message: 'Friend feature is not authorized. Please contact administrator.'
+    }
+  }
+
+  if (quota.friendUsed >= quota.friendLimit) {
+    return {
+      allowed: false,
+      current: quota.friendUsed,
+      limit: quota.friendLimit,
+      message: `Friend quota full (${quota.friendUsed}/${quota.friendLimit})`
+    }
+  }
+
+  return { allowed: true, current: quota.friendUsed, limit: quota.friendLimit }
+}
+
+/**
+ * 检查套餐配额
+ */
+export async function checkPackageQuota(userId: number): Promise<{
+  allowed: boolean
+  current: number
+  limit: number
+  message?: string
+}> {
+  const quota = await prisma.userQuota.findUnique({
+    where: { userId },
+    select: {
+      packageLimit: true,
+      packageUsed: true
+    }
+  })
+
+  if (!quota) {
+    return { allowed: false, current: 0, limit: 0, message: 'User quota not found' }
+  }
+
+  // 如果配额为 0，表示功能未授权
+  if (quota.packageLimit === 0) {
+    return {
+      allowed: false,
+      current: quota.packageUsed,
+      limit: quota.packageLimit,
+      message: 'Package feature is not authorized. Please contact administrator.'
+    }
+  }
+
+  if (quota.packageUsed >= quota.packageLimit) {
+    return {
+      allowed: false,
+      current: quota.packageUsed,
+      limit: quota.packageLimit,
+      message: `Package quota full (${quota.packageUsed}/${quota.packageLimit})`
+    }
+  }
+
+  return { allowed: true, current: quota.packageUsed, limit: quota.packageLimit }
+}
+
+/**
+ * 检查实例端口配额（基于实例的 portLimit）
+ */
+export async function checkPortQuota(_userId: number, instanceId: number): Promise<{
+  allowed: boolean
+  current: number
+  limit: number
+  message?: string
+}> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      portLimit: true,
+      _count: {
+        select: { portMappings: true }
+      }
+    }
+  })
+
+  if (!instance) {
+    return { allowed: false, current: 0, limit: 0, message: 'Instance not found' }
+  }
+
+  const limit = instance.portLimit ?? 0
+  const current = instance._count.portMappings
+
+  if (limit === 0) {
+    return {
+      allowed: false,
+      current,
+      limit: 0,
+      message: 'Port quota not allocated for this instance'
+    }
+  }
+
+  if (current >= limit) {
+    return {
+      allowed: false,
+      current,
+      limit,
+      message: `Instance port quota full (${current}/${limit})`
+    }
+  }
+
+  return { allowed: true, current, limit }
+}
+
+/**
+ * 检查实例快照配额（基于实例的 snapshotLimit）
+ */
+export async function checkSnapshotQuota(_userId: number, instanceId: number): Promise<{
+  allowed: boolean
+  current: number
+  limit: number
+  message?: string
+}> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      snapshotLimit: true,
+      _count: {
+        select: { snapshots: true }
+      }
+    }
+  })
+
+  if (!instance) {
+    return { allowed: false, current: 0, limit: 0, message: 'Instance not found' }
+  }
+
+  const limit = instance.snapshotLimit ?? 0
+  const current = instance._count.snapshots
+
+  if (limit === 0) {
+    return {
+      allowed: false,
+      current,
+      limit: 0,
+      message: 'Snapshot quota not allocated for this instance'
+    }
+  }
+
+  if (current >= limit) {
+    return {
+      allowed: false,
+      current,
+      limit,
+      message: `Instance snapshot quota full (${current}/${limit})`
+    }
+  }
+
+  return { allowed: true, current, limit }
+}
+
+/**
+ * 检查实例备份配额（基于实例的 backupLimit）
+ */
+export async function checkBackupQuota(_userId: number, instanceId: number): Promise<{
+  allowed: boolean
+  current: number
+  limit: number
+  message?: string
+}> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      backupLimit: true
+    }
+  })
+
+  if (!instance) {
+    return { allowed: false, current: 0, limit: 0, message: 'Instance not found' }
+  }
+
+  const limit = instance.backupLimit ?? 0
+
+  // 计算当前备份数（排除已删除的）
+  const current = await prisma.backup.count({
+    where: {
+      instanceId,
+      status: { not: 'deleted' }
+    }
+  })
+
+  if (limit === 0) {
+    return {
+      allowed: false,
+      current,
+      limit: 0,
+      message: 'Backup quota not allocated for this instance'
+    }
+  }
+
+  if (current >= limit) {
+    return {
+      allowed: false,
+      current,
+      limit,
+      message: `Instance backup quota full (${current}/${limit})`
+    }
+  }
+
+  return { allowed: true, current, limit }
+}
+
+/**
+ * 同步用户配额使用量（重新计算）
+ */
+export async function syncUserQuotaUsed(userId: number): Promise<void> {
+  const used = await calculateUserQuotaUsed(userId)
+  await updateUserQuotaUsed(userId, used)
+}
diff --git a/server/src/db/recharge-records.ts b/server/src/db/recharge-records.ts
new file mode 100644
index 0000000..3d50308
--- /dev/null
+++ b/server/src/db/recharge-records.ts
@@ -0,0 +1,532 @@
+/**
+ * 充值记录数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { RechargeRecord, RechargeStatus } from '@prisma/client'
+import { nanoid } from 'nanoid'
+import { getTodayRange } from '../lib/timezone.js'
+
+// ==================== 类型定义 ====================
+
+export interface CreateRechargeOrderInput {
+  orderNo?: string
+  userId: number
+  providerId: number
+  amount: number
+  actualAmount?: number
+  fee?: number
+  paymentMethod?: string
+  ip?: string
+  userAgent?: string
+  expiredAt?: Date
+  providerConfigSnapshot?: string | null
+  paymentDetails?: Record<string, unknown> | null
+}
+
+export interface RechargeRecordWithProvider extends RechargeRecord {
+  provider: {
+    id: number
+    name: string
+    type: string
+  }
+}
+
+// ==================== 订单号生成 ====================
+
+/**
+ * 生成订单号（时间戳 + 随机字符）
+ */
+export function generateOrderNo(): string {
+  const timestamp = Date.now().toString(36)
+  const random = nanoid(8)
+  return `R${timestamp}${random}`.toUpperCase()
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 根据订单号获取充值记录
+ */
+export async function getRechargeRecordByOrderNo(orderNo: string): Promise<RechargeRecordWithProvider | null> {
+  return prisma.rechargeRecord.findUnique({
+    where: { orderNo },
+    include: {
+      provider: {
+        select: { id: true, name: true, type: true }
+      }
+    }
+  }) as Promise<RechargeRecordWithProvider | null>
+}
+
+/**
+ * 根据第三方交易号获取充值记录
+ */
+export async function getRechargeRecordByTradeNo(tradeNo: string): Promise<RechargeRecord | null> {
+  return prisma.rechargeRecord.findFirst({
+    where: { tradeNo }
+  })
+}
+
+/**
+ * 根据 ID 获取充值记录
+ */
+export async function getRechargeRecordById(id: number): Promise<RechargeRecordWithProvider | null> {
+  return prisma.rechargeRecord.findUnique({
+    where: { id },
+    include: {
+      provider: {
+        select: { id: true, name: true, type: true }
+      }
+    }
+  }) as Promise<RechargeRecordWithProvider | null>
+}
+
+/**
+ * 获取用户的充值记录（分页）
+ */
+export async function getUserRechargeRecords(
+  userId: number,
+  options: { page?: number; pageSize?: number; status?: RechargeStatus } = {}
+): Promise<{ records: RechargeRecordWithProvider[]; total: number; page: number; pageSize: number }> {
+  const page = options.page || 1
+  const pageSize = Math.min(options.pageSize || 20, 50)
+  const skip = (page - 1) * pageSize
+
+  const where: Record<string, unknown> = { userId }
+  if (options.status) {
+    where.status = options.status
+  }
+
+  const [records, total] = await Promise.all([
+    prisma.rechargeRecord.findMany({
+      where,
+      include: {
+        provider: {
+          select: { id: true, name: true, type: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.rechargeRecord.count({ where })
+  ])
+
+  return {
+    records: records as RechargeRecordWithProvider[],
+    total,
+    page,
+    pageSize
+  }
+}
+
+/**
+ * 获取所有充值记录（管理员，分页）
+ */
+export async function getAllRechargeRecords(
+  options: { page?: number; pageSize?: number; status?: RechargeStatus; userId?: number } = {}
+): Promise<{ records: RechargeRecordWithProvider[]; total: number; page: number; pageSize: number }> {
+  const page = options.page || 1
+  const pageSize = Math.min(options.pageSize || 20, 50)
+  const skip = (page - 1) * pageSize
+
+  const where: Record<string, unknown> = {}
+  if (options.status) where.status = options.status
+  if (options.userId) where.userId = options.userId
+
+  const [records, total] = await Promise.all([
+    prisma.rechargeRecord.findMany({
+      where,
+      include: {
+        provider: {
+          select: { id: true, name: true, type: true }
+        },
+        user: {
+          select: { id: true, username: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.rechargeRecord.count({ where })
+  ])
+
+  return {
+    records: records as unknown as RechargeRecordWithProvider[],
+    total,
+    page,
+    pageSize
+  }
+}
+
+// ==================== 创建操作 ====================
+
+/**
+ * 创建充值订单
+ */
+export async function createRechargeOrder(input: CreateRechargeOrderInput): Promise<RechargeRecord> {
+  const orderNo = input.orderNo || generateOrderNo()
+  const expiredAt = input.expiredAt ?? new Date(Date.now() + 30 * 60 * 1000)
+
+  return prisma.rechargeRecord.create({
+    data: {
+      userId: input.userId,
+      providerId: input.providerId,
+      orderNo,
+      amount: input.amount,
+      actualAmount: input.actualAmount,
+      fee: input.fee || 0,
+      paymentMethod: input.paymentMethod,
+      status: 'pending',
+      ip: input.ip,
+      userAgent: input.userAgent,
+      expiredAt,
+      providerConfigSnapshot: input.providerConfigSnapshot,
+      paymentDetails: input.paymentDetails as any
+    }
+  })
+}
+
+// ==================== 更新操作 ====================
+
+/**
+ * 更新订单状态为已支付（处理中）
+ */
+export async function markRechargePaid(
+  orderNo: string,
+  tradeNo?: string
+): Promise<RechargeRecord> {
+  return prisma.rechargeRecord.update({
+    where: { orderNo },
+    data: {
+      status: 'paid',
+      tradeNo
+    }
+  })
+}
+
+/**
+ * 更新充值订单的支付元数据，不改变订单状态
+ */
+export async function updateRechargeOrderMetadata(
+  orderNo: string,
+  data: {
+    tradeNo?: string | null
+    callbackData?: Record<string, unknown>
+    paymentDetails?: Record<string, unknown>
+  }
+): Promise<RechargeRecord> {
+  const updateData: Record<string, unknown> = {}
+
+  if (data.tradeNo !== undefined) {
+    updateData.tradeNo = data.tradeNo
+  }
+
+  if (data.callbackData !== undefined) {
+    updateData.callbackData = data.callbackData as any
+    updateData.callbackAt = new Date()
+  }
+
+  if (data.paymentDetails !== undefined) {
+    updateData.paymentDetails = data.paymentDetails as any
+  }
+
+  return prisma.rechargeRecord.update({
+    where: { orderNo },
+    data: updateData
+  })
+}
+
+/**
+ * 完成充值（成功）
+ * 使用状态机 + 条件更新确保幂等性和并发安全
+ */
+export async function completeRecharge(
+  orderNo: string,
+  data: {
+    tradeNo?: string
+    callbackData?: Record<string, unknown>
+    actualAmount?: number
+    paymentDetails?: Record<string, unknown>
+  }
+): Promise<RechargeRecord> {
+  const record = await prisma.rechargeRecord.findUnique({
+    where: { orderNo }
+  })
+
+  if (!record) {
+    throw new Error('订单不存在')
+  }
+
+  // 幂等性处理：已完成的订单直接返回，不重复处理
+  if (record.status === 'completed') {
+    return record
+  }
+
+  // 已取消或失败的订单不能再完成
+  if (record.status === 'cancelled' || record.status === 'failed') {
+    throw new Error(`订单状态异常：${record.status}`)
+  }
+
+  // 使用事务确保原子性
+  const result = await prisma.$transaction(async (tx) => {
+    // 1. 使用条件更新确保并发安全（只有 pending 或 paid 状态可以变为 completed）
+    const updateResult = await tx.rechargeRecord.updateMany({
+      where: {
+        orderNo,
+        status: { in: ['pending', 'paid'] }  // 状态机：只有这两种状态可以转为 completed
+      },
+      data: {
+        status: 'completed',
+        tradeNo: data.tradeNo,
+        callbackData: data.callbackData as any,
+        callbackAt: new Date(),
+        completedAt: new Date(),
+        actualAmount: data.actualAmount ?? record.actualAmount,  // 使用 ?? 避免 0 值被误判
+        paymentDetails: (data.paymentDetails as any) ?? record.paymentDetails
+      }
+    })
+
+    // 如果更新了 0 条记录，说明状态已被其他进程改变
+    if (updateResult.count === 0) {
+      // 重新查询订单状态
+      const currentRecord = await tx.rechargeRecord.findUnique({
+        where: { orderNo }
+      })
+      // 如果已经是 completed，说明是并发完成，返回成功（幂等）
+      if (currentRecord && currentRecord.status === 'completed') {
+        return currentRecord
+      }
+      throw new Error('订单状态已变更，无法完成')
+    }
+
+    // 获取更新后的记录
+    const updatedRecord = await tx.rechargeRecord.findUnique({
+      where: { orderNo }
+    })
+
+    if (!updatedRecord) {
+      throw new Error('订单更新异常')
+    }
+
+    // 2. 增加用户余额（使用 ?? 避免 0 值被误判为 falsy）
+    const actualAmount = Number(data.actualAmount ?? record.actualAmount ?? record.amount)
+    await tx.user.update({
+      where: { id: record.userId },
+      data: { balance: { increment: actualAmount } }
+    })
+
+    // 3. 记录余额日志
+    const user = await tx.user.findUnique({
+      where: { id: record.userId },
+      select: { balance: true }
+    })
+
+    await tx.balanceLog.create({
+      data: {
+        userId: record.userId,
+        type: 'recharge',
+        amount: actualAmount,
+        balanceBefore: Number(user!.balance) - actualAmount,
+        balanceAfter: Number(user!.balance),
+        orderId: record.orderNo,
+        remark: `充值：${Number(record.amount)} 元`
+      }
+    })
+
+    // 4. 注释掉首次充值激活 AFF 推荐计划的逻辑
+    // 由于需求变更，AFF 推荐计划现在无需充值即可使用
+    // const userProfile = await tx.user.findUnique({
+    //   where: { id: record.userId },
+    //   select: { affActivatedAt: true }
+    // })
+    // if (!userProfile?.affActivatedAt) {
+    //   await tx.user.update({
+    //     where: { id: record.userId },
+    //     data: { affActivatedAt: new Date() }
+    //   })
+    // }
+
+    return updatedRecord
+  })
+
+  return result
+}
+
+/**
+ * 标记充值失败
+ */
+export async function failRecharge(
+  orderNo: string,
+  failReason: string,
+  callbackData?: Record<string, unknown>,
+  paymentDetails?: Record<string, unknown>
+): Promise<RechargeRecord> {
+  return prisma.rechargeRecord.update({
+    where: { orderNo },
+    data: {
+      status: 'failed',
+      failReason,
+      callbackData: callbackData as any,
+      callbackAt: new Date(),
+      paymentDetails: paymentDetails as any
+    }
+  })
+}
+
+/**
+ * 取消充值订单
+ */
+export async function cancelRecharge(
+  orderNo: string,
+  callbackData?: Record<string, unknown>,
+  paymentDetails?: Record<string, unknown>
+): Promise<RechargeRecord> {
+  return prisma.rechargeRecord.update({
+    where: { orderNo },
+    data: {
+      status: 'cancelled',
+      paymentDetails: paymentDetails as any,
+      ...(callbackData
+        ? {
+            callbackData: callbackData as any,
+            callbackAt: new Date()
+          }
+        : {})
+    }
+  })
+}
+
+/**
+ * 更新订单支付方式
+ */
+export async function updateRechargePaymentMethod(
+  orderNo: string,
+  paymentMethod: string
+): Promise<RechargeRecord> {
+  return prisma.rechargeRecord.update({
+    where: { orderNo },
+    data: { paymentMethod }
+  })
+}
+
+// ==================== 过期订单处理 ====================
+
+/**
+ * 获取已过期的待处理订单
+ */
+export async function getExpiredPendingOrders(): Promise<RechargeRecord[]> {
+  return prisma.rechargeRecord.findMany({
+    where: {
+      status: 'pending',
+      expiredAt: { lt: new Date() }
+    }
+  })
+}
+
+/**
+ * 批量过期订单（标记为取消）
+ */
+export async function expireOrders(orderNos: string[]): Promise<number> {
+  const result = await prisma.rechargeRecord.updateMany({
+    where: {
+      orderNo: { in: orderNos },
+      status: 'pending'
+    },
+    data: {
+      status: 'cancelled'
+    }
+  })
+  return result.count
+}
+
+// ==================== 统计查询 ====================
+
+/**
+ * 获取用户充值统计
+ */
+export async function getUserRechargeStats(userId: number): Promise<{
+  totalRecharge: number
+  totalCount: number
+  pendingCount: number
+}> {
+  const [totalResult, totalCount, pendingCount] = await Promise.all([
+    prisma.rechargeRecord.aggregate({
+      where: { userId, status: 'completed' },
+      _sum: { amount: true }
+    }),
+    prisma.rechargeRecord.count({
+      where: { userId, status: 'completed' }
+    }),
+    prisma.rechargeRecord.count({
+      where: { userId, status: 'pending' }
+    })
+  ])
+
+  return {
+    // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+    totalRecharge: totalResult._sum?.amount !== null && totalResult._sum?.amount !== undefined
+      ? parseFloat(String(totalResult._sum.amount))
+      : 0,
+    totalCount,
+    pendingCount
+  }
+}
+
+/**
+ * 获取系统充值统计（管理员）
+ */
+export async function getSystemRechargeStats(dateRange?: { start: Date; end: Date }): Promise<{
+  totalRecharge: number
+  totalCount: number
+  pendingAmount: number
+  pendingCount: number
+  todayRecharge: number
+  todayCount: number
+}> {
+  // 使用业务时区（Asia/Shanghai）计算日期边界
+  const { start: today, end: tomorrow } = getTodayRange()
+
+  const whereCompleted: Record<string, unknown> = { status: 'completed' }
+  if (dateRange) {
+    whereCompleted.completedAt = { gte: dateRange.start, lte: dateRange.end }
+  }
+
+  const [totalResult, totalCount, pendingResult, pendingCount, todayResult, todayCount] = await Promise.all([
+    prisma.rechargeRecord.aggregate({
+      where: whereCompleted,
+      _sum: { amount: true }
+    }),
+    prisma.rechargeRecord.count({ where: whereCompleted }),
+    prisma.rechargeRecord.aggregate({
+      where: { status: 'pending' },
+      _sum: { amount: true }
+    }),
+    prisma.rechargeRecord.count({ where: { status: 'pending' } }),
+    prisma.rechargeRecord.aggregate({
+      where: { status: 'completed', completedAt: { gte: today, lt: tomorrow } },
+      _sum: { amount: true }
+    }),
+    prisma.rechargeRecord.count({
+      where: { status: 'completed', completedAt: { gte: today, lt: tomorrow } }
+    })
+  ])
+
+  return {
+    // 注意：Prisma aggregate 返回的 Decimal 类型需要先转为字符串再转数字
+    totalRecharge: totalResult._sum?.amount !== null && totalResult._sum?.amount !== undefined
+      ? parseFloat(String(totalResult._sum.amount))
+      : 0,
+    totalCount,
+    pendingAmount: pendingResult._sum?.amount !== null && pendingResult._sum?.amount !== undefined
+      ? parseFloat(String(pendingResult._sum.amount))
+      : 0,
+    pendingCount,
+    todayRecharge: todayResult._sum?.amount !== null && todayResult._sum?.amount !== undefined
+      ? parseFloat(String(todayResult._sum.amount))
+      : 0,
+    todayCount
+  }
+}
diff --git a/server/src/db/redeem-codes.ts b/server/src/db/redeem-codes.ts
new file mode 100644
index 0000000..ed1f925
--- /dev/null
+++ b/server/src/db/redeem-codes.ts
@@ -0,0 +1,392 @@
+/**
+ * 系统兑换码数据库操作
+ * 宿主机所有者可以为其节点生成兑换码
+ */
+
+import { prisma } from './prisma.js'
+import type { RedeemCodeType } from '@prisma/client'
+import { Prisma } from '@prisma/client'
+import crypto from 'crypto'
+import { REDEEM_CODE_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from './advisory-locks.js'
+
+// 系统兑换码前缀
+const SYSTEM_CODE_PREFIX = 'h'
+
+// 签到系统使用的固定可选数值（不要修改）
+export const CODE_VALUES: Record<RedeemCodeType, number[]> = {
+  c: [1, 2, 3, 5],             // CPU: 1-5%
+  r: [2, 4, 6, 12],            // 内存: 2/4/6/12 MB
+  d: [16, 32, 64, 128],        // 硬盘: 16/32/64/128 MB
+  t: [1, 2, 3, 5],             // 流量: 1/2/3/5 GB
+  p: [100, 300, 500, 1000]     // 积分: 100/300/500/1000（仅签到使用）
+}
+
+// 宿主机兑换码的资源范围限制（允许用户自定义任意值）
+export const CODE_VALUE_RANGES: Record<RedeemCodeType, { min: number; max: number; unit: string }> = {
+  c: { min: 1, max: 100, unit: '%' },        // CPU: 1-100%
+  r: { min: 1, max: 65536, unit: 'MB' },     // 内存: 1MB - 64GB
+  d: { min: 1, max: 1048576, unit: 'MB' },   // 硬盘: 1MB - 1TB
+  t: { min: 1, max: 10240, unit: 'GB' },     // 流量: 1GB - 10TB
+  p: { min: 1, max: 100000, unit: '' }       // 积分: 1-100000（保留，宿主机不使用）
+}
+
+/**
+ * 验证兑换码数值是否在允许范围内（宿主机兑换码使用）
+ */
+export function isValidCodeValue(codeType: RedeemCodeType, value: number): boolean {
+  const range = CODE_VALUE_RANGES[codeType]
+  if (!range) return false
+  return Number.isInteger(value) && value >= range.min && value <= range.max
+}
+
+/**
+ * 生成系统兑换码
+ */
+function generateSystemCode(): string {
+  const randomPart = crypto.randomBytes(12).toString('base64url').slice(0, 18)
+  return `${SYSTEM_CODE_PREFIX}-${randomPart}`
+}
+
+/**
+ * 判断兑换码是否为系统码（非签到码）
+ */
+export function isSystemCode(code: string): boolean {
+  return code.startsWith(`${SYSTEM_CODE_PREFIX}-`)
+}
+
+/**
+ * 创建系统兑换码
+ */
+export async function createRedeemCode(data: {
+  hostId: number
+  createdById: number
+  codeType: RedeemCodeType
+  codeValue: number
+  maxUses?: number
+  expiresAt?: Date | null
+  remark?: string
+}) {
+  const code = generateSystemCode()
+
+  return prisma.redeemCode.create({
+    data: {
+      code,
+      hostId: data.hostId,
+      createdById: data.createdById,
+      codeType: data.codeType,
+      codeValue: data.codeValue,
+      maxUses: data.maxUses ?? 1,
+      expiresAt: data.expiresAt,
+      remark: data.remark
+    }
+  })
+}
+
+/**
+ * 批量创建一次性兑换码
+ */
+export async function createRedeemCodeBatch(data: {
+  hostId: number
+  createdById: number
+  codeType: RedeemCodeType
+  codeValue: number
+  count: number
+  expiresAt?: Date | null
+  remark?: string
+}): Promise<{ codes: string[]; batchId: string }> {
+  const codes: string[] = []
+  const createData = []
+  // 生成批次ID，同批次的兑换码每用户只能使用一张
+  const batchId = crypto.randomBytes(8).toString('hex')
+
+  for (let i = 0; i < data.count; i++) {
+    const code = generateSystemCode()
+    codes.push(code)
+    createData.push({
+      code,
+      hostId: data.hostId,
+      createdById: data.createdById,
+      codeType: data.codeType,
+      codeValue: data.codeValue,
+      maxUses: 1,
+      expiresAt: data.expiresAt,
+      remark: data.remark,
+      batchId
+    })
+  }
+
+  await prisma.redeemCode.createMany({ data: createData })
+  return { codes, batchId }
+}
+
+/**
+ * 获取宿主机的兑换码列表
+ */
+export async function getRedeemCodesByHost(
+  hostId: number,
+  options: {
+    limit?: number
+    offset?: number
+    enabled?: boolean
+  } = {}
+) {
+  const { limit = 50, offset = 0, enabled } = options
+
+  const where = {
+    hostId,
+    ...(enabled !== undefined ? { enabled } : {})
+  }
+
+  const [codes, total] = await Promise.all([
+    prisma.redeemCode.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      take: limit,
+      skip: offset,
+      include: {
+        createdBy: {
+          select: { id: true, username: true }
+        },
+        _count: {
+          select: { usages: true }
+        }
+      }
+    }),
+    prisma.redeemCode.count({ where })
+  ])
+
+  return {
+    codes: codes.map(c => ({
+      id: c.id,
+      code: c.code,
+      codeType: c.codeType,
+      codeValue: c.codeValue,
+      maxUses: c.maxUses,
+      usedCount: c.usedCount,
+      expiresAt: c.expiresAt?.toISOString() ?? null,
+      enabled: c.enabled,
+      remark: c.remark,
+      batchId: c.batchId,
+      createdBy: c.createdBy,
+      createdAt: c.createdAt.toISOString(),
+      isExpired: c.expiresAt ? c.expiresAt < new Date() : false,
+      isExhausted: c.usedCount >= c.maxUses
+    })),
+    total
+  }
+}
+
+/**
+ * 根据兑换码获取记录
+ */
+export async function getRedeemCodeByCode(code: string) {
+  return prisma.redeemCode.findUnique({
+    where: { code },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          userId: true
+        }
+      },
+      createdBy: {
+        select: { id: true, username: true }
+      }
+    }
+  })
+}
+
+/**
+ * 检查用户是否已使用过某个兑换码
+ */
+export async function hasUserUsedCode(redeemCodeId: number, userId: number): Promise<boolean> {
+  const usage = await prisma.redeemCodeUsage.findFirst({
+    where: { redeemCodeId, userId }
+  })
+  return !!usage
+}
+
+/**
+ * 检查用户是否已使用过同批次的其他兑换码
+ */
+export async function hasUserUsedBatch(batchId: string, userId: number): Promise<boolean> {
+  // 找出同批次的所有兑换码ID
+  const batchCodes = await prisma.redeemCode.findMany({
+    where: { batchId },
+    select: { id: true }
+  })
+
+  if (batchCodes.length === 0) return false
+
+  // 检查用户是否使用过其中任何一个
+  const usage = await prisma.redeemCodeUsage.findFirst({
+    where: {
+      redeemCodeId: { in: batchCodes.map(c => c.id) },
+      userId
+    }
+  })
+  return !!usage
+}
+
+/**
+ * 使用系统兑换码（原子操作，防止并发超兑）
+ * 
+ * 使用条件更新确保 usedCount < maxUses 才能成功更新
+ * 如果更新影响0行，说明已达上限或并发冲突
+ * 
+ * @throws Error 当兑换码已达上限或并发冲突时抛出错误
+ */
+export async function useSystemRedeemCode(
+  redeemCodeId: number,
+  userId: number,
+  instanceId: number,
+  batchId: string | null
+): Promise<void> {
+  const LOCK_RETRY_LIMIT = 10
+  const LOCK_RETRY_DELAY_MS = 50
+
+  for (let attempt = 0; attempt < LOCK_RETRY_LIMIT; attempt++) {
+    const completed = await prisma.$transaction(async (tx) => {
+      const locked = await tryAdvisoryTransactionLock(tx, REDEEM_CODE_LOCK_NAMESPACE, redeemCodeId)
+      if (!locked) return null
+
+      const existingUsage = await tx.redeemCodeUsage.findFirst({
+        where: { redeemCodeId, userId }
+      })
+      if (existingUsage) {
+        throw new Error('REDEEM_CODE_ALREADY_USED_BY_USER')
+      }
+
+      if (batchId) {
+        const existingBatchUsage = await tx.redeemCodeUsage.findFirst({
+          where: { userId, batchId }
+        })
+        if (existingBatchUsage) {
+          throw new Error('REDEEM_CODE_BATCH_LIMIT')
+        }
+      }
+
+      const result = await tx.$executeRaw`
+        UPDATE "redeem_codes" 
+        SET "used_count" = "used_count" + 1 
+        WHERE "id" = ${redeemCodeId} 
+          AND "used_count" < "max_uses"
+      `
+
+      if (result === 0) {
+        throw new Error('REDEEM_CODE_EXHAUSTED')
+      }
+
+      try {
+        await tx.redeemCodeUsage.create({
+          data: {
+            redeemCodeId,
+            userId,
+            instanceId,
+            batchId
+          }
+        })
+      } catch (error) {
+        if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2002' && batchId) {
+          throw new Error('REDEEM_CODE_BATCH_LIMIT')
+        }
+        throw error
+      }
+
+      return true
+    })
+
+    if (completed) {
+      return
+    }
+
+    await new Promise(resolve => setTimeout(resolve, LOCK_RETRY_DELAY_MS * (attempt + 1)))
+  }
+
+  throw new Error('REDEEM_CODE_BUSY')
+}
+
+/**
+ * 更新兑换码
+ */
+export async function updateRedeemCode(
+  id: number,
+  data: {
+    enabled?: boolean
+    remark?: string
+    maxUses?: number
+    expiresAt?: Date | null
+  }
+) {
+  return prisma.redeemCode.update({
+    where: { id },
+    data
+  })
+}
+
+/**
+ * 删除兑换码
+ */
+export async function deleteRedeemCode(id: number) {
+  return prisma.redeemCode.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 批量删除兑换码
+ */
+export async function deleteRedeemCodeBatch(ids: number[]) {
+  return prisma.redeemCode.deleteMany({
+    where: { id: { in: ids } }
+  })
+}
+
+/**
+ * 获取兑换码使用记录
+ */
+export async function getRedeemCodeUsages(
+  redeemCodeId: number,
+  options: { limit?: number; offset?: number } = {}
+) {
+  const { limit = 20, offset = 0 } = options
+
+  const [usages, total] = await Promise.all([
+    prisma.redeemCodeUsage.findMany({
+      where: { redeemCodeId },
+      orderBy: { usedAt: 'desc' },
+      take: limit,
+      skip: offset,
+      include: {
+        user: {
+          select: { id: true, username: true }
+        },
+        instance: {
+          select: { id: true, name: true }
+        }
+      }
+    }),
+    prisma.redeemCodeUsage.count({ where: { redeemCodeId } })
+  ])
+
+  return {
+    usages: usages.map(u => ({
+      id: u.id,
+      user: u.user,
+      instance: u.instance,
+      usedAt: u.usedAt.toISOString()
+    })),
+    total
+  }
+}
+
+/**
+ * 检查实例是否属于该宿主机
+ */
+export async function isInstanceBelongsToHost(instanceId: number, hostId: number): Promise<boolean> {
+  const instance = await prisma.instance.findFirst({
+    where: { id: instanceId, hostId }
+  })
+  return !!instance
+}
diff --git a/server/src/db/reset-database.ts b/server/src/db/reset-database.ts
new file mode 100644
index 0000000..0a0e284
--- /dev/null
+++ b/server/src/db/reset-database.ts
@@ -0,0 +1,142 @@
+/**
+ * 清空数据库所有表的数据
+ * 注意：此操作不可逆，请谨慎使用
+ */
+
+import { prisma } from './prisma.js'
+import { Pool } from 'pg'
+
+/**
+ * 清空所有表的数据（保留表结构）
+ * 按照外键依赖顺序删除，避免约束冲突
+ */
+export async function resetDatabase(): Promise<void> {
+  console.log('🗑️  开始清空数据库...')
+
+  try {
+    // 按照外键依赖顺序删除（从子表到父表）
+    // 注意：Prisma 不支持直接 TRUNCATE，使用 deleteMany
+
+    // 1. 删除所有子表数据（有外键依赖的表）
+    console.log('  删除日志数据...')
+    await prisma.log.deleteMany({})
+
+    console.log('  删除通知日志...')
+    await prisma.notificationLog.deleteMany({})
+
+    console.log('  删除通知渠道...')
+    await prisma.notificationChannel.deleteMany({})
+
+    console.log('  删除用户 OAuth 绑定...')
+    await prisma.userOAuthBinding.deleteMany({})
+
+    console.log('  删除 OAuth 配置...')
+    await prisma.oAuthConfig.deleteMany({})
+
+    console.log('  删除帮助文档...')
+    await prisma.helpArticle.deleteMany({})
+
+    console.log('  删除 SSH 密钥...')
+    await prisma.sshKey.deleteMany({})
+
+    console.log('  删除端口映射...')
+    await prisma.portMapping.deleteMany({})
+
+    console.log('  删除快照策略...')
+    await prisma.snapshotPolicy.deleteMany({})
+
+    console.log('  删除备份策略...')
+    await prisma.backupPolicy.deleteMany({})
+
+    console.log('  删除快照...')
+    await prisma.snapshot.deleteMany({})
+
+    console.log('  删除备份...')
+    await prisma.backup.deleteMany({})
+
+    console.log('  删除实例...')
+    await prisma.instance.deleteMany({})
+
+    console.log('  删除邀请码...')
+    await prisma.inviteCode.deleteMany({})
+
+    console.log('  删除用户配额...')
+    await prisma.userQuota.deleteMany({})
+
+    console.log('  删除用户...')
+    await prisma.user.deleteMany({})
+
+    console.log('  删除主机...')
+    await prisma.host.deleteMany({})
+
+    console.log('  删除套餐...')
+    await prisma.package.deleteMany({})
+
+    console.log('✅ 数据库已清空')
+  } catch (error: any) {
+    console.error('❌ 清空数据库失败:', error.message)
+    throw error
+  }
+}
+
+/**
+ * 使用 SQL TRUNCATE 快速清空所有表（更快，但需要直接执行 SQL）
+ * 注意：这会重置自增 ID
+ */
+export async function resetDatabaseFast(): Promise<void> {
+  console.log('🗑️  快速清空数据库（使用 TRUNCATE）...')
+
+  // 直接使用 pg 连接池执行 TRUNCATE，绕过 Prisma 适配器的限制
+  const pool = new Pool({
+    connectionString: process.env.DATABASE_URL,
+  })
+
+  try {
+    const tables = [
+      'logs',
+      'notification_logs',
+      'notification_channels',
+      'user_oauth_bindings',
+      'oauth_configs',
+      'help_articles',
+      'ssh_keys',
+      'port_mappings',
+      'snapshot_policies',
+      'backup_policies',
+      'snapshots',
+      'backups',
+      'restore_tasks',
+      'traffic_snapshots',
+      'daily_traffic',
+      'backup_upload_tasks',
+      'storage_configs',
+      'instance_transfers',
+      'instances',
+      'invite_codes',
+      'user_quotas',
+      'users',
+      'package_hosts',
+      'hosts',
+      'packages',
+      'system_configs'
+    ]
+
+    for (const table of tables) {
+      try {
+        await pool.query(`TRUNCATE TABLE "${table}" RESTART IDENTITY CASCADE;`)
+      } catch {
+        // 表可能不存在，忽略错误
+      }
+    }
+
+    console.log('✅ 数据库已快速清空')
+  } catch (error: any) {
+    console.error('❌ 快速清空数据库失败:', error.message)
+    // 如果 TRUNCATE 失败，回退到 deleteMany
+    console.log('⚠️  回退到 deleteMany 方法...')
+    await resetDatabase()
+  } finally {
+    await pool.end()
+  }
+}
+
diff --git a/server/src/db/resource-pool.ts b/server/src/db/resource-pool.ts
new file mode 100644
index 0000000..3d54165
--- /dev/null
+++ b/server/src/db/resource-pool.ts
@@ -0,0 +1,283 @@
+/**
+ * 用户资源池数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { RedeemCodeType, ResourcePoolAction } from '@prisma/client'
+
+// 资源类型到字段的映射
+const RESOURCE_FIELD_MAP: Record<string, 'cpu' | 'memory' | 'disk' | 'traffic'> = {
+  c: 'cpu',
+  r: 'memory',
+  d: 'disk',
+  t: 'traffic'
+}
+
+/**
+ * 获取用户资源池
+ */
+export async function getUserResourcePool(userId: number) {
+  // 使用 upsert 避免并发时的 unique constraint 错误
+  const pool = await prisma.userResourcePool.upsert({
+    where: { userId },
+    update: {},  // 已存在时不更新
+    create: { userId }
+  })
+
+  return {
+    cpu: pool.cpu,
+    memory: pool.memory,
+    disk: pool.disk,
+    traffic: Number(pool.traffic)
+  }
+}
+
+/**
+ * 添加资源到资源池
+ */
+export async function addToResourcePool(
+  userId: number,
+  resourceType: RedeemCodeType,
+  amount: number,
+  action: ResourcePoolAction,
+  remark?: string
+): Promise<void> {
+  const field = RESOURCE_FIELD_MAP[resourceType]
+  if (!field) {
+    throw new Error(`Invalid resource type: ${resourceType}`)
+  }
+
+  await prisma.$transaction([
+    // 更新资源池
+    prisma.userResourcePool.upsert({
+      where: { userId },
+      update: {
+        [field]: field === 'traffic'
+          ? { increment: BigInt(amount) }
+          : { increment: amount }
+      },
+      create: {
+        userId,
+        [field]: field === 'traffic' ? BigInt(amount) : amount
+      }
+    }),
+    // 记录日志
+    prisma.resourcePoolLog.create({
+      data: {
+        userId,
+        action,
+        resourceType,
+        amount,
+        remark
+      }
+    })
+  ])
+}
+
+/**
+ * 从资源池扣减资源（应用到实例前的检查和扣减）
+ */
+export async function deductFromResourcePool(
+  userId: number,
+  resourceType: RedeemCodeType,
+  amount: number,
+  instanceId: number,
+  remark?: string
+): Promise<boolean> {
+  const field = RESOURCE_FIELD_MAP[resourceType]
+  if (!field) {
+    throw new Error(`Invalid resource type: ${resourceType}`)
+  }
+
+  // 获取当前资源池
+  const pool = await prisma.userResourcePool.findUnique({
+    where: { userId }
+  })
+
+  if (!pool) {
+    return false
+  }
+
+  // 检查余额是否足够
+  const currentAmount = field === 'traffic' ? Number(pool.traffic) : pool[field]
+  if (currentAmount < amount) {
+    return false
+  }
+
+  // 扣减资源并记录日志
+  await prisma.$transaction([
+    prisma.userResourcePool.update({
+      where: { userId },
+      data: {
+        [field]: field === 'traffic'
+          ? { decrement: BigInt(amount) }
+          : { decrement: amount }
+      }
+    }),
+    prisma.resourcePoolLog.create({
+      data: {
+        userId,
+        action: 'apply',
+        resourceType,
+        amount: -amount, // 负数表示消耗
+        instanceId,
+        remark
+      }
+    })
+  ])
+
+  return true
+}
+
+/**
+ * 获取资源池变动记录
+ */
+export async function getResourcePoolLogs(
+  userId: number,
+  options: {
+    action?: ResourcePoolAction
+    resourceType?: RedeemCodeType
+    limit?: number
+    offset?: number
+  } = {}
+) {
+  const { action, resourceType, limit = 20, offset = 0 } = options
+
+  const where = {
+    userId,
+    ...(action ? { action } : {}),
+    ...(resourceType ? { resourceType } : {})
+  }
+
+  const [logs, total] = await Promise.all([
+    prisma.resourcePoolLog.findMany({
+      where,
+      orderBy: { createdAt: 'desc' },
+      take: limit,
+      skip: offset,
+      include: {
+        instance: {
+          select: {
+            id: true,
+            name: true
+          }
+        }
+      }
+    }),
+    prisma.resourcePoolLog.count({ where })
+  ])
+
+  return {
+    records: logs.map(log => ({
+      id: log.id,
+      action: log.action,
+      resourceType: log.resourceType,
+      amount: log.amount,
+      instance: log.instance ? {
+        id: log.instance.id,
+        name: log.instance.name
+      } : null,
+      remark: log.remark,
+      createdAt: log.createdAt.toISOString()
+    })),
+    total
+  }
+}
+
+/**
+ * 管理员为用户添加资源
+ */
+export async function adminGrantResource(
+  userId: number,
+  resourceType: RedeemCodeType,
+  amount: number,
+  remark?: string
+): Promise<void> {
+  await addToResourcePool(userId, resourceType, amount, 'admin_grant', remark)
+}
+
+/**
+ * 系统活动奖励资源
+ */
+export async function systemGrantResource(
+  userId: number,
+  resourceType: RedeemCodeType,
+  amount: number,
+  remark?: string
+): Promise<void> {
+  await addToResourcePool(userId, resourceType, amount, 'system_grant', remark)
+}
+
+/**
+ * 抽奖获得资源
+ */
+export async function lotteryGrantResource(
+  userId: number,
+  resourceType: RedeemCodeType,
+  amount: number,
+  remark?: string
+): Promise<void> {
+  await addToResourcePool(userId, resourceType, amount, 'lottery', remark)
+}
+
+/**
+ * 记录系统 h- 兑换码兑换到资源池日志（仅记录，不加资源池，因为资源直接应用到实例）
+ */
+export async function logSystemRedeemToInstance(
+  userId: number,
+  resourceType: RedeemCodeType,
+  amount: number,
+  instanceId: number,
+  remark?: string
+): Promise<void> {
+  await prisma.resourcePoolLog.create({
+    data: {
+      userId,
+      action: 'system_redeem',
+      resourceType,
+      amount,
+      instanceId,
+      remark
+    }
+  })
+}
+
+/**
+ * 获取用户所有可用实例（用于资源池应用，包括免费和付费实例）
+ * 仅返回开启资源池玩法的节点上的实例
+ */
+export async function getUserAllInstances(userId: number) {
+  const instances = await prisma.instance.findMany({
+    where: {
+      userId,
+      status: { in: ['running', 'stopped'] },
+      host: {
+        enableResourcePool: true  // 仅返回开启资源池的节点上的实例
+      }
+    },
+    include: {
+      host: {
+        select: {
+          id: true,
+          name: true,
+          location: true,
+          countryCode: true,
+          instanceType: true
+        }
+      }
+    },
+    orderBy: { name: 'asc' }
+  })
+
+  return instances.map(inst => ({
+    id: inst.id,
+    name: inst.name,
+    status: inst.status,
+    cpu: inst.cpu,
+    memory: inst.memory,
+    disk: inst.disk,
+    monthlyTrafficLimit: inst.monthlyTrafficLimit,
+    packagePlanId: inst.packagePlanId,
+    host: inst.host
+  }))
+}
diff --git a/server/src/db/restore-tasks.ts b/server/src/db/restore-tasks.ts
new file mode 100644
index 0000000..b1e3956
--- /dev/null
+++ b/server/src/db/restore-tasks.ts
@@ -0,0 +1,72 @@
+/**
+ * 恢复任务数据库操作
+ */
+
+import { prisma } from './prisma.js'
+
+export interface CreateRestoreTaskData {
+    instanceId: number
+    backupId: number | null
+    hostId: number
+    userId: number
+    tempInstanceName: string
+    originalInstanceName: string
+    originalIncusId: string
+}
+
+/**
+ * 创建恢复任务
+ */
+export async function createRestoreTask(data: CreateRestoreTaskData): Promise<number> {
+    const task = await prisma.restoreTask.create({
+        data: {
+            instanceId: data.instanceId,
+            backupId: data.backupId,
+            hostId: data.hostId,
+            userId: data.userId,
+            tempInstanceName: data.tempInstanceName,
+            originalInstanceName: data.originalInstanceName,
+            originalIncusId: data.originalIncusId,
+            status: 'PENDING'
+        }
+    })
+    return task.id
+}
+
+/**
+ * 获取恢复任务
+ */
+export async function getRestoreTaskById(id: number) {
+    return prisma.restoreTask.findUnique({ where: { id } })
+}
+
+/**
+ * 获取实例的恢复任务列表
+ */
+export async function getRestoreTasksByInstanceId(instanceId: number) {
+    return prisma.restoreTask.findMany({
+        where: { instanceId },
+        orderBy: { createdAt: 'desc' },
+        take: 20
+    })
+}
+
+/**
+ * 更新恢复任务状态
+ */
+export async function updateRestoreTaskStatus(
+    id: number,
+    status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED',
+    error?: string
+) {
+    return prisma.restoreTask.update({
+        where: { id },
+        data: {
+            status,
+            error: error ?? null,
+            finishedAt: ['COMPLETED', 'FAILED'].includes(status) ? new Date() : undefined
+        }
+    })
+}
+
+// hasActiveRestoreTask 和 getQueuePosition 在 workers/restoreTaskWorker.ts 中定义
diff --git a/server/src/db/snapshots.ts b/server/src/db/snapshots.ts
new file mode 100644
index 0000000..41caf80
--- /dev/null
+++ b/server/src/db/snapshots.ts
@@ -0,0 +1,178 @@
+/**
+ * 快照相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Snapshot } from '../types/database.js'
+
+/**
+ * 获取实例的快照列表
+ */
+export async function getSnapshotsByInstanceId(instanceId: number): Promise<Snapshot[]> {
+  const snapshots = await prisma.snapshot.findMany({
+    where: { instanceId },
+    orderBy: {
+      createdAt: 'desc'
+    }
+  })
+  
+  return snapshots.map(s => ({
+    id: s.id,
+    instance_id: s.instanceId,
+    incus_name: s.incusName,
+    name: s.name,
+    description: s.description,
+    stateful: s.stateful ? 1 : 0,
+    size: s.size,
+    created_at: s.createdAt.toISOString()
+  }))
+}
+
+/**
+ * 根据 ID 获取快照
+ */
+export async function getSnapshotById(id: number): Promise<Snapshot | null> {
+  const snapshot = await prisma.snapshot.findUnique({
+    where: { id }
+  })
+  
+  if (!snapshot) return null
+  
+  return {
+    id: snapshot.id,
+    instance_id: snapshot.instanceId,
+    incus_name: snapshot.incusName,
+    name: snapshot.name,
+    description: snapshot.description,
+    stateful: snapshot.stateful ? 1 : 0,
+    size: snapshot.size,
+    created_at: snapshot.createdAt.toISOString()
+  }
+}
+
+/**
+ * 创建快照
+ */
+export async function createSnapshot(data: {
+  instanceId: number
+  incusName: string
+  name: string
+  description?: string | null
+  stateful?: boolean
+}): Promise<number> {
+  const snapshot = await prisma.snapshot.create({
+    data: {
+      instanceId: data.instanceId,
+      incusName: data.incusName,
+      name: data.name,
+      description: data.description ?? null,
+      stateful: data.stateful ?? false
+    }
+  })
+  
+  return snapshot.id
+}
+
+/**
+ * 更新快照大小
+ */
+export async function updateSnapshotSize(id: number, size: number): Promise<void> {
+  await prisma.snapshot.update({
+    where: { id },
+    data: { size }
+  })
+}
+
+/**
+ * 删除快照
+ */
+export async function deleteSnapshot(id: number): Promise<void> {
+  await prisma.snapshot.delete({
+    where: { id }
+  })
+}
+
+/**
+ * 获取快照策略
+ */
+export async function getSnapshotPolicy(instanceId: number): Promise<unknown | null> {
+  const policy = await prisma.snapshotPolicy.findUnique({
+    where: { instanceId }
+  })
+  
+  return policy as unknown || null
+}
+
+/**
+ * 创建或更新快照策略
+ */
+export async function upsertSnapshotPolicy(instanceId: number, data: {
+  enabled: boolean
+  intervalMinutes: number
+}): Promise<void> {
+  const nextRunAt = new Date()
+  nextRunAt.setMinutes(nextRunAt.getMinutes() + data.intervalMinutes)
+  
+  await prisma.snapshotPolicy.upsert({
+    where: { instanceId },
+    create: {
+      instanceId,
+      enabled: data.enabled,
+      intervalMinutes: data.intervalMinutes,
+      nextRunAt
+    },
+    update: {
+      enabled: data.enabled,
+      intervalMinutes: data.intervalMinutes
+    }
+  })
+}
+
+/**
+ * 更新快照策略最后运行时间
+ */
+export async function updateSnapshotPolicyLastRun(instanceId: number): Promise<void> {
+  const policy = await prisma.snapshotPolicy.findUnique({
+    where: { instanceId },
+    select: {
+      intervalMinutes: true
+    }
+  })
+  
+  if (!policy) return
+  
+  const now = new Date()
+  const nextRunAt = new Date()
+  nextRunAt.setMinutes(nextRunAt.getMinutes() + policy.intervalMinutes)
+  
+  await prisma.snapshotPolicy.update({
+    where: { instanceId },
+    data: {
+      lastRunAt: now,
+      nextRunAt
+    }
+  })
+}
+
+/**
+ * 获取待执行的快照策略
+ */
+export async function getPendingSnapshotPolicies(): Promise<unknown[]> {
+  const now = new Date()
+  
+  const policies = await prisma.snapshotPolicy.findMany({
+    where: {
+      enabled: true,
+      OR: [
+        { nextRunAt: null },
+        { nextRunAt: { lte: now } }
+      ]
+    },
+    orderBy: {
+      nextRunAt: 'asc'
+    }
+  })
+  
+  return policies as unknown[]
+}
diff --git a/server/src/db/ssh-keys.ts b/server/src/db/ssh-keys.ts
new file mode 100644
index 0000000..177c851
--- /dev/null
+++ b/server/src/db/ssh-keys.ts
@@ -0,0 +1,78 @@
+/**
+ * SSH 密钥相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { SshKey } from '../types/database.js'
+
+/**
+ * 获取用户的所有 SSH 密钥
+ */
+export async function getSSHKeysByUserId(userId: number): Promise<SshKey[]> {
+  const sshKeys = await prisma.sshKey.findMany({
+    where: { userId },
+    orderBy: {
+      createdAt: 'desc'
+    }
+  })
+  
+  return sshKeys.map(key => ({
+    id: key.id,
+    user_id: key.userId,
+    name: key.name,
+    public_key: key.publicKey,
+    fingerprint: key.fingerprint,
+    created_at: key.createdAt.toISOString()
+  }))
+}
+
+/**
+ * 根据 ID 获取 SSH 密钥
+ */
+export async function getSSHKeyById(id: number): Promise<SshKey | null> {
+  const sshKey = await prisma.sshKey.findUnique({
+    where: { id }
+  })
+  
+  if (!sshKey) return null
+  
+  return {
+    id: sshKey.id,
+    user_id: sshKey.userId,
+    name: sshKey.name,
+    public_key: sshKey.publicKey,
+    fingerprint: sshKey.fingerprint,
+    created_at: sshKey.createdAt.toISOString()
+  }
+}
+
+/**
+ * 创建 SSH 密钥
+ */
+export async function createSSHKey(data: {
+  userId: number
+  name: string
+  publicKey: string
+  fingerprint: string
+}): Promise<number> {
+  const sshKey = await prisma.sshKey.create({
+    data: {
+      userId: data.userId,
+      name: data.name,
+      publicKey: data.publicKey,
+      fingerprint: data.fingerprint
+    }
+  })
+  
+  return sshKey.id
+}
+
+/**
+ * 删除 SSH 密钥
+ */
+export async function deleteSSHKey(id: number): Promise<void> {
+  await prisma.sshKey.delete({
+    where: { id }
+  })
+}
diff --git a/server/src/db/storage-configs.ts b/server/src/db/storage-configs.ts
new file mode 100644
index 0000000..c159bba
--- /dev/null
+++ b/server/src/db/storage-configs.ts
@@ -0,0 +1,142 @@
+/**
+ * 远程存储配置数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { StorageConfig, StorageType } from '@prisma/client'
+
+/**
+ * 获取用户的存储配置列表
+ */
+export async function getStorageConfigsByUserId(userId: number): Promise<StorageConfig[]> {
+    return prisma.storageConfig.findMany({
+        where: { userId },
+        orderBy: [
+            { isDefault: 'desc' },
+            { createdAt: 'desc' }
+        ]
+    })
+}
+
+/**
+ * 根据 ID 获取存储配置
+ */
+export async function getStorageConfigById(id: number): Promise<StorageConfig | null> {
+    return prisma.storageConfig.findUnique({
+        where: { id }
+    })
+}
+
+/**
+ * 获取用户的默认存储配置
+ */
+export async function getDefaultStorageConfig(userId: number): Promise<StorageConfig | null> {
+    return prisma.storageConfig.findFirst({
+        where: { userId, isDefault: true }
+    })
+}
+
+/**
+ * 创建存储配置
+ */
+export async function createStorageConfig(data: {
+    userId: number
+    name: string
+    type: StorageType
+    host: string
+    port?: number | null
+    username?: string | null
+    password?: string | null
+    basePath?: string | null
+    extra?: Record<string, unknown> | null
+    isDefault?: boolean
+}): Promise<StorageConfig> {
+    // 如果设为默认，先取消其他默认
+    if (data.isDefault) {
+        await prisma.storageConfig.updateMany({
+            where: { userId: data.userId, isDefault: true },
+            data: { isDefault: false }
+        })
+    }
+
+    return prisma.storageConfig.create({
+        data: {
+            userId: data.userId,
+            name: data.name,
+            type: data.type,
+            host: data.host,
+            port: data.port ?? null,
+            username: data.username ?? null,
+            password: data.password ?? null,
+            basePath: data.basePath ?? null,
+            extra: data.extra as object | undefined,
+            isDefault: data.isDefault ?? false
+        }
+    })
+}
+
+/**
+ * 更新存储配置
+ */
+export async function updateStorageConfig(
+    id: number,
+    data: {
+        name?: string
+        type?: StorageType
+        host?: string
+        port?: number | null
+        username?: string | null
+        password?: string | null
+        basePath?: string | null
+        extra?: Record<string, unknown> | null
+        isDefault?: boolean
+    }
+): Promise<StorageConfig> {
+    const config = await prisma.storageConfig.findUnique({ where: { id } })
+    if (!config) throw new Error('存储配置不存在')
+
+    // 如果设为默认，先取消其他默认
+    if (data.isDefault) {
+        await prisma.storageConfig.updateMany({
+            where: { userId: config.userId, isDefault: true, id: { not: id } },
+            data: { isDefault: false }
+        })
+    }
+
+    // 处理 extra 字段的 null 值
+    const updateData = { ...data }
+    if (updateData.extra === null) {
+        updateData.extra = undefined
+    }
+
+    return prisma.storageConfig.update({
+        where: { id },
+        data: updateData as Parameters<typeof prisma.storageConfig.update>[0]['data']
+    })
+}
+
+/**
+ * 删除存储配置
+ */
+export async function deleteStorageConfig(id: number): Promise<void> {
+    await prisma.storageConfig.delete({
+        where: { id }
+    })
+}
+
+/**
+ * 设置默认存储配置
+ */
+export async function setDefaultStorageConfig(userId: number, id: number): Promise<void> {
+    // 先取消所有默认
+    await prisma.storageConfig.updateMany({
+        where: { userId, isDefault: true },
+        data: { isDefault: false }
+    })
+
+    // 设置新的默认
+    await prisma.storageConfig.update({
+        where: { id },
+        data: { isDefault: true }
+    })
+}
diff --git a/server/src/db/storage-pools.ts b/server/src/db/storage-pools.ts
new file mode 100644
index 0000000..f53ee38
--- /dev/null
+++ b/server/src/db/storage-pools.ts
@@ -0,0 +1,229 @@
+/**
+ * 存储池数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import type { StoragePurpose } from '@prisma/client'
+
+const DEFAULT_STORAGE_POOL_NAME = 'default'
+
+export interface CreateStoragePoolData {
+  hostId: number
+  name: string
+  driver: string
+  purpose: string
+  description?: string | null
+  config?: Record<string, string>
+}
+
+/**
+ * 创建存储池记录
+ */
+export async function createStoragePool(data: CreateStoragePoolData) {
+  return prisma.storagePool.create({
+    data: {
+      hostId: data.hostId,
+      name: data.name,
+      driver: data.driver,
+      purpose: data.purpose as StoragePurpose,
+      description: data.description || null,
+      config: data.config || {}
+    }
+  })
+}
+
+/**
+ * 删除存储池记录
+ */
+export async function deleteStoragePool(hostId: number, name: string) {
+  return prisma.storagePool.deleteMany({
+    where: {
+      hostId,
+      name
+    }
+  })
+}
+
+/**
+ * 获取宿主机的存储池列表
+ */
+export async function getStoragePoolsByHostId(hostId: number) {
+  return prisma.storagePool.findMany({
+    where: { hostId },
+    orderBy: { createdAt: 'asc' }
+  })
+}
+
+/**
+ * 获取宿主机的系统盘存储池列表 (purpose = 'instance_data')
+ * 用于创建实例时随机选择存储池
+ */
+export async function getSystemDiskPoolsByHostId(hostId: number) {
+  return prisma.storagePool.findMany({
+    where: {
+      hostId,
+      purpose: 'instance_data'
+    },
+    orderBy: { createdAt: 'asc' }
+  })
+}
+
+/**
+ * 随机选择一个系统盘存储池
+ * 返回存储池名称，如果没有配置系统盘存储池则返回 null
+ */
+export async function getRandomSystemDiskPool(hostId: number): Promise<string | null> {
+  const pools = await getSystemDiskPoolsByHostId(hostId)
+  if (pools.length === 0) {
+    return null
+  }
+  const randomIndex = Math.floor(Math.random() * pools.length)
+  return pools[randomIndex].name
+}
+
+/**
+ * 检查宿主机上是否存在指定存储池。
+ * 对已落库实例，允许继续使用 "default" 回退池，避免因未登记到 storage_pools 表而丢失选择。
+ */
+export async function hasStoragePool(hostId: number, poolName: string): Promise<boolean> {
+  if (!poolName) return false
+  if (poolName === DEFAULT_STORAGE_POOL_NAME) return true
+
+  const pool = await prisma.storagePool.findUnique({
+    where: {
+      hostId_name: {
+        hostId,
+        name: poolName
+      }
+    },
+    select: { id: true }
+  })
+
+  return !!pool
+}
+
+/**
+ * 检查指定存储池是否可作为系统盘池使用。
+ */
+export async function isSystemDiskPool(hostId: number, poolName: string): Promise<boolean> {
+  if (!poolName) return false
+  if (poolName === DEFAULT_STORAGE_POOL_NAME) return true
+
+  const pool = await prisma.storagePool.findFirst({
+    where: {
+      hostId,
+      name: poolName,
+      purpose: 'instance_data'
+    },
+    select: { id: true }
+  })
+
+  return !!pool
+}
+
+/**
+ * 获取套餐在指定宿主机上配置的默认系统盘池。
+ */
+export async function getPackageHostStoragePool(packageId: number, hostId: number): Promise<string | null> {
+  const packageHost = await prisma.packageHost.findUnique({
+    where: {
+      packageId_hostId: {
+        packageId,
+        hostId
+      }
+    },
+    select: {
+      storagePoolName: true
+    }
+  })
+
+  return packageHost?.storagePoolName ?? null
+}
+
+/**
+ * 解析新实例应使用的存储池。
+ * 优先使用套餐在当前宿主机上的显式配置，其次回退到随机系统盘池。
+ */
+export async function resolveStoragePoolForNewInstance(
+  hostId: number,
+  options: {
+    packageId?: number | null
+  } = {}
+): Promise<string | null> {
+  const { packageId } = options
+
+  if (packageId) {
+    const configuredPool = await getPackageHostStoragePool(packageId, hostId)
+    if (configuredPool && await isSystemDiskPool(hostId, configuredPool)) {
+      return configuredPool
+    }
+  }
+
+  return getRandomSystemDiskPool(hostId)
+}
+
+/**
+ * 解析已有实例后续操作应使用的存储池。
+ * 优先复用实例已记录的实际池名，避免重建/恢复时因套餐配置变更而迁移到其他盘。
+ */
+export async function resolveStoragePoolForExistingInstance(
+  instanceId: number,
+  hostId: number,
+  options: {
+    packageId?: number | null
+  } = {}
+): Promise<string | null> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      storagePoolName: true
+    }
+  })
+
+  if (instance?.storagePoolName && await hasStoragePool(hostId, instance.storagePoolName)) {
+    return instance.storagePoolName
+  }
+
+  return resolveStoragePoolForNewInstance(hostId, options)
+}
+
+/**
+ * 获取存储池详情
+ */
+export async function getStoragePool(hostId: number, name: string) {
+  return prisma.storagePool.findUnique({
+    where: {
+      hostId_name: {
+        hostId,
+        name
+      }
+    }
+  })
+}
+
+/**
+ * 更新存储池记录
+ */
+export interface UpdateStoragePoolData {
+  description?: string
+  config?: Record<string, string>
+}
+
+export async function updateStoragePool(hostId: number, name: string, data: UpdateStoragePoolData) {
+  const updateData: Record<string, unknown> = {}
+  
+  if (data.description !== undefined) {
+    updateData.description = data.description
+  }
+  if (data.config !== undefined) {
+    updateData.config = data.config
+  }
+
+  return prisma.storagePool.updateMany({
+    where: {
+      hostId,
+      name
+    },
+    data: updateData
+  })
+}
diff --git a/server/src/db/system-config.ts b/server/src/db/system-config.ts
new file mode 100644
index 0000000..3f344a0
--- /dev/null
+++ b/server/src/db/system-config.ts
@@ -0,0 +1,337 @@
+/**
+ * 系统配置数据库操作
+ * PERF001: 添加缓存层减少数据库查询
+ */
+
+import { prisma } from './prisma.js'
+import {
+    getCachedConfig,
+    setCachedConfig,
+    invalidateCachedConfigs,
+    invalidateAllConfigCache
+} from '../lib/config-cache.js'
+
+const SENSITIVE_CONFIG_KEYS = new Set([
+    'smtp_password',
+    'turnstile_secret_key',
+    'ticket_image_lsky_token',
+    'telegram_bot_token',
+    'telegram_webhook_secret'
+])
+const MASKED_SECRET_PLACEHOLDER = '********'
+
+// 默认配额配置（新配额系统）
+// 注意：节点、套餐、好友功能默认不开放（默认值为 0），需要管理员授权
+// 注意：不再限制实例配额，用户可以创建无限数量的实例
+export const DEFAULT_QUOTA_CONFIG = {
+    default_quota_host: 0,       // 宿主机数量上限（0 = 未授权，需管理员开启）
+    default_quota_friend: 0,     // 好友数量上限（0 = 未授权，需管理员开启）
+    default_quota_package: 0     // 套餐数量上限（0 = 未授权，需管理员开启）
+}
+
+export interface SystemConfigItem {
+    id: number
+    key: string
+    value: string
+    type: string
+    label: string | null
+    description: string | null
+    created_at: string
+    updated_at: string
+}
+
+export interface DefaultQuotaConfig {
+    hostLimit: number      // 宿主机数量上限
+    friendLimit: number    // 好友数量上限
+    packageLimit: number   // 套餐数量上限
+}
+
+/**
+ * 初始化系统配置（如果不存在则创建默认值）
+ */
+export async function initSystemConfig(): Promise<void> {
+    const configs = [
+        // 新配额系统
+        // 注意：节点、套餐、好友功能默认不开放（默认值为 0），需要管理员授权
+        // 注意：不再限制实例配额，用户可以创建无限数量的实例
+        { key: 'default_quota_host', value: '0', type: 'number', label: '默认宿主机配额', description: '新用户默认可创建宿主机数量（0 = 未授权，需管理员开启）' },
+        { key: 'default_quota_friend', value: '0', type: 'number', label: '默认好友配额', description: '新用户默认可添加好友数量（0 = 未授权，需管理员开启）' },
+        { key: 'default_quota_package', value: '0', type: 'number', label: '默认套餐配额', description: '新用户默认可创建套餐数量（0 = 未授权，需管理员开启）' },
+        { key: 'registration_enabled', value: 'true', type: 'boolean', label: '开放注册', description: '是否允许新用户注册账号' },
+        { key: 'require_invite_code', value: 'true', type: 'boolean', label: '邀请码注册', description: '是否需要邀请码才能注册' },
+        { key: 'invite_generation_costs', value: '[{"resource":"balance","amount":0,"enabled":false},{"resource":"points","amount":0,"enabled":false}]', type: 'json', label: '邀请码生成定价', description: '用户生成邀请码可选择的成本项，当前支持 balance 和 points' },
+        { key: 'invite_default_expire_days', value: '0', type: 'number', label: '用户邀请码有效期', description: '用户生成邀请码的默认有效天数，0 表示永不过期' },
+        { key: 'user_vip_metric', value: 'totalRecharge', type: 'string', label: '用户 VIP 统计口径', description: '用户 VIP 等级全局计算口径：totalRecharge=累计充值，totalConsume=累计消费' },
+        { key: 'hosting_feature_enabled', value: 'true', type: 'boolean', label: '托管节点入口', description: '关闭后，仅对已经创建过节点的用户显示托管节点和收益入口' },
+        { key: 'hosting_market_entry_enabled', value: 'true', type: 'boolean', label: '托管套餐购买入口', description: '控制开通实例页面是否显示托管专区和托管套餐购买入口' },
+        { key: 'hosting_notice', value: '', type: 'string', label: '托管公告', description: '显示在托管收益页面的公告内容，留空则不显示' },
+        { key: 'ticket_enabled', value: 'true', type: 'boolean', label: '工单开关', description: '关闭后，普通用户无法发起工单，用户端隐藏工单入口' },
+        { key: 'free_site_mode', value: 'false', type: 'boolean', label: '白嫖站', description: '开启后，用户端隐藏充值入口、充值记录和推荐计划' },
+        { key: 'free_site_register_gift_enabled', value: 'false', type: 'boolean', label: '注册自动赠送', description: '白嫖站开启后，新用户注册成功自动赠送余额和积分' },
+        { key: 'free_site_register_gift_balance', value: '0', type: 'number', label: '注册赠送余额', description: '白嫖站注册自动赠送的账户余额（元）' },
+        { key: 'free_site_register_gift_points', value: '0', type: 'number', label: '注册赠送积分', description: '白嫖站注册自动赠送的积分数量' },
+        { key: 'brand_name', value: 'Incudal', type: 'string', label: '系统名称', description: '站点顶部、登录页、SEO 等位置展示的系统名称，留空则使用默认值' },
+        { key: 'brand_subtitle', value: '基于 Incus 的低价 NAT VPS', type: 'string', label: '网站副标题', description: '站点顶部、公共页、SEO 默认描述等位置展示的品牌副标题，留空则使用默认值' },
+        { key: 'brand_logo_url', value: '/incudal_logo.webp', type: 'string', label: '系统 Logo 地址', description: '站点顶部、登录页、SEO 等位置展示的 Logo 图片地址，留空则使用默认值' },
+        { key: 'popup_announcement', value: '', type: 'string', label: '弹窗公告', description: '用户访问网站时弹出的公告内容，留空则不广播' },
+        { key: 'popup_promo_image_url', value: '', type: 'string', label: '图片推广弹窗图片', description: '用户访问网站时弹出的套餐推广图片 URL，留空则不显示图片推广弹窗' },
+        { key: 'popup_promo_package_id', value: '', type: 'string', label: '图片推广弹窗套餐', description: '图片推广弹窗的目标套餐 ID，需配合图片 URL 使用' },
+        // Turnstile 配置
+        { key: 'turnstile_enabled', value: 'false', type: 'boolean', label: 'Turnstile 验证', description: '是否启用 Cloudflare Turnstile 人机验证' },
+        { key: 'turnstile_site_key', value: '', type: 'string', label: 'Turnstile Site Key', description: 'Cloudflare Turnstile 站点密钥（前端使用）' },
+        { key: 'turnstile_secret_key', value: '', type: 'secret', label: 'Turnstile Secret Key', description: 'Cloudflare Turnstile 密钥（后端验证使用）' },
+        // 头像 API 配置
+        { key: 'avatar_api_base', value: 'https://api.dicebear.com/9.x', type: 'string', label: '头像 API 地址', description: 'DiceBear 头像 API 基础地址，可自建服务' },
+        // 侧边栏底部联系方式
+        { key: 'footer_contact_email', value: 'incudal@sent.com', type: 'string', label: '底部联系邮箱', description: '侧边栏底部邮箱按钮显示的邮箱地址或 mailto 链接' },
+        { key: 'footer_telegram_link', value: 'https://t.me/incudal_com', type: 'string', label: '底部 Telegram 群链接', description: '侧边栏底部 Telegram 按钮跳转地址' },
+        // Telegram 专用机器人配置
+        { key: 'telegram_bot_enabled', value: 'false', type: 'boolean', label: 'Telegram 专用机器人', description: '是否启用 Telegram 账号绑定机器人' },
+        { key: 'telegram_bot_username', value: '', type: 'string', label: 'Telegram Bot 用户名', description: '机器人用户名，不含 @，用于生成绑定链接' },
+        { key: 'telegram_bot_token', value: '', type: 'secret', label: 'Telegram Bot Token', description: 'BotFather 分配的专用机器人 Token' },
+        { key: 'telegram_webhook_secret', value: '', type: 'secret', label: 'Telegram Webhook Secret', description: 'Telegram webhook 请求头 X-Telegram-Bot-Api-Secret-Token 校验值' },
+        { key: 'telegram_group_join_enabled', value: 'false', type: 'boolean', label: 'Telegram 入群申请', description: '是否允许绑定用户通过机器人申请私有群邀请链接' },
+        { key: 'telegram_group_chat_id', value: '', type: 'string', label: 'Telegram 私有群 Chat ID', description: '用于 createChatInviteLink 的私有群或超级群 chat_id' },
+        { key: 'telegram_group_join_mode', value: 'any', type: 'string', label: 'Telegram 入群门槛模式', description: 'any=充值或消费任一达标，all=充值和消费同时达标' },
+        { key: 'telegram_group_min_recharge', value: '0', type: 'number', label: 'Telegram 入群累计充值门槛', description: '累计充值金额达到该值后可申请入群，0 表示不要求' },
+        { key: 'telegram_group_min_consume', value: '0', type: 'number', label: 'Telegram 入群累计消费门槛', description: '累计消费金额达到该值后可申请入群，0 表示不要求' },
+        { key: 'telegram_group_invite_expire_minutes', value: '30', type: 'number', label: 'Telegram 邀请链接有效期', description: '机器人生成的一次性邀请链接有效分钟数' },
+        { key: 'telegram_vip_group_join_enabled', value: 'false', type: 'boolean', label: 'Telegram 高级群入群申请', description: '是否允许绑定用户通过机器人申请高级用户群邀请链接' },
+        { key: 'telegram_vip_group_chat_id', value: '', type: 'string', label: 'Telegram 高级群 Chat ID', description: '用于 createChatInviteLink 的高级私有群或超级群 chat_id' },
+        { key: 'telegram_vip_group_join_mode', value: 'all', type: 'string', label: 'Telegram 高级群门槛模式', description: 'any=充值或消费任一达标，all=充值和消费同时达标' },
+        { key: 'telegram_vip_group_min_recharge', value: '0', type: 'number', label: 'Telegram 高级群累计充值门槛', description: '累计充值金额达到该值后可申请高级群，0 表示不要求' },
+        { key: 'telegram_vip_group_min_consume', value: '0', type: 'number', label: 'Telegram 高级群累计消费门槛', description: '累计消费金额达到该值后可申请高级群，0 表示不要求' },
+        { key: 'telegram_vip_group_invite_expire_minutes', value: '30', type: 'number', label: 'Telegram 高级群邀请链接有效期', description: '机器人生成的高级群一次性邀请链接有效分钟数' },
+        // SMTP 邮件配置
+        { key: 'smtp_enabled', value: 'false', type: 'boolean', label: 'SMTP 邮件验证', description: '是否启用邮件验证码' },
+        { key: 'smtp_host', value: '', type: 'string', label: 'SMTP 服务器', description: 'SMTP 服务器地址' },
+        { key: 'smtp_port', value: '587', type: 'number', label: 'SMTP 端口', description: 'SMTP 服务器端口' },
+        { key: 'smtp_secure', value: 'false', type: 'boolean', label: 'SMTP SSL/TLS', description: '是否使用 SSL/TLS 加密（端口 465 通常启用）' },
+        { key: 'smtp_username', value: '', type: 'string', label: 'SMTP 用户名', description: 'SMTP 认证用户名' },
+        { key: 'smtp_password', value: '', type: 'secret', label: 'SMTP 密码', description: 'SMTP 认证密码' },
+        { key: 'smtp_from_email', value: '', type: 'string', label: '发件人邮箱', description: '邮件发件人地址' },
+        { key: 'smtp_from_name', value: 'Incudal', type: 'string', label: '发件人名称', description: '邮件发件人显示名称' },
+        // 邮箱域名白名单配置
+        { key: 'email_domain_whitelist_enabled', value: 'false', type: 'boolean', label: '邮箱域名白名单', description: '是否启用邮箱域名白名单限制' },
+        { key: 'email_allowed_domains', value: '', type: 'string', label: '允许的邮箱域名', description: '允许注册的邮箱域名列表，逗号分隔' },
+        // 转移手续费配置
+        { key: 'transfer_fee', value: '0', type: 'number', label: '转移手续费', description: '实例转移手续费（元），0表示免费，发起时扣除，拒绝时退还' },
+        // Lsky 工单图片配置
+        { key: 'ticket_image_lsky_base_url', value: '', type: 'string', label: 'Lsky 地址', description: '兰空图床站点地址，例如 https://img.example.com' },
+        { key: 'ticket_image_lsky_token', value: '', type: 'secret', label: 'Lsky Token', description: '兰空图床 API Token（仅后端使用）' },
+        { key: 'ticket_image_lsky_api_version', value: 'v1', type: 'string', label: 'Lsky API 版本', description: '上传时使用的 API 版本：v1 或 v2' },
+        { key: 'ticket_image_lsky_target_id', value: '', type: 'string', label: '策略/存储 ID', description: 'v1 填 strategy_id，v2 填 storage_id，可留空使用默认策略' }
+    ]
+
+    for (const config of configs) {
+        await prisma.systemConfig.upsert({
+            where: { key: config.key },
+            update: {},
+            create: config
+        })
+    }
+}
+
+/**
+ * 获取布尔类型配置值
+ */
+export async function getSystemConfigBoolean(key: string, defaultValue: boolean): Promise<boolean> {
+    const value = await getSystemConfig(key)
+    if (value === null) return defaultValue
+    return value === 'true' || value === '1'
+}
+
+/**
+ * 检查是否需要邀请码注册
+ */
+export async function isInviteCodeRequired(): Promise<boolean> {
+    return getSystemConfigBoolean('require_invite_code', true)
+}
+
+/**
+ * 检查是否开放注册
+ */
+export async function isRegistrationEnabled(): Promise<boolean> {
+    return getSystemConfigBoolean('registration_enabled', true)
+}
+
+/**
+ * 获取所有系统配置
+ */
+export async function getAllSystemConfigs(): Promise<SystemConfigItem[]> {
+    const configs = await prisma.systemConfig.findMany({
+        orderBy: { id: 'asc' }
+    })
+
+    return configs.map(c => {
+        const value = SENSITIVE_CONFIG_KEYS.has(c.key) && c.value
+            ? MASKED_SECRET_PLACEHOLDER
+            : c.value
+
+        return {
+            id: c.id,
+            key: c.key,
+            value,
+            type: c.type,
+            label: c.label,
+            description: c.description,
+            created_at: c.createdAt.toISOString(),
+            updated_at: c.updatedAt.toISOString()
+        }
+    })
+}
+
+/**
+ * 获取单个配置值
+ * PERF001: 使用缓存减少数据库查询
+ * @param decrypt 是否解密敏感数据（默认 true）
+ */
+export async function getSystemConfig(key: string, decrypt: boolean = true): Promise<string | null> {
+    // PERF001: 先检查缓存（敏感数据不缓存）
+    const isSensitive = SENSITIVE_CONFIG_KEYS.has(key)
+    if (!isSensitive) {
+        const cached = getCachedConfig(key)
+        if (cached !== undefined) {
+            return cached
+        }
+    }
+
+    const config = await prisma.systemConfig.findUnique({
+        where: { key }
+    })
+    if (!config?.value) {
+        const result = config?.value ?? null
+        // 缓存空值（避免重复查询）
+        if (!isSensitive) {
+            setCachedConfig(key, result)
+        }
+        return result
+    }
+
+    // 解密敏感数据
+    if (decrypt && isSensitive) {
+        // 检查是否是加密格式（iv:tag:encrypted）
+        if (config.value.includes(':')) {
+            try {
+                const { decryptSensitiveData } = await import('../lib/security.js')
+                return decryptSensitiveData(config.value)
+            } catch (err) {
+                console.error(`Failed to decrypt ${key}:`, err)
+                return null
+            }
+        }
+    }
+
+    // PERF001: 缓存结果（敏感数据不缓存）
+    if (!isSensitive) {
+        setCachedConfig(key, config.value)
+    }
+
+    return config.value
+}
+
+/**
+ * 获取数字类型配置值
+ */
+export async function getSystemConfigNumber(key: string, defaultValue: number): Promise<number> {
+    const value = await getSystemConfig(key)
+    if (value === null) return defaultValue
+    const num = parseInt(value, 10)
+    return isNaN(num) ? defaultValue : num
+}
+
+/**
+ * 获取浮点数类型配置值
+ */
+export async function getSystemConfigFloat(key: string, defaultValue: number): Promise<number> {
+    const value = await getSystemConfig(key)
+    if (value === null) return defaultValue
+    const num = parseFloat(value)
+    return Number.isFinite(num) ? num : defaultValue
+}
+
+/**
+ * 获取配置值和更新时间，用于前端判断当前公告版本
+ */
+export async function getSystemConfigValueWithUpdatedAt(key: string): Promise<{ value: string | null; updatedAt: string | null }> {
+    const config = await prisma.systemConfig.findUnique({
+        where: { key },
+        select: { value: true, updatedAt: true }
+    })
+
+    if (!config) {
+        return { value: null, updatedAt: null }
+    }
+
+    return {
+        value: config.value,
+        updatedAt: config.updatedAt.toISOString()
+    }
+}
+
+/**
+ * 更新配置值
+ * PERF001: 更新后清除缓存
+ */
+export async function updateSystemConfig(key: string, value: string): Promise<void> {
+    await prisma.systemConfig.update({
+        where: { key },
+        data: { value }
+    })
+    // PERF001: 清除缓存
+    invalidateCachedConfigs([key])
+}
+
+/**
+ * 批量更新配置
+ * PERF001: 更新后清除缓存
+ */
+export async function updateSystemConfigs(configs: Array<{ key: string; value: string }>): Promise<void> {
+    // Import encryption functions
+    const { encryptSensitiveData } = await import('../lib/security.js')
+
+    const updates: Array<{ key: string; value: string }> = []
+
+    for (const config of configs) {
+        let finalValue = config.value
+
+        if (SENSITIVE_CONFIG_KEYS.has(config.key) && config.value === MASKED_SECRET_PLACEHOLDER) {
+            continue
+        }
+
+        if (SENSITIVE_CONFIG_KEYS.has(config.key) && config.value) {
+            if (!config.value.includes(':')) {
+                finalValue = encryptSensitiveData(config.value)
+            }
+        }
+
+        updates.push({ key: config.key, value: finalValue })
+    }
+
+    if (updates.length > 0) {
+        await prisma.$transaction(updates.map(config => prisma.systemConfig.update({
+            where: { key: config.key },
+            data: { value: config.value }
+        })))
+    }
+
+    // PERF001: 清除所有缓存（批量更新可能影响多个配置）
+    invalidateAllConfigCache()
+}
+
+/**
+ * 获取默认用户配额配置（新配额系统）
+ */
+export async function getDefaultQuotaConfig(): Promise<DefaultQuotaConfig> {
+    const [host, friend, packageLimit] = await Promise.all([
+        getSystemConfigNumber('default_quota_host', DEFAULT_QUOTA_CONFIG.default_quota_host),
+        getSystemConfigNumber('default_quota_friend', DEFAULT_QUOTA_CONFIG.default_quota_friend),
+        getSystemConfigNumber('default_quota_package', DEFAULT_QUOTA_CONFIG.default_quota_package)
+    ])
+
+    return {
+        hostLimit: host,
+        friendLimit: friend,
+        packageLimit: packageLimit
+    }
+}
diff --git a/server/src/db/terminal-saved-commands.ts b/server/src/db/terminal-saved-commands.ts
new file mode 100644
index 0000000..bd69c2d
--- /dev/null
+++ b/server/src/db/terminal-saved-commands.ts
@@ -0,0 +1,307 @@
+import { prisma } from './prisma.js'
+import { decryptSensitiveData, encryptSensitiveData, isEncrypted } from '../lib/security.js'
+
+const MAX_COMMANDS_PER_USER = 100
+const MAX_COMMAND_SIZE = 16 * 1024
+const CONTROL_CHARS_REGEX = /[\u0000-\u001F\u007F]/g
+
+function normalizeCommandLabel(value: string): string {
+  return value
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(CONTROL_CHARS_REGEX, '')
+    .trim()
+}
+
+function normalizeDescription(value: string | null | undefined): string | null {
+  if (!value) return null
+
+  const normalized = value
+    .replace(/\r\n/g, '\n')
+    .replace(CONTROL_CHARS_REGEX, '')
+    .trim()
+
+  return normalized || null
+}
+
+export interface TerminalSavedCommandData {
+  id: number
+  userId: number
+  name: string
+  command: string
+  description: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+function mapTerminalSavedCommand(command: {
+  id: number
+  userId: number
+  name: string
+  command: string
+  description: string | null
+  createdAt: Date | string
+  updatedAt: Date | string
+}): TerminalSavedCommandData {
+  const decryptedName = isEncrypted(command.name) ? (decryptSensitiveData(command.name) || command.name) : command.name
+  const decryptedCommand = isEncrypted(command.command) ? (decryptSensitiveData(command.command) || command.command) : command.command
+  const decryptedDescription = command.description
+    ? (isEncrypted(command.description) ? (decryptSensitiveData(command.description) || command.description) : command.description)
+    : null
+  const createdAt = command.createdAt instanceof Date
+    ? command.createdAt.toISOString()
+    : new Date(command.createdAt).toISOString()
+  const updatedAt = command.updatedAt instanceof Date
+    ? command.updatedAt.toISOString()
+    : new Date(command.updatedAt).toISOString()
+
+  return {
+    id: command.id,
+    userId: command.userId,
+    name: decryptedName,
+    command: decryptedCommand,
+    description: decryptedDescription,
+    createdAt,
+    updatedAt
+  }
+}
+
+export async function getTerminalSavedCommandsByUserId(userId: number): Promise<TerminalSavedCommandData[]> {
+  const commands = await prisma.$queryRawUnsafe<Array<{
+    id: number
+    userId: number
+    name: string
+    command: string
+    description: string | null
+    createdAt: Date
+    updatedAt: Date
+  }>>(
+    `
+      SELECT
+        id,
+        user_id AS "userId",
+        name,
+        command,
+        description,
+        created_at AS "createdAt",
+        updated_at AS "updatedAt"
+      FROM terminal_saved_commands
+      WHERE user_id = $1
+      ORDER BY updated_at DESC, id DESC
+    `,
+    userId
+  )
+
+  return commands.map(mapTerminalSavedCommand)
+}
+
+export async function getTerminalSavedCommandById(id: number, userId: number): Promise<TerminalSavedCommandData | null> {
+  const commands = await prisma.$queryRawUnsafe<Array<{
+    id: number
+    userId: number
+    name: string
+    command: string
+    description: string | null
+    createdAt: Date
+    updatedAt: Date
+  }>>(
+    `
+      SELECT
+        id,
+        user_id AS "userId",
+        name,
+        command,
+        description,
+        created_at AS "createdAt",
+        updated_at AS "updatedAt"
+      FROM terminal_saved_commands
+      WHERE id = $1 AND user_id = $2
+      LIMIT 1
+    `,
+    id,
+    userId
+  )
+  const command = commands[0] || null
+
+  return command ? mapTerminalSavedCommand(command) : null
+}
+
+export async function createTerminalSavedCommand(data: {
+  userId: number
+  name: string
+  command: string
+  description?: string | null
+}): Promise<{ success: true; command: TerminalSavedCommandData } | { success: false; error: string }> {
+  const name = normalizeCommandLabel(data.name)
+  const command = data.command
+  const description = normalizeDescription(data.description)
+
+  if (!name) {
+    return { success: false, error: 'INVALID_NAME' }
+  }
+
+  if (!command.trim()) {
+    return { success: false, error: 'INVALID_COMMAND' }
+  }
+
+  if (Buffer.byteLength(command, 'utf-8') > MAX_COMMAND_SIZE) {
+    return { success: false, error: 'COMMAND_TOO_LARGE' }
+  }
+
+  const countRows = await prisma.$queryRawUnsafe<Array<{ count: number }>>(
+    `
+      SELECT COUNT(*)::int AS count
+      FROM terminal_saved_commands
+      WHERE user_id = $1
+    `,
+    data.userId
+  )
+  const count = countRows[0]?.count || 0
+
+  if (count >= MAX_COMMANDS_PER_USER) {
+    return { success: false, error: 'MAX_COMMANDS_REACHED' }
+  }
+
+  const createdRows = await prisma.$queryRawUnsafe<Array<{
+    id: number
+    userId: number
+    name: string
+    command: string
+    description: string | null
+    createdAt: Date
+    updatedAt: Date
+  }>>(
+    `
+      INSERT INTO terminal_saved_commands (user_id, name, command, description, updated_at)
+      VALUES ($1, $2, $3, $4, NOW())
+      RETURNING
+        id,
+        user_id AS "userId",
+        name,
+        command,
+        description,
+        created_at AS "createdAt",
+        updated_at AS "updatedAt"
+    `,
+    data.userId,
+    encryptSensitiveData(name),
+    encryptSensitiveData(command),
+    description ? encryptSensitiveData(description) : null
+  )
+  const created = createdRows[0]
+
+  return {
+    success: true,
+    command: mapTerminalSavedCommand(created)
+  }
+}
+
+export async function updateTerminalSavedCommand(
+  id: number,
+  userId: number,
+  data: {
+    name?: string
+    command?: string
+    description?: string | null
+  }
+): Promise<{ success: true; command: TerminalSavedCommandData } | { success: false; error: string }> {
+  const existingRows = await prisma.$queryRawUnsafe<Array<{
+    id: number
+    userId: number
+    name: string
+    command: string
+    description: string | null
+    createdAt: Date
+    updatedAt: Date
+  }>>(
+    `
+      SELECT
+        id,
+        user_id AS "userId",
+        name,
+        command,
+        description,
+        created_at AS "createdAt",
+        updated_at AS "updatedAt"
+      FROM terminal_saved_commands
+      WHERE id = $1 AND user_id = $2
+      LIMIT 1
+    `,
+    id,
+    userId
+  )
+  const existing = existingRows[0] ? mapTerminalSavedCommand(existingRows[0]) : null
+
+  if (!existing) {
+    return { success: false, error: 'NOT_FOUND' }
+  }
+
+  const nextName = data.name !== undefined ? normalizeCommandLabel(data.name) : existing.name
+  const nextCommand = data.command !== undefined ? data.command : existing.command
+  const nextDescription = data.description !== undefined
+    ? normalizeDescription(data.description)
+    : existing.description
+
+  if (!nextName) {
+    return { success: false, error: 'INVALID_NAME' }
+  }
+
+  if (!nextCommand.trim()) {
+    return { success: false, error: 'INVALID_COMMAND' }
+  }
+
+  if (Buffer.byteLength(nextCommand, 'utf-8') > MAX_COMMAND_SIZE) {
+    return { success: false, error: 'COMMAND_TOO_LARGE' }
+  }
+
+  const updatedRows = await prisma.$queryRawUnsafe<Array<{
+    id: number
+    userId: number
+    name: string
+    command: string
+    description: string | null
+    createdAt: Date
+    updatedAt: Date
+  }>>(
+    `
+      UPDATE terminal_saved_commands
+      SET
+        name = $1,
+        command = $2,
+        description = $3,
+        updated_at = NOW()
+      WHERE id = $4 AND user_id = $5
+      RETURNING
+        id,
+        user_id AS "userId",
+        name,
+        command,
+        description,
+        created_at AS "createdAt",
+        updated_at AS "updatedAt"
+    `,
+    encryptSensitiveData(nextName),
+    encryptSensitiveData(nextCommand),
+    nextDescription ? encryptSensitiveData(nextDescription) : null,
+    id,
+    userId
+  )
+  const updated = updatedRows[0]
+
+  return {
+    success: true,
+    command: mapTerminalSavedCommand(updated)
+  }
+}
+
+export async function deleteTerminalSavedCommand(id: number, userId: number): Promise<boolean> {
+  const result = await prisma.$executeRawUnsafe(
+    `
+      DELETE FROM terminal_saved_commands
+      WHERE id = $1 AND user_id = $2
+    `,
+    id,
+    userId
+  )
+
+  return Number(result) > 0
+}
diff --git a/server/src/db/tickets.ts b/server/src/db/tickets.ts
new file mode 100644
index 0000000..5070313
--- /dev/null
+++ b/server/src/db/tickets.ts
@@ -0,0 +1,1170 @@
+/**
+ * 工单系统数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { TicketStatus, TicketPriority } from '@prisma/client'
+
+// ==================== 类型定义 ====================
+
+export interface CreateTicketData {
+  userId: number
+  hostId?: number | null  // 可选：不选实例时为 null，工单直接发给管理员
+  instanceId?: number | null
+  subject: string
+  category?: string
+  priority?: TicketPriority
+  content: string  // 首条消息内容
+  attachments?: CreateTicketMessageAttachmentData[]
+}
+
+export interface CreateTicketMessageAttachmentData {
+  provider: string
+  providerVersion: string
+  providerFileId?: string | null
+  filename: string
+  originalName: string
+  mimeType: string
+  sizeBytes: number
+  width?: number | null
+  height?: number | null
+  url: string
+  thumbnailUrl?: string | null
+}
+
+export interface TicketWithDetails {
+  id: number
+  userId: number
+  hostId: number | null  // 可为 null，表示直接发给管理员
+  instanceId: number | null
+  subject: string
+  category: string
+  priority: TicketPriority
+  status: TicketStatus
+  createdAt: string
+  updatedAt: string
+  resolvedAt: string | null
+  closedAt: string | null
+  user: {
+    id: number
+    username: string
+    avatarStyle: string
+    avatarBadgeId: string | null
+  }
+  host: {
+    id: number
+    name: string
+    userId: number
+    countryCode: string
+  } | null  // 可为 null
+  instance: {
+    id: number
+    name: string
+    status: string
+    iconBadgeId?: string | null
+    incusId?: string | null
+    ipv4?: string | null
+    ipv6?: string | null
+    cpu?: number
+    memory?: number
+    disk?: number
+    image?: string
+    imageName?: string | null  // 镜像显示名称
+    packageName?: string | null
+  } | null
+  messageCount: number
+  lastMessage?: {
+    content: string
+    isFromOwner: boolean
+    createdAt: string
+  } | null
+}
+
+export interface TicketMessage {
+  id: number
+  ticketId: number
+  senderId: number
+  content: string
+  isFromOwner: boolean
+  createdAt: string
+  attachments: TicketMessageAttachment[]
+  sender: {
+    id: number
+    username: string
+    avatarStyle: string
+    avatarBadgeId: string | null
+  }
+}
+
+export interface TicketMessageAttachment {
+  id: number
+  ticketId: number
+  messageId: number
+  uploaderId: number
+  provider: string
+  providerVersion: string
+  providerFileId: string | null
+  filename: string
+  originalName: string
+  mimeType: string
+  sizeBytes: number
+  width: number | null
+  height: number | null
+  createdAt: string
+}
+
+// 扩展的工单详情（包含 needsReply 字段）
+export interface TicketWithDetailsExtended extends TicketWithDetails {
+  needsReply: boolean
+}
+
+function mapTicketMessageAttachment(attachment: {
+  id: number
+  ticketId: number
+  messageId: number
+  uploaderId: number
+  provider: string
+  providerVersion: string
+  providerFileId: string | null
+  filename: string
+  originalName: string
+  mimeType: string
+  sizeBytes: number
+  width: number | null
+  height: number | null
+  createdAt: Date
+}): TicketMessageAttachment {
+  return {
+    id: attachment.id,
+    ticketId: attachment.ticketId,
+    messageId: attachment.messageId,
+    uploaderId: attachment.uploaderId,
+    provider: attachment.provider,
+    providerVersion: attachment.providerVersion,
+    providerFileId: attachment.providerFileId,
+    filename: attachment.filename,
+    originalName: attachment.originalName,
+    mimeType: attachment.mimeType,
+    sizeBytes: attachment.sizeBytes,
+    width: attachment.width,
+    height: attachment.height,
+    createdAt: attachment.createdAt.toISOString()
+  }
+}
+
+// ==================== 工单操作 ====================
+
+/**
+ * 创建工单
+ */
+export async function createTicket(data: CreateTicketData): Promise<{ ticketId: number; messageId: number }> {
+  const result = await prisma.$transaction(async (tx) => {
+    // 创建工单
+    const ticket = await tx.ticket.create({
+      data: {
+        userId: data.userId,
+        hostId: data.hostId ?? null,  // 允许为 null
+        instanceId: data.instanceId ?? null,
+        subject: data.subject,
+        category: data.category || 'general',
+        priority: data.priority || 'normal',
+        status: 'open'
+      }
+    })
+
+    // 创建首条消息
+    const message = await tx.ticketMessage.create({
+      data: {
+        ticketId: ticket.id,
+        senderId: data.userId,
+        content: data.content,
+        isFromOwner: false
+      }
+    })
+
+    if (data.attachments && data.attachments.length > 0) {
+      await tx.ticketMessageAttachment.createMany({
+        data: data.attachments.map(attachment => ({
+          ticketId: ticket.id,
+          messageId: message.id,
+          uploaderId: data.userId,
+          provider: attachment.provider,
+          providerVersion: attachment.providerVersion,
+          providerFileId: attachment.providerFileId ?? null,
+          filename: attachment.filename,
+          originalName: attachment.originalName,
+          mimeType: attachment.mimeType,
+          sizeBytes: attachment.sizeBytes,
+          width: attachment.width ?? null,
+          height: attachment.height ?? null,
+          url: attachment.url,
+          thumbnailUrl: attachment.thumbnailUrl ?? null
+        }))
+      })
+    }
+
+    return { ticketId: ticket.id, messageId: message.id }
+  })
+
+  return result
+}
+
+/**
+ * 获取工单详情
+ */
+export async function getTicketById(ticketId: number): Promise<TicketWithDetails | null> {
+  const ticket = await prisma.ticket.findUnique({
+    where: { id: ticketId },
+    include: {
+      user: {
+        select: {
+          id: true,
+          username: true,
+          avatarStyle: true,
+          avatarBadgeId: true
+        }
+      },
+      host: {
+        select: {
+          id: true,
+          name: true,
+          userId: true,
+          countryCode: true
+        }
+      },
+        instance: {
+          select: {
+            id: true,
+            name: true,
+            status: true,
+            iconBadgeId: true,
+            incusId: true,
+            ipv4: true,
+            ipv6: true,
+          cpu: true,
+          memory: true,
+          disk: true,
+          image: true,
+          package: {
+            select: {
+              name: true
+            }
+          }
+        }
+      },
+      _count: {
+        select: { messages: true }
+      },
+      messages: {
+        orderBy: { createdAt: 'desc' },
+        take: 1,
+        select: {
+          content: true,
+          isFromOwner: true,
+          createdAt: true
+        }
+      }
+    }
+  })
+
+  if (!ticket) return null
+
+  // 查询镜像名称
+  let imageName: string | null = null
+  if (ticket.instance?.image) {
+    const systemImage = await prisma.systemImage.findUnique({
+      where: { remoteAlias: ticket.instance.image },
+      select: { name: true }
+    })
+    imageName = systemImage?.name || null
+  }
+
+  return {
+    id: ticket.id,
+    userId: ticket.userId,
+    hostId: ticket.hostId,
+    instanceId: ticket.instanceId,
+    subject: ticket.subject,
+    category: ticket.category,
+    priority: ticket.priority,
+    status: ticket.status,
+    createdAt: ticket.createdAt.toISOString(),
+    updatedAt: ticket.updatedAt.toISOString(),
+    resolvedAt: ticket.resolvedAt?.toISOString() || null,
+    closedAt: ticket.closedAt?.toISOString() || null,
+    user: ticket.user,
+    host: ticket.host,
+      instance: ticket.instance ? {
+        id: ticket.instance.id,
+        name: ticket.instance.name,
+        status: ticket.instance.status,
+        iconBadgeId: ticket.instance.iconBadgeId,
+        incusId: ticket.instance.incusId,
+        ipv4: ticket.instance.ipv4,
+        ipv6: ticket.instance.ipv6,
+      cpu: ticket.instance.cpu,
+      memory: ticket.instance.memory,
+      disk: ticket.instance.disk,
+      image: ticket.instance.image,
+      imageName,
+      packageName: ticket.instance.package?.name || null
+    } : null,
+    messageCount: ticket._count.messages,
+    lastMessage: ticket.messages[0] ? {
+      content: ticket.messages[0].content,
+      isFromOwner: ticket.messages[0].isFromOwner,
+      createdAt: ticket.messages[0].createdAt.toISOString()
+    } : null
+  }
+}
+
+/**
+ * 获取用户创建的工单列表
+ * 支持 active 状态筛选（排除已关闭）、搜索
+ */
+export async function getUserTickets(
+  userId: number,
+  options: {
+    status?: TicketStatus | 'active'
+    search?: string
+    page?: number
+    pageSize?: number
+  } = {}
+): Promise<{
+  tickets: TicketWithDetailsExtended[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}> {
+  const page = options.page || 1
+  const pageSize = options.pageSize || 10
+  const skip = (page - 1) * pageSize
+
+  const where: any = { userId }
+  
+  // 状态筛选：active 表示排除 closed
+  if (options.status === 'active') {
+    where.status = { not: 'closed' }
+  } else if (options.status) {
+    where.status = options.status
+  }
+
+  // 搜索：支持主题和工单ID
+  if (options.search && options.search.trim()) {
+    const searchTerm = options.search.trim()
+    const searchId = parseInt(searchTerm)
+    if (!isNaN(searchId)) {
+      // 如果是数字，同时搜索 ID 和主题
+      where.OR = [
+        { id: searchId },
+        { subject: { contains: searchTerm, mode: 'insensitive' } }
+      ]
+    } else {
+      where.subject = { contains: searchTerm, mode: 'insensitive' }
+    }
+  }
+
+  const [tickets, total] = await Promise.all([
+    prisma.ticket.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        host: {
+          select: {
+            id: true,
+            name: true,
+            userId: true,
+            countryCode: true
+          }
+        },
+        instance: {
+          select: {
+            id: true,
+            name: true,
+            status: true,
+            iconBadgeId: true
+          }
+        },
+        _count: {
+          select: { messages: true }
+        },
+        messages: {
+          orderBy: { createdAt: 'desc' },
+          take: 1,
+          select: {
+            content: true,
+            isFromOwner: true,
+            createdAt: true
+          }
+        }
+      },
+      // 用户视角：需要回复的（宿主机回复了）排前面，按更新时间降序
+      orderBy: { updatedAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.ticket.count({ where })
+  ])
+
+  return {
+    tickets: tickets.map(ticket => {
+      // 用户视角：如果最后一条消息来自宿主机主人，说明需要用户回复
+      const lastMsg = ticket.messages[0]
+      const needsReply = ticket.status !== 'closed' && lastMsg?.isFromOwner === true
+      
+      return {
+        id: ticket.id,
+        userId: ticket.userId,
+        hostId: ticket.hostId,
+        instanceId: ticket.instanceId,
+        subject: ticket.subject,
+        category: ticket.category,
+        priority: ticket.priority,
+        status: ticket.status,
+        createdAt: ticket.createdAt.toISOString(),
+        updatedAt: ticket.updatedAt.toISOString(),
+        resolvedAt: ticket.resolvedAt?.toISOString() || null,
+        closedAt: ticket.closedAt?.toISOString() || null,
+        user: ticket.user,
+        host: ticket.host,
+        instance: ticket.instance,
+        messageCount: ticket._count.messages,
+        lastMessage: lastMsg ? {
+          content: lastMsg.content,
+          isFromOwner: lastMsg.isFromOwner,
+          createdAt: lastMsg.createdAt.toISOString()
+        } : null,
+        needsReply
+      }
+    }),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取宿主机的工单列表（宿主机所有者）
+ * 支持 active 状态筛选、搜索、智能排序
+ */
+export async function getHostTickets(
+  hostId: number,
+  options: {
+    status?: TicketStatus | 'active'
+    search?: string
+    page?: number
+    pageSize?: number
+  } = {}
+): Promise<{
+  tickets: TicketWithDetailsExtended[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}> {
+  const page = options.page || 1
+  const pageSize = options.pageSize || 10
+  const skip = (page - 1) * pageSize
+
+  const where: any = { hostId }
+  
+  // 状态筛选
+  if (options.status === 'active') {
+    where.status = { not: 'closed' }
+  } else if (options.status) {
+    where.status = options.status
+  }
+
+  // 搜索
+  if (options.search && options.search.trim()) {
+    const searchTerm = options.search.trim()
+    const searchId = parseInt(searchTerm)
+    if (!isNaN(searchId)) {
+      where.OR = [
+        { id: searchId },
+        { subject: { contains: searchTerm, mode: 'insensitive' } },
+        { user: { username: { contains: searchTerm, mode: 'insensitive' } } }
+      ]
+    } else {
+      where.OR = [
+        { subject: { contains: searchTerm, mode: 'insensitive' } },
+        { user: { username: { contains: searchTerm, mode: 'insensitive' } } }
+      ]
+    }
+  }
+
+  const [tickets, total] = await Promise.all([
+    prisma.ticket.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        host: {
+          select: {
+            id: true,
+            name: true,
+            userId: true,
+            countryCode: true
+          }
+        },
+        instance: {
+          select: {
+            id: true,
+            name: true,
+            status: true,
+            iconBadgeId: true
+          }
+        },
+        _count: {
+          select: { messages: true }
+        },
+        messages: {
+          orderBy: { createdAt: 'desc' },
+          take: 1,
+          select: {
+            content: true,
+            isFromOwner: true,
+            createdAt: true
+          }
+        }
+      },
+      // 排序策略：按更新时间降序，便于在内存中排序
+      orderBy: { updatedAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.ticket.count({ where })
+  ])
+
+  // 构建返回数据，添加 needsReply 字段
+  const ticketsWithNeedsReply = tickets.map(ticket => {
+    const lastMsg = ticket.messages[0]
+    // 宿主机视角：如果最后一条消息来自用户（isFromOwner=false），说明需要宿主机主人回复
+    const needsReply = ticket.status !== 'closed' && lastMsg?.isFromOwner === false
+    
+    return {
+      id: ticket.id,
+      userId: ticket.userId,
+      hostId: ticket.hostId,
+      instanceId: ticket.instanceId,
+      subject: ticket.subject,
+      category: ticket.category,
+      priority: ticket.priority,
+      status: ticket.status,
+      createdAt: ticket.createdAt.toISOString(),
+      updatedAt: ticket.updatedAt.toISOString(),
+      resolvedAt: ticket.resolvedAt?.toISOString() || null,
+      closedAt: ticket.closedAt?.toISOString() || null,
+      user: ticket.user,
+      host: ticket.host,
+      instance: ticket.instance,
+      messageCount: ticket._count.messages,
+      lastMessage: lastMsg ? {
+        content: lastMsg.content,
+        isFromOwner: lastMsg.isFromOwner,
+        createdAt: lastMsg.createdAt.toISOString()
+      } : null,
+      needsReply
+    }
+  })
+
+  // 智能排序：需要回复的排前面，再按优先级和更新时间
+  const priorityOrder: Record<string, number> = { urgent: 0, high: 1, normal: 2, low: 3 }
+  const statusOrder: Record<string, number> = { open: 0, in_progress: 1, resolved: 2, closed: 3 }
+  
+  ticketsWithNeedsReply.sort((a, b) => {
+    // 1. 需要回复的排前面
+    if (a.needsReply !== b.needsReply) return a.needsReply ? -1 : 1
+    // 2. 按状态排序
+    if (a.status !== b.status) return statusOrder[a.status] - statusOrder[b.status]
+    // 3. 按优先级排序
+    if (a.priority !== b.priority) return priorityOrder[a.priority] - priorityOrder[b.priority]
+    // 4. 按更新时间排序：需要回复的按旧到新，其他按新到旧
+    const aTime = new Date(a.updatedAt).getTime()
+    const bTime = new Date(b.updatedAt).getTime()
+    return a.needsReply ? aTime - bTime : bTime - aTime
+  })
+
+  return {
+    tickets: ticketsWithNeedsReply,
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取用户所有宿主机的工单（汇总视图）
+ * 支持 active 状态筛选、搜索、智能排序
+ */
+export async function getOwnerAllTickets(
+  ownerId: number | undefined,
+  options: {
+    status?: TicketStatus | 'active'
+    hostId?: number
+    sourceType?: 'user' | 'official' | 'hosted'
+    search?: string
+    page?: number
+    pageSize?: number
+  } = {}
+): Promise<{
+  tickets: TicketWithDetailsExtended[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}> {
+  const page = options.page || 1
+  const pageSize = options.pageSize || 10
+  const skip = (page - 1) * pageSize
+
+  const where: any = {}
+  
+  // 如果指定了 ownerId，只查询该用户的节点工单；否则查询所有工单（管理员）
+  if (ownerId !== undefined) {
+    where.host = { userId: ownerId }
+  } else if (options.sourceType === 'user') {
+    where.hostId = null
+  } else if (options.sourceType === 'official') {
+    where.host = { user: { role: 'admin' } }
+  } else if (options.sourceType === 'hosted') {
+    where.host = { user: { role: { not: 'admin' } } }
+  }
+  
+  // 状态筛选
+  if (options.status === 'active') {
+    where.status = { not: 'closed' }
+  } else if (options.status) {
+    where.status = options.status
+  }
+  
+  if (options.hostId && options.sourceType !== 'user') {
+    where.hostId = options.hostId
+  }
+
+  // 搜索
+  if (options.search && options.search.trim()) {
+    const searchTerm = options.search.trim()
+    const searchId = parseInt(searchTerm)
+    if (!isNaN(searchId)) {
+      where.OR = [
+        { id: searchId },
+        { subject: { contains: searchTerm, mode: 'insensitive' } },
+        { user: { username: { contains: searchTerm, mode: 'insensitive' } } }
+      ]
+    } else {
+      where.OR = [
+        { subject: { contains: searchTerm, mode: 'insensitive' } },
+        { user: { username: { contains: searchTerm, mode: 'insensitive' } } }
+      ]
+    }
+  }
+
+  const [tickets, total] = await Promise.all([
+    prisma.ticket.findMany({
+      where,
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        host: {
+          select: {
+            id: true,
+            name: true,
+            userId: true,
+            countryCode: true
+          }
+        },
+        instance: {
+          select: {
+            id: true,
+            name: true,
+            status: true,
+            iconBadgeId: true
+          }
+        },
+        _count: {
+          select: { messages: true }
+        },
+        messages: {
+          orderBy: { createdAt: 'desc' },
+          take: 1,
+          select: {
+            content: true,
+            isFromOwner: true,
+            createdAt: true
+          }
+        }
+      },
+      // 排序策略：按更新时间降序，便于在内存中排序
+      orderBy: { updatedAt: 'desc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.ticket.count({ where })
+  ])
+
+  // 构建返回数据，添加 needsReply 字段
+  const ticketsWithNeedsReply = tickets.map(ticket => {
+    const lastMsg = ticket.messages[0]
+    // 宿主机视角：如果最后一条消息来自用户（isFromOwner=false），说明需要宿主机主人回复
+    const needsReply = ticket.status !== 'closed' && lastMsg?.isFromOwner === false
+    
+    return {
+      id: ticket.id,
+      userId: ticket.userId,
+      hostId: ticket.hostId,
+      instanceId: ticket.instanceId,
+      subject: ticket.subject,
+      category: ticket.category,
+      priority: ticket.priority,
+      status: ticket.status,
+      createdAt: ticket.createdAt.toISOString(),
+      updatedAt: ticket.updatedAt.toISOString(),
+      resolvedAt: ticket.resolvedAt?.toISOString() || null,
+      closedAt: ticket.closedAt?.toISOString() || null,
+      user: ticket.user,
+      host: ticket.host,
+      instance: ticket.instance,
+      messageCount: ticket._count.messages,
+      lastMessage: lastMsg ? {
+        content: lastMsg.content,
+        isFromOwner: lastMsg.isFromOwner,
+        createdAt: lastMsg.createdAt.toISOString()
+      } : null,
+      needsReply
+    }
+  })
+
+  // 智能排序：需要回复的排前面，再按优先级和更新时间
+  const priorityOrder: Record<string, number> = { urgent: 0, high: 1, normal: 2, low: 3 }
+  const statusOrder: Record<string, number> = { open: 0, in_progress: 1, resolved: 2, closed: 3 }
+  
+  ticketsWithNeedsReply.sort((a, b) => {
+    // 1. 需要回复的排前面
+    if (a.needsReply !== b.needsReply) return a.needsReply ? -1 : 1
+    // 2. 按状态排序
+    if (a.status !== b.status) return statusOrder[a.status] - statusOrder[b.status]
+    // 3. 按优先级排序
+    if (a.priority !== b.priority) return priorityOrder[a.priority] - priorityOrder[b.priority]
+    // 4. 按更新时间排序：需要回复的按旧到新，其他按新到旧
+    const aTime = new Date(a.updatedAt).getTime()
+    const bTime = new Date(b.updatedAt).getTime()
+    return a.needsReply ? aTime - bTime : bTime - aTime
+  })
+
+  return {
+    tickets: ticketsWithNeedsReply,
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 获取工单消息列表
+ */
+export async function getTicketMessages(
+  ticketId: number,
+  options: { page?: number; pageSize?: number } = {}
+): Promise<{
+  messages: TicketMessage[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}> {
+  const page = options.page || 1
+  const pageSize = options.pageSize || 50
+  const skip = (page - 1) * pageSize
+
+  const [messages, total] = await Promise.all([
+    prisma.ticketMessage.findMany({
+      where: { ticketId },
+      include: {
+        sender: {
+          select: {
+            id: true,
+            username: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        attachments: {
+          orderBy: { id: 'asc' }
+        }
+      },
+      orderBy: { createdAt: 'asc' },
+      skip,
+      take: pageSize
+    }),
+    prisma.ticketMessage.count({ where: { ticketId } })
+  ])
+
+  return {
+    messages: messages.map(msg => ({
+      id: msg.id,
+      ticketId: msg.ticketId,
+      senderId: msg.senderId,
+      content: msg.content,
+      isFromOwner: msg.isFromOwner,
+      createdAt: msg.createdAt.toISOString(),
+      attachments: msg.attachments.map(mapTicketMessageAttachment),
+      sender: msg.sender
+    })),
+    total,
+    page,
+    pageSize,
+    totalPages: Math.ceil(total / pageSize)
+  }
+}
+
+/**
+ * 添加工单消息
+ */
+export async function addTicketMessage(
+  ticketId: number,
+  senderId: number,
+  content: string,
+  isFromOwner: boolean,
+  attachments: CreateTicketMessageAttachmentData[] = []
+): Promise<TicketMessage> {
+  const message = await prisma.$transaction(async tx => {
+    const createdMessage = await tx.ticketMessage.create({
+      data: {
+        ticketId,
+        senderId,
+        content,
+        isFromOwner
+      }
+    })
+
+    if (attachments.length > 0) {
+      await tx.ticketMessageAttachment.createMany({
+        data: attachments.map(attachment => ({
+          ticketId,
+          messageId: createdMessage.id,
+          uploaderId: senderId,
+          provider: attachment.provider,
+          providerVersion: attachment.providerVersion,
+          providerFileId: attachment.providerFileId ?? null,
+          filename: attachment.filename,
+          originalName: attachment.originalName,
+          mimeType: attachment.mimeType,
+          sizeBytes: attachment.sizeBytes,
+          width: attachment.width ?? null,
+          height: attachment.height ?? null,
+          url: attachment.url,
+          thumbnailUrl: attachment.thumbnailUrl ?? null
+        }))
+      })
+    }
+
+    await tx.ticket.update({
+      where: { id: ticketId },
+      data: { updatedAt: new Date() }
+    })
+
+    return tx.ticketMessage.findUniqueOrThrow({
+      where: { id: createdMessage.id },
+      include: {
+        sender: {
+          select: {
+            id: true,
+            username: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        attachments: {
+          orderBy: { id: 'asc' }
+        }
+      }
+    })
+  })
+
+  return {
+    id: message.id,
+    ticketId: message.ticketId,
+    senderId: message.senderId,
+    content: message.content,
+    isFromOwner: message.isFromOwner,
+    createdAt: message.createdAt.toISOString(),
+    attachments: message.attachments.map(mapTicketMessageAttachment),
+    sender: message.sender
+  }
+}
+
+/**
+ * 更新工单状态
+ */
+export async function updateTicketStatus(
+  ticketId: number,
+  status: TicketStatus
+): Promise<void> {
+  const updateData: {
+    status: TicketStatus
+    resolvedAt?: Date | null
+    closedAt?: Date | null
+  } = { status }
+
+  if (status === 'resolved') {
+    updateData.resolvedAt = new Date()
+  } else if (status === 'closed') {
+    updateData.closedAt = new Date()
+  } else if (status === 'open' || status === 'in_progress') {
+    updateData.resolvedAt = null
+    updateData.closedAt = null
+  }
+
+  await prisma.ticket.update({
+    where: { id: ticketId },
+    data: updateData
+  })
+}
+
+/**
+ * 检查用户是否可以创建工单（必须在该宿主机上有实例）
+ */
+export async function canUserCreateTicket(userId: number, hostId: number): Promise<boolean> {
+  const count = await prisma.instance.count({
+    where: {
+      userId,
+      hostId,
+      status: { not: 'deleted' }
+    }
+  })
+  return count > 0
+}
+
+/**
+ * 检查用户是否可以访问工单
+ * @param userId 用户ID
+ * @param ticketId 工单ID
+ * @param userRole 用户角色，可选，管理员可以访问所有工单
+ */
+export async function canUserAccessTicket(userId: number, ticketId: number, userRole?: 'admin' | 'user'): Promise<{
+  canAccess: boolean
+  isOwner: boolean
+  isCreator: boolean
+  isAdmin: boolean
+}> {
+  const ticket = await prisma.ticket.findUnique({
+    where: { id: ticketId },
+    include: {
+      host: {
+        select: { userId: true }
+      }
+    }
+  })
+
+  if (!ticket) {
+    return { canAccess: false, isOwner: false, isCreator: false, isAdmin: false }
+  }
+
+  const isCreator = ticket.userId === userId
+  const isOwner = ticket.host?.userId === userId  // host 可能为 null（无实例工单直接发给管理员）
+  const isAdmin = userRole === 'admin'
+
+  return {
+    canAccess: isCreator || isOwner || isAdmin,
+    isOwner: isOwner || isAdmin, // 管理员视为所有者
+    isCreator,
+    isAdmin
+  }
+}
+
+/**
+ * 获取宿主机所有者待处理工单数量
+ */
+export async function getOwnerPendingTicketCount(ownerId: number | undefined): Promise<number> {
+  const where: any = {
+    status: { in: ['open', 'in_progress'] }
+  }
+  
+  // 如果指定了 ownerId，只查询该用户的节点工单；否则查询所有工单（管理员）
+  if (ownerId !== undefined) {
+    where.host = { userId: ownerId }
+  }
+  
+  return prisma.ticket.count({ where })
+}
+
+/**
+ * 获取用户待处理工单数量
+ */
+export async function getUserOpenTicketCount(userId: number): Promise<number> {
+  return prisma.ticket.count({
+    where: {
+      userId,
+      status: { in: ['open', 'in_progress'] }
+    }
+  })
+}
+
+/**
+ * 获取需要自动关闭的工单
+ * 条件：
+ * 1. 状态为 resolved（已解决）
+ * 2. resolvedAt 早于指定时间（默认24小时前）
+ * 3. 最后一条消息来自宿主机主人（isFromOwner = true），表示不需要管理员再回复
+ */
+export async function getTicketsForAutoClose(timeoutMs: number = 24 * 60 * 60 * 1000): Promise<{
+  id: number
+  subject: string
+  userId: number
+  hostId: number | null
+  resolvedAt: Date
+}[]> {
+  const cutoffTime = new Date(Date.now() - timeoutMs)
+
+  // 查询符合条件的工单
+  const tickets = await prisma.ticket.findMany({
+    where: {
+      status: 'resolved',
+      resolvedAt: {
+        lt: cutoffTime
+      }
+    },
+    select: {
+      id: true,
+      subject: true,
+      userId: true,
+      hostId: true,
+      resolvedAt: true,
+      messages: {
+        orderBy: { createdAt: 'desc' },
+        take: 1,
+        select: {
+          isFromOwner: true
+        }
+      }
+    }
+  })
+
+  // 过滤：只保留最后一条消息来自宿主机主人的工单
+  return tickets
+    .filter(ticket => ticket.messages[0]?.isFromOwner === true)
+    .map(ticket => ({
+      id: ticket.id,
+      subject: ticket.subject,
+      userId: ticket.userId,
+      hostId: ticket.hostId,
+      resolvedAt: ticket.resolvedAt!
+    }))
+}
+
+/**
+ * 批量自动关闭工单
+ * 返回关闭的工单数量
+ */
+export async function autoCloseTickets(ticketIds: number[]): Promise<number> {
+  if (ticketIds.length === 0) return 0
+
+  const result = await prisma.ticket.updateMany({
+    where: {
+      id: { in: ticketIds },
+      status: 'resolved' // 安全检查：确保只关闭 resolved 状态的工单
+    },
+    data: {
+      status: 'closed',
+      closedAt: new Date()
+    }
+  })
+
+  return result.count
+}
+
+/**
+ * 删除工单消息（仅管理员）
+ */
+export async function deleteTicketMessage(messageId: number): Promise<boolean> {
+  const result = await prisma.ticketMessage.delete({
+    where: { id: messageId }
+  })
+  return !!result
+}
+
+export async function getTicketMessageAttachments(messageId: number): Promise<Array<{
+  id: number
+  ticketId: number
+  messageId: number
+  providerVersion: string
+  providerFileId: string | null
+  url: string
+}>> {
+  return prisma.ticketMessageAttachment.findMany({
+    where: { messageId },
+    select: {
+      id: true,
+      ticketId: true,
+      messageId: true,
+      providerVersion: true,
+      providerFileId: true,
+      url: true
+    }
+  })
+}
+
+/**
+ * 获取工单消息详情
+ */
+export async function getTicketMessageById(messageId: number): Promise<{
+  id: number
+  ticketId: number
+  senderId: number
+} | null> {
+  const message = await prisma.ticketMessage.findUnique({
+    where: { id: messageId },
+    select: {
+      id: true,
+      ticketId: true,
+      senderId: true
+    }
+  })
+  return message
+}
+
+export async function getTicketMessageAttachmentById(attachmentId: number): Promise<{
+  id: number
+  ticketId: number
+  messageId: number
+  mimeType: string
+  filename: string
+  url: string
+} | null> {
+  return prisma.ticketMessageAttachment.findUnique({
+    where: { id: attachmentId },
+    select: {
+      id: true,
+      ticketId: true,
+      messageId: true,
+      mimeType: true,
+      filename: true,
+      url: true
+    }
+  })
+}
diff --git a/server/src/db/traffic.ts b/server/src/db/traffic.ts
new file mode 100644
index 0000000..125889b
--- /dev/null
+++ b/server/src/db/traffic.ts
@@ -0,0 +1,850 @@
+/**
+ * 流量统计相关数据库操作
+ * 
+ * 安全改进：批量操作使用事务隔离级别配置
+ */
+
+import { prisma } from './prisma.js'
+import { applyTrafficMultiplier } from '../lib/traffic-multiplier.js'
+import { calculateInstanceTrafficStatus } from '../services/traffic-utils.js'
+import type { TrafficStatus } from '@prisma/client'
+
+// 批量更新分片大小（避免单次 SQL 语句过大，支持大规模实例）
+const BATCH_SIZE = 1000
+
+/**
+ * 验证并清理 SQL 值（防止 SQL 注入，虽然输入是受控的数字类型）
+ */
+function sanitizeNumber(value: number | bigint): string {
+    if (typeof value === 'bigint') {
+        // bigint 值确保是有效数字
+        if (value < 0n) {
+            throw new Error(`Invalid bigint value: ${value}`)
+        }
+        return value.toString()
+    }
+    // number 值验证
+    if (!Number.isInteger(value) || value < 0 || !Number.isFinite(value)) {
+        throw new Error(`Invalid number value: ${value}`)
+    }
+    return value.toString()
+}
+
+/**
+ * 验证并清理日期字符串
+ */
+function sanitizeDate(date: Date): string {
+    const dateStr = date.toISOString().split('T')[0] // YYYY-MM-DD
+    // 验证格式：YYYY-MM-DD
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
+        throw new Error(`Invalid date format: ${dateStr}`)
+    }
+    return dateStr
+}
+
+// ==================== 快照操作 ====================
+
+/**
+ * 获取实例的流量快照
+ */
+export async function getTrafficSnapshot(instanceId: number) {
+    return prisma.trafficSnapshot.findUnique({
+        where: { instanceId }
+    })
+}
+
+/**
+ * 更新或创建流量快照
+ */
+export async function upsertTrafficSnapshot(
+    instanceId: number,
+    rxRaw: bigint,
+    txRaw: bigint
+) {
+    return prisma.trafficSnapshot.upsert({
+        where: { instanceId },
+        update: { rxRaw, txRaw },
+        create: { instanceId, rxRaw, txRaw }
+    })
+}
+
+/**
+ * 批量更新流量快照
+ * 使用 PostgreSQL 的 INSERT ... ON CONFLICT 进行高效的批量更新
+ * 支持大规模实例（10000+），使用分片处理避免事务过大
+ */
+export async function bulkUpsertSnapshots(
+    snapshots: Array<{ instanceId: number; rxRaw: bigint; txRaw: bigint }>
+) {
+    if (snapshots.length === 0) return
+
+    // 分批处理，避免单次事务过大
+    for (let i = 0; i < snapshots.length; i += BATCH_SIZE) {
+        const batch = snapshots.slice(i, i + BATCH_SIZE)
+        
+        // 使用 PostgreSQL 的 INSERT ... ON CONFLICT (upsert) 语法进行批量更新
+        // 构建 VALUES 子句（验证并清理所有值）
+        const valuesClause = batch
+            .map(s => {
+                const instanceId = sanitizeNumber(s.instanceId)
+                const rxRaw = sanitizeNumber(s.rxRaw)
+                const txRaw = sanitizeNumber(s.txRaw)
+                return `(${instanceId}, ${rxRaw}, ${txRaw}, NOW())`
+            })
+            .join(', ')
+        
+        // 使用原生 SQL 批量 upsert
+        try {
+            await prisma.$executeRawUnsafe(`
+                INSERT INTO traffic_snapshots (instance_id, rx_raw, tx_raw, updated_at)
+                VALUES ${valuesClause}
+                ON CONFLICT (instance_id)
+                DO UPDATE SET
+                    rx_raw = EXCLUDED.rx_raw,
+                    tx_raw = EXCLUDED.tx_raw,
+                    updated_at = NOW()
+            `)
+        } catch (error) {
+            console.error(`[Traffic] Failed to bulk upsert snapshots (batch ${i}-${i + batch.length}):`, error)
+            throw error
+        }
+    }
+}
+
+// ==================== 每日聚合操作 ====================
+
+/**
+ * 更新或创建每日流量记录
+ */
+export async function upsertDailyTraffic(
+    instanceId: number,
+    date: Date,
+    rxIncrement: bigint,
+    txIncrement: bigint
+) {
+    // 标准化日期为当天 00:00:00
+    const normalizedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+
+    const existing = await prisma.dailyTraffic.findUnique({
+        where: {
+            instanceId_date: { instanceId, date: normalizedDate }
+        }
+    })
+
+    if (existing) {
+        return prisma.dailyTraffic.update({
+            where: { id: existing.id },
+            data: {
+                rxTotal: existing.rxTotal + rxIncrement,
+                txTotal: existing.txTotal + txIncrement
+            }
+        })
+    }
+
+    return prisma.dailyTraffic.create({
+        data: {
+            instanceId,
+            date: normalizedDate,
+            rxTotal: rxIncrement,
+            txTotal: txIncrement
+        }
+    })
+}
+
+/**
+ * 批量更新或创建每日流量记录
+ * 使用 PostgreSQL 的 INSERT ... ON CONFLICT 进行高效的批量更新
+ * 支持大规模实例（10000+），使用分片处理避免事务过大
+ */
+export async function bulkUpsertDailyTraffic(
+    updates: Array<{ instanceId: number; date: Date; rxIncrement: bigint; txIncrement: bigint }>
+) {
+    if (updates.length === 0) return
+
+    // 标准化日期并分组（按 instanceId + date）
+    const normalizedUpdates = updates.map(u => ({
+        instanceId: u.instanceId,
+        date: new Date(u.date.getFullYear(), u.date.getMonth(), u.date.getDate()),
+        rxIncrement: u.rxIncrement,
+        txIncrement: u.txIncrement
+    }))
+
+    // 合并同一个实例同一天的增量
+    const dailyMap = new Map<string, { instanceId: number; date: Date; rxTotal: bigint; txTotal: bigint }>()
+    for (const u of normalizedUpdates) {
+        const key = `${u.instanceId}-${u.date.getTime()}`
+        const existing = dailyMap.get(key)
+        if (existing) {
+            existing.rxTotal += u.rxIncrement
+            existing.txTotal += u.txIncrement
+        } else {
+            dailyMap.set(key, {
+                instanceId: u.instanceId,
+                date: u.date,
+                rxTotal: u.rxIncrement,
+                txTotal: u.txIncrement
+            })
+        }
+    }
+
+    const dailyArray = Array.from(dailyMap.values())
+    
+    // 分批处理，避免单次事务过大
+    for (let i = 0; i < dailyArray.length; i += BATCH_SIZE) {
+        const batch = dailyArray.slice(i, i + BATCH_SIZE)
+        
+        // 使用 PostgreSQL 的 INSERT ... ON CONFLICT (upsert) 语法进行批量更新
+        // 构建 VALUES 子句（验证并清理所有值）
+        const valuesClause = batch
+            .map(({ instanceId, date, rxTotal, txTotal }) => {
+                const instanceIdStr = sanitizeNumber(instanceId)
+                const dateStr = sanitizeDate(date)
+                const rxTotalStr = sanitizeNumber(rxTotal)
+                const txTotalStr = sanitizeNumber(txTotal)
+                return `(${instanceIdStr}, '${dateStr}'::date, ${rxTotalStr}, ${txTotalStr})`
+            })
+            .join(', ')
+        
+        // 使用原生 SQL 批量 upsert
+        try {
+            await prisma.$executeRawUnsafe(`
+                INSERT INTO daily_traffic (instance_id, date, rx_total, tx_total)
+                VALUES ${valuesClause}
+                ON CONFLICT (instance_id, date)
+                DO UPDATE SET
+                    rx_total = daily_traffic.rx_total + EXCLUDED.rx_total,
+                    tx_total = daily_traffic.tx_total + EXCLUDED.tx_total
+            `)
+        } catch (error) {
+            console.error(`[Traffic] Failed to bulk upsert daily traffic (batch ${i}-${i + batch.length}):`, error)
+            throw error
+        }
+    }
+}
+
+/**
+ * 获取实例的每日流量历史
+ */
+export async function getDailyTraffic(instanceId: number, days: number = 30) {
+    const startDate = new Date()
+    startDate.setDate(startDate.getDate() - days)
+    startDate.setHours(0, 0, 0, 0)
+
+    return prisma.dailyTraffic.findMany({
+        where: {
+            instanceId,
+            date: { gte: startDate }
+        },
+        orderBy: { date: 'asc' }
+    })
+}
+
+/**
+ * 获取实例的每日流量历史（按周期）
+ * @param instanceId 实例 ID
+ * @param periodStart 周期开始日期
+ */
+export async function getDailyTrafficByPeriod(instanceId: number, periodStart: Date) {
+    return prisma.dailyTraffic.findMany({
+        where: {
+            instanceId,
+            date: { gte: periodStart }
+        },
+        orderBy: { date: 'asc' }
+    })
+}
+
+/**
+ * 获取节点的每日流量历史（聚合该节点下所有实例的流量）
+ * 根据节点的 trafficResetDay 计算周期起始日期
+ * @param hostId 节点 ID
+ * @param trafficResetDay 流量重置日（默认 1）
+ */
+export async function getHostDailyTraffic(hostId: number, trafficResetDay: number = 1) {
+    // 导入周期计算函数
+    const { getTrafficPeriod } = await import('../services/traffic-utils.js')
+    const { periodStart } = getTrafficPeriod(trafficResetDay)
+
+    // 使用原生 SQL 进行聚合查询
+    // 按日期分组，聚合节点下所有当前存在的实例的流量
+    // 注意：SUM() 返回 numeric 类型，必须显式转换为 bigint，否则 Prisma 返回 Decimal 对象
+    const result = await prisma.$queryRaw<Array<{
+        date: Date
+        rx_total: bigint
+        tx_total: bigint
+    }>>`
+        SELECT 
+            dt.date,
+            COALESCE(SUM(dt.rx_total), 0)::bigint as rx_total,
+            COALESCE(SUM(dt.tx_total), 0)::bigint as tx_total
+        FROM daily_traffic dt
+        INNER JOIN instances i ON dt.instance_id = i.id
+        WHERE i.host_id = ${hostId}
+          AND i.status != 'deleted'
+          AND dt.date >= ${periodStart}
+        GROUP BY dt.date
+        ORDER BY dt.date ASC
+    `
+
+    return result.map(row => ({
+        date: row.date,
+        rxTotal: row.rx_total,
+        txTotal: row.tx_total
+    }))
+}
+
+/**
+ * 获取节点的流量汇总（基于实例当前的 monthlyTrafficUsed）
+ * @param hostId 节点 ID
+ */
+export async function getHostTrafficSummary(hostId: number) {
+    // 聚合节点下所有活跃实例的流量使用和流量限制
+    const result = await prisma.instance.aggregate({
+        where: {
+            hostId,
+            status: { notIn: ['deleted'] }
+        },
+        _sum: {
+            monthlyTrafficUsed: true,
+            monthlyTrafficLimit: true
+        }
+    })
+
+    return {
+        totalUsed: result._sum.monthlyTrafficUsed || 0n,
+        totalLimit: result._sum.monthlyTrafficLimit || 0n
+    }
+}
+
+/**
+ * 清理过期的每日流量记录
+ */
+export async function cleanOldDailyTraffic(retentionDays: number = 30) {
+    const cutoffDate = new Date()
+    cutoffDate.setDate(cutoffDate.getDate() - retentionDays)
+    cutoffDate.setHours(0, 0, 0, 0)
+
+    const result = await prisma.dailyTraffic.deleteMany({
+        where: {
+            date: { lt: cutoffDate }
+        }
+    })
+
+    return result.count
+}
+
+// ==================== 用量更新操作 ====================
+
+/**
+ * 增加实例流量用量
+ */
+export async function incrementInstanceTrafficUsage(instanceId: number, delta: bigint) {
+    return prisma.instance.update({
+        where: { id: instanceId },
+        data: {
+            monthlyTrafficUsed: { increment: delta }
+        }
+    })
+}
+
+/**
+ * 批量增加实例流量用量
+ * 使用 PostgreSQL 的 UPDATE ... FROM VALUES 进行高效的批量更新
+ * 支持大规模实例（10000+），使用分片处理避免事务过大
+ */
+export async function bulkIncrementInstanceTrafficUsage(
+    updates: Array<{ instanceId: number; delta: bigint }>
+) {
+    if (updates.length === 0) return
+
+    // 按实例 ID 分组，累加同一个实例的增量（理论上不应该出现，但为了安全）
+    const instanceDeltas = new Map<number, bigint>()
+    for (const { instanceId, delta } of updates) {
+        const current = instanceDeltas.get(instanceId) || 0n
+        instanceDeltas.set(instanceId, current + delta)
+    }
+
+    // 转换为数组并按分片大小分批处理
+    const deltasArray = Array.from(instanceDeltas.entries())
+    
+    // 分批处理，避免单次事务过大
+    for (let i = 0; i < deltasArray.length; i += BATCH_SIZE) {
+        const batch = deltasArray.slice(i, i + BATCH_SIZE)
+        
+        // 使用 PostgreSQL 的 UPDATE ... FROM VALUES 语法进行批量更新
+        // 构建 VALUES 子句（验证并清理所有值）
+        const valuesClause = batch
+            .map(([instanceId, delta]) => {
+                const instanceIdStr = sanitizeNumber(instanceId)
+                const deltaStr = sanitizeNumber(delta)
+                return `(${instanceIdStr}, ${deltaStr})`
+            })
+            .join(', ')
+        
+        // 使用原生 SQL 批量更新
+        try {
+            await prisma.$executeRawUnsafe(`
+                UPDATE instances AS i
+                SET monthly_traffic_used = i.monthly_traffic_used + v.delta::bigint
+                FROM (VALUES ${valuesClause}) AS v(id, delta)
+                WHERE i.id = v.id
+            `)
+        } catch (error) {
+            console.error(`[Traffic] Failed to bulk increment instance traffic usage (batch ${i}-${i + batch.length}):`, error)
+            throw error
+        }
+    }
+}
+
+/**
+ * 增加用户流量用量
+ */
+export async function incrementUserTrafficUsage(userId: number, delta: bigint) {
+    return prisma.userQuota.update({
+        where: { userId },
+        data: {
+            monthlyTrafficUsed: { increment: delta }
+        }
+    })
+}
+
+/**
+ * 批量增加用户流量用量
+ * 使用 PostgreSQL 的 UPDATE ... FROM VALUES 进行高效的批量更新
+ * 支持大规模用户（10000+），使用分片处理避免事务过大
+ */
+export async function bulkIncrementUserTrafficUsage(
+    updates: Array<{ userId: number; delta: bigint }>
+) {
+    if (updates.length === 0) return
+
+    // 按用户 ID 分组，累加同一个用户的增量
+    const userDeltas = new Map<number, bigint>()
+    for (const { userId, delta } of updates) {
+        const current = userDeltas.get(userId) || 0n
+        userDeltas.set(userId, current + delta)
+    }
+
+    // 转换为数组并按分片大小分批处理
+    const deltasArray = Array.from(userDeltas.entries())
+    
+    // 分批处理，避免单次事务过大
+    for (let i = 0; i < deltasArray.length; i += BATCH_SIZE) {
+        const batch = deltasArray.slice(i, i + BATCH_SIZE)
+        
+        // 使用 PostgreSQL 的 UPDATE ... FROM VALUES 语法进行批量更新
+        // 构建 VALUES 子句（验证并清理所有值）
+        const valuesClause = batch
+            .map(([userId, delta]) => {
+                const userIdStr = sanitizeNumber(userId)
+                const deltaStr = sanitizeNumber(delta)
+                return `(${userIdStr}, ${deltaStr})`
+            })
+            .join(', ')
+        
+        // 使用原生 SQL 批量更新
+        try {
+            await prisma.$executeRawUnsafe(`
+                UPDATE user_quotas AS uq
+                SET monthly_traffic_used = uq.monthly_traffic_used + v.delta::bigint
+                FROM (VALUES ${valuesClause}) AS v(user_id, delta)
+                WHERE uq.user_id = v.user_id
+            `)
+        } catch (error) {
+            console.error(`[Traffic] Failed to bulk increment user traffic usage (batch ${i}-${i + batch.length}):`, error)
+            throw error
+        }
+    }
+}
+
+/**
+ * 更新实例流量状态
+ */
+export async function updateInstanceTrafficStatus(instanceId: number, status: TrafficStatus) {
+    return prisma.instance.update({
+        where: { id: instanceId },
+        data: { trafficStatus: status }
+    })
+}
+
+/**
+ * 更新用户流量状态
+ */
+export async function updateUserTrafficStatus(userId: number, status: TrafficStatus) {
+    return prisma.userQuota.update({
+        where: { userId },
+        data: { trafficStatus: status }
+    })
+}
+
+/**
+ * 更新用户流量预警发送时间
+ */
+export async function updateUserTrafficWarningSentAt(userId: number, sentAt: Date) {
+    return prisma.userQuota.update({
+        where: { userId },
+        data: { trafficWarningSentAt: sentAt }
+    })
+}
+
+// ==================== 月度重置操作 ====================
+
+/**
+ * 重置所有用户的月度流量用量
+ */
+export async function resetAllUserMonthlyTraffic() {
+    return prisma.userQuota.updateMany({
+        data: {
+            monthlyTrafficUsed: 0n,
+            trafficStatus: 'NORMAL',
+            trafficWarningSentAt: null
+        }
+    })
+}
+
+/**
+ * 重置所有实例的月度流量用量
+ */
+export async function resetAllInstanceMonthlyTraffic() {
+    return prisma.instance.updateMany({
+        where: {
+            status: { not: 'deleted' }
+        },
+        data: {
+            monthlyTrafficUsed: 0n,
+            trafficStatus: 'NORMAL'
+        }
+    })
+}
+
+/**
+ * 重置单个实例的月度流量用量
+ */
+export async function resetInstanceMonthlyTraffic(instanceId: number) {
+    return prisma.instance.update({
+        where: { id: instanceId },
+        data: {
+            monthlyTrafficUsed: 0n,
+            trafficStatus: 'NORMAL'
+        }
+    })
+}
+
+/**
+ * 更新实例的带宽限制配置（用于流量限速/恢复时同步数据库）
+ */
+export async function updateInstanceBandwidthLimits(
+    instanceId: number,
+    limitsIngress: string | null,
+    limitsEgress: string | null
+) {
+    return prisma.instance.update({
+        where: { id: instanceId },
+        data: {
+            limitsIngress,
+            limitsEgress
+        }
+    })
+}
+
+/**
+ * 重置指定节点下所有实例的月度流量用量
+ * @param hostIds 节点 ID 数组
+ */
+export async function resetHostInstancesMonthlyTraffic(hostIds: number[]) {
+    return prisma.instance.updateMany({
+        where: {
+            hostId: { in: hostIds },
+            status: { not: 'deleted' }
+        },
+        data: {
+            monthlyTrafficUsed: 0n,
+            trafficStatus: 'NORMAL'
+        }
+    })
+}
+
+// ==================== 查询操作 ====================
+
+/**
+ * 获取所有运行中的实例（用于流量采集）
+ */
+export async function getRunningInstancesForTraffic() {
+    return prisma.instance.findMany({
+        where: {
+            status: 'running'
+        },
+        include: {
+            host: {
+                select: {
+                    id: true,
+                    name: true,
+                    url: true,
+                    certPath: true,
+                    keyPath: true,
+                    status: true
+                }
+            },
+            user: {
+                select: {
+                    id: true,
+                    quota: true
+                }
+            },
+            package: {
+                select: {
+                    bandwidthMax: true,
+                    limitsIngress: true,
+                    limitsEgress: true
+                }
+            },
+            packagePlan: {
+                select: {
+                    trafficLimitSpeed: true
+                }
+            },
+            trafficSnapshot: true
+        }
+    })
+}
+
+/**
+ * 获取指定实例中所有运行中的实例（用于即时流量状态重算）
+ */
+export async function getRunningInstancesForTrafficByIds(instanceIds: number[]) {
+    if (instanceIds.length === 0) {
+        return []
+    }
+
+    return prisma.instance.findMany({
+        where: {
+            id: { in: instanceIds },
+            status: 'running'
+        },
+        include: {
+            host: {
+                select: {
+                    id: true,
+                    name: true,
+                    url: true,
+                    certPath: true,
+                    keyPath: true,
+                    status: true
+                }
+            },
+            user: {
+                select: {
+                    id: true,
+                    quota: true
+                }
+            },
+            package: {
+                select: {
+                    bandwidthMax: true,
+                    limitsIngress: true,
+                    limitsEgress: true
+                }
+            },
+            packagePlan: {
+                select: {
+                    trafficLimitSpeed: true
+                }
+            },
+            trafficSnapshot: true
+        }
+    })
+}
+
+/**
+ * 获取指定用户的所有运行中实例（用于用户级流量状态重算）
+ */
+export async function getRunningInstancesForTrafficByUserId(userId: number) {
+    return prisma.instance.findMany({
+        where: {
+            userId,
+            status: 'running'
+        },
+        include: {
+            host: {
+                select: {
+                    id: true,
+                    name: true,
+                    url: true,
+                    certPath: true,
+                    keyPath: true,
+                    status: true
+                }
+            },
+            user: {
+                select: {
+                    id: true,
+                    quota: true
+                }
+            },
+            package: {
+                select: {
+                    bandwidthMax: true,
+                    limitsIngress: true,
+                    limitsEgress: true
+                }
+            },
+            packagePlan: {
+                select: {
+                    trafficLimitSpeed: true
+                }
+            },
+            trafficSnapshot: true
+        }
+    })
+}
+
+/**
+ * 获取用户流量配额信息
+ */
+export async function getUserTrafficQuota(userId: number) {
+    return prisma.userQuota.findUnique({
+        where: { userId },
+        select: {
+            monthlyTrafficLimit: true,
+            monthlyTrafficUsed: true,
+            extraTrafficQuota: true,
+            extraTrafficUsed: true,
+            trafficStatus: true,
+            trafficWarningSentAt: true
+        }
+    })
+}
+
+/**
+ * 获取实例流量信息
+ */
+export async function getInstanceTrafficInfo(instanceId: number) {
+    return prisma.instance.findUnique({
+        where: { id: instanceId },
+        select: {
+            id: true,
+            name: true,
+            userId: true,
+            hostId: true,
+            monthlyTrafficLimit: true,
+            monthlyTrafficUsed: true,
+            trafficStatus: true
+        }
+    })
+}
+
+/**
+ * 获取用户所有实例的 ID 列表
+ */
+export async function getUserInstanceIds(userId: number) {
+    const instances = await prisma.instance.findMany({
+        where: {
+            userId,
+            status: { not: 'deleted' }
+        },
+        select: { id: true }
+    })
+    return instances.map(i => i.id)
+}
+
+/**
+ * 批量更新实例流量状态
+ */
+export async function batchUpdateInstanceTrafficStatus(instanceIds: number[], status: TrafficStatus) {
+    return prisma.instance.updateMany({
+        where: {
+            id: { in: instanceIds }
+        },
+        data: { trafficStatus: status }
+    })
+}
+
+/**
+ * 更新用户流量限额
+ */
+export async function updateUserTrafficLimit(userId: number, limit: bigint | null) {
+    return prisma.userQuota.update({
+        where: { userId },
+        data: { monthlyTrafficLimit: limit }
+    })
+}
+
+/**
+ * 更新实例流量限额
+ */
+export async function updateInstanceTrafficLimit(instanceId: number, limit: bigint | null) {
+    return prisma.instance.update({
+        where: { id: instanceId },
+        data: { monthlyTrafficLimit: limit }
+    })
+}
+
+
+/**
+ * 同步套餐流量限额到所有实例
+ * 将所有实例的流量限额更新为其所属套餐的流量限额
+ */
+export async function syncPackageTrafficLimitsToInstances(packageId?: number): Promise<{ count: number; instanceIds: number[] }> {
+    const instances = await prisma.instance.findMany({
+        where: {
+            status: { not: 'deleted' },
+            packageId: packageId ?? { not: null }
+        },
+        select: {
+            id: true,
+            hostId: true,
+            packageId: true,
+            monthlyTrafficUsed: true,
+            package: {
+                select: {
+                    monthlyTrafficLimit: true
+                }
+            },
+            packagePlan: {
+                select: {
+                    trafficLimit: true
+                }
+            }
+        }
+    })
+
+    const packageIds = [...new Set(instances.map(instance => instance.packageId).filter((id): id is number => id !== null))]
+    if (packageIds.length === 0) {
+        return { count: 0, instanceIds: [] }
+    }
+
+    const bindings = await prisma.packageHost.findMany({
+        where: {
+            packageId: { in: packageIds }
+        },
+        select: {
+            packageId: true,
+            hostId: true,
+            trafficMultiplier: true
+        }
+    })
+    const multiplierByPackageHost = new Map(bindings.map(binding => [
+        `${binding.packageId}:${binding.hostId}`,
+        binding.trafficMultiplier
+    ]))
+
+    const updatedInstanceIds: number[] = []
+    await Promise.all(instances.map(instance => {
+        const baseTrafficLimit = instance.packagePlan?.trafficLimit ?? instance.package?.monthlyTrafficLimit ?? null
+        const monthlyTrafficLimit = applyTrafficMultiplier(
+            baseTrafficLimit,
+            multiplierByPackageHost.get(`${instance.packageId}:${instance.hostId}`) ?? 1
+        )
+        updatedInstanceIds.push(instance.id)
+
+        return prisma.instance.update({
+            where: { id: instance.id },
+            data: {
+                monthlyTrafficLimit,
+                trafficStatus: calculateInstanceTrafficStatus(instance.monthlyTrafficUsed, monthlyTrafficLimit)
+            }
+        })
+    }))
+
+    return { count: instances.length, instanceIds: updatedInstanceIds }
+}
diff --git a/server/src/db/transfers.ts b/server/src/db/transfers.ts
new file mode 100644
index 0000000..db3f14b
--- /dev/null
+++ b/server/src/db/transfers.ts
@@ -0,0 +1,556 @@
+/**
+ * 实例转移相关数据库操作
+ */
+
+import { prisma } from './prisma.js'
+import { Prisma } from '@prisma/client'
+import type { TransferStatus } from '@prisma/client'
+import { TRANSFER_CREATE_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from './advisory-locks.js'
+
+// 事务隔离级别配置
+const TRANSFER_TRANSACTION_OPTIONS = {
+    isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+    timeout: 10000,
+} as const
+
+const TRANSFER_CREATE_LOCK_RETRY_LIMIT = 20
+const TRANSFER_CREATE_LOCK_RETRY_DELAY_MS = 100
+
+function sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 清理卡住的 processing 状态转移（服务启动时调用）
+ * 将所有 processing 状态回滚为 pending，让用户可以重新操作
+ */
+export async function cleanupStaleTransfers(): Promise<number> {
+    const result = await prisma.instanceTransfer.updateMany({
+        where: { status: 'processing' },
+        data: { status: 'pending' }
+    })
+    return result.count
+}
+
+/**
+ * 清理超时的 processing 状态转移（运行时定期检查）
+ * 将超过 30 分钟仍在 processing 状态的转移回滚为 pending
+ * 使用 updatedAt 字段跟踪状态变更时间，避免旧的转移请求刚开始处理就被错误清理
+ */
+export async function cleanupTimeoutTransfers(): Promise<number> {
+    const result = await prisma.instanceTransfer.updateMany({
+        where: {
+            status: 'processing',
+            updatedAt: {
+                lt: new Date(Date.now() - 30 * 60 * 1000) // 30分钟
+            }
+        },
+        data: { status: 'pending' }
+    })
+    return result.count
+}
+
+// 转移快照信息类型
+export interface TransferSnapshot {
+    packageId: number | null
+    packageName: string | null
+    hostId: number
+    hostName: string
+    hostLocation: string | null
+    hostCountryCode: string
+    originalName: string
+    cpu: number
+    memory: number
+    disk: number
+    networkMode: string
+    portMappingsCount: number
+    snapshotsCount: number
+    backupsCount: number
+    ipv4: string | null
+    ipv6: string | null
+}
+
+// 创建转移请求（带手续费扣除，事务安全）
+export async function createTransferWithFee(data: {
+    instanceId: number
+    fromUserId: number
+    toUserId: number
+    snapshot: TransferSnapshot
+    remark?: string
+    fee: number
+    instanceName: string
+}): Promise<{ transferId: number; feeDeducted: boolean }> {
+    for (let attempt = 0; attempt < TRANSFER_CREATE_LOCK_RETRY_LIMIT; attempt++) {
+        const result = await prisma.$transaction(async (tx) => {
+            const locked = await tryAdvisoryTransactionLock(tx, TRANSFER_CREATE_LOCK_NAMESPACE, data.instanceId)
+            if (!locked) return null
+
+            // 0. 在事务内检查是否已有 pending/processing 转移
+            const existingTransfer = await tx.instanceTransfer.findFirst({
+                where: {
+                    instanceId: data.instanceId,
+                    status: { in: ['pending', 'processing'] }
+                }
+            })
+            if (existingTransfer) {
+                throw new Error('TRANSFER_ALREADY_PENDING')
+            }
+
+            // 1. 如果有手续费，先扣费
+            if (data.fee > 0) {
+                const user = await tx.user.findUnique({
+                    where: { id: data.fromUserId },
+                    select: { balance: true }
+                })
+
+                if (!user) {
+                    throw new Error('USER_NOT_FOUND')
+                }
+
+                const balanceBefore = Number(user.balance)
+                if (balanceBefore < data.fee) {
+                    throw new Error('INSUFFICIENT_BALANCE')
+                }
+
+                const balanceAfter = balanceBefore - data.fee
+
+                await tx.user.update({
+                    where: { id: data.fromUserId },
+                    data: { balance: balanceAfter }
+                })
+
+                await tx.balanceLog.create({
+                    data: {
+                        userId: data.fromUserId,
+                        type: 'transfer_fee',
+                        amount: -data.fee,
+                        balanceBefore,
+                        balanceAfter,
+                        instanceId: data.instanceId,
+                        remark: `转移实例 "${data.instanceName}" 手续费`
+                    }
+                })
+            }
+
+            const transfer = await tx.instanceTransfer.create({
+                data: {
+                    instanceId: data.instanceId,
+                    fromUserId: data.fromUserId,
+                    toUserId: data.toUserId,
+                    snapshot: data.snapshot as any,
+                    remark: data.remark,
+                    fee: data.fee > 0 ? data.fee : null,
+                    status: 'pending'
+                }
+            })
+
+            return { transferId: transfer.id, feeDeducted: data.fee > 0 }
+        })
+
+        if (result) {
+            return result
+        }
+
+        await sleep(TRANSFER_CREATE_LOCK_RETRY_DELAY_MS * (attempt + 1))
+    }
+
+    throw new Error('TRANSFER_ALREADY_PENDING')
+}
+
+// 创建转移请求（不带手续费，保持向后兼容）
+export async function createTransfer(data: {
+    instanceId: number
+    fromUserId: number
+    toUserId: number
+    snapshot: TransferSnapshot
+    remark?: string
+    fee?: number
+}): Promise<number> {
+    for (let attempt = 0; attempt < TRANSFER_CREATE_LOCK_RETRY_LIMIT; attempt++) {
+        const transferId = await prisma.$transaction(async (tx) => {
+            const locked = await tryAdvisoryTransactionLock(tx, TRANSFER_CREATE_LOCK_NAMESPACE, data.instanceId)
+            if (!locked) return null
+
+            const existingTransfer = await tx.instanceTransfer.findFirst({
+                where: {
+                    instanceId: data.instanceId,
+                    status: { in: ['pending', 'processing'] }
+                }
+            })
+            if (existingTransfer) {
+                throw new Error('TRANSFER_ALREADY_PENDING')
+            }
+
+            const transfer = await tx.instanceTransfer.create({
+                data: {
+                    instanceId: data.instanceId,
+                    fromUserId: data.fromUserId,
+                    toUserId: data.toUserId,
+                    snapshot: data.snapshot as any,
+                    remark: data.remark,
+                    fee: data.fee,
+                    status: 'pending'
+                }
+            })
+
+            return transfer.id
+        })
+
+        if (transferId !== null) {
+            return transferId
+        }
+
+        await sleep(TRANSFER_CREATE_LOCK_RETRY_DELAY_MS * (attempt + 1))
+    }
+
+    throw new Error('TRANSFER_ALREADY_PENDING')
+}
+
+// 检查实例是否有待处理的转移（包括 pending 和 processing 状态）
+export async function hasPendingTransfer(instanceId: number): Promise<boolean> {
+    const count = await prisma.instanceTransfer.count({
+        where: {
+            instanceId,
+            status: { in: ['pending', 'processing'] }
+        }
+    })
+    return count > 0
+}
+
+// 获取实例的待处理转移（包括 pending 和 processing 状态）
+export async function getPendingTransferByInstanceId(instanceId: number) {
+    return prisma.instanceTransfer.findFirst({
+        where: {
+            instanceId,
+            status: { in: ['pending', 'processing'] }
+        },
+        include: {
+            fromUser: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            },
+            toUser: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        }
+    })
+}
+
+// 获取转移详情
+export async function getTransferById(id: number) {
+    return prisma.instanceTransfer.findUnique({
+        where: { id },
+        include: {
+            instance: {
+                select: {
+                    id: true,
+                    name: true,
+                    status: true,
+                    image: true
+                }
+            },
+            fromUser: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            },
+            toUser: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        }
+    })
+}
+
+// 获取转移详情（包含手续费字段）
+export async function getTransferByIdWithFee(id: number) {
+    const transfer = await prisma.instanceTransfer.findUnique({
+        where: { id },
+        select: {
+            id: true,
+            instanceId: true,
+            fromUserId: true,
+            toUserId: true,
+            status: true,
+            snapshot: true,
+            remark: true,
+            rejectReason: true,
+            fee: true,
+            createdAt: true,
+            updatedAt: true,
+            acceptedAt: true,
+            rejectedAt: true,
+            cancelledAt: true,
+            instance: {
+                select: {
+                    id: true,
+                    name: true,
+                    status: true,
+                    image: true
+                }
+            },
+            fromUser: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            },
+            toUser: {
+                select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+            }
+        }
+    })
+    return transfer
+}
+
+// 退还转移手续费（事务安全）
+export async function refundTransferFee(data: {
+    transferId: number
+    fromUserId: number
+    fee: number
+    instanceId: number
+    instanceName: string
+    reason: 'rejected' | 'cancelled'
+}): Promise<{ success: boolean; error?: string }> {
+    try {
+        await prisma.$transaction(async (tx) => {
+            // 1. 获取当前余额
+            const user = await tx.user.findUnique({
+                where: { id: data.fromUserId },
+                select: { balance: true }
+            })
+            
+            if (!user) {
+                throw new Error('USER_NOT_FOUND')
+            }
+            
+            const balanceBefore = Number(user.balance)
+            const balanceAfter = balanceBefore + data.fee
+            
+            // 2. 更新余额
+            await tx.user.update({
+                where: { id: data.fromUserId },
+                data: { balance: balanceAfter }
+            })
+            
+            // 3. 创建退款日志
+            const remarkMap = {
+                rejected: `转移实例 "${data.instanceName}" 被拒绝，退还手续费`,
+                cancelled: `取消转移实例 "${data.instanceName}"，退还手续费`
+            }
+            
+            await tx.balanceLog.create({
+                data: {
+                    userId: data.fromUserId,
+                    type: 'transfer_refund',
+                    amount: data.fee,
+                    balanceBefore,
+                    balanceAfter,
+                    instanceId: data.instanceId,
+                    remark: remarkMap[data.reason]
+                }
+            })
+        })
+        
+        return { success: true }
+    } catch (error) {
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : '退款失败'
+        }
+    }
+}
+
+// 获取用户发起的转移列表
+export async function getTransfersSent(userId: number, options: {
+    page: number
+    pageSize: number
+    status?: TransferStatus
+    search?: string
+}) {
+    const where: any = { fromUserId: userId }
+    if (options.status) {
+        where.status = options.status
+    }
+
+    // 搜索条件
+    if (options.search && options.search.trim()) {
+        const searchTerm = options.search.trim()
+        where.OR = [
+            { instance: { name: { contains: searchTerm, mode: 'insensitive' } } },
+            { toUser: { username: { contains: searchTerm, mode: 'insensitive' } } },
+            { remark: { contains: searchTerm, mode: 'insensitive' } }
+        ]
+    }
+
+    const [items, total] = await Promise.all([
+        prisma.instanceTransfer.findMany({
+            where,
+            include: {
+                instance: {
+                    select: { id: true, name: true, status: true, image: true }
+                },
+                toUser: {
+                    select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+                }
+            },
+            orderBy: { createdAt: 'desc' },
+            skip: (options.page - 1) * options.pageSize,
+            take: options.pageSize
+        }),
+        prisma.instanceTransfer.count({ where })
+    ])
+
+    return {
+        items,
+        total,
+        page: options.page,
+        pageSize: options.pageSize,
+        totalPages: Math.ceil(total / options.pageSize)
+    }
+}
+
+// 获取用户收到的转移列表
+export async function getTransfersReceived(userId: number, options: {
+    page: number
+    pageSize: number
+    status?: TransferStatus
+    search?: string
+}) {
+    const where: any = { toUserId: userId }
+    if (options.status) {
+        where.status = options.status
+    }
+
+    // 搜索条件
+    if (options.search && options.search.trim()) {
+        const searchTerm = options.search.trim()
+        where.OR = [
+            { instance: { name: { contains: searchTerm, mode: 'insensitive' } } },
+            { fromUser: { username: { contains: searchTerm, mode: 'insensitive' } } },
+            { remark: { contains: searchTerm, mode: 'insensitive' } }
+        ]
+    }
+
+    const [items, total] = await Promise.all([
+        prisma.instanceTransfer.findMany({
+            where,
+            include: {
+                instance: {
+                    select: { id: true, name: true, status: true, image: true }
+                },
+                fromUser: {
+                    select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true }
+                }
+            },
+            orderBy: { createdAt: 'desc' },
+            skip: (options.page - 1) * options.pageSize,
+            take: options.pageSize
+        }),
+        prisma.instanceTransfer.count({ where })
+    ])
+
+    return {
+        items,
+        total,
+        page: options.page,
+        pageSize: options.pageSize,
+        totalPages: Math.ceil(total / options.pageSize)
+    }
+}
+
+// 获取用户待处理的接收数量（仅 pending 状态，processing 不显示为待接收）
+export async function getPendingReceivedCount(userId: number): Promise<number> {
+    return prisma.instanceTransfer.count({
+        where: {
+            toUserId: userId,
+            status: 'pending'  // 仅计算 pending，processing 表示正在处理中
+        }
+    })
+}
+
+// 更新转移状态为已接受
+export async function acceptTransfer(id: number): Promise<void> {
+    await prisma.instanceTransfer.update({
+        where: { id },
+        data: {
+            status: 'accepted',
+            acceptedAt: new Date()
+        }
+    })
+}
+
+// 更新转移状态为已拒绝
+export async function rejectTransfer(id: number, reason?: string): Promise<void> {
+    await prisma.instanceTransfer.update({
+        where: { id },
+        data: {
+            status: 'rejected',
+            rejectedAt: new Date(),
+            rejectReason: reason
+        }
+    })
+}
+
+// 更新转移状态为已取消
+export async function cancelTransfer(id: number): Promise<void> {
+    await prisma.instanceTransfer.update({
+        where: { id },
+        data: {
+            status: 'cancelled',
+            cancelledAt: new Date()
+        }
+    })
+}
+
+// 执行转移（事务操作）
+// 注意：不再更新实例配额，因为不再限制用户的实例配额
+// 安全改进：显式指定 Serializable 隔离级别，确保操作一致性
+export async function executeTransfer(
+    transferId: number,
+    instanceId: number,
+    _fromUserId: number,  // 保留参数以保持接口兼容性，但不再使用（不再更新实例配额）
+    toUserId: number,
+    newInstanceName: string,
+    newIncusId: string
+): Promise<void> {
+    await prisma.$transaction(async (tx) => {
+        // 获取转移记录，获取 fee 和 fromUserId
+        const transfer = await tx.instanceTransfer.findUnique({
+            where: { id: transferId },
+            select: { fee: true, fromUserId: true }
+        })
+
+        // 注意：不再更新实例配额，实例转移只更新实例的所有者、名称和 Incus ID
+
+        // 更新实例所有者、名称和 Incus ID
+        await tx.instance.update({
+            where: { id: instanceId },
+            data: {
+                userId: toUserId,
+                name: newInstanceName,
+                incusId: newIncusId,
+                displayOrder: 0
+            }
+        })
+
+        // 更新转移状态
+        const now = new Date()
+        await tx.instanceTransfer.update({
+            where: { id: transferId },
+            data: {
+                status: 'accepted',
+                acceptedAt: now
+            }
+        })
+
+        // 如果有手续费，创建计费记录（用于收入统计和记录展示）
+        if (transfer?.fee && Number(transfer.fee) > 0) {
+            await tx.instanceBillingRecord.create({
+                data: {
+                    instanceId,
+                    userId: transfer.fromUserId,  // 发起方支付手续费
+                    type: 'transfer_fee',
+                    amount: transfer.fee,
+                    months: 0,  // 手续费不涉及月数
+                    periodStart: now,
+                    periodEnd: now,
+                    remark: `转移实例手续费`
+                }
+            })
+        }
+    }, TRANSFER_TRANSACTION_OPTIONS)
+}
diff --git a/server/src/db/users.ts b/server/src/db/users.ts
new file mode 100644
index 0000000..3ef3597
--- /dev/null
+++ b/server/src/db/users.ts
@@ -0,0 +1,798 @@
+/**
+ * 用户相关数据库操作
+ * 使用 Prisma ORM
+ */
+
+import { prisma } from './prisma.js'
+import type { Prisma } from '@prisma/client'
+import type { User, UserQuota } from '../types/database.js'
+
+const MAX_REGISTER_GIFT_BALANCE = 99999999.99
+const MAX_REGISTER_GIFT_POINTS = 2147483647
+
+export interface RegisterGiftResult {
+  balanceAmount: number
+  pointsAmount: number
+  newBalance: number
+  newPoints: number
+}
+
+export interface CreateRegisteredUserResult {
+  userId: number
+  registerGift: RegisterGiftResult | null
+}
+
+/**
+ * 根据用户名查找用户
+ */
+export async function findUserByUsername(username: string): Promise<User | null> {
+  const user = await prisma.user.findUnique({
+    where: { username }
+  })
+
+  if (!user) return null
+
+  // 转换 Prisma 类型到接口类型
+  return {
+    id: user.id,
+    username: user.username,
+    email: user.email,
+    password_hash: user.passwordHash,
+    role: user.role,
+    status: user.status,
+    ban_reason: user.banReason,
+    avatar_style: user.avatarStyle,
+    avatar_badge_id: user.avatarBadgeId,
+    has_created_host_before: user.hasCreatedHostBefore,
+    created_at: user.createdAt.toISOString(),
+    updated_at: user.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 根据用户名或邮箱查找用户（用于登录）
+ */
+export async function findUserByUsernameOrEmail(identifier: string): Promise<User | null> {
+  // 先尝试通过用户名查找
+  const userByUsername = await prisma.user.findUnique({
+    where: { username: identifier }
+  })
+
+  if (userByUsername) {
+    return {
+      id: userByUsername.id,
+      username: userByUsername.username,
+      email: userByUsername.email,
+      password_hash: userByUsername.passwordHash,
+      role: userByUsername.role,
+      status: userByUsername.status,
+      ban_reason: userByUsername.banReason,
+      avatar_style: userByUsername.avatarStyle,
+      avatar_badge_id: userByUsername.avatarBadgeId,
+      has_created_host_before: userByUsername.hasCreatedHostBefore,
+      created_at: userByUsername.createdAt.toISOString(),
+      updated_at: userByUsername.updatedAt.toISOString()
+    }
+  }
+
+  // 如果用户名查找失败，尝试通过邮箱查找
+  // 使用大小写不敏感匹配，兼容旧数据中可能存在的混合大小写邮箱
+  // 注意：虽然email字段没有unique约束，但注册时已检查邮箱唯一性，理论上不应该有重复
+  // 使用findFirst以防万一，如果真的有重复，返回第一个匹配的用户
+  const normalizedIdentifier = identifier.trim()
+  const userByEmail = await prisma.user.findFirst({
+    where: { 
+      email: {
+        equals: normalizedIdentifier,
+        mode: 'insensitive'  // 大小写不敏感匹配
+      }
+    }
+  })
+
+  if (!userByEmail) return null
+
+  // 转换 Prisma 类型到接口类型
+  return {
+    id: userByEmail.id,
+    username: userByEmail.username,
+    email: userByEmail.email,
+    password_hash: userByEmail.passwordHash,
+    role: userByEmail.role,
+    status: userByEmail.status,
+    ban_reason: userByEmail.banReason,
+    avatar_style: userByEmail.avatarStyle,
+    avatar_badge_id: userByEmail.avatarBadgeId,
+    has_created_host_before: userByEmail.hasCreatedHostBefore,
+    created_at: userByEmail.createdAt.toISOString(),
+    updated_at: userByEmail.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 根据 ID 查找用户
+ */
+export async function findUserById(id: number): Promise<User | null> {
+  const user = await prisma.user.findUnique({
+    where: { id }
+  })
+
+  if (!user) return null
+
+  return {
+    id: user.id,
+    username: user.username,
+    email: user.email,
+    password_hash: user.passwordHash,
+    role: user.role,
+    status: user.status,
+    ban_reason: user.banReason,
+    avatar_style: user.avatarStyle,
+    avatar_badge_id: user.avatarBadgeId,
+    has_created_host_before: user.hasCreatedHostBefore,
+    created_at: user.createdAt.toISOString(),
+    updated_at: user.updatedAt.toISOString()
+  }
+}
+
+/**
+ * 根据邮箱查找用户
+ */
+export async function findUserByEmail(email: string): Promise<User | null> {
+  const normalizedEmail = email.trim()
+  // 使用大小写不敏感匹配，兼容旧数据中可能存在的混合大小写邮箱
+  const user = await prisma.user.findFirst({
+    where: { 
+      email: {
+        equals: normalizedEmail,
+        mode: 'insensitive'
+      }
+    }
+  })
+
+  if (!user) return null
+
+  return {
+    id: user.id,
+    username: user.username,
+    email: user.email,
+    password_hash: user.passwordHash,
+    role: user.role,
+    status: user.status,
+    ban_reason: user.banReason,
+    avatar_style: user.avatarStyle,
+    avatar_badge_id: user.avatarBadgeId,
+    has_created_host_before: user.hasCreatedHostBefore,
+    created_at: user.createdAt.toISOString(),
+    updated_at: user.updatedAt.toISOString()
+  }
+}
+
+// 可用的头像风格
+const AVATAR_STYLES = [
+  'adventurer', 'adventurerNeutral', 'avataaars', 'avataaarsNeutral',
+  'bigEars', 'bigEarsNeutral', 'bigSmile', 'bottts', 'botttsNeutral',
+  'croodles', 'croodlesNeutral', 'dylan', 'funEmoji', 'glass', 'icons',
+  'identicon', 'initials', 'lorelei', 'loreleiNeutral', 'micah', 'miniavs',
+  'notionists', 'notionistsNeutral', 'openPeeps', 'personas', 'pixelArt',
+  'pixelArtNeutral', 'rings', 'shapes', 'thumbs'
+] as const
+
+/**
+ * 创建用户
+ */
+export async function createUser(
+  username: string,
+  email: string | null,
+  passwordHash: string,
+  role: 'admin' | 'user' = 'user'
+): Promise<number> {
+  // 从系统配置获取默认配额
+  const { getDefaultQuotaConfig } = await import('./system-config.js')
+  const defaultQuota = await getDefaultQuotaConfig()
+
+  // 随机选择头像风格
+  const avatarStyle = AVATAR_STYLES[Math.floor(Math.random() * AVATAR_STYLES.length)]
+
+  const user = await prisma.user.create({
+    data: {
+      username,
+      email,
+      passwordHash,
+      role,
+      avatarStyle,
+      quota: {
+        create: {
+          hostLimit: defaultQuota.hostLimit,
+          friendLimit: defaultQuota.friendLimit,
+          packageLimit: defaultQuota.packageLimit
+        }
+      }
+    }
+  })
+
+  return user.id
+}
+
+async function getFreeSiteRegisterGiftConfig(): Promise<{
+  balanceAmount: number
+  pointsAmount: number
+} | null> {
+  const {
+    getSystemConfigBoolean,
+    getSystemConfigFloat,
+    getSystemConfigNumber
+  } = await import('./system-config.js')
+
+  const [freeSiteMode, giftEnabled] = await Promise.all([
+    getSystemConfigBoolean('free_site_mode', false),
+    getSystemConfigBoolean('free_site_register_gift_enabled', false)
+  ])
+
+  if (!freeSiteMode || !giftEnabled) {
+    return null
+  }
+
+  const [rawBalanceAmount, rawPointsAmount] = await Promise.all([
+    getSystemConfigFloat('free_site_register_gift_balance', 0),
+    getSystemConfigNumber('free_site_register_gift_points', 0)
+  ])
+  const balanceAmount = Math.min(
+    MAX_REGISTER_GIFT_BALANCE,
+    Math.max(0, Math.round(rawBalanceAmount * 100) / 100)
+  )
+  const pointsAmount = Math.min(
+    MAX_REGISTER_GIFT_POINTS,
+    Math.max(0, Math.floor(rawPointsAmount))
+  )
+
+  if (balanceAmount <= 0 && pointsAmount <= 0) {
+    return null
+  }
+
+  return { balanceAmount, pointsAmount }
+}
+
+function buildRegisterGiftMessage(gift: RegisterGiftResult): { summary: string; content: string } {
+  const giftParts: string[] = []
+  if (gift.balanceAmount > 0) {
+    giftParts.push(`余额 ¥${gift.balanceAmount.toFixed(2)}`)
+  }
+  if (gift.pointsAmount > 0) {
+    giftParts.push(`${gift.pointsAmount} 积分`)
+  }
+
+  const summary = giftParts.join(' + ')
+  const arrivalLabel = giftParts.length > 1 ? '余额和积分' : giftParts[0] || '白嫖补给'
+
+  return {
+    summary,
+    content: `欢迎加入白嫖站！系统已经把 ${summary} 塞进你的账户背包，${arrivalLabel}到账了。快去逛逛能薅点什么，优雅白嫖，从注册成功这一刻开始。`
+  }
+}
+
+async function applyFreeSiteRegisterGiftInTransaction(
+  tx: Prisma.TransactionClient,
+  userId: number,
+  giftConfig: { balanceAmount: number; pointsAmount: number }
+): Promise<RegisterGiftResult> {
+  const { balanceAmount, pointsAmount } = giftConfig
+  let newBalance = 0
+  let newPoints = 0
+
+  if (balanceAmount > 0) {
+    const user = await tx.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    })
+
+    if (!user) {
+      throw new Error('用户不存在')
+    }
+
+    const balanceBefore = Number(user.balance)
+    const balanceAfter = Math.round((balanceBefore + balanceAmount) * 100) / 100
+
+    await tx.user.update({
+      where: { id: userId },
+      data: { balance: balanceAfter }
+    })
+
+    await tx.balanceLog.create({
+      data: {
+        userId,
+        type: 'gift',
+        amount: balanceAmount,
+        balanceBefore,
+        balanceAfter,
+        remark: '白嫖站注册自动赠送：白嫖启动资金'
+      }
+    })
+
+    newBalance = balanceAfter
+  } else {
+    const user = await tx.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    })
+    newBalance = user ? Number(user.balance) : 0
+  }
+
+  if (pointsAmount > 0) {
+    const userPoints = await tx.userPoints.upsert({
+      where: { userId },
+      update: {},
+      create: { userId }
+    })
+
+    const updatedPoints = await tx.userPoints.update({
+      where: { userId },
+      data: {
+        points: { increment: pointsAmount },
+        totalEarned: { increment: pointsAmount }
+      }
+    })
+
+    await tx.pointsLog.create({
+      data: {
+        userId,
+        type: 'admin_adjust',
+        amount: pointsAmount,
+        pointsBefore: userPoints.points,
+        pointsAfter: updatedPoints.points,
+        remark: '白嫖站注册自动赠送：白嫖能量包'
+      }
+    })
+
+    newPoints = updatedPoints.points
+  } else {
+    const userPoints = await tx.userPoints.findUnique({ where: { userId } })
+    newPoints = userPoints?.points ?? 0
+  }
+
+  const gift = {
+    balanceAmount,
+    pointsAmount,
+    newBalance,
+    newPoints
+  }
+  const message = buildRegisterGiftMessage(gift)
+
+  await tx.inboxMessage.create({
+    data: {
+      userId,
+      eventType: 'free_site_register_gift',
+      title: '白嫖补给到账啦',
+      content: message.content,
+      data: {
+        balanceAmount,
+        pointsAmount,
+        newBalance,
+        newPoints
+      }
+    }
+  })
+
+  return gift
+}
+
+export async function createRegisteredUser(
+  input: {
+    username: string
+    email: string | null
+    passwordHash: string
+    inviteCode?: string
+  }
+): Promise<CreateRegisteredUserResult> {
+  const { getDefaultQuotaConfig } = await import('./system-config.js')
+  const [defaultQuota, giftConfig] = await Promise.all([
+    getDefaultQuotaConfig(),
+    getFreeSiteRegisterGiftConfig()
+  ])
+  const avatarStyle = AVATAR_STYLES[Math.floor(Math.random() * AVATAR_STYLES.length)]
+
+  return prisma.$transaction(async (tx) => {
+    const user = await tx.user.create({
+      data: {
+        username: input.username,
+        email: input.email,
+        passwordHash: input.passwordHash,
+        role: 'user',
+        avatarStyle,
+        quota: {
+          create: {
+            hostLimit: defaultQuota.hostLimit,
+            friendLimit: defaultQuota.friendLimit,
+            packageLimit: defaultQuota.packageLimit
+          }
+        }
+      }
+    })
+
+    if (input.inviteCode) {
+      const inviteUpdate = await tx.inviteCode.updateMany({
+        where: {
+          code: input.inviteCode,
+          usedBy: null,
+          OR: [
+            { expiresAt: null },
+            { expiresAt: { gt: new Date() } }
+          ]
+        },
+        data: {
+          usedBy: user.id,
+          usedAt: new Date()
+        }
+      })
+
+      if (inviteUpdate.count !== 1) {
+        throw new Error('INVITE_CODE_UNAVAILABLE')
+      }
+    }
+
+    const registerGift = giftConfig
+      ? await applyFreeSiteRegisterGiftInTransaction(tx, user.id, giftConfig)
+      : null
+
+    return {
+      userId: user.id,
+      registerGift
+    }
+  })
+}
+
+/**
+ * 获取所有用户
+ */
+export async function getAllUsers(): Promise<User[]> {
+  const users = await prisma.user.findMany({
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      role: true,
+      status: true,
+      banReason: true,
+      avatarStyle: true,
+      avatarBadgeId: true,
+      createdAt: true
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+
+  return users.map(user => ({
+    id: user.id,
+    username: user.username,
+    email: user.email,
+    password_hash: '', // 不返回密码哈希
+    role: user.role,
+    status: user.status,
+    ban_reason: user.banReason,
+    avatar_style: user.avatarStyle,
+    avatar_badge_id: user.avatarBadgeId,
+    created_at: user.createdAt.toISOString(),
+    updated_at: user.createdAt.toISOString() // 这里没有 updatedAt，使用 createdAt
+  }))
+}
+
+/**
+ * 获取所有用户及其配额
+ */
+export async function getAllUsersWithQuota(): Promise<Array<User & Partial<UserQuota>>> {
+  const users = await prisma.user.findMany({
+    include: {
+      quota: true
+    },
+    orderBy: {
+      id: 'asc'
+    }
+  })
+
+  return users.map(user => {
+    const base: User = {
+      id: user.id,
+      username: user.username,
+      email: user.email,
+      password_hash: '', // 不返回密码哈希
+      role: user.role,
+      status: user.status,
+      ban_reason: user.banReason,
+      avatar_style: user.avatarStyle,
+      avatar_badge_id: user.avatarBadgeId,
+      created_at: user.createdAt.toISOString(),
+      updated_at: user.updatedAt.toISOString()
+    }
+
+    if (user.quota) {
+      return {
+        ...base,
+        host_limit: user.quota.hostLimit,
+        host_used: user.quota.hostUsed,
+        friend_limit: user.quota.friendLimit,
+        friend_used: user.quota.friendUsed,
+        package_limit: user.quota.packageLimit,
+        package_used: user.quota.packageUsed
+      }
+    }
+
+    return base
+  })
+}
+
+/**
+ * 获取用户配额
+ */
+export async function getUserQuota(userId: number): Promise<UserQuota | null> {
+  const quota = await prisma.userQuota.findUnique({
+    where: { userId }
+  })
+
+  if (!quota) return null
+
+  return {
+    id: quota.id,
+    user_id: quota.userId,
+    host_limit: quota.hostLimit,
+    host_used: quota.hostUsed,
+    friend_limit: quota.friendLimit,
+    friend_used: quota.friendUsed,
+    package_limit: quota.packageLimit,
+    package_used: quota.packageUsed,
+    monthly_traffic_limit: quota.monthlyTrafficLimit,
+    monthly_traffic_used: quota.monthlyTrafficUsed,
+    extra_traffic_quota: quota.extraTrafficQuota,
+    traffic_status: quota.trafficStatus
+  }
+}
+
+/**
+ * 创建用户配额（新配额系统）
+ */
+export async function createUserQuota(userId: number, data: {
+  hostLimit?: number
+  friendLimit?: number
+  packageLimit?: number
+}): Promise<void> {
+  await prisma.userQuota.create({
+    data: {
+      userId,
+      hostLimit: data.hostLimit ?? 0,
+      friendLimit: data.friendLimit ?? 0,
+      packageLimit: data.packageLimit ?? 0
+    }
+  })
+}
+
+/**
+ * 更新用户配额限制（新配额系统）
+ */
+export async function updateUserQuotaLimits(userId: number, data: {
+  hostLimit?: number
+  friendLimit?: number
+  packageLimit?: number
+}): Promise<void> {
+  // 构建更新数据对象，只包含定义的字段
+  // 注意：不再限制实例配额，用户可以创建无限数量的实例
+  const updateData: {
+    hostLimit?: number
+    friendLimit?: number
+    packageLimit?: number
+  } = {}
+
+  if (data.hostLimit !== undefined) updateData.hostLimit = data.hostLimit
+  if (data.friendLimit !== undefined) updateData.friendLimit = data.friendLimit
+  if (data.packageLimit !== undefined) updateData.packageLimit = data.packageLimit
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.userQuota.update({
+    where: { userId },
+    data: updateData
+  })
+}
+
+/**
+ * 更新用户信息
+ */
+export async function updateUser(id: number, data: {
+  email?: string
+  role?: 'admin' | 'user'
+  status?: 'active' | 'banned'
+  passwordHash?: string
+  avatarStyle?: string
+}): Promise<void> {
+  const updateData: {
+    email?: string
+    role?: 'admin' | 'user'
+    status?: 'active' | 'banned'
+    passwordHash?: string
+    avatarStyle?: string
+  } = {}
+
+  if (data.email !== undefined) updateData.email = data.email
+  if (data.role !== undefined) updateData.role = data.role
+  if (data.status !== undefined) updateData.status = data.status
+  if (data.passwordHash !== undefined) updateData.passwordHash = data.passwordHash
+  if (data.avatarStyle !== undefined) updateData.avatarStyle = data.avatarStyle
+
+  if (Object.keys(updateData).length === 0) return
+
+  await prisma.user.update({
+    where: { id },
+    data: updateData
+  })
+}
+
+/**
+ * 更新用户状态
+ * @param banReason 封禁原因（仅当 status='banned' 时有意义）
+ */
+export async function updateUserStatus(id: number, status: 'active' | 'banned', banReason?: string): Promise<void> {
+  await prisma.user.update({
+    where: { id },
+    data: {
+      status,
+      // 封禁时保存原因，解封时清除原因
+      banReason: status === 'banned' ? (banReason || null) : null
+    }
+  })
+}
+
+/**
+ * 删除用户
+ */
+export async function deleteUser(id: number): Promise<void> {
+  await prisma.user.delete({
+    where: { id }
+  })
+}
+
+
+// ==================== 2FA 相关操作 ====================
+
+/**
+ * 获取用户 2FA 状态
+ */
+export async function getUser2FAStatus(userId: number): Promise<{ enabled: boolean; hasSecret: boolean }> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: {
+      twoFactorEnabled: true,
+      twoFactorSecret: true
+    }
+  })
+
+  if (!user) {
+    return { enabled: false, hasSecret: false }
+  }
+
+  return {
+    enabled: user.twoFactorEnabled,
+    hasSecret: !!user.twoFactorSecret
+  }
+}
+
+/**
+ * 保存 2FA 密钥 (启用前的临时保存)
+ */
+export async function save2FASecret(userId: number, secret: string): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: { twoFactorSecret: secret }
+  })
+}
+
+/**
+ * 启用 2FA
+ */
+export async function enable2FA(userId: number): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: { twoFactorEnabled: true }
+  })
+}
+
+/**
+ * 禁用 2FA
+ */
+export async function disable2FA(userId: number): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: {
+      twoFactorEnabled: false,
+      twoFactorSecret: null
+    }
+  })
+}
+
+/**
+ * 获取用户 2FA 密钥
+ */
+export async function get2FASecret(userId: number): Promise<string | null> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { twoFactorSecret: true }
+  })
+
+  return user?.twoFactorSecret ?? null
+}
+
+/**
+ * 检查用户是否启用了 2FA
+ */
+export async function is2FAEnabled(userId: number): Promise<boolean> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { twoFactorEnabled: true }
+  })
+
+  return user?.twoFactorEnabled ?? false
+}
+
+/**
+ * 保存 2FA 恢复码
+ */
+export async function save2FARecoveryCodes(userId: number, encryptedCodes: string): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: { twoFactorRecoveryCodes: encryptedCodes }
+  })
+}
+
+/**
+ * 获取 2FA 恢复码
+ */
+export async function get2FARecoveryCodes(userId: number): Promise<string | null> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { twoFactorRecoveryCodes: true }
+  })
+
+  return user?.twoFactorRecoveryCodes ?? null
+}
+
+/**
+ * 启用 2FA 并保存恢复码
+ */
+export async function enable2FAWithRecoveryCodes(userId: number, encryptedCodes: string): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: {
+      twoFactorEnabled: true,
+      twoFactorRecoveryCodes: encryptedCodes
+    }
+  })
+}
+
+/**
+ * 禁用 2FA (清除所有2FA数据)
+ */
+export async function disable2FAComplete(userId: number): Promise<void> {
+  await prisma.user.update({
+    where: { id: userId },
+    data: {
+      twoFactorEnabled: false,
+      twoFactorSecret: null,
+      twoFactorRecoveryCodes: null
+    }
+  })
+}
+
+/**
+ * 获取所有管理员用户的 ID
+ * 用于工单系统等需要通知所有管理员的场景
+ */
+export async function getAllAdminUserIds(): Promise<number[]> {
+  const admins = await prisma.user.findMany({
+    where: {
+      role: 'admin',
+      status: 'active'
+    },
+    select: {
+      id: true
+    }
+  })
+
+  return admins.map(admin => admin.id)
+}
diff --git a/server/src/lib/action-ticket.ts b/server/src/lib/action-ticket.ts
new file mode 100644
index 0000000..e60e68a
--- /dev/null
+++ b/server/src/lib/action-ticket.ts
@@ -0,0 +1,174 @@
+import { nanoid } from 'nanoid'
+
+export type ActionTicketType = 'oauth-bind' | 'terminal'
+
+interface BaseActionTicket {
+  type: ActionTicketType
+  userId: number
+  issuedAt: number
+  sessionId?: string
+  expiresAt: number
+  createdAt: number
+  usageCount: number
+  maxUsage: number
+}
+
+interface OAuthBindTicket extends BaseActionTicket {
+  type: 'oauth-bind'
+}
+
+interface TerminalTicket extends BaseActionTicket {
+  type: 'terminal'
+  instanceId: number
+}
+
+type ActionTicket = OAuthBindTicket | TerminalTicket
+
+const actionTickets = new Map<string, ActionTicket>()
+
+const ACTION_TICKET_TTL_MS = {
+  'oauth-bind': 60 * 1000,
+  terminal: 60 * 1000
+} as const
+
+setInterval(() => {
+  const now = Date.now()
+  for (const [token, data] of actionTickets.entries()) {
+    if (now > data.expiresAt || data.usageCount >= data.maxUsage) {
+      actionTickets.delete(token)
+    }
+  }
+}, 60 * 1000)
+
+function createTicket<T extends ActionTicket>(ticket: T): string {
+  const token = nanoid(32)
+  actionTickets.set(token, ticket)
+  return token
+}
+
+export function generateOAuthBindTicket(
+  userId: number,
+  issuedAt: number,
+  sessionId?: string
+): string {
+  const now = Date.now()
+  return createTicket({
+    type: 'oauth-bind',
+    userId,
+    issuedAt,
+    sessionId,
+    expiresAt: now + ACTION_TICKET_TTL_MS['oauth-bind'],
+    createdAt: now,
+    usageCount: 0,
+    maxUsage: 1
+  })
+}
+
+export function generateTerminalAccessTicket(
+  userId: number,
+  instanceId: number,
+  issuedAt: number,
+  sessionId?: string
+): string {
+  const now = Date.now()
+  return createTicket({
+    type: 'terminal',
+    userId,
+    instanceId,
+    issuedAt,
+    sessionId,
+    expiresAt: now + ACTION_TICKET_TTL_MS.terminal,
+    createdAt: now,
+    usageCount: 0,
+    maxUsage: 1
+  })
+}
+
+export interface OAuthBindTicketConsumeResult {
+  valid: boolean
+  userId?: number
+  issuedAt?: number
+  sessionId?: string
+  error?: string
+}
+
+export interface TerminalTicketConsumeResult {
+  valid: boolean
+  userId?: number
+  instanceId?: number
+  issuedAt?: number
+  sessionId?: string
+  error?: string
+}
+
+export function consumeOAuthBindTicket(token: string): OAuthBindTicketConsumeResult {
+  const ticket = actionTickets.get(token)
+  if (!ticket || ticket.type !== 'oauth-bind') {
+    return { valid: false, error: 'Ticket not found or already used' }
+  }
+
+  if (Date.now() > ticket.expiresAt) {
+    actionTickets.delete(token)
+    return { valid: false, error: 'Ticket expired' }
+  }
+
+  ticket.usageCount += 1
+  if (ticket.usageCount >= ticket.maxUsage) {
+    actionTickets.delete(token)
+  } else {
+    actionTickets.set(token, ticket)
+  }
+
+  return {
+    valid: true,
+    userId: ticket.userId,
+    issuedAt: ticket.issuedAt,
+    sessionId: ticket.sessionId
+  }
+}
+
+export function consumeTerminalAccessTicket(
+  token: string,
+  expectedInstanceId?: number
+): TerminalTicketConsumeResult {
+  const ticket = actionTickets.get(token)
+  if (!ticket || ticket.type !== 'terminal') {
+    return { valid: false, error: 'Ticket not found or already used' }
+  }
+
+  if (Date.now() > ticket.expiresAt) {
+    actionTickets.delete(token)
+    return { valid: false, error: 'Ticket expired' }
+  }
+
+  if (expectedInstanceId !== undefined && ticket.instanceId !== expectedInstanceId) {
+    actionTickets.delete(token)
+    return { valid: false, error: 'Instance mismatch' }
+  }
+
+  ticket.usageCount += 1
+  if (ticket.usageCount >= ticket.maxUsage) {
+    actionTickets.delete(token)
+  } else {
+    actionTickets.set(token, ticket)
+  }
+
+  return {
+    valid: true,
+    userId: ticket.userId,
+    instanceId: ticket.instanceId,
+    issuedAt: ticket.issuedAt,
+    sessionId: ticket.sessionId
+  }
+}
+
+export function revokeActionTicketsForSession(sessionId: string): number {
+  let revoked = 0
+  for (const [token, data] of actionTickets.entries()) {
+    if (data.sessionId === sessionId) {
+      actionTickets.delete(token)
+      revoked += 1
+    }
+  }
+  return revoked
+}
diff --git a/server/src/lib/agent-auth.ts b/server/src/lib/agent-auth.ts
new file mode 100644
index 0000000..e0c84d3
--- /dev/null
+++ b/server/src/lib/agent-auth.ts
@@ -0,0 +1,168 @@
+import { createHash, createHmac, randomBytes, timingSafeEqual } from 'crypto'
+import type { IncomingHttpHeaders } from 'http'
+
+export const agentTimestampWindowMs = 5 * 60 * 1000
+export const agentNonceTtlMs = 10 * 60 * 1000
+
+export interface AgentAuthHeaders {
+  agentId: string
+  timestamp: string
+  nonce: string
+  bodyHash: string
+  signature: string
+}
+
+export interface AgentSigningPayload {
+  method: string
+  path: string
+  timestamp: string
+  nonce: string
+  bodyHash: string
+}
+
+const agentIdPattern = /^agt_[A-Za-z0-9_-]{24,64}$/
+const secretPattern = /^ias_[A-Za-z0-9_-]{32,96}$/
+const noncePattern = /^[A-Za-z0-9._:-]{8,128}$/
+const sha256HexPattern = /^[a-f0-9]{64}$/i
+
+function getHeaderValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+  return value ?? null
+}
+
+function normalizeJsonValue(value: unknown): unknown {
+  if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
+    return undefined
+  }
+
+  if (value === null || typeof value !== 'object') {
+    return value
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(item => {
+      const normalized = normalizeJsonValue(item)
+      return normalized === undefined ? null : normalized
+    })
+  }
+
+  const objectValue = value as Record<string, unknown>
+  const normalizedObject: Record<string, unknown> = {}
+  for (const key of Object.keys(objectValue).sort()) {
+    const normalized = normalizeJsonValue(objectValue[key])
+    if (normalized !== undefined) {
+      normalizedObject[key] = normalized
+    }
+  }
+  return normalizedObject
+}
+
+function safeTimingEqual(a: string, b: string): boolean {
+  const aBuffer = Buffer.from(a)
+  const bBuffer = Buffer.from(b)
+  if (aBuffer.length !== bBuffer.length) {
+    return false
+  }
+  return timingSafeEqual(aBuffer, bBuffer)
+}
+
+export function generateAgentId(): string {
+  return `agt_${randomBytes(24).toString('base64url')}`
+}
+
+export function generateAgentSecret(): string {
+  return `ias_${randomBytes(32).toString('base64url')}`
+}
+
+export function isValidAgentId(value: string): boolean {
+  return agentIdPattern.test(value)
+}
+
+export function isValidAgentSecret(value: string): boolean {
+  return secretPattern.test(value)
+}
+
+export function hashAgentSecret(secret: string): string {
+  return createHash('sha256').update(secret).digest('hex')
+}
+
+export function stableStringifyAgentBody(body: unknown): string {
+  const normalized = normalizeJsonValue(body)
+  return JSON.stringify(normalized === undefined ? null : normalized)
+}
+
+export function createAgentBodyHash(body: unknown): string {
+  return createHash('sha256').update(stableStringifyAgentBody(body)).digest('hex')
+}
+
+export function buildAgentSigningPayload(payload: AgentSigningPayload): string {
+  return [
+    payload.method.toUpperCase(),
+    payload.path,
+    payload.timestamp,
+    payload.nonce,
+    payload.bodyHash.toLowerCase()
+  ].join('\n')
+}
+
+export function createAgentSignature(secret: string, payload: AgentSigningPayload): string {
+  return createHmac('sha256', secret).update(buildAgentSigningPayload(payload)).digest('hex')
+}
+
+export function verifyAgentSignature(secret: string, payload: AgentSigningPayload, signature: string): boolean {
+  if (!sha256HexPattern.test(signature)) {
+    return false
+  }
+
+  const expected = createAgentSignature(secret, payload)
+  return safeTimingEqual(expected, signature.toLowerCase())
+}
+
+export function readAgentAuthHeaders(headers: IncomingHttpHeaders): AgentAuthHeaders | null {
+  const agentId = getHeaderValue(headers['x-incudal-agent-id'])
+  const timestamp = getHeaderValue(headers['x-incudal-timestamp'])
+  const nonce = getHeaderValue(headers['x-incudal-nonce'])
+  const bodyHash = getHeaderValue(headers['x-incudal-body-sha256'])
+  const signature = getHeaderValue(headers['x-incudal-signature'])
+
+  if (!agentId || !timestamp || !nonce || !bodyHash || !signature) {
+    return null
+  }
+
+  return {
+    agentId,
+    timestamp,
+    nonce,
+    bodyHash,
+    signature
+  }
+}
+
+export function validateAgentHeaders(headers: AgentAuthHeaders): string | null {
+  if (!isValidAgentId(headers.agentId)) {
+    return 'invalid agent id'
+  }
+  if (!/^\d{13}$/.test(headers.timestamp)) {
+    return 'invalid timestamp'
+  }
+  if (!noncePattern.test(headers.nonce)) {
+    return 'invalid nonce'
+  }
+  if (!sha256HexPattern.test(headers.bodyHash)) {
+    return 'invalid body hash'
+  }
+  if (!sha256HexPattern.test(headers.signature)) {
+    return 'invalid signature'
+  }
+  return null
+}
+
+export function isAgentTimestampFresh(timestamp: string, nowMs = Date.now()): boolean {
+  const timestampMs = Number(timestamp)
+  if (!Number.isSafeInteger(timestampMs)) {
+    return false
+  }
+  return Math.abs(nowMs - timestampMs) <= agentTimestampWindowMs
+}
diff --git a/server/src/lib/architecture.ts b/server/src/lib/architecture.ts
new file mode 100644
index 0000000..b285c47
--- /dev/null
+++ b/server/src/lib/architecture.ts
@@ -0,0 +1,20 @@
+export const SUPPORTED_ARCHITECTURES = ['x86_64', 'aarch64'] as const
+
+export type SupportedArchitecture = typeof SUPPORTED_ARCHITECTURES[number]
+
+const X86_ARCHITECTURES = new Set(['x86_64', 'amd64', 'x64', 'x86'])
+const ARM_ARCHITECTURES = new Set(['aarch64', 'arm64'])
+
+export function normalizeArchitecture(value?: string | null): SupportedArchitecture {
+  const normalized = value?.trim().toLowerCase()
+
+  if (normalized && ARM_ARCHITECTURES.has(normalized)) {
+    return 'aarch64'
+  }
+
+  if (normalized && X86_ARCHITECTURES.has(normalized)) {
+    return 'x86_64'
+  }
+
+  return 'x86_64'
+}
diff --git a/server/src/lib/billing-calc.ts b/server/src/lib/billing-calc.ts
new file mode 100644
index 0000000..bc502ec
--- /dev/null
+++ b/server/src/lib/billing-calc.ts
@@ -0,0 +1,314 @@
+/**
+ * 公共计费计算模块
+ * 所有涉及价格、日价、差价、剩余价值的计算必须使用本模块的方法
+ * 确保全系统计算逻辑一致
+ */
+
+// ==================== 周期天数常量 ====================
+
+/**
+ * 标准周期天数
+ * 统一定义：1个月 = 31 天
+ * 月付: 31 天
+ * 季付: 31 * 3 = 93 天
+ * 半年付: 31 * 6 = 186 天
+ * 年付: 31 * 12 = 372 天
+ */
+const CYCLE_DAYS: Record<number, number> = {
+  1: 31,      // 月付
+  3: 93,      // 季付
+  6: 186,     // 半年付
+  12: 372     // 年付
+}
+
+// ==================== 基础计算函数 ====================
+
+/**
+ * 获取周期天数
+ * @param billingCycle 计费周期（月数）
+ * @returns 周期天数
+ */
+export function getCycleDays(billingCycle: number): number {
+  return CYCLE_DAYS[billingCycle] || (billingCycle * 31)
+}
+
+/**
+ * 计算日价
+ * @param price 周期价格（元）
+ * @param billingCycle 计费周期（月数）
+ * @returns 日价（元）
+ */
+export function calculateDailyPrice(price: number, billingCycle: number): number {
+  const cycleDays = getCycleDays(billingCycle)
+  return price / cycleDays
+}
+
+/**
+ * 计算月价
+ * @param price 周期价格（元）
+ * @param billingCycle 计费周期（月数）
+ * @returns 月价（元）
+ */
+export function calculateMonthlyPrice(price: number, billingCycle: number): number {
+  const cycle = Math.max(billingCycle || 1, 1) // 防止除零
+  return price / cycle
+}
+
+/**
+ * 计算实际支付价格（应用折扣后）
+ * @param originalPrice 原价（元）
+ * @param discountRate 折扣率（0-1，如 0.05 表示 5% 折扣）
+ * @returns 折扣后价格（元）
+ */
+export function calculateDiscountedPrice(originalPrice: number, discountRate: number): number {
+  return Number((originalPrice * (1 - discountRate)).toFixed(2))
+}
+
+/**
+ * 计算折扣金额
+ * @param originalPrice 原价（元）
+ * @param discountRate 折扣率（0-1）
+ * @returns 折扣金额（元）
+ */
+export function calculateDiscountAmount(originalPrice: number, discountRate: number): number {
+  return Number((originalPrice * discountRate).toFixed(2))
+}
+
+// ==================== 剩余天数计算 ====================
+
+/**
+ * 计算剩余天数（向上取整）
+ * @param expiresAt 到期时间
+ * @param now 当前时间（可选，默认为当前）
+ * @returns 剩余天数（>=0）
+ */
+export function calculateRemainingDays(expiresAt: Date, now: Date = new Date()): number {
+  const expiresDate = new Date(expiresAt)
+  const remainingMs = expiresDate.getTime() - now.getTime()
+  return Math.max(0, Math.ceil(remainingMs / (24 * 60 * 60 * 1000)))
+}
+
+/**
+ * 计算剩余天数（精确到小数）
+ * @param expiresAt 到期时间
+ * @param now 当前时间（可选）
+ * @returns 剩余天数（精确）
+ */
+export function calculateRemainingDaysPrecise(expiresAt: Date, now: Date = new Date()): number {
+  const expiresDate = new Date(expiresAt)
+  const remainingMs = expiresDate.getTime() - now.getTime()
+  return Math.max(0, remainingMs / (24 * 60 * 60 * 1000))
+}
+
+// ==================== 剩余价值计算 ====================
+
+/**
+ * 计算剩余价值
+ * 公式: 日价 × 剩余天数
+ * 
+ * @param price 周期价格（元，原价）
+ * @param billingCycle 计费周期（月数）
+ * @param remainingDays 剩余天数
+ * @param discountRate 折扣率（0-1，可选）
+ * @returns 剩余价值（元）
+ */
+export function calculateRemainingValue(
+  price: number,
+  billingCycle: number,
+  remainingDays: number,
+  discountRate: number = 0
+): number {
+  // 使用折扣后的价格计算剩余价值
+  const effectivePrice = discountRate > 0
+    ? calculateDiscountedPrice(price, discountRate)
+    : price
+  const dailyPrice = calculateDailyPrice(effectivePrice, billingCycle)
+  return Number((dailyPrice * remainingDays).toFixed(2))
+}
+
+/**
+ * 计算安全的剩余价值退款金额
+ * 确保退款金额不超过实际支付金额
+ * 
+ * @param price 周期价格（元，原价）
+ * @param billingCycle 计费周期（月数）
+ * @param remainingDays 剩余天数
+ * @param discountRate 折扣率（0-1）
+ * @param maxRefundable 最大可退款金额（可选，用于限制）
+ * @returns 安全的退款金额（元）
+ */
+export function calculateSafeRefundAmount(
+  price: number,
+  billingCycle: number,
+  remainingDays: number,
+  discountRate: number = 0,
+  maxRefundable?: number
+): number {
+  const effectivePrice = discountRate > 0
+    ? calculateDiscountedPrice(price, discountRate)
+    : price
+
+  // 计算剩余价值
+  const cycleDays = getCycleDays(billingCycle)
+  const remainingRatio = Math.min(remainingDays / cycleDays, 1) // 比例不能超过 1
+  const refundAmount = Number((effectivePrice * remainingRatio).toFixed(2))
+
+  // 如果提供了最大可退款金额，取较小值
+  if (maxRefundable !== undefined) {
+    return Math.min(refundAmount, maxRefundable)
+  }
+
+  return refundAmount
+}
+
+// ==================== 差价计算 ====================
+
+/**
+ * 计算方案切换差价
+ * 公式: (新方案日价 - 旧方案日价) × 剩余天数
+ * 
+ * 重要：
+ * - 如果用户原本用优惠码购买，剩余价值应该用折扣后价格计算
+ * - 新方案费用也应该用折扣后价格计算
+ * - 确保公平性：用户实际支付了多少，剩余价值就按比例退多少
+ * 
+ * @param oldPrice 旧方案周期价格（元）
+ * @param oldBillingCycle 旧方案计费周期
+ * @param newPrice 新方案周期价格（元）
+ * @param newBillingCycle 新方案计费周期
+ * @param remainingDays 剩余天数
+ * @param discountRate 折扣率（0-1，应用于新旧方案）
+ * @returns 差价（正数=补交，负数=退款）
+ */
+export function calculatePriceDiff(
+  oldPrice: number,
+  oldBillingCycle: number,
+  newPrice: number,
+  newBillingCycle: number,
+  remainingDays: number,
+  discountRate: number = 0
+): number {
+  // 应用折扣后的实际价格
+  const actualOldPrice = discountRate > 0
+    ? calculateDiscountedPrice(oldPrice, discountRate)
+    : oldPrice
+  const actualNewPrice = discountRate > 0
+    ? calculateDiscountedPrice(newPrice, discountRate)
+    : newPrice
+
+  // 计算日价
+  const oldDailyPrice = calculateDailyPrice(actualOldPrice, oldBillingCycle)
+  const newDailyPrice = calculateDailyPrice(actualNewPrice, newBillingCycle)
+
+  // 差价 = (新日价 - 旧日价) × 剩余天数
+  const priceDiff = (newDailyPrice - oldDailyPrice) * remainingDays
+
+  // 最低金额门槛：低于 0.01 元按 0 处理
+  return Math.abs(priceDiff) < 0.01 ? 0 : Number(priceDiff.toFixed(2))
+}
+
+/**
+ * 计算完整的方案切换结果
+ * 包含所有计算细节，供前端展示和后端处理
+ */
+export interface PlanChangeCalcResult {
+  /** 旧方案日价（元） */
+  oldDailyPrice: number
+  /** 新方案日价（元） */
+  newDailyPrice: number
+  /** 剩余价值（元，折扣后） */
+  remainingValue: number
+  /** 新方案费用（元，折扣后） */
+  newPlanCost: number
+  /** 折扣金额（元） */
+  discountAmount: number
+  /** 差价（元，正数=补交，负数=退款） */
+  priceDiff: number
+  /** 是否升级 */
+  isUpgrade: boolean
+}
+
+export function calculatePlanChangeDetails(
+  oldPrice: number,
+  oldBillingCycle: number,
+  newPrice: number,
+  newBillingCycle: number,
+  remainingDays: number,
+  discountRate: number = 0
+): PlanChangeCalcResult {
+  // 计算折扣后的价格
+  const actualOldPrice = discountRate > 0
+    ? calculateDiscountedPrice(oldPrice, discountRate)
+    : oldPrice
+  const actualNewPrice = discountRate > 0
+    ? calculateDiscountedPrice(newPrice, discountRate)
+    : newPrice
+
+  // 计算日价
+  const oldDailyPrice = calculateDailyPrice(actualOldPrice, oldBillingCycle)
+  const newDailyPrice = calculateDailyPrice(actualNewPrice, newBillingCycle)
+
+  // 剩余价值 = 旧日价 × 剩余天数
+  const remainingValue = Number((oldDailyPrice * remainingDays).toFixed(2))
+
+  // 新方案费用 = 新日价 × 剩余天数
+  const newPlanCost = Number((newDailyPrice * remainingDays).toFixed(2))
+
+  // 折扣金额（基于新方案原价）
+  const discountAmount = discountRate > 0
+    ? Number(((newPrice / getCycleDays(newBillingCycle)) * remainingDays * discountRate).toFixed(2))
+    : 0
+
+  // 差价
+  const priceDiff = Number((newPlanCost - remainingValue).toFixed(2))
+  const finalPriceDiff = Math.abs(priceDiff) < 0.01 ? 0 : priceDiff
+
+  return {
+    oldDailyPrice: Number(oldDailyPrice.toFixed(4)),
+    newDailyPrice: Number(newDailyPrice.toFixed(4)),
+    remainingValue,
+    newPlanCost,
+    discountAmount,
+    priceDiff: finalPriceDiff,
+    isUpgrade: newDailyPrice > oldDailyPrice
+  }
+}
+
+// ==================== 续费计算 ====================
+
+/**
+ * 计算续费金额
+ * @param monthlyPrice 月价（元）
+ * @param months 续费月数
+ * @param discountRate 折扣率（0-1）
+ * @returns { originalAmount, discountAmount, finalAmount }
+ */
+export function calculateRenewAmount(
+  monthlyPrice: number,
+  months: number,
+  discountRate: number = 0
+): { originalAmount: number; discountAmount: number; finalAmount: number } {
+  const originalAmount = Number((monthlyPrice * months).toFixed(2))
+  const discountAmount = discountRate > 0
+    ? Number((originalAmount * discountRate).toFixed(2))
+    : 0
+  const finalAmount = Number((originalAmount - discountAmount).toFixed(2))
+
+  return { originalAmount, discountAmount, finalAmount }
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 添加月份到日期
+ * 统一按天数计算：1个月 = 31 天
+ * @param date 基准日期
+ * @param months 月数
+ * @returns 新日期
+ */
+export function addMonths(date: Date, months: number): Date {
+  const daysToAdd = months * 31
+  const result = new Date(date)
+  result.setDate(result.getDate() + daysToAdd)
+  return result
+}
diff --git a/server/src/lib/caddy-client.ts b/server/src/lib/caddy-client.ts
new file mode 100644
index 0000000..18b2168
--- /dev/null
+++ b/server/src/lib/caddy-client.ts
@@ -0,0 +1,279 @@
+/**
+ * Caddy API 客户端
+ * 通过 8444 端口 Basic Auth 保护的通道调用 Caddy Admin API
+ */
+
+import { Agent, request as undiciRequest } from 'undici'
+import { formatHostForUrl } from './network-address.js'
+
+// 请求超时配置（毫秒）
+const REQUEST_TIMEOUT = 30000 // 30秒
+const CONNECT_TIMEOUT = 10000 // 10秒
+
+export interface CaddyClientConfig {
+  host: string // 宿主机 IP 或域名
+  port: number // Caddy API 端口 (默认 8444)
+  username: string // Basic Auth 用户名
+  password: string // Basic Auth 密码
+}
+
+export interface CaddyRoute {
+  '@id'?: string
+  match?: Array<{ host?: string[]; protocol?: string }>
+  handle?: Array<{
+    handler: string
+    upstreams?: Array<{ dial: string }>
+    routes?: CaddyRoute[]
+  }>
+  terminal?: boolean
+}
+
+/**
+ * Caddy API 客户端类
+ */
+export class CaddyClient {
+  private baseUrl: string
+  private authHeader: string
+  private agent: Agent
+
+  constructor(config: CaddyClientConfig) {
+    this.baseUrl = `https://${formatHostForUrl(config.host)}:${config.port}`
+    this.authHeader = 'Basic ' + Buffer.from(`${config.username}:${config.password}`).toString('base64')
+    
+    // 创建 undici Agent，忽略自签名证书错误，配置超时
+    this.agent = new Agent({
+      connect: {
+        rejectUnauthorized: false,
+        timeout: CONNECT_TIMEOUT
+      }
+    })
+  }
+
+  /**
+   * 发起 API 请求
+   */
+  private async request<T>(
+    method: string,
+    path: string,
+    body?: unknown
+  ): Promise<T> {
+    const url = `${this.baseUrl}${path}`
+    
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT)
+
+    try {
+      const response = await undiciRequest(url, {
+        method,
+        dispatcher: this.agent,
+        signal: controller.signal,
+        headers: {
+          'Authorization': this.authHeader,
+          'Content-Type': 'application/json'
+        },
+        body: body ? JSON.stringify(body) : undefined
+      })
+
+      if (response.statusCode >= 400) {
+        const errorText = await response.body.text()
+        throw new Error(`Caddy API error: ${response.statusCode} ${errorText}`)
+      }
+
+      // 某些请求没有响应体
+      const text = await response.body.text()
+      if (!text) {
+        return {} as T
+      }
+      
+      return JSON.parse(text) as T
+    } finally {
+      clearTimeout(timeoutId)
+    }
+  }
+
+  /**
+   * 获取 Caddy 配置
+   */
+  async getConfig(): Promise<unknown> {
+    return this.request('GET', '/config/')
+  }
+
+  /**
+   * 测试连接
+   */
+  async testConnection(): Promise<boolean> {
+    try {
+      console.log(`[Caddy Client] 测试连接: ${this.baseUrl}/config/`)
+      await this.getConfig()
+      console.log(`[Caddy Client] 连接成功: ${this.baseUrl}`)
+      return true
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      // 检查是否是超时错误
+      const isTimeout = errorMessage.includes('abort') || errorMessage.includes('timeout') || errorMessage.includes('ETIMEDOUT')
+      console.error(`[Caddy Client] 连接失败: ${this.baseUrl}`, {
+        error: errorMessage,
+        isTimeout,
+        stack: error instanceof Error ? error.stack : undefined
+      })
+      return false
+    }
+  }
+
+  /**
+   * 添加反代站点
+   * 
+   * 架构说明：
+   * - 使用统一的 `sites` 服务器监听 :80 和 :443
+   * - HTTPS 站点：正常配置，Caddy 自动处理证书和重定向
+   * - HTTP 站点：添加 protocol 匹配，仅响应 HTTP 请求
+   * 
+   * @param domain 域名
+   * @param targetIp 目标 IP (实例内网 IP)
+   * @param targetPort 目标端口
+   * @param httpsEnabled 是否启用 HTTPS（自动申请 Let's Encrypt 证书）
+   */
+  async addSite(domain: string, targetIp: string, targetPort: number, httpsEnabled: boolean = true): Promise<void> {
+    const routeId = `site-${domain.replace(/\./g, '-')}`
+    
+    // 构建路由配置
+    const route: CaddyRoute = {
+      '@id': routeId,
+      match: [{ host: [domain] }],
+      handle: [{
+        handler: 'reverse_proxy',
+        upstreams: [{ dial: `${targetIp}:${targetPort}` }]
+      }],
+      terminal: true
+    }
+
+    // HTTP-only 站点：添加协议匹配，仅响应 HTTP 请求
+    if (!httpsEnabled) {
+      route.match = [{ host: [domain], protocol: 'http' }]
+    }
+
+    // 统一使用 sites 服务器
+    const serverName = 'sites'
+
+    // 策略：优先使用精确的 API 路径，避免影响 Caddyfile 定义的服务器
+    try {
+      // 尝试添加路由到现有服务器
+      await this.request('POST', `/config/apps/http/servers/${serverName}/routes`, route)
+      return
+    } catch (postError) {
+      // POST 失败，可能服务器不存在
+      const postErrorMsg = postError instanceof Error ? postError.message : String(postError)
+      console.log(`[Caddy] POST 路由失败: ${postErrorMsg}`)
+    }
+
+    // 服务器不存在，创建它
+    const serverConfig: Record<string, unknown> = {
+      listen: [':80', ':443'],
+      routes: [route]
+    }
+    
+    // 禁用自动 HTTPS 重定向（我们通过路由匹配控制）
+    serverConfig.automatic_https = {
+      disable_redirects: true
+    }
+
+    try {
+      // 尝试直接创建服务器
+      await this.request('PUT', `/config/apps/http/servers/${serverName}`, serverConfig)
+      return
+    } catch (putError) {
+      const putErrorMsg = putError instanceof Error ? putError.message : String(putError)
+      console.log(`[Caddy] PUT 服务器失败: ${putErrorMsg}`)
+      
+      // 只有当是 404 错误时，才说明 http 应用不存在
+      if (!putErrorMsg.includes('404')) {
+        // 其他错误，直接抛出
+        throw putError
+      }
+    }
+
+    // http 应用不存在，这是非常罕见的情况（Caddyfile 没有任何 HTTP 配置）
+    // 使用 PATCH 合并，不要使用 PUT 覆盖
+    console.log('[Caddy] http 应用不存在，使用 PATCH 创建')
+    const httpApp = {
+      servers: {
+        [serverName]: serverConfig
+      }
+    }
+    
+    // 尝试 PATCH，如果失败则抛出错误
+    try {
+      await this.request('PATCH', '/config/apps/http', httpApp)
+    } catch (patchError) {
+      const patchErrorMsg = patchError instanceof Error ? patchError.message : String(patchError)
+      console.error(`[Caddy] PATCH http 应用失败: ${patchErrorMsg}`)
+      throw new Error(`无法创建站点配置: ${patchErrorMsg}`)
+    }
+  }
+
+  /**
+   * 删除反代站点
+   * @param domain 域名
+   */
+  async deleteSite(domain: string): Promise<void> {
+    const routeId = `site-${domain.replace(/\./g, '-')}`
+    
+    try {
+      await this.request('DELETE', `/id/${routeId}`)
+    } catch (error) {
+      // 如果路由不存在，忽略错误
+      if (error instanceof Error && !error.message.includes('404')) {
+        throw error
+      }
+    }
+  }
+
+  /**
+   * 获取所有反代站点
+   */
+  async getSites(): Promise<string[]> {
+    try {
+      const config = await this.getConfig() as {
+        apps?: {
+          http?: {
+            servers?: Record<string, {
+              routes?: CaddyRoute[]
+            }>
+          }
+        }
+      }
+
+      const servers = config?.apps?.http?.servers || {}
+      const domains: string[] = []
+
+      // 从所有服务器收集域名
+      for (const serverName of Object.keys(servers)) {
+        const routes = servers[serverName]?.routes || []
+        for (const route of routes) {
+          if (route.match?.[0]?.host) {
+            domains.push(...route.match[0].host)
+          }
+        }
+      }
+
+      return domains
+    } catch {
+      return []
+    }
+  }
+
+  /**
+   * 重新加载配置
+   */
+  async reload(): Promise<void> {
+    // Caddy 会自动应用配置更改，不需要显式 reload
+    // 这个方法保留用于兼容性
+  }
+}
+
+/**
+ * 创建 Caddy 客户端实例
+ */
+export function createCaddyClient(config: CaddyClientConfig): CaddyClient {
+  return new CaddyClient(config)
+}
diff --git a/server/src/lib/cloud-init-status.ts b/server/src/lib/cloud-init-status.ts
new file mode 100644
index 0000000..d437fa8
--- /dev/null
+++ b/server/src/lib/cloud-init-status.ts
@@ -0,0 +1,293 @@
+import { prisma } from '../db/prisma.js'
+import type { IncusClient } from './incus/incus-client.js'
+
+export type CloudInitState =
+  | 'manual'
+  | 'done'
+  | 'done_with_errors'
+  | 'running'
+  | 'disabled'
+  | 'unsupported'
+  | 'agent_unavailable'
+  | 'unknown'
+
+export type CloudInitSource = 'manual' | 'status_json' | 'boot_finished' | 'image' | 'unknown'
+
+export interface CloudInitStatusResponse {
+  ready: boolean
+  state: CloudInitState
+  source: CloudInitSource
+  manualOverride: boolean
+  message: string
+  detectedAt: string
+}
+
+interface InstanceCloudInitRecord {
+  id: number
+  image: string
+  cloud_init_state?: string | null
+  cloud_init_source?: string | null
+  cloud_init_last_checked_at?: string | null
+  cloud_init_completed_at?: string | null
+  cloud_init_manual_completed_at?: string | null
+  cloud_init_manual_completed_by?: number | null
+}
+
+const STATUS_JSON_PATHS = [
+  '/run/cloud-init/status.json',
+  '/var/lib/cloud/data/status.json'
+]
+
+const BOOT_FINISHED_PATH = '/var/lib/cloud/instance/boot-finished'
+
+const READY_STATES = new Set<CloudInitState>([
+  'manual',
+  'done',
+  'done_with_errors',
+  'disabled',
+  'unsupported'
+])
+
+const CACHEABLE_STATES = new Set<CloudInitState>([
+  'manual',
+  'done',
+  'done_with_errors',
+  'disabled',
+  'unsupported'
+])
+
+function buildResponse(
+  state: CloudInitState,
+  source: CloudInitSource,
+  message: string,
+  detectedAt: Date,
+  manualOverride: boolean = state === 'manual'
+): CloudInitStatusResponse {
+  return {
+    ready: READY_STATES.has(state),
+    state,
+    source,
+    manualOverride,
+    message,
+    detectedAt: detectedAt.toISOString()
+  }
+}
+
+function isCloudImageAlias(imageAlias: string): boolean {
+  return imageAlias.toLowerCase().includes('/cloud')
+}
+
+function getNestedValue(source: unknown, path: string[]): unknown {
+  let current: unknown = source
+  for (const segment of path) {
+    if (!current || typeof current !== 'object' || !(segment in current)) {
+      return undefined
+    }
+    current = (current as Record<string, unknown>)[segment]
+  }
+  return current
+}
+
+function getNestedString(source: unknown, paths: string[][]): string | null {
+  for (const path of paths) {
+    const value = getNestedValue(source, path)
+    if (typeof value === 'string' && value.trim()) {
+      return value.trim()
+    }
+  }
+  return null
+}
+
+function hasIssues(value: unknown): boolean {
+  if (!value) return false
+
+  if (Array.isArray(value)) {
+    return value.some(item => hasIssues(item))
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length > 0
+  }
+
+  if (typeof value !== 'object') {
+    return false
+  }
+
+  const record = value as Record<string, unknown>
+
+  for (const [key, nested] of Object.entries(record)) {
+    if (key === 'errors' || key === '_errors' || key === 'recoverable_errors' || key === 'recoverableErrors') {
+      if (hasIssues(nested)) {
+        return true
+      }
+      continue
+    }
+
+    if (nested && typeof nested === 'object' && hasIssues(nested)) {
+      return true
+    }
+  }
+
+  return false
+}
+
+function parseStatusPayload(rawContent: string): { state: CloudInitState; message: string } | null {
+  if (!rawContent.trim()) return null
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(rawContent) as unknown
+  } catch {
+    return null
+  }
+
+  const rawStatus = getNestedString(parsed, [
+    ['extended_status'],
+    ['status'],
+    ['v1', 'extended_status'],
+    ['v1', 'status'],
+    ['v1', 'stage'],
+    ['stage']
+  ])?.toLowerCase() || ''
+
+  const hasErrors = hasIssues(parsed)
+
+  if (rawStatus.includes('disabled')) {
+    return { state: 'disabled', message: 'Cloud-init is disabled for this instance' }
+  }
+
+  if (rawStatus.includes('done') || rawStatus.includes('finished') || rawStatus.includes('final')) {
+    if (hasErrors || rawStatus.includes('error') || rawStatus.includes('degraded')) {
+      return { state: 'done_with_errors', message: 'Cloud-init completed with warnings' }
+    }
+    return { state: 'done', message: 'Cloud-init completed' }
+  }
+
+  if (rawStatus.includes('running') || rawStatus.includes('init') || rawStatus.includes('modules') || rawStatus.includes('not started') || rawStatus.includes('not run')) {
+    return { state: 'running', message: 'Cloud-init is still running' }
+  }
+
+  if (rawStatus.includes('error') || rawStatus.includes('degraded')) {
+    return { state: 'running', message: 'Cloud-init reported issues before completion' }
+  }
+
+  return null
+}
+
+async function readInstanceFile(
+  client: IncusClient,
+  instanceName: string,
+  filePath: string
+): Promise<{ statusCode: number; content: string }> {
+  const encodedPath = encodeURIComponent(filePath)
+  return client.readFile(`/1.0/instances/${instanceName}/files?path=${encodedPath}`)
+}
+
+export function getCachedCloudInitStatus(instance: InstanceCloudInitRecord): CloudInitStatusResponse | null {
+  const detectedAt = instance.cloud_init_last_checked_at
+    || instance.cloud_init_manual_completed_at
+    || instance.cloud_init_completed_at
+
+  if (!detectedAt) return null
+
+  const state = instance.cloud_init_state as CloudInitState | null
+  const source = (instance.cloud_init_source as CloudInitSource | null) || 'unknown'
+
+  if (!state || !CACHEABLE_STATES.has(state)) {
+    return null
+  }
+
+  const message = state === 'manual'
+    ? 'Cloud-init marked complete manually'
+    : state === 'done'
+      ? 'Cloud-init completed'
+      : state === 'done_with_errors'
+        ? 'Cloud-init completed with warnings'
+        : state === 'disabled'
+          ? 'Cloud-init is disabled for this instance'
+          : 'Image does not appear to use cloud-init'
+
+  return buildResponse(state, source, message, new Date(detectedAt), state === 'manual')
+}
+
+export async function persistCloudInitStatus(
+  instanceId: number,
+  result: CloudInitStatusResponse,
+  manualCompletedBy?: number | null
+): Promise<void> {
+  const detectedAt = new Date(result.detectedAt)
+
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      cloudInitState: result.state,
+      cloudInitSource: result.source,
+      cloudInitLastCheckedAt: detectedAt,
+      cloudInitCompletedAt: result.ready ? detectedAt : null,
+      cloudInitManualCompletedAt: result.state === 'manual' ? detectedAt : null,
+      cloudInitManualCompletedBy: result.state === 'manual' ? (manualCompletedBy ?? null) : null
+    }
+  })
+}
+
+export async function resetInstanceCloudInitState(instanceId: number): Promise<void> {
+  await prisma.instance.update({
+    where: { id: instanceId },
+    data: {
+      cloudInitState: null,
+      cloudInitSource: null,
+      cloudInitLastCheckedAt: null,
+      cloudInitCompletedAt: null,
+      cloudInitManualCompletedAt: null,
+      cloudInitManualCompletedBy: null
+    }
+  })
+}
+
+export async function detectCloudInitStatus(
+  client: IncusClient,
+  instance: Pick<InstanceCloudInitRecord, 'id' | 'image'> & { incus_id: string }
+): Promise<CloudInitStatusResponse> {
+  const detectedAt = new Date()
+
+  if (!isCloudImageAlias(instance.image)) {
+    return buildResponse('unsupported', 'image', 'Image does not appear to use cloud-init', detectedAt)
+  }
+
+  let sawAgentError = false
+
+  for (const filePath of STATUS_JSON_PATHS) {
+    const result = await readInstanceFile(client, instance.incus_id, filePath)
+
+    if (result.statusCode === 200) {
+      const parsed = parseStatusPayload(result.content)
+      if (parsed) {
+        return buildResponse(parsed.state, 'status_json', parsed.message, detectedAt)
+      }
+      break
+    }
+
+    if (result.statusCode >= 500 || result.statusCode === 403) {
+      sawAgentError = true
+    }
+  }
+
+  const bootFinishedResult = await readInstanceFile(client, instance.incus_id, BOOT_FINISHED_PATH)
+  if (bootFinishedResult.statusCode === 200) {
+    return buildResponse('done', 'boot_finished', 'Cloud-init completed', detectedAt)
+  }
+
+  if (bootFinishedResult.statusCode >= 500 || bootFinishedResult.statusCode === 403) {
+    sawAgentError = true
+  }
+
+  if (sawAgentError) {
+    return buildResponse('agent_unavailable', 'unknown', 'Guest agent is not ready for cloud-init inspection', detectedAt)
+  }
+
+  if (bootFinishedResult.statusCode === 404) {
+    return buildResponse('running', 'boot_finished', 'Cloud-init is still running', detectedAt)
+  }
+
+  return buildResponse('unknown', 'unknown', 'Unable to determine cloud-init status', detectedAt)
+}
diff --git a/server/src/lib/config-cache.ts b/server/src/lib/config-cache.ts
new file mode 100644
index 0000000..1552b50
--- /dev/null
+++ b/server/src/lib/config-cache.ts
@@ -0,0 +1,108 @@
+/**
+ * 系统配置缓存层
+ * PERF001: 为系统配置添加缓存，减少频繁的数据库查询
+ * 
+ * 策略说明：
+ * - 使用内存缓存，生产环境可扩展为 Redis
+ * - TTL: 5分钟（配置变更不频繁）
+ * - 配置更新时自动清除缓存
+ */
+
+interface CacheEntry<T> {
+  value: T
+  expiresAt: number
+}
+
+// 缓存配置
+const CACHE_CONFIG = {
+  /** 缓存过期时间（毫秒）*/
+  TTL: 5 * 60 * 1000,  // 5分钟
+  /** 最大缓存条目数 */
+  MAX_SIZE: 100,
+} as const
+
+// 内存缓存存储
+const configCache = new Map<string, CacheEntry<string | null>>()
+
+/**
+ * 从缓存获取配置值
+ */
+export function getCachedConfig(key: string): string | null | undefined {
+  const entry = configCache.get(key)
+  if (!entry) return undefined
+  
+  // 检查是否过期
+  if (Date.now() > entry.expiresAt) {
+    configCache.delete(key)
+    return undefined
+  }
+  
+  return entry.value
+}
+
+/**
+ * 设置配置缓存
+ */
+export function setCachedConfig(key: string, value: string | null): void {
+  // 检查缓存大小，避免内存泄漏
+  if (configCache.size >= CACHE_CONFIG.MAX_SIZE) {
+    // 清理过期条目
+    const now = Date.now()
+    for (const [k, v] of configCache.entries()) {
+      if (now > v.expiresAt) {
+        configCache.delete(k)
+      }
+    }
+    
+    // 如果仍然超过限制，清除最旧的条目
+    if (configCache.size >= CACHE_CONFIG.MAX_SIZE) {
+      const keysToDelete = Array.from(configCache.keys()).slice(0, 10)
+      for (const k of keysToDelete) {
+        configCache.delete(k)
+      }
+    }
+  }
+  
+  configCache.set(key, {
+    value,
+    expiresAt: Date.now() + CACHE_CONFIG.TTL,
+  })
+}
+
+/**
+ * 清除指定配置的缓存
+ */
+export function invalidateCachedConfig(key: string): void {
+  configCache.delete(key)
+}
+
+/**
+ * 清除所有配置缓存
+ */
+export function invalidateAllConfigCache(): void {
+  configCache.clear()
+}
+
+/**
+ * 批量清除配置缓存
+ */
+export function invalidateCachedConfigs(keys: string[]): void {
+  for (const key of keys) {
+    configCache.delete(key)
+  }
+}
+
+/**
+ * 获取缓存统计信息（用于调试）
+ */
+export function getCacheStats(): {
+  size: number
+  maxSize: number
+  ttl: number
+} {
+  return {
+    size: configCache.size,
+    maxSize: CACHE_CONFIG.MAX_SIZE,
+    ttl: CACHE_CONFIG.TTL,
+  }
+}
diff --git a/server/src/lib/cookie-config.ts b/server/src/lib/cookie-config.ts
new file mode 100644
index 0000000..7cdd89c
--- /dev/null
+++ b/server/src/lib/cookie-config.ts
@@ -0,0 +1,136 @@
+/**
+ * Cookie 配置模块
+ * SEC005: Cookie SameSite 属性统一配置
+ * 
+ * 集中管理所有 Cookie 相关配置，确保安全属性一致性
+ */
+
+import type { CookieSerializeOptions } from '@fastify/cookie'
+
+/**
+ * Cookie 安全配置
+ * 根据环境变量和运行环境自动调整安全选项
+ */
+export interface CookieSecurityConfig {
+  httpOnly: boolean
+  secure: boolean
+  sameSite: 'strict' | 'lax' | 'none'
+  path: string
+  maxAge: number
+  domain?: string
+}
+
+/**
+ * Cookie 类型配置
+ */
+export const COOKIE_CONFIG = {
+  // Refresh Token Cookie 配置（简化版：延长到 30 天）
+  REFRESH_TOKEN: {
+    name: 'refreshToken',
+    maxAge: 30 * 24 * 60 * 60,  // 30天（秒）
+    path: '/',
+  },
+} as const
+
+/**
+ * 判断当前是否为生产环境
+ */
+export function isProductionEnv(): boolean {
+  return process.env.NODE_ENV === 'production'
+}
+
+/**
+ * 获取 Cookie Secure 属性
+ * 生产环境或显式配置时使用 HTTPS
+ */
+export function getCookieSecure(): boolean {
+  return isProductionEnv() || process.env.COOKIE_SECURE === 'true'
+}
+
+/**
+ * 获取 Cookie SameSite 属性
+ * 
+ * 策略说明：
+ * - 生产环境：默认 'lax'（兼容跨站导航）
+ * - 开发环境：默认 'strict'（最高安全性）
+ * - 可通过 COOKIE_SAME_SITE 环境变量覆盖
+ * 
+ * SameSite 值说明：
+ * - 'strict': 完全禁止跨站请求携带 Cookie（最安全，但可能影响 OAuth 回调）
+ * - 'lax': 允许顶级导航携带 Cookie（推荐生产环境使用）
+ * - 'none': 允许所有跨站请求（需配合 Secure=true，适用于跨域场景）
+ */
+export function getCookieSameSite(): 'strict' | 'lax' | 'none' {
+  const isProduction = isProductionEnv()
+  
+  // 如果显式配置了 COOKIE_SAME_SITE，使用配置值
+  if (process.env.COOKIE_SAME_SITE) {
+    const value = process.env.COOKIE_SAME_SITE.toLowerCase()
+    if (value === 'strict' || value === 'lax' || value === 'none') {
+      // 验证：'none' 必须配合 secure=true
+      if (value === 'none' && !getCookieSecure()) {
+        console.warn('[Cookie Config] SameSite=none requires Secure=true, falling back to lax')
+        return 'lax'
+      }
+      return value
+    }
+    console.warn(`[Cookie Config] Invalid COOKIE_SAME_SITE value: ${process.env.COOKIE_SAME_SITE}, using default`)
+  }
+  
+  // 默认值：生产环境用 lax，开发环境用 strict
+  return isProduction ? 'lax' : 'strict'
+}
+
+/**
+ * 获取 Cookie Domain 属性
+ * 用于跨子域名共享 Cookie 的场景
+ */
+export function getCookieDomain(): string | undefined {
+  return process.env.COOKIE_DOMAIN || undefined
+}
+
+/**
+ * 获取 Refresh Token Cookie 完整配置
+ * 
+ * @returns Fastify Cookie 序列化选项
+ */
+export function getRefreshTokenCookieOptions(): CookieSerializeOptions {
+  const domain = getCookieDomain()
+  
+  return {
+    httpOnly: true,          // 防止 XSS 攻击读取 Cookie
+    secure: getCookieSecure(),
+    sameSite: getCookieSameSite(),
+    path: COOKIE_CONFIG.REFRESH_TOKEN.path,
+    maxAge: COOKIE_CONFIG.REFRESH_TOKEN.maxAge,
+    ...(domain ? { domain } : {}),
+  }
+}
+
+/**
+ * 获取清除 Cookie 的选项
+ * 
+ * @returns 清除 Cookie 所需的选项
+ */
+export function getClearCookieOptions(): { path: string; domain?: string } {
+  const domain = getCookieDomain()
+  return {
+    path: '/',
+    ...(domain ? { domain } : {}),
+  }
+}
+
+/**
+ * 在启动时打印 Cookie 配置（用于调试）
+ */
+export function logCookieConfig(): void {
+  const config = getRefreshTokenCookieOptions()
+  const maxAge = config.maxAge ?? COOKIE_CONFIG.REFRESH_TOKEN.maxAge
+  console.log('[Cookie Config] Current settings:', {
+    secure: config.secure,
+    sameSite: config.sameSite,
+    domain: config.domain || '(not set)',
+    maxAge: `${maxAge}s (${Math.round(maxAge / 86400)} days)`,
+    environment: isProductionEnv() ? 'production' : 'development',
+  })
+}
diff --git a/server/src/lib/cpu-allowance.ts b/server/src/lib/cpu-allowance.ts
new file mode 100644
index 0000000..d2833c1
--- /dev/null
+++ b/server/src/lib/cpu-allowance.ts
@@ -0,0 +1,70 @@
+/**
+ * CPU额配转换工具
+ * 将CPU额配（allowance）转换为实际核心数
+ * 
+ * 规则：
+ * - 小于100% = 1核
+ * - 150% = 2核
+ * - 200% = 3核
+ * - 250% = 3核（向上取整）
+ * 
+ * 计算公式：核心数 = Math.ceil(额配 / 100)
+ */
+
+/**
+ * 将CPU额配转换为实际核心数
+ * @param allowance - CPU额配（例如：100, 150, 200）
+ * @returns 核心数
+ * 
+ * 规则：
+ * - 额配 ≤ 100% → 1核
+ * - 100% < 额配 ≤ 200% → 2核
+ * - 200% < 额配 ≤ 300% → 3核
+ * - 以此类推...
+ */
+export function allowanceToCores(allowance: number): number {
+  if (allowance <= 0) return 1
+  if (allowance <= 100) return 1
+  // 大于100时，向上取整到下一个100的倍数
+  return Math.ceil(allowance / 100)
+}
+
+/**
+ * 验证CPU额配是否有效
+ * @param allowance - CPU额配
+ * @param minAllowance - 最小额配（默认1）
+ * @param maxAllowance - 最大额配
+ * @returns 是否有效
+ */
+export function isValidAllowance(
+  allowance: number,
+  minAllowance: number = 15,
+  maxAllowance: number = Infinity
+): boolean {
+  if (allowance < minAllowance || allowance > maxAllowance) return false
+  // 额配必须是5的倍数（步长为5）
+  return allowance % 5 === 0
+}
+
+/**
+ * 规范化CPU额配（确保是5的倍数，且在范围内）
+ * @param allowance - CPU额配
+ * @param minAllowance - 最小额配（默认1）
+ * @param maxAllowance - 最大额配
+ * @returns 规范化后的额配
+ */
+export function normalizeAllowance(
+  allowance: number,
+  minAllowance: number = 15,
+  maxAllowance: number = Infinity
+): number {
+  // 确保不小于最小值
+  allowance = Math.max(allowance, minAllowance)
+  // 确保不超过最大值
+  allowance = Math.min(allowance, maxAllowance)
+  // 向下取整到5的倍数
+  allowance = Math.floor(allowance / 5) * 5
+  // 确保不小于最小值
+  return Math.max(allowance, minAllowance)
+}
+
diff --git a/server/src/lib/distributed-lock.ts b/server/src/lib/distributed-lock.ts
new file mode 100644
index 0000000..9390e83
--- /dev/null
+++ b/server/src/lib/distributed-lock.ts
@@ -0,0 +1,267 @@
+/**
+ * 分布式锁实现
+ * LOGIC004: 支持多实例部署的分布式锁
+ * 
+ * 基于数据库的分布式锁实现，适用于：
+ * - 配额更新（防止超卖）
+ * - 任务调度（防止重复执行）
+ * - 资源分配（防止竞争）
+ * 
+ * 特性：
+ * - 基于 PostgreSQL 行级锁
+ * - 自动过期释放（防止死锁）
+ * - 可重入锁支持
+ * - 锁等待超时
+ */
+
+import { prisma } from '../db/prisma.js'
+import { Prisma } from '@prisma/client'
+import { nanoid } from 'nanoid'
+
+/**
+ * 锁配置选项
+ */
+export interface LockOptions {
+  /** 锁过期时间（毫秒），默认 30 秒 */
+  expireMs?: number
+  /** 等待锁的超时时间（毫秒），默认 5 秒 */
+  waitTimeoutMs?: number
+  /** 重试间隔（毫秒），默认 100 毫秒 */
+  retryIntervalMs?: number
+  /** 锁持有者标识（默认自动生成） */
+  ownerId?: string
+}
+
+/**
+ * 锁结果
+ */
+export interface LockResult {
+  success: boolean
+  lockId?: string
+  ownerId?: string
+  error?: string
+}
+
+/**
+ * 默认配置
+ */
+const DEFAULT_OPTIONS = {
+  expireMs: 30000,           // 30 秒过期
+  waitTimeoutMs: 5000,       // 5 秒等待超时
+  retryIntervalMs: 100,      // 100 毫秒重试间隔
+} as const
+
+/**
+ * 生成唯一的锁持有者 ID
+ */
+function generateOwnerId(): string {
+  return `${process.pid}-${nanoid(8)}`
+}
+
+/**
+ * 延迟函数
+ */
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 尝试获取分布式锁
+ * 
+ * @param lockKey 锁的唯一标识
+ * @param options 锁配置
+ * @returns 锁结果
+ */
+export async function acquireLock(
+  lockKey: string,
+  options: LockOptions = {}
+): Promise<LockResult> {
+  const opts = { ...DEFAULT_OPTIONS, ...options }
+  const ownerId = opts.ownerId || generateOwnerId()
+  const startTime = Date.now()
+
+  while (Date.now() - startTime < opts.waitTimeoutMs) {
+    try {
+      const now = new Date()
+      const expiresAt = new Date(now.getTime() + opts.expireMs)
+      const result = await prisma.$queryRaw<Array<{ id: number; ownerId: string }>>(Prisma.sql`
+        INSERT INTO "distributed_locks" ("lock_key", "owner_id", "acquired_at", "expires_at")
+        VALUES (${lockKey}, ${ownerId}, ${now}, ${expiresAt})
+        ON CONFLICT ("lock_key") DO UPDATE
+        SET
+          "owner_id" = EXCLUDED."owner_id",
+          "acquired_at" = EXCLUDED."acquired_at",
+          "expires_at" = EXCLUDED."expires_at"
+        WHERE
+          "distributed_locks"."expires_at" <= ${now}
+          OR "distributed_locks"."owner_id" = EXCLUDED."owner_id"
+        RETURNING "id", "owner_id" AS "ownerId"
+      `)
+
+      if (result.length > 0) {
+        return {
+          success: true,
+          lockId: String(result[0].id),
+          ownerId: result[0].ownerId
+        }
+      }
+    } catch (error) {
+      // 语句级竞争通常表现为短暂失败，等待后重试
+      if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2034') {
+        await delay(opts.retryIntervalMs)
+        continue
+      }
+      throw error
+    }
+
+    await delay(opts.retryIntervalMs)
+  }
+
+  return { success: false, error: 'Lock acquisition timeout' }
+}
+
+/**
+ * 释放分布式锁
+ * 
+ * @param lockKey 锁的唯一标识
+ * @param ownerId 锁持有者 ID
+ * @returns 是否成功释放
+ */
+export async function releaseLock(
+  lockKey: string,
+  ownerId: string
+): Promise<boolean> {
+  try {
+    const result = await prisma.distributedLock.deleteMany({
+      where: {
+        lockKey,
+        ownerId
+      }
+    })
+    return result.count > 0
+  } catch (error) {
+    console.error(`[DistributedLock] Failed to release lock ${lockKey}:`, error)
+    return false
+  }
+}
+
+/**
+ * 延长锁的过期时间
+ * 
+ * @param lockKey 锁的唯一标识
+ * @param ownerId 锁持有者 ID
+ * @param extendMs 延长时间（毫秒）
+ * @returns 是否成功延长
+ */
+export async function extendLock(
+  lockKey: string,
+  ownerId: string,
+  extendMs: number = 30000
+): Promise<boolean> {
+  try {
+    const result = await prisma.distributedLock.updateMany({
+      where: {
+        lockKey,
+        ownerId,
+        expiresAt: { gt: new Date() }  // 只能延长未过期的锁
+      },
+      data: {
+        expiresAt: new Date(Date.now() + extendMs)
+      }
+    })
+    return result.count > 0
+  } catch (error) {
+    console.error(`[DistributedLock] Failed to extend lock ${lockKey}:`, error)
+    return false
+  }
+}
+
+/**
+ * 使用锁执行操作（自动获取和释放）
+ * 
+ * @param lockKey 锁的唯一标识
+ * @param fn 要执行的函数
+ * @param options 锁配置
+ * @returns 执行结果
+ * 
+ * @example
+ * ```typescript
+ * const result = await withLock('user:123:quota', async () => {
+ *   // 配额更新操作
+ *   await updateUserQuota(userId, delta)
+ *   return { success: true }
+ * }, { expireMs: 10000 })
+ * ```
+ */
+export async function withLock<T>(
+  lockKey: string,
+  fn: () => Promise<T>,
+  options: LockOptions = {}
+): Promise<{ success: boolean; result?: T; error?: string }> {
+  const lockResult = await acquireLock(lockKey, options)
+  
+  if (!lockResult.success || !lockResult.ownerId) {
+    return { success: false, error: lockResult.error || 'Failed to acquire lock' }
+  }
+
+  try {
+    const result = await fn()
+    return { success: true, result }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    }
+  } finally {
+    await releaseLock(lockKey, lockResult.ownerId)
+  }
+}
+
+/**
+ * 清理过期的锁（定期调用）
+ * 
+ * @returns 清理的锁数量
+ */
+export async function cleanupExpiredLocks(): Promise<number> {
+  const result = await prisma.distributedLock.deleteMany({
+    where: {
+      expiresAt: { lt: new Date() }
+    }
+  })
+  
+  if (result.count > 0) {
+    console.log(`[DistributedLock] Cleaned up ${result.count} expired locks`)
+  }
+  
+  return result.count
+}
+
+/**
+ * 获取锁状态
+ * 
+ * @param lockKey 锁的唯一标识
+ * @returns 锁状态信息
+ */
+export async function getLockStatus(lockKey: string): Promise<{
+  exists: boolean
+  isExpired: boolean
+  ownerId?: string
+  expiresAt?: Date
+  acquiredAt?: Date
+} | null> {
+  const lock = await prisma.distributedLock.findUnique({
+    where: { lockKey }
+  })
+
+  if (!lock) {
+    return { exists: false, isExpired: false }
+  }
+
+  return {
+    exists: true,
+    isExpired: lock.expiresAt < new Date(),
+    ownerId: lock.ownerId,
+    expiresAt: lock.expiresAt,
+    acquiredAt: lock.acquiredAt
+  }
+}
diff --git a/server/src/lib/download-token.ts b/server/src/lib/download-token.ts
new file mode 100644
index 0000000..ec0b498
--- /dev/null
+++ b/server/src/lib/download-token.ts
@@ -0,0 +1,167 @@
+/**
+ * 一次性下载 Token 管理
+ * 用于备份导出等文件下载场景，避免 JWT 通过 URL 参数传递
+ * 
+ * 安全特性：
+ * 1. 短期有效（默认5分钟）
+ * 2. 使用次数限制（默认1次）
+ * 3. 绑定特定资源
+ * 4. 绑定特定用户
+ */
+
+import { nanoid } from 'nanoid'
+
+export interface DownloadToken {
+    userId: number
+    resourceId: string
+    resourceType: 'backup-export' | 'backup-download'
+    expiresAt: number
+    usageCount: number
+    maxUsage: number
+    createdAt: number
+}
+
+// 内存存储（生产环境可改用 Redis）
+const downloadTokens = new Map<string, DownloadToken>()
+
+// 定期清理过期 token（每5分钟）
+setInterval(() => {
+    const now = Date.now()
+    for (const [token, data] of downloadTokens.entries()) {
+        if (now > data.expiresAt) {
+            downloadTokens.delete(token)
+        }
+    }
+}, 5 * 60 * 1000)
+
+/**
+ * 生成一次性下载 Token
+ * @param userId 用户 ID
+ * @param resourceId 资源标识（如 taskId）
+ * @param resourceType 资源类型
+ * @param expiresInSeconds 有效期（秒），默认5分钟
+ * @param maxUsage 最大使用次数，默认1次
+ * @returns 生成的 token
+ */
+export function generateDownloadToken(
+    userId: number,
+    resourceId: string,
+    resourceType: 'backup-export' | 'backup-download',
+    expiresInSeconds: number = 300,
+    maxUsage: number = 1
+): string {
+    // 使用 nanoid 生成安全随机 token
+    const token = nanoid(32)
+    
+    downloadTokens.set(token, {
+        userId,
+        resourceId,
+        resourceType,
+        expiresAt: Date.now() + expiresInSeconds * 1000,
+        usageCount: 0,
+        maxUsage,
+        createdAt: Date.now()
+    })
+    
+    return token
+}
+
+export interface ConsumeResult {
+    valid: boolean
+    userId?: number
+    resourceId?: string
+    error?: string
+}
+
+/**
+ * 消费（验证并使用）下载 Token
+ * @param token 下载 token
+ * @param expectedResourceId 期望的资源 ID（可选，用于额外验证）
+ * @param expectedResourceType 期望的资源类型（可选）
+ * @returns 验证结果
+ */
+export function consumeDownloadToken(
+    token: string,
+    expectedResourceId?: string,
+    expectedResourceType?: 'backup-export' | 'backup-download'
+): ConsumeResult {
+    const data = downloadTokens.get(token)
+    
+    // Token 不存在
+    if (!data) {
+        return { valid: false, error: 'Token not found or already used' }
+    }
+    
+    // Token 已过期
+    if (Date.now() > data.expiresAt) {
+        downloadTokens.delete(token)
+        return { valid: false, error: 'Token expired' }
+    }
+    
+    // 资源 ID 不匹配
+    if (expectedResourceId && data.resourceId !== expectedResourceId) {
+        return { valid: false, error: 'Resource mismatch' }
+    }
+    
+    // 资源类型不匹配
+    if (expectedResourceType && data.resourceType !== expectedResourceType) {
+        return { valid: false, error: 'Resource type mismatch' }
+    }
+    
+    // 增加使用计数
+    data.usageCount++
+    
+    // 达到最大使用次数，删除 token
+    if (data.usageCount >= data.maxUsage) {
+        downloadTokens.delete(token)
+    }
+    
+    return {
+        valid: true,
+        userId: data.userId,
+        resourceId: data.resourceId
+    }
+}
+
+/**
+ * 检查 Token 是否有效（不消费）
+ * @param token 下载 token
+ * @returns 是否有效
+ */
+export function isDownloadTokenValid(token: string): boolean {
+    const data = downloadTokens.get(token)
+    if (!data) return false
+    if (Date.now() > data.expiresAt) {
+        downloadTokens.delete(token)
+        return false
+    }
+    return data.usageCount < data.maxUsage
+}
+
+/**
+ * 撤销下载 Token
+ * @param token 下载 token
+ */
+export function revokeDownloadToken(token: string): void {
+    downloadTokens.delete(token)
+}
+
+/**
+ * 获取 Token 信息（用于调试）
+ * @param token 下载 token
+ * @returns Token 信息或 null
+ */
+export function getDownloadTokenInfo(token: string): Omit<DownloadToken, 'userId'> | null {
+    const data = downloadTokens.get(token)
+    if (!data) return null
+    
+    // 不返回 userId，避免信息泄露
+    return {
+        resourceId: data.resourceId,
+        resourceType: data.resourceType,
+        expiresAt: data.expiresAt,
+        usageCount: data.usageCount,
+        maxUsage: data.maxUsage,
+        createdAt: data.createdAt
+    }
+}
diff --git a/server/src/lib/email-domain.ts b/server/src/lib/email-domain.ts
new file mode 100644
index 0000000..f425aea
--- /dev/null
+++ b/server/src/lib/email-domain.ts
@@ -0,0 +1,111 @@
+/**
+ * 邮箱域名白名单验证模块
+ */
+
+import { getSystemConfig, getSystemConfigBoolean } from '../db/system-config.js'
+
+// 默认允许的邮箱域名列表
+export const DEFAULT_ALLOWED_DOMAINS = [
+    // Gmail
+    'gmail.com',
+    // Outlook/Microsoft
+    'outlook.com',
+    'hotmail.com',
+    'live.com',
+    'msn.com',
+    // iCloud/Apple
+    'icloud.com',
+    'me.com',
+    'mac.com',
+    // Yahoo
+    'yahoo.com',
+    // Zoho
+    'zoho.com',
+    // Proton
+    'proton.me',
+    'pm.me',
+    'protonmail.com',
+    'protonmail.ch',
+    // Fastmail
+    'fastmail.com',
+    // Tuta (Tutanota)
+    'tuta.com',
+    'tutanota.com',
+    'tuta.io',
+    'keemail.me',
+    // Posteo
+    'posteo.de',
+    'posteo.net',
+    // Disroot
+    'disroot.org',
+    // Riseup
+    'riseup.net'
+]
+
+/**
+ * 检查邮箱域名白名单是否启用
+ */
+export async function isEmailDomainWhitelistEnabled(): Promise<boolean> {
+    return getSystemConfigBoolean('email_domain_whitelist_enabled', false)
+}
+
+/**
+ * 获取允许的邮箱域名列表
+ */
+export async function getAllowedEmailDomains(): Promise<string[]> {
+    const domainsStr = await getSystemConfig('email_allowed_domains')
+    if (!domainsStr) {
+        return DEFAULT_ALLOWED_DOMAINS
+    }
+
+    // 解析逗号分隔的域名列表
+    return domainsStr
+        .split(',')
+        .map(d => d.trim().toLowerCase())
+        .filter(d => d.length > 0)
+}
+
+/**
+ * 从邮箱地址提取域名
+ */
+export function extractEmailDomain(email: string): string | null {
+    const atIndex = email.lastIndexOf('@')
+    if (atIndex === -1 || atIndex === email.length - 1) {
+        return null
+    }
+    return email.substring(atIndex + 1).toLowerCase()
+}
+
+/**
+ * 验证邮箱域名是否在白名单中
+ * @returns { valid: boolean, domain?: string, allowedDomains?: string[] }
+ */
+export async function validateEmailDomain(email: string): Promise<{
+    valid: boolean
+    domain?: string
+    allowedDomains?: string[]
+}> {
+    // 检查是否启用白名单
+    const whitelistEnabled = await isEmailDomainWhitelistEnabled()
+    if (!whitelistEnabled) {
+        return { valid: true }
+    }
+
+    // 提取域名
+    const domain = extractEmailDomain(email)
+    if (!domain) {
+        return { valid: false, domain: undefined }
+    }
+
+    // 获取允许的域名列表
+    const allowedDomains = await getAllowedEmailDomains()
+
+    // 检查域名是否在白名单中
+    const isAllowed = allowedDomains.includes(domain)
+
+    return {
+        valid: isAllowed,
+        domain,
+        allowedDomains: isAllowed ? undefined : allowedDomains
+    }
+}
diff --git a/server/src/lib/epay.ts b/server/src/lib/epay.ts
new file mode 100644
index 0000000..0819b6d
--- /dev/null
+++ b/server/src/lib/epay.ts
@@ -0,0 +1,441 @@
+/**
+ * 易支付 SDK - TypeScript 实现
+ * 支持 V1 (MD5签名) 和 V2 (RSA签名) 两个版本
+ */
+
+import crypto from 'crypto'
+
+// SDK 版本类型
+export type EpayVersion = 'v1' | 'v2'
+
+// V1 版本配置 (MD5签名)
+export interface EpayConfigV1 {
+  version: 'v1'
+  apiurl: string        // 支付接口地址
+  pid: string           // 商户ID
+  key: string           // 商户密钥 (MD5)
+}
+
+// V2 版本配置 (RSA签名)
+export interface EpayConfigV2 {
+  version: 'v2'
+  apiurl: string        // 支付接口地址
+  pid: string           // 商户ID
+  platform_public_key: string  // 平台公钥
+  merchant_private_key: string // 商户私钥
+}
+
+// 兼容旧配置（默认V2）
+export interface EpayConfigLegacy {
+  apiurl: string
+  pid: string
+  platform_public_key: string
+  merchant_private_key: string
+}
+
+export type EpayConfig = EpayConfigV1 | EpayConfigV2 | EpayConfigLegacy
+
+export interface PayParams {
+  type: string          // 支付方式：alipay, wxpay, qqpay, bank, jdpay
+  out_trade_no: string  // 商户订单号
+  name: string          // 商品名称
+  money: string         // 付款金额
+  notify_url: string    // 异步通知地址
+  return_url: string    // 同步跳转地址
+}
+
+export interface CallbackData {
+  pid?: string
+  trade_no?: string
+  out_trade_no?: string
+  type?: string
+  name?: string
+  money?: string
+  trade_status?: string
+  sign?: string
+  sign_type?: string
+  timestamp?: string
+  [key: string]: unknown
+}
+
+// 回调验证结果
+export interface VerifyResult {
+  valid: boolean           // 签名是否有效
+  tradeSuccess: boolean    // 交易是否成功
+  error?: string           // 错误信息
+}
+
+// 订单查询结果
+export interface OrderQueryResult {
+  success: boolean         // 查询是否成功
+  paid: boolean            // 是否已支付
+  trade_no?: string        // 易支付订单号
+  out_trade_no?: string    // 商户订单号
+  money?: string           // 支付金额
+  type?: string            // 支付方式
+  error?: string           // 错误信息
+  rawData?: Record<string, unknown>  // 原始返回数据
+}
+
+// 易支付客户端接口
+export interface IEpayClient {
+  getPayLink(params: PayParams): string
+  verify(data: CallbackData): boolean
+  verifyWithStatus(data: CallbackData): VerifyResult  // 带交易状态验证
+  queryOrder(outTradeNo: string): Promise<OrderQueryResult>  // 查询订单状态
+}
+
+/**
+ * V1 版本易支付客户端 (MD5签名)
+ * 适用于传统易支付平台
+ */
+export class EpayCoreV1 implements IEpayClient {
+  private apiurl: string
+  private pid: string
+  private key: string
+  private signType = 'MD5'
+
+  constructor(config: EpayConfigV1) {
+    this.apiurl = config.apiurl.endsWith('/') ? config.apiurl : config.apiurl + '/'
+    this.pid = config.pid
+    this.key = config.key
+  }
+
+  /**
+   * 获取支付链接
+   */
+  getPayLink(params: PayParams): string {
+    const requrl = this.apiurl + 'submit.php'
+    const signedParams = this.buildRequestParam(params as unknown as Record<string, unknown>)
+    const queryString = Object.entries(signedParams)
+      .map(([k, v]) => `${k}=${encodeURIComponent(v as string)}`)
+      .join('&')
+    return `${requrl}?${queryString}`
+  }
+
+  /**
+   * 验证回调签名 (MD5)
+   */
+  verify(data: CallbackData): boolean {
+    if (!data || !data.sign) return false
+    const sign = this.getSign(data as unknown as Record<string, string>)
+    return sign === data.sign
+  }
+
+  /**
+   * 验证回调签名并检查交易状态 (V1版本)
+   * V1版本需要检查 trade_status === 'TRADE_SUCCESS'
+   */
+  verifyWithStatus(data: CallbackData): VerifyResult {
+    if (!data || !data.sign) {
+      return { valid: false, tradeSuccess: false, error: '缺少签名参数' }
+    }
+
+    // 验证签名
+    const sign = this.getSign(data as unknown as Record<string, string>)
+    if (sign !== data.sign) {
+      return { valid: false, tradeSuccess: false, error: '签名验证失败' }
+    }
+
+    // V1版本必须检查 trade_status
+    const tradeSuccess = data.trade_status === 'TRADE_SUCCESS'
+    if (!tradeSuccess) {
+      return { valid: true, tradeSuccess: false, error: `交易未成功: ${data.trade_status || '未知状态'}` }
+    }
+
+    return { valid: true, tradeSuccess: true }
+  }
+
+  /**
+   * 构建请求参数
+   */
+  private buildRequestParam(params: Record<string, unknown>): Record<string, string> {
+    const result: Record<string, string> = {}
+    
+    for (const [k, v] of Object.entries(params)) {
+      if (v !== null && v !== undefined && v !== '') {
+        result[k] = String(v)
+      }
+    }
+    
+    result.pid = this.pid
+    result.sign = this.getSign(result)
+    result.sign_type = this.signType
+    
+    return result
+  }
+
+  /**
+   * 生成 MD5 签名
+   */
+  private getSign(params: Record<string, string>): string {
+    const signStr = this.getSignContent(params) + this.key
+    return crypto.createHash('md5').update(signStr).digest('hex')
+  }
+
+  /**
+   * 获取待签名字符串
+   */
+  private getSignContent(params: Record<string, unknown>): string {
+    const keys = Object.keys(params).sort()
+    const parts: string[] = []
+    
+    for (const k of keys) {
+      const v = params[k]
+      if (v === null || v === undefined || v === '' || k === 'sign' || k === 'sign_type') {
+        continue
+      }
+      parts.push(`${k}=${v}`)
+    }
+    
+    return parts.join('&')
+  }
+
+  /**
+   * 查询订单状态 (V1版本)
+   * 调用易支付 API 查询订单支付状态
+   */
+  async queryOrder(outTradeNo: string): Promise<OrderQueryResult> {
+    try {
+      const url = `${this.apiurl}api.php?act=order&pid=${encodeURIComponent(this.pid)}&key=${encodeURIComponent(this.key)}&out_trade_no=${encodeURIComponent(outTradeNo)}`
+      
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: { 'Accept': 'application/json' }
+      })
+      
+      if (!response.ok) {
+        return { success: false, paid: false, error: `HTTP错误: ${response.status}` }
+      }
+      
+      const data = await response.json() as Record<string, unknown>
+      
+      // 检查返回状态码
+      if (data.code !== 1) {
+        return { 
+          success: false, 
+          paid: false, 
+          error: (data.msg as string) || '查询失败',
+          rawData: data
+        }
+      }
+      
+      // status: 1 为支付成功，0 为未支付
+      const paid = data.status === 1
+      
+      return {
+        success: true,
+        paid,
+        trade_no: data.trade_no as string,
+        out_trade_no: data.out_trade_no as string,
+        money: data.money as string,
+        type: data.type as string,
+        rawData: data
+      }
+    } catch (error) {
+      return { 
+        success: false, 
+        paid: false, 
+        error: error instanceof Error ? error.message : '查询异常' 
+      }
+    }
+  }
+}
+
+/**
+ * V2 版本易支付客户端 (RSA签名)
+ * 适用于新版彩虹易支付
+ */
+export class EpayCoreV2 implements IEpayClient {
+  private apiurl: string
+  private pid: string
+  private platformPublicKey: string
+  private merchantPrivateKey: string
+  private signType = 'RSA'
+
+  constructor(config: EpayConfigV2 | EpayConfigLegacy) {
+    this.apiurl = config.apiurl.endsWith('/') ? config.apiurl : config.apiurl + '/'
+    this.pid = config.pid
+    this.platformPublicKey = config.platform_public_key
+    this.merchantPrivateKey = config.merchant_private_key
+  }
+
+  /**
+   * 获取支付链接
+   */
+  getPayLink(params: PayParams): string {
+    const requrl = this.apiurl + 'api/pay/submit'
+    const signedParams = this.buildRequestParam(params as unknown as Record<string, unknown>)
+    const queryString = Object.entries(signedParams)
+      .map(([k, v]) => `${k}=${encodeURIComponent(v as string)}`)
+      .join('&')
+    return `${requrl}?${queryString}`
+  }
+
+  /**
+   * 验证回调签名 (RSA)
+   */
+  verify(data: CallbackData): boolean {
+    if (!data || !data.sign) return false
+    
+    // 检查时间戳（允许 5 分钟误差）
+    if (data.timestamp) {
+      const timestamp = parseInt(data.timestamp, 10)
+      if (Math.abs(Date.now() / 1000 - timestamp) > 300) {
+        return false
+      }
+    }
+
+    const sign = data.sign
+    return this.rsaPublicVerify(this.getSignContent(data), sign)
+  }
+
+  /**
+   * 验证回调签名并检查交易状态 (V2版本)
+   * V2版本也检查 trade_status，但主要依赖RSA签名和时间戳
+   */
+  verifyWithStatus(data: CallbackData): VerifyResult {
+    if (!data || !data.sign) {
+      return { valid: false, tradeSuccess: false, error: '缺少签名参数' }
+    }
+
+    // 检查时间戳（允许 5 分钟误差）
+    if (data.timestamp) {
+      const timestamp = parseInt(data.timestamp, 10)
+      if (Math.abs(Date.now() / 1000 - timestamp) > 300) {
+        return { valid: false, tradeSuccess: false, error: '时间戳已过期' }
+      }
+    }
+
+    // 验证RSA签名
+    const sign = data.sign
+    if (!this.rsaPublicVerify(this.getSignContent(data), sign)) {
+      return { valid: false, tradeSuccess: false, error: 'RSA签名验证失败' }
+    }
+
+    // 检查交易状态
+    const tradeSuccess = data.trade_status === 'TRADE_SUCCESS'
+    if (!tradeSuccess) {
+      return { valid: true, tradeSuccess: false, error: `交易未成功: ${data.trade_status || '未知状态'}` }
+    }
+
+    return { valid: true, tradeSuccess: true }
+  }
+
+  /**
+   * 构建请求参数
+   */
+  private buildRequestParam(params: Record<string, unknown>): Record<string, string> {
+    const result: Record<string, string> = {}
+    
+    for (const [k, v] of Object.entries(params)) {
+      if (v !== null && v !== undefined && v !== '') {
+        result[k] = String(v)
+      }
+    }
+    
+    result.pid = this.pid
+    result.timestamp = Math.floor(Date.now() / 1000).toString()
+    result.sign = this.getSign(result)
+    result.sign_type = this.signType
+    
+    return result
+  }
+
+  /**
+   * 生成 RSA 签名
+   */
+  private getSign(params: Record<string, string>): string {
+    return this.rsaPrivateSign(this.getSignContent(params))
+  }
+
+  /**
+   * 获取待签名字符串
+   */
+  private getSignContent(params: Record<string, unknown>): string {
+    const keys = Object.keys(params).sort()
+    const parts: string[] = []
+    
+    for (const k of keys) {
+      const v = params[k]
+      if (Array.isArray(v) || v === null || v === undefined || v === '' || k === 'sign' || k === 'sign_type') {
+        continue
+      }
+      parts.push(`${k}=${v}`)
+    }
+    
+    return parts.join('&')
+  }
+
+  /**
+   * 商户私钥签名
+   */
+  private rsaPrivateSign(data: string): string {
+    const key = `-----BEGIN PRIVATE KEY-----\n${this.merchantPrivateKey.match(/.{1,64}/g)?.join('\n')}\n-----END PRIVATE KEY-----`
+    const sign = crypto.sign('sha256', Buffer.from(data), {
+      key,
+      padding: crypto.constants.RSA_PKCS1_PADDING
+    })
+    return sign.toString('base64')
+  }
+
+  /**
+   * 平台公钥验签
+   */
+  private rsaPublicVerify(data: string, signature: string): boolean {
+    try {
+      const key = `-----BEGIN PUBLIC KEY-----\n${this.platformPublicKey.match(/.{1,64}/g)?.join('\n')}\n-----END PUBLIC KEY-----`
+      return crypto.verify('sha256', Buffer.from(data), {
+        key,
+        padding: crypto.constants.RSA_PKCS1_PADDING
+      }, Buffer.from(signature, 'base64'))
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * 查询订单状态 (V2版本)
+   * V2版本的标准查询接口可能需要 RSA 签名
+   * 备注：大多数易支付都支持 api.php?act=order 查询接口
+   * 但 V2 版本没有 MD5 密钥，可能不支持标准查询接口
+   * 返回失败，让业务层等待 notify_url 异步回调
+   */
+  async queryOrder(_outTradeNo: string): Promise<OrderQueryResult> {
+    // V2 版本使用 RSA 签名，标准易支付查询接口可能不支持
+    // 返回不支持的状态，让前端显示“等待到账”
+    return {
+      success: false,
+      paid: false,
+      error: 'V2版本暂不支持主动查询，请等待异步回调'
+    }
+  }
+}
+
+// 为了向后兼容，保留 EpayCore 别名
+export const EpayCore = EpayCoreV2
+
+/**
+ * 创建易支付客户端
+ * 根据配置自动选择 V1 或 V2 版本
+ */
+export function createEpayClient(config: EpayConfig): IEpayClient {
+  // 检查是否为 V1 配置
+  if ('version' in config && config.version === 'v1') {
+    return new EpayCoreV1(config as EpayConfigV1)
+  }
+  
+  // 检查是否为 V1 配置（通过 key 字段判断）
+  if ('key' in config && !('platform_public_key' in config)) {
+    const v1Config = config as { apiurl: string; pid: string; key: string }
+    return new EpayCoreV1({ version: 'v1', apiurl: v1Config.apiurl, pid: v1Config.pid, key: v1Config.key })
+  }
+  
+  // 默认使用 V2
+  if ('version' in config && config.version === 'v2') {
+    return new EpayCoreV2(config as EpayConfigV2)
+  }
+  
+  // 兼容旧配置
+  return new EpayCoreV2(config as EpayConfigLegacy)
+}
diff --git a/server/src/lib/errors.ts b/server/src/lib/errors.ts
new file mode 100644
index 0000000..290b170
--- /dev/null
+++ b/server/src/lib/errors.ts
@@ -0,0 +1,674 @@
+/**
+ * Standardized API error codes and messages
+ * Frontend will translate these based on error codes
+ */
+
+export const ErrorCode = {
+    // Common errors
+    INVALID_ID: 'INVALID_ID',
+    NOT_FOUND: 'NOT_FOUND',
+    UNAUTHORIZED: 'UNAUTHORIZED',
+    FORBIDDEN: 'FORBIDDEN',
+    ADMIN_REQUIRED: 'ADMIN_REQUIRED',
+    FEATURE_DISABLED: 'FEATURE_DISABLED',
+
+    // User errors
+    USER_NOT_FOUND: 'USER_NOT_FOUND',
+    USER_EXISTS: 'USER_EXISTS',
+    CANNOT_MODIFY_SELF: 'CANNOT_MODIFY_SELF',
+    CANNOT_DELETE_SELF: 'CANNOT_DELETE_SELF',
+    CANNOT_BAN_ADMIN: 'CANNOT_BAN_ADMIN',
+    CANNOT_DELETE_ADMIN: 'CANNOT_DELETE_ADMIN',
+    USER_HAS_INSTANCES: 'USER_HAS_INSTANCES',
+
+    // Auth errors
+    INVALID_CREDENTIALS: 'INVALID_CREDENTIALS',
+    ACCOUNT_BANNED: 'ACCOUNT_BANNED',
+    TOO_MANY_ATTEMPTS: 'TOO_MANY_ATTEMPTS',
+    REGISTRATION_DISABLED: 'REGISTRATION_DISABLED',
+    INVALID_INVITE_CODE: 'INVALID_INVITE_CODE',
+    INVITE_CODE_EXPIRED: 'INVITE_CODE_EXPIRED',
+    INVALID_2FA_CODE: 'INVALID_2FA_CODE',
+    TWO_FA_REQUIRED: 'TWO_FA_REQUIRED',
+    TWO_FA_ALREADY_ENABLED: 'TWO_FA_ALREADY_ENABLED',
+    TWO_FA_NOT_ENABLED: 'TWO_FA_NOT_ENABLED',
+    REFRESH_TOKEN_MISSING: 'REFRESH_TOKEN_MISSING',
+    REFRESH_TOKEN_INVALID: 'REFRESH_TOKEN_INVALID',
+    SESSION_NOT_FOUND: 'SESSION_NOT_FOUND',
+
+    // Validation errors
+    INVALID_EMAIL: 'INVALID_EMAIL',
+    EMAIL_CONTAINS_ILLEGAL: 'EMAIL_CONTAINS_ILLEGAL',
+    USERNAME_CONTAINS_ILLEGAL: 'USERNAME_CONTAINS_ILLEGAL',
+    PASSWORD_TOO_WEAK: 'PASSWORD_TOO_WEAK',
+    INVALID_SSH_KEY: 'INVALID_SSH_KEY',
+    SSH_KEY_EXISTS: 'SSH_KEY_EXISTS',
+    INVALID_NAME: 'INVALID_NAME',
+
+    // Instance errors
+    INSTANCE_NOT_FOUND: 'INSTANCE_NOT_FOUND',
+    INSTANCE_ALREADY_RUNNING: 'INSTANCE_ALREADY_RUNNING',
+    INSTANCE_ALREADY_STOPPED: 'INSTANCE_ALREADY_STOPPED',
+    INSTANCE_STATUS_INVALID: 'INSTANCE_STATUS_INVALID',
+    INSTANCE_SUSPENDED: 'INSTANCE_SUSPENDED',
+    INSTANCE_NOT_SUSPENDED: 'INSTANCE_NOT_SUSPENDED',
+    INSTANCE_SUSPENDED_EXPIRED: 'INSTANCE_SUSPENDED_EXPIRED',
+    INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED: 'INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED',
+
+    // Host errors
+    HOST_NOT_FOUND: 'HOST_NOT_FOUND',
+    HOST_OFFLINE: 'HOST_OFFLINE',
+    HOST_ONLINE: 'HOST_ONLINE',
+    HOST_HAS_INSTANCES: 'HOST_HAS_INSTANCES',
+    HOST_ALREADY_OFFICIAL: 'HOST_ALREADY_OFFICIAL',
+    HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT: 'HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT',
+    NO_AVAILABLE_HOSTS: 'NO_AVAILABLE_HOSTS',
+
+    // Image errors
+    IMAGE_NOT_FOUND: 'IMAGE_NOT_FOUND',
+    IMAGE_SYNCED_ON_HOSTS: 'IMAGE_SYNCED_ON_HOSTS',
+    IMAGE_TYPE_MISMATCH: 'IMAGE_TYPE_MISMATCH',
+    IMAGE_MEMORY_INCOMPATIBLE: 'IMAGE_MEMORY_INCOMPATIBLE',
+
+    // Package errors
+    PACKAGE_NOT_FOUND: 'PACKAGE_NOT_FOUND',
+    PACKAGE_IN_USE: 'PACKAGE_IN_USE',
+    PACKAGE_PREREQUISITE_MISSING: 'PACKAGE_PREREQUISITE_MISSING',
+
+    // Quota errors
+    QUOTA_EXCEEDED: 'QUOTA_EXCEEDED',
+    QUOTA_CPU_EXCEEDED: 'QUOTA_CPU_EXCEEDED',
+    QUOTA_MEMORY_EXCEEDED: 'QUOTA_MEMORY_EXCEEDED',
+    QUOTA_DISK_EXCEEDED: 'QUOTA_DISK_EXCEEDED',
+    QUOTA_INSTANCE_EXCEEDED: 'QUOTA_INSTANCE_EXCEEDED',
+    QUOTA_PORT_EXCEEDED: 'QUOTA_PORT_EXCEEDED',
+    QUOTA_SNAPSHOT_EXCEEDED: 'QUOTA_SNAPSHOT_EXCEEDED',
+    QUOTA_BACKUP_EXCEEDED: 'QUOTA_BACKUP_EXCEEDED',
+    QUOTA_NOT_ALLOCATED: 'QUOTA_NOT_ALLOCATED',
+
+    // Snapshot errors
+    SNAPSHOT_NOT_FOUND: 'SNAPSHOT_NOT_FOUND',
+    SNAPSHOT_RESTORE_REQUIRES_STOP: 'SNAPSHOT_RESTORE_REQUIRES_STOP',
+
+    // Backup errors
+    BACKUP_NOT_FOUND: 'BACKUP_NOT_FOUND',
+    BACKUP_NOT_READY: 'BACKUP_NOT_READY',
+    EXPORT_TASK_NOT_FOUND: 'EXPORT_TASK_NOT_FOUND',
+    EXPORT_TASK_EXPIRED: 'EXPORT_TASK_EXPIRED',
+
+    // Port mapping errors
+    PORT_IN_USE: 'PORT_IN_USE',
+    PORT_OUT_OF_RANGE: 'PORT_OUT_OF_RANGE',
+    PORT_MAPPING_NOT_FOUND: 'PORT_MAPPING_NOT_FOUND',
+    PORT_CONFLICT: 'PORT_CONFLICT',
+    PORT_RANGE_MISMATCH: 'PORT_RANGE_MISMATCH',
+    QUOTA_PORT_BATCH_EXCEEDED: 'QUOTA_PORT_BATCH_EXCEEDED',
+
+    // Notification errors
+    NOTIFICATION_CHANNEL_NOT_FOUND: 'NOTIFICATION_CHANNEL_NOT_FOUND',
+
+    // Help errors
+    ARTICLE_NOT_FOUND: 'ARTICLE_NOT_FOUND',
+    SLUG_EXISTS: 'SLUG_EXISTS',
+
+    // Invite code errors
+    INVITE_CODE_USED: 'INVITE_CODE_USED',
+    INVITE_CODE_NOT_FOUND: 'INVITE_CODE_NOT_FOUND',
+
+    // OAuth errors
+    OAUTH_PROVIDER_DISABLED: 'OAUTH_PROVIDER_DISABLED',
+    OAUTH_ALREADY_BOUND: 'OAUTH_ALREADY_BOUND',
+    OAUTH_NOT_BOUND: 'OAUTH_NOT_BOUND',
+    OAUTH_TOKEN_ERROR: 'OAUTH_TOKEN_ERROR',
+
+    // SSH Key errors
+    SSH_KEY_NOT_FOUND: 'SSH_KEY_NOT_FOUND',
+    SSH_KEY_REQUIRED: 'SSH_KEY_REQUIRED',
+    SSH_KEY_NOT_OWNED: 'SSH_KEY_NOT_OWNED',
+
+    // Package/Plan errors
+    PACKAGE_UNAVAILABLE: 'PACKAGE_UNAVAILABLE',
+    PLAN_REQUIRED: 'PLAN_REQUIRED',
+    PLAN_NOT_FOUND: 'PLAN_NOT_FOUND',
+    PLAN_INACTIVE: 'PLAN_INACTIVE',
+    PLAN_SOLD_OUT: 'PLAN_SOLD_OUT',
+    CANNOT_CREATE_OWN_PAID_PACKAGE: 'CANNOT_CREATE_OWN_PAID_PACKAGE',
+    BALANCE_INSUFFICIENT: 'BALANCE_INSUFFICIENT',
+
+    // Host resource errors
+    HOST_UNAVAILABLE: 'HOST_UNAVAILABLE',
+    HOST_NO_ONLINE: 'HOST_NO_ONLINE',
+    HOST_RESOURCES_NOT_SYNCED: 'HOST_RESOURCES_NOT_SYNCED',
+    HOST_NODE_GROUP_NO_HOSTS: 'HOST_NODE_GROUP_NO_HOSTS',
+    HOST_RESOURCES_INSUFFICIENT: 'HOST_RESOURCES_INSUFFICIENT',
+    HOST_NAME_EXISTS: 'HOST_NAME_EXISTS',
+    HOST_ADDRESS_EXISTS: 'HOST_ADDRESS_EXISTS',
+    HOST_ADDRESS_UNRESOLVABLE: 'HOST_ADDRESS_UNRESOLVABLE',
+    HOST_CERT_NOT_CONFIGURED: 'HOST_CERT_NOT_CONFIGURED',
+    HOST_INVALID_CPU_MAX: 'HOST_INVALID_CPU_MAX',
+    HOST_INVALID_MEMORY_MAX: 'HOST_INVALID_MEMORY_MAX',
+    HOST_INVALID_IPV6_MODE: 'HOST_INVALID_IPV6_MODE',
+    HOST_IPV6_ROUTE_REQUIRES_CONFIG: 'HOST_IPV6_ROUTE_REQUIRES_CONFIG',
+    HOST_CPU_BELOW_USED: 'HOST_CPU_BELOW_USED',
+    HOST_MEMORY_BELOW_USED: 'HOST_MEMORY_BELOW_USED',
+    HOST_INSTANCE_TYPE_MISMATCH: 'HOST_INSTANCE_TYPE_MISMATCH',
+
+    // Instance operation errors
+    INSTANCE_STOP_REQUIRED: 'INSTANCE_STOP_REQUIRED',
+    INSTANCE_IMAGE_REQUIRED: 'INSTANCE_IMAGE_REQUIRED',
+    INSTANCE_IMAGE_UNAVAILABLE: 'INSTANCE_IMAGE_UNAVAILABLE',
+    INSTANCE_REBUILD_FAILED: 'INSTANCE_REBUILD_FAILED',
+    INSTANCE_CLONE_FAILED: 'INSTANCE_CLONE_FAILED',
+    INSTANCE_IPV6_NOT_SUPPORTED: 'INSTANCE_IPV6_NOT_SUPPORTED',
+    INSTANCE_IPV6_REASSIGN_FAILED: 'INSTANCE_IPV6_REASSIGN_FAILED',
+    INSTANCE_NO_IPV4: 'INSTANCE_NO_IPV4',
+    HOST_NO_IPV6_SUBNET: 'HOST_NO_IPV6_SUBNET',
+    IPV6_POOL_EXHAUSTED: 'IPV6_POOL_EXHAUSTED',
+    IPV6_REASSIGN_COOLDOWN: 'IPV6_REASSIGN_COOLDOWN',
+
+    // Port mapping errors (additional)
+    PORT_MAPPING_NAT_ONLY: 'PORT_MAPPING_NAT_ONLY',
+    PORT_NO_AVAILABLE: 'PORT_NO_AVAILABLE',
+    PORT_MAPPING_INVALID_ID: 'PORT_MAPPING_INVALID_ID',
+
+    // Image errors (additional)
+    IMAGE_CREATE_FAILED: 'IMAGE_CREATE_FAILED',
+    IMAGE_UPDATE_FAILED: 'IMAGE_UPDATE_FAILED',
+    IMAGE_INVALID_HOST_ID: 'IMAGE_INVALID_HOST_ID',
+
+    // Backup errors (additional)
+    BACKUP_CREATE_FAILED: 'BACKUP_CREATE_FAILED',
+    BACKUP_DELETE_FAILED: 'BACKUP_DELETE_FAILED',
+    BACKUP_EXPORT_FAILED: 'BACKUP_EXPORT_FAILED',
+    BACKUP_QUOTA_NOT_SET: 'BACKUP_QUOTA_NOT_SET',
+    BACKUP_EXPORT_STATUS_INVALID: 'BACKUP_EXPORT_STATUS_INVALID',
+
+    // Config errors
+    CONFIG_INVALID_KEY: 'CONFIG_INVALID_KEY',
+    CONFIG_INVALID_VALUE: 'CONFIG_INVALID_VALUE',
+
+    // Snapshot errors (additional)
+    SNAPSHOT_QUOTA_NOT_SET: 'SNAPSHOT_QUOTA_NOT_SET',
+
+    // Package errors (additional)
+    PACKAGE_HAS_INSTANCES: 'PACKAGE_HAS_INSTANCES',
+
+    // Resource limit errors
+    RESOURCE_CPU_EXCEEDS_PACKAGE: 'RESOURCE_CPU_EXCEEDS_PACKAGE',
+    RESOURCE_MEMORY_EXCEEDS_PACKAGE: 'RESOURCE_MEMORY_EXCEEDS_PACKAGE',
+    RESOURCE_DISK_EXCEEDS_PACKAGE: 'RESOURCE_DISK_EXCEEDS_PACKAGE',
+
+    // User quota errors (detailed)
+    QUOTA_CPU_INSUFFICIENT: 'QUOTA_CPU_INSUFFICIENT',
+    QUOTA_MEMORY_INSUFFICIENT: 'QUOTA_MEMORY_INSUFFICIENT',
+    QUOTA_DISK_INSUFFICIENT: 'QUOTA_DISK_INSUFFICIENT',
+    QUOTA_INSTANCE_LIMIT_REACHED: 'QUOTA_INSTANCE_LIMIT_REACHED',
+    QUOTA_HOST_LIMIT_REACHED: 'QUOTA_HOST_LIMIT_REACHED',
+    QUOTA_PACKAGE_LIMIT_REACHED: 'QUOTA_PACKAGE_LIMIT_REACHED',
+    QUOTA_FRIEND_LIMIT_REACHED: 'QUOTA_FRIEND_LIMIT_REACHED',
+    QUOTA_PORT_BELOW_USED: 'QUOTA_PORT_BELOW_USED',
+    QUOTA_SNAPSHOT_BELOW_USED: 'QUOTA_SNAPSHOT_BELOW_USED',
+    QUOTA_BACKUP_BELOW_USED: 'QUOTA_BACKUP_BELOW_USED',
+    QUOTA_PORT_TOTAL_EXCEEDED: 'QUOTA_PORT_TOTAL_EXCEEDED',
+    QUOTA_SNAPSHOT_TOTAL_EXCEEDED: 'QUOTA_SNAPSHOT_TOTAL_EXCEEDED',
+    QUOTA_BACKUP_TOTAL_EXCEEDED: 'QUOTA_BACKUP_TOTAL_EXCEEDED',
+
+    // Image errors (additional)
+    IMAGE_NOT_SYNCED: 'IMAGE_NOT_SYNCED',
+    IMAGE_SYNCING_CANNOT_DELETE: 'IMAGE_SYNCING_CANNOT_DELETE',
+    IMAGE_NO_HOSTS: 'IMAGE_NO_HOSTS',
+
+    // Port errors (additional)
+    PORT_RANGE_INVALID: 'PORT_RANGE_INVALID',
+
+    // Snapshot policy errors
+    SNAPSHOT_MANUAL_FULL: 'SNAPSHOT_MANUAL_FULL',
+    SNAPSHOT_RETENTION_EXCEEDS: 'SNAPSHOT_RETENTION_EXCEEDS',
+
+    // Backup policy errors
+    BACKUP_MANUAL_FULL: 'BACKUP_MANUAL_FULL',
+    BACKUP_RETENTION_EXCEEDS: 'BACKUP_RETENTION_EXCEEDS',
+
+    // OAuth errors (additional)
+    OAUTH_NOT_ENABLED: 'OAUTH_NOT_ENABLED',
+
+    // Storage config errors
+    STORAGE_CONFIG_NOT_FOUND: 'STORAGE_CONFIG_NOT_FOUND',
+    STORAGE_CONFIG_CREATE_FAILED: 'STORAGE_CONFIG_CREATE_FAILED',
+    STORAGE_CONFIG_UPDATE_FAILED: 'STORAGE_CONFIG_UPDATE_FAILED',
+    STORAGE_CONFIG_DELETE_FAILED: 'STORAGE_CONFIG_DELETE_FAILED',
+    STORAGE_TYPE_NOT_SUPPORTED: 'STORAGE_TYPE_NOT_SUPPORTED',
+    STORAGE_POOL_NOT_CONFIGURED: 'STORAGE_POOL_NOT_CONFIGURED',
+
+    // Backup upload errors
+    BACKUP_UPLOAD_TASK_NOT_FOUND: 'BACKUP_UPLOAD_TASK_NOT_FOUND',
+    BACKUP_UPLOAD_IN_PROGRESS: 'BACKUP_UPLOAD_IN_PROGRESS',
+    BACKUP_UPLOAD_FAILED: 'BACKUP_UPLOAD_FAILED',
+
+    // Instance config errors
+    CONFIG_DISK_CANNOT_SHRINK: 'CONFIG_DISK_CANNOT_SHRINK',
+    CONFIG_NO_CHANGES: 'CONFIG_NO_CHANGES',
+    CONFIG_UPDATE_FAILED: 'CONFIG_UPDATE_FAILED',
+
+    // Transfer errors
+    TRANSFER_NOT_FOUND: 'TRANSFER_NOT_FOUND',
+    TRANSFER_TO_SELF: 'TRANSFER_TO_SELF',
+    TRANSFER_TO_BANNED: 'TRANSFER_TO_BANNED',
+    TRANSFER_ALREADY_PENDING: 'TRANSFER_ALREADY_PENDING',
+    TRANSFER_NOT_PENDING: 'TRANSFER_NOT_PENDING',
+    TRANSFER_INVALID_STATUS: 'TRANSFER_INVALID_STATUS',
+    TRANSFER_QUOTA_NOT_FOUND: 'TRANSFER_QUOTA_NOT_FOUND',
+    TRANSFER_QUOTA_INSUFFICIENT: 'TRANSFER_QUOTA_INSUFFICIENT',
+    TRANSFER_INSTANCE_LOCKED: 'TRANSFER_INSTANCE_LOCKED',
+    TRANSFER_INSUFFICIENT_BALANCE: 'TRANSFER_INSUFFICIENT_BALANCE',
+    TRANSFER_HOST_DISABLED: 'TRANSFER_HOST_DISABLED',
+    INVALID_PARAMS: 'INVALID_PARAMS',
+
+    // Friend system errors
+    CANNOT_ADD_SELF: 'CANNOT_ADD_SELF',
+    ALREADY_FRIENDS: 'ALREADY_FRIENDS',
+    FRIEND_REQUEST_PENDING: 'FRIEND_REQUEST_PENDING',
+    FRIEND_REQUEST_NOT_FOUND: 'FRIEND_REQUEST_NOT_FOUND',
+    FRIEND_REQUEST_NOT_PENDING: 'FRIEND_REQUEST_NOT_PENDING',
+    FRIENDSHIP_NOT_FOUND: 'FRIENDSHIP_NOT_FOUND',
+    NOT_FRIENDS: 'NOT_FRIENDS',
+    TARGET_FRIEND_QUOTA_FULL: 'TARGET_FRIEND_QUOTA_FULL',
+
+    // Package share errors
+    CANNOT_SHARE_TO_SELF: 'CANNOT_SHARE_TO_SELF',
+    PACKAGE_ALREADY_SHARED: 'PACKAGE_ALREADY_SHARED',
+    SHARE_NOT_FOUND: 'SHARE_NOT_FOUND',
+    SHARE_QUOTA_CPU_EXCEEDED: 'SHARE_QUOTA_CPU_EXCEEDED',
+    SHARE_QUOTA_MEMORY_EXCEEDED: 'SHARE_QUOTA_MEMORY_EXCEEDED',
+    SHARE_QUOTA_INSTANCES_EXCEEDED: 'SHARE_QUOTA_INSTANCES_EXCEEDED',
+
+    // Email verification errors
+    EMAIL_VERIFICATION_DISABLED: 'EMAIL_VERIFICATION_DISABLED',
+    EMAIL_CODE_REQUIRED: 'EMAIL_CODE_REQUIRED',
+    INVALID_EMAIL_CODE: 'INVALID_EMAIL_CODE',
+    TOO_MANY_VERIFICATION_REQUESTS: 'TOO_MANY_VERIFICATION_REQUESTS',
+    EMAIL_SEND_FAILED: 'EMAIL_SEND_FAILED',
+    EMAIL_ALREADY_REGISTERED: 'EMAIL_ALREADY_REGISTERED',
+    EMAIL_DOMAIN_NOT_ALLOWED: 'EMAIL_DOMAIN_NOT_ALLOWED',
+
+    // Inbox errors
+    MESSAGE_NOT_FOUND: 'MESSAGE_NOT_FOUND',
+
+    // Checkin errors
+    CHECKIN_NO_INSTANCE: 'CHECKIN_NO_INSTANCE',
+    CHECKIN_ALREADY_TODAY: 'CHECKIN_ALREADY_TODAY',
+    REDEEM_ALREADY_TODAY: 'REDEEM_ALREADY_TODAY',
+    REDEEM_CODE_NOT_FOUND: 'REDEEM_CODE_NOT_FOUND',
+    REDEEM_CODE_USED: 'REDEEM_CODE_USED',
+    REDEEM_CODE_EXPIRED: 'REDEEM_CODE_EXPIRED',
+    REDEEM_CODE_SELF_ONLY: 'REDEEM_CODE_SELF_ONLY',
+    REDEEM_CODE_DISABLED: 'REDEEM_CODE_DISABLED',
+    REDEEM_CODE_INVALID_FORMAT: 'REDEEM_CODE_INVALID_FORMAT',
+    REDEEM_CODE_EXHAUSTED: 'REDEEM_CODE_EXHAUSTED',
+    REDEEM_CODE_ALREADY_USED_BY_USER: 'REDEEM_CODE_ALREADY_USED_BY_USER',
+    REDEEM_CODE_HOST_MISMATCH: 'REDEEM_CODE_HOST_MISMATCH',
+    REDEEM_CODE_BATCH_LIMIT: 'REDEEM_CODE_BATCH_LIMIT',
+    REDEEM_EXCEEDS_PACKAGE_QUOTA: 'REDEEM_EXCEEDS_PACKAGE_QUOTA',
+    REDEEM_ALREADY_AT_LIMIT: 'REDEEM_ALREADY_AT_LIMIT',
+    CHECKIN_CODE_PAID_INSTANCE: 'CHECKIN_CODE_PAID_INSTANCE',
+
+    // Resource Pool errors
+    RESOURCE_POOL_INSUFFICIENT: 'RESOURCE_POOL_INSUFFICIENT',
+    RESOURCE_POOL_KVM_CPU_MULTIPLE: 'RESOURCE_POOL_KVM_CPU_MULTIPLE',
+    RESOURCE_POOL_KVM_MEMORY_MULTIPLE: 'RESOURCE_POOL_KVM_MEMORY_MULTIPLE',
+    RESOURCE_POOL_KVM_DISK_MULTIPLE: 'RESOURCE_POOL_KVM_DISK_MULTIPLE',
+    RESOURCE_POOL_VM_MUST_STOP: 'RESOURCE_POOL_VM_MUST_STOP',
+    RESOURCE_POOL_SYSTEM_CODE_REQUIRES_INSTANCE: 'RESOURCE_POOL_SYSTEM_CODE_REQUIRES_INSTANCE',
+
+    // Internal errors
+    INTERNAL_ERROR: 'INTERNAL_ERROR',
+
+    // Mail module errors
+    VALIDATION_ERROR: 'VALIDATION_ERROR',
+    OPERATION_NOT_ALLOWED: 'OPERATION_NOT_ALLOWED',
+    RESOURCE_EXISTS: 'RESOURCE_EXISTS',
+    UPSTREAM_ERROR: 'UPSTREAM_ERROR',
+    INSUFFICIENT_BALANCE: 'INSUFFICIENT_BALANCE',
+} as const
+
+export type ErrorCodeType = typeof ErrorCode[keyof typeof ErrorCode]
+
+// English error messages (default)
+export const ErrorMessages: Record<ErrorCodeType, string> = {
+    // Common errors
+    [ErrorCode.INVALID_ID]: 'Invalid ID',
+    [ErrorCode.NOT_FOUND]: 'Resource not found',
+    [ErrorCode.UNAUTHORIZED]: 'Unauthorized',
+    [ErrorCode.FORBIDDEN]: 'Access denied',
+    [ErrorCode.ADMIN_REQUIRED]: 'Admin privileges required',
+    [ErrorCode.FEATURE_DISABLED]: 'This feature has been disabled',
+
+    // User errors
+    [ErrorCode.USER_NOT_FOUND]: 'User not found',
+    [ErrorCode.USER_EXISTS]: 'Username already exists',
+    [ErrorCode.CANNOT_MODIFY_SELF]: 'Cannot modify your own status',
+    [ErrorCode.CANNOT_DELETE_SELF]: 'Cannot delete yourself',
+    [ErrorCode.CANNOT_BAN_ADMIN]: 'Cannot ban admin account',
+    [ErrorCode.CANNOT_DELETE_ADMIN]: 'Cannot delete admin account',
+    [ErrorCode.USER_HAS_INSTANCES]: 'User has instances, please delete them first',
+
+    // Auth errors
+    [ErrorCode.INVALID_CREDENTIALS]: 'Invalid username or password',
+    [ErrorCode.ACCOUNT_BANNED]: 'Account has been disabled',
+    [ErrorCode.TOO_MANY_ATTEMPTS]: 'Too many login attempts, please try again later',
+    [ErrorCode.REGISTRATION_DISABLED]: 'Registration is currently closed',
+    [ErrorCode.INVALID_INVITE_CODE]: 'Invalid or used invite code',
+    [ErrorCode.INVITE_CODE_EXPIRED]: 'Invite code has expired',
+    [ErrorCode.INVALID_2FA_CODE]: 'Invalid verification code or recovery code',
+    [ErrorCode.TWO_FA_REQUIRED]: 'Two-factor authentication required',
+    [ErrorCode.TWO_FA_ALREADY_ENABLED]: '2FA is already enabled, please disable it first',
+    [ErrorCode.TWO_FA_NOT_ENABLED]: '2FA is not enabled',
+    [ErrorCode.REFRESH_TOKEN_MISSING]: 'Refresh token missing',
+    [ErrorCode.REFRESH_TOKEN_INVALID]: 'Refresh token invalid or expired',
+    [ErrorCode.SESSION_NOT_FOUND]: 'Session not found',
+
+    // Validation errors
+    [ErrorCode.INVALID_EMAIL]: 'Please enter a valid email address',
+    [ErrorCode.EMAIL_CONTAINS_ILLEGAL]: 'Email contains illegal characters',
+    [ErrorCode.USERNAME_CONTAINS_ILLEGAL]: 'Username contains illegal characters',
+    [ErrorCode.PASSWORD_TOO_WEAK]: 'Password is too weak',
+    [ErrorCode.INVALID_SSH_KEY]: 'Invalid SSH public key format',
+    [ErrorCode.SSH_KEY_EXISTS]: 'This SSH key has already been added',
+    [ErrorCode.INVALID_NAME]: 'Invalid name format',
+
+    // Instance errors
+    [ErrorCode.INSTANCE_NOT_FOUND]: 'Instance not found',
+    [ErrorCode.INSTANCE_ALREADY_RUNNING]: 'Instance is already running',
+    [ErrorCode.INSTANCE_ALREADY_STOPPED]: 'Instance is already stopped',
+    [ErrorCode.INSTANCE_STATUS_INVALID]: 'Instance status does not allow this operation',
+    [ErrorCode.INSTANCE_SUSPENDED]: 'Instance is suspended and cannot be started',
+    [ErrorCode.INSTANCE_NOT_SUSPENDED]: 'Instance is not in suspended status',
+    [ErrorCode.INSTANCE_SUSPENDED_EXPIRED]: 'Instance is suspended due to expiration, please renew to unsuspend',
+    [ErrorCode.INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED]: 'Current monthly traffic cycle usage has reached the destroy limit',
+
+    // Host errors
+    [ErrorCode.HOST_NOT_FOUND]: 'Host not found',
+    [ErrorCode.HOST_OFFLINE]: 'Host is offline',
+    [ErrorCode.HOST_ONLINE]: 'Host is online, reinstall not needed',
+    [ErrorCode.HOST_HAS_INSTANCES]: 'Host has instances, please delete them first',
+    [ErrorCode.HOST_ALREADY_OFFICIAL]: 'Host is already official',
+    [ErrorCode.HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT]: 'Takeover blocked because some packages would lose all bound hosts',
+    [ErrorCode.NO_AVAILABLE_HOSTS]: 'No available hosts',
+
+    // Image errors
+    [ErrorCode.IMAGE_NOT_FOUND]: 'Image not found',
+    [ErrorCode.IMAGE_SYNCED_ON_HOSTS]: 'Image is synced on hosts, please delete from hosts first',
+    [ErrorCode.IMAGE_TYPE_MISMATCH]: 'Selected image is not compatible with the package instance type',
+    [ErrorCode.IMAGE_MEMORY_INCOMPATIBLE]: '128MB memory only supports Alpine/Debian images',
+
+    // Package errors
+    [ErrorCode.PACKAGE_NOT_FOUND]: 'Package not found',
+    [ErrorCode.PACKAGE_IN_USE]: 'Package is in use by instances',
+    [ErrorCode.PACKAGE_PREREQUISITE_MISSING]: 'Required package instance is missing',
+
+    // Quota errors
+    [ErrorCode.QUOTA_EXCEEDED]: 'Quota exceeded',
+    [ErrorCode.QUOTA_CPU_EXCEEDED]: 'CPU quota exceeded',
+    [ErrorCode.QUOTA_MEMORY_EXCEEDED]: 'Memory quota exceeded',
+    [ErrorCode.QUOTA_DISK_EXCEEDED]: 'Disk quota exceeded',
+    [ErrorCode.QUOTA_INSTANCE_EXCEEDED]: 'Instance quota exceeded',
+    [ErrorCode.QUOTA_PORT_EXCEEDED]: 'Port quota exceeded',
+    [ErrorCode.QUOTA_SNAPSHOT_EXCEEDED]: 'Snapshot quota exceeded',
+    [ErrorCode.QUOTA_BACKUP_EXCEEDED]: 'Backup quota exceeded',
+    [ErrorCode.QUOTA_NOT_ALLOCATED]: 'Quota not allocated',
+
+    // Snapshot errors
+    [ErrorCode.SNAPSHOT_NOT_FOUND]: 'Snapshot not found',
+    [ErrorCode.SNAPSHOT_RESTORE_REQUIRES_STOP]: 'Please stop the instance before restoring snapshot',
+
+    // Backup errors
+    [ErrorCode.BACKUP_NOT_FOUND]: 'Backup not found',
+    [ErrorCode.BACKUP_NOT_READY]: 'Backup is not ready for export',
+    [ErrorCode.EXPORT_TASK_NOT_FOUND]: 'Export task not found or expired',
+    [ErrorCode.EXPORT_TASK_EXPIRED]: 'Export task has expired',
+
+    // Port mapping errors
+    [ErrorCode.PORT_IN_USE]: 'Port is already in use',
+    [ErrorCode.PORT_OUT_OF_RANGE]: 'Port is out of allowed range',
+    [ErrorCode.PORT_MAPPING_NOT_FOUND]: 'Port mapping not found',
+    [ErrorCode.PORT_CONFLICT]: 'Some ports are already in use',
+    [ErrorCode.PORT_RANGE_MISMATCH]: 'Private and public port range count must match',
+    [ErrorCode.QUOTA_PORT_BATCH_EXCEEDED]: 'Port quota exceeded for batch mapping',
+
+    // Notification errors
+    [ErrorCode.NOTIFICATION_CHANNEL_NOT_FOUND]: 'Notification channel not found',
+
+    // Help errors
+    [ErrorCode.ARTICLE_NOT_FOUND]: 'Article not found',
+    [ErrorCode.SLUG_EXISTS]: 'Slug already exists',
+
+    // Invite code errors
+    [ErrorCode.INVITE_CODE_USED]: 'Invite code has been used',
+    [ErrorCode.INVITE_CODE_NOT_FOUND]: 'Invite code not found',
+
+    // OAuth errors
+    [ErrorCode.OAUTH_PROVIDER_DISABLED]: 'This login method has been disabled',
+    [ErrorCode.OAUTH_ALREADY_BOUND]: 'This account is already bound to another user',
+    [ErrorCode.OAUTH_NOT_BOUND]: 'Account not bound',
+    [ErrorCode.OAUTH_TOKEN_ERROR]: 'Failed to get authorization',
+
+    // SSH Key errors
+    [ErrorCode.SSH_KEY_NOT_FOUND]: 'SSH key not found',
+    [ErrorCode.SSH_KEY_REQUIRED]: 'SSH key is required, please add one in settings first',
+    [ErrorCode.SSH_KEY_NOT_OWNED]: 'SSH key not found or does not belong to this user',
+
+    // Package/Plan errors
+    [ErrorCode.PACKAGE_UNAVAILABLE]: 'Package is unavailable or discontinued',
+    [ErrorCode.PLAN_REQUIRED]: 'This is a paid package, a plan must be selected',
+    [ErrorCode.PLAN_NOT_FOUND]: 'Plan not found or does not belong to this package',
+    [ErrorCode.PLAN_INACTIVE]: 'Plan is inactive',
+    [ErrorCode.PLAN_SOLD_OUT]: 'Plan is sold out',
+    [ErrorCode.CANNOT_CREATE_OWN_PAID_PACKAGE]: 'Cannot create instance with your own paid package',
+    [ErrorCode.BALANCE_INSUFFICIENT]: 'Insufficient balance',
+
+    // Host resource errors
+    [ErrorCode.HOST_UNAVAILABLE]: 'Selected host is unavailable or has insufficient resources',
+    [ErrorCode.HOST_NO_ONLINE]: 'No online hosts available, please test connection in node management',
+    [ErrorCode.HOST_RESOURCES_NOT_SYNCED]: 'Host resources not synced, please click "Test Connection" in node management',
+    [ErrorCode.HOST_NODE_GROUP_NO_HOSTS]: 'No available hosts bound to this package',
+    [ErrorCode.HOST_RESOURCES_INSUFFICIENT]: 'All hosts have insufficient resources, please try later or choose another package',
+    [ErrorCode.HOST_NAME_EXISTS]: 'Host name already exists',
+    [ErrorCode.HOST_ADDRESS_EXISTS]: 'Host connection address already exists',
+    [ErrorCode.HOST_ADDRESS_UNRESOLVABLE]: 'Panel could not resolve the host connection address',
+    [ErrorCode.HOST_CERT_NOT_CONFIGURED]: 'Please configure certificate path first',
+    [ErrorCode.HOST_INVALID_CPU_MAX]: 'CPU max allowance cannot be negative',
+    [ErrorCode.HOST_INVALID_MEMORY_MAX]: 'Memory max cannot be negative or less than 256MB',
+    [ErrorCode.HOST_INVALID_IPV6_MODE]: 'IPv6 mode must be 1 (route), 2 (NAT), or 3 (disabled)',
+    [ErrorCode.HOST_IPV6_ROUTE_REQUIRES_CONFIG]: 'IPv6 route mode requires subnet and parent interface configuration',
+    [ErrorCode.HOST_CPU_BELOW_USED]: 'CPU max allowance cannot be less than current usage by instances',
+    [ErrorCode.HOST_MEMORY_BELOW_USED]: 'Memory max cannot be less than current usage by instances',
+    [ErrorCode.HOST_INSTANCE_TYPE_MISMATCH]: 'Package instance type is not supported by the selected host',
+
+    // Instance operation errors
+    [ErrorCode.INSTANCE_STOP_REQUIRED]: 'Please stop the instance first',
+    [ErrorCode.INSTANCE_IMAGE_REQUIRED]: 'Please specify an image',
+    [ErrorCode.INSTANCE_IMAGE_UNAVAILABLE]: 'Selected image is not available on this host',
+    [ErrorCode.INSTANCE_REBUILD_FAILED]: 'Instance rebuild failed',
+    [ErrorCode.INSTANCE_CLONE_FAILED]: 'Instance clone failed',
+    [ErrorCode.INSTANCE_IPV6_NOT_SUPPORTED]: 'Only NAT + IPv6 mode instances support IPv6 reassignment',
+    [ErrorCode.INSTANCE_IPV6_REASSIGN_FAILED]: 'Failed to reassign IPv6 address',
+    [ErrorCode.INSTANCE_NO_IPV4]: 'VM instance requires IPv4 address for port mapping',
+    [ErrorCode.HOST_NO_IPV6_SUBNET]: 'Host has no IPv6 subnet configured',
+    [ErrorCode.IPV6_POOL_EXHAUSTED]: 'IPv6 address pool exhausted, please try again later',
+    [ErrorCode.IPV6_REASSIGN_COOLDOWN]: 'IPv6 can only be reassigned once per day, please try again later',
+
+    // Port mapping errors (additional)
+    [ErrorCode.PORT_MAPPING_NAT_ONLY]: 'Port mapping is only supported in NAT or dual-stack mode',
+    [ErrorCode.PORT_NO_AVAILABLE]: 'No available ports, please contact administrator',
+    [ErrorCode.PORT_MAPPING_INVALID_ID]: 'Invalid instance or port mapping ID',
+
+    // Image errors (additional)
+    [ErrorCode.IMAGE_CREATE_FAILED]: 'Image creation failed',
+    [ErrorCode.IMAGE_UPDATE_FAILED]: 'Image update failed',
+    [ErrorCode.IMAGE_INVALID_HOST_ID]: 'Invalid image or host ID',
+
+    // Backup errors (additional)
+    [ErrorCode.BACKUP_CREATE_FAILED]: 'Backup creation failed',
+    [ErrorCode.BACKUP_DELETE_FAILED]: 'Backup deletion failed',
+    [ErrorCode.BACKUP_EXPORT_FAILED]: 'Backup export failed',
+    [ErrorCode.BACKUP_QUOTA_NOT_SET]: 'Please set backup quota for this instance first',
+    [ErrorCode.BACKUP_EXPORT_STATUS_INVALID]: 'Export task status is invalid',
+
+    // Config errors
+    [ErrorCode.CONFIG_INVALID_KEY]: 'Invalid configuration key',
+    [ErrorCode.CONFIG_INVALID_VALUE]: 'Configuration value must be a non-negative integer',
+
+    // Snapshot errors (additional)
+    [ErrorCode.SNAPSHOT_QUOTA_NOT_SET]: 'Please set snapshot quota for this instance first',
+
+    // Package errors (additional)
+    [ErrorCode.PACKAGE_HAS_INSTANCES]: 'Package is in use by instances and cannot be deleted',
+
+    // Resource limit errors
+    [ErrorCode.RESOURCE_CPU_EXCEEDS_PACKAGE]: 'CPU configuration exceeds package limit',
+    [ErrorCode.RESOURCE_MEMORY_EXCEEDS_PACKAGE]: 'Memory configuration exceeds package limit',
+    [ErrorCode.RESOURCE_DISK_EXCEEDS_PACKAGE]: 'Disk configuration exceeds package limit',
+
+    // User quota errors (detailed)
+    [ErrorCode.QUOTA_CPU_INSUFFICIENT]: 'CPU quota insufficient',
+    [ErrorCode.QUOTA_MEMORY_INSUFFICIENT]: 'Memory quota insufficient',
+    [ErrorCode.QUOTA_DISK_INSUFFICIENT]: 'Disk quota insufficient',
+    [ErrorCode.QUOTA_INSTANCE_LIMIT_REACHED]: 'Instance limit reached',
+    [ErrorCode.QUOTA_HOST_LIMIT_REACHED]: 'Host limit reached',
+    [ErrorCode.QUOTA_PACKAGE_LIMIT_REACHED]: 'Package limit reached',
+    [ErrorCode.QUOTA_FRIEND_LIMIT_REACHED]: 'Friend limit reached',
+    [ErrorCode.QUOTA_PORT_BELOW_USED]: 'Port quota cannot be less than current usage',
+    [ErrorCode.QUOTA_SNAPSHOT_BELOW_USED]: 'Snapshot quota cannot be less than current usage',
+    [ErrorCode.QUOTA_BACKUP_BELOW_USED]: 'Backup quota cannot be less than current usage',
+    [ErrorCode.QUOTA_PORT_TOTAL_EXCEEDED]: 'Total port quota exceeds user limit',
+    [ErrorCode.QUOTA_SNAPSHOT_TOTAL_EXCEEDED]: 'Total snapshot quota exceeds user limit',
+    [ErrorCode.QUOTA_BACKUP_TOTAL_EXCEEDED]: 'Total backup quota exceeds user limit',
+
+    // Image errors (additional)
+    [ErrorCode.IMAGE_NOT_SYNCED]: 'Image not synced to selected host',
+    [ErrorCode.IMAGE_SYNCING_CANNOT_DELETE]: 'Image is syncing on hosts and cannot be deleted',
+    [ErrorCode.IMAGE_NO_HOSTS]: 'No available hosts, please add hosts first',
+
+    // Port errors (additional)
+    [ErrorCode.PORT_RANGE_INVALID]: 'Port must be within allowed range',
+
+    // Snapshot policy errors
+    [ErrorCode.SNAPSHOT_MANUAL_FULL]: 'Manual snapshots have reached instance quota, cannot enable auto snapshot',
+    [ErrorCode.SNAPSHOT_RETENTION_EXCEEDS]: 'Retention count exceeds available quota',
+
+    // Backup policy errors
+    [ErrorCode.BACKUP_MANUAL_FULL]: 'Manual backups have reached instance quota, cannot enable auto backup',
+    [ErrorCode.BACKUP_RETENTION_EXCEEDS]: 'Retention count exceeds available quota',
+
+    // OAuth errors (additional)
+    [ErrorCode.OAUTH_NOT_ENABLED]: 'This OAuth provider is not enabled',
+
+    // Storage config errors
+    [ErrorCode.STORAGE_CONFIG_NOT_FOUND]: 'Storage configuration not found',
+    [ErrorCode.STORAGE_CONFIG_CREATE_FAILED]: 'Failed to create storage configuration',
+    [ErrorCode.STORAGE_CONFIG_UPDATE_FAILED]: 'Failed to update storage configuration',
+    [ErrorCode.STORAGE_CONFIG_DELETE_FAILED]: 'Failed to delete storage configuration',
+    [ErrorCode.STORAGE_TYPE_NOT_SUPPORTED]: 'Storage type not supported',
+    [ErrorCode.STORAGE_POOL_NOT_CONFIGURED]: 'No system disk storage pool configured on host',
+
+    // Backup upload errors
+    [ErrorCode.BACKUP_UPLOAD_TASK_NOT_FOUND]: 'Backup upload task not found',
+    [ErrorCode.BACKUP_UPLOAD_IN_PROGRESS]: 'A backup upload task is already in progress',
+    [ErrorCode.BACKUP_UPLOAD_FAILED]: 'Backup upload failed',
+
+    // Instance config errors
+    [ErrorCode.CONFIG_DISK_CANNOT_SHRINK]: 'Disk size can only be increased, not decreased',
+    [ErrorCode.CONFIG_NO_CHANGES]: 'No configuration changes provided',
+    [ErrorCode.CONFIG_UPDATE_FAILED]: 'Failed to update instance configuration',
+
+    // Transfer errors
+    [ErrorCode.TRANSFER_NOT_FOUND]: 'Transfer request not found',
+    [ErrorCode.TRANSFER_TO_SELF]: 'Cannot transfer to yourself',
+    [ErrorCode.TRANSFER_TO_BANNED]: 'Cannot transfer to a banned user',
+    [ErrorCode.TRANSFER_ALREADY_PENDING]: 'This instance already has a pending transfer request',
+    [ErrorCode.TRANSFER_NOT_PENDING]: 'Transfer request is not in pending status',
+    [ErrorCode.TRANSFER_INVALID_STATUS]: 'Instance status does not allow transfer',
+    [ErrorCode.TRANSFER_QUOTA_NOT_FOUND]: 'Target user quota not found',
+    [ErrorCode.TRANSFER_QUOTA_INSUFFICIENT]: 'Target user quota insufficient',
+    [ErrorCode.TRANSFER_INSTANCE_LOCKED]: 'Instance is locked due to pending transfer',
+    [ErrorCode.TRANSFER_INSUFFICIENT_BALANCE]: 'Insufficient balance for transfer fee',
+    [ErrorCode.TRANSFER_HOST_DISABLED]: 'Transfer is disabled for this host',
+    [ErrorCode.INVALID_PARAMS]: 'Invalid parameters',
+
+    // Friend system errors
+    [ErrorCode.CANNOT_ADD_SELF]: 'Cannot add yourself as a friend',
+    [ErrorCode.ALREADY_FRIENDS]: 'You are already friends with this user',
+    [ErrorCode.FRIEND_REQUEST_PENDING]: 'A friend request is already pending',
+    [ErrorCode.FRIEND_REQUEST_NOT_FOUND]: 'Friend request not found',
+    [ErrorCode.FRIEND_REQUEST_NOT_PENDING]: 'Friend request is not in pending status',
+    [ErrorCode.FRIENDSHIP_NOT_FOUND]: 'Friendship not found',
+    [ErrorCode.NOT_FRIENDS]: 'You are not friends with this user',
+    [ErrorCode.TARGET_FRIEND_QUOTA_FULL]: 'Target user friend quota is full',
+
+    // Package share errors
+    [ErrorCode.CANNOT_SHARE_TO_SELF]: 'Cannot share package to yourself',
+    [ErrorCode.PACKAGE_ALREADY_SHARED]: 'Package is already shared to this user',
+    [ErrorCode.SHARE_NOT_FOUND]: 'Share record not found',
+    [ErrorCode.SHARE_QUOTA_CPU_EXCEEDED]: 'Shared package CPU quota exceeded',
+    [ErrorCode.SHARE_QUOTA_MEMORY_EXCEEDED]: 'Shared package memory quota exceeded',
+    [ErrorCode.SHARE_QUOTA_INSTANCES_EXCEEDED]: 'Shared package instance limit exceeded',
+
+    // Email verification errors
+    [ErrorCode.EMAIL_VERIFICATION_DISABLED]: 'Email verification is not enabled',
+    [ErrorCode.EMAIL_CODE_REQUIRED]: 'Email verification code is required',
+    [ErrorCode.INVALID_EMAIL_CODE]: 'Invalid or expired verification code',
+    [ErrorCode.TOO_MANY_VERIFICATION_REQUESTS]: 'Too many verification requests, please try again later',
+    [ErrorCode.EMAIL_SEND_FAILED]: 'Failed to send verification email',
+    [ErrorCode.EMAIL_ALREADY_REGISTERED]: 'Email address is already registered',
+    [ErrorCode.EMAIL_DOMAIN_NOT_ALLOWED]: 'This email domain is not allowed for registration',
+
+    // Inbox errors
+    [ErrorCode.MESSAGE_NOT_FOUND]: 'Message not found',
+
+    // Checkin errors
+    [ErrorCode.CHECKIN_NO_INSTANCE]: 'You need at least one instance to check in',
+    [ErrorCode.CHECKIN_ALREADY_TODAY]: 'You have already checked in today',
+    [ErrorCode.REDEEM_ALREADY_TODAY]: 'You have already redeemed a code today',
+    [ErrorCode.REDEEM_CODE_NOT_FOUND]: 'Redeem code not found',
+    [ErrorCode.REDEEM_CODE_USED]: 'Redeem code has already been used',
+    [ErrorCode.REDEEM_CODE_EXPIRED]: 'Redeem code has expired',
+    [ErrorCode.REDEEM_CODE_SELF_ONLY]: 'This redeem code can only be used by its owner',
+    [ErrorCode.REDEEM_CODE_DISABLED]: 'This redeem code has been disabled',
+    [ErrorCode.REDEEM_CODE_INVALID_FORMAT]: 'Invalid code format, only h- prefix codes are supported',
+    [ErrorCode.REDEEM_CODE_EXHAUSTED]: 'This redeem code has reached its maximum usage limit',
+    [ErrorCode.REDEEM_CODE_ALREADY_USED_BY_USER]: 'You have already used this redeem code',
+    [ErrorCode.REDEEM_CODE_HOST_MISMATCH]: 'This redeem code can only be used on instances from the same host',
+    [ErrorCode.REDEEM_CODE_BATCH_LIMIT]: 'You have already used a redeem code from this batch',
+    [ErrorCode.REDEEM_EXCEEDS_PACKAGE_QUOTA]: 'Redeeming would exceed instance package quota',
+    [ErrorCode.REDEEM_ALREADY_AT_LIMIT]: 'Instance resource is already at package limit',
+    [ErrorCode.CHECKIN_CODE_PAID_INSTANCE]: 'Check-in redeem codes can only be used on free instances',
+
+    // Resource Pool errors
+    [ErrorCode.RESOURCE_POOL_INSUFFICIENT]: 'Insufficient resource pool balance',
+    [ErrorCode.RESOURCE_POOL_KVM_CPU_MULTIPLE]: 'KVM instance CPU must be a multiple of 100',
+    [ErrorCode.RESOURCE_POOL_KVM_MEMORY_MULTIPLE]: 'KVM instance memory must be a multiple of 128MB',
+    [ErrorCode.RESOURCE_POOL_KVM_DISK_MULTIPLE]: 'KVM instance disk must be a multiple of 1GB (1024MB)',
+    [ErrorCode.RESOURCE_POOL_VM_MUST_STOP]: 'KVM instance must be stopped to adjust memory or disk',
+    [ErrorCode.RESOURCE_POOL_SYSTEM_CODE_REQUIRES_INSTANCE]: 'System redeem code requires an instance to be specified',
+
+    // Internal errors
+    [ErrorCode.INTERNAL_ERROR]: 'Internal server error',
+
+    // Mail module errors
+    [ErrorCode.VALIDATION_ERROR]: 'Validation error',
+    [ErrorCode.OPERATION_NOT_ALLOWED]: 'Operation not allowed',
+    [ErrorCode.RESOURCE_EXISTS]: 'Resource already exists',
+    [ErrorCode.UPSTREAM_ERROR]: 'Upstream service error',
+    [ErrorCode.INSUFFICIENT_BALANCE]: 'Insufficient balance',
+}
+
+/**
+ * Create API error response with code and message
+ */
+export function apiError(code: ErrorCodeType, details?: string) {
+    return {
+        error: ErrorMessages[code],
+        code,
+        details
+    }
+}
diff --git a/server/src/lib/geoip.ts b/server/src/lib/geoip.ts
new file mode 100644
index 0000000..17441ae
--- /dev/null
+++ b/server/src/lib/geoip.ts
@@ -0,0 +1,233 @@
+/**
+ * IP 地理位置查询服务
+ * 使用 ip-api.com 免费 API（45次/分钟限制）
+ * 通过请求队列确保不超过速率限制，且不阻塞调用方
+ */
+
+export interface GeoIpInfo {
+  ip: string
+  country: string | null
+  region: string | null
+  city: string | null
+  isp: string | null
+  timezone: string | null
+}
+
+interface IpApiResponse {
+  status: 'success' | 'fail'
+  message?: string
+  country?: string
+  regionName?: string
+  city?: string
+  isp?: string
+  timezone?: string
+  query?: string
+}
+
+// 简单的内存缓存（避免重复查询）
+const geoCache = new Map<string, { data: GeoIpInfo; timestamp: number }>()
+const CACHE_TTL = 24 * 60 * 60 * 1000 // 24小时缓存
+
+// ==================== 请求队列限速 ====================
+// ip-api.com 限制 45次/分钟，我们保守使用 40次/分钟
+const RATE_LIMIT = 40
+const RATE_WINDOW = 60 * 1000 // 1分钟窗口
+const requestTimestamps: number[] = []
+let isProcessingQueue = false
+
+interface QueuedRequest {
+  ip: string
+  resolve: (result: GeoIpInfo) => void
+}
+
+const requestQueue: QueuedRequest[] = []
+
+/**
+ * 查询 IP 地理位置信息（带限速队列）
+ * 此函数立即返回 Promise，不会阻塞调用方
+ * 如果超过速率限制，请求会排队等待
+ * @param ip IP 地址
+ * @returns 地理位置信息
+ */
+export async function getGeoIpInfo(ip: string): Promise<GeoIpInfo> {
+  // 检查是否是本地 IP
+  if (isLocalIp(ip)) {
+    return createEmptyResult(ip)
+  }
+
+  // 检查缓存（缓存命中直接返回，不进入队列）
+  const cached = geoCache.get(ip)
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.data
+  }
+
+  // 将请求加入队列
+  return new Promise<GeoIpInfo>((resolve) => {
+    requestQueue.push({ ip, resolve })
+    processQueue()
+  })
+}
+
+/**
+ * 处理请求队列
+ */
+async function processQueue(): Promise<void> {
+  if (isProcessingQueue || requestQueue.length === 0) return
+  isProcessingQueue = true
+
+  while (requestQueue.length > 0) {
+    // 清理过期的时间戳
+    const now = Date.now()
+    while (requestTimestamps.length > 0 && requestTimestamps[0] < now - RATE_WINDOW) {
+      requestTimestamps.shift()
+    }
+
+    // 检查是否超过速率限制
+    if (requestTimestamps.length >= RATE_LIMIT) {
+      // 等待直到最早的请求过期
+      const waitTime = requestTimestamps[0] + RATE_WINDOW - now + 100 // 多等100ms缓冲
+      await new Promise(resolve => setTimeout(resolve, waitTime))
+      continue
+    }
+
+    // 取出队列中的请求
+    const request = requestQueue.shift()
+    if (!request) break
+
+    // 再次检查缓存（可能在等待期间被其他请求填充）
+    const cached = geoCache.get(request.ip)
+    if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+      request.resolve(cached.data)
+      continue
+    }
+
+    // 记录请求时间
+    requestTimestamps.push(Date.now())
+
+    // 执行实际的 API 请求
+    const result = await fetchGeoIpInfo(request.ip)
+    request.resolve(result)
+  }
+
+  isProcessingQueue = false
+}
+
+/**
+ * 实际执行 IP 地理位置查询
+ */
+async function fetchGeoIpInfo(ip: string): Promise<GeoIpInfo> {
+  try {
+    const response = await fetch(
+      `http://ip-api.com/json/${ip}?fields=status,message,country,regionName,city,isp,timezone,query`,
+      {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json'
+        },
+        signal: AbortSignal.timeout(5000) // 5秒超时
+      }
+    )
+
+    if (!response.ok) {
+      console.error(`[GeoIP] HTTP error: ${response.status}`)
+      return createEmptyResult(ip)
+    }
+
+    const data = await response.json() as IpApiResponse
+
+    if (data.status === 'fail') {
+      console.warn(`[GeoIP] Query failed for ${ip}: ${data.message}`)
+      return createEmptyResult(ip)
+    }
+
+    const result: GeoIpInfo = {
+      ip,
+      country: data.country || null,
+      region: data.regionName || null,
+      city: data.city || null,
+      isp: data.isp || null,
+      timezone: data.timezone || null
+    }
+
+    // 存入缓存
+    geoCache.set(ip, { data: result, timestamp: Date.now() })
+
+    // 清理过期缓存（简单策略：缓存超过1000条时清理）
+    if (geoCache.size > 1000) {
+      cleanupCache()
+    }
+
+    return result
+  } catch (error) {
+    console.error(`[GeoIP] Error querying IP ${ip}:`, error)
+    return createEmptyResult(ip)
+  }
+}
+
+/**
+ * 检查是否是本地/私有 IP
+ */
+function isLocalIp(ip: string): boolean {
+  // IPv4 本地/私有地址
+  if (
+    ip === '127.0.0.1' ||
+    ip === 'localhost' ||
+    ip.startsWith('192.168.') ||
+    ip.startsWith('10.') ||
+    (ip.startsWith('172.') && isPrivate172(ip))
+  ) {
+    return true
+  }
+
+  // IPv6 本地/私有地址
+  if (
+    ip === '::1' ||
+    ip.toLowerCase().startsWith('fe80:') ||  // Link-local
+    ip.toLowerCase().startsWith('fc') ||      // Unique local (fc00::/7)
+    ip.toLowerCase().startsWith('fd')         // Unique local (fc00::/7)
+  ) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * 检查 172.x.x.x 是否是私有地址 (172.16.0.0 - 172.31.255.255)
+ */
+function isPrivate172(ip: string): boolean {
+  const parts = ip.split('.')
+  if (parts.length < 2) return false
+  const second = parseInt(parts[1], 10)
+  return second >= 16 && second <= 31
+}
+
+/**
+ * 创建空结果
+ */
+function createEmptyResult(ip: string): GeoIpInfo {
+  return {
+    ip,
+    country: null,
+    region: null,
+    city: null,
+    isp: null,
+    timezone: null
+  }
+}
+
+/**
+ * 清理过期缓存
+ */
+function cleanupCache(): void {
+  const now = Date.now()
+  const keysToDelete: string[] = []
+
+  geoCache.forEach((value, key) => {
+    if (now - value.timestamp > CACHE_TTL) {
+      keysToDelete.push(key)
+    }
+  })
+
+  keysToDelete.forEach(key => geoCache.delete(key))
+}
diff --git a/server/src/lib/heleket.ts b/server/src/lib/heleket.ts
new file mode 100644
index 0000000..5f289ff
--- /dev/null
+++ b/server/src/lib/heleket.ts
@@ -0,0 +1,352 @@
+import crypto from 'crypto'
+
+export interface HeleketConfig {
+  apiurl: string
+  merchant_uuid: string
+  api_key: string
+  currency?: string
+  lifetimeSeconds: number
+}
+
+export interface HeleketInvoiceRequest extends Record<string, unknown> {
+  amount: string
+  currency: string
+  order_id: string
+  lifetime?: number
+  network?: string
+  to_currency?: string
+  url_return?: string
+  url_success?: string
+  url_callback?: string
+  additional_data?: string | null
+  is_refresh?: boolean
+}
+
+export interface HeleketPaymentInfoRequest extends Record<string, unknown> {
+  uuid?: string
+  order_id?: string
+}
+
+export interface HeleketPayment {
+  uuid?: string
+  order_id?: string
+  amount?: string
+  payment_amount?: string | null
+  payment_amount_usd?: string | null
+  payer_amount?: string | null
+  payer_currency?: string | null
+  merchant_amount?: string | null
+  network?: string | null
+  address?: string | null
+  from?: string | null
+  txid?: string | null
+  status?: string | null
+  payment_status?: string | null
+  url?: string | null
+  is_final?: boolean
+  additional_data?: string | null
+  sign?: string
+  [key: string]: unknown
+}
+
+export interface HeleketPaymentService {
+  network: string
+  currency: string
+  is_available: boolean
+  is_enabled: boolean
+  limit?: {
+    min_amount?: string
+    max_amount?: string
+  }
+  commission?: {
+    fee_amount?: string
+    percent?: string
+  }
+}
+
+export interface HeleketStructuredPaymentDetails {
+  status: string
+  statusDescription: string
+  uuid: string | null
+  txid: string | null
+  payerCurrency: string | null
+  network: string | null
+  paymentMethodCode: string | null
+  paymentAmount: string | null
+  paymentAmountUsd: string | null
+  merchantAmount: string | null
+  address: string | null
+  from: string | null
+}
+
+interface HeleketApiResponse<T> {
+  state: number
+  result?: T
+  message?: string
+  errors?: Record<string, string[]>
+}
+
+export interface HeleketClient {
+  createInvoice(input: HeleketInvoiceRequest): Promise<HeleketPayment>
+  getPaymentInfo(input: HeleketPaymentInfoRequest): Promise<HeleketPayment>
+  listServices(): Promise<HeleketPaymentService[]>
+  verifyWebhookSignature(payload: Record<string, unknown>): boolean
+}
+
+const HELEKET_PAID_STATUSES = new Set(['paid', 'paid_over'])
+const HELEKET_PENDING_STATUSES = new Set(['process', 'confirm_check', 'wrong_amount_waiting', 'check'])
+const HELEKET_CANCELLED_STATUSES = new Set(['cancel'])
+const HELEKET_FAILED_STATUSES = new Set(['wrong_amount', 'fail', 'system_fail', 'refund_process', 'refund_fail', 'refund_paid', 'locked'])
+const HELEKET_DEFAULT_LIFETIME_SECONDS = 3600
+const HELEKET_MIN_LIFETIME_SECONDS = 300
+const HELEKET_MAX_LIFETIME_SECONDS = 43200
+
+export type HeleketPaymentState = 'paid' | 'pending' | 'cancelled' | 'failed'
+
+function normalizeApiUrl(apiurl: string): string {
+  const trimmed = apiurl.trim()
+  return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed
+}
+
+function parseHeleketLifetimeSeconds(value: unknown): number {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string' && value.trim()
+      ? Number.parseInt(value.trim(), 10)
+      : NaN
+
+  if (!Number.isFinite(parsed)) {
+    return HELEKET_DEFAULT_LIFETIME_SECONDS
+  }
+
+  return Math.min(
+    HELEKET_MAX_LIFETIME_SECONDS,
+    Math.max(HELEKET_MIN_LIFETIME_SECONDS, Math.trunc(parsed))
+  )
+}
+
+export function buildHeleketConfig(
+  config: Record<string, unknown>
+): { heleketConfig: HeleketConfig; valid: boolean; error?: string } {
+  const heleketConfig: HeleketConfig = {
+    apiurl: typeof config.apiurl === 'string' && config.apiurl.trim()
+      ? config.apiurl.trim()
+      : 'https://api.heleket.com',
+    merchant_uuid: typeof config.merchant_uuid === 'string' ? config.merchant_uuid.trim() : '',
+    api_key: typeof config.api_key === 'string' ? config.api_key.trim() : '',
+    currency: typeof config.currency === 'string' && config.currency.trim()
+      ? config.currency.trim().toUpperCase()
+      : 'CNY',
+    lifetimeSeconds: parseHeleketLifetimeSeconds(config.lifetime ?? config.lifetime_seconds)
+  }
+
+  if (!heleketConfig.apiurl || !heleketConfig.merchant_uuid || !heleketConfig.api_key) {
+    return {
+      heleketConfig,
+      valid: false,
+      error: '支付渠道配置不完整（Heleket 需要接口地址、商户 UUID 和 API Key）'
+    }
+  }
+
+  return { heleketConfig, valid: true }
+}
+
+export function serializeHeleketPayload(payload: Record<string, unknown>): string {
+  return JSON.stringify(payload).replace(/\//g, '\\/')
+}
+
+export function signHeleketPayload(payload: Record<string, unknown>, apiKey: string): string {
+  const serialized = serializeHeleketPayload(payload)
+  return crypto.createHash('md5').update(Buffer.from(serialized).toString('base64') + apiKey).digest('hex')
+}
+
+export function verifyHeleketWebhookSignature(
+  payload: Record<string, unknown>,
+  apiKey: string
+): boolean {
+  const sign = typeof payload.sign === 'string' ? payload.sign : ''
+  if (!sign) {
+    return false
+  }
+
+  const dataWithoutSign = { ...payload }
+  delete dataWithoutSign.sign
+
+  const expected = signHeleketPayload(dataWithoutSign, apiKey)
+  if (expected.length !== sign.length) {
+    return false
+  }
+  return crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(sign))
+}
+
+export function extractHeleketStatus(payment: HeleketPayment | Record<string, unknown>): string {
+  const status = payment.status ?? payment.payment_status
+  return typeof status === 'string' ? status : ''
+}
+
+export function isHeleketPaidStatus(status: string): boolean {
+  return HELEKET_PAID_STATUSES.has(status)
+}
+
+export function getHeleketPaymentState(payment: HeleketPayment | Record<string, unknown>): HeleketPaymentState {
+  const status = extractHeleketStatus(payment)
+  const isFinal = (payment as { is_final?: unknown }).is_final === true
+
+  if (HELEKET_PAID_STATUSES.has(status)) {
+    return 'paid'
+  }
+
+  if (HELEKET_CANCELLED_STATUSES.has(status)) {
+    return 'cancelled'
+  }
+
+  if (HELEKET_FAILED_STATUSES.has(status)) {
+    return 'failed'
+  }
+
+  if (HELEKET_PENDING_STATUSES.has(status)) {
+    return 'pending'
+  }
+
+  return isFinal ? 'failed' : 'pending'
+}
+
+export function getHeleketStatusDescription(status: string): string {
+  switch (status) {
+    case 'paid':
+      return '支付成功，金额与账单一致'
+    case 'paid_over':
+      return '支付成功，用户超额付款'
+    case 'wrong_amount':
+      return '支付金额不足'
+    case 'process':
+      return '支付处理中'
+    case 'confirm_check':
+      return '链上已发现交易，等待确认数'
+    case 'wrong_amount_waiting':
+      return '支付金额不足，等待补付'
+    case 'check':
+      return '等待链上出现交易'
+    case 'fail':
+      return '支付失败'
+    case 'cancel':
+      return '支付已取消'
+    case 'system_fail':
+      return '支付系统异常'
+    case 'refund_process':
+      return '退款处理中'
+    case 'refund_fail':
+      return '退款失败'
+    case 'refund_paid':
+      return '已退款'
+    case 'locked':
+      return '资金因 AML 风控被锁定'
+    default:
+      return status || '未知支付状态'
+  }
+}
+
+export function extractHeleketPaymentDetails(
+  payment: HeleketPayment | Record<string, unknown>
+): HeleketStructuredPaymentDetails {
+  const status = extractHeleketStatus(payment)
+  const payerCurrency = typeof payment.payer_currency === 'string' && payment.payer_currency.trim()
+    ? payment.payer_currency.trim().toUpperCase()
+    : null
+  const network = typeof payment.network === 'string' && payment.network.trim()
+    ? payment.network.trim().toUpperCase()
+    : null
+
+  return {
+    status,
+    statusDescription: getHeleketStatusDescription(status),
+    uuid: typeof payment.uuid === 'string' && payment.uuid.trim() ? payment.uuid.trim() : null,
+    txid: typeof payment.txid === 'string' && payment.txid.trim() ? payment.txid.trim() : null,
+    payerCurrency,
+    network,
+    paymentMethodCode: payerCurrency ? (network ? `${payerCurrency}@${network}` : payerCurrency) : null,
+    paymentAmount: typeof payment.payment_amount === 'string' && payment.payment_amount.trim() ? payment.payment_amount.trim() : null,
+    paymentAmountUsd: typeof payment.payment_amount_usd === 'string' && payment.payment_amount_usd.trim() ? payment.payment_amount_usd.trim() : null,
+    merchantAmount: typeof payment.merchant_amount === 'string' && payment.merchant_amount.trim() ? payment.merchant_amount.trim() : null,
+    address: typeof payment.address === 'string' && payment.address.trim() ? payment.address.trim() : null,
+    from: typeof payment.from === 'string' && payment.from.trim() ? payment.from.trim() : null
+  }
+}
+
+export function getHeleketInvoiceAmount(payment: HeleketPayment | Record<string, unknown>): number | undefined {
+  const invoiceAmount = payment.amount
+  if (typeof invoiceAmount === 'string' && invoiceAmount.trim()) {
+    const parsed = parseFloat(invoiceAmount)
+    if (Number.isFinite(parsed) && parsed > 0) {
+      return parsed
+    }
+  }
+
+  return undefined
+}
+function formatHeleketError(data: HeleketApiResponse<unknown>, fallback: string): string {
+  if (typeof data.message === 'string' && data.message.trim()) {
+    return data.message
+  }
+
+  if (data.errors && typeof data.errors === 'object') {
+    const firstEntry = Object.values(data.errors)[0]
+    if (Array.isArray(firstEntry) && firstEntry[0]) {
+      return firstEntry[0]
+    }
+  }
+
+  return fallback
+}
+
+async function heleketRequest<T>(
+  config: HeleketConfig,
+  path: string,
+  payload: Record<string, unknown>
+): Promise<T> {
+  const body = serializeHeleketPayload(payload)
+  const response = await fetch(`${normalizeApiUrl(config.apiurl)}${path}`, {
+    method: 'POST',
+    headers: {
+      merchant: config.merchant_uuid,
+      sign: signHeleketPayload(payload, config.api_key),
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
+    },
+    body,
+    signal: AbortSignal.timeout(15000)
+  })
+
+  let data: HeleketApiResponse<T>
+  try {
+    data = await response.json() as HeleketApiResponse<T>
+  } catch {
+    throw new Error(`Heleket 返回了无法解析的响应（HTTP ${response.status}）`)
+  }
+
+  if (!response.ok || data.state !== 0 || data.result === undefined) {
+    throw new Error(formatHeleketError(data, `Heleket 请求失败（HTTP ${response.status}）`))
+  }
+
+  return data.result
+}
+
+export function createHeleketClient(config: HeleketConfig): HeleketClient {
+  return {
+    async createInvoice(input) {
+      return heleketRequest<HeleketPayment>(config, '/v1/payment', input)
+    },
+
+    async getPaymentInfo(input) {
+      return heleketRequest<HeleketPayment>(config, '/v1/payment/info', input)
+    },
+
+    async listServices() {
+      return heleketRequest<HeleketPaymentService[]>(config, '/v1/payment/services', {})
+    },
+
+    verifyWebhookSignature(payload) {
+      return verifyHeleketWebhookSignature(payload, config.api_key)
+    }
+  }
+}
diff --git a/server/src/lib/host-agent-credentials.ts b/server/src/lib/host-agent-credentials.ts
new file mode 100644
index 0000000..b838308
--- /dev/null
+++ b/server/src/lib/host-agent-credentials.ts
@@ -0,0 +1,202 @@
+import { Prisma } from '@prisma/client'
+import { createHash, randomBytes } from 'crypto'
+import { prisma } from '../db/prisma.js'
+import { generateAgentId, generateAgentSecret, hashAgentSecret } from './agent-auth.js'
+import { decryptSensitiveData, encryptSensitiveData } from './security.js'
+
+export interface HostAgentRecord {
+  id: number
+  hostId: number
+  agentId: string
+  secretHash: string
+  secretEncrypted: string
+  installTokenHash: string | null
+  installTokenExpiresAt: Date | null
+  installTokenUsedAt: Date | null
+  enabled: boolean
+  status: string
+  version: string | null
+  capabilities: unknown
+  lastReport: unknown
+  lastSeenAt: Date | null
+  lastHeartbeatIp: string | null
+  createdAt: Date
+  updatedAt: Date
+}
+
+const agentModel = prisma.hostAgent
+const nonceModel = prisma.hostAgentNonce
+const agentInstallTokenPrefix = 'ait_'
+const agentInstallTokenTtlMs = 30 * 60 * 1000
+
+async function generateUniqueAgentId(): Promise<string> {
+  for (let attempt = 0; attempt < 8; attempt += 1) {
+    const agentId = generateAgentId()
+    const existing = await agentModel.findUnique({
+      where: { agentId },
+      select: { id: true }
+    })
+    if (!existing) {
+      return agentId
+    }
+  }
+  throw new Error('Unable to generate unique Agent ID')
+}
+
+export async function rotateHostAgentCredentials(hostId: number, enabled = true): Promise<{
+  host: { id: number; name: string }
+  agent: HostAgentRecord
+  agentId: string
+  agentSecret: string
+}> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: { id: true, name: true }
+  })
+  if (!host) {
+    throw new Error('HOST_NOT_FOUND')
+  }
+
+  const existingAgent = await agentModel.findUnique({
+    where: { hostId },
+    select: { agentId: true }
+  })
+  if (existingAgent) {
+    // 轮换 agentId 前先清理旧 nonce，避免外键阻止 agent_id 更新。
+    await nonceModel.deleteMany({ where: { agentId: existingAgent.agentId } })
+  }
+
+  const agentId = await generateUniqueAgentId()
+  const agentSecret = generateAgentSecret()
+  const agent = await agentModel.upsert({
+    where: { hostId },
+    create: {
+      hostId,
+      agentId,
+      secretHash: hashAgentSecret(agentSecret),
+      secretEncrypted: encryptSensitiveData(agentSecret),
+      installTokenHash: null,
+      installTokenExpiresAt: null,
+      installTokenUsedAt: null,
+      enabled,
+      status: 'offline'
+    },
+    update: {
+      agentId,
+      secretHash: hashAgentSecret(agentSecret),
+      secretEncrypted: encryptSensitiveData(agentSecret),
+      installTokenHash: null,
+      installTokenExpiresAt: null,
+      installTokenUsedAt: null,
+      enabled,
+      status: 'offline',
+      version: null,
+      capabilities: [] as Prisma.InputJsonValue,
+      lastReport: {} as Prisma.InputJsonObject,
+      lastSeenAt: null,
+      lastHeartbeatIp: null
+    }
+  })
+
+  return {
+    host,
+    agent,
+    agentId,
+    agentSecret
+  }
+}
+
+function generateAgentInstallToken(): string {
+  return `${agentInstallTokenPrefix}${randomBytes(32).toString('base64url')}`
+}
+
+function hashAgentInstallToken(token: string): string {
+  return createHash('sha256').update(token).digest('hex')
+}
+
+export function isAgentInstallToken(value: string): boolean {
+  return value.startsWith(agentInstallTokenPrefix) && value.length >= agentInstallTokenPrefix.length + 32
+}
+
+export async function issueHostAgentInstallToken(hostId: number, enabled = true): Promise<{
+  host: { id: number; name: string }
+  agent: HostAgentRecord
+  installToken: string
+  installTokenExpiresAt: Date
+}> {
+  const rotated = await rotateHostAgentCredentials(hostId, enabled)
+  const installToken = generateAgentInstallToken()
+  const installTokenExpiresAt = new Date(Date.now() + agentInstallTokenTtlMs)
+
+  const agent = await agentModel.update({
+    where: { id: rotated.agent.id },
+    data: {
+      installTokenHash: hashAgentInstallToken(installToken),
+      installTokenExpiresAt,
+      installTokenUsedAt: null
+    }
+  })
+
+  return {
+    host: rotated.host,
+    agent,
+    installToken,
+    installTokenExpiresAt
+  }
+}
+
+export async function consumeHostAgentInstallToken(token: string): Promise<{
+  host: { id: number; name: string }
+  agent: HostAgentRecord
+  agentSecret: string
+}> {
+  if (!isAgentInstallToken(token)) {
+    throw new Error('AGENT_INSTALL_TOKEN_INVALID')
+  }
+
+  const tokenHash = hashAgentInstallToken(token)
+  const agent = await agentModel.findUnique({
+    where: { installTokenHash: tokenHash },
+    include: {
+      host: {
+        select: { id: true, name: true }
+      }
+    }
+  })
+
+  if (!agent || !agent.installTokenExpiresAt || agent.installTokenUsedAt) {
+    throw new Error('AGENT_INSTALL_TOKEN_INVALID')
+  }
+  if (agent.installTokenExpiresAt < new Date()) {
+    throw new Error('AGENT_INSTALL_TOKEN_EXPIRED')
+  }
+
+  const updated = await agentModel.updateMany({
+    where: {
+      id: agent.id,
+      installTokenHash: tokenHash,
+      installTokenUsedAt: null,
+      installTokenExpiresAt: { gte: new Date() }
+    },
+    data: {
+      installTokenHash: null,
+      installTokenExpiresAt: null,
+      installTokenUsedAt: new Date()
+    }
+  })
+  if (updated.count !== 1) {
+    throw new Error('AGENT_INSTALL_TOKEN_INVALID')
+  }
+
+  const agentSecret = decryptSensitiveData(agent.secretEncrypted)
+  if (!agentSecret) {
+    throw new Error('AGENT_SECRET_INVALID')
+  }
+
+  const { host, ...agentRecord } = agent
+  return {
+    host,
+    agent: agentRecord,
+    agentSecret
+  }
+}
diff --git a/server/src/lib/hosting-access.ts b/server/src/lib/hosting-access.ts
new file mode 100644
index 0000000..ce9092e
--- /dev/null
+++ b/server/src/lib/hosting-access.ts
@@ -0,0 +1,164 @@
+/**
+ * 托管准入校验模块
+ * 
+ * 准入条件：
+ * - 至少拥有过1台实例（不论免费/付费，不论官方直营/托管）
+ */
+
+import { prisma } from '../db/index.js'
+import { getSystemConfigBoolean } from '../db/system-config.js'
+
+// 准入配置常量
+const HOSTING_ACCESS_CONFIG = {
+  // 最低实例数量（不限类型）
+  minInstances: 1
+}
+
+export interface HostingAccessResult {
+  allowed: boolean
+  reason?: string
+  details?: {
+    instanceCount: number
+    hasCreatedHostBefore: boolean
+    featureEnabled: boolean
+    hiddenBySystemSetting: boolean
+  }
+}
+
+interface CheckHostingAccessOptions {
+  enforceFeatureVisibility?: boolean
+}
+
+interface HostingFeatureState {
+  role: 'admin' | 'user'
+  hasCreatedHostBefore: boolean
+  featureEnabled: boolean
+}
+
+async function getHostingFeatureState(userId: number): Promise<HostingFeatureState | null> {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: {
+      role: true,
+      hasCreatedHostBefore: true
+    }
+  })
+
+  if (!user) {
+    return null
+  }
+
+  const featureEnabled = await getSystemConfigBoolean('hosting_feature_enabled', true)
+
+  return {
+    role: user.role,
+    hasCreatedHostBefore: user.hasCreatedHostBefore,
+    featureEnabled
+  }
+}
+
+export async function getUserHostingFeatureStatus(userId: number): Promise<{
+  canAccessHostingFeature: boolean
+  hasCreatedHostBefore: boolean
+  featureEnabled: boolean
+}> {
+  const state = await getHostingFeatureState(userId)
+  if (!state) {
+    return {
+      canAccessHostingFeature: false,
+      hasCreatedHostBefore: false,
+      featureEnabled: false
+    }
+  }
+
+  if (state.role === 'admin') {
+    return {
+      canAccessHostingFeature: true,
+      hasCreatedHostBefore: state.hasCreatedHostBefore,
+      featureEnabled: true
+    }
+  }
+
+  return {
+    canAccessHostingFeature: state.featureEnabled || state.hasCreatedHostBefore,
+    hasCreatedHostBefore: state.hasCreatedHostBefore,
+    featureEnabled: state.featureEnabled
+  }
+}
+
+/**
+ * 检查用户是否满足托管准入条件
+ */
+export async function checkHostingAccess(
+  userId: number,
+  options: CheckHostingAccessOptions = {}
+): Promise<HostingAccessResult> {
+  const { enforceFeatureVisibility = true } = options
+  const state = await getHostingFeatureState(userId)
+  if (!state) {
+    return { allowed: false, reason: '用户不存在' }
+  }
+
+  // 管理员直接放行
+  if (state.role === 'admin') {
+    return { allowed: true }
+  }
+
+  // 查询用户拥有过的实例数量（不限类型，包含免费/付费、官方直营/托管）
+  const instanceCount = await prisma.instance.count({
+    where: { userId }
+  })
+
+  const details = {
+    instanceCount,
+    hasCreatedHostBefore: state.hasCreatedHostBefore,
+    featureEnabled: state.featureEnabled,
+    hiddenBySystemSetting: !state.featureEnabled && !state.hasCreatedHostBefore
+  }
+
+  if (enforceFeatureVisibility && details.hiddenBySystemSetting) {
+    return {
+      allowed: false,
+      reason: '托管功能暂未向未创建过节点的用户开放',
+      details
+    }
+  }
+
+  if (instanceCount >= HOSTING_ACCESS_CONFIG.minInstances) {
+    return { allowed: true, details }
+  }
+
+  return {
+    allowed: false,
+    reason: `不满足托管准入条件：需要至少拥有过 ${HOSTING_ACCESS_CONFIG.minInstances} 台实例（当前 ${instanceCount} 台）`,
+    details
+  }
+}
+
+/**
+ * 判断节点是否为用户托管节点（非管理员节点）
+ */
+export async function isUserHostedNode(hostId: number): Promise<boolean> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: {
+      user: {
+        select: {
+          role: true
+        }
+      }
+    }
+  })
+  return host?.user.role === 'user'
+}
+
+/**
+ * 获取节点所有者ID
+ */
+export async function getHostOwnerId(hostId: number): Promise<number | null> {
+  const host = await prisma.host.findUnique({
+    where: { id: hostId },
+    select: { userId: true }
+  })
+  return host?.userId ?? null
+}
diff --git a/server/src/lib/incus-config-container.ts b/server/src/lib/incus-config-container.ts
new file mode 100644
index 0000000..c93abcb
--- /dev/null
+++ b/server/src/lib/incus-config-container.ts
@@ -0,0 +1,635 @@
+/**
+ * incus-config-container.ts
+ * LXC 容器专用配置生成器
+ */
+
+import crypto from 'crypto'
+
+// ==================== 类型定义 ====================
+
+type OsFamily =
+  | 'debian'      // Debian, Kali
+  | 'ubuntu'      // Ubuntu
+  | 'rhel'        // AlmaLinux, CentOS, Rocky, Oracle, Fedora
+  | 'rhel8'       // RHEL 8 系列
+  | 'suse'        // openSUSE
+  | 'alpine'      // Alpine Linux
+  | 'arch'        // Arch Linux
+  | 'linux'       // VM 通用 Linux
+  | 'other'
+
+type PackageManager = 'apt' | 'dnf' | 'yum' | 'zypper' | 'apk' | 'pacman'
+type InitSystem = 'systemd' | 'openrc'
+
+interface OsInfo {
+  family: OsFamily
+  packageManager: PackageManager
+  initSystem: InitSystem
+  sshServiceName: string
+  defaultShell: string
+  defaultUsers: string[]
+  supportsInclude: boolean
+}
+
+// 静态网络配置接口 (支持 IPv6 双栈)
+interface StaticNetworkConfig {
+  /** IPv4 CIDR 格式，例如: 10.10.1.100/24 */
+  ipAddress: string
+  /** IPv4 网关，例如: 10.10.1.1 */
+  gateway: string
+  /** IPv4 DNS，默认为 ["8.8.8.8", "1.1.1.1"] */
+  dns?: string[]
+  /** IPv6 CIDR 格式，例如: 2001:db8::100/64 */
+  ipv6Address?: string
+  /** IPv6 网关，例如: 2001:db8::1 */
+  ipv6Gateway?: string
+  /** IPv6 DNS，例如: ["2001:4860:4860::8888"] */
+  ipv6Dns?: string[]
+}
+
+export interface IncusConfigParams {
+  instanceName: string
+  imageAlias: string
+  rootPassword: string
+  sshKey?: string
+  type?: 'container' | 'virtual-machine'
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  /** 可选: 面板计算出的静态 IP 配置，不提供则使用 DHCP */
+  network?: StaticNetworkConfig
+  /** 可选: 用户自定义初始化命令（多行文本，按换行分割） */
+  extraShellCommands?: string
+}
+
+export interface IncusConfigMetaData {
+  sshPort: number
+  rootPassword: string
+  osFamily: OsFamily
+  imageAlias: string
+  instanceType: 'container' | 'virtual-machine'
+  ipAddress: string
+}
+
+export interface IncusConfigResult {
+  configPayload: {
+    'user.user-data': string
+    'user.network-config': string
+  }
+  metaData: IncusConfigMetaData
+}
+
+// ==================== 常量配置 ====================
+
+const CONFIG = {
+  SSH_PORT: 22,
+  NETWORK_RETRY_COUNT: 20,
+  NETWORK_RETRY_DELAY: 3,
+  // 核心修复：DNS 指向网桥 dnsmasq 网关，由其代理向上游转发
+  // 纯 IPv6 宿主机的网桥上游 DNS 已配置为 DNS64 集群，
+  // 容器通过 dnsmasq 间接完成解析，无需直连外部 DNS
+  DEFAULT_DNS: ['10.10.0.1'],
+  INTERFACE_NAME: 'eth0'  // 容器网络接口名
+} as const
+
+// ==================== 工具函数 ====================
+
+export function generateRandomPassword(length: number = 16): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'
+  let password = ''
+  for (let i = 0; i < length; i++) {
+    password += chars.charAt(crypto.randomInt(chars.length))
+  }
+  return password
+}
+
+function escapeForShellSingleQuote(str: string): string {
+  return str.replace(/'/g, "'\"'\"'")
+}
+
+function escapeForShellDoubleQuote(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/\$/g, '\\$')
+    .replace(/`/g, '\\`')
+    .replace(/"/g, '\\"')
+}
+
+function isValidSshKey(key: string): boolean {
+  return /^(ssh-rsa|ssh-ed25519|ecdsa-sha2-nistp256|ecdsa-sha2-nistp384|ecdsa-sha2-nistp521|ssh-dss)\s+[A-Za-z0-9+/=]+/.test(key.trim())
+}
+
+// ==================== 操作系统检测 ====================
+
+function isRhel8Series(alias: string): boolean {
+  return /alma.*8|rocky.*8|oracle.*8|centos.*8/i.test(alias)
+}
+
+function isOldDebian(alias: string): boolean {
+  return /debian.*(10|buster|11|bullseye)/i.test(alias)
+}
+
+function detectOsInfo(imageAlias: string): OsInfo {
+  const alias = imageAlias.toLowerCase()
+
+  if (alias.includes('ubuntu')) {
+    return { family: 'ubuntu', packageManager: 'apt', initSystem: 'systemd', sshServiceName: 'ssh', defaultShell: '/bin/bash', defaultUsers: ['root', 'ubuntu'], supportsInclude: true }
+  }
+
+  if (alias.includes('arch')) {
+    return {
+      family: 'arch',
+      packageManager: 'pacman',
+      initSystem: 'systemd',
+      sshServiceName: 'sshd',
+      defaultShell: '/bin/bash',
+      defaultUsers: ['root', 'arch'],
+      supportsInclude: true
+    }
+  }
+
+  if (alias.includes('kali')) {
+    return { family: 'debian', packageManager: 'apt', initSystem: 'systemd', sshServiceName: 'ssh', defaultShell: '/bin/bash', defaultUsers: ['root', 'kali'], supportsInclude: true }
+  }
+
+  if (alias.includes('debian')) {
+    const isOld = isOldDebian(alias)
+    return {
+      family: 'debian',
+      packageManager: 'apt',
+      initSystem: 'systemd',
+      sshServiceName: 'ssh',
+      defaultShell: '/bin/bash',
+      defaultUsers: ['root', 'debian'],
+      supportsInclude: !isOld
+    }
+  }
+
+  if (alias.includes('alpine')) {
+    return {
+      family: 'alpine',
+      packageManager: 'apk',
+      initSystem: 'openrc',
+      sshServiceName: 'sshd',
+      defaultShell: '/bin/ash',
+      defaultUsers: ['root'],
+      supportsInclude: true
+    }
+  }
+
+  if (alias.includes('opensuse') || alias.includes('suse') || alias.includes('tumbleweed') || alias.includes('leap')) {
+    return { family: 'suse', packageManager: 'zypper', initSystem: 'systemd', sshServiceName: 'sshd', defaultShell: '/bin/bash', defaultUsers: ['root'], supportsInclude: true }
+  }
+
+  if (alias.includes('fedora')) {
+    return { family: 'rhel', packageManager: 'dnf', initSystem: 'systemd', sshServiceName: 'sshd', defaultShell: '/bin/bash', defaultUsers: ['root', 'fedora'], supportsInclude: true }
+  }
+
+  if (alias.includes('alma') || alias.includes('rocky') || alias.includes('oracle') || alias.includes('centos') || alias.includes('rhel')) {
+    const isVersion8 = isRhel8Series(alias)
+    let defaultUser = 'root'
+    if (alias.includes('alma')) defaultUser = 'almalinux'
+    else if (alias.includes('rocky')) defaultUser = 'rocky'
+    else if (alias.includes('oracle')) defaultUser = 'oracle'
+    else if (alias.includes('centos')) defaultUser = 'centos'
+    return {
+      family: isVersion8 ? 'rhel8' : 'rhel',
+      packageManager: isVersion8 ? 'yum' : 'dnf',
+      initSystem: 'systemd',
+      sshServiceName: 'sshd',
+      defaultShell: '/bin/bash',
+      defaultUsers: ['root', defaultUser],
+      supportsInclude: true
+    }
+  }
+
+  return { family: 'other', packageManager: 'apt', initSystem: 'systemd', sshServiceName: 'sshd', defaultShell: '/bin/bash', defaultUsers: ['root'], supportsInclude: true }
+}
+
+// ==================== 包列表生成 ====================
+
+function getPackagesForOs(osInfo: OsInfo): string[] {
+  const commonUtils = ['curl', 'wget', 'sudo', 'ca-certificates']
+
+  switch (osInfo.packageManager) {
+    case 'apt':
+      return [...commonUtils, 'openssh-server', 'sed', 'grep', 'iproute2']
+    case 'dnf':
+    case 'yum':
+      return [...commonUtils, 'openssh-server', 'openssh-clients', 'sed', 'grep', 'iproute']
+    case 'zypper':
+      return [...commonUtils, 'openssh', 'sed', 'grep', 'iproute2']
+    case 'pacman':
+      return []
+    case 'apk':
+      return []
+    default:
+      return []
+  }
+}
+
+// ==================== 设置命令生成 ====================
+
+function wrapWithNetworkRetry(cmd: string): string {
+  return `
+  j=0
+  while [ $j -lt ${CONFIG.NETWORK_RETRY_COUNT} ]; do
+    # 动态获取 IPv4 或 IPv6 默认网关作为 DNS，若依然全空，则给予双栈的知名公测兜底 DNS，护航纯 IPv6 及异常段启动
+    GW4=$(ip -4 route show default 2>/dev/null | awk '/default/ {print $3}' | head -n 1)
+    GW6=$(ip -6 route show default 2>/dev/null | awk '/default/ {print $3}' | head -n 1)
+    if [ -n "$GW4" ]; then echo "nameserver $GW4" > /etc/resolv.conf; elif [ -n "$GW6" ]; then echo "nameserver $GW6" > /etc/resolv.conf; else echo -e "nameserver 8.8.8.8\\nnameserver 2001:4860:4860::8888" > /etc/resolv.conf; fi
+    
+    if ${cmd}; then
+      break
+    fi
+    
+    echo "Command failed (attempt $j), retrying in ${CONFIG.NETWORK_RETRY_DELAY}s..."
+    j=$((j+1))
+    sleep ${CONFIG.NETWORK_RETRY_DELAY}
+  done
+  `
+}
+
+function getSetupCommands(osInfo: OsInfo): string[] {
+  const cmds: string[] = []
+
+  // ================= Alpine =================
+  if (osInfo.family === 'alpine') {
+    cmds.push('sed -i "s/https:/http:/g" /etc/apk/repositories || true')
+    const essentialPkgs = 'openssh openssh-server-pam bash shadow sed grep dhcpcd util-linux ca-certificates iproute2'
+    const installCmd = `apk update && apk add --no-cache --allow-untrusted ${essentialPkgs}`
+    cmds.push(wrapWithNetworkRetry(installCmd))
+    cmds.push('sed -i "s/http:/https:/g" /etc/apk/repositories || true')
+    cmds.push('touch /etc/shadow && chmod 640 /etc/shadow || true')
+  }
+  // ================= Arch Linux =================
+  else if (osInfo.family === 'arch') {
+    const archCmd = 'pacman -Sy --noconfirm openssh sed grep iproute2'
+    cmds.push(wrapWithNetworkRetry(archCmd))
+    cmds.push('ssh-keygen -A || true')
+  }
+  // ================= 其他发行版 =================
+  else {
+    switch (osInfo.packageManager) {
+      case 'apt':
+        cmds.push(wrapWithNetworkRetry('DEBIAN_FRONTEND=noninteractive apt-get update'))
+        cmds.push('DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends openssh-server sed grep iproute2 || true')
+        break
+      case 'dnf':
+        cmds.push(wrapWithNetworkRetry('dnf install -y openssh-server openssh-clients sed grep iproute'))
+        break
+      case 'yum':
+        cmds.push(wrapWithNetworkRetry('yum install -y openssh-server openssh-clients sed grep iproute'))
+        break
+      case 'zypper':
+        cmds.push(wrapWithNetworkRetry('zypper --non-interactive refresh'))
+        cmds.push('zypper --non-interactive install -y openssh sed grep iproute2 || true')
+        break
+    }
+  }
+
+  // 通用配置
+  cmds.push('mkdir -p /etc/ssh/sshd_config.d')
+  cmds.push('sed -i -E "s/^[#[:space:]]*Subsystem[[:space:]]+sftp.*/Subsystem sftp internal-sftp/" /etc/ssh/sshd_config 2>/dev/null || true')
+  cmds.push('grep -q "^Subsystem sftp " /etc/ssh/sshd_config || printf "\\n%s\\n" "Subsystem sftp internal-sftp" >> /etc/ssh/sshd_config')
+
+  if (osInfo.supportsInclude) {
+    cmds.push('grep -q "^Include /etc/ssh/sshd_config.d" /etc/ssh/sshd_config || sed -i "1i Include /etc/ssh/sshd_config.d/*.conf" /etc/ssh/sshd_config || true')
+  }
+
+  cmds.push('command -v ssh-keygen >/dev/null && { test -f /etc/ssh/ssh_host_rsa_key || ssh-keygen -A 2>/dev/null; } || true')
+
+  // 服务管理
+  if (osInfo.initSystem === 'systemd') {
+    cmds.push(`systemctl unmask ${osInfo.sshServiceName} || true`)
+    cmds.push(`systemctl enable ${osInfo.sshServiceName} || true`)
+  } else {
+    cmds.push(`[ -f /etc/init.d/${osInfo.sshServiceName} ] && rc-update add ${osInfo.sshServiceName} default 2>/dev/null || true`)
+    cmds.push('[ -f /etc/init.d/dhcpcd ] && rc-update add dhcpcd default 2>/dev/null || true')
+  }
+
+  return cmds
+}
+
+// ==================== 脚本生成 ====================
+
+function generateSetupScript(
+  sshKey: string | undefined,
+  rootPassword: string,
+  users: string[],
+  osInfo: OsInfo
+): string {
+  const escapedKey = escapeForShellDoubleQuote(sshKey || '')
+  const escapedPassword = escapeForShellSingleQuote(rootPassword)
+  const usersListForLoop = users.join(' ')
+  const sshServiceName = osInfo.sshServiceName
+
+  let restartSshCmd: string
+  if (osInfo.initSystem === 'openrc') {
+    restartSshCmd = `rc-service ${sshServiceName} restart 2>/dev/null || /etc/init.d/${sshServiceName} restart || /etc/init.d/${sshServiceName} start || true`
+  } else {
+    restartSshCmd = `systemctl restart ${sshServiceName} 2>/dev/null || service ${sshServiceName} restart || true`
+  }
+
+  return `#!/bin/sh
+set -e
+
+SSH_KEY="${escapedKey}"
+ROOT_PASSWORD='${escapedPassword}'
+USERS="${usersListForLoop}"
+
+if echo "root:$ROOT_PASSWORD" | chpasswd >/dev/null 2>&1; then
+  :
+else
+  echo -e "$ROOT_PASSWORD\\n$ROOT_PASSWORD" | passwd root >/dev/null 2>&1 || true
+fi
+
+passwd -u root >/dev/null 2>&1 || usermod -U root >/dev/null 2>&1 || true
+
+mkdir -p /root/.ssh
+chmod 700 /root/.ssh
+if [ -n "$SSH_KEY" ]; then
+  echo "$SSH_KEY" > /root/.ssh/authorized_keys
+  chmod 600 /root/.ssh/authorized_keys
+  chown root:root /root/.ssh /root/.ssh/authorized_keys
+else
+  chown root:root /root/.ssh
+fi
+
+for u in $USERS; do
+  if [ "$u" = "root" ]; then continue; fi
+  if id "$u" >/dev/null 2>&1; then
+    HOMEDIR="/home/$u"
+    if [ ! -d "$HOMEDIR" ]; then continue; fi
+    mkdir -p "$HOMEDIR/.ssh"
+    if [ -n "$SSH_KEY" ]; then
+      echo "$SSH_KEY" > "$HOMEDIR/.ssh/authorized_keys"
+      chmod 600 "$HOMEDIR/.ssh/authorized_keys"
+    fi
+    chown -R "$u" "$HOMEDIR/.ssh" 2>/dev/null || true
+    chmod 700 "$HOMEDIR/.ssh"
+    echo "$u:$ROOT_PASSWORD" | chpasswd >/dev/null 2>&1 || true
+  fi
+done
+
+SED_BIN="sed"
+SSH_CONFIG="/etc/ssh/sshd_config"
+
+$SED_BIN -i 's/^PermitRootLogin/#PermitRootLogin/g' $SSH_CONFIG 2>/dev/null || true
+$SED_BIN -i 's/^PasswordAuthentication/#PasswordAuthentication/g' $SSH_CONFIG 2>/dev/null || true
+$SED_BIN -i 's/^PubkeyAuthentication/#PubkeyAuthentication/g' $SSH_CONFIG 2>/dev/null || true
+
+if ! grep -q "^Include /etc/ssh/sshd_config.d" $SSH_CONFIG; then
+    $SED_BIN -i "1i Include /etc/ssh/sshd_config.d/*.conf" $SSH_CONFIG 2>/dev/null || true
+fi
+
+echo "PermitRootLogin yes" >> $SSH_CONFIG
+echo "PasswordAuthentication yes" >> $SSH_CONFIG
+echo "PubkeyAuthentication yes" >> $SSH_CONFIG
+
+${restartSshCmd}
+
+exit 0
+`
+}
+
+// ==================== bootcmd 生成 ====================
+
+function getBootcmd(osInfo: OsInfo): string[] {
+  const cmds: string[] = []
+
+  if (osInfo.family === 'alpine') {
+    // 动态获取 IPv4/v6 默认网关并给到默认公共回退 DNS，确立不同网段/纯 v6 下的不报错初始化
+    cmds.push('GW4=$(ip -4 route show default 2>/dev/null | awk \'/default/ {print $3}\' | head -n 1); GW6=$(ip -6 route show default 2>/dev/null | awk \'/default/ {print $3}\' | head -n 1); if [ -n "$GW4" ]; then echo "nameserver $GW4" > /etc/resolv.conf; elif [ -n "$GW6" ]; then echo "nameserver $GW6" > /etc/resolv.conf; else echo -e "nameserver 8.8.8.8\\nnameserver 2001:4860:4860::8888" > /etc/resolv.conf; fi')
+    cmds.push('rc-update add networking boot || true')
+    cmds.push('rc-service networking start 2>/dev/null || true')
+  } else {
+    switch (osInfo.packageManager) {
+      case 'apt':
+        cmds.push('cloud-init-per once apt_update_early apt-get update || true')
+        break
+      case 'dnf':
+        cmds.push('cloud-init-per once dnf_makecache dnf makecache || true')
+        break
+      case 'yum':
+        cmds.push('cloud-init-per once yum_makecache yum makecache || true')
+        break
+      case 'zypper':
+        cmds.push('cloud-init-per once zypper_refresh zypper --non-interactive refresh || true')
+        break
+    }
+  }
+
+  return cmds
+}
+
+// ==================== 网络配置生成 ====================
+
+function getNetworkConfig(net: StaticNetworkConfig | undefined, shouldBlockSharedIpv6OnEth0: boolean): string {
+  if (!net) {
+    if (shouldBlockSharedIpv6OnEth0) {
+      return `version: 1
+config:
+  - type: physical
+    name: ${CONFIG.INTERFACE_NAME}
+    subnets:
+      - type: dhcp
+`
+    }
+    return `version: 1
+config:
+  - type: physical
+    name: ${CONFIG.INTERFACE_NAME}
+    subnets:
+      - type: dhcp
+      - type: dhcp6
+`
+  }
+
+  const subnets: string[] = []
+  const dnsV4 = net.dns || CONFIG.DEFAULT_DNS
+  subnets.push(`      - type: static
+        address: ${net.ipAddress}
+        gateway: ${net.gateway}
+        dns_nameservers:
+${dnsV4.map(d => `          - ${d}`).join('\n')}`)
+
+  // eth0 上的 IPv6 子网配置（仅当 IPv6 地址和网关都绑定在 eth0 上时使用，
+  // 即非双网卡 routed 架构的场景；双网卡时 IPv6 走 eth1）
+  // 注意：当前双网卡架构中，此分支不再为 eth0 添加 IPv6 子网
+  // IPv6 routed 配置已移至下方 eth1 块
+
+  let config = `version: 1
+config:
+  - type: physical
+    name: ${CONFIG.INTERFACE_NAME}
+    subnets:
+${subnets.join('\n')}
+`
+
+  // eth1: IPv6 Routed 配置（双网卡架构：eth0=IPv4 bridged, eth1=IPv6 routed）
+  // 当存在 IPv6 配置时，生成 eth1 的 cloud-init 网络配置
+  // 网关使用 fe80::1（Incus routed 模式的标准链路本地网关）
+  if (net.ipv6Address) {
+    const ipv6Addr = net.ipv6Address.includes('/') ? net.ipv6Address : `${net.ipv6Address}/128`
+    const defaultDnsV6 = ['2606:4700:4700::1111', '2001:4860:4860::8888']
+    const dnsV6 = net.ipv6Dns || defaultDnsV6
+    config += `  - type: physical
+    name: eth1
+    subnets:
+      - type: static
+        address: ${ipv6Addr}
+        gateway: fe80::1
+        dns_nameservers:
+${dnsV6.map(d => `          - ${d}`).join('\n')}
+`
+  }
+
+  return config
+}
+
+// ==================== 主函数 ====================
+
+export function generateContainerConfig(params: IncusConfigParams): IncusConfigResult {
+  const { imageAlias, rootPassword, sshKey, network, extraShellCommands, networkMode } = params
+
+  if (!imageAlias || !rootPassword) throw new Error('Missing params')
+  if (sshKey && !isValidSshKey(sshKey)) throw new Error('Invalid SSH Key')
+
+  const osInfo = detectOsInfo(imageAlias)
+  const isAlpine = osInfo.family === 'alpine'
+  const sshPort = CONFIG.SSH_PORT
+  const commonUsers = osInfo.defaultUsers
+
+  // 1. Users Yaml
+  const usersYaml = commonUsers
+    .map(u => {
+      const lines = [
+        `  - name: ${u}`,
+        `    lock_passwd: false`,
+        `    create_home: true`,
+        `    shell: ${osInfo.defaultShell}`,
+        `    sudo: ALL=(ALL) NOPASSWD:ALL`
+      ]
+      if (sshKey?.trim()) {
+        lines.push(`    ssh_authorized_keys:`, `      - ${sshKey.trim()}`)
+      }
+      return lines.join('\n')
+    })
+    .join('\n')
+
+  // 2. SSH Config
+  const sshdDropInPath = '/etc/ssh/sshd_config.d/50-incus.conf'
+  const sshdDropInContent = [
+    `Port ${sshPort}`,
+    'PermitRootLogin yes',
+    'PasswordAuthentication yes',
+    'PubkeyAuthentication yes'
+  ].join('\n')
+
+  // 3. Scripts
+  const setupScript = generateSetupScript(sshKey, rootPassword, commonUsers, osInfo)
+  const setupCmds = getSetupCommands(osInfo)
+
+  // 4. Runcmd
+  const userCustomCmds = extraShellCommands
+    ? extraShellCommands.split('\n').map(cmd => cmd.trim()).filter(cmd => cmd.length > 0)
+    : []
+
+  const shouldBlockSharedIpv6OnEth0 = networkMode
+    ? !['nat_ipv6_nat', 'ipv6_nat'].includes(networkMode)
+    : Boolean(network?.ipv6Address)
+
+  const routedIpv6GuardCmds = shouldBlockSharedIpv6OnEth0
+    ? [
+        // Routed IPv6 模式下，eth0 只承担 IPv4 NAT。
+        // 某些容器镜像（尤其 Alpine + dhcpcd）在首启/重装后仍可能从 incusbr0 拿到 DHCPv6/RA，
+        // 导致 guest 同时持有桥 NAT IPv6 与 eth1 独立 IPv6，出站源地址选择随机漂移。
+        'mkdir -p /etc/sysctl.d || true',
+        'printf "%s\\n%s\\n%s\\n" "net.ipv6.conf.eth0.disable_ipv6 = 1" "net.ipv6.conf.eth0.accept_ra = 0" "net.ipv6.conf.eth0.autoconf = 0" > /etc/sysctl.d/99-incudal-routed-ipv6.conf',
+        'sysctl -p /etc/sysctl.d/99-incudal-routed-ipv6.conf >/dev/null 2>&1 || true',
+        'ip -6 addr flush dev eth0 scope global >/dev/null 2>&1 || true',
+        'ip -6 route del default dev eth0 >/dev/null 2>&1 || true',
+        // Debian 12 在 routed IPv6 场景下偶发不会稳定保留 eth1 的默认 IPv6 路由，
+        // 显式重设默认路由到 Incus routed 模式的标准网关 fe80::1，避免出现“有 IPv6 地址但无法出站”。
+        'ip -6 route replace default via fe80::1 dev eth1 metric 100 >/dev/null 2>&1 || true'
+      ]
+    : []
+
+  const runcmd = [
+    'mkdir -p /etc/ssh/sshd_config.d || true',
+    ...setupCmds,
+    '/usr/local/bin/incus-setup.sh || true',
+    ...routedIpv6GuardCmds,
+    ...userCustomCmds
+  ]
+
+  // 5. Write Files
+  const packages = getPackagesForOs(osInfo)
+  const packagesYaml = packages.map(p => `  - ${p}`).join('\n')
+
+  const writeFilesYaml = [
+    `  - path: ${sshdDropInPath}`,
+    `    owner: root:root`,
+    `    permissions: '0644'`,
+    `    content: |`,
+    ...sshdDropInContent.split('\n').map(l => `      ${l}`),
+    `  - path: /usr/local/bin/incus-setup.sh`,
+    `    owner: root:root`,
+    `    permissions: '0755'`,
+    `    content: |`,
+    ...setupScript.split('\n').map(l => `      ${l}`)
+  ].join('\n')
+
+  const runcmdYaml = runcmd.map(cmd => `  - ${JSON.stringify(cmd)}`).join('\n')
+  const bootcmdList = getBootcmd(osInfo)
+  const bootcmdSection = bootcmdList.length > 0 ? `bootcmd:\n${bootcmdList.map(cmd => `  - ${cmd}`).join('\n')}\n` : ''
+  const yamlSafePassword = rootPassword.replace(/'/g, "''").replace(/\\/g, '\\\\')
+  const sshPwauth = isAlpine ? 'false' : 'true'
+  const packagesSection = packages.length > 0
+    ? `packages:\n${packagesYaml}\n\n`
+    : ''
+  const chpasswdSection = isAlpine
+    ? ''
+    : `chpasswd:
+  expire: false
+  list: |
+    root:${yamlSafePassword}
+
+`
+
+  // 6. Network Config
+  const networkConfigYaml = getNetworkConfig(network, shouldBlockSharedIpv6OnEth0)
+
+  // 7. Output
+  const cloudConfigYaml = `#cloud-config
+package_update: ${isAlpine ? 'false' : 'true'}
+package_upgrade: false
+timezone: Asia/Shanghai
+
+ssh_pwauth: ${sshPwauth}
+disable_root: false
+
+${packagesSection}${chpasswdSection}users:
+${usersYaml}
+
+write_files:
+${writeFilesYaml}
+
+${bootcmdSection}runcmd:
+${runcmdYaml}
+`
+
+  return {
+    configPayload: {
+      'user.user-data': cloudConfigYaml,
+      'user.network-config': networkConfigYaml
+    },
+    metaData: {
+      sshPort,
+      rootPassword,
+      osFamily: osInfo.family,
+      imageAlias,
+      instanceType: 'container',
+      ipAddress: network?.ipAddress || 'dhcp'
+    }
+  }
+}
diff --git a/server/src/lib/incus-config-generator.ts b/server/src/lib/incus-config-generator.ts
new file mode 100644
index 0000000..4923cfd
--- /dev/null
+++ b/server/src/lib/incus-config-generator.ts
@@ -0,0 +1,56 @@
+/**
+ * incus-config-generator.ts
+ * Incus 配置生成器入口
+ * 根据实例类型路由到对应的生成器
+ */
+
+import { generateContainerConfig, generateRandomPassword as containerGenerateRandomPassword } from './incus-config-container.js'
+import type { IncusConfigParams, IncusConfigResult, IncusConfigMetaData } from './incus-config-container.js'
+import { generateVmConfig } from './incus-config-vm.js'
+import type { IncusConfigParams as VmConfigParams } from './incus-config-vm.js'
+
+// 重新导出类型（保持兼容）
+export type { IncusConfigParams, IncusConfigResult, IncusConfigMetaData }
+
+// 重新导出工具函数（保持兼容）
+export const generateRandomPassword = containerGenerateRandomPassword
+
+// SSH 端口固定为 22
+const SSH_PORT = 22
+
+/**
+ * 生成 Incus 实例配置
+ * 根据 type 参数自动路由到容器或 VM 配置生成器
+ * 
+ * @param params 配置参数
+ * @returns 配置结果
+ */
+export function generateIncusConfig(params: IncusConfigParams): IncusConfigResult {
+  // VM 路由
+  if (params.type === 'virtual-machine') {
+    const vmParams: VmConfigParams = {
+      instanceName: params.instanceName,
+      imageAlias: params.imageAlias,
+      rootPassword: params.rootPassword,
+      sshKey: params.sshKey,
+      network: params.network,
+      extraShellCommands: params.extraShellCommands,
+      networkMode: params.networkMode
+    }
+    const vmResult = generateVmConfig(vmParams)
+    return {
+      configPayload: vmResult.configPayload,
+      metaData: {
+        sshPort: SSH_PORT,
+        rootPassword: params.rootPassword,
+        osFamily: 'linux',
+        imageAlias: params.imageAlias,
+        instanceType: 'virtual-machine',
+        ipAddress: params.network?.ipAddress || 'dhcp'
+      }
+    }
+  }
+  
+  // 容器路由
+  return generateContainerConfig(params)
+}
diff --git a/server/src/lib/incus-config-vm.ts b/server/src/lib/incus-config-vm.ts
new file mode 100644
index 0000000..9c19470
--- /dev/null
+++ b/server/src/lib/incus-config-vm.ts
@@ -0,0 +1,656 @@
+import { generateVmNicMacs, type VmNicMacs } from './vm-network-identifiers.js'
+
+// ================= 类型定义 =================
+
+interface StaticNetworkConfig {
+  ipAddress: string
+  gateway: string
+  dns?: string[]
+  ipv6Address?: string
+  ipv6Gateway?: string
+  ipv6Dns?: string[]
+}
+
+export interface IncusConfigParams {
+  instanceName: string
+  imageAlias: string
+  rootPassword: string
+  sshKey?: string
+  network?: StaticNetworkConfig
+  extraShellCommands?: string
+  instanceIdSeed?: string
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+}
+
+export interface IncusConfigResult {
+  configPayload: {
+    'user.user-data': string
+    'user.network-config': string
+  }
+}
+
+type VmOsFamily = 'ubuntu' | 'debian' | 'rhel' | 'rhel8' | 'alpine' | 'linux'
+type PackageManager = 'apt' | 'dnf' | 'yum' | 'apk'
+type InitSystem = 'systemd' | 'openrc'
+
+interface VmOsInfo {
+  family: VmOsFamily
+  packageManager: PackageManager
+  initSystem: InitSystem
+  sshServiceName: 'ssh' | 'sshd'
+  defaultShell: string
+  defaultUsers: string[]
+}
+
+// 核心修复：DNS 指向网桥 dnsmasq 网关（同 LXC），支持纯 IPv6 宿主机的 DNS64 转发分流
+const DEFAULT_DNS_V4 = ['10.10.0.1']
+const DEFAULT_DNS_V6 = ['2606:4700:4700::1111', '2001:4860:4860::8888']
+const DEFAULT_IPV6_GATEWAY = 'fe80::1'
+const SSHD_PRIMARY_DROPIN_PATH = '/etc/ssh/sshd_config.d/99-incudal-force.conf'
+const SSHD_LEGACY_DROPIN_PATH = '/etc/ssh/sshd_config.d/00-incudal-auth.conf'
+
+// ================= 工具函数 =================
+
+function indentString(str: string, count: number): string {
+  const indent = ' '.repeat(count)
+  return str.split('\n').map(line => line ? indent + line : line).join('\n')
+}
+
+function escapeForShellSingleQuote(str: string): string {
+  return str.replace(/'/g, "'\"'\"'")
+}
+
+function escapeForShellDoubleQuote(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/\$/g, '\\$')
+    .replace(/`/g, '\\`')
+    .replace(/"/g, '\\"')
+}
+
+function escapeForYamlSingleQuote(str: string): string {
+  return str.replace(/'/g, "''")
+}
+
+function isRhel8Series(alias: string): boolean {
+  return /alma.*8|rocky.*8|oracle.*8|centos.*8|rhel.*8/i.test(alias)
+}
+
+function uniqueUsers(users: string[]): string[] {
+  return [...new Set(users.filter(Boolean))]
+}
+
+function detectVmOsInfo(imageAlias: string): VmOsInfo {
+  const alias = imageAlias.toLowerCase()
+
+  if (alias.includes('ubuntu')) {
+    return {
+      family: 'ubuntu',
+      packageManager: 'apt',
+      initSystem: 'systemd',
+      sshServiceName: 'ssh',
+      defaultShell: '/bin/bash',
+      defaultUsers: ['root', 'ubuntu']
+    }
+  }
+
+  if (alias.includes('debian') || alias.includes('kali')) {
+    return {
+      family: 'debian',
+      packageManager: 'apt',
+      initSystem: 'systemd',
+      sshServiceName: 'ssh',
+      defaultShell: '/bin/bash',
+      defaultUsers: ['root', 'debian']
+    }
+  }
+
+  if (alias.includes('alpine')) {
+    return {
+      family: 'alpine',
+      packageManager: 'apk',
+      initSystem: 'openrc',
+      sshServiceName: 'sshd',
+      defaultShell: '/bin/ash',
+      defaultUsers: ['root']
+    }
+  }
+
+  if (alias.includes('alma') || alias.includes('rocky') || alias.includes('oracle') || alias.includes('centos') || alias.includes('rhel') || alias.includes('fedora')) {
+    const detectedUser = alias.includes('alma')
+      ? 'almalinux'
+      : alias.includes('rocky')
+        ? 'rocky'
+        : alias.includes('oracle')
+          ? 'opc'
+          : alias.includes('centos')
+            ? 'centos'
+            : alias.includes('fedora')
+              ? 'fedora'
+              : 'cloud-user'
+
+    return {
+      family: isRhel8Series(alias) ? 'rhel8' : 'rhel',
+      packageManager: isRhel8Series(alias) ? 'yum' : 'dnf',
+      initSystem: 'systemd',
+      sshServiceName: 'sshd',
+      defaultShell: '/bin/bash',
+      defaultUsers: uniqueUsers(['root', 'cloud-user', detectedUser])
+    }
+  }
+
+  return {
+    family: 'linux',
+    packageManager: 'apt',
+    initSystem: 'systemd',
+    sshServiceName: 'sshd',
+    defaultShell: '/bin/bash',
+    defaultUsers: ['root']
+  }
+}
+
+function normalizeIpv6Address(address: string): string {
+  const trimmed = address.trim()
+  return trimmed.includes('/') ? trimmed : `${trimmed}/128`
+}
+
+function getPackageInstallCommand(osInfo: VmOsInfo): string {
+  switch (osInfo.packageManager) {
+    case 'apt':
+      return 'retry_cmd "DEBIAN_FRONTEND=noninteractive apt-get update" && retry_cmd "DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends qemu-guest-agent openssh-server curl ca-certificates"'
+    case 'dnf':
+      return 'retry_cmd "dnf install -y qemu-guest-agent openssh-server curl ca-certificates"'
+    case 'yum':
+      return 'retry_cmd "yum install -y qemu-guest-agent openssh-server curl ca-certificates"'
+    case 'apk':
+      return 'retry_cmd "apk update" && retry_cmd "apk add --no-cache qemu-guest-agent openssh-server openssh-keygen curl ca-certificates shadow" || retry_cmd "apk add --no-cache qemu-guest-agent openssh curl ca-certificates shadow"'
+    default:
+      return ':'
+  }
+}
+
+function getCloudInitPackages(osInfo: VmOsInfo): string[] {
+  switch (osInfo.packageManager) {
+    case 'apt':
+      return ['qemu-guest-agent', 'openssh-server', 'curl', 'ca-certificates']
+    case 'dnf':
+    case 'yum':
+      return ['qemu-guest-agent', 'openssh-server', 'curl', 'ca-certificates']
+    default:
+      return []
+  }
+}
+
+function getSshdDropInContent(osInfo: VmOsInfo): string {
+  const lines = [
+    'PermitRootLogin yes',
+    'PasswordAuthentication yes',
+    'PubkeyAuthentication yes',
+    'ChallengeResponseAuthentication no'
+  ]
+
+  if (osInfo.family !== 'alpine') {
+    lines.push('UsePAM yes')
+  }
+
+  return lines.join('\n')
+}
+
+function getNetworkMatchYaml(macAddress: string): string {
+  return `      macaddress: "${macAddress.toLowerCase()}"`
+}
+
+function generateSetupScript(params: IncusConfigParams, osInfo: VmOsInfo): string {
+  const escapedKey = escapeForShellDoubleQuote(params.sshKey || '')
+  const escapedPassword = escapeForShellSingleQuote(params.rootPassword)
+  const usersList = osInfo.defaultUsers.join(' ')
+  const sshServiceName = osInfo.sshServiceName
+  const packageInstallCommand = getPackageInstallCommand(osInfo)
+  const sshdPrimaryDropInPath = SSHD_PRIMARY_DROPIN_PATH
+  const sshdLegacyDropInPath = SSHD_LEGACY_DROPIN_PATH
+
+  const extraCommands = params.extraShellCommands?.trim() || ': # No extra commands'
+  const sshdDropInContent = getSshdDropInContent(osInfo)
+  const hasRoutedIpv6 = Boolean(params.network?.ipv6Address)
+  const escapedPrimaryIpv6 = params.network?.ipv6Address
+    ? escapeForShellDoubleQuote(params.network.ipv6Address.trim().split('/')[0])
+    : ''
+
+  const serialConsoleCommands = osInfo.initSystem === 'openrc'
+    ? `if [ -f /etc/inittab ] && ! grep -q '^ttyS0::respawn:/sbin/getty -L ttyS0 115200 vt100$' /etc/inittab 2>/dev/null; then
+  echo 'ttyS0::respawn:/sbin/getty -L ttyS0 115200 vt100' >> /etc/inittab
+fi
+kill -HUP 1 2>/dev/null || true`
+    : `systemctl enable serial-getty@ttyS0.service || true
+systemctl restart serial-getty@ttyS0.service || true`
+
+  const serviceEnableCommands = osInfo.initSystem === 'openrc'
+    ? `[ -f /etc/init.d/${sshServiceName} ] && rc-update add ${sshServiceName} default 2>/dev/null || true
+[ -f /etc/init.d/${sshServiceName} ] && rc-service ${sshServiceName} restart 2>/dev/null || /etc/init.d/${sshServiceName} restart 2>/dev/null || /etc/init.d/${sshServiceName} start 2>/dev/null || true
+[ -f /etc/init.d/qemu-guest-agent ] && rc-update add qemu-guest-agent default 2>/dev/null || true
+[ -f /etc/init.d/qemu-guest-agent ] && rc-service qemu-guest-agent restart 2>/dev/null || /etc/init.d/qemu-guest-agent restart 2>/dev/null || /etc/init.d/qemu-guest-agent start 2>/dev/null || true`
+    : `systemctl daemon-reload || true
+systemctl unmask ${sshServiceName} || true
+systemctl enable ${sshServiceName} 2>/dev/null || true
+systemctl restart ${sshServiceName} 2>/dev/null || true
+systemctl enable qemu-guest-agent 2>/dev/null || true
+systemctl restart qemu-guest-agent 2>/dev/null || true`
+
+  return `#!/bin/sh
+LOG_FILE="/var/log/incudal-vm-setup.log"
+exec >>"$LOG_FILE" 2>&1
+# 不启用 shell trace，避免 ROOT_PASSWORD/SSH_KEY 写入 guest 日志
+
+SSH_KEY="${escapedKey}"
+ROOT_PASSWORD='${escapedPassword}'
+DEFAULT_USERS="${usersList}"
+SSH_SERVICE="${sshServiceName}"
+
+retry_cmd() {
+  command="$1"
+  attempt=0
+  while [ "$attempt" -lt 20 ]; do
+    if sh -c "$command"; then
+      return 0
+    fi
+    attempt=$((attempt + 1))
+    sleep 3
+  done
+  return 1
+}
+
+ensure_dns_fallback() {
+  if [ ! -s /etc/resolv.conf ] || ! grep -q '^nameserver ' /etc/resolv.conf 2>/dev/null; then
+    {
+      # DNS 指向网桥 dnsmasq，兼容纯 IPv6 宿主机
+      printf '%s\\n' 'nameserver 10.10.0.1'
+    } > /etc/resolv.conf
+  fi
+}
+
+wait_for_network() {
+  attempt=0
+  while [ "$attempt" -lt 30 ]; do
+    if ip route show default >/dev/null 2>&1; then
+      return 0
+    fi
+    if ping -c 1 -W 1 1.1.1.1 >/dev/null 2>&1; then
+      return 0
+    fi
+    attempt=$((attempt + 1))
+    sleep 2
+  done
+  return 1
+}
+
+user_home_dir() {
+  user="$1"
+  if [ "$user" = "root" ]; then
+    echo "/root"
+    return 0
+  fi
+  awk -F: -v target="$user" '$1 == target { print $6; exit }' /etc/passwd 2>/dev/null
+}
+
+set_password() {
+  user="$1"
+  id "$user" >/dev/null 2>&1 || return 0
+  echo "$user:$ROOT_PASSWORD" | chpasswd >/dev/null 2>&1 || true
+  passwd -u "$user" >/dev/null 2>&1 || usermod -U "$user" >/dev/null 2>&1 || true
+}
+
+set_authorized_key() {
+  [ -n "$SSH_KEY" ] || return 0
+  user="$1"
+  id "$user" >/dev/null 2>&1 || return 0
+
+  home_dir="$(user_home_dir "$user")"
+  [ -n "$home_dir" ] || return 0
+
+  mkdir -p "$home_dir/.ssh"
+  chmod 700 "$home_dir/.ssh"
+  printf '%s\\n' "$SSH_KEY" > "$home_dir/.ssh/authorized_keys"
+  chmod 600 "$home_dir/.ssh/authorized_keys"
+
+  if [ "$user" = "root" ]; then
+    chown root:root "$home_dir/.ssh" "$home_dir/.ssh/authorized_keys" 2>/dev/null || true
+  else
+    chown -R "$user":"$user" "$home_dir/.ssh" 2>/dev/null || true
+  fi
+}
+
+ensure_include_directive() {
+  config_path="/etc/ssh/sshd_config"
+  [ -f "$config_path" ] || return 0
+
+  grep -q '^Include /etc/ssh/sshd_config.d/\\*\\.conf$' "$config_path" && return 0
+
+  tmp_path="$config_path.incudal.tmp"
+  {
+    printf '%s\\n' 'Include /etc/ssh/sshd_config.d/*.conf'
+    cat "$config_path"
+  } > "$tmp_path" && mv "$tmp_path" "$config_path"
+}
+
+write_sshd_dropin() {
+  mkdir -p /etc/ssh/sshd_config.d
+  ensure_include_directive
+  # 暴力清理各大云系统的防修改枷锁文件
+  rm -f "${sshdLegacyDropInPath}" 2>/dev/null || true
+  rm -f /etc/ssh/sshd_config.d/50-cloud-init.conf 2>/dev/null || true
+  rm -f /etc/ssh/sshd_config.d/60-cloudimg-settings.conf 2>/dev/null || true
+  # 以 99 结尾占据排序优势
+  cat > "${sshdPrimaryDropInPath}" <<'EOF'
+${sshdDropInContent}
+EOF
+}
+
+update_sshd_main_config() {
+  config_path="/etc/ssh/sshd_config"
+  [ -f "$config_path" ] || return 0
+
+  # 极其暴力的 SED：不管前面有没有注释，只要包含这两个关键句语意，统统连根铲除或覆盖
+  sed -i -E 's/^[#[:space:]]*PermitRootLogin.*/PermitRootLogin yes/' "$config_path" 2>/dev/null || true
+  sed -i -E 's/^[#[:space:]]*PasswordAuthentication.*/PasswordAuthentication yes/' "$config_path" 2>/dev/null || true
+  sed -i -E 's/^[#[:space:]]*PubkeyAuthentication.*/PubkeyAuthentication yes/' "$config_path" 2>/dev/null || true
+  sed -i -E 's/^[#[:space:]]*ChallengeResponseAuthentication.*/ChallengeResponseAuthentication no/' "$config_path" 2>/dev/null || true
+
+  # 有些极端的镜像会直接把 PasswordAuthentication no 写好几遍，甚至藏在别的 drop-in 里。
+  # 我们强行剔除其他零散文件里的阻碍
+  if ls /etc/ssh/sshd_config.d/*.conf 1> /dev/null 2>&1; then
+      for f in /etc/ssh/sshd_config.d/*.conf; do
+          if [ "$f" != "${sshdPrimaryDropInPath}" ]; then
+              sed -i -E 's/^[#[:space:]]*(PasswordAuthentication|PermitRootLogin)[[:space:]]+no/# &/' "$f" 2>/dev/null || true
+          fi
+      done
+  fi
+
+  grep -q '^PermitRootLogin ' "$config_path" || printf '\\n%s\\n' 'PermitRootLogin yes' >> "$config_path"
+  grep -q '^PasswordAuthentication ' "$config_path" || printf '%s\\n' 'PasswordAuthentication yes' >> "$config_path"
+  grep -q '^PubkeyAuthentication ' "$config_path" || printf '%s\\n' 'PubkeyAuthentication yes' >> "$config_path"
+  grep -q '^ChallengeResponseAuthentication ' "$config_path" || printf '%s\\n' 'ChallengeResponseAuthentication no' >> "$config_path"
+
+  # 无论如何暴力统一注入内置 internal-sftp 子系统来抵抗外部缺失包
+  sed -i -E 's/^[#[:space:]]*Subsystem[[:space:]]+sftp.*/Subsystem sftp internal-sftp/' "$config_path" 2>/dev/null || true
+  grep -q '^Subsystem sftp ' "$config_path" || printf '\\n%s\\n' 'Subsystem sftp internal-sftp' >> "$config_path"
+
+  if [ "${osInfo.family}" != "alpine" ]; then
+    sed -i -E 's/^[#[:space:]]*UsePAM.*/UsePAM yes/' "$config_path" 2>/dev/null || true
+    grep -q '^UsePAM ' "$config_path" || printf '%s\\n' 'UsePAM yes' >> "$config_path"
+  fi
+}
+
+disable_firewall() {
+  if command -v ufw >/dev/null 2>&1; then
+    ufw disable || true
+  fi
+
+  if command -v systemctl >/dev/null 2>&1; then
+    systemctl disable --now firewalld 2>/dev/null || true
+  fi
+}
+
+echo "Installing base packages..."
+ensure_dns_fallback
+wait_for_network || true
+${packageInstallCommand} || true
+
+command -v update-ca-certificates >/dev/null 2>&1 && update-ca-certificates || true
+command -v ssh-keygen >/dev/null 2>&1 && ssh-keygen -A || true
+
+echo "Configuring SSH access..."
+disable_firewall
+write_sshd_dropin
+update_sshd_main_config
+
+for user in $DEFAULT_USERS; do
+  set_password "$user"
+  set_authorized_key "$user"
+done
+
+if command -v restorecon >/dev/null 2>&1; then
+  restorecon -RF /root/.ssh /etc/ssh /home 2>/dev/null || true
+fi
+
+echo "Enabling serial console..."
+${serialConsoleCommands}
+
+echo "Enabling guest services..."
+${serviceEnableCommands}
+
+echo "Installing persistent IPv4-only guard for primary NIC..."
+cat > /usr/local/bin/incudal-ipv4-only.sh <<'EOF'
+#!/bin/sh
+set -e
+
+PRIMARY_IFACE="$(ip -4 route show default 2>/dev/null | awk '/default/ {print $5; exit}')"
+if [ -z "$PRIMARY_IFACE" ]; then
+  PRIMARY_IFACE="$(ip route show default 2>/dev/null | awk '/default/ {for(i=1;i<=NF;i++) if($i=="dev") {print $(i+1); exit}}')"
+fi
+if [ -z "$PRIMARY_IFACE" ]; then
+  PRIMARY_IFACE="eth0"
+fi
+
+mkdir -p /etc/sysctl.d
+cat > /etc/sysctl.d/99-incudal-ipv4-only.conf <<CONF
+net.ipv6.conf.\${PRIMARY_IFACE}.disable_ipv6 = 1
+net.ipv6.conf.\${PRIMARY_IFACE}.accept_ra = 0
+net.ipv6.conf.\${PRIMARY_IFACE}.autoconf = 0
+CONF
+
+sysctl -p /etc/sysctl.d/99-incudal-ipv4-only.conf >/dev/null 2>&1 || true
+ip -6 addr flush dev "\${PRIMARY_IFACE}" scope global >/dev/null 2>&1 || true
+ip -6 route del default dev "\${PRIMARY_IFACE}" >/dev/null 2>&1 || true
+EOF
+chmod +x /usr/local/bin/incudal-ipv4-only.sh
+/usr/local/bin/incudal-ipv4-only.sh || true
+
+if command -v systemctl >/dev/null 2>&1; then
+  cat > /etc/systemd/system/incudal-ipv4-only.service <<'EOF'
+[Unit]
+Description=Incudal primary NIC IPv4-only guard
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=oneshot
+ExecStart=/usr/local/bin/incudal-ipv4-only.sh
+RemainAfterExit=yes
+
+[Install]
+WantedBy=multi-user.target
+EOF
+  systemctl daemon-reload || true
+  systemctl enable incudal-ipv4-only.service || true
+  systemctl start incudal-ipv4-only.service || true
+elif [ -d /etc/local.d ]; then
+  cat > /etc/local.d/incudal-ipv4-only.start <<'EOF'
+#!/bin/sh
+/usr/local/bin/incudal-ipv4-only.sh || true
+EOF
+  chmod +x /etc/local.d/incudal-ipv4-only.start
+  rc-update add local default 2>/dev/null || true
+  /etc/local.d/incudal-ipv4-only.start || true
+fi
+
+${hasRoutedIpv6 ? `echo "Installing persistent IPv6 default-route guard..."
+cat > /usr/local/bin/incudal-ipv6-route-guard.sh <<'EOF'
+#!/bin/sh
+set -e
+
+TARGET_IPV6="${escapedPrimaryIpv6}"
+if [ -z "$TARGET_IPV6" ]; then
+  exit 0
+fi
+
+IPV6_IFACE="$(ip -6 -o addr show scope global 2>/dev/null | awk -v target="$TARGET_IPV6" '$4 ~ ("^" target "/") {print $2; exit}')"
+if [ -z "$IPV6_IFACE" ]; then
+  exit 0
+fi
+
+if ! ip -6 route show default 2>/dev/null | grep -q "dev \${IPV6_IFACE}"; then
+  ip -6 route replace default via fe80::1 dev "\${IPV6_IFACE}" metric 100 onlink >/dev/null 2>&1 || true
+fi
+EOF
+chmod +x /usr/local/bin/incudal-ipv6-route-guard.sh
+/usr/local/bin/incudal-ipv6-route-guard.sh || true
+
+if command -v systemctl >/dev/null 2>&1; then
+  cat > /etc/systemd/system/incudal-ipv6-route-guard.service <<'EOF'
+[Unit]
+Description=Incudal IPv6 routed default-route guard
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=oneshot
+ExecStart=/usr/local/bin/incudal-ipv6-route-guard.sh
+RemainAfterExit=yes
+
+[Install]
+WantedBy=multi-user.target
+EOF
+  systemctl daemon-reload || true
+  systemctl enable incudal-ipv6-route-guard.service || true
+  systemctl start incudal-ipv6-route-guard.service || true
+elif [ -d /etc/local.d ]; then
+  cat > /etc/local.d/incudal-ipv6-route-guard.start <<'EOF'
+#!/bin/sh
+/usr/local/bin/incudal-ipv6-route-guard.sh || true
+EOF
+  chmod +x /etc/local.d/incudal-ipv6-route-guard.start
+  rc-update add local default 2>/dev/null || true
+  /etc/local.d/incudal-ipv6-route-guard.start || true
+fi
+` : ''}
+
+echo "Running user custom commands..."
+${extraCommands}
+`
+}
+
+// ================= cloud-init: user-data =================
+
+function generateUserData(params: IncusConfigParams, osInfo: VmOsInfo): string {
+  const setupScriptContent = generateSetupScript(params, osInfo)
+  const yamlSafePassword = escapeForYamlSingleQuote(params.rootPassword)
+  const packages = getCloudInitPackages(osInfo)
+  const packagesSection = packages.length > 0
+    ? `packages:\n${packages.map(pkg => `  - ${pkg}`).join('\n')}\n\n`
+    : ''
+  const sshKeySection = params.sshKey?.trim()
+    ? `    ssh_authorized_keys:\n      - ${params.sshKey}\n`
+    : ''
+
+  return `#cloud-config
+package_update: ${packages.length > 0 ? 'true' : 'false'}
+package_upgrade: false
+hostname: ${params.instanceName}
+manage_etc_hosts: true
+
+${packagesSection}users:
+  - default
+  - name: root
+    lock_passwd: false
+    shell: ${osInfo.defaultShell}
+${sshKeySection}
+chpasswd:
+  expire: false
+  list:
+    - 'root:${yamlSafePassword}'
+
+ssh_pwauth: true
+disable_root: false
+
+write_files:
+  - path: /root/incudal-vm-setup.sh
+    permissions: '0755'
+    owner: root:root
+    content: |
+${indentString(setupScriptContent, 6)}
+
+runcmd:
+  - [ "/bin/sh", "-c", "/root/incudal-vm-setup.sh" ]
+`
+}
+
+// ================= cloud-init: network-config =================
+
+function generateDhcpNetworkConfig(nicMacs: VmNicMacs): string {
+  return `version: 2
+ethernets:
+  incus_eth0:
+    match:
+${getNetworkMatchYaml(nicMacs.eth0)}
+    dhcp4: true
+    dhcp6: false
+    accept-ra: false
+    link-local: [ ipv4 ]
+`
+}
+
+function generateNetworkConfig(net: StaticNetworkConfig | undefined, nicMacs: VmNicMacs): string {
+  if (!net?.ipAddress || !net.gateway) {
+    return generateDhcpNetworkConfig(nicMacs)
+  }
+
+  const dnsV4 = net.dns && net.dns.length > 0 ? net.dns : DEFAULT_DNS_V4
+  const dnsV6 = net.ipv6Dns && net.ipv6Dns.length > 0 ? net.ipv6Dns : DEFAULT_DNS_V6
+
+  const ipv4Section = `  incus_eth0:
+    match:
+${getNetworkMatchYaml(nicMacs.eth0)}
+    dhcp4: false
+    dhcp6: false
+    accept-ra: false
+    link-local: [ ipv4 ]
+    addresses:
+      - ${net.ipAddress}
+    gateway4: ${net.gateway}
+    nameservers:
+      addresses:
+${dnsV4.map(dns => `        - ${dns}`).join('\n')}`
+
+  if (!net.ipv6Address) {
+    return `version: 2
+ethernets:
+${ipv4Section}
+`
+  }
+
+  const ipv6Section = `  incus_eth1:
+    match:
+${getNetworkMatchYaml(nicMacs.eth1)}
+    dhcp4: false
+    dhcp6: false
+    accept-ra: false
+    addresses:
+      - ${normalizeIpv6Address(net.ipv6Address)}
+    routes:
+      - to: ::/0
+        via: ${DEFAULT_IPV6_GATEWAY}
+        on-link: true
+    nameservers:
+      addresses:
+${dnsV6.map(dns => `        - ${dns}`).join('\n')}`
+
+  return `version: 2
+ethernets:
+${ipv4Section}
+${ipv6Section}
+`
+}
+
+// ================= 主入口 =================
+
+export function generateVmConfig(params: IncusConfigParams): IncusConfigResult {
+  const osInfo = detectVmOsInfo(params.imageAlias)
+  const nicMacs = generateVmNicMacs(params.instanceIdSeed || params.instanceName)
+
+  return {
+    configPayload: {
+      'user.user-data': generateUserData(params, osInfo),
+      'user.network-config': generateNetworkConfig(params.network, nicMacs)
+    }
+  }
+}
diff --git a/server/src/lib/incus/host-health.ts b/server/src/lib/incus/host-health.ts
new file mode 100644
index 0000000..bfb6558
--- /dev/null
+++ b/server/src/lib/incus/host-health.ts
@@ -0,0 +1,147 @@
+/**
+ * 统一宿主机健康状态管理
+ * 
+ * 整合 status-scheduler.ts 和 incus-pool.ts 的健康状态追踪
+ * 提供统一的接口供各模块使用
+ */
+
+interface HostHealth {
+  lastResponseTime: number  // 最近响应时间 (ms)
+  errorCount: number        // 连续错误次数
+  lastCheck: number         // 最后检查时间戳
+  lastSuccess: number       // 最后成功时间戳
+}
+
+// 统一的健康状态缓存
+const hostHealthCache = new Map<number, HostHealth>()
+
+// 配置常量
+const ERROR_THRESHOLD = 3           // 连续错误阈值
+const RECOVERY_COOLDOWN_MS = 5 * 60 * 1000  // 5分钟恢复冷却期
+
+/**
+ * 检查宿主机是否健康
+ */
+export function isHostHealthy(hostId: number): boolean {
+  const health = hostHealthCache.get(hostId)
+  if (!health) return true
+
+  // 连续错误超过阈值，认为不健康
+  if (health.errorCount >= ERROR_THRESHOLD) {
+    // 冷却期后重试
+    if (Date.now() - health.lastCheck > RECOVERY_COOLDOWN_MS) {
+      health.errorCount = 0
+      return true
+    }
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 记录成功操作
+ */
+export function recordHostSuccess(hostId: number, responseTimeMs: number): void {
+  const now = Date.now()
+  const health = hostHealthCache.get(hostId) || {
+    lastResponseTime: 0,
+    errorCount: 0,
+    lastCheck: now,
+    lastSuccess: now
+  }
+
+  health.lastResponseTime = responseTimeMs
+  health.errorCount = 0
+  health.lastCheck = now
+  health.lastSuccess = now
+
+  hostHealthCache.set(hostId, health)
+}
+
+/**
+ * 记录失败操作
+ */
+export function recordHostError(hostId: number): void {
+  const now = Date.now()
+  const health = hostHealthCache.get(hostId) || {
+    lastResponseTime: 0,
+    errorCount: 0,
+    lastCheck: now,
+    lastSuccess: 0
+  }
+
+  health.errorCount++
+  health.lastCheck = now
+
+  hostHealthCache.set(hostId, health)
+}
+
+/**
+ * 获取宿主机健康状态
+ */
+export function getHostHealth(hostId: number): HostHealth | undefined {
+  return hostHealthCache.get(hostId)
+}
+
+/**
+ * 获取所有宿主机健康状态（用于监控）
+ */
+export function getAllHostHealth(): Map<number, HostHealth> {
+  return new Map(hostHealthCache)
+}
+
+/**
+ * 获取不健康的宿主机列表
+ */
+export function getUnhealthyHosts(): number[] {
+  const unhealthy: number[] = []
+  for (const [hostId, health] of hostHealthCache) {
+    if (health.errorCount >= ERROR_THRESHOLD) {
+      unhealthy.push(hostId)
+    }
+  }
+  return unhealthy
+}
+
+/**
+ * 清除宿主机健康状态（宿主机被删除时调用）
+ */
+export function clearHostHealth(hostId: number): void {
+  hostHealthCache.delete(hostId)
+}
+
+/**
+ * 获取健康状态摘要（用于监控）
+ */
+export function getHealthSummary(): {
+  totalHosts: number
+  healthyHosts: number
+  unhealthyHosts: number
+  avgResponseTime: number
+} {
+  let healthyCount = 0
+  let unhealthyCount = 0
+  let totalResponseTime = 0
+  let responseCount = 0
+
+  for (const health of hostHealthCache.values()) {
+    if (health.errorCount >= ERROR_THRESHOLD) {
+      unhealthyCount++
+    } else {
+      healthyCount++
+    }
+    
+    if (health.lastResponseTime > 0) {
+      totalResponseTime += health.lastResponseTime
+      responseCount++
+    }
+  }
+
+  return {
+    totalHosts: hostHealthCache.size,
+    healthyHosts: healthyCount,
+    unhealthyHosts: unhealthyCount,
+    avgResponseTime: responseCount > 0 ? Math.round(totalResponseTime / responseCount) : 0
+  }
+}
diff --git a/server/src/lib/incus/incus-backups.ts b/server/src/lib/incus/incus-backups.ts
new file mode 100644
index 0000000..7fa2584
--- /dev/null
+++ b/server/src/lib/incus/incus-backups.ts
@@ -0,0 +1,176 @@
+/**
+ * Incus 备份管理
+ */
+
+import type { IncusClient } from './incus-client.js'
+import type { IncusBackup, CreateBackupOptions } from '../../types/incus.js'
+
+/**
+ * 获取实例的备份列表
+ */
+export async function listBackups(client: IncusClient, instanceName: string): Promise<IncusBackup[]> {
+  return client.request<IncusBackup[]>('GET', `/1.0/instances/${instanceName}/backups`)
+}
+
+/**
+ * 获取备份详情
+ */
+export async function getBackup(
+  client: IncusClient,
+  instanceName: string,
+  backupName: string
+): Promise<IncusBackup> {
+  return client.request<IncusBackup>(
+    'GET',
+    `/1.0/instances/${instanceName}/backups/${backupName}`
+  )
+}
+
+/**
+ * 创建备份
+ */
+export async function createBackup(
+  client: IncusClient,
+  instanceName: string,
+  backupName: string,
+  options: CreateBackupOptions = {}
+): Promise<unknown> {
+  return client.request('POST', `/1.0/instances/${instanceName}/backups`, {
+    name: backupName,
+    instance_only: options.instanceOnly !== false, // 默认不包含快照
+    optimized_storage: options.optimizedStorage !== false, // 默认优化存储
+    compression_algorithm: options.compression || 'gzip'
+  })
+}
+
+/**
+ * 删除备份
+ */
+export async function deleteBackup(
+  client: IncusClient,
+  instanceName: string,
+  backupName: string
+): Promise<unknown> {
+  return client.request('DELETE', `/1.0/instances/${instanceName}/backups/${backupName}`)
+}
+
+/**
+ * 导出备份（下载）
+ * 返回备份文件的 URL
+ */
+export function getBackupExportUrl(
+  client: IncusClient,
+  instanceName: string,
+  backupName: string
+): string {
+  return `${client.baseUrl}/1.0/instances/${instanceName}/backups/${backupName}/export`
+}
+
+/**
+ * 获取备份导出流
+ * 用于流式传输备份文件到客户端
+ * 备份文件可能很大，需要更长的超时时间
+ */
+export async function getBackupExportStream(
+  client: IncusClient,
+  instanceName: string,
+  backupName: string
+): Promise<{ stream: ReadableStream<Uint8Array>; contentLength?: number }> {
+  if (!client.agent) {
+    throw new Error('Incus 客户端未连接')
+  }
+
+  const { Agent, request } = await import('undici')
+  const { readFileSync } = await import('fs')
+  const url = `${client.baseUrl}/1.0/instances/${instanceName}/backups/${backupName}/export`
+
+  // 为大文件传输创建专用 Agent，设置更长的超时
+  // 连接超时 60 秒，无 body 超时（流式传输）
+  let exportAgent: InstanceType<typeof Agent> | null = null
+
+  try {
+    // 读取证书（从 client 获取路径）
+    if (!client.certPath || !client.keyPath) {
+      throw new Error('Certificate path not configured')
+    }
+
+    const cert = readFileSync(client.certPath)
+    const key = readFileSync(client.keyPath)
+
+    exportAgent = new Agent({
+      connect: {
+        cert,
+        key,
+        rejectUnauthorized: false,
+        timeout: 60000 // 连接超时 60 秒
+      },
+      bodyTimeout: 0, // 禁用 body 超时，允许长时间传输
+      headersTimeout: 60000 // headers 超时 60 秒
+    })
+
+    const response = await request(url, {
+      method: 'GET',
+      dispatcher: exportAgent
+    })
+
+    if (response.statusCode !== 200) {
+      const text = await response.body.text()
+      await exportAgent.close()
+      throw new Error(`导出备份失败: ${text || response.statusCode}`)
+    }
+
+    // 获取 Content-Length（如果有）
+    const contentLengthHeader = response.headers['content-length']
+    const contentLength = contentLengthHeader ? parseInt(String(contentLengthHeader), 10) : undefined
+
+    // 保存 agent 引用以便在流结束时关闭
+    const agentToClose = exportAgent
+
+    // 将 undici 的 body 转换为 Web ReadableStream
+    const webStream = new ReadableStream<Uint8Array>({
+      async start(controller) {
+        try {
+          for await (const chunk of response.body) {
+            controller.enqueue(chunk)
+          }
+          controller.close()
+        } catch (err) {
+          controller.error(err)
+        } finally {
+          // 流结束后关闭专用 agent
+          await agentToClose.close().catch(() => { })
+        }
+      },
+      cancel() {
+        // 流被取消时也要关闭 agent
+        agentToClose.close().catch(() => { })
+      }
+    })
+
+    return { stream: webStream, contentLength }
+  } catch (err) {
+    // 出错时确保关闭 agent
+    if (exportAgent) {
+      await exportAgent.close().catch(() => { })
+    }
+    throw err
+  }
+}
+
+/**
+ * 从备份恢复实例
+ */
+export async function restoreFromBackup(
+  client: IncusClient,
+  newInstanceName: string,
+  backupData: Record<string, unknown>
+): Promise<unknown> {
+  return client.request('POST', '/1.0/instances', {
+    name: newInstanceName,
+    source: {
+      type: 'backup',
+      ...backupData
+    }
+  })
+}
+
diff --git a/server/src/lib/incus/incus-client.ts b/server/src/lib/incus/incus-client.ts
new file mode 100644
index 0000000..f7ab32d
--- /dev/null
+++ b/server/src/lib/incus/incus-client.ts
@@ -0,0 +1,217 @@
+/**
+ * Incus API 客户端 - 主类
+ * 使用 mTLS (双向 TLS) 与 Incus 服务器通信
+ */
+
+import { Agent, request } from 'undici'
+import { readFileSync } from 'fs'
+import type {
+  IncusClientOptions,
+  IncusApiResponse
+} from '../../types/incus.js'
+import { waitForOperation } from './incus-utils.js'
+
+export class IncusClient {
+  baseUrl: string
+  certPath: string | null
+  keyPath: string | null
+  agent: Agent | null = null
+  connected: boolean = false
+
+  constructor(options: IncusClientOptions) {
+    this.baseUrl = IncusClient.normalizeUrl(options.url)
+    this.certPath = options.certPath
+    this.keyPath = options.keyPath
+  }
+
+  /**
+   * 规范化 URL，确保 IPv6 地址被方括号包裹
+   * 例如 https://2a06:de04:10:1250:::8443 → https://[2a06:de04:10:1250::]:8443
+   */
+  private static normalizeUrl(url: string): string {
+    try {
+      // 如果 new URL() 能正常解析，说明格式已经正确
+      new URL(url)
+      return url
+    } catch {
+      // URL 解析失败，可能是裸 IPv6 地址未加方括号
+      // 策略：从末尾找到 :PORT（纯数字），前面的部分就是 IPv6 地址
+      const schemeMatch = url.match(/^(https?:\/\/)(.+)$/)
+      if (!schemeMatch) return url
+
+      const scheme = schemeMatch[1]
+      const rest = schemeMatch[2] // 例如 "2a06:de04:10:1250:::8443"
+
+      // 从末尾找最后一个冒号，检查冒号后面是否全是数字（即端口号）
+      const lastColon = rest.lastIndexOf(':')
+      if (lastColon === -1) return url
+
+      const afterLastColon = rest.substring(lastColon + 1)
+      if (/^\d+$/.test(afterLastColon)) {
+        // afterLastColon 是端口号，前面的是 IPv6 地址
+        const addr = rest.substring(0, lastColon)
+        if (addr.includes(':')) {
+          return `${scheme}[${addr}]:${afterLastColon}`
+        }
+      }
+      return url
+    }
+  }
+
+  /**
+   * 初始化 mTLS 连接
+   */
+  async connect(): Promise<unknown> {
+    try {
+      if (!this.certPath || !this.keyPath) {
+        throw new Error('Certificate or key path is missing')
+      }
+
+      const cert = readFileSync(this.certPath)
+      const key = readFileSync(this.keyPath)
+
+      this.agent = new Agent({
+        connect: {
+          cert,
+          key,
+          rejectUnauthorized: false // Incus 使用自签名证书
+        },
+        // 超时配置，防止 Headers Timeout Error
+        headersTimeout: 120000, // 2分钟
+        bodyTimeout: 300000     // 5分钟（对于大数据传输）
+      })
+
+      // 测试连接
+      const info = await this.getServerInfo()
+      this.connected = true
+      return info
+    } catch (error) {
+      this.connected = false
+      const message = error instanceof Error ? error.message : String(error)
+      throw new Error(`无法连接到 Incus: ${message}`)
+    }
+  }
+
+  /**
+   * 发送 API 请求
+   * @param timeout 异步操作的超时时间（毫秒），默认 120 秒。对于长时间操作（如复制实例），建议使用 300000（5分钟）
+   */
+  async request<T = unknown>(method: string, path: string, body: unknown = null, timeout: number = 120000): Promise<T> {
+    if (!this.agent) {
+      throw new Error('Incus 客户端未连接')
+    }
+
+    const url = `${this.baseUrl}${path}`
+    const options: {
+      method: string
+      dispatcher: Agent
+      headers: Record<string, string>
+      body?: string
+    } = {
+      method,
+      dispatcher: this.agent,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+
+    if (body) {
+      options.body = JSON.stringify(body)
+    }
+
+    const response = await request(url, options)
+    const text = await response.body.text()
+    
+    // Try to parse JSON, handle non-JSON responses (e.g., mTLS errors)
+    let data: IncusApiResponse<T>
+    try {
+      data = JSON.parse(text) as IncusApiResponse<T>
+    } catch (e) {
+      // 记录错误日志
+      console.error('[Incus API Error]', {
+        method,
+        url,
+        statusCode: response.statusCode,
+        error: text || `HTTP ${response.statusCode}`
+      })
+      // Incus returns plain text for some errors (like mTLS failures)
+      throw new Error(text || `HTTP ${response.statusCode}`)
+    }
+
+    // Incus API 返回格式: { type: "sync/async", status: "Success", metadata: {...} }
+    if (data.type === 'error') {
+      // 记录错误日志
+      console.error('[Incus API Error]', {
+        method,
+        url,
+        error: data.error || 'Incus API 错误'
+      })
+      throw new Error(data.error || 'Incus API 错误')
+    }
+
+    // 异步操作需要等待完成
+    if (data.type === 'async' && data.operation) {
+      return await waitForOperation(this, data.operation, timeout) as T
+    }
+
+    return (data.metadata || data) as T
+  }
+
+  /**
+   * 检查文件是否存在（用于 Files API，不解析 JSON）
+   * @returns true 如果文件存在（HTTP 200），false 如果不存在（HTTP 404）
+   */
+  async checkFileExists(path: string): Promise<{ exists: boolean; statusCode: number }> {
+    const result = await this.readFile(path)
+    return {
+      exists: result.statusCode === 200,
+      statusCode: result.statusCode
+    }
+  }
+
+  /**
+   * 读取实例文件（用于 Files API，不解析 JSON）
+   * @returns 文件内容与 HTTP 状态码
+   */
+  async readFile(path: string): Promise<{ content: string; statusCode: number }> {
+    if (!this.agent) {
+      throw new Error('Incus 客户端未连接')
+    }
+
+    const url = `${this.baseUrl}${path}`
+    const response = await request(url, {
+      method: 'GET',
+      dispatcher: this.agent,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+
+    // Files API 返回原始文件内容，不是 JSON
+    const content = await response.body.text()
+
+    return { content, statusCode: response.statusCode }
+  }
+
+  // ==================== 服务器信息 ====================
+
+  async getServerInfo(): Promise<unknown> {
+    return this.request('GET', '/1.0')
+  }
+
+  async getResources(): Promise<unknown> {
+    return this.request('GET', '/1.0/resources')
+  }
+
+  /**
+   * 关闭连接
+   */
+  async close(): Promise<void> {
+    if (this.agent) {
+      await this.agent.close()
+      this.agent = null
+      this.connected = false
+    }
+  }
+}
+
diff --git a/server/src/lib/incus/incus-images.ts b/server/src/lib/incus/incus-images.ts
new file mode 100644
index 0000000..beeb806
--- /dev/null
+++ b/server/src/lib/incus/incus-images.ts
@@ -0,0 +1,205 @@
+/**
+ * Incus 镜像管理
+ */
+
+import { request } from 'undici'
+import type { IncusClient } from './incus-client.js'
+import type { IncusImage, IncusImageAlias, PullImageOptions } from '../../types/incus.js'
+import { waitForOperationLong } from './incus-utils.js'
+
+/**
+ * 获取镜像列表
+ */
+export async function listImages(client: IncusClient): Promise<IncusImage[]> {
+  const urls = await client.request<string[]>('GET', '/1.0/images')
+  const images: IncusImage[] = []
+  
+  for (const url of urls || []) {
+    const fingerprint = url.split('/').pop() || ''
+    const image = await getImage(client, fingerprint)
+    images.push(image)
+  }
+  
+  return images
+}
+
+/**
+ * 获取镜像详情
+ */
+export async function getImage(client: IncusClient, fingerprint: string): Promise<IncusImage> {
+  return client.request<IncusImage>('GET', `/1.0/images/${fingerprint}`)
+}
+
+/**
+ * 获取镜像别名列表
+ */
+export async function listImageAliases(client: IncusClient): Promise<IncusImageAlias[]> {
+  return client.request<IncusImageAlias[]>('GET', '/1.0/images/aliases')
+}
+
+/**
+ * 从远程服务器下载镜像
+ */
+export async function pullImage(
+  client: IncusClient,
+  remoteAlias: string,
+  options: PullImageOptions = {}
+): Promise<unknown> {
+  const {
+    server = 'https://images.linuxcontainers.org',
+    protocol = 'simplestreams',
+    autoUpdate = true,
+    isPublic = false
+  } = options
+
+  const payload = {
+    source: {
+      type: 'image',
+      mode: 'pull',
+      server,
+      protocol,
+      alias: remoteAlias
+    },
+    public: isPublic,
+    auto_update: autoUpdate
+  }
+
+  // This is an async operation - will return after completion
+  return client.request('POST', '/1.0/images', payload)
+}
+
+/**
+ * 从远程服务器下载镜像（带超时等待）
+ */
+export async function pullImageWithLongTimeout(
+  client: IncusClient,
+  remoteAlias: string,
+  options: PullImageOptions = {},
+  timeout: number = 600000
+): Promise<unknown> {
+  const {
+    server = 'https://images.linuxcontainers.org',
+    protocol = 'simplestreams',
+    autoUpdate = true,
+    isPublic = false
+  } = options
+
+  const payload = {
+    source: {
+      type: 'image',
+      mode: 'pull',
+      server,
+      protocol,
+      alias: remoteAlias
+    },
+    public: isPublic,
+    auto_update: autoUpdate
+  }
+
+  // Send request and get operation URL
+  const url = `${client.baseUrl}/1.0/images`
+  
+  // 记录请求日志
+  console.log('[Incus API Request]', {
+    method: 'POST',
+    url,
+    body: JSON.stringify(payload, null, 2),
+    operation: 'pullImageWithLongTimeout'
+  })
+  
+  const response = await request(url, {
+    method: 'POST',
+    dispatcher: client.agent!,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  })
+  
+  const text = await response.body.text()
+  
+  // 记录响应日志
+  console.log('[Incus API Response]', {
+    method: 'POST',
+    url,
+    statusCode: response.statusCode,
+    responseBody: text.length > 1000 ? `${text.substring(0, 1000)}... (truncated, total: ${text.length} chars)` : text
+  })
+  
+  let data: { type: string; operation?: string; metadata?: unknown; error?: string }
+  try {
+    data = JSON.parse(text)
+  } catch (e) {
+    throw new Error(text || `HTTP ${response.statusCode}`)
+  }
+
+  if (data.type === 'error') {
+    throw new Error(data.error || 'Incus API 错误')
+  }
+
+  // Wait for async operation with long timeout
+  if (data.type === 'async' && data.operation) {
+    return waitForOperationLong(client, data.operation, timeout)
+  }
+
+  return data.metadata
+}
+
+/**
+ * 创建镜像别名
+ */
+export async function createImageAlias(
+  client: IncusClient,
+  aliasName: string,
+  fingerprint: string
+): Promise<unknown> {
+  return client.request('POST', '/1.0/images/aliases', {
+    name: aliasName,
+    target: fingerprint
+  })
+}
+
+/**
+ * 删除镜像别名
+ */
+export async function deleteImageAlias(client: IncusClient, aliasName: string): Promise<unknown> {
+  return client.request('DELETE', `/1.0/images/aliases/${aliasName}`)
+}
+
+/**
+ * 获取镜像别名详情
+ */
+export async function getImageAlias(client: IncusClient, aliasName: string): Promise<IncusImageAlias> {
+  return client.request<IncusImageAlias>('GET', `/1.0/images/aliases/${aliasName}`)
+}
+
+/**
+ * 更新镜像别名
+ */
+export async function updateImageAlias(
+  client: IncusClient,
+  aliasName: string,
+  newTarget: string
+): Promise<unknown> {
+  return client.request('PUT', `/1.0/images/aliases/${aliasName}`, {
+    target: newTarget
+  })
+}
+
+/**
+ * 删除镜像
+ */
+export async function deleteImage(client: IncusClient, fingerprint: string): Promise<unknown> {
+  return client.request('DELETE', `/1.0/images/${fingerprint}`)
+}
+
+/**
+ * 检查镜像是否存在（通过别名）
+ */
+export async function imageExistsByAlias(client: IncusClient, aliasName: string): Promise<boolean> {
+  try {
+    await getImageAlias(client, aliasName)
+    return true
+  } catch {
+    return false
+  }
+}
+
diff --git a/server/src/lib/incus/incus-instances.ts b/server/src/lib/incus/incus-instances.ts
new file mode 100644
index 0000000..124dd2d
--- /dev/null
+++ b/server/src/lib/incus/incus-instances.ts
@@ -0,0 +1,982 @@
+/**
+ * Incus 实例管理
+ */
+
+import type { IncusClient } from './incus-client.js'
+import type { IncusInstance, IncusOperation } from '../../types/incus.js'
+import { allowanceToCores } from '../cpu-allowance.js'
+import type { BuildInstanceConfigOptions, IPv6Config } from '../../types/incus.js'
+import { buildNetworkDevices, generateCloudInitNetworkConfig, hasIpv6Support } from '../network-payload-builder.js'
+import { generateVmNicMacs } from '../vm-network-identifiers.js'
+import { resolveIncusSwapValue } from '../instance-swap.js'
+
+const INSTANCE_BUSY_WAIT_TIMEOUT_MS = 300000
+const INSTANCE_BUSY_POLL_INTERVAL_MS = 2000
+const INSTANCE_BUSY_CANCEL_CHECK_INTERVAL_MS = 30000
+const INSTANCE_BUSY_CANCEL_STALE_UPDATE_MS = 45000
+
+function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+function extractBusyOperationName(error: unknown): string | null {
+  const message = error instanceof Error ? error.message : String(error)
+  const match = message.match(/busy running a "([^"]+)" operation/i)
+  return match?.[1]?.trim() || null
+}
+
+function normalizeOperationsPayload(payload: unknown): IncusOperation[] {
+  if (Array.isArray(payload)) {
+    return payload.filter((entry): entry is IncusOperation => !!entry && typeof entry === 'object')
+  }
+
+  if (!payload || typeof payload !== 'object') {
+    return []
+  }
+
+  return Object.values(payload).filter((entry): entry is IncusOperation => !!entry && typeof entry === 'object')
+}
+
+function isOperationRunning(operation: IncusOperation): boolean {
+  const status = operation.status?.toLowerCase()
+  if (status && ['success', 'failure', 'cancelled', 'canceled'].includes(status)) {
+    return false
+  }
+
+  return typeof operation.status_code === 'number' ? operation.status_code < 200 : true
+}
+
+function operationTouchesInstance(resources: unknown, instanceName: string): boolean {
+  const instancePath = `/1.0/instances/${instanceName}`
+
+  if (typeof resources === 'string') {
+    return resources === instancePath || resources.startsWith(instancePath)
+  }
+
+  if (Array.isArray(resources)) {
+    return resources.some(entry => operationTouchesInstance(entry, instanceName))
+  }
+
+  if (resources && typeof resources === 'object') {
+    return Object.values(resources).some(entry => operationTouchesInstance(entry, instanceName))
+  }
+
+  return false
+}
+
+function describeOperation(operation: IncusOperation): string {
+  return operation.description || operation.class || operation.id || 'operation'
+}
+
+async function listActiveInstanceOperations(client: IncusClient, instanceName: string): Promise<IncusOperation[]> {
+  const payload = await client.request<unknown>('GET', '/1.0/operations?recursion=1')
+  const operations = normalizeOperationsPayload(payload)
+
+  return operations.filter(operation =>
+    isOperationRunning(operation) && operationTouchesInstance(operation.resources, instanceName)
+  )
+}
+
+function describeOperations(operations: IncusOperation[]): string {
+  return operations.map(describeOperation).join(', ')
+}
+
+function getOperationPath(operation: IncusOperation): string | null {
+  if (!operation.id) return null
+  return operation.id.startsWith('/1.0/operations/')
+    ? operation.id
+    : `/1.0/operations/${operation.id}`
+}
+
+function operationAgeMs(operation: IncusOperation): number {
+  const createdAt = Date.parse(operation.created_at || '')
+  if (Number.isFinite(createdAt)) return Date.now() - createdAt
+  const updatedAt = Date.parse(operation.updated_at || '')
+  if (Number.isFinite(updatedAt)) return Date.now() - updatedAt
+  return 0
+}
+
+function isUpdateOperation(operation: IncusOperation): boolean {
+  const description = operation.description?.toLowerCase() || ''
+  const metadataAction = typeof operation.metadata?.action === 'string'
+    ? operation.metadata.action.toLowerCase()
+    : ''
+  return description.includes('update') || metadataAction === 'update'
+}
+
+async function cancelStaleUpdateOperations(client: IncusClient, instanceName: string): Promise<number> {
+  const activeOperations = await listActiveInstanceOperations(client, instanceName)
+  const cancellable = activeOperations.filter(operation =>
+    isUpdateOperation(operation)
+    && operation.may_cancel !== false
+    && operationAgeMs(operation) >= INSTANCE_BUSY_CANCEL_STALE_UPDATE_MS
+  )
+
+  let cancelled = 0
+  for (const operation of cancellable) {
+    const operationPath = getOperationPath(operation)
+    if (!operationPath) continue
+    try {
+      await client.request('DELETE', operationPath)
+      cancelled++
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.warn(`[Incus] Failed to cancel stale update operation ${operation.id} for ${instanceName}: ${message}`)
+    }
+  }
+
+  return cancelled
+}
+
+export interface BusyRetryOptions {
+  allowCancelBusyUpdate?: boolean
+  busyUpdateCancelAfterMs?: number
+}
+
+function extractInstanceStatus(state: unknown): string {
+  if (!state || typeof state !== 'object') return ''
+  const rawStatus = (state as { status?: unknown }).status
+  return typeof rawStatus === 'string' ? rawStatus.trim().toLowerCase() : ''
+}
+
+async function runInstanceActionWithBusyRetry<T>(
+  client: IncusClient,
+  instanceName: string,
+  actionLabel: string,
+  action: () => Promise<T>,
+  options: BusyRetryOptions = {}
+): Promise<T> {
+  const busySince = Date.now()
+  let lastLogAt = 0
+  let lastCancelCheckAt = 0
+  let lastBusyOperation: string | null = null
+  const busyUpdateCancelAfterMs = options.busyUpdateCancelAfterMs ?? INSTANCE_BUSY_CANCEL_STALE_UPDATE_MS
+
+  while (Date.now() - busySince <= INSTANCE_BUSY_WAIT_TIMEOUT_MS) {
+    try {
+      return await action()
+    } catch (error) {
+      const busyOperation = extractBusyOperationName(error)
+      if (!busyOperation) {
+        throw error
+      }
+
+      lastBusyOperation = busyOperation
+      const now = Date.now()
+      const elapsedMs = now - busySince
+      const remainingMs = Math.max(0, INSTANCE_BUSY_WAIT_TIMEOUT_MS - elapsedMs)
+      let activeOperationDescription = ''
+
+      try {
+        const activeOperations = await listActiveInstanceOperations(client, instanceName)
+        if (activeOperations.length > 0) {
+          activeOperationDescription = describeOperations(activeOperations)
+        }
+      } catch {
+        // Operation list is best-effort diagnostics only.
+      }
+
+      if (now - lastLogAt >= 10000) {
+        const details = activeOperationDescription ? ` activeOps=[${activeOperationDescription}]` : ''
+        console.warn(
+          `[Incus] Instance ${instanceName} is busy running a "${busyOperation}" operation while trying to ${actionLabel}; elapsed=${Math.ceil(elapsedMs / 1000)}s remaining=${Math.ceil(remainingMs / 1000)}s${details}`
+        )
+        lastLogAt = now
+      }
+
+      if (
+        options.allowCancelBusyUpdate
+        && busyOperation.toLowerCase() === 'update'
+        && elapsedMs >= busyUpdateCancelAfterMs
+        && (now - lastCancelCheckAt) >= INSTANCE_BUSY_CANCEL_CHECK_INTERVAL_MS
+      ) {
+        lastCancelCheckAt = now
+        try {
+          const cancelledCount = await cancelStaleUpdateOperations(client, instanceName)
+          if (cancelledCount > 0) {
+            console.warn(`[Incus] Cancelled ${cancelledCount} stale update operation(s) for ${instanceName}`)
+          }
+        } catch (cancelError) {
+          const cancelMessage = cancelError instanceof Error ? cancelError.message : String(cancelError)
+          console.warn(`[Incus] Failed stale update cancellation check for ${instanceName}: ${cancelMessage}`)
+        }
+      }
+
+      if (remainingMs <= 0) {
+        if (activeOperationDescription) {
+          throw new Error(`Instance "${instanceName}" remained busy after waiting to ${actionLabel}: ${activeOperationDescription}`)
+        }
+
+        throw new Error(`Instance "${instanceName}" remained busy running a "${busyOperation}" operation while trying to ${actionLabel}`)
+      }
+
+      await sleep(Math.min(INSTANCE_BUSY_POLL_INTERVAL_MS, remainingMs))
+    }
+  }
+
+  if (lastBusyOperation) {
+    throw new Error(`Instance "${instanceName}" remained busy running a "${lastBusyOperation}" operation while trying to ${actionLabel}`)
+  }
+
+  throw new Error(`Failed to ${actionLabel}`)
+}
+
+/**
+ * 获取所有实例
+ */
+export async function listInstances(client: IncusClient): Promise<IncusInstance[]> {
+  const urls = await client.request<string[]>('GET', '/1.0/instances')
+  const instances: IncusInstance[] = []
+
+  for (const url of urls || []) {
+    const name = url.split('/').pop() || ''
+    const instance = await getInstance(client, name)
+    instances.push(instance)
+  }
+
+  return instances
+}
+
+/**
+ * 获取实例详情
+ */
+export async function getInstance(client: IncusClient, name: string): Promise<IncusInstance> {
+  return client.request<IncusInstance>('GET', `/1.0/instances/${name}`)
+}
+
+/**
+ * 获取实例状态
+ */
+export async function getInstanceState(client: IncusClient, name: string): Promise<unknown> {
+  return client.request('GET', `/1.0/instances/${name}/state`)
+}
+
+/**
+ * 创建实例
+ */
+export async function createInstance(client: IncusClient, config: unknown): Promise<unknown> {
+  return client.request('POST', '/1.0/instances', config)
+}
+
+/**
+ * 删除实例
+ */
+export async function deleteInstance(client: IncusClient, name: string): Promise<unknown> {
+  return client.request('DELETE', `/1.0/instances/${name}`)
+}
+
+/**
+ * 启动实例
+ */
+export async function startInstance(client: IncusClient, name: string): Promise<unknown> {
+  return client.request('PUT', `/1.0/instances/${name}/state`, {
+    action: 'start',
+    timeout: 60  // 60秒
+  })
+}
+
+/**
+ * 停止实例
+ */
+export async function stopInstance(
+  client: IncusClient,
+  name: string,
+  force: boolean = false,
+  options: BusyRetryOptions = {}
+): Promise<unknown> {
+  return runInstanceActionWithBusyRetry(client, name, 'stop the instance', async () => {
+    const currentState = await getInstanceState(client, name)
+    const currentStatus = extractInstanceStatus(currentState)
+
+    // Alpine 等镜像上偶发会残留一个 update operation 锁，
+    // 但实例本体其实已经停下来了；此时无需再次发送 stop。
+    if (currentStatus === 'stopped') {
+      return currentState
+    }
+
+    return client.request('PUT', `/1.0/instances/${name}/state`, {
+      action: 'stop',
+      timeout: 60,
+      force
+    })
+  },
+    options
+  )
+}
+
+/**
+ * 重启实例
+ */
+export async function restartInstance(client: IncusClient, name: string, force: boolean = false): Promise<unknown> {
+  return client.request('PUT', `/1.0/instances/${name}/state`, {
+    action: 'restart',
+    timeout: 60,  // 60秒
+    force
+  })
+}
+
+/**
+ * 冻结实例
+ */
+export async function freezeInstance(client: IncusClient, name: string): Promise<unknown> {
+  return client.request('PUT', `/1.0/instances/${name}/state`, {
+    action: 'freeze',
+    timeout: 60
+  })
+}
+
+/**
+ * 解冻实例
+ */
+export async function unfreezeInstance(client: IncusClient, name: string): Promise<unknown> {
+  return client.request('PUT', `/1.0/instances/${name}/state`, {
+    action: 'unfreeze',
+    timeout: 30
+  })
+}
+
+/**
+ * 重建实例（重装系统）
+ * @param config - 可选的 cloud-init 配置，用于注入 SSH 密钥和密码
+ */
+export async function rebuildInstance(
+  client: IncusClient,
+  name: string,
+  imageSource: { alias?: string; fingerprint?: string; server?: string; mode?: string; protocol?: string },
+  config?: Record<string, string>,
+  options: BusyRetryOptions = {}
+): Promise<unknown> {
+  // 处理远程镜像源
+  // 如果 alias 以 "images:" 开头，表示从远程 images.linuxcontainers.org 拉取
+  let source: Record<string, string>
+  if (imageSource.alias?.startsWith('images:')) {
+    const remoteAlias = imageSource.alias.replace('images:', '')
+    source = {
+      type: 'image',
+      mode: 'pull',
+      server: 'https://images.linuxcontainers.org',
+      protocol: 'simplestreams',
+      alias: remoteAlias
+    }
+  } else {
+    source = {
+      type: 'image',
+      ...imageSource
+    } as Record<string, string>
+  }
+
+  const payload: Record<string, unknown> = { source }
+
+  // 如果提供了 config，添加到请求中（用于 cloud-init）
+  if (config && Object.keys(config).length > 0) {
+    payload.config = config
+  }
+
+  // rebuild 是耗时操作，使用 5 分钟超时
+  return runInstanceActionWithBusyRetry(client, name, 'rebuild the instance', () =>
+    client.request('POST', `/1.0/instances/${name}/rebuild`, payload, 300000),
+    options
+  )
+}
+
+/**
+ * 更新实例配置
+ * 注意：config 对象会与现有配置合并，而不是替换
+ */
+export async function updateInstance(client: IncusClient, name: string, updates: Record<string, unknown>): Promise<unknown> {
+  return runInstanceActionWithBusyRetry(client, name, 'update the instance configuration', async () => {
+    const current = await getInstance(client, name) as unknown as Record<string, unknown>
+    const sanitizedUpdates = Object.fromEntries(
+      Object.entries(updates).filter(([, value]) => value !== undefined)
+    )
+
+    // 如果更新包含 config，需要合并而不是替换
+    if (sanitizedUpdates.config && current.config) {
+      sanitizedUpdates.config = {
+        ...(current.config as Record<string, unknown>),
+        ...(sanitizedUpdates.config as Record<string, unknown>)
+      }
+    }
+
+    return client.request('PUT', `/1.0/instances/${name}`, {
+      ...current,
+      ...sanitizedUpdates
+    })
+  })
+}
+
+/**
+ * 增量更新实例资源配置（使用 PATCH，实时生效无需重启）
+ * 支持修改 CPU、内存、磁盘（磁盘只能增大）
+ */
+export async function patchInstanceResources(
+  client: IncusClient,
+  name: string,
+  resources: {
+    cpu?: number      // CPU 额配百分比
+    memory?: number   // 内存大小 MB
+    disk?: number     // 磁盘大小 MB
+  }
+): Promise<unknown> {
+  const patchData: { config?: Record<string, string>; devices?: Record<string, unknown> } = {}
+
+  // 更新 CPU 配置
+  if (resources.cpu !== undefined) {
+    patchData.config = patchData.config || {}
+    patchData.config['limits.cpu'] = String(allowanceToCores(resources.cpu))
+    patchData.config['limits.cpu.allowance'] = `${resources.cpu}%`
+  }
+
+  // 更新内存配置
+  if (resources.memory !== undefined) {
+    patchData.config = patchData.config || {}
+    patchData.config['limits.memory'] = `${resources.memory}MB`
+  }
+
+  // 更新磁盘配置
+  if (resources.disk !== undefined) {
+    // 获取当前实例配置以保留 root 设备的其他属性
+    const current = await getInstance(client, name)
+    const currentRoot = current.devices?.root || {}
+
+    patchData.devices = {
+      root: {
+        ...currentRoot,
+        path: '/',
+        pool: currentRoot.pool || 'default',
+        type: 'disk',
+        size: `${resources.disk}MB`
+      }
+    }
+  }
+
+  // 使用 PATCH 进行增量更新
+  return client.request('PATCH', `/1.0/instances/${name}`, patchData)
+}
+
+/**
+ * 原子更新实例的 IPv6 地址列表
+ * 使用 PATCH 操作同时清除 volatile 状态并更新 IPv6 配置，避免校验死锁
+ * @param client Incus 客户端
+ * @param instanceName 实例名称
+ * @param ipv6List IPv6 地址列表（将被转换为逗号分隔的字符串）
+ * @param deviceName 网卡设备名称，默认为 'eth0'
+ * @param networkName 网络名称，默认为 'incusbr0'
+ * @param restart 是否在更新后重启容器，默认为 true
+ */
+export async function updateInstanceIpv6Addresses(
+  client: IncusClient,
+  instanceName: string,
+  ipv6List: string[],
+  deviceName: string = 'eth0',
+  networkName: string = 'incusbr0',
+  restart: boolean = true
+): Promise<unknown> {
+  // 获取当前实例配置，保留 eth0 的其他设置
+  const instance = await getInstance(client, instanceName)
+  const currentDevices = instance.devices || {}
+  const eth0Config = (currentDevices[deviceName] as Record<string, unknown>) || {}
+
+  // 将 IP 数组转换为 Incus 要求的 "IP1,IP2" 字符串格式（无空格，严格过滤空值）
+  const ipString = ipv6List
+    .filter(ip => ip && ip.trim() !== '') // 过滤掉 null/undefined/空字符串
+    .map(ip => ip.trim())                 // 去除每个 IP 前后的空格
+    .join(',')                            // 仅用逗号拼接，严禁空格
+
+  // 检查实例状态，volatile 状态只在运行时存在
+  const state = await getInstanceState(client, instanceName) as { status?: string }
+  const isRunning = state.status === 'Running'
+
+  // 构造 PATCH Payload：同时包含 config (清理 volatile) 和 devices (设置新 IP)
+  // 关键修复：显式设置 ipv4.address 为 null 以清除可能残留的脏数据
+  // 背景：Incus PATCH 是增量更新，如果之前的操作无意中将 ipv4.address 设为空字符串 "" 或错误值，
+  // 它会一直留在配置里。PATCH 时不提 ipv4.address，就会保留原来的错误值，导致验证失败。
+  // 设为 null 相当于告诉 Incus "删除这个字段"，从而消除验证错误的来源。
+  const patchData: {
+    config?: Record<string, string | null>
+    devices?: Record<string, Record<string, unknown>>
+  } = {
+    devices: {
+      [deviceName]: {
+        ...eth0Config,
+        name: deviceName,
+        type: 'nic',
+        network: networkName,
+        'ipv6.address': ipString,
+        'security.ipv6_filtering': 'true',
+        // 关键修复：显式清除可能残留的 IPv4 脏数据
+        // 如果不使用静态 IPv4，务必设为 null 以避免 "Item \"\": Not an IP address" 错误
+        'ipv4.address': null
+      }
+    }
+  }
+
+  // 只有在实例运行时才需要清除 volatile 状态（volatile 是运行时状态）
+  if (isRunning) {
+    patchData.config = {
+      // 关键：清除锁死容器的残留状态（根据 deviceName 动态生成）
+      [`volatile.${deviceName}.host_name`]: null,
+      [`volatile.${deviceName}.hwaddr`]: null,
+      [`volatile.${deviceName}.last_state.ip_addresses`]: null
+    }
+  }
+
+  // 使用 PATCH 进行原子更新
+  const result = await client.request('PATCH', `/1.0/instances/${instanceName}`, patchData)
+
+  // 如果实例正在运行且需要重启，则重启容器以生效
+  // 注意：如果实例是停止状态，更新配置后不需要重启（下次启动时会自动应用）
+  if (restart && isRunning) {
+    try {
+      await restartInstance(client, instanceName, false)
+    } catch (err) {
+      // 重启失败不影响主操作，只记录警告
+      console.warn(`[updateInstanceIpv6Addresses] 重启容器 ${instanceName} 失败:`, err)
+    }
+  }
+
+  return result
+}
+
+/**
+ * 添加设备 (如端口映射)
+ */
+export async function addDevice(
+  client: IncusClient,
+  instanceName: string,
+  deviceName: string,
+  device: Record<string, unknown>
+): Promise<unknown> {
+  const instance = await getInstance(client, instanceName)
+  const devices = instance.devices || {}
+  devices[deviceName] = device
+  return client.request('PUT', `/1.0/instances/${instanceName}`, {
+    ...instance,
+    devices
+  })
+}
+
+/**
+ * 删除设备
+ */
+export async function removeDevice(
+  client: IncusClient,
+  instanceName: string,
+  deviceName: string
+): Promise<unknown> {
+  const instance = await getInstance(client, instanceName)
+  if (instance.devices && instance.devices[deviceName]) {
+    const devices = { ...instance.devices }
+    delete devices[deviceName]
+    return client.request('PUT', `/1.0/instances/${instanceName}`, {
+      ...instance,
+      devices
+    })
+  }
+  return null
+}
+
+/**
+ * 将带宽字符串统一转换为 Mbit 单位（兼容旧存量数据中的 Gbit 值）
+ * Incus 支持 Mbit，对 Gbit 的支持因版本而异，统一转换避免报错
+ */
+function normalizeBandwidth(value: string | null | undefined): string | null | undefined {
+  if (!value) return value
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*Gbit$/i)
+  if (match) {
+    return `${Math.round(Number(match[1]) * 1000)}Mbit`
+  }
+  return value
+}
+
+/**
+ * 生成实例配置
+ */
+export function buildInstanceConfig(options: BuildInstanceConfigOptions): Record<string, unknown> {
+  const {
+    name,
+    image,
+    cpu,
+    memory,
+    disk,
+    swapEnabled,
+    swapSize,
+    sshKey,
+    password,
+    nested = false,
+    privileged = false,
+    cloudInitConfig = null,
+    networkMode = 'nat',
+    instanceType = 'container',
+    // 存储池配置
+    storagePool = 'default',
+    // IP 配置 (新双网卡架构)
+    ipv4Address,
+    ipv6Config = null,
+    hostInterface = 'eth0',
+    // IPv6 静态地址配置 (旧方式，保持向后兼容)
+    ipv6Address,
+    ipv6Gateway: _ipv6Gateway,
+    networkBridge = 'incusbr0',
+    // Advanced configuration options
+    limitsRead,
+    limitsWrite,
+    limitsReadIops,
+    limitsWriteIops,
+    limitsIngress,
+    limitsEgress,
+    limitsProcesses,
+    limitsCpuPriority,
+    bootAutostart,
+    bootAutostartPriority,
+    bootAutostartDelay,
+    bootHostShutdownTimeout
+  } = options
+
+  // 兼容旧存量数据：将 Gbit 统一转换为 Mbit，避免 Incus 因单位格式拒绝请求
+  const normalizedIngress = normalizeBandwidth(limitsIngress)
+  const normalizedEgress = normalizeBandwidth(limitsEgress)
+
+  const configObj: Record<string, string> = {
+    // 资源限制映射
+    // limits.cpu: CPU核心数（根据额配计算）
+    // limits.cpu.allowance: CPU额配百分比（用户选择的值）
+    'limits.cpu': String(allowanceToCores(cpu)),
+    'limits.cpu.allowance': `${cpu}%`,
+    'limits.memory': `${memory}MB`
+  }
+
+  if (instanceType === 'container' && (swapEnabled !== undefined || swapSize !== undefined)) {
+    configObj['limits.memory.swap'] = resolveIncusSwapValue(swapEnabled === true, swapSize)
+  }
+
+  // Storage I/O limits (applied to root device)
+  const rootDevice: Record<string, string> = {
+    path: '/',
+    pool: storagePool || 'default',
+    type: 'disk',
+    size: `${disk}MB`
+  }
+
+  // Apply storage I/O limits to root device
+  // Incus limits.read/write 只能设置一种类型：带宽(如100MB) 或 IOPS(如500iops)
+  // 优先使用带宽限制，如果没有则使用 IOPS 限制
+  if (limitsRead) {
+    rootDevice['limits.read'] = limitsRead
+  } else if (limitsReadIops !== null && limitsReadIops !== undefined) {
+    rootDevice['limits.read'] = `${limitsReadIops}iops`
+  }
+  if (limitsWrite) {
+    rootDevice['limits.write'] = limitsWrite
+  } else if (limitsWriteIops !== null && limitsWriteIops !== undefined) {
+    rootDevice['limits.write'] = `${limitsWriteIops}iops`
+  }
+
+  // Process limits
+  if (limitsProcesses !== null && limitsProcesses !== undefined) {
+    configObj['limits.processes'] = String(limitsProcesses)
+  }
+
+  // CPU priority: Incus limits.cpu.priority accepts 0-10 directly (10=highest, 0=lowest)
+  // Incus handles the internal cgroup/nice-value mapping itself — do NOT convert here.
+  if (limitsCpuPriority !== null && limitsCpuPriority !== undefined) {
+    configObj['limits.cpu.priority'] = String(limitsCpuPriority)
+  }
+
+  // Boot settings
+  if (bootAutostart !== null && bootAutostart !== undefined) {
+    configObj['boot.autostart'] = bootAutostart ? 'true' : 'false'
+  }
+  if (bootAutostartPriority !== null && bootAutostartPriority !== undefined) {
+    configObj['boot.autostart.priority'] = String(bootAutostartPriority)
+  }
+  if (bootAutostartDelay !== null && bootAutostartDelay !== undefined) {
+    configObj['boot.autostart.delay'] = String(bootAutostartDelay)
+  }
+  if (bootHostShutdownTimeout !== null && bootHostShutdownTimeout !== undefined) {
+    configObj['boot.host_shutdown_timeout'] = String(bootHostShutdownTimeout)
+  }
+
+  // 网络设备配置
+  const devices: Record<string, Record<string, string>> = {
+    root: rootDevice
+  }
+
+  if (instanceType === 'vm') {
+    // Some cloud images (notably RHEL-family images from the Incus images remote)
+    // require the agent config ISO/CD-ROM to be attached at boot time.
+    devices.agent = {
+      type: 'disk',
+      source: 'agent:config'
+    }
+  }
+
+  // 构建网络设备配置
+  // 所有模式统一使用新架构 buildNetworkDevices（内部已正确处理 5 种模式）
+  // 仅在没有 ipv4Address 且非 Routed IPv6 时回退到旧架构（向后兼容）
+  const effectiveIpv6Config: IPv6Config | null = ipv6Config || (ipv6Address ? { primaryIp: ipv6Address } : null)
+  const vmNicMacs = instanceType === 'vm' ? generateVmNicMacs(name) : null
+
+  // 使用新架构的条件：有静态 IPv4（新创建流程）或有 Routed IPv6 配置
+  const useNewNetworkArchitecture = ipv4Address || (hasIpv6Support(networkMode) && effectiveIpv6Config && hostInterface)
+
+  if (useNewNetworkArchitecture) {
+    // 新架构: 使用 buildNetworkDevices 生成网络设备配置
+    // - nat/nat_ipv6_nat/ipv6_nat: 仅 eth0 bridged
+    // - nat_ipv6/ipv6_only: eth0 bridged + eth1 routed
+    const networkDevices = buildNetworkDevices({
+      networkMode,
+      hostInterface: hostInterface || 'eth0',
+      ipv6Config: effectiveIpv6Config,
+      limitsIngress: normalizedIngress,
+      limitsEgress: normalizedEgress,
+      natBridge: networkBridge || 'incusbr0',
+      ipv4Address: ipv4Address || undefined,
+      eth0Hwaddr: vmNicMacs?.eth0,
+      eth1Hwaddr: vmNicMacs?.eth1
+    })
+
+    // 合并网络设备到 devices
+    Object.assign(devices, networkDevices)
+  } else {
+    // 旧架构：单网卡 NAT 模式 (保持向后兼容)
+    // ipv4Address: VM 必须在 eth0 显式声明静态 IP，否则 Incus 拒绝 NAT proxy 规则
+    const needsExplicitNetwork = instanceType === 'vm' || ipv4Address || ipv6Address || normalizedIngress || normalizedEgress || networkMode !== 'nat'
+
+    if (needsExplicitNetwork) {
+      const eth0Device: Record<string, string> = {
+        type: 'nic',
+        name: 'eth0',
+        network: networkBridge || 'incusbr0'
+      }
+      if (vmNicMacs?.eth0) {
+        eth0Device.hwaddr = vmNicMacs.eth0
+      }
+
+      // 固定内网 IPv4 地址（VM 必须显式声明，否则 Incus 认为 IP 是动态的）
+      if (ipv4Address) {
+        eth0Device['ipv4.address'] = ipv4Address
+      }
+
+      // 带宽限制（已统一转换为 Mbit）
+      if (normalizedIngress) {
+        eth0Device['limits.ingress'] = normalizedIngress
+      }
+      if (normalizedEgress) {
+        eth0Device['limits.egress'] = normalizedEgress
+      }
+
+      devices['eth0'] = eth0Device
+    }
+  }
+
+  // 处理镜像源配置
+  // 如果镜像以 "images:" 开头，表示从远程 images.linuxcontainers.org 拉取
+  let source: Record<string, string>
+  if (image.startsWith('images:')) {
+    const remoteAlias = image.replace('images:', '')
+    source = {
+      type: 'image',
+      mode: 'pull',
+      server: 'https://images.linuxcontainers.org',
+      protocol: 'simplestreams',
+      alias: remoteAlias
+    }
+  } else {
+    // 本地镜像
+    source = {
+      type: 'image',
+      alias: image
+    }
+  }
+
+  const config: Record<string, unknown> = {
+    name,
+    // Incus API: 'container' 或 'virtual-machine'
+    type: instanceType === 'vm' ? 'virtual-machine' : 'container',
+    source,
+    config: configObj,
+    devices
+  }
+
+  // VM 关闭 UEFI 安全启动（允许用户 DD 系统等操作）
+  if (instanceType === 'vm') {
+    (config.config as Record<string, string>)['security.secureboot'] = 'false'
+  }
+
+  // 特性映射: 嵌套虚拟化 (允许在 VPS 里跑 Docker)
+  if (nested) {
+    (config.config as Record<string, string>)['security.nesting'] = 'true'
+  }
+
+  // 特性映射: 特权模式
+  if (privileged) {
+    (config.config as Record<string, string>)['security.privileged'] = 'true'
+  }
+
+  // 如果提供了 cloudInitConfig（来自配置生成器），直接使用
+  if (cloudInitConfig && cloudInitConfig['user.user-data']) {
+    (config.config as Record<string, string>)['user.user-data'] = cloudInitConfig['user.user-data']
+    // 同时注入 network-config（解决 RHEL/Alpine 的 DHCPv6 问题）
+    if (cloudInitConfig['user.network-config']) {
+      (config.config as Record<string, string>)['user.network-config'] = cloudInitConfig['user.network-config']
+    }
+  } else {
+    // 否则使用旧的逻辑（向后兼容）
+    // Cloud-Init 配置: SSH 公钥注入 + 密码设置 + 主机名
+    const lines: string[] = [
+      '#cloud-config',
+      `hostname: ${name}`,
+      'manage_etc_hosts: true'
+    ]
+
+    if (password) {
+      lines[lines.length] = 'chpasswd:'
+      lines[lines.length] = '  expire: false'
+      lines[lines.length] = '  list:'
+      lines[lines.length] = `    - root:${password}`
+      lines[lines.length] = 'ssh_pwauth: true'
+    }
+
+    if (sshKey) {
+      lines[lines.length] = 'ssh_authorized_keys:'
+      lines[lines.length] = `  - ${sshKey.trim()}`
+    }
+
+    lines[lines.length] = 'disable_root: false'
+    lines[lines.length] = 'runcmd:'
+    lines[lines.length] = "  - sed -i 's/#PermitRootLogin.*/PermitRootLogin yes/' /etc/ssh/sshd_config"
+    lines[lines.length] = "  - sed -i 's/PermitRootLogin.*/PermitRootLogin yes/' /etc/ssh/sshd_config"
+    lines[lines.length] = '  - systemctl restart sshd || service ssh restart || true'
+
+    const cloudInitYaml = lines.join('\n')
+      ; (config.config as Record<string, string>)['user.user-data'] = cloudInitYaml
+  }
+
+  // 如果使用新双网卡架构，生成包含 eth0 + eth1 的 v2 network-config
+  // 注意：容器配置生成器 (incus-config-container.ts) 产生的 v1 config 仅包含 eth0，
+  // 不支持 routed 模式的 eth1 IPv6 网卡。这里必须用 v2 配置覆盖，确保 eth1 正确配置。
+  // 关键：VM 的 network-config 由 generateVmConfig 生成（含 MAC 匹配），绝不能被覆盖！
+  // VM 内部网卡名为 enp5s0/enp6s0（非 eth0/eth1），只有 MAC 匹配才能正确识别。
+  if (hasIpv6Support(networkMode) && effectiveIpv6Config && ipv4Address && instanceType !== 'vm') {
+    // 构建 IPv6 地址列表
+    const ipv6List = [effectiveIpv6Config.primaryIp]
+    if (effectiveIpv6Config.extraIps && effectiveIpv6Config.extraIps.length > 0) {
+      ipv6List.push(...effectiveIpv6Config.extraIps)
+    }
+    (config.config as Record<string, string>)['user.network-config'] = generateCloudInitNetworkConfig({
+      ipv4Address,
+      ipv6List,
+      nicMacs: vmNicMacs || undefined
+    })
+  }
+
+  return config
+}
+
+/**
+ * 在实例中执行命令
+ */
+export async function exec(
+  client: IncusClient,
+  instanceName: string,
+  command: string | string[],
+  options: Record<string, unknown> = {},
+  timeout: number = 120000
+): Promise<unknown> {
+  return client.request('POST', `/1.0/instances/${instanceName}/exec`, {
+    command: Array.isArray(command) ? command : ['/bin/sh', '-c', command],
+    'wait-for-websocket': false,
+    interactive: false,
+    ...options
+  }, timeout)
+}
+
+export interface IncusExecOutput {
+  stdout: string
+  stderr: string
+  metadata: unknown
+}
+
+function extractOutputFilePath(metadata: unknown, fd: '1' | '2'): string | null {
+  if (!metadata || typeof metadata !== 'object') return null
+  const output = (metadata as { output?: unknown }).output
+  if (!output || typeof output !== 'object') return null
+  const path = (output as Record<string, unknown>)[fd]
+  return typeof path === 'string' && path ? path : null
+}
+
+export async function execWithOutput(
+  client: IncusClient,
+  instanceName: string,
+  command: string | string[],
+  options: Record<string, unknown> = {},
+  timeout: number = 120000
+): Promise<IncusExecOutput> {
+  const metadata = await exec(client, instanceName, command, {
+    'record-output': true,
+    ...options
+  }, timeout)
+
+  const stdoutPath = extractOutputFilePath(metadata, '1')
+  const stderrPath = extractOutputFilePath(metadata, '2')
+
+  const [stdout, stderr] = await Promise.all([
+    stdoutPath ? client.readFile(stdoutPath).then(result => result.content).catch(() => '') : Promise.resolve(''),
+    stderrPath ? client.readFile(stderrPath).then(result => result.content).catch(() => '') : Promise.resolve('')
+  ])
+
+  return { stdout, stderr, metadata }
+}
+
+/**
+ * 获取控制台 WebSocket URL
+ */
+export function getConsoleWebSocketUrl(client: IncusClient, instanceName: string): string {
+  const wsUrl = client.baseUrl.replace('https://', 'wss://').replace('http://', 'ws://')
+  return `${wsUrl}/1.0/instances/${instanceName}/console?wait-for-websocket=true`
+}
+
+/**
+ * 确保网桥已启用 IPv6 NAT 能力（防御性校验）
+ * 
+ * 仅对需要桥级 IPv6 NAT 的网络模式生效（ipv6_nat, nat_ipv6_nat）。
+ * 如果网桥的 ipv6.address 为 none 或未启用 ipv6.nat，则自动修正。
+ * 
+ * 背景：install.sh 初始化网桥时可能因安装选项不当导致 IPv6 被关闭，
+ * 此函数作为运行时保底，确保 NAT 类 IPv6 实例不会因网桥配置缺失而断网。
+ */
+export async function ensureBridgeIpv6(
+  client: IncusClient,
+  networkMode: string,
+  bridgeName: string = 'incusbr0'
+): Promise<void> {
+  // 仅对需要桥级 IPv6 NAT 的模式执行校验
+  if (!['ipv6_nat', 'nat_ipv6_nat'].includes(networkMode)) {
+    return
+  }
+
+  try {
+    // 获取当前网桥配置
+    const bridge = await client.request<{ config?: Record<string, string> }>('GET', `/1.0/networks/${bridgeName}`)
+    const config = bridge?.config || {}
+
+    const needsFix = config['ipv6.address'] === 'none' || !config['ipv6.nat'] || config['ipv6.nat'] !== 'true'
+
+    if (needsFix) {
+      // 使用 PATCH 增量更新，不影响其他已有配置
+      await client.request('PATCH', `/1.0/networks/${bridgeName}`, {
+        config: {
+          'ipv6.address': 'auto',
+          'ipv6.nat': 'true',
+          'ipv6.dhcp': 'true'
+        }
+      })
+      console.log(`[ensureBridgeIpv6] 已自动为网桥 ${bridgeName} 启用 IPv6 NAT（网络模式: ${networkMode}）`)
+    }
+  } catch (err) {
+    // 校验失败不阻断实例创建，仅记录警告
+    console.warn(`[ensureBridgeIpv6] 网桥 IPv6 校验失败（${bridgeName}）:`, err)
+  }
+}
+
diff --git a/server/src/lib/incus/incus-network.ts b/server/src/lib/incus/incus-network.ts
new file mode 100644
index 0000000..23a3c64
--- /dev/null
+++ b/server/src/lib/incus/incus-network.ts
@@ -0,0 +1,21 @@
+/**
+ * Incus 网络管理
+ */
+
+import type { IncusClient } from './incus-client.js'
+import type { IncusNetwork } from '../../types/incus.js'
+
+/**
+ * 获取网络列表
+ */
+export async function listNetworks(client: IncusClient): Promise<IncusNetwork[]> {
+  return client.request<IncusNetwork[]>('GET', '/1.0/networks')
+}
+
+/**
+ * 获取网络详情
+ */
+export async function getNetwork(client: IncusClient, name: string): Promise<IncusNetwork> {
+  return client.request<IncusNetwork>('GET', `/1.0/networks/${name}`)
+}
+
diff --git a/server/src/lib/incus/incus-pool.ts b/server/src/lib/incus/incus-pool.ts
new file mode 100644
index 0000000..7cf0e51
--- /dev/null
+++ b/server/src/lib/incus/incus-pool.ts
@@ -0,0 +1,227 @@
+/**
+ * Incus 客户端连接池管理 (高可用优化版)
+ * 
+ * 优化特性：
+ * 1. 连接缓存复用：避免重复创建连接
+ * 2. 自动重连：连接断开时自动重新连接
+ * 3. 健康检查：记录连接状态和响应时间
+ * 4. 过期清理：自动清理长时间未使用的连接
+ */
+
+import type { IncusClient } from './incus-client.js'
+import { IncusClient as Client } from './incus-client.js'
+import { recordHostSuccess, recordHostError as recordHostHealthError } from './host-health.js'
+
+interface Host {
+  id: number
+  url: string
+  cert_path?: string | null
+  key_path?: string | null
+  certPath?: string | null
+  keyPath?: string | null
+}
+
+interface PooledClient {
+  client: IncusClient
+  lastUsed: number        // 最后使用时间戳
+  lastResponseTime: number // 最后响应时间 (ms)
+  errorCount: number       // 连续错误次数
+}
+
+const clientPool = new Map<string, PooledClient>()
+
+// 连接过期时间 (30分钟未使用)
+const CONNECTION_EXPIRE_MS = 30 * 60 * 1000
+
+// 连接锁（防止并发重连）
+const connectingLocks = new Map<string, Promise<IncusClient>>()
+
+// 定期清理过期连接
+let cleanupInterval: ReturnType<typeof setInterval> | null = null
+
+/**
+ * 启动连接池清理定时器
+ */
+function ensureCleanupStarted(): void {
+  if (cleanupInterval) return
+  
+  cleanupInterval = setInterval(async () => {
+    const now = Date.now()
+    const expiredKeys: string[] = []
+    
+    for (const [key, pooled] of clientPool) {
+      if (now - pooled.lastUsed > CONNECTION_EXPIRE_MS) {
+        expiredKeys.push(key)
+      }
+    }
+    
+    for (const key of expiredKeys) {
+      // 先从池中移除，避免竞态条件（其他请求在 close 期间使用该连接）
+      const pooled = clientPool.get(key)
+      if (pooled) {
+        clientPool.delete(key)
+        try {
+          await pooled.client.close()
+        } catch {
+          // 忽略关闭错误
+        }
+        console.log(`[IncusPool] Closed expired connection: ${key}`)
+      }
+    }
+  }, 5 * 60 * 1000) // 每5分钟检查一次
+}
+
+/**
+ * 获取或创建 Incus 客户端（带并发保护）
+ */
+export async function getIncusClient(host: Host): Promise<IncusClient> {
+  ensureCleanupStarted()
+  
+  const key = `${host.id}`
+  const now = Date.now()
+  
+  // 检查是否有正在进行的连接操作
+  const existingLock = connectingLocks.get(key)
+  if (existingLock) {
+    return existingLock
+  }
+  
+  if (clientPool.has(key)) {
+    const pooled = clientPool.get(key)!
+    pooled.lastUsed = now
+    
+    if (pooled.client.connected) {
+      return pooled.client
+    }
+    
+    // 重新连接（带锁保护）
+    const reconnectPromise = (async () => {
+      try {
+        await pooled.client.connect()
+        pooled.errorCount = 0
+        return pooled.client
+      } catch (error) {
+        pooled.errorCount++
+        throw error
+      } finally {
+        connectingLocks.delete(key)
+      }
+    })()
+    
+    connectingLocks.set(key, reconnectPromise)
+    return reconnectPromise
+  }
+
+  // 创建新连接（带锁保护）
+  const connectPromise = (async () => {
+    try {
+      const client = new Client({
+        url: host.url,
+        certPath: host.cert_path || host.certPath || null,
+        keyPath: host.key_path || host.keyPath || null
+      })
+
+      await client.connect()
+      
+      clientPool.set(key, {
+        client,
+        lastUsed: now,
+        lastResponseTime: 0,
+        errorCount: 0
+      })
+      
+      return client
+    } finally {
+      connectingLocks.delete(key)
+    }
+  })()
+  
+  connectingLocks.set(key, connectPromise)
+  return connectPromise
+}
+
+/**
+ * 更新客户端响应时间（用于性能监控，并重置错误计数）
+ */
+export function updateClientResponseTime(hostId: number, responseTime: number): void {
+  const key = `${hostId}`
+  const pooled = clientPool.get(key)
+  if (pooled) {
+    pooled.lastResponseTime = responseTime
+    pooled.lastUsed = Date.now()
+    // 成功响应时重置错误计数
+    pooled.errorCount = 0
+  }
+  // 同步到统一健康状态模块
+  recordHostSuccess(hostId, responseTime)
+}
+
+/**
+ * 记录客户端错误
+ */
+export function recordClientError(hostId: number): void {
+  const key = `${hostId}`
+  const pooled = clientPool.get(key)
+  if (pooled) {
+    pooled.errorCount++
+  }
+  // 同步到统一健康状态模块
+  recordHostHealthError(hostId)
+}
+
+/**
+ * 获取连接池状态（用于监控）
+ */
+export function getPoolStatus(): Map<string, {
+  connected: boolean
+  lastUsed: number
+  lastResponseTime: number
+  errorCount: number
+}> {
+  const result = new Map()
+  for (const [key, pooled] of clientPool) {
+    result.set(key, {
+      connected: pooled.client.connected,
+      lastUsed: pooled.lastUsed,
+      lastResponseTime: pooled.lastResponseTime,
+      errorCount: pooled.errorCount
+    })
+  }
+  return result
+}
+
+/**
+ * 移除客户端连接
+ */
+export async function removeIncusClient(hostId: number): Promise<void> {
+  const key = `${hostId}`
+  if (clientPool.has(key)) {
+    const pooled = clientPool.get(key)!
+    await pooled.client.close()
+    clientPool.delete(key)
+  }
+}
+
+/**
+ * 获取 Incus 客户端（别名，用于流量调度器等服务）
+ */
+export const getIncusClientFromPool = getIncusClient
+
+/**
+ * 关闭所有连接
+ */
+export async function closeAllClients(): Promise<void> {
+  if (cleanupInterval) {
+    clearInterval(cleanupInterval)
+    cleanupInterval = null
+  }
+  
+  for (const pooled of clientPool.values()) {
+    try {
+      await pooled.client.close()
+    } catch {
+      // 忽略关闭错误
+    }
+  }
+  clientPool.clear()
+}
diff --git a/server/src/lib/incus/incus-restore.ts b/server/src/lib/incus/incus-restore.ts
new file mode 100644
index 0000000..f8d014f
--- /dev/null
+++ b/server/src/lib/incus/incus-restore.ts
@@ -0,0 +1,188 @@
+/**
+ * Incus 备份恢复服务
+ * 实现从备份流恢复实例、重命名实例等功能
+ */
+
+import { Agent, request } from 'undici'
+import { readFileSync } from 'fs'
+import type { Readable } from 'stream'
+import type { IncusClient } from './incus-client.js'
+import type { IncusApiResponse } from '../../types/incus.js'
+
+/**
+ * 生成临时实例名称
+ * 格式: {originalName}-restore-{timestamp}
+ */
+export function generateTempInstanceName(originalName: string): string {
+    const timestamp = Date.now()
+    return `${originalName}-restore-${timestamp}`
+}
+
+/**
+ * 等待 Incus 异步操作完成（用于恢复操作，超时 5 分钟）
+ */
+async function waitForRestoreOperation(
+    baseUrl: string,
+    operationUrl: string,
+    agent: Agent,
+    timeout: number = 300000 // 5 分钟
+): Promise<void> {
+    const startTime = Date.now()
+
+    while (Date.now() - startTime < timeout) {
+        const waitTimeout = Math.min(30, Math.floor((timeout - (Date.now() - startTime)) / 1000))
+        if (waitTimeout <= 0) break
+
+        try {
+            const waitUrl = `${baseUrl}${operationUrl}/wait?timeout=${waitTimeout}`
+
+            const response = await request(waitUrl, {
+                method: 'GET',
+                dispatcher: agent,
+                headers: { 'Content-Type': 'application/json' }
+            })
+
+            const text = await response.body.text()
+            
+            let data: IncusApiResponse
+            try {
+                data = JSON.parse(text) as IncusApiResponse
+            } catch {
+                console.error(`[Incus Restore] 解析响应失败: ${text.substring(0, 200)}`)
+                throw new Error(`无效的响应: ${text.substring(0, 100)}`)
+            }
+
+            const metadata = data.metadata as { status?: string; status_code?: number; err?: string; error?: string } | undefined
+            const status = metadata?.status || 'unknown'
+            const statusCode = metadata?.status_code
+
+            if (status === 'Success' || statusCode === 200) {
+                return
+            }
+
+            if (status === 'Failure' || (statusCode && statusCode >= 400)) {
+                const errMsg = metadata?.err || metadata?.error || '操作失败'
+                console.error(`[Incus Restore] 操作失败: ${errMsg}`)
+                throw new Error(errMsg)
+            }
+
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            if (errorMessage.includes('操作失败') || errorMessage.includes('Failure')) {
+                throw err
+            }
+            console.error(`[Incus Restore] 轮询出错: ${errorMessage}`)
+            await new Promise(r => setTimeout(r, 2000))
+        }
+    }
+
+    throw new Error('恢复操作超时 (5 分钟)')
+}
+
+interface RestoreFromStreamParams {
+    client: IncusClient
+    backupStream: Readable
+    targetName: string
+    poolName?: string
+}
+
+/**
+ * 从备份流恢复实例
+ * 使用二进制流直接 POST 到 Incus API
+ */
+export async function restoreFromStream({
+    client,
+    backupStream,
+    targetName,
+    poolName
+}: RestoreFromStreamParams): Promise<void> {
+    if (!client.certPath || !client.keyPath) {
+        throw new Error('Certificate path not configured')
+    }
+
+    const cert = readFileSync(client.certPath)
+    const key = readFileSync(client.keyPath)
+
+    // 创建专用 Agent，设置长超时
+    const restoreAgent = new Agent({
+        connect: {
+            cert,
+            key,
+            rejectUnauthorized: false,
+            timeout: 60000
+        },
+        bodyTimeout: 0, // 禁用 body 超时
+        headersTimeout: 60000
+    })
+
+    try {
+        const url = `${client.baseUrl}/1.0/instances`
+
+        // 构建 headers
+        // Incus 使用 X-Incus-* headers，但也兼容 X-LXD-* (向后兼容)
+        const headers: Record<string, string> = {
+            'Content-Type': 'application/octet-stream',
+            'X-Incus-name': targetName
+        }
+        if (poolName) {
+            headers['X-Incus-pool'] = poolName
+        }
+
+        const response = await request(url, {
+            method: 'POST',
+            dispatcher: restoreAgent,
+            headers,
+            body: backupStream
+        })
+
+        const text = await response.body.text()
+        
+        let data: IncusApiResponse
+        try {
+            data = JSON.parse(text) as IncusApiResponse
+        } catch {
+            console.error(`[Incus Restore] 解析响应失败: ${text.substring(0, 200)}`)
+            throw new Error(`无效的响应: ${text.substring(0, 200)}`)
+        }
+
+        if (data.type === 'error') {
+            console.error(`[Incus Restore] 恢复失败: ${data.error}`)
+            throw new Error(data.error || '恢复失败')
+        }
+
+        // 异步操作，等待完成
+        if (data.type === 'async' && data.operation) {
+            await waitForRestoreOperation(client.baseUrl, data.operation, restoreAgent)
+        }
+    } finally {
+        await restoreAgent.close().catch(() => { })
+    }
+}
+
+/**
+ * 重命名实例
+ */
+export async function renameInstance(
+    client: IncusClient,
+    oldName: string,
+    newName: string
+): Promise<void> {
+    await client.request('POST', `/1.0/instances/${oldName}`, {
+        name: newName
+    })
+}
+
+/**
+ * 检查实例是否存在
+ */
+export async function instanceExists(
+    client: IncusClient,
+    instanceName: string
+): Promise<boolean> {
+    try {
+        await client.request('GET', `/1.0/instances/${instanceName}`)
+        return true
+    } catch {
+        return false
+    }
+}
diff --git a/server/src/lib/incus/incus-snapshots.ts b/server/src/lib/incus/incus-snapshots.ts
new file mode 100644
index 0000000..f2f2d06
--- /dev/null
+++ b/server/src/lib/incus/incus-snapshots.ts
@@ -0,0 +1,79 @@
+/**
+ * Incus 快照管理
+ */
+
+import type { IncusClient } from './incus-client.js'
+import type { IncusSnapshot } from '../../types/incus.js'
+
+/**
+ * 获取快照列表
+ */
+export async function listSnapshots(client: IncusClient, instanceName: string): Promise<IncusSnapshot[]> {
+  return client.request<IncusSnapshot[]>('GET', `/1.0/instances/${instanceName}/snapshots`)
+}
+
+/**
+ * 获取快照详情
+ */
+export async function getSnapshot(
+  client: IncusClient,
+  instanceName: string,
+  snapshotName: string
+): Promise<IncusSnapshot> {
+  return client.request<IncusSnapshot>(
+    'GET',
+    `/1.0/instances/${instanceName}/snapshots/${snapshotName}`
+  )
+}
+
+/**
+ * 创建快照
+ */
+export async function createSnapshot(
+  client: IncusClient,
+  instanceName: string,
+  snapshotName: string
+): Promise<unknown> {
+  return client.request('POST', `/1.0/instances/${instanceName}/snapshots`, {
+    name: snapshotName
+  })
+}
+
+/**
+ * 删除快照
+ */
+export async function deleteSnapshot(
+  client: IncusClient,
+  instanceName: string,
+  snapshotName: string
+): Promise<unknown> {
+  return client.request('DELETE', `/1.0/instances/${instanceName}/snapshots/${snapshotName}`)
+}
+
+/**
+ * 恢复快照
+ */
+export async function restoreSnapshot(
+  client: IncusClient,
+  instanceName: string,
+  snapshotName: string
+): Promise<unknown> {
+  return client.request('PUT', `/1.0/instances/${instanceName}`, {
+    restore: snapshotName
+  })
+}
+
+/**
+ * 重命名快照
+ */
+export async function renameSnapshot(
+  client: IncusClient,
+  instanceName: string,
+  snapshotName: string,
+  newName: string
+): Promise<unknown> {
+  return client.request('POST', `/1.0/instances/${instanceName}/snapshots/${snapshotName}`, {
+    name: newName
+  })
+}
+
diff --git a/server/src/lib/incus/incus-storage.ts b/server/src/lib/incus/incus-storage.ts
new file mode 100644
index 0000000..92bc60d
--- /dev/null
+++ b/server/src/lib/incus/incus-storage.ts
@@ -0,0 +1,109 @@
+/**
+ * Incus 存储池管理
+ */
+
+import type { IncusClient } from './incus-client.js'
+import type { IncusStoragePool } from '../../types/incus.js'
+
+export interface CreateStoragePoolOptions {
+  name: string
+  driver: 'zfs' | 'lvm' | 'btrfs' | 'dir'
+  config: Record<string, string>
+  description?: string
+}
+
+export interface StoragePoolWithResources extends IncusStoragePool {
+  resources?: {
+    space?: {
+      used: number
+      total: number
+    }
+  }
+}
+
+/**
+ * 获取存储池列表
+ * Incus API 返回 URL 列表，需要分别请求每个存储池的详情
+ */
+export async function listStoragePools(client: IncusClient): Promise<IncusStoragePool[]> {
+  // Incus 返回 URL 列表如 ["/1.0/storage-pools/default"]
+  const poolUrls = await client.request<string[]>('GET', '/1.0/storage-pools')
+  
+  // 如果返回为空，直接返回空数组
+  if (!poolUrls || poolUrls.length === 0) {
+    return []
+  }
+
+  // 分别获取每个存储池的详情
+  const pools = await Promise.all(
+    poolUrls.map(async (url) => {
+      // 从 URL 提取存储池名称: "/1.0/storage-pools/default" -> "default"
+      const name = url.split('/').pop() || ''
+      if (!name) return null
+      
+      try {
+        return await getStoragePool(client, name)
+      } catch {
+        // 单个存储池获取失败，返回基本信息
+        return { name, driver: 'unknown', config: {} }
+      }
+    })
+  )
+
+  return pools.filter((p): p is IncusStoragePool => p !== null)
+}
+
+/**
+ * 获取存储池详情
+ */
+export async function getStoragePool(client: IncusClient, name: string): Promise<IncusStoragePool> {
+  return client.request<IncusStoragePool>('GET', `/1.0/storage-pools/${name}`)
+}
+
+/**
+ * 获取存储池资源使用情况
+ */
+export async function getStoragePoolResources(client: IncusClient, name: string): Promise<{ space?: { used: number; total: number } }> {
+  return client.request<{ space?: { used: number; total: number } }>('GET', `/1.0/storage-pools/${name}/resources`)
+}
+
+/**
+ * 创建存储池
+ */
+export async function createStoragePool(client: IncusClient, options: CreateStoragePoolOptions): Promise<void> {
+  await client.request('POST', '/1.0/storage-pools', {
+    name: options.name,
+    driver: options.driver,
+    config: options.config,
+    description: options.description || ''
+  })
+}
+
+/**
+ * 删除存储池
+ */
+export async function deleteStoragePool(client: IncusClient, name: string): Promise<void> {
+  await client.request('DELETE', `/1.0/storage-pools/${name}`)
+}
+
+/**
+ * 修改存储池配置
+ * 使用 PATCH 方法进行部分更新
+ */
+export interface UpdateStoragePoolOptions {
+  config?: Record<string, string>
+  description?: string
+}
+
+export async function updateStoragePool(client: IncusClient, name: string, options: UpdateStoragePoolOptions): Promise<void> {
+  const payload: Record<string, unknown> = {}
+  
+  if (options.config) {
+    payload.config = options.config
+  }
+  if (options.description !== undefined) {
+    payload.description = options.description
+  }
+  
+  await client.request('PATCH', `/1.0/storage-pools/${name}`, payload)
+}
diff --git a/server/src/lib/incus/incus-traffic.ts b/server/src/lib/incus/incus-traffic.ts
new file mode 100644
index 0000000..2280e09
--- /dev/null
+++ b/server/src/lib/incus/incus-traffic.ts
@@ -0,0 +1,241 @@
+/**
+ * Incus 流量管理
+ * 负责获取容器网络流量计数器和应用带宽限速
+ */
+
+import type { IncusClient } from './incus-client.js'
+import { getInstance, updateInstance } from './incus-instances.js'
+import { generateVmNicMacs } from '../vm-network-identifiers.js'
+
+/**
+ * 网络流量计数器
+ */
+export interface NetworkCounters {
+    rxBytes: bigint
+    txBytes: bigint
+}
+
+/**
+ * 实例状态中的网络信息
+ */
+export interface InstanceStateNetwork {
+    addresses?: Array<{
+        family: string
+        address: string
+    }>
+    hwaddr?: string
+    counters?: {
+        bytes_received?: number | string
+        bytes_sent?: number | string
+        packets_received?: number
+        packets_sent?: number
+    }
+    state?: string
+}
+
+export interface InstanceTrafficState {
+    status?: string
+    network?: Record<string, InstanceStateNetwork>
+}
+
+function normalizeMac(value: unknown): string | null {
+    return typeof value === 'string' && value.trim()
+        ? value.trim().toLowerCase()
+        : null
+}
+
+function getBillableVmMacs(instanceName: string): Set<string> {
+    // VM guest interface names are distro-dependent (for example enp5s0),
+    // so match the deterministic MACs we assign when creating VM NICs.
+    const macs = generateVmNicMacs(instanceName)
+    return new Set([macs.eth0.toLowerCase(), macs.eth1.toLowerCase()])
+}
+
+function isBillableNetworkInterface(
+    ifName: string,
+    ifData: InstanceStateNetwork,
+    billableVmMacs: Set<string>
+): boolean {
+    if (ifName === 'lo') return false
+
+    // Incudal-created LXC NICs are eth0 (IPv4/NAT) and optionally eth1 (routed IPv6).
+    // Do not count guest-created bridges/veth/docker/tunnel interfaces; those can
+    // reflect the same packet again and inflate quota usage.
+    if (ifName === 'eth0' || ifName === 'eth1') {
+        return true
+    }
+
+    const hwaddr = normalizeMac(ifData.hwaddr)
+    return hwaddr !== null && billableVmMacs.has(hwaddr)
+}
+
+function isLikelyExternalGuestInterface(ifName: string): boolean {
+    const normalized = ifName.toLowerCase()
+    return /^eth[0-9]+$/.test(normalized) || /^en(?:o|p|s|x)[a-z0-9]+$/.test(normalized)
+}
+
+function counterToBigInt(value: number | string | undefined): bigint {
+    if (typeof value === 'string') {
+        return /^\d+$/.test(value) ? BigInt(value) : 0n
+    }
+
+    if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+        return 0n
+    }
+    return BigInt(Math.floor(value))
+}
+
+function addCounters(
+    totals: NetworkCounters,
+    counters: InstanceStateNetwork['counters'] | undefined
+): void {
+    if (!counters) return
+    totals.rxBytes += counterToBigInt(counters.bytes_received)
+    totals.txBytes += counterToBigInt(counters.bytes_sent)
+}
+
+/**
+ * 获取实例网络流量计数器
+ * 只统计 Incudal 创建的外联网卡，避免 Docker/veth/隧道等 guest 内部接口重复计量
+ */
+export async function getTrafficCounters(
+    client: IncusClient,
+    instanceName: string
+): Promise<NetworkCounters> {
+    const state = await client.request<InstanceTrafficState>('GET', `/1.0/instances/${instanceName}/state`)
+    return getTrafficCountersFromState(instanceName, state)
+}
+
+export function getTrafficCountersFromState(
+    instanceName: string,
+    state: InstanceTrafficState
+): NetworkCounters {
+    const billableVmMacs = getBillableVmMacs(instanceName)
+
+    const totals: NetworkCounters = { rxBytes: 0n, txBytes: 0n }
+    const fallbackInterfaces: Array<[string, InstanceStateNetwork]> = []
+    let hasStrictBillableInterface = false
+
+    if (state.network) {
+        for (const [ifName, ifData] of Object.entries(state.network)) {
+            if (isBillableNetworkInterface(ifName, ifData, billableVmMacs)) {
+                hasStrictBillableInterface = true
+                addCounters(totals, ifData.counters)
+
+                if (process.env.DEBUG_TRAFFIC === 'true' && ifData.counters) {
+                    console.log(`[Traffic Debug] ${instanceName} - ${ifName}: rx=${ifData.counters.bytes_received}, tx=${ifData.counters.bytes_sent}`)
+                }
+                continue
+            }
+
+            if (isLikelyExternalGuestInterface(ifName)) {
+                fallbackInterfaces.push([ifName, ifData])
+                continue
+            }
+
+            if (process.env.DEBUG_TRAFFIC === 'true' && ifData.counters) {
+                console.log(`[Traffic Debug] ${instanceName} - ${ifName}: skipped non-billable interface`)
+            }
+        }
+
+        if (!hasStrictBillableInterface && fallbackInterfaces.length > 0) {
+            for (const [ifName, ifData] of fallbackInterfaces) {
+                addCounters(totals, ifData.counters)
+
+                if (process.env.DEBUG_TRAFFIC === 'true') {
+                    console.log(`[Traffic Debug] ${instanceName} - ${ifName}: fallback rx=${ifData.counters?.bytes_received || 0}, tx=${ifData.counters?.bytes_sent || 0}`)
+                }
+            }
+        }
+    }
+
+    return totals
+}
+
+/**
+ * 限速带宽值 (1Mbit)
+ */
+export const THROTTLE_BANDWIDTH = '1Mbit'
+
+/**
+ * 应用带宽限速
+ * 设置 limits.ingress 和 limits.egress 为 1Mbit
+ */
+export async function applyThrottle(
+    client: IncusClient,
+    instanceName: string
+): Promise<void> {
+    const instance = await getInstance(client, instanceName)
+    const devices = instance.devices || {}
+
+    // 找到网络设备并应用限速
+    for (const [deviceName, device] of Object.entries(devices)) {
+        if (device.type === 'nic') {
+            devices[deviceName] = {
+                ...device,
+                'limits.ingress': THROTTLE_BANDWIDTH,
+                'limits.egress': THROTTLE_BANDWIDTH
+            }
+        }
+    }
+
+    await updateInstance(client, instanceName, { devices })
+}
+
+/**
+ * 恢复原始带宽
+ * 根据实例/套餐的原始带宽配置恢复，或移除限制
+ */
+export async function restoreBandwidth(
+    client: IncusClient,
+    instanceName: string,
+    limitsIngress: string | null,
+    limitsEgress: string | null
+): Promise<void> {
+    const instance = await getInstance(client, instanceName)
+    const devices = instance.devices || {}
+
+    for (const [deviceName, device] of Object.entries(devices)) {
+        if (device.type === 'nic') {
+            const updatedDevice = { ...device }
+
+            if (limitsIngress) {
+                updatedDevice['limits.ingress'] = limitsIngress
+            } else {
+                delete updatedDevice['limits.ingress']
+            }
+
+            if (limitsEgress) {
+                updatedDevice['limits.egress'] = limitsEgress
+            } else {
+                delete updatedDevice['limits.egress']
+            }
+
+            devices[deviceName] = updatedDevice
+        }
+    }
+
+    await updateInstance(client, instanceName, { devices })
+}
+
+/**
+ * 检查实例是否已被限速
+ */
+export async function isThrottled(
+    client: IncusClient,
+    instanceName: string
+): Promise<boolean> {
+    const instance = await getInstance(client, instanceName)
+    const devices = instance.devices || {}
+
+    for (const device of Object.values(devices)) {
+        if (device.type === 'nic') {
+            const ingress = device['limits.ingress'] as string | undefined
+            if (ingress === THROTTLE_BANDWIDTH) {
+                return true
+            }
+        }
+    }
+
+    return false
+}
diff --git a/server/src/lib/incus/incus-utils.ts b/server/src/lib/incus/incus-utils.ts
new file mode 100644
index 0000000..1324d72
--- /dev/null
+++ b/server/src/lib/incus/incus-utils.ts
@@ -0,0 +1,119 @@
+/**
+ * Incus 客户端工具函数
+ */
+
+import { request } from 'undici'
+import type { IncusClient } from './incus-client.js'
+import type { IncusApiResponse, IncusOperation } from '../../types/incus.js'
+
+/**
+ * 等待异步操作完成
+ * @param timeout 超时时间（毫秒），默认 120 秒
+ */
+export async function waitForOperation(
+  client: IncusClient,
+  operationUrl: string,
+  timeout: number = 300000 // 从 120000 放宽到 300000 (5分钟)
+): Promise<unknown> {
+  const startTime = Date.now()
+
+  while (Date.now() - startTime < timeout) {
+    const op = await client.request<IncusOperation>('GET', `${operationUrl}/wait?timeout=10`)
+
+    if (op.status === 'Success') {
+      return op.metadata
+    }
+
+    if (op.status === 'Failure') {
+      throw new Error(op.err || op.error || '操作失败')
+    }
+  }
+
+  throw new Error('Operation timeout (5 minutes)')
+}
+
+/**
+ * 等待异步操作完成（长超时）
+ */
+export async function waitForOperationLong(
+  client: IncusClient,
+  operationUrl: string,
+  timeout: number = 600000
+): Promise<unknown> {
+  const startTime = Date.now()
+
+  while (Date.now() - startTime < timeout) {
+    // Wait up to 30 seconds per poll
+    const waitTimeout = Math.min(30, Math.floor((timeout - (Date.now() - startTime)) / 1000))
+    if (waitTimeout <= 0) break
+
+    try {
+      // Use /wait endpoint for long polling
+      const waitUrl = `${client.baseUrl}${operationUrl}/wait?timeout=${waitTimeout}`
+
+      const response = await request(waitUrl, {
+        method: 'GET',
+        dispatcher: client.agent!,
+        headers: { 'Content-Type': 'application/json' }
+      })
+
+      const text = await response.body.text()
+
+      let data: IncusApiResponse
+      try {
+        data = JSON.parse(text) as IncusApiResponse
+      } catch {
+        console.error(`[Incus] 解析响应失败: ${text.substring(0, 200)}`)
+        throw new Error(`无效的响应: ${text.substring(0, 100)}`)
+      }
+
+      // Check operation status in metadata
+      const opStatus = (data.metadata as IncusOperation)?.status || (data as unknown as { status?: string }).status
+      const opStatusCode = (data.metadata as IncusOperation)?.status_code || (data as unknown as { status_code?: number }).status_code
+
+      if (opStatus === 'Success' || opStatusCode === 200) {
+        return data.metadata || data
+      }
+
+      if (opStatus === 'Failure' || (opStatusCode && opStatusCode >= 400)) {
+        const errMsg = (data.metadata as IncusOperation)?.err ||
+          (data as unknown as { error?: string }).error ||
+          (data.metadata as IncusOperation)?.error ||
+          '操作失败'
+        console.error(`[Incus] 操作失败: ${errMsg}`)
+        throw new Error(errMsg)
+      }
+
+      // Still running, continue polling
+
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      if (errorMessage.includes('操作失败') || errorMessage.includes('Failure')) {
+        throw err
+      }
+      console.error(`[Incus] 轮询出错: ${errorMessage}`)
+      // Brief pause before retry
+      await new Promise(r => setTimeout(r, 2000))
+    }
+  }
+
+  throw new Error('Image download timeout (10 minutes)')
+}
+
+/**
+ * 将 Incus 实例状态转换为系统状态
+ * 注意：返回的状态必须与数据库 Instance.status 类型兼容
+ * 有效状态: 'creating' | 'running' | 'stopped' | 'error' | 'deleted'
+ */
+export function mapInstanceStatus(incusStatus: string): string {
+  const statusMap: Record<string, string> = {
+    'Running': 'running',
+    'Stopped': 'stopped',
+    'Frozen': 'stopped',     // Frozen 映射为 stopped（对用户来说都是不可用状态）
+    'Error': 'error',
+    'Starting': 'creating',  // Starting 映射为 creating（启动中）
+    'Stopping': 'running'    // Stopping 映射为 running（还未完全停止，等下次同步）
+  }
+  return statusMap[incusStatus] || 'unknown'
+}
+
diff --git a/server/src/lib/incus/index.ts b/server/src/lib/incus/index.ts
new file mode 100644
index 0000000..803159e
--- /dev/null
+++ b/server/src/lib/incus/index.ts
@@ -0,0 +1,43 @@
+/**
+ * Incus 客户端 - 主入口
+ * 导出所有功能模块
+ */
+
+// 主类
+export { IncusClient } from './incus-client.js'
+
+// 实例管理
+export * from './incus-instances.js'
+
+// 镜像管理
+export * from './incus-images.js'
+
+// 快照管理
+export * from './incus-snapshots.js'
+
+// 备份管理
+export * from './incus-backups.js'
+
+// 网络管理
+export * from './incus-network.js'
+
+// 存储管理
+export * from './incus-storage.js'
+
+// 工具函数
+export { mapInstanceStatus } from './incus-utils.js'
+
+// 连接池管理
+export * from './incus-pool.js'
+
+// 流量管理
+export * from './incus-traffic.js'
+
+// 恢复管理 (只导出不冲突的函数)
+export {
+    generateTempInstanceName,
+    restoreFromStream,
+    renameInstance,
+    instanceExists
+} from './incus-restore.js'
+
diff --git a/server/src/lib/instance-audit.ts b/server/src/lib/instance-audit.ts
new file mode 100644
index 0000000..ef7de80
--- /dev/null
+++ b/server/src/lib/instance-audit.ts
@@ -0,0 +1,502 @@
+export type AuditSeverity = 'info' | 'low' | 'medium' | 'high'
+export type AuditFindingTarget = 'process' | 'network' | 'startup' | 'capability'
+export type AuditRuleTarget = 'process' | 'network' | 'startup'
+export type AuditRuleMatchType = 'contains' | 'regex' | 'exact'
+export type AuditRuleSource = 'builtin' | 'custom'
+
+export interface AuditProcess {
+  pid: number
+  ppid: number | null
+  user: string
+  stat: string
+  cpuPercent: number | null
+  memoryPercent: number | null
+  elapsed: string
+  command: string
+  args: string
+  raw: string
+  findings: string[]
+}
+
+export interface AuditConnection {
+  protocol: string
+  state: string
+  local: string
+  peer: string
+  process: string | null
+  pid: number | null
+  raw: string
+}
+
+export interface AuditStartupItem {
+  source: string
+  command: string
+  raw: string
+  findings: string[]
+}
+
+export interface AuditFinding {
+  id: string
+  severity: AuditSeverity
+  category: string
+  title: string
+  detail: string
+  targetType: AuditFindingTarget
+  ruleId?: string
+  ruleName?: string
+  ruleSource?: AuditRuleSource
+  matchedText?: string
+  recommendation?: string | null
+  pid?: number
+  evidence: string
+  ignored?: boolean
+  ignoreReason?: string | null
+}
+
+export interface AuditSummary {
+  riskLevel: AuditSeverity
+  processCount: number
+  connectionCount: number
+  listeningCount: number
+  startupItemCount: number
+  findingCount: number
+}
+
+export interface AuditRuleDefinition {
+  id: string
+  severity: AuditSeverity
+  category: string
+  name: string
+  description?: string | null
+  targetTypes: AuditRuleTarget[]
+  matchType: AuditRuleMatchType
+  patternText: string
+  caseSensitive: boolean
+  source: AuditRuleSource
+  enabled: boolean
+  recommendation?: string | null
+}
+
+export interface AuditIgnoreDefinition {
+  id: number
+  ruleId?: string | null
+  targetType?: AuditFindingTarget | null
+  matchText?: string | null
+  reason?: string | null
+  expiresAt?: Date | string | null
+}
+
+export const BUILTIN_AUDIT_RULES: AuditRuleDefinition[] = [
+  {
+    id: 'packet-tool-hping',
+    severity: 'high',
+    category: 'network-abuse',
+    name: '疑似发包工具进程',
+    description: '匹配常见的发包、构造数据包或压测类工具。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(hping[3]?|nping|mz|mausezahn|mzbench|pktgen|packit|nemesis|tcpreplay|scapy|flood|synflood|udpflood|icmpflood|httpflood|slowloris|goldeneye|hulk|xerxes)\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '请先确认进程归属、流量用途和客户业务背景，再决定是否手动处置。'
+  },
+  {
+    id: 'mass-scan-tool',
+    severity: 'high',
+    category: 'network-abuse',
+    name: '疑似大规模扫描工具',
+    description: '匹配常见的公网大范围扫描或高频扫描工具。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(masscan|zmap|zdns|zgrab2?|naabu|rustscan|httpx|nuclei|fscan|kscan|gogo|goscan|scanrs|nmap)\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '请核实扫描是否经过授权，并结合网络连接、工单或客户说明判断。'
+  },
+  {
+    id: 'flood-tool-name',
+    severity: 'high',
+    category: 'network-abuse',
+    name: '疑似 Flood/DDoS 程序',
+    description: '匹配常见 Flood、DDoS 工具名称或命令名称。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(syn[-_]?flood|udp[-_]?flood|http[-_]?flood|slowloris|goldeneye|hulk|xerxes|torshammer|ufonet|mhddos|ddosim|layer[47]|flooder|cc[-_]?attack|stress|hammer|python.*(ddos|flood|attack|hammer)|node.*(ddos|flood|attack))\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '建议按高风险处理。手动停止前请先保留进程参数和连接证据。'
+  },
+  {
+    id: 'proxy-panel',
+    severity: 'medium',
+    category: 'proxy-panel',
+    name: '疑似代理面板程序',
+    description: '匹配常见代理面板或相关管理面板名称。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(3x-ui|x-ui|v2-ui|s-ui|h-ui|marzban|v2board|sspanel|xboard|trojan-panel|hiddify|nebula|alpine|sub-web|subconverter|bt-panel|aapanel|aa-panel)\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '请确认当前节点规则是否允许此类应用，并结合客户业务说明判断。'
+  },
+  {
+    id: 'proxy-core',
+    severity: 'medium',
+    category: 'proxy-panel',
+    name: '疑似代理核心进程',
+    description: '匹配常见代理核心、转发核心或隧道类进程名称。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(xray|v2ray|sing-?box|trojan(-go|rs)?|hysteria2?|naive|brook|gost|ss-server|ss-rust|shadowsocks(-rust)?|tuic|juicity|clash(-meta)?|mihomo|reality|xtls|vless|vmess|frp[cs]?|nps|npc|chisel|ligolo(-ng)?|rathole|bore)\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '处置前请核对客户用途、节点政策和实际流量，避免误伤正常服务。'
+  },
+  {
+    id: 'miner',
+    severity: 'high',
+    category: 'resource-abuse',
+    name: '疑似挖矿进程',
+    description: '匹配常见加密货币挖矿进程名称。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(xmrig|xmrig-proxy|xmr-stak|xmrigcc|cpuminer|minerd|ethminer|lolminer|nbminer|teamredminer|t-rex|gminer|bzminer|srbminer|wildrig|rigel|miniZ|SRBMiner|moneroocean)\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '请结合 CPU 占用、运行时间和服务条款人工确认，违规后再执行处置。'
+  },
+  {
+    id: 'bruteforce',
+    severity: 'medium',
+    category: 'credential-attack',
+    name: '疑似爆破/撞库工具',
+    description: '匹配常见密码爆破、登录尝试或凭据攻击工具。',
+    targetTypes: ['process', 'startup'],
+    matchType: 'regex',
+    patternText: '\\b(hydra|thc-hydra|medusa|ncrack|patator|crowbar|brutespray|ffuf|gobuster|dirsearch|dirb|sshpass|brute)\\b',
+    caseSensitive: false,
+    source: 'builtin',
+    enabled: true,
+    recommendation: '请检查外连目标、登录尝试记录和客户说明，再决定是否手动处理。'
+  }
+]
+
+function normalizeCommandText(value: string): string {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+function parseNumber(value: string): number | null {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export function parseProcesses(output: string, limit = 300): AuditProcess[] {
+  const rows: AuditProcess[] = []
+  for (const rawLine of output.split(/\r?\n/)) {
+    const raw = rawLine.trim()
+    if (!raw) continue
+    const match = raw.match(/^(\d+)\s+(\d+)\s+(\S+)\s+(\S+)\s+([\d.]+)\s+([\d.]+)\s+(\S+)\s+(\S+)(?:\s+(.*))?$/)
+    if (!match) continue
+
+    const pid = Number(match[1])
+    if (!Number.isInteger(pid)) continue
+    const args = normalizeCommandText(match[9] || match[8] || '')
+    rows.push({
+      pid,
+      ppid: parseNumber(match[2]),
+      user: match[3],
+      stat: match[4],
+      cpuPercent: parseNumber(match[5]),
+      memoryPercent: parseNumber(match[6]),
+      elapsed: match[7],
+      command: match[8],
+      args,
+      raw,
+      findings: []
+    })
+    if (rows.length >= limit) break
+  }
+  return rows
+}
+
+function parsePidFromProcessColumn(value: string): number | null {
+  const match = value.match(/\bpid=(\d+)/)
+  if (!match) return null
+  const pid = Number(match[1])
+  return Number.isInteger(pid) ? pid : null
+}
+
+export function parseConnections(output: string, limit = 300): AuditConnection[] {
+  const rows: AuditConnection[] = []
+  for (const rawLine of output.split(/\r?\n/)) {
+    const raw = rawLine.trim()
+    if (!raw) continue
+    const fields = raw.split(/\s+/)
+    if (fields.length < 5) continue
+
+    const processText = fields.length > 6 ? fields.slice(6).join(' ') : null
+    rows.push({
+      protocol: fields[0] || '',
+      state: fields[1] || '',
+      local: fields[4] || '',
+      peer: fields[5] || '',
+      process: processText,
+      pid: processText ? parsePidFromProcessColumn(processText) : null,
+      raw
+    })
+    if (rows.length >= limit) break
+  }
+  return rows
+}
+
+export function parseStartupItems(output: string, limit = 200): AuditStartupItem[] {
+  const rows: AuditStartupItem[] = []
+  let source = 'startup'
+  for (const rawLine of output.split(/\r?\n/)) {
+    const raw = rawLine.trim()
+    if (!raw) continue
+    const sourceMatch = raw.match(/^\[(.+)\]$/)
+    if (sourceMatch) {
+      source = sourceMatch[1]
+      continue
+    }
+    rows.push({
+      source,
+      command: normalizeCommandText(raw),
+      raw,
+      findings: []
+    })
+    if (rows.length >= limit) break
+  }
+  return rows
+}
+
+function severityRank(severity: AuditSeverity): number {
+  return { info: 0, low: 1, medium: 2, high: 3 }[severity]
+}
+
+function maxSeverity(items: AuditFinding[]): AuditSeverity {
+  return items.reduce<AuditSeverity>((current, item) =>
+    severityRank(item.severity) > severityRank(current) ? item.severity : current,
+    items.length > 0 ? 'low' : 'info'
+  )
+}
+
+function buildFindingId(prefix: string, index: number, ruleId: string): string {
+  return `${prefix}-${index}-${ruleId}`
+}
+
+function findMatch(rule: AuditRuleDefinition, text: string): string | null {
+  if (!rule.enabled) return null
+  const patternText = rule.patternText.trim()
+  if (!patternText) return null
+
+  if (rule.matchType === 'regex') {
+    try {
+      const regex = new RegExp(patternText, rule.caseSensitive ? '' : 'i')
+      const match = text.match(regex)
+      return match?.[0] || null
+    } catch {
+      return null
+    }
+  }
+
+  const haystack = rule.caseSensitive ? text : text.toLowerCase()
+  const needle = rule.caseSensitive ? patternText : patternText.toLowerCase()
+  if (rule.matchType === 'exact') {
+    return haystack.trim() === needle.trim() ? patternText : null
+  }
+  return haystack.includes(needle) ? patternText : null
+}
+
+function isIgnoreActive(ignore: AuditIgnoreDefinition, now: Date): boolean {
+  if (!ignore.expiresAt) return true
+  const expiresAt = ignore.expiresAt instanceof Date ? ignore.expiresAt : new Date(ignore.expiresAt)
+  return Number.isNaN(expiresAt.getTime()) || expiresAt > now
+}
+
+function applyIgnore(finding: AuditFinding, ignores: AuditIgnoreDefinition[], now: Date): AuditFinding {
+  for (const ignore of ignores) {
+    if (!isIgnoreActive(ignore, now)) continue
+    if (ignore.ruleId && ignore.ruleId !== finding.ruleId) continue
+    if (ignore.targetType && ignore.targetType !== finding.targetType) continue
+    if (ignore.matchText) {
+      const needle = ignore.matchText.toLowerCase()
+      const text = `${finding.title} ${finding.detail} ${finding.evidence}`.toLowerCase()
+      if (!text.includes(needle)) continue
+    }
+    return {
+      ...finding,
+      ignored: true,
+      ignoreReason: ignore.reason || null
+    }
+  }
+  return finding
+}
+
+function localizeFindingSubject(targetType: AuditFindingTarget, subject: string): string {
+  if (targetType === 'startup') return `启动项 ${subject}`
+  if (targetType === 'network') return `网络连接 ${subject}`
+  return subject
+}
+
+function buildRuleFinding(params: {
+  id: string
+  rule: AuditRuleDefinition
+  targetType: AuditFindingTarget
+  pid?: number
+  subject: string
+  matchedText: string
+  evidence: string
+}): AuditFinding {
+  return {
+    id: params.id,
+    severity: params.rule.severity,
+    category: params.rule.category,
+    title: params.rule.name,
+    detail: `${localizeFindingSubject(params.targetType, params.subject)} 命中审查规则 ${params.rule.id}。`,
+    targetType: params.targetType,
+    ruleId: params.rule.id,
+    ruleName: params.rule.name,
+    ruleSource: params.rule.source,
+    matchedText: params.matchedText,
+    recommendation: params.rule.recommendation || null,
+    pid: params.pid,
+    evidence: params.evidence.slice(0, 800)
+  }
+}
+
+export function analyzeAuditData(input: {
+  processes: AuditProcess[]
+  connections: AuditConnection[]
+  startupItems: AuditStartupItem[]
+  rules?: AuditRuleDefinition[]
+  ignores?: AuditIgnoreDefinition[]
+}): { findings: AuditFinding[]; summary: AuditSummary } {
+  const findings: AuditFinding[] = []
+  const now = new Date()
+  const rules = (input.rules?.length ? input.rules : BUILTIN_AUDIT_RULES).filter(rule => rule.enabled)
+  const ignores = input.ignores || []
+
+  input.processes.forEach((process, index) => {
+    const text = `${process.command} ${process.args}`
+    for (const rule of rules.filter(rule => rule.targetTypes.includes('process'))) {
+      const matchedText = findMatch(rule, text)
+      if (!matchedText) continue
+      process.findings.push(rule.name)
+      findings.push(buildRuleFinding({
+        id: buildFindingId('process', index, rule.id),
+        rule,
+        targetType: 'process',
+        pid: process.pid,
+        subject: `PID ${process.pid} (${process.command})`,
+        matchedText,
+        evidence: process.raw
+      }))
+    }
+  })
+
+  input.startupItems.forEach((item, index) => {
+    for (const rule of rules.filter(rule => rule.targetTypes.includes('startup'))) {
+      const matchedText = findMatch(rule, item.command)
+      if (!matchedText) continue
+      item.findings.push(rule.name)
+      findings.push(buildRuleFinding({
+        id: buildFindingId('startup', index, rule.id),
+        rule,
+        targetType: 'startup',
+        subject: `来源 ${item.source}`,
+        matchedText,
+        evidence: item.raw
+      }))
+    }
+  })
+
+  input.connections.forEach((connection, index) => {
+    for (const rule of rules.filter(rule => rule.targetTypes.includes('network'))) {
+      const matchedText = findMatch(rule, connection.raw)
+      if (!matchedText) continue
+      findings.push(buildRuleFinding({
+        id: buildFindingId('network', index, rule.id),
+        rule,
+        targetType: 'network',
+        pid: connection.pid || undefined,
+        subject: `${connection.protocol} ${connection.local} -> ${connection.peer}`,
+        matchedText,
+        evidence: connection.raw
+      }))
+    }
+  })
+
+  const udpConnections = input.connections.filter(row => /^udp/i.test(row.protocol)).length
+  if (udpConnections >= 100) {
+    findings.push({
+      id: 'network-high-udp-connection-count',
+      severity: 'medium',
+      category: 'network-anomaly',
+      title: 'UDP 连接数量偏高',
+      detail: `本次扫描从 ss/netstat 返回 ${udpConnections} 条 UDP 连接记录，请结合业务用途判断是否异常。`,
+      targetType: 'network',
+      evidence: input.connections.filter(row => /^udp/i.test(row.protocol)).slice(0, 5).map(row => row.raw).join('\n')
+    })
+  }
+
+  const highCpuProcesses = input.processes.filter(process => (process.cpuPercent ?? 0) >= 80)
+  for (const process of highCpuProcesses.slice(0, 5)) {
+    findings.push({
+      id: `process-${process.pid}-high-cpu`,
+      severity: 'low',
+      category: 'resource-anomaly',
+      title: 'CPU 占用偏高的进程',
+      detail: `PID ${process.pid} 当前 CPU 占用为 ${process.cpuPercent}%。`,
+      targetType: 'process',
+      pid: process.pid,
+      evidence: process.raw.slice(0, 500)
+    })
+  }
+
+  const listeningCount = input.connections.filter(row => row.state.toUpperCase() === 'LISTEN').length
+  const annotatedFindings = findings.map(finding => applyIgnore(finding, ignores, now))
+  const activeFindings = annotatedFindings.filter(finding => !finding.ignored)
+
+  return {
+    findings: annotatedFindings.sort((a, b) => Number(a.ignored) - Number(b.ignored) || severityRank(b.severity) - severityRank(a.severity)),
+    summary: {
+      riskLevel: maxSeverity(activeFindings),
+      processCount: input.processes.length,
+      connectionCount: input.connections.length,
+      listeningCount,
+      startupItemCount: input.startupItems.length,
+      findingCount: activeFindings.length
+    }
+  }
+}
+
+export function buildProcessAuditCommand(): string {
+  return 'ps -eo pid,ppid,user,stat,pcpu,pmem,etime,comm,args --no-headers 2>/dev/null | head -n 300 || true'
+}
+
+export function buildConnectionAuditCommand(): string {
+  return '(ss -H -tunap 2>/dev/null || netstat -tunap 2>/dev/null || true) | head -n 300'
+}
+
+export function buildStartupAuditCommand(): string {
+  return [
+    'printf "[systemd]\\n"',
+    '(systemctl list-units --type=service --state=running --no-legend --no-pager 2>/dev/null | head -n 80 || true)',
+    'printf "[cron]\\n"',
+    '(crontab -l 2>/dev/null || true)',
+    'printf "[rc-local]\\n"',
+    '(test -f /etc/rc.local && sed -n "1,120p" /etc/rc.local || true)',
+    'printf "[supervisor]\\n"',
+    '(command -v supervisorctl >/dev/null 2>&1 && supervisorctl status 2>/dev/null || true)',
+    'printf "[pm2]\\n"',
+    '(command -v pm2 >/dev/null 2>&1 && pm2 list --no-color 2>/dev/null || true)'
+  ].join('; ')
+}
diff --git a/server/src/lib/instance-network-sync.ts b/server/src/lib/instance-network-sync.ts
new file mode 100644
index 0000000..4c0d42a
--- /dev/null
+++ b/server/src/lib/instance-network-sync.ts
@@ -0,0 +1,376 @@
+import type { Prisma } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import type { IncusInstance } from '../types/incus.js'
+
+type InstanceNetworkMode = 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+
+interface NetworkAddressEntry {
+  family: string
+  address: string
+  scope?: string
+}
+
+interface NetworkInterfaceState {
+  addresses?: NetworkAddressEntry[]
+}
+
+export interface IncusNetworkStateLike {
+  status?: string
+  network?: Record<string, NetworkInterfaceState>
+}
+
+export interface InstanceNetworkSyncTarget {
+  id: number
+  name?: string
+  hostId?: number | null
+  networkMode: string | null | undefined
+  ipv4: string | null | undefined
+  ipv6: string | null | undefined
+}
+
+export interface ResolvedInstanceNetworkAddresses {
+  ipv4: string | null
+  ipv6: string | null
+  ipv4Device: string
+  ipv6Device: string
+  configuredIpv6: string | null
+  observedIpv6: string | null
+}
+
+export interface PersistedInstanceNetworkAddresses {
+  ipv4Changed: boolean
+  oldIpv4: string | null
+  newIpv4: string | null
+  ipv6Changed: boolean
+  oldIpv6: string | null
+  newIpv6: string | null
+}
+
+const ROUTED_IPV6_MODES = new Set<InstanceNetworkMode>(['nat_ipv6', 'ipv6_only'])
+const SHARED_IPV6_MODES = new Set<InstanceNetworkMode>(['nat_ipv6_nat', 'ipv6_nat'])
+const SKIPPED_INTERFACES = ['lo', 'docker', 'br-', 'veth', 'warp', 'CloudflareWARP']
+
+function normalizeIpv6Address(value: string | null | undefined): string | null {
+  if (!value) return null
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  const first = trimmed.split(',')[0]?.trim() || ''
+  const raw = first.split('/')[0]?.trim() || ''
+  return raw || null
+}
+
+function isGlobalRoutableIpv6(value: string | null | undefined): value is string {
+  const normalized = normalizeIpv6Address(value)
+  if (!normalized) return false
+  const ip = normalized.toLowerCase()
+  return !ip.startsWith('fd')
+    && !ip.startsWith('fc')
+    && !ip.startsWith('fe80:')
+    && ip !== '::1'
+    && ip !== '::'
+}
+
+function shouldSkipInterface(iface: string): boolean {
+  return SKIPPED_INTERFACES.some(prefix => iface === prefix || iface.startsWith(prefix))
+}
+
+function getInstanceMode(mode: string | null | undefined): InstanceNetworkMode {
+  switch (mode) {
+    case 'nat_ipv6':
+    case 'nat_ipv6_nat':
+    case 'ipv6_only':
+    case 'ipv6_nat':
+      return mode
+    default:
+      return 'nat'
+  }
+}
+
+function pickGlobalIpv6(addresses: NetworkAddressEntry[] | undefined): string | null {
+  if (!addresses || addresses.length === 0) return null
+  for (const addr of addresses) {
+    if (addr.family !== 'inet6' || addr.scope !== 'global') continue
+    const normalized = normalizeIpv6Address(addr.address)
+    if (isGlobalRoutableIpv6(normalized)) {
+      return normalized
+    }
+  }
+  return null
+}
+
+export function extractIpv4FromState(state: IncusNetworkStateLike | null | undefined): string | null {
+  if (!state?.network) return null
+
+  const eth0 = state.network.eth0
+  if (eth0?.addresses) {
+    for (const addr of eth0.addresses) {
+      if (addr.family === 'inet' && addr.scope === 'global') {
+        return addr.address
+      }
+    }
+  }
+
+  for (const [iface, info] of Object.entries(state.network)) {
+    if (shouldSkipInterface(iface)) continue
+    for (const addr of info.addresses || []) {
+      if (addr.family === 'inet' && addr.scope === 'global') {
+        return addr.address
+      }
+    }
+  }
+
+  return null
+}
+
+export function extractIpv6FromState(state: IncusNetworkStateLike | null | undefined): string | null {
+  if (!state?.network) return null
+
+  const preferredInterfaces = ['eth1', 'enp5s0', 'ens5', 'eno1']
+  for (const iface of preferredInterfaces) {
+    const ipv6 = pickGlobalIpv6(state.network[iface]?.addresses)
+    if (ipv6) return ipv6
+  }
+
+  for (const [iface, info] of Object.entries(state.network)) {
+    if (shouldSkipInterface(iface)) continue
+    const ipv6 = pickGlobalIpv6(info.addresses)
+    if (ipv6) return ipv6
+  }
+
+  return null
+}
+
+function getDeviceEntries(instance: Pick<IncusInstance, 'devices' | 'expanded_devices'>): Array<[string, Record<string, unknown>]> {
+  const expanded = Object.entries(instance.expanded_devices || {})
+  if (expanded.length > 0) return expanded
+  return Object.entries(instance.devices || {})
+}
+
+export function extractConfiguredPrimaryIpv6(
+  instance: Pick<IncusInstance, 'devices' | 'expanded_devices'> | null | undefined
+): { address: string | null; device: string } {
+  if (!instance) {
+    return { address: null, device: 'eth1' }
+  }
+
+  const entries = getDeviceEntries(instance)
+  const ordered = [
+    ...entries.filter(([name]) => name === 'eth1'),
+    ...entries.filter(([name]) => name !== 'eth1')
+  ]
+
+  for (const [fallbackDevice, device] of ordered) {
+    const rawIpv6 = typeof device['ipv6.address'] === 'string' ? device['ipv6.address'] : null
+    const candidates = (rawIpv6 || '')
+      .split(',')
+      .map(item => normalizeIpv6Address(item))
+      .filter((item): item is string => Boolean(item))
+
+    const configuredIpv6 = candidates.find(item => isGlobalRoutableIpv6(item)) || null
+    if (configuredIpv6) {
+      const deviceName = typeof device.name === 'string' && device.name.trim()
+        ? device.name.trim()
+        : fallbackDevice
+      return { address: configuredIpv6, device: deviceName || 'eth1' }
+    }
+  }
+
+  return { address: null, device: 'eth1' }
+}
+
+export function resolveInstanceNetworkAddresses(
+  instance: InstanceNetworkSyncTarget,
+  incusInstance?: Pick<IncusInstance, 'devices' | 'expanded_devices'> | null,
+  state?: IncusNetworkStateLike | null
+): ResolvedInstanceNetworkAddresses {
+  const mode = getInstanceMode(instance.networkMode)
+  const observedIpv4 = extractIpv4FromState(state)
+  const observedIpv6 = extractIpv6FromState(state)
+  const configuredIpv6 = extractConfiguredPrimaryIpv6(incusInstance)
+
+  const resolvedIpv4 = observedIpv4 || instance.ipv4 || null
+
+  let resolvedIpv6: string | null = instance.ipv6 || null
+  if (ROUTED_IPV6_MODES.has(mode)) {
+    resolvedIpv6 = configuredIpv6.address || observedIpv6 || instance.ipv6 || null
+  } else if (SHARED_IPV6_MODES.has(mode)) {
+    resolvedIpv6 = observedIpv6 || instance.ipv6 || null
+  }
+
+  return {
+    ipv4: resolvedIpv4,
+    ipv6: resolvedIpv6,
+    ipv4Device: 'eth0',
+    ipv6Device: configuredIpv6.device,
+    configuredIpv6: configuredIpv6.address,
+    observedIpv6
+  }
+}
+
+async function syncPrimaryIpAddress(
+  tx: Prisma.TransactionClient,
+  instance: InstanceNetworkSyncTarget,
+  type: 'inet4' | 'inet6',
+  address: string | null,
+  device: string
+): Promise<void> {
+  if (!address) {
+    await tx.ipAddress.deleteMany({
+      where: {
+        instanceId: instance.id,
+        type,
+        isPrimary: true,
+        isCustom: false
+      }
+    })
+    return
+  }
+
+  let hostId = instance.hostId ?? null
+  if (!hostId) {
+    const currentInstance = await tx.instance.findUnique({
+      where: { id: instance.id },
+      select: { hostId: true }
+    })
+    hostId = currentInstance?.hostId ?? null
+  }
+
+  if (!hostId) {
+    throw new Error(`Unable to resolve host scope for instance ${instance.id}`)
+  }
+
+  const existingByAddress = await tx.instance.findFirst({
+    where: {
+      id: { not: instance.id },
+      status: { not: 'deleted' },
+      ...(type === 'inet4' ? { hostId: hostId! } : {}),
+      OR: [
+        type === 'inet4'
+          ? { ipv4: address }
+          : { ipv6: address },
+        {
+          ipAddresses: {
+            some: { address, type }
+          }
+        }
+      ]
+    },
+    select: { id: true }
+  })
+
+  if (existingByAddress) {
+    throw new Error(`IP address ${address} is already assigned to instance ${existingByAddress.id}`)
+  }
+
+  const existingPrimary = await tx.ipAddress.findFirst({
+    where: {
+      instanceId: instance.id,
+      type,
+      isPrimary: true,
+      isCustom: false
+    },
+    orderBy: { id: 'asc' },
+    select: { id: true }
+  })
+
+  let primaryRecordId: number
+  if (existingPrimary) {
+    await tx.ipAddress.update({
+      where: { id: existingPrimary.id },
+      data: {
+        address,
+        type,
+        isPrimary: true,
+        isCustom: false,
+        device,
+        host: {
+          connect: { id: hostId }
+        },
+        instance: {
+          connect: { id: instance.id }
+        }
+      }
+    })
+    primaryRecordId = existingPrimary.id
+  } else {
+    const created = await tx.ipAddress.create({
+      data: {
+        address,
+        type,
+        isPrimary: true,
+        isCustom: false,
+        device,
+        host: {
+          connect: { id: hostId }
+        },
+        instance: {
+          connect: { id: instance.id }
+        }
+      },
+      select: { id: true }
+    })
+    primaryRecordId = created.id
+  }
+
+  await tx.ipAddress.deleteMany({
+    where: {
+      instanceId: instance.id,
+      type,
+      isPrimary: true,
+      isCustom: false,
+      id: { not: primaryRecordId }
+    }
+  })
+}
+
+export async function persistResolvedInstanceNetworkAddresses(
+  instance: InstanceNetworkSyncTarget,
+  resolved: ResolvedInstanceNetworkAddresses,
+  options: { updateLastSyncedAt?: boolean } = {}
+): Promise<PersistedInstanceNetworkAddresses> {
+  const oldIpv4 = instance.ipv4 ?? null
+  const oldIpv6 = instance.ipv6 ?? null
+  const newIpv4 = resolved.ipv4 ?? null
+  const newIpv6 = resolved.ipv6 ?? null
+
+  const ipv4Changed = oldIpv4 !== newIpv4
+  const ipv6Changed = oldIpv6 !== newIpv6
+
+  await prisma.$transaction(async (tx) => {
+    const currentInstance = await tx.instance.findUnique({
+      where: { id: instance.id },
+      select: { status: true }
+    })
+    if (!currentInstance || currentInstance.status === 'deleted') {
+      return
+    }
+
+    const updateData: Record<string, unknown> = {}
+
+    if (ipv4Changed) updateData.ipv4 = newIpv4
+    if (ipv6Changed) updateData.ipv6 = newIpv6
+    if (options.updateLastSyncedAt) updateData.lastSyncedAt = new Date()
+
+    if (Object.keys(updateData).length > 0) {
+      await tx.instance.updateMany({
+        where: {
+          id: instance.id,
+          status: { not: 'deleted' }
+        },
+        data: updateData
+      })
+    }
+
+    await syncPrimaryIpAddress(tx, instance, 'inet4', newIpv4, resolved.ipv4Device)
+    await syncPrimaryIpAddress(tx, instance, 'inet6', newIpv6, resolved.ipv6Device)
+  })
+
+  return {
+    ipv4Changed,
+    oldIpv4,
+    newIpv4,
+    ipv6Changed,
+    oldIpv6,
+    newIpv6
+  }
+}
diff --git a/server/src/lib/instance-swap.ts b/server/src/lib/instance-swap.ts
new file mode 100644
index 0000000..1236211
--- /dev/null
+++ b/server/src/lib/instance-swap.ts
@@ -0,0 +1,43 @@
+function normalizeConfiguredSwapSize(sizeMb: number | null | undefined): number | null {
+  if (sizeMb === null || sizeMb === undefined) {
+    return null
+  }
+
+  return Math.max(0, Math.floor(sizeMb))
+}
+
+export function resolveEffectiveSwapSize(
+  instanceSizeMb: number | null | undefined,
+  planSizeMb: number | null | undefined
+): number {
+  const normalizedInstanceSize = normalizeConfiguredSwapSize(instanceSizeMb)
+  if (normalizedInstanceSize !== null) {
+    return normalizedInstanceSize
+  }
+
+  return normalizeConfiguredSwapSize(planSizeMb) ?? 0
+}
+
+export function shouldSyncInstanceSwapSizeWithPlan(
+  instanceSizeMb: number | null | undefined,
+  previousPlanSizeMb: number | null | undefined
+): boolean {
+  const normalizedInstanceSize = normalizeConfiguredSwapSize(instanceSizeMb)
+  if (normalizedInstanceSize === null) {
+    return true
+  }
+
+  return normalizedInstanceSize === (normalizeConfiguredSwapSize(previousPlanSizeMb) ?? 0)
+}
+
+export function formatIncusSwapLimit(sizeMb: number): string {
+  return `${Math.max(0, Math.floor(sizeMb))}MiB`
+}
+
+export function resolveIncusSwapValue(enabled: boolean, sizeMb: number | null | undefined): string {
+  if (!enabled || !sizeMb || sizeMb <= 0) {
+    return 'false'
+  }
+
+  return formatIncusSwapLimit(sizeMb)
+}
diff --git a/server/src/lib/invite-pricing.ts b/server/src/lib/invite-pricing.ts
new file mode 100644
index 0000000..3f65fb9
--- /dev/null
+++ b/server/src/lib/invite-pricing.ts
@@ -0,0 +1,273 @@
+import { Prisma } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import { getSystemConfig, getSystemConfigNumber } from '../db/system-config.js'
+
+export type InviteCostResource = 'balance' | 'points' | (string & {})
+
+export interface InviteCostOption {
+  resource: InviteCostResource
+  amount: number
+  enabled: boolean
+}
+
+export interface InviteCostQuote extends InviteCostOption {
+  label: string
+  unit: string
+  displayAmount: string
+}
+
+export interface InviteGenerationCostSnapshot {
+  resource: InviteCostResource
+  amount: number
+  label: string
+  unit: string
+  displayAmount: string
+  chargedAt: string
+}
+
+interface InviteCostResourceHandler {
+  resource: InviteCostResource
+  label: string
+  unit: string
+  normalizeAmount(amount: number): number
+  format(amount: number): string
+  charge(tx: Prisma.TransactionClient, userId: number, amount: number, inviteCode: string): Promise<void>
+}
+
+const defaultInviteCostOptions: InviteCostOption[] = [
+  { resource: 'balance', amount: 0, enabled: false },
+  { resource: 'points', amount: 0, enabled: false }
+]
+
+const inviteCostResourceHandlers: Record<string, InviteCostResourceHandler> = {
+  balance: {
+    resource: 'balance',
+    label: '余额',
+    unit: '元',
+    normalizeAmount(amount: number) {
+      return Math.round(Math.max(0, amount) * 100) / 100
+    },
+    format(amount: number) {
+      return `¥${amount.toFixed(2)}`
+    },
+    async charge(tx, userId, amount, inviteCode) {
+      if (amount <= 0) return
+
+      const rows = await tx.$queryRaw<Array<{ balanceBefore: unknown; balanceAfter: unknown }>>(Prisma.sql`
+        UPDATE users
+        SET balance = balance - ${amount}
+        WHERE id = ${userId} AND balance >= ${amount}
+        RETURNING (balance + ${amount})::numeric AS "balanceBefore", balance::numeric AS "balanceAfter"
+      `)
+
+      if (rows.length !== 1) {
+        const userExists = await tx.user.findUnique({
+          where: { id: userId },
+          select: { id: true }
+        })
+        if (!userExists) {
+          throw new Error('USER_NOT_FOUND')
+        }
+        throw new Error('INSUFFICIENT_BALANCE')
+      }
+
+      const balanceBefore = Number(rows[0].balanceBefore)
+      const balanceAfter = Number(rows[0].balanceAfter)
+
+      await tx.balanceLog.create({
+        data: {
+          userId,
+          type: 'invite_generate',
+          amount: -amount,
+          balanceBefore,
+          balanceAfter,
+          remark: `生成邀请码 ${inviteCode}`
+        }
+      })
+    }
+  },
+  points: {
+    resource: 'points',
+    label: '积分',
+    unit: '积分',
+    normalizeAmount(amount: number) {
+      return Math.max(0, Math.floor(amount))
+    },
+    format(amount: number) {
+      return `${Math.floor(amount)} 积分`
+    },
+    async charge(tx, userId, amount, inviteCode) {
+      if (amount <= 0) return
+
+      await tx.userPoints.upsert({
+        where: { userId },
+        update: {},
+        create: { userId }
+      })
+
+      const rows = await tx.$queryRaw<Array<{ pointsBefore: number; pointsAfter: number }>>(Prisma.sql`
+        UPDATE user_points
+        SET points = points - ${amount},
+            total_spent = total_spent + ${amount},
+            updated_at = NOW()
+        WHERE user_id = ${userId} AND points >= ${amount}
+        RETURNING points + ${amount} AS "pointsBefore", points AS "pointsAfter"
+      `)
+
+      if (rows.length !== 1) {
+        throw new Error('INSUFFICIENT_POINTS')
+      }
+
+      await tx.pointsLog.create({
+        data: {
+          userId,
+          type: 'invite_generate',
+          amount: -amount,
+          pointsBefore: rows[0].pointsBefore,
+          pointsAfter: rows[0].pointsAfter,
+          remark: `生成邀请码 ${inviteCode}`
+        }
+      })
+    }
+  }
+}
+
+export function isSupportedInviteCostResource(resource: string): boolean {
+  return resource in inviteCostResourceHandlers
+}
+
+function parseInviteCostConfig(raw: string | null): InviteCostOption[] {
+  if (!raw) return defaultInviteCostOptions
+
+  try {
+    const parsed = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return defaultInviteCostOptions
+
+    return parsed
+      .map((item): InviteCostOption | null => {
+        if (!item || typeof item !== 'object') return null
+        const resource = String((item as { resource?: unknown }).resource || '').trim()
+        if (!resource) return null
+        const amount = Number((item as { amount?: unknown }).amount)
+        const handler = inviteCostResourceHandlers[resource]
+        const normalizedAmount = handler
+          ? handler.normalizeAmount(Number.isFinite(amount) ? amount : 0)
+          : Math.max(0, Number.isFinite(amount) ? amount : 0)
+
+        return {
+          resource,
+          amount: normalizedAmount,
+          enabled: (item as { enabled?: unknown }).enabled === true
+        }
+      })
+      .filter((item): item is InviteCostOption => item !== null)
+  } catch {
+    return defaultInviteCostOptions
+  }
+}
+
+function ensureDefaultCostOptions(options: InviteCostOption[]): InviteCostOption[] {
+  const map = new Map(options.map(option => [option.resource, option]))
+  for (const option of defaultInviteCostOptions) {
+    if (!map.has(option.resource)) {
+      map.set(option.resource, option)
+    }
+  }
+  return Array.from(map.values())
+}
+
+export function normalizeInviteCostOptions(options: InviteCostOption[]): InviteCostOption[] {
+  return ensureDefaultCostOptions(options).map(option => {
+    const handler = inviteCostResourceHandlers[option.resource]
+    const amount = handler
+      ? handler.normalizeAmount(option.amount)
+      : Math.max(0, Number.isFinite(option.amount) ? option.amount : 0)
+
+    return {
+      resource: option.resource,
+      amount,
+      enabled: option.enabled
+    }
+  })
+}
+
+export function serializeInviteCostOptions(options: InviteCostOption[]): string {
+  return JSON.stringify(normalizeInviteCostOptions(options))
+}
+
+export async function getInviteCostOptions(): Promise<InviteCostOption[]> {
+  const raw = await getSystemConfig('invite_generation_costs')
+  return normalizeInviteCostOptions(parseInviteCostConfig(raw))
+}
+
+export async function getInviteExpiryDays(): Promise<number> {
+  return Math.max(0, await getSystemConfigNumber('invite_default_expire_days', 0))
+}
+
+export async function getInviteCostQuotes(): Promise<InviteCostQuote[]> {
+  return (await getInviteCostOptions()).map(option => {
+    const handler = inviteCostResourceHandlers[option.resource]
+    const label = handler?.label || option.resource
+    const unit = handler?.unit || ''
+    const displayAmount = handler?.format(option.amount) || `${option.amount}${unit}`
+
+    return {
+      ...option,
+      label,
+      unit,
+      displayAmount
+    }
+  })
+}
+
+export async function chargeInviteGenerationCost(
+  tx: Prisma.TransactionClient,
+  userId: number,
+  inviteCode: string,
+  resource: string,
+  costOptions?: InviteCostOption[]
+): Promise<InviteGenerationCostSnapshot> {
+  const options = costOptions ?? await getInviteCostOptions()
+  const option = options.find(cost => cost.resource === resource && cost.enabled)
+  if (!option) {
+    throw new Error('INVITE_COST_OPTION_UNAVAILABLE')
+  }
+
+  const handler = inviteCostResourceHandlers[option.resource]
+  if (!handler) {
+    throw new Error('INVITE_COST_RESOURCE_UNSUPPORTED')
+  }
+
+  await handler.charge(tx, userId, option.amount, inviteCode)
+
+  return {
+    resource: option.resource,
+    amount: option.amount,
+    label: handler.label,
+    unit: handler.unit,
+    displayAmount: handler.format(option.amount),
+    chargedAt: new Date().toISOString()
+  }
+}
+
+export async function getUserInviteBalances(userId: number): Promise<{
+  balance: number
+  points: number
+}> {
+  const [user, userPoints] = await Promise.all([
+    prisma.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    }),
+    prisma.userPoints.upsert({
+      where: { userId },
+      update: {},
+      create: { userId }
+    })
+  ])
+
+  return {
+    balance: user ? Number(user.balance) : 0,
+    points: userPoints.points
+  }
+}
diff --git a/server/src/lib/ip-calculator.ts b/server/src/lib/ip-calculator.ts
new file mode 100644
index 0000000..a608345
--- /dev/null
+++ b/server/src/lib/ip-calculator.ts
@@ -0,0 +1,256 @@
+/**
+ * IPv6 地址计算器 (IPAM)
+ * 基于子网和偏移量计算静态 IPv6 地址
+ */
+import { Address6 } from 'ip-address'
+import { randomBytes } from 'crypto'
+
+// ==================== IPv4 分配 (固定网段 10.10.0.0/22) ====================
+
+/**
+ * 内网 IPv4 网段配置
+ * 所有宿主机都使用统一的内网网段
+ */
+export const IPV4_CONFIG = {
+  subnet: '10.10.0.0/22',
+  gateway: '10.10.0.1',
+  // 可分配范围: 10.10.1.1 - 10.10.3.254
+  // 10.10.0.x 保留给网关和基础设施
+  rangeStart: [10, 10, 1, 1],
+  rangeEnd: [10, 10, 3, 254],
+  dns: ['8.8.8.8', '1.1.1.1']
+}
+
+/**
+ * 将 IPv4 地址转换为整数
+ */
+function ipv4ToInt(ip: string): number {
+  const parts = ip.split('.').map(Number)
+  return (parts[0] << 24) + (parts[1] << 16) + (parts[2] << 8) + parts[3]
+}
+
+/**
+ * 将整数转换为 IPv4 地址
+ */
+function intToIpv4(num: number): string {
+  return [
+    (num >>> 24) & 255,
+    (num >>> 16) & 255,
+    (num >>> 8) & 255,
+    num & 255
+  ].join('.')
+}
+
+/**
+ * 随机生成一个内网 IPv4 地址
+ * 范围: 10.10.1.1 - 10.10.3.254 (约 766 个地址)
+ * @returns 随机生成的 IPv4 地址字符串
+ */
+export function generateRandomIPv4(): string {
+  const start = ipv4ToInt('10.10.1.1')
+  const end = ipv4ToInt('10.10.3.254')
+  const range = end - start + 1
+  
+  const randomOffset = Math.floor(Math.random() * range)
+  return intToIpv4(start + randomOffset)
+}
+
+/**
+ * 验证 IPv4 地址是否在可分配范围内
+ * @param address IPv4 地址
+ * @returns 是否在范围内
+ */
+export function isIpv4InRange(address: string): boolean {
+  const parts = address.split('.').map(Number)
+  if (parts.length !== 4 || parts.some(p => isNaN(p) || p < 0 || p > 255)) {
+    return false
+  }
+  
+  const num = ipv4ToInt(address)
+  const start = ipv4ToInt('10.10.1.1')
+  const end = ipv4ToInt('10.10.3.254')
+  
+  return num >= start && num <= end
+}
+
+// ==================== IPv6 分配 ====================
+
+/**
+ * 计算 IPv6 地址
+ * @param subnetStr 子网 CIDR (如 2a0a:51c1:9:13b:1::/80)
+ * @param offset 偏移量 (通常传入数据库自增 ID)
+ * @returns 计算后的 IPv6 地址字符串
+ */
+export function calculateIPv6(subnetStr: string, offset: number): string {
+    if (!Address6.isValid(subnetStr)) {
+        throw new Error(`Invalid IPv6 subnet: ${subnetStr}`)
+    }
+
+    const subnet = new Address6(subnetStr)
+
+    // 获取子网起始地址的 BigInt 值
+    const startBigInt = subnet.startAddress().bigInt()
+
+    // 偏移策略：
+    // +2 是为了跳过:
+    // ::0 (Subnet Router Anycast)
+    // ::1 (预留给网关)
+    const targetBigInt = startBigInt + BigInt(offset) + BigInt(2)
+
+    // 转换回标准 IPv6 字符串并压缩
+    return Address6.fromBigInt(targetBigInt).correctForm()
+}
+
+/**
+ * 验证 IPv6 子网格式是否有效
+ * @param subnetStr 子网 CIDR
+ */
+export function isValidIPv6Subnet(subnetStr: string): boolean {
+    return Address6.isValid(subnetStr)
+}
+
+/**
+ * 从 IPv6 地址反推偏移量
+ * @param subnetStr 子网 CIDR
+ * @param address IPv6 地址
+ * @returns 偏移量
+ */
+export function getIPv6Offset(subnetStr: string, address: string): number {
+    if (!Address6.isValid(subnetStr) || !Address6.isValid(address)) {
+        throw new Error('Invalid subnet or address')
+    }
+
+    const subnet = new Address6(subnetStr)
+    const addr = new Address6(address)
+
+    const startBigInt = subnet.startAddress().bigInt()
+    const addrBigInt = addr.bigInt()
+
+    // 减去起始地址和预留的 2 个地址
+    return Number(addrBigInt - startBigInt - BigInt(2))
+}
+
+/**
+ * 在网段内随机生成一个 IPv6 地址
+ * @param subnetStr 子网 CIDR (如 2a0a:51c1:9:13b:1::/80)
+ * @returns 随机生成的 IPv6 地址字符串
+ */
+export function generateRandomIPv6(subnetStr: string): string {
+    if (!Address6.isValid(subnetStr)) {
+        throw new Error(`Invalid IPv6 subnet: ${subnetStr}`)
+    }
+
+    const subnet = new Address6(subnetStr)
+
+    // 获取子网起始和结束地址的 BigInt 值
+    const startBigInt = subnet.startAddress().bigInt()
+    const endBigInt = subnet.endAddress().bigInt()
+
+    // 跳过 ::0 (Subnet Router Anycast) 和 ::1 (预留给网关)
+    const minAddress = startBigInt + BigInt(2)
+    const maxAddress = endBigInt
+
+    // 计算可用地址范围
+    const addressRange = maxAddress - minAddress
+
+    // 如果范围太大（超过 Number.MAX_SAFE_INTEGER），使用安全的随机方法
+    // 对于 /80 子网，范围是 2^48 - 2，约为 281万亿，需要使用 BigInt 处理
+    if (addressRange > BigInt(Number.MAX_SAFE_INTEGER)) {
+        // 生成随机 BigInt
+        // 使用 crypto.randomBytes 生成随机数，然后转换为 BigInt
+        const bytes = randomBytes(8) // 8 字节 = 64 位
+        const randomBigInt = BigInt('0x' + bytes.toString('hex'))
+        
+        // 将随机数映射到地址范围内
+        const randomOffset = randomBigInt % (addressRange + BigInt(1))
+        const targetBigInt = minAddress + randomOffset
+        
+        return Address6.fromBigInt(targetBigInt).correctForm()
+    } else {
+        // 范围在安全整数范围内，使用 Math.random
+        const randomOffset = BigInt(Math.floor(Math.random() * Number(addressRange + BigInt(1))))
+        const targetBigInt = minAddress + randomOffset
+        
+        return Address6.fromBigInt(targetBigInt).correctForm()
+    }
+}
+
+/**
+ * 从宿主机子网中生成一个指定前缀长度的子网段
+ * @param hostSubnet 宿主机子网 CIDR (如 2a0a:51c1:9:13b::/64)
+ * @param prefix 目标前缀长度 (112, 120, 124)
+ * @returns 随机生成的子网段 CIDR
+ */
+export function generateRandomSubnet(hostSubnet: string, prefix: number): string {
+    if (!Address6.isValid(hostSubnet)) {
+        throw new Error(`Invalid IPv6 subnet: ${hostSubnet}`)
+    }
+
+    const subnet = new Address6(hostSubnet)
+    const hostPrefix = subnet.subnetMask
+
+    // 目标前缀必须大于宿主机前缀
+    if (prefix <= hostPrefix) {
+        throw new Error(`Target prefix /${prefix} must be greater than host prefix /${hostPrefix}`)
+    }
+
+    // 计算可分配的子网数量
+    const subnetBits = prefix - hostPrefix
+    const maxSubnets = BigInt(1) << BigInt(subnetBits)
+
+    // 随机选择一个子网索引
+    let subnetIndex: bigint
+    if (maxSubnets > BigInt(Number.MAX_SAFE_INTEGER)) {
+        const bytes = randomBytes(8)
+        subnetIndex = BigInt('0x' + bytes.toString('hex')) % maxSubnets
+    } else {
+        subnetIndex = BigInt(Math.floor(Math.random() * Number(maxSubnets)))
+    }
+
+    // 计算子网起始地址
+    const hostStart = subnet.startAddress().bigInt()
+    // 每个子网的大小
+    const subnetSize = BigInt(1) << BigInt(128 - prefix)
+    const subnetStart = hostStart + subnetIndex * subnetSize
+
+    const subnetAddress = Address6.fromBigInt(subnetStart).correctForm()
+    return `${subnetAddress}/${prefix}`
+}
+
+/**
+ * 验证 IPv6 地址是否在指定子网范围内
+ * @param address IPv6 地址
+ * @param subnetStr 子网 CIDR (如 2a0a:51c1:9:13b::/64)
+ * @returns 是否在子网范围内
+ */
+export function isIpv6InSubnet(address: string, subnetStr: string): boolean {
+    try {
+        if (!Address6.isValid(address) || !Address6.isValid(subnetStr)) {
+            return false
+        }
+
+        const addr = new Address6(address)
+        const subnet = new Address6(subnetStr)
+
+        const addrBigInt = addr.bigInt()
+        const subnetStart = subnet.startAddress().bigInt()
+        const subnetEnd = subnet.endAddress().bigInt()
+
+        return addrBigInt >= subnetStart && addrBigInt <= subnetEnd
+    } catch {
+        return false
+    }
+}
+
+/**
+ * 严格验证 IPv6 地址格式
+ * 使用 ip-address 库进行精确验证
+ */
+export function isStrictValidIpv6(address: string): boolean {
+    try {
+        const trimmed = address.trim().split('/')[0]
+        return Address6.isValid(trimmed)
+    } catch {
+        return false
+    }
+}
diff --git a/server/src/lib/log-sanitizer.ts b/server/src/lib/log-sanitizer.ts
new file mode 100644
index 0000000..07ed75c
--- /dev/null
+++ b/server/src/lib/log-sanitizer.ts
@@ -0,0 +1,188 @@
+/**
+ * 日志敏感信息过滤器
+ * 
+ * 用于过滤日志中的敏感信息，防止密码、Token 等泄露到日志中
+ * 
+ * 使用方式：
+ * 1. 在 Fastify 配置中使用 serializers
+ * 2. 手动调用 sanitizeObject 过滤对象中的敏感字段
+ */
+
+// 需要过滤的敏感字段名列表（不区分大小写）
+const SENSITIVE_FIELDS = [
+    'password',
+    'newPassword',
+    'oldPassword',
+    'currentPassword',
+    'confirmPassword',
+    'token',
+    'accessToken',
+    'refreshToken',
+    'accesstoken',
+    'refreshtoken',
+    'authorization',
+    'cookie',
+    'secret',
+    'jwtSecret',
+    'apiKey',
+    'apiSecret',
+    'privateKey',
+    'clientSecret',
+    'totpCode',
+    'recoveryCode',
+    'twoFactorSecret',
+    'encryptedSecret',
+    'backupCode',
+    'otp',
+    'pin',
+    'creditCard',
+    'cardNumber',
+    'cvv',
+    'ssn',
+    'x-auth-token',
+    'x-api-key',
+]
+
+// 编译正则表达式，用于更快匹配
+const SENSITIVE_FIELD_PATTERN = new RegExp(
+    `^(${SENSITIVE_FIELDS.join('|')})$`,
+    'i'
+)
+
+// Token 模式匹配（用于检测值中包含的 token）
+const TOKEN_PATTERNS = [
+    /eyJ[A-Za-z0-9_-]+\.eyJ[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+/g,  // JWT
+    /Bearer\s+[A-Za-z0-9_-]+/gi,  // Bearer token
+]
+
+// 替换值
+const REDACTED = '[REDACTED]'
+const REDACTED_JWT = '[REDACTED_JWT]'
+
+/**
+ * 检查字段名是否为敏感字段
+ */
+export function isSensitiveField(fieldName: string): boolean {
+    return SENSITIVE_FIELD_PATTERN.test(fieldName)
+}
+
+/**
+ * 过滤字符串中的 Token
+ */
+export function sanitizeTokensInString(value: string): string {
+    let result = value
+    for (const pattern of TOKEN_PATTERNS) {
+        result = result.replace(pattern, REDACTED_JWT)
+    }
+    return result
+}
+
+/**
+ * 过滤对象中的敏感信息
+ * 递归处理嵌套对象
+ */
+export function sanitizeObject<T>(obj: T, depth = 0): T {
+    // 防止无限递归
+    if (depth > 10) return obj
+
+    if (obj === null || obj === undefined) {
+        return obj
+    }
+
+    // 处理字符串
+    if (typeof obj === 'string') {
+        return sanitizeTokensInString(obj) as unknown as T
+    }
+
+    // 处理数组
+    if (Array.isArray(obj)) {
+        return obj.map(item => sanitizeObject(item, depth + 1)) as unknown as T
+    }
+
+    // 处理对象
+    if (typeof obj === 'object') {
+        const result: Record<string, unknown> = {}
+        for (const [key, value] of Object.entries(obj)) {
+            if (isSensitiveField(key)) {
+                result[key] = REDACTED
+            } else if (typeof value === 'string') {
+                result[key] = sanitizeTokensInString(value)
+            } else if (typeof value === 'object' && value !== null) {
+                result[key] = sanitizeObject(value, depth + 1)
+            } else {
+                result[key] = value
+            }
+        }
+        return result as T
+    }
+
+    return obj
+}
+
+/**
+ * Pino 序列化器配置
+ * 用于 Fastify logger 的 serializers 配置
+ * 
+ * 注意：由于 Fastify 的类型定义限制，我们使用 any 类型
+ * 并在运行时安全过滤
+ */
+export const logSerializers = {
+    // 过滤请求体中的敏感信息
+    req: (req: any) => {
+        const sanitized: Record<string, unknown> = {
+            method: req.method,
+            url: req.url,
+            hostname: req.hostname,
+            remoteAddress: req.ip || req.remoteAddress,
+        }
+
+        // 过滤请求头中的敏感信息
+        if (req.headers) {
+            sanitized.headers = sanitizeObject(req.headers)
+        }
+
+        return sanitized
+    },
+
+    // 过滤响应中的敏感信息
+    res: (res: any) => {
+        return {
+            statusCode: res.statusCode,
+        }
+    },
+
+    // 过滤错误信息中的敏感信息
+    err: (err: any) => {
+        return {
+            type: err.constructor?.name || 'Error',
+            message: sanitizeTokensInString(String(err.message || '')),
+            stack: err.stack ? sanitizeTokensInString(String(err.stack)) : '',
+        }
+    }
+} as const
+
+/**
+ * 创建安全的日志记录器包装
+ * 自动过滤传入的对象中的敏感信息
+ */
+export function createSafeLogger(logger: {
+    info: (obj: unknown, msg?: string) => void
+    warn: (obj: unknown, msg?: string) => void
+    error: (obj: unknown, msg?: string) => void
+    debug: (obj: unknown, msg?: string) => void
+}) {
+    return {
+        info: (obj: unknown, msg?: string) => {
+            logger.info(sanitizeObject(obj), msg)
+        },
+        warn: (obj: unknown, msg?: string) => {
+            logger.warn(sanitizeObject(obj), msg)
+        },
+        error: (obj: unknown, msg?: string) => {
+            logger.error(sanitizeObject(obj), msg)
+        },
+        debug: (obj: unknown, msg?: string) => {
+            logger.debug(sanitizeObject(obj), msg)
+        }
+    }
+}
diff --git a/server/src/lib/lottery-notifier.ts b/server/src/lib/lottery-notifier.ts
new file mode 100644
index 0000000..ea58674
--- /dev/null
+++ b/server/src/lib/lottery-notifier.ts
@@ -0,0 +1,249 @@
+/**
+ * 抽奖中奖通知模块
+ * 向管理员配置的通知渠道发送中奖通知
+ */
+import * as db from '../db/index.js'
+import { assertSafeWebhookUrl } from './outbound-security.js'
+
+// ==================== 通知内容模板 ====================
+
+const LOTTERY_ADMIN_NOTIFICATIONS = {
+  balance_win: {
+    title: '💰 余额中奖通知',
+    message: (data: {
+      username: string
+      lotteryName: string
+      prizeName: string
+      amount: number // 分
+    }) => `用户 ${data.username} 在「${data.lotteryName}」抽中了「${data.prizeName}」\n` +
+      `奖励金额：¥${(data.amount / 100).toFixed(2)}\n` +
+      `已自动发放到用户余额`
+  },
+
+  instance_win: {
+    title: '🎁 实例中奖通知',
+    message: (data: {
+      username: string
+      lotteryName: string
+      prizeName: string
+      instanceDesc?: string
+    }) => `用户 ${data.username} 在「${data.lotteryName}」抽中了「${data.prizeName}」\n` +
+      (data.instanceDesc ? `奖励内容：${data.instanceDesc}\n` : '') +
+      `请等待用户提交工单后手动发放`
+  }
+}
+
+// ==================== 通知发送函数 ====================
+
+interface LotteryWinNotification {
+  lotteryId: number
+  recordId: number
+  prizeType: 'balance' | 'instance'
+  username: string
+  lotteryName: string
+  prizeName: string
+  amount?: number       // 余额奖励金额（分）
+  instanceDesc?: string // 实例描述
+}
+
+/**
+ * 发送抽奖中奖通知到管理员配置的渠道
+ */
+export async function sendLotteryWinNotification(data: LotteryWinNotification): Promise<void> {
+  try {
+    // 1. 获取该抽奖的通知配置
+    const notifyConfig = await db.getLotteryNotificationConfig(data.lotteryId)
+
+    if (!notifyConfig || !notifyConfig.enabled) {
+      console.log(`[LotteryNotifier] Lottery ${data.lotteryId} notification disabled or not configured`)
+      return
+    }
+
+    // 2. 检查是否需要通知该类型
+    if (data.prizeType === 'balance' && !notifyConfig.notifyBalance) {
+      console.log(`[LotteryNotifier] Balance notification disabled for lottery ${data.lotteryId}`)
+      return
+    }
+    if (data.prizeType === 'instance' && !notifyConfig.notifyInstance) {
+      console.log(`[LotteryNotifier] Instance notification disabled for lottery ${data.lotteryId}`)
+      return
+    }
+
+    // 3. 构建通知内容
+    let title: string
+    let message: string
+
+    if (data.prizeType === 'balance') {
+      title = LOTTERY_ADMIN_NOTIFICATIONS.balance_win.title
+      message = LOTTERY_ADMIN_NOTIFICATIONS.balance_win.message({
+        username: data.username,
+        lotteryName: data.lotteryName,
+        prizeName: data.prizeName,
+        amount: data.amount || 0
+      })
+    } else {
+      title = LOTTERY_ADMIN_NOTIFICATIONS.instance_win.title
+      message = LOTTERY_ADMIN_NOTIFICATIONS.instance_win.message({
+        username: data.username,
+        lotteryName: data.lotteryName,
+        prizeName: data.prizeName,
+        instanceDesc: data.instanceDesc
+      })
+    }
+
+    // 4. 根据配置的渠道发送
+    const config = notifyConfig.config as Record<string, string>
+
+    switch (notifyConfig.type) {
+      case 'telegram':
+        await sendTelegram(config.botToken, config.chatId, title, message)
+        break
+      case 'discord':
+        await sendDiscord(config.webhookUrl, title, message)
+        break
+      case 'webhook':
+        await sendWebhook(config.url, config.secret, {
+          event: `lottery_win_${data.prizeType}`,
+          title,
+          message,
+          data
+        })
+        break
+      default:
+        console.warn(`[LotteryNotifier] Unknown channel type: ${notifyConfig.type}`)
+    }
+
+    // 5. 标记通知已发送
+    await db.markRecordNotificationSent(data.recordId)
+
+    console.log(`[LotteryNotifier] Sent ${data.prizeType} win notification for lottery ${data.lotteryId}, user ${data.username}`)
+  } catch (err) {
+    console.error(`[LotteryNotifier] Failed to send notification:`, err)
+  }
+}
+
+// ==================== 通知渠道发送函数 ====================
+
+/**
+ * 转义 Markdown 特殊字符
+ */
+function escapeMarkdown(text: string): string {
+  return text.replace(/[_*[\]()~`>#+=|{}.!-]/g, '\\$&')
+}
+
+/**
+ * 发送 Telegram 通知
+ */
+async function sendTelegram(
+  botToken: string,
+  chatId: string,
+  title: string,
+  message: string
+): Promise<void> {
+  if (!botToken || !chatId) {
+    throw new Error('Missing botToken or chatId')
+  }
+
+  const text = `*${escapeMarkdown(title)}*\n\n${escapeMarkdown(message)}`
+
+  const response = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      chat_id: chatId,
+      text,
+      parse_mode: 'MarkdownV2'
+    })
+  })
+
+  const result = await response.json() as { ok: boolean; description?: string }
+
+  if (!result.ok) {
+    throw new Error(result.description || 'Unknown Telegram error')
+  }
+}
+
+/**
+ * 发送 Discord 通知
+ */
+async function sendDiscord(
+  webhookUrl: string,
+  title: string,
+  message: string
+): Promise<void> {
+  if (!webhookUrl) {
+    throw new Error('Missing webhookUrl')
+  }
+
+  // 根据标题选择颜色
+  let color = 0x00ff00 // 默认绿色
+  if (title.includes('余额')) {
+    color = 0xffd700 // 金色
+  } else if (title.includes('实例')) {
+    color = 0x9b59b6 // 紫色
+  }
+
+  const parsedUrl = await assertSafeWebhookUrl(webhookUrl)
+  const response = await fetch(parsedUrl.toString(), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      embeds: [{
+        title,
+        description: message,
+        color,
+        timestamp: new Date().toISOString(),
+        footer: {
+          text: 'Incudal 抽奖系统'
+        }
+      }]
+    }),
+    redirect: 'manual'
+  })
+
+  if (!response.ok) {
+    const text = await response.text()
+    throw new Error(text || `HTTP ${response.status}`)
+  }
+}
+
+/**
+ * 发送 Webhook 通知
+ */
+async function sendWebhook(
+  url: string,
+  secret: string | undefined,
+  payload: Record<string, unknown>
+): Promise<void> {
+  if (!url) {
+    throw new Error('Missing webhook URL')
+  }
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json'
+  }
+
+  // 如果有 secret，添加签名
+  if (secret) {
+    const crypto = await import('crypto')
+    const signature = crypto.createHmac('sha256', secret)
+      .update(JSON.stringify(payload))
+      .digest('hex')
+    headers['X-Signature'] = signature
+  }
+
+  const parsedUrl = await assertSafeWebhookUrl(url)
+  const response = await fetch(parsedUrl.toString(), {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      ...payload,
+      timestamp: new Date().toISOString()
+    }),
+    redirect: 'manual'
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`)
+  }
+}
diff --git a/server/src/lib/lsky.ts b/server/src/lib/lsky.ts
new file mode 100644
index 0000000..f9be0a4
--- /dev/null
+++ b/server/src/lib/lsky.ts
@@ -0,0 +1,361 @@
+import { getSystemConfig } from '../db/system-config.js'
+
+export type LskyApiVersion = 'v1' | 'v2'
+const LSKY_UPLOAD_TIMEOUT_MS = 60_000
+const LSKY_DELETE_TIMEOUT_MS = 15_000
+const LSKY_GROUP_TIMEOUT_MS = 15_000
+const LSKY_STORAGE_CACHE_TTL_MS = 5 * 60_000
+const lskyStorageIdCache = new Map<string, { storageId: string; fetchedAt: number }>()
+
+export interface TicketImageLskyConfig {
+  baseUrl: string
+  token: string
+  apiVersion: LskyApiVersion
+  targetId: string | null
+}
+
+export interface LskyTicketImageUploadInput {
+  buffer: Buffer
+  filename: string
+  contentType: string
+  sizeBytes: number
+}
+
+export interface LskyTicketImageUploadResult {
+  provider: 'lsky'
+  providerVersion: LskyApiVersion
+  providerFileId: string | null
+  filename: string
+  originalName: string
+  mimeType: string
+  sizeBytes: number
+  width: number | null
+  height: number | null
+  url: string
+  thumbnailUrl: string | null
+}
+
+function normalizeBaseUrl(baseUrl: string): string {
+  return baseUrl.trim().replace(/\/+$/, '')
+}
+
+function resolveLskyApiBase(baseUrl: string, apiVersion: LskyApiVersion): string {
+  const normalized = normalizeBaseUrl(baseUrl)
+  const apiPrefix = apiVersion === 'v2' ? '/api/v2' : '/api/v1'
+
+  if (normalized.toLowerCase().endsWith(apiPrefix)) {
+    return normalized
+  }
+
+  return `${normalized}${apiPrefix}`
+}
+
+function asNullableString(value: unknown): string | null {
+  if (typeof value !== 'string') {
+    return null
+  }
+
+  const trimmed = value.trim()
+  return trimmed.length > 0 ? trimmed : null
+}
+
+function pickString(...values: unknown[]): string | null {
+  for (const value of values) {
+    const str = asNullableString(value)
+    if (str) {
+      return str
+    }
+  }
+
+  return null
+}
+
+function pickNumber(...values: unknown[]): number | null {
+  for (const value of values) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      return value
+    }
+    if (typeof value === 'string' && value.trim().length > 0) {
+      const parsed = Number(value)
+      if (Number.isFinite(parsed)) {
+        return parsed
+      }
+    }
+  }
+
+  return null
+}
+
+function parseJsonResponse(text: string): unknown {
+  const normalizedText = text.replace(/^\uFEFF/, '')
+  if (!normalizedText.trim()) {
+    return null
+  }
+
+  try {
+    return JSON.parse(normalizedText)
+  } catch {
+    return null
+  }
+}
+
+function extractUrlFromHtmlSnippet(html: string | null): string | null {
+  if (!html) {
+    return null
+  }
+
+  const srcMatch = html.match(/src="([^"]+)"/i)
+  if (srcMatch?.[1]) {
+    return srcMatch[1]
+  }
+
+  const markdownMatch = html.match(/\((https?:\/\/[^)]+)\)/i)
+  if (markdownMatch?.[1]) {
+    return markdownMatch[1]
+  }
+
+  return null
+}
+
+function joinUrl(baseUrl: string, pathname: string | null): string | null {
+  const normalizedPath = asNullableString(pathname)?.replace(/^\/+/, '')
+  if (!normalizedPath) {
+    return null
+  }
+
+  return `${normalizeBaseUrl(baseUrl)}/${normalizedPath}`
+}
+
+function extractLskyErrorMessage(payload: any, fallback: string): string {
+  return pickString(
+    payload?.message,
+    payload?.msg,
+    payload?.error?.message,
+    payload?.error,
+    payload?.errors?.[0]?.message
+  ) || fallback
+}
+
+function extractUploadDataCandidates(payload: any): any[] {
+  const candidates = [
+    payload?.data?.data,
+    payload?.data?.photo,
+    payload?.data?.image,
+    payload?.data,
+    payload?.result?.data,
+    payload?.result?.photo,
+    payload?.result,
+    payload
+  ]
+
+  return candidates.filter(candidate => candidate && typeof candidate === 'object')
+}
+
+function buildLskyAuthHeaders(token: string): Record<string, string> {
+  return {
+    Accept: 'application/json',
+    Authorization: `Bearer ${token}`
+  }
+}
+
+async function fetchLskyDefaultStorageId(config: TicketImageLskyConfig): Promise<string> {
+  const apiBase = resolveLskyApiBase(config.baseUrl, 'v2')
+  const cacheKey = `${apiBase}:${config.token}`
+  const cached = lskyStorageIdCache.get(cacheKey)
+  if (cached && (Date.now() - cached.fetchedAt) < LSKY_STORAGE_CACHE_TTL_MS) {
+    return cached.storageId
+  }
+
+  const groupUrl = `${apiBase}/group`
+  const response = await fetch(groupUrl, {
+    method: 'GET',
+    signal: AbortSignal.timeout(LSKY_GROUP_TIMEOUT_MS),
+    headers: buildLskyAuthHeaders(config.token)
+  })
+
+  const responseText = await response.text()
+  const payload: any = parseJsonResponse(responseText)
+
+  if (!response.ok || payload?.status === false) {
+    throw new Error(extractLskyErrorMessage(payload, `Failed to fetch Lsky group info with status ${response.status}`))
+  }
+
+  const storages = Array.isArray(payload?.data?.storages) ? payload.data.storages : []
+  const firstStorage = storages.find((item: any) => item && (typeof item.id === 'number' || typeof item.id === 'string'))
+  const storageId = firstStorage ? String(firstStorage.id) : ''
+
+  if (!storageId) {
+    console.error('[Lsky] Unable to determine default storage_id from /group response', {
+      groupUrl,
+      status: response.status,
+      bodyPreview: responseText.slice(0, 500)
+    })
+    throw new Error('Unable to determine Lsky storage_id automatically from /group')
+  }
+
+  lskyStorageIdCache.set(cacheKey, {
+    storageId,
+    fetchedAt: Date.now()
+  })
+
+  return storageId
+}
+
+export async function getTicketImageLskyConfig(): Promise<TicketImageLskyConfig | null> {
+  const [baseUrl, token, apiVersionValue, targetId] = await Promise.all([
+    getSystemConfig('ticket_image_lsky_base_url'),
+    getSystemConfig('ticket_image_lsky_token'),
+    getSystemConfig('ticket_image_lsky_api_version'),
+    getSystemConfig('ticket_image_lsky_target_id')
+  ])
+
+  const normalizedBaseUrl = asNullableString(baseUrl)
+  const normalizedToken = asNullableString(token)
+  if (!normalizedBaseUrl || !normalizedToken) {
+    return null
+  }
+
+  const apiVersion: LskyApiVersion = apiVersionValue === 'v2' ? 'v2' : 'v1'
+
+  return {
+    baseUrl: normalizeBaseUrl(normalizedBaseUrl),
+    token: normalizedToken,
+    apiVersion,
+    targetId: asNullableString(targetId)
+  }
+}
+
+export async function uploadTicketImageToLsky(
+  input: LskyTicketImageUploadInput
+): Promise<LskyTicketImageUploadResult> {
+  const config = await getTicketImageLskyConfig()
+  if (!config) {
+    throw new Error('Lsky image bed is not configured')
+  }
+
+  const resolvedTargetId = config.apiVersion === 'v2'
+    ? (config.targetId || await fetchLskyDefaultStorageId(config))
+    : config.targetId
+
+  const formData = new FormData()
+  formData.append(
+    'file',
+    new Blob([input.buffer], { type: input.contentType }),
+    input.filename
+  )
+
+  if (resolvedTargetId) {
+    if (config.apiVersion === 'v2') {
+      formData.append('storage_id', resolvedTargetId)
+    } else {
+      formData.append('strategy_id', resolvedTargetId)
+    }
+  }
+
+  const uploadUrl = `${resolveLskyApiBase(config.baseUrl, config.apiVersion)}/upload`
+
+  const response = await fetch(uploadUrl, {
+    method: 'POST',
+    signal: AbortSignal.timeout(LSKY_UPLOAD_TIMEOUT_MS),
+    headers: buildLskyAuthHeaders(config.token),
+    body: formData
+  })
+
+  const responseText = await response.text()
+  const payload: any = parseJsonResponse(responseText)
+
+  if (!payload) {
+    console.error('[Lsky] Upload returned non-JSON response', {
+      uploadUrl,
+      status: response.status,
+      contentType: response.headers.get('content-type'),
+      bodyPreview: responseText.slice(0, 500)
+    })
+  }
+
+  if (!response.ok || payload?.status === false) {
+    throw new Error(extractLskyErrorMessage(payload, `Lsky upload failed with status ${response.status}`))
+  }
+
+  const dataCandidates = extractUploadDataCandidates(payload)
+
+  let resolvedData: any = null
+  let url: string | null = null
+  let thumbnailUrl: string | null = null
+  for (const candidate of dataCandidates) {
+    const links = candidate?.links ?? {}
+    const candidateUrl = pickString(
+      candidate?.url,
+      candidate?.public_url,
+      links?.url,
+      links?.raw_url,
+      extractUrlFromHtmlSnippet(asNullableString(links?.html)),
+      extractUrlFromHtmlSnippet(asNullableString(links?.markdown)),
+      joinUrl(config.baseUrl, pickString(candidate?.pathname, candidate?.path))
+    )
+
+    if (candidateUrl) {
+      resolvedData = candidate
+      url = candidateUrl
+      thumbnailUrl = pickString(
+        candidate?.thumbnail_url,
+        links?.thumbnail_url,
+        candidateUrl
+      )
+      break
+    }
+  }
+
+  if (!url) {
+    console.error('[Lsky] Upload succeeded but no image URL was returned', {
+      uploadUrl,
+      status: response.status,
+      contentType: response.headers.get('content-type'),
+      bodyPreview: responseText.slice(0, 500),
+      responseKeys: payload && typeof payload === 'object' ? Object.keys(payload as Record<string, unknown>) : [],
+      dataCandidateKeys: dataCandidates.map(candidate => Object.keys(candidate as Record<string, unknown>))
+    })
+    throw new Error('Lsky upload succeeded but no image URL was returned')
+  }
+
+  const data = resolvedData ?? dataCandidates[0] ?? {}
+
+  return {
+    provider: 'lsky',
+    providerVersion: config.apiVersion,
+    providerFileId: config.apiVersion === 'v2'
+      ? pickString(data?.id, data?.key, data?.hash)
+      : pickString(data?.key, data?.id, data?.hash),
+    filename: pickString(data?.name, data?.filename, input.filename) || input.filename,
+    originalName: input.filename,
+    mimeType: pickString(data?.mimetype, data?.mime_type, input.contentType) || input.contentType,
+    sizeBytes: pickNumber(data?.size, data?.file_size, input.sizeBytes) || input.sizeBytes,
+    width: pickNumber(data?.width),
+    height: pickNumber(data?.height),
+    url,
+    thumbnailUrl
+  }
+}
+
+export async function deleteTicketImageFromLsky(providerVersion: string, providerFileId: string | null): Promise<boolean> {
+  if (!providerFileId) {
+    return false
+  }
+
+  const config = await getTicketImageLskyConfig()
+  if (!config) {
+    return false
+  }
+
+  const apiBase = resolveLskyApiBase(config.baseUrl, providerVersion === 'v2' ? 'v2' : 'v1')
+  const deleteUrl = providerVersion === 'v2'
+    ? `${apiBase}/user/photos/${encodeURIComponent(providerFileId)}`
+    : `${apiBase}/images/${encodeURIComponent(providerFileId)}`
+  const response = await fetch(deleteUrl, {
+    method: 'DELETE',
+    signal: AbortSignal.timeout(LSKY_DELETE_TIMEOUT_MS),
+    headers: buildLskyAuthHeaders(config.token)
+  })
+
+  return response.ok
+}
diff --git a/server/src/lib/mailer.ts b/server/src/lib/mailer.ts
new file mode 100644
index 0000000..e5b0d4a
--- /dev/null
+++ b/server/src/lib/mailer.ts
@@ -0,0 +1,2097 @@
+/**
+ * 使用 nodemailer 的邮件发送模块
+ * 
+ * 邮件模板设计原则：
+ * 1. 统一的视觉风格（简洁、专业、品牌一致）
+ * 2. 内联CSS样式（避免邮件客户端过滤）
+ * 3. 同时提供 HTML 和纯文本版本（提高送达率）
+ * 4. 响应式设计（跨设备兼容）
+ * 5. 避免垃圾邮件过滤器触发词
+ */
+
+import nodemailer from 'nodemailer'
+import type { Transporter } from 'nodemailer'
+import {
+    getSystemConfig,
+    getSystemConfigBoolean,
+    getSystemConfigNumber
+} from '../db/system-config.js'
+import { decryptSensitiveData } from './security.js'
+
+// SMTP 配置接口
+export interface SmtpConfig {
+    enabled: boolean
+    host: string
+    port: number
+    secure: boolean
+    username: string
+    password: string
+    fromEmail: string
+    fromName: string
+    brandName: string
+    brandLogoUrl: string
+}
+
+// 缓存 transporter 实例
+let transporterCache: Transporter | null = null
+let configCacheTime: number = 0
+const CONFIG_CACHE_TTL = 60000 // 缓存时间：1 分钟
+const DEFAULT_BRAND_NAME = 'Incudal'
+const DEFAULT_BRAND_LOGO_URL = '/incudal_logo.webp'
+
+async function getMailBrandName(): Promise<string> {
+    const configuredName = await getSystemConfig('brand_name')
+    const brandName = configuredName?.trim()
+    return brandName || DEFAULT_BRAND_NAME
+}
+
+async function getMailBrandLogoUrl(): Promise<string> {
+    const configuredLogoUrl = await getSystemConfig('brand_logo_url')
+    const logoUrl = configuredLogoUrl?.trim()
+    return logoUrl || DEFAULT_BRAND_LOGO_URL
+}
+
+function formatBrandSubject(brandName: string, subject: string): string {
+    return `[${brandName}] ${subject}`
+}
+
+async function getMailContext(): Promise<{ config: SmtpConfig; brandName: string; brandLogoUrl: string }> {
+    const config = await getSmtpConfig()
+    return { config, brandName: config.brandName, brandLogoUrl: config.brandLogoUrl }
+}
+
+/**
+ * 从系统配置获取 SMTP 配置
+ */
+export async function getSmtpConfig(): Promise<SmtpConfig> {
+    const [
+        enabled,
+        host,
+        port,
+        secure,
+        username,
+        password,
+        fromEmail,
+        fromName,
+        brandName,
+        brandLogoUrl
+    ] = await Promise.all([
+        getSystemConfigBoolean('smtp_enabled', false),
+        getSystemConfig('smtp_host'),
+        getSystemConfigNumber('smtp_port', 587),
+        getSystemConfigBoolean('smtp_secure', false),
+        getSystemConfig('smtp_username'),
+        getSystemConfig('smtp_password'),
+        getSystemConfig('smtp_from_email'),
+        getSystemConfig('smtp_from_name'),
+        getMailBrandName(),
+        getMailBrandLogoUrl()
+    ])
+
+    const normalizedFromName = fromName?.trim()
+    const effectiveFromName = !normalizedFromName || normalizedFromName === DEFAULT_BRAND_NAME
+        ? brandName
+        : normalizedFromName
+
+    // 如果密码已加密，则解密
+    let decryptedPassword = password || ''
+    if (decryptedPassword && decryptedPassword.includes(':')) {
+        // 格式: iv:tag:encrypted - 尝试解密
+        const decrypted = decryptSensitiveData(decryptedPassword)
+        if (decrypted) {
+            decryptedPassword = decrypted
+        }
+    }
+
+    return {
+        enabled,
+        host: host || '',
+        port,
+        secure,
+        username: username || '',
+        password: decryptedPassword,
+        fromEmail: fromEmail || '',
+        fromName: effectiveFromName,
+        brandName,
+        brandLogoUrl
+    }
+}
+
+/**
+ * 检查 SMTP 是否已配置并启用
+ */
+export async function isSmtpEnabled(): Promise<boolean> {
+    const config = await getSmtpConfig()
+    return config.enabled && !!config.host && !!config.username && !!config.password
+}
+
+/**
+ * 获取或创建 nodemailer transporter
+ */
+async function getTransporter(): Promise<Transporter | null> {
+    const now = Date.now()
+
+    // 如果缓存可用且未过期，使用缓存的 transporter
+    if (transporterCache && (now - configCacheTime) < CONFIG_CACHE_TTL) {
+        return transporterCache
+    }
+
+    const config = await getSmtpConfig()
+
+    if (!config.enabled || !config.host || !config.username || !config.password) {
+        return null
+    }
+
+    transporterCache = nodemailer.createTransport({
+        host: config.host,
+        port: config.port,
+        secure: config.secure,
+        auth: {
+            user: config.username,
+            pass: config.password
+        },
+        // 超时设置，防止请求卡住
+        connectionTimeout: 10000, // 连接超时 10 秒
+        greetingTimeout: 10000,   // 问候超时 10 秒
+        socketTimeout: 30000      // Socket 超时 30 秒
+    })
+
+    configCacheTime = now
+    return transporterCache
+}
+
+/**
+ * 清除 transporter 缓存（当 SMTP 配置更改时调用）
+ */
+export function clearTransporterCache(): void {
+    transporterCache = null
+    configCacheTime = 0
+}
+
+// ============================================================================
+// 邮件模板工具函数
+// ============================================================================
+
+/**
+ * HTML 转义，防止 XSS
+ */
+function escapeHtml(text: string): string {
+    const map: Record<string, string> = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    }
+    return text.replace(/[&<>"']/g, (m) => map[m])
+}
+
+/**
+ * 获取当前年份
+ */
+function getCurrentYear(): number {
+    return new Date().getFullYear()
+}
+
+/**
+ * 格式化时间为中文格式
+ */
+function formatDateTime(date: Date): string {
+    return date.toLocaleString('zh-CN', {
+        timeZone: 'Asia/Shanghai',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    })
+}
+
+function formatDate(date: Date): string {
+    return date.toLocaleDateString('zh-CN', {
+        timeZone: 'Asia/Shanghai',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    })
+}
+
+/**
+ * 邮件信息项类型
+ */
+interface EmailInfoItem {
+    label: string
+    value: string
+}
+
+/**
+ * 邮件内容类型
+ */
+type EmailAlertType = 'warning' | 'info' | 'success' | 'danger'
+
+/**
+ * 生成统一的邮件 HTML 模板
+ * 
+ * 设计说明：
+ * - 使用内联样式，确保所有邮件客户端兼容
+ * - 避免使用 border-radius、box-shadow 等可能被过滤的属性
+ * - 使用表格布局确保 Outlook 兼容性
+ * - 品牌色彩：黑色 #000000，灰色 #737373，背景 #f5f5f5
+ */
+function generateEmailHtml(options: {
+    title: string           // 邮件标题（显示在页面内）
+    greeting?: string       // 问候语（如"您好，XXX"）
+    alertType?: EmailAlertType  // 提示框类型
+    alertTitle?: string     // 提示框标题
+    alertMessage?: string   // 提示框内容
+    paragraphs?: string[]   // 正文段落
+    code?: string           // 验证码（大字体展示）
+    codeExpiry?: string     // 验证码有效期描述
+    infoItems?: EmailInfoItem[]  // 信息列表
+    infoTitle?: string      // 信息列表标题
+    footerNote?: string     // 底部备注
+    actionTip?: string      // 行动提示（如"如果不是您本人操作..."）
+    brandName?: string      // 品牌名称
+    brandLogoUrl?: string   // 品牌 Logo 地址
+}): string {
+    const year = getCurrentYear()
+    const brandName = options.brandName?.trim() || DEFAULT_BRAND_NAME
+    const brandLogoUrl = options.brandLogoUrl?.trim() || ''
+    const canEmbedLogo = /^https?:\/\//i.test(brandLogoUrl)
+    const brandHeaderHtml = canEmbedLogo
+        ? `<table role="presentation" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <td style="vertical-align: middle; padding: 0 12px 0 0;">
+                                        <img src="${escapeHtml(brandLogoUrl)}" width="32" height="32" alt="${escapeHtml(brandName)}" style="display: block; width: 32px; height: 32px; object-fit: contain; border: 0;">
+                                    </td>
+                                    <td style="vertical-align: middle;">
+                                        <p style="margin: 0; font-size: 18px; font-weight: 600; color: #000000; letter-spacing: -0.02em;">${escapeHtml(brandName)}</p>
+                                    </td>
+                                </tr>
+                            </table>`
+        : `<p style="margin: 0; font-size: 18px; font-weight: 600; color: #000000; letter-spacing: -0.02em;">${escapeHtml(brandName)}</p>`
+    
+    // 提示框颜色配置
+    const alertColors: Record<EmailAlertType, { bg: string; border: string; text: string }> = {
+        warning: { bg: '#fffbeb', border: '#f59e0b', text: '#92400e' },
+        info: { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },
+        success: { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },
+        danger: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' }
+    }
+
+    // 生成提示框 HTML
+    let alertHtml = ''
+    if (options.alertType && options.alertTitle) {
+        const colors = alertColors[options.alertType]
+        alertHtml = `
+            <tr>
+                <td style="padding: 0 0 24px 0;">
+                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: ${colors.bg}; border-left: 4px solid ${colors.border};">
+                        <tr>
+                            <td style="padding: 16px 20px;">
+                                <p style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: ${colors.text};">${escapeHtml(options.alertTitle)}</p>
+                                ${options.alertMessage ? `<p style="margin: 0; font-size: 13px; color: ${colors.text}; line-height: 1.5;">${escapeHtml(options.alertMessage)}</p>` : ''}
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>`
+    }
+
+    // 生成问候语 HTML
+    let greetingHtml = ''
+    if (options.greeting) {
+        greetingHtml = `
+            <tr>
+                <td style="padding: 0 0 16px 0;">
+                    <p style="margin: 0; font-size: 14px; color: #000000; line-height: 1.6;">${escapeHtml(options.greeting)}</p>
+                </td>
+            </tr>`
+    }
+
+    // 生成正文段落 HTML
+    let paragraphsHtml = ''
+    if (options.paragraphs && options.paragraphs.length > 0) {
+        paragraphsHtml = options.paragraphs.map(p => `
+            <tr>
+                <td style="padding: 0 0 16px 0;">
+                    <p style="margin: 0; font-size: 14px; color: #000000; line-height: 1.6;">${escapeHtml(p)}</p>
+                </td>
+            </tr>`
+        ).join('')
+    }
+
+    // 生成验证码框 HTML
+    let codeHtml = ''
+    if (options.code) {
+        codeHtml = `
+            <tr>
+                <td style="padding: 8px 0 24px 0;">
+                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; border: 1px solid #e5e5e5;">
+                        <tr>
+                            <td style="padding: 28px 24px; text-align: center;">
+                                <p style="margin: 0; font-size: 32px; font-weight: 600; letter-spacing: 8px; color: #000000; font-family: 'Consolas', 'Monaco', monospace;">${escapeHtml(options.code)}</p>
+                                ${options.codeExpiry ? `<p style="margin: 16px 0 0 0; font-size: 13px; color: #737373;">${escapeHtml(options.codeExpiry)}</p>` : ''}
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>`
+    }
+
+    // 生成信息列表 HTML
+    let infoHtml = ''
+    if (options.infoItems && options.infoItems.length > 0) {
+        const rows = options.infoItems.map((item, index) => {
+            const isLast = index === options.infoItems!.length - 1
+            return `
+                <tr>
+                    <td style="padding: 12px 0; border-bottom: ${isLast ? 'none' : '1px solid #e5e5e5'};">
+                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                            <tr>
+                                <td style="font-size: 13px; color: #737373; width: 120px; vertical-align: top;">${escapeHtml(item.label)}</td>
+                                <td style="font-size: 13px; color: #000000; font-weight: 500;">${escapeHtml(item.value)}</td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>`
+        }).join('')
+
+        infoHtml = `
+            <tr>
+                <td style="padding: 8px 0 24px 0;">
+                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; border: 1px solid #e5e5e5;">
+                        <tr>
+                            <td style="padding: 20px;">
+                                ${options.infoTitle ? `<p style="margin: 0 0 16px 0; font-size: 13px; font-weight: 600; color: #000000;">${escapeHtml(options.infoTitle)}</p>` : ''}
+                                <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                    ${rows}
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>`
+    }
+
+    // 生成行动提示 HTML
+    let actionTipHtml = ''
+    if (options.actionTip) {
+        actionTipHtml = `
+            <tr>
+                <td style="padding: 16px 0 0 0;">
+                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #fafafa; border: 1px solid #e5e5e5;">
+                        <tr>
+                            <td style="padding: 14px 16px;">
+                                <p style="margin: 0; font-size: 12px; color: #737373; line-height: 1.5;">${escapeHtml(options.actionTip)}</p>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>`
+    }
+
+    return `<!DOCTYPE html>
+<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
+    <title>${escapeHtml(options.title)}</title>
+    <!--[if mso]>
+    <noscript>
+        <xml>
+            <o:OfficeDocumentSettings>
+                <o:PixelsPerInch>96</o:PixelsPerInch>
+            </o:OfficeDocumentSettings>
+        </xml>
+    </noscript>
+    <![endif]-->
+    <style type="text/css">
+        body, table, td, p, a, li, blockquote { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+        img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
+        body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
+        a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
+        @media only screen and (max-width: 600px) {
+            .email-container { width: 100% !important; }
+            .mobile-padding { padding-left: 20px !important; padding-right: 20px !important; }
+        }
+    </style>
+</head>
+<body style="margin: 0; padding: 0; background-color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff;">
+        <tr>
+            <td align="center" style="padding: 0;">
+                <table role="presentation" class="email-container" cellpadding="0" cellspacing="0" border="0" width="600" style="max-width: 600px; width: 100%;">
+                    <!-- Header -->
+                    <tr>
+                        <td class="mobile-padding" style="padding: 40px 24px 32px 24px; border-bottom: 1px solid #e5e5e5;">
+                            ${brandHeaderHtml}
+                        </td>
+                    </tr>
+                    <!-- Content -->
+                    <tr>
+                        <td class="mobile-padding" style="padding: 32px 24px;">
+                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
+                                ${alertHtml}
+                                ${greetingHtml}
+                                ${paragraphsHtml}
+                                ${codeHtml}
+                                ${infoHtml}
+                                ${actionTipHtml}
+                            </table>
+                        </td>
+                    </tr>
+                    <!-- Footer -->
+                    <tr>
+                        <td class="mobile-padding" style="padding: 24px; border-top: 1px solid #e5e5e5;">
+                            <p style="margin: 0; font-size: 12px; color: #a3a3a3; line-height: 1.5;">© ${year} ${escapeHtml(brandName)}. 此邮件由系统自动发送，请勿回复。</p>
+                            ${options.footerNote ? `<p style="margin: 8px 0 0 0; font-size: 12px; color: #a3a3a3;">${escapeHtml(options.footerNote)}</p>` : ''}
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>`
+}
+
+/**
+ * 生成纯文本邮件内容
+ * 纯文本版本对于提高邮件送达率至关重要
+ */
+function generateEmailText(options: {
+    title: string
+    greeting?: string
+    alertTitle?: string
+    alertMessage?: string
+    paragraphs?: string[]
+    code?: string
+    codeExpiry?: string
+    infoItems?: EmailInfoItem[]
+    infoTitle?: string
+    actionTip?: string
+    brandName?: string
+    brandLogoUrl?: string
+}): string {
+    const year = getCurrentYear()
+    const brandName = options.brandName?.trim() || DEFAULT_BRAND_NAME
+    let lines: string[] = []
+    
+    lines.push(brandName)
+    lines.push('='.repeat(50))
+    lines.push('')
+    
+    if (options.alertTitle) {
+        lines.push(`[${options.alertTitle}]`)
+        if (options.alertMessage) {
+            lines.push(options.alertMessage)
+        }
+        lines.push('')
+    }
+    
+    if (options.greeting) {
+        lines.push(options.greeting)
+        lines.push('')
+    }
+    
+    if (options.paragraphs) {
+        options.paragraphs.forEach(p => {
+            lines.push(p)
+            lines.push('')
+        })
+    }
+    
+    if (options.code) {
+        lines.push('-'.repeat(30))
+        lines.push(`验证码: ${options.code}`)
+        if (options.codeExpiry) {
+            lines.push(options.codeExpiry)
+        }
+        lines.push('-'.repeat(30))
+        lines.push('')
+    }
+    
+    if (options.infoItems && options.infoItems.length > 0) {
+        if (options.infoTitle) {
+            lines.push(options.infoTitle)
+        }
+        lines.push('-'.repeat(30))
+        options.infoItems.forEach(item => {
+            lines.push(`${item.label}: ${item.value}`)
+        })
+        lines.push('-'.repeat(30))
+        lines.push('')
+    }
+    
+    if (options.actionTip) {
+        lines.push(`注意: ${options.actionTip}`)
+        lines.push('')
+    }
+    
+    lines.push('='.repeat(50))
+    lines.push(`(C) ${year} ${brandName}. 此邮件由系统自动发送，请勿回复。`)
+    
+    return lines.join('\n')
+}
+
+// ============================================================================
+// 邮件发送函数
+// ============================================================================
+
+/**
+ * 验证码邮件用途
+ */
+export type VerificationPurpose = 'register' | 'reset_password' | 'change_email'
+
+/**
+ * 发送验证码邮件
+ * @param email 收件人邮箱
+ * @param code 验证码
+ * @param expiresInMinutes 过期时间（分钟）
+ * @param purpose 用途：register（注册）、reset_password（重置密码）或 change_email（修改邮箱）
+ */
+export async function sendVerificationEmail(
+    email: string,
+    code: string,
+    expiresInMinutes: number = 10,
+    purpose: VerificationPurpose = 'register'
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        // 根据用途生成不同的邮件内容
+        let title: string
+        let paragraph: string
+        let actionTip: string
+
+        if (purpose === 'reset_password') {
+            title = '重置密码验证码'
+            paragraph = `您正在重置 ${brandName} 账户密码。请使用以下验证码完成操作：`
+            actionTip = '如果您没有请求重置密码，请忽略此邮件。如果您持续收到此类邮件，您的账户可能存在安全风险，建议尽快修改密码。'
+        } else if (purpose === 'change_email') {
+            title = '修改邮箱验证码'
+            paragraph = `您正在修改 ${brandName} 账户邮箱地址。请使用以下验证码完成新邮箱验证：`
+            actionTip = '如果您没有请求修改邮箱，请忽略此邮件，并检查您的账户安全。'
+        } else {
+            title = '注册验证码'
+            paragraph = `您正在注册 ${brandName} 账户。请使用以下验证码完成操作：`
+            actionTip = '如果您没有请求此验证码，请忽略此邮件。如果您持续收到此类邮件，建议检查您的账户安全。'
+        }
+
+        const htmlContent = generateEmailHtml({
+            title: title,
+            greeting: '您好，',
+            paragraphs: [paragraph],
+            code: code,
+            codeExpiry: `此验证码将在 ${expiresInMinutes} 分钟后失效`,
+            actionTip: actionTip,
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: title,
+            greeting: '您好，',
+            paragraphs: [paragraph],
+            code: code,
+            codeExpiry: `此验证码将在 ${expiresInMinutes} 分钟后失效`,
+            actionTip: purpose === 'reset_password' 
+                ? '如果您没有请求重置密码，请忽略此邮件。' 
+                : purpose === 'change_email'
+                    ? '如果您没有请求修改邮箱，请忽略此邮件。'
+                : '如果您没有请求此验证码，请忽略此邮件。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `您的验证码：${code}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send verification email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 测试 SMTP 连接
+ * 此函数允许在 smtp_enabled 为 false 时进行测试，
+ * 只要提供了配置信息即可
+ */
+export async function testSmtpConnection(): Promise<{ success: boolean; error?: string }> {
+    try {
+        const config = await getSmtpConfig()
+
+        // 检查必需字段是否已提供（即使未启用）
+        if (!config.host || !config.username || !config.password || !config.fromEmail) {
+            return { success: false, error: 'SMTP configuration incomplete. Please fill in host, username, password, and sender email.' }
+        }
+
+        // 创建临时 transporter 用于测试（忽略启用状态）
+        const testTransporter = nodemailer.createTransport({
+            host: config.host,
+            port: config.port,
+            secure: config.secure,
+            auth: {
+                user: config.username,
+                pass: config.password
+            },
+            connectionTimeout: 10000,
+            greetingTimeout: 10000,
+            socketTimeout: 30000
+        })
+
+        await testTransporter.verify()
+        return { success: true }
+    } catch (error: any) {
+        console.error('SMTP connection test failed:', error)
+        return { success: false, error: error.message || 'Connection failed' }
+    }
+}
+
+/**
+ * 发送测试邮件
+ * 此函数允许在 smtp_enabled 为 false 时发送测试邮件，
+ * 只要提供了配置信息即可
+ */
+export async function sendTestEmail(to: string): Promise<{ success: boolean; error?: string }> {
+    try {
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        // 检查必需字段是否已提供（即使未启用）
+        if (!config.host || !config.username || !config.password || !config.fromEmail) {
+            return { success: false, error: 'SMTP configuration incomplete. Please fill in host, username, password, and sender email.' }
+        }
+
+        // 验证邮箱格式
+        if (!to || !to.includes('@')) {
+            return { success: false, error: 'Invalid recipient email address' }
+        }
+
+        // 创建临时 transporter 用于测试（忽略启用状态）
+        const testTransporter = nodemailer.createTransport({
+            host: config.host,
+            port: config.port,
+            secure: config.secure,
+            auth: {
+                user: config.username,
+                pass: config.password
+            },
+            connectionTimeout: 10000,
+            greetingTimeout: 10000,
+            socketTimeout: 30000
+        })
+
+        const testTime = formatDateTime(new Date())
+
+        const htmlContent = generateEmailHtml({
+            title: 'SMTP 测试邮件',
+            alertType: 'success',
+            alertTitle: 'SMTP 配置测试',
+            alertMessage: '如果您收到此邮件，说明您的 SMTP 设置工作正常。',
+            greeting: '您好，',
+            paragraphs: [`这是一封来自您的 ${brandName} SMTP 配置的测试邮件。`],
+            infoTitle: '测试详情',
+            infoItems: [
+                { label: 'SMTP 服务器', value: config.host },
+                { label: '端口', value: String(config.port) },
+                { label: 'SSL/TLS', value: config.secure ? '已启用' : '未启用' },
+                { label: '发件人', value: `${config.fromName} <${config.fromEmail}>` },
+                { label: '测试时间', value: testTime }
+            ],
+            footerNote: '这是一封自动测试邮件。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: 'SMTP 测试邮件',
+            alertTitle: 'SMTP 配置测试',
+            alertMessage: '如果您收到此邮件，说明您的 SMTP 设置工作正常。',
+            greeting: '您好，',
+            paragraphs: [`这是一封来自您的 ${brandName} SMTP 配置的测试邮件。`],
+            infoTitle: '测试详情',
+            infoItems: [
+                { label: 'SMTP 服务器', value: config.host },
+                { label: '端口', value: String(config.port) },
+                { label: 'SSL/TLS', value: config.secure ? '已启用' : '未启用' },
+                { label: '发件人', value: `${config.fromName} <${config.fromEmail}>` },
+                { label: '测试时间', value: testTime }
+            ],
+            brandName,
+        brandLogoUrl
+        })
+
+        await testTransporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: to,
+            subject: formatBrandSubject(brandName, 'SMTP 配置测试成功'),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send test email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送异地登录提醒邮件
+ */
+export async function sendLoginAlertEmail(
+    email: string,
+    data: {
+        username: string
+        ip: string
+        userAgent: string
+        loginTime: Date
+        isNewIp: boolean
+        isNewDevice: boolean
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const loginTimeStr = formatDateTime(data.loginTime)
+        
+        // 截断过长的 UserAgent
+        const truncatedUserAgent = data.userAgent.length > 80 
+            ? data.userAgent.substring(0, 80) + '...' 
+            : data.userAgent
+
+        // 确定提醒类型
+        let alertType = '新设备登录'
+        let alertMessage = '您的账户刚刚在一个新的设备上登录。'
+        if (data.isNewIp && data.isNewDevice) {
+            alertType = '新设备和新 IP 地址登录'
+            alertMessage = '您的账户刚刚在一个新的位置和新的设备上登录。'
+        } else if (data.isNewIp) {
+            alertType = '新 IP 地址登录'
+            alertMessage = '您的账户刚刚在一个新的 IP 地址登录。'
+        }
+
+        const htmlContent = generateEmailHtml({
+            title: '安全提醒',
+            alertType: 'warning',
+            alertTitle: alertType,
+            alertMessage: alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['我们检测到您的账户有一次新的登录活动：'],
+            infoTitle: '登录详情',
+            infoItems: [
+                { label: '登录时间', value: loginTimeStr },
+                { label: 'IP 地址', value: data.ip },
+                { label: '设备', value: truncatedUserAgent }
+            ],
+            actionTip: '如果这是您本人的操作，请忽略此邮件。如果这不是您本人的操作，请立即登录您的账户并修改密码。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '安全提醒',
+            alertTitle: alertType,
+            alertMessage: alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['我们检测到您的账户有一次新的登录活动：'],
+            infoTitle: '登录详情',
+            infoItems: [
+                { label: '登录时间', value: loginTimeStr },
+                { label: 'IP 地址', value: data.ip },
+                { label: '设备', value: truncatedUserAgent }
+            ],
+            actionTip: '如果这不是您本人的操作，请立即修改密码。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `安全提醒：${alertType}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send login alert email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送敏感操作验证码邮件
+ */
+export async function sendOperationVerificationEmail(
+    email: string,
+    data: {
+        username: string
+        operationName: string
+        code: string
+        expiresInMinutes: number
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const htmlContent = generateEmailHtml({
+            title: '操作验证码',
+            alertType: 'warning',
+            alertTitle: '敏感操作验证',
+            alertMessage: `您正在尝试执行「${data.operationName}」操作。`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['请使用以下验证码完成操作确认：'],
+            code: data.code,
+            codeExpiry: `此验证码将在 ${data.expiresInMinutes} 分钟后失效`,
+            actionTip: '如果这不是您本人的操作，请立即修改您的账户密码并检查账户安全。请勿将此验证码透露给任何人。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '操作验证码',
+            alertTitle: '敏感操作验证',
+            alertMessage: `您正在尝试执行「${data.operationName}」操作。`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['请使用以下验证码完成操作确认：'],
+            code: data.code,
+            codeExpiry: `此验证码将在 ${data.expiresInMinutes} 分钟后失效`,
+            actionTip: '如果这不是您本人的操作，请立即修改密码。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `操作验证码：${data.code}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send operation verification email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送密码重置邮件（包含新密码）
+ */
+export async function sendPasswordResetEmail(
+    email: string,
+    data: {
+        username: string
+        newPassword: string
+        twoFactorDisabled: boolean
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const paragraphs: string[] = [
+            '您的账户密码已成功重置。新密码如下：',
+            '',
+            `新密码：${data.newPassword}`,
+            '',
+            '请使用新密码登录，登录后请及时修改密码以确保账户安全。'
+        ]
+
+        if (data.twoFactorDisabled) {
+            paragraphs.push('', '⚠️ 重要提示：由于密码重置，您的双因素验证（2FA）已被自动禁用。为了账户安全，建议您重新启用2FA。')
+        }
+
+        const htmlContent = generateEmailHtml({
+            title: '密码重置成功',
+            alertType: 'success',
+            alertTitle: '密码重置成功',
+            alertMessage: '您的账户密码已成功重置。',
+            greeting: `您好，${data.username}`,
+            paragraphs: paragraphs,
+            actionTip: '如果这不是您本人的操作，请立即联系管理员。请妥善保管您的新密码，不要将其透露给任何人。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '密码重置成功',
+            alertTitle: '密码重置成功',
+            alertMessage: '您的账户密码已成功重置。',
+            greeting: `您好，${data.username}`,
+            paragraphs: paragraphs,
+            actionTip: '如果这不是您本人的操作，请立即联系管理员。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, '密码重置成功'),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send password reset email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送充值成功通知邮件
+ */
+export async function sendRechargeSuccessEmail(
+    email: string,
+    data: {
+        username: string
+        amount: number
+        orderNo: string
+        tradeNo: string | null
+        newBalance: number
+        time: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+        const timeStr = formatDateTime(data.time)
+
+        const htmlContent = generateEmailHtml({
+            title: '充值成功通知',
+            alertType: 'success',
+            alertTitle: '充值已到账',
+            alertMessage: `您的账户已成功充值 ¥${data.amount.toFixed(2)}`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的充值已成功到账，以下是充值详情：'],
+            infoTitle: '充值详情',
+            infoItems: [
+                { label: '充值金额', value: `¥${data.amount.toFixed(2)}` },
+                { label: '订单号', value: data.orderNo },
+                { label: '交易号', value: data.tradeNo || 'N/A' },
+                { label: '到账时间', value: timeStr },
+                { label: '当前余额', value: `¥${data.newBalance.toFixed(2)}` }
+            ],
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '充值成功通知',
+            alertTitle: '充值已到账',
+            alertMessage: `您的账户已成功充值 ¥${data.amount.toFixed(2)}`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的充值已成功到账，以下是充值详情：'],
+            infoTitle: '充值详情',
+            infoItems: [
+                { label: '充值金额', value: `¥${data.amount.toFixed(2)}` },
+                { label: '订单号', value: data.orderNo },
+                { label: '交易号', value: data.tradeNo || 'N/A' },
+                { label: '到账时间', value: timeStr },
+                { label: '当前余额', value: `¥${data.newBalance.toFixed(2)}` }
+            ],
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `充值成功 ¥${data.amount.toFixed(2)}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send recharge success email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送实例创建成功通知邮件
+ */
+export async function sendInstanceCreatedEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        hostName: string
+        image: string
+        cpu: number
+        memory: number
+        disk: number
+        ipv4?: string
+        ipv6?: string
+        isPaid: boolean
+        planName?: string
+        amount?: number
+        expiresAt?: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        // 格式化资源
+        const formatMemory = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`
+        const formatDisk = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(0)} GB` : `${mb} MB`
+
+        const infoItems: EmailInfoItem[] = [
+            { label: '实例名称', value: data.instanceName },
+            { label: '节点', value: data.hostName },
+            { label: '镜像', value: data.image },
+            { label: 'CPU', value: `${data.cpu}%` },
+            { label: '内存', value: formatMemory(data.memory) },
+            { label: '磁盘', value: formatDisk(data.disk) }
+        ]
+
+        if (data.ipv4) infoItems.push({ label: 'IPv4', value: data.ipv4 })
+        if (data.ipv6) infoItems.push({ label: 'IPv6', value: data.ipv6 })
+
+        if (data.isPaid && data.planName) {
+            infoItems.push({ label: '方案', value: data.planName })
+            if (data.amount !== undefined) {
+                infoItems.push({ label: '扣费', value: `¥${data.amount.toFixed(2)}` })
+            }
+            if (data.expiresAt) {
+                infoItems.push({ label: '到期时间', value: formatDate(data.expiresAt) })
+            }
+        }
+
+        const alertMessage = data.isPaid
+            ? `您的付费实例「${data.instanceName}」已创建成功`
+            : `您的实例「${data.instanceName}」已创建成功`
+
+        const htmlContent = generateEmailHtml({
+            title: '实例创建成功',
+            alertType: 'success',
+            alertTitle: '实例已创建',
+            alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的实例已创建成功并正在启动，以下是实例详情：'],
+            infoTitle: '实例详情',
+            infoItems,
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '实例创建成功',
+            alertTitle: '实例已创建',
+            alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的实例已创建成功并正在启动，以下是实例详情：'],
+            infoTitle: '实例详情',
+            infoItems,
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `实例「${data.instanceName}」创建成功`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send instance created email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送续费成功通知邮件
+ */
+export async function sendRenewSuccessEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        amount: number
+        months: number
+        newExpiresAt: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const htmlContent = generateEmailHtml({
+            title: '续费成功通知',
+            alertType: 'success',
+            alertTitle: '续费成功',
+            alertMessage: `实例「${data.instanceName}」已成功续费 ${data.months} 个月`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的实例续费已成功，以下是续费详情：'],
+            infoTitle: '续费详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '续费时长', value: `${data.months} 个月` },
+                { label: '续费金额', value: `¥${data.amount.toFixed(2)}` },
+                { label: '新到期时间', value: formatDate(data.newExpiresAt) }
+            ],
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '续费成功通知',
+            alertTitle: '续费成功',
+            alertMessage: `实例「${data.instanceName}」已成功续费 ${data.months} 个月`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的实例续费已成功，以下是续费详情：'],
+            infoTitle: '续费详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '续费时长', value: `${data.months} 个月` },
+                { label: '续费金额', value: `¥${data.amount.toFixed(2)}` },
+                { label: '新到期时间', value: formatDate(data.newExpiresAt) }
+            ],
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `实例「${data.instanceName}」续费成功`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send renew success email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送管理员调整余额通知邮件
+ */
+export async function sendBalanceAdjustedEmail(
+    email: string,
+    data: {
+        username: string
+        amount: number
+        remark: string
+        newBalance: number
+        time: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+        const timeStr = formatDateTime(data.time)
+        const isIncrease = data.amount > 0
+        const amountStr = isIncrease ? `+¥${data.amount.toFixed(2)}` : `-¥${Math.abs(data.amount).toFixed(2)}`
+
+        const htmlContent = generateEmailHtml({
+            title: '余额变动通知',
+            alertType: isIncrease ? 'success' : 'warning',
+            alertTitle: isIncrease ? '余额增加' : '余额扣除',
+            alertMessage: `管理员已${isIncrease ? '增加' : '扣除'}您的账户余额 ${amountStr}`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的账户余额已被管理员调整，以下是变动详情：'],
+            infoTitle: '变动详情',
+            infoItems: [
+                { label: '变动金额', value: amountStr },
+                { label: '变动原因', value: data.remark },
+                { label: '变动时间', value: timeStr },
+                { label: '当前余额', value: `¥${data.newBalance.toFixed(2)}` }
+            ],
+            actionTip: '如对此次余额变动有疑问，请联系管理员。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '余额变动通知',
+            alertTitle: isIncrease ? '余额增加' : '余额扣除',
+            alertMessage: `管理员已${isIncrease ? '增加' : '扣除'}您的账户余额 ${amountStr}`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的账户余额已被管理员调整，以下是变动详情：'],
+            infoTitle: '变动详情',
+            infoItems: [
+                { label: '变动金额', value: amountStr },
+                { label: '变动原因', value: data.remark },
+                { label: '变动时间', value: timeStr },
+                { label: '当前余额', value: `¥${data.newBalance.toFixed(2)}` }
+            ],
+            actionTip: '如对此次余额变动有疑问，请联系管理员。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `余额变动通知 ${amountStr}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send balance adjusted email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送白嫖站注册赠送通知邮件
+ */
+export async function sendFreeSiteRegisterGiftEmail(
+    email: string,
+    data: {
+        username: string
+        balanceAmount: number
+        pointsAmount: number
+        newBalance: number
+        newPoints: number
+        time: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+        const timeStr = formatDateTime(data.time)
+        const giftItems: string[] = []
+        if (data.balanceAmount > 0) {
+            giftItems.push(`余额 +¥${data.balanceAmount.toFixed(2)}`)
+        }
+        if (data.pointsAmount > 0) {
+            giftItems.push(`积分 +${data.pointsAmount}`)
+        }
+        const giftSummary = giftItems.join('，') || '白嫖券一张'
+
+        const htmlContent = generateEmailHtml({
+            title: '白嫖补给到账',
+            alertType: 'success',
+            alertTitle: '恭喜，白嫖小车已发车',
+            alertMessage: `${giftSummary} 已经咣当一声掉进您的账户。`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '欢迎加入白嫖站！系统刚刚给您的新手背包塞了点启动资金和快乐积分。',
+                '不用充值，不用许愿，到账就是这么朴实无华。'
+            ],
+            infoTitle: '到账详情',
+            infoItems: [
+                { label: '到账余额', value: data.balanceAmount > 0 ? `+¥${data.balanceAmount.toFixed(2)}` : '本次没有余额小红包' },
+                { label: '到账积分', value: data.pointsAmount > 0 ? `+${data.pointsAmount}` : '本次没有积分薯条' },
+                { label: '当前余额', value: `¥${data.newBalance.toFixed(2)}` },
+                { label: '当前积分', value: `${data.newPoints}` },
+                { label: '到账时间', value: timeStr }
+            ],
+            actionTip: '快去逛逛能兑换什么，白嫖虽好，也要记得优雅使用。',
+            brandName,
+            brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '白嫖补给到账',
+            alertTitle: '恭喜，白嫖小车已发车',
+            alertMessage: `${giftSummary} 已经咣当一声掉进您的账户。`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '欢迎加入白嫖站！系统刚刚给您的新手背包塞了点启动资金和快乐积分。',
+                '不用充值，不用许愿，到账就是这么朴实无华。'
+            ],
+            infoTitle: '到账详情',
+            infoItems: [
+                { label: '到账余额', value: data.balanceAmount > 0 ? `+¥${data.balanceAmount.toFixed(2)}` : '本次没有余额小红包' },
+                { label: '到账积分', value: data.pointsAmount > 0 ? `+${data.pointsAmount}` : '本次没有积分薯条' },
+                { label: '当前余额', value: `¥${data.newBalance.toFixed(2)}` },
+                { label: '当前积分', value: `${data.newPoints}` },
+                { label: '到账时间', value: timeStr }
+            ],
+            actionTip: '快去逛逛能兑换什么，白嫖虽好，也要记得优雅使用。',
+            brandName,
+            brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `白嫖补给到账 ${giftSummary}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send free site register gift email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送管理员创建实例通知邮件
+ */
+export async function sendAdminInstanceCreatedEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        packageName: string
+        planName?: string
+        hostName: string
+        cpu: number
+        memory: number
+        disk: number
+        isPaid: boolean
+        charged: boolean
+        amount?: number
+        expiresAt?: Date
+        giftDays?: number
+        creatorType?: 'admin' | 'host_owner'
+        creatorName?: string
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        // 格式化资源
+        const formatMemory = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`
+        const formatDisk = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(0)} GB` : `${mb} MB`
+
+        const infoItems: EmailInfoItem[] = [
+            { label: '实例名称', value: data.instanceName },
+            { label: '套餐', value: data.packageName },
+            { label: '节点', value: data.hostName },
+            { label: 'CPU', value: `${data.cpu}%` },
+            { label: '内存', value: formatMemory(data.memory) },
+            { label: '磁盘', value: formatDisk(data.disk) }
+        ]
+
+        if (data.isPaid && data.planName) {
+            infoItems.push({ label: '方案', value: data.planName })
+            if (data.charged && data.amount !== undefined) {
+                infoItems.push({ label: '扣费', value: `¥${data.amount.toFixed(2)}` })
+            } else if (!data.charged) {
+                infoItems.push({
+                    label: '费用',
+                    value: data.giftDays && data.giftDays > 0
+                        ? `免费赠送 ${data.giftDays} 天`
+                        : '首月免费赠送'
+                })
+            }
+            if (data.expiresAt) {
+                infoItems.push({ label: '到期时间', value: formatDate(data.expiresAt) })
+            }
+        }
+
+        let alertTitle: string
+        let alertMessage: string
+        const creatorLabel = data.creatorType === 'host_owner' ? '节点所有者' : '管理员'
+        const creatorWithName = data.creatorName ? `${creatorLabel} ${data.creatorName}` : creatorLabel
+
+        if (data.isPaid) {
+            alertTitle = data.charged ? `${creatorLabel}为您开通了付费实例` : `收到${creatorLabel}赠送的付费实例`
+            alertMessage = data.charged
+                ? `付费实例「${data.instanceName}」已开通，已扣除费用 ¥${data.amount?.toFixed(2)}`
+                : data.giftDays && data.giftDays > 0
+                    ? `${creatorLabel}赠送的付费实例「${data.instanceName}」已开通，免费时长 ${data.giftDays} 天`
+                    : `${creatorLabel}赠送的付费实例「${data.instanceName}」已开通，首月免费`
+        } else {
+            alertTitle = `收到${creatorLabel}赠送的实例`
+            alertMessage = `实例「${data.instanceName}」已创建成功`
+        }
+
+        const htmlContent = generateEmailHtml({
+            title: alertTitle,
+            alertType: 'success',
+            alertTitle,
+            alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs: [`${creatorWithName}为您创建了一台新实例，以下是实例详情：`],
+            infoTitle: '实例详情',
+            infoItems,
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: alertTitle,
+            alertTitle,
+            alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs: [`${creatorWithName}为您创建了一台新实例，以下是实例详情：`],
+            infoTitle: '实例详情',
+            infoItems,
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, alertTitle),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send admin instance created email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送账户封禁通知邮件
+ */
+export async function sendBanNotificationEmail(
+    email: string,
+    data: {
+        username: string
+        reason: string
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const htmlContent = generateEmailHtml({
+            title: '账户已被禁用',
+            alertType: 'danger',
+            alertTitle: '账户已被禁用',
+            alertMessage: '您的账户已被管理员禁用。',
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                `您的 ${brandName} 账户已被管理员禁用，您将无法登录或使用该账户。`,
+                '',
+                `封禁原因：${data.reason}`
+            ],
+            actionTip: '如有疑问，请联系管理员。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '账户已被禁用',
+            alertTitle: '账户已被禁用',
+            alertMessage: '您的账户已被管理员禁用。',
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                `您的 ${brandName} 账户已被管理员禁用，您将无法登录或使用该账户。`,
+                '',
+                `封禁原因：${data.reason}`
+            ],
+            actionTip: '如有疑问，请联系管理员。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, '账户已被禁用'),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send ban notification email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送宿主机通知邮件
+ */
+export async function sendHostAnnouncementEmail(
+    email: string,
+    data: {
+        username: string
+        hostName: string
+        title: string
+        content: string
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+        const normalizedContent = data.content.replace(/\r\n/g, '\n').trim()
+        const paragraphs = normalizedContent.split('\n')
+
+        const htmlContent = generateEmailHtml({
+            title: '宿主机通知',
+            alertType: 'info',
+            alertTitle: data.title,
+            alertMessage: `您收到了来自节点「${data.hostName}」的一条通知。`,
+            greeting: `您好，${data.username}`,
+            paragraphs,
+            infoTitle: '通知信息',
+            infoItems: [
+                { label: '节点', value: data.hostName },
+                { label: '标题', value: data.title }
+            ],
+            actionTip: '如需处理该通知，请登录面板查看相关实例。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '宿主机通知',
+            alertTitle: data.title,
+            alertMessage: `您收到了来自节点「${data.hostName}」的一条通知。`,
+            greeting: `您好，${data.username}`,
+            paragraphs,
+            infoTitle: '通知信息',
+            infoItems: [
+                { label: '节点', value: data.hostName },
+                { label: '标题', value: data.title }
+            ],
+            actionTip: '如需处理该通知，请登录面板查看相关实例。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `节点通知：${data.title}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send host announcement email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送实例到期提醒邮件
+ */
+export async function sendExpiryReminderEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        daysRemaining: number
+        expiresAt: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const expiresAtStr = formatDate(data.expiresAt)
+        const alertType = data.daysRemaining <= 1 ? 'danger' : 'warning'
+        const urgencyText = data.daysRemaining <= 1 
+            ? '紧急！您的实例即将到期' 
+            : `您的实例将在 ${data.daysRemaining} 天后到期`
+
+        const htmlContent = generateEmailHtml({
+            title: '实例到期提醒',
+            alertType: alertType,
+            alertTitle: urgencyText,
+            alertMessage: `实例「${data.instanceName}」将于 ${expiresAtStr} 到期`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '为避免实例被封停，请及时续费。',
+                '',
+                '实例到期后将被封停，封停 3 天后将被永久删除，数据无法恢复。'
+            ],
+            infoTitle: '实例详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '到期时间', value: expiresAtStr },
+                { label: '剩余天数', value: `${data.daysRemaining} 天` }
+            ],
+            actionTip: `请登录 ${brandName} 控制面板进行续费操作。`,
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '实例到期提醒',
+            alertTitle: urgencyText,
+            alertMessage: `实例「${data.instanceName}」将于 ${expiresAtStr} 到期`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '为避免实例被封停，请及时续费。',
+                '',
+                '实例到期后将被封停，封停 3 天后将被永久删除，数据无法恢复。'
+            ],
+            infoTitle: '实例详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '到期时间', value: expiresAtStr },
+                { label: '剩余天数', value: `${data.daysRemaining} 天` }
+            ],
+            actionTip: `请登录 ${brandName} 控制面板进行续费操作。`,
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `实例「${data.instanceName}」将在 ${data.daysRemaining} 天后到期`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send expiry reminder email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送自动续费成功邮件
+ */
+export async function sendAutoRenewSuccessEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        amount: number
+        months: number
+        newExpiresAt: Date
+        newBalance: number
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const newExpiresAtStr = formatDate(data.newExpiresAt)
+
+        const htmlContent = generateEmailHtml({
+            title: '自动续费成功',
+            alertType: 'success',
+            alertTitle: '自动续费成功',
+            alertMessage: `实例「${data.instanceName}」已自动续费 ${data.months} 个月`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的实例已自动续费成功，以下是续费详情：'],
+            infoTitle: '续费详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '续费时长', value: `${data.months} 个月` },
+                { label: '扣费金额', value: `￥${data.amount.toFixed(2)}` },
+                { label: '新到期时间', value: newExpiresAtStr },
+                { label: '剩余余额', value: `￥${data.newBalance.toFixed(2)}` }
+            ],
+            footerNote: '此邮件为自动续费通知，如有疑问请登录控制面板查看。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '自动续费成功',
+            alertTitle: '自动续费成功',
+            alertMessage: `实例「${data.instanceName}」已自动续费 ${data.months} 个月`,
+            greeting: `您好，${data.username}`,
+            paragraphs: ['您的实例已自动续费成功，以下是续费详情：'],
+            infoTitle: '续费详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '续费时长', value: `${data.months} 个月` },
+                { label: '扣费金额', value: `￥${data.amount.toFixed(2)}` },
+                { label: '新到期时间', value: newExpiresAtStr },
+                { label: '剩余余额', value: `￥${data.newBalance.toFixed(2)}` }
+            ],
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `自动续费成功：实例「${data.instanceName}」`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send auto-renew success email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送自动续费失败邮件
+ */
+export async function sendAutoRenewFailedEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        failReason: string
+        currentAttempt: number
+        maxAttempts: number
+        expiresAt: Date
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const expiresAtStr = formatDate(data.expiresAt)
+        const remainingAttempts = data.maxAttempts - data.currentAttempt
+        const isLastAttempt = remainingAttempts <= 0
+
+        const alertType = isLastAttempt ? 'danger' : 'warning'
+        const alertTitle = isLastAttempt 
+            ? '自动续费已失败（无剩余尝试次数）' 
+            : `自动续费失败（第 ${data.currentAttempt} 次尝试）`
+
+        const attemptsInfo = isLastAttempt
+            ? '已达到最大尝试次数，自动续费已关闭。请手动续费以避免实例被封停。'
+            : `还剩 ${remainingAttempts} 次尝试机会，系统将在稍后自动重试。建议您尽快充值或手动续费。`
+
+        const htmlContent = generateEmailHtml({
+            title: '自动续费失败',
+            alertType: alertType,
+            alertTitle: alertTitle,
+            alertMessage: `实例「${data.instanceName}」自动续费失败`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '您的实例自动续费失败，请查看详情：',
+                '',
+                attemptsInfo
+            ],
+            infoTitle: '失败详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '失败原因', value: data.failReason },
+                { label: '当前尝试', value: `第 ${data.currentAttempt} 次 / 共 ${data.maxAttempts} 次` },
+                { label: '到期时间', value: expiresAtStr }
+            ],
+            actionTip: `请尽快登录 ${brandName} 控制面板进行手动续费，避免实例到期后被封停。`,
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '自动续费失败',
+            alertTitle: alertTitle,
+            alertMessage: `实例「${data.instanceName}」自动续费失败`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '您的实例自动续费失败，请查看详情：',
+                '',
+                attemptsInfo
+            ],
+            infoTitle: '失败详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '失败原因', value: data.failReason },
+                { label: '当前尝试', value: `第 ${data.currentAttempt} 次 / 共 ${data.maxAttempts} 次` },
+                { label: '到期时间', value: expiresAtStr }
+            ],
+            actionTip: `请尽快登录 ${brandName} 控制面板进行手动续费。`,
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `自动续费失败：实例「${data.instanceName}」`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send auto-renew failed email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送实例续费价格变更提醒邮件
+ */
+export async function sendRenewalPriceUpdatedEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        hostName: string
+        oldPrice: number
+        newPrice: number
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const htmlContent = generateEmailHtml({
+            title: '实例续费价格调整通知',
+            alertType: 'info',
+            alertTitle: '实例续费价格已调整',
+            alertMessage: `实例「${data.instanceName}」的后续续费价格已更新`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '该价格将在您下一次续费时生效，当前计费周期不受影响。'
+            ],
+            infoTitle: '价格变更详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '节点', value: data.hostName },
+                { label: '原价格', value: `¥${data.oldPrice.toFixed(2)}/月` },
+                { label: '新价格', value: `¥${data.newPrice.toFixed(2)}/月` }
+            ],
+            actionTip: `如有疑问，请登录 ${brandName} 控制面板查看实例计费信息。`,
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title: '实例续费价格调整通知',
+            alertTitle: '实例续费价格已调整',
+            alertMessage: `实例「${data.instanceName}」的后续续费价格已更新`,
+            greeting: `您好，${data.username}`,
+            paragraphs: [
+                '该价格将在您下一次续费时生效，当前计费周期不受影响。'
+            ],
+            infoTitle: '价格变更详情',
+            infoItems: [
+                { label: '实例名称', value: data.instanceName },
+                { label: '节点', value: data.hostName },
+                { label: '原价格', value: `¥${data.oldPrice.toFixed(2)}/月` },
+                { label: '新价格', value: `¥${data.newPrice.toFixed(2)}/月` }
+            ],
+            actionTip: `如有疑问，请登录 ${brandName} 控制面板查看实例计费信息。`,
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `实例续费价格已调整：${data.instanceName}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send renewal price updated email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
+
+/**
+ * 发送实例销毁退款提醒邮件
+ */
+export async function sendInstanceDestroyRefundEmail(
+    email: string,
+    data: {
+        username: string
+        instanceName: string
+        refundAmount: number
+        feeAmount?: number
+        refundType?: string
+        reason?: string
+        isUserDestroy: boolean
+    }
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const transporter = await getTransporter()
+
+        if (!transporter) {
+            return { success: false, error: 'SMTP not configured' }
+        }
+
+        const { config, brandName, brandLogoUrl } = await getMailContext()
+
+        const title = data.isUserDestroy ? '实例销毁退款通知' : '实例删除退款通知'
+        const alertMessage = data.isUserDestroy
+            ? `实例「${data.instanceName}」已销毁，退款结果已生成`
+            : `实例「${data.instanceName}」已被删除，退款结果已生成`
+
+        const paragraphs = data.isUserDestroy
+            ? ['您的实例销毁操作已完成，以下是退款处理结果。']
+            : ['管理员已删除您的实例，以下是退款处理结果。']
+
+        const infoItems: EmailInfoItem[] = [
+            { label: '实例名称', value: data.instanceName },
+            { label: '退款金额', value: `¥${data.refundAmount.toFixed(2)}` }
+        ]
+
+        if (data.feeAmount !== undefined) {
+            infoItems.push({ label: '手续费', value: `¥${data.feeAmount.toFixed(2)}` })
+        }
+        if (data.refundType) {
+            infoItems.push({ label: '退款方式', value: data.refundType })
+        }
+        if (data.reason) {
+            infoItems.push({ label: '说明', value: data.reason })
+        }
+
+        const htmlContent = generateEmailHtml({
+            title,
+            alertType: 'success',
+            alertTitle: '退款已处理',
+            alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs,
+            infoTitle: '退款详情',
+            infoItems,
+            actionTip: '退款金额已发放至您的账户余额，请登录控制面板查看。',
+            brandName,
+        brandLogoUrl
+        })
+
+        const textContent = generateEmailText({
+            title,
+            alertTitle: '退款已处理',
+            alertMessage,
+            greeting: `您好，${data.username}`,
+            paragraphs,
+            infoTitle: '退款详情',
+            infoItems,
+            actionTip: '退款金额已发放至您的账户余额，请登录控制面板查看。',
+            brandName,
+        brandLogoUrl
+        })
+
+        await transporter.sendMail({
+            from: config.fromName ? `"${config.fromName}" <${config.fromEmail}>` : config.fromEmail,
+            to: email,
+            subject: formatBrandSubject(brandName, `${title}：${data.instanceName}`),
+            text: textContent,
+            html: htmlContent
+        })
+
+        return { success: true }
+    } catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        console.error('Failed to send instance destroy refund email:', errorMessage)
+        return { success: false, error: errorMessage }
+    }
+}
diff --git a/server/src/lib/managed-instance-provision.ts b/server/src/lib/managed-instance-provision.ts
new file mode 100644
index 0000000..6094a08
--- /dev/null
+++ b/server/src/lib/managed-instance-provision.ts
@@ -0,0 +1,156 @@
+import { prisma } from '../db/prisma.js'
+import { buildInstanceConfig, createInstance, getIncusClient, getInstanceState, startInstance } from '../lib/incus/index.js'
+import type { Host } from '../types/database.js'
+
+export interface ManagedInstanceProvisionConfig {
+  name: string
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+  cloudInitConfig?: Record<string, string>
+  networkMode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  nested?: boolean
+  privileged?: boolean
+  portLimit?: number
+  instanceType?: 'container' | 'vm'
+  sshPort?: number | null
+  storagePool?: string | null
+  ipv4Address?: string | null
+  ipv6Address?: string | null
+  ipv6Gateway?: string | null
+  hostInterface?: string | null
+  limitsRead?: string | null
+  limitsWrite?: string | null
+  limitsReadIops?: number | null
+  limitsWriteIops?: number | null
+  limitsIngress?: string | null
+  limitsEgress?: string | null
+  limitsProcesses?: number | null
+  limitsCpuPriority?: number | null
+  bootAutostart?: boolean | null
+  bootAutostartPriority?: number | null
+  bootAutostartDelay?: number | null
+  bootHostShutdownTimeout?: number | null
+}
+
+export async function provisionManagedInstanceAsync(
+  instanceId: number,
+  host: Host,
+  config: ManagedInstanceProvisionConfig
+): Promise<void> {
+  try {
+    console.log(`\n[Managed Provisioning] ===== start =====`)
+    console.log(`[Managed Provisioning] instanceId=${instanceId}, name=${config.name}, host=${host.name}`)
+
+    const client = await getIncusClient(host)
+    const ipv6Config = config.ipv6Address ? { primaryIp: config.ipv6Address } : null
+
+    const incusConfig = buildInstanceConfig({
+      name: config.name,
+      image: config.image,
+      cpu: config.cpu,
+      memory: config.memory,
+      disk: config.disk,
+      sshKey: '',
+      password: '',
+      cloudInitConfig: config.cloudInitConfig as { 'user.user-data': string } | undefined,
+      networkMode: config.networkMode,
+      nested: config.nested || false,
+      privileged: config.privileged || false,
+      instanceType: config.instanceType || 'container',
+      storagePool: config.storagePool || 'default',
+      ipv4Address: config.ipv4Address,
+      ipv6Config,
+      hostInterface: config.hostInterface || 'eth0',
+      ipv6Address: config.ipv6Address,
+      ipv6Gateway: config.ipv6Gateway,
+      limitsRead: config.limitsRead,
+      limitsWrite: config.limitsWrite,
+      limitsReadIops: config.limitsReadIops,
+      limitsWriteIops: config.limitsWriteIops,
+      limitsIngress: config.limitsIngress,
+      limitsEgress: config.limitsEgress,
+      limitsProcesses: config.limitsProcesses,
+      limitsCpuPriority: config.limitsCpuPriority,
+      bootAutostart: config.bootAutostart,
+      bootAutostartPriority: config.bootAutostartPriority,
+      bootAutostartDelay: config.bootAutostartDelay,
+      bootHostShutdownTimeout: config.bootHostShutdownTimeout
+    })
+
+    await createInstance(client, incusConfig)
+
+    let ready = false
+    for (let i = 0; i < 60; i++) {
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      try {
+        const stateResp = await getInstanceState(client, config.name) as { status?: string }
+        if (stateResp?.status) {
+          ready = true
+          break
+        }
+      } catch {
+        // keep waiting
+      }
+    }
+
+    if (!ready) {
+      throw new Error('Instance creation timed out')
+    }
+
+    await startInstance(client, config.name)
+
+    for (let i = 0; i < 30; i++) {
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      try {
+        const stateResp = await getInstanceState(client, config.name) as { status?: string }
+        if (stateResp?.status === 'Running') {
+          break
+        }
+      } catch {
+        // keep waiting
+      }
+    }
+
+    let ipv4: string | null = config.ipv4Address || null
+    let ipv6: string | null = config.ipv6Address || null
+
+    try {
+      const stateResp = await getInstanceState(client, config.name) as {
+        network?: Record<string, { addresses?: Array<{ family: string; scope: string; address: string }> }>
+      }
+      const network = stateResp?.network
+      if (network?.eth0?.addresses) {
+        for (const addr of network.eth0.addresses) {
+          if (addr.family === 'inet' && addr.scope === 'global') {
+            ipv4 = addr.address
+          } else if (addr.family === 'inet6' && addr.scope === 'global') {
+            ipv6 = addr.address
+          }
+        }
+      }
+    } catch {
+      // keep pre-allocated addresses
+    }
+
+    await prisma.instance.update({
+      where: { id: instanceId },
+      data: {
+        status: 'running',
+        ipv4,
+        ipv6,
+        storagePoolName: config.storagePool || 'default'
+      }
+    })
+  } catch (error) {
+    console.error(`[Managed Provisioning] instance ${instanceId} failed:`, error)
+
+    await prisma.instance.update({
+      where: { id: instanceId },
+      data: { status: 'error' }
+    }).catch(() => {})
+
+    throw error
+  }
+}
diff --git a/server/src/lib/network-address.ts b/server/src/lib/network-address.ts
new file mode 100644
index 0000000..ce4ce54
--- /dev/null
+++ b/server/src/lib/network-address.ts
@@ -0,0 +1,92 @@
+import { isIP } from 'net'
+
+export type DnsRecordType = 'A' | 'AAAA' | 'CNAME'
+
+export function normalizeNetworkHost(value: string): string {
+  const trimmed = value.trim()
+
+  if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+    const inner = trimmed.slice(1, -1).trim()
+    if (inner.includes(':')) {
+      return inner
+    }
+  }
+
+  return trimmed
+}
+
+export function getAddressFamily(value: string): 0 | 4 | 6 {
+  return isIP(normalizeNetworkHost(value)) as 0 | 4 | 6
+}
+
+export function isIpLiteral(value: string): boolean {
+  return getAddressFamily(value) !== 0
+}
+
+export function formatHostForUrl(value: string): string {
+  const normalized = normalizeNetworkHost(value)
+  return getAddressFamily(normalized) === 6 ? `[${normalized}]` : normalized
+}
+
+export function formatHostForListen(value: string): string {
+  return formatHostForUrl(value)
+}
+
+export function extractHostAddressFromUrl(value: string | null | undefined): string | null {
+  if (!value) return null
+  try {
+    const url = new URL(value)
+    return normalizeNetworkHost(url.hostname)
+  } catch {
+    return null
+  }
+}
+
+export function selectBindableIpv4ListenAddress(
+  explicitBindIpv4: string | null | undefined,
+  fallbackPublicIpv4: string | null | undefined,
+  _hostUrl: string | null | undefined,
+  hostIpAddress: string | null | undefined
+): string {
+  const explicit = explicitBindIpv4 ? normalizeNetworkHost(explicitBindIpv4) : ''
+  if (getAddressFamily(explicit) === 4) {
+    return explicit
+  }
+
+  const localCandidates = new Set<string>()
+  const normalizedHostIpAddress = hostIpAddress ? normalizeNetworkHost(hostIpAddress) : null
+  const fallback = fallbackPublicIpv4 ? normalizeNetworkHost(fallbackPublicIpv4) : ''
+
+  if (getAddressFamily(fallback) !== 4) {
+    return '0.0.0.0'
+  }
+
+  if (normalizedHostIpAddress && getAddressFamily(normalizedHostIpAddress) === 4) {
+    localCandidates.add(normalizedHostIpAddress)
+  }
+
+  return localCandidates.has(fallback) ? fallback : '0.0.0.0'
+}
+
+/**
+ * 判断地址是否为 IPv6
+ * 用于端口映射时检测 listen/connect IP 版本是否一致，
+ * 纯 IPv6 宿主机的 listen 地址为 IPv6，connect 地址为 IPv4 时需禁用内核态 NAT
+ */
+export function isIpv6Address(value: string): boolean {
+  return getAddressFamily(value) === 6
+}
+
+export function getDnsRecordType(value: string): DnsRecordType {
+  const family = getAddressFamily(value)
+
+  if (family === 4) {
+    return 'A'
+  }
+
+  if (family === 6) {
+    return 'AAAA'
+  }
+
+  return 'CNAME'
+}
diff --git a/server/src/lib/network-payload-builder.ts b/server/src/lib/network-payload-builder.ts
new file mode 100644
index 0000000..78f9d2d
--- /dev/null
+++ b/server/src/lib/network-payload-builder.ts
@@ -0,0 +1,441 @@
+/**
+ * network-payload-builder.ts
+ * IPv6 Routed 模式的 Payload 生成器
+ * 
+ * 核心职责:
+ * 1. 生成 Incus devices 配置 (双网卡: eth0 bridged + eth1 routed)
+ * 2. 生成 cloud-init network-config YAML (Guest OS 网络配置)
+ * 3. 同步实例网络配置 (添加/删除 IP)
+ */
+
+import type { IncusClient } from './incus/incus-client.js'
+import { getInstance, restartInstance } from './incus/incus-instances.js'
+import { IPV4_CONFIG } from './ip-calculator.js'
+import type { VmNicMacs } from './vm-network-identifiers.js'
+import { generateVmNicMacs } from './vm-network-identifiers.js'
+
+// ==================== 类型定义 ====================
+
+export type NetworkMode = 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+
+/**
+ * IPv6 配置结构
+ */
+export interface IPv6Config {
+  /** 主 IP (必须) */
+  primaryIp: string
+  /** 额外 IP 列表 */
+  extraIps?: string[]
+  /** 网段 CIDR (如 "2a01:4f9:c012:e7:aaaa::/112") */
+  subnet?: string
+}
+
+/**
+ * 网络设备构建选项
+ */
+export interface BuildNetworkDevicesOptions {
+  /** 网络模式 */
+  networkMode: NetworkMode
+  /** 宿主机物理网卡名 (用于 routed 模式) */
+  hostInterface: string
+  /** IPv6 配置 (nat_ipv6 模式必须) */
+  ipv6Config?: IPv6Config | null
+  /** 入站带宽限制 */
+  limitsIngress?: string | null
+  /** 出站带宽限制 */
+  limitsEgress?: string | null
+  /** NAT 网桥名称 */
+  natBridge?: string
+  /** 内网 IPv4 地址 (新增: 固定内网 IP) */
+  ipv4Address?: string | null
+  /** VM 主网卡 MAC */
+  eth0Hwaddr?: string | null
+  /** VM IPv6 网卡 MAC */
+  eth1Hwaddr?: string | null
+}
+
+// ==================== 设备配置生成 ====================
+
+/**
+ * 构建 Incus 网络设备配置
+ * 
+ * 双网卡架构:
+ * - eth0: bridged (incusbr0), 仅 IPv4 NAT
+ * - eth1: routed (宿主机物理网卡), IPv6 直连
+ */
+export function buildNetworkDevices(options: BuildNetworkDevicesOptions): Record<string, Record<string, string>> {
+  const {
+    networkMode,
+    hostInterface,
+    ipv6Config,
+    limitsIngress,
+    limitsEgress,
+    natBridge = 'incusbr0',
+    ipv4Address,
+    eth0Hwaddr,
+    eth1Hwaddr
+  } = options
+
+  const devices: Record<string, Record<string, string>> = {}
+
+  // eth0: IPv4 NAT (所有模式都需要)
+  const eth0Device: Record<string, string> = {
+    type: 'nic',
+    nictype: 'bridged',
+    parent: natBridge,
+    name: 'eth0'
+  }
+
+  // 固定内网 IPv4 地址 (DHCP 静态租约)
+  if (ipv4Address) {
+    eth0Device['ipv4.address'] = ipv4Address
+  }
+  if (eth0Hwaddr) {
+    eth0Device.hwaddr = eth0Hwaddr
+  }
+
+  // 带宽限制应用到 eth0 (NAT 出口)
+  if (limitsIngress) {
+    eth0Device['limits.ingress'] = limitsIngress
+  }
+  if (limitsEgress) {
+    eth0Device['limits.egress'] = limitsEgress
+  }
+
+  devices['eth0'] = eth0Device
+
+  // eth1: IPv6 Routed (仅 nat_ipv6 和 ipv6_only 模式需要独立 IPv6 地址)
+  const hasRoutedIpv6 = networkMode === 'nat_ipv6' || networkMode === 'ipv6_only'
+
+  if (hasRoutedIpv6 && ipv6Config) {
+    // 构建 IP 地址列表
+    const allIps = [ipv6Config.primaryIp]
+    if (ipv6Config.extraIps && ipv6Config.extraIps.length > 0) {
+      allIps.push(...ipv6Config.extraIps)
+    }
+
+    const eth1Device: Record<string, string> = {
+      type: 'nic',
+      nictype: 'routed',
+      parent: hostInterface,
+      name: 'eth1',
+      // 所有 IPv6 地址，逗号分隔
+      'ipv6.address': allIps.join(',')
+      // 注意: security.ipv6_filtering 和 security.mac_filtering 只支持 bridged 模式，routed 模式不支持
+    }
+    if (eth1Hwaddr) {
+      eth1Device.hwaddr = eth1Hwaddr
+    }
+
+    // 如果有网段分配，添加 ipv6.routes
+    if (ipv6Config.subnet) {
+      eth1Device['ipv6.routes'] = ipv6Config.subnet
+    }
+
+    devices['eth1'] = eth1Device
+  }
+
+  return devices
+}
+
+// ==================== Cloud-init 网络配置生成 ====================
+
+/**
+ * Cloud-init 网络配置选项
+ */
+export interface CloudInitNetworkOptions {
+  /** 内网 IPv4 地址 (必须) */
+  ipv4Address: string
+  /** IPv6 地址列表 (可选) */
+  ipv6List?: string[]
+  /** 网卡 MAC 地址（优先使用，避免依赖来宾接口命名） */
+  nicMacs?: Partial<VmNicMacs>
+}
+
+
+
+function getVmNicMacsForInstanceName(instanceName: string): VmNicMacs {
+  return generateVmNicMacs(instanceName)
+}
+
+/**
+ * 生成 cloud-init network-config v2 YAML
+ * 
+ * 配置说明:
+ * - eth0: 静态 IPv4 (固定内网 IP)
+ *   在 routed IPv6 双网卡架构下，必须显式关闭 eth0 的 DHCPv6/RA，
+ *   否则 guest 会从 incusbr0 再拿到一个 NAT IPv6，并把默认 IPv6 路由跑偏到宿主机出口。
+ * - eth1: 静态 IPv6 配置 (如果有)
+ */
+export function generateCloudInitNetworkConfig(options: CloudInitNetworkOptions): string {
+  const { ipv4Address, ipv6List } = options
+  const { gateway } = IPV4_CONFIG
+
+  // eth0: 静态 IPv4 配置
+  let config = `version: 2
+ethernets:
+  eth0:
+    dhcp4: false
+    dhcp6: false
+    accept-ra: false
+    addresses:
+      - ${ipv4Address}/22
+    routes:
+      - to: 0.0.0.0/0
+        via: ${gateway}
+    nameservers:
+      addresses:
+        - 10.10.0.1
+`
+
+  // eth1: 静态 IPv6 配置 (如果有)
+  if (ipv6List && ipv6List.length > 0) {
+    // 格式化 IPv6 地址 (添加 /128 掩码)
+    const formattedAddresses = ipv6List
+      .filter(ip => ip && ip.trim())
+      .map(ip => {
+        const trimmed = ip.trim()
+        return trimmed.includes('/') ? trimmed : `${trimmed}/128`
+      })
+
+    const addressesYaml = formattedAddresses
+      .map(addr => `      - ${addr}`)
+      .join('\n')
+
+    config += `  eth1:
+    dhcp4: false
+    dhcp6: false
+    accept-ra: false
+    addresses:
+${addressesYaml}
+    gateway6: fe80::1
+    nameservers:
+      addresses:
+        - 10.10.0.1
+`
+  }
+
+  return config
+}
+
+/**
+ * 生成 cloud-init network-config v2 YAML (仅 IPv6，向后兼容)
+ * @deprecated 使用 generateCloudInitNetworkConfig 替代
+ */
+export function generateCloudInitNetworkConfigLegacy(ipv6List: string[]): string {
+  if (!ipv6List || ipv6List.length === 0) {
+    // 无 IPv6，仅配置 eth0 DHCP
+    return `version: 2
+ethernets:
+  eth0:
+    dhcp4: true
+`
+  }
+
+  // 格式化 IPv6 地址 (添加 /128 掩码)
+  const formattedAddresses = ipv6List
+    .filter(ip => ip && ip.trim())
+    .map(ip => {
+      const trimmed = ip.trim()
+      // 如果已有掩码则不添加
+      return trimmed.includes('/') ? trimmed : `${trimmed}/128`
+    })
+
+  const addressesYaml = formattedAddresses
+    .map(addr => `      - ${addr}`)
+    .join('\n')
+
+  return `version: 2
+ethernets:
+  eth0:
+    dhcp4: true
+  eth1:
+    dhcp4: false
+    dhcp6: false
+    addresses:
+${addressesYaml}
+    gateway6: fe80::1
+`
+}
+
+// ==================== 网络同步 ====================
+
+/**
+ * 同步实例的 IPv6 网络配置
+ * 
+ * 流程:
+ * 1. 获取当前实例配置
+ * 2. 更新 eth1 设备的 ipv6.address 和 ipv6.routes
+ * 3. 更新 cloud-init network-config
+ * 4. 重启实例使配置生效
+ */
+export async function syncInstanceNetwork(
+  client: IncusClient,
+  instanceName: string,
+  ipv6Config: IPv6Config,
+  hostInterface: string,
+  restart: boolean = true
+): Promise<void> {
+  // 1. 获取当前配置
+  const current = await getInstance(client, instanceName) as unknown as {
+    config: Record<string, string>
+    devices: Record<string, Record<string, string>>
+    profiles: string[]
+    description?: string
+  }
+
+  // 2. 获取当前实例的 IPv4 地址
+  const currentIpv4 = current.devices?.eth0?.['ipv4.address'] || '10.10.1.1'
+
+  // 3. 构建新的 IPv6 地址列表
+  const allIps = [ipv6Config.primaryIp]
+  if (ipv6Config.extraIps && ipv6Config.extraIps.length > 0) {
+    allIps.push(...ipv6Config.extraIps)
+  }
+
+  // 4. 更新 eth1 设备配置
+  const devices = { ...current.devices }
+
+  if (devices['eth1']) {
+    // 更新现有 eth1
+    devices['eth1'] = {
+      ...devices['eth1'],
+      'ipv6.address': allIps.join(',')
+    }
+
+    // 更新网段路由
+    if (ipv6Config.subnet) {
+      devices['eth1']['ipv6.routes'] = ipv6Config.subnet
+    } else {
+      delete devices['eth1']['ipv6.routes']
+    }
+  } else {
+    const generatedNicMacs = getVmNicMacsForInstanceName(instanceName)
+    // 创建新的 eth1
+    devices['eth1'] = {
+      type: 'nic',
+      nictype: 'routed',
+      parent: hostInterface,
+      name: 'eth1',
+      hwaddr: generatedNicMacs.eth1,
+      'ipv6.address': allIps.join(',')
+      // 注意: security.ipv6_filtering 和 security.mac_filtering 只支持 bridged 模式
+    }
+
+    if (ipv6Config.subnet) {
+      devices['eth1']['ipv6.routes'] = ipv6Config.subnet
+    }
+  }
+
+  // 5. 更新 cloud-init network-config
+  const config = { ...current.config }
+  const nicMacs = {
+    eth0: current.devices?.eth0?.hwaddr || getVmNicMacsForInstanceName(instanceName).eth0,
+    eth1: devices['eth1']?.hwaddr || current.devices?.eth1?.hwaddr || getVmNicMacsForInstanceName(instanceName).eth1
+  }
+  config['user.network-config'] = generateCloudInitNetworkConfig({
+    ipv4Address: currentIpv4,
+    ipv6List: allIps,
+    nicMacs
+  })
+
+  // 6. 发送更新请求 (PUT 全量替换)
+  await client.request('PUT', `/1.0/instances/${instanceName}`, {
+    config,
+    devices,
+    profiles: current.profiles,
+    description: current.description || ''
+  })
+
+  // 7. 重启实例使配置生效
+  if (restart) {
+    try {
+      await restartInstance(client, instanceName, false)
+    } catch (err) {
+      console.warn(`[syncInstanceNetwork] 重启实例 ${instanceName} 失败:`, err)
+    }
+  }
+}
+
+/**
+ * 移除实例的 eth1 网卡 (用于从 IPv6 模式切换到纯 NAT)
+ */
+export async function removeInstanceIpv6(
+  client: IncusClient,
+  instanceName: string,
+  restart: boolean = true
+): Promise<void> {
+  const current = await getInstance(client, instanceName) as unknown as {
+    config: Record<string, string>
+    devices: Record<string, Record<string, string>>
+    profiles: string[]
+    description?: string
+  }
+
+  // 获取当前实例的 IPv4 地址
+  const currentIpv4 = current.devices?.eth0?.['ipv4.address'] || '10.10.1.1'
+
+  // 移除 eth1
+  const devices = { ...current.devices }
+  delete devices['eth1']
+
+  // 更新 network-config，保留 IPv4 配置，移除 IPv6
+  const config = { ...current.config }
+  const nicMacs = {
+    eth0: current.devices?.eth0?.hwaddr || getVmNicMacsForInstanceName(instanceName).eth0
+  }
+  config['user.network-config'] = generateCloudInitNetworkConfig({
+    ipv4Address: currentIpv4,
+    nicMacs
+    // 不传 ipv6List，仅生成 eth0 配置
+  })
+
+  await client.request('PUT', `/1.0/instances/${instanceName}`, {
+    config,
+    devices,
+    profiles: current.profiles,
+    description: current.description || ''
+  })
+
+  if (restart) {
+    try {
+      await restartInstance(client, instanceName, false)
+    } catch (err) {
+      console.warn(`[removeInstanceIpv6] 重启实例 ${instanceName} 失败:`, err)
+    }
+  }
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 判断网络模式是否需要独立 IPv6 地址（Routed 模式）
+ */
+export function hasIpv6Support(networkMode: NetworkMode): boolean {
+  return networkMode === 'nat_ipv6' || networkMode === 'ipv6_only'
+}
+
+/**
+ * 验证 IPv6 地址格式
+ */
+export function isValidIpv6(address: string): boolean {
+  // 简单的 IPv6 格式验证
+  const ipv6Regex = /^([0-9a-fA-F]{0,4}:){2,7}[0-9a-fA-F]{0,4}$/
+  const trimmed = address.trim().split('/')[0] // 移除掩码
+  return ipv6Regex.test(trimmed) || /^::1$/.test(trimmed) || /^::$/.test(trimmed)
+}
+
+/**
+ * 验证 IPv6 网段格式
+ */
+export function isValidIpv6Subnet(cidr: string): boolean {
+  const parts = cidr.split('/')
+  if (parts.length !== 2) return false
+
+  const [addr, prefix] = parts
+  const prefixNum = parseInt(prefix, 10)
+
+  if (isNaN(prefixNum) || prefixNum < 48 || prefixNum > 128) return false
+
+  return isValidIpv6(addr)
+}
diff --git a/server/src/lib/notifier.ts b/server/src/lib/notifier.ts
new file mode 100644
index 0000000..109b0ed
--- /dev/null
+++ b/server/src/lib/notifier.ts
@@ -0,0 +1,1531 @@
+/**
+ * 通知发送服务
+ * 支持 Telegram、Discord、Email、Webhook 等通知方式
+ * 包含自动重试机制
+ */
+
+import * as db from '../db/index.js'
+import { createInboxMessage } from '../db/inbox.js'
+import { prisma } from '../db/prisma.js'
+import { assertSafeWebhookUrl } from './outbound-security.js'
+
+// 重试配置
+const MAX_RETRIES = 3
+const RETRY_DELAY_MS = 2000
+
+type EventType =
+  | 'snapshot_created'
+  | 'snapshot_restored'
+  | 'snapshot_deleted'
+  | 'snapshot_failed'
+  | 'backup_created'
+  | 'backup_failed'
+  | 'backup_deleted'
+  | 'backup_restored'
+  | 'backup_uploaded'
+  | 'instance_created'
+  | 'instance_create_failed'
+  | 'instance_create_timeout'
+  | 'instance_started'
+  | 'instance_stopped'
+  | 'instance_restarted'
+  | 'instance_rebuilt'
+  | 'instance_cloned'
+  | 'instance_host_changed'
+  | 'instance_task_failed'
+  | 'instance_unexpected_stop'
+  | 'instance_deleted'
+  | 'instance_deleted_by_host_owner'
+  | 'instance_suspended'
+  | 'instance_unsuspended'
+  // 计费相关
+  | 'instance_renewed'
+  | 'instance_plan_changed'
+  | 'instance_price_changed'
+  | 'instance_expiring'
+  | 'instance_extended'
+  | 'instances_batch_extended'
+  | 'auto_renew_failed'
+  | 'refund_completed'
+  | 'instance_deleted_refunded'
+  | 'auto_snapshot'
+  | 'auto_snapshot_rotated'
+  | 'auto_backup'
+  | 'auto_backup_rotated'
+  // 社交互动类
+  | 'friend_request'
+  | 'friend_accepted'
+  | 'friend_rejected'
+  | 'friend_removed'
+  // 套餐与共享类
+  | 'package_shared'
+  | 'package_share_revoked'
+  // 实例转移类
+  | 'transfer_received'
+  | 'transfer_accepted'
+  | 'transfer_rejected'
+  | 'transfer_cancelled'
+  // 安全与账户类
+  | 'login_new_device'
+  | 'password_changed'
+  | '2fa_enabled'
+  | '2fa_disabled'
+  // 配额与资源类
+  | 'quota_warning'
+  // 工单类
+  | 'ticket_created'
+  | 'ticket_replied'
+  | 'ticket_status_changed'
+  | 'ticket_closed'
+  | 'ticket_auto_closed'
+  // 签到类
+  | 'redeem_code_used'
+  // AFF相关
+  | 'aff_applied'
+  // 托管节点价格调整
+  | 'instance_renewal_price_updated'
+
+interface EventData {
+  instanceName?: string
+  snapshotName?: string
+  backupName?: string
+  status?: string
+  error?: string
+  // 删除原因（宿主机所有者删除时）
+  deleteReason?: string
+  // 封停原因
+  suspendReason?: string
+  suspendedBy?: string
+  // 实例详细信息
+  hostName?: string           // 宿主机名称
+  oldHostName?: string        // 原宿主机名称
+  newHostName?: string        // 新宿主机名称
+  hostLocation?: string       // 宿主机位置
+  image?: string              // 镜像名称
+  cpu?: number                // CPU 配置 (%)
+  memory?: number             // 内存 (MB)
+  disk?: number               // 磁盘 (MB)
+  ipv4?: string               // IPv4 地址
+  ipv6?: string               // IPv6 地址
+  networkMode?: string        // 网络模式
+  packageName?: string        // 套餐名称
+  // 备份相关
+  storageName?: string        // 存储配置名称
+  fileName?: string           // 文件名
+  backupSize?: string         // 备份大小
+  // 自动策略轮换相关
+  deletedName?: string        // 被删除的旧快照/备份名称
+  quotaLimit?: number         // 配额上限
+  // 时间相关
+  createdAt?: string          // 创建时间
+  // 社交互动相关
+  fromUsername?: string       // 来源用户名
+  toUsername?: string         // 目标用户名
+  // 套餐共享相关
+  ownerUsername?: string      // 套餐所有者
+  // 实例转移相关
+  senderUsername?: string     // 转出方用户名
+  receiverUsername?: string   // 接收方用户名
+  // 安全相关
+  deviceInfo?: string         // 设备信息
+  ipAddress?: string          // IP 地址
+  loginTime?: string          // 登录时间
+  // 配额相关
+  quotaType?: string          // 配额类型
+  currentUsed?: number        // 当前已用
+  maxLimit?: number           // 最大限制
+  usagePercent?: number       // 使用百分比
+  // 工单相关
+  username?: string           // 用户名（工单创建者）
+  subject?: string            // 工单主题
+  replyFrom?: string          // 回复者用户名
+  newStatus?: string          // 新状态
+  closedBy?: string           // 关闭者用户名
+  // 计费相关
+  renewMonths?: number        // 续费月数
+  renewAmount?: number        // 续费金额
+  newExpiresAt?: string       // 新到期时间
+  oldPlanName?: string        // 原套餐方案名称
+  newPlanName?: string        // 新套餐方案名称
+  priceDiff?: number          // 价格差异（升降级）
+  oldPrice?: number            // 原价格（续费价格修改）
+  newPrice?: number            // 新价格（续费价格修改）
+  isIncrease?: boolean         // 是否为升级（价格升降级）
+  daysRemaining?: number      // 剩余天数
+  days?: number               // 延期天数
+  amount?: number             // 金额（通用）
+  reason?: string             // 原因（通用）
+  failReason?: string         // 失败原因
+  refundAmount?: number       // 退款金额
+  feeAmount?: number          // 手续费金额
+  refundType?: string         // 退款方式
+  discountPercent?: number    // 折扣百分比（如 5 表示 5%）
+  [key: string]: unknown
+  newImage?: string
+  taskType?: string
+}
+
+interface EventTemplate {
+  title: string
+  message: (data: EventData) => string
+}
+
+interface NotificationResult {
+  success: boolean
+  error: string | null
+}
+
+interface SendResult {
+  sent: number
+  failed: number
+}
+
+interface TelegramConfig {
+  botToken: string
+  chatId: string
+}
+
+interface DiscordConfig {
+  webhookUrl: string
+}
+
+interface WebhookConfig {
+  url: string
+  secret?: string
+}
+
+interface NotificationChannel {
+  id: number
+  type: 'telegram' | 'discord' | 'email' | 'webhook'
+  config: string | Record<string, unknown>
+}
+
+/**
+ * 格式化内存大小
+ */
+function formatMemory(mb: number | undefined): string {
+  if (!mb) return '-'
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
+  return `${mb} MB`
+}
+
+/**
+ * 格式化磁盘大小
+ */
+function formatDisk(mb: number | undefined): string {
+  if (!mb) return '-'
+  if (mb >= 1024) return `${(mb / 1024).toFixed(0)} GB`
+  return `${mb} MB`
+}
+
+/**
+ * 事件类型与消息模板
+ * 美化版本：包含更多详细信息
+ */
+const EVENT_TEMPLATES: Record<EventType, EventTemplate> = {
+  snapshot_created: {
+    title: '✅ 快照创建成功',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的快照「${data.snapshotName}」创建成功`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  snapshot_restored: {
+    title: '🔄 快照恢复成功',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已从快照「${data.snapshotName}」恢复`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  snapshot_deleted: {
+    title: '🗑️ 快照已删除',
+    message: (data) => `实例「${data.instanceName}」的快照「${data.snapshotName}」已删除`
+  },
+  snapshot_failed: {
+    title: '❌ 快照创建失败',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的快照创建失败`
+      if (data.error) msg += `\n错误: ${data.error}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  backup_created: {
+    title: '✅ 备份创建成功',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的备份「${data.backupName}」创建成功`
+      if (data.backupSize) msg += ` (${data.backupSize})`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  backup_failed: {
+    title: '❌ 备份创建失败',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的备份创建失败`
+      if (data.error) msg += `\n错误: ${data.error}`
+      return msg
+    }
+  },
+  backup_deleted: {
+    title: '🗑️ 备份已删除',
+    message: (data) => `实例「${data.instanceName}」的备份「${data.backupName}」已删除`
+  },
+  backup_restored: {
+    title: '🔄 备份恢复成功',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已从备份「${data.backupName}」恢复`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  backup_uploaded: {
+    title: '☁️ 备份上传成功',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的备份「${data.backupName}」已上传`
+      if (data.storageName) msg += `\n存储: ${data.storageName}`
+      if (data.fileName) msg += `\n文件: ${data.fileName}`
+      return msg
+    }
+  },
+  instance_created: {
+    title: '🚀 实例创建成功',
+    message: (data) => {
+      let msg = `您的实例「${data.instanceName}」已创建成功！`
+      if (data.hostName) {
+        msg += `\n节点: ${data.hostName}`
+        if (data.hostLocation) msg += ` (${data.hostLocation})`
+      }
+      if (data.image) msg += `\n镜像: ${data.image}`
+      // 资源配置在一行显示
+      const resources: string[] = []
+      if (data.cpu) resources.push(`CPU ${data.cpu}%`)
+      if (data.memory) resources.push(`内存 ${formatMemory(data.memory)}`)
+      if (data.disk) resources.push(`磁盘 ${formatDisk(data.disk)}`)
+      if (resources.length > 0) msg += `\n配置: ${resources.join(' | ')}`
+      if (data.networkMode) msg += `\n网络: ${data.networkMode === 'nat_ipv6' ? 'NAT + IPv6' : data.networkMode === 'nat' ? 'NAT' : data.networkMode}`
+      if (data.ipv4) msg += `\nIPv4: ${data.ipv4}`
+      if (data.ipv6) msg += `\nIPv6: ${data.ipv6}`
+      return msg
+    }
+  },
+  instance_create_failed: {
+    title: '❌ 实例创建失败',
+    message: (data) => {
+      let msg = `您的实例「${data.instanceName}」创建失败`
+      if (data.error) msg += `\n错误: ${data.error}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      msg += `\n资源已自动回滚，请稍后重试或联系管理员`
+      return msg
+    }
+  },
+  instance_create_timeout: {
+    title: '⏰ 实例创建超时',
+    message: (data) => {
+      let msg = `您的实例「${data.instanceName}」创建超时（超过10分钟）`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      msg += `\n资源已自动回滚，请稍后重试`
+      msg += `\n可能原因: 镜像下载缓慢 / 节点繁忙 / 网络问题`
+      return msg
+    }
+  },
+  instance_started: {
+    title: '▶️ 实例已启动',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已成功启动`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      if (data.ipv4) msg += `\nIPv4: ${data.ipv4}`
+      if (data.ipv6) msg += `\nIPv6: ${data.ipv6}`
+      return msg
+    }
+  },
+  instance_stopped: {
+    title: '⏹️ 实例已停止',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已停止运行`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  instance_restarted: {
+    title: '🔄 实例已重启',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已重启完成`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      if (data.ipv4) msg += `\nIPv4: ${data.ipv4}`
+      if (data.ipv6) msg += `\nIPv6: ${data.ipv6}`
+      return msg
+    }
+  },
+  instance_rebuilt: {
+    title: '🛠️ 实例已重装',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已成功重装系统`
+      if (data.newImage) msg += `\n新镜像: ${data.newImage}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  instance_cloned: {
+    title: '📋 实例已克隆',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已成功克隆`
+      if (data.newInstanceName) msg += `\n新实例: ${data.newInstanceName}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  instance_host_changed: {
+    title: '🔁 实例已改节点',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已成功迁移到新节点`
+      if (data.oldHostName || data.newHostName) msg += `\n节点: ${data.oldHostName || '-'} -> ${data.newHostName || '-'}`
+      if (data.ipv4) msg += `\nIPv4: ${data.ipv4}`
+      if (data.ipv6) msg += `\nIPv6: ${data.ipv6}`
+      return msg
+    }
+  },
+  instance_task_failed: {
+    title: '❌ 实例操作失败',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的操作失败`
+      if (data.taskType) msg += `\n操作: ${data.taskType}`
+      if (data.error) msg += `\n错误: ${data.error}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  instance_unexpected_stop: {
+    title: '⚠️ 实例异常停止',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已异常停止运行`
+      msg += `\n可能原因: 节点资源不足 / 实例崩溃 / 管理员操作`
+      if (data.hostName) msg += `\n节点: ${data.hostName.toUpperCase()}`
+      msg += `\n请前往面板检查实例状态`
+      return msg
+    }
+  },
+  instance_deleted: {
+    title: '🗑️ 实例已删除',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已永久删除`
+      if (data.hostName) msg += `\n原节点: ${data.hostName}`
+      return msg
+    }
+  },
+  instance_deleted_by_host_owner: {
+    title: '⚠️ 您的实例已被删除',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已被删除`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      if (data.deleteReason) msg += `\n原因: ${data.deleteReason}`
+      return msg
+    }
+  },
+  instance_suspended: {
+    title: '🚫 您的实例已被封停',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已被封停`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      if (data.suspendReason) msg += `\n原因: ${data.suspendReason}`
+      msg += `\n封停期间，实例无法启动、重启、重装等操作`
+      msg += `\n如有疑问，请发送工单`
+      return msg
+    }
+  },
+  instance_unsuspended: {
+    title: '✅ 您的实例已解除封停',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已解除封停`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      msg += `\n您现在可以正常使用该实例`
+      return msg
+    }
+  },
+  auto_snapshot: {
+    title: '📸 自动快照完成',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」自动快照完成`
+      msg += `\n快照: ${data.snapshotName}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  auto_snapshot_rotated: {
+    title: '🔄 自动快照轮换',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」快照配额已满 (${data.quotaLimit} 个)`
+      msg += `\n已删除: ${data.deletedName}`
+      msg += `\n已创建: ${data.snapshotName}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  auto_backup: {
+    title: '💾 自动备份完成',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」自动备份完成`
+      msg += `\n备份: ${data.backupName}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  auto_backup_rotated: {
+    title: '🔄 自动备份轮换',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」备份配额已满 (${data.quotaLimit} 个)`
+      msg += `\n已删除: ${data.deletedName}`
+      msg += `\n已创建: ${data.backupName}`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+
+  // ==================== 社交互动类 ====================
+  friend_request: {
+    title: '👥 新的好友申请',
+    message: (data) => `用户「${data.fromUsername}」向您发送了好友申请，请前往好友管理页面处理`
+  },
+  friend_accepted: {
+    title: '✅ 好友申请已通过',
+    message: (data) => `用户「${data.toUsername}」已接受您的好友申请，您们现在是好友了`
+  },
+  friend_rejected: {
+    title: '❌ 好友申请被拒绝',
+    message: (data) => `用户「${data.toUsername}」拒绝了您的好友申请`
+  },
+  friend_removed: {
+    title: '💔 好友关系已解除',
+    message: (data) => `用户「${data.fromUsername}」已将您从好友列表中移除`
+  },
+
+  // ==================== 套餐与共享类 ====================
+  package_shared: {
+    title: '🎁 收到套餐共享',
+    message: (data) => `用户「${data.ownerUsername}」将套餐「${data.packageName}」共享给您，您现在可以使用该套餐创建实例`
+  },
+  package_share_revoked: {
+    title: '🚫 套餐共享已撤销',
+    message: (data) => `用户「${data.ownerUsername}」已撤销套餐「${data.packageName}」的共享`
+  },
+
+  // ==================== 实例转移类 ====================
+  transfer_received: {
+    title: '📨 收到实例转移请求',
+    message: (data) => {
+      let msg = `用户「${data.senderUsername}」希望将实例「${data.instanceName}」转移给您`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      msg += `\n请前往转移管理页面处理`
+      return msg
+    }
+  },
+  transfer_accepted: {
+    title: '✅ 实例转移已接受',
+    message: (data) => {
+      let msg = `用户「${data.receiverUsername}」已接受实例「${data.instanceName}」的转移请求`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  transfer_rejected: {
+    title: '❌ 实例转移被拒绝',
+    message: (data) => `用户「${data.receiverUsername}」拒绝了实例「${data.instanceName}」的转移请求`
+  },
+  transfer_cancelled: {
+    title: '🚫 实例转移已取消',
+    message: (data) => `用户「${data.senderUsername}」取消了实例「${data.instanceName}」的转移请求`
+  },
+
+  // ==================== 安全与账户类 ====================
+  login_new_device: {
+    title: '🔐 新设备登录提醒',
+    message: (data) => {
+      let msg = `您的账户在新设备上登录`
+      if (data.deviceInfo) msg += `\n设备: ${data.deviceInfo}`
+      if (data.ipAddress) msg += `\nIP: ${data.ipAddress}`
+      if (data.loginTime) msg += `\n时间: ${data.loginTime}`
+      msg += `\n如非本人操作，请立即修改密码`
+      return msg
+    }
+  },
+  password_changed: {
+    title: '🔑 密码已修改',
+    message: (data) => {
+      let msg = `您的账户密码已成功修改`
+      if (data.ipAddress) msg += `\n操作 IP: ${data.ipAddress}`
+      msg += `\n如非本人操作，请立即联系管理员`
+      return msg
+    }
+  },
+  '2fa_enabled': {
+    title: '🛡️ 两步验证已启用',
+    message: () => `您的账户已成功启用两步验证，账户安全性已提升`
+  },
+  '2fa_disabled': {
+    title: '⚠️ 两步验证已禁用',
+    message: () => `您的账户已禁用两步验证，建议重新启用以提高账户安全性`
+  },
+
+  // ==================== 配额与资源类 ====================
+  quota_warning: {
+    title: '⚠️ 配额即将用尽',
+    message: (data) => {
+      let msg = `您的${data.quotaType}配额即将用尽`
+      msg += `\n使用: ${data.currentUsed} / ${data.maxLimit}`
+      if (data.usagePercent) msg += ` (${data.usagePercent}%)`
+      msg += `\n请前往个人设置添加配额`
+      return msg
+    }
+  },
+
+  // ==================== 工单类 ====================
+  ticket_created: {
+    title: '📩 收到新工单',
+    message: (data) => {
+      let msg = `用户「${data.username}」在节点「${data.hostName}」提交了新工单`
+      msg += `\n主题: ${data.subject}`
+      if (data.instanceName) msg += `\n相关实例: ${data.instanceName}`
+      msg += `\n请前往工单管理页面处理`
+      return msg
+    }
+  },
+  ticket_replied: {
+    title: '💬 工单有新回复',
+    message: (data) => {
+      let msg = `工单「${data.subject}」有新回复`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      if (data.replyFrom) msg += `\n来自: ${data.replyFrom}`
+      msg += `\n请前往工单页面查看详情`
+      return msg
+    }
+  },
+  ticket_status_changed: {
+    title: '📋 工单状态已更新',
+    message: (data) => {
+      const statusMap: Record<string, string> = {
+        open: '待处理',
+        in_progress: '处理中',
+        resolved: '已解决',
+        closed: '已关闭'
+      }
+      const statusText = statusMap[data.newStatus || ''] || data.newStatus
+      let msg = `工单「${data.subject}」状态已更新为「${statusText}」`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  },
+  ticket_closed: {
+    title: '🔒 工单已关闭',
+    message: (data) => {
+      let msg = `工单「${data.subject}」已被关闭`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      if (data.closedBy) msg += `\n关闭者: ${data.closedBy}`
+      return msg
+    }
+  },
+  ticket_auto_closed: {
+    title: '🔒 工单已自动关闭',
+    message: (data) => {
+      let msg = `工单「${data.subject}」已因超过24小时无新回复而自动关闭`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      msg += `\n如有新问题，请创建新工单`
+      return msg
+    }
+  },
+  redeem_code_used: {
+    title: '🎁 您的兑换码已被使用',
+    message: (data) => {
+      return `用户 ${data.username} 使用了您的兑换码\n兑换码: ${data.redeemCode}\n资源类型: ${data.codeType} +${data.codeValue}${data.unit}`
+    }
+  },
+
+  // ==================== 计费相关 ====================
+  instance_renewed: {
+    title: '✅ 实例续费成功',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」续费成功`
+      if (data.renewMonths) msg += `\n续费时长: ${data.renewMonths} 个月`
+      if (data.renewAmount !== undefined) msg += `\n扣费金额: ¥${Number(data.renewAmount).toFixed(2)}`
+      if (data.newExpiresAt) msg += `\n新到期时间: ${data.newExpiresAt}`
+      return msg
+    }
+  },
+  instance_plan_changed: {
+    title: '🔄 实例套餐已变更',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」套餐已变更`
+      if (data.oldPlanName && data.newPlanName) {
+        msg += `\n原套餐: ${data.oldPlanName}`
+        msg += `\n新套餐: ${data.newPlanName}`
+      }
+      if (data.priceDiff !== undefined) {
+        const diffText = data.priceDiff > 0 ? `补差价 ¥${Number(data.priceDiff).toFixed(2)}` : `退还 ¥${Math.abs(Number(data.priceDiff)).toFixed(2)}`
+        msg += `\n费用: ${diffText}`
+      }
+      return msg
+    }
+  },
+  instance_price_changed: {
+    title: '💰 实例价格已调整',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」价格已调整`
+      if (data.oldPrice !== undefined && data.newPrice !== undefined) {
+        msg += `\n原价格: ¥${Number(data.oldPrice).toFixed(2)}`
+        msg += `\n新价格: ¥${Number(data.newPrice).toFixed(2)}`
+      }
+      if (data.priceDiff !== undefined && data.priceDiff !== 0) {
+        const diffText = data.isIncrease ? `已扣除 ¥${Number(data.priceDiff).toFixed(2)}` : `已退还 ¥${Number(data.priceDiff).toFixed(2)}`
+        msg += `\n${diffText}`
+      }
+      return msg
+    }
+  },
+  instance_expiring: {
+    title: '⚠️ 实例即将到期',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」即将到期`
+      if (data.daysRemaining !== undefined) {
+        msg += `\n剩余时间: ${data.daysRemaining} 天`
+      }
+      if (data.newExpiresAt) {
+        msg += `\n到期时间: ${data.newExpiresAt}`
+      }
+      msg += `\n请及时续费以避免实例被封停或删除`
+      return msg
+    }
+  },
+  auto_renew_failed: {
+    title: '❌ 自动续费失败',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」自动续费失败`
+      if (data.failReason) msg += `\n原因: ${data.failReason}`
+      if (data.renewAmount !== undefined) msg += `\n所需金额: ¥${Number(data.renewAmount).toFixed(2)}`
+      msg += `\n请确保余额充足或手动续费`
+      return msg
+    }
+  },
+  instance_extended: {
+    title: '📅 实例已延期',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」已延期`
+      if (data.days) msg += `\n延期时长: ${data.days} 天`
+      if (data.amount !== undefined) msg += `\n费用: ¥${Number(data.amount).toFixed(2)}`
+      if (data.newExpiresAt) msg += `\n新到期时间: ${data.newExpiresAt}`
+      return msg
+    }
+  },
+  instances_batch_extended: {
+    title: '🎁 管理员已为您的实例赠送时长',
+    message: (data) => {
+      let msg = `您在节点「${data.hostName}」的付费实例已免费延期`
+      if (data.days) msg += `\n延期时长: ${data.days} 天`
+      msg += `\n请前往面板查看最新到期时间`
+      return msg
+    }
+  },
+  refund_completed: {
+    title: '💰 退款已完成',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的退款已完成`
+      if (data.amount !== undefined) msg += `\n退款金额: ¥${Number(data.amount).toFixed(2)}`
+      if (data.reason) msg += `\n原因: ${data.reason}`
+      msg += `\n退款已到账至您的余额`
+      return msg
+    }
+  },
+  instance_deleted_refunded: {
+    title: '🗑️ 实例已删除',
+    message: (data) => {
+      // 区分用户销毁和管理员删除
+      const isUserDestroy = data.isFreeInstance !== undefined || data.feeAmount !== undefined
+      let msg = isUserDestroy 
+        ? `您的实例「${data.instanceName}」已成功销毁`
+        : `您的实例「${data.instanceName}」已被管理员删除`
+      if (data.reason) msg += `\n删除原因: ${data.reason}`
+      if (data.refundAmount !== undefined && Number(data.refundAmount) > 0) {
+        msg += `\n退款金额: ¥${Number(data.refundAmount).toFixed(2)}`
+        if (data.feeAmount !== undefined && Number(data.feeAmount) > 0) {
+          msg += `\n手续费: ¥${Number(data.feeAmount).toFixed(2)}`
+        }
+        if (data.refundType) msg += `\n退款方式: ${data.refundType}`
+        msg += `\n退款已到账至您的余额`
+      } else if (data.isFreeInstance) {
+        msg += `\n免费实例无退款`
+      }
+      return msg
+    }
+  },
+  aff_applied: {
+    title: '🎁 已应用续费折扣',
+    message: (data) => {
+      let msg = `您的实例「${data.instanceName}」已应用推荐计划优惠`
+      if (data.discountPercent) msg += `\n折扣优惠: ${data.discountPercent}% 续费折扣`
+      msg += `\n后续续费时将自动享受折扣价格`
+      return msg
+    }
+  },
+  instance_renewal_price_updated: {
+    title: '💰 实例续费价格已调整',
+    message: (data) => {
+      let msg = `实例「${data.instanceName}」的续费价格已调整`
+      if (data.oldPrice !== undefined && data.newPrice !== undefined) {
+        msg += `\n原价格: ¥${Number(data.oldPrice).toFixed(2)}/月`
+        msg += `\n新价格: ¥${Number(data.newPrice).toFixed(2)}/月`
+      }
+      msg += `\n\n该价格将于下次续费时生效，本月不受影响。`
+      if (data.hostName) msg += `\n节点: ${data.hostName}`
+      return msg
+    }
+  }
+}
+
+/**
+ * 延迟函数
+ */
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 带重试的通知发送
+ */
+async function sendWithRetry(
+  sendFn: () => Promise<NotificationResult>,
+  channelType: string
+): Promise<NotificationResult> {
+  let lastError: string | null = null
+
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      const result = await sendFn()
+
+      if (result.success) {
+        return result
+      }
+
+      // 某些错误不需要重试（配置错误等）
+      if (isNonRetryableError(result.error)) {
+        return result
+      }
+
+      lastError = result.error
+      console.warn(`[Notifier] ${channelType} attempt ${attempt}/${MAX_RETRIES} failed: ${result.error}`)
+
+      if (attempt < MAX_RETRIES) {
+        await delay(RETRY_DELAY_MS * attempt) // 递增延迟
+      }
+    } catch (err) {
+      lastError = err instanceof Error ? err.message : String(err)
+      console.warn(`[Notifier] ${channelType} attempt ${attempt}/${MAX_RETRIES} error: ${lastError}`)
+
+      if (attempt < MAX_RETRIES) {
+        await delay(RETRY_DELAY_MS * attempt)
+      }
+    }
+  }
+
+  return { success: false, error: `Failed after ${MAX_RETRIES} attempts: ${lastError}` }
+}
+
+/**
+ * 判断是否为不可重试的错误
+ */
+function isNonRetryableError(error: string | null): boolean {
+  if (!error) return false
+
+  const nonRetryablePatterns = [
+    'Missing botToken',
+    'Missing chatId',
+    'Missing webhookUrl',
+    'Missing webhook URL',
+    'Invalid Discord Webhook URL',
+    'not yet implemented',
+    'Unknown channel type',
+    'Unsupported channel type',
+    'chat not found',
+    'bot was blocked',
+    'CHAT_ID_INVALID',
+    'BOT_TOKEN_INVALID',
+    '401', // Unauthorized
+    '403', // Forbidden
+    '404', // Not Found
+  ]
+
+  return nonRetryablePatterns.some(pattern =>
+    error.toLowerCase().includes(pattern.toLowerCase())
+  )
+}
+
+/**
+ * 发送通知到用户的所有启用渠道
+ * 同时创建站内信
+ */
+export async function sendNotification(
+  userId: number,
+  eventType: EventType,
+  data: EventData
+): Promise<SendResult> {
+  try {
+    const template = EVENT_TEMPLATES[eventType]
+    if (!template) {
+      console.warn(`[Notifier] Unknown event type: ${eventType}`)
+      return { sent: 0, failed: 0 }
+    }
+
+    const title = template.title
+    const message = template.message(data)
+
+    // 1. 创建站内信（始终创建）
+    try {
+      await createInboxMessage({
+        userId,
+        eventType,
+        title,
+        content: message,
+        data: data as Record<string, unknown>
+      })
+    } catch (err) {
+      console.error('[Notifier] Failed to create inbox message:', err)
+    }
+
+    // 2. 发送外部通知
+    const channels = await db.getEnabledChannelsByUserId(userId)
+
+    if (channels.length === 0) {
+      return { sent: 0, failed: 0 }
+    }
+
+    let sent = 0
+    let failed = 0
+
+    for (const channel of channels) {
+      try {
+        const config = typeof channel.config === 'string'
+          ? JSON.parse(channel.config)
+          : channel.config
+
+        // 创建日志记录
+        const logId = await db.createNotificationLog({
+          channelId: channel.id,
+          eventType,
+          message,
+          status: 'pending'
+        })
+
+        // 根据渠道类型发送通知（带重试）
+        let result: NotificationResult
+
+        switch (channel.type) {
+          case 'telegram':
+            result = await sendWithRetry(
+              () => sendTelegram(config as TelegramConfig, title, message),
+              'Telegram'
+            )
+            break
+          case 'discord':
+            result = await sendWithRetry(
+              () => sendDiscord(config as DiscordConfig, title, message),
+              'Discord'
+            )
+            break
+          case 'webhook':
+            result = await sendWithRetry(
+              () => sendWebhook(config as WebhookConfig, eventType, title, message, data),
+              'Webhook'
+            )
+            break
+          case 'email':
+            result = { success: false, error: 'Email notifications not yet implemented' }
+            break
+          default:
+            result = { success: false, error: `Unknown channel type: ${channel.type}` }
+        }
+
+        // 更新日志状态
+        await db.updateNotificationLogStatus(logId, result.success ? 'sent' : 'failed', result.error)
+
+        if (result.success) {
+          sent++
+        } else {
+          failed++
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        console.error(`[Notifier] Failed to send notification to channel ${channel.id}:`, error)
+        failed++
+      }
+    }
+
+    return { sent, failed }
+  } catch (err) {
+    console.error('[Notifier] sendNotification error:', err)
+    return { sent: 0, failed: 0 }
+  }
+}
+
+type HostManagedInstanceEventType = 'purchase' | 'renew' | 'destroy'
+
+function buildHostManagedInstanceNotification(
+  eventType: HostManagedInstanceEventType,
+  data: {
+    hostName: string
+    username: string
+    instanceName: string
+    amount?: number
+    refundAmount?: number
+    feeAmount?: number
+  }
+): { title: string; message: string; webhookEvent: string } {
+  switch (eventType) {
+    case 'purchase':
+      return {
+        title: '💰 托管收入到账',
+        message: [
+          `有用户购买了您托管的实例，收入 ¥${Number(data.amount || 0).toFixed(2)}`,
+          `节点: ${data.hostName}`,
+          '该笔收入将冻结30天后可提现'
+        ].join('\n'),
+        webhookEvent: 'host.instance_purchase'
+      }
+    case 'renew':
+      return {
+        title: '💰 托管收入到账',
+        message: [
+          `有用户续费了您托管的实例，收入 ¥${Number(data.amount || 0).toFixed(2)}`,
+          `节点: ${data.hostName}`,
+          '该笔收入将冻结30天后可提现'
+        ].join('\n'),
+        webhookEvent: 'host.instance_renew'
+      }
+    case 'destroy':
+      return {
+        title: '🗑️ 托管实例销毁',
+        message: [
+          `有用户销毁了您托管的实例，实际退款 ¥${Number(data.refundAmount || 0).toFixed(2)}`,
+          `节点: ${data.hostName}`,
+          `手续费: ¥${Number(data.feeAmount || 0).toFixed(2)}`
+        ].join('\n'),
+        webhookEvent: 'host.instance_destroy'
+      }
+  }
+}
+
+export async function sendHostManagedInstanceNotification(
+  hostId: number,
+  eventType: HostManagedInstanceEventType,
+  data: {
+    username: string
+    instanceName: string
+    amount?: number
+    refundAmount?: number
+    feeAmount?: number
+  }
+): Promise<SendResult> {
+  try {
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: {
+        userId: true,
+        name: true,
+        notifyPurchase: true,
+        notifyRenew: true,
+        notifyDestroy: true,
+        user: {
+          select: {
+            role: true
+          }
+        }
+      }
+    })
+
+    if (!host || host.user.role === 'admin') {
+      return { sent: 0, failed: 0 }
+    }
+
+    const enabled = eventType === 'purchase'
+      ? host.notifyPurchase
+      : eventType === 'renew'
+        ? host.notifyRenew
+        : host.notifyDestroy
+
+    if (!enabled) {
+      return { sent: 0, failed: 0 }
+    }
+
+    const channels = (await db.getEnabledChannelsByUserId(host.userId))
+      .filter(channel => ['telegram', 'discord', 'webhook'].includes(channel.type))
+
+    if (channels.length === 0) {
+      return { sent: 0, failed: 0 }
+    }
+
+    const payload = buildHostManagedInstanceNotification(eventType, {
+      hostName: host.name,
+      ...data
+    })
+
+    let sent = 0
+    let failed = 0
+
+    for (const channel of channels) {
+      try {
+        const config = typeof channel.config === 'string'
+          ? JSON.parse(channel.config)
+          : channel.config
+
+        const logId = await db.createNotificationLog({
+          channelId: channel.id,
+          eventType: payload.webhookEvent,
+          message: payload.message,
+          status: 'pending'
+        })
+
+        let result: NotificationResult
+
+        switch (channel.type) {
+          case 'telegram':
+            result = await sendWithRetry(
+              () => sendTelegram(config as TelegramConfig, payload.title, payload.message),
+              'Telegram'
+            )
+            break
+          case 'discord':
+            result = await sendWithRetry(
+              () => sendDiscord(config as DiscordConfig, payload.title, payload.message),
+              'Discord'
+            )
+            break
+          case 'webhook':
+            result = await sendWithRetry(
+              () => sendWebhook(
+                config as WebhookConfig,
+                payload.webhookEvent,
+                payload.title,
+                payload.message,
+                {
+                  hostId,
+                  hostName: host.name,
+                  eventType,
+                  ...data
+                }
+              ),
+              'Webhook'
+            )
+            break
+          default:
+            result = { success: false, error: `Unsupported channel type: ${channel.type}` }
+        }
+
+        await db.updateNotificationLogStatus(logId, result.success ? 'sent' : 'failed', result.error)
+
+        if (result.success) {
+          sent++
+        } else {
+          failed++
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        console.error(`[Notifier] Failed to send host managed instance notification to channel ${channel.id}:`, error)
+        failed++
+      }
+    }
+
+    return { sent, failed }
+  } catch (err) {
+    console.error('[Notifier] sendHostManagedInstanceNotification error:', err)
+    return { sent: 0, failed: 0 }
+  }
+}
+
+/**
+ * 发送 Telegram 通知
+ */
+async function sendTelegram(
+  config: TelegramConfig,
+  title: string,
+  message: string
+): Promise<NotificationResult> {
+  const { botToken, chatId } = config
+
+  if (!botToken || !chatId) {
+    return { success: false, error: 'Missing botToken or chatId' }
+  }
+
+  try {
+    const text = `*${escapeMarkdown(title)}*\n\n${escapeMarkdown(message)}`
+
+    const response = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        chat_id: chatId,
+        text,
+        parse_mode: 'MarkdownV2'
+      })
+    })
+
+    const result = await response.json() as { ok: boolean; description?: string }
+
+    if (!result.ok) {
+      return { success: false, error: result.description || 'Unknown Telegram error' }
+    }
+
+    return { success: true, error: null }
+  } catch (err) {
+    const error = err instanceof Error ? err.message : String(err)
+    return { success: false, error }
+  }
+}
+
+/**
+ * 发送 Discord 通知
+ */
+async function sendDiscord(
+  config: DiscordConfig,
+  title: string,
+  message: string
+): Promise<NotificationResult> {
+  const { webhookUrl } = config
+
+  if (!webhookUrl) {
+    return { success: false, error: 'Missing webhookUrl' }
+  }
+
+  try {
+    // 根据标题选择颜色
+    let color = 0x00ff00 // 默认绿色
+    if (title.includes('失败') || title.includes('❌')) {
+      color = 0xff0000 // 红色
+    } else if (title.includes('删除') || title.includes('🗑️')) {
+      color = 0x808080 // 灰色
+    } else if (title.includes('恢复') || title.includes('🔄')) {
+      color = 0x0099ff // 蓝色
+    } else if (title.includes('自动') || title.includes('📸') || title.includes('💾')) {
+      color = 0x9b59b6 // 紫色
+    }
+
+    const parsedUrl = await assertSafeWebhookUrl(webhookUrl)
+    const response = await fetch(parsedUrl.toString(), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        embeds: [{
+          title,
+          description: message,
+          color,
+          timestamp: new Date().toISOString(),
+          footer: {
+            text: 'Incudal'
+          }
+        }]
+      }),
+      redirect: 'manual'
+    })
+
+    if (!response.ok) {
+      const text = await response.text()
+      return { success: false, error: text || `HTTP ${response.status}` }
+    }
+
+    return { success: true, error: null }
+  } catch (err) {
+    const error = err instanceof Error ? err.message : String(err)
+    return { success: false, error }
+  }
+}
+
+/**
+ * 发送 Webhook 通知
+ */
+async function sendWebhook(
+  config: WebhookConfig,
+  eventType: string,
+  title: string,
+  message: string,
+  data: EventData
+): Promise<NotificationResult> {
+  const { url, secret } = config
+
+  if (!url) {
+    return { success: false, error: 'Missing webhook URL' }
+  }
+
+  try {
+    const parsedUrl = await assertSafeWebhookUrl(url)
+    const payload = {
+      event: eventType,
+      title,
+      message,
+      data,
+      timestamp: new Date().toISOString()
+    }
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json'
+    }
+
+    // 如果有 secret，添加签名
+    if (secret) {
+      const crypto = await import('crypto')
+      const signature = crypto.createHmac('sha256', secret)
+        .update(JSON.stringify(payload))
+        .digest('hex')
+      headers['X-Signature'] = signature
+    }
+
+    const response = await fetch(parsedUrl.toString(), {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(payload),
+      redirect: 'manual'
+    })
+
+    if (!response.ok) {
+      return { success: false, error: `HTTP ${response.status}` }
+    }
+
+    return { success: true, error: null }
+  } catch (err) {
+    const error = err instanceof Error ? err.message : String(err)
+    return { success: false, error }
+  }
+}
+
+/**
+ * 转义 Telegram MarkdownV2 特殊字符
+ */
+function escapeMarkdown(text: string): string {
+  return text.replace(/([_*\[\]()~`>#+\-=|{}.!])/g, '\\$1')
+}
+
+/**
+ * 测试通知渠道（带重试）
+ */
+export async function testNotificationChannel(channel: NotificationChannel): Promise<NotificationResult> {
+  const config = typeof channel.config === 'string'
+    ? JSON.parse(channel.config)
+    : channel.config
+
+  const testData: EventData = {
+    instanceName: 'test-instance',
+    snapshotName: 'test-snapshot'
+  }
+
+  let result: NotificationResult
+
+  switch (channel.type) {
+    case 'telegram':
+      result = await sendWithRetry(
+        () => sendTelegram(config as TelegramConfig, '🔔 测试通知', '这是一条来自 Incudal 的测试通知。\n如果您收到此消息，说明通知配置正确！'),
+        'Telegram'
+      )
+      break
+    case 'discord':
+      result = await sendWithRetry(
+        () => sendDiscord(config as DiscordConfig, '🔔 测试通知', '这是一条来自 Incudal 的测试通知。\n如果您收到此消息，说明通知配置正确！'),
+        'Discord'
+      )
+      break
+    case 'webhook':
+      result = await sendWithRetry(
+        () => sendWebhook(config as WebhookConfig, 'test' as EventType, '🔔 测试通知', '这是一条来自 Incudal 的测试通知。', testData),
+        'Webhook'
+      )
+      break
+    default:
+      result = { success: false, error: `Unsupported channel type: ${channel.type}` }
+  }
+
+  return result
+}
+
+/**
+ * 发送敏感操作验证码通知
+ */
+export async function sendVerificationNotification(
+  userId: number,
+  data: {
+    operationName: string
+    code: string
+    expiresInMinutes: number
+  }
+): Promise<{ success: boolean; error?: string }> {
+  // 获取用户的通知渠道
+  const channels = await db.getEnabledChannelsByUserId(userId)
+  
+  if (!channels || channels.length === 0) {
+    return { success: false, error: 'No notification channel configured' }
+  }
+
+  const title = '🔐 操作验证码'
+  const message = `您正在执行「${data.operationName}」操作
+
+验证码：${data.code}
+
+此验证码将在 ${data.expiresInMinutes} 分钟后失效。
+如非本人操作，请立即修改密码。`
+
+  // 只发送给第一个启用的渠道
+  const channel = channels[0]
+  
+  try {
+    const config = typeof channel.config === 'string'
+      ? JSON.parse(channel.config)
+      : channel.config
+
+    let result: NotificationResult
+
+    switch (channel.type) {
+      case 'telegram':
+        result = await sendWithRetry(
+          () => sendTelegram(config as TelegramConfig, title, message),
+          'Telegram'
+        )
+        break
+      case 'discord':
+        result = await sendWithRetry(
+          () => sendDiscord(config as DiscordConfig, title, message),
+          'Discord'
+        )
+        break
+      case 'webhook':
+        result = await sendWithRetry(
+          () => sendWebhook(
+            config as WebhookConfig,
+            'verification' as EventType,
+            title,
+            message,
+            { instanceName: '', code: data.code, operationName: data.operationName }
+          ),
+          'Webhook'
+        )
+        break
+      default:
+        return { success: false, error: `Unsupported channel type: ${channel.type}` }
+    }
+
+    if (!result.success) {
+      return { success: false, error: result.error || 'Failed to send notification' }
+    }
+
+    return { success: true }
+  } catch (err) {
+    const error = err instanceof Error ? err.message : String(err)
+    return { success: false, error }
+  }
+}
+
+/**
+ * 发送自定义消息到指定的通知渠道
+ * 用于套餐资源释放等自定义通知场景
+ * 
+ * 注意：该函数不检查 channel.enabled 状态，因为资源释放通知渠道
+ * 就是专门设置为禁用状态的（只用于资源释放通知，不接收系统事件通知）
+ * 
+ * @param link 可选的超链接，Telegram 会渲染为可点击的内联链接，其他渠道渲染为纯文本
+ */
+export async function sendToChannel(
+  channelId: number,
+  title: string,
+  message: string,
+  link?: { label: string; url: string }
+): Promise<{ success: boolean; error?: string }> {
+  try {
+    const channel = await db.getNotificationChannelById(channelId)
+    if (!channel) {
+      return { success: false, error: 'Channel not found' }
+    }
+
+    // 不检查 enabled 状态，因为资源释放通知渠道就是禁用状态的
+    // 设计说明：禁用状态的渠道不会接收系统事件通知，但可以接收资源释放通知
+
+    const config = typeof channel.config === 'string'
+      ? JSON.parse(channel.config)
+      : channel.config
+
+    // 创建日志记录
+    const logId = await db.createNotificationLog({
+      channelId: channel.id,
+      eventType: 'package.quota_release',
+      message,
+      status: 'pending'
+    })
+
+    let result: NotificationResult
+
+    switch (channel.type) {
+      case 'telegram': {
+        // Telegram MarkdownV2: 主消息体先 escape，然后将超链接作为 [label](url)
+        // 内联链接的 URL 部分不需要 escape，label 需要 escape
+        // 这样确保 URL 中的 . ? = & 等字符不被转义，链接可以被 Telegram 正确解析为可点击链接
+        const telegramConfig = config as TelegramConfig
+        if (!telegramConfig.botToken || !telegramConfig.chatId) {
+          result = { success: false, error: 'Missing botToken or chatId' }
+          break
+        }
+        try {
+          let text = `*${escapeMarkdown(title)}*\n\n${escapeMarkdown(message)}`
+          if (link) {
+            // [转义后的label](原始url) — URL 不转义，确保链接可点击
+            text += `\n[${escapeMarkdown(link.label)}](${link.url})`
+          }
+          const response = await fetch(`https://api.telegram.org/bot${telegramConfig.botToken}/sendMessage`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              chat_id: telegramConfig.chatId,
+              text,
+              parse_mode: 'MarkdownV2'
+            })
+          })
+          const json = await response.json() as { ok: boolean; description?: string }
+          result = json.ok
+            ? { success: true, error: null }
+            : { success: false, error: json.description || 'Unknown Telegram error' }
+        } catch (err) {
+          result = { success: false, error: err instanceof Error ? err.message : String(err) }
+        }
+        break
+      }
+      case 'discord': {
+        // Discord: 直接拼接，Discord 会自动渲染 URL 为超链接
+        const discordMessage = link ? `${message}\n${link.label}: ${link.url}` : message
+        result = await sendWithRetry(
+          () => sendDiscord(config as DiscordConfig, title, discordMessage),
+          'Discord'
+        )
+        break
+      }
+      case 'webhook': {
+        const webhookMessage = link ? `${message}\n${link.label}: ${link.url}` : message
+        result = await sendWithRetry(
+          () => sendWebhook(
+            config as WebhookConfig,
+            'package.quota_release' as unknown as EventType,
+            title,
+            webhookMessage,
+            { instanceName: '', link }
+          ),
+          'Webhook'
+        )
+        break
+      }
+      default:
+        result = { success: false, error: `Unsupported channel type: ${channel.type}` }
+    }
+
+    // 更新日志状态
+    await db.updateNotificationLogStatus(logId, result.success ? 'sent' : 'failed', result.error)
+
+    if (!result.success) {
+      return { success: false, error: result.error || 'Failed to send notification' }
+    }
+
+    return { success: true }
+  } catch (err) {
+    const error = err instanceof Error ? err.message : String(err)
+    return { success: false, error }
+  }
+}
diff --git a/server/src/lib/operation-verification.ts b/server/src/lib/operation-verification.ts
new file mode 100644
index 0000000..46edc27
--- /dev/null
+++ b/server/src/lib/operation-verification.ts
@@ -0,0 +1,394 @@
+/**
+ * 敏感操作二次验证服务
+ * 
+ * 账号相关操作：通过邮件验证
+ * 资源相关操作：通过用户绑定的通知渠道验证
+ */
+
+import { prisma } from '../db/prisma.js'
+import { OperationType, VerificationChannel } from '@prisma/client'
+import { sendOperationVerificationEmail } from './mailer.js'
+import { sendVerificationNotification } from './notifier.js'
+import crypto from 'crypto'
+
+// 操作类型分类
+const ACCOUNT_OPERATIONS: OperationType[] = [
+    'change_password',
+    'disable_2fa',
+    'change_email',
+    'delete_account'
+]
+
+const RESOURCE_OPERATIONS: OperationType[] = [
+    'delete_instance',
+    'reinstall_instance',
+    'recreate_instance',
+    'transfer_instance',
+    'delete_snapshot',
+    'delete_backup'
+]
+
+// 验证码配置
+const VERIFICATION_CONFIG = {
+    codeLength: 6,
+    expiresInMinutes: 10,
+    maxAttempts: 5
+}
+
+// 操作类型显示名称（用于通知）
+const OPERATION_NAMES: Record<OperationType, { zh: string; en: string }> = {
+    change_password: { zh: '修改密码', en: 'Change Password' },
+    disable_2fa: { zh: '禁用双因素认证', en: 'Disable 2FA' },
+    change_email: { zh: '修改邮箱地址', en: 'Change Email' },
+    delete_account: { zh: '删除账户', en: 'Delete Account' },
+    delete_instance: { zh: '删除实例', en: 'Delete Instance' },
+    reinstall_instance: { zh: '重装实例', en: 'Reinstall Instance' },
+    recreate_instance: { zh: '重建实例', en: 'Recreate Instance' },
+    transfer_instance: { zh: '转移实例', en: 'Transfer Instance' },
+    delete_snapshot: { zh: '删除快照', en: 'Delete Snapshot' },
+    delete_backup: { zh: '删除备份', en: 'Delete Backup' }
+}
+
+/**
+ * 生成6位随机验证码
+ */
+function generateVerificationCode(): string {
+    return crypto.randomInt(100000, 1000000).toString()
+}
+
+/**
+ * 判断操作类型是否为账号相关操作
+ */
+export function isAccountOperation(operationType: OperationType): boolean {
+    return ACCOUNT_OPERATIONS.includes(operationType)
+}
+
+/**
+ * 判断操作类型是否为资源相关操作
+ */
+export function isResourceOperation(operationType: OperationType): boolean {
+    return RESOURCE_OPERATIONS.includes(operationType)
+}
+
+/**
+ * 获取操作名称
+ */
+export function getOperationName(operationType: OperationType, lang: 'zh' | 'en' = 'zh'): string {
+    return OPERATION_NAMES[operationType]?.[lang] || operationType
+}
+
+/**
+ * 获取用户的首选通知渠道
+ */
+async function getUserNotificationChannel(userId: number): Promise<{
+    channel: VerificationChannel | null
+    channelId: number | null
+    target: string | null
+}> {
+    // 查找用户启用的第一个通知渠道
+    const notificationChannel = await prisma.notificationChannel.findFirst({
+        where: {
+            userId,
+            enabled: true
+        },
+        orderBy: { createdAt: 'asc' }
+    })
+
+    if (!notificationChannel) {
+        return { channel: null, channelId: null, target: null }
+    }
+
+    // 解析渠道配置获取目标标识（用于显示）
+    let target = ''
+    const config = typeof notificationChannel.config === 'string'
+        ? JSON.parse(notificationChannel.config)
+        : notificationChannel.config
+
+    switch (notificationChannel.type) {
+        case 'telegram':
+            target = `Telegram (${(config as { chatId?: string }).chatId?.substring(0, 6)}***)`
+            break
+        case 'discord':
+            target = 'Discord Webhook'
+            break
+        case 'webhook':
+            target = 'Webhook'
+            break
+        default:
+            target = notificationChannel.type
+    }
+
+    return {
+        channel: notificationChannel.type as VerificationChannel,
+        channelId: notificationChannel.id,
+        target
+    }
+}
+
+export interface RequestVerificationResult {
+    success: boolean
+    channel?: VerificationChannel
+    maskedTarget?: string
+    expiresIn?: number
+    error?: string
+    errorCode?: string
+}
+
+/**
+ * 请求二次验证码
+ */
+export async function requestOperationVerification(
+    userId: number,
+    operationType: OperationType,
+    resourceId?: number,
+    resourceType?: string
+): Promise<RequestVerificationResult> {
+    // 1. 获取用户信息
+    const user = await prisma.user.findUnique({
+        where: { id: userId },
+        select: { id: true, email: true, username: true }
+    })
+
+    if (!user) {
+        return { success: false, error: 'User not found', errorCode: 'USER_NOT_FOUND' }
+    }
+
+    // 2. 确定验证渠道
+    let channel: VerificationChannel
+    let maskedTarget: string
+
+    if (isAccountOperation(operationType)) {
+        // 账号操作：强制使用邮件
+        if (!user.email) {
+            return { success: false, error: 'Email not configured', errorCode: 'EMAIL_NOT_CONFIGURED' }
+        }
+        channel = 'email'
+        // 遮蔽邮箱
+        const [localPart, domain] = user.email.split('@')
+        maskedTarget = `${localPart.substring(0, 2)}***@${domain}`
+    } else {
+        // 资源操作：使用用户绑定的通知渠道
+        const notifyChannel = await getUserNotificationChannel(userId)
+        if (!notifyChannel.channel) {
+            // 没有绑定通知渠道，不需要二次验证
+            return { 
+                success: false, 
+                error: 'No notification channel configured', 
+                errorCode: 'NO_NOTIFICATION_CHANNEL' 
+            }
+        }
+        channel = notifyChannel.channel
+        maskedTarget = notifyChannel.target || channel
+    }
+
+    // 3. 清理过期的验证码
+    await prisma.operationVerification.deleteMany({
+        where: {
+            userId,
+            expiresAt: { lt: new Date() }
+        }
+    })
+
+    // 4. 检查是否有未过期的同类型验证码（防止频繁请求）
+    const existingVerification = await prisma.operationVerification.findFirst({
+        where: {
+            userId,
+            operationType,
+            resourceId: resourceId || null,
+            verified: false,
+            expiresAt: { gt: new Date() }
+        }
+    })
+
+    if (existingVerification) {
+        // 如果验证码创建时间在2分钟内，拒绝重新发送
+        const twoMinutesAgo = new Date(Date.now() - 2 * 60 * 1000)
+        if (existingVerification.createdAt > twoMinutesAgo) {
+            const remainingSeconds = Math.ceil((existingVerification.expiresAt.getTime() - Date.now()) / 1000)
+            return {
+                success: true,
+                channel,
+                maskedTarget,
+                expiresIn: remainingSeconds,
+                error: 'Verification code already sent, please wait'
+            }
+        }
+        // 删除旧的验证码
+        await prisma.operationVerification.delete({ where: { id: existingVerification.id } })
+    }
+
+    // 5. 生成新验证码
+    const code = generateVerificationCode()
+    const expiresAt = new Date(Date.now() + VERIFICATION_CONFIG.expiresInMinutes * 60 * 1000)
+
+    // 6. 存储验证码
+    await prisma.operationVerification.create({
+        data: {
+            userId,
+            operationType,
+            code,
+            channel,
+            resourceId: resourceId || null,
+            resourceType: resourceType || null,
+            expiresAt
+        }
+    })
+
+    // 7. 发送验证码
+    const operationName = getOperationName(operationType, 'zh')
+
+    if (channel === 'email') {
+        // 发送邮件
+        const result = await sendOperationVerificationEmail(user.email!, {
+            username: user.username,
+            operationName,
+            code,
+            expiresInMinutes: VERIFICATION_CONFIG.expiresInMinutes
+        })
+        if (!result.success) {
+            // 删除刚创建的验证码
+            await prisma.operationVerification.deleteMany({
+                where: { userId, operationType, code }
+            })
+            return { success: false, error: result.error, errorCode: 'SEND_FAILED' }
+        }
+    } else {
+        // 发送通知渠道消息
+        const result = await sendVerificationNotification(userId, {
+            operationName,
+            code,
+            expiresInMinutes: VERIFICATION_CONFIG.expiresInMinutes
+        })
+        if (!result.success) {
+            await prisma.operationVerification.deleteMany({
+                where: { userId, operationType, code }
+            })
+            return { success: false, error: result.error, errorCode: 'SEND_FAILED' }
+        }
+    }
+
+    return {
+        success: true,
+        channel,
+        maskedTarget,
+        expiresIn: VERIFICATION_CONFIG.expiresInMinutes * 60
+    }
+}
+
+export interface VerifyOperationResult {
+    success: boolean
+    verified: boolean
+    error?: string
+    errorCode?: string
+}
+
+/**
+ * 验证二次验证码
+ */
+export async function verifyOperationCode(
+    userId: number,
+    operationType: OperationType,
+    code: string,
+    resourceId?: number
+): Promise<VerifyOperationResult> {
+    // 查找匹配的验证记录
+    const verification = await prisma.operationVerification.findFirst({
+        where: {
+            userId,
+            operationType,
+            code,
+            resourceId: resourceId || null,
+            verified: false,
+            expiresAt: { gt: new Date() }
+        }
+    })
+
+    if (!verification) {
+        return { 
+            success: false, 
+            verified: false, 
+            error: 'Invalid or expired verification code',
+            errorCode: 'INVALID_CODE'
+        }
+    }
+
+    // 标记为已验证
+    await prisma.operationVerification.update({
+        where: { id: verification.id },
+        data: { 
+            verified: true,
+            verifiedAt: new Date()
+        }
+    })
+
+    return { success: true, verified: true }
+}
+
+/**
+ * 检查操作是否已经通过二次验证
+ * 验证在10分钟内有效
+ */
+export async function isOperationVerified(
+    userId: number,
+    operationType: OperationType,
+    resourceId?: number
+): Promise<boolean> {
+    const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000)
+    
+    const verification = await prisma.operationVerification.findFirst({
+        where: {
+            userId,
+            operationType,
+            resourceId: resourceId || null,
+            verified: true,
+            verifiedAt: { gt: tenMinutesAgo }
+        }
+    })
+
+    return !!verification
+}
+
+/**
+ * 清理已使用的验证记录（操作完成后调用）
+ */
+export async function consumeOperationVerification(
+    userId: number,
+    operationType: OperationType,
+    resourceId?: number
+): Promise<void> {
+    await prisma.operationVerification.deleteMany({
+        where: {
+            userId,
+            operationType,
+            resourceId: resourceId || null,
+            verified: true
+        }
+    })
+}
+
+/**
+ * 检查资源操作是否需要二次验证
+ * 如果用户没有绑定通知渠道，则不需要二次验证
+ */
+export async function isResourceVerificationRequired(userId: number): Promise<boolean> {
+    const channel = await getUserNotificationChannel(userId)
+    return channel.channel !== null
+}
+
+/**
+ * 清理过期的验证记录（定期调用）
+ * 删除所有已过期的验证记录
+ */
+export async function cleanupExpiredVerifications(): Promise<number> {
+    const result = await prisma.operationVerification.deleteMany({
+        where: {
+            expiresAt: { lt: new Date() }
+        }
+    })
+    return result.count
+}
+
+/**
+ * 导出操作类型常量供外部使用
+ */
+export { OperationType, VerificationChannel }
diff --git a/server/src/lib/outbound-security.ts b/server/src/lib/outbound-security.ts
new file mode 100644
index 0000000..a5c5f6d
--- /dev/null
+++ b/server/src/lib/outbound-security.ts
@@ -0,0 +1,165 @@
+import { lookup as dnsLookup } from 'dns/promises'
+import { isIP } from 'net'
+
+export class OutboundTargetValidationError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'OutboundTargetValidationError'
+  }
+}
+
+type SupportedProtocol = 'http' | 'https' | 'ftp' | 'sftp'
+
+function buildUrl(input: string, defaultProtocol: SupportedProtocol): URL {
+  const trimmed = input.trim()
+  if (!trimmed) {
+    throw new OutboundTargetValidationError('Target cannot be empty')
+  }
+
+  try {
+    if (trimmed.includes('://')) {
+      return new URL(trimmed)
+    }
+    return new URL(`${defaultProtocol}://${trimmed}`)
+  } catch {
+    throw new OutboundTargetValidationError('Target format is invalid')
+  }
+}
+
+function ipv4ToInt(ip: string): number {
+  return ip.split('.').reduce((acc, item) => (acc << 8) + Number(item), 0) >>> 0
+}
+
+function isIpv4InCidr(ip: string, baseIp: string, prefixLength: number): boolean {
+  const ipInt = ipv4ToInt(ip)
+  const baseInt = ipv4ToInt(baseIp)
+  const mask = prefixLength === 0 ? 0 : (0xffffffff << (32 - prefixLength)) >>> 0
+  return (ipInt & mask) === (baseInt & mask)
+}
+
+function normalizeIpv6(ip: string): string {
+  return ip.toLowerCase().replace(/^\[|\]$/g, '')
+}
+
+function isIpv6PrivateOrReserved(ip: string): boolean {
+  const normalized = normalizeIpv6(ip)
+
+  if (
+    normalized === '::' ||
+    normalized === '::1' ||
+    normalized.startsWith('fc') ||
+    normalized.startsWith('fd') ||
+    /^fe[89ab]/i.test(normalized) ||
+    normalized.startsWith('ff') ||
+    normalized.startsWith('2001:db8')
+  ) {
+    return true
+  }
+
+  const mappedIpv4Match = normalized.match(/^::ffff:(\d+\.\d+\.\d+\.\d+)$/i)
+  if (mappedIpv4Match) {
+    return isIpPrivateOrReserved(mappedIpv4Match[1])
+  }
+
+  return false
+}
+
+export function isIpPrivateOrReserved(ip: string): boolean {
+  const family = isIP(ip)
+  if (family === 4) {
+    const ranges: Array<[string, number]> = [
+      ['0.0.0.0', 8],
+      ['10.0.0.0', 8],
+      ['100.64.0.0', 10],
+      ['127.0.0.0', 8],
+      ['169.254.0.0', 16],
+      ['172.16.0.0', 12],
+      ['192.0.0.0', 24],
+      ['192.0.2.0', 24],
+      ['192.168.0.0', 16],
+      ['198.18.0.0', 15],
+      ['198.51.100.0', 24],
+      ['203.0.113.0', 24],
+      ['224.0.0.0', 4],
+      ['240.0.0.0', 4]
+    ]
+
+    return ranges.some(([baseIp, prefixLength]) => isIpv4InCidr(ip, baseIp, prefixLength))
+  }
+
+  if (family === 6) {
+    return isIpv6PrivateOrReserved(ip)
+  }
+
+  return true
+}
+
+async function assertPublicHostname(hostname: string): Promise<void> {
+  const normalizedHost = hostname.trim().toLowerCase().replace(/\.$/, '')
+  if (!normalizedHost) {
+    throw new OutboundTargetValidationError('Hostname cannot be empty')
+  }
+
+  if (
+    normalizedHost === 'localhost' ||
+    normalizedHost.endsWith('.localhost') ||
+    normalizedHost.endsWith('.local') ||
+    normalizedHost.endsWith('.internal')
+  ) {
+    throw new OutboundTargetValidationError('Private or local targets are not allowed')
+  }
+
+  const family = isIP(normalizedHost)
+  if (family !== 0) {
+    if (isIpPrivateOrReserved(normalizedHost)) {
+      throw new OutboundTargetValidationError('Private or reserved IP targets are not allowed')
+    }
+    return
+  }
+
+  if (!normalizedHost.includes('.')) {
+    throw new OutboundTargetValidationError('Private or local hostnames are not allowed')
+  }
+
+  let records: Array<{ address: string }>
+  try {
+    records = await dnsLookup(normalizedHost, { all: true, verbatim: true })
+  } catch (error: any) {
+    const code = error?.code ? String(error.code) : 'UNKNOWN'
+    throw new OutboundTargetValidationError(`Unable to resolve hostname (${code})`)
+  }
+
+  if (records.length === 0) {
+    throw new OutboundTargetValidationError('Unable to resolve hostname')
+  }
+
+  for (const record of records) {
+    if (isIpPrivateOrReserved(record.address)) {
+      throw new OutboundTargetValidationError('Targets resolving to private or reserved IPs are not allowed')
+    }
+  }
+}
+
+export async function assertSafeWebhookUrl(url: string): Promise<URL> {
+  const parsed = buildUrl(url, 'https')
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    throw new OutboundTargetValidationError('Webhook URL must use http or https')
+  }
+
+  await assertPublicHostname(parsed.hostname)
+  return parsed
+}
+
+export async function assertSafeStorageTarget(
+  type: 'WEBDAV' | 'FTP' | 'SFTP',
+  host: string
+): Promise<void> {
+  const defaultProtocol: Record<'WEBDAV' | 'FTP' | 'SFTP', SupportedProtocol> = {
+    WEBDAV: 'https',
+    FTP: 'ftp',
+    SFTP: 'sftp'
+  }
+
+  const parsed = buildUrl(host, defaultProtocol[type])
+  await assertPublicHostname(parsed.hostname)
+}
diff --git a/server/src/lib/permission.ts b/server/src/lib/permission.ts
new file mode 100644
index 0000000..6f07d0b
--- /dev/null
+++ b/server/src/lib/permission.ts
@@ -0,0 +1,437 @@
+/**
+ * 统一权限检查模块
+ * 
+ * 将分散在各路由中的权限检查逻辑集中管理
+ * 提供一致的权限验证接口
+ * 
+ * 权限规则：
+ * 1. 管理员 (admin): 拥有宿主机所有者的权限，可以查看和管理所有资源
+ * 2. 实例所有者: 可以操作自己创建的实例
+ * 3. 节点所有者: 可以管理其节点上的所有实例（有限制）
+ * 4. 好友: 可以查看好友分享的资源
+ * 
+ * AUTH004: 节点所有者/管理员权限边界明确定义
+ * 
+ * 节点所有者/管理员可以：
+ * - 启动/停止/重启节点上的实例
+ * - 查看节点上所有实例的状态
+ * - 创建/恢复节点上实例的快照
+ * - 强制停止实例（维护场景）
+ * - 查看实例日志和资源使用情况
+ * - 删除节点上其他用户的实例（维护/清理场景）
+ * 
+ * 节点所有者/管理员不可以：
+ * - 转移其他用户的实例所有权
+ * - 修改其他用户实例的配额
+ * - 下载其他用户的备份
+ * - 访问其他用户实例的敏感数据（如SSH密钥）
+ */
+
+import * as db from '../db/index.js'
+import type { FastifyReply } from 'fastify'
+import { apiError, ErrorCode } from './errors.js'
+
+/**
+ * 用户信息类型
+ */
+export interface AuthUser {
+    id: number
+    role: 'admin' | 'user'
+    username?: string
+}
+
+/**
+ * 权限检查结果
+ */
+export interface PermissionResult {
+    allowed: boolean
+    reason?: string
+    /** 权限类型：owner-所有者, hostOwner-节点所有者, admin-管理员 */
+    permissionType?: 'owner' | 'hostOwner' | 'admin' | 'friend'
+}
+
+// ==================== 实例权限检查 ====================
+
+/**
+ * 检查用户对实例的操作权限
+ * 
+ * 权限规则：
+ * 1. 管理员拥有宿主机所有者的权限，可以操作所有实例
+ * 2. 实例所有者可以操作自己创建的实例
+ * 3. 节点所有者可以操作其节点上的所有实例
+ * 
+ * @param user 当前用户
+ * @param instance 实例信息（需包含 user_id 和 host_id）
+ * @returns 权限检查结果
+ */
+export async function checkInstancePermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number }
+): Promise<PermissionResult> {
+    // 1. 管理员拥有宿主机所有者的权限
+    if (user.role === 'admin') {
+        return { allowed: true, permissionType: 'admin' }
+    }
+
+    // 2. 实例所有者有权限
+    if (instance.user_id === user.id) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    // 3. 检查是否是节点所有者
+    const host = await db.getHostById(instance.host_id)
+    if (host && host.user_id === user.id) {
+        return { allowed: true, permissionType: 'hostOwner' }
+    }
+
+    return { allowed: false, reason: 'No permission to operate this instance' }
+}
+
+/**
+ * 检查用户对实例的查看权限
+ * 与操作权限一致，管理员拥有宿主机所有者的权限
+ */
+export async function checkInstanceViewPermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number }
+): Promise<PermissionResult> {
+    return checkInstancePermission(user, instance)
+}
+
+/**
+ * 验证实例权限并自动发送错误响应
+ * 便捷方法，用于路由处理器中
+ * 
+ * @returns 如果有权限返回 true，否则发送 403 响应并返回 false
+ */
+export async function requireInstancePermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number },
+    reply: FastifyReply
+): Promise<boolean> {
+    const result = await checkInstancePermission(user, instance)
+    if (!result.allowed) {
+        reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        return false
+    }
+    return true
+}
+
+/**
+ * 验证实例查看权限并自动发送错误响应
+ */
+export async function requireInstanceViewPermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number },
+    reply: FastifyReply
+): Promise<boolean> {
+    const result = await checkInstanceViewPermission(user, instance)
+    if (!result.allowed) {
+        reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        return false
+    }
+    return true
+}
+
+// ==================== 节点权限检查 ====================
+
+/**
+ * 检查用户对节点的操作权限
+ * 
+ * 权限规则：
+ * 1. 管理员可以管理所有宿主机
+ * 2. 节点所有者可以管理自己的宿主机
+ */
+export async function checkHostPermission(
+    user: AuthUser,
+    host: { user_id: number }
+): Promise<PermissionResult> {
+    // 管理员可以管理所有宿主机
+    if (user.role === 'admin') {
+        return { allowed: true, permissionType: 'admin' }
+    }
+
+    // 节点所有者
+    if (host.user_id === user.id) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    return { allowed: false, reason: 'No permission to operate this host' }
+}
+
+/**
+ * 验证节点权限并自动发送错误响应
+ */
+export async function requireHostPermission(
+    user: AuthUser,
+    host: { user_id: number },
+    reply: FastifyReply
+): Promise<boolean> {
+    const result = await checkHostPermission(user, host)
+    if (!result.allowed) {
+        reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        return false
+    }
+    return true
+}
+
+// ==================== 备份/快照权限检查 ====================
+
+/**
+ * 检查用户对备份的操作权限
+ * 权限继承自实例权限
+ */
+export async function checkBackupPermission(
+    user: AuthUser,
+    instanceId: number
+): Promise<PermissionResult> {
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+        return { allowed: false, reason: 'Instance not found' }
+    }
+
+    return checkInstancePermission(user, instance)
+}
+
+/**
+ * 检查用户对快照的操作权限
+ * 权限继承自实例权限
+ */
+export async function checkSnapshotPermission(
+    user: AuthUser,
+    instanceId: number
+): Promise<PermissionResult> {
+    return checkBackupPermission(user, instanceId)
+}
+
+// ==================== AUTH004: 节点所有者细粒度权限 ====================
+
+/**
+ * 节点所有者允许的操作类型
+ */
+export type HostOwnerOperation = 
+    | 'start'           // 启动实例
+    | 'stop'            // 停止实例
+    | 'restart'         // 重启实例
+    | 'force_stop'      // 强制停止
+    | 'view_status'     // 查看状态
+    | 'view_logs'       // 查看日志
+    | 'snapshot_create' // 创建快照
+    | 'snapshot_restore'// 恢复快照
+    | 'snapshot_delete' // 删除快照
+    | 'delete'          // 删除实例（节点维护/清理场景）
+
+/**
+ * 节点所有者禁止的操作类型
+ */
+export type OwnerOnlyOperation = 
+    | 'transfer'        // 转移实例
+    | 'modify_quota'    // 修改配额
+    | 'backup_download' // 下载备份
+    | 'backup_upload'   // 上传备份
+    | 'ssh_key_access'  // 访问SSH密钥
+    | 'rebuild'         // 重装系统
+    | 'port_mapping'    // 端口映射管理
+
+/**
+ * 检查节点所有者/管理员是否有权限执行特定操作
+ * 
+ * @param user 当前用户
+ * @param instance 实例信息
+ * @param operation 操作类型
+ * @returns 权限检查结果
+ */
+export async function checkHostOwnerOperationPermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number },
+    operation: HostOwnerOperation | OwnerOnlyOperation
+): Promise<PermissionResult> {
+    // 实例所有者可以执行所有操作
+    if (instance.user_id === user.id) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    // 管理员拥有宿主机所有者的权限
+    const isAdmin = user.role === 'admin'
+
+    // 检查是否是节点所有者
+    const host = await db.getHostById(instance.host_id)
+    const isHostOwner = host && host.user_id === user.id
+
+    if (!isAdmin && !isHostOwner) {
+        return { allowed: false, reason: 'No permission to operate this instance' }
+    }
+
+    // 节点所有者/管理员禁止的操作
+    const ownerOnlyOperations: OwnerOnlyOperation[] = [
+        'transfer', 'modify_quota', 'backup_download', 
+        'backup_upload', 'ssh_key_access', 'rebuild', 'port_mapping'
+    ]
+
+    if (ownerOnlyOperations.includes(operation as OwnerOnlyOperation)) {
+        return { 
+            allowed: false, 
+            reason: `Host owner/admin cannot perform '${operation}' on other users' instances`,
+            permissionType: isAdmin ? 'admin' : 'hostOwner'
+        }
+    }
+
+    // 节点所有者/管理员允许的操作
+    return { allowed: true, permissionType: isAdmin ? 'admin' : 'hostOwner' }
+}
+
+/**
+ * 检查操作是否仅限实例所有者
+ * 用于敏感操作的权限检查
+ * 注意：管理员和宿主机所有者都不能执行仅实例所有者的操作
+ */
+export async function checkOwnerOnlyPermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number }
+): Promise<PermissionResult> {
+    if (instance.user_id === user.id) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    // 管理员也不能执行仅所有者的操作
+    if (user.role === 'admin') {
+        return { 
+            allowed: false, 
+            reason: 'This operation is only allowed for the instance owner, not admin',
+            permissionType: 'admin'
+        }
+    }
+
+    // 检查是否是节点所有者（用于返回更准确的错误信息）
+    const host = await db.getHostById(instance.host_id)
+    if (host && host.user_id === user.id) {
+        return { 
+            allowed: false, 
+            reason: 'This operation is only allowed for the instance owner, not host owner',
+            permissionType: 'hostOwner'
+        }
+    }
+
+    return { allowed: false, reason: 'No permission to operate this instance' }
+}
+
+/**
+ * 验证仅所有者权限并自动发送错误响应
+ */
+export async function requireOwnerOnlyPermission(
+    user: AuthUser,
+    instance: { user_id: number; host_id: number },
+    reply: FastifyReply
+): Promise<boolean> {
+    const result = await checkOwnerOnlyPermission(user, instance)
+    if (!result.allowed) {
+        // 如果是管理员或节点所有者尝试执行仅限所有者的操作，返回更明确的错误
+        if (result.permissionType === 'hostOwner' || result.permissionType === 'admin') {
+            reply.code(403).send({
+                error: 'HOST_OWNER_RESTRICTED',
+                message: 'This operation is only allowed for the instance owner'
+            })
+        } else {
+            reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+        return false
+    }
+    return true
+}
+
+// ==================== 套餐权限检查 ====================
+
+/**
+ * 检查用户对套餐的操作权限
+ * 
+ * 权限规则：
+ * 1. 套餐所有者可以操作自己的套餐
+ * 2. 套餐操作仅限套餐所有者，管理员不参与
+ */
+export async function checkPackagePermission(
+    user: AuthUser,
+    pkg: { user_id: number }
+): Promise<PermissionResult> {
+    if (pkg.user_id === user.id) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    return { allowed: false, reason: 'No permission to operate this package' }
+}
+
+// ==================== 用户资源权限检查 ====================
+
+/**
+ * 检查是否是资源所有者
+ * 通用的所有权检查，管理员不参与业务资源操作
+ */
+export function checkOwnership(
+    user: AuthUser,
+    resourceOwnerId: number
+): PermissionResult {
+    if (user.id === resourceOwnerId) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    return { allowed: false, reason: 'Not the resource owner' }
+}
+
+/**
+ * 检查是否是资源所有者（不包含管理员）
+ * 用于需要严格所有权验证的场景
+ */
+export function checkStrictOwnership(
+    user: AuthUser,
+    resourceOwnerId: number
+): PermissionResult {
+    if (user.id === resourceOwnerId) {
+        return { allowed: true, permissionType: 'owner' }
+    }
+
+    return { allowed: false, reason: 'Not the resource owner' }
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 判断用户是否是管理员
+ */
+export function isAdmin(user: AuthUser): boolean {
+    return user.role === 'admin'
+}
+
+/**
+ * 判断用户是否是普通用户
+ */
+export function isRegularUser(user: AuthUser): boolean {
+    return user.role === 'user'
+}
+
+/**
+ * 获取实例并验证权限
+ * 便捷方法，用于路由处理器中
+ * 
+ * @returns 实例对象，如果不存在或无权限返回 null
+ */
+export async function getInstanceWithPermission(
+    user: AuthUser,
+    instanceId: number,
+    reply: FastifyReply,
+    checkType: 'operate' | 'view' = 'operate'
+): Promise<Awaited<ReturnType<typeof db.getInstanceById>> | null> {
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+        reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+        return null
+    }
+
+    const hasPermission = checkType === 'view'
+        ? await requireInstanceViewPermission(user, instance, reply)
+        : await requireInstancePermission(user, instance, reply)
+
+    if (!hasPermission) {
+        return null
+    }
+
+    return instance
+}
diff --git a/server/src/lib/proxy/IProxyStrategy.ts b/server/src/lib/proxy/IProxyStrategy.ts
new file mode 100644
index 0000000..74e7ed7
--- /dev/null
+++ b/server/src/lib/proxy/IProxyStrategy.ts
@@ -0,0 +1,31 @@
+export interface ProxyDeviceConfig {
+    type: string;
+    listen: string;
+    connect: string;
+    nat?: string;
+    security_mac_filtering?: string;
+    [key: string]: string | undefined;
+}
+
+export interface NamedProxyDeviceConfig {
+    nameSuffix?: string;
+    deviceConfig: ProxyDeviceConfig;
+}
+
+export interface ProxyDeviceResult {
+    success: boolean;
+    errorMessage?: string;
+    deviceConfig?: ProxyDeviceConfig;
+    deviceConfigs?: NamedProxyDeviceConfig[];
+}
+
+export interface IProxyStrategy {
+    createProxyDevice(
+        hostNatIp: string | null | undefined,
+        hostIpv6: string | null | undefined,
+        networkMode: string,
+        protocol: string,
+        publicPort: number,
+        privatePort: number
+    ): ProxyDeviceResult;
+}
diff --git a/server/src/lib/proxy/KvmProxyStrategy.ts b/server/src/lib/proxy/KvmProxyStrategy.ts
new file mode 100644
index 0000000..0779a29
--- /dev/null
+++ b/server/src/lib/proxy/KvmProxyStrategy.ts
@@ -0,0 +1,81 @@
+import { IProxyStrategy, ProxyDeviceResult, ProxyDeviceConfig, NamedProxyDeviceConfig } from './IProxyStrategy.js'
+
+export class KvmProxyStrategy implements IProxyStrategy {
+    createProxyDevice(
+        hostNatIp: string | null | undefined,
+        hostIpv6: string | null | undefined,
+        networkMode: string,
+        protocol: string,
+        publicPort: number,
+        privatePort: number
+    ): ProxyDeviceResult {
+        if (networkMode === 'nat_ipv6_nat') {
+            const deviceConfigs: NamedProxyDeviceConfig[] = []
+
+            if (hostNatIp && hostNatIp !== '0.0.0.0') {
+                deviceConfigs.push({
+                    deviceConfig: {
+                        type: 'proxy',
+                        listen: `${protocol}:${hostNatIp}:${publicPort}`,
+                        connect: `${protocol}:0.0.0.0:${privatePort}`,
+                        nat: 'true'
+                    }
+                })
+            }
+
+            if (hostIpv6) {
+                deviceConfigs.push({
+                    nameSuffix: '-v6',
+                    deviceConfig: {
+                        type: 'proxy',
+                        listen: `${protocol}:[${hostIpv6}]:${publicPort}`,
+                        connect: `${protocol}:0.0.0.0:${privatePort}`
+                    }
+                })
+            }
+
+            if (deviceConfigs.length === 0) {
+                return {
+                    success: false,
+                    errorMessage: 'Current host has no usable NAT public IPv4 or IPv6 address for KVM port mapping.'
+                }
+            }
+
+            return { success: true, deviceConfigs }
+        }
+
+        let listenAddr: string
+
+        if (['ipv6_only', 'ipv6_nat'].includes(networkMode)) {
+            if (!hostIpv6) {
+                return {
+                    success: false,
+                    errorMessage: 'Current host has no public IPv6/NAT IPv6 configured for KVM port mapping.'
+                }
+            }
+            listenAddr = `[${hostIpv6}]`
+        } else {
+            if (!hostNatIp || hostNatIp === '0.0.0.0') {
+                return {
+                    success: false,
+                    errorMessage: 'Current host has no bindable IPv4 listen address for KVM port mapping. Please configure a local Listen IPv4 address in host NAT settings.'
+                }
+            }
+            listenAddr = hostNatIp
+        }
+
+        const connectAddr = networkMode === 'ipv6_only' ? '[::]' : '0.0.0.0'
+
+        const deviceConfig: ProxyDeviceConfig = {
+            type: 'proxy',
+            listen: `${protocol}:${listenAddr}:${publicPort}`,
+            connect: `${protocol}:${connectAddr}:${privatePort}`
+        }
+
+        if (networkMode !== 'ipv6_nat') {
+            deviceConfig.nat = 'true'
+        }
+
+        return { success: true, deviceConfig }
+    }
+}
diff --git a/server/src/lib/proxy/LxcProxyStrategy.ts b/server/src/lib/proxy/LxcProxyStrategy.ts
new file mode 100644
index 0000000..3ac0fde
--- /dev/null
+++ b/server/src/lib/proxy/LxcProxyStrategy.ts
@@ -0,0 +1,38 @@
+import { IProxyStrategy, ProxyDeviceResult, ProxyDeviceConfig } from './IProxyStrategy.js';
+
+export class LxcProxyStrategy implements IProxyStrategy {
+    createProxyDevice(
+        _hostNatIp: string | null | undefined,
+        hostIpv6: string | null | undefined,
+        networkMode: string,
+        protocol: string,
+        publicPort: number,
+        privatePort: number
+    ): ProxyDeviceResult {
+        let listenAddr: string;
+
+        // 若要求带有内部 IPv6 穿透的规则，强迫提取确切外部地址保护通配符监听错误
+        if (['ipv6_only', 'ipv6_nat'].includes(networkMode)) {
+            if (!hostIpv6) {
+                return { success: false, errorMessage: '当前所在节点暂无任何公网 IPv6 记录！请通知管理员在节点设置中补充【公网 IPv6 或 NAT IPv6 地址】，否则无法穿透映射。' };
+            }
+            listenAddr = `[${hostIpv6}]`;
+        } else if (networkMode === 'nat_ipv6_nat') {
+            // 当启用 IPv4 NAT 及 IPv6 NAT 的混合代理模式时，必须使用 [::] 来确保双栈监听而不单单是 0.0.0.0
+            listenAddr = '[::]';
+        } else {
+            listenAddr = _hostNatIp || '0.0.0.0';
+        }
+
+        // 普通情况下连接使用 0.0.0.0 自适应服务监听源；仅在仅含 IPv6 及无内网 V4 桥池的极端环境启用 [::] 防止 ECONNRESET
+        const connectAddr = ['ipv6_only', 'ipv6_nat'].includes(networkMode) ? '[::]' : '0.0.0.0';
+
+        const deviceConfig: ProxyDeviceConfig = {
+            type: 'proxy',
+            listen: `${protocol}:${listenAddr}:${publicPort}`,
+            connect: `${protocol}:${connectAddr}:${privatePort}`
+        };
+
+        return { success: true, deviceConfig };
+    }
+}
diff --git a/server/src/lib/proxy/index.ts b/server/src/lib/proxy/index.ts
new file mode 100644
index 0000000..a4feda9
--- /dev/null
+++ b/server/src/lib/proxy/index.ts
@@ -0,0 +1,14 @@
+import { IProxyStrategy } from './IProxyStrategy.js';
+import { LxcProxyStrategy } from './LxcProxyStrategy.js';
+import { KvmProxyStrategy } from './KvmProxyStrategy.js';
+
+export class ProxyStrategyFactory {
+    static getStrategy(instanceType: string | undefined): IProxyStrategy {
+        if (instanceType === 'virtual-machine' || instanceType === 'kvm') {
+            return new KvmProxyStrategy();
+        }
+        return new LxcProxyStrategy();
+    }
+}
+
+export * from './IProxyStrategy.js';
diff --git a/server/src/lib/recharge-payment-details.ts b/server/src/lib/recharge-payment-details.ts
new file mode 100644
index 0000000..4583701
--- /dev/null
+++ b/server/src/lib/recharge-payment-details.ts
@@ -0,0 +1,165 @@
+import type { HeleketConfig, HeleketPayment } from './heleket.js'
+import { extractHeleketPaymentDetails, getHeleketInvoiceAmount } from './heleket.js'
+
+export interface RechargePaymentDetails {
+  kind?: string
+  recharge?: {
+    amount?: number | null
+    payableAmount?: number | null
+    fee?: number | null
+    feeRate?: number | null
+    feeFixed?: number | null
+    feeMode?: 'surcharge' | 'deduct'
+    paymentMethod?: string | null
+  }
+  heleket?: {
+    invoiceCurrency?: string | null
+    invoiceAmount?: number | null
+    lifetimeSeconds?: number | null
+    orderId?: string | null
+    status?: string | null
+    statusDescription?: string | null
+    uuid?: string | null
+    txid?: string | null
+    payerCurrency?: string | null
+    network?: string | null
+    paymentMethodCode?: string | null
+    paymentAmount?: string | null
+    paymentAmountUsd?: string | null
+    merchantAmount?: string | null
+    address?: string | null
+    from?: string | null
+  }
+}
+
+export interface RechargePaymentDisplayInfo {
+  invoiceCurrency: string | null
+  paymentCurrency: string | null
+  paymentNetwork: string | null
+  actualPaymentMethod: string | null
+  paymentUuid: string | null
+  paymentTxid: string | null
+  gatewayStatus: string | null
+  gatewayStatusDescription: string | null
+}
+
+export function readRechargePaymentDetails(value: unknown): RechargePaymentDetails {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {}
+  }
+
+  return value as RechargePaymentDetails
+}
+
+export function buildHeleketInvoicePaymentDetails(
+  orderNo: string,
+  amount: number,
+  config: HeleketConfig
+): RechargePaymentDetails {
+  return {
+    kind: 'heleket',
+    heleket: {
+      orderId: orderNo,
+      invoiceCurrency: config.currency || 'CNY',
+      invoiceAmount: amount,
+      lifetimeSeconds: config.lifetimeSeconds
+    }
+  }
+}
+
+export function mergeRechargeAmountDetails(
+  existingValue: unknown,
+  input: {
+    amount: number
+    payableAmount: number
+    fee: number
+    feeRate: number
+    feeFixed: number
+    feeMode?: 'surcharge' | 'deduct'
+    paymentMethod?: string | null
+  }
+): RechargePaymentDetails {
+  const existing = readRechargePaymentDetails(existingValue)
+
+  return {
+    ...existing,
+    recharge: {
+      ...existing.recharge,
+      amount: input.amount,
+      payableAmount: input.payableAmount,
+      fee: input.fee,
+      feeRate: input.feeRate,
+      feeFixed: input.feeFixed,
+      feeMode: input.feeMode || 'surcharge',
+      paymentMethod: input.paymentMethod || null
+    }
+  }
+}
+
+export function getRechargePayableAmount(record: { amount: unknown; fee?: unknown; paymentDetails?: unknown }): number {
+  const paymentDetails = readRechargePaymentDetails(record.paymentDetails)
+  const configuredPayableAmount = paymentDetails.recharge?.payableAmount
+
+  if (configuredPayableAmount !== undefined && configuredPayableAmount !== null) {
+    const amount = Number(configuredPayableAmount)
+    if (Number.isFinite(amount) && amount > 0) {
+      return amount
+    }
+  }
+
+  return Number(record.amount)
+}
+
+export function mergeHeleketPaymentDetails(
+  existingValue: unknown,
+  payment: HeleketPayment | Record<string, unknown>,
+  config?: Partial<HeleketConfig>,
+  fallback?: {
+    orderNo?: string
+    invoiceAmount?: number
+  }
+): RechargePaymentDetails {
+  const existing = readRechargePaymentDetails(existingValue)
+  const heleketDetails = extractHeleketPaymentDetails(payment)
+  const invoiceAmount = getHeleketInvoiceAmount(payment)
+
+  return {
+    ...existing,
+    kind: 'heleket',
+    heleket: {
+      ...existing.heleket,
+      orderId: fallback?.orderNo || existing.heleket?.orderId || null,
+      invoiceCurrency: config?.currency || existing.heleket?.invoiceCurrency || null,
+      invoiceAmount: invoiceAmount ?? fallback?.invoiceAmount ?? existing.heleket?.invoiceAmount ?? null,
+      lifetimeSeconds: config?.lifetimeSeconds ?? existing.heleket?.lifetimeSeconds ?? null,
+      status: heleketDetails.status,
+      statusDescription: heleketDetails.statusDescription,
+      uuid: heleketDetails.uuid,
+      txid: heleketDetails.txid,
+      payerCurrency: heleketDetails.payerCurrency,
+      network: heleketDetails.network,
+      paymentMethodCode: heleketDetails.paymentMethodCode,
+      paymentAmount: heleketDetails.paymentAmount,
+      paymentAmountUsd: heleketDetails.paymentAmountUsd,
+      merchantAmount: heleketDetails.merchantAmount,
+      address: heleketDetails.address,
+      from: heleketDetails.from
+    }
+  }
+}
+
+export function extractRechargePaymentDisplayInfo(value: unknown): RechargePaymentDisplayInfo {
+  const details = readRechargePaymentDetails(value)
+  const heleket = details.heleket
+
+  return {
+    invoiceCurrency: heleket?.invoiceCurrency || null,
+    paymentCurrency: heleket?.payerCurrency || null,
+    paymentNetwork: heleket?.network || null,
+    actualPaymentMethod: heleket?.paymentMethodCode || null,
+    paymentUuid: heleket?.uuid || null,
+    paymentTxid: heleket?.txid || null,
+    gatewayStatus: heleket?.status || null,
+    gatewayStatusDescription: heleket?.statusDescription || null
+  }
+}
diff --git a/server/src/lib/recharge-provider-snapshot.ts b/server/src/lib/recharge-provider-snapshot.ts
new file mode 100644
index 0000000..f3b14db
--- /dev/null
+++ b/server/src/lib/recharge-provider-snapshot.ts
@@ -0,0 +1,62 @@
+import { decryptSensitiveData, encryptSensitiveData } from './security.js'
+
+export interface RechargeProviderConfigSnapshot {
+  type: string
+  config: Record<string, unknown>
+  capturedAt: string
+}
+
+export function buildRechargeProviderConfigSnapshot(
+  type: string,
+  config: Record<string, unknown>
+): string {
+  return encryptSensitiveData(JSON.stringify({
+    type,
+    config,
+    capturedAt: new Date().toISOString()
+  }))
+}
+
+export function parseRechargeProviderConfigSnapshot(
+  value: unknown
+): RechargeProviderConfigSnapshot | null {
+  if (typeof value !== 'string' || !value.trim()) {
+    return null
+  }
+
+  try {
+    const decrypted = decryptSensitiveData(value)
+    if (!decrypted) {
+      return null
+    }
+
+    const parsed = JSON.parse(decrypted) as RechargeProviderConfigSnapshot
+    if (
+      !parsed ||
+      typeof parsed !== 'object' ||
+      typeof parsed.type !== 'string' ||
+      !parsed.config ||
+      typeof parsed.config !== 'object' ||
+      Array.isArray(parsed.config)
+    ) {
+      return null
+    }
+
+    return parsed
+  } catch {
+    return null
+  }
+}
+
+export function resolveRechargeProviderConfigSnapshot(
+  providerType: string,
+  currentConfig: Record<string, unknown>,
+  snapshotValue: unknown
+): { config: Record<string, unknown>; source: 'snapshot' | 'provider' } {
+  const snapshot = parseRechargeProviderConfigSnapshot(snapshotValue)
+  if (snapshot && snapshot.type === providerType) {
+    return { config: snapshot.config, source: 'snapshot' }
+  }
+
+  return { config: currentConfig, source: 'provider' }
+}
diff --git a/server/src/lib/redirect-validator.ts b/server/src/lib/redirect-validator.ts
new file mode 100644
index 0000000..6a37b01
--- /dev/null
+++ b/server/src/lib/redirect-validator.ts
@@ -0,0 +1,60 @@
+/**
+ * 重定向 URL 验证工具
+ * 用于防止开放重定向漏洞 (Open Redirect Vulnerability)
+ */
+
+/**
+ * 验证重定向 URL 是否安全
+ * 只允许相对路径，不允许外部 URL 或 JavaScript 协议
+ */
+export function isValidRedirectUrl(url: string | undefined | null): boolean {
+    if (!url || typeof url !== 'string') {
+        return false
+    }
+
+    const trimmed = url.trim()
+
+    // 空字符串不允许
+    if (trimmed.length === 0) {
+        return false
+    }
+
+    // 必须以 / 开头（相对路径）
+    if (!trimmed.startsWith('/')) {
+        return false
+    }
+
+    // 不允许 // 开头（协议相对 URL，如 //evil.com）
+    if (trimmed.startsWith('//')) {
+        return false
+    }
+
+    // 不允许 javascript: 协议（包括各种变体）
+    const lowerUrl = trimmed.toLowerCase()
+    if (lowerUrl.includes('javascript:') || lowerUrl.includes('data:') || lowerUrl.includes('vbscript:')) {
+        return false
+    }
+
+    // 不允许包含换行符或其他特殊控制字符
+    if (/[\r\n\t]/.test(trimmed)) {
+        return false
+    }
+
+    // 不允许 URL 编码的换行符
+    if (/%0[dD]|%0[aA]/.test(trimmed)) {
+        return false
+    }
+
+    return true
+}
+
+/**
+ * 获取安全的重定向 URL
+ * 如果 URL 不安全，返回默认值
+ */
+export function getSafeRedirectUrl(url: string | undefined | null, defaultUrl: string = '/'): string {
+    if (isValidRedirectUrl(url)) {
+        return url!.trim()
+    }
+    return defaultUrl
+}
diff --git a/server/src/lib/release-notifier.ts b/server/src/lib/release-notifier.ts
new file mode 100644
index 0000000..0c00b3a
--- /dev/null
+++ b/server/src/lib/release-notifier.ts
@@ -0,0 +1,91 @@
+/**
+ * 资源释放通知
+ * 当实例被销毁/删除/过期导致套餐下的节点资源释放时，
+ * 向全局通知渠道发送通知。
+ */
+
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { sendToChannel } from './notifier.js'
+
+/**
+ * 格式化内存显示
+ */
+function formatMem(mb: number): string {
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(1)} GB`
+  }
+  return `${mb} MB`
+}
+
+/**
+ * 获取第一个全局通知渠道
+ */
+async function getFirstGlobalChannel(): Promise<{ id: number; name: string; type: string } | null> {
+  const channel = await prisma.notificationChannel.findFirst({
+    where: { isGlobal: true },
+    select: { id: true, name: true, type: true }
+  })
+  return channel
+}
+
+/**
+ * 发送资源释放通知到全局通知渠道
+ * @param params.packageId 套餐ID
+ * @param params.cpu 释放的 CPU（%）
+ * @param params.memory 释放的内存（MB）
+ * @param params.source 来源说明，如 "用户销毁实例" / "实例过期自动删除" / "节点所有者删除实例"
+ */
+export async function sendReleaseNotification(params: {
+  packageId: number
+  cpu: number
+  memory: number
+  source: string
+}): Promise<void> {
+  const { packageId, cpu, memory, source: _source } = params
+
+  try {
+    const globalChannel = await getFirstGlobalChannel()
+    if (!globalChannel) return
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) return
+
+    // 获取套餐绑定的所有宿主机的当前可用配额
+    const packageHostIds = pkg.host_ids || []
+    const hostDetails: string[] = []
+    for (const hostId of packageHostIds) {
+      const h = await db.getHostById(hostId)
+      if (h) {
+        const cpuAvailable = (h.cpu_allowance_max || 0) - (h.cpu_used || 0)
+        const memAvailable = (h.memory_max || 0) - (h.memory_used || 0)
+        hostDetails.push(`• ${h.name.toUpperCase()}: CPU ${cpuAvailable}% | 内存 ${formatMem(memAvailable)}`)
+      }
+    }
+
+    // 构建通知消息
+    const notifyTitle = `⭕ 资源释放 - ${pkg.name}`
+
+    // 判断套餐来源
+    const pkgOwner = pkg.user_id
+      ? await prisma.user.findUnique({ where: { id: pkg.user_id }, select: { role: true } })
+      : null
+    const pkgSource = pkgOwner?.role === 'admin' ? 'official' : 'market'
+    const buyLink = process.env.SITE_URL
+      ? { label: '🛒 立即开通', url: `${process.env.SITE_URL}/instances/create?source=${pkgSource}&package=${packageId}` }
+      : undefined
+
+    const notifyMessage = [
+      `+${cpu}% CPU / +${formatMem(memory)} 内存`,
+      '',
+      '当前可用配额：',
+      ...hostDetails,
+      '',
+      `⏰ ${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}`
+    ].join('\n')
+
+    await sendToChannel(globalChannel.id, notifyTitle, notifyMessage, buyLink)
+  } catch {
+    // 通知发送失败不影响主流程
+  }
+}
diff --git a/server/src/lib/retry.ts b/server/src/lib/retry.ts
new file mode 100644
index 0000000..62f7bf8
--- /dev/null
+++ b/server/src/lib/retry.ts
@@ -0,0 +1,288 @@
+/**
+ * 异步任务重试机制
+ * LOGIC003: 提供通用的重试工具，统一重试逻辑
+ * 
+ * 特性：
+ * - 可配置的重试次数和延迟
+ * - 指数退避（Exponential Backoff）
+ * - 可选的错误过滤（某些错误不重试）
+ * - 重试回调（用于日志或监控）
+ */
+
+/**
+ * 重试配置选项
+ */
+export interface RetryOptions {
+  /** 最大重试次数（不包括首次尝试）*/
+  maxRetries?: number
+  /** 基础延迟时间（毫秒）*/
+  baseDelay?: number
+  /** 最大延迟时间（毫秒）*/
+  maxDelay?: number
+  /** 是否使用指数退避 */
+  exponentialBackoff?: boolean
+  /** 退避因子（默认 2） */
+  backoffFactor?: number
+  /** 判断错误是否应该重试的函数 */
+  shouldRetry?: (error: Error, attempt: number) => boolean
+  /** 每次重试前的回调 */
+  onRetry?: (error: Error, attempt: number, delay: number) => void
+  /** 任务标识（用于日志） */
+  taskName?: string
+  /** 超时时间（毫秒，0 表示无限制） */
+  timeout?: number
+}
+
+/**
+ * 重试结果
+ */
+export interface RetryResult<T> {
+  success: boolean
+  result?: T
+  error?: Error
+  attempts: number
+  totalTime: number
+}
+
+/**
+ * 默认配置
+ */
+const DEFAULT_OPTIONS = {
+  maxRetries: 3,
+  baseDelay: 1000,
+  maxDelay: 30000,
+  exponentialBackoff: true,
+  backoffFactor: 2,
+  timeout: 0,
+} as const
+
+/**
+ * 延迟函数
+ */
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 计算下一次重试的延迟时间
+ */
+function calculateDelay(
+  attempt: number,
+  baseDelay: number,
+  maxDelay: number,
+  exponentialBackoff: boolean,
+  backoffFactor: number
+): number {
+  if (!exponentialBackoff) {
+    return Math.min(baseDelay, maxDelay)
+  }
+  
+  // 指数退避：baseDelay * (backoffFactor ^ attempt)
+  const calculatedDelay = baseDelay * Math.pow(backoffFactor, attempt - 1)
+  
+  // 添加随机抖动（±10%）避免雷群效应
+  const jitter = calculatedDelay * 0.1 * (Math.random() * 2 - 1)
+  
+  return Math.min(calculatedDelay + jitter, maxDelay)
+}
+
+/**
+ * 不可重试的错误模式（配置错误、认证错误等）
+ */
+const NON_RETRYABLE_PATTERNS = [
+  'INVALID_CREDENTIALS',
+  'UNAUTHORIZED',
+  'FORBIDDEN',
+  'NOT_FOUND',
+  'VALIDATION_ERROR',
+  'INVALID_ARGUMENT',
+  'Missing required',
+  'Invalid configuration',
+  '401',
+  '403',
+  '404',
+]
+
+/**
+ * 默认的错误过滤函数
+ */
+export function isRetryableError(error: Error): boolean {
+  const message = error.message.toLowerCase()
+  return !NON_RETRYABLE_PATTERNS.some(pattern => 
+    message.includes(pattern.toLowerCase())
+  )
+}
+
+/**
+ * 带重试的异步函数执行器
+ * 
+ * @param fn 要执行的异步函数
+ * @param options 重试配置
+ * @returns 执行结果
+ * 
+ * @example
+ * ```typescript
+ * const result = await withRetry(
+ *   () => fetchDataFromAPI(),
+ *   {
+ *     maxRetries: 3,
+ *     baseDelay: 1000,
+ *     taskName: 'API请求',
+ *     onRetry: (err, attempt) => console.log(`重试 ${attempt}: ${err.message}`)
+ *   }
+ * )
+ * ```
+ */
+export async function withRetry<T>(
+  fn: () => Promise<T>,
+  options: RetryOptions = {}
+): Promise<RetryResult<T>> {
+  const opts = { ...DEFAULT_OPTIONS, ...options }
+  const {
+    maxRetries,
+    baseDelay,
+    maxDelay,
+    exponentialBackoff,
+    backoffFactor,
+    shouldRetry = isRetryableError,
+    onRetry,
+    taskName = 'Task',
+    timeout,
+  } = opts
+
+  const startTime = Date.now()
+  let lastError: Error | undefined
+  let attempts = 0
+
+  // 超时处理
+  let timeoutHandle: NodeJS.Timeout | undefined
+  let isTimedOut = false
+
+  if (timeout > 0) {
+    timeoutHandle = setTimeout(() => {
+      isTimedOut = true
+    }, timeout)
+  }
+
+  try {
+    for (let attempt = 1; attempt <= maxRetries + 1; attempt++) {
+      attempts = attempt
+
+      // 检查超时
+      if (isTimedOut) {
+        throw new Error(`${taskName}: Operation timed out after ${timeout}ms`)
+      }
+
+      try {
+        const result = await fn()
+        
+        return {
+          success: true,
+          result,
+          attempts,
+          totalTime: Date.now() - startTime,
+        }
+      } catch (error) {
+        lastError = error instanceof Error ? error : new Error(String(error))
+
+        // 如果是最后一次尝试，不再重试
+        if (attempt > maxRetries) {
+          break
+        }
+
+        // 检查是否应该重试
+        if (!shouldRetry(lastError, attempt)) {
+          console.warn(`[Retry] ${taskName}: Non-retryable error, stopping retry`)
+          break
+        }
+
+        // 计算延迟
+        const retryDelay = calculateDelay(attempt, baseDelay, maxDelay, exponentialBackoff, backoffFactor)
+
+        // 调用重试回调
+        if (onRetry) {
+          onRetry(lastError, attempt, retryDelay)
+        } else {
+          console.warn(`[Retry] ${taskName}: Attempt ${attempt}/${maxRetries + 1} failed, retrying in ${retryDelay}ms: ${lastError.message}`)
+        }
+
+        // 等待后重试
+        await delay(retryDelay)
+      }
+    }
+  } finally {
+    if (timeoutHandle) {
+      clearTimeout(timeoutHandle)
+    }
+  }
+
+  return {
+    success: false,
+    error: lastError,
+    attempts,
+    totalTime: Date.now() - startTime,
+  }
+}
+
+/**
+ * 简化版重试函数（直接返回结果或抛出错误）
+ */
+export async function retry<T>(
+  fn: () => Promise<T>,
+  options: RetryOptions = {}
+): Promise<T> {
+  const result = await withRetry(fn, options)
+  
+  if (result.success && result.result !== undefined) {
+    return result.result
+  }
+  
+  throw result.error || new Error('Retry failed with unknown error')
+}
+
+/**
+ * 创建可重用的重试执行器
+ */
+export function createRetryExecutor(defaultOptions: RetryOptions = {}) {
+  return async <T>(fn: () => Promise<T>, overrideOptions: RetryOptions = {}): Promise<RetryResult<T>> => {
+    return withRetry(fn, { ...defaultOptions, ...overrideOptions })
+  }
+}
+
+/**
+ * 批量执行带重试的任务
+ * 
+ * @param tasks 任务数组
+ * @param options 重试配置
+ * @param concurrency 并发数（默认 5）
+ */
+export async function withRetryBatch<T>(
+  tasks: Array<{ name: string; fn: () => Promise<T> }>,
+  options: Omit<RetryOptions, 'taskName'> = {},
+  concurrency: number = 5
+): Promise<Array<RetryResult<T> & { name: string }>> {
+  const results: Array<RetryResult<T> & { name: string }> = []
+  
+  // 使用简单的并发控制
+  const executing: Promise<void>[] = []
+  
+  for (const task of tasks) {
+    const p = (async () => {
+      const result = await withRetry(task.fn, { ...options, taskName: task.name })
+      results.push({ ...result, name: task.name })
+    })()
+    
+    executing.push(p)
+    
+    if (executing.length >= concurrency) {
+      await Promise.race(executing)
+      // 移除已完成的
+      executing.splice(0, executing.length, ...executing.filter(e => e !== p))
+    }
+  }
+  
+  // 等待剩余任务完成
+  await Promise.all(executing)
+  
+  return results
+}
diff --git a/server/src/lib/security-config.ts b/server/src/lib/security-config.ts
new file mode 100644
index 0000000..779dfaf
--- /dev/null
+++ b/server/src/lib/security-config.ts
@@ -0,0 +1,90 @@
+const INSECURE_SECRET_PATTERNS = [
+  'dev-secret',
+  'dev_secret',
+  'development',
+  'change-in-production',
+  'changeme',
+  'secret',
+  'password',
+  '123456',
+  'test',
+  'demo',
+  'example',
+  'default',
+]
+
+/**
+ * 检查 JWT 与敏感字段加密配置是否满足当前环境要求。
+ */
+export function checkJwtConfig(): { valid: boolean; warnings: string[] } {
+  const warnings: string[] = []
+  const secret = process.env.JWT_SECRET
+  const isProduction = process.env.NODE_ENV === 'production'
+
+  if (!secret) {
+    return { valid: false, warnings: ['JWT_SECRET not configured'] }
+  }
+
+  if (secret.length < 32) {
+    if (isProduction) {
+      return { valid: false, warnings: ['JWT_SECRET must be at least 32 characters in production'] }
+    }
+    warnings.push('JWT_SECRET should be at least 32 characters')
+  }
+
+  const secretLower = secret.toLowerCase()
+  const matchedPattern = INSECURE_SECRET_PATTERNS.find(pattern => secretLower.includes(pattern))
+
+  if (matchedPattern) {
+    if (isProduction) {
+      return {
+        valid: false,
+        warnings: [`Cannot use insecure JWT_SECRET in production (contains '${matchedPattern}')`]
+      }
+    }
+    warnings.push(`Using development JWT_SECRET (contains '${matchedPattern}'), not suitable for production`)
+  }
+
+  const hasUpperCase = /[A-Z]/.test(secret)
+  const hasLowerCase = /[a-z]/.test(secret)
+  const hasNumber = /[0-9]/.test(secret)
+  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(secret)
+  const charTypes = [hasUpperCase, hasLowerCase, hasNumber, hasSpecial].filter(Boolean).length
+
+  if (charTypes < 3) {
+    if (isProduction) {
+      return {
+        valid: false,
+        warnings: ['JWT_SECRET in production should contain at least 3 types of characters (uppercase, lowercase, numbers, special)']
+      }
+    }
+    warnings.push('JWT_SECRET should contain uppercase, lowercase, numbers and special characters for better security')
+  }
+
+  const encryptionKey = process.env.ENCRYPTION_KEY
+  if (!encryptionKey) {
+    if (isProduction) {
+      return { valid: false, warnings: ['ENCRYPTION_KEY must be configured in production'] }
+    }
+    warnings.push('ENCRYPTION_KEY not configured, will use JWT_SECRET as fallback')
+  } else if (encryptionKey.length < 32) {
+    if (isProduction) {
+      return { valid: false, warnings: ['ENCRYPTION_KEY must be at least 32 characters in production'] }
+    }
+    warnings.push('ENCRYPTION_KEY should be at least 32 characters')
+  } else {
+    const encryptionKeyLower = encryptionKey.toLowerCase()
+    const encryptionMatchedPattern = INSECURE_SECRET_PATTERNS.find(pattern => encryptionKeyLower.includes(pattern))
+    if (encryptionMatchedPattern) {
+      if (isProduction) {
+        return {
+          valid: false,
+          warnings: [`Cannot use insecure ENCRYPTION_KEY in production (contains '${encryptionMatchedPattern}')`]
+        }
+      }
+      warnings.push(`Using development ENCRYPTION_KEY (contains '${encryptionMatchedPattern}'), not suitable for production`)
+    }
+  }
+
+  return { valid: true, warnings }
+}
diff --git a/server/src/lib/security.ts b/server/src/lib/security.ts
new file mode 100644
index 0000000..308ac81
--- /dev/null
+++ b/server/src/lib/security.ts
@@ -0,0 +1,1573 @@
+/**
+ * 安全工具库
+ * 包含速率限制、密码验证、安全日志等功能
+ */
+
+import { createLog, LogModule } from '../db/logs.js'
+
+// ==================== 安全事件类型 ====================
+
+export enum SecurityEventType {
+    LOGIN_SUCCESS = 'login_success',
+    LOGIN_FAILED = 'login_failed',
+    REGISTER_SUCCESS = 'register_success',
+    LOGOUT = 'logout',
+    UNAUTHORIZED_ACCESS = 'unauthorized_access',
+    PERMISSION_DENIED = 'permission_denied',
+    RATE_LIMIT_EXCEEDED = 'rate_limit_exceeded',
+    SUSPICIOUS_ACTIVITY = 'suspicious_activity',
+    ADMIN_ACTION = 'admin_action'
+}
+
+// ==================== 登录失败锁定 ====================
+
+interface LoginAttempt {
+    count: number
+    lastAttempt: number
+    lockedUntil: number | null
+}
+
+const loginAttempts = new Map<string, LoginAttempt>()
+
+const LOGIN_CONFIG = {
+    maxAttempts: 5,
+    lockDuration: 15 * 60 * 1000,  // 15分钟
+    attemptWindow: 5 * 60 * 1000   // 5分钟内的尝试计数
+}
+
+
+/**
+ * 检查登录是否被锁定
+ */
+export function checkLoginLock(ip: string, username: string): { locked: boolean; retryAfter?: number } {
+    const key = `${ip}:${username}`
+    const attempt = loginAttempts.get(key)
+
+    if (!attempt) {
+        return { locked: false }
+    }
+
+    // 检查是否在锁定期内
+    if (attempt.lockedUntil && Date.now() < attempt.lockedUntil) {
+        const retryAfter = Math.ceil((attempt.lockedUntil - Date.now()) / 1000)
+        return { locked: true, retryAfter }
+    }
+
+    // 锁定期已过，重置
+    if (attempt.lockedUntil && Date.now() >= attempt.lockedUntil) {
+        loginAttempts.delete(key)
+        return { locked: false }
+    }
+
+    return { locked: false }
+}
+
+/**
+ * 记录登录失败
+ */
+export function recordLoginFailure(ip: string, username: string): void {
+    const key = `${ip}:${username}`
+    const now = Date.now()
+    const attempt = loginAttempts.get(key)
+
+    if (!attempt || (now - attempt.lastAttempt > LOGIN_CONFIG.attemptWindow)) {
+        // 新的尝试周期
+        loginAttempts.set(key, { count: 1, lastAttempt: now, lockedUntil: null })
+        return
+    }
+
+    // 增加计数
+    attempt.count++
+    attempt.lastAttempt = now
+
+    // 达到最大尝试次数，锁定账户
+    if (attempt.count >= LOGIN_CONFIG.maxAttempts) {
+        attempt.lockedUntil = now + LOGIN_CONFIG.lockDuration
+    }
+
+    loginAttempts.set(key, attempt)
+}
+
+/**
+ * 清除登录失败记录（登录成功时调用）
+ */
+export function clearLoginFailure(ip: string, username: string): void {
+    const key = `${ip}:${username}`
+    loginAttempts.delete(key)
+}
+
+// ==================== 密码策略 ====================
+
+export interface PasswordValidationResult {
+    valid: boolean
+    message?: string
+}
+
+/**
+ * 验证密码强度
+ * 要求：至少8字符，包含大写字母、小写字母和数字
+ */
+export function validatePassword(password: string): PasswordValidationResult {
+    if (password.length < 8) {
+        return { valid: false, message: 'Password must be at least 8 characters' }
+    }
+
+    if (password.length > 128) {
+        return { valid: false, message: 'Password cannot exceed 128 characters' }
+    }
+
+    // 严格密码策略：必须包含大写、小写和数字
+    if (!/[A-Z]/.test(password)) {
+        return { valid: false, message: 'Password must contain at least one uppercase letter' }
+    }
+    if (!/[a-z]/.test(password)) {
+        return { valid: false, message: 'Password must contain at least one lowercase letter' }
+    }
+    if (!/[0-9]/.test(password)) {
+        return { valid: false, message: 'Password must contain at least one number' }
+    }
+
+    return { valid: true }
+}
+
+// ==================== 安全日志 ====================
+
+/**
+ * 记录安全事件
+ * 使用操作码存储，前端翻译显示
+ */
+export async function logSecurityEvent(
+    type: SecurityEventType,
+    userId: number | null,
+    details: {
+        ip?: string
+        userAgent?: string
+        resource?: string
+        action?: string
+        reason?: string
+        username?: string
+    }
+): Promise<void> {
+    try {
+        // Use action code, frontend translates
+        let action: string = type  // Use SecurityEventType as action
+        let content = ''
+
+        // Generate content based on type (use simple identifiers, frontend can translate)
+        // 辅助函数：拼接用户名和IP
+        const formatUserIp = (username?: string, ip?: string) => {
+            const parts: string[] = []
+            if (username) parts.push(username)
+            if (ip) parts.push(`[IP: ${ip}]`)
+            return parts.join(' ') || ''
+        }
+
+        if (type === SecurityEventType.REGISTER_SUCCESS) {
+            content = formatUserIp(details.username, details.ip)
+        } else if (type === SecurityEventType.LOGIN_SUCCESS) {
+            content = formatUserIp(details.username, details.ip)
+        } else if (type === SecurityEventType.LOGIN_FAILED) {
+            // 登录失败记录更多信息
+            const parts: string[] = []
+            if (details.username) parts.push(details.username)
+            if (details.reason) parts.push(`[原因: ${details.reason}]`)
+            if (details.ip) parts.push(`[IP: ${details.ip}]`)
+            content = parts.join(' ') || ''
+        } else if (type === SecurityEventType.LOGOUT) {
+            content = formatUserIp(details.username, details.ip)
+        } else if (type === SecurityEventType.RATE_LIMIT_EXCEEDED) {
+            // 频率限制记录更多信息
+            const parts: string[] = []
+            if (details.username) parts.push(details.username)
+            if (details.reason) parts.push(`[原因: ${details.reason}]`)
+            if (details.ip) parts.push(`[IP: ${details.ip}]`)
+            content = parts.join(' ') || ''
+        } else if (type === SecurityEventType.SUSPICIOUS_ACTIVITY) {
+            action = details.action === 'register' ? 'invalid_invite_code' : 'suspicious_activity'
+            // 记录完整的可疑活动信息：操作类型 + 原因 + 用户名/邮箱
+            const parts: string[] = []
+            if (details.action) parts.push(`[操作: ${details.action}]`)
+            if (details.reason) parts.push(`[原因: ${details.reason}]`)
+            if (details.username) parts.push(`[用户: ${details.username}]`)
+            if (details.ip) parts.push(`[IP: ${details.ip}]`)
+            content = parts.join(' ') || '可疑活动'
+        } else if (type === SecurityEventType.PERMISSION_DENIED) {
+            content = details.resource || ''
+        }
+
+        const result = type.includes('failed') || type.includes('denied') || type === 'rate_limit_exceeded' || type === 'suspicious_activity' ? 'warning' : 'success'
+
+        await createLog(userId, LogModule.SECURITY, action, content, result)
+    } catch (error) {
+        // 日志记录失败不应该影响主业务流程
+        console.error('Security event log failed:', error)
+    }
+}
+
+// ==================== 输入清理与验证 ====================
+
+/**
+ * 危险字符正则表达式
+ * 禁止: ' " \ / ? ] [ = + . < > ` ; : | ! @ # $ % ^ & * { } ~
+ * 允许: ( ) 空格 , 
+ */
+const DANGEROUS_CHARS_REGEX = /['"\\\/?[\]=+.<>`;\:|!@#$%^&*\{\}~]/g
+
+/**
+ * 安全名称正则（只允许字母、数字、连字符、下划线、空格、逗号、圆括号和中文）
+ */
+const SAFE_NAME_REGEX = /^[\u4e00-\u9fa5a-zA-Z0-9\-_ ,()]+$/
+
+/**
+ * 严格名称正则（只允许字母、数字、连字符、下划线，用于技术标识符）
+ */
+const STRICT_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9\-_]*$/
+
+/**
+ * 输入验证结果
+ */
+export interface InputValidationResult {
+    valid: boolean
+    message?: string
+    sanitized?: string
+}
+
+/**
+ * 检查字符串是否包含危险字符
+ */
+export function containsDangerousChars(input: string): boolean {
+    return DANGEROUS_CHARS_REGEX.test(input)
+}
+
+/**
+ * 移除危险字符
+ */
+export function removeDangerousChars(input: string): string {
+    return input.replace(DANGEROUS_CHARS_REGEX, '')
+}
+
+/**
+ * 验证通用名称输入（允许中文、字母、数字、连字符、下划线、空格）
+ * 适用于：实例名称、套餐名称、节点组名称等用户可见的名称
+ */
+export function validateName(name: string, fieldName: string = 'Name', minLength: number = 1, maxLength: number = 64): InputValidationResult {
+    if (!name || typeof name !== 'string') {
+        return { valid: false, message: `${fieldName} cannot be empty` }
+    }
+
+    const trimmed = name.trim()
+
+    if (trimmed.length < minLength) {
+        return { valid: false, message: `${fieldName} must be at least ${minLength} characters` }
+    }
+
+    if (trimmed.length > maxLength) {
+        return { valid: false, message: `${fieldName} cannot exceed ${maxLength} characters` }
+    }
+
+    if (containsDangerousChars(trimmed)) {
+        return { valid: false, message: `${fieldName} contains illegal characters` }
+    }
+
+    if (!SAFE_NAME_REGEX.test(trimmed)) {
+        return { valid: false, message: `${fieldName} can only contain letters, numbers, Chinese, hyphens, underscores, spaces, commas and parentheses` }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证技术标识符（只允许字母、数字、连字符、下划线，必须以字母或数字开头）
+ * 适用于：用户名、实例技术ID、主机名等
+ */
+export function validateIdentifier(input: string, fieldName: string = 'Identifier', minLength: number = 2, maxLength: number = 64): InputValidationResult {
+    if (!input || typeof input !== 'string') {
+        return { valid: false, message: `${fieldName} cannot be empty` }
+    }
+
+    const trimmed = input.trim()
+
+    if (trimmed.length < minLength) {
+        return { valid: false, message: `${fieldName} must be at least ${minLength} characters` }
+    }
+
+    if (trimmed.length > maxLength) {
+        return { valid: false, message: `${fieldName} cannot exceed ${maxLength} characters` }
+    }
+
+    if (!STRICT_NAME_REGEX.test(trimmed)) {
+        return { valid: false, message: `${fieldName} can only contain letters, numbers, hyphens and underscores, and must start with a letter or number` }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证通用文本输入（移除危险字符但允许更多内容）
+ * 适用于：描述、备注等长文本
+ */
+export function validateText(text: string, fieldName: string = 'Content', maxLength: number = 1000): InputValidationResult {
+    if (!text || typeof text !== 'string') {
+        return { valid: true, sanitized: '' }
+    }
+
+    if (text.length > maxLength) {
+        return { valid: false, message: `${fieldName} cannot exceed ${maxLength} characters` }
+    }
+
+    // 移除危险字符但保留其他内容
+    const sanitized = removeDangerousChars(text).trim()
+
+    return { valid: true, sanitized }
+}
+
+/**
+ * 验证URL格式
+ */
+export function validateUrl(url: string, fieldName: string = 'URL'): InputValidationResult {
+    if (!url || typeof url !== 'string') {
+        return { valid: false, message: `${fieldName} cannot be empty` }
+    }
+
+    const trimmed = url.trim()
+
+    // 基本URL格式验证
+    try {
+        new URL(trimmed)
+    } catch {
+        return { valid: false, message: `${fieldName} format is invalid` }
+    }
+
+    // 只允许 http 和 https 协议
+    if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
+        return { valid: false, message: `${fieldName} must start with http:// or https://` }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证IP地址格式
+ */
+export function validateIpAddress(ip: string, fieldName: string = 'IP address'): InputValidationResult {
+    if (!ip || typeof ip !== 'string') {
+        return { valid: false, message: `${fieldName} cannot be empty` }
+    }
+
+    const trimmed = normalizeHostAddress(ip)
+
+    // IPv4 格式验证
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+
+    if (!ipv4Regex.test(trimmed) && !isValidIpv6Address(trimmed)) {
+        return { valid: false, message: `${fieldName} format is invalid` }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 验证 IPv4 地址格式（仅支持 IPv4，不支持域名）
+ * 适用于：NAT 网卡 IP
+ */
+export function validateIpv4(input: string, fieldName: string = 'IP address'): InputValidationResult {
+    if (!input || typeof input !== 'string') {
+        return { valid: false, message: `${fieldName} cannot be empty` }
+    }
+
+    const trimmed = input.trim()
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+    if (ipv4Regex.test(trimmed)) {
+        return { valid: true, sanitized: trimmed }
+    }
+
+    return { valid: false, message: `${fieldName} format is invalid, please enter a valid IPv4 address` }
+}
+
+/**
+ * 验证主机地址格式
+ * 适用于：连接地址（支持 IPv4、IPv6 或域名）
+ */
+export function validateIpOrDomain(input: string, fieldName: string = 'IP address or domain'): InputValidationResult {
+    if (!input || typeof input !== 'string') {
+        return { valid: false, message: `${fieldName} cannot be empty` }
+    }
+
+    const trimmed = normalizeHostAddress(input)
+
+    // 长度限制（域名最长 253 字符）
+    if (trimmed.length > 253) {
+        return { valid: false, message: `${fieldName} cannot exceed 253 characters` }
+    }
+
+    // 先尝试验证为 IPv4 地址
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+    
+    if (ipv4Regex.test(trimmed)) {
+        return { valid: true, sanitized: trimmed }
+    }
+
+    if (isValidIpv6Address(trimmed)) {
+        return { valid: true, sanitized: trimmed }
+    }
+
+    // 验证域名格式
+    // 域名规则：
+    // 1. 只能包含字母、数字、连字符和点
+    // 2. 不能以连字符或点开头/结尾
+    // 3. 每个标签（由点分隔的部分）长度不超过 63 字符
+    // 4. 总长度不超过 253 字符
+    // 5. 支持多级域名（如 subdomain.example.com）
+    const domainRegex = /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$|^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/
+    
+    if (domainRegex.test(trimmed)) {
+        // 检查每个标签的长度
+        const labels = trimmed.split('.')
+        for (const label of labels) {
+            if (label.length > 63) {
+                return { valid: false, message: `${fieldName} format is invalid: domain label cannot exceed 63 characters` }
+            }
+        }
+        return { valid: true, sanitized: trimmed }
+    }
+
+    return { valid: false, message: `${fieldName} format is invalid, please enter a valid IPv4 address, IPv6 address, or domain name` }
+}
+
+function normalizeHostAddress(input: string): string {
+    const trimmed = input.trim()
+
+    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+        const inner = trimmed.slice(1, -1).trim()
+        if (inner.includes(':')) {
+            return inner
+        }
+    }
+
+    return trimmed
+}
+
+function isValidIpv6Address(input: string): boolean {
+    if (!input || !input.includes(':')) {
+        return false
+    }
+
+    try {
+        new URL(`http://[${input}]/`)
+        return true
+    } catch {
+        return false
+    }
+}
+
+/**
+ * 验证文件路径（防止路径遍历攻击）
+ */
+export function validateFilePath(path: string, fieldName: string = '文件路径'): InputValidationResult {
+    if (!path || typeof path !== 'string') {
+        return { valid: false, message: `${fieldName}不能为空` }
+    }
+
+    const trimmed = path.trim()
+
+    // 检查路径遍历攻击
+    if (trimmed.includes('..') || trimmed.includes('\0')) {
+        return { valid: false, message: `${fieldName}包含非法字符` }
+    }
+
+    // 检查危险字符（但允许 / 和 \ ）
+    const pathDangerousChars = /['"`<>|;$&]/
+    if (pathDangerousChars.test(trimmed)) {
+        return { valid: false, message: `${fieldName}包含非法字符` }
+    }
+
+    return { valid: true, sanitized: trimmed }
+}
+
+/**
+ * 清理实例名称（防止注入）
+ */
+export function sanitizeInstanceName(name: string): string {
+    // 只允许字母、数字、连字符和下划线
+    return name.replace(/[^a-zA-Z0-9-_]/g, '')
+}
+
+/**
+ * 验证实例名称格式
+ */
+export function isValidInstanceName(name: string): boolean {
+    // 必须以字母或数字开头，只能包含字母、数字、连字符和下划线
+    return /^[a-zA-Z0-9][a-zA-Z0-9-_]*$/.test(name)
+}
+
+/**
+ * 批量验证输入
+ */
+export function validateInputs(validations: Array<{ value: unknown; validator: () => InputValidationResult }>): InputValidationResult {
+    for (const { validator } of validations) {
+        const result = validator()
+        if (!result.valid) {
+            return result
+        }
+    }
+    return { valid: true }
+}
+
+// ==================== JWT 配置检查 ====================
+
+// JWT 与敏感字段加密配置检查放在独立模块，避免配置自测触发数据库初始化。
+export { checkJwtConfig } from './security-config.js'
+
+
+// ==================== Refresh Token 管理 (数据库) ====================
+
+import { prisma } from '../db/prisma.js'
+
+interface RefreshTokenData {
+    userId: number
+    username: string
+    role: 'admin' | 'user'
+    createdAt: number
+    expiresAt: number
+    ip?: string
+    userAgent?: string
+    lastActiveAt?: number
+}
+
+// 会话信息（用于前端展示）
+export interface SessionInfo {
+    token: string  // Token 的短 ID（用于撤销）
+    ip: string
+    userAgent: string
+    createdAt: number
+    lastActiveAt: number
+    isCurrent: boolean
+}
+
+// Refresh Token 配置（简化版：延长有效期，减少刷新频率）
+const REFRESH_TOKEN_CONFIG = {
+    expiresInSeconds: 30 * 24 * 60 * 60,  // 30天
+}
+
+// 导出任务内存存储（替代 Redis）
+const exportTaskStore = new Map<string, ExportTaskData>()
+const EXPORT_TASK_TTL = 30 * 60 * 1000  // 30分钟（毫秒）
+
+// 定期清理过期数据（每5分钟执行一次）
+setInterval(() => {
+    const now = Date.now()
+    // 清理过期导出任务
+    for (const [id, task] of exportTaskStore.entries()) {
+        if (task.expiresAt < now) {
+            exportTaskStore.delete(id)
+        }
+    }
+}, 5 * 60 * 1000)
+
+/**
+ * 清理过期的 Refresh Token（定期任务）
+ */
+export async function cleanupExpiredRefreshTokens(): Promise<number> {
+    const now = new Date()
+    const result = await prisma.refreshToken.deleteMany({
+        where: {
+            expiresAt: {
+                lt: now
+            }
+        }
+    })
+    return result.count
+}
+
+/**
+ * 清理过期的 Token 失效标记（定期任务）
+ * 删除超过 30 天的失效标记，因为对应的 JWT 早已过期
+ */
+export async function cleanupExpiredTokenInvalidations(): Promise<number> {
+    const thirtyDaysAgo = Math.floor((Date.now() - 30 * 24 * 60 * 60 * 1000) / 1000)
+    const result = await prisma.tokenInvalidation.deleteMany({
+        where: {
+            invalidatedAt: {
+                lt: thirtyDaysAgo
+            }
+        }
+    })
+    return result.count
+}
+
+/**
+ * 生成 Refresh Token (异步，存储到数据库)
+ */
+export async function generateRefreshToken(
+    userId: number,
+    username: string,
+    role: 'admin' | 'user',
+    ip?: string,
+    userAgent?: string
+): Promise<string> {
+    const token = `rt_${crypto.randomBytes(32).toString('base64url')}`
+    const now = new Date()
+    const expiresAt = new Date(now.getTime() + REFRESH_TOKEN_CONFIG.expiresInSeconds * 1000)
+
+    // 存储到数据库
+    await prisma.refreshToken.create({
+        data: {
+            token,
+            userId,
+            username,
+            role,
+            ip: ip || 'unknown',
+            userAgent: userAgent || 'unknown',
+            createdAt: now,
+            expiresAt,
+            lastActiveAt: now
+        }
+    })
+
+    return token
+}
+
+/**
+ * AUTH002: 设备绑定配置
+ */
+const DEVICE_BINDING_CONFIG = {
+    // 是否启用严格的设备绑定（强制要求IP匹配）
+    strictMode: process.env.DEVICE_BINDING_STRICT === 'true',
+    // 是否启用User-Agent检查
+    checkUserAgent: process.env.DEVICE_BINDING_CHECK_UA !== 'false',
+    // 是否在设备不匹配时记录日志（而不是拒绝）
+    logOnlyMode: process.env.DEVICE_BINDING_LOG_ONLY === 'true',
+} as const
+
+/**
+ * AUTH002: 标准化User-Agent用于比较
+ * 提取浏览器和操作系统的核心信息
+ */
+function normalizeUserAgentForBinding(ua: string | undefined): string {
+    if (!ua || ua === 'unknown') return 'unknown'
+    
+    // 提取浏览器
+    let browser = 'unknown'
+    if (ua.includes('Firefox')) browser = 'firefox'
+    else if (ua.includes('Edg')) browser = 'edge'
+    else if (ua.includes('Chrome')) browser = 'chrome'
+    else if (ua.includes('Safari')) browser = 'safari'
+    else if (ua.includes('Opera')) browser = 'opera'
+    
+    // 提取操作系统
+    let os = 'unknown'
+    if (/Windows NT 10/i.test(ua)) os = 'win10'
+    else if (/Windows NT/i.test(ua)) os = 'windows'
+    else if (/Mac OS X|Macintosh/i.test(ua)) os = 'macos'
+    else if (/iPhone|iPad|iPod/i.test(ua)) os = 'ios'
+    else if (/Android/i.test(ua)) os = 'android'
+    else if (/Linux/i.test(ua)) os = 'linux'
+    
+    // 检测移动端
+    const isMobile = /Mobile|Android|iPhone|iPad/i.test(ua)
+    
+    return `${browser}|${os}|${isMobile ? 'm' : 'd'}`
+}
+
+/**
+ * AUTH002: 验证设备绑定
+ * @returns 是否匹配，以及不匹配的原因
+ */
+export function validateDeviceBinding(
+    storedIp: string | undefined,
+    storedUserAgent: string | undefined,
+    currentIp: string | undefined,
+    currentUserAgent: string | undefined
+): { valid: boolean; reason?: string } {
+    // 严格模式：检查IP
+    if (DEVICE_BINDING_CONFIG.strictMode) {
+        if (storedIp && currentIp && storedIp !== currentIp) {
+            return { valid: false, reason: `IP mismatch: expected ${storedIp}, got ${currentIp}` }
+        }
+    }
+    
+    // 检查User-Agent（标准化后比较）
+    if (DEVICE_BINDING_CONFIG.checkUserAgent) {
+        const storedFingerprint = normalizeUserAgentForBinding(storedUserAgent)
+        const currentFingerprint = normalizeUserAgentForBinding(currentUserAgent)
+        
+        if (storedFingerprint !== 'unknown' && currentFingerprint !== 'unknown') {
+            if (storedFingerprint !== currentFingerprint) {
+                return { 
+                    valid: false, 
+                    reason: `Device fingerprint mismatch: expected ${storedFingerprint}, got ${currentFingerprint}` 
+                }
+            }
+        }
+    }
+    
+    return { valid: true }
+}
+
+/**
+ * 验证 Refresh Token (异步)
+ * 简化版：移除设备绑定校验，仅验证 token 有效性
+ */
+export async function verifyRefreshToken(
+    token: string,
+    _currentIp?: string,
+    _currentUserAgent?: string
+): Promise<RefreshTokenData | null> {
+    try {
+        const record = await prisma.refreshToken.findUnique({
+            where: { token }
+        })
+
+        if (!record) {
+            return null
+        }
+
+        // 检查是否过期
+        const now = Date.now()
+        const expiresAt = record.expiresAt.getTime()
+        if (now > expiresAt) {
+            // 自动清理过期 token
+            await prisma.refreshToken.delete({
+                where: { token }
+            })
+            return null
+        }
+
+        // 注意：已移除设备绑定校验 (AUTH002)，简化会话机制
+
+        return {
+            userId: record.userId,
+            username: record.username,
+            role: record.role as 'admin' | 'user',
+            createdAt: record.createdAt.getTime(),
+            expiresAt: expiresAt,
+            ip: record.ip || undefined,
+            userAgent: record.userAgent || undefined,
+            lastActiveAt: record.lastActiveAt.getTime()
+        }
+    } catch {
+        return null
+    }
+}
+
+/**
+ * 撤销 Refresh Token (异步)
+ */
+export async function revokeRefreshToken(token: string): Promise<boolean> {
+    try {
+        await prisma.refreshToken.delete({
+            where: { token }
+        })
+        return true
+    } catch {
+        return false
+    }
+}
+
+/**
+ * 撤销用户的所有 Refresh Token (异步)
+ */
+export async function revokeAllUserRefreshTokens(userId: number): Promise<number> {
+    const result = await prisma.refreshToken.deleteMany({
+        where: { userId }
+    })
+    return result.count
+}
+
+/**
+ * 获取用户的所有会话信息
+ */
+export async function getUserSessions(userId: number, currentToken?: string): Promise<SessionInfo[]> {
+    const now = new Date()
+    const tokens = await prisma.refreshToken.findMany({
+        where: {
+            userId,
+            expiresAt: {
+                gt: now  // 只获取未过期的 token
+            }
+        },
+        orderBy: {
+            lastActiveAt: 'desc'
+        }
+    })
+
+    return tokens.map(token => ({
+        token: token.token.substring(0, 20) + '...', // 只返回部分 token 用于标识
+        ip: token.ip || 'unknown',
+        userAgent: token.userAgent || 'unknown',
+        createdAt: token.createdAt.getTime(),
+        lastActiveAt: token.lastActiveAt.getTime(),
+        isCurrent: currentToken === token.token
+    }))
+}
+
+/**
+ * 通过 Token 短 ID 撤销会话
+ */
+export async function revokeSessionByTokenPrefix(userId: number, tokenPrefix: string): Promise<boolean> {
+    // 移除 '...' 后缀（如果有）
+    const prefix = tokenPrefix.replace('...', '')
+    
+    // 查找匹配的 token
+    const token = await prisma.refreshToken.findFirst({
+        where: {
+            userId,
+            token: {
+                startsWith: prefix
+            }
+        }
+    })
+
+    if (token) {
+        return await revokeRefreshToken(token.token)
+    }
+
+    return false
+}
+
+/**
+ * 更新会话的最后活跃时间并延长过期时间
+ * 每次用户活跃时，将会话有效期延长至新的3天周期
+ */
+export async function updateSessionActivity(token: string): Promise<{ expiresAt: Date } | null> {
+    try {
+        const now = new Date()
+        const newExpiresAt = new Date(now.getTime() + REFRESH_TOKEN_CONFIG.expiresInSeconds * 1000)
+        
+        await prisma.refreshToken.updateMany({
+            where: { token },
+            data: { 
+                lastActiveAt: now,
+                expiresAt: newExpiresAt  // 延长会话有效期
+            }
+        })
+        
+        return { expiresAt: newExpiresAt }
+    } catch {
+        // 忽略错误，不影响认证流程
+        return null
+    }
+}
+
+// ==================== Access Token 失效机制 (数据库) ====================
+
+/**
+ * 使用户的所有 Access Token 失效
+ * 通过记录一个时间戳，所有在此时间戳之前签发的 token 都将被视为无效
+ */
+export async function invalidateUserAccessTokens(userId: number): Promise<void> {
+    try {
+        const now = Math.floor(Date.now() / 1000)  // 使用秒级时间戳，与 JWT iat 一致
+        const USER_LEVEL_SESSION_ID = '__USER_LEVEL__'  // 特殊标记表示用户级别失效
+        
+        // 使用 upsert 确保每个用户只有一条记录
+        await prisma.tokenInvalidation.upsert({
+            where: {
+                userId_sessionId: {
+                    userId,
+                    sessionId: USER_LEVEL_SESSION_ID
+                }
+            },
+            create: {
+                userId,
+                sessionId: USER_LEVEL_SESSION_ID,
+                invalidatedAt: now
+            },
+            update: {
+                invalidatedAt: now
+            }
+        })
+    } catch (error) {
+        // 记录错误但不抛出，避免影响其他功能
+        console.error('Failed to invalidate user tokens:', error)
+    }
+}
+
+/**
+ * 标记特定会话的 Access Token 失效
+ * @param userId 用户ID
+ * @param sessionId 会话标识（Refresh Token 的前缀）
+ */
+export async function invalidateSessionAccessToken(userId: number, sessionId: string): Promise<void> {
+    try {
+        const now = Math.floor(Date.now() / 1000)
+        await prisma.tokenInvalidation.upsert({
+            where: {
+                userId_sessionId: {
+                    userId,
+                    sessionId: sessionId
+                }
+            },
+            create: {
+                userId,
+                sessionId: sessionId,
+                invalidatedAt: now
+            },
+            update: {
+                invalidatedAt: now
+            }
+        })
+    } catch (error) {
+        // 记录错误但不抛出，避免影响其他功能
+        console.error('Failed to invalidate session token:', error)
+    }
+}
+
+/**
+ * 检查 Access Token 是否已被失效
+ * @param userId 用户ID
+ * @param tokenIssuedAt Token 签发时间（秒级时间戳）
+ * @param sessionId 可选的会话标识
+ * @returns true 表示 token 已失效，false 表示有效
+ * 
+ * 注意：如果数据库查询失败，返回 false（允许 token 通过），避免 Redis 不可用导致频繁登出
+ */
+export async function isAccessTokenInvalidated(userId: number, tokenIssuedAt: number, sessionId?: string): Promise<boolean> {
+    try {
+        // 检查会话级别的失效（优先级更高）
+        if (sessionId) {
+            const sessionInvalidation = await prisma.tokenInvalidation.findUnique({
+                where: {
+                    userId_sessionId: {
+                        userId,
+                        sessionId: sessionId
+                    }
+                }
+            })
+
+            if (sessionInvalidation && tokenIssuedAt <= sessionInvalidation.invalidatedAt) {
+                return true
+            }
+        }
+
+        // 检查用户级别的失效
+        const USER_LEVEL_SESSION_ID = '__USER_LEVEL__'  // 特殊标记表示用户级别失效
+        const userInvalidation = await prisma.tokenInvalidation.findUnique({
+            where: {
+                userId_sessionId: {
+                    userId,
+                    sessionId: USER_LEVEL_SESSION_ID
+                }
+            }
+        })
+
+        if (userInvalidation && tokenIssuedAt <= userInvalidation.invalidatedAt) {
+            return true
+        }
+
+        return false
+    } catch (error) {
+        // 数据库查询失败时，返回 false（允许 token 通过），避免 Redis 不可用导致频繁登出
+        console.error('Failed to check token invalidation, allowing token:', error)
+        return false
+    }
+}
+
+
+// ==================== 敏感数据加密 ====================
+
+import crypto from 'crypto'
+
+// 加密配置
+const ENCRYPTION_CONFIG = {
+    algorithm: 'aes-256-gcm',
+    keyLength: 32,
+    ivLength: 16,
+    tagLength: 16
+}
+
+/**
+ * 获取加密密钥
+ */
+function getEncryptionKey(): Buffer {
+    const secret = process.env.ENCRYPTION_KEY ||
+        (process.env.NODE_ENV === 'production' ? '' : process.env.JWT_SECRET || 'default-encryption-key')
+    if (!secret) {
+        throw new Error('ENCRYPTION_KEY is required in production')
+    }
+    // 使用 SHA-256 确保密钥长度为 32 字节
+    return crypto.createHash('sha256').update(secret).digest()
+}
+
+/**
+ * 加密敏感数据
+ */
+export function encryptSensitiveData(plaintext: string): string {
+    const key = getEncryptionKey()
+    const iv = crypto.randomBytes(ENCRYPTION_CONFIG.ivLength)
+
+    const cipher = crypto.createCipheriv(ENCRYPTION_CONFIG.algorithm, key, iv) as crypto.CipherGCM
+
+    let encrypted = cipher.update(plaintext, 'utf8', 'hex')
+    encrypted += cipher.final('hex')
+
+    const tag = cipher.getAuthTag()
+
+    // 格式: iv:tag:encrypted
+    return `${iv.toString('hex')}:${tag.toString('hex')}:${encrypted}`
+}
+
+/**
+ * 解密敏感数据
+ */
+export function decryptSensitiveData(ciphertext: string): string | null {
+    try {
+        const parts = ciphertext.split(':')
+        if (parts.length !== 3) {
+            // 可能是未加密的旧数据，直接返回
+            return ciphertext
+        }
+
+        const [ivHex, tagHex, encrypted] = parts
+        const key = getEncryptionKey()
+        const iv = Buffer.from(ivHex, 'hex')
+        const tag = Buffer.from(tagHex, 'hex')
+
+        const decipher = crypto.createDecipheriv(ENCRYPTION_CONFIG.algorithm, key, iv) as crypto.DecipherGCM
+        decipher.setAuthTag(tag)
+
+        let decrypted = decipher.update(encrypted, 'hex', 'utf8')
+        decrypted += decipher.final('utf8')
+
+        return decrypted
+    } catch (err) {
+        // Decryption failed, might be unencrypted old data
+        console.warn('Decryption failed, returning original data')
+        return ciphertext
+    }
+}
+
+/**
+ * 检查数据是否已加密
+ */
+export function isEncrypted(data: string): boolean {
+    const parts = data.split(':')
+    if (parts.length !== 3) return false
+
+    // 检查格式是否符合 iv:tag:encrypted
+    const [ivHex, tagHex] = parts
+    return ivHex.length === ENCRYPTION_CONFIG.ivLength * 2 &&
+        tagHex.length === ENCRYPTION_CONFIG.tagLength * 2
+}
+
+
+// ==================== 双因素认证 (2FA) ====================
+
+import { authenticator } from 'otplib'
+import QRCode from 'qrcode'
+
+// 2FA 配置
+const TWO_FACTOR_CONFIG = {
+    issuer: 'Incudal',
+    algorithm: 'sha1',
+    digits: 6,
+    period: 30
+}
+
+// 配置 authenticator
+authenticator.options = {
+    digits: TWO_FACTOR_CONFIG.digits,
+    period: TWO_FACTOR_CONFIG.period
+}
+
+/**
+ * 生成 2FA 密钥
+ */
+export function generate2FASecret(): string {
+    return authenticator.generateSecret()
+}
+
+/**
+ * 生成 2FA 配置 URI (用于生成二维码)
+ */
+export function generate2FAKeyUri(username: string, secret: string): string {
+    return authenticator.keyuri(username, TWO_FACTOR_CONFIG.issuer, secret)
+}
+
+/**
+ * 生成 2FA 二维码 (Base64 Data URL)
+ */
+export async function generate2FAQRCode(username: string, secret: string): Promise<string> {
+    const uri = generate2FAKeyUri(username, secret)
+    return QRCode.toDataURL(uri)
+}
+
+/**
+ * 验证 2FA 令牌
+ */
+export function verify2FAToken(token: string, secret: string): boolean {
+    try {
+        return authenticator.verify({ token, secret })
+    } catch {
+        return false
+    }
+}
+
+/**
+ * 生成备用恢复码 (一次性使用)
+ */
+export function generateRecoveryCodes(count: number = 8): string[] {
+    const codes: string[] = []
+    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+    const segment = () => Array.from({ length: 4 }, () => alphabet[crypto.randomInt(alphabet.length)]).join('')
+
+    for (let i = 0; i < count; i++) {
+        codes.push(`${segment()}-${segment()}`)
+    }
+    return codes
+}
+
+
+// ==================== 导出任务内存存储 ====================
+
+export interface ExportTaskData {
+    id: string
+    instanceId: number
+    backupId: number
+    incusBackupName: string
+    userId: number
+    status: 'creating' | 'ready' | 'downloading' | 'completed' | 'error'
+    error?: string
+    createdAt: number
+    expiresAt: number
+}
+
+/**
+ * 创建导出任务（内存存储）
+ */
+export async function createExportTask(data: Omit<ExportTaskData, 'createdAt' | 'expiresAt'>): Promise<ExportTaskData> {
+    const now = Date.now()
+
+    const task: ExportTaskData = {
+        ...data,
+        createdAt: now,
+        expiresAt: now + EXPORT_TASK_TTL
+    }
+
+    exportTaskStore.set(data.id, task)
+    return task
+}
+
+/**
+ * 获取导出任务
+ */
+export async function getExportTask(taskId: string): Promise<ExportTaskData | null> {
+    const task = exportTaskStore.get(taskId)
+    
+    if (!task) {
+        return null
+    }
+
+    // 检查是否过期
+    if (Date.now() > task.expiresAt) {
+        exportTaskStore.delete(taskId)
+        return null
+    }
+
+    return task
+}
+
+/**
+ * 更新导出任务状态
+ */
+export async function updateExportTaskStatus(
+    taskId: string,
+    status: ExportTaskData['status'],
+    error?: string
+): Promise<boolean> {
+    const task = exportTaskStore.get(taskId)
+    
+    if (!task) {
+        return false
+    }
+
+    // 检查是否过期
+    if (Date.now() > task.expiresAt) {
+        exportTaskStore.delete(taskId)
+        return false
+    }
+
+    task.status = status
+    if (error) {
+        task.error = error
+    }
+
+    exportTaskStore.set(taskId, task)
+    return true
+}
+
+/**
+ * 删除导出任务
+ */
+export async function deleteExportTask(taskId: string): Promise<boolean> {
+    return exportTaskStore.delete(taskId)
+}
+
+// ==================== OAuth State 验证（JWT 签名，无需存储） ====================
+
+const OAUTH_STATE_TTL_MS = 10 * 60 * 1000  // 10分钟（毫秒）
+
+export interface OAuthStateData {
+    mode: 'login' | 'bind'
+    redirect: string
+    timestamp: number
+    nonce: string  // 防止重放攻击
+    userId?: number  // 绑定模式下的用户 ID
+}
+
+// 用于签名 OAuth State 的密钥（使用 JWT_SECRET）
+function getOAuthStateSecret(): string {
+    return process.env.JWT_SECRET || 'fallback-secret-key'
+}
+
+/**
+ * 生成 OAuth State（使用 JWT 签名，无需存储）
+ */
+export async function generateOAuthState(mode: 'login' | 'bind', redirect: string, userId?: number): Promise<string> {
+    const nonce = crypto.randomBytes(16).toString('hex')
+    const timestamp = Date.now()
+
+    const data: OAuthStateData = {
+        mode,
+        redirect,
+        timestamp,
+        nonce,
+        userId
+    }
+
+    // 将数据编码为 Base64
+    const payload = Buffer.from(JSON.stringify(data)).toString('base64url')
+    
+    // 生成 HMAC 签名
+    const signature = crypto
+        .createHmac('sha256', getOAuthStateSecret())
+        .update(payload)
+        .digest('base64url')
+
+    // 返回签名后的 state: payload.signature
+    return `${payload}.${signature}`
+}
+
+// 已使用的 nonce 集合（防止重放攻击）
+const usedNonces = new Set<string>()
+
+// 定期清理过期 nonce（每10分钟）
+setInterval(() => {
+    usedNonces.clear()
+}, 10 * 60 * 1000)
+
+/**
+ * 验证并消费 OAuth State
+ * 验证签名和时戳，并检查 nonce 防止重放攻击
+ */
+export async function verifyAndConsumeOAuthState(stateToken: string): Promise<OAuthStateData | null> {
+    try {
+        const parts = stateToken.split('.')
+        if (parts.length !== 2) {
+            return null
+        }
+
+        const [payload, signature] = parts
+
+        // 验证签名
+        const expectedSignature = crypto
+            .createHmac('sha256', getOAuthStateSecret())
+            .update(payload)
+            .digest('base64url')
+
+        if (signature !== expectedSignature) {
+            return null
+        }
+
+        // 解码数据
+        const data = JSON.parse(Buffer.from(payload, 'base64url').toString()) as OAuthStateData
+
+        // 检查时戳是否过期
+        if (Date.now() - data.timestamp > OAUTH_STATE_TTL_MS) {
+            return null
+        }
+
+        // 检查 nonce 是否已被使用（防止重放攻击）
+        if (usedNonces.has(data.nonce)) {
+            return null
+        }
+
+        // 标记 nonce 已使用
+        usedNonces.add(data.nonce)
+
+        return data
+    } catch {
+        return null
+    }
+}
+
+// ==================== 增强审计日志 ====================
+
+export interface AuditLogDetails {
+    ip?: string
+    userAgent?: string
+    targetUserId?: number
+    targetUsername?: string
+    resourceType?: string
+    resourceId?: number | string
+    resourceName?: string
+    oldValue?: unknown
+    newValue?: unknown
+    reason?: string
+    metadata?: Record<string, unknown>
+}
+
+/**
+ * 记录增强审计日志
+ * 用于敏感操作的详细记录
+ */
+export async function logAuditEvent(
+    userId: number | null,
+    module: string,
+    action: string,
+    details: AuditLogDetails
+): Promise<void> {
+    try {
+        // 构建详细内容
+        const contentParts: string[] = []
+
+        if (details.targetUsername) {
+            contentParts.push(`target: ${details.targetUsername}`)
+        }
+        if (details.resourceType && details.resourceName) {
+            contentParts.push(`${details.resourceType}: ${details.resourceName}`)
+        }
+        if (details.reason) {
+            contentParts.push(`reason: ${details.reason}`)
+        }
+
+        const content = contentParts.join(', ')
+
+        // 记录到数据库
+        await createLog(userId, module as typeof LogModule[keyof typeof LogModule], action, content, 'success')
+
+        // 如果是敏感操作，额外记录详细信息到控制台（生产环境可改为专门的审计日志系统）
+        if (process.env.AUDIT_LOG_VERBOSE === 'true') {
+            console.log('[AUDIT]', {
+                timestamp: new Date().toISOString(),
+                userId,
+                module,
+                action,
+                ...details
+            })
+        }
+    } catch (error) {
+        console.error('Audit log failed:', error)
+    }
+}
+
+/**
+ * 记录管理员操作
+ */
+export async function logAdminAction(
+    adminId: number,
+    action: string,
+    details: AuditLogDetails
+): Promise<void> {
+    await logAuditEvent(adminId, 'admin', action, {
+        ...details,
+        metadata: {
+            ...details.metadata,
+            isAdminAction: true
+        }
+    })
+}
+
+/**
+ * 记录安全敏感操作
+ */
+export async function logSensitiveOperation(
+    userId: number,
+    operation: string,
+    details: AuditLogDetails
+): Promise<void> {
+    await logAuditEvent(userId, 'security', operation, {
+        ...details,
+        metadata: {
+            ...details.metadata,
+            isSensitive: true
+        }
+    })
+}
+
+// ==================== 异地登录检测 ====================
+
+/**
+ * 检测是否为新 IP 或新设备登录
+ * 注意：此函数应在创建新会话之前调用，以避免时序问题
+ * 返回: { isNewIp: boolean, isNewDevice: boolean }
+ * 
+ * 修复：使用 LoginRecord 表（永久保存）代替 RefreshToken 表（登出时会删除）
+ *       避免用户登出后再登录被误判为新设备
+ */
+export async function detectNewLoginLocation(
+    userId: number,
+    currentIp: string,
+    currentUserAgent: string
+): Promise<{ isNewIp: boolean; isNewDevice: boolean }> {
+    try {
+        // 查询用户最近 30 天内的登录记录（使用 LoginRecord 表，而非 RefreshToken）
+        const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+        
+        const recentLoginRecords = await prisma.loginRecord.findMany({
+            where: {
+                userId,
+                createdAt: { gte: thirtyDaysAgo }
+            },
+            select: {
+                ip: true,
+                userAgent: true
+            },
+            orderBy: { createdAt: 'desc' },
+            take: 50  // 最多检查 50 个历史登录记录
+        })
+
+        // 如果没有历史记录，这是新用户或第一次登录，不发送提醒
+        if (recentLoginRecords.length === 0) {
+            return { isNewIp: false, isNewDevice: false }
+        }
+
+        // 检查是否为新 IP
+        const knownIps = new Set(recentLoginRecords.map(s => s.ip).filter(Boolean))
+        const isNewIp = !knownIps.has(currentIp)
+
+        // 检查是否为新设备（简化版：比较 UserAgent 的主要部分）
+        const normalizeUserAgent = (ua: string): string => {
+            // 提取浏览器名称（不含版本号）和操作系统类型
+            // 修复：不包含完整版本号，避免浏览器自动更新后误判为新设备
+            const browserMatch = ua.match(/(Chrome|Firefox|Safari|Edge|Opera|MSIE|Trident)/i)
+            const browser = browserMatch?.[1]?.toLowerCase() || 'unknown'
+            
+            // 操作系统只提取类型，不包含具体版本
+            let os = 'unknown'
+            if (/Windows/i.test(ua)) os = 'windows'
+            else if (/Mac OS X|Macintosh/i.test(ua)) os = 'macos'
+            else if (/iPhone|iPad|iPod/i.test(ua)) os = 'ios'
+            else if (/Android/i.test(ua)) os = 'android'
+            else if (/Linux/i.test(ua)) os = 'linux'
+            else if (/CrOS/i.test(ua)) os = 'chromeos'
+            
+            // 检测移动端
+            const isMobile = /Mobile|Android|iPhone|iPad/i.test(ua)
+            
+            return `${browser}|${os}|${isMobile ? 'mobile' : 'desktop'}`
+        }
+
+        const currentFingerprint = normalizeUserAgent(currentUserAgent)
+        const knownFingerprints = new Set(
+            recentLoginRecords
+                .map(s => s.userAgent)
+                .filter(Boolean)
+                .map(ua => normalizeUserAgent(ua as string))
+        )
+        const isNewDevice = !knownFingerprints.has(currentFingerprint)
+
+        return { isNewIp, isNewDevice }
+    } catch (error) {
+        // 检测失败不应影响登录流程
+        console.error('Failed to detect new login location:', error)
+        return { isNewIp: false, isNewDevice: false }
+    }
+}
+
+// ==================== OAuth 一次性登录码 ====================
+
+/**
+ * OAuth 登录码数据结构
+ * 安全改进：不再包含 refreshToken，只传递用户标识
+ */
+export interface OAuthLoginCodeData {
+    userId: number
+    username: string
+    role: string
+    timestamp: number
+    nonce: string
+}
+
+// OAuth 登录码有效期（60秒）
+const OAUTH_LOGIN_CODE_TTL_MS = 60 * 1000
+
+// 已使用的登录码 nonce 集合（防止重放攻击）
+const usedLoginCodeNonces = new Set<string>()
+
+// 定期清理过期 nonce（每2分钟）
+setInterval(() => {
+    usedLoginCodeNonces.clear()
+}, 2 * 60 * 1000)
+
+/**
+ * 生成 OAuth 一次性登录码
+ * 用于安全地传递登录信息，替代直接在 URL 中传递 Access Token
+ */
+export function generateOAuthLoginCode(data: Omit<OAuthLoginCodeData, 'timestamp' | 'nonce'>): string {
+    const nonce = crypto.randomBytes(16).toString('hex')
+    const timestamp = Date.now()
+
+    const fullData: OAuthLoginCodeData = {
+        ...data,
+        timestamp,
+        nonce
+    }
+
+    // 将数据编码为 Base64
+    const payload = Buffer.from(JSON.stringify(fullData)).toString('base64url')
+    
+    // 生成 HMAC 签名
+    const signature = crypto
+        .createHmac('sha256', getOAuthStateSecret())
+        .update(payload)
+        .digest('base64url')
+
+    // 返回签名后的 code: payload.signature
+    return `${payload}.${signature}`
+}
+
+/**
+ * 验证并消费 OAuth 登录码
+ * 返回登录信息，或在无效时返回 null
+ */
+export function verifyAndConsumeOAuthLoginCode(code: string): OAuthLoginCodeData | null {
+    try {
+        const parts = code.split('.')
+        if (parts.length !== 2) {
+            return null
+        }
+
+        const [payload, signature] = parts
+
+        // 验证签名
+        const expectedSignature = crypto
+            .createHmac('sha256', getOAuthStateSecret())
+            .update(payload)
+            .digest('base64url')
+
+        if (signature !== expectedSignature) {
+            return null
+        }
+
+        // 解码数据
+        const data = JSON.parse(Buffer.from(payload, 'base64url').toString()) as OAuthLoginCodeData
+
+        // 检查时戳是否过期（60秒）
+        if (Date.now() - data.timestamp > OAUTH_LOGIN_CODE_TTL_MS) {
+            return null
+        }
+
+        // 检查 nonce 是否已被使用（防止重放攻击）
+        if (usedLoginCodeNonces.has(data.nonce)) {
+            return null
+        }
+
+        // 标记 nonce 已使用
+        usedLoginCodeNonces.add(data.nonce)
+
+        return data
+    } catch {
+        return null
+    }
+}
diff --git a/server/src/lib/terminal-proxy.ts b/server/src/lib/terminal-proxy.ts
new file mode 100644
index 0000000..a8e8192
--- /dev/null
+++ b/server/src/lib/terminal-proxy.ts
@@ -0,0 +1,828 @@
+/**
+ * 终端代理模块
+ * 
+ * 负责在客户端 WebSocket 和 Incus Console API 之间建立双向数据转发
+ */
+
+import type { WebSocket as WsWebSocket } from 'ws'
+import { Agent, request } from 'undici'
+import { readFileSync } from 'fs'
+import type { Host } from '../types/database.js'
+
+// 证书缓存（避免每次连接都读取文件）
+interface CertCache {
+    cert: Buffer
+    key: Buffer
+    lastModified: number
+}
+const certCache = new Map<string, CertCache>()
+const CERT_CACHE_TTL = 60 * 60 * 1000 // 1小时
+
+/**
+ * 获取缓存的证书（避免重复 I/O 读取）
+ */
+function getCachedCertificates(certPath: string, keyPath: string): { cert: Buffer; key: Buffer } {
+    const cacheKey = `${certPath}:${keyPath}`
+    const cached = certCache.get(cacheKey)
+    const now = Date.now()
+
+    // 缓存有效
+    if (cached && (now - cached.lastModified) < CERT_CACHE_TTL) {
+        return { cert: cached.cert, key: cached.key }
+    }
+
+    // 读取并缓存（添加异常保护）
+    try {
+        const cert = readFileSync(certPath)
+        const key = readFileSync(keyPath)
+        certCache.set(cacheKey, { cert, key, lastModified: now })
+        return { cert, key }
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        throw new Error(`Failed to read certificate files: ${errorMessage}`)
+    }
+}
+
+// 终端会话配置
+// 保活策略：只要 WebSocket 通道正常就不断开
+export const TERMINAL_CONFIG = {
+    heartbeatInterval: 25 * 1000,      // 心跳间隔 25 秒（避免代理层空闲断开）
+    heartbeatTimeout: 30000,           // 心跳超时 30秒（给足够时间响应）
+    idleTimeout: 12 * 60 * 60 * 1000,  // 空闲超时 12 小时（SSH 风格长连接）
+    maxMessageSize: 1048576,           // 最大消息 1MB
+    reconnectDelay: 1000,              // 重连延迟
+    maxReconnectAttempts: 10,          // 最大重连次数
+}
+
+// 终端会话状态
+export interface TerminalSession {
+    id: string
+    instanceId: number
+    userId: number
+    sessionId?: string
+    connectionMode: 'exec' | 'console'
+    host: Host
+    instanceName: string
+    instanceType: 'container' | 'vm'
+    incusWebSocket: WsWebSocket | null
+    controlWebSocket: WsWebSocket | null  // 控制 WebSocket（用于调整终端大小）
+    clientWebSocket: WsWebSocket
+    heartbeatTimer: NodeJS.Timeout | null
+    createdAt: number
+    lastActivity: number
+    reconnectingIncus: boolean
+    incusReconnectAttempts: number
+}
+
+// 活跃终端会话存储
+const activeSessions = new Map<string, TerminalSession>()
+
+/**
+ * 生成会话 ID
+ */
+export function generateSessionId(): string {
+    return `term_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`
+}
+
+function buildExecPayload(): Record<string, unknown> {
+    return {
+        command: [
+            '/bin/sh', '-c',
+            'setup_term() { ' +
+            '  if [ -e /usr/share/terminfo/x/xterm-256color ] || [ -e /lib/terminfo/x/xterm-256color ] || ' +
+            '     [ -e /etc/terminfo/x/xterm-256color ] || infocmp xterm-256color >/dev/null 2>&1; then ' +
+            '    export TERM=xterm-256color; ' +
+            '  elif [ -e /usr/share/terminfo/x/xterm ] || [ -e /lib/terminfo/x/xterm ] || ' +
+            '       [ -e /etc/terminfo/x/xterm ] || infocmp xterm >/dev/null 2>&1; then ' +
+            '    export TERM=xterm; ' +
+            '  else ' +
+            '    export TERM=linux; ' +
+            '  fi; ' +
+            '}; ' +
+            'setup_term; ' +
+            'export LANG=en_US.UTF-8; export LC_ALL=en_US.UTF-8; ' +
+            'if [ -x /bin/bash ]; then exec /bin/bash -l; ' +
+            'elif [ -x /usr/bin/bash ]; then exec /usr/bin/bash -l; ' +
+            'else exec /bin/sh -l; fi'
+        ],
+        'wait-for-websocket': true,
+        interactive: true,
+        environment: {
+            TERM: 'xterm',
+            LANG: 'en_US.UTF-8',
+            LC_ALL: 'en_US.UTF-8',
+            HOME: '/root',
+            USER: 'root',
+            SHELL: '/bin/bash'
+        },
+        width: 120,
+        height: 40
+    }
+}
+
+function buildConsolePayload(): Record<string, unknown> {
+    return {
+        'wait-for-websocket': true,
+        type: 'console'
+    }
+}
+
+async function requestTerminalOperation(
+    baseUrl: string,
+    agent: Agent,
+    endpoint: string,
+    payload: Record<string, unknown>
+): Promise<{ operationId: string; fds: Record<string, string> }> {
+    const response = await request(`${baseUrl}${endpoint}`, {
+        method: 'POST',
+        dispatcher: agent,
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+    })
+
+    const data = await response.body.json() as {
+        type: string
+        operation: string
+        error_code: number
+        error: string
+        metadata: {
+            id: string
+            metadata: {
+                fds: Record<string, string>
+            }
+        }
+    }
+
+    if (data.type === 'error' || (data.error_code !== undefined && data.error_code !== 0)) {
+        throw new Error(data.error || 'Failed to create terminal session')
+    }
+
+    const operationId = data.operation?.split('/').pop() || data.metadata?.id
+    if (!operationId) {
+        throw new Error('No operation ID returned from terminal request')
+    }
+
+    const fds = data.metadata?.metadata?.fds
+    if (!fds) {
+        throw new Error('No file descriptors returned from terminal operation')
+    }
+
+    return { operationId, fds }
+}
+
+function safeSendClientMessage(clientWs: WsWebSocket, message: Record<string, unknown>): void {
+    if (clientWs.readyState !== clientWs.OPEN) {
+        return
+    }
+
+    try {
+        clientWs.send(JSON.stringify(message))
+    } catch (err) {
+        console.debug('[Terminal] Failed to send control message to client:', err)
+    }
+}
+
+function cleanupIncusSockets(session: TerminalSession): void {
+    if (session.incusWebSocket) {
+        session.incusWebSocket.removeAllListeners()
+        try {
+            if (session.incusWebSocket.readyState === session.incusWebSocket.OPEN || session.incusWebSocket.readyState === session.incusWebSocket.CONNECTING) {
+                session.incusWebSocket.close()
+            }
+        } catch (err) {
+            console.debug('[Terminal] Failed to close Incus data WebSocket:', err)
+        }
+        session.incusWebSocket = null
+    }
+
+    if (session.controlWebSocket) {
+        session.controlWebSocket.removeAllListeners()
+        try {
+            if (session.controlWebSocket.readyState === session.controlWebSocket.OPEN || session.controlWebSocket.readyState === session.controlWebSocket.CONNECTING) {
+                session.controlWebSocket.close()
+            }
+        } catch (err) {
+            console.debug('[Terminal] Failed to close Incus control WebSocket:', err)
+        }
+        session.controlWebSocket = null
+    }
+}
+
+function bindIncusSocketHandlers(session: TerminalSession, dataWs: WsWebSocket, controlWs: WsWebSocket | null): void {
+    dataWs.on('message', (data: Buffer) => {
+        session.lastActivity = Date.now()
+        if (session.clientWebSocket.readyState === session.clientWebSocket.OPEN) {
+            try {
+                session.clientWebSocket.send(data)
+            } catch (err) {
+                console.debug('[Terminal] Failed to send terminal data to client:', err)
+            }
+        }
+    })
+
+    dataWs.on('pong', () => {
+        session.lastActivity = Date.now()
+    })
+
+    dataWs.on('error', (err) => {
+        console.error(`[Terminal] Incus WebSocket error for session ${session.id}:`, err.message)
+        void reconnectIncusConnection(session.id, 'Incus connection error')
+    })
+
+    dataWs.on('close', () => {
+        console.log(`[Terminal] Incus WebSocket closed for session ${session.id}`)
+        void reconnectIncusConnection(session.id, 'Incus connection closed')
+    })
+
+    if (controlWs) {
+        controlWs.on('pong', () => {
+            session.lastActivity = Date.now()
+        })
+
+        controlWs.on('error', (err) => {
+            console.error(`[Terminal] Control WebSocket error for session ${session.id}:`, err.message)
+        })
+    }
+}
+
+async function reconnectIncusConnection(sessionId: string, reason: string): Promise<void> {
+    const session = activeSessions.get(sessionId)
+    if (!session) return
+    if (session.clientWebSocket.readyState !== session.clientWebSocket.OPEN) {
+        closeTerminalSession(sessionId, reason)
+        return
+    }
+    if (session.reconnectingIncus) {
+        return
+    }
+
+    session.reconnectingIncus = true
+    session.incusReconnectAttempts += 1
+
+    if (session.incusReconnectAttempts > TERMINAL_CONFIG.maxReconnectAttempts) {
+        closeTerminalSession(sessionId, 'Terminal backend reconnection limit exceeded')
+        return
+    }
+
+    safeSendClientMessage(session.clientWebSocket, {
+        type: 'reconnecting',
+        reason,
+        mode: session.connectionMode
+    })
+
+    cleanupIncusSockets(session)
+
+    const delay = Math.min(TERMINAL_CONFIG.reconnectDelay + (session.incusReconnectAttempts - 1) * 2000, 15000)
+    await new Promise(resolve => setTimeout(resolve, delay))
+
+    try {
+        const { controlWs, dataWs, mode } = await createIncusConsoleConnection(
+            session.host,
+            session.instanceName,
+            session.instanceType
+        )
+
+        session.connectionMode = mode
+        session.incusWebSocket = dataWs
+        session.controlWebSocket = controlWs
+        session.lastActivity = Date.now()
+        session.reconnectingIncus = false
+        session.incusReconnectAttempts = 0
+
+        bindIncusSocketHandlers(session, dataWs, controlWs)
+
+        safeSendClientMessage(session.clientWebSocket, {
+            type: 'connected',
+            sessionId: session.id,
+            message: 'Terminal backend reconnected',
+            mode
+        })
+    } catch (error) {
+        session.reconnectingIncus = false
+        console.error(`[Terminal] Failed to reconnect Incus backend for session ${session.id}:`, error)
+        await reconnectIncusConnection(sessionId, 'Incus reconnection failed')
+    }
+}
+
+/**
+ * 获取活跃会话统计
+ */
+export function getActiveSessionStats(): {
+    total: number
+    byInstance: Map<number, number>
+    byUser: Map<number, number>
+} {
+    const byInstance = new Map<number, number>()
+    const byUser = new Map<number, number>()
+
+    for (const session of activeSessions.values()) {
+        byInstance.set(session.instanceId, (byInstance.get(session.instanceId) || 0) + 1)
+        byUser.set(session.userId, (byUser.get(session.userId) || 0) + 1)
+    }
+
+    return {
+        total: activeSessions.size,
+        byInstance,
+        byUser
+    }
+}
+
+/**
+ * 创建 Incus Console WebSocket 连接
+ */
+export async function createIncusConsoleConnection(
+    host: Host,
+    instanceName: string,
+    instanceType: 'container' | 'vm' = 'container'
+): Promise<{ controlWs: WsWebSocket | null; dataWs: WsWebSocket; operationId: string; mode: 'exec' | 'console' }> {
+    // 构建 Incus API URL
+    const baseUrl = host.url
+
+    // 创建 mTLS Agent
+    if (!host.cert_path || !host.key_path) {
+        throw new Error('Host certificate configuration missing')
+    }
+
+    // 使用缓存的证书（避免每次连接都读取文件）
+    const { cert, key } = getCachedCertificates(host.cert_path, host.key_path)
+
+    const agent = new Agent({
+        connect: {
+            cert,
+            key,
+            rejectUnauthorized: false
+        }
+    })
+
+    // 对于容器始终使用 exec。
+    // 对于 VM 优先使用 exec（依赖 qemu-guest-agent，更接近 SSH 体验），失败时回退到 console。
+    const encodedInstanceName = encodeURIComponent(instanceName)
+    let operationId = ''
+    let fds: Record<string, string> = {}
+    let mode: 'exec' | 'console' = 'exec'
+
+    try {
+        if (instanceType === 'vm') {
+            try {
+                const execResult = await requestTerminalOperation(
+                    baseUrl,
+                    agent,
+                    `/1.0/instances/${encodedInstanceName}/exec`,
+                    buildExecPayload()
+                )
+                operationId = execResult.operationId
+                fds = execResult.fds
+                mode = 'exec'
+            } catch (execError) {
+                console.warn(`[Terminal] VM exec unavailable for ${instanceName}, falling back to console:`, execError)
+                const consoleResult = await requestTerminalOperation(
+                    baseUrl,
+                    agent,
+                    `/1.0/instances/${encodedInstanceName}/console`,
+                    buildConsolePayload()
+                )
+                operationId = consoleResult.operationId
+                fds = consoleResult.fds
+                mode = 'console'
+            }
+        } else {
+            const execResult = await requestTerminalOperation(
+                baseUrl,
+                agent,
+                `/1.0/instances/${encodedInstanceName}/exec`,
+                buildExecPayload()
+            )
+            operationId = execResult.operationId
+            fds = execResult.fds
+            mode = 'exec'
+        }
+    } finally {
+        await agent.close()
+    }
+
+    // 检查数据 WebSocket fd 是否存在
+    const dataSecret = fds['0']
+    if (!dataSecret) {
+        throw new Error('No data file descriptor (fd 0) returned from console operation')
+    }
+
+    // 构建 WebSocket URL
+    const wsBaseUrl = baseUrl.replace('https://', 'wss://').replace('http://', 'ws://')
+
+    // 创建数据 WebSocket（fd 0 是标准输入输出，已在上面检查过）
+    const dataWsUrl = `${wsBaseUrl}/1.0/operations/${operationId}/websocket?secret=${dataSecret}`
+
+    // 创建控制 WebSocket（用于调整终端大小等）
+    const controlSecret = fds['control']
+    const controlWsUrl = controlSecret 
+        ? `${wsBaseUrl}/1.0/operations/${operationId}/websocket?secret=${controlSecret}`
+        : null
+
+    // 使用原生 WebSocket（需要 mTLS）
+    const WebSocket = (await import('ws')).default
+
+    const dataWs = new WebSocket(dataWsUrl, {
+        cert,
+        key,
+        rejectUnauthorized: false
+    })
+
+    let controlWs: WsWebSocket | null = null
+    if (controlWsUrl) {
+        controlWs = new WebSocket(controlWsUrl, {
+            cert,
+            key,
+            rejectUnauthorized: false
+        }) as WsWebSocket
+    }
+
+    // 等待连接建立（带资源清理）
+    try {
+        await Promise.all([
+            new Promise<void>((resolve, reject) => {
+                const timeout = setTimeout(() => reject(new Error('Data WebSocket connection timeout')), 10000)
+                dataWs.once('open', () => {
+                    clearTimeout(timeout)
+                    resolve()
+                })
+                dataWs.once('error', (err) => {
+                    clearTimeout(timeout)
+                    reject(err)
+                })
+            }),
+            controlWs ? new Promise<void>((resolve, reject) => {
+                const timeout = setTimeout(() => reject(new Error('Control WebSocket connection timeout')), 10000)
+                controlWs.once('open', () => {
+                    clearTimeout(timeout)
+                    resolve()
+                })
+                controlWs.once('error', (err) => {
+                    clearTimeout(timeout)
+                    reject(err)
+                })
+            }) : Promise.resolve()
+        ])
+    } catch (error) {
+        // 连接失败时，关闭已成功的连接，避免资源泄漏
+        if (dataWs.readyState === dataWs.OPEN || dataWs.readyState === dataWs.CONNECTING) {
+            dataWs.close()
+        }
+        if (controlWs && (controlWs.readyState === controlWs.OPEN || controlWs.readyState === controlWs.CONNECTING)) {
+            controlWs.close()
+        }
+        throw error
+    }
+
+    return { controlWs, dataWs: dataWs as WsWebSocket, operationId, mode }
+}
+
+/**
+ * 创建终端会话
+ */
+export async function createTerminalSession(
+    clientWs: WsWebSocket,
+    host: Host,
+    instanceId: number,
+    instanceName: string,
+    userId: number,
+    instanceType: 'container' | 'vm' = 'container',
+    authSessionId?: string
+): Promise<TerminalSession> {
+    const sessionId = generateSessionId()
+
+    // 创建 Incus 控制台连接
+    const { controlWs, dataWs, operationId, mode } = await createIncusConsoleConnection(
+        host,
+        instanceName,
+        instanceType
+    )
+
+    console.log(`[Terminal] Session ${sessionId} created for instance ${instanceName} (operation: ${operationId}, mode: ${mode})`)
+
+    const session: TerminalSession = {
+        id: sessionId,
+        instanceId,
+        userId,
+        sessionId: authSessionId,
+        connectionMode: mode,
+        host,
+        instanceName,
+        instanceType,
+        incusWebSocket: dataWs,
+        controlWebSocket: controlWs,  // 保存 controlWs 引用
+        clientWebSocket: clientWs,
+        heartbeatTimer: null,
+        createdAt: Date.now(),
+        lastActivity: Date.now(),
+        reconnectingIncus: false,
+        incusReconnectAttempts: 0
+    }
+
+    bindIncusSocketHandlers(session, dataWs, controlWs)
+
+    // Client -> Incus
+    clientWs.on('message', (data: Buffer | string) => {
+        session.lastActivity = Date.now()
+        
+        // 检查消息大小（防止过大消息攻击）
+        const dataSize = typeof data === 'string' ? data.length : data.length
+        if (dataSize > TERMINAL_CONFIG.maxMessageSize) {
+            console.warn(`[Terminal] Message too large (${dataSize} bytes), dropping`)
+            return
+        }
+        
+        // 检查是否是控制消息（JSON 格式）
+        // 更健壮的 JSON 检测：检查数据是否以 "{" 开头并以 "}" 结尾
+        let isJsonMessage = false
+        let jsonStr = ''
+        
+        if (typeof data === 'string') {
+            jsonStr = data.trim()
+            isJsonMessage = jsonStr.startsWith('{') && jsonStr.endsWith('}')
+        } else if (Buffer.isBuffer(data) && data.length >= 2) {
+            // 检查第一个字节是 '{' (0x7b) 且最后一个字节是 '}' (0x7d)
+            if (data[0] === 0x7b && data[data.length - 1] === 0x7d) {
+                jsonStr = data.toString('utf8').trim()
+                isJsonMessage = true
+            }
+        }
+        
+        if (isJsonMessage && jsonStr) {
+            try {
+                const message = JSON.parse(jsonStr)
+                if (message.type === 'resize' && session.controlWebSocket) {
+                    const currentControlWs = session.controlWebSocket
+                    // 验证 cols 和 rows 的范围（防止恶意输入）
+                    const cols = Math.max(1, Math.min(500, Number(message.cols) || 80))
+                    const rows = Math.max(1, Math.min(200, Number(message.rows) || 24))
+                    
+                    // 发送调整大小命令
+                    const resizeCmd = JSON.stringify({
+                        command: 'window-resize',
+                        args: {
+                            width: cols,
+                            height: rows
+                        }
+                    })
+                    if (currentControlWs && currentControlWs.readyState === currentControlWs.OPEN) {
+                        try {
+                            currentControlWs.send(resizeCmd)
+                        } catch (err) {
+                            // resize 命令发送失败，非关键错误，静默忽略
+                            console.debug(`[Terminal] Failed to send resize command:`, err)
+                        }
+                    }
+                    return
+                }
+            } catch {
+                // JSON 解析失败，作为普通数据处理
+            }
+        }
+
+        // 转发到 Incus
+        const currentDataWs = session.incusWebSocket
+        if (currentDataWs && currentDataWs.readyState === currentDataWs.OPEN) {
+            try {
+                currentDataWs.send(data)
+            } catch (err) {
+                // 发送失败（可能连接已关闭），静默忽略
+                console.debug(`[Terminal] Failed to send to Incus:`, err)
+            }
+        }
+    })
+
+    clientWs.on('close', () => {
+        console.log(`[Terminal] Client WebSocket closed for session ${sessionId}`)
+        closeTerminalSession(sessionId, 'Client disconnected')
+    })
+
+    clientWs.on('error', (err) => {
+        console.error(`[Terminal] Client WebSocket error for session ${sessionId}:`, err.message)
+        closeTerminalSession(sessionId, 'Client connection error')
+    })
+
+    // 设置心跳保活
+    // 关键：通过 ping/pong 机制保持连接，只要 WebSocket 通道正常就不断开
+    let pongReceived = true  // 标记是否收到 pong 响应
+    
+    clientWs.on('pong', () => {
+        // 收到 pong 响应，说明连接正常，更新活动时间
+        pongReceived = true
+        session.lastActivity = Date.now()
+    })
+    
+    session.heartbeatTimer = setInterval(() => {
+        if (clientWs.readyState !== clientWs.OPEN) {
+            return
+        }
+        
+        // 检查上一次 ping 是否收到了 pong
+        if (!pongReceived) {
+            // 连续两次心跳没有收到 pong，认为连接已死
+            console.log(`[Terminal] Session ${sessionId} timeout: no pong response`)
+            closeTerminalSession(sessionId, 'Connection timeout')
+            return
+        }
+        
+        // 发送新的 ping
+        pongReceived = false
+        try {
+            clientWs.ping()
+        } catch (err) {
+            console.debug(`[Terminal] Failed to send ping:`, err)
+        }
+
+        if (session.incusWebSocket && session.incusWebSocket.readyState === session.incusWebSocket.OPEN) {
+            try {
+                session.incusWebSocket.ping()
+            } catch (err) {
+                console.debug('[Terminal] Failed to send ping to Incus data websocket:', err)
+            }
+        }
+
+        if (session.controlWebSocket && session.controlWebSocket.readyState === session.controlWebSocket.OPEN) {
+            try {
+                session.controlWebSocket.ping()
+            } catch (err) {
+                console.debug('[Terminal] Failed to send ping to Incus control websocket:', err)
+            }
+        }
+        
+        // 检查空闲超时（可选的安全机制：非常长时间无任何数据传输）
+        const now = Date.now()
+        if (now - session.lastActivity > TERMINAL_CONFIG.idleTimeout) {
+            console.log(`[Terminal] Session ${sessionId} idle timeout (${TERMINAL_CONFIG.idleTimeout / 1000}s)`)
+            closeTerminalSession(sessionId, 'Idle timeout')
+        }
+    }, TERMINAL_CONFIG.heartbeatInterval)
+
+    // 存储会话
+    activeSessions.set(sessionId, session)
+
+    // 发送连接成功消息
+    try {
+        clientWs.send(JSON.stringify({
+            type: 'connected',
+            sessionId,
+            message: `Terminal session established (${mode})`,
+            mode
+        }))
+    } catch (err) {
+        // 发送失败（可能连接已关闭），静默忽略
+        console.debug(`[Terminal] Failed to send connected message:`, err)
+    }
+
+    return session
+}
+
+/**
+ * 关闭终端会话
+ */
+export function closeTerminalSession(sessionId: string, reason: string = 'Session closed'): void {
+    const session = activeSessions.get(sessionId)
+    if (!session) return
+
+    console.log(`[Terminal] Closing session ${sessionId}: ${reason}`)
+
+    // 清除心跳定时器
+    if (session.heartbeatTimer) {
+        clearInterval(session.heartbeatTimer)
+    }
+
+    cleanupIncusSockets(session)
+
+    // 通知客户端并关闭
+    if (session.clientWebSocket.readyState === session.clientWebSocket.OPEN) {
+        try {
+            session.clientWebSocket.send(JSON.stringify({
+                type: 'disconnected',
+                reason
+            }))
+        } catch (err) {
+            // 发送失败（可能连接已关闭），静默忽略
+            console.debug(`[Terminal] Failed to send disconnected message:`, err)
+        }
+        try {
+            session.clientWebSocket.close()
+        } catch (err) {
+            console.debug(`[Terminal] Failed to close client WebSocket:`, err)
+        }
+    }
+
+    // 移除会话
+    activeSessions.delete(sessionId)
+}
+
+/**
+ * 关闭实例的所有终端会话
+ */
+export function closeInstanceSessions(instanceId: number, reason: string = 'Instance session closed'): number {
+    // 先收集要关闭的会话 ID，避免在遍历时修改 Map
+    const sessionsToClose: string[] = []
+    for (const [sessionId, session] of activeSessions) {
+        if (session.instanceId === instanceId) {
+            sessionsToClose.push(sessionId)
+        }
+    }
+    
+    for (const sessionId of sessionsToClose) {
+        closeTerminalSession(sessionId, reason)
+    }
+    return sessionsToClose.length
+}
+
+/**
+ * 清理僵尸会话（超时未活动的会话）
+ * 注意：使用与心跳检查一致的超时时间，避免正常连接被误清理
+ */
+export function cleanupStaleSessions(): number {
+    const now = Date.now()
+    const sessionsToClose: string[] = []
+    
+    // 使用与心跳检查一致的超时时间
+    // 加上额外 buffer 避免竞态条件（心跳检查会先处理正常超时）
+    const cleanupThreshold = TERMINAL_CONFIG.idleTimeout + TERMINAL_CONFIG.heartbeatInterval * 2
+    
+    for (const [sessionId, session] of activeSessions) {
+        if (now - session.lastActivity > cleanupThreshold) {
+            sessionsToClose.push(sessionId)
+        }
+    }
+    
+    for (const sessionId of sessionsToClose) {
+        closeTerminalSession(sessionId, 'Session stale cleanup')
+    }
+    
+    if (sessionsToClose.length > 0) {
+        console.log(`[Terminal] Cleaned up ${sessionsToClose.length} stale session(s)`)
+    }
+    
+    return sessionsToClose.length
+}
+
+// 启动定时清理任务（每分钟检查一次，但使用正确的超时阈值）
+let cleanupInterval: NodeJS.Timeout | null = null
+
+export function startSessionCleanup(): void {
+    if (cleanupInterval) return
+    // 每分钟检查一次，清理那些心跳检查可能遗漏的僵尸会话
+    cleanupInterval = setInterval(() => {
+        cleanupStaleSessions()
+    }, 60 * 1000)
+    console.log(`[Terminal] Session cleanup task started (threshold: ${(TERMINAL_CONFIG.idleTimeout + TERMINAL_CONFIG.heartbeatInterval * 2) / 1000}s)`)
+}
+
+export function stopSessionCleanup(): void {
+    if (cleanupInterval) {
+        clearInterval(cleanupInterval)
+        cleanupInterval = null
+        console.log('[Terminal] Session cleanup task stopped')
+    }
+}
+
+/**
+ * 关闭用户的所有终端会话
+ */
+export function closeUserSessions(userId: number, reason: string = 'User session closed'): number {
+    // 先收集要关闭的会话 ID，避免在遍历时修改 Map
+    const sessionsToClose: string[] = []
+    for (const [sessionId, session] of activeSessions) {
+        if (session.userId === userId) {
+            sessionsToClose.push(sessionId)
+        }
+    }
+    
+    for (const sessionId of sessionsToClose) {
+        closeTerminalSession(sessionId, reason)
+    }
+    return sessionsToClose.length
+}
+
+export function closeSessionTerminalSessions(sessionId: string, reason: string = 'Session closed'): number {
+    const sessionsToClose: string[] = []
+
+    for (const [currentSessionId, session] of activeSessions) {
+        if (session.sessionId === sessionId) {
+            sessionsToClose.push(currentSessionId)
+        }
+    }
+
+    for (const currentSessionId of sessionsToClose) {
+        closeTerminalSession(currentSessionId, reason)
+    }
+
+    return sessionsToClose.length
+}
+
+/**
+ * 关闭所有终端会话（用于服务器优雅关闭）
+ */
+export function closeAllSessions(reason: string = 'Server shutdown'): number {
+    const sessionIds = Array.from(activeSessions.keys())
+    for (const sessionId of sessionIds) {
+        closeTerminalSession(sessionId, reason)
+    }
+    return sessionIds.length
+}
diff --git a/server/src/lib/timezone.ts b/server/src/lib/timezone.ts
new file mode 100644
index 0000000..cadec0e
--- /dev/null
+++ b/server/src/lib/timezone.ts
@@ -0,0 +1,168 @@
+/**
+ * 时区工具函数
+ * 
+ * 业务统计使用固定的时区（Asia/Shanghai），确保：
+ * - "今日"统计在中国时间 0 点刷新
+ * - "本月"统计在中国时间每月 1 日 0 点刷新
+ */
+
+// 默认业务时区
+const DEFAULT_TIMEZONE = 'Asia/Shanghai'
+
+/**
+ * 获取指定时区的当前日期字符串（YYYY-MM-DD 格式）
+ */
+export function getDateStringInTimezone(date: Date = new Date(), timezone: string = DEFAULT_TIMEZONE): string {
+  return date.toLocaleDateString('en-CA', { timeZone: timezone })
+}
+
+/**
+ * 获取指定时区的当前年月（YYYY-MM 格式）
+ */
+export function getMonthStringInTimezone(date: Date = new Date(), timezone: string = DEFAULT_TIMEZONE): string {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: timezone,
+    year: 'numeric',
+    month: '2-digit'
+  }).formatToParts(date)
+  
+  const year = parts.find(p => p.type === 'year')?.value
+  const month = parts.find(p => p.type === 'month')?.value
+  return `${year}-${month}`
+}
+
+/**
+ * 获取指定时区今日的开始和结束时间（返回 UTC Date 对象）
+ * 
+ * @example
+ * // 如果中国时间是 2024-01-21 15:30:00
+ * // 返回的 start 是 2024-01-21 00:00:00 中国时间 = 2024-01-20 16:00:00 UTC
+ * // 返回的 end 是 2024-01-22 00:00:00 中国时间 = 2024-01-21 16:00:00 UTC
+ */
+export function getTodayRange(timezone: string = DEFAULT_TIMEZONE): { start: Date; end: Date } {
+  const now = new Date()
+  const dateStr = getDateStringInTimezone(now, timezone)
+  
+  // 解析日期字符串
+  const [year, month, day] = dateStr.split('-').map(Number)
+  
+  // 计算时区偏移（以分钟为单位）
+  // 使用 Intl.DateTimeFormat 获取时区偏移
+  const tzOffset = getTimezoneOffsetMinutes(timezone)
+  
+  // 创建今日 0 点的 UTC 时间
+  // 例如：中国时区 (UTC+8)，中国 0 点 = UTC -8 小时
+  const startUtc = new Date(Date.UTC(year, month - 1, day, 0, 0, 0, 0))
+  startUtc.setMinutes(startUtc.getMinutes() - tzOffset)
+  
+  // 创建明日 0 点的 UTC 时间
+  const endUtc = new Date(startUtc)
+  endUtc.setDate(endUtc.getDate() + 1)
+  
+  return { start: startUtc, end: endUtc }
+}
+
+/**
+ * 获取指定时区本月的开始时间（返回 UTC Date 对象）
+ */
+export function getThisMonthStart(timezone: string = DEFAULT_TIMEZONE): Date {
+  const now = new Date()
+  const dateStr = getDateStringInTimezone(now, timezone)
+  
+  // 解析日期字符串获取年月
+  const [year, month] = dateStr.split('-').map(Number)
+  
+  // 计算时区偏移
+  const tzOffset = getTimezoneOffsetMinutes(timezone)
+  
+  // 创建本月 1 日 0 点的 UTC 时间
+  const startUtc = new Date(Date.UTC(year, month - 1, 1, 0, 0, 0, 0))
+  startUtc.setMinutes(startUtc.getMinutes() - tzOffset)
+  
+  return startUtc
+}
+
+/**
+ * 获取指定时区上月的开始和结束时间（返回 UTC Date 对象）
+ */
+export function getLastMonthRange(timezone: string = DEFAULT_TIMEZONE): { start: Date; end: Date } {
+  const thisMonthStart = getThisMonthStart(timezone)
+  
+  // 上月结束时间 = 本月开始时间 - 1 毫秒
+  const end = new Date(thisMonthStart.getTime() - 1)
+  
+  // 上月开始时间
+  const now = new Date()
+  const dateStr = getDateStringInTimezone(now, timezone)
+  const [year, month] = dateStr.split('-').map(Number)
+  
+  // 计算上个月的年月
+  let lastYear = year
+  let lastMonth = month - 1
+  if (lastMonth === 0) {
+    lastMonth = 12
+    lastYear = year - 1
+  }
+  
+  // 计算时区偏移
+  const tzOffset = getTimezoneOffsetMinutes(timezone)
+  
+  // 创建上月 1 日 0 点的 UTC 时间
+  const start = new Date(Date.UTC(lastYear, lastMonth - 1, 1, 0, 0, 0, 0))
+  start.setMinutes(start.getMinutes() - tzOffset)
+  
+  return { start, end }
+}
+
+/**
+ * 获取时区偏移（以分钟为单位）
+ * 正数表示东时区，负数表示西时区
+ * 例如：Asia/Shanghai 返回 480（UTC+8 = +480分钟）
+ */
+function getTimezoneOffsetMinutes(timezone: string): number {
+  const now = new Date()
+  
+  // 获取指定时区的时间字符串
+  const tzTimeStr = now.toLocaleString('en-US', { 
+    timeZone: timezone,
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+  
+  // 获取 UTC 时间字符串
+  const utcTimeStr = now.toLocaleString('en-US', { 
+    timeZone: 'UTC',
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+  
+  // 解析时间字符串为 Date 对象（用于计算差值）
+  const parseDateStr = (str: string): Date => {
+    // 格式: "MM/DD/YYYY, HH:MM:SS"
+    const [datePart, timePart] = str.split(', ')
+    const [month, day, year] = datePart.split('/').map(Number)
+    const [hour, minute, second] = timePart.split(':').map(Number)
+    return new Date(year, month - 1, day, hour, minute, second)
+  }
+  
+  const tzDate = parseDateStr(tzTimeStr)
+  const utcDate = parseDateStr(utcTimeStr)
+  
+  // 计算差值（分钟）
+  return Math.round((tzDate.getTime() - utcDate.getTime()) / 60000)
+}
+
+/**
+ * 业务时区常量
+ */
+export const BUSINESS_TIMEZONE = DEFAULT_TIMEZONE
diff --git a/server/src/lib/traffic-multiplier.ts b/server/src/lib/traffic-multiplier.ts
new file mode 100644
index 0000000..6011648
--- /dev/null
+++ b/server/src/lib/traffic-multiplier.ts
@@ -0,0 +1,71 @@
+import type { Prisma } from '@prisma/client'
+
+const MULTIPLIER_SCALE = 1000n
+
+type DbClient = Prisma.TransactionClient | {
+  packageHost: {
+    findUnique(args: {
+      where: { packageId_hostId: { packageId: number; hostId: number } }
+      select: { trafficMultiplier: true }
+    }): Promise<{ trafficMultiplier: unknown } | null>
+  }
+}
+
+export function normalizeTrafficMultiplier(value: unknown): number {
+  if (value === null || value === undefined || value === '') {
+    return 1
+  }
+
+  const numeric = Number(value)
+  if (!Number.isFinite(numeric) || numeric < 0.001 || numeric > 100) {
+    throw new Error('Traffic multiplier must be at least 0.001 and no more than 100')
+  }
+
+  return Math.round(numeric * 1000) / 1000
+}
+
+export function applyTrafficMultiplier(limit: bigint | null, multiplier: unknown): bigint | null {
+  if (limit === null) {
+    return null
+  }
+
+  const normalized = normalizeTrafficMultiplier(multiplier)
+  const scaled = BigInt(Math.round(normalized * Number(MULTIPLIER_SCALE)))
+  return (limit * scaled) / MULTIPLIER_SCALE
+}
+
+export async function getPackageHostTrafficMultiplier(
+  client: DbClient,
+  packageId: number,
+  hostId: number
+): Promise<number> {
+  const binding = await client.packageHost.findUnique({
+    where: {
+      packageId_hostId: {
+        packageId,
+        hostId
+      }
+    },
+    select: {
+      trafficMultiplier: true
+    }
+  })
+
+  return normalizeTrafficMultiplier(binding?.trafficMultiplier)
+}
+
+export async function resolveInstanceTrafficLimitForHost(
+  client: DbClient,
+  params: {
+    packageId: number | null | undefined
+    hostId: number
+    baseTrafficLimit: bigint | null
+  }
+): Promise<bigint | null> {
+  if (!params.packageId) {
+    return params.baseTrafficLimit
+  }
+
+  const multiplier = await getPackageHostTrafficMultiplier(client, params.packageId, params.hostId)
+  return applyTrafficMultiplier(params.baseTrafficLimit, multiplier)
+}
diff --git a/server/src/lib/turnstile.ts b/server/src/lib/turnstile.ts
new file mode 100644
index 0000000..96c2511
--- /dev/null
+++ b/server/src/lib/turnstile.ts
@@ -0,0 +1,134 @@
+/**
+ * Cloudflare Turnstile 验证模块
+ */
+
+import type { FastifyRequest, FastifyReply } from 'fastify'
+import { getSystemConfig, getSystemConfigBoolean } from '../db/system-config.js'
+
+interface TurnstileVerifyResponse {
+    success: boolean
+    'error-codes'?: string[]
+    challenge_ts?: string
+    hostname?: string
+}
+
+/**
+ * 获取 Turnstile 配置
+ */
+export async function getTurnstileConfig(): Promise<{
+    enabled: boolean
+    siteKey: string | null
+    secretKey: string | null
+}> {
+    const [enabled, siteKey, secretKey] = await Promise.all([
+        getSystemConfigBoolean('turnstile_enabled', false),
+        getSystemConfig('turnstile_site_key'),
+        getSystemConfig('turnstile_secret_key')
+    ])
+
+    return { enabled, siteKey, secretKey }
+}
+
+/**
+ * 验证 Turnstile token
+ */
+export async function verifyTurnstileToken(
+    token: string,
+    secretKey: string,
+    remoteIp?: string
+): Promise<{ success: boolean; error?: string }> {
+    try {
+        const formData = new URLSearchParams()
+        formData.append('secret', secretKey)
+        formData.append('response', token)
+        if (remoteIp) {
+            formData.append('remoteip', remoteIp)
+        }
+
+        const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: formData.toString()
+        })
+
+        const result = await response.json() as TurnstileVerifyResponse
+
+        if (result.success) {
+            return { success: true }
+        }
+
+        const errorCodes = result['error-codes'] || []
+        return {
+            success: false,
+            error: errorCodes.length > 0 ? errorCodes.join(', ') : 'Verification failed'
+        }
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        return { success: false, error: `Turnstile verification error: ${errorMessage}` }
+    }
+}
+
+/**
+ * 创建 Turnstile 验证 preHandler
+ * @param required 是否必须验证（false 时如果未启用则跳过）
+ */
+export function createTurnstileVerifier(required: boolean = true) {
+    return async function verifyTurnstile(
+        request: FastifyRequest,
+        reply: FastifyReply
+    ): Promise<void> {
+        const config = await getTurnstileConfig()
+
+        // 如果未启用 Turnstile
+        if (!config.enabled) {
+            if (required) {
+                // 必须验证但未启用，检查是否配置了密钥
+                if (!config.secretKey) {
+                    return // 未配置则跳过验证
+                }
+            } else {
+                return // 非必须且未启用，跳过
+            }
+        }
+
+        // 已启用但未配置密钥
+        if (!config.secretKey) {
+            console.warn('Turnstile enabled but secret key not configured')
+            return // 跳过验证
+        }
+
+        // 获取 token（优先从 body，其次从 query，最后从 header）
+        const token = (request.body as { turnstileToken?: string })?.turnstileToken
+            || (request.query as { turnstileToken?: string })?.turnstileToken
+            || request.headers['x-turnstile-token'] as string
+
+        if (!token) {
+            return reply.code(400).send({
+                error: 'Turnstile verification required',
+                code: 'TURNSTILE_TOKEN_MISSING'
+            })
+        }
+
+        // 获取真实 IP（支持 Cloudflare 代理）
+        // request.ip 已通过 trustProxy 自动处理 Cloudflare 的 X-Forwarded-For 头
+        const clientIp = request.ip
+        
+        // 验证 token
+        const result = await verifyTurnstileToken(token, config.secretKey, clientIp)
+
+        if (!result.success) {
+            return reply.code(403).send({
+                error: 'Turnstile verification failed',
+                code: 'TURNSTILE_VERIFICATION_FAILED',
+                details: result.error
+            })
+        }
+    }
+}
+
+/**
+ * 预定义的验证器实例
+ */
+export const turnstileVerifier = createTurnstileVerifier(true)
diff --git a/server/src/lib/vm-network-identifiers.ts b/server/src/lib/vm-network-identifiers.ts
new file mode 100644
index 0000000..0381353
--- /dev/null
+++ b/server/src/lib/vm-network-identifiers.ts
@@ -0,0 +1,32 @@
+import { createHash } from 'node:crypto'
+
+export interface VmNicMacs {
+  eth0: string
+  eth1: string
+}
+
+function formatMac(bytes: number[]): string {
+  return bytes.map(byte => byte.toString(16).padStart(2, '0')).join(':')
+}
+
+function generateVmNicMac(seed: string, nicLabel: 'eth0' | 'eth1'): string {
+  const hash = createHash('sha256')
+    .update(`incudal-vm-nic:${seed}:${nicLabel}`)
+    .digest()
+
+  return formatMac([
+    0x02,
+    hash[0],
+    hash[1],
+    hash[2],
+    hash[3],
+    hash[4]
+  ])
+}
+
+export function generateVmNicMacs(seed: string): VmNicMacs {
+  return {
+    eth0: generateVmNicMac(seed, 'eth0'),
+    eth1: generateVmNicMac(seed, 'eth1')
+  }
+}
diff --git a/server/src/lib/websocket-security.ts b/server/src/lib/websocket-security.ts
new file mode 100644
index 0000000..0ddc3c1
--- /dev/null
+++ b/server/src/lib/websocket-security.ts
@@ -0,0 +1,217 @@
+/**
+ * WebSocket 安全管理模块
+ * 
+ * 提供 WebSocket 连接的安全增强功能：
+ * 1. 连接数限制（按 IP 和用户）
+ * 2. 认证验证（JWT Token）
+ * 3. 连接超时管理
+ */
+
+import type { FastifyRequest } from 'fastify'
+import type { WebSocket } from 'ws'
+
+// 连接限制配置
+const WS_LIMITS = {
+    maxConnectionsPerIP: 10,      // 单 IP 最大连接数
+    maxConnectionsPerUser: 5,     // 单用户最大连接数
+    connectionTimeout: 30000,     // 连接超时（30秒内必须认证）
+    heartbeatInterval: 30000,     // 心跳间隔
+    heartbeatTimeout: 10000,      // 心跳超时
+}
+
+// IP 连接计数器
+const ipConnections = new Map<string, Set<WebSocket>>()
+
+// 用户连接计数器
+const userConnections = new Map<number, Set<WebSocket>>()
+
+/**
+ * 获取客户端 IP
+ */
+export function getClientIP(request: FastifyRequest): string {
+    return request.ip
+}
+
+/**
+ * 检查 IP 连接数是否超限
+ */
+export function checkIPConnectionLimit(ip: string): { allowed: boolean; current: number; limit: number } {
+    const connections = ipConnections.get(ip)
+    const current = connections?.size || 0
+    
+    return {
+        allowed: current < WS_LIMITS.maxConnectionsPerIP,
+        current,
+        limit: WS_LIMITS.maxConnectionsPerIP
+    }
+}
+
+/**
+ * 检查用户连接数是否超限
+ */
+export function checkUserConnectionLimit(userId: number): { allowed: boolean; current: number; limit: number } {
+    const connections = userConnections.get(userId)
+    const current = connections?.size || 0
+    
+    return {
+        allowed: current < WS_LIMITS.maxConnectionsPerUser,
+        current,
+        limit: WS_LIMITS.maxConnectionsPerUser
+    }
+}
+
+/**
+ * 注册新连接
+ */
+export function registerConnection(ip: string, socket: WebSocket, userId?: number): void {
+    // 注册 IP 连接
+    if (!ipConnections.has(ip)) {
+        ipConnections.set(ip, new Set())
+    }
+    ipConnections.get(ip)!.add(socket)
+
+    // 注册用户连接（如果有用户 ID）
+    if (userId !== undefined) {
+        if (!userConnections.has(userId)) {
+            userConnections.set(userId, new Set())
+        }
+        userConnections.get(userId)!.add(socket)
+    }
+
+    // 监听连接关闭，自动清理
+    socket.on('close', () => {
+        unregisterConnection(ip, socket, userId)
+    })
+}
+
+/**
+ * 注销连接
+ */
+export function unregisterConnection(ip: string, socket: WebSocket, userId?: number): void {
+    // 清理 IP 连接
+    const ipSet = ipConnections.get(ip)
+    if (ipSet) {
+        ipSet.delete(socket)
+        if (ipSet.size === 0) {
+            ipConnections.delete(ip)
+        }
+    }
+
+    // 清理用户连接
+    if (userId !== undefined) {
+        const userSet = userConnections.get(userId)
+        if (userSet) {
+            userSet.delete(socket)
+            if (userSet.size === 0) {
+                userConnections.delete(userId)
+            }
+        }
+    }
+}
+
+/**
+ * 设置连接超时（要求在指定时间内完成认证）
+ */
+export function setAuthenticationTimeout(socket: WebSocket, timeoutMs: number = WS_LIMITS.connectionTimeout): NodeJS.Timeout {
+    return setTimeout(() => {
+        if (socket.readyState === socket.OPEN) {
+            socket.close(4001, 'Authentication timeout')
+        }
+    }, timeoutMs)
+}
+
+/**
+ * 获取当前连接统计
+ */
+export function getConnectionStats(): {
+    totalIPs: number
+    totalConnections: number
+    totalUsers: number
+    topIPs: Array<{ ip: string; count: number }>
+} {
+    let totalConnections = 0
+    const topIPs: Array<{ ip: string; count: number }> = []
+
+    for (const [ip, connections] of ipConnections.entries()) {
+        totalConnections += connections.size
+        topIPs.push({ ip, count: connections.size })
+    }
+
+    // 按连接数排序
+    topIPs.sort((a, b) => b.count - a.count)
+
+    return {
+        totalIPs: ipConnections.size,
+        totalConnections,
+        totalUsers: userConnections.size,
+        topIPs: topIPs.slice(0, 10) // 只返回前10个
+    }
+}
+
+/**
+ * 强制断开某 IP 的所有连接
+ */
+export function disconnectIP(ip: string, reason: string = 'Disconnected by admin'): number {
+    const connections = ipConnections.get(ip)
+    if (!connections) return 0
+
+    let count = 0
+    for (const socket of connections) {
+        if (socket.readyState === socket.OPEN) {
+            socket.close(4003, reason)
+            count++
+        }
+    }
+
+    return count
+}
+
+/**
+ * 强制断开某用户的所有连接
+ */
+export function disconnectUser(userId: number, reason: string = 'Session terminated'): number {
+    const connections = userConnections.get(userId)
+    if (!connections) return 0
+
+    let count = 0
+    for (const socket of connections) {
+        if (socket.readyState === socket.OPEN) {
+            socket.close(4002, reason)
+            count++
+        }
+    }
+
+    return count
+}
+
+/**
+ * WebSocket 认证中间件辅助函数
+ * 用于在 WebSocket 路由中验证用户身份
+ */
+export async function authenticateWebSocket(
+    request: FastifyRequest,
+    verifyJwt: (token: string) => Promise<{ id: number; username: string; role: string } | null>
+): Promise<{ authenticated: boolean; user?: { id: number; username: string; role: string }; error?: string }> {
+    // 尝试从 Authorization header 获取 token
+    const authHeader = request.headers.authorization
+    const headerToken = authHeader?.startsWith('Bearer ') ? authHeader.slice(7) : null
+
+    const token = headerToken
+
+    if (!token) {
+        return { authenticated: false, error: 'No authentication token provided' }
+    }
+
+    try {
+        const user = await verifyJwt(token)
+        if (!user) {
+            return { authenticated: false, error: 'Invalid token' }
+        }
+        return { authenticated: true, user }
+    } catch {
+        return { authenticated: false, error: 'Token verification failed' }
+    }
+}
+
+// 导出配置供外部使用
+export const WS_CONFIG = WS_LIMITS
diff --git a/server/src/routes/admin-billing.ts b/server/src/routes/admin-billing.ts
new file mode 100644
index 0000000..cd6ff20
--- /dev/null
+++ b/server/src/routes/admin-billing.ts
@@ -0,0 +1,3879 @@
+/**
+ * 管理员计费相关路由
+ */
+
+import { FastifyInstance } from 'fastify'
+import type { InstanceStatus, Prisma } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { sendNotification } from '../lib/notifier.js'
+import { createEpayClient, type EpayConfig, type EpayConfigV1, type EpayConfigV2, type EpayVersion } from '../lib/epay.js'
+import {
+  buildHeleketConfig,
+  createHeleketClient,
+  extractHeleketStatus,
+  getHeleketInvoiceAmount,
+  getHeleketPaymentState,
+  getHeleketStatusDescription
+} from '../lib/heleket.js'
+import {
+  extractRechargePaymentDisplayInfo,
+  getRechargePayableAmount,
+  mergeHeleketPaymentDetails
+} from '../lib/recharge-payment-details.js'
+import { resolveRechargeProviderConfigSnapshot } from '../lib/recharge-provider-snapshot.js'
+import { createInboxMessage } from '../db/inbox.js'
+import { getTodayRange, getThisMonthStart, getLastMonthRange } from '../lib/timezone.js'
+import { validateName, encryptSensitiveData } from '../lib/security.js'
+import { generateIncusConfig, generateRandomPassword } from '../lib/incus-config-generator.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import {
+  getSystemImageAvailabilityForHost,
+  isImageCompatibleWithInstanceType,
+  isImageCompatibleWithMemory,
+  isValidSystemImage
+} from '../db/images.js'
+import { sendAdminInstanceCreatedEmail, sendInstanceDestroyRefundEmail } from '../lib/mailer.js'
+import { generateRandomIPv4, generateRandomIPv6 } from '../lib/ip-calculator.js'
+import { validateCommandsOwnership, mergeCommandContents, getImageDistroFromAlias } from '../db/custom-init-commands.js'
+import { customAlphabet } from 'nanoid'
+import { buildInstanceConfig, getIncusClient, createInstance, startInstance, getInstanceState } from '../lib/incus/index.js'
+import { calculateCreateBilling, getMaxRefundable } from '../db/billing-operations.js'
+import { shouldSyncInstanceSwapSizeWithPlan } from '../lib/instance-swap.js'
+import { resolveInstanceTrafficLimitForHost } from '../lib/traffic-multiplier.js'
+import { calculateInstanceTrafficStatus } from '../services/traffic-utils.js'
+import type { Host } from '../types/database.js'
+import { INSTANCE_OPERATION_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from '../db/advisory-locks.js'
+
+// 自定义 nanoid，只使用小写字母和数字
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)
+
+async function claimInstanceForAdminDelete(instanceId: number, currentStatus: InstanceStatus): Promise<boolean> {
+  return prisma.$transaction(async (tx) => {
+    const locked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, instanceId)
+    if (!locked) return false
+
+    const [activeRestoreTask, activeUploadTask, activeInstanceTask] = await Promise.all([
+      tx.restoreTask.findFirst({
+        where: { instanceId, status: { in: ['PENDING', 'PROCESSING'] } },
+        select: { id: true }
+      }),
+      tx.backupUploadTask.findFirst({
+        where: { instanceId, status: { in: ['PENDING', 'PROCESSING'] } },
+        select: { id: true }
+      }),
+      tx.instanceTask.findFirst({
+        where: { instanceId, status: { in: ['PENDING', 'PROCESSING'] } },
+        select: { id: true }
+      })
+    ])
+    if (activeRestoreTask || activeUploadTask || activeInstanceTask) return false
+
+    const result = await tx.instance.updateMany({
+      where: {
+        id: instanceId,
+        status: currentStatus
+      },
+      data: { status: 'deleted' }
+    })
+
+    return result.count === 1
+  })
+}
+
+// ==================== 易支付辅助函数 ====================
+
+/**
+ * 根据配置构建易支付客户端配置
+ */
+function buildEpayConfig(config: Record<string, unknown>): { epayConfig: EpayConfig; valid: boolean; error?: string } {
+  const version = (config.version as EpayVersion) || 'v2'
+
+  if (version === 'v1') {
+    const v1Config: EpayConfigV1 = {
+      version: 'v1',
+      apiurl: config.apiurl as string || '',
+      pid: config.pid as string || '',
+      key: config.key as string || ''
+    }
+
+    if (!v1Config.apiurl || !v1Config.pid || !v1Config.key) {
+      return { epayConfig: v1Config, valid: false, error: '支付渠道配置不完整' }
+    }
+
+    return { epayConfig: v1Config, valid: true }
+  } else {
+    const v2Config: EpayConfigV2 = {
+      version: 'v2',
+      apiurl: config.apiurl as string || '',
+      pid: config.pid as string || '',
+      platform_public_key: config.platform_public_key as string || '',
+      merchant_private_key: config.merchant_private_key as string || ''
+    }
+
+    if (!v2Config.apiurl || !v2Config.pid || !v2Config.platform_public_key || !v2Config.merchant_private_key) {
+      return { epayConfig: v2Config, valid: false, error: '支付渠道配置不完整' }
+    }
+
+    return { epayConfig: v2Config, valid: true }
+  }
+}
+
+/**
+ * 生成唯一的 tradeNo 标识（用于联合索引）
+ */
+function getTradeNoForIndex(orderNo: string, tradeNo: string | null | undefined): string {
+  if (tradeNo && tradeNo.trim()) {
+    return tradeNo.trim()
+  }
+  return `__NO_TRADE_NO__${orderNo}__${Date.now()}`
+}
+
+function resolveRechargeProviderConfig(
+  providerType: string,
+  currentConfig: Record<string, unknown>,
+  snapshotValue: unknown
+): { config: Record<string, unknown>; source: 'snapshot' | 'provider' } {
+  return resolveRechargeProviderConfigSnapshot(providerType, currentConfig, snapshotValue)
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 计算月均价格
+ */
+function calculateMonthlyPrice(billingPrice: number, billingCycle: number | null): number {
+  const cycle = billingCycle || 1
+  return Number((billingPrice / cycle).toFixed(2))
+}
+
+/**
+ * 计算日均价格
+ */
+function calculateDailyPrice(billingPrice: number, billingCycle: number | null): number {
+  const monthlyPrice = calculateMonthlyPrice(billingPrice, billingCycle)
+  return Number((monthlyPrice / 30).toFixed(2))
+}
+
+const MAX_BATCH_PRICE_UPDATE_INSTANCES = 100
+
+type BatchPriceUpdateItemStatus = 'ready' | 'unchanged' | 'failed'
+
+interface BatchPriceUpdateItem {
+  id: number
+  name: string | null
+  user: { id: number; username: string; balance: number } | null
+  oldPrice: number | null
+  newPrice: number
+  billingCycle: number | null
+  remainingDays: number
+  priceDiff: number
+  discountRate: number
+  status: BatchPriceUpdateItemStatus
+  error?: string
+  instanceVersion?: number
+}
+
+interface BatchPriceUpdateExpectation {
+  instanceId: number
+  version: number
+}
+
+interface BatchPriceUpdateUserImpact {
+  userId: number
+  username: string
+  balanceBefore: number
+  balanceAfter: number
+  totalCharge: number
+  totalRefund: number
+  netDiff: number
+  insufficientBalance: boolean
+}
+
+interface BatchPriceUpdatePreview {
+  summary: {
+    selectedCount: number
+    validCount: number
+    changedCount: number
+    unchangedCount: number
+    failedCount: number
+    totalCharge: number
+    totalRefund: number
+    netAmount: number
+  }
+  canSubmit: boolean
+  items: BatchPriceUpdateItem[]
+  userImpacts: BatchPriceUpdateUserImpact[]
+}
+
+class BatchPriceUpdateError extends Error {
+  statusCode: number
+  preview?: BatchPriceUpdatePreview
+
+  constructor(message: string, statusCode = 400, preview?: BatchPriceUpdatePreview) {
+    super(message)
+    this.name = 'BatchPriceUpdateError'
+    this.statusCode = statusCode
+    this.preview = preview
+  }
+}
+
+function roundMoney(value: number): number {
+  return Number(value.toFixed(2))
+}
+
+function parseBatchPriceUpdateBody(body: unknown): { instanceIds: number[]; newPrice: number; settleBalance: boolean; expectations: BatchPriceUpdateExpectation[] } {
+  if (!body || typeof body !== 'object') {
+    throw new BatchPriceUpdateError('请求参数无效')
+  }
+
+  const input = body as { instanceIds?: unknown; newPrice?: unknown; settleBalance?: unknown; expectations?: unknown }
+  const { instanceIds, newPrice, settleBalance, expectations } = input
+
+  if (!Array.isArray(instanceIds) || instanceIds.length === 0) {
+    throw new BatchPriceUpdateError('请选择要修改价格的实例')
+  }
+
+  if (instanceIds.length > MAX_BATCH_PRICE_UPDATE_INSTANCES) {
+    throw new BatchPriceUpdateError(`单次最多只能修改 ${MAX_BATCH_PRICE_UPDATE_INSTANCES} 个实例`)
+  }
+
+  const ids: number[] = []
+  for (const rawId of instanceIds) {
+    const id = typeof rawId === 'number' ? rawId : Number(rawId)
+    if (!Number.isInteger(id) || id <= 0) {
+      throw new BatchPriceUpdateError('实例ID列表包含无效值')
+    }
+    if (!ids.includes(id)) {
+      ids.push(id)
+    }
+  }
+
+  if (ids.length === 0) {
+    throw new BatchPriceUpdateError('请选择要修改价格的实例')
+  }
+
+  if (typeof newPrice !== 'number' || !Number.isFinite(newPrice) || newPrice < 0 || newPrice > 100000) {
+    throw new BatchPriceUpdateError('价格必须是 0-100000 之间的数字')
+  }
+
+  const parsedExpectations: BatchPriceUpdateExpectation[] = []
+  if (expectations !== undefined) {
+    if (!Array.isArray(expectations)) {
+      throw new BatchPriceUpdateError('预览版本参数无效')
+    }
+
+    const expectedIdSet = new Set(ids)
+    for (const rawExpectation of expectations) {
+      if (!rawExpectation || typeof rawExpectation !== 'object') {
+        throw new BatchPriceUpdateError('预览版本参数无效')
+      }
+
+      const expectation = rawExpectation as { instanceId?: unknown; version?: unknown }
+      const instanceId = typeof expectation.instanceId === 'number'
+        ? expectation.instanceId
+        : Number(expectation.instanceId)
+      const version = typeof expectation.version === 'number'
+        ? expectation.version
+        : Number(expectation.version)
+
+      if (!Number.isInteger(instanceId) || !expectedIdSet.has(instanceId) || !Number.isInteger(version) || version < 0) {
+        throw new BatchPriceUpdateError('预览版本参数无效')
+      }
+
+      if (!parsedExpectations.some(item => item.instanceId === instanceId)) {
+        parsedExpectations.push({ instanceId, version })
+      }
+    }
+  }
+
+  return {
+    instanceIds: ids,
+    newPrice: roundMoney(newPrice),
+    settleBalance: settleBalance !== false,
+    expectations: parsedExpectations
+  }
+}
+
+function summarizeBatchPriceItems(items: BatchPriceUpdateItem[], selectedCount: number): BatchPriceUpdatePreview['summary'] {
+  let totalCharge = 0
+  let totalRefund = 0
+  let changedCount = 0
+  let unchangedCount = 0
+  let failedCount = 0
+
+  for (const item of items) {
+    if (item.status === 'failed') {
+      failedCount += 1
+      continue
+    }
+
+    if (item.status === 'unchanged') {
+      unchangedCount += 1
+    } else {
+      changedCount += 1
+    }
+
+    if (item.priceDiff > 0) {
+      totalCharge += item.priceDiff
+    } else if (item.priceDiff < 0) {
+      totalRefund += Math.abs(item.priceDiff)
+    }
+  }
+
+  totalCharge = roundMoney(totalCharge)
+  totalRefund = roundMoney(totalRefund)
+
+  return {
+    selectedCount,
+    validCount: items.length - failedCount,
+    changedCount,
+    unchangedCount,
+    failedCount,
+    totalCharge,
+    totalRefund,
+    netAmount: roundMoney(totalCharge - totalRefund)
+  }
+}
+
+function buildBatchUserImpacts(items: BatchPriceUpdateItem[]): BatchPriceUpdateUserImpact[] {
+  const impactMap = new Map<number, {
+    userId: number
+    username: string
+    balanceBefore: number
+    totalCharge: number
+    totalRefund: number
+    netDiff: number
+  }>()
+
+  for (const item of items) {
+    if (item.status === 'failed' || !item.user || item.priceDiff === 0) continue
+
+    const existing = impactMap.get(item.user.id) || {
+      userId: item.user.id,
+      username: item.user.username,
+      balanceBefore: item.user.balance,
+      totalCharge: 0,
+      totalRefund: 0,
+      netDiff: 0
+    }
+
+    if (item.priceDiff > 0) {
+      existing.totalCharge += item.priceDiff
+    } else if (item.priceDiff < 0) {
+      existing.totalRefund += Math.abs(item.priceDiff)
+    }
+    existing.netDiff += item.priceDiff
+
+    impactMap.set(item.user.id, existing)
+  }
+
+  return Array.from(impactMap.values()).map(impact => {
+    const totalCharge = roundMoney(impact.totalCharge)
+    const totalRefund = roundMoney(impact.totalRefund)
+    const netDiff = roundMoney(impact.netDiff)
+    const balanceAfter = roundMoney(impact.balanceBefore - netDiff)
+
+    return {
+      userId: impact.userId,
+      username: impact.username,
+      balanceBefore: roundMoney(impact.balanceBefore),
+      balanceAfter,
+      totalCharge,
+      totalRefund,
+      netDiff,
+      insufficientBalance: balanceAfter < -0.0001
+    }
+  }).sort((a, b) => a.username.localeCompare(b.username))
+}
+
+async function buildBatchPriceUpdatePreview(
+  client: typeof prisma | Prisma.TransactionClient,
+  instanceIds: number[],
+  newPrice: number,
+  settleBalance: boolean
+): Promise<BatchPriceUpdatePreview> {
+  const instances = await client.instance.findMany({
+    where: { id: { in: instanceIds } },
+    include: {
+      user: { select: { id: true, username: true, balance: true } }
+    }
+  })
+  const instanceMap = new Map(instances.map(instance => [instance.id, instance]))
+  const items: BatchPriceUpdateItem[] = []
+
+  for (const instanceId of instanceIds) {
+    const instance = instanceMap.get(instanceId)
+
+    if (!instance) {
+      items.push({
+        id: instanceId,
+        name: null,
+        user: null,
+        oldPrice: null,
+        newPrice,
+        billingCycle: null,
+        remainingDays: 0,
+        priceDiff: 0,
+        discountRate: 0,
+        status: 'failed',
+        error: '实例不存在'
+      })
+      continue
+    }
+
+    const user = instance.user
+      ? {
+          id: instance.user.id,
+          username: instance.user.username,
+          balance: Number(instance.user.balance) || 0
+        }
+      : null
+    const oldPrice = Number(instance.billingPrice) || 0
+
+    if (instance.status === 'deleted') {
+      items.push({
+        id: instance.id,
+        name: instance.name,
+        user,
+        oldPrice,
+        newPrice,
+        billingCycle: instance.billingCycle,
+        remainingDays: 0,
+        priceDiff: 0,
+        discountRate: 0,
+        status: 'failed',
+        error: '实例已删除'
+      })
+      continue
+    }
+
+    if (!instance.packagePlanId) {
+      items.push({
+        id: instance.id,
+        name: instance.name,
+        user,
+        oldPrice,
+        newPrice,
+        billingCycle: instance.billingCycle,
+        remainingDays: 0,
+        priceDiff: 0,
+        discountRate: 0,
+        status: 'failed',
+        error: '免费实例不支持修改价格'
+      })
+      continue
+    }
+
+    const quote = await db.calculateInstancePriceAdjustmentQuote(
+      instance,
+      newPrice,
+      settleBalance,
+      '$transaction' in client ? undefined : client
+    )
+    items.push({
+      id: instance.id,
+      name: instance.name,
+      user,
+      oldPrice: quote.oldPrice,
+      newPrice: quote.newPrice,
+      billingCycle: quote.billingCycle,
+      remainingDays: quote.remainingDays,
+      priceDiff: quote.priceDiff,
+      discountRate: quote.discountRate,
+      status: quote.oldPrice === quote.newPrice ? 'unchanged' : 'ready',
+      instanceVersion: instance.version
+    })
+  }
+
+  const summary = summarizeBatchPriceItems(items, instanceIds.length)
+  const userImpacts = buildBatchUserImpacts(items)
+  const canSubmit = summary.validCount > 0 &&
+    summary.failedCount === 0 &&
+    !userImpacts.some(impact => impact.insufficientBalance)
+
+  return {
+    summary,
+    canSubmit,
+    items,
+    userImpacts
+  }
+}
+
+export default async function adminBillingRoutes(app: FastifyInstance): Promise<void> {
+  // ==================== 计费概览 ====================
+
+  // GET /api/admin/billing/overview - 计费概览
+  app.get('/api/admin/billing/overview', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      // 使用业务时区（Asia/Shanghai）计算日期边界
+      const { start: today, end: tomorrow } = getTodayRange()
+      const thisMonthStart = getThisMonthStart()
+      const { start: lastMonthStart, end: lastMonthEnd } = getLastMonthRange()
+      const now = new Date()
+      const revenueTypes: Array<'newPurchase' | 'renew' | 'upgrade' | 'transfer_fee'> = ['newPurchase', 'renew', 'upgrade', 'transfer_fee']
+      const expiringDeadline = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
+
+      const revenueBaseWhere: Prisma.InstanceBillingRecordWhereInput = {
+        type: { in: revenueTypes }
+      }
+      const directRevenueWhere: Prisma.InstanceBillingRecordWhereInput = {
+        ...revenueBaseWhere,
+        instance: {
+          is: {
+            host: {
+              is: {
+                user: {
+                  is: {
+                    role: 'admin'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      const hostedRevenueWhere: Prisma.InstanceBillingRecordWhereInput = {
+        ...revenueBaseWhere,
+        instance: {
+          is: {
+            host: {
+              is: {
+                user: {
+                  is: {
+                    role: { not: 'admin' }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      const [
+        totalRevenue,
+        thisMonthRevenue,
+        lastMonthRevenue,
+        todayRevenue,
+        totalDirectRevenue,
+        totalHostedRevenue,
+        thisMonthDirectRevenue,
+        thisMonthHostedRevenue,
+        todayDirectRevenue,
+        todayHostedRevenue,
+        totalRefunds,
+        paidInstancesCount,
+        activePaidInstancesCount,
+        suspendedCount,
+        expiringCount,
+        rechargeStats,
+        thisMonthRecharge,
+        todayRecharge,
+        affStats,
+        thisMonthAff,
+        affConverted,
+        affPendingConvert
+      ] = await prisma.$transaction([
+        prisma.instanceBillingRecord.aggregate({
+          where: revenueBaseWhere,
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...revenueBaseWhere,
+            createdAt: { gte: thisMonthStart }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...revenueBaseWhere,
+            createdAt: { gte: lastMonthStart, lte: lastMonthEnd }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...revenueBaseWhere,
+            createdAt: { gte: today, lt: tomorrow }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: directRevenueWhere,
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: hostedRevenueWhere,
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...directRevenueWhere,
+            createdAt: { gte: thisMonthStart }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...hostedRevenueWhere,
+            createdAt: { gte: thisMonthStart }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...directRevenueWhere,
+            createdAt: { gte: today, lt: tomorrow }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: {
+            ...hostedRevenueWhere,
+            createdAt: { gte: today, lt: tomorrow }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.instanceBillingRecord.aggregate({
+          where: { type: 'refund' },
+          _sum: { amount: true }
+        }),
+        prisma.instance.count({
+          where: {
+            packagePlanId: { not: null },
+            status: { notIn: ['deleted'] }
+          }
+        }),
+        prisma.instance.count({
+          where: {
+            packagePlanId: { not: null },
+            status: { notIn: ['deleted', 'suspended'] },
+            expiresAt: { gt: now }
+          }
+        }),
+        prisma.instance.count({
+          where: {
+            packagePlanId: { not: null },
+            status: 'suspended'
+          }
+        }),
+        prisma.instance.count({
+          where: {
+            packagePlanId: { not: null },
+            expiresAt: {
+              not: null,
+              gt: now,
+              lte: expiringDeadline
+            },
+            status: { notIn: ['deleted', 'suspended'] }
+          }
+        }),
+        prisma.rechargeRecord.aggregate({
+          where: { status: 'completed' },
+          _sum: { amount: true },
+          _count: { id: true }
+        }),
+        prisma.rechargeRecord.aggregate({
+          where: {
+            status: 'completed',
+            createdAt: { gte: thisMonthStart }
+          },
+          _sum: { amount: true },
+          _count: { id: true }
+        }),
+        prisma.rechargeRecord.aggregate({
+          where: {
+            status: 'completed',
+            createdAt: { gte: today, lt: tomorrow }
+          },
+          _sum: { amount: true },
+          _count: { id: true }
+        }),
+        prisma.affLog.aggregate({
+          where: { type: { in: ['new_purchase', 'renew'] } },
+          _sum: { amount: true },
+          _count: { id: true }
+        }),
+        prisma.affLog.aggregate({
+          where: {
+            type: { in: ['new_purchase', 'renew'] },
+            createdAt: { gte: thisMonthStart }
+          },
+          _sum: { amount: true }
+        }),
+        prisma.affWithdrawal.aggregate({
+          where: { status: 'approved' },
+          _sum: { amount: true }
+        }),
+        prisma.affWithdrawal.count({
+          where: { status: 'pending' }
+        })
+      ])
+
+      // 辅助函数：安全转换 Prisma Decimal 为数字
+      const toNumber = (val: unknown): number => {
+        if (val === null || val === undefined) return 0
+        return parseFloat(String(val))
+      }
+
+      return {
+        overview: {
+          totalRevenue: toNumber(totalRevenue._sum?.amount),
+          thisMonthRevenue: toNumber(thisMonthRevenue._sum?.amount),
+          lastMonthRevenue: toNumber(lastMonthRevenue._sum?.amount),
+          todayRevenue: toNumber(todayRevenue._sum?.amount),
+          totalRefunds: Math.abs(toNumber(totalRefunds._sum?.amount)),
+          netRevenue: toNumber(totalRevenue._sum?.amount) + toNumber(totalRefunds._sum?.amount),
+          paidInstancesCount,
+          activePaidInstancesCount,
+          suspendedCount,
+          expiringCount,
+          revenueMix: {
+            direct: {
+              totalAmount: toNumber(totalDirectRevenue._sum?.amount),
+              thisMonthAmount: toNumber(thisMonthDirectRevenue._sum?.amount),
+              todayAmount: toNumber(todayDirectRevenue._sum?.amount)
+            },
+            hosted: {
+              totalAmount: toNumber(totalHostedRevenue._sum?.amount),
+              thisMonthAmount: toNumber(thisMonthHostedRevenue._sum?.amount),
+              todayAmount: toNumber(todayHostedRevenue._sum?.amount)
+            }
+          },
+          // 充值统计
+          recharge: {
+            totalAmount: toNumber(rechargeStats._sum?.amount),
+            totalCount: rechargeStats._count?.id || 0,
+            thisMonthAmount: toNumber(thisMonthRecharge._sum?.amount),
+            thisMonthCount: thisMonthRecharge._count?.id || 0,
+            todayAmount: toNumber(todayRecharge._sum?.amount),
+            todayCount: todayRecharge._count?.id || 0
+          },
+          // AFF 返利统计
+          aff: {
+            totalCommission: toNumber(affStats._sum?.amount),
+            totalOrders: affStats._count?.id || 0,
+            thisMonthCommission: toNumber(thisMonthAff._sum?.amount),
+            totalConverted: toNumber(affConverted._sum?.amount),
+            pendingConvertCount: affPendingConvert
+          }
+        }
+      }
+    } catch (error) {
+      request.log.error(error, '获取计费概览失败')
+      return reply.status(500).send({ error: '获取计费概览失败' })
+    }
+  })
+
+  // GET /api/admin/billing/records - 所有扣费记录
+  app.get('/api/admin/billing/records', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const { page, pageSize, type, userId, instanceId } = request.query as {
+        page?: string
+        pageSize?: string
+        type?: string
+        userId?: string
+        instanceId?: string
+      }
+
+      const pageNum = page ? parseInt(page, 10) : 1
+      const size = Math.min(pageSize ? parseInt(pageSize, 10) : 20, 100)
+      const skip = (pageNum - 1) * size
+
+      const where: Record<string, unknown> = {}
+      if (type) where.type = type
+      if (userId) where.userId = parseInt(userId, 10)
+      if (instanceId) where.instanceId = parseInt(instanceId, 10)
+
+      const [records, total] = await Promise.all([
+        prisma.instanceBillingRecord.findMany({
+          where,
+          include: {
+            instance: { select: { id: true, name: true } }
+          },
+          orderBy: { createdAt: 'desc' },
+          skip,
+          take: size
+        }),
+        prisma.instanceBillingRecord.count({ where })
+      ])
+
+      // 查询用户信息
+      const userIds = [...new Set(records.map(r => r.userId))]
+      const users = await prisma.user.findMany({
+        where: { id: { in: userIds } },
+        select: { id: true, username: true }
+      })
+      const userMap = new Map(users.map(u => [u.id, u]))
+
+      return {
+        records: records.map(r => ({
+          id: r.id,
+          type: r.type,
+          amount: Number(r.amount),
+          months: r.months,
+          periodStart: r.periodStart?.toISOString(),
+          periodEnd: r.periodEnd?.toISOString(),
+          remark: r.remark,
+          createdAt: r.createdAt.toISOString(),
+          instance: r.instance,
+          user: userMap.get(r.userId) || null
+        })),
+        total,
+        page: pageNum,
+        pageSize: size
+      }
+    } catch (error) {
+      request.log.error(error, '获取扣费记录失败')
+      return reply.status(500).send({ error: '获取扣费记录失败' })
+    }
+  })
+
+  // ==================== 管理员封停/解封 ====================
+
+  // POST /api/admin/instances/:id/suspend - 管理员封停
+  app.post('/api/admin/instances/:id/suspend', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const admin = request.user!
+      const { id } = request.params as { id: string }
+      const { reason } = request.body as { reason?: string }
+
+      const instanceId = parseInt(id, 10)
+      if (isNaN(instanceId)) {
+        return reply.status(400).send({ error: '无效的实例ID' })
+      }
+
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: { user: { select: { id: true, username: true } } }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      if (instance.status === 'suspended') {
+        return reply.status(400).send({ error: '实例已被封停' })
+      }
+
+      // 如果正在运行，先停止
+      if (instance.status === 'running') {
+        try {
+          const host = await db.getHostById(instance.hostId)
+          if (host) {
+            const { getIncusClient, stopInstance } = await import('../lib/incus/index.js')
+            const client = await getIncusClient(host)
+            await stopInstance(client, instance.incusId)
+          }
+        } catch (err) {
+          request.log.warn(err, '停止实例失败')
+        }
+      }
+
+      // 更新为封停状态
+      await db.suspendInstanceManually(instanceId, admin.id, reason || '管理员封停')
+
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_suspend',
+        `Admin suspended instance "${instance.name}" (User: ${instance.user?.username}): ${reason || '管理员封停'}`,
+        'success',
+        { instanceId }
+      )
+
+      // 通知用户
+      await sendNotification(instance.userId, 'instance_suspended', {
+        instanceName: instance.name,
+        reason: reason || '管理员封停'
+      })
+
+      return { success: true, message: '实例已封停' }
+    } catch (error) {
+      request.log.error(error, '封停实例失败')
+      return reply.status(500).send({ error: '封停实例失败' })
+    }
+  })
+
+  // POST /api/admin/instances/:id/unsuspend - 管理员解封
+  app.post('/api/admin/instances/:id/unsuspend', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const admin = request.user!
+      const { id } = request.params as { id: string }
+
+      const instanceId = parseInt(id, 10)
+      if (isNaN(instanceId)) {
+        return reply.status(400).send({ error: '无效的实例ID' })
+      }
+
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: { user: { select: { id: true, username: true } } }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status !== 'suspended') {
+        return reply.status(400).send({ error: '实例未被封停' })
+      }
+
+      // 解除封停
+      await db.unsuspendInstance(instanceId)
+
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_unsuspend',
+        `Admin unsuspended instance "${instance.name}" (User: ${instance.user?.username})`,
+        'success',
+        { instanceId }
+      )
+
+      // 通知用户
+      await sendNotification(instance.userId, 'instance_unsuspended', {
+        instanceName: instance.name
+      })
+
+      return { success: true, message: '实例已解封' }
+    } catch (error) {
+      request.log.error(error, '解封实例失败')
+      return reply.status(500).send({ error: '解封实例失败' })
+    }
+  })
+
+  // ==================== 管理员手动延期 ====================
+
+  // POST /api/admin/instances/:id/extend - 手动延期
+  app.post('/api/admin/instances/:id/extend', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const admin = request.user!
+      const { id } = request.params as { id: string }
+      const { days, reason, freeExtend } = request.body as {
+        days: number
+        reason?: string
+        freeExtend?: boolean  // 是否免费延期
+      }
+
+      const instanceId = parseInt(id, 10)
+      if (isNaN(instanceId) || !days || days < 1 || days > 365) {
+        return reply.status(400).send({ error: '参数无效，延期天数必须在 1-365 之间' })
+      }
+
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: { user: { select: { id: true, username: true, balance: true } } }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      // 只有付费实例可以延期
+      if (!instance.packagePlanId || !instance.billingPrice) {
+        return reply.status(400).send({ error: '免费实例无需延期' })
+      }
+
+      // 计算延期费用（按天价计算）
+      const dailyPrice = calculateDailyPrice(Number(instance.billingPrice), instance.billingCycle)
+      const extendAmount = freeExtend ? 0 : Number((dailyPrice * days).toFixed(2))
+
+      // 计算新的到期时间
+      const baseDate = instance.expiresAt && instance.expiresAt > new Date()
+        ? instance.expiresAt
+        : new Date()
+      const newExpiresAt = new Date(baseDate.getTime() + days * 24 * 60 * 60 * 1000)
+
+      // 如果不是免费延期，需要检查用户余额并扣费
+      if (!freeExtend && extendAmount > 0) {
+        const userBalance = Number(instance.user!.balance)
+        if (userBalance < extendAmount) {
+          return reply.status(400).send({ error: `用户余额不足，需要 ${extendAmount} 元，当前余额 ${userBalance} 元` })
+        }
+
+        // 扣费并延期
+        await prisma.$transaction(async (tx) => {
+          const oldBalance = Number(instance.user!.balance)
+          const newBalance = oldBalance - extendAmount
+
+          // 扣除余额
+          await tx.user.update({
+            where: { id: instance.userId },
+            data: { balance: { decrement: extendAmount } }
+          })
+
+          // 记录余额日志
+          const balanceLog = await tx.balanceLog.create({
+            data: {
+              userId: instance.userId,
+              type: 'consume',
+              amount: -extendAmount,
+              balanceBefore: oldBalance,
+              balanceAfter: newBalance,
+              instanceId,
+              remark: `管理员延期 ${days} 天：${reason || '手动延期'}`
+            }
+          })
+
+          // 更新到期时间
+          await tx.instance.update({
+            where: { id: instanceId },
+            data: {
+              expiresAt: newExpiresAt,
+              // 如果是因到期被封停，解除封停
+              ...(instance.status === 'suspended' && instance.suspendReason === 'expired' ? {
+                status: 'stopped',
+                suspendedAt: null,
+                suspendedBy: null,
+                suspendReason: null
+              } : {})
+            }
+          })
+
+          // 记录扣费记录
+          await tx.instanceBillingRecord.create({
+            data: {
+              instanceId,
+              userId: instance.userId,
+              type: 'renew',  // 使用 renew 类型表示延期
+              amount: extendAmount,
+              months: 0,
+              periodStart: baseDate,
+              periodEnd: newExpiresAt,
+              balanceLogId: balanceLog.id,
+              remark: `管理员延期 ${days} 天（操作者: ${admin.username}）`
+            }
+          })
+        })
+      } else {
+        // 免费延期
+        await prisma.$transaction(async (tx) => {
+          // 更新到期时间
+          await tx.instance.update({
+            where: { id: instanceId },
+            data: {
+              expiresAt: newExpiresAt,
+              // 如果是因到期被封停，解除封停
+              ...(instance.status === 'suspended' && instance.suspendReason === 'expired' ? {
+                status: 'stopped',
+                suspendedAt: null,
+                suspendedBy: null,
+                suspendReason: null
+              } : {})
+            }
+          })
+
+          // 记录免费延期记录
+          await tx.instanceBillingRecord.create({
+            data: {
+              instanceId,
+              userId: instance.userId,
+              type: 'renew',  // 使用 renew 类型表示免费延期
+              amount: 0,
+              months: 0,
+              periodStart: baseDate,
+              periodEnd: newExpiresAt,
+              remark: `管理员免费延期 ${days} 天（操作者: ${admin.username}）：${reason || '免费延期'}`
+            }
+          })
+        })
+      }
+
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_extend',
+        `Admin extended instance "${instance.name}" by ${days} days (User: ${instance.user?.username}, Amount: ${extendAmount})`,
+        'success',
+        { instanceId }
+      )
+
+      // 通知用户
+      await sendNotification(instance.userId, 'instance_extended', {
+        instanceName: instance.name,
+        days,
+        newExpiresAt: newExpiresAt.toISOString(),
+        amount: extendAmount
+      })
+
+      return {
+        success: true,
+        message: `实例已延期 ${days} 天`,
+        amount: extendAmount,
+        newExpiresAt: newExpiresAt.toISOString()
+      }
+    } catch (error) {
+      request.log.error(error, '延期实例失败')
+      return reply.status(500).send({ error: '延期实例失败' })
+    }
+  })
+
+  // ==================== 管理员退款 ====================
+
+  // POST /api/admin/instances/:id/refund - 管理员退款
+  app.post('/api/admin/instances/:id/refund', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const admin = request.user!
+      const { id } = request.params as { id: string }
+      const { amount, reason } = request.body as {
+        amount: number
+        reason: string
+      }
+
+      const instanceId = parseInt(id, 10)
+      if (isNaN(instanceId)) {
+        return reply.status(400).send({ error: '无效的实例ID' })
+      }
+
+      if (!amount || amount <= 0) {
+        return reply.status(400).send({ error: '退款金额必须大于0' })
+      }
+
+      if (!reason || reason.trim().length < 2) {
+        return reply.status(400).send({ error: '请填写退款原因' })
+      }
+
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: { user: { select: { id: true, username: true, balance: true } } }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      // 计算可退款上限
+      const { maxRefundable } = await getMaxRefundable(instanceId)
+
+      if (amount > maxRefundable) {
+        return reply.status(400).send({
+          error: `退款金额超过可退上限，最多可退 ${maxRefundable.toFixed(2)} 元`
+        })
+      }
+
+      // 执行退款
+      await prisma.$transaction(async (tx) => {
+        const oldBalance = Number(instance.user!.balance)
+        const newBalance = oldBalance + amount
+
+        // 增加用户余额
+        await tx.user.update({
+          where: { id: instance.userId },
+          data: { balance: { increment: amount } }
+        })
+
+        // 记录余额变动
+        const balanceLog = await tx.balanceLog.create({
+          data: {
+            userId: instance.userId,
+            type: 'refund',
+            amount: amount,
+            balanceBefore: oldBalance,
+            balanceAfter: newBalance,
+            instanceId,
+            remark: `管理员退款：${reason}`
+          }
+        })
+
+        // 记录退款记录（负数表示退款）
+        await tx.instanceBillingRecord.create({
+          data: {
+            instanceId,
+            userId: instance.userId,
+            type: 'refund',
+            amount: -amount,
+            months: 0,
+            periodStart: new Date(),
+            periodEnd: new Date(),
+            balanceLogId: balanceLog.id,
+            remark: `管理员退款：${reason}（操作者: ${admin.username}）`
+          }
+        })
+      })
+
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_refund',
+        `Admin refunded ${amount} for instance "${instance.name}" (User: ${instance.user?.username}): ${reason}`,
+        'success',
+        { instanceId }
+      )
+
+      // 通知用户
+      await sendNotification(instance.userId, 'refund_completed', {
+        instanceName: instance.name,
+        amount,
+        reason
+      })
+
+      return {
+        success: true,
+        message: `已退款 ${amount} 元`,
+        amount,
+        maxRefundable: maxRefundable - amount
+      }
+    } catch (error) {
+      request.log.error(error, '退款失败')
+      return reply.status(500).send({ error: '退款失败' })
+    }
+  })
+
+  // ==================== 管理员删除并退款 ====================
+
+  // POST /api/admin/instances/:id/delete-and-refund - 管理员删除实例并退款
+  app.post('/api/admin/instances/:id/delete-and-refund', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const admin = request.user!
+    const { id } = request.params as { id: string }
+    const { refundType, reason, databaseOnly } = request.body as {
+      refundType: 'remaining' | 'full'  // remaining=按剩余价值, full=全额退款
+      reason: string
+      databaseOnly?: boolean  // 仅数据库删除，跳过 Incus 操作
+    }
+
+    const instanceId = parseInt(id, 10)
+    if (isNaN(instanceId)) {
+      return reply.status(400).send({ error: '无效的实例ID' })
+    }
+
+    if (!reason || reason.trim().length < 2) {
+      return reply.status(400).send({ error: '请填写删除原因' })
+    }
+
+    if (!refundType || !['remaining', 'full'].includes(refundType)) {
+      return reply.status(400).send({ error: '请选择退款方式' })
+    }
+
+    try {
+      // 1. 获取实例信息
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: {
+          user: { select: { id: true, username: true, balance: true } },
+          host: { select: { id: true, name: true } }
+        }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      // 3. 计算可退款金额（仅用于全额退款模式）
+      const { maxRefundable } = await getMaxRefundable(instanceId)
+
+      // 4. 计算退款金额
+      let refundAmount = 0
+      if (refundType === 'full') {
+        // 全额退款：退还所有已消费金额（受消费记录限制）
+        refundAmount = maxRefundable
+      } else {
+        const refundQuote = await db.calculateInstanceRemainingRefundQuote({
+          id: instanceId,
+          billingPrice: instance.billingPrice,
+          billingCycle: instance.billingCycle,
+          expiresAt: instance.expiresAt,
+          packagePlanId: instance.packagePlanId
+        })
+        refundAmount = refundQuote.refundableValue
+      }
+
+      const claimed = await claimInstanceForAdminDelete(instanceId, instance.status)
+      if (!claimed) {
+        return reply.status(409).send({ error: '实例正在删除或已删除' })
+      }
+
+      // 先完成账务结算；如果账务失败，恢复实例状态，避免已删除但未退款。
+      if (refundAmount > 0) {
+        try {
+          await prisma.$transaction(async (tx) => {
+            const currentUser = await tx.user.findUnique({
+              where: { id: instance.userId },
+              select: { balance: true }
+            })
+            const oldBalance = Number(currentUser?.balance || 0)
+            const newBalance = oldBalance + refundAmount
+
+            await tx.user.update({
+              where: { id: instance.userId },
+              data: { balance: { increment: refundAmount } }
+            })
+
+            const balanceLog = await tx.balanceLog.create({
+              data: {
+                userId: instance.userId,
+                type: 'refund',
+                amount: refundAmount,
+                balanceBefore: oldBalance,
+                balanceAfter: newBalance,
+                instanceId,
+                remark: `管理员删除并退款（${refundType === 'full' ? '全额' : '按剩余价值'}）：${reason}`
+              }
+            })
+
+            await tx.instanceBillingRecord.create({
+              data: {
+                instanceId,
+                userId: instance.userId,
+                type: 'refund',
+                amount: -refundAmount,
+                months: 0,
+                periodStart: new Date(),
+                periodEnd: new Date(),
+                balanceLogId: balanceLog.id,
+                remark: `管理员删除并退款（${refundType === 'full' ? '全额' : '按剩余价值'}）：${reason}（操作者: ${admin.username}）`
+              }
+            })
+          })
+        } catch (refundError) {
+          await prisma.instance.updateMany({
+            where: { id: instanceId, status: 'deleted' },
+            data: { status: instance.status }
+          })
+          throw refundError
+        }
+      }
+
+      // 4. 删除实例（复用现有逻辑）
+      // 4.1 停止实例（databaseOnly 模式下跳过）
+      if (instance.status === 'running' && !databaseOnly) {
+        try {
+          const host = await db.getHostById(instance.hostId)
+          if (host) {
+            const { getIncusClient, stopInstance } = await import('../lib/incus/index.js')
+            const client = await getIncusClient(host)
+            await stopInstance(client, instance.incusId, true)
+          }
+        } catch (err) {
+          request.log.warn(err, '停止实例失败')
+        }
+      }
+
+      // 4.2 删除端口映射
+      const portMappings = await prisma.portMapping.findMany({ where: { instanceId } })
+
+      // 4.3 清理关联数据
+      try {
+        await prisma.snapshot.deleteMany({ where: { instanceId } })
+        await prisma.backup.deleteMany({ where: { instanceId } })
+        await prisma.portMapping.deleteMany({ where: { instanceId } })
+        await prisma.proxySite.deleteMany({ where: { instanceId } })
+        await prisma.dailyTraffic.deleteMany({ where: { instanceId } })
+        await prisma.ipAddress.deleteMany({ where: { instanceId } })
+        await prisma.ipv6Subnet.deleteMany({ where: { instanceId } })
+        await prisma.restoreTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+        await prisma.backupUploadTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+        await prisma.instanceTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+        await prisma.instanceTransfer.updateMany({
+          where: { instanceId, status: 'pending' },
+          data: { status: 'cancelled', cancelledAt: new Date() }
+        })
+      } catch (cleanupErr) {
+        request.log.warn(cleanupErr, '清理关联数据失败')
+      }
+
+      // 4.4 从 Incus 删除实例（databaseOnly 模式下跳过）
+      if (!databaseOnly) {
+        try {
+          const host = await db.getHostById(instance.hostId)
+          if (host) {
+            const { getIncusClient, deleteInstance } = await import('../lib/incus/index.js')
+            const client = await getIncusClient(host)
+            await deleteInstance(client, instance.incusId)
+          }
+        } catch (incusErr) {
+          request.log.error(incusErr, 'Incus 删除实例失败')
+          // 继续执行，即使 Incus 删除失败也要更新数据库状态
+        }
+      }
+
+      // 4.6 释放宿主机资源
+      const portMappingsCount = portMappings?.length || 0
+      await db.rollbackResources({
+        hostId: instance.hostId,
+        cpu: instance.cpu,
+        memory: instance.memory,
+        disk: instance.disk,
+        portCount: portMappingsCount
+      })
+
+      // 重新计算宿主机资源使用量
+      const usedResources = await db.calculateHostResourcesFromInstances(instance.hostId)
+      const actualPortsUsed = await prisma.portMapping.count({
+        where: {
+          instance: {
+            hostId: instance.hostId,
+            status: { not: 'deleted' }
+          }
+        }
+      })
+      await db.updateHostResources(instance.hostId, {
+        cpuUsed: usedResources.cpuUsed,
+        memoryUsed: usedResources.memoryUsed,
+        diskUsed: usedResources.diskUsed
+      })
+      await prisma.host.update({
+        where: { id: instance.hostId },
+        data: { natPortsUsedCount: actualPortsUsed }
+      })
+
+      // 6. 记录操作日志
+      await createLog(
+        admin.id,
+        'admin',
+        databaseOnly ? 'instance.admin_delete_refund_db_only' : 'instance.admin_delete_refund',
+        `Admin deleted${databaseOnly ? ' (database only)' : ''} and refunded instance "${instance.name}" (User: ${instance.user?.username}, RefundType: ${refundType}, Amount: ¥${refundAmount.toFixed(2)}): ${reason}`,
+        'success',
+        { instanceId }
+      )
+
+      // 7. 通知用户
+      await sendNotification(instance.userId, 'instance_deleted_refunded', {
+        instanceName: instance.name,
+        refundAmount,
+        refundType: refundType === 'full' ? '全额退款' : '按剩余价值退款',
+        reason
+      })
+
+      try {
+        const targetUser = await db.findUserById(instance.userId)
+        if (targetUser?.email) {
+          await sendInstanceDestroyRefundEmail(targetUser.email, {
+            username: targetUser.username,
+            instanceName: instance.name,
+            refundAmount,
+            refundType: refundType === 'full' ? '全额退款' : '按剩余价值退款',
+            reason,
+            isUserDestroy: false
+          })
+        }
+      } catch (emailErr) {
+        request.log.warn(emailErr, '删除退款邮件发送失败')
+      }
+
+      const modeText = databaseOnly ? '（仅数据库）' : ''
+      return {
+        success: true,
+        message: `实例已删除${modeText}${refundAmount > 0 ? `，已退款 ¥${refundAmount.toFixed(2)}` : ''}`,
+        refundAmount,
+        refundType
+      }
+    } catch (error) {
+      request.log.error(error, '删除并退款失败')
+      return reply.status(500).send({ error: '删除并退款失败' })
+    }
+  })
+
+  // ==================== 管理员应用AFF优惠码 ====================
+
+  // POST /api/admin/instances/:id/apply-aff - 为实例应用AFF优惠码
+  app.post('/api/admin/instances/:id/apply-aff', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const admin = request.user!
+    const { id } = request.params as { id: string }
+    const { affCode: affCodeInput } = request.body as { affCode: string }
+
+    const instanceId = parseInt(id, 10)
+    if (isNaN(instanceId)) {
+      return reply.status(400).send({ error: '无效的实例ID' })
+    }
+
+    if (!affCodeInput || affCodeInput.trim().length < 3) {
+      return reply.status(400).send({ error: '请输入有效的AFF优惠码' })
+    }
+
+    try {
+      // 1. 获取实例信息
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: {
+          user: { select: { id: true, username: true } },
+          affBinding: true
+        }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      if (!instance.packagePlanId) {
+        return reply.status(400).send({ error: '免费实例不支持应用优惠码' })
+      }
+
+      // 2. 检查是否已有AFF绑定
+      if (instance.affBinding) {
+        return reply.status(400).send({ error: '该实例已绑定优惠码，无法重复应用' })
+      }
+
+      // 3. 验证AFF码
+      const affCode = await prisma.affCode.findUnique({
+        where: { code: affCodeInput.trim().toUpperCase() },
+        include: {
+          user: { select: { id: true, username: true } }
+        }
+      })
+
+      if (!affCode) {
+        return reply.status(400).send({ error: '优惠码不存在' })
+      }
+
+      // 4. 检查AFF码创建者不能是实例所有者（防止自返利）
+      if (affCode.userId === instance.userId) {
+        return reply.status(400).send({ error: '不能为用户应用其自己的优惠码' })
+      }
+
+      // 5. 创建AFF绑定
+      await db.createAffBinding(instanceId, affCode.id)
+
+      // 6. 记录操作日志
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_apply_aff',
+        `Admin applied AFF code "${affCode.code}" (Owner: ${affCode.user?.username}) to instance "${instance.name}" (User: ${instance.user?.username})`,
+        'success',
+        { instanceId }
+      )
+
+      // 7. 通知用户
+      await sendNotification(instance.userId, 'aff_applied', {
+        instanceName: instance.name,
+        discountPercent: Math.round(Number(affCode.discountRate) * 100)
+      })
+
+      return {
+        success: true,
+        message: `已为实例应用 ${Math.round(Number(affCode.discountRate) * 100)}% 续费折扣`,
+        discountRate: Number(affCode.discountRate)
+      }
+    } catch (error) {
+      request.log.error(error, '应用AFF优惠码失败')
+      return reply.status(500).send({ error: '应用AFF优惠码失败' })
+    }
+  })
+
+  // ==================== 修改实例价格 ====================
+
+  // POST /api/admin/instances/:id/update-price - 修改实例专属价格
+  app.post('/api/admin/instances/:id/update-price', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const admin = request.user!
+    const { id } = request.params as { id: string }
+
+    if (!request.body || typeof request.body !== 'object') {
+      return reply.status(400).send({ error: '请求参数无效' })
+    }
+
+    const { newPrice, settleBalance, expectedVersion } = request.body as {
+      newPrice: number  // 新的单周期价格（元）
+      settleBalance: boolean  // 是否结算差价
+      expectedVersion?: number
+    }
+
+    const instanceId = parseInt(id, 10)
+    if (isNaN(instanceId)) {
+      return reply.status(400).send({ error: '无效的实例ID' })
+    }
+
+    // 验证新价格
+    if (typeof newPrice !== 'number' || !Number.isFinite(newPrice) || newPrice < 0 || newPrice > 100000) {
+      return reply.status(400).send({ error: '价格必须是 0-100000 之间的数字' })
+    }
+
+    if (expectedVersion !== undefined && (!Number.isInteger(expectedVersion) || expectedVersion < 0)) {
+      return reply.status(400).send({ error: '预览版本参数无效' })
+    }
+
+    try {
+      // 1. 获取实例信息（包含 AFF 绑定）
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: {
+          user: { select: { id: true, username: true, balance: true } },
+          packagePlan: { select: { id: true, name: true, price: true, billingCycle: true } },
+          affBinding: {
+            select: {
+              affCode: { select: { discountRate: true, enabled: true } }
+            }
+          }
+        }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      if (!instance.packagePlanId) {
+        return reply.status(400).send({ error: '免费实例不支持修改价格' })
+      }
+
+      const oldPrice = Number(instance.billingPrice) || 0
+      const roundedNewPrice = Number(newPrice.toFixed(2))
+
+      if (Number.isInteger(expectedVersion) && instance.version !== expectedVersion) {
+        return reply.status(409).send({ error: '实例计费信息已变化，请刷新后重试' })
+      }
+
+      // 如果价格没有变化，直接返回
+      if (oldPrice === roundedNewPrice) {
+        return { success: true, message: '价格未变更', priceDiff: 0 }
+      }
+
+      let priceDiff = 0
+      let remainingDays = 0
+      let billingCycle = instance.billingCycle || 1
+
+      // 2. 执行事务：重新读取、重新报价、并发检查、价格更新和余额结算
+      await prisma.$transaction(async (tx) => {
+        const currentInstance = await tx.instance.findUnique({
+          where: { id: instanceId },
+          include: {
+            user: { select: { id: true, username: true, balance: true } }
+          }
+        })
+
+        if (!currentInstance) {
+          throw new BatchPriceUpdateError('实例不存在', 404)
+        }
+
+        if (currentInstance.status === 'deleted') {
+          throw new BatchPriceUpdateError('实例已删除')
+        }
+
+        if (!currentInstance.packagePlanId) {
+          throw new BatchPriceUpdateError('免费实例不支持修改价格')
+        }
+
+        const currentOldPrice = Number(currentInstance.billingPrice) || 0
+        const comparisonVersion = Number.isInteger(expectedVersion) ? expectedVersion : instance.version
+        if (currentOldPrice !== oldPrice || currentInstance.version !== comparisonVersion) {
+          throw new BatchPriceUpdateError('实例计费信息已变化，请刷新后重试', 409)
+        }
+
+        const quote = await db.calculateInstancePriceAdjustmentQuote(currentInstance, roundedNewPrice, settleBalance, tx)
+        priceDiff = quote.priceDiff
+        remainingDays = quote.remainingDays
+        billingCycle = quote.billingCycle
+
+        // 检查用户余额（如果需要补交）
+        const userBalance = Number(currentInstance.user!.balance)
+        if (priceDiff > 0 && priceDiff > userBalance) {
+          throw new BatchPriceUpdateError(`用户余额不足，需补交 ¥${priceDiff.toFixed(2)}，当前余额 ¥${userBalance.toFixed(2)}`)
+        }
+
+        // 更新实例价格
+        const instanceUpdateResult = await tx.instance.updateMany({
+          where: {
+            id: instanceId,
+            version: currentInstance.version
+          },
+          data: {
+            billingPrice: roundedNewPrice,
+            version: { increment: 1 }
+          }
+        })
+
+        if (instanceUpdateResult.count !== 1) {
+          throw new BatchPriceUpdateError('实例计费信息已变化，请刷新后重试', 409)
+        }
+
+        // 如果需要结算差价
+        if (settleBalance && priceDiff !== 0) {
+          let balanceBefore = userBalance
+          let balanceAfter = balanceBefore - priceDiff
+
+          // 更新用户余额
+          if (priceDiff > 0) {
+            const userUpdateResult = await tx.user.updateMany({
+              where: {
+                id: currentInstance.userId,
+                balance: { gte: priceDiff }
+              },
+              data: { balance: { decrement: priceDiff } }
+            })
+
+            if (userUpdateResult.count !== 1) {
+              throw new BatchPriceUpdateError(`用户余额不足，需补交 ¥${priceDiff.toFixed(2)}`)
+            }
+
+            const updatedUser = await tx.user.findUnique({
+              where: { id: currentInstance.userId },
+              select: { balance: true }
+            })
+            balanceAfter = Number(updatedUser?.balance || 0)
+            balanceBefore = roundMoney(balanceAfter + priceDiff)
+          } else {
+            const updatedUser = await tx.user.update({
+              where: { id: currentInstance.userId },
+              data: { balance: { increment: Math.abs(priceDiff) } },
+              select: { balance: true }
+            })
+            balanceAfter = Number(updatedUser.balance)
+            balanceBefore = roundMoney(balanceAfter - Math.abs(priceDiff))
+          }
+
+          // 记录余额变动日志
+          const balanceLog = await tx.balanceLog.create({
+            data: {
+              userId: currentInstance.userId,
+              type: priceDiff > 0 ? 'consume' : 'refund',
+              amount: -priceDiff,
+              balanceBefore,
+              balanceAfter,
+              instanceId,
+              remark: priceDiff > 0
+                ? `管理员调整实例价格，补交差价 ¥${priceDiff.toFixed(2)}`
+                : `管理员调整实例价格，退还差价 ¥${Math.abs(priceDiff).toFixed(2)}`
+            }
+          })
+
+          // 记录计费变动
+          await tx.instanceBillingRecord.create({
+            data: {
+              instanceId,
+              userId: currentInstance.userId,
+              type: priceDiff > 0 ? 'upgrade' : 'refund',
+              amount: priceDiff > 0 ? Math.abs(priceDiff) : -Math.abs(priceDiff),
+              months: 0,
+              periodStart: new Date(),
+              periodEnd: currentInstance.expiresAt || new Date(),
+              balanceLogId: balanceLog.id,
+              remark: `价格调整: ¥${oldPrice.toFixed(2)} → ¥${roundedNewPrice.toFixed(2)}`
+            }
+          })
+        }
+      })
+
+      // 5. 记录操作日志
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_update_price',
+        `Admin updated instance "${instance.name}" price: ¥${oldPrice.toFixed(2)} → ¥${roundedNewPrice.toFixed(2)}, settle: ${settleBalance}, diff: ¥${priceDiff.toFixed(2)}`,
+        'success',
+        { instanceId }
+      )
+
+      // 6. 通知用户（如果有余额变动）
+      if (settleBalance && priceDiff !== 0) {
+        await sendNotification(instance.userId, 'instance_price_changed', {
+          instanceName: instance.name,
+          oldPrice: oldPrice,
+          newPrice: roundedNewPrice,
+          priceDiff: Math.abs(priceDiff),
+          isIncrease: priceDiff > 0
+        })
+      }
+
+      return {
+        success: true,
+        message: priceDiff > 0
+          ? `价格已更新，已从用户余额扣除 ¥${priceDiff.toFixed(2)}`
+          : priceDiff < 0
+            ? `价格已更新，已退还用户 ¥${Math.abs(priceDiff).toFixed(2)}`
+            : '价格已更新',
+        oldPrice,
+        newPrice: roundedNewPrice,
+        priceDiff,
+        remainingDays,
+        billingCycle
+      }
+    } catch (error) {
+      if (error instanceof BatchPriceUpdateError) {
+        return reply.status(error.statusCode).send({ error: error.message })
+      }
+
+      request.log.error(error, '修改实例价格失败')
+      return reply.status(500).send({ error: '修改实例价格失败' })
+    }
+  })
+
+  // POST /api/admin/instances/:id/update-price/preview - 预览实例专属价格变更结算
+  app.post('/api/admin/instances/:id/update-price/preview', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const { id } = request.params as { id: string }
+
+    if (!request.body || typeof request.body !== 'object') {
+      return reply.status(400).send({ error: '请求参数无效' })
+    }
+
+    const { newPrice, settleBalance } = request.body as {
+      newPrice: number
+      settleBalance: boolean
+    }
+
+    const instanceId = parseInt(id, 10)
+    if (isNaN(instanceId)) {
+      return reply.status(400).send({ error: '无效的实例ID' })
+    }
+
+    if (typeof newPrice !== 'number' || !Number.isFinite(newPrice) || newPrice < 0 || newPrice > 100000) {
+      return reply.status(400).send({ error: '价格必须是 0-100000 之间的数字' })
+    }
+
+    try {
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: {
+          user: { select: { id: true, username: true, balance: true } }
+        }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      if (!instance.packagePlanId) {
+        return reply.status(400).send({ error: '免费实例不支持修改价格' })
+      }
+
+      const quote = await db.calculateInstancePriceAdjustmentQuote(instance, newPrice, settleBalance)
+      const userBalance = Number(instance.user?.balance || 0)
+
+      return {
+        oldPrice: quote.oldPrice,
+        newPrice: quote.newPrice,
+        billingCycle: quote.billingCycle,
+        remainingDays: quote.remainingDays,
+        priceDiff: quote.priceDiff,
+        discountRate: quote.discountRate,
+        userBalance,
+        instanceVersion: instance.version
+      }
+    } catch (error) {
+      request.log.error(error, '预览修改实例价格失败')
+      return reply.status(500).send({ error: '预览修改实例价格失败' })
+    }
+  })
+
+  // POST /api/admin/instances/batch-update-price/preview - 批量预览实例专属价格变更结算
+  app.post('/api/admin/instances/batch-update-price/preview', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const { instanceIds, newPrice, settleBalance } = parseBatchPriceUpdateBody(request.body)
+      return await buildBatchPriceUpdatePreview(prisma, instanceIds, newPrice, settleBalance)
+    } catch (error) {
+      if (error instanceof BatchPriceUpdateError) {
+        return reply.status(error.statusCode).send({
+          error: error.message,
+          preview: error.preview
+        })
+      }
+
+      request.log.error(error, '批量预览修改实例价格失败')
+      return reply.status(500).send({ error: '批量预览修改实例价格失败' })
+    }
+  })
+
+  // POST /api/admin/instances/batch-update-price - 批量修改实例专属价格
+  app.post('/api/admin/instances/batch-update-price', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const admin = request.user!
+
+    try {
+      const { instanceIds, newPrice, settleBalance, expectations } = parseBatchPriceUpdateBody(request.body)
+      let notificationItems: BatchPriceUpdateItem[] = []
+
+      const preview = await prisma.$transaction(async (tx) => {
+        const currentPreview = await buildBatchPriceUpdatePreview(tx, instanceIds, newPrice, settleBalance)
+
+        const versionedPreviewItems = currentPreview.items.filter(item => item.status !== 'failed')
+        const expectedVersionMap = new Map(expectations.map(item => [item.instanceId, item.version]))
+        const missingPreviewSnapshot = versionedPreviewItems.some(item => !expectedVersionMap.has(item.id))
+
+        if (missingPreviewSnapshot) {
+          throw new BatchPriceUpdateError('请先刷新预览后再提交', 400, currentPreview)
+        }
+
+        const hasStalePreview = versionedPreviewItems.some(item => {
+          const expectedVersion = expectedVersionMap.get(item.id)
+          return expectedVersion !== item.instanceVersion
+        })
+
+        if (hasStalePreview) {
+          throw new BatchPriceUpdateError('实例计费信息已变化，请刷新预览后重试', 409, currentPreview)
+        }
+
+        if (!currentPreview.canSubmit) {
+          throw new BatchPriceUpdateError('批量修改价格预览未通过，请检查失败项或用户余额', 400, currentPreview)
+        }
+
+        const changedItems = currentPreview.items.filter(item => item.status === 'ready')
+        const changedIds = changedItems.map(item => item.id)
+        const periodEnds = changedIds.length > 0
+          ? await tx.instance.findMany({
+              where: { id: { in: changedIds } },
+              select: { id: true, expiresAt: true }
+            })
+          : []
+        const periodEndMap = new Map(periodEnds.map(item => [item.id, item.expiresAt]))
+
+        for (const item of changedItems) {
+          const updateResult = await tx.instance.updateMany({
+            where: {
+              id: item.id,
+              version: item.instanceVersion
+            },
+            data: {
+              billingPrice: item.newPrice,
+              version: { increment: 1 }
+            }
+          })
+
+          if (updateResult.count !== 1) {
+            throw new BatchPriceUpdateError(`实例 #${item.id} 计费信息已变化，请刷新后重试`, 409, currentPreview)
+          }
+        }
+
+        if (settleBalance) {
+          const settlementItems = changedItems
+            .filter(item => item.user && item.priceDiff !== 0)
+            .sort((a, b) => {
+              if (a.user!.id !== b.user!.id) return a.user!.id - b.user!.id
+              return a.priceDiff - b.priceDiff
+            })
+
+          for (const item of settlementItems) {
+            const user = item.user!
+            let balanceAfter = 0
+            let balanceBefore = 0
+
+            if (item.priceDiff > 0) {
+              const updateResult = await tx.user.updateMany({
+                where: {
+                  id: user.id,
+                  balance: { gte: item.priceDiff }
+                },
+                data: {
+                  balance: { decrement: item.priceDiff }
+                }
+              })
+
+              if (updateResult.count !== 1) {
+                throw new BatchPriceUpdateError(`用户 ${user.username} 余额不足，请刷新预览后重试`, 400, currentPreview)
+              }
+
+              const updatedUser = await tx.user.findUnique({
+                where: { id: user.id },
+                select: { balance: true }
+              })
+              balanceAfter = Number(updatedUser?.balance || 0)
+              balanceBefore = roundMoney(balanceAfter + item.priceDiff)
+            } else {
+              const refundAmount = Math.abs(item.priceDiff)
+              const updatedUser = await tx.user.update({
+                where: { id: user.id },
+                data: {
+                  balance: { increment: refundAmount }
+                },
+                select: { balance: true }
+              })
+              balanceAfter = Number(updatedUser.balance)
+              balanceBefore = roundMoney(balanceAfter - refundAmount)
+            }
+
+            const balanceLog = await tx.balanceLog.create({
+              data: {
+                userId: user.id,
+                type: item.priceDiff > 0 ? 'consume' : 'refund',
+                amount: -item.priceDiff,
+                balanceBefore,
+                balanceAfter,
+                instanceId: item.id,
+                remark: item.priceDiff > 0
+                  ? `管理员批量调整实例价格，补交差价 ¥${item.priceDiff.toFixed(2)}`
+                  : `管理员批量调整实例价格，退还差价 ¥${Math.abs(item.priceDiff).toFixed(2)}`
+              }
+            })
+
+            await tx.instanceBillingRecord.create({
+              data: {
+                instanceId: item.id,
+                userId: user.id,
+                type: item.priceDiff > 0 ? 'upgrade' : 'refund',
+                amount: item.priceDiff > 0 ? Math.abs(item.priceDiff) : -Math.abs(item.priceDiff),
+                months: 0,
+                periodStart: new Date(),
+                periodEnd: periodEndMap.get(item.id) || new Date(),
+                balanceLogId: balanceLog.id,
+                remark: `批量价格调整: ¥${(item.oldPrice || 0).toFixed(2)} → ¥${item.newPrice.toFixed(2)}`
+              }
+            })
+          }
+        }
+
+        notificationItems = changedItems.filter(item => item.user && item.priceDiff !== 0)
+        return currentPreview
+      })
+
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_batch_update_price',
+        `Admin batch updated ${preview.summary.changedCount} instance prices to ¥${newPrice.toFixed(2)}, settle: ${settleBalance}, charge: ¥${preview.summary.totalCharge.toFixed(2)}, refund: ¥${preview.summary.totalRefund.toFixed(2)}`,
+        'success'
+      )
+
+      const notificationResults = await Promise.allSettled(notificationItems.map(item => sendNotification(item.user!.id, 'instance_price_changed', {
+        instanceName: item.name || `#${item.id}`,
+        oldPrice: item.oldPrice || 0,
+        newPrice: item.newPrice,
+        priceDiff: Math.abs(item.priceDiff),
+        isIncrease: item.priceDiff > 0
+      })))
+      for (const result of notificationResults) {
+        if (result.status === 'rejected') {
+          request.log.warn(result.reason, '批量价格修改通知发送失败')
+        }
+      }
+
+      return {
+        success: true,
+        message: preview.summary.changedCount > 0
+          ? `批量价格修改完成，已更新 ${preview.summary.changedCount} 个实例`
+          : '价格未变更',
+        preview
+      }
+    } catch (error) {
+      if (error instanceof BatchPriceUpdateError) {
+        return reply.status(error.statusCode).send({
+          error: error.message,
+          preview: error.preview
+        })
+      }
+
+      request.log.error(error, '批量修改实例价格失败')
+      return reply.status(500).send({ error: '批量修改实例价格失败' })
+    }
+  })
+
+  // ==================== 付费实例列表 ====================
+
+  // GET /api/admin/billing/instances - 付费实例列表
+  app.get('/api/admin/billing/instances', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const { page, pageSize, status, expiring, hostId, search } = request.query as {
+        page?: string
+        pageSize?: string
+        status?: string
+        expiring?: string  // 'true' 表示只显示即将到期的实例
+        hostId?: string    // 宿主机筛选
+        search?: string    // 搜索关键词（用户名/节点/实例名/方案/套餐）
+      }
+
+      const pageNum = page ? parseInt(page, 10) : 1
+      const size = Math.min(pageSize ? parseInt(pageSize, 10) : 20, 100)
+      const skip = (pageNum - 1) * size
+
+      const where: Record<string, unknown> = {
+        packagePlanId: { not: null }
+      }
+
+      if (status) {
+        where.status = status
+      } else {
+        where.status = { notIn: ['deleted'] }
+      }
+
+      if (expiring === 'true') {
+        where.expiresAt = {
+          not: null,
+          gt: new Date(),
+          lte: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+        }
+      }
+
+      // 宿主机筛选
+      if (hostId) {
+        const hostIdNum = parseInt(hostId, 10)
+        if (!isNaN(hostIdNum)) {
+          where.hostId = hostIdNum
+        }
+      }
+
+      // 搜索关键词（用户名/节点/实例名/方案/套餐）
+      if (search && search.trim()) {
+        const keyword = search.trim()
+        where.OR = [
+          { name: { contains: keyword, mode: 'insensitive' } },
+          { user: { username: { contains: keyword, mode: 'insensitive' } } },
+          { host: { name: { contains: keyword, mode: 'insensitive' } } },
+          { package: { name: { contains: keyword, mode: 'insensitive' } } },
+          { packagePlan: { name: { contains: keyword, mode: 'insensitive' } } }
+        ]
+      }
+
+      const [instances, total, hostsWithPaidInstances] = await Promise.all([
+        prisma.instance.findMany({
+          where,
+          include: {
+            user: { select: { id: true, username: true, email: true, avatarStyle: true, avatarBadgeId: true, balance: true } },
+            packagePlan: { select: { id: true, name: true } },
+            package: { select: { id: true, name: true, instanceType: true } },
+            host: {
+              select: {
+                id: true,
+                name: true,
+                userId: true,
+                instanceType: true,
+                user: {
+                  select: {
+                    role: true
+                  }
+                }
+              }
+            },
+            affBinding: {
+              select: {
+                id: true,
+                affCode: { select: { discountRate: true, enabled: true } }
+              }
+            }
+          },
+          orderBy: { expiresAt: 'asc' },
+          skip,
+          take: size
+        }),
+        prisma.instance.count({ where }),
+        // 查询所有有付费实例的节点（不受筛选条件影响）
+        prisma.instance.findMany({
+          where: {
+            packagePlanId: { not: null },
+            status: { notIn: ['deleted'] }
+          },
+          select: {
+            host: { select: { id: true, name: true } }
+          },
+          distinct: ['hostId']
+        })
+      ])
+
+      return {
+        instances: instances.map((inst: any) => {
+          // 计算剩余天数
+          let remainingDays: number | null = null
+          if (inst.expiresAt) {
+            const now = new Date()
+            const diffMs = inst.expiresAt.getTime() - now.getTime()
+            remainingDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
+          }
+
+          // 根据实例的套餐类型推断实例类型（PRO=容器/PRIME=虚拟机）
+          const pkgInstanceType = (inst.package as { instanceType?: string })?.instanceType || 'container'
+          let instanceTypeLabel = 'PRO'  // 默认容器
+          if (pkgInstanceType === 'vm') {
+            instanceTypeLabel = 'PRIME'
+          }
+
+          // 获取 AFF 绑定信息
+          const affBinding = (inst as any).affBinding
+          const hasAffBinding = !!affBinding
+          // 只有当优惠码启用时才返回折扣率
+          const affDiscountRate = hasAffBinding && affBinding.affCode?.enabled
+            ? Number(affBinding.affCode.discountRate) || 0
+            : 0
+
+          // 判断是否为托管实例（userId=1 是管理员/直营）
+          const isHostedInstance = (inst.host as { user?: { role?: string } })?.user?.role === 'user'
+
+          return {
+            id: inst.id,
+            incusId: inst.incusId,
+            name: inst.name,
+            status: inst.status,
+            user: {
+              id: inst.user.id,
+              username: inst.user.username,
+              email: inst.user.email,
+              avatarStyle: inst.user.avatarStyle,
+              avatarBadgeId: inst.user.avatarBadgeId ?? null,
+              balance: Number(inst.user.balance) || 0
+            },
+            host: inst.host,
+            package: inst.package,
+            packagePlan: inst.packagePlan,
+            packagePlanId: inst.packagePlanId,
+            billingPrice: inst.billingPrice ? Number(inst.billingPrice) : null,
+            billingCycle: inst.billingCycle,
+            expiresAt: inst.expiresAt?.toISOString(),
+            createdAt: inst.createdAt.toISOString(),
+            remainingDays,
+            instanceTypeLabel,
+            isHostedInstance,
+            autoRenew: inst.autoRenew,
+            suspendedAt: inst.suspendedAt?.toISOString(),
+            suspendReason: inst.suspendReason,
+            hasAffBinding,
+            affDiscountRate  // AFF折扣率（0-1）
+          }
+        }),
+        total,
+        page: pageNum,
+        pageSize: size,
+        // 返回有付费实例的节点列表（用于前端筛选器）
+        hosts: hostsWithPaidInstances
+          .filter(inst => inst.host)
+          .map(inst => ({ id: inst.host!.id, name: inst.host!.name }))
+          .filter((host, index, self) => self.findIndex(h => h.id === host.id) === index)
+          .sort((a, b) => a.name.localeCompare(b.name))
+      }
+    } catch (error) {
+      request.log.error(error, '获取付费实例列表失败')
+      return reply.status(500).send({ error: '获取付费实例列表失败' })
+    }
+  })
+
+  // ==================== 充值记录管理 ====================
+
+  // GET /api/admin/billing/recharge-records - 获取充值记录列表
+  app.get('/api/admin/billing/recharge-records', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const { page, pageSize, status, userId } = request.query as {
+        page?: string
+        pageSize?: string
+        status?: string
+        userId?: string
+      }
+
+      const pageNum = page ? parseInt(page, 10) : 1
+      const size = Math.min(pageSize ? parseInt(pageSize, 10) : 20, 100)
+      const skip = (pageNum - 1) * size
+
+      const where: Record<string, unknown> = {}
+      if (status) where.status = status
+      if (userId) where.userId = parseInt(userId, 10)
+
+      // 分开查询避免类型推断问题
+      const records = await prisma.rechargeRecord.findMany({
+        where,
+        include: {
+          user: { select: { id: true, username: true } },
+          provider: { select: { id: true, name: true, type: true } }
+        },
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: size
+      })
+      const total = await prisma.rechargeRecord.count({ where })
+
+      return {
+        records: records.map(r => {
+          const paymentInfo = extractRechargePaymentDisplayInfo((r as any).paymentDetails)
+
+          return {
+            id: r.id,
+            orderNo: r.orderNo,
+            userId: r.userId,
+            user: r.user,
+            amount: Number(r.amount),
+            payableAmount: getRechargePayableAmount({
+              amount: r.amount,
+              paymentDetails: (r as any).paymentDetails
+            }),
+            actualAmount: r.actualAmount !== null && r.actualAmount !== undefined ? Number(r.actualAmount) : null,
+            fee: Number(r.fee || 0),
+            status: r.status,
+            payMethod: r.paymentMethod,
+            actualPaymentMethod: paymentInfo.actualPaymentMethod,
+            paymentCurrency: paymentInfo.paymentCurrency,
+            paymentNetwork: paymentInfo.paymentNetwork,
+            paymentUuid: paymentInfo.paymentUuid,
+            paymentTxid: paymentInfo.paymentTxid,
+            invoiceCurrency: paymentInfo.invoiceCurrency,
+            gatewayStatus: paymentInfo.gatewayStatus,
+            gatewayStatusDescription: paymentInfo.gatewayStatusDescription,
+            provider: r.provider ? {
+              id: r.provider.id,
+              name: r.provider.name,
+              displayName: r.provider.name,
+              type: r.provider.type
+            } : null,
+            tradeNo: r.tradeNo,
+            createdAt: r.createdAt.toISOString(),
+            paidAt: r.completedAt?.toISOString() || null,
+            completedAt: r.completedAt?.toISOString() || null,
+            expiresAt: r.expiredAt?.toISOString() || null
+          }
+        }),
+        total,
+        page: pageNum,
+        pageSize: size
+      }
+    } catch (error) {
+      request.log.error(error, '获取充值记录列表失败')
+      return reply.status(500).send({ error: '获取充值记录列表失败' })
+    }
+  })
+
+  // POST /api/admin/billing/recharge-records/:id/sync - 同步充值订单状态
+  app.post('/api/admin/billing/recharge-records/:id/sync', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const admin = request.user!
+    const { id } = request.params as { id: string }
+    const recordId = parseInt(id, 10)
+
+    if (isNaN(recordId)) {
+      return reply.status(400).send({ error: '无效的记录ID' })
+    }
+
+    try {
+      // 1. 获取充值记录
+      const record = await prisma.rechargeRecord.findUnique({
+        where: { id: recordId },
+        include: {
+          user: { select: { id: true, username: true } },
+          provider: true
+        }
+      })
+
+      if (!record) {
+        return reply.status(404).send({ error: '充值记录不存在' })
+      }
+
+      // 2. 如果订单已完成，直接返回
+      if (record.status === 'completed') {
+        return {
+          success: true,
+          synced: false,
+          status: 'completed',
+          message: '订单已完成，无需同步'
+        }
+      }
+
+      // 3. 如果订单已取消或失败，不允许同步
+      if (record.status === 'cancelled' || record.status === 'failed') {
+        return reply.status(400).send({ error: `订单已${record.status === 'cancelled' ? '取消' : '失败'}，无法同步` })
+      }
+
+      // 4. 检查支付渠道
+      if (!record.provider) {
+        return reply.status(400).send({ error: '支付渠道不存在' })
+      }
+
+      // 5. 仅支持可主动查询的支付类型
+      if (record.provider.type !== 'yipay' && record.provider.type !== 'heleket') {
+        return reply.status(400).send({ error: '该支付渠道不支持手动同步' })
+      }
+
+      const config = typeof record.provider.config === 'string'
+        ? JSON.parse(record.provider.config)
+        : (record.provider.config || {}) as Record<string, unknown>
+      const { config: effectiveConfig } = resolveRechargeProviderConfig(
+        record.provider.type,
+        config,
+        (record as any).providerConfigSnapshot
+      )
+
+      const rechargeAmount = Number(record.amount)
+      const orderAmount = getRechargePayableAmount({
+        amount: record.amount,
+        paymentDetails: (record as any).paymentDetails
+      })
+      const creditedAmount = record.actualAmount !== null && record.actualAmount !== undefined ? Number(record.actualAmount) : rechargeAmount
+      let tradeNo = ''
+      let tradeNoForIdx = ''
+      let actualAmount = creditedAmount
+      let callbackPayload: Record<string, unknown> = { source: 'admin_sync', adminId: admin.id }
+      let paymentDetails = (record as any).paymentDetails as Record<string, unknown> | undefined
+
+      if (record.provider.type === 'yipay') {
+        const { epayConfig, valid, error: configError } = buildEpayConfig(effectiveConfig)
+        if (!valid) {
+          request.log.warn({ orderNo: record.orderNo, error: configError }, '支付渠道配置不完整')
+          return reply.status(400).send({ error: configError || '支付渠道配置不完整' })
+        }
+
+        const epay = createEpayClient(epayConfig)
+        const queryResult = await epay.queryOrder(record.orderNo)
+
+        request.log.info({ orderNo: record.orderNo, queryResult: { success: queryResult.success, paid: queryResult.paid } }, '管理员同步-易支付订单查询结果')
+
+        if (!queryResult.success) {
+          return {
+            success: true,
+            synced: false,
+            status: record.status,
+            message: '查询支付平台失败，请稍后重试'
+          }
+        }
+
+        if (!queryResult.paid) {
+          return {
+            success: true,
+            synced: false,
+            status: 'pending',
+            message: '支付平台返回订单未支付'
+          }
+        }
+
+        tradeNo = queryResult.trade_no || ''
+        tradeNoForIdx = getTradeNoForIndex(record.orderNo, tradeNo)
+
+        const paidAmount = queryResult.money ? parseFloat(queryResult.money) : 0
+        if (paidAmount > 0 && Math.abs(paidAmount - orderAmount) > 0.01) {
+          request.log.warn(
+            { orderNo: record.orderNo, orderAmount, paidAmount },
+            '管理员同步-支付金额不匹配'
+          )
+          return reply.status(400).send({
+            error: `支付金额与订单金额不匹配（应付: ${orderAmount}，实付: ${paidAmount}）`
+          })
+        }
+
+        actualAmount = creditedAmount
+        callbackPayload = { source: 'admin_sync', queryResult: queryResult.rawData as Record<string, unknown>, adminId: admin.id }
+      } else {
+        const { heleketConfig, valid, error: configError } = buildHeleketConfig(effectiveConfig)
+        if (!valid) {
+          request.log.warn({ orderNo: record.orderNo, error: configError }, 'Heleket 支付渠道配置不完整')
+          return reply.status(400).send({ error: configError || '支付渠道配置不完整' })
+        }
+
+        const heleket = createHeleketClient(heleketConfig)
+        const queryResult = await heleket.getPaymentInfo({ order_id: record.orderNo })
+        const status = extractHeleketStatus(queryResult)
+        const paymentState = getHeleketPaymentState(queryResult)
+        const statusMessage = getHeleketStatusDescription(status)
+
+        request.log.info(
+          { orderNo: record.orderNo, status, paymentState, uuid: queryResult.uuid, txid: queryResult.txid },
+          '管理员同步-Heleket 订单查询结果'
+        )
+
+        callbackPayload = {
+          source: 'admin_sync',
+          heleketStatus: status,
+          queryResult: queryResult as Record<string, unknown>,
+          adminId: admin.id
+        }
+        paymentDetails = mergeHeleketPaymentDetails(
+          (record as any).paymentDetails,
+          queryResult,
+          heleketConfig,
+          {
+            orderNo: record.orderNo,
+            invoiceAmount: orderAmount
+          }
+        ) as Record<string, unknown>
+
+        if (paymentState === 'pending') {
+          const heleketTradeNo = (
+            (typeof queryResult.uuid === 'string' && queryResult.uuid.trim() ? queryResult.uuid : '') ||
+            (typeof queryResult.txid === 'string' && queryResult.txid.trim() ? queryResult.txid : '') ||
+            null
+          )
+          await db.updateRechargeOrderMetadata(record.orderNo, {
+            tradeNo: heleketTradeNo,
+            paymentDetails
+          })
+
+          return {
+            success: true,
+            synced: false,
+            status: 'pending',
+            message: statusMessage
+          }
+        }
+
+        if (paymentState === 'cancelled') {
+          await db.cancelRecharge(record.orderNo, callbackPayload, paymentDetails)
+          request.log.info({ orderNo: record.orderNo, status }, '管理员同步-Heleket 订单已取消')
+          return {
+            success: true,
+            synced: false,
+            status: 'cancelled',
+            message: statusMessage
+          }
+        }
+
+        if (paymentState === 'failed') {
+          await db.failRecharge(record.orderNo, statusMessage, callbackPayload, paymentDetails)
+          request.log.info({ orderNo: record.orderNo, status }, '管理员同步-Heleket 订单已失败')
+          return {
+            success: true,
+            synced: false,
+            status: 'failed',
+            message: statusMessage
+          }
+        }
+
+        tradeNo = (
+          (typeof queryResult.uuid === 'string' && queryResult.uuid.trim() ? queryResult.uuid : '') ||
+          (typeof queryResult.txid === 'string' && queryResult.txid.trim() ? queryResult.txid : '') ||
+          (typeof queryResult.order_id === 'string' && queryResult.order_id.trim() ? queryResult.order_id : '') ||
+          record.orderNo
+        ).trim()
+        tradeNoForIdx = getTradeNoForIndex(record.orderNo, tradeNo)
+
+        const invoiceAmount = getHeleketInvoiceAmount(queryResult)
+        if (invoiceAmount === undefined || !Number.isFinite(invoiceAmount) || invoiceAmount <= 0) {
+          request.log.warn({ orderNo: record.orderNo, queryResult }, '管理员同步-Heleket 支付金额无效')
+          return {
+            success: true,
+            synced: false,
+            status: record.status,
+            message: '支付金额异常，请稍后重试'
+          }
+        }
+
+        if (invoiceAmount + 0.01 < orderAmount) {
+          request.log.warn(
+            { orderNo: record.orderNo, orderAmount, invoiceAmount },
+            '管理员同步-Heleket 支付金额不足'
+          )
+          return reply.status(400).send({
+            error: `支付金额不足（应付: ${orderAmount}，账单金额: ${invoiceAmount}）`
+          })
+        }
+
+        actualAmount = creditedAmount
+      }
+
+      // 检查是否已处理（防重放）
+      const existingCallback = await prisma.paymentCallback.findUnique({
+        where: {
+          providerId_orderNo_tradeNo: {
+            providerId: record.provider.id,
+            orderNo: record.orderNo,
+            tradeNo: tradeNoForIdx
+          }
+        }
+      })
+
+      if (existingCallback) {
+        // 已处理过，重新查询订单状态
+        const updatedRecord = await prisma.rechargeRecord.findUnique({
+          where: { id: recordId }
+        })
+        return {
+          success: true,
+          synced: false,
+          status: updatedRecord?.status || 'completed',
+          message: '订单已处理过'
+        }
+      }
+
+      // 11. 完成充值
+      await db.completeRecharge(record.orderNo, {
+        tradeNo,
+        actualAmount,
+        callbackData: callbackPayload,
+        paymentDetails
+      })
+
+      // 记录已处理（防重放）
+      await prisma.paymentCallback.create({
+        data: {
+          providerId: record.provider.id,
+          orderNo: record.orderNo,
+          tradeNo: tradeNoForIdx,
+          callbackIp: 'admin_sync',
+          processed: true
+        }
+      }).catch(() => { })
+
+      // 记录日志
+      await createLog(
+        admin.id,
+        'user',
+        'admin.recharge.sync',
+        `Admin synced recharge order: ${record.orderNo}, user: ${record.user?.username}, amount: ${actualAmount}, tradeNo: ${tradeNo || 'N/A'}`,
+        'success'
+      )
+
+      // 发送充值成功通知
+      try {
+        await createInboxMessage({
+          userId: record.userId,
+          eventType: 'recharge_success',
+          title: '充值到账通知',
+          content: `您的充值已到账！\n充值金额：￥${actualAmount.toFixed(2)}\n订单号：${record.orderNo}\n交易号：${tradeNo || 'N/A'}`,
+          data: {
+            orderNo: record.orderNo,
+            amount: actualAmount,
+            tradeNo
+          }
+        })
+      } catch (notifyError) {
+        request.log.warn({ orderNo: record.orderNo, error: notifyError }, '发送充值成功通知失败')
+      }
+
+      request.log.info({ orderNo: record.orderNo, tradeNo, adminId: admin.id }, '管理员同步充值订单成功')
+
+      return {
+        success: true,
+        synced: true,
+        status: 'completed',
+        message: '同步成功，充值已到账'
+      }
+    } catch (error) {
+      request.log.error(error, '同步充值订单失败')
+      return reply.status(500).send({ error: '同步失败，请稍后重试' })
+    }
+  })
+
+  // ==================== 管理员创建实例 ====================
+
+  // POST /api/admin/instances/create - 管理员为用户创建实例（支持免费赠送或付费实例）
+  app.post('/api/admin/instances/create', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const admin = request.user!
+    const body = request.body as {
+      username: string      // 目标用户名
+      name: string          // 实例名称
+      packageId: number     // 套餐ID
+      planId?: number       // 付费方案ID（可选，传入则创建付费实例）
+      chargeFirstMonth?: boolean  // 是否扣除用户首月费用（仅付费实例有效，默认 true）
+      image: string         // 镜像Alias
+      cpu?: number          // CPU（免费实例自定义配置）
+      memory?: number       // 内存（免费实例自定义配置）
+      disk?: number         // 硬盘（免费实例自定义配置）
+      hostId: number        // 指定宿主机
+      customInitCommandIds?: number[]  // 初始化命令
+    }
+
+    const { username, name, packageId, planId, chargeFirstMonth = true, image, cpu, memory, disk, hostId, customInitCommandIds } = body
+
+    try {
+      // 1. 验证必填参数
+      if (!username || !name || !packageId || !image || !hostId || hostId <= 0) {
+        return reply.status(400).send({ error: '缺少必填参数' })
+      }
+
+      // 2. 验证实例名称
+      const nameValidation = validateName(name, 'Instance name', 2, 64)
+      if (!nameValidation.valid) {
+        return reply.status(400).send({ error: nameValidation.message })
+      }
+
+      // 3. 查找目标用户
+      const targetUser = await prisma.user.findUnique({
+        where: { username },
+        select: { id: true, username: true, status: true, balance: true }
+      })
+
+      if (!targetUser) {
+        return reply.status(400).send({ error: `用户 "${username}" 不存在` })
+      }
+
+      if (targetUser.status !== 'active') {
+        return reply.status(400).send({ error: `用户 "${username}" 状态异常，无法创建实例` })
+      }
+
+      // 4. 获取目标用户的 SSH 密钥
+      const targetUserSshKeys = await db.getSSHKeysByUserId(targetUser.id)
+      if (targetUserSshKeys.length === 0) {
+        return reply.status(400).send({ error: `用户 "${username}" 没有 SSH 密钥，请先让用户添加 SSH 密钥` })
+      }
+      const sshKey = targetUserSshKeys[0].public_key
+
+      // 5. 验证套餐
+      const pkg = await db.getPackageById(packageId)
+      if (!pkg || !pkg.active) {
+        return reply.status(400).send({ error: '套餐不存在或已禁用' })
+      }
+
+      // 6. 处理付费方案（如果选择了 planId）
+      let selectedPlan: Awaited<ReturnType<typeof db.getPlanById>> = null
+      let billing: ReturnType<typeof calculateCreateBilling> | null = null
+
+      if (planId) {
+        selectedPlan = await db.getPlanById(planId)
+        if (!selectedPlan || selectedPlan.packageId !== packageId) {
+          return reply.status(400).send({ error: '方案不存在或不属于该套餐' })
+        }
+        if (!selectedPlan.isActive) {
+          return reply.status(400).send({ error: '方案已下架' })
+        }
+        if (selectedPlan.isSoldOut) {
+          return reply.status(400).send({ error: '方案已售罄', code: 'PLAN_SOLD_OUT' })
+        }
+
+        // 计算费用
+        billing = calculateCreateBilling(selectedPlan)
+
+        // 如果需要扣除首月费用，检查用户余额
+        if (chargeFirstMonth) {
+          const userBalance = Number(targetUser.balance)
+          if (userBalance < billing.totalPrice) {
+            return reply.status(400).send({
+              error: `用户余额不足，需要 ¥${billing.totalPrice.toFixed(2)}，当前余额 ¥${userBalance.toFixed(2)}`
+            })
+          }
+        }
+      }
+
+      // 7. 确定资源配置
+      // 付费实例使用方案配置，免费实例使用自定义配置
+      const requestedCpu = selectedPlan ? selectedPlan.cpu : (cpu || 15)
+      const requestedMemory = selectedPlan ? selectedPlan.memory : (memory || 128)
+      const requestedDisk = selectedPlan ? selectedPlan.disk : (disk || 512)
+
+      // 8. 验证镜像
+      if (!await isValidSystemImage(image)) {
+        return reply.status(400).send({ error: '镜像不存在' })
+      }
+
+      const pkgInstanceType = (pkg as typeof pkg & { instance_type?: 'container' | 'vm' }).instance_type || 'container'
+      if (!await isImageCompatibleWithInstanceType(image, pkgInstanceType)) {
+        return reply.status(400).send({ error: '镜像类型与套餐类型不兼容' })
+      }
+
+      // 8.1 验证镜像与内存配置的兼容性（128MB 只允许 Alpine/Debian）
+      if (!await isImageCompatibleWithMemory(image, requestedMemory)) {
+        return reply.status(400).send({ error: '128MB内存只能使用 Alpine/Debian 镜像' })
+      }
+
+      // 9. 选择宿主机
+      const packageHostIds = (pkg as { host_ids?: number[] }).host_ids || []
+      const pkgWithExtras = pkg as typeof pkg & { node_selectors?: string; port_limit?: number; snapshot_limit?: number; backup_limit?: number; site_limit?: number }
+
+      const preCheckHost = await db.selectAvailableHost({
+        packageHostIds: packageHostIds.length > 0 ? packageHostIds : undefined,
+        nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+        cpu: requestedCpu,
+        memory: requestedMemory,
+        disk: requestedDisk,
+        hostId: hostId,
+        ownerId: pkg.user_id!
+      })
+
+      if (!preCheckHost) {
+        return reply.status(400).send({ error: '指定宿主机不可用' })
+      }
+
+      // 10. 验证实例类型兼容性
+      const hostInstanceType = preCheckHost.instance_type || 'container'
+      const effectiveInstanceType = pkgInstanceType
+
+      if (effectiveInstanceType === 'vm' && hostInstanceType === 'container') {
+        return reply.status(400).send({ error: '套餐要求虚拟机，但节点只支持容器' })
+      }
+      if (effectiveInstanceType === 'container' && hostInstanceType === 'vm') {
+        return reply.status(400).send({ error: '套餐要求容器，但节点只支持虚拟机' })
+      }
+
+      const hostImageAvailability = await getSystemImageAvailabilityForHost(image, preCheckHost.id, {
+        instanceType: effectiveInstanceType,
+        memory: requestedMemory
+      })
+      if (!hostImageAvailability.ok) {
+        switch (hostImageAvailability.reason) {
+          case 'host_not_found':
+            return reply.status(404).send({ error: '宿主机不存在' })
+          case 'image_not_found':
+            return reply.status(400).send({ error: '镜像不存在' })
+          case 'memory_incompatible':
+            return reply.status(400).send({ error: '128MB内存只能使用 Alpine/Debian 镜像' })
+          case 'instance_type_mismatch':
+            return reply.status(400).send({ error: '镜像类型与套餐类型不兼容' })
+          case 'host_instance_type_mismatch':
+            return reply.status(400).send({ error: '套餐类型与宿主机不兼容' })
+          default:
+            return reply.status(400).send({ error: '选择的镜像在当前节点不可用' })
+        }
+      }
+
+      // 11. 处理自定义初始化命令
+      let extraShellCommands: string | undefined
+      if (customInitCommandIds && customInitCommandIds.length > 0) {
+        const cmdValidation = await validateCommandsOwnership(customInitCommandIds, targetUser.id)
+        if (cmdValidation.valid && cmdValidation.commands.length > 0) {
+          const imageDistro = getImageDistroFromAlias(image)
+          const compatibleCmds = cmdValidation.commands.filter(cmd =>
+            cmd.distros.includes('all') || cmd.distros.includes(imageDistro)
+          )
+          if (compatibleCmds.length > 0) {
+            extraShellCommands = mergeCommandContents(compatibleCmds)
+          }
+        }
+      }
+
+      // 12. 生成配置
+      const networkMode = (pkg.network_mode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+      if (effectiveInstanceType === 'vm' && ['nat_ipv6_nat', 'ipv6_nat'].includes(networkMode)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'KVM packages do not support IPv4 NAT & IPv6 NAT or IPv6 NAT network modes'))
+      }
+      const autoPassword = generateRandomPassword(16)
+      const { configPayload, metaData } = generateIncusConfig({
+        instanceName: name,
+        imageAlias: image,
+        rootPassword: autoPassword,
+        sshKey: sshKey,
+        networkMode,
+        type: effectiveInstanceType === 'vm' ? 'virtual-machine' : 'container',
+        extraShellCommands
+      })
+
+      // 13. 生成 IncusId（使用目标用户 ID）
+      const shortId = nanoid()
+      const incusId = `u${targetUser.id}-${shortId}`
+
+      // 14. 获取套餐流量限额
+      const packageTrafficLimit = pkg.monthly_traffic_limit ? BigInt(pkg.monthly_traffic_limit) : null
+
+      // 15. 事务创建实例
+      const { Prisma } = await import('@prisma/client')
+      let instanceId: number
+      let host: Awaited<ReturnType<typeof db.selectAndReserveHostWithLock>>
+
+      const result = await prisma.$transaction(async (tx) => {
+        // 使用行锁选择并预占宿主机资源
+        const lockedHost = await db.selectAndReserveHostWithLock(tx, {
+          packageHostIds: packageHostIds.length > 0 ? packageHostIds : undefined,
+          nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+          cpu: requestedCpu,
+          memory: requestedMemory,
+          disk: requestedDisk,
+          hostId: hostId,
+          ownerId: pkg.user_id!,
+          portCount: ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(networkMode) ? (selectedPlan?.portLimit || pkgWithExtras.port_limit || 0) : 0
+        })
+
+        if (!lockedHost) {
+          throw new Error('HOST_RESOURCES_INSUFFICIENT')
+        }
+
+        // 配额配置：付费实例使用方案配额，免费实例使用套餐配额
+        // 带宽限制：付费方案优先使用方案的 trafficLimitSpeed
+        let planBandwidthLimit: string | null = null
+        if (selectedPlan?.trafficLimitSpeed && selectedPlan.trafficLimitSpeed !== '0') {
+          const bytes = BigInt(selectedPlan.trafficLimitSpeed)
+          const MB = BigInt(1024 * 1024)
+          const mbps = Number(bytes / MB)
+          if (mbps > 0) {
+            planBandwidthLimit = `${mbps}Mbit`
+          }
+        }
+
+        const baseMonthlyTrafficLimit = selectedPlan ? selectedPlan.trafficLimit : packageTrafficLimit
+        const effectiveMonthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(tx as any, {
+          packageId,
+          hostId: lockedHost.id,
+          baseTrafficLimit: baseMonthlyTrafficLimit
+        })
+
+        const instanceQuota = selectedPlan ? {
+          portLimit: selectedPlan.portLimit,
+          snapshotLimit: selectedPlan.snapshotLimit,
+          backupLimit: selectedPlan.backupLimit,
+          siteLimit: selectedPlan.siteLimit,
+          swapSize: effectiveInstanceType === 'container' ? selectedPlan.swapSize : null,
+          monthlyTrafficLimit: effectiveMonthlyTrafficLimit,
+          limitsIngress: planBandwidthLimit,
+          limitsEgress: planBandwidthLimit
+        } : {
+          portLimit: pkgWithExtras.port_limit ?? null,
+          snapshotLimit: pkgWithExtras.snapshot_limit ?? null,
+          backupLimit: pkgWithExtras.backup_limit ?? null,
+          siteLimit: pkgWithExtras.site_limit ?? null,
+          swapSize: null as number | null,
+          monthlyTrafficLimit: effectiveMonthlyTrafficLimit,
+          limitsIngress: null as string | null,
+          limitsEgress: null as string | null
+        }
+
+        // 快照配置
+        const snapshotSpecs = {
+          packageId: pkg.id,
+          packageName: pkg.name,
+          planId: selectedPlan?.id ?? null,
+          planName: selectedPlan?.name ?? null,
+          cpuMax: pkg.cpu_max,
+          memoryMax: pkg.memory_max,
+          diskMax: pkg.disk_max,
+          networkMode,
+          portLimit: selectedPlan?.portLimit || pkgWithExtras.port_limit || 20,
+          nested: Boolean(pkg.nested),
+          privileged: Boolean(pkg.privileged),
+          nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+          createdAt: new Date().toISOString(),
+          adminGift: true,
+          giftBy: admin.id,
+          isPaidInstance: !!selectedPlan,
+          chargedFirstMonth: !!selectedPlan && chargeFirstMonth
+        }
+
+        // 如果是付费实例且需要扣除首月费用，执行扣款
+        let txBalanceLogId: number | null = null
+        if (selectedPlan && billing && chargeFirstMonth) {
+          // 获取用户当前余额（事务内再次检查）
+          const userRecord = await tx.user.findUnique({
+            where: { id: targetUser.id },
+            select: { balance: true }
+          })
+
+          if (!userRecord) {
+            throw new Error('USER_NOT_FOUND: 用户不存在')
+          }
+
+          const balanceBefore = Number(userRecord.balance)
+          const balanceAfter = balanceBefore - billing.totalPrice
+
+          if (balanceAfter < 0) {
+            throw new Error('BALANCE_INSUFFICIENT: 余额不足')
+          }
+
+          // 扣除余额
+          await tx.user.update({
+            where: { id: targetUser.id },
+            data: { balance: balanceAfter }
+          })
+
+          // 记录余额日志
+          const balanceLog = await tx.balanceLog.create({
+            data: {
+              userId: targetUser.id,
+              type: 'consume',
+              amount: -billing.totalPrice,
+              balanceBefore,
+              balanceAfter,
+              remark: `管理员开通付费实例（${billing.billingCycle}个月）：${pkg.name} - ${selectedPlan.name}`
+            }
+          })
+          txBalanceLogId = balanceLog.id
+        }
+
+        // 创建实例记录
+        const instance = await tx.instance.create({
+          data: {
+            incusId,
+            name,
+            userId: targetUser.id,
+            hostId: lockedHost.id,
+            packageId,
+            packagePlanId: selectedPlan?.id ?? null,
+            image,
+            cpu: requestedCpu,
+            memory: requestedMemory,
+            disk: requestedDisk,
+            networkMode,
+            snapshottedSpecs: snapshotSpecs as any,
+            sshPort: metaData.sshPort,
+            rootPassword: encryptSensitiveData(metaData.rootPassword),
+            status: 'creating',
+            monthlyTrafficLimit: instanceQuota.monthlyTrafficLimit,
+            portLimit: instanceQuota.portLimit,
+            snapshotLimit: instanceQuota.snapshotLimit,
+            backupLimit: instanceQuota.backupLimit,
+            siteLimit: instanceQuota.siteLimit,
+            swapEnabled: false,
+            swapSize: instanceQuota.swapSize,
+            limitsIngress: instanceQuota.limitsIngress,
+            limitsEgress: instanceQuota.limitsEgress,
+            // 计费信息：付费实例设置到期时间和计费周期，免费实例则为 null
+            expiresAt: billing?.expiresAt ?? null,
+            billingPrice: billing?.price ?? null,
+            billingCycle: billing?.billingCycle ?? null,
+            autoRenew: false
+          }
+        })
+
+        // 更新余额日志，添加 instanceId
+        if (txBalanceLogId) {
+          await tx.balanceLog.update({
+            where: { id: txBalanceLogId },
+            data: { instanceId: instance.id }
+          })
+        }
+
+        // 如果是付费实例，创建计费记录
+        if (selectedPlan && billing) {
+          await tx.instanceBillingRecord.create({
+            data: {
+              instanceId: instance.id,
+              userId: targetUser.id,
+              type: 'newPurchase',
+              amount: chargeFirstMonth ? billing.totalPrice : 0,
+              months: billing.billingCycle,
+              periodStart: new Date(),
+              periodEnd: billing.expiresAt,
+              balanceLogId: txBalanceLogId,
+              remark: chargeFirstMonth
+                ? `管理员开通 ${billing.billingCycle} 个月`
+                : `管理员赠送首月（未扣费）`
+            }
+          })
+        }
+
+        return { instanceId: instance.id, host: lockedHost, planBandwidthLimit }
+      }, {
+        isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+        timeout: 15000
+      })
+
+      instanceId = result.instanceId
+      host = result.host
+
+      if (!host) {
+        throw new Error('Host should not be null after successful transaction')
+      }
+
+      // 16. 分配 IP
+      let staticIPv4: string | null = null
+      let staticIPv6: string | null = null
+
+      try {
+        let attempts = 0
+        const maxAttempts = 50
+        while (attempts < maxAttempts) {
+          staticIPv4 = generateRandomIPv4()
+          const exists = await db.isIpAddressExistsOnHost(staticIPv4, host.id)
+          if (!exists) break
+          attempts++
+          staticIPv4 = null
+        }
+      } catch (err) {
+        console.error('[Admin Create Instance] IPv4 分配错误:', err)
+      }
+
+      const hostWithIpv6 = host as typeof host & {
+        ipv6_mode?: number
+        ipv6_subnet?: string | null
+        ipv6_gateway?: string | null
+        ipv6_parent_interface?: string | null
+      }
+
+      // 仅 Routed 模式（需要独立 IPv6 地址）才从子网分配
+      const needsRoutedIPv6 = ['nat_ipv6', 'ipv6_only'].includes(networkMode)
+      if (hostWithIpv6.ipv6_subnet && needsRoutedIPv6) {
+        try {
+          let attempts = 0
+          const maxAttempts = 50
+          while (attempts < maxAttempts) {
+            staticIPv6 = generateRandomIPv6(hostWithIpv6.ipv6_subnet)
+            const exists = await db.isIpAddressExists(staticIPv6)
+            if (!exists) break
+            attempts++
+            staticIPv6 = null
+          }
+        } catch (err) {
+          console.warn('[Admin Create Instance] IPv6 分配错误:', err)
+        }
+      }
+
+      // VM 和容器都需要在 IP 分配完成后重新生成 cloud-init network-config
+      let finalConfigPayload = configPayload
+      if (effectiveInstanceType === 'vm') {
+        const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+        const vmResult = generateVmConfig({
+          instanceName: name,
+          instanceIdSeed: incusId,
+          imageAlias: image,
+          rootPassword: metaData.rootPassword,
+          sshKey: sshKey,
+          network: staticIPv4 ? {
+            ipAddress: `${staticIPv4}/22`,
+            gateway: '10.10.0.1',  // NAT 网关 (与 incusbr0 一致)
+            dns: ['8.8.8.8', '1.1.1.1'],
+            ipv6Address: staticIPv6 ? `${staticIPv6}` : undefined,
+            ipv6Gateway: staticIPv6 ? (hostWithIpv6.ipv6_gateway || undefined) : undefined
+          } : undefined,
+          extraShellCommands
+        })
+        finalConfigPayload = vmResult.configPayload
+        console.log(`[Admin Create Instance] VM network-config 已更新: IPv4=${staticIPv4 || 'dhcp'}, IPv6=${staticIPv6 || 'none'}`)
+      } else if (staticIPv4) {
+        // 容器类型：重新生成包含静态 IP 的 cloud-init 配置
+        const containerResult = generateIncusConfig({
+          instanceName: name,
+          imageAlias: image,
+          rootPassword: metaData.rootPassword,
+          sshKey: sshKey,
+          networkMode,
+          type: 'container',
+          network: {
+            ipAddress: `${staticIPv4}/22`,
+            gateway: '10.10.0.1',
+            dns: ['8.8.8.8', '1.1.1.1'],
+            ipv6Address: staticIPv6 ? `${staticIPv6}/128` : undefined,
+            ipv6Gateway: staticIPv6 ? 'fe80::1' : undefined
+          },
+          extraShellCommands
+        })
+        finalConfigPayload = containerResult.configPayload
+        console.log(`[Admin Create Instance] Container network-config 已更新: IPv4=${staticIPv4}, IPv6=${staticIPv6 || 'none'}`)
+      }
+
+      // 17. 选择存储池
+      let selectedStoragePool = await db.resolveStoragePoolForNewInstance(host.id, { packageId })
+      if (!selectedStoragePool) {
+        selectedStoragePool = 'default'
+      }
+
+      await prisma.instance.update({
+        where: { id: instanceId },
+        data: {
+          storagePoolName: selectedStoragePool
+        }
+      })
+
+      // 18. 异步创建实例
+      const pkgConfig = pkg as typeof pkg & {
+        io_limit_mode?: string
+        limits_read?: string | null
+        limits_write?: string | null
+        limits_read_iops?: number | null
+        limits_write_iops?: number | null
+        limits_ingress?: string | null
+        limits_egress?: string | null
+        limits_processes?: number | null
+        limits_cpu_priority?: number | null
+        boot_autostart?: boolean | null
+        boot_autostart_priority?: number | null
+        boot_autostart_delay?: number | null
+        boot_host_shutdown_timeout?: number | null
+      }
+
+      // 计算带宽限制：使用事务中计算的方案带宽限制（如果有），否则使用套餐默认值
+      const effectiveBandwidthLimit = result.planBandwidthLimit
+
+      // 根据 ioLimitMode 选择性传入 IO 限制参数
+      const ioMode = pkgConfig.io_limit_mode || 'throughput'
+
+      createInstanceAsync(instanceId, host, {
+        name: incusId,
+        image,
+        cpu: requestedCpu,
+        memory: requestedMemory,
+        disk: requestedDisk,
+        swapEnabled: false,
+        swapSize: effectiveInstanceType === 'container' ? (selectedPlan?.swapSize ?? null) : null,
+        cloudInitConfig: finalConfigPayload,
+        networkMode,
+        nested: Boolean(pkg.nested),
+        privileged: Boolean(pkg.privileged),
+        portLimit: pkgWithExtras.port_limit || 20,
+        instanceType: effectiveInstanceType,
+        sshPort: metaData.sshPort,
+        storagePool: selectedStoragePool,
+        ipv4Address: staticIPv4,
+        ipv6Address: staticIPv6,
+        ipv6Gateway: hostWithIpv6.ipv6_gateway || null,
+        hostInterface: hostWithIpv6.ipv6_parent_interface || 'eth0',
+        limitsRead: ioMode === 'throughput' ? pkgConfig.limits_read : null,
+        limitsWrite: ioMode === 'throughput' ? pkgConfig.limits_write : null,
+        limitsReadIops: ioMode === 'iops' ? pkgConfig.limits_read_iops : null,
+        limitsWriteIops: ioMode === 'iops' ? pkgConfig.limits_write_iops : null,
+        limitsIngress: effectiveBandwidthLimit || pkgConfig.limits_ingress,
+        limitsEgress: effectiveBandwidthLimit || pkgConfig.limits_egress,
+        limitsProcesses: pkgConfig.limits_processes,
+        limitsCpuPriority: pkgConfig.limits_cpu_priority,
+        bootAutostart: pkgConfig.boot_autostart,
+        bootAutostartPriority: pkgConfig.boot_autostart_priority,
+        bootAutostartDelay: pkgConfig.boot_autostart_delay,
+        bootHostShutdownTimeout: pkgConfig.boot_host_shutdown_timeout
+      }, targetUser.id, { cpu: requestedCpu, memory: requestedMemory, disk: requestedDisk }).catch(err => {
+        console.error(`[Admin Create Instance] 实例 ${instanceId} 创建失败:`, err)
+      })
+
+      // 19. 记录操作日志
+      const logDetail = selectedPlan
+        ? `Admin created paid instance "${name}" for user ${targetUser.username} (Package: ${pkg.name}, Plan: ${selectedPlan.name}, Charged: ${chargeFirstMonth ? `¥${billing!.totalPrice.toFixed(2)}` : 'Free first month'})`
+        : `Admin created free instance "${name}" for user ${targetUser.username} (Package: ${pkg.name}, Free Gift)`
+
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.admin_create',
+        logDetail,
+        'success',
+        { instanceId }
+      )
+
+      // 20. 发送站内信通知用户
+      // 格式化资源配置
+      const formatMemory = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`
+      const formatDiskSize = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(0)} GB` : `${mb} MB`
+      const resourceInfo = `CPU ${requestedCpu}% | 内存 ${formatMemory(requestedMemory)} | 磁盘 ${formatDiskSize(requestedDisk)}`
+
+      // 构建通知内容
+      let notifyContent: string
+      let notifyTitle: string
+      if (selectedPlan) {
+        notifyTitle = chargeFirstMonth ? '开通付费实例' : '收到付费实例赠送'
+        notifyContent = chargeFirstMonth
+          ? `管理员为您开通了一台付费实例：${name}
+套餐：${pkg.name}
+方案：${selectedPlan.name}
+配置：${resourceInfo}
+节点：${host.name}
+扣费：¥${billing!.totalPrice.toFixed(2)}
+到期时间：${billing!.expiresAt.toLocaleDateString()}`
+          : `管理员为您赠送了一台付费实例：${name}
+套餐：${pkg.name}
+方案：${selectedPlan.name}
+配置：${resourceInfo}
+节点：${host.name}
+首月免费，到期时间：${billing!.expiresAt.toLocaleDateString()}
+次月将按方案价格正常计费`
+      } else {
+        notifyTitle = '收到实例赠送'
+        notifyContent = `管理员为您创建了一台实例：${name}\n套餐：${pkg.name}\n配置：${resourceInfo}\n节点：${host.name}`
+      }
+
+      await createInboxMessage({
+        userId: targetUser.id,
+        eventType: selectedPlan ? 'instance_paid_created' : 'instance_gift',
+        title: notifyTitle,
+        content: notifyContent,
+        data: {
+          instanceId,
+          instanceName: name,
+          packageName: pkg.name,
+          planName: selectedPlan?.name ?? null,
+          cpu: requestedCpu,
+          memory: requestedMemory,
+          disk: requestedDisk,
+          hostName: host.name,
+          isPaid: !!selectedPlan,
+          charged: chargeFirstMonth,
+          amount: billing?.totalPrice ?? 0,
+          expiresAt: billing?.expiresAt?.toISOString() ?? null
+        }
+      })
+
+      // 发送管理员创建实例邮件通知
+      try {
+        const targetUserWithEmail = await prisma.user.findUnique({
+          where: { id: targetUser.id },
+          select: { email: true }
+        })
+        if (targetUserWithEmail?.email) {
+          await sendAdminInstanceCreatedEmail(targetUserWithEmail.email, {
+            username: targetUser.username,
+            instanceName: name,
+            packageName: pkg.name,
+            planName: selectedPlan?.name,
+            hostName: host.name,
+            cpu: requestedCpu,
+            memory: requestedMemory,
+            disk: requestedDisk,
+            isPaid: !!selectedPlan,
+            charged: chargeFirstMonth,
+            amount: billing?.totalPrice,
+            expiresAt: billing?.expiresAt
+          })
+        }
+      } catch (emailErr) {
+        console.warn(`[Admin Create Instance] 发送邮件失败:`, emailErr)
+      }
+
+      return reply.status(202).send({
+        message: '实例创建中',
+        instance: {
+          id: instanceId,
+          name,
+          incusId,
+          host: host.name,
+          status: 'creating',
+          user: { id: targetUser.id, username: targetUser.username },
+          sshPort: metaData.sshPort,
+          rootPassword: metaData.rootPassword,
+          isPaid: !!selectedPlan,
+          planName: selectedPlan?.name ?? null,
+          charged: chargeFirstMonth,
+          amount: billing?.totalPrice ?? 0,
+          expiresAt: billing?.expiresAt?.toISOString() ?? null
+        }
+      })
+
+    } catch (error: any) {
+      console.error('[Admin Create Instance] 创建失败:', error)
+
+      if (error.message?.includes('HOST_RESOURCES_INSUFFICIENT')) {
+        return reply.status(503).send({ error: '宿主机资源不足或已被占用' })
+      }
+
+      if (error.message?.includes('BALANCE_INSUFFICIENT')) {
+        return reply.status(400).send({ error: '用户余额不足' })
+      }
+
+      if (error.message?.includes('USER_NOT_FOUND')) {
+        return reply.status(400).send({ error: '用户不存在' })
+      }
+
+      return reply.status(500).send({ error: error.message || '创建失败' })
+    }
+  })
+
+  // ==================== 管理员升级方案 ====================
+
+  // GET /api/admin/instances/:id/available-plans - 获取可升级的方案列表
+  app.get('/api/admin/instances/:id/available-plans', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const { id } = request.params as { id: string }
+      const instanceId = parseInt(id, 10)
+      if (isNaN(instanceId)) {
+        return reply.status(400).send({ error: '无效的实例ID' })
+      }
+
+      // 获取实例信息
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: {
+          packagePlan: true,
+          package: true,
+          user: { select: { id: true, username: true, balance: true } }
+        }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (!instance.packagePlanId || !instance.packagePlan) {
+        return reply.status(400).send({ error: '该实例不是付费实例，无法切换方案' })
+      }
+
+      // 当前方案信息
+      const currentPlan = instance.packagePlan
+
+      // 获取同一套餐下的所有激活方案
+      const allPlans = await prisma.packagePlan.findMany({
+        where: {
+          packageId: instance.packageId!,
+          isActive: true,
+          isSoldOut: false
+        },
+        orderBy: { sortOrder: 'asc' }
+      })
+
+      const quotedPlans = await Promise.all(
+        allPlans
+          .filter(plan => plan.id !== currentPlan.id)
+          .map(async plan => {
+            const preview = await db.calculatePlanChange(instance, plan, {
+              preciseRemainingDays: true,
+              minRemainingDays: null
+            })
+
+            return {
+              plan,
+              preview
+            }
+          })
+      )
+
+      // 过滤出可升级的方案，并直接返回服务端报价结果
+      const availablePlans = quotedPlans
+        .filter(item => item.preview.isUpgrade)
+        .map(({ plan, preview }) => ({
+          id: plan.id,
+          name: plan.name,
+          description: plan.description,
+          price: Number(plan.price) / 100,  // 分转元
+          billingCycle: plan.billingCycle,
+          monthlyPrice: Number((Number(plan.price) / plan.billingCycle / 100).toFixed(2)),
+          cpu: plan.cpu,
+          memory: plan.memory,
+          disk: plan.disk,
+          portLimit: plan.portLimit,
+          snapshotLimit: plan.snapshotLimit,
+          backupLimit: plan.backupLimit,
+          siteLimit: plan.siteLimit,
+          swapSize: (instance.package?.instanceType === 'vm' ? 0 : plan.swapSize),
+          trafficLimit: plan.trafficLimit.toString(),
+          isSoldOut: plan.isSoldOut,
+          slaGuarantee: plan.slaGuarantee,
+          priceDiff: preview.priceDiff
+        }))
+
+      const remainingDays = instance.expiresAt
+        ? Math.max(0, (instance.expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+        : 0
+
+      return {
+        currentPlan: {
+          id: currentPlan.id,
+          name: currentPlan.name,
+          price: instance.billingPrice ? Number(instance.billingPrice) : Number(currentPlan.price) / 100,
+          billingCycle: currentPlan.billingCycle,
+          monthlyPrice: Number(calculateMonthlyPrice(
+            instance.billingPrice ? Number(instance.billingPrice) : Number(currentPlan.price) / 100,
+            instance.billingCycle || currentPlan.billingCycle
+          ).toFixed(2)),
+          cpu: currentPlan.cpu,
+          memory: currentPlan.memory,
+          disk: currentPlan.disk
+        },
+        remainingDays,
+        availablePlans,
+        userBalance: Number(instance.user?.balance || 0)
+      }
+    } catch (error) {
+      request.log.error(error, '获取可升级方案列表失败')
+      return reply.status(500).send({ error: '获取可升级方案列表失败' })
+    }
+  })
+
+  // POST /api/admin/instances/:id/upgrade-plan - 管理员升级实例方案
+  app.post('/api/admin/instances/:id/upgrade-plan', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const admin = request.user!
+      const { id } = request.params as { id: string }
+      const { newPlanId } = request.body as { newPlanId: number }
+
+      const instanceId = parseInt(id, 10)
+      if (isNaN(instanceId)) {
+        return reply.status(400).send({ error: '无效的实例ID' })
+      }
+
+      if (!newPlanId || isNaN(newPlanId)) {
+        return reply.status(400).send({ error: '无效的新方案ID' })
+      }
+
+      // 1. 获取实例信息
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        include: {
+          user: { select: { id: true, username: true, balance: true } },
+          packagePlan: true,
+          package: true,
+          host: true
+        }
+      })
+
+      if (!instance) {
+        return reply.status(404).send({ error: '实例不存在' })
+      }
+
+      if (!instance.packagePlanId || !instance.packagePlan) {
+        return reply.status(400).send({ error: '该实例不是付费实例，无法切换方案' })
+      }
+
+      if (instance.status === 'deleted') {
+        return reply.status(400).send({ error: '实例已删除' })
+      }
+
+      // 2. 获取新方案信息
+      const newPlan = await prisma.packagePlan.findUnique({
+        where: { id: newPlanId }
+      })
+
+      if (!newPlan) {
+        return reply.status(404).send({ error: '新方案不存在' })
+      }
+
+      if (!newPlan.isActive) {
+        return reply.status(400).send({ error: '新方案已下架' })
+      }
+      if (newPlan.isSoldOut) {
+        return reply.status(400).send({ error: '新方案已售罄', code: 'PLAN_SOLD_OUT' })
+      }
+
+      // 3. 验证新方案属于同一套餐
+      if (newPlan.packageId !== instance.packageId) {
+        return reply.status(400).send({ error: '新方案不属于同一套餐' })
+      }
+
+      // 4. 统一计算升级报价（仅保留管理员权限差异，不再分叉金额口径）
+      const currentPlan = instance.packagePlan
+      const changeQuote = await db.calculatePlanChange(instance, newPlan, {
+        preciseRemainingDays: true,
+        minRemainingDays: null
+      })
+
+      if (changeQuote.remainingDays <= 0) {
+        return reply.status(400).send({ error: '实例已过期，请先续费后再升级方案' })
+      }
+
+      if (!changeQuote.isUpgrade) {
+        return reply.status(400).send({ error: '只能升级到更高价格的方案' })
+      }
+
+      const priceDifference = changeQuote.priceDiff
+
+      // 8. 验证用户余额
+      const userBalance = Number(instance.user!.balance)
+      if (priceDifference > userBalance) {
+        return reply.status(400).send({
+          error: `用户余额不足，需要 ¥${priceDifference.toFixed(2)}，当前余额 ¥${userBalance.toFixed(2)}`
+        })
+      }
+
+      // 9. 检查是否需要同步到 Incus（资源变更）
+      const resourcesChanged = (
+        newPlan.cpu !== currentPlan.cpu ||
+        newPlan.memory !== currentPlan.memory ||
+        newPlan.disk !== currentPlan.disk
+      )
+
+      // 10. 执行事务：扣款 + 更新数据库
+      await prisma.$transaction(async (tx) => {
+        const balanceBefore = userBalance
+        const balanceAfter = balanceBefore - priceDifference
+        const monthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(tx as any, {
+          packageId: instance.packageId,
+          hostId: instance.hostId,
+          baseTrafficLimit: newPlan.trafficLimit
+        })
+
+        // 扣除用户余额
+        if (priceDifference > 0) {
+          await tx.user.update({
+            where: { id: instance.userId },
+            data: { balance: { decrement: priceDifference } }
+          })
+        }
+
+        // 记录余额变动日志
+        const balanceLog = await tx.balanceLog.create({
+          data: {
+            userId: instance.userId,
+            type: 'consume',
+            amount: -priceDifference,
+            balanceBefore,
+            balanceAfter,
+            instanceId,
+            remark: `方案升级：${currentPlan.name} → ${newPlan.name}，剩余 ${Math.ceil(changeQuote.remainingDays)} 天补差价`
+          }
+        })
+
+        // 更新实例信息
+        await tx.instance.update({
+          where: { id: instanceId },
+          data: {
+            packagePlanId: newPlan.id,
+            // 更新资源配置
+            cpu: newPlan.cpu,
+            memory: newPlan.memory,
+            disk: newPlan.disk,
+            // 更新配额
+            portLimit: newPlan.portLimit,
+            snapshotLimit: newPlan.snapshotLimit,
+            backupLimit: newPlan.backupLimit,
+            siteLimit: newPlan.siteLimit,
+            swapEnabled: instance.package?.instanceType === 'vm' ? false : instance.swapEnabled,
+            swapSize: instance.package?.instanceType === 'vm'
+              ? null
+              : (shouldSyncInstanceSwapSizeWithPlan(instance.swapSize, currentPlan.swapSize)
+                  ? newPlan.swapSize
+                  : instance.swapSize),
+            monthlyTrafficLimit,
+            trafficStatus: calculateInstanceTrafficStatus(instance.monthlyTrafficUsed, monthlyTrafficLimit),
+            // 更新计费信息（续费价格和周期）
+            billingPrice: Number(newPlan.price) / 100,
+            billingCycle: newPlan.billingCycle
+          }
+        })
+
+        // 记录计费记录
+        await tx.instanceBillingRecord.create({
+          data: {
+            instanceId,
+            userId: instance.userId,
+            type: 'upgrade',
+            amount: priceDifference,
+            months: 0,  // 升级不改变时长
+            periodStart: new Date(),
+            periodEnd: instance.expiresAt || new Date(),
+            balanceLogId: balanceLog.id,
+            remark: `方案升级：${currentPlan.name} → ${newPlan.name}（操作者: ${admin.username}）`
+          }
+        })
+      })
+
+      try {
+        const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+        await reconcileTrafficStateForInstanceIds([instanceId])
+      } catch (err) {
+        request.log.warn(err, '实例方案已更新，流量状态即时复核失败')
+      }
+
+      // 9. 同步资源配置到 Incus（如果有变更）
+      if (resourcesChanged && instance.host) {
+        try {
+          const { patchInstanceResources } = await import('../lib/incus/incus-instances.js')
+          const client = await getIncusClient(instance.host)
+          await patchInstanceResources(client, instance.incusId, {
+            cpu: newPlan.cpu,
+            memory: newPlan.memory,
+            disk: newPlan.disk
+          })
+          console.log(`[Upgrade Plan] Synced resources to Incus for instance ${instance.name}`)
+        } catch (incusErr) {
+          // Incus 同步失败不影响数据库更新，但记录日志
+          request.log.error(incusErr, `Incus 资源同步失败: ${instance.name}`)
+        }
+
+        // 更新宿主机资源使用量
+        const cpuDelta = newPlan.cpu - currentPlan.cpu
+        const memoryDelta = newPlan.memory - currentPlan.memory
+        const diskDelta = newPlan.disk - currentPlan.disk
+        if (cpuDelta !== 0 || memoryDelta !== 0 || diskDelta !== 0) {
+          await db.updateHostResources(instance.hostId, {
+            cpuUsed: instance.host.cpuUsed + cpuDelta,
+            memoryUsed: instance.host.memoryUsed + memoryDelta,
+            diskUsed: instance.host.diskUsed + diskDelta
+          })
+        }
+      }
+
+      // 10. 记录操作日志
+      await createLog(
+        admin.id,
+        'admin',
+        'instance.upgrade_plan',
+        `Admin upgraded instance "${instance.name}" plan: ${currentPlan.name} → ${newPlan.name} (User: ${instance.user?.username}, PriceDiff: ¥${priceDifference.toFixed(2)})`,
+        'success',
+        { instanceId }
+      )
+
+      // 11. 发送通知
+      await sendNotification(instance.userId, 'instance_plan_changed', {
+        instanceName: instance.name,
+        oldPlanName: currentPlan.name,
+        newPlanName: newPlan.name,
+        priceDiff: priceDifference
+      })
+
+      return {
+        success: true,
+        message: `方案已升级，补差价 ¥${priceDifference.toFixed(2)}`,
+        priceDifference,
+        oldPlan: { id: currentPlan.id, name: currentPlan.name },
+        newPlan: { id: newPlan.id, name: newPlan.name },
+        resourcesSynced: resourcesChanged
+      }
+    } catch (error) {
+      request.log.error(error, '升级方案失败')
+      return reply.status(500).send({ error: '升级方案失败' })
+    }
+  })
+}
+
+// 异步创建实例函数（从 instances.ts 复制，简化版）
+async function createInstanceAsync(
+  instanceId: number,
+  host: Host,
+  config: {
+    name: string
+    image: string
+    cpu: number
+    memory: number
+    disk: number
+    swapEnabled?: boolean
+    swapSize?: number | null
+    cloudInitConfig?: Record<string, string>
+    networkMode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+    nested?: boolean
+    privileged?: boolean
+    portLimit?: number
+    instanceType?: 'container' | 'vm'
+    sshPort?: number | null
+    storagePool?: string | null
+    ipv4Address?: string | null
+    ipv6Address?: string | null
+    ipv6Gateway?: string | null
+    hostInterface?: string | null
+    limitsRead?: string | null
+    limitsWrite?: string | null
+    limitsReadIops?: number | null
+    limitsWriteIops?: number | null
+    limitsIngress?: string | null
+    limitsEgress?: string | null
+    limitsProcesses?: number | null
+    limitsCpuPriority?: number | null
+    bootAutostart?: boolean | null
+    bootAutostartPriority?: number | null
+    bootAutostartDelay?: number | null
+    bootHostShutdownTimeout?: number | null
+  },
+  _userId: number,
+  _resources: { cpu: number; memory: number; disk: number }
+): Promise<void> {
+  try {
+    console.log(`\n[Admin Provisioning] ===== 开始创建实例流程 =====`)
+    console.log(`[Admin Provisioning] 实例ID: ${instanceId}, 名称: ${config.name}, 宿主机: ${host.name}`)
+
+    const client = await getIncusClient(host)
+
+    const ipv6Config = config.ipv6Address ? { primaryIp: config.ipv6Address } : null
+
+    const incusConfig = buildInstanceConfig({
+      name: config.name,
+      image: config.image,
+      cpu: config.cpu,
+      memory: config.memory,
+      disk: config.disk,
+      swapEnabled: config.swapEnabled,
+      swapSize: config.swapSize,
+      sshKey: '',
+      password: '',
+      cloudInitConfig: config.cloudInitConfig as { 'user.user-data': string } | undefined,
+      networkMode: config.networkMode,
+      nested: config.nested || false,
+      privileged: config.privileged || false,
+      instanceType: config.instanceType || 'container',
+      storagePool: config.storagePool || 'default',
+      ipv4Address: config.ipv4Address,
+      ipv6Config,
+      hostInterface: config.hostInterface || 'eth0',
+      ipv6Address: config.ipv6Address,
+      ipv6Gateway: config.ipv6Gateway,
+      limitsRead: config.limitsRead,
+      limitsWrite: config.limitsWrite,
+      limitsReadIops: config.limitsReadIops,
+      limitsWriteIops: config.limitsWriteIops,
+      limitsIngress: config.limitsIngress,
+      limitsEgress: config.limitsEgress,
+      limitsProcesses: config.limitsProcesses,
+      limitsCpuPriority: config.limitsCpuPriority,
+      bootAutostart: config.bootAutostart,
+      bootAutostartPriority: config.bootAutostartPriority,
+      bootAutostartDelay: config.bootAutostartDelay,
+      bootHostShutdownTimeout: config.bootHostShutdownTimeout
+    })
+
+    console.log(`[Admin Provisioning] 正在调用 Incus API 创建实例...`)
+    await createInstance(client, incusConfig)
+
+    // 等待实例创建完成
+    let ready = false
+    for (let i = 0; i < 60; i++) {
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      try {
+        const stateResp = await getInstanceState(client, config.name) as { status?: string }
+        if (stateResp?.status) {
+          ready = true
+          break
+        }
+      } catch {
+        // 继续等待
+      }
+    }
+
+    if (!ready) {
+      throw new Error('实例创建超时')
+    }
+
+    // 启动实例
+    console.log(`[Admin Provisioning] 正在启动实例...`)
+    await startInstance(client, config.name)
+
+    // 等待启动完成
+    for (let i = 0; i < 30; i++) {
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      try {
+        const stateResp = await getInstanceState(client, config.name) as { status?: string }
+        if (stateResp?.status === 'Running') {
+          break
+        }
+      } catch {
+        // 继续等待
+      }
+    }
+
+    // 获取 IP 地址
+    let ipv4: string | null = config.ipv4Address || null
+    let ipv6: string | null = config.ipv6Address || null
+
+    try {
+      const stateResp = await getInstanceState(client, config.name) as { network?: Record<string, { addresses?: Array<{ family: string; scope: string; address: string }> }> }
+      const network = stateResp?.network
+      if (network?.eth0?.addresses) {
+        for (const addr of network.eth0.addresses) {
+          if (addr.family === 'inet' && addr.scope === 'global') {
+            ipv4 = addr.address
+          } else if (addr.family === 'inet6' && addr.scope === 'global') {
+            ipv6 = addr.address
+          }
+        }
+      }
+    } catch {
+      // 使用预分配的 IP
+    }
+
+    // 更新数据库
+    await prisma.instance.update({
+      where: { id: instanceId },
+      data: {
+        status: 'running',
+        ipv4,
+        ipv6,
+        storagePoolName: config.storagePool || 'default'
+      }
+    })
+
+    console.log(`[Admin Provisioning] 实例 ${instanceId} 创建成功`)
+
+  } catch (error) {
+    console.error(`[Admin Provisioning] 实例 ${instanceId} 创建失败:`, error)
+
+    await prisma.instance.update({
+      where: { id: instanceId },
+      data: { status: 'error' }
+    }).catch(() => { })
+
+    throw error
+  }
+}
diff --git a/server/src/routes/admin-entertainment.ts b/server/src/routes/admin-entertainment.ts
new file mode 100644
index 0000000..c9a74cc
--- /dev/null
+++ b/server/src/routes/admin-entertainment.ts
@@ -0,0 +1,1190 @@
+/**
+ * 娱乐系统 - 管理端 API
+ * 抽奖管理、用户积分管理等功能
+ */
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import type { LotteryPrizeType, LotteryRecordStatus } from '@prisma/client'
+
+function normalizeOptionalText(value: unknown): string | null | undefined {
+  if (value === undefined) return undefined
+  if (value === null) return null
+  if (typeof value !== 'string') return undefined
+  const trimmed = value.trim()
+  return trimmed || null
+}
+
+function requireText(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed || null
+}
+
+function isValidCatalogId(id: string): boolean {
+  return /^[a-zA-Z0-9_-]{1,64}$/.test(id)
+}
+
+function isValidAssetUrl(url: string): boolean {
+  return (url.startsWith('/') && !url.startsWith('//')) ||
+    url.startsWith('https://') ||
+    url.startsWith('http://')
+}
+
+export default async function adminEntertainmentRoutes(fastify: FastifyInstance) {
+  // ==================== 抽奖管理 API ====================
+
+  /**
+   * 获取所有抽奖列表
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      isActive?: string
+    }
+  }>('/lotteries', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; isActive?: string } }>) => {
+    const { page = '1', pageSize = '20', isActive } = request.query
+
+    const result = await db.getAllLotteries({
+      page: Number(page),
+      pageSize: Number(pageSize),
+      isActive: isActive === 'true' ? true : isActive === 'false' ? false : undefined
+    })
+
+    return {
+      lotteries: result.lotteries.map(lottery => ({
+        id: lottery.id,
+        name: lottery.name,
+        description: lottery.description,
+        costPoints: lottery.costPoints,
+        isActive: lottery.isActive,
+        startAt: lottery.startAt?.toISOString() || null,
+        endAt: lottery.endAt?.toISOString() || null,
+        totalDraws: lottery._count.records,  // 使用实时统计，而非数据库存储值
+        prizesCount: lottery.prizes.length,
+        createdAt: lottery.createdAt.toISOString(),
+        prizes: lottery.prizes.map(prize => ({
+          id: prize.id,
+          name: prize.name,
+          type: prize.type,
+          value: prize.value,
+          probability: Number(prize.probability),
+          totalQuantity: prize.totalQuantity,
+          remainQuantity: prize.remainQuantity,
+          displayOrder: prize.displayOrder,
+          instanceDesc: prize.instanceDesc
+        }))
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  /**
+   * 创建抽奖
+   */
+  fastify.post<{
+    Body: {
+      name: string
+      description?: string
+      costPoints: number
+      isActive?: boolean
+      startAt?: string
+      endAt?: string
+    }
+  }>('/lotteries', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Body: {
+      name: string
+      description?: string
+      costPoints: number
+      isActive?: boolean
+      startAt?: string
+      endAt?: string
+    }
+  }>, reply: FastifyReply) => {
+    const { name, description, costPoints, isActive, startAt, endAt } = request.body
+
+    if (!name || typeof name !== 'string' || name.trim().length === 0) {
+      return reply.code(400).send({ error: 'NAME_REQUIRED', message: 'Lottery name is required' })
+    }
+
+    if (!costPoints || costPoints < 1) {
+      return reply.code(400).send({ error: 'INVALID_COST', message: 'Cost points must be at least 1' })
+    }
+
+    const lottery = await db.createLottery({
+      name: name.trim(),
+      description: description?.trim(),
+      costPoints,
+      isActive,
+      startAt: startAt ? new Date(startAt) : undefined,
+      endAt: endAt ? new Date(endAt) : undefined,
+      createdBy: request.user.id
+    })
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.create',
+      `Created lottery "${lottery.name}" (ID: ${lottery.id})`,
+      'success'
+    )
+
+    return { success: true, lottery: { id: lottery.id, name: lottery.name } }
+  })
+
+  /**
+   * 更新抽奖
+   */
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      description?: string
+      costPoints?: number
+      isActive?: boolean
+      startAt?: string | null
+      endAt?: string | null
+    }
+  }>('/lotteries/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      description?: string
+      costPoints?: number
+      isActive?: boolean
+      startAt?: string | null
+      endAt?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    const existing = await db.getLotteryById(lotteryId)
+    if (!existing) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+
+    const { name, description, costPoints, isActive, startAt, endAt } = request.body
+
+    await db.updateLottery(lotteryId, {
+      name: name?.trim(),
+      description: description?.trim(),
+      costPoints,
+      isActive,
+      startAt: startAt === null ? null : startAt ? new Date(startAt) : undefined,
+      endAt: endAt === null ? null : endAt ? new Date(endAt) : undefined
+    })
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.update',
+      `Updated lottery "${existing.name}" (ID: ${lotteryId})`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  /**
+   * 删除抽奖
+   */
+  fastify.delete<{ Params: { id: string } }>('/lotteries/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    const existing = await db.getLotteryById(lotteryId)
+    if (!existing) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+
+    await db.deleteLottery(lotteryId)
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.delete',
+      `Deleted lottery "${existing.name}" (ID: ${lotteryId})`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  /**
+   * 获取抽奖详情
+   */
+  fastify.get<{ Params: { id: string } }>('/lotteries/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    const lottery = await db.getLotteryById(lotteryId)
+
+    if (!lottery) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+
+    const stats = await db.getLotteryStats(lotteryId)
+
+    return {
+      lottery: {
+        id: lottery.id,
+        name: lottery.name,
+        description: lottery.description,
+        costPoints: lottery.costPoints,
+        isActive: lottery.isActive,
+        startAt: lottery.startAt?.toISOString() || null,
+        endAt: lottery.endAt?.toISOString() || null,
+        totalDraws: stats.totalDraws,  // 使用实时统计，而非数据库存储值
+        createdAt: lottery.createdAt.toISOString(),
+        prizes: lottery.prizes.map(prize => ({
+          id: prize.id,
+          name: prize.name,
+          type: prize.type,
+          value: prize.value,
+          probability: Number(prize.probability),
+          totalQuantity: prize.totalQuantity,
+          remainQuantity: prize.remainQuantity,
+          displayOrder: prize.displayOrder,
+          instanceDesc: prize.instanceDesc
+        })),
+        notificationConfig: lottery.notificationConfig ? {
+          enabled: lottery.notificationConfig.enabled,
+          type: lottery.notificationConfig.type,
+          config: lottery.notificationConfig.config,
+          notifyBalance: lottery.notificationConfig.notifyBalance,
+          notifyInstance: lottery.notificationConfig.notifyInstance
+        } : null,
+        stats
+      }
+    }
+  })
+
+  // ==================== 奖品管理 API ====================
+
+  /**
+   * 添加奖品
+   */
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      name: string
+      type: LotteryPrizeType
+      value?: number
+      probability: number
+      totalQuantity?: number
+      displayOrder?: number
+      instanceDesc?: string
+    }
+  }>('/lotteries/:id/prizes', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      name: string
+      type: LotteryPrizeType
+      value?: number
+      probability: number
+      totalQuantity?: number
+      displayOrder?: number
+      instanceDesc?: string
+    }
+  }>, reply: FastifyReply) => {
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    const lottery = await db.getLotteryById(lotteryId)
+    if (!lottery) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+
+    const { name, type, value, probability, totalQuantity, displayOrder, instanceDesc } = request.body
+    const normalizedValue = type === 'badge' || type === 'nothing' ? 0 : value
+
+    if (!name || typeof name !== 'string') {
+      return reply.code(400).send({ error: 'NAME_REQUIRED', message: 'Prize name is required' })
+    }
+
+    if (probability < 0 || probability > 100) {
+      return reply.code(400).send({ error: 'INVALID_PROBABILITY', message: 'Probability must be between 0 and 100' })
+    }
+
+    // 只有 balance 和 instance 类型可以设置总数量，points 和 nothing 类型不能设置数量
+    if ((type === 'points' || type === 'nothing') && totalQuantity !== undefined && totalQuantity !== null) {
+      return reply.code(400).send({ 
+        error: 'INVALID_QUANTITY', 
+        message: 'Points and nothing prizes cannot have quantity limits' 
+      })
+    }
+
+    const prize = await db.createPrize({
+      lotteryId,
+      name: name.trim(),
+      type,
+      value: normalizedValue,
+      probability,
+      totalQuantity,
+      displayOrder,
+      instanceDesc: instanceDesc?.trim()
+    })
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.prize.create',
+      `Added prize "${prize.name}" to lottery "${lottery.name}"`,
+      'success'
+    )
+
+    return { success: true, prize: { id: prize.id, name: prize.name } }
+  })
+
+  /**
+   * 更新奖品
+   */
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      type?: LotteryPrizeType
+      value?: number
+      probability?: number
+      totalQuantity?: number | null
+      remainQuantity?: number | null
+      displayOrder?: number
+      instanceDesc?: string | null
+    }
+  }>('/prizes/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      type?: LotteryPrizeType
+      value?: number
+      probability?: number
+      totalQuantity?: number | null
+      remainQuantity?: number | null
+      displayOrder?: number
+      instanceDesc?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const prizeId = Number(request.params.id)
+
+    if (isNaN(prizeId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid prize ID' })
+    }
+
+    const existing = await db.getPrizeById(prizeId)
+    if (!existing) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Prize not found' })
+    }
+
+    const { name, type, value, probability, totalQuantity, remainQuantity, displayOrder, instanceDesc } = request.body
+
+    if (probability !== undefined && (probability < 0 || probability > 100)) {
+      return reply.code(400).send({ error: 'INVALID_PROBABILITY', message: 'Probability must be between 0 and 100' })
+    }
+
+    // 检查奖品类型与数量限制的匹配性
+    const prizeType = type ?? existing.type
+    const normalizedValue = prizeType === 'badge' || prizeType === 'nothing' ? 0 : value
+    if ((prizeType === 'points' || prizeType === 'nothing') && 
+        (totalQuantity !== undefined && totalQuantity !== null)) {
+      return reply.code(400).send({ 
+        error: 'INVALID_QUANTITY', 
+        message: 'Points and nothing prizes cannot have quantity limits' 
+      })
+    }
+
+    await db.updatePrize(prizeId, {
+      name: name?.trim(),
+      type,
+      value: normalizedValue,
+      probability,
+      totalQuantity,
+      remainQuantity,
+      displayOrder,
+      instanceDesc
+    })
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.prize.update',
+      `Updated prize "${existing.name}" (ID: ${prizeId})`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  /**
+   * 删除奖品
+   */
+  fastify.delete<{ Params: { id: string } }>('/prizes/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const prizeId = Number(request.params.id)
+
+    if (isNaN(prizeId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid prize ID' })
+    }
+
+    const existing = await db.getPrizeById(prizeId)
+    if (!existing) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Prize not found' })
+    }
+
+    await db.deletePrize(prizeId)
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.prize.delete',
+      `Deleted prize "${existing.name}" (ID: ${prizeId})`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // ==================== 通知配置 API ====================
+
+  /**
+   * 更新抽奖通知配置
+   */
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      enabled: boolean
+      type: string
+      config: Record<string, unknown>
+      notifyBalance: boolean
+      notifyInstance: boolean
+    }
+  }>('/lotteries/:id/notification', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      enabled: boolean
+      type: string
+      config: Record<string, unknown>
+      notifyBalance: boolean
+      notifyInstance: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    const lottery = await db.getLotteryById(lotteryId)
+    if (!lottery) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+
+    const { enabled, type, config, notifyBalance, notifyInstance } = request.body
+
+    if (!['telegram', 'discord', 'webhook'].includes(type)) {
+      return reply.code(400).send({ error: 'INVALID_TYPE', message: 'Invalid notification type' })
+    }
+
+    await db.upsertLotteryNotificationConfig(lotteryId, {
+      enabled,
+      type,
+      config,
+      notifyBalance,
+      notifyInstance
+    })
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.notification.update',
+      `Updated notification config for lottery "${lottery.name}"`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // ==================== 中奖记录管理 API ====================
+
+  /**
+   * 获取所有中奖记录
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      lotteryId?: string
+      prizeType?: string
+      status?: string
+      search?: string
+    }
+  }>('/lottery-records', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      lotteryId?: string
+      prizeType?: string
+      status?: string
+      search?: string
+    }
+  }>) => {
+    const { page = '1', pageSize = '20', lotteryId, prizeType, status, search } = request.query
+
+    const result = await db.getAllLotteryRecords({
+      page: Number(page),
+      pageSize: Number(pageSize),
+      lotteryId: lotteryId ? Number(lotteryId) : undefined,
+      prizeType: prizeType as LotteryPrizeType | undefined,
+      status: status as LotteryRecordStatus | undefined,
+      search
+    })
+
+    return {
+      records: result.records.map(record => ({
+        id: record.id,
+        lotteryId: record.lotteryId,
+        lotteryName: record.lottery.name,
+        userId: record.userId,
+        username: record.user.username,
+        userAvatar: record.user.avatarStyle,
+        prizeType: record.prizeType,
+        prizeName: record.prizeName,
+        prizeValue: record.prizeValue,
+        instanceDesc: record.prize?.instanceDesc || null,
+        status: record.status,
+        pointsSpent: record.pointsSpent,
+        deliveredAt: record.deliveredAt?.toISOString() || null,
+        deliveredBy: record.deliveredBy,
+        ticketId: record.ticketId,
+        createdAt: record.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  /**
+   * 标记实例奖励为已发放
+   */
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      ticketId?: number
+    }
+  }>('/lottery-records/:id/deliver', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { ticketId?: number }
+  }>, reply: FastifyReply) => {
+    const recordId = Number(request.params.id)
+
+    if (isNaN(recordId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid record ID' })
+    }
+
+    const record = await db.prisma.lotteryRecord.findUnique({
+      where: { id: recordId },
+      include: { user: { select: { username: true } } }
+    })
+
+    if (!record) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Record not found' })
+    }
+
+    if (record.prizeType !== 'instance') {
+      return reply.code(400).send({ error: 'NOT_INSTANCE_PRIZE', message: 'This is not an instance prize' })
+    }
+
+    if (record.status !== 'pending') {
+      return reply.code(400).send({ error: 'ALREADY_DELIVERED', message: 'Prize has already been delivered' })
+    }
+
+    await db.updateLotteryRecordStatus(
+      recordId,
+      'delivered',
+      request.user.id,
+      request.body.ticketId
+    )
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.record.deliver',
+      `Delivered instance prize to user "${record.user.username}" (Record ID: ${recordId})`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // ==================== 用户积分管理 API ====================
+
+  /**
+   * 获取所有用户积分列表
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      orderBy?: string
+      order?: string
+    }
+  }>('/user-points', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      orderBy?: string
+      order?: string
+    }
+  }>) => {
+    const { page = '1', pageSize = '20', search, orderBy = 'points', order = 'desc' } = request.query
+
+    const result = await db.getAllUserPoints({
+      page: Number(page),
+      pageSize: Number(pageSize),
+      search,
+      orderBy: orderBy as 'points' | 'totalEarned' | 'totalSpent',
+      order: order as 'asc' | 'desc'
+    })
+
+    return {
+      records: result.records.map(record => ({
+        userId: record.userId,
+        username: record.user.username,
+        userAvatar: record.user.avatarStyle,
+        points: record.points,
+        totalEarned: record.totalEarned,
+        totalSpent: record.totalSpent,
+        convertedConsume: Number(record.convertedConsume),
+        lastConvertedAt: record.lastConvertedAt?.toISOString() || null,
+        updatedAt: record.updatedAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  /**
+   * 调整用户积分
+   */
+  fastify.post<{
+    Params: { userId: string }
+    Body: {
+      amount: number
+      remark: string
+    }
+  }>('/user-points/:userId/adjust', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { userId: string }
+    Body: { amount: number; remark: string }
+  }>, reply: FastifyReply) => {
+    const userId = Number(request.params.userId)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid user ID' })
+    }
+
+    const { amount, remark } = request.body
+
+    if (!amount || amount === 0) {
+      return reply.code(400).send({ error: 'INVALID_AMOUNT', message: 'Amount must be non-zero' })
+    }
+
+    if (!remark || typeof remark !== 'string' || remark.trim().length === 0) {
+      return reply.code(400).send({ error: 'REMARK_REQUIRED', message: 'Remark is required' })
+    }
+
+    const user = await db.prisma.user.findUnique({
+      where: { id: userId },
+      select: { username: true }
+    })
+
+    if (!user) {
+      return reply.code(404).send({ error: 'USER_NOT_FOUND', message: 'User not found' })
+    }
+
+    const result = await db.adminAdjustPoints(
+      userId,
+      amount,
+      `[管理员${request.user.username}] ${remark.trim()}`
+    )
+
+    if (!result.success) {
+      return reply.code(400).send({ error: 'ADJUST_FAILED', message: result.message })
+    }
+
+    await createLog(
+      request.user.id,
+      'admin',
+      'lottery.points.adjust',
+      `Adjusted user "${user.username}" points by ${amount} (New: ${result.newPoints}): ${remark}`,
+      'success'
+    )
+
+    return { success: true, newPoints: result.newPoints }
+  })
+
+  /**
+   * 获取用户积分详情
+   */
+  fastify.get<{ Params: { userId: string } }>('/user-points/:userId', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { userId: string } }>, reply: FastifyReply) => {
+    const userId = Number(request.params.userId)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid user ID' })
+    }
+
+    const [userPoints, convertible, user] = await Promise.all([
+      db.getUserPoints(userId),
+      db.getConvertibleConsume(userId),
+      db.prisma.user.findUnique({
+        where: { id: userId },
+        select: { id: true, username: true, avatarStyle: true }
+      })
+    ])
+
+    if (!user) {
+      return reply.code(404).send({ error: 'USER_NOT_FOUND', message: 'User not found' })
+    }
+
+    return {
+      user: {
+        id: user.id,
+        username: user.username,
+        avatarStyle: user.avatarStyle
+      },
+      points: userPoints.points,
+      totalEarned: userPoints.totalEarned,
+      totalSpent: userPoints.totalSpent,
+      convertedConsume: Number(userPoints.convertedConsume),
+      lastConvertedAt: userPoints.lastConvertedAt?.toISOString() || null,
+      // 可兑换信息
+      totalConsume: convertible.totalConsume,
+      convertibleAmount: convertible.convertibleAmount,
+      convertiblePoints: convertible.convertiblePoints
+    }
+  })
+
+  /**
+   * 获取用户积分日志
+   */
+  fastify.get<{
+    Params: { userId: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>('/user-points/:userId/logs', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { userId: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>, reply: FastifyReply) => {
+    const userId = Number(request.params.userId)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid user ID' })
+    }
+
+    const { page = '1', pageSize = '20' } = request.query
+
+    const result = await db.getPointsLogs(userId, {
+      page: Number(page),
+      pageSize: Number(pageSize)
+    })
+
+    return {
+      logs: result.logs.map(log => ({
+        id: log.id,
+        type: log.type,
+        amount: log.amount,
+        pointsBefore: log.pointsBefore,
+        pointsAfter: log.pointsAfter,
+        remark: log.remark,
+        createdAt: log.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // ==================== 徽章目录管理 API ====================
+
+  fastify.get('/badges/catalog', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async () => db.getAdminBadgeCatalog())
+
+  fastify.post<{
+    Body: {
+      id?: string
+      title?: string
+      nameZh?: string
+      nameEn?: string | null
+      description?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>('/badges/series', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Body: {
+      id?: string
+      title?: string
+      nameZh?: string
+      nameEn?: string | null
+      description?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const id = requireText(request.body.id)
+    const title = requireText(request.body.title)
+    const nameZh = requireText(request.body.nameZh)
+    const description = requireText(request.body.description)
+
+    if (!id || !isValidCatalogId(id)) {
+      return reply.code(400).send({ error: 'INVALID_SERIES_ID', message: 'Invalid series ID' })
+    }
+    if (!title || !nameZh || !description) {
+      return reply.code(400).send({ error: 'INVALID_SERIES_DATA', message: 'Series title, Chinese name and description are required' })
+    }
+
+    try {
+      const series = await db.createBadgeSeries({
+        id,
+        title,
+        nameZh,
+        nameEn: normalizeOptionalText(request.body.nameEn),
+        description,
+        sourceId: normalizeOptionalText(request.body.sourceId),
+        sourceLabel: normalizeOptionalText(request.body.sourceLabel),
+        displayOrder: Number(request.body.displayOrder ?? 0),
+        isActive: request.body.isActive ?? true
+      })
+
+      await createLog(request.user.id, 'admin', 'badge.series.create', `Created badge series "${series.title}" (${series.id})`, 'success')
+      return { success: true, series }
+    } catch (error) {
+      const code = (error as { code?: string }).code
+      if (code === 'P2002') {
+        return reply.code(409).send({ error: 'SERIES_ID_EXISTS', message: 'Series ID already exists' })
+      }
+      throw error
+    }
+  })
+
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      title?: string
+      nameZh?: string
+      nameEn?: string | null
+      description?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>('/badges/series/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      title?: string
+      nameZh?: string
+      nameEn?: string | null
+      description?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const data = {
+      title: request.body.title === undefined ? undefined : requireText(request.body.title),
+      nameZh: request.body.nameZh === undefined ? undefined : requireText(request.body.nameZh),
+      nameEn: normalizeOptionalText(request.body.nameEn),
+      description: request.body.description === undefined ? undefined : requireText(request.body.description),
+      sourceId: normalizeOptionalText(request.body.sourceId),
+      sourceLabel: normalizeOptionalText(request.body.sourceLabel),
+      displayOrder: request.body.displayOrder,
+      isActive: request.body.isActive
+    }
+
+    if (data.title === null || data.nameZh === null || data.description === null) {
+      return reply.code(400).send({ error: 'INVALID_SERIES_DATA', message: 'Series title, Chinese name and description cannot be empty' })
+    }
+
+    try {
+      await db.updateBadgeSeries(request.params.id, data as {
+        title?: string
+        nameZh?: string
+        nameEn?: string | null
+        description?: string
+        sourceId?: string | null
+        sourceLabel?: string | null
+        displayOrder?: number
+        isActive?: boolean
+      })
+      await createLog(request.user.id, 'admin', 'badge.series.update', `Updated badge series "${request.params.id}"`, 'success')
+      return { success: true }
+    } catch (error) {
+      if ((error as { code?: string }).code === 'P2025') {
+        return reply.code(404).send({ error: 'SERIES_NOT_FOUND', message: 'Series not found' })
+      }
+      throw error
+    }
+  })
+
+  fastify.delete<{ Params: { id: string } }>('/badges/series/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    try {
+      await db.deleteBadgeSeries(request.params.id)
+      await createLog(request.user.id, 'admin', 'badge.series.delete', `Deleted badge series "${request.params.id}"`, 'success')
+      return { success: true }
+    } catch (error) {
+      if (error instanceof Error && error.message === 'BADGE_SERIES_HAS_BADGES') {
+        return reply.code(400).send({ error: 'BADGE_SERIES_HAS_BADGES', message: 'Series still has badges; disable it instead or move/delete badges first' })
+      }
+      if ((error as { code?: string }).code === 'P2025') {
+        return reply.code(404).send({ error: 'SERIES_NOT_FOUND', message: 'Series not found' })
+      }
+      throw error
+    }
+  })
+
+  fastify.post<{
+    Body: {
+      id?: string
+      name?: string
+      nameEn?: string | null
+      fullLabel?: string
+      seriesId?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      assetUrl?: string
+      assetUrlDark?: string | null
+      assetUrlLight?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>('/badges', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Body: {
+      id?: string
+      name?: string
+      nameEn?: string | null
+      fullLabel?: string
+      seriesId?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      assetUrl?: string
+      assetUrlDark?: string | null
+      assetUrlLight?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const id = requireText(request.body.id)
+    const name = requireText(request.body.name)
+    const fullLabel = requireText(request.body.fullLabel)
+    const seriesId = requireText(request.body.seriesId)
+    const assetUrl = requireText(request.body.assetUrl)
+    const assetUrlDark = normalizeOptionalText(request.body.assetUrlDark)
+    const assetUrlLight = normalizeOptionalText(request.body.assetUrlLight)
+
+    if (!id || !isValidCatalogId(id)) {
+      return reply.code(400).send({ error: 'INVALID_BADGE_ID', message: 'Invalid badge ID' })
+    }
+    if (!name || !fullLabel || !seriesId || !assetUrl) {
+      return reply.code(400).send({ error: 'INVALID_BADGE_DATA', message: 'Badge name, label, series and asset URL are required' })
+    }
+    if (![assetUrl, assetUrlDark, assetUrlLight].every(url => !url || isValidAssetUrl(url))) {
+      return reply.code(400).send({ error: 'INVALID_ASSET_URL', message: 'Asset URL must be a local path or http(s) URL' })
+    }
+
+    try {
+      const badge = await db.createBadge({
+        id,
+        name,
+        nameEn: normalizeOptionalText(request.body.nameEn),
+        fullLabel,
+        seriesId,
+        sourceId: normalizeOptionalText(request.body.sourceId),
+        sourceLabel: normalizeOptionalText(request.body.sourceLabel),
+        assetUrl,
+        assetUrlDark,
+        assetUrlLight,
+        displayOrder: Number(request.body.displayOrder ?? 0),
+        isActive: request.body.isActive ?? true
+      })
+
+      await createLog(request.user.id, 'admin', 'badge.create', `Created badge "${badge.name}" (${badge.id})`, 'success')
+      return { success: true, badge }
+    } catch (error) {
+      const code = (error as { code?: string }).code
+      if (code === 'P2002') {
+        return reply.code(409).send({ error: 'BADGE_ID_EXISTS', message: 'Badge ID already exists' })
+      }
+      if (code === 'P2003') {
+        return reply.code(400).send({ error: 'SERIES_NOT_FOUND', message: 'Series not found' })
+      }
+      throw error
+    }
+  })
+
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      nameEn?: string | null
+      fullLabel?: string
+      seriesId?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      assetUrl?: string
+      assetUrlDark?: string | null
+      assetUrlLight?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>('/badges/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      nameEn?: string | null
+      fullLabel?: string
+      seriesId?: string
+      sourceId?: string | null
+      sourceLabel?: string | null
+      assetUrl?: string
+      assetUrlDark?: string | null
+      assetUrlLight?: string | null
+      displayOrder?: number
+      isActive?: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const assetUrl = request.body.assetUrl === undefined ? undefined : requireText(request.body.assetUrl)
+    const assetUrlDark = normalizeOptionalText(request.body.assetUrlDark)
+    const assetUrlLight = normalizeOptionalText(request.body.assetUrlLight)
+    if (assetUrl === null) {
+      return reply.code(400).send({ error: 'INVALID_ASSET_URL', message: 'Asset URL cannot be empty' })
+    }
+    if ([assetUrl, assetUrlDark, assetUrlLight].some(url => !!url && !isValidAssetUrl(url))) {
+      return reply.code(400).send({ error: 'INVALID_ASSET_URL', message: 'Asset URL must be a local path or http(s) URL' })
+    }
+
+    const data = {
+      name: request.body.name === undefined ? undefined : requireText(request.body.name),
+      nameEn: normalizeOptionalText(request.body.nameEn),
+      fullLabel: request.body.fullLabel === undefined ? undefined : requireText(request.body.fullLabel),
+      seriesId: request.body.seriesId === undefined ? undefined : requireText(request.body.seriesId),
+      sourceId: normalizeOptionalText(request.body.sourceId),
+      sourceLabel: normalizeOptionalText(request.body.sourceLabel),
+      assetUrl,
+      assetUrlDark,
+      assetUrlLight,
+      displayOrder: request.body.displayOrder,
+      isActive: request.body.isActive
+    }
+
+    if (data.name === null || data.fullLabel === null || data.seriesId === null) {
+      return reply.code(400).send({ error: 'INVALID_BADGE_DATA', message: 'Badge name, label and series cannot be empty' })
+    }
+
+    try {
+      await db.updateBadge(request.params.id, data as {
+        name?: string
+        nameEn?: string | null
+        fullLabel?: string
+        seriesId?: string
+        sourceId?: string | null
+        sourceLabel?: string | null
+        assetUrl?: string
+        assetUrlDark?: string | null
+        assetUrlLight?: string | null
+        displayOrder?: number
+        isActive?: boolean
+      })
+      await createLog(request.user.id, 'admin', 'badge.update', `Updated badge "${request.params.id}"`, 'success')
+      return { success: true }
+    } catch (error) {
+      const code = (error as { code?: string }).code
+      if (code === 'P2025') {
+        return reply.code(404).send({ error: 'BADGE_NOT_FOUND', message: 'Badge not found' })
+      }
+      if (code === 'P2003') {
+        return reply.code(400).send({ error: 'SERIES_NOT_FOUND', message: 'Series not found' })
+      }
+      throw error
+    }
+  })
+
+  fastify.delete<{ Params: { id: string } }>('/badges/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    try {
+      await db.deleteBadge(request.params.id)
+      await createLog(request.user.id, 'admin', 'badge.delete', `Deleted badge "${request.params.id}"`, 'success')
+      return { success: true }
+    } catch (error) {
+      if (error instanceof Error && error.message === 'BADGE_IN_USE') {
+        return reply.code(400).send({ error: 'BADGE_IN_USE', message: 'Badge is in use; disable it instead' })
+      }
+      if ((error as { code?: string }).code === 'P2025') {
+        return reply.code(404).send({ error: 'BADGE_NOT_FOUND', message: 'Badge not found' })
+      }
+      throw error
+    }
+  })
+}
diff --git a/server/src/routes/admin-hosting.ts b/server/src/routes/admin-hosting.ts
new file mode 100644
index 0000000..cb4b2da
--- /dev/null
+++ b/server/src/routes/admin-hosting.ts
@@ -0,0 +1,547 @@
+/**
+ * 管理员托管管理路由
+ */
+
+import { FastifyInstance } from 'fastify'
+import { Prisma } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { buildHostingVipSql, calculateVipLevel, getVipBadgeStyleForLevel, getVipRules, type NormalizedVipRule } from '../services/vip-levels.js'
+
+interface HostingOwnerRow {
+  id: number
+  username: string
+  email: string | null
+  status: string
+  avatarStyle: string
+  avatarBadgeId: string | null
+  hostingBalance: unknown
+  createdAt: Date
+  hostCount: number
+  listedPackageCount: number
+  instanceCount: number
+  frozenBalance: unknown
+  totalHostingIncome: unknown
+  hostingZoneId: number | null
+}
+
+interface CountRow {
+  total: number
+}
+
+interface SummaryRow {
+  totalHosts: number
+  totalListedPackages: number
+  totalInstances: number
+  totalAvailableBalance: unknown
+  totalFrozenBalance: unknown
+  totalHostingIncome: unknown
+}
+
+interface HostingZonePayload {
+  name?: string
+  ownerId?: number
+  logoUrl?: string
+}
+
+const MAX_LOGO_URL_LENGTH = 2048
+const HOSTING_OWNER_SORT_FIELDS = [
+  'vipLevel',
+  'hostingBalance',
+  'frozenBalance',
+  'totalIncome',
+  'hostCount',
+  'packageCount',
+  'instanceCount'
+] as const
+
+type HostingOwnerSortBy = typeof HOSTING_OWNER_SORT_FIELDS[number]
+type SortOrder = 'asc' | 'desc'
+
+function toNumber(value: unknown): number {
+  if (value === null || value === undefined) return 0
+  if (typeof value === 'number') return value
+  if (typeof value === 'bigint') return Number(value)
+  return Number.parseFloat(String(value)) || 0
+}
+
+function roundMoney(value: number): number {
+  return Number(value.toFixed(2))
+}
+
+function parseBoundedInt(value: string | undefined, fallback: number, min: number, max: number): number {
+  const parsed = Number.parseInt(value || '', 10)
+  if (!Number.isFinite(parsed)) return fallback
+  return Math.min(max, Math.max(min, parsed))
+}
+
+function normalizeHostingOwnerSortBy(value: string | undefined): HostingOwnerSortBy {
+  return HOSTING_OWNER_SORT_FIELDS.includes(value as HostingOwnerSortBy)
+    ? value as HostingOwnerSortBy
+    : 'totalIncome'
+}
+
+function normalizeSortOrder(value: string | undefined): SortOrder {
+  return value === 'asc' ? 'asc' : 'desc'
+}
+
+function buildHostingOwnerOrderSql(sortBy: HostingOwnerSortBy, sortOrder: SortOrder, vipRules: NormalizedVipRule[]): Prisma.Sql {
+  const direction = Prisma.raw(sortOrder === 'asc' ? 'ASC' : 'DESC')
+  const expression = (() => {
+    switch (sortBy) {
+      case 'vipLevel':
+        return buildHostingVipSql(vipRules)
+      case 'hostingBalance':
+        return Prisma.sql`"hostingBalance"`
+      case 'frozenBalance':
+        return Prisma.sql`"frozenBalance"`
+      case 'hostCount':
+        return Prisma.sql`"hostCount"`
+      case 'packageCount':
+        return Prisma.sql`"listedPackageCount"`
+      case 'instanceCount':
+        return Prisma.sql`"instanceCount"`
+      case 'totalIncome':
+      default:
+        return Prisma.sql`"totalHostingIncome"`
+    }
+  })()
+
+  return Prisma.sql`ORDER BY ${expression} ${direction}, id ASC`
+}
+
+function escapeLike(value: string): string {
+  return value.replace(/[\\%_]/g, char => `\\${char}`)
+}
+
+function normalizeZoneName(value: unknown): string {
+  return String(value || '').trim().replace(/\s+/g, ' ').slice(0, 40)
+}
+
+function validateLogoUrl(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  if (!trimmed || trimmed.length > MAX_LOGO_URL_LENGTH || /\s/.test(trimmed)) return null
+
+  let url: URL
+  try {
+    url = new URL(trimmed)
+  } catch {
+    return null
+  }
+
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return null
+  if (!url.hostname || url.username || url.password) return null
+
+  url.hash = ''
+  return url.toString()
+}
+
+function buildSearchSql(search: string): Prisma.Sql {
+  const keyword = search.trim()
+  if (!keyword) {
+    return Prisma.empty
+  }
+
+  const pattern = `%${escapeLike(keyword)}%`
+  const numericId = /^\d+$/.test(keyword) ? Number(keyword) : null
+  const idCondition = numericId !== null && Number.isSafeInteger(numericId)
+    ? Prisma.sql`u.id = ${numericId}`
+    : Prisma.sql`false`
+
+  return Prisma.sql`
+    AND (
+      ${idCondition}
+      OR u.username ILIKE ${pattern} ESCAPE '\\'
+      OR u.email ILIKE ${pattern} ESCAPE '\\'
+    )
+  `
+}
+
+function buildQualifiedOwnersCte(searchSql: Prisma.Sql): Prisma.Sql {
+  return Prisma.sql`
+    WITH host_stats AS (
+      SELECT user_id, COUNT(*)::int AS host_count
+      FROM hosts
+      GROUP BY user_id
+    ),
+    listed_package_stats AS (
+      SELECT p.user_id, COUNT(DISTINCT p.id)::int AS listed_package_count
+      FROM packages p
+      WHERE p.active = true
+        AND p.global_shared = true
+        AND EXISTS (
+          SELECT 1
+          FROM package_hosts ph
+          JOIN hosts package_host ON package_host.id = ph.host_id
+          WHERE ph.package_id = p.id
+            AND package_host.user_id = p.user_id
+        )
+      GROUP BY p.user_id
+    ),
+    instance_stats AS (
+      SELECT h.user_id, COUNT(i.id)::int AS instance_count
+      FROM hosts h
+      LEFT JOIN instances i ON i.host_id = h.id AND i.status <> 'deleted'
+      GROUP BY h.user_id
+    ),
+    frozen_stats AS (
+      SELECT user_id, COALESCE(SUM(amount), 0)::numeric AS frozen_balance
+      FROM hosting_balance_logs
+      WHERE frozen = true
+        AND type = 'income'
+      GROUP BY user_id
+    ),
+    income_stats AS (
+      SELECT user_id, COALESCE(SUM(amount), 0)::numeric AS total_hosting_income
+      FROM hosting_balance_logs
+      WHERE type = 'income'
+      GROUP BY user_id
+    ),
+    qualified_owners AS (
+      SELECT
+        u.id,
+        u.username,
+        u.email,
+        u.status::text AS status,
+        u.avatar_style AS "avatarStyle",
+        u.avatar_badge_id AS "avatarBadgeId",
+        u.hosting_balance AS "hostingBalance",
+        u.created_at AS "createdAt",
+        hs.host_count AS "hostCount",
+        lps.listed_package_count AS "listedPackageCount",
+        COALESCE(ins.instance_count, 0)::int AS "instanceCount",
+        COALESCE(fs.frozen_balance, 0)::numeric AS "frozenBalance",
+        COALESCE(inc.total_hosting_income, 0)::numeric AS "totalHostingIncome",
+        hz.id AS "hostingZoneId"
+      FROM users u
+      JOIN host_stats hs ON hs.user_id = u.id AND hs.host_count > 0
+      JOIN listed_package_stats lps ON lps.user_id = u.id AND lps.listed_package_count > 0
+      JOIN income_stats inc ON inc.user_id = u.id AND inc.total_hosting_income <> 0
+      LEFT JOIN instance_stats ins ON ins.user_id = u.id
+      LEFT JOIN frozen_stats fs ON fs.user_id = u.id
+      LEFT JOIN hosting_zones hz ON hz.owner_id = u.id
+      WHERE u.role <> 'admin'
+      ${searchSql}
+    )
+  `
+}
+
+async function getQualifiedOwner(ownerId: number): Promise<HostingOwnerRow | null> {
+  const qualifiedOwnersCte = buildQualifiedOwnersCte(Prisma.sql`AND u.id = ${ownerId}`)
+  const owners = await prisma.$queryRaw<HostingOwnerRow[]>(Prisma.sql`
+    ${qualifiedOwnersCte}
+    SELECT *
+    FROM qualified_owners
+    LIMIT 1
+  `)
+  return owners[0] || null
+}
+
+function formatZone(zone: any) {
+  return {
+    id: zone.id,
+    name: zone.name,
+    logoUrl: zone.logoUrl,
+    active: zone.active,
+    sortOrder: zone.sortOrder,
+    createdAt: zone.createdAt.toISOString(),
+    updatedAt: zone.updatedAt.toISOString(),
+    owner: {
+      id: zone.owner.id,
+      username: zone.owner.username,
+      email: zone.owner.email,
+      avatarStyle: zone.owner.avatarStyle,
+      avatarBadgeId: zone.owner.avatarBadgeId ?? null
+    },
+    listedPackageCount: zone.listedPackageCount || 0,
+    hostCount: zone.hostCount || 0
+  }
+}
+
+async function attachZoneStats(zones: any[]) {
+  if (zones.length === 0) return []
+
+  const ownerIds = zones.map(zone => zone.ownerId)
+  const [packageRows, hostRows] = await Promise.all([
+    prisma.package.groupBy({
+      by: ['userId'],
+      where: {
+        userId: { in: ownerIds },
+        active: true,
+        globalShared: true
+      },
+      _count: { _all: true }
+    }),
+    prisma.host.groupBy({
+      by: ['userId'],
+      where: {
+        userId: { in: ownerIds }
+      },
+      _count: { _all: true }
+    })
+  ])
+
+  const packageCounts = new Map(packageRows.map(row => [row.userId, row._count._all]))
+  const hostCounts = new Map(hostRows.map(row => [row.userId, row._count._all]))
+
+  return zones.map(zone => ({
+    ...zone,
+    listedPackageCount: packageCounts.get(zone.ownerId) || 0,
+    hostCount: hostCounts.get(zone.ownerId) || 0
+  }))
+}
+
+export default async function adminHostingRoutes(app: FastifyInstance): Promise<void> {
+  // GET /api/admin/hosting/owners - 托管机主用户列表
+  app.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      sortBy?: string
+      sortOrder?: string
+    }
+  }>('/api/admin/hosting/owners', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const page = parseBoundedInt(request.query.page, 1, 1, 100000)
+      const pageSize = parseBoundedInt(request.query.pageSize, 50, 10, 100)
+      const skip = (page - 1) * pageSize
+      const search = (request.query.search || '').trim().slice(0, 100)
+      const sortBy = normalizeHostingOwnerSortBy(request.query.sortBy)
+      const sortOrder = normalizeSortOrder(request.query.sortOrder)
+      const searchSql = buildSearchSql(search)
+      const qualifiedOwnersCte = buildQualifiedOwnersCte(searchSql)
+      const vipRules = await getVipRules('hosting')
+      const orderSql = buildHostingOwnerOrderSql(sortBy, sortOrder, vipRules)
+
+      const [owners, countRows, summaryRows] = await Promise.all([
+        prisma.$queryRaw<HostingOwnerRow[]>(Prisma.sql`
+          ${qualifiedOwnersCte}
+          SELECT *
+          FROM qualified_owners
+          ${orderSql}
+          LIMIT ${pageSize}
+          OFFSET ${skip}
+        `),
+        prisma.$queryRaw<CountRow[]>(Prisma.sql`
+          ${qualifiedOwnersCte}
+          SELECT COUNT(*)::int AS total
+          FROM qualified_owners
+        `),
+        prisma.$queryRaw<SummaryRow[]>(Prisma.sql`
+          ${qualifiedOwnersCte}
+          SELECT
+            COALESCE(SUM("hostCount"), 0)::int AS "totalHosts",
+            COALESCE(SUM("listedPackageCount"), 0)::int AS "totalListedPackages",
+            COALESCE(SUM("instanceCount"), 0)::int AS "totalInstances",
+            COALESCE(SUM("hostingBalance"), 0)::numeric AS "totalAvailableBalance",
+            COALESCE(SUM("frozenBalance"), 0)::numeric AS "totalFrozenBalance",
+            COALESCE(SUM("totalHostingIncome"), 0)::numeric AS "totalHostingIncome"
+          FROM qualified_owners
+        `)
+      ])
+
+      const total = countRows[0]?.total || 0
+      const summary = summaryRows[0]
+
+      return {
+        owners: owners.map(owner => {
+          const availableBalance = roundMoney(toNumber(owner.hostingBalance))
+          const frozenBalance = roundMoney(toNumber(owner.frozenBalance))
+          const totalHostingIncome = roundMoney(toNumber(owner.totalHostingIncome))
+          const instanceCount = Number(owner.instanceCount || 0)
+
+          const vipLevel = calculateVipLevel('hosting', vipRules, {
+            totalHostingIncome,
+            instanceCount
+          })
+
+          return {
+            id: owner.id,
+            username: owner.username,
+            email: owner.email,
+            status: owner.status,
+            avatarStyle: owner.avatarStyle,
+            avatarBadgeId: owner.avatarBadgeId,
+            vipLevel,
+            vipBadgeStyle: getVipBadgeStyleForLevel(vipRules, 'hosting', vipLevel),
+            hostingBalance: {
+              available: availableBalance,
+              frozen: frozenBalance,
+              total: roundMoney(availableBalance + frozenBalance),
+              historicalTotal: totalHostingIncome
+            },
+            hostCount: Number(owner.hostCount || 0),
+            listedPackageCount: Number(owner.listedPackageCount || 0),
+            instanceCount,
+            createdAt: owner.createdAt.toISOString(),
+            hostingZoneId: owner.hostingZoneId
+          }
+        }),
+        summary: {
+          totalHosts: Number(summary?.totalHosts || 0),
+          totalListedPackages: Number(summary?.totalListedPackages || 0),
+          totalInstances: Number(summary?.totalInstances || 0),
+          totalAvailableBalance: roundMoney(toNumber(summary?.totalAvailableBalance)),
+          totalFrozenBalance: roundMoney(toNumber(summary?.totalFrozenBalance)),
+          totalHostingIncome: roundMoney(toNumber(summary?.totalHostingIncome))
+        },
+        total,
+        page,
+        pageSize,
+        totalPages: Math.max(1, Math.ceil(total / pageSize))
+      }
+    } catch (error) {
+      request.log.error(error, '获取托管机主列表失败')
+      return reply.status(500).send({ error: '获取托管机主列表失败' })
+    }
+  })
+
+  // GET /api/admin/hosting/zones - 托管专区列表
+  app.get('/api/admin/hosting/zones', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (_request, reply) => {
+    try {
+      const zones = await prisma.hostingZone.findMany({
+        include: {
+          owner: {
+            select: {
+              id: true,
+              username: true,
+              email: true,
+              avatarStyle: true,
+              avatarBadgeId: true
+            }
+          }
+        },
+        orderBy: [
+          { sortOrder: 'asc' },
+          { id: 'asc' }
+        ]
+      })
+
+      const zonesWithStats = await attachZoneStats(zones)
+      return { zones: zonesWithStats.map(formatZone) }
+    } catch (error) {
+      app.log.error(error, '获取托管专区列表失败')
+      return reply.status(500).send({ error: '获取托管专区列表失败' })
+    }
+  })
+
+  // POST /api/admin/hosting/zones - 创建托管专区
+  app.post<{
+    Body: HostingZonePayload
+  }>('/api/admin/hosting/zones', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const name = normalizeZoneName(request.body?.name)
+    const ownerId = Number(request.body?.ownerId)
+    const logoUrl = validateLogoUrl(request.body?.logoUrl)
+
+    if (!name) {
+      return reply.status(400).send({ error: '专区名不能为空' })
+    }
+    if (!Number.isInteger(ownerId) || ownerId <= 0) {
+      return reply.status(400).send({ error: '请选择有效的托管机主' })
+    }
+    if (!logoUrl) {
+      return reply.status(400).send({ error: '请填写有效的 http 或 https LOGO 图片链接' })
+    }
+
+    try {
+      const owner = await getQualifiedOwner(ownerId)
+      if (!owner) {
+        return reply.status(400).send({ error: '该用户不符合托管机主条件' })
+      }
+      if (owner.hostingZoneId) {
+        return reply.status(400).send({ error: '该托管机主已设置专区' })
+      }
+
+      const maxSortRow = await prisma.hostingZone.aggregate({
+        _max: { sortOrder: true }
+      })
+      const zone = await prisma.hostingZone.create({
+        data: {
+          name,
+          ownerId,
+          logoUrl,
+          sortOrder: (maxSortRow._max.sortOrder ?? 0) + 10
+        },
+        include: {
+          owner: {
+            select: {
+              id: true,
+              username: true,
+              email: true,
+              avatarStyle: true,
+              avatarBadgeId: true
+            }
+          }
+        }
+      })
+
+      await createLog(
+        request.user.id,
+        'admin',
+        'hosting.zone.create',
+        `Created hosting zone "${name}" for user #${ownerId}`,
+        'success'
+      )
+
+      const [zoneWithStats] = await attachZoneStats([zone])
+      return { zone: formatZone(zoneWithStats), message: '托管专区创建成功' }
+    } catch (error: any) {
+      if (error?.code === 'P2002') {
+        return reply.status(400).send({ error: '该托管机主已设置专区' })
+      }
+      request.log.error(error, '创建托管专区失败')
+      return reply.status(500).send({ error: '创建托管专区失败' })
+    }
+  })
+
+  // DELETE /api/admin/hosting/zones/:id - 删除托管专区
+  app.delete<{
+    Params: { id: string }
+  }>('/api/admin/hosting/zones/:id', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const zoneId = Number(request.params.id)
+    if (!Number.isInteger(zoneId) || zoneId <= 0) {
+      return reply.status(400).send({ error: '无效的专区 ID' })
+    }
+
+    try {
+      const zone = await prisma.hostingZone.findUnique({
+        where: { id: zoneId },
+        select: { id: true, name: true, ownerId: true }
+      })
+      if (!zone) {
+        return reply.status(404).send({ error: '托管专区不存在' })
+      }
+
+      await prisma.hostingZone.delete({
+        where: { id: zoneId }
+      })
+
+      await createLog(
+        request.user.id,
+        'admin',
+        'hosting.zone.delete',
+        `Deleted hosting zone "${zone.name}" for user #${zone.ownerId}`,
+        'success'
+      )
+
+      return { message: '托管专区已删除' }
+    } catch (error) {
+      request.log.error(error, '删除托管专区失败')
+      return reply.status(500).send({ error: '删除托管专区失败' })
+    }
+  })
+}
diff --git a/server/src/routes/admin-notification-channels.ts b/server/src/routes/admin-notification-channels.ts
new file mode 100644
index 0000000..786c9cc
--- /dev/null
+++ b/server/src/routes/admin-notification-channels.ts
@@ -0,0 +1,236 @@
+/**
+ * 管理员全局通知渠道管理路由
+ * 管理员可以创建全局 Telegram 通知渠道，供所有托管用户绑定使用
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { testNotificationChannel } from '../lib/notifier.js'
+import type { NotificationChannel } from '../types/database.js'
+
+export default async function adminNotificationChannelsRoutes(fastify: FastifyInstance) {
+
+  // 获取所有全局通知渠道（管理员视角，含完整信息）
+  fastify.get('/', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async () => {
+    const channels = await prisma.notificationChannel.findMany({
+      where: { isGlobal: true } as any,
+      orderBy: { createdAt: 'desc' },
+      select: {
+        id: true,
+        name: true,
+        type: true,
+        config: true,
+        enabled: true,
+        createdAt: true,
+        _count: { select: { packages: true } }
+      } as any
+    }) as unknown as Array<{
+      id: number; name: string; type: string; config: unknown; enabled: boolean; createdAt: Date;
+      _count: { packages: number }
+    }>
+
+    return {
+      channels: channels.map(c => {
+        const config = typeof c.config === 'string' ? JSON.parse(c.config) : c.config as Record<string, unknown>
+        return {
+          id: c.id,
+          name: c.name,
+          type: c.type,
+          enabled: c.enabled,
+          boundPackages: c._count.packages,
+          configPreview: getTelegramPreview(config),
+          createdAt: c.createdAt
+        }
+      })
+    }
+  })
+
+  // 获取单个全局渠道详情（含 botToken 掩码）
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const channelId = Number(request.params.id)
+    if (isNaN(channelId)) return reply.code(400).send({ error: 'Invalid ID' })
+
+    const channel = await prisma.notificationChannel.findFirst({
+      where: { id: channelId, isGlobal: true } as any
+    })
+    if (!channel) return reply.code(404).send({ error: 'Channel not found' })
+
+    const config = typeof channel.config === 'string' ? JSON.parse(channel.config) : channel.config as Record<string, unknown>
+
+    return {
+      channel: {
+        id: channel.id,
+        name: channel.name,
+        type: channel.type,
+        enabled: channel.enabled,
+        config: maskBotToken(config),
+        createdAt: channel.createdAt
+      }
+    }
+  })
+
+  // 创建全局 Telegram 通知渠道
+  fastify.post<{
+    Body: { name: string; botToken: string; chatId: string; enabled?: boolean }
+  }>('/', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'botToken', 'chatId'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          botToken: { type: 'string', minLength: 1 },
+          chatId: { type: 'string', minLength: 1 },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (
+    request: FastifyRequest<{ Body: { name: string; botToken: string; chatId: string; enabled?: boolean } }>,
+    reply: FastifyReply
+  ) => {
+    const { name, botToken, chatId, enabled = true } = request.body
+
+    // 简单格式验证
+    if (!botToken.includes(':')) {
+      return reply.code(400).send({ error: 'Invalid Bot Token format (should contain a colon)' })
+    }
+
+    const channel = await prisma.notificationChannel.create({
+      data: {
+        userId: request.user.id,
+        type: 'telegram',
+        name,
+        config: { botToken, chatId },
+        enabled,
+        isGlobal: true
+      } as any
+    })
+
+    await createLog(request.user.id, 'notification', 'admin.global_channel.create',
+      `Created global TG channel "${name}" (chatId: ${chatId})`, 'success')
+
+    return reply.code(201).send({
+      message: 'Global notification channel created',
+      channel: { id: channel.id, name, type: 'telegram', enabled }
+    })
+  })
+
+  // 更新全局通知渠道
+  fastify.patch<{
+    Params: { id: string }
+    Body: { name?: string; botToken?: string; chatId?: string; enabled?: boolean }
+  }>('/:id', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          botToken: { type: 'string', minLength: 1 },
+          chatId: { type: 'string', minLength: 1 },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (
+    request: FastifyRequest<{ Params: { id: string }; Body: { name?: string; botToken?: string; chatId?: string; enabled?: boolean } }>,
+    reply: FastifyReply
+  ) => {
+    const channelId = Number(request.params.id)
+    if (isNaN(channelId)) return reply.code(400).send({ error: 'Invalid ID' })
+
+    const existing = await prisma.notificationChannel.findFirst({
+      where: { id: channelId, isGlobal: true } as any
+    })
+    if (!existing) return reply.code(404).send({ error: 'Channel not found' })
+
+    const { name, botToken, chatId, enabled } = request.body
+    const existingConfig = typeof existing.config === 'string' ? JSON.parse(existing.config) : existing.config as Record<string, unknown>
+
+    // Merge config
+    const newConfig = {
+      botToken: botToken || existingConfig.botToken,
+      chatId: chatId || existingConfig.chatId
+    }
+
+    await prisma.notificationChannel.update({
+      where: { id: channelId },
+      data: {
+        ...(name !== undefined && { name }),
+        ...(enabled !== undefined && { enabled }),
+        ...(botToken || chatId ? { config: newConfig } : {})
+      }
+    })
+
+    await createLog(request.user.id, 'notification', 'admin.global_channel.update',
+      `Updated global TG channel "${existing.name}"`, 'success')
+
+    return { message: 'Channel updated' }
+  })
+
+  // 删除全局通知渠道
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const channelId = Number(request.params.id)
+    if (isNaN(channelId)) return reply.code(400).send({ error: 'Invalid ID' })
+
+    const channel = await prisma.notificationChannel.findFirst({
+      where: { id: channelId, isGlobal: true } as any
+    })
+    if (!channel) return reply.code(404).send({ error: 'Channel not found' })
+
+    await prisma.notificationChannel.delete({ where: { id: channelId } })
+
+    await createLog(request.user.id, 'notification', 'admin.global_channel.delete',
+      `Deleted global TG channel "${channel.name}"`, 'success')
+
+    return { message: 'Channel deleted' }
+  })
+
+  // 发送测试消息
+  fastify.post<{ Params: { id: string } }>('/:id/test', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const channelId = Number(request.params.id)
+    if (isNaN(channelId)) return reply.code(400).send({ error: 'Invalid ID' })
+
+    const channel = await prisma.notificationChannel.findFirst({
+      where: { id: channelId, isGlobal: true } as any
+    })
+    if (!channel) return reply.code(404).send({ error: 'Channel not found' })
+
+    const result = await testNotificationChannel(channel as unknown as NotificationChannel)
+
+    if (result.success) {
+      return { message: 'Test notification sent successfully' }
+    } else {
+      return reply.code(400).send({ error: 'Test failed: ' + result.error })
+    }
+  })
+}
+
+/**
+ * 获取 Telegram 渠道的 Chat ID 预览
+ */
+function getTelegramPreview(config: Record<string, unknown>): string {
+  return `Chat ID: ${config.chatId || 'Not set'}`
+}
+
+/**
+ * 掩码 Bot Token（保留前后部分）
+ */
+function maskBotToken(config: Record<string, unknown>): Record<string, unknown> {
+  const masked = { ...config }
+  if (typeof masked.botToken === 'string' && masked.botToken) {
+    masked.botToken = masked.botToken.slice(0, 8) + '...' + masked.botToken.slice(-5)
+  }
+  return masked
+}
diff --git a/server/src/routes/admin-statistics.ts b/server/src/routes/admin-statistics.ts
new file mode 100644
index 0000000..f6432ca
--- /dev/null
+++ b/server/src/routes/admin-statistics.ts
@@ -0,0 +1,326 @@
+/**
+ * 管理员统计路由
+ */
+
+import { FastifyInstance } from 'fastify'
+import { Prisma } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import { BUSINESS_TIMEZONE, getDateStringInTimezone, getMonthStringInTimezone } from '../lib/timezone.js'
+
+const BUSINESS_TZ_OFFSET_MINUTES = 8 * 60
+const DAY_MS = 24 * 60 * 60 * 1000
+const DAILY_DAYS = 30
+const MONTHLY_MONTHS = 12
+
+interface BucketRow {
+  bucket: string
+  value: unknown
+}
+
+interface ScalarRow {
+  value: unknown
+}
+
+interface SeriesPoint {
+  label: string
+  value: number
+}
+
+function toNumber(value: unknown): number {
+  if (value === null || value === undefined) return 0
+  if (typeof value === 'number') return value
+  if (typeof value === 'bigint') return Number(value)
+  return Number.parseFloat(String(value)) || 0
+}
+
+function roundMoney(value: number): number {
+  return Number(value.toFixed(2))
+}
+
+function parseYearMonth(label: string): { year: number; month: number } {
+  const [year, month] = label.split('-').map(Number)
+  return { year, month }
+}
+
+function getBusinessDayStartUtc(date: Date = new Date()): Date {
+  const label = getDateStringInTimezone(date, BUSINESS_TIMEZONE)
+  const [year, month, day] = label.split('-').map(Number)
+  const start = new Date(Date.UTC(year, month - 1, day, 0, 0, 0, 0))
+  start.setMinutes(start.getMinutes() - BUSINESS_TZ_OFFSET_MINUTES)
+  return start
+}
+
+function getBusinessMonthStartUtc(year: number, month: number): Date {
+  const start = new Date(Date.UTC(year, month - 1, 1, 0, 0, 0, 0))
+  start.setMinutes(start.getMinutes() - BUSINESS_TZ_OFFSET_MINUTES)
+  return start
+}
+
+function formatBusinessDateFromStart(startUtc: Date): string {
+  return new Date(startUtc.getTime() + BUSINESS_TZ_OFFSET_MINUTES * 60 * 1000)
+    .toISOString()
+    .slice(0, 10)
+}
+
+function formatBusinessMonthFromStart(startUtc: Date): string {
+  return new Date(startUtc.getTime() + BUSINESS_TZ_OFFSET_MINUTES * 60 * 1000)
+    .toISOString()
+    .slice(0, 7)
+}
+
+function getDailyWindow(days: number): { start: Date; end: Date; labels: string[] } {
+  const todayStart = getBusinessDayStartUtc()
+  const start = new Date(todayStart.getTime() - (days - 1) * DAY_MS)
+  const end = new Date(todayStart.getTime() + DAY_MS)
+  const labels = Array.from({ length: days }, (_, index) =>
+    formatBusinessDateFromStart(new Date(start.getTime() + index * DAY_MS))
+  )
+
+  return { start, end, labels }
+}
+
+function getMonthlyWindow(months: number): { start: Date; end: Date; labels: string[] } {
+  const currentMonth = getMonthStringInTimezone(new Date(), BUSINESS_TIMEZONE)
+  const { year, month } = parseYearMonth(currentMonth)
+  const start = getBusinessMonthStartUtc(year, month - months + 1)
+  const end = getBusinessMonthStartUtc(year, month + 1)
+  const labels = Array.from({ length: months }, (_, index) =>
+    formatBusinessMonthFromStart(getBusinessMonthStartUtc(year, month - months + 1 + index))
+  )
+
+  return { start, end, labels }
+}
+
+function fillSeries(rows: BucketRow[], labels: string[], money = false): SeriesPoint[] {
+  const rowMap = new Map(rows.map(row => [row.bucket, toNumber(row.value)]))
+  return labels.map(label => {
+    const value = rowMap.get(label) || 0
+    return {
+      label,
+      value: money ? roundMoney(value) : value
+    }
+  })
+}
+
+function scalarValue(rows: ScalarRow[], money = false): number {
+  const value = toNumber(rows[0]?.value)
+  return money ? roundMoney(value) : value
+}
+
+export default async function adminStatisticsRoutes(app: FastifyInstance): Promise<void> {
+  // GET /api/admin/statistics/overview - 管理员统计概览
+  app.get('/api/admin/statistics/overview', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const dailyWindow = getDailyWindow(DAILY_DAYS)
+      const monthlyWindow = getMonthlyWindow(MONTHLY_MONTHS)
+
+      const [
+        totalUsers,
+        totalInstances,
+        activeInstances,
+        paidInstances,
+        freeInstances,
+        totalRechargeRows,
+        totalConsumeRows,
+        totalAffRows,
+        totalDestroyFeeRows,
+        dailyUsers,
+        monthlyUsers,
+        dailyInstances,
+        monthlyInstances,
+        dailyRecharge,
+        monthlyRecharge,
+        dailyConsume,
+        monthlyConsume,
+        dailyAff,
+        monthlyAff,
+        dailyDestroyFee,
+        monthlyDestroyFee
+      ] = await Promise.all([
+        prisma.user.count(),
+        prisma.instance.count({ where: { status: { not: 'deleted' } } }),
+        prisma.instance.count({ where: { status: { notIn: ['deleted', 'suspended'] } } }),
+        prisma.instance.count({
+          where: {
+            status: { not: 'deleted' },
+            packagePlanId: { not: null }
+          }
+        }),
+        prisma.instance.count({
+          where: {
+            status: { not: 'deleted' },
+            packagePlanId: null
+          }
+        }),
+        prisma.$queryRaw<ScalarRow[]>(Prisma.sql`
+          SELECT COALESCE(SUM(amount), 0)::numeric AS value
+          FROM recharge_records
+          WHERE status = 'completed'
+        `),
+        prisma.$queryRaw<ScalarRow[]>(Prisma.sql`
+          SELECT COALESCE(SUM(ABS(amount)), 0)::numeric AS value
+          FROM balance_logs
+          WHERE type IN ('consume', 'transfer_fee')
+        `),
+        prisma.$queryRaw<ScalarRow[]>(Prisma.sql`
+          SELECT COALESCE(SUM(amount), 0)::numeric AS value
+          FROM aff_logs
+          WHERE type IN ('new_purchase', 'renew')
+        `),
+        prisma.$queryRaw<ScalarRow[]>(Prisma.sql`
+          SELECT COALESCE(SUM(fee_amount), 0)::numeric AS value
+          FROM user_destroy_records
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM-DD') AS bucket, COUNT(*)::int AS value
+          FROM users
+          WHERE created_at >= ${dailyWindow.start} AND created_at < ${dailyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM-DD')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM') AS bucket, COUNT(*)::int AS value
+          FROM users
+          WHERE created_at >= ${monthlyWindow.start} AND created_at < ${monthlyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM-DD') AS bucket, COUNT(*)::int AS value
+          FROM instances
+          WHERE created_at >= ${dailyWindow.start} AND created_at < ${dailyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM-DD')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM') AS bucket, COUNT(*)::int AS value
+          FROM instances
+          WHERE created_at >= ${monthlyWindow.start} AND created_at < ${monthlyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(COALESCE(completed_at, created_at) + interval '8 hours', 'YYYY-MM-DD') AS bucket,
+                 COALESCE(SUM(amount), 0)::numeric AS value
+          FROM recharge_records
+          WHERE status = 'completed'
+            AND COALESCE(completed_at, created_at) >= ${dailyWindow.start}
+            AND COALESCE(completed_at, created_at) < ${dailyWindow.end}
+          GROUP BY to_char(COALESCE(completed_at, created_at) + interval '8 hours', 'YYYY-MM-DD')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(COALESCE(completed_at, created_at) + interval '8 hours', 'YYYY-MM') AS bucket,
+                 COALESCE(SUM(amount), 0)::numeric AS value
+          FROM recharge_records
+          WHERE status = 'completed'
+            AND COALESCE(completed_at, created_at) >= ${monthlyWindow.start}
+            AND COALESCE(completed_at, created_at) < ${monthlyWindow.end}
+          GROUP BY to_char(COALESCE(completed_at, created_at) + interval '8 hours', 'YYYY-MM')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM-DD') AS bucket,
+                 COALESCE(SUM(ABS(amount)), 0)::numeric AS value
+          FROM balance_logs
+          WHERE type IN ('consume', 'transfer_fee')
+            AND created_at >= ${dailyWindow.start}
+            AND created_at < ${dailyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM-DD')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM') AS bucket,
+                 COALESCE(SUM(ABS(amount)), 0)::numeric AS value
+          FROM balance_logs
+          WHERE type IN ('consume', 'transfer_fee')
+            AND created_at >= ${monthlyWindow.start}
+            AND created_at < ${monthlyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM-DD') AS bucket,
+                 COALESCE(SUM(amount), 0)::numeric AS value
+          FROM aff_logs
+          WHERE type IN ('new_purchase', 'renew')
+            AND created_at >= ${dailyWindow.start}
+            AND created_at < ${dailyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM-DD')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(created_at + interval '8 hours', 'YYYY-MM') AS bucket,
+                 COALESCE(SUM(amount), 0)::numeric AS value
+          FROM aff_logs
+          WHERE type IN ('new_purchase', 'renew')
+            AND created_at >= ${monthlyWindow.start}
+            AND created_at < ${monthlyWindow.end}
+          GROUP BY to_char(created_at + interval '8 hours', 'YYYY-MM')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(destroyed_at + interval '8 hours', 'YYYY-MM-DD') AS bucket,
+                 COALESCE(SUM(fee_amount), 0)::numeric AS value
+          FROM user_destroy_records
+          WHERE destroyed_at >= ${dailyWindow.start}
+            AND destroyed_at < ${dailyWindow.end}
+          GROUP BY to_char(destroyed_at + interval '8 hours', 'YYYY-MM-DD')
+          ORDER BY bucket
+        `),
+        prisma.$queryRaw<BucketRow[]>(Prisma.sql`
+          SELECT to_char(destroyed_at + interval '8 hours', 'YYYY-MM') AS bucket,
+                 COALESCE(SUM(fee_amount), 0)::numeric AS value
+          FROM user_destroy_records
+          WHERE destroyed_at >= ${monthlyWindow.start}
+            AND destroyed_at < ${monthlyWindow.end}
+          GROUP BY to_char(destroyed_at + interval '8 hours', 'YYYY-MM')
+          ORDER BY bucket
+        `)
+      ])
+
+      return {
+        meta: {
+          timezone: BUSINESS_TIMEZONE,
+          dailyDays: DAILY_DAYS,
+          monthlyMonths: MONTHLY_MONTHS
+        },
+        users: {
+          total: totalUsers,
+          dailyNewUsers: fillSeries(dailyUsers, dailyWindow.labels),
+          monthlyNewUsers: fillSeries(monthlyUsers, monthlyWindow.labels)
+        },
+        instances: {
+          total: totalInstances,
+          active: activeInstances,
+          paid: paidInstances,
+          free: freeInstances,
+          dailyCreatedInstances: fillSeries(dailyInstances, dailyWindow.labels),
+          monthlyCreatedInstances: fillSeries(monthlyInstances, monthlyWindow.labels)
+        },
+        billing: {
+          totals: {
+            recharge: scalarValue(totalRechargeRows, true),
+            consume: scalarValue(totalConsumeRows, true),
+            aff: scalarValue(totalAffRows, true),
+            destroyFee: scalarValue(totalDestroyFeeRows, true)
+          },
+          dailyRecharge: fillSeries(dailyRecharge, dailyWindow.labels, true),
+          monthlyRecharge: fillSeries(monthlyRecharge, monthlyWindow.labels, true),
+          dailyConsume: fillSeries(dailyConsume, dailyWindow.labels, true),
+          monthlyConsume: fillSeries(monthlyConsume, monthlyWindow.labels, true),
+          dailyAff: fillSeries(dailyAff, dailyWindow.labels, true),
+          monthlyAff: fillSeries(monthlyAff, monthlyWindow.labels, true),
+          dailyDestroyFee: fillSeries(dailyDestroyFee, dailyWindow.labels, true),
+          monthlyDestroyFee: fillSeries(monthlyDestroyFee, monthlyWindow.labels, true)
+        }
+      }
+    } catch (error) {
+      request.log.error(error, '获取统计数据失败')
+      return reply.status(500).send({ error: '获取统计数据失败' })
+    }
+  })
+}
diff --git a/server/src/routes/aff.ts b/server/src/routes/aff.ts
new file mode 100644
index 0000000..cae6ab5
--- /dev/null
+++ b/server/src/routes/aff.ts
@@ -0,0 +1,458 @@
+/**
+ * AFF 推荐计划路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { createInboxMessage } from '../db/inbox.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+
+export default async function affRoutes(fastify: FastifyInstance) {
+  // ==================== 用户 AFF API ====================
+
+  // 获取 AFF 状态和统计
+  fastify.get('/me', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+    const [activated, stats] = await Promise.all([
+      db.isAffActivated(user.id),
+      db.getAffStats(user.id)
+    ])
+
+    return {
+      activated,
+      ...stats
+    }
+  })
+
+  // 获取我的优惠码列表（包括全局码）
+  fastify.get('/me/codes', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+    const codes = await db.getUserAffCodes(user.id)
+
+    return {
+      codes: codes.map(code => ({
+        id: code.id,
+        code: code.code,
+        packagePlanId: code.packagePlanId,
+        planName: code.packagePlan?.name || null,
+        packageName: code.packagePlan?.package.name || null,
+        price: code.packagePlan?.price || null,
+        isGlobal: code.packagePlanId === null,
+        discountRate: Number(code.discountRate),
+        commissionRate: Number(code.commissionRate),
+        usedCount: code.usedCount,
+        totalEarnings: Number(code.totalEarnings),
+        createdAt: code.createdAt.toISOString()
+      }))
+    }
+  })
+
+  // 获取可创建优惠码的方案列表（包含全局码状态）
+  fastify.get('/me/available-plans', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+
+    // 检查是否已激活
+    const activated = await db.isAffActivated(user.id)
+    if (!activated) {
+      return reply.code(400).send({ error: '推荐计划尚未激活，请先充值任意金额' })
+    }
+
+    const result = await db.getAvailablePlansForAffCode(user.id)
+
+    return {
+      plans: result.plans.map(plan => ({
+        id: plan.id,
+        name: plan.name,
+        price: plan.price,
+        packageName: plan.package.name,
+        hasCode: plan.hasCode
+      })),
+      hasGlobalCode: result.hasGlobalCode
+    }
+  })
+
+  // 创建优惠码（支持方案专有码和全局码，固定 5% 折扣/5% 返利）
+  fastify.post<{
+    Body: { packagePlanId?: number }
+  }>('/me/codes', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Body: { packagePlanId?: number } }>, reply: FastifyReply) => {
+    const { user } = request
+    const { packagePlanId } = request.body
+
+    // 验证 packagePlanId 如果提供必须是正整数
+    if (packagePlanId !== undefined) {
+      if (typeof packagePlanId !== 'number' || !Number.isInteger(packagePlanId) || packagePlanId <= 0) {
+        return reply.code(400).send({ error: '方案 ID 无效' })
+      }
+    }
+
+    // packagePlanId 为 undefined 时创建全局码
+    const result = await db.createAffCode(user.id, packagePlanId)
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    const isGlobal = result.affCode!.packagePlanId === null
+    await createLog(
+      user.id,
+      'user',
+      'aff.create_code',
+      isGlobal 
+        ? `Created global AFF code ${result.affCode!.code}`
+        : `Created AFF code ${result.affCode!.code} for plan #${packagePlanId}`,
+      'success'
+    )
+
+    return {
+      message: isGlobal ? '全局优惠码创建成功' : '优惠码创建成功',
+      code: {
+        id: result.affCode!.id,
+        code: result.affCode!.code,
+        packagePlanId: result.affCode!.packagePlanId,
+        isGlobal,
+        discountRate: Number(result.affCode!.discountRate),
+        commissionRate: Number(result.affCode!.commissionRate),
+        createdAt: result.affCode!.createdAt.toISOString()
+      }
+    }
+  })
+
+  // 删除优惠码（仅允许删除使用次数为 0 的优惠码）
+  fastify.delete<{
+    Params: { codeId: string }
+  }>('/me/codes/:codeId', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { codeId: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const codeId = Number(request.params.codeId)
+
+    if (isNaN(codeId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const result = await db.deleteAffCode(user.id, codeId)
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    await createLog(
+      user.id,
+      'user',
+      'aff.delete_code',
+      `Deleted AFF code ${result.code}`,
+      'success'
+    )
+
+    return { message: '优惠码已删除' }
+  })
+
+  // 获取 AFF 收益日志
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+    }
+  }>('/me/logs', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; type?: string } }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', type } = request.query
+
+    const result = await db.getAffLogs(user.id, {
+      page: Number(page),
+      pageSize: Number(pageSize),
+      type: type as any
+    })
+
+    return {
+      logs: result.logs.map(log => ({
+        id: log.id,
+        type: log.type,
+        amount: Number(log.amount),
+        originalAmount: log.originalAmount ? Number(log.originalAmount) : null,
+        balanceBefore: Number(log.balanceBefore),
+        balanceAfter: Number(log.balanceAfter),
+        affCodeId: log.affCodeId,
+        affCode: log.affCode?.code || null,
+        instanceId: log.instanceId,
+        remark: log.remark,
+        createdAt: log.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // 获取 AFF 收益榜单 TOP 10
+  fastify.get('/leaderboard', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+    const leaderboard = await db.getAffLeaderboard(user.id)
+    return { leaderboard }
+  })
+
+  // 验证优惠码（开通实例时调用）
+  fastify.post<{
+    Body: {
+      code: string
+      packagePlanId: number
+    }
+  }>('/validate', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Body: { code: string; packagePlanId: number } }>, reply: FastifyReply) => {
+    const { user } = request
+    const { code, packagePlanId } = request.body
+
+    if (!code || !code.trim()) {
+      return reply.code(400).send({ error: '请输入优惠码' })
+    }
+
+    if (!packagePlanId || typeof packagePlanId !== 'number') {
+      return reply.code(400).send({ error: '方案 ID 无效' })
+    }
+
+    const result = await db.validateAffCode(code.trim(), packagePlanId, user.id)
+
+    if (!result.valid) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    return {
+      valid: true,
+      discountRate: result.discountRate,
+      commissionRate: result.commissionRate
+    }
+  })
+
+  // ==================== 转化申请 API ====================
+
+  // 创建转化申请
+  fastify.post<{
+    Body: { amount: number }
+  }>('/me/convert', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Body: { amount: number } }>, reply: FastifyReply) => {
+    const { user } = request
+    const { amount } = request.body
+
+    if (!amount || typeof amount !== 'number' || amount <= 0) {
+      return reply.code(400).send({ error: '请输入有效的转化金额' })
+    }
+
+    // 规范化金额（两位小数）
+    const normalizedAmount = Math.round(amount * 100) / 100
+
+    const result = await db.createAffWithdrawal(user.id, normalizedAmount)
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    await createLog(
+      user.id,
+      'user',
+      'aff.convert_request',
+      `AFF balance converted: ${normalizedAmount}`,
+      'success'
+    )
+
+    return {
+      message: '转化成功，已转入账户余额',
+      withdrawal: {
+        id: result.withdrawal!.id,
+        amount: Number(result.withdrawal!.amount),
+        status: result.withdrawal!.status,
+        createdAt: result.withdrawal!.createdAt.toISOString()
+      }
+    }
+  })
+
+  // 获取我的转化申请
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      status?: string
+    }
+  }>('/me/withdrawals', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; status?: string } }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', status } = request.query
+
+    const result = await db.getUserAffWithdrawals(user.id, {
+      page: Number(page),
+      pageSize: Number(pageSize),
+      status: status as any
+    })
+
+    return {
+      withdrawals: result.withdrawals.map(w => ({
+        id: w.id,
+        amount: Number(w.amount),
+        status: w.status,
+        rejectReason: w.rejectReason,
+        reviewedAt: w.reviewedAt?.toISOString() || null,
+        createdAt: w.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // ==================== 管理员 API ====================
+
+  // 获取所有转化申请（管理员）
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      status?: string
+    }
+  }>('/admin/withdrawals', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; status?: string } }>) => {
+    const { page = '1', pageSize = '20', status } = request.query
+
+    const result = await db.getPendingAffWithdrawals({
+      page: Number(page),
+      pageSize: Number(pageSize),
+      status: status as any
+    })
+
+    return {
+      withdrawals: result.withdrawals.map(w => ({
+        id: w.id,
+        userId: w.userId,
+        username: w.user.username,
+        userAffBalance: w.user.affBalance,
+        amount: Number(w.amount),
+        status: w.status,
+        rejectReason: w.rejectReason,
+        reviewedBy: w.reviewedBy,
+        reviewedAt: w.reviewedAt?.toISOString() || null,
+        createdAt: w.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // 审核通过转化申请（管理员）
+  fastify.post<{
+    Params: { withdrawalId: string }
+  }>('/admin/withdrawals/:withdrawalId/approve', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { withdrawalId: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const withdrawalId = Number(request.params.withdrawalId)
+
+    if (isNaN(withdrawalId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 先查询申请信息以获取用户ID和金额
+    const withdrawal = await db.getAffWithdrawalById(withdrawalId)
+    if (!withdrawal) {
+      return reply.code(400).send({ error: '申请不存在' })
+    }
+
+    const result = await db.approveAffWithdrawal(withdrawalId, user.id)
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    await createLog(
+      user.id,
+      'admin',
+      'aff.approve_convert',
+      `Approved AFF convert request #${withdrawalId}`,
+      'success'
+    )
+
+    // 发送站内信通知用户
+    await createInboxMessage({
+      userId: withdrawal.userId,
+      eventType: 'aff_convert_approved',
+      title: 'AFF 转化审核通过',
+      content: `您的 AFF 余额转化申请已审核通过，¥${Number(withdrawal.amount).toFixed(2)} 已转入您的账户余额。`,
+      data: { withdrawalId, amount: Number(withdrawal.amount) }
+    })
+
+    return { message: '审核通过，已转入用户余额' }
+  })
+
+  // 审核拒绝转化申请（管理员）
+  fastify.post<{
+    Params: { withdrawalId: string }
+    Body: { reason: string }
+  }>('/admin/withdrawals/:withdrawalId/reject', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { withdrawalId: string }; Body: { reason: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const withdrawalId = Number(request.params.withdrawalId)
+    const { reason } = request.body
+
+    if (isNaN(withdrawalId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    if (!reason || !reason.trim()) {
+      return reply.code(400).send({ error: '请填写拒绝原因' })
+    }
+
+    // 先查询申请信息以获取用户ID和金额
+    const withdrawal = await db.getAffWithdrawalById(withdrawalId)
+    if (!withdrawal) {
+      return reply.code(400).send({ error: '申请不存在' })
+    }
+
+    const result = await db.rejectAffWithdrawal(withdrawalId, user.id, reason.trim())
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    await createLog(
+      user.id,
+      'admin',
+      'aff.reject_convert',
+      `Rejected AFF convert request #${withdrawalId}: ${reason}`,
+      'success'
+    )
+
+    // 发送站内信通知用户
+    await createInboxMessage({
+      userId: withdrawal.userId,
+      eventType: 'aff_convert_rejected',
+      title: 'AFF 转化申请被拒绝',
+      content: `您的 AFF 余额转化申请（¥${Number(withdrawal.amount).toFixed(2)}）已被拒绝。\n拒绝原因：${reason.trim()}`,
+      data: { withdrawalId, amount: Number(withdrawal.amount), reason: reason.trim() }
+    })
+
+    return { message: '已拒绝' }
+  })
+}
diff --git a/server/src/routes/agent.ts b/server/src/routes/agent.ts
new file mode 100644
index 0000000..2346088
--- /dev/null
+++ b/server/src/routes/agent.ts
@@ -0,0 +1,1300 @@
+/**
+ * 宿主机 Agent 路由
+ * 负责 Agent 凭据签发、HMAC 鉴权和心跳上报。
+ */
+
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
+import { Prisma } from '@prisma/client'
+import { createHash } from 'crypto'
+import { readFileSync } from 'fs'
+import { isIP } from 'net'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+import { prisma } from '../db/prisma.js'
+import { createLog, LogModule, LogResult } from '../db/logs.js'
+import { decryptSensitiveData } from '../lib/security.js'
+import {
+  agentNonceTtlMs,
+  createAgentBodyHash,
+  isAgentTimestampFresh,
+  isValidAgentSecret,
+  readAgentAuthHeaders,
+  validateAgentHeaders,
+  verifyAgentSignature
+} from '../lib/agent-auth.js'
+import {
+  consumeHostAgentInstallToken,
+  issueHostAgentInstallToken,
+  rotateHostAgentCredentials,
+  type HostAgentRecord
+} from '../lib/host-agent-credentials.js'
+import { processAgentInstanceReport } from '../services/agent-instance-report.js'
+
+interface AgentCredentialsParams {
+  hostId: string
+}
+
+interface AgentCredentialsBody {
+  enabled?: boolean
+}
+
+interface AgentInstallCommandBody {
+  enabled?: boolean
+  baseUrl?: string
+  binaryUrl?: string
+}
+
+interface AgentHeartbeatBody {
+  version?: string
+  capabilities?: string[]
+  runtime?: Record<string, unknown>
+  incus?: Record<string, unknown>
+  instances?: Record<string, unknown>
+  resources?: Record<string, unknown>
+  metrics?: Record<string, unknown>
+}
+
+interface AgentBinaryParams {
+  name: string
+}
+
+interface AgentInstallTokenParams {
+  token: string
+}
+
+interface AgentUpgradeManifestFile {
+  name?: string
+  sha256?: string
+  size?: number
+  gzip?: boolean
+}
+
+interface AgentUpgradeManifest {
+  version?: string
+  generatedAt?: string
+  files?: Record<string, AgentUpgradeManifestFile>
+}
+
+interface GitHubReleaseAsset {
+  name?: string
+  size?: number
+  url?: string
+  browser_download_url?: string
+}
+
+interface GitHubRelease {
+  tag_name?: string
+  name?: string
+  published_at?: string
+  assets?: GitHubReleaseAsset[]
+}
+
+interface AgentUpgradeInstruction {
+  available: boolean
+  version?: string
+  url?: string
+  sha256?: string
+  gzip?: boolean
+  size?: number
+}
+
+const agentModel = prisma.hostAgent
+const nonceModel = prisma.hostAgentNonce
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const agentBinaryNamePattern = /^incudal-agent-linux-(amd64|arm64)$/
+const agentReleaseBinaryNamePattern = /^incudal-agent-(x86_64|aarch64)-v[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/
+const defaultAgentReleaseRepository = 'qwer-xyz/incudal_classic'
+const githubApiBaseUrl = 'https://api.github.com'
+const githubDownloadBaseUrl = 'https://github.com'
+const agentReleaseCacheTtlMs = 5 * 60 * 1000
+const agentBinaryDownloadLimitBytes = 64 * 1024 * 1024
+const defaultAgentHeartbeatIntervalSeconds = 30
+const minAgentHeartbeatIntervalSeconds = 5
+const maxAgentHeartbeatIntervalSeconds = 3600
+const minAgentOfflineThresholdSeconds = 120
+let agentReleaseManifestCache: { expiresAt: number; manifest: AgentUpgradeManifest } | null = null
+let agentReleaseAssetCache: { expiresAt: number; assets: Map<string, GitHubReleaseAsset> } | null = null
+let agentReleaseBinaryCache: { expiresAt: number; binaries: Map<string, Buffer> } | null = null
+
+function parsePositiveId(value: string): number | null {
+  const id = Number.parseInt(value, 10)
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+}
+
+function sanitizeShortString(value: unknown, maxLength: number): string | null {
+  if (typeof value !== 'string') {
+    return null
+  }
+  const trimmed = value.trim()
+  return trimmed ? trimmed.slice(0, maxLength) : null
+}
+
+function normalizeCapabilities(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return []
+  }
+
+  const uniqueCapabilities = new Set<string>()
+  for (const item of value) {
+    const capability = sanitizeShortString(item, 80)
+    if (capability) {
+      uniqueCapabilities.add(capability)
+    }
+    if (uniqueCapabilities.size >= 64) {
+      break
+    }
+  }
+  return Array.from(uniqueCapabilities)
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function parseInteger(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isSafeInteger(value)) {
+    return value
+  }
+  if (typeof value === 'string' && /^\d+$/.test(value.trim())) {
+    const parsed = Number.parseInt(value.trim(), 10)
+    return Number.isSafeInteger(parsed) ? parsed : null
+  }
+  return null
+}
+
+function clampAgentHeartbeatIntervalSeconds(value: unknown): number {
+  const parsed = parseInteger(value)
+  if (!parsed) {
+    return defaultAgentHeartbeatIntervalSeconds
+  }
+  if (parsed < minAgentHeartbeatIntervalSeconds) {
+    return minAgentHeartbeatIntervalSeconds
+  }
+  if (parsed > maxAgentHeartbeatIntervalSeconds) {
+    return maxAgentHeartbeatIntervalSeconds
+  }
+  return parsed
+}
+
+function buildRequestPath(request: FastifyRequest): string {
+  return request.url.split('?')[0] || request.url
+}
+
+function firstHeaderValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null
+  }
+  return value ?? null
+}
+
+function normalizeIpCandidate(value: unknown): string | null {
+  if (typeof value !== 'string') {
+    return null
+  }
+
+  let candidate = value.trim()
+  if (!candidate) {
+    return null
+  }
+
+  if (candidate.startsWith('[')) {
+    const closingBracketIndex = candidate.indexOf(']')
+    if (closingBracketIndex > 0) {
+      candidate = candidate.slice(1, closingBracketIndex)
+    }
+  }
+
+  const ipv4WithPort = candidate.match(/^(\d{1,3}(?:\.\d{1,3}){3})(?::\d+)?$/)
+  if (ipv4WithPort) {
+    candidate = ipv4WithPort[1]
+  }
+
+  if (candidate.startsWith('::ffff:')) {
+    const mapped = candidate.slice(7)
+    if (isIP(mapped)) {
+      return mapped
+    }
+  }
+
+  return isIP(candidate) ? candidate : null
+}
+
+function firstForwardedIp(request: FastifyRequest): string | null {
+  const headerValues = [
+    firstHeaderValue(request.headers['cf-connecting-ip']),
+    firstHeaderValue(request.headers['true-client-ip']),
+    firstHeaderValue(request.headers['x-real-ip']),
+    firstHeaderValue(request.headers['x-forwarded-for'])
+  ]
+
+  for (const value of headerValues) {
+    if (!value) {
+      continue
+    }
+    for (const part of value.split(',')) {
+      const ip = normalizeIpCandidate(part)
+      if (ip) {
+        return ip
+      }
+    }
+  }
+
+  return null
+}
+
+function isLocalOrPrivateIp(ip: string | null): boolean {
+  if (!ip) {
+    return false
+  }
+
+  if (ip === '::1' || ip === '127.0.0.1' || ip.startsWith('127.')) {
+    return true
+  }
+
+  if (ip.startsWith('10.') || ip.startsWith('192.168.') || ip.startsWith('169.254.')) {
+    return true
+  }
+
+  const parts = ip.split('.').map((part) => Number.parseInt(part, 10))
+  if (parts.length === 4 && parts.every((part) => Number.isInteger(part))) {
+    return parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31
+  }
+
+  const lowerIp = ip.toLowerCase()
+  return lowerIp.startsWith('fc') || lowerIp.startsWith('fd') || lowerIp.startsWith('fe80:')
+}
+
+function getAgentHeartbeatIp(request: FastifyRequest): string {
+  const directIp = normalizeIpCandidate(request.ip) ?? request.ip
+  const forwardedIp = firstForwardedIp(request)
+  const trustForwardedIp = process.env.AGENT_TRUST_FORWARDED_IP === 'true' || isLocalOrPrivateIp(directIp)
+
+  return forwardedIp && trustForwardedIp ? forwardedIp : directIp
+}
+
+function normalizeBaseUrl(value: string | null | undefined): string | null {
+  const trimmed = value?.trim()
+  if (!trimmed) {
+    return null
+  }
+
+  try {
+    const parsed = new URL(trimmed)
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      return null
+    }
+    return `${parsed.protocol}//${parsed.host}`
+  } catch {
+    return null
+  }
+}
+
+function derivePanelUrl(request: FastifyRequest, explicitBaseUrl?: string): string {
+  const explicit = normalizeBaseUrl(explicitBaseUrl)
+  if (explicit) {
+    return explicit
+  }
+
+  const frontendUrl = normalizeBaseUrl(process.env.FRONTEND_URL?.split(',')[0])
+  if (frontendUrl) {
+    return frontendUrl
+  }
+
+  const refererBaseUrl = normalizeBaseUrl(firstHeaderValue(request.headers.origin) ?? firstHeaderValue(request.headers.referer))
+  if (refererBaseUrl) {
+    return refererBaseUrl
+  }
+
+  const forwardedProto = firstHeaderValue(request.headers['x-forwarded-proto'])?.split(',')[0]?.trim()
+  const forwardedHost = firstHeaderValue(request.headers['x-forwarded-host'])?.split(',')[0]?.trim()
+  const directHost = firstHeaderValue(request.headers.host)?.trim()
+  const protocol = forwardedProto === 'https' || forwardedProto === 'http'
+    ? forwardedProto
+    : (request.protocol || 'http')
+  const host = forwardedHost || directHost
+
+  if (host) {
+    return `${protocol}://${host}`
+  }
+
+  return 'https://incudal.com'
+}
+
+function shellEscape(value: string): string {
+  return `'${value.replace(/'/g, `'\\''`)}'`
+}
+
+function buildAgentInstallCommand(input: {
+  panelUrl: string
+  installToken: string
+  binaryUrl?: string | null
+}): string {
+  const envParts = [
+    `INCUDAL_PANEL_URL=${shellEscape(input.panelUrl)}`,
+    `INCUDAL_AGENT_INSTALL_TOKEN=${shellEscape(input.installToken)}`
+  ]
+
+  const binaryUrl = input.binaryUrl?.trim()
+  if (binaryUrl) {
+    envParts.push(`INCUDAL_AGENT_BINARY_URL=${shellEscape(binaryUrl)}`)
+  }
+
+  return `curl -fsSL ${shellEscape(`${input.panelUrl}/api/agent/install.sh`)} | sudo env ${envParts.join(' ')} bash`
+}
+
+function buildAgentInstallConfig(input: {
+  agentId: string
+  agentSecret: string
+}): string {
+  return [
+    `INCUDAL_AGENT_ID=${shellEscape(input.agentId)}`,
+    `INCUDAL_AGENT_SECRET=${shellEscape(input.agentSecret)}`
+  ].join('\n') + '\n'
+}
+
+function getAgentReleaseRepository(): string {
+  const configured = process.env.INCUDAL_AGENT_RELEASE_REPOSITORY?.trim() || process.env.GITHUB_REPOSITORY?.trim()
+  const repository = configured || defaultAgentReleaseRepository
+  return /^[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/.test(repository) ? repository : defaultAgentReleaseRepository
+}
+
+function getAgentReleaseApiUrl(): string {
+  return `${githubApiBaseUrl}/repos/${getAgentReleaseRepository()}/releases`
+}
+
+function getGitHubHeaders(accept: string): Record<string, string> {
+  const headers: Record<string, string> = {
+    Accept: accept,
+    'User-Agent': 'incudal-panel'
+  }
+  const token = process.env.INCUDAL_AGENT_RELEASE_TOKEN?.trim()
+  if (token) {
+    headers.Authorization = `Bearer ${token}`
+  }
+  return headers
+}
+
+function getAgentReleaseAssetUrl(tag: string, assetName: string): string {
+  const repository = getAgentReleaseRepository()
+  return `${githubDownloadBaseUrl}/${repository}/releases/download/${encodeURIComponent(tag)}/${encodeURIComponent(assetName)}`
+}
+
+function normalizeAgentReleaseVersion(tagName: string | undefined): string | null {
+  const tag = sanitizeShortString(tagName, 128)
+  if (!tag?.startsWith('agent-')) {
+    return null
+  }
+  const version = tag.slice('agent-'.length)
+  return /^v[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?$/.test(version) ? version : null
+}
+
+function agentApiBinaryNameToReleaseAssetName(name: string, version: string): string | null {
+  if (name === 'incudal-agent-linux-amd64') {
+    return `incudal-agent-x86_64-${version}`
+  }
+  if (name === 'incudal-agent-linux-arm64') {
+    return `incudal-agent-aarch64-${version}`
+  }
+  return null
+}
+
+function releaseAssetNameToAgentPlatform(name: string): 'linux-amd64' | 'linux-arm64' | null {
+  if (name.startsWith('incudal-agent-x86_64-')) {
+    return 'linux-amd64'
+  }
+  if (name.startsWith('incudal-agent-aarch64-')) {
+    return 'linux-arm64'
+  }
+  return null
+}
+
+async function fetchJsonFromGitHub<T>(url: string): Promise<T> {
+  const response = await fetch(url, {
+    headers: getGitHubHeaders('application/vnd.github+json')
+  })
+  if (!response.ok) {
+    throw new Error(`GitHub request failed: ${response.status} ${response.statusText}`)
+  }
+  return await response.json() as T
+}
+
+async function fetchLatestAgentRelease(): Promise<GitHubRelease | null> {
+  const releases = await fetchJsonFromGitHub<unknown>(getAgentReleaseApiUrl())
+  if (!Array.isArray(releases)) {
+    return null
+  }
+
+  for (const release of releases) {
+    if (!isRecord(release)) {
+      continue
+    }
+    const version = normalizeAgentReleaseVersion(sanitizeShortString(release.tag_name, 128) ?? undefined)
+    const assets = Array.isArray(release.assets) ? release.assets : []
+    if (version && assets.length > 0) {
+      return release as GitHubRelease
+    }
+  }
+  return null
+}
+
+async function fetchAgentReleaseAssetSha256(asset: GitHubReleaseAsset): Promise<string | null> {
+  const downloadUrl = sanitizeShortString(asset.url, 2048) ?? sanitizeShortString(asset.browser_download_url, 2048)
+  if (!downloadUrl) {
+    return null
+  }
+
+  const response = await fetch(downloadUrl, {
+    headers: getGitHubHeaders('application/octet-stream')
+  })
+  if (!response.ok || !response.body) {
+    throw new Error(`Agent release asset download failed: ${response.status} ${response.statusText}`)
+  }
+
+  const hash = createHash('sha256')
+  let totalBytes = 0
+  for await (const chunk of response.body) {
+    const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)
+    totalBytes += buffer.length
+    if (totalBytes > agentBinaryDownloadLimitBytes) {
+      throw new Error('Agent release asset exceeds download limit')
+    }
+    hash.update(buffer)
+  }
+  return hash.digest('hex')
+}
+
+async function readAgentUpgradeManifest(): Promise<AgentUpgradeManifest | null> {
+  if (agentReleaseManifestCache && agentReleaseManifestCache.expiresAt > Date.now()) {
+    return agentReleaseManifestCache.manifest
+  }
+
+  let release: GitHubRelease | null = null
+  try {
+    release = await fetchLatestAgentRelease()
+  } catch (error) {
+    console.warn('[AgentRelease] Failed to fetch latest Agent release', error)
+    return null
+  }
+  const version = normalizeAgentReleaseVersion(release?.tag_name)
+  if (!release || !version || !Array.isArray(release.assets)) {
+    return null
+  }
+
+  const manifest: AgentUpgradeManifest = {
+    version,
+    generatedAt: sanitizeShortString(release.published_at, 80) ?? new Date().toISOString(),
+    files: {}
+  }
+  const assets = new Map<string, GitHubReleaseAsset>()
+
+  for (const asset of release.assets) {
+    if (!isRecord(asset)) {
+      continue
+    }
+    const name = sanitizeShortString(asset.name, 256)
+    const size = typeof asset.size === 'number' && Number.isFinite(asset.size) ? asset.size : undefined
+    if (!name || !agentReleaseBinaryNamePattern.test(name) || !name.endsWith(`-${version}`)) {
+      continue
+    }
+    const platform = releaseAssetNameToAgentPlatform(name)
+    if (!platform) {
+      continue
+    }
+    let sha256: string | null = null
+    try {
+      sha256 = await fetchAgentReleaseAssetSha256(asset as GitHubReleaseAsset)
+    } catch (error) {
+      console.warn('[AgentRelease] Failed to hash Agent release asset', { name, error })
+      continue
+    }
+    if (!sha256) {
+      continue
+    }
+
+    manifest.files![platform] = {
+      name: platform === 'linux-amd64' ? 'incudal-agent-linux-amd64' : 'incudal-agent-linux-arm64',
+      sha256,
+      size,
+      gzip: false
+    }
+    assets.set(name, asset as GitHubReleaseAsset)
+  }
+
+  if (!manifest.files?.['linux-amd64'] || !manifest.files?.['linux-arm64']) {
+    return null
+  }
+
+  agentReleaseManifestCache = {
+    expiresAt: Date.now() + agentReleaseCacheTtlMs,
+    manifest
+  }
+  agentReleaseAssetCache = {
+    expiresAt: Date.now() + agentReleaseCacheTtlMs,
+    assets
+  }
+
+  return manifest
+}
+
+async function getAgentReleaseAsset(name: string, version: string): Promise<GitHubReleaseAsset | null> {
+  const assetName = agentApiBinaryNameToReleaseAssetName(name, version)
+  if (!assetName) {
+    return null
+  }
+
+  if (!agentReleaseAssetCache || agentReleaseAssetCache.expiresAt <= Date.now() || !agentReleaseAssetCache.assets.has(assetName)) {
+    await readAgentUpgradeManifest()
+  }
+
+  return agentReleaseAssetCache?.assets.get(assetName) ?? {
+    name: assetName,
+    browser_download_url: getAgentReleaseAssetUrl(`agent-${version}`, assetName)
+  }
+}
+
+async function downloadAgentReleaseBinary(input: {
+  name: string
+  version: string
+  expectedSha256: string
+}): Promise<Buffer | null> {
+  const cacheKey = `${input.version}:${input.name}:${input.expectedSha256.toLowerCase()}`
+  const cachedBinary = agentReleaseBinaryCache?.expiresAt && agentReleaseBinaryCache.expiresAt > Date.now()
+    ? agentReleaseBinaryCache.binaries.get(cacheKey)
+    : null
+  if (cachedBinary) {
+    return cachedBinary
+  }
+
+  const asset = await getAgentReleaseAsset(input.name, input.version)
+  const assetName = sanitizeShortString(asset?.name, 256)
+  if (!assetName || !agentReleaseBinaryNamePattern.test(assetName)) {
+    return null
+  }
+
+  const downloadUrl = sanitizeShortString(asset?.url, 2048) ?? getAgentReleaseAssetUrl(`agent-${input.version}`, assetName)
+  const response = await fetch(downloadUrl, {
+    headers: getGitHubHeaders('application/octet-stream')
+  })
+  if (!response.ok || !response.body) {
+    throw new Error(`Agent release binary download failed: ${response.status} ${response.statusText}`)
+  }
+
+  const chunks: Buffer[] = []
+  const hash = createHash('sha256')
+  let totalBytes = 0
+  for await (const chunk of response.body) {
+    const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)
+    totalBytes += buffer.length
+    if (totalBytes > agentBinaryDownloadLimitBytes) {
+      throw new Error('Agent release binary exceeds download limit')
+    }
+    chunks.push(buffer)
+    hash.update(buffer)
+  }
+
+  const actualSha256 = hash.digest('hex')
+  if (!isSha256(input.expectedSha256) || actualSha256 !== input.expectedSha256.toLowerCase()) {
+    throw new Error(`Agent release binary sha256 mismatch: expected=${input.expectedSha256} actual=${actualSha256}`)
+  }
+
+  const binary = Buffer.concat(chunks)
+  if (!agentReleaseBinaryCache || agentReleaseBinaryCache.expiresAt <= Date.now()) {
+    agentReleaseBinaryCache = {
+      expiresAt: Date.now() + agentReleaseCacheTtlMs,
+      binaries: new Map()
+    }
+  }
+  agentReleaseBinaryCache.binaries.set(cacheKey, binary)
+  return binary
+}
+
+async function getLatestAgentVersion(): Promise<string | null> {
+  return sanitizeShortString((await readAgentUpgradeManifest())?.version, 128)
+}
+
+function getAgentVersionStatus(agentVersion: string | null, latestVersion: string | null): 'latest' | 'outdated' | 'unknown' {
+  if (!agentVersion || !latestVersion) {
+    return 'unknown'
+  }
+  return agentVersion === latestVersion ? 'latest' : 'outdated'
+}
+
+function isSha256(value: string | undefined): value is string {
+  return typeof value === 'string' && /^[a-f0-9]{64}$/i.test(value)
+}
+
+async function buildAgentUpgradeInstruction(request: FastifyRequest, body: AgentHeartbeatBody): Promise<AgentUpgradeInstruction> {
+  const manifest = await readAgentUpgradeManifest()
+  const manifestVersion = sanitizeShortString(manifest?.version, 128)
+  if (!manifest || !manifestVersion) {
+    return { available: false }
+  }
+
+  const currentVersion = sanitizeShortString(body.version, 128)
+  if (currentVersion === manifestVersion) {
+    return { available: false, version: manifestVersion }
+  }
+
+  const runtimeInfo = body.runtime ?? {}
+  const goos = sanitizeShortString(runtimeInfo.goos, 32)
+  const goarch = sanitizeShortString(runtimeInfo.goarch, 32)
+  if (goos !== 'linux' || (goarch !== 'amd64' && goarch !== 'arm64')) {
+    return { available: false, version: manifestVersion }
+  }
+
+  const file = manifest.files?.[`${goos}-${goarch}`]
+  const name = sanitizeShortString(file?.name, 128)
+  if (!file || !name || !agentBinaryNamePattern.test(name) || !isSha256(file.sha256)) {
+    return { available: false, version: manifestVersion }
+  }
+
+  const upgradeUrl = `${derivePanelUrl(request)}/api/agent/binary/${encodeURIComponent(name)}?v=${encodeURIComponent(manifestVersion)}&sha256=${encodeURIComponent(file.sha256)}`
+  const instruction: AgentUpgradeInstruction = {
+    available: true,
+    version: manifestVersion,
+    url: upgradeUrl,
+    sha256: file.sha256,
+    gzip: file.gzip ?? name.endsWith('.gz')
+  }
+  if (typeof file.size === 'number' && Number.isFinite(file.size) && file.size > 0) {
+    instruction.size = file.size
+  }
+  return instruction
+}
+
+function normalizeAgentMetrics(metrics: Record<string, unknown> | undefined): Record<string, unknown> {
+  return {
+    ...(metrics ?? {}),
+    heartbeatIntervalSeconds: clampAgentHeartbeatIntervalSeconds(metrics?.heartbeatIntervalSeconds)
+  }
+}
+
+function getAgentHeartbeatIntervalSeconds(agent: HostAgentRecord): number {
+  if (!isRecord(agent.lastReport)) {
+    return defaultAgentHeartbeatIntervalSeconds
+  }
+  const metrics = agent.lastReport.metrics
+  if (!isRecord(metrics)) {
+    return defaultAgentHeartbeatIntervalSeconds
+  }
+  return clampAgentHeartbeatIntervalSeconds(metrics.heartbeatIntervalSeconds)
+}
+
+function deriveAgentStatus(agent: HostAgentRecord, now = new Date()): string {
+  if (!agent.enabled || agent.status !== 'online') {
+    return agent.status
+  }
+  if (!agent.lastSeenAt) {
+    return 'offline'
+  }
+
+  const heartbeatIntervalSeconds = getAgentHeartbeatIntervalSeconds(agent)
+  const offlineThresholdSeconds = Math.max(heartbeatIntervalSeconds * 3, minAgentOfflineThresholdSeconds)
+  const lastSeenAgeMs = now.getTime() - agent.lastSeenAt.getTime()
+
+  return lastSeenAgeMs > offlineThresholdSeconds * 1000 ? 'offline' : agent.status
+}
+
+async function serializeAgent(agent: HostAgentRecord) {
+  const latestVersion = await getLatestAgentVersion()
+  const versionStatus = getAgentVersionStatus(agent.version, latestVersion)
+
+  return {
+    id: agent.id,
+    hostId: agent.hostId,
+    agentId: agent.agentId,
+    secretHash: agent.secretHash,
+    enabled: agent.enabled,
+    status: deriveAgentStatus(agent),
+    version: agent.version,
+    latestVersion,
+    versionStatus,
+    capabilities: agent.capabilities ?? [],
+    lastReport: agent.lastReport ?? {},
+    lastSeenAt: agent.lastSeenAt?.toISOString() ?? null,
+    lastHeartbeatIp: agent.lastHeartbeatIp,
+    createdAt: agent.createdAt.toISOString(),
+    updatedAt: agent.updatedAt.toISOString()
+  }
+}
+
+async function serializeAgentStatus(agent: HostAgentRecord) {
+  const latestVersion = await getLatestAgentVersion()
+  const versionStatus = getAgentVersionStatus(agent.version, latestVersion)
+
+  return {
+    id: agent.id,
+    hostId: agent.hostId,
+    agentId: agent.agentId,
+    enabled: agent.enabled,
+    status: deriveAgentStatus(agent),
+    version: agent.version,
+    latestVersion,
+    versionStatus,
+    capabilities: agent.capabilities ?? [],
+    lastReport: agent.lastReport ?? {},
+    lastSeenAt: agent.lastSeenAt?.toISOString() ?? null,
+    lastHeartbeatIp: agent.lastHeartbeatIp,
+    createdAt: agent.createdAt.toISOString(),
+    updatedAt: agent.updatedAt.toISOString()
+  }
+}
+
+function buildHeartbeatReport(body: AgentHeartbeatBody): Record<string, unknown> {
+  return {
+    runtime: body.runtime ?? {},
+    incus: body.incus ?? {},
+    resources: body.resources ?? {},
+    metrics: normalizeAgentMetrics(body.metrics)
+  }
+}
+
+async function authenticateAgentRequest(
+  request: FastifyRequest<{ Body: AgentHeartbeatBody }>,
+  reply: FastifyReply
+): Promise<HostAgentRecord | null> {
+  const headers = readAgentAuthHeaders(request.headers)
+  if (!headers) {
+    reply.code(401).send({ error: 'Agent authentication headers are required', code: 'AGENT_AUTH_REQUIRED' })
+    return null
+  }
+
+  const headerError = validateAgentHeaders(headers)
+  if (headerError) {
+    reply.code(401).send({ error: 'Invalid Agent authentication headers', code: 'AGENT_AUTH_INVALID', details: headerError })
+    return null
+  }
+
+  if (!isAgentTimestampFresh(headers.timestamp)) {
+    reply.code(401).send({ error: 'Agent request timestamp is expired', code: 'AGENT_AUTH_EXPIRED' })
+    return null
+  }
+
+  const bodyHash = createAgentBodyHash(request.body ?? {})
+  if (bodyHash !== headers.bodyHash.toLowerCase()) {
+    reply.code(401).send({ error: 'Agent body hash mismatch', code: 'AGENT_BODY_HASH_MISMATCH' })
+    return null
+  }
+
+  const agent = await agentModel.findUnique({
+    where: { agentId: headers.agentId }
+  })
+
+  if (!agent || !agent.enabled) {
+    reply.code(401).send({ error: 'Agent is not enabled', code: 'AGENT_DISABLED' })
+    return null
+  }
+
+  const secret = decryptSensitiveData(agent.secretEncrypted)
+  if (!secret || !isValidAgentSecret(secret)) {
+    reply.code(401).send({ error: 'Agent secret is not available', code: 'AGENT_SECRET_INVALID' })
+    return null
+  }
+
+  const signatureOk = verifyAgentSignature(secret, {
+    method: request.method,
+    path: buildRequestPath(request),
+    timestamp: headers.timestamp,
+    nonce: headers.nonce,
+    bodyHash
+  }, headers.signature)
+
+  if (!signatureOk) {
+    reply.code(401).send({ error: 'Agent signature verification failed', code: 'AGENT_SIGNATURE_INVALID' })
+    return null
+  }
+
+  try {
+    await prisma.$transaction([
+      nonceModel.deleteMany({
+        where: {
+          expiresAt: { lt: new Date() }
+        }
+      }),
+      nonceModel.create({
+        data: {
+          agentId: agent.agentId,
+          nonce: headers.nonce,
+          expiresAt: new Date(Date.now() + agentNonceTtlMs)
+        }
+      })
+    ])
+  } catch (error) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2002') {
+      reply.code(401).send({ error: 'Agent nonce was already used', code: 'AGENT_NONCE_REPLAY' })
+      return null
+    }
+    throw error
+  }
+
+  return agent
+}
+
+export default async function agentRoutes(fastify: FastifyInstance) {
+  fastify.get('/install.sh', async (_request: FastifyRequest, reply: FastifyReply) => {
+    const scriptPath = join(__dirname, '../../templates/agent-install.sh')
+    const script = readFileSync(scriptPath, 'utf8')
+    return reply
+      .header('Content-Type', 'text/x-shellscript; charset=utf-8')
+      .header('Cache-Control', 'no-store')
+      .send(script)
+  })
+
+  fastify.get('/manifest.json', async (_request: FastifyRequest, reply: FastifyReply) => {
+    const manifest = await readAgentUpgradeManifest()
+    if (!manifest) {
+      return reply.code(404).send({ error: 'Agent manifest not found', code: 'AGENT_MANIFEST_NOT_FOUND' })
+    }
+
+    return reply
+      .header('Content-Type', 'application/json; charset=utf-8')
+      .header('Content-Disposition', 'attachment; filename="manifest.json"')
+      .header('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate')
+      .header('Pragma', 'no-cache')
+      .header('Expires', '0')
+      .send(manifest)
+  })
+
+  fastify.get<{ Params: AgentInstallTokenParams }>('/install-config/:token', async (
+    request: FastifyRequest<{ Params: AgentInstallTokenParams }>,
+    reply: FastifyReply
+  ) => {
+    const { token } = request.params
+    try {
+      const result = await consumeHostAgentInstallToken(token)
+      request.log.info(
+        { hostId: result.host.id, agentId: result.agent.agentId },
+        'Host Agent install token consumed'
+      )
+      await createLog(
+        null,
+        LogModule.HOST,
+        'host.agent_install_token_consume',
+        `宿主机 Agent 一次性安装 token 已消费: ${result.host.name} (#${result.host.id})`,
+        LogResult.SUCCESS
+      )
+
+      return reply
+        .header('Content-Type', 'text/plain; charset=utf-8')
+        .header('Cache-Control', 'no-store')
+        .send(buildAgentInstallConfig({
+          agentId: result.agent.agentId,
+          agentSecret: result.agentSecret
+        }))
+    } catch (error) {
+      if (error instanceof Error && error.message === 'AGENT_INSTALL_TOKEN_EXPIRED') {
+        return reply.code(403).send('# Error: Agent install token has expired')
+      }
+      if (error instanceof Error && (
+        error.message === 'AGENT_INSTALL_TOKEN_INVALID' ||
+        error.message === 'AGENT_SECRET_INVALID'
+      )) {
+        return reply.code(403).send('# Error: Invalid Agent install token')
+      }
+      throw error
+    }
+  })
+
+  fastify.get<{ Params: AgentBinaryParams }>('/binary/:name', async (
+    request: FastifyRequest<{ Params: AgentBinaryParams }>,
+    reply: FastifyReply
+  ) => {
+    const { name } = request.params
+    if (!agentBinaryNamePattern.test(name)) {
+      return reply.code(400).send({ error: 'Invalid Agent binary name', code: 'INVALID_AGENT_BINARY_NAME' })
+    }
+
+    const manifest = await readAgentUpgradeManifest()
+    const version = sanitizeShortString(manifest?.version, 128)
+    const platform = name.includes('amd64') ? 'linux-amd64' : 'linux-arm64'
+    const file = manifest?.files?.[platform]
+    if (!manifest || !version || !file || !isSha256(file.sha256)) {
+      return reply.code(404).send({ error: 'Agent binary not found', code: 'AGENT_BINARY_NOT_FOUND' })
+    }
+
+    let binary: Buffer | null = null
+    try {
+      binary = await downloadAgentReleaseBinary({
+        name,
+        version,
+        expectedSha256: file.sha256
+      })
+    } catch (error) {
+      request.log.warn({ error, name, version }, 'Failed to download Agent release binary')
+      return reply.code(502).send({ error: 'Agent binary download failed', code: 'AGENT_BINARY_DOWNLOAD_FAILED' })
+    }
+
+    if (!binary) {
+      return reply.code(404).send({ error: 'Agent binary not found', code: 'AGENT_BINARY_NOT_FOUND' })
+    }
+
+    return reply
+      .header('Content-Type', 'application/octet-stream')
+      .header('Content-Disposition', `attachment; filename="${name}"`)
+      .header('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate')
+      .header('Pragma', 'no-cache')
+      .header('Expires', '0')
+      .send(binary)
+  })
+
+  fastify.get<{ Params: AgentCredentialsParams }>('/hosts/:hostId/status', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: AgentCredentialsParams }>, reply: FastifyReply) => {
+    const hostId = parsePositiveId(request.params.hostId)
+    if (!hostId) {
+      return reply.code(400).send({ error: 'Invalid host ID', code: 'INVALID_HOST_ID' })
+    }
+
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: { id: true, name: true, userId: true }
+    })
+    if (!host) {
+      return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+    }
+
+    if (host.userId !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send({ error: 'Forbidden', code: 'FORBIDDEN' })
+    }
+
+    const agent = await agentModel.findUnique({
+      where: { hostId }
+    })
+
+    return {
+      host: {
+        id: host.id,
+        name: host.name
+      },
+      agent: agent ? await serializeAgentStatus(agent) : null
+    }
+  })
+
+  fastify.post<{ Params: AgentCredentialsParams }>('/hosts/:hostId/upgrade', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: AgentCredentialsParams }>, reply: FastifyReply) => {
+    const hostId = parsePositiveId(request.params.hostId)
+    if (!hostId) {
+      return reply.code(400).send({ error: 'Invalid host ID', code: 'INVALID_HOST_ID' })
+    }
+
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: { id: true, name: true, userId: true }
+    })
+    if (!host) {
+      return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+    }
+
+    if (host.userId !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send({ error: 'Forbidden', code: 'FORBIDDEN' })
+    }
+
+    const agent = await agentModel.findUnique({
+      where: { hostId }
+    })
+    if (!agent) {
+      return reply.code(404).send({ error: 'Agent not found', code: 'AGENT_NOT_FOUND' })
+    }
+
+    const latestVersion = await getLatestAgentVersion()
+    const versionStatus = getAgentVersionStatus(agent.version, latestVersion)
+    const derivedStatus = deriveAgentStatus(agent)
+
+    if (!latestVersion) {
+      return reply.code(503).send({ error: 'Agent latest version unavailable', code: 'AGENT_LATEST_VERSION_UNAVAILABLE' })
+    }
+    if (versionStatus === 'unknown') {
+      return reply.code(409).send({ error: 'Agent version unknown', code: 'AGENT_VERSION_UNKNOWN' })
+    }
+    if (versionStatus === 'latest') {
+      return {
+        requested: false,
+        currentVersion: agent.version,
+        latestVersion,
+        versionStatus,
+        nextHeartbeatSeconds: getAgentHeartbeatIntervalSeconds(agent),
+        message: 'Agent is already latest'
+      }
+    }
+    if (!agent.enabled || derivedStatus !== 'online') {
+      return reply.code(409).send({ error: 'Agent is not online', code: 'AGENT_NOT_ONLINE' })
+    }
+
+    const nextHeartbeatSeconds = getAgentHeartbeatIntervalSeconds(agent)
+    await createLog(
+      request.user.id,
+      LogModule.HOST,
+      'host.agent_upgrade_request',
+      `请求宿主机 Agent 升级: ${host.name} (#${host.id}) ${agent.version || 'unknown'} -> ${latestVersion}`,
+      LogResult.SUCCESS
+    )
+
+    return {
+      requested: true,
+      currentVersion: agent.version,
+      latestVersion,
+      versionStatus,
+      nextHeartbeatSeconds,
+      message: 'Agent upgrade request accepted; upgrade instruction will be delivered on next heartbeat'
+    }
+  })
+
+  fastify.post<{ Params: AgentCredentialsParams; Body: AgentCredentialsBody }>('/hosts/:hostId/install-command', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (
+    request: FastifyRequest<{ Params: AgentCredentialsParams; Body: AgentCredentialsBody }>,
+    reply: FastifyReply
+  ) => {
+    const hostId = parsePositiveId(request.params.hostId)
+    if (!hostId) {
+      return reply.code(400).send({ error: 'Invalid host ID', code: 'INVALID_HOST_ID' })
+    }
+
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: { id: true, name: true, userId: true }
+    })
+    if (!host) {
+      return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+    }
+
+    if (host.userId !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send({ error: 'Forbidden', code: 'FORBIDDEN' })
+    }
+
+    const panelUrl = derivePanelUrl(request)
+    let result: Awaited<ReturnType<typeof issueHostAgentInstallToken>>
+    try {
+      result = await issueHostAgentInstallToken(hostId, request.body?.enabled ?? true)
+    } catch (error) {
+      if (error instanceof Error && error.message === 'HOST_NOT_FOUND') {
+        return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+      }
+      throw error
+    }
+    const installCommand = buildAgentInstallCommand({
+      panelUrl,
+      installToken: result.installToken
+    })
+
+    await createLog(
+      request.user.id,
+      LogModule.HOST,
+      'host.agent_install_command_generate',
+      `生成宿主机 Agent 安装命令: ${host.name} (#${host.id})`,
+      LogResult.SUCCESS
+    )
+
+    return reply.code(201).send({
+      host: result.host,
+      agent: await serializeAgentStatus(result.agent),
+      installToken: result.installToken,
+      installTokenExpiresAt: result.installTokenExpiresAt.toISOString(),
+      installScriptUrl: `${panelUrl}/api/agent/install.sh`,
+      installCommand,
+      warning: 'installCommand 内包含一次性 Agent 安装 token，30 分钟内有效且只能使用一次。'
+    })
+  })
+
+  fastify.get<{ Params: AgentCredentialsParams }>('/admin/hosts/:hostId/status', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: AgentCredentialsParams }>, reply: FastifyReply) => {
+    const hostId = parsePositiveId(request.params.hostId)
+    if (!hostId) {
+      return reply.code(400).send({ error: 'Invalid host ID', code: 'INVALID_HOST_ID' })
+    }
+
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: { id: true, name: true }
+    })
+    if (!host) {
+      return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+    }
+
+    const agent = await agentModel.findUnique({
+      where: { hostId }
+    })
+
+    return {
+      host,
+      agent: agent ? await serializeAgent(agent) : null
+    }
+  })
+
+  fastify.post<{ Params: AgentCredentialsParams; Body: AgentCredentialsBody }>('/admin/hosts/:hostId/credentials', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (
+    request: FastifyRequest<{ Params: AgentCredentialsParams; Body: AgentCredentialsBody }>,
+    reply: FastifyReply
+  ) => {
+    const hostId = parsePositiveId(request.params.hostId)
+    if (!hostId) {
+      return reply.code(400).send({ error: 'Invalid host ID', code: 'INVALID_HOST_ID' })
+    }
+
+    let result: Awaited<ReturnType<typeof rotateHostAgentCredentials>>
+    try {
+      result = await rotateHostAgentCredentials(hostId, request.body?.enabled ?? true)
+    } catch (error) {
+      if (error instanceof Error && error.message === 'HOST_NOT_FOUND') {
+        return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+      }
+      throw error
+    }
+
+    await createLog(
+      request.user.id,
+      LogModule.HOST,
+      'host.agent_credentials_rotate',
+      `重置宿主机 Agent 凭据: ${result.host.name} (#${result.host.id})`,
+      LogResult.SUCCESS
+    )
+
+    return reply.code(201).send({
+      host: result.host,
+      agent: await serializeAgent(result.agent),
+      credentials: {
+        agentId: result.agentId,
+        agentSecret: result.agentSecret
+      },
+      warning: 'agentSecret 只会在本次响应中返回，请写入宿主机 Agent 配置后妥善保存。'
+    })
+  })
+
+  fastify.post<{ Params: AgentCredentialsParams; Body: AgentInstallCommandBody }>('/admin/hosts/:hostId/install-command', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          enabled: { type: 'boolean' },
+          baseUrl: { type: 'string', minLength: 1 },
+          binaryUrl: { type: 'string', minLength: 1 }
+        }
+      }
+    }
+  }, async (
+    request: FastifyRequest<{ Params: AgentCredentialsParams; Body: AgentInstallCommandBody }>,
+    reply: FastifyReply
+  ) => {
+    const hostId = parsePositiveId(request.params.hostId)
+    if (!hostId) {
+      return reply.code(400).send({ error: 'Invalid host ID', code: 'INVALID_HOST_ID' })
+    }
+
+    const panelUrl = derivePanelUrl(request, request.body?.baseUrl)
+    let result: Awaited<ReturnType<typeof issueHostAgentInstallToken>>
+    try {
+      result = await issueHostAgentInstallToken(hostId, request.body?.enabled ?? true)
+    } catch (error) {
+      if (error instanceof Error && error.message === 'HOST_NOT_FOUND') {
+        return reply.code(404).send({ error: 'Host not found', code: 'HOST_NOT_FOUND' })
+      }
+      throw error
+    }
+
+    const installCommand = buildAgentInstallCommand({
+      panelUrl,
+      installToken: result.installToken,
+      binaryUrl: request.body?.binaryUrl
+    })
+
+    await createLog(
+      request.user.id,
+      LogModule.HOST,
+      'host.agent_install_command_generate',
+      `生成宿主机 Agent 安装命令: ${result.host.name} (#${result.host.id})`,
+      LogResult.SUCCESS
+    )
+
+    return reply.code(201).send({
+      host: result.host,
+      agent: await serializeAgent(result.agent),
+      installToken: result.installToken,
+      installTokenExpiresAt: result.installTokenExpiresAt.toISOString(),
+      installScriptUrl: `${panelUrl}/api/agent/install.sh`,
+      installCommand,
+      warning: 'installCommand 内包含一次性 Agent 安装 token，30 分钟内有效且只能使用一次。'
+    })
+  })
+
+  fastify.post<{ Body: AgentHeartbeatBody }>('/heartbeat', {
+    schema: {
+      body: {
+        type: 'object',
+        additionalProperties: true,
+        properties: {
+          version: { type: 'string', maxLength: 128 },
+          capabilities: {
+            type: 'array',
+            maxItems: 64,
+            items: { type: 'string', maxLength: 80 }
+          },
+          runtime: { type: 'object', additionalProperties: true },
+          incus: { type: 'object', additionalProperties: true },
+          instances: { type: 'object', additionalProperties: true },
+          resources: { type: 'object', additionalProperties: true },
+          metrics: { type: 'object', additionalProperties: true }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: AgentHeartbeatBody }>, reply: FastifyReply) => {
+    const agent = await authenticateAgentRequest(request, reply)
+    if (!agent) {
+      return
+    }
+
+    const now = new Date()
+    let instanceReport: Awaited<ReturnType<typeof processAgentInstanceReport>> | null = null
+    try {
+      instanceReport = await processAgentInstanceReport(agent.hostId, request.body.instances)
+    } catch (error) {
+      request.log.warn(
+        { agentId: agent.agentId, hostId: agent.hostId, error },
+        'Failed to process Agent instance report'
+      )
+    }
+
+    await agentModel.update({
+      where: { agentId: agent.agentId },
+      data: {
+        status: 'online',
+        version: sanitizeShortString(request.body.version, 128),
+        capabilities: normalizeCapabilities(request.body.capabilities) as Prisma.InputJsonValue,
+        lastReport: buildHeartbeatReport(request.body) as Prisma.InputJsonObject,
+        lastSeenAt: now,
+        lastHeartbeatIp: sanitizeShortString(getAgentHeartbeatIp(request), 128)
+      }
+    })
+
+    return {
+      ok: true,
+      serverTime: now.toISOString(),
+      taskPollIntervalSeconds: 15,
+      instanceReport,
+      upgrade: await buildAgentUpgradeInstruction(request, request.body)
+    }
+  })
+}
diff --git a/server/src/routes/announcements.ts b/server/src/routes/announcements.ts
new file mode 100644
index 0000000..4777448
--- /dev/null
+++ b/server/src/routes/announcements.ts
@@ -0,0 +1,106 @@
+/**
+ * 公告/通知历史记录路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as announcementsDb from '../db/announcements.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+
+export default async function announcementsRoutes(fastify: FastifyInstance) {
+  // 所有路由都需要认证
+  fastify.addHook('onRequest', fastify.authenticate)
+
+  /**
+   * 获取公告历史列表（管理员）
+   * GET /api/announcements
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+    }
+  }>('/', async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+    }
+  }>, reply: FastifyReply) => {
+    // 检查管理员权限
+    if (request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const { page = '1', pageSize = '20', type } = request.query
+
+    const result = await announcementsDb.getAnnouncementList({
+      page: parseInt(page, 10) || 1,
+      pageSize: parseInt(pageSize, 10) || 20,
+      type: type as any,
+    })
+
+    return result
+  })
+
+  /**
+   * 获取宿主机所有者的公告历史
+   * GET /api/announcements/my
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      hostId?: string
+    }
+  }>('/my', async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      hostId?: string
+    }
+  }>) => {
+    const { page = '1', pageSize = '20', hostId } = request.query
+
+    const result = await announcementsDb.getHostOwnerAnnouncementList(
+      request.user.id,
+      {
+        page: parseInt(page, 10) || 1,
+        pageSize: parseInt(pageSize, 10) || 20,
+        hostId: hostId ? parseInt(hostId, 10) : undefined,
+      }
+    )
+
+    return result
+  })
+
+  /**
+   * 获取公告详情
+   * GET /api/announcements/:id
+   */
+  fastify.get<{
+    Params: { id: string }
+  }>('/:id', async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const announcementId = Number(id)
+
+    if (isNaN(announcementId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const announcement = await announcementsDb.getAnnouncementById(announcementId)
+
+    if (!announcement) {
+      return reply.code(404).send({ error: 'ANNOUNCEMENT_NOT_FOUND', message: 'Announcement not found' })
+    }
+
+    // 检查权限：管理员可以查看所有，宿主机所有者只能查看自己发送的
+    if (request.user.role !== 'admin' && announcement.senderId !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    return announcement
+  })
+}
diff --git a/server/src/routes/auth.ts b/server/src/routes/auth.ts
new file mode 100644
index 0000000..be3ab12
--- /dev/null
+++ b/server/src/routes/auth.ts
@@ -0,0 +1,1369 @@
+/**
+ * 认证路由
+ */
+
+// @ts-ignore - bcryptjs has its own types
+import bcrypt from 'bcryptjs'
+import { nanoid } from 'nanoid'
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import {
+  checkLoginLock,
+  recordLoginFailure,
+  clearLoginFailure,
+  validatePassword,
+  logSecurityEvent,
+  SecurityEventType,
+  generateRefreshToken,
+  verifyRefreshToken,
+  revokeRefreshToken,
+  revokeAllUserRefreshTokens,
+  updateSessionActivity,
+  invalidateSessionAccessToken,
+  invalidateUserAccessTokens,
+  generate2FASecret,
+  generate2FAQRCode,
+  verify2FAToken,
+  generateRecoveryCodes,
+  encryptSensitiveData,
+  decryptSensitiveData,
+  validateIdentifier,
+  containsDangerousChars,
+  detectNewLoginLocation
+} from '../lib/security.js'
+import type { LoginRequest, RegisterRequest } from '../types/api.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { turnstileVerifier } from '../lib/turnstile.js'
+import { isSmtpEnabled, sendVerificationEmail, sendLoginAlertEmail, sendPasswordResetEmail, sendFreeSiteRegisterGiftEmail } from '../lib/mailer.js'
+import { createVerificationCode, verifyCode } from '../db/email-verification.js'
+import { validateEmailDomain } from '../lib/email-domain.js'
+import {
+    isOperationVerified,
+    consumeOperationVerification
+} from '../lib/operation-verification.js'
+import {
+    getRefreshTokenCookieOptions,
+    getClearCookieOptions
+} from '../lib/cookie-config.js'
+import { sendNotification } from '../lib/notifier.js'
+import { getGeoIpInfo } from '../lib/geoip.js'
+import { createLoginRecord } from '../db/login-records.js'
+import { getUserLoginRecords } from '../db/login-records.js'
+import { closeSessionTerminalSessions, closeUserSessions } from '../lib/terminal-proxy.js'
+import { revokeActionTicketsForSession } from '../lib/action-ticket.js'
+import { getUserHostingFeatureStatus } from '../lib/hosting-access.js'
+
+interface LoginWith2FARequest extends LoginRequest {
+  totpCode?: string
+  recoveryCode?: string
+  turnstileToken?: string
+}
+
+async function buildAuthUserPayload(user: {
+  id: number
+  username: string
+  email: string | null
+  role: 'admin' | 'user'
+  avatar_style: string
+  avatar_badge_id?: string | null
+  has_created_host_before?: boolean
+}) {
+  const hostingFeatureStatus = await getUserHostingFeatureStatus(user.id)
+
+  return {
+    id: user.id,
+    username: user.username,
+    email: user.email,
+    role: user.role,
+    avatarStyle: user.avatar_style,
+    avatarBadgeId: user.avatar_badge_id ?? null,
+    hasCreatedHostBefore: hostingFeatureStatus.hasCreatedHostBefore,
+    canAccessHostingFeature: hostingFeatureStatus.canAccessHostingFeature
+  }
+}
+
+export default async function authRoutes(fastify: FastifyInstance) {
+  async function ensureRegistrationEnabled(reply: FastifyReply): Promise<boolean> {
+    const registrationEnabled = await db.isRegistrationEnabled()
+    if (!registrationEnabled) {
+      reply.code(403).send(apiError(ErrorCode.REGISTRATION_DISABLED))
+      return false
+    }
+    return true
+  }
+
+  // 检查用户是否启用了 2FA（登录前检查）
+  fastify.post<{ Body: { username: string } }>('/check-2fa', {
+    schema: {
+      body: {
+        type: 'object',
+        required: ['username'],
+        properties: {
+          username: { type: 'string', minLength: 3, maxLength: 32 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { username: string } }>, _reply: FastifyReply) => {
+    const { username } = request.body
+
+    // 查询用户（支持用户名或邮箱）
+    const user = await db.findUserByUsernameOrEmail(username)
+    if (!user) {
+      // 为了安全，不透露用户是否存在，统一返回不需要2FA
+      return { requires2FA: false }
+    }
+
+    // 检查是否启用了 2FA
+    const twoFAEnabled = await db.is2FAEnabled(user.id)
+    return { requires2FA: twoFAEnabled }
+  })
+
+  // 用户登录 (支持 2FA)
+  fastify.post<{ Body: LoginWith2FARequest }>('/login', {
+    preHandler: [turnstileVerifier],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['username', 'password'],
+        properties: {
+          username: { type: 'string', minLength: 3, maxLength: 32 },
+          password: { type: 'string', minLength: 6, maxLength: 128 },
+          totpCode: { type: 'string', minLength: 6, maxLength: 6 },
+          recoveryCode: { type: 'string', minLength: 8, maxLength: 20 },
+          turnstileToken: { type: 'string' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: LoginWith2FARequest }>, reply: FastifyReply) => {
+    const { username, password, totpCode, recoveryCode } = request.body
+    const clientIp = request.ip
+
+    // 调试日志（生产环境可通过 LOG_LEVEL=debug 启用）
+    request.log.debug({ username, passwordLength: password?.length, has2FA: !!totpCode || !!recoveryCode }, '[login] 登录请求')
+
+    // 查询用户（支持用户名或邮箱登录）
+    // 注意：先查询用户，以便后续使用用户ID进行锁定检查（更准确）
+    const user = await db.findUserByUsernameOrEmail(username)
+    
+    // 检查是否被锁定（使用用户ID或identifier作为key）
+    // 如果用户存在，使用用户ID；如果不存在，使用identifier（用户名或邮箱）
+    // 这样确保无论使用用户名还是邮箱登录，都能正确锁定同一个账户
+    const lockStatus = checkLoginLock(clientIp, user ? `user:${user.id}` : username.toLowerCase().trim())
+    if (lockStatus.locked) {
+      await logSecurityEvent(SecurityEventType.RATE_LIMIT_EXCEEDED, user?.id || null, {
+        ip: clientIp,
+        username: user?.username || username,
+        action: 'login',
+        reason: 'Account locked due to too many failed attempts'
+      })
+      return reply.code(429).send(apiError(ErrorCode.TOO_MANY_ATTEMPTS, `${Math.ceil((lockStatus.retryAfter || 0) / 60)} minutes`))
+    }
+
+    if (!user) {
+      request.log.debug({ username }, '[login] 用户不存在')
+      recordLoginFailure(clientIp, username)
+      await logSecurityEvent(SecurityEventType.LOGIN_FAILED, null, {
+        ip: clientIp,
+        username,
+        reason: 'User not found'
+      })
+      return reply.code(401).send(apiError(ErrorCode.INVALID_CREDENTIALS))
+    }
+    request.log.debug({ userId: user.id, username: user.username, status: user.status }, '[login] 找到用户')
+
+    // 检查账户状态
+    if (user.status === 'banned') {
+      await logSecurityEvent(SecurityEventType.LOGIN_FAILED, user.id, {
+        ip: clientIp,
+        username,
+        reason: 'Account banned'
+      })
+      // 如果有封禁原因，返回该原因
+      if (user.ban_reason) {
+        return reply.code(403).send({
+          error: user.ban_reason,
+          code: ErrorCode.ACCOUNT_BANNED
+        })
+      }
+      return reply.code(403).send(apiError(ErrorCode.ACCOUNT_BANNED))
+    }
+
+    // 验证密码
+    request.log.debug({
+      passwordLength: password?.length,
+      hashPrefix: user.password_hash?.substring(0, 10),
+      hashLength: user.password_hash?.length
+    }, '[login] 开始验证密码')
+
+    const validPassword = await bcrypt.compare(password, user.password_hash)
+    request.log.debug({ validPassword }, '[login] 密码验证结果')
+
+    if (!validPassword) {
+      // 使用用户ID进行锁定，确保无论使用用户名还是邮箱登录，都能正确锁定
+      recordLoginFailure(clientIp, `user:${user.id}`)
+      await logSecurityEvent(SecurityEventType.LOGIN_FAILED, user.id, {
+        ip: clientIp,
+        username: user.username,
+        reason: 'Invalid password'
+      })
+      return reply.code(401).send(apiError(ErrorCode.INVALID_CREDENTIALS))
+    }
+
+    // 检查是否启用了 2FA
+    const twoFAEnabled = await db.is2FAEnabled(user.id)
+    if (twoFAEnabled) {
+      // 用户启用了2FA，必须提供验证码或恢复码
+      if (!totpCode && !recoveryCode) {
+        recordLoginFailure(clientIp, `user:${user.id}`)
+        await logSecurityEvent(SecurityEventType.LOGIN_FAILED, user.id, {
+          ip: clientIp,
+          username: user.username,
+          reason: '2FA required but not provided'
+        })
+        return reply.code(401).send(apiError(ErrorCode.TWO_FA_REQUIRED))
+      }
+
+      let verified = false
+
+      // 优先验证 TOTP 码
+      if (totpCode) {
+        const secret = await db.get2FASecret(user.id)
+        if (secret) {
+          const decryptedSecret = decryptSensitiveData(secret)
+          if (decryptedSecret && verify2FAToken(totpCode, decryptedSecret)) {
+            verified = true
+          }
+        }
+      }
+
+      // 如果 TOTP 验证失败，尝试恢复码
+      if (!verified && recoveryCode) {
+        const encryptedCodes = await db.get2FARecoveryCodes(user.id)
+        if (encryptedCodes) {
+          const decryptedCodesJson = decryptSensitiveData(encryptedCodes)
+          if (decryptedCodesJson) {
+            try {
+              const codes: string[] = JSON.parse(decryptedCodesJson)
+              const codeIndex = codes.indexOf(recoveryCode.toUpperCase())
+              if (codeIndex !== -1) {
+                // 恢复码有效，移除已使用的恢复码
+                codes.splice(codeIndex, 1)
+                const newEncryptedCodes = encryptSensitiveData(JSON.stringify(codes))
+                await db.save2FARecoveryCodes(user.id, newEncryptedCodes)
+                verified = true
+
+                await logSecurityEvent(SecurityEventType.LOGIN_SUCCESS, user.id, {
+                  ip: clientIp,
+                  username,
+                  reason: `Used recovery code, ${codes.length} remaining`
+                })
+              }
+            } catch {
+              // JSON 解析失败，忽略
+            }
+          }
+        }
+      }
+
+      if (!verified) {
+        // 使用用户ID进行锁定，确保无论使用用户名还是邮箱登录，都能正确锁定
+        recordLoginFailure(clientIp, `user:${user.id}`)
+        await logSecurityEvent(SecurityEventType.LOGIN_FAILED, user.id, {
+          ip: clientIp,
+          username: user.username,
+          reason: 'Invalid 2FA code or recovery code'
+        })
+        return reply.code(401).send(apiError(ErrorCode.INVALID_2FA_CODE))
+      }
+    }
+    // 如果用户没有启用2FA，即使提供了2FA代码也忽略（不验证）
+
+    // 登录成功，清除失败记录（使用用户ID）
+    clearLoginFailure(clientIp, `user:${user.id}`)
+
+    // 在创建新会话之前检测异地登录（修复时序问题）
+    const userAgent = request.headers['user-agent'] || 'unknown'
+    let loginAlertInfo: { isNewIp: boolean; isNewDevice: boolean } | null = null
+    if (user.email) {
+      try {
+        loginAlertInfo = await detectNewLoginLocation(user.id, clientIp, userAgent)
+      } catch (err) {
+        console.error('[Login Alert] Detection failed:', err)
+      }
+    }
+
+    // 生成 Refresh Token (长期，存储到 Redis)
+    const refreshToken = await generateRefreshToken(user.id, user.username, user.role, clientIp, userAgent)
+
+    // 提取会话标识（Refresh Token 的前20个字符）
+    const sessionId = refreshToken.substring(0, 20)
+
+    // 生成 Access Token (简化版：延长有效期到 7 天)
+    const accessToken = fastify.jwt.sign({
+      id: user.id,
+      username: user.username,
+      role: user.role,
+      sid: sessionId  // 会话标识，用于会话级别的 token 失效
+    }, { expiresIn: '7d' })
+
+    // 设置 Refresh Token Cookie (HttpOnly)
+    // SEC005: 使用统一的 Cookie 配置
+    reply.setCookie('refreshToken', refreshToken, getRefreshTokenCookieOptions())
+
+    // 记录登录成功
+    await logSecurityEvent(SecurityEventType.LOGIN_SUCCESS, user.id, {
+      ip: clientIp,
+      username
+    })
+
+    // 异步记录登录信息（后台执行，不阻塞登录流程）
+    getGeoIpInfo(clientIp).then(geoInfo => {
+      createLoginRecord({
+        userId: user.id,
+        ip: clientIp,
+        country: geoInfo.country,
+        region: geoInfo.region,
+        city: geoInfo.city,
+        isp: geoInfo.isp,
+        timezone: geoInfo.timezone,
+        userAgent: userAgent
+      }).catch(err => {
+        console.error('[Login Record] Failed to create login record:', err)
+      })
+    }).catch(err => {
+      // GeoIP 查询失败时仍然记录登录（没有地理信息）
+      console.error('[Login Record] GeoIP lookup failed:', err)
+      createLoginRecord({
+        userId: user.id,
+        ip: clientIp,
+        userAgent: userAgent
+      }).catch(err2 => {
+        console.error('[Login Record] Failed to create login record:', err2)
+      })
+    })
+
+    // 异地登录提醒（后台执行，不阻塞登录流程）
+    // 修复：使用之前检测的结果，避免时序问题
+    if (user.email && loginAlertInfo && (loginAlertInfo.isNewIp || loginAlertInfo.isNewDevice)) {
+      sendLoginAlertEmail(user.email, {
+        username: user.username,
+        ip: clientIp,
+        userAgent: userAgent,
+        loginTime: new Date(),
+        isNewIp: loginAlertInfo.isNewIp,
+        isNewDevice: loginAlertInfo.isNewDevice
+      }).then(() => {
+        console.log(`[Login Alert] Sent login alert email to ${user.email} (newIp: ${loginAlertInfo!.isNewIp}, newDevice: ${loginAlertInfo!.isNewDevice})`)
+      }).catch(err => {
+        console.error('[Login Alert] Failed to send login alert email:', err)
+      })
+
+      // 发送推送通知
+      sendNotification(user.id, 'login_new_device', {
+        instanceName: '',
+        deviceInfo: userAgent,
+        ipAddress: clientIp,
+        loginTime: new Date().toISOString()
+      })
+    }
+
+    return {
+      token: accessToken,
+      user: await buildAuthUserPayload(user)
+    }
+  })
+
+  // 发送邮件验证码
+  fastify.post<{ Body: { email: string; turnstileToken?: string } }>('/send-verification-code', {
+    preHandler: [turnstileVerifier],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['email'],
+        properties: {
+          email: { type: 'string', format: 'email' },
+          turnstileToken: { type: 'string' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { email: string; turnstileToken?: string } }>, reply: FastifyReply) => {
+    const { email } = request.body
+    console.log('[send-verification-code] Request received for email:', email)
+
+    if (!await ensureRegistrationEnabled(reply)) {
+      return
+    }
+
+    // Check if email verification is enabled
+    const smtpEnabled = await isSmtpEnabled()
+    console.log('[send-verification-code] SMTP enabled:', smtpEnabled)
+    if (!smtpEnabled) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_VERIFICATION_DISABLED))
+    }
+
+    // Validate email format
+    if (!email || !email.includes('@')) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL))
+    }
+
+    // Check for dangerous characters
+    const emailWithoutAllowed = email.replace(/@/g, '').replace(/\./g, '')
+    if (containsDangerousChars(emailWithoutAllowed)) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_CONTAINS_ILLEGAL))
+    }
+
+    // Check if email is already registered
+    console.log('[send-verification-code] Checking if email exists...')
+    const existingUser = await db.findUserByEmail(email)
+    if (existingUser) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_ALREADY_REGISTERED))
+    }
+
+    // Check email domain whitelist
+    console.log('[send-verification-code] Validating email domain...')
+    const domainValidation = await validateEmailDomain(email)
+    if (!domainValidation.valid) {
+      console.log('[send-verification-code] Domain not allowed:', domainValidation.domain)
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_DOMAIN_NOT_ALLOWED, domainValidation.domain))
+    }
+
+    // Create verification code
+    console.log('[send-verification-code] Creating verification code...')
+    const result = await createVerificationCode(email)
+    if (!result) {
+      return reply.code(429).send(apiError(ErrorCode.TOO_MANY_VERIFICATION_REQUESTS))
+    }
+
+    // Send email
+    console.log('[send-verification-code] Sending email...')
+    const sendResult = await sendVerificationEmail(email, result.code, 10)
+    console.log('[send-verification-code] Email send result:', sendResult)
+    if (!sendResult.success) {
+      return reply.code(500).send(apiError(ErrorCode.EMAIL_SEND_FAILED))
+    }
+
+    console.log('[send-verification-code] Success!')
+    return { message: 'Verification code sent', expiresAt: result.expiresAt.toISOString() }
+  })
+
+  // 用户注册 (支持邀请码可选，支持邮件验证码)
+  fastify.post<{ Body: RegisterRequest & { turnstileToken?: string; emailCode?: string } }>('/register', {
+    preHandler: [turnstileVerifier],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['username', 'password', 'email'],
+        properties: {
+          username: {
+            type: 'string',
+            minLength: 3,
+            maxLength: 32,
+            pattern: '^[a-zA-Z][a-zA-Z0-9_-]*$'  // 必须以字母开头
+          },
+          password: { type: 'string', minLength: 8, maxLength: 128 },
+          email: { type: 'string', format: 'email' },
+          inviteCode: { type: 'string' },
+          turnstileToken: { type: 'string' },
+          emailCode: { type: 'string', minLength: 6, maxLength: 6 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: RegisterRequest & { turnstileToken?: string; emailCode?: string } }>, reply: FastifyReply) => {
+    const { username, password, email, inviteCode, emailCode } = request.body
+    const clientIp = request.ip
+
+    if (!await ensureRegistrationEnabled(reply)) {
+      return
+    }
+
+    // Validate username (prevent dangerous character injection)
+    const usernameValidation = validateIdentifier(username, 'Username', 3, 32)
+    if (!usernameValidation.valid) {
+      return reply.code(400).send({ error: usernameValidation.message })
+    }
+
+    // 检查用户名是否包含危险字符
+    if (containsDangerousChars(username)) {
+      return reply.code(400).send(apiError(ErrorCode.USERNAME_CONTAINS_ILLEGAL))
+    }
+
+    // 验证密码强度
+    const passwordCheck = validatePassword(password)
+    if (!passwordCheck.valid) {
+      return reply.code(400).send({ error: passwordCheck.message })
+    }
+
+    // 验证邮箱格式
+    if (!email || !email.includes('@')) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL))
+    }
+
+    // 检查邮箱是否包含危险字符（除了 @ 和 .)
+    const emailWithoutAllowed = email.replace(/@/g, '').replace(/\./g, '')
+    if (containsDangerousChars(emailWithoutAllowed)) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_CONTAINS_ILLEGAL))
+    }
+
+    // Check email domain whitelist
+    const domainValidation = await validateEmailDomain(email)
+    if (!domainValidation.valid) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_DOMAIN_NOT_ALLOWED, domainValidation.domain))
+    }
+
+    // Check if email verification is required
+    const smtpEnabled = await isSmtpEnabled()
+    if (smtpEnabled) {
+      if (!emailCode) {
+        return reply.code(400).send(apiError(ErrorCode.EMAIL_CODE_REQUIRED))
+      }
+      const isValid = await verifyCode(email, emailCode)
+      if (!isValid) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL_CODE))
+      }
+    }
+
+    // 检查是否需要邀请码
+    const { isInviteCodeRequired } = await import('../db/system-config.js')
+    const requireInvite = await isInviteCodeRequired()
+
+    let invite = null
+    if (requireInvite) {
+      // 需要邀请码时，验证邀请码
+      if (!inviteCode) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_INVITE_CODE))
+      }
+      invite = await db.findInviteCode(inviteCode)
+      if (!invite) {
+        await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, null, {
+          ip: clientIp,
+          action: 'register',
+          reason: 'Invalid invite code',
+          username
+        })
+        return reply.code(400).send(apiError(ErrorCode.INVALID_INVITE_CODE))
+      }
+
+      // 检查邀请码是否过期
+      if (invite.expires_at && new Date(invite.expires_at) < new Date()) {
+        return reply.code(400).send(apiError(ErrorCode.INVITE_CODE_EXPIRED))
+      }
+    }
+
+    // 检查用户名是否存在
+    const existingUser = await db.findUserByUsername(username)
+    if (existingUser) {
+      return reply.code(400).send(apiError(ErrorCode.USER_EXISTS))
+    }
+
+    // 检查邮箱是否已被注册
+    const existingUserByEmail = await db.findUserByEmail(email)
+    if (existingUserByEmail) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_ALREADY_REGISTERED))
+    }
+
+    // 哈希密码 (使用更高的 cost factor)
+    const passwordHash = await bcrypt.hash(password, 12)
+
+    // 规范化邮箱（转为小写），确保与登录查询时的处理一致
+    const normalizedEmail = email.toLowerCase().trim()
+
+    let userId: number
+    let registerGift: db.RegisterGiftResult | null
+    try {
+      const created = await db.createRegisteredUser({
+        username,
+        email: normalizedEmail,
+        passwordHash,
+        inviteCode: invite && inviteCode ? inviteCode : undefined
+      })
+      userId = created.userId
+      registerGift = created.registerGift
+    } catch (createErr) {
+      if (createErr instanceof Error && createErr.message === 'INVITE_CODE_UNAVAILABLE') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_INVITE_CODE))
+      }
+      throw createErr
+    }
+
+    // 记录注册成功
+    await logSecurityEvent(SecurityEventType.REGISTER_SUCCESS, userId, {
+      ip: clientIp,
+      username
+    })
+
+    // 获取新创建的用户信息
+    const newUser = await db.findUserById(userId)
+    if (!newUser) {
+      return reply.code(500).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    if (registerGift) {
+      const giftTime = new Date()
+
+      if (newUser.email) {
+        sendFreeSiteRegisterGiftEmail(newUser.email, {
+          username: newUser.username,
+          balanceAmount: registerGift.balanceAmount,
+          pointsAmount: registerGift.pointsAmount,
+          newBalance: registerGift.newBalance,
+          newPoints: registerGift.newPoints,
+          time: giftTime
+        }).then(result => {
+          if (!result.success) {
+            console.warn('[Register] Free site register gift email was not sent:', result.error)
+          }
+        }).catch(err => {
+          console.error('[Register] Failed to send free site register gift email:', err)
+        })
+      }
+    }
+
+    // 生成 Refresh Token (长期，存储到 Redis)
+    const userAgent = request.headers['user-agent'] || 'unknown'
+    const refreshToken = await generateRefreshToken(newUser.id, newUser.username, newUser.role, clientIp, userAgent)
+
+    // 提取会话标识（Refresh Token 的前20个字符）
+    const sessionId = refreshToken.substring(0, 20)
+
+    // 生成 Access Token (简化版：延长有效期到 7 天)
+    const accessToken = fastify.jwt.sign({
+      id: newUser.id,
+      username: newUser.username,
+      role: newUser.role,
+      sid: sessionId  // 会话标识，用于会话级别的 token 失效
+    }, { expiresIn: '7d' })
+
+    // 设置 Refresh Token Cookie (HttpOnly)
+    // SEC005: 使用统一的 Cookie 配置
+    reply.setCookie('refreshToken', refreshToken, getRefreshTokenCookieOptions())
+
+    // 异步记录注册/登录信息（后台执行，不阻塞注册流程）
+    getGeoIpInfo(clientIp).then(geoInfo => {
+      createLoginRecord({
+        userId: newUser.id,
+        ip: clientIp,
+        country: geoInfo.country,
+        region: geoInfo.region,
+        city: geoInfo.city,
+        isp: geoInfo.isp,
+        timezone: geoInfo.timezone,
+        userAgent: userAgent
+      }).catch(err => {
+        console.error('[Register] Failed to create login record:', err)
+      })
+    }).catch(err => {
+      // GeoIP 查询失败时仍然记录登录（没有地理信息）
+      console.error('[Register] GeoIP lookup failed:', err)
+      createLoginRecord({
+        userId: newUser.id,
+        ip: clientIp,
+        userAgent: userAgent
+      }).catch(err2 => {
+        console.error('[Register] Failed to create login record:', err2)
+      })
+    })
+
+    reply.code(201).send({
+      token: accessToken,
+      user: await buildAuthUserPayload(newUser)
+    })
+  })
+
+  // 获取当前用户信息
+  fastify.get('/me', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const user = await db.findUserById(request.user.id)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const quota = await db.getUserQuota(user.id)
+
+    return {
+      user: {
+        ...(await buildAuthUserPayload(user)),
+        quota: quota ? {
+          // 新配额系统
+          hostLimit: quota.host_limit,
+          hostUsed: quota.host_used,
+          friendLimit: quota.friend_limit,
+          friendUsed: quota.friend_used,
+          packageLimit: quota.package_limit,
+          packageUsed: quota.package_used
+        } : null
+      }
+    }
+  })
+
+  // 用户登出
+  fastify.post('/logout', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const currentSessionId = request.user.sid
+    const refreshToken = request.cookies.refreshToken
+    const sessionIdsToInvalidate = new Set<string>()
+
+    if (refreshToken) {
+      sessionIdsToInvalidate.add(refreshToken.substring(0, 20))
+    }
+    if (currentSessionId) {
+      sessionIdsToInvalidate.add(currentSessionId)
+    }
+
+    // 撤销 Refresh Token (从 Redis 删除)
+    if (refreshToken) {
+      await revokeRefreshToken(refreshToken)
+    }
+
+    for (const sessionId of sessionIdsToInvalidate) {
+      await invalidateSessionAccessToken(request.user.id, sessionId)
+      revokeActionTicketsForSession(sessionId)
+      closeSessionTerminalSessions(sessionId, 'Session logged out')
+    }
+
+    // 清除 Cookie - SEC005: 使用统一配置
+    reply.clearCookie('refreshToken', getClearCookieOptions())
+
+    await logSecurityEvent(SecurityEventType.LOGOUT, request.user.id, {
+      username: request.user.username
+    })
+    return { message: 'Logged out' }
+  })
+
+  // 刷新 Access Token
+  fastify.post('/refresh', async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const refreshToken = request.cookies?.refreshToken
+
+      if (!refreshToken) {
+        // 记录日志以便调试
+        fastify.log.debug('Refresh token missing in cookies')
+        return reply.code(401).send(apiError(ErrorCode.REFRESH_TOKEN_MISSING))
+      }
+
+      // 验证 Refresh Token (从数据库读取)
+      // AUTH002: 传入设备信息用于绑定校验
+      // 添加错误处理和重试机制，防止数据库连接问题导致频繁登出
+      let tokenData: { userId: number; username: string; role: string; expiresAt: number } | null = null
+      const clientIp = request.ip
+      const userAgent = request.headers['user-agent'] || undefined
+      try {
+        tokenData = await verifyRefreshToken(refreshToken, clientIp, userAgent)
+      } catch (error) {
+        // 数据库连接错误或其他错误，记录日志并尝试重试一次
+        fastify.log.error({ err: error }, 'Refresh token verification error')
+        try {
+          // 等待一小段时间后重试
+          await new Promise(resolve => setTimeout(resolve, 100))
+          tokenData = await verifyRefreshToken(refreshToken, clientIp, userAgent)
+        } catch (retryError) {
+          fastify.log.error({ err: retryError }, 'Refresh token verification retry failed')
+        }
+      }
+
+      if (!tokenData) {
+        reply.clearCookie('refreshToken', getClearCookieOptions())
+        return reply.code(401).send(apiError(ErrorCode.REFRESH_TOKEN_INVALID))
+      }
+
+      // 检查用户状态
+      const user = await db.findUserById(tokenData.userId)
+      if (!user || user.status === 'banned') {
+        await revokeRefreshToken(refreshToken)
+        reply.clearCookie('refreshToken', getClearCookieOptions())
+        // 如果有封禁原因，返回该原因
+        if (user?.ban_reason) {
+          return reply.code(401).send({
+            error: user.ban_reason,
+            code: ErrorCode.ACCOUNT_BANNED
+          })
+        }
+        return reply.code(401).send(apiError(ErrorCode.ACCOUNT_BANNED))
+      }
+
+      // 提取会话标识
+      const sessionId = refreshToken.substring(0, 20)
+
+      // 更新会话活跃时间并延长过期时间
+      const sessionUpdate = await updateSessionActivity(refreshToken)
+
+      // 生成新的 Access Token，包含会话标识（简化版：7天有效期）
+      const newAccessToken = fastify.jwt.sign({
+        id: user.id,
+        username: user.username,
+        role: user.role,
+        sid: sessionId
+      }, { expiresIn: '7d' })
+
+      // 如果会话成功延期，同步更新 Cookie 有效期
+      // SEC005: 使用统一的 Cookie 配置
+      if (sessionUpdate) {
+        reply.setCookie('refreshToken', refreshToken, getRefreshTokenCookieOptions())
+      }
+
+      return { token: newAccessToken }
+    } catch (error) {
+      // 捕获所有未预期的错误，避免返回 400
+      fastify.log.error({ err: error }, 'Unexpected error in refresh endpoint')
+      // 如果是已知的错误，已经返回了相应的状态码
+      // 如果是未知错误，返回 500
+      if (!reply.sent) {
+        return reply.code(500).send({
+          error: 'Internal server error',
+          code: 'INTERNAL_ERROR'
+        })
+      }
+      throw error
+    }
+  })
+
+  // 生成邀请码 (管理员)
+  fastify.post<{ Body: { expiresInDays?: number; count?: number } }>('/invite', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          expiresInDays: { type: 'integer', minimum: 1 },
+          count: { type: 'integer', minimum: 1, maximum: 100 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { expiresInDays?: number; count?: number } }>, reply: FastifyReply) => {
+    // 检查管理员权限
+    if (request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.ADMIN_REQUIRED))
+    }
+
+    const { expiresInDays, count = 1 } = request.body || {}
+
+    let expiresAt: string | null = null
+    if (expiresInDays) {
+      const date = new Date()
+      date.setDate(date.getDate() + expiresInDays)
+      expiresAt = date.toISOString()
+    }
+
+    // 批量生成邀请码
+    const codes: string[] = []
+    for (let i = 0; i < count; i++) {
+      const code = nanoid(12)
+      await db.createInviteCode(code, request.user.id, expiresAt)
+      codes.push(code)
+    }
+
+    // 兼容单个和批量返回
+    if (count === 1) {
+      return {
+        code: codes[0],
+        expiresAt,
+        url: `/register/${codes[0]}`
+      }
+    }
+
+    return {
+      codes,
+      count: codes.length,
+      expiresAt
+    }
+  })
+
+  // 获取邀请码列表 (管理员)
+  fastify.get<{
+    Querystring: { page?: string; pageSize?: string; status?: string }
+  }>('/invites', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; status?: string } }>, reply: FastifyReply) => {
+    if (request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.ADMIN_REQUIRED))
+    }
+
+    const page = Math.max(1, parseInt(request.query.page || '1', 10))
+    const pageSize = Math.min(100, Math.max(1, parseInt(request.query.pageSize || '20', 10)))
+    const status = request.query.status === 'used' || request.query.status === 'unused'
+      ? request.query.status
+      : undefined
+
+    const { invites, total } = await db.getInviteCodesWithUsers(page, pageSize, status)
+    const totalPages = Math.max(1, Math.ceil(total / pageSize))
+
+    return {
+      invites: invites.map(i => ({
+        id: i.id,
+        code: i.code,
+        createdBy: i.created_by,
+        createdByUsername: i.createdByUsername || null,
+        createdByEmail: i.createdByEmail || null,
+        createdByAvatarStyle: i.createdByAvatarStyle || null,
+        usedBy: i.used_by,
+        usedByUsername: i.usedByUsername || null,
+        usedByEmail: i.usedByEmail || null,
+        usedByAvatarStyle: i.usedByAvatarStyle || null,
+        usedAt: i.used_at,
+        expiresAt: i.expires_at,
+        costSnapshot: i.cost_snapshot || null,
+        createdAt: i.created_at
+      })),
+      total,
+      page,
+      pageSize,
+      totalPages
+    }
+  })
+
+  // 删除邀请码 (管理员)
+  fastify.delete<{ Params: { id: string } }>('/invites/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    if (request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.ADMIN_REQUIRED))
+    }
+
+    const { id } = request.params
+    const inviteId = Number(id)
+
+    if (isNaN(inviteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 检查邀请码是否存在
+    const invite = await db.getInviteCodeById(inviteId)
+    if (!invite) {
+      return reply.code(404).send(apiError(ErrorCode.INVITE_CODE_NOT_FOUND))
+    }
+
+    // 允许删除已使用的邀请码
+    await db.deleteInviteCode(inviteId)
+    return { message: 'Invite code deleted' }
+  })
+
+  // ==================== 2FA 双因素认证 ====================
+
+  // 获取 2FA 状态
+  fastify.get('/2fa/status', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, _reply: FastifyReply) => {
+    const status = await db.getUser2FAStatus(request.user.id)
+    return { enabled: status.enabled }
+  })
+
+  // 初始化 2FA 设置 (生成密钥和二维码)
+  fastify.post('/2fa/setup', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    // 检查是否已启用
+    const status = await db.getUser2FAStatus(request.user.id)
+    if (status.enabled) {
+      return reply.code(400).send(apiError(ErrorCode.TWO_FA_ALREADY_ENABLED))
+    }
+
+    // 生成新密钥
+    const secret = generate2FASecret()
+
+    // 加密后保存密钥
+    const encryptedSecret = encryptSensitiveData(secret)
+    await db.save2FASecret(request.user.id, encryptedSecret)
+
+    // 生成二维码
+    const qrCode = await generate2FAQRCode(request.user.username, secret)
+
+    // 生成备用恢复码并加密保存（临时保存，启用时才生效）
+    const recoveryCodes = generateRecoveryCodes()
+    const encryptedCodes = encryptSensitiveData(JSON.stringify(recoveryCodes))
+    await db.save2FARecoveryCodes(request.user.id, encryptedCodes)
+
+    await createLog(request.user.id, 'security', '2fa.setup', 'Started 2FA setup', 'success')
+
+    return {
+      secret,  // 返回明文密钥供手动输入
+      qrCode,  // Base64 二维码图片
+      recoveryCodes  // 备用恢复码（用户需要保存）
+    }
+  })
+
+  // 验证并启用 2FA
+  fastify.post<{ Body: { code: string } }>('/2fa/enable', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['code'],
+        properties: {
+          code: { type: 'string', minLength: 6, maxLength: 6 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { code: string } }>, reply: FastifyReply) => {
+    const { code } = request.body
+
+    // 获取已保存的密钥
+    const encryptedSecret = await db.get2FASecret(request.user.id)
+    if (!encryptedSecret) {
+      return reply.code(400).send(apiError(ErrorCode.TWO_FA_NOT_ENABLED))
+    }
+
+    // 解密并验证
+    const secret = decryptSensitiveData(encryptedSecret)
+    if (!secret || !verify2FAToken(code, secret)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_2FA_CODE))
+    }
+
+    // 启用 2FA
+    await db.enable2FA(request.user.id)
+
+    await createLog(request.user.id, 'security', '2fa.enable', 'Enabled two-factor authentication', 'success')
+
+    // 发送通知
+    await sendNotification(request.user.id, '2fa_enabled', {
+      instanceName: ''
+    })
+
+    return { message: '2FA enabled' }
+  })
+
+  // 禁用 2FA
+  fastify.post<{ Body: { password: string; code: string } }>('/2fa/disable', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['password', 'code'],
+        properties: {
+          password: { type: 'string' },
+          code: { type: 'string', minLength: 6, maxLength: 6 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { password: string; code: string } }>, reply: FastifyReply) => {
+    const { password, code } = request.body
+
+    // 敏感操作二次验证
+    const verified = await isOperationVerified(request.user.id, 'disable_2fa')
+    if (!verified) {
+      return reply.code(403).send({
+        error: 'Sensitive operation requires verification',
+        code: 'VERIFICATION_REQUIRED',
+        operationType: 'disable_2fa'
+      })
+    }
+
+    // 获取用户信息验证密码
+    const user = await db.findUserById(request.user.id)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 验证密码
+    const validPassword = await bcrypt.compare(password, user.password_hash)
+    if (!validPassword) {
+      return reply.code(401).send(apiError(ErrorCode.INVALID_CREDENTIALS))
+    }
+
+    // 验证 2FA 码
+    const encryptedSecret = await db.get2FASecret(request.user.id)
+    if (encryptedSecret) {
+      const secret = decryptSensitiveData(encryptedSecret)
+      if (!secret || !verify2FAToken(code, secret)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_2FA_CODE))
+      }
+    }
+
+    // 禁用 2FA（清除所有 2FA 数据包括恢复码）
+    await db.disable2FAComplete(request.user.id)
+
+    await createLog(request.user.id, 'security', '2fa.disable', 'Disabled two-factor authentication', 'success')
+
+    // 发送通知
+    await sendNotification(request.user.id, '2fa_disabled', {
+      instanceName: ''
+    })
+
+    // 清理已使用的验证记录
+    await consumeOperationVerification(request.user.id, 'disable_2fa')
+
+    return { message: '2FA disabled' }
+  })
+
+  // 获取剩余恢复码数量
+  fastify.get('/2fa/recovery-codes', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const status = await db.getUser2FAStatus(request.user.id)
+    if (!status.enabled) {
+      return reply.code(400).send(apiError(ErrorCode.TWO_FA_NOT_ENABLED))
+    }
+
+    const encryptedCodes = await db.get2FARecoveryCodes(request.user.id)
+    if (!encryptedCodes) {
+      return { total: 8, remaining: 0, used: 8 }
+    }
+
+    const decryptedCodesJson = decryptSensitiveData(encryptedCodes)
+    if (!decryptedCodesJson) {
+      return { total: 8, remaining: 0, used: 8 }
+    }
+
+    try {
+      const codes: string[] = JSON.parse(decryptedCodesJson)
+      return { total: 8, remaining: codes.length, used: 8 - codes.length }
+    } catch {
+      return { total: 8, remaining: 0, used: 8 }
+    }
+  })
+
+  // 重新生成恢复码
+  fastify.post<{ Body: { password: string; code: string } }>('/2fa/regenerate-recovery-codes', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['password', 'code'],
+        properties: {
+          password: { type: 'string' },
+          code: { type: 'string', minLength: 6, maxLength: 6 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { password: string; code: string } }>, reply: FastifyReply) => {
+    const { password, code } = request.body
+
+    // 检查 2FA 是否启用
+    const status = await db.getUser2FAStatus(request.user.id)
+    if (!status.enabled) {
+      return reply.code(400).send(apiError(ErrorCode.TWO_FA_NOT_ENABLED))
+    }
+
+    // 获取用户信息验证密码
+    const user = await db.findUserById(request.user.id)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 验证密码
+    const validPassword = await bcrypt.compare(password, user.password_hash)
+    if (!validPassword) {
+      return reply.code(401).send(apiError(ErrorCode.INVALID_CREDENTIALS))
+    }
+
+    // 验证 2FA 码
+    const encryptedSecret = await db.get2FASecret(request.user.id)
+    if (encryptedSecret) {
+      const secret = decryptSensitiveData(encryptedSecret)
+      if (!secret || !verify2FAToken(code, secret)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_2FA_CODE))
+      }
+    }
+
+    // 生成新的恢复码
+    const recoveryCodes = generateRecoveryCodes()
+    const encryptedCodes = encryptSensitiveData(JSON.stringify(recoveryCodes))
+    await db.save2FARecoveryCodes(request.user.id, encryptedCodes)
+
+    await createLog(request.user.id, 'security', '2fa.recovery_reset', 'Regenerated 2FA recovery codes', 'success')
+
+    return { recoveryCodes }
+  })
+
+  // 发送找回密码验证码
+  fastify.post<{ Body: { email: string; turnstileToken?: string } }>('/forgot-password/send-code', {
+    preHandler: [turnstileVerifier],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['email'],
+        properties: {
+          email: { type: 'string', format: 'email' },
+          turnstileToken: { type: 'string' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { email: string; turnstileToken?: string } }>, reply: FastifyReply) => {
+    const { email } = request.body
+
+    // 检查 SMTP 是否启用
+    const smtpEnabled = await isSmtpEnabled()
+    if (!smtpEnabled) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_VERIFICATION_DISABLED))
+    }
+
+    // 验证邮箱格式
+    if (!email || !email.includes('@')) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL))
+    }
+
+    // 检查邮箱是否包含危险字符
+    const emailWithoutAllowed = email.replace(/@/g, '').replace(/\./g, '')
+    if (containsDangerousChars(emailWithoutAllowed)) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_CONTAINS_ILLEGAL))
+    }
+
+    // 检查邮箱是否已注册（找回密码需要邮箱已注册）
+    const user = await db.findUserByEmail(email)
+    if (!user) {
+      // 为了安全，不透露邮箱是否已注册，统一返回成功
+      // 但实际不发送邮件
+      return { message: 'If the email is registered, a verification code will be sent', expiresAt: new Date(Date.now() + 10 * 60 * 1000).toISOString() }
+    }
+
+    // 创建验证码
+    const result = await createVerificationCode(email)
+    if (!result) {
+      return reply.code(429).send(apiError(ErrorCode.TOO_MANY_VERIFICATION_REQUESTS))
+    }
+
+    // 发送邮件（使用 reset_password 用途）
+    const sendResult = await sendVerificationEmail(email, result.code, 10, 'reset_password')
+    if (!sendResult.success) {
+      return reply.code(500).send(apiError(ErrorCode.EMAIL_SEND_FAILED))
+    }
+
+    return { message: 'Verification code sent', expiresAt: result.expiresAt.toISOString() }
+  })
+
+  // 重置密码
+  fastify.post<{ Body: { email: string; code: string; turnstileToken?: string } }>('/forgot-password/reset', {
+    preHandler: [turnstileVerifier],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['email', 'code'],
+        properties: {
+          email: { type: 'string', format: 'email' },
+          code: { type: 'string', minLength: 6, maxLength: 6 },
+          turnstileToken: { type: 'string' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { email: string; code: string; turnstileToken?: string } }>, reply: FastifyReply) => {
+    const { email, code } = request.body
+
+    // 检查 SMTP 是否启用
+    const smtpEnabled = await isSmtpEnabled()
+    if (!smtpEnabled) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_VERIFICATION_DISABLED))
+    }
+
+    // 验证邮箱格式
+    if (!email || !email.includes('@')) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL))
+    }
+
+    // 验证验证码
+    const isValid = await verifyCode(email, code)
+    if (!isValid) {
+      // 记录验证码验证失败的安全事件（防止暴力破解）
+      // 注意：不透露用户是否存在，统一返回错误
+      await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, null, {
+        ip: request.ip,
+        action: 'forgot_password_verify_code',
+        reason: 'Invalid verification code',
+        username: email // 记录邮箱用于追踪，但不透露用户是否存在
+      })
+      return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL_CODE))
+    }
+
+    // 查找用户
+    const user = await db.findUserByEmail(email)
+    if (!user) {
+      // 验证码已验证，但用户不存在（可能被删除），返回通用错误
+      return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL_CODE))
+    }
+
+    // 检查用户状态
+    if (user.status === 'banned') {
+      // 如果有封禁原因，返回该原因
+      if (user.ban_reason) {
+        return reply.code(403).send({
+          error: user.ban_reason,
+          code: ErrorCode.ACCOUNT_BANNED
+        })
+      }
+      return reply.code(403).send(apiError(ErrorCode.ACCOUNT_BANNED))
+    }
+
+    // 生成新密码
+    const { generateRandomPassword } = await import('../lib/incus-config-generator.js')
+    const newPassword = generateRandomPassword(16)
+    const passwordHash = await bcrypt.hash(newPassword, 12)
+
+    // 检查用户是否启用了2FA
+    const is2FAEnabled = await db.is2FAEnabled(user.id)
+    let twoFactorDisabled = false
+
+    // 如果启用了2FA，则禁用
+    if (is2FAEnabled) {
+      await db.disable2FAComplete(user.id)
+      twoFactorDisabled = true
+      
+      // 记录日志
+      await createLog(user.id, 'security', '2fa.disable', '2FA disabled due to password reset', 'success')
+    }
+
+    // 更新密码
+    await db.updateUser(user.id, { passwordHash })
+
+    // 撤销用户所有会话，强制重新登录（安全措施）
+    await revokeAllUserRefreshTokens(user.id)
+    await invalidateUserAccessTokens(user.id)
+    closeUserSessions(user.id, 'Password reset')
+
+    // 记录安全事件
+    await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, user.id, {
+      ip: request.ip,
+      username: user.username,
+      action: 'password_reset',
+      reason: 'Password reset via forgot password'
+    })
+
+    // 发送新密码邮件
+    const sendResult = await sendPasswordResetEmail(email, {
+      username: user.username,
+      newPassword: newPassword,
+      twoFactorDisabled: twoFactorDisabled
+    })
+
+    if (!sendResult.success) {
+      // 即使邮件发送失败，密码已经重置，记录错误但返回成功
+      request.log.error({ error: sendResult.error }, 'Failed to send password reset email')
+    }
+
+    return {
+      message: 'Password reset successfully. Please check your email for the new password.',
+      twoFactorDisabled: twoFactorDisabled
+    }
+  })
+
+  // 获取用户登录历史记录
+  fastify.get<{
+    Querystring: { page?: string; pageSize?: string }
+  }>('/login-history', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: { page?: string; pageSize?: string }
+  }>, _reply: FastifyReply) => {
+    const page = parseInt(request.query.page || '1', 10)
+    const pageSize = Math.min(parseInt(request.query.pageSize || '20', 10), 50) // 最多50条
+
+    const { records, total } = await getUserLoginRecords(request.user.id, page, pageSize)
+
+    return {
+      records: records.map(r => ({
+        id: r.id,
+        ip: r.ip,
+        country: r.country,
+        region: r.region,
+        city: r.city,
+        isp: r.isp,
+        timezone: r.timezone,
+        userAgent: r.userAgent,
+        createdAt: r.createdAt.toISOString()
+      })),
+      total,
+      page,
+      pageSize,
+      totalPages: Math.ceil(total / pageSize)
+    }
+  })
+}
diff --git a/server/src/routes/backups.ts b/server/src/routes/backups.ts
new file mode 100644
index 0000000..7ecbe26
--- /dev/null
+++ b/server/src/routes/backups.ts
@@ -0,0 +1,1358 @@
+/**
+ * 备份管理路由
+ * 处理实例备份的创建、列表、删除、导出等操作
+ * 
+ * 安全增强：导出任务使用 Redis 存储，支持持久化和分布式部署
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import { randomUUID } from 'crypto'
+import { Readable } from 'stream'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import {
+  createBackup as createIncusBackup,
+  deleteBackup as deleteIncusBackup,
+  getBackupExportStream
+} from '../lib/incus/incus-backups.js'
+import {
+  generateTempInstanceName,
+  instanceExists
+} from '../lib/incus/incus-restore.js'
+import {
+  startInstance,
+  deleteInstance
+} from '../lib/incus/incus-instances.js'
+import {
+  hasActiveRestoreTask as checkActiveRestoreTask,
+  getQueuePosition
+} from '../workers/restoreTaskWorker.js'
+import { sendNotification } from '../lib/notifier.js'
+import { checkBackupQuota } from '../db/quota-operations.js'
+import {
+  createExportTask,
+  getExportTask,
+  updateExportTaskStatus,
+  deleteExportTask
+} from '../lib/security.js'
+import type { CreateBackupRequest } from '../types/api.js'
+import {
+    generateDownloadToken,
+    consumeDownloadToken
+} from '../lib/download-token.js'
+import { checkInstancePermission } from '../lib/permission.js'
+
+// 检查实例是否被转移锁定
+async function checkTransferLock(instanceId: number, reply: FastifyReply): Promise<boolean> {
+  const hasPending = await db.hasPendingTransfer(instanceId)
+  if (hasPending) {
+    reply.code(400).send(apiError(ErrorCode.TRANSFER_INSTANCE_LOCKED))
+    return true
+  }
+  return false
+}
+
+// 恢复任务现在使用数据库存储，由 restoreTaskWorker 处理
+
+export default async function backupRoutes(fastify: FastifyInstance) {
+
+  // 获取实例的备份列表
+  fastify.get<{ Params: { instanceId: string } }>('/:instanceId/backups', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 从数据库获取备份列表
+    const backups = await db.getBackupsByInstanceId(instanceIdNum)
+
+    return backups.map(b => ({
+      id: b.id,
+      name: b.name,
+      incusName: b.incus_name,
+      description: b.description,
+      size: b.size,
+      status: b.status,
+      created_at: b.created_at,
+      expires_at: b.expires_at
+    }))
+  })
+
+  // 创建备份
+  fastify.post<{
+    Params: { instanceId: string }
+    Body: CreateBackupRequest
+  }>('/:instanceId/backups', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          description: { type: 'string', maxLength: 200 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { instanceId: string }
+    Body: CreateBackupRequest
+  }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { name, description } = request.body
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许创建备份
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 检查配额
+    const quotaCheck = await checkBackupQuota(instance.user_id, instanceIdNum)
+    if (!quotaCheck.allowed) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_BACKUP_EXCEEDED, quotaCheck.message))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceIdNum, reply)) return
+
+    // 生成 Incus 备份名称
+    const timestamp = Date.now()
+    const incusName = `backup-${name.replace(/[^a-zA-Z0-9-_]/g, '-')}-${timestamp}`
+
+    try {
+      // 获取宿主机信息并创建 Incus 客户端
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+      }
+      const client = await getIncusClient(host)
+
+      // 先保存到数据库（状态为 creating）
+      const backupId = await db.createBackup({
+        instanceId: instanceIdNum,
+        incusName,
+        name,
+        description
+      })
+
+      // 在 Incus 中创建备份（异步操作）
+      createIncusBackup(client, instance.incus_id, incusName, {
+        instanceOnly: true,
+        optimizedStorage: true
+      }).then(async () => {
+        // 备份创建成功
+        await db.updateBackupStatus(backupId, 'ready')
+
+        // 发送通知
+        await sendNotification(request.user.id, 'backup_created', {
+          instanceName: instance.name,
+          backupName: name,
+          hostName: host.name
+        })
+
+        await createLog(request.user.id, 'backup', 'backup.create', `Created backup "${name}" for instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: instanceIdNum })
+        fastify.log.info(`Backup ${backupId} created successfully`)
+      }).catch(async (err: unknown) => {
+        // 备份创建失败
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        await db.updateBackupStatus(backupId, 'error', errorMessage)
+        await createLog(request.user.id, 'backup', 'backup.create', `Failed to create backup for instance "${instance.name}": ${errorMessage}`, 'failed', { instanceId: instanceIdNum })
+        fastify.log.error(`Backup ${backupId} failed: ${errorMessage}`)
+      })
+
+      reply.code(202).send({
+        message: 'Backup creating',
+        backup: {
+          id: backupId,
+          name,
+          incusName,
+          description,
+          status: 'creating'
+        }
+      })
+    } catch (err) {
+      fastify.log.error(err)
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(500).send(apiError(ErrorCode.BACKUP_CREATE_FAILED, errorMessage))
+    }
+  })
+
+  // 删除备份
+  fastify.delete<{ Params: { instanceId: string; backupId: string } }>('/:instanceId/backups/:backupId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { instanceId: string; backupId: string } }>, reply: FastifyReply) => {
+    const { instanceId, backupId } = request.params
+    const instanceIdNum = Number(instanceId)
+    const backupIdNum = Number(backupId)
+
+    if (isNaN(instanceIdNum) || isNaN(backupIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取备份信息
+    const backup = await db.getBackupById(backupIdNum)
+    if (!backup || backup.instance_id !== instanceIdNum) {
+      return reply.code(404).send(apiError(ErrorCode.BACKUP_NOT_FOUND))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceIdNum, reply)) return
+
+
+
+    try {
+      // 获取宿主机信息并创建 Incus 客户端
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+      }
+      const client = await getIncusClient(host)
+
+      // 在 Incus 中删除备份
+      try {
+        await deleteIncusBackup(client, instance.incus_id, backup.incus_name)
+      } catch (incusErr) {
+        // 如果 Incus 中不存在，继续删除数据库记录
+        fastify.log.warn(`Backup ${backup.incus_name} not found in Incus, proceeding with DB deletion`)
+      }
+
+      // 从数据库删除（软删除）
+      await db.deleteBackup(backupIdNum)
+
+      // 发送通知
+      await sendNotification(request.user.id, 'backup_deleted', {
+        instanceName: instance.name,
+        backupName: backup.name,
+        hostName: host.name
+      })
+
+      await createLog(request.user.id, 'backup', 'backup.delete', `Deleted backup "${backup.name}" of instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: instanceIdNum })
+
+      return { message: 'Backup deleted' }
+    } catch (err) {
+      fastify.log.error(err)
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await createLog(request.user.id, 'backup', 'backup.delete', `Failed to delete backup: ${errorMessage}`, 'failed', { instanceId: instanceIdNum })
+      return reply.code(500).send(apiError(ErrorCode.BACKUP_DELETE_FAILED, errorMessage))
+    }
+  })
+
+  // 获取自动备份策略
+  fastify.get<{ Params: { instanceId: string } }>('/:instanceId/backup-policy', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const policy = await db.getBackupPolicy(instanceIdNum)
+
+    return policy ? {
+      enabled: Boolean((policy as { enabled?: number }).enabled),
+      interval_minutes: (policy as { intervalMinutes?: number }).intervalMinutes || 1440,
+      last_run_at: (policy as { lastRunAt?: string | null }).lastRunAt || null,
+      next_run_at: (policy as { nextRunAt?: string | null }).nextRunAt || null
+    } : {
+      enabled: false,
+      interval_minutes: 1440,
+      last_run_at: null,
+      next_run_at: null
+    }
+  })
+
+  // 设置自动备份策略
+  fastify.put<{
+    Params: { instanceId: string }
+    Body: { enabled: boolean; intervalMinutes?: number }
+  }>('/:instanceId/backup-policy', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['enabled'],
+        properties: {
+          enabled: { type: 'boolean' },
+          intervalMinutes: { type: 'integer', enum: [60, 360, 1440, 4320] } // 1小时, 6小时, 24小时, 3天
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { instanceId: string }
+    Body: { enabled: boolean; intervalMinutes?: number }
+  }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { enabled, intervalMinutes = 1440 } = request.body
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // AUTH004: 实例所有者和节点所有者都可以操作备份策略
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 如果启用自动备份，检查配额
+    if (enabled) {
+      // 检查实例配额
+      const instanceLimit = instance.backup_limit
+      if (instanceLimit === null || instanceLimit <= 0) {
+        return reply.code(400).send(apiError(ErrorCode.BACKUP_QUOTA_NOT_SET))
+      }
+    }
+
+    await db.upsertBackupPolicy(instanceIdNum, {
+      enabled,
+      intervalMinutes
+    })
+
+    return { message: 'Auto backup policy updated' }
+  })
+
+  // ==================== 备份导出功能 ====================
+
+  // 生成导出任务（为现有备份创建导出）
+  fastify.post<{
+    Params: { instanceId: string; backupId: string }
+    Body: Record<string, never>
+  }>(
+    '/:instanceId/backups/:backupId/export',
+    {
+      onRequest: [fastify.authenticateUser],
+      schema: {
+        body: {
+          type: 'object',
+          properties: {}
+        }
+      }
+    },
+    async (request, reply) => {
+      const { instanceId, backupId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const backupIdNum = Number(backupId)
+
+      if (isNaN(instanceIdNum) || isNaN(backupIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份导出/下载仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 获取备份信息
+      const backup = await db.getBackupById(backupIdNum)
+      if (!backup || backup.instance_id !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.BACKUP_NOT_FOUND))
+      }
+
+      if (backup.status !== 'ready') {
+        return reply.code(400).send(apiError(ErrorCode.BACKUP_NOT_READY))
+      }
+
+      // 生成导出任务 ID
+      const taskId = randomUUID()
+
+      // 创建导出任务（存储到 Redis）
+      const task = await createExportTask({
+        id: taskId,
+        instanceId: instanceIdNum,
+        backupId: backupIdNum,
+        incusBackupName: backup.incus_name,
+        userId: request.user.id,
+        status: 'ready'
+      })
+
+      await createLog(
+        request.user.id,
+        'backup',
+        'backup.export',
+        `Generated export task for backup "${backup.name}" of instance "${instance.name}"`,
+        'success',
+        { instanceId: instanceIdNum }
+      )
+
+      return {
+        taskId,
+        status: 'ready',
+        expiresAt: new Date(task.expiresAt).toISOString(),
+        downloadUrl: `/api/instances/${instanceId}/backups/export/${taskId}/download`
+      }
+    }
+  )
+
+  // 查询导出任务状态
+  fastify.get<{ Params: { instanceId: string; taskId: string } }>(
+    '/:instanceId/backups/export/:taskId/status',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+
+      if (isNaN(instanceIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份导出/下载仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 从 Redis 获取任务
+      const task = await getExportTask(taskId)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.EXPORT_TASK_NOT_FOUND))
+      }
+
+      // 验证任务所有者
+      // AUTH004: 备份导出/下载仅限实例所有者
+      if (task.userId !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 检查是否过期
+      if (Date.now() > task.expiresAt) {
+        await deleteExportTask(taskId)
+        return reply.code(410).send(apiError(ErrorCode.EXPORT_TASK_EXPIRED))
+      }
+
+      return {
+        taskId: task.id,
+        status: task.status,
+        error: task.error,
+        expiresAt: new Date(task.expiresAt).toISOString()
+      }
+    }
+  )
+
+  // 生成一次性下载链接
+  // 安全改进：使用短期一次性 token 替代 JWT URL 参数
+  fastify.post<{
+    Params: { instanceId: string; taskId: string }
+  }>(
+    '/:instanceId/backups/export/:taskId/download-token',
+    { onRequest: [fastify.authenticate] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+
+      if (isNaN(instanceIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份导出/下载仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 从存储获取任务
+      const task = await getExportTask(taskId)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.EXPORT_TASK_NOT_FOUND))
+      }
+
+      // 验证任务所有者
+      // AUTH004: 备份导出/下载仅限实例所有者
+      if (task.userId !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 检查是否过期
+      if (Date.now() > task.expiresAt) {
+        await deleteExportTask(taskId)
+        return reply.code(410).send(apiError(ErrorCode.EXPORT_TASK_EXPIRED))
+      }
+
+      if (task.status !== 'ready') {
+        return reply.code(400).send(apiError(ErrorCode.BACKUP_EXPORT_STATUS_INVALID, task.status))
+      }
+
+      // 生成一次性下载 token（5分钟有效，仅可使用1次）
+      const downloadToken = generateDownloadToken(
+        request.user.id,
+        taskId,
+        'backup-export',
+        300,  // 5分钟
+        1     // 1次使用
+      )
+
+      return {
+        downloadUrl: `/api/instances/${instanceId}/backups/export/${taskId}/download?dt=${downloadToken}`,
+        expiresIn: 300  // 5分钟
+      }
+    }
+  )
+
+  // 下载导出的备份（流式传输）
+  // 安全改进：使用一次性下载 token 验证，不再接受 JWT URL 参数
+  fastify.get<{
+    Params: { instanceId: string; taskId: string }
+    Querystring: { dt?: string }
+  }>(
+    '/:instanceId/backups/export/:taskId/download',
+    {
+      // 使用一次性下载 token 验证
+      onRequest: async (request, reply) => {
+        const { taskId } = request.params
+        const downloadToken = (request.query as { dt?: string }).dt
+
+        // 必须提供下载 token
+        if (!downloadToken) {
+          return reply.code(401).send({
+            error: 'Download token required. Use POST /download-token to generate one.',
+            code: 'DOWNLOAD_TOKEN_REQUIRED'
+          })
+        }
+
+        // 验证并消费一次性 token
+        const result = consumeDownloadToken(downloadToken, taskId, 'backup-export')
+        if (!result.valid) {
+          return reply.code(401).send({
+            error: result.error || 'Invalid or expired download token',
+            code: 'DOWNLOAD_TOKEN_INVALID'
+          })
+        }
+
+        // 将用户 ID 附加到请求，用于后续验证
+        (request as any).downloadTokenUserId = result.userId
+      }
+    },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const tokenUserId = (request as any).downloadTokenUserId as number
+
+      if (isNaN(instanceIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属（使用 token 中的用户 ID）
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // 从存储获取任务
+      const task = await getExportTask(taskId)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.EXPORT_TASK_NOT_FOUND))
+      }
+
+      // 验证任务所有者（使用 token 中的用户 ID）
+      if (task.userId !== tokenUserId) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 检查是否过期
+      if (Date.now() > task.expiresAt) {
+        await deleteExportTask(taskId)
+        return reply.code(410).send(apiError(ErrorCode.EXPORT_TASK_EXPIRED))
+      }
+
+      if (task.status !== 'ready') {
+        return reply.code(400).send(apiError(ErrorCode.BACKUP_EXPORT_STATUS_INVALID, task.status))
+      }
+
+      try {
+        // 获取宿主机信息
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+
+        const client = await getIncusClient(host)
+
+        // 更新任务状态
+        await updateExportTaskStatus(taskId, 'downloading')
+
+        // 获取备份信息和用户信息用于文件名
+        const backup = await db.getBackupById(task.backupId)
+        const user = await db.findUserById(instance.user_id)
+
+        // 使用备份创建日期 (格式: 20231207-153045)
+        const backupDate = backup?.created_at ? new Date(backup.created_at) : new Date()
+        const dateStr = backupDate.toISOString()
+          .replace(/[-:]/g, '')
+          .replace('T', '-')
+          .slice(0, 15)
+
+        // 文件名格式: 用户名-实例名-备份名-备份日期.tar.gz
+        const userName = user?.username || 'unknown'
+        const backupName = backup?.name || task.incusBackupName
+        const fileName = `${userName}-${instance.name}-${backupName}-${dateStr}.tar.gz`
+
+        // 获取导出流
+        const { stream, contentLength } = await getBackupExportStream(
+          client,
+          instance.incus_id,
+          task.incusBackupName
+        )
+
+        // 设置响应头，确保浏览器正确处理为流式下载
+        reply.header('Content-Disposition', `attachment; filename="${encodeURIComponent(fileName)}"`)
+        reply.header('Content-Type', 'application/octet-stream')
+        reply.header('Cache-Control', 'no-cache, no-store, must-revalidate')
+        reply.header('Pragma', 'no-cache')
+        reply.header('Expires', '0')
+        reply.header('X-Content-Type-Options', 'nosniff')
+        if (contentLength) {
+          reply.header('Content-Length', contentLength)
+        }
+
+        // 监听响应完成，更新任务状态
+        reply.raw.on('close', async () => {
+          await updateExportTaskStatus(taskId, 'completed')
+          // 下载完成后删除任务
+          setTimeout(async () => {
+            await deleteExportTask(taskId)
+          }, 5000)
+
+          fastify.log.info(`Backup export completed: ${taskId}`)
+        })
+
+        reply.raw.on('error', async (err) => {
+          await updateExportTaskStatus(taskId, 'error', err.message)
+          fastify.log.error(`Backup export error: ${err.message}`)
+        })
+
+        // 将 Web ReadableStream 转换为 Node.js Readable
+        const nodeStream = Readable.fromWeb(stream as import('stream/web').ReadableStream)
+
+        return reply.send(nodeStream)
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        await updateExportTaskStatus(taskId, 'error', errorMessage)
+        fastify.log.error(`Backup export failed: ${errorMessage}`)
+        return reply.code(500).send(apiError(ErrorCode.BACKUP_EXPORT_FAILED, errorMessage))
+      }
+    }
+  )
+
+  // ==================== 备份恢复功能 ====================
+
+  // 从现有备份恢复实例 (使用任务队列)
+  fastify.post<{
+    Params: { instanceId: string; backupId: string }
+    Body: Record<string, never>
+  }>(
+    '/:instanceId/restore/:backupId',
+    {
+      onRequest: [fastify.authenticateUser],
+      schema: {
+        body: {
+          type: 'object',
+          properties: {}
+        }
+      }
+    },
+    async (request, reply) => {
+      const { instanceId, backupId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const backupIdNum = Number(backupId)
+
+      if (isNaN(instanceIdNum) || isNaN(backupIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // 权限检查：管理员、实例所有者、宿主机所有者
+      const permResult = await checkInstancePermission(request.user, instance)
+      if (!permResult.allowed) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 获取备份信息
+      const backup = await db.getBackupById(backupIdNum)
+      if (!backup || backup.instance_id !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.BACKUP_NOT_FOUND))
+      }
+
+      if (backup.status !== 'ready') {
+        return reply.code(400).send(apiError(ErrorCode.BACKUP_NOT_READY))
+      }
+
+      // 检查转移锁定
+      if (await checkTransferLock(instanceIdNum, reply)) return
+
+      // 检查是否有正在进行的恢复任务
+      const activeTask = await checkActiveRestoreTask(instanceIdNum)
+      if (activeTask) {
+        return reply.code(409).send({
+          error: 'RESTORE_IN_PROGRESS',
+          message: '该实例已有恢复任务正在进行中',
+          taskId: activeTask.id
+        })
+      }
+
+      // 检查队列长度（防止队列过长）
+      const pendingCount = await prisma.restoreTask.count({
+        where: {
+          hostId: instance.host_id,
+          status: 'PENDING'
+        }
+      })
+      const QUEUE_MAX_LENGTH = 10
+      if (pendingCount >= QUEUE_MAX_LENGTH) {
+        return reply.code(429).send({
+          error: 'QUEUE_TOO_LONG',
+          message: `队列已满（${pendingCount}/${QUEUE_MAX_LENGTH}），请稍后再试`
+        })
+      }
+
+      // 创建恢复任务 (写入数据库，由 Worker 调度执行)
+      const tempName = generateTempInstanceName(instance.incus_id)
+
+      const taskId = await db.createRestoreTask({
+        instanceId: instanceIdNum,
+        backupId: backupIdNum,
+        hostId: instance.host_id,
+        userId: request.user.id,
+        tempInstanceName: tempName,
+        originalInstanceName: instance.name,
+        originalIncusId: instance.incus_id
+      })
+
+      await createLog(
+        request.user.id,
+        'backup',
+        'backup.restore',
+        `Queued restore task for instance "${instance.name}" from backup "${backup.name}"`,
+        'success'
+      )
+
+      // 获取队列位置
+      const queuePosition = await getQueuePosition(taskId)
+
+      return {
+        taskId,
+        status: 'PENDING',
+        queuePosition,
+        message: queuePosition > 1
+          ? `恢复任务已加入队列，当前排队位置：第 ${queuePosition} 位`
+          : '恢复任务已创建，即将开始执行'
+      }
+    }
+  )
+
+  // 查询恢复任务状态
+  fastify.get<{ Params: { instanceId: string; taskId: string } }>(
+    '/:instanceId/restore/:taskId',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const taskIdNum = Number(taskId)
+
+      if (isNaN(instanceIdNum) || isNaN(taskIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // 权限检查：管理员、实例所有者、宿主机所有者
+      const permResult = await checkInstancePermission(request.user, instance)
+      if (!permResult.allowed) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      const task = await db.getRestoreTaskById(taskIdNum)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send({
+          error: 'RESTORE_TASK_NOT_FOUND',
+          message: '恢复任务不存在'
+        })
+      }
+
+      // 获取队列位置 (仅 PENDING 状态有意义)
+      const queuePosition = task.status === 'PENDING'
+        ? await getQueuePosition(taskIdNum)
+        : 0
+
+      // 计算执行时长（秒）
+      let duration: number | null = null
+      if (task.startedAt && task.finishedAt) {
+        duration = Math.floor((task.finishedAt.getTime() - task.startedAt.getTime()) / 1000)
+      } else if (task.startedAt) {
+        // 正在执行中，计算已执行时长
+        duration = Math.floor((Date.now() - task.startedAt.getTime()) / 1000)
+      }
+
+      return {
+        taskId: task.id,
+        status: task.status,
+        error: task.error,
+        queuePosition,
+        duration,
+        createdAt: task.createdAt.toISOString(),
+        startedAt: task.startedAt?.toISOString() ?? null,
+        finishedAt: task.finishedAt?.toISOString() ?? null
+      }
+    }
+  )
+
+  // 回滚恢复操作
+  fastify.post<{ Params: { instanceId: string; taskId: string } }>(
+    '/:instanceId/restore/:taskId/rollback',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const taskIdNum = Number(taskId)
+
+      if (isNaN(instanceIdNum) || isNaN(taskIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // 权限检查：管理员、实例所有者、宿主机所有者
+      const permResult = await checkInstancePermission(request.user, instance)
+      if (!permResult.allowed) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      const task = await db.getRestoreTaskById(taskIdNum)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send({
+          error: 'RESTORE_TASK_NOT_FOUND',
+          message: '恢复任务不存在'
+        })
+      }
+
+      // 只有失败的任务可以回滚
+      if (task.status !== 'FAILED') {
+        return reply.code(400).send({
+          error: 'ROLLBACK_NOT_ALLOWED',
+          message: '只有失败的恢复任务可以回滚'
+        })
+      }
+
+      try {
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+        const client = await getIncusClient(host)
+
+        // 删除临时实例（如果存在）
+        if (task.tempInstanceName) {
+          const tempExists = await instanceExists(client, task.tempInstanceName)
+          if (tempExists) {
+            try {
+              await deleteInstance(client, task.tempInstanceName)
+              fastify.log.info(`Deleted temp instance: ${task.tempInstanceName}`)
+            } catch (err) {
+              fastify.log.warn(`Failed to delete temp instance: ${err}`)
+            }
+          }
+        }
+
+        // 尝试启动原实例
+        try {
+          await startInstance(client, task.originalIncusId)
+        } catch (err) {
+          fastify.log.warn(`Failed to start original instance: ${err}`)
+        }
+
+        // 更新任务状态 (数据库没有 rolled_back 状态，标记为 FAILED 并记录)
+        await db.updateRestoreTaskStatus(taskIdNum, 'FAILED', '用户手动回滚')
+
+        await createLog(
+          request.user.id,
+          'backup',
+          'backup.restore.rollback',
+          `Rolled back restore task for instance "${instance.name}"`,
+          'success',
+          { instanceId: instanceIdNum }
+        )
+
+        return {
+          success: true,
+          message: '回滚完成'
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        await createLog(
+          request.user.id,
+          'backup',
+          'backup.restore.rollback',
+          `Failed to rollback restore task: ${errorMessage}`,
+          'failed',
+          { instanceId: instanceIdNum }
+        )
+        return reply.code(500).send({
+          error: 'ROLLBACK_FAILED',
+          message: errorMessage
+        })
+      }
+    }
+  )
+
+  // 取消恢复任务 (仅 PENDING 状态可取消)
+  fastify.delete<{ Params: { instanceId: string; taskId: string } }>(
+    '/:instanceId/restore/:taskId',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const taskIdNum = Number(taskId)
+
+      if (isNaN(instanceIdNum) || isNaN(taskIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // 权限检查：管理员、实例所有者、宿主机所有者
+      const permResult = await checkInstancePermission(request.user, instance)
+      if (!permResult.allowed) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      const task = await db.getRestoreTaskById(taskIdNum)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send({
+          error: 'RESTORE_TASK_NOT_FOUND',
+          message: '恢复任务不存在'
+        })
+      }
+
+      // 只有 PENDING 状态的任务可以取消
+      if (task.status !== 'PENDING') {
+        return reply.code(400).send({
+          error: 'CANCEL_NOT_ALLOWED',
+          message: '只有排队中的任务可以取消'
+        })
+      }
+
+      await db.updateRestoreTaskStatus(taskIdNum, 'FAILED', '用户取消')
+
+      await createLog(
+        request.user.id,
+        'backup',
+        'backup.restore.cancel',
+        `Cancelled restore task for instance "${instance.name}"`,
+        'success',
+        { instanceId: instanceIdNum }
+      )
+
+      return {
+        success: true,
+        message: '任务已取消'
+      }
+    }
+  )
+
+  // ==================== 备份上传到远程存储 ====================
+
+  // 上传备份到远程存储
+  fastify.post<{
+    Params: { instanceId: string; backupId: string }
+    Body: { storageConfigId?: number }
+  }>(
+    '/:instanceId/backups/:backupId/upload-remote',
+    {
+      onRequest: [fastify.authenticateUser],
+      schema: {
+        body: {
+          type: 'object',
+          properties: {
+            storageConfigId: { type: 'integer' }
+          }
+        }
+      }
+    },
+    async (request, reply) => {
+      const { instanceId, backupId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const backupIdNum = Number(backupId)
+
+      if (isNaN(instanceIdNum) || isNaN(backupIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份上传仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 获取备份信息
+      const backup = await db.getBackupById(backupIdNum)
+      if (!backup || backup.instance_id !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.BACKUP_NOT_FOUND))
+      }
+
+      if (backup.status !== 'ready') {
+        return reply.code(400).send(apiError(ErrorCode.BACKUP_NOT_READY))
+      }
+
+      // 获取存储配置
+      let storageConfig
+      if (request.body.storageConfigId) {
+        storageConfig = await db.getStorageConfigById(request.body.storageConfigId)
+        if (!storageConfig || storageConfig.userId !== request.user.id) {
+          return reply.code(404).send(apiError(ErrorCode.STORAGE_CONFIG_NOT_FOUND))
+        }
+      } else {
+        // 使用默认存储配置
+        storageConfig = await db.getDefaultStorageConfig(request.user.id)
+        if (!storageConfig) {
+          return reply.code(400).send({
+            error: 'NO_DEFAULT_STORAGE',
+            message: '请先在设置中配置远程存储'
+          })
+        }
+      }
+
+      // 检查是否有进行中的上传任务
+      const activeTask = await db.hasActiveUploadTask(request.user.id)
+      if (activeTask) {
+        return reply.code(409).send({
+          error: ErrorCode.BACKUP_UPLOAD_IN_PROGRESS,
+          message: '您有上传任务正在进行中',
+          taskId: activeTask.id
+        })
+      }
+
+      // 检查队列长度（防止队列过长）
+      const pendingCount = await prisma.backupUploadTask.count({
+        where: {
+          hostId: instance.host_id,
+          status: 'PENDING'
+        }
+      })
+      const QUEUE_MAX_LENGTH = 10
+      if (pendingCount >= QUEUE_MAX_LENGTH) {
+        return reply.code(429).send({
+          error: 'QUEUE_TOO_LONG',
+          message: `队列已满（${pendingCount}/${QUEUE_MAX_LENGTH}），请稍后再试`
+        })
+      }
+
+      // 创建上传任务
+      const task = await db.createBackupUploadTask({
+        userId: request.user.id,
+        instanceId: instanceIdNum,
+        backupId: backupIdNum,
+        hostId: instance.host_id,
+        storageConfigId: storageConfig.id
+      })
+
+      await createLog(
+        request.user.id,
+        'backup',
+        'backup.upload.queue',
+        `Queued backup upload for "${backup.name}" to "${storageConfig.name}"`,
+        'success',
+        { instanceId: instanceIdNum }
+      )
+
+      // 获取队列位置
+      const queuePosition = await db.getUploadTaskQueuePosition(task.id)
+
+      return {
+        taskId: task.id,
+        status: 'PENDING',
+        queuePosition,
+        storageName: storageConfig.name,
+        message: queuePosition > 1
+          ? `上传任务已加入队列，当前排队位置：第 ${queuePosition} 位`
+          : '上传任务已创建，即将开始执行'
+      }
+    }
+  )
+
+  // 查询上传任务状态
+  fastify.get<{ Params: { instanceId: string; taskId: string } }>(
+    '/:instanceId/upload-tasks/:taskId',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const taskIdNum = Number(taskId)
+
+      if (isNaN(instanceIdNum) || isNaN(taskIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份上传仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      const task = await db.getBackupUploadTaskWithDetails(taskIdNum)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.BACKUP_UPLOAD_TASK_NOT_FOUND))
+      }
+
+      // 获取队列位置 (仅 PENDING 状态有意义)
+      const queuePosition = task.status === 'PENDING'
+        ? await db.getUploadTaskQueuePosition(taskIdNum)
+        : 0
+
+      // 计算执行时长（秒）
+      let duration: number | null = null
+      if (task.startedAt && task.finishedAt) {
+        duration = Math.floor((task.finishedAt.getTime() - task.startedAt.getTime()) / 1000)
+      } else if (task.startedAt) {
+        // 正在执行中，计算已执行时长
+        duration = Math.floor((Date.now() - task.startedAt.getTime()) / 1000)
+      }
+
+      return {
+        taskId: task.id,
+        status: task.status,
+        error: task.error,
+        remoteFileName: task.remoteFileName,
+        fileSize: task.fileSize?.toString(),
+        storageName: task.storageConfig?.name,
+        storageType: task.storageConfig?.type,
+        queuePosition,
+        duration,
+        createdAt: task.createdAt.toISOString(),
+        startedAt: task.startedAt?.toISOString() ?? null,
+        finishedAt: task.finishedAt?.toISOString() ?? null
+      }
+    }
+  )
+
+  // 取消上传任务 (仅 PENDING 状态可取消)
+  fastify.delete<{ Params: { instanceId: string; taskId: string } }>(
+    '/:instanceId/upload-tasks/:taskId',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId, taskId } = request.params
+      const instanceIdNum = Number(instanceId)
+      const taskIdNum = Number(taskId)
+
+      if (isNaN(instanceIdNum) || isNaN(taskIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份上传仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      const task = await db.getBackupUploadTaskById(taskIdNum)
+      if (!task || task.instanceId !== instanceIdNum) {
+        return reply.code(404).send(apiError(ErrorCode.BACKUP_UPLOAD_TASK_NOT_FOUND))
+      }
+
+      // 只有 PENDING 状态的任务可以取消
+      if (task.status !== 'PENDING') {
+        return reply.code(400).send({
+          error: 'CANCEL_NOT_ALLOWED',
+          message: '只有排队中的任务可以取消'
+        })
+      }
+
+      await db.cancelBackupUploadTask(taskIdNum)
+
+      await createLog(
+        request.user.id,
+        'backup',
+        'backup.upload.cancel',
+        `Cancelled backup upload task`,
+        'success',
+        { instanceId: instanceIdNum }
+      )
+
+      return {
+        success: true,
+        message: '任务已取消'
+      }
+    }
+  )
+
+  // 获取实例的活跃上传任务（用于前端状态恢复）
+  fastify.get<{ Params: { instanceId: string } }>(
+    '/:instanceId/upload-tasks/active',
+    { onRequest: [fastify.authenticateUser] },
+    async (request, reply) => {
+      const { instanceId } = request.params
+      const instanceIdNum = Number(instanceId)
+
+      if (isNaN(instanceIdNum)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+
+      // 验证实例归属
+      const instance = await db.getInstanceById(instanceIdNum)
+      if (!instance) {
+        return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+      }
+
+      // AUTH004: 备份上传仅限实例所有者
+      if (instance.user_id !== request.user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      const task = await db.getActiveUploadTaskForInstance(instanceIdNum)
+      if (!task) {
+        return { task: null }
+      }
+
+      // 获取队列位置
+      const queuePosition = task.status === 'PENDING'
+        ? await db.getUploadTaskQueuePosition(task.id)
+        : 0
+
+      // 计算执行时长（秒）
+      let duration: number | null = null
+      if (task.startedAt && task.finishedAt) {
+        duration = Math.floor((task.finishedAt.getTime() - task.startedAt.getTime()) / 1000)
+      } else if (task.startedAt) {
+        // 正在执行中，计算已执行时长
+        duration = Math.floor((Date.now() - task.startedAt.getTime()) / 1000)
+      }
+
+      return {
+        task: {
+          taskId: task.id,
+          backupId: task.backupId,
+          status: task.status,
+          storageName: task.storageConfig?.name,
+          storageType: task.storageConfig?.type,
+          queuePosition,
+          duration,
+          createdAt: task.createdAt.toISOString(),
+          startedAt: task.startedAt?.toISOString() ?? null,
+          finishedAt: task.finishedAt?.toISOString() ?? null
+        }
+      }
+    }
+  )
+
+  // 恢复工作流已移至 restoreTaskWorker.ts
+  // 导出任务现在使用 Redis 存储，自动过期清理
+}
diff --git a/server/src/routes/balance.ts b/server/src/routes/balance.ts
new file mode 100644
index 0000000..bebf480
--- /dev/null
+++ b/server/src/routes/balance.ts
@@ -0,0 +1,355 @@
+/**
+ * 余额管理路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { sendBalanceAdjustedEmail } from '../lib/mailer.js'
+
+export default async function balanceRoutes(fastify: FastifyInstance) {
+  // ==================== 用户余额 API ====================
+
+  // 获取当前用户余额
+  fastify.get('/me', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+    const balanceAmount = await db.getUserBalance(user.id)
+    const stats = await db.getUserConsumeStats(user.id)
+
+    return {
+      balance: {
+        balance: balanceAmount,
+        frozen: 0,  // 暂无冻结功能
+        totalRecharge: stats.totalRecharge,
+        totalConsume: stats.totalConsume,
+        destroyedValue: stats.totalDestroyedValue
+      }
+    }
+  })
+
+  // 获取当前用户余额变动日志
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+      lotteryGift?: string
+    }
+  }>('/me/logs', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; type?: string; lotteryGift?: string } }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', type, lotteryGift } = request.query
+
+    // 限制 pageSize 最大值防止性能攻击
+    const safePageSize = Math.min(Number(pageSize) || 20, 100)
+
+    const result = await db.getBalanceLogs(user.id, {
+      page: Number(page) || 1,
+      pageSize: safePageSize,
+      type: type as any,
+      lotteryGift: (lotteryGift === 'exclude' || lotteryGift === 'only') ? lotteryGift : undefined
+    })
+
+    return {
+      records: result.logs.map(log => ({
+        id: log.id,
+        type: log.type,
+        amount: Number(log.amount),
+        balanceBefore: Number(log.balanceBefore),
+        balanceAfter: Number(log.balanceAfter),
+        orderId: log.orderId,
+        instanceId: log.instanceId,
+        instanceName: log.instance?.name || null,
+        remark: log.remark,
+        createdAt: log.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // 获取当前用户计费记录
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+    }
+  }>('/me/billing', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; type?: string } }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', type } = request.query
+
+    const result = await db.getUserBillingRecords(user.id, {
+      page: Number(page),
+      pageSize: Number(pageSize),
+      type: type as any
+    })
+
+    const stats = await db.getUserBillingStats(user.id)
+
+    return {
+      records: result.records.map(record => ({
+        id: record.id,
+        instanceId: record.instanceId,
+        instance: (record as any).instance ? {
+          id: (record as any).instance.id,
+          name: (record as any).instance.name
+        } : null,
+        type: record.type,
+        amount: Number(record.amount),
+        months: record.months,
+        periodStart: record.periodStart.toISOString(),
+        periodEnd: record.periodEnd.toISOString(),
+        remark: record.remark,
+        createdAt: record.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      stats
+    }
+  })
+
+  // ==================== 管理员余额管理 API ====================
+
+  // 获取用户余额（管理员）
+  fastify.get<{ Params: { userId: string } }>('/admin/:userId', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { userId: string } }>, reply: FastifyReply) => {
+    const userId = Number(request.params.userId)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const targetUser = await db.findUserById(userId)
+    if (!targetUser) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const balance = await db.getUserBalance(userId)
+    const stats = await db.getUserConsumeStats(userId)
+
+    return {
+      userId,
+      username: targetUser.username,
+      balance,
+      ...stats
+    }
+  })
+
+  // 获取用户余额日志（管理员）
+  fastify.get<{
+    Params: { userId: string }
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+      lotteryGift?: string
+    }
+  }>('/admin/:userId/logs', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{ Params: { userId: string }; Querystring: { page?: string; pageSize?: string; type?: string; lotteryGift?: string } }>, reply: FastifyReply) => {
+    const userId = Number(request.params.userId)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { page = '1', pageSize = '20', type, lotteryGift } = request.query
+
+    // 限制 pageSize 最大值防止性能攻击
+    const safePageSize = Math.min(Number(pageSize) || 20, 100)
+
+    const result = await db.getBalanceLogs(userId, {
+      page: Number(page) || 1,
+      pageSize: safePageSize,
+      type: type as any,
+      lotteryGift: (lotteryGift === 'exclude' || lotteryGift === 'only') ? lotteryGift : undefined
+    })
+
+    return {
+      logs: result.logs.map(log => ({
+        id: log.id,
+        type: log.type,
+        amount: Number(log.amount),
+        balanceBefore: Number(log.balanceBefore),
+        balanceAfter: Number(log.balanceAfter),
+        orderId: log.orderId,
+        instanceId: log.instanceId,
+        instanceName: log.instance?.name || null,
+        remark: log.remark,
+        createdAt: log.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // 管理员调整用户余额
+  fastify.post<{
+    Params: { userId: string }
+    Body: {
+      amount: number
+      remark: string
+    }
+  }>('/admin/:userId/adjust', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { userId: string }; Body: { amount: number; remark: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const userId = Number(request.params.userId)
+    const { amount, remark } = request.body
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 参数校验
+    if (amount === null || amount === undefined || typeof amount !== 'number' || isNaN(amount)) {
+      return reply.code(400).send({ error: '调整金额必须是有效的数字' })
+    }
+
+    if (amount === 0) {
+      return reply.code(400).send({ error: '调整金额不能为 0' })
+    }
+
+    if (!remark || remark.trim().length === 0) {
+      return reply.code(400).send({ error: '必须填写调整原因' })
+    }
+
+    if (remark.trim().length > 500) {
+      return reply.code(400).send({ error: '调整原因不能超过 500 字符' })
+    }
+
+    const targetUser = await db.findUserById(userId)
+    if (!targetUser) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const result = await db.adminAdjustBalance(
+      userId,
+      amount,
+      `[管理员 ${user.username}] ${remark}`
+    )
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    await createLog(
+      user.id,
+      'admin',
+      'balance.adjust',
+      `Adjusted balance for user ${targetUser.username}: ${amount > 0 ? '+' : ''}${amount}, reason: ${remark}`,
+      'success'
+    )
+
+    // 发送余额调整邮件通知
+    try {
+      if (targetUser.email) {
+        await sendBalanceAdjustedEmail(targetUser.email, {
+          username: targetUser.username,
+          amount,
+          remark,
+          newBalance: result.newBalance!,
+          time: new Date()
+        })
+      }
+    } catch (emailErr) {
+      // 邮件失败不影响主流程
+      console.warn(`[余额调整] 发送邮件失败:`, emailErr)
+    }
+
+    return {
+      message: '余额调整成功',
+      newBalance: result.newBalance,
+      balanceLog: result.balanceLog ? {
+        id: result.balanceLog.id,
+        type: result.balanceLog.type,
+        amount: Number(result.balanceLog.amount),
+        balanceBefore: Number(result.balanceLog.balanceBefore),
+        balanceAfter: Number(result.balanceLog.balanceAfter)
+      } : null
+    }
+  })
+
+  // 管理员赠送余额
+  fastify.post<{
+    Params: { userId: string }
+    Body: {
+      amount: number
+      remark?: string
+    }
+  }>('/admin/:userId/gift', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { userId: string }; Body: { amount: number; remark?: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const userId = Number(request.params.userId)
+    const { amount, remark } = request.body
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 参数校验
+    if (amount === null || amount === undefined || typeof amount !== 'number' || isNaN(amount)) {
+      return reply.code(400).send({ error: '赠送金额必须是有效的数字' })
+    }
+
+    if (amount <= 0) {
+      return reply.code(400).send({ error: '赠送金额必须大于 0' })
+    }
+
+    const targetUser = await db.findUserById(userId)
+    if (!targetUser) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const result = await db.giftBalance(
+      userId,
+      amount,
+      remark || `管理员 ${user.username} 赠送`
+    )
+
+    if (!result.success) {
+      return reply.code(400).send({ error: result.error })
+    }
+
+    await createLog(
+      user.id,
+      'admin',
+      'balance.gift',
+      `Gifted ${amount} to user ${targetUser.username}`,
+      'success'
+    )
+
+    // 发送余额赠送邮件通知
+    try {
+      if (targetUser.email) {
+        await sendBalanceAdjustedEmail(targetUser.email, {
+          username: targetUser.username,
+          amount,
+          remark: remark || '管理员赠送',
+          newBalance: result.newBalance!,
+          time: new Date()
+        })
+      }
+    } catch (emailErr) {
+      // 邮件失败不影响主流程
+      console.warn(`[余额赠送] 发送邮件失败:`, emailErr)
+    }
+
+    return {
+      message: '赠送成功',
+      newBalance: result.newBalance
+    }
+  })
+}
diff --git a/server/src/routes/batch-config.ts b/server/src/routes/batch-config.ts
new file mode 100644
index 0000000..04b06c7
--- /dev/null
+++ b/server/src/routes/batch-config.ts
@@ -0,0 +1,647 @@
+/**
+ * 批量配置修改路由
+ * 支持宿主机所有者批量修改实例配置
+ */
+
+import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import { prisma } from '../db/prisma.js'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { getActiveTaskForInstance } from '../db/instance-tasks.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { getIncusClient } from '../lib/incus/incus-pool.js'
+import { patchInstanceResources, getInstance, updateInstance } from '../lib/incus/incus-instances.js'
+import { resolveEffectiveSwapSize, resolveIncusSwapValue } from '../lib/instance-swap.js'
+import pLimit from 'p-limit'
+
+// 每宿主机并发限制
+const BATCH_CONFIG_CONCURRENCY = 10
+
+// 可重试的错误类型
+const RETRYABLE_ERRORS = [
+  'ETIMEDOUT',
+  'ECONNREFUSED',
+  'ECONNRESET',
+  'context deadline exceeded',
+  'timeout'
+]
+
+function isRetryableError(error: string): boolean {
+  return RETRYABLE_ERRORS.some(e => error.toLowerCase().includes(e.toLowerCase()))
+}
+
+// 批量配置修改请求体类型
+interface BatchConfigBody {
+  instanceIds: number[]
+  config: {
+    // 资源配置（需要同步到 Incus）
+    cpu?: number
+    memory?: number
+    disk?: number
+    monthlyTrafficLimit?: string | null
+    swapEnabled?: boolean
+    swapSize?: number | null
+    // 配额限制（仅数据库）
+    portLimit?: number | null
+    snapshotLimit?: number | null
+    backupLimit?: number | null
+    siteLimit?: number | null
+    // 容器权限（需要同步到 Incus）
+    nested?: boolean
+    privileged?: boolean
+    // 高级配置（需要同步到 Incus）
+    limitsRead?: string | null
+    limitsWrite?: string | null
+    limitsReadIops?: number | null
+    limitsWriteIops?: number | null
+    limitsIngress?: string | null
+    limitsEgress?: string | null
+    limitsProcesses?: number | null
+    limitsCpuPriority?: number | null
+    bootAutostart?: boolean | null
+    bootAutostartPriority?: number | null
+    bootAutostartDelay?: number | null
+    bootHostShutdownTimeout?: number | null
+  }
+}
+
+interface ResolvedStorageOverrides {
+  limitsRead?: string | null
+  limitsWrite?: string | null
+  limitsReadIops?: number | null
+  limitsWriteIops?: number | null
+}
+
+// 结果项类型
+interface ResultItem {
+  instanceId: number
+  incusId: string
+  name: string
+  success: boolean
+  error?: string
+}
+
+export default async function batchConfigRoutes(fastify: FastifyInstance) {
+  /**
+   * 批量修改实例配置
+   * POST /api/hosts/:id/instances/batch-config
+   */
+  fastify.post<{
+    Params: { id: string }
+    Body: BatchConfigBody
+  }>('/:id/instances/batch-config', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds', 'config'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 1000
+          },
+          config: {
+            type: 'object',
+            properties: {
+              // 资源配置
+              cpu: { type: 'integer', minimum: 1 },
+              memory: { type: 'integer', minimum: 1 },
+              disk: { type: 'number', minimum: 1 },
+              monthlyTrafficLimit: { type: ['string', 'null'] },
+              swapEnabled: { type: 'boolean' },
+              swapSize: { type: ['integer', 'null'], minimum: 0, maximum: 1048576 },
+              // 配额限制
+              portLimit: { type: ['integer', 'null'], minimum: 1, maximum: 1000 },
+              snapshotLimit: { type: ['integer', 'null'], minimum: 0, maximum: 1000 },
+              backupLimit: { type: ['integer', 'null'], minimum: 0, maximum: 1000 },
+              siteLimit: { type: ['integer', 'null'], minimum: 0, maximum: 1000 },
+              // 容器权限
+              nested: { type: 'boolean' },
+              privileged: { type: 'boolean' },
+              // 高级配置
+              limitsRead: { type: ['string', 'null'] },
+              limitsWrite: { type: ['string', 'null'] },
+              limitsReadIops: { type: ['integer', 'null'], minimum: 0 },
+              limitsWriteIops: { type: ['integer', 'null'], minimum: 0 },
+              limitsIngress: { type: ['string', 'null'] },
+              limitsEgress: { type: ['string', 'null'] },
+              limitsProcesses: { type: ['integer', 'null'], minimum: 0 },
+              limitsCpuPriority: { type: ['integer', 'null'], minimum: 0, maximum: 10 },
+              bootAutostart: { type: ['boolean', 'null'] },
+              bootAutostartPriority: { type: ['integer', 'null'], minimum: 0, maximum: 100 },
+              bootAutostartDelay: { type: ['integer', 'null'], minimum: 5, maximum: 600 },
+              bootHostShutdownTimeout: { type: ['integer', 'null'], minimum: 30, maximum: 600 }
+            }
+          }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: BatchConfigBody
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds, config } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证宿主机存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或宿主机所有者可以批量修改配置
+    if (user.role !== 'admin' && host.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查是否有任何配置要修改
+    if (Object.keys(config).length === 0) {
+      return reply.code(400).send(apiError(ErrorCode.CONFIG_NO_CHANGES))
+    }
+
+    // 获取所有目标实例并验证它们属于该宿主机
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: { notIn: ['deleted', 'creating'] }
+      },
+      include: {
+        package: {
+          select: {
+            instanceType: true
+          }
+        },
+        packagePlan: {
+          select: {
+            swapSize: true
+          }
+        }
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可修改的实例' })
+    }
+
+    // 判断是否需要连接 Incus
+    const needsIncus = hasIncusConfig(config)
+    let client = null
+
+    if (needsIncus) {
+      try {
+        client = await getIncusClient(host)
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        return reply.code(503).send({ error: `无法连接到宿主机: ${errorMessage}` })
+      }
+    }
+
+    // 使用并发控制处理实例
+    const limit = pLimit(BATCH_CONFIG_CONCURRENCY)
+    const results: ResultItem[] = []
+    
+    // 跟踪资源变化量（用于批量完成后统一更新）
+    let totalCpuDelta = 0
+    let totalMemoryDelta = 0
+    let totalDiskDelta = 0
+
+    await Promise.all(
+      instances.map(instance =>
+        limit(async () => {
+          const result = await updateSingleInstance(
+            instance,
+            config,
+            client
+          )
+          results.push(result)
+          
+          // 累计资源变化量
+          if (result.success) {
+            if (config.cpu !== undefined) totalCpuDelta += config.cpu - instance.cpu
+            if (config.memory !== undefined) totalMemoryDelta += config.memory - instance.memory
+            if (config.disk !== undefined) totalDiskDelta += Math.round(config.disk) - instance.disk
+          }
+
+          // 如果是可重试错误，自动重试一次
+          if (!result.success && result.error && isRetryableError(result.error)) {
+            console.log(`[BatchConfig] Retrying instance ${instance.name} due to: ${result.error}`)
+            const retryResult = await updateSingleInstance(
+              instance,
+              config,
+              client
+            )
+            // 更新结果
+            const idx = results.findIndex(r => r.instanceId === instance.id)
+            if (idx >= 0) {
+              // 如果重试成功，累计资源变化量
+              if (!results[idx].success && retryResult.success) {
+                if (config.cpu !== undefined) totalCpuDelta += config.cpu - instance.cpu
+                if (config.memory !== undefined) totalMemoryDelta += config.memory - instance.memory
+                if (config.disk !== undefined) totalDiskDelta += Math.round(config.disk) - instance.disk
+              }
+              results[idx] = retryResult
+            }
+          }
+        })
+      )
+    )
+    
+    // 批量完成后，统一更新宿主机资源使用量（避免并发问题）
+    if (totalCpuDelta !== 0 || totalMemoryDelta !== 0 || totalDiskDelta !== 0) {
+      await db.updateHostResources(hostId, {
+        cpuUsed: host.cpu_used + totalCpuDelta,
+        memoryUsed: host.memory_used + totalMemoryDelta,
+        diskUsed: host.disk_used + totalDiskDelta
+      })
+    }
+
+    const successCount = results.filter(r => r.success).length
+    const failedCount = results.filter(r => !r.success).length
+    const failedItems = results.filter(r => !r.success)
+
+    // 记录操作日志
+    await createLog(
+      user.id,
+      'instance',
+      'instance.batch_config',
+      `Batch updated ${successCount} instances config on host "${host.name}", failed: ${failedCount}`,
+      failedCount > 0 ? 'partial' : 'success'
+    )
+
+    return {
+      success: failedCount === 0,
+      totalCount: instances.length,
+      successCount,
+      failedCount,
+      failedItems,
+      // 用于重试
+      retryPayload: failedCount > 0 ? {
+        instanceIds: failedItems.map(i => i.instanceId),
+        config
+      } : undefined
+    }
+  })
+}
+
+/**
+ * 判断配置是否需要同步到 Incus
+ */
+function hasIncusConfig(config: BatchConfigBody['config']): boolean {
+  const incusFields = [
+    'cpu', 'memory', 'disk',
+    'swapEnabled', 'swapSize',
+    'nested', 'privileged',
+    'limitsRead', 'limitsWrite', 'limitsReadIops', 'limitsWriteIops',
+    'limitsIngress', 'limitsEgress', 'limitsProcesses', 'limitsCpuPriority',
+    'bootAutostart', 'bootAutostartPriority', 'bootAutostartDelay', 'bootHostShutdownTimeout'
+  ]
+  return incusFields.some(field => config[field as keyof typeof config] !== undefined)
+}
+
+/**
+ * 更新单个实例配置
+ */
+async function updateSingleInstance(
+  instance: {
+    id: number
+    incusId: string
+    name: string
+    cpu: number
+    memory: number
+    disk: number
+    hostId: number
+    swapEnabled: boolean
+    swapSize: number | null
+    package: {
+      instanceType: string
+    } | null
+    packagePlan: {
+      swapSize: number
+    } | null
+  },
+  config: BatchConfigBody['config'],
+  client: Awaited<ReturnType<typeof getIncusClient>> | null
+): Promise<ResultItem> {
+  try {
+    const activeTask = await getActiveTaskForInstance(instance.id)
+    if (activeTask) {
+      throw new Error(`实例存在进行中的任务: ${activeTask.taskType}`)
+    }
+
+    const hasSwapConfig = config.swapEnabled !== undefined || config.swapSize !== undefined
+    const instanceKind = instance.package?.instanceType === 'vm' ? 'vm' : 'container'
+    const currentSwapSize = resolveEffectiveSwapSize(instance.swapSize, instance.packagePlan?.swapSize)
+    const nextSwapEnabled = config.swapEnabled ?? instance.swapEnabled
+    const nextSwapSize = config.swapSize !== undefined
+      ? Math.max(0, config.swapSize ?? 0)
+      : currentSwapSize
+    const storageOverrides = resolveStorageOverrides(config)
+
+    if (hasSwapConfig && instanceKind === 'vm') {
+      throw new Error('虚拟机不支持批量 SWAP 配置')
+    }
+
+    if (nextSwapEnabled && nextSwapSize <= 0) {
+      throw new Error('启用 SWAP 前需要设置大于 0 的 SWAP 大小')
+    }
+
+    // 1. 更新资源配置（CPU、内存、磁盘）到 Incus
+    if (client && (config.cpu !== undefined || config.memory !== undefined || config.disk !== undefined)) {
+      await patchInstanceResources(client, instance.incusId, {
+        cpu: config.cpu,
+        memory: config.memory,
+        disk: config.disk !== undefined ? Math.round(config.disk) : undefined
+      })
+    }
+
+    // 2. 更新高级配置到 Incus
+    if (client && (hasAdvancedIncusConfig(config) || hasSwapConfig)) {
+      const incusConfig: Record<string, string | null> = {}
+      const needsDeviceConfig =
+        config.limitsRead !== undefined || config.limitsReadIops !== undefined ||
+        config.limitsWrite !== undefined || config.limitsWriteIops !== undefined ||
+        config.limitsIngress !== undefined || config.limitsEgress !== undefined
+      let incusDevices: Record<string, Record<string, string>> | null = null
+
+      if (hasSwapConfig) {
+        incusConfig['limits.memory.swap'] = resolveIncusSwapValue(nextSwapEnabled, nextSwapSize)
+      }
+
+      // 容器权限
+      if (config.nested !== undefined) {
+        incusConfig['security.nesting'] = config.nested ? 'true' : 'false'
+      }
+      if (config.privileged !== undefined) {
+        incusConfig['security.privileged'] = config.privileged ? 'true' : 'false'
+      }
+
+      // 进程限制
+      if (config.limitsProcesses !== undefined && config.limitsProcesses !== null) {
+        incusConfig['limits.processes'] = String(config.limitsProcesses)
+      } else if (config.limitsProcesses !== undefined) {
+        incusConfig['limits.processes'] = null
+      }
+
+      // CPU 优先级直接使用 Incus 原生 0-10 语义
+      if (config.limitsCpuPriority !== undefined && config.limitsCpuPriority !== null) {
+        incusConfig['limits.cpu.priority'] = String(config.limitsCpuPriority)
+      } else if (config.limitsCpuPriority !== undefined) {
+        incusConfig['limits.cpu.priority'] = null
+      }
+
+      // 启动设置
+      if (config.bootAutostart !== undefined && config.bootAutostart !== null) {
+        incusConfig['boot.autostart'] = config.bootAutostart ? 'true' : 'false'
+      } else if (config.bootAutostart !== undefined) {
+        incusConfig['boot.autostart'] = null
+      }
+      if (config.bootAutostartPriority !== undefined && config.bootAutostartPriority !== null) {
+        incusConfig['boot.autostart.priority'] = String(config.bootAutostartPriority)
+      } else if (config.bootAutostartPriority !== undefined) {
+        incusConfig['boot.autostart.priority'] = null
+      }
+      if (config.bootAutostartDelay !== undefined && config.bootAutostartDelay !== null) {
+        incusConfig['boot.autostart.delay'] = String(config.bootAutostartDelay)
+      } else if (config.bootAutostartDelay !== undefined) {
+        incusConfig['boot.autostart.delay'] = null
+      }
+      if (config.bootHostShutdownTimeout !== undefined && config.bootHostShutdownTimeout !== null) {
+        incusConfig['boot.host_shutdown_timeout'] = String(config.bootHostShutdownTimeout)
+      } else if (config.bootHostShutdownTimeout !== undefined) {
+        incusConfig['boot.host_shutdown_timeout'] = null
+      }
+
+      if (needsDeviceConfig) {
+        // 复制完整的设备列表，然后修改需要修改的设备
+        const currentInstance = await getInstance(client, instance.incusId) as {
+          devices?: Record<string, Record<string, string>>
+        }
+        incusDevices = currentInstance.devices ? JSON.parse(JSON.stringify(currentInstance.devices)) : {}
+      }
+
+      // 存储 I/O 限制 (应用到 root 设备)
+      if (config.limitsRead !== undefined || config.limitsReadIops !== undefined ||
+        config.limitsWrite !== undefined || config.limitsWriteIops !== undefined) {
+        if (!incusDevices) {
+          incusDevices = {}
+        }
+        if (!incusDevices['root']) {
+          incusDevices['root'] = { path: '/', pool: 'default', type: 'disk' }
+        }
+
+        if (config.limitsRead !== undefined) {
+          if (config.limitsRead !== null) {
+            incusDevices['root']['limits.read'] = config.limitsRead
+          } else {
+            delete incusDevices['root']['limits.read']
+          }
+        } else if (config.limitsReadIops !== undefined) {
+          if (config.limitsReadIops !== null) {
+            incusDevices['root']['limits.read'] = `${config.limitsReadIops}iops`
+          } else {
+            delete incusDevices['root']['limits.read']
+          }
+        }
+
+        if (config.limitsWrite !== undefined) {
+          if (config.limitsWrite !== null) {
+            incusDevices['root']['limits.write'] = config.limitsWrite
+          } else {
+            delete incusDevices['root']['limits.write']
+          }
+        } else if (config.limitsWriteIops !== undefined) {
+          if (config.limitsWriteIops !== null) {
+            incusDevices['root']['limits.write'] = `${config.limitsWriteIops}iops`
+          } else {
+            delete incusDevices['root']['limits.write']
+          }
+        }
+      }
+
+      // 网络限制 (应用到 eth0 设备)
+      if (config.limitsIngress !== undefined || config.limitsEgress !== undefined) {
+        // 确保 eth0 设备存在
+        if (!incusDevices) {
+          incusDevices = {}
+        }
+        if (!incusDevices['eth0']) {
+          incusDevices['eth0'] = {
+            type: 'nic',
+            name: 'eth0',
+            network: 'incusbr0'
+          }
+        }
+
+        if (config.limitsIngress !== undefined) {
+          if (config.limitsIngress !== null) {
+            incusDevices['eth0']['limits.ingress'] = config.limitsIngress
+          } else {
+            delete incusDevices['eth0']['limits.ingress']
+          }
+        }
+
+        if (config.limitsEgress !== undefined) {
+          if (config.limitsEgress !== null) {
+            incusDevices['eth0']['limits.egress'] = config.limitsEgress
+          } else {
+            delete incusDevices['eth0']['limits.egress']
+          }
+        }
+      }
+
+      // 应用更新到 Incus
+      const updates: Record<string, unknown> = {}
+      if (Object.keys(incusConfig).length > 0) {
+        updates.config = incusConfig
+      }
+      if (incusDevices && Object.keys(incusDevices).length > 0) {
+        updates.devices = incusDevices
+      }
+
+      if (Object.keys(updates).length > 0) {
+        await updateInstance(client, instance.incusId, updates)
+      }
+    }
+
+    // 3. 更新数据库中的资源配置
+    if (config.cpu !== undefined || config.memory !== undefined || config.disk !== undefined || config.monthlyTrafficLimit !== undefined) {
+      let trafficLimit: bigint | null | undefined = undefined
+      if (config.monthlyTrafficLimit !== undefined) {
+        if (config.monthlyTrafficLimit === null || config.monthlyTrafficLimit === '') {
+          trafficLimit = null
+        } else {
+          trafficLimit = BigInt(config.monthlyTrafficLimit)
+        }
+      }
+
+      await db.updateInstanceResources(instance.id, {
+        cpu: config.cpu,
+        memory: config.memory,
+        disk: config.disk !== undefined ? Math.round(config.disk) : undefined,
+        monthlyTrafficLimit: trafficLimit
+      })
+      // 注意：宿主机资源使用量在批量处理完成后统一更新，避免并发问题
+    }
+
+    // 4. 更新数据库中的配额限制
+    if (config.portLimit !== undefined || config.snapshotLimit !== undefined ||
+        config.backupLimit !== undefined || config.siteLimit !== undefined) {
+      await db.updateInstanceQuota(instance.id, {
+        portLimit: config.portLimit,
+        snapshotLimit: config.snapshotLimit,
+        backupLimit: config.backupLimit,
+        siteLimit: config.siteLimit
+      })
+    }
+
+    // 5. 更新数据库中的 SWAP 配置
+    if (hasSwapConfig) {
+      const swapUpdate: {
+        swapEnabled?: boolean
+        swapSize?: number | null
+      } = {}
+
+      if (config.swapEnabled !== undefined) {
+        swapUpdate.swapEnabled = config.swapEnabled
+      }
+      if (config.swapSize !== undefined) {
+        swapUpdate.swapSize = config.swapSize
+      } else if (config.swapEnabled === true) {
+        swapUpdate.swapSize = nextSwapSize
+      }
+
+      await db.updateInstanceSwap(instance.id, swapUpdate)
+    }
+
+    // 6. 更新数据库中的高级配置
+    if (hasDbAdvancedConfig(config)) {
+      await db.updateInstanceConfig(instance.id, {
+        limitsRead: storageOverrides.limitsRead,
+        limitsWrite: storageOverrides.limitsWrite,
+        limitsReadIops: storageOverrides.limitsReadIops,
+        limitsWriteIops: storageOverrides.limitsWriteIops,
+        limitsIngress: config.limitsIngress,
+        limitsEgress: config.limitsEgress,
+        limitsProcesses: config.limitsProcesses,
+        limitsCpuPriority: config.limitsCpuPriority,
+        bootAutostart: config.bootAutostart,
+        bootAutostartPriority: config.bootAutostartPriority,
+        bootAutostartDelay: config.bootAutostartDelay,
+        bootHostShutdownTimeout: config.bootHostShutdownTimeout
+      })
+    }
+
+    return {
+      instanceId: instance.id,
+      incusId: instance.incusId,
+      name: instance.name,
+      success: true
+    }
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    console.error(`[BatchConfig] Failed to update instance ${instance.name}:`, errorMessage)
+    return {
+      instanceId: instance.id,
+      incusId: instance.incusId,
+      name: instance.name,
+      success: false,
+      error: errorMessage
+    }
+  }
+}
+
+/**
+ * 判断是否有需要同步到 Incus 的高级配置
+ */
+function hasAdvancedIncusConfig(config: BatchConfigBody['config']): boolean {
+  const advancedFields = [
+    'nested', 'privileged',
+    'limitsRead', 'limitsWrite', 'limitsReadIops', 'limitsWriteIops',
+    'limitsIngress', 'limitsEgress', 'limitsProcesses', 'limitsCpuPriority',
+    'bootAutostart', 'bootAutostartPriority', 'bootAutostartDelay', 'bootHostShutdownTimeout'
+  ]
+  return advancedFields.some(field => config[field as keyof typeof config] !== undefined)
+}
+
+/**
+ * 判断是否有需要存储到数据库的高级配置
+ */
+function hasDbAdvancedConfig(config: BatchConfigBody['config']): boolean {
+  const dbFields = [
+    'limitsRead', 'limitsWrite', 'limitsReadIops', 'limitsWriteIops',
+    'limitsIngress', 'limitsEgress', 'limitsProcesses', 'limitsCpuPriority',
+    'bootAutostart', 'bootAutostartPriority', 'bootAutostartDelay', 'bootHostShutdownTimeout'
+  ]
+  return dbFields.some(field => config[field as keyof typeof config] !== undefined)
+}
+
+function resolveStorageOverrides(config: BatchConfigBody['config']): ResolvedStorageOverrides {
+  const overrides: ResolvedStorageOverrides = {}
+
+  if (config.limitsRead !== undefined) {
+    overrides.limitsRead = config.limitsRead
+    overrides.limitsReadIops = null
+  } else if (config.limitsReadIops !== undefined) {
+    overrides.limitsRead = null
+    overrides.limitsReadIops = config.limitsReadIops
+  }
+
+  if (config.limitsWrite !== undefined) {
+    overrides.limitsWrite = config.limitsWrite
+    overrides.limitsWriteIops = null
+  } else if (config.limitsWriteIops !== undefined) {
+    overrides.limitsWrite = null
+    overrides.limitsWriteIops = config.limitsWriteIops
+  }
+
+  return overrides
+}
diff --git a/server/src/routes/checkin.ts b/server/src/routes/checkin.ts
new file mode 100644
index 0000000..49f8288
--- /dev/null
+++ b/server/src/routes/checkin.ts
@@ -0,0 +1,362 @@
+/**
+ * 签到系统路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import { patchInstanceResources } from '../lib/incus/incus-instances.js'
+
+// 资源类型名称映射
+const CODE_TYPE_NAMES: Record<string, { zh: string; en: string }> = {
+  c: { zh: 'CPU', en: 'CPU' },
+  r: { zh: '内存', en: 'Memory' },
+  d: { zh: '硬盘', en: 'Disk' },
+  t: { zh: '流量', en: 'Traffic' },
+  p: { zh: '积分', en: 'Points' }
+}
+
+// 资源单位映射
+const CODE_TYPE_UNITS: Record<string, string> = {
+  c: '%',
+  r: 'MB',
+  d: 'MB',
+  t: 'GB',
+  p: ''  // 积分无单位
+}
+
+function isDailyCheckinEnabled(): boolean {
+  return false
+}
+
+export default async function checkinRoutes(fastify: FastifyInstance) {
+  // ==================== 获取签到状态 ====================
+  fastify.get('/status', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, _reply: FastifyReply) => {
+    const { user } = request
+    const status = await db.getCheckinStatus(user.id)
+    return status
+  })
+
+  // ==================== 执行签到 ====================
+  fastify.post('/checkin', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+
+    if (!isDailyCheckinEnabled()) {
+      await createLog(
+        user.id,
+        'checkin',
+        'checkin.disabled',
+        'Daily check-in is temporarily disabled',
+        'failed'
+      )
+      return reply.code(403).send(apiError(ErrorCode.FEATURE_DISABLED, '签到功能暂时下线，后续改版后再开放'))
+    }
+
+    // 检查用户是否拥有实例
+    const hasInstances = await db.userHasInstances(user.id)
+    if (!hasInstances) {
+      return reply.code(400).send(apiError(ErrorCode.CHECKIN_NO_INSTANCE))
+    }
+
+    // 检查今日是否已签到
+    const hasCheckedIn = await db.hasCheckedInToday(user.id)
+    if (hasCheckedIn) {
+      return reply.code(400).send(apiError(ErrorCode.CHECKIN_ALREADY_TODAY))
+    }
+
+    try {
+      // 执行签到，资源直接存入资源池
+      const result = await db.performCheckin(user.id)
+
+      // 发放签到积分奖励：有付费实例=500积分，无付费实例=100积分
+      const hasPaid = await db.userHasPaidInstance(user.id)
+      const bonusPoints = hasPaid ? 500 : 100
+      await db.addPoints(user.id, bonusPoints, 'checkin', undefined, '签到奖励')
+
+      // 记录日志
+      const typeName = CODE_TYPE_NAMES[result.codeType]?.en || result.codeType
+      const unit = CODE_TYPE_UNITS[result.codeType] || ''
+      await createLog(
+        user.id,
+        'checkin',
+        'checkin.success',
+        `Daily check-in successful. ${typeName} +${result.codeValue}${unit} added to resource pool, bonus points: +${bonusPoints}`,
+        'success'
+      )
+
+      return {
+        message: 'Check-in successful',
+        codeType: result.codeType,
+        codeValue: result.codeValue,
+        toResourcePool: true,
+        bonusPoints
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(
+        user.id,
+        'checkin',
+        'checkin.failed',
+        `Daily check-in failed: ${errorMessage}`,
+        'failed'
+      )
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 兑换兑换码 ====================
+  // 仅支持系统码（h-前缀）：必须指定 instanceId，直接应用到实例
+  fastify.post<{
+    Body: {
+      redeemCode: string
+      instanceId: number
+    }
+  }>('/redeem', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['redeemCode', 'instanceId'],
+        properties: {
+          redeemCode: { type: 'string', minLength: 5, maxLength: 30 },
+          instanceId: { type: 'integer', minimum: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { redeemCode: string; instanceId: number } }>, reply: FastifyReply) => {
+    const { user } = request
+    const { redeemCode, instanceId } = request.body
+    const trimmedCode = redeemCode.trim()
+
+    // 仅支持系统码（h-前缀）
+    if (!db.isSystemCode(trimmedCode)) {
+      return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_INVALID_FORMAT))
+    }
+
+    let codeType: string
+    let codeValue: number
+
+    // 获取系统兑换码记录
+    const systemCodeRecord = await db.getRedeemCodeByCode(trimmedCode)
+    if (!systemCodeRecord) {
+      return reply.code(404).send(apiError(ErrorCode.REDEEM_CODE_NOT_FOUND))
+    }
+
+    // 检查兑换码是否启用
+    if (!systemCodeRecord.enabled) {
+      return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_DISABLED))
+    }
+
+    // 检查兑换码是否过期
+    if (systemCodeRecord.expiresAt && systemCodeRecord.expiresAt < new Date()) {
+      return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_EXPIRED))
+    }
+
+    // 检查兑换码是否已达到最大使用次数
+    if (systemCodeRecord.usedCount >= systemCodeRecord.maxUses) {
+      return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_EXHAUSTED))
+    }
+
+    // 检查用户是否已使用过该兑换码
+    const hasUsed = await db.hasUserUsedCode(systemCodeRecord.id, user.id)
+    if (hasUsed) {
+      return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_ALREADY_USED_BY_USER))
+    }
+
+    // 检查用户是否已使用过同批次的其他兑换码
+    if (systemCodeRecord.batchId) {
+      const hasUsedBatch = await db.hasUserUsedBatch(systemCodeRecord.batchId, user.id)
+      if (hasUsedBatch) {
+        return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_BATCH_LIMIT))
+      }
+    }
+
+    codeType = systemCodeRecord.codeType
+    codeValue = systemCodeRecord.codeValue
+
+    // 获取目标实例
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 检查实例是否属于当前用户
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查实例状态
+    if (instance.status !== 'running' && instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID))
+    }
+
+    // 检查实例是否属于该宿主机
+    if (instance.host_id !== systemCodeRecord.hostId) {
+      return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_HOST_MISMATCH))
+    }
+
+    // 不再检查套餐上限，允许资源无限叠加
+
+    let actualAdded = codeValue
+
+    try {
+      // 先执行原子操作确认可用
+      await db.useSystemRedeemCode(systemCodeRecord.id, user.id, instanceId, systemCodeRecord.batchId)
+
+      // 资源应用逻辑（不再截断到套餐上限）
+      if (codeType === 'c') {
+        const newCpu = instance.cpu + codeValue
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+        await db.updateHostResources(instance.host_id, { cpuUsed: host.cpu_used + actualAdded })
+        const client = await getIncusClient(host)
+        await patchInstanceResources(client, instance.incus_id, { cpu: newCpu })
+        await db.updateInstanceResources(instanceId, { cpu: newCpu })
+      } else if (codeType === 'r') {
+        const newMemory = instance.memory + codeValue
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+        await db.updateHostResources(instance.host_id, { memoryUsed: host.memory_used + actualAdded })
+        const client = await getIncusClient(host)
+        await patchInstanceResources(client, instance.incus_id, { memory: newMemory })
+        await db.updateInstanceResources(instanceId, { memory: newMemory })
+      } else if (codeType === 'd') {
+        const newDisk = instance.disk + codeValue
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+        await db.updateHostResources(instance.host_id, { diskUsed: host.disk_used + actualAdded })
+        const client = await getIncusClient(host)
+        await patchInstanceResources(client, instance.incus_id, { disk: newDisk })
+        await db.updateInstanceResources(instanceId, { disk: newDisk })
+      } else if (codeType === 't') {
+        const trafficBytes = BigInt(codeValue) * BigInt(1024 * 1024 * 1024)
+        const currentLimit = instance.monthly_traffic_limit ? BigInt(instance.monthly_traffic_limit) : BigInt(0)
+        const newLimit = currentLimit + trafficBytes
+        await db.updateInstanceResources(instanceId, { monthlyTrafficLimit: newLimit })
+      } else if (codeType === 'p') {
+        await db.addPoints(user.id, codeValue, 'checkin', undefined, '兑换码奖励')
+      }
+
+      const typeName = CODE_TYPE_NAMES[codeType]?.en || codeType
+      const unit = CODE_TYPE_UNITS[codeType] || ''
+      await createLog(
+        user.id,
+        'checkin',
+        'redeem.success',
+        `Redeemed system code ${trimmedCode} for instance "${instance.name}": ${typeName} +${actualAdded}${unit}`,
+        'success',
+        { instanceId }
+      )
+
+      // 记录到资源池日志（不加资源池，因为资源直接应用到实例）
+      if (codeType !== 'p') {
+        await db.logSystemRedeemToInstance(
+          user.id,
+          codeType as any,
+          actualAdded,
+          instanceId,
+          `系统兑换码 ${trimmedCode} 应用到 ${instance.name}`
+        )
+      }
+
+      return {
+        message: 'Redeem successful',
+        codeType,
+        codeValue,
+        actualAdded,
+        instanceId,
+        instanceName: instance.name,
+        isSystemCode: true,
+        toResourcePool: false
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      if (errorMessage === 'REDEEM_CODE_EXHAUSTED') {
+        return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_EXHAUSTED))
+      }
+      if (errorMessage === 'REDEEM_CODE_ALREADY_USED_BY_USER') {
+        return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_ALREADY_USED_BY_USER))
+      }
+      if (errorMessage === 'REDEEM_CODE_BATCH_LIMIT') {
+        return reply.code(400).send(apiError(ErrorCode.REDEEM_CODE_BATCH_LIMIT))
+      }
+      if (errorMessage === 'REDEEM_CODE_BUSY') {
+        return reply.code(409).send({
+          error: 'REDEEM_CODE_BUSY',
+          message: 'Redeem code is busy, please retry'
+        })
+      }
+      await createLog(user.id, 'checkin', 'redeem.failed', `Failed to redeem code ${trimmedCode}: ${errorMessage}`, 'failed', { instanceId })
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 获取用户可用实例列表 ====================
+  fastify.get('/instances', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, _reply: FastifyReply) => {
+    const { user } = request
+    const instances = await db.getUserInstancesForRedeem(user.id)
+    return { instances }
+  })
+
+  // ==================== 获取签到记录 ====================
+  fastify.get<{
+    Querystring: {
+      limit?: number
+      offset?: number
+    }
+  }>('/records', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      querystring: {
+        type: 'object',
+        properties: {
+          limit: { type: 'integer', minimum: 1, maximum: 100, default: 20 },
+          offset: { type: 'integer', minimum: 0, default: 0 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Querystring: { limit?: number; offset?: number } }>, _reply: FastifyReply) => {
+    const { user } = request
+    const { limit = 20, offset = 0 } = request.query
+    const result = await db.getCheckinRecords(user.id, limit, offset)
+    return result
+  })
+
+  // ==================== 获取兑换记录 ====================
+  fastify.get<{
+    Querystring: {
+      limit?: number
+      offset?: number
+    }
+  }>('/redeems', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      querystring: {
+        type: 'object',
+        properties: {
+          limit: { type: 'integer', minimum: 1, maximum: 100, default: 20 },
+          offset: { type: 'integer', minimum: 0, default: 0 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Querystring: { limit?: number; offset?: number } }>, _reply: FastifyReply) => {
+    const { user } = request
+    const { limit = 20, offset = 0 } = request.query
+    const result = await db.getRedeemRecords(user.id, limit, offset)
+    return result
+  })
+}
diff --git a/server/src/routes/custom-init-commands.ts b/server/src/routes/custom-init-commands.ts
new file mode 100644
index 0000000..36357e7
--- /dev/null
+++ b/server/src/routes/custom-init-commands.ts
@@ -0,0 +1,298 @@
+/**
+ * 用户自定义初始化命令路由
+ * 用户可以管理自己的初始化命令模板
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import {
+  getCustomInitCommandsByUserId,
+  getCustomInitCommandById,
+  getEnabledCommandsByDistro,
+  createCustomInitCommand,
+  updateCustomInitCommand,
+  deleteCustomInitCommand
+} from '../db/custom-init-commands.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+
+// 有效的发行版列表
+const VALID_DISTROS = ['ubuntu', 'debian', 'rhel', 'alpine', 'arch', 'suse', 'all']
+
+export default async function customInitCommandRoutes(fastify: FastifyInstance) {
+
+  // 获取用户的所有初始化命令模板
+  fastify.get('/', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest) => {
+    const commands = await getCustomInitCommandsByUserId(request.user.id)
+
+    return {
+      commands: commands.map(cmd => ({
+        id: cmd.id,
+        name: cmd.name,
+        // 命令内容截断显示
+        commandPreview: truncateText(cmd.command, 100),
+        commandLineCount: cmd.command.split('\n').filter(line => line.trim()).length,
+        distros: cmd.distros,
+        description: cmd.description,
+        enabled: cmd.enabled,
+        createdAt: cmd.createdAt,
+        updatedAt: cmd.updatedAt
+      }))
+    }
+  })
+
+  // 获取适配指定发行版的命令列表（用于创建/重装实例时）
+  fastify.get<{ Querystring: { distro: string } }>('/available', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      querystring: {
+        type: 'object',
+        required: ['distro'],
+        properties: {
+          distro: { type: 'string' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Querystring: { distro: string } }>) => {
+    const { distro } = request.query
+    
+    const commands = await getEnabledCommandsByDistro(request.user.id, distro)
+
+    return {
+      commands: commands.map(cmd => ({
+        id: cmd.id,
+        name: cmd.name,
+        commandLineCount: cmd.command.split('\n').filter(line => line.trim()).length,
+        distros: cmd.distros,
+        description: cmd.description
+      }))
+    }
+  })
+
+  // 获取单个命令详情
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const cmdId = Number(id)
+
+    if (isNaN(cmdId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const cmd = await getCustomInitCommandById(cmdId)
+    if (!cmd) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    // 只能查看自己的命令
+    if (cmd.userId !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    return {
+      command: {
+        id: cmd.id,
+        name: cmd.name,
+        command: cmd.command,
+        distros: cmd.distros,
+        description: cmd.description,
+        enabled: cmd.enabled,
+        createdAt: cmd.createdAt,
+        updatedAt: cmd.updatedAt
+      }
+    }
+  })
+
+  // 创建初始化命令模板
+  fastify.post<{ Body: { name: string; command: string; distros: string[]; description?: string } }>('/', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'command', 'distros'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 100 },
+          command: { type: 'string', minLength: 1 },
+          distros: {
+            type: 'array',
+            items: { type: 'string' },
+            minItems: 1
+          },
+          description: { type: 'string', maxLength: 500 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { name: string; command: string; distros: string[]; description?: string } }>, reply: FastifyReply) => {
+    const { name, command, distros, description } = request.body
+
+    // 验证发行版列表
+    const invalidDistros = distros.filter(d => !VALID_DISTROS.includes(d))
+    if (invalidDistros.length > 0) {
+      return reply.code(400).send({
+        error: 'Invalid distros',
+        details: { invalidDistros, validDistros: VALID_DISTROS }
+      })
+    }
+
+    const result = await createCustomInitCommand({
+      userId: request.user.id,
+      name,
+      command,
+      distros,
+      description
+    })
+
+    if (!result.success) {
+      const errorMap: Record<string, { code: number; message: string }> = {
+        'COMMAND_TOO_LARGE': { code: 400, message: 'Command content too large (max 64KB)' },
+        'MAX_COMMANDS_REACHED': { code: 400, message: 'Maximum command templates reached (50)' },
+        'INVALID_DISTROS': { code: 400, message: 'Invalid distros' }
+      }
+      const errInfo = errorMap[result.error] || { code: 400, message: result.error }
+      return reply.code(errInfo.code).send({ error: errInfo.message })
+    }
+
+    await createLog(
+      request.user.id,
+      'custom_init_command',
+      'custom_init_command.create',
+      `Created init command template "${name}"`,
+      'success'
+    )
+
+    reply.code(201).send({
+      message: 'Init command created',
+      id: result.id
+    })
+  })
+
+  // 更新初始化命令模板
+  fastify.put<{
+    Params: { id: string }
+    Body: { name?: string; command?: string; distros?: string[]; description?: string | null; enabled?: boolean }
+  }>('/:id', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 100 },
+          command: { type: 'string', minLength: 1 },
+          distros: {
+            type: 'array',
+            items: { type: 'string' },
+            minItems: 1
+          },
+          description: { type: ['string', 'null'], maxLength: 500 },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { name?: string; command?: string; distros?: string[]; description?: string | null; enabled?: boolean }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const cmdId = Number(id)
+
+    if (isNaN(cmdId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { name, command, distros, description, enabled } = request.body
+
+    // 验证发行版列表
+    if (distros) {
+      const invalidDistros = distros.filter(d => !VALID_DISTROS.includes(d))
+      if (invalidDistros.length > 0) {
+        return reply.code(400).send({
+          error: 'Invalid distros',
+          details: { invalidDistros, validDistros: VALID_DISTROS }
+        })
+      }
+    }
+
+    const result = await updateCustomInitCommand(cmdId, request.user.id, {
+      name,
+      command,
+      distros,
+      description,
+      enabled
+    })
+
+    if (!result.success) {
+      const errorMap: Record<string, { code: number; message: string }> = {
+        'NOT_FOUND': { code: 404, message: 'Command not found' },
+        'COMMAND_TOO_LARGE': { code: 400, message: 'Command content too large (max 64KB)' },
+        'INVALID_DISTROS': { code: 400, message: 'Invalid distros' }
+      }
+      const errInfo = errorMap[result.error] || { code: 400, message: result.error }
+      return reply.code(errInfo.code).send({ error: errInfo.message })
+    }
+
+    await createLog(
+      request.user.id,
+      'custom_init_command',
+      'custom_init_command.update',
+      `Updated init command template ID ${cmdId}`,
+      'success'
+    )
+
+    return { message: 'Init command updated' }
+  })
+
+  // 删除初始化命令模板
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const cmdId = Number(id)
+
+    if (isNaN(cmdId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const deleted = await deleteCustomInitCommand(cmdId, request.user.id)
+    if (!deleted) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    await createLog(
+      request.user.id,
+      'custom_init_command',
+      'custom_init_command.delete',
+      `Deleted init command template ID ${cmdId}`,
+      'success'
+    )
+
+    return { message: 'Init command deleted' }
+  })
+
+  // 获取可用的发行版列表（前端使用）
+  // 注意：名称由前端根据 id 进行翻译
+  fastify.get('/distros', {
+    onRequest: [fastify.authenticateUser]
+  }, async () => {
+    return {
+      distros: [
+        { id: 'ubuntu', icon: 'ubuntu' },
+        { id: 'debian', icon: 'debian' },
+        { id: 'rhel', icon: 'almalinux' },
+        { id: 'alpine', icon: 'alpine' },
+        { id: 'arch', icon: 'arch' },
+        { id: 'suse', icon: 'opensuse' },
+        { id: 'all', icon: 'linux' }
+      ]
+    }
+  })
+}
+
+/**
+ * 截断文本用于预览
+ */
+function truncateText(text: string, maxLength: number): string {
+  if (!text || text.length <= maxLength) return text
+  return text.substring(0, maxLength) + '...'
+}
diff --git a/server/src/routes/entertainment.ts b/server/src/routes/entertainment.ts
new file mode 100644
index 0000000..54c1d86
--- /dev/null
+++ b/server/src/routes/entertainment.ts
@@ -0,0 +1,709 @@
+/**
+ * 娱乐系统 - 用户端 API
+ * 积分兑换、抽奖等功能
+ */
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { sendLotteryWinNotification } from '../lib/lottery-notifier.js'
+import type { BadgeOwnershipView } from '../db/badges.js'
+
+export default async function entertainmentRoutes(fastify: FastifyInstance) {
+  function sendBadgeError(reply: FastifyReply, error: unknown) {
+    const code = error instanceof Error
+      ? ((error as Error & { code?: string }).code === 'P2002' ? 'BADGE_STATE_CONFLICT' : error.message)
+      : 'UNKNOWN_ERROR'
+    const messageMap: Record<string, string> = {
+      NO_BADGES_AVAILABLE: '暂无可用徽章',
+      BADGE_NOT_FOUND: '徽章不存在',
+      BADGE_OWNERSHIP_NOT_FOUND: '未找到该徽章副本',
+      BADGE_ALREADY_APPLIED: '该徽章副本已应用到目标位置',
+      BADGE_NOT_APPLIED: '该徽章当前未应用',
+      AVATAR_BADGE_ALREADY_APPLIED: '头像徽章状态冲突，请刷新后重试',
+      INSTANCE_NOT_FOUND: '实例不存在',
+      INSTANCE_BADGE_ALREADY_APPLIED: '实例徽章状态冲突，请刷新后重试',
+      BADGE_STATE_CONFLICT: '徽章状态已变化，请刷新后重试'
+    }
+
+    return reply.code(400).send({
+      error: code,
+      message: messageMap[code] || '徽章操作失败'
+    })
+  }
+
+  // ==================== 积分相关 API ====================
+
+  /**
+   * 获取用户积分信息
+   */
+  fastify.get('/points', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const userId = request.user.id
+
+    const [userPoints, convertible] = await Promise.all([
+      db.getUserPoints(userId),
+      db.getConvertibleConsume(userId)
+    ])
+
+    return {
+      points: userPoints.points,
+      totalEarned: userPoints.totalEarned,
+      totalSpent: userPoints.totalSpent,
+      lastConvertedAt: userPoints.lastConvertedAt?.toISOString() || null,
+      // 可兑换信息
+      totalConsume: convertible.totalConsume,
+      convertedConsume: convertible.convertedConsume,
+      convertibleAmount: convertible.convertibleAmount,
+      convertiblePoints: convertible.convertiblePoints
+    }
+  })
+
+  /**
+   * 兑换积分
+   */
+  fastify.post('/points/convert', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const userId = request.user.id
+
+    const result = await db.convertPointsFromConsumption(userId)
+
+    if (!result.success) {
+      return reply.code(400).send({
+        error: 'NOTHING_TO_CONVERT',
+        message: result.message
+      })
+    }
+
+    return {
+      success: true,
+      converted: result.converted,
+      newPoints: result.newPoints,
+      consumeConverted: result.consumeConverted
+    }
+  })
+
+  /**
+   * 获取积分变动日志
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      type?: string
+    }
+  }>('/points/logs', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; type?: string } }>) => {
+    const userId = request.user.id
+    const { page = '1', pageSize = '20', type } = request.query
+
+    const result = await db.getPointsLogs(userId, {
+      page: Number(page),
+      pageSize: Number(pageSize),
+      type: type as any
+    })
+
+    return {
+      logs: result.logs.map(log => ({
+        id: log.id,
+        type: log.type,
+        amount: log.amount,
+        pointsBefore: log.pointsBefore,
+        pointsAfter: log.pointsAfter,
+        remark: log.remark,
+        createdAt: log.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // ==================== 抽奖相关 API ====================
+
+  /**
+   * 获取可用抽奖列表
+   */
+  fastify.get('/lotteries', {
+    onRequest: [fastify.authenticate]
+  }, async () => {
+    const lotteries = await db.getActiveLotteries()
+
+    return {
+      lotteries: lotteries.map(lottery => ({
+        id: lottery.id,
+        name: lottery.name,
+        description: lottery.description,
+        costPoints: lottery.costPoints,
+        startAt: lottery.startAt?.toISOString() || null,
+        endAt: lottery.endAt?.toISOString() || null,
+        totalDraws: lottery._count.records,  // 使用实时统计
+        prizes: lottery.prizes.map(prize => ({
+          id: prize.id,
+          name: prize.name,
+          type: prize.type,
+          probability: Number(prize.probability),
+          remainQuantity: prize.remainQuantity,
+          totalQuantity: prize.totalQuantity,
+          displayOrder: prize.displayOrder,
+          instanceDesc: prize.instanceDesc
+        }))
+      }))
+    }
+  })
+
+  /**
+   * 获取抽奖详情
+   */
+  fastify.get<{ Params: { id: string } }>('/lotteries/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    const lottery = await db.getLotteryById(lotteryId)
+
+    if (!lottery) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+
+    if (!lottery.isActive) {
+      return reply.code(400).send({ error: 'LOTTERY_INACTIVE', message: 'Lottery is not active' })
+    }
+
+    return {
+      lottery: {
+        id: lottery.id,
+        name: lottery.name,
+        description: lottery.description,
+        costPoints: lottery.costPoints,
+        startAt: lottery.startAt?.toISOString() || null,
+        endAt: lottery.endAt?.toISOString() || null,
+        totalDraws: lottery._count.records,  // 使用实时统计
+        prizes: lottery.prizes.map(prize => ({
+          id: prize.id,
+          name: prize.name,
+          type: prize.type,
+          probability: Number(prize.probability),
+          remainQuantity: prize.remainQuantity,
+          totalQuantity: prize.totalQuantity,
+          displayOrder: prize.displayOrder,
+          instanceDesc: prize.instanceDesc
+        }))
+      }
+    }
+  })
+
+  /**
+   * 执行抽奖
+   */
+  fastify.post<{ Params: { id: string } }>('/lotteries/:id/draw', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const userId = request.user.id
+    const lotteryId = Number(request.params.id)
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    // 执行抽奖（带重试机制，处理事务冲突/死锁）
+    const maxRetries = 5
+    let lastError: Error | null = null
+    
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        const result = await db.performDraw(userId, lotteryId)
+
+        if (!result.success) {
+          return reply.code(400).send({
+            error: 'DRAW_FAILED',
+            message: result.message
+          })
+        }
+
+        const record = result.record!
+        const prize = result.prize!
+
+        // 异步发送中奖通知（不阻塞响应）
+        if (prize.type === 'balance' || prize.type === 'instance') {
+          const lottery = await db.getLotteryById(lotteryId)
+          setImmediate(() => {
+            sendLotteryWinNotification({
+              lotteryId,
+              recordId: record.id,
+              prizeType: prize.type as 'balance' | 'instance',
+              username: request.user.username,
+              lotteryName: lottery?.name || '',
+              prizeName: prize.name,
+              amount: prize.type === 'balance' ? prize.value : undefined,
+              instanceDesc: prize.type === 'instance' ? (prize.instanceDesc || undefined) : undefined
+            }).catch(err => {
+              console.error('[Entertainment] Failed to send win notification:', err)
+            })
+          })
+        }
+
+        return {
+          success: true,
+          currentPoints: result.currentPoints,
+          record: {
+            id: record.id,
+            prizeId: record.prizeId,  // 添加 prizeId 用于前端定位转盘位置
+            prizeType: record.prizeType,
+            prizeName: record.prizeName,
+            prizeValue: record.prizeValue,
+            badgeOwnership: prize.badgeOwnership,
+            status: record.status,
+            pointsSpent: record.pointsSpent,
+            createdAt: record.createdAt.toISOString()
+          },
+          // 告知用户需要采取的操作
+          action: prize.type === 'instance' ? 'SUBMIT_TICKET' : null,
+          message: prize.type === 'nothing'
+            ? '再接再厉！'
+            : prize.type === 'instance'
+              ? '恭喜中奖！请提交工单领取您的实例奖励。'
+              : prize.type === 'badge'
+                ? `恭喜获得徽章！${prize.name}`
+              : `恭喜中奖！${prize.name}`
+        }
+      } catch (err: any) {
+        lastError = err
+        // 检查是否为事务冲突/死锁错误
+        const isRetryable = err.code === 'P2034' || // Prisma 事务冲突
+          err.message?.includes('deadlock') ||
+          err.message?.includes('write conflict') ||
+          err.message?.includes('could not serialize')
+        
+        if (isRetryable && attempt < maxRetries) {
+          // 指数退避 + 随机抖动（50-300ms * attempt）
+          const baseDelay = Math.floor(Math.random() * 250) + 50
+          const delay = baseDelay * attempt
+          await new Promise(resolve => setTimeout(resolve, delay))
+          continue
+        }
+        if (err instanceof Error && err.message === 'NO_BADGES_AVAILABLE') {
+          return sendBadgeError(reply, err)
+        }
+        throw err
+      }
+    }
+
+    // 所有重试都失败
+    throw lastError
+  })
+
+  /**
+   * 十连抽
+   * 串行执行 10 次抽奖，每次复用现有的 performDraw 逻辑
+   */
+  fastify.post<{ Params: { id: string } }>('/lotteries/:id/draw-multi', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const userId = request.user.id
+    const lotteryId = Number(request.params.id)
+    const drawCount = 10  // 固定 10 连抽
+
+    if (isNaN(lotteryId)) {
+      return reply.code(400).send({ error: 'INVALID_ID', message: 'Invalid lottery ID' })
+    }
+
+    // 1. 先检查抽奖活动是否有效，以及用户积分是否足够 10 次
+    const lottery = await db.getLotteryById(lotteryId)
+    if (!lottery) {
+      return reply.code(404).send({ error: 'NOT_FOUND', message: 'Lottery not found' })
+    }
+    if (!lottery.isActive) {
+      return reply.code(400).send({ error: 'LOTTERY_INACTIVE', message: 'Lottery is not active' })
+    }
+    const now = new Date()
+    if (lottery.startAt && lottery.startAt > now) {
+      return reply.code(400).send({ error: 'LOTTERY_NOT_STARTED', message: 'Lottery has not started' })
+    }
+    if (lottery.endAt && lottery.endAt < now) {
+      return reply.code(400).send({ error: 'LOTTERY_ENDED', message: 'Lottery has ended' })
+    }
+
+    // 检查积分是否足够 10 次
+    const userPoints = await db.getUserPoints(userId)
+    const totalCost = lottery.costPoints * drawCount
+    if (userPoints.points < totalCost) {
+      return reply.code(400).send({ 
+        error: 'INSUFFICIENT_POINTS', 
+        message: `积分不足，需要 ${totalCost} 积分，当前仅有 ${userPoints.points} 积分`,
+        required: totalCost,
+        current: userPoints.points
+      })
+    }
+
+    // 2. 串行执行 10 次抽奖（复用现有的并发安全机制）
+    const results: Array<{
+      id: number
+      prizeId: number
+      prizeType: string
+      prizeName: string
+      prizeValue: number
+      badgeOwnership: BadgeOwnershipView | null
+      status: string
+      pointsSpent: number
+      createdAt: string
+    }> = []
+    const maxRetries = 5
+
+    for (let i = 0; i < drawCount; i++) {
+      let lastError: Error | null = null
+      let success = false
+
+      for (let attempt = 1; attempt <= maxRetries; attempt++) {
+        try {
+          const result = await db.performDraw(userId, lotteryId)
+
+          if (!result.success) {
+            // 非事务冲突类错误（如积分不足），直接返回已有结果
+            return {
+              success: results.length > 0,
+              records: results,
+              totalDraws: results.length,
+              stoppedAt: i + 1,
+              stopReason: result.message
+            }
+          }
+
+          const record = result.record!
+          const prize = result.prize!
+
+          results.push({
+            id: record.id,
+            prizeId: record.prizeId,
+            prizeType: record.prizeType,
+            prizeName: record.prizeName,
+            prizeValue: record.prizeValue,
+            badgeOwnership: prize.badgeOwnership,
+            status: record.status,
+            pointsSpent: record.pointsSpent,
+            createdAt: record.createdAt.toISOString()
+          })
+
+          // 异步发送中奖通知（不阻塞）
+          if (prize.type === 'balance' || prize.type === 'instance') {
+            setImmediate(() => {
+              sendLotteryWinNotification({
+                lotteryId,
+                recordId: record.id,
+                prizeType: prize.type as 'balance' | 'instance',
+                username: request.user.username,
+                lotteryName: lottery?.name || '',
+                prizeName: prize.name,
+                amount: prize.type === 'balance' ? prize.value : undefined,
+                instanceDesc: prize.type === 'instance' ? (prize.instanceDesc || undefined) : undefined
+              }).catch(err => {
+                console.error('[Entertainment] Failed to send win notification:', err)
+              })
+            })
+          }
+
+          success = true
+          break
+        } catch (err: any) {
+          lastError = err
+          if (err instanceof Error && err.message === 'NO_BADGES_AVAILABLE') {
+            if (results.length === 0) {
+              return sendBadgeError(reply, err)
+            }
+            return {
+              success: true,
+              records: results,
+              totalDraws: results.length,
+              stoppedAt: i + 1,
+              stopReason: '暂无可用徽章'
+            }
+          }
+          // 检查是否为事务冲突/死锁错误
+          const isRetryable = err.code === 'P2034' ||
+            err.message?.includes('deadlock') ||
+            err.message?.includes('write conflict') ||
+            err.message?.includes('could not serialize')
+          
+          if (isRetryable && attempt < maxRetries) {
+            const baseDelay = Math.floor(Math.random() * 250) + 50
+            const delay = baseDelay * attempt
+            await new Promise(resolve => setTimeout(resolve, delay))
+            continue
+          }
+          // 非可重试错误，返回已有结果
+          return {
+            success: results.length > 0,
+            records: results,
+            totalDraws: results.length,
+            stoppedAt: i + 1,
+            stopReason: lastError?.message || 'Unknown error'
+          }
+        }
+      }
+
+      if (!success) {
+        // 所有重试都失败
+        return {
+          success: results.length > 0,
+          records: results,
+          totalDraws: results.length,
+          stoppedAt: i + 1,
+          stopReason: lastError?.message || 'Max retries exceeded'
+        }
+      }
+    }
+
+    // 3. 全部抽完，返回结果
+    return {
+      success: true,
+      records: results,
+      totalDraws: results.length,
+      totalPointsSpent: lottery.costPoints * results.length
+    }
+  })
+
+  /**
+   * 获取用户中奖记录
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      prizeType?: string
+    }
+  }>('/lottery-records', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; prizeType?: string } }>) => {
+    const userId = request.user.id
+    const { page = '1', pageSize = '20', prizeType } = request.query
+
+    const result = await db.getUserLotteryRecords(userId, {
+      page: Number(page),
+      pageSize: Number(pageSize),
+      prizeType: prizeType || undefined
+    })
+
+    return {
+      records: result.records.map(record => ({
+        id: record.id,
+        lotteryId: record.lotteryId,
+        lotteryName: record.lottery.name,
+        prizeType: record.prizeType,
+        prizeName: record.prizeName,
+        prizeValue: record.prizeValue,
+        instanceDesc: record.prize?.instanceDesc || null,
+        status: record.status,
+        pointsSpent: record.pointsSpent,
+        createdAt: record.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+
+  // ==================== 徽章系统 API ====================
+
+  fastify.get('/badges/catalog', {
+    onRequest: [fastify.authenticate]
+  }, async () => {
+    const [series, badges] = await Promise.all([
+      db.getBadgeSeriesList(),
+      db.getBadgeCatalog()
+    ])
+
+    return { series, badges }
+  })
+
+  fastify.get('/badges/overview', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    return db.getBadgeOverview(request.user.id)
+  })
+
+  fastify.post('/badges/draw/random', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const result = await db.performRandomBadgeDraw(request.user.id)
+      if (!result.success) {
+        return reply.code(400).send({
+          error: 'INSUFFICIENT_POINTS',
+          message: '积分不足',
+          currentPoints: result.points
+        })
+      }
+
+      return {
+        success: true,
+        currentPoints: result.points,
+        ownership: result.ownership
+      }
+    } catch (error) {
+      return sendBadgeError(reply, error)
+    }
+  })
+
+  fastify.post('/badges/draw/random-multi', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    try {
+      const result = await db.performRandomBadgeMultiDraw(request.user.id, 10)
+      if (!result.success) {
+        return reply.code(400).send({
+          error: 'INSUFFICIENT_POINTS',
+          message: '积分不足',
+          currentPoints: result.points
+        })
+      }
+
+      return {
+        success: true,
+        currentPoints: result.points,
+        ownerships: result.ownerships
+      }
+    } catch (error) {
+      return sendBadgeError(reply, error)
+    }
+  })
+
+  fastify.post<{ Body: { badgeId?: string } }>('/badges/draw/select', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['badgeId'],
+        properties: {
+          badgeId: { type: 'string', minLength: 1, maxLength: 64 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { badgeId?: string } }>, reply: FastifyReply) => {
+    const badgeId = request.body.badgeId?.trim()
+    if (!badgeId) {
+      return reply.code(400).send({
+        error: 'BADGE_ID_REQUIRED',
+        message: 'badgeId is required'
+      })
+    }
+
+    try {
+      const result = await db.performSelectBadge(request.user.id, badgeId)
+      if (!result.success) {
+        return reply.code(400).send({
+          error: 'INSUFFICIENT_POINTS',
+          message: '积分不足',
+          currentPoints: result.points
+        })
+      }
+
+      return {
+        success: true,
+        currentPoints: result.points,
+        ownership: result.ownership
+      }
+    } catch (error) {
+      return sendBadgeError(reply, error)
+    }
+  })
+
+  fastify.post<{ Body: { ownershipId?: number } }>('/badges/apply/avatar', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['ownershipId'],
+        properties: {
+          ownershipId: { type: 'integer', minimum: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { ownershipId?: number } }>, reply: FastifyReply) => {
+    const ownershipId = Number(request.body.ownershipId)
+    if (isNaN(ownershipId) || ownershipId <= 0) {
+      return reply.code(400).send({
+        error: 'INVALID_OWNERSHIP_ID',
+        message: 'Invalid ownershipId'
+      })
+    }
+
+    try {
+      const ownership = await db.applyBadgeToAvatar(request.user.id, ownershipId)
+      return {
+        success: true,
+        ownership
+      }
+    } catch (error) {
+      return sendBadgeError(reply, error)
+    }
+  })
+
+  fastify.post<{ Body: { ownershipId?: number; instanceId?: number } }>('/badges/apply/instance', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['ownershipId', 'instanceId'],
+        properties: {
+          ownershipId: { type: 'integer', minimum: 1 },
+          instanceId: { type: 'integer', minimum: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { ownershipId?: number; instanceId?: number } }>, reply: FastifyReply) => {
+    const ownershipId = Number(request.body.ownershipId)
+    const instanceId = Number(request.body.instanceId)
+    if (isNaN(ownershipId) || ownershipId <= 0 || isNaN(instanceId) || instanceId <= 0) {
+      return reply.code(400).send({
+        error: 'INVALID_PARAMS',
+        message: 'Invalid ownershipId or instanceId'
+      })
+    }
+
+    try {
+      const ownership = await db.applyBadgeToInstance(request.user.id, ownershipId, instanceId)
+      return {
+        success: true,
+        ownership
+      }
+    } catch (error) {
+      return sendBadgeError(reply, error)
+    }
+  })
+
+  fastify.post<{ Body: { ownershipId?: number } }>('/badges/unapply', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['ownershipId'],
+        properties: {
+          ownershipId: { type: 'integer', minimum: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { ownershipId?: number } }>, reply: FastifyReply) => {
+    const ownershipId = Number(request.body.ownershipId)
+    if (isNaN(ownershipId) || ownershipId <= 0) {
+      return reply.code(400).send({
+        error: 'INVALID_OWNERSHIP_ID',
+        message: 'Invalid ownershipId'
+      })
+    }
+
+    try {
+      const ownership = await db.unapplyBadge(request.user.id, ownershipId)
+      return {
+        success: true,
+        ownership
+      }
+    } catch (error) {
+      return sendBadgeError(reply, error)
+    }
+  })
+}
diff --git a/server/src/routes/friends.ts b/server/src/routes/friends.ts
new file mode 100644
index 0000000..854604e
--- /dev/null
+++ b/server/src/routes/friends.ts
@@ -0,0 +1,516 @@
+/**
+ * 好友系统 API 路由
+ * 提供好友添加、删除、请求管理等功能
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { sendNotification } from '../lib/notifier.js'
+
+export default async function friendsRoutes(fastify: FastifyInstance) {
+  // ==================== 好友列表 ====================
+
+  /**
+   * 获取好友列表
+   * GET /api/friends
+   */
+  fastify.get('/', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+
+    try {
+      const friends = await db.getFriendList(user.id)
+      return { friends }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.error('[Friends] Failed to get friend list:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  // ==================== 好友请求 ====================
+
+  /**
+   * 发送好友请求
+   * POST /api/friends/request
+   */
+  fastify.post<{
+    Body: { username: string; remark?: string }
+  }>('/request', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['username'],
+        properties: {
+          username: { type: 'string', minLength: 1 },
+          remark: { type: 'string', maxLength: 200 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Body: { username: string; remark?: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { username, remark } = request.body
+
+    try {
+      // 搜索目标用户
+      const targetUser = await db.searchUserByUsername(username, user.id)
+      if (!targetUser) {
+        return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+      }
+
+      // 发送好友请求
+      const result = await db.sendFriendRequest(user.id, targetUser.id, remark)
+
+      // 如果是自动接受（对方已发送请求给我）
+      if (result.status === 'accepted') {
+        await createLog(
+          user.id,
+          'friend',
+          'friend.request_auto_accepted',
+          `Auto accepted friend request with user "${targetUser.username}"`,
+          'success'
+        )
+
+        // 通知对方：他之前发的请求被接受了
+        await sendNotification(targetUser.id, 'friend_accepted', {
+          toUsername: user.username
+        }).catch(err => console.error('[Friends] Notification error:', err))
+
+        // 通知当前用户：你们成为好友了（使用 friend_request 通知表示对方之前发过请求）
+        await sendNotification(user.id, 'friend_request', {
+          fromUsername: targetUser.username
+        }).catch(err => console.error('[Friends] Notification error:', err))
+
+        return { message: '好友添加成功（对方已向您发送请求）', friendship: result }
+      }
+
+      await createLog(
+        user.id,
+        'friend',
+        'friend.request_sent',
+        `Sent friend request to user "${targetUser.username}"`,
+        'success'
+      )
+
+      // 通知目标用户收到好友请求
+      await sendNotification(targetUser.id, 'friend_request', {
+        fromUsername: user.username
+      }).catch(err => console.error('[Friends] Notification error:', err))
+
+      return { message: '好友请求已发送', request: { id: result.id } }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+
+      if (message === 'ALREADY_FRIENDS') {
+        return reply.code(400).send(apiError(ErrorCode.ALREADY_FRIENDS))
+      }
+      if (message === 'REQUEST_PENDING') {
+        return reply.code(400).send(apiError(ErrorCode.FRIEND_REQUEST_PENDING))
+      }
+
+      console.error('[Friends] Failed to send friend request:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  /**
+   * 获取收到的待处理好友请求
+   * GET /api/friends/requests
+   */
+  fastify.get('/requests', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+
+    try {
+      const requests = await db.getPendingFriendRequests(user.id)
+      return { requests }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.error('[Friends] Failed to get pending requests:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  /**
+   * 获取已发送的待处理好友请求
+   * GET /api/friends/requests/sent
+   */
+  fastify.get('/requests/sent', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+
+    try {
+      const requests = await db.getSentFriendRequests(user.id)
+      return { requests }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.error('[Friends] Failed to get sent requests:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  /**
+   * 取消已发送的好友请求
+   * DELETE /api/friends/request/:id
+   */
+  fastify.delete<{
+    Params: { id: string }
+  }>('/request/:id', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const requestId = Number(request.params.id)
+
+    if (isNaN(requestId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    try {
+      await db.cancelFriendRequest(requestId, user.id)
+
+      await createLog(
+        user.id,
+        'friend',
+        'friend.request_cancelled',
+        `Cancelled friend request #${requestId}`,
+        'success'
+      )
+
+      return { message: '已取消好友请求' }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+
+      if (message === 'REQUEST_NOT_FOUND') {
+        return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '请求不存在'))
+      }
+      if (message === 'FORBIDDEN') {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN, '无权取消此请求'))
+      }
+      if (message === 'REQUEST_NOT_PENDING') {
+        return reply.code(400).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_PENDING))
+      }
+
+      console.error('[Friends] Failed to cancel request:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  // ==================== 请求处理 ====================
+
+  /**
+   * 接受好友请求
+   * POST /api/friends/:id/accept
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/accept', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const requestId = Number(request.params.id)
+
+    if (isNaN(requestId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    try {
+      // 获取请求信息
+      const friendship = await db.getFriendshipById(requestId)
+      if (!friendship) {
+        return reply.code(404).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_FOUND))
+      }
+
+      // 接受请求
+      const result = await db.acceptFriendRequest(requestId, user.id)
+
+      await createLog(
+        user.id,
+        'friend',
+        'friend.request_accepted',
+        `Accepted friend request from user "${friendship.user.username}"`,
+        'success'
+      )
+
+      // 通知发送者请求已被接受
+      await sendNotification(friendship.userId, 'friend_accepted', {
+        toUsername: user.username
+      }).catch(err => console.error('[Friends] Notification error:', err))
+
+      return { message: '已接受好友请求', friendship: result }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+
+      if (message === 'REQUEST_NOT_FOUND') {
+        return reply.code(404).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_FOUND))
+      }
+      if (message === 'FORBIDDEN') {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN, '无权处理此请求'))
+      }
+      if (message === 'REQUEST_NOT_PENDING') {
+        return reply.code(400).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_PENDING))
+      }
+
+      console.error('[Friends] Failed to accept request:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  /**
+   * 拒绝好友请求
+   * POST /api/friends/:id/reject
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/reject', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const requestId = Number(request.params.id)
+
+    if (isNaN(requestId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    try {
+      // 获取请求信息用于日志
+      const friendship = await db.getFriendshipById(requestId)
+      if (!friendship) {
+        return reply.code(404).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_FOUND))
+      }
+
+      await db.rejectFriendRequest(requestId, user.id)
+
+      await createLog(
+        user.id,
+        'friend',
+        'friend.request_rejected',
+        `Rejected friend request from user "${friendship.user.username}"`,
+        'success'
+      )
+
+      // 通知发送者请求已被拒绝
+      await sendNotification(friendship.userId, 'friend_rejected', {
+        toUsername: user.username
+      }).catch(err => console.error('[Friends] Notification error:', err))
+
+      return { message: '已拒绝好友请求' }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+
+      if (message === 'REQUEST_NOT_FOUND') {
+        return reply.code(404).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_FOUND))
+      }
+      if (message === 'FORBIDDEN') {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN, '无权处理此请求'))
+      }
+      if (message === 'REQUEST_NOT_PENDING') {
+        return reply.code(400).send(apiError(ErrorCode.FRIEND_REQUEST_NOT_PENDING))
+      }
+
+      console.error('[Friends] Failed to reject request:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  // ==================== 好友管理 ====================
+
+  /**
+   * 删除好友
+   * DELETE /api/friends/:id
+   */
+  fastify.delete<{
+    Params: { id: string }
+  }>('/:id', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const friendshipId = Number(request.params.id)
+
+    if (isNaN(friendshipId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    try {
+      // 获取好友关系信息
+      const friendship = await db.getFriendshipById(friendshipId)
+      if (!friendship) {
+        return reply.code(404).send(apiError(ErrorCode.FRIENDSHIP_NOT_FOUND))
+      }
+
+      // 确定对方用户信息用于日志和通知
+      const friendUsername = friendship.userId === user.id ? friendship.friend.username : friendship.user.username
+      const friendUserId = friendship.userId === user.id ? friendship.friendId : friendship.userId
+
+      await db.removeFriend(friendshipId, user.id)
+
+      await createLog(
+        user.id,
+        'friend',
+        'friend.removed',
+        `Removed friend "${friendUsername}"`,
+        'success'
+      )
+
+      // 通知被删除的好友
+      await sendNotification(friendUserId, 'friend_removed', {
+        fromUsername: user.username
+      }).catch(err => console.error('[Friends] Notification error:', err))
+
+      return { message: '已删除好友' }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+
+      if (message === 'FRIENDSHIP_NOT_FOUND') {
+        return reply.code(404).send(apiError(ErrorCode.FRIENDSHIP_NOT_FOUND))
+      }
+      if (message === 'FORBIDDEN') {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN, '无权删除此好友'))
+      }
+
+      console.error('[Friends] Failed to remove friend:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  // ==================== 历史记录与搜索 ====================
+
+  /**
+   * 获取好友请求历史记录
+   * GET /api/friends/history
+   */
+  fastify.get<{
+    Querystring: { filter?: 'accepted' | 'rejected' | 'removed' | 'all' }
+  }>('/history', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Querystring: { filter?: 'accepted' | 'rejected' | 'removed' | 'all' }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { filter } = request.query
+
+    try {
+      const history = await db.getRequestHistory(user.id, filter)
+      return { history }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.error('[Friends] Failed to get history:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  /**
+   * 搜索用户（用于添加好友）
+   * GET /api/friends/search
+   */
+  fastify.get<{
+    Querystring: { username: string }
+  }>('/search', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      querystring: {
+        type: 'object',
+        required: ['username'],
+        properties: {
+          username: { type: 'string', minLength: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Querystring: { username: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { username } = request.query
+
+    try {
+      const targetUser = await db.searchUserByUsername(username, user.id)
+      if (!targetUser) {
+        return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND, '用户不存在'))
+      }
+
+      // 检查是否已是好友
+      const isFriend = await db.areFriends(user.id, targetUser.id)
+
+      return {
+        user: {
+          id: targetUser.id,
+          username: targetUser.username,
+          avatarStyle: targetUser.avatarStyle,
+          isFriend
+        }
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.error('[Friends] Failed to search user:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+
+  /**
+   * 获取好友的资源统计
+   * GET /api/friends/:id/resources
+   */
+  fastify.get<{
+    Params: { id: string }
+  }>('/:id/resources', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const friendshipId = Number(request.params.id)
+
+    if (isNaN(friendshipId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    try {
+      const friendship = await db.getFriendshipById(friendshipId)
+      if (!friendship) {
+        return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '好友关系不存在'))
+      }
+
+      // 验证权限
+      if (friendship.userId !== user.id && friendship.friendId !== user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+
+      // 确定好友的用户ID
+      const friendUserId = friendship.userId === user.id ? friendship.friendId : friendship.userId
+
+      // 获取好友的资源统计 - 使用 prisma 直接查询
+      const { prisma } = await import('../db/prisma.js')
+      const [hostCount, packageCount] = await Promise.all([
+        prisma.host.count({ where: { userId: friendUserId } }),
+        prisma.package.count({ where: { userId: friendUserId } })
+      ])
+
+      return {
+        resources: {
+          hosts: hostCount,
+          images: 0, // 镜像是节点级别的，不是用户级别
+          packages: packageCount
+        }
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.error('[Friends] Failed to get friend resources:', message)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, message))
+    }
+  })
+}
diff --git a/server/src/routes/help.ts b/server/src/routes/help.ts
new file mode 100644
index 0000000..60148a0
--- /dev/null
+++ b/server/src/routes/help.ts
@@ -0,0 +1,418 @@
+/**
+ * 帮助文档路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { getSystemConfig, updateSystemConfig } from '../db/system-config.js'
+import { prisma } from '../db/prisma.js'
+import { invalidateCachedConfig } from '../lib/config-cache.js'
+
+// 默认分类配置
+const DEFAULT_CATEGORIES = [
+  { id: 'general', name: '常规', color: '#6b7280' },
+  { id: 'getting-started', name: '快速开始', color: '#22c55e' },
+  { id: 'instances', name: '实例管理', color: '#3b82f6' },
+  { id: 'networking', name: '网络配置', color: '#8b5cf6' },
+  { id: 'billing', name: '计费相关', color: '#f59e0b' },
+  { id: 'faq', name: '常见问题', color: '#ef4444' }
+]
+
+export default async function helpRoutes(fastify: FastifyInstance) {
+
+  // ==================== 公开 API ====================
+
+  /**
+   * 获取帮助文档列表（公开，只显示已发布）
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      category?: string
+    }
+  }>('/', async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      category?: string
+    }
+  }>) => {
+    const { page = '1', pageSize = '20', category } = request.query
+
+    const result = await db.getHelpArticles({
+      page: parseInt(page, 10),
+      pageSize: parseInt(pageSize, 10),
+      publishedOnly: true,
+      category: category || undefined
+    })
+
+    return {
+      articles: result.items.map(a => ({
+        id: a.id,
+        title: a.title,
+        slug: a.slug,
+        category: a.category,
+        createdAt: a.created_at,
+        updatedAt: a.updated_at
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      totalPages: result.totalPages
+    }
+  })
+
+  /**
+   * 获取置顶的帮助文档（公开，用于首页显示）
+   */
+  fastify.get('/pinned', async (request: FastifyRequest<{
+    Querystring: {
+      limit?: string
+    }
+  }>) => {
+    const { limit = '6' } = request.query
+    const limitNum = Math.min(Math.max(parseInt(limit, 10) || 6, 1), 20) // 限制在 1-20 之间
+
+    const articles = await db.getPinnedHelpArticles(limitNum)
+    return { articles }
+  })
+
+  /**
+   * 获取帮助分类配置（公开）
+   */
+  fastify.get('/category-config', async () => {
+    const configStr = await getSystemConfig('help_categories', false)
+    if (configStr) {
+      try {
+        return { categories: JSON.parse(configStr) }
+      } catch {
+        // 解析失败，返回默认
+      }
+    }
+    return { categories: DEFAULT_CATEGORIES }
+  })
+
+  /**
+   * 获取帮助分类列表（公开）
+   */
+  fastify.get('/categories', async () => {
+    const categories = await db.getHelpCategories()
+    return { categories }
+  })
+
+  /**
+   * 通过 slug 获取帮助文档详情（公开）
+   */
+  fastify.get<{ Params: { slug: string } }>('/article/:slug', async (request: FastifyRequest<{ Params: { slug: string } }>, reply: FastifyReply) => {
+    const { slug } = request.params
+
+    const article = await db.getHelpArticleBySlug(slug)
+    if (!article) {
+      return reply.code(404).send(apiError(ErrorCode.ARTICLE_NOT_FOUND))
+    }
+
+    return {
+      article: {
+        id: article.id,
+        title: article.title,
+        slug: article.slug,
+        content: article.content,
+        category: article.category,
+        created_at: article.created_at,
+        updated_at: article.updated_at
+      }
+    }
+  })
+
+  // ==================== 管理 API ====================
+
+  /**
+   * 保存帮助分类配置（管理员）
+   */
+  fastify.put<{ Body: { categories: Array<{ id: string; name: string; color: string }> } }>('/admin/category-config', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['categories'],
+        properties: {
+          categories: {
+            type: 'array',
+            items: {
+              type: 'object',
+              required: ['id', 'name', 'color'],
+              properties: {
+                id: { type: 'string', pattern: '^[a-z0-9-]+$' },
+                name: { type: 'string', minLength: 1 },
+                color: { type: 'string', pattern: '^#[0-9a-fA-F]{6}$' }
+              }
+            }
+          }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { categories: Array<{ id: string; name: string; color: string }> } }>) => {
+    const { categories } = request.body
+    
+    // 检查配置是否已存在
+    const existing = await prisma.systemConfig.findUnique({ where: { key: 'help_categories' } })
+    
+    if (existing) {
+      await updateSystemConfig('help_categories', JSON.stringify(categories))
+    } else {
+      // 创建新配置
+      await prisma.systemConfig.create({
+        data: {
+          key: 'help_categories',
+          value: JSON.stringify(categories),
+          type: 'json',
+          label: '帮助中心分类配置',
+          description: '帮助文档的分类配置（ID、名称、颜色）'
+        }
+      })
+      // 清除缓存（可能缓存了 null）
+      invalidateCachedConfig('help_categories')
+    }
+    
+    await createLog(
+      request.user.id,
+      'system',
+      'help.category_config',
+      `Updated help category config (${categories.length} categories)`,
+      'success'
+    )
+    
+    return { message: 'Category config saved' }
+  })
+
+  /**
+   * 获取所有帮助文档列表（管理员，包括未发布）
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      category?: string
+    }
+  }>('/admin', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      category?: string
+    }
+  }>, _reply: FastifyReply) => {
+    const { page = '1', pageSize = '20', category } = request.query
+
+    const result = await db.getHelpArticles({
+      page: parseInt(page, 10),
+      pageSize: parseInt(pageSize, 10),
+      publishedOnly: false,
+      category: category || undefined
+    })
+
+    return {
+      articles: result.items.map(a => ({
+        id: a.id,
+        title: a.title,
+        slug: a.slug,
+        category: a.category,
+        sort_order: a.sort_order,
+        published: a.published, // 已经是 0 或 1
+        pinned: a.pinned, // 已经是 0 或 1
+        created_at: a.created_at,
+        updated_at: a.updated_at
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      totalPages: result.totalPages
+    }
+  })
+
+  /**
+   * 获取帮助文档详情（管理员）
+   */
+  fastify.get<{ Params: { id: string } }>('/admin/:id', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const articleId = Number(id)
+
+    if (isNaN(articleId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const article = await db.getHelpArticleById(articleId)
+
+    if (!article) {
+      return reply.code(404).send(apiError(ErrorCode.ARTICLE_NOT_FOUND))
+    }
+
+    return {
+      article: {
+        id: article.id,
+        title: article.title,
+        slug: article.slug,
+        content: article.content,
+        category: article.category,
+        sort_order: article.sort_order,
+        published: article.published, // 已经是 0 或 1
+        pinned: article.pinned, // 已经是 0 或 1
+        created_at: article.created_at,
+        updated_at: article.updated_at
+      }
+    }
+  })
+
+  /**
+   * 创建帮助文档（管理员）
+   */
+  fastify.post<{ Body: { title: string; slug: string; content: string; category?: string; sortOrder?: number; published?: boolean; pinned?: boolean } }>('/admin', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['title', 'slug', 'content'],
+        properties: {
+          title: { type: 'string', minLength: 1 },
+          slug: { type: 'string', minLength: 1, pattern: '^[a-z0-9-]+$' },
+          content: { type: 'string' },
+          category: { type: 'string' },
+          sortOrder: { type: 'integer' },
+          published: { type: 'boolean' },
+          pinned: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { title: string; slug: string; content: string; category?: string; sortOrder?: number; published?: boolean; pinned?: boolean } }>, reply: FastifyReply) => {
+    const { title, slug, content, category, sortOrder, published, pinned } = request.body
+
+    // Check slug uniqueness
+    const existing = await db.getHelpArticleBySlug(slug)
+    if (existing) {
+      return reply.code(400).send(apiError(ErrorCode.SLUG_EXISTS))
+    }
+
+    const articleId = await db.createHelpArticle({
+      title,
+      slug,
+      content,
+      category: category || 'general',
+      sortOrder: sortOrder || 0,
+      published: published !== false,
+      pinned: pinned === true,
+      createdBy: request.user.id
+    })
+
+    await createLog(
+      request.user.id,
+      'system',
+      'help.create',
+      `Created help article "${title}" (ID: ${articleId})`,
+      'success'
+    )
+
+    return {
+      message: 'Article created',
+      article: { id: articleId, title, slug }
+    }
+  })
+
+  /**
+   * 更新帮助文档（管理员）
+   */
+  fastify.patch<{
+    Params: { id: string }
+    Body: { title?: string; slug?: string; content?: string; category?: string; sortOrder?: number; published?: boolean; pinned?: boolean }
+  }>('/admin/:id', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          title: { type: 'string', minLength: 1 },
+          slug: { type: 'string', minLength: 1, pattern: '^[a-z0-9-]+$' },
+          content: { type: 'string' },
+          category: { type: 'string' },
+          sortOrder: { type: 'integer' },
+          published: { type: 'boolean' },
+          pinned: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { title?: string; slug?: string; content?: string; category?: string; sortOrder?: number; published?: boolean; pinned?: boolean }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const articleId = Number(id)
+
+    if (isNaN(articleId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { title, slug, content, category, sortOrder, published, pinned } = request.body
+
+    const article = await db.getHelpArticleById(articleId)
+    if (!article) {
+      return reply.code(404).send(apiError(ErrorCode.ARTICLE_NOT_FOUND))
+    }
+
+    // Check slug uniqueness if changed
+    if (slug && slug !== article.slug) {
+      const existing = await db.getHelpArticleBySlug(slug)
+      if (existing) {
+        return reply.code(400).send(apiError(ErrorCode.SLUG_EXISTS))
+      }
+    }
+
+    await db.updateHelpArticle(articleId, { title, slug, content, category, sortOrder, published, pinned })
+
+    await createLog(
+      request.user.id,
+      'system',
+      'help.update',
+      `Updated help article "${article.title}" (ID: ${articleId})`,
+      'success'
+    )
+
+    return { message: 'Article updated' }
+  })
+
+  /**
+   * 删除帮助文档（管理员）
+   */
+  fastify.delete<{ Params: { id: string } }>('/admin/:id', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const articleId = Number(id)
+
+    if (isNaN(articleId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const article = await db.getHelpArticleById(articleId)
+    if (!article) {
+      return reply.code(404).send(apiError(ErrorCode.ARTICLE_NOT_FOUND))
+    }
+
+    await db.deleteHelpArticle(articleId)
+
+    await createLog(
+      request.user.id,
+      'system',
+      'help.delete',
+      `Deleted help article "${article.title}" (ID: ${articleId})`,
+      'success'
+    )
+
+    return { message: 'Article deleted' }
+  })
+}
+
diff --git a/server/src/routes/hosting.ts b/server/src/routes/hosting.ts
new file mode 100644
index 0000000..d0abb9c
--- /dev/null
+++ b/server/src/routes/hosting.ts
@@ -0,0 +1,792 @@
+/**
+ * 托管余额路由
+ * 处理托管余额查询、提现申请、管理员审核等
+ */
+
+import type { FastifyInstance, FastifyRequest } from 'fastify'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { checkHostingAccess } from '../lib/hosting-access.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import {
+  createHostingUserBlock,
+  listHostingUserBlocks,
+  removeHostingUserBlock
+} from '../db/hosting-blocks.js'
+import { HOSTING_BALANCE_LOG_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from '../db/advisory-locks.js'
+import { calculateVipLevel, getVipBadgeStyleForLevel, getVipRules } from '../services/vip-levels.js'
+
+// 提现配置常量
+const WITHDRAWAL_CONFIG = {
+  minAmount: 10,              // 最低提现金额（元）
+  feeRateBalance: 0.05        // 提现到面板余额手续费率 5%
+}
+
+export default async function hostingRoutes(fastify: FastifyInstance) {
+  async function ensureCanManageHostingBlocks(userId: number, role: string): Promise<boolean> {
+    if (role === 'admin') {
+      return true
+    }
+
+    const result = await checkHostingAccess(userId)
+    return result.allowed
+  }
+
+  // ==================== 托管准入检查 ====================
+
+  // 检查当前用户是否满足托管准入条件
+  fastify.get('/access-check', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+
+    // 管理员直接放行
+    if (user.role === 'admin') {
+      return { allowed: true }
+    }
+
+    const result = await checkHostingAccess(user.id)
+    return {
+      allowed: result.allowed,
+      reason: result.reason,
+      details: result.details
+    }
+  })
+
+  // ==================== 托管用户拉黑 ====================
+
+  fastify.get('/blocks', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request, reply) => {
+    const { user } = request
+    if (!await ensureCanManageHostingBlocks(user.id, user.role)) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const blocks = await listHostingUserBlocks(user.id)
+    return { blocks }
+  })
+
+  fastify.get<{
+    Querystring: { keyword?: string }
+  }>('/blocks/search', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } },
+    schema: {
+      querystring: {
+        type: 'object',
+        properties: {
+          keyword: { type: 'string', maxLength: 64 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Querystring: { keyword?: string } }>, reply) => {
+    const { user } = request
+    const keyword = request.query.keyword?.trim() || ''
+    if (!await ensureCanManageHostingBlocks(user.id, user.role)) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+    if (keyword.length < 2) {
+      return { users: [] }
+    }
+    const numericKeyword = /^\d+$/.test(keyword) ? Number(keyword) : null
+    const userIdCondition = numericKeyword !== null && Number.isSafeInteger(numericKeyword)
+      ? { id: numericKeyword }
+      : undefined
+
+    const users = await prisma.user.findMany({
+      where: {
+        id: { not: user.id },
+        role: { not: 'admin' },
+        status: 'active',
+        OR: [
+          userIdCondition,
+          { username: { contains: keyword, mode: 'insensitive' } },
+          { email: { contains: keyword, mode: 'insensitive' } }
+        ].filter(Boolean) as any
+      },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        avatarStyle: true,
+        avatarBadgeId: true,
+        hostingBlocksReceived: {
+          where: { blockerId: user.id },
+          select: { id: true }
+        }
+      },
+      take: 10,
+      orderBy: { id: 'asc' }
+    })
+
+    return {
+      users: users.map(item => ({
+        id: item.id,
+        username: item.username,
+        email: item.email,
+        avatarStyle: item.avatarStyle,
+        avatarBadgeId: item.avatarBadgeId ?? null,
+        blocked: item.hostingBlocksReceived.length > 0
+      }))
+    }
+  })
+
+  fastify.post<{
+    Body: { userId: number; remark?: string | null }
+  }>('/blocks', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['userId'],
+        properties: {
+          userId: { type: 'integer', minimum: 1 },
+          remark: { type: ['string', 'null'], maxLength: 200 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { userId: number; remark?: string | null } }>, reply) => {
+    const { user } = request
+    const { userId, remark } = request.body
+    if (!await ensureCanManageHostingBlocks(user.id, user.role)) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+    if (userId === user.id) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '不能拉黑自己'))
+    }
+
+    const target = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { id: true, username: true, role: true, status: true }
+    })
+    if (!target || target.status !== 'active') {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+    if (target.role === 'admin') {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '不能拉黑管理员账户'))
+    }
+
+    const block = await createHostingUserBlock(user.id, userId, remark)
+    await createLog(user.id, 'hosting', 'hosting.block_user', `Blocked user "${target.username}" (#${target.id})`, 'success')
+    return { block }
+  })
+
+  fastify.delete<{
+    Params: { userId: string }
+  }>('/blocks/:userId', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } },
+    schema: {
+      params: {
+        type: 'object',
+        required: ['userId'],
+        properties: {
+          userId: { type: 'string', pattern: '^\\d+$' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Params: { userId: string } }>, reply) => {
+    const { user } = request
+    const blockedUserId = Number(request.params.userId)
+    if (!await ensureCanManageHostingBlocks(user.id, user.role)) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+    if (Number.isNaN(blockedUserId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const removed = await removeHostingUserBlock(user.id, blockedUserId)
+    if (removed) {
+      await createLog(user.id, 'hosting', 'hosting.unblock_user', `Unblocked user #${blockedUserId}`, 'success')
+    }
+    return { success: removed }
+  })
+
+  // ==================== 托管余额查询 ====================
+
+  // 获取当前用户托管余额
+  fastify.get('/balance', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+
+    // 获取用户托管余额
+    const userData = await prisma.user.findUnique({
+      where: { id: user.id },
+      select: { hostingBalance: true }
+    })
+
+    // 获取冻结金额（未解冻的收入）
+    const frozenResult = await prisma.hostingBalanceLog.aggregate({
+      where: {
+        userId: user.id,
+        frozen: true,
+        type: 'income'
+      },
+      _sum: { amount: true }
+    })
+
+    // 获取累计收入
+    const totalIncomeResult = await prisma.hostingBalanceLog.aggregate({
+      where: {
+        userId: user.id,
+        type: 'income'
+      },
+      _sum: { amount: true }
+    })
+
+    // 获取累计提现
+    const totalWithdrawnResult = await prisma.hostingWithdrawal.aggregate({
+      where: {
+        userId: user.id,
+        status: 'completed'
+      },
+      _sum: { actualAmount: true }
+    })
+
+    // 获取待审核提现
+    const pendingWithdrawalResult = await prisma.hostingWithdrawal.aggregate({
+      where: {
+        userId: user.id,
+        status: 'pending'
+      },
+      _sum: { amount: true }
+    })
+
+    return {
+      balance: {
+        available: Number(userData?.hostingBalance || 0),
+        frozen: Number(frozenResult._sum.amount || 0),
+        pendingWithdrawal: Number(pendingWithdrawalResult._sum.amount || 0),
+        totalIncome: Number(totalIncomeResult._sum.amount || 0),
+        totalWithdrawn: Number(totalWithdrawnResult._sum.actualAmount || 0)
+      },
+      config: {
+        minWithdrawalAmount: WITHDRAWAL_CONFIG.minAmount,
+        feeRateBalance: WITHDRAWAL_CONFIG.feeRateBalance
+      }
+    }
+  })
+
+  // 获取托管余额日志
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      actionType?: string
+      frozen?: string
+      search?: string
+    }
+  }>('/logs', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; actionType?: string; frozen?: string; search?: string } }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '30', actionType, frozen, search } = request.query
+
+    const safePageSize = Math.min(Number(pageSize) || 30, 100)
+    const pageNum = Number(page) || 1
+    const skip = (pageNum - 1) * safePageSize
+
+    // 构建基础查询条件
+    const baseWhere: any = { userId: user.id }
+    if (actionType) {
+      baseWhere.actionType = actionType
+    }
+    if (frozen === 'true') {
+      baseWhere.frozen = true
+    } else if (frozen === 'false') {
+      baseWhere.frozen = false
+    }
+
+    // 搜索条件处理：在数据库层面进行搜索，而非内存过滤
+    let where: any = baseWhere
+
+    if (search && search.trim()) {
+      const searchTerm = search.trim()
+
+      // 查找匹配搜索条件的实例 ID（限制在当前托管商的宿主机上）
+      const matchedInstances = await prisma.instance.findMany({
+        where: {
+          host: { userId: user.id }, // 只搜索当前托管商宿主机上的实例
+          OR: [
+            { name: { contains: searchTerm, mode: 'insensitive' } },
+            { user: { username: { contains: searchTerm, mode: 'insensitive' } } },
+            { user: { email: { contains: searchTerm, mode: 'insensitive' } } },
+            { host: { name: { contains: searchTerm, mode: 'insensitive' } } },
+            { package: { name: { contains: searchTerm, mode: 'insensitive' } } },
+            { packagePlan: { name: { contains: searchTerm, mode: 'insensitive' } } }
+          ]
+        },
+        select: { id: true }
+      })
+      const matchedInstanceIds = matchedInstances.map(i => i.id)
+
+      // 构建搜索条件：remark 包含搜索词 OR relatedId 在匹配的实例 ID 中 OR 快照字段匹配
+      where = {
+        ...baseWhere,
+        OR: [
+          { remark: { contains: searchTerm, mode: 'insensitive' } },
+          // 匹配现存实例
+          ...(matchedInstanceIds.length > 0 ? [
+            {
+              type: { in: ['income', 'deduction'] },
+              relatedId: { in: matchedInstanceIds }
+            }
+          ] : []),
+          // 匹配快照字段（实例已删除的情况）
+          { snapshotBuyerName: { contains: searchTerm, mode: 'insensitive' } },
+          { snapshotBuyerEmail: { contains: searchTerm, mode: 'insensitive' } },
+          { snapshotInstanceName: { contains: searchTerm, mode: 'insensitive' } }
+        ]
+      }
+    }
+
+    const [logs, total] = await Promise.all([
+      prisma.hostingBalanceLog.findMany({
+        where,
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: safePageSize,
+        select: {
+          id: true,
+          type: true,
+          actionType: true,
+          amount: true,
+          frozen: true,
+          unfreezeAt: true,
+          relatedId: true,
+          remark: true,
+          createdAt: true,
+          // 快照字段
+          snapshotBuyerName: true,
+          snapshotBuyerEmail: true,
+          snapshotBuyerAvatar: true,
+          snapshotInstanceName: true,
+          snapshotHostName: true,
+          snapshotPackageName: true,
+          snapshotPlanName: true
+        }
+      }),
+      prisma.hostingBalanceLog.count({ where })
+    ])
+
+    // 收集所有实例ID（income/deduction 类型的 relatedId 是实例ID）
+    const instanceIds = logs
+      .filter(log => ['income', 'deduction'].includes(log.type) && log.relatedId)
+      .map(log => log.relatedId!)
+
+    // 批量查询实例及关联信息
+    const instances = instanceIds.length > 0 ? await prisma.instance.findMany({
+      where: { id: { in: instanceIds } },
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            email: true,
+            avatarStyle: true,
+            avatarBadgeId: true
+          }
+        },
+        host: {
+          select: {
+            id: true,
+            name: true
+          }
+        },
+        package: {
+          select: {
+            id: true,
+            name: true
+          }
+        },
+        packagePlan: {
+          select: {
+            id: true,
+            name: true
+          }
+        }
+      }
+    }) : []
+
+    // 构建实例ID到实例信息的映射
+    const instanceMap = new Map(instances.map(i => [i.id, i]))
+
+    return {
+      logs: logs.map(log => {
+        const instance = ['income', 'deduction'].includes(log.type) && log.relatedId
+          ? instanceMap.get(log.relatedId)
+          : null
+
+        // 构建实例信息：优先使用实际实例，否则使用快照兜底
+        let instanceData = null
+        if (instance) {
+          // 实例存在，使用实际数据
+          instanceData = {
+            id: instance.id,
+            name: instance.name,
+            deleted: false,
+            buyer: {
+              id: instance.user.id,
+              username: instance.user.username,
+              email: instance.user.email,
+              avatarStyle: instance.user.avatarStyle,
+              avatarBadgeId: instance.user.avatarBadgeId ?? null
+            },
+            host: {
+              id: instance.host.id,
+              name: instance.host.name
+            },
+            package: instance.package ? {
+              id: instance.package.id,
+              name: instance.package.name
+            } : null,
+            plan: instance.packagePlan ? {
+              id: instance.packagePlan.id,
+              name: instance.packagePlan.name
+            } : null
+          }
+        } else if (['income', 'deduction'].includes(log.type) && log.relatedId) {
+          // 实例已删除，使用快照兜底
+          instanceData = {
+            id: log.relatedId,
+            name: log.snapshotInstanceName || '',
+            deleted: true,
+            buyer: {
+              id: 0,
+              username: log.snapshotBuyerName || '',
+              email: log.snapshotBuyerEmail || null,
+              avatarStyle: log.snapshotBuyerAvatar || 'bigSmile',
+              avatarBadgeId: null
+            },
+            host: {
+              id: 0,
+              name: log.snapshotHostName || ''
+            },
+            package: log.snapshotPackageName ? {
+              id: 0,
+              name: log.snapshotPackageName
+            } : null,
+            plan: log.snapshotPlanName ? {
+              id: 0,
+              name: log.snapshotPlanName
+            } : null
+          }
+        }
+
+        return {
+          id: log.id,
+          type: log.type,
+          actionType: log.actionType,
+          amount: Number(log.amount),
+          frozen: log.frozen,
+          unfreezeAt: log.unfreezeAt?.toISOString() || null,
+          relatedId: log.relatedId,
+          remark: log.remark,
+          createdAt: log.createdAt.toISOString(),
+          // 关联的实例信息
+          instance: instanceData
+        }
+      }),
+      total,
+      page: pageNum,
+      pageSize: safePageSize
+    }
+  })
+
+  // ==================== 提现申请 ====================
+
+  // 申请提现（仅支持提现到面板余额）
+  fastify.post<{
+    Body: {
+      amount: number
+    }
+  }>('/withdraw', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['amount'],
+        properties: {
+          amount: { type: 'number', minimum: WITHDRAWAL_CONFIG.minAmount }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { amount } = request.body
+
+    // 验证提现金额
+    if (amount < WITHDRAWAL_CONFIG.minAmount) {
+      return reply.code(400).send({ 
+        error: `最低提现金额为 ¥${WITHDRAWAL_CONFIG.minAmount}`,
+        code: 'AMOUNT_TOO_LOW'
+      })
+    }
+
+    // 计算手续费
+    const feeRate = WITHDRAWAL_CONFIG.feeRateBalance
+    const feeAmount = Number((amount * feeRate).toFixed(2))
+    const actualAmount = amount - feeAmount
+
+    let withdrawal: Awaited<ReturnType<typeof prisma.hostingWithdrawal.create>>
+    try {
+      // 执行事务
+      withdrawal = await prisma.$transaction(async (tx) => {
+        const locked = await tryAdvisoryTransactionLock(tx, HOSTING_BALANCE_LOG_LOCK_NAMESPACE, user.id)
+        if (!locked) {
+          throw new Error('托管余额正在处理，请稍后重试')
+        }
+
+        // 扣减托管余额
+        const deductResult = await tx.user.updateMany({
+          where: {
+            id: user.id,
+            hostingBalance: { gte: amount }
+          },
+          data: { hostingBalance: { decrement: amount } }
+        })
+        if (deductResult.count === 0) {
+          throw new Error('可用托管余额不足')
+        }
+
+        // 创建提现记录
+        const record = await tx.hostingWithdrawal.create({
+          data: {
+            userId: user.id,
+            amount,
+            feeRate,
+            feeAmount,
+            actualAmount,
+            target: 'balance',
+            status: 'completed',
+            processedAt: new Date()
+          }
+        })
+
+        // 获取当前面板余额
+        const currentUser = await tx.user.findUnique({
+          where: { id: user.id },
+          select: { balance: true }
+        })
+        const oldBalance = Number(currentUser?.balance || 0)
+        const newBalance = oldBalance + actualAmount
+
+        await tx.user.update({
+          where: { id: user.id },
+          data: { balance: { increment: actualAmount } }
+        })
+
+        // 记录面板余额日志
+        await tx.balanceLog.create({
+          data: {
+            userId: user.id,
+            type: 'hosting_withdraw',
+            amount: actualAmount,
+            balanceBefore: oldBalance,
+            balanceAfter: newBalance,
+            remark: `托管余额提现（手续费 ${feeRate * 100}%: ¥${feeAmount.toFixed(2)}）`
+          }
+        })
+
+        // 记录托管余额日志
+        await tx.hostingBalanceLog.create({
+          data: {
+            userId: user.id,
+            type: 'withdraw',
+            actionType: 'withdraw',
+            amount: -amount,
+            frozen: false,
+            relatedId: record.id,
+            remark: `提现到面板余额 ¥${actualAmount.toFixed(2)}（手续费 ¥${feeAmount.toFixed(2)}）`
+          }
+        })
+
+        return record
+      })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      if (message.includes('正在处理')) {
+        return reply.code(409).send({ error: message, code: 'HOSTING_BALANCE_BUSY' })
+      }
+      if (message.includes('余额不足')) {
+        return reply.code(400).send({ error: message, code: 'INSUFFICIENT_BALANCE' })
+      }
+      throw error
+    }
+
+    await createLog(
+      user.id,
+      'hosting',
+      'hosting.withdraw',
+      `Withdrawal to balance: amount=${amount}, actualAmount=${actualAmount}`,
+      'success'
+    )
+
+    return {
+      message: '提现成功',
+      withdrawal: {
+        id: withdrawal.id,
+        amount: Number(withdrawal.amount),
+        feeRate: Number(withdrawal.feeRate),
+        feeAmount: Number(withdrawal.feeAmount),
+        actualAmount: Number(withdrawal.actualAmount),
+        target: withdrawal.target,
+        status: withdrawal.status,
+        createdAt: withdrawal.createdAt.toISOString()
+      }
+    }
+  })
+
+  // 获取提现记录
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      status?: string
+    }
+  }>('/withdrawals', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string; status?: string } }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', status } = request.query
+
+    const safePageSize = Math.min(Number(pageSize) || 20, 100)
+    const pageNum = Number(page) || 1
+    const skip = (pageNum - 1) * safePageSize
+
+    const where: any = { userId: user.id }
+    if (status) {
+      where.status = status
+    }
+
+    const [records, total] = await Promise.all([
+      prisma.hostingWithdrawal.findMany({
+        where,
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: safePageSize
+      }),
+      prisma.hostingWithdrawal.count({ where })
+    ])
+
+    return {
+      records: records.map(r => ({
+        id: r.id,
+        amount: Number(r.amount),
+        feeRate: Number(r.feeRate),
+        feeAmount: Number(r.feeAmount),
+        actualAmount: Number(r.actualAmount),
+        target: r.target,
+        status: r.status,
+        rejectReason: r.rejectReason,
+        processedAt: r.processedAt?.toISOString() || null,
+        createdAt: r.createdAt.toISOString()
+      })),
+      total,
+      page: pageNum,
+      pageSize: safePageSize
+    }
+  })
+
+  // ==================== 托管统计 ====================
+
+  // 获取托管统计（我的节点收益概览）
+  fastify.get('/stats', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const { user } = request
+
+    // 我托管的节点数量
+    const myHostsCount = await prisma.host.count({
+      where: { userId: user.id }
+    })
+
+    // 我托管的节点上的实例数量（排除已删除的实例）
+    const instancesOnMyHosts = await prisma.instance.count({
+      where: {
+        host: { userId: user.id },
+        status: { not: 'deleted' }
+      }
+    })
+
+    // 统计独立客户数：在我节点上购买过实例的去重用户数
+    const uniqueCustomerGroups = await prisma.instance.groupBy({
+      by: ['userId'],
+      where: {
+        host: { userId: user.id },
+        userId: { not: user.id } // 排除宿主机所有者自己
+      }
+    })
+    const uniqueCustomersCount = uniqueCustomerGroups.length
+
+    // 本月收入
+    const now = new Date()
+    const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
+    const monthIncome = await prisma.hostingBalanceLog.aggregate({
+      where: {
+        userId: user.id,
+        type: 'income',
+        createdAt: { gte: monthStart }
+      },
+      _sum: { amount: true }
+    })
+
+    // 累计托管总收入（用于VIP等级计算）
+    const totalHostingIncome = await prisma.hostingBalanceLog.aggregate({
+      where: {
+        userId: user.id,
+        type: 'income'
+      },
+      _sum: { amount: true }
+    })
+
+    // 获取最近的收入记录
+    const recentIncome = await prisma.hostingBalanceLog.findMany({
+      where: {
+        userId: user.id,
+        type: 'income'
+      },
+      orderBy: { createdAt: 'desc' },
+      take: 5,
+      select: {
+        id: true,
+        amount: true,
+        relatedId: true,
+        remark: true,
+        createdAt: true
+      }
+    })
+
+    // 计算VIP等级（基于后台配置的托管 VIP 规则）
+    const totalIncome = Number(totalHostingIncome._sum.amount || 0)
+    const vipRules = await getVipRules('hosting')
+    const vipLevel = calculateVipLevel('hosting', vipRules, {
+      totalHostingIncome: totalIncome,
+      instanceCount: instancesOnMyHosts
+    })
+    const vipBadgeStyle = getVipBadgeStyleForLevel(vipRules, 'hosting', vipLevel)
+
+    return {
+      stats: {
+        myHostsCount,
+        instancesOnMyHosts,
+        uniqueCustomersCount,
+        monthIncome: Number(monthIncome._sum.amount || 0),
+        vipLevel,
+        vipBadgeStyle
+      },
+      recentIncome: recentIncome.map(r => ({
+        id: r.id,
+        amount: Number(r.amount),
+        instanceId: r.relatedId,
+        remark: r.remark,
+        createdAt: r.createdAt.toISOString()
+      }))
+    }
+  })
+
+}
diff --git a/server/src/routes/hosts.ts b/server/src/routes/hosts.ts
new file mode 100644
index 0000000..ae99409
--- /dev/null
+++ b/server/src/routes/hosts.ts
@@ -0,0 +1,8102 @@
+/**
+ * 宿主机管理路由 (管理员)
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import { readFileSync } from 'fs'
+import { randomUUID } from 'crypto'
+import { join } from 'path'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+import { Agent, request as undiciRequest } from 'undici'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { checkHostingAccess } from '../lib/hosting-access.js'
+import { createInboxMessage } from '../db/inbox.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode, type ErrorCodeType } from '../lib/errors.js'
+import { createInstanceTask, getActiveTaskForInstance } from '../db/instance-tasks.js'
+import { getSSHKeyById, getSSHKeysByUserId } from '../db/ssh-keys.js'
+import { getEnabledCommandsByDistro, validateCommandsOwnership } from '../db/custom-init-commands.js'
+import { IncusClient, getIncusClient, removeIncusClient } from '../lib/incus/index.js'
+import { listStoragePools, getStoragePoolResources, createStoragePool, deleteStoragePool, updateStoragePool } from '../lib/incus/incus-storage.js'
+import type { CreateHostRequest, UpdateHostRequest } from '../types/api.js'
+import type { Host } from '../types/database.js'
+import { validateName, validateUrl, validateIpAddress, validateIdentifier, validateIpOrDomain, encryptSensitiveData } from '../lib/security.js'
+import { sendNotification } from '../lib/notifier.js'
+import { sendReleaseNotification } from '../lib/release-notifier.js'
+import { createCaddyClient } from '../lib/caddy-client.js'
+import { normalizeArchitecture } from '../lib/architecture.js'
+import { generateIncusConfig } from '../lib/incus-config-generator.js'
+import { sendAdminInstanceCreatedEmail, sendRenewalPriceUpdatedEmail } from '../lib/mailer.js'
+import { generateRandomIPv4, generateRandomIPv6 } from '../lib/ip-calculator.js'
+import { calculateCreateBilling } from '../db/billing-operations.js'
+import { getDnsRecordType } from '../lib/network-address.js'
+import { resolveInstanceTrafficLimitForHost } from '../lib/traffic-multiplier.js'
+import { issueHostAgentInstallToken } from '../lib/host-agent-credentials.js'
+import {
+  persistResolvedInstanceNetworkAddresses,
+  resolveInstanceNetworkAddresses
+} from '../lib/instance-network-sync.js'
+import {
+  HostAddressRegistryError,
+  logHostAddressResolutionFailure,
+  persistHostAddressSnapshot,
+  prepareHostAddressSnapshotForWrite,
+  withHostAddressRegistryLock
+} from '../services/host-address-monitor.js'
+import {
+  getSystemImageAvailabilityForHost,
+  isImageCompatibleWithInstanceType,
+  isImageCompatibleWithMemory,
+  isValidSystemImage
+} from '../db/images.js'
+import {
+  BUILTIN_AUDIT_RULES,
+  type AuditFindingTarget,
+  type AuditRuleDefinition,
+  type AuditRuleMatchType,
+  type AuditRuleTarget,
+  type AuditSeverity,
+  analyzeAuditData,
+  buildConnectionAuditCommand,
+  buildProcessAuditCommand,
+  buildStartupAuditCommand,
+  parseConnections,
+  parseProcesses,
+  parseStartupItems
+} from '../lib/instance-audit.js'
+import { provisionManagedInstanceAsync } from '../lib/managed-instance-provision.js'
+import crypto from 'crypto'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const AUDIT_SEVERITIES = new Set<AuditSeverity>(['info', 'low', 'medium', 'high'])
+const AUDIT_TARGETS = new Set<AuditRuleTarget>(['process', 'network', 'startup'])
+const AUDIT_MATCH_TYPES = new Set<AuditRuleMatchType>(['contains', 'regex', 'exact'])
+const AUDIT_FINDING_TARGETS = new Set<AuditFindingTarget>(['process', 'network', 'startup', 'capability'])
+
+function normalizeAuditSeverity(value: unknown): AuditSeverity {
+  return AUDIT_SEVERITIES.has(value as AuditSeverity) ? value as AuditSeverity : 'medium'
+}
+
+function normalizeAuditMatchType(value: unknown): AuditRuleMatchType {
+  return AUDIT_MATCH_TYPES.has(value as AuditRuleMatchType) ? value as AuditRuleMatchType : 'contains'
+}
+
+function normalizeAuditTargetTypes(value: unknown): AuditRuleTarget[] {
+  const items = Array.isArray(value) ? value : []
+  const targets = items.filter(item => AUDIT_TARGETS.has(item as AuditRuleTarget)) as AuditRuleTarget[]
+  return targets.length > 0 ? Array.from(new Set(targets)) : ['process']
+}
+
+function normalizeAuditFindingTarget(value: unknown): AuditFindingTarget | null {
+  return AUDIT_FINDING_TARGETS.has(value as AuditFindingTarget) ? value as AuditFindingTarget : null
+}
+
+function validateAuditRegex(matchType: AuditRuleMatchType, pattern: string): void {
+  if (matchType !== 'regex') return
+  new RegExp(pattern)
+}
+
+function toCustomAuditRuleDefinition(rule: any): AuditRuleDefinition {
+  return {
+    id: `custom:${rule.id}`,
+    severity: normalizeAuditSeverity(rule.severity),
+    category: rule.category || 'custom',
+    name: rule.name,
+    description: rule.description || null,
+    targetTypes: normalizeAuditTargetTypes(rule.targetTypes),
+    matchType: normalizeAuditMatchType(rule.matchType),
+    patternText: rule.pattern,
+    caseSensitive: Boolean(rule.caseSensitive),
+    source: 'custom',
+    enabled: Boolean(rule.enabled),
+    recommendation: rule.recommendation || null
+  }
+}
+
+function findBuiltinAuditRule(ruleId: string): AuditRuleDefinition | undefined {
+  return BUILTIN_AUDIT_RULES.find(rule => rule.id === ruleId)
+}
+
+function applyBuiltinAuditRuleOverride(rule: AuditRuleDefinition, override?: any): AuditRuleDefinition {
+  if (!override) return rule
+  return {
+    ...rule,
+    severity: normalizeAuditSeverity(override.severity),
+    category: override.category || rule.category,
+    name: override.name || rule.name,
+    description: override.description ?? rule.description ?? null,
+    targetTypes: normalizeAuditTargetTypes(override.targetTypes),
+    matchType: normalizeAuditMatchType(override.matchType),
+    patternText: override.pattern || rule.patternText,
+    caseSensitive: Boolean(override.caseSensitive),
+    enabled: Boolean(override.enabled),
+    recommendation: override.recommendation ?? rule.recommendation ?? null
+  }
+}
+
+function toAuditRuleResponse(rule: any, hostId: number) {
+  if (rule.source === 'builtin') {
+    const override = rule.override || null
+    const { original, override: _override, patternText, ...publicRule } = rule
+    return {
+      ...publicRule,
+      pattern: patternText,
+      readOnly: true,
+      scope: 'builtin',
+      originalName: original?.name || rule.name,
+      originalSeverity: original?.severity || rule.severity,
+      originalCategory: original?.category || rule.category,
+      originalTargetTypes: original?.targetTypes || rule.targetTypes,
+      originalMatchType: original?.matchType || rule.matchType,
+      originalPattern: original?.patternText || patternText,
+      originalCaseSensitive: original?.caseSensitive ?? rule.caseSensitive,
+      originalRecommendation: original?.recommendation ?? rule.recommendation ?? null,
+      overridden: Boolean(override),
+      overrideId: override?.id || null,
+      overrideUpdatedAt: override?.updatedAt || null
+    }
+  }
+
+  return {
+    id: rule.id,
+    ruleId: `custom:${rule.id}`,
+    source: 'custom',
+    readOnly: false,
+    scope: rule.hostId === null ? 'global' : (rule.hostId === hostId ? 'host' : 'global'),
+    hostId: rule.hostId,
+    name: rule.name,
+    description: rule.description,
+    severity: rule.severity,
+    category: rule.category,
+    targetTypes: normalizeAuditTargetTypes(rule.targetTypes),
+    matchType: rule.matchType,
+    pattern: rule.pattern,
+    caseSensitive: rule.caseSensitive,
+    recommendation: rule.recommendation,
+    enabled: rule.enabled,
+    createdAt: rule.createdAt,
+    updatedAt: rule.updatedAt
+  }
+}
+
+async function getAuthorizedOpsHost(hostId: number, user: { id: number; role: string }) {
+  const host = await db.getHostById(hostId)
+  if (!host) return { host: null, error: apiError(ErrorCode.HOST_NOT_FOUND), status: 404 }
+  if (host.user_id !== user.id && user.role !== 'admin') {
+    return { host: null, error: apiError(ErrorCode.FORBIDDEN), status: 403 }
+  }
+  return { host, error: null, status: 200 }
+}
+
+async function getAuditRuleDefinitions(hostId: number): Promise<AuditRuleDefinition[]> {
+  const [customRules, builtinOverrides] = await Promise.all([
+    prisma.instanceAuditRule.findMany({
+      where: {
+        enabled: true,
+        OR: [
+          { hostId: null },
+          { hostId }
+        ]
+      },
+      orderBy: [
+        { hostId: 'asc' },
+        { id: 'asc' }
+      ]
+    }),
+    prisma.instanceAuditBuiltinRuleOverride.findMany({
+      where: { hostId }
+    })
+  ])
+  const overrideByRuleId = new Map(builtinOverrides.map(override => [override.builtinRuleId, override]))
+  const builtinRules = BUILTIN_AUDIT_RULES
+    .map(rule => applyBuiltinAuditRuleOverride(rule, overrideByRuleId.get(rule.id)))
+    .filter(rule => rule.enabled)
+
+  return [
+    ...builtinRules,
+    ...customRules.map(toCustomAuditRuleDefinition)
+  ]
+}
+
+async function getAuditRuleResponses(hostId: number) {
+  const [customRules, builtinOverrides] = await Promise.all([
+    prisma.instanceAuditRule.findMany({
+      where: {
+        OR: [
+          { hostId: null },
+          { hostId }
+        ]
+      },
+      orderBy: [
+        { hostId: 'asc' },
+        { id: 'desc' }
+      ]
+    }),
+    prisma.instanceAuditBuiltinRuleOverride.findMany({
+      where: { hostId }
+    })
+  ])
+  const overrideByRuleId = new Map(builtinOverrides.map(override => [override.builtinRuleId, override]))
+  const builtin = BUILTIN_AUDIT_RULES.map(rule => {
+    const override = overrideByRuleId.get(rule.id)
+    const applied = applyBuiltinAuditRuleOverride(rule, override)
+    return toAuditRuleResponse({
+      ...applied,
+      original: rule,
+      override
+    }, hostId)
+  })
+
+  return {
+    builtin,
+    custom: customRules.map(rule => toAuditRuleResponse(rule, hostId))
+  }
+}
+
+async function getAuditIgnores(hostId: number, instanceId: number) {
+  return prisma.instanceAuditIgnore.findMany({
+    where: {
+      hostId,
+      enabled: true,
+      OR: [
+        { instanceId: null },
+        { instanceId }
+      ]
+    },
+    select: {
+      id: true,
+      ruleId: true,
+      targetType: true,
+      matchText: true,
+      reason: true,
+      expiresAt: true
+    }
+  })
+}
+
+function normalizeProcessText(value: string): string {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+async function generateUniqueOwnedName(
+  tx: any,
+  model: 'host' | 'package',
+  userId: number,
+  baseName: string
+): Promise<string> {
+  const MAX_OWNED_NAME_LENGTH = 64
+
+  const findExisting = async (candidate: string) => {
+    if (model === 'host') {
+      return tx.host.findFirst({
+        where: { userId, name: candidate },
+        select: { id: true }
+      })
+    }
+
+    return tx.package.findFirst({
+      where: { userId, name: candidate },
+      select: { id: true }
+    })
+  }
+
+  const normalizedBaseName = String(baseName || '').trim()
+  const truncateWithSuffix = (suffixText = '') => {
+    if (!suffixText) {
+      return normalizedBaseName.slice(0, MAX_OWNED_NAME_LENGTH)
+    }
+
+    const baseMaxLength = Math.max(1, MAX_OWNED_NAME_LENGTH - suffixText.length)
+    return `${normalizedBaseName.slice(0, baseMaxLength)}${suffixText}`
+  }
+
+  const currentCandidate = truncateWithSuffix()
+  const currentNameTaken = await findExisting(currentCandidate)
+  if (!currentNameTaken) {
+    return currentCandidate
+  }
+
+  let suffix = 1
+  while (true) {
+    const suffixText = suffix === 1 ? '-official' : `-official-${suffix}`
+    const candidate = truncateWithSuffix(suffixText)
+    const existing = await findExisting(candidate)
+    if (!existing) {
+      return candidate
+    }
+    suffix++
+  }
+}
+
+/**
+ * 从 Incus resources 数据中提取宿主机的公网 IPv6 地址
+ * 遍历网卡的地址列表，查找 scope=global 的 IPv6 地址
+ * 排除 link-local (fe80::) 和 unique-local (fd/fc) 地址
+ */
+function extractHostPublicIpv6FromResources(resources: Record<string, unknown>): string | null {
+  try {
+    const network = resources.network as { cards?: Array<{ addresses?: Array<{ address?: string; family?: string; scope?: string }>; ports?: Array<{ addresses?: Array<{ address?: string; family?: string; scope?: string }> }> }> } | undefined
+    if (!network?.cards) return null
+
+    for (const card of network.cards) {
+      // 直接检查网卡地址
+      const addresses = card.addresses || []
+      for (const addr of addresses) {
+        if (addr.family === 'inet6' && addr.scope === 'global' && addr.address) {
+          const ip = addr.address
+          // 排除 link-local、unique-local 地址
+          if (!ip.startsWith('fe80:') && !ip.startsWith('fd') && !ip.startsWith('fc')) {
+            return ip
+          }
+        }
+      }
+      // 检查端口上的地址
+      if (card.ports) {
+        for (const port of card.ports) {
+          const portAddresses = port.addresses || []
+          for (const addr of portAddresses) {
+            if (addr.family === 'inet6' && addr.scope === 'global' && addr.address) {
+              const ip = addr.address
+              if (!ip.startsWith('fe80:') && !ip.startsWith('fd') && !ip.startsWith('fc')) {
+                return ip
+              }
+            }
+          }
+        }
+      }
+    }
+  } catch {
+    // 忽略解析失败
+  }
+  return null
+}
+
+/**
+ * 从请求上下文推导面板访问地址
+ * 优先级：FRONTEND_URL 环境变量 > Origin/Referer 头 > Host 头拼接
+ */
+function derivePanelUrl(request: FastifyRequest): string {
+  // 1. 优先使用 FRONTEND_URL 环境变量（管理员显式配置的）
+  if (process.env.FRONTEND_URL) {
+    let envUrl = process.env.FRONTEND_URL.split(',')[0].trim()
+    // 清理可能误填的双协议头例如 https://https://
+    envUrl = envUrl.replace(/^https?:\/\/(https?:\/\/)/, '$1')
+    // 移除末尾的斜杠
+    envUrl = envUrl.replace(/\/+$/, '')
+    
+    if (envUrl && envUrl !== 'https://incudal.com') {
+      return envUrl
+    }
+  }
+
+  // 2. 从 Referer 头推导（用户通过面板页面下载时会带上）
+  const referer = request.headers.referer || request.headers.origin
+  if (referer) {
+    try {
+      const url = new URL(Array.isArray(referer) ? referer[0] : referer)
+      return `${url.protocol}//${url.host}`
+    } catch { /* 忽略解析失败 */ }
+  }
+
+  // 3. 从 Host 头拼接（curl 直接下载时会有）
+  const host = request.headers.host
+  if (host) {
+    let proto = request.headers['x-forwarded-proto'] || 'http'
+    let protocol = Array.isArray(proto) ? proto[0] : proto
+    protocol = protocol.replace(/:\/\/$/, '') // 清理可能的畸形协议头
+    return `${protocol}://${host}`
+  }
+
+  // 4. 兑底默认值
+  return 'https://incudal.com'
+}
+
+function shellDoubleQuote(value: string): string {
+  return value
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\$/g, '\\$')
+    .replace(/`/g, '\\`')
+}
+
+function injectInstallVariable(script: string, name: string, value: string): string {
+  return script.replace(
+    new RegExp(`^${name}=""`, 'm'),
+    () => `${name}="${shellDoubleQuote(value)}"`
+  )
+}
+
+function buildHostInstallCommand(panelUrl: string, installToken: string): string {
+  return `curl -sL ${panelUrl}/api/hosts/install.sh/${installToken} -o incudal.sh && sudo bash incudal.sh`
+}
+
+export default async function hostRoutes(fastify: FastifyInstance) {
+  // 获取宿主机列表（支持分页和搜索）
+  // 管理员可以看所有节点，普通用户只能看自己的节点 (mine=true)
+  // 管理员可用参数：
+  //   - scope: mine(我的) / official(自营) / hosted(托管的)
+  //   - userId: 筛选特定用户（仅 scope=hosted 时有效）
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      mine?: string
+      scope?: string  // mine | official | hosted
+      userId?: string // 筛选特定用户
+    }
+  }>('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      mine?: string
+      scope?: string
+      userId?: string
+    }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', search = '', mine, scope, userId: filterUserId } = request.query
+
+    // 管理员可以查看系统内所有节点
+    // 普通用户只能查看自己的节点（必须传 mine=true）
+    const isAdmin = user.role === 'admin'
+    
+    if (!isAdmin && mine !== 'true') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 管理员专用：scope 参数处理
+    let queryUserId: number | undefined = undefined
+    let ownerRole: 'admin' | 'user' | undefined = undefined
+    let includeOwner = false
+
+    if (isAdmin && scope === 'hosted') {
+      // 查看托管节点：仅显示普通用户的节点
+      ownerRole = 'user'
+      includeOwner = true
+      // 如果指定了筛选用户
+      if (filterUserId) {
+        const filterUid = parseInt(filterUserId, 10)
+        if (!isNaN(filterUid) && filterUid !== user.id) {
+          queryUserId = filterUid
+        }
+      }
+    } else if (isAdmin && scope === 'official') {
+      // 查看自营节点：所有管理员账号名下的节点都视为官方自营
+      ownerRole = 'admin'
+    } else if (isAdmin && scope === 'mine') {
+      // 管理员查看自己账号名下的节点
+      queryUserId = user.id
+    } else if (!isAdmin) {
+      // 普通用户只能看自己的
+      queryUserId = user.id
+    }
+    // 管理员不传 scope 时，默认查看所有节点（向后兼容）
+
+    const result = await db.getHostsPaginated({
+      page: parseInt(page, 10),
+      pageSize: parseInt(pageSize, 10),
+      search,
+      userId: queryUserId,
+      ownerRole,
+      includeOwner
+    })
+
+    // 获取每个宿主机的实例数量
+    const hostsWithCount = await Promise.all(result.items.map(async (h: unknown) => {
+      const host = h as {
+        id: number
+        name: string
+        url: string
+        status: string
+        location: string | null
+        country_code: string
+        architecture?: 'x86_64' | 'aarch64'
+        tags?: string
+        cert_path?: string | null
+        key_path?: string | null
+        cpu_used: number
+        memory_used: number
+        disk_total: number // 计算值
+        disk_used: number
+        cpu_allowance_max?: number
+        memory_max?: number
+        instance_type?: string
+        storage_size?: number
+        nat_public_ip?: string | null
+        nat_public_ipv6?: string | null
+        nat_bind_ip?: string | null
+        nat_bind_ipv6?: string | null
+        nat_port_start?: number | null
+        nat_port_end?: number | null
+        nat_ports_used_count?: number
+        user_id?: number
+        owner?: {
+          id: number
+          username: string
+          email: string | null
+          avatarStyle: string
+          avatarBadgeId?: string | null
+        }
+      }
+      const instanceCount = await db.getInstanceCountByHost(host.id)
+      return {
+        id: host.id,
+        name: host.name,
+        url: host.url,
+        status: host.status,
+        maintenance: host.status === 'maintenance',
+        location: host.location,
+        countryCode: host.country_code || 'us',
+        architecture: host.architecture || 'x86_64',
+        tags: typeof host.tags === 'string' ? JSON.parse(host.tags || '[]') : (host.tags || []),
+        // certPath and keyPath are sensitive - removed from response
+        resources: {
+          cpuUsed: host.cpu_used,
+          memoryUsed: host.memory_used,
+          diskTotal: host.disk_total, // 计算值，来自 storage_size * 1024
+          diskUsed: host.disk_used
+        },
+        cpuAllowanceMax: host.cpu_allowance_max || 0,
+        memoryMax: host.memory_max || 0,
+        instanceType: host.instance_type || 'container',
+        instanceCount,
+        natConfig: {
+          publicIp: host.nat_public_ip,
+          publicIpv6: host.nat_public_ipv6,
+          bindIp: (host as any).nat_bind_ip || null,
+          bindIpv6: (host as any).nat_bind_ipv6 || null,
+          portRangeStart: host.nat_port_start,
+          portRangeEnd: host.nat_port_end,
+          portsUsedCount: host.nat_ports_used_count || 0
+        },
+        // 托管节点所有者信息
+        ...(host.owner && {
+          owner: {
+            id: host.owner.id,
+            username: host.owner.username,
+            email: host.owner.email,
+            avatarStyle: host.owner.avatarStyle,
+            avatarBadgeId: host.owner.avatarBadgeId ?? null
+          }
+        })
+      }
+    }))
+
+    return {
+      hosts: hostsWithCount,
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      totalPages: result.totalPages
+    }
+  })
+
+  // 添加宿主机（管理员或满足准入条件的用户）
+  fastify.post<{
+    Body: CreateHostRequest & {
+      tags?: string[]
+      natConfig?: { publicIp?: string; publicIpv6?: string; bindIp?: string; bindIpv6?: string; portRangeStart?: number; portRangeEnd?: number }
+      ipAddress?: string
+      storageDriver?: 'zfs' | 'lvm'
+      storageType?: 'loop' | 'disk'
+      storagePath?: string
+      storageSize?: number
+      ipv6Mode?: number
+      ipv6Subnet?: string
+      ipv6Gateway?: string
+      ipv6ParentInterface?: string
+      cpuAllowanceMax?: number
+      memoryMax?: number
+      instanceType?: 'container' | 'vm' | 'both'
+    }
+  }>('/', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'url'],
+        properties: {
+          name: { type: 'string', minLength: 2 },
+          url: { type: 'string' },
+          location: { type: 'string' },
+          countryCode: { type: 'string', minLength: 2, maxLength: 2 },
+          tags: { type: 'array', items: { type: 'string' } },
+          certPath: { type: 'string' },
+          keyPath: { type: 'string' },
+          natConfig: {
+            type: 'object',
+            properties: {
+              publicIp: { type: 'string' },
+              publicIpv6: { type: 'string' },
+              bindIp: { type: 'string' },
+              bindIpv6: { type: 'string' },
+              portRangeStart: { type: 'integer' },
+              portRangeEnd: { type: 'integer' }
+            }
+          },
+          ipAddress: { type: 'string' },
+          storageDriver: { type: 'string', enum: ['zfs', 'lvm'] },
+          storageType: { type: 'string', enum: ['loop', 'disk'] },
+          storagePath: { type: 'string' },
+          storageSize: { type: 'integer' },
+          ipv6Mode: { type: 'integer' },
+          ipv6Subnet: { type: 'string' },
+          ipv6Gateway: { type: 'string' },
+          ipv6ParentInterface: { type: 'string' },
+          cpuAllowanceMax: { type: 'integer' },
+          memoryMax: { type: 'integer' },
+          instanceType: { type: 'string', enum: ['container', 'vm', 'both'] }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Body: CreateHostRequest & {
+      tags?: string[]
+      natConfig?: { publicIp?: string; publicIpv6?: string; bindIp?: string; bindIpv6?: string; portRangeStart?: number; portRangeEnd?: number }
+      ipAddress?: string
+      storageDriver?: 'zfs' | 'lvm'
+      storageType?: 'loop' | 'disk'
+      storagePath?: string
+      storageSize?: number
+      ipv6Mode?: number
+      ipv6Subnet?: string
+      ipv6Gateway?: string
+      ipv6ParentInterface?: string
+      cpuAllowanceMax?: number
+      memoryMax?: number
+      instanceType?: 'container' | 'vm' | 'both'
+    }
+  }>, reply: FastifyReply) => {
+    const {
+      name, url, location, countryCode, tags, certPath, keyPath, natConfig,
+      ipAddress, storageDriver, storageType, storagePath, storageSize, ipv6Mode, ipv6Subnet, ipv6Gateway, ipv6ParentInterface,
+      cpuAllowanceMax, memoryMax, instanceType
+    } = request.body
+
+    // Validate input (prevent dangerous character injection)
+    // 使用 validateIdentifier 确保主机名只包含安全字符 [a-zA-Z0-9_-]
+    const nameValidation = validateIdentifier(name, 'Host name', 2, 64)
+    if (!nameValidation.valid) {
+      return reply.code(400).send({ error: nameValidation.message })
+    }
+
+    // 普通用户节点名称必须以 PEER{userId} 开头（格式：PEER{userId}-xxx 或 PEER{userId}_xxx）
+    if (request.user.role !== 'admin') {
+      const userIdPrefix = `PEER${request.user.id}`
+      // 检查名称是否以 PEER{userId} 开头，后面跟 - 或 _ 分隔符
+      const validPrefixPattern = new RegExp(`^${userIdPrefix}[-_]`, 'i')
+      if (!validPrefixPattern.test(name)) {
+        return reply.code(400).send({
+          error: `Node name must start with your user ID prefix: ${userIdPrefix}-`,
+          code: 'INVALID_HOST_NAME_PREFIX'
+        })
+      }
+    }
+
+    const existingHost = await db.getHostByUserAndName(request.user.id, name)
+    if (existingHost) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_NAME_EXISTS))
+    }
+
+    // 检查托管准入条件（管理员不受限制）
+    if (request.user.role !== 'admin') {
+      const accessCheck = await checkHostingAccess(request.user.id)
+      if (!accessCheck.allowed) {
+        return reply.code(403).send({
+          error: accessCheck.reason,
+          code: 'HOSTING_ACCESS_DENIED'
+        })
+      }
+    }
+
+    const urlValidation = validateUrl(url, 'Host URL')
+    if (!urlValidation.valid) {
+      return reply.code(400).send({ error: urlValidation.message })
+    }
+
+    const hostAddressValidation = validateIpOrDomain(new URL(urlValidation.sanitized || url).hostname, 'Host address')
+    if (!hostAddressValidation.valid) {
+      return reply.code(400).send({ error: hostAddressValidation.message })
+    }
+
+    if (location) {
+      const locationValidation = validateName(location, 'Location', 1, 100)
+      if (!locationValidation.valid) {
+        return reply.code(400).send({ error: locationValidation.message })
+      }
+    }
+
+    let normalizedNatPublicIp: string | null = null
+    let normalizedNatPublicIpv6: string | null = null
+    let normalizedNatBindIp: string | null = null
+    let normalizedNatBindIpv6: string | null = null
+    const normalizedIpv6Subnet = ipv6Subnet?.trim() || null
+    const normalizedIpv6ParentInterface = ipv6ParentInterface?.trim() || null
+    if (natConfig?.publicIp) {
+      const ipValidation = validateIpAddress(natConfig.publicIp, 'NAT public IP')
+      if (!ipValidation.valid) {
+        return reply.code(400).send({ error: ipValidation.message })
+      }
+      normalizedNatPublicIp = ipValidation.sanitized || natConfig.publicIp.trim()
+    }
+    if (natConfig?.bindIp) {
+      const ipValidation = validateIpAddress(natConfig.bindIp, 'NAT bind IP')
+      if (!ipValidation.valid) {
+        return reply.code(400).send({ error: ipValidation.message })
+      }
+      normalizedNatBindIp = ipValidation.sanitized || natConfig.bindIp.trim()
+    }
+    if (natConfig?.bindIpv6) {
+      const ipValidation = validateIpAddress(natConfig.bindIpv6, 'NAT bind IPv6')
+      if (!ipValidation.valid || !(ipValidation.sanitized || natConfig.bindIpv6).includes(':')) {
+        return reply.code(400).send({ error: 'Invalid NAT bind IPv6 address format' })
+      }
+      normalizedNatBindIpv6 = ipValidation.sanitized || natConfig.bindIpv6.trim()
+    }
+    if (natConfig?.publicIpv6) {
+      const ipValidation = validateIpAddress(natConfig.publicIpv6, 'NAT public IPv6')
+      if (!ipValidation.valid || !(ipValidation.sanitized || natConfig.publicIpv6).includes(':')) {
+        return reply.code(400).send({ error: 'Invalid NAT public IPv6 address format' })
+      }
+      normalizedNatPublicIpv6 = ipValidation.sanitized || natConfig.publicIpv6.trim()
+    }
+
+    // 端口范围校验：结束端口不能小于起始端口
+    if (natConfig?.portRangeStart != null && natConfig?.portRangeEnd != null) {
+      if (natConfig.portRangeEnd < natConfig.portRangeStart) {
+        return reply.code(400).send({ error: 'Port range end must be greater than or equal to start', code: 'INVALID_PORT_RANGE' })
+      }
+    }
+
+
+
+    // 判断是否需要初始化：如果没有提供证书路径，则需要运行安装脚本
+    const needsInitialization = !certPath || !keyPath
+
+    // 验证资源上限配置（如果提供）
+    if (cpuAllowanceMax !== undefined && cpuAllowanceMax < 0) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_INVALID_CPU_MAX))
+    }
+
+    if (memoryMax !== undefined && memoryMax < 0) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_INVALID_MEMORY_MAX))
+    }
+
+    if (memoryMax !== undefined && memoryMax > 0 && memoryMax < 256) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_INVALID_MEMORY_MAX))
+    }
+
+    // 只有在需要初始化时才验证初始化配置
+    if (needsInitialization) {
+      // 存储驱动验证
+      if (storageDriver && !['zfs', 'lvm'].includes(storageDriver)) {
+        return reply.code(400).send({ error: 'Invalid storage driver, must be zfs or lvm' })
+      }
+
+      // 存储类型验证
+      if (storageType && !['loop', 'disk'].includes(storageType)) {
+        return reply.code(400).send({ error: 'Invalid storage type, must be loop or disk' })
+      }
+
+      // 存储路径验证 (防止命令注入)
+      if (storagePath) {
+        // 只允许 /dev/ 开头的设备路径，支持分区号、NVMe设备等
+        // 例如: /dev/sdb, /dev/sda1, /dev/nvme0n1, /dev/vda
+        if (!/^\/dev\/[a-zA-Z0-9_-]+$/.test(storagePath)) {
+          return reply.code(400).send({ error: 'Invalid storage path, must be a valid device path like /dev/sdb or /dev/nvme0n1' })
+        }
+      }
+
+      // 存储大小验证
+      if (storageSize !== undefined && (storageSize < 10 || storageSize > 10000)) {
+        return reply.code(400).send({ error: 'Storage size must be between 10 and 10000 GB' })
+      }
+
+      // IPv6 模式验证
+      if (ipv6Mode !== undefined && (ipv6Mode < 1 || ipv6Mode > 3)) {
+        return reply.code(400).send(apiError(ErrorCode.HOST_INVALID_IPV6_MODE))
+      }
+
+      // IPv6 路由模式 (1)：子网和接口为选填，用户可先创建节点后再编辑补充
+      // （实际创建实例时如果子网为空，会自动回退到 NAT 模式）
+      if (ipv6Mode === 1 && normalizedIpv6Subnet && !normalizedIpv6ParentInterface) {
+        return reply.code(400).send({ error: 'IPv6 subnet and parent interface must be provided together' })
+      }
+      if (ipv6Mode === 1 && !normalizedIpv6Subnet && normalizedIpv6ParentInterface) {
+        return reply.code(400).send({ error: 'IPv6 subnet and parent interface must be provided together' })
+      }
+
+    }
+
+    // 如果需要初始化，生成安装 Token 和证书下载有效期
+    let installToken: string | null = null
+    let certDownloadExpire: Date | null = null
+    if (needsInitialization) {
+      // 生成 UUID 作为 installToken
+      installToken = randomUUID()
+      // 证书下载有效期 15 分钟
+      certDownloadExpire = new Date(Date.now() + 15 * 60 * 1000)
+    }
+
+    let hostId: number
+    try {
+      hostId = await withHostAddressRegistryLock(async () => {
+        const lockedSnapshot = await prepareHostAddressSnapshotForWrite(url)
+
+        return prisma.$transaction(async tx => {
+          const createdHostId = await db.createHost({
+            userId: request.user.id,  // 所有者为当前用户
+            name,
+            url,
+            location,
+            countryCode: countryCode || 'us',
+            tags: tags || [],
+            certPath: certPath || null,
+            keyPath: keyPath || null,
+            natPublicIp: normalizedNatPublicIp,
+            natPublicIpv6: normalizedNatPublicIpv6,
+            natBindIp: normalizedNatBindIp,
+            natBindIpv6: normalizedNatBindIpv6,
+            natPortStart: natConfig?.portRangeStart || null,
+            natPortEnd: natConfig?.portRangeEnd || null,
+            ipAddress: ipAddress || null,
+            storageDriver: storageDriver || 'zfs',
+            storageType: storageType || 'loop',
+            storagePath: storagePath || null,
+            storageSize: storageSize || 60,
+            ipv6Mode: ipv6Mode || 1,
+            ipv6Subnet: normalizedIpv6Subnet,
+            ipv6Gateway: ipv6Gateway || null,
+            ipv6ParentInterface: normalizedIpv6ParentInterface,
+            enableApi: true,  // 脚本已自动启用 API（core.https_address）
+            sysctlConfig: null,  // 脚本已根据网络模式自动配置内核参数
+            installToken: installToken,  // UUID Token，用于证书下载验证
+            installTokenExpire: needsInitialization ? new Date(Date.now() + 24 * 60 * 60 * 1000) : null,
+            isInstalled: !needsInitialization, // 如果不需要初始化，则标记为已安装
+            certDownloadCount: 0,  // 证书下载次数初始为 0
+            certDownloadExpire: certDownloadExpire,  // 证书下载有效期 15 分钟
+            cpuAllowanceMax: cpuAllowanceMax,
+            memoryMax: memoryMax,
+            instanceType: instanceType
+          }, tx)
+
+          if (request.user.role !== 'admin') {
+            await tx.user.update({
+              where: { id: request.user.id },
+              data: { hasCreatedHostBefore: true }
+            })
+          }
+
+          await persistHostAddressSnapshot(createdHostId, lockedSnapshot, 'create', tx)
+          return createdHostId
+        })
+      })
+    } catch (error) {
+      if (error instanceof HostAddressRegistryError) {
+        if (error.errorCode === ErrorCode.HOST_ADDRESS_UNRESOLVABLE) {
+          await logHostAddressResolutionFailure(request.user.id, `${name}(create)`, url, 'create', error)
+        }
+        return reply.code(400).send(apiError(error.errorCode as ErrorCodeType, error.details))
+      }
+      throw error
+    }
+
+    // 注意：已取消配额限制，不再更新 hostUsed
+
+    // 如果不需要初始化（已安装Incus），尝试自动连接并同步资源
+    let autoConnected = false
+    let resourceInfo: { cpuTotal: number; memoryTotalGB: number; diskTotalGB: number } | null = null
+    let detectedArchitecture: 'x86_64' | 'aarch64' = 'x86_64'
+
+    if (!needsInitialization && certPath && keyPath) {
+      try {
+        const client = new IncusClient({
+          url,
+          certPath,
+          keyPath
+        })
+
+        const serverInfo = await client.connect() as {
+          environment?: {
+            kernel_architecture?: string
+            architectures?: string[]
+          }
+        }
+        detectedArchitecture = normalizeArchitecture(
+          serverInfo.environment?.kernel_architecture ||
+          serverInfo.environment?.architectures?.[0]
+        )
+        const resources = await client.getResources() as {
+          cpu?: { total?: number }
+          memory?: { total?: number }
+          storage?: {
+            disks?: Array<{ size?: number }>
+            pools?: Record<string, { space?: { total?: number } }>
+            total?: number
+          }
+        }
+
+        // 获取磁盘大小
+        let diskTotalBytes = 0
+        if (resources.storage?.disks && Array.isArray(resources.storage.disks) && resources.storage.disks.length > 0) {
+          diskTotalBytes = resources.storage.disks.reduce((sum: number, disk: { size?: number }) => sum + (disk.size || 0), 0)
+        }
+        if (diskTotalBytes === 0 && resources.storage?.pools) {
+          for (const pool of Object.values(resources.storage.pools)) {
+            const poolData = pool as { space?: { total?: number } }
+            diskTotalBytes += poolData.space?.total || 0
+          }
+        }
+        if (diskTotalBytes === 0) {
+          diskTotalBytes = 1024 * 1024 * 1024 * 1024 // 默认 1TB
+        }
+
+        const cpuTotal = resources.cpu?.total || 0
+        const memoryTotalMB = Math.round((resources.memory?.total || 0) / 1024 / 1024)
+        const diskTotalMB = Math.round(diskTotalBytes / 1024 / 1024)
+
+        // 只更新宿主机状态为在线，不覆盖任何用户输入的信息
+        await db.updateHostStatus(hostId, 'online')
+
+        // 只在用户明确提供了资源上限配置时才设置
+        if (cpuAllowanceMax !== undefined || memoryMax !== undefined || instanceType !== undefined || detectedArchitecture !== 'x86_64') {
+          await db.updateHostResources(hostId, {
+            cpuAllowanceMax,
+            memoryMax,
+            instanceType,
+            architecture: detectedArchitecture
+          })
+        }
+
+        await client.close()
+        autoConnected = true
+        resourceInfo = {
+          cpuTotal,
+          memoryTotalGB: Math.round(memoryTotalMB / 1024),
+          diskTotalGB: Math.round(diskTotalMB / 1024)
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        console.warn(`自动连接节点 ${name} 失败: ${errorMessage}`)
+      }
+    } else {
+      // 如果不需要初始化，也需要设置资源上限配置（如果用户提供了）
+      if (cpuAllowanceMax !== undefined || memoryMax !== undefined || instanceType !== undefined) {
+        await db.updateHostResources(hostId, {
+          cpuAllowanceMax,
+          memoryMax,
+          instanceType
+        })
+      }
+    }
+
+    await createLog(
+      request.user.id,
+      'host',
+      'host.create',
+      `Created host "${name}" [url: ${url}, location: ${location || 'N/A'}, country: ${countryCode || 'us'}, storage: ${storageDriver || 'zfs'}/${storageType || 'loop'} ${storageSize || 60}GB, instanceType: ${instanceType || 'container'}]`,
+      'success'
+    )
+
+    // 检查宿主机配额使用率，超过 80% 时发送警告通知
+    try {
+      const userQuota = await db.getUserQuota(request.user.id)
+      if (userQuota && userQuota.host_limit > 0) {
+        const usagePercent = (userQuota.host_used / userQuota.host_limit) * 100
+        if (usagePercent >= 80) {
+          await sendNotification(request.user.id, 'quota_warning', {
+            instanceName: '',
+            quotaType: '宿主机',
+            currentUsed: userQuota.host_used,
+            maxLimit: userQuota.host_limit,
+            usagePercent: Math.round(usagePercent)
+          })
+        }
+      }
+    } catch (quotaCheckError) {
+      console.warn('[Host] 配额警告检查失败:', quotaCheckError)
+    }
+
+    // 如果需要初始化，生成安装命令（面板地址和 token 自动注入脚本）
+    let installCommand: string | undefined
+    if (needsInitialization && installToken) {
+      const panelUrl = derivePanelUrl(request)
+      installCommand = buildHostInstallCommand(panelUrl, installToken)
+    }
+
+    reply.code(201).send({
+      message: needsInitialization
+        ? 'Host added, please run install script to complete initialization'
+        : (autoConnected ? 'Host added and connected' : 'Host added, please test connection manually'),
+      host: {
+        id: hostId,
+        name,
+        url,
+        architecture: detectedArchitecture,
+        status: autoConnected ? 'online' : 'offline',
+        location,
+        resources: resourceInfo
+      },
+      installCommand: installCommand || undefined,
+      installToken: installToken || undefined
+    })
+  })
+
+  // 通用安装脚本下载接口（无需鉴权，直接返回脚本模板，让用户在执行时输入 token）
+  fastify.get('/install.sh', async (request, reply) => {
+    try {
+      const scriptPath = join(__dirname, '../../templates/install.sh')
+      let script: string
+      try {
+        script = readFileSync(scriptPath, 'utf-8')
+      } catch (err) {
+        request.log.error(err, 'Failed to read install script file')
+        return reply.code(500).send('# Error: Install script file not found')
+      }
+
+      // 注入面板地址（与 INJECT_TOKEN 使用相同的行锚定注入方式）
+      const frontendUrl = derivePanelUrl(request)
+      script = injectInstallVariable(script, 'INJECT_PANEL_URL', frontendUrl)
+
+      return reply
+        .header('Content-Type', 'text/plain; charset=utf-8')
+        .header('Cache-Control', 'no-store')
+        .send(script)
+    } catch (err) {
+      request.log.error(err, 'Failed to generate generic install script')
+      return reply.code(500).send('# Error: Internal server error')
+    }
+  })
+
+  // 安装脚本下载接口（基于 installToken 鉴权，保留给老版本兼容）
+  fastify.get<{ Params: { token: string } }>('/install.sh/:token', async (request, reply) => {
+    const { token } = request.params
+
+    if (!token || token.length < 10) {
+      request.log.warn('Invalid install script download token format')
+      return reply.code(400).send('# Error: Invalid token format')
+    }
+
+    try {
+      // 通过 installToken 查找宿主机
+      const host = await prisma.host.findUnique({
+        where: { installToken: token },
+        select: {
+          id: true,
+          name: true,
+          isInstalled: true,
+          installTokenExpire: true
+        }
+      })
+
+      if (!host) {
+        request.log.warn(`Install script download failed: invalid token`)
+        return reply.code(404).send('# Error: Invalid or expired token')
+      }
+
+      // 检查是否已安装
+      if (host.isInstalled) {
+        request.log.warn(`Install script download failed: host ${host.name} already installed`)
+        return reply.code(403).send('# Error: Host already installed')
+      }
+
+      // 检查有效期（24 小时）
+      if (!host.installTokenExpire) {
+        request.log.warn(`Install script download failed: no expiration time set for host ${host.name}`)
+        return reply.code(403).send('# Error: Invalid install token')
+      }
+      if (new Date() > host.installTokenExpire) {
+        request.log.warn(`Install script download failed: token expired for host ${host.name}`)
+        return reply.code(403).send('# Error: Install token has expired (24 hours)')
+      }
+
+      // 读取安装脚本
+      const scriptPath = join(__dirname, '../../templates/install.sh')
+      let script: string
+      try {
+        script = readFileSync(scriptPath, 'utf-8')
+      } catch (err) {
+        request.log.error(err, 'Failed to read install script file')
+        return reply.code(500).send('# Error: Install script file not found')
+      }
+
+      // 注入面板地址（与 INJECT_TOKEN 使用相同的行锚定注入方式）
+      const frontendUrl = derivePanelUrl(request)
+      script = injectInstallVariable(script, 'INJECT_PANEL_URL', frontendUrl)
+
+      // 将 token 注入脚本，用户无需手动输入
+      script = injectInstallVariable(script, 'INJECT_TOKEN', token)
+
+      try {
+        const agentInstall = await issueHostAgentInstallToken(host.id, true)
+        script = injectInstallVariable(script, 'INJECT_AGENT_INSTALL_TOKEN', agentInstall.installToken)
+        script = injectInstallVariable(script, 'INJECT_AGENT_ENABLED', 'true')
+
+        const agentBinaryUrl = process.env.INCUDAL_AGENT_BINARY_URL?.trim()
+        if (agentBinaryUrl) {
+          script = injectInstallVariable(script, 'INJECT_AGENT_BINARY_URL', agentBinaryUrl)
+        }
+
+        request.log.info(
+          {
+            hostId: host.id,
+            agentId: agentInstall.agent.agentId,
+            installTokenExpiresAt: agentInstall.installTokenExpiresAt
+          },
+          'Host install script prepared with one-time Agent install token'
+        )
+        await createLog(
+          null,
+          'host',
+          'host.agent_install_token_issue',
+          `为宿主机安装脚本生成 Agent 一次性安装 token: ${host.name} (#${host.id})`,
+          'success'
+        )
+      } catch (error) {
+        request.log.error(
+          { err: error, hostId: host.id },
+          'Failed to prepare Host Agent bootstrap credentials'
+        )
+      }
+
+      request.log.info(`Install script downloaded for host ${host.name}`)
+
+      return reply
+        .header('Content-Type', 'text/plain; charset=utf-8')
+        .header('Cache-Control', 'no-store')
+        .send(script)
+    } catch (err) {
+      request.log.error(err, 'Install script download error')
+      return reply.code(500).send('# Error: Internal server error')
+    }
+  })
+
+  // 证书下载接口（基于 installToken 鉴权）
+  fastify.get<{ Params: { token: string } }>('/cert/:token', async (request, reply) => {
+    const { token } = request.params
+
+    if (!token || token.length < 10) {
+      request.log.warn('Invalid certificate download token format')
+      return reply.code(400).send('# Error: Invalid token format')
+    }
+
+    try {
+      // 通过 installToken 查找宿主机
+      const host = await prisma.host.findUnique({
+        where: { installToken: token },
+        select: {
+          id: true,
+          name: true,
+          isInstalled: true
+        }
+      })
+
+      if (!host) {
+        request.log.warn(`Certificate download failed: invalid token`)
+        return reply.code(404).send('# Error: Invalid or expired token')
+      }
+
+      // 检查是否已安装
+      if (host.isInstalled) {
+        request.log.warn(`Certificate download failed: host ${host.name} already installed`)
+        return reply.code(403).send('# Error: Host already installed')
+      }
+
+      // 注意: 已移除证书下载的时效和次数限制，允许无限次下载直到安装完成
+
+      // 读取证书文件
+      const certPath = process.env.PANEL_CRT_PATH || join(__dirname, '../../certs/client.crt')
+      let certContent: string
+      try {
+        certContent = readFileSync(certPath, 'utf-8')
+      } catch (err) {
+        request.log.error(err, 'Failed to read certificate file')
+        return reply.code(500).send('# Error: Certificate file not found')
+      }
+
+      request.log.info(`Certificate downloaded for host ${host.name}`)
+
+      return reply
+        .header('Content-Type', 'text/plain; charset=utf-8')
+        .header('Cache-Control', 'no-store')
+        .send(certContent)
+    } catch (err) {
+      request.log.error(err, 'Certificate download error')
+      return reply.code(500).send('# Error: Internal server error')
+    }
+  })
+
+  // 验证并连接宿主机（Trust Password 握手）
+  fastify.post<{ Params: { id: string } }>('/:id/verify', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(hostId)
+
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查是否有待验证的安装会话（证书模式不再需要 installToken，但保留过期检查）
+    const fullHost = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: { installTokenExpire: true, url: true, isInstalled: true }
+    })
+
+    if (fullHost?.isInstalled) {
+      return reply.code(400).send({ error: '该宿主机已完成安装，无需再次验证' })
+    }
+
+    // 检查是否过期
+    if (fullHost?.installTokenExpire && new Date() > fullHost.installTokenExpire) {
+      return reply.code(400).send({ error: '安装会话已过期，请删除宿主机后重新创建' })
+    }
+
+    // 直接使用存储的 url 字段，无需重新拼接（避免 IPv6 地址丢失方括号的问题）
+    const urlObj = new URL(host.url)
+    const hostPort = urlObj.port || '8443'
+    const baseUrl = `${urlObj.protocol}//${urlObj.host}`
+
+    // 准备证书路径
+    const certPath = process.env.PANEL_CRT_PATH || join(__dirname, '../../certs/client.crt')
+    const keyPath = process.env.PANEL_KEY_PATH || join(__dirname, '../../certs/client.key')
+
+    let cert: Buffer
+    let key: Buffer
+
+    try {
+      cert = readFileSync(certPath)
+      key = readFileSync(keyPath)
+    } catch (err) {
+      request.log.error(err, 'Failed to read panel certificate files')
+      return reply.code(500).send({ error: '面板证书文件读取失败，请检查服务器配置' })
+    }
+
+    // 创建 undici Agent（携带面板的 Client 证书）
+    const panelAgent = new Agent({
+      connect: {
+        cert,
+        key,
+        rejectUnauthorized: false  // 首次连接必须忽略宿主机的自签名证书错误
+      }
+    })
+
+    try {
+      // 证书模式：证书已在安装脚本中导入，直接测试连接
+      request.log.info(`Attempting to verify host at ${baseUrl}`)
+
+      // 直接获取资源信息（测试连接）
+      const resourcesUrl = `${baseUrl}/1.0/resources`
+      const serverInfoUrl = `${baseUrl}/1.0`
+      
+      const resourcesRes = await undiciRequest(resourcesUrl, {
+        method: 'GET',
+        dispatcher: panelAgent
+      })
+      const resourcesText = await resourcesRes.body.text()
+      
+      // 只在解析失败时记录错误日志
+      let resourcesData
+      try {
+        resourcesData = JSON.parse(resourcesText)
+      } catch {
+        console.error('[Incus API Error]', {
+          method: 'GET',
+          url: resourcesUrl,
+          statusCode: resourcesRes.statusCode,
+          error: `解析响应失败: ${resourcesText.substring(0, 200)}`
+        })
+        throw new Error(`无效的响应: ${resourcesText.substring(0, 100)}`)
+      }
+      const resources = resourcesData?.metadata || {}
+
+      const serverInfoRes = await undiciRequest(serverInfoUrl, {
+        method: 'GET',
+        dispatcher: panelAgent
+      })
+      const serverInfoText = await serverInfoRes.body.text()
+      let serverInfoData
+      try {
+        serverInfoData = JSON.parse(serverInfoText)
+      } catch {
+        console.error('[Incus API Error]', {
+          method: 'GET',
+          url: serverInfoUrl,
+          statusCode: serverInfoRes.statusCode,
+          error: `解析响应失败: ${serverInfoText.substring(0, 200)}`
+        })
+        throw new Error(`无效的服务器信息响应: ${serverInfoText.substring(0, 100)}`)
+      }
+      const hostArchitecture = normalizeArchitecture(
+        serverInfoData?.metadata?.environment?.kernel_architecture ||
+        serverInfoData?.metadata?.environment?.architectures?.[0]
+      )
+
+      // 获取磁盘大小
+      let diskTotalBytes = 0
+      if (resources.storage?.disks && Array.isArray(resources.storage.disks)) {
+        diskTotalBytes = resources.storage.disks.reduce((sum: number, disk: { size?: number }) => sum + (disk.size || 0), 0)
+      }
+      if (diskTotalBytes === 0 && resources.storage?.pools) {
+        for (const pool of Object.values(resources.storage.pools)) {
+          const poolData = pool as { space?: { total?: number } }
+          diskTotalBytes += poolData.space?.total || 0
+        }
+      }
+      if (diskTotalBytes === 0) {
+        diskTotalBytes = 1024 * 1024 * 1024 * 1024 // 默认 1TB
+      }
+
+      const cpuTotal = resources.cpu?.total || 0
+      const memoryTotalMB = Math.round((resources.memory?.total || 0) / 1024 / 1024)
+      const diskTotalMB = Math.round(diskTotalBytes / 1024 / 1024)
+
+      // 自动检测宿主机公网 IPv6 地址
+      const detectedIpv6 = extractHostPublicIpv6FromResources(resources)
+
+      // 只更新连接状态和证书路径，不覆盖任何用户输入的信息
+      const updateData: Record<string, unknown> = {
+        status: 'online',
+        isInstalled: true,
+        installToken: null,  // 清空 installToken（已不再需要）
+        installTokenExpire: null,
+        certDownloadCount: 0,  // 重置下载次数
+        certDownloadExpire: null,  // 清空证书下载有效期
+        certPath: certPath,
+        keyPath: keyPath,
+        architecture: hostArchitecture
+      }
+      // 仅在检测到 IPv6 且当前未手动配置时自动填入
+      if (detectedIpv6) {
+        const currentHost = await prisma.host.findUnique({
+          where: { id: hostId },
+          select: { natPublicIpv6: true }
+        })
+        if (!currentHost?.natPublicIpv6) {
+          updateData.natPublicIpv6 = detectedIpv6
+          request.log.info(`Auto-detected host IPv6: ${detectedIpv6} for host ${host.name}`)
+        }
+      }
+      await prisma.host.update({
+        where: { id: hostId },
+        data: updateData
+      })
+
+      await createLog(
+        user.id,
+        'host',
+        'host.verify',
+        `Verified and connected host "${host.name}" [arch: ${hostArchitecture}, CPU: ${cpuTotal} cores, Memory: ${Math.round(memoryTotalMB / 1024)}GB, Disk: ${Math.round(diskTotalMB / 1024)}GB]`,
+        'success'
+      )
+
+      return {
+        success: true,
+        message: '纳管成功',
+        resources: {
+          cpuTotal,
+          memoryTotalGB: Math.round(memoryTotalMB / 1024),
+          diskTotalGB: Math.round(diskTotalMB / 1024)
+        },
+        architecture: hostArchitecture
+      }
+
+    } catch (err: any) {
+      const errorMessage = err.message || String(err)
+      request.log.error({ err, baseUrl }, 'Host verification failed')
+
+      // 根据错误类型返回友好提示
+      if (errorMessage.includes('ECONNREFUSED')) {
+        return reply.code(400).send({
+          error: `连接被拒绝：请检查宿主机防火墙是否放行 TCP ${hostPort} 端口，以及 Incus 服务是否正在运行`
+        })
+      }
+      if (errorMessage.includes('ETIMEDOUT') || errorMessage.includes('ECONNRESET')) {
+        return reply.code(400).send({
+          error: '连接超时：请检查网络连通性和防火墙设置'
+        })
+      }
+      if (errorMessage.includes('not authorized') || errorMessage.includes('certificate') || errorMessage.includes('unauthorized')) {
+        return reply.code(400).send({
+          error: '认证失败：证书未正确导入，请确认安装脚本已正确执行并成功导入面板证书'
+        })
+      }
+
+      return reply.code(400).send({
+        error: `连接失败：${errorMessage}`
+      })
+    } finally {
+      // 关闭 agent
+      await panelAgent.close()
+    }
+  })
+
+  // 重新生成安装命令（在线/离线节点均可重新安装）
+  fastify.post<{ Params: { id: string } }>('/:id/regenerate-install', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取宿主机信息
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: {
+        id: true,
+        name: true,
+        url: true,
+        status: true,
+        userId: true,
+        ipv6Mode: true
+      }
+    })
+
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.userId !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 生成新的 installToken
+    const installToken = randomUUID()
+    const installTokenExpire = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24小时有效
+
+    // 更新数据库
+    await prisma.host.update({
+      where: { id: hostId },
+      data: {
+        installToken,
+        installTokenExpire,
+        isInstalled: false,
+        certPath: null,
+        keyPath: null
+      }
+    })
+
+    // 生成安装命令（面板地址和 token 自动注入脚本）
+    const panelUrl = derivePanelUrl(request)
+    const installCommand = buildHostInstallCommand(panelUrl, installToken)
+
+    await createLog(
+      user.id,
+      'host',
+      'host.regenerate_install',
+      `Regenerated install command for host "${host.name}"`,
+      'success'
+    )
+
+    return {
+      success: true,
+      installCommand,
+      installToken,
+      message: '安装命令已重新生成，请在24小时内完成安装'
+    }
+  })
+
+  // 测试宿主机连接（支持节点所有者）
+  fastify.post<{ Params: { id: string } }>('/:id/test', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (!host.cert_path || !host.key_path) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_CERT_NOT_CONFIGURED))
+    }
+
+    try {
+      const client = new IncusClient({
+        url: host.url,
+        certPath: host.cert_path,
+        keyPath: host.key_path
+      })
+
+      // 仅测试连通性：尝试连接并获取服务器信息
+      const serverInfo = await client.connect() as {
+        api_version?: string
+        environment?: {
+          server_name?: string
+          kernel_architecture?: string
+          architectures?: string[]
+        }
+      }
+
+      const hostArchitecture = normalizeArchitecture(
+        serverInfo.environment?.kernel_architecture ||
+        serverInfo.environment?.architectures?.[0]
+      )
+
+      await db.updateHostResources(hostId, {
+        architecture: hostArchitecture
+      })
+
+      await client.close()
+
+      return {
+        success: true,
+        message: 'Connection successful',
+        serverInfo: {
+          apiVersion: serverInfo.api_version,
+          environment: serverInfo.environment?.server_name,
+          architecture: hostArchitecture
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+
+      return reply.code(400).send({
+        success: false,
+        error: errorMessage
+      })
+    }
+  })
+
+  // 获取宿主机详情（支持节点所有者）
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+
+    if (!host) {
+      // 添加调试日志，帮助排查 HOST_NOT_FOUND 问题
+      console.warn(`[HOST_NOT_FOUND] GET /hosts/${id} - hostId=${hostId}, userId=${user.id}, username=${user.username}`)
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取该宿主机上的实例列表
+    const instances = await db.getInstancesByHost(hostId)
+
+    // 计算 diskTotal：优先使用存储池的实际大小
+    let diskTotalMB = host.storage_size ? host.storage_size * 1024 : (host.disk_total || 0) // 默认值：使用创建时输入的存储大小（GB转MB）
+    
+    // 如果宿主机在线，尝试从存储池获取实际大小
+    if (host.status === 'online' && host.cert_path && host.key_path) {
+      try {
+        const client = await getIncusClient(host)
+        // 获取所有系统盘存储池（purpose = 'instance_data'）
+        const systemPools = await db.getSystemDiskPoolsByHostId(hostId)
+        
+        if (systemPools.length > 0) {
+          let totalBytes = 0
+          // 从 Incus API 获取每个存储池的大小并累加
+          for (const pool of systemPools) {
+            try {
+              const poolResources = await getStoragePoolResources(client, pool.name)
+              if (poolResources.space?.total) {
+                totalBytes += poolResources.space.total
+              }
+            } catch (err) {
+              // 单个存储池获取失败，跳过
+              console.warn(`Failed to get resources for storage pool ${pool.name}:`, err)
+            }
+          }
+          
+          // 如果成功获取到存储池大小，使用实际值（字节转MB）
+          if (totalBytes > 0) {
+            diskTotalMB = Math.round(totalBytes / 1024 / 1024)
+          }
+        }
+      } catch (err) {
+        // 无法连接宿主机或获取存储池信息，使用默认值
+        console.warn(`Failed to get storage pool sizes for host ${hostId}:`, err)
+      }
+    }
+
+    // 获取节点组信息
+    return {
+      host: {
+        id: host.id,
+        name: host.name,
+        url: host.url,
+        status: host.status,
+        maintenance: host.status === 'maintenance',
+        location: host.location,
+        countryCode: host.country_code || 'us',
+        architecture: host.architecture || 'x86_64',
+        certPath: host.cert_path || '',
+        keyPath: host.key_path || '',
+        resources: {
+          cpuUsed: host.cpu_used,
+          memoryUsed: host.memory_used,
+          diskTotal: diskTotalMB, // 使用存储池的实际大小，如果无法获取则使用默认值
+          diskUsed: host.disk_used
+        },
+        cpuAllowanceMax: host.cpu_allowance_max || 0,
+        memoryMax: host.memory_max || 0,
+        instanceType: host.instance_type || 'container',
+        natConfig: {
+          publicIp: host.nat_public_ip,
+          publicIpv6: host.nat_public_ipv6,
+          bindIp: (host as any).nat_bind_ip || null,
+          bindIpv6: (host as any).nat_bind_ipv6 || null,
+          portRangeStart: host.nat_port_start,
+          portRangeEnd: host.nat_port_end
+        },
+        // 初始化配置字段
+        ipAddress: host.ip_address || undefined,
+        storageDriver: host.storage_driver || undefined,
+        storageType: host.storage_type || undefined,
+        storagePath: host.storage_path || undefined,
+        storageSize: host.storage_size || undefined,
+        ipv6Mode: host.ipv6_mode || undefined,
+        ipv6Subnet: host.ipv6_subnet || undefined,
+        ipv6Gateway: host.ipv6_gateway || undefined,
+        ipv6ParentInterface: host.ipv6_parent_interface || undefined,
+        enableApi: host.enable_api !== undefined ? host.enable_api : undefined,
+        sysctlConfig: host.sysctl_config || undefined,
+        transferEnabled: host.transfer_enabled !== undefined ? host.transfer_enabled : true,
+        trafficResetDay: host.traffic_reset_day ?? 1,
+        notifyPurchase: host.notify_purchase !== undefined ? host.notify_purchase : true,
+        notifyRenew: host.notify_renew !== undefined ? host.notify_renew : true,
+        notifyDestroy: host.notify_destroy !== undefined ? host.notify_destroy : false,
+        enableResourcePool: host.enable_resource_pool !== undefined ? host.enable_resource_pool : true,
+        announcement: host.announcement || null,
+        probeUrl: host.probe_url || null,
+        instances: instances.map((i: unknown) => {
+          const instance = i as { id: number; name: string; status: string }
+          return {
+            id: instance.id,
+            name: instance.name,
+            status: instance.status
+          }
+        })
+      }
+    }
+  })
+
+  // 获取节点镜像白名单配置（管理员或节点所有者）
+  fastify.get<{ Params: { id: string } }>('/:id/images', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const selection = await db.getHostImageSelectionState(hostId)
+    if (!selection) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    return {
+      success: true,
+      host: {
+        id: selection.hostId,
+        name: selection.hostName,
+        architecture: selection.architecture,
+        instanceType: selection.instanceType
+      },
+      useDefault: selection.useDefault,
+      allowedImageIds: selection.allowedImageIds,
+      images: selection.images.map(image => ({
+        id: image.id,
+        name: image.name,
+        remoteAlias: image.remoteAlias,
+        osType: image.osType,
+        architecture: image.architecture,
+        instanceType: image.instanceType,
+        icon: image.icon,
+        sortOrder: image.sortOrder,
+        hidden: image.hidden
+      }))
+    }
+  })
+
+  // 保存节点镜像白名单配置（管理员或节点所有者）
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      useDefault: boolean
+      imageIds?: number[]
+    }
+  }>('/:id/images', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['useDefault'],
+        properties: {
+          useDefault: { type: 'boolean' },
+          imageIds: {
+            type: 'array',
+            items: { type: 'integer' }
+          }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const selection = await db.saveHostAllowedImages(hostId, request.body.useDefault, request.body.imageIds || [])
+      if (!selection) {
+        return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+      }
+
+      await createLog(
+        user.id,
+        'host',
+        'host.image_policy',
+        selection.useDefault
+          ? `Reset image policy for host "${selection.hostName}" to default`
+          : `Updated image policy for host "${selection.hostName}" with ${selection.allowedImageIds.length} image(s)`,
+        'success'
+      )
+
+      return {
+        success: true,
+        message: selection.useDefault ? 'Host image policy reset to default' : 'Host image policy updated',
+        host: {
+          id: selection.hostId,
+          name: selection.hostName,
+          architecture: selection.architecture,
+          instanceType: selection.instanceType
+        },
+        useDefault: selection.useDefault,
+        allowedImageIds: selection.allowedImageIds,
+        images: selection.images.map(image => ({
+          id: image.id,
+          name: image.name,
+          remoteAlias: image.remoteAlias,
+          osType: image.osType,
+          architecture: image.architecture,
+          instanceType: image.instanceType,
+          icon: image.icon,
+          sortOrder: image.sortOrder,
+          hidden: image.hidden
+        }))
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message.startsWith('INVALID_IMAGE_FOR_HOST:')) {
+        return reply.code(400).send(apiError(ErrorCode.IMAGE_INVALID_HOST_ID))
+      }
+      throw error
+    }
+  })
+
+  // 更新宿主机配置（管理员或节点所有者）
+  fastify.patch<{
+    Params: { id: string }
+    Body: UpdateHostRequest & {
+      tags?: string[]
+      natConfig?: { publicIp?: string; publicIpv6?: string; bindIp?: string; bindIpv6?: string; portRangeStart?: number; portRangeEnd?: number }
+      cpuAllowanceMax?: number
+      memoryMax?: number
+      instanceType?: 'container' | 'vm' | 'both'
+      ipv6ParentInterface?: string
+      ipv6Subnet?: string
+      transferEnabled?: boolean
+      trafficResetDay?: number
+      enableResourcePool?: boolean
+      announcement?: string | null
+      probeUrl?: string | null
+    }
+  }>('/:id', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          name: { type: 'string' },
+          url: { type: 'string' },
+          location: { type: 'string' },
+          countryCode: { type: 'string', minLength: 2, maxLength: 2 },
+          certPath: { type: 'string' },
+          keyPath: { type: 'string' },
+          natConfig: { type: 'object' },
+          cpuAllowanceMax: { type: 'integer' },
+          memoryMax: { type: 'integer' },
+          instanceType: { type: 'string', enum: ['container', 'vm', 'both'] },
+          ipv6ParentInterface: { type: 'string' },
+          ipv6Subnet: { type: 'string' },
+          transferEnabled: { type: 'boolean' },
+          trafficResetDay: { type: 'integer', minimum: 1, maximum: 28 },
+          notifyPurchase: { type: 'boolean' },
+          notifyRenew: { type: 'boolean' },
+          notifyDestroy: { type: 'boolean' },
+          enableResourcePool: { type: 'boolean' },
+          announcement: { type: ['string', 'null'], maxLength: 1000 },
+          probeUrl: { type: ['string', 'null'], maxLength: 500 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: UpdateHostRequest & {
+      tags?: string[]
+      natConfig?: { publicIp?: string; publicIpv6?: string; bindIp?: string; bindIpv6?: string; portRangeStart?: number; portRangeEnd?: number }
+      cpuAllowanceMax?: number
+      memoryMax?: number
+      instanceType?: 'container' | 'vm' | 'both'
+      ipv6ParentInterface?: string
+      ipv6Subnet?: string
+      transferEnabled?: boolean
+      trafficResetDay?: number
+      notifyPurchase?: boolean
+      notifyRenew?: boolean
+      notifyDestroy?: boolean
+      enableResourcePool?: boolean
+      announcement?: string | null
+      probeUrl?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const updates = request.body
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (updates.name !== undefined) {
+      const nameValidation = validateIdentifier(updates.name, 'Host name', 2, 64)
+      if (!nameValidation.valid) {
+        return reply.code(400).send({ error: nameValidation.message })
+      }
+
+      if (request.user.role !== 'admin') {
+        const userIdPrefix = `PEER${request.user.id}`
+        const validPrefixPattern = new RegExp(`^${userIdPrefix}[-_]`, 'i')
+        if (!validPrefixPattern.test(updates.name)) {
+          return reply.code(400).send({
+            error: `Node name must start with your user ID prefix: ${userIdPrefix}-`,
+            code: 'INVALID_HOST_NAME_PREFIX'
+          })
+        }
+      }
+
+      const duplicateHost = await db.getHostByUserAndName(host.user_id!, updates.name)
+      if (duplicateHost && duplicateHost.id !== hostId) {
+        return reply.code(400).send(apiError(ErrorCode.HOST_NAME_EXISTS))
+      }
+    }
+
+    if (updates.url !== undefined) {
+      const urlValidation = validateUrl(updates.url, 'Host URL')
+      if (!urlValidation.valid) {
+        return reply.code(400).send({ error: urlValidation.message })
+      }
+
+      const hostAddressValidation = validateIpOrDomain(new URL(urlValidation.sanitized || updates.url).hostname, 'Host address')
+      if (!hostAddressValidation.valid) {
+        return reply.code(400).send({ error: hostAddressValidation.message })
+      }
+    }
+
+    if (updates.location !== undefined && updates.location) {
+      const locationValidation = validateName(updates.location, 'Location', 1, 100)
+      if (!locationValidation.valid) {
+        return reply.code(400).send({ error: locationValidation.message })
+      }
+    }
+
+    // 验证最小值限制 - 由于 cpu_total 字段已删除，不再检查 CPU 最小值限制
+    // 用户可以自由设置 CPU 配额上限
+
+    if (updates.memoryMax !== undefined) {
+      const minMemory = 256
+      if (updates.memoryMax > 0 && updates.memoryMax < minMemory) {
+        return reply.code(400).send({
+          error: `内存最大值不能低于256MB`
+        })
+      }
+    }
+
+    // 检查新配置是否低于实例已使用的资源
+    const usedResources = await db.calculateHostResourcesFromInstances(hostId)
+
+    if (updates.cpuAllowanceMax !== undefined && updates.cpuAllowanceMax > 0) {
+      if (updates.cpuAllowanceMax < usedResources.cpuUsed) {
+        return reply.code(400).send(apiError(ErrorCode.HOST_CPU_BELOW_USED, `当前已使用: ${usedResources.cpuUsed}%`))
+      }
+    }
+
+    if (updates.memoryMax !== undefined && updates.memoryMax > 0) {
+      if (updates.memoryMax < usedResources.memoryUsed) {
+        return reply.code(400).send(apiError(ErrorCode.HOST_MEMORY_BELOW_USED, `当前已使用: ${usedResources.memoryUsed}MB`))
+      }
+    }
+
+    let normalizedNatPublicIp: string | null | undefined = undefined
+    let normalizedNatBindIp: string | null | undefined = undefined
+    let normalizedNatBindIpv6: string | null | undefined = undefined
+    const normalizedIpv6ParentInterface = updates.ipv6ParentInterface === undefined
+      ? undefined
+      : (updates.ipv6ParentInterface.trim() || null)
+    const normalizedIpv6Subnet = updates.ipv6Subnet === undefined
+      ? undefined
+      : (updates.ipv6Subnet.trim() || null)
+    if (updates.natConfig && 'publicIp' in updates.natConfig) {
+      const nextNatPublicIp = updates.natConfig.publicIp?.trim()
+      if (nextNatPublicIp) {
+        const ipValidation = validateIpAddress(nextNatPublicIp, 'NAT public IP')
+        if (!ipValidation.valid) {
+          return reply.code(400).send({ error: ipValidation.message })
+        }
+        normalizedNatPublicIp = ipValidation.sanitized || nextNatPublicIp
+      } else {
+        normalizedNatPublicIp = null
+      }
+    }
+    if (updates.natConfig && 'bindIp' in updates.natConfig) {
+      const nextNatBindIp = updates.natConfig.bindIp?.trim()
+      if (nextNatBindIp) {
+        const ipValidation = validateIpAddress(nextNatBindIp, 'NAT bind IP')
+        if (!ipValidation.valid) {
+          return reply.code(400).send({ error: ipValidation.message })
+        }
+        normalizedNatBindIp = ipValidation.sanitized || nextNatBindIp
+      } else {
+        normalizedNatBindIp = null
+      }
+    }
+
+    // 处理 NAT 公网 IPv6
+    let normalizedNatPublicIpv6: string | null | undefined = undefined
+    if (updates.natConfig && 'publicIpv6' in updates.natConfig) {
+      const nextNatPublicIpv6 = updates.natConfig.publicIpv6?.trim()
+      if (nextNatPublicIpv6) {
+        const ipValidation = validateIpAddress(nextNatPublicIpv6, 'NAT public IPv6')
+        if (!ipValidation.valid || !(ipValidation.sanitized || nextNatPublicIpv6).includes(':')) {
+          return reply.code(400).send({ error: 'Invalid NAT public IPv6 address format' })
+        }
+        normalizedNatPublicIpv6 = ipValidation.sanitized || nextNatPublicIpv6
+      } else {
+        normalizedNatPublicIpv6 = null
+      }
+    }
+    if (updates.natConfig && 'bindIpv6' in updates.natConfig) {
+      const nextNatBindIpv6 = updates.natConfig.bindIpv6?.trim()
+      if (nextNatBindIpv6) {
+        const ipValidation = validateIpAddress(nextNatBindIpv6, 'NAT bind IPv6')
+        if (!ipValidation.valid || !(ipValidation.sanitized || nextNatBindIpv6).includes(':')) {
+          return reply.code(400).send({ error: 'Invalid NAT bind IPv6 address format' })
+        }
+        normalizedNatBindIpv6 = ipValidation.sanitized || nextNatBindIpv6
+      } else {
+        normalizedNatBindIpv6 = null
+      }
+    }
+
+    // 端口范围校验：结束端口不能小于起始端口
+    if (updates.natConfig?.portRangeStart != null && updates.natConfig?.portRangeEnd != null) {
+      if (updates.natConfig.portRangeEnd < updates.natConfig.portRangeStart) {
+        return reply.code(400).send({ error: 'Port range end must be greater than or equal to start', code: 'INVALID_PORT_RANGE' })
+      }
+    }
+
+    const nextIpv6Mode = host.ipv6_mode ?? 1
+    const nextIpv6Subnet = normalizedIpv6Subnet !== undefined ? normalizedIpv6Subnet : (host.ipv6_subnet ?? null)
+    const nextIpv6ParentInterface = normalizedIpv6ParentInterface !== undefined
+      ? normalizedIpv6ParentInterface
+      : (host.ipv6_parent_interface ?? null)
+
+    if (nextIpv6Mode === 1 && (!nextIpv6Subnet || !nextIpv6ParentInterface)) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_IPV6_ROUTE_REQUIRES_CONFIG))
+    }
+
+    try {
+      if (updates.url !== undefined) {
+        await withHostAddressRegistryLock(async () => {
+          const lockedSnapshot = await prepareHostAddressSnapshotForWrite(updates.url!, hostId)
+
+          await prisma.$transaction(async tx => {
+            await db.updateHost(hostId, {
+              name: updates.name,
+              url: updates.url,
+              location: updates.location,
+              countryCode: updates.countryCode,
+              certPath: updates.certPath,
+              keyPath: updates.keyPath,
+              natPublicIp: normalizedNatPublicIp,
+              natBindIp: normalizedNatBindIp,
+              natBindIpv6: normalizedNatBindIpv6,
+              natPortStart: updates.natConfig?.portRangeStart,
+              natPortEnd: updates.natConfig?.portRangeEnd,
+              ipv6ParentInterface: normalizedIpv6ParentInterface,
+              ipv6Subnet: normalizedIpv6Subnet,
+              trafficResetDay: updates.trafficResetDay,
+              notifyPurchase: updates.notifyPurchase,
+              notifyRenew: updates.notifyRenew,
+              notifyDestroy: updates.notifyDestroy
+            }, tx)
+
+            if (updates.cpuAllowanceMax !== undefined || updates.memoryMax !== undefined || updates.instanceType !== undefined) {
+              await db.updateHostResources(hostId, {
+                cpuAllowanceMax: updates.cpuAllowanceMax,
+                memoryMax: updates.memoryMax,
+                instanceType: updates.instanceType
+              }, tx)
+            }
+
+            if (updates.transferEnabled !== undefined) {
+              await tx.host.update({
+                where: { id: hostId },
+                data: { transferEnabled: updates.transferEnabled }
+              })
+            }
+
+            if (updates.enableResourcePool !== undefined) {
+              await tx.host.update({
+                where: { id: hostId },
+                data: { enableResourcePool: updates.enableResourcePool }
+              })
+            }
+
+            if (updates.announcement !== undefined) {
+              await tx.host.update({
+                where: { id: hostId },
+                data: { announcement: updates.announcement || null }
+              })
+            }
+
+            if (updates.probeUrl !== undefined) {
+              await tx.host.update({
+                where: { id: hostId },
+                data: { probeUrl: updates.probeUrl || null }
+              })
+            }
+
+            // 更新 NAT 公网 IPv6
+            if (normalizedNatPublicIpv6 !== undefined) {
+              await tx.host.update({
+                where: { id: hostId },
+                data: { natPublicIpv6: normalizedNatPublicIpv6 }
+              })
+            }
+            if (normalizedNatBindIp !== undefined || normalizedNatBindIpv6 !== undefined) {
+              await tx.host.update({
+                where: { id: hostId },
+                data: {
+                  ...(normalizedNatBindIp !== undefined ? { natBindIp: normalizedNatBindIp } : {}),
+                  ...(normalizedNatBindIpv6 !== undefined ? { natBindIpv6: normalizedNatBindIpv6 } : {})
+                }
+              })
+            }
+
+            await persistHostAddressSnapshot(hostId, lockedSnapshot, 'update', tx)
+          })
+        })
+      } else {
+        await prisma.$transaction(async tx => {
+          await db.updateHost(hostId, {
+            name: updates.name,
+            url: updates.url,
+            location: updates.location,
+            countryCode: updates.countryCode,
+            certPath: updates.certPath,
+            keyPath: updates.keyPath,
+            natPublicIp: normalizedNatPublicIp,
+            natBindIp: normalizedNatBindIp,
+            natBindIpv6: normalizedNatBindIpv6,
+            natPortStart: updates.natConfig?.portRangeStart,
+            natPortEnd: updates.natConfig?.portRangeEnd,
+            ipv6ParentInterface: normalizedIpv6ParentInterface,
+            ipv6Subnet: normalizedIpv6Subnet,
+            trafficResetDay: updates.trafficResetDay,
+            notifyPurchase: updates.notifyPurchase,
+            notifyRenew: updates.notifyRenew,
+            notifyDestroy: updates.notifyDestroy
+          }, tx)
+
+          if (updates.cpuAllowanceMax !== undefined || updates.memoryMax !== undefined || updates.instanceType !== undefined) {
+            await db.updateHostResources(hostId, {
+              cpuAllowanceMax: updates.cpuAllowanceMax,
+              memoryMax: updates.memoryMax,
+              instanceType: updates.instanceType
+            }, tx)
+          }
+
+          if (updates.transferEnabled !== undefined) {
+            await tx.host.update({
+              where: { id: hostId },
+              data: { transferEnabled: updates.transferEnabled }
+            })
+          }
+
+          if (updates.enableResourcePool !== undefined) {
+            await tx.host.update({
+              where: { id: hostId },
+              data: { enableResourcePool: updates.enableResourcePool }
+            })
+          }
+
+          if (updates.announcement !== undefined) {
+            await tx.host.update({
+              where: { id: hostId },
+              data: { announcement: updates.announcement || null }
+            })
+          }
+
+          if (updates.probeUrl !== undefined) {
+            await tx.host.update({
+              where: { id: hostId },
+              data: { probeUrl: updates.probeUrl || null }
+            })
+          }
+
+          // 更新 NAT 公网 IPv6
+          if (normalizedNatPublicIpv6 !== undefined) {
+            await tx.host.update({
+              where: { id: hostId },
+              data: { natPublicIpv6: normalizedNatPublicIpv6 }
+            })
+          }
+          if (normalizedNatBindIp !== undefined || normalizedNatBindIpv6 !== undefined) {
+            await tx.host.update({
+              where: { id: hostId },
+              data: {
+                ...(normalizedNatBindIp !== undefined ? { natBindIp: normalizedNatBindIp } : {}),
+                ...(normalizedNatBindIpv6 !== undefined ? { natBindIpv6: normalizedNatBindIpv6 } : {})
+              }
+            })
+          }
+
+        })
+      }
+    } catch (error) {
+      if (error instanceof HostAddressRegistryError) {
+        if (error.errorCode === ErrorCode.HOST_ADDRESS_UNRESOLVABLE) {
+          await logHostAddressResolutionFailure(request.user.id, `${host.name}(#${hostId})`, updates.url || host.url, 'update', error)
+        }
+        return reply.code(400).send(apiError(error.errorCode as ErrorCodeType, error.details))
+      }
+      throw error
+    }
+
+    // 检测节点类型变更影响的套餐
+    let incompatiblePackages: Array<{ id: number; name: string; instanceType: string }> = []
+    if (updates.instanceType !== undefined && updates.instanceType !== host.instance_type) {
+      incompatiblePackages = await db.getIncompatiblePackagesByHostTypeChange(hostId, updates.instanceType)
+    }
+
+    // 如果证书配置或 URL 变更，移除旧连接
+    if (updates.certPath || updates.keyPath || updates.url) {
+      await removeIncusClient(hostId)
+    }
+
+    // 构建变更详情
+    const changes: string[] = []
+    if (updates.name) changes.push(`name -> "${updates.name}"`)
+    if (updates.url) changes.push(`url -> ${updates.url}`)
+    if (updates.location) changes.push(`location -> ${updates.location}`)
+    if (updates.cpuAllowanceMax !== undefined) changes.push(`cpuMax -> ${updates.cpuAllowanceMax}%`)
+    if (updates.memoryMax !== undefined) changes.push(`memoryMax -> ${updates.memoryMax}MB`)
+    if (updates.instanceType) changes.push(`instanceType -> ${updates.instanceType}`)
+    if (updates.natConfig?.publicIp) changes.push(`natPublicIp -> ${updates.natConfig.publicIp}`)
+    if (updates.transferEnabled !== undefined) changes.push(`transferEnabled -> ${updates.transferEnabled}`)
+    if (updates.trafficResetDay !== undefined) changes.push(`trafficResetDay -> ${updates.trafficResetDay}`)
+    if (updates.notifyPurchase !== undefined) changes.push(`notifyPurchase -> ${updates.notifyPurchase}`)
+    if (updates.notifyRenew !== undefined) changes.push(`notifyRenew -> ${updates.notifyRenew}`)
+    if (updates.notifyDestroy !== undefined) changes.push(`notifyDestroy -> ${updates.notifyDestroy}`)
+
+    await createLog(
+      request.user.id,
+      'host',
+      'host.update',
+      `Updated host "${host.name}" [${changes.length > 0 ? changes.join(', ') : 'no major changes'}]`,
+      'success'
+    )
+
+    // 返回结果，如果有不兼容的套餐，返回警告
+    if (incompatiblePackages.length > 0) {
+      return {
+        message: 'Host config updated',
+        warnings: [{
+          code: 'INCOMPATIBLE_PACKAGES',
+          message: `节点类型变更后，以下套餐可能无法使用该节点创建实例`,
+          packages: incompatiblePackages
+        }]
+      }
+    }
+
+    return { message: 'Host config updated' }
+  })
+
+  // 设置维护模式（管理员或节点所有者）
+  fastify.post<{
+    Params: { id: string }
+    Body: { enabled: boolean }
+  }>('/:id/maintenance', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['enabled'],
+        properties: {
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { enabled: boolean }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { enabled } = request.body
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const newStatus = enabled ? 'maintenance' : 'online'
+    await db.updateHostStatus(hostId, newStatus)
+
+    await createLog(
+      request.user.id,
+      'host',
+      enabled ? 'host.maintenance.enable' : 'host.maintenance.disable',
+      `${enabled ? 'Enabled' : 'Disabled'} maintenance mode for host "${host.name}"`,
+      'success'
+    )
+
+    return {
+      message: enabled ? 'Maintenance mode enabled' : 'Maintenance mode disabled'
+    }
+  })
+
+  // 同步宿主机资源使用情况（管理员或节点所有者）
+  fastify.post<{ Params: { id: string } }>('/:id/sync', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+
+      // 获取资源信息（物理资源）
+      const resources = await client.getResources() as {
+        cpu?: { total?: number }
+        memory?: { total?: number }
+        storage?: {
+          disks?: Array<{ size?: number }>
+          pools?: Record<string, { space?: { total?: number } }>
+          total?: number
+        }
+      }
+
+      // 获取磁盘大小
+      let diskTotalBytes = 0
+      if (resources.storage?.disks && Array.isArray(resources.storage.disks) && resources.storage.disks.length > 0) {
+        diskTotalBytes = resources.storage.disks.reduce((sum: number, disk: { size?: number }) => sum + (disk.size || 0), 0)
+      }
+      if (diskTotalBytes === 0 && resources.storage?.pools) {
+        for (const pool of Object.values(resources.storage.pools)) {
+          const poolData = pool as { space?: { total?: number } }
+          diskTotalBytes += poolData.space?.total || 0
+        }
+      }
+      if (diskTotalBytes === 0) {
+        diskTotalBytes = 1024 * 1024 * 1024 * 1024 // 默认 1TB
+      }
+
+      // 只更新宿主机状态为在线，不覆盖任何用户输入的信息
+      await db.updateHostStatus(hostId, 'online')
+
+      // 自动检测宿主机公网 IPv6（仅在未手动配置时自动填入）
+      const detectedIpv6 = extractHostPublicIpv6FromResources(resources as Record<string, unknown>)
+      if (detectedIpv6 && !host.nat_public_ipv6) {
+        await prisma.host.update({
+          where: { id: hostId },
+          data: { natPublicIpv6: detectedIpv6 }
+        })
+        request.log.info(`[sync] Auto-detected host IPv6: ${detectedIpv6} for host ${host.name}`)
+      }
+
+      // 基于数据库实例统计已用资源（排除已删除的实例）
+      const usedResources = await db.calculateHostResourcesFromInstances(hostId)
+
+      // 只更新资源使用情况（已用资源），不修改用户设置的上限
+      await db.updateHostResources(hostId, {
+        cpuUsed: usedResources.cpuUsed,
+        memoryUsed: usedResources.memoryUsed,
+        diskUsed: usedResources.diskUsed
+      })
+
+      // 获取实例数量（用于返回）
+      const instanceCount = await db.getInstanceCountByHost(hostId)
+
+      return {
+        message: 'Sync completed',
+        instances: instanceCount,
+        resources: {
+          cpuUsed: usedResources.cpuUsed,
+          memoryUsed: usedResources.memoryUsed,
+          diskUsed: usedResources.diskUsed
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 批量删除实例预览（计算退款信息）
+  fastify.post<{
+    Params: { id: string }
+    Body: { instanceIds: number[] }
+  }>('/:id/instances/batch-delete-preview', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以操作
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取所有实例
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: { not: 'deleted' }
+      },
+      include: {
+        user: {
+          select: { id: true, username: true }
+        }
+      }
+    })
+
+    // 计算每个实例的退款信息
+    const instancePreviews = await Promise.all(instances.map(async (instance) => {
+      const refundInfo = await db.calculateInstanceRefund({
+        id: instance.id,
+        billingPrice: instance.billingPrice,
+        billingCycle: instance.billingCycle,
+        expiresAt: instance.expiresAt,
+        packagePlanId: instance.packagePlanId
+      })
+      
+      return {
+        id: instance.id,
+        name: instance.name,
+        username: instance.user.username,
+        userId: instance.user.id,
+        isOwnInstance: instance.userId === host.user_id,
+        isPaid: refundInfo.isPaid,
+        remainingDays: refundInfo.remainingDays,
+        refundAmount: refundInfo.refundAmount
+      }
+    }))
+
+    // 计算总退款金额（仅计算他人的付费实例）
+    const totalRefundAmount = instancePreviews
+      .filter(p => !p.isOwnInstance && p.isPaid)
+      .reduce((sum, p) => sum + p.refundAmount, 0)
+
+    return {
+      instances: instancePreviews,
+      totalRefundAmount: Number(totalRefundAmount.toFixed(2))
+    }
+  })
+
+  // 批量删除宿主机上的实例（管理员或节点所有者）
+  fastify.delete<{
+    Params: { id: string }
+    Body: { instanceIds: number[]; reason?: string; databaseOnly?: boolean }
+  }>('/:id/instances/batch', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          },
+          reason: { type: 'string', maxLength: 500 },
+          databaseOnly: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds, reason, databaseOnly } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以批量删除
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取所有实例并验证它们属于该节点
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: { not: 'deleted' }
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可删除的实例' })
+    }
+
+    const results: { id: number; name: string; success: boolean; error?: string; refundAmount?: number }[] = []
+    let totalRefundAmount = 0
+    let client: IncusClient | null = null
+    const deferredNotifications: Array<() => Promise<void>> = []
+
+    if (!databaseOnly) {
+      try {
+        client = await getIncusClient(host)
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        fastify.log.error(`获取 Incus 客户端失败: ${errorMessage}`)
+      }
+    }
+
+    // 导入必要的函数
+    const incusInstanceOperations = databaseOnly
+      ? null
+      : await import('../lib/incus/index.js')
+    const { getProxySitesByInstanceId, deleteProxySite } = await import('../db/proxy-sites.js')
+    const incusSnapshotOperations = databaseOnly
+      ? null
+      : await import('../lib/incus/incus-snapshots.js')
+    const incusBackupOperations = databaseOnly
+      ? null
+      : await import('../lib/incus/incus-backups.js')
+
+    for (const instance of instances) {
+      try {
+        // ===== 0. 检查转移锁定、恢复任务和上传任务 =====
+        // 注意：批量删除接口只允许宿主机拥有者调用，所以不需要检查套餐限制
+        const hasPendingTransfer = await db.hasPendingTransfer(instance.id)
+        if (hasPendingTransfer) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例有待处理的转移请求' })
+          continue
+        }
+
+        const activeRestoreTask = await prisma.restoreTask.findFirst({
+          where: { instanceId: instance.id, status: { in: ['PENDING', 'PROCESSING'] } }
+        })
+        if (activeRestoreTask) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例有正在进行的恢复任务' })
+          continue
+        }
+
+        const activeUploadTask = await prisma.backupUploadTask.findFirst({
+          where: { instanceId: instance.id, status: { in: ['PENDING', 'PROCESSING'] } }
+        })
+        if (activeUploadTask) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例有正在进行的上传任务' })
+          continue
+        }
+
+        // ===== 1. 删除反代站点（完整删除清 Caddy，DB-only 只清数据库）=====
+        const proxySites = await getProxySitesByInstanceId(instance.id)
+        if (proxySites.length > 0) {
+          // 仅完整删除模式尝试删除 Caddy 远程配置；DB-only 无论宿主机是否在线都不碰远端。
+          if (!databaseOnly && host.caddy_enabled && host.caddy_username && host.caddy_password) {
+            const targetHost = host.nat_public_ip || host.ip_address
+            if (targetHost) {
+              const caddyClient = createCaddyClient({
+                host: targetHost,
+                port: host.caddy_port || 8444,
+                username: host.caddy_username,
+                password: host.caddy_password
+              })
+              for (const site of proxySites) {
+                try {
+                  await caddyClient.deleteSite(site.domain)
+                } catch (caddyError) {
+                  // 忽略 Caddy 删除错误
+                }
+              }
+            }
+          }
+          // 始终删除数据库记录
+          for (const site of proxySites) {
+            await deleteProxySite(site.id)
+          }
+        }
+
+        // ===== 2. 删除端口映射（完整删除清 Incus 设备，DB-only 只清数据库）=====
+        const portMappings = await db.getPortMappings(instance.id)
+        if (portMappings && portMappings.length > 0) {
+          for (const mapping of portMappings) {
+            const map = mapping as { id: number; protocol: string; public_port: number }
+            // 仅完整删除模式尝试删除 Incus 设备；DB-only 无论宿主机是否在线都不碰远端。
+            if (client && incusInstanceOperations) {
+              const deviceName = `proxy-${map.protocol}-${map.public_port}`
+              try {
+                await incusInstanceOperations.removeDevice(client, instance.incusId, deviceName)
+              } catch (deviceError) {
+                // 忽略设备删除错误
+              }
+            }
+            // 始终删除数据库记录
+            await db.deletePortMapping(map.id)
+          }
+        }
+
+        // ===== 3. 删除快照（完整删除清 Incus 快照，DB-only 只清数据库）=====
+        const snapshots = await db.getSnapshotsByInstanceId(instance.id)
+        if (snapshots.length > 0) {
+          for (const snapshot of snapshots) {
+            // 仅完整删除模式尝试删除 Incus 快照；DB-only 无论宿主机是否在线都不碰远端。
+            if (client && incusSnapshotOperations) {
+              try {
+                await incusSnapshotOperations.deleteSnapshot(client, instance.incusId, snapshot.incus_name)
+              } catch (snapshotError) {
+                // 忽略快照删除错误
+              }
+            }
+            // 始终删除数据库记录
+            await db.deleteSnapshot(snapshot.id)
+          }
+        }
+
+        // ===== 4. 删除备份（完整删除清 Incus 备份，DB-only 只清数据库）=====
+        const backups = await db.getBackupsByInstanceId(instance.id)
+        if (backups.length > 0) {
+          for (const backup of backups) {
+            // 仅完整删除模式尝试删除 Incus 备份；DB-only 无论宿主机是否在线都不碰远端。
+            if (client && incusBackupOperations) {
+              try {
+                await incusBackupOperations.deleteBackup(client, instance.incusId, backup.incus_name)
+              } catch (backupError) {
+                // 忽略备份删除错误
+              }
+            }
+            // 始终软删除数据库记录
+            await db.deleteBackup(backup.id)
+          }
+        }
+
+        // ===== 5. 删除快照策略和备份策略 =====
+        try {
+          await prisma.snapshotPolicy.deleteMany({ where: { instanceId: instance.id } })
+          await prisma.backupPolicy.deleteMany({ where: { instanceId: instance.id } })
+        } catch (policyError) {
+          // 忽略策略删除错误
+        }
+
+        // ===== 5.1 删除流量相关记录 =====
+        try {
+          await prisma.trafficSnapshot.deleteMany({ where: { instanceId: instance.id } })
+          await prisma.dailyTraffic.deleteMany({ where: { instanceId: instance.id } })
+        } catch (trafficError) {
+          // 忽略流量记录删除错误
+        }
+
+        // ===== 5.2 删除 IP 地址和 IPv6 网段记录 =====
+        try {
+          await prisma.ipAddress.deleteMany({ where: { instanceId: instance.id } })
+          await prisma.ipv6Subnet.deleteMany({ where: { instanceId: instance.id } })
+        } catch (ipError) {
+          // 忽略 IP 记录删除错误
+        }
+
+        // ===== 5.3 删除历史任务记录（已完成/失败的恢复任务和上传任务）=====
+        try {
+          await prisma.restoreTask.deleteMany({ 
+            where: { instanceId: instance.id, status: { in: ['COMPLETED', 'FAILED'] } } 
+          })
+          await prisma.backupUploadTask.deleteMany({ 
+            where: { instanceId: instance.id, status: { in: ['COMPLETED', 'FAILED'] } } 
+          })
+        } catch (taskError) {
+          // 忽略任务记录删除错误
+        }
+
+        // ===== 5.4 取消待处理的转移请求 =====
+        try {
+          await prisma.instanceTransfer.updateMany({
+            where: { instanceId: instance.id, status: 'pending' },
+            data: { status: 'cancelled', cancelledAt: new Date() }
+          })
+        } catch (transferError) {
+          // 忽略转移请求取消错误
+        }
+
+        // ===== 6. 停止并删除 Incus 实例（完整删除模式专属）=====
+        if (client && incusInstanceOperations) {
+          try {
+            if (instance.status === 'running') {
+              await incusInstanceOperations.stopInstance(client, instance.incusId, true)
+            }
+            await incusInstanceOperations.deleteInstance(client, instance.incusId)
+          } catch (incusError) {
+            const errorMessage = incusError instanceof Error ? incusError.message : String(incusError)
+            fastify.log.warn(`Incus 删除实例失败 (${instance.name}): ${errorMessage}`)
+          }
+        }
+
+        // ===== 7. 更新实例状态为 deleted =====
+        await db.updateInstanceStatus(instance.id, 'deleted')
+
+        // ===== 8. 释放资源配额 =====
+        const portMappingsCount = portMappings?.length || 0
+        await db.rollbackResources({
+          hostId: instance.hostId,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          disk: instance.disk,
+          portCount: portMappingsCount
+        })
+
+        // ===== 9. 处理退款（节点所有者删除他人的付费实例时）=====
+        let refundAmount = 0
+        if (instance.userId !== host.user_id) {
+          // 删除的是他人的实例，检查是否需要退款
+          const refundInfo = await db.calculateInstanceRefund({
+            id: instance.id,
+            billingPrice: instance.billingPrice,
+            billingCycle: instance.billingCycle,
+            expiresAt: instance.expiresAt,
+            packagePlanId: instance.packagePlanId
+          })
+          
+          if (refundInfo.isPaid && refundInfo.refundAmount > 0) {
+            refundAmount = refundInfo.refundAmount
+            
+            // 执行退款事务
+            await prisma.$transaction(async (tx) => {
+              // 获取用户当前余额
+              const instanceOwner = await tx.user.findUnique({
+                where: { id: instance.userId },
+                select: { balance: true }
+              })
+              const oldBalance = Number(instanceOwner?.balance || 0)
+              const newBalance = oldBalance + refundAmount
+              
+              // 退款给实例所有者
+              await tx.user.update({
+                where: { id: instance.userId },
+                data: { balance: { increment: refundAmount } }
+              })
+              
+              // 记录余额日志
+              await tx.balanceLog.create({
+                data: {
+                  userId: instance.userId,
+                  type: 'refund',
+                  amount: refundAmount,
+                  balanceBefore: oldBalance,
+                  balanceAfter: newBalance,
+                  instanceId: instance.id,
+                  remark: `托管实例被删除退款：${instance.name}`
+                }
+              })
+            })
+            
+            // 从节点所有者托管余额扣除
+            await db.deductHostingBalance(
+              hostId,
+              refundAmount,
+              instance.id,
+              `删除托管实例退款扣除：${instance.name}`
+            )
+            
+            totalRefundAmount += refundAmount
+          }
+        }
+
+        // ===== 10. 发送删除通知给实例所有者 =====
+        // 如果提供了删除原因，发送特定通知
+        const deleteReason = reason?.trim()
+        const sendDeleteNotification = () => deleteReason
+          ? sendNotification(instance.userId, 'instance_deleted_by_host_owner', {
+              instanceName: instance.name,
+              hostName: host.name,
+              deleteReason
+            })
+          : sendNotification(instance.userId, 'instance_deleted', {
+              instanceName: instance.name,
+              hostName: host.name
+            })
+
+        // DB-only 是强制仅数据库模式，无论宿主机是否在线都不等待外部通知渠道。
+        if (databaseOnly) {
+          deferredNotifications.push(async () => {
+            try {
+              await sendDeleteNotification()
+            } catch (notifyError) {
+              const errorMessage = notifyError instanceof Error ? notifyError.message : String(notifyError)
+              fastify.log.warn(`异步发送删除通知失败 (${instance.name}): ${errorMessage}`)
+            }
+          })
+        } else {
+          await sendDeleteNotification()
+        }
+
+        results.push({ id: instance.id, name: instance.name, success: true, refundAmount: refundAmount > 0 ? refundAmount : undefined })
+
+        await createLog(
+          user.id,
+          'instance',
+          'instance.batch_delete',
+          `Batch deleted instance "${instance.name}" on host "${host.name}"${refundAmount > 0 ? ` (refund: ¥${refundAmount.toFixed(2)})` : ''}`,
+          'success'
+        )
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        results.push({ id: instance.id, name: instance.name, success: false, error: errorMessage })
+        fastify.log.error(`批量删除实例失败 (${instance.name}): ${errorMessage}`)
+      }
+    }
+
+    // ===== 批量删除完成后，按 packageId 汇总发送资源释放通知 =====
+    const releaseMap = new Map<number, { cpu: number; memory: number; count: number }>()
+    for (const instance of instances) {
+      const result = results.find(r => r.id === instance.id)
+      if (result?.success && instance.packageId) {
+        const existing = releaseMap.get(instance.packageId) || { cpu: 0, memory: 0, count: 0 }
+        existing.cpu += instance.cpu
+        existing.memory += instance.memory
+        existing.count += 1
+        releaseMap.set(instance.packageId, existing)
+      }
+    }
+    for (const [packageId, released] of releaseMap) {
+      sendReleaseNotification({
+        packageId,
+        cpu: released.cpu,
+        memory: released.memory,
+        source: `节点所有者批量删除 ${released.count} 个实例`
+      }).catch(() => {})
+    }
+
+    // 重新计算宿主机资源使用量（包括端口）
+    try {
+      const usedResources = await db.calculateHostResourcesFromInstances(hostId)
+      // 重新计算端口映射使用量
+      const actualPortsUsed = await prisma.portMapping.count({
+        where: {
+          instance: {
+            hostId: hostId,
+            status: { not: 'deleted' }
+          }
+        }
+      })
+      await db.updateHostResources(hostId, {
+        cpuUsed: usedResources.cpuUsed,
+        memoryUsed: usedResources.memoryUsed,
+        diskUsed: usedResources.diskUsed
+      })
+      // 更新端口使用量
+      await prisma.host.update({
+        where: { id: hostId },
+        data: { natPortsUsedCount: actualPortsUsed }
+      })
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : String(err)
+      fastify.log.error(`更新宿主机资源失败: ${errMsg}`)
+    }
+
+    const successCount = results.filter(r => r.success).length
+    const failedCount = results.filter(r => !r.success).length
+
+    if (deferredNotifications.length > 0) {
+      setImmediate(() => {
+        for (const sendDeferredNotification of deferredNotifications) {
+          void sendDeferredNotification()
+        }
+      })
+    }
+
+    return {
+      message: `成功删除 ${successCount} 个实例${failedCount > 0 ? `，${failedCount} 个失败` : ''}${totalRefundAmount > 0 ? `，共退款 ¥${totalRefundAmount.toFixed(2)}` : ''}`,
+      results,
+      successCount,
+      failedCount,
+      totalRefundAmount: Number(totalRefundAmount.toFixed(2))
+    }
+  })
+
+  // 删除宿主机（管理员或节点所有者）
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查是否有运行中的实例
+    const instanceCount = await db.getInstanceCountByHost(hostId)
+    if (instanceCount > 0) {
+      return reply.code(400).send({
+        error: `该宿主机上还有 ${instanceCount} 个实例，请先删除或迁移实例`
+      })
+    }
+
+    // 移除连接
+    await removeIncusClient(hostId)
+
+    // 删除记录
+    await db.deleteHost(hostId)
+
+    // 注意：已取消配额限制，不再更新 hostUsed
+
+    await createLog(
+      request.user.id,
+      'host',
+      'host.delete',
+      `Deleted host "${host.name}" [url: ${host.url}, location: ${host.location || 'N/A'}]`,
+      'success'
+    )
+
+    return { message: 'Host deleted' }
+  })
+
+  // ============ 存储池管理 API ============
+
+  // 获取宿主机存储池列表
+  fastify.get<{ Params: { id: string } }>('/:id/storage-pools', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      // 添加调试日志，帮助排查 HOST_NOT_FOUND 问题
+      console.warn(`[HOST_NOT_FOUND] GET /hosts/${request.params.id}/storage-pools - hostId=${hostId}, userId=${user.id}, username=${user.username}`)
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以查看
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+      const pools = await listStoragePools(client)
+
+      // 从数据库获取存储池的用途信息
+      const dbPools = await db.getStoragePoolsByHostId(hostId)
+      const purposeMap = new Map(dbPools.map(p => [p.name, p.purpose]))
+
+      // 获取每个存储池的资源使用情况
+      const poolsWithResources = await Promise.all(
+        pools.map(async (pool) => {
+          try {
+            const resources = await getStoragePoolResources(client, pool.name)
+            return {
+              name: pool.name,
+              driver: pool.driver,
+              status: pool.status || 'Created',
+              description: pool.description || '',
+              purpose: purposeMap.get(pool.name) || null,
+              config: pool.config || {},
+              usedBy: pool.used_by?.length || 0,
+              space: resources.space || null
+            }
+          } catch {
+            return {
+              name: pool.name,
+              driver: pool.driver,
+              status: pool.status || 'Created',
+              description: pool.description || '',
+              purpose: purposeMap.get(pool.name) || null,
+              config: pool.config || {},
+              usedBy: pool.used_by?.length || 0,
+              space: null
+            }
+          }
+        })
+      )
+
+      return { pools: poolsWithResources }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      request.log.error(err, 'Failed to get storage pools')
+      return reply.code(500).send({ error: `获取存储池列表失败: ${errorMessage}` })
+    }
+  })
+
+  // 创建存储池
+  // 支持三种模式：
+  // 1. 创建新存储池：需要提供 source（物理盘/路径）或 size（Loop 文件大小）
+  // 2. 关联已有存储池：useExisting=true，Incus 已知的存储池，直接关联到数据库
+  // 3. 导入底层已有存储池：useExisting=true + driver + existingSource，Incus 未知但底层已存在的存储池
+  //    例如：用户手动创建了 ZFS 池，但 Incus 还不知道它的存在
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      name: string
+      driver?: 'zfs' | 'lvm' | 'btrfs' | 'dir'
+      source?: string
+      size?: string
+      zfsPoolName?: string
+      lvmVgName?: string
+      lvmThinpoolName?: string
+      lvmUseThinpool?: boolean
+      description?: string
+      purpose?: 'instance_data' | 'instance_storage'
+      useExisting?: boolean
+      existingSource?: string  // 底层已存在的存储源名称（如 ZFS 池名、LVM VG 名）
+    }
+  }>('/:id/storage-pools', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 64 },
+          driver: { type: 'string', enum: ['zfs', 'lvm', 'btrfs', 'dir'] },
+          source: { type: 'string' },
+          size: { type: 'string' },
+          zfsPoolName: { type: 'string' },
+          lvmVgName: { type: 'string' },
+          lvmThinpoolName: { type: 'string' },
+          lvmUseThinpool: { type: 'boolean' },
+          description: { type: 'string' },
+          purpose: { type: 'string', enum: ['instance_data', 'instance_storage'] },
+          useExisting: { type: 'boolean' },
+          existingSource: { type: 'string' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const { name, driver, source, size, zfsPoolName, lvmVgName, lvmThinpoolName, lvmUseThinpool, description, purpose, useExisting, existingSource } = request.body
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以创建
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+
+      // 模式2/3：使用/导入已有存储池
+      if (useExisting) {
+        // 检查数据库中是否已关联
+        const existingInDb = await prisma.storagePool.findFirst({
+          where: { hostId, name }
+        })
+        if (existingInDb) {
+          return reply.code(400).send({ error: `存储池 "${name}" 已在系统中关联` })
+        }
+
+        // 尝试从 Incus 获取已有存储池信息
+        const { getStoragePool } = await import('../lib/incus/incus-storage.js')
+        let poolInfo
+        try {
+          poolInfo = await getStoragePool(client, name)
+        } catch {
+          // Incus 不知道这个存储池，尝试导入底层已有的存储池
+          poolInfo = null
+        }
+
+        if (poolInfo) {
+          // 模式2：Incus 已知的存储池，直接关联
+          await db.createStoragePool({
+            hostId,
+            name,
+            driver: poolInfo.driver,
+            purpose: purpose || 'instance_data',
+            description: description || poolInfo.description || null,
+            config: poolInfo.config || {}
+          })
+
+          await createLog(
+            user.id,
+            'host',
+            'storage.link',
+            `Linked existing storage pool "${name}" (${poolInfo.driver}) on host "${host.name}"`,
+            'success'
+          )
+
+          return reply.code(201).send({ message: '存储池关联成功', name, driver: poolInfo.driver })
+        }
+
+        // 模式3：Incus 未知但底层已存在的存储池，需要导入
+        // 需要用户提供驱动类型和底层存储源名称
+        if (!driver) {
+          return reply.code(400).send({ 
+            error: `存储池 "${name}" 在 Incus 中不存在。如需导入底层已有的存储池，请选择驱动类型并提供存储源名称。` 
+          })
+        }
+
+        // Btrfs 和 DIR 类型必须提供有效的存储源路径
+        if ((driver === 'btrfs' || driver === 'dir') && !existingSource) {
+          return reply.code(400).send({ 
+            error: `${driver.toUpperCase()} 类型必须提供底层存储源路径` 
+          })
+        }
+
+        // 根据驱动类型构建导入配置
+        const importConfig: Record<string, string> = {}
+        let sourceValue = existingSource || name  // 默认使用存储池名称作为源
+
+        switch (driver) {
+          case 'zfs':
+            // source 是 ZFS 池名称
+            importConfig['source'] = sourceValue
+            break
+          case 'lvm':
+            // source 是 VG 名称
+            importConfig['source'] = sourceValue
+            importConfig['lvm.use_thinpool'] = 'false'  // 导入时默认不使用 thinpool
+            break
+          case 'btrfs':
+            // source 是设备路径或子卷路径
+            importConfig['source'] = sourceValue
+            break
+          case 'dir':
+            // source 是目录路径
+            importConfig['source'] = sourceValue
+            break
+        }
+
+        // 使用 source 参数在 Incus 中创建存储池（实际是导入已有的）
+        await createStoragePool(client, { name, driver, config: importConfig })
+
+        // 重新获取存储池信息
+        const importedPoolInfo = await getStoragePool(client, name)
+
+        // 保存到数据库
+        await db.createStoragePool({
+          hostId,
+          name,
+          driver,
+          purpose: purpose || 'instance_data',
+          description: description || null,
+          config: importedPoolInfo.config || importConfig
+        })
+
+        await createLog(
+          user.id,
+          'host',
+          'storage.import',
+          `Imported existing ${driver.toUpperCase()} storage "${sourceValue}" as pool "${name}" on host "${host.name}"`,
+          'success'
+        )
+
+        return reply.code(201).send({ 
+          message: '存储池导入成功', 
+          name, 
+          driver,
+          imported: true 
+        })
+      }
+
+      // 模式1：创建新存储池
+      if (!driver) {
+        return reply.code(400).send({ error: '创建新存储池需要指定驱动类型' })
+      }
+
+      // 根据驱动类型构建配置
+      const config: Record<string, string> = {}
+
+      switch (driver) {
+        case 'zfs':
+          if (source) {
+            config['source'] = source
+          } else if (size) {
+            config['size'] = size
+          } else {
+            return reply.code(400).send({ error: 'ZFS 需要指定 source（物理盘）或 size（Loop 文件）' })
+          }
+          // zfs.pool_name 在两种模式下都应该生效
+          if (zfsPoolName) config['zfs.pool_name'] = zfsPoolName
+          break
+
+        case 'lvm':
+          if (source) {
+            config['source'] = source
+          } else if (size) {
+            config['size'] = size
+          } else {
+            return reply.code(400).send({ error: 'LVM 需要指定 source（物理盘）或 size（Loop 文件）' })
+          }
+          if (lvmVgName) config['lvm.vg_name'] = lvmVgName
+          if (lvmThinpoolName) config['lvm.thinpool_name'] = lvmThinpoolName
+          config['lvm.use_thinpool'] = lvmUseThinpool !== false ? 'true' : 'false'
+          break
+
+        case 'btrfs':
+          if (source) {
+            config['source'] = source
+          } else if (size) {
+            config['size'] = size
+          } else {
+            return reply.code(400).send({ error: 'Btrfs 需要指定 source（物理盘）或 size（Loop 文件）' })
+          }
+          break
+
+        case 'dir':
+          if (!source) {
+            return reply.code(400).send({ error: 'DIR 需要指定 source（目录路径）' })
+          }
+          config['source'] = source
+          break
+      }
+
+      await createStoragePool(client, { name, driver, config })
+
+      // 保存到数据库
+      await db.createStoragePool({
+        hostId,
+        name,
+        driver,
+        purpose: purpose || 'instance_data',
+        description: description || null,
+        config
+      })
+
+      await createLog(
+        user.id,
+        'host',
+        'storage.create',
+        `Created storage pool "${name}" (${driver}) on host "${host.name}"`,
+        'success'
+      )
+
+      return reply.code(201).send({ message: '存储池创建成功', name })
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      request.log.error(err, 'Failed to create storage pool')
+      return reply.code(500).send({ error: `创建存储池失败: ${errorMessage}` })
+    }
+  })
+
+  // 删除存储池
+  fastify.delete<{ Params: { id: string; poolName: string } }>('/:id/storage-pools/:poolName', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const { poolName } = request.params
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以删除
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+      await deleteStoragePool(client, poolName)
+
+      // 从数据库删除
+      await db.deleteStoragePool(hostId, poolName)
+
+      await createLog(
+        user.id,
+        'host',
+        'storage.delete',
+        `Deleted storage pool "${poolName}" from host "${host.name}"`,
+        'success'
+      )
+
+      return { message: '存储池删除成功' }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      request.log.error(err, 'Failed to delete storage pool')
+      return reply.code(500).send({ error: `删除存储池失败: ${errorMessage}` })
+    }
+  })
+
+  // 修改存储池配置
+  fastify.patch<{
+    Params: { id: string; poolName: string }
+    Body: {
+      size?: string
+      description?: string
+      purpose?: 'instance_data' | 'instance_storage'
+    }
+  }>('/:id/storage-pools/:poolName', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          size: { type: 'string' },
+          description: { type: 'string' },
+          purpose: { type: 'string', enum: ['instance_data', 'instance_storage'] }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const { poolName } = request.params
+    const { size, description, purpose } = request.body
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以修改
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 至少要有一个修改项
+    if (!size && description === undefined && purpose === undefined) {
+      return reply.code(400).send({ error: '请提供要修改的内容' })
+    }
+
+    try {
+      const client = await getIncusClient(host)
+      
+      // 构建更新配置
+      const config: Record<string, string> = {}
+      if (size) {
+        config['size'] = size
+      }
+
+      await updateStoragePool(client, poolName, {
+        config: Object.keys(config).length > 0 ? config : undefined,
+        description: description
+      })
+
+      // 更新数据库中的描述和用途（如果有）
+      if (description !== undefined || purpose !== undefined) {
+        const updateData: any = {}
+        if (description !== undefined) updateData.description = description
+        if (purpose !== undefined) updateData.purpose = purpose
+        await db.updateStoragePool(hostId, poolName, updateData)
+      }
+
+      await createLog(
+        user.id,
+        'host',
+        'storage.update',
+        `Updated storage pool "${poolName}" on host "${host.name}"`,
+        'success'
+      )
+
+      return { message: '存储池修改成功' }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      request.log.error(err, 'Failed to update storage pool')
+      return reply.code(500).send({ error: `修改存储池失败: ${errorMessage}` })
+    }
+  })
+
+  // ==================== Caddy 反代管理路由 ====================
+
+  /**
+   * 生成随机字符串
+   */
+  function generateRandomString(length: number): string {
+    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+    let result = ''
+    const randomBytes = crypto.randomBytes(length)
+    for (let i = 0; i < length; i++) {
+      result += chars[randomBytes[i] % chars.length]
+    }
+    return result
+  }
+
+  /**
+   * 生成 Caddy 脚本下载 token（有效期 30 分钟）
+   * 使用 HMAC-SHA256 签名，包含 hostId 和过期时间
+   */
+  function generateCaddyScriptToken(hostId: number): string {
+    const secret = process.env.JWT_SECRET || 'default-secret'
+    const expireAt = Date.now() + 30 * 60 * 1000 // 30 分钟有效期
+    const payload = `${hostId}:${expireAt}`
+    const signature = crypto.createHmac('sha256', secret).update(payload).digest('hex')
+    // 返回 base64url 编码的 token: hostId:expireAt:signature
+    return Buffer.from(`${payload}:${signature}`).toString('base64url')
+  }
+
+  /**
+   * 验证 Caddy 脚本下载 token
+   * @returns hostId 如果验证成功，否则返回 null
+   */
+  function verifyCaddyScriptToken(token: string): number | null {
+    try {
+      const decoded = Buffer.from(token, 'base64url').toString('utf-8')
+      const parts = decoded.split(':')
+      if (parts.length !== 3) return null
+      
+      const [hostIdStr, expireAtStr, signature] = parts
+      const hostId = parseInt(hostIdStr, 10)
+      const expireAt = parseInt(expireAtStr, 10)
+      
+      if (isNaN(hostId) || isNaN(expireAt)) return null
+      if (hostId <= 0) return null // hostId 必须是正整数
+      
+      // 检查是否过期
+      if (Date.now() > expireAt) return null
+      
+      // 验证签名（使用常量时间比较防止时序攻击）
+      const secret = process.env.JWT_SECRET || 'default-secret'
+      const payload = `${hostId}:${expireAt}`
+      const expectedSignature = crypto.createHmac('sha256', secret).update(payload).digest('hex')
+      
+      // 使用 timingSafeEqual 防止时序攻击
+      const signatureBuffer = Buffer.from(signature, 'utf-8')
+      const expectedBuffer = Buffer.from(expectedSignature, 'utf-8')
+      if (signatureBuffer.length !== expectedBuffer.length) return null
+      if (!crypto.timingSafeEqual(signatureBuffer, expectedBuffer)) return null
+      
+      return hostId
+    } catch {
+      return null
+    }
+  }
+
+  /**
+   * 获取宿主机 Caddy 状态和安装命令
+   * GET /hosts/:id/caddy
+   */
+  fastify.get<{
+    Params: { id: string }
+  }>('/:id/caddy', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.id, 10)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以查看
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 统计该宿主机的站点数量（从数据库）
+    const { getProxySiteCountByHost } = await import('../db/proxy-sites.js')
+    const sitesCount = await getProxySiteCountByHost(hostId)
+
+    return {
+      enabled: host.caddy_enabled || false,
+      username: host.caddy_username || null,
+      port: host.caddy_port || 8444,
+      // 不返回密码，只返回是否已配置
+      hasPassword: !!host.caddy_password,
+      natPublicIp: host.nat_public_ip || host.ip_address || null,
+      sitesCount
+    }
+  })
+
+  /**
+   * 生成 Caddy 安装命令（生成账号密码）
+   * POST /hosts/:id/caddy/generate
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/caddy/generate', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.id, 10)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以操作
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 如果已有凭据，复用现有的；否则生成新的
+    let username = host.caddy_username
+    let password = host.caddy_password
+    const port = host.caddy_port || 8444
+    let isNewCredentials = false
+
+    if (!username || !password) {
+      // 生成新凭据
+      username = 'caddy_' + generateRandomString(8)
+      password = generateRandomString(24)
+      isNewCredentials = true
+
+      // 更新数据库
+      await prisma.host.update({
+        where: { id: hostId },
+        data: {
+          caddyUsername: username,
+          caddyPassword: password,
+          caddyPort: port
+        }
+      })
+
+      await createLog(
+        user.id,
+        'host',
+        'caddy.generate',
+        `Generated Caddy credentials for host "${host.name}"`,
+        'success'
+      )
+    }
+
+    // 构建安装命令
+    // 使用FRONTEND_URL，如果包含多个URL（逗号分隔），使用第一个
+    const panelUrl = process.env.FRONTEND_URL
+      ? process.env.FRONTEND_URL.split(',')[0].trim()
+      : 'https://incudal.com'
+    // 生成带鉴权 token 的脚本下载 URL
+    const scriptToken = generateCaddyScriptToken(hostId)
+    const installCommand = `curl -sSL "${panelUrl}/api/hosts/caddy-script/${scriptToken}" | sudo bash -s -- --username "${username}" --password "${password}" --port ${port}`
+
+    return {
+      installCommand,
+      username,
+      password,
+      port,
+      isNewCredentials
+    }
+  })
+
+  /**
+   * 重置 Caddy 凭据
+   * POST /hosts/:id/caddy/reset
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/caddy/reset', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.id, 10)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 强制生成新凭据
+    const username = 'caddy_' + generateRandomString(8)
+    const password = generateRandomString(24)
+    const port = host.caddy_port || 8444
+
+    // 更新数据库，同时禁用 Caddy（需要重新安装）
+    await prisma.host.update({
+      where: { id: hostId },
+      data: {
+        caddyUsername: username,
+        caddyPassword: password,
+        caddyPort: port,
+        caddyEnabled: false
+      }
+    })
+
+    // 使用FRONTEND_URL，如果包含多个URL（逗号分隔），使用第一个
+    const panelUrl = process.env.FRONTEND_URL
+      ? process.env.FRONTEND_URL.split(',')[0].trim()
+      : 'https://incudal.com'
+    // 生成带鉴权 token 的脚本下载 URL
+    const scriptToken = generateCaddyScriptToken(hostId)
+    const installCommand = `curl -sSL "${panelUrl}/api/hosts/caddy-script/${scriptToken}" | sudo bash -s -- --username "${username}" --password "${password}" --port ${port}`
+
+    await createLog(
+      user.id,
+      'host',
+      'caddy.reset',
+      `Reset Caddy credentials for host "${host.name}"`,
+      'success'
+    )
+
+    return {
+      installCommand,
+      username,
+      password,
+      port
+    }
+  })
+
+  /**
+   * 确认 Caddy 已安装
+   * POST /hosts/:id/caddy/confirm
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/caddy/confirm', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.id, 10)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (!host.caddy_username || !host.caddy_password) {
+      request.log.warn({ hostId, hostName: host.name }, '[Caddy Confirm] 缺少凭据，请先生成安装命令')
+      return reply.code(400).send({ error: '请先生成安装命令' })
+    }
+
+    // 尝试连接测试
+    const targetHost = host.nat_public_ip || host.ip_address
+    if (!targetHost) {
+      request.log.warn({ hostId, hostName: host.name }, '[Caddy Confirm] 宿主机未配置公网 IP')
+      return reply.code(400).send({ error: '宿主机未配置公网 IP' })
+    }
+
+    request.log.info({
+      hostId,
+      hostName: host.name,
+      targetHost,
+      port: host.caddy_port || 8444,
+      username: host.caddy_username
+    }, '[Caddy Confirm] 开始测试连接')
+
+    const client = createCaddyClient({
+      host: targetHost,
+      port: host.caddy_port || 8444,
+      username: host.caddy_username,
+      password: host.caddy_password
+    })
+
+    const connected = await client.testConnection()
+    
+    request.log.info({
+      hostId,
+      hostName: host.name,
+      targetHost,
+      connected
+    }, '[Caddy Confirm] 连接测试结果')
+
+    if (!connected) {
+      request.log.warn({ hostId, hostName: host.name, targetHost }, '[Caddy Confirm] 无法连接到 Caddy')
+      return reply.code(400).send({ error: '无法连接到 Caddy，请确认已执行安装命令' })
+    }
+
+    // 更新状态
+    await prisma.host.update({
+      where: { id: hostId },
+      data: { caddyEnabled: true }
+    })
+
+    await createLog(
+      user.id,
+      'host',
+      'caddy.confirm',
+      `Confirmed Caddy installation for host "${host.name}"`,
+      'success'
+    )
+
+    return { message: 'Caddy 已确认安装' }
+  })
+
+  /**
+   * 获取 Caddy 安装脚本（需要 token 鉴权）
+   * GET /hosts/caddy-script/:token
+   */
+  fastify.get<{ Params: { token: string } }>('/caddy-script/:token', {
+    config: {
+      rateLimit: {
+        max: 10,
+        timeWindow: '1 minute'
+      }
+    }
+  }, async (request: FastifyRequest<{ Params: { token: string } }>, reply: FastifyReply) => {
+    const { token } = request.params
+
+    // 验证 token
+    const hostId = verifyCaddyScriptToken(token)
+    if (hostId === null) {
+      request.log.warn('Invalid or expired caddy script token')
+      return reply.code(403).send('# Error: Invalid or expired token')
+    }
+
+    // 验证宿主机存在
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      select: { id: true, name: true }
+    })
+    if (!host) {
+      request.log.warn(`Caddy script download failed: host ${hostId} not found`)
+      return reply.code(404).send('# Error: Host not found')
+    }
+
+    try {
+      const scriptPath = join(__dirname, '../../templates/caddy.sh')
+      const scriptContent = readFileSync(scriptPath, 'utf-8')
+      request.log.info(`Caddy script downloaded for host ${host.name}`)
+      reply.type('text/plain').send(scriptContent)
+    } catch (err) {
+      request.log.error(err, 'Failed to read caddy.sh')
+      return reply.code(500).send('# Error: Failed to read script')
+    }
+  })
+
+  /**
+   * 测试 Caddy 连接
+   * POST /hosts/:id/caddy/test
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/caddy/test', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.id, 10)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (!host.caddy_enabled || !host.caddy_username || !host.caddy_password) {
+      return reply.code(400).send({ error: 'Caddy 未启用' })
+    }
+
+    const targetHost = host.nat_public_ip || host.ip_address
+    if (!targetHost) {
+      return reply.code(400).send({ error: '宿主机未配置公网 IP' })
+    }
+
+    const client = createCaddyClient({
+      host: targetHost,
+      port: host.caddy_port || 8444,
+      username: host.caddy_username,
+      password: host.caddy_password
+    })
+
+    const connected = await client.testConnection()
+    
+    // 获取已配置的站点数量
+    const sites = connected ? await client.getSites() : []
+
+    return {
+      connected,
+      sitesCount: sites.length,
+      // 返回 DNS 解析类型提示
+      dnsRecordType: getDnsRecordType(targetHost),
+      dnsRecordValue: targetHost
+    }
+  })
+
+  /**
+   * 获取宿主机的所有反代站点列表
+   * GET /hosts/:id/caddy/sites
+   */
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>('/:id/caddy/sites', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.id, 10)
+    // 分页参数边界验证：page >= 1, pageSize 在 1-100 之间
+    const rawPage = parseInt(request.query.page || '1', 10)
+    const rawPageSize = parseInt(request.query.pageSize || '10', 10)
+    const page = isNaN(rawPage) || rawPage < 1 ? 1 : rawPage
+    const pageSize = isNaN(rawPageSize) ? 10 : Math.min(100, Math.max(1, rawPageSize))
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以查看
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取该宿主机上的所有反代站点
+    const { getProxySitesByHostId } = await import('../db/proxy-sites.js')
+    const allSites = await getProxySitesByHostId(hostId)
+
+    // 分页
+    const total = allSites.length
+    const totalPages = Math.ceil(total / pageSize)
+    const startIndex = (page - 1) * pageSize
+    const paginatedSites = allSites.slice(startIndex, startIndex + pageSize)
+
+    return {
+      sites: paginatedSites.map(site => ({
+        id: site.id,
+        domain: site.domain,
+        targetPort: site.targetPort,
+        httpsEnabled: site.httpsEnabled,
+        status: site.status,
+        enabled: site.enabled,
+        error: site.error,
+        createdAt: site.createdAt,
+        // 实例信息
+        instance: site.instance ? {
+          id: site.instance.id,
+          name: site.instance.name,
+          ipv4: site.instance.ipv4,
+          status: site.instance.status
+        } : null
+      })),
+      total,
+      page,
+      pageSize,
+      totalPages
+    }
+  })
+
+  // 批量同步实例状态（仅节点所有者）
+  fastify.post<{
+    Params: { id: string }
+    Body: { instanceIds: number[] }
+  }>('/:id/instances/sync-status', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以同步状态
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取所有实例并验证它们属于该节点
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: { notIn: ['deleted', 'creating'] } // 排除已删除和创建中的实例
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可同步的实例' })
+    }
+
+    // 获取 Incus 客户端
+    let client: IncusClient | null = null
+    try {
+      client = await getIncusClient(host)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(503).send({ error: `无法连接到节点: ${errorMessage}` })
+    }
+
+    // 导入状态同步相关函数
+    const { getInstance, getInstanceState } = await import('../lib/incus/incus-instances.js')
+    const { mapInstanceStatus } = await import('../lib/incus/incus-utils.js')
+    const { getProxySitesByInstanceId } = await import('../db/proxy-sites.js')
+
+    // 从 Incus state.network 中提取 IPv4 地址
+    // 优先选择 eth0 接口的 IP（这是我们配置的主网卡）
+    const results: { id: number; name: string; success: boolean; from?: string; to?: string; ipv4Changed?: boolean; oldIpv4?: string | null; newIpv4?: string | null; ipv6Changed?: boolean; oldIpv6?: string | null; newIpv6?: string | null; proxySitesUpdated?: number; error?: string }[] = []
+    let syncedCount = 0
+    let changedCount = 0
+    let ipv4ChangedCount = 0
+    let ipv6ChangedCount = 0
+
+    for (const instance of instances) {
+      try {
+        // 从 Incus 获取实例状态
+        const [state, incusInstance] = await Promise.all([
+          getInstanceState(client!, instance.incusId),
+          getInstance(client!, instance.incusId)
+        ]) as [{
+          status?: string
+          network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+        }, {
+          devices?: Record<string, Record<string, unknown>>
+          expanded_devices?: Record<string, Record<string, unknown>>
+        }]
+
+        if (!state.status) {
+          results.push({
+            id: instance.id,
+            name: instance.name,
+            success: false,
+            error: '无法获取实例状态'
+          })
+          continue
+        }
+
+        const incusStatus = mapInstanceStatus(state.status)
+
+        if (incusStatus === 'unknown') {
+          results.push({
+            id: instance.id,
+            name: instance.name,
+            success: false,
+            error: `未知状态: ${state.status}`
+          })
+          continue
+        }
+
+        // 更新数据库状态
+        const currentStatus = instance.status
+        let statusChanged = false
+        let ipv4Changed = false
+        let oldIpv4: string | null = null
+        let newIpv4: string | null = null
+        let ipv6Changed = false
+        let oldIpv6: string | null = null
+        let newIpv6: string | null = null
+        let proxySitesUpdated = 0
+
+        if (currentStatus !== incusStatus) {
+          await db.updateInstanceStatus(
+            instance.id,
+            incusStatus as 'creating' | 'running' | 'stopped' | 'error'
+          )
+          statusChanged = true
+          changedCount++
+        }
+
+        // 同步内网 IPv4（仅当实例正在运行时才能获取）
+        const persistedNetwork = await persistResolvedInstanceNetworkAddresses(
+          {
+            id: instance.id,
+            name: instance.name,
+            hostId: host.id,
+            networkMode: instance.networkMode,
+            ipv4: instance.ipv4,
+            ipv6: instance.ipv6
+          },
+          resolveInstanceNetworkAddresses(
+            {
+              id: instance.id,
+              name: instance.name,
+              hostId: host.id,
+              networkMode: instance.networkMode,
+              ipv4: instance.ipv4,
+              ipv6: instance.ipv6
+            },
+            incusInstance,
+            state
+          ),
+          { updateLastSyncedAt: true }
+        )
+
+        ipv4Changed = persistedNetwork.ipv4Changed
+        oldIpv4 = persistedNetwork.oldIpv4
+        newIpv4 = persistedNetwork.newIpv4
+        ipv6Changed = persistedNetwork.ipv6Changed
+        oldIpv6 = persistedNetwork.oldIpv6
+        newIpv6 = persistedNetwork.newIpv6
+
+        if (ipv4Changed) {
+          ipv4ChangedCount++
+        }
+        if (ipv6Changed) {
+          ipv6ChangedCount++
+        }
+
+        if (ipv4Changed && newIpv4) {
+          console.log(`[BatchSyncStatus] Instance ${instance.id} IPv4 changed: ${oldIpv4} -> ${newIpv4}`)
+
+          const proxySites = await getProxySitesByInstanceId(instance.id)
+          if (proxySites.length > 0 && host.caddy_enabled && host.caddy_username && host.caddy_password) {
+            const targetHost = host.nat_public_ip || host.ip_address
+            if (targetHost) {
+              const caddyClient = createCaddyClient({
+                host: targetHost,
+                port: host.caddy_port || 8444,
+                username: host.caddy_username,
+                password: host.caddy_password
+              })
+
+              for (const site of proxySites) {
+                if (site.status === 'active' && site.enabled) {
+                  try {
+                    await caddyClient.deleteSite(site.domain)
+                    await caddyClient.addSite(site.domain, newIpv4, site.targetPort, site.httpsEnabled)
+                    proxySitesUpdated++
+                    console.log(`[BatchSyncStatus] Updated proxy site "${site.domain}" to new IP ${newIpv4}`)
+                  } catch (caddyErr) {
+                    console.error(`[BatchSyncStatus] Failed to update proxy site "${site.domain}":`, caddyErr)
+                  }
+                }
+              }
+            }
+          }
+        }
+        results.push({
+          id: instance.id,
+          name: instance.name,
+          success: true,
+          from: statusChanged ? currentStatus : undefined,
+          to: statusChanged ? incusStatus : undefined,
+          ipv4Changed: ipv4Changed || undefined,
+          oldIpv4: ipv4Changed ? oldIpv4 : undefined,
+          newIpv4: ipv4Changed ? newIpv4 : undefined,
+          ipv6Changed: ipv6Changed || undefined,
+          oldIpv6: ipv6Changed ? oldIpv6 : undefined,
+          newIpv6: ipv6Changed ? newIpv6 : undefined,
+          proxySitesUpdated: ipv4Changed ? proxySitesUpdated : undefined
+        })
+        syncedCount++
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        
+        // 如果实例在 Incus 中不存在，标记为已删除并回滚资源
+        if (errorMessage.includes('not found') || errorMessage.includes('Instance not found')) {
+          // 1. 更新实例状态为已删除
+          await db.updateInstanceStatus(instance.id, 'deleted')
+          
+          // 2. 获取端口映射数量并回滚资源
+          const portMappings = await db.getPortMappings(instance.id)
+          const portMappingsCount = portMappings?.length || 0
+          await db.rollbackResources({
+            hostId: instance.hostId,
+            cpu: instance.cpu,
+            memory: instance.memory,
+            disk: instance.disk,
+            portCount: portMappingsCount
+          })
+          
+          changedCount++
+          results.push({
+            id: instance.id,
+            name: instance.name,
+            success: true,
+            from: instance.status,
+            to: 'deleted'
+          })
+        } else {
+          results.push({
+            id: instance.id,
+            name: instance.name,
+            success: false,
+            error: errorMessage
+          })
+        }
+      }
+    }
+
+    // 如果有实例被标记为删除，重新计算宿主机资源使用量以确保一致性
+    const hasDeletedInstances = results.some(r => r.to === 'deleted')
+    if (hasDeletedInstances) {
+      try {
+        const usedResources = await db.calculateHostResourcesFromInstances(hostId)
+        // 重新计算端口映射使用量
+        const actualPortsUsed = await prisma.portMapping.count({
+          where: {
+            instance: {
+              hostId: hostId,
+              status: { not: 'deleted' }
+            }
+          }
+        })
+        await db.updateHostResources(hostId, {
+          cpuUsed: usedResources.cpuUsed,
+          memoryUsed: usedResources.memoryUsed,
+          diskUsed: usedResources.diskUsed
+        })
+        // 更新端口使用量
+        await prisma.host.update({
+          where: { id: hostId },
+          data: { natPortsUsedCount: actualPortsUsed }
+        })
+      } catch (recalcError) {
+        fastify.log.error(`重新计算宿主机资源失败: ${recalcError}`)
+      }
+    }
+
+    await createLog(
+      user.id,
+      'host',
+      'host.sync_instance_status',
+      `Synced ${syncedCount} instances on host "${host.name}", ${changedCount} status changed, ${ipv4ChangedCount} IPv4 changed, ${ipv6ChangedCount} IPv6 changed`,
+      'success'
+    )
+
+    return {
+      message: `同步完成`,
+      results,
+      syncedCount,
+      changedCount,
+      ipv4ChangedCount,
+      ipv6ChangedCount,
+      failedCount: instances.length - syncedCount
+    }
+  })
+
+  // ==================== 资源校对 ====================
+  // POST /hosts/:id/recalculate-resources - 重新计算宿主机资源使用量
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/recalculate-resources', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以校对资源
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取校对前的资源使用量
+    const before = {
+      cpuUsed: host.cpu_used || 0,
+      memoryUsed: host.memory_used || 0,
+      diskUsed: host.disk_used || 0,
+      natPortsUsedCount: host.nat_ports_used_count || 0,
+      cpuAllowanceMax: host.cpu_allowance_max || 0,
+      memoryMax: host.memory_max || 0
+    }
+
+    // 重新计算资源使用量（基于所有非 deleted 状态的实例）
+    const usedResources = await db.calculateHostResourcesFromInstances(hostId)
+
+    // 重新计算端口映射使用量
+    const portMappingsCount = await prisma.portMapping.count({
+      where: {
+        instance: {
+          hostId: hostId,
+          status: { not: 'deleted' }
+        }
+      }
+    })
+
+    // 更新宿主机资源使用量
+    await db.updateHostResources(hostId, {
+      cpuUsed: usedResources.cpuUsed,
+      memoryUsed: usedResources.memoryUsed,
+      diskUsed: usedResources.diskUsed
+    })
+
+    // 更新端口使用量，同时将配额对齐到已用配额
+    await prisma.host.update({
+      where: { id: hostId },
+      data: {
+        natPortsUsedCount: portMappingsCount,
+        // 将配额对齐到已用配额
+        cpuAllowanceMax: usedResources.cpuUsed,
+        memoryMax: usedResources.memoryUsed
+      }
+    })
+
+    const after = {
+      cpuUsed: usedResources.cpuUsed,
+      memoryUsed: usedResources.memoryUsed,
+      diskUsed: usedResources.diskUsed,
+      natPortsUsedCount: portMappingsCount,
+      cpuAllowanceMax: usedResources.cpuUsed,
+      memoryMax: usedResources.memoryUsed
+    }
+
+    // 计算差异
+    const diff = {
+      cpuUsed: after.cpuUsed - before.cpuUsed,
+      memoryUsed: after.memoryUsed - before.memoryUsed,
+      diskUsed: after.diskUsed - before.diskUsed,
+      natPortsUsedCount: after.natPortsUsedCount - before.natPortsUsedCount,
+      cpuAllowanceMax: after.cpuAllowanceMax - before.cpuAllowanceMax,
+      memoryMax: after.memoryMax - before.memoryMax
+    }
+
+    const hasChanges = diff.cpuUsed !== 0 || diff.memoryUsed !== 0 || diff.diskUsed !== 0 || diff.natPortsUsedCount !== 0 || diff.cpuAllowanceMax !== 0 || diff.memoryMax !== 0
+
+    await createLog(
+      user.id,
+      'host',
+      'host.recalculate_resources',
+      `Recalculated resources for host "${host.name}": CPU ${before.cpuUsed}→${after.cpuUsed}, Memory ${before.memoryUsed}→${after.memoryUsed}, Disk ${before.diskUsed}→${after.diskUsed}, Ports ${before.natPortsUsedCount}→${after.natPortsUsedCount}, CPUMax ${before.cpuAllowanceMax}→${after.cpuAllowanceMax}, MemMax ${before.memoryMax}→${after.memoryMax}`,
+      'success'
+    )
+
+    return {
+      message: hasChanges ? '资源校对完成，已修正差异' : '资源校对完成，无差异',
+      hasChanges,
+      before,
+      after,
+      diff
+    }
+  })
+
+  // 批量封停实例（仅节点所有者）
+  fastify.post<{
+    Params: { id: string }
+    Body: { instanceIds: number[]; reason?: string }
+  }>('/:id/instances/suspend', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          },
+          reason: { type: 'string', maxLength: 500 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds, reason } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以批量封停
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取所有实例并验证它们属于该节点，且未被封停
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: { notIn: ['deleted', 'suspended'] }
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可封停的实例' })
+    }
+
+    const results: { id: number; name: string; success: boolean; error?: string }[] = []
+    let client: IncusClient | null = null
+
+    try {
+      client = await getIncusClient(host)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      fastify.log.error(`获取 Incus 客户端失败: ${errorMessage}`)
+    }
+
+    // 导入停止实例函数
+    const { stopInstance } = await import('../lib/incus/index.js')
+
+    for (const instance of instances) {
+      try {
+        // 如果实例正在运行，先关机
+        if (instance.status === 'running' && client) {
+          try {
+            await stopInstance(client, instance.incusId, true)
+          } catch (stopErr) {
+            const stopErrMsg = stopErr instanceof Error ? stopErr.message : String(stopErr)
+            fastify.log.error(`[BatchSuspend] Failed to stop instance ${instance.id}: ${stopErrMsg}`)
+            // 继续封停流程，即使关机失败
+          }
+        }
+
+        // 执行封停
+        await db.suspendInstance(instance.id, {
+          suspendedBy: user.id,
+          suspendReason: reason || ''
+        })
+
+        await createLog(
+          user.id,
+          'instance',
+          'instance.suspend',
+          `Batch suspended instance "${instance.name}"${reason ? ` (reason: ${reason})` : ''}`,
+          'success',
+          { instanceId: instance.id }
+        )
+
+        // 发送站内信通知给实例所有者
+        if (instance.userId !== user.id) {
+          await sendNotification(instance.userId, 'instance_suspended', {
+            instanceName: instance.name,
+            hostName: host.name || '',
+            suspendReason: reason || ''
+          })
+        }
+
+        results.push({ id: instance.id, name: instance.name, success: true })
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        fastify.log.error(`封停实例 ${instance.id} 失败: ${errorMessage}`)
+        results.push({ id: instance.id, name: instance.name, success: false, error: errorMessage })
+      }
+    }
+
+    const successCount = results.filter(r => r.success).length
+    const failedCount = results.filter(r => !r.success).length
+
+    return {
+      message: `批量封停完成`,
+      results,
+      successCount,
+      failedCount
+    }
+  })
+
+  // 批量解封实例（仅节点所有者）
+  fastify.post<{
+    Params: { id: string }
+    Body: { instanceIds: number[] }
+  }>('/:id/instances/unsuspend', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以批量解封
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取所有实例并验证它们属于该节点，且已被封停
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: 'suspended'
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可解封的实例' })
+    }
+
+    const results: { id: number; name: string; success: boolean; error?: string }[] = []
+
+    for (const instance of instances) {
+      try {
+        // 执行解封
+        await db.unsuspendInstance(instance.id)
+
+        await createLog(
+          user.id,
+          'instance',
+          'instance.unsuspend',
+          `Batch unsuspended instance "${instance.name}"`,
+          'success',
+          { instanceId: instance.id }
+        )
+
+        // 发送站内信通知给实例所有者
+        if (instance.userId !== user.id) {
+          await sendNotification(instance.userId, 'instance_unsuspended', {
+            instanceName: instance.name,
+            hostName: host.name || ''
+          })
+        }
+
+        results.push({ id: instance.id, name: instance.name, success: true })
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        fastify.log.error(`解封实例 ${instance.id} 失败: ${errorMessage}`)
+        results.push({ id: instance.id, name: instance.name, success: false, error: errorMessage })
+      }
+    }
+
+    const successCount = results.filter(r => r.success).length
+    const failedCount = results.filter(r => !r.success).length
+
+    return {
+      message: `批量解封完成`,
+      results,
+      successCount,
+      failedCount
+    }
+  })
+
+  // 批量为节点下所有付费实例免费延期（仅管理员）
+  fastify.post<{
+    Params: { id: string }
+    Body: { days: number }
+  }>('/:id/extend-all', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['days'],
+        properties: {
+          days: { type: 'integer', minimum: 1, maximum: 365 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { days } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 检查宿主机是否存在
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 查询该节点下所有付费实例（packagePlanId 不为 null 且未删除）
+    const paidInstances = await prisma.instance.findMany({
+      where: {
+        hostId,
+        packagePlanId: { not: null },
+        status: { not: 'deleted' },
+        expiresAt: { not: null }  // 必须有到期时间才能延期
+      },
+      select: {
+        id: true,
+        name: true,
+        expiresAt: true,
+        userId: true
+      }
+    })
+
+    if (paidInstances.length === 0) {
+      return {
+        success: true,
+        message: '该节点下没有可延期的付费实例',
+        extendedCount: 0
+      }
+    }
+
+    // 批量更新 expiresAt
+    const daysMs = days * 24 * 60 * 60 * 1000
+    let extendedCount = 0
+    const affectedUserIds = new Set<number>()
+
+    for (const instance of paidInstances) {
+      if (!instance.expiresAt) continue
+
+      const newExpiresAt = new Date(instance.expiresAt.getTime() + daysMs)
+      
+      await prisma.instance.update({
+        where: { id: instance.id },
+        data: { expiresAt: newExpiresAt }
+      })
+
+      affectedUserIds.add(instance.userId)
+      extendedCount++
+    }
+
+    // 记录操作日志
+    await createLog(
+      user.id,
+      'host',
+      'host.batch_extend',
+      `Batch extended ${extendedCount} paid instances on host "${host.name}" by ${days} days`,
+      'success'
+    )
+
+    // 给受影响的用户发送通知
+    for (const userId of affectedUserIds) {
+      await sendNotification(userId, 'instances_batch_extended', {
+        hostName: host.name || '',
+        days: days
+      })
+    }
+
+    return {
+      success: true,
+      message: `成功为 ${extendedCount} 个付费实例延期 ${days} 天`,
+      extendedCount
+    }
+  })
+
+  // 接管托管节点为自营（仅管理员）
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/takeover-official', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const officialAdminId = user.id
+
+    try {
+      const summary = await prisma.$transaction(async (tx) => {
+        const host = await tx.host.findUnique({
+          where: { id: hostId },
+          select: {
+            id: true,
+            name: true,
+            userId: true,
+            user: {
+              select: {
+                id: true,
+                username: true,
+                role: true
+              }
+            }
+          }
+        })
+
+        if (!host) {
+          throw new Error('HOST_NOT_FOUND')
+        }
+
+        if (host.user.role === 'admin') {
+          throw new Error('HOST_ALREADY_OFFICIAL')
+        }
+
+        const instanceCount = await tx.instance.count({
+          where: {
+            hostId,
+            status: { not: 'deleted' }
+          }
+        })
+
+        const hostPackages = await tx.package.findMany({
+          where: {
+            packageHosts: {
+              some: { hostId }
+            }
+          },
+          select: {
+            id: true,
+            name: true,
+            userId: true,
+            user: {
+              select: {
+                id: true,
+                role: true
+              }
+            },
+            packageHosts: {
+              select: {
+                hostId: true,
+                host: {
+                  select: {
+                    userId: true,
+                    user: {
+                      select: {
+                        role: true
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        })
+
+        const packageActions = hostPackages.map((pkg) => {
+          const otherBindings = pkg.packageHosts.filter(binding => binding.hostId !== hostId)
+          const hasOtherHostedBindings = otherBindings.some(binding => binding.host.user.role !== 'admin')
+          const canTransferPackage = pkg.user.role !== 'admin' &&
+            pkg.userId === host.userId &&
+            !hasOtherHostedBindings
+
+          return {
+            pkg,
+            otherBindings,
+            canTransferPackage
+          }
+        })
+
+        const blockedPackageNames = packageActions
+          .filter(({ pkg, otherBindings, canTransferPackage }) =>
+            pkg.user.role !== 'admin' &&
+            !canTransferPackage &&
+            otherBindings.length === 0
+          )
+          .map(({ pkg }) => pkg.name)
+
+        if (blockedPackageNames.length > 0) {
+          throw Object.assign(new Error('HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT'), {
+            packageNames: blockedPackageNames
+          })
+        }
+
+        const newHostName = await generateUniqueOwnedName(tx, 'host', officialAdminId, host.name)
+        await tx.host.update({
+          where: { id: hostId },
+          data: {
+            userId: officialAdminId,
+            name: newHostName
+          }
+        })
+
+        const transferredPackageNames: string[] = []
+        const detachedPackageNames: string[] = []
+
+        for (const { pkg, otherBindings, canTransferPackage } of packageActions) {
+          if (pkg.user.role === 'admin') {
+            continue
+          }
+
+          if (canTransferPackage) {
+            const newPackageName = await generateUniqueOwnedName(tx, 'package', officialAdminId, pkg.name)
+            await tx.package.update({
+              where: { id: pkg.id },
+              data: {
+                userId: officialAdminId,
+                name: newPackageName,
+                releaseChannelId: null
+              }
+            })
+            await tx.packageShare.updateMany({
+              where: { packageId: pkg.id },
+              data: { ownerId: officialAdminId }
+            })
+            transferredPackageNames.push(pkg.name)
+            continue
+          }
+
+          if (otherBindings.length > 0) {
+            await tx.packageHost.deleteMany({
+              where: {
+                packageId: pkg.id,
+                hostId
+              }
+            })
+            detachedPackageNames.push(pkg.name)
+          }
+        }
+
+        return {
+          hostId: host.id,
+          previousOwnerId: host.user.id,
+          previousOwnerUsername: host.user.username,
+          instanceCount,
+          transferredPackageCount: transferredPackageNames.length,
+          detachedPackageCount: detachedPackageNames.length,
+          transferredPackageNames,
+          detachedPackageNames,
+          hostRenamed: newHostName !== host.name,
+          oldHostName: host.name,
+          newHostName
+        }
+      })
+
+      await createLog(
+        user.id,
+        'host',
+        'host.takeover_official',
+        `Take over hosted host #${summary.hostId} from user #${summary.previousOwnerId}: transferredPackages=${summary.transferredPackageCount}, detachedPackages=${summary.detachedPackageCount}, instances=${summary.instanceCount}`,
+        'success'
+      )
+
+      return {
+        success: true,
+        summary
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message === 'HOST_NOT_FOUND') {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+        if (error.message === 'HOST_ALREADY_OFFICIAL') {
+          return reply.code(400).send(apiError(ErrorCode.HOST_ALREADY_OFFICIAL))
+        }
+        if (error.message === 'HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT') {
+          const packageNames = Array.isArray((error as Error & { packageNames?: string[] }).packageNames)
+            ? (error as Error & { packageNames: string[] }).packageNames
+            : []
+          return reply.code(409).send({
+            ...apiError(ErrorCode.HOST_TAKEOVER_PACKAGE_BINDING_CONFLICT),
+            packageNames,
+            count: packageNames.length
+          })
+        }
+      }
+      throw error
+    }
+  })
+
+  // 获取节点绑定的套餐及其方案（管理员或节点所有者，用于改节点时选择方案）
+  fastify.get<{ Params: { id: string } }>('/:id/plans', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取节点信息并检查权限
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或节点所有者
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取绑定了该节点的套餐
+    const { getHostPackages } = await import('../db/package-hosts.js')
+    const packageIds = await getHostPackages(hostId)
+
+    if (packageIds.length === 0) {
+      return { plans: [] }
+    }
+
+    // 获取套餐详情和其活跃方案
+    const packagesWithPlans = await prisma.package.findMany({
+      where: {
+        id: { in: packageIds },
+        active: true
+      },
+      select: {
+        id: true,
+        name: true,
+        plans: {
+          where: { isActive: true, isSoldOut: false },
+          select: {
+            id: true,
+            name: true,
+            price: true,
+            billingCycle: true,
+            sortOrder: true
+          },
+          orderBy: { sortOrder: 'asc' }
+        }
+      }
+    })
+
+    // 展平为方案列表，带上套餐信息
+    const plans = packagesWithPlans.flatMap(pkg =>
+      pkg.plans.map(plan => ({
+        id: plan.id,
+        name: plan.name,
+        packageId: pkg.id,
+        packageName: pkg.name,
+        price: Number(plan.price),
+        billingCycle: plan.billingCycle
+      }))
+    )
+
+    return { plans }
+  })
+
+  // 批量迁移实例到其他节点（管理员或节点所有者）
+  fastify.post<{
+    Params: { id: string }
+    Body: { instanceIds: number[]; targetHostId: number; targetImage: string; targetPlanId?: number }
+  }>('/:id/instances/migrate', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds', 'targetHostId', 'targetImage'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 30
+          },
+          targetHostId: { type: 'integer' },
+          targetImage: { type: 'string', minLength: 1 },
+          targetPlanId: { type: 'integer' }  // 付费实例迁移时的目标方案
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds, targetHostId, targetImage, targetPlanId } = request.body
+    const sourceHostId = Number(id)
+
+    if (isNaN(sourceHostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证源节点存在
+    const sourceHost = await db.getHostById(sourceHostId)
+    if (!sourceHost) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 验证目标节点存在
+    const targetHost = await db.getHostById(targetHostId)
+    if (!targetHost) {
+      return reply.code(404).send({ error: '目标节点不存在' })
+    }
+
+    // 权限检查：管理员只能迁移到官方自营节点；非管理员必须同时拥有源节点和目标节点
+    if (user.role === 'admin') {
+      const targetHostOwnership = await prisma.host.findUnique({
+        where: { id: targetHostId },
+        select: { user: { select: { role: true } } }
+      })
+      if (targetHostOwnership?.user.role !== 'admin') {
+        return reply.code(400).send({ error: '管理员迁移目标节点只能选择自营节点' })
+      }
+    } else {
+      if (sourceHost.user_id !== user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+      if (targetHost.user_id !== user.id) {
+        return reply.code(403).send({ error: '目标节点不属于当前用户' })
+      }
+    }
+
+    // 验证源节点和目标节点不同
+    if (sourceHostId === targetHostId) {
+      return reply.code(400).send({ error: '源节点和目标节点不能相同' })
+    }
+
+    // 验证目标节点在线
+    if (targetHost.status !== 'online') {
+      return reply.code(400).send({ error: '目标节点不在线' })
+    }
+
+    if (!await isValidSystemImage(targetImage)) {
+      return reply.code(400).send({ error: '目标系统镜像不存在或已隐藏' })
+    }
+
+    // 获取所有实例并验证它们属于源节点
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: sourceHostId,
+        status: { not: 'deleted' }
+      },
+      include: {
+        package: true
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可迁移的实例' })
+    }
+
+    // 检查是否有付费实例
+    const paidInstances = instances.filter(i => i.packagePlanId !== null)
+    
+    // 如果有付费实例，必须提供目标方案
+    let targetPlan: Awaited<ReturnType<typeof db.getPlanById>> | null = null
+    let targetPackage: Awaited<ReturnType<typeof db.getPackageById>> | null = null
+    
+    if (paidInstances.length > 0) {
+      if (!targetPlanId) {
+        return reply.code(400).send({ error: '有付费实例需要迁移，请选择目标方案' })
+      }
+      
+      // 验证目标方案存在
+      targetPlan = await db.getPlanById(targetPlanId)
+      if (!targetPlan) {
+        return reply.code(404).send({ error: '目标方案不存在' })
+      }
+      
+      // 验证方案是否激活
+      if (!targetPlan.isActive) {
+        return reply.code(400).send({ error: '目标方案已下架' })
+      }
+      if (targetPlan.isSoldOut) {
+        return reply.code(400).send({ error: '目标方案已售罄', code: 'PLAN_SOLD_OUT' })
+      }
+      
+      // 获取方案对应的套餐
+      targetPackage = await db.getPackageById(targetPlan.packageId)
+      if (!targetPackage) {
+        return reply.code(404).send({ error: '目标方案的套餐不存在' })
+      }
+      
+      // 验证套餐是否绑定了目标节点
+      const { getPackageHostIds } = await import('../db/package-hosts.js')
+      const packageHostIds = await getPackageHostIds(targetPackage.id)
+      if (!packageHostIds.includes(targetHostId)) {
+        return reply.code(400).send({ error: '目标方案的套餐未绑定目标节点' })
+      }
+    }
+
+    const results: { id: number; name: string; success: boolean; error?: string; newInstanceId?: number }[] = []
+    let sourceClient: IncusClient | null = null
+    let targetClient: IncusClient | null = null
+
+    // 获取源节点和目标节点的 Incus 客户端
+    try {
+      sourceClient = await getIncusClient(sourceHost)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      fastify.log.error(`获取源节点 Incus 客户端失败: ${errorMessage}`)
+    }
+
+    try {
+      targetClient = await getIncusClient(targetHost)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(500).send({ error: `无法连接目标节点: ${errorMessage}` })
+    }
+
+    // 导入必要的模块
+    const { stopInstance, deleteInstance, createInstance, startInstance } = await import('../lib/incus/index.js')
+    const { buildInstanceConfig } = await import('../lib/incus/incus-instances.js')
+    const { generateIncusConfig, generateRandomPassword } = await import('../lib/incus-config-generator.js')
+    const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+    const { generateRandomIPv4, generateRandomIPv6 } = await import('../lib/ip-calculator.js')
+    const { decryptSensitiveData, encryptSensitiveData } = await import('../lib/security.js')
+    const { getInstanceAffBinding, createAffBinding } = await import('../db/aff.js')
+    const { createInboxMessage } = await import('../db/inbox.js')
+    const { customAlphabet } = await import('nanoid')
+    // 自定义 nanoid，只使用小写字母和数字（Incus 不允许下划线）
+    const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)
+
+    for (const instance of instances) {
+      try {
+        // 1. 检查转移锁定、恢复任务和上传任务
+        const hasPendingTransfer = await db.hasPendingTransfer(instance.id)
+        if (hasPendingTransfer) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例有待处理的转移请求' })
+          continue
+        }
+
+        const activeRestoreTask = await prisma.restoreTask.findFirst({
+          where: { instanceId: instance.id, status: { in: ['PENDING', 'PROCESSING'] } }
+        })
+        if (activeRestoreTask) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例有正在进行的恢复任务' })
+          continue
+        }
+
+        const activeUploadTask = await prisma.backupUploadTask.findFirst({
+          where: { instanceId: instance.id, status: { in: ['PENDING', 'PROCESSING'] } }
+        })
+        if (activeUploadTask) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例有正在进行的上传任务' })
+          continue
+        }
+
+        // 2. 获取用户 SSH 密钥
+        const userSshKeys = await db.getSSHKeysByUserId(instance.userId)
+        if (userSshKeys.length === 0) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '用户没有 SSH 密钥' })
+          continue
+        }
+        const sshKey = userSshKeys[0].public_key
+
+        // 3. 解密原实例密码
+        let rootPassword: string
+        if (instance.rootPassword) {
+          const decrypted = decryptSensitiveData(instance.rootPassword)
+          rootPassword = decrypted || generateRandomPassword(16)
+        } else {
+          rootPassword = generateRandomPassword(16)
+        }
+
+        // 4. 获取套餐信息
+        const pkg = instance.package
+        if (!pkg) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '实例套餐不存在' })
+          continue
+        }
+
+        // 5. 获取管理员选择的目标镜像和实例类型
+        const imageAlias = targetImage
+        // 实例类型从套餐获取
+        const instanceType = (pkg as any).instanceType === 'vm' ? 'vm' : 'container'
+        const effectiveInstanceType = instanceType === 'vm' ? 'virtual-machine' : 'container'
+        if (!await isImageCompatibleWithInstanceType(imageAlias, instanceType)) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '目标系统与实例类型不兼容' })
+          continue
+        }
+        if (!await isImageCompatibleWithMemory(imageAlias, instance.memory)) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '目标系统与实例内存不兼容' })
+          continue
+        }
+        const imageAvailability = await getSystemImageAvailabilityForHost(imageAlias, targetHostId, {
+          instanceType,
+          memory: instance.memory
+        })
+        if (!imageAvailability.ok) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: `目标节点不可用该系统: ${imageAvailability.reason}` })
+          continue
+        }
+
+        // 6. 生成 cloud-init 配置
+        const { configPayload, metaData } = generateIncusConfig({
+          instanceName: instance.name,
+          imageAlias,
+          rootPassword,
+          sshKey,
+          networkMode: instance.networkMode,
+          type: effectiveInstanceType
+        })
+
+        // 7. 生成新的 incusId
+        const shortId = nanoid()
+        const newIncusId = `u${instance.userId}-${shortId}`
+
+        // 8. 分配 IP 地址
+        let staticIPv4: string | null = null
+        let staticIPv6: string | null = null
+
+        // 分配 IPv4
+        for (let attempts = 0; attempts < 50; attempts++) {
+          staticIPv4 = generateRandomIPv4()
+          const exists = await db.isIpAddressExistsOnHost(staticIPv4, targetHostId)
+          if (!exists) break
+          staticIPv4 = null
+        }
+        if (!staticIPv4) {
+          results.push({ id: instance.id, name: instance.name, success: false, error: '无法分配 IPv4 地址' })
+          continue
+        }
+
+        // 分配 IPv6（如果目标节点支持）
+        const targetHostWithIpv6 = targetHost as typeof targetHost & {
+          ipv6_subnet?: string | null
+          ipv6_gateway?: string | null
+          ipv6_parent_interface?: string | null
+        }
+        if (targetHostWithIpv6.ipv6_subnet) {
+          for (let attempts = 0; attempts < 50; attempts++) {
+            staticIPv6 = generateRandomIPv6(targetHostWithIpv6.ipv6_subnet)
+            const exists = await db.isIpAddressExists(staticIPv6)
+            if (!exists) break
+            staticIPv6 = null
+          }
+        }
+
+        // 9. VM 和容器都需要重新生成包含静态 IP 的 network-config
+        let finalConfigPayload = configPayload
+        if (effectiveInstanceType === 'virtual-machine') {
+          const vmResult = generateVmConfig({
+            instanceName: instance.name,
+            instanceIdSeed: newIncusId,
+            imageAlias,
+            rootPassword,
+            sshKey,
+            network: staticIPv4 ? {
+              ipAddress: `${staticIPv4}/22`,
+              gateway: '10.10.0.1',
+              dns: ['8.8.8.8', '1.1.1.1'],
+              ipv6Address: staticIPv6 ? `${staticIPv6}` : undefined,
+              ipv6Gateway: staticIPv6 ? (targetHostWithIpv6.ipv6_gateway || undefined) : undefined
+            } : undefined
+          })
+          finalConfigPayload = vmResult.configPayload
+        } else if (staticIPv4) {
+          // 容器类型：重新生成包含静态 IP 的 cloud-init 配置
+          const containerResult = generateIncusConfig({
+            instanceName: instance.name,
+            imageAlias,
+            rootPassword,
+            sshKey,
+            networkMode: instance.networkMode,
+            type: 'container',
+            network: {
+              ipAddress: `${staticIPv4}/22`,
+              gateway: '10.10.0.1',
+              dns: ['8.8.8.8', '1.1.1.1'],
+              ipv6Address: staticIPv6 ? `${staticIPv6}/128` : undefined,
+              ipv6Gateway: staticIPv6 ? 'fe80::1' : undefined
+            }
+          })
+          finalConfigPayload = containerResult.configPayload
+        }
+
+        // 10. 选择存储池
+        let selectedStoragePool = await db.resolveStoragePoolForNewInstance(targetHostId, { packageId: targetPackage?.id ?? instance.packageId })
+        if (!selectedStoragePool) selectedStoragePool = 'default'
+
+        // 11. 获取套餐配置
+        const pkgConfig = pkg as typeof pkg & {
+          nested?: boolean
+          privileged?: boolean
+          io_limit_mode?: string
+          limitsRead?: string | null
+          limitsWrite?: string | null
+          limitsReadIops?: number | null
+          limitsWriteIops?: number | null
+          limitsIngress?: string | null
+          limitsEgress?: string | null
+          limitsProcesses?: number | null
+          limitsCpuPriority?: number | null
+          bootAutostart?: boolean | null
+          bootAutostartPriority?: number | null
+          bootAutostartDelay?: number | null
+          bootHostShutdownTimeout?: number | null
+        }
+
+        // 根据 ioLimitMode 选择性传入 IO 限制参数
+        const ioMode = (pkgConfig as any).io_limit_mode || 'throughput'
+
+        // 12. 构建 Incus 配置
+        const ipv6Config = staticIPv6 ? { primaryIp: staticIPv6 } : null
+        const incusConfig = buildInstanceConfig({
+          name: newIncusId,
+          image: imageAlias,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          disk: instance.disk,
+          swapEnabled: (instance as any).swapEnabled === true,
+          swapSize: (instance as any).swapSize ?? null,
+          sshKey: '',
+          password: '',
+          cloudInitConfig: finalConfigPayload as { 'user.user-data': string; 'user.network-config'?: string } | undefined,
+          networkMode: (instance.networkMode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+          nested: Boolean(pkgConfig.nested),
+          privileged: Boolean(pkgConfig.privileged),
+          instanceType: instanceType === 'vm' ? 'vm' : 'container',
+          storagePool: selectedStoragePool,
+          ipv4Address: staticIPv4,
+          ipv6Config,
+          hostInterface: targetHostWithIpv6.ipv6_parent_interface || 'eth0',
+          ipv6Address: staticIPv6,
+          ipv6Gateway: targetHostWithIpv6.ipv6_gateway,
+          limitsRead: ioMode === 'throughput' ? ((instance as any).limitsRead || pkgConfig.limitsRead) : null,
+          limitsWrite: ioMode === 'throughput' ? ((instance as any).limitsWrite || pkgConfig.limitsWrite) : null,
+          limitsReadIops: ioMode === 'iops' ? ((instance as any).limitsReadIops || pkgConfig.limitsReadIops) : null,
+          limitsWriteIops: ioMode === 'iops' ? ((instance as any).limitsWriteIops || pkgConfig.limitsWriteIops) : null,
+          limitsIngress: (instance as any).limitsIngress || pkgConfig.limitsIngress,
+          limitsEgress: (instance as any).limitsEgress || pkgConfig.limitsEgress,
+          limitsProcesses: (instance as any).limitsProcesses || pkgConfig.limitsProcesses,
+          limitsCpuPriority: (instance as any).limitsCpuPriority || pkgConfig.limitsCpuPriority,
+          bootAutostart: (instance as any).bootAutostart ?? pkgConfig.bootAutostart,
+          bootAutostartPriority: (instance as any).bootAutostartPriority ?? pkgConfig.bootAutostartPriority,
+          bootAutostartDelay: (instance as any).bootAutostartDelay ?? pkgConfig.bootAutostartDelay,
+          bootHostShutdownTimeout: (instance as any).bootHostShutdownTimeout ?? pkgConfig.bootHostShutdownTimeout
+        })
+
+        // 13. 在目标节点创建实例
+        console.log(`[Migrate] 在目标节点创建实例 ${newIncusId}...`)
+        await createInstance(targetClient, incusConfig)
+
+        // 14. 启动新实例
+        console.log(`[Migrate] 启动新实例 ${newIncusId}...`)
+        await startInstance(targetClient, newIncusId)
+
+        // 15. 获取原实例的 AFF 绑定信息
+        const affBinding = await getInstanceAffBinding(instance.id)
+
+        // 16. 判断是否为付费实例，决定使用哪个套餐/方案
+        const isPaidInstance = instance.packagePlanId !== null
+        const finalPackageId = isPaidInstance && targetPackage ? targetPackage.id : instance.packageId
+        const finalPlanId = isPaidInstance && targetPlan ? targetPlan.id : instance.packagePlanId
+        const finalBillingPrice = isPaidInstance && targetPlan ? Number(targetPlan.price) / 100 : instance.billingPrice
+        const finalBillingCycle = isPaidInstance && targetPlan ? targetPlan.billingCycle : instance.billingCycle
+
+        // 17. 在数据库中创建新实例记录
+        const { createdInstance: newInstance, migratedBillingRecordCount } = await prisma.$transaction(async tx => {
+          const createdInstance = await tx.instance.create({
+            data: {
+              incusId: newIncusId,
+              name: instance.name,
+              userId: instance.userId,
+              hostId: targetHostId,
+              packageId: finalPackageId,
+              packagePlanId: finalPlanId,
+              storagePoolName: selectedStoragePool,
+              image: imageAlias,
+              cpu: instance.cpu,
+              memory: instance.memory,
+              disk: instance.disk,
+              networkMode: instance.networkMode,
+              snapshottedSpecs: instance.snapshottedSpecs as any,
+              sshPort: metaData.sshPort,
+              rootPassword: encryptSensitiveData(rootPassword),
+              status: 'running',
+              ipv4: staticIPv4,
+              ipv6: staticIPv6,
+              monthlyTrafficLimit: instance.monthlyTrafficLimit,
+              portLimit: instance.portLimit,
+              snapshotLimit: instance.snapshotLimit,
+              backupLimit: instance.backupLimit,
+              siteLimit: instance.siteLimit,
+              // 保留原到期时间，更新续费价格为新方案
+              expiresAt: instance.expiresAt,
+              billingPrice: finalBillingPrice,
+              billingCycle: finalBillingCycle,
+              autoRenew: instance.autoRenew,
+              // 存储 I/O 限制
+              limitsRead: (instance as any).limitsRead,
+              limitsWrite: (instance as any).limitsWrite,
+              limitsReadIops: (instance as any).limitsReadIops,
+              limitsWriteIops: (instance as any).limitsWriteIops,
+              // 网络限制
+              limitsIngress: (instance as any).limitsIngress,
+              limitsEgress: (instance as any).limitsEgress,
+              // 进程与调度
+              limitsProcesses: (instance as any).limitsProcesses,
+              limitsCpuPriority: (instance as any).limitsCpuPriority,
+              // 启动配置
+              bootAutostart: (instance as any).bootAutostart,
+              bootAutostartPriority: (instance as any).bootAutostartPriority,
+              bootAutostartDelay: (instance as any).bootAutostartDelay,
+              bootHostShutdownTimeout: (instance as any).bootHostShutdownTimeout
+            }
+          })
+
+          const movedCount = await db.reassignInstanceBillingRecords(instance.id, createdInstance.id, tx)
+
+          return {
+            createdInstance,
+            migratedBillingRecordCount: movedCount
+          }
+        })
+
+        if (isPaidInstance && migratedBillingRecordCount === 0) {
+          fastify.log.warn({
+            oldInstanceId: instance.id,
+            newInstanceId: newInstance.id,
+            instanceName: instance.name
+          }, '[Migrate] 付费实例迁移时未迁移到任何计费记录')
+        }
+
+        // 17. 复制 AFF 绑定（如果存在）
+        if (affBinding) {
+          await createAffBinding(newInstance.id, affBinding.affCode.id)
+        }
+
+        // 18. 更新目标节点资源使用量
+        await db.updateHostResources(targetHostId, {
+          cpuUsed: targetHost.cpu_used + instance.cpu,
+          memoryUsed: targetHost.memory_used + instance.memory,
+          diskUsed: targetHost.disk_used + instance.disk
+        })
+
+        // 19. 删除源节点的实例
+        if (sourceClient) {
+          try {
+            // 先停止实例
+            if (instance.status === 'running') {
+              await stopInstance(sourceClient, instance.incusId, true)
+            }
+            await deleteInstance(sourceClient, instance.incusId)
+          } catch (deleteErr) {
+            const deleteErrMsg = deleteErr instanceof Error ? deleteErr.message : String(deleteErr)
+            fastify.log.warn(`删除源实例失败 (${instance.incusId}): ${deleteErrMsg}`)
+          }
+        }
+
+        // 20. 更新源实例状态为 deleted
+        await db.updateInstanceStatus(instance.id, 'deleted')
+
+        // 21. 释放源节点资源
+        await db.rollbackResources({
+          hostId: sourceHostId,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          disk: instance.disk,
+          portCount: 0
+        })
+
+        // 22. 发送站内信通知用户
+        await createInboxMessage({
+          userId: instance.userId,
+          eventType: 'instance_migrated',
+          title: '实例已迁移',
+          content: `您的实例 ${instance.name} 已被管理员迁移到新节点。\n\n新的连接信息：\n- IPv4: ${staticIPv4}\n${staticIPv6 ? `- IPv6: ${staticIPv6}\n` : ''}- 密码保持不变\n- SSH 密钥保持不变`,
+          data: {
+            oldHostId: sourceHostId,
+            newHostId: targetHostId,
+            oldHostName: sourceHost.name,
+            newHostName: targetHost.name,
+            instanceId: newInstance.id,
+            instanceName: instance.name
+          }
+        })
+
+        results.push({ 
+          id: instance.id, 
+          name: instance.name, 
+          success: true, 
+          newInstanceId: newInstance.id 
+        })
+
+        await createLog(
+          user.id,
+          'instance',
+          'instance.migrate',
+          `Migrated instance "${instance.name}" from host "${sourceHost.name}" to "${targetHost.name}"`,
+          'success'
+        )
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        results.push({ id: instance.id, name: instance.name, success: false, error: errorMessage })
+        fastify.log.error(`迁移实例失败 (${instance.name}): ${errorMessage}`)
+      }
+    }
+
+    const successCount = results.filter(r => r.success).length
+    const failedCount = results.filter(r => !r.success).length
+
+    return {
+      message: `成功迁移 ${successCount} 个实例${failedCount > 0 ? `，${failedCount} 个失败` : ''}`,
+      results,
+      successCount,
+      failedCount
+    }
+  })
+
+  // ==================== 批量赠送时长 ====================
+
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { username: string }
+  }>('/:id/users/lookup', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const hostId = Number(request.params.id)
+    const username = request.query.username?.trim()
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    if (!username) {
+      return reply.code(400).send({ error: 'Username is required' })
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const targetUser = await prisma.user.findUnique({
+      where: { username },
+      select: {
+        id: true,
+        username: true,
+        status: true
+      }
+    })
+
+    if (!targetUser) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const sshKeyCount = await prisma.sshKey.count({
+      where: { userId: targetUser.id }
+    })
+
+    return {
+      user: {
+        id: targetUser.id,
+        username: targetUser.username,
+        status: targetUser.status,
+        hasSshKey: sshKeyCount > 0
+      }
+    }
+  })
+
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      username: string
+      name: string
+      packageId: number
+      planId?: number
+      giftDays?: number
+      image: string
+      cpu?: number
+      memory?: number
+      disk?: number
+    }
+  }>('/:id/instances/create-for-user', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['username', 'name', 'packageId', 'image'],
+        properties: {
+          username: { type: 'string', minLength: 2, maxLength: 32 },
+          name: { type: 'string', minLength: 2, maxLength: 64 },
+          packageId: { type: 'integer', minimum: 1 },
+          planId: { type: 'integer', minimum: 1 },
+          giftDays: { type: 'integer', minimum: 1, maximum: 365 },
+          image: { type: 'string', minLength: 1 },
+          cpu: { type: 'integer', minimum: 15, maximum: 10000 },
+          memory: { type: 'integer', minimum: 128, maximum: 524288 },
+          disk: { type: 'integer', minimum: 512, maximum: 104857600 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const hostId = Number(request.params.id)
+    const operator = request.user
+    const {
+      username,
+      name,
+      packageId,
+      planId,
+      giftDays = 30,
+      image,
+      cpu,
+      memory,
+      disk
+    } = request.body
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    const isAdmin = operator.role === 'admin'
+
+    if (host.user_id !== operator.id && !isAdmin) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const nameValidation = validateName(name, 'Instance name', 2, 64)
+    if (!nameValidation.valid) {
+      return reply.code(400).send({ error: nameValidation.message })
+    }
+
+    const targetUser = await prisma.user.findUnique({
+      where: { username: username.trim() },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        status: true
+      }
+    })
+
+    if (!targetUser) {
+      return reply.code(400).send({ error: `用户 "${username}" 不存在` })
+    }
+
+    if (targetUser.id === operator.id && !isAdmin) {
+      return reply.code(400).send({ error: '不能给自己赠送实例，请使用当前节点的普通创建功能' })
+    }
+
+    if (targetUser.status !== 'active') {
+      return reply.code(400).send({ error: `用户 "${username}" 状态异常，无法创建实例` })
+    }
+
+    const targetUserSshKeys = await db.getSSHKeysByUserId(targetUser.id)
+    if (targetUserSshKeys.length === 0) {
+      return reply.code(400).send({ error: `用户 "${username}" 没有 SSH 密钥，请先让用户添加 SSH 密钥` })
+    }
+
+    const sshKey = targetUserSshKeys[0].public_key
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg || !pkg.active) {
+      return reply.code(400).send({ error: '套餐不存在或已禁用' })
+    }
+
+    if (pkg.user_id !== operator.id && !isAdmin) {
+      return reply.code(403).send({ error: '只能使用您自己的套餐为其他用户创建实例' })
+    }
+
+    const packageHostIds = (pkg as { host_ids?: number[] }).host_ids || []
+    if (packageHostIds.length > 0 && !packageHostIds.includes(hostId)) {
+      return reply.code(400).send({ error: '该套餐未绑定到当前节点' })
+    }
+    if (packageHostIds.length === 0 && host.user_id !== pkg.user_id) {
+      return reply.code(400).send({ error: '未绑定节点的套餐只能在套餐所有者的节点上创建实例' })
+    }
+
+    let selectedPlan: Awaited<ReturnType<typeof db.getPlanById>> = null
+    let billing: ReturnType<typeof calculateCreateBilling> | null = null
+    let planTrafficSpeed: string | null = null
+    const paidGiftDays = planId ? Math.max(1, Math.min(365, Math.floor(giftDays))) : null
+
+    if (planId) {
+      selectedPlan = await db.getPlanById(planId)
+      if (!selectedPlan || selectedPlan.packageId !== packageId) {
+        return reply.code(400).send({ error: '方案不存在或不属于该套餐' })
+      }
+      if (!selectedPlan.isActive) {
+        return reply.code(400).send({ error: '方案已下架' })
+      }
+      if (selectedPlan.isSoldOut) {
+        return reply.code(400).send({ error: '方案已售罄', code: 'PLAN_SOLD_OUT' })
+      }
+
+      billing = calculateCreateBilling(selectedPlan)
+      planTrafficSpeed = (selectedPlan as { trafficLimitSpeed?: string }).trafficLimitSpeed || null
+    }
+
+    const requestedCpu = selectedPlan ? selectedPlan.cpu : (cpu || 15)
+    const requestedMemory = selectedPlan ? selectedPlan.memory : (memory || 128)
+    const requestedDisk = selectedPlan ? selectedPlan.disk : (disk || 512)
+
+    if (!await isValidSystemImage(image)) {
+      return reply.code(400).send({ error: '镜像不存在' })
+    }
+
+    const pkgInstanceType = (pkg as typeof pkg & { instance_type?: 'container' | 'vm' }).instance_type || 'container'
+    if (!await isImageCompatibleWithInstanceType(image, pkgInstanceType)) {
+      return reply.code(400).send({ error: '镜像类型与套餐类型不兼容' })
+    }
+
+    if (!await isImageCompatibleWithMemory(image, requestedMemory)) {
+      return reply.code(400).send({ error: '128MB 内存只能使用 Alpine/Debian 镜像' })
+    }
+
+    const pkgWithExtras = pkg as typeof pkg & {
+      node_selectors?: string
+      port_limit?: number
+      snapshot_limit?: number
+      backup_limit?: number
+      site_limit?: number
+      monthly_traffic_limit?: string | null
+      io_limit_mode?: string
+      limits_read?: string | null
+      limits_write?: string | null
+      limits_read_iops?: number | null
+      limits_write_iops?: number | null
+      limits_ingress?: string | null
+      limits_egress?: string | null
+      limits_processes?: number | null
+      limits_cpu_priority?: number | null
+      boot_autostart?: boolean | null
+      boot_autostart_priority?: number | null
+      boot_autostart_delay?: number | null
+      boot_host_shutdown_timeout?: number | null
+    }
+
+    const preCheckHost = await db.selectAvailableHost({
+      packageHostIds: packageHostIds.length > 0 ? packageHostIds : undefined,
+      nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+      cpu: requestedCpu,
+      memory: requestedMemory,
+      disk: requestedDisk,
+      hostId,
+      ownerId: pkg.user_id!
+    })
+
+    if (!preCheckHost) {
+      return reply.code(400).send({ error: '当前节点资源不足或不可用' })
+    }
+
+    const hostInstanceType = preCheckHost.instance_type || 'container'
+    if (pkgInstanceType === 'vm' && hostInstanceType === 'container') {
+      return reply.code(400).send({ error: '套餐要求虚拟机，但当前节点只支持容器' })
+    }
+    if (pkgInstanceType === 'container' && hostInstanceType === 'vm') {
+      return reply.code(400).send({ error: '套餐要求容器，但当前节点只支持虚拟机' })
+    }
+
+    const hostImageAvailability = await getSystemImageAvailabilityForHost(image, preCheckHost.id, {
+      instanceType: pkgInstanceType,
+      memory: requestedMemory
+    })
+    if (!hostImageAvailability.ok) {
+      switch (hostImageAvailability.reason) {
+        case 'host_not_found':
+          return reply.code(404).send({ error: '节点不存在' })
+        case 'image_not_found':
+          return reply.code(400).send({ error: '镜像不存在' })
+        case 'memory_incompatible':
+          return reply.code(400).send({ error: '128MB 内存只能使用 Alpine/Debian 镜像' })
+        case 'instance_type_mismatch':
+          return reply.code(400).send({ error: '镜像类型与套餐类型不兼容' })
+        case 'host_instance_type_mismatch':
+          return reply.code(400).send({ error: '套餐类型与宿主机不兼容' })
+        default:
+          return reply.code(400).send({ error: '当前节点不可用该镜像' })
+      }
+    }
+
+    const networkMode = (pkg.network_mode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+    if (pkgInstanceType === 'vm' && ['nat_ipv6_nat', 'ipv6_nat'].includes(networkMode)) {
+      return reply.code(400).send({ error: 'KVM packages do not support IPv4 NAT & IPv6 NAT or IPv6 NAT network modes' })
+    }
+    const autoPassword = randomUUID().replace(/-/g, '').slice(0, 16)
+    const { configPayload, metaData } = generateIncusConfig({
+      instanceName: name,
+      imageAlias: image,
+      rootPassword: autoPassword,
+      sshKey,
+      networkMode,
+      type: pkgInstanceType === 'vm' ? 'virtual-machine' : 'container'
+    })
+
+    const incusId = `u${targetUser.id}-${randomUUID().replace(/-/g, '').slice(0, 8)}`
+    const packageTrafficLimit = pkgWithExtras.monthly_traffic_limit ? BigInt(pkgWithExtras.monthly_traffic_limit) : null
+
+    let instanceId = 0
+    let lockedHost: Awaited<ReturnType<typeof db.selectAndReserveHostWithLock>> | null = null
+
+    try {
+      const { Prisma } = await import('@prisma/client')
+      const paidGiftExpiresAt = selectedPlan && paidGiftDays
+        ? new Date(Date.now() + paidGiftDays * 24 * 60 * 60 * 1000)
+        : null
+
+      const txResult = await prisma.$transaction(async (tx) => {
+        const reservedHost = await db.selectAndReserveHostWithLock(tx, {
+          packageHostIds: packageHostIds.length > 0 ? packageHostIds : undefined,
+          nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+          cpu: requestedCpu,
+          memory: requestedMemory,
+          disk: requestedDisk,
+          hostId,
+          ownerId: pkg.user_id!,
+          portCount: ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(networkMode) ? (selectedPlan?.portLimit || pkgWithExtras.port_limit || 0) : 0
+        })
+
+        if (!reservedHost) {
+          throw new Error('HOST_RESOURCES_INSUFFICIENT')
+        }
+
+        const baseMonthlyTrafficLimit = selectedPlan ? selectedPlan.trafficLimit : packageTrafficLimit
+        const effectiveMonthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(tx as any, {
+          packageId,
+          hostId: reservedHost.id,
+          baseTrafficLimit: baseMonthlyTrafficLimit
+        })
+
+        const instanceQuota = selectedPlan ? {
+          portLimit: selectedPlan.portLimit,
+          snapshotLimit: selectedPlan.snapshotLimit,
+          backupLimit: selectedPlan.backupLimit,
+          siteLimit: selectedPlan.siteLimit,
+          swapSize: pkgInstanceType === 'container' ? selectedPlan.swapSize : null,
+          monthlyTrafficLimit: effectiveMonthlyTrafficLimit,
+          limitsIngress: planTrafficSpeed,
+          limitsEgress: planTrafficSpeed
+        } : {
+          portLimit: pkgWithExtras.port_limit ?? null,
+          snapshotLimit: pkgWithExtras.snapshot_limit ?? null,
+          backupLimit: pkgWithExtras.backup_limit ?? null,
+          siteLimit: pkgWithExtras.site_limit ?? null,
+          swapSize: null as number | null,
+          monthlyTrafficLimit: effectiveMonthlyTrafficLimit,
+          limitsIngress: null as string | null,
+          limitsEgress: null as string | null
+        }
+
+        const snapshotSpecs = {
+          packageId: pkg.id,
+          packageName: pkg.name,
+          planId: selectedPlan?.id ?? null,
+          planName: selectedPlan?.name ?? null,
+          cpuMax: pkg.cpu_max,
+          memoryMax: pkg.memory_max,
+          diskMax: pkg.disk_max,
+          networkMode,
+          portLimit: selectedPlan?.portLimit || pkgWithExtras.port_limit || 20,
+          nested: Boolean(pkg.nested),
+          privileged: Boolean(pkg.privileged),
+          nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+          createdAt: new Date().toISOString(),
+          hostOwnerGift: !isAdmin,
+          adminGift: isAdmin,
+          giftBy: operator.id,
+          giftByType: isAdmin ? 'admin' : 'host_owner',
+          isPaidInstance: !!selectedPlan,
+          chargedFirstMonth: false,
+          giftDays: paidGiftDays
+        }
+
+        const instance = await tx.instance.create({
+          data: {
+            incusId,
+            name,
+            userId: targetUser.id,
+            hostId: reservedHost.id,
+            packageId,
+            packagePlanId: selectedPlan?.id ?? null,
+            image,
+            cpu: requestedCpu,
+            memory: requestedMemory,
+            disk: requestedDisk,
+            networkMode,
+            snapshottedSpecs: snapshotSpecs as any,
+            sshPort: metaData.sshPort,
+            rootPassword: encryptSensitiveData(metaData.rootPassword),
+            status: 'creating',
+            monthlyTrafficLimit: instanceQuota.monthlyTrafficLimit,
+            portLimit: instanceQuota.portLimit,
+            snapshotLimit: instanceQuota.snapshotLimit,
+            backupLimit: instanceQuota.backupLimit,
+            siteLimit: instanceQuota.siteLimit,
+            swapEnabled: false,
+            swapSize: instanceQuota.swapSize,
+            limitsIngress: instanceQuota.limitsIngress,
+            limitsEgress: instanceQuota.limitsEgress,
+            expiresAt: paidGiftExpiresAt,
+            billingPrice: billing?.price ?? null,
+            billingCycle: billing?.billingCycle ?? null,
+            autoRenew: false
+          }
+        })
+
+        if (selectedPlan && billing && paidGiftExpiresAt && paidGiftDays) {
+          await tx.instanceBillingRecord.create({
+            data: {
+              instanceId: instance.id,
+              userId: targetUser.id,
+              type: 'newPurchase',
+              amount: 0,
+              months: 0,
+              periodStart: new Date(),
+              periodEnd: paidGiftExpiresAt,
+              balanceLogId: null,
+              remark: `${isAdmin ? '管理员' : '节点所有者'}赠送付费实例免费时长 ${paidGiftDays} 天`
+            }
+          })
+        }
+
+        return {
+          instanceId: instance.id,
+          reservedHost
+        }
+      }, {
+        isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+        timeout: 15000
+      })
+
+      instanceId = txResult.instanceId
+      lockedHost = txResult.reservedHost
+      if (!lockedHost) {
+        throw new Error('HOST_NOT_FOUND')
+      }
+
+      let staticIPv4: string | null = null
+      let staticIPv6: string | null = null
+
+      try {
+        let attempts = 0
+        while (attempts < 50) {
+          staticIPv4 = generateRandomIPv4()
+          const exists = await db.isIpAddressExistsOnHost(staticIPv4, lockedHost.id)
+          if (!exists) break
+          attempts++
+          staticIPv4 = null
+        }
+      } catch (error) {
+        fastify.log.warn(error, '[Host Create For User] failed to allocate IPv4')
+      }
+
+      const lockedHostWithIpv6 = lockedHost as typeof lockedHost & {
+        ipv6_mode?: number
+        ipv6_subnet?: string | null
+        ipv6_gateway?: string | null
+        ipv6_parent_interface?: string | null
+      }
+
+      // 仅 Routed 模式（需要独立 IPv6 地址）才从子网分配
+      const needsRoutedIPv6 = ['nat_ipv6', 'ipv6_only'].includes(networkMode)
+      if (lockedHostWithIpv6.ipv6_subnet && needsRoutedIPv6) {
+        try {
+          let attempts = 0
+          while (attempts < 50) {
+            staticIPv6 = generateRandomIPv6(lockedHostWithIpv6.ipv6_subnet)
+            const exists = await db.isIpAddressExists(staticIPv6)
+            if (!exists) break
+            attempts++
+            staticIPv6 = null
+          }
+        } catch (error) {
+          fastify.log.warn(error, '[Host Create For User] failed to allocate IPv6')
+        }
+      }
+
+      let finalConfigPayload = configPayload
+      if (pkgInstanceType === 'vm') {
+        const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+        const vmResult = generateVmConfig({
+          instanceName: name,
+          instanceIdSeed: incusId,
+          imageAlias: image,
+          rootPassword: metaData.rootPassword,
+          sshKey,
+          network: staticIPv4 ? {
+            ipAddress: `${staticIPv4}/22`,
+            gateway: '10.10.0.1',
+            dns: ['8.8.8.8', '1.1.1.1'],
+            ipv6Address: staticIPv6 || undefined,
+            ipv6Gateway: staticIPv6 ? (lockedHostWithIpv6.ipv6_gateway || undefined) : undefined
+          } : undefined
+        })
+        finalConfigPayload = vmResult.configPayload
+      } else if (staticIPv4) {
+        // 容器类型：重新生成包含静态 IP 的 cloud-init 配置
+        const containerResult = generateIncusConfig({
+          instanceName: name,
+          imageAlias: image,
+          rootPassword: metaData.rootPassword,
+          sshKey,
+          networkMode,
+          type: 'container',
+          network: {
+            ipAddress: `${staticIPv4}/22`,
+            gateway: '10.10.0.1',
+            dns: ['8.8.8.8', '1.1.1.1'],
+            ipv6Address: staticIPv6 ? `${staticIPv6}/128` : undefined,
+            ipv6Gateway: staticIPv6 ? 'fe80::1' : undefined
+          }
+        })
+        finalConfigPayload = containerResult.configPayload
+      }
+
+      let selectedStoragePool = await db.resolveStoragePoolForNewInstance(lockedHost.id, { packageId })
+      if (!selectedStoragePool) {
+        selectedStoragePool = 'default'
+      }
+
+      await prisma.instance.update({
+        where: { id: instanceId },
+        data: {
+          storagePoolName: selectedStoragePool
+        }
+      })
+
+      const ioMode = pkgWithExtras.io_limit_mode || 'throughput'
+
+      provisionManagedInstanceAsync(instanceId, lockedHost as unknown as Host, {
+        name: incusId,
+        image,
+        cpu: requestedCpu,
+        memory: requestedMemory,
+        disk: requestedDisk,
+        cloudInitConfig: finalConfigPayload,
+        networkMode,
+        nested: Boolean(pkg.nested),
+        privileged: Boolean(pkg.privileged),
+        portLimit: pkgWithExtras.port_limit || 20,
+        instanceType: pkgInstanceType,
+        sshPort: metaData.sshPort,
+        storagePool: selectedStoragePool,
+        ipv4Address: staticIPv4,
+        ipv6Address: staticIPv6,
+        ipv6Gateway: lockedHostWithIpv6.ipv6_gateway || null,
+        hostInterface: lockedHostWithIpv6.ipv6_parent_interface || 'eth0',
+        limitsRead: ioMode === 'throughput' ? pkgWithExtras.limits_read : null,
+        limitsWrite: ioMode === 'throughput' ? pkgWithExtras.limits_write : null,
+        limitsReadIops: ioMode === 'iops' ? pkgWithExtras.limits_read_iops : null,
+        limitsWriteIops: ioMode === 'iops' ? pkgWithExtras.limits_write_iops : null,
+        limitsIngress: planTrafficSpeed || pkgWithExtras.limits_ingress,
+        limitsEgress: planTrafficSpeed || pkgWithExtras.limits_egress,
+        limitsProcesses: pkgWithExtras.limits_processes,
+        limitsCpuPriority: pkgWithExtras.limits_cpu_priority,
+        bootAutostart: pkgWithExtras.boot_autostart,
+        bootAutostartPriority: pkgWithExtras.boot_autostart_priority,
+        bootAutostartDelay: pkgWithExtras.boot_autostart_delay,
+        bootHostShutdownTimeout: pkgWithExtras.boot_host_shutdown_timeout
+      }).catch(error => {
+        fastify.log.error(error, `[Host Create For User] instance ${instanceId} provisioning failed`)
+      })
+
+      const logDetail = selectedPlan
+        ? `${isAdmin ? 'Admin' : 'Host owner'} created paid instance "${name}" for user ${targetUser.username} on host "${lockedHost.name}" (Package: ${pkg.name}, Plan: ${selectedPlan.name}, Gift: ${paidGiftDays} days free)`
+        : `${isAdmin ? 'Admin' : 'Host owner'} created free instance "${name}" for user ${targetUser.username} on host "${lockedHost.name}" (Package: ${pkg.name})`
+
+      await createLog(
+        operator.id,
+        'host',
+        'host.instance_create_for_user',
+        logDetail,
+        'success',
+        { instanceId }
+      )
+
+      const formatMemory = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`
+      const formatDiskSize = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(0)} GB` : `${mb} MB`
+      const resourceInfo = `CPU ${requestedCpu}% | 内存 ${formatMemory(requestedMemory)} | 磁盘 ${formatDiskSize(requestedDisk)}`
+
+      let notifyTitle: string
+      let notifyContent: string
+      if (selectedPlan) {
+        notifyTitle = isAdmin ? '收到管理员赠送的付费实例' : '收到节点所有者赠送的付费实例'
+        notifyContent = `${isAdmin ? '管理员' : '节点所有者'} ${operator.username} 为您赠送了一台付费实例：${name}
+套餐：${pkg.name}
+方案：${selectedPlan.name}
+配置：${resourceInfo}
+节点：${lockedHost.name}
+免费时长：${paidGiftDays} 天
+到期时间：${paidGiftExpiresAt!.toLocaleDateString()}
+到期后将按方案价格正常计费`
+      } else {
+        notifyTitle = isAdmin ? '收到管理员赠送的实例' : '收到节点所有者赠送的实例'
+        notifyContent = `${isAdmin ? '管理员' : '节点所有者'} ${operator.username} 为您创建了一台实例：${name}
+套餐：${pkg.name}
+配置：${resourceInfo}
+节点：${lockedHost.name}`
+      }
+
+      await createInboxMessage({
+        userId: targetUser.id,
+        eventType: selectedPlan ? 'instance_paid_created' : 'instance_gift',
+        title: notifyTitle,
+        content: notifyContent,
+        data: {
+          instanceId,
+          instanceName: name,
+          packageName: pkg.name,
+          planName: selectedPlan?.name ?? null,
+          cpu: requestedCpu,
+          memory: requestedMemory,
+          disk: requestedDisk,
+          hostName: lockedHost.name,
+          isPaid: !!selectedPlan,
+          charged: false,
+          amount: 0,
+          expiresAt: paidGiftExpiresAt?.toISOString() ?? null,
+          giftDays: paidGiftDays ?? null,
+          createdBy: operator.username,
+          creatorType: isAdmin ? 'admin' : 'host_owner'
+        }
+      })
+
+      if (targetUser.email) {
+        try {
+          await sendAdminInstanceCreatedEmail(targetUser.email, {
+            username: targetUser.username,
+            instanceName: name,
+            packageName: pkg.name,
+            planName: selectedPlan?.name,
+            hostName: lockedHost.name,
+            cpu: requestedCpu,
+            memory: requestedMemory,
+            disk: requestedDisk,
+            isPaid: !!selectedPlan,
+            charged: false,
+            amount: 0,
+            expiresAt: paidGiftExpiresAt || undefined,
+            giftDays: paidGiftDays || undefined,
+            creatorType: isAdmin ? 'admin' : 'host_owner',
+            creatorName: operator.username
+          })
+        } catch (error) {
+          fastify.log.warn(error, '[Host Create For User] failed to send email')
+        }
+      }
+
+      return reply.status(202).send({
+        message: '实例创建中',
+        instance: {
+          id: instanceId,
+          name,
+          incusId,
+          host: lockedHost.name,
+          status: 'creating',
+          user: { id: targetUser.id, username: targetUser.username },
+          isPaid: !!selectedPlan,
+          planName: selectedPlan?.name ?? null,
+          charged: false,
+          amount: 0,
+          expiresAt: paidGiftExpiresAt?.toISOString() ?? null,
+          giftDays: paidGiftDays ?? null
+        }
+      })
+    } catch (error: any) {
+      fastify.log.error(error, '[Host Create For User] failed')
+
+      if (error.message?.includes('HOST_RESOURCES_INSUFFICIENT')) {
+        return reply.status(503).send({ error: '当前节点资源不足或已被占用' })
+      }
+      if (error.message?.includes('USER_NOT_FOUND')) {
+        return reply.status(400).send({ error: '用户不存在' })
+      }
+
+      return reply.status(500).send({ error: '创建实例失败，请稍后重试' })
+    }
+  })
+
+  // POST /api/hosts/:id/instances/gift-days - 节点所有者为实例赠送时长（免费）
+  fastify.post<{
+    Params: { id: string }
+    Body: { instanceIds: number[]; days: number }
+  }>('/:id/instances/gift-days', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds', 'days'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          },
+          days: { type: 'integer', minimum: 1, maximum: 365 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const { instanceIds, days } = request.body
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以赠送时长
+    if (host.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取该节点下的付费实例（package_plan_id 不为 null）
+    const instances = await prisma.instance.findMany({
+      where: {
+        id: { in: instanceIds },
+        hostId: hostId,
+        status: { not: 'deleted' },
+        packagePlanId: { not: null }  // 只处理付费实例
+      },
+      include: {
+        user: { select: { id: true, username: true } }
+      }
+    })
+
+    if (instances.length === 0) {
+      return reply.code(400).send({ error: '没有找到可赠送时长的付费实例' })
+    }
+
+    const results: { instanceId: number; instanceName: string; success: boolean; error?: string; newExpiresAt?: string }[] = []
+    const now = new Date()
+    const msPerDay = 24 * 60 * 60 * 1000
+
+    for (const instance of instances) {
+      try {
+        // 计算新的到期时间
+        let baseDate: Date
+        if (instance.expiresAt && instance.expiresAt > now) {
+          // 未过期：从当前到期时间延长
+          baseDate = instance.expiresAt
+        } else {
+          // 已过期或无到期时间：从当前时间开始
+          baseDate = now
+        }
+        const newExpiresAt = new Date(baseDate.getTime() + days * msPerDay)
+
+        // 更新实例到期时间
+        await prisma.instance.update({
+          where: { id: instance.id },
+          data: {
+            expiresAt: newExpiresAt,
+            // 如果实例是因过期被封停的，自动解封
+            status: instance.status === 'suspended' && instance.suspendReason === 'expired' ? 'stopped' : instance.status,
+            suspendedAt: instance.status === 'suspended' && instance.suspendReason === 'expired' ? null : instance.suspendedAt,
+            suspendedBy: instance.status === 'suspended' && instance.suspendReason === 'expired' ? null : instance.suspendedBy,
+            suspendReason: instance.status === 'suspended' && instance.suspendReason === 'expired' ? null : instance.suspendReason
+          }
+        })
+
+        results.push({
+          instanceId: instance.id,
+          instanceName: instance.name,
+          success: true,
+          newExpiresAt: newExpiresAt.toISOString()
+        })
+
+        // 记录日志
+        fastify.log.info(`[GiftDays] Host owner ${user.username} gifted ${days} days to instance ${instance.name} (ID: ${instance.id}), new expires_at: ${newExpiresAt.toISOString()}`)
+      } catch (err: any) {
+        const errorMessage = err?.message || String(err)
+        results.push({
+          instanceId: instance.id,
+          instanceName: instance.name,
+          success: false,
+          error: errorMessage
+        })
+        fastify.log.error(`[GiftDays] Failed to gift days to instance ${instance.name}: ${errorMessage}`)
+      }
+    }
+
+    const successCount = results.filter(r => r.success).length
+    const failedCount = results.filter(r => !r.success).length
+
+    return {
+      message: `成功为 ${successCount} 个实例赠送 ${days} 天${failedCount > 0 ? `，${failedCount} 个失败` : ''}`,
+      results,
+      successCount,
+      failedCount,
+      skippedCount: instanceIds.length - instances.length  // 跳过的免费实例数
+    }
+  })
+
+  // PATCH /api/hosts/:id/instances/:instanceId/renewal-price - 节点所有者修改付费实例的续费价格
+  fastify.patch<{
+    Params: { id: string; instanceId: string }
+    Body: { newPrice: number }
+  }>('/:id/instances/:instanceId/renewal-price', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['newPrice'],
+        properties: {
+          newPrice: { type: 'number', minimum: 0, maximum: 99999 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+    const { newPrice } = request.body
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证节点存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限检查：只有节点所有者可以修改价格
+    if (host.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取实例并验证
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId },
+      include: {
+        user: { select: { id: true, username: true, email: true } }
+      }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 验证实例属于该节点
+    if (instance.hostId !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    // 验证是付费实例
+    if (!instance.packagePlanId) {
+      return reply.code(400).send({ error: '只能修改付费实例的续费价格' })
+    }
+
+    // 验证实例未删除
+    if (instance.status === 'deleted') {
+      return reply.code(400).send({ error: '实例已删除' })
+    }
+
+    const oldPrice = instance.billingPrice ? Number(instance.billingPrice) : 0
+
+    // 检查价格是否有变化
+    if (Math.abs(oldPrice - newPrice) < 0.001) {
+      return reply.code(400).send({ error: '新价格与原价格相同，无需修改' })
+    }
+
+    // 更新实例续费价格
+    await prisma.instance.update({
+      where: { id: instanceId },
+      data: {
+        billingPrice: newPrice
+      }
+    })
+
+    // 发送通知给用户
+    try {
+      await sendNotification(instance.userId, 'instance_renewal_price_updated', {
+        instanceName: instance.name,
+        oldPrice,
+        newPrice,
+        hostName: host.name
+      })
+    } catch (err) {
+      fastify.log.error(`[UpdateRenewalPrice] Failed to send notification: ${err}`)
+    }
+
+    if (instance.user?.email) {
+      try {
+        await sendRenewalPriceUpdatedEmail(instance.user.email, {
+          username: instance.user.username,
+          instanceName: instance.name,
+          hostName: host.name,
+          oldPrice,
+          newPrice
+        })
+      } catch (err) {
+        fastify.log.error(`[UpdateRenewalPrice] Failed to send email: ${err}`)
+      }
+    }
+
+    // 记录日志
+    await createLog(
+      user.id,
+      'host',
+      'host.update_instance_renewal_price',
+      `Updated renewal price for instance "${instance.name}" (ID: ${instanceId}): ¥${oldPrice.toFixed(2)} -> ¥${newPrice.toFixed(2)}`,
+      'success'
+    )
+
+    fastify.log.info(`[UpdateRenewalPrice] Host owner ${user.username} updated renewal price for instance ${instance.name}: ¥${oldPrice.toFixed(2)} -> ¥${newPrice.toFixed(2)}`)
+
+    return {
+      message: '续费价格已更新',
+      instanceId,
+      instanceName: instance.name,
+      oldPrice,
+      newPrice
+    }
+  })
+
+  // ========== 宿主机运维中心 ==========
+
+  // 宿主机实例盘点：读取 Incus 实例并与数据库对账
+  fastify.post<{ Params: { id: string } }>('/:id/ops/discover', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+      const { listInstances } = await import('../lib/incus/incus-instances.js')
+
+      // 从 Incus 读取宿主机上真实存在的所有实例
+      const incusInstances = await listInstances(client) as Array<{
+        name: string
+        type: string
+        status: string
+        config?: Record<string, unknown>
+        devices?: Record<string, unknown>
+      }>
+
+      // 从数据库读取该节点下所有非已删除实例
+      const dbInstances = await prisma.instance.findMany({
+        where: { hostId, status: { not: 'deleted' } },
+        select: { id: true, name: true, incusId: true, status: true, networkMode: true, ipv4: true, ipv6: true, userId: true }
+      })
+
+      // 建立 incusId -> db实例 映射
+      const dbByIncusId = new Map(dbInstances.map(i => [i.incusId, i]))
+      const incusByName = new Map(incusInstances.map(i => [i.name, i]))
+
+      // 分类
+      const managed: Array<{ incusName: string; incusType: string; incusStatus: string; dbId: number; dbStatus: string; userId: number }> = []
+      const orphaned: Array<{ incusName: string; incusType: string; incusStatus: string }> = []
+      const missing: Array<{ dbId: number; dbName: string; incusId: string; dbStatus: string }> = []
+
+      for (const inst of incusInstances) {
+        const dbInst = dbByIncusId.get(inst.name)
+        if (dbInst) {
+          managed.push({
+            incusName: inst.name,
+            incusType: inst.type,
+            incusStatus: inst.status,
+            dbId: dbInst.id,
+            dbStatus: dbInst.status,
+            userId: dbInst.userId
+          })
+        } else {
+          orphaned.push({
+            incusName: inst.name,
+            incusType: inst.type,
+            incusStatus: inst.status
+          })
+        }
+      }
+
+      for (const dbInst of dbInstances) {
+        if (!incusByName.has(dbInst.incusId)) {
+          missing.push({
+            dbId: dbInst.id,
+            dbName: dbInst.name,
+            incusId: dbInst.incusId,
+            dbStatus: dbInst.status
+          })
+        }
+      }
+
+      request.log.info(`[ops/discover] host=${host.name} managed=${managed.length} orphaned=${orphaned.length} missing=${missing.length}`)
+
+      return {
+        managed,
+        orphaned,
+        missing,
+        summary: {
+          totalIncus: incusInstances.length,
+          totalDb: dbInstances.length,
+          managedCount: managed.length,
+          orphanedCount: orphaned.length,
+          missingCount: missing.length
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      request.log.error(`[ops/discover] host=${host.name} error=${errorMessage}`)
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 宿主机基线同步：同步资源信息 + 批量同步实例状态/IP
+  fastify.post<{ Params: { id: string } }>('/:id/ops/baseline-sync', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+
+      // 1. 同步宿主机资源信息（复用 sync 逻辑）
+      const resources = await client.getResources() as {
+        cpu?: { total?: number }
+        memory?: { total?: number }
+        storage?: { disks?: Array<{ size?: number }>; pools?: Record<string, { space?: { total?: number } }> }
+      }
+
+      await db.updateHostStatus(hostId, 'online')
+
+      const detectedIpv6 = extractHostPublicIpv6FromResources(resources as Record<string, unknown>)
+      if (detectedIpv6 && !host.nat_public_ipv6) {
+        await prisma.host.update({
+          where: { id: hostId },
+          data: { natPublicIpv6: detectedIpv6 }
+        })
+      }
+
+      const usedResources = await db.calculateHostResourcesFromInstances(hostId)
+      await db.updateHostResources(hostId, {
+        cpuUsed: usedResources.cpuUsed,
+        memoryUsed: usedResources.memoryUsed,
+        diskUsed: usedResources.diskUsed
+      })
+
+      // 2. 获取节点下所有 running 状态实例
+      const instances = await prisma.instance.findMany({
+        where: { hostId, status: 'running' }
+      })
+
+      request.log.info(`[ops/baseline-sync] host=${host.name} syncing ${instances.length} running instances`)
+
+      let syncedCount = 0
+      let ipChangedCount = 0
+
+      if (instances.length > 0) {
+        const { getInstance, getInstanceState } = await import('../lib/incus/incus-instances.js')
+        const { mapInstanceStatus } = await import('../lib/incus/incus-utils.js')
+
+        for (const instance of instances) {
+          try {
+            const [state, incusInstance] = await Promise.all([
+              getInstanceState(client, instance.incusId),
+              getInstance(client, instance.incusId)
+            ]) as [{
+              status?: string
+              network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+            }, {
+              devices?: Record<string, Record<string, unknown>>
+              expanded_devices?: Record<string, Record<string, unknown>>
+            }]
+
+            if (state.status) {
+              const newStatus = mapInstanceStatus(state.status)
+              if (newStatus !== 'unknown' && newStatus !== instance.status) {
+                await db.updateInstanceStatus(instance.id, newStatus as 'creating' | 'running' | 'stopped' | 'error')
+              }
+            }
+
+            const persistedNetwork = await persistResolvedInstanceNetworkAddresses(
+              { id: instance.id, name: instance.name, hostId: host.id, networkMode: instance.networkMode, ipv4: instance.ipv4, ipv6: instance.ipv6 },
+              resolveInstanceNetworkAddresses(
+                { id: instance.id, name: instance.name, hostId: host.id, networkMode: instance.networkMode, ipv4: instance.ipv4, ipv6: instance.ipv6 },
+                incusInstance,
+                state
+              ),
+              { updateLastSyncedAt: true }
+            )
+
+            if (persistedNetwork.ipv4Changed || persistedNetwork.ipv6Changed) {
+              ipChangedCount++
+            }
+            syncedCount++
+          } catch (err) {
+            request.log.warn(`[ops/baseline-sync] instance ${instance.incusId} sync failed: ${err instanceof Error ? err.message : String(err)}`)
+          }
+        }
+      }
+
+      request.log.info(`[ops/baseline-sync] host=${host.name} done. synced=${syncedCount} ipChanged=${ipChangedCount}`)
+
+      return {
+        message: 'Baseline sync completed',
+        resources: {
+          cpuUsed: usedResources.cpuUsed,
+          memoryUsed: usedResources.memoryUsed,
+          diskUsed: usedResources.diskUsed
+        },
+        instanceSync: {
+          total: instances.length,
+          synced: syncedCount,
+          ipChanged: ipChangedCount
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      request.log.error(`[ops/baseline-sync] host=${host.name} error=${errorMessage}`)
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 宿主机网络修复：对所有实例批量同步 IP/状态
+  fastify.post<{ Params: { id: string } }>('/:id/ops/network-repair', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const { id } = request.params
+    const hostId = Number(id)
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    let client: IncusClient
+    try {
+      client = await getIncusClient(host)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(503).send({ error: `无法连接到节点: ${errorMessage}` })
+    }
+
+    // 获取所有非删除状态实例
+    const instances = await prisma.instance.findMany({
+      where: { hostId, status: { notIn: ['deleted', 'creating'] } }
+    })
+
+    const { getInstance, getInstanceState } = await import('../lib/incus/incus-instances.js')
+    const { mapInstanceStatus } = await import('../lib/incus/incus-utils.js')
+
+    const results: Array<{
+      id: number
+      name: string
+      success: boolean
+      statusChanged?: boolean
+      oldStatus?: string
+      newStatus?: string
+      ipv4Changed?: boolean
+      oldIpv4?: string | null
+      newIpv4?: string | null
+      ipv6Changed?: boolean
+      oldIpv6?: string | null
+      newIpv6?: string | null
+      error?: string
+    }> = []
+
+    let successCount = 0
+    let changedCount = 0
+
+    for (const instance of instances) {
+      try {
+        const [state, incusInstance] = await Promise.all([
+          getInstanceState(client!, instance.incusId),
+          getInstance(client!, instance.incusId)
+        ]) as [{
+          status?: string
+          network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+        }, {
+          devices?: Record<string, Record<string, unknown>>
+          expanded_devices?: Record<string, Record<string, unknown>>
+        }]
+
+        let statusChanged = false
+        const oldStatus = instance.status
+        let newStatus: string = instance.status
+
+        if (state.status) {
+          const mapped = mapInstanceStatus(state.status)
+          if (mapped !== 'unknown' && mapped !== instance.status) {
+            await db.updateInstanceStatus(instance.id, mapped as 'creating' | 'running' | 'stopped' | 'error')
+            statusChanged = true
+            newStatus = mapped
+            changedCount++
+          }
+        }
+
+        const persistedNetwork = await persistResolvedInstanceNetworkAddresses(
+          { id: instance.id, name: instance.name, hostId: host.id, networkMode: instance.networkMode, ipv4: instance.ipv4, ipv6: instance.ipv6 },
+          resolveInstanceNetworkAddresses(
+            { id: instance.id, name: instance.name, hostId: host.id, networkMode: instance.networkMode, ipv4: instance.ipv4, ipv6: instance.ipv6 },
+            incusInstance,
+            state
+          ),
+          { updateLastSyncedAt: true }
+        )
+
+        if (persistedNetwork.ipv4Changed || persistedNetwork.ipv6Changed) {
+          changedCount++
+        }
+
+        results.push({
+          id: instance.id,
+          name: instance.name,
+          success: true,
+          statusChanged: statusChanged || undefined,
+          oldStatus: statusChanged ? oldStatus : undefined,
+          newStatus: statusChanged ? newStatus : undefined,
+          ipv4Changed: persistedNetwork.ipv4Changed || undefined,
+          oldIpv4: persistedNetwork.ipv4Changed ? persistedNetwork.oldIpv4 : undefined,
+          newIpv4: persistedNetwork.ipv4Changed ? persistedNetwork.newIpv4 : undefined,
+          ipv6Changed: persistedNetwork.ipv6Changed || undefined,
+          oldIpv6: persistedNetwork.ipv6Changed ? persistedNetwork.oldIpv6 : undefined,
+          newIpv6: persistedNetwork.ipv6Changed ? persistedNetwork.newIpv6 : undefined
+        })
+        successCount++
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        results.push({
+          id: instance.id,
+          name: instance.name,
+          success: false,
+          error: errorMessage
+        })
+      }
+    }
+
+    request.log.info(`[ops/network-repair] host=${host.name} total=${instances.length} success=${successCount} changed=${changedCount}`)
+
+    return {
+      message: 'Network repair completed',
+      results,
+      summary: {
+        total: instances.length,
+        success: successCount,
+        failed: instances.length - successCount,
+        changed: changedCount
+      }
+    }
+  })
+
+  fastify.post<{
+    Params: { id: string; instanceId: string }
+  }>('/:id/ops/instances/:instanceId/preview', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    const isStopped = instance.status === 'stopped'
+    const isSuspended = instance.status === 'suspended'
+    const canSync = !activeTask
+    const canRestart = !activeTask && !isSuspended
+    const canForceRestart = !activeTask && !isSuspended
+    const canRebuild = !activeTask && !isSuspended && isStopped
+    const canRecreate = !activeTask && !isSuspended
+
+    const notes: string[] = []
+    if (activeTask) {
+      notes.push(`当前存在进行中的 ${activeTask.taskType} 任务 #${activeTask.id}`)
+    }
+    if (isSuspended) {
+      notes.push(instance.suspend_reason === 'expired' ? '实例处于到期封停状态，不允许高风险操作' : '实例处于封停状态，不允许高风险操作')
+    }
+    if (!isStopped) {
+      notes.push('实例当前不是 stopped，高风险重装需先停机')
+    }
+
+    let suggestedAction: 'rebuild' | 'recreate' | 'sync' | 'restart' | 'none' = 'none'
+    if (activeTask || isSuspended) {
+      suggestedAction = 'none'
+    } else if (!isStopped) {
+      suggestedAction = 'sync'
+    } else {
+      suggestedAction = 'rebuild'
+    }
+
+    return {
+      instanceId: instance.id,
+      instanceName: instance.name,
+      incusId: instance.incus_id,
+      instanceStatus: instance.status,
+      hostName: host.name,
+      hostId: host.id,
+      imageAlias: instance.image || null,
+      canSync,
+      canRestart,
+      canForceRestart,
+      canRebuild,
+      canRecreate,
+      activeTask: activeTask
+        ? {
+            id: activeTask.id,
+            taskType: activeTask.taskType,
+            status: activeTask.status
+          }
+        : null,
+      risk: {
+        status: instance.status,
+        isStopped,
+        hasActiveTask: !!activeTask,
+        suggestedAction,
+        notes
+      }
+    }
+  })
+
+  fastify.get<{
+    Params: { id: string; instanceId: string }
+  }>('/:id/ops/instances/:instanceId/ssh-keys', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    const keys = await getSSHKeysByUserId(instance.user_id)
+    return {
+      keys: keys.map(key => ({
+        id: key.id,
+        name: key.name,
+        fingerprint: key.fingerprint,
+        created_at: key.created_at
+      }))
+    }
+  })
+
+  fastify.get<{
+    Params: { id: string; instanceId: string }
+    Querystring: { distro?: string }
+  }>('/:id/ops/instances/:instanceId/init-commands', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+    const distro = (request.query.distro || 'linux').trim()
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    const commands = await getEnabledCommandsByDistro(instance.user_id, distro)
+    return {
+      commands: commands.map(cmd => ({
+        id: cmd.id,
+        name: cmd.name,
+        commandLineCount: cmd.command.split(/\r?\n/).filter(line => line.trim().length > 0).length,
+        distros: cmd.distros,
+        description: cmd.description
+      }))
+    }
+  })
+
+  fastify.get<{
+    Params: { id: string }
+  }>('/:id/ops/audit/rules', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    if (isNaN(hostId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const rules = await getAuditRuleResponses(hostId)
+
+    return {
+      ...rules,
+      canCreateGlobal: user.role === 'admin'
+    }
+  })
+
+  fastify.patch<{
+    Params: { id: string; ruleId: string }
+    Body: Partial<{
+      name: string
+      description: string | null
+      severity: AuditSeverity
+      category: string
+      targetTypes: AuditRuleTarget[]
+      matchType: AuditRuleMatchType
+      pattern: string
+      caseSensitive: boolean
+      recommendation: string | null
+      enabled: boolean
+    }>
+  }>('/:id/ops/audit/builtin-rules/:ruleId', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 2, maxLength: 80 },
+          description: { type: ['string', 'null'], maxLength: 500 },
+          severity: { type: 'string', enum: ['info', 'low', 'medium', 'high'] },
+          category: { type: 'string', maxLength: 64 },
+          targetTypes: { type: 'array', items: { type: 'string', enum: ['process', 'network', 'startup'] } },
+          matchType: { type: 'string', enum: ['contains', 'regex', 'exact'] },
+          pattern: { type: 'string', minLength: 1, maxLength: 500 },
+          caseSensitive: { type: 'boolean' },
+          recommendation: { type: ['string', 'null'], maxLength: 1000 },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    if (isNaN(hostId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const baseRule = findBuiltinAuditRule(request.params.ruleId)
+    if (!baseRule) return reply.code(404).send({ error: '系统内置规则不存在' })
+
+    const matchType = request.body.matchType !== undefined ? normalizeAuditMatchType(request.body.matchType) : baseRule.matchType
+    const pattern = request.body.pattern !== undefined ? request.body.pattern.trim() : baseRule.patternText
+    try {
+      validateAuditRegex(matchType, pattern)
+    } catch {
+      return reply.code(400).send({ error: '正则表达式无效' })
+    }
+
+    const data = {
+      createdById: user.id,
+      name: request.body.name?.trim() || baseRule.name,
+      description: request.body.description === undefined ? (baseRule.description || null) : (request.body.description?.trim() || null),
+      severity: request.body.severity !== undefined ? normalizeAuditSeverity(request.body.severity) : baseRule.severity,
+      category: request.body.category?.trim() || baseRule.category,
+      targetTypes: request.body.targetTypes !== undefined ? normalizeAuditTargetTypes(request.body.targetTypes) : baseRule.targetTypes,
+      matchType,
+      pattern,
+      caseSensitive: request.body.caseSensitive !== undefined ? Boolean(request.body.caseSensitive) : baseRule.caseSensitive,
+      recommendation: request.body.recommendation === undefined ? (baseRule.recommendation || null) : (request.body.recommendation?.trim() || null),
+      enabled: request.body.enabled !== undefined ? Boolean(request.body.enabled) : baseRule.enabled
+    }
+
+    const override = await prisma.instanceAuditBuiltinRuleOverride.upsert({
+      where: {
+        hostId_builtinRuleId: {
+          hostId,
+          builtinRuleId: baseRule.id
+        }
+      },
+      create: {
+        hostId,
+        builtinRuleId: baseRule.id,
+        ...data
+      },
+      update: data
+    })
+
+    await createLog(user.id, 'host', 'host.ops.audit.builtin_rule.override', `Updated builtin audit rule override "${baseRule.id}" on host "${auth.host.name}"`, 'success')
+    return toAuditRuleResponse({
+      ...applyBuiltinAuditRuleOverride(baseRule, override),
+      original: baseRule,
+      override
+    }, hostId)
+  })
+
+  fastify.delete<{
+    Params: { id: string; ruleId: string }
+  }>('/:id/ops/audit/builtin-rules/:ruleId', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    if (isNaN(hostId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const baseRule = findBuiltinAuditRule(request.params.ruleId)
+    if (!baseRule) return reply.code(404).send({ error: '系统内置规则不存在' })
+
+    await prisma.instanceAuditBuiltinRuleOverride.deleteMany({
+      where: {
+        hostId,
+        builtinRuleId: baseRule.id
+      }
+    })
+    await createLog(user.id, 'host', 'host.ops.audit.builtin_rule.reset', `Reset builtin audit rule override "${baseRule.id}" on host "${auth.host.name}"`, 'warning')
+    return { success: true }
+  })
+
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      scope?: 'host' | 'global'
+      name: string
+      description?: string
+      severity?: AuditSeverity
+      category?: string
+      targetTypes?: AuditRuleTarget[]
+      matchType?: AuditRuleMatchType
+      pattern: string
+      caseSensitive?: boolean
+      recommendation?: string
+      enabled?: boolean
+    }
+  }>('/:id/ops/audit/rules', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'pattern'],
+        properties: {
+          scope: { type: 'string', enum: ['host', 'global'] },
+          name: { type: 'string', minLength: 2, maxLength: 80 },
+          description: { type: 'string', maxLength: 500 },
+          severity: { type: 'string', enum: ['info', 'low', 'medium', 'high'] },
+          category: { type: 'string', maxLength: 64 },
+          targetTypes: { type: 'array', items: { type: 'string', enum: ['process', 'network', 'startup'] } },
+          matchType: { type: 'string', enum: ['contains', 'regex', 'exact'] },
+          pattern: { type: 'string', minLength: 1, maxLength: 500 },
+          caseSensitive: { type: 'boolean' },
+          recommendation: { type: 'string', maxLength: 1000 },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    if (isNaN(hostId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const scope = request.body.scope === 'global' ? 'global' : 'host'
+    if (scope === 'global' && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const matchType = normalizeAuditMatchType(request.body.matchType)
+    const pattern = request.body.pattern.trim()
+    try {
+      validateAuditRegex(matchType, pattern)
+    } catch {
+      return reply.code(400).send({ error: '正则表达式无效' })
+    }
+
+    const rule = await prisma.instanceAuditRule.create({
+      data: {
+        hostId: scope === 'global' ? null : hostId,
+        createdById: user.id,
+        name: request.body.name.trim(),
+        description: request.body.description?.trim() || null,
+        severity: normalizeAuditSeverity(request.body.severity),
+        category: request.body.category?.trim() || 'custom',
+        targetTypes: normalizeAuditTargetTypes(request.body.targetTypes),
+        matchType,
+        pattern,
+        caseSensitive: Boolean(request.body.caseSensitive),
+        recommendation: request.body.recommendation?.trim() || null,
+        enabled: request.body.enabled ?? true
+      }
+    })
+
+    await createLog(user.id, 'host', 'host.ops.audit.rule.create', `Created ${scope} audit rule "${rule.name}" on host "${auth.host.name}"`, 'success')
+    return toAuditRuleResponse(rule, hostId)
+  })
+
+  fastify.patch<{
+    Params: { id: string; ruleId: string }
+    Body: Partial<{
+      name: string
+      description: string | null
+      severity: AuditSeverity
+      category: string
+      targetTypes: AuditRuleTarget[]
+      matchType: AuditRuleMatchType
+      pattern: string
+      caseSensitive: boolean
+      recommendation: string | null
+      enabled: boolean
+    }>
+  }>('/:id/ops/audit/rules/:ruleId', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const ruleId = Number(request.params.ruleId)
+    if (isNaN(hostId) || isNaN(ruleId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const existing = await prisma.instanceAuditRule.findUnique({ where: { id: ruleId } })
+    if (!existing || (existing.hostId !== null && existing.hostId !== hostId)) {
+      return reply.code(404).send({ error: '审查规则不存在' })
+    }
+    if (existing.hostId === null && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const data: any = {}
+    if (request.body.name !== undefined) data.name = request.body.name.trim()
+    if (request.body.description !== undefined) data.description = request.body.description?.trim() || null
+    if (request.body.severity !== undefined) data.severity = normalizeAuditSeverity(request.body.severity)
+    if (request.body.category !== undefined) data.category = request.body.category.trim() || 'custom'
+    if (request.body.targetTypes !== undefined) data.targetTypes = normalizeAuditTargetTypes(request.body.targetTypes)
+    if (request.body.matchType !== undefined) data.matchType = normalizeAuditMatchType(request.body.matchType)
+    if (request.body.pattern !== undefined) data.pattern = request.body.pattern.trim()
+    if (request.body.caseSensitive !== undefined) data.caseSensitive = Boolean(request.body.caseSensitive)
+    if (request.body.recommendation !== undefined) data.recommendation = request.body.recommendation?.trim() || null
+    if (request.body.enabled !== undefined) data.enabled = Boolean(request.body.enabled)
+
+    try {
+      validateAuditRegex(data.matchType || existing.matchType, data.pattern || existing.pattern)
+    } catch {
+      return reply.code(400).send({ error: '正则表达式无效' })
+    }
+
+    const updated = await prisma.instanceAuditRule.update({ where: { id: ruleId }, data })
+    await createLog(user.id, 'host', 'host.ops.audit.rule.update', `Updated audit rule "${updated.name}" on host "${auth.host.name}"`, 'success')
+    return toAuditRuleResponse(updated, hostId)
+  })
+
+  fastify.delete<{
+    Params: { id: string; ruleId: string }
+  }>('/:id/ops/audit/rules/:ruleId', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const ruleId = Number(request.params.ruleId)
+    if (isNaN(hostId) || isNaN(ruleId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const existing = await prisma.instanceAuditRule.findUnique({ where: { id: ruleId } })
+    if (!existing || (existing.hostId !== null && existing.hostId !== hostId)) {
+      return reply.code(404).send({ error: '审查规则不存在' })
+    }
+    if (existing.hostId === null && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    await prisma.instanceAuditRule.delete({ where: { id: ruleId } })
+    await createLog(user.id, 'host', 'host.ops.audit.rule.delete', `Deleted audit rule "${existing.name}" on host "${auth.host.name}"`, 'warning')
+    return { success: true }
+  })
+
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { instanceId?: string }
+  }>('/:id/ops/audit/ignores', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = request.query.instanceId ? Number(request.query.instanceId) : null
+    if (isNaN(hostId) || (request.query.instanceId && isNaN(instanceId!))) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const ignores = await prisma.instanceAuditIgnore.findMany({
+      where: {
+        hostId,
+        enabled: true,
+        ...(instanceId ? { OR: [{ instanceId: null }, { instanceId }] } : {})
+      },
+      orderBy: { createdAt: 'desc' },
+      take: 100
+    })
+    return { ignores }
+  })
+
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      scope?: 'host' | 'instance'
+      instanceId?: number
+      ruleId?: string
+      targetType?: AuditFindingTarget
+      matchText?: string
+      reason?: string
+      expiresInDays?: number
+    }
+  }>('/:id/ops/audit/ignores', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    if (isNaN(hostId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const scope = request.body.scope === 'host' ? 'host' : 'instance'
+    const instanceId = scope === 'instance' ? Number(request.body.instanceId) : null
+    if (scope === 'instance') {
+      if (!Number.isInteger(instanceId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      const instance = await db.getInstanceById(instanceId!)
+      if (!instance || instance.host_id !== hostId) return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    const ruleId = request.body.ruleId?.trim() || null
+    const matchText = request.body.matchText?.trim() || null
+    if (!ruleId && !matchText) {
+      return reply.code(400).send({ error: '白名单至少需要规则 ID 或匹配文本' })
+    }
+
+    const expiresInDays = Number(request.body.expiresInDays || 0)
+    const expiresAt = expiresInDays > 0
+      ? new Date(Date.now() + Math.min(expiresInDays, 365) * 24 * 60 * 60 * 1000)
+      : null
+
+    const ignore = await prisma.instanceAuditIgnore.create({
+      data: {
+        hostId,
+        instanceId: scope === 'instance' ? instanceId : null,
+        createdById: user.id,
+        ruleId,
+        targetType: normalizeAuditFindingTarget(request.body.targetType),
+        matchText,
+        scope,
+        reason: request.body.reason?.trim() || null,
+        expiresAt
+      }
+    })
+
+    await createLog(user.id, 'host', 'host.ops.audit.ignore.create', `Created ${scope} audit whitelist on host "${auth.host.name}"`, 'success')
+    return ignore
+  })
+
+  fastify.delete<{
+    Params: { id: string; ignoreId: string }
+  }>('/:id/ops/audit/ignores/:ignoreId', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const ignoreId = Number(request.params.ignoreId)
+    if (isNaN(hostId) || isNaN(ignoreId)) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const ignore = await prisma.instanceAuditIgnore.findUnique({ where: { id: ignoreId } })
+    if (!ignore || ignore.hostId !== hostId) return reply.code(404).send({ error: '白名单不存在' })
+
+    await prisma.instanceAuditIgnore.update({ where: { id: ignoreId }, data: { enabled: false } })
+    await createLog(user.id, 'host', 'host.ops.audit.ignore.delete', `Disabled audit whitelist #${ignoreId} on host "${auth.host.name}"`, 'warning')
+    return { success: true }
+  })
+
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { instanceId?: string; pageSize?: string }
+  }>('/:id/ops/audit/history', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = request.query.instanceId ? Number(request.query.instanceId) : null
+    if (isNaN(hostId) || (request.query.instanceId && isNaN(instanceId!))) return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+
+    const auth = await getAuthorizedOpsHost(hostId, user)
+    if (!auth.host) return reply.code(auth.status).send(auth.error)
+
+    const pageSize = Math.min(Math.max(Number(request.query.pageSize || 20), 1), 50)
+    const scans = await prisma.instanceAuditScan.findMany({
+      where: {
+        hostId,
+        ...(instanceId ? { instanceId } : {})
+      },
+      include: {
+        user: { select: { id: true, username: true } }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: pageSize
+    })
+    const actions = await prisma.instanceAuditAction.findMany({
+      where: {
+        hostId,
+        ...(instanceId ? { instanceId } : {})
+      },
+      include: {
+        user: { select: { id: true, username: true } }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: pageSize
+    })
+    return { scans, actions }
+  })
+
+  fastify.post<{
+    Params: { id: string; instanceId: string }
+  }>('/:id/ops/instances/:instanceId/audit/scan', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    try {
+      const client = await getIncusClient(host as Host)
+      const { getInstance, getInstanceState, execWithOutput } = await import('../lib/incus/incus-instances.js')
+      const [state, incusInstance] = await Promise.all([
+        getInstanceState(client, instance.incus_id),
+        getInstance(client, instance.incus_id)
+      ]) as [{ status?: string }, { type?: string; status?: string }]
+
+      const incusStatus = state.status || incusInstance.status || ''
+      if (incusStatus !== 'Running') {
+        return reply.code(400).send({
+          error: '实例未运行，无法执行审查扫描',
+          status: incusStatus || instance.status
+        })
+      }
+
+      let processOutput = ''
+      let connectionOutput = ''
+      let startupOutput = ''
+      const stderr: string[] = []
+
+      try {
+        const [processResult, connectionResult, startupResult] = await Promise.all([
+          execWithOutput(client, instance.incus_id, buildProcessAuditCommand(), {}, 45000),
+          execWithOutput(client, instance.incus_id, buildConnectionAuditCommand(), {}, 45000),
+          execWithOutput(client, instance.incus_id, buildStartupAuditCommand(), {}, 45000)
+        ])
+        processOutput = processResult.stdout
+        connectionOutput = connectionResult.stdout
+        startupOutput = startupResult.stdout
+        for (const item of [processResult.stderr, connectionResult.stderr, startupResult.stderr]) {
+          if (item.trim()) stderr.push(item.trim().slice(0, 1000))
+        }
+      } catch (execError) {
+        const errorMessage = execError instanceof Error ? execError.message : String(execError)
+        await prisma.instanceAuditScan.create({
+          data: {
+            hostId,
+            instanceId: instance.id,
+            userId: user.id,
+            status: 'failed',
+            capability: 'unavailable',
+            riskLevel: 'info',
+            error: errorMessage.slice(0, 2000)
+          }
+        })
+        await createLog(user.id, 'host', 'host.ops.audit.scan', `Audit scan unavailable for instance "${instance.name}" on host "${host.name}": ${errorMessage}`, 'failed', { instanceId: instance.id })
+        return reply.code(503).send({
+          success: false,
+          capability: 'unavailable',
+          error: `无法在实例内执行审查命令: ${errorMessage}`,
+          instance: {
+            id: instance.id,
+            name: instance.name,
+            incusId: instance.incus_id,
+            type: incusInstance.type || 'unknown',
+            status: incusStatus
+          }
+        })
+      }
+
+      const processes = parseProcesses(processOutput)
+      const connections = parseConnections(connectionOutput)
+      const startupItems = parseStartupItems(startupOutput)
+      const [rules, ignores] = await Promise.all([
+        getAuditRuleDefinitions(hostId),
+        getAuditIgnores(hostId, instance.id)
+      ])
+      const analysis = analyzeAuditData({
+        processes,
+        connections,
+        startupItems,
+        rules,
+        ignores: ignores.map(ignore => ({
+          ...ignore,
+          targetType: normalizeAuditFindingTarget(ignore.targetType)
+        }))
+      })
+      const ignoredCount = analysis.findings.filter(finding => finding.ignored).length
+      const scan = await prisma.instanceAuditScan.create({
+        data: {
+          hostId,
+          instanceId: instance.id,
+          userId: user.id,
+          status: 'success',
+          capability: incusInstance.type === 'virtual-machine' ? 'guest-agent' : 'container-exec',
+          riskLevel: analysis.summary.riskLevel,
+          findingCount: analysis.summary.findingCount,
+          ignoredCount,
+          processCount: analysis.summary.processCount,
+          connectionCount: analysis.summary.connectionCount,
+          listeningCount: analysis.summary.listeningCount,
+          startupItemCount: analysis.summary.startupItemCount,
+          findings: analysis.findings.slice(0, 80) as any
+        }
+      })
+
+      await createLog(
+        user.id,
+        'host',
+        'host.ops.audit.scan',
+        `Ran manual audit scan for instance "${instance.name}" on host "${host.name}" (${analysis.summary.findingCount} finding(s))`,
+        'success',
+        { instanceId: instance.id }
+      )
+
+      return {
+        success: true,
+        scanId: scan.id,
+        scannedAt: new Date().toISOString(),
+        capability: incusInstance.type === 'virtual-machine' ? 'guest-agent' : 'container-exec',
+        instance: {
+          id: instance.id,
+          name: instance.name,
+          incusId: instance.incus_id,
+          type: incusInstance.type || 'unknown',
+          status: incusStatus
+        },
+        summary: analysis.summary,
+        ignoredCount,
+        rules: rules.map(rule => ({
+          id: rule.id,
+          source: rule.source,
+          name: rule.name,
+          category: rule.category,
+          severity: rule.severity,
+          targetTypes: rule.targetTypes,
+          matchType: rule.matchType,
+          pattern: rule.patternText,
+          caseSensitive: rule.caseSensitive,
+          enabled: rule.enabled,
+          recommendation: rule.recommendation || null
+        })),
+        findings: analysis.findings,
+        processes: processes
+          .sort((a, b) => b.findings.length - a.findings.length || (b.cpuPercent ?? 0) - (a.cpuPercent ?? 0))
+          .slice(0, 200),
+        connections: connections.slice(0, 200),
+        startupItems: startupItems
+          .sort((a, b) => b.findings.length - a.findings.length)
+          .slice(0, 120),
+        stderr
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(500).send({ error: `审查扫描失败: ${errorMessage}` })
+    }
+  })
+
+  fastify.post<{
+    Params: { id: string; instanceId: string }
+    Body: {
+      pid: number
+      signal?: 'TERM' | 'KILL'
+      reason: string
+      confirmationText: string
+      scanId?: number
+      expectedCommand?: string
+    }
+  }>('/:id/ops/instances/:instanceId/audit/kill-process', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['pid', 'reason', 'confirmationText'],
+        properties: {
+          pid: { type: 'integer', minimum: 2, maximum: 4194304 },
+          signal: { type: 'string', enum: ['TERM', 'KILL'] },
+          reason: { type: 'string', minLength: 3, maxLength: 500 },
+          confirmationText: { type: 'string' },
+          scanId: { type: 'integer' },
+          expectedCommand: { type: 'string', maxLength: 500 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+    const pid = Number(request.body.pid)
+    const signal = request.body.signal === 'KILL' ? 'KILL' : 'TERM'
+    const reason = (request.body.reason || '').trim()
+    const confirmationText = (request.body.confirmationText || '').trim()
+    const scanId = Number(request.body.scanId || 0) || null
+    const expectedCommand = normalizeProcessText(request.body.expectedCommand || '')
+
+    if (isNaN(hostId) || isNaN(instanceId) || !Number.isInteger(pid)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    if (confirmationText !== instance.incus_id) {
+      return reply.code(400).send({ error: '确认文本不匹配实例名称' })
+    }
+
+    if (reason.length < 3) {
+      return reply.code(400).send({ error: '请填写处置原因' })
+    }
+
+    try {
+      const client = await getIncusClient(host as Host)
+      const { getInstanceState, execWithOutput } = await import('../lib/incus/incus-instances.js')
+      const state = await getInstanceState(client, instance.incus_id) as { status?: string }
+      if (state.status !== 'Running') {
+        return reply.code(400).send({ error: '实例未运行，无法停止进程', status: state.status || instance.status })
+      }
+
+      const processCheck = await execWithOutput(client, instance.incus_id, `ps -p ${pid} -o pid=,comm=,args= 2>/dev/null || true`, {}, 30000)
+      const currentProcessText = normalizeProcessText(processCheck.stdout)
+      if (!currentProcessText) {
+        return reply.code(409).send({ error: '该 PID 当前不存在，请重新扫描后再操作' })
+      }
+      if (expectedCommand && !currentProcessText.toLowerCase().includes(expectedCommand.toLowerCase())) {
+        return reply.code(409).send({
+          error: 'PID 当前进程与扫描时不一致，请重新扫描确认后再操作',
+          currentProcess: currentProcessText
+        })
+      }
+
+      const result = await execWithOutput(client, instance.incus_id, `kill -${signal} -- ${pid}`, {}, 30000)
+      await prisma.instanceAuditAction.create({
+        data: {
+          scanId,
+          hostId,
+          instanceId: instance.id,
+          userId: user.id,
+          actionType: 'kill_process',
+          pid,
+          signal,
+          processCommand: currentProcessText.slice(0, 2000),
+          reason,
+          result: 'success',
+          stdout: result.stdout.slice(0, 2000),
+          stderr: result.stderr.slice(0, 2000)
+        }
+      })
+      await createLog(
+        user.id,
+        'host',
+        'host.ops.audit.kill_process',
+        `Sent SIG${signal} to PID ${pid} in instance "${instance.name}" on host "${host.name}". Reason: ${reason}`,
+        'warning',
+        { instanceId: instance.id }
+      )
+
+      return {
+        success: true,
+        message: `已向 PID ${pid} 发送 SIG${signal}`,
+        pid,
+        signal,
+        stdout: result.stdout,
+        stderr: result.stderr
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await prisma.instanceAuditAction.create({
+        data: {
+          scanId,
+          hostId,
+          instanceId: instance.id,
+          userId: user.id,
+          actionType: 'kill_process',
+          pid,
+          signal,
+          reason,
+          result: 'failed',
+          stderr: errorMessage.slice(0, 2000)
+        }
+      }).catch(() => undefined)
+      await createLog(
+        user.id,
+        'host',
+        'host.ops.audit.kill_process',
+        `Failed to send SIG${signal} to PID ${pid} in instance "${instance.name}" on host "${host.name}": ${errorMessage}`,
+        'failed',
+        { instanceId: instance.id }
+      )
+      return reply.code(500).send({ error: `停止进程失败: ${errorMessage}` })
+    }
+  })
+
+  fastify.post<{
+    Params: { id: string; instanceId: string }
+  }>('/:id/ops/instances/:instanceId/sync', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    try {
+      const client = await getIncusClient(host as Host)
+      const { getInstance, getInstanceState } = await import('../lib/incus/incus-instances.js')
+      const { mapInstanceStatus } = await import('../lib/incus/incus-utils.js')
+
+      const [state, incusInstance] = await Promise.all([
+        getInstanceState(client, instance.incus_id),
+        getInstance(client, instance.incus_id)
+      ]) as [{
+        status?: string
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }, {
+        devices?: Record<string, Record<string, unknown>>
+        expanded_devices?: Record<string, Record<string, unknown>>
+      }]
+
+      if (!state.status) {
+        return reply.code(500).send({ error: '无法获取实例状态' })
+      }
+
+      const incusStatus = mapInstanceStatus(state.status)
+      if (incusStatus === 'unknown') {
+        return reply.code(500).send({ error: `未知状态: ${state.status}` })
+      }
+
+      const currentStatus = instance.status
+      let statusChanged = false
+      let from: string | undefined
+      let to: string | undefined
+
+      if (currentStatus !== incusStatus) {
+        await db.updateInstanceStatus(instanceId, incusStatus as 'creating' | 'running' | 'stopped' | 'error')
+        statusChanged = true
+        from = currentStatus
+        to = incusStatus
+      }
+
+      const persistedNetwork = await persistResolvedInstanceNetworkAddresses(
+        {
+          id: instanceId,
+          name: instance.name,
+          hostId: instance.host_id,
+          networkMode: instance.network_mode,
+          ipv4: instance.ipv4,
+          ipv6: instance.ipv6
+        },
+        resolveInstanceNetworkAddresses(
+          {
+            id: instanceId,
+            name: instance.name,
+            hostId: instance.host_id,
+            networkMode: instance.network_mode,
+            ipv4: instance.ipv4,
+            ipv6: instance.ipv6
+          },
+          incusInstance,
+          state
+        ),
+        { updateLastSyncedAt: true }
+      )
+
+      return {
+        success: true,
+        message: '实例状态/IP 已同步',
+        statusChanged,
+        from,
+        to,
+        currentStatus: incusStatus,
+        ipv4Changed: persistedNetwork.ipv4Changed,
+        oldIpv4: persistedNetwork.ipv4Changed ? persistedNetwork.oldIpv4 : undefined,
+        newIpv4: persistedNetwork.ipv4Changed ? persistedNetwork.newIpv4 : undefined,
+        ipv6Changed: persistedNetwork.ipv6Changed,
+        oldIpv6: persistedNetwork.ipv6Changed ? persistedNetwork.oldIpv6 : undefined,
+        newIpv6: persistedNetwork.ipv6Changed ? persistedNetwork.newIpv6 : undefined
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      if (errorMessage.includes('not found') || errorMessage.includes('Instance not found')) {
+        return reply.code(404).send({ error: '实例在节点上不存在' })
+      }
+      return reply.code(500).send({ error: `同步失败: ${errorMessage}` })
+    }
+  })
+
+  fastify.post<{
+    Params: { id: string; instanceId: string }
+    Body: { force?: boolean }
+  }>('/:id/ops/instances/:instanceId/restart', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          force: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+    const force = !!request.body?.force
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    try {
+      const client = await getIncusClient(host as Host)
+      const { restartInstance } = await import('../lib/incus/incus-instances.js')
+      await restartInstance(client, instance.incus_id, force)
+      return {
+        success: true,
+        message: force ? '实例已强制重启' : '实例已安全重启'
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(500).send({ error: `重启失败: ${errorMessage}` })
+    }
+  })
+
+  fastify.post<{
+    Params: { id: string; instanceId: string }
+    Body: {
+      action: 'rebuild' | 'recreate'
+      imageAlias: string
+      sshKeyId?: number
+      customInitCommandIds?: number[]
+      confirmationText: string
+      riskConfirmed: boolean
+    }
+  }>('/:id/ops/instances/:instanceId/dangerous-action', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['action', 'imageAlias', 'confirmationText', 'riskConfirmed'],
+        properties: {
+          action: { type: 'string', enum: ['rebuild', 'recreate'] },
+          imageAlias: { type: 'string' },
+          sshKeyId: { type: 'integer' },
+          customInitCommandIds: { type: 'array', items: { type: 'integer' }, maxItems: 20 },
+          confirmationText: { type: 'string' },
+          riskConfirmed: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = Number(request.params.id)
+    const instanceId = Number(request.params.instanceId)
+    const { action, imageAlias, sshKeyId, customInitCommandIds, confirmationText, riskConfirmed } = request.body
+
+    if (isNaN(hostId) || isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.host_id !== hostId) {
+      return reply.code(400).send({ error: '实例不属于该节点' })
+    }
+
+    if (!riskConfirmed) {
+      return reply.code(400).send({ error: '请先确认风险提示' })
+    }
+
+    if ((confirmationText || '').trim() !== instance.incus_id) {
+      return reply.code(400).send({ error: '确认文本不匹配实例名称' })
+    }
+
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (action === 'rebuild' && instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STOP_REQUIRED))
+    }
+
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    if (!await isValidSystemImage(imageAlias)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+    }
+
+    if (!await isImageCompatibleWithMemory(imageAlias, instance.memory)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+    }
+
+    const packageRecord = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const instanceType = (packageRecord as { instance_type?: 'container' | 'vm' } | null)?.instance_type || 'container'
+    const imageAvailability = await getSystemImageAvailabilityForHost(imageAlias, instance.host_id, {
+      instanceType,
+      memory: instance.memory
+    })
+    if (!imageAvailability.ok) {
+      switch (imageAvailability.reason) {
+        case 'host_not_found':
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        case 'image_not_found':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+        case 'memory_incompatible':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+        case 'instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_TYPE_MISMATCH))
+        case 'host_instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.HOST_INSTANCE_TYPE_MISMATCH))
+        default:
+          return reply.code(400).send(apiError(ErrorCode.INSTANCE_IMAGE_UNAVAILABLE))
+      }
+    }
+
+    if (sshKeyId) {
+      const keyRecord = await getSSHKeyById(sshKeyId)
+      if (!keyRecord || keyRecord.user_id !== instance.user_id) {
+        return reply.code(400).send(apiError(ErrorCode.SSH_KEY_NOT_OWNED))
+      }
+    }
+
+    if (customInitCommandIds && customInitCommandIds.length > 0) {
+      const cmdValidation = await validateCommandsOwnership(customInitCommandIds, instance.user_id)
+      if (!cmdValidation.valid) {
+        return reply.code(400).send({ error: 'Invalid custom init command IDs', code: 'INVALID_COMMAND_IDS' })
+      }
+    }
+
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: instance.host_id,
+      userId: user.id,
+      taskType: action,
+      imageAlias,
+      sshKeyId,
+      customInitCommandIds
+    })
+
+    await createLog(user.id, 'host', `host.ops.${action}`, `Queued ${action} task for instance "${instance.name}" on host "${host.name}" with image ${imageAlias}`, 'success', { instanceId })
+
+    return reply.code(202).send({
+      success: true,
+      message: action === 'rebuild' ? '实例重装任务已排队' : '实例重建任务已排队',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+}
diff --git a/server/src/routes/images.ts b/server/src/routes/images.ts
new file mode 100644
index 0000000..2b6c1d4
--- /dev/null
+++ b/server/src/routes/images.ts
@@ -0,0 +1,194 @@
+/**
+ * 镜像管理路由
+ * 系统镜像列表从数据库读取，支持管理员 CRUD
+ */
+
+import type { FastifyInstance } from 'fastify'
+import {
+  getVisibleSystemImages,
+  getAllSystemImages,
+  createSystemImage,
+  updateSystemImage,
+  deleteSystemImage,
+  getSystemImageById
+} from '../db/images.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { logSuccess } from '../db/logs.js'
+
+export default async function imageRoutes(fastify: FastifyInstance) {
+  /**
+   * 获取系统镜像列表（用户端 - 只返回未隐藏的）
+   * @query type - 可选，按实例类型过滤 (container/vm)
+   * @query memory - 可选，内存大小(MB)，128MB 时只返回 Alpine/Debian
+   * @query hostId - 可选，按节点架构和镜像白名单过滤
+   */
+  fastify.get<{
+    Querystring: { type?: 'container' | 'vm'; memory?: string; hostId?: string }
+  }>('/system', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { type, memory, hostId } = request.query
+    const memoryNum = memory ? parseInt(memory, 10) : undefined
+    const hostIdNum = hostId ? parseInt(hostId, 10) : undefined
+
+    if (hostId && (!hostIdNum || Number.isNaN(hostIdNum))) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const images = await getVisibleSystemImages(type, memoryNum, hostIdNum)
+    return {
+      success: true,
+      images: images.map(img => ({
+        id: img.id,
+        name: img.name,
+        remoteAlias: img.remoteAlias,
+        osType: img.osType,
+        architecture: img.architecture,
+        instanceType: (img as { instanceType?: string }).instanceType || 'both',
+        icon: img.icon
+      }))
+    }
+  })
+
+  /**
+   * 管理员：获取所有镜像（包含隐藏的）
+   */
+  fastify.get('/admin', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async () => {
+    const images = await getAllSystemImages()
+    return { success: true, images }
+  })
+
+  /**
+   * 管理员：创建镜像
+   */
+  fastify.post<{
+    Body: {
+      name: string
+      remoteAlias: string
+      osType?: string
+      architecture?: 'x86_64' | 'aarch64'
+      instanceType?: 'container' | 'vm' | 'both'
+      icon: string
+      sortOrder?: number
+      hidden?: boolean
+    }
+  }>('/admin', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request, reply) => {
+    const { name, remoteAlias, osType, architecture, instanceType, icon, sortOrder, hidden } = request.body
+
+    if (!name || !remoteAlias || !icon) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_NAME))
+    }
+
+    try {
+      const image = await createSystemImage({
+        name,
+        remoteAlias,
+        osType,
+        architecture,
+        instanceType,
+        icon,
+        sortOrder,
+        hidden
+      })
+
+      await logSuccess(
+        request.user!.id,
+        'images',
+        'create',
+        `Created system image: ${name} (${remoteAlias})`
+      )
+
+      return { success: true, image }
+    } catch (error: any) {
+      if (error.code === 'P2002') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_NAME, 'Remote alias already exists'))
+      }
+      throw error
+    }
+  })
+
+  /**
+   * 管理员：更新镜像
+   */
+  fastify.patch<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      remoteAlias?: string
+      osType?: string
+      architecture?: 'x86_64' | 'aarch64'
+      instanceType?: 'container' | 'vm' | 'both'
+      icon?: string
+      sortOrder?: number
+      hidden?: boolean
+    }
+  }>('/admin/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request, reply) => {
+    const id = parseInt(request.params.id)
+    const { name, remoteAlias, osType, architecture, instanceType, icon, sortOrder, hidden } = request.body
+
+    const existing = await getSystemImageById(id)
+    if (!existing) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    try {
+      const image = await updateSystemImage(id, {
+        name,
+        remoteAlias,
+        osType,
+        architecture,
+        instanceType,
+        icon,
+        sortOrder,
+        hidden
+      })
+
+      await logSuccess(
+        request.user!.id,
+        'images',
+        'update',
+        `Updated system image: ${image.name}`
+      )
+
+      return { success: true, image }
+    } catch (error: any) {
+      if (error.code === 'P2002') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_NAME, 'Remote alias already exists'))
+      }
+      throw error
+    }
+  })
+
+  /**
+   * 管理员：删除镜像
+   */
+  fastify.delete<{
+    Params: { id: string }
+  }>('/admin/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request, reply) => {
+    const id = parseInt(request.params.id)
+
+    const existing = await getSystemImageById(id)
+    if (!existing) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    await deleteSystemImage(id)
+
+    await logSuccess(
+      request.user!.id,
+      'images',
+      'delete',
+      `Deleted system image: ${existing.name}`
+    )
+
+    return { success: true }
+  })
+}
diff --git a/server/src/routes/inbox.ts b/server/src/routes/inbox.ts
new file mode 100644
index 0000000..27373cd
--- /dev/null
+++ b/server/src/routes/inbox.ts
@@ -0,0 +1,555 @@
+/**
+ * 站内信路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as inboxDb from '../db/inbox.js'
+import * as db from '../db/index.js'
+import * as announcementsDb from '../db/announcements.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { isSmtpEnabled, sendHostAnnouncementEmail } from '../lib/mailer.js'
+
+export default async function inboxRoutes(fastify: FastifyInstance) {
+
+  // 所有路由都需要认证
+  fastify.addHook('onRequest', fastify.authenticate)
+
+  /**
+   * 获取站内信列表
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      isRead?: string
+    }
+  }>('/', async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      isRead?: string
+    }
+  }>) => {
+    const { page = '1', pageSize = '20', isRead } = request.query
+    const userId = request.user.id
+
+    // 解析 isRead 参数
+    let isReadFilter: boolean | undefined
+    if (isRead === 'true') {
+      isReadFilter = true
+    } else if (isRead === 'false') {
+      isReadFilter = false
+    }
+
+    const result = await inboxDb.getInboxMessages(userId, {
+      page: parseInt(page, 10) || 1,
+      pageSize: parseInt(pageSize, 10) || 20,
+      isRead: isReadFilter
+    })
+
+    return result
+  })
+
+  /**
+   * 获取未读消息数量
+   */
+  fastify.get('/unread-count', async (request: FastifyRequest) => {
+    const userId = request.user.id
+    const count = await inboxDb.getUnreadCount(userId)
+    return { count }
+  })
+
+  /**
+   * 标记单条消息为已读
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/read', async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const messageId = Number(id)
+    const userId = request.user.id
+
+    if (isNaN(messageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const success = await inboxDb.markAsRead(messageId, userId)
+    if (!success) {
+      return reply.code(404).send(apiError(ErrorCode.MESSAGE_NOT_FOUND))
+    }
+
+    return { success: true }
+  })
+
+  /**
+   * 标记所有消息为已读
+   */
+  fastify.post('/read-all', async (request: FastifyRequest) => {
+    const userId = request.user.id
+    const count = await inboxDb.markAllAsRead(userId)
+    return { success: true, count }
+  })
+
+  /**
+   * 删除单条消息
+   */
+  fastify.delete<{
+    Params: { id: string }
+  }>('/:id', async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const messageId = Number(id)
+    const userId = request.user.id
+
+    if (isNaN(messageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const success = await inboxDb.deleteMessage(messageId, userId)
+    if (!success) {
+      return reply.code(404).send(apiError(ErrorCode.MESSAGE_NOT_FOUND))
+    }
+
+    return { success: true }
+  })
+
+  /**
+   * 删除所有已读消息
+   */
+  fastify.delete('/read', async (request: FastifyRequest) => {
+    const userId = request.user.id
+    const count = await inboxDb.deleteReadMessages(userId)
+    return { success: true, count }
+  })
+
+  /**
+   * 管理员发送全站站内信
+   */
+  fastify.post<{
+    Body: {
+      title: string
+      content: string
+    }
+  }>('/admin/broadcast', async (request: FastifyRequest<{
+    Body: {
+      title: string
+      content: string
+    }
+  }>, reply: FastifyReply) => {
+    // 检查管理员权限
+    if (request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const { title, content } = request.body
+
+    // 参数验证
+    if (!title || typeof title !== 'string' || title.trim().length === 0) {
+      return reply.code(400).send({ error: 'TITLE_REQUIRED', message: 'Title is required' })
+    }
+    if (!content || typeof content !== 'string' || content.trim().length === 0) {
+      return reply.code(400).send({ error: 'CONTENT_REQUIRED', message: 'Content is required' })
+    }
+    if (title.length > 200) {
+      return reply.code(400).send({ error: 'TITLE_TOO_LONG', message: 'Title is too long' })
+    }
+    if (content.length > 5000) {
+      return reply.code(400).send({ error: 'CONTENT_TOO_LONG', message: 'Content is too long' })
+    }
+
+    // 获取所有活跃用户
+    const userIds = await inboxDb.getAllActiveUserIds()
+    
+    if (userIds.length === 0) {
+      return { success: true, count: 0 }
+    }
+
+    // 批量发送
+    const count = await inboxDb.createBulkMessages({
+      userIds,
+      eventType: 'system_announcement',
+      title: title.trim(),
+      content: content.trim(),
+      data: { senderId: request.user.id }
+    })
+
+    // 保存公告记录
+    await announcementsDb.createAnnouncement({
+      type: 'system_broadcast',
+      senderId: request.user.id,
+      title: title.trim(),
+      content: content.trim(),
+      recipientCount: count,
+    })
+
+    return { success: true, count }
+  })
+
+  /**
+   * 节点所有者通知实例用户（站内信，可选附带邮件）
+   */
+  fastify.post<{
+    Params: { hostId: string }
+    Body: {
+      title: string
+      content: string
+      instanceIds?: number[]
+      sendEmail?: boolean
+    }
+  }>('/hosts/:hostId/notify', {
+    schema: {
+      body: {
+        type: 'object',
+        required: ['title', 'content'],
+        properties: {
+          title: { type: 'string', minLength: 1, maxLength: 200 },
+          content: { type: 'string', minLength: 1, maxLength: 5000 },
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          },
+          sendEmail: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { hostId: string }
+    Body: {
+      title: string
+      content: string
+      instanceIds?: number[]
+      sendEmail?: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const hostId = Number(request.params.hostId)
+    const userId = request.user.id
+    const { title, content, instanceIds, sendEmail = false } = request.body
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 检查节点是否存在
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 检查是否是节点所有者或管理员
+    if (host.user_id !== userId && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 参数验证
+    if (!title || typeof title !== 'string' || title.trim().length === 0) {
+      return reply.code(400).send({ error: 'TITLE_REQUIRED', message: 'Title is required' })
+    }
+    if (!content || typeof content !== 'string' || content.trim().length === 0) {
+      return reply.code(400).send({ error: 'CONTENT_REQUIRED', message: 'Content is required' })
+    }
+    if (title.length > 200) {
+      return reply.code(400).send({ error: 'TITLE_TOO_LONG', message: 'Title is too long' })
+    }
+    if (content.length > 5000) {
+      return reply.code(400).send({ error: 'CONTENT_TOO_LONG', message: 'Content is too long' })
+    }
+
+    const trimmedTitle = title.trim()
+    const trimmedContent = content.trim()
+
+    // 获取目标用户（去重）：如果指定了 instanceIds 则只通知这些实例的用户，否则通知全部
+    const recipients = await inboxDb.getUniqueRecipientsByHostId(hostId, instanceIds)
+    const userIds = recipients.map(recipient => recipient.userId)
+    const emailRecipients = sendEmail
+      ? recipients.filter(recipient => typeof recipient.email === 'string' && recipient.email.trim().length > 0)
+      : []
+
+    if (sendEmail && emailRecipients.length > 0) {
+      const smtpEnabled = await isSmtpEnabled()
+      if (!smtpEnabled) {
+        return reply.code(400).send({
+          error: 'SMTP_NOT_CONFIGURED',
+          message: 'SMTP is not configured'
+        })
+      }
+    }
+
+    if (userIds.length === 0) {
+      return {
+        success: true,
+        count: 0,
+        ...(sendEmail ? {
+          email: {
+            requested: true,
+            mode: 'none',
+            sentCount: 0,
+            queuedCount: 0,
+            skippedCount: 0,
+            failedCount: 0
+          }
+        } : {})
+      }
+    }
+
+    // 构建带节点署名的消息内容
+    const messageContent = `${trimmedContent}\n\n来自节点：${host.name}`
+
+    // 批量发送
+    const count = await inboxDb.createBulkMessages({
+      userIds,
+      eventType: 'host_announcement',
+      title: trimmedTitle,
+      content: messageContent,
+      data: { hostId, hostName: host.name, senderId: userId }
+    })
+
+    // 保存公告记录
+    await announcementsDb.createAnnouncement({
+      type: 'host_broadcast',
+      senderId: userId,
+      title: trimmedTitle,
+      content: trimmedContent,
+      recipientCount: count,
+      hostId,
+    })
+
+    if (!sendEmail) {
+      return { success: true, count }
+    }
+
+    const emailSummary = {
+      requested: true,
+      mode: 'none' as 'none' | 'direct' | 'queued',
+      sentCount: 0,
+      queuedCount: 0,
+      skippedCount: recipients.length - emailRecipients.length,
+      failedCount: 0
+    }
+
+    if (recipients.length === 1 && emailRecipients.length === 1) {
+      const recipient = emailRecipients[0]
+      emailSummary.mode = 'direct'
+
+      const directSendResult = await sendHostAnnouncementEmail(recipient.email!.trim(), {
+        username: recipient.username,
+        hostName: host.name,
+        title: trimmedTitle,
+        content: trimmedContent
+      })
+
+      if (directSendResult.success) {
+        emailSummary.sentCount = 1
+      } else {
+        emailSummary.failedCount = 1
+        fastify.log.error(
+          `[Inbox] Failed to send direct host announcement email to user ${recipient.userId}: ${directSendResult.error}`
+        )
+      }
+    } else if (emailRecipients.length > 0) {
+      emailSummary.mode = 'queued'
+
+      try {
+        emailSummary.queuedCount = await db.enqueueHostNotificationEmailTasks(
+          emailRecipients.map(recipient => ({
+            userId: recipient.userId,
+            hostId,
+            email: recipient.email!.trim(),
+            username: recipient.username,
+            hostName: host.name,
+            title: trimmedTitle,
+            content: trimmedContent
+          }))
+        )
+        emailSummary.failedCount = Math.max(0, emailRecipients.length - emailSummary.queuedCount)
+      } catch (error) {
+        emailSummary.failedCount = emailRecipients.length
+        fastify.log.error(`[Inbox] Failed to enqueue host announcement emails for host ${hostId}: ${error}`)
+      }
+    }
+
+    return {
+      success: true,
+      count,
+      email: emailSummary
+    }
+  })
+
+  /**
+   * 管理员发送站内信给特定用户
+   */
+  fastify.post<{
+    Params: { userId: string }
+    Body: {
+      title: string
+      content: string
+    }
+  }>('/admin/send/:userId', async (request: FastifyRequest<{
+    Params: { userId: string }
+    Body: {
+      title: string
+      content: string
+    }
+  }>, reply: FastifyReply) => {
+    // 检查管理员权限
+    if (request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const targetUserId = Number(request.params.userId)
+    if (isNaN(targetUserId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 检查目标用户是否存在
+    const targetUser = await db.findUserById(targetUserId)
+    if (!targetUser) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 不允许给自己发消息
+    if (targetUserId === request.user.id) {
+      return reply.code(400).send({ error: 'CANNOT_MESSAGE_SELF', message: 'Cannot send message to yourself' })
+    }
+
+    const { title, content } = request.body
+
+    // 参数验证
+    if (!title || typeof title !== 'string' || title.trim().length === 0) {
+      return reply.code(400).send({ error: 'TITLE_REQUIRED', message: 'Title is required' })
+    }
+    if (!content || typeof content !== 'string' || content.trim().length === 0) {
+      return reply.code(400).send({ error: 'CONTENT_REQUIRED', message: 'Content is required' })
+    }
+    if (title.length > 200) {
+      return reply.code(400).send({ error: 'TITLE_TOO_LONG', message: 'Title is too long' })
+    }
+    if (content.length > 5000) {
+      return reply.code(400).send({ error: 'CONTENT_TOO_LONG', message: 'Content is too long' })
+    }
+
+    // 创建消息
+    await inboxDb.createInboxMessage({
+      userId: targetUserId,
+      eventType: 'admin_message',
+      title: title.trim(),
+      content: content.trim(),
+      data: { senderId: request.user.id }
+    })
+
+    // 保存通知记录
+    await announcementsDb.createAnnouncement({
+      type: 'admin_message',
+      senderId: request.user.id,
+      title: title.trim(),
+      content: content.trim(),
+      recipientCount: 1,
+      targetUserId,
+    })
+
+    return { success: true }
+  })
+
+  /**
+   * 宿主机所有者发送站内信给特定实例用户
+   */
+  fastify.post<{
+    Params: { instanceId: string }
+    Body: {
+      title: string
+      content: string
+    }
+  }>('/instances/:instanceId/notify', async (request: FastifyRequest<{
+    Params: { instanceId: string }
+    Body: {
+      title: string
+      content: string
+    }
+  }>, reply: FastifyReply) => {
+    const instanceId = Number(request.params.instanceId)
+    const userId = request.user.id
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取实例信息
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 检查实例是否已删除
+    if (instance.status === 'deleted') {
+      return reply.code(400).send({ error: 'INSTANCE_DELETED', message: 'Instance has been deleted' })
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 检查是否是宿主机所有者或管理员
+    if (host.user_id !== userId && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 不允许给自己发消息
+    if (instance.user_id === userId) {
+      return reply.code(400).send({ error: 'CANNOT_MESSAGE_SELF', message: 'Cannot send message to yourself' })
+    }
+
+    const { title, content } = request.body
+
+    // 参数验证
+    if (!title || typeof title !== 'string' || title.trim().length === 0) {
+      return reply.code(400).send({ error: 'TITLE_REQUIRED', message: 'Title is required' })
+    }
+    if (!content || typeof content !== 'string' || content.trim().length === 0) {
+      return reply.code(400).send({ error: 'CONTENT_REQUIRED', message: 'Content is required' })
+    }
+    if (title.length > 200) {
+      return reply.code(400).send({ error: 'TITLE_TOO_LONG', message: 'Title is too long' })
+    }
+    if (content.length > 5000) {
+      return reply.code(400).send({ error: 'CONTENT_TOO_LONG', message: 'Content is too long' })
+    }
+
+    // 构建带节点署名的消息内容
+    const messageContent = `${content.trim()}\n\n来自节点：${host.name}`
+
+    // 创建消息给实例用户
+    await inboxDb.createInboxMessage({
+      userId: instance.user_id,
+      eventType: 'host_message',
+      title: title.trim(),
+      content: messageContent,
+      data: {
+        hostId: host.id,
+        hostName: host.name,
+        instanceId: instance.id,
+        instanceName: instance.name,
+        senderId: userId
+      }
+    })
+
+    // 保存通知记录
+    await announcementsDb.createAnnouncement({
+      type: 'host_message',
+      senderId: userId,
+      title: title.trim(),
+      content: content.trim(),
+      recipientCount: 1,
+      hostId: host.id,
+      targetUserId: instance.user_id,
+      instanceId: instance.id,
+    })
+
+    return { success: true }
+  })
+}
diff --git a/server/src/routes/instance-billing.ts b/server/src/routes/instance-billing.ts
new file mode 100644
index 0000000..eead402
--- /dev/null
+++ b/server/src/routes/instance-billing.ts
@@ -0,0 +1,1150 @@
+/**
+ * 实例计费相关路由
+ * 处理续费、升降级、自动续费等计费操作
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { sendHostManagedInstanceNotification, sendNotification } from '../lib/notifier.js'
+import { getIncusClient, patchInstanceResources } from '../lib/incus/index.js'
+import { sendRenewSuccessEmail } from '../lib/mailer.js'
+import { calculateDailyPrice } from '../lib/billing-calc.js'
+
+interface BatchRenewPreviewItem {
+  id: number
+  name: string
+  canRenew: boolean
+  autoRenew: boolean
+  reason?: string
+  isHostedInstance: boolean
+  daysUntilExpire: number | null
+  options: Array<{
+    months: number
+    price: number
+    discountedPrice: number
+    expiresAt: string
+  }>
+}
+
+interface BatchRenewResultItem {
+  id: number
+  name: string
+  success: boolean
+  skipped?: boolean
+  reason?: string
+  amount?: number
+  newExpiresAt?: string
+}
+
+const BATCH_HIDDEN_REASON = '实例不存在或无权操作'
+
+async function buildBatchRenewPreviewItem(userId: number, instanceId: number): Promise<BatchRenewPreviewItem> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      id: true,
+      name: true,
+      userId: true,
+      packagePlanId: true
+    }
+  })
+
+  if (!instance) {
+    return {
+      id: instanceId,
+      name: `#${instanceId}`,
+      canRenew: false,
+      autoRenew: false,
+      reason: BATCH_HIDDEN_REASON,
+      isHostedInstance: false,
+      daysUntilExpire: null,
+      options: []
+    }
+  }
+
+  if (instance.userId !== userId) {
+    return {
+      id: instanceId,
+      name: `#${instanceId}`,
+      canRenew: false,
+      autoRenew: false,
+      reason: BATCH_HIDDEN_REASON,
+      isHostedInstance: false,
+      daysUntilExpire: null,
+      options: []
+    }
+  }
+
+  if (!instance.packagePlanId) {
+    return {
+      id: instance.id,
+      name: instance.name,
+      canRenew: false,
+      autoRenew: false,
+      reason: '免费实例无需续费',
+      isHostedInstance: false,
+      daysUntilExpire: null,
+      options: []
+    }
+  }
+
+  const billingInfo = await db.getInstanceBillingInfo(instance.id)
+  if (!billingInfo) {
+    return {
+      id: instance.id,
+      name: instance.name,
+      canRenew: false,
+      autoRenew: false,
+      reason: '无法获取实例计费信息',
+      isHostedInstance: false,
+      daysUntilExpire: null,
+      options: []
+    }
+  }
+
+  const restriction = billingInfo.hostingRenewRestriction
+  const daysUntilExpire = billingInfo.daysUntilExpire
+  if (billingInfo.isHostedInstance && restriction && daysUntilExpire !== null && daysUntilExpire > restriction.daysBeforeExpire) {
+    return {
+      id: instance.id,
+      name: instance.name,
+      canRenew: false,
+      autoRenew: billingInfo.autoRenew,
+      reason: `仅可在到期前 ${restriction.daysBeforeExpire} 天内续费`,
+      isHostedInstance: billingInfo.isHostedInstance,
+      daysUntilExpire,
+      options: []
+    }
+  }
+
+  const options = (billingInfo.renewPreview || []).map(option => ({
+    months: option.months,
+    price: option.amount,
+    discountedPrice: option.discountedAmount,
+    expiresAt: option.expiresAt.toISOString()
+  }))
+
+  return {
+    id: instance.id,
+    name: instance.name,
+    canRenew: options.length > 0,
+    autoRenew: billingInfo.autoRenew,
+    reason: options.length > 0 ? undefined : '暂无可用续费选项',
+    isHostedInstance: billingInfo.isHostedInstance,
+    daysUntilExpire,
+    options
+  }
+}
+
+async function executeRenewForUser(
+  user: { id: number; username: string },
+  instanceId: number,
+  months: number
+): Promise<BatchRenewResultItem> {
+  const preview = await buildBatchRenewPreviewItem(user.id, instanceId)
+  if (!preview.canRenew) {
+    return {
+      id: preview.id,
+      name: preview.name,
+      success: false,
+      skipped: true,
+      reason: preview.reason
+    }
+  }
+
+  const option = preview.options.find(item => item.months === months)
+  if (!option) {
+    return {
+      id: preview.id,
+      name: preview.name,
+      success: false,
+      skipped: true,
+      reason: '该实例不支持当前续费时长'
+    }
+  }
+
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId }
+  })
+
+  if (!instance || instance.userId !== user.id) {
+    return {
+      id: instanceId,
+      name: `#${instanceId}`,
+      success: false,
+      skipped: true,
+      reason: BATCH_HIDDEN_REASON
+    }
+  }
+
+  try {
+    const result = await db.performRenewal(user.id, instance, months)
+
+    await sendNotification(user.id, 'instance_renewed', {
+      instanceName: instance.name,
+      renewAmount: result.amount,
+      renewMonths: months,
+      newExpiresAt: result.newExpiresAt.toISOString()
+    })
+
+    if (result.hostingIncomeResult) {
+      sendHostManagedInstanceNotification(
+        instance.hostId,
+        'renew',
+        {
+          username: user.username,
+          instanceName: instance.name,
+          amount: result.amount
+        }
+      ).catch(err => {
+        console.warn('[批量续费] 发送托管收入通知失败:', err)
+      })
+    }
+
+    try {
+      const userInfo = await db.findUserById(user.id)
+      if (userInfo?.email) {
+        await sendRenewSuccessEmail(userInfo.email, {
+          username: userInfo.username,
+          instanceName: instance.name,
+          amount: result.amount,
+          months,
+          newExpiresAt: result.newExpiresAt
+        })
+      }
+    } catch (emailErr) {
+      console.warn('[批量续费] 发送续费成功邮件失败:', emailErr)
+    }
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.renew',
+      `Renewed instance "${instance.name}" for ${months} month(s), amount: ${result.amount}`,
+      'success',
+      { instanceId: instance.id }
+    )
+
+    return {
+      id: instance.id,
+      name: instance.name,
+      success: true,
+      amount: result.amount,
+      newExpiresAt: result.newExpiresAt.toISOString()
+    }
+  } catch (error) {
+    return {
+      id: preview.id,
+      name: preview.name,
+      success: false,
+      reason: '续费失败'
+    }
+  }
+}
+
+export default async function instanceBillingRoutes(fastify: FastifyInstance) {
+  // ==================== 获取实例计费信息 ====================
+  // GET /api/instances/:id/billing
+  fastify.get<{ Params: { id: string } }>('/:id/billing', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：实例所有者或节点所有者
+    const isOwner = instance.user_id === user.id
+    const host = await db.getHostById(instance.host_id)
+    const isHostOwner = host && host.user_id === user.id
+
+    if (!isOwner && !isHostOwner) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const billingInfo = await db.getInstanceBillingInfo(instanceId)
+    if (!billingInfo) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 转换为前端期望的格式
+    return {
+      billing: {
+        instanceId,
+        instanceName: instance.name,
+        planId: billingInfo.packagePlan?.id || null,
+        planName: billingInfo.packagePlan?.name || null,
+        price: billingInfo.billingPrice,  // 元（数据库存储的是元）
+        billingCycle: billingInfo.billingCycle,
+        expiresAt: billingInfo.expiresAt?.toISOString() || null,
+        autoRenew: billingInfo.autoRenew,
+        // 将 amount 转换为 price（前端期望的字段名），包含折扣价
+        renewPreview: billingInfo.renewPreview?.map(p => ({
+          months: p.months,
+          price: p.amount,  // 原价（元）
+          discountedPrice: p.discountedAmount,  // 折扣价（元）
+          expiresAt: p.expiresAt.toISOString()
+        })) || null,
+        // AFF 折扣信息
+        affDiscount: billingInfo.affDiscount ? {
+          discountRate: billingInfo.affDiscount.discountRate,
+          discountPercent: Math.round(billingInfo.affDiscount.discountRate * 100)  // 百分比，如 5 表示 5%
+        } : null,
+        // 托管实例相关信息
+        isHostedInstance: billingInfo.isHostedInstance,
+        daysUntilExpire: billingInfo.daysUntilExpire,
+        hostingRenewRestriction: billingInfo.hostingRenewRestriction
+      }
+    }
+  })
+
+  // ==================== 绑定 AFF 优惠码（仅影响后续续费） ====================
+  // POST /api/instances/:id/apply-aff
+  fastify.post<{
+    Params: { id: string }
+    Body: { affCode: string }
+  }>('/:id/apply-aff', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['affCode'],
+        properties: {
+          affCode: { type: 'string', minLength: 3, maxLength: 64 }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+    const affCodeInput = request.body.affCode?.trim()
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    if (!affCodeInput || affCodeInput.length < 3) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '请输入有效的AFF优惠码'))
+    }
+
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId },
+      include: {
+        affBinding: true,
+        host: {
+          select: {
+            name: true,
+            user: {
+              select: { role: true }
+            }
+          }
+        }
+      }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以自行绑定优惠码
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status === 'deleted') {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '实例已删除'))
+    }
+
+    if (!instance.packagePlanId) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '免费实例不支持使用优惠码'))
+    }
+
+    // 用户托管节点不允许使用优惠码；角色判断为准，名称规则兼容历史 PEER 节点
+    const isHostedInstance = instance.host?.user.role === 'user'
+      || instance.host?.name.toLowerCase().startsWith('peer')
+    if (isHostedInstance) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '用户托管节点不支持使用优惠码'))
+    }
+
+    if (instance.affBinding) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '该实例已绑定优惠码，无法重复绑定'))
+    }
+
+    const validation = await db.validateAffCode(affCodeInput, instance.packagePlanId, user.id)
+    if (!validation.valid || !validation.affCode) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, validation.error || '优惠码无效'))
+    }
+
+    try {
+      await db.createAffBinding(instance.id, validation.affCode.id)
+    } catch (error: any) {
+      if (error?.code === 'P2002') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '该实例已绑定优惠码，无法重复绑定'))
+      }
+      if (error?.code === 'P2003') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '优惠码无效'))
+      }
+      request.log.error(error, '用户绑定AFF优惠码失败')
+      return reply.code(500).send({ error: '绑定优惠码失败' })
+    }
+
+    const discountRate = Number(validation.discountRate ?? validation.affCode.discountRate)
+    const discountPercent = Math.round(discountRate * 100)
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.apply_aff',
+      `Applied AFF code "${validation.affCode.code}" to instance "${instance.name}" for future renewals`,
+      'success',
+      { instanceId: instance.id }
+    )
+
+    return {
+      success: true,
+      message: `优惠码绑定成功，后续续费将享受 ${discountPercent}% 折扣`,
+      discountRate,
+      discountPercent
+    }
+  })
+
+  // ==================== 手动续费 ====================
+  // POST /api/instances/:id/renew
+  fastify.post<{
+    Params: { id: string }
+    Body: { months: number }
+  }>('/:id/renew', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['months'],
+        properties: {
+          months: { type: 'integer', minimum: 1, maximum: 24 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+    const { months } = request.body
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以续费
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 免费实例无需续费
+    if (!instance.packagePlanId) {
+      return reply.code(400).send({ error: '免费实例无需续费', code: 'FREE_INSTANCE' })
+    }
+
+    // 检查是否为用户托管节点的续费限制
+    const host = await prisma.host.findUnique({
+      where: { id: instance.hostId },
+      select: {
+        user: {
+          select: {
+            role: true
+          }
+        }
+      }
+    })
+    const isHostedInstance = host?.user.role === 'user'
+    if (isHostedInstance) {
+      // 用户托管节点的实例只能续费1个月
+      if (months !== 1) {
+        return reply.code(400).send({
+          error: '用户托管节点的实例仅支持按月续费',
+          code: 'HOSTING_MONTHLY_ONLY'
+        })
+      }
+      
+      // 只能在到期前7天内续费
+      if (instance.expiresAt) {
+        const now = new Date()
+        const daysUntilExpire = Math.ceil((instance.expiresAt.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+        if (daysUntilExpire > 7) {
+          return reply.code(400).send({
+            error: `用户托管节点的实例仅可在到期前7天内续费（当前剩余 ${daysUntilExpire} 天）`,
+            code: 'HOSTING_RENEW_TOO_EARLY'
+          })
+        }
+      }
+    }
+
+    try {
+      const result = await db.performRenewal(user.id, instance, months)
+
+      // 发送续费成功通知
+      await sendNotification(user.id, 'instance_renewed', {
+        instanceName: instance.name,
+        renewAmount: result.amount, // 元（performRenewal 返回的是元）
+        renewMonths: months,
+        newExpiresAt: result.newExpiresAt.toISOString()
+      })
+      
+      // 发送托管收入通知给节点所有者（仅发送到外部渠道，不创建站内信）
+      if (result.hostingIncomeResult) {
+        sendHostManagedInstanceNotification(
+          instance.hostId,
+          'renew',
+          {
+            username: user.username,
+            instanceName: instance.name,
+            amount: result.amount
+          }
+        ).catch(err => {
+          console.warn(`[续费] 发送托管收入通知失败:`, err)
+        })
+      }
+
+      // 发送续费成功邮件通知
+      try {
+        const userInfo = await db.findUserById(user.id)
+        if (userInfo && userInfo.email) {
+          await sendRenewSuccessEmail(userInfo.email, {
+            username: userInfo.username,
+            instanceName: instance.name,
+            amount: result.amount,
+            months,
+            newExpiresAt: result.newExpiresAt
+          })
+        }
+      } catch (emailErr) {
+        // 邮件失败不影响主流程
+        console.warn(`[续费] 发送续费成功邮件失败:`, emailErr)
+      }
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.renew',
+        `Renewed instance "${instance.name}" for ${months} month(s), amount: ${result.amount}`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: '续费成功',
+        amount: result.amount,
+        months,
+        newExpiresAt: result.newExpiresAt.toISOString()
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '续费失败'
+      return reply.code(400).send({ error: errorMessage })
+    }
+  })
+
+  fastify.post<{
+    Body: { instanceIds: number[] }
+  }>('/batch/renew-preview', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const uniqueIds = Array.from(new Set(request.body.instanceIds)).filter(id => Number.isInteger(id))
+    if (uniqueIds.length === 0) {
+      return reply.code(400).send({ error: '请选择至少一个实例' })
+    }
+
+    const items = await Promise.all(uniqueIds.map(id => buildBatchRenewPreviewItem(request.user.id, id)))
+    return { items }
+  })
+
+  fastify.post<{
+    Body: { instanceIds: number[]; months: number }
+  }>('/batch/renew', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds', 'months'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          },
+          months: { type: 'integer', minimum: 1, maximum: 24 }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const uniqueIds = Array.from(new Set(request.body.instanceIds)).filter(id => Number.isInteger(id))
+    if (uniqueIds.length === 0) {
+      return reply.code(400).send({ error: '请选择至少一个实例' })
+    }
+
+    const userMeta = {
+      id: request.user.id,
+      username: request.user.username
+    }
+
+    const results: BatchRenewResultItem[] = []
+    for (const instanceId of uniqueIds) {
+      const item = await executeRenewForUser(userMeta, instanceId, request.body.months)
+      results.push(item)
+    }
+
+    const successCount = results.filter(item => item.success).length
+    const skippedCount = results.filter(item => item.skipped).length
+    const failedCount = results.length - successCount - skippedCount
+
+    await createLog(
+      request.user.id,
+      'instance',
+      'instance.batch_renew',
+      `Batch renew processed ${results.length} instance(s): success=${successCount}, skipped=${skippedCount}, failed=${failedCount}`,
+      failedCount > 0 ? 'warning' : 'success'
+    )
+
+    return {
+      message: successCount > 0 ? '批量续费已处理' : '没有实例完成续费',
+      successCount,
+      skippedCount,
+      failedCount,
+      results
+    }
+  })
+
+  // ==================== 升降级预览 ====================
+  // GET /api/instances/:id/change-plan/preview
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { newPlanId: string }
+  }>('/:id/change-plan/preview', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request, reply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+    const newPlanId = Number(request.query.newPlanId)
+
+    if (isNaN(instanceId) || isNaN(newPlanId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以预览升降级
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 免费实例不支持升降级
+    if (!instance.packagePlanId) {
+      return reply.code(400).send({ error: '免费实例不支持升降级', code: 'FREE_INSTANCE' })
+    }
+
+    // 获取新方案
+    const newPlan = await db.getPlanById(newPlanId)
+    if (!newPlan) {
+      return reply.code(404).send({ error: '方案不存在', code: 'PLAN_NOT_FOUND' })
+    }
+
+    // 验证方案属于同一套餐
+    if (newPlan.packageId !== instance.packageId) {
+      return reply.code(400).send({ error: '新方案必须属于同一套餐', code: 'PLAN_NOT_IN_PACKAGE' })
+    }
+
+    // 不能切换到相同方案
+    if (instance.packagePlanId === newPlanId) {
+      return reply.code(400).send({ error: '不能切换到相同方案', code: 'SAME_PLAN' })
+    }
+
+    // 新方案必须是上架状态
+    if (!newPlan.isActive) {
+      return reply.code(400).send({ error: '该方案已下架', code: 'PLAN_INACTIVE' })
+    }
+    if (newPlan.isSoldOut) {
+      return reply.code(400).send({ error: '该方案已售罄', code: 'PLAN_SOLD_OUT' })
+    }
+
+    // 检查实例状态（running/stopped 才能升降级）
+    const statusCanChange = ['running', 'stopped'].includes(instance.status)
+
+    try {
+      const preview = await db.calculatePlanChange(instance, newPlan)
+
+      // 只允许升级，不允许降级
+      if (!preview.isUpgrade) {
+        return reply.code(400).send({ error: '不支持降级，只能升级到更高配置的方案', code: 'DOWNGRADE_NOT_ALLOWED' })
+      }
+
+      return {
+        preview: {
+          oldPlan: {
+            id: preview.oldPlan.id,
+            name: preview.oldPlan.name,
+            price: Number(instance.billingPrice) || Number(preview.oldPlan.price),
+            billingCycle: instance.billingCycle || preview.oldPlan.billingCycle
+          },
+          newPlan: {
+            id: preview.newPlan.id,
+            name: preview.newPlan.name,
+            price: Number(preview.newPlan.price),
+            billingCycle: preview.newPlan.billingCycle,
+            isActive: preview.newPlan.isActive,
+            isSoldOut: preview.newPlan.isSoldOut
+          },
+          remainingDays: preview.remainingDays,
+          // 计算详情（供前端展示）
+          oldDailyPrice: preview.oldDailyPrice,
+          newDailyPrice: preview.newDailyPrice,
+          remainingValue: preview.remainingValue,
+          newPlanCost: preview.newPlanCost,
+          // 折扣信息
+          discountRate: preview.discountRate,
+          discountAmount: preview.discountAmount,
+          // 最终结果
+          priceDiff: preview.priceDiff,
+          isUpgrade: preview.isUpgrade,
+          newExpiresAt: preview.newExpiresAt.toISOString(),
+          newConfig: preview.newConfig,
+          // 升级不需要资源警告
+          resourceWarnings: null,
+          // 可变更状态（综合考虑实例状态和 db 层返回的剩余天数检查）
+          canChange: statusCanChange && preview.canChange,
+          cannotChangeReason: !statusCanChange 
+            ? 'instance_status_invalid'  // 实例状态不允许变更
+            : preview.cannotChangeReason
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '计算升级差价失败'
+      return reply.code(400).send({ error: errorMessage })
+    }
+  })
+
+  // ==================== 执行升降级 ====================
+  // POST /api/instances/:id/change-plan
+  fastify.post<{
+    Params: { id: string }
+    Body: { newPlanId: number }
+  }>('/:id/change-plan', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['newPlanId'],
+        properties: {
+          newPlanId: { type: 'integer' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+    const { newPlanId } = request.body
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId },
+      include: {
+        package: { select: { instanceType: true } }
+      }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以升降级
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 免费实例不支持升降级
+    if (!instance.packagePlanId) {
+      return reply.code(400).send({ error: '免费实例不支持升降级', code: 'FREE_INSTANCE' })
+    }
+
+    // 获取新方案
+    const newPlan = await db.getPlanById(newPlanId)
+    if (!newPlan) {
+      return reply.code(404).send({ error: '方案不存在', code: 'PLAN_NOT_FOUND' })
+    }
+
+    // 验证方案属于同一套餐
+    if (newPlan.packageId !== instance.packageId) {
+      return reply.code(400).send({ error: '新方案必须属于同一套餐', code: 'PLAN_NOT_IN_PACKAGE' })
+    }
+
+    // 不能切换到相同方案
+    if (instance.packagePlanId === newPlanId) {
+      return reply.code(400).send({ error: '不能切换到相同方案', code: 'SAME_PLAN' })
+    }
+
+    // 新方案必须是上架状态
+    if (!newPlan.isActive) {
+      return reply.code(400).send({ error: '该方案已下架', code: 'PLAN_INACTIVE' })
+    }
+    if (newPlan.isSoldOut) {
+      return reply.code(400).send({ error: '该方案已售罄', code: 'PLAN_SOLD_OUT' })
+    }
+
+    // 检查实例状态（仅 running/stopped 可以升级）
+    if (!['running', 'stopped'].includes(instance.status)) {
+      return reply.code(400).send({ error: '当前实例状态不允许升级，仅运行中或已停止的实例可以操作', code: 'INSTANCE_STATUS_INVALID' })
+    }
+
+    // 检查是否为升级（不允许降级）
+    const oldPlan = instance.packagePlanId ? await db.getPlanById(instance.packagePlanId) : null
+    if (oldPlan) {
+      // 使用公共方法计算日价
+      const oldDailyPrice = calculateDailyPrice(Number(instance.billingPrice), instance.billingCycle || 1)
+      const newDailyPrice = calculateDailyPrice(Number(newPlan.price) / 100, newPlan.billingCycle)
+      if (newDailyPrice <= oldDailyPrice) {
+        return reply.code(400).send({ error: '不支持降级，只能升级到更高配置的方案', code: 'DOWNGRADE_NOT_ALLOWED' })
+      }
+    }
+
+    try {
+      const result = await db.performPlanChange(user.id, instance, newPlan)
+      try {
+        const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+        await reconcileTrafficStateForInstanceIds([instance.id])
+      } catch (err) {
+        request.log.warn(err, '实例方案已更新，流量状态即时复核失败')
+      }
+
+      // 计算资源变化量并更新宿主机资源统计
+      const cpuDelta = newPlan.cpu - instance.cpu
+      const memoryDelta = newPlan.memory - instance.memory
+      const diskDelta = newPlan.disk - instance.disk
+      
+      if (cpuDelta !== 0 || memoryDelta !== 0 || diskDelta !== 0) {
+        const host = await db.getHostById(instance.hostId)
+        if (host) {
+          await db.updateHostResources(instance.hostId, {
+            cpuUsed: host.cpu_used + cpuDelta,
+            memoryUsed: host.memory_used + memoryDelta,
+            diskUsed: host.disk_used + diskDelta
+          })
+          console.log(`[ChangePlan] 实例 ${instance.name} 资源变化: CPU ${cpuDelta > 0 ? '+' : ''}${cpuDelta}%, Memory ${memoryDelta > 0 ? '+' : ''}${memoryDelta}MB, Disk ${diskDelta > 0 ? '+' : ''}${diskDelta}MB`)
+        }
+      }
+
+      // 同步配置到 Incus
+      let incusSyncSuccess = false
+      let incusSyncError: string | null = null
+      try {
+        const host = await db.getHostById(instance.hostId)
+        if (host) {
+          const client = await getIncusClient(host)
+          // 同步 CPU/内存/磁盘配置到 Incus
+          await patchInstanceResources(client, instance.incusId, {
+            cpu: newPlan.cpu,
+            memory: newPlan.memory,
+            disk: newPlan.disk
+          })
+          incusSyncSuccess = true
+          console.log(`[ChangePlan] 实例 ${instance.name} Incus 配置同步成功: CPU=${newPlan.cpu}%, Memory=${newPlan.memory}MB, Disk=${newPlan.disk}MB`)
+        }
+      } catch (incusErr) {
+        incusSyncError = incusErr instanceof Error ? incusErr.message : String(incusErr)
+        console.error(`[ChangePlan] 实例 ${instance.name} Incus 配置同步失败:`, incusSyncError)
+      }
+
+      // 发送升降级通知
+      await sendNotification(user.id, 'instance_plan_changed', {
+        instanceName: instance.name,
+        oldPlanName: oldPlan?.name || '未知',
+        newPlanName: newPlan.name,
+        priceDiff: result.priceDiff // 元（与其他通知保持一致）
+      })
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.change_plan',
+        `Changed plan for instance "${instance.name}": ${oldPlan?.name || 'unknown'} → ${newPlan.name}, priceDiff: ${result.priceDiff}`,
+        'success',
+        { instanceId }
+      )
+
+      // 判断实例类型：KVM 需要重启，LXC 即时生效
+      const instanceType = (instance.package as { instanceType?: string } | null)?.instanceType || 'container'
+      const isVm = instanceType === 'vm'
+
+      return {
+        message: '方案升级成功',
+        priceDiff: result.priceDiff,
+        refundAmount: result.refundAmount,
+        newConfig: result.newConfig,
+        // KVM 实例需要重启才能应用新配置，LXC 实例即时生效
+        needRestart: isVm || !incusSyncSuccess,
+        restartMessage: !incusSyncSuccess
+          ? (incusSyncError 
+            ? `Incus配置同步失败: ${incusSyncError}，请重启实例以应用新配置` 
+            : '配置已更新，请重启实例以应用新配置')
+          : (isVm ? 'KVM_RESTART_REQUIRED' : null)  // 特殊标记，前端根据此显示本地化文本
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : '升降级失败'
+      return reply.code(400).send({ error: errorMessage })
+    }
+  })
+
+  // ==================== 自动续费开关 ====================
+  // PATCH /api/instances/:id/auto-renew
+  fastify.patch<{
+    Params: { id: string }
+    Body: { autoRenew: boolean }
+  }>('/:id/auto-renew', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['autoRenew'],
+        properties: {
+          autoRenew: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+    const { autoRenew } = request.body
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以修改自动续费设置
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 免费实例不支持自动续费
+    if (!instance.packagePlanId) {
+      return reply.code(400).send({ error: '免费实例不支持自动续费', code: 'FREE_INSTANCE' })
+    }
+
+    await db.updateAutoRenew(instanceId, autoRenew)
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.auto_renew',
+      `${autoRenew ? 'Enabled' : 'Disabled'} auto-renew for instance "${instance.name}"`,
+      'success',
+      { instanceId }
+    )
+
+    return {
+      message: autoRenew ? '已开启自动续费' : '已关闭自动续费',
+      autoRenew
+    }
+  })
+
+  fastify.patch<{
+    Body: { instanceIds: number[]; autoRenew: boolean }
+  }>('/batch/auto-renew', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds', 'autoRenew'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          },
+          autoRenew: { type: 'boolean' }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const uniqueIds = Array.from(new Set(request.body.instanceIds)).filter(id => Number.isInteger(id))
+    if (uniqueIds.length === 0) {
+      return reply.code(400).send({ error: '请选择至少一个实例' })
+    }
+
+    const results: Array<{ id: number; name: string; success: boolean; skipped?: boolean; reason?: string; autoRenew?: boolean }> = []
+
+    for (const instanceId of uniqueIds) {
+      const instance = await prisma.instance.findUnique({
+        where: { id: instanceId },
+        select: {
+          id: true,
+          name: true,
+          userId: true,
+          packagePlanId: true,
+          autoRenew: true
+        }
+      })
+
+      if (!instance) {
+        results.push({ id: instanceId, name: `#${instanceId}`, success: false, reason: BATCH_HIDDEN_REASON })
+        continue
+      }
+
+      if (instance.userId !== request.user.id) {
+        results.push({ id: instanceId, name: `#${instanceId}`, success: false, reason: BATCH_HIDDEN_REASON })
+        continue
+      }
+
+      if (!instance.packagePlanId) {
+        results.push({ id: instance.id, name: instance.name, success: false, skipped: true, reason: '免费实例不支持自动续费' })
+        continue
+      }
+
+      if (instance.autoRenew === request.body.autoRenew) {
+        results.push({ id: instance.id, name: instance.name, success: false, skipped: true, reason: request.body.autoRenew ? '已经开启自动续费' : '已经关闭自动续费' })
+        continue
+      }
+
+      try {
+        await db.updateAutoRenew(instance.id, request.body.autoRenew)
+        await createLog(
+          request.user.id,
+          'instance',
+          'instance.auto_renew',
+          `${request.body.autoRenew ? 'Enabled' : 'Disabled'} auto-renew for instance "${instance.name}"`,
+          'success',
+          { instanceId: instance.id }
+        )
+        results.push({ id: instance.id, name: instance.name, success: true, autoRenew: request.body.autoRenew })
+      } catch (error) {
+        results.push({
+          id: instance.id,
+          name: instance.name,
+          success: false,
+          reason: '自动续费设置失败'
+        })
+      }
+    }
+
+    const successCount = results.filter(item => item.success).length
+    const skippedCount = results.filter(item => item.skipped).length
+    const failedCount = results.length - successCount - skippedCount
+
+    return {
+      message: request.body.autoRenew ? '批量开启自动续费已处理' : '批量关闭自动续费已处理',
+      successCount,
+      skippedCount,
+      failedCount,
+      results
+    }
+  })
+
+  // ==================== 获取实例计费记录 ====================
+  // GET /api/instances/:id/billing/records
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { page?: string; pageSize?: string; type?: string }
+  }>('/:id/billing/records', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+    const { page = '1', pageSize = '20', type } = request.query
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：实例所有者或节点所有者
+    const isOwner = instance.user_id === user.id
+    const host = await db.getHostById(instance.host_id)
+    const isHostOwner = host && host.user_id === user.id
+
+    if (!isOwner && !isHostOwner) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const result = await db.getInstanceBillingRecords(instanceId, {
+      page: Number(page),
+      pageSize: Number(pageSize),
+      type: type as any
+    })
+
+    return {
+      records: result.records.map(record => ({
+        id: record.id,
+        type: record.type,
+        amount: Number(record.amount),
+        months: record.months,
+        periodStart: record.periodStart.toISOString(),
+        periodEnd: record.periodEnd.toISOString(),
+        remark: record.remark,
+        createdAt: record.createdAt.toISOString()
+      })),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize
+    }
+  })
+}
diff --git a/server/src/routes/instance-destroy.ts b/server/src/routes/instance-destroy.ts
new file mode 100644
index 0000000..39fee85
--- /dev/null
+++ b/server/src/routes/instance-destroy.ts
@@ -0,0 +1,1273 @@
+/**
+ * 实例销毁相关路由
+ * 处理用户端实例销毁功能（带退款）
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import type { InstanceStatus } from '@prisma/client'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { sendHostManagedInstanceNotification, sendNotification } from '../lib/notifier.js'
+import { sendInstanceDestroyRefundEmail } from '../lib/mailer.js'
+import { sendReleaseNotification } from '../lib/release-notifier.js'
+import { collectTrafficForRunningInstance } from '../services/instance-traffic-collector.js'
+import {
+  INSTANCE_OPERATION_LOCK_NAMESPACE,
+  USER_DESTROY_BILLING_LOCK_NAMESPACE,
+  advisoryTransactionLock,
+  tryAdvisoryTransactionLock
+} from '../db/advisory-locks.js'
+
+// 销毁业务规则常量
+const DESTROY_RULES = {
+  FEE_RATE: 0.10,                // 手续费率 10%（首次免手续费）
+  MAX_PAID_DESTROY_MONTHLY_TRAFFIC: 5n * 1024n * 1024n * 1024n // 5 GiB
+}
+
+const DESTROY_TRAFFIC_LIMIT_REASON = '当前月流量周期无法销毁，已用流量达到或超过 5G'
+
+interface BatchDestroyPreviewItem {
+  id: number
+  name: string
+  canDestroy: boolean
+  cannotDestroyReason: string
+  isFreeInstance: boolean
+  isFirstTime: boolean
+  feeWaiverEligible: boolean
+  refund: {
+    remainingDays: number
+    remainingValue: number
+    feeRate: number
+    feeAmount: number
+    refundAmount: number
+    destroyCount: number
+    maxRefundable: number
+  }
+  instance: {
+    id: number
+    name: string
+    hostName: string
+    planName: string | null
+  }
+}
+
+interface BatchDestroyResultItem {
+  id: number
+  name: string
+  success: boolean
+  skipped?: boolean
+  reason?: string
+  refundAmount?: number
+  feeAmount?: number
+  isFirstTime?: boolean
+  isFreeInstance?: boolean
+}
+
+const BATCH_HIDDEN_REASON = '实例不存在或无权操作'
+
+function isExpiredAt(expiresAt: Date | null | undefined): boolean {
+  return !!expiresAt && expiresAt.getTime() <= Date.now()
+}
+
+function canUserDestroyExpiredSuspendedPaidInstance(instance: {
+  status: string
+  suspendReason?: string | null
+  packagePlanId?: number | null
+  expiresAt?: Date | null
+}): boolean {
+  return instance.status === 'suspended'
+    && instance.suspendReason === 'expired'
+    && !!instance.packagePlanId
+    && isExpiredAt(instance.expiresAt)
+}
+
+/**
+ * 计算手续费率
+ * 第1次：0%（首次免手续费）
+ * 第2次及以后：10%
+ */
+function calculateFeeRate(destroyCount: number): number {
+  if (destroyCount === 0) return 0 // 首次免手续费
+  return DESTROY_RULES.FEE_RATE
+}
+
+function exceedsPaidDestroyTrafficLimit(monthlyTrafficUsed: bigint): boolean {
+  return monthlyTrafficUsed >= DESTROY_RULES.MAX_PAID_DESTROY_MONTHLY_TRAFFIC
+}
+
+async function getDestroyBlockingTask(instanceId: number, client: any = prisma): Promise<{
+  code: 'RESTORE_IN_PROGRESS' | 'UPLOAD_IN_PROGRESS' | 'TASK_IN_PROGRESS'
+  reason: string
+} | null> {
+  const [activeRestoreTask, activeUploadTask, activeInstanceTask] = await Promise.all([
+    client.restoreTask.findFirst({
+      where: {
+        instanceId,
+        status: { in: ['PENDING', 'PROCESSING'] }
+      },
+      select: { id: true }
+    }),
+    client.backupUploadTask.findFirst({
+      where: {
+        instanceId,
+        status: { in: ['PENDING', 'PROCESSING'] }
+      },
+      select: { id: true }
+    }),
+    client.instanceTask.findFirst({
+      where: {
+        instanceId,
+        status: { in: ['PENDING', 'PROCESSING'] }
+      },
+      select: { id: true }
+    })
+  ])
+
+  if (activeRestoreTask) {
+    return { code: 'RESTORE_IN_PROGRESS', reason: '该实例有正在进行的恢复任务，请等待完成或取消' }
+  }
+  if (activeUploadTask) {
+    return { code: 'UPLOAD_IN_PROGRESS', reason: '该实例有正在进行的备份上传任务，请等待完成或取消' }
+  }
+  if (activeInstanceTask) {
+    return { code: 'TASK_IN_PROGRESS', reason: '该实例有正在进行的操作任务，请等待完成' }
+  }
+  return null
+}
+
+function roundMoney(value: number): number {
+  return Number(value.toFixed(2))
+}
+
+async function claimInstanceForUserDestroy(
+  instanceId: number,
+  userId: number,
+  currentStatus: InstanceStatus
+): Promise<boolean> {
+  return prisma.$transaction(async (tx) => {
+    const locked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, instanceId)
+    if (!locked) return false
+
+    const blockingTask = await getDestroyBlockingTask(instanceId, tx)
+    if (blockingTask) return false
+
+    const result = await tx.instance.updateMany({
+      where: {
+        id: instanceId,
+        userId,
+        status: currentStatus
+      },
+      data: { status: 'deleted' }
+    })
+
+    return result.count === 1
+  })
+}
+
+async function restoreClaimedInstanceStatus(
+  instanceId: number,
+  userId: number,
+  originalStatus: InstanceStatus
+): Promise<void> {
+  await prisma.instance.updateMany({
+    where: {
+      id: instanceId,
+      userId,
+      status: 'deleted'
+    },
+    data: { status: originalStatus }
+  })
+}
+
+async function settleUserDestroyBilling(params: {
+  requestUserId: number
+  instance: {
+    id: number
+    userId: number
+    hostId: number
+    name: string
+  }
+  refundableValue: number
+  feeWaiver: boolean
+}): Promise<{ refundAmount: number; feeAmount: number; isFirstTime: boolean }> {
+  const { requestUserId, instance, refundableValue, feeWaiver } = params
+  const instanceId = instance.id
+
+  return await prisma.$transaction(async (tx) => {
+    await advisoryTransactionLock(tx, USER_DESTROY_BILLING_LOCK_NAMESPACE, requestUserId)
+
+    const destroyCount = await tx.userDestroyRecord.count({
+      where: { userId: requestUserId }
+    })
+    const isFirstTime = destroyCount === 0
+    let feeAmount = 0
+    if (!feeWaiver && !isFirstTime) {
+      feeAmount = roundMoney(refundableValue * calculateFeeRate(destroyCount))
+    }
+    const refundAmount = roundMoney(Math.max(0, refundableValue - feeAmount))
+
+    if (refundAmount > 0) {
+      const currentUser = await tx.user.findUnique({
+        where: { id: instance.userId },
+        select: { balance: true }
+      })
+      const oldBalance = Number(currentUser?.balance || 0)
+      const newBalance = roundMoney(oldBalance + refundAmount)
+
+      await tx.user.update({
+        where: { id: instance.userId },
+        data: { balance: { increment: refundAmount } }
+      })
+
+      const balanceLog = await tx.balanceLog.create({
+        data: {
+          userId: instance.userId,
+          type: 'refund',
+          amount: refundAmount,
+          balanceBefore: oldBalance,
+          balanceAfter: newBalance,
+          instanceId,
+          remark: `用户销毁实例退款：${instance.name}${feeWaiver ? '（异常实例免手续费）' : feeAmount > 0 ? `（手续费 ¥${feeAmount.toFixed(2)}）` : '（首次销毁免手续费）'}`
+        }
+      })
+
+      await tx.instanceBillingRecord.create({
+        data: {
+          instanceId,
+          userId: instance.userId,
+          type: 'refund',
+          amount: -refundAmount,
+          months: 0,
+          periodStart: new Date(),
+          periodEnd: new Date(),
+          balanceLogId: balanceLog.id,
+          remark: `用户销毁实例退款${feeWaiver ? '（异常实例免手续费）' : feeAmount > 0 ? `（手续费 ¥${feeAmount.toFixed(2)}）` : '（首次销毁免手续费）'}`
+        }
+      })
+
+      await db.deductHostingBalance(
+        instance.hostId,
+        refundAmount,
+        instanceId,
+        `用户销毁托管实例退款扣除：${instance.name}`,
+        tx
+      )
+    }
+
+    await tx.userDestroyRecord.create({
+      data: {
+        userId: requestUserId,
+        hostId: instance.hostId,
+        instanceId,
+        instanceName: instance.name,
+        refundAmount,
+        feeAmount,
+        isFirstTime
+      }
+    })
+
+    return { refundAmount, feeAmount, isFirstTime }
+  })
+}
+
+async function buildBatchDestroyPreviewItem(userId: number, instanceId: number): Promise<BatchDestroyPreviewItem> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    include: {
+      host: { select: { id: true, name: true, userId: true } },
+      packagePlan: { select: { id: true, name: true } }
+    }
+  })
+
+  if (!instance) {
+    return {
+      id: instanceId,
+      name: `#${instanceId}`,
+      canDestroy: false,
+      cannotDestroyReason: BATCH_HIDDEN_REASON,
+      isFreeInstance: true,
+      isFirstTime: false,
+      feeWaiverEligible: false,
+      refund: {
+        remainingDays: 0,
+        remainingValue: 0,
+        feeRate: 0,
+        feeAmount: 0,
+        refundAmount: 0,
+        destroyCount: 0,
+        maxRefundable: 0
+      },
+      instance: {
+        id: instanceId,
+        name: `#${instanceId}`,
+        hostName: '-',
+        planName: null
+      }
+    }
+  }
+
+  if (instance.userId !== userId) {
+    return {
+      id: instanceId,
+      name: `#${instanceId}`,
+      canDestroy: false,
+      cannotDestroyReason: BATCH_HIDDEN_REASON,
+      isFreeInstance: true,
+      isFirstTime: false,
+      feeWaiverEligible: false,
+      refund: {
+        remainingDays: 0,
+        remainingValue: 0,
+        feeRate: 0,
+        feeAmount: 0,
+        refundAmount: 0,
+        destroyCount: 0,
+        maxRefundable: 0
+      },
+      instance: {
+        id: instanceId,
+        name: `#${instanceId}`,
+        hostName: '-',
+        planName: null
+      }
+    }
+  }
+
+  if (instance.status === 'deleted') {
+    return {
+      id: instance.id,
+      name: instance.name,
+      canDestroy: false,
+      cannotDestroyReason: '实例已删除',
+      isFreeInstance: !instance.packagePlanId,
+      isFirstTime: false,
+      feeWaiverEligible: false,
+      refund: {
+        remainingDays: 0,
+        remainingValue: 0,
+        feeRate: 0,
+        feeAmount: 0,
+        refundAmount: 0,
+        destroyCount: 0,
+        maxRefundable: 0
+      },
+      instance: {
+        id: instance.id,
+        name: instance.name,
+        hostName: instance.host.name,
+        planName: instance.packagePlan?.name || null
+      }
+    }
+  }
+
+  if (instance.status === 'creating') {
+    return {
+      id: instance.id,
+      name: instance.name,
+      canDestroy: false,
+      cannotDestroyReason: '实例正在创建中，无法销毁',
+      isFreeInstance: !instance.packagePlanId,
+      isFirstTime: false,
+      feeWaiverEligible: false,
+      refund: {
+        remainingDays: 0,
+        remainingValue: 0,
+        feeRate: 0,
+        feeAmount: 0,
+        refundAmount: 0,
+        destroyCount: 0,
+        maxRefundable: 0
+      },
+      instance: {
+        id: instance.id,
+        name: instance.name,
+        hostName: instance.host.name,
+        planName: instance.packagePlan?.name || null
+      }
+    }
+  }
+
+  if (instance.status === 'suspended' && !canUserDestroyExpiredSuspendedPaidInstance(instance)) {
+    return {
+      id: instance.id,
+      name: instance.name,
+      canDestroy: false,
+      cannotDestroyReason: '实例已被封停，无法销毁，请先联系管理员解封',
+      isFreeInstance: !instance.packagePlanId,
+      isFirstTime: false,
+      feeWaiverEligible: false,
+      refund: {
+        remainingDays: 0,
+        remainingValue: 0,
+        feeRate: 0,
+        feeAmount: 0,
+        refundAmount: 0,
+        destroyCount: 0,
+        maxRefundable: 0
+      },
+      instance: {
+        id: instance.id,
+        name: instance.name,
+        hostName: instance.host.name,
+        planName: instance.packagePlan?.name || null
+      }
+    }
+  }
+
+  const isErrorState = instance.status === 'error'
+  const feeWaiver = isErrorState
+  const isFreeInstance = !instance.packagePlanId
+  const destroyRecords = await prisma.userDestroyRecord.findMany({
+    where: { userId },
+    orderBy: { destroyedAt: 'desc' }
+  })
+  let isFirstTime = destroyRecords.length === 0
+
+  let remainingValue = 0
+  let feeAmount = 0
+  let refundAmount = 0
+  let remainingDays = 0
+  let maxRefundable = 0
+  let refundableValue = 0
+  let currentFeeRate = feeWaiver ? 0 : calculateFeeRate(destroyRecords.length)
+  let canDestroy = true
+  let cannotDestroyReason = ''
+
+  if (!isFreeInstance && instance.expiresAt && instance.billingPrice && instance.billingCycle) {
+    const refundQuote = await db.calculateInstanceRemainingRefundQuote({
+      id: instance.id,
+      billingPrice: instance.billingPrice,
+      billingCycle: instance.billingCycle,
+      expiresAt: instance.expiresAt,
+      packagePlanId: instance.packagePlanId
+    })
+
+    if (refundQuote.isPaid) {
+      remainingDays = refundQuote.remainingDays
+      remainingValue = refundQuote.remainingValue
+      refundableValue = refundQuote.refundableValue
+      maxRefundable = refundQuote.maxRefundable
+      currentFeeRate = feeWaiver ? 0 : calculateFeeRate(destroyRecords.length)
+      if (!isFirstTime && !feeWaiver) {
+        feeAmount = Number((refundableValue * currentFeeRate).toFixed(2))
+      }
+      refundAmount = Number((refundableValue - feeAmount).toFixed(2))
+    }
+
+    if (
+      !canUserDestroyExpiredSuspendedPaidInstance(instance)
+      && exceedsPaidDestroyTrafficLimit(instance.monthlyTrafficUsed)
+    ) {
+      canDestroy = false
+      cannotDestroyReason = DESTROY_TRAFFIC_LIMIT_REASON
+    }
+  }
+
+  return {
+    id: instance.id,
+    name: instance.name,
+    canDestroy,
+    cannotDestroyReason,
+    isFreeInstance,
+    isFirstTime,
+    feeWaiverEligible: isErrorState,
+    refund: {
+      remainingDays,
+      remainingValue,
+      feeRate: currentFeeRate,
+      feeAmount,
+      refundAmount,
+      destroyCount: destroyRecords.length,
+      maxRefundable
+    },
+    instance: {
+      id: instance.id,
+      name: instance.name,
+      hostName: instance.host.name,
+      planName: instance.packagePlan?.name || null
+    }
+  }
+}
+
+async function executeDestroyForUser(
+  user: { id: number; username: string },
+  instanceId: number,
+  logger: { warn: (...args: any[]) => void; error: (...args: any[]) => void }
+): Promise<BatchDestroyResultItem> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    include: {
+      user: { select: { id: true, username: true, balance: true, email: true } },
+      host: { select: { id: true, name: true, userId: true } }
+    }
+  })
+
+  if (!instance) {
+    return { id: instanceId, name: `#${instanceId}`, success: false, reason: BATCH_HIDDEN_REASON }
+  }
+
+  if (instance.userId !== user.id) {
+    return { id: instanceId, name: `#${instanceId}`, success: false, reason: BATCH_HIDDEN_REASON }
+  }
+
+  if (instance.status === 'deleted') {
+    return { id: instance.id, name: instance.name, success: false, skipped: true, reason: '实例已删除' }
+  }
+
+  if (instance.status === 'creating') {
+    return { id: instance.id, name: instance.name, success: false, skipped: true, reason: '实例正在创建中，无法销毁' }
+  }
+
+  if (instance.status === 'suspended' && !canUserDestroyExpiredSuspendedPaidInstance(instance)) {
+    return { id: instance.id, name: instance.name, success: false, skipped: true, reason: '实例已被封停，无法销毁，请先联系管理员解封' }
+  }
+
+  const blockingTask = await getDestroyBlockingTask(instanceId)
+  if (blockingTask) {
+    return { id: instance.id, name: instance.name, success: false, skipped: true, reason: blockingTask.reason }
+  }
+
+  const isFreeInstance = !instance.packagePlanId
+  const destroyRecords = await prisma.userDestroyRecord.findMany({
+    where: { userId: user.id },
+    orderBy: { destroyedAt: 'desc' }
+  })
+  let isFirstTime = destroyRecords.length === 0
+  const feeWaiver = instance.status === 'error'
+
+  let currentMonthlyTrafficUsed = instance.monthlyTrafficUsed
+  if (!isFreeInstance && instance.status === 'running') {
+    const collectResult = await collectTrafficForRunningInstance(instanceId)
+    if (!collectResult.success) {
+      logger.warn({ instanceId, error: collectResult.error }, '销毁前即时采集流量失败')
+    } else {
+      currentMonthlyTrafficUsed = collectResult.currentUsage
+    }
+  }
+
+  if (
+    !isFreeInstance
+    && !canUserDestroyExpiredSuspendedPaidInstance(instance)
+    && exceedsPaidDestroyTrafficLimit(currentMonthlyTrafficUsed)
+  ) {
+    return { id: instance.id, name: instance.name, success: false, skipped: true, reason: DESTROY_TRAFFIC_LIMIT_REASON }
+  }
+
+  let feeAmount = 0
+  let refundAmount = 0
+  let refundableValue = 0
+
+  if (!isFreeInstance && instance.expiresAt && instance.billingPrice && instance.billingCycle) {
+    const refundQuote = await db.calculateInstanceRemainingRefundQuote({
+      id: instanceId,
+      billingPrice: instance.billingPrice,
+      billingCycle: instance.billingCycle,
+      expiresAt: instance.expiresAt,
+      packagePlanId: instance.packagePlanId
+    })
+
+    if (refundQuote.isPaid) {
+      refundableValue = refundQuote.refundableValue
+      if (!feeWaiver) {
+        const currentFeeRate = calculateFeeRate(destroyRecords.length)
+        if (!isFirstTime) {
+          feeAmount = roundMoney(refundableValue * currentFeeRate)
+        }
+      }
+      refundAmount = roundMoney(Math.max(0, refundableValue - feeAmount))
+    }
+  }
+
+  const claimed = await claimInstanceForUserDestroy(instanceId, user.id, instance.status)
+  if (!claimed) {
+    return { id: instance.id, name: instance.name, success: false, skipped: true, reason: '实例正在销毁或已删除' }
+  }
+
+  try {
+    if (!isFreeInstance) {
+      try {
+        const billingResult = await settleUserDestroyBilling({
+          requestUserId: user.id,
+          instance,
+          refundableValue,
+          feeWaiver
+        })
+        refundAmount = billingResult.refundAmount
+        feeAmount = billingResult.feeAmount
+        isFirstTime = billingResult.isFirstTime
+      } catch (settleError) {
+        await restoreClaimedInstanceStatus(instanceId, user.id, instance.status)
+        throw settleError
+      }
+    }
+
+    if (instance.status === 'running') {
+      try {
+        const host = await db.getHostById(instance.hostId)
+        if (host) {
+          const { getIncusClient, stopInstance } = await import('../lib/incus/index.js')
+          const client = await getIncusClient(host)
+          await stopInstance(client, instance.incusId, true)
+        }
+      } catch (err) {
+        logger.warn(err, '停止实例失败')
+      }
+    }
+
+    const portMappings = await prisma.portMapping.findMany({ where: { instanceId } })
+
+    try {
+      await prisma.snapshot.deleteMany({ where: { instanceId } })
+      await prisma.backup.deleteMany({ where: { instanceId } })
+      await prisma.portMapping.deleteMany({ where: { instanceId } })
+      await prisma.proxySite.deleteMany({ where: { instanceId } })
+      await prisma.dailyTraffic.deleteMany({ where: { instanceId } })
+      await prisma.ipAddress.deleteMany({ where: { instanceId } })
+      await prisma.ipv6Subnet.deleteMany({ where: { instanceId } })
+      await prisma.restoreTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+      await prisma.backupUploadTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+      await prisma.instanceTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+      await prisma.instanceTransfer.updateMany({
+        where: { instanceId, status: 'pending' },
+        data: { status: 'cancelled', cancelledAt: new Date() }
+      })
+    } catch (cleanupErr) {
+      logger.warn(cleanupErr, '清理关联数据失败')
+    }
+
+    try {
+      const host = await db.getHostById(instance.hostId)
+      if (host) {
+        const { getIncusClient, deleteInstance } = await import('../lib/incus/index.js')
+        const client = await getIncusClient(host)
+        await deleteInstance(client, instance.incusId)
+      }
+    } catch (incusErr) {
+      logger.error(incusErr, 'Incus 删除实例失败')
+    }
+
+    const portMappingsCount = portMappings?.length || 0
+    await db.rollbackResources({
+      hostId: instance.hostId,
+      cpu: instance.cpu,
+      memory: instance.memory,
+      disk: instance.disk,
+      portCount: portMappingsCount
+    })
+
+    const usedResources = await db.calculateHostResourcesFromInstances(instance.hostId)
+    const actualPortsUsed = await prisma.portMapping.count({
+      where: {
+        instance: {
+          hostId: instance.hostId,
+          status: { not: 'deleted' }
+        }
+      }
+    })
+    await db.updateHostResources(instance.hostId, {
+      cpuUsed: usedResources.cpuUsed,
+      memoryUsed: usedResources.memoryUsed,
+      diskUsed: usedResources.diskUsed
+    })
+    await prisma.host.update({
+      where: { id: instance.hostId },
+      data: { natPortsUsedCount: actualPortsUsed }
+    })
+
+    await createLog(
+      user.id,
+      'billing',
+      'instance.user_destroy',
+      `User destroyed instance "${instance.name}" (Host: ${instance.host.name}, Refund: ¥${refundAmount.toFixed(2)}, Fee: ¥${feeAmount.toFixed(2)})`,
+      'success'
+    )
+
+    await sendNotification(user.id, 'instance_deleted_refunded', {
+      instanceName: instance.name,
+      refundAmount,
+      feeAmount,
+      isFreeInstance
+    })
+
+    if (!isFreeInstance && instance.user?.email) {
+      try {
+        await sendInstanceDestroyRefundEmail(instance.user.email, {
+          username: instance.user.username,
+          instanceName: instance.name,
+          refundAmount,
+          feeAmount,
+          refundType: '余额退款',
+          isUserDestroy: true
+        })
+      } catch (emailErr) {
+        logger.warn(emailErr, '发送销毁退款邮件失败')
+      }
+    }
+
+    sendHostManagedInstanceNotification(
+      instance.hostId,
+      'destroy',
+      {
+        username: user.username,
+        instanceName: instance.name,
+        refundAmount,
+        feeAmount
+      }
+    ).catch(err => {
+      logger.warn(err, '发送节点销毁通知失败')
+    })
+
+    if (instance.packageId) {
+      sendReleaseNotification({
+        packageId: instance.packageId,
+        cpu: instance.cpu,
+        memory: instance.memory,
+        source: '用户销毁实例'
+      }).catch(() => {})
+    }
+
+    return {
+      id: instance.id,
+      name: instance.name,
+      success: true,
+      refundAmount,
+      feeAmount,
+      isFirstTime,
+      isFreeInstance
+    }
+  } catch (error) {
+    logger.error(error, '销毁实例失败')
+    return {
+      id: instance.id,
+      name: instance.name,
+      success: false,
+      reason: '销毁实例失败'
+    }
+  }
+}
+
+export default async function instanceDestroyRoutes(fastify: FastifyInstance) {
+
+  fastify.post<{
+    Body: { instanceIds: number[] }
+  }>('/batch/destroy-info', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const uniqueIds = Array.from(new Set(request.body.instanceIds)).filter(id => Number.isInteger(id))
+    if (uniqueIds.length === 0) {
+      return reply.code(400).send({ error: '请选择至少一个实例' })
+    }
+
+    const items = await Promise.all(uniqueIds.map(id => buildBatchDestroyPreviewItem(request.user.id, id)))
+    return { items }
+  })
+
+  fastify.post<{
+    Body: { instanceIds: number[] }
+  }>('/batch/destroy', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 3, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceIds'],
+        properties: {
+          instanceIds: {
+            type: 'array',
+            items: { type: 'integer' },
+            minItems: 1,
+            maxItems: 100
+          }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const uniqueIds = Array.from(new Set(request.body.instanceIds)).filter(id => Number.isInteger(id))
+    if (uniqueIds.length === 0) {
+      return reply.code(400).send({ error: '请选择至少一个实例' })
+    }
+
+    const userMeta = {
+      id: request.user.id,
+      username: request.user.username
+    }
+
+    const results: BatchDestroyResultItem[] = []
+    for (const instanceId of uniqueIds) {
+      const result = await executeDestroyForUser(userMeta, instanceId, request.log)
+      results.push(result)
+    }
+
+    const successCount = results.filter(item => item.success).length
+    const skippedCount = results.filter(item => item.skipped).length
+    const failedCount = results.length - successCount - skippedCount
+
+    await createLog(
+      request.user.id,
+      'billing',
+      'instance.batch_destroy',
+      `Batch destroy processed ${results.length} instance(s): success=${successCount}, skipped=${skippedCount}, failed=${failedCount}`,
+      failedCount > 0 ? 'warning' : 'success'
+    )
+
+    return {
+      message: successCount > 0 ? '批量销毁已处理' : '没有实例完成销毁',
+      successCount,
+      skippedCount,
+      failedCount,
+      results
+    }
+  })
+
+  // ==================== 获取销毁预览信息 ====================
+  // GET /api/instances/:id/destroy-info
+  fastify.get<{ Params: { id: string }; Querystring: { feeWaiver?: string } }>('/:id/destroy-info', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { id: string }; Querystring: { feeWaiver?: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId },
+      include: {
+        host: { select: { id: true, name: true, userId: true } },
+        packagePlan: { select: { id: true, name: true } }
+      }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以销毁
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查实例状态
+    if (instance.status === 'deleted') {
+      return reply.code(400).send({ error: '实例已删除', canDestroy: false })
+    }
+
+    if (instance.status === 'creating') {
+      return reply.code(400).send({ error: '实例正在创建中，无法销毁', canDestroy: false })
+    }
+
+    if (instance.status === 'suspended' && !canUserDestroyExpiredSuspendedPaidInstance(instance)) {
+      return reply.code(400).send({ error: '实例已被封停，无法销毁，请先联系管理员解封', canDestroy: false })
+    }
+
+    // 异常实例免手续费
+    const isErrorState = instance.status === 'error'
+    const feeWaiver = request.query.feeWaiver === 'error' && isErrorState
+
+    // 免费实例检查
+    const isFreeInstance = !instance.packagePlanId
+
+    // 查询用户销毁记录（仅付费实例销毁计入）
+    const destroyRecords = await prisma.userDestroyRecord.findMany({
+      where: { userId: user.id },
+      orderBy: { destroyedAt: 'desc' }
+    })
+
+    // 检查是否首次销毁
+    let isFirstTime = destroyRecords.length === 0
+
+    // 计算剩余价值和退款金额
+    let remainingValue = 0
+    let feeAmount = 0
+    let refundAmount = 0
+    let remainingDays = 0
+    let maxRefundable = 0
+    let refundableValue = 0
+    let currentFeeRate = feeWaiver ? 0 : calculateFeeRate(destroyRecords.length)
+
+    if (!isFreeInstance && instance.expiresAt && instance.billingPrice && instance.billingCycle) {
+      const refundQuote = await db.calculateInstanceRemainingRefundQuote({
+        id: instanceId,
+        billingPrice: instance.billingPrice,
+        billingCycle: instance.billingCycle,
+        expiresAt: instance.expiresAt,
+        packagePlanId: instance.packagePlanId
+      })
+
+      if (refundQuote.isPaid) {
+        remainingDays = refundQuote.remainingDays
+        remainingValue = refundQuote.remainingValue
+        refundableValue = refundQuote.refundableValue
+        maxRefundable = refundQuote.maxRefundable
+
+        // 计算手续费（首次免手续费，后续固定 10%；异常实例免手续费）
+        currentFeeRate = feeWaiver ? 0 : calculateFeeRate(destroyRecords.length)
+        if (!isFirstTime && !feeWaiver) {
+          feeAmount = Number((refundableValue * currentFeeRate).toFixed(2))
+        }
+
+        // 实际退款金额
+        refundAmount = Number((refundableValue - feeAmount).toFixed(2))
+      }
+    }
+
+    // 判断是否可以销毁（已移除冷却期限制，付费实例随时可销毁）
+    let canDestroy = true
+    let cannotDestroyReason = ''
+
+    if (
+      !isFreeInstance
+      && !canUserDestroyExpiredSuspendedPaidInstance(instance)
+      && exceedsPaidDestroyTrafficLimit(instance.monthlyTrafficUsed)
+    ) {
+      canDestroy = false
+      cannotDestroyReason = DESTROY_TRAFFIC_LIMIT_REASON
+    }
+
+    return {
+      canDestroy,
+      cannotDestroyReason,
+      isFreeInstance,
+      isFirstTime,
+      isErrorState,
+      feeWaiverEligible: isErrorState,
+      // 销毁规则
+      rules: {
+        feeRate: feeWaiver ? 0 : DESTROY_RULES.FEE_RATE
+      },
+      // 退款预览
+      refund: {
+        remainingDays,
+        remainingValue,
+        feeRate: currentFeeRate,
+        feeAmount,
+        refundAmount,
+        destroyCount: destroyRecords.length,  // 已销毁次数
+        maxRefundable  // 退款上限（基于历史账单）
+      },
+      // 实例信息
+      instance: {
+        id: instance.id,
+        name: instance.name,
+        hostName: instance.host.name,
+        planName: instance.packagePlan?.name || null
+      }
+    }
+  })
+
+  // ==================== 执行销毁 ====================
+  // POST /api/instances/:id/destroy
+  fastify.post<{ Params: { id: string }; Querystring: { feeWaiver?: string } }>('/:id/destroy', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { id: string }; Querystring: { feeWaiver?: string } }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = Number(request.params.id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取实例信息
+    const instance = await prisma.instance.findUnique({
+      where: { id: instanceId },
+      include: {
+        user: { select: { id: true, username: true, balance: true, email: true } },
+        host: { select: { id: true, name: true, userId: true } }
+      }
+    })
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 只有实例所有者可以销毁
+    if (instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查实例状态
+    if (instance.status === 'deleted') {
+      return reply.code(400).send({ error: '实例已删除' })
+    }
+
+    if (instance.status === 'creating') {
+      return reply.code(400).send({ error: '实例正在创建中，无法销毁' })
+    }
+
+    if (instance.status === 'suspended' && !canUserDestroyExpiredSuspendedPaidInstance(instance)) {
+      return reply.code(400).send({ error: '实例已被封停，无法销毁，请先联系管理员解封' })
+    }
+
+    const blockingTask = await getDestroyBlockingTask(instanceId)
+    if (blockingTask) {
+      return reply.code(409).send({
+        error: blockingTask.reason,
+        code: blockingTask.code
+      })
+    }
+
+    // 免费实例检查
+    const isFreeInstance = !instance.packagePlanId
+
+    // 查询用户销毁记录
+    const destroyRecords = await prisma.userDestroyRecord.findMany({
+      where: { userId: user.id },
+      orderBy: { destroyedAt: 'desc' }
+    })
+
+    let isFirstTime = destroyRecords.length === 0
+    // 已移除冷却期限制，付费实例可随时销毁
+
+    // 异常实例免手续费
+    const isErrorState = instance.status === 'error'
+    const feeWaiver = request.query.feeWaiver === 'error' && isErrorState
+
+    let currentMonthlyTrafficUsed = instance.monthlyTrafficUsed
+
+    if (!isFreeInstance && instance.status === 'running') {
+      const collectResult = await collectTrafficForRunningInstance(instanceId)
+      if (!collectResult.success) {
+        request.log.warn({ instanceId, error: collectResult.error }, '销毁前即时采集流量失败')
+      } else {
+        currentMonthlyTrafficUsed = collectResult.currentUsage
+      }
+    }
+
+    if (
+      !isFreeInstance
+      && !canUserDestroyExpiredSuspendedPaidInstance(instance)
+      && exceedsPaidDestroyTrafficLimit(currentMonthlyTrafficUsed)
+    ) {
+      return reply.code(400).send(apiError(
+        ErrorCode.INSTANCE_DESTROY_TRAFFIC_LIMIT_EXCEEDED,
+        DESTROY_TRAFFIC_LIMIT_REASON
+      ))
+    }
+
+    // 计算退款金额
+    let feeAmount = 0
+    let refundAmount = 0
+    let refundableValue = 0
+
+    if (!isFreeInstance && instance.expiresAt && instance.billingPrice && instance.billingCycle) {
+      const refundQuote = await db.calculateInstanceRemainingRefundQuote({
+        id: instanceId,
+        billingPrice: instance.billingPrice,
+        billingCycle: instance.billingCycle,
+        expiresAt: instance.expiresAt,
+        packagePlanId: instance.packagePlanId
+      })
+
+      if (refundQuote.isPaid) {
+        refundableValue = refundQuote.refundableValue
+
+        // 异常实例免手续费，否则按正常规则计算
+        if (!feeWaiver) {
+          const currentFeeRate = calculateFeeRate(destroyRecords.length)
+          if (!isFirstTime) {
+            feeAmount = roundMoney(refundableValue * currentFeeRate)
+          }
+        }
+
+        refundAmount = roundMoney(Math.max(0, refundableValue - feeAmount))
+      }
+    }
+
+    const claimed = await claimInstanceForUserDestroy(instanceId, user.id, instance.status)
+    if (!claimed) {
+      return reply.code(409).send({
+        error: '实例正在销毁或已删除',
+        code: 'INSTANCE_DESTROY_IN_PROGRESS'
+      })
+    }
+
+    try {
+      if (!isFreeInstance) {
+        try {
+          const billingResult = await settleUserDestroyBilling({
+            requestUserId: user.id,
+            instance,
+            refundableValue,
+            feeWaiver
+          })
+          refundAmount = billingResult.refundAmount
+          feeAmount = billingResult.feeAmount
+          isFirstTime = billingResult.isFirstTime
+        } catch (settleError) {
+          await restoreClaimedInstanceStatus(instanceId, user.id, instance.status)
+          throw settleError
+        }
+      }
+
+      // 1. 停止实例
+      if (instance.status === 'running') {
+        try {
+          const host = await db.getHostById(instance.hostId)
+          if (host) {
+            const { getIncusClient, stopInstance } = await import('../lib/incus/index.js')
+            const client = await getIncusClient(host)
+            await stopInstance(client, instance.incusId, true)
+          }
+        } catch (err) {
+          request.log.warn(err, '停止实例失败')
+        }
+      }
+
+      // 2. 获取端口映射数量（用于释放资源）
+      const portMappings = await prisma.portMapping.findMany({ where: { instanceId } })
+
+      // 3. 清理关联数据
+      try {
+        await prisma.snapshot.deleteMany({ where: { instanceId } })
+        await prisma.backup.deleteMany({ where: { instanceId } })
+        await prisma.portMapping.deleteMany({ where: { instanceId } })
+        await prisma.proxySite.deleteMany({ where: { instanceId } })
+        await prisma.dailyTraffic.deleteMany({ where: { instanceId } })
+        await prisma.ipAddress.deleteMany({ where: { instanceId } })
+        await prisma.ipv6Subnet.deleteMany({ where: { instanceId } })
+        await prisma.restoreTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+        await prisma.backupUploadTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+        await prisma.instanceTask.deleteMany({ where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } } })
+        await prisma.instanceTransfer.updateMany({
+          where: { instanceId, status: 'pending' },
+          data: { status: 'cancelled', cancelledAt: new Date() }
+        })
+      } catch (cleanupErr) {
+        request.log.warn(cleanupErr, '清理关联数据失败')
+      }
+
+      // 4. 从 Incus 删除实例
+      try {
+        const host = await db.getHostById(instance.hostId)
+        if (host) {
+          const { getIncusClient, deleteInstance } = await import('../lib/incus/index.js')
+          const client = await getIncusClient(host)
+          await deleteInstance(client, instance.incusId)
+        }
+      } catch (incusErr) {
+        request.log.error(incusErr, 'Incus 删除实例失败')
+      }
+
+      // 6. 释放宿主机资源
+      const portMappingsCount = portMappings?.length || 0
+      await db.rollbackResources({
+        hostId: instance.hostId,
+        cpu: instance.cpu,
+        memory: instance.memory,
+        disk: instance.disk,
+        portCount: portMappingsCount
+      })
+
+      // 重新计算宿主机资源使用量
+      const usedResources = await db.calculateHostResourcesFromInstances(instance.hostId)
+      const actualPortsUsed = await prisma.portMapping.count({
+        where: {
+          instance: {
+            hostId: instance.hostId,
+            status: { not: 'deleted' }
+          }
+        }
+      })
+      await db.updateHostResources(instance.hostId, {
+        cpuUsed: usedResources.cpuUsed,
+        memoryUsed: usedResources.memoryUsed,
+        diskUsed: usedResources.diskUsed
+      })
+      await prisma.host.update({
+        where: { id: instance.hostId },
+        data: { natPortsUsedCount: actualPortsUsed }
+      })
+
+      // 8. 记录操作日志
+      await createLog(
+        user.id,
+        'billing',
+        'instance.user_destroy',
+        `User destroyed instance "${instance.name}" (Host: ${instance.host.name}, Refund: ¥${refundAmount.toFixed(2)}, Fee: ¥${feeAmount.toFixed(2)})`,
+        'success'
+      )
+
+      // 9. 通知用户
+      await sendNotification(user.id, 'instance_deleted_refunded', {
+        instanceName: instance.name,
+        refundAmount,
+        feeAmount,
+        isFreeInstance
+      })
+
+      if (!isFreeInstance && instance.user?.email) {
+        try {
+          await sendInstanceDestroyRefundEmail(instance.user.email, {
+            username: instance.user.username,
+            instanceName: instance.name,
+            refundAmount,
+            feeAmount,
+            refundType: '余额退款',
+            isUserDestroy: true
+          })
+        } catch (emailErr) {
+          request.log.warn(emailErr, '发送销毁退款邮件失败')
+        }
+      }
+
+      sendHostManagedInstanceNotification(
+        instance.hostId,
+        'destroy',
+        {
+          username: user.username,
+          instanceName: instance.name,
+          refundAmount,
+          feeAmount
+        }
+      ).catch(err => {
+        request.log.warn(err, '发送节点销毁通知失败')
+      })
+
+      // 10. 向套餐绑定的通知渠道发送"资源释放"通知
+      if (instance.packageId) {
+        sendReleaseNotification({
+          packageId: instance.packageId,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          source: '用户销毁实例'
+        }).catch(() => {})
+      }
+
+      return {
+        success: true,
+        message: isFreeInstance
+          ? '实例已销毁'
+          : `实例已销毁${refundAmount > 0 ? `，已退款 ¥${refundAmount.toFixed(2)}` : ''}${feeAmount > 0 ? `（手续费 ¥${feeAmount.toFixed(2)}）` : ''}`,
+        refundAmount,
+        feeAmount,
+        isFirstTime,
+        isFreeInstance
+      }
+    } catch (error) {
+      request.log.error(error, '销毁实例失败')
+      return reply.code(500).send({ error: '销毁实例失败' })
+    }
+  })
+}
diff --git a/server/src/routes/instances.ts b/server/src/routes/instances.ts
new file mode 100644
index 0000000..f1913d6
--- /dev/null
+++ b/server/src/routes/instances.ts
@@ -0,0 +1,6375 @@
+/**
+ * 实例管理路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { prisma } from '../db/prisma.js'
+import type { InstanceStatus } from '@prisma/client'
+import { getIncusClient } from '../lib/incus/index.js'
+import {
+  buildInstanceConfig,
+  getInstanceState,
+  getInstance,
+  createInstance,
+  startInstance,
+  stopInstance,
+  deleteInstance,
+  updateInstance,
+  addDevice,
+  removeDevice,
+  mapInstanceStatus,
+  getTrafficCountersFromState
+} from '../lib/incus/index.js'
+import { deleteSnapshot } from '../lib/incus/incus-snapshots.js'
+import { generateIncusConfig, generateRandomPassword } from '../lib/incus-config-generator.js'
+import { encryptSensitiveData, decryptSensitiveData, validateName } from '../lib/security.js'
+import {
+  consumeOperationVerification
+} from '../lib/operation-verification.js'
+import {
+  detectCloudInitStatus,
+  getCachedCloudInitStatus,
+  persistCloudInitStatus
+} from '../lib/cloud-init-status.js'
+import { customAlphabet } from 'nanoid'
+
+// 自定义 nanoid，只使用小写字母和数字（Incus 不允许下划线）
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)
+import type { Host } from '../types/database.js'
+import {
+  getImageDisplayName,
+  getSystemImageAvailabilityForHost,
+  isImageCompatibleWithInstanceType,
+  isImageCompatibleWithMemory,
+  isValidSystemImage
+} from '../db/images.js'
+import { generateRandomIPv4, generateRandomIPv6 } from '../lib/ip-calculator.js'
+import { getProxySitesByInstanceId, deleteProxySite } from '../db/proxy-sites.js'
+import { calculateVipLevel, getVipBadgeStyleForLevel, getVipRules } from '../services/vip-levels.js'
+import { ProxyStrategyFactory } from '../lib/proxy/index.js'
+import { createCaddyClient } from '../lib/caddy-client.js'
+import { sendHostManagedInstanceNotification, sendNotification } from '../lib/notifier.js'
+import { createInstanceTask, getInstanceTaskById, getActiveTaskForInstance, getTaskQueuePosition, cancelInstanceTask } from '../db/instance-tasks.js'
+import { closeInstanceSessions } from '../lib/terminal-proxy.js'
+import { calculateDiscountAmount } from '../lib/billing-calc.js'
+import { validateCommandsOwnership, mergeCommandContents, getImageDistroFromAlias } from '../db/custom-init-commands.js'
+import { getPlanById, isPaidPackage } from '../db/package-plans.js'
+import { calculateCreateBilling } from '../db/billing-operations.js'
+import { getUserBalance } from '../db/balance.js'
+import { selectBindableIpv4ListenAddress } from '../lib/network-address.js'
+import { applyTrafficMultiplier, normalizeTrafficMultiplier, resolveInstanceTrafficLimitForHost } from '../lib/traffic-multiplier.js'
+import {
+  persistResolvedInstanceNetworkAddresses,
+  resolveInstanceNetworkAddresses
+} from '../lib/instance-network-sync.js'
+import { INSTANCE_OPERATION_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from '../db/advisory-locks.js'
+
+import { resolveEffectiveSwapSize, resolveIncusSwapValue } from '../lib/instance-swap.js'
+
+// 检查实例是否被转移锁定
+async function checkTransferLock(instanceId: number, reply: FastifyReply): Promise<boolean> {
+  const hasPending = await db.hasPendingTransfer(instanceId)
+  if (hasPending) {
+    reply.code(400).send(apiError(ErrorCode.TRANSFER_INSTANCE_LOCKED))
+    return true
+  }
+  return false
+}
+
+async function claimInstanceForDelete(instanceId: number, currentStatus: InstanceStatus): Promise<boolean> {
+  return prisma.$transaction(async (tx) => {
+    const locked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, instanceId)
+    if (!locked) return false
+
+    const [activeRestoreTask, activeUploadTask, activeInstanceTask] = await Promise.all([
+      tx.restoreTask.findFirst({
+        where: { instanceId, status: { in: ['PENDING', 'PROCESSING'] } },
+        select: { id: true }
+      }),
+      tx.backupUploadTask.findFirst({
+        where: { instanceId, status: { in: ['PENDING', 'PROCESSING'] } },
+        select: { id: true }
+      }),
+      tx.instanceTask.findFirst({
+        where: { instanceId, status: { in: ['PENDING', 'PROCESSING'] } },
+        select: { id: true }
+      })
+    ])
+    if (activeRestoreTask || activeUploadTask || activeInstanceTask) return false
+
+    const result = await tx.instance.updateMany({
+      where: {
+        id: instanceId,
+        status: currentStatus
+      },
+      data: { status: 'deleted' }
+    })
+
+    return result.count === 1
+  })
+}
+
+/**
+ * 检查用户对实例的操作权限
+ * 权限规则：
+ * 1. 管理员可以操作所有实例（拥有宿主机所有者的权限）
+ * 2. 实例所有者可以操作自己创建的实例
+ * 3. 节点所有者可以操作其节点上的所有实例
+ * 
+ * @deprecated 使用 lib/permission.ts 中的 checkInstancePermission 替代
+ * 此函数保留用于向后兼容，新代码请使用统一权限模块
+ */
+async function checkInstanceOperationPermission(
+  user: { id: number; role: string },
+  instance: { user_id: number; host_id: number }
+): Promise<boolean> {
+  // 管理员拥有宿主机所有者的权限，可以操作所有实例
+  if (user.role === 'admin') return true
+
+  // 实例所有者有权限
+  if (instance.user_id === user.id) return true
+
+  // 检查是否是节点所有者
+  const host = await db.getHostById(instance.host_id)
+  if (host && host.user_id === user.id) return true
+
+  return false
+}
+
+type ChangeHostUnavailableReason =
+  | 'current_host'
+  | 'host_offline'
+  | 'host_type_mismatch'
+  | 'cpu_full'
+  | 'memory_full'
+  | 'resource_unconfigured'
+  | 'image_unavailable'
+
+interface ChangeHostHostOption {
+  id: number
+  name: string
+  location: string | null
+  countryCode: string
+  architecture: string
+  status: string
+  probeUrl: string | null
+  isCurrent: boolean
+  canChange: boolean
+  unavailableReason: ChangeHostUnavailableReason | null
+  resources: {
+    cpuUsed: number
+    cpuAllowanceMax: number
+    cpuAvailable: number
+    memoryUsed: number
+    memoryMax: number
+    memoryAvailable: number
+  }
+  trafficMultiplier: number
+  effectiveTrafficLimit: string | null
+}
+
+interface ChangeHostOptionsResponse {
+  packageId: number | null
+  packageName: string | null
+  currentHostId: number
+  required: {
+    cpu: number
+    memory: number
+  }
+  hosts: ChangeHostHostOption[]
+  sshKeys: Array<{
+    id: number
+    name: string
+    fingerprint: string | null
+  }>
+  canChangeHost: boolean
+  unavailableReason?: 'no_package' | 'single_host' | 'no_ssh_key'
+}
+
+function isHostCompatibleWithPackageInstanceType(
+  hostInstanceType: string | null | undefined,
+  packageInstanceType: 'container' | 'vm'
+): boolean {
+  const type = hostInstanceType || 'container'
+  if (packageInstanceType === 'vm') return type === 'vm' || type === 'both'
+  return type === 'container' || type === 'both'
+}
+
+async function buildChangeHostOptions(instance: {
+  id: number
+  user_id: number
+  host_id: number
+  package_id: number | null
+  image: string
+  cpu: number
+  memory: number
+  package_plan_id?: number | null
+}): Promise<ChangeHostOptionsResponse> {
+  const sshKeys = await db.getSSHKeysByUserId(instance.user_id)
+
+  const baseResponse = {
+    packageId: null,
+    packageName: null,
+    currentHostId: instance.host_id,
+    required: {
+      cpu: instance.cpu,
+      memory: instance.memory
+    },
+    hosts: [],
+    sshKeys: sshKeys.map(key => ({
+      id: key.id,
+      name: key.name,
+      fingerprint: key.fingerprint ?? null
+    })),
+    canChangeHost: false
+  } satisfies ChangeHostOptionsResponse
+
+  if (!instance.package_id) {
+    return { ...baseResponse, unavailableReason: 'no_package' }
+  }
+
+  const pkg = await db.getPackageById(instance.package_id)
+  if (!pkg) {
+    return { ...baseResponse, unavailableReason: 'no_package' }
+  }
+
+  const packageHosts = await prisma.packageHost.findMany({
+    where: { packageId: instance.package_id },
+    select: {
+      hostId: true,
+      trafficMultiplier: true,
+      host: {
+        select: {
+          id: true,
+          name: true,
+          location: true,
+          countryCode: true,
+          architecture: true,
+          status: true,
+          cpuUsed: true,
+          cpuAllowanceMax: true,
+          memoryUsed: true,
+          memoryMax: true,
+          instanceType: true,
+          probeUrl: true
+        }
+      }
+    },
+    orderBy: { createdAt: 'asc' }
+  })
+
+  const hostIds = packageHosts.map(binding => binding.hostId)
+  if (hostIds.length === 0) {
+    return {
+      ...baseResponse,
+      packageId: pkg.id,
+      packageName: pkg.name,
+      unavailableReason: 'single_host'
+    }
+  }
+
+  const resourceRows = await prisma.instance.groupBy({
+    by: ['hostId'],
+    where: {
+      hostId: { in: hostIds },
+      status: { not: 'deleted' }
+    },
+    _sum: {
+      cpu: true,
+      memory: true
+    }
+  })
+
+  const resourceByHostId = new Map(resourceRows.map(row => [
+    row.hostId,
+    {
+      cpuUsed: row._sum.cpu ?? 0,
+      memoryUsed: row._sum.memory ?? 0
+    }
+  ]))
+
+  const packageInstanceType = ((pkg as { instance_type?: 'container' | 'vm' }).instance_type || 'container')
+  let baseTrafficLimit = pkg.monthly_traffic_limit ? BigInt(pkg.monthly_traffic_limit) : null
+  if (instance.package_plan_id) {
+    const plan = await getPlanById(instance.package_plan_id)
+    if (plan && plan.packageId === instance.package_id) {
+      baseTrafficLimit = plan.trafficLimit
+    }
+  }
+
+  const hosts = await Promise.all(packageHosts.map(async binding => {
+    const host = binding.host
+    const used = resourceByHostId.get(host.id) || { cpuUsed: 0, memoryUsed: 0 }
+    const cpuUsed = Math.max(used.cpuUsed, host.cpuUsed || 0)
+    const memoryUsed = Math.max(used.memoryUsed, host.memoryUsed || 0)
+    const cpuAllowanceMax = host.cpuAllowanceMax || 0
+    const memoryMax = host.memoryMax || 0
+    const cpuAvailable = cpuAllowanceMax > 0 ? Math.max(0, cpuAllowanceMax - cpuUsed) : 0
+    const memoryAvailable = memoryMax > 0 ? Math.max(0, memoryMax - memoryUsed) : 0
+    const isCurrent = host.id === instance.host_id
+
+    let unavailableReason: ChangeHostUnavailableReason | null = null
+    if (isCurrent) {
+      unavailableReason = 'current_host'
+    } else if (host.status !== 'online') {
+      unavailableReason = 'host_offline'
+    } else if (!isHostCompatibleWithPackageInstanceType(host.instanceType, packageInstanceType)) {
+      unavailableReason = 'host_type_mismatch'
+    } else if (cpuAllowanceMax <= 0 || memoryMax <= 0) {
+      unavailableReason = 'resource_unconfigured'
+    } else if (cpuAvailable < instance.cpu) {
+      unavailableReason = 'cpu_full'
+    } else if (memoryAvailable < instance.memory) {
+      unavailableReason = 'memory_full'
+    } else {
+      const imageAvailability = await getSystemImageAvailabilityForHost(instance.image, host.id, {
+        instanceType: packageInstanceType,
+        memory: instance.memory
+      })
+      if (!imageAvailability.ok) {
+        unavailableReason = 'image_unavailable'
+      }
+    }
+
+    return {
+      id: host.id,
+      name: host.name,
+      location: host.location,
+      countryCode: host.countryCode || 'us',
+      architecture: host.architecture || 'x86_64',
+      status: host.status,
+      probeUrl: host.probeUrl || null,
+      isCurrent,
+      canChange: unavailableReason === null,
+      unavailableReason,
+      resources: {
+        cpuUsed,
+        cpuAllowanceMax,
+        cpuAvailable,
+        memoryUsed,
+        memoryMax,
+        memoryAvailable
+      },
+      trafficMultiplier: normalizeTrafficMultiplier(binding.trafficMultiplier),
+      effectiveTrafficLimit: applyTrafficMultiplier(baseTrafficLimit, binding.trafficMultiplier)?.toString() ?? null
+    } satisfies ChangeHostHostOption
+  }))
+
+  const hasTarget = hosts.some(host => host.canChange)
+  return {
+    packageId: pkg.id,
+    packageName: pkg.name,
+    currentHostId: instance.host_id,
+    required: {
+      cpu: instance.cpu,
+      memory: instance.memory
+    },
+    hosts: hosts.sort((a, b) => {
+      if (a.isCurrent !== b.isCurrent) return a.isCurrent ? -1 : 1
+      if (a.canChange !== b.canChange) return a.canChange ? -1 : 1
+      return a.name.localeCompare(b.name)
+    }),
+    sshKeys: baseResponse.sshKeys,
+    canChangeHost: hasTarget && sshKeys.length > 0,
+    unavailableReason: hostIds.length <= 1
+      ? 'single_host'
+      : (sshKeys.length === 0 ? 'no_ssh_key' : undefined)
+  }
+}
+
+export default async function instanceRoutes(fastify: FastifyInstance) {
+  // 获取实例列表（支持分页和搜索）
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      userId?: string
+      hostId?: string
+      countryCode?: string
+      status?: string
+      sortBy?: string
+      sortOrder?: string
+    }
+  }>('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      userId?: string
+      hostId?: string
+      countryCode?: string
+      status?: string
+      sortBy?: string
+      sortOrder?: string
+    }
+  }>) => {
+    const { user } = request
+    const { page = '1', pageSize = '20', search = '', hostId, countryCode, status, sortBy, sortOrder } = request.query
+
+    const options: {
+      page: number
+      pageSize: number
+      search: string
+      status?: string
+      userId?: number
+      hostId?: number
+      countryCode?: string
+      sortBy?: string
+      sortOrder?: 'asc' | 'desc'
+    } = {
+      page: parseInt(page, 10),
+      pageSize: parseInt(pageSize, 10),
+      search,
+      status,
+      sortBy,
+      sortOrder: sortOrder === 'asc' || sortOrder === 'desc' ? sortOrder : undefined
+    }
+
+    if (countryCode) {
+      options.countryCode = countryCode.toLowerCase()
+    }
+
+    // 检查查询权限
+    const { userId: queryUserId } = request.query
+
+    // 标记是否应该显示用户信息（节点所有者或管理员查询时）
+    let showUserInfo = false
+
+    // 管理员可以查看所有实例
+    if (user.role === 'admin') {
+      showUserInfo = true
+      if (queryUserId) {
+        options.userId = parseInt(queryUserId, 10)
+      }
+      if (hostId) {
+        options.hostId = parseInt(hostId, 10)
+      }
+      // 管理员不指定 userId 和 hostId 时可以看所有实例
+    } else if (hostId) {
+      // 检查是否是节点所有者查看自己节点上的实例
+      options.hostId = parseInt(hostId, 10)
+      const host = await db.getHostById(options.hostId)
+      if (host && host.user_id === user.id) {
+        // 节点所有者可以看到该节点上所有实例，不限制 userId
+        showUserInfo = true
+      } else {
+        // 非节点所有者，只能看自己的实例
+        options.userId = user.id
+      }
+    } else {
+      // 没有指定 hostId 时，普通用户只能看自己的实例
+      options.userId = user.id
+    }
+
+    const result = await db.getInstancesPaginated(options)
+
+    return {
+      instances: result.items.map((i: unknown) => {
+        const instance = i as {
+          id: number
+          name: string
+          incus_id: string | null
+          status: string
+          image: string
+          image_name: string | null
+          cpu: number
+          memory: number
+          disk: number
+          ipv4: string | null
+          ipv6: string | null
+          host_name: string | null
+          host_id: number
+          host_country_code: string | null
+          host_nat_public_ip: string | null
+          host_ip_address: string | null
+          network_mode: string
+          username: string | null
+          user_email: string | null
+          user_avatar_style: string | null
+          user_avatar_badge_id: string | null
+          user_id: number
+          display_order: number
+          created_at: string
+          expires_at: string | null
+          auto_renew?: boolean
+          package_name: string | null
+          package_plan_id: number | null
+          icon_badge_id: string | null
+          billing_price: number | null
+          monthly_traffic_limit: string | null
+          monthly_traffic_used: string
+          allow_instance_deletion: boolean
+          port_limit: number | null
+          snapshot_limit: number | null
+          backup_limit: number | null
+          site_limit: number | null
+          package_instance_type: 'container' | 'vm' | 'both'
+        }
+        const response: {
+          id: number
+          name: string
+          incusId: string | null
+          status: string
+          image: string
+          imageName?: string | null
+          cpu: number
+          memory: number
+          disk: number
+          ipv4: string | null
+          ipv6: string | null
+          host: { name: string; country_code: string; nat_public_ip?: string | null; ip_address?: string | null }
+          hostCountryCode: string
+          networkMode: string
+          natPublicIp?: string | null
+          hostNatPublicIpv6?: string | null
+          hostIpv6Gateway?: string | null
+          hostIpAddress?: string | null
+          createdAt: string
+          expiresAt?: string | null
+          expires_at?: string | null
+          autoRenew?: boolean
+          username?: string | null
+          userEmail?: string | null
+          userAvatarStyle?: string | null
+          userId?: number
+          hostId?: number
+          packageName?: string | null
+          packagePlanId?: number | null
+          billingPrice?: number | null
+          monthlyTrafficLimit?: string | null
+          monthlyTrafficUsed?: string
+          allow_instance_deletion?: boolean
+          portLimit?: number | null
+          snapshotLimit?: number | null
+          backupLimit?: number | null
+          siteLimit?: number | null
+          instanceType?: 'container' | 'vm'
+          iconBadgeId?: string | null
+          userAvatarBadgeId?: string | null
+          displayOrder?: number
+        } = {
+          id: instance.id,
+          name: instance.name,
+          incusId: instance.incus_id,
+          status: instance.status,
+          image: instance.image,
+          imageName: instance.image_name || null,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          disk: instance.disk,
+          ipv4: instance.ipv4,
+          ipv6: instance.ipv6,
+          host: {
+            name: instance.host_name || 'unknown',
+            country_code: instance.host_country_code || 'us',
+            nat_public_ip: instance.host_nat_public_ip || null,
+            ip_address: instance.host_ip_address || null
+          },
+          hostCountryCode: instance.host_country_code || 'us',
+          networkMode: instance.network_mode,
+          natPublicIp: instance.host_nat_public_ip || null,
+          hostNatPublicIpv6: (instance as any).host_nat_public_ipv6 || null,
+          hostIpv6Gateway: (instance as any).host_ipv6_gateway || null,
+          hostIpAddress: instance.host_ip_address || null,
+          displayOrder: instance.display_order ?? 0,
+          createdAt: instance.created_at,
+          expiresAt: instance.expires_at,
+          expires_at: instance.expires_at,
+          autoRenew: instance.auto_renew ?? false,
+          iconBadgeId: (instance as { icon_badge_id?: string | null }).icon_badge_id ?? null,
+          packageName: instance.package_name || null,
+          packagePlanId: instance.package_plan_id || null,
+          billingPrice: instance.billing_price || null,
+          monthlyTrafficLimit: instance.monthly_traffic_limit || null,
+          monthlyTrafficUsed: instance.monthly_traffic_used || '0',
+          allow_instance_deletion: instance.allow_instance_deletion,
+          portLimit: instance.port_limit,
+          snapshotLimit: instance.snapshot_limit,
+          backupLimit: instance.backup_limit,
+          siteLimit: instance.site_limit,
+          // 实例类型：从套餐获取，默认为 container
+          instanceType: instance.package_instance_type === 'vm' ? 'vm' : 'container'
+        }
+
+        // Include user information for host owner or admin query
+        if (showUserInfo) {
+          response.username = instance.username
+          response.userEmail = instance.user_email
+          response.userAvatarStyle = instance.user_avatar_style
+          response.userAvatarBadgeId = (instance as { user_avatar_badge_id?: string | null }).user_avatar_badge_id ?? null
+          response.userId = instance.user_id
+          response.hostId = instance.host_id
+        }
+
+        return response
+      }),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      totalPages: result.totalPages,
+      availableCountries: result.availableCountries
+    }
+  })
+
+  // 调整我的实例显示顺序。只允许实例所有者调整自己的列表顺序。
+  fastify.patch<{
+    Params: { id: string }
+    Body: {
+      action: 'top' | 'up' | 'down' | 'bottom'
+    }
+  }>('/:id/order', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['id'],
+        properties: {
+          id: { type: 'string', pattern: '^[0-9]+$' }
+        },
+        additionalProperties: false
+      },
+      body: {
+        type: 'object',
+        required: ['action'],
+        properties: {
+          action: { type: 'string', enum: ['top', 'up', 'down', 'bottom'] }
+        },
+        additionalProperties: false
+      }
+    }
+  }, async (request, reply) => {
+    const instanceId = parseInt(request.params.id, 10)
+    if (!Number.isInteger(instanceId) || instanceId <= 0) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const result = await prisma.$transaction(async tx => {
+      const orderedInstances = await tx.instance.findMany({
+        where: {
+          userId: request.user.id,
+          status: { not: 'deleted' }
+        },
+        orderBy: [
+          { displayOrder: 'asc' },
+          { createdAt: 'desc' },
+          { id: 'asc' }
+        ],
+        select: { id: true }
+      })
+
+      const currentIndex = orderedInstances.findIndex(instance => instance.id === instanceId)
+      if (currentIndex < 0) {
+        return null
+      }
+
+      let targetIndex = currentIndex
+      if (request.body.action === 'top') targetIndex = 0
+      else if (request.body.action === 'up') targetIndex = currentIndex - 1
+      else if (request.body.action === 'down') targetIndex = currentIndex + 1
+      else targetIndex = orderedInstances.length - 1
+
+      targetIndex = Math.max(0, Math.min(targetIndex, orderedInstances.length - 1))
+      if (targetIndex === currentIndex) {
+        return { updated: 0 }
+      }
+
+      const nextOrder = [...orderedInstances]
+      const [moved] = nextOrder.splice(currentIndex, 1)
+      if (!moved) {
+        return { updated: 0 }
+      }
+      nextOrder.splice(targetIndex, 0, moved)
+
+      await Promise.all(nextOrder.map((instance, index) => tx.instance.update({
+        where: { id: instance.id },
+        data: { displayOrder: index * 1000 }
+      })))
+
+      return { updated: nextOrder.length }
+    })
+
+    if (result === null) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    return {
+      message: 'Instance order updated',
+      updated: result.updated
+    }
+  })
+
+  // 获取可用宿主机列表（用于创建实例时选择）
+  // 根据套餐所有权返回对应的节点：
+  // - 自己的套餐：返回自己的节点（完整信息）
+  // - 共享的套餐：返回套餐所有者的节点（部分信息）
+  // - 管理员：可以访问所有套餐的宿主机
+  fastify.get<{
+    Querystring: {
+      packageId?: string
+      planId?: string
+      cpu?: string
+      memory?: string
+      disk?: string
+    }
+  }>('/available-hosts', {
+    // 使用 authenticate 而非 authenticateUser，因为管理员后台也需要调用此接口
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      packageId?: string
+      planId?: string
+      cpu?: string
+      memory?: string
+      disk?: string
+    }
+  }>, reply) => {
+    const { packageId, planId, cpu = '15', memory = '128', disk = '512' } = request.query
+    const { user } = request
+    const isAdmin = user.role === 'admin'
+
+    let packageOwnerId: number | undefined = undefined
+
+    // 必须指定套餐
+    if (!packageId) {
+      return reply.code(400).send({ error: 'Package ID is required' })
+    }
+
+    const packageIdNum = Number(packageId)
+    if (!Number.isInteger(packageIdNum) || packageIdNum <= 0) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    let planIdNum: number | null = null
+    if (planId !== undefined) {
+      planIdNum = Number(planId)
+      if (!Number.isInteger(planIdNum) || planIdNum <= 0) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+      }
+    }
+
+    const pkg = await db.getPackageById(packageIdNum)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+
+    // 检查用户是否有权使用该套餐（管理员可以访问所有套餐）
+    if (!isAdmin) {
+      const canAccess = await db.canUserAccessPackage(user.id, packageIdNum)
+      if (!canAccess) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+    }
+
+    // 获取套餐绑定的宿主机ID列表
+    const packageHostIds = (pkg as { host_ids?: number[] }).host_ids || []
+    // 套餐必须至少绑定一个宿主机
+    if (packageHostIds.length === 0) {
+      return reply.code(400).send({ error: 'Package must bind at least one host', code: 'PACKAGE_NO_HOSTS' })
+    }
+
+    // 判断是自己的套餐还是共享的套餐
+    if (pkg.user_id !== user.id) {
+      // 共享的套餐，返回套餐所有者的节点
+      packageOwnerId = pkg.user_id!
+    }
+
+    const hosts = await db.getAvailableHosts(
+      packageHostIds.length > 0 ? packageHostIds : null,
+      parseInt(cpu, 10),
+      parseInt(memory, 10),
+      parseInt(disk, 10),
+      {
+        userId: user.id,
+        packageOwnerId
+      }
+    )
+
+    let baseTrafficLimit = pkg.monthly_traffic_limit ? BigInt(pkg.monthly_traffic_limit) : null
+    if (planIdNum !== null) {
+      const selectedPlan = await getPlanById(planIdNum)
+      if (selectedPlan && selectedPlan.packageId === packageIdNum) {
+        baseTrafficLimit = selectedPlan.trafficLimit
+      }
+    }
+    const hostTrafficMultipliers = (pkg as { host_traffic_multipliers?: Record<string, number> }).host_traffic_multipliers || {}
+
+    return {
+      hosts: hosts.map((h: unknown) => {
+        const host = h as {
+          id: number
+          user_id: number
+          owner_username: string | null
+          is_own: boolean
+          name: string
+          location: string | null
+          country_code: string | null
+          architecture?: 'x86_64' | 'aarch64'
+          cpu_used: number
+          cpu_allowance_max?: number
+          memory_used: number
+          memory_max?: number
+          disk_used: number
+          storage_size?: number
+          probe_url?: string | null
+        }
+        // 计算CPU额配可用量
+        // 只使用用户配置的配额，不使用物理资源
+        const cpuAllowanceMax = host.cpu_allowance_max || 0
+        const cpuUsed = host.cpu_used || 0
+        // 如果设置了CPU配额则使用配额，否则可用量为0（必须设置配额）
+        const effectiveCpuMax = cpuAllowanceMax > 0 ? cpuAllowanceMax : 0
+        const cpuAvailable = Math.max(0, effectiveCpuMax - cpuUsed)
+
+        // 计算内存可用量
+        // 只使用用户配置的配额，不使用物理资源
+        const memoryMax = host.memory_max || 0
+        const memoryUsed = host.memory_used || 0
+        // 如果设置了内存配额则使用配额，否则可用量为0（必须设置配额）
+        const memoryAvailable = memoryMax > 0 ? Math.max(0, memoryMax - memoryUsed) : 0
+
+        return {
+          id: host.id,
+          name: host.name,
+          location: host.location,
+          countryCode: host.country_code || 'us',
+          architecture: host.architecture || 'x86_64',
+          // 节点所有者信息
+          ownerId: host.user_id,
+          ownerUsername: host.owner_username,
+          isOwn: host.is_own,
+          resources: {
+            cpuUsed: cpuUsed,
+            cpuAllowanceMax: cpuAllowanceMax,
+            cpuEffectiveMax: effectiveCpuMax,
+            cpuAvailable: cpuAvailable,
+            memoryUsed: memoryUsed,
+            memoryMax: memoryMax,
+            memoryAvailable: memoryAvailable,
+            diskTotal: host.storage_size ? host.storage_size * 1024 : 0, // 使用创建时输入的存储大小（GB转MB），如果没有则不可用
+            diskAvailable: host.storage_size ? Math.max(0, (host.storage_size * 1024) - (host.disk_used || 0)) : 0
+          },
+          trafficMultiplier: normalizeTrafficMultiplier(hostTrafficMultipliers[String(host.id)] ?? 1),
+          effectiveTrafficLimit: applyTrafficMultiplier(baseTrafficLimit, hostTrafficMultipliers[String(host.id)] ?? 1)?.toString() ?? null,
+          probeUrl: host.probe_url || null
+        }
+      })
+    }
+  })
+
+  /**
+   * 创建实例
+   * 安全措施：速率限制
+   */
+  fastify.post<{
+    Body: {
+      name: string
+      packageId: number
+      planId?: number  // 付费方案ID
+      image: string
+      cpu?: number
+      memory?: number
+      disk?: number
+      hostId: number
+      sshKeyId?: number
+      sshKey?: string
+      password?: string
+      customInitCommandIds?: number[]  // 用户自定义初始化命令 ID 列表
+      promoCode?: string  // AFF 优惠码
+    }
+  }>('/', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'packageId', 'image', 'hostId'],
+        properties: {
+          name: { type: 'string', minLength: 2, maxLength: 64 },
+          packageId: { type: 'integer' },
+          image: { type: 'string' },
+          cpu: { type: 'integer', minimum: 15, maximum: 10000 },
+          memory: { type: 'integer', minimum: 128, maximum: 524288 },
+          disk: { type: 'integer', minimum: 512, maximum: 104857600 },
+          hostId: { type: 'integer', minimum: 1 },
+          sshKeyId: { type: 'integer' },
+          sshKey: { type: 'string' },
+          password: { type: 'string' },
+          customInitCommandIds: { type: 'array', items: { type: 'integer' }, maxItems: 20 },
+          promoCode: { type: 'string', maxLength: 32 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Body: {
+      name: string
+      packageId: number
+      planId?: number  // 付费方案ID
+      image: string
+      cpu?: number
+      memory?: number
+      disk?: number
+      hostId: number
+      sshKeyId?: number
+      sshKey?: string
+      password?: string
+      customInitCommandIds?: number[]
+      promoCode?: string  // AFF 优惠码
+    }
+  }>, reply: FastifyReply) => {
+    const { name, packageId, planId, image, cpu, memory, disk, hostId, sshKeyId, customInitCommandIds, promoCode } = request.body
+    let { sshKey } = request.body
+    const { user } = request
+
+    // ==================== 阶段一: 验证与校验 ====================
+
+    // 验证实例名称（防止危险字符注入）
+    const nameValidation = validateName(name, 'Instance name', 2, 64)
+    if (!nameValidation.valid) {
+      return reply.code(400).send({ error: nameValidation.message })
+    }
+
+    // 0. 处理 SSH 密钥：支持 sshKeyId 或直接传 sshKey
+    if (sshKeyId && !sshKey) {
+      const keyRecord = await db.getSSHKeyById(sshKeyId)
+      if (!keyRecord || keyRecord.user_id !== user.id) {
+        return reply.code(400).send(apiError(ErrorCode.SSH_KEY_NOT_OWNED))
+      }
+      sshKey = keyRecord.public_key
+    }
+
+    // 1. 验证套餐是否存在且可用
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg || !pkg.active) {
+      return reply.code(400).send(apiError(ErrorCode.PACKAGE_UNAVAILABLE))
+    }
+
+    // 1.1 检查用户是否有权使用该套餐（自己的套餐或共享给自己的套餐）
+    const canAccessPackage = await db.canUserAccessPackage(user.id, packageId)
+    if (!canAccessPackage) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const requiredPackageId = (pkg as typeof pkg & { required_package_id?: number | null }).required_package_id ?? null
+    if (requiredPackageId !== null) {
+      const hasRequiredPackageInstance = await db.userHasNormalInstanceForPackage(user.id, requiredPackageId)
+      if (!hasRequiredPackageInstance) {
+        const requiredPackageName = (pkg as typeof pkg & { required_package_name?: string | null }).required_package_name || `#${requiredPackageId}`
+        return reply.code(400).send(apiError(
+          ErrorCode.PACKAGE_PREREQUISITE_MISSING,
+          `必须持有 ${requiredPackageName} 实例才可以开通本套餐的实例`
+        ))
+      }
+    }
+
+    // 1.2 如果是共享套餐，初步检查共享配额限制（快速失败）
+    // 注意：完整的配额检查将在事务中进行，这里只是初步验证以减少无效请求
+    const isOwnPackage = pkg.user_id === user.id
+    let shareInfo: { quotaMultiplier: number | null; maxInstances: number | null } | null = null
+    if (!isOwnPackage) {
+      shareInfo = await db.getPackageShareForUser(packageId, user.id)
+      if (shareInfo) {
+        // 初步检查：maxInstances = 0 表示不允许创建实例
+        if (shareInfo.maxInstances === 0) {
+          return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_INSTANCES_EXCEEDED,
+            '该套餐的实例数量限制为 0，不允许创建实例'))
+        }
+
+        // 获取已使用的配额（初步检查，完整检查在事务中）
+        const usage = await db.getSharedPackageUsage(packageId, user.id)
+
+        // 检查实例数量限制（排除 0，因为已经在上面检查了）
+        if (shareInfo.maxInstances !== null && shareInfo.maxInstances > 0 && usage.instanceCount >= shareInfo.maxInstances) {
+          return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_INSTANCES_EXCEEDED,
+            `已开通 ${usage.instanceCount}/${shareInfo.maxInstances} 台`))
+        }
+
+        // 检查 CPU/内存配额限制
+        if (shareInfo.quotaMultiplier !== null) {
+          const maxCpu = Math.floor(pkg.cpu_max * shareInfo.quotaMultiplier)
+          const maxMemory = Math.floor(pkg.memory_max * shareInfo.quotaMultiplier)
+          const requestedCpuCheck = cpu || 15
+          const requestedMemoryCheck = memory || 128
+
+          if (usage.totalCpu + requestedCpuCheck > maxCpu) {
+            return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_CPU_EXCEEDED,
+              `已使用 ${usage.totalCpu}%，限额 ${maxCpu}%`))
+          }
+
+          if (usage.totalMemory + requestedMemoryCheck > maxMemory) {
+            return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_MEMORY_EXCEEDED,
+              `已使用 ${usage.totalMemory}MB，限额 ${maxMemory}MB`))
+          }
+        }
+      }
+    }
+
+    // 1.3 验证付费方案（如果提供了 planId）
+    let selectedPlan: Awaited<ReturnType<typeof getPlanById>> = null
+    const packageIsPaid = await isPaidPackage(packageId)
+
+    // 检查是否是节点所有者在自己节点上创建免费实例（绕过付费方案检查）
+    // 条件：套餐是自己的 + 指定了节点 + 该节点属于自己 + 没有提供 planId
+    let isHostOwnerCreatingFree = false
+    if (isOwnPackage && hostId && !planId) {
+      const specifiedHost = await db.getHostById(hostId)
+      if (specifiedHost && specifiedHost.user_id === user.id) {
+        isHostOwnerCreatingFree = true
+      }
+    }
+
+    if (packageIsPaid && !isHostOwnerCreatingFree) {
+      // 付费套餐必须提供 planId（除非是节点所有者在自己节点上创建免费实例）
+      if (!planId) {
+        return reply.code(400).send(apiError(ErrorCode.PLAN_REQUIRED, '该套餐为付费套餐，必须选择一个方案'))
+      }
+
+      selectedPlan = await getPlanById(planId)
+      if (!selectedPlan || selectedPlan.packageId !== packageId) {
+        return reply.code(400).send(apiError(ErrorCode.PLAN_NOT_FOUND, '方案不存在或不属于该套餐'))
+      }
+
+      if (!selectedPlan.isActive) {
+        return reply.code(400).send(apiError(ErrorCode.PLAN_INACTIVE, '方案已下架'))
+      }
+      if (selectedPlan.isSoldOut) {
+        return reply.code(400).send(apiError(ErrorCode.PLAN_SOLD_OUT, '方案已售罄'))
+      }
+    } else if (planId && !isHostOwnerCreatingFree) {
+      // 免费套餐不应该提供 planId
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '该套餐为免费套餐，不需要选择方案'))
+    }
+
+    // 1.3.1 禁止用户自己开通自己的付费套餐
+    // 规则：套餐是自己的 + 套餐是付费的 + 不是节点所有者在自己节点上创建免费实例
+    if (isOwnPackage && packageIsPaid && !isHostOwnerCreatingFree) {
+      return reply.code(400).send(apiError(ErrorCode.CANNOT_CREATE_OWN_PAID_PACKAGE, '不能使用自己的付费套餐创建实例'))
+    }
+
+    // 1.4 计算费用并验证余额（付费方案）
+    let billing: ReturnType<typeof calculateCreateBilling> | null = null
+    let validatedAffCode: { id: number; userId: number; discountRate: number } | null = null
+    let discountAmount = 0
+    let finalPrice = 0
+    let actualPrice = 0
+
+    if (selectedPlan) {
+      billing = calculateCreateBilling(selectedPlan)
+      finalPrice = billing.totalPrice
+      actualPrice = billing.totalPrice
+
+      // 1.4.1 如果提供了优惠码，验证并计算折扣
+      if (promoCode && promoCode.trim()) {
+        const validation = await db.validateAffCode(promoCode.trim(), selectedPlan.id, user.id)
+        if (!validation.valid) {
+          return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, validation.error || '优惠码无效'))
+        }
+        validatedAffCode = {
+          id: validation.affCode!.id,
+          userId: validation.affCode!.userId,
+          discountRate: validation.discountRate!
+        }
+        // 计算折扣金额（折扣应用于方案价格）
+        discountAmount = calculateDiscountAmount(billing.price, validatedAffCode.discountRate)
+        finalPrice = Number((billing.totalPrice - discountAmount).toFixed(2))
+        actualPrice = finalPrice
+      }
+
+      const userBalance = await getUserBalance(user.id)
+      if (userBalance < actualPrice) {
+        return reply.code(400).send(apiError(ErrorCode.BALANCE_INSUFFICIENT,
+          `余额不足，需要 ¥${actualPrice.toFixed(2)}，当前余额 ¥${userBalance.toFixed(2)}`))
+      }
+    }
+
+    // 2. 确定请求的资源
+    // 如果是付费方案，使用方案的固定资源配置
+    // 如果是免费套餐，使用用户请求的资源或默认值
+    const requestedCpu = selectedPlan ? selectedPlan.cpu : (cpu || 15)
+    const requestedMemory = selectedPlan ? selectedPlan.memory : (memory || 128)
+    const requestedDisk = selectedPlan ? selectedPlan.disk : (disk || 512)
+
+    // 注意：能否开通实例只跟宿主机的资源有关，不检查套餐包资源限制
+    // 宿主机资源检查在 selectAvailableHost 中进行
+
+    // 3. 验证认证方式（必须提供 SSH 公钥）
+    // 注意：不再限制用户的实例配额，用户可以创建无限数量的实例
+    if (!sshKey) {
+      return reply.code(400).send(apiError(ErrorCode.SSH_KEY_REQUIRED))
+    }
+
+    // 5. 验证镜像是否在预设列表中
+    if (!await isValidSystemImage(image)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+    }
+
+    // 5.1 验证镜像类型与套餐类型的兼容性（安全验证）
+    const pkgInstanceType = (pkg as typeof pkg & { instance_type?: 'container' | 'vm' }).instance_type || 'container'
+    if (!await isImageCompatibleWithInstanceType(image, pkgInstanceType)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_TYPE_MISMATCH))
+    }
+
+    // 5.2 验证镜像与内存配置的兼容性（128MB 只允许 Alpine/Debian）
+    if (!await isImageCompatibleWithMemory(image, requestedMemory)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+    }
+
+    // 6. 镜像别名（直接使用远程别名，Incus 会自动下载）
+    const imageAlias = image
+
+    // ==================== 阶段二: 智能调度（预筛选，快速失败） ====================
+
+    console.log(`\n========== Instance Scheduling ==========`)
+    console.log(`Package: ${pkg.name} (ID: ${pkg.id})`)
+    const packageHostIds = (pkg as { host_ids?: number[] }).host_ids || []
+    console.log(`Package bound hosts: ${packageHostIds.length > 0 ? packageHostIds.join(', ') : 'all owner hosts'}`)
+    console.log(`Requested resources: CPU=${requestedCpu}%, Memory=${requestedMemory}MB, Disk=${requestedDisk}MB`)
+    console.log(`User specified host: ${hostId}`)
+
+    // 先获取所有节点，用于调试
+    const allHosts = await db.getAllHosts()
+    console.log(`\nTotal ${allHosts.length} hosts in system`)
+    for (const h of allHosts) {
+      const hostWithExtras = h as Host & { cpu_allowance_max?: number; memory_max?: number; storage_size?: number }
+      console.log(`  - ${h.name}: status=${h.status}`)
+      console.log(`    资源: cpu_used=${h.cpu_used}, cpu_allowance_max=${hostWithExtras.cpu_allowance_max || 0}`)
+      console.log(`          mem_used=${h.memory_used}, memory_max=${hostWithExtras.memory_max || 0}`)
+      console.log(`          storage_size=${hostWithExtras.storage_size || 0}GB, disk_used=${h.disk_used}MB`)
+    }
+
+    // 选择最佳宿主机（预筛选，用于快速失败和获取候选宿主机信息）
+    // 注意：这里只是预检查，实际的资源预占在事务中完成
+    // 安全：必须传入套餐所有者ID，确保实例只能创建在套餐所有者的宿主机上
+    const pkgWithExtras = pkg as typeof pkg & { node_selectors?: string }
+    const preCheckHost = await db.selectAvailableHost({
+      packageHostIds: packageHostIds.length > 0 ? packageHostIds : undefined,
+      nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+      cpu: requestedCpu,
+      memory: requestedMemory,
+      disk: requestedDisk,
+      hostId: hostId,
+      ownerId: pkg.user_id!  // 套餐所有者ID，限制只能在其宿主机上创建实例
+    })
+
+    console.log(`Pre-check result: ${preCheckHost ? preCheckHost.name : 'No available host'}`)
+    console.log(`========================================\n`)
+
+    if (!preCheckHost) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_UNAVAILABLE))
+    }
+
+    // 校验套餐实例类型与节点支持的类型是否兼容
+    // 套餐: container/vm, 节点: container/vm/both
+    // pkgInstanceType 已在前面定义（镜像类型验证时）
+    const hostInstanceType = preCheckHost.instance_type || 'container'
+    // 套餐实例类型只能是 container 或 vm，直接使用
+    const effectiveInstanceType = pkgInstanceType
+
+    if (effectiveInstanceType === 'vm' && hostInstanceType === 'container') {
+      // 套餐要求 VM，但节点只支持容器
+      return reply.code(400).send(apiError(ErrorCode.HOST_INSTANCE_TYPE_MISMATCH))
+    }
+    if (effectiveInstanceType === 'container' && hostInstanceType === 'vm') {
+      // 套餐要求容器，但节点只支持 VM
+      return reply.code(400).send(apiError(ErrorCode.HOST_INSTANCE_TYPE_MISMATCH))
+    }
+    // 节点是 'both' 时，任何套餐类型都兼容
+
+    const hostImageAvailability = await getSystemImageAvailabilityForHost(imageAlias, preCheckHost.id, {
+      instanceType: effectiveInstanceType,
+      memory: requestedMemory
+    })
+    if (!hostImageAvailability.ok) {
+      switch (hostImageAvailability.reason) {
+        case 'host_not_found':
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        case 'image_not_found':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+        case 'memory_incompatible':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+        case 'instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_TYPE_MISMATCH))
+        case 'host_instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.HOST_INSTANCE_TYPE_MISMATCH))
+        default:
+          return reply.code(400).send(apiError(ErrorCode.INSTANCE_IMAGE_UNAVAILABLE))
+      }
+    }
+
+    // 用户托管节点不允许使用优惠码（托管节点命名前四位固定为 peer）
+    if (validatedAffCode && preCheckHost.name.toLowerCase().startsWith('peer')) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '用户托管节点不支持使用优惠码'))
+    }
+
+    // 镜像别名直接使用（数据库中已包含完整路径如 images:almalinux/8/cloud）
+    const actualImageAlias = imageAlias
+
+    // 获取网络模式
+    const networkMode = (pkg.network_mode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+    console.log(`[Provisioning] Network mode from package: ${networkMode}`)
+    if (effectiveInstanceType === 'vm' && ['nat_ipv6_nat', 'ipv6_nat'].includes(networkMode)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'KVM instances do not support IPv4 NAT & IPv6 NAT or IPv6 NAT package network modes'))
+    }
+
+    // ==================== 阶段 2.5: 验证用户自定义初始化命令 =====================
+    let extraShellCommands: string | undefined
+    if (customInitCommandIds && customInitCommandIds.length > 0) {
+      // 验证命令所有权和启用状态
+      const cmdValidation = await validateCommandsOwnership(customInitCommandIds, user.id)
+      if (!cmdValidation.valid) {
+        return reply.code(400).send({ error: 'Invalid custom init command IDs', code: 'INVALID_COMMAND_IDS' })
+      }
+
+      // 验证命令是否适配当前发行版
+      const imageDistro = getImageDistroFromAlias(actualImageAlias)
+      const compatibleCmds = cmdValidation.commands.filter(cmd => {
+        return cmd.distros.includes('all') || cmd.distros.includes(imageDistro)
+      })
+
+      // 如果有不兼容的命令，跳过它们（不报错，只用兼容的）
+      if (compatibleCmds.length > 0) {
+        extraShellCommands = mergeCommandContents(compatibleCmds)
+        console.log(`[Provisioning] 应用 ${compatibleCmds.length} 条自定义初始化命令`)
+      }
+    }
+
+    // ==================== 阶段三: 生成配置 =====================
+    // SSH 端口固定为 22（不再使用随机端口）
+    const autoPassword = generateRandomPassword(16)
+    const { configPayload, metaData } = generateIncusConfig({
+      instanceName: name,
+      imageAlias: actualImageAlias,
+      rootPassword: autoPassword,
+      sshKey: sshKey,
+      networkMode,
+      type: effectiveInstanceType === 'vm' ? 'virtual-machine' : 'container',
+      extraShellCommands
+    })
+
+    // ==================== 阶段四: 标识符生成 ====================
+    const shortId = nanoid()
+    const incusId = `u${user.id}-${shortId}`
+
+    // ==================== 阶段五: 原子性资源预占和实例创建 ====================
+    // 使用带行锁的事务确保并发安全
+    // 关键改进：将宿主机选择、资源预占、实例创建合并到同一个事务中
+
+    const snapshotSpecs = {
+      packageId: pkg.id,
+      packageName: pkg.name,
+      cpuMax: pkg.cpu_max,
+      memoryMax: pkg.memory_max,
+      diskMax: pkg.disk_max,
+      networkMode,
+      portLimit: pkgWithExtras.port_limit || 20,
+      nested: Boolean(pkg.nested),
+      privileged: Boolean(pkg.privileged),
+      nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+      createdAt: new Date().toISOString()
+    }
+
+    // 获取套餐的流量限额
+    const packageTrafficLimit = pkg.monthly_traffic_limit ? BigInt(pkg.monthly_traffic_limit) : null
+
+    // 从套餐继承配额值
+    const pkgQuota = pkg as typeof pkg & { port_limit?: number; snapshot_limit?: number; backup_limit?: number; site_limit?: number }
+
+    // ==================== 使用带行锁的事务确保并发安全 ====================
+    const { Prisma } = await import('@prisma/client')
+    let instanceId: number
+    let host: Awaited<ReturnType<typeof db.selectAndReserveHostWithLock>>
+    let staticIPv4: string | null = null
+    let staticIPv6: string | null = null
+    let selectedStoragePool: string | null = null
+    let planBandwidthLimit: string | null = null  // 方案带宽限制（事务中计算）
+
+    try {
+      const result = await prisma.$transaction(async (tx) => {
+        // →→→ 第一步：在事务中使用行锁选择并预占宿主机资源 ←←←
+        const lockedHost = await db.selectAndReserveHostWithLock(tx, {
+          packageHostIds: packageHostIds.length > 0 ? packageHostIds : undefined,
+          nodeSelectors: JSON.parse(pkgWithExtras.node_selectors || '[]'),
+          cpu: requestedCpu,
+          memory: requestedMemory,
+          disk: requestedDisk,
+          hostId: hostId,
+          ownerId: pkg.user_id!,
+          portCount: ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(networkMode) ? (pkgWithExtras.port_limit || 0) : 0
+        })
+
+        if (!lockedHost) {
+          throw new Error('HOST_RESOURCES_INSUFFICIENT: 宿主机资源不足或已被其他请求占用')
+        }
+
+        console.log(`[Provisioning] 宿主机资源预占成功: ${lockedHost.name}`)
+
+        if (requiredPackageId !== null) {
+          const txHasRequiredPackageInstance = await db.userHasNormalInstanceForPackage(user.id, requiredPackageId, tx as any)
+          if (!txHasRequiredPackageInstance) {
+            const requiredPackageName = (pkg as typeof pkg & { required_package_name?: string | null }).required_package_name || `#${requiredPackageId}`
+            throw new Error(`PACKAGE_PREREQUISITE_MISSING: 必须持有 ${requiredPackageName} 实例才可以开通本套餐的实例`)
+          }
+        }
+
+        // →→→ 第二步：检查共享配额限制 ←←←
+        if (!isOwnPackage && shareInfo) {
+          const txShareInfo = await db.getPackageShareForUser(packageId, user.id, tx as any)
+          if (txShareInfo) {
+            const txUsage = await db.getSharedPackageUsage(packageId, user.id, tx as any)
+
+            if (txShareInfo.maxInstances !== null) {
+              if (txShareInfo.maxInstances === 0) {
+                throw new Error('SHARE_QUOTA_INSTANCES_EXCEEDED: 该套餐的实例数量限制为 0，不允许创建实例')
+              }
+              if (txUsage.instanceCount >= txShareInfo.maxInstances) {
+                throw new Error(`SHARE_QUOTA_INSTANCES_EXCEEDED: 已开通 ${txUsage.instanceCount}/${txShareInfo.maxInstances} 台`)
+              }
+            }
+
+            if (txShareInfo.quotaMultiplier !== null) {
+              const maxCpu = Math.floor(pkg.cpu_max * txShareInfo.quotaMultiplier)
+              const maxMemory = Math.floor(pkg.memory_max * txShareInfo.quotaMultiplier)
+              const requestedCpuCheck = cpu || 15
+              const requestedMemoryCheck = memory || 128
+
+              if (txUsage.totalCpu + requestedCpuCheck > maxCpu) {
+                throw new Error(`SHARE_QUOTA_CPU_EXCEEDED: 已使用 ${txUsage.totalCpu}%，限额 ${maxCpu}%`)
+              }
+
+              if (txUsage.totalMemory + requestedMemoryCheck > maxMemory) {
+                throw new Error(`SHARE_QUOTA_MEMORY_EXCEEDED: 已使用 ${txUsage.totalMemory}MB，限额 ${maxMemory}MB`)
+              }
+            }
+          }
+        }
+
+        // →→→ 第三步：如果是付费方案，扣除余额并记录日志 ←←←
+        let balanceLogId: number | undefined
+        if (selectedPlan && billing) {
+          // 获取当前余额
+          const userRecord = await tx.user.findUnique({
+            where: { id: user.id },
+            select: { balance: true }
+          })
+          if (!userRecord) {
+            throw new Error('USER_NOT_FOUND: 用户不存在')
+          }
+
+          const balanceBefore = Number(userRecord.balance)
+          const balanceAfter = Number((balanceBefore - actualPrice).toFixed(2))
+
+          // 再次检查余额（事务内双重检查）
+          if (balanceAfter < 0) {
+            throw new Error('BALANCE_INSUFFICIENT: 余额不足')
+          }
+
+          // 扣除余额
+          await tx.user.update({
+            where: { id: user.id },
+            data: { balance: balanceAfter }
+          })
+
+          // 记录余额日志
+          const remarkText = discountAmount > 0
+            ? `开通实例（${billing.billingCycle}个月）：${pkg.name} - ${selectedPlan.name}，优惠码折扣 -¥${discountAmount.toFixed(2)}`
+            : `开通实例（${billing.billingCycle}个月）：${pkg.name} - ${selectedPlan.name}`
+
+          const balanceLog = await tx.balanceLog.create({
+            data: {
+              userId: user.id,
+              type: 'consume',
+              amount: -actualPrice,
+              balanceBefore,
+              balanceAfter,
+              remark: remarkText
+            }
+          })
+          balanceLogId = balanceLog.id
+        }
+
+        // →→→ 第四步：创建实例记录 ←←←
+        // 如果是付费方案，使用方案的配额限制；否则使用套餐配额
+        // 带宽限制：付费方案优先使用方案的 trafficLimitSpeed
+        let planBandwidthLimit: string | null = null
+        if (selectedPlan?.trafficLimitSpeed && selectedPlan.trafficLimitSpeed !== '0') {
+          const bytes = BigInt(selectedPlan.trafficLimitSpeed)
+          const MB = BigInt(1024 * 1024)
+          const mbps = Number(bytes / MB)
+          if (mbps > 0) {
+            planBandwidthLimit = `${mbps}Mbit`
+          }
+        }
+
+        const baseMonthlyTrafficLimit = selectedPlan ? selectedPlan.trafficLimit : packageTrafficLimit
+        const effectiveMonthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(tx as any, {
+          packageId,
+          hostId: lockedHost.id,
+          baseTrafficLimit: baseMonthlyTrafficLimit
+        })
+
+        const instanceQuota = selectedPlan ? {
+          portLimit: selectedPlan.portLimit,
+          snapshotLimit: selectedPlan.snapshotLimit,
+          backupLimit: selectedPlan.backupLimit,
+          siteLimit: selectedPlan.siteLimit,
+          swapSize: effectiveInstanceType === 'container' ? selectedPlan.swapSize : null,
+          monthlyTrafficLimit: effectiveMonthlyTrafficLimit,
+          limitsIngress: planBandwidthLimit,
+          limitsEgress: planBandwidthLimit
+        } : {
+          portLimit: pkgQuota.port_limit ?? null,
+          snapshotLimit: pkgQuota.snapshot_limit ?? null,
+          backupLimit: pkgQuota.backup_limit ?? null,
+          siteLimit: pkgQuota.site_limit ?? null,
+          swapSize: null as number | null,
+          monthlyTrafficLimit: effectiveMonthlyTrafficLimit,
+          limitsIngress: null as string | null,
+          limitsEgress: null as string | null
+        }
+
+        const instance = await tx.instance.create({
+          data: {
+            incusId,
+            name,
+            userId: user.id,
+            hostId: lockedHost.id,
+            packageId,
+            packagePlanId: selectedPlan?.id ?? null,
+            image,
+            cpu: requestedCpu,
+            memory: requestedMemory,
+            disk: requestedDisk,
+            networkMode,
+            snapshottedSpecs: snapshotSpecs as any,
+            sshPort: metaData.sshPort,
+            rootPassword: encryptSensitiveData(metaData.rootPassword),
+            status: 'creating',
+            monthlyTrafficLimit: instanceQuota.monthlyTrafficLimit,
+            portLimit: instanceQuota.portLimit,
+            snapshotLimit: instanceQuota.snapshotLimit,
+            backupLimit: instanceQuota.backupLimit,
+            siteLimit: instanceQuota.siteLimit,
+            swapEnabled: false,
+            swapSize: instanceQuota.swapSize,
+            limitsIngress: instanceQuota.limitsIngress,
+            limitsEgress: instanceQuota.limitsEgress,
+            // 计费信息（付费方案）
+            expiresAt: billing?.expiresAt ?? null,
+            billingPrice: billing?.price ?? null,
+            billingCycle: billing?.billingCycle ?? null,
+            autoRenew: false
+          }
+        })
+
+        // 更新余额日志，添加 instanceId（因为创建时实例还不存在）
+        if (balanceLogId) {
+          await tx.balanceLog.update({
+            where: { id: balanceLogId },
+            data: { instanceId: instance.id }
+          })
+        }
+
+        // 如果是付费方案，创建计费记录
+        if (selectedPlan && billing) {
+          // 创建计费记录
+          await tx.instanceBillingRecord.create({
+            data: {
+              instanceId: instance.id,
+              userId: user.id,
+              type: 'newPurchase',
+              amount: actualPrice,
+              months: billing.billingCycle,
+              periodStart: new Date(),
+              periodEnd: billing.expiresAt,
+              balanceLogId,
+              remark: discountAmount > 0
+                ? `新开通 ${billing.billingCycle} 个月，优惠码折扣 -¥${discountAmount.toFixed(2)}`
+                : `新开通 ${billing.billingCycle} 个月`
+            }
+          })
+
+          // 如果使用了优惠码，创建 AFF 绑定并处理返利
+          if (validatedAffCode) {
+            // 创建实例与优惠码的永久绑定
+            await db.createAffBinding(instance.id, validatedAffCode.id, tx as any)
+
+            // 给优惠码创建者返利（基于原价，不是折扣后价格）
+            await db.processAffCommission(
+              validatedAffCode.id,
+              instance.id,
+              billing.price, // 原价
+              'new_purchase',
+              tx as any
+            )
+          }
+
+          // 处理托管收入结算（用户托管节点）
+          const hostingIncomeResult = await db.processHostingIncome(
+            lockedHost.id,
+            actualPrice,
+            instance.id,
+            'purchase',
+            tx
+          )
+
+          return { instanceId: instance.id, host: lockedHost, hostingIncomeResult, actualPrice, planBandwidthLimit }
+        }
+
+        return { instanceId: instance.id, host: lockedHost, hostingIncomeResult: null, actualPrice: 0, planBandwidthLimit }
+      }, {
+        isolationLevel: Prisma.TransactionIsolationLevel.Serializable,
+        timeout: 15000  // 增加超时时间，因为包含行锁操作
+      })
+
+      instanceId = result.instanceId
+      host = result.host
+      planBandwidthLimit = result.planBandwidthLimit
+
+      // 事务完成后，发送托管收入通知（仅发送到外部渠道，不创建站内信）
+      if (result.hostingIncomeResult) {
+        sendHostManagedInstanceNotification(
+          result.host.id,
+          'purchase',
+          {
+            username: user.username,
+            instanceName: name,
+            amount: result.actualPrice
+          }
+        ).catch(err => {
+          console.error('[Provisioning] 发送托管收入通知失败:', err)
+        })
+      }
+
+      // 事务完成后，向套餐绑定的通知渠道发送"新购到达"通知
+      if (packageId && selectedPlan) {
+        ; (async () => {
+          try {
+            const { sendToChannel } = await import('../lib/notifier.js')
+            const globalChannel = await prisma.notificationChannel.findFirst({
+              where: { isGlobal: true },
+              select: { id: true }
+            })
+            if (globalChannel) {
+              const pkgInfo = await db.getPackageById(packageId)
+              const formatMem = (mb: number) => mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`
+              const notifyTitle = `🛒 新购到达 - ${pkgInfo?.name || 'Unknown'}`
+              const notifyMessage = [
+                `+${requestedCpu}% CPU / +${formatMem(requestedMemory)} 内存`,
+                '',
+                `⏰ ${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}`
+              ].join('\n')
+              const pkgOwner = pkgInfo?.user_id
+                ? await prisma.user.findUnique({ where: { id: pkgInfo.user_id }, select: { role: true } })
+                : null
+              const pkgSource = pkgOwner?.role === 'admin' ? 'official' : 'market'
+              const buyLink = process.env.SITE_URL
+                ? { label: '📦 查看套餐', url: `${process.env.SITE_URL}/instances/create?source=${pkgSource}&package=${packageId}` }
+                : undefined
+              await sendToChannel(globalChannel.id, notifyTitle, notifyMessage, buyLink)
+            }
+          } catch {
+            // 通知发送失败不影响主流程
+          }
+        })()
+      }
+    } catch (err: any) {
+      const errorMessage = err?.message || String(err)
+
+      // 处理宿主机资源不足错误
+      if (errorMessage.includes('HOST_RESOURCES_INSUFFICIENT')) {
+        return reply.code(503).send(apiError(ErrorCode.HOST_RESOURCES_INSUFFICIENT,
+          '宿主机资源不足或已被其他请求占用，请稍后重试'))
+      }
+
+      // 处理配额检查错误
+      if (errorMessage.includes('PACKAGE_PREREQUISITE_MISSING')) {
+        return reply.code(400).send(apiError(ErrorCode.PACKAGE_PREREQUISITE_MISSING,
+          errorMessage.replace('PACKAGE_PREREQUISITE_MISSING: ', '')))
+      }
+      if (errorMessage.includes('SHARE_QUOTA_INSTANCES_EXCEEDED')) {
+        return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_INSTANCES_EXCEEDED,
+          errorMessage.replace('SHARE_QUOTA_INSTANCES_EXCEEDED: ', '')))
+      }
+      if (errorMessage.includes('SHARE_QUOTA_CPU_EXCEEDED')) {
+        return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_CPU_EXCEEDED,
+          errorMessage.replace('SHARE_QUOTA_CPU_EXCEEDED: ', '')))
+      }
+      if (errorMessage.includes('SHARE_QUOTA_MEMORY_EXCEEDED')) {
+        return reply.code(400).send(apiError(ErrorCode.SHARE_QUOTA_MEMORY_EXCEEDED,
+          errorMessage.replace('SHARE_QUOTA_MEMORY_EXCEEDED: ', '')))
+      }
+
+      // 处理余额不足错误
+      if (errorMessage.includes('BALANCE_INSUFFICIENT')) {
+        return reply.code(400).send(apiError(ErrorCode.BALANCE_INSUFFICIENT, '余额不足'))
+      }
+
+      // 处理用户不存在错误
+      if (errorMessage.includes('USER_NOT_FOUND')) {
+        return reply.code(400).send(apiError(ErrorCode.USER_NOT_FOUND, '用户不存在'))
+      }
+
+      // 并发冲突错误
+      if (err?.code === 'P2034') {
+        return reply.code(409).send(apiError(ErrorCode.QUOTA_EXCEEDED,
+          '资源分配时发生并发冲突，请稍后重试'))
+      }
+
+      throw err
+    }
+
+    // 事务成功后，完成 IP 分配和存储池选择（这些不需要在事务中）
+    // 如果这些步骤失败，实例会处于 creating 状态，后续清理任务会处理
+
+    // 类型断言：host 在事务成功后一定不为 null
+    if (!host) {
+      throw new Error('Host should not be null after successful transaction')
+    }
+
+    const hostWithIpv6 = host as typeof host & {
+      ipv6_mode?: number
+      ipv6_subnet?: string | null
+      ipv6_gateway?: string | null
+      ipv6_parent_interface?: string | null
+    }
+    console.log(`[Provisioning] Host IPv6 config: mode=${hostWithIpv6.ipv6_mode}, subnet=${hostWithIpv6.ipv6_subnet}, gateway=${hostWithIpv6.ipv6_gateway}, parent_interface=${hostWithIpv6.ipv6_parent_interface}`)
+
+    // 分配 IPv4
+    try {
+      let attempts = 0
+      const maxAttempts = 50
+
+      while (attempts < maxAttempts) {
+        staticIPv4 = generateRandomIPv4()
+        // 内网 IPv4 只需在同一宿主机内唯一（不同宿主机的内网是隔离的）
+        const exists = await db.isIpAddressExistsOnHost(staticIPv4, host.id)
+
+        if (!exists) {
+          console.log(`[Provisioning] 分配静态 IPv4: ${staticIPv4} (尝试次数: ${attempts + 1})`)
+          break
+        }
+
+        attempts++
+        staticIPv4 = null
+      }
+
+      if (!staticIPv4) {
+        console.error(`[Provisioning] IPv4 分配失败（已尝试 ${maxAttempts} 次），实例将使用动态 IP`)
+        // 不在这里返回错误，让实例使用动态 IP
+      }
+    } catch (err) {
+      console.error(`[Provisioning] IPv4 分配错误:`, err)
+      // 不在这里返回错误，让实例使用动态 IP
+    }
+
+    // 分配 IPv6（仅当存在 IPv6 子网配置且是 Routed 模式时，即需要独立 IPv6 地址）
+    // nat_ipv6 和 ipv6_only 从子网分配独立 IPv6，nat_ipv6_nat 和 ipv6_nat 共享宿主机 IPv6
+    const needsRoutedIPv6 = ['nat_ipv6', 'ipv6_only'].includes(networkMode)
+    if (hostWithIpv6.ipv6_subnet && needsRoutedIPv6) {
+      try {
+        let attempts = 0
+        const maxAttempts = 50
+
+        while (attempts < maxAttempts) {
+          staticIPv6 = generateRandomIPv6(hostWithIpv6.ipv6_subnet)
+          const exists = await db.isIpAddressExists(staticIPv6)
+
+          if (!exists) {
+            console.log(`[Provisioning] 分配静态 IPv6: ${staticIPv6} (尝试次数: ${attempts + 1})`)
+            break
+          }
+
+          attempts++
+          staticIPv6 = null
+        }
+
+        if (!staticIPv6) {
+          console.warn(`[Provisioning] IPv6 分配失败（已尝试 ${maxAttempts} 次），将使用动态分配`)
+        }
+      } catch (err) {
+        console.warn(`[Provisioning] IPv6 分配错误，将使用动态分配:`, err)
+        staticIPv6 = null
+      }
+    }
+
+    console.log(`[Provisioning] IP 分配完成: IPv4=${staticIPv4}, IPv6=${staticIPv6}`)
+
+    // VM 和容器都需要在 IP 分配完成后重新生成 cloud-init network-config
+    // 确保静态 IPv4 和 IPv6 地址正确注入到 guest OS
+    let finalConfigPayload = configPayload
+    if (effectiveInstanceType === 'vm') {
+      const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+      const vmResult = generateVmConfig({
+        instanceName: name,
+        instanceIdSeed: incusId,
+        imageAlias: actualImageAlias,
+        rootPassword: metaData.rootPassword,
+        sshKey: sshKey,
+        network: staticIPv4 ? {
+          ipAddress: `${staticIPv4}/22`,
+          gateway: '10.10.0.1',  // NAT 网关 (与 incusbr0 一致)
+          dns: ['10.10.0.1'],
+          ipv6Address: staticIPv6 ? `${staticIPv6}` : undefined,
+          ipv6Gateway: staticIPv6 ? (hostWithIpv6.ipv6_gateway || undefined) : undefined
+        } : undefined,
+        extraShellCommands
+      })
+      finalConfigPayload = vmResult.configPayload
+      console.log(`[Provisioning] VM network-config 已更新: IPv4=${staticIPv4 || 'dhcp'}, IPv6=${staticIPv6 || 'none'}`)
+    } else if (staticIPv4) {
+      // 容器类型：重新生成包含静态 IP 的 cloud-init 配置
+      const containerResult = generateIncusConfig({
+        instanceName: name,
+        imageAlias: actualImageAlias,
+        rootPassword: metaData.rootPassword,
+        sshKey: sshKey,
+        networkMode,
+        type: 'container',
+        network: {
+          ipAddress: `${staticIPv4}/22`,
+          gateway: '10.10.0.1',
+          dns: ['10.10.0.1'],
+          ipv6Address: staticIPv6 ? `${staticIPv6}/128` : undefined,
+          ipv6Gateway: staticIPv6 ? 'fe80::1' : undefined
+        },
+        extraShellCommands
+      })
+      finalConfigPayload = containerResult.configPayload
+      console.log(`[Provisioning] Container network-config 已更新: IPv4=${staticIPv4}, IPv6=${staticIPv6 || 'none'}`)
+    }
+
+    // 选择存储池
+    selectedStoragePool = await db.resolveStoragePoolForNewInstance(host.id, { packageId })
+    if (!selectedStoragePool) {
+      console.error(`[Provisioning] 宿主机 ${host.name} 没有配置系统盘存储池，将使用默认存储池`)
+      selectedStoragePool = 'default'
+    }
+    console.log(`[Provisioning] 选择存储池: ${selectedStoragePool}`)
+
+    await prisma.instance.update({
+      where: { id: instanceId },
+      data: {
+        storagePoolName: selectedStoragePool
+      }
+    })
+
+    // ==================== 阶段六: 异步执行创建 ====================
+    // Cast pkg to include advanced config fields
+    const pkgConfig = pkg as typeof pkg & {
+      io_limit_mode?: string
+      limits_read?: string | null
+      limits_write?: string | null
+      limits_read_iops?: number | null
+      limits_write_iops?: number | null
+      limits_ingress?: string | null
+      limits_egress?: string | null
+      limits_processes?: number | null
+      limits_cpu_priority?: number | null
+      boot_autostart?: boolean | null
+      boot_autostart_priority?: number | null
+      boot_autostart_delay?: number | null
+      boot_host_shutdown_timeout?: number | null
+    }
+
+    // 计算带宽限制：使用事务中计算的方案带宽限制（如果有），否则使用套餐默认值
+    const effectiveBandwidthLimit = planBandwidthLimit
+
+    // 根据 ioLimitMode 选择性传入 IO 限制参数
+    const ioMode = pkgConfig.io_limit_mode || 'throughput'
+
+    createInstanceAsync(instanceId, host, {
+      name: incusId,
+      image: actualImageAlias,
+      cpu: requestedCpu,
+      memory: requestedMemory,
+      disk: requestedDisk,
+      swapEnabled: false,
+      swapSize: effectiveInstanceType === 'container' ? (selectedPlan?.swapSize ?? null) : null,
+      cloudInitConfig: finalConfigPayload,
+      networkMode,
+      nested: Boolean(pkg.nested),
+      privileged: Boolean(pkg.privileged),
+      portLimit: pkgWithExtras.port_limit || 20,
+      // 实例类型：根据套餐的实例类型决定创建容器还是虚拟机
+      instanceType: effectiveInstanceType,
+      // SSH 端口（固定 22）
+      sshPort: metaData.sshPort,
+      // 存储池配置
+      storagePool: selectedStoragePool,
+      // IP 配置 (新双网卡架构)
+      ipv4Address: staticIPv4,
+      ipv6Address: staticIPv6,
+      ipv6Gateway: hostWithIpv6.ipv6_gateway || null,
+      hostInterface: hostWithIpv6.ipv6_parent_interface || 'eth0',
+      // Advanced configuration from package (根据 ioLimitMode 选择性传入)
+      limitsRead: ioMode === 'throughput' ? pkgConfig.limits_read : null,
+      limitsWrite: ioMode === 'throughput' ? pkgConfig.limits_write : null,
+      limitsReadIops: ioMode === 'iops' ? pkgConfig.limits_read_iops : null,
+      limitsWriteIops: ioMode === 'iops' ? pkgConfig.limits_write_iops : null,
+      limitsIngress: effectiveBandwidthLimit || pkgConfig.limits_ingress,
+      limitsEgress: effectiveBandwidthLimit || pkgConfig.limits_egress,
+      limitsProcesses: pkgConfig.limits_processes,
+      limitsCpuPriority: pkgConfig.limits_cpu_priority,
+      bootAutostart: pkgConfig.boot_autostart,
+      bootAutostartPriority: pkgConfig.boot_autostart_priority,
+      bootAutostartDelay: pkgConfig.boot_autostart_delay,
+      bootHostShutdownTimeout: pkgConfig.boot_host_shutdown_timeout
+    }, user.id, { cpu: requestedCpu, memory: requestedMemory, disk: requestedDisk }).catch(err => {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      fastify.log.error({ err: errorMessage }, `实例 ${instanceId} 创建失败`)
+    })
+
+    reply.code(202).send({
+      message: 'Instance creating, please refresh later',
+      instance: {
+        id: instanceId,
+        name,
+        incusId,
+        host: host.name,
+        status: 'creating',
+        sshPort: metaData.sshPort,
+        rootPassword: metaData.rootPassword
+      }
+    })
+  })
+
+  // 获取实例详情
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、节点所有者
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const portMappings = await db.getPortMappings(instanceId)
+
+    const host = await db.getHostById(instance.host_id)
+    const natPublicIp = host?.nat_public_ip || null
+    let hostIpAddress = host?.ip_address || null
+    if (!hostIpAddress && host?.url) {
+      try {
+        const u = new URL(host.url)
+        hostIpAddress = u.hostname.replace(/^\[|\]$/g, '')
+      } catch {
+        // null
+      }
+    }
+    // 对于 nat_ipv6_nat / ipv6_nat 模式，获取宿主机的公网 IPv6
+    let hostIpv6Address: string | null = null
+    if (['nat_ipv6_nat', 'ipv6_nat'].includes(instance.network_mode)) {
+      // 0) 最高优先级：从 nat_public_ipv6 字段获取（管理员/节点所有者手动配置）
+      if (host?.nat_public_ipv6) {
+        hostIpv6Address = host.nat_public_ipv6
+      }
+      // 1) 尝试 host_ip_address 本身是否为 IPv6
+      if (!hostIpv6Address && hostIpAddress && hostIpAddress.includes(':')) {
+        hostIpv6Address = hostIpAddress
+      }
+      // 2) 尝试从 ipv6_gateway 获取
+      if (!hostIpv6Address && host?.ipv6_gateway) {
+        hostIpv6Address = host.ipv6_gateway
+      }
+      // 3) 尝试从 HostAddressAlias 表查询宿主机的 IPv6 地址
+      if (!hostIpv6Address && host) {
+        try {
+          const ipv6Alias = await prisma.hostAddressAlias.findFirst({
+            where: { hostId: host.id, kind: 'ipv6' },
+            select: { address: true }
+          })
+          if (ipv6Alias?.address) {
+            hostIpv6Address = ipv6Alias.address
+          }
+        } catch {
+          // 忽略查询失败
+        }
+      }
+      // 4) 尝试从 host.url 解析（如果 URL 使用 IPv6）
+      if (!hostIpv6Address && host?.url) {
+        try {
+          const u = new URL(host.url)
+          const hostname = u.hostname.replace(/^\[|\]$/g, '')
+          if (hostname.includes(':')) {
+            hostIpv6Address = hostname
+          }
+        } catch {
+          // 忽略
+        }
+      }
+    }
+
+    // 新配额系统：端口/快照/备份/站点限制在实例级别（从套餐包获取）
+    // 计算当前实例已使用的端口/快照/备份/站点数
+    const currentPortCount = portMappings.length
+    const currentSnapshotCount = await prisma.snapshot.count({ where: { instanceId } })
+    const currentBackupCount = await prisma.backup.count({ where: { instanceId, status: { not: 'deleted' } } })
+    const currentSiteCount = await prisma.proxySite.count({ where: { instanceId } })
+
+    // 获取站点限制（实例优先，否则从套餐继承）
+    const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const effectiveSiteLimit = instance.site_limit ?? pkg?.site_limit ?? 10
+
+    // 获取方案信息（付费实例）
+    let planName: string | null = null
+    let planPrice: number | null = null  // 方案原价（续费价格，元）
+    let billingCycle: number | null = null
+    let affDiscountRate: number | null = null  // AFF优惠码折扣率
+    let hasAffBinding = false
+    let isHostedInstance = false
+    if ((instance as any).package_plan_id) {
+      const plan = await prisma.packagePlan.findUnique({
+        where: { id: (instance as any).package_plan_id },
+        select: { name: true, price: true, billingCycle: true }
+      })
+      planName = plan?.name ?? null
+      if (plan?.price && plan?.billingCycle) {
+        // 返回方案原价（分转元）
+        planPrice = Number(plan.price) / 100
+        billingCycle = plan.billingCycle
+      }
+
+      // 查询 AFF 绑定，获取折扣率
+      const affBinding = await db.getInstanceAffBinding(instanceId)
+      if (affBinding) {
+        hasAffBinding = true
+        affDiscountRate = Number(affBinding.affCode.discountRate)
+      }
+    }
+
+    isHostedInstance = Boolean(host?.name.toLowerCase().startsWith('peer'))
+
+    const effectivePortLimit = instance.port_limit ?? 20
+    const effectiveSnapshotLimit = instance.snapshot_limit ?? 5
+    const effectiveBackupLimit = instance.backup_limit ?? 3
+    const quotaUsage = {
+      port: currentPortCount,
+      snapshot: currentSnapshotCount,
+      backup: currentBackupCount,
+      site: currentSiteCount
+    }
+    const effectiveQuotaLimit = {
+      port: effectivePortLimit,
+      snapshot: effectiveSnapshotLimit,
+      backup: effectiveBackupLimit,
+      site: effectiveSiteLimit
+    }
+    const remainingQuota = {
+      port: effectivePortLimit === 0 ? 0 : Math.max(0, effectivePortLimit - currentPortCount),
+      snapshot: effectiveSnapshotLimit === 0 ? 0 : Math.max(0, effectiveSnapshotLimit - currentSnapshotCount),
+      backup: effectiveBackupLimit === 0 ? 0 : Math.max(0, effectiveBackupLimit - currentBackupCount),
+      // site limit = 0 表示不限制，这里返回 0 作为 sentinel
+      site: effectiveSiteLimit === 0 ? 0 : Math.max(0, effectiveSiteLimit - currentSiteCount)
+    }
+
+    // Build response based on user role
+    // 获取镜像显示名称
+    const imageName = await getImageDisplayName(instance.image)
+
+    // 获取实例类型（从套餐包获取，默认为容器）
+    const instanceType = (pkg as { instance_type?: 'container' | 'vm' } | null)?.instance_type || 'container'
+
+    const response: {
+      id: number
+      incusId: string
+      name: string
+      status: string
+      image: string
+      imageName?: string | null
+      cpu: number
+      memory: number
+      disk: number
+      ipv4: string | null
+      ipv6: string | null
+      host: { name: string; country_code: string; storageDriver?: string }
+      hostCountryCode: string
+      network_mode: string
+      instance_type: 'container' | 'vm'
+      instanceType?: 'container' | 'vm'  // camelCase 别名
+      iconBadgeId?: string | null
+      nat_public_ip?: string | null
+      ssh_port: number | null
+      port_limit: number | null
+      snapshot_limit: number | null
+      backup_limit: number | null
+      monthlyTrafficLimit?: string | null
+      remaining_quota: { port: number; snapshot: number; backup: number; site: number } | null
+      quota_usage?: { port: number; snapshot: number; backup: number; site: number }
+      effective_quota_limit?: { port: number; snapshot: number; backup: number; site: number }
+      port_mappings: Array<{ id: number; protocol: string; public_port: number; private_port: number; remark: string | null }>
+      created_at: string
+      package_id: number | null
+      packageName?: string | null
+      packagePlanId?: number | null
+      planId?: number | null  // 方案ID（用于变更方案）
+      planName?: string | null
+      planPrice?: number | null  // 方案月价格
+      billingPrice?: number | null  // 实例专属价格（管理员设置的价格，优先于方案价格）
+      billingCycle?: number | null  // 计费周期（月）
+      affDiscountRate?: number | null  // AFF优惠码折扣率
+      hasAffBinding?: boolean  // 是否已绑定 AFF 优惠码
+      isHostedInstance?: boolean  // 是否为用户托管节点实例
+      hostAnnouncement?: string | null  // 节点公告
+      limitsIngress?: string | null  // 入栈带宽限制
+      limitsEgress?: string | null  // 出栈带宽限制
+      user_id?: number
+      hostId?: number
+      // 封停相关字段
+      expires_at?: string | null
+      suspended_at?: string | null
+      suspended_by?: number | null
+      suspend_reason?: string | null
+      // 自动续费
+      autoRenew?: boolean
+      // 托管节点所有者信息（仅用户托管节点）
+      hostOwnerInfo?: {
+        id: number
+        username: string
+        email: string
+        avatarStyle: string
+        avatarBadgeId: string | null
+        hostCount: number
+        instanceCount: number
+        registeredDays: number
+        vipLevel: number
+        vipBadgeStyle?: {
+          backgroundColor: string
+          textColor: string
+        } | null
+      } | null
+    } = {
+      id: instance.id,
+      incusId: instance.incus_id,
+      name: instance.name,
+      status: instance.status,
+      image: instance.image,
+      imageName: imageName || null,
+      cpu: instance.cpu,
+      memory: instance.memory,
+      disk: instance.disk,
+      ipv4: instance.ipv4,
+      ipv6: instance.ipv6,
+      host: {
+        name: instance.host_name || 'unknown',
+        country_code: instance.host_country_code || 'us',
+        storageDriver: (instance as any).host_storage_driver
+      },
+      hostCountryCode: instance.host_country_code || 'us',
+      network_mode: instance.network_mode,
+      instance_type: instanceType,
+      instanceType: instanceType,  // camelCase 别名，确保前后端兼容
+      iconBadgeId: (instance as { icon_badge_id?: string | null }).icon_badge_id ?? null,
+      ssh_port: instance.ssh_port,
+      port_limit: instance.port_limit,
+      snapshot_limit: instance.snapshot_limit,
+      backup_limit: instance.backup_limit,
+      monthlyTrafficLimit: instance.monthly_traffic_limit,
+      remaining_quota: remainingQuota,
+      quota_usage: quotaUsage,
+      effective_quota_limit: effectiveQuotaLimit,
+      port_mappings: portMappings.map((p: unknown) => {
+        const mapping = p as { id: number; protocol: string; public_port: number; private_port: number; remark: string | null }
+        return {
+          id: mapping.id,
+          protocol: mapping.protocol,
+          public_port: mapping.public_port,
+          private_port: mapping.private_port,
+          remark: mapping.remark
+        }
+      }),
+      created_at: instance.created_at,
+      package_id: instance.package_id,
+      packageName: pkg?.name || null,
+      packagePlanId: (instance as any).package_plan_id ?? null,
+      planId: (instance as any).package_plan_id ?? null,
+      planName: planName,
+      planPrice: planPrice,
+      billingPrice: (instance as any).billing_price ?? null,  // 实例专属价格
+      billingCycle: billingCycle,
+      affDiscountRate: affDiscountRate,
+      hasAffBinding,
+      isHostedInstance,
+      hostAnnouncement: host?.announcement || null,
+      limitsIngress: (instance as any).limits_ingress ?? pkg?.limits_ingress ?? null,
+      limitsEgress: (instance as any).limits_egress ?? pkg?.limits_egress ?? null,
+      // 封停相关字段
+      expires_at: instance.expires_at,
+      suspended_at: instance.suspended_at,
+      suspended_by: instance.suspended_by,
+      suspend_reason: instance.suspend_reason,
+      // 自动续费（仅付费实例有意义）
+      autoRenew: (instance as any).auto_renew ?? false
+    }
+
+    // 用户托管节点：获取节点所有者详细信息
+    if (host) {
+      const hostOwner = await prisma.user.findUnique({
+        where: { id: host.user_id },
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          avatarStyle: true,
+          avatarBadgeId: true,
+          createdAt: true,
+          role: true
+        }
+      })
+
+      isHostedInstance = isHostedInstance || hostOwner?.role === 'user'
+      response.isHostedInstance = isHostedInstance
+
+      if (hostOwner && hostOwner.role !== 'admin' && hostOwner.email) {
+        const [hostCount, instanceCount, totalHostingIncome] = await Promise.all([
+          // 该用户持有的托管节点数
+          prisma.host.count({
+            where: { userId: host.user_id }
+          }),
+          // 该用户托管节点的总实例数（不含已删除）
+          prisma.instance.count({
+            where: {
+              host: { userId: host.user_id },
+              status: { not: 'deleted' }
+            }
+          }),
+          // 计算历史托管总收入（用于VIP等级）
+          prisma.hostingBalanceLog.aggregate({
+            where: {
+              userId: host.user_id,
+              type: 'income'
+            },
+            _sum: { amount: true }
+          })
+        ])
+
+        // 计算注册天数
+        const registeredDays = Math.floor((Date.now() - hostOwner.createdAt.getTime()) / (1000 * 60 * 60 * 24))
+        // 计算VIP等级（基于后台配置的托管 VIP 规则）
+        const totalIncome = Number(totalHostingIncome._sum.amount || 0)
+        const vipRules = await getVipRules('hosting')
+        const vipLevel = calculateVipLevel('hosting', vipRules, {
+          totalHostingIncome: totalIncome,
+          instanceCount
+        })
+        const vipBadgeStyle = getVipBadgeStyleForLevel(vipRules, 'hosting', vipLevel)
+        response.hostOwnerInfo = {
+          id: hostOwner.id,
+          username: hostOwner.username,
+          email: hostOwner.email,
+          avatarStyle: hostOwner.avatarStyle,
+          avatarBadgeId: hostOwner.avatarBadgeId,
+          hostCount,
+          instanceCount,
+          registeredDays,
+          vipLevel,
+          vipBadgeStyle
+        }
+      }
+    }
+
+    // Check if current user is the host owner or admin
+    const isHostOwner = host?.user_id === user.id
+    const isAdmin = user.role === 'admin'
+
+    // Include sensitive information for instance owner only
+    if (instance.user_id === user.id) {
+      // NAT public IP is needed for port mapping display
+      if (natPublicIp) {
+        response.nat_public_ip = natPublicIp
+      }
+      // 宿主机连接 IP（可能是 IPv6，用于 IPv6 NAT 模式显示）
+      if (hostIpAddress) {
+        ; (response as any).host_ip_address = hostIpAddress
+      }
+      // 宿主机公网 IPv6（用于 nat_ipv6_nat / ipv6_nat 模式显示）
+      if (hostIpv6Address) {
+        ; (response as any).host_ipv6_address = hostIpv6Address
+      }
+      // Port range for port mapping hint
+      if (host?.nat_port_start && host?.nat_port_end) {
+        ; (response as any).port_range_start = host.nat_port_start
+          ; (response as any).port_range_end = host.nat_port_end
+      }
+      // Instance owner needs hostId for operations like getting available images
+      response.hostId = instance.host_id
+      // Instance owner can see their own user_id (it's their instance)
+      response.user_id = instance.user_id
+        // 实例所有者标识，用于前端控制提升进程数等操作权限
+        ; (response as any).isInstanceOwner = true
+    }
+
+    // Host owner or admin can see hostId and manage advanced config
+    if (isHostOwner || isAdmin) {
+      response.hostId = instance.host_id
+      // NAT public IP for admin/host owner
+      if (natPublicIp) {
+        response.nat_public_ip = natPublicIp
+      }
+      // 宿主机连接 IP（可能是 IPv6，用于 IPv6 NAT 模式显示）
+      if (hostIpAddress) {
+        ; (response as any).host_ip_address = hostIpAddress
+      }
+      // 宿主机公网 IPv6（用于 nat_ipv6_nat / ipv6_nat 模式显示）
+      if (hostIpv6Address) {
+        ; (response as any).host_ipv6_address = hostIpv6Address
+      }
+      // AUTH004: 节点所有者/管理员需要知道自己是否也是实例所有者，以便前端正确控制权限
+      // isHostOwner: 当前用户是节点所有者或管理员
+      // isInstanceOwner: 当前用户是实例所有者
+      ; (response as any).isHostOwner = true
+        ; (response as any).isInstanceOwner = instance.user_id === user.id
+        ; (response as any).isAdmin = isAdmin
+    }
+
+    // 返回节点是否启用资源池玩法（用于前端显示兑换按钮）
+    ; (response as any).enableResourcePool = host?.enable_resource_pool ?? false
+
+    // root_password should NEVER be returned in API responses
+    // It's only returned once during instance creation
+
+    return { instance: response }
+  })
+
+  // 获取实例Root密码（实例所有者或管理员）
+  fastify.get<{ Params: { id: string } }>('/:id/password', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // AUTH004: 查看密码仅限实例所有者和管理员，宿主机所有者禁止
+    if (instance.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 解密并返回密码
+    if (instance.root_password) {
+      const decryptedPassword = decryptSensitiveData(instance.root_password)
+      return {
+        rootPassword: decryptedPassword
+      }
+    }
+
+    return {
+      rootPassword: null
+    }
+  })
+
+  // 获取实例实时资源使用情况
+  fastify.get<{ Params: { id: string } }>('/:id/stats', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、节点所有者
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status !== 'running') {
+      return {
+        stats: {
+          memory: { usage: 0, limit: instance.memory, usagePercent: 0 },
+          disk: { usage: 0, limit: instance.disk, usagePercent: 0 },
+          network: { bytesReceived: 0, bytesSent: 0 }
+        }
+      }
+    }
+
+    try {
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        throw new Error('Host not found')
+      }
+      const client = await getIncusClient(host)
+
+      const state = await getInstanceState(client, instance.incus_id) as {
+        status?: string
+        memory?: { usage?: number }
+        disk?: { root?: { usage?: number } }
+        network?: Record<string, {
+          hwaddr?: string
+          counters?: { bytes_received?: number | string; bytes_sent?: number | string; packets_received?: number; packets_sent?: number }
+        }>
+      }
+
+      // 被动状态同步：检查 Incus 实际状态并更新数据库
+      if (state.status) {
+        const incusStatus = mapInstanceStatus(state.status)
+        // 仅在状态不一致且是有效状态时更新
+        if (incusStatus !== 'unknown' && instance.status !== incusStatus) {
+          console.log(`[StatusSync] Passive sync: Instance ${instance.id} status ${instance.status} → ${incusStatus}`)
+          await db.updateInstanceStatus(instanceId, incusStatus as 'creating' | 'running' | 'stopped' | 'error')
+        }
+      }
+
+      const memoryUsage = state.memory?.usage || 0
+      const memoryLimit = instance.memory * 1024 * 1024
+      const memoryPercent = memoryLimit > 0 ? Math.round((memoryUsage / memoryLimit) * 100) : 0
+
+      let diskUsage = 0
+      const diskLimit = instance.disk * 1024 * 1024
+      if (state.disk?.root) {
+        diskUsage = state.disk.root.usage || 0
+      }
+      const diskPercent = diskLimit > 0 ? Math.round((diskUsage / diskLimit) * 100) : 0
+
+      const networkCounters = getTrafficCountersFromState(instance.incus_id, state)
+      const bytesReceived = Number(networkCounters.rxBytes)
+      const bytesSent = Number(networkCounters.txBytes)
+
+      // 获取最新实例状态（可能已被被动同步更新）
+      const updatedInstance = await db.getInstanceById(instanceId)
+      const currentStatus = updatedInstance?.status || instance.status
+
+      return {
+        stats: {
+          memory: {
+            usage: Math.round(memoryUsage / 1024 / 1024),
+            limit: instance.memory,
+            usagePercent: Math.min(memoryPercent, 100)
+          },
+          disk: {
+            usage: Math.round(diskUsage / 1024 / 1024),
+            limit: instance.disk,
+            usagePercent: Math.min(diskPercent, 100)
+          },
+          network: {
+            bytesReceived,
+            bytesSent
+          }
+        },
+        // 返回当前实例状态，便于前端及时更新
+        status: currentStatus
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      console.error('获取实例资源状态失败:', errorMessage)
+      return {
+        stats: {
+          memory: { usage: 0, limit: instance.memory, usagePercent: 0 },
+          disk: { usage: 0, limit: instance.disk, usagePercent: 0 },
+          network: { bytesReceived: 0, bytesSent: 0 }
+        },
+        status: instance.status
+      }
+    }
+  })
+
+  // 启动实例
+  fastify.post<{ Params: { id: string } }>('/:id/start', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、节点所有者
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status === 'running') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_ALREADY_RUNNING))
+    }
+
+    // 封停状态不允许启动
+    if (instance.status === 'suspended') {
+      // 到期封停返回特定错误码，其他封停返回通用错误码
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    // 创建异步任务
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: instance.host_id,
+      userId: user.id,
+      taskType: 'start'
+    })
+
+    await createLog(user.id, 'instance', 'instance.start', `Queued start task for instance "${instance.name}"`, 'success', { instanceId })
+
+    reply.code(202).send({
+      message: 'Instance start task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // 停止实例
+  fastify.post<{ Params: { id: string } }>('/:id/stop', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、节点所有者
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封禁状态检查：实例所有者不能停止被封禁的实例
+    // 节点所有者可以停止（用于维护等操作）
+    if (instance.status === 'suspended') {
+      const host = await db.getHostById(instance.host_id)
+      const isHostOwner = host && host.user_id === user.id
+      if (!isHostOwner) {
+        if (instance.suspend_reason === 'expired') {
+          return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+        }
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+      }
+    }
+
+    if (instance.status === 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_ALREADY_STOPPED))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    // 创建异步任务
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: instance.host_id,
+      userId: user.id,
+      taskType: 'stop'
+    })
+
+    await createLog(user.id, 'instance', 'instance.stop', `Queued stop task for instance "${instance.name}"`, 'success', { instanceId })
+
+    reply.code(202).send({
+      message: 'Instance stop task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // 重启实例
+  fastify.post<{ Params: { id: string } }>('/:id/restart', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、节点所有者
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许重启
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    // 创建异步任务
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: instance.host_id,
+      userId: user.id,
+      taskType: 'restart'
+    })
+
+    await createLog(user.id, 'instance', 'instance.restart', `Queued restart task for instance "${instance.name}"`, 'success', { instanceId })
+
+    reply.code(202).send({
+      message: 'Instance restart task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // 封停实例（仅宿主机所有者和管理员）
+  fastify.post<{ Params: { id: string }; Body: { reason?: string } }>('/:id/suspend', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          reason: { type: 'string', maxLength: 500 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Params: { id: string }; Body: { reason?: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+    const { reason } = request.body || {}
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 封停权限：仅管理员和宿主机所有者可以封停实例
+    const host = await db.getHostById(instance.host_id)
+    const isHostOwner = host && host.user_id === user.id
+    const isAdmin = user.role === 'admin'
+
+    if (!isAdmin && !isHostOwner) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 已封停的实例不能重复封停
+    if (instance.status === 'suspended') {
+      return reply.code(400).send({
+        error: 'Instance is already suspended',
+        code: 'INSTANCE_ALREADY_SUSPENDED'
+      })
+    }
+
+    // 不能封停已删除的实例
+    if (instance.status === 'deleted') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 如果实例正在运行，先关机
+    if (instance.status === 'running' && host) {
+      try {
+        const client = await getIncusClient(host)
+        await stopInstance(client, instance.incus_id, true)
+      } catch (err) {
+        console.error(`[Suspend] Failed to stop instance ${instanceId}:`, err)
+        // 继续封停流程，即使关机失败
+      }
+    }
+
+    // 执行封停
+    await db.suspendInstance(instanceId, {
+      suspendedBy: user.id,
+      suspendReason: reason || ''
+    })
+
+    await createLog(user.id, 'instance', 'instance.suspend', `Suspended instance "${instance.name}"${reason ? ` (reason: ${reason})` : ''}`, 'success', { instanceId })
+
+    // 发送站内信通知给实例所有者
+    if (instance.user_id !== user.id) {
+      await sendNotification(instance.user_id, 'instance_suspended', {
+        instanceName: instance.name,
+        hostName: host?.name || '',
+        suspendReason: reason || ''
+      })
+    }
+
+    reply.code(200).send({
+      message: 'Instance suspended successfully'
+    })
+  })
+
+  // 解除封停（仅宿主机所有者和管理员）
+  fastify.post<{ Params: { id: string } }>('/:id/unsuspend', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 解封权限：仅管理员和宿主机所有者可以解封
+    const host = await db.getHostById(instance.host_id)
+    const isHostOwner = host && host.user_id === user.id
+    const isAdmin = user.role === 'admin'
+
+    if (!isAdmin && !isHostOwner) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 只能解封已封停的实例
+    if (instance.status !== 'suspended') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_NOT_SUSPENDED))
+    }
+
+    // 如果是到期封停，需要检查是否已续费（有新的到期时间）
+    if (instance.suspend_reason === 'expired') {
+      // 如果到期时间仍然在过去，不允许解封
+      if (instance.expires_at && new Date(instance.expires_at) <= new Date()) {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+    }
+
+    // 执行解封
+    await db.unsuspendInstance(instanceId)
+
+    await createLog(user.id, 'instance', 'instance.unsuspend', `Unsuspended instance "${instance.name}"`, 'success', { instanceId })
+
+    // 发送站内信通知给实例所有者
+    if (instance.user_id !== user.id) {
+      await sendNotification(instance.user_id, 'instance_unsuspended', {
+        instanceName: instance.name,
+        hostName: host?.name || ''
+      })
+    }
+
+    reply.code(200).send({
+      message: 'Instance unsuspended successfully'
+    })
+  })
+
+  // 同步实例状态（从 Incus 获取实际状态和内网 IP 并更新数据库）
+  fastify.post<{ Params: { id: string } }>('/:id/sync-status', {
+    // 使用 authenticate，允许实例所有者、节点所有者和管理员同步状态
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：实例所有者、节点所有者或管理员
+    const host = await db.getHostById(instance.host_id)
+    const isInstanceOwner = instance.user_id === user.id
+    const isHostOwner = host && host.user_id === user.id
+    const isAdmin = user.role === 'admin'
+
+    if (!isInstanceOwner && !isHostOwner && !isAdmin) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (!host) {
+      return reply.code(404).send({ error: '节点不存在' })
+    }
+
+    // 获取 Incus 客户端
+    let client
+    try {
+      client = await getIncusClient(host as Host)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      return reply.code(503).send({ error: `无法连接到节点: ${errorMessage}` })
+    }
+
+    // 从 Incus state.network 中提取 IPv4 地址
+    // 优先选择 eth0 接口的 IP（这是我们配置的主网卡）
+    try {
+      // 从 Incus 获取实例状态
+      const [state, incusInstance] = await Promise.all([
+        getInstanceState(client, instance.incus_id),
+        getInstance(client, instance.incus_id)
+      ]) as [{
+        status?: string
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }, {
+        devices?: Record<string, Record<string, unknown>>
+        expanded_devices?: Record<string, Record<string, unknown>>
+      }]
+
+      if (!state.status) {
+        return reply.code(500).send({ error: '无法获取实例状态' })
+      }
+
+      const incusStatus = mapInstanceStatus(state.status)
+
+      if (incusStatus === 'unknown') {
+        return reply.code(500).send({ error: `未知状态: ${state.status}` })
+      }
+
+      const currentStatus = instance.status
+      let statusChanged = false
+      let ipv4Changed = false
+      let ipv6Changed = false
+      let oldIpv4: string | null = null
+      let newIpv4: string | null = null
+      let oldIpv6: string | null = null
+      let newIpv6: string | null = null
+      let proxySitesUpdated = 0
+
+      // 更新数据库状态
+      if (currentStatus !== incusStatus) {
+        await db.updateInstanceStatus(
+          instanceId,
+          incusStatus as 'creating' | 'running' | 'stopped' | 'error'
+        )
+        statusChanged = true
+      }
+
+      // 同步内网 IPv4（仅当实例正在运行时才能获取）
+      const persistedNetwork = await persistResolvedInstanceNetworkAddresses(
+        {
+          id: instanceId,
+          name: instance.name,
+          hostId: instance.host_id,
+          networkMode: instance.network_mode,
+          ipv4: instance.ipv4,
+          ipv6: instance.ipv6
+        },
+        resolveInstanceNetworkAddresses(
+          {
+            id: instanceId,
+            name: instance.name,
+            hostId: instance.host_id,
+            networkMode: instance.network_mode,
+            ipv4: instance.ipv4,
+            ipv6: instance.ipv6
+          },
+          incusInstance,
+          state
+        ),
+        { updateLastSyncedAt: true }
+      )
+
+      ipv4Changed = persistedNetwork.ipv4Changed
+      oldIpv4 = persistedNetwork.oldIpv4
+      newIpv4 = persistedNetwork.newIpv4
+      ipv6Changed = persistedNetwork.ipv6Changed
+      oldIpv6 = persistedNetwork.oldIpv6
+      newIpv6 = persistedNetwork.newIpv6
+
+      if (ipv4Changed && newIpv4) {
+        console.log(`[SyncStatus] Instance ${instanceId} IPv4 changed: ${oldIpv4} -> ${newIpv4}`)
+
+        const proxySites = await getProxySitesByInstanceId(instanceId)
+        if (proxySites.length > 0 && host.caddy_enabled && host.caddy_username && host.caddy_password) {
+          const targetHost = host.nat_public_ip || host.ip_address
+          if (targetHost) {
+            const caddyClient = createCaddyClient({
+              host: targetHost,
+              port: host.caddy_port || 8444,
+              username: host.caddy_username,
+              password: host.caddy_password
+            })
+
+            for (const site of proxySites) {
+              if (site.status === 'active' && site.enabled) {
+                try {
+                  await caddyClient.deleteSite(site.domain)
+                  await caddyClient.addSite(site.domain, newIpv4, site.targetPort, site.httpsEnabled)
+                  proxySitesUpdated++
+                  console.log(`[SyncStatus] Updated proxy site "${site.domain}" to new IP ${newIpv4}`)
+                } catch (caddyErr) {
+                  console.error(`[SyncStatus] Failed to update proxy site "${site.domain}":`, caddyErr)
+                }
+              }
+            }
+          }
+        }
+      }
+      return reply.code(200).send({
+        success: true,
+        statusChanged,
+        from: statusChanged ? currentStatus : undefined,
+        to: statusChanged ? incusStatus : undefined,
+        currentStatus: incusStatus,
+        ipv4Changed,
+        oldIpv4: ipv4Changed ? oldIpv4 : undefined,
+        newIpv4: ipv4Changed ? newIpv4 : undefined,
+        ipv6Changed,
+        oldIpv6: ipv6Changed ? oldIpv6 : undefined,
+        newIpv6: ipv6Changed ? newIpv6 : undefined,
+        proxySitesUpdated: ipv4Changed ? proxySitesUpdated : undefined
+      })
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+
+      // 如果实例在 Incus 中不存在
+      if (errorMessage.includes('not found') || errorMessage.includes('Instance not found')) {
+        return reply.code(404).send({ error: '实例在节点上不存在' })
+      }
+
+      return reply.code(500).send({ error: `同步失败: ${errorMessage}` })
+    }
+  })
+
+  // 获取实例可改节点列表
+  fastify.get<{ Params: { id: string } }>('/:id/change-host-options', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const instanceId = Number(request.params.id)
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance || instance.status === 'deleted') {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    const hasPermission = await checkInstanceOperationPermission(request.user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    return buildChangeHostOptions(instance)
+  })
+
+  // 改节点：在目标节点重建实例，保留当前实例 ID
+  fastify.post<{
+    Params: { id: string }
+    Body: { targetHostId: number; sshKeyId: number }
+  }>('/:id/change-host', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['targetHostId', 'sshKeyId'],
+        properties: {
+          targetHostId: { type: 'integer', minimum: 1 },
+          sshKeyId: { type: 'integer', minimum: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { targetHostId: number; sshKeyId: number }
+  }>, reply: FastifyReply) => {
+    const instanceId = Number(request.params.id)
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { targetHostId, sshKeyId } = request.body
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance || instance.status === 'deleted') {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (!['running', 'stopped', 'error'].includes(instance.status)) {
+      return reply.code(400).send({
+        error: 'Instance status does not allow host change',
+        code: 'INSTANCE_STATUS_NOT_ALLOWED'
+      })
+    }
+
+    if (await checkTransferLock(instanceId, reply)) return
+
+    const [activeTask, activeRestoreTask, activeUploadTask] = await Promise.all([
+      getActiveTaskForInstance(instanceId),
+      prisma.restoreTask.findFirst({
+        where: {
+          instanceId,
+          status: { in: ['PENDING', 'PROCESSING'] }
+        }
+      }),
+      prisma.backupUploadTask.findFirst({
+        where: {
+          instanceId,
+          status: { in: ['PENDING', 'PROCESSING'] }
+        }
+      })
+    ])
+
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    if (activeRestoreTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active restore task',
+        code: 'RESTORE_IN_PROGRESS'
+      })
+    }
+
+    if (activeUploadTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active backup upload task',
+        code: 'UPLOAD_IN_PROGRESS'
+      })
+    }
+
+    const keyRecord = await db.getSSHKeyById(sshKeyId)
+    if (!keyRecord || keyRecord.user_id !== instance.user_id) {
+      return reply.code(400).send(apiError(ErrorCode.SSH_KEY_NOT_OWNED))
+    }
+
+    const options = await buildChangeHostOptions(instance)
+    if (!options.packageId) {
+      return reply.code(400).send({
+        error: 'Instance does not belong to a package',
+        code: 'CHANGE_HOST_NO_PACKAGE'
+      })
+    }
+
+    if (options.hosts.length <= 1) {
+      return reply.code(400).send({
+        error: 'Package has no other host',
+        code: 'CHANGE_HOST_SINGLE_HOST'
+      })
+    }
+
+    const targetOption = options.hosts.find(host => host.id === targetHostId)
+    if (!targetOption) {
+      return reply.code(400).send({
+        error: 'Target host is not bound to this package',
+        code: 'CHANGE_HOST_TARGET_NOT_BOUND'
+      })
+    }
+
+    if (!targetOption.canChange) {
+      return reply.code(400).send({
+        error: 'Target host is not available',
+        code: 'CHANGE_HOST_TARGET_UNAVAILABLE',
+        reason: targetOption.unavailableReason
+      })
+    }
+
+    const targetHost = await db.getHostById(targetHostId)
+    if (!targetHost) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: targetHostId,
+      userId: user.id,
+      taskType: 'change_host' as any,
+      targetHostId,
+      sshKeyId
+    })
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.change_host',
+      `Queued host change for instance "${instance.name}" from host "${instance.host_name || instance.host_id}" to "${targetHost.name}"`,
+      'success',
+      { instanceId }
+    )
+
+    return reply.code(202).send({
+      message: 'Instance host change task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // 重装系统
+  fastify.post<{
+    Params: { id: string }
+    Body: { image: string; sshKeyId?: number; imageAlias?: string; customInitCommandIds?: number[] }
+  }>('/:id/rebuild', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          image: { type: 'string' },
+          imageAlias: { type: 'string' },
+          sshKeyId: { type: 'integer' },
+          customInitCommandIds: { type: 'array', items: { type: 'integer' }, maxItems: 20 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { image: string; sshKeyId?: number; imageAlias?: string; customInitCommandIds?: number[] }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 兼容前端的 image 和 imageAlias
+    const imageAlias = request.body.image || request.body.imageAlias
+
+    if (!imageAlias) {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_IMAGE_REQUIRED))
+    }
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // AUTH004: 重装系统仅限实例所有者，管理员和宿主机所有者禁止
+    // 原因：重装会清除实例数据，影响用户资产安全
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许重装
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STOP_REQUIRED))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+
+
+    // 验证镜像是否在预设列表中
+    if (!await isValidSystemImage(imageAlias)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+    }
+
+    // 验证镜像与实例内存配置的兼容性（128MB 只允许 Alpine/Debian）
+    if (!await isImageCompatibleWithMemory(imageAlias, instance.memory)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+    }
+
+    const rebuildPackage = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const rebuildInstanceType = (rebuildPackage as { instance_type?: 'container' | 'vm' } | null)?.instance_type || 'container'
+    const rebuildImageAvailability = await getSystemImageAvailabilityForHost(imageAlias, instance.host_id, {
+      instanceType: rebuildInstanceType,
+      memory: instance.memory
+    })
+    if (!rebuildImageAvailability.ok) {
+      switch (rebuildImageAvailability.reason) {
+        case 'host_not_found':
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        case 'image_not_found':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+        case 'memory_incompatible':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+        case 'instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_TYPE_MISMATCH))
+        case 'host_instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.HOST_INSTANCE_TYPE_MISMATCH))
+        default:
+          return reply.code(400).send(apiError(ErrorCode.INSTANCE_IMAGE_UNAVAILABLE))
+      }
+    }
+
+    // 验证 SSH 密钥（如果提供）
+    const { sshKeyId, customInitCommandIds } = request.body
+    if (sshKeyId) {
+      const keyRecord = await db.getSSHKeyById(sshKeyId)
+      if (!keyRecord || keyRecord.user_id !== user.id) {
+        return reply.code(400).send(apiError(ErrorCode.SSH_KEY_NOT_OWNED))
+      }
+    }
+
+    // 验证自定义初始化命令（如果提供）
+    if (customInitCommandIds && customInitCommandIds.length > 0) {
+      const cmdValidation = await validateCommandsOwnership(customInitCommandIds, user.id)
+      if (!cmdValidation.valid) {
+        return reply.code(400).send({ error: 'Invalid custom init command IDs', code: 'INVALID_COMMAND_IDS' })
+      }
+    }
+
+    // 创建异步任务
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: instance.host_id,
+      userId: user.id,
+      taskType: 'rebuild',
+      imageAlias,
+      sshKeyId,
+      customInitCommandIds
+    })
+
+    await createLog(user.id, 'instance', 'instance.rebuild', `Queued rebuild task for instance "${instance.name}" with image ${imageAlias}`, 'success', { instanceId })
+
+    // 清理已使用的验证记录（在任务中会重新验证）
+    await consumeOperationVerification(user.id, 'reinstall_instance', instanceId)
+
+    reply.code(202).send({
+      message: 'Instance rebuild task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // 重建实例（创建新实例替换旧实例，不限制状态）
+  fastify.post<{
+    Params: { id: string }
+    Body: { image: string; sshKeyId?: number; imageAlias?: string; customInitCommandIds?: number[] }
+  }>('/:id/recreate', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          image: { type: 'string' },
+          imageAlias: { type: 'string' },
+          sshKeyId: { type: 'integer' },
+          customInitCommandIds: { type: 'array', items: { type: 'integer' }, maxItems: 20 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { image: string; sshKeyId?: number; imageAlias?: string; customInitCommandIds?: number[] }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 兼容前端的 image 和 imageAlias
+    const imageAlias = request.body.image || request.body.imageAlias
+
+    if (!imageAlias) {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_IMAGE_REQUIRED))
+    }
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // AUTH: 重建仅限实例所有者，管理员和宿主机所有者禁止
+    // 原因：重建会清除实例数据，影响用户资产安全
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许重建
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 注意：重建不限制实例状态，任何状态都可以重建（不同于重装）
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+
+
+    // 验证镜像是否在预设列表中
+    if (!await isValidSystemImage(imageAlias)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+    }
+
+    // 验证镜像与实例内存配置的兼容性（128MB 只允许 Alpine/Debian）
+    if (!await isImageCompatibleWithMemory(imageAlias, instance.memory)) {
+      return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+    }
+
+    const recreatePackage = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const recreateInstanceType = (recreatePackage as { instance_type?: 'container' | 'vm' } | null)?.instance_type || 'container'
+    const recreateImageAvailability = await getSystemImageAvailabilityForHost(imageAlias, instance.host_id, {
+      instanceType: recreateInstanceType,
+      memory: instance.memory
+    })
+    if (!recreateImageAvailability.ok) {
+      switch (recreateImageAvailability.reason) {
+        case 'host_not_found':
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        case 'image_not_found':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_NOT_FOUND))
+        case 'memory_incompatible':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_MEMORY_INCOMPATIBLE))
+        case 'instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.IMAGE_TYPE_MISMATCH))
+        case 'host_instance_type_mismatch':
+          return reply.code(400).send(apiError(ErrorCode.HOST_INSTANCE_TYPE_MISMATCH))
+        default:
+          return reply.code(400).send(apiError(ErrorCode.INSTANCE_IMAGE_UNAVAILABLE))
+      }
+    }
+
+    // 验证 SSH 密钥（如果提供）
+    const { sshKeyId, customInitCommandIds } = request.body
+    if (sshKeyId) {
+      const keyRecord = await db.getSSHKeyById(sshKeyId)
+      if (!keyRecord || keyRecord.user_id !== user.id) {
+        return reply.code(400).send(apiError(ErrorCode.SSH_KEY_NOT_OWNED))
+      }
+    }
+
+    // 验证自定义初始化命令（如果提供）
+    if (customInitCommandIds && customInitCommandIds.length > 0) {
+      const cmdValidation = await validateCommandsOwnership(customInitCommandIds, user.id)
+      if (!cmdValidation.valid) {
+        return reply.code(400).send({ error: 'Invalid custom init command IDs', code: 'INVALID_COMMAND_IDS' })
+      }
+    }
+
+    // 创建异步任务
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: instance.host_id,
+      userId: user.id,
+      taskType: 'recreate',
+      imageAlias,
+      sshKeyId,
+      customInitCommandIds
+    })
+
+    await createLog(user.id, 'instance', 'instance.recreate', `Queued recreate task for instance "${instance.name}" with image ${imageAlias}`, 'success', { instanceId })
+
+    // 清理已使用的验证记录
+    await consumeOperationVerification(user.id, 'recreate_instance', instanceId)
+
+    reply.code(202).send({
+      message: 'Instance recreate task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // 删除实例
+  fastify.delete<{ Params: { id: string }; Body: { reason?: string } }>('/:id', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          reason: { type: 'string', maxLength: 500 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Params: { id: string }; Body: { reason?: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const { reason } = request.body || {}
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、节点所有者
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查是否是宿主机拥有者（避免重复查询，复用checkInstanceOperationPermission的逻辑）
+    // 注意：checkInstanceOperationPermission已经检查了是否是宿主机拥有者，但我们需要明确知道以决定是否检查套餐限制
+    const host = await db.getHostById(instance.host_id)
+    const isHostOwner = !!(host && host.user_id === user.id)
+    const isAdmin = user.role === 'admin'
+    const isPrivilegedDeleter = isHostOwner || isAdmin
+
+    // 付费实例禁止删除（宿主机拥有者不受限制）
+    if (!isPrivilegedDeleter && instance.package_plan_id) {
+      return reply.code(403).send({
+        error: '付费实例不允许删除',
+        code: 'PAID_INSTANCE_DELETION_NOT_ALLOWED'
+      })
+    }
+
+    // 封禁状态检查：实例所有者不能删除被封禁的实例，仅节点所有者可以
+    // 这是安全措施，防止用户绕过前端禁用按钮通过API直接删除
+    if (instance.status === 'suspended' && !isPrivilegedDeleter) {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 检查套餐是否允许删除实例（宿主机拥有者不受限制）
+    if (!isPrivilegedDeleter && instance.package_id) {
+      const pkg = await db.getPackageById(instance.package_id)
+      // 默认值为false，只有明确设置为true时才允许删除
+      if (pkg && (pkg as any).allow_instance_deletion !== true) {
+        return reply.code(403).send({
+          error: 'Package does not allow instance deletion',
+          code: 'INSTANCE_DELETION_NOT_ALLOWED'
+        })
+      }
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+
+
+    try {
+      // 复用上面已获取的host
+      if (!host) {
+        throw new Error('Host not found')
+      }
+
+      // ===== 0. 关闭该实例的所有终端连接 =====
+      const closedSessions = closeInstanceSessions(instanceId, 'Instance is being deleted')
+      if (closedSessions > 0) {
+        console.log(`[Delete] Closed ${closedSessions} terminal session(s) for instance ${instanceId}`)
+      }
+
+      // 导入需要的删除函数
+      const { deleteBackup: deleteIncusBackup } = await import('../lib/incus/incus-backups.js')
+      const { sendNotification } = await import('../lib/notifier.js')
+
+      // 检查是否有正在进行的恢复任务
+      const activeRestoreTask = await prisma.restoreTask.findFirst({
+        where: {
+          instanceId,
+          status: { in: ['PENDING', 'PROCESSING'] }
+        }
+      })
+      if (activeRestoreTask) {
+        return reply.code(409).send({
+          error: '该实例有正在进行的恢复任务，请等待完成或取消',
+          code: 'RESTORE_IN_PROGRESS'
+        })
+      }
+
+      // 检查是否有正在进行的备份上传任务
+      const activeUploadTask = await prisma.backupUploadTask.findFirst({
+        where: {
+          instanceId,
+          status: { in: ['PENDING', 'PROCESSING'] }
+        }
+      })
+      if (activeUploadTask) {
+        return reply.code(409).send({
+          error: '该实例有正在进行的备份上传任务，请等待完成或取消',
+          code: 'UPLOAD_IN_PROGRESS'
+        })
+      }
+
+      // 检查是否有正在进行的实例操作任务
+      const activeInstanceTask = await getActiveTaskForInstance(instanceId)
+      if (activeInstanceTask) {
+        return reply.code(409).send({
+          error: '该实例有正在进行的操作任务，请等待完成',
+          code: 'TASK_IN_PROGRESS',
+          taskId: activeInstanceTask.id,
+          taskType: activeInstanceTask.taskType,
+          status: activeInstanceTask.status
+        })
+      }
+
+      const claimed = await claimInstanceForDelete(instanceId, instance.status as InstanceStatus)
+      if (!claimed) {
+        return reply.code(409).send({
+          error: '实例正在删除或已删除',
+          code: 'INSTANCE_DELETE_IN_PROGRESS'
+        })
+      }
+
+      // ===== 0.1 处理退款（节点所有者/管理员删除他人的付费实例时）=====
+      let hostOwnerRefundAmount = 0
+      if (isPrivilegedDeleter && instance.user_id !== user.id) {
+        const instanceBilling = await prisma.instance.findUnique({
+          where: { id: instance.id },
+          select: {
+            billingPrice: true,
+            billingCycle: true,
+            expiresAt: true,
+            packagePlanId: true
+          }
+        })
+
+        const refundInfo = instanceBilling
+          ? await db.calculateInstanceRefund({
+              id: instance.id,
+              billingPrice: instanceBilling.billingPrice ? Number(instanceBilling.billingPrice) : null,
+              billingCycle: instanceBilling.billingCycle,
+              expiresAt: instanceBilling.expiresAt,
+              packagePlanId: instanceBilling.packagePlanId
+            })
+          : { isPaid: false, refundAmount: 0 }
+
+        if (refundInfo.isPaid && refundInfo.refundAmount > 0) {
+          hostOwnerRefundAmount = refundInfo.refundAmount
+
+          try {
+            await prisma.$transaction(async (tx) => {
+              const instanceOwner = await tx.user.findUnique({
+                where: { id: instance.user_id },
+                select: { balance: true }
+              })
+              const oldBalance = Number(instanceOwner?.balance || 0)
+              const newBalance = oldBalance + hostOwnerRefundAmount
+
+              await tx.user.update({
+                where: { id: instance.user_id },
+                data: { balance: { increment: hostOwnerRefundAmount } }
+              })
+
+              await tx.balanceLog.create({
+                data: {
+                  userId: instance.user_id,
+                  type: 'refund',
+                  amount: hostOwnerRefundAmount,
+                  balanceBefore: oldBalance,
+                  balanceAfter: newBalance,
+                  instanceId: instance.id,
+                  remark: `托管实例被删除退款：${instance.name}`
+                }
+              })
+
+              await db.deductHostingBalance(
+                instance.host_id,
+                hostOwnerRefundAmount,
+                instance.id,
+                `删除托管实例退款扣除：${instance.name}`,
+                tx
+              )
+            })
+          } catch (refundError) {
+            await prisma.instance.updateMany({
+              where: { id: instanceId, status: 'deleted' },
+              data: { status: instance.status as InstanceStatus }
+            })
+            throw refundError
+          }
+        }
+      }
+
+      let client = null
+      try {
+        client = await getIncusClient(host)
+      } catch (clientError) {
+        const errorMessage = clientError instanceof Error ? clientError.message : String(clientError)
+        console.error('获取 Incus 客户端失败:', errorMessage)
+      }
+
+      // ===== 1. 删除反代站点（Caddy 远程 + 数据库）=====
+      const proxySites = await getProxySitesByInstanceId(instanceId)
+      if (proxySites.length > 0) {
+        // 尝试删除 Caddy 远程配置
+        if (host.caddy_enabled && host.caddy_username && host.caddy_password) {
+          const targetHost = host.nat_public_ip || host.ip_address
+          if (targetHost) {
+            const caddyClient = createCaddyClient({
+              host: targetHost,
+              port: host.caddy_port || 8444,
+              username: host.caddy_username,
+              password: host.caddy_password
+            })
+
+            for (const site of proxySites) {
+              try {
+                await caddyClient.deleteSite(site.domain)
+              } catch (caddyError) {
+                const errorMessage = caddyError instanceof Error ? caddyError.message : String(caddyError)
+                console.error(`删除 Caddy 反代站点失败 (${site.domain}):`, errorMessage)
+              }
+            }
+          }
+        }
+        // 始终删除数据库记录（无论 Caddy 是否启用）
+        for (const site of proxySites) {
+          await deleteProxySite(site.id)
+        }
+      }
+
+      // ===== 2. 删除端口映射（Incus 设备 + 数据库）=====
+      const portMappings = await db.getPortMappings(instanceId)
+      if (portMappings && portMappings.length > 0) {
+        for (const mapping of portMappings) {
+          const map = mapping as { id: number; protocol: string; public_port: number }
+          // 尝试删除 Incus 设备
+          if (client) {
+            const deviceName = `proxy-${map.protocol}-${map.public_port}`
+            try {
+              await removeDevice(client, instance.incus_id, deviceName)
+            } catch (deviceError) {
+              const errorMessage = deviceError instanceof Error ? deviceError.message : String(deviceError)
+              console.error(`删除端口映射设备失败 (${deviceName}):`, errorMessage)
+            }
+          }
+          // 始终删除数据库记录
+          await db.deletePortMapping(map.id)
+        }
+      }
+
+      // ===== 3. 删除快照（Incus 远程 + 数据库）=====
+      const snapshots = await db.getSnapshotsByInstanceId(instanceId)
+      if (snapshots.length > 0) {
+        for (const snapshot of snapshots) {
+          // 尝试删除 Incus 快照
+          if (client) {
+            try {
+              await deleteSnapshot(client, instance.incus_id, snapshot.incus_name)
+            } catch (snapshotError) {
+              const errorMessage = snapshotError instanceof Error ? snapshotError.message : String(snapshotError)
+              console.error(`删除 Incus 快照失败 (${snapshot.name}):`, errorMessage)
+            }
+          }
+          // 始终删除数据库记录
+          await db.deleteSnapshot(snapshot.id)
+        }
+      }
+
+      // ===== 4. 删除备份（Incus 远程 + 数据库软删除）=====
+      const backups = await db.getBackupsByInstanceId(instanceId)
+      if (backups.length > 0) {
+        for (const backup of backups) {
+          // 尝试删除 Incus 备份
+          if (client) {
+            try {
+              await deleteIncusBackup(client, instance.incus_id, backup.incus_name)
+            } catch (backupError) {
+              const errorMessage = backupError instanceof Error ? backupError.message : String(backupError)
+              console.error(`删除 Incus 备份失败 (${backup.name}):`, errorMessage)
+            }
+          }
+          // 始终软删除数据库记录
+          await db.deleteBackup(backup.id)
+        }
+      }
+
+      // ===== 5. 删除快照策略和备份策略 =====
+      try {
+        await prisma.snapshotPolicy.deleteMany({ where: { instanceId } })
+        await prisma.backupPolicy.deleteMany({ where: { instanceId } })
+      } catch (policyError) {
+        const errorMessage = policyError instanceof Error ? policyError.message : String(policyError)
+        console.error('删除策略失败:', errorMessage)
+      }
+
+      // ===== 5.1 删除流量相关记录 =====
+      try {
+        await prisma.trafficSnapshot.deleteMany({ where: { instanceId } })
+        await prisma.dailyTraffic.deleteMany({ where: { instanceId } })
+      } catch (trafficError) {
+        const errorMessage = trafficError instanceof Error ? trafficError.message : String(trafficError)
+        console.error('删除流量记录失败:', errorMessage)
+      }
+
+      // ===== 5.2 删除 IP 地址和 IPv6 网段记录 =====
+      try {
+        await prisma.ipAddress.deleteMany({ where: { instanceId } })
+        await prisma.ipv6Subnet.deleteMany({ where: { instanceId } })
+      } catch (ipError) {
+        const errorMessage = ipError instanceof Error ? ipError.message : String(ipError)
+        console.error('删除 IP 记录失败:', errorMessage)
+      }
+
+      // ===== 5.3 删除历史任务记录（已完成/失败的恢复任务、上传任务和实例任务）=====
+      try {
+        await prisma.restoreTask.deleteMany({
+          where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } }
+        })
+        await prisma.backupUploadTask.deleteMany({
+          where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } }
+        })
+        await prisma.instanceTask.deleteMany({
+          where: { instanceId, status: { in: ['COMPLETED', 'FAILED'] } }
+        })
+      } catch (taskError) {
+        const errorMessage = taskError instanceof Error ? taskError.message : String(taskError)
+        console.error('删除历史任务记录失败:', errorMessage)
+      }
+
+      // ===== 5.4 取消待处理的转移请求 =====
+      try {
+        await prisma.instanceTransfer.updateMany({
+          where: { instanceId, status: 'pending' },
+          data: { status: 'cancelled', cancelledAt: new Date() }
+        })
+      } catch (transferError) {
+        const errorMessage = transferError instanceof Error ? transferError.message : String(transferError)
+        console.error('取消转移请求失败:', errorMessage)
+      }
+
+      // ===== 6. 停止并删除 Incus 实例 =====
+      if (client) {
+        try {
+          if (instance.status === 'running') {
+            await stopInstance(client, instance.incus_id, true)
+          }
+          await deleteInstance(client, instance.incus_id)
+        } catch (incusError) {
+          const errorMessage = incusError instanceof Error ? incusError.message : String(incusError)
+          console.error('Incus 删除实例失败:', errorMessage)
+        }
+      }
+
+      // ===== 8. 释放用户配额和宿主机资源 =====
+      const portMappingsCount = portMappings?.length || 0
+      await db.rollbackResources({
+        hostId: instance.host_id,
+        cpu: instance.cpu,
+        memory: instance.memory,
+        disk: instance.disk,
+        portCount: portMappingsCount
+      })
+
+      // 重新计算宿主机资源使用量（包括端口）
+      const usedResources = await db.calculateHostResourcesFromInstances(instance.host_id)
+      // 重新计算端口映射使用量
+      const actualPortsUsed = await prisma.portMapping.count({
+        where: {
+          instance: {
+            hostId: instance.host_id,
+            status: { not: 'deleted' }
+          }
+        }
+      })
+      await db.updateHostResources(instance.host_id, {
+        cpuUsed: usedResources.cpuUsed,
+        memoryUsed: usedResources.memoryUsed,
+        diskUsed: usedResources.diskUsed
+      })
+      // 更新端口使用量
+      await prisma.host.update({
+        where: { id: instance.host_id },
+        data: { natPortsUsedCount: actualPortsUsed }
+      })
+
+      // ===== 10. 发送通知 =====
+      // 判断是否是宿主机所有者删除他人的实例
+      if (isPrivilegedDeleter && instance.user_id !== user.id) {
+        // 宿主机所有者删除他人的实例，如果提供了原因，发送特定通知给实例所有者
+        if (reason && reason.trim()) {
+          await sendNotification(instance.user_id, 'instance_deleted_by_host_owner', {
+            instanceName: instance.name,
+            hostName: host?.name || undefined,
+            deleteReason: reason.trim()
+          })
+        } else {
+          // 没有提供原因，发送普通删除通知
+          await sendNotification(instance.user_id, 'instance_deleted', {
+            instanceName: instance.name,
+            hostName: host?.name || undefined
+          })
+        }
+      } else {
+        // 用户删除自己的实例，发送通知给自己
+        await sendNotification(user.id, 'instance_deleted', {
+          instanceName: instance.name,
+          hostName: host?.name || undefined
+        })
+      }
+
+      // 无论谁删除的，都向套餐绑定的通知渠道发送"资源释放"通知
+      if (instance.package_id) {
+        const { sendReleaseNotification } = await import('../lib/release-notifier.js')
+        sendReleaseNotification({
+          packageId: instance.package_id,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          source: isPrivilegedDeleter && instance.user_id !== user.id
+            ? (isAdmin ? '管理员删除实例' : '节点所有者删除实例')
+            : '用户删除实例'
+        }).catch(() => { })
+      }
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.delete',
+        `Deleted instance "${instance.name}" [host: ${host?.name || 'unknown'}, user: ${instance.user_id}, released resources: CPU=${instance.cpu}%, Memory=${instance.memory}MB, Disk=${instance.disk}MB, ports=${portMappingsCount}]`,
+        'success',
+        { instanceId }
+      )
+
+      // 清理已使用的验证记录
+      await consumeOperationVerification(user.id, 'delete_instance', instanceId)
+
+      return {
+        message: 'Instance deleted',
+        refundAmount: hostOwnerRefundAmount > 0 ? hostOwnerRefundAmount : undefined
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 添加端口映射
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      protocol: 'tcp' | 'udp'
+      publicPort?: number
+      privatePort: number
+      remark?: string
+    }
+  }>('/:id/ports', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['protocol', 'privatePort'],
+        properties: {
+          protocol: { type: 'string', enum: ['tcp', 'udp'] },
+          publicPort: { type: 'integer', minimum: 1, maximum: 65535 },
+          privatePort: { type: 'integer', minimum: 1, maximum: 65535 },
+          remark: { type: 'string', maxLength: 100 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      protocol: 'tcp' | 'udp'
+      publicPort?: number
+      privatePort: number
+      remark?: string
+    }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    let { protocol, publicPort, privatePort, remark } = request.body
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许添加端口映射
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (!['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(instance.network_mode)) {
+      return reply.code(400).send(apiError(ErrorCode.PORT_MAPPING_NAT_ONLY))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    const quotaCheck = await db.checkPortQuota(instance.user_id, instanceId)
+    if (!quotaCheck.allowed) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_PORT_EXCEEDED, quotaCheck.message))
+    }
+
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    let allocatedPort: number | undefined = publicPort
+    if (!allocatedPort) {
+      const port = await db.allocatePort(instance.host_id, protocol)
+      if (!port) {
+        return reply.code(503).send(apiError(ErrorCode.PORT_NO_AVAILABLE))
+      }
+      allocatedPort = port
+    } else {
+      if (host.nat_port_start && host.nat_port_end) {
+        if (allocatedPort < host.nat_port_start || allocatedPort > host.nat_port_end) {
+          return reply.code(400).send(apiError(ErrorCode.PORT_RANGE_INVALID, `${host.nat_port_start}-${host.nat_port_end}`))
+        }
+      }
+
+      const existingPort = await db.checkPortInUse(instance.host_id, allocatedPort, protocol)
+      if (existingPort) {
+        return reply.code(400).send(apiError(ErrorCode.PORT_IN_USE))
+      }
+    }
+
+    const createdDeviceNames: string[] = []
+    try {
+      const client = await getIncusClient(host)
+
+      const deviceName = `proxy-${protocol}-${allocatedPort}`
+      // 获取当前用于建立底层设备的实例准确类别（解决 params.type 不能 100% 同步问题）
+      let isVM = false;
+      if (instance.package_id) {
+        const pkg = await prisma.package.findUnique({
+          where: { id: instance.package_id }
+        });
+        isVM = !!pkg && (('instance_type' in pkg && pkg.instance_type === 'vm') || ('instanceType' in pkg && pkg.instanceType === 'vm'));
+      }
+      const actualInstanceType = isVM ? 'virtual-machine' : 'container';
+      if (instance.network_mode === 'ipv6_only') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'IPv6 Only instances do not require port mappings'))
+      }
+
+      // 获取保底 IPv6 供双路网卡调用
+      let explicitIpv6 = (host as any).nat_bind_ipv6 || host.nat_public_ipv6 || host.ipv6_gateway || (host.ip_address?.includes(':') ? host.ip_address : null);
+      if (!explicitIpv6 && host) {
+        try {
+          const ipv6Alias = await prisma.hostAddressAlias.findFirst({
+            where: { hostId: host.id, kind: 'ipv6' },
+            select: { address: true }
+          })
+          if (ipv6Alias?.address) explicitIpv6 = ipv6Alias.address
+        } catch { }
+      }
+
+      // == 通过分离解耦工厂彻底剥夺创建网络监听阻拦的逻辑 ==
+      const proxyStrategy = ProxyStrategyFactory.getStrategy(actualInstanceType);
+      const bindableIpv4 = selectBindableIpv4ListenAddress(
+        (host as any).nat_bind_ip || null,
+        host.nat_public_ip || null,
+        host.url,
+        host.ip_address || null
+      )
+      const proxyDeviceRes = proxyStrategy.createProxyDevice(bindableIpv4, explicitIpv6, instance.network_mode, protocol, allocatedPort, privatePort);
+
+      const deviceConfigs = proxyDeviceRes.deviceConfigs
+        || (proxyDeviceRes.deviceConfig ? [{ deviceConfig: proxyDeviceRes.deviceConfig }] : [])
+
+      if (!proxyDeviceRes.success || deviceConfigs.length === 0) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, proxyDeviceRes.errorMessage || '底层代理生成异常被工厂截断'));
+      }
+
+      for (const deviceEntry of deviceConfigs) {
+        const resolvedDeviceName = `${deviceName}${deviceEntry.nameSuffix || ''}`
+        await addDevice(client, instance.incus_id, resolvedDeviceName, deviceEntry.deviceConfig as Record<string, string>)
+        createdDeviceNames.push(resolvedDeviceName)
+      }
+
+      const mappingId = await db.createPortMapping({
+        instanceId: instanceId,
+        hostId: instance.host_id,
+        protocol,
+        publicPort: allocatedPort,
+        privatePort,
+        remark: remark?.trim()
+      })
+
+      await createLog(user.id, 'instance', 'port.add', `Added port mapping for instance "${instance.name}" [host: ${host?.name || 'unknown'}, ${protocol.toUpperCase()} ${allocatedPort}:${privatePort}${remark ? `, remark: ${remark}` : ''}]`, 'success', { instanceId })
+
+      return {
+        message: 'Port mapping added',
+        mapping: { id: mappingId, protocol, publicPort: allocatedPort, privatePort, remark: remark?.trim() || null }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      try {
+        const host = await db.getHostById(instance.host_id)
+        if (host) {
+          const client = await getIncusClient(host)
+          const deviceName = `proxy-${protocol}-${allocatedPort}`
+          await removeDevice(client, instance.incus_id, deviceName)
+          await removeDevice(client, instance.incus_id, `${deviceName}-v6`)
+        }
+      } catch {
+        // 忽略回滚失败，保留原始错误
+      }
+      await createLog(user.id, 'instance', 'port.add', `Failed to add port mapping: ${errorMessage}`, 'failed', { instanceId })
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 删除端口映射
+  fastify.delete<{ Params: { id: string; portId: string } }>('/:id/ports/:portId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string; portId: string } }>, reply: FastifyReply) => {
+    const { id, portId } = request.params
+    const instanceId = Number(id)
+    const portMappingId = Number(portId)
+
+    if (isNaN(instanceId) || isNaN(portMappingId)) {
+      return reply.code(400).send(apiError(ErrorCode.PORT_MAPPING_INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许删除端口映射
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    const mapping = await db.getPortMappingById(portMappingId)
+    if (!mapping || mapping.instance_id !== instanceId) {
+      return reply.code(404).send(apiError(ErrorCode.PORT_MAPPING_NOT_FOUND))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    try {
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        throw new Error('Host not found')
+      }
+      const client = await getIncusClient(host)
+
+      const deviceName = `proxy-${mapping.protocol}-${mapping.public_port}`
+      await removeDevice(client, instance.incus_id, deviceName)
+      await removeDevice(client, instance.incus_id, `${deviceName}-v6`)
+
+      await db.deletePortMapping(portMappingId)
+
+      await createLog(user.id, 'instance', 'port.delete', `Deleted port mapping for instance "${instance.name}" [${mapping.protocol.toUpperCase()} ${mapping.public_port}:${mapping.private_port}]`, 'success', { instanceId })
+
+      return { message: 'Port mapping deleted' }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(user.id, 'instance', 'port.delete', `Failed to delete port mapping: ${errorMessage}`, 'failed', { instanceId })
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 批量添加端口映射（支持连续端口范围）
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      protocol: 'tcp' | 'udp' | 'both'
+      privatePortStart: number
+      privatePortEnd: number
+      publicPortStart?: number
+      publicPortEnd?: number
+      remark?: string
+      // 用于冲突解决后重新提交，指定每个内网端口对应的公网端口
+      portMappings?: Array<{ privatePort: number; publicPort: number }>
+    }
+  }>('/:id/ports/batch', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['protocol', 'privatePortStart', 'privatePortEnd'],
+        properties: {
+          protocol: { type: 'string', enum: ['tcp', 'udp', 'both'] },
+          privatePortStart: { type: 'integer', minimum: 1, maximum: 65535 },
+          privatePortEnd: { type: 'integer', minimum: 1, maximum: 65535 },
+          publicPortStart: { type: 'integer', minimum: 1, maximum: 65535 },
+          publicPortEnd: { type: 'integer', minimum: 1, maximum: 65535 },
+          remark: { type: 'string', maxLength: 100 },
+          portMappings: {
+            type: 'array',
+            items: {
+              type: 'object',
+              required: ['privatePort', 'publicPort'],
+              properties: {
+                privatePort: { type: 'integer', minimum: 1, maximum: 65535 },
+                publicPort: { type: 'integer', minimum: 1, maximum: 65535 }
+              }
+            }
+          }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      protocol: 'tcp' | 'udp' | 'both'
+      privatePortStart: number
+      privatePortEnd: number
+      publicPortStart?: number
+      publicPortEnd?: number
+      remark?: string
+      portMappings?: Array<{ privatePort: number; publicPort: number }>
+    }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { protocol, privatePortStart, privatePortEnd, publicPortStart, publicPortEnd, remark, portMappings } = request.body
+    const { user } = request
+
+    // 1. 验证实例
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许添加端口映射
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (!['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(instance.network_mode)) {
+      return reply.code(400).send(apiError(ErrorCode.PORT_MAPPING_NAT_ONLY))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 2. 计算端口数量
+    const privatePortCount = privatePortEnd - privatePortStart + 1
+    if (privatePortCount <= 0 || privatePortCount > 100) {
+      return reply.code(400).send({ error: '端口范围无效，最多支持 100 个连续端口' })
+    }
+
+    // 3. 检查配额
+    // TCP/UDP 各占 1 个配额，Both 占 2 个配额
+    const quotaNeeded = protocol === 'both' ? privatePortCount * 2 : privatePortCount
+    const quotaCheck = await db.checkPortQuota(instance.user_id, instanceId)
+    const remainingQuota = quotaCheck.limit - quotaCheck.current
+
+    if (remainingQuota < quotaNeeded) {
+      return reply.code(400).send({
+        error: ErrorCode.QUOTA_PORT_BATCH_EXCEEDED,
+        message: `配额不足，需要 ${quotaNeeded} 个，剩余 ${remainingQuota} 个`,
+        needed: quotaNeeded,
+        remaining: remainingQuota
+      })
+    }
+
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 4. 确定映射关系
+    let finalMappings: Array<{ privatePort: number; publicPort: number }> = []
+
+    if (portMappings && portMappings.length > 0) {
+      // 使用用户提供的映射（冲突解决后重新提交）
+      finalMappings = portMappings
+    } else if (publicPortStart !== undefined && publicPortEnd !== undefined) {
+      // 用户指定了公网端口范围
+      const publicPortCount = publicPortEnd - publicPortStart + 1
+      if (publicPortCount !== privatePortCount) {
+        return reply.code(400).send(apiError(ErrorCode.PORT_RANGE_MISMATCH, `内网 ${privatePortCount} 个端口，公网 ${publicPortCount} 个端口`))
+      }
+
+      // 检查公网端口范围是否在允许范围内
+      if (host.nat_port_start && host.nat_port_end) {
+        if (publicPortStart < host.nat_port_start || publicPortEnd > host.nat_port_end) {
+          return reply.code(400).send(apiError(ErrorCode.PORT_RANGE_INVALID, `允许范围: ${host.nat_port_start}-${host.nat_port_end}`))
+        }
+      }
+
+      // 生成映射关系
+      for (let i = 0; i < privatePortCount; i++) {
+        finalMappings.push({
+          privatePort: privatePortStart + i,
+          publicPort: publicPortStart + i
+        })
+      }
+
+      // 5. 检查端口冲突（需要检查 TCP 和 UDP）
+      const publicPorts = finalMappings.map(m => m.publicPort)
+      const protocolsToCheck: Array<'tcp' | 'udp'> = protocol === 'both' ? ['tcp', 'udp'] : [protocol]
+
+      const allConflicts: Array<{ publicPort: number; protocol: string }> = []
+      for (const proto of protocolsToCheck) {
+        const conflicts = await db.checkPortsInUse(instance.host_id, publicPorts, proto)
+        conflicts.forEach(c => allConflicts.push({ publicPort: c.port, protocol: proto }))
+      }
+
+      if (allConflicts.length > 0) {
+        // 去重并获取建议端口
+        const conflictPorts = [...new Set(allConflicts.map(c => c.publicPort))]
+        const suggestedPorts = await db.suggestAvailablePorts(
+          instance.host_id,
+          conflictPorts.length,
+          protocol === 'both' ? 'tcp' : protocol,
+          publicPorts.filter(p => !conflictPorts.includes(p)),
+          protocol === 'both'  // Both 模式需要同时检查 TCP 和 UDP
+        )
+
+        const conflictsWithSuggestions = conflictPorts.map((port, index) => ({
+          publicPort: port,
+          suggestedPort: suggestedPorts[index] || null
+        }))
+
+        return reply.code(409).send({
+          error: ErrorCode.PORT_CONFLICT,
+          message: '部分端口已被占用',
+          conflicts: conflictsWithSuggestions,
+          availableCount: suggestedPorts.length
+        })
+      }
+    } else {
+      // 公网端口留空，自动分配
+      const protocolForAlloc = protocol === 'both' ? 'tcp' : protocol
+      const allocatedPorts = await db.allocatePorts(
+        instance.host_id,
+        privatePortCount,
+        protocolForAlloc,
+        protocol === 'both'  // Both 模式需要同时检查 TCP 和 UDP
+      )
+
+      if (allocatedPorts.length < privatePortCount) {
+        return reply.code(503).send({
+          error: ErrorCode.PORT_NO_AVAILABLE,
+          message: `可用端口不足，需要 ${privatePortCount} 个，只有 ${allocatedPorts.length} 个可用`
+        })
+      }
+
+      // 排序以保证顺序
+      allocatedPorts.sort((a, b) => a - b)
+
+      for (let i = 0; i < privatePortCount; i++) {
+        finalMappings.push({
+          privatePort: privatePortStart + i,
+          publicPort: allocatedPorts[i]
+        })
+      }
+    }
+
+    // 6. 批量创建映射
+    const createdMappings: Array<{ id: number; protocol: string; publicPort: number; privatePort: number }> = []
+    const createdDeviceNames: string[] = []
+    try {
+      const client = await getIncusClient(host)
+
+      // 对于 Both 模式，需要创建 TCP 和 UDP 两组映射
+      const protocolsToCreate: Array<'tcp' | 'udp'> = protocol === 'both' ? ['tcp', 'udp'] : [protocol]
+
+      for (const proto of protocolsToCreate) {
+        for (const mapping of finalMappings) {
+          // 再次检查端口是否被占用（防止并发冲突）
+          const existingPort = await db.checkPortInUse(instance.host_id, mapping.publicPort, proto)
+          if (existingPort) {
+            // 回滚已创建的映射
+            for (const created of createdMappings) {
+              try {
+                const deviceName = `proxy-${created.protocol}-${created.publicPort}`
+                await removeDevice(client, instance.incus_id, deviceName)
+                await removeDevice(client, instance.incus_id, `${deviceName}-v6`)
+                await db.deletePortMapping(created.id)
+              } catch (e) {
+                // 忽略回滚错误
+              }
+            }
+            return reply.code(400).send(apiError(ErrorCode.PORT_IN_USE, `端口 ${mapping.publicPort} (${proto.toUpperCase()}) 已被占用`))
+          }
+
+          const deviceName = `proxy-${proto}-${mapping.publicPort}`
+          // 获取当前用于建立底层设备的实例准确类别
+          let isVM = false;
+          if (instance.package_id) {
+            const pkg = await prisma.package.findUnique({
+              where: { id: instance.package_id }
+            });
+            isVM = !!pkg && (('instance_type' in pkg && pkg.instance_type === 'vm') || ('instanceType' in pkg && pkg.instanceType === 'vm'));
+          }
+          const actualInstanceType = isVM ? 'virtual-machine' : 'container';
+          if (instance.network_mode === 'ipv6_only') {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'IPv6 Only instances do not require port mappings'))
+          }
+
+          // 提取确切 IPv6 供给代理防崩
+          let explicitBatchIpv6 = (host as any).nat_bind_ipv6 || host.nat_public_ipv6 || host.ipv6_gateway || (host.ip_address?.includes(':') ? host.ip_address : null);
+          if (!explicitBatchIpv6 && host) {
+            try {
+              const ipv6Alias = await prisma.hostAddressAlias.findFirst({
+                where: { hostId: host.id, kind: 'ipv6' },
+                select: { address: true }
+              })
+              if (ipv6Alias?.address) explicitBatchIpv6 = ipv6Alias.address
+            } catch { }
+          }
+
+          // == 一切参数交付给隔离后的独立网络策略类以规避共振 ==
+          const proxyStrategy = ProxyStrategyFactory.getStrategy(actualInstanceType);
+          const bindableIpv4 = selectBindableIpv4ListenAddress(
+            (host as any).nat_bind_ip || null,
+            host.nat_public_ip || null,
+            host.url,
+            host.ip_address || null
+          )
+          const proxyDeviceRes = proxyStrategy.createProxyDevice(bindableIpv4, explicitBatchIpv6, instance.network_mode, proto, mapping.publicPort, mapping.privatePort);
+
+          const deviceConfigs = proxyDeviceRes.deviceConfigs
+            || (proxyDeviceRes.deviceConfig ? [{ deviceConfig: proxyDeviceRes.deviceConfig }] : [])
+
+          if (!proxyDeviceRes.success || deviceConfigs.length === 0) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, proxyDeviceRes.errorMessage || '代理对象工厂拦截异常'));
+          }
+
+          for (const deviceEntry of deviceConfigs) {
+            const resolvedDeviceName = `${deviceName}${deviceEntry.nameSuffix || ''}`
+            await addDevice(client, instance.incus_id, resolvedDeviceName, deviceEntry.deviceConfig as Record<string, string>)
+            createdDeviceNames.push(resolvedDeviceName)
+          }
+
+          const mappingId = await db.createPortMapping({
+            instanceId,
+            hostId: instance.host_id,
+            protocol: proto,
+            publicPort: mapping.publicPort,
+            privatePort: mapping.privatePort,
+            remark: remark?.trim()
+          })
+
+          createdMappings.push({
+            id: mappingId,
+            protocol: proto,
+            publicPort: mapping.publicPort,
+            privatePort: mapping.privatePort
+          })
+        }
+      }
+
+      await createLog(
+        user.id,
+        'instance',
+        'port.batch_add',
+        `Batch added ${createdMappings.length} port mappings for instance "${instance.name}" [host: ${host?.name || 'unknown'}, ${protocol.toUpperCase()}, ports: ${privatePortStart}-${privatePortEnd}]`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: 'Batch port mapping added',
+        mappings: createdMappings,
+        count: createdMappings.length
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      try {
+        const client = await getIncusClient(host)
+        for (const createdDeviceName of createdDeviceNames) {
+          await removeDevice(client, instance.incus_id, createdDeviceName)
+        }
+        for (const created of createdMappings) {
+          await db.deletePortMapping(created.id)
+        }
+      } catch {
+        // 忽略回滚失败，保留原始错误
+      }
+      await createLog(user.id, 'instance', 'port.batch_add', `Failed to batch add port mappings: ${errorMessage}`, 'failed', { instanceId })
+      return reply.code(500).send({ error: errorMessage })
+    }
+  })
+
+  // 设置实例配额
+  fastify.patch<{
+    Params: { id: string }
+    Body: {
+      portLimit?: number | null
+      snapshotLimit?: number | null
+      backupLimit?: number | null
+      siteLimit?: number | null
+    }
+  }>('/:id/quota', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          portLimit: { type: ['integer', 'null'], minimum: 1, maximum: 1000 },
+          snapshotLimit: { type: ['integer', 'null'], minimum: 0, maximum: 1000 },
+          backupLimit: { type: ['integer', 'null'], minimum: 0, maximum: 1000 },
+          siteLimit: { type: ['integer', 'null'], minimum: 0, maximum: 1000 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      portLimit?: number | null
+      snapshotLimit?: number | null
+      backupLimit?: number | null
+      siteLimit?: number | null
+    }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { portLimit, snapshotLimit, backupLimit, siteLimit } = request.body
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员或宿主机所有者可以修改实例配额
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (user.role !== 'admin' && host.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 新配额系统：实例级别的端口/快照/备份/站点限制独立存储，不再与用户配额关联
+    const newPortLimit = portLimit !== undefined ? (portLimit || null) : instance.port_limit
+    const newSnapshotLimit = snapshotLimit !== undefined ? (snapshotLimit || null) : instance.snapshot_limit
+    const newBackupLimit = backupLimit !== undefined ? (backupLimit || null) : instance.backup_limit
+    const newSiteLimit = siteLimit !== undefined ? (siteLimit === 0 ? 0 : (siteLimit || null)) : instance.site_limit
+
+    const portMappings = await db.getPortMappings(instanceId)
+    const currentPortUsed = portMappings.length
+
+    // 使用 Prisma 查询快照和备份数量
+    const currentSnapshotUsed = await prisma.snapshot.count({
+      where: { instanceId }
+    })
+
+    const currentBackupUsed = await prisma.backup.count({
+      where: {
+        instanceId,
+        status: { not: 'deleted' }
+      }
+    })
+
+    // 验证新限制不小于当前使用量
+    if (newPortLimit !== null && newPortLimit < currentPortUsed) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_PORT_BELOW_USED, `used: ${currentPortUsed}, set: ${newPortLimit}`))
+    }
+
+    if (newSnapshotLimit !== null && newSnapshotLimit < currentSnapshotUsed) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_SNAPSHOT_BELOW_USED, `used: ${currentSnapshotUsed}, set: ${newSnapshotLimit}`))
+    }
+
+    if (newBackupLimit !== null && newBackupLimit < currentBackupUsed) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_BACKUP_BELOW_USED, `used: ${currentBackupUsed}, set: ${newBackupLimit}`))
+    }
+
+    // 验证：端口数、快照数、备份数必须在 1-1000 范围内（null 表示不限制）
+    if (newPortLimit !== null && (newPortLimit < 1 || newPortLimit > 1000)) {
+      return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, 'Port limit must be between 1 and 1000'))
+    }
+
+    if (newSnapshotLimit !== null && (newSnapshotLimit < 1 || newSnapshotLimit > 1000)) {
+      return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, 'Snapshot limit must be between 1 and 1000'))
+    }
+
+    if (newBackupLimit !== null && (newBackupLimit < 1 || newBackupLimit > 1000)) {
+      return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, 'Backup limit must be between 1 and 1000'))
+    }
+
+    // 验证站点限制：0 表示无配额，null 表示继承套餐
+    if (newSiteLimit !== null && (newSiteLimit < 0 || newSiteLimit > 1000)) {
+      return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, 'Site limit must be between 0 and 1000 (0 = no quota)'))
+    }
+
+    // 更新实例配额
+    await db.updateInstanceQuota(instanceId, {
+      portLimit: portLimit !== undefined ? (portLimit ?? undefined) : undefined,
+      snapshotLimit: snapshotLimit !== undefined ? (snapshotLimit ?? undefined) : undefined,
+      backupLimit: backupLimit !== undefined ? (backupLimit ?? undefined) : undefined,
+      siteLimit: siteLimit !== undefined ? (siteLimit ?? undefined) : undefined
+    })
+
+    const quotaChanges: string[] = []
+    if (portLimit !== undefined) quotaChanges.push(`port: ${portLimit}`)
+    if (snapshotLimit !== undefined) quotaChanges.push(`snapshot: ${snapshotLimit === 0 ? 'no quota' : snapshotLimit}`)
+    if (backupLimit !== undefined) quotaChanges.push(`backup: ${backupLimit === 0 ? 'no quota' : backupLimit}`)
+    if (siteLimit !== undefined) quotaChanges.push(`site: ${siteLimit === 0 ? 'no quota' : (siteLimit || 'inherit')}`)
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.update_quota',
+      `Updated instance "${instance.name}" quota: ${quotaChanges.join(', ')}`,
+      'success',
+      { instanceId }
+    )
+
+    return { message: 'Instance quota updated' }
+  })
+
+  // ==================== 修改实例资源配置 ====================
+
+  /**
+   * 修改实例资源配置（CPU、内存、磁盘）
+   * 支持单项或多项同时修改，实时生效无需重启
+   */
+  fastify.patch<{
+    Params: { id: string }
+    Body: {
+      cpu?: number
+      memory?: number
+      disk?: number
+    }
+  }>('/:id/config', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          cpu: { type: 'integer', minimum: 15, maximum: 10000 },
+          memory: { type: 'integer', minimum: 128, maximum: 524288 },
+          disk: { type: 'number', minimum: 512, maximum: 10485760 },
+          monthlyTrafficLimit: { type: ['string', 'null'] }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      cpu?: number
+      memory?: number
+      disk?: number
+      monthlyTrafficLimit?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { cpu, memory, disk } = request.body
+    const { user } = request
+
+    // 检查是否有任何修改
+    const { monthlyTrafficLimit } = request.body as { monthlyTrafficLimit?: string | null }
+    if (cpu === undefined && memory === undefined && disk === undefined && monthlyTrafficLimit === undefined) {
+      return reply.code(400).send(apiError(ErrorCode.CONFIG_NO_CHANGES))
+    }
+
+    // 获取实例
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 权限验证：管理员或宿主机所有者可以修改配置
+    if (user.role !== 'admin' && host.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查实例状态：只有 running 或 stopped 状态才能修改配置
+    if (instance.status !== 'running' && instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID, `current status: ${instance.status}`))
+    }
+
+    // 计算新配置值（未修改的保持原值）
+    // disk 可能是小数（前端以 GB 为单位转换为 MB），需要四舍五入
+    const newCpu = cpu ?? instance.cpu
+    const newMemory = memory ?? instance.memory
+    const newDisk = disk !== undefined ? Math.round(disk) : instance.disk
+    // 流量限制：如果传入null则清空，如果传入字符串则转换为BigInt
+    let newTrafficLimit: bigint | null = null
+    if (monthlyTrafficLimit !== undefined) {
+      if (monthlyTrafficLimit === null || monthlyTrafficLimit === '') {
+        newTrafficLimit = null
+      } else {
+        try {
+          newTrafficLimit = BigInt(monthlyTrafficLimit)
+          if (newTrafficLimit < 0n) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Traffic limit must be non-negative'))
+          }
+        } catch {
+          return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid traffic limit format'))
+        }
+      }
+    } else {
+      // 未修改时保持原值
+      newTrafficLimit = instance.monthly_traffic_limit ? BigInt(instance.monthly_traffic_limit) : null
+    }
+
+    // 宿主机所有者修改配置时不再进行套餐匹配验证
+
+    // 宿主机信息已在权限检查时获取
+
+    // 磁盘缩小限制：只有ZFS文件系统允许缩小，且不能小于已用容量
+    if (disk !== undefined && disk < instance.disk) {
+      // 获取storageDriver（可能是storage_driver或storageDriver）
+      const storageDriver = (host as any).storage_driver || (host as any).storageDriver || 'lvm'
+
+      // 只有ZFS文件系统允许缩小
+      if (storageDriver !== 'zfs') {
+        return reply.code(400).send(apiError(ErrorCode.CONFIG_DISK_CANNOT_SHRINK, `current: ${instance.disk} MB`))
+      }
+
+      // ZFS允许缩小，但需要检查不能小于已用容量
+      // 获取当前实例的已用磁盘容量
+      let diskUsageMB = 0
+      if (instance.status === 'running') {
+        try {
+          const client = await getIncusClient(host)
+          const state = await getInstanceState(client, instance.incus_id) as {
+            disk?: { root?: { usage?: number } }
+          }
+          if (state.disk?.root?.usage) {
+            diskUsageMB = Math.ceil(state.disk.root.usage / 1024 / 1024)
+          }
+        } catch (err) {
+          console.error('获取实例磁盘使用量失败:', err)
+          // 如果获取失败，使用保守策略：不允许缩小
+          return reply.code(400).send(apiError(ErrorCode.CONFIG_DISK_CANNOT_SHRINK, `无法获取磁盘使用量，不允许缩小`))
+        }
+      } else {
+        // 实例未运行，无法获取实时使用量，使用保守策略：不允许缩小到小于当前磁盘的90%
+        // 这是一个安全措施，避免缩小过多导致数据丢失
+        diskUsageMB = Math.ceil(instance.disk * 0.9)
+      }
+
+      // 不能缩小到小于已用容量
+      if (disk < diskUsageMB) {
+        return reply.code(400).send(apiError(ErrorCode.CONFIG_DISK_CANNOT_SHRINK, `不能缩小到小于已用容量 ${diskUsageMB} MB`))
+      }
+    }
+
+    // 计算资源变化量
+    const cpuDelta = newCpu - instance.cpu
+    const memoryDelta = newMemory - instance.memory
+    const diskDelta = newDisk - instance.disk
+    const currentTrafficLimit = instance.monthly_traffic_limit ? BigInt(instance.monthly_traffic_limit) : null
+    const trafficChanged = monthlyTrafficLimit !== undefined && newTrafficLimit !== currentTrafficLimit
+
+    // 如果没有实际变化，直接返回成功
+    if (cpuDelta === 0 && memoryDelta === 0 && diskDelta === 0 && !trafficChanged) {
+      return { message: 'No changes applied', instance: { id: instanceId, cpu: instance.cpu, memory: instance.memory, disk: instance.disk } }
+    }
+
+    // 新配额系统：CPU/内存/磁盘限制在套餐包级别，不再检查用户配额
+
+    // 验证宿主机资源（只检查增量）
+
+    // 检查宿主机 CPU 配额
+    if (cpuDelta > 0) {
+      const cpuAllowanceMax = (host as any).cpu_allowance_max
+      if (cpuAllowanceMax && cpuAllowanceMax > 0) {
+        if (host.cpu_used + cpuDelta > cpuAllowanceMax) {
+          return reply.code(400).send(apiError(ErrorCode.HOST_RESOURCES_INSUFFICIENT, `CPU allowance insufficient`))
+        }
+      }
+    }
+
+    // 检查宿主机内存
+    if (memoryDelta > 0) {
+      const memoryMax = (host as any).memory_max || 0
+      if (memoryMax > 0 && host.memory_used + memoryDelta > memoryMax) {
+        return reply.code(400).send(apiError(ErrorCode.HOST_RESOURCES_INSUFFICIENT, `Memory insufficient`))
+      }
+    }
+
+    // 磁盘配额检查已移除：不再限制磁盘空间
+
+    try {
+      // 调用 Incus API 更新配置
+      const client = await getIncusClient(host)
+
+      const { patchInstanceResources } = await import('../lib/incus/incus-instances.js')
+      await patchInstanceResources(client, instance.incus_id, {
+        cpu: cpu !== undefined ? newCpu : undefined,
+        memory: memory !== undefined ? newMemory : undefined,
+        disk: disk !== undefined ? newDisk : undefined
+      })
+
+      // 更新数据库
+      await db.updateInstanceResources(instanceId, {
+        cpu: cpu !== undefined ? newCpu : undefined,
+        memory: memory !== undefined ? newMemory : undefined,
+        disk: disk !== undefined ? newDisk : undefined,
+        monthlyTrafficLimit: monthlyTrafficLimit !== undefined ? newTrafficLimit : undefined
+      })
+
+      // 新配额系统：不再更新用户配额使用量（CPU/内存/磁盘不在用户级别限制）
+
+      // 更新宿主机资源使用量
+      if (cpuDelta !== 0 || memoryDelta !== 0 || diskDelta !== 0) {
+        await db.updateHostResources(instance.host_id, {
+          cpuUsed: host.cpu_used + cpuDelta,
+          memoryUsed: host.memory_used + memoryDelta,
+          diskUsed: host.disk_used + diskDelta
+        })
+      }
+
+      // 记录日志
+      const changes: string[] = []
+      if (cpu !== undefined) changes.push(`CPU: ${instance.cpu}% → ${newCpu}%`)
+      if (memory !== undefined) changes.push(`Memory: ${instance.memory}MB → ${newMemory}MB`)
+      if (disk !== undefined) changes.push(`Disk: ${instance.disk}MB → ${newDisk}MB`)
+      if (monthlyTrafficLimit !== undefined) {
+        const currentGB = currentTrafficLimit ? (Number(currentTrafficLimit) / (1024 * 1024 * 1024)).toFixed(1) : '0'
+        const newGB = newTrafficLimit ? (Number(newTrafficLimit) / (1024 * 1024 * 1024)).toFixed(1) : '0'
+        changes.push(`Traffic: ${currentGB}GB → ${newGB}GB`)
+      }
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.update_config',
+        `Updated instance "${instance.name}" config: ${changes.join(', ')}`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: 'Instance configuration updated',
+        instance: {
+          id: instanceId,
+          cpu: newCpu,
+          memory: newMemory,
+          disk: newDisk
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(
+        user.id,
+        'instance',
+        'instance.update_config',
+        `Failed to update instance "${instance.name}" config: ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+      return reply.code(500).send(apiError(ErrorCode.CONFIG_UPDATE_FAILED, errorMessage))
+    }
+  })
+
+  // ==================== 复制实例 ====================
+
+  /**
+   * 复制实例（克隆）
+   * 要求：实例必须处于停止状态
+   */
+  fastify.post<{ Params: { id: string } }>('/:id/clone', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+    const { user } = request
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const sourceInstance = await db.getInstanceById(instanceId)
+    if (!sourceInstance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // AUTH004: 克隆实例仅限实例所有者，管理员和宿主机所有者禁止
+    // 原因：克隆会复制实例数据，属于敏感操作
+    if (sourceInstance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许克隆
+    if (sourceInstance.status === 'suspended') {
+      if (sourceInstance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(sourceInstance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查实例状态：必须是停止状态
+    if (sourceInstance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STOP_REQUIRED))
+    }
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    // 检查宿主机资源是否足够（克隆会消耗与源实例相同的资源）
+    const hostWithQuota = host as typeof host & { cpu_allowance_max?: number; memory_max?: number; storage_size?: number }
+    const cpuAvailable = (hostWithQuota.cpu_allowance_max || 0) - (host.cpu_used || 0)
+    const memoryAvailable = (hostWithQuota.memory_max || 0) - (host.memory_used || 0)
+    const diskAvailable = ((hostWithQuota.storage_size || 0) * 1024) - (host.disk_used || 0)
+
+    if (sourceInstance.cpu > cpuAvailable) {
+      return reply.code(400).send({
+        error: `宿主机 CPU 资源不足，需要 ${sourceInstance.cpu}%，可用 ${cpuAvailable}%`,
+        code: 'HOST_RESOURCES_INSUFFICIENT'
+      })
+    }
+    if (sourceInstance.memory > memoryAvailable) {
+      return reply.code(400).send({
+        error: `宿主机内存资源不足，需要 ${sourceInstance.memory}MB，可用 ${memoryAvailable}MB`,
+        code: 'HOST_RESOURCES_INSUFFICIENT'
+      })
+    }
+    if (sourceInstance.disk > diskAvailable) {
+      return reply.code(400).send({
+        error: `宿主机磁盘资源不足，需要 ${sourceInstance.disk}MB，可用 ${diskAvailable}MB`,
+        code: 'HOST_RESOURCES_INSUFFICIENT'
+      })
+    }
+
+    // 创建异步任务
+    const task = await createInstanceTask({
+      instanceId,
+      hostId: sourceInstance.host_id,
+      userId: user.id,
+      taskType: 'clone'
+    })
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.clone',
+      `Queued clone task for instance "${sourceInstance.name}"`,
+      'success',
+      { instanceId }
+    )
+
+    reply.code(202).send({
+      message: 'Instance clone task queued',
+      taskId: task.id,
+      status: task.status
+    })
+  })
+
+  // ==================== 重命名实例 ====================
+
+  /**
+   * 重命名实例（修改显示名称，不影响 Incus ID）
+   */
+  fastify.patch<{
+    Params: { id: string }
+    Body: { name: string }
+  }>('/:id/rename', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 100 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+    const user = request.user
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 验证权限
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许重命名
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    const { name } = request.body
+    const oldName = instance.name
+
+    await db.updateInstance(instanceId, { name })
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.rename',
+      `Renamed instance from "${oldName}" to "${name}"`,
+      'success',
+      { instanceId }
+    )
+
+    return { message: 'Instance renamed', name }
+  })
+
+  // ==================== 实例配置 API ====================
+
+  // 获取实例配置（合并套餐默认值和实例覆盖值）
+  fastify.get<{ Params: { id: string } }>('/:id/config', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取实例的完整配置（包含覆盖字段）
+    const instanceConfig = await db.getInstanceConfig(instanceId)
+    if (!instanceConfig) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 获取套餐默认值
+    let packageDefaults = null
+    let ioLimitMode: 'throughput' | 'iops' = 'throughput'
+    let swapKind: 'container' | 'vm' = 'container'
+    let panelSwapSupported = true
+    if (instance.package_id) {
+      const pkg = await db.getPackageById(instance.package_id)
+      if (pkg) {
+        ioLimitMode = pkg.io_limit_mode === 'iops' ? 'iops' : 'throughput'
+        swapKind = pkg.instance_type === 'vm' ? 'vm' : 'container'
+        panelSwapSupported = swapKind === 'container'
+        packageDefaults = {
+          limits_read: pkg.limits_read,
+          limits_write: pkg.limits_write,
+          limits_read_iops: pkg.limits_read_iops,
+          limits_write_iops: pkg.limits_write_iops,
+          limits_ingress: pkg.limits_ingress,
+          limits_egress: pkg.limits_egress,
+          limits_processes: pkg.limits_processes,
+          limits_cpu_priority: pkg.limits_cpu_priority,
+          boot_autostart: pkg.boot_autostart,
+          boot_autostart_priority: pkg.boot_autostart_priority,
+          boot_autostart_delay: pkg.boot_autostart_delay,
+          boot_host_shutdown_timeout: pkg.boot_host_shutdown_timeout
+        }
+      }
+    }
+
+    // 系统默认值
+    const systemDefaults = {
+      limits_read: '100MB',
+      limits_write: '100MB',
+      limits_read_iops: 500,
+      limits_write_iops: 500,
+      limits_ingress: '300Mbit',
+      limits_egress: '300Mbit',
+      limits_processes: 500,
+      limits_cpu_priority: 10,
+      boot_autostart: true,
+      boot_autostart_priority: 20,
+      boot_autostart_delay: 15,
+      boot_host_shutdown_timeout: 30
+    }
+
+    // 合并配置：实例覆盖 > 套餐默认 > 系统默认
+    const defaults = packageDefaults || systemDefaults
+    const effectiveConfig = {
+      limits_read: instanceConfig.limits_read ?? defaults.limits_read,
+      limits_write: instanceConfig.limits_write ?? defaults.limits_write,
+      limits_read_iops: instanceConfig.limits_read_iops ?? defaults.limits_read_iops,
+      limits_write_iops: instanceConfig.limits_write_iops ?? defaults.limits_write_iops,
+      limits_ingress: instanceConfig.limits_ingress ?? defaults.limits_ingress,
+      limits_egress: instanceConfig.limits_egress ?? defaults.limits_egress,
+      limits_processes: instanceConfig.limits_processes ?? defaults.limits_processes,
+      limits_cpu_priority: instanceConfig.limits_cpu_priority ?? defaults.limits_cpu_priority,
+      boot_autostart: instanceConfig.boot_autostart ?? defaults.boot_autostart,
+      boot_autostart_priority: instanceConfig.boot_autostart_priority ?? defaults.boot_autostart_priority,
+      boot_autostart_delay: instanceConfig.boot_autostart_delay ?? defaults.boot_autostart_delay,
+      boot_host_shutdown_timeout: instanceConfig.boot_host_shutdown_timeout ?? defaults.boot_host_shutdown_timeout
+    }
+
+    // 标记哪些字段是覆盖的
+    const overrides = {
+      limits_read: instanceConfig.limits_read !== null,
+      limits_write: instanceConfig.limits_write !== null,
+      limits_read_iops: instanceConfig.limits_read_iops !== null,
+      limits_write_iops: instanceConfig.limits_write_iops !== null,
+      limits_ingress: instanceConfig.limits_ingress !== null,
+      limits_egress: instanceConfig.limits_egress !== null,
+      limits_processes: instanceConfig.limits_processes !== null,
+      limits_cpu_priority: instanceConfig.limits_cpu_priority !== null,
+      boot_autostart: instanceConfig.boot_autostart !== null,
+      boot_autostart_priority: instanceConfig.boot_autostart_priority !== null,
+      boot_autostart_delay: instanceConfig.boot_autostart_delay !== null,
+      boot_host_shutdown_timeout: instanceConfig.boot_host_shutdown_timeout !== null
+    }
+
+    const currentPlan = instance.package_plan_id ? await getPlanById(instance.package_plan_id) : null
+    const effectiveSwapSizeMb = panelSwapSupported
+      ? resolveEffectiveSwapSize(instance.swap_size, currentPlan?.swapSize)
+      : 0
+    const swapEnabled = panelSwapSupported && instance.swap_enabled === true
+    const swapAvailable = panelSwapSupported && (swapEnabled || effectiveSwapSizeMb > 0)
+
+    return {
+      config: effectiveConfig,
+      overrides,
+      packageDefaults: packageDefaults || systemDefaults,
+      ioLimitMode,
+      swap: {
+        available: swapAvailable,
+        enabled: swapEnabled,
+        sizeMb: effectiveSwapSizeMb,
+        kind: swapKind,
+        requiresRunning: swapKind === 'vm'
+      }
+    }
+  })
+
+  // 启用实例 SWAP
+  fastify.post<{ Params: { id: string } }>('/:id/swap/enable', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (user.role !== 'admin' && instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status !== 'running' && instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID, `current status: ${instance.status}`))
+    }
+
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const instanceKind: 'container' | 'vm' = pkg?.instance_type === 'vm' ? 'vm' : 'container'
+    if (instanceKind === 'vm') {
+      return reply.code(400).send(apiError(ErrorCode.FEATURE_DISABLED, '虚拟机不支持面板管理 SWAP'))
+    }
+    const currentPlan = instance.package_plan_id ? await getPlanById(instance.package_plan_id) : null
+    const effectiveSwapSizeMb = resolveEffectiveSwapSize(instance.swap_size, currentPlan?.swapSize)
+
+    if (instance.swap_enabled === true) {
+      return {
+        message: 'SWAP already enabled',
+        swapEnabled: true,
+        swapSize: effectiveSwapSizeMb
+      }
+    }
+
+    if (effectiveSwapSizeMb <= 0) {
+      return reply.code(400).send(apiError(ErrorCode.FEATURE_DISABLED, '当前方案未提供 SWAP'))
+    }
+
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+
+      if (instanceKind === 'container') {
+        await updateInstance(client, instance.incus_id, {
+          config: {
+            'limits.memory.swap': resolveIncusSwapValue(true, effectiveSwapSizeMb)
+          }
+        })
+      }
+
+      await db.updateInstanceSwap(instanceId, {
+        swapEnabled: true,
+        swapSize: effectiveSwapSizeMb
+      })
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.enable_swap',
+        `Enabled SWAP for instance "${instance.name}" (${effectiveSwapSizeMb}MB)`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: 'SWAP enabled',
+        swapEnabled: true,
+        swapSize: effectiveSwapSizeMb
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(
+        user.id,
+        'instance',
+        'instance.enable_swap',
+        `Failed to enable SWAP for instance "${instance.name}": ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+      return reply.code(500).send(apiError(ErrorCode.CONFIG_UPDATE_FAILED, errorMessage))
+    }
+  })
+
+  // 关闭实例 SWAP
+  fastify.post<{ Params: { id: string } }>('/:id/swap/disable', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 5, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (user.role !== 'admin' && instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status !== 'running' && instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID, `current status: ${instance.status}`))
+    }
+
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const instanceKind: 'container' | 'vm' = pkg?.instance_type === 'vm' ? 'vm' : 'container'
+    if (instanceKind === 'vm') {
+      return reply.code(400).send(apiError(ErrorCode.FEATURE_DISABLED, '虚拟机不支持面板管理 SWAP'))
+    }
+
+    const currentPlan = instance.package_plan_id ? await getPlanById(instance.package_plan_id) : null
+    const currentSwapSizeMb = resolveEffectiveSwapSize(instance.swap_size, currentPlan?.swapSize)
+
+    if (instance.swap_enabled !== true) {
+      return {
+        message: 'SWAP already disabled',
+        swapEnabled: false,
+        swapSize: currentSwapSizeMb
+      }
+    }
+
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+
+      await updateInstance(client, instance.incus_id, {
+        config: {
+          'limits.memory.swap': resolveIncusSwapValue(false, currentSwapSizeMb)
+        }
+      })
+
+      await db.updateInstanceSwap(instanceId, {
+        swapEnabled: false
+      })
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.disable_swap',
+        `Disabled SWAP for instance "${instance.name}"`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: 'SWAP disabled',
+        swapEnabled: false,
+        swapSize: currentSwapSizeMb
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(
+        user.id,
+        'instance',
+        'instance.disable_swap',
+        `Failed to disable SWAP for instance "${instance.name}": ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+      return reply.code(500).send(apiError(ErrorCode.CONFIG_UPDATE_FAILED, errorMessage))
+    }
+  })
+
+  // 更新实例配置覆盖（已禁用）
+  fastify.patch<{
+    Params: { id: string }
+    Body: {
+      limitsRead?: string | null
+      limitsWrite?: string | null
+      limitsReadIops?: number | null
+      limitsWriteIops?: number | null
+      limitsIngress?: string | null
+      limitsEgress?: string | null
+      limitsProcesses?: number | null
+      limitsCpuPriority?: number | null
+      bootAutostart?: boolean | null
+      bootAutostartPriority?: number | null
+      bootAutostartDelay?: number | null
+      bootHostShutdownTimeout?: number | null
+    }
+  }>('/:id/advanced-config', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          limitsRead: { type: ['string', 'null'] },
+          limitsWrite: { type: ['string', 'null'] },
+          limitsReadIops: { type: ['integer', 'null'], minimum: 0 },
+          limitsWriteIops: { type: ['integer', 'null'], minimum: 0 },
+          limitsIngress: { type: ['string', 'null'] },
+          limitsEgress: { type: ['string', 'null'] },
+          limitsProcesses: { type: ['integer', 'null'], minimum: 0 },
+          limitsCpuPriority: { type: ['integer', 'null'], minimum: 0, maximum: 10 },
+          bootAutostart: { type: ['boolean', 'null'] },
+          bootAutostartPriority: { type: ['integer', 'null'], minimum: 0, maximum: 100 },
+          bootAutostartDelay: { type: ['integer', 'null'], minimum: 5, maximum: 600 },
+          bootHostShutdownTimeout: { type: ['integer', 'null'], minimum: 30, maximum: 600 }
+        }
+      }
+    }
+  }, async (_request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      limitsRead?: string | null
+      limitsWrite?: string | null
+      limitsReadIops?: number | null
+      limitsWriteIops?: number | null
+      limitsIngress?: string | null
+      limitsEgress?: string | null
+      limitsProcesses?: number | null
+      limitsCpuPriority?: number | null
+      bootAutostart?: boolean | null
+      bootAutostartPriority?: number | null
+      bootAutostartDelay?: number | null
+      bootHostShutdownTimeout?: number | null
+    }
+  }>, reply: FastifyReply) => {
+    // 功能已禁用，直接返回 403
+    return reply.code(403).send(apiError(ErrorCode.FEATURE_DISABLED))
+  })
+
+  // 提升进程数限制
+  // LXC 实例提升到 1000，KVM 实例提升到 2000
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/boost-processes', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        properties: {
+          id: { type: 'string' }
+        },
+        required: ['id']
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：只有实例所有者可以提升进程数
+    if (instance.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 获取实例类型（从套餐获取）
+    const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const instanceType = (pkg as { instance_type?: 'container' | 'vm' } | null)?.instance_type || 'container'
+
+    // 确定进程数上限：LXC=1000, KVM=2000
+    const targetLimit = instanceType === 'vm' ? 2000 : 1000
+
+    // 获取当前进程数配置
+    const instanceConfig = await db.getInstanceConfig(instanceId)
+    const currentProcesses = instanceConfig?.limits_processes ?? 500
+
+    // 检查是否已达上限
+    if (currentProcesses >= targetLimit) {
+      return reply.code(400).send({
+        error: `Process limit already at maximum (${targetLimit})`,
+        code: 'PROCESS_LIMIT_ALREADY_MAX'
+      })
+    }
+
+    // 更新数据库中的实例配置
+    await db.updateInstanceConfig(instanceId, {
+      limitsProcesses: targetLimit
+    })
+
+    // 应用配置到 Incus 容器
+    try {
+      const client = await getIncusClient(host)
+      await updateInstance(client, instance.incus_id, {
+        config: {
+          'limits.processes': String(targetLimit)
+        }
+      })
+    } catch (err) {
+      console.error(`[BoostProcesses] Failed to apply to Incus for instance ${instance.name}:`, err)
+      // 不抛出错误，数据库已更新成功
+    }
+
+    await createLog(
+      user.id,
+      'instance',
+      'instance.boost_processes',
+      `Boosted process limit for instance "${instance.name}" to ${targetLimit}`,
+      'success',
+      { instanceId }
+    )
+
+    return {
+      message: 'Process limit boosted successfully',
+      newLimit: targetLimit
+    }
+  })
+
+  // 获取实例的活跃任务
+  fastify.get<{ Params: { id: string } }>('/:id/task', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查
+    const hasPermission = await checkInstanceOperationPermission(user, instance)
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const task = await getActiveTaskForInstance(instanceId)
+    if (!task) {
+      return { task: null }
+    }
+
+    // 获取队列位置
+    const queuePosition = task.status === 'PENDING' ? await getTaskQueuePosition(task.id, task.hostId) : 0
+
+    return {
+      task: {
+        id: task.id,
+        taskType: task.taskType,
+        status: task.status,
+        progress: task.progress,
+        error: task.error,
+        queuePosition,
+        createdAt: task.createdAt,
+        startedAt: task.startedAt,
+        finishedAt: task.finishedAt
+      }
+    }
+  })
+
+  // 获取任务详情
+  fastify.get<{ Params: { taskId: string } }>('/tasks/:taskId', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { taskId: string } }>, reply: FastifyReply) => {
+    const { taskId } = request.params
+    const taskIdNum = Number(taskId)
+
+    if (isNaN(taskIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const task = await getInstanceTaskById(taskIdNum)
+    if (!task) {
+      return reply.code(404).send({ error: 'Task not found', code: 'TASK_NOT_FOUND' })
+    }
+
+    // 权限检查：任务创建者、管理员或节点所有者可以查看
+    let hasPermission = task.userId === user.id || user.role === 'admin'
+
+    // 检查是否是节点所有者
+    if (!hasPermission) {
+      const host = await db.getHostById(task.hostId)
+      if (host && host.user_id === user.id) {
+        hasPermission = true
+      }
+    }
+
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取队列位置
+    const queuePosition = task.status === 'PENDING' ? await getTaskQueuePosition(task.id, task.hostId) : 0
+
+    // 获取实例信息
+    const instance = await db.getInstanceById(task.instanceId)
+
+    return {
+      task: {
+        id: task.id,
+        instanceId: task.instanceId,
+        instanceName: instance?.name || null,
+        taskType: task.taskType,
+        status: task.status,
+        progress: task.progress,
+        error: task.error,
+        queuePosition,
+        createdAt: task.createdAt,
+        startedAt: task.startedAt,
+        finishedAt: task.finishedAt,
+        newInstanceId: task.newInstanceId
+      }
+    }
+  })
+
+  // 取消任务（仅 PENDING 状态可取消）
+  fastify.delete<{ Params: { taskId: string } }>('/tasks/:taskId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { taskId: string } }>, reply: FastifyReply) => {
+    const { taskId } = request.params
+    const taskIdNum = Number(taskId)
+
+    if (isNaN(taskIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const task = await getInstanceTaskById(taskIdNum)
+    if (!task) {
+      return reply.code(404).send({ error: 'Task not found', code: 'TASK_NOT_FOUND' })
+    }
+
+    // 权限检查：只有任务创建者可以取消任务
+    if (task.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 只能取消 PENDING 状态的任务
+    if (task.status !== 'PENDING') {
+      return reply.code(400).send({
+        error: '只能取消等待中的任务',
+        code: 'TASK_CANNOT_CANCEL',
+        currentStatus: task.status
+      })
+    }
+
+    const cancelledTask = await cancelInstanceTask(taskIdNum)
+    if (!cancelledTask) {
+      return reply.code(400).send({
+        error: '取消任务失败',
+        code: 'CANCEL_FAILED'
+      })
+    }
+
+    await createLog(
+      user.id,
+      'instance',
+      'task.cancel',
+      `Cancelled ${task.taskType} task #${task.id} for instance #${task.instanceId}`,
+      'success',
+      { instanceId: task.instanceId }
+    )
+
+    return {
+      message: 'Task cancelled',
+      task: {
+        id: cancelledTask.id,
+        status: cancelledTask.status
+      }
+    }
+  })
+
+  // ==================== Cloud-init 状态检查 ====================
+
+  /**
+   * 检查实例 Cloud-init 初始化状态
+   * GET /instances/:id/cloud-init-status
+   */
+  fastify.get<{ Params: { id: string } }>('/:id/cloud-init-status', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查（与终端路由保持一致，管理员可访问所有实例）
+    let hasPermission = false
+    if (user.role === 'admin') {
+      hasPermission = true
+    } else {
+      hasPermission = await checkInstanceOperationPermission(user, instance)
+    }
+    if (!hasPermission) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 实例必须处于运行状态
+    if (instance.status !== 'running') {
+      return reply.code(400).send({
+        error: 'Instance must be running to check cloud-init status',
+        code: 'INSTANCE_NOT_RUNNING'
+      })
+    }
+
+    // 检查 incus_id 是否存在（实例可能正在创建中）
+    if (!instance.incus_id) {
+      return reply.code(400).send({
+        error: 'Instance is not fully provisioned',
+        code: 'INSTANCE_NOT_PROVISIONED'
+      })
+    }
+
+    const cachedStatus = getCachedCloudInitStatus(instance)
+    if (cachedStatus) {
+      return cachedStatus
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    try {
+      const client = await getIncusClient(host)
+
+      console.log(`[CloudInit] Checking status for instance ${instance.name} (${instance.incus_id})`)
+
+      const result = await detectCloudInitStatus(client, {
+        id: instance.id,
+        image: instance.image,
+        incus_id: instance.incus_id
+      })
+      await persistCloudInitStatus(instance.id, result)
+      return result
+    } catch (err) {
+      console.error(`[CloudInit] Failed to connect for instance ${instance.name}:`, err)
+      return {
+        ready: false,
+        state: 'unknown',
+        source: 'unknown',
+        manualOverride: false,
+        message: 'Unable to check cloud-init status',
+        detectedAt: new Date().toISOString()
+      }
+    }
+  })
+
+  /**
+   * 手动将实例 cloud-init 标记为已完成
+   * POST /instances/:id/cloud-init-status/manual-complete
+   */
+  fastify.post<{ Params: { id: string } }>('/:id/cloud-init-status/manual-complete', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    if (user.role !== 'admin' && instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (instance.status !== 'running') {
+      return reply.code(400).send({
+        error: 'Instance must be running to manually complete cloud-init',
+        code: 'INSTANCE_NOT_RUNNING'
+      })
+    }
+
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    if (!instance.incus_id) {
+      return reply.code(400).send({
+        error: 'Instance is not fully provisioned',
+        code: 'INSTANCE_NOT_PROVISIONED'
+      })
+    }
+
+    const now = new Date()
+    const result = {
+      ready: true,
+      state: 'manual',
+      source: 'manual',
+      manualOverride: true,
+      message: 'Cloud-init marked complete manually',
+      detectedAt: now.toISOString()
+    } as const
+
+    await persistCloudInitStatus(instance.id, result, user.id)
+    await createLog(
+      user.id,
+      'instance',
+      'instance.cloud_init_manual_complete',
+      `Manually marked cloud-init as completed for instance "${instance.name}"`,
+      'success',
+      { instanceId }
+    )
+
+    return result
+  })
+
+  // ==================== 重新分配 IPv6 地址 ====================
+
+  /**
+   * 重新分配 IPv6 地址
+   * POST /instances/:id/reassign-ipv6
+   * 
+   * 仅限 nat_ipv6 模式的实例，必须处于 stopped 状态
+   * 分配新的 IPv6 后需要重装系统才能生效
+   */
+  fastify.post<{ Params: { id: string } }>('/:id/reassign-ipv6', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const instanceId = Number(id)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { user } = request
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：仅实例所有者可以重新分配 IPv6
+    // 这是敏感操作，与重装系统权限一致
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许操作
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 实例必须处于停止状态
+    if (instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STOP_REQUIRED))
+    }
+
+    // 检查网络模式：只有 nat_ipv6 模式才能重新分配 IPv6
+    if (instance.network_mode !== 'nat_ipv6') {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_IPV6_NOT_SUPPORTED))
+    }
+
+    // 检查冷却时间：每实例每天24小时只能重新分配一次
+    const lastReassign = (instance as any).last_ipv6_reassign_at as Date | null
+    if (lastReassign) {
+      const cooldownMs = 24 * 60 * 60 * 1000 // 24小时
+      const timeSinceLastReassign = Date.now() - new Date(lastReassign).getTime()
+      if (timeSinceLastReassign < cooldownMs) {
+        const remainingHours = Math.ceil((cooldownMs - timeSinceLastReassign) / (60 * 60 * 1000))
+        return reply.code(429).send(apiError(ErrorCode.IPV6_REASSIGN_COOLDOWN, `请等待 ${remainingHours} 小时后再试`))
+      }
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceId, reply)) return
+
+    // 检查是否已有活跃任务
+    const activeTask = await getActiveTaskForInstance(instanceId)
+    if (activeTask) {
+      return reply.code(409).send({
+        error: 'Instance has an active task',
+        code: 'TASK_IN_PROGRESS',
+        taskId: activeTask.id,
+        taskType: activeTask.taskType,
+        status: activeTask.status
+      })
+    }
+
+    // 获取宿主机信息
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 检查宿主机是否配置了 IPv6 子网
+    const hostWithIpv6 = host as typeof host & {
+      ipv6_subnet?: string | null
+      ipv6_parent_interface?: string | null
+    }
+    if (!hostWithIpv6.ipv6_subnet) {
+      return reply.code(400).send(apiError(ErrorCode.HOST_NO_IPV6_SUBNET))
+    }
+
+    try {
+      // 1. 生成新的 IPv6 地址
+      let newIPv6: string | null = null
+      let attempts = 0
+      const maxAttempts = 50
+
+      while (attempts < maxAttempts) {
+        newIPv6 = generateRandomIPv6(hostWithIpv6.ipv6_subnet)
+        const exists = await db.isIpAddressExists(newIPv6)
+
+        if (!exists) {
+          console.log(`[ReassignIPv6] 为实例 ${instance.name} 分配新 IPv6: ${newIPv6} (尝试次数: ${attempts + 1})`)
+          break
+        }
+
+        attempts++
+        newIPv6 = null
+      }
+
+      if (!newIPv6) {
+        return reply.code(503).send(apiError(ErrorCode.IPV6_POOL_EXHAUSTED))
+      }
+
+      const oldIPv6 = instance.ipv6
+
+      // 2. 更新 Incus 实例的 eth1 设备配置
+      const client = await getIncusClient(host)
+      const instanceInfo = await getInstance(client, instance.incus_id) as {
+        devices?: Record<string, Record<string, string>>
+        config?: Record<string, string>
+      }
+      const devices = instanceInfo.devices || {}
+      const { generateVmNicMacs } = await import('../lib/vm-network-identifiers.js')
+      const generatedVmNicMacs = generateVmNicMacs(instance.incus_id)
+
+      // 更新 eth1 设备的 IPv6 地址
+      const eth1Device = devices['eth1'] || {
+        type: 'nic',
+        nictype: 'routed',
+        parent: hostWithIpv6.ipv6_parent_interface || 'eth0',
+        name: 'eth1',
+        hwaddr: generatedVmNicMacs.eth1,
+        'security.ipv6_filtering': 'true',
+        'security.mac_filtering': 'true'
+      }
+      eth1Device['ipv6.address'] = newIPv6
+
+      // 3. 更新 cloud-init network-config
+      const { generateCloudInitNetworkConfig } = await import('../lib/network-payload-builder.js')
+      const nicMacs = {
+        eth0: devices.eth0?.hwaddr || generatedVmNicMacs.eth0,
+        eth1: eth1Device.hwaddr || devices.eth1?.hwaddr || generatedVmNicMacs.eth1
+      }
+      const networkConfig = generateCloudInitNetworkConfig({
+        ipv4Address: instance.ipv4 || '10.0.0.2',  // 使用现有 IPv4
+        ipv6List: [newIPv6],
+        nicMacs
+      })
+
+      // 4. 应用更新到 Incus
+      await updateInstance(client, instance.incus_id, {
+        devices: {
+          ...devices,
+          eth1: eth1Device
+        },
+        config: {
+          ...instanceInfo.config,
+          'user.network-config': networkConfig
+        }
+      })
+
+      // 5. 更新数据库记录
+      // 5.1 更新 Instance 表的 ipv6 字段和冷却时间
+      await prisma.instance.update({
+        where: { id: instanceId },
+        data: {
+          ipv6: newIPv6,
+          lastIpv6ReassignAt: new Date() // 记录本次重新分配时间
+        }
+      })
+
+      // 5.2 更新 IpAddress 表
+      // 先删除旧的 IPv6 记录
+      if (oldIPv6) {
+        await prisma.ipAddress.deleteMany({
+          where: {
+            instanceId,
+            type: 'inet6',
+            address: oldIPv6
+          }
+        })
+      }
+
+      // 创建新的 IPv6 地址记录
+      await db.createIpAddress({
+        address: newIPv6,
+        type: 'inet6',
+        isPrimary: true,
+        device: 'eth1',
+        instanceId
+      })
+
+      // 6. 记录日志
+      await createLog(
+        user.id,
+        'instance',
+        'instance.reassign_ipv6',
+        `Reassigned IPv6 for instance "${instance.name}": ${oldIPv6 || 'none'} → ${newIPv6}`,
+        'success',
+        { instanceId }
+      )
+
+      console.log(`[ReassignIPv6] 实例 ${instance.name} IPv6 已更新: ${oldIPv6} → ${newIPv6}`)
+
+      return {
+        message: 'IPv6 已重新分配，请重装系统使其生效',
+        oldIpv6: oldIPv6,
+        newIpv6: newIPv6
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      console.error(`[ReassignIPv6] 实例 ${instance.name} IPv6 重新分配失败:`, errorMessage)
+
+      await createLog(
+        user.id,
+        'instance',
+        'instance.reassign_ipv6',
+        `Failed to reassign IPv6 for instance "${instance.name}": ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+
+      return reply.code(500).send(apiError(ErrorCode.INSTANCE_IPV6_REASSIGN_FAILED, errorMessage))
+    }
+  })
+}
+
+// ==================== 辅助函数 ====================
+
+/**
+ * 异步创建实例
+ */
+async function createInstanceAsync(
+  instanceId: number,
+  host: Host,
+  config: {
+    name: string
+    image: string
+    cpu: number
+    memory: number
+    disk: number
+    swapEnabled?: boolean
+    swapSize?: number | null
+    cloudInitConfig?: Record<string, string>
+    networkMode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+    nested?: boolean
+    privileged?: boolean
+    portLimit?: number
+    // 实例类型: container(容器) 或 vm(虚拟机)
+    instanceType?: 'container' | 'vm'
+    // SSH 端口（固定 22）
+    sshPort?: number | null
+    // 存储池配置
+    storagePool?: string | null
+    // IP 配置 (新双网卡架构)
+    ipv4Address?: string | null  // 内网 IPv4 (随机分配)
+    ipv6Address?: string | null  // IPv6 (随机分配)
+    ipv6Gateway?: string | null
+    hostInterface?: string | null  // 宿主机物理网卡名 (用于 routed 模式)
+    // Advanced configuration options from package
+    limitsRead?: string | null
+    limitsWrite?: string | null
+    limitsReadIops?: number | null
+    limitsWriteIops?: number | null
+    limitsIngress?: string | null
+    limitsEgress?: string | null
+    limitsProcesses?: number | null
+    limitsCpuPriority?: number | null
+    bootAutostart?: boolean | null
+    bootAutostartPriority?: number | null
+    bootAutostartDelay?: number | null
+    bootHostShutdownTimeout?: number | null
+  },
+  userId: number,
+  resources: { cpu: number; memory: number; disk: number }
+): Promise<void> {
+  try {
+    console.log(`\n[Provisioning] ===== 开始创建实例流程 =====`)
+    console.log(`[Provisioning] 实例ID: ${instanceId}, 名称: ${config.name}, 宿主机: ${host.name}`)
+
+    const client = await getIncusClient(host)
+
+    console.log(`[Provisioning] 正在构建 Incus 配置...`)
+    // 构建 IPv6Config (如果有静态 IPv6)
+    const ipv6Config = config.ipv6Address ? {
+      primaryIp: config.ipv6Address
+    } : null
+
+    const incusConfig = buildInstanceConfig({
+      name: config.name,
+      image: config.image,
+      cpu: config.cpu,
+      memory: config.memory,
+      disk: config.disk,
+      swapEnabled: config.swapEnabled,
+      swapSize: config.swapSize,
+      sshKey: '',
+      password: '',
+      cloudInitConfig: config.cloudInitConfig as { 'user.user-data': string } | undefined,
+      networkMode: (config.networkMode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+      nested: config.nested || false,
+      privileged: config.privileged || false,
+      instanceType: config.instanceType || 'container',
+      // 存储池配置
+      storagePool: config.storagePool || 'default',
+      // IP 配置 (新双网卡架构)
+      ipv4Address: config.ipv4Address,  // 内网 IPv4
+      ipv6Config,
+      hostInterface: config.hostInterface || 'eth0',
+      // IPv6 静态地址配置 (向后兼容)
+      ipv6Address: config.ipv6Address,
+      ipv6Gateway: config.ipv6Gateway,
+      // Advanced configuration options
+      limitsRead: config.limitsRead,
+      limitsWrite: config.limitsWrite,
+      limitsReadIops: config.limitsReadIops,
+      limitsWriteIops: config.limitsWriteIops,
+      limitsIngress: config.limitsIngress,
+      limitsEgress: config.limitsEgress,
+      limitsProcesses: config.limitsProcesses,
+      limitsCpuPriority: config.limitsCpuPriority,
+      bootAutostart: config.bootAutostart,
+      bootAutostartPriority: config.bootAutostartPriority,
+      bootAutostartDelay: config.bootAutostartDelay,
+      bootHostShutdownTimeout: config.bootHostShutdownTimeout
+    })
+
+    console.log(`[Provisioning] 开始创建实例 ${instanceId} (${config.name}) on ${host.name}`)
+    console.log(`[Provisioning] 资源配置: CPU=${config.cpu}, Memory=${config.memory}MB, Disk=${config.disk}MB`)
+    console.log(`[Provisioning] Incus 配置已生成，敏感字段已跳过日志输出`)
+
+    await createInstance(client, incusConfig)
+    const instanceTypeLabel = config.instanceType === 'vm' ? '虚拟机' : '容器'
+    console.log(`[Provisioning] 实例 ${config.name} ${instanceTypeLabel}创建完成`)
+
+    await startInstance(client, config.name)
+    console.log(`[Provisioning] 实例 ${config.name} 启动命令已发送`)
+
+    // KVM 虚拟机需要等待 QEMU 真正完成启动（BIOS→内核→cloud-init→agent）
+    // 容器启动是瞬时的，不需要等待
+    if (config.instanceType === 'vm') {
+      console.log(`[Provisioning] VM ${config.name} 等待 QEMU 启动完成...`)
+      const vmMaxWait = 90 // 最多等 90 轮 × 2秒 = 180秒
+      let vmStarted = false
+      for (let i = 0; i < vmMaxWait; i++) {
+        await new Promise(r => setTimeout(r, 2000))
+        try {
+          const vmState = await getInstanceState(client, config.name) as { status?: string }
+          if (vmState.status === 'Running') {
+            console.log(`[Provisioning] VM ${config.name} 已确认启动 (耗时 ${(i + 1) * 2}s)`)
+            vmStarted = true
+            break
+          }
+          if (i % 10 === 0) {
+            console.log(`[Provisioning] VM ${config.name} 等待启动中... (${(i + 1) * 2}s, 状态: ${vmState.status || 'unknown'})`)
+          }
+        } catch { /* 继续等待 */ }
+      }
+      if (!vmStarted) {
+        console.warn(`[Provisioning] VM ${config.name} 启动等待超时 (180s)，继续流程`)
+      }
+    }
+
+    // 使用传入的静态 IP 地址
+    const ipv4: string | null = config.ipv4Address || null
+    const ipv6: string | null = config.ipv6Address || null
+
+    console.log(`[Provisioning] 实例 ${config.name} IP 配置: IPv4=${ipv4}, IPv6=${ipv6}`)
+
+    // 使用原子操作更新状态，防止与超时清理任务竞争
+    // 只有状态仍为 creating 时才更新为 running
+    const updateResult = await prisma.instance.updateMany({
+      where: {
+        id: instanceId,
+        status: 'creating' // 原子条件
+      },
+      data: {
+        status: 'running',
+        ipv4: ipv4 ?? null,
+        ipv6: ipv6 ?? null,
+        storagePoolName: config.storagePool || 'default'
+      }
+    })
+
+    // 如果状态已被超时清理任务修改（变为 error），需要清理已创建的 Incus 实例
+    if (updateResult.count === 0) {
+      console.log(`[Provisioning] 实例 ${instanceId} 已被超时清理任务处理，清理已创建的 Incus 实例`)
+      try {
+        await stopInstance(client, config.name, true)
+        await deleteInstance(client, config.name)
+        console.log(`[Provisioning] Incus 实例 ${config.name} 已清理（因超时）`)
+      } catch (cleanupErr) {
+        console.error(`[Provisioning] 清理超时实例失败:`, cleanupErr)
+      }
+      // 不再继续后续流程（IP 记录、通知等）
+      return
+    }
+
+    // 创建 IP 地址记录 (新双网卡架构: eth0=IPv4, eth1=IPv6)
+    if (ipv4) {
+      try {
+        await db.createIpAddress({
+          address: ipv4,
+          type: 'inet4',
+          isPrimary: true,
+          device: 'eth0',  // 新双网卡架构: IPv4 在 eth0
+          instanceId
+        })
+        console.log(`[Provisioning] 主 IPv4 地址记录已创建: ${ipv4} (device: eth0)`)
+      } catch (err) {
+        console.warn(`[Provisioning] 创建 IPv4 记录失败 (可能已存在):`, err)
+      }
+    }
+
+    if (ipv6) {
+      try {
+        await db.createIpAddress({
+          address: ipv6,
+          type: 'inet6',
+          isPrimary: true,
+          device: 'eth1',  // 新双网卡架构: IPv6 在 eth1
+          instanceId
+        })
+        console.log(`[Provisioning] 主 IPv6 地址记录已创建: ${ipv6} (device: eth1)`)
+      } catch (err) {
+        console.warn(`[Provisioning] 创建 IPv6 记录失败 (可能已存在):`, err)
+      }
+    }
+
+    console.log(`[Provisioning] ✔ 实例 ${instanceId} (${config.name}) 创建成功!`)
+
+    const instance = await db.getInstanceById(instanceId)
+    if (instance) {
+      // 发送通知
+      const { sendNotification } = await import('../lib/notifier.js')
+      await sendNotification(userId, 'instance_created', {
+        instanceName: instance.name,
+        status: 'running',
+        hostName: host.name,
+        hostLocation: host.location || undefined,
+        image: config.image,
+        cpu: config.cpu,
+        memory: config.memory,
+        disk: config.disk,
+        networkMode: config.networkMode,
+        ipv4: ipv4 || undefined,
+        ipv6: ipv6 || undefined
+      })
+
+      // 发送实例创建成功邮件通知
+      try {
+        const { sendInstanceCreatedEmail } = await import('../lib/mailer.js')
+        const user = await db.findUserById(userId)
+        if (user && user.email) {
+          // 获取计费信息
+          const instanceWithBilling = await prisma.instance.findUnique({
+            where: { id: instanceId },
+            select: {
+              packagePlanId: true,
+              billingPrice: true,
+              expiresAt: true,
+              packagePlan: { select: { name: true } }
+            }
+          })
+          const isPaid = instanceWithBilling?.packagePlanId !== null
+
+          await sendInstanceCreatedEmail(user.email, {
+            username: user.username,
+            instanceName: instance.name,
+            hostName: host.name,
+            image: config.image,
+            cpu: config.cpu,
+            memory: config.memory,
+            disk: config.disk,
+            ipv4: ipv4 || undefined,
+            ipv6: ipv6 || undefined,
+            isPaid,
+            planName: instanceWithBilling?.packagePlan?.name,
+            amount: isPaid ? Number(instanceWithBilling?.billingPrice) : undefined,
+            expiresAt: instanceWithBilling?.expiresAt ?? undefined
+          })
+        }
+      } catch (emailErr) {
+        console.warn(`[Provisioning] 发送实例创建成功邮件失败:`, emailErr)
+      }
+
+      // 注意：不再检查实例配额使用率警告，因为不再限制用户的实例配额
+
+      await createLog(
+        userId,
+        'instance',
+        'instance.create',
+        `Created instance "${instance.name}" [host: ${host.name}, image: ${config.image}, CPU: ${config.cpu}%, Memory: ${config.memory}MB, Disk: ${config.disk}MB, IPv4: ${ipv4 || 'N/A'}, IPv6: ${ipv6 || 'N/A'}, network: ${config.networkMode}]`,
+        'success',
+        { instanceId }
+      )
+    }
+
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    console.error(`[Provisioning] ✘ 实例 ${instanceId} 创建失败:`, errorMessage)
+
+    // 使用原子操作更新状态，防止与超时清理任务竞争
+    // 只有状态仍为 creating 时才更新为 error 并回滚资源
+    const updateResult = await prisma.instance.updateMany({
+      where: {
+        id: instanceId,
+        status: 'creating' // 原子条件
+      },
+      data: {
+        status: 'error'
+      }
+    })
+
+    // 只有成功更新状态时才回滚资源（避免与超时清理任务双重回滚）
+    if (updateResult.count > 0 && userId && resources) {
+      try {
+        await db.rollbackResources({
+          hostId: host.id,
+          cpu: resources.cpu,
+          memory: resources.memory,
+          disk: resources.disk,
+          portCount: ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_nat', 'ipv6_only'].includes(config.networkMode) ? (config.portLimit || 0) : 0
+        })
+        console.log(`[Provisioning] 用户 ${userId} 资源已回滚 (CPU=${resources.cpu}, Mem=${resources.memory}MB, Disk=${resources.disk}MB)`)
+      } catch (rollbackErr) {
+        console.error(`[Provisioning] 资源回滚失败:`, rollbackErr)
+      }
+    } else if (updateResult.count === 0) {
+      console.log(`[Provisioning] 实例 ${instanceId} 已被超时清理任务处理，跳过资源回滚`)
+    }
+
+    try {
+      const client = await getIncusClient(host)
+      await deleteInstance(client, config.name)
+      console.log(`[Provisioning] 残留容器 ${config.name} 已清理`)
+    } catch (cleanupErr) {
+      const errorMessage = cleanupErr instanceof Error ? cleanupErr.message : String(cleanupErr)
+      console.log(`[Provisioning] 清理残留容器失败 (可能不存在):`, errorMessage)
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (instance) {
+      // 发送失败通知给用户
+      try {
+        const { sendNotification } = await import('../lib/notifier.js')
+        await sendNotification(userId, 'instance_create_failed', {
+          instanceName: instance.name,
+          hostName: host.name,
+          error: errorMessage
+        })
+      } catch (notifyErr) {
+        console.error(`[Provisioning] 发送失败通知失败:`, notifyErr)
+      }
+
+      await createLog(
+        userId,
+        'instance',
+        'instance.create',
+        `Failed to create instance "${instance.name}": ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+    }
+
+    throw error
+  }
+}
diff --git a/server/src/routes/ip-addresses.ts b/server/src/routes/ip-addresses.ts
new file mode 100644
index 0000000..296d987
--- /dev/null
+++ b/server/src/routes/ip-addresses.ts
@@ -0,0 +1,813 @@
+/**
+ * IP 地址管理路由
+ * 
+ * 新双网卡架构:
+ * - eth0: bridged (NAT IPv4)
+ * - eth1: routed (IPv6)
+ */
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import { generateRandomIPv6, generateRandomSubnet, isIpv6InSubnet, isStrictValidIpv6 } from '../lib/ip-calculator.js'
+import { syncInstanceNetwork, isValidIpv6Subnet } from '../lib/network-payload-builder.js'
+import type { IPv6Config } from '../types/incus.js'
+import * as ipv6Subnets from '../db/ipv6-subnets.js'
+
+// IP 地址记录类型
+interface IpAddressRecord {
+    id: number
+    address: string
+    type: string
+    isPrimary: boolean
+    isCustom?: boolean
+    device: string
+    createdAt: Date
+}
+
+// IPv6 网段记录类型
+interface Ipv6SubnetRecord {
+    id: number
+    cidr: string
+    primaryIp: string
+    device: string
+    instanceId: number
+    createdAt: Date
+}
+
+export default async function ipAddressRoutes(fastify: FastifyInstance) {
+    /**
+     * 获取实例的所有 IP 地址
+     */
+    fastify.get<{ Params: { instanceId: string } }>(
+        '/instances/:instanceId/ips',
+        { onRequest: [fastify.authenticateUser] },
+        async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+
+            if (isNaN(instanceId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = await db.getInstanceById(instanceId)
+            if (!instance) {
+                return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+            }
+            // 管理员拥有宿主机所有者的权限
+            if (user.role !== 'admin' && instance.user_id !== user.id) {
+                const host = await db.getHostById(instance.host_id)
+                if (!host || host.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            const ipAddresses = await db.getIpAddressesByInstanceId(instanceId)
+
+            return {
+                ipAddresses: ipAddresses.map((ip: IpAddressRecord) => ({
+                    id: ip.id,
+                    address: ip.address,
+                    type: ip.type,
+                    isPrimary: ip.isPrimary,
+                    isCustom: ip.isCustom || false,
+                    device: ip.device,
+                    createdAt: ip.createdAt.toISOString()
+                }))
+            }
+        }
+    )
+
+    /**
+     * 为实例添加额外 IP
+     * 支持两种模式:
+     * 1. 随机生成：不传 customAddress 参数
+     * 2. 自定义地址：传入 customAddress 参数，会先校验格式、子网范围和唯一性
+     */
+    fastify.post<{ Params: { instanceId: string }; Body: { customAddress?: string } }>(
+        '/instances/:instanceId/ips',
+        {
+            onRequest: [fastify.authenticateUser],
+            schema: {
+                body: {
+                    type: 'object',
+                    properties: {
+                        customAddress: { type: 'string' }
+                    }
+                }
+            }
+        },
+        async (request: FastifyRequest<{ Params: { instanceId: string }; Body: { customAddress?: string } }>, reply: FastifyReply) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+            const { customAddress } = request.body || {}
+
+            if (isNaN(instanceId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = await db.getInstanceById(instanceId)
+            if (!instance) {
+                return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+            }
+            // 管理员拥有宿主机所有者的权限
+            if (user.role !== 'admin' && instance.user_id !== user.id) {
+                const hostCheck = await db.getHostById(instance.host_id)
+                if (!hostCheck || hostCheck.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            // 检查实例状态
+            if (instance.status !== 'running' && instance.status !== 'stopped') {
+                return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID))
+            }
+
+            // 检查网络模式
+            if (instance.network_mode === 'nat') {
+                return reply.code(400).send({ error: 'NAT mode does not support additional IPs' })
+            }
+
+            // 获取宿主机信息
+            const host = await db.getHostById(instance.host_id)
+            if (!host) {
+                return reply.code(500).send({ error: 'Host not found' })
+            }
+
+            const hostWithIpv6 = host as typeof host & {
+                ipv6_subnet?: string | null
+                ipv6_gateway?: string | null
+                ipv6_parent_interface?: string | null
+            }
+
+            if (!hostWithIpv6.ipv6_subnet) {
+                return reply.code(400).send({ error: 'Host does not have IPv6 subnet configured' })
+            }
+
+            // ==================== 校验自定义地址（必须在创建记录之前） ====================
+            let newIPv6: string
+            let isCustom = false
+
+            if (customAddress && customAddress.trim()) {
+                const trimmedAddress = customAddress.trim()
+                
+                // 1. 验证格式
+                if (!isStrictValidIpv6(trimmedAddress)) {
+                    return reply.code(400).send({ 
+                        error: 'Invalid IPv6 address format',
+                        code: 'INVALID_IPV6_FORMAT'
+                    })
+                }
+                
+                // 2. 验证是否在宿主机子网范围内
+                if (!isIpv6InSubnet(trimmedAddress, hostWithIpv6.ipv6_subnet)) {
+                    return reply.code(400).send({ 
+                        error: `IPv6 address must be within host subnet range (${hostWithIpv6.ipv6_subnet})`,
+                        code: 'IPV6_NOT_IN_SUBNET'
+                    })
+                }
+                
+                // 3. 验证地址是否已被占用
+                const exists = await db.isIpAddressExists(trimmedAddress)
+                if (exists) {
+                    return reply.code(409).send({ 
+                        error: 'IPv6 address already in use',
+                        code: 'IPV6_ALREADY_EXISTS'
+                    })
+                }
+                
+                newIPv6 = trimmedAddress
+                isCustom = true
+            } else {
+                // 随机生成 IPv6 地址
+                let attempts = 0
+                const maxAttempts = 50
+
+                do {
+                    newIPv6 = generateRandomIPv6(hostWithIpv6.ipv6_subnet)
+                    const exists = await db.isIpAddressExists(newIPv6)
+                    
+                    if (!exists) {
+                        break
+                    }
+                    
+                    attempts++
+                    
+                    if (attempts >= maxAttempts) {
+                        return reply.code(409).send({ 
+                            error: `无法找到可用的 IPv6 地址，已尝试 ${maxAttempts} 次随机生成`,
+                            code: 'IPV6_POOL_EXHAUSTED'
+                        })
+                    }
+                } while (true)
+            }
+
+            // 新架构: 使用 eth1 设备 (用于 IPv6 routed 模式)
+            const deviceName = 'eth1'
+
+            // 创建 IP 记录（校验已通过，可以安全创建）
+            const ipRecord = await db.createIpAddress({
+                address: newIPv6,
+                type: 'inet6',
+                isPrimary: false,
+                device: deviceName,
+                instanceId,
+                isCustom
+            })
+
+            try {
+                // 新架构: 使用 syncInstanceNetwork 同步 eth1 配置
+                if (instance.status === 'running' || instance.status === 'stopped') {
+                    const client = await getIncusClient(host)
+
+                    // 获取实例所有 IPv6 地址
+                    const allIpRecords = await db.getIpAddressesByInstanceId(instanceId) as IpAddressRecord[]
+                    const ipv6Records = allIpRecords.filter((ip: IpAddressRecord) => ip.type === 'inet6')
+                    
+                    // 查找主 IP
+                    const primaryIp = ipv6Records.find((ip: IpAddressRecord) => ip.isPrimary)
+                    if (!primaryIp) {
+                        throw new Error('未找到主 IPv6 地址')
+                    }
+
+                    // 构建 IPv6Config
+                    const extraIps = ipv6Records
+                        .filter((ip: IpAddressRecord) => !ip.isPrimary)
+                        .map((ip: IpAddressRecord) => ip.address)
+
+                    const ipv6Config: IPv6Config = {
+                        primaryIp: primaryIp.address,
+                        extraIps: extraIps.length > 0 ? extraIps : undefined
+                    }
+
+                    // 同步实例网络配置
+                    await syncInstanceNetwork(
+                        client,
+                        instance.incus_id,
+                        ipv6Config,
+                        hostWithIpv6.ipv6_parent_interface || 'eth0',
+                        instance.status === 'running' // 只有运行状态才重启
+                    )
+                }
+
+                await createLog(
+                    user.id,
+                    'instance',
+                    'ip.add',
+                    `Added IP ${newIPv6} to instance "${instance.name}"`,
+                    'success',
+                    { instanceId }
+                )
+
+                return {
+                    success: true,
+                    ipAddress: {
+                        id: ipRecord.id,
+                        address: newIPv6,
+                        type: 'inet6',
+                        isPrimary: false,
+                        device: deviceName
+                    }
+                }
+            } catch (error) {
+                // 回滚：删除 IP 记录
+                await db.deleteIpAddress(ipRecord.id)
+                throw error
+            }
+        }
+    )
+
+    /**
+     * 删除实例的额外 IP
+     */
+    fastify.delete<{ Params: { instanceId: string; ipId: string } }>(
+        '/instances/:instanceId/ips/:ipId',
+        { onRequest: [fastify.authenticateUser] },
+        async (
+            request: FastifyRequest<{ Params: { instanceId: string; ipId: string } }>,
+            reply: FastifyReply
+        ) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+            const ipId = parseInt(request.params.ipId, 10)
+
+            if (isNaN(instanceId) || isNaN(ipId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            // 获取 IP 记录
+            const ipRecord = await db.getIpAddressById(ipId)
+            if (!ipRecord) {
+                return reply.code(404).send({ error: 'IP address not found' })
+            }
+
+            // 验证 IP 属于该实例
+            if (ipRecord.instanceId !== instanceId) {
+                return reply.code(400).send({ error: 'IP does not belong to this instance' })
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = ipRecord.instance
+            // 管理员拥有宿主机所有者的权限
+            if (user.role !== 'admin' && instance.userId !== user.id) {
+                // 检查是否是宿主机所有者
+                const host = await db.getHostById(instance.hostId)
+                if (!host || host.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            // 不能删除主 IP
+            if (ipRecord.isPrimary) {
+                return reply.code(400).send({ error: 'Cannot remove primary IP address' })
+            }
+
+            // 从 eth1 的 IP 列表中移除该 IP（无论实例是运行还是停止状态）
+            // 如果实例是停止状态，配置会在下次启动时自动应用
+            if (instance.status === 'running' || instance.status === 'stopped') {
+                try {
+                    const client = await getIncusClient(instance.host)
+                    
+                    // 获取实例所有 IPv6 地址（排除要删除的）
+                    const allIpRecords = await db.getIpAddressesByInstanceId(instanceId) as IpAddressRecord[]
+                    const ipv6Records = allIpRecords.filter((ip: IpAddressRecord) => ip.type === 'inet6' && ip.id !== ipId)
+                    
+                    // 查找主 IP
+                    const primaryIp = ipv6Records.find((ip: IpAddressRecord) => ip.isPrimary)
+                    if (!primaryIp) {
+                        console.warn('未找到主 IPv6 地址，跳过 Incus 配置更新')
+                    } else {
+                        // 构建 IPv6Config
+                        const extraIps = ipv6Records
+                            .filter((ip: IpAddressRecord) => !ip.isPrimary)
+                            .map((ip: IpAddressRecord) => ip.address)
+
+                        const ipv6Config: IPv6Config = {
+                            primaryIp: primaryIp.address,
+                            extraIps: extraIps.length > 0 ? extraIps : undefined
+                        }
+
+                        // 获取宿主机配置
+                        const hostWithIpv6 = instance.host as typeof instance.host & {
+                            ipv6_parent_interface?: string | null
+                        }
+
+                        // 同步实例网络配置
+                        await syncInstanceNetwork(
+                            client,
+                            instance.incusId,
+                            ipv6Config,
+                            hostWithIpv6.ipv6_parent_interface || 'eth0',
+                            instance.status === 'running' // 只有运行状态才重启
+                        )
+                    }
+                } catch (err) {
+                    console.warn(`Failed to remove IP ${ipRecord.address} from eth1:`, err)
+                    // 继续删除数据库记录
+                }
+            }
+
+            // 删除 IP 记录
+            await db.deleteIpAddress(ipId)
+
+            await createLog(
+                user.id,
+                'instance',
+                'ip.remove',
+                `Removed IP ${ipRecord.address} from instance "${instance.name}"`,
+                'success',
+                { instanceId }
+            )
+
+            return { success: true }
+        }
+    )
+
+    /**
+     * 设置自定义 IPv6 地址
+     */
+    fastify.put<{ Params: { instanceId: string; ipId: string }; Body: { address: string } }>(
+        '/instances/:instanceId/ips/:ipId/custom',
+        { onRequest: [fastify.authenticateUser] },
+        async (
+            request: FastifyRequest<{ Params: { instanceId: string; ipId: string }; Body: { address: string } }>,
+            reply: FastifyReply
+        ) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+            const ipId = parseInt(request.params.ipId, 10)
+            const { address } = request.body
+
+            if (isNaN(instanceId) || isNaN(ipId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            if (!address || !isStrictValidIpv6(address)) {
+                return reply.code(400).send({ 
+                    error: 'Invalid IPv6 address format',
+                    code: 'INVALID_IPV6_FORMAT'
+                })
+            }
+
+            // 获取 IP 记录
+            const ipRecord = await db.getIpAddressById(ipId)
+            if (!ipRecord) {
+                return reply.code(404).send({ error: 'IP address not found' })
+            }
+
+            // 验证 IP 属于该实例
+            if (ipRecord.instanceId !== instanceId) {
+                return reply.code(400).send({ error: 'IP does not belong to this instance' })
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = ipRecord.instance
+            if (user.role !== 'admin' && instance.userId !== user.id) {
+                // 检查是否是宿主机所有者
+                const host = await db.getHostById(instance.hostId)
+                if (!host || host.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            // 获取宿主机 IPv6 子网配置
+            const hostWithIpv6 = instance.host as typeof instance.host & {
+                ipv6_subnet?: string | null
+                ipv6_parent_interface?: string | null
+            }
+
+            // 验证地址是否在宿主机子网范围内
+            if (!hostWithIpv6.ipv6_subnet) {
+                return reply.code(400).send({ error: 'Host does not have IPv6 subnet configured' })
+            }
+            if (!isIpv6InSubnet(address, hostWithIpv6.ipv6_subnet)) {
+                return reply.code(400).send({ 
+                    error: `IPv6 address must be within host subnet range (${hostWithIpv6.ipv6_subnet})`,
+                    code: 'IPV6_NOT_IN_SUBNET'
+                })
+            }
+
+            // 检查地址是否已存在
+            const exists = await db.isIpAddressExists(address)
+            if (exists && address !== ipRecord.address) {
+                return reply.code(409).send({ 
+                    error: 'IPv6 address already exists',
+                    code: 'IPV6_ALREADY_EXISTS'
+                })
+            }
+
+            const oldAddress = ipRecord.address
+
+            // 更新数据库记录
+            await db.prisma.ipAddress.update({
+                where: { id: ipId },
+                data: { 
+                    address, 
+                    isCustom: true 
+                }
+            })
+
+            // 同步到 Incus
+            if (instance.status === 'running' || instance.status === 'stopped') {
+                try {
+                    const client = await getIncusClient(instance.host)
+
+                    // 获取实例所有 IPv6 地址
+                    const allIpRecords = await db.getIpAddressesByInstanceId(instanceId) as IpAddressRecord[]
+                    const ipv6Records = allIpRecords.filter((ip: IpAddressRecord) => ip.type === 'inet6')
+                    
+                    const primaryIp = ipv6Records.find((ip: IpAddressRecord) => ip.isPrimary)
+                    if (primaryIp) {
+                        const extraIps = ipv6Records
+                            .filter((ip: IpAddressRecord) => !ip.isPrimary)
+                            .map((ip: IpAddressRecord) => ip.address)
+
+                        const ipv6Config: IPv6Config = {
+                            primaryIp: primaryIp.address,
+                            extraIps: extraIps.length > 0 ? extraIps : undefined
+                        }
+
+                        const hostWithIpv6 = instance.host as typeof instance.host & {
+                            ipv6_parent_interface?: string | null
+                        }
+
+                        await syncInstanceNetwork(
+                            client,
+                            instance.incusId,
+                            ipv6Config,
+                            hostWithIpv6.ipv6_parent_interface || 'eth0',
+                            instance.status === 'running'
+                        )
+                    }
+                } catch (err) {
+                    console.warn(`Failed to update custom IP in Incus:`, err)
+                }
+            }
+
+            await createLog(
+                user.id,
+                'instance',
+                'ip.custom',
+                `Set custom IPv6 ${address} (was ${oldAddress}) for instance "${instance.name}"`,
+                'success',
+                { instanceId }
+            )
+
+            return { success: true, address }
+        }
+    )
+
+    /**
+     * 为实例分配 IPv6 网段
+     * 支持两种方式:
+     * 1. 传入 cidr: 直接分配指定的网段
+     * 2. 传入 prefix: 系统从宿主机子网中自动分配
+     */
+    fastify.post<{ Params: { instanceId: string }; Body: { cidr?: string; prefix?: number; primaryIp?: string } }>(
+        '/instances/:instanceId/subnet',
+        { onRequest: [fastify.authenticateUser] },
+        async (
+            request: FastifyRequest<{ Params: { instanceId: string }; Body: { cidr?: string; prefix?: number; primaryIp?: string } }>,
+            reply: FastifyReply
+        ) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+            const { cidr: inputCidr, prefix, primaryIp } = request.body
+
+            if (isNaN(instanceId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = await db.getInstanceById(instanceId)
+            if (!instance) {
+                return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+            }
+            if (user.role !== 'admin' && instance.user_id !== user.id) {
+                const hostCheck = await db.getHostById(instance.host_id)
+                if (!hostCheck || hostCheck.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            // 检查网络模式
+            if (instance.network_mode === 'nat') {
+                return reply.code(400).send({ error: 'NAT mode does not support IPv6 subnet' })
+            }
+
+            // 获取宿主机信息
+            const host = await db.getHostById(instance.host_id)
+            if (!host) {
+                return reply.code(500).send({ error: 'Host not found' })
+            }
+
+            const hostWithIpv6 = host as typeof host & {
+                ipv6_subnet?: string | null
+                ipv6_parent_interface?: string | null
+            }
+
+            // 确定要分配的 CIDR
+            let cidr: string
+            if (inputCidr) {
+                // 直接使用用户提供的 CIDR
+                if (!isValidIpv6Subnet(inputCidr)) {
+                    return reply.code(400).send({ error: 'Invalid IPv6 subnet CIDR format' })
+                }
+                cidr = inputCidr
+            } else if (prefix) {
+                // 根据 prefix 自动分配
+                if (![112, 120, 124].includes(prefix)) {
+                    return reply.code(400).send({ error: 'Prefix must be 112, 120, or 124' })
+                }
+                if (!hostWithIpv6.ipv6_subnet) {
+                    return reply.code(400).send({ error: 'Host does not have IPv6 subnet configured' })
+                }
+
+                // 生成子网，最多重试 20 次确保不重复
+                let attempts = 0
+                const maxAttempts = 20
+                do {
+                    cidr = generateRandomSubnet(hostWithIpv6.ipv6_subnet, prefix)
+                    const exists = await ipv6Subnets.isIpv6SubnetExists(cidr)
+                    if (!exists) break
+                    attempts++
+                } while (attempts < maxAttempts)
+
+                if (attempts >= maxAttempts) {
+                    return reply.code(409).send({ error: 'Unable to allocate subnet, pool may be exhausted' })
+                }
+            } else {
+                return reply.code(400).send({ error: 'Either cidr or prefix must be provided' })
+            }
+
+            // 检查网段是否已存在
+            const exists = await ipv6Subnets.isIpv6SubnetExists(cidr)
+            if (exists) {
+                return reply.code(409).send({ error: 'IPv6 subnet already allocated' })
+            }
+
+            // 获取实例的主 IPv6
+            const allIpRecords = await db.getIpAddressesByInstanceId(instanceId) as IpAddressRecord[]
+            const ipv6Records = allIpRecords.filter((ip: IpAddressRecord) => ip.type === 'inet6')
+            const primaryIpRecord = ipv6Records.find((ip: IpAddressRecord) => ip.isPrimary)
+            
+            if (!primaryIpRecord) {
+                return reply.code(400).send({ error: 'Instance does not have a primary IPv6 address' })
+            }
+
+            // 网段内的主 IP（用户可指定，否则使用网段地址 + 1）
+            const subnetPrimaryIp = primaryIp || cidr.split('/')[0]
+
+            // 创建网段记录
+            const subnet = await ipv6Subnets.createIpv6Subnet({
+                cidr,
+                primaryIp: subnetPrimaryIp,
+                device: 'eth1',
+                instanceId
+            })
+
+            // 同步到 Incus
+            if (instance.status === 'running' || instance.status === 'stopped') {
+                try {
+                    const client = await getIncusClient(host)
+
+                    const extraIps = ipv6Records
+                        .filter((ip: IpAddressRecord) => !ip.isPrimary)
+                        .map((ip: IpAddressRecord) => ip.address)
+
+                    const ipv6Config: IPv6Config = {
+                        primaryIp: primaryIpRecord.address,
+                        extraIps: extraIps.length > 0 ? extraIps : undefined,
+                        subnet: cidr
+                    }
+
+                    await syncInstanceNetwork(
+                        client,
+                        instance.incus_id,
+                        ipv6Config,
+                        hostWithIpv6.ipv6_parent_interface || 'eth0',
+                        instance.status === 'running'
+                    )
+                } catch (err) {
+                    // 回滚
+                    await ipv6Subnets.deleteIpv6Subnet(subnet.id)
+                    throw err
+                }
+            }
+
+            await createLog(
+                user.id,
+                'instance',
+                'subnet.allocate',
+                `Allocated IPv6 subnet ${cidr} to instance "${instance.name}"`,
+                'success',
+                { instanceId }
+            )
+
+            return {
+                success: true,
+                subnet: {
+                    id: subnet.id,
+                    cidr: subnet.cidr,
+                    primaryIp: subnet.primaryIp,
+                    device: subnet.device
+                }
+            }
+        }
+    )
+
+    /**
+     * 删除实例的 IPv6 网段
+     */
+    fastify.delete<{ Params: { instanceId: string; subnetId: string } }>(
+        '/instances/:instanceId/subnet/:subnetId',
+        { onRequest: [fastify.authenticateUser] },
+        async (
+            request: FastifyRequest<{ Params: { instanceId: string; subnetId: string } }>,
+            reply: FastifyReply
+        ) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+            const subnetId = parseInt(request.params.subnetId, 10)
+
+            if (isNaN(instanceId) || isNaN(subnetId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = await db.getInstanceById(instanceId)
+            if (!instance) {
+                return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+            }
+            if (user.role !== 'admin' && instance.user_id !== user.id) {
+                const hostCheck = await db.getHostById(instance.host_id)
+                if (!hostCheck || hostCheck.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            // 获取网段记录
+            const subnets = await ipv6Subnets.getIpv6SubnetsByInstanceId(instanceId) as Ipv6SubnetRecord[]
+            const subnet = subnets.find((s: Ipv6SubnetRecord) => s.id === subnetId)
+            if (!subnet) {
+                return reply.code(404).send({ error: 'Subnet not found' })
+            }
+
+            // 同步到 Incus (移除 ipv6.routes)
+            const host = await db.getHostById(instance.host_id)
+            if (host && (instance.status === 'running' || instance.status === 'stopped')) {
+                try {
+                    const client = await getIncusClient(host)
+
+                    // 获取实例所有 IPv6 地址
+                    const allIpRecords = await db.getIpAddressesByInstanceId(instanceId) as IpAddressRecord[]
+                    const ipv6Records = allIpRecords.filter((ip: IpAddressRecord) => ip.type === 'inet6')
+                    const primaryIpRecord = ipv6Records.find((ip: IpAddressRecord) => ip.isPrimary)
+
+                    if (primaryIpRecord) {
+                        const extraIps = ipv6Records
+                            .filter((ip: IpAddressRecord) => !ip.isPrimary)
+                            .map((ip: IpAddressRecord) => ip.address)
+
+                        // 不包含 subnet，这样会移除 ipv6.routes
+                        const ipv6Config: IPv6Config = {
+                            primaryIp: primaryIpRecord.address,
+                            extraIps: extraIps.length > 0 ? extraIps : undefined
+                        }
+
+                        const hostWithIpv6 = host as typeof host & {
+                            ipv6_parent_interface?: string | null
+                        }
+
+                        await syncInstanceNetwork(
+                            client,
+                            instance.incus_id,
+                            ipv6Config,
+                            hostWithIpv6.ipv6_parent_interface || 'eth0',
+                            instance.status === 'running'
+                        )
+                    }
+                } catch (err) {
+                    console.warn(`Failed to remove subnet from Incus:`, err)
+                }
+            }
+
+            // 删除数据库记录
+            await ipv6Subnets.deleteIpv6Subnet(subnetId)
+
+            await createLog(
+                user.id,
+                'instance',
+                'subnet.remove',
+                `Removed IPv6 subnet ${subnet.cidr} from instance "${instance.name}"`,
+                'success',
+                { instanceId }
+            )
+
+            return { success: true }
+        }
+    )
+
+    /**
+     * 获取实例的 IPv6 网段列表
+     */
+    fastify.get<{ Params: { instanceId: string } }>(
+        '/instances/:instanceId/subnets',
+        { onRequest: [fastify.authenticateUser] },
+        async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+            const user = request.user!
+            const instanceId = parseInt(request.params.instanceId, 10)
+
+            if (isNaN(instanceId)) {
+                return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS))
+            }
+
+            // 验证实例权限：管理员、实例所有者、宿主机所有者
+            const instance = await db.getInstanceById(instanceId)
+            if (!instance) {
+                return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+            }
+            if (user.role !== 'admin' && instance.user_id !== user.id) {
+                const host = await db.getHostById(instance.host_id)
+                if (!host || host.user_id !== user.id) {
+                    return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+                }
+            }
+
+            const subnets = await ipv6Subnets.getIpv6SubnetsByInstanceId(instanceId) as Ipv6SubnetRecord[]
+
+            return {
+                subnets: subnets.map((s: Ipv6SubnetRecord) => ({
+                    id: s.id,
+                    cidr: s.cidr,
+                    primaryIp: s.primaryIp,
+                    device: s.device,
+                    createdAt: s.createdAt.toISOString()
+                }))
+            }
+        }
+    )
+}
diff --git a/server/src/routes/logs.ts b/server/src/routes/logs.ts
new file mode 100644
index 0000000..4c69d65
--- /dev/null
+++ b/server/src/routes/logs.ts
@@ -0,0 +1,89 @@
+/**
+ * 日志管理路由
+ */
+
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
+import { getLogsPaginated, getLogModules } from '../db/logs.js'
+import { ErrorCode, apiError } from '../lib/errors.js'
+
+export default async function logRoutes(fastify: FastifyInstance) {
+  /**
+   * 获取日志列表（分页、筛选、搜索）
+   */
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      module?: string | null
+      search?: string | null
+      instanceId?: string | null
+      instanceName?: string | null
+    }
+  }>('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      module?: string | null
+      search?: string | null
+      instanceId?: string | null
+      instanceName?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const { page = '1', pageSize = '20', module = null, search = null, instanceId = null, instanceName = null } = request.query
+    const userId = request.user.role === 'admin' ? null : request.user.id
+    const instanceIdNum = instanceId ? Number(instanceId) : undefined
+
+    if (instanceId !== null && (!Number.isInteger(instanceIdNum) || instanceIdNum! <= 0)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const result = await getLogsPaginated({
+      userId: userId || undefined,
+      module: module || undefined,
+      page: parseInt(page, 10),
+      pageSize: parseInt(pageSize, 10),
+      search: search || undefined,
+      instanceId: instanceIdNum,
+      instanceName: instanceName || undefined
+    })
+
+    return {
+      success: true,
+      logs: result.items,
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      totalPages: result.totalPages
+    }
+  })
+
+  /**
+   * 获取可用的模块列表（用于筛选）
+   * 普通用户只能看到与自己相关的模块
+   */
+  fastify.get('/modules', {
+    onRequest: [fastify.authenticate]
+  }, async (request) => {
+    // 管理员可以看到所有模块
+    if (request.user.role === 'admin') {
+      const modules = await getLogModules()
+      return { success: true, modules }
+    }
+
+    // 普通用户只能看到与自己相关的模块
+    const userModules = [
+      'security',
+      'instance',
+      'snapshot',
+      'backup',
+      'personal',
+      'ssh_key',
+      'notification'
+    ]
+
+    return { success: true, modules: userModules }
+  })
+}
+
diff --git a/server/src/routes/mail.ts b/server/src/routes/mail.ts
new file mode 100644
index 0000000..ed2bfae
--- /dev/null
+++ b/server/src/routes/mail.ts
@@ -0,0 +1,1363 @@
+/**
+ * 域名邮箱路由
+ * 包含管理员配置和用户端管理功能
+ */
+
+import type { FastifyInstance } from 'fastify'
+import type { MailAccount } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import * as db from '../db/mail.js'
+import { calculateDiscountAmount, calculateDiscountedPrice } from '../lib/billing-calc.js'
+import * as craneMailService from '../services/cranemail.js'
+import * as smarterMailService from '../services/smartermail.js'
+
+export default async function mailRoutes(fastify: FastifyInstance) {
+  // ==================== 管理员：邮箱源管理 ====================
+
+  // 获取所有邮箱源
+  fastify.get('/admin/sources', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async () => {
+    const sources = await db.getAllMailSources(true)
+    
+    // 获取每个源的统计信息
+    const sourcesWithStats = await Promise.all(
+      sources.map(async (source) => {
+        const stats = await db.getMailSourceStats(source.id)
+        return {
+          ...source,
+          ...stats,
+          // 隐藏敏感信息
+          apiKey: '***' + source.apiKey.slice(-4)
+        }
+      })
+    )
+    
+    return { sources: sourcesWithStats }
+  })
+
+  // 创建邮箱源
+  fastify.post<{
+    Body: {
+      name: string
+      code: string
+      apiUrl: string
+      apiKey: string
+      smarterMailUrl: string
+      enabled?: boolean
+      sortOrder?: number
+    }
+  }>('/admin/sources', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const { name, code, apiUrl, apiKey, smarterMailUrl, enabled, sortOrder } = request.body
+
+    if (!name || !code || !apiUrl || !apiKey || !smarterMailUrl) {
+      throw apiError(ErrorCode.VALIDATION_ERROR, '请填写所有必填字段')
+    }
+
+    // 检查代码是否已存在
+    const existing = await db.getMailSourceByCode(code)
+    if (existing) {
+      throw apiError(ErrorCode.SLUG_EXISTS, '该地区代码已存在')
+    }
+
+    const source = await db.createMailSource({
+      name,
+      code: code.toLowerCase(),
+      apiUrl,
+      apiKey,
+      smarterMailUrl,
+      enabled: enabled ?? true,
+      sortOrder: sortOrder ?? 0
+    })
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'create_mail_source',
+      `Created mail source: ${name}`,
+      'success'
+    )
+
+    return { source }
+  })
+
+  // 更新邮箱源
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      code?: string
+      apiUrl?: string
+      apiKey?: string
+      smarterMailUrl?: string
+      enabled?: boolean
+      sortOrder?: number
+    }
+  }>('/admin/sources/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const id = parseInt(request.params.id)
+    const { name, code, apiUrl, apiKey, smarterMailUrl, enabled, sortOrder } = request.body
+
+    const existing = await db.getMailSourceById(id)
+    if (!existing) {
+      throw apiError(ErrorCode.NOT_FOUND, '邮箱源不存在')
+    }
+
+    // 如果修改了代码，检查是否冲突
+    if (code && code !== existing.code) {
+      const codeExists = await db.getMailSourceByCode(code)
+      if (codeExists) {
+        throw apiError(ErrorCode.SLUG_EXISTS, '该地区代码已存在')
+      }
+    }
+
+    const source = await db.updateMailSource(id, {
+      name,
+      code: code?.toLowerCase(),
+      apiUrl,
+      apiKey,
+      smarterMailUrl,
+      enabled,
+      sortOrder
+    })
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'update_mail_source',
+      `Updated mail source #${id}`,
+      'success'
+    )
+
+    return { source }
+  })
+
+  // 删除邮箱源
+  fastify.delete<{
+    Params: { id: string }
+  }>('/admin/sources/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const id = parseInt(request.params.id)
+
+    const source = await db.getMailSourceById(id)
+    if (!source) {
+      throw apiError(ErrorCode.NOT_FOUND, '邮箱源不存在')
+    }
+
+    // 检查是否有关联数据
+    const stats = await db.getMailSourceStats(id)
+    if (stats.subscriptionCount > 0 || stats.domainCount > 0) {
+      throw apiError(ErrorCode.OPERATION_NOT_ALLOWED, '该邮箱源下有订阅或域名，无法删除')
+    }
+
+    await db.deleteMailSource(id)
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'delete_mail_source',
+      `Deleted mail source: ${source.name}`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // ==================== 管理员：套餐方案管理 ====================
+
+  // 获取所有方案
+  fastify.get('/admin/plans', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async () => {
+    const plans = await db.getAllMailPlans()
+    return { plans }
+  })
+
+  // 创建方案
+  fastify.post<{
+    Body: {
+      sourceId: number
+      name: string
+      description?: string
+      domainLimit: number
+      diskLimitGb: number
+      billingCycle: 'monthly' | 'yearly'
+      price: number
+      enabled?: boolean
+      sortOrder?: number
+    }
+  }>('/admin/plans', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const { sourceId, name, description, domainLimit, diskLimitGb, billingCycle, price, enabled, sortOrder } = request.body
+
+    if (!sourceId || !name || !domainLimit || !diskLimitGb || !billingCycle || price === undefined) {
+      throw apiError(ErrorCode.VALIDATION_ERROR, '请填写所有必填字段')
+    }
+
+    // 检查邮箱源是否存在
+    const source = await db.getMailSourceById(sourceId)
+    if (!source) {
+      throw apiError(ErrorCode.NOT_FOUND, '邮箱源不存在')
+    }
+
+    const plan = await db.createMailPlan({
+      sourceId,
+      name,
+      description,
+      domainLimit,
+      diskLimitGb,
+      billingCycle,
+      price,
+      enabled: enabled ?? true,
+      sortOrder: sortOrder ?? 0
+    })
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'create_mail_plan',
+      `Created mail plan: ${name}`,
+      'success'
+    )
+
+    return { plan }
+  })
+
+  // 更新方案
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      description?: string
+      domainLimit?: number
+      diskLimitGb?: number
+      billingCycle?: 'monthly' | 'yearly'
+      price?: number
+      enabled?: boolean
+      sortOrder?: number
+    }
+  }>('/admin/plans/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const id = parseInt(request.params.id)
+    const data = request.body
+
+    const existing = await db.getMailPlanById(id)
+    if (!existing) {
+      throw apiError(ErrorCode.NOT_FOUND, '方案不存在')
+    }
+
+    const plan = await db.updateMailPlan(id, data)
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'update_mail_plan',
+      `Updated mail plan #${id}`,
+      'success'
+    )
+
+    return { plan }
+  })
+
+  // 删除方案
+  fastify.delete<{
+    Params: { id: string }
+  }>('/admin/plans/:id', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const id = parseInt(request.params.id)
+
+    const plan = await db.getMailPlanById(id)
+    if (!plan) {
+      throw apiError(ErrorCode.NOT_FOUND, '方案不存在')
+    }
+
+    // 检查是否有订阅使用此方案
+    const subscriptionCount = await prisma.mailSubscription.count({ where: { planId: id } })
+    if (subscriptionCount > 0) {
+      throw apiError(ErrorCode.OPERATION_NOT_ALLOWED, '该方案下有订阅，无法删除')
+    }
+
+    await db.deleteMailPlan(id)
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'delete_mail_plan',
+      `Deleted mail plan: ${plan.name}`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // ==================== 管理员：订阅管理 ====================
+
+  // 获取所有订阅
+  fastify.get<{
+    Querystring: {
+      sourceId?: string
+      status?: string
+      search?: string
+      page?: string
+      pageSize?: string
+    }
+  }>('/admin/subscriptions', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const { sourceId, status, search, page, pageSize } = request.query
+    
+    const result = await db.getAllMailSubscriptions({
+      sourceId: sourceId ? parseInt(sourceId) : undefined,
+      status: status as any,
+      search: search || undefined,
+      page: parseInt(page || '1'),
+      pageSize: parseInt(pageSize || '20')
+    })
+    
+    return result
+  })
+
+  // 管理员退订（删除订阅）
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      refundType: 'none' | 'full' | 'remaining'
+      reason?: string
+    }
+  }>('/admin/subscriptions/:id/cancel', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request, reply) => {
+    const subscriptionId = parseInt(request.params.id)
+    const { refundType, reason } = request.body
+
+    if (!refundType || !['none', 'full', 'remaining'].includes(refundType)) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '请选择退款方式'))
+    }
+
+    if (refundType !== 'none' && (!reason || !reason.trim())) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '退款时必须填写原因'))
+    }
+
+    // 获取订阅详情（包含域名和 source）
+    const subscription = await prisma.mailSubscription.findUnique({
+      where: { id: subscriptionId },
+      include: {
+        user: { select: { id: true, username: true, balance: true } },
+        plan: true,
+        source: true,
+        domains: true
+      }
+    })
+
+    if (!subscription) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '订阅不存在'))
+    }
+
+    // 计算退款金额
+    let refundAmount = 0
+    const planPrice = Number(subscription.plan.price)
+
+    if (refundType === 'full') {
+      refundAmount = planPrice
+    } else if (refundType === 'remaining') {
+      const now = new Date()
+      const expiresAt = new Date(subscription.expiresAt)
+      if (expiresAt > now) {
+        const totalMs = subscription.plan.billingCycle === 'monthly'
+          ? 30 * 24 * 60 * 60 * 1000
+          : 365 * 24 * 60 * 60 * 1000
+        const remainingMs = expiresAt.getTime() - now.getTime()
+        const ratio = Math.min(remainingMs / totalMs, 1)
+        refundAmount = Number((planPrice * ratio).toFixed(2))
+      }
+      // 已过期则剩余价值为 0
+    }
+
+    // 删除 CraneMail 域名
+    for (const domain of subscription.domains) {
+      try {
+        await craneMailService.deleteDomain(subscription.source, domain.domain)
+      } catch (err: any) {
+        console.error(`[AdminMailCancel] Failed to delete domain ${domain.domain} from CraneMail:`, err.message)
+        // 继续处理，不阻塞
+      }
+    }
+
+    // DB 事务：退款 + 删除订阅
+    await prisma.$transaction(async (tx) => {
+      if (refundAmount > 0) {
+        const oldBalance = Number(subscription.user.balance)
+        const newBalance = oldBalance + refundAmount
+
+        await tx.user.update({
+          where: { id: subscription.user.id },
+          data: { balance: { increment: refundAmount } }
+        })
+
+        await tx.balanceLog.create({
+          data: {
+            userId: subscription.user.id,
+            type: 'refund',
+            amount: refundAmount,
+            balanceBefore: oldBalance,
+            balanceAfter: newBalance,
+            remark: `管理员退订邮箱 - ${subscription.plan.name}（${refundType === 'full' ? '全额退款' : '剩余价值退款'}）原因：${reason!.trim()}`
+          }
+        })
+      }
+
+      // 删除订阅（cascade 删除域名、账户、AFF 绑定）
+      await tx.mailSubscription.delete({
+        where: { id: subscriptionId }
+      })
+    })
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'admin_cancel_mail_subscription',
+      `Admin cancelled mail subscription #${subscriptionId} for user ${subscription.user.username} (refund: ${refundType}, amount: ${refundAmount})`,
+      'success'
+    )
+
+    return {
+      success: true,
+      refundAmount,
+      refundType
+    }
+  })
+
+  // ==================== 管理员：域名管理 ====================
+
+  // 获取所有域名
+  fastify.get<{
+    Querystring: {
+      sourceId?: string
+      status?: string
+      search?: string
+      page?: string
+      pageSize?: string
+    }
+  }>('/admin/domains', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request) => {
+    const { sourceId, status, search, page, pageSize } = request.query
+    
+    const result = await db.getAllMailDomains({
+      sourceId: sourceId ? parseInt(sourceId) : undefined,
+      status: status as any,
+      search: search || undefined,
+      page: parseInt(page || '1'),
+      pageSize: parseInt(pageSize || '20')
+    })
+    
+    return result
+  })
+
+  // ==================== 用户端：公开接口 ====================
+
+  // 获取可购买的邮箱源和方案
+  fastify.get('/sources', {
+    onRequest: [fastify.authenticate]
+  }, async () => {
+    if (!await db.hasAvailableMailOffering()) {
+      return { sources: [] }
+    }
+
+    const sources = await db.getAllMailSources(false)
+    
+    const sourcesWithPlans = await Promise.all(
+      sources.map(async (source) => {
+        const plans = await db.getMailPlansBySource(source.id, false)
+        return {
+          id: source.id,
+          name: source.name,
+          code: source.code,
+          plans: plans.map(plan => ({
+            id: plan.id,
+            name: plan.name,
+            description: plan.description,
+            domainLimit: plan.domainLimit,
+            diskLimitGb: plan.diskLimitGb,
+            billingCycle: plan.billingCycle,
+            price: Number(plan.price)
+          }))
+        }
+      })
+    )
+    
+    return { sources: sourcesWithPlans }
+  })
+
+  // ==================== 用户端：订阅管理 ====================
+
+  // 验证邮件优惠码
+  fastify.post<{
+    Body: { code: string }
+  }>('/validate-aff', {
+    onRequest: [fastify.authenticate]
+  }, async (request) => {
+    const { code } = request.body
+    const userId = request.user.id
+
+    if (!code || !code.trim()) {
+      return { valid: false, error: '请输入优惠码' }
+    }
+
+    const { validateMailAffCode } = await import('../db/aff.js')
+    const validation = await validateMailAffCode(code.trim(), userId)
+    
+    return {
+      valid: validation.valid,
+      discountRate: validation.discountRate,
+      commissionRate: validation.commissionRate,
+      error: validation.error
+    }
+  })
+
+  // 获取我的订阅
+  fastify.get('/subscription', {
+    onRequest: [fastify.authenticate]
+  }, async (request) => {
+    const subscription = await db.getUserMailSubscription(request.user.id)
+    
+    if (!subscription) {
+      return { subscription: null }
+    }
+    
+    // 获取使用统计
+    const usage = await db.getSubscriptionUsageStats(subscription.id)
+    
+    // 获取 AFF 绑定信息
+    const { getMailSubscriptionAffBinding } = await import('../db/aff.js')
+    const affBinding = await getMailSubscriptionAffBinding(subscription.id)
+    
+    return {
+      subscription: {
+        id: subscription.id,
+        status: subscription.status,
+        expiresAt: subscription.expiresAt,
+        autoRenew: subscription.autoRenew,
+        source: {
+          id: subscription.source.id,
+          name: subscription.source.name,
+          code: subscription.source.code
+        },
+        plan: {
+          id: subscription.plan.id,
+          name: subscription.plan.name,
+          domainLimit: subscription.domainLimit,
+          diskLimitGb: subscription.diskLimitGb,
+          billingCycle: subscription.plan.billingCycle,
+          price: Number(subscription.plan.price)
+        },
+        usage: {
+          domainCount: usage.domainCount,
+          accountCount: usage.accountCount,
+          diskUsedGb: Math.round(usage.diskUsedMb / 1024 * 100) / 100
+        },
+        domains: subscription.domains.map(d => ({
+          id: d.id,
+          domain: d.domain,
+          status: d.status,
+          accountCount: (d as any).accounts?.length || 0,
+          diskUsedMb: d.diskUsedMb,
+          verifiedAt: d.verifiedAt,
+          createdAt: d.createdAt
+        })),
+        affBinding: affBinding ? {
+          affCode: {
+            code: affBinding.affCode.code,
+            discountRate: Number(affBinding.affCode.discountRate)
+          }
+        } : null
+      }
+    }
+  })
+
+  // 购买订阅
+  fastify.post<{
+    Body: {
+      planId: number
+      affCode?: string
+    }
+  }>('/subscription', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { planId, affCode: affCodeInput } = request.body
+    const userId = request.user.id
+
+    // 检查是否已有订阅
+    const existing = await db.getUserMailSubscription(userId)
+    if (existing) {
+      return reply.code(400).send(apiError(ErrorCode.OPERATION_NOT_ALLOWED, '您已有邮箱订阅，请续费或等待过期后再购买'))
+    }
+
+    // 获取方案
+    const plan = await db.getMailPlanById(planId)
+    if (!plan || !plan.enabled) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '方案不存在或已下架'))
+    }
+
+    const source = plan.source
+    if (!source.enabled) {
+      return reply.code(400).send(apiError(ErrorCode.OPERATION_NOT_ALLOWED, '该邮箱源已停用'))
+    }
+
+    // 计算费用
+    const originalPrice = Number(plan.price)
+    let finalPrice = originalPrice
+    let discountAmount = 0
+    let validatedAffCode: { id: number; userId: number; discountRate: number } | null = null
+
+    // 验证优惠码
+    if (affCodeInput && affCodeInput.trim()) {
+      const { validateMailAffCode } = await import('../db/aff.js')
+      const validation = await validateMailAffCode(affCodeInput.trim(), userId)
+      if (!validation.valid) {
+        return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, validation.error || '优惠码无效'))
+      }
+      validatedAffCode = {
+        id: validation.affCode!.id,
+        userId: validation.affCode!.userId,
+        discountRate: validation.discountRate!
+      }
+      // 计算折扣金额（折扣应用于方案价格）
+      discountAmount = calculateDiscountAmount(originalPrice, validatedAffCode.discountRate)
+      finalPrice = calculateDiscountedPrice(originalPrice, validatedAffCode.discountRate)
+    }
+
+    // 检查余额
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    })
+    if (!user || Number(user.balance) < finalPrice) {
+      return reply.code(400).send(apiError(ErrorCode.INSUFFICIENT_BALANCE, `余额不足，需要 ¥${finalPrice.toFixed(2)}，当前余额 ¥${Number(user?.balance || 0).toFixed(2)}`))
+    }
+
+    // 计算到期时间
+    const expiresAt = new Date()
+    if (plan.billingCycle === 'monthly') {
+      expiresAt.setMonth(expiresAt.getMonth() + 1)
+    } else {
+      expiresAt.setFullYear(expiresAt.getFullYear() + 1)
+    }
+
+    // 事务：扣费 + 创建订阅 + 处理AFF
+    const subscription = await prisma.$transaction(async (tx) => {
+      // 扣除余额
+      await tx.user.update({
+        where: { id: userId },
+        data: { balance: { decrement: finalPrice } }
+      })
+
+      // 记录余额日志
+      const userBalance = Number(user.balance)
+      await tx.balanceLog.create({
+        data: {
+          userId,
+          type: 'consume',
+          amount: -finalPrice,
+          balanceBefore: userBalance,
+          balanceAfter: Number((userBalance - finalPrice).toFixed(2)),
+          remark: validatedAffCode 
+            ? `购买域名邮箱 - ${plan.name} (折扣 ¥${discountAmount.toFixed(2)})`
+            : `购买域名邮箱 - ${plan.name} (${source.name})`
+        }
+      })
+
+      // 创建订阅
+      const newSubscription = await tx.mailSubscription.create({
+        data: {
+          userId,
+          sourceId: source.id,
+          planId: plan.id,
+          domainLimit: plan.domainLimit,
+          diskLimitGb: plan.diskLimitGb,
+          expiresAt
+        },
+        include: {
+          source: true,
+          plan: true
+        }
+      })
+
+      // 如果使用了优惠码，创建 AFF 绑定并处理返利
+      if (validatedAffCode) {
+        const { createMailAffBinding, processMailAffCommission } = await import('../db/aff.js')
+        // 创建订阅与优惠码的永久绑定
+        await createMailAffBinding(newSubscription.id, validatedAffCode.id, tx as any)
+        // 给优惠码创建者返利（基于原价，不是折扣后价格）
+        await processMailAffCommission(
+          validatedAffCode.id,
+          newSubscription.id,
+          originalPrice,
+          'new_purchase',
+          tx as any
+        )
+      }
+
+      return newSubscription
+    })
+
+    await createLog(
+      userId,
+      'mail',
+      'purchase_mail_subscription',
+      `Purchased mail subscription: planId=${planId}, price=${finalPrice}${validatedAffCode ? `, affDiscount=${discountAmount}` : ''}`,
+      'success'
+    )
+
+    return {
+      subscription: {
+        id: subscription.id,
+        status: subscription.status,
+        expiresAt: subscription.expiresAt,
+        source: { id: subscription.source.id, name: subscription.source.name },
+        plan: { id: subscription.plan.id, name: subscription.plan.name }
+      },
+      discountApplied: discountAmount > 0,
+      discountAmount,
+      finalPrice
+    }
+  })
+
+  // 续费订阅
+  fastify.post<{
+    Body: { months: number }
+  }>('/subscription/renew', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { months } = request.body
+    const userId = request.user.id
+
+    if (!months || months < 1 || months > 12) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '续费月数需在 1-12 之间'))
+    }
+
+    const subscription = await db.getUserMailSubscription(userId)
+    if (!subscription) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '您没有邮箱订阅'))
+    }
+
+    // 检查订阅状态
+    if (subscription.status === 'suspended') {
+      return reply.code(400).send(apiError(ErrorCode.OPERATION_NOT_ALLOWED, '订阅已被暂停，无法续费'))
+    }
+
+    const plan = subscription.plan
+    const monthlyPrice = plan.billingCycle === 'monthly' 
+      ? Number(plan.price) 
+      : Number(plan.price) / 12
+    
+    const originalPrice = Math.round(monthlyPrice * months * 100) / 100
+
+    // 检查 AFF 绑定，计算折扣
+    const { getMailSubscriptionAffBinding, processMailAffCommission } = await import('../db/aff.js')
+    const affBinding = await getMailSubscriptionAffBinding(subscription.id)
+    let discountRate = 0
+    let discountAmount = 0
+    let finalPrice = originalPrice
+
+    if (affBinding && affBinding.affCode.enabled) {
+      discountRate = Number(affBinding.affCode.discountRate)
+      discountAmount = calculateDiscountAmount(originalPrice, discountRate)
+      finalPrice = calculateDiscountedPrice(originalPrice, discountRate)
+    }
+
+    // 检查余额
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { balance: true }
+    })
+    if (!user || Number(user.balance) < finalPrice) {
+      return reply.code(400).send(apiError(ErrorCode.INSUFFICIENT_BALANCE, `余额不足，需要 ¥${finalPrice.toFixed(2)}，当前余额 ¥${Number(user?.balance || 0).toFixed(2)}`))
+    }
+
+    // 事务：扣费 + 续费 + 返利
+    const updated = await prisma.$transaction(async (tx) => {
+      await tx.user.update({
+        where: { id: userId },
+        data: { balance: { decrement: finalPrice } }
+      })
+
+      const userBalance = Number(user.balance)
+      const remarkText = discountAmount > 0
+        ? `续费域名邮箱 ${months} 个月（优惠码折扣 -¥${discountAmount.toFixed(2)}）`
+        : `续费域名邮箱 ${months} 个月`
+      
+      await tx.balanceLog.create({
+        data: {
+          userId,
+          type: 'consume',
+          amount: -finalPrice,
+          balanceBefore: userBalance,
+          balanceAfter: Number((userBalance - finalPrice).toFixed(2)),
+          remark: remarkText
+        }
+      })
+
+      // 计算新的过期时间
+      const currentExpiry = subscription.expiresAt > new Date() ? subscription.expiresAt : new Date()
+      const newExpiry = new Date(currentExpiry)
+      newExpiry.setMonth(newExpiry.getMonth() + months)
+
+      // 更新订阅
+      const result = await tx.mailSubscription.update({
+        where: { id: subscription.id },
+        data: { expiresAt: newExpiry, status: 'active' }
+      })
+
+      // 如果有 AFF 绑定，给推荐人返利
+      if (affBinding) {
+        await processMailAffCommission(
+          affBinding.affCode.id,
+          subscription.id,
+          originalPrice, // 基于原价计算返利
+          'renew',
+          tx as any
+        )
+      }
+
+      return result
+    })
+
+    await createLog(
+      userId,
+      'mail',
+      'renew_mail_subscription',
+      `Renewed mail subscription for ${months} months, price=${finalPrice}${discountAmount > 0 ? `, affDiscount=${discountAmount}` : ''}`,
+      'success'
+    )
+
+    return { 
+      expiresAt: updated.expiresAt,
+      discountApplied: discountAmount > 0,
+      discountAmount,
+      finalPrice
+    }
+  })
+
+  // ==================== 用户端：域名管理 ====================
+
+  // 获取我的域名列表
+  fastify.get('/domains', {
+    onRequest: [fastify.authenticate]
+  }, async (request) => {
+    const subscription = await db.getUserMailSubscription(request.user.id)
+    if (!subscription) {
+      return { domains: [] }
+    }
+
+    const domains = await db.getMailDomainsBySubscription(subscription.id)
+    return {
+      domains: domains.map(d => ({
+        id: d.id,
+        domain: d.domain,
+        status: d.status,
+        accountCount: d.accounts.length,
+        diskUsedMb: d.diskUsedMb,
+        verifiedAt: d.verifiedAt,
+        createdAt: d.createdAt
+      }))
+    }
+  })
+
+  // 获取域名详情
+  fastify.get<{
+    Params: { id: string }
+  }>('/domains/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.id)
+    const domain = await db.getMailDomainById(domainId)
+    
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    return {
+      domain: {
+        id: domain.id,
+        domain: domain.domain,
+        status: domain.status,
+        diskUsedMb: domain.diskUsedMb,
+        verifiedAt: domain.verifiedAt,
+        createdAt: domain.createdAt,
+        adminUsername: domain.adminUsername,
+        adminPassword: domain.adminPassword,
+        sourceCode: domain.source.code,
+        accounts: domain.accounts.map((a: MailAccount) => ({
+          id: a.id,
+          email: a.email,
+          username: a.username,
+          displayName: a.displayName,
+          diskLimitMb: a.diskLimitMb,
+          diskUsedMb: a.diskUsedMb,
+          isAdmin: a.isAdmin,
+          createdAt: a.createdAt
+        }))
+      }
+    }
+  })
+
+  // 添加域名
+  fastify.post<{
+    Body: { domain: string }
+  }>('/domains', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const { domain: domainName } = request.body
+    const userId = request.user.id
+
+    if (!domainName || !/^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*\.[a-z]{2,}$/i.test(domainName)) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '请输入有效的域名'))
+    }
+
+    const subscription = await db.getUserMailSubscription(userId)
+    if (!subscription) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '您没有邮箱订阅'))
+    }
+
+    if (subscription.status !== 'active') {
+      return reply.code(400).send(apiError(ErrorCode.OPERATION_NOT_ALLOWED, '订阅已过期或暂停'))
+    }
+
+    // 检查域名数量限制
+    const usage = await db.getSubscriptionUsageStats(subscription.id)
+    if (usage.domainCount >= subscription.domainLimit) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_EXCEEDED, '已达域名数量上限'))
+    }
+
+    // 检查域名是否已存在
+    const exists = await db.checkMailDomainExists(domainName.toLowerCase(), subscription.sourceId)
+    if (exists) {
+      return reply.code(400).send(apiError(ErrorCode.RESOURCE_EXISTS, '该域名已被使用'))
+    }
+
+    // 调用 CraneMail API 创建域名
+    const source = subscription.source
+    let craneResult: { username?: string; password?: string; server?: string } = {}
+    
+    try {
+      craneResult = await craneMailService.createDomain(source, domainName.toLowerCase(), subscription.diskLimitGb)
+    } catch (err: any) {
+      return reply.code(502).send(apiError(ErrorCode.UPSTREAM_ERROR, `创建域名失败: ${err.message}`))
+    }
+
+    // 保存域名
+    const mailDomain = await db.createMailDomain({
+      subscriptionId: subscription.id,
+      sourceId: subscription.sourceId,
+      domain: domainName.toLowerCase(),
+      adminUsername: craneResult.username,
+      adminPassword: craneResult.password
+    })
+
+    // 如果 API 返回了管理员账号，自动创建账户记录
+    if (craneResult.username && craneResult.password) {
+      const usernameWithoutDomain = craneResult.username.split('@')[0] || 'postmaster'
+      await db.createMailAccount({
+        domainId: mailDomain.id,
+        email: craneResult.username,
+        username: usernameWithoutDomain,
+        displayName: 'Administrator',
+        isAdmin: true,
+        diskLimitMb: subscription.diskLimitGb * 1024 // 管理员账号使用全部配额
+      })
+    }
+
+    await createLog(
+      userId,
+      'mail',
+      'add_mail_domain',
+      `Added mail domain: ${domainName}`,
+      'success'
+    )
+
+    return {
+      domain: {
+        id: mailDomain.id,
+        domain: mailDomain.domain,
+        status: mailDomain.status,
+        createdAt: mailDomain.createdAt
+      }
+    }
+  })
+
+  // 刷新域名验证状态
+  fastify.post<{
+    Params: { id: string }
+  }>('/domains/:id/verify', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.id)
+    const domain = await db.getMailDomainById(domainId)
+    
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    // 调用 CraneMail API 检查验证状态
+    try {
+      const info = await craneMailService.getDomainInfo(domain.source, domain.domain)
+      
+      if (info.verified) {
+        await db.updateMailDomain(domainId, {
+          status: 'verified',
+          verifiedAt: new Date()
+        })
+        return { status: 'verified', verified: true }
+      }
+      
+      return {
+        status: 'pending',
+        verified: false,
+        txtRecord: info.txtRecord
+      }
+    } catch (err: any) {
+      return reply.code(502).send(apiError(ErrorCode.UPSTREAM_ERROR, `检查验证状态失败: ${err.message}`))
+    }
+  })
+
+  // 获取域名 DNS 配置信息
+  fastify.get<{
+    Params: { id: string }
+  }>('/domains/:id/dns', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.id)
+    const domain = await db.getMailDomainById(domainId)
+    
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    // 获取 DNS 配置信息
+    try {
+      const info = await craneMailService.getDomainInfo(domain.source, domain.domain)
+      return {
+        verified: info.verified,
+        txtRecord: info.txtRecord,
+        dnsRecords: info.dnsRecords,
+        mxRecords: info.mxRecords,
+        spfRecord: info.spfRecord,
+        dkimRecord: info.dkimRecord,
+        cnameRecords: info.cnameRecords
+      }
+    } catch (err: any) {
+      return reply.code(502).send(apiError(ErrorCode.UPSTREAM_ERROR, `获取 DNS 配置失败: ${err.message}`))
+    }
+  })
+
+  // 删除域名
+  fastify.delete<{
+    Params: { id: string }
+  }>('/domains/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.id)
+    const domain = await db.getMailDomainById(domainId)
+    
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    // 调用 CraneMail API 删除域名
+    try {
+      await craneMailService.deleteDomain(domain.source, domain.domain)
+    } catch (err: any) {
+      console.error('CraneMail delete domain error:', err)
+      // 继续删除本地记录
+    }
+
+    await db.deleteMailDomain(domainId)
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'delete_mail_domain',
+      `Deleted mail domain: ${domain.domain}`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // ==================== 用户端：邮箱账户管理 ====================
+
+  // 获取域名下的邮箱账户
+  fastify.get<{
+    Params: { domainId: string }
+  }>('/domains/:domainId/accounts', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.domainId)
+    const domain = await db.getMailDomainById(domainId)
+    
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    const accounts = await db.getMailAccountsByDomain(domainId)
+    return {
+      accounts: accounts.map(a => ({
+        id: a.id,
+        email: a.email,
+        username: a.username,
+        displayName: a.displayName,
+        diskLimitMb: a.diskLimitMb,
+        diskUsedMb: a.diskUsedMb,
+        isAdmin: a.isAdmin,
+        createdAt: a.createdAt
+      }))
+    }
+  })
+
+  // 创建邮箱账户
+  fastify.post<{
+    Params: { domainId: string }
+    Body: {
+      username: string
+      password: string
+      displayName?: string
+      diskLimitMb?: number
+      isAdmin?: boolean
+    }
+  }>('/domains/:domainId/accounts', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.domainId)
+    const { username, password, displayName, diskLimitMb, isAdmin } = request.body
+    
+    const domain = await db.getMailDomainById(domainId)
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    if (domain.status !== 'verified') {
+      return reply.code(400).send(apiError(ErrorCode.OPERATION_NOT_ALLOWED, '请先完成域名验证'))
+    }
+
+    // 验证用户名
+    if (!username || !/^[a-z0-9._-]+$/i.test(username)) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '用户名只能包含字母、数字、点、下划线和连字符'))
+    }
+
+    // 验证密码
+    if (!password || password.length < 8) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '密码至少需要 8 位'))
+    }
+
+    // 检查账户是否已存在
+    const exists = await db.checkMailAccountExists(domainId, username.toLowerCase())
+    if (exists) {
+      return reply.code(400).send(apiError(ErrorCode.RESOURCE_EXISTS, '该邮箱账户已存在'))
+    }
+
+    const email = `${username.toLowerCase()}@${domain.domain}`
+
+    // 调用 SmarterMail API 创建账户
+    try {
+      await smarterMailService.createAccount(
+        domain.source,
+        domain.domain,
+        domain.adminUsername!,
+        domain.adminPassword!,
+        {
+          username: username.toLowerCase(),
+          password,
+          displayName: displayName || username,
+          diskLimitMb: diskLimitMb || 2048
+        }
+      )
+    } catch (err: any) {
+      return reply.code(502).send(apiError(ErrorCode.UPSTREAM_ERROR, `创建邮箱账户失败: ${err.message}`))
+    }
+
+    // 保存到数据库
+    const account = await db.createMailAccount({
+      domainId,
+      email,
+      username: username.toLowerCase(),
+      displayName: displayName || username,
+      diskLimitMb: diskLimitMb || 2048,
+      isAdmin: isAdmin || false
+    })
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'create_mail_account',
+      `Created mail account: ${email}`,
+      'success'
+    )
+
+    return {
+      account: {
+        id: account.id,
+        email: account.email,
+        username: account.username,
+        displayName: account.displayName,
+        diskLimitMb: account.diskLimitMb,
+        isAdmin: account.isAdmin
+      }
+    }
+  })
+
+  // 更新邮箱账户
+  fastify.put<{
+    Params: { domainId: string; accountId: string }
+    Body: {
+      displayName?: string
+      diskLimitMb?: number
+    }
+  }>('/domains/:domainId/accounts/:accountId', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.domainId)
+    const accountId = parseInt(request.params.accountId)
+    const { displayName, diskLimitMb } = request.body
+    
+    const domain = await db.getMailDomainById(domainId)
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    const account = await db.getMailAccountById(accountId)
+    if (!account || account.domainId !== domainId) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '邮箱账户不存在'))
+    }
+
+    // 调用 SmarterMail API 更新账户
+    try {
+      await smarterMailService.updateAccount(
+        domain.source,
+        domain.domain,
+        domain.adminUsername!,
+        domain.adminPassword!,
+        account.username,
+        { displayName, diskLimitMb }
+      )
+    } catch (err: any) {
+      return reply.code(502).send(apiError(ErrorCode.UPSTREAM_ERROR, `更新邮箱账户失败: ${err.message}`))
+    }
+
+    const updated = await db.updateMailAccount(accountId, { displayName, diskLimitMb })
+
+    return {
+      account: {
+        id: updated.id,
+        email: updated.email,
+        displayName: updated.displayName,
+        diskLimitMb: updated.diskLimitMb
+      }
+    }
+  })
+
+  // 重置邮箱账户密码
+  fastify.post<{
+    Params: { domainId: string; accountId: string }
+    Body: { password: string }
+  }>('/domains/:domainId/accounts/:accountId/reset-password', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.domainId)
+    const accountId = parseInt(request.params.accountId)
+    const { password } = request.body
+    
+    const domain = await db.getMailDomainById(domainId)
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    const account = await db.getMailAccountById(accountId)
+    if (!account || account.domainId !== domainId) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '邮箱账户不存在'))
+    }
+
+    if (!password || password.length < 8) {
+      return reply.code(400).send(apiError(ErrorCode.VALIDATION_ERROR, '密码至少需要 8 位'))
+    }
+
+    // 调用 SmarterMail API 重置密码
+    try {
+      await smarterMailService.resetPassword(
+        domain.source,
+        domain.domain,
+        domain.adminUsername!,
+        domain.adminPassword!,
+        account.username,
+        password
+      )
+    } catch (err: any) {
+      return reply.code(502).send(apiError(ErrorCode.UPSTREAM_ERROR, `重置密码失败: ${err.message}`))
+    }
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'reset_mail_account_password',
+      `Reset password for mail account: ${account.email}`,
+      'success'
+    )
+
+    return { success: true }
+  })
+
+  // 删除邮箱账户
+  fastify.delete<{
+    Params: { domainId: string; accountId: string }
+  }>('/domains/:domainId/accounts/:accountId', {
+    onRequest: [fastify.authenticate]
+  }, async (request, reply) => {
+    const domainId = parseInt(request.params.domainId)
+    const accountId = parseInt(request.params.accountId)
+    
+    const domain = await db.getMailDomainById(domainId)
+    if (!domain || domain.subscription.userId !== request.user.id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '域名不存在'))
+    }
+
+    const account = await db.getMailAccountById(accountId)
+    if (!account || account.domainId !== domainId) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '邮箱账户不存在'))
+    }
+
+    // 调用 SmarterMail API 删除账户
+    try {
+      await smarterMailService.deleteAccount(
+        domain.source,
+        domain.domain,
+        domain.adminUsername!,
+        domain.adminPassword!,
+        account.username
+      )
+    } catch (err: any) {
+      console.error('SmarterMail delete account error:', err)
+      // 继续删除本地记录
+    }
+
+    await db.deleteMailAccount(accountId)
+
+    await createLog(
+      request.user.id,
+      'mail',
+      'delete_mail_account',
+      `Deleted mail account: ${account.email}`,
+      'success'
+    )
+
+    return { success: true }
+  })
+}
diff --git a/server/src/routes/notifications.ts b/server/src/routes/notifications.ts
new file mode 100644
index 0000000..6cd35a5
--- /dev/null
+++ b/server/src/routes/notifications.ts
@@ -0,0 +1,462 @@
+/**
+ * 通知渠道管理路由
+ * 用户可以添加、管理通知渠道（Telegram、Discord、Webhook等）
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { testNotificationChannel } from '../lib/notifier.js'
+import type { NotificationChannel } from '../types/database.js'
+import { assertSafeWebhookUrl, OutboundTargetValidationError } from '../lib/outbound-security.js'
+
+export default async function notificationRoutes(fastify: FastifyInstance) {
+  async function validateOutboundConfig(
+    type: 'telegram' | 'discord' | 'webhook' | 'email',
+    config: Record<string, unknown>
+  ): Promise<{ valid: boolean; error?: string }> {
+    if (type !== 'webhook' || typeof config.url !== 'string') {
+      return { valid: true }
+    }
+
+    try {
+      await assertSafeWebhookUrl(config.url)
+      return { valid: true }
+    } catch (error) {
+      if (error instanceof OutboundTargetValidationError) {
+        return { valid: false, error: error.message }
+      }
+      throw error
+    }
+  }
+
+  // 获取用户的通知渠道列表
+  fastify.get('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const channels = await db.getNotificationChannelsByUserId(request.user.id)
+
+    return {
+      channels: channels.map(c => ({
+        id: c.id,
+        type: c.type,
+        name: c.name,
+        enabled: Boolean(c.enabled),
+        // 隐藏敏感配置信息
+        configPreview: getConfigPreview(c.type, c.config),
+        createdAt: c.created_at
+      }))
+    }
+  })
+
+  // 获取单个通知渠道详情
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const channelId = Number(id)
+
+    if (isNaN(channelId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const channel = await db.getNotificationChannelById(channelId)
+    if (!channel) {
+      return reply.code(404).send(apiError(ErrorCode.NOTIFICATION_CHANNEL_NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户通知渠道操作
+    if (channel.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const config = typeof channel.config === 'string'
+      ? JSON.parse(channel.config)
+      : channel.config
+
+    return {
+      channel: {
+        id: channel.id,
+        type: channel.type,
+        name: channel.name,
+        config: maskSensitiveConfig(channel.type, config as Record<string, unknown>),
+        enabled: Boolean(channel.enabled),
+        createdAt: channel.created_at
+      }
+    }
+  })
+
+  // 添加通知渠道
+  fastify.post<{ Body: { type: 'telegram' | 'discord' | 'webhook' | 'email'; name: string; config: Record<string, unknown>; enabled?: boolean } }>('/', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['type', 'name', 'config'],
+        properties: {
+          type: { type: 'string', enum: ['telegram', 'discord', 'webhook', 'email'] },
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          config: { type: 'object' },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { type: 'telegram' | 'discord' | 'webhook' | 'email'; name: string; config: Record<string, unknown>; enabled?: boolean } }>, reply: FastifyReply) => {
+    const { type, name, config, enabled = true } = request.body
+
+    // 验证配置
+    const validation = validateConfig(type, config)
+    if (!validation.valid) {
+      return reply.code(400).send({ error: validation.error })
+    }
+
+    const outboundValidation = await validateOutboundConfig(type, config)
+    if (!outboundValidation.valid) {
+      return reply.code(400).send({ error: outboundValidation.error })
+    }
+
+    // 保存到数据库
+    const channelId = await db.createNotificationChannel({
+      userId: request.user.id,
+      type,
+      name,
+      config,
+      enabled
+    })
+
+    await createLog(request.user.id, 'notification', 'notification.add', `Added ${type} notification channel "${name}"`, 'success')
+
+    reply.code(201).send({
+      message: 'Notification channel added',
+      channel: {
+        id: channelId,
+        type,
+        name,
+        enabled
+      }
+    })
+  })
+
+  // 更新通知渠道
+  fastify.patch<{
+    Params: { id: string }
+    Body: { name?: string; config?: Record<string, unknown>; enabled?: boolean }
+  }>('/:id', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          config: { type: 'object' },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { name?: string; config?: Record<string, unknown>; enabled?: boolean }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const channelId = Number(id)
+
+    if (isNaN(channelId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { name, config, enabled } = request.body
+
+    const channel = await db.getNotificationChannelById(channelId)
+    if (!channel) {
+      return reply.code(404).send(apiError(ErrorCode.NOTIFICATION_CHANNEL_NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户通知渠道操作
+    if (channel.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 如果更新配置，验证配置
+    if (config) {
+      const validation = validateConfig(channel.type, config)
+      if (!validation.valid) {
+        return reply.code(400).send({ error: validation.error })
+      }
+
+      const outboundValidation = await validateOutboundConfig(channel.type, config)
+      if (!outboundValidation.valid) {
+        return reply.code(400).send({ error: outboundValidation.error })
+      }
+    }
+
+    await db.updateNotificationChannel(channelId, { name, config, enabled })
+
+    // 构建变更详情
+    const changes: string[] = []
+    if (name !== undefined) changes.push(`name -> "${name}"`)
+    if (config !== undefined) changes.push('config updated')
+    if (enabled !== undefined) changes.push(`enabled -> ${enabled}`)
+
+    await createLog(
+      request.user.id,
+      'notification',
+      'notification.update',
+      `Updated ${channel.type} notification channel "${channel.name}": ${changes.join(', ')}`,
+      'success'
+    )
+
+    return { message: 'Notification channel updated' }
+  })
+
+  // 删除通知渠道
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const channelId = Number(id)
+
+    if (isNaN(channelId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const channel = await db.getNotificationChannelById(channelId)
+    if (!channel) {
+      return reply.code(404).send(apiError(ErrorCode.NOTIFICATION_CHANNEL_NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户通知渠道操作
+    if (channel.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    await db.deleteNotificationChannel(channelId)
+
+    await createLog(request.user.id, 'notification', 'notification.delete', `Deleted ${channel.type} notification channel "${channel.name}"`, 'success')
+
+    return { message: 'Notification channel deleted' }
+  })
+
+  // 测试通知渠道
+  fastify.post<{ Params: { id: string } }>('/:id/test', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const channelId = Number(id)
+
+    if (isNaN(channelId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const channel = await db.getNotificationChannelById(channelId)
+    if (!channel) {
+      return reply.code(404).send(apiError(ErrorCode.NOTIFICATION_CHANNEL_NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户通知渠道操作
+    if (channel.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const result = await testNotificationChannel(channel as NotificationChannel)
+
+    if (result.success) {
+      return { message: 'Test notification sent' }
+    } else {
+      return reply.code(400).send({ error: 'Test failed: ' + result.error, code: 'TEST_FAILED' })
+    }
+  })
+
+  // 切换启用/禁用
+  fastify.post<{ Params: { id: string } }>('/:id/toggle', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const channelId = Number(id)
+
+    if (isNaN(channelId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const channel = await db.getNotificationChannelById(channelId)
+    if (!channel) {
+      return reply.code(404).send(apiError(ErrorCode.NOTIFICATION_CHANNEL_NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户通知渠道操作
+    if (channel.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const newEnabled = !channel.enabled
+    await db.updateNotificationChannel(channelId, { enabled: newEnabled })
+
+    await createLog(
+      request.user.id,
+      'notification',
+      newEnabled ? 'notification.enable' : 'notification.disable',
+      `${newEnabled ? 'Enabled' : 'Disabled'} ${channel.type} notification channel "${channel.name}"`,
+      'success'
+    )
+
+    return {
+      message: newEnabled ? 'Notification channel enabled' : 'Notification channel disabled',
+      enabled: newEnabled
+    }
+  })
+
+  // 获取通知历史记录
+  fastify.get<{
+    Querystring: { page?: string; pageSize?: string; status?: 'pending' | 'sent' | 'failed' }
+  }>('/logs', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: { page?: string; pageSize?: string; status?: 'pending' | 'sent' | 'failed' }
+  }>) => {
+    const page = parseInt(request.query.page || '1', 10)
+    const pageSize = Math.min(parseInt(request.query.pageSize || '20', 10), 100)
+    const status = request.query.status
+
+    const result = await db.getNotificationLogsByUserId(request.user.id, {
+      page,
+      pageSize,
+      status
+    })
+
+    return result
+  })
+
+  // 获取通知统计
+  fastify.get('/stats', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const stats = await db.getNotificationStats(request.user.id)
+    return { stats }
+  })
+
+  // 获取所有全局通知渠道（托管用户用于绑定套餐）
+  fastify.get('/global-channels', {
+    onRequest: [fastify.authenticate]
+  }, async () => {
+    const { prisma } = await import('../db/prisma.js')
+    const channels = await prisma.notificationChannel.findMany({
+      where: { isGlobal: true, enabled: true } as any,
+      orderBy: { createdAt: 'asc' },
+      select: { id: true, name: true, type: true, config: true }
+    })
+    return {
+      channels: channels.map(c => {
+        const config = typeof c.config === 'string' ? JSON.parse(c.config) : c.config as Record<string, unknown>
+        return {
+          id: c.id,
+          name: c.name,
+          type: c.type,
+          configPreview: `Chat ID: ${config.chatId || 'N/A'}`
+        }
+      })
+    }
+  })
+}
+
+/**
+ * 验证配置
+ */
+function validateConfig(
+  type: 'telegram' | 'discord' | 'webhook' | 'email',
+  config: Record<string, unknown>
+): { valid: boolean; error?: string } {
+  switch (type) {
+    case 'telegram':
+      if (!config.botToken || !config.chatId) {
+        return { valid: false, error: 'Please provide Bot Token and Chat ID' }
+      }
+      break
+    case 'discord':
+      if (!config.webhookUrl || typeof config.webhookUrl !== 'string') {
+        return { valid: false, error: 'Please provide Discord Webhook URL' }
+      }
+      if (!config.webhookUrl.startsWith('https://discord.com/api/webhooks/')) {
+        return { valid: false, error: 'Invalid Discord Webhook URL' }
+      }
+      break
+    case 'webhook':
+      if (!config.url || typeof config.url !== 'string') {
+        return { valid: false, error: 'Please provide Webhook URL' }
+      }
+      if (!config.url.startsWith('http://') && !config.url.startsWith('https://')) {
+        return { valid: false, error: 'Invalid Webhook URL' }
+      }
+      break
+    case 'email':
+      if (!config.email) {
+        return { valid: false, error: 'Please provide email address' }
+      }
+      break
+  }
+
+  return { valid: true }
+}
+
+/**
+ * 获取配置预览（隐藏敏感信息）
+ */
+function getConfigPreview(type: string, configStr: string | Record<string, unknown>): string {
+  try {
+    const config = typeof configStr === 'string' ? JSON.parse(configStr) : configStr as Record<string, unknown>
+
+    switch (type) {
+      case 'telegram':
+        return `Chat ID: ${config.chatId || 'Not set'}`
+      case 'discord':
+        return typeof config.webhookUrl === 'string' && config.webhookUrl
+          ? `Webhook: ...${config.webhookUrl.slice(-20)}`
+          : 'Not set'
+      case 'webhook':
+        if (typeof config.url === 'string' && config.url) {
+          try {
+            return `URL: ${new URL(config.url).hostname}`
+          } catch {
+            return 'URL: Invalid'
+          }
+        }
+        return 'Not set'
+      case 'email':
+        return typeof config.email === 'string' ? config.email : 'Not set'
+      default:
+        return 'Unknown type'
+    }
+  } catch {
+    return 'Config error'
+  }
+}
+
+/**
+ * 隐藏敏感配置信息
+ */
+function maskSensitiveConfig(
+  type: string,
+  config: Record<string, unknown>
+): Record<string, unknown> {
+  const masked = { ...config }
+
+  switch (type) {
+    case 'telegram':
+      if (typeof masked.botToken === 'string' && masked.botToken) {
+        masked.botToken = masked.botToken.slice(0, 10) + '...' + masked.botToken.slice(-5)
+      }
+      break
+    case 'discord':
+      if (typeof masked.webhookUrl === 'string' && masked.webhookUrl) {
+        masked.webhookUrl = masked.webhookUrl.slice(0, 50) + '...'
+      }
+      break
+    case 'webhook':
+      if (masked.secret) {
+        masked.secret = '***已设置***'
+      }
+      break
+  }
+
+  return masked
+}
+
diff --git a/server/src/routes/oauth.ts b/server/src/routes/oauth.ts
new file mode 100644
index 0000000..7878579
--- /dev/null
+++ b/server/src/routes/oauth.ts
@@ -0,0 +1,585 @@
+/**
+ * OAuth 认证路由
+ * 支持 GitHub 和 Google 快捷登录/绑定
+ * 
+ * 安全增强：使用 Redis 存储的一次性 state token 防止 CSRF 和重放攻击
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { generateOAuthState, verifyAndConsumeOAuthState, logSecurityEvent, SecurityEventType, generateRefreshToken, detectNewLoginLocation, generateOAuthLoginCode, verifyAndConsumeOAuthLoginCode, isAccessTokenInvalidated } from '../lib/security.js'
+import { sendLoginAlertEmail } from '../lib/mailer.js'
+import { getRefreshTokenCookieOptions } from '../lib/cookie-config.js'
+import { getSafeRedirectUrl } from '../lib/redirect-validator.js'
+import { consumeOAuthBindTicket, generateOAuthBindTicket } from '../lib/action-ticket.js'
+
+
+// OAuth 提供商配置
+const OAUTH_PROVIDERS = {
+  github: {
+    authUrl: 'https://github.com/login/oauth/authorize',
+    tokenUrl: 'https://github.com/login/oauth/access_token',
+    userUrl: 'https://api.github.com/user',
+    scope: 'read:user user:email'
+  },
+  google: {
+    authUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
+    tokenUrl: 'https://oauth2.googleapis.com/token',
+    userUrl: 'https://www.googleapis.com/oauth2/v2/userinfo',
+    scope: 'openid email profile'
+  }
+} as const
+
+type OAuthProvider = keyof typeof OAUTH_PROVIDERS
+
+export default async function oauthRoutes(fastify: FastifyInstance) {
+
+  // ==================== 管理员配置 API ====================
+
+  /**
+   * 获取所有 OAuth 配置（管理员）
+   */
+  fastify.get('/configs', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (_request: FastifyRequest, _reply: FastifyReply) => {
+    const configs = await db.getOAuthConfigs()
+
+    return {
+      configs: configs.map(c => ({
+        provider: c.provider,
+        clientId: c.client_id,
+        // Client Secret 只返回部分，用于确认已配置
+        clientSecretMasked: c.client_secret ? '****' + c.client_secret.slice(-4) : null,
+        enabled: Boolean(c.enabled),
+        updatedAt: c.updated_at
+      }))
+    }
+  })
+
+  /**
+   * 更新 OAuth 配置（管理员）
+   */
+  fastify.put<{
+    Params: { provider: OAuthProvider }
+    Body: { clientId: string; clientSecret: string; enabled?: boolean }
+  }>('/configs/:provider', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['provider'],
+        properties: {
+          provider: { type: 'string', enum: ['github', 'google'] }
+        }
+      },
+      body: {
+        type: 'object',
+        required: ['clientId', 'clientSecret'],
+        properties: {
+          clientId: { type: 'string', minLength: 1 },
+          clientSecret: { type: 'string', minLength: 1 },
+          enabled: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { provider: OAuthProvider }
+    Body: { clientId: string; clientSecret: string; enabled?: boolean }
+  }>, _reply: FastifyReply) => {
+    const { provider } = request.params
+    const { clientId, clientSecret, enabled = false } = request.body
+
+    await db.upsertOAuthConfig(provider, { clientId, clientSecret, enabled })
+
+    return { message: `${provider} OAuth 配置已更新` }
+  })
+
+  /**
+   * 删除 OAuth 配置（管理员）
+   */
+  fastify.delete<{ Params: { provider: OAuthProvider } }>('/configs/:provider', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { provider: OAuthProvider } }>, _reply: FastifyReply) => {
+    const { provider } = request.params
+    await db.deleteOAuthConfig(provider)
+
+    return { message: `${provider} OAuth 配置已删除` }
+  })
+
+  // ==================== 公共 API ====================
+
+  /**
+   * 获取启用的 OAuth 提供商（用于登录页显示）
+   */
+  fastify.get('/providers', async () => {
+    const configs = await db.getEnabledOAuthConfigs()
+    return {
+      providers: configs.map(c => c.provider)
+    }
+  })
+
+  // ==================== OAuth 认证流程 ====================
+
+  fastify.post('/bind-ticket', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    if (!request.user.iat) {
+      return reply.code(401).send({ error: 'Unauthorized', code: 'UNAUTHORIZED' })
+    }
+
+    return {
+      ticket: generateOAuthBindTicket(
+        request.user.id,
+        request.user.iat,
+        request.user.sid
+      ),
+      expiresIn: 60
+    }
+  })
+
+  /**
+   * 发起 OAuth 认证
+   * mode: 'login' (登录) | 'bind' (绑定)
+   * 
+   * 安全增强：使用一次性 state token
+   * 绑定模式使用短期 bind ticket，避免在 URL 中传递登录 JWT
+   */
+  fastify.get<{
+    Params: { provider: OAuthProvider }
+    Querystring: { mode?: string; redirect?: string; bindTicket?: string }
+  }>('/authorize/:provider', async (request: FastifyRequest<{
+    Params: { provider: OAuthProvider }
+    Querystring: { mode?: string; redirect?: string; bindTicket?: string }
+  }>, reply: FastifyReply) => {
+    const { provider } = request.params
+    const { mode = 'login', redirect, bindTicket } = request.query
+
+    if (!OAUTH_PROVIDERS[provider]) {
+      return reply.code(400).send({ error: 'Unsupported OAuth provider', code: 'INVALID_PROVIDER' })
+    }
+
+    const config = await db.getOAuthConfig(provider)
+    if (!config || !config.enabled) {
+      return reply.code(400).send(apiError(ErrorCode.OAUTH_NOT_ENABLED, provider))
+    }
+
+    const providerConfig = OAUTH_PROVIDERS[provider]
+
+    // 生成安全的一次性 state token（存储到 Redis）
+    const validMode = mode === 'bind' ? 'bind' : 'login'
+
+    // 绑定模式下需要验证短期票据
+    let userId: number | undefined
+    if (validMode === 'bind') {
+      if (!bindTicket) {
+        return reply.redirect(`/profile?error=not_logged_in`)
+      }
+
+      const ticketData = consumeOAuthBindTicket(bindTicket)
+      if (!ticketData.valid || !ticketData.userId || !ticketData.issuedAt) {
+        return reply.redirect(`/profile?error=invalid_session`)
+      }
+
+      const invalidated = await isAccessTokenInvalidated(
+        ticketData.userId,
+        ticketData.issuedAt,
+        ticketData.sessionId
+      )
+      if (invalidated) {
+        return reply.redirect(`/profile?error=invalid_session`)
+      }
+
+      const bindUser = await db.findUserById(ticketData.userId)
+      if (!bindUser || bindUser.status !== 'active') {
+        return reply.redirect(`/profile?error=invalid_session`)
+      }
+
+      userId = bindUser.id
+    }
+
+    const state = await generateOAuthState(validMode, getSafeRedirectUrl(redirect, '/'), userId)
+
+    // 构建回调 URL
+    const callbackUrl = `${request.protocol}://${request.hostname}/api/oauth/callback/${provider}`
+
+    // 构建授权 URL
+    const params = new URLSearchParams({
+      client_id: config.client_id,
+      redirect_uri: callbackUrl,
+      scope: providerConfig.scope,
+      state,
+      response_type: 'code'
+    })
+
+    // Google 需要额外参数
+    if (provider === 'google') {
+      params.append('access_type', 'offline')
+      params.append('prompt', 'consent')
+    }
+
+    const authUrl = `${providerConfig.authUrl}?${params.toString()}`
+
+    return reply.redirect(authUrl)
+  })
+
+  /**
+   * OAuth 回调处理
+   * 
+   * 安全增强：验证并消费一次性 state token，防止 CSRF 和重放攻击
+   */
+  fastify.get<{
+    Params: { provider: OAuthProvider }
+    Querystring: { code?: string; state?: string; error?: string }
+  }>('/callback/:provider', async (request: FastifyRequest<{
+    Params: { provider: OAuthProvider }
+    Querystring: { code?: string; state?: string; error?: string }
+  }>, reply: FastifyReply) => {
+    const { provider } = request.params
+    const { code, state, error } = request.query
+
+    // 错误处理
+    if (error) {
+      await logSecurityEvent(SecurityEventType.LOGIN_FAILED, null, {
+        ip: request.ip,
+        action: 'oauth_callback',
+        reason: `OAuth error: ${error}`
+      })
+      return reply.redirect(`/login?error=${encodeURIComponent(error)}`)
+    }
+
+    if (!state) {
+      await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, null, {
+        ip: request.ip,
+        action: 'oauth_callback',
+        reason: 'Missing state parameter'
+      })
+      return reply.redirect(`/login?error=invalid_state`)
+    }
+
+    // 验证并消费一次性 state token
+    const stateData = await verifyAndConsumeOAuthState(state)
+    if (!stateData) {
+      await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, null, {
+        ip: request.ip,
+        action: 'oauth_callback',
+        reason: 'Invalid or expired state token'
+      })
+      return reply.redirect(`/login?error=state_expired`)
+    }
+
+    // 安全检查：验证 redirect URL 防止开放重定向漏洞
+    const redirectUrl = getSafeRedirectUrl(stateData.redirect, '/')
+    
+    // 根据 mode 确定错误跳转目标
+    const errorRedirectBase = stateData.mode === 'bind' ? '/profile' : '/login'
+
+    if (!code) {
+      return reply.redirect(`${errorRedirectBase}?error=missing_code`)
+    }
+
+    try {
+      const config = await db.getOAuthConfig(provider)
+      if (!config || !config.enabled) {
+        return reply.redirect(`${errorRedirectBase}?error=provider_disabled`)
+      }
+
+      const providerConfig = OAUTH_PROVIDERS[provider]
+      const callbackUrl = `${request.protocol}://${request.hostname}/api/oauth/callback/${provider}`
+
+      // 1. 获取 access_token
+      const tokenRes = await fetch(providerConfig.tokenUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Accept': 'application/json'
+        },
+        body: new URLSearchParams({
+          client_id: config.client_id,
+          client_secret: config.client_secret,
+          code,
+          redirect_uri: callbackUrl,
+          grant_type: 'authorization_code'
+        })
+      })
+
+      const tokenData = await tokenRes.json() as { access_token?: string; refresh_token?: string; error?: string; error_description?: string }
+
+      if (!tokenData.access_token) {
+        // 记录详细错误信息便于调试
+        fastify.log.error({ tokenData, provider }, 'OAuth token exchange failed')
+        return reply.redirect(`${errorRedirectBase}?error=token_error`)
+      }
+
+      // 2. 获取用户信息
+      const userRes = await fetch(providerConfig.userUrl, {
+        headers: {
+          'Authorization': `Bearer ${tokenData.access_token}`,
+          'Accept': 'application/json'
+        }
+      })
+
+      const userData = await userRes.json() as Record<string, unknown>
+
+      // 解析用户信息（不同提供商格式不同）
+      const oauthUser = parseOAuthUser(provider, userData)
+
+      // 3. 根据 mode 处理
+      if (stateData.mode === 'bind') {
+        // 绑定模式：从 state 中获取用户 ID
+        const userId = stateData.userId
+        if (!userId) {
+          return reply.redirect(`/profile?error=not_logged_in`)
+        }
+
+        // 检查是否已有其他用户绑定了这个 OAuth 账号
+        const existingBinding = await db.findOAuthBinding(provider, oauthUser.id)
+        if (existingBinding && existingBinding.user_id !== userId) {
+          return reply.redirect(`/profile?error=already_bound_other`)
+        }
+
+        // 检查当前用户是否已绑定该提供商
+        const hasBound = await db.hasOAuthBinding(userId, provider)
+        if (hasBound) {
+          // 更新 token
+          await db.updateOAuthBindingToken(userId, provider, tokenData.access_token, tokenData.refresh_token || null)
+        } else {
+          // 创建绑定
+          await db.createOAuthBinding(userId, {
+            provider,
+            providerUserId: oauthUser.id,
+            providerUsername: oauthUser.username,
+            providerEmail: oauthUser.email,
+            providerAvatar: oauthUser.avatar,
+            accessToken: tokenData.access_token,
+            refreshToken: tokenData.refresh_token || null
+          })
+        }
+
+        return reply.redirect(`/profile?success=bound_${provider}`)
+      } else {
+        // 登录模式：查找绑定的用户
+        const binding = await db.findOAuthBinding(provider, oauthUser.id)
+
+        if (!binding) {
+          // 没有绑定，不允许注册，提示先绑定
+          return reply.redirect(`/login?error=not_bound&provider=${provider}`)
+        }
+
+        // 查找用户
+        const user = await db.findUserById(binding.user_id)
+        if (!user) {
+          return reply.redirect(`/login?error=user_not_found`)
+        }
+
+        if (user.status !== 'active') {
+          return reply.redirect(`/login?error=account_banned`)
+        }
+
+        // 更新 OAuth token
+        await db.updateOAuthBindingToken(user.id, provider, tokenData.access_token, tokenData.refresh_token || null)
+
+        // 在创建新会话之前检测异地登录（修复时序问题）
+        const userAgent = request.headers['user-agent'] || 'OAuth Login'
+        let loginAlertInfo: { isNewIp: boolean; isNewDevice: boolean } | null = null
+        if (user.email) {
+          try {
+            loginAlertInfo = await detectNewLoginLocation(user.id, request.ip, userAgent)
+          } catch (err) {
+            console.error('[OAuth Login Alert] Detection failed:', err)
+          }
+        }
+
+        // 记录登录成功
+        await logSecurityEvent(SecurityEventType.LOGIN_SUCCESS, user.id, {
+          ip: request.ip,
+          username: user.username,
+          action: `oauth_${provider}`
+        })
+
+        // 异地登录提醒（后台执行）
+        if (user.email && loginAlertInfo && (loginAlertInfo.isNewIp || loginAlertInfo.isNewDevice)) {
+          sendLoginAlertEmail(user.email, {
+            username: user.username,
+            ip: request.ip,
+            userAgent: userAgent,
+            loginTime: new Date(),
+            isNewIp: loginAlertInfo.isNewIp,
+            isNewDevice: loginAlertInfo.isNewDevice
+          }).catch(err => {
+            console.error('[OAuth Login Alert] Failed to send:', err)
+          })
+        }
+
+        // 安全改进：登录码只传递用户标识，refreshToken 在 exchange-code 时生成
+        const loginCode = generateOAuthLoginCode({
+          userId: user.id,
+          username: user.username,
+          role: user.role
+        })
+
+        // 通过 URL 参数传递一次性登录码给前端
+        const separator = redirectUrl.includes('?') ? '&' : '?'
+        return reply.redirect(`${redirectUrl}${separator}oauth_code=${encodeURIComponent(loginCode)}`)
+      }
+    } catch (err) {
+      fastify.log.error({ err, provider }, 'OAuth callback error')
+      return reply.redirect(`${errorRedirectBase}?error=oauth_error`)
+    }
+  })
+
+  // ==================== 用户绑定管理 API ====================
+
+  /**
+   * 获取当前用户的 OAuth 绑定
+   */
+  fastify.get('/bindings', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const bindings = await db.getUserOAuthBindings(request.user.id)
+
+    return {
+      bindings: bindings.map(b => ({
+        provider: b.provider,
+        username: b.provider_username,
+        email: b.provider_email,
+        avatar: b.provider_avatar,
+        boundAt: b.created_at
+      }))
+    }
+  })
+
+  /**
+   * 解除 OAuth 绑定
+   */
+  fastify.delete<{ Params: { provider: OAuthProvider } }>('/bindings/:provider', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { provider: OAuthProvider } }>, reply: FastifyReply) => {
+    const { provider } = request.params
+
+    // 检查是否有绑定
+    const hasBound = await db.hasOAuthBinding(request.user.id, provider)
+    if (!hasBound) {
+      return reply.code(400).send({ error: 'Account not bound', code: 'OAUTH_NOT_BOUND' })
+    }
+
+    await db.deleteOAuthBinding(request.user.id, provider)
+
+    return { message: `已解除 ${provider} 绑定` }
+  })
+
+  // ==================== OAuth 登录码交换 ====================
+
+  /**
+   * 交换 OAuth 登录码获取 Access Token
+   * 安全改进：使用一次性登录码替代直接在 URL 中传递 Token
+   */
+  fastify.post<{ Body: { code: string } }>('/exchange-code', {
+    schema: {
+      body: {
+        type: 'object',
+        required: ['code'],
+        properties: {
+          code: { type: 'string', minLength: 10 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { code: string } }>, reply: FastifyReply) => {
+    const { code } = request.body
+
+    // 验证并消费一次性登录码
+    const loginData = verifyAndConsumeOAuthLoginCode(code)
+    if (!loginData) {
+      await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, null, {
+        ip: request.ip,
+        action: 'oauth_exchange_code',
+        reason: 'Invalid or expired login code'
+      })
+      return reply.code(401).send({ error: 'Invalid or expired login code', code: 'INVALID_LOGIN_CODE' })
+    }
+
+    // 安全检查：验证用户状态（防止用户在 OAuth 回调后、登录码交换前被封禁）
+    const user = await db.findUserById(loginData.userId)
+    if (!user) {
+      await logSecurityEvent(SecurityEventType.SUSPICIOUS_ACTIVITY, loginData.userId, {
+        ip: request.ip,
+        action: 'oauth_exchange_code',
+        reason: 'User not found during code exchange'
+      })
+      return reply.code(401).send({ error: 'User not found', code: 'USER_NOT_FOUND' })
+    }
+
+    if (user.status === 'banned') {
+      await logSecurityEvent(SecurityEventType.LOGIN_FAILED, loginData.userId, {
+        ip: request.ip,
+        username: loginData.username,
+        action: 'oauth_exchange_code',
+        reason: 'Account banned during code exchange'
+      })
+      // 如果有封禁原因，返回该原因
+      if (user.ban_reason) {
+        return reply.code(403).send({ error: user.ban_reason, code: 'ACCOUNT_BANNED' })
+      }
+      return reply.code(403).send({ error: 'Account banned', code: 'ACCOUNT_BANNED' })
+    }
+
+    // 安全改进：在 exchange-code 时重新生成 refreshToken，而不是从登录码传递
+    const userAgent = request.headers['user-agent'] || 'OAuth Login'
+    const refreshToken = await generateRefreshToken(user.id, user.username, user.role, request.ip, userAgent)
+
+    // 设置 Refresh Token Cookie
+    reply.setCookie('refreshToken', refreshToken, getRefreshTokenCookieOptions())
+
+    // 提取会话标识
+    const sessionId = refreshToken.substring(0, 20)
+
+    // 生成 Access Token（简化版：7天有效期）
+    const accessToken = fastify.jwt.sign({
+      id: loginData.userId,
+      username: loginData.username,
+      role: loginData.role as 'admin' | 'user',
+      sid: sessionId
+    }, { expiresIn: '7d' })
+
+    return {
+      token: accessToken,
+      user: {
+        id: loginData.userId,
+        username: loginData.username,
+        role: loginData.role
+      }
+    }
+  })
+}
+
+/**
+ * 解析不同提供商的用户信息
+ */
+function parseOAuthUser(
+  provider: OAuthProvider,
+  data: Record<string, unknown>
+): {
+  id: string
+  username: string | null
+  email: string | null
+  avatar: string | null
+} {
+  if (provider === 'github') {
+    return {
+      id: String(data.id || ''),
+      username: (data.login as string) || null,
+      email: (data.email as string) || null,
+      avatar: (data.avatar_url as string) || null
+    }
+  } else if (provider === 'google') {
+    return {
+      id: String(data.id || ''),
+      username: (data.name as string) || (typeof data.email === 'string' ? data.email.split('@')[0] : null),
+      email: (data.email as string) || null,
+      avatar: (data.picture as string) || null
+    }
+  }
+
+  return { id: String(data.id || ''), username: null, email: null, avatar: null }
+}
+
diff --git a/server/src/routes/packages.ts b/server/src/routes/packages.ts
new file mode 100644
index 0000000..e4c8b09
--- /dev/null
+++ b/server/src/routes/packages.ts
@@ -0,0 +1,2543 @@
+/**
+ * 套餐管理路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import * as packageShares from '../db/package-shares.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import type { CreatePackageRequest, UpdatePackageRequest } from '../types/api.js'
+import { removeDangerousChars, validateName, validateText } from '../lib/security.js'
+import { sendToChannel } from '../lib/notifier.js'
+import { prisma } from '../db/prisma.js'
+import { normalizeTrafficMultiplier } from '../lib/traffic-multiplier.js'
+import { calculateVipLevel, getVipBadgeStyleForLevel, getVipRules } from '../services/vip-levels.js'
+
+const KVM_UNSUPPORTED_NETWORK_MODES = new Set(['nat_ipv6_nat', 'ipv6_nat'])
+const MAX_PACKAGE_PLAN_NAME_LENGTH = 50
+const PUBLIC_PACKAGE_MAX_INSTANCES_MIN = 1
+const PUBLIC_PACKAGE_MAX_INSTANCES_MAX = 5
+const MAX_PACKAGE_PLAN_PRICE_CENTS = 99999999
+const MAX_PACKAGE_PLAN_PRICE_YUAN = (MAX_PACKAGE_PLAN_PRICE_CENTS / 100).toFixed(2)
+
+type PackagePrerequisiteRequestFields = {
+  requiredPackageId?: number | null
+}
+
+function validatePackagePlanName(value: unknown): { valid: boolean; message?: string; sanitized?: string } {
+  if (typeof value !== 'string') {
+    return { valid: false, message: '方案名称不能为空' }
+  }
+
+  const trimmed = value.trim()
+  if (trimmed.length === 0) {
+    return { valid: false, message: '方案名称不能为空' }
+  }
+  if (Array.from(trimmed).length > MAX_PACKAGE_PLAN_NAME_LENGTH) {
+    return { valid: false, message: `方案名称不能超过 ${MAX_PACKAGE_PLAN_NAME_LENGTH} 个字符` }
+  }
+  if (/[\u0000-\u001F\u007F]/.test(trimmed) || removeDangerousChars(trimmed) !== trimmed) {
+    return { valid: false, message: '方案名称包含非法字符' }
+  }
+
+  return { valid: true, sanitized: trimmed }
+}
+
+function validatePackageNetworkModeForInstanceType(
+  instanceType: string | undefined,
+  networkMode: string | undefined
+): string | null {
+  if (instanceType === 'vm' && networkMode && KVM_UNSUPPORTED_NETWORK_MODES.has(networkMode)) {
+    return 'KVM packages do not support IPv4 NAT & IPv6 NAT or IPv6 NAT network modes'
+  }
+  return null
+}
+
+function validatePublicPackageMaxInstances(value: unknown): value is number {
+  return typeof value === 'number' &&
+    Number.isInteger(value) &&
+    value >= PUBLIC_PACKAGE_MAX_INSTANCES_MIN &&
+    value <= PUBLIC_PACKAGE_MAX_INSTANCES_MAX
+}
+
+function validatePackagePlanPrice(value: unknown): string | null {
+  if (typeof value !== 'number' || !Number.isFinite(value) || !Number.isInteger(value)) {
+    return '价格必须是有效金额'
+  }
+  if (value < 0) {
+    return '价格不能为负数'
+  }
+  if (value > MAX_PACKAGE_PLAN_PRICE_CENTS) {
+    return `方案价格不能超过 ¥${MAX_PACKAGE_PLAN_PRICE_YUAN}`
+  }
+  return null
+}
+
+function normalizePublicPackageMaxInstances(value: unknown): number {
+  return validatePublicPackageMaxInstances(value) ? value : PUBLIC_PACKAGE_MAX_INSTANCES_MIN
+}
+
+function getPackagePrerequisiteFields(pkg: { requiredPackageId?: number | null; requiredPackageName?: string | null; required_package_id?: number | null; required_package_name?: string | null }) {
+  return {
+    required_package_id: pkg.requiredPackageId ?? pkg.required_package_id ?? null,
+    required_package_name: pkg.requiredPackageName ?? pkg.required_package_name ?? null
+  }
+}
+
+const PACKAGE_PREREQUISITE_ERROR_CODES = new Set([
+  'PACKAGE_PREREQUISITE_INVALID',
+  'PACKAGE_PREREQUISITE_SELF',
+  'PACKAGE_PREREQUISITE_CYCLE',
+  'PACKAGE_PREREQUISITE_SCOPE'
+])
+
+function getPackagePrerequisiteError(error: unknown): { code: string; message: string } | null {
+  const message = error instanceof Error ? error.message : String(error)
+  const separatorIndex = message.indexOf(':')
+  if (separatorIndex <= 0) return null
+
+  const code = message.slice(0, separatorIndex)
+  if (!PACKAGE_PREREQUISITE_ERROR_CODES.has(code)) return null
+
+  return {
+    code,
+    message: message.slice(separatorIndex + 1).trim() || code
+  }
+}
+
+async function shouldSyncPackageTrafficLimitsAfterUpdate(
+  packageId: number,
+  currentPackage: {
+    monthly_traffic_limit?: string | null
+    host_ids?: number[]
+    host_traffic_multipliers?: Record<string, number>
+  },
+  updates: {
+    monthlyTrafficLimit?: string | null
+    hostIds?: number[]
+    hostTrafficMultipliers?: Record<string, number | string | null>
+  }
+): Promise<boolean> {
+  if (updates.monthlyTrafficLimit !== undefined) {
+    const currentLimit = currentPackage.monthly_traffic_limit ? BigInt(currentPackage.monthly_traffic_limit) : null
+    const nextLimit = updates.monthlyTrafficLimit ? BigInt(updates.monthlyTrafficLimit) : null
+    if (currentLimit !== nextLimit) {
+      return true
+    }
+  }
+
+  if (updates.hostIds === undefined && updates.hostTrafficMultipliers === undefined) {
+    return false
+  }
+
+  const instanceHosts = await prisma.instance.findMany({
+    where: {
+      packageId,
+      status: { not: 'deleted' }
+    },
+    select: { hostId: true },
+    distinct: ['hostId']
+  })
+  if (instanceHosts.length === 0) {
+    return false
+  }
+
+  const currentHostIds = new Set(currentPackage.host_ids || [])
+  const nextHostIds = updates.hostIds !== undefined ? new Set(updates.hostIds) : currentHostIds
+  const currentMultipliers = currentPackage.host_traffic_multipliers || {}
+  const nextMultipliers = updates.hostTrafficMultipliers || {}
+
+  for (const { hostId } of instanceHosts) {
+    const explicitMultiplierUpdate = Object.prototype.hasOwnProperty.call(nextMultipliers, String(hostId))
+    if (!explicitMultiplierUpdate && (updates.hostIds === undefined || !nextHostIds.has(hostId))) {
+      continue
+    }
+
+    const currentMultiplier = currentHostIds.has(hostId)
+      ? normalizeTrafficMultiplier(currentMultipliers[String(hostId)] ?? 1)
+      : 1
+    const nextMultiplier = explicitMultiplierUpdate
+      ? normalizeTrafficMultiplier(nextMultipliers[String(hostId)])
+      : currentMultiplier
+
+    if (currentMultiplier !== nextMultiplier) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export default async function packageRoutes(fastify: FastifyInstance) {
+  // ==================== 公开 API（无需登录） ====================
+  
+  /**
+   * 公开获取套餐列表（用于门户市场页面，未登录用户可访问）
+   * 只返回已启用的公开套餐（官方直营 + 托管市场）
+   */
+  fastify.get<{ Querystring: { source?: string } }>('/public', {
+    config: { rateLimit: { max: 60, timeWindow: '1 minute' } }  // 公开接口需要限流
+  }, async (request: FastifyRequest<{ Querystring: { source?: string } }>) => {
+    const source = request.query.source || 'all'
+    const zoneOwnerIds = await packageShares.getActiveHostingZoneOwnerIds()
+    
+    // 构建查询条件
+    const where: any = {
+      active: true,        // 只返回已启用的套餐
+      globalShared: true   // 只返回公开套餐
+    }
+    
+    // 根据 source 过滤
+    if (source === 'official') {
+      where.user = { role: 'admin' }  // 管理员创建的套餐为官方直营
+    } else if (source === 'market') {
+      where.user = { role: { not: 'admin' } }  // 普通用户的套餐为托管市场
+      if (zoneOwnerIds.length > 0) {
+        where.userId = { notIn: zoneOwnerIds }
+      }
+    } else if (zoneOwnerIds.length > 0) {
+      where.userId = { notIn: zoneOwnerIds }
+    }
+    
+    const packages = await prisma.package.findMany({
+      where,
+      select: {
+        id: true,
+        userId: true,
+        name: true,
+        description: true,
+        cpuMax: true,
+        memoryMax: true,
+        diskMax: true,
+        monthlyTrafficLimit: true,
+        networkMode: true,
+        instanceType: true,
+        privileged: true,
+        nested: true,
+        // 公开套餐的额外配置
+        globalMaxInstances: true,
+        user: {
+          select: {
+            role: true
+          }
+        },
+        // 获取绑定的宿主机关系
+        packageHosts: {
+          select: {
+            hostId: true
+          }
+        }
+        // 不返回敏感字段：I/O限制、起动参数等
+      },
+      orderBy: { name: 'asc' }
+    })
+    
+    // 查询每个套餐是否有定价方案，并计算售罄状态
+    const packagesWithDetails = await Promise.all(packages.map(async (pkg) => {
+      // 获取套餐的定价方案
+      const plans = await prisma.packagePlan.findMany({
+        where: { packageId: pkg.id, isActive: true },
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          cpu: true,
+          memory: true,
+          disk: true,
+          portLimit: true,
+          snapshotLimit: true,
+          backupLimit: true,
+          siteLimit: true,
+          swapSize: true,
+          trafficLimit: true,
+          trafficLimitSpeed: true,
+          price: true,
+          billingCycle: true,
+          setupFee: true,
+          isSoldOut: true,
+          slaGuarantee: true,
+          sortOrder: true
+        },
+        orderBy: { sortOrder: 'asc' }
+      })
+      
+      const isPaid = plans.length > 0
+      const availablePlans = plans.filter(plan => !plan.isSoldOut)
+      const hostIds = pkg.packageHosts.map(ph => ph.hostId)
+      
+      // 检查是否售罄（所有绑定的宿主机资源不足）
+      let soldOut = isPaid && availablePlans.length === 0
+      if (hostIds.length > 0) {
+        const hosts = await prisma.host.findMany({
+          where: { id: { in: hostIds }, status: 'online' },
+          select: { id: true, cpuAllowanceMax: true, memoryMax: true, cpuUsed: true, memoryUsed: true }
+        })
+        
+        // 如果没有在线的宿主机，则售罄
+        if (hosts.length === 0) {
+          soldOut = true
+        } else if (!soldOut) {
+          // 检查是否所有宿主机资源都不足
+          const minCpu = isPaid ? Math.min(...availablePlans.map(plan => plan.cpu)) : 15
+          const minMemory = isPaid ? Math.min(...availablePlans.map(plan => plan.memory)) : 128
+          
+          const hasAvailable = hosts.some(h => {
+            const cpuAvailable = (h.cpuAllowanceMax || 0) - (h.cpuUsed || 0) >= minCpu
+            const memoryAvailable = (h.memoryMax || 0) - (h.memoryUsed || 0) >= minMemory
+            return cpuAvailable && memoryAvailable
+          })
+          
+          soldOut = !hasAvailable
+        }
+      } else {
+        // 没有绑定宿主机，视为售罄
+        soldOut = true
+      }
+      
+      // 判断是否为托管市场套餐
+      const sourceType = pkg.user.role === 'admin' ? 'official' : 'market'
+      
+      return {
+        id: pkg.id,
+        name: pkg.name,
+        description: pkg.description,
+        cpu_max: pkg.cpuMax,
+        memory_max: pkg.memoryMax,
+        disk_max: pkg.diskMax,
+        monthly_traffic_limit: pkg.monthlyTrafficLimit?.toString() || null,
+        network_mode: pkg.networkMode,
+        instance_type: pkg.instanceType,
+        host_ids: hostIds,
+        privileged: pkg.privileged,
+        nested: pkg.nested,
+        global_quota_multiplier: null,
+        global_max_instances: normalizePublicPackageMaxInstances(pkg.globalMaxInstances),
+        required_package_id: null,
+        required_package_name: null,
+        sourceType,
+        soldOut,
+        isPaid,
+        plans: plans.map(p => ({
+          id: p.id,
+          name: p.name,
+          description: p.description,
+          cpu: p.cpu,
+          memory: p.memory,
+          disk: p.disk,
+          portLimit: p.portLimit,
+          snapshotLimit: p.snapshotLimit,
+          backupLimit: p.backupLimit,
+          siteLimit: p.siteLimit,
+          swapSize: pkg.instanceType === 'vm' ? 0 : p.swapSize,
+          trafficLimit: p.trafficLimit?.toString() || null,
+          trafficLimitSpeed: p.trafficLimitSpeed,
+          price: p.price,
+          billingCycle: p.billingCycle,
+          setupFee: p.setupFee,
+          isSoldOut: p.isSoldOut,
+          slaGuarantee: p.slaGuarantee,
+          monthlyPrice: Number(p.price) / (p.billingCycle || 1)
+        }))
+      }
+    }))
+    
+    // 售罄的套餐排在最后
+    packagesWithDetails.sort((a, b) => {
+      if (a.soldOut === b.soldOut) return 0
+      return a.soldOut ? 1 : -1
+    })
+    
+    return {
+      packages: packagesWithDetails,
+      total: packagesWithDetails.length
+    }
+  })
+
+  /**
+   * 公开获取地区列表（用于门户市场页面）
+   */
+  fastify.get<{ Querystring: { source?: string } }>('/public/regions', {
+    config: { rateLimit: { max: 60, timeWindow: '1 minute' } }
+  }, async (request: FastifyRequest<{ Querystring: { source?: string } }>) => {
+    const source = request.query.source || 'all'
+    const zoneOwnerIds = await packageShares.getActiveHostingZoneOwnerIds()
+    
+    // 构建查询条件
+    const where: any = {
+      active: true,
+      globalShared: true
+    }
+    
+    if (source === 'official') {
+      where.user = { role: 'admin' }
+    } else if (source === 'market') {
+      where.user = { role: { not: 'admin' } }
+      if (zoneOwnerIds.length > 0) {
+        where.userId = { notIn: zoneOwnerIds }
+      }
+    } else if (zoneOwnerIds.length > 0) {
+      where.userId = { notIn: zoneOwnerIds }
+    }
+    
+    // 获取所有符合条件的套餐及其绑定的宿主机
+    const packages = await prisma.package.findMany({
+      where,
+      select: {
+        id: true,
+        packageHosts: {
+          select: {
+            hostId: true
+          }
+        }
+      }
+    })
+    
+    // 收集所有宿主机 ID
+    const allHostIds = new Set<number>()
+    packages.forEach(pkg => {
+      pkg.packageHosts.forEach(ph => allHostIds.add(ph.hostId))
+    })
+    
+    // 获取宿主机信息
+    const hosts = await prisma.host.findMany({
+      where: { id: { in: Array.from(allHostIds) }, status: 'online' },
+      select: {
+        id: true,
+        countryCode: true,
+        location: true
+      }
+    })
+    
+    // 按地区分组
+    const regionMap = new Map<string, { name: string; packageIds: Set<number>; hostIds: Set<number> }>()
+    
+    packages.forEach(pkg => {
+      pkg.packageHosts.forEach(ph => {
+        const host = hosts.find(h => h.id === ph.hostId)
+        if (host) {
+          const code = host.countryCode?.toUpperCase() || 'UNKNOWN'
+          if (!regionMap.has(code)) {
+            regionMap.set(code, {
+              name: host.location || code,
+              packageIds: new Set(),
+              hostIds: new Set()
+            })
+          }
+          const region = regionMap.get(code)!
+          region.packageIds.add(pkg.id)
+          region.hostIds.add(ph.hostId)
+        }
+      })
+    })
+    
+    // 转换为数组格式
+    const regions = Array.from(regionMap.entries()).map(([code, data]) => ({
+      code,
+      name: data.name,
+      packageIds: Array.from(data.packageIds),
+      hostCount: data.hostIds.size
+    }))
+    
+    // 按名称排序
+    regions.sort((a, b) => a.name.localeCompare(b.name, 'zh'))
+    
+    return { regions }
+  })
+
+  // ==================== 需要登录的 API ====================
+
+  // 获取套餐列表
+  // 查询参数：
+  // - all=true: 返回所有套餐（包括停用/归档的），用于套餐管理页面
+  // - source: 套餐来源过滤，可选值：official（面板直营）、zone（托管专区）、market（托管市场）、friends（好友共享）
+  // - zoneId: source=zone 时指定托管专区 ID
+  //           不传或传 all 时返回全部（保持向后兼容）
+  // - scope: 管理员专用，mine(我的) / official(自营) / hosted(托管的)
+  // - userId: 管理员专用，筛选特定用户（仅 scope=hosted 时有效）
+  fastify.get<{ Querystring: { all?: string; source?: string; zoneId?: string; scope?: string; userId?: string } }>('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Querystring: { all?: string; source?: string; zoneId?: string; scope?: string; userId?: string } }>) => {
+    const { user } = request
+    // all=true 时返回所有套餐（用于套餐管理页面），否则只返回启用的套餐（用于创建实例页面）
+    const activeOnly = request.query.all !== 'true'
+    const source = request.query.source || 'all'
+    const scope = request.query.scope
+    const filterUserId = request.query.userId
+    const isAdmin = user.role === 'admin'
+
+    // 管理员专用：scope 参数处理
+    if (isAdmin && scope) {
+      if (scope === 'mine') {
+        // 查看自己的套餐
+        const ownPackages = await db.getAllPackages(activeOnly, { userId: user.id })
+        const packageIds = ownPackages.map(p => p.id)
+        const [soldOutMap, instanceCountMap] = await Promise.all([
+          db.checkPackagesSoldOut(packageIds),
+          db.getNormalInstanceCountsByPackages(packageIds)
+        ])
+        return {
+          packages: ownPackages.map(p => ({
+            ...p,
+            sourceType: 'own',
+            isOwn: true,
+            isShared: false,
+            soldOut: soldOutMap.get(p.id) ?? false,
+            instance_count: instanceCountMap.get(p.id) ?? 0
+          })),
+          total: ownPackages.length
+        }
+      } else if (scope === 'official') {
+        // 查看自营套餐：仅显示管理员创建的套餐
+        const officialPackages = await db.getAllPackages(activeOnly, { ownerRole: 'admin' })
+        const officialPackageIds = officialPackages.map(p => p.id)
+        const [officialSoldOutMap, officialInstanceCountMap] = await Promise.all([
+          db.checkPackagesSoldOut(officialPackageIds),
+          db.getNormalInstanceCountsByPackages(officialPackageIds)
+        ])
+        return {
+          packages: officialPackages.map(p => ({
+            ...p,
+            sourceType: 'official',
+            isOwn: p.user_id === user.id,
+            isShared: false,
+            soldOut: officialSoldOutMap.get(p.id) ?? false,
+            instance_count: officialInstanceCountMap.get(p.id) ?? 0
+          })),
+          total: officialPackages.length
+        }
+      } else if (scope === 'hosted') {
+        // 查看托管套餐：仅显示普通用户的套餐
+        let queryOptions: { userId?: number; ownerRole?: 'admin' | 'user'; includeOwnerEmail: boolean } = {
+          includeOwnerEmail: true,
+          ownerRole: 'user'
+        }
+        
+        if (filterUserId) {
+          const filterUid = parseInt(filterUserId, 10)
+          if (!isNaN(filterUid) && filterUid !== user.id) {
+            queryOptions.userId = filterUid
+          }
+        }
+        
+        const hostedPackages = await db.getAllPackages(activeOnly, queryOptions)
+        const hostedPackageIds = hostedPackages.map(p => p.id)
+        const [hostedSoldOutMap, hostedInstanceCountMap] = await Promise.all([
+          db.checkPackagesSoldOut(hostedPackageIds),
+          db.getNormalInstanceCountsByPackages(hostedPackageIds)
+        ])
+        return {
+          packages: hostedPackages.map(p => ({
+            id: p.id,
+            name: p.name,
+            description: p.description,
+            cpu_max: p.cpu_max,
+            memory_max: p.memory_max,
+            disk_max: p.disk_max,
+            bandwidth_max: p.bandwidth_max,
+            network_mode: p.network_mode,
+            instance_type: p.instance_type,
+            host_ids: p.host_ids || [],
+            host_storage_pools: (p as any).host_storage_pools || {},
+            host_traffic_multipliers: (p as any).host_traffic_multipliers || {},
+            privileged: p.privileged,
+            nested: p.nested,
+            active: p.active,
+            monthly_traffic_limit: p.monthly_traffic_limit,
+            port_limit: p.port_limit,
+            snapshot_limit: p.snapshot_limit,
+            backup_limit: p.backup_limit,
+            site_limit: p.site_limit,
+            global_shared: p.global_shared,
+            allow_instance_deletion: p.allow_instance_deletion,
+            required_package_id: (p as any).required_package_id ?? null,
+            required_package_name: (p as any).required_package_name ?? null,
+            sourceType: 'hosted',
+            isOwn: false,
+            isShared: false,
+            soldOut: hostedSoldOutMap.get(p.id) ?? false,
+            instance_count: hostedInstanceCountMap.get(p.id) ?? 0,
+            // 所有者信息
+            owner: {
+              id: p.user_id,
+              username: p.owner_username,
+              email: p.owner_email,
+              avatarStyle: p.owner_avatar_style || 'bigSmile',
+              avatarBadgeId: (p as any).owner_avatar_badge_id || null
+            }
+          })),
+          total: hostedPackages.length
+        }
+      }
+    }
+    // 用于转换共享套餐为响应格式的辅助函数
+    const formatSharedPackage = async (p: any, isGlobalShared: boolean, sourceType: 'official' | 'market' | 'friends' | 'zone', zone?: packageShares.HostingZoneInfo) => ({
+      id: p.id,
+      name: p.name,
+      description: p.description,
+      cpu_max: p.cpuMax,
+      memory_max: p.memoryMax,
+      disk_max: p.diskMax,
+      bandwidth_max: p.bandwidthMax,
+      network_mode: p.networkMode,
+      instance_type: p.instanceType,
+      host_ids: p.hostIds || [],
+      privileged: p.privileged,
+      nested: p.nested,
+      active: 1,
+      monthly_traffic_limit: p.monthlyTrafficLimit,
+      port_limit: p.portLimit,
+      snapshot_limit: p.snapshotLimit,
+      backup_limit: p.backupLimit,
+      site_limit: p.siteLimit,
+      // 存储 I/O 限制
+      io_limit_mode: p.ioLimitMode || p.io_limit_mode || 'throughput',
+      limits_read: p.limitsRead || p.limits_read || '100MB',
+      limits_write: p.limitsWrite || p.limits_write || '100MB',
+      limits_read_iops: p.limitsReadIops || p.limits_read_iops || 500,
+      limits_write_iops: p.limitsWriteIops || p.limits_write_iops || 500,
+      limits_ingress: '300Mbit',
+      limits_egress: '300Mbit',
+      limits_processes: 500,
+      limits_cpu_priority: 10,
+      boot_autostart: true,
+      boot_autostart_priority: 20,
+      boot_autostart_delay: 15,
+      boot_host_shutdown_timeout: 30,
+      // 实例操作权限
+      allow_instance_deletion: p.allowInstanceDeletion ?? true,
+      ...getPackagePrerequisiteFields(p),
+      // 所有者信息
+      ownerId: p.ownerId,
+      ownerUsername: p.ownerUsername,
+      isOwn: false,
+      isShared: true,
+      isGlobalShared,
+      sharedAt: p.sharedAt,
+      // 新增：套餐来源类型
+      sourceType,
+      has_required_package_instance: p.requiredPackageId
+        ? await db.userHasNormalInstanceForPackage(user.id, p.requiredPackageId)
+        : true,
+      ...(zone ? {
+        hostingZoneId: zone.id,
+        hostingZoneName: zone.name,
+        hostingZoneLogoUrl: zone.logoUrl
+      } : {})
+    })
+
+    // 根据 source 参数返回对应的套餐
+    if (source === 'official') {
+      // 面板直营：仅返回管理员创建的全局共享套餐
+      const globalPackages = await packageShares.getGlobalSharedPackages()
+      const officialIds = globalPackages.map(p => p.id)
+      const officialSoldOutMap = await db.checkPackagesSoldOut(officialIds)
+      return {
+        packages: await Promise.all(globalPackages.map(async p => ({
+          ...await formatSharedPackage(p, true, 'official'),
+          soldOut: officialSoldOutMap.get(p.id) ?? false
+        }))),
+        total: globalPackages.length
+      }
+    }
+
+    if (source === 'market') {
+      // 托管市场：仅返回用户托管的全局共享套餐
+      const zoneOwnerIds = await packageShares.getActiveHostingZoneOwnerIds()
+      const marketPackages = await packageShares.getHostedMarketPackages(user.id, {
+        excludeOwnerIds: zoneOwnerIds
+      })
+      const marketIds = marketPackages.map(p => p.id)
+      const marketSoldOutMap = await db.checkPackagesSoldOut(marketIds)
+      return {
+        packages: await Promise.all(marketPackages.map(async p => ({
+          ...await formatSharedPackage(p, true, 'market'),
+          soldOut: marketSoldOutMap.get(p.id) ?? false
+        }))),
+        total: marketPackages.length
+      }
+    }
+
+    if (source === 'zone') {
+      const zoneId = Number.parseInt(request.query.zoneId || '', 10)
+      if (!Number.isInteger(zoneId) || zoneId <= 0) {
+        return { packages: [], total: 0 }
+      }
+
+      const zone = await packageShares.getActiveHostingZoneById(zoneId, user.id)
+      if (!zone) {
+        return { packages: [], total: 0 }
+      }
+
+      const zonePackages = await packageShares.getHostedMarketPackages(user.id, {
+        ownerId: zone.ownerId
+      })
+      const zonePackageIds = zonePackages.map(p => p.id)
+      const zoneSoldOutMap = await db.checkPackagesSoldOut(zonePackageIds)
+
+      return {
+        packages: await Promise.all(zonePackages.map(async p => ({
+          ...await formatSharedPackage(p, true, 'zone', zone),
+          soldOut: zoneSoldOutMap.get(p.id) ?? false
+        }))),
+        total: zonePackages.length
+      }
+    }
+
+    if (source === 'friends') {
+      // 好友共享：仅返回好友共享的套餐
+      const friendPackages = await packageShares.getSharedToUser(user.id)
+      const friendIds = friendPackages.map(p => p.id)
+      const friendSoldOutMap = await db.checkPackagesSoldOut(friendIds)
+      return {
+        packages: await Promise.all(friendPackages.map(async p => ({
+          ...await formatSharedPackage(p, false, 'friends'),
+          soldOut: friendSoldOutMap.get(p.id) ?? false
+        }))),
+        total: friendPackages.length
+      }
+    }
+
+    // source=all 或不传：返回全部（保持向后兼容）
+    // 获取套餐：管理员查看系统所有套餐，普通用户查看自己的套餐
+    const ownPackages = await db.getAllPackages(activeOnly, {
+      userId: isAdmin ? undefined : user.id
+    })
+    const ownPackageIds = ownPackages.map(p => p.id)
+    const ownInstanceCountMap = await db.getNormalInstanceCountsByPackages(ownPackageIds)
+
+    // 获取共享给用户的套餐（好友共享）
+    const sharedPackages = await packageShares.getSharedToUser(user.id)
+
+    // 获取全局共享的套餐（官方）
+    const globalPackages = await packageShares.getGlobalSharedPackages()
+
+    // 获取托管市场套餐
+    const hostingZones = await packageShares.getHostingZonesForViewer(user.id)
+    const zoneOwnerIds = hostingZones.map(zone => zone.ownerId)
+    const marketPackages = await packageShares.getHostedMarketPackages(user.id, {
+      excludeOwnerIds: zoneOwnerIds
+    })
+
+    const zonePackagesByZone = await Promise.all(
+      hostingZones.map(async zone => ({
+        zone,
+        packages: await packageShares.getHostedMarketPackages(user.id, {
+          ownerId: zone.ownerId
+        })
+      }))
+    )
+
+    // 合并并去重，优先级：自己的 > 好友分享 > 托管专区 > 托管市场 > 官方直营
+    // 使用 Set 记录已添加的套餐 ID，避免重复
+    const addedPackageIds = new Set<number>()
+    const allPackages: any[] = []
+
+    // 1. 首先添加自己的套餐（最高优先级）
+    for (const p of ownPackages) {
+      addedPackageIds.add(p.id)
+      allPackages.push({
+        id: p.id,
+        name: p.name,
+        description: p.description,
+        cpu_max: p.cpu_max,
+        memory_max: p.memory_max,
+        disk_max: p.disk_max,
+        bandwidth_max: p.bandwidth_max,
+        network_mode: p.network_mode,
+        instance_type: p.instance_type,
+        host_ids: (p as { host_ids?: number[] }).host_ids || [],
+        host_storage_pools: (p as any).host_storage_pools || {},
+        host_traffic_multipliers: (p as any).host_traffic_multipliers || {},
+        privileged: p.privileged,
+        nested: p.nested,
+        active: p.active,
+        monthly_traffic_limit: p.monthly_traffic_limit,
+        port_limit: p.port_limit,
+        snapshot_limit: p.snapshot_limit,
+        backup_limit: p.backup_limit,
+        site_limit: p.site_limit,
+        global_shared: p.global_shared,
+        // 存储 I/O 限制
+        io_limit_mode: (p as any).io_limit_mode ?? 'throughput',
+        limits_read: p.limits_read,
+        limits_write: p.limits_write,
+        limits_read_iops: p.limits_read_iops,
+        limits_write_iops: p.limits_write_iops,
+        // 网络限制
+        limits_ingress: p.limits_ingress,
+        limits_egress: p.limits_egress,
+        // 进程与调度
+        limits_processes: p.limits_processes,
+        limits_cpu_priority: p.limits_cpu_priority,
+        // 启动配置
+        boot_autostart: p.boot_autostart,
+        boot_autostart_priority: p.boot_autostart_priority,
+        boot_autostart_delay: p.boot_autostart_delay,
+        boot_host_shutdown_timeout: p.boot_host_shutdown_timeout,
+        // 实例操作权限
+        allow_instance_deletion: (p as any).allow_instance_deletion ?? true,
+        required_package_id: (p as any).required_package_id ?? null,
+        required_package_name: (p as any).required_package_name ?? null,
+        has_required_package_instance: (p as any).required_package_id
+          ? await db.userHasNormalInstanceForPackage(user.id, (p as any).required_package_id)
+          : true,
+        // 所有者信息
+        ownerId: p.user_id,
+        ownerUsername: p.owner_username,
+        isOwn: true,
+        isShared: false,
+        sourceType: 'own',
+        instance_count: ownInstanceCountMap.get(p.id) ?? 0
+      })
+    }
+
+    // 2. 添加好友分享的套餐（跳过已有的）
+    for (const p of sharedPackages) {
+      if (addedPackageIds.has(p.id)) continue
+      addedPackageIds.add(p.id)
+      allPackages.push(await formatSharedPackage(p, false, 'friends'))
+    }
+
+    // 3. 添加托管专区套餐（跳过已有的）
+    for (const group of zonePackagesByZone) {
+      for (const p of group.packages) {
+        if (addedPackageIds.has(p.id)) continue
+        addedPackageIds.add(p.id)
+        allPackages.push(await formatSharedPackage(p, true, 'zone', group.zone))
+      }
+    }
+
+    // 4. 添加托管市场套餐（跳过已有的）
+    for (const p of marketPackages) {
+      if (addedPackageIds.has(p.id)) continue
+      addedPackageIds.add(p.id)
+      allPackages.push(await formatSharedPackage(p, true, 'market'))
+    }
+
+    // 5. 添加官方直营套餐（跳过已有的）
+    for (const p of globalPackages) {
+      if (addedPackageIds.has(p.id)) continue
+      addedPackageIds.add(p.id)
+      allPackages.push(await formatSharedPackage(p, true, 'official'))
+    }
+
+    // 6. 批量计算售罄状态
+    const packageIds = allPackages.map(p => p.id)
+    const soldOutMap = await db.checkPackagesSoldOut(packageIds)
+
+    // 7. 添加 soldOut 字段到每个套餐
+    const packagesWithSoldOut = allPackages.map(p => ({
+      ...p,
+      soldOut: soldOutMap.get(p.id) ?? false
+    }))
+
+    return {
+      packages: packagesWithSoldOut,
+      total: packagesWithSoldOut.length
+    }
+  })
+
+  // 获取当前用户可见的托管专区列表
+  fastify.get('/hosting-zones', {
+    onRequest: [fastify.authenticate]
+  }, async (request) => {
+    const zones = await packageShares.getHostingZonesForViewer(request.user.id)
+    return { zones }
+  })
+
+  // 获取套餐详情
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const pkg = await db.getPackageById(packageId)
+
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+
+    // 检查访问权限：自己的套餐、共享给自己的套餐、或者自己的实例绑定了这个套餐
+    const canAccess = await packageShares.canUserAccessPackage(user.id, packageId)
+
+    // 额外检查：用户是否有实例绑定了这个套餐（用于修改配置时查看套餐限制）
+    let hasInstanceWithPackage = false
+    if (!canAccess) {
+      const userInstances = await db.getInstancesByUserId(user.id)
+      hasInstanceWithPackage = userInstances.some(inst => inst.package_id === packageId)
+    }
+
+    // 管理员可以访问任何套餐
+    const isAdmin = user.role === 'admin'
+    if (!canAccess && !hasInstanceWithPackage && !isAdmin) {
+      // 添加调试日志，帮助排查套餐访问权限问题
+      console.warn(`[PACKAGE_ACCESS_DENIED] GET /packages/${id} - packageId=${packageId}, userId=${user.id}, username=${user.username}, pkgOwnerId=${pkg.user_id}, canAccess=${canAccess}, hasInstanceWithPackage=${hasInstanceWithPackage}, isAdmin=${isAdmin}`)
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const isOwn = pkg.user_id === user.id
+
+    // 计算剩余配额信息
+    // 安全注意：只有在用户有权限访问套餐（canAccess）时才计算配额信息
+    // 如果只是通过hasInstanceWithPackage获得访问权限，不计算配额（因为不能创建新实例）
+    let quotaInfo: {
+      maxInstances: number | null
+      remainingInstances: number | null
+      maxCpu: number | null
+      remainingCpu: number | null
+      maxMemory: number | null
+      remainingMemory: number | null
+      ownerUsername: string | null
+    } = {
+      maxInstances: null,
+      remainingInstances: null,
+      maxCpu: null,
+      remainingCpu: null,
+      maxMemory: null,
+      remainingMemory: null,
+      ownerUsername: null
+    }
+
+    // 只有在用户有权限访问套餐时才计算配额信息
+    if (canAccess) {
+      if (!isOwn) {
+        // 如果是共享套餐，计算剩余配额
+        const shareInfo = await packageShares.getPackageShareForUser(packageId, user.id)
+        if (shareInfo) {
+          const usage = await packageShares.getSharedPackageUsage(packageId, user.id)
+          
+          // 获取套餐所有者用户名
+          if (pkg.user_id) {
+            const owner = await db.findUserById(pkg.user_id)
+            quotaInfo.ownerUsername = owner?.username || null
+          }
+
+          // 实例数量配额
+          if (shareInfo.maxInstances !== null) {
+            quotaInfo.maxInstances = shareInfo.maxInstances
+            quotaInfo.remainingInstances = Math.max(0, shareInfo.maxInstances - usage.instanceCount)
+          } else {
+            quotaInfo.maxInstances = null
+            quotaInfo.remainingInstances = null // 无限制
+          }
+
+          // CPU/内存配额
+          if (shareInfo.quotaMultiplier !== null) {
+            quotaInfo.maxCpu = Math.floor(pkg.cpu_max * shareInfo.quotaMultiplier)
+            quotaInfo.remainingCpu = Math.max(0, quotaInfo.maxCpu - usage.totalCpu)
+            quotaInfo.maxMemory = Math.floor(pkg.memory_max * shareInfo.quotaMultiplier)
+            quotaInfo.remainingMemory = Math.max(0, quotaInfo.maxMemory - usage.totalMemory)
+          } else {
+            quotaInfo.maxCpu = null
+            quotaInfo.remainingCpu = null // 无限制
+            quotaInfo.maxMemory = null
+            quotaInfo.remainingMemory = null // 无限制
+          }
+        }
+      } else {
+        // 自己的套餐，获取所有者用户名
+        quotaInfo.ownerUsername = user.username
+        // 自己的套餐无限制
+        quotaInfo.maxInstances = null
+        quotaInfo.remainingInstances = null
+        quotaInfo.maxCpu = null
+        quotaInfo.remainingCpu = null
+        quotaInfo.maxMemory = null
+        quotaInfo.remainingMemory = null
+      }
+    } else if (hasInstanceWithPackage) {
+      // 用户只是有实例绑定了这个套餐，但没有访问权限（不能创建新实例）
+      // 这种情况下，不计算配额信息，但可以显示套餐所有者用户名（用于显示）
+      if (pkg.user_id) {
+        const owner = await db.findUserById(pkg.user_id)
+        quotaInfo.ownerUsername = owner?.username || null
+      }
+      // 配额信息保持为null，前端会不显示
+    }
+
+    const requiredPackageId = (pkg as any).required_package_id ?? null
+    const hasRequiredPackageInstance = requiredPackageId !== null
+      ? await db.userHasNormalInstanceForPackage(user.id, requiredPackageId)
+      : true
+
+    return {
+      package: {
+        id: pkg.id,
+        name: pkg.name,
+        description: pkg.description,
+        cpu_max: pkg.cpu_max,
+        memory_max: pkg.memory_max,
+        disk_max: pkg.disk_max,
+        bandwidth_max: pkg.bandwidth_max,
+        network_mode: pkg.network_mode,
+        instance_type: pkg.instance_type,  // 实例类型
+        host_ids: (pkg as { host_ids?: number[] }).host_ids || [],
+        host_storage_pools: isOwn || isAdmin ? ((pkg as any).host_storage_pools || {}) : undefined,
+        host_traffic_multipliers: isOwn || isAdmin ? ((pkg as any).host_traffic_multipliers || {}) : undefined,
+        privileged: isOwn ? pkg.privileged : 0,
+        nested: isOwn ? pkg.nested : 0,
+        active: pkg.active,
+        monthly_traffic_limit: pkg.monthly_traffic_limit,
+        port_limit: pkg.port_limit,
+        snapshot_limit: pkg.snapshot_limit,
+        backup_limit: pkg.backup_limit,
+        site_limit: pkg.site_limit,
+        // 存储 I/O 限制
+        io_limit_mode: (pkg as any).io_limit_mode ?? 'throughput',
+        limits_read: pkg.limits_read,
+        limits_write: pkg.limits_write,
+        limits_read_iops: pkg.limits_read_iops,
+        limits_write_iops: pkg.limits_write_iops,
+        // 网络限制
+        limits_ingress: pkg.limits_ingress,
+        limits_egress: pkg.limits_egress,
+        // 进程与调度
+        limits_processes: pkg.limits_processes,
+        limits_cpu_priority: pkg.limits_cpu_priority,
+        // 启动配置
+        boot_autostart: pkg.boot_autostart,
+        boot_autostart_priority: pkg.boot_autostart_priority,
+        boot_autostart_delay: pkg.boot_autostart_delay,
+        boot_host_shutdown_timeout: pkg.boot_host_shutdown_timeout,
+        // 全局共享配置（仅套餐所有者查看时返回）
+        global_shared: isOwn ? ((pkg as any).global_shared ?? false) : undefined,
+        global_quota_multiplier: isOwn ? null : undefined,
+        global_max_instances: isOwn
+          ? (((pkg as any).global_shared ?? false) ? normalizePublicPackageMaxInstances((pkg as any).global_max_instances) : null)
+          : undefined,
+        // 实例操作权限（所有用户都需要知道是否可以删除）
+        allow_instance_deletion: (pkg as any).allow_instance_deletion ?? true,
+        required_package_id: (pkg as any).required_package_id ?? null,
+        required_package_name: (pkg as any).required_package_name ?? null,
+        has_required_package_instance: hasRequiredPackageInstance,
+        ownerId: pkg.user_id,
+        isOwn,
+        // 剩余配额信息
+        quotaInfo
+      }
+    }
+  })
+
+  // 创建套餐（管理员或满足准入条件的用户）
+  fastify.post<{ Body: CreatePackageRequest }>('/', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'cpuMax', 'memoryMax', 'diskMax'],
+        properties: {
+          name: { type: 'string', minLength: 2 },
+          description: { type: 'string' },
+          cpuMax: { type: 'integer', minimum: 15 },
+          memoryMax: { type: 'integer', minimum: 128 },
+          diskMax: { type: 'integer', minimum: 512 },
+          bandwidthMax: { type: 'integer' },
+          networkMode: { type: 'string', enum: ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_only', 'ipv6_nat'] },
+          instanceType: { type: 'string', enum: ['container', 'vm'] },
+          hostIds: { type: 'array', items: { type: 'integer' }, minItems: 1 },
+          hostStoragePools: {
+            type: 'object',
+            additionalProperties: { type: ['string', 'null'] }
+          },
+          hostTrafficMultipliers: {
+            type: 'object',
+            additionalProperties: { type: ['number', 'string', 'null'] }
+          },
+          privileged: { type: 'boolean' },
+          nested: { type: 'boolean' },
+          active: { type: 'boolean' },
+          monthlyTrafficLimit: { type: 'string' },
+          portLimit: { type: 'integer', minimum: 1 },
+          snapshotLimit: { type: 'integer', minimum: 0 },
+          backupLimit: { type: 'integer', minimum: 0 },
+          siteLimit: { type: 'integer', minimum: 0 },
+          // 存储 I/O 限制
+          ioLimitMode: { type: 'string', enum: ['throughput', 'iops'] },
+          limitsRead: { type: 'string' },
+          limitsWrite: { type: 'string' },
+          limitsReadIops: { type: 'integer', minimum: 0 },
+          limitsWriteIops: { type: 'integer', minimum: 0 },
+          // 网络限制
+          limitsIngress: { type: 'string' },
+          limitsEgress: { type: 'string' },
+          // 进程与调度
+          limitsProcesses: { type: 'integer', minimum: 0 },
+          limitsCpuPriority: { type: 'integer', minimum: 0, maximum: 10 },
+          // 启动配置
+          bootAutostart: { type: 'boolean' },
+          bootAutostartPriority: { type: 'integer', minimum: 0, maximum: 100 },
+          bootAutostartDelay: { type: 'integer', minimum: 5, maximum: 600 },
+          bootHostShutdownTimeout: { type: 'integer', minimum: 30, maximum: 600 },
+          // 全局共享配置
+          globalShared: { type: 'boolean' },
+          globalQuotaMultiplier: { type: ['number', 'null'] },
+          globalMaxInstances: { type: ['integer', 'null'] },
+          requiredPackageId: { type: ['integer', 'null'], minimum: 1 },
+          // 实例操作权限
+          allowInstanceDeletion: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: CreatePackageRequest }>, reply: FastifyReply) => {
+    const {
+      name, description, cpuMax, memoryMax, diskMax, bandwidthMax, networkMode, instanceType, hostIds, privileged, nested, active,
+      monthlyTrafficLimit, portLimit, snapshotLimit, backupLimit, siteLimit,
+      ioLimitMode, limitsRead, limitsWrite, limitsReadIops, limitsWriteIops,
+      limitsIngress, limitsEgress, limitsProcesses, limitsCpuPriority,
+      bootAutostart, bootAutostartPriority, bootAutostartDelay, bootHostShutdownTimeout,
+      globalShared, globalMaxInstances, hostStoragePools, hostTrafficMultipliers
+    } = request.body as CreatePackageRequest & PackagePrerequisiteRequestFields & { hostTrafficMultipliers?: Record<string, number | string | null> }
+    const { requiredPackageId } = request.body as PackagePrerequisiteRequestFields
+
+    // 验证必须至少绑定一个宿主机
+    if (!hostIds || hostIds.length === 0) {
+      return reply.code(400).send({ error: 'Package must bind at least one host', code: 'NO_HOSTS' })
+    }
+
+    // 验证套餐名称（防止危险字符注入）
+    const packageNetworkModeError = validatePackageNetworkModeForInstanceType(instanceType, networkMode)
+    if (packageNetworkModeError) {
+      return reply.code(400).send({ error: packageNetworkModeError, code: 'KVM_NETWORK_MODE_UNSUPPORTED' })
+    }
+
+    const nameValidation = validateName(name, 'Package name', 2, 64)
+    if (!nameValidation.valid) {
+      return reply.code(400).send({ error: nameValidation.message })
+    }
+
+    // 验证描述（如果提供）
+    if (description) {
+      const descValidation = validateText(description, 'Package description', 500)
+      if (!descValidation.valid) {
+        return reply.code(400).send({ error: descValidation.message })
+      }
+    }
+
+    // 检查名称是否已存在（同一用户下）
+    const existing = await db.getPackageByUserAndName(request.user.id, name)
+    if (existing) {
+      return reply.code(400).send({ error: 'Package name already exists', code: 'NAME_EXISTS' })
+    }
+
+    const prerequisiteValidation = await db.validatePackagePrerequisiteReferenceLocked(null, requiredPackageId, request.user.id)
+    if (!prerequisiteValidation.valid) {
+      return reply.code(400).send({ error: prerequisiteValidation.message, code: prerequisiteValidation.code })
+    }
+    if (globalShared && !validatePublicPackageMaxInstances(globalMaxInstances)) {
+      return reply.code(400).send({
+        error: '公开套餐最大实例数必须是 1-5 之间的整数',
+        code: 'INVALID_MAX_INSTANCES'
+      })
+    }
+
+    // 转换流量限额为 BigInt
+    const trafficLimit = monthlyTrafficLimit ? BigInt(monthlyTrafficLimit) : null
+
+    let id: number
+    try {
+      id = await db.createPackage({
+        userId: request.user.id,  // 所有者为当前用户
+        name,
+        description,
+        cpuMax,
+        memoryMax,
+        diskMax,
+        bandwidthMax,
+        networkMode: networkMode || 'nat',
+        instanceType: instanceType || 'container',
+        hostIds: hostIds!,
+        hostStoragePools,
+        hostTrafficMultipliers,
+        privileged,
+        nested,
+        active,
+        portLimit,
+        snapshotLimit,
+        backupLimit,
+        siteLimit,
+        monthlyTrafficLimit: trafficLimit,
+        // 存储 I/O 限制
+        ioLimitMode,
+        limitsRead,
+        limitsWrite,
+        limitsReadIops,
+        limitsWriteIops,
+        // 网络限制
+        limitsIngress,
+        limitsEgress,
+        // 进程与调度
+        limitsProcesses,
+        limitsCpuPriority,
+        // 启动配置
+        bootAutostart,
+        bootAutostartPriority,
+        bootAutostartDelay,
+        bootHostShutdownTimeout,
+        // 全局共享配置
+        globalShared,
+        globalQuotaMultiplier: null,
+        globalMaxInstances: globalShared ? globalMaxInstances : null,
+        requiredPackageId: requiredPackageId ?? null,
+        // 实例操作权限不再暴露配置入口，新套餐默认允许删除
+        allowInstanceDeletion: true
+      }, request.user.role === 'admin')  // 管理员可以绑定任何节点
+    } catch (error) {
+      const prerequisiteError = getPackagePrerequisiteError(error)
+      if (prerequisiteError) {
+        return reply.code(400).send({ error: prerequisiteError.message, code: prerequisiteError.code })
+      }
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(400).send({ error: errorMessage, code: 'INVALID_PACKAGE_CONFIG' })
+    }
+
+    // 注意：已取消配额限制，不再更新 packageUsed
+
+    await createLog(request.user.id, 'package', 'package.create', `Created package "${name}" [CPU: ${cpuMax}%, Memory: ${memoryMax}MB, Disk: ${diskMax}MB, instanceType: ${instanceType || 'container'}, network: ${request.body.networkMode || 'nat'}, hosts: ${hostIds!.join(',')}]`, 'success')
+
+    reply.code(201).send({
+      message: 'Package created',
+      package: { id, name }
+    })
+  })
+
+  // 更新套餐（管理员或套餐所有者）
+  fastify.patch<{
+    Params: { id: string }
+    Body: UpdatePackageRequest
+  }>('/:id', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          name: { type: 'string', minLength: 2 },
+          description: { type: 'string' },
+          cpuMax: { type: 'integer', minimum: 15 },
+          memoryMax: { type: 'integer', minimum: 128 },
+          diskMax: { type: 'integer', minimum: 512 },
+          bandwidthMax: { type: 'integer' },
+          networkMode: { type: 'string', enum: ['nat', 'nat_ipv6', 'nat_ipv6_nat', 'ipv6_only', 'ipv6_nat'] },
+          instanceType: { type: 'string', enum: ['container', 'vm'] },
+          hostIds: { type: 'array', items: { type: 'integer' }, minItems: 1 },
+          hostStoragePools: {
+            type: 'object',
+            additionalProperties: { type: ['string', 'null'] }
+          },
+          hostTrafficMultipliers: {
+            type: 'object',
+            additionalProperties: { type: ['number', 'string', 'null'] }
+          },
+          privileged: { type: 'boolean' },
+          nested: { type: 'boolean' },
+          active: { type: 'boolean' },
+          monthlyTrafficLimit: { type: ['string', 'null'] },
+          portLimit: { type: 'integer', minimum: 1 },
+          snapshotLimit: { type: 'integer', minimum: 0 },
+          backupLimit: { type: 'integer', minimum: 0 },
+          siteLimit: { type: 'integer', minimum: 0 },
+          // 存储 I/O 限制
+          ioLimitMode: { type: 'string', enum: ['throughput', 'iops'] },
+          limitsRead: { type: 'string' },
+          limitsWrite: { type: 'string' },
+          limitsReadIops: { type: 'integer', minimum: 0 },
+          limitsWriteIops: { type: 'integer', minimum: 0 },
+          // 网络限制
+          limitsIngress: { type: 'string' },
+          limitsEgress: { type: 'string' },
+          // 进程与调度
+          limitsProcesses: { type: 'integer', minimum: 0 },
+          limitsCpuPriority: { type: 'integer', minimum: 0, maximum: 10 },
+          // 启动配置
+          bootAutostart: { type: 'boolean' },
+          bootAutostartPriority: { type: 'integer', minimum: 0, maximum: 100 },
+          bootAutostartDelay: { type: 'integer', minimum: 5, maximum: 600 },
+          bootHostShutdownTimeout: { type: 'integer', minimum: 30, maximum: 600 },
+          // 全局共享配置
+          globalShared: { type: 'boolean' },
+          globalQuotaMultiplier: { type: ['number', 'null'] },
+          globalMaxInstances: { type: ['integer', 'null'] },
+          requiredPackageId: { type: ['integer', 'null'], minimum: 1 },
+          // 实例操作权限
+          allowInstanceDeletion: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: UpdatePackageRequest
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+
+    // 权限检查：只有管理员或套餐所有者可以更新
+    if (pkg.user_id !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证套餐名称（如果提供）
+    if (request.body.name) {
+      const nameValidation = validateName(request.body.name, 'Package name', 2, 64)
+      if (!nameValidation.valid) {
+        return reply.code(400).send({ error: nameValidation.message })
+      }
+    }
+
+    // 验证描述（如果提供）
+    if (request.body.description) {
+      const descValidation = validateText(request.body.description, 'Package description', 500)
+      if (!descValidation.valid) {
+        return reply.code(400).send({ error: descValidation.message })
+      }
+    }
+
+    // 如果更新名称，检查是否冲突（同一用户下）
+    if (request.body.name && request.body.name !== pkg.name) {
+      const existing = await db.getPackageByUserAndName(pkg.user_id!, request.body.name)
+      if (existing) {
+        return reply.code(400).send({ error: 'Package name already exists', code: 'NAME_EXISTS' })
+      }
+    }
+
+    // 处理流量限额和套餐资源限制
+    const {
+      monthlyTrafficLimit, portLimit, snapshotLimit, backupLimit, siteLimit, hostIds, hostStoragePools, hostTrafficMultipliers,
+      ioLimitMode, limitsRead, limitsWrite, limitsReadIops, limitsWriteIops,
+      limitsIngress, limitsEgress, limitsProcesses, limitsCpuPriority,
+      bootAutostart, bootAutostartPriority, bootAutostartDelay, bootHostShutdownTimeout,
+      globalShared, globalQuotaMultiplier, globalMaxInstances,
+      ...restBody
+    } = request.body as UpdatePackageRequest & PackagePrerequisiteRequestFields & { hostTrafficMultipliers?: Record<string, number | string | null> }
+    const { requiredPackageId } = request.body as PackagePrerequisiteRequestFields
+    const updateData: Parameters<typeof db.updatePackage>[1] = { ...restBody }
+    delete (updateData as any).allowInstanceDeletion
+    updateData.allowInstanceDeletion = true
+    const nextInstanceType = request.body.instanceType ?? pkg.instance_type ?? 'container'
+    const nextNetworkMode = request.body.networkMode ?? pkg.network_mode ?? 'nat'
+
+    const packageNetworkModeError = validatePackageNetworkModeForInstanceType(nextInstanceType, nextNetworkMode)
+    if (packageNetworkModeError) {
+      return reply.code(400).send({ error: packageNetworkModeError, code: 'KVM_NETWORK_MODE_UNSUPPORTED' })
+    }
+
+    // 如果提供了 hostIds，验证必须至少绑定一个宿主机
+    if (hostIds !== undefined) {
+      if (hostIds.length === 0) {
+        return reply.code(400).send({ error: 'Package must bind at least one host', code: 'NO_HOSTS' })
+      }
+      updateData.hostIds = hostIds
+    }
+    if (hostStoragePools !== undefined) updateData.hostStoragePools = hostStoragePools
+    if (hostTrafficMultipliers !== undefined) updateData.hostTrafficMultipliers = hostTrafficMultipliers
+
+    if (monthlyTrafficLimit !== undefined) {
+      updateData.monthlyTrafficLimit = monthlyTrafficLimit ? BigInt(monthlyTrafficLimit) : null
+    }
+    if (portLimit !== undefined) updateData.portLimit = portLimit
+    if (snapshotLimit !== undefined) updateData.snapshotLimit = snapshotLimit
+    if (backupLimit !== undefined) updateData.backupLimit = backupLimit
+    if (siteLimit !== undefined) updateData.siteLimit = siteLimit
+
+    // 存储 I/O 限制
+    if (ioLimitMode !== undefined) updateData.ioLimitMode = ioLimitMode
+    if (limitsRead !== undefined) updateData.limitsRead = limitsRead
+    if (limitsWrite !== undefined) updateData.limitsWrite = limitsWrite
+    if (limitsReadIops !== undefined) updateData.limitsReadIops = limitsReadIops
+    if (limitsWriteIops !== undefined) updateData.limitsWriteIops = limitsWriteIops
+
+    // 网络限制
+    if (limitsIngress !== undefined) updateData.limitsIngress = limitsIngress
+    if (limitsEgress !== undefined) updateData.limitsEgress = limitsEgress
+
+    // 进程与调度
+    if (limitsProcesses !== undefined) updateData.limitsProcesses = limitsProcesses
+    if (limitsCpuPriority !== undefined) updateData.limitsCpuPriority = limitsCpuPriority
+
+    // 启动配置
+    if (bootAutostart !== undefined) updateData.bootAutostart = bootAutostart
+    if (bootAutostartPriority !== undefined) updateData.bootAutostartPriority = bootAutostartPriority
+    if (bootAutostartDelay !== undefined) updateData.bootAutostartDelay = bootAutostartDelay
+    if (bootHostShutdownTimeout !== undefined) updateData.bootHostShutdownTimeout = bootHostShutdownTimeout
+    
+    // 验证全局共享配置的数值有效性（Fastify schema 已经验证，这里做额外检查以防万一）
+    const currentGlobalShared = (pkg as any).global_shared ?? false
+    if (globalShared !== undefined) {
+      updateData.globalShared = globalShared
+      // 如果 globalShared 被设置为 false，确保相关字段为 null
+      if (globalShared === false) {
+        updateData.globalQuotaMultiplier = null
+        updateData.globalMaxInstances = null
+      }
+    }
+    
+    // 只有在 globalShared 不为 false 时才处理这两个字段
+    // 如果 globalShared 未提供，但当前套餐是全局共享的，允许更新这两个字段
+    const willBeGlobalShared = globalShared !== undefined ? globalShared : currentGlobalShared
+    if (willBeGlobalShared !== false) {
+      updateData.globalQuotaMultiplier = null
+      const nextMaxInstances = globalMaxInstances !== undefined
+        ? globalMaxInstances
+        : normalizePublicPackageMaxInstances((pkg as any).global_max_instances)
+      if (!validatePublicPackageMaxInstances(nextMaxInstances)) {
+        return reply.code(400).send({
+          error: '公开套餐最大实例数必须是 1-5 之间的整数',
+          code: 'INVALID_MAX_INSTANCES'
+        })
+      }
+      updateData.globalMaxInstances = nextMaxInstances
+    } else if ((globalQuotaMultiplier !== undefined || globalMaxInstances !== undefined) && globalShared === undefined) {
+      // 如果当前套餐不是全局共享的，但用户试图更新这些字段，应该拒绝
+      return reply.code(400).send({ 
+        error: 'Cannot update globalQuotaMultiplier or globalMaxInstances when globalShared is false', 
+        code: 'INVALID_GLOBAL_SHARED_STATE' 
+      })
+    }
+
+    if (requiredPackageId !== undefined) {
+      const prerequisiteValidation = await db.validatePackagePrerequisiteReferenceLocked(packageId, requiredPackageId, pkg.user_id!)
+      if (!prerequisiteValidation.valid) {
+        return reply.code(400).send({ error: prerequisiteValidation.message, code: prerequisiteValidation.code })
+      }
+      updateData.requiredPackageId = requiredPackageId
+    }
+
+    try {
+      const shouldSyncTrafficLimits = await shouldSyncPackageTrafficLimitsAfterUpdate(packageId, pkg, {
+        monthlyTrafficLimit,
+        hostIds,
+        hostTrafficMultipliers
+      })
+      await db.updatePackage(packageId, updateData, request.user.role === 'admin')  // 管理员可以绑定任何节点
+      if (shouldSyncTrafficLimits) {
+        const syncResult = await db.syncPackageTrafficLimitsToInstances(packageId)
+        if (syncResult.instanceIds.length > 0) {
+          try {
+            const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+            await reconcileTrafficStateForInstanceIds(syncResult.instanceIds)
+          } catch (err) {
+            request.log.warn(err, '套餐流量限额已同步，流量状态即时复核失败')
+          }
+        }
+      }
+    } catch (error) {
+      const prerequisiteError = getPackagePrerequisiteError(error)
+      if (prerequisiteError) {
+        return reply.code(400).send({ error: prerequisiteError.message, code: prerequisiteError.code })
+      }
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(400).send({ error: errorMessage, code: 'INVALID_PACKAGE_CONFIG' })
+    }
+
+
+    // 构建变更详情
+    const pkgChanges: string[] = []
+    if (request.body.name && request.body.name !== pkg.name) pkgChanges.push(`name -> "${request.body.name}"`)
+    if (request.body.cpuMax !== undefined) pkgChanges.push(`cpuMax -> ${request.body.cpuMax}%`)
+    if (request.body.memoryMax !== undefined) pkgChanges.push(`memoryMax -> ${request.body.memoryMax}MB`)
+    if (request.body.diskMax !== undefined) pkgChanges.push(`diskMax -> ${request.body.diskMax}MB`)
+    if (request.body.instanceType) pkgChanges.push(`instanceType -> ${request.body.instanceType}`)
+    if (request.body.active !== undefined) pkgChanges.push(`active -> ${request.body.active}`)
+    if (hostIds !== undefined) pkgChanges.push(`hosts -> [${hostIds.join(',')}]`)
+
+    await createLog(request.user.id, 'package', 'package.update', `Updated package "${pkg.name}" [${pkgChanges.length > 0 ? pkgChanges.join(', ') : 'minor changes'}]`, 'success')
+
+    return { message: 'Package updated' }
+  })
+
+  // 删除套餐（管理员或套餐所有者）
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }  // 高危操作，更严格限制
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+
+    // 权限检查：只有管理员或套餐所有者可以删除
+    if (pkg.user_id !== request.user.id && request.user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const dependentPackages = await db.getPackagesDependingOnPackage(packageId)
+    if (dependentPackages.length > 0) {
+      return reply.code(400).send({
+        error: `Package is required by other packages: ${dependentPackages.map(p => p.name).join(', ')}`,
+        code: 'PACKAGE_PREREQUISITE_IN_USE',
+        details: `请先删除后置套餐：${dependentPackages.map(p => p.name).join('、')}`
+      })
+    }
+
+    // 检查是否有实例使用此套餐
+    const instanceCount = await db.getInstanceCountByPackage(packageId)
+    if (instanceCount > 0) {
+      return reply.code(400).send(apiError(ErrorCode.PACKAGE_HAS_INSTANCES, `${instanceCount}`))
+    }
+
+    // 删除套餐会自动删除所有共享记录（级联删除）
+    await db.deletePackage(packageId)
+
+    // 更新套餐配额使用量（减少）
+    const { decrementUserQuotaUsed } = await import('../db/quota-operations.js')
+    await decrementUserQuotaUsed(request.user.id, 'package')
+
+    await createLog(request.user.id, 'package', 'package.delete', `Deleted package "${pkg.name}" [CPU: ${pkg.cpu_max}%, Memory: ${pkg.memory_max}MB]`, 'success')
+
+    return { message: 'Package deleted' }
+  })
+
+  // ==================== 套餐共享 API（已禁用 - 好友系统已移除） ====================
+
+  // 共享套餐给好友
+  fastify.post<{
+    Params: { id: string }
+    Body: { friendId: number; quotaMultiplier?: number | null; maxInstances?: number | null }
+  }>('/:id/share', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request, reply: FastifyReply) => {
+    const { id } = request.params
+    const { friendId, quotaMultiplier, maxInstances } = request.body
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取套餐并验证所有权
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证好友关系
+    const areFriends = await db.areFriends(user.id, friendId)
+    if (!areFriends) {
+      return reply.code(400).send(apiError(ErrorCode.NOT_FRIENDS))
+    }
+
+    // 检查是否已共享
+    const existingShare = await packageShares.getPackageShareForUser(packageId, friendId)
+    if (existingShare) {
+      return reply.code(400).send(apiError(ErrorCode.PACKAGE_ALREADY_SHARED))
+    }
+
+    // 创建共享
+    const shareId = await packageShares.sharePackage(packageId, user.id, friendId, quotaMultiplier, maxInstances)
+    return { success: true, shareId }
+  })
+
+  // 取消套餐共享
+  fastify.delete<{
+    Params: { id: string; userId: string }
+  }>('/:id/share/:userId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request, reply: FastifyReply) => {
+    const { id, userId } = request.params
+    const { user } = request
+    const packageId = Number(id)
+    const targetUserId = Number(userId)
+
+    if (isNaN(packageId) || isNaN(targetUserId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取套餐并验证所有权
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 取消共享
+    const success = await packageShares.unsharePackage(packageId, targetUserId)
+    return { success }
+  })
+
+  // 修改共享配额限制
+  fastify.patch<{
+    Params: { id: string; shareId: string }
+    Body: { quotaMultiplier?: number | null; maxInstances?: number | null }
+  }>('/:id/shares/:shareId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request, reply: FastifyReply) => {
+    const { id, shareId } = request.params
+    const { quotaMultiplier, maxInstances } = request.body
+    const { user } = request
+    const packageId = Number(id)
+    const shareIdNum = Number(shareId)
+
+    if (isNaN(packageId) || isNaN(shareIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取套餐并验证所有权
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 更新共享配额
+    const success = await packageShares.updateShareQuota(shareIdNum, packageId, quotaMultiplier, maxInstances)
+    if (!success) {
+      return reply.code(404).send(apiError(ErrorCode.SHARE_NOT_FOUND))
+    }
+    return { success: true }
+  })
+
+  // 获取套餐的共享列表
+  fastify.get<{ Params: { id: string } }>('/:id/shares', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request, reply: FastifyReply) => {
+    const { id } = request.params
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 获取套餐并验证所有权
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取共享列表
+    const shares = await packageShares.getPackageShares(packageId)
+    return { shares }
+  })
+
+  // 获取用户共享出去的所有套餐
+  fastify.get('/my-shares', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request) => {
+    const { user } = request
+    const shares = await packageShares.getSharedByUser(user.id)
+    return { shares }
+  })
+
+  // ==================== 资源释放功能 ====================
+
+  // 获取套餐绑定的宿主机详情（用于释放配额界面）
+  fastify.get<{ Params: { id: string } }>('/:id/hosts-detail', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const hosts = await db.getPackageHostsDetail(packageId)
+
+    return {
+      hosts,
+      packageName: pkg.name,
+      cpuMax: pkg.cpu_max,
+      memoryMax: pkg.memory_max
+    }
+  })
+
+  // 获取套餐所有者的托管信息（用于创建实例页面显示托管者详情）
+  fastify.get<{ Params: { id: string } }>('/:id/owner-info', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+
+    // 套餐必须有所有者，且必须是普通用户的托管套餐
+    if (!pkg.user_id) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '该套餐不是托管套餐'))
+    }
+
+    if (pkg.user_id !== user.id && await db.isUserBlockedFromPackage(user.id, packageId)) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const owner = await prisma.user.findUnique({
+      where: { id: pkg.user_id },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        avatarStyle: true,
+        avatarBadgeId: true,
+        createdAt: true,
+        role: true
+      }
+    })
+
+    if (!owner || !owner.email || owner.role === 'admin') {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND, '该套餐不是托管套餐'))
+    }
+
+    // 获取所有者详细信息
+    const [hostCount, instanceCount, totalHostingIncome] = await Promise.all([
+      // 该用户持有的托管节点数
+      prisma.host.count({
+        where: { userId: pkg.user_id }
+      }),
+      // 该用户托管节点的总实例数（不含已删除）
+      prisma.instance.count({
+        where: {
+          host: { userId: pkg.user_id },
+          status: { not: 'deleted' }
+        }
+      }),
+      // 计算历史托管总收入（用于VIP等级）
+      prisma.hostingBalanceLog.aggregate({
+        where: {
+          userId: pkg.user_id,
+          type: 'income'  // 只计算收入记录
+        },
+        _sum: { amount: true }
+      })
+    ])
+
+    // 计算注册天数
+    const registeredDays = Math.floor((Date.now() - owner.createdAt.getTime()) / (1000 * 60 * 60 * 24))
+
+    // 计算VIP等级（基于后台配置的托管 VIP 规则）
+    const totalIncome = Number(totalHostingIncome._sum.amount || 0)
+    const vipRules = await getVipRules('hosting')
+    const vipLevel = calculateVipLevel('hosting', vipRules, {
+      totalHostingIncome: totalIncome,
+      instanceCount
+    })
+    const vipBadgeStyle = getVipBadgeStyleForLevel(vipRules, 'hosting', vipLevel)
+
+    return {
+      id: owner.id,
+      username: owner.username,
+      email: owner.email,
+      avatarStyle: owner.avatarStyle,
+      avatarBadgeId: owner.avatarBadgeId,
+      hostCount,
+      instanceCount,
+      registeredDays,
+      vipLevel,
+      vipBadgeStyle
+    }
+  })
+
+
+  // 释放配额
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      hostIds: number[]
+      cpuAdd: number
+      memoryAdd: number
+      notify?: boolean
+    }
+  }>('/:id/release-quota', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } },  // 修改资源配额，严格限制
+    schema: {
+      body: {
+        type: 'object',
+        required: ['hostIds', 'cpuAdd', 'memoryAdd'],
+        properties: {
+          hostIds: { type: 'array', items: { type: 'integer' }, minItems: 1, maxItems: 100 },
+          cpuAdd: { type: 'integer', minimum: 0, maximum: 10000 },
+          memoryAdd: { type: 'integer', minimum: 0, maximum: 1048576 },
+          notify: { type: 'boolean' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      hostIds: number[]
+      cpuAdd: number
+      memoryAdd: number
+      notify?: boolean
+    }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const { hostIds, cpuAdd, memoryAdd, notify } = request.body
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证至少有一个配额大于 0
+    if (cpuAdd <= 0 && memoryAdd <= 0) {
+      return reply.code(400).send({ error: 'At least one quota must be greater than 0' })
+    }
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证所有 hostIds 都属于该套餐
+    const packageHostIds = pkg.host_ids || []
+    const invalidHosts = hostIds.filter(hid => !packageHostIds.includes(hid))
+    if (invalidHosts.length > 0) {
+      return reply.code(400).send({ error: 'Some hosts are not bound to this package' })
+    }
+
+    // 为每个宿主机增加配额
+    const results: Array<{
+      hostId: number
+      hostName: string
+      countryCode: string
+      cpuAllowanceMax: number
+      memoryMax: number
+      cpuAvailable: number
+      memoryAvailable: number
+    }> = []
+
+    for (const hostId of hostIds) {
+      const host = await db.getHostById(hostId)
+      if (!host) continue
+
+      const updated = await db.increaseHostQuota(hostId, cpuAdd, memoryAdd)
+      results.push({
+        hostId: host.id,
+        hostName: host.name,
+        countryCode: host.country_code || 'us',
+        cpuAllowanceMax: updated.cpuAllowanceMax,
+        memoryMax: updated.memoryMax,
+        cpuAvailable: updated.cpuAllowanceMax - (host.cpu_used || 0),
+        memoryAvailable: updated.memoryMax - (host.memory_used || 0)
+      })
+    }
+
+    // 记录日志
+    await createLog(
+      user.id,
+      'package',
+      'package.release_quota',
+      `Released quota for package "${pkg.name}": CPU +${cpuAdd}%, Memory +${memoryAdd}MB on ${hostIds.length} host(s)`,
+      'success'
+    )
+
+    // 发送通知（仅当 notify=true 且全局渠道存在时）
+    if (notify) {
+      const globalChannel = await prisma.notificationChannel.findFirst({
+        where: { isGlobal: true },
+        select: { id: true }
+      })
+      if (globalChannel) {
+        // 构建通知消息
+        const hostDetails = results.map(r => 
+          `• ${r.hostName.toUpperCase()}: CPU ${r.cpuAvailable}% | 内存 ${formatMemory(r.memoryAvailable)}`
+        ).join('\n')
+
+        const notifyTitle = `📦 资源释放 - ${pkg.name}`
+        // 判断套餐来源：管理员创建的套餐为 official，普通用户创建的为 market
+        const pkgOwner = await prisma.user.findUnique({ where: { id: pkg.user_id }, select: { role: true } })
+        const pkgSource = pkgOwner?.role === 'admin' ? 'official' : 'market'
+        const buyLink = process.env.SITE_URL
+          ? { label: '🛒 立即开通', url: `${process.env.SITE_URL}/instances/create?source=${pkgSource}&package=${packageId}` }
+          : undefined
+        const notifyMessage = [
+          `+${cpuAdd}% CPU / +${formatMemory(memoryAdd)} 内存`,
+          '',
+          '当前可用配额：',
+          hostDetails,
+          '',
+          `⏰ ${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })}`
+        ].join('\n')
+
+        try {
+          await sendToChannel(globalChannel.id, notifyTitle, notifyMessage, buyLink)
+        } catch {
+          // 通知发送失败不影响主流程
+        }
+      }
+    }
+
+    return {
+      message: 'Quota released successfully',
+      results
+    }
+  })
+
+  // ==================== 套餐方案管理 API ====================
+
+  // 获取套餐下的所有方案
+  fastify.get<{ Params: { id: string }; Querystring: { activeOnly?: string } }>('/:id/plans', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string }; Querystring: { activeOnly?: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const { user } = request
+    const packageId = Number(id)
+    const activeOnly = request.query.activeOnly === 'true'
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+
+    if (pkg.user_id !== user.id && user.role !== 'admin') {
+      const canAccess = await packageShares.canUserAccessPackage(user.id, packageId)
+      if (!canAccess) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+    }
+
+    const plans = await db.getPlansByPackageId(packageId, { activeOnly })
+
+    return {
+      plans: plans.map(plan => ({
+        id: plan.id,
+        name: plan.name,
+        description: plan.description,
+        cpu: plan.cpu,
+        memory: plan.memory,
+        disk: plan.disk,
+        portLimit: plan.portLimit,
+        snapshotLimit: plan.snapshotLimit,
+        backupLimit: plan.backupLimit,
+        siteLimit: plan.siteLimit,
+        swapSize: pkg.instance_type === 'vm' ? 0 : plan.swapSize,
+        trafficLimit: plan.trafficLimit.toString(),
+        trafficLimitSpeed: plan.trafficLimitSpeed,
+        price: Number(plan.price),
+        billingCycle: plan.billingCycle,
+        setupFee: Number(plan.setupFee),
+        monthlyPrice: db.calculateMonthlyPrice(plan),
+        isActive: plan.isActive,
+        isSoldOut: plan.isSoldOut,
+        sortOrder: plan.sortOrder,
+        slaGuarantee: plan.slaGuarantee ? Number(plan.slaGuarantee) : null
+      }))
+    }
+  })
+
+  // 创建套餐方案
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      name: string
+      description?: string
+      cpu: number
+      memory: number
+      disk: number
+      portLimit: number
+      snapshotLimit: number
+      backupLimit: number
+      siteLimit: number
+      swapSize: number
+      trafficLimit: string // BigInt 作为字符串传输
+      trafficLimitSpeed?: string
+      price: number
+      billingCycle?: number
+      setupFee?: number
+      isActive?: boolean
+      isSoldOut?: boolean
+      sortOrder?: number
+      slaGuarantee?: number | null
+    }
+  }>('/:id/plans', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const { id } = request.params
+    const { user } = request
+    const packageId = Number(id)
+
+    if (isNaN(packageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证套餐存在且属于当前用户
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const { name, description, cpu, memory, disk, portLimit, snapshotLimit, backupLimit, siteLimit, swapSize, trafficLimit, trafficLimitSpeed, price, billingCycle, isActive, isSoldOut, sortOrder, slaGuarantee } = request.body
+    const normalizedSwapSize = pkg.instance_type === 'vm' ? 0 : swapSize
+
+    if (isActive !== undefined && typeof isActive !== 'boolean') {
+      return reply.code(400).send({ error: 'isActive 必须为布尔值' })
+    }
+    if (isSoldOut !== undefined && typeof isSoldOut !== 'boolean') {
+      return reply.code(400).send({ error: 'isSoldOut 必须为布尔值' })
+    }
+
+    // 验证方案名称：允许 emoji，但仍禁止危险字符
+    const nameValidation = validatePackagePlanName(name)
+    if (!nameValidation.valid) {
+      return reply.code(400).send({ error: nameValidation.message })
+    }
+    const planName = nameValidation.sanitized!
+
+    // 验证名称唯一性
+    const isUnique = await db.isPlanNameUnique(packageId, planName)
+    if (!isUnique) {
+      return reply.code(400).send({ error: '该套餐下已存在同名方案' })
+    }
+
+    // 验证资源配置
+    if (cpu < 15 || cpu > 10000) {
+      return reply.code(400).send({ error: 'CPU 必须在 15-10000 之间' })
+    }
+    if (memory < 128 || memory > 62144) {
+      return reply.code(400).send({ error: '内存必须在 128-62144 MB 之间' })
+    }
+    if (disk < 512 || disk > 104857600) {
+      return reply.code(400).send({ error: '磁盘必须在 512 MB - 100 TB 之间' })
+    }
+    if (normalizedSwapSize < 0 || normalizedSwapSize > 1048576) {
+      return reply.code(400).send({ error: 'SWAP 必须在 0-1048576 MB 之间' })
+    }
+    const priceError = validatePackagePlanPrice(price)
+    if (priceError) {
+      return reply.code(400).send({ error: priceError })
+    }
+
+    // 验证 SLA 保证值
+    if (slaGuarantee !== undefined && slaGuarantee !== null) {
+      if (slaGuarantee < 1 || slaGuarantee > 100) {
+        return reply.code(400).send({ error: 'SLA保证必须在 1-100 之间' })
+      }
+    }
+
+    // 用户托管节点的方案只能按月计费
+    if (user.role !== 'admin') {
+      const actualBillingCycle = billingCycle ?? 1
+      if (actualBillingCycle !== 1) {
+        return reply.code(400).send({
+          error: '用户托管节点的方案仅支持按月计费',
+          code: 'HOSTING_MONTHLY_ONLY'
+        })
+      }
+    }
+
+    try {
+      const plan = await db.createPlan({
+        packageId,
+        name: planName,
+        description,
+        cpu,
+        memory,
+        disk,
+        portLimit,
+        snapshotLimit,
+        backupLimit,
+        siteLimit,
+        swapSize: normalizedSwapSize,
+        trafficLimit: BigInt(trafficLimit),
+        trafficLimitSpeed,
+        price,
+        billingCycle,
+        setupFee: 0,  // 开通费固定为0
+        isActive,
+        isSoldOut,
+        sortOrder,
+        slaGuarantee
+      })
+
+      await createLog(
+        user.id,
+        'package',
+        'plan.create',
+        `Created plan "${planName}" for package "${pkg.name}"`,
+        'success'
+      )
+
+      return {
+        id: plan.id,
+        name: plan.name,
+        message: '方案创建成功'
+      }
+    } catch (error) {
+      return reply.code(500).send({ error: '创建方案失败' })
+    }
+  })
+
+  // 更新套餐方案
+  fastify.put<{
+    Params: { id: string; planId: string }
+    Body: {
+      name?: string
+      description?: string
+      cpu?: number
+      memory?: number
+      disk?: number
+      portLimit?: number
+      snapshotLimit?: number
+      backupLimit?: number
+      siteLimit?: number
+      swapSize?: number
+      trafficLimit?: string
+      trafficLimitSpeed?: string
+      price?: number
+      billingCycle?: number
+      setupFee?: number
+      isActive?: boolean
+      isSoldOut?: boolean
+      sortOrder?: number
+      slaGuarantee?: number | null
+    }
+  }>('/:id/plans/:planId', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const { id, planId } = request.params
+    const { user } = request
+    const packageId = Number(id)
+    const planIdNum = Number(planId)
+
+    if (isNaN(packageId) || isNaN(planIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证套餐存在且属于当前用户
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证方案存在且属于该套餐
+    const existingPlan = await db.getPlanById(planIdNum)
+    if (!existingPlan || existingPlan.packageId !== packageId) {
+      return reply.code(404).send({ error: '方案不存在' })
+    }
+
+    const { name, description, cpu, memory, disk, portLimit, snapshotLimit, backupLimit, siteLimit, swapSize, trafficLimit, trafficLimitSpeed, price, billingCycle, isActive, isSoldOut, sortOrder, slaGuarantee } = request.body
+    const normalizedSwapSize = pkg.instance_type === 'vm' ? 0 : swapSize
+
+    if (isActive !== undefined && typeof isActive !== 'boolean') {
+      return reply.code(400).send({ error: 'isActive 必须为布尔值' })
+    }
+    if (isSoldOut !== undefined && typeof isSoldOut !== 'boolean') {
+      return reply.code(400).send({ error: 'isSoldOut 必须为布尔值' })
+    }
+
+    let planName: string | undefined
+    if (name !== undefined) {
+      const nameValidation = validatePackagePlanName(name)
+      if (!nameValidation.valid) {
+        return reply.code(400).send({ error: nameValidation.message })
+      }
+      planName = nameValidation.sanitized!
+    }
+
+    // 如果修改了名称，验证唯一性
+    if (planName !== undefined && planName !== existingPlan.name) {
+      const isUnique = await db.isPlanNameUnique(packageId, planName, planIdNum)
+      if (!isUnique) {
+        return reply.code(400).send({ error: '该套餐下已存在同名方案' })
+      }
+    }
+
+    // 验证资源配置
+    if (cpu !== undefined && (cpu < 15 || cpu > 10000)) {
+      return reply.code(400).send({ error: 'CPU 必须在 15-10000 之间' })
+    }
+    if (memory !== undefined && (memory < 128 || memory > 62144)) {
+      return reply.code(400).send({ error: '内存必须在 128-62144 MB 之间' })
+    }
+    if (disk !== undefined && (disk < 512 || disk > 104857600)) {
+      return reply.code(400).send({ error: '磁盘必须在 512 MB - 100 TB 之间' })
+    }
+    if (normalizedSwapSize !== undefined && (normalizedSwapSize < 0 || normalizedSwapSize > 1048576)) {
+      return reply.code(400).send({ error: 'SWAP 必须在 0-1048576 MB 之间' })
+    }
+    if (price !== undefined) {
+      const priceError = validatePackagePlanPrice(price)
+      if (priceError) {
+        return reply.code(400).send({ error: priceError })
+      }
+    }
+
+    // 验证 SLA 保证值
+    if (slaGuarantee !== undefined && slaGuarantee !== null) {
+      if (slaGuarantee < 1 || slaGuarantee > 100) {
+        return reply.code(400).send({ error: 'SLA保证必须在 1-100 之间' })
+      }
+    }
+
+    // 用户托管节点的方案只能按月计费
+    if (user.role !== 'admin' && billingCycle !== undefined && billingCycle !== 1) {
+      return reply.code(400).send({
+        error: '用户托管节点的方案仅支持按月计费',
+        code: 'HOSTING_MONTHLY_ONLY'
+      })
+    }
+
+    try {
+      const updateData: any = {}
+      if (planName !== undefined) updateData.name = planName
+      if (description !== undefined) updateData.description = description
+      if (cpu !== undefined) updateData.cpu = cpu
+      if (memory !== undefined) updateData.memory = memory
+      if (disk !== undefined) updateData.disk = disk
+      if (portLimit !== undefined) updateData.portLimit = portLimit
+      if (snapshotLimit !== undefined) updateData.snapshotLimit = snapshotLimit
+      if (backupLimit !== undefined) updateData.backupLimit = backupLimit
+      if (siteLimit !== undefined) updateData.siteLimit = siteLimit
+      if (pkg.instance_type === 'vm') {
+        updateData.swapSize = 0
+      } else if (normalizedSwapSize !== undefined) {
+        updateData.swapSize = normalizedSwapSize
+      }
+      if (trafficLimit !== undefined) updateData.trafficLimit = BigInt(trafficLimit)
+      if (trafficLimitSpeed !== undefined) updateData.trafficLimitSpeed = trafficLimitSpeed
+      if (price !== undefined) updateData.price = price
+      if (billingCycle !== undefined) updateData.billingCycle = billingCycle
+      // setupFee 已废弃，不再接受更新
+      if (isActive !== undefined) updateData.isActive = isActive
+      if (isSoldOut !== undefined) updateData.isSoldOut = isSoldOut
+      if (sortOrder !== undefined) updateData.sortOrder = sortOrder
+      if (slaGuarantee !== undefined) updateData.slaGuarantee = slaGuarantee
+
+      const updatedPlan = await db.updatePlan(planIdNum, updateData)
+
+      // 如果修改了配额相关字段，同步到所有关联实例
+      const quotaFields = ['portLimit', 'snapshotLimit', 'backupLimit', 'siteLimit', 'swapSize', 'trafficLimit']
+      const hasQuotaChange = quotaFields.some(f => updateData[f] !== undefined)
+      if (hasQuotaChange) {
+        const syncResult = await db.syncPlanQuotaToInstances(planIdNum, updatedPlan, existingPlan.swapSize)
+        if (syncResult.count > 0) {
+          if (syncResult.instanceIds.length > 0) {
+            try {
+              const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+              await reconcileTrafficStateForInstanceIds(syncResult.instanceIds)
+            } catch (err) {
+              request.log.warn(err, '方案配额已同步，流量状态即时复核失败')
+            }
+          }
+          await createLog(
+            user.id,
+            'package',
+            'plan.sync_quota',
+            `Synced quota to ${syncResult.count} instance(s) for plan "${updatedPlan.name}"`,
+            'success'
+          )
+        }
+      }
+
+      await createLog(
+        user.id,
+        'package',
+        'plan.update',
+        `Updated plan "${updatedPlan.name}" for package "${pkg.name}"`,
+        'success'
+      )
+
+      return {
+        id: updatedPlan.id,
+        name: updatedPlan.name,
+        message: '方案更新成功'
+      }
+    } catch (error) {
+      return reply.code(500).send({ error: '更新方案失败' })
+    }
+  })
+
+  // 删除套餐方案
+  fastify.delete<{ Params: { id: string; planId: string } }>('/:id/plans/:planId', {
+    onRequest: [fastify.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }  // 删除操作，更严格限制
+  }, async (request, reply) => {
+    const { id, planId } = request.params
+    const { user } = request
+    const packageId = Number(id)
+    const planIdNum = Number(planId)
+
+    if (isNaN(packageId) || isNaN(planIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证套餐存在且属于当前用户
+    const pkg = await db.getPackageById(packageId)
+    if (!pkg) {
+      return reply.code(404).send(apiError(ErrorCode.PACKAGE_NOT_FOUND))
+    }
+    if (pkg.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证方案存在且属于该套餐
+    const existingPlan = await db.getPlanById(planIdNum)
+    if (!existingPlan || existingPlan.packageId !== packageId) {
+      return reply.code(404).send({ error: '方案不存在' })
+    }
+
+    // 检查是否可以删除
+    const canDelete = await db.canDeletePlan(planIdNum)
+    if (!canDelete.canDelete) {
+      return reply.code(400).send({ error: canDelete.reason })
+    }
+
+    try {
+      await db.deletePlan(planIdNum)
+
+      await createLog(
+        user.id,
+        'package',
+        'plan.delete',
+        `Deleted plan "${existingPlan.name}" from package "${pkg.name}"`,
+        'success'
+      )
+
+      return { message: '方案删除成功' }
+    } catch (error) {
+      return reply.code(500).send({ error: '删除方案失败' })
+    }
+  })
+
+  // 获取可用地区列表（拥有付费方案的公开套餐所在的国家/地区）
+  fastify.get<{
+    Querystring: { source?: 'official' | 'market' | 'friends' | 'zone'; zoneId?: string }
+  }>('/regions', {
+    onRequest: [fastify.authenticate]
+  }, async (request) => {
+    const { source = 'official' } = request.query
+    const user = request.user
+    
+    // 好友共享需要特殊处理：从好友共享套餐中提取地区
+    if (source === 'friends') {
+      // 获取好友共享给当前用户的套餐
+      const friendPackages = await packageShares.getSharedToUser(user.id)
+      
+      if (friendPackages.length === 0) {
+        return { regions: [] }
+      }
+      
+      // 获取这些套餐绑定的宿主机信息
+      const hostIds = [...new Set(friendPackages.flatMap(p => p.hostIds))]
+      const hosts = await db.prisma.host.findMany({
+        where: {
+          id: { in: hostIds },
+          status: 'online'
+        },
+        select: {
+          id: true,
+          countryCode: true,
+          packageHosts: {
+            select: { packageId: true }
+          }
+        }
+      })
+      
+      // 按国家分组统计套餐数量
+      const regionPackages = new Map<string, Set<number>>()
+      const friendPackageIds = new Set(friendPackages.map(p => p.id))
+      
+      for (const host of hosts) {
+        const countryCode = (host.countryCode || 'us').toLowerCase()
+        for (const ph of host.packageHosts) {
+          // 只统计属于好友共享的套餐
+          if (!friendPackageIds.has(ph.packageId)) continue
+          
+          if (!regionPackages.has(countryCode)) {
+            regionPackages.set(countryCode, new Set())
+          }
+          regionPackages.get(countryCode)!.add(ph.packageId)
+        }
+      }
+      
+      const regions = Array.from(regionPackages.entries()).map(([code, packageIds]) => ({
+        code,
+        name: getCountryName(code),
+        packageCount: packageIds.size,
+        packageIds: Array.from(packageIds)
+      }))
+      
+      regions.sort((a, b) => b.packageCount - a.packageCount)
+      return { regions }
+    }
+    
+    // 官方/托管市场/托管专区：使用统一公开套餐逻辑
+    let whereCondition: any = {
+      active: true,
+      plans: {
+        some: {
+          isActive: true
+        }
+      }
+    }
+    
+    if (source === 'official') {
+      // 官方套餐：管理员创建的公开套餐（不再排除用户自己的，与套餐列表保持一致）
+      whereCondition.globalShared = true
+      whereCondition.user = { role: 'admin' }
+    } else if (source === 'market') {
+      // 托管市场：非管理员创建的公开套餐（不再排除用户自己的，与套餐列表保持一致）
+      const blockerIds = await db.getBlockerIdsForUser(user.id)
+      const zoneOwnerIds = await packageShares.getActiveHostingZoneOwnerIds()
+      const excludedOwnerIds = Array.from(new Set([...blockerIds, ...zoneOwnerIds]))
+      whereCondition.globalShared = true
+      whereCondition.user = { role: { not: 'admin' } }
+      if (excludedOwnerIds.length > 0) {
+        whereCondition.userId = { notIn: excludedOwnerIds }
+      }
+    } else if (source === 'zone') {
+      const zoneId = Number.parseInt(request.query.zoneId || '', 10)
+      if (!Number.isInteger(zoneId) || zoneId <= 0) {
+        return { regions: [] }
+      }
+
+      const zone = await packageShares.getActiveHostingZoneById(zoneId, user.id)
+      if (!zone) {
+        return { regions: [] }
+      }
+
+      whereCondition.globalShared = true
+      whereCondition.userId = zone.ownerId
+      whereCondition.user = { role: { not: 'admin' } }
+    }
+    
+    // 1. 获取所有有活跃方案的套餐，并包含它们绑定的宿主机信息
+    const packagesWithPlans = await db.prisma.package.findMany({
+      where: whereCondition,
+      select: {
+        id: true,
+        packageHosts: {
+          select: {
+            host: {
+              select: {
+                id: true,
+                countryCode: true,
+                status: true
+              }
+            }
+          }
+        }
+      }
+    })
+
+    // 2. 按国家分组统计套餐数量
+    const regionPackages = new Map<string, Set<number>>()  // countryCode -> packageIds
+    
+    for (const pkg of packagesWithPlans) {
+      for (const ph of pkg.packageHosts) {
+        // 只计算在线的宿主机
+        if (ph.host.status !== 'online') continue
+        
+        const countryCode = (ph.host.countryCode || 'us').toLowerCase()
+        if (!regionPackages.has(countryCode)) {
+          regionPackages.set(countryCode, new Set())
+        }
+        regionPackages.get(countryCode)!.add(pkg.id)
+      }
+    }
+
+    // 3. 构建地区列表
+    const regions = Array.from(regionPackages.entries()).map(([code, packageIds]) => ({
+      code,
+      name: getCountryName(code),
+      packageCount: packageIds.size,
+      packageIds: Array.from(packageIds)  // 返回该地区包含的套餐 ID 列表
+    }))
+
+    // 按套餐数量降序排列
+    regions.sort((a, b) => b.packageCount - a.packageCount)
+
+    return { regions }
+  })
+}
+
+const englishRegionDisplayNames =
+  typeof Intl.DisplayNames === 'function'
+    ? new Intl.DisplayNames(['en'], { type: 'region' })
+    : null
+
+const intlRegionCodePattern = /^([a-z]{2}|\d{3})$/i
+
+const specialCountryNames: Record<string, string> = {
+  pc: 'Pacific Community',
+  xx: 'Unknown'
+}
+
+// 获取国家名称
+function getCountryName(code: string): string {
+  const normalizedCode = code.toLowerCase()
+  const upperCode = normalizedCode.toUpperCase()
+
+  if (intlRegionCodePattern.test(normalizedCode)) {
+    const displayName = englishRegionDisplayNames?.of(upperCode)
+    if (displayName && displayName !== upperCode) {
+      return displayName
+    }
+  }
+
+  return specialCountryNames[normalizedCode] || upperCode
+}
+
+// 格式化内存显示
+function formatMemory(mb: number): string {
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(1)} GB`
+  }
+  return `${mb} MB`
+}
diff --git a/server/src/routes/proxy-sites.ts b/server/src/routes/proxy-sites.ts
new file mode 100644
index 0000000..577b09a
--- /dev/null
+++ b/server/src/routes/proxy-sites.ts
@@ -0,0 +1,1017 @@
+/**
+ * 反代站点管理路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as tls from 'tls'
+import * as dns from 'dns'
+import { promisify } from 'util'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { createCaddyClient } from '../lib/caddy-client.js'
+import { getDnsRecordType } from '../lib/network-address.js'
+import { requireInstanceViewPermission } from '../lib/permission.js'
+import {
+  createProxySite,
+  getProxySitesByInstanceId,
+  getProxySiteById,
+  deleteProxySite,
+  isDomainUsed,
+  isValidDomain,
+  updateProxySiteStatus,
+  updateProxySite,
+  getProxySiteCountByInstance
+  // toggleProxySiteEnabled 已合并到 updateProxySiteStatus
+} from '../db/proxy-sites.js'
+
+// DNS 解析函数
+const dnsResolve4 = promisify(dns.resolve4)
+const dnsResolve6 = promisify(dns.resolve6)
+
+export default async function proxySitesRoutes(fastify: FastifyInstance) {
+  /**
+   * 获取实例的反代站点列表
+   * GET /instances/:id/sites
+   */
+  fastify.get<{
+    Params: { id: string }
+  }>('/instances/:id/sites', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：实例所有者、宿主机所有者、管理员均可查看
+    if (!(await requireInstanceViewPermission(user, instance, reply))) {
+      return
+    }
+
+    // 检查宿主机 Caddy 是否启用
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    const sites = await getProxySitesByInstanceId(instanceId)
+
+    // 获取站点配额信息
+    const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const siteLimit = instance.site_limit ?? pkg?.site_limit ?? 10
+
+    return {
+      sites: sites.map(s => ({
+        id: s.id,
+        domain: s.domain,
+        targetPort: s.targetPort,
+        httpsEnabled: s.httpsEnabled,
+        remark: s.remark,
+        status: s.status,
+        enabled: s.enabled,
+        error: s.error,
+        createdAt: s.createdAt
+      })),
+      caddyEnabled: host.caddy_enabled || false,
+      // DNS 解析提示信息
+      dnsRecordType: (host.nat_public_ip || host.ip_address) ? getDnsRecordType(host.nat_public_ip || host.ip_address || '') : null,
+      dnsRecordValue: host.nat_public_ip || host.ip_address || null,
+      // 站点配额信息
+      siteQuota: {
+        used: sites.length,
+        limit: siteLimit
+      },
+      // 站点增删改仍保持实例所有者能力，管理员/宿主机所有者在详情页只读查看
+      canManageSites: user.role !== 'admin' && instance.user_id === user.id
+    }
+  })
+
+  /**
+   * 添加反代站点
+   * POST /instances/:id/sites
+   */
+  fastify.post<{
+    Params: { id: string }
+    Body: {
+      domain: string
+      targetPort: number
+      httpsEnabled?: boolean
+      remark?: string
+    }
+  }>('/instances/:id/sites', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['domain', 'targetPort'],
+        properties: {
+          domain: { type: 'string', minLength: 4 },
+          targetPort: { type: 'integer', minimum: 1, maximum: 65535 },
+          httpsEnabled: { type: 'boolean', default: true },
+          remark: { type: 'string', maxLength: 100 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      domain: string
+      targetPort: number
+      httpsEnabled?: boolean
+      remark?: string
+    }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const { domain, targetPort, httpsEnabled = true, remark } = request.body
+
+    if (isNaN(instanceId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 域名格式验证
+    const normalizedDomain = domain.toLowerCase().trim()
+    if (!isValidDomain(normalizedDomain)) {
+      return reply.code(400).send({ error: '域名格式无效（不支持泛域名）' })
+    }
+
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 封停状态不允许操作
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 权限检查
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // 检查 Caddy 是否启用
+    if (!host.caddy_enabled) {
+      return reply.code(400).send({ error: '请先在宿主机安装 Caddy' })
+    }
+
+    // 检查站点数量配额
+    const currentSiteCount = await getProxySiteCountByInstance(instanceId)
+    // 实例的 siteLimit 为 null 时，继承套餐的设置
+    const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+    const siteLimit = instance.site_limit ?? pkg?.site_limit ?? 10
+    
+    // siteLimit = 0 表示不限制
+    if (siteLimit !== 0 && currentSiteCount >= siteLimit) {
+      return reply.code(400).send({ 
+        error: `已达到站点数量上限 (${siteLimit})`,
+        code: 'SITE_LIMIT_EXCEEDED'
+      })
+    }
+
+    // 检查域名是否已被使用
+    if (await isDomainUsed(host.id, normalizedDomain)) {
+      return reply.code(400).send({ error: '该域名已被使用' })
+    }
+
+    // 实例需要有内网 IP
+    if (!instance.ipv4) {
+      return reply.code(400).send({ error: '实例未分配 IPv4 地址' })
+    }
+
+    // 在数据库创建记录（状态为 pending，等待 DNS 解析）
+    const site = await createProxySite({
+      instanceId,
+      hostId: host.id,
+      domain: normalizedDomain,
+      targetPort,
+      httpsEnabled,
+      remark: remark?.trim() || undefined
+    })
+
+    // 返回 DNS 解析提示，不立即发送到 Caddy
+    const dnsRecordValue = host.nat_public_ip || host.ip_address || ''
+    const dnsRecordType = dnsRecordValue ? getDnsRecordType(dnsRecordValue) : 'A'
+
+    await createLog(
+      user.id,
+      'proxy',
+      'site.create',
+      `Created proxy site "${normalizedDomain}" (pending DNS)`,
+      'success',
+      { instanceId }
+    )
+
+    return {
+      site: {
+        id: site.id,
+        domain: site.domain,
+        targetPort: site.targetPort,
+        httpsEnabled: site.httpsEnabled,
+        status: 'pending'
+      },
+      dnsHint: {
+        type: dnsRecordType,
+        host: normalizedDomain,
+        value: dnsRecordValue
+      },
+      message: '站点已创建，请配置 DNS 后点击“检测 DNS”激活'
+    }
+  })
+
+  /**
+   * 删除反代站点
+   * DELETE /instances/:id/sites/:siteId
+   */
+  fastify.delete<{
+    Params: { id: string; siteId: string }
+  }>('/instances/:id/sites/:siteId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; siteId: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const siteId = parseInt(request.params.siteId, 10)
+
+    if (isNaN(instanceId) || isNaN(siteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const site = await getProxySiteById(siteId)
+    if (!site) {
+      return reply.code(404).send({ error: '站点不存在' })
+    }
+
+    // 验证站点属于该实例
+    if (site.instanceId !== instanceId) {
+      return reply.code(400).send({ error: '站点不属于该实例' })
+    }
+
+    // 封停状态不允许操作
+    if (site.instance.status === 'suspended') {
+      if (site.instance.suspendReason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 权限检查
+    if (site.instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 从 Caddy 删除
+    try {
+      if (site.host.caddyEnabled && site.host.caddyUsername && site.host.caddyPassword) {
+        const targetHost = site.host.natPublicIp || site.host.ipAddress || ''
+        if (targetHost) {
+          const client = createCaddyClient({
+            host: targetHost,
+            port: site.host.caddyPort || 8444,
+            username: site.host.caddyUsername,
+            password: site.host.caddyPassword
+          })
+
+          await client.deleteSite(site.domain)
+        }
+      }
+    } catch (err) {
+      request.log.error(err, 'Failed to remove site from Caddy')
+      // 继续删除数据库记录
+    }
+
+    // 删除数据库记录
+    await deleteProxySite(siteId)
+
+    await createLog(
+      user.id,
+      'proxy',
+      'site.delete',
+      `Deleted proxy site "${site.domain}"`,
+      'success',
+      { instanceId }
+    )
+
+    return { message: '站点已删除' }
+  })
+
+  /**
+   * 检测 DNS 并激活站点
+   * POST /instances/:id/sites/:siteId/check-dns
+   * 
+   * 返回 DNS 检测结果，如果 DNS 正确则自动激活站点
+   */
+  fastify.post<{
+    Params: { id: string; siteId: string }
+  }>('/instances/:id/sites/:siteId/check-dns', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; siteId: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const siteId = parseInt(request.params.siteId, 10)
+
+    if (isNaN(instanceId) || isNaN(siteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const site = await getProxySiteById(siteId)
+    if (!site || site.instanceId !== instanceId) {
+      return reply.code(404).send({ error: '站点不存在' })
+    }
+
+    // 封停状态不允许操作
+    if (site.instance.status === 'suspended') {
+      if (site.instance.suspendReason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (site.instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取宿主机公网 IP
+    const expectedIp = site.host.natPublicIp || site.host.ipAddress
+    if (!expectedIp) {
+      return reply.code(400).send({ error: '宿主机未配置公网 IP' })
+    }
+
+    // 检测 DNS 解析
+    let resolvedIps: string[] = []
+    let dnsError: string | null = null
+
+    try {
+      // 尝试解析 IPv4
+      const ipv4s = await dnsResolve4(site.domain)
+      resolvedIps = resolvedIps.concat(ipv4s)
+    } catch {
+      // IPv4 解析失败
+    }
+
+    try {
+      // 尝试解析 IPv6
+      const ipv6s = await dnsResolve6(site.domain)
+      resolvedIps = resolvedIps.concat(ipv6s)
+    } catch {
+      // IPv6 解析失败
+    }
+
+    if (resolvedIps.length === 0) {
+      dnsError = 'DNS 未解析，请检查域名配置'
+      return {
+        dnsResolved: false,
+        expectedIp,
+        resolvedIps: [],
+        error: dnsError,
+        status: site.status
+      }
+    }
+
+    // 检查 IP 是否匹配
+    const ipMatches = resolvedIps.includes(expectedIp)
+    
+    if (!ipMatches) {
+      dnsError = `DNS 解析到 ${resolvedIps.join(', ')}，但期望的是 ${expectedIp}`
+      return {
+        dnsResolved: true,
+        ipMatches: false,
+        expectedIp,
+        resolvedIps,
+        error: dnsError,
+        status: site.status
+      }
+    }
+
+    // DNS 正确，如果站点还是 pending 状态，自动激活
+    if (site.status === 'pending') {
+      try {
+        if (!site.host.caddyEnabled || !site.host.caddyUsername || !site.host.caddyPassword) {
+          throw new Error('Caddy 未启用')
+        }
+
+        const instanceIp = site.instance.ipv4
+        if (!instanceIp) {
+          throw new Error('实例未分配 IP')
+        }
+
+        const client = createCaddyClient({
+          host: expectedIp,
+          port: site.host.caddyPort || 8444,
+          username: site.host.caddyUsername,
+          password: site.host.caddyPassword
+        })
+
+        // 先删除可能存在的旧配置（防止实例删除时 Caddy 删除失败导致残留）
+        try {
+          await client.deleteSite(site.domain)
+        } catch {
+          // 删除失败不影响后续操作（可能路由不存在）
+        }
+
+        await client.addSite(site.domain, instanceIp, site.targetPort, site.httpsEnabled)
+        await updateProxySiteStatus(site.id, 'active')
+
+        await createLog(
+          user.id,
+          'proxy',
+          'site.activate',
+          `Activated proxy site "${site.domain}" after DNS verification`,
+          'success',
+          { instanceId }
+        )
+
+        return {
+          dnsResolved: true,
+          ipMatches: true,
+          expectedIp,
+          resolvedIps,
+          activated: true,
+          status: 'active',
+          message: 'DNS 验证通过，站点已激活'
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        await updateProxySiteStatus(site.id, 'error', errorMessage)
+        request.log.error(err, 'Failed to activate site after DNS check')
+        
+        return {
+          dnsResolved: true,
+          ipMatches: true,
+          expectedIp,
+          resolvedIps,
+          activated: false,
+          status: 'error',
+          error: `激活失败: ${errorMessage}`
+        }
+      }
+    }
+
+    // 站点已经是 active 或 error 状态
+    return {
+      dnsResolved: true,
+      ipMatches: true,
+      expectedIp,
+      resolvedIps,
+      status: site.status,
+      message: site.status === 'active' ? '站点已激活' : '请点击刷新重试配置'
+    }
+  })
+
+  /**
+   * 刷新站点状态（重新尝试配置）
+   * POST /instances/:id/sites/:siteId/refresh
+   */
+  fastify.post<{
+    Params: { id: string; siteId: string }
+  }>('/instances/:id/sites/:siteId/refresh', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; siteId: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const siteId = parseInt(request.params.siteId, 10)
+
+    if (isNaN(instanceId) || isNaN(siteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const site = await getProxySiteById(siteId)
+    if (!site || site.instanceId !== instanceId) {
+      return reply.code(404).send({ error: '站点不存在' })
+    }
+
+    // 封停状态不允许操作
+    if (site.instance.status === 'suspended') {
+      if (site.instance.suspendReason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (site.instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 重新尝试配置
+    try {
+      // 禁用的站点不允许刷新
+      if (!site.enabled) {
+        return reply.code(400).send({ error: '站点已禁用，请先启用' })
+      }
+
+      if (!site.host.caddyEnabled || !site.host.caddyUsername || !site.host.caddyPassword) {
+        return reply.code(400).send({ error: 'Caddy 未启用' })
+      }
+
+      const targetHost = site.host.natPublicIp || site.host.ipAddress
+      if (!targetHost) {
+        return reply.code(400).send({ error: '宿主机未配置公网 IP' })
+      }
+
+      const instanceIp = site.instance.ipv4
+      if (!instanceIp) {
+        return reply.code(400).send({ error: '实例未分配 IP' })
+      }
+
+      const client = createCaddyClient({
+        host: targetHost,
+        port: site.host.caddyPort || 8444,
+        username: site.host.caddyUsername,
+        password: site.host.caddyPassword
+      })
+
+      // 先删除旧路由（避免重复添加）
+      try {
+        await client.deleteSite(site.domain)
+      } catch {
+        // 删除失败不影响后续操作（可能路由不存在）
+      }
+
+      // 重新添加路由
+      await client.addSite(site.domain, instanceIp, site.targetPort, site.httpsEnabled)
+      await updateProxySiteStatus(site.id, 'active')
+
+      await createLog(
+        user.id,
+        'proxy',
+        'site.refresh',
+        `Refreshed proxy site "${site.domain}"`,
+        'success',
+        { instanceId }
+      )
+
+      return { message: '站点配置已刷新', status: 'active' }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await updateProxySiteStatus(site.id, 'error', errorMessage)
+
+      await createLog(
+        user.id,
+        'proxy',
+        'site.refresh',
+        `Failed to refresh proxy site "${site.domain}": ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+
+      return reply.code(500).send({ error: `配置失败: ${errorMessage}` })
+    }
+  })
+
+  /**
+   * 修改站点配置
+   * PATCH /instances/:id/sites/:siteId
+   */
+  fastify.patch<{
+    Params: { id: string; siteId: string }
+    Body: {
+      targetPort?: number
+      httpsEnabled?: boolean
+      remark?: string
+    }
+  }>('/instances/:id/sites/:siteId', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          targetPort: { type: 'integer', minimum: 1, maximum: 65535 },
+          httpsEnabled: { type: 'boolean' },
+          remark: { type: 'string', maxLength: 100 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string; siteId: string }
+    Body: {
+      targetPort?: number
+      httpsEnabled?: boolean
+      remark?: string
+    }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const siteId = parseInt(request.params.siteId, 10)
+    const { targetPort, httpsEnabled, remark } = request.body
+
+    if (isNaN(instanceId) || isNaN(siteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 至少需要修改一个字段
+    if (targetPort === undefined && httpsEnabled === undefined && remark === undefined) {
+      return reply.code(400).send({ error: '请提供要修改的字段' })
+    }
+
+    const site = await getProxySiteById(siteId)
+    if (!site || site.instanceId !== instanceId) {
+      return reply.code(404).send({ error: '站点不存在' })
+    }
+
+    // 封停状态不允许操作
+    if (site.instance.status === 'suspended') {
+      if (site.instance.suspendReason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (site.instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查站点是否启用
+    if (!site.enabled) {
+      return reply.code(400).send({ error: '请先启用站点' })
+    }
+
+    // 确定最终配置
+    const newTargetPort = targetPort ?? site.targetPort
+    const newHttpsEnabled = httpsEnabled ?? site.httpsEnabled
+    const newRemark = remark !== undefined ? (remark.trim() || null) : site.remark
+
+    // 检查是否只修改了 remark（不需要更新 Caddy）
+    const onlyRemarkChanged = newTargetPort === site.targetPort && newHttpsEnabled === site.httpsEnabled && newRemark !== site.remark
+
+    if (onlyRemarkChanged) {
+      // 只修改备注，不需要更新 Caddy
+      await updateProxySite(site.id, { remark: newRemark })
+      
+      await createLog(
+        user.id,
+        'proxy',
+        'site.update',
+        `Updated proxy site "${site.domain}" remark`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: '站点备注已更新',
+        site: {
+          id: site.id,
+          domain: site.domain,
+          targetPort: site.targetPort,
+          httpsEnabled: site.httpsEnabled,
+          remark: newRemark,
+          status: site.status
+        }
+      }
+    }
+
+    // 如果配置没有变化（包括 remark），直接返回
+    if (newTargetPort === site.targetPort && newHttpsEnabled === site.httpsEnabled && newRemark === site.remark) {
+      return { message: '配置无变化', site: { id: site.id, domain: site.domain, targetPort: site.targetPort, httpsEnabled: site.httpsEnabled, remark: site.remark, status: site.status } }
+    }
+
+    // 需要更新 Caddy 配置
+    // 检查 Caddy 是否可用
+    if (!site.host.caddyEnabled || !site.host.caddyUsername || !site.host.caddyPassword) {
+      return reply.code(400).send({ error: 'Caddy 未启用' })
+    }
+
+    const targetHost = site.host.natPublicIp || site.host.ipAddress
+    if (!targetHost) {
+      return reply.code(400).send({ error: '宿主机未配置公网 IP' })
+    }
+
+    const instanceIp = site.instance.ipv4
+    if (!instanceIp) {
+      return reply.code(400).send({ error: '实例未分配 IP' })
+    }
+
+    // 确定最终配置
+    const finalTargetPort = targetPort ?? site.targetPort
+    const finalHttpsEnabled = httpsEnabled ?? site.httpsEnabled
+
+    // 如果配置没有变化，直接返回
+    if (finalTargetPort === site.targetPort && finalHttpsEnabled === site.httpsEnabled) {
+      return { message: '配置无变化', site: { id: site.id, domain: site.domain, targetPort: site.targetPort, httpsEnabled: site.httpsEnabled, remark: site.remark, status: site.status } }
+    }
+
+    try {
+      const client = createCaddyClient({
+        host: targetHost,
+        port: site.host.caddyPort || 8444,
+        username: site.host.caddyUsername,
+        password: site.host.caddyPassword
+      })
+
+      // 先删除旧路由
+      await client.deleteSite(site.domain)
+
+      // 再添加新路由
+      await client.addSite(site.domain, instanceIp, finalTargetPort, finalHttpsEnabled)
+
+      // 更新数据库
+      await updateProxySite(site.id, {
+        targetPort: finalTargetPort,
+        httpsEnabled: finalHttpsEnabled,
+        remark: newRemark,
+        status: 'active',
+        error: null
+      })
+
+      await createLog(
+        user.id,
+        'proxy',
+        'site.update',
+        `Updated proxy site "${site.domain}": port=${finalTargetPort}, https=${finalHttpsEnabled}`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: '站点配置已更新',
+        site: {
+          id: site.id,
+          domain: site.domain,
+          targetPort: finalTargetPort,
+          httpsEnabled: finalHttpsEnabled,
+          remark: newRemark,
+          status: 'active'
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await updateProxySiteStatus(site.id, 'error', errorMessage)
+      request.log.error(err, 'Failed to update site configuration')
+      return reply.code(500).send({ error: `更新失败: ${errorMessage}` })
+    }
+  })
+
+  /**
+   * 切换站点启用状态
+   * POST /instances/:id/sites/:siteId/toggle
+   */
+  fastify.post<{
+    Params: { id: string; siteId: string }
+  }>('/instances/:id/sites/:siteId/toggle', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; siteId: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const siteId = parseInt(request.params.siteId, 10)
+
+    if (isNaN(instanceId) || isNaN(siteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const site = await getProxySiteById(siteId)
+    if (!site || site.instanceId !== instanceId) {
+      return reply.code(404).send({ error: '站点不存在' })
+    }
+
+    // 封停状态不允许操作
+    if (site.instance.status === 'suspended') {
+      if (site.instance.suspendReason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    if (site.instance.userId !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查 Caddy 是否启用
+    if (!site.host.caddyEnabled || !site.host.caddyUsername || !site.host.caddyPassword) {
+      return reply.code(400).send({ error: 'Caddy 未启用' })
+    }
+
+    const targetHost = site.host.natPublicIp || site.host.ipAddress
+    if (!targetHost) {
+      return reply.code(400).send({ error: '宿主机未配置公网 IP' })
+    }
+
+    const newEnabled = !site.enabled
+
+    try {
+      const client = createCaddyClient({
+        host: targetHost,
+        port: site.host.caddyPort || 8444,
+        username: site.host.caddyUsername,
+        password: site.host.caddyPassword
+      })
+
+      if (newEnabled) {
+        // 启用站点：添加 Caddy 配置
+        const instanceIp = site.instance.ipv4
+        if (!instanceIp) {
+          return reply.code(400).send({ error: '实例未分配 IP' })
+        }
+        // 先删除可能存在的旧配置（防止残留）
+        try {
+          await client.deleteSite(site.domain)
+        } catch {
+          // 删除失败不影响后续操作
+        }
+        await client.addSite(site.domain, instanceIp, site.targetPort, site.httpsEnabled)
+        await updateProxySiteStatus(site.id, 'active', null, newEnabled)
+      } else {
+        // 禁用站点：删除 Caddy 配置
+        await client.deleteSite(site.domain)
+        await updateProxySiteStatus(site.id, 'pending', null, newEnabled)  // 设为 pending 表示未激活
+      }
+
+      // 更新数据库 enabled 状态
+      // 注：已在 updateProxySiteStatus 中一并更新，此处移除独立调用
+      // await toggleProxySiteEnabled(site.id, newEnabled)
+
+      await createLog(
+        user.id,
+        'proxy',
+        newEnabled ? 'site.enable' : 'site.disable',
+        `${newEnabled ? 'Enabled' : 'Disabled'} proxy site "${site.domain}"`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: newEnabled ? '站点已启用' : '站点已禁用',
+        enabled: newEnabled,
+        status: newEnabled ? 'active' : 'pending'
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      request.log.error(err, `Failed to ${newEnabled ? 'enable' : 'disable'} site`)
+      return reply.code(500).send({ error: `操作失败: ${errorMessage}` })
+    }
+  })
+
+  /**
+   * 检查站点证书状态
+   * GET /instances/:id/sites/:siteId/certificate
+   */
+  fastify.get<{
+    Params: { id: string; siteId: string }
+  }>('/instances/:id/sites/:siteId/certificate', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; siteId: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const instanceId = parseInt(request.params.id, 10)
+    const siteId = parseInt(request.params.siteId, 10)
+
+    if (isNaN(instanceId) || isNaN(siteId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const site = await getProxySiteById(siteId)
+    if (!site || site.instanceId !== instanceId) {
+      return reply.code(404).send({ error: '站点不存在' })
+    }
+
+    // 证书状态属于查看类信息，允许实例所有者、宿主机所有者、管理员查看
+    if (!(await requireInstanceViewPermission(user, {
+      user_id: site.instance.userId,
+      host_id: site.instance.hostId
+    }, reply))) {
+      return
+    }
+
+    // 如果未启用 HTTPS，返回特定状态
+    if (!site.httpsEnabled) {
+      return {
+        httpsEnabled: false,
+        status: 'disabled',
+        message: 'HTTPS 未启用'
+      }
+    }
+
+    // 如果站点还是 pending 状态，返回提示
+    if (site.status === 'pending') {
+      return {
+        httpsEnabled: true,
+        status: 'pending',
+        hint: '站点待激活，请先配置 DNS 并点击“检测 DNS”'
+      }
+    }
+
+    // 尝试通过 TLS 连接获取证书信息
+    try {
+      const certInfo = await new Promise<{
+        valid: boolean
+        issuer: string
+        subject: string
+        validFrom: string
+        validTo: string
+        daysRemaining: number
+      }>((resolve, reject) => {
+        const socket = tls.connect({
+          host: site.domain,
+          port: 443,
+          servername: site.domain,
+          rejectUnauthorized: false, // 允许自签名证书
+          timeout: 10000
+        }, () => {
+          const cert = socket.getPeerCertificate()
+          socket.end()
+
+          if (!cert || !cert.subject) {
+            reject(new Error('无法获取证书信息'))
+            return
+          }
+
+          const validFrom = new Date(cert.valid_from)
+          const validTo = new Date(cert.valid_to)
+          const now = new Date()
+          const daysRemaining = Math.floor((validTo.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+
+          // 检查证书是否有效
+          const isValid = now >= validFrom && now <= validTo
+
+          // 获取颁发者信息
+          const issuerParts: string[] = []
+          if (cert.issuer) {
+            if (cert.issuer.O) issuerParts.push(cert.issuer.O)
+            if (cert.issuer.CN) issuerParts.push(cert.issuer.CN)
+          }
+
+          resolve({
+            valid: isValid,
+            issuer: issuerParts.join(' - ') || 'Unknown',
+            subject: cert.subject.CN || site.domain,
+            validFrom: validFrom.toISOString(),
+            validTo: validTo.toISOString(),
+            daysRemaining
+          })
+        })
+
+        socket.on('error', (err) => {
+          reject(err)
+        })
+
+        socket.on('timeout', () => {
+          socket.destroy()
+          reject(new Error('连接超时'))
+        })
+      })
+
+      return {
+        httpsEnabled: true,
+        status: 'valid',
+        certificate: certInfo
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      
+      // 分析错误类型
+      let status = 'error'
+      let hint = ''
+      
+      if (errorMessage.includes('ENOTFOUND') || errorMessage.includes('getaddrinfo')) {
+        status = 'dns_error'
+        hint = 'DNS 未解析，请检查域名是否正确指向服务器'
+      } else if (errorMessage.includes('ECONNREFUSED')) {
+        status = 'connection_refused'
+        hint = '连接被拒绝，请检查服务器 443 端口是否开放'
+      } else if (errorMessage.includes('timeout') || errorMessage.includes('超时')) {
+        status = 'timeout'
+        hint = '连接超时，请检查网络连接'
+      } else if (errorMessage.includes('handshake') || errorMessage.includes('SSL') || errorMessage.includes('TLS')) {
+        status = 'cert_pending'
+        hint = '证书正在申请中，请稍后重试'
+      } else if (errorMessage.includes('certificate') || errorMessage.includes('self signed')) {
+        status = 'cert_pending'
+        hint = '证书正在申请中，请稍后重试'
+      } else if (errorMessage.includes('ECONNRESET')) {
+        status = 'cert_pending'
+        hint = '证书可能正在申请中，请稍后重试'
+      }
+
+      return {
+        httpsEnabled: true,
+        status,
+        error: errorMessage,
+        hint
+      }
+    }
+  })
+}
diff --git a/server/src/routes/recharge.ts b/server/src/routes/recharge.ts
new file mode 100644
index 0000000..41ff6c8
--- /dev/null
+++ b/server/src/routes/recharge.ts
@@ -0,0 +1,2192 @@
+/**
+ * 充值相关路由
+ */
+
+import { FastifyInstance } from 'fastify'
+import * as db from '../db/index.js'
+import * as crypto from 'crypto'
+import { createEpayClient, type EpayConfig, type EpayConfigV1, type EpayConfigV2, type CallbackData, type EpayVersion, type VerifyResult } from '../lib/epay.js'
+import {
+  buildHeleketConfig,
+  createHeleketClient,
+  extractHeleketStatus,
+  getHeleketInvoiceAmount,
+  getHeleketPaymentState,
+  getHeleketStatusDescription
+} from '../lib/heleket.js'
+import {
+  buildHeleketInvoicePaymentDetails,
+  extractRechargePaymentDisplayInfo,
+  getRechargePayableAmount,
+  mergeHeleketPaymentDetails,
+  mergeRechargeAmountDetails,
+  readRechargePaymentDetails
+} from '../lib/recharge-payment-details.js'
+import {
+  buildRechargeProviderConfigSnapshot,
+  resolveRechargeProviderConfigSnapshot
+} from '../lib/recharge-provider-snapshot.js'
+import { createLog } from '../db/logs.js'
+import { prisma } from '../db/prisma.js'
+import { createInboxMessage } from '../db/inbox.js'
+import { sendRechargeSuccessEmail } from '../lib/mailer.js'
+
+// 金额一致性检查容差（分）
+const AMOUNT_TOLERANCE_CENTS = 1
+const SUPPORTED_RECHARGE_PROVIDER_TYPES = new Set(['yipay', 'heleket'])
+const HELEKET_CALLBACK_IPS = ['31.133.220.8']
+
+function isRechargeProviderTypeSupported(type: string): boolean {
+  return SUPPORTED_RECHARGE_PROVIDER_TYPES.has(type)
+}
+
+function getUnsupportedProviderError(type: string): string {
+  return `支付渠道类型 ${type} 当前未实现安全的充值流程，暂不支持启用`
+}
+
+/**
+ * 检查回调是否已处理（数据库持久化防重放）
+ * 注意：tradeNo 参数应该是已经处理过的版本（通过 getTradeNoForIndex 处理）
+ */
+async function isCallbackProcessed(providerId: number, orderNo: string, tradeNo: string): Promise<boolean> {
+  try {
+    const existing = await prisma.paymentCallback.findUnique({
+      where: {
+        providerId_orderNo_tradeNo: {
+          providerId,
+          orderNo,
+          tradeNo
+        }
+      }
+    })
+    return !!existing
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 生成唯一的 tradeNo 标识（用于联合索引）
+ * 当 tradeNo 为空时，生成基于 orderNo 的唯一标识，避免空字符串导致联合索引冲突
+ */
+function getTradeNoForIndex(orderNo: string, tradeNo: string | null | undefined): string {
+  if (tradeNo && tradeNo.trim()) {
+    return tradeNo.trim()
+  }
+  // 使用 orderNo + 时间戳生成唯一标识，确保不同回调不会冲突
+  return `__NO_TRADE_NO__${orderNo}__${Date.now()}`
+}
+
+/**
+ * 记录回调已处理（数据库持久化防重放）
+ */
+async function markCallbackProcessed(providerId: number, orderNo: string, tradeNo: string | null, ip: string | null): Promise<void> {
+  try {
+    await prisma.paymentCallback.create({
+      data: {
+        providerId,
+        orderNo,
+        tradeNo: getTradeNoForIndex(orderNo, tradeNo),
+        callbackIp: ip,
+        processed: true
+      }
+    })
+  } catch {
+    // 忽略唯一索引冲突（并发情况）
+  }
+}
+
+function normalizeCallbackIp(ip: string | null | undefined): string {
+  const value = (ip || '').trim()
+  if (!value) {
+    return ''
+  }
+
+  if (value.startsWith('::ffff:')) {
+    return value.slice(7)
+  }
+
+  return value
+}
+
+function parseConfiguredCallbackIps(): string[] {
+  const configured = process.env.PAYMENT_CALLBACK_IP_WHITELIST?.trim()
+  if (!configured) {
+    return []
+  }
+
+  return configured
+    .split(',')
+    .map(ip => normalizeCallbackIp(ip))
+    .filter(Boolean)
+}
+
+function getProviderCallbackIpWhitelist(providerType: string): string[] {
+  const configured = parseConfiguredCallbackIps()
+  if (configured.length > 0) {
+    return configured
+  }
+
+  if (providerType === 'heleket') {
+    return HELEKET_CALLBACK_IPS
+  }
+
+  return []
+}
+
+/**
+ * 验证 IP 是否在白名单内
+ */
+function isIpInWhitelist(ip: string, providerType: string): boolean {
+  if (process.env.PAYMENT_CALLBACK_SKIP_IP_WHITELIST === 'true') {
+    return true
+  }
+
+  const whitelist = getProviderCallbackIpWhitelist(providerType)
+  if (whitelist.length === 0) {
+    return true
+  }
+
+  const normalizedIp = normalizeCallbackIp(ip)
+  return whitelist.includes(normalizedIp)
+}
+
+/**
+ * 根据配置构建易支付客户端配置
+ */
+function buildEpayConfig(config: Record<string, unknown>): { epayConfig: EpayConfig; valid: boolean; error?: string } {
+  const version = (config.version as EpayVersion) || 'v2'
+  
+  if (version === 'v1') {
+    // V1 版本：MD5 签名
+    const v1Config: EpayConfigV1 = {
+      version: 'v1',
+      apiurl: config.apiurl as string || '',
+      pid: config.pid as string || '',
+      key: config.key as string || ''
+    }
+    
+    if (!v1Config.apiurl || !v1Config.pid || !v1Config.key) {
+      return { epayConfig: v1Config, valid: false, error: '支付渠道配置不完整（V1版本需要接口地址、商户ID、密钥）' }
+    }
+    
+    return { epayConfig: v1Config, valid: true }
+  } else {
+    // V2 版本：RSA 签名
+    const v2Config: EpayConfigV2 = {
+      version: 'v2',
+      apiurl: config.apiurl as string || '',
+      pid: config.pid as string || '',
+      platform_public_key: config.platform_public_key as string || '',
+      merchant_private_key: config.merchant_private_key as string || ''
+    }
+    
+    if (!v2Config.apiurl || !v2Config.pid || !v2Config.platform_public_key || !v2Config.merchant_private_key) {
+      return { epayConfig: v2Config, valid: false, error: '支付渠道配置不完整（V2版本需要接口地址、商户ID、平台公钥、商户私钥）' }
+    }
+    
+    return { epayConfig: v2Config, valid: true }
+  }
+}
+
+function getProviderMethods(methods: unknown): string[] {
+  if (!Array.isArray(methods)) {
+    return []
+  }
+
+  return methods.filter((method): method is string => typeof method === 'string' && method.trim().length > 0)
+}
+
+function resolveRechargePaymentMethod(
+  providerType: string,
+  methods: string[],
+  requestedMethod?: string | null
+): string | undefined {
+  const normalizedRequested = requestedMethod?.trim()
+
+  if (providerType === 'yipay') {
+    const availableMethods = methods.length > 0 ? methods : ['alipay']
+    if (normalizedRequested && availableMethods.includes(normalizedRequested)) {
+      return normalizedRequested
+    }
+    return availableMethods[0]
+  }
+
+  if (providerType === 'heleket') {
+    return normalizedRequested || undefined
+  }
+
+  return normalizedRequested || undefined
+}
+
+function normalizePublicBaseUrl(url: string): string {
+  return url.trim().replace(/\/+$/, '')
+}
+
+function getRechargeFrontendUrl(): string {
+  const frontendUrl = process.env.FRONTEND_URL
+    ? process.env.FRONTEND_URL.split(',')[0].trim()
+    : 'http://localhost:3000'
+
+  return normalizePublicBaseUrl(frontendUrl)
+}
+
+function getRechargeCallbackBaseUrl(): string {
+  const callbackUrl = process.env.PAYMENT_CALLBACK_BASE_URL?.trim()
+  if (callbackUrl) {
+    return normalizePublicBaseUrl(callbackUrl)
+  }
+
+  return getRechargeFrontendUrl()
+}
+
+function getRechargeOrderExpiryAt(providerType: string, config: Record<string, unknown>): Date {
+  if (providerType === 'heleket') {
+    const { heleketConfig } = buildHeleketConfig(config)
+    return new Date(Date.now() + heleketConfig.lifetimeSeconds * 1000)
+  }
+
+  return new Date(Date.now() + 30 * 60 * 1000)
+}
+
+function getHeleketStatusMessage(status: string): string {
+  return getHeleketStatusDescription(status)
+}
+
+function resolveRechargeProviderConfig(
+  providerType: string,
+  currentConfig: Record<string, unknown>,
+  snapshotValue: unknown
+): { config: Record<string, unknown>; source: 'snapshot' | 'provider' } {
+  return resolveRechargeProviderConfigSnapshot(providerType, currentConfig, snapshotValue)
+}
+
+function buildRechargeRecordView(record: {
+  id?: number
+  orderNo: string
+  amount: unknown
+  actualAmount?: unknown
+  fee?: unknown
+  status: string
+  provider?: { id: number; name: string; type: string } | null
+  paymentMethod?: string | null
+  paymentDetails?: unknown
+  tradeNo?: string | null
+  failReason?: string | null
+  createdAt: Date
+  expiredAt?: Date | null
+  completedAt?: Date | null
+}) {
+  const paymentInfo = extractRechargePaymentDisplayInfo(record.paymentDetails)
+  const paymentDetails = readRechargePaymentDetails(record.paymentDetails)
+  const amount = Number(record.amount)
+  const actualAmount = record.actualAmount !== undefined && record.actualAmount !== null
+    ? Number(record.actualAmount)
+    : null
+  const fee = record.fee !== undefined && record.fee !== null ? Number(record.fee) : 0
+  const payableAmount = paymentDetails.recharge?.payableAmount !== undefined && paymentDetails.recharge.payableAmount !== null
+    ? Number(paymentDetails.recharge.payableAmount)
+    : amount
+
+  return {
+    id: record.id,
+    orderNo: record.orderNo,
+    amount,
+    payableAmount,
+    actualAmount,
+    fee,
+    status: record.status,
+    provider: record.provider ? {
+      id: record.provider.id,
+      name: record.provider.name,
+      type: record.provider.type
+    } : null,
+    paymentMethod: record.paymentMethod || null,
+    actualPaymentMethod: paymentInfo.actualPaymentMethod,
+    paymentCurrency: paymentInfo.paymentCurrency,
+    paymentNetwork: paymentInfo.paymentNetwork,
+    paymentUuid: paymentInfo.paymentUuid,
+    paymentTxid: paymentInfo.paymentTxid,
+    invoiceCurrency: paymentInfo.invoiceCurrency,
+    gatewayStatus: paymentInfo.gatewayStatus,
+    gatewayStatusDescription: paymentInfo.gatewayStatusDescription,
+    tradeNo: record.tradeNo || null,
+    failReason: record.failReason || null,
+    createdAt: record.createdAt.toISOString(),
+    expiredAt: record.expiredAt?.toISOString() || null,
+    completedAt: record.completedAt?.toISOString() || null
+  }
+}
+
+function extractRechargeOrderNoFromCallback(
+  providerType: string,
+  callbackData: Record<string, unknown>
+): string | undefined {
+  switch (providerType) {
+    case 'yipay':
+    case 'alipay_direct':
+    case 'wechat_direct':
+      return typeof callbackData.out_trade_no === 'string' ? callbackData.out_trade_no : undefined
+    case 'heleket':
+      return typeof callbackData.order_id === 'string' ? callbackData.order_id : undefined
+    case 'stripe': {
+      const data = callbackData.data as { object?: { metadata?: { orderNo?: string } } } | undefined
+      return data?.object?.metadata?.orderNo
+    }
+    default:
+      return (callbackData.orderNo || callbackData.order_no || callbackData.out_trade_no) as string | undefined
+  }
+}
+
+function buildRechargeUrls(providerId: number, orderNo: string): {
+  notifyUrl: string
+  returnUrl: string
+  successUrl: string
+} {
+  const frontendUrl = getRechargeFrontendUrl()
+  const callbackBaseUrl = getRechargeCallbackBaseUrl()
+
+  return {
+    notifyUrl: `${callbackBaseUrl}/api/recharge/callback/${providerId}`,
+    returnUrl: `${frontendUrl}/wallet`,
+    successUrl: `${frontendUrl}/wallet?recharge=success&out_trade_no=${encodeURIComponent(orderNo)}`
+  }
+}
+
+async function createRechargePayUrl(
+  provider: { id: number; type: string; methods: unknown },
+  config: Record<string, unknown>,
+  orderNo: string,
+  amount: number,
+  paymentMethod: string | undefined,
+  urls: { notifyUrl: string; returnUrl: string; successUrl: string }
+): Promise<string | null> {
+  if (provider.type === 'yipay') {
+    const { epayConfig, valid, error } = buildEpayConfig(config)
+    if (!valid) {
+      throw new Error(error || '支付渠道配置不完整')
+    }
+
+    const epay = createEpayClient(epayConfig)
+    return epay.getPayLink({
+      type: paymentMethod || 'alipay',
+      out_trade_no: orderNo,
+      name: '账户充值',
+      money: amount.toFixed(2),
+      notify_url: urls.notifyUrl,
+      return_url: urls.successUrl
+    })
+  }
+
+  if (provider.type === 'heleket') {
+    const { heleketConfig, valid, error } = buildHeleketConfig(config)
+    if (!valid) {
+      throw new Error(error || '支付渠道配置不完整')
+    }
+
+    const heleket = createHeleketClient(heleketConfig)
+    const invoice = await heleket.createInvoice({
+      amount: amount.toFixed(2),
+      currency: heleketConfig.currency || 'CNY',
+      lifetime: heleketConfig.lifetimeSeconds,
+      order_id: orderNo,
+      url_return: urls.returnUrl,
+      url_success: urls.successUrl,
+      url_callback: urls.notifyUrl
+    })
+
+    return typeof invoice.url === 'string' && invoice.url.trim() ? invoice.url : null
+  }
+
+  return null
+}
+
+function validateActiveRechargeProvider(
+  provider: { type: string; config: Record<string, unknown> }
+): { valid: boolean; error?: string } {
+  if (!isRechargeProviderTypeSupported(provider.type)) {
+    return { valid: false, error: getUnsupportedProviderError(provider.type) }
+  }
+
+  if (provider.type === 'yipay') {
+    const { valid, error } = buildEpayConfig(provider.config)
+    return { valid, error }
+  }
+
+  if (provider.type === 'heleket') {
+    const { valid, error } = buildHeleketConfig(provider.config)
+    return { valid, error }
+  }
+
+  return { valid: false, error: getUnsupportedProviderError(provider.type) }
+}
+
+function validatePaymentProviderAdminInput(
+  providerType: string,
+  config: Record<string, unknown>,
+  status: 'active' | 'disabled' | 'testing'
+): { valid: boolean; error?: string } {
+  if (providerType === 'yipay') {
+    const methodFeesValidation = validateYipayMethodFees(config)
+    if (!methodFeesValidation.valid) {
+      return methodFeesValidation
+    }
+  }
+
+  if (providerType === 'yipay') {
+    const { valid, error } = buildEpayConfig(config)
+    if (!valid) {
+      return { valid: false, error }
+    }
+  }
+
+  if (providerType === 'heleket') {
+    const { valid, error } = buildHeleketConfig(config)
+    if (!valid) {
+      return { valid: false, error }
+    }
+  }
+
+  if (status === 'active') {
+    return validateActiveRechargeProvider({ type: providerType, config })
+  }
+
+  return { valid: true }
+}
+
+function validateYipayMethodFees(config: Record<string, unknown>): { valid: boolean; error?: string } {
+  const rawMethodFees = config.methodFees
+  if (rawMethodFees === undefined || rawMethodFees === null) {
+    return { valid: true }
+  }
+
+  if (typeof rawMethodFees !== 'object' || Array.isArray(rawMethodFees)) {
+    return { valid: false, error: '支付方式手续费配置不合法' }
+  }
+
+  for (const [method, feeConfig] of Object.entries(rawMethodFees as Record<string, unknown>)) {
+    if (!method.trim()) {
+      return { valid: false, error: '支付方式手续费配置不合法' }
+    }
+
+    if (!feeConfig || typeof feeConfig !== 'object' || Array.isArray(feeConfig)) {
+      return { valid: false, error: '支付方式手续费配置不合法' }
+    }
+
+    const entry = feeConfig as Record<string, unknown>
+    const feeRate = Number(entry.feeRate ?? 0)
+    const feeFixed = Number(entry.feeFixed ?? 0)
+    if (!Number.isFinite(feeRate) || feeRate < 0 || feeRate > 1) {
+      return { valid: false, error: '支付方式手续费费率需在 0% 到 100% 之间' }
+    }
+    if (!Number.isFinite(feeFixed) || feeFixed < 0) {
+      return { valid: false, error: '支付方式固定手续费不能为负数' }
+    }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * 验证支付回调签名
+ * @param provider 支付渠道
+ * @param data 回调数据
+ * @param signature 签名
+ */
+function verifyCallbackSignature(
+  provider: { type: string; config: Record<string, unknown> },
+  data: Record<string, unknown>,
+  signature: string
+): boolean {
+  // 易支付签名验证（支持 V1 和 V2）
+  if (provider.type === 'yipay') {
+    const { epayConfig, valid } = buildEpayConfig(provider.config)
+    if (!valid) {
+      return false
+    }
+    
+    const epay = createEpayClient(epayConfig)
+    return epay.verify(data as CallbackData)
+  }
+
+  if (provider.type === 'heleket') {
+    const { heleketConfig, valid } = buildHeleketConfig(provider.config)
+    if (!valid) {
+      return false
+    }
+
+    const heleket = createHeleketClient(heleketConfig)
+    return heleket.verifyWebhookSignature(data)
+  }
+
+  const signKey = provider.config?.signKey as string
+  if (!signKey) {
+    return false
+  }
+
+  // 根据不同支付渠道实现不同的签名验证算法
+  switch (provider.type) {
+    case 'alipay_direct': {
+      return false
+    }
+    case 'wechat_direct': {
+      // 微信支付: HMAC-SHA256 签名验证
+      const sortedKeys = Object.keys(data).filter(k => k !== 'sign').sort()
+      const signStr = sortedKeys.map(k => `${k}=${data[k]}`).join('&') + `&key=${signKey}`
+      const computedSign = crypto.createHash('md5').update(signStr).digest('hex').toUpperCase()
+      return computedSign === signature.toUpperCase()
+    }
+    case 'stripe': {
+      return false
+    }
+    default: {
+      // 通用 MD5 签名验证
+      const sortedKeys = Object.keys(data).filter(k => k !== 'sign').sort()
+      const signStr = sortedKeys.map(k => `${k}=${data[k]}`).join('&') + signKey
+      const computedSign = crypto.createHash('md5').update(signStr).digest('hex')
+      return computedSign.toLowerCase() === signature.toLowerCase()
+    }
+  }
+}
+
+// ==================== 用户接口 ====================
+
+export default async function rechargeRoutes(app: FastifyInstance): Promise<void> {
+  // 获取可用支付渠道列表
+  app.get('/api/recharge/providers', {
+    onRequest: [app.authenticate]
+  }, async (request, reply) => {
+    try {
+      if (await db.getSystemConfigBoolean('free_site_mode', false)) {
+        return { providers: [] }
+      }
+
+      const providers = (await db.getActivePaymentProviders()).filter(provider => {
+        const config = typeof provider.config === 'string'
+          ? JSON.parse(provider.config)
+          : (provider.config || {}) as Record<string, unknown>
+        const validation = validateActiveRechargeProvider({ type: provider.type, config })
+        if (!validation.valid) {
+          request.log.warn({ providerId: provider.id, type: provider.type, error: validation.error }, '忽略未安全启用的支付渠道')
+        }
+        return validation.valid
+      })
+      
+      // 只返回用户需要的信息，隐藏敏感配置
+      const safeProviders = providers.map(p => ({
+        id: p.id,
+        name: p.name,
+        type: p.type,
+        methods: p.methods,
+        methodFees: db.getPaymentMethodFeeMap(p),
+        minAmount: Number(p.minAmount),
+        maxAmount: p.maxAmount ? Number(p.maxAmount) : null,
+        feeRate: Number(p.feeRate),
+        feeFixed: Number(p.feeFixed)
+      }))
+      
+      return { providers: safeProviders }
+    } catch (error) {
+      request.log.error(error, '获取支付渠道列表失败')
+      return reply.status(500).send({ error: '获取支付渠道列表失败' })
+    }
+  })
+
+  // 创建充值订单
+  app.post('/api/recharge/orders', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      if (await db.getSystemConfigBoolean('free_site_mode', false)) {
+        return reply.status(403).send({ error: '白嫖站已启用，充值功能不可用' })
+      }
+
+      const user = request.user!
+      const { providerId, amount, paymentMethod } = request.body as {
+        providerId: number
+        amount: number
+        paymentMethod?: string  // 支付方式：alipay, wxpay 等
+      }
+
+      // 参数验证
+      if (!providerId || !amount) {
+        return reply.status(400).send({ error: '参数不完整' })
+      }
+
+      if (amount <= 0 || !Number.isFinite(amount)) {
+        return reply.status(400).send({ error: '充值金额无效' })
+      }
+
+      // 规范化金额为两位小数（避免浮点数精度问题）
+      const normalizedAmount = Math.round(amount * 100) / 100
+
+      // 获取支付渠道
+      const provider = await db.getPaymentProviderById(providerId)
+      if (!provider || provider.status !== 'active') {
+        return reply.status(400).send({ error: '支付渠道不可用' })
+      }
+
+      const providerConfig = typeof provider.config === 'string'
+        ? JSON.parse(provider.config)
+        : (provider.config || {}) as Record<string, unknown>
+      const providerValidation = validateActiveRechargeProvider({ type: provider.type, config: providerConfig })
+      if (!providerValidation.valid) {
+        request.log.warn({ providerId, type: provider.type, error: providerValidation.error }, '拒绝使用未安全实现的支付渠道创建订单')
+        return reply.status(400).send({ error: providerValidation.error || '支付渠道不可用' })
+      }
+
+      // 验证金额范围
+      const validation = db.validateRechargeAmount(provider, normalizedAmount)
+      if (!validation.valid) {
+        return reply.status(400).send({ error: validation.error })
+      }
+
+      const selectedPaymentMethod = resolveRechargePaymentMethod(
+        provider.type,
+        getProviderMethods(provider.methods),
+        paymentMethod
+      )
+      const feeConfig = db.getPaymentFeeConfig(provider, selectedPaymentMethod)
+      const fee = db.calculatePaymentFee(provider, normalizedAmount, selectedPaymentMethod)
+      const payableAmount = db.calculatePayableAmount(provider, normalizedAmount, selectedPaymentMethod)
+      const actualAmount = db.calculateActualAmount(provider, normalizedAmount)
+      const expiredAt = getRechargeOrderExpiryAt(provider.type, providerConfig)
+      const orderNo = db.generateOrderNo()
+      const providerConfigSnapshot = buildRechargeProviderConfigSnapshot(provider.type, providerConfig)
+      const providerPaymentDetails = provider.type === 'heleket'
+        ? buildHeleketInvoicePaymentDetails(orderNo, payableAmount, buildHeleketConfig(providerConfig).heleketConfig)
+        : { kind: provider.type }
+      const paymentDetails = mergeRechargeAmountDetails(providerPaymentDetails, {
+        amount: normalizedAmount,
+        payableAmount,
+        fee,
+        feeRate: feeConfig.feeRate,
+        feeFixed: feeConfig.feeFixed,
+        feeMode: provider.type === 'yipay' ? 'surcharge' : 'deduct',
+        paymentMethod: selectedPaymentMethod || null
+      })
+
+      // 创建订单
+      const order = await db.createRechargeOrder({
+        orderNo,
+        userId: user.id,
+        providerId,
+        amount: normalizedAmount,
+        actualAmount,
+        paymentMethod: selectedPaymentMethod,
+        fee,
+        expiredAt,
+        providerConfigSnapshot,
+        paymentDetails: paymentDetails as Record<string, unknown> | null,
+        ip: request.ip,
+        userAgent: request.headers['user-agent']
+      })
+
+      // 根据支付渠道类型生成支付链接
+      let payUrl: string | null = null
+      const urls = buildRechargeUrls(provider.id, order.orderNo)
+
+      try {
+        payUrl = await createRechargePayUrl(
+          provider,
+          providerConfig,
+          order.orderNo,
+          payableAmount,
+          selectedPaymentMethod,
+          urls
+        )
+      } catch (payError) {
+        request.log.warn({ providerId, orderNo: order.orderNo, error: payError }, '生成支付链接失败')
+        throw payError
+      }
+
+      return {
+        order: {
+          orderNo: order.orderNo,
+          amount: Number(order.amount),
+          payableAmount,
+          actualAmount: Number(order.actualAmount),
+          fee: Number(order.fee),
+          status: order.status,
+          expiredAt: order.expiredAt?.toISOString(),
+          createdAt: order.createdAt.toISOString()
+        },
+        provider: {
+          id: provider.id,
+          name: provider.name,
+          type: provider.type,
+          methods: provider.methods
+        },
+        payUrl
+      }
+    } catch (error) {
+      request.log.error(error, '创建充值订单失败')
+      return reply.status(500).send({ error: '创建充值订单失败' })
+    }
+  })
+
+  // 获取用户充值记录列表
+  app.get('/api/recharge/orders', {
+    onRequest: [app.authenticate]
+  }, async (request, reply) => {
+    try {
+      if (await db.getSystemConfigBoolean('free_site_mode', false)) {
+        return reply.status(403).send({ error: '白嫖站已启用，充值功能不可用' })
+      }
+
+      const user = request.user!
+      const { page, pageSize, status } = request.query as {
+        page?: string
+        pageSize?: string
+        status?: string
+      }
+
+      const result = await db.getUserRechargeRecords(user.id, {
+        page: page ? parseInt(page, 10) : 1,
+        pageSize: pageSize ? parseInt(pageSize, 10) : 20,
+        status: status as any
+      })
+
+      return {
+        records: result.records.map(r => buildRechargeRecordView({
+          id: r.id,
+          orderNo: r.orderNo,
+          amount: r.amount,
+          actualAmount: r.actualAmount,
+          fee: r.fee,
+          status: r.status,
+          provider: r.provider,
+          paymentMethod: (r as any).paymentMethod || null,
+          paymentDetails: (r as any).paymentDetails,
+          tradeNo: r.tradeNo,
+          failReason: r.failReason,
+          createdAt: r.createdAt,
+          expiredAt: r.expiredAt,
+          completedAt: r.completedAt
+        })),
+        total: result.total,
+        page: result.page,
+        pageSize: result.pageSize
+      }
+    } catch (error) {
+      request.log.error(error, '获取充值记录失败')
+      return reply.status(500).send({ error: '获取充值记录失败' })
+    }
+  })
+
+  // 获取充值订单详情
+  app.get('/api/recharge/orders/:orderNo', {
+    onRequest: [app.authenticate]
+  }, async (request, reply) => {
+    try {
+      if (await db.getSystemConfigBoolean('free_site_mode', false)) {
+        return reply.status(403).send({ error: '白嫖站已启用，充值功能不可用' })
+      }
+
+      const user = request.user!
+      const { orderNo } = request.params as { orderNo: string }
+
+      const record = await db.getRechargeRecordByOrderNo(orderNo)
+      if (!record) {
+        return reply.status(404).send({ error: '订单不存在' })
+      }
+
+      // 验证订单所有权
+      if (record.userId !== user.id) {
+        return reply.status(403).send({ error: '无权查看此订单' })
+      }
+
+      return {
+        order: buildRechargeRecordView({
+          id: record.id,
+          orderNo: record.orderNo,
+          amount: record.amount,
+          actualAmount: record.actualAmount,
+          fee: record.fee,
+          status: record.status,
+          provider: record.provider,
+          paymentMethod: (record as any).paymentMethod || null,
+          paymentDetails: (record as any).paymentDetails,
+          tradeNo: record.tradeNo,
+          failReason: record.failReason,
+          createdAt: record.createdAt,
+          expiredAt: record.expiredAt,
+          completedAt: record.completedAt
+        })
+      }
+    } catch (error) {
+      request.log.error(error, '获取订单详情失败')
+      return reply.status(500).send({ error: '获取订单详情失败' })
+    }
+  })
+
+  // 取消充值订单
+  app.post('/api/recharge/orders/:orderNo/cancel', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const user = request.user!
+      const { orderNo } = request.params as { orderNo: string }
+
+      const record = await db.getRechargeRecordByOrderNo(orderNo)
+      if (!record) {
+        return reply.status(404).send({ error: '订单不存在' })
+      }
+
+      // 验证订单所有权
+      if (record.userId !== user.id) {
+        return reply.status(403).send({ error: '无权操作此订单' })
+      }
+
+      // 只有待支付的订单才能取消
+      if (record.status !== 'pending') {
+        return reply.status(400).send({ error: '当前订单状态不允许取消' })
+      }
+
+      await db.cancelRecharge(orderNo)
+      return { success: true, message: '订单已取消' }
+    } catch (error) {
+      request.log.error(error, '取消订单失败')
+      return reply.status(500).send({ error: '取消订单失败' })
+    }
+  })
+
+  // 重新支付订单（获取新的支付链接）
+  app.post('/api/recharge/orders/:orderNo/repay', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      if (await db.getSystemConfigBoolean('free_site_mode', false)) {
+        return reply.status(403).send({ error: '白嫖站已启用，充值功能不可用' })
+      }
+
+      const user = request.user!
+      const { orderNo } = request.params as { orderNo: string }
+      const { paymentMethod } = request.body as { paymentMethod?: string }
+
+      const record = await db.getRechargeRecordByOrderNo(orderNo)
+      if (!record) {
+        return reply.status(404).send({ error: '订单不存在' })
+      }
+
+      // 验证订单所有权
+      if (record.userId !== user.id) {
+        return reply.status(403).send({ error: '无权操作此订单' })
+      }
+
+      // 只有待支付的订单才能重新支付
+      if (record.status !== 'pending') {
+        return reply.status(400).send({ error: '当前订单状态不允许支付' })
+      }
+
+      // 检查订单是否已过期
+      if (record.expiredAt && new Date(record.expiredAt) < new Date()) {
+        // 自动取消过期订单
+        await db.cancelRecharge(orderNo)
+        return reply.status(400).send({ error: '订单已过期，请重新创建' })
+      }
+
+      // 获取支付渠道
+      const provider = await db.getPaymentProviderById(record.providerId)
+      if (!provider || provider.status !== 'active') {
+        return reply.status(400).send({ error: '支付渠道不可用' })
+      }
+
+      const providerConfig = typeof provider.config === 'string'
+        ? JSON.parse(provider.config)
+        : (provider.config || {}) as Record<string, unknown>
+      const { config: effectiveProviderConfig } = resolveRechargeProviderConfig(
+        provider.type,
+        providerConfig,
+        (record as any).providerConfigSnapshot
+      )
+      const providerValidation = validateActiveRechargeProvider({ type: provider.type, config: effectiveProviderConfig })
+      if (!providerValidation.valid) {
+        request.log.warn({ orderNo, type: provider.type, error: providerValidation.error }, '拒绝使用未安全实现的支付渠道重新支付')
+        return reply.status(400).send({ error: providerValidation.error || '支付渠道不可用' })
+      }
+
+      // 生成支付链接
+      const selectedPaymentMethod = resolveRechargePaymentMethod(
+        provider.type,
+        getProviderMethods(provider.methods),
+        paymentMethod || record.paymentMethod
+      )
+      let payUrl: string | null = null
+      const urls = buildRechargeUrls(provider.id, record.orderNo)
+
+      try {
+        payUrl = await createRechargePayUrl(
+          provider,
+          effectiveProviderConfig,
+          record.orderNo,
+          getRechargePayableAmount({
+            amount: record.amount,
+            fee: record.fee,
+            paymentDetails: (record as any).paymentDetails
+          }),
+          selectedPaymentMethod,
+          urls
+        )
+      } catch (payError) {
+        request.log.warn({ orderNo, providerId: provider.id, error: payError }, '重新生成支付链接失败')
+        throw payError
+      }
+
+      if (selectedPaymentMethod && selectedPaymentMethod !== record.paymentMethod) {
+        await db.updateRechargePaymentMethod(orderNo, selectedPaymentMethod)
+      }
+
+      if (!payUrl) {
+        return reply.status(400).send({ error: '不支持的支付渠道类型' })
+      }
+
+      return {
+        order: {
+          orderNo: record.orderNo,
+          amount: Number(record.amount),
+          payableAmount: getRechargePayableAmount({
+            amount: record.amount,
+            fee: record.fee,
+            paymentDetails: (record as any).paymentDetails
+          }),
+          actualAmount: record.actualAmount !== null && record.actualAmount !== undefined ? Number(record.actualAmount) : null,
+          status: record.status,
+          expiredAt: record.expiredAt?.toISOString() || null
+        },
+        payUrl
+      }
+    } catch (error) {
+      request.log.error(error, '重新支付失败')
+      return reply.status(500).send({ error: '重新支付失败' })
+    }
+  })
+
+  // 获取用户充值统计
+  app.get('/api/recharge/stats', {
+    onRequest: [app.authenticate]
+  }, async (request, reply) => {
+    try {
+      const user = request.user!
+      const stats = await db.getUserRechargeStats(user.id)
+      return { stats }
+    } catch (error) {
+      request.log.error(error, '获取充值统计失败')
+      return reply.status(500).send({ error: '获取充值统计失败' })
+    }
+  })
+
+  // 验证订单支付状态（主动查询易支付）
+  // 用于支付完成后跳转回来时，前端主动确认订单状态
+  app.post('/api/recharge/orders/:orderNo/verify', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const user = request.user!
+      const { orderNo } = request.params as { orderNo: string }
+
+      // 1. 查询本地订单
+      const record = await db.getRechargeRecordByOrderNo(orderNo)
+      if (!record) {
+        return reply.status(404).send({ error: '订单不存在' })
+      }
+
+      // 2. 验证订单所有权
+      if (record.userId !== user.id) {
+        return reply.status(403).send({ error: '无权操作此订单' })
+      }
+
+      // 3. 如果订单已完成，直接返回
+      if (record.status === 'completed') {
+        return {
+          success: true,
+          verified: true,
+          status: 'completed',
+          message: '充值已到账',
+          order: buildRechargeRecordView({
+            id: record.id,
+            orderNo: record.orderNo,
+            amount: record.amount,
+            actualAmount: record.actualAmount ?? record.amount,
+            fee: record.fee,
+            status: record.status,
+            provider: record.provider,
+            paymentMethod: (record as any).paymentMethod || null,
+            paymentDetails: (record as any).paymentDetails,
+            tradeNo: record.tradeNo,
+            failReason: record.failReason,
+            createdAt: record.createdAt,
+            expiredAt: record.expiredAt,
+            completedAt: record.completedAt
+          })
+        }
+      }
+
+      // 4. 如果订单已取消或失败，返回状态
+      if (record.status === 'cancelled' || record.status === 'failed') {
+        return {
+          success: true,
+          verified: false,
+          status: record.status,
+          message: record.status === 'cancelled' ? '订单已取消' : '支付失败',
+          order: buildRechargeRecordView({
+            id: record.id,
+            orderNo: record.orderNo,
+            amount: record.amount,
+            actualAmount: record.actualAmount,
+            fee: record.fee,
+            status: record.status,
+            provider: record.provider,
+            paymentMethod: (record as any).paymentMethod || null,
+            paymentDetails: (record as any).paymentDetails,
+            tradeNo: record.tradeNo,
+            failReason: record.failReason,
+            createdAt: record.createdAt,
+            expiredAt: record.expiredAt,
+            completedAt: record.completedAt
+          })
+        }
+      }
+
+      // 5. 订单为 pending 状态，需要主动查询支付平台
+      const provider = await db.getPaymentProviderById(record.providerId)
+      if (!provider) {
+        return reply.status(400).send({ error: '支付渠道不存在' })
+      }
+
+      if (provider.type !== 'yipay' && provider.type !== 'heleket') {
+        return {
+          success: true,
+          verified: false,
+          status: record.status,
+          message: '订单待支付，请稍后重试',
+          order: {
+            orderNo: record.orderNo,
+            amount: Number(record.amount),
+            status: record.status
+          }
+        }
+      }
+
+      const config = typeof provider.config === 'string'
+        ? JSON.parse(provider.config)
+        : (provider.config || {}) as Record<string, unknown>
+      const { config: effectiveConfig } = resolveRechargeProviderConfig(
+        provider.type,
+        config,
+        (record as any).providerConfigSnapshot
+      )
+
+      const rechargeAmount = Number(record.amount)
+      const orderAmount = getRechargePayableAmount({
+        amount: record.amount,
+        fee: record.fee,
+        paymentDetails: (record as any).paymentDetails
+      })
+      const creditedAmount = record.actualAmount !== null && record.actualAmount !== undefined ? Number(record.actualAmount) : rechargeAmount
+      let tradeNo = ''
+      let tradeNoForIndex = ''
+      let actualAmount = creditedAmount
+      let callbackPayload: Record<string, unknown> = { source: 'verify_api' }
+      let paymentDetails = (record as any).paymentDetails as Record<string, unknown> | undefined
+
+      if (provider.type === 'yipay') {
+        const { epayConfig, valid, error: configError } = buildEpayConfig(effectiveConfig)
+        if (!valid) {
+          request.log.warn({ orderNo, error: configError }, '支付渠道配置不完整')
+          return {
+            success: true,
+            verified: false,
+            status: record.status,
+            message: '订单待支付，请稍后重试',
+            order: {
+              orderNo: record.orderNo,
+              amount: Number(record.amount),
+              status: record.status
+            }
+          }
+        }
+
+        const epay = createEpayClient(epayConfig)
+        const queryResult = await epay.queryOrder(orderNo)
+
+        request.log.info({ orderNo, queryResult: { success: queryResult.success, paid: queryResult.paid } }, '易支付订单查询结果')
+
+        if (!queryResult.success) {
+          return {
+            success: true,
+            verified: false,
+            status: record.status,
+            message: '订单待支付，请稍后重试',
+            order: {
+              orderNo: record.orderNo,
+              amount: Number(record.amount),
+              status: record.status
+            }
+          }
+        }
+
+        if (!queryResult.paid) {
+          return {
+            success: true,
+            verified: false,
+            status: 'pending',
+            message: '订单待支付',
+            order: {
+              orderNo: record.orderNo,
+              amount: Number(record.amount),
+              status: record.status
+            }
+          }
+        }
+
+        tradeNo = queryResult.trade_no || ''
+        tradeNoForIndex = getTradeNoForIndex(orderNo, tradeNo)
+
+        const paidAmount = queryResult.money ? parseFloat(queryResult.money) : 0
+        if (paidAmount > 0 && Math.abs(paidAmount - orderAmount) > AMOUNT_TOLERANCE_CENTS / 100) {
+          request.log.warn(
+            { orderNo, orderAmount, paidAmount, diff: Math.abs(paidAmount - orderAmount) },
+            '支付金额与订单金额不匹配，拒绝处理'
+          )
+          return {
+            success: false,
+            verified: false,
+            status: 'pending',
+            message: '支付金额与订单金额不匹配，请联系客服',
+            order: {
+              orderNo: record.orderNo,
+              amount: rechargeAmount,
+              status: record.status
+            }
+          }
+        }
+
+        actualAmount = creditedAmount
+        callbackPayload = { source: 'verify_api', queryResult: queryResult.rawData as Record<string, unknown> }
+      } else {
+        const { heleketConfig, valid, error: configError } = buildHeleketConfig(effectiveConfig)
+        if (!valid) {
+          request.log.warn({ orderNo, error: configError }, 'Heleket 支付渠道配置不完整')
+          return {
+            success: true,
+            verified: false,
+            status: record.status,
+            message: '订单待支付，请稍后重试',
+            order: {
+              orderNo: record.orderNo,
+              amount: Number(record.amount),
+              status: record.status
+            }
+          }
+        }
+
+        const heleket = createHeleketClient(heleketConfig)
+        const queryResult = await heleket.getPaymentInfo({ order_id: orderNo })
+        const status = extractHeleketStatus(queryResult)
+        const paymentState = getHeleketPaymentState(queryResult)
+        const statusMessage = getHeleketStatusMessage(status)
+
+        request.log.info(
+          { orderNo, status, paymentState, uuid: queryResult.uuid, txid: queryResult.txid },
+          'Heleket 订单查询结果'
+        )
+
+        callbackPayload = {
+          source: 'verify_api',
+          heleketStatus: status,
+          queryResult: queryResult as Record<string, unknown>
+        }
+        paymentDetails = mergeHeleketPaymentDetails(
+          (record as any).paymentDetails,
+          queryResult,
+          heleketConfig,
+          {
+            orderNo,
+            invoiceAmount: orderAmount
+          }
+        ) as Record<string, unknown>
+
+        if (paymentState === 'pending') {
+          const heleketTradeNo = (
+            (typeof queryResult.uuid === 'string' && queryResult.uuid.trim() ? queryResult.uuid : '') ||
+            (typeof queryResult.txid === 'string' && queryResult.txid.trim() ? queryResult.txid : '') ||
+            null
+          )
+          await db.updateRechargeOrderMetadata(orderNo, {
+            tradeNo: heleketTradeNo,
+            paymentDetails
+          })
+
+          return {
+            success: true,
+            verified: false,
+            status: 'pending',
+            message: statusMessage,
+            order: buildRechargeRecordView({
+              id: record.id,
+              orderNo: record.orderNo,
+              amount: record.amount,
+              actualAmount: record.actualAmount,
+              fee: record.fee,
+              status: record.status,
+              provider: record.provider,
+              paymentMethod: (record as any).paymentMethod || null,
+              paymentDetails,
+              tradeNo: heleketTradeNo,
+              failReason: record.failReason,
+              createdAt: record.createdAt,
+              expiredAt: record.expiredAt,
+              completedAt: record.completedAt
+            })
+          }
+        }
+
+        if (paymentState === 'cancelled') {
+          await db.cancelRecharge(orderNo, callbackPayload, paymentDetails)
+
+          return {
+            success: true,
+            verified: true,
+            status: 'cancelled',
+            message: statusMessage,
+            order: buildRechargeRecordView({
+              id: record.id,
+              orderNo: record.orderNo,
+              amount: record.amount,
+              actualAmount: record.actualAmount,
+              fee: record.fee,
+              status: 'cancelled',
+              provider: record.provider,
+              paymentMethod: (record as any).paymentMethod || null,
+              paymentDetails,
+              tradeNo: record.tradeNo,
+              failReason: record.failReason,
+              createdAt: record.createdAt,
+              expiredAt: record.expiredAt,
+              completedAt: record.completedAt
+            })
+          }
+        }
+
+        if (paymentState === 'failed') {
+          await db.failRecharge(orderNo, statusMessage, callbackPayload, paymentDetails)
+
+          return {
+            success: true,
+            verified: true,
+            status: 'failed',
+            message: statusMessage,
+            order: buildRechargeRecordView({
+              id: record.id,
+              orderNo: record.orderNo,
+              amount: record.amount,
+              actualAmount: record.actualAmount,
+              fee: record.fee,
+              status: 'failed',
+              provider: record.provider,
+              paymentMethod: (record as any).paymentMethod || null,
+              paymentDetails,
+              tradeNo: record.tradeNo,
+              failReason: statusMessage,
+              createdAt: record.createdAt,
+              expiredAt: record.expiredAt,
+              completedAt: record.completedAt
+            })
+          }
+        }
+
+        tradeNo = (
+          (typeof queryResult.uuid === 'string' && queryResult.uuid.trim() ? queryResult.uuid : '') ||
+          (typeof queryResult.txid === 'string' && queryResult.txid.trim() ? queryResult.txid : '') ||
+          (typeof queryResult.order_id === 'string' && queryResult.order_id.trim() ? queryResult.order_id : '') ||
+          orderNo
+        ).trim()
+        tradeNoForIndex = getTradeNoForIndex(orderNo, tradeNo)
+
+        const invoiceAmount = getHeleketInvoiceAmount(queryResult)
+        if (invoiceAmount === undefined || !Number.isFinite(invoiceAmount) || invoiceAmount <= 0) {
+          request.log.warn({ orderNo, queryResult }, 'Heleket 返回的支付金额无效')
+          return {
+            success: true,
+            verified: false,
+            status: 'pending',
+            message: '支付处理中，请稍后重试',
+            order: {
+              orderNo: record.orderNo,
+              amount: rechargeAmount,
+              status: record.status
+            }
+          }
+        }
+
+        if (invoiceAmount + AMOUNT_TOLERANCE_CENTS / 100 < orderAmount) {
+          request.log.warn(
+            { orderNo, orderAmount, invoiceAmount, diff: orderAmount - invoiceAmount },
+            'Heleket 支付金额低于订单金额，拒绝处理'
+          )
+          return {
+            success: false,
+            verified: false,
+            status: 'pending',
+            message: '支付金额不足，请联系客服',
+            order: {
+              orderNo: record.orderNo,
+              amount: rechargeAmount,
+              status: record.status
+            }
+          }
+        }
+
+        actualAmount = creditedAmount
+      }
+
+      if (await isCallbackProcessed(provider.id, orderNo, tradeNoForIndex)) {
+        // 已处理过，重新查询订单状态
+        const updatedRecord = await db.getRechargeRecordByOrderNo(orderNo)
+        return {
+          success: true,
+          verified: true,
+          status: updatedRecord?.status || 'completed',
+          message: '充值已到账',
+          order: buildRechargeRecordView({
+            id: updatedRecord?.id || record.id,
+            orderNo: record.orderNo,
+            amount: updatedRecord?.amount || record.amount,
+            actualAmount: updatedRecord?.actualAmount ?? record.amount,
+            fee: updatedRecord?.fee || record.fee,
+            status: updatedRecord?.status || 'completed',
+            provider: updatedRecord?.provider || record.provider,
+            paymentMethod: ((updatedRecord as any)?.paymentMethod || (record as any).paymentMethod || null),
+            paymentDetails: (updatedRecord as any)?.paymentDetails || paymentDetails || (record as any).paymentDetails,
+            tradeNo: updatedRecord?.tradeNo || tradeNo || null,
+            failReason: updatedRecord?.failReason || record.failReason,
+            createdAt: updatedRecord?.createdAt || record.createdAt,
+            expiredAt: updatedRecord?.expiredAt || record.expiredAt,
+            completedAt: updatedRecord?.completedAt || new Date()
+          })
+        }
+      }
+
+      const displayAmount = actualAmount > 0 ? actualAmount : orderAmount
+
+      // 10. 完成充值
+      try {
+        await db.completeRecharge(orderNo, {
+          tradeNo,
+          actualAmount,
+          callbackData: callbackPayload,
+          paymentDetails
+        })
+
+        // 记录已处理
+        await markCallbackProcessed(provider.id, orderNo, tradeNoForIndex, request.ip)
+
+        // 记录充值成功日志
+        await createLog(
+          record.userId,
+          'user',
+          'recharge.completed',
+          `Recharge completed via verify API: order ${orderNo}, amount ${displayAmount}, tradeNo: ${tradeNo || 'N/A'}`,
+          'success'
+        )
+
+        // 发送充值成功通知（站内信）
+        try {
+          await createInboxMessage({
+            userId: record.userId,
+            eventType: 'recharge_success',
+            title: '充值到账通知',
+            content: `您的充值已到账！\n充值金额：￥${displayAmount.toFixed(2)}\n订单号：${orderNo}\n交易号：${tradeNo || 'N/A'}`,
+            data: {
+              orderNo,
+              amount: displayAmount,
+              tradeNo
+            }
+          })
+
+          // 发送充值成功邮件通知
+          try {
+            const user = await db.findUserById(record.userId)
+            if (user && user.email) {
+              const balance = await db.getUserBalance(record.userId)
+              await sendRechargeSuccessEmail(user.email, {
+                username: user.username,
+                amount: displayAmount,
+                orderNo,
+                tradeNo: tradeNo || null,
+                newBalance: balance,
+                time: new Date()
+              })
+            }
+          } catch (emailErr) {
+            request.log.warn({ orderNo, error: emailErr }, '发送充值成功邮件失败')
+          }
+        } catch (notifyError) {
+          request.log.warn({ orderNo, error: notifyError }, '发送充值成功通知失败')
+        }
+
+        request.log.info({ orderNo, tradeNo }, '通过 verify API 完成充值')
+
+        return {
+          success: true,
+          verified: true,
+          status: 'completed',
+          message: '充值成功！余额已到账',
+          order: buildRechargeRecordView({
+            id: record.id,
+            orderNo: record.orderNo,
+            amount: record.amount,
+            actualAmount,
+            fee: record.fee,
+            status: 'completed',
+            provider: record.provider,
+            paymentMethod: (record as any).paymentMethod || null,
+            paymentDetails,
+            tradeNo,
+            failReason: null,
+            createdAt: record.createdAt,
+            expiredAt: record.expiredAt,
+            completedAt: new Date()
+          })
+        }
+      } catch (completeError) {
+        // 幂等性处理：如果完成失败但订单已是 completed 状态
+        const currentRecord = await db.getRechargeRecordByOrderNo(orderNo)
+        if (currentRecord && currentRecord.status === 'completed') {
+          await markCallbackProcessed(provider.id, orderNo, tradeNoForIndex, request.ip)
+          return {
+            success: true,
+            verified: true,
+            status: 'completed',
+            message: '充值已到账',
+            order: buildRechargeRecordView({
+              id: currentRecord.id,
+              orderNo: record.orderNo,
+              amount: currentRecord.amount,
+              actualAmount: currentRecord.actualAmount ?? record.amount,
+              fee: currentRecord.fee,
+              status: 'completed',
+              provider: currentRecord.provider || record.provider,
+              paymentMethod: ((currentRecord as any).paymentMethod || (record as any).paymentMethod || null),
+              paymentDetails: (currentRecord as any).paymentDetails || paymentDetails,
+              tradeNo: currentRecord.tradeNo || tradeNo,
+              failReason: currentRecord.failReason,
+              createdAt: currentRecord.createdAt,
+              expiredAt: currentRecord.expiredAt,
+              completedAt: currentRecord.completedAt
+            })
+          }
+        }
+        throw completeError
+      }
+    } catch (error) {
+      request.log.error(error, '验证订单状态失败')
+      return reply.status(500).send({ error: '验证订单状态失败' })
+    }
+  })
+
+  // ==================== 管理员接口 ====================
+
+  // 获取所有支付渠道（管理员）
+  app.get('/api/admin/payment-providers', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const providers = await db.getAllPaymentProviders()
+      return { providers }
+    } catch (error) {
+      request.log.error(error, '获取支付渠道列表失败')
+      return reply.status(500).send({ error: '获取支付渠道列表失败' })
+    }
+  })
+
+  // 创建支付渠道（管理员）
+  app.post('/api/admin/payment-providers', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const input = request.body as db.CreatePaymentProviderInput
+
+      if (!input.name || !input.type) {
+        return reply.status(400).send({ error: '参数不完整' })
+      }
+
+      const inputConfig = input.config || {}
+      const inputStatus = input.status || 'disabled'
+      const validation = validatePaymentProviderAdminInput(input.type, inputConfig, inputStatus)
+      if (!validation.valid) {
+        return reply.status(400).send({ error: validation.error || '支付渠道配置不合法' })
+      }
+
+      const provider = await db.createPaymentProvider(input)
+      return { provider }
+    } catch (error) {
+      request.log.error(error, '创建支付渠道失败')
+      return reply.status(500).send({ error: '创建支付渠道失败' })
+    }
+  })
+
+  // 更新支付渠道（管理员）
+  app.put('/api/admin/payment-providers/:id', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const { id } = request.params as { id: string }
+      const input = request.body as db.UpdatePaymentProviderInput
+
+      const providerId = parseInt(id, 10)
+      if (isNaN(providerId)) {
+        return reply.status(400).send({ error: '无效的渠道ID' })
+      }
+
+      const existing = await db.getPaymentProviderById(providerId)
+      if (!existing) {
+        return reply.status(404).send({ error: '支付渠道不存在' })
+      }
+
+      const mergedConfig = (input.config ?? (existing.config as Record<string, unknown>) ?? {}) as Record<string, unknown>
+      const mergedStatus = (input.status ?? existing.status) as 'active' | 'disabled' | 'testing'
+      const validation = validatePaymentProviderAdminInput(existing.type, mergedConfig, mergedStatus)
+      if (!validation.valid) {
+        return reply.status(400).send({ error: validation.error || '支付渠道配置不合法' })
+      }
+
+      const provider = await db.updatePaymentProvider(providerId, input)
+      return { provider }
+    } catch (error) {
+      request.log.error(error, '更新支付渠道失败')
+      return reply.status(500).send({ error: '更新支付渠道失败' })
+    }
+  })
+
+  // 更新支付渠道状态（管理员）
+  app.patch('/api/admin/payment-providers/:id/status', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const { id } = request.params as { id: string }
+      const { status } = request.body as { status: 'active' | 'disabled' | 'testing' }
+
+      const providerId = parseInt(id, 10)
+      if (isNaN(providerId)) {
+        return reply.status(400).send({ error: '无效的渠道ID' })
+      }
+
+      // 验证状态值
+      if (!['active', 'disabled', 'testing'].includes(status)) {
+        return reply.status(400).send({ error: '无效的状态值' })
+      }
+
+      const existing = await db.getPaymentProviderById(providerId)
+      if (!existing) {
+        return reply.status(404).send({ error: '支付渠道不存在' })
+      }
+
+      const validation = validatePaymentProviderAdminInput(
+        existing.type,
+        (existing.config as Record<string, unknown>) ?? {},
+        status
+      )
+      if (!validation.valid) {
+        return reply.status(400).send({ error: validation.error || '支付渠道配置不合法' })
+      }
+
+      const provider = await db.updatePaymentProvider(providerId, { status })
+
+      return { provider }
+    } catch (error) {
+      request.log.error(error, '更新支付渠道状态失败')
+      return reply.status(500).send({ error: '更新支付渠道状态失败' })
+    }
+  })
+
+  // 删除支付渠道（管理员）
+  app.delete('/api/admin/payment-providers/:id', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const { id } = request.params as { id: string }
+
+      const providerId = parseInt(id, 10)
+      if (isNaN(providerId)) {
+        return reply.status(400).send({ error: '无效的渠道ID' })
+      }
+
+      const existing = await db.getPaymentProviderById(providerId)
+      if (!existing) {
+        return reply.status(404).send({ error: '支付渠道不存在' })
+      }
+
+      await db.deletePaymentProvider(providerId)
+      return { success: true, message: '支付渠道已删除' }
+    } catch (error) {
+      request.log.error(error, '删除支付渠道失败')
+      return reply.status(500).send({ error: '删除支付渠道失败' })
+    }
+  })
+
+  // 获取所有充值记录（管理员）
+  app.get('/api/admin/recharge/orders', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const { page, pageSize, status, userId } = request.query as {
+        page?: string
+        pageSize?: string
+        status?: string
+        userId?: string
+      }
+
+      const result = await db.getAllRechargeRecords({
+        page: page ? parseInt(page, 10) : 1,
+        pageSize: pageSize ? parseInt(pageSize, 10) : 20,
+        status: status as any,
+        userId: userId ? parseInt(userId, 10) : undefined
+      })
+
+      return {
+        records: result.records.map(r => ({
+          id: r.id,
+          orderNo: r.orderNo,
+          userId: r.userId,
+          amount: Number(r.amount),
+          actualAmount: r.actualAmount !== null && r.actualAmount !== undefined ? Number(r.actualAmount) : null,
+          fee: Number(r.fee),
+          status: r.status,
+          provider: r.provider,
+          createdAt: r.createdAt.toISOString(),
+          completedAt: r.completedAt?.toISOString() || null
+        })),
+        total: result.total,
+        page: result.page,
+        pageSize: result.pageSize
+      }
+    } catch (error) {
+      request.log.error(error, '获取充值记录失败')
+      return reply.status(500).send({ error: '获取充值记录失败' })
+    }
+  })
+
+  // 获取系统充值统计（管理员）
+  app.get('/api/admin/recharge/stats', {
+    onRequest: [app.authenticate, app.requireAdmin]
+  }, async (request, reply) => {
+    try {
+      const { start, end } = request.query as { start?: string; end?: string }
+
+      const dateRange = start && end
+        ? { start: new Date(start), end: new Date(end) }
+        : undefined
+
+      const stats = await db.getSystemRechargeStats(dateRange)
+      return { stats }
+    } catch (error) {
+      request.log.error(error, '获取充值统计失败')
+      return reply.status(500).send({ error: '获取充值统计失败' })
+    }
+  })
+
+  // 手动完成充值订单（管理员）
+  app.post('/api/admin/recharge/orders/:orderNo/complete', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const { orderNo } = request.params as { orderNo: string }
+      const { tradeNo, actualAmount } = request.body as {
+        tradeNo?: string
+        actualAmount?: number
+      }
+
+      const record = await db.getRechargeRecordByOrderNo(orderNo)
+      if (!record) {
+        return reply.status(404).send({ error: '订单不存在' })
+      }
+
+      if (record.status === 'completed') {
+        return reply.status(400).send({ error: '订单已完成' })
+      }
+
+      if (record.status === 'cancelled' || record.status === 'refunded') {
+        return reply.status(400).send({ error: '订单已取消或已退款' })
+      }
+
+      await db.completeRecharge(orderNo, {
+        tradeNo,
+        actualAmount,
+        callbackData: { manual: true, operator: request.user!.username }
+      })
+
+      // 记录管理员操作日志
+      await createLog(
+        request.user!.id,
+        'admin',
+        'recharge.manual_complete',
+        `Admin manually completed recharge order ${orderNo} for user ${record.userId}, amount: ${Number(record.amount)}`,
+        'success'
+      )
+
+      return { success: true, message: '订单已手动完成' }
+    } catch (error) {
+      request.log.error(error, '手动完成订单失败')
+      return reply.status(500).send({ error: '手动完成订单失败' })
+    }
+  })
+
+  // 标记充值订单失败（管理员）
+  app.post('/api/admin/recharge/orders/:orderNo/fail', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      const { orderNo } = request.params as { orderNo: string }
+      const { reason } = request.body as { reason: string }
+
+      const record = await db.getRechargeRecordByOrderNo(orderNo)
+      if (!record) {
+        return reply.status(404).send({ error: '订单不存在' })
+      }
+
+      if (record.status !== 'pending' && record.status !== 'paid') {
+        return reply.status(400).send({ error: '当前订单状态不允许标记失败' })
+      }
+
+      await db.failRecharge(orderNo, reason || '管理员标记失败', {
+        manual: true,
+        operator: request.user!.username
+      })
+
+      // 记录管理员操作日志
+      await createLog(
+        request.user!.id,
+        'admin',
+        'recharge.manual_fail',
+        `Admin marked recharge order ${orderNo} as failed: ${reason || '管理员标记失败'}`,
+        'success'
+      )
+
+      return { success: true, message: '订单已标记失败' }
+    } catch (error) {
+      request.log.error(error, '标记订单失败失败')
+      return reply.status(500).send({ error: '标记订单失败' })
+    }
+  })
+
+  // ==================== 第三方支付回调 ====================
+  // 注意：此接口不需要认证，但需要严格的安全验证
+
+  /**
+   * 通用支付回调处理函数
+   * 支持 POST 和 GET 请求（V1版本使用GET）
+   */
+  async function handlePaymentCallback(
+    request: any,
+    reply: any,
+    providerId: string,
+    callbackData: Record<string, unknown>
+  ) {
+    const clientIp = request.ip
+
+    const providerIdNum = parseInt(providerId, 10)
+    if (isNaN(providerIdNum)) {
+      request.log.warn({ providerId }, '无效的支付渠道 ID')
+      return reply.status(400).send({ error: '无效的支付渠道' })
+    }
+
+    // 1. 获取支付渠道配置
+    const provider = await db.getPaymentProviderById(providerIdNum)
+    if (!provider) {
+      request.log.warn({ providerId }, '支付渠道不存在')
+      return reply.status(404).send({ error: '支付渠道不存在' })
+    }
+
+    // 2. IP 白名单验证
+    if (!isIpInWhitelist(clientIp, provider.type)) {
+      request.log.warn({ ip: clientIp, providerId, providerType: provider.type }, '支付回调 IP 不在白名单内')
+      return reply.status(403).send({ error: '拒绝访问' })
+    }
+
+    const currentConfig = typeof provider.config === 'string' ? JSON.parse(provider.config) : (provider.config || {})
+    const preliminaryOrderNo = extractRechargeOrderNoFromCallback(provider.type, callbackData)
+    const preliminaryRecord = preliminaryOrderNo
+      ? await db.getRechargeRecordByOrderNo(preliminaryOrderNo)
+      : null
+    const { config, source: configSource } = resolveRechargeProviderConfig(
+      provider.type,
+      currentConfig,
+      (preliminaryRecord as any)?.providerConfigSnapshot
+    )
+    const providerValidation = validateActiveRechargeProvider({ type: provider.type, config })
+    if (!providerValidation.valid) {
+      request.log.error({ providerId, type: provider.type, error: providerValidation.error, configSource }, '拒绝处理未安全实现的支付回调')
+      return reply.status(400).send({ error: providerValidation.error || '支付渠道未安全启用' })
+    }
+    const epayVersion = (config.version as EpayVersion) || 'v2'
+
+    // 3. 易支付签名验证（使用带交易状态的验证）
+    let verifyResult: VerifyResult | null = null
+    let heleketPaymentStatus = ''
+    let heleketPaymentState = 'pending'
+    
+    if (provider.type === 'yipay') {
+      const { epayConfig, valid } = buildEpayConfig(config)
+      if (!valid) {
+        request.log.warn({ providerId }, '支付渠道配置不完整')
+        return reply.status(500).send({ error: '支付渠道配置不完整' })
+      }
+      
+      const epay = createEpayClient(epayConfig)
+      verifyResult = epay.verifyWithStatus(callbackData as CallbackData)
+      
+      if (!verifyResult.valid) {
+        request.log.warn({ providerId, ip: clientIp, error: verifyResult.error }, '支付回调签名验证失败')
+        return reply.status(400).send({ error: verifyResult.error || '签名验证失败' })
+      }
+      
+      // V1/V2 都需要检查 trade_status === 'TRADE_SUCCESS'
+      if (!verifyResult.tradeSuccess) {
+        request.log.info({ providerId, tradeStatus: callbackData.trade_status }, '交易未成功，跳过处理')
+        // 返回成功但不处理（支付平台可能发送待支付状态的回调）
+        return epayVersion === 'v1' ? 'success' : { code: 'SUCCESS', message: 'OK' }
+      }
+    } else if (provider.type === 'heleket') {
+      const { heleketConfig, valid } = buildHeleketConfig(config)
+      if (!valid) {
+        request.log.warn({ providerId }, 'Heleket 支付渠道配置不完整')
+        return reply.status(500).send({ error: '支付渠道配置不完整' })
+      }
+
+      const heleket = createHeleketClient(heleketConfig)
+      if (!heleket.verifyWebhookSignature(callbackData)) {
+        request.log.warn({ providerId, ip: clientIp }, 'Heleket 支付回调签名验证失败')
+        return reply.status(400).send({ error: '签名验证失败' })
+      }
+
+      heleketPaymentStatus = extractHeleketStatus(callbackData)
+      heleketPaymentState = getHeleketPaymentState(callbackData)
+    } else {
+      // 其他支付渠道使用原有验证
+      const signature = (callbackData.sign || callbackData.signature || request.headers['x-signature'] || '') as string
+      if (!verifyCallbackSignature({ type: provider.type, config }, callbackData, signature)) {
+        request.log.warn({ providerId, ip: clientIp }, '支付回调签名验证失败')
+        return reply.status(400).send({ error: '签名验证失败' })
+      }
+    }
+
+    // 4. 提取订单信息（根据不同支付渠道适配字段名）
+    let orderNo: string | undefined
+    let tradeNo: string | undefined
+    let actualAmount: number | undefined
+
+    if (provider.type === 'yipay') {
+      // 易支付格式
+      orderNo = callbackData.out_trade_no as string
+      tradeNo = callbackData.trade_no as string
+      actualAmount = callbackData.money ? parseFloat(callbackData.money as string) : undefined
+    } else if (provider.type === 'heleket') {
+      orderNo = callbackData.order_id as string
+      tradeNo = (
+        (typeof callbackData.uuid === 'string' && callbackData.uuid.trim() ? callbackData.uuid : '') ||
+        (typeof callbackData.txid === 'string' && callbackData.txid.trim() ? callbackData.txid : '') ||
+        (typeof callbackData.order_id === 'string' && callbackData.order_id.trim() ? callbackData.order_id : '')
+      )
+      actualAmount = heleketPaymentState === 'paid' ? getHeleketInvoiceAmount(callbackData) : undefined
+    } else if (provider.type === 'alipay_direct') {
+      orderNo = callbackData.out_trade_no as string
+      tradeNo = callbackData.trade_no as string
+      actualAmount = callbackData.total_amount ? parseFloat(callbackData.total_amount as string) : undefined
+    } else if (provider.type === 'wechat_direct') {
+      orderNo = callbackData.out_trade_no as string
+      tradeNo = callbackData.transaction_id as string
+      actualAmount = callbackData.total_fee ? Number(callbackData.total_fee) / 100 : undefined
+    } else if (provider.type === 'stripe') {
+      const data = callbackData.data as { object?: { metadata?: { orderNo?: string }; id?: string; amount?: number } } | undefined
+      orderNo = data?.object?.metadata?.orderNo
+      tradeNo = data?.object?.id
+      actualAmount = data?.object?.amount ? data.object.amount / 100 : undefined
+    } else {
+      orderNo = (callbackData.orderNo || callbackData.order_no || callbackData.out_trade_no) as string
+      tradeNo = (callbackData.tradeNo || callbackData.trade_no || callbackData.transaction_id) as string
+      actualAmount = callbackData.amount as number
+    }
+
+    if (!orderNo) {
+      request.log.warn({ providerId, data: callbackData }, '回调数据缺少订单号')
+      return reply.status(400).send({ error: '缺少订单号' })
+    }
+
+    const shouldValidatePaidAmount = !(provider.type === 'heleket' && heleketPaymentState !== 'paid')
+    if (shouldValidatePaidAmount && (actualAmount === undefined || !Number.isFinite(actualAmount) || actualAmount <= 0)) {
+      request.log.warn({ providerId, orderNo, actualAmount }, '回调数据缺少有效支付金额')
+      return reply.status(400).send({ error: '缺少有效支付金额' })
+    }
+    const paidActualAmount = actualAmount as number
+
+    // 5. 防重放攻击检查（数据库持久化，使用处理后的 tradeNo）
+    const tradeNoForIndex = getTradeNoForIndex(orderNo, tradeNo)
+    if (await isCallbackProcessed(providerIdNum, orderNo, tradeNoForIndex)) {
+      request.log.info({ orderNo }, '重复回调，忽略')
+      // 返回成功，避免支付平台重试
+      return provider.type === 'yipay' && epayVersion === 'v1' ? 'success' : { code: 'SUCCESS', message: 'OK' }
+    }
+
+    // 6. 查询订单
+    const record = preliminaryRecord && preliminaryRecord.orderNo === orderNo
+      ? preliminaryRecord
+      : await db.getRechargeRecordByOrderNo(orderNo)
+    if (!record) {
+      request.log.warn({ orderNo }, '订单不存在')
+      return reply.status(404).send({ error: '订单不存在' })
+    }
+
+    // 7. 验证支付渠道一致性
+    if (record.providerId !== providerIdNum) {
+      request.log.warn({ orderNo, expected: record.providerId, actual: providerIdNum }, '支付渠道不匹配')
+      return reply.status(400).send({ error: '支付渠道不匹配' })
+    }
+
+    let paymentDetails = (record as any).paymentDetails as Record<string, unknown> | undefined
+
+    if (provider.type === 'heleket' && heleketPaymentState !== 'paid') {
+      paymentDetails = mergeHeleketPaymentDetails(
+        (record as any).paymentDetails,
+        callbackData,
+        buildHeleketConfig(config).heleketConfig,
+        {
+          orderNo,
+          invoiceAmount: getRechargePayableAmount({
+            amount: record.amount,
+            fee: record.fee,
+            paymentDetails: (record as any).paymentDetails
+          })
+        }
+      ) as Record<string, unknown>
+      const heleketCallbackPayload = {
+        ...callbackData,
+        heleketStatus: heleketPaymentStatus
+      }
+
+      if (heleketPaymentState === 'pending') {
+        await db.updateRechargeOrderMetadata(orderNo, {
+          tradeNo,
+          callbackData: heleketCallbackPayload,
+          paymentDetails
+        })
+        request.log.info({ orderNo, heleketPaymentStatus }, 'Heleket 待处理回调已记录到本地订单')
+        return { code: 'SUCCESS', message: 'OK' }
+      }
+
+      if (record.status === 'completed') {
+        await markCallbackProcessed(providerIdNum, orderNo, tradeNoForIndex, clientIp)
+        request.log.info({ orderNo, heleketPaymentStatus }, 'Heleket 终态回调到达时订单已完成，按幂等忽略')
+        return { code: 'SUCCESS', message: 'OK' }
+      }
+
+      if (record.status === 'pending' || record.status === 'paid') {
+        if (heleketPaymentState === 'cancelled') {
+          await db.cancelRecharge(orderNo, heleketCallbackPayload, paymentDetails)
+        } else {
+          await db.failRecharge(orderNo, getHeleketStatusMessage(heleketPaymentStatus), heleketCallbackPayload, paymentDetails)
+        }
+      }
+
+      await markCallbackProcessed(providerIdNum, orderNo, tradeNoForIndex, clientIp)
+      request.log.info({ orderNo, heleketPaymentStatus, heleketPaymentState }, 'Heleket 终态回调已同步到本地订单')
+      return { code: 'SUCCESS', message: 'OK' }
+    }
+
+    const rechargeAmount = Number(record.amount)
+    const expectedAmount = getRechargePayableAmount({
+      amount: record.amount,
+      fee: record.fee,
+      paymentDetails: (record as any).paymentDetails
+    })
+    const creditedAmount = record.actualAmount !== null && record.actualAmount !== undefined ? Number(record.actualAmount) : rechargeAmount
+    if (provider.type === 'heleket') {
+      paymentDetails = mergeHeleketPaymentDetails(
+        (record as any).paymentDetails,
+        callbackData,
+        buildHeleketConfig(config).heleketConfig,
+        {
+          orderNo,
+          invoiceAmount: expectedAmount
+        }
+      ) as Record<string, unknown>
+      if (paidActualAmount + AMOUNT_TOLERANCE_CENTS / 100 < expectedAmount) {
+        request.log.warn({
+          orderNo,
+          expected: expectedAmount,
+          actual: paidActualAmount,
+          diff: expectedAmount - paidActualAmount
+        }, 'Heleket 支付金额低于订单金额，拒绝处理')
+        await createLog(
+          record.userId,
+          'system',
+          'recharge.amount_mismatch',
+          `Underpaid recharge rejected: order ${orderNo}, expected ${expectedAmount}, actual ${paidActualAmount}`,
+          'warning'
+        )
+        return reply.status(400).send({ error: '支付金额不足' })
+      }
+    } else {
+      const diff = Math.abs(paidActualAmount - expectedAmount)
+      if (diff > AMOUNT_TOLERANCE_CENTS / 100) {
+        request.log.warn({
+          orderNo,
+          expected: expectedAmount,
+          actual: paidActualAmount,
+          diff
+        }, '支付金额与订单金额不匹配，拒绝处理')
+        await createLog(
+          record.userId,
+          'system',
+          'recharge.amount_mismatch',
+          `Amount mismatch rejected: order ${orderNo}, expected ${expectedAmount}, actual ${actualAmount}`,
+          'warning'
+        )
+        return reply.status(400).send({ error: '支付金额与订单金额不匹配' })
+      }
+    }
+
+    // 9. 检查订单是否已过期
+    if (record.expiredAt && new Date(record.expiredAt) < new Date()) {
+      request.log.warn({ orderNo, expiredAt: record.expiredAt }, '订单已过期，拒绝处理回调')
+      // 过期订单不处理，但返回成功避免支付平台重试
+      return provider.type === 'yipay' && epayVersion === 'v1' ? 'success' : { code: 'SUCCESS', message: 'OK' }
+    }
+
+    // 10. 检查订单状态（幂等性处理）
+    if (record.status === 'completed') {
+      // 已完成，记录并返回成功
+      await markCallbackProcessed(providerIdNum, orderNo, tradeNoForIndex, clientIp)
+      request.log.info({ orderNo }, '订单已完成，幂等返回')
+      return provider.type === 'yipay' && epayVersion === 'v1' ? 'success' : { code: 'SUCCESS', message: 'OK' }
+    }
+
+    if (record.status !== 'pending' && record.status !== 'paid') {
+      request.log.warn({ orderNo, status: record.status }, '订单状态不允许完成')
+      return reply.status(400).send({ error: '订单状态异常' })
+    }
+
+    // 11. 完成充值（带幂等性保护）
+    try {
+      await db.completeRecharge(orderNo, {
+        tradeNo,
+        actualAmount: creditedAmount,
+        callbackData: callbackData,
+        paymentDetails
+      })
+
+      // 记录已处理
+      await markCallbackProcessed(providerIdNum, orderNo, tradeNoForIndex, clientIp)
+
+      // 记录充值成功日志
+      await createLog(
+        record.userId,
+        'user',
+        'recharge.completed',
+        `Recharge completed: order ${orderNo}, amount ${creditedAmount}, tradeNo: ${tradeNo || 'N/A'}`,
+        'success'
+      )
+
+      // 发送充值成功通知（站内信）
+      try {
+        await createInboxMessage({
+          userId: record.userId,
+          eventType: 'recharge_success',
+          title: '充值到账通知',
+          content: `您的充值已到账！\n充值金额：￥${creditedAmount.toFixed(2)}\n订单号：${orderNo}\n交易号：${tradeNo || 'N/A'}`,
+          data: {
+            orderNo,
+            amount: creditedAmount,
+            tradeNo
+          }
+        })
+
+        // 发送充值成功邮件通知
+        try {
+          const user = await db.findUserById(record.userId)
+          if (user && user.email) {
+            const balance = await db.getUserBalance(record.userId)
+            await sendRechargeSuccessEmail(user.email, {
+              username: user.username,
+              amount: creditedAmount,
+              orderNo,
+              tradeNo: tradeNo || null,
+              newBalance: balance,
+              time: new Date()
+            })
+          }
+        } catch (emailErr) {
+          request.log.warn({ orderNo, error: emailErr }, '发送充值成功邮件失败')
+        }
+      } catch (notifyError) {
+        // 通知失败不影响主流程
+        request.log.warn({ orderNo, error: notifyError }, '发送充值成功通知失败')
+      }
+
+      request.log.info({ orderNo, tradeNo }, '支付回调处理成功')
+      
+      // 根据不同支付渠道返回不同格式的成功响应
+      if (provider.type === 'yipay') {
+        // V1版本返回小写 'success' 字符串
+        return epayVersion === 'v1' ? 'success' : { code: 'SUCCESS', message: 'OK' }
+      } else if (provider.type === 'alipay_direct') {
+        return 'success'
+      } else if (provider.type === 'wechat_direct') {
+        return { return_code: 'SUCCESS', return_msg: 'OK' }
+      } else {
+        return { code: 'SUCCESS', message: 'OK' }
+      }
+    } catch (completeError) {
+      // 幂等性处理：如果完成失败但订单已是 completed 状态，仍返回成功
+      const currentRecord = await db.getRechargeRecordByOrderNo(orderNo)
+      if (currentRecord && currentRecord.status === 'completed') {
+        await markCallbackProcessed(providerIdNum, orderNo, tradeNoForIndex, clientIp)
+        return provider.type === 'yipay' && epayVersion === 'v1' ? 'success' : { code: 'SUCCESS', message: 'OK' }
+      }
+      throw completeError
+    }
+  }
+
+  // POST 回调接口
+  app.post('/api/recharge/callback/:providerId', {
+    config: {
+      rateLimit: { max: 100, timeWindow: '1 minute' }
+    }
+  }, async (request, reply) => {
+    try {
+      const { providerId } = request.params as { providerId: string }
+      const callbackData = request.body as Record<string, unknown>
+      return await handlePaymentCallback(request, reply, providerId, callbackData)
+    } catch (error) {
+      request.log.error(error, '支付回调处理失败')
+      return reply.status(500).send({ error: '回调处理失败' })
+    }
+  })
+
+  // GET 回调接口（V1版本易支付使用GET请求）
+  app.get('/api/recharge/callback/:providerId', {
+    config: {
+      rateLimit: { max: 100, timeWindow: '1 minute' }
+    }
+  }, async (request, reply) => {
+    try {
+      const { providerId } = request.params as { providerId: string }
+      const callbackData = request.query as Record<string, unknown>
+      return await handlePaymentCallback(request, reply, providerId, callbackData)
+    } catch (error) {
+      request.log.error(error, '支付回调处理失败')
+      return reply.status(500).send({ error: '回调处理失败' })
+    }
+  })
+}
diff --git a/server/src/routes/redeem-codes.ts b/server/src/routes/redeem-codes.ts
new file mode 100644
index 0000000..9c95705
--- /dev/null
+++ b/server/src/routes/redeem-codes.ts
@@ -0,0 +1,401 @@
+/**
+ * 系统兑换码管理路由
+ * 宿主机所有者可以管理其节点的兑换码
+ */
+
+import type { FastifyInstance } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import type { RedeemCodeType } from '@prisma/client'
+
+// 资源类型名称映射
+const CODE_TYPE_NAMES: Record<string, string> = {
+  c: 'CPU',
+  r: 'Memory',
+  d: 'Disk',
+  t: 'Traffic'
+}
+
+// 资源单位映射
+const CODE_TYPE_UNITS: Record<string, string> = {
+  c: '%',
+  r: 'MB',
+  d: 'MB',
+  t: 'GB'
+}
+
+export default async function redeemCodesRoutes(fastify: FastifyInstance) {
+  // ==================== 获取宿主机的兑换码列表 ====================
+  fastify.get<{
+    Params: { hostId: string }
+    Querystring: { limit?: number; offset?: number; enabled?: string }
+  }>('/hosts/:hostId/redeem-codes', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['hostId'],
+        properties: {
+          hostId: { type: 'string', pattern: '^\\d+$' }
+        }
+      },
+      querystring: {
+        type: 'object',
+        properties: {
+          limit: { type: 'integer', minimum: 1, maximum: 100, default: 50 },
+          offset: { type: 'integer', minimum: 0, default: 0 },
+          enabled: { type: 'string', enum: ['true', 'false'] }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.hostId)
+    const { limit = 50, offset = 0, enabled } = request.query
+
+    // 检查宿主机是否存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const result = await db.getRedeemCodesByHost(hostId, {
+      limit,
+      offset,
+      enabled: enabled !== undefined ? enabled === 'true' : undefined
+    })
+
+    return result
+  })
+
+  // ==================== 创建兑换码 ====================
+  fastify.post<{
+    Params: { hostId: string }
+    Body: {
+      codeType: RedeemCodeType
+      codeValue: number
+      maxUses?: number
+      expiresAt?: string | null
+      remark?: string
+      batchCount?: number
+    }
+  }>('/hosts/:hostId/redeem-codes', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['hostId'],
+        properties: {
+          hostId: { type: 'string', pattern: '^\\d+$' }
+        }
+      },
+      body: {
+        type: 'object',
+        required: ['codeType', 'codeValue'],
+        properties: {
+          codeType: { type: 'string', enum: ['c', 'r', 'd', 't'] },
+          codeValue: { type: 'integer', minimum: 1 },
+          maxUses: { type: 'integer', minimum: 1, maximum: 1000 },
+          expiresAt: { type: ['string', 'null'] },
+          remark: { type: 'string', maxLength: 200 },
+          batchCount: { type: 'integer', minimum: 1, maximum: 100 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.hostId)
+    const { codeType, codeValue, maxUses, expiresAt, remark, batchCount } = request.body
+
+    // 检查宿主机是否存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证数值是否在允许范围内（使用范围验证，允许自定义值）
+    if (!db.isValidCodeValue(codeType as RedeemCodeType, codeValue)) {
+      const range = db.CODE_VALUE_RANGES[codeType as RedeemCodeType]
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, `Value must be between ${range.min} and ${range.max} for type ${codeType}`))
+    }
+
+    const expiresAtDate = expiresAt ? new Date(expiresAt) : null
+
+    try {
+      if (batchCount && batchCount > 1) {
+        // 批量创建一次性兑换码
+        const { codes, batchId } = await db.createRedeemCodeBatch({
+          hostId,
+          createdById: user.id,
+          codeType: codeType as RedeemCodeType,
+          codeValue,
+          count: batchCount,
+          expiresAt: expiresAtDate,
+          remark
+        })
+
+        const typeName = CODE_TYPE_NAMES[codeType] || codeType
+        const unit = CODE_TYPE_UNITS[codeType] || ''
+        await createLog(
+          user.id,
+          'redeem_code',
+          'batch_create',
+          `Created ${batchCount} redeem codes for host "${host.name}" (ID: ${hostId}): ${typeName} +${codeValue}${unit}, batch: ${batchId}`,
+          'success'
+        )
+
+        return {
+          message: 'Batch created successfully',
+          codes,
+          batchId,
+          count: batchCount
+        }
+      } else {
+        // 创建单个兑换码（可多次使用）
+        const code = await db.createRedeemCode({
+          hostId,
+          createdById: user.id,
+          codeType: codeType as RedeemCodeType,
+          codeValue,
+          maxUses: maxUses ?? 1,
+          expiresAt: expiresAtDate,
+          remark
+        })
+
+        const typeName = CODE_TYPE_NAMES[codeType] || codeType
+        const unit = CODE_TYPE_UNITS[codeType] || ''
+        await createLog(
+          user.id,
+          'redeem_code',
+          'create',
+          `Created redeem code for host "${host.name}" (ID: ${hostId}): ${typeName} +${codeValue}${unit}, max uses: ${maxUses ?? 1}`,
+          'success'
+        )
+
+        return {
+          message: 'Created successfully',
+          code: code.code,
+          id: code.id
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(
+        user.id,
+        'redeem_code',
+        'create.failed',
+        `Failed to create redeem code for host (ID: ${hostId}): ${errorMessage}`,
+        'failed'
+      )
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 更新兑换码 ====================
+  fastify.patch<{
+    Params: { hostId: string; codeId: string }
+    Body: {
+      enabled?: boolean
+      remark?: string
+      maxUses?: number
+      expiresAt?: string | null
+    }
+  }>('/hosts/:hostId/redeem-codes/:codeId', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['hostId', 'codeId'],
+        properties: {
+          hostId: { type: 'string', pattern: '^\\d+$' },
+          codeId: { type: 'string', pattern: '^\\d+$' }
+        }
+      },
+      body: {
+        type: 'object',
+        properties: {
+          enabled: { type: 'boolean' },
+          remark: { type: 'string', maxLength: 200 },
+          maxUses: { type: 'integer', minimum: 1, maximum: 1000 },
+          expiresAt: { type: ['string', 'null'] }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.hostId)
+    const codeId = parseInt(request.params.codeId)
+    const { enabled, remark, maxUses, expiresAt } = request.body
+
+    // 检查宿主机是否存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      await db.updateRedeemCode(codeId, {
+        enabled,
+        remark,
+        maxUses,
+        expiresAt: expiresAt !== undefined ? (expiresAt ? new Date(expiresAt) : null) : undefined
+      })
+
+      return { message: 'Updated successfully' }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 删除兑换码 ====================
+  fastify.delete<{
+    Params: { hostId: string; codeId: string }
+  }>('/hosts/:hostId/redeem-codes/:codeId', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['hostId', 'codeId'],
+        properties: {
+          hostId: { type: 'string', pattern: '^\\d+$' },
+          codeId: { type: 'string', pattern: '^\\d+$' }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.hostId)
+    const codeId = parseInt(request.params.codeId)
+
+    // 检查宿主机是否存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      await db.deleteRedeemCode(codeId)
+      return { message: 'Deleted successfully' }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 批量删除兑换码 ====================
+  fastify.post<{
+    Params: { hostId: string }
+    Body: { ids: number[] }
+  }>('/hosts/:hostId/redeem-codes/batch-delete', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['hostId'],
+        properties: {
+          hostId: { type: 'string', pattern: '^\\d+$' }
+        }
+      },
+      body: {
+        type: 'object',
+        required: ['ids'],
+        properties: {
+          ids: { type: 'array', items: { type: 'integer' }, minItems: 1, maxItems: 100 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.hostId)
+    const { ids } = request.body
+
+    // 检查宿主机是否存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    try {
+      await db.deleteRedeemCodeBatch(ids)
+      return { message: 'Batch deleted successfully', count: ids.length }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 获取兑换码使用记录 ====================
+  fastify.get<{
+    Params: { hostId: string; codeId: string }
+    Querystring: { limit?: number; offset?: number }
+  }>('/hosts/:hostId/redeem-codes/:codeId/usages', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      params: {
+        type: 'object',
+        required: ['hostId', 'codeId'],
+        properties: {
+          hostId: { type: 'string', pattern: '^\\d+$' },
+          codeId: { type: 'string', pattern: '^\\d+$' }
+        }
+      },
+      querystring: {
+        type: 'object',
+        properties: {
+          limit: { type: 'integer', minimum: 1, maximum: 100, default: 20 },
+          offset: { type: 'integer', minimum: 0, default: 0 }
+        }
+      }
+    }
+  }, async (request, reply) => {
+    const { user } = request
+    const hostId = parseInt(request.params.hostId)
+    const codeId = parseInt(request.params.codeId)
+    const { limit = 20, offset = 0 } = request.query
+
+    // 检查宿主机是否存在且属于当前用户
+    const host = await db.getHostById(hostId)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+    if (host.user_id !== user.id && user.role !== 'admin') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const result = await db.getRedeemCodeUsages(codeId, { limit, offset })
+    return result
+  })
+
+  // ==================== 获取可选的资源类型和范围 ====================
+  fastify.get('/redeem-code-options', {
+    onRequest: [fastify.authenticate]
+  }, async () => {
+    return {
+      types: [
+        { value: 'c', label: 'CPU', unit: '%' },
+        { value: 'r', label: 'Memory', unit: 'MB' },
+        { value: 'd', label: 'Disk', unit: 'MB' },
+        { value: 't', label: 'Traffic', unit: 'GB' }
+      ],
+      // 返回范围限制，允许前端自定义输入
+      ranges: db.CODE_VALUE_RANGES
+    }
+  })
+}
diff --git a/server/src/routes/resource-pool.ts b/server/src/routes/resource-pool.ts
new file mode 100644
index 0000000..1be2317
--- /dev/null
+++ b/server/src/routes/resource-pool.ts
@@ -0,0 +1,249 @@
+/**
+ * 资源池路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import { patchInstanceResources } from '../lib/incus/incus-instances.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { createLog } from '../db/logs.js'
+import type { RedeemCodeType } from '@prisma/client'
+
+// 资源类型名称
+const RESOURCE_TYPE_NAMES: Record<string, { zh: string; en: string }> = {
+  c: { zh: 'CPU', en: 'CPU' },
+  r: { zh: '内存', en: 'Memory' },
+  d: { zh: '硬盘', en: 'Disk' },
+  t: { zh: '流量', en: 'Traffic' }
+}
+
+// 资源类型单位
+const RESOURCE_TYPE_UNITS: Record<string, string> = {
+  c: '%',
+  r: 'MB',
+  d: 'MB',
+  t: 'GB'
+}
+
+export default async function resourcePoolRoutes(fastify: FastifyInstance) {
+  // ==================== 获取用户资源池 ====================
+  fastify.get('/', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, _reply: FastifyReply) => {
+    const { user } = request
+    const pool = await db.getUserResourcePool(user.id)
+    return pool
+  })
+
+  // ==================== 应用资源到实例 ====================
+  fastify.post<{
+    Body: {
+      instanceId: number
+      resourceType: string
+      amount: number
+    }
+  }>('/apply', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['instanceId', 'resourceType', 'amount'],
+        properties: {
+          instanceId: { type: 'integer', minimum: 1 },
+          resourceType: { type: 'string', enum: ['c', 'r', 'd', 't'] },
+          amount: { type: 'integer', minimum: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { instanceId: number; resourceType: string; amount: number } }>, reply: FastifyReply) => {
+    const { user } = request
+    const { instanceId, resourceType, amount } = request.body
+
+    // 获取实例
+    const instance = await db.getInstanceById(instanceId)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 检查实例所有权
+    if (instance.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 检查实例状态
+    if (!['running', 'stopped'].includes(instance.status)) {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID))
+    }
+
+    // 获取宿主机信息（用于判断是否为 KVM）
+    const host = await db.getHostById(instance.host_id)
+    if (!host) {
+      return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+    }
+
+    // KVM 实例 CPU 必须整百
+    if (resourceType === 'c' && host.instance_type === 'vm') {
+      if (amount % 100 !== 0) {
+        return reply.code(400).send(apiError(ErrorCode.RESOURCE_POOL_KVM_CPU_MULTIPLE))
+      }
+    }
+
+    // KVM 实例内存必须是 128MB 的倍数
+    if (resourceType === 'r' && host.instance_type === 'vm') {
+      if (amount % 128 !== 0) {
+        return reply.code(400).send(apiError(ErrorCode.RESOURCE_POOL_KVM_MEMORY_MULTIPLE))
+      }
+    }
+
+    // KVM 实例硬盘必须是 1GB(1024MB) 的倍数
+    if (resourceType === 'd' && host.instance_type === 'vm') {
+      if (amount % 1024 !== 0) {
+        return reply.code(400).send(apiError(ErrorCode.RESOURCE_POOL_KVM_DISK_MULTIPLE))
+      }
+    }
+
+    // KVM 实例内存/硬盘调整需要停止状态（热调整容易失败）
+    if ((resourceType === 'r' || resourceType === 'd') && host.instance_type === 'vm') {
+      if (instance.status !== 'stopped') {
+        return reply.code(400).send(apiError(ErrorCode.RESOURCE_POOL_VM_MUST_STOP))
+      }
+    }
+
+    // 从资源池扣减资源
+    const success = await db.deductFromResourcePool(
+      user.id,
+      resourceType as RedeemCodeType,
+      amount,
+      instanceId,
+      `应用到实例 ${instance.name}`
+    )
+
+    if (!success) {
+      return reply.code(400).send(apiError(ErrorCode.RESOURCE_POOL_INSUFFICIENT))
+    }
+
+    try {
+      // 获取宿主机
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        throw new Error('Host not found')
+      }
+
+      // 应用资源到实例
+      if (resourceType === 'c') {
+        // CPU
+        const newCpu = instance.cpu + amount
+        await db.updateHostResources(instance.host_id, { cpuUsed: host.cpu_used + amount })
+        const client = await getIncusClient(host)
+        await patchInstanceResources(client, instance.incus_id, { cpu: newCpu })
+        await db.updateInstanceResources(instanceId, { cpu: newCpu })
+      } else if (resourceType === 'r') {
+        // 内存
+        const newMemory = instance.memory + amount
+        await db.updateHostResources(instance.host_id, { memoryUsed: host.memory_used + amount })
+        const client = await getIncusClient(host)
+        await patchInstanceResources(client, instance.incus_id, { memory: newMemory })
+        await db.updateInstanceResources(instanceId, { memory: newMemory })
+      } else if (resourceType === 'd') {
+        // 硬盘
+        const newDisk = instance.disk + amount
+        await db.updateHostResources(instance.host_id, { diskUsed: host.disk_used + amount })
+        const client = await getIncusClient(host)
+        await patchInstanceResources(client, instance.incus_id, { disk: newDisk })
+        await db.updateInstanceResources(instanceId, { disk: newDisk })
+      } else if (resourceType === 't') {
+        // 流量
+        const trafficBytes = BigInt(amount) * BigInt(1024 * 1024 * 1024) // GB to Bytes
+        const currentLimit = instance.monthly_traffic_limit ? BigInt(instance.monthly_traffic_limit) : BigInt(0)
+        const newLimit = currentLimit + trafficBytes
+        await db.updateInstanceResources(instanceId, { monthlyTrafficLimit: newLimit })
+      }
+
+      const typeName = RESOURCE_TYPE_NAMES[resourceType]?.zh || resourceType
+      const unit = RESOURCE_TYPE_UNITS[resourceType] || ''
+
+      await createLog(
+        user.id,
+        'resource_pool',
+        'apply.success',
+        `Applied ${amount}${unit} ${typeName} to instance ${instance.name}`,
+        'success',
+        { instanceId }
+      )
+
+      return {
+        message: 'Resource applied successfully',
+        resourceType,
+        amount,
+        instanceId,
+        instanceName: instance.name
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      await createLog(
+        user.id,
+        'resource_pool',
+        'apply.failed',
+        `Failed to apply resource to instance ${instance.name}: ${errorMessage}`,
+        'failed',
+        { instanceId }
+      )
+      return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR, errorMessage))
+    }
+  })
+
+  // ==================== 获取资源池变动记录 ====================
+  fastify.get<{
+    Querystring: {
+      action?: string
+      resourceType?: string
+      limit?: string
+      offset?: string
+    }
+  }>('/logs', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Querystring: { action?: string; resourceType?: string; limit?: string; offset?: string } }>, _reply: FastifyReply) => {
+    const { user } = request
+    const { action, resourceType, limit, offset } = request.query
+
+    const logs = await db.getResourcePoolLogs(user.id, {
+      action: action as any,
+      resourceType: resourceType as RedeemCodeType,
+      limit: limit ? Number(limit) : 20,
+      offset: offset ? Number(offset) : 0
+    })
+
+    return logs
+  })
+
+  // ==================== 获取用户可应用资源的实例列表 ====================
+  fastify.get('/instances', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, _reply: FastifyReply) => {
+    const { user } = request
+    
+    // 获取用户所有可用实例（包括免费和付费）
+    const instances = await db.getUserAllInstances(user.id)
+    
+    return {
+      instances: instances.map(inst => ({
+        id: inst.id,
+        name: inst.name,
+        status: inst.status,
+        cpu: inst.cpu,
+        memory: inst.memory,
+        disk: inst.disk,
+        monthlyTrafficLimit: inst.monthlyTrafficLimit?.toString() ?? null,
+        isPaid: inst.packagePlanId !== null,
+        instanceType: inst.host.instanceType, // 'vm' | 'container'
+        host: {
+          id: inst.host.id,
+          name: inst.host.name,
+          location: inst.host.location,
+          countryCode: inst.host.countryCode
+        }
+      }))
+    }
+  })
+}
diff --git a/server/src/routes/snapshots.ts b/server/src/routes/snapshots.ts
new file mode 100644
index 0000000..592bd58
--- /dev/null
+++ b/server/src/routes/snapshots.ts
@@ -0,0 +1,428 @@
+/**
+ * 快照管理路由
+ * 处理实例快照的创建、列表、删除、恢复等操作
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import { createSnapshot, deleteSnapshot, restoreSnapshot } from '../lib/incus/incus-snapshots.js'
+import { sendNotification } from '../lib/notifier.js'
+import { checkSnapshotQuota } from '../db/quota-operations.js'
+import type { CreateSnapshotRequest } from '../types/api.js'
+import { checkInstancePermission } from '../lib/permission.js'
+
+// 检查实例是否被转移锁定
+async function checkTransferLock(instanceId: number, reply: FastifyReply): Promise<boolean> {
+  const hasPending = await db.hasPendingTransfer(instanceId)
+  if (hasPending) {
+    reply.code(400).send(apiError(ErrorCode.TRANSFER_INSTANCE_LOCKED))
+    return true
+  }
+  return false
+}
+
+export default async function snapshotRoutes(fastify: FastifyInstance) {
+
+  // 获取实例的快照列表
+  fastify.get<{ Params: { instanceId: string } }>('/:instanceId/snapshots', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 从数据库获取快照列表
+    const snapshots = await db.getSnapshotsByInstanceId(instanceIdNum)
+
+    return snapshots.map(s => ({
+      id: s.id,
+      name: s.name,
+      incusName: s.incus_name,
+      description: s.description,
+      stateful: Boolean(s.stateful),
+      size: s.size,
+      created_at: s.created_at
+    }))
+  })
+
+  // 创建快照
+  fastify.post<{
+    Params: { instanceId: string }
+    Body: CreateSnapshotRequest
+  }>('/:instanceId/snapshots', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          description: { type: 'string', maxLength: 200 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { instanceId: string }
+    Body: CreateSnapshotRequest
+  }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { name, description } = request.body
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 封停状态不允许创建快照
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 实例必须是运行或停止状态
+    if (!['running', 'stopped'].includes(instance.status)) {
+      return reply.code(400).send(apiError(ErrorCode.INSTANCE_STATUS_INVALID))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceIdNum, reply)) return
+
+    // 检查配额
+    const quotaCheck = await checkSnapshotQuota(instance.user_id, instanceIdNum)
+    if (!quotaCheck.allowed) {
+      return reply.code(400).send(apiError(ErrorCode.QUOTA_SNAPSHOT_EXCEEDED, quotaCheck.message))
+    }
+
+    // 生成 Incus 快照名称
+    const timestamp = Date.now()
+    const incusName = `snap-${name.replace(/[^a-zA-Z0-9-_]/g, '-')}-${timestamp}`
+
+    try {
+      // 获取宿主机信息并创建 Incus 客户端
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+      }
+      const client = await getIncusClient(host)
+
+      // 在 Incus 中创建快照
+      await createSnapshot(client, instance.incus_id, incusName)
+
+      // 保存到数据库
+      const snapshotId = await db.createSnapshot({
+        instanceId: instanceIdNum,
+        incusName,
+        name,
+        description,
+        stateful: false
+      })
+
+      // 发送通知
+      await sendNotification(request.user.id, 'snapshot_created', {
+        instanceName: instance.name,
+        snapshotName: name,
+        hostName: host.name
+      })
+
+      await createLog(request.user.id, 'snapshot', 'snapshot.create', `Created snapshot "${name}" for instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: instanceIdNum })
+
+      reply.code(201).send({
+        message: 'Snapshot created',
+        snapshot: {
+          id: snapshotId,
+          name,
+          incusName,
+          description,
+          stateful: false
+        }
+      })
+    } catch (err) {
+      fastify.log.error(err)
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await createLog(request.user.id, 'snapshot', 'snapshot.create', `Failed to create snapshot: ${errorMessage}`, 'failed', { instanceId: instanceIdNum })
+      return reply.code(500).send({ error: 'Failed to create snapshot: ' + errorMessage, code: 'OPERATION_FAILED' })
+    }
+  })
+
+  // 删除快照
+  fastify.delete<{ Params: { instanceId: string; snapshotId: string } }>('/:instanceId/snapshots/:snapshotId', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { instanceId: string; snapshotId: string } }>, reply: FastifyReply) => {
+    const { instanceId, snapshotId } = request.params
+    const instanceIdNum = Number(instanceId)
+    const snapshotIdNum = Number(snapshotId)
+
+    if (isNaN(instanceIdNum) || isNaN(snapshotIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取快照信息
+    const snapshot = await db.getSnapshotById(snapshotIdNum)
+    if (!snapshot || snapshot.instance_id !== instanceIdNum) {
+      return reply.code(404).send(apiError(ErrorCode.SNAPSHOT_NOT_FOUND))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceIdNum, reply)) return
+
+
+
+    try {
+      // 获取宿主机信息并创建 Incus 客户端
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+      }
+      const client = await getIncusClient(host)
+
+      // 在 Incus 中删除快照
+      await deleteSnapshot(client, instance.incus_id, snapshot.incus_name)
+
+      // 从数据库删除
+      await db.deleteSnapshot(snapshotIdNum)
+
+      // 发送通知
+      await sendNotification(request.user.id, 'snapshot_deleted', {
+        instanceName: instance.name,
+        snapshotName: snapshot.name,
+        hostName: host.name
+      })
+
+      await createLog(request.user.id, 'snapshot', 'snapshot.delete', `Deleted snapshot "${snapshot.name}" of instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: instanceIdNum })
+
+      return { message: 'Snapshot deleted' }
+    } catch (err) {
+      fastify.log.error(err)
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await createLog(request.user.id, 'snapshot', 'snapshot.delete', `Failed to delete snapshot: ${errorMessage}`, 'failed', { instanceId: instanceIdNum })
+      return reply.code(500).send({ error: 'Failed to delete snapshot: ' + errorMessage, code: 'OPERATION_FAILED' })
+    }
+  })
+
+  // 恢复快照
+  fastify.post<{
+    Params: { instanceId: string; snapshotId: string }
+    Body: Record<string, never>
+  }>('/:instanceId/snapshots/:snapshotId/restore', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Params: { instanceId: string; snapshotId: string }; Body: Record<string, never> }>, reply: FastifyReply) => {
+    const { instanceId, snapshotId } = request.params
+    const instanceIdNum = Number(instanceId)
+    const snapshotIdNum = Number(snapshotId)
+
+    if (isNaN(instanceIdNum) || isNaN(snapshotIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取快照信息
+    const snapshot = await db.getSnapshotById(snapshotIdNum)
+    if (!snapshot || snapshot.instance_id !== instanceIdNum) {
+      return reply.code(404).send(apiError(ErrorCode.SNAPSHOT_NOT_FOUND))
+    }
+
+    // 封停状态不允许恢复快照
+    if (instance.status === 'suspended') {
+      if (instance.suspend_reason === 'expired') {
+        return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+      }
+      return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+    }
+
+    // 实例必须停止才能恢复
+    if (instance.status !== 'stopped') {
+      return reply.code(400).send(apiError(ErrorCode.SNAPSHOT_RESTORE_REQUIRES_STOP))
+    }
+
+    // 检查转移锁定
+    if (await checkTransferLock(instanceIdNum, reply)) return
+
+    try {
+      // 获取宿主机信息并创建 Incus 客户端
+      const host = await db.getHostById(instance.host_id)
+      if (!host) {
+        return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+      }
+      const client = await getIncusClient(host)
+
+      // 在 Incus 中恢复快照
+      await restoreSnapshot(client, instance.incus_id, snapshot.incus_name)
+
+      // 发送通知
+      await sendNotification(request.user.id, 'snapshot_restored', {
+        instanceName: instance.name,
+        snapshotName: snapshot.name,
+        hostName: host.name
+      })
+
+      await createLog(request.user.id, 'snapshot', 'snapshot.restore', `Restored instance "${instance.name}" to snapshot "${snapshot.name}" [host: ${host.name}]`, 'success', { instanceId: instanceIdNum })
+
+      return { message: 'Snapshot restored' }
+    } catch (err) {
+      fastify.log.error(err)
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      await createLog(request.user.id, 'snapshot', 'snapshot.restore', `Failed to restore snapshot: ${errorMessage}`, 'failed', { instanceId: instanceIdNum })
+      return reply.code(500).send({ error: 'Failed to restore snapshot: ' + errorMessage, code: 'OPERATION_FAILED' })
+    }
+  })
+
+  // 获取自动快照策略
+  fastify.get<{ Params: { instanceId: string } }>('/:instanceId/snapshot-policy', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const policy = await db.getSnapshotPolicy(instanceIdNum)
+
+    return policy ? {
+      enabled: Boolean((policy as { enabled?: number }).enabled),
+      interval_minutes: (policy as { intervalMinutes?: number }).intervalMinutes || 360,
+      last_run_at: (policy as { lastRunAt?: string | null }).lastRunAt || null,
+      next_run_at: (policy as { nextRunAt?: string | null }).nextRunAt || null
+    } : {
+      enabled: false,
+      interval_minutes: 360,
+      last_run_at: null,
+      next_run_at: null
+    }
+  })
+
+  // 设置自动快照策略
+  fastify.put<{
+    Params: { instanceId: string }
+    Body: { enabled: boolean; intervalMinutes?: number }
+  }>('/:instanceId/snapshot-policy', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['enabled'],
+        properties: {
+          enabled: { type: 'boolean' },
+          intervalMinutes: { type: 'integer', enum: [10, 60, 360, 1440] } // 10分钟, 1小时, 6小时, 24小时
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { instanceId: string }
+    Body: { enabled: boolean; intervalMinutes?: number }
+  }>, reply: FastifyReply) => {
+    const { instanceId } = request.params
+    const instanceIdNum = Number(instanceId)
+
+    if (isNaN(instanceIdNum)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { enabled, intervalMinutes = 360 } = request.body
+
+    // 验证实例归属
+    const instance = await db.getInstanceById(instanceIdNum)
+    if (!instance) {
+      return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+    }
+
+    // 权限检查：管理员、实例所有者、宿主机所有者
+    const permResult = await checkInstancePermission(request.user, instance)
+    if (!permResult.allowed) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 如果启用自动快照，检查配额
+    if (enabled) {
+      // 检查实例配额
+      const instanceLimit = instance.snapshot_limit
+      if (instanceLimit === null || instanceLimit <= 0) {
+        return reply.code(400).send(apiError(ErrorCode.QUOTA_NOT_ALLOCATED))
+      }
+    }
+
+    await db.upsertSnapshotPolicy(instanceIdNum, {
+      enabled,
+      intervalMinutes
+    })
+
+    return { message: 'Auto snapshot policy updated' }
+  })
+}
+
diff --git a/server/src/routes/ssh-keys.ts b/server/src/routes/ssh-keys.ts
new file mode 100644
index 0000000..0633479
--- /dev/null
+++ b/server/src/routes/ssh-keys.ts
@@ -0,0 +1,312 @@
+/**
+ * SSH 公钥管理路由
+ * 用户可以管理用于实例的 SSH 公钥
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { validateName } from '../lib/security.js'
+import crypto from 'crypto'
+
+export default async function sshKeyRoutes(fastify: FastifyInstance) {
+
+  // 获取用户的 SSH 公钥列表
+  fastify.get('/', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest) => {
+    const keys = await db.getSSHKeysByUserId(request.user.id)
+
+    return {
+      keys: keys.map(k => ({
+        id: k.id,
+        name: k.name,
+        fingerprint: k.fingerprint,
+        // 只返回公钥前后部分，安全考虑
+        publicKeyPreview: truncateKey(k.public_key),
+        createdAt: k.created_at
+      }))
+    }
+  })
+
+  // 获取单个 SSH 公钥详情
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const keyId = Number(id)
+
+    if (isNaN(keyId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const key = await db.getSSHKeyById(keyId)
+    if (!key) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户SSH密钥操作
+    if (key.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    return {
+      key: {
+        id: key.id,
+        name: key.name,
+        fingerprint: key.fingerprint,
+        publicKeyPreview: truncateKey(key.public_key),
+        createdAt: key.created_at
+      }
+    }
+  })
+
+  // 添加 SSH 公钥
+  fastify.post<{ Body: { name: string; publicKey: string } }>('/', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['name', 'publicKey'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 50 },
+          publicKey: { type: 'string', minLength: 20 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { name: string; publicKey: string } }>, reply: FastifyReply) => {
+    const { name, publicKey } = request.body
+
+    // 验证密钥名称（防止危险字符注入）
+    const nameValidation = validateName(name, 'Key name', 1, 50)
+    if (!nameValidation.valid) {
+      return reply.code(400).send({ error: nameValidation.message })
+    }
+
+    // 验证并解析公钥
+    const parsed = parseSSHPublicKey(publicKey.trim())
+    if (!parsed) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_SSH_KEY))
+    }
+
+    // 计算指纹
+    const fingerprint = calculateFingerprint(parsed.keyData)
+
+    // 检查是否已存在相同指纹的密钥
+    const existingKeys = await db.getSSHKeysByUserId(request.user.id)
+    if (existingKeys.some(k => k.fingerprint === fingerprint)) {
+      return reply.code(400).send(apiError(ErrorCode.SSH_KEY_EXISTS))
+    }
+
+    // 保存到数据库
+    const keyId = await db.createSSHKey({
+      userId: request.user.id,
+      name,
+      publicKey: publicKey.trim(),
+      fingerprint
+    })
+
+    await createLog(request.user.id, 'ssh_key', 'ssh_key.add', `Added SSH key "${name}" [fingerprint: ${fingerprint}]`, 'success')
+
+    reply.code(201).send({
+      message: 'SSH key added',
+      key: {
+        id: keyId,
+        name,
+        fingerprint,
+        publicKeyPreview: truncateKey(publicKey)
+      }
+    })
+  })
+
+  // 生成 SSH 密钥对
+  // 使用 Node.js 原生 crypto 模块生成 Ed25519 密钥对
+  // 返回私钥给用户保存，公钥自动保存到系统
+  fastify.post('/generate', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    // 检查用户密钥数量限制，防止滥用
+    const existingKeys = await db.getSSHKeysByUserId(request.user.id)
+    const MAX_SSH_KEYS = 20
+    if (existingKeys.length >= MAX_SSH_KEYS) {
+      return reply.code(400).send({ error: `Maximum ${MAX_SSH_KEYS} SSH keys allowed per user` })
+    }
+
+    // 生成 RSA 密钥对 (4096位)
+    const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', {
+      modulusLength: 4096,
+      publicKeyEncoding: { type: 'spki', format: 'pem' },
+      privateKeyEncoding: { type: 'pkcs1', format: 'pem' }
+    })
+
+    // 将 PEM 格式的公钥转换为 OpenSSH 格式
+    const sshPublicKey = convertRSAToOpenSSHFormat(publicKey)
+    
+    // RSA 私钥直接使用 PEM 格式（OpenSSH 支持）
+    const sshPrivateKey = privateKey
+
+    // 解析公钥获取 keyData
+    const parsed = parseSSHPublicKey(sshPublicKey)
+    if (!parsed) {
+      return reply.code(500).send({ error: 'Failed to generate valid SSH key' })
+    }
+
+    // 计算指纹
+    const fingerprint = calculateFingerprint(parsed.keyData)
+
+    // 检查是否已存在相同指纹的密钥
+    if (existingKeys.some(k => k.fingerprint === fingerprint)) {
+      return reply.code(400).send({ error: 'Key already exists' })
+    }
+
+    // 生成5位随机字符后缀
+    const randomSuffix = crypto.randomBytes(4).toString('base64url').slice(0, 5)
+    const keyName = `Incudal-${randomSuffix}`
+
+    // 保存公钥到数据库
+    const keyId = await db.createSSHKey({
+      userId: request.user.id,
+      name: keyName,
+      publicKey: sshPublicKey,
+      fingerprint
+    })
+
+    await createLog(request.user.id, 'ssh_key', 'ssh_key.generate', `Generated SSH key "${keyName}" [fingerprint: ${fingerprint}]`, 'success')
+
+    // 返回私钥给用户保存（系统不会保存私钥）
+    return {
+      message: 'SSH key generated',
+      privateKey: sshPrivateKey,
+      key: {
+        id: keyId,
+        name: keyName,
+        fingerprint,
+        publicKeyPreview: truncateKey(sshPublicKey)
+      }
+    }
+  })
+
+  // 删除 SSH 公钥
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const keyId = Number(id)
+
+    if (isNaN(keyId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const key = await db.getSSHKeyById(keyId)
+    if (!key) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    // 管理员只管理系统层面，不参与用户SSH密钥操作
+    if (key.user_id !== request.user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    await db.deleteSSHKey(keyId)
+
+    await createLog(request.user.id, 'ssh_key', 'ssh_key.delete', `Deleted SSH key "${key.name}" [fingerprint: ${key.fingerprint}]`, 'success')
+
+    return { message: 'SSH key deleted' }
+  })
+}
+
+/**
+ * 解析 SSH 公钥
+ * 支持 ssh-rsa, ssh-ed25519, ecdsa-sha2-nistp256 等格式
+ */
+function parseSSHPublicKey(key: string): { type: string; keyData: string; comment: string } | null {
+  // 移除可能的换行和多余空格
+  const cleanKey = key.replace(/\r?\n/g, ' ').trim()
+
+  // SSH 公钥格式: <type> <base64-data> [comment]
+  const match = cleanKey.match(/^(ssh-rsa|ssh-ed25519|ecdsa-sha2-\S+)\s+([A-Za-z0-9+/=]+)(\s+.*)?$/)
+
+  if (!match) {
+    return null
+  }
+
+  return {
+    type: match[1],
+    keyData: match[2],
+    comment: match[3] ? match[3].trim() : ''
+  }
+}
+
+/**
+ * 计算 SSH 公钥指纹
+ * 使用 SHA-256
+ */
+function calculateFingerprint(base64KeyData: string): string {
+  try {
+    const keyBuffer = Buffer.from(base64KeyData, 'base64')
+    const hash = crypto.createHash('sha256').update(keyBuffer).digest('base64')
+    // 移除 base64 填充符并格式化
+    return 'SHA256:' + hash.replace(/=+$/, '')
+  } catch {
+    return 'SHA256:unknown'
+  }
+}
+
+/**
+ * 截断公钥用于显示
+ */
+function truncateKey(publicKey: string): string {
+  if (!publicKey || publicKey.length < 60) return publicKey
+  return publicKey.substring(0, 30) + '...' + publicKey.substring(publicKey.length - 20)
+}
+
+/**
+ * 写入 4 字节 big-endian 整数
+ */
+function writeUInt32BE(value: number): Buffer {
+  const buf = Buffer.alloc(4)
+  buf.writeUInt32BE(value, 0)
+  return buf
+}
+
+/**
+ * 将 PEM 格式的 RSA 公钥转换为 OpenSSH 格式
+ */
+function convertRSAToOpenSSHFormat(pemPublicKey: string): string {
+  // 使用 crypto 模块解析公钥
+  const publicKeyObject = crypto.createPublicKey({
+    key: pemPublicKey,
+    format: 'pem'
+  })
+  
+  // 导出为 JWK 格式获取 n 和 e
+  const jwk = publicKeyObject.export({ format: 'jwk' }) as { n?: string; e?: string }
+  if (!jwk.n || !jwk.e) {
+    throw new Error('Failed to export RSA public key as JWK')
+  }
+  
+  // 从 base64url 解码
+  const n = Buffer.from(jwk.n, 'base64url')
+  const e = Buffer.from(jwk.e, 'base64url')
+  
+  // RSA 模数需要确保最高位不是 1（否则会被解释为负数）
+  // 如果最高位是 1，需要在前面加一个 0x00 字节
+  const nWithPadding = n[0] & 0x80 ? Buffer.concat([Buffer.from([0x00]), n]) : n
+  const eWithPadding = e[0] & 0x80 ? Buffer.concat([Buffer.from([0x00]), e]) : e
+  
+  // 构建 OpenSSH 格式: 类型长度 + 类型 + e长度 + e + n长度 + n
+  const keyType = 'ssh-rsa'
+  const keyTypeBuffer = Buffer.from(keyType, 'utf8')
+  
+  const blob = Buffer.concat([
+    writeUInt32BE(keyTypeBuffer.length),
+    keyTypeBuffer,
+    writeUInt32BE(eWithPadding.length),
+    eWithPadding,
+    writeUInt32BE(nWithPadding.length),
+    nWithPadding
+  ])
+  
+  return `ssh-rsa ${blob.toString('base64')}`
+}
diff --git a/server/src/routes/storage-configs.ts b/server/src/routes/storage-configs.ts
new file mode 100644
index 0000000..5a9886d
--- /dev/null
+++ b/server/src/routes/storage-configs.ts
@@ -0,0 +1,366 @@
+/**
+ * 远程存储配置路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { encryptSensitiveData } from '../lib/security.js'
+import { StorageFactory } from '../storage/factory.js'
+import type { StorageType } from '@prisma/client'
+import { assertSafeStorageTarget, OutboundTargetValidationError } from '../lib/outbound-security.js'
+
+interface CreateStorageConfigBody {
+    name: string
+    type: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+    host: string
+    port?: number
+    username?: string
+    password?: string
+    basePath?: string
+    extra?: Record<string, unknown>
+    isDefault?: boolean
+}
+
+interface UpdateStorageConfigBody {
+    name?: string
+    type?: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+    host?: string
+    port?: number | null
+    username?: string | null
+    password?: string | null
+    basePath?: string | null
+    extra?: Record<string, unknown> | null
+    isDefault?: boolean
+}
+
+export default async function storageConfigRoutes(fastify: FastifyInstance) {
+    async function validateStorageTarget(type: 'WEBDAV' | 'FTP' | 'SFTP' | 'S3', host: string): Promise<void> {
+        if (type === 'S3') {
+            return
+        }
+
+        try {
+            await assertSafeStorageTarget(type, host)
+        } catch (error) {
+            if (error instanceof OutboundTargetValidationError) {
+                throw new Error(error.message)
+            }
+            throw error
+        }
+    }
+
+    // 获取用户的存储配置列表
+    fastify.get('/', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest, _reply: FastifyReply) => {
+        const configs = await db.getStorageConfigsByUserId(request.user.id)
+
+        // 不返回密码
+        return configs.map(c => ({
+            id: c.id,
+            name: c.name,
+            type: c.type,
+            host: c.host,
+            port: c.port,
+            username: c.username,
+            basePath: c.basePath,
+            extra: c.extra,
+            isDefault: c.isDefault,
+            createdAt: c.createdAt.toISOString(),
+            updatedAt: c.updatedAt.toISOString()
+        }))
+    })
+
+    // 创建存储配置
+    fastify.post<{ Body: CreateStorageConfigBody }>('/', {
+        onRequest: [fastify.authenticate],
+        schema: {
+            body: {
+                type: 'object',
+                required: ['name', 'type', 'host'],
+                properties: {
+                    name: { type: 'string', minLength: 1, maxLength: 50 },
+                    type: { type: 'string', enum: ['WEBDAV', 'FTP', 'SFTP', 'S3'] },
+                    host: { type: 'string', minLength: 1, maxLength: 255 },
+                    port: { type: 'integer', minimum: 1, maximum: 65535 },
+                    username: { type: 'string', maxLength: 100 },
+                    password: { type: 'string', maxLength: 255 },
+                    basePath: { type: 'string', maxLength: 255 },
+                    extra: { type: 'object' },
+                    isDefault: { type: 'boolean' }
+                }
+            }
+        }
+    }, async (request: FastifyRequest<{ Body: CreateStorageConfigBody }>, reply: FastifyReply) => {
+        const { name, type, host, port, username, password, basePath, extra, isDefault } = request.body
+
+        // S3 暂不支持
+        if (type === 'S3') {
+            return reply.code(400).send(apiError(ErrorCode.STORAGE_TYPE_NOT_SUPPORTED, 'S3 存储暂未实现'))
+        }
+
+        try {
+            await validateStorageTarget(type, host)
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, errorMessage))
+        }
+
+        try {
+            // 加密密码
+            const encryptedPassword = password ? encryptSensitiveData(password) : null
+
+            const config = await db.createStorageConfig({
+                userId: request.user.id,
+                name,
+                type: type as StorageType,
+                host,
+                port,
+                username,
+                password: encryptedPassword,
+                basePath,
+                extra,
+                isDefault
+            })
+
+            await createLog(
+                request.user.id,
+                'storage',
+                'storage.create',
+                `Created storage config "${name}" (${type})`,
+                'success'
+            )
+
+            return {
+                id: config.id,
+                name: config.name,
+                type: config.type,
+                host: config.host,
+                port: config.port,
+                username: config.username,
+                basePath: config.basePath,
+                extra: config.extra,
+                isDefault: config.isDefault,
+                createdAt: config.createdAt.toISOString()
+            }
+        } catch (err) {
+            fastify.log.error(err)
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            return reply.code(500).send(apiError(ErrorCode.STORAGE_CONFIG_CREATE_FAILED, errorMessage))
+        }
+    })
+
+    // 更新存储配置
+    fastify.patch<{
+        Params: { id: string }
+        Body: UpdateStorageConfigBody
+    }>('/:id', {
+        onRequest: [fastify.authenticate],
+        schema: {
+            body: {
+                type: 'object',
+                properties: {
+                    name: { type: 'string', minLength: 1, maxLength: 50 },
+                    type: { type: 'string', enum: ['WEBDAV', 'FTP', 'SFTP', 'S3'] },
+                    host: { type: 'string', minLength: 1, maxLength: 255 },
+                    port: { type: ['integer', 'null'], minimum: 1, maximum: 65535 },
+                    username: { type: ['string', 'null'], maxLength: 100 },
+                    password: { type: ['string', 'null'], maxLength: 255 },
+                    basePath: { type: ['string', 'null'], maxLength: 255 },
+                    extra: { type: ['object', 'null'] },
+                    isDefault: { type: 'boolean' }
+                }
+            }
+        }
+    }, async (request: FastifyRequest<{
+        Params: { id: string }
+        Body: UpdateStorageConfigBody
+    }>, reply: FastifyReply) => {
+        const id = Number(request.params.id)
+        if (isNaN(id)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // 验证归属
+        const existing = await db.getStorageConfigById(id)
+        if (!existing) {
+            return reply.code(404).send(apiError(ErrorCode.STORAGE_CONFIG_NOT_FOUND))
+        }
+        // 管理员只管理系统层面，不参与用户存储配置操作
+        if (existing.userId !== request.user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        const { password, type, ...rest } = request.body
+
+        // S3 暂不支持
+        if (type === 'S3') {
+            return reply.code(400).send(apiError(ErrorCode.STORAGE_TYPE_NOT_SUPPORTED, 'S3 存储暂未实现'))
+        }
+
+        try {
+            const updateData: Record<string, unknown> = { ...rest }
+            if (type) updateData.type = type
+
+            // 如果提供了新密码，加密它
+            if (password !== undefined) {
+                updateData.password = password ? encryptSensitiveData(password) : null
+            }
+
+            const nextType = (type || existing.type) as 'WEBDAV' | 'FTP' | 'SFTP' | 'S3'
+            const nextHost = request.body.host || existing.host
+            await validateStorageTarget(nextType, nextHost)
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, errorMessage))
+        }
+
+        try {
+            const updateData: Record<string, unknown> = { ...rest }
+            if (type) updateData.type = type
+
+            // 如果提供了新密码，加密它
+            if (password !== undefined) {
+                updateData.password = password ? encryptSensitiveData(password) : null
+            }
+
+            const config = await db.updateStorageConfig(id, updateData as Parameters<typeof db.updateStorageConfig>[1])
+
+            await createLog(
+                request.user.id,
+                'storage',
+                'storage.update',
+                `Updated storage config "${config.name}"`,
+                'success'
+            )
+
+            return {
+                id: config.id,
+                name: config.name,
+                type: config.type,
+                host: config.host,
+                port: config.port,
+                username: config.username,
+                basePath: config.basePath,
+                extra: config.extra,
+                isDefault: config.isDefault,
+                updatedAt: config.updatedAt.toISOString()
+            }
+        } catch (err) {
+            fastify.log.error(err)
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            return reply.code(500).send(apiError(ErrorCode.STORAGE_CONFIG_UPDATE_FAILED, errorMessage))
+        }
+    })
+
+    // 删除存储配置
+    fastify.delete<{ Params: { id: string } }>('/:id', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const id = Number(request.params.id)
+        if (isNaN(id)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // 验证归属
+        const existing = await db.getStorageConfigById(id)
+        if (!existing) {
+            return reply.code(404).send(apiError(ErrorCode.STORAGE_CONFIG_NOT_FOUND))
+        }
+        // 管理员只管理系统层面，不参与用户存储配置操作
+        if (existing.userId !== request.user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        // 检查是否有活跃的上传任务
+        const activeTaskCount = await db.countActiveTasksForStorageConfig(id)
+        if (activeTaskCount > 0) {
+            return reply.code(409).send({
+                error: 'STORAGE_HAS_ACTIVE_TASKS',
+                message: `该存储配置有 ${activeTaskCount} 个上传任务正在进行中，请等待完成后再删除`
+            })
+        }
+
+        try {
+            await db.deleteStorageConfig(id)
+
+            await createLog(
+                request.user.id,
+                'storage',
+                'storage.delete',
+                `Deleted storage config "${existing.name}"`,
+                'success'
+            )
+
+            return { message: 'Storage config deleted' }
+        } catch (err) {
+            fastify.log.error(err)
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            return reply.code(500).send(apiError(ErrorCode.STORAGE_CONFIG_DELETE_FAILED, errorMessage))
+        }
+    })
+
+    // 测试存储配置连接
+    fastify.post<{ Params: { id: string } }>('/:id/test', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const id = Number(request.params.id)
+        if (isNaN(id)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // 验证归属
+        const config = await db.getStorageConfigById(id)
+        if (!config) {
+            return reply.code(404).send(apiError(ErrorCode.STORAGE_CONFIG_NOT_FOUND))
+        }
+        // 管理员只管理系统层面，不参与用户存储配置操作
+        if (config.userId !== request.user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        try {
+            const provider = StorageFactory.create(config)
+            await provider.testConnection()
+
+            return { success: true, message: '连接测试成功' }
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : String(err)
+            return reply.code(400).send({
+                success: false,
+                error: 'CONNECTION_TEST_FAILED',
+                message: errorMessage
+            })
+        }
+    })
+
+    // 设置默认存储配置
+    fastify.post<{ Params: { id: string } }>('/:id/set-default', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const id = Number(request.params.id)
+        if (isNaN(id)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // 验证归属
+        const config = await db.getStorageConfigById(id)
+        if (!config) {
+            return reply.code(404).send(apiError(ErrorCode.STORAGE_CONFIG_NOT_FOUND))
+        }
+        // 管理员只管理系统层面，不参与用户存储配置操作
+        if (config.userId !== request.user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        try {
+            await db.setDefaultStorageConfig(request.user.id, id)
+            return { success: true, message: '已设为默认' }
+        } catch (err) {
+            fastify.log.error(err)
+            return reply.code(500).send(apiError(ErrorCode.STORAGE_CONFIG_UPDATE_FAILED))
+        }
+    })
+}
diff --git a/server/src/routes/system-config.ts b/server/src/routes/system-config.ts
new file mode 100644
index 0000000..8960014
--- /dev/null
+++ b/server/src/routes/system-config.ts
@@ -0,0 +1,661 @@
+/**
+ * 系统配置路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { hasAvailableMailOffering } from '../db/mail.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { testSmtpConnection, sendTestEmail, clearTransporterCache } from '../lib/mailer.js'
+import { logAdminAction } from '../lib/security.js'
+import { isSupportedInviteCostResource, serializeInviteCostOptions, type InviteCostOption } from '../lib/invite-pricing.js'
+
+interface UpdateConfigsBody {
+    configs: Array<{ key: string; value: string }>
+}
+
+interface PublicPromoPackagePlan {
+    id: number
+    name: string
+    description: string | null
+    cpu: number
+    memory: number
+    disk: number
+    trafficLimit: string
+    price: number
+    billingCycle: number
+    isSoldOut: boolean
+}
+
+interface PublicPromoPackage {
+    id: number
+    name: string
+    description: string | null
+    source: 'official' | 'market'
+    plans: PublicPromoPackagePlan[]
+}
+
+const MASKED_SECRET_PLACEHOLDER = '********'
+const telegramWebhookSecretPattern = /^[A-Za-z0-9_-]{1,256}$/
+const telegramGroupJoinModes = new Set(['any', 'all'])
+const maxRegisterGiftBalance = 99999999.99
+const maxRegisterGiftPoints = 2147483647
+const maxTransferFee = 100
+const decimalMoneyPattern = /^\d+(?:\.\d{1,2})?$/
+
+function isHttpImageUrl(value: string): boolean {
+    try {
+        const imageUrl = new URL(value)
+        return ['http:', 'https:'].includes(imageUrl.protocol)
+    } catch {
+        return false
+    }
+}
+
+export default async function systemConfigRoutes(fastify: FastifyInstance) {
+    // 获取公开的系统配置 (无需登录)
+    fastify.get('/public', {
+        config: { rateLimit: { max: 60, timeWindow: '1 minute' } }
+    }, async (_request: FastifyRequest, _reply: FastifyReply) => {
+        const [registrationEnabled, requireInviteCode, ticketEnabled, freeSiteMode, mailAvailable, turnstileEnabled, turnstileSiteKey, avatarApiBase, smtpEnabled, emailDomainWhitelistEnabled, emailAllowedDomains, transferFee, footerContactEmail, footerTelegramLink, hostingMarketEntryEnabled, hostingNotice, brandName, brandSubtitle, brandLogoUrl, popupAnnouncementConfig, popupPromoImageUrlConfig, popupPromoPackageIdConfig] = await Promise.all([
+            db.isRegistrationEnabled(),
+            db.isInviteCodeRequired(),
+            db.getSystemConfigBoolean('ticket_enabled', true),
+            db.getSystemConfigBoolean('free_site_mode', false),
+            hasAvailableMailOffering(),
+            db.getSystemConfigBoolean('turnstile_enabled', false),
+            db.getSystemConfig('turnstile_site_key'),
+            db.getSystemConfig('avatar_api_base'),
+            db.getSystemConfigBoolean('smtp_enabled', false),
+            db.getSystemConfigBoolean('email_domain_whitelist_enabled', false),
+            db.getSystemConfig('email_allowed_domains'),
+            db.getSystemConfigFloat('transfer_fee', 0),
+            db.getSystemConfig('footer_contact_email'),
+            db.getSystemConfig('footer_telegram_link'),
+            db.getSystemConfigBoolean('hosting_market_entry_enabled', true),
+            db.getSystemConfig('hosting_notice'),
+            db.getSystemConfig('brand_name'),
+            db.getSystemConfig('brand_subtitle'),
+            db.getSystemConfig('brand_logo_url'),
+            db.getSystemConfigValueWithUpdatedAt('popup_announcement'),
+            db.getSystemConfigValueWithUpdatedAt('popup_promo_image_url'),
+            db.getSystemConfigValueWithUpdatedAt('popup_promo_package_id')
+        ])
+
+        // 解析允许的邮箱域名列表
+        let allowedDomains: string[] | null = null
+        if (emailDomainWhitelistEnabled) {
+            const { DEFAULT_ALLOWED_DOMAINS } = await import('../lib/email-domain.js')
+            if (emailAllowedDomains) {
+                allowedDomains = emailAllowedDomains.split(',').map(d => d.trim().toLowerCase()).filter(d => d.length > 0)
+            } else {
+                allowedDomains = DEFAULT_ALLOWED_DOMAINS
+            }
+        }
+
+        const popupAnnouncement = popupAnnouncementConfig.value?.trim()
+        const popupPromoImageUrl = popupPromoImageUrlConfig.value?.trim()
+        const popupPromoPackageId = popupPromoPackageIdConfig.value?.trim()
+        let popupPromoPackage: PublicPromoPackage | null = null
+
+        if (popupPromoImageUrl && isHttpImageUrl(popupPromoImageUrl) && popupPromoPackageId) {
+            const packageId = Number(popupPromoPackageId)
+            if (Number.isInteger(packageId) && packageId > 0) {
+                const pkg = await db.prisma.package.findFirst({
+                    where: {
+                        id: packageId,
+                        active: true,
+                        globalShared: true
+                    },
+                    select: {
+                        id: true,
+                        name: true,
+                        description: true,
+                        user: {
+                            select: {
+                                role: true
+                            }
+                        },
+                        plans: {
+                            where: { isActive: true },
+                            select: {
+                                id: true,
+                                name: true,
+                                description: true,
+                                cpu: true,
+                                memory: true,
+                                disk: true,
+                                trafficLimit: true,
+                                price: true,
+                                billingCycle: true,
+                                isSoldOut: true
+                            },
+                            orderBy: [
+                                { isSoldOut: 'asc' },
+                                { sortOrder: 'asc' },
+                                { id: 'asc' }
+                            ],
+                            take: 3
+                        }
+                    }
+                })
+                if (pkg) {
+                    popupPromoPackage = {
+                        id: pkg.id,
+                        name: pkg.name,
+                        description: pkg.description,
+                        source: pkg.user.role === 'admin' ? 'official' : 'market',
+                        plans: pkg.plans.map(plan => ({
+                            id: plan.id,
+                            name: plan.name,
+                            description: plan.description,
+                            cpu: plan.cpu,
+                            memory: plan.memory,
+                            disk: plan.disk,
+                            trafficLimit: plan.trafficLimit.toString(),
+                            price: Number(plan.price),
+                            billingCycle: plan.billingCycle,
+                            isSoldOut: plan.isSoldOut
+                        }))
+                    }
+                }
+            }
+        }
+
+        return {
+            registrationEnabled,
+            requireInviteCode,
+            ticketEnabled,
+            freeSiteMode,
+            mailAvailable,
+            turnstileEnabled,
+            turnstileSiteKey: turnstileEnabled ? turnstileSiteKey : null,
+            avatarApiBase: avatarApiBase || 'https://api.dicebear.com/9.x',
+            emailVerificationEnabled: smtpEnabled,
+            emailDomainWhitelistEnabled,
+            allowedEmailDomains: allowedDomains,
+            transferFee,
+            footerContactEmail,
+            footerTelegramLink,
+            hostingMarketEntryEnabled,
+            hostingNotice,
+            brandName: brandName || 'Incudal',
+            brandSubtitle: brandSubtitle || '基于 Incus 的低价 NAT VPS',
+            brandLogoUrl: brandLogoUrl || '/incudal_logo.webp',
+            popupAnnouncement: popupAnnouncement ? popupAnnouncementConfig.value : null,
+            popupAnnouncementUpdatedAt: popupAnnouncement ? popupAnnouncementConfig.updatedAt : null,
+            popupPromoImageUrl: popupPromoPackage ? popupPromoImageUrl : null,
+            popupPromoPackage,
+            popupPromoUpdatedAt: popupPromoPackage
+                ? [popupPromoImageUrlConfig.updatedAt, popupPromoPackageIdConfig.updatedAt].filter(Boolean).sort().pop() || null
+                : null
+        }
+    })
+
+    // 获取所有系统配置 (管理员)
+    fastify.get('/', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (_request: FastifyRequest, _reply: FastifyReply) => {
+        const configs = await db.getAllSystemConfigs()
+        
+        // 如果 email_allowed_domains 为空，填充默认白名单域名
+        // 这样管理员可以看到实际生效的默认配置
+        const { DEFAULT_ALLOWED_DOMAINS } = await import('../lib/email-domain.js')
+        const processedConfigs = configs.map(c => {
+            if (c.key === 'email_allowed_domains' && !c.value) {
+                return { ...c, value: DEFAULT_ALLOWED_DOMAINS.join(',') }
+            }
+            return c
+        })
+        
+        return { configs: processedConfigs }
+    })
+
+    // 获取默认配额配置 (管理员)
+    fastify.get('/default-quota', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (_request: FastifyRequest, _reply: FastifyReply) => {
+        const quota = await db.getDefaultQuotaConfig()
+        return { quota }
+    })
+
+    // 批量更新配置 (管理员)
+    fastify.put<{ Body: UpdateConfigsBody }>('/', {
+        onRequest: [fastify.authenticateAdmin],
+        schema: {
+            body: {
+                type: 'object',
+                required: ['configs'],
+                properties: {
+                    configs: {
+                        type: 'array',
+                        items: {
+                            type: 'object',
+                            required: ['key', 'value'],
+                            properties: {
+                                key: { type: 'string' },
+                                value: { type: 'string' }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }, async (request: FastifyRequest<{ Body: UpdateConfigsBody }>, reply: FastifyReply) => {
+        const { configs } = request.body
+        const requestConfigMap = new Map(configs.map(config => [config.key, config]))
+
+        // 验证配置键是否合法
+        const validKeys = [
+            'default_quota_host',
+            'default_quota_friend',
+            'default_quota_package',
+            'registration_enabled',
+            'require_invite_code',
+            'invite_generation_costs',
+            'invite_default_expire_days',
+            'hosting_feature_enabled',
+            'hosting_market_entry_enabled',
+            'hosting_notice',
+            'ticket_enabled',
+            'free_site_mode',
+            'free_site_register_gift_enabled',
+            'free_site_register_gift_balance',
+            'free_site_register_gift_points',
+            'brand_name',
+            'brand_subtitle',
+            'brand_logo_url',
+            'popup_announcement',
+            'popup_promo_image_url',
+            'popup_promo_package_id',
+            'turnstile_enabled',
+            'turnstile_site_key',
+            'turnstile_secret_key',
+            'avatar_api_base',
+            'footer_contact_email',
+            'footer_telegram_link',
+            // Telegram bot binding
+            'telegram_bot_enabled',
+            'telegram_bot_username',
+            'telegram_bot_token',
+            'telegram_webhook_secret',
+            'telegram_group_join_enabled',
+            'telegram_group_chat_id',
+            'telegram_group_join_mode',
+            'telegram_group_min_recharge',
+            'telegram_group_min_consume',
+            'telegram_group_invite_expire_minutes',
+            'telegram_vip_group_join_enabled',
+            'telegram_vip_group_chat_id',
+            'telegram_vip_group_join_mode',
+            'telegram_vip_group_min_recharge',
+            'telegram_vip_group_min_consume',
+            'telegram_vip_group_invite_expire_minutes',
+            // SMTP configuration
+            'smtp_enabled',
+            'smtp_host',
+            'smtp_port',
+            'smtp_secure',
+            'smtp_username',
+            'smtp_password',
+            'smtp_from_email',
+            'smtp_from_name',
+            // Email domain whitelist
+            'email_domain_whitelist_enabled',
+            'email_allowed_domains',
+            // Transfer fee
+            'transfer_fee',
+            // Ticket image Lsky config
+            'ticket_image_lsky_base_url',
+            'ticket_image_lsky_token',
+            'ticket_image_lsky_api_version',
+            'ticket_image_lsky_target_id'
+        ]
+
+        // 布尔类型配置键
+        const booleanKeys = ['registration_enabled', 'require_invite_code', 'hosting_feature_enabled', 'hosting_market_entry_enabled', 'ticket_enabled', 'free_site_mode', 'free_site_register_gift_enabled', 'turnstile_enabled', 'telegram_bot_enabled', 'telegram_group_join_enabled', 'telegram_vip_group_join_enabled', 'smtp_enabled', 'smtp_secure', 'email_domain_whitelist_enabled']
+        // 字符串类型配置键
+        const stringKeys = [
+            'turnstile_site_key',
+            'turnstile_secret_key',
+            'avatar_api_base',
+            'footer_contact_email',
+            'footer_telegram_link',
+            'brand_name',
+            'brand_subtitle',
+            'brand_logo_url',
+            'telegram_bot_username',
+            'telegram_bot_token',
+            'telegram_webhook_secret',
+            'telegram_group_chat_id',
+            'telegram_group_join_mode',
+            'telegram_vip_group_chat_id',
+            'telegram_vip_group_join_mode',
+            'hosting_notice',
+            'popup_announcement',
+            'popup_promo_image_url',
+            'popup_promo_package_id',
+            'smtp_host',
+            'smtp_username',
+            'smtp_password',
+            'smtp_from_email',
+            'smtp_from_name',
+            'email_allowed_domains',
+            'ticket_image_lsky_base_url',
+            'ticket_image_lsky_token',
+            'ticket_image_lsky_api_version',
+            'ticket_image_lsky_target_id'
+        ]
+        const jsonKeys = ['invite_generation_costs']
+        // 数字类型配置键（包括配额配置）
+        const numberKeys = ['smtp_port', 'default_quota_host', 'default_quota_friend', 'default_quota_package', 'free_site_register_gift_points', 'invite_default_expire_days', 'telegram_group_invite_expire_minutes', 'telegram_vip_group_invite_expire_minutes']
+        const decimalKeys = ['free_site_register_gift_balance', 'telegram_group_min_recharge', 'telegram_group_min_consume', 'telegram_vip_group_min_recharge', 'telegram_vip_group_min_consume']
+
+        for (const config of configs) {
+            if (!validKeys.includes(config.key)) {
+                return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_KEY, config.key))
+            }
+            // 布尔类型配置
+            if (booleanKeys.includes(config.key)) {
+                if (config.value !== 'true' && config.value !== 'false') {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                continue
+            }
+            // 字符串类型配置（允许空值）
+            if (stringKeys.includes(config.key)) {
+                if (config.key === 'popup_announcement' && config.value.length > 5000) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if (config.key === 'brand_name') {
+                    config.value = config.value.trim()
+                    if (config.value.length > 200) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                }
+                if (config.key === 'brand_subtitle') {
+                    config.value = config.value.trim()
+                    if (config.value.length > 300) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                }
+                if (config.key === 'brand_logo_url') {
+                    config.value = config.value.trim()
+                    if (config.value && config.value.length > 1000) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                    if (config.value && !isHttpImageUrl(config.value) && !config.value.startsWith('/')) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                }
+                if (config.key === 'popup_promo_image_url') {
+                    config.value = config.value.trim()
+                    if (config.value && config.value.length > 1000) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                    if (config.value && !isHttpImageUrl(config.value)) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                }
+                if (config.key === 'popup_promo_package_id') {
+                    config.value = config.value.trim()
+                }
+                if (config.key === 'popup_promo_package_id' && config.value) {
+                    const packageId = Number(config.value)
+                    if (!Number.isInteger(packageId) || packageId <= 0) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                    const pkg = await db.prisma.package.findFirst({
+                        where: { id: packageId, active: true, globalShared: true },
+                        select: { id: true }
+                    })
+                    if (!pkg) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+                }
+                if (config.key === 'ticket_image_lsky_api_version' && !['v1', 'v2'].includes(config.value)) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if ((config.key === 'telegram_group_join_mode' || config.key === 'telegram_vip_group_join_mode') && !telegramGroupJoinModes.has(config.value)) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if (
+                    config.key === 'telegram_webhook_secret' &&
+                    config.value &&
+                    config.value !== MASKED_SECRET_PLACEHOLDER &&
+                    !telegramWebhookSecretPattern.test(config.value)
+                ) {
+                    return reply.code(400).send({
+                        error: 'Telegram webhook secret can only contain letters, numbers, underscores, and hyphens',
+                        code: 'TELEGRAM_WEBHOOK_SECRET_INVALID'
+                    })
+                }
+                continue
+            }
+            if (jsonKeys.includes(config.key)) {
+                if (config.key === 'invite_generation_costs') {
+                    let parsed: unknown
+                    try {
+                        parsed = JSON.parse(config.value)
+                    } catch {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+
+                    if (!Array.isArray(parsed)) {
+                        return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                    }
+
+                    const options: InviteCostOption[] = []
+                    for (const item of parsed) {
+                        if (!item || typeof item !== 'object') {
+                            return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                        }
+                        const resource = String((item as { resource?: unknown }).resource || '').trim()
+                        if (!isSupportedInviteCostResource(resource)) {
+                            return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                        }
+                        const amount = Number((item as { amount?: unknown }).amount)
+                        if (!Number.isFinite(amount) || amount < 0) {
+                            return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                        }
+                        if (resource === 'balance' && amount > maxRegisterGiftBalance) {
+                            return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                        }
+                        if (resource === 'points' && (!Number.isInteger(amount) || amount > maxRegisterGiftPoints)) {
+                            return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                        }
+                        options.push({
+                            resource,
+                            amount,
+                            enabled: (item as { enabled?: unknown }).enabled === true
+                        })
+                    }
+
+                    config.value = serializeInviteCostOptions(options)
+                }
+                continue
+            }
+            if (decimalKeys.includes(config.key)) {
+                const num = Number(config.value)
+                if (isNaN(num) || num < 0) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if (config.key === 'free_site_register_gift_balance' && num > maxRegisterGiftBalance) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                config.value = (Math.round(num * 100) / 100).toString()
+                continue
+            }
+            // 转移手续费特殊验证（0-100，支持两位小数）
+            if (config.key === 'transfer_fee') {
+                const value = config.value.trim()
+                const num = Number(value)
+                if (!decimalMoneyPattern.test(value) || !Number.isFinite(num) || num < 0 || num > maxTransferFee) {
+                    return reply.code(400).send(apiError(
+                        ErrorCode.CONFIG_INVALID_VALUE,
+                        `转移手续费必须在 0-${maxTransferFee} 元之间，最多支持两位小数`
+                    ))
+                }
+                config.value = (Math.round(num * 100) / 100).toString()
+                continue
+            }
+            // 数字类型配置（smtp_port 等）
+            if (numberKeys.includes(config.key)) {
+                const num = Number(config.value)
+                if (!Number.isInteger(num) || num < 0) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if (config.key === 'free_site_register_gift_points' && num > maxRegisterGiftPoints) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if ((config.key === 'telegram_group_invite_expire_minutes' || config.key === 'telegram_vip_group_invite_expire_minutes') && (num < 1 || num > 10080)) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                if (config.key === 'invite_default_expire_days' && num > 3650) {
+                    return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+                }
+                config.value = num.toString()
+                continue
+            }
+            // 验证数值类型（默认配额等）
+            const num = parseInt(config.value, 10)
+            if (isNaN(num) || num < 0) {
+                return reply.code(400).send(apiError(ErrorCode.CONFIG_INVALID_VALUE, config.key))
+            }
+        }
+
+        const freeSiteConfig = requestConfigMap.get('free_site_mode')
+        const nextFreeSiteMode = freeSiteConfig
+            ? freeSiteConfig.value === 'true'
+            : await db.getSystemConfigBoolean('free_site_mode', false)
+        const ensureConfigValue = (key: string, value: string) => {
+            const existing = requestConfigMap.get(key)
+            if (existing) {
+                existing.value = value
+            } else {
+                const config = { key, value }
+                configs.push(config)
+                requestConfigMap.set(key, config)
+            }
+        }
+
+        if (!nextFreeSiteMode) {
+            ensureConfigValue('free_site_register_gift_enabled', 'false')
+            ensureConfigValue('free_site_register_gift_balance', '0')
+            ensureConfigValue('free_site_register_gift_points', '0')
+        } else {
+            const giftEnabledConfig = requestConfigMap.get('free_site_register_gift_enabled')
+            const nextGiftEnabled = giftEnabledConfig
+                ? giftEnabledConfig.value === 'true'
+                : await db.getSystemConfigBoolean('free_site_register_gift_enabled', false)
+            if (!nextGiftEnabled) {
+                ensureConfigValue('free_site_register_gift_balance', '0')
+                ensureConfigValue('free_site_register_gift_points', '0')
+            }
+        }
+
+        await db.updateSystemConfigs(configs)
+
+        // Clear SMTP transporter cache if SMTP configs changed
+        const smtpConfigKeys = ['smtp_enabled', 'smtp_host', 'smtp_port', 'smtp_secure', 'smtp_username', 'smtp_password', 'smtp_from_email', 'smtp_from_name']
+        if (configs.some(c => smtpConfigKeys.includes(c.key))) {
+            clearTransporterCache()
+        }
+
+        await createLog(
+            request.user.id,
+            'system',
+            'system.config_update',
+            `Updated ${configs.length} system configurations`,
+            'success'
+        )
+
+        // AUTH003: 管理员操作审计日志 - 系统配置是敏感操作
+        // 过滤敏感字段，不记录密码和密钥
+        const sensitiveKeys = [
+            'turnstile_secret_key',
+            'smtp_password',
+            'ticket_image_lsky_token',
+            'telegram_bot_token',
+            'telegram_webhook_secret'
+        ]
+        const safeConfigs = configs.map(c => ({
+            key: c.key,
+            value: sensitiveKeys.includes(c.key) ? '***REDACTED***' : c.value
+        }))
+        await logAdminAction(request.user.id, 'system.config_update', {
+            ip: request.ip,
+            userAgent: request.headers['user-agent'],
+            resourceType: 'system_config',
+            newValue: safeConfigs,
+            metadata: { configCount: configs.length }
+        })
+
+        return { message: 'Config updated' }
+    })
+
+    // Test SMTP connection (admin)
+    fastify.post('/smtp/test', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (request: FastifyRequest, reply: FastifyReply) => {
+        const result = await testSmtpConnection()
+
+        if (result.success) {
+            await createLog(
+                request.user.id,
+                'system',
+                'smtp.test',
+                'SMTP connection test successful',
+                'success'
+            )
+            return { success: true, message: 'SMTP connection successful' }
+        } else {
+            await createLog(
+                request.user.id,
+                'system',
+                'smtp.test',
+                `SMTP connection test failed: ${result.error}`,
+                'failed'
+            )
+            return reply.code(400).send({ success: false, error: result.error })
+        }
+    })
+
+    // Send test email (admin)
+    fastify.post<{ Body: { to: string } }>('/smtp/send-test', {
+        onRequest: [fastify.authenticateAdmin],
+        schema: {
+            body: {
+                type: 'object',
+                required: ['to'],
+                properties: {
+                    to: { type: 'string', format: 'email' }
+                }
+            }
+        }
+    }, async (request: FastifyRequest<{ Body: { to: string } }>, reply: FastifyReply) => {
+        const { to } = request.body
+        const result = await sendTestEmail(to)
+
+        if (result.success) {
+            await createLog(
+                request.user.id,
+                'system',
+                'smtp.send_test',
+                `Test email sent to ${to}`,
+                'success'
+            )
+            return { success: true, message: `Test email sent to ${to}` }
+        } else {
+            await createLog(
+                request.user.id,
+                'system',
+                'smtp.send_test',
+                `Failed to send test email to ${to}: ${result.error}`,
+                'failed'
+            )
+            return reply.code(400).send({ success: false, error: result.error })
+        }
+    })
+}
diff --git a/server/src/routes/telegram.ts b/server/src/routes/telegram.ts
new file mode 100644
index 0000000..0021980
--- /dev/null
+++ b/server/src/routes/telegram.ts
@@ -0,0 +1,977 @@
+/**
+ * Telegram 专用机器人路由
+ * 负责账号绑定、Webhook 管理和私有群入群申请。
+ */
+
+import { createHash, randomBytes, timingSafeEqual } from 'crypto'
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+
+interface TelegramWebhookUser {
+  id: number
+  username?: string
+  first_name?: string
+  last_name?: string
+}
+
+interface TelegramWebhookUpdate {
+  message?: {
+    chat?: {
+      id: number
+      type?: string
+    }
+    from?: TelegramWebhookUser
+    text?: string
+  }
+}
+
+interface TelegramBotConfig {
+  enabled: boolean
+  configured: boolean
+  botUsername: string | null
+  botToken: string | null
+  webhookSecret: string | null
+  group: TelegramGroupConfig
+  vipGroup: TelegramGroupConfig
+}
+
+type TelegramGroupJoinMode = 'any' | 'all'
+type TelegramGroupJoinTarget = 'normal' | 'vip'
+
+interface TelegramGroupConfig {
+  enabled: boolean
+  configured: boolean
+  chatId: string | null
+  joinMode: TelegramGroupJoinMode
+  minRecharge: number
+  minConsume: number
+  inviteExpireMinutes: number
+}
+
+interface TelegramApiResponse<T> {
+  ok: boolean
+  result?: T
+  description?: string
+  error_code?: number
+}
+
+interface TelegramWebhookInfo {
+  url: string
+  has_custom_certificate?: boolean
+  pending_update_count?: number
+  last_error_date?: number
+  last_error_message?: string
+  max_connections?: number
+  allowed_updates?: string[]
+}
+
+interface TelegramAdminBindingsQuery {
+  page?: string
+  pageSize?: string
+  search?: string
+}
+
+interface TelegramAdminBindingParams {
+  id: string
+}
+
+interface TelegramInviteLinkResult {
+  invite_link: string
+}
+
+interface TelegramChatMember {
+  status: string
+}
+
+interface TelegramBotCommand {
+  command: string
+  description: string
+}
+
+const bindTokenPrefix = 'bind_'
+const bindTokenTtlMs = 10 * 60 * 1000
+const telegramWebhookSecretPattern = /^[A-Za-z0-9_-]{1,256}$/
+const telegramBotCommands: TelegramBotCommand[] = [
+  { command: 'start', description: '绑定站内账号或查看使用说明' },
+  { command: 'join', description: '申请加入普通用户群' },
+  { command: 'join_vip', description: '申请加入高级用户群' }
+]
+const telegramGroupCommandAliases = ['join', 'group', 'apply_group']
+const telegramGroupCommands = new Set(telegramGroupCommandAliases.map(command => `/${command}`))
+const telegramVipGroupCommands = new Set(['/join_vip'])
+
+function hashToken(token: string): string {
+  return createHash('sha256').update(token).digest('hex')
+}
+
+function secureEquals(a: string, b: string): boolean {
+  const aBuffer = Buffer.from(a)
+  const bBuffer = Buffer.from(b)
+  if (aBuffer.length !== bBuffer.length) {
+    return false
+  }
+  return timingSafeEqual(aBuffer, bBuffer)
+}
+
+function normalizeBotUsername(value: string | null): string | null {
+  const username = value?.trim().replace(/^@/, '')
+  return username || null
+}
+
+function isValidTelegramWebhookSecret(value: string): boolean {
+  return telegramWebhookSecretPattern.test(value)
+}
+
+function parseNonNegativeAmount(value: string | null, fallback = 0): number {
+  const amount = Number.parseFloat(value || '')
+  if (!Number.isFinite(amount) || amount < 0) {
+    return fallback
+  }
+  return Math.round(amount * 100) / 100
+}
+
+function parseInviteExpireMinutes(value: string | null): number {
+  const minutes = Number.parseInt(value || '', 10)
+  if (!Number.isFinite(minutes)) {
+    return 30
+  }
+  return Math.min(Math.max(minutes, 1), 10080)
+}
+
+function normalizeGroupJoinMode(value: string | null): TelegramGroupJoinMode {
+  return value === 'all' ? 'all' : 'any'
+}
+
+function buildTelegramGroupConfig(
+  enabled: boolean,
+  chatIdValue: string | null,
+  joinModeValue: string | null,
+  minRechargeValue: string | null,
+  minConsumeValue: string | null,
+  inviteExpireMinutesValue: string | null
+): TelegramGroupConfig {
+  const chatId = chatIdValue?.trim() || null
+  return {
+    enabled,
+    configured: Boolean(enabled && chatId),
+    chatId,
+    joinMode: normalizeGroupJoinMode(joinModeValue),
+    minRecharge: parseNonNegativeAmount(minRechargeValue),
+    minConsume: parseNonNegativeAmount(minConsumeValue),
+    inviteExpireMinutes: parseInviteExpireMinutes(inviteExpireMinutesValue)
+  }
+}
+
+async function getTelegramBotConfig(): Promise<TelegramBotConfig> {
+  const [
+    enabled,
+    botUsernameValue,
+    botToken,
+    webhookSecret,
+    groupEnabled,
+    groupChatIdValue,
+    groupJoinModeValue,
+    groupMinRechargeValue,
+    groupMinConsumeValue,
+    groupInviteExpireMinutesValue,
+    vipGroupEnabled,
+    vipGroupChatIdValue,
+    vipGroupJoinModeValue,
+    vipGroupMinRechargeValue,
+    vipGroupMinConsumeValue,
+    vipGroupInviteExpireMinutesValue
+  ] = await Promise.all([
+    db.getSystemConfigBoolean('telegram_bot_enabled', false),
+    db.getSystemConfig('telegram_bot_username'),
+    db.getSystemConfig('telegram_bot_token'),
+    db.getSystemConfig('telegram_webhook_secret'),
+    db.getSystemConfigBoolean('telegram_group_join_enabled', false),
+    db.getSystemConfig('telegram_group_chat_id'),
+    db.getSystemConfig('telegram_group_join_mode'),
+    db.getSystemConfig('telegram_group_min_recharge'),
+    db.getSystemConfig('telegram_group_min_consume'),
+    db.getSystemConfig('telegram_group_invite_expire_minutes'),
+    db.getSystemConfigBoolean('telegram_vip_group_join_enabled', false),
+    db.getSystemConfig('telegram_vip_group_chat_id'),
+    db.getSystemConfig('telegram_vip_group_join_mode'),
+    db.getSystemConfig('telegram_vip_group_min_recharge'),
+    db.getSystemConfig('telegram_vip_group_min_consume'),
+    db.getSystemConfig('telegram_vip_group_invite_expire_minutes')
+  ])
+  const botUsername = normalizeBotUsername(botUsernameValue)
+  const webhookSecretValue = webhookSecret?.trim() || null
+  const group = buildTelegramGroupConfig(
+    groupEnabled,
+    groupChatIdValue,
+    groupJoinModeValue,
+    groupMinRechargeValue,
+    groupMinConsumeValue,
+    groupInviteExpireMinutesValue
+  )
+  const vipGroup = buildTelegramGroupConfig(
+    vipGroupEnabled,
+    vipGroupChatIdValue,
+    vipGroupJoinModeValue,
+    vipGroupMinRechargeValue,
+    vipGroupMinConsumeValue,
+    vipGroupInviteExpireMinutesValue
+  )
+
+  return {
+    enabled,
+    configured: Boolean(enabled && botUsername && botToken && webhookSecretValue && isValidTelegramWebhookSecret(webhookSecretValue)),
+    botUsername,
+    botToken,
+    webhookSecret: webhookSecretValue,
+    group,
+    vipGroup
+  }
+}
+
+async function sendTelegramMessage(botToken: string, chatId: number, text: string): Promise<boolean> {
+  const response = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      chat_id: chatId,
+      text
+    })
+  })
+
+  return response.ok
+}
+
+async function callTelegramApi<T>(
+  botToken: string,
+  method: string,
+  payload?: Record<string, unknown>
+): Promise<TelegramApiResponse<T>> {
+  const response = await fetch(`https://api.telegram.org/bot${botToken}/${method}`, {
+    method: payload ? 'POST' : 'GET',
+    headers: payload ? { 'Content-Type': 'application/json' } : undefined,
+    body: payload ? JSON.stringify(payload) : undefined
+  })
+  const data = await response.json().catch(() => null)
+
+  if (!data || typeof data !== 'object') {
+    return {
+      ok: false,
+      description: `Telegram API returned HTTP ${response.status}`,
+      error_code: response.status
+    }
+  }
+
+  return data as TelegramApiResponse<T>
+}
+
+async function syncTelegramBotCommands(botToken: string): Promise<TelegramApiResponse<boolean>> {
+  return callTelegramApi<boolean>(botToken, 'setMyCommands', {
+    commands: telegramBotCommands
+  })
+}
+
+function normalizeWebhookBaseUrl(value: string): string | null {
+  try {
+    const url = new URL(value)
+    if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+      return null
+    }
+    return `${url.protocol}//${url.host}`
+  } catch {
+    return null
+  }
+}
+
+function firstHeaderValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] || null
+  }
+  return value || null
+}
+
+function buildWebhookUrl(request: FastifyRequest, baseUrl?: string): string | null {
+  const explicitBaseUrl = baseUrl ? normalizeWebhookBaseUrl(baseUrl) : null
+  if (explicitBaseUrl) {
+    return `${explicitBaseUrl}/api/telegram/webhook`
+  }
+
+  const configuredBaseUrl = (process.env.SITE_URL || process.env.FRONTEND_URL?.split(',')[0])?.trim()
+  if (configuredBaseUrl) {
+    const normalized = normalizeWebhookBaseUrl(configuredBaseUrl)
+    if (normalized) {
+      return `${normalized}/api/telegram/webhook`
+    }
+  }
+
+  const forwardedProto = firstHeaderValue(request.headers['x-forwarded-proto'])
+  const forwardedHost = firstHeaderValue(request.headers['x-forwarded-host'])
+  const host = forwardedHost || firstHeaderValue(request.headers.host) || request.hostname
+  const proto = forwardedProto || request.protocol
+  const normalized = normalizeWebhookBaseUrl(`${proto}://${host}`)
+  return normalized ? `${normalized}/api/telegram/webhook` : null
+}
+
+function normalizeTelegramCommand(text: string): string {
+  return text.trim().split(/\s+/)[0].replace(/@\w+$/, '').toLowerCase()
+}
+
+function getGroupJoinTarget(text: string): TelegramGroupJoinTarget | null {
+  const normalized = text.trim().toLowerCase()
+  if (/^\/start\s+(join|group|apply_group)$/.test(normalized)) {
+    return 'normal'
+  }
+  if (/^\/start\s+join_vip$/.test(normalized)) {
+    return 'vip'
+  }
+  const command = normalizeTelegramCommand(text)
+  if (telegramGroupCommands.has(command)) {
+    return 'normal'
+  }
+  if (telegramVipGroupCommands.has(command)) {
+    return 'vip'
+  }
+  return null
+}
+
+function formatMoney(value: number): string {
+  return value.toFixed(2)
+}
+
+function parsePositiveInteger(value: string | undefined, fallback: number, max: number): number {
+  const parsed = Number.parseInt(value || '', 10)
+  if (!Number.isFinite(parsed) || parsed < 1) {
+    return fallback
+  }
+  return Math.min(parsed, max)
+}
+
+function evaluateGroupEligibility(
+  stats: { totalRecharge: number; totalConsume: number },
+  group: TelegramGroupConfig
+): { eligible: boolean; message: string } {
+  const rechargeRequired = group.minRecharge > 0
+  const consumeRequired = group.minConsume > 0
+
+  if (!rechargeRequired && !consumeRequired) {
+    return {
+      eligible: true,
+      message: '当前未设置金额门槛。'
+    }
+  }
+
+  const rechargePassed = !rechargeRequired || stats.totalRecharge >= group.minRecharge
+  const consumePassed = !consumeRequired || stats.totalConsume >= group.minConsume
+  const eligible = group.joinMode === 'all'
+    ? rechargePassed && consumePassed
+    : (rechargeRequired && rechargePassed) || (consumeRequired && consumePassed)
+  const requirements = [
+    rechargeRequired ? `累计充值 ¥${formatMoney(group.minRecharge)}（当前 ¥${formatMoney(stats.totalRecharge)}）` : null,
+    consumeRequired ? `累计消费 ¥${formatMoney(group.minConsume)}（当前 ¥${formatMoney(stats.totalConsume)}）` : null
+  ].filter(Boolean)
+
+  return {
+    eligible,
+    message: `${group.joinMode === 'all' ? '需同时满足' : '满足任一即可'}：${requirements.join('；')}`
+  }
+}
+
+function buildAdminGroupEligibility(
+  stats: { totalRecharge: number; totalConsume: number },
+  group: TelegramGroupConfig,
+  groupName = '私有群'
+): {
+  eligible: boolean
+  status: 'eligible' | 'ineligible' | 'disabled' | 'unconfigured'
+  message: string
+  joinMode: TelegramGroupJoinMode
+  minRecharge: number
+  minConsume: number
+} {
+  if (!group.enabled) {
+    return {
+      eligible: false,
+      status: 'disabled',
+      message: `${groupName}入群申请未启用。`,
+      joinMode: group.joinMode,
+      minRecharge: group.minRecharge,
+      minConsume: group.minConsume
+    }
+  }
+
+  if (!group.configured) {
+    return {
+      eligible: false,
+      status: 'unconfigured',
+      message: `${groupName} Chat ID 未配置。`,
+      joinMode: group.joinMode,
+      minRecharge: group.minRecharge,
+      minConsume: group.minConsume
+    }
+  }
+
+  const eligibility = evaluateGroupEligibility(stats, group)
+  return {
+    eligible: eligibility.eligible,
+    status: eligibility.eligible ? 'eligible' : 'ineligible',
+    message: eligibility.message,
+    joinMode: group.joinMode,
+    minRecharge: group.minRecharge,
+    minConsume: group.minConsume
+  }
+}
+
+export default async function telegramRoutes(fastify: FastifyInstance) {
+  const telegramBindingModel = (prisma as any).userTelegramBinding
+  const telegramBindTokenModel = (prisma as any).telegramBindToken
+
+  async function notifyTelegram(botToken: string, chatId: number, text: string): Promise<void> {
+    try {
+      const sent = await sendTelegramMessage(botToken, chatId, text)
+      if (!sent) {
+        fastify.log.warn({ chatId }, 'Telegram message API returned non-OK response')
+      }
+    } catch (error) {
+      fastify.log.warn({ err: error, chatId }, 'Failed to send Telegram message')
+    }
+  }
+
+  function serializeGroupConfig(group: TelegramGroupConfig) {
+    return {
+      enabled: group.enabled,
+      configured: group.configured,
+      joinMode: group.joinMode,
+      minRecharge: group.minRecharge,
+      minConsume: group.minConsume
+    }
+  }
+
+  async function buildAdminBindingView(binding: any, group: TelegramGroupConfig, vipGroup: TelegramGroupConfig) {
+    const stats = await db.getUserConsumeStats(binding.userId)
+    const eligibility = buildAdminGroupEligibility(stats, group, '普通群')
+    const vipEligibility = buildAdminGroupEligibility(stats, vipGroup, '高级群')
+
+    return {
+      id: binding.id,
+      userId: binding.userId,
+      user: binding.user ? {
+        id: binding.user.id,
+        username: binding.user.username,
+        email: binding.user.email,
+        status: binding.user.status
+      } : null,
+      telegramUserId: binding.telegramUserId,
+      telegramUsername: binding.telegramUsername,
+      firstName: binding.firstName,
+      lastName: binding.lastName,
+      boundAt: binding.boundAt.toISOString(),
+      updatedAt: binding.updatedAt.toISOString(),
+      stats: {
+        totalRecharge: stats.totalRecharge,
+        totalConsume: stats.totalConsume,
+        totalRefund: stats.totalRefund,
+        totalDestroyedValue: stats.totalDestroyedValue
+      },
+      eligibility,
+      vipEligibility
+    }
+  }
+
+  async function isTelegramUserInGroup(
+    botToken: string,
+    groupChatId: string,
+    telegramUserId: number
+  ): Promise<boolean | null> {
+    const response = await callTelegramApi<TelegramChatMember>(botToken, 'getChatMember', {
+      chat_id: groupChatId,
+      user_id: telegramUserId
+    })
+
+    if (!response.ok || !response.result) {
+      return null
+    }
+
+    return !['left', 'kicked'].includes(response.result.status)
+  }
+
+  async function createGroupInviteLink(
+    botToken: string,
+    group: TelegramGroupConfig,
+    inviteName: string
+  ): Promise<{ inviteLink?: string; error?: string; errorCode?: number }> {
+    if (!group.chatId) {
+      return { error: 'Telegram group chat ID is not configured' }
+    }
+
+    const expireDate = Math.floor(Date.now() / 1000) + group.inviteExpireMinutes * 60
+    const response = await callTelegramApi<TelegramInviteLinkResult>(botToken, 'createChatInviteLink', {
+      chat_id: group.chatId,
+      expire_date: expireDate,
+      member_limit: 1,
+      name: inviteName
+    })
+
+    if (!response.ok || !response.result?.invite_link) {
+      return {
+        error: response.description || 'Telegram invite link creation failed',
+        errorCode: response.error_code
+      }
+    }
+
+    return { inviteLink: response.result.invite_link }
+  }
+
+  async function handleGroupJoinRequest(
+    config: TelegramBotConfig,
+    chatId: number,
+    from: TelegramWebhookUser,
+    chatType: string | undefined,
+    target: TelegramGroupJoinTarget
+  ): Promise<void> {
+    if (!config.botToken) {
+      return
+    }
+
+    const group = target === 'vip' ? config.vipGroup : config.group
+    const groupName = target === 'vip' ? '高级用户群' : '普通用户群'
+    const command = target === 'vip' ? '/join_vip' : '/join'
+    const inviteName = target === 'vip' ? 'Incudal VIP access' : 'Incudal user access'
+
+    if (chatType && chatType !== 'private') {
+      await notifyTelegram(config.botToken, chatId, `请私聊机器人发送 ${command} 申请${groupName}，避免邀请链接泄露到群聊。`)
+      return
+    }
+
+    if (!group.enabled || !group.configured) {
+      await notifyTelegram(config.botToken, chatId, `${groupName}申请暂未开放，请稍后再试或联系管理员。`)
+      return
+    }
+
+    const telegramUserId = String(from.id)
+    const binding = await telegramBindingModel.findUnique({
+      where: { telegramUserId },
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true,
+            status: true
+          }
+        }
+      }
+    })
+
+    if (!binding?.user) {
+      await notifyTelegram(config.botToken, chatId, `请先登录网站，在个人设置里完成 Telegram 绑定后再发送 ${command}。`)
+      return
+    }
+
+    if (binding.user.status !== 'active') {
+      await notifyTelegram(config.botToken, chatId, '你的站内账号当前不可用，暂不能申请入群。')
+      return
+    }
+
+    const stats = await db.getUserConsumeStats(binding.user.id)
+    const eligibility = evaluateGroupEligibility(stats, group)
+    if (!eligibility.eligible) {
+      await notifyTelegram(
+        config.botToken,
+        chatId,
+        `暂未达到${groupName}入群条件。\n${eligibility.message}`
+      )
+      return
+    }
+
+    if (group.chatId) {
+      const alreadyInGroup = await isTelegramUserInGroup(config.botToken, group.chatId, from.id)
+      if (alreadyInGroup) {
+        await notifyTelegram(config.botToken, chatId, `你已经在${groupName}内，无需重复申请。`)
+        return
+      }
+    }
+
+    const inviteResult = await createGroupInviteLink(config.botToken, group, inviteName)
+    if (!inviteResult.inviteLink) {
+      fastify.log.warn(
+        { err: inviteResult.error, errorCode: inviteResult.errorCode },
+        'Telegram group invite link creation failed'
+      )
+      await notifyTelegram(config.botToken, chatId, '生成邀请链接失败，请联系管理员检查机器人群管理员权限。')
+      return
+    }
+
+    await notifyTelegram(
+      config.botToken,
+      chatId,
+      `已达标，可以加入${groupName}。\n${eligibility.message}\n\n一次性邀请链接：${inviteResult.inviteLink}\n有效期：${group.inviteExpireMinutes} 分钟。`
+    )
+  }
+
+  fastify.get('/admin/webhook/info', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (_request: FastifyRequest, reply: FastifyReply) => {
+    const config = await getTelegramBotConfig()
+    if (!config.botToken) {
+      return reply.code(400).send({ error: 'Telegram bot token is not configured' })
+    }
+
+    const telegramResponse = await callTelegramApi<TelegramWebhookInfo>(config.botToken, 'getWebhookInfo')
+    if (!telegramResponse.ok) {
+      return reply.code(502).send({
+        error: telegramResponse.description || 'Telegram webhook info request failed',
+        errorCode: telegramResponse.error_code
+      })
+    }
+
+    return {
+      info: telegramResponse.result
+    }
+  })
+
+  fastify.post<{ Body: { baseUrl?: string } }>('/admin/webhook/setup', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          baseUrl: { type: 'string', minLength: 1 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: { baseUrl?: string } }>, reply: FastifyReply) => {
+    const config = await getTelegramBotConfig()
+    if (!config.botToken) {
+      return reply.code(400).send({ error: 'Telegram bot token is not configured' })
+    }
+    if (!config.webhookSecret) {
+      return reply.code(400).send({ error: 'Telegram webhook secret is not configured' })
+    }
+    if (!isValidTelegramWebhookSecret(config.webhookSecret)) {
+      return reply.code(400).send({
+        error: 'Telegram webhook secret can only contain letters, numbers, underscores, and hyphens',
+        code: 'TELEGRAM_WEBHOOK_SECRET_INVALID'
+      })
+    }
+
+    const webhookUrl = buildWebhookUrl(request, request.body?.baseUrl)
+    if (!webhookUrl) {
+      return reply.code(400).send({ error: 'Unable to build Telegram webhook URL' })
+    }
+
+    const telegramResponse = await callTelegramApi<boolean>(config.botToken, 'setWebhook', {
+      url: webhookUrl,
+      secret_token: config.webhookSecret,
+      allowed_updates: ['message']
+    })
+    if (!telegramResponse.ok) {
+      return reply.code(502).send({
+        error: telegramResponse.description || 'Telegram webhook setup failed',
+        errorCode: telegramResponse.error_code,
+        webhookUrl
+      })
+    }
+
+    const commandsResponse = await syncTelegramBotCommands(config.botToken)
+    if (!commandsResponse.ok) {
+      return reply.code(502).send({
+        error: commandsResponse.description || 'Telegram bot command setup failed',
+        errorCode: commandsResponse.error_code,
+        webhookUrl,
+        webhookConfigured: true
+      })
+    }
+
+    return {
+      message: 'Telegram webhook configured',
+      webhookUrl,
+      commandsSynced: true,
+      commands: telegramBotCommands,
+      result: telegramResponse.result
+    }
+  })
+
+  fastify.post('/admin/webhook/delete', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (_request: FastifyRequest, reply: FastifyReply) => {
+    const config = await getTelegramBotConfig()
+    if (!config.botToken) {
+      return reply.code(400).send({ error: 'Telegram bot token is not configured' })
+    }
+
+    const telegramResponse = await callTelegramApi<boolean>(config.botToken, 'deleteWebhook')
+    if (!telegramResponse.ok) {
+      return reply.code(502).send({
+        error: telegramResponse.description || 'Telegram webhook delete failed',
+        errorCode: telegramResponse.error_code
+      })
+    }
+
+    return {
+      message: 'Telegram webhook deleted',
+      result: telegramResponse.result
+    }
+  })
+
+  fastify.get<{ Querystring: TelegramAdminBindingsQuery }>('/admin/bindings', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Querystring: TelegramAdminBindingsQuery }>) => {
+    const page = parsePositiveInteger(request.query.page, 1, 100000)
+    const pageSize = parsePositiveInteger(request.query.pageSize, 5, 100)
+    const search = request.query.search?.trim()
+    const config = await getTelegramBotConfig()
+    const where: any = {}
+
+    if (search) {
+      const or: any[] = [
+        { telegramUserId: { contains: search } },
+        { telegramUsername: { contains: search } },
+        { firstName: { contains: search } },
+        { lastName: { contains: search } },
+        { user: { username: { contains: search } } },
+        { user: { email: { contains: search } } }
+      ]
+
+      if (/^\d+$/.test(search)) {
+        const numericSearch = Number(search)
+        if (Number.isSafeInteger(numericSearch)) {
+          or.push({ id: numericSearch }, { userId: numericSearch })
+        }
+      }
+
+      where.OR = or
+    }
+
+    const [bindings, total] = await Promise.all([
+      telegramBindingModel.findMany({
+        where,
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              email: true,
+              status: true
+            }
+          }
+        },
+        orderBy: { boundAt: 'desc' },
+        skip: (page - 1) * pageSize,
+        take: pageSize
+      }),
+      telegramBindingModel.count({ where })
+    ])
+
+    return {
+      bindings: await Promise.all(bindings.map((binding: any) => buildAdminBindingView(binding, config.group, config.vipGroup))),
+      total,
+      page,
+      pageSize,
+      group: serializeGroupConfig(config.group),
+      vipGroup: serializeGroupConfig(config.vipGroup)
+    }
+  })
+
+  fastify.delete<{ Params: TelegramAdminBindingParams }>('/admin/bindings/:id', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: TelegramAdminBindingParams }>, reply: FastifyReply) => {
+    const bindingId = Number.parseInt(request.params.id, 10)
+    if (!Number.isSafeInteger(bindingId) || bindingId < 1) {
+      return reply.code(400).send({ error: 'Invalid Telegram binding ID' })
+    }
+
+    const binding = await telegramBindingModel.findUnique({
+      where: { id: bindingId },
+      include: {
+        user: {
+          select: {
+            id: true,
+            username: true
+          }
+        }
+      }
+    })
+
+    if (!binding) {
+      return reply.code(404).send({ error: 'Telegram binding not found' })
+    }
+
+    await telegramBindingModel.delete({
+      where: { id: bindingId }
+    })
+
+    await createLog(
+      request.user.id,
+      'system',
+      'telegram.binding_unlink',
+      `Admin unlinked Telegram binding for user #${binding.userId} (${binding.user?.username || 'unknown'})`,
+      'success'
+    )
+
+    return { message: 'Telegram binding removed' }
+  })
+
+  fastify.get('/binding', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const config = await getTelegramBotConfig()
+    const binding = await telegramBindingModel.findUnique({
+      where: { userId: request.user.id }
+    })
+
+    return {
+      enabled: config.enabled,
+      configured: config.configured,
+      botUsername: config.botUsername,
+      binding: binding ? {
+        telegramUserId: binding.telegramUserId,
+        telegramUsername: binding.telegramUsername,
+        firstName: binding.firstName,
+        lastName: binding.lastName,
+        boundAt: binding.boundAt.toISOString()
+      } : null
+    }
+  })
+
+  fastify.post('/bind-token', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const config = await getTelegramBotConfig()
+    if (!config.configured || !config.botUsername) {
+      return reply.code(400).send({ error: 'Telegram bot is not configured' })
+    }
+
+    await telegramBindTokenModel.deleteMany({
+      where: {
+        userId: request.user.id,
+        usedAt: null
+      }
+    })
+
+    const token = randomBytes(32).toString('base64url')
+    const expiresAt = new Date(Date.now() + bindTokenTtlMs)
+
+    await telegramBindTokenModel.create({
+      data: {
+        userId: request.user.id,
+        tokenHash: hashToken(token),
+        expiresAt
+      }
+    })
+
+    return {
+      bindUrl: `https://t.me/${config.botUsername}?start=${bindTokenPrefix}${token}`,
+      expiresAt: expiresAt.toISOString()
+    }
+  })
+
+  fastify.delete('/binding', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    await telegramBindingModel.deleteMany({
+      where: { userId: request.user.id }
+    })
+
+    return { message: 'Telegram binding removed' }
+  })
+
+  fastify.post<{ Body: TelegramWebhookUpdate }>('/webhook', async (
+    request: FastifyRequest<{ Body: TelegramWebhookUpdate }>,
+    reply: FastifyReply
+  ) => {
+    const config = await getTelegramBotConfig()
+    if (!config.configured || !config.botToken) {
+      return { ok: true }
+    }
+
+    if (config.webhookSecret) {
+      const headerValue = request.headers['x-telegram-bot-api-secret-token']
+      const secretFromHeader = Array.isArray(headerValue) ? headerValue[0] : headerValue
+      if (!secretFromHeader || !secureEquals(secretFromHeader, config.webhookSecret)) {
+        return reply.code(401).send({ error: 'Unauthorized' })
+      }
+    }
+
+    const message = request.body?.message
+    const chatId = message?.chat?.id
+    const chatType = message?.chat?.type
+    const from = message?.from
+    const text = message?.text?.trim()
+    const bindTokenMatch = text?.match(/^\/start\s+bind_([A-Za-z0-9_-]{20,128})$/)
+
+    if (!chatId || !from || !text) {
+      return { ok: true }
+    }
+
+    const joinTarget = getGroupJoinTarget(text)
+    if (joinTarget) {
+      await handleGroupJoinRequest(config, chatId, from, chatType, joinTarget)
+      return { ok: true }
+    }
+
+    if (!bindTokenMatch) {
+      await notifyTelegram(
+        config.botToken,
+        chatId,
+        '可用指令：\n绑定账号：请先登录网站，在个人设置里生成 Telegram 绑定链接。\n申请普通群：绑定后私聊发送 /join。\n申请高级群：绑定后私聊发送 /join_vip。'
+      )
+      return { ok: true }
+    }
+
+    const tokenHash = hashToken(bindTokenMatch[1])
+    const now = new Date()
+    const bindToken = await telegramBindTokenModel.findFirst({
+      where: {
+        tokenHash,
+        usedAt: null,
+        expiresAt: { gt: now }
+      }
+    })
+
+    if (!bindToken) {
+      await notifyTelegram(config.botToken, chatId, '绑定链接无效或已过期，请回到网站重新生成绑定链接。')
+      return { ok: true }
+    }
+
+    const telegramUserId = String(from.id)
+    const existingBinding = await telegramBindingModel.findUnique({
+      where: { telegramUserId }
+    })
+    if (existingBinding && existingBinding.userId !== bindToken.userId) {
+      await notifyTelegram(config.botToken, chatId, '这个 Telegram 账号已经绑定到另一个网站账号。')
+      return { ok: true }
+    }
+
+    await telegramBindingModel.upsert({
+      where: { userId: bindToken.userId },
+      update: {
+        telegramUserId,
+        telegramUsername: from.username || null,
+        firstName: from.first_name || null,
+        lastName: from.last_name || null,
+        boundAt: now
+      },
+      create: {
+        userId: bindToken.userId,
+        telegramUserId,
+        telegramUsername: from.username || null,
+        firstName: from.first_name || null,
+        lastName: from.last_name || null,
+        boundAt: now
+      }
+    })
+
+    await telegramBindTokenModel.update({
+      where: { id: bindToken.id },
+      data: { usedAt: now }
+    })
+
+    await notifyTelegram(
+      config.botToken,
+      chatId,
+      '绑定成功。你现在可以关闭 Telegram，回到网站个人设置查看状态。'
+    )
+
+    return { ok: true }
+  })
+}
diff --git a/server/src/routes/terminal-saved-commands.ts b/server/src/routes/terminal-saved-commands.ts
new file mode 100644
index 0000000..845f1ef
--- /dev/null
+++ b/server/src/routes/terminal-saved-commands.ts
@@ -0,0 +1,163 @@
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
+import {
+  createTerminalSavedCommand,
+  deleteTerminalSavedCommand,
+  getTerminalSavedCommandsByUserId,
+  updateTerminalSavedCommand
+} from '../db/terminal-saved-commands.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+
+export default async function terminalSavedCommandRoutes(fastify: FastifyInstance) {
+  fastify.get('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest) => {
+    const commands = await getTerminalSavedCommandsByUserId(request.user.id)
+
+    return { commands }
+  })
+
+  fastify.post<{
+    Body: {
+      name: string
+      command: string
+      description?: string | null
+    }
+  }>('/', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['name', 'command'],
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 80 },
+          command: { type: 'string', minLength: 1, maxLength: 16384 },
+          description: { type: ['string', 'null'], maxLength: 300 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Body: {
+      name: string
+      command: string
+      description?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const result = await createTerminalSavedCommand({
+      userId: request.user.id,
+      name: request.body.name,
+      command: request.body.command,
+      description: request.body.description
+    })
+
+    if (!result.success) {
+      const errorMap: Record<string, { status: number; message: string }> = {
+        INVALID_NAME: { status: 400, message: 'Command name is required' },
+        INVALID_COMMAND: { status: 400, message: 'Command content is required' },
+        COMMAND_TOO_LARGE: { status: 400, message: 'Command content too large (max 16KB)' },
+        MAX_COMMANDS_REACHED: { status: 400, message: 'Maximum saved terminal commands reached (100)' }
+      }
+      const target = errorMap[result.error] || { status: 400, message: result.error }
+      return reply.code(target.status).send({ error: target.message, code: result.error })
+    }
+
+    await createLog(
+      request.user.id,
+      'terminal',
+      'terminal.saved_command.create',
+      `Created terminal saved command "${result.command.name}"`,
+      'success'
+    )
+
+    return reply.code(201).send({
+      message: 'Saved terminal command created',
+      command: result.command
+    })
+  })
+
+  fastify.put<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      command?: string
+      description?: string | null
+    }
+  }>('/:id', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          name: { type: 'string', minLength: 1, maxLength: 80 },
+          command: { type: 'string', minLength: 1, maxLength: 16384 },
+          description: { type: ['string', 'null'], maxLength: 300 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: {
+      name?: string
+      command?: string
+      description?: string | null
+    }
+  }>, reply: FastifyReply) => {
+    const commandId = Number(request.params.id)
+    if (Number.isNaN(commandId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const result = await updateTerminalSavedCommand(commandId, request.user.id, request.body)
+    if (!result.success) {
+      const errorMap: Record<string, { status: number; message: string }> = {
+        NOT_FOUND: { status: 404, message: 'Saved command not found' },
+        INVALID_NAME: { status: 400, message: 'Command name is required' },
+        INVALID_COMMAND: { status: 400, message: 'Command content is required' },
+        COMMAND_TOO_LARGE: { status: 400, message: 'Command content too large (max 16KB)' }
+      }
+      const target = errorMap[result.error] || { status: 400, message: result.error }
+      return reply.code(target.status).send({ error: target.message, code: result.error })
+    }
+
+    await createLog(
+      request.user.id,
+      'terminal',
+      'terminal.saved_command.update',
+      `Updated terminal saved command "${result.command.name}" (#${commandId})`,
+      'success'
+    )
+
+    return {
+      message: 'Saved terminal command updated',
+      command: result.command
+    }
+  })
+
+  fastify.delete<{
+    Params: { id: string }
+  }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const commandId = Number(request.params.id)
+    if (Number.isNaN(commandId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const deleted = await deleteTerminalSavedCommand(commandId, request.user.id)
+    if (!deleted) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    await createLog(
+      request.user.id,
+      'terminal',
+      'terminal.saved_command.delete',
+      `Deleted terminal saved command #${commandId}`,
+      'success'
+    )
+
+    return { message: 'Saved terminal command deleted' }
+  })
+}
diff --git a/server/src/routes/terminal.ts b/server/src/routes/terminal.ts
new file mode 100644
index 0000000..619f28e
--- /dev/null
+++ b/server/src/routes/terminal.ts
@@ -0,0 +1,409 @@
+/**
+ * 终端 WebSocket 路由
+ * 
+ * 提供实例终端的 WebSocket 连接支持
+ */
+
+import type { FastifyInstance, FastifyRequest } from 'fastify'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import {
+    getClientIP,
+    checkIPConnectionLimit,
+    checkUserConnectionLimit,
+    registerConnection
+} from '../lib/websocket-security.js'
+import {
+    createTerminalSession,
+    getActiveSessionStats
+} from '../lib/terminal-proxy.js'
+import type { WebSocket } from 'ws'
+import { consumeTerminalAccessTicket, generateTerminalAccessTicket } from '../lib/action-ticket.js'
+import { isAccessTokenInvalidated } from '../lib/security.js'
+
+// 终端专用连接限制
+const TERMINAL_LIMITS = {
+    maxPerUser: 5,      // 单用户最多 5 个终端连接（跨所有实例）
+    maxPerInstance: 3,  // 单实例最多 3 个终端连接
+}
+
+// 注意：不再维护独立的 instanceTerminalCount 计数器
+// 统一使用 terminal-proxy.ts 的 getActiveSessionStats 来获取实时连接数
+// 这样可以避免 closeInstanceSessions 等操作导致的计数不同步问题
+
+/**
+ * 安全发送 WebSocket 消息（捕获发送异常）
+ */
+function safeSend(socket: WebSocket, data: string): boolean {
+    try {
+        if (socket.readyState === socket.OPEN) {
+            socket.send(data)
+            return true
+        }
+    } catch (err) {
+        console.debug('[Terminal] Failed to send message:', err)
+    }
+    return false
+}
+
+/**
+ * 检查用户对实例的终端操作权限
+ * 权限规则：
+ * 1. 管理员可以访问所有实例的终端
+ * 2. 实例所有者可以访问自己实例的终端
+ * 3. 节点所有者可以访问其节点上所有实例的终端
+ */
+async function checkTerminalPermission(
+    user: { id: number; role: string },
+    instance: { user_id: number; host_id: number }
+): Promise<boolean> {
+    // 管理员有权限访问所有实例
+    if (user.role === 'admin') return true
+
+    // 实例所有者有权限
+    if (instance.user_id === user.id) return true
+
+    // 检查是否是节点所有者
+    const host = await db.getHostById(instance.host_id)
+    if (host && host.user_id === user.id) return true
+
+    return false
+}
+
+export default async function terminalRoutes(fastify: FastifyInstance) {
+    /**
+     * 创建终端访问票据
+     * POST /ws/instances/:id/terminal-ticket
+     */
+    fastify.post<{
+        Params: { id: string }
+    }>('/:id/terminal-ticket', {
+        onRequest: [fastify.authenticate]
+    }, async (request, reply) => {
+        const instanceId = Number(request.params.id)
+        if (isNaN(instanceId)) {
+            return reply.code(400).send({ error: 'Invalid instance ID', code: 'INVALID_ID' })
+        }
+
+        const issuedAt = request.user.iat
+        if (!issuedAt) {
+            return reply.code(401).send({ error: 'Unauthorized', code: 'UNAUTHORIZED' })
+        }
+
+        const ticket = generateTerminalAccessTicket(
+            request.user.id,
+            instanceId,
+            issuedAt,
+            request.user.sid
+        )
+
+        return { ticket, expiresIn: 60 }
+    })
+
+    /**
+     * WebSocket 终端连接
+     * GET /ws/instances/:id/terminal
+     */
+    fastify.get<{
+        Params: { id: string }
+        Querystring: { ticket?: string }
+    }>('/:id/terminal', {
+        websocket: true
+    }, async (socket, request: FastifyRequest<{
+        Params: { id: string }
+        Querystring: { ticket?: string }
+    }>) => {
+        const { id } = request.params
+        const instanceId = Number(id)
+        const clientIP = getClientIP(request)
+
+        // 1. 验证实例 ID
+        if (isNaN(instanceId)) {
+            safeSend(socket, JSON.stringify({ type: 'error', code: 'INVALID_ID', message: 'Invalid instance ID' }))
+            socket.close(4000, 'Invalid instance ID')
+            return
+        }
+
+        // 2. IP 连接限制检查
+        const ipCheck = checkIPConnectionLimit(clientIP)
+        if (!ipCheck.allowed) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'IP_LIMIT_EXCEEDED',
+                message: `Too many connections from this IP (${ipCheck.current}/${ipCheck.limit})`
+            }))
+            socket.close(4003, 'IP connection limit exceeded')
+            return
+        }
+
+        // 3. 终端短期票据认证
+        const ticket = request.query.ticket
+        if (!ticket) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'UNAUTHORIZED',
+                message: 'Authentication ticket is required'
+            }))
+            socket.close(4001, 'Unauthorized')
+            return
+        }
+
+        const authResult = consumeTerminalAccessTicket(ticket, instanceId)
+        if (!authResult.valid || !authResult.userId || !authResult.issuedAt) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'UNAUTHORIZED',
+                message: authResult.error || 'Authentication failed'
+            }))
+            socket.close(4001, 'Unauthorized')
+            return
+        }
+
+        const tokenInvalidated = await isAccessTokenInvalidated(
+            authResult.userId,
+            authResult.issuedAt,
+            authResult.sessionId
+        )
+        if (tokenInvalidated) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'SESSION_INVALIDATED',
+                message: 'Session expired'
+            }))
+            socket.close(4001, 'Session expired')
+            return
+        }
+
+        const dbUser = await db.findUserById(authResult.userId)
+        if (!dbUser || dbUser.status === 'banned') {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'UNAUTHORIZED',
+                message: 'Authentication failed'
+            }))
+            socket.close(4001, 'Unauthorized')
+            return
+        }
+
+        const user = {
+            id: dbUser.id,
+            username: dbUser.username,
+            role: dbUser.role
+        }
+
+        // 4. 用户终端连接数检查（使用终端专用统计，更精确）
+        const sessionStats = getActiveSessionStats()
+        const currentUserTerminals = sessionStats.byUser.get(user.id) || 0
+        if (currentUserTerminals >= TERMINAL_LIMITS.maxPerUser) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'USER_LIMIT_EXCEEDED',
+                message: `Too many terminal connections (${currentUserTerminals}/${TERMINAL_LIMITS.maxPerUser})`
+            }))
+            socket.close(4003, 'User terminal limit exceeded')
+            return
+        }
+
+        // 通用 WebSocket 连接限制检查（防止单用户占用过多资源）
+        const userWsCheck = checkUserConnectionLimit(user.id)
+        if (!userWsCheck.allowed) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'WS_LIMIT_EXCEEDED',
+                message: `Too many WebSocket connections (${userWsCheck.current}/${userWsCheck.limit})`
+            }))
+            socket.close(4003, 'WebSocket connection limit exceeded')
+            return
+        }
+
+        // 5. 获取实例信息
+        const instance = await db.getInstanceById(instanceId)
+        if (!instance) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'INSTANCE_NOT_FOUND',
+                message: 'Instance not found'
+            }))
+            socket.close(4004, 'Instance not found')
+            return
+        }
+
+        // 6. 权限检查
+        const hasPermission = await checkTerminalPermission(user, instance)
+        if (!hasPermission) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'FORBIDDEN',
+                message: 'You do not have permission to access this terminal'
+            }))
+            socket.close(4003, 'Forbidden')
+            return
+        }
+
+        // 7. 实例状态检查
+        if (instance.status !== 'running') {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'INSTANCE_NOT_RUNNING',
+                message: 'Instance must be running to access terminal'
+            }))
+            socket.close(4000, 'Instance not running')
+            return
+        }
+
+        // 8. 实例终端连接数检查（复用前面获取的统计数据）
+        const currentInstanceConnections = sessionStats.byInstance.get(instanceId) || 0
+        if (currentInstanceConnections >= TERMINAL_LIMITS.maxPerInstance) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'INSTANCE_LIMIT_EXCEEDED',
+                message: `Too many terminal connections for this instance (${currentInstanceConnections}/${TERMINAL_LIMITS.maxPerInstance})`
+            }))
+            socket.close(4003, 'Instance terminal limit exceeded')
+            return
+        }
+
+        // 9. 获取宿主机信息
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'HOST_NOT_FOUND',
+                message: 'Host not found'
+            }))
+            socket.close(4004, 'Host not found')
+            return
+        }
+
+        // 10. 注册连接（连接计数由 terminal-proxy 统一管理）
+        registerConnection(clientIP, socket, user.id)
+
+        // 11. 创建终端会话前的最终检查（防止 TOCTOU 竞态条件）
+        // 重新获取最新统计数据，确保在异步操作期间没有其他连接建立
+        const finalStats = getActiveSessionStats()
+        const finalUserTerminals = finalStats.byUser.get(user.id) || 0
+        const finalInstanceConnections = finalStats.byInstance.get(instanceId) || 0
+        
+        if (finalUserTerminals >= TERMINAL_LIMITS.maxPerUser) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'USER_LIMIT_EXCEEDED',
+                message: `Too many terminal connections (${finalUserTerminals}/${TERMINAL_LIMITS.maxPerUser})`
+            }))
+            socket.close(4003, 'User terminal limit exceeded')
+            return
+        }
+        
+        if (finalInstanceConnections >= TERMINAL_LIMITS.maxPerInstance) {
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'INSTANCE_LIMIT_EXCEEDED',
+                message: `Too many terminal connections for this instance (${finalInstanceConnections}/${TERMINAL_LIMITS.maxPerInstance})`
+            }))
+            socket.close(4003, 'Instance terminal limit exceeded')
+            return
+        }
+
+        // 12. 创建终端会话
+        // 获取套餐信息以确定实例类型（提前到 try 外以便 catch 块访问）
+        let instanceType: 'vm' | 'container' = 'container'
+        try {
+            const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+            instanceType = (pkg?.instance_type === 'vm') ? 'vm' : 'container'
+        } catch {
+            // 获取套餐失败时默认使用 container
+        }
+
+        try {
+            const session = await createTerminalSession(
+                socket as any,
+                host,
+                instanceId,
+                instance.incus_id,
+                user.id,
+                instanceType,
+                authResult.sessionId
+            )
+
+            // 记录连接日志（包含详细信息）
+            const logDetails = [
+                `instance: ${instance.name} (#${instanceId})`,
+                `host: ${host.name}`,
+                `type: ${instanceType}`,
+                `mode: ${session.connectionMode}`,
+                `ip: ${clientIP}`,
+                `session: ${session.id}`
+            ].join(' | ')
+
+            await createLog(
+                user.id,
+                'terminal',
+                'terminal.connect',
+                `Terminal connected | ${logDetails}`,
+                'success',
+                { instanceId }
+            )
+
+            // 监听断开连接（连接计数由 terminal-proxy 统一管理）
+            socket.on('close', async () => {
+                // 记录断开日志（包含详细信息）
+                await createLog(
+                    user.id,
+                    'terminal',
+                    'terminal.disconnect',
+                    `Terminal disconnected | ${logDetails}`,
+                    'success',
+                    { instanceId }
+                )
+            })
+
+        } catch (error) {
+            // 内部错误信息仅记录日志，不暴露给客户端
+            const internalError = error instanceof Error ? error.message : String(error)
+            console.error(`[Terminal] Failed to create session for instance ${instanceId}:`, internalError)
+
+            // 无需手动回滚连接计数，terminal-proxy 统一管理
+
+            // 向客户端返回通用错误消息，避免泄露内部信息
+            safeSend(socket, JSON.stringify({
+                type: 'error',
+                code: 'CONNECTION_FAILED',
+                message: 'Failed to connect to terminal. Please try again later.'
+            }))
+            socket.close(4000, 'Connection failed')
+
+            // 记录失败日志（包含详细信息，仅服务端可见）
+            const failLogDetails = [
+                `instance: ${instance.name} (#${instanceId})`,
+                `host: ${host.name}`,
+                `type: ${instanceType}`,
+                `ip: ${clientIP}`,
+                `error: ${internalError}`
+            ].join(' | ')
+
+            await createLog(
+                user.id,
+                'terminal',
+                'terminal.connect',
+                `Terminal connection failed | ${failLogDetails}`,
+                'failed',
+                { instanceId }
+            )
+        }
+    })
+
+    /**
+     * 获取终端连接统计（管理员）
+     * GET /terminal/stats
+     */
+    fastify.get('/stats', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async () => {
+        const stats = getActiveSessionStats()
+        return {
+            total: stats.total,
+            byInstance: Object.fromEntries(stats.byInstance),
+            byUser: Object.fromEntries(stats.byUser)
+        }
+    })
+}
diff --git a/server/src/routes/tickets.ts b/server/src/routes/tickets.ts
new file mode 100644
index 0000000..545b272
--- /dev/null
+++ b/server/src/routes/tickets.ts
@@ -0,0 +1,934 @@
+/**
+ * 工单系统 API 路由
+ * 
+ * 安全措施：
+ * - 身份认证：所有接口需要登录
+ * - 权限校验：用户只能访问自己的工单或自己宿主机收到的工单
+ * - 输入验证：验证所有用户输入
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as ticketDb from '../db/tickets.js'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { getAllAdminUserIds } from '../db/users.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { deleteTicketImageFromLsky, uploadTicketImageToLsky } from '../lib/lsky.js'
+import { sendNotification } from '../lib/notifier.js'
+
+// 工单状态类型
+type TicketStatus = 'open' | 'in_progress' | 'resolved' | 'closed'
+
+// 工单优先级类型
+type TicketPriority = 'low' | 'normal' | 'high' | 'urgent'
+
+async function getTicketHostOwnership(hostId: number | null | undefined) {
+  if (!hostId) return null
+
+  return prisma.host.findUnique({
+    where: { id: hostId },
+    select: {
+      id: true,
+      name: true,
+      userId: true,
+      user: {
+        select: {
+          role: true
+        }
+      }
+    }
+  })
+}
+
+// 工单分类
+const VALID_CATEGORIES = ['general', 'billing', 'technical', 'abuse']
+
+// 工单优先级
+const VALID_PRIORITIES: TicketPriority[] = ['low', 'normal', 'high', 'urgent']
+
+// 工单状态
+const VALID_STATUSES: TicketStatus[] = ['open', 'in_progress', 'resolved', 'closed']
+
+// 扩展的状态类型（包含 active）
+type ExtendedTicketStatus = TicketStatus | 'active'
+
+const MAX_TICKET_IMAGES = 6
+const MAX_TICKET_IMAGE_SIZE = 50 * 1024 * 1024
+const TICKET_UPLOAD_BODY_LIMIT = (MAX_TICKET_IMAGES * MAX_TICKET_IMAGE_SIZE) + (4 * 1024 * 1024)
+const TICKET_PROXY_FETCH_TIMEOUT_MS = 15_000
+const ALLOWED_IMAGE_MIME_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/gif',
+  'image/avif'
+])
+
+interface ParsedTicketPayload {
+  fields: Record<string, string>
+  images: Array<{
+    buffer: Buffer
+    filename: string
+    contentType: string
+    sizeBytes: number
+  }>
+}
+
+function isMultipartRequest(request: FastifyRequest): boolean {
+  return typeof (request as FastifyRequest & { isMultipart?: () => boolean }).isMultipart === 'function'
+    && (request as FastifyRequest & { isMultipart: () => boolean }).isMultipart()
+}
+
+function parseInteger(value: string | undefined): number | null {
+  if (!value || !value.trim()) {
+    return null
+  }
+
+  const parsed = Number(value)
+  return Number.isInteger(parsed) ? parsed : null
+}
+
+function sanitizeContent(value: string | undefined): string {
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+async function readTicketPayload(request: FastifyRequest): Promise<ParsedTicketPayload> {
+  if (!isMultipartRequest(request)) {
+    const body = (request.body ?? {}) as Record<string, unknown>
+    const fields: Record<string, string> = {}
+
+    for (const [key, value] of Object.entries(body)) {
+      if (value !== null && value !== undefined) {
+        fields[key] = String(value)
+      }
+    }
+
+    return { fields, images: [] }
+  }
+
+  const multipartRequest = request as FastifyRequest & {
+    parts: () => AsyncIterable<any>
+  }
+  const fields: Record<string, string> = {}
+  const images: ParsedTicketPayload['images'] = []
+
+  for await (const part of multipartRequest.parts()) {
+    if (part.type === 'file') {
+      if (part.fieldname !== 'images') {
+        await part.toBuffer()
+        continue
+      }
+
+      if (!part.mimetype || !ALLOWED_IMAGE_MIME_TYPES.has(part.mimetype)) {
+        throw new Error('Only JPG, PNG, WebP, GIF and AVIF images are supported')
+      }
+
+      if (images.length >= MAX_TICKET_IMAGES) {
+        throw new Error(`A ticket message can contain at most ${MAX_TICKET_IMAGES} images`)
+      }
+
+      const buffer = await part.toBuffer()
+      if (buffer.length === 0) {
+        continue
+      }
+
+      if (buffer.length > MAX_TICKET_IMAGE_SIZE) {
+        throw new Error(`Each image must be no larger than ${MAX_TICKET_IMAGE_SIZE / (1024 * 1024)}MB`)
+      }
+
+      images.push({
+        buffer,
+        filename: part.filename || `ticket-image-${Date.now()}`,
+        contentType: part.mimetype,
+        sizeBytes: buffer.length
+      })
+      continue
+    }
+
+    fields[part.fieldname] = typeof part.value === 'string' ? part.value : String(part.value ?? '')
+  }
+
+  return { fields, images }
+}
+
+async function uploadTicketImages(
+  images: ParsedTicketPayload['images']
+): Promise<ticketDb.CreateTicketMessageAttachmentData[]> {
+  const uploaded: ticketDb.CreateTicketMessageAttachmentData[] = []
+
+  try {
+    for (const image of images) {
+      const result = await uploadTicketImageToLsky(image)
+      uploaded.push({
+        provider: result.provider,
+        providerVersion: result.providerVersion,
+        providerFileId: result.providerFileId,
+        filename: result.filename,
+        originalName: result.originalName,
+        mimeType: result.mimeType,
+        sizeBytes: result.sizeBytes,
+        width: result.width,
+        height: result.height,
+        url: result.url,
+        thumbnailUrl: result.thumbnailUrl
+      })
+    }
+  } catch (error) {
+    if (uploaded.length > 0) {
+      await cleanupUploadedTicketImages(uploaded)
+    }
+    throw error
+  }
+
+  return uploaded
+}
+
+async function cleanupUploadedTicketImages(
+  attachments: Array<{ providerVersion: string; providerFileId?: string | null }>
+): Promise<void> {
+  await Promise.allSettled(
+    attachments.map(attachment => deleteTicketImageFromLsky(attachment.providerVersion, attachment.providerFileId ?? null))
+  )
+}
+
+function isHandledTicketPayloadError(error: unknown): error is Error {
+  if (!(error instanceof Error)) {
+    return false
+  }
+
+  return [
+    'Only JPG',
+    'A ticket message can contain at most',
+    'Each image must be no larger than',
+    'Lsky',
+    'image bed'
+  ].some(fragment => error.message.includes(fragment))
+}
+
+export default async function ticketsRoutes(fastify: FastifyInstance) {
+
+  // ==================== 用户端 API ====================
+
+  /**
+   * 创建工单
+   * POST /tickets
+   * instanceId 可选：如果不选实例，工单直接发给管理员
+   */
+  fastify.post('/', {
+    onRequest: [fastify.authenticate],
+    bodyLimit: TICKET_UPLOAD_BODY_LIMIT
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+    let uploadedAttachments: ticketDb.CreateTicketMessageAttachmentData[] = []
+
+    try {
+      if (!await db.getSystemConfigBoolean('ticket_enabled', true)) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN, 'Ticket creation is disabled'))
+      }
+
+      const payload = await readTicketPayload(request)
+      const instanceId = parseInteger(payload.fields.instanceId)
+      const subject = sanitizeContent(payload.fields.subject)
+      const category = sanitizeContent(payload.fields.category)
+      const priority = sanitizeContent(payload.fields.priority) as TicketPriority
+      const content = sanitizeContent(payload.fields.content)
+
+      // 输入验证
+      if (!subject || subject.length < 2 || subject.length > 200) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Subject must be 2-200 characters'))
+      }
+      if (content.length > 5000) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Content must be 0-5000 characters'))
+      }
+      if (payload.images.length === 0 && content.length < 10) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Content must be 10-5000 characters when no images are attached'))
+      }
+      if (category && !VALID_CATEGORIES.includes(category)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid category'))
+      }
+      if (priority && !VALID_PRIORITIES.includes(priority)) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid priority'))
+      }
+
+      let hostId: number | null = null
+      let instance: Awaited<ReturnType<typeof db.getInstanceById>> | null = null
+      let host: Awaited<ReturnType<typeof getTicketHostOwnership>> | null = null
+
+      // 如果选择了实例，验证实例存在且属于该用户
+      if (instanceId && typeof instanceId === 'number') {
+        instance = await db.getInstanceById(instanceId)
+        if (!instance || instance.user_id !== user.id) {
+          return reply.code(400).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+        }
+        hostId = instance.host_id
+
+        // 检查宿主机是否存在
+        host = await getTicketHostOwnership(hostId)
+        if (!host) {
+          return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+      }
+
+      if (payload.images.length > 0) {
+        uploadedAttachments = await uploadTicketImages(payload.images)
+      }
+
+      // 创建工单（instanceId 和 hostId 可以为 null，表示直接发给管理员）
+      const result = await ticketDb.createTicket({
+        userId: user.id,
+        hostId,
+        instanceId: instanceId || null,
+        subject,
+        category: category || 'general',
+        priority: priority || 'normal',
+        content,
+        attachments: uploadedAttachments
+      })
+
+      // 发送通知：如果是用户托管节点的实例，发送给节点所有者；否则发送给管理员
+      try {
+        if (host && host.user.role !== 'admin') {
+          // 用户托管节点：发送通知给节点所有者
+          await sendNotification(host.userId, 'ticket_created', {
+            username: user.username,
+            subject,
+            hostName: host.name,
+            instanceName: instance?.name || '无'
+          })
+        } else {
+          // 官方节点或未选择实例：发送通知给所有管理员
+          const adminIds = await getAllAdminUserIds()
+          for (const adminId of adminIds) {
+            await sendNotification(adminId, 'ticket_created', {
+              username: user.username,
+              subject,
+              hostName: host?.name || '系统',
+              instanceName: instance?.name || '无'
+            })
+          }
+        }
+      } catch (err) {
+        console.error('[Tickets] Failed to send notification:', err)
+      }
+
+      return reply.code(201).send({
+        message: 'Ticket created successfully',
+        ticket: {
+          id: result.ticketId,
+          messageId: result.messageId
+        }
+      })
+    } catch (error: any) {
+      if (uploadedAttachments.length > 0) {
+        await cleanupUploadedTicketImages(uploadedAttachments)
+      }
+      if (!isHandledTicketPayloadError(error)) {
+        throw error
+      }
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, error?.message || 'Invalid ticket payload'))
+    }
+  })
+
+  /**
+   * 获取我的工单列表
+   * GET /tickets
+   * 支持 active 状态筛选（排除已关闭）、搜索
+   */
+  fastify.get<{
+    Querystring: {
+      status?: ExtendedTicketStatus
+      search?: string
+      page?: number
+      pageSize?: number
+    }
+  }>('/', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      status?: ExtendedTicketStatus
+      search?: string
+      page?: number
+      pageSize?: number
+    }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { status, search, page, pageSize } = request.query
+
+    // 验证状态
+    if (status && status !== 'active' && !VALID_STATUSES.includes(status as TicketStatus)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid status'))
+    }
+
+    const result = await ticketDb.getUserTickets(user.id, {
+      status: status as TicketStatus | 'active' | undefined,
+      search,
+      page: page ? Number(page) : 1,
+      pageSize: pageSize ? Math.min(Number(pageSize), 100) : 10
+    })
+
+    return reply.send(result)
+  })
+
+  /**
+   * 读取工单图片内容（鉴权代理）
+   * GET /tickets/attachments/:attachmentId/content
+   */
+  fastify.get<{
+    Params: { attachmentId: string }
+  }>('/attachments/:attachmentId/content', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { attachmentId: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const attachmentId = Number(request.params.attachmentId)
+
+    if (isNaN(attachmentId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const attachment = await ticketDb.getTicketMessageAttachmentById(attachmentId)
+    if (!attachment) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    const access = await ticketDb.canUserAccessTicket(user.id, attachment.ticketId, user.role)
+    if (!access.canAccess) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    let upstream: Response
+    try {
+      upstream = await fetch(attachment.url, {
+        signal: AbortSignal.timeout(TICKET_PROXY_FETCH_TIMEOUT_MS)
+      })
+    } catch {
+      return reply.code(502).send(apiError(ErrorCode.INTERNAL_ERROR, 'Failed to load remote image'))
+    }
+
+    if (!upstream.ok) {
+      return reply.code(502).send(apiError(ErrorCode.INTERNAL_ERROR, 'Failed to load remote image'))
+    }
+
+    const imageBuffer = Buffer.from(await upstream.arrayBuffer())
+
+    reply.header('Cache-Control', 'private, max-age=300')
+    reply.header('Content-Type', attachment.mimeType)
+    return reply.send(imageBuffer)
+  })
+
+  /**
+   * 获取工单详情
+   * GET /tickets/:id
+   */
+  fastify.get<{
+    Params: { id: string }
+  }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const ticketId = Number(request.params.id)
+
+    if (isNaN(ticketId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 权限检查
+    const access = await ticketDb.canUserAccessTicket(user.id, ticketId, user.role)
+    if (!access.canAccess) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    const ticket = await ticketDb.getTicketById(ticketId)
+    if (!ticket) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    return reply.send({
+      ticket,
+      isOwner: access.isOwner,
+      isCreator: access.isCreator
+    })
+  })
+
+  /**
+   * 获取工单消息列表
+   * GET /tickets/:id/messages
+   */
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { page?: number; pageSize?: number }
+  }>('/:id/messages', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Querystring: { page?: number; pageSize?: number }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const ticketId = Number(request.params.id)
+    const { page, pageSize } = request.query
+
+    if (isNaN(ticketId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 权限检查
+    const access = await ticketDb.canUserAccessTicket(user.id, ticketId, user.role)
+    if (!access.canAccess) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    const result = await ticketDb.getTicketMessages(ticketId, {
+      page: page ? Number(page) : 1,
+      pageSize: pageSize ? Math.min(Number(pageSize), 100) : 50
+    })
+
+    return reply.send(result)
+  })
+
+  /**
+   * 回复工单（用户或管理员）
+   * POST /tickets/:id/messages
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/messages', {
+    onRequest: [fastify.authenticate],
+    bodyLimit: TICKET_UPLOAD_BODY_LIMIT
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const ticketId = Number(request.params.id)
+
+    if (isNaN(ticketId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    let uploadedAttachments: ticketDb.CreateTicketMessageAttachmentData[] = []
+
+    try {
+      const payload = await readTicketPayload(request)
+      const content = sanitizeContent(payload.fields.content)
+
+      // 输入验证
+      if (content.length > 5000) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Content must be 0-5000 characters'))
+      }
+      if (payload.images.length === 0 && content.length < 1) {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Content must be 1-5000 characters when no images are attached'))
+      }
+
+      // 权限检查
+      const access = await ticketDb.canUserAccessTicket(user.id, ticketId, user.role)
+      if (!access.canAccess) {
+        return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+      }
+
+      // 获取工单详情
+      const ticket = await ticketDb.getTicketById(ticketId)
+      if (!ticket) {
+        return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+      }
+
+      // 检查工单状态
+      if (ticket.status === 'closed') {
+        return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Cannot reply to a closed ticket'))
+      }
+
+      if (payload.images.length > 0) {
+        uploadedAttachments = await uploadTicketImages(payload.images)
+      }
+
+      // 添加消息
+      const message = await ticketDb.addTicketMessage(
+        ticketId,
+        user.id,
+        content,
+        access.isOwner,
+        uploadedAttachments
+      )
+
+      // 发送通知
+      // 判断是否是托管实例的工单（宿主机有所有者且不是管理员账号）
+      const hostedTicketHost = await getTicketHostOwnership(ticket.host?.id)
+      const isHostedTicket = hostedTicketHost?.user.role === 'user'
+
+      try {
+        if (access.isOwner) {
+          // 宿主机所有者或管理员回复，通知工单创建用户
+          await sendNotification(ticket.userId, 'ticket_replied', {
+            subject: ticket.subject,
+            hostName: ticket.host?.name || '系统',
+            replyFrom: user.username
+          })
+        } else {
+          // 用户回复工单
+          if (isHostedTicket) {
+            // 托管实例的工单：通知宿主机所有者
+            await sendNotification(hostedTicketHost!.userId, 'ticket_replied', {
+              subject: ticket.subject,
+              hostName: ticket.host?.name || '系统',
+              replyFrom: user.username
+            })
+          } else {
+            // 官方节点或无实例的工单：通知所有管理员
+            const adminIds = await getAllAdminUserIds()
+            for (const adminId of adminIds) {
+              await sendNotification(adminId, 'ticket_replied', {
+                subject: ticket.subject,
+                hostName: ticket.host?.name || '系统',
+                replyFrom: user.username
+              })
+            }
+          }
+        }
+      } catch (err) {
+        console.error('[Tickets] Failed to send notification:', err)
+      }
+
+      return reply.code(201).send({
+        message: 'Message added successfully',
+        data: message
+      })
+    } catch (error: any) {
+      if (uploadedAttachments.length > 0) {
+        await cleanupUploadedTicketImages(uploadedAttachments)
+      }
+      if (!isHandledTicketPayloadError(error)) {
+        throw error
+      }
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, error?.message || 'Invalid ticket reply payload'))
+    }
+  })
+
+  /**
+   * 删除工单消息（仅管理员）
+   * DELETE /tickets/:id/messages/:messageId
+   */
+  fastify.delete<{
+    Params: { id: string; messageId: string }
+  }>('/:id/messages/:messageId', {
+    onRequest: [fastify.authenticate, fastify.requireAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; messageId: string }
+  }>, reply: FastifyReply) => {
+    const ticketId = Number(request.params.id)
+    const messageId = Number(request.params.messageId)
+
+    if (isNaN(ticketId) || isNaN(messageId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 检查消息是否存在且属于该工单
+    const message = await ticketDb.getTicketMessageById(messageId)
+    if (!message || message.ticketId !== ticketId) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    const attachments = await ticketDb.getTicketMessageAttachments(messageId)
+
+    // 删除消息
+    await ticketDb.deleteTicketMessage(messageId)
+
+    if (attachments.length > 0) {
+      await cleanupUploadedTicketImages(attachments)
+    }
+
+    return reply.send({
+      message: 'Message deleted successfully'
+    })
+  })
+
+  /**
+   * 更新工单状态（管理员）
+   * PATCH /tickets/:id/status
+   */
+  fastify.patch<{
+    Params: { id: string }
+    Body: { status: TicketStatus }
+  }>('/:id/status', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { status: TicketStatus }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const ticketId = Number(request.params.id)
+    const { status } = request.body
+
+    if (isNaN(ticketId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证状态
+    if (!status || !VALID_STATUSES.includes(status)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid status'))
+    }
+
+    // 权限检查：必须是管理员
+    const access = await ticketDb.canUserAccessTicket(user.id, ticketId, user.role)
+    if (!access.canAccess || !access.isOwner) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 获取工单详情
+    const ticket = await ticketDb.getTicketById(ticketId)
+    if (!ticket) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    // 更新状态
+    await ticketDb.updateTicketStatus(ticketId, status)
+
+    // 发送通知给用户
+    try {
+      await sendNotification(ticket.userId, 'ticket_status_changed', {
+        subject: ticket.subject,
+        hostName: ticket.host?.name || '系统',
+        newStatus: status
+      })
+    } catch (err) {
+      console.error('[Tickets] Failed to send notification:', err)
+    }
+
+    return reply.send({
+      message: 'Status updated successfully',
+      status
+    })
+  })
+
+  /**
+   * 关闭工单（用户或管理员）
+   * POST /tickets/:id/close
+   */
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/close', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const ticketId = Number(request.params.id)
+
+    if (isNaN(ticketId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 权限检查
+    const access = await ticketDb.canUserAccessTicket(user.id, ticketId, user.role)
+    if (!access.canAccess) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    // 获取工单详情
+    const ticket = await ticketDb.getTicketById(ticketId)
+    if (!ticket) {
+      return reply.code(404).send(apiError(ErrorCode.NOT_FOUND))
+    }
+
+    if (ticket.status === 'closed') {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Ticket is already closed'))
+    }
+
+    // 更新状态
+    await ticketDb.updateTicketStatus(ticketId, 'closed')
+
+    // 发送通知
+    // 判断是否是托管实例的工单（宿主机有所有者且不是管理员账号）
+    const hostedTicketHost = await getTicketHostOwnership(ticket.host?.id)
+    const isHostedTicket = hostedTicketHost?.user.role === 'user'
+    
+    try {
+      if (access.isCreator) {
+        // 用户关闭工单
+        if (isHostedTicket) {
+          // 托管实例的工单：通知宿主机所有者
+          await sendNotification(hostedTicketHost!.userId, 'ticket_closed', {
+            subject: ticket.subject,
+            hostName: ticket.host?.name || '系统',
+            closedBy: user.username
+          })
+        } else {
+          // 官方节点或无实例的工单：通知所有管理员
+          const adminIds = await getAllAdminUserIds()
+          for (const adminId of adminIds) {
+            await sendNotification(adminId, 'ticket_closed', {
+              subject: ticket.subject,
+              hostName: ticket.host?.name || '系统',
+              closedBy: user.username
+            })
+          }
+        }
+      } else {
+        // 宿主机所有者或管理员关闭工单，通知工单创建用户
+        await sendNotification(ticket.userId, 'ticket_closed', {
+          subject: ticket.subject,
+          hostName: ticket.host?.name || '系统',
+          closedBy: user.username
+        })
+      }
+    } catch (err) {
+      console.error('[Tickets] Failed to send notification:', err)
+    }
+
+    return reply.send({
+      message: 'Ticket closed successfully'
+    })
+  })
+
+  // ==================== 宿主机所有者 API ====================
+
+  /**
+   * 获取宿主机收到的工单列表
+   * GET /tickets/hosts/:hostId
+   * 支持 active 状态筛选、搜索
+   */
+  fastify.get<{
+    Params: { hostId: string }
+    Querystring: {
+      status?: ExtendedTicketStatus
+      search?: string
+      page?: number
+      pageSize?: number
+    }
+  }>('/hosts/:hostId', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Params: { hostId: string }
+    Querystring: {
+      status?: ExtendedTicketStatus
+      search?: string
+      page?: number
+      pageSize?: number
+    }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const hostId = Number(request.params.hostId)
+    const { status, search, page, pageSize } = request.query
+
+    if (isNaN(hostId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证宿主机所有权
+    const host = await db.getHostById(hostId)
+    if (!host || host.user_id !== user.id) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    // 验证状态
+    if (status && status !== 'active' && !VALID_STATUSES.includes(status as TicketStatus)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid status'))
+    }
+
+    const result = await ticketDb.getHostTickets(hostId, {
+      status: status as TicketStatus | 'active' | undefined,
+      search,
+      page: page ? Number(page) : 1,
+      pageSize: pageSize ? Math.min(Number(pageSize), 100) : 10
+    })
+
+    return reply.send(result)
+  })
+
+  /**
+   * 获取所有宿主机的工单（汇总视图）
+   * GET /tickets/my-hosts
+   * 支持 active 状态筛选、搜索
+   */
+  fastify.get<{
+    Querystring: {
+      status?: ExtendedTicketStatus
+      hostId?: number
+      sourceType?: 'all' | 'user' | 'official' | 'hosted'
+      search?: string
+      page?: number
+      pageSize?: number
+    }
+  }>('/my-hosts', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      status?: ExtendedTicketStatus
+      hostId?: number
+      sourceType?: 'all' | 'user' | 'official' | 'hosted'
+      search?: string
+      page?: number
+      pageSize?: number
+    }
+  }>, reply: FastifyReply) => {
+    const { user } = request
+    const { status, hostId, sourceType, search, page, pageSize } = request.query
+    const isAdmin = user.role === 'admin'
+
+    // 验证状态
+    if (status && status !== 'active' && !VALID_STATUSES.includes(status as TicketStatus)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid status'))
+    }
+
+    if (sourceType && !['all', 'user', 'official', 'hosted'].includes(sourceType)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid source type'))
+    }
+
+    if (!isAdmin && sourceType && sourceType !== 'all' && sourceType !== 'hosted') {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    if (hostId && sourceType === 'user') {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'User tickets cannot be filtered by host'))
+    }
+
+    // 如果指定了 hostId，验证所有权（管理员跳过验证）
+    if (hostId && !isAdmin) {
+      const host = await db.getHostById(Number(hostId))
+      if (!host || host.user_id !== user.id) {
+        return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+      }
+    }
+
+    // 管理员查看所有工单，普通用户只查看自己节点的工单
+    const result = await ticketDb.getOwnerAllTickets(isAdmin ? undefined : user.id, {
+      status: status as TicketStatus | 'active' | undefined,
+      hostId: hostId ? Number(hostId) : undefined,
+      sourceType: sourceType && sourceType !== 'all' ? sourceType : undefined,
+      search,
+      page: page ? Number(page) : 1,
+      pageSize: pageSize ? Math.min(Number(pageSize), 100) : 10
+    })
+
+    return reply.send(result)
+  })
+
+  /**
+   * 获取待处理工单数量
+   * GET /tickets/pending-count
+   */
+  fastify.get('/pending-count', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest, reply: FastifyReply) => {
+    const { user } = request
+    const isAdmin = user.role === 'admin'
+
+    // 检查用户是否拥有节点
+    const userHostCount = isAdmin ? 0 : await db.prisma.host.count({
+      where: { userId: user.id }
+    })
+
+    // 管理员不显示"我的工单"数量（前端已隐藏该标签）
+    const [userCount, ownerCount] = await Promise.all([
+      isAdmin ? Promise.resolve(0) : ticketDb.getUserOpenTicketCount(user.id),
+      ticketDb.getOwnerPendingTicketCount(isAdmin ? undefined : user.id)
+    ])
+
+    return reply.send({
+      userTickets: userCount,
+      hostTickets: ownerCount,
+      total: userCount + ownerCount,
+      isHostOwner: isAdmin || userHostCount > 0  // 管理员或拥有节点的用户
+    })
+  })
+}
diff --git a/server/src/routes/traffic.ts b/server/src/routes/traffic.ts
new file mode 100644
index 0000000..f96dd33
--- /dev/null
+++ b/server/src/routes/traffic.ts
@@ -0,0 +1,431 @@
+/**
+ * 流量统计 API 路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as trafficDb from '../db/traffic.js'
+import * as db from '../db/index.js'
+import { formatBytes } from '../services/traffic-notifier.js'
+import {
+    calculateInstanceTrafficStatus,
+    calculateUserTrafficStatus,
+    formatLocalDate,
+    getTrafficPeriod
+} from '../services/traffic-utils.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+
+/**
+ * BigInt 序列化为字符串
+ */
+function serializeBigInt(value: bigint | null): string | null {
+    return value === null ? null : value.toString()
+}
+
+/**
+ * 计算百分比
+ * 注意: 先转换为 Number 再计算,避免 BigInt 整数除法精度丢失
+ * 例如: 160MB / 257GB 用 BigInt 整数除法会得到 0,而非 0.061%
+ */
+function calculatePercentage(used: bigint, limit: bigint | null): number {
+    if (limit === null || limit === 0n) return 0
+    // 先转换为浮点数再计算百分比,避免整数除法导致的精度丢失
+    const percentage = (Number(used) / Number(limit)) * 100
+    return Math.min(100, percentage)
+}
+
+export default async function trafficRoutes(fastify: FastifyInstance): Promise<void> {
+    // ==================== 用户流量 API ====================
+
+    /**
+     * 获取当前用户的流量统计
+     */
+    fastify.get('/me/traffic', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest, reply: FastifyReply) => {
+        const userId = request.user.id
+
+        const quota = await trafficDb.getUserTrafficQuota(userId)
+        if (!quota) {
+            return reply.code(404).send({ error: 'User quota not found' })
+        }
+
+        const effectiveLimit = quota.monthlyTrafficLimit !== null
+            ? quota.monthlyTrafficLimit + quota.extraTrafficQuota
+            : null
+
+        return {
+            monthlyUsed: serializeBigInt(quota.monthlyTrafficUsed),
+            monthlyUsedFormatted: formatBytes(quota.monthlyTrafficUsed),
+            monthlyLimit: serializeBigInt(effectiveLimit),
+            monthlyLimitFormatted: effectiveLimit ? formatBytes(effectiveLimit) : null,
+            extraQuota: serializeBigInt(quota.extraTrafficQuota),
+            trafficStatus: quota.trafficStatus,
+            percentage: calculatePercentage(quota.monthlyTrafficUsed, effectiveLimit)
+        }
+    })
+
+    /**
+     * 获取指定用户的流量统计（管理员）
+     */
+    fastify.get<{ Params: { userId: string } }>('/users/:userId/traffic', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (request: FastifyRequest<{ Params: { userId: string } }>, reply: FastifyReply) => {
+        const userId = parseInt(request.params.userId, 10)
+        if (isNaN(userId)) {
+            return reply.code(400).send({ error: 'Invalid user ID' })
+        }
+
+        const quota = await trafficDb.getUserTrafficQuota(userId)
+        if (!quota) {
+            return reply.code(404).send({ error: 'User quota not found' })
+        }
+
+        const effectiveLimit = quota.monthlyTrafficLimit !== null
+            ? quota.monthlyTrafficLimit + quota.extraTrafficQuota
+            : null
+
+        return {
+            monthlyUsed: serializeBigInt(quota.monthlyTrafficUsed),
+            monthlyUsedFormatted: formatBytes(quota.monthlyTrafficUsed),
+            monthlyLimit: serializeBigInt(effectiveLimit),
+            monthlyLimitFormatted: effectiveLimit ? formatBytes(effectiveLimit) : null,
+            extraQuota: serializeBigInt(quota.extraTrafficQuota),
+            trafficStatus: quota.trafficStatus,
+            percentage: calculatePercentage(quota.monthlyTrafficUsed, effectiveLimit)
+        }
+    })
+
+    /**
+     * 更新用户流量限额（管理员）
+     */
+    fastify.put<{
+        Params: { userId: string }
+        Body: { monthlyLimit: string | null }
+    }>('/users/:userId/traffic/limit', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (request: FastifyRequest<{
+        Params: { userId: string }
+        Body: { monthlyLimit: string | null }
+    }>, reply: FastifyReply) => {
+        const userId = parseInt(request.params.userId, 10)
+        if (isNaN(userId)) {
+            return reply.code(400).send({ error: 'Invalid user ID' })
+        }
+
+        const { monthlyLimit } = request.body
+        const limit = monthlyLimit ? BigInt(monthlyLimit) : null
+
+        await trafficDb.updateUserTrafficLimit(userId, limit)
+        const quota = await trafficDb.getUserTrafficQuota(userId)
+        if (quota) {
+            const effectiveLimit = quota.monthlyTrafficLimit !== null
+                ? quota.monthlyTrafficLimit + quota.extraTrafficQuota
+                : null
+            const status = calculateUserTrafficStatus(quota.monthlyTrafficUsed, effectiveLimit)
+            await trafficDb.updateUserTrafficStatus(userId, status)
+        }
+        const { reconcileTrafficStateForUser } = await import('../services/traffic-scheduler.js')
+        await reconcileTrafficStateForUser(userId)
+
+        return { success: true }
+    })
+
+    // ==================== 实例流量 API ====================
+
+    /**
+     * 获取实例的流量统计
+     */
+    fastify.get<{ Params: { instanceId: string } }>('/instances/:instanceId/traffic', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{ Params: { instanceId: string } }>, reply: FastifyReply) => {
+        const instanceId = parseInt(request.params.instanceId, 10)
+        if (isNaN(instanceId)) {
+            return reply.code(400).send({ error: 'Invalid instance ID' })
+        }
+
+        const instance = await trafficDb.getInstanceTrafficInfo(instanceId)
+        if (!instance) {
+            return reply.code(404).send({ error: 'Instance not found' })
+        }
+
+        // 权限检查：管理员、实例所有者或宿主机所有者可以查看
+        let host: Awaited<ReturnType<typeof db.getHostById>> = null
+        // 1. 管理员有权限
+        if (request.user.role === 'admin') {
+            // 继续执行，稍后获取host信息
+        } else if (instance.userId === request.user.id) {
+            // 2. 实例所有者有权限
+        } else {
+            // 3. 检查是否是宿主机所有者
+            if (instance.hostId) {
+                host = await db.getHostById(instance.hostId)
+                if (!host || host.user_id !== request.user.id) {
+                    return reply.code(403).send({ error: 'Access denied' })
+                }
+            } else {
+                return reply.code(403).send({ error: 'Access denied' })
+            }
+        }
+
+        // 获取节点的流量重置日配置，用于计算周期
+        if (!host && instance.hostId) {
+            host = await db.getHostById(instance.hostId)
+        }
+        const trafficResetDay = host?.traffic_reset_day ?? 1
+        const { periodStart, periodEnd } = getTrafficPeriod(trafficResetDay)
+
+        return {
+            monthlyUsed: serializeBigInt(instance.monthlyTrafficUsed),
+            monthlyUsedFormatted: formatBytes(instance.monthlyTrafficUsed),
+            monthlyLimit: serializeBigInt(instance.monthlyTrafficLimit),
+            monthlyLimitFormatted: instance.monthlyTrafficLimit
+                ? formatBytes(instance.monthlyTrafficLimit)
+                : null,
+            trafficStatus: instance.trafficStatus,
+            percentage: calculatePercentage(instance.monthlyTrafficUsed, instance.monthlyTrafficLimit),
+            trafficResetDay,
+            periodStart: formatLocalDate(periodStart),
+            periodEnd: formatLocalDate(periodEnd)
+        }
+    })
+
+    /**
+     * 获取实例的流量历史（按周期）
+     */
+    fastify.get<{
+        Params: { instanceId: string }
+        Querystring: { days?: string }
+    }>('/instances/:instanceId/traffic/history', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{
+        Params: { instanceId: string }
+        Querystring: { days?: string }
+    }>, reply: FastifyReply) => {
+        const instanceId = parseInt(request.params.instanceId, 10)
+        if (isNaN(instanceId)) {
+            return reply.code(400).send({ error: 'Invalid instance ID' })
+        }
+
+        const instance = await trafficDb.getInstanceTrafficInfo(instanceId)
+        if (!instance) {
+            return reply.code(404).send({ error: 'Instance not found' })
+        }
+
+        // 权限检查：管理员、实例所有者或宿主机所有者可以查看
+        let host: Awaited<ReturnType<typeof db.getHostById>> = null
+        // 1. 管理员有权限
+        if (request.user.role === 'admin') {
+            // 继续执行
+        } else if (instance.userId === request.user.id) {
+            // 2. 实例所有者有权限
+        } else {
+            // 3. 检查是否是宿主机所有者
+            if (instance.hostId) {
+                host = await db.getHostById(instance.hostId)
+                if (!host || host.user_id !== request.user.id) {
+                    return reply.code(403).send({ error: 'Access denied' })
+                }
+            } else {
+                return reply.code(403).send({ error: 'Access denied' })
+            }
+        }
+
+        // 获取节点的流量重置日配置，用于计算周期
+        if (!host && instance.hostId) {
+            host = await db.getHostById(instance.hostId)
+        }
+        const trafficResetDay = host?.traffic_reset_day ?? 1
+        const { periodStart, periodEnd } = getTrafficPeriod(trafficResetDay)
+
+        // 按周期获取历史数据
+        const history = await trafficDb.getDailyTrafficByPeriod(instanceId, periodStart)
+
+        return {
+            trafficResetDay,
+            periodStart: formatLocalDate(periodStart),
+            periodEnd: formatLocalDate(periodEnd),
+            data: history.map(record => ({
+                date: formatLocalDate(record.date),
+                rxTotal: serializeBigInt(record.rxTotal),
+                txTotal: serializeBigInt(record.txTotal),
+                rxFormatted: formatBytes(record.rxTotal),
+                txFormatted: formatBytes(record.txTotal),
+                total: serializeBigInt(record.rxTotal + record.txTotal),
+                totalFormatted: formatBytes(record.rxTotal + record.txTotal)
+            }))
+        }
+    })
+
+    /**
+     * 更新实例流量限额（管理员）
+     */
+    fastify.put<{
+        Params: { instanceId: string }
+        Body: { monthlyLimit: string | null }
+    }>('/instances/:instanceId/traffic/limit', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (request: FastifyRequest<{
+        Params: { instanceId: string }
+        Body: { monthlyLimit: string | null }
+    }>, reply: FastifyReply) => {
+        const instanceId = parseInt(request.params.instanceId, 10)
+        if (isNaN(instanceId)) {
+            return reply.code(400).send({ error: 'Invalid instance ID' })
+        }
+
+        const { monthlyLimit } = request.body
+        const limit = monthlyLimit ? BigInt(monthlyLimit) : null
+
+        await trafficDb.updateInstanceTrafficLimit(instanceId, limit)
+        const instance = await trafficDb.getInstanceTrafficInfo(instanceId)
+        if (instance) {
+            const status = calculateInstanceTrafficStatus(instance.monthlyTrafficUsed, instance.monthlyTrafficLimit)
+            await trafficDb.updateInstanceTrafficStatus(instanceId, status)
+        }
+        const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+        await reconcileTrafficStateForInstanceIds([instanceId])
+
+        return { success: true }
+    })
+
+    /**
+     * 重置实例月度流量（管理员或宿主机所有者）
+     */
+    fastify.post<{
+        Params: { instanceId: string }
+    }>('/instances/:instanceId/traffic/reset', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{
+        Params: { instanceId: string }
+    }>, reply: FastifyReply) => {
+        const instanceId = parseInt(request.params.instanceId, 10)
+        if (isNaN(instanceId)) {
+            return reply.code(400).send({ error: 'Invalid instance ID' })
+        }
+
+        const instance = await trafficDb.getInstanceTrafficInfo(instanceId)
+        if (!instance) {
+            return reply.code(404).send({ error: 'Instance not found' })
+        }
+
+        // 权限检查：管理员或宿主机所有者可以重置实例流量
+        const isAdmin = request.user.role === 'admin'
+        if (!isAdmin) {
+            if (instance.hostId) {
+                const host = await db.getHostById(instance.hostId)
+                if (!host || host.user_id !== request.user.id) {
+                    return reply.code(403).send({ error: 'Only admin or host owner can reset instance traffic' })
+                }
+            } else {
+                return reply.code(403).send({ error: 'Access denied' })
+            }
+        }
+
+        await trafficDb.resetInstanceMonthlyTraffic(instanceId)
+        const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+        await reconcileTrafficStateForInstanceIds([instanceId])
+
+        return { success: true, message: 'Instance traffic reset completed' }
+    })
+
+    // ==================== 管理员操作 ======================================
+
+    /**
+     * 获取节点的流量统计（按周期）
+     * 聚合该节点下所有实例的流量
+     * 管理员或节点所有者可访问
+     */
+    fastify.get<{
+        Params: { hostId: string }
+    }>('/hosts/:hostId/traffic/history', {
+        onRequest: [fastify.authenticate]
+    }, async (request: FastifyRequest<{
+        Params: { hostId: string }
+    }>, reply: FastifyReply) => {
+        const { user } = request as any
+        const hostId = parseInt(request.params.hostId, 10)
+        if (isNaN(hostId)) {
+            return reply.code(400).send({ error: 'Invalid host ID' })
+        }
+
+        // 验证节点是否存在
+        const host = await db.getHostById(hostId)
+        if (!host) {
+            return reply.code(404).send({ error: 'Host not found' })
+        }
+
+        // 权限检查：管理员或节点所有者
+        if (user.role !== 'admin' && host.user_id !== user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        // 根据节点的流量重置日计算周期
+        const trafficResetDay = host.traffic_reset_day ?? 1
+        const { periodStart, periodEnd } = getTrafficPeriod(trafficResetDay)
+
+        // 获取周期内每日流量历史
+        const history = await trafficDb.getHostDailyTraffic(hostId, trafficResetDay)
+        
+        // 获取流量汇总（基于实例的 monthlyTrafficUsed/monthlyTrafficLimit）
+        const summary = await trafficDb.getHostTrafficSummary(hostId)
+
+        return {
+            trafficResetDay,
+            periodStart: formatLocalDate(periodStart),
+            periodEnd: formatLocalDate(periodEnd),
+            data: history.map(record => ({
+                date: formatLocalDate(record.date),
+                rxTotal: serializeBigInt(record.rxTotal),
+                txTotal: serializeBigInt(record.txTotal),
+                rxFormatted: formatBytes(record.rxTotal),
+                txFormatted: formatBytes(record.txTotal),
+                total: serializeBigInt(record.rxTotal + record.txTotal),
+                totalFormatted: formatBytes(record.rxTotal + record.txTotal)
+            })),
+            summary: {
+                totalUsed: serializeBigInt(summary.totalUsed),
+                totalUsedFormatted: formatBytes(summary.totalUsed),
+                totalLimit: serializeBigInt(summary.totalLimit),
+                totalLimitFormatted: formatBytes(summary.totalLimit)
+            }
+        }
+    })
+
+    /**
+     * 手动触发流量采集（管理员，用于测试）
+     */
+    fastify.post('/traffic/collect', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (_request: FastifyRequest, _reply: FastifyReply) => {
+        const { runTrafficJob } = await import('../services/traffic-scheduler.js')
+
+        // 异步执行，不等待完成
+        runTrafficJob().catch(console.error)
+
+        return { success: true, message: 'Traffic collection job started' }
+    })
+
+    /**
+     * 同步套餐流量限额到所有实例（管理员）
+     * 将所有实例的流量限额更新为其所属套餐的流量限额
+     */
+    fastify.post('/traffic/sync-package-limits', {
+        onRequest: [fastify.authenticateAdmin]
+    }, async (_request: FastifyRequest, _reply: FastifyReply) => {
+        const result = await trafficDb.syncPackageTrafficLimitsToInstances()
+        if (result.instanceIds.length > 0) {
+            try {
+                const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+                await reconcileTrafficStateForInstanceIds(result.instanceIds)
+            } catch (err) {
+                _request.log.warn(err, 'Package traffic limits synced, immediate traffic state reconciliation failed')
+            }
+        }
+
+        return {
+            success: true,
+            message: 'Package traffic limits synced to instances',
+            updatedCount: result.count
+        }
+    })
+}
diff --git a/server/src/routes/transfers.ts b/server/src/routes/transfers.ts
new file mode 100644
index 0000000..5de9475
--- /dev/null
+++ b/server/src/routes/transfers.ts
@@ -0,0 +1,1083 @@
+/**
+ * 实例转移路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import { customAlphabet } from 'nanoid'
+import * as db from '../db/index.js'
+import { createLog } from '../db/logs.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import type { TransferSnapshot } from '../db/transfers.js'
+import { createTransferWithFee, getTransferByIdWithFee, refundTransferFee } from '../db/transfers.js'
+import { sendNotification } from '../lib/notifier.js'
+import { getIncusClient } from '../lib/incus/incus-pool.js'
+import { removeDevice } from '../lib/incus/incus-instances.js'
+import { deleteSnapshot as deleteIncusSnapshot } from '../lib/incus/incus-snapshots.js'
+import { deleteBackup as deleteIncusBackup } from '../lib/incus/incus-backups.js'
+import { renameInstance as renameIncusInstance } from '../lib/incus/incus-restore.js'
+import { getProxySitesByInstanceId, deleteProxySite } from '../db/proxy-sites.js'
+import { createCaddyClient } from '../lib/caddy-client.js'
+import { prisma } from '../db/prisma.js'
+
+// 自定义 nanoid，只使用小写字母和数字（Incus 不允许下划线）
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)
+
+export default async function transferRoutes(fastify: FastifyInstance) {
+    // 搜索用户（用于转移时选择接收方）
+    fastify.get<{
+        Querystring: { username: string }
+    }>('/users/search', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest<{
+        Querystring: { username: string }
+    }>, reply: FastifyReply) => {
+        const { username } = request.query
+
+        if (!username || username.length < 2) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Username must be at least 2 characters'))
+        }
+
+        const user = await db.findUserByUsername(username)
+
+        if (!user) {
+            return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+        }
+
+        // 不能转移给自己
+        if (user.id === request.user.id) {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_TO_SELF))
+        }
+
+        // 不能转移给被封禁的用户
+        if (user.status === 'banned') {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_TO_BANNED))
+        }
+
+        // 只返回用户基本信息，不再返回配额信息
+        return {
+            user: {
+                id: user.id,
+                username: user.username,
+                status: user.status
+            }
+        }
+    })
+
+    // 发起转移请求
+    fastify.post<{
+        Params: { instanceId: string }
+        Body: { targetUsername: string; remark?: string }
+    }>('/instances/:instanceId/transfer', {
+        onRequest: [fastify.authenticateUser],
+        schema: {
+            body: {
+                type: 'object',
+                required: ['targetUsername'],
+                properties: {
+                    targetUsername: { type: 'string', minLength: 2 },
+                    remark: { type: 'string', maxLength: 200 }
+                }
+            }
+        }
+    }, async (request: FastifyRequest<{
+        Params: { instanceId: string }
+        Body: { targetUsername: string; remark?: string }
+    }>, reply: FastifyReply) => {
+        const instanceId = parseInt(request.params.instanceId, 10)
+        const { targetUsername, remark } = request.body
+        const { user } = request
+
+        if (isNaN(instanceId)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // 获取实例
+        const instance = await db.getInstanceById(instanceId)
+        if (!instance) {
+            return reply.code(404).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+        }
+
+        // 验证所有权（只能转移自己的实例）
+        if (instance.user_id !== user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        // 检查实例状态
+        if (instance.status === 'creating' || instance.status === 'deleted') {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_INVALID_STATUS))
+        }
+
+        // 封禁状态不允许转移
+        // 安全措施：防止用户绕过前端禁用通过API转移封禁实例
+        if (instance.status === 'suspended') {
+            if (instance.suspend_reason === 'expired') {
+                return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED_EXPIRED))
+            }
+            return reply.code(403).send(apiError(ErrorCode.INSTANCE_SUSPENDED))
+        }
+
+        // 检查宿主机是否允许转移
+        const host = await db.getHostById(instance.host_id)
+        if (host && host.transfer_enabled === false) {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_HOST_DISABLED))
+        }
+
+        // 检查是否已有待处理的转移
+        const hasPending = await db.hasPendingTransfer(instanceId)
+        if (hasPending) {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_ALREADY_PENDING))
+        }
+
+
+
+        // 查找目标用户
+        const targetUser = await db.findUserByUsername(targetUsername)
+        if (!targetUser) {
+            return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+        }
+
+        // 不能转移给自己
+        if (targetUser.id === instance.user_id) {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_TO_SELF))
+        }
+
+        // 不能转移给被封禁的用户
+        if (targetUser.status === 'banned') {
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_TO_BANNED))
+        }
+
+        // 获取实例相关数据（host 已在上方获取）
+        const pkg = instance.package_id ? await db.getPackageById(instance.package_id) : null
+        const portMappings = await db.getPortMappings(instanceId)
+        const snapshots = await db.getSnapshotsByInstanceId(instanceId)
+        const backups = await db.getBackupsByInstanceId(instanceId)
+
+        // 获取转移手续费配置
+        const transferFee = await db.getSystemConfigFloat('transfer_fee', 0)
+        
+        // 如果有手续费，先检查余额是否足够
+        if (transferFee > 0) {
+            const userBalance = await db.getUserBalance(user.id)
+            if (userBalance < transferFee) {
+                return reply.code(400).send(apiError(ErrorCode.TRANSFER_INSUFFICIENT_BALANCE))
+            }
+        }
+
+        // 构建快照信息
+        const snapshot: TransferSnapshot = {
+            packageId: instance.package_id,
+            packageName: pkg?.name || null,
+            hostId: instance.host_id,
+            hostName: host?.name || 'unknown',
+            hostLocation: host?.location || null,
+            hostCountryCode: host?.country_code || 'us',
+            originalName: instance.name,
+            cpu: instance.cpu,
+            memory: instance.memory,
+            disk: instance.disk,
+            networkMode: instance.network_mode,
+            portMappingsCount: portMappings.length,
+            snapshotsCount: snapshots.length,
+            backupsCount: backups.filter((b: any) => b.status !== 'deleted').length,
+            ipv4: instance.ipv4,
+            ipv6: instance.ipv6
+        }
+
+        // 使用事务安全函数创建转移记录（扣费和创建记录在同一事务中）
+        // 该函数内部会再次检查是否有 pending 转移，确保并发安全
+        let transferId: number
+        try {
+            const result = await createTransferWithFee({
+                instanceId,
+                fromUserId: user.id,
+                toUserId: targetUser.id,
+                snapshot,
+                remark,
+                fee: transferFee,
+                instanceName: instance.name
+            })
+            transferId = result.transferId
+        } catch (error) {
+            const errorMsg = error instanceof Error ? error.message : ''
+            if (errorMsg === 'INSUFFICIENT_BALANCE') {
+                return reply.code(400).send(apiError(ErrorCode.TRANSFER_INSUFFICIENT_BALANCE))
+            }
+            if (errorMsg === 'TRANSFER_ALREADY_PENDING') {
+                return reply.code(400).send(apiError(ErrorCode.TRANSFER_ALREADY_PENDING))
+            }
+            console.error('[Transfer] Failed to create transfer:', error)
+            return reply.code(500).send(apiError(ErrorCode.INTERNAL_ERROR))
+        }
+
+        await createLog(
+            user.id,
+            'transfer',
+            'transfer.create',
+            `Created transfer request for instance "${instance.name}" to user "${targetUser.username}"`,
+            'success',
+            { instanceId }
+        )
+
+        // 通知接收方有新的转移请求
+        await sendNotification(targetUser.id, 'transfer_received', {
+            instanceName: instance.name,
+            senderUsername: user.username
+        })
+
+        return {
+            message: 'Transfer request created',
+            transfer: { id: transferId, status: 'pending' }
+        }
+    })
+
+    // 获取转移列表
+    fastify.get<{
+        Querystring: {
+            type: 'sent' | 'received'
+            status?: string
+            page?: string
+            pageSize?: string
+        }
+    }>('/', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest<{
+        Querystring: {
+            type: 'sent' | 'received'
+            status?: string
+            page?: string
+            pageSize?: string
+            search?: string
+        }
+    }>, reply: FastifyReply) => {
+        const { type, status, page = '1', pageSize = '20', search } = request.query
+        const { user } = request
+
+        if (!type || !['sent', 'received'].includes(type)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'type must be "sent" or "received"'))
+        }
+
+        const options = {
+            page: parseInt(page, 10),
+            pageSize: parseInt(pageSize, 10),
+            status: status as any,
+            search: search as string | undefined
+        }
+
+        const result = type === 'sent'
+            ? await db.getTransfersSent(user.id, options)
+            : await db.getTransfersReceived(user.id, options)
+
+        // 对于 sent 类型的 pending 转移，发起方可以直接推送
+        const transfersWithCanPush = result.items.map((t: any) => {
+            // 只有 sent tab 且状态为 pending 时，发起方可以直接推送
+            const canPush = type === 'sent' && t.status === 'pending' && t.fromUserId === user.id
+            return {
+                    id: t.id,
+                    instanceId: t.instanceId,
+                    instanceName: t.instance?.name,
+                    instanceStatus: t.instance?.status,
+                    instanceImage: t.instance?.image,
+                    fromUser: t.fromUser ? { id: t.fromUser.id, username: t.fromUser.username, email: t.fromUser.email, avatarStyle: t.fromUser.avatarStyle, avatarBadgeId: t.fromUser.avatarBadgeId ?? null } : null,
+                    toUser: t.toUser ? { id: t.toUser.id, username: t.toUser.username, email: t.toUser.email, avatarStyle: t.toUser.avatarStyle, avatarBadgeId: t.toUser.avatarBadgeId ?? null } : null,
+                    status: t.status,
+                    snapshot: t.snapshot,
+                    remark: t.remark,
+                    rejectReason: t.rejectReason,
+                    createdAt: t.createdAt,
+                    acceptedAt: t.acceptedAt,
+                    rejectedAt: t.rejectedAt,
+                    cancelledAt: t.cancelledAt,
+                    canPush
+                }
+            })
+
+        return {
+            transfers: transfersWithCanPush,
+            total: result.total,
+            page: result.page,
+            pageSize: result.pageSize,
+            totalPages: result.totalPages
+        }
+    })
+
+    // 获取待接收数量
+    fastify.get('/pending-count', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest) => {
+        const count = await db.getPendingReceivedCount(request.user.id)
+        return { count }
+    })
+
+    // 获取转移详情
+    fastify.get<{ Params: { id: string } }>('/:id', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const transferId = parseInt(request.params.id, 10)
+        const { user } = request
+
+        if (isNaN(transferId)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        const transfer = await db.getTransferById(transferId)
+        if (!transfer) {
+            return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+        }
+
+        // 管理员只管理系统层面，只有发起方和接收方可以查看
+        if (transfer.fromUserId !== user.id && transfer.toUserId !== user.id) {
+            return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+        }
+
+        return {
+            transfer: {
+                id: transfer.id,
+                instanceId: transfer.instanceId,
+                instanceName: transfer.instance?.name,
+                instanceStatus: transfer.instance?.status,
+                fromUser: { id: transfer.fromUser.id, username: transfer.fromUser.username, email: transfer.fromUser.email, avatarStyle: transfer.fromUser.avatarStyle, avatarBadgeId: transfer.fromUser.avatarBadgeId ?? null },
+                toUser: { id: transfer.toUser.id, username: transfer.toUser.username, email: transfer.toUser.email, avatarStyle: transfer.toUser.avatarStyle, avatarBadgeId: transfer.toUser.avatarBadgeId ?? null },
+                status: transfer.status,
+                snapshot: transfer.snapshot,
+                remark: transfer.remark,
+                rejectReason: transfer.rejectReason,
+                createdAt: transfer.createdAt,
+                acceptedAt: transfer.acceptedAt,
+                rejectedAt: transfer.rejectedAt,
+                cancelledAt: transfer.cancelledAt
+            }
+        }
+    })
+
+    // 接受转移
+    fastify.post<{ Params: { id: string } }>('/:id/accept', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const transferId = parseInt(request.params.id, 10)
+        const { user } = request
+
+        if (isNaN(transferId)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // ===== 并发安全：使用乐观锁，原子性地检查并更新状态 =====
+        // 使用 updateMany 原子操作，只有 status='pending' 时才更新为 'processing'
+        const lockResult = await prisma.instanceTransfer.updateMany({
+            where: {
+                id: transferId,
+                status: 'pending',
+                toUserId: user.id  // 同时验证权限
+            },
+            data: {
+                status: 'processing'  // 临时锁定状态
+            }
+        })
+
+        // 如果没有更新任何记录，说明状态已变化或权限不足
+        if (lockResult.count === 0) {
+            // 需要区分是不存在、权限不足还是状态已变化
+            const transfer = await db.getTransferById(transferId)
+            if (!transfer) {
+                return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+            }
+            if (transfer.toUserId !== user.id) {
+                return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+            }
+            // 状态已不是 pending（可能是 processing 或其他）
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_NOT_PENDING))
+        }
+
+        // 重新获取完整的转移信息
+        const transfer = await db.getTransferById(transferId)
+        if (!transfer) {
+            return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+        }
+
+        // ===== 失败时的回滚函数 =====
+        const rollbackToPending = async () => {
+            try {
+                await prisma.instanceTransfer.update({
+                    where: { id: transferId },
+                    data: { status: 'pending' }
+                })
+            } catch (err) {
+                console.error('[Transfer] Failed to rollback status:', err)
+            }
+        }
+
+        // 检查实例是否还存在
+        const instance = await db.getInstanceById(transfer.instanceId)
+        if (!instance || instance.status === 'deleted') {
+            await db.cancelTransfer(transferId)
+            return reply.code(400).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+        }
+
+        // ===== 检查实例状态：必须是停止状态才能重命名 =====
+        if (instance.status === 'running') {
+            await rollbackToPending()
+            return reply.code(400).send({
+                error: 'Instance must be stopped before transfer',
+                code: 'INSTANCE_MUST_BE_STOPPED'
+            })
+        }
+
+        // 注意：不再检查配额，只检查用户状态（已在搜索用户时检查）
+
+        // ===== 获取 Incus 客户端 =====
+        const host = await db.getHostById(instance.host_id)
+        let client = null
+        if (host) {
+            try {
+                client = await getIncusClient(host)
+            } catch (err) {
+                console.error('[Transfer] Failed to get Incus client:', err)
+            }
+        }
+
+        // 必须能连接到宿主机才能继续
+        if (!client) {
+            await rollbackToPending()
+            return reply.code(500).send({
+                error: 'Cannot connect to host',
+                code: 'HOST_UNAVAILABLE'
+            })
+        }
+
+        // ===== 1. 先重命名实例（最关键的操作，失败则不影响任何附属资源）=====
+        const oldIncusId = instance.incus_id
+        const newIncusId = `u${user.id}-${nanoid()}`
+        
+        try {
+            await renameIncusInstance(client, oldIncusId, newIncusId)
+            console.log(`[Transfer] Renamed instance from ${oldIncusId} to ${newIncusId}`)
+        } catch (err) {
+            console.error('[Transfer] Failed to rename instance in Incus:', err)
+            await createLog(
+                user.id,
+                'transfer',
+                'transfer.accept',
+                `Failed to rename instance "${instance.name}" in Incus: ${err instanceof Error ? err.message : String(err)}`,
+                'failed',
+                { instanceId: instance.id }
+            )
+            await rollbackToPending()
+            return reply.code(500).send({
+                error: 'Failed to rename instance',
+                code: 'INCUS_RENAME_FAILED'
+            })
+        }
+
+        // ===== 2. 计算新名称并更新数据库（在删除附属资源之前！）=====
+        const suffix = `（${transfer.fromUser.username}转）`
+        let newName = instance.name
+        if (!newName.endsWith(suffix)) {
+            newName = instance.name + suffix
+            if (newName.length > 64) {
+                newName = instance.name.substring(0, 64 - suffix.length) + suffix
+            }
+        }
+
+        // 执行转移（更新所有者、名称和 Incus ID）
+        // 注意：如果数据库更新失败，需要尝试回滚 Incus 重命名
+        try {
+            await db.executeTransfer(
+                transferId,
+                transfer.instanceId,
+                transfer.fromUserId,
+                transfer.toUserId,
+                newName,
+                newIncusId
+            )
+        } catch (dbErr) {
+            console.error('[Transfer] Database update failed:', dbErr)
+            // 尝试回滚 Incus 重命名
+            try {
+                await renameIncusInstance(client, newIncusId, oldIncusId)
+                console.log(`[Transfer] Rolled back Incus rename from ${newIncusId} to ${oldIncusId}`)
+            } catch (rollbackErr) {
+                // 回滚失败，记录严重错误（需要人工干预）
+                console.error('[Transfer] CRITICAL: Failed to rollback Incus rename!', {
+                    oldIncusId,
+                    newIncusId,
+                    error: rollbackErr
+                })
+            }
+            await createLog(
+                user.id,
+                'transfer',
+                'transfer.accept',
+                `Failed to update database for instance "${instance.name}": ${dbErr instanceof Error ? dbErr.message : String(dbErr)}`,
+                'failed',
+                { instanceId: instance.id }
+            )
+            await rollbackToPending()
+            return reply.code(500).send({
+                error: 'Failed to update database',
+                code: 'DATABASE_ERROR'
+            })
+        }
+
+        // ===== 3. 数据库更新成功后，删除附属资源（失败仅记录日志，不影响转移结果）=====
+        
+        // 3.1 删除反代站点（Caddy 远程 + 数据库）
+        const proxySites = await getProxySitesByInstanceId(transfer.instanceId)
+        if (proxySites.length > 0) {
+            if (host?.caddy_enabled && host.caddy_username && host.caddy_password) {
+                const targetHost = host.nat_public_ip || host.ip_address
+                if (targetHost) {
+                    const caddyClient = createCaddyClient({
+                        host: targetHost,
+                        port: host.caddy_port || 8444,
+                        username: host.caddy_username,
+                        password: host.caddy_password
+                    })
+                    for (const site of proxySites) {
+                        try {
+                            await caddyClient.deleteSite(site.domain)
+                        } catch (err) {
+                            console.error(`[Transfer] Failed to delete Caddy site (${site.domain}):`, err)
+                        }
+                    }
+                }
+            }
+            for (const site of proxySites) {
+                try {
+                    await deleteProxySite(site.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete proxy site DB record (${site.domain}):`, err)
+                }
+            }
+        }
+
+        // 3.2 删除端口映射（Incus 设备 + 数据库）
+        // 注意：实例已重命名，设备随实例迁移，所以使用新的 incus_id
+        const portMappings = await db.getPortMappings(transfer.instanceId)
+        if (portMappings.length > 0) {
+            for (const mapping of portMappings) {
+                const map = mapping as { id: number; protocol: string; public_port: number }
+                const deviceName = `proxy-${map.protocol}-${map.public_port}`
+                try {
+                    // 使用新的 incus_id 删除设备
+                    await removeDevice(client, newIncusId, deviceName)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to remove port mapping device (${deviceName}):`, err)
+                }
+                try {
+                    await db.deletePortMapping(map.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete port mapping DB record (${map.id}):`, err)
+                }
+            }
+        }
+
+        // 3.3 删除快照（Incus 远程 + 数据库）
+        const snapshots = await db.getSnapshotsByInstanceId(transfer.instanceId)
+        if (snapshots.length > 0) {
+            for (const snapshot of snapshots) {
+                try {
+                    // 使用新的 incus_id 删除快照
+                    await deleteIncusSnapshot(client, newIncusId, snapshot.incus_name)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete snapshot (${snapshot.name}):`, err)
+                }
+                try {
+                    await db.deleteSnapshot(snapshot.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete snapshot DB record (${snapshot.id}):`, err)
+                }
+            }
+        }
+
+        // 3.4 删除备份（Incus 远程 + 数据库软删除）
+        const backups = await db.getBackupsByInstanceId(transfer.instanceId)
+        if (backups.length > 0) {
+            for (const backup of backups) {
+                try {
+                    // 使用新的 incus_id 删除备份
+                    await deleteIncusBackup(client, newIncusId, backup.incus_name)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete backup (${backup.name}):`, err)
+                }
+                try {
+                    await db.deleteBackup(backup.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete backup DB record (${backup.id}):`, err)
+                }
+            }
+        }
+
+        // 3.5 删除快照策略和备份策略
+        try {
+            await prisma.snapshotPolicy.deleteMany({ where: { instanceId: transfer.instanceId } })
+            await prisma.backupPolicy.deleteMany({ where: { instanceId: transfer.instanceId } })
+        } catch (err) {
+            console.error('[Transfer] Failed to delete policies:', err)
+        }
+
+        await createLog(
+            user.id,
+            'transfer',
+            'transfer.accept',
+            `Accepted transfer of instance "${instance.name}" from "${transfer.fromUser.username}"`,
+            'success',
+            { instanceId: transfer.instanceId }
+        )
+
+        // 通知发起方转移已被接受
+        await sendNotification(transfer.fromUserId, 'transfer_accepted', {
+            instanceName: instance.name,
+            receiverUsername: user.username
+        })
+
+        return { message: 'Transfer accepted' }
+    })
+
+    // 拒绝转移
+    fastify.post<{
+        Params: { id: string }
+        Body: { reason?: string }
+    }>('/:id/reject', {
+        onRequest: [fastify.authenticateUser],
+        schema: {
+            body: {
+                type: 'object',
+                properties: {
+                    reason: { type: 'string', maxLength: 200 }
+                }
+            }
+        }
+    }, async (request: FastifyRequest<{
+        Params: { id: string }
+        Body: { reason?: string }
+    }>, reply: FastifyReply) => {
+        const transferId = parseInt(request.params.id, 10)
+        const { reason } = request.body
+        const { user } = request
+
+        if (isNaN(transferId)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // ===== 并发安全：使用乐观锁，原子性地检查并更新状态 =====
+        const rejectResult = await prisma.instanceTransfer.updateMany({
+            where: {
+                id: transferId,
+                status: 'pending',
+                toUserId: user.id  // 同时验证权限
+            },
+            data: {
+                status: 'rejected',
+                rejectReason: reason || null,
+                rejectedAt: new Date()
+            }
+        })
+
+        // 如果没有更新任何记录，需要区分原因
+        if (rejectResult.count === 0) {
+            const transfer = await db.getTransferById(transferId)
+            if (!transfer) {
+                return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+            }
+            if (transfer.toUserId !== user.id) {
+                return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+            }
+            // 状态已不是 pending
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_NOT_PENDING))
+        }
+
+        // 重新获取转移信息用于日志和通知（使用包含fee字段的查询）
+        const transfer = await getTransferByIdWithFee(transferId)
+        if (!transfer) {
+            // 已更新成功但查询失败，直接返回成功
+            return { message: 'Transfer rejected' }
+        }
+
+        // 退还手续费（如果有）
+        if (transfer.fee && Number(transfer.fee) > 0) {
+            const refundResult = await refundTransferFee({
+                transferId: transfer.id,
+                fromUserId: transfer.fromUserId,
+                fee: Number(transfer.fee),
+                instanceId: transfer.instanceId,
+                instanceName: transfer.instance?.name || 'Unknown',
+                reason: 'rejected'
+            })
+            
+            if (!refundResult.success) {
+                console.error('[Transfer] Failed to refund transfer fee:', refundResult.error)
+            }
+        }
+
+        await createLog(
+            user.id,
+            'transfer',
+            'transfer.reject',
+            `Rejected transfer of instance "${transfer.instance?.name}" from "${transfer.fromUser.username}"${reason ? `: ${reason}` : ''}`,
+            'success',
+            { instanceId: transfer.instanceId }
+        )
+
+        // 通知发起方转移已被拒绝
+        await sendNotification(transfer.fromUserId, 'transfer_rejected', {
+            instanceName: transfer.instance?.name || 'Unknown',
+            receiverUsername: user.username
+        })
+
+        return { message: 'Transfer rejected' }
+    })
+
+    // 取消转移
+    fastify.post<{ Params: { id: string } }>('/:id/cancel', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const transferId = parseInt(request.params.id, 10)
+        const { user } = request
+
+        if (isNaN(transferId)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // ===== 并发安全：使用乐观锁，原子性地检查并更新状态 =====
+        const cancelResult = await prisma.instanceTransfer.updateMany({
+            where: {
+                id: transferId,
+                status: 'pending',
+                fromUserId: user.id  // 同时验证权限（只有发起方可以取消）
+            },
+            data: {
+                status: 'cancelled',
+                cancelledAt: new Date()
+            }
+        })
+
+        // 如果没有更新任何记录，需要区分原因
+        if (cancelResult.count === 0) {
+            const transfer = await db.getTransferById(transferId)
+            if (!transfer) {
+                return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+            }
+            if (transfer.fromUserId !== user.id) {
+                return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+            }
+            // 状态已不是 pending
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_NOT_PENDING))
+        }
+
+        // 重新获取转移信息用于日志、通知和退款（使用包含fee字段的查询）
+        const transfer = await getTransferByIdWithFee(transferId)
+        if (!transfer) {
+            // 已更新成功但查询失败，直接返回成功
+            return { message: 'Transfer cancelled' }
+        }
+
+        // 退还手续费（如果有）
+        if (transfer.fee && Number(transfer.fee) > 0) {
+            const refundResult = await refundTransferFee({
+                transferId: transfer.id,
+                fromUserId: transfer.fromUserId,
+                fee: Number(transfer.fee),
+                instanceId: transfer.instanceId,
+                instanceName: transfer.instance?.name || 'Unknown',
+                reason: 'cancelled'
+            })
+            
+            if (!refundResult.success) {
+                console.error('[Transfer] Failed to refund transfer fee on cancel:', refundResult.error)
+            }
+        }
+
+        await createLog(
+            user.id,
+            'transfer',
+            'transfer.cancel',
+            `Cancelled transfer of instance "${transfer.instance?.name}" to "${transfer.toUser.username}"`,
+            'success',
+            { instanceId: transfer.instanceId }
+        )
+
+        // 通知接收方转移已被取消
+        await sendNotification(transfer.toUserId, 'transfer_cancelled', {
+            instanceName: transfer.instance?.name || 'Unknown',
+            senderUsername: user.username
+        })
+
+        return { message: 'Transfer cancelled' }
+    })
+
+    // 直接推送（宿主机所有者作为转移发起方时可直接将实例推送给接收方）
+    fastify.post<{ Params: { id: string } }>('/:id/push', {
+        onRequest: [fastify.authenticateUser]
+    }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+        const transferId = parseInt(request.params.id, 10)
+        const { user } = request
+
+        if (isNaN(transferId)) {
+            return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+        }
+
+        // ===== 并发安全：使用乐观锁，原子性地检查并更新状态 =====
+        // 使用 updateMany 原子操作，只有 status='pending' 且 fromUserId=user.id 时才更新为 'processing'
+        const lockResult = await prisma.instanceTransfer.updateMany({
+            where: {
+                id: transferId,
+                status: 'pending',
+                fromUserId: user.id  // 同时验证权限（只有发起方可以推送）
+            },
+            data: {
+                status: 'processing'  // 临时锁定状态
+            }
+        })
+
+        // 如果没有更新任何记录，说明状态已变化或权限不足
+        if (lockResult.count === 0) {
+            const transfer = await db.getTransferById(transferId)
+            if (!transfer) {
+                return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+            }
+            if (transfer.fromUserId !== user.id) {
+                return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+            }
+            // 状态已不是 pending
+            return reply.code(400).send(apiError(ErrorCode.TRANSFER_NOT_PENDING))
+        }
+
+        // 重新获取完整的转移信息
+        const transfer = await db.getTransferById(transferId)
+        if (!transfer) {
+            return reply.code(404).send(apiError(ErrorCode.TRANSFER_NOT_FOUND))
+        }
+
+        // ===== 失败时的回滚函数 =====
+        const rollbackToPending = async () => {
+            try {
+                await prisma.instanceTransfer.update({
+                    where: { id: transferId },
+                    data: { status: 'pending' }
+                })
+            } catch (err) {
+                console.error('[Transfer] Failed to rollback status:', err)
+            }
+        }
+
+        // ===== 检查实例和宿主机 =====
+        const instance = await db.getInstanceById(transfer.instanceId)
+        if (!instance || instance.status === 'deleted') {
+            await db.cancelTransfer(transferId)
+            return reply.code(400).send(apiError(ErrorCode.INSTANCE_NOT_FOUND))
+        }
+
+        const host = await db.getHostById(instance.host_id)
+        if (!host) {
+            await rollbackToPending()
+            return reply.code(404).send(apiError(ErrorCode.HOST_NOT_FOUND))
+        }
+
+        // 权限检查：发起方可以直接推送（已在 lockResult 中通过 fromUserId 验证）
+
+        // ===== 检查实例状态：必须是停止状态才能重命名 =====
+        if (instance.status === 'running') {
+            await rollbackToPending()
+            return reply.code(400).send({
+                error: 'Instance must be stopped before transfer',
+                code: 'INSTANCE_MUST_BE_STOPPED'
+            })
+        }
+
+        // ===== 获取 Incus 客户端 =====
+        let client = null
+        try {
+            client = await getIncusClient(host)
+        } catch (err) {
+            console.error('[Transfer] Failed to get Incus client:', err)
+        }
+
+        if (!client) {
+            await rollbackToPending()
+            return reply.code(500).send({
+                error: 'Cannot connect to host',
+                code: 'HOST_UNAVAILABLE'
+            })
+        }
+
+        // ===== 1. 先重命名实例 =====
+        const oldIncusId = instance.incus_id
+        const newIncusId = `u${transfer.toUserId}-${nanoid()}`
+        
+        try {
+            await renameIncusInstance(client, oldIncusId, newIncusId)
+            console.log(`[Transfer] Renamed instance from ${oldIncusId} to ${newIncusId}`)
+        } catch (err) {
+            console.error('[Transfer] Failed to rename instance in Incus:', err)
+            await createLog(
+                user.id,
+                'transfer',
+                'transfer.push',
+                `Failed to rename instance "${instance.name}" in Incus: ${err instanceof Error ? err.message : String(err)}`,
+                'failed',
+                { instanceId: instance.id }
+            )
+            await rollbackToPending()
+            return reply.code(500).send({
+                error: 'Failed to rename instance',
+                code: 'INCUS_RENAME_FAILED'
+            })
+        }
+
+        // ===== 2. 计算新名称并更新数据库 =====
+        const suffix = `（${user.username}转）`
+        let newName = instance.name
+        if (!newName.endsWith(suffix)) {
+            newName = instance.name + suffix
+            if (newName.length > 64) {
+                newName = instance.name.substring(0, 64 - suffix.length) + suffix
+            }
+        }
+
+        try {
+            await db.executeTransfer(
+                transferId,
+                transfer.instanceId,
+                transfer.fromUserId,
+                transfer.toUserId,
+                newName,
+                newIncusId
+            )
+        } catch (dbErr) {
+            console.error('[Transfer] Database update failed:', dbErr)
+            // 尝试回滚 Incus 重命名
+            try {
+                await renameIncusInstance(client, newIncusId, oldIncusId)
+                console.log(`[Transfer] Rolled back Incus rename from ${newIncusId} to ${oldIncusId}`)
+            } catch (rollbackErr) {
+                console.error('[Transfer] CRITICAL: Failed to rollback Incus rename!', {
+                    oldIncusId,
+                    newIncusId,
+                    error: rollbackErr
+                })
+            }
+            await createLog(
+                user.id,
+                'transfer',
+                'transfer.push',
+                `Failed to update database for instance "${instance.name}": ${dbErr instanceof Error ? dbErr.message : String(dbErr)}`,
+                'failed',
+                { instanceId: instance.id }
+            )
+            await rollbackToPending()
+            return reply.code(500).send({
+                error: 'Failed to update database',
+                code: 'DATABASE_ERROR'
+            })
+        }
+
+        // ===== 3. 数据库更新成功后，删除附属资源 =====
+        
+        // 3.1 删除反代站点
+        const proxySites = await getProxySitesByInstanceId(transfer.instanceId)
+        if (proxySites.length > 0) {
+            if (host?.caddy_enabled && host.caddy_username && host.caddy_password) {
+                const targetHost = host.nat_public_ip || host.ip_address
+                if (targetHost) {
+                    const caddyClient = createCaddyClient({
+                        host: targetHost,
+                        port: host.caddy_port || 8444,
+                        username: host.caddy_username,
+                        password: host.caddy_password
+                    })
+                    for (const site of proxySites) {
+                        try {
+                            await caddyClient.deleteSite(site.domain)
+                        } catch (err) {
+                            console.error(`[Transfer] Failed to delete Caddy site (${site.domain}):`, err)
+                        }
+                    }
+                }
+            }
+            for (const site of proxySites) {
+                try {
+                    await deleteProxySite(site.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete proxy site DB record (${site.domain}):`, err)
+                }
+            }
+        }
+
+        // 3.2 删除端口映射
+        const portMappings = await db.getPortMappings(transfer.instanceId)
+        if (portMappings.length > 0) {
+            for (const mapping of portMappings) {
+                const map = mapping as { id: number; protocol: string; public_port: number }
+                const deviceName = `proxy-${map.protocol}-${map.public_port}`
+                try {
+                    await removeDevice(client, newIncusId, deviceName)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to remove port mapping device (${deviceName}):`, err)
+                }
+                try {
+                    await db.deletePortMapping(map.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete port mapping DB record (${map.id}):`, err)
+                }
+            }
+        }
+
+        // 3.3 删除快照
+        const snapshots = await db.getSnapshotsByInstanceId(transfer.instanceId)
+        if (snapshots.length > 0) {
+            for (const snapshot of snapshots) {
+                try {
+                    await deleteIncusSnapshot(client, newIncusId, snapshot.incus_name)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete snapshot (${snapshot.name}):`, err)
+                }
+                try {
+                    await db.deleteSnapshot(snapshot.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete snapshot DB record (${snapshot.id}):`, err)
+                }
+            }
+        }
+
+        // 3.4 删除备份
+        const backups = await db.getBackupsByInstanceId(transfer.instanceId)
+        if (backups.length > 0) {
+            for (const backup of backups) {
+                try {
+                    await deleteIncusBackup(client, newIncusId, backup.incus_name)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete backup (${backup.name}):`, err)
+                }
+                try {
+                    await db.deleteBackup(backup.id)
+                } catch (err) {
+                    console.error(`[Transfer] Failed to delete backup DB record (${backup.id}):`, err)
+                }
+            }
+        }
+
+        // 3.5 删除快照策略和备份策略
+        try {
+            await prisma.snapshotPolicy.deleteMany({ where: { instanceId: transfer.instanceId } })
+            await prisma.backupPolicy.deleteMany({ where: { instanceId: transfer.instanceId } })
+        } catch (err) {
+            console.error('[Transfer] Failed to delete policies:', err)
+        }
+
+        await createLog(
+            user.id,
+            'transfer',
+            'transfer.push',
+            `Pushed instance "${instance.name}" to user "${transfer.toUser.username}"`,
+            'success',
+            { instanceId: transfer.instanceId }
+        )
+
+        // 通知接收方实例已被推送
+        await sendNotification(transfer.toUserId, 'transfer_accepted', {
+            instanceName: instance.name,
+            receiverUsername: transfer.toUser.username
+        })
+
+        return { message: 'Transfer pushed successfully' }
+    })
+}
diff --git a/server/src/routes/user-invites.ts b/server/src/routes/user-invites.ts
new file mode 100644
index 0000000..46dce48
--- /dev/null
+++ b/server/src/routes/user-invites.ts
@@ -0,0 +1,198 @@
+/**
+ * 用户邀请码管理
+ */
+
+import { nanoid } from 'nanoid'
+import type { Prisma } from '@prisma/client'
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
+import { prisma } from '../db/prisma.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import {
+  chargeInviteGenerationCost,
+  getInviteCostOptions,
+  getInviteCostQuotes,
+  getInviteExpiryDays,
+  getUserInviteBalances
+} from '../lib/invite-pricing.js'
+
+interface GenerateInviteBody {
+  costResource: string
+  count?: number
+}
+
+function toInviteCodePayload(invite: {
+  id: number
+  code: string
+  createdBy: number
+  usedBy: number | null
+  usedAt: Date | null
+  expiresAt: Date | null
+  createdAt: Date
+  costSnapshot: unknown
+  user?: {
+    id: number
+    username: string
+    email: string | null
+    avatarStyle: string
+    avatarBadgeId: string | null
+    createdAt: Date
+  } | null
+}) {
+  return {
+    id: invite.id,
+    code: invite.code,
+    createdBy: invite.createdBy,
+    usedBy: invite.usedBy,
+    usedAt: invite.usedAt?.toISOString() ?? null,
+    expiresAt: invite.expiresAt?.toISOString() ?? null,
+    createdAt: invite.createdAt.toISOString(),
+    costSnapshot: invite.costSnapshot,
+    registerUrl: `/register/${invite.code}`,
+    usedByUser: invite.user
+      ? {
+          id: invite.user.id,
+          username: invite.user.username,
+          email: invite.user.email,
+          avatarStyle: invite.user.avatarStyle,
+          avatarBadgeId: invite.user.avatarBadgeId,
+          createdAt: invite.user.createdAt.toISOString()
+        }
+      : null
+  }
+}
+
+export default async function userInviteRoutes(fastify: FastifyInstance) {
+  fastify.get('/summary', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest) => {
+    const userId = request.user.id
+    const [costOptions, balances, total, used] = await Promise.all([
+      getInviteCostQuotes(),
+      getUserInviteBalances(userId),
+      prisma.inviteCode.count({ where: { createdBy: userId } }),
+      prisma.inviteCode.count({ where: { createdBy: userId, usedBy: { not: null } } })
+    ])
+
+    return {
+      costOptions,
+      balances,
+      stats: {
+        total,
+        used,
+        unused: total - used,
+        usageRate: total > 0 ? Math.round((used / total) * 1000) / 10 : 0
+      }
+    }
+  })
+
+  fastify.get<{
+    Querystring: { page?: string; pageSize?: string }
+  }>('/', {
+    onRequest: [fastify.authenticateUser]
+  }, async (request: FastifyRequest<{ Querystring: { page?: string; pageSize?: string } }>) => {
+    const page = Math.max(1, parseInt(request.query.page || '1', 10))
+    const pageSize = Math.min(100, Math.max(1, parseInt(request.query.pageSize || '20', 10)))
+    const userId = request.user.id
+
+    const [total, invites] = await Promise.all([
+      prisma.inviteCode.count({ where: { createdBy: userId } }),
+      prisma.inviteCode.findMany({
+        where: { createdBy: userId },
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+              email: true,
+              avatarStyle: true,
+              avatarBadgeId: true,
+              createdAt: true
+            }
+          }
+        },
+        orderBy: { id: 'desc' },
+        skip: (page - 1) * pageSize,
+        take: pageSize
+      })
+    ])
+
+    return {
+      invites: invites.map(toInviteCodePayload),
+      total,
+      page,
+      pageSize,
+      totalPages: Math.max(1, Math.ceil(total / pageSize))
+    }
+  })
+
+  fastify.post<{ Body: GenerateInviteBody }>('/', {
+    onRequest: [fastify.authenticateUser],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } },
+    schema: {
+      body: {
+        type: 'object',
+        required: ['costResource'],
+        properties: {
+          costResource: { type: 'string', minLength: 1, maxLength: 64 },
+          count: { type: 'integer', minimum: 1, maximum: 10 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{ Body: GenerateInviteBody }>, reply: FastifyReply) => {
+    const userId = request.user.id
+    const count = request.body.count ?? 1
+    const costResource = request.body.costResource
+    const [expiryDays, costOptions] = await Promise.all([
+      getInviteExpiryDays(),
+      getInviteCostOptions()
+    ])
+    const expiresAt = expiryDays > 0
+      ? new Date(Date.now() + expiryDays * 24 * 60 * 60 * 1000)
+      : null
+
+    try {
+      const createdInvites = await prisma.$transaction(async (tx) => {
+        const results: Awaited<ReturnType<typeof tx.inviteCode.create>>[] = []
+
+        for (let index = 0; index < count; index++) {
+          const code = nanoid(12)
+          const costSnapshot = await chargeInviteGenerationCost(tx, userId, code, costResource, costOptions)
+          const invite = await tx.inviteCode.create({
+            data: {
+              code,
+              createdBy: userId,
+              expiresAt,
+              costSnapshot: costSnapshot as unknown as Prisma.InputJsonObject
+            }
+          })
+          results.push(invite)
+        }
+
+        return results
+      })
+
+      return {
+        invites: createdInvites.map(invite => toInviteCodePayload({ ...invite, user: null })),
+        count: createdInvites.length
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      if (message === 'INVITE_COST_OPTION_UNAVAILABLE') {
+        return reply.code(400).send({ error: '当前邀请码生成方式不可用', code: 'INVITE_COST_OPTION_UNAVAILABLE' })
+      }
+      if (message === 'INVITE_COST_RESOURCE_UNSUPPORTED') {
+        return reply.code(400).send({ error: '暂不支持该生成方式', code: 'INVITE_COST_RESOURCE_UNSUPPORTED' })
+      }
+      if (message === 'INSUFFICIENT_BALANCE') {
+        return reply.code(400).send({ error: '余额不足', code: 'INSUFFICIENT_BALANCE' })
+      }
+      if (message === 'INSUFFICIENT_POINTS') {
+        return reply.code(400).send({ error: '积分不足', code: 'INSUFFICIENT_POINTS' })
+      }
+      if (message === 'USER_NOT_FOUND') {
+        return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+      }
+      throw err
+    }
+  })
+}
diff --git a/server/src/routes/users.ts b/server/src/routes/users.ts
new file mode 100644
index 0000000..ee0e1a2
--- /dev/null
+++ b/server/src/routes/users.ts
@@ -0,0 +1,1655 @@
+/**
+ * 用户管理路由
+ */
+
+// @ts-ignore - bcryptjs has its own types
+import bcrypt from 'bcryptjs'
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import * as db from '../db/index.js'
+import { prisma } from '../db/prisma.js'
+import { createLog } from '../db/logs.js'
+import type { UpdateUserRequest } from '../types/api.js'
+import { apiError, ErrorCode } from '../lib/errors.js'
+import { containsDangerousChars, revokeAllUserRefreshTokens, getUserSessions, logAdminAction, validatePassword, invalidateUserAccessTokens } from '../lib/security.js'
+import {
+    isOperationVerified,
+    consumeOperationVerification
+} from '../lib/operation-verification.js'
+import { isSmtpEnabled, sendBanNotificationEmail, sendVerificationEmail } from '../lib/mailer.js'
+import { sendNotification } from '../lib/notifier.js'
+import { closeUserSessions } from '../lib/terminal-proxy.js'
+import { createVerificationCode, verifyCode } from '../db/email-verification.js'
+import { validateEmailDomain } from '../lib/email-domain.js'
+import { HOSTING_BALANCE_LOG_LOCK_NAMESPACE, USER_ADMIN_ROLE_LOCK_NAMESPACE, tryAdvisoryTransactionLock } from '../db/advisory-locks.js'
+
+const USER_SEARCH_FIELDS = ['username', 'id', 'email'] as const
+type UserSearchField = (typeof USER_SEARCH_FIELDS)[number]
+
+function parseUserSearchFields(rawValue?: string): UserSearchField[] {
+  if (!rawValue) {
+    return [...USER_SEARCH_FIELDS]
+  }
+
+  const validFields = new Set<string>(USER_SEARCH_FIELDS)
+  const fields = rawValue
+    .split(',')
+    .map(field => field.trim())
+    .filter((field): field is UserSearchField => validFields.has(field))
+
+  return fields.length > 0
+    ? USER_SEARCH_FIELDS.filter(field => fields.includes(field))
+    : [...USER_SEARCH_FIELDS]
+}
+
+function parseBooleanQuery(rawValue?: string): boolean {
+  if (!rawValue) {
+    return false
+  }
+
+  return ['1', 'true', 'yes', 'on'].includes(rawValue.toLowerCase())
+}
+
+export default async function userRoutes(fastify: FastifyInstance) {
+  async function validateEmailChangeTarget(
+    rawEmail: string,
+    currentEmail: string | null,
+    userId: number
+  ): Promise<{ normalizedEmail: string } | { error: ReturnType<typeof apiError> }> {
+    if (!rawEmail || !rawEmail.includes('@')) {
+      return { error: apiError(ErrorCode.INVALID_EMAIL) }
+    }
+
+    const emailWithoutAllowed = rawEmail.replace(/@/g, '').replace(/\./g, '')
+    if (containsDangerousChars(emailWithoutAllowed)) {
+      return { error: apiError(ErrorCode.EMAIL_CONTAINS_ILLEGAL) }
+    }
+
+    const normalizedEmail = rawEmail.toLowerCase().trim()
+    const normalizedCurrentEmail = currentEmail?.toLowerCase().trim() || null
+    if (normalizedCurrentEmail && normalizedEmail === normalizedCurrentEmail) {
+      return { error: apiError(ErrorCode.INVALID_PARAMS, 'New email must be different from current email') }
+    }
+
+    const domainValidation = await validateEmailDomain(normalizedEmail)
+    if (!domainValidation.valid) {
+      return { error: apiError(ErrorCode.EMAIL_DOMAIN_NOT_ALLOWED, domainValidation.domain || undefined) }
+    }
+
+    const existingUser = await db.findUserByEmail(normalizedEmail)
+    if (existingUser && existingUser.id !== userId) {
+      return { error: apiError(ErrorCode.EMAIL_ALREADY_REGISTERED) }
+    }
+
+    return { normalizedEmail }
+  }
+
+  // 获取用户列表 (管理员，支持分页和搜索)
+  fastify.get<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      searchFields?: string
+      exact?: string
+    }
+  }>('/', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Querystring: {
+      page?: string
+      pageSize?: string
+      search?: string
+      searchFields?: string
+      exact?: string
+    }
+  }>, _reply: FastifyReply) => {
+
+    const { page = '1', pageSize = '20', search = '', searchFields, exact } = request.query
+
+    const result = await db.getUsersPaginated({
+      page: parseInt(page, 10),
+      pageSize: parseInt(pageSize, 10),
+      search,
+      searchFields: parseUserSearchFields(searchFields),
+      exactMatch: parseBooleanQuery(exact)
+    })
+
+    // 获取所有用户的 2FA 状态
+    const userIds = result.items.map((u: any) => u.id)
+    const twoFAStatuses = await Promise.all(
+      userIds.map(async (id: number) => ({
+        id,
+        enabled: await db.is2FAEnabled(id)
+      }))
+    )
+    const twoFAMap = new Map(twoFAStatuses.map(s => [s.id, s.enabled]))
+
+    // 获取所有用户的实例数量
+    const instanceCounts = await Promise.all(
+      userIds.map(async (id: number) => {
+        const instances = await db.getInstancesByUserId(id)
+        return { id, count: instances.length }
+      })
+    )
+    const instanceCountMap = new Map(instanceCounts.map(ic => [ic.id, ic.count]))
+
+    // 获取所有用户的 GitHub 绑定状态
+    const githubBindings = await Promise.all(
+      userIds.map(async (id: number) => ({
+        id,
+        hasGithub: await db.hasOAuthBinding(id, 'github')
+      }))
+    )
+    const githubBindingMap = new Map(githubBindings.map(gb => [gb.id, gb.hasGithub]))
+
+    // 获取所有用户的最后登录记录
+    const lastLoginMap = await db.getLastLoginRecordsForUsers(userIds)
+
+    // 获取所有用户的余额
+    const userBalances = await Promise.all(
+      userIds.map(async (id: number) => ({
+        id,
+        balance: await db.getUserBalance(id)
+      }))
+    )
+    const balanceMap = new Map(userBalances.map(ub => [ub.id, ub.balance]))
+
+    // 获取所有用户的实际消费统计（兼容历史 consume 日志 amount 正负号不一致）
+    const consumeMap = await db.getUsersTotalConsumeMap(userIds)
+
+    // 获取所有用户的积分信息
+    const userPointsList = await prisma.userPoints.findMany({
+      where: { userId: { in: userIds } },
+      select: { userId: true, points: true, totalEarned: true }
+    })
+    const pointsMap = new Map(userPointsList.map(up => [up.userId, { points: up.points, totalEarned: up.totalEarned }]))
+
+    // 获取所有用户的托管余额信息
+    const hostingBalances = await prisma.user.findMany({
+      where: { id: { in: userIds } },
+      select: { id: true, hostingBalance: true }
+    })
+    const hostingBalanceMap = new Map(hostingBalances.map(u => [u.id, Number(u.hostingBalance || 0)]))
+
+    // 获取所有用户的冻结托管余额
+    const frozenHostingBalances = await prisma.hostingBalanceLog.groupBy({
+      by: ['userId'],
+      where: { userId: { in: userIds }, frozen: true },
+      _sum: { amount: true }
+    })
+    const frozenHostingMap = new Map(frozenHostingBalances.map(f => [f.userId, Number(f._sum.amount || 0)]))
+
+    return {
+      users: result.items.map((u: unknown) => {
+        const user = u as {
+          id: number
+          username: string
+          email: string | null
+          role: string
+          status: string
+          avatar_style: string
+          avatar_badge_id?: string | null
+          // 新配额系统
+          host_limit?: number
+          host_used?: number
+          friend_limit?: number
+          friend_used?: number
+          package_limit?: number
+          package_used?: number
+          // 流量配额
+          monthly_traffic_limit?: string | null
+          monthly_traffic_used?: string
+          extra_traffic_quota?: string
+          traffic_status?: string
+          created_at: string
+        }
+        return {
+          id: user.id,
+          username: user.username,
+          email: user.email,
+          role: user.role,
+          status: user.status,
+          avatarStyle: user.avatar_style,
+          avatarBadgeId: user.avatar_badge_id ?? null,
+          twoFAEnabled: twoFAMap.get(user.id) || false,
+          instanceCount: instanceCountMap.get(user.id) || 0,
+          hasGithubBinding: githubBindingMap.get(user.id) || false,
+          quota: {
+            // 新配额系统
+            hostLimit: user.host_limit || 0,
+            hostUsed: user.host_used || 0,
+            friendLimit: user.friend_limit || 0,
+            friendUsed: user.friend_used || 0,
+            packageLimit: user.package_limit || 0,
+            packageUsed: user.package_used || 0,
+            // 流量配额
+            monthlyTrafficLimit: user.monthly_traffic_limit ?? null,
+            monthlyTrafficUsed: user.monthly_traffic_used || '0',
+            extraTrafficQuota: user.extra_traffic_quota || '0',
+            trafficStatus: user.traffic_status || 'NORMAL'
+          },
+          createdAt: user.created_at,
+          lastLogin: lastLoginMap.get(user.id) ? {
+            ip: lastLoginMap.get(user.id)!.ip,
+            country: lastLoginMap.get(user.id)!.country,
+            city: lastLoginMap.get(user.id)!.city,
+            createdAt: lastLoginMap.get(user.id)!.createdAt.toISOString()
+          } : null,
+          balance: balanceMap.get(user.id) || 0,
+          totalConsume: consumeMap.get(user.id) || 0,
+          points: pointsMap.get(user.id)?.points || 0,
+          totalEarnedPoints: pointsMap.get(user.id)?.totalEarned || 0,
+          hostingBalance: hostingBalanceMap.get(user.id) || 0,
+          hostingBalanceFrozen: frozenHostingMap.get(user.id) || 0
+        }
+      }),
+      total: result.total,
+      page: result.page,
+      pageSize: result.pageSize,
+      totalPages: result.totalPages
+    }
+  })
+
+  // 按用户名精确查找用户（管理员，用于创建实例等场景）
+  fastify.get<{
+    Querystring: { username: string }
+  }>('/lookup', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Querystring: { username: string }
+  }>, reply: FastifyReply) => {
+    const { username } = request.query
+
+    if (!username || !username.trim()) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Username is required'))
+    }
+
+    // 直接用 prisma 查询以获取 balance 字段
+    const user = await prisma.user.findUnique({
+      where: { username: username.trim() },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        status: true,
+        balance: true
+      }
+    })
+    
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    return {
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role,
+        status: user.status,
+        balance: Number(user.balance)  // 返回余额（元），用于管理员创建付费实例时检查
+      }
+    }
+  })
+
+  // 获取用户详情
+  fastify.get<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticate]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const userId = Number(id)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 普通用户只能查看自己
+    if (request.user.role !== 'admin' && request.user.id !== userId) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const quota = await db.getUserQuota(user.id)
+    const instances = await db.getInstancesByUserId(user.id)
+
+    return {
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role,
+        status: user.status,
+        avatarStyle: user.avatar_style,
+        avatarBadgeId: user.avatar_badge_id ?? null,
+        quota: quota ? {
+          // 新配额系统
+          hostLimit: quota.host_limit,
+          hostUsed: quota.host_used,
+          friendLimit: quota.friend_limit,
+          friendUsed: quota.friend_used,
+          packageLimit: quota.package_limit,
+          packageUsed: quota.package_used,
+          // 流量配额
+          monthlyTrafficLimit: quota.monthly_traffic_limit?.toString() ?? null,
+          monthlyTrafficUsed: quota.monthly_traffic_used.toString(),
+          extraTrafficQuota: quota.extra_traffic_quota.toString(),
+          trafficStatus: quota.traffic_status
+        } : null,
+        instanceCount: instances.length,
+        createdAt: user.created_at
+      }
+    }
+  })
+
+  // 发送修改邮箱验证码（登录态，发送到新邮箱）
+  fastify.post<{
+    Params: { id: string }
+    Body: { email: string }
+  }>('/:id/change-email/send-code', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['email'],
+        properties: {
+          email: { type: 'string', format: 'email' }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { email: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const userId = Number(id)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    if (request.user.id !== userId) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const smtpEnabled = await isSmtpEnabled()
+    if (!smtpEnabled) {
+      return reply.code(400).send(apiError(ErrorCode.EMAIL_VERIFICATION_DISABLED))
+    }
+
+    if (user.email) {
+      const verified = await isOperationVerified(userId, 'change_email')
+      if (!verified) {
+        return reply.code(403).send({
+          error: 'Sensitive operation requires verification',
+          code: 'VERIFICATION_REQUIRED',
+          operationType: 'change_email'
+        })
+      }
+    }
+
+    const validationResult = await validateEmailChangeTarget(request.body.email, user.email, userId)
+    if ('error' in validationResult) {
+      return reply.code(400).send(validationResult.error)
+    }
+
+    const result = await createVerificationCode(validationResult.normalizedEmail)
+    if (!result) {
+      return reply.code(429).send(apiError(ErrorCode.TOO_MANY_VERIFICATION_REQUESTS))
+    }
+
+    const sendResult = await sendVerificationEmail(
+      validationResult.normalizedEmail,
+      result.code,
+      10,
+      'change_email'
+    )
+
+    if (!sendResult.success) {
+      return reply.code(500).send(apiError(ErrorCode.EMAIL_SEND_FAILED))
+    }
+
+    return {
+      message: 'Verification code sent',
+      expiresAt: result.expiresAt.toISOString()
+    }
+  })
+
+  // 更新用户信息
+  fastify.patch<{
+    Params: { id: string }
+    Body: UpdateUserRequest & { password?: string; currentPassword?: string; avatarStyle?: string; emailCode?: string }
+  }>('/:id', {
+    onRequest: [fastify.authenticate],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          email: { type: 'string', format: 'email' },
+          password: { type: 'string', minLength: 6 },
+          emailCode: { type: 'string', minLength: 6, maxLength: 6 },
+          avatarStyle: {
+            type: 'string',
+            enum: [
+              'adventurer', 'adventurerNeutral', 'avataaars', 'avataaarsNeutral',
+              'bigEars', 'bigEarsNeutral', 'bigSmile', 'bottts', 'botttsNeutral',
+              'croodles', 'croodlesNeutral', 'dylan', 'funEmoji', 'glass', 'icons',
+              'identicon', 'initials', 'lorelei', 'loreleiNeutral', 'micah', 'miniavs',
+              'notionists', 'notionistsNeutral', 'openPeeps', 'personas', 'pixelArt',
+              'pixelArtNeutral', 'rings', 'shapes', 'thumbs'
+            ]
+          }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: UpdateUserRequest & { password?: string; currentPassword?: string; avatarStyle?: string; emailCode?: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const userId = Number(id)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 只能修改自己或管理员可修改任意用户
+    if (request.user.role !== 'admin' && request.user.id !== userId) {
+      return reply.code(403).send(apiError(ErrorCode.FORBIDDEN))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const { email, password, avatarStyle, currentPassword, emailCode } = request.body
+
+    // 敏感操作二次验证：修改密码或邮箱时需要验证（管理员修改他人时跳过）
+    if (request.user.id === userId) {
+      // 修改密码需要验证当前密码和二次验证
+      if (password) {
+        // 验证当前密码（防止会话劫持）
+        if (!currentPassword) {
+          return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Current password is required'))
+        }
+        
+        const validPassword = await bcrypt.compare(currentPassword, user.password_hash)
+        if (!validPassword) {
+          return reply.code(401).send(apiError(ErrorCode.INVALID_CREDENTIALS, 'Current password is incorrect'))
+        }
+        
+        // 二次验证
+        const verified = await isOperationVerified(request.user.id, 'change_password')
+        if (!verified) {
+          return reply.code(403).send({
+            error: 'Sensitive operation requires verification',
+            code: 'VERIFICATION_REQUIRED',
+            operationType: 'change_password'
+          })
+        }
+      }
+      // 修改邮箱需要二次验证
+      if (email !== undefined && email !== user.email) {
+        if (user.email) {
+          const verified = await isOperationVerified(request.user.id, 'change_email')
+          if (!verified) {
+            return reply.code(403).send({
+              error: 'Sensitive operation requires verification',
+              code: 'VERIFICATION_REQUIRED',
+              operationType: 'change_email'
+            })
+          }
+        }
+
+        if (!emailCode) {
+          return reply.code(400).send(apiError(ErrorCode.EMAIL_CODE_REQUIRED))
+        }
+      }
+    }
+
+    const updates: { email?: string; passwordHash?: string; avatarStyle?: string } = {}
+
+    if (email !== undefined) {
+      const validationResult = await validateEmailChangeTarget(email, user.email, userId)
+      if ('error' in validationResult) {
+        return reply.code(400).send(validationResult.error)
+      }
+
+      if (request.user.id === userId && email !== user.email) {
+        const verified = await verifyCode(validationResult.normalizedEmail, emailCode!)
+        if (!verified) {
+          return reply.code(400).send(apiError(ErrorCode.INVALID_EMAIL_CODE))
+        }
+      }
+
+      updates.email = validationResult.normalizedEmail
+    }
+
+    if (password) {
+      // 验证新密码强度
+      const passwordCheck = validatePassword(password)
+      if (!passwordCheck.valid) {
+        return reply.code(400).send(apiError(ErrorCode.PASSWORD_TOO_WEAK, passwordCheck.message))
+      }
+      
+      updates.passwordHash = await bcrypt.hash(password, 12)
+    }
+
+    if (avatarStyle) {
+      updates.avatarStyle = avatarStyle
+    }
+
+    if (Object.keys(updates).length > 0) {
+      await db.updateUser(userId, updates)
+
+      if (password) {
+        await revokeAllUserRefreshTokens(userId)
+        await invalidateUserAccessTokens(userId)
+        closeUserSessions(userId, 'Password updated')
+      }
+
+      const updateActions: string[] = []
+      if (email !== undefined) updateActions.push('email')
+      if (password) updateActions.push('password')
+      if (avatarStyle) updateActions.push('avatarStyle')
+
+      await createLog(
+        request.user.id,
+        'personal',
+        'profile.update',
+        `${request.user.role === 'admin' && request.user.id !== userId ? `Admin updated user "${user.username}":` : ''} ${updateActions.join(', ')}`,
+        'success'
+      )
+
+      // 清理已使用的验证记录
+      if (request.user.id === userId) {
+        if (password) {
+          await consumeOperationVerification(request.user.id, 'change_password')
+          // 发送密码修改通知
+          await sendNotification(userId, 'password_changed', {
+            instanceName: ''
+          })
+        }
+        if (email !== undefined && email !== user.email) {
+          if (user.email) {
+            await consumeOperationVerification(request.user.id, 'change_email')
+          }
+        }
+      }
+    }
+
+    return {
+      message: 'User info updated',
+      reauthRequired: Boolean(password && request.user.id === userId)
+    }
+  })
+
+  // Change user role (admin)
+  fastify.patch<{
+    Params: { id: string }
+    Body: { role: 'admin' | 'user' }
+  }>('/:id/role', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['role'],
+        properties: {
+          role: { type: 'string', enum: ['admin', 'user'] }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { role: 'admin' | 'user' }
+  }>, reply: FastifyReply) => {
+    const userId = Number(request.params.id)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    if (request.user.id === userId) {
+      return reply.code(400).send(apiError(ErrorCode.CANNOT_MODIFY_SELF))
+    }
+
+    const { role } = request.body
+    const invalidatedAt = Math.floor(Date.now() / 1000)
+    const userLevelSessionId = '__USER_LEVEL__'
+
+    type RoleUpdateResult = {
+      changed: boolean
+      username: string
+      previousRole: 'admin' | 'user'
+      role: 'admin' | 'user'
+      revokedSessions: number
+    }
+
+    let roleUpdate: RoleUpdateResult
+    try {
+      roleUpdate = await prisma.$transaction(async (tx): Promise<RoleUpdateResult> => {
+        const locked = await tryAdvisoryTransactionLock(tx, USER_ADMIN_ROLE_LOCK_NAMESPACE, 1)
+        if (!locked) {
+          throw new Error('USER_ADMIN_ROLE_LOCK_BUSY')
+        }
+
+        const targetUser = await tx.user.findUnique({
+          where: { id: userId },
+          select: {
+            username: true,
+            role: true,
+            status: true
+          }
+        })
+
+        if (!targetUser) {
+          throw new Error('USER_NOT_FOUND')
+        }
+
+        if (role === targetUser.role) {
+          return {
+            changed: false,
+            username: targetUser.username,
+            previousRole: targetUser.role,
+            role: targetUser.role,
+            revokedSessions: 0
+          }
+        }
+
+        if (role === 'admin' && targetUser.status !== 'active') {
+          throw new Error('TARGET_NOT_ACTIVE')
+        }
+
+        if (targetUser.role === 'admin' && role === 'user' && targetUser.status === 'active') {
+          const activeAdminCount = await tx.user.count({
+            where: {
+              role: 'admin',
+              status: 'active'
+            }
+          })
+
+          if (activeAdminCount <= 1) {
+            throw new Error('LAST_ACTIVE_ADMIN')
+          }
+        }
+
+        await tx.user.update({
+          where: { id: userId },
+          data: { role }
+        })
+
+        const revoked = await tx.refreshToken.deleteMany({
+          where: { userId }
+        })
+
+        await tx.tokenInvalidation.upsert({
+          where: {
+            userId_sessionId: {
+              userId,
+              sessionId: userLevelSessionId
+            }
+          },
+          create: {
+            userId,
+            sessionId: userLevelSessionId,
+            invalidatedAt
+          },
+          update: {
+            invalidatedAt
+          }
+        })
+
+        return {
+          changed: true,
+          username: targetUser.username,
+          previousRole: targetUser.role,
+          role,
+          revokedSessions: revoked.count
+        }
+      })
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message === 'USER_NOT_FOUND') {
+          return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+        }
+
+        if (error.message === 'TARGET_NOT_ACTIVE') {
+          return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Only active users can be promoted to admin'))
+        }
+
+        if (error.message === 'LAST_ACTIVE_ADMIN') {
+          return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Cannot remove the last active admin'))
+        }
+
+        if (error.message === 'USER_ADMIN_ROLE_LOCK_BUSY') {
+          return reply.code(409).send(apiError(ErrorCode.INVALID_PARAMS, 'Another admin role update is in progress, please retry'))
+        }
+      }
+
+      throw error
+    }
+
+    if (!roleUpdate.changed) {
+      return {
+        message: 'User role unchanged',
+        role: roleUpdate.role
+      }
+    }
+
+    const closedTerminals = closeUserSessions(userId, 'User role changed by admin')
+    if (closedTerminals > 0) {
+      console.log(`[Role] Closed ${closedTerminals} terminal session(s) for user ${userId}`)
+    }
+
+    await createLog(
+      request.user.id,
+      'user',
+      'user.role.update',
+      `Changed user "${roleUpdate.username}" (ID: ${userId}) role from ${roleUpdate.previousRole} to ${roleUpdate.role}`,
+      'success'
+    )
+
+    await logAdminAction(request.user.id, 'user.role.update', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: roleUpdate.username,
+      resourceType: 'user',
+      metadata: {
+        previousRole: roleUpdate.previousRole,
+        nextRole: roleUpdate.role,
+        revokedSessions: roleUpdate.revokedSessions
+      },
+      reason: `Admin changed user role from ${roleUpdate.previousRole} to ${roleUpdate.role}`
+    })
+
+    return {
+      message: 'User role updated',
+      role: roleUpdate.role,
+      revokedSessions: roleUpdate.revokedSessions
+    }
+  })
+
+  // 设置用户配额 (管理员)
+  // 新配额系统：控制宿主机数量、实例数量、好友数量、套餐数量
+  // 重算用户配额使用量 (管理员)
+  // 新配额系统：重算宿主机/实例/好友使用量
+  fastify.post<{ Params: { id: string } }>('/:id/quota/recalculate', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const userId = Number(id)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const user = await db.findUserById(userId)
+
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 新配额系统：重新计算用户的资源使用量
+    // 注意：不再计算实例配额使用量
+    const actualUsed = await db.calculateUserQuotaUsed(userId)
+
+    await db.updateUserQuotaUsed(userId, {
+      hostUsed: actualUsed.hostUsed,
+      friendUsed: actualUsed.friendUsed,
+      packageUsed: actualUsed.packageUsed
+    })
+
+    return {
+      message: 'Quota recalculated',
+      quota: actualUsed
+    }
+  })
+
+  // 用户自行增加配额
+  // 规则：只有当使用率达到80%时才能增加，每次只能增加一种配额
+  // 宿主机每次可增加5个，好友每次可增加10名
+  // 注意：不再限制实例配额，用户可以创建无限数量的实例
+  fastify.post<{
+    Body: {
+      hostLimit?: number
+      friendLimit?: number
+    }
+  }>('/me/quota/increase', {
+    onRequest: [fastify.authenticateUser],
+    schema: {
+      body: {
+        type: 'object',
+        properties: {
+          hostLimit: { type: 'integer', minimum: 0 },
+          friendLimit: { type: 'integer', minimum: 0 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Body: {
+      hostLimit?: number
+      friendLimit?: number
+    }
+  }>, reply: FastifyReply) => {
+    const userId = request.user.id
+    const { hostLimit, friendLimit } = request.body
+
+    // 检查是否只提供了一种配额类型
+    const providedTypes = [hostLimit !== undefined, friendLimit !== undefined].filter(Boolean).length
+    if (providedTypes !== 1) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '每次只能增加一种配额类型'))
+    }
+
+    // 获取当前配额
+    const currentQuota = await db.getUserQuota(userId)
+    if (!currentQuota) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND, '配额信息不存在'))
+    }
+
+    // 确定要增加的配额类型和数量
+    let quotaType: 'host' | 'friend' | null = null
+    let increaseAmount = 0
+    let currentUsed = 0
+    let currentLimit = 0
+    let expectedIncrease = 0
+
+    if (hostLimit !== undefined) {
+      quotaType = 'host'
+      currentUsed = currentQuota.host_used
+      currentLimit = currentQuota.host_limit
+      increaseAmount = hostLimit - currentLimit
+      expectedIncrease = 5
+    } else if (friendLimit !== undefined) {
+      quotaType = 'friend'
+      currentUsed = currentQuota.friend_used
+      currentLimit = currentQuota.friend_limit
+      increaseAmount = friendLimit - currentLimit
+      expectedIncrease = 10
+    }
+
+    // 验证增加数量是否正确
+    if (increaseAmount !== expectedIncrease) {
+      const typeNames = { host: '宿主机', friend: '好友' }
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, `${typeNames[quotaType!]}每次只能增加 ${expectedIncrease} 个`))
+    }
+
+    // 检查使用率是否达到50%
+    if (currentLimit === 0) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, '配额限制为0，无法计算使用率'))
+    }
+
+    const usagePercent = (currentUsed / currentLimit) * 100
+    if (usagePercent < 50) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, `当前使用率为 ${Math.round(usagePercent)}%，需要达到50%（含）才能增加配额`))
+    }
+
+    // 更新配额
+    if (quotaType === 'host') {
+      await db.updateUserQuotaLimits(userId, { hostLimit })
+    } else if (quotaType === 'friend') {
+      await db.updateUserQuotaLimits(userId, { friendLimit })
+    }
+
+    // 记录日志
+    const typeNames = { host: '宿主机', friend: '好友' }
+    await createLog(
+      userId,
+      'personal',
+      'quota.increase',
+      `用户自行增加${typeNames[quotaType!]}配额：${currentLimit} → ${quotaType === 'host' ? hostLimit : friendLimit}`,
+      'success'
+    )
+
+    return { message: '配额增加成功' }
+  })
+
+  // 封禁/解封用户 (管理员)
+  fastify.patch<{
+    Params: { id: string }
+    Body: { status: 'active' | 'banned'; reason?: string }
+  }>('/:id/status', {
+    onRequest: [fastify.authenticateAdmin],
+    schema: {
+      body: {
+        type: 'object',
+        required: ['status'],
+        properties: {
+          status: { type: 'string', enum: ['active', 'banned'] },
+          reason: { type: 'string', maxLength: 500 }
+        }
+      }
+    }
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Body: { status: 'active' | 'banned'; reason?: string }
+  }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const userId = Number(id)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const { status, reason } = request.body
+
+    // 不能封禁自己
+    if (request.user.id === userId) {
+      return reply.code(400).send(apiError(ErrorCode.CANNOT_MODIFY_SELF))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 不能封禁管理员
+    if (user.role === 'admin' && status === 'banned') {
+      return reply.code(400).send(apiError(ErrorCode.CANNOT_BAN_ADMIN))
+    }
+
+    await db.updateUserStatus(userId, status, reason)
+
+    // 如果是封禁用户，关闭该用户的所有终端连接
+    if (status === 'banned') {
+      await revokeAllUserRefreshTokens(userId)
+      await invalidateUserAccessTokens(userId)
+      const closedSessions = closeUserSessions(userId, 'User account banned')
+      if (closedSessions > 0) {
+        console.log(`[Ban] Closed ${closedSessions} terminal session(s) for user ${userId}`)
+      }
+    }
+
+    await createLog(
+      request.user.id,
+      'user',
+      status === 'banned' ? 'user.ban' : 'user.unban',
+      `${status === 'banned' ? 'Banned' : 'Unbanned'} user "${user.username}" (ID: ${userId}, email: ${user.email || 'N/A'})${reason ? ` - Reason: ${reason}` : ''}`,
+      'success'
+    )
+
+    // AUTH003: 管理员操作审计日志
+    await logAdminAction(request.user.id, status === 'banned' ? 'user.ban' : 'user.unban', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: user.username,
+      resourceType: 'user',
+      reason: status === 'banned' ? (reason || 'Admin banned user') : 'Admin unbanned user'
+    })
+
+    // 如果是封禁且提供了原因，发送封禁邮件通知
+    if (status === 'banned' && reason && user.email) {
+      sendBanNotificationEmail(user.email, {
+        username: user.username,
+        reason: reason
+      }).then(result => {
+        if (result.success) {
+          console.log(`[Ban] Sent ban notification email to ${user.email}`)
+        } else {
+          console.error(`[Ban] Failed to send ban notification email:`, result.error)
+        }
+      }).catch(err => {
+        console.error(`[Ban] Failed to send ban notification email:`, err)
+      })
+    }
+
+    return { message: status === 'banned' ? 'User banned' : 'User unbanned' }
+  })
+
+  // 删除用户 (管理员)
+  fastify.delete<{ Params: { id: string } }>('/:id', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const { id } = request.params
+    const userId = Number(id)
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 不能删除自己
+    if (request.user.id === userId) {
+      return reply.code(400).send(apiError(ErrorCode.CANNOT_DELETE_SELF))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 不能删除管理员
+    if (user.role === 'admin') {
+      return reply.code(400).send(apiError(ErrorCode.CANNOT_DELETE_ADMIN))
+    }
+
+    // 检查是否有实例
+    const instances = await db.getInstancesByUserId(userId)
+    if (instances.length > 0) {
+      return reply.code(400).send(apiError(ErrorCode.USER_HAS_INSTANCES, `${instances.length}`))
+    }
+
+    await db.deleteUser(userId)
+
+    await createLog(
+      request.user.id,
+      'user',
+      'user.delete',
+      `Deleted user "${user.username}" (ID: ${userId}, email: ${user.email || 'N/A'}, role: ${user.role})`,
+      'success'
+    )
+
+    // AUTH003: 管理员操作审计日志 - 删除用户是高危操作
+    await logAdminAction(request.user.id, 'user.delete', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: user.username,
+      resourceType: 'user',
+      reason: 'Admin deleted user account'
+    })
+
+    return { message: 'User deleted' }
+  })
+
+  // 管理员获取指定用户的所有会话
+  fastify.get<{ Params: { id: string } }>('/:id/sessions', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const sessions = await getUserSessions(userId)
+    return { sessions }
+  })
+
+  // 管理员撤销指定用户的所有会话
+  fastify.post<{ Params: { id: string } }>('/:id/revoke-sessions', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const count = await revokeAllUserRefreshTokens(userId)
+    await invalidateUserAccessTokens(userId)
+
+    // 关闭该用户的所有终端连接
+    const closedTerminals = closeUserSessions(userId, 'Sessions revoked by admin')
+    if (closedTerminals > 0) {
+      console.log(`[RevokeSession] Closed ${closedTerminals} terminal session(s) for user ${userId}`)
+    }
+
+    await createLog(
+      request.user.id,
+      'user',
+      'user.revoke_sessions',
+      `Revoked ${count} sessions for user "${user.username}" (ID: ${userId})`,
+      'success'
+    )
+
+    // AUTH003: 管理员操作审计日志
+    await logAdminAction(request.user.id, 'user.revoke_sessions', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: user.username,
+      resourceType: 'session',
+      metadata: { revokedCount: count }
+    })
+
+    return { message: `已撤销 ${count} 个会话` }
+  })
+
+  // 管理员重置用户密码（自动生成随机密码）
+  fastify.post<{
+    Params: { id: string }
+  }>('/:id/reset-password', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+  }>, reply: FastifyReply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 生成随机密码：12位，包含大小写字母和数字
+    // 使用密码学安全的随机数生成器
+    const { generateRandomPassword } = await import('../lib/incus-config-generator.js')
+    const newPassword = generateRandomPassword(12)
+
+    const passwordHash = await bcrypt.hash(newPassword, 12)
+    await db.updateUser(userId, { passwordHash })
+
+    // 撤销用户所有会话，强制重新登录
+    await revokeAllUserRefreshTokens(userId)
+    await invalidateUserAccessTokens(userId)
+    closeUserSessions(userId, 'Password reset by admin')
+
+    await createLog(
+      request.user.id,
+      'user',
+      'user.reset_password',
+      `Admin reset password for user "${user.username}" (ID: ${userId}) - new password generated`,
+      'success'
+    )
+
+    // AUTH003: 管理员操作审计日志 - 重置密码是敏感操作
+    await logAdminAction(request.user.id, 'user.reset_password', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: user.username,
+      resourceType: 'credential',
+      reason: 'Admin initiated password reset'
+    })
+
+    return {
+      message: 'Password reset successfully',
+      newPassword,
+      username: user.username
+    }
+  })
+
+  // 管理员取消用户的 2FA
+  fastify.post<{ Params: { id: string } }>('/:id/disable-2fa', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 检查用户是否启用了 2FA
+    const is2FAEnabled = await db.is2FAEnabled(userId)
+    if (!is2FAEnabled) {
+      return reply.code(400).send(apiError(ErrorCode.TWO_FA_NOT_ENABLED))
+    }
+
+    // 禁用 2FA（清除所有 2FA 数据）
+    await db.disable2FAComplete(userId)
+
+    await createLog(
+      request.user.id,
+      'user',
+      'user.disable_2fa',
+      `Admin disabled 2FA for user "${user.username}" (ID: ${userId})`,
+      'success'
+    )
+
+    // AUTH003: 管理员操作审计日志 - 禁用 2FA 是敏感操作
+    await logAdminAction(request.user.id, 'user.disable_2fa', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: user.username,
+      resourceType: '2fa',
+      reason: 'Admin disabled user 2FA'
+    })
+
+    return { message: '2FA disabled successfully' }
+  })
+
+  // 管理员解除用户的 OAuth 绑定
+  fastify.delete<{
+    Params: { id: string; provider: string }
+  }>('/:id/oauth/:provider', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string; provider: string }
+  }>, reply: FastifyReply) => {
+    const userId = parseInt(request.params.id, 10)
+    const { provider } = request.params
+
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    // 验证 provider 参数
+    if (provider !== 'github' && provider !== 'google') {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid OAuth provider'))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    // 检查用户是否绑定了该 OAuth
+    const hasBound = await db.hasOAuthBinding(userId, provider as 'github' | 'google')
+    if (!hasBound) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'User has not bound this OAuth provider'))
+    }
+
+    // 删除 OAuth 绑定
+    await db.deleteOAuthBinding(userId, provider as 'github' | 'google')
+
+    await createLog(
+      request.user.id,
+      'user',
+      'user.unbind_oauth',
+      `Admin unbound ${provider} OAuth for user "${user.username}" (ID: ${userId})`,
+      'success'
+    )
+
+    // AUTH003: 管理员操作审计日志 - 解除 OAuth 绑定是敏感操作
+    await logAdminAction(request.user.id, 'user.unbind_oauth', {
+      ip: request.ip,
+      userAgent: request.headers['user-agent'],
+      targetUserId: userId,
+      targetUsername: user.username,
+      resourceType: 'oauth',
+      metadata: { provider },
+      reason: `Admin unbound ${provider} OAuth`
+    })
+
+    return { message: `${provider} OAuth binding removed successfully` }
+  })
+
+  // 管理员获取用户登录记录
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>('/:id/login-records', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Params: { id: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>, reply: FastifyReply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_ID))
+    }
+
+    const user = await db.findUserById(userId)
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND))
+    }
+
+    const page = parseInt(request.query.page || '1', 10)
+    const pageSize = parseInt(request.query.pageSize || '20', 10)
+
+    const { records, total } = await db.getUserLoginRecords(userId, page, pageSize)
+
+    return {
+      records: records.map(r => ({
+        id: r.id,
+        ip: r.ip,
+        country: r.country,
+        region: r.region,
+        city: r.city,
+        isp: r.isp,
+        timezone: r.timezone,
+        userAgent: r.userAgent,
+        createdAt: r.createdAt.toISOString()
+      })),
+      total,
+      page,
+      pageSize,
+      totalPages: Math.ceil(total / pageSize)
+    }
+  })
+
+  // 管理员检测关联账号
+  // 安全：仅管理员可访问，使用 authenticateAdmin 中间件
+  fastify.get<{
+    Querystring: { days?: string }
+  }>('/detect-linked-accounts', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request: FastifyRequest<{
+    Querystring: { days?: string }
+  }>, _reply: FastifyReply) => {
+    const startTime = Date.now()
+    // 参数校验：限制检测范围在 1-365 天之间，防止查询性能问题
+    const rawDays = parseInt(request.query.days || '90', 10)
+    const days = Math.min(365, Math.max(1, isNaN(rawDays) ? 90 : rawDays))
+
+    // 并行执行三种检测
+    const [ipGroups, emailGroups, usernameGroups] = await Promise.all([
+      db.getSharedIPGroups(days, 2),
+      db.getSimilarEmailGroups(),
+      db.getSimilarUsernameGroups()
+    ])
+
+    const durationMs = Date.now() - startTime
+
+    // 记录管理员操作日志
+    await createLog(
+      request.user.id,
+      'user',
+      'admin.detect_linked_accounts',
+      `Admin detected linked accounts: ${ipGroups.length} IP groups, ${emailGroups.length} email groups, ${usernameGroups.length} username groups (${durationMs}ms)`,
+      'success'
+    )
+
+    return {
+      detectedAt: new Date().toISOString(),
+      durationMs,
+      days,
+      summary: {
+        ipGroups: ipGroups.length,
+        emailGroups: emailGroups.length,
+        usernameGroups: usernameGroups.length
+      },
+      ipGroups: ipGroups.map(g => ({
+        ip: g.ip,
+        userCount: g.users.length,
+        totalLogins: g.totalLogins,
+        users: g.users.map(u => ({
+          id: u.id,
+          username: u.username,
+          email: u.email,
+          status: u.status,
+          loginCount: u.loginCount,
+          lastLogin: u.lastLogin.toISOString()
+        }))
+      })),
+      emailGroups: emailGroups.map(g => ({
+        pattern: g.pattern,
+        userCount: g.users.length,
+        users: g.users.map(u => ({
+          id: u.id,
+          username: u.username,
+          email: u.email,
+          status: u.status,
+          createdAt: u.createdAt.toISOString()
+        }))
+      })),
+      usernameGroups: usernameGroups.map(g => ({
+        pattern: g.pattern,
+        userCount: g.users.length,
+        users: g.users.map(u => ({
+          id: u.id,
+          username: u.username,
+          email: u.email,
+          status: u.status,
+          createdAt: u.createdAt.toISOString()
+        }))
+      }))
+    }
+  })
+
+  // 获取用户托管余额明细（管理员）
+  fastify.get<{
+    Params: { id: string }
+    Querystring: { page?: string; pageSize?: string }
+  }>('/:id/hosting-balance/logs', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request, reply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid user ID'))
+    }
+
+    const { page = '1', pageSize = '20' } = request.query
+    const pageNum = parseInt(page, 10)
+    const size = Math.min(parseInt(pageSize, 10), 100)
+    const skip = (pageNum - 1) * size
+
+    // 检查用户是否存在
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { id: true, username: true, hostingBalance: true }
+    })
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND, 'User not found'))
+    }
+
+    // 获取托管余额明细
+    const [logs, total] = await Promise.all([
+      prisma.hostingBalanceLog.findMany({
+        where: { userId },
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: size
+      }),
+      prisma.hostingBalanceLog.count({ where: { userId } })
+    ])
+
+    // 获取冻结余额总额
+    const frozenResult = await prisma.hostingBalanceLog.aggregate({
+      where: { userId, frozen: true },
+      _sum: { amount: true }
+    })
+
+    return {
+      user: {
+        id: user.id,
+        username: user.username
+      },
+      available: Number(user.hostingBalance || 0),
+      frozen: Number(frozenResult._sum.amount || 0),
+      logs: logs.map(log => ({
+        id: log.id,
+        type: log.type,
+        actionType: log.actionType,
+        amount: Number(log.amount),
+        frozen: log.frozen,
+        unfreezeAt: log.unfreezeAt?.toISOString() || null,
+        description: log.remark,
+        createdAt: log.createdAt.toISOString()
+      })),
+      total,
+      page: pageNum,
+      pageSize: size,
+      totalPages: Math.ceil(total / size)
+    }
+  })
+
+  // 调整用户托管余额（管理员）
+  fastify.post<{
+    Params: { id: string }
+    Body: { type: 'available' | 'frozen'; amount: number; reason: string }
+  }>('/:id/hosting-balance/adjust', {
+    onRequest: [fastify.authenticateAdmin]
+  }, async (request, reply) => {
+    const userId = parseInt(request.params.id, 10)
+    if (isNaN(userId)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid user ID'))
+    }
+
+    const { type, amount, reason } = request.body
+    if (!type || !['available', 'frozen'].includes(type)) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Invalid type, must be "available" or "frozen"'))
+    }
+    if (typeof amount !== 'number' || amount === 0) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Amount must be a non-zero number'))
+    }
+    if (!reason || !reason.trim()) {
+      return reply.code(400).send(apiError(ErrorCode.INVALID_PARAMS, 'Reason is required'))
+    }
+
+    // 检查用户是否存在
+    const user = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { id: true, username: true, hostingBalance: true }
+    })
+    if (!user) {
+      return reply.code(404).send(apiError(ErrorCode.USER_NOT_FOUND, 'User not found'))
+    }
+
+    const isAdd = amount > 0
+    const absAmount = Math.abs(amount)
+
+    try {
+      if (type === 'available') {
+        await prisma.$transaction(async (tx) => {
+          const locked = await tryAdvisoryTransactionLock(tx, HOSTING_BALANCE_LOG_LOCK_NAMESPACE, userId)
+          if (!locked) {
+            throw new Error('Hosting balance is being processed')
+          }
+
+          // 更新用户托管余额
+          const updateResult = await tx.user.updateMany({
+            where: {
+              id: userId,
+              ...(isAdd ? {} : { hostingBalance: { gte: absAmount } })
+            },
+            data: {
+              hostingBalance: isAdd
+                ? { increment: absAmount }
+                : { decrement: absAmount }
+            }
+          })
+          if (updateResult.count === 0) {
+            throw new Error('Insufficient hosting balance')
+          }
+
+          // 记录日志
+          await tx.hostingBalanceLog.create({
+            data: {
+              userId,
+              type: isAdd ? 'income' : 'deduction',
+              actionType: 'admin_adjust',
+              amount: absAmount,
+              frozen: false,
+              remark: `[Admin] ${reason.trim()}`
+            }
+          })
+        })
+      } else {
+        // 调整冻结余额
+        if (isAdd) {
+          // 增加冻结余额：创建一条冻结记录
+          await prisma.$transaction(async (tx) => {
+            const locked = await tryAdvisoryTransactionLock(tx, HOSTING_BALANCE_LOG_LOCK_NAMESPACE, userId)
+            if (!locked) {
+              throw new Error('Hosting balance is being processed')
+            }
+
+            await tx.hostingBalanceLog.create({
+              data: {
+                userId,
+                type: 'income',
+                actionType: 'admin_adjust',
+                amount: absAmount,
+                frozen: true,
+                unfreezeAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30天后解冻
+                remark: `[Admin Frozen] ${reason.trim()}`
+              }
+            })
+          })
+        } else {
+          await prisma.$transaction(async (tx) => {
+            const locked = await tryAdvisoryTransactionLock(tx, HOSTING_BALANCE_LOG_LOCK_NAMESPACE, userId)
+            if (!locked) {
+              throw new Error('Hosting balance is being processed')
+            }
+
+            // 扣减冻结余额：从冻结记录中扣除
+            const frozenLogs = await tx.hostingBalanceLog.findMany({
+              where: { userId, frozen: true, amount: { gt: 0 } },
+              orderBy: { createdAt: 'asc' }
+            })
+            const frozenTotal = frozenLogs.reduce((sum, log) => sum + Number(log.amount), 0)
+            if (frozenTotal < absAmount) {
+              throw new Error('Insufficient frozen hosting balance')
+            }
+
+            // 从最早的冻结记录开始扣减
+            let remaining = absAmount
+            for (const log of frozenLogs) {
+              if (remaining <= 0) break
+              const logAmount = Number(log.amount)
+              if (logAmount <= remaining) {
+                // 完全扣除这条记录
+                await tx.hostingBalanceLog.delete({ where: { id: log.id } })
+                remaining -= logAmount
+              } else {
+                // 部分扣除
+                await tx.hostingBalanceLog.update({
+                  where: { id: log.id },
+                  data: { amount: { decrement: remaining } }
+                })
+                remaining = 0
+              }
+            }
+
+            // 记录扣减日志
+            await tx.hostingBalanceLog.create({
+              data: {
+                userId,
+                type: 'deduction',
+                actionType: 'admin_adjust',
+                amount: 0, // 不计入实际余额，仅作为记录
+                frozen: false,
+                remark: `[Admin Frozen Deduct] ${reason.trim()} (¥${absAmount.toFixed(2)})`
+              }
+            })
+          })
+        }
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      if (message === 'Hosting balance is being processed') {
+        return reply.code(409).send({ error: '托管余额正在处理，请稍后重试', code: 'HOSTING_BALANCE_BUSY' })
+      }
+      if (message === 'Insufficient hosting balance') {
+        return reply.code(400).send(apiError(ErrorCode.BALANCE_INSUFFICIENT, 'Insufficient hosting balance'))
+      }
+      if (message === 'Insufficient frozen hosting balance') {
+        return reply.code(400).send(apiError(ErrorCode.BALANCE_INSUFFICIENT, 'Insufficient frozen hosting balance'))
+      }
+      throw error
+    }
+
+    // 记录管理员操作日志
+    await createLog(
+      request.user.id,
+      'user',
+      'admin.adjust_hosting_balance',
+      `Admin adjusted user #${userId} hosting balance: type=${type}, amount=${amount}, reason=${reason}`,
+      'success'
+    )
+
+    // 返回更新后的托管余额信息
+    const updatedUser = await prisma.user.findUnique({
+      where: { id: userId },
+      select: { hostingBalance: true }
+    })
+    const frozenResult = await prisma.hostingBalanceLog.aggregate({
+      where: { userId, frozen: true },
+      _sum: { amount: true }
+    })
+
+    return {
+      success: true,
+      available: Number(updatedUser?.hostingBalance || 0),
+      frozen: Number(frozenResult._sum.amount || 0)
+    }
+  })
+}
+
diff --git a/server/src/routes/verification.ts b/server/src/routes/verification.ts
new file mode 100644
index 0000000..4c0c885
--- /dev/null
+++ b/server/src/routes/verification.ts
@@ -0,0 +1,266 @@
+/**
+ * 敏感操作二次验证路由
+ */
+
+import type { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
+import {
+    requestOperationVerification,
+    verifyOperationCode,
+    isOperationVerified,
+    isAccountOperation,
+    isResourceOperation,
+    isResourceVerificationRequired,
+    getOperationName,
+    OperationType
+} from '../lib/operation-verification.js'
+
+// 有效的操作类型列表
+const VALID_OPERATION_TYPES: OperationType[] = [
+    'change_password',
+    'disable_2fa',
+    'change_email',
+    'delete_account',
+    'delete_instance',
+    'reinstall_instance',
+    'recreate_instance',
+    'transfer_instance',
+    'delete_snapshot',
+    'delete_backup'
+]
+
+export default async function verificationRoutes(fastify: FastifyInstance) {
+    /**
+     * 请求二次验证码
+     * POST /api/verification/request
+     */
+    fastify.post<{
+        Body: {
+            operationType: OperationType
+            resourceId?: number
+            resourceType?: string
+        }
+    }>(
+        '/request',
+        {
+            onRequest: [fastify.authenticate],
+            schema: {
+                body: {
+                    type: 'object',
+                    required: ['operationType'],
+                    properties: {
+                        operationType: { type: 'string', enum: VALID_OPERATION_TYPES },
+                        resourceId: { type: 'number' },
+                        resourceType: { type: 'string' }
+                    }
+                }
+            }
+        },
+        async (request: FastifyRequest<{
+            Body: {
+                operationType: OperationType
+                resourceId?: number
+                resourceType?: string
+            }
+        }>, reply: FastifyReply) => {
+            const user = request.user!
+            const { operationType, resourceId, resourceType } = request.body
+
+            // 资源操作：检查是否需要二次验证
+            if (isResourceOperation(operationType)) {
+                const required = await isResourceVerificationRequired(user.id)
+                if (!required) {
+                    // 用户没有绑定通知渠道，不需要二次验证
+                    return {
+                        success: true,
+                        required: false,
+                        message: 'No notification channel configured, verification not required'
+                    }
+                }
+            }
+
+            const result = await requestOperationVerification(
+                user.id,
+                operationType,
+                resourceId,
+                resourceType
+            )
+
+            if (!result.success) {
+                // 特殊处理：已发送过验证码
+                if (result.expiresIn) {
+                    return {
+                        success: true,
+                        channel: result.channel,
+                        maskedTarget: result.maskedTarget,
+                        expiresIn: result.expiresIn,
+                        message: 'Verification code already sent'
+                    }
+                }
+                
+                return reply.code(400).send({
+                    error: result.error,
+                    code: result.errorCode || 'VERIFICATION_FAILED'
+                })
+            }
+
+            return {
+                success: true,
+                required: true,
+                channel: result.channel,
+                maskedTarget: result.maskedTarget,
+                expiresIn: result.expiresIn,
+                operationName: getOperationName(operationType, 'zh')
+            }
+        }
+    )
+
+    /**
+     * 验证二次验证码
+     * POST /api/verification/verify
+     */
+    fastify.post<{
+        Body: {
+            operationType: OperationType
+            code: string
+            resourceId?: number
+        }
+    }>(
+        '/verify',
+        {
+            onRequest: [fastify.authenticate],
+            schema: {
+                body: {
+                    type: 'object',
+                    required: ['operationType', 'code'],
+                    properties: {
+                        operationType: { type: 'string', enum: VALID_OPERATION_TYPES },
+                        code: { type: 'string', minLength: 6, maxLength: 6 },
+                        resourceId: { type: 'number' }
+                    }
+                }
+            }
+        },
+        async (request: FastifyRequest<{
+            Body: {
+                operationType: OperationType
+                code: string
+                resourceId?: number
+            }
+        }>, reply: FastifyReply) => {
+            const user = request.user!
+            const { operationType, code, resourceId } = request.body
+
+            const result = await verifyOperationCode(
+                user.id,
+                operationType,
+                code,
+                resourceId
+            )
+
+            if (!result.success || !result.verified) {
+                return reply.code(400).send({
+                    error: result.error || 'Verification failed',
+                    code: result.errorCode || 'INVALID_CODE'
+                })
+            }
+
+            return {
+                success: true,
+                verified: true,
+                message: 'Verification successful'
+            }
+        }
+    )
+
+    /**
+     * 检查操作是否已通过验证
+     * GET /api/verification/check
+     */
+    fastify.get<{
+        Querystring: {
+            operationType: OperationType
+            resourceId?: string
+        }
+    }>(
+        '/check',
+        {
+            onRequest: [fastify.authenticate],
+            schema: {
+                querystring: {
+                    type: 'object',
+                    required: ['operationType'],
+                    properties: {
+                        operationType: { type: 'string', enum: VALID_OPERATION_TYPES },
+                        resourceId: { type: 'string' }
+                    }
+                }
+            }
+        },
+        async (request: FastifyRequest<{
+            Querystring: {
+                operationType: OperationType
+                resourceId?: string
+            }
+        }>, _reply: FastifyReply) => {
+            const user = request.user!
+            const { operationType, resourceId } = request.query
+
+            // 资源操作：检查是否需要二次验证
+            if (isResourceOperation(operationType)) {
+                const required = await isResourceVerificationRequired(user.id)
+                if (!required) {
+                    return {
+                        required: false,
+                        verified: true
+                    }
+                }
+            }
+
+            const verified = await isOperationVerified(
+                user.id,
+                operationType,
+                resourceId ? parseInt(resourceId, 10) : undefined
+            )
+
+            return {
+                required: isAccountOperation(operationType) || await isResourceVerificationRequired(user.id),
+                verified
+            }
+        }
+    )
+
+    /**
+     * 获取操作类型信息
+     * GET /api/verification/operation-types
+     */
+    fastify.get(
+        '/operation-types',
+        {
+            onRequest: [fastify.authenticate]
+        },
+        async (_request, _reply) => {
+            const accountOperations = VALID_OPERATION_TYPES
+                .filter(isAccountOperation)
+                .map(op => ({
+                    type: op,
+                    name: getOperationName(op, 'zh'),
+                    nameEn: getOperationName(op, 'en'),
+                    channel: 'email'
+                }))
+
+            const resourceOperations = VALID_OPERATION_TYPES
+                .filter(isResourceOperation)
+                .map(op => ({
+                    type: op,
+                    name: getOperationName(op, 'zh'),
+                    nameEn: getOperationName(op, 'en'),
+                    channel: 'notification'
+                }))
+
+            return {
+                accountOperations,
+                resourceOperations
+            }
+        }
+    )
+}
diff --git a/server/src/routes/vip-benefits.ts b/server/src/routes/vip-benefits.ts
new file mode 100644
index 0000000..6e63c4d
--- /dev/null
+++ b/server/src/routes/vip-benefits.ts
@@ -0,0 +1,123 @@
+import type { FastifyInstance, FastifyReply } from 'fastify'
+import { VipBenefitError } from '../services/vip-benefits.js'
+import {
+  claimAllAvailableVipBenefitRewards,
+  claimVipBenefitReward,
+  createVipBenefitReward,
+  deleteVipBenefitReward,
+  getVipBenefitOverview,
+  listAdminVipBenefitRewards,
+  updateVipBenefitReward,
+  type VipBenefitRewardInput
+} from '../services/vip-benefits.js'
+
+function parseId(value: unknown): number | null {
+  const id = Number(value)
+  return Number.isInteger(id) && id > 0 ? id : null
+}
+
+function sendVipBenefitError(reply: FastifyReply, error: unknown) {
+  if (error instanceof VipBenefitError) {
+    return reply.status(error.statusCode).send({
+      error: error.message,
+      code: error.code
+    })
+  }
+  throw error
+}
+
+export default async function vipBenefitRoutes(app: FastifyInstance): Promise<void> {
+  app.get('/api/vip-benefits/me', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 60, timeWindow: '1 minute' } }
+  }, async (request) => {
+    return getVipBenefitOverview(request.user.id)
+  })
+
+  app.post<{
+    Params: { rewardId: string }
+  }>('/api/vip-benefits/:rewardId/claim', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 100, timeWindow: '3 minutes' } }
+  }, async (request, reply) => {
+    const rewardId = parseId(request.params.rewardId)
+    if (!rewardId) {
+      return reply.status(400).send({ error: 'Invalid VIP benefit reward ID', code: 'INVALID_REWARD_ID' })
+    }
+
+    try {
+      return await claimVipBenefitReward(request.user.id, rewardId)
+    } catch (error) {
+      return sendVipBenefitError(reply, error)
+    }
+  })
+
+  app.post('/api/vip-benefits/claim-all', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 30, timeWindow: '3 minutes' } }
+  }, async (request, reply) => {
+    try {
+      return await claimAllAvailableVipBenefitRewards(request.user.id)
+    } catch (error) {
+      return sendVipBenefitError(reply, error)
+    }
+  })
+
+  app.get('/api/admin/vip-benefits/rewards', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async () => {
+    return { rewards: await listAdminVipBenefitRewards() }
+  })
+
+  app.post<{
+    Body: VipBenefitRewardInput
+  }>('/api/admin/vip-benefits/rewards', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    try {
+      return { reward: await createVipBenefitReward(request.body || {}) }
+    } catch (error) {
+      return sendVipBenefitError(reply, error)
+    }
+  })
+
+  app.put<{
+    Params: { id: string }
+    Body: VipBenefitRewardInput
+  }>('/api/admin/vip-benefits/rewards/:id', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const id = parseId(request.params.id)
+    if (!id) {
+      return reply.status(400).send({ error: 'Invalid VIP benefit reward ID', code: 'INVALID_REWARD_ID' })
+    }
+
+    try {
+      return { reward: await updateVipBenefitReward(id, request.body || {}) }
+    } catch (error) {
+      return sendVipBenefitError(reply, error)
+    }
+  })
+
+  app.delete<{
+    Params: { id: string }
+  }>('/api/admin/vip-benefits/rewards/:id', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 10, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const id = parseId(request.params.id)
+    if (!id) {
+      return reply.status(400).send({ error: 'Invalid VIP benefit reward ID', code: 'INVALID_REWARD_ID' })
+    }
+
+    try {
+      await deleteVipBenefitReward(id)
+      return { success: true }
+    } catch (error) {
+      return sendVipBenefitError(reply, error)
+    }
+  })
+}
diff --git a/server/src/routes/vip-levels.ts b/server/src/routes/vip-levels.ts
new file mode 100644
index 0000000..f31f8ca
--- /dev/null
+++ b/server/src/routes/vip-levels.ts
@@ -0,0 +1,81 @@
+import type { FastifyInstance, FastifyReply } from 'fastify'
+import type { UserVipMetric, VipRuleType, VipRuleInput } from '../services/vip-levels.js'
+import {
+  MAX_VIP_LEVEL,
+  getVipOverview,
+  getUserVipMetric,
+  getVipRules,
+  replaceVipRules
+} from '../services/vip-levels.js'
+
+function parseRuleType(value: string | undefined): VipRuleType | null {
+  return value === 'user' || value === 'hosting' ? value : null
+}
+
+function sendInvalidType(reply: FastifyReply) {
+  return reply.status(400).send({ error: 'Invalid VIP rule type' })
+}
+
+function parseUserVipMetric(value: unknown): UserVipMetric | null {
+  return value === 'totalRecharge' || value === 'totalConsume' ? value : null
+}
+
+export default async function vipLevelRoutes(app: FastifyInstance): Promise<void> {
+  app.get('/api/vip-levels/me', {
+    onRequest: [app.authenticate],
+    config: { rateLimit: { max: 60, timeWindow: '1 minute' } }
+  }, async (request) => {
+    return getVipOverview(request.user.id)
+  })
+
+  app.get<{
+    Params: { type: string }
+  }>('/api/admin/vip-levels/:type', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 30, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const type = parseRuleType(request.params.type)
+    if (!type) return sendInvalidType(reply)
+
+    return {
+      type,
+      maxLevel: MAX_VIP_LEVEL,
+      userMetric: type === 'user' ? await getUserVipMetric() : undefined,
+      rules: await getVipRules(type)
+    }
+  })
+
+  app.put<{
+    Params: { type: string }
+    Body: { rules?: VipRuleInput[], userMetric?: UserVipMetric }
+  }>('/api/admin/vip-levels/:type', {
+    onRequest: [app.authenticate, app.requireAdmin],
+    config: { rateLimit: { max: 20, timeWindow: '1 minute' } }
+  }, async (request, reply) => {
+    const type = parseRuleType(request.params.type)
+    if (!type) return sendInvalidType(reply)
+
+    const rules = Array.isArray(request.body?.rules) ? request.body.rules : []
+    let userMetric: UserVipMetric | undefined
+    if (type === 'user') {
+      const parsedUserMetric = parseUserVipMetric(request.body?.userMetric)
+      if (!parsedUserMetric) {
+        return reply.status(400).send({ error: 'Invalid user VIP metric' })
+      }
+      userMetric = parsedUserMetric
+    }
+
+    try {
+      const savedRules = await replaceVipRules(type, rules, userMetric)
+      return {
+        type,
+        maxLevel: MAX_VIP_LEVEL,
+        userMetric,
+        rules: savedRules
+      }
+    } catch (error: any) {
+      request.log.warn({ error }, 'VIP level rule validation failed')
+      return reply.status(400).send({ error: error?.message || 'Invalid VIP level rules' })
+    }
+  })
+}
diff --git a/server/src/services/agent-instance-report.ts b/server/src/services/agent-instance-report.ts
new file mode 100644
index 0000000..230be34
--- /dev/null
+++ b/server/src/services/agent-instance-report.ts
@@ -0,0 +1,398 @@
+/**
+ * Agent 实例状态与流量批量上报处理。
+ *
+ * 设计原则：
+ * - Agent 只上报本机 Incus 只读数据，业务规则仍由面板决定。
+ * - 只更新数据库中属于该宿主机的实例，防止跨宿主机污染。
+ * - 流量写入沿用实例级分布式锁，避免和旧定时采集重复记账。
+ */
+
+import pLimit from 'p-limit'
+import type { InstanceStatus } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import { withLock } from '../lib/distributed-lock.js'
+import { mapInstanceStatus } from '../lib/incus/incus-utils.js'
+import { calculateIncrement } from './traffic-utils.js'
+
+interface NormalizedAgentInstanceItem {
+  name: string
+  status: InstanceStatus | null
+  rxBytes: bigint | null
+  txBytes: bigint | null
+  ipv4?: string | null
+  ipv6?: string | null
+}
+
+export interface AgentInstanceReportResult {
+  received: number
+  matched: number
+  statusUpdated: number
+  trafficUpdated: number
+  trafficDeltaBytes: string
+  skipped: number
+  errors: number
+}
+
+type ReportedDbInstance = {
+  id: number
+  incusId: string
+  userId: number
+  status: InstanceStatus
+}
+
+const maxAgentInstanceReportItems = 2000
+const agentReportConcurrency = 8
+const trafficLockOptions = {
+  expireMs: 30000,
+  waitTimeoutMs: 3000,
+  retryIntervalMs: 50
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function sanitizeShortString(value: unknown, maxLength: number): string | null {
+  if (typeof value !== 'string') {
+    return null
+  }
+  const trimmed = value.trim()
+  return trimmed ? trimmed.slice(0, maxLength) : null
+}
+
+function parseCounter(value: unknown): bigint | null {
+  if (typeof value === 'bigint') {
+    return value >= 0n ? value : null
+  }
+  if (typeof value === 'number') {
+    if (!Number.isSafeInteger(value) || value < 0) {
+      return null
+    }
+    return BigInt(value)
+  }
+  if (typeof value === 'string' && /^\d{1,30}$/.test(value.trim())) {
+    return BigInt(value.trim())
+  }
+  return null
+}
+
+function normalizeStatus(value: unknown): InstanceStatus | null {
+  const raw = sanitizeShortString(value, 40)
+  if (!raw) {
+    return null
+  }
+
+  if (raw === 'running' || raw === 'stopped' || raw === 'error') {
+    return raw
+  }
+
+  const mapped = mapInstanceStatus(raw)
+  if (mapped === 'running' || mapped === 'stopped' || mapped === 'error') {
+    return mapped
+  }
+  return null
+}
+
+function normalizeNetworkAddress(value: unknown): string | null | undefined {
+  if (value === undefined) {
+    return undefined
+  }
+  const address = sanitizeShortString(value, 128)
+  return address ?? null
+}
+
+function normalizeAgentInstanceItems(payload: unknown): NormalizedAgentInstanceItem[] {
+  if (!isRecord(payload) || !Array.isArray(payload.items)) {
+    return []
+  }
+
+  const items: NormalizedAgentInstanceItem[] = []
+  for (const rawItem of payload.items.slice(0, maxAgentInstanceReportItems)) {
+    if (!isRecord(rawItem)) {
+      continue
+    }
+
+    const name = sanitizeShortString(rawItem.name, 256)
+    if (!name) {
+      continue
+    }
+
+    const traffic = isRecord(rawItem.traffic) ? rawItem.traffic : {}
+    const network = isRecord(rawItem.network) ? rawItem.network : {}
+    items.push({
+      name,
+      status: normalizeStatus(rawItem.status),
+      rxBytes: parseCounter(traffic.rxBytes),
+      txBytes: parseCounter(traffic.txBytes),
+      ipv4: normalizeNetworkAddress(network.ipv4),
+      ipv6: normalizeNetworkAddress(network.ipv6)
+    })
+  }
+
+  return items
+}
+
+function shouldSyncStatus(currentStatus: InstanceStatus, reportedStatus: InstanceStatus | null): reportedStatus is InstanceStatus {
+  if (!reportedStatus) {
+    return false
+  }
+
+  // 不让只读 Agent 心跳改动封停、删除和创建中实例，避免绕过业务流程。
+  return currentStatus === 'running' || currentStatus === 'stopped' || currentStatus === 'error'
+}
+
+function shouldApplyTraffic(currentStatus: InstanceStatus, item: NormalizedAgentInstanceItem): boolean {
+  if (item.status !== 'running' || item.rxBytes === null || item.txBytes === null) {
+    return false
+  }
+
+  // 流量属于计费数据，不处理创建中、封停和已删除实例，避免绕过业务状态。
+  return currentStatus === 'running' || currentStatus === 'stopped' || currentStatus === 'error'
+}
+
+function buildStatusUpdateData(item: NormalizedAgentInstanceItem, now: Date): {
+  status: InstanceStatus
+  lastSyncedAt: Date
+  ipv4?: string | null
+  ipv6?: string | null
+} | null {
+  if (!item.status) {
+    return null
+  }
+
+  const data: {
+    status: InstanceStatus
+    lastSyncedAt: Date
+    ipv4?: string | null
+    ipv6?: string | null
+  } = {
+    status: item.status,
+    lastSyncedAt: now
+  }
+
+  if (item.ipv4 !== undefined) {
+    data.ipv4 = item.ipv4
+  }
+  if (item.ipv6 !== undefined) {
+    data.ipv6 = item.ipv6
+  }
+
+  return data
+}
+
+async function applyReportedTrafficCounters(
+  instance: ReportedDbInstance,
+  item: NormalizedAgentInstanceItem,
+  now: Date
+): Promise<{ updated: boolean; delta: bigint }> {
+  if (!shouldApplyTraffic(instance.status, item)) {
+    return { updated: false, delta: 0n }
+  }
+
+  const lockKey = `traffic:instance:${instance.id}`
+  const lockResult = await withLock(lockKey, async () => {
+    const normalizedDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+
+    return prisma.$transaction(async (tx) => {
+      const currentInstance = await tx.instance.findUnique({
+        where: { id: instance.id },
+        select: { status: true }
+      })
+      if (!currentInstance || !shouldApplyTraffic(currentInstance.status, item)) {
+        return {
+          updated: false,
+          delta: 0n
+        }
+      }
+
+      const latestSnapshot = await tx.trafficSnapshot.findUnique({
+        where: { instanceId: instance.id }
+      })
+
+      const rxIncrement = latestSnapshot
+        ? calculateIncrement(item.rxBytes!, latestSnapshot.rxRaw)
+        : 0n
+      const txIncrement = latestSnapshot
+        ? calculateIncrement(item.txBytes!, latestSnapshot.txRaw)
+        : 0n
+      const totalDelta = rxIncrement + txIncrement
+
+      await tx.trafficSnapshot.upsert({
+        where: { instanceId: instance.id },
+        update: {
+          rxRaw: item.rxBytes!,
+          txRaw: item.txBytes!
+        },
+        create: {
+          instanceId: instance.id,
+          rxRaw: item.rxBytes!,
+          txRaw: item.txBytes!
+        }
+      })
+
+      if (totalDelta > 0n) {
+        await tx.instance.update({
+          where: { id: instance.id },
+          data: {
+            monthlyTrafficUsed: { increment: totalDelta }
+          }
+        })
+
+        await tx.userQuota.updateMany({
+          where: { userId: instance.userId },
+          data: {
+            monthlyTrafficUsed: { increment: totalDelta }
+          }
+        })
+
+        await tx.dailyTraffic.upsert({
+          where: {
+            instanceId_date: {
+              instanceId: instance.id,
+              date: normalizedDate
+            }
+          },
+          update: {
+            rxTotal: { increment: rxIncrement },
+            txTotal: { increment: txIncrement }
+          },
+          create: {
+            instanceId: instance.id,
+            date: normalizedDate,
+            rxTotal: rxIncrement,
+            txTotal: txIncrement
+          }
+        })
+      }
+
+      return {
+        updated: true,
+        delta: totalDelta
+      }
+    })
+  }, trafficLockOptions)
+
+  if (!lockResult.success || !lockResult.result) {
+    throw new Error(lockResult.error || 'Agent traffic lock acquisition failed')
+  }
+
+  return lockResult.result
+}
+
+async function processOneAgentInstanceReport(
+  instance: ReportedDbInstance,
+  item: NormalizedAgentInstanceItem,
+  now: Date
+): Promise<Pick<AgentInstanceReportResult, 'statusUpdated' | 'trafficUpdated' | 'trafficDeltaBytes' | 'skipped' | 'errors'>> {
+  let statusUpdated = 0
+  let trafficUpdated = 0
+  let trafficDelta = 0n
+  let skipped = 0
+  let errors = 0
+
+  try {
+    if (shouldSyncStatus(instance.status, item.status)) {
+      const updateData = buildStatusUpdateData(item, now)
+      if (updateData) {
+        const updateResult = await prisma.instance.updateMany({
+          where: {
+            id: instance.id,
+            status: { not: 'deleted' }
+          },
+          data: updateData
+        })
+        statusUpdated = updateResult.count
+      }
+    } else {
+      skipped += 1
+    }
+
+    const trafficResult = await applyReportedTrafficCounters(instance, item, now)
+    if (trafficResult.updated) {
+      trafficUpdated = 1
+      trafficDelta = trafficResult.delta
+    }
+  } catch (error) {
+    errors += 1
+    console.warn('[AgentReport] Failed to process reported instance', {
+      instanceId: instance.id,
+      incusId: instance.incusId,
+      error: error instanceof Error ? error.message : String(error)
+    })
+  }
+
+  return {
+    statusUpdated,
+    trafficUpdated,
+    trafficDeltaBytes: trafficDelta.toString(),
+    skipped,
+    errors
+  }
+}
+
+export async function processAgentInstanceReport(hostId: number, payload: unknown): Promise<AgentInstanceReportResult> {
+  const items = normalizeAgentInstanceItems(payload)
+  const result: AgentInstanceReportResult = {
+    received: items.length,
+    matched: 0,
+    statusUpdated: 0,
+    trafficUpdated: 0,
+    trafficDeltaBytes: '0',
+    skipped: 0,
+    errors: 0
+  }
+
+  if (items.length === 0) {
+    return result
+  }
+
+  const incusIds = Array.from(new Set(items.map(item => item.name)))
+  const instances = await prisma.instance.findMany({
+    where: {
+      hostId,
+      incusId: { in: incusIds },
+      status: { not: 'deleted' }
+    },
+    select: {
+      id: true,
+      incusId: true,
+      userId: true,
+      status: true
+    }
+  })
+  const instanceByIncusId = new Map(instances.map(instance => [instance.incusId, instance]))
+  const limit = pLimit(agentReportConcurrency)
+
+  const itemResults = await Promise.all(items.map(item => limit(async () => {
+    const instance = instanceByIncusId.get(item.name)
+    if (!instance) {
+      return {
+        matched: 0,
+        statusUpdated: 0,
+        trafficUpdated: 0,
+        trafficDeltaBytes: '0',
+        skipped: 1,
+        errors: 0
+      }
+    }
+
+    const itemResult = await processOneAgentInstanceReport(instance, item, new Date())
+    return {
+      matched: 1,
+      ...itemResult
+    }
+  })))
+
+  let trafficDelta = 0n
+  for (const itemResult of itemResults) {
+    result.matched += itemResult.matched
+    result.statusUpdated += itemResult.statusUpdated
+    result.trafficUpdated += itemResult.trafficUpdated
+    result.skipped += itemResult.skipped
+    result.errors += itemResult.errors
+    trafficDelta += BigInt(itemResult.trafficDeltaBytes)
+  }
+  result.trafficDeltaBytes = trafficDelta.toString()
+
+  return result
+}
diff --git a/server/src/services/auto-policy-scheduler.ts b/server/src/services/auto-policy-scheduler.ts
new file mode 100644
index 0000000..2c6e09f
--- /dev/null
+++ b/server/src/services/auto-policy-scheduler.ts
@@ -0,0 +1,296 @@
+/**
+ * 自动快照/备份策略调度器
+ * 负责定时执行用户配置的自动快照和自动备份策略
+ */
+
+import { schedule } from 'node-cron'
+import pLimit from 'p-limit'
+import { prisma } from '../db/prisma.js'
+import { IncusClient } from '../lib/incus/incus-client.js'
+import { createSnapshot as createIncusSnapshot } from '../lib/incus/incus-snapshots.js'
+import * as db from '../db/index.js'
+import { sendNotification } from '../lib/notifier.js'
+import { createLog } from '../db/logs.js'
+
+// 并发限制：同时最多处理 5 个任务
+const limit = pLimit(5)
+
+// 最大重试次数
+const MAX_RETRIES = 3
+// 重试延迟（毫秒）
+const RETRY_DELAY = 5000
+
+/**
+ * 延迟函数
+ */
+function delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 获取或创建 Incus 客户端
+ */
+async function getIncusClient(host: {
+    url: string
+    certPath: string | null
+    keyPath: string | null
+}): Promise<IncusClient | null> {
+    if (!host.certPath || !host.keyPath) {
+        return null
+    }
+
+    const client = new IncusClient({
+        url: host.url,
+        certPath: host.certPath,
+        keyPath: host.keyPath
+    })
+
+    try {
+        await client.connect()
+        return client
+    } catch (error) {
+        console.error('[AutoPolicy] Failed to connect to host:', error)
+        return null
+    }
+}
+
+/**
+ * 生成快照/备份名称
+ */
+function generateName(prefix: string): string {
+    const now = new Date()
+    const timestamp = now.toISOString()
+        .replace(/[-:]/g, '')
+        .replace('T', '-')
+        .slice(0, 15)
+    return `${prefix}-${timestamp}`
+}
+
+/**
+ * 执行自动快照（带重试）
+ * 配额继承自套餐包，满额时删除最旧的自动快照
+ */
+async function executeAutoSnapshot(
+    policy: {
+        instanceId: number
+        instance: {
+            id: number
+            incusId: string
+            name: string
+            userId: number
+            snapshotLimit: number | null
+            host: {
+                url: string
+                name: string
+                certPath: string | null
+                keyPath: string | null
+            }
+        }
+    }
+): Promise<void> {
+    const { instance } = policy
+    const snapshotLimit = instance.snapshotLimit
+    
+    // 没有配额，无法创建自动快照
+    if (!snapshotLimit || snapshotLimit <= 0) {
+        console.log(`[AutoPolicy] Instance ${instance.id} has no snapshot quota, skipping`)
+        return
+    }
+    
+    let lastError: Error | null = null
+
+    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+        try {
+            console.log(`[AutoPolicy] Creating auto snapshot for instance ${instance.id} (attempt ${attempt}/${MAX_RETRIES})`)
+
+            const client = await getIncusClient(instance.host)
+            if (!client) {
+                throw new Error('Failed to connect to host')
+            }
+
+            const snapshotName = generateName('auto')
+            
+            // 检查当前快照数量
+            const currentSnapshots = await prisma.snapshot.findMany({
+                where: { instanceId: instance.id },
+                orderBy: { createdAt: 'asc' }
+            })
+            
+            let deletedSnapshotName: string | null = null
+            
+            // 如果已达到配额上限，先删除最旧的自动快照
+            if (currentSnapshots.length >= snapshotLimit) {
+                // 优先删除最旧的自动快照
+                const autoSnapshots = currentSnapshots.filter(s => s.name.startsWith('auto-'))
+                const snapshotToDelete = autoSnapshots[0] || currentSnapshots[0]
+                
+                if (snapshotToDelete) {
+                    try {
+                        const { deleteSnapshot } = await import('../lib/incus/incus-snapshots.js')
+                        await deleteSnapshot(client, instance.incusId, snapshotToDelete.incusName)
+                        await prisma.snapshot.delete({ where: { id: snapshotToDelete.id } })
+                        deletedSnapshotName = snapshotToDelete.name
+                        console.log(`[AutoPolicy] Deleted old snapshot to make room: ${snapshotToDelete.name}`)
+                    } catch (delErr) {
+                        console.error(`[AutoPolicy] Failed to delete old snapshot:`, delErr)
+                        throw new Error(`Failed to delete old snapshot: ${snapshotToDelete.name}`)
+                    }
+                }
+            }
+
+            // 在 Incus 中创建快照
+            await createIncusSnapshot(client, instance.incusId, snapshotName)
+
+            // 在数据库中记录
+            await db.createSnapshot({
+                instanceId: instance.id,
+                incusName: snapshotName,
+                name: snapshotName,
+                description: '自动快照',
+                stateful: false
+            })
+
+            // 更新策略最后运行时间
+            await db.updateSnapshotPolicyLastRun(instance.id)
+
+            // 发送通知（区分是否轮换）
+            if (deletedSnapshotName) {
+                await sendNotification(instance.userId, 'auto_snapshot_rotated', {
+                    instanceName: instance.name,
+                    snapshotName,
+                    deletedName: deletedSnapshotName,
+                    quotaLimit: snapshotLimit,
+                    hostName: instance.host.name
+                })
+            } else {
+                await sendNotification(instance.userId, 'auto_snapshot', {
+                    instanceName: instance.name,
+                    snapshotName,
+                    hostName: instance.host.name
+                })
+            }
+
+            // 记录日志
+            await createLog(
+                instance.userId,
+                'snapshot',
+                'snapshot.auto_create',
+                `Auto snapshot "${snapshotName}" created for instance "${instance.name}"${deletedSnapshotName ? ` (deleted old: ${deletedSnapshotName})` : ''}`,
+                'success',
+                { instanceId: instance.id }
+            )
+
+            console.log(`[AutoPolicy] Auto snapshot created for instance ${instance.id}: ${snapshotName}`)
+            return // 成功，退出重试循环
+
+        } catch (error) {
+            lastError = error instanceof Error ? error : new Error(String(error))
+            console.error(`[AutoPolicy] Auto snapshot failed for instance ${instance.id} (attempt ${attempt}):`, lastError.message)
+
+            if (attempt < MAX_RETRIES) {
+                await delay(RETRY_DELAY * attempt) // 递增延迟
+            }
+        }
+    }
+
+    // 所有重试都失败
+    console.error(`[AutoPolicy] Auto snapshot failed after ${MAX_RETRIES} attempts for instance ${instance.id}`)
+    
+    // 即使失败也更新下次运行时间，避免无限重试
+    await db.updateSnapshotPolicyLastRun(instance.id)
+    
+    // 发送失败通知
+    await sendNotification(instance.userId, 'snapshot_failed', {
+        instanceName: instance.name,
+        error: lastError?.message || 'Unknown error',
+        hostName: instance.host.name
+    })
+    
+    await createLog(
+        instance.userId,
+        'snapshot',
+        'snapshot.auto_create',
+        `Auto snapshot failed for instance "${instance.name}": ${lastError?.message}`,
+        'failed',
+        { instanceId: instance.id }
+    )
+}
+
+/**
+ * 运行自动快照任务
+ */
+export async function runAutoSnapshotJob(): Promise<void> {
+    console.log('[AutoPolicy] Starting auto snapshot job...')
+    const startTime = Date.now()
+
+    try {
+        const now = new Date()
+
+        // 获取待执行的快照策略
+        const policies = await prisma.snapshotPolicy.findMany({
+            where: {
+                enabled: true,
+                OR: [
+                    { nextRunAt: null },
+                    { nextRunAt: { lte: now } }
+                ]
+            },
+            include: {
+                instance: {
+                    include: {
+                        host: true
+                    }
+                }
+            }
+        })
+
+        // 过滤掉已删除的实例，允许 running 和 stopped 状态
+        const validPolicies = policies.filter(p =>
+            p.instance &&
+            ['running', 'stopped'].includes(p.instance.status) &&
+            p.instance.host.status === 'online'
+        )
+
+        console.log(`[AutoPolicy] Found ${validPolicies.length} snapshot policies to execute`)
+
+        // 并发执行（允许 running 和 stopped 状态）
+        await Promise.all(
+            validPolicies.map(policy =>
+                limit(() => executeAutoSnapshot({
+                    instanceId: policy.instanceId,
+                    instance: {
+                        id: policy.instance.id,
+                        incusId: policy.instance.incusId,
+                        name: policy.instance.name,
+                        userId: policy.instance.userId,
+                        snapshotLimit: policy.instance.snapshotLimit,
+                        host: {
+                            url: policy.instance.host.url,
+                            name: policy.instance.host.name,
+                            certPath: policy.instance.host.certPath,
+                            keyPath: policy.instance.host.keyPath
+                        }
+                    }
+                }))
+            )
+        )
+
+        const duration = Date.now() - startTime
+        console.log(`[AutoPolicy] Auto snapshot job completed in ${duration}ms`)
+    } catch (error) {
+        console.error('[AutoPolicy] Auto snapshot job failed:', error)
+    }
+}
+
+/**
+ * 启动自动策略调度器
+ */
+export function startAutoPolicyScheduler(): void {
+    // 每 5 分钟检查一次快照策略（支持10分钟频率）
+    schedule('*/5 * * * *', () => {
+        runAutoSnapshotJob().catch(console.error)
+    })
+
+    console.log('[AutoPolicy] Scheduler started')
+    console.log('[AutoPolicy] - Auto snapshot: every 5 minutes')
+}
diff --git a/server/src/services/billing-scheduler.ts b/server/src/services/billing-scheduler.ts
new file mode 100644
index 0000000..c9515ac
--- /dev/null
+++ b/server/src/services/billing-scheduler.ts
@@ -0,0 +1,627 @@
+/**
+ * 计费调度器
+ * 负责定时执行自动续费、到期封停、到期删除、到期提醒等任务
+ */
+
+import { schedule } from 'node-cron'
+import pLimit from 'p-limit'
+import { prisma } from '../db/prisma.js'
+import * as db from '../db/index.js'
+import { sendHostManagedInstanceNotification, sendNotification } from '../lib/notifier.js'
+import { 
+  sendExpiryReminderEmail, 
+  sendAutoRenewSuccessEmail, 
+  sendAutoRenewFailedEmail 
+} from '../lib/mailer.js'
+import { createLog } from '../db/logs.js'
+import {
+  performRenewal,
+  calculateRenewBilling
+} from '../db/billing-operations.js'
+import {
+  getAutoRenewInstances,
+  getExpiredUnsuspendedInstances,
+  getSuspendedInstancesOlderThan,
+  suspendInstanceByExpiry,
+  updateAutoRenewAttempt,
+  updateExpiryNotifiedAt
+} from '../db/instance-suspend.js'
+import { deleteInstance as deleteIncusInstance, getIncusClient } from '../lib/incus/index.js'
+import { rollbackResources } from '../db/index.js'
+import { sendReleaseNotification } from '../lib/release-notifier.js'
+
+// 并发限制
+const limit = pLimit(5)
+
+// 配置常量
+const AUTO_RENEW_HOURS_BEFORE = 24 // 到期前24小时尝试自动续费
+const AUTO_RENEW_MAX_ATTEMPTS = 3 // 最大自动续费尝试次数
+const SUSPEND_AFTER_DELETE_DAYS = 3 // 封停后3天自动删除
+const EXPIRY_NOTIFY_DAYS = [3] // 仅在到期前3天提醒一次
+
+/**
+ * 延迟函数
+ */
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+// ==================== 自动续费任务 ====================
+
+/**
+ * 执行自动续费
+ */
+async function executeAutoRenew(): Promise<void> {
+  console.log('[Billing] Starting auto-renew job...')
+  const startTime = Date.now()
+
+  try {
+    // 获取24小时内到期且开启了自动续费的实例
+    const instances = await getAutoRenewInstances(AUTO_RENEW_HOURS_BEFORE)
+
+    console.log(`[Billing] Found ${instances.length} instances for auto-renew`)
+
+    // 并发处理
+    await Promise.all(
+      instances.map(instance =>
+        limit(() => processAutoRenew(instance))
+      )
+    )
+
+    const duration = Date.now() - startTime
+    console.log(`[Billing] Auto-renew job completed in ${duration}ms`)
+  } catch (error) {
+    console.error('[Billing] Auto-renew job failed:', error)
+  }
+}
+
+/**
+ * 处理单个实例的自动续费
+ */
+async function processAutoRenew(instance: any): Promise<void> {
+  const attempts = (instance.autoRenewAttempts || 0) + 1
+
+  // 检查是否超过最大尝试次数
+  if (attempts > AUTO_RENEW_MAX_ATTEMPTS) {
+    console.log(`[Billing] Instance ${instance.id} exceeded max auto-renew attempts, disabling`)
+    await updateAutoRenewAttempt(instance.id, attempts, true)
+    return
+  }
+
+  try {
+    // 按原计费周期续费（如季付续3个月）
+    const renewMonths = instance.billingCycle || 1
+    const renewInfo = calculateRenewBilling(instance, renewMonths)
+
+    // 获取用户信息（包括邮箱）
+    const user = await prisma.user.findUnique({
+      where: { id: instance.userId },
+      select: { balance: true, email: true, username: true }
+    })
+
+    if (!user) {
+      console.log(`[Billing] User ${instance.userId} not found for instance ${instance.id}`)
+      await updateAutoRenewAttempt(instance.id, attempts)
+      return
+    }
+
+    const balance = Number(user.balance)
+
+    // 余额不足
+    if (balance < renewInfo.amount) {
+      console.log(`[Billing] Insufficient balance for instance ${instance.id}: need ${renewInfo.amount}, have ${balance}`)
+      await updateAutoRenewAttempt(instance.id, attempts)
+
+      // 发送自动续费失败站内通知
+      await sendNotification(instance.userId, 'auto_renew_failed', {
+        instanceName: instance.name,
+        failReason: `余额不足（需要 ¥${renewInfo.amount.toFixed(2)}，当前 ¥${balance.toFixed(2)}）`,
+        renewAmount: renewInfo.amount  // 元（calculateRenewBilling 返回的是元）
+      })
+
+      // 发送自动续费失败邮件
+      if (user.email) {
+        try {
+          await sendAutoRenewFailedEmail(user.email, {
+            username: user.username,
+            instanceName: instance.name,
+            failReason: `余额不足（需要 ¥${renewInfo.amount.toFixed(2)}，当前 ¥${balance.toFixed(2)}）`,
+            currentAttempt: attempts,
+            maxAttempts: AUTO_RENEW_MAX_ATTEMPTS,
+            expiresAt: instance.expiresAt
+          })
+        } catch (emailErr) {
+          console.warn(`[Billing] Failed to send auto-renew failed email:`, emailErr)
+        }
+      }
+
+      await createLog(
+        instance.userId,
+        'instance',
+        'instance.auto_renew_failed',
+        `Auto-renew failed for instance "${instance.name}": insufficient balance`,
+        'failed',
+        { instanceId: instance.id }
+      )
+      return
+    }
+
+    // 执行续费
+    const result = await performRenewal(instance.userId, instance, renewMonths)
+
+    // 发送续费成功站内通知
+    await sendNotification(instance.userId, 'instance_renewed', {
+      instanceName: instance.name,
+      renewAmount: result.amount,  // 元（performRenewal 返回的是元）
+      renewMonths: renewMonths,
+      newExpiresAt: result.newExpiresAt.toISOString()
+    })
+
+    if (result.hostingIncomeResult) {
+      sendHostManagedInstanceNotification(
+        instance.hostId,
+        'renew',
+        {
+          username: user.username,
+          instanceName: instance.name,
+          amount: result.amount
+        }
+      ).catch(err => {
+        console.warn('[Billing] Failed to send host renew notification:', err)
+      })
+    }
+
+    // 发送自动续费成功邮件
+    if (user.email) {
+      try {
+        // 获取续费后的余额
+        const userAfter = await prisma.user.findUnique({
+          where: { id: instance.userId },
+          select: { balance: true }
+        })
+        const newBalance = Number(userAfter?.balance ?? 0)
+
+        await sendAutoRenewSuccessEmail(user.email, {
+          username: user.username,
+          instanceName: instance.name,
+          amount: result.amount,
+          months: renewMonths,
+          newExpiresAt: result.newExpiresAt,
+          newBalance
+        })
+      } catch (emailErr) {
+        console.warn(`[Billing] Failed to send auto-renew success email:`, emailErr)
+      }
+    }
+
+    await createLog(
+      instance.userId,
+      'instance',
+      'instance.auto_renew',
+      `Auto-renewed instance "${instance.name}" for ${renewMonths} month(s), amount: ${result.amount}`,
+      'success',
+      { instanceId: instance.id }
+    )
+
+    console.log(`[Billing] Auto-renewed instance ${instance.id}`)
+
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+    console.error(`[Billing] Auto-renew failed for instance ${instance.id}:`, errorMessage)
+    await updateAutoRenewAttempt(instance.id, attempts)
+
+    // 发送失败站内通知
+    await sendNotification(instance.userId, 'auto_renew_failed', {
+      instanceName: instance.name,
+      failReason: errorMessage
+    })
+
+    // 发送自动续费失败邮件
+    const userForEmail = await prisma.user.findUnique({
+      where: { id: instance.userId },
+      select: { email: true, username: true }
+    })
+    if (userForEmail?.email) {
+      try {
+        await sendAutoRenewFailedEmail(userForEmail.email, {
+          username: userForEmail.username,
+          instanceName: instance.name,
+          failReason: errorMessage,
+          currentAttempt: attempts,
+          maxAttempts: AUTO_RENEW_MAX_ATTEMPTS,
+          expiresAt: instance.expiresAt
+        })
+      } catch (emailErr) {
+        console.warn(`[Billing] Failed to send auto-renew failed email:`, emailErr)
+      }
+    }
+
+    await createLog(
+      instance.userId,
+      'instance',
+      'instance.auto_renew_failed',
+      `Auto-renew failed for instance "${instance.name}": ${errorMessage}`,
+      'failed',
+      { instanceId: instance.id }
+    )
+  }
+}
+
+// ==================== 到期封停任务 ====================
+
+/**
+ * 执行到期封停
+ */
+async function executeExpirySuspend(): Promise<void> {
+  console.log('[Billing] Starting expiry suspend job...')
+  const startTime = Date.now()
+
+  try {
+    // 获取已到期但未封停的实例
+    const instances = await getExpiredUnsuspendedInstances()
+
+    console.log(`[Billing] Found ${instances.length} expired instances to suspend`)
+
+    // 并发处理
+    await Promise.all(
+      instances.map(instance =>
+        limit(() => processExpirySuspend(instance))
+      )
+    )
+
+    const duration = Date.now() - startTime
+    console.log(`[Billing] Expiry suspend job completed in ${duration}ms`)
+  } catch (error) {
+    console.error('[Billing] Expiry suspend job failed:', error)
+  }
+}
+
+/**
+ * 处理单个实例的到期封停
+ */
+async function processExpirySuspend(instance: any): Promise<void> {
+  try {
+    // 封停实例
+    await suspendInstanceByExpiry(instance.id)
+
+    // 尝试停止 Incus 实例
+    try {
+      const host = await db.getHostById(instance.hostId)
+      if (host) {
+        const client = await getIncusClient(host)
+        const { stopInstance } = await import('../lib/incus/index.js')
+        await stopInstance(client, instance.incusId, true) // force stop
+      }
+    } catch (stopError) {
+      // 停止失败不影响封停逻辑
+      console.log(`[Billing] Failed to stop Incus instance ${instance.incusId}:`, stopError)
+    }
+
+    // 发送封停通知
+    await sendNotification(instance.userId, 'instance_suspended', {
+      instanceName: instance.name,
+      suspendReason: '实例已到期'
+    })
+
+    await createLog(
+      instance.userId,
+      'instance',
+      'instance.suspended_expired',
+      `Instance "${instance.name}" suspended due to expiry`,
+      'success',
+      { instanceId: instance.id }
+    )
+
+    console.log(`[Billing] Suspended expired instance ${instance.id}`)
+
+  } catch (error) {
+    console.error(`[Billing] Failed to suspend instance ${instance.id}:`, error)
+  }
+}
+
+// ==================== 到期删除任务 ====================
+
+/**
+ * 执行到期删除（封停超过3天的实例）
+ */
+async function executeExpiryDelete(): Promise<void> {
+  console.log('[Billing] Starting expiry delete job...')
+  const startTime = Date.now()
+
+  try {
+    // 获取封停超过3天的实例（仅限到期封停的）
+    const instances = await getSuspendedInstancesOlderThan(SUSPEND_AFTER_DELETE_DAYS)
+
+    // 过滤出到期封停的（非手动封停）
+    const expiredInstances = instances.filter(i => i.suspendReason === 'expired')
+
+    console.log(`[Billing] Found ${expiredInstances.length} expired instances to delete`)
+
+    // 串行处理删除（避免并发问题）
+    for (const instance of expiredInstances) {
+      await processExpiryDelete(instance)
+      await delay(1000) // 间隔1秒
+    }
+
+    const duration = Date.now() - startTime
+    console.log(`[Billing] Expiry delete job completed in ${duration}ms`)
+  } catch (error) {
+    console.error('[Billing] Expiry delete job failed:', error)
+  }
+}
+
+/**
+ * 处理单个实例的到期删除
+ */
+async function processExpiryDelete(instance: any): Promise<void> {
+  try {
+    const host = await db.getHostById(instance.hostId)
+
+    // 尝试删除 Incus 实例
+    if (host) {
+      try {
+        const client = await getIncusClient(host)
+        await deleteIncusInstance(client, instance.incusId)
+      } catch (incusError) {
+        // Incus 删除失败不影响数据库记录的清理
+        console.log(`[Billing] Failed to delete Incus instance ${instance.incusId}:`, incusError)
+      }
+    }
+
+    // 回滚实例资源
+    await rollbackResources({
+      hostId: instance.hostId,
+      cpu: instance.cpu,
+      memory: instance.memory,
+      disk: instance.disk,
+      portCount: instance.portLimit || 0
+    })
+
+    // 删除数据库记录（级联删除关联数据）
+    await prisma.instance.delete({
+      where: { id: instance.id }
+    })
+
+    // 发送删除通知
+    await sendNotification(instance.userId, 'instance_deleted', {
+      instanceName: instance.name
+    })
+
+    await createLog(
+      instance.userId,
+      'instance',
+      'instance.deleted_expired',
+      `Instance "${instance.name}" automatically deleted after ${SUSPEND_AFTER_DELETE_DAYS} days of suspension`,
+      'success'
+    )
+
+    console.log(`[Billing] Deleted expired instance ${instance.id}`)
+
+    // 向套餐绑定的通知渠道发送"资源释放"通知
+    if (instance.packageId) {
+      sendReleaseNotification({
+        packageId: instance.packageId,
+        cpu: instance.cpu,
+        memory: instance.memory,
+        source: '实例过期自动删除'
+      }).catch(() => {})
+    }
+
+  } catch (error) {
+    console.error(`[Billing] Failed to delete instance ${instance.id}:`, error)
+  }
+}
+
+// ==================== 到期提醒任务 ====================
+
+/**
+ * 执行到期提醒（邮件）
+ */
+async function executeExpiryNotify(): Promise<void> {
+  console.log('[Billing] Starting expiry notify job...')
+  const startTime = Date.now()
+
+  try {
+    // 对每个提醒时间点检查（天数）
+    for (const days of EXPIRY_NOTIFY_DAYS) {
+      await notifyExpiringInstances(days)
+    }
+
+    const duration = Date.now() - startTime
+    console.log(`[Billing] Expiry notify job completed in ${duration}ms`)
+  } catch (error) {
+    console.error('[Billing] Expiry notify job failed:', error)
+  }
+}
+
+/**
+ * 通知指定天数内到期的实例（发送邮件）
+ */
+async function notifyExpiringInstances(days: number): Promise<void> {
+  const now = new Date()
+  // 计算天数范围（前后12小时窗口）
+  const minThreshold = new Date(now.getTime() + (days * 24 - 12) * 60 * 60 * 1000)
+  const maxThreshold = new Date(now.getTime() + (days * 24 + 12) * 60 * 60 * 1000)
+
+  // 查询在指定时间窗口内到期的实例
+  const instances = await prisma.instance.findMany({
+    where: {
+      expiresAt: {
+        gte: minThreshold,
+        lt: maxThreshold
+      },
+      autoRenew: false,
+      status: { notIn: ['suspended', 'deleted'] },
+      // 在过去24小时内没有发送过通知
+      OR: [
+        { expiryNotifiedAt: null },
+        { expiryNotifiedAt: { lt: new Date(now.getTime() - 24 * 60 * 60 * 1000) } }
+      ]
+    },
+    include: {
+      user: {
+        select: { email: true, username: true }
+      }
+    }
+  })
+
+  console.log(`[Billing] Found ${instances.length} instances expiring in ${days} days`)
+
+  // 并发发送邮件通知
+  await Promise.all(
+    instances.map(instance =>
+      limit(async () => {
+        try {
+          const daysRemaining = days
+
+          // 发送站内通知
+          await sendNotification(instance.userId, 'instance_expiring', {
+            instanceName: instance.name,
+            daysRemaining,
+            newExpiresAt: instance.expiresAt?.toISOString()
+          })
+
+          // 发送邮件通知
+          if (instance.user?.email) {
+            try {
+              await sendExpiryReminderEmail(instance.user.email, {
+                username: instance.user.username,
+                instanceName: instance.name,
+                daysRemaining,
+                expiresAt: instance.expiresAt!
+              })
+            } catch (emailErr) {
+              console.warn(`[Billing] Failed to send expiry email for instance ${instance.id}:`, emailErr)
+            }
+          }
+
+          await updateExpiryNotifiedAt(instance.id)
+
+          console.log(`[Billing] Sent expiry notification for instance ${instance.id}`)
+        } catch (error) {
+          console.error(`[Billing] Failed to notify instance ${instance.id}:`, error)
+        }
+      })
+    )
+  )
+}
+
+// ==================== 充值订单清理任务 ====================
+
+/**
+ * 清理过期的充值订单（pending状态且已过期）
+ * 每小时执行，将过期订单标记为 cancelled
+ */
+async function cleanExpiredRechargeOrders(): Promise<void> {
+  console.log('[Billing] Starting expired recharge orders cleanup job...')
+  const startTime = Date.now()
+
+  try {
+    const result = await prisma.rechargeRecord.updateMany({
+      where: {
+        status: 'pending',
+        expiredAt: { lt: new Date() }
+      },
+      data: {
+        status: 'cancelled'
+      }
+    })
+
+    const duration = Date.now() - startTime
+    if (result.count > 0) {
+      console.log(`[Billing] Cancelled ${result.count} expired recharge orders in ${duration}ms`)
+    }
+  } catch (error) {
+    console.error('[Billing] Expired recharge orders cleanup failed:', error)
+  }
+}
+
+/**
+ * 清理旧的支付回调防重放记录（30天前）
+ * 每天执行，避免数据无限增长
+ */
+async function cleanOldPaymentCallbacks(): Promise<void> {
+  console.log('[Billing] Starting old payment callbacks cleanup job...')
+  const startTime = Date.now()
+
+  try {
+    const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+    const result = await prisma.paymentCallback.deleteMany({
+      where: {
+        createdAt: { lt: thirtyDaysAgo }
+      }
+    })
+
+    const duration = Date.now() - startTime
+    if (result.count > 0) {
+      console.log(`[Billing] Deleted ${result.count} old payment callback records in ${duration}ms`)
+    }
+  } catch (error) {
+    console.error('[Billing] Old payment callbacks cleanup failed:', error)
+  }
+}
+
+// ==================== 调度器入口 ====================
+
+/**
+ * 启动计费调度器
+ */
+export function startBillingScheduler(): void {
+  // 每小时检查自动续费（整点）
+  schedule('0 * * * *', () => {
+    executeAutoRenew().catch(console.error)
+  })
+
+  // 每30分钟检查到期封停
+  schedule('*/30 * * * *', () => {
+    executeExpirySuspend().catch(console.error)
+  })
+
+  // 每天凌暨3点检查到期删除
+  schedule('0 3 * * *', () => {
+    executeExpiryDelete().catch(console.error)
+  })
+
+  // 每小时检查到期提醒
+  schedule('15 * * * *', () => {
+    executeExpiryNotify().catch(console.error)
+  })
+
+  // 每小时清理过期的充值订单（在 :30 执行）
+  schedule('30 * * * *', () => {
+    cleanExpiredRechargeOrders().catch(console.error)
+  })
+
+  // 每天凌晨 4:30 清理旧的支付回调防重放记录（30天前）
+  schedule('30 4 * * *', () => {
+    cleanOldPaymentCallbacks().catch(console.error)
+  })
+
+  console.log('[Billing] Scheduler started')
+  console.log('[Billing] - Auto-renew: hourly at :00 (24h before expiry, max 3 attempts)')
+  console.log('[Billing] - Expiry suspend: every 30 minutes')
+  console.log('[Billing] - Expiry delete: daily at 03:00 (3 days after suspend)')
+  console.log('[Billing] - Expiry notify (email): hourly at :15 (3 days before, auto-renew instances skipped)')
+  console.log('[Billing] - Expired recharge cleanup: hourly at :30')
+  console.log('[Billing] - Payment callback cleanup: daily at 04:30')
+}
+
+/**
+ * 手动运行所有计费任务（用于测试）
+ */
+export async function runAllBillingJobs(): Promise<void> {
+  await executeAutoRenew()
+  await executeExpirySuspend()
+  await executeExpiryDelete()
+  await executeExpiryNotify()
+}
+
+// 导出单独的任务函数（用于测试）
+export {
+  executeAutoRenew,
+  executeExpirySuspend,
+  executeExpiryDelete,
+  executeExpiryNotify,
+  cleanExpiredRechargeOrders,
+  cleanOldPaymentCallbacks
+}
diff --git a/server/src/services/cranemail.ts b/server/src/services/cranemail.ts
new file mode 100644
index 0000000..071a24c
--- /dev/null
+++ b/server/src/services/cranemail.ts
@@ -0,0 +1,222 @@
+/**
+ * CraneMail Reseller API 集成服务
+ * 负责域名的创建、删除、暂停、恢复和状态查询
+ */
+
+import type { MailSource } from '@prisma/client'
+
+interface CraneMailResponse {
+  // 新版 API 格式
+  status?: boolean
+  errors?: Record<string, string>
+  // 旧版 API 格式
+  result?: 'success' | 'error'
+  error?: string
+  info?: any
+  // 通用数据字段
+  [key: string]: any
+}
+
+/**
+ * 调用 CraneMail API
+ */
+async function callApi(source: MailSource, action: string, data: Record<string, any>): Promise<any> {
+  // 构建 API URL： https://namecrane.com/index.php?m=cranemail&action=api/{action}
+  const baseUrl = source.apiUrl.replace(/\/$/, '') // 移除末尾斜杠
+  const apiUrl = `${baseUrl}/index.php?m=cranemail&action=api/${action}`
+  
+  const bodyData = new URLSearchParams(data).toString()
+  
+  console.log(`[CraneMail] Calling API: ${apiUrl}`)
+  console.log(`[CraneMail] Request body: ${bodyData}`)
+  
+  const response = await fetch(apiUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'X-API-KEY': source.apiKey
+    },
+    body: bodyData
+  })
+
+  const responseText = await response.text()
+  console.log(`[CraneMail] Response status: ${response.status}`)
+  console.log(`[CraneMail] Response body: ${responseText}`)
+
+  if (!response.ok) {
+    console.error(`[CraneMail] API error: ${response.status} ${response.statusText}`)
+    throw new Error(`CraneMail API error: ${response.status} ${response.statusText}`)
+  }
+
+  let result: CraneMailResponse
+  try {
+    result = JSON.parse(responseText) as CraneMailResponse
+  } catch {
+    console.error(`[CraneMail] Invalid JSON response: ${responseText}`)
+    throw new Error(`CraneMail API returned invalid JSON: ${responseText.substring(0, 200)}`)
+  }
+  
+  // 处理新版 API 格式 {status: boolean, errors?: {...}}
+  if (result.status === false) {
+    const errorMsg = result.errors 
+      ? Object.entries(result.errors).map(([k, v]) => `${k}: ${v}`).join('; ')
+      : 'Unknown error'
+    console.error(`[CraneMail] API returned error: ${errorMsg}`)
+    throw new Error(errorMsg)
+  }
+  
+  // 处理旧版 API 格式 {result: 'success'|'error', error?: string}
+  if (result.result === 'error') {
+    console.error(`[CraneMail] API returned error: ${result.error}`)
+    throw new Error(result.error || 'Unknown CraneMail API error')
+  }
+
+  // 新版 API 数据在 data 字段，旧版在 info 字段
+  return result.data || result.info || result
+}
+
+/**
+ * 创建域名
+ * @returns 返回管理员账号和密码
+ */
+export async function createDomain(
+  source: MailSource,
+  domain: string,
+  diskLimitGb: number
+): Promise<{ username?: string; password?: string; server?: string }> {
+  const result = await callApi(source, 'domain/create', {
+    domain,
+    disklimit: diskLimitGb.toString(),
+    userlimit: '0', // 无限用户
+    useraliaslimit: '0',
+    domainaliaslimit: '0',
+    maxusers: '0', // 备用参数名
+    maxuseraliases: '0', // 备用参数名
+    spamexperts: 'true',
+    spamexperts_adminaccess: 'all', // 必需参数，有效值: 'primary' | 'all'
+    filestorage: 'true',
+    office: 'true'
+  })
+
+  // API 返回格式: {status: true, username: "postmaster@domain.com", password: "xxx", server: "xxx"}
+  return {
+    username: result?.username,
+    password: result?.password,
+    server: result?.server
+  }
+}
+
+/**
+ * 获取域名信息（包含验证状态）
+ */
+export async function getDomainInfo(source: MailSource, domain: string): Promise<{
+  verified: boolean
+  txtRecord?: string
+  dnsRecords?: Array<{ type: string; record: string; value: string; prio?: number }>
+  mxRecords?: string[]
+  spfRecord?: string
+  dkimRecord?: string
+  cnameRecords?: Array<{ record: string; value: string }>
+  diskUsedMb?: number
+}> {
+  const result = await callApi(source, 'domain/info', { domain })
+
+  // 解析验证状态 - status 可能是数字 0/1 或布尔值
+  const verifiedStatus = result?.verified?.status
+  const verified = verifiedStatus === true || verifiedStatus === 'true' || verifiedStatus === 1 || verifiedStatus === '1'
+  
+  // DNS 记录是数组格式 [{type, record, value, prio?}]
+  const dnsArray: Array<{ type: string; record: string; value: string; prio?: number }> = result?.dns || []
+  
+  // 添加 workspace-verification TXT 记录（从 verified.txt 解析）
+  if (result?.verified?.txt) {
+    dnsArray.unshift({
+      type: 'TXT',
+      record: 'workspace-verification',
+      value: result.verified.txt
+    })
+  }
+  
+  // 添加 DMARC TXT 记录（固定值）
+  dnsArray.push({
+    type: 'TXT',
+    record: '_dmarc',
+    value: 'v=DMARC1; p=none; sp=none'
+  })
+  
+  // 添加 DKIM TXT 记录（从 dkim 字段解析，仅在验证成功后显示）
+  if (verified && result?.dkim?.selector && result?.dkim?.key) {
+    dnsArray.push({
+      type: 'TXT',
+      record: result.dkim.selector,
+      value: `v=DKIM1; k=rsa; p=${result.dkim.key}`
+    })
+  }
+  
+  // 提取各类型 DNS 记录
+  const mxRecords = dnsArray
+    .filter(r => r.type === 'MX')
+    .map(r => r.prio ? `${r.prio} ${r.value}` : r.value)
+  
+  const spfRecord = dnsArray.find(r => r.type === 'TXT' && r.value?.includes('spf'))?.value
+  const dkimRecord = dnsArray.find(r => r.type === 'TXT' && r.record?.includes('dkim'))?.value
+  
+  const cnameRecords = dnsArray
+    .filter(r => r.type === 'CNAME')
+    .map(r => ({ record: r.record, value: r.value }))
+  
+  return {
+    verified,
+    txtRecord: result?.verified?.txt,
+    dnsRecords: dnsArray,
+    mxRecords,
+    spfRecord,
+    dkimRecord,
+    cnameRecords,
+    diskUsedMb: result?.diskusage ? parseInt(result.diskusage) : 0
+  }
+}
+
+/**
+ * 删除域名
+ */
+export async function deleteDomain(source: MailSource, domain: string): Promise<void> {
+  await callApi(source, 'domain/delete', { domain })
+}
+
+/**
+ * 暂停域名
+ */
+export async function suspendDomain(source: MailSource, domain: string): Promise<void> {
+  await callApi(source, 'domain/suspend', { domain })
+}
+
+/**
+ * 恢复域名
+ */
+export async function unsuspendDomain(source: MailSource, domain: string): Promise<void> {
+  await callApi(source, 'domain/unsuspend', { domain })
+}
+
+/**
+ * 修改域名配置
+ */
+export async function modifyDomain(
+  source: MailSource,
+  domain: string,
+  options: {
+    diskLimitGb?: number
+    userLimit?: number
+  }
+): Promise<void> {
+  const data: Record<string, string> = { domain }
+  
+  if (options.diskLimitGb !== undefined) {
+    data.disklimit = options.diskLimitGb.toString()
+  }
+  if (options.userLimit !== undefined) {
+    data.userlimit = options.userLimit.toString()
+  }
+
+  await callApi(source, 'domain/modify', data)
+}
diff --git a/server/src/services/host-address-monitor.ts b/server/src/services/host-address-monitor.ts
new file mode 100644
index 0000000..8c75e7d
--- /dev/null
+++ b/server/src/services/host-address-monitor.ts
@@ -0,0 +1,480 @@
+import { lookup as dnsLookup } from 'dns/promises'
+import { isIP } from 'net'
+import { schedule } from 'node-cron'
+import { Address4, Address6 } from 'ip-address'
+import type { HostAddressCheckTrigger, HostAddressKind, Prisma } from '@prisma/client'
+import { acquireLock, releaseLock } from '../lib/distributed-lock.js'
+import { ErrorCode, type ErrorCodeType } from '../lib/errors.js'
+import { prisma } from '../db/prisma.js'
+import {
+  createHostAddressResolutionLog,
+  getAliasesByAddresses,
+  getHostsForAddressBackfill,
+  getHostsWithDomainInputAlias,
+  replaceHostResolvedAliases,
+  syncHostAddressConflicts,
+  type HostAddressAliasInput,
+  type HostAddressConflictInfo,
+  upsertHostInputAlias
+} from '../db/host-addresses.js'
+import { createBulkMessages } from '../db/inbox.js'
+import { createLog } from '../db/logs.js'
+import { getAllAdminUserIds } from '../db/users.js'
+
+type DbClient = Prisma.TransactionClient | typeof prisma
+
+const HOST_ADDRESS_LOCK_KEY = 'host-address-registry'
+const HOST_ADDRESS_POLL_CRON = '*/30 * * * *'
+const HOST_ADDRESS_LOCK_EXPIRE_MS = 60 * 1000
+const HOST_ADDRESS_LOCK_WAIT_MS = 10 * 1000
+
+interface NormalizedAddress {
+  address: string
+  kind: HostAddressKind
+}
+
+export interface HostAddressSnapshot {
+  input: NormalizedAddress
+  resolved: NormalizedAddress[]
+  aliases: HostAddressAliasInput[]
+}
+
+export class HostAddressRegistryError extends Error {
+  constructor(
+    public readonly errorCode: ErrorCodeType,
+    public readonly details?: string,
+    message?: string
+  ) {
+    super(message || details || errorCode)
+    this.name = 'HostAddressRegistryError'
+  }
+}
+
+function normalizeAddress(input: string): NormalizedAddress {
+  const trimmed = input.trim().replace(/^\[|\]$/g, '')
+  const family = isIP(trimmed)
+
+  if (family === 4) {
+    return {
+      address: new Address4(trimmed).correctForm(),
+      kind: 'ipv4'
+    }
+  }
+
+  if (family === 6) {
+    return {
+      address: new Address6(trimmed).correctForm(),
+      kind: 'ipv6'
+    }
+  }
+
+  return {
+    address: trimmed.toLowerCase().replace(/\.$/, ''),
+    kind: 'domain'
+  }
+}
+
+function extractInputAddress(url: string): NormalizedAddress {
+  try {
+    const urlObj = new URL(url)
+    return normalizeAddress(urlObj.hostname)
+  } catch {
+    throw new HostAddressRegistryError(
+      ErrorCode.HOST_ADDRESS_UNRESOLVABLE,
+      `宿主机连接地址格式无效: ${url}`
+    )
+  }
+}
+
+async function resolveDomainAddresses(domain: string): Promise<NormalizedAddress[]> {
+  try {
+    const records = await dnsLookup(domain, { all: true, verbatim: true })
+    const unique = new Map<string, NormalizedAddress>()
+
+    for (const record of records) {
+      const normalized = normalizeAddress(record.address)
+      unique.set(normalized.address, normalized)
+    }
+
+    const resolved = [...unique.values()]
+    if (resolved.length === 0) {
+      throw new HostAddressRegistryError(
+        ErrorCode.HOST_ADDRESS_UNRESOLVABLE,
+        `面板当前未解析到域名 ${domain}`
+      )
+    }
+
+    return resolved
+  } catch (error: any) {
+    if (error instanceof HostAddressRegistryError) {
+      throw error
+    }
+
+    const code = error?.code ? String(error.code) : 'UNKNOWN'
+    throw new HostAddressRegistryError(
+      ErrorCode.HOST_ADDRESS_UNRESOLVABLE,
+      `面板当前无法解析域名 ${domain} (${code})`
+    )
+  }
+}
+
+function buildSnapshot(input: NormalizedAddress, resolved: NormalizedAddress[]): HostAddressSnapshot {
+  const aliases = new Map<string, HostAddressAliasInput>()
+  aliases.set(input.address, {
+    address: input.address,
+    kind: input.kind,
+    source: 'input'
+  })
+
+  for (const item of resolved) {
+    aliases.set(item.address, {
+      address: item.address,
+      kind: item.kind,
+      source: 'resolved'
+    })
+  }
+
+  return {
+    input,
+    resolved,
+    aliases: [...aliases.values()]
+  }
+}
+
+export async function prepareHostAddressSnapshotForWrite(
+  url: string,
+  excludeHostId?: number
+): Promise<HostAddressSnapshot> {
+  const input = extractInputAddress(url)
+  const resolved = input.kind === 'domain'
+    ? await resolveDomainAddresses(input.address)
+    : []
+
+  const snapshot = buildSnapshot(input, resolved)
+  const conflicts = await getAliasesByAddresses(
+    snapshot.aliases.map(alias => alias.address),
+    excludeHostId
+  )
+
+  if (conflicts.length > 0) {
+    const hostsByAddress = new Map<string, string[]>()
+    for (const conflict of conflicts) {
+      const list = hostsByAddress.get(conflict.address) ?? []
+      const label = `${conflict.host.name}(#${conflict.host.id})`
+      if (!list.includes(label)) {
+        list.push(label)
+      }
+      hostsByAddress.set(conflict.address, list)
+    }
+
+    const detail = [...hostsByAddress.entries()]
+      .map(([address, hosts]) => `${address} 已被节点 ${hosts.join(', ')} 使用`)
+      .join('；')
+
+    throw new HostAddressRegistryError(ErrorCode.HOST_ADDRESS_EXISTS, detail)
+  }
+
+  return snapshot
+}
+
+export async function withHostAddressRegistryLock<T>(fn: () => Promise<T>): Promise<T> {
+  const lock = await acquireLock(HOST_ADDRESS_LOCK_KEY, {
+    expireMs: HOST_ADDRESS_LOCK_EXPIRE_MS,
+    waitTimeoutMs: HOST_ADDRESS_LOCK_WAIT_MS
+  })
+
+  if (!lock.success || !lock.ownerId) {
+    throw new Error(lock.error || 'Failed to acquire host address registry lock')
+  }
+
+  try {
+    return await fn()
+  } finally {
+    await releaseLock(HOST_ADDRESS_LOCK_KEY, lock.ownerId)
+  }
+}
+
+export async function persistHostAddressSnapshot(
+  hostId: number,
+  snapshot: HostAddressSnapshot,
+  trigger: HostAddressCheckTrigger,
+  client: DbClient = prisma
+): Promise<HostAddressConflictInfo[]> {
+  const existingAliases = await client.hostAddressAlias.findMany({
+    where: { hostId },
+    select: { address: true }
+  })
+
+  await client.hostAddressAlias.deleteMany({
+    where: {
+      hostId,
+      source: 'input',
+      address: {
+        not: snapshot.input.address
+      }
+    }
+  })
+
+  await upsertHostInputAlias(hostId, {
+    address: snapshot.input.address,
+    kind: snapshot.input.kind,
+    source: 'input'
+  }, client)
+
+  await replaceHostResolvedAliases(
+    hostId,
+    snapshot.resolved.map(item => ({
+      address: item.address,
+      kind: item.kind,
+      source: 'resolved'
+    })),
+    client
+  )
+
+  await createHostAddressResolutionLog({
+    hostId,
+    inputAddress: snapshot.input.address,
+    inputKind: snapshot.input.kind,
+    trigger,
+    status: 'success',
+    resolvedAddresses: snapshot.resolved.map(item => item.address),
+    details: {
+      aliasAddresses: snapshot.aliases.map(item => item.address)
+    }
+  }, client)
+
+  return syncHostAddressConflicts(
+    [
+      ...existingAliases.map(item => item.address),
+      ...snapshot.aliases.map(item => item.address)
+    ],
+    client
+  )
+}
+
+export async function recordHostAddressResolutionFailure(
+  hostId: number,
+  url: string,
+  trigger: HostAddressCheckTrigger,
+  error: HostAddressRegistryError,
+  client: DbClient = prisma
+): Promise<HostAddressConflictInfo[]> {
+  const existingAliases = await client.hostAddressAlias.findMany({
+    where: { hostId },
+    select: { address: true }
+  })
+  const input = extractInputAddress(url)
+
+  await client.hostAddressAlias.deleteMany({
+    where: {
+      hostId,
+      source: 'input',
+      address: {
+        not: input.address
+      }
+    }
+  })
+
+  await upsertHostInputAlias(hostId, {
+    address: input.address,
+    kind: input.kind,
+    source: 'input'
+  }, client)
+
+  await createHostAddressResolutionLog({
+    hostId,
+    inputAddress: input.address,
+    inputKind: input.kind,
+    trigger,
+    status: 'failed',
+    resolvedAddresses: [],
+    error: error.details || error.message,
+    details: {
+      errorCode: error.errorCode
+    }
+  }, client)
+
+  return syncHostAddressConflicts([
+    ...existingAliases.map(item => item.address),
+    input.address
+  ], client)
+}
+
+async function notifyAdminsAboutConflicts(conflicts: HostAddressConflictInfo[]): Promise<void> {
+  if (conflicts.length === 0) {
+    return
+  }
+
+  const adminIds = await getAllAdminUserIds()
+  if (adminIds.length === 0) {
+    return
+  }
+
+  const lines = conflicts.map(conflict =>
+    `地址 ${conflict.address} 在节点 ${conflict.hostAName}(#${conflict.hostAId}) 与 ${conflict.hostBName}(#${conflict.hostBId}) 之间发生冲突`
+  )
+
+  const content = lines.join('\n')
+
+  await createBulkMessages({
+    userIds: adminIds,
+    eventType: 'host_address_conflict',
+    title: '检测到节点连接地址冲突',
+    content,
+    data: {
+      conflicts: conflicts.map(conflict => ({
+        id: conflict.id,
+        address: conflict.address,
+        hostAId: conflict.hostAId,
+        hostBId: conflict.hostBId
+      }))
+    }
+  })
+
+  await createLog(
+    null,
+    'host',
+    'host.address_conflict',
+    content,
+    'warning'
+  )
+}
+
+export async function logHostAddressResolutionFailure(
+  actorUserId: number | null,
+  hostLabel: string,
+  url: string,
+  trigger: HostAddressCheckTrigger,
+  error: HostAddressRegistryError
+): Promise<void> {
+  const input = extractInputAddress(url)
+  const message = `[HostAddress] ${trigger} 解析失败: ${hostLabel} -> ${input.address}; ${error.details || error.message}`
+  console.warn(message)
+
+  await createLog(
+    actorUserId,
+    'host',
+    'host.address_resolve',
+    message,
+    'warning'
+  )
+}
+
+export async function syncExistingHostAddressState(
+  hostId: number,
+  hostName: string,
+  url: string,
+  trigger: Extract<HostAddressCheckTrigger, 'backfill' | 'poll'>
+): Promise<{ success: boolean }> {
+  try {
+    const input = extractInputAddress(url)
+    const resolved = input.kind === 'domain'
+      ? await resolveDomainAddresses(input.address)
+      : []
+    const snapshot = buildSnapshot(input, resolved)
+
+    const createdConflicts = await withHostAddressRegistryLock(async () => {
+      return prisma.$transaction(async tx => {
+        return persistHostAddressSnapshot(hostId, snapshot, trigger, tx)
+      })
+    })
+
+    await notifyAdminsAboutConflicts(createdConflicts)
+    return { success: true }
+  } catch (error) {
+    if (!(error instanceof HostAddressRegistryError)) {
+      console.error(`[HostAddress] ${trigger} failed for ${hostName}(#${hostId}):`, error)
+      return { success: false }
+    }
+
+    await logHostAddressResolutionFailure(null, `${hostName}(#${hostId})`, url, trigger, error)
+
+    try {
+      const createdConflicts = await withHostAddressRegistryLock(async () => {
+        return prisma.$transaction(async tx => {
+          return recordHostAddressResolutionFailure(hostId, url, trigger, error, tx)
+        })
+      })
+
+      await notifyAdminsAboutConflicts(createdConflicts)
+    } catch (persistError) {
+      console.error(`[HostAddress] Failed to persist ${trigger} error for ${hostName}(#${hostId}):`, persistError)
+    }
+
+    return { success: false }
+  }
+}
+
+export async function runHostAddressBackfillJob(): Promise<void> {
+  const hosts = await getHostsForAddressBackfill()
+  let successCount = 0
+  let failedCount = 0
+
+  console.log(`[HostAddress] Starting backfill for ${hosts.length} host(s)`)
+
+  for (const host of hosts) {
+    try {
+      const result = await syncExistingHostAddressState(host.id, host.name, host.url, 'backfill')
+      if (result.success) {
+        successCount++
+      } else {
+        failedCount++
+      }
+    } catch (error) {
+      failedCount++
+      console.error(`[HostAddress] Backfill host failed: ${host.name}(#${host.id})`, error)
+    }
+  }
+
+  console.log(`[HostAddress] Backfill completed: success=${successCount}, failed=${failedCount}`)
+}
+
+export async function runHostAddressPollJob(): Promise<void> {
+  const hosts = await getHostsWithDomainInputAlias()
+  let successCount = 0
+  let failedCount = 0
+
+  console.log(`[HostAddress] Starting poll for ${hosts.length} domain host(s)`)
+
+  for (const host of hosts) {
+    try {
+      const result = await syncExistingHostAddressState(host.id, host.name, host.url, 'poll')
+      if (result.success) {
+        successCount++
+      } else {
+        failedCount++
+      }
+    } catch (error) {
+      failedCount++
+      console.error(`[HostAddress] Poll host failed: ${host.name}(#${host.id})`, error)
+    }
+  }
+
+  console.log(`[HostAddress] Poll completed: success=${successCount}, failed=${failedCount}`)
+}
+
+let schedulerStarted = false
+
+export function startHostAddressMonitor(): void {
+  if (schedulerStarted) {
+    return
+  }
+
+  schedulerStarted = true
+
+  runHostAddressBackfillJob().catch(error => {
+    console.error('[HostAddress] Initial backfill failed:', error)
+  })
+
+  schedule(HOST_ADDRESS_POLL_CRON, () => {
+    runHostAddressPollJob().catch(error => {
+      console.error('[HostAddress] Scheduled poll failed:', error)
+    })
+  }, {
+    timezone: 'Asia/Shanghai'
+  })
+
+  console.log('[HostAddress] Monitor started')
+  console.log('[HostAddress] - Initial backfill: on startup')
+  console.log('[HostAddress] - Domain poll: every 30 minutes')
+}
diff --git a/server/src/services/hosting-scheduler.ts b/server/src/services/hosting-scheduler.ts
new file mode 100644
index 0000000..5c88cbe
--- /dev/null
+++ b/server/src/services/hosting-scheduler.ts
@@ -0,0 +1,177 @@
+/**
+ * 托管余额调度器
+ * 负责定时解冻到期的托管收入
+ */
+
+import { schedule } from 'node-cron'
+import { prisma } from '../db/prisma.js'
+import {
+  HOSTING_BALANCE_LOG_LOCK_NAMESPACE,
+  tryAdvisoryTransactionLock
+} from '../db/advisory-locks.js'
+
+// ==================== 解冻任务 ====================
+
+/**
+ * 解冻到期的托管余额
+ * 每小时执行一次，将已到解冻时间的冻结收入解冻并计入用户可用托管余额
+ */
+async function unfreezeHostingBalance(): Promise<void> {
+  console.log('[Hosting] Starting unfreeze job...')
+  const startTime = Date.now()
+
+  try {
+    const now = new Date()
+
+    // 获取待解冻的记录（frozen=true 且 unfreezeAt <= now）
+    const frozenRecords = await prisma.hostingBalanceLog.findMany({
+      where: {
+        frozen: true,
+        unfreezeAt: { lte: now }
+      },
+      select: {
+        id: true,
+        userId: true,
+        amount: true
+      }
+    })
+
+    console.log(`[Hosting] Found ${frozenRecords.length} records to unfreeze`)
+
+    if (frozenRecords.length === 0) {
+      console.log('[Hosting] No records to unfreeze')
+      return
+    }
+
+    const recordIds: number[] = []
+
+    for (const record of frozenRecords) {
+      recordIds.push(record.id)
+    }
+
+    // 执行事务：更新记录状态并增加用户可用托管余额
+    await prisma.$transaction(async (tx) => {
+      const lockedRecords = await tx.hostingBalanceLog.findMany({
+        where: {
+          id: { in: recordIds },
+          frozen: true,
+          unfreezeAt: { lte: now }
+        },
+        select: {
+          id: true,
+          userId: true,
+          amount: true
+        }
+      })
+
+      if (lockedRecords.length === 0) {
+        return
+      }
+
+      const lockedAmounts = new Map<number, number>()
+      const lockedRecordIds: number[] = []
+      for (const record of lockedRecords) {
+        lockedAmounts.set(record.userId, (lockedAmounts.get(record.userId) || 0) + Number(record.amount))
+        lockedRecordIds.push(record.id)
+      }
+
+      for (const userId of lockedAmounts.keys()) {
+        const locked = await tryAdvisoryTransactionLock(tx, HOSTING_BALANCE_LOG_LOCK_NAMESPACE, userId)
+        if (!locked) {
+          throw new Error('托管余额正在处理，请稍后重试解冻')
+        }
+      }
+
+      // 批量更新记录状态为已解冻。条件带上 frozen/unfreezeAt，避免和销毁抵扣
+      // 同时处理同一批冻结收入时，把已被抵扣删除或改动的旧快照解冻到账。
+      const updateResult = await tx.hostingBalanceLog.updateMany({
+        where: {
+          id: { in: lockedRecordIds },
+          frozen: true,
+          unfreezeAt: { lte: now }
+        },
+        data: { frozen: false }
+      })
+
+      if (updateResult.count !== lockedRecordIds.length) {
+        throw new Error('部分托管冻结收入已被其他任务处理，请重试解冻')
+      }
+
+      // 逐用户更新托管余额
+      for (const [userId, amount] of lockedAmounts) {
+        await tx.user.update({
+          where: { id: userId },
+          data: { hostingBalance: { increment: amount } }
+        })
+        console.log(`[Hosting] Unfroze ${amount} for user ${userId}`)
+      }
+    })
+
+    const duration = Date.now() - startTime
+    console.log(`[Hosting] Unfreeze job completed in ${duration}ms, processed ${frozenRecords.length} records`)
+  } catch (error) {
+    console.error('[Hosting] Unfreeze job failed:', error)
+  }
+}
+
+// ==================== 调度器启动 ====================
+
+/**
+ * 启动托管余额调度器
+ */
+export function startHostingScheduler(): void {
+  console.log('[Hosting] Starting hosting scheduler...')
+
+  // 每小时执行一次解冻任务（每小时第0分钟）
+  schedule('0 * * * *', unfreezeHostingBalance, {
+    timezone: 'Asia/Shanghai'
+  })
+
+  console.log('[Hosting] Hosting scheduler started')
+  console.log('[Hosting] - Unfreeze: Every hour at minute 0')
+}
+
+/**
+ * 手动执行解冻任务（用于测试或管理员手动触发）
+ */
+export async function runUnfreezeNow(): Promise<{ processed: number }> {
+  console.log('[Hosting] Manual unfreeze triggered')
+  
+  const now = new Date()
+  const frozenRecords = await prisma.hostingBalanceLog.findMany({
+    where: {
+      frozen: true,
+      unfreezeAt: { lte: now }
+    }
+  })
+
+  if (frozenRecords.length === 0) {
+    return { processed: 0 }
+  }
+
+  await unfreezeHostingBalance()
+  return { processed: frozenRecords.length }
+}
+
+/**
+ * 获取待解冻的记录统计
+ */
+export async function getPendingUnfreezeStats(): Promise<{
+  total: number
+  totalAmount: number
+  nextUnfreezeAt: Date | null
+}> {
+  // 获取所有待解冻记录
+  const result = await prisma.hostingBalanceLog.aggregate({
+    where: { frozen: true },
+    _count: { id: true },
+    _sum: { amount: true },
+    _min: { unfreezeAt: true }
+  })
+
+  return {
+    total: result._count.id || 0,
+    totalAmount: Number(result._sum.amount || 0),
+    nextUnfreezeAt: result._min.unfreezeAt
+  }
+}
diff --git a/server/src/services/instance-traffic-collector.ts b/server/src/services/instance-traffic-collector.ts
new file mode 100644
index 0000000..affc309
--- /dev/null
+++ b/server/src/services/instance-traffic-collector.ts
@@ -0,0 +1,273 @@
+import { prisma } from '../db/prisma.js'
+import { getTrafficCounters } from '../lib/incus/incus-traffic.js'
+import { getIncusClientFromPool } from '../lib/incus/incus-pool.js'
+import type { IncusClient } from '../lib/incus/incus-client.js'
+import { acquireLock, extendLock, releaseLock } from '../lib/distributed-lock.js'
+import type { LockOptions } from '../lib/distributed-lock.js'
+import { calculateIncrement } from './traffic-utils.js'
+
+export interface CollectInstanceTrafficResult {
+  success: boolean
+  skipped: boolean
+  totalDelta: bigint
+  currentUsage: bigint
+  error?: string
+}
+
+interface CollectTrafficWithClientInput {
+  instanceId: number
+  userId: number
+  incusId: string
+  client: IncusClient
+  currentUsage?: bigint
+}
+
+const DEFAULT_TRAFFIC_LOCK_OPTIONS: LockOptions = {
+  expireMs: 30000,
+  waitTimeoutMs: 5000,
+  retryIntervalMs: 50
+}
+
+function getTrafficLockKey(instanceId: number): string {
+  return `traffic:instance:${instanceId}`
+}
+
+async function applyTrafficCounters(
+  instanceId: number,
+  userId: number,
+  counters: { rxBytes: bigint; txBytes: bigint }
+): Promise<{ totalDelta: bigint; currentUsage: bigint }> {
+  const now = new Date()
+  const normalizedDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+
+  return prisma.$transaction(async (tx) => {
+    const instance = await tx.instance.findUnique({
+      where: { id: instanceId },
+      select: { monthlyTrafficUsed: true }
+    })
+
+    if (!instance) {
+      throw new Error('实例不存在')
+    }
+
+    const latestSnapshot = await tx.trafficSnapshot.findUnique({
+      where: { instanceId }
+    })
+
+    const rxIncrement = latestSnapshot
+      ? calculateIncrement(counters.rxBytes, latestSnapshot.rxRaw)
+      : 0n
+    const txIncrement = latestSnapshot
+      ? calculateIncrement(counters.txBytes, latestSnapshot.txRaw)
+      : 0n
+    const totalDelta = rxIncrement + txIncrement
+
+    await tx.trafficSnapshot.upsert({
+      where: { instanceId },
+      update: {
+        rxRaw: counters.rxBytes,
+        txRaw: counters.txBytes
+      },
+      create: {
+        instanceId,
+        rxRaw: counters.rxBytes,
+        txRaw: counters.txBytes
+      }
+    })
+
+    let currentUsage = instance.monthlyTrafficUsed
+
+    if (totalDelta > 0n) {
+      const updatedInstance = await tx.instance.update({
+        where: { id: instanceId },
+        data: {
+          monthlyTrafficUsed: { increment: totalDelta }
+        },
+        select: {
+          monthlyTrafficUsed: true
+        }
+      })
+      currentUsage = updatedInstance.monthlyTrafficUsed
+
+      await tx.userQuota.updateMany({
+        where: { userId },
+        data: {
+          monthlyTrafficUsed: { increment: totalDelta }
+        }
+      })
+
+      await tx.dailyTraffic.upsert({
+        where: {
+          instanceId_date: {
+            instanceId,
+            date: normalizedDate
+          }
+        },
+        update: {
+          rxTotal: { increment: rxIncrement },
+          txTotal: { increment: txIncrement }
+        },
+        create: {
+          instanceId,
+          date: normalizedDate,
+          rxTotal: rxIncrement,
+          txTotal: txIncrement
+        }
+      })
+    }
+
+    return {
+      totalDelta,
+      currentUsage
+    }
+  })
+}
+
+/**
+ * 在实例级锁内完成一次完整的流量采集与基线提交。
+ * 这会串行化同一实例上的即时采集与定时采集，避免读取同一旧基线导致重复记账。
+ */
+export async function collectTrafficForInstanceWithClient(
+  input: CollectTrafficWithClientInput,
+  lockOptions: LockOptions = {}
+): Promise<CollectInstanceTrafficResult> {
+  const { instanceId, userId, incusId, client, currentUsage = 0n } = input
+  const lockKey = getTrafficLockKey(instanceId)
+  const effectiveLockOptions = { ...DEFAULT_TRAFFIC_LOCK_OPTIONS, ...lockOptions }
+  const lockResult = await acquireLock(lockKey, effectiveLockOptions)
+
+  if (!lockResult.success || !lockResult.ownerId) {
+    return {
+      success: false,
+      skipped: false,
+      totalDelta: 0n,
+      currentUsage,
+      error: lockResult.error || '流量采集锁获取失败'
+    }
+  }
+
+  const renewIntervalMs = Math.max(1000, Math.floor((effectiveLockOptions.expireMs || DEFAULT_TRAFFIC_LOCK_OPTIONS.expireMs || 30000) / 3))
+  let renewTimer: ReturnType<typeof setInterval> | null = null
+
+  try {
+    renewTimer = setInterval(() => {
+      extendLock(lockKey, lockResult.ownerId!, effectiveLockOptions.expireMs).catch((error) => {
+        console.warn(`[Traffic] Failed to extend lock ${lockKey}:`, error)
+      })
+    }, renewIntervalMs)
+
+    const counters = await getTrafficCounters(client, incusId)
+    const result = await applyTrafficCounters(instanceId, userId, counters)
+
+    return {
+      success: true,
+      skipped: false,
+      totalDelta: result.totalDelta,
+      currentUsage: result.currentUsage
+    }
+  } catch (error) {
+    return {
+      success: false,
+      skipped: false,
+      totalDelta: 0n,
+      currentUsage,
+      error: error instanceof Error ? error.message : String(error)
+    }
+  } finally {
+    if (renewTimer) clearInterval(renewTimer)
+    await releaseLock(lockKey, lockResult.ownerId)
+  }
+}
+
+/**
+ * 立即采集单个运行中实例的流量并写回数据库。
+ * 用于停机前补采最后一段增量，避免等待定时任务导致流量尾差丢失。
+ */
+export async function collectTrafficForRunningInstance(
+  instanceId: number,
+  lockOptions: LockOptions = {}
+): Promise<CollectInstanceTrafficResult> {
+  const instance = await prisma.instance.findUnique({
+    where: { id: instanceId },
+    select: {
+      id: true,
+      status: true,
+      userId: true,
+      incusId: true,
+      monthlyTrafficUsed: true,
+      host: {
+        select: {
+          id: true,
+          url: true,
+          certPath: true,
+          keyPath: true,
+          status: true
+        }
+      }
+    }
+  })
+
+  if (!instance) {
+    return {
+      success: false,
+      skipped: false,
+      totalDelta: 0n,
+      currentUsage: 0n,
+      error: '实例不存在'
+    }
+  }
+
+  if (instance.status !== 'running') {
+    return {
+      success: true,
+      skipped: true,
+      totalDelta: 0n,
+      currentUsage: instance.monthlyTrafficUsed
+    }
+  }
+
+  if (instance.host.status !== 'online') {
+    return {
+      success: false,
+      skipped: false,
+      totalDelta: 0n,
+      currentUsage: instance.monthlyTrafficUsed,
+      error: '宿主机离线，无法立即采集流量'
+    }
+  }
+
+  if (!instance.host.certPath || !instance.host.keyPath) {
+    return {
+      success: false,
+      skipped: false,
+      totalDelta: 0n,
+      currentUsage: instance.monthlyTrafficUsed,
+      error: '宿主机证书未配置，无法立即采集流量'
+    }
+  }
+
+  try {
+    const client = await getIncusClientFromPool({
+      id: instance.host.id,
+      url: instance.host.url,
+      certPath: instance.host.certPath,
+      keyPath: instance.host.keyPath
+    })
+
+    return collectTrafficForInstanceWithClient({
+      instanceId,
+      userId: instance.userId,
+      incusId: instance.incusId,
+      client,
+      currentUsage: instance.monthlyTrafficUsed
+    }, lockOptions)
+  } catch (error) {
+    return {
+      success: false,
+      skipped: false,
+      totalDelta: 0n,
+      currentUsage: instance.monthlyTrafficUsed,
+      error: error instanceof Error ? error.message : String(error)
+    }
+  }
+}
diff --git a/server/src/services/mail-expiry-scheduler.ts b/server/src/services/mail-expiry-scheduler.ts
new file mode 100644
index 0000000..1c73863
--- /dev/null
+++ b/server/src/services/mail-expiry-scheduler.ts
@@ -0,0 +1,76 @@
+/**
+ * 邮箱订阅过期检查定时任务
+ * 检查并处理已过期的邮箱订阅
+ */
+
+import { prisma } from '../db/prisma.js'
+
+/**
+ * 检查并更新过期的邮箱订阅
+ */
+export async function checkMailSubscriptionExpiry(): Promise<void> {
+  const now = new Date()
+  
+  try {
+    // 查找所有已过期但状态仍为 active 的订阅
+    const expiredSubscriptions = await prisma.mailSubscription.findMany({
+      where: {
+        status: 'active',
+        expiresAt: { lt: now }
+      },
+      select: {
+        id: true,
+        userId: true,
+        expiresAt: true,
+        user: { select: { username: true } }
+      }
+    })
+
+    if (expiredSubscriptions.length === 0) {
+      return
+    }
+
+    console.log(`[Mail] Found ${expiredSubscriptions.length} expired mail subscriptions`)
+
+    // 批量更新状态为 expired
+    const result = await prisma.mailSubscription.updateMany({
+      where: {
+        id: { in: expiredSubscriptions.map(s => s.id) },
+        status: 'active'
+      },
+      data: { status: 'expired' }
+    })
+
+    console.log(`[Mail] Updated ${result.count} mail subscriptions to expired status`)
+
+    // 记录每个过期的订阅
+    for (const sub of expiredSubscriptions) {
+      console.log(`[Mail] Subscription expired: userId=${sub.userId}, username=${sub.user.username}, expiredAt=${sub.expiresAt.toISOString()}`)
+    }
+  } catch (error) {
+    console.error('[Mail] Error checking mail subscription expiry:', error)
+    throw error
+  }
+}
+
+/**
+ * 启动邮箱订阅过期检查定时任务
+ * 每小时执行一次
+ */
+export function startMailExpiryScheduler(): NodeJS.Timeout {
+  const INTERVAL = 60 * 60 * 1000 // 1 小时
+
+  console.log('[Mail] Starting mail subscription expiry scheduler')
+
+  // 启动时立即执行一次
+  checkMailSubscriptionExpiry().catch(err => {
+    console.error('[Mail] Initial mail expiry check failed:', err)
+  })
+
+  // 设置定时执行
+  return setInterval(() => {
+    checkMailSubscriptionExpiry().catch(err => {
+      console.error('[Mail] Scheduled mail expiry check failed:', err)
+    })
+  }, INTERVAL)
+}
diff --git a/server/src/services/smartermail.ts b/server/src/services/smartermail.ts
new file mode 100644
index 0000000..7f58ea4
--- /dev/null
+++ b/server/src/services/smartermail.ts
@@ -0,0 +1,235 @@
+/**
+ * SmarterMail API 集成服务
+ * 负责邮箱账户的创建、删除、更新和密码重置
+ */
+
+import type { MailSource } from '@prisma/client'
+
+/**
+ * 获取 SmarterMail API Token
+ * 使用域管理员账号认证
+ */
+async function getAuthToken(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string
+): Promise<string> {
+  const email = `${adminUsername}@${domain}`
+  
+  const response = await fetch(`${source.smarterMailUrl}/api/v1/auth/authenticate-user`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      username: email,
+      password: adminPassword
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error(`SmarterMail auth error: ${response.status} ${response.statusText}`)
+  }
+
+  const result = await response.json() as { accessToken?: string; message?: string }
+  
+  if (!result.accessToken) {
+    throw new Error(result.message || 'Failed to get SmarterMail token')
+  }
+
+  return result.accessToken
+}
+
+/**
+ * 调用 SmarterMail API
+ */
+async function callApi(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string,
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  endpoint: string,
+  data?: any
+): Promise<any> {
+  const token = await getAuthToken(source, domain, adminUsername, adminPassword)
+  
+  const response = await fetch(`${source.smarterMailUrl}/api/v1${endpoint}`, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`
+    },
+    body: data ? JSON.stringify(data) : undefined
+  })
+
+  if (!response.ok) {
+    const error = await response.text()
+    throw new Error(`SmarterMail API error: ${response.status} - ${error}`)
+  }
+
+  // 某些 API 可能返回空响应
+  const text = await response.text()
+  if (!text) return {}
+  
+  return JSON.parse(text)
+}
+
+/**
+ * 创建邮箱账户
+ */
+export async function createAccount(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string,
+  account: {
+    username: string
+    password: string
+    displayName: string
+    diskLimitMb: number
+  }
+): Promise<void> {
+  await callApi(source, domain, adminUsername, adminPassword, 'POST', '/settings/domain/users/user-put', {
+    userData: {
+      userName: account.username,
+      password: account.password,
+      displayName: account.displayName,
+      maxMailboxSize: account.diskLimitMb,
+      domain: domain,
+      isEnabled: true
+    }
+  })
+}
+
+/**
+ * 更新邮箱账户
+ */
+export async function updateAccount(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string,
+  username: string,
+  updates: {
+    displayName?: string
+    diskLimitMb?: number
+  }
+): Promise<void> {
+  const data: any = {
+    userData: {
+      userName: username,
+      domain: domain
+    }
+  }
+
+  if (updates.displayName !== undefined) {
+    data.userData.displayName = updates.displayName
+  }
+  if (updates.diskLimitMb !== undefined) {
+    data.userData.maxMailboxSize = updates.diskLimitMb
+  }
+
+  await callApi(source, domain, adminUsername, adminPassword, 'POST', '/settings/domain/users/user-put', data)
+}
+
+/**
+ * 重置邮箱账户密码
+ */
+export async function resetPassword(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string,
+  username: string,
+  newPassword: string
+): Promise<void> {
+  await callApi(source, domain, adminUsername, adminPassword, 'POST', '/settings/domain/users/set-password', {
+    userName: username,
+    domain: domain,
+    password: newPassword
+  })
+}
+
+/**
+ * 删除邮箱账户
+ */
+export async function deleteAccount(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string,
+  username: string
+): Promise<void> {
+  await callApi(source, domain, adminUsername, adminPassword, 'POST', '/settings/domain/users/user-delete', {
+    userName: username,
+    domain: domain
+  })
+}
+
+/**
+ * 获取邮箱账户信息
+ */
+export async function getAccountInfo(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string,
+  username: string
+): Promise<{
+  email: string
+  displayName: string
+  diskLimitMb: number
+  diskUsedMb: number
+  isEnabled: boolean
+} | null> {
+  try {
+    const result = await callApi(source, domain, adminUsername, adminPassword, 'POST', '/settings/domain/users/user-get', {
+      userName: username,
+      domain: domain
+    })
+
+    if (!result.userData) return null
+
+    return {
+      email: `${result.userData.userName}@${domain}`,
+      displayName: result.userData.displayName || result.userData.userName,
+      diskLimitMb: result.userData.maxMailboxSize || 0,
+      diskUsedMb: result.userData.mailboxSizeUsed || 0,
+      isEnabled: result.userData.isEnabled !== false
+    }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * 获取域下所有账户
+ */
+export async function listAccounts(
+  source: MailSource,
+  domain: string,
+  adminUsername: string,
+  adminPassword: string
+): Promise<Array<{
+  username: string
+  email: string
+  displayName: string
+  diskLimitMb: number
+  diskUsedMb: number
+}>> {
+  const result = await callApi(source, domain, adminUsername, adminPassword, 'GET', `/settings/domain/users/list?domain=${domain}`, undefined)
+
+  if (!result.users || !Array.isArray(result.users)) {
+    return []
+  }
+
+  return result.users.map((user: any) => ({
+    username: user.userName,
+    email: `${user.userName}@${domain}`,
+    displayName: user.displayName || user.userName,
+    diskLimitMb: user.maxMailboxSize || 0,
+    diskUsedMb: user.mailboxSizeUsed || 0
+  }))
+}
diff --git a/server/src/services/status-scheduler.ts b/server/src/services/status-scheduler.ts
new file mode 100644
index 0000000..3a61829
--- /dev/null
+++ b/server/src/services/status-scheduler.ts
@@ -0,0 +1,394 @@
+/**
+ * 实例状态同步调度器 (高可用优化版)
+ * 
+ * 优化特性：
+ * 1. 增量同步：优先同步最近有变化的实例
+ * 2. 分批处理：避免一次性处理所有实例，降低宿主机压力
+ * 3. 优先级队列：running 状态的实例优先同步
+ * 4. 健康检查：监控宿主机响应时间，自动降级
+ * 5. 连接池复用：使用统一的 Incus 连接池
+ */
+
+import { schedule } from 'node-cron'
+import pLimit from 'p-limit'
+import { prisma } from '../db/prisma.js'
+import { getIncusClient } from '../lib/incus/incus-pool.js'
+import { isHostHealthy, recordHostSuccess, recordHostError, getAllHostHealth } from '../lib/incus/host-health.js'
+import { getInstanceState } from '../lib/incus/incus-instances.js'
+import { mapInstanceStatus } from '../lib/incus/incus-utils.js'
+import { sendNotification } from '../lib/notifier.js'
+import * as db from '../db/index.js'
+
+// ==================== 配置常量 ====================
+
+// 每个宿主机的并发限制
+const CONCURRENCY_PER_HOST = 20
+
+// 每批处理的实例数量
+const BATCH_SIZE = 50
+
+// 任务超时时间 (5分钟)
+const JOB_TIMEOUT_MS = 5 * 60 * 1000
+
+// 单个实例同步超时 (10秒)
+const INSTANCE_TIMEOUT_MS = 10 * 1000
+
+// 同步间隔：running 实例 2 分钟，stopped 实例 10 分钟
+const SYNC_INTERVAL_RUNNING_MS = 2 * 60 * 1000
+const SYNC_INTERVAL_STOPPED_MS = 10 * 60 * 1000
+
+// 任务运行状态标志
+let isJobRunning = false
+
+// ==================== 性能监控 ====================
+
+interface SyncStats {
+    totalChecked: number
+    totalChanged: number
+    totalErrors: number
+    hostStats: Map<number, { checked: number; changed: number; avgResponseTime: number }>
+}
+
+let lastSyncStats: SyncStats | null = null
+
+export function getSyncStats(): SyncStats | null {
+    return lastSyncStats
+}
+
+// ==================== 工具函数 ====================
+
+/**
+ * 带超时的 Promise
+ */
+async function withTimeout<T>(
+    promise: Promise<T>,
+    timeoutMs: number,
+    timeoutMessage: string
+): Promise<T> {
+    let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+    const timeoutPromise = new Promise<never>((_, reject) => {
+        timeoutId = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs)
+    })
+
+    try {
+        return await Promise.race([promise, timeoutPromise])
+    } finally {
+        if (timeoutId) clearTimeout(timeoutId)
+    }
+}
+
+// ==================== 核心同步逻辑 ====================
+
+/**
+ * 获取需要同步的实例（优化版：增量 + 优先级）
+ */
+async function getInstancesToSync(batchSize: number) {
+    const now = Date.now()
+
+    // 获取需要同步的实例，按优先级排序：
+    // 1. running 状态的实例优先
+    // 2. 最近未同步的实例优先
+    // 注意：不同步 creating 状态的实例，避免与超时清理和 createInstanceAsync 竞争
+    const instances = await prisma.instance.findMany({
+        where: {
+            status: {
+                in: ['running', 'stopped']  // 不包含 creating，避免竞争
+            },
+            host: {
+                status: 'online'
+            }
+        },
+        include: {
+            host: {
+                select: {
+                    id: true,
+                    name: true,
+                    url: true,
+                    certPath: true,
+                    keyPath: true,
+                    status: true
+                }
+            },
+            user: {
+                select: {
+                    id: true
+                }
+            }
+        },
+        orderBy: [
+            // running 状态优先
+            { status: 'asc' },
+            // 最近更新的优先（可能有状态变化）
+            { updatedAt: 'desc' }
+        ],
+        take: batchSize * 3  // 多取一些，后面会过滤
+    })
+
+    // 根据上次同步时间过滤
+    const needSync = instances.filter(instance => {
+        // 优先使用 lastSyncedAt，回退到 updatedAt
+        const lastSync = (instance.lastSyncedAt ?? instance.updatedAt).getTime()
+        const interval = instance.status === 'running'
+            ? SYNC_INTERVAL_RUNNING_MS
+            : SYNC_INTERVAL_STOPPED_MS
+
+        // 如果距离上次同步超过同步间隔，需要同步
+        return now - lastSync > interval
+    })
+
+    // 返回指定数量
+    return needSync.slice(0, batchSize)
+}
+
+/**
+ * 同步单个实例状态
+ */
+async function syncInstanceStatus(
+    instance: {
+        id: number
+        incusId: string
+        name: string
+        status: string
+        host: {
+            id: number
+            name: string
+            url: string
+            certPath: string | null
+            keyPath: string | null
+        }
+        user: { id: number }
+    }
+): Promise<{ changed: boolean; from?: string; to?: string; error?: string }> {
+    const startTime = Date.now()
+
+    try {
+        // 检查宿主机健康状态
+        if (!isHostHealthy(instance.host.id)) {
+            return { changed: false, error: 'Host unhealthy, skipped' }
+        }
+
+        const host = await db.getHostById(instance.host.id)
+        if (!host) {
+            return { changed: false, error: 'Host not found' }
+        }
+
+        const client = await getIncusClient(host)
+
+        const state = await withTimeout(
+            getInstanceState(client, instance.incusId) as Promise<{ status?: string }>,
+            INSTANCE_TIMEOUT_MS,
+            'Instance state query timeout'
+        )
+
+        const responseTime = Date.now() - startTime
+        recordHostSuccess(instance.host.id, responseTime)
+
+        if (!state.status) {
+            return { changed: false }
+        }
+
+        const incusStatus = mapInstanceStatus(state.status)
+
+        if (incusStatus === 'unknown') {
+            return { changed: false }
+        }
+
+        // 状态不一致，需要更新
+        if (instance.status !== incusStatus) {
+            await db.updateInstanceStatus(
+                instance.id,
+                incusStatus as 'creating' | 'running' | 'stopped' | 'error'
+            )
+            
+            // 同时更新 lastSyncedAt
+            await prisma.instance.updateMany({
+                where: {
+                    id: instance.id,
+                    status: { not: 'deleted' }
+                },
+                data: { lastSyncedAt: new Date() }
+            })
+
+            // 如果是从 running 变为 stopped，发送意外停机通知
+            if (instance.status === 'running' && incusStatus === 'stopped') {
+                try {
+                    await sendNotification(instance.user.id, 'instance_unexpected_stop', {
+                        instanceName: instance.name,
+                        hostName: instance.host.name
+                    })
+                } catch (notifyError) {
+                    console.error(`[StatusSync] Failed to send notification:`, notifyError)
+                }
+            }
+
+            return {
+                changed: true,
+                from: instance.status,
+                to: incusStatus
+            }
+        }
+
+        // 状态相同，更新 lastSyncedAt 记录同步时间
+        await prisma.instance.updateMany({
+            where: {
+                id: instance.id,
+                status: { not: 'deleted' }
+            },
+            data: { lastSyncedAt: new Date() }
+        })
+
+        return { changed: false }
+
+    } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        recordHostError(instance.host.id)
+
+        // 如果实例不存在于 Incus，标记为已删除
+        if (errorMessage.includes('not found') || errorMessage.includes('Instance not found')) {
+            console.log(`[StatusSync] Instance ${instance.id} not found in Incus, marking as deleted`)
+            await db.updateInstanceStatus(instance.id, 'deleted')
+            return {
+                changed: true,
+                from: instance.status,
+                to: 'deleted'
+            }
+        }
+
+        return { changed: false, error: errorMessage }
+    }
+}
+
+/**
+ * 执行状态同步任务
+ */
+async function executeStatusSyncJob(): Promise<void> {
+    const startTime = Date.now()
+    const stats: SyncStats = {
+        totalChecked: 0,
+        totalChanged: 0,
+        totalErrors: 0,
+        hostStats: new Map()
+    }
+
+    // 获取需要同步的实例
+    const instances = await getInstancesToSync(BATCH_SIZE)
+
+    if (instances.length === 0) {
+        console.log('[StatusSync] No instances need sync')
+        return
+    }
+
+    console.log(`[StatusSync] Processing ${instances.length} instances...`)
+
+    // 按宿主机分组
+    const instancesByHost = new Map<number, typeof instances>()
+    for (const instance of instances) {
+        const hostInstances = instancesByHost.get(instance.host.id) || []
+        hostInstances.push(instance)
+        instancesByHost.set(instance.host.id, hostInstances)
+    }
+
+    // 并发处理每个宿主机
+    const limit = pLimit(CONCURRENCY_PER_HOST)
+
+    await Promise.all(
+        Array.from(instancesByHost.entries()).map(async ([hostId, hostInstances]) => {
+            const hostStartTime = Date.now()
+            let hostChecked = 0
+            let hostChanged = 0
+
+            // 并发同步该宿主机上的所有实例
+            await Promise.all(
+                hostInstances.map(instance =>
+                    limit(async () => {
+                        const result = await syncInstanceStatus(instance)
+                        hostChecked++
+                        if (result.changed) {
+                            hostChanged++
+                            console.log(`[StatusSync] Instance ${instance.id} (${instance.name}): ${result.from} → ${result.to}`)
+                        }
+                        if (result.error) {
+                            stats.totalErrors++
+                        }
+                        return result
+                    })
+                )
+            )
+
+            const hostDuration = Date.now() - hostStartTime
+            stats.hostStats.set(hostId, {
+                checked: hostChecked,
+                changed: hostChanged,
+                avgResponseTime: hostChecked > 0 ? hostDuration / hostChecked : 0
+            })
+
+            stats.totalChecked += hostChecked
+            stats.totalChanged += hostChanged
+        })
+    )
+
+    const duration = Date.now() - startTime
+    lastSyncStats = stats
+
+    console.log(`[StatusSync] Completed in ${duration}ms: checked=${stats.totalChecked}, changed=${stats.totalChanged}, errors=${stats.totalErrors}`)
+}
+
+/**
+ * 主状态同步任务
+ */
+export async function runStatusSyncJob(): Promise<void> {
+    if (isJobRunning) {
+        console.log('[StatusSync] Previous job still running, skipping...')
+        return
+    }
+
+    isJobRunning = true
+
+    try {
+        await withTimeout(
+            executeStatusSyncJob(),
+            JOB_TIMEOUT_MS,
+            `[StatusSync] Job timeout after ${JOB_TIMEOUT_MS}ms`
+        )
+    } catch (error) {
+        if (error instanceof Error && error.message.includes('timeout')) {
+            console.error(`[StatusSync] Job timed out`)
+        } else {
+            console.error('[StatusSync] Job failed:', error)
+        }
+    } finally {
+        isJobRunning = false
+    }
+}
+
+/**
+ * 启动状态同步调度器
+ */
+export function startStatusScheduler(): void {
+    // 每 1 分钟检查一次（实际同步间隔由 getInstancesToSync 控制）
+    schedule('*/1 * * * *', () => {
+        runStatusSyncJob().catch(console.error)
+    })
+
+    console.log('[StatusSync] Scheduler started (check interval: 1 minute, running sync: 2 min, stopped sync: 10 min)')
+}
+
+/**
+ * 获取宿主机健康状态
+ */
+export function getHostHealthStatus(): Map<number, {
+    lastResponseTime: number
+    errorCount: number
+    healthy: boolean
+}> {
+    const result = new Map()
+    for (const [hostId, health] of getAllHostHealth()) {
+        result.set(hostId, {
+            lastResponseTime: health.lastResponseTime,
+            errorCount: health.errorCount,
+            healthy: isHostHealthy(hostId)
+        })
+    }
+    return result
+}
diff --git a/server/src/services/system-monitor.ts b/server/src/services/system-monitor.ts
new file mode 100644
index 0000000..3f61a4b
--- /dev/null
+++ b/server/src/services/system-monitor.ts
@@ -0,0 +1,246 @@
+/**
+ * 系统健康监控服务
+ * 
+ * 高可用特性：
+ * - 定期输出系统健康状态
+ * - 监控各调度器运行情况
+ * - Webhook 告警异常情况
+ */
+
+import { schedule } from 'node-cron'
+import { getDbPoolStats, prisma } from '../db/prisma.js'
+import { getPoolStatus } from '../lib/incus/incus-pool.js'
+
+// 系统启动时间
+const systemStartTime = Date.now()
+
+// 告警配置
+const ALERT_WEBHOOK_URL = process.env.ALERT_WEBHOOK_URL || ''
+const ALERT_COOLDOWN_MS = 10 * 60 * 1000  // 10分钟告警冷却
+const ALERT_TIMEOUT_MS = 10 * 1000  // 10秒请求超时
+let lastAlertTime = 0
+
+// 监控指标
+interface SystemMetrics {
+  uptime: number
+  instanceCount: number
+  hostCount: number
+  onlineHostCount: number
+  pendingTasks: number
+  processingTasks: number
+  pendingRestoreTasks: number
+  processingRestoreTasks: number
+  pendingUploadTasks: number
+  processingUploadTasks: number
+  incusConnectionPoolSize: number
+  dbPoolTotalCount: number
+  dbPoolIdleCount: number
+  dbPoolWaitingCount: number
+  avgResponseTime: number
+  errorHosts: number
+  memoryUsageMB: number
+}
+
+/**
+ * 收集系统指标
+ */
+async function collectMetrics(): Promise<SystemMetrics> {
+  const [
+    instanceCount,
+    hostStats,
+    pendingTasks,
+    processingTasks,
+    pendingRestoreTasks,
+    processingRestoreTasks,
+    pendingUploadTasks,
+    processingUploadTasks
+  ] = await Promise.all([
+    prisma.instance.count({ where: { status: { not: 'deleted' } } }),
+    prisma.host.groupBy({
+      by: ['status'],
+      _count: { id: true }
+    }),
+    prisma.instanceTask.count({ where: { status: 'PENDING' } }),
+    prisma.instanceTask.count({ where: { status: 'PROCESSING' } }),
+    prisma.restoreTask.count({ where: { status: 'PENDING' } }),
+    prisma.restoreTask.count({ where: { status: 'PROCESSING' } }),
+    prisma.backupUploadTask.count({ where: { status: 'PENDING' } }),
+    prisma.backupUploadTask.count({ where: { status: 'PROCESSING' } })
+  ])
+  
+  // 计算宿主机统计
+  const hostCount = hostStats.reduce((sum, h) => sum + h._count.id, 0)
+  const onlineHostCount = hostStats.find(h => h.status === 'online')?._count.id || 0
+  
+  // 获取连接池状态
+  const poolStatus = getPoolStatus()
+  let totalResponseTime = 0
+  let responseTimeCount = 0
+  let errorHosts = 0
+  
+  for (const [_, status] of poolStatus) {
+    if (status.lastResponseTime > 0) {
+      totalResponseTime += status.lastResponseTime
+      responseTimeCount++
+    }
+    if (status.errorCount >= 3) {
+      errorHosts++
+    }
+  }
+  
+  const avgResponseTime = responseTimeCount > 0 
+    ? Math.round(totalResponseTime / responseTimeCount) 
+    : 0
+
+  const dbPoolStats = getDbPoolStats()
+  
+  // 获取内存使用情况
+  const memoryUsage = process.memoryUsage()
+  const memoryUsageMB = Math.round(memoryUsage.heapUsed / 1024 / 1024)
+  
+  return {
+    uptime: Math.round((Date.now() - systemStartTime) / 1000 / 60), // 分钟
+    instanceCount,
+    hostCount,
+    onlineHostCount,
+    pendingTasks,
+    processingTasks,
+    pendingRestoreTasks,
+    processingRestoreTasks,
+    pendingUploadTasks,
+    processingUploadTasks,
+    incusConnectionPoolSize: poolStatus.size,
+    dbPoolTotalCount: dbPoolStats.totalCount,
+    dbPoolIdleCount: dbPoolStats.idleCount,
+    dbPoolWaitingCount: dbPoolStats.waitingCount,
+    avgResponseTime,
+    errorHosts,
+    memoryUsageMB
+  }
+}
+
+/**
+ * 发送告警到 Webhook
+ */
+async function sendAlert(alerts: string[]): Promise<void> {
+  if (!ALERT_WEBHOOK_URL) return
+  
+  // 告警冷却检查
+  const now = Date.now()
+  if (now - lastAlertTime < ALERT_COOLDOWN_MS) {
+    console.log('[Monitor] Alert cooldown, skipping webhook')
+    return
+  }
+  
+  try {
+    const payload = {
+      type: 'system_alert',
+      timestamp: new Date().toISOString(),
+      alerts,
+      source: 'incudal-monitor'
+    }
+    
+    // 设置请求超时
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), ALERT_TIMEOUT_MS)
+    
+    try {
+      const response = await fetch(ALERT_WEBHOOK_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload),
+        signal: controller.signal
+      })
+      
+      if (response.ok) {
+        lastAlertTime = now
+        console.log('[Monitor] Alert sent successfully')
+      } else {
+        console.error(`[Monitor] Alert webhook failed: ${response.status}`)
+      }
+    } finally {
+      clearTimeout(timeoutId)
+    }
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      console.error('[Monitor] Alert webhook timeout')
+    } else {
+      console.error('[Monitor] Failed to send alert:', error)
+    }
+  }
+}
+
+/**
+ * 输出健康报告
+ */
+async function reportHealth(): Promise<void> {
+  try {
+    const metrics = await collectMetrics()
+    
+    // 构建健康状态
+    const status = []
+    if (metrics.errorHosts > 0) {
+      status.push(`⚠️ ${metrics.errorHosts} hosts with errors`)
+    }
+    if (metrics.processingTasks > 10) {
+      status.push(`⚠️ High task load: ${metrics.processingTasks} processing`)
+    }
+    if (metrics.avgResponseTime > 1000) {
+      status.push(`⚠️ Slow response: ${metrics.avgResponseTime}ms avg`)
+    }
+    if (metrics.memoryUsageMB > 512) {
+      status.push(`⚠️ High memory: ${metrics.memoryUsageMB}MB`)
+    }
+    
+    const healthStatus = status.length > 0 ? status.join(', ') : '✓ All systems healthy'
+    
+    // 如果有异常且配置了 Webhook，发送告警
+    if (status.length > 0 && ALERT_WEBHOOK_URL) {
+      await sendAlert(status)
+    }
+    
+    // 计算总任务数
+    const totalPending = metrics.pendingTasks + metrics.pendingRestoreTasks + metrics.pendingUploadTasks
+    const totalProcessing = metrics.processingTasks + metrics.processingRestoreTasks + metrics.processingUploadTasks
+    
+    console.log(`[Monitor] Health Report:
+  Uptime: ${metrics.uptime} min | Memory: ${metrics.memoryUsageMB}MB
+  Instances: ${metrics.instanceCount}
+  Hosts: ${metrics.onlineHostCount}/${metrics.hostCount} online
+  Tasks: ${totalPending} pending, ${totalProcessing} processing
+    - Instance: ${metrics.pendingTasks}/${metrics.processingTasks}
+    - Restore: ${metrics.pendingRestoreTasks}/${metrics.processingRestoreTasks}
+    - Upload: ${metrics.pendingUploadTasks}/${metrics.processingUploadTasks}
+  DB Pool: total=${metrics.dbPoolTotalCount}, idle=${metrics.dbPoolIdleCount}, waiting=${metrics.dbPoolWaitingCount}
+  Incus Pool: ${metrics.incusConnectionPoolSize} connections, ${metrics.avgResponseTime}ms avg
+  Status: ${healthStatus}`)
+  } catch (error) {
+    console.error('[Monitor] Failed to collect metrics:', error)
+  }
+}
+
+/**
+ * 启动系统监控
+ */
+export function startSystemMonitor(): void {
+  // 启动时输出一次
+  setTimeout(() => {
+    reportHealth().catch(console.error)
+  }, 5000) // 延迟5秒，等系统初始化完成
+  
+  // 每10分钟输出健康报告
+  schedule('*/10 * * * *', () => {
+    reportHealth().catch(console.error)
+  })
+  
+  console.log('[Monitor] System monitor started')
+}
+
+/**
+ * 获取系统指标（API 用）
+ */
+export async function getSystemMetrics(): Promise<SystemMetrics> {
+  return collectMetrics()
+}
diff --git a/server/src/services/ticket-auto-close-scheduler.ts b/server/src/services/ticket-auto-close-scheduler.ts
new file mode 100644
index 0000000..b373d62
--- /dev/null
+++ b/server/src/services/ticket-auto-close-scheduler.ts
@@ -0,0 +1,98 @@
+/**
+ * 工单自动关闭调度器
+ * 
+ * 功能：自动关闭满足条件的已解决工单
+ * 条件：
+ * 1. 状态为 resolved（已解决）
+ * 2. 超过24小时未更新
+ * 3. 最后一条消息来自宿主机主人（不需要管理员再回复）
+ */
+
+import { getTicketsForAutoClose, autoCloseTickets } from '../db/tickets.js'
+import { sendNotification } from '../lib/notifier.js'
+import { createLog } from '../db/logs.js'
+import { getHostById } from '../db/index.js'
+
+// 配置常量
+const AUTO_CLOSE_TIMEOUT_MS = 24 * 60 * 60 * 1000 // 24小时
+const CHECK_INTERVAL_MS = 60 * 60 * 1000 // 每小时检查一次
+
+let schedulerInterval: ReturnType<typeof setInterval> | null = null
+
+/**
+ * 处理工单自动关闭
+ */
+async function processTicketAutoClose(): Promise<void> {
+  try {
+    // 获取需要自动关闭的工单
+    const ticketsToClose = await getTicketsForAutoClose(AUTO_CLOSE_TIMEOUT_MS)
+
+    if (ticketsToClose.length === 0) {
+      return
+    }
+
+    console.log(`[TicketAutoClose] 发现 ${ticketsToClose.length} 个需要自动关闭的工单`)
+
+    // 批量关闭工单
+    const ticketIds = ticketsToClose.map(t => t.id)
+    const closedCount = await autoCloseTickets(ticketIds)
+
+    // 发送通知和记录日志
+    for (const ticket of ticketsToClose) {
+      try {
+        // 获取宿主机信息（hostId 可能为 null，表示直接发给管理员的工单）
+        const host = ticket.hostId ? await getHostById(ticket.hostId) : null
+
+        // 通知工单创建者（用户）
+        await sendNotification(ticket.userId, 'ticket_auto_closed', {
+          subject: ticket.subject,
+          hostName: host?.name || '系统'
+        })
+
+        // 记录日志
+        await createLog(
+          ticket.userId,
+          'ticket',
+          'ticket.auto_closed',
+          `Ticket #${ticket.id} "${ticket.subject}" auto-closed after 24 hours`,
+          'success'
+        )
+      } catch (notifyErr) {
+        console.error(`[TicketAutoClose] 通知/日志失败 (工单 #${ticket.id}):`, notifyErr)
+      }
+    }
+
+    console.log(`[TicketAutoClose] 成功自动关闭 ${closedCount} 个工单`)
+  } catch (err) {
+    console.error('[TicketAutoClose] 处理失败:', err)
+  }
+}
+
+/**
+ * 启动工单自动关闭调度器
+ */
+export function startTicketAutoCloseScheduler(): void {
+  if (schedulerInterval) {
+    console.warn('[TicketAutoClose] 调度器已在运行')
+    return
+  }
+
+  // 启动时执行一次
+  processTicketAutoClose()
+
+  // 定期执行
+  schedulerInterval = setInterval(processTicketAutoClose, CHECK_INTERVAL_MS)
+
+  console.log('🎫 工单自动关闭调度器已启动（24小时超时，每小时检查）')
+}
+
+/**
+ * 停止工单自动关闭调度器
+ */
+export function stopTicketAutoCloseScheduler(): void {
+  if (schedulerInterval) {
+    clearInterval(schedulerInterval)
+    schedulerInterval = null
+    console.log('[TicketAutoClose] 调度器已停止')
+  }
+}
diff --git a/server/src/services/traffic-bandwidth.ts b/server/src/services/traffic-bandwidth.ts
new file mode 100644
index 0000000..21edfee
--- /dev/null
+++ b/server/src/services/traffic-bandwidth.ts
@@ -0,0 +1,66 @@
+import { THROTTLE_BANDWIDTH } from '../lib/incus/incus-traffic.js'
+
+const MB_IN_BYTES = 1024n * 1024n
+
+interface TrafficBandwidthSource {
+  limitsIngress: string | null
+  limitsEgress: string | null
+  package?: {
+    limitsIngress: string | null
+    limitsEgress: string | null
+  } | null
+  packagePlan?: {
+    trafficLimitSpeed: string | null
+  } | null
+}
+
+export interface ResolvedTrafficBandwidthLimits {
+  incusIngress: string | null
+  incusEgress: string | null
+  dbIngress: string | null
+  dbEgress: string | null
+}
+
+export function normalizePlanTrafficLimitSpeed(trafficLimitSpeed: string | null | undefined): string | null {
+  if (!trafficLimitSpeed || trafficLimitSpeed === '0') {
+    return null
+  }
+
+  if (/^\d+$/.test(trafficLimitSpeed)) {
+    const bytes = BigInt(trafficLimitSpeed)
+    const mbps = Number(bytes / MB_IN_BYTES)
+    return mbps > 0 ? `${mbps}Mbit` : null
+  }
+
+  return trafficLimitSpeed
+}
+
+export function resolveTrafficBandwidthLimits(
+  instance: TrafficBandwidthSource,
+  options: { stripThrottleOverride?: boolean } = {}
+): ResolvedTrafficBandwidthLimits {
+  const planLimit = normalizePlanTrafficLimitSpeed(instance.packagePlan?.trafficLimitSpeed)
+  if (planLimit) {
+    return {
+      incusIngress: planLimit,
+      incusEgress: planLimit,
+      dbIngress: planLimit,
+      dbEgress: planLimit
+    }
+  }
+
+  const stripThrottleOverride = options.stripThrottleOverride === true
+  const configuredIngress = stripThrottleOverride && instance.limitsIngress === THROTTLE_BANDWIDTH
+    ? null
+    : instance.limitsIngress
+  const configuredEgress = stripThrottleOverride && instance.limitsEgress === THROTTLE_BANDWIDTH
+    ? null
+    : instance.limitsEgress
+
+  return {
+    incusIngress: configuredIngress ?? instance.package?.limitsIngress ?? null,
+    incusEgress: configuredEgress ?? instance.package?.limitsEgress ?? null,
+    dbIngress: configuredIngress ?? null,
+    dbEgress: configuredEgress ?? null
+  }
+}
diff --git a/server/src/services/traffic-notifier.ts b/server/src/services/traffic-notifier.ts
new file mode 100644
index 0000000..629ad97
--- /dev/null
+++ b/server/src/services/traffic-notifier.ts
@@ -0,0 +1,300 @@
+/**
+ * 流量通知服务
+ * 负责发送流量预警和限速通知
+ * 包含自动重试机制
+ */
+
+import * as db from '../db/index.js'
+import { formatBytes } from './traffic-utils.js'
+import { assertSafeWebhookUrl } from '../lib/outbound-security.js'
+
+// 重新导出 formatBytes 供其他模块使用
+export { formatBytes }
+
+// 重试配置
+const MAX_RETRIES = 3
+const RETRY_DELAY_MS = 2000
+
+/**
+ * 延迟函数
+ */
+function delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/**
+ * 判断是否为不可重试的错误
+ */
+function isNonRetryableError(error: string | null): boolean {
+    if (!error) return false
+
+    const nonRetryablePatterns = [
+        'Missing botToken',
+        'Missing chatId',
+        'Missing webhookUrl',
+        'chat not found',
+        'bot was blocked',
+        'CHAT_ID_INVALID',
+        'BOT_TOKEN_INVALID',
+        '401',
+        '403',
+        '404',
+    ]
+
+    return nonRetryablePatterns.some(pattern =>
+        error.toLowerCase().includes(pattern.toLowerCase())
+    )
+}
+
+/**
+ * 带重试的发送函数
+ */
+async function sendWithRetry(
+    sendFn: () => Promise<{ success: boolean; error: string | null }>,
+    channelType: string
+): Promise<{ success: boolean; error: string | null }> {
+    let lastError: string | null = null
+
+    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+        try {
+            const result = await sendFn()
+
+            if (result.success) {
+                return result
+            }
+
+            if (isNonRetryableError(result.error)) {
+                return result
+            }
+
+            lastError = result.error
+            console.warn(`[TrafficNotifier] ${channelType} attempt ${attempt}/${MAX_RETRIES} failed: ${result.error}`)
+
+            if (attempt < MAX_RETRIES) {
+                await delay(RETRY_DELAY_MS * attempt)
+            }
+        } catch (err) {
+            lastError = err instanceof Error ? err.message : String(err)
+            console.warn(`[TrafficNotifier] ${channelType} attempt ${attempt}/${MAX_RETRIES} error: ${lastError}`)
+
+            if (attempt < MAX_RETRIES) {
+                await delay(RETRY_DELAY_MS * attempt)
+            }
+        }
+    }
+
+    return { success: false, error: `Failed after ${MAX_RETRIES} attempts: ${lastError}` }
+}
+
+/**
+ * 发送流量预警通知 (80%)
+ */
+export async function sendTrafficWarningNotification(
+    userId: number,
+    used: bigint,
+    limit: bigint
+): Promise<void> {
+    try {
+        const channels = await db.getEnabledChannelsByUserId(userId)
+        if (channels.length === 0) return
+
+        // 先转换为浮点数再计算百分比,避免 BigInt 整数除法精度丢失
+        const percentage = ((Number(used) / Number(limit)) * 100).toFixed(1)
+        const title = '⚠️ 流量预警'
+        const message = `您的月度流量已使用 ${percentage}%\n` +
+            `已用: ${formatBytes(used)}\n` +
+            `限额: ${formatBytes(limit)}\n\n` +
+            `超出限额后，您的实例将被限速至 1Mbit。`
+
+        for (const channel of channels) {
+            try {
+                const config = typeof channel.config === 'string'
+                    ? JSON.parse(channel.config)
+                    : channel.config
+
+                const logId = await db.createNotificationLog({
+                    channelId: channel.id,
+                    eventType: 'traffic_warning',
+                    message,
+                    status: 'pending'
+                })
+
+                let result: { success: boolean; error: string | null }
+
+                switch (channel.type) {
+                    case 'telegram':
+                        result = await sendWithRetry(
+                            () => sendTelegram(config, title, message),
+                            'Telegram'
+                        )
+                        break
+                    case 'discord':
+                        result = await sendWithRetry(
+                            () => sendDiscord(config, title, message),
+                            'Discord'
+                        )
+                        break
+                    default:
+                        result = { success: false, error: `Unsupported channel type: ${channel.type}` }
+                }
+
+                await db.updateNotificationLogStatus(logId, result.success ? 'sent' : 'failed', result.error)
+            } catch (err) {
+                console.error(`[TrafficNotifier] Failed to send warning to channel ${channel.id}:`, err)
+            }
+        }
+    } catch (err) {
+        console.error('[TrafficNotifier] sendTrafficWarningNotification error:', err)
+    }
+}
+
+/**
+ * 发送流量限速通知
+ */
+export async function sendTrafficThrottledNotification(
+    userId: number,
+    instanceName: string,
+    hostName: string
+): Promise<void> {
+    try {
+        const channels = await db.getEnabledChannelsByUserId(userId)
+        if (channels.length === 0) return
+
+        const title = '🚫 流量限速通知'
+        const message = `您的实例 ${instanceName}（节点：${hostName}）已因流量超额被限速至 1Mbit。\n\n` +
+            `您仍可通过 SSH 管理实例。\n` +
+            `流量将在下月 1 日自动重置，届时带宽将恢复正常。`
+
+        for (const channel of channels) {
+            try {
+                const config = typeof channel.config === 'string'
+                    ? JSON.parse(channel.config)
+                    : channel.config
+
+                const logId = await db.createNotificationLog({
+                    channelId: channel.id,
+                    eventType: 'traffic_throttled',
+                    message,
+                    status: 'pending'
+                })
+
+                let result: { success: boolean; error: string | null }
+
+                switch (channel.type) {
+                    case 'telegram':
+                        result = await sendWithRetry(
+                            () => sendTelegram(config, title, message),
+                            'Telegram'
+                        )
+                        break
+                    case 'discord':
+                        result = await sendWithRetry(
+                            () => sendDiscord(config, title, message),
+                            'Discord'
+                        )
+                        break
+                    default:
+                        result = { success: false, error: `Unsupported channel type: ${channel.type}` }
+                }
+
+                await db.updateNotificationLogStatus(logId, result.success ? 'sent' : 'failed', result.error)
+            } catch (err) {
+                console.error(`[TrafficNotifier] Failed to send throttle notification to channel ${channel.id}:`, err)
+            }
+        }
+    } catch (err) {
+        console.error('[TrafficNotifier] sendTrafficThrottledNotification error:', err)
+    }
+}
+
+/**
+ * 发送 Telegram 通知
+ */
+async function sendTelegram(
+    config: { botToken: string; chatId: string },
+    title: string,
+    message: string
+): Promise<{ success: boolean; error: string | null }> {
+    const { botToken, chatId } = config
+
+    if (!botToken || !chatId) {
+        return { success: false, error: 'Missing botToken or chatId' }
+    }
+
+    try {
+        const text = `*${escapeMarkdown(title)}*\n\n${escapeMarkdown(message)}`
+
+        const response = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                chat_id: chatId,
+                text,
+                parse_mode: 'MarkdownV2'
+            })
+        })
+
+        const result = await response.json() as { ok: boolean; description?: string }
+
+        if (!result.ok) {
+            return { success: false, error: result.description || 'Unknown error' }
+        }
+
+        return { success: true, error: null }
+    } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        return { success: false, error }
+    }
+}
+
+/**
+ * 发送 Discord 通知
+ */
+async function sendDiscord(
+    config: { webhookUrl: string },
+    title: string,
+    message: string
+): Promise<{ success: boolean; error: string | null }> {
+    const { webhookUrl } = config
+
+    if (!webhookUrl) {
+        return { success: false, error: 'Missing webhookUrl' }
+    }
+
+    try {
+        const parsedUrl = await assertSafeWebhookUrl(webhookUrl)
+        const response = await fetch(parsedUrl.toString(), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                embeds: [{
+                    title,
+                    description: message,
+                    color: title.includes('预警') ? 0xffa500 : 0xff0000,
+                    timestamp: new Date().toISOString(),
+                    footer: {
+                        text: 'Incudal'
+                    }
+                }]
+            }),
+            redirect: 'manual'
+        })
+
+        if (!response.ok) {
+            const text = await response.text()
+            return { success: false, error: text || `HTTP ${response.status}` }
+        }
+
+        return { success: true, error: null }
+    } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        return { success: false, error }
+    }
+}
+
+/**
+ * 转义 Telegram MarkdownV2 特殊字符
+ */
+function escapeMarkdown(text: string): string {
+    return text.replace(/([_*\[\]()~`>#+\-=|{}.!])/g, '\\$1')
+}
diff --git a/server/src/services/traffic-scheduler.ts b/server/src/services/traffic-scheduler.ts
new file mode 100644
index 0000000..e0de7ac
--- /dev/null
+++ b/server/src/services/traffic-scheduler.ts
@@ -0,0 +1,694 @@
+/**
+ * 流量调度器服务
+ * 负责定时采集流量数据、检查配额、执行限速/恢复
+ * 
+ * 高可用优化:
+ * - 使用统一的 incus-pool 连接池管理
+ * - 增量收集：只处理有流量变化的实例
+ * - 性能监控日志
+ */
+
+import { schedule } from 'node-cron'
+import pLimit from 'p-limit'
+import { IncusClient } from '../lib/incus/incus-client.js'
+import { getIncusClientFromPool, updateClientResponseTime, recordClientError, getPoolStatus } from '../lib/incus/incus-pool.js'
+import { applyThrottle, isThrottled, restoreBandwidth } from '../lib/incus/incus-traffic.js'
+import * as trafficDb from '../db/traffic.js'
+import { sendTrafficWarningNotification, sendTrafficThrottledNotification } from './traffic-notifier.js'
+import { collectTrafficForInstanceWithClient } from './instance-traffic-collector.js'
+import { resolveTrafficBandwidthLimits } from './traffic-bandwidth.js'
+import {
+    calculateUserTrafficStatus,
+    getEffectiveLimit,
+    isOverLimit,
+    isWarningThreshold,
+    isWarningSentThisMonth
+} from './traffic-utils.js'
+
+// 任务超时时间（15分钟，大规模实例需要更长时间）
+const JOB_TIMEOUT_MS = 15 * 60 * 1000
+
+function parsePositiveInt(value: string | undefined, fallback: number): number {
+    const parsed = Number.parseInt(value || '', 10)
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback
+}
+
+// 每宿主机并发限制
+// 生产事故修复：默认值从 100 降到 10，并允许通过环境变量覆盖
+const CONCURRENCY_PER_HOST = parsePositiveInt(process.env.TRAFFIC_CONCURRENCY_PER_HOST, 10)
+
+// 宿主机并行处理数量（同时采集多个宿主机）
+const HOST_CONCURRENCY = parsePositiveInt(process.env.TRAFFIC_HOST_CONCURRENCY, 3)
+
+/**
+ * 流量增量数据
+ */
+interface TrafficDelta {
+    instanceId: number
+    totalDelta: bigint
+}
+
+type RunningTrafficInstance = Awaited<ReturnType<typeof trafficDb.getRunningInstancesForTraffic>>[number]
+
+/**
+ * 获取或创建主机客户端（使用统一连接池）
+ */
+async function getHostClient(host: {
+    id: number
+    url: string
+    certPath: string | null
+    keyPath: string | null
+}): Promise<IncusClient | null> {
+    if (!host.certPath || !host.keyPath) {
+        return null
+    }
+
+    try {
+        const startTime = Date.now()
+        const client = await getIncusClientFromPool({
+            id: host.id,
+            url: host.url,
+            certPath: host.certPath,
+            keyPath: host.keyPath
+        })
+        const duration = Date.now() - startTime
+        updateClientResponseTime(host.id, duration)
+        return client
+    } catch (error) {
+        console.error(`[Traffic] Failed to get client for host ${host.id}:`, error)
+        recordClientError(host.id)
+        return null
+    }
+}
+
+/**
+ * 采集单个实例的流量数据
+ */
+async function collectInstanceTraffic(
+    instance: {
+        id: number
+        incusId: string
+        userId: number
+        monthlyTrafficUsed: bigint
+    },
+    client: IncusClient
+): Promise<TrafficDelta | null> {
+    const result = await collectTrafficForInstanceWithClient({
+        instanceId: instance.id,
+        userId: instance.userId,
+        incusId: instance.incusId,
+        client,
+        currentUsage: instance.monthlyTrafficUsed
+    }, {
+        waitTimeoutMs: 200,
+        retryIntervalMs: 50,
+        expireMs: 30000
+    })
+
+    if (!result.success) {
+        console.error(`[Traffic] Failed to collect traffic for instance ${instance.id}: ${result.error}`)
+        return null
+    }
+
+    return {
+        instanceId: instance.id,
+        totalDelta: result.totalDelta
+    }
+}
+
+/**
+ * 检查并执行限速
+ */
+async function checkAndThrottle(
+    instance: RunningTrafficInstance,
+    client: IncusClient
+): Promise<void> {
+    const userQuota = instance.user.quota
+    if (!userQuota) return
+
+    const userEffectiveLimit = getEffectiveLimit(userQuota.monthlyTrafficLimit, userQuota.extraTrafficQuota)
+    const instanceLimit = instance.monthlyTrafficLimit
+
+    // 检查用户级别限额
+    const userOverLimit = isOverLimit(userQuota.monthlyTrafficUsed, userEffectiveLimit)
+    // 检查实例级别限额
+    const instanceOverLimit = isOverLimit(instance.monthlyTrafficUsed, instanceLimit)
+
+    if (userOverLimit || instanceOverLimit) {
+        const remoteThrottled = await isThrottled(client, instance.incusId)
+
+        if (instance.trafficStatus !== 'LIMITED' || !remoteThrottled) {
+            const wasMarkedLimited = instance.trafficStatus === 'LIMITED'
+            try {
+                await applyThrottle(client, instance.incusId)
+                await trafficDb.updateInstanceTrafficStatus(instance.id, 'LIMITED')
+                if (userOverLimit && userQuota.trafficStatus !== 'LIMITED') {
+                    await trafficDb.updateUserTrafficStatus(instance.userId, 'LIMITED')
+                }
+
+                if (!wasMarkedLimited) {
+                    await sendTrafficThrottledNotification(instance.userId, instance.name, instance.host.name)
+                }
+
+                console.log(`[Traffic] Throttled instance ${instance.id} (${instance.incusId})`)
+            } catch (error) {
+                console.error(`[Traffic] Failed to throttle instance ${instance.id}:`, error)
+            }
+        } else if (userOverLimit && userQuota.trafficStatus !== 'LIMITED') {
+            await trafficDb.updateUserTrafficStatus(instance.userId, 'LIMITED')
+        }
+    } else {
+        // 检查预警
+        const userWarning = isWarningThreshold(userQuota.monthlyTrafficUsed, userEffectiveLimit)
+        if (userWarning && !isWarningSentThisMonth(userQuota.trafficWarningSentAt)) {
+            await trafficDb.updateUserTrafficStatus(instance.userId, 'WARNING')
+            await trafficDb.updateUserTrafficWarningSentAt(instance.userId, new Date())
+            await sendTrafficWarningNotification(
+                instance.userId,
+                userQuota.monthlyTrafficUsed,
+                userEffectiveLimit!
+            )
+            console.log(`[Traffic] Sent warning to user ${instance.userId}`)
+        }
+    }
+}
+
+/**
+ * 检查并恢复带宽
+ */
+async function checkAndRestore(
+    instance: RunningTrafficInstance,
+    client: IncusClient
+): Promise<void> {
+    const userQuota = instance.user.quota
+    if (!userQuota) return
+
+    const userEffectiveLimit = getEffectiveLimit(userQuota.monthlyTrafficLimit, userQuota.extraTrafficQuota)
+    const instanceLimit = instance.monthlyTrafficLimit
+
+    const userUnderLimit = !isOverLimit(userQuota.monthlyTrafficUsed, userEffectiveLimit)
+    const instanceUnderLimit = !isOverLimit(instance.monthlyTrafficUsed, instanceLimit)
+    const desiredUserStatus = calculateUserTrafficStatus(userQuota.monthlyTrafficUsed, userEffectiveLimit)
+
+    if (userUnderLimit && instanceUnderLimit) {
+        const remoteThrottled = await isThrottled(client, instance.incusId)
+        if (instance.trafficStatus !== 'LIMITED' && !remoteThrottled) {
+            if (userQuota.trafficStatus !== desiredUserStatus) {
+                await trafficDb.updateUserTrafficStatus(instance.userId, desiredUserStatus)
+            }
+            return
+        }
+
+        try {
+            const resolvedLimits = resolveTrafficBandwidthLimits(instance, {
+                stripThrottleOverride: remoteThrottled || instance.trafficStatus === 'LIMITED'
+            })
+
+            await restoreBandwidth(
+                client,
+                instance.incusId,
+                resolvedLimits.incusIngress,
+                resolvedLimits.incusEgress
+            )
+            await trafficDb.updateInstanceTrafficStatus(instance.id, 'NORMAL')
+            await trafficDb.updateInstanceBandwidthLimits(
+                instance.id,
+                resolvedLimits.dbIngress,
+                resolvedLimits.dbEgress
+            )
+
+            if (userQuota.trafficStatus !== desiredUserStatus) {
+                await trafficDb.updateUserTrafficStatus(instance.userId, desiredUserStatus)
+            }
+
+            console.log(`[Traffic] Restored bandwidth for instance ${instance.id}`)
+        } catch (error) {
+            console.error(`[Traffic] Failed to restore bandwidth for instance ${instance.id}:`, error)
+        }
+    }
+}
+
+async function reconcileTrafficState(instances: RunningTrafficInstance[]): Promise<void> {
+    if (instances.length === 0) {
+        return
+    }
+
+    const instancesByHost = new Map<number, RunningTrafficInstance[]>()
+    for (const instance of instances) {
+        if (instance.host.status !== 'online') continue
+
+        const hostInstances = instancesByHost.get(instance.host.id) || []
+        hostInstances.push(instance)
+        instancesByHost.set(instance.host.id, hostInstances)
+    }
+
+    for (const [hostId, hostInstances] of instancesByHost) {
+        const host = hostInstances[0].host
+        const client = await getHostClient({
+            id: hostId,
+            url: host.url,
+            certPath: host.certPath,
+            keyPath: host.keyPath
+        })
+
+        if (!client) continue
+
+        const hostLimit = pLimit(CONCURRENCY_PER_HOST)
+        await Promise.all(
+            hostInstances.map(instance =>
+                hostLimit(async () => {
+                    await checkAndThrottle(instance, client)
+                    await checkAndRestore(instance, client)
+                })
+            )
+        )
+    }
+}
+
+export async function reconcileTrafficStateForInstanceIds(instanceIds: number[]): Promise<void> {
+    const instances = await trafficDb.getRunningInstancesForTrafficByIds(instanceIds)
+    await reconcileTrafficState(instances)
+}
+
+export async function reconcileTrafficStateForUser(userId: number): Promise<void> {
+    const instances = await trafficDb.getRunningInstancesForTrafficByUserId(userId)
+    await reconcileTrafficState(instances)
+}
+
+/**
+ * 带超时的任务执行（带定时器清理，防止内存泄漏）
+ */
+async function withTimeout<T>(
+    promise: Promise<T>,
+    timeoutMs: number,
+    timeoutMessage: string
+): Promise<T> {
+    let timeoutId: ReturnType<typeof setTimeout> | null = null
+    
+    const timeoutPromise = new Promise<never>((_, reject) => {
+        timeoutId = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs)
+    })
+
+    try {
+        return await Promise.race([promise, timeoutPromise])
+    } finally {
+        if (timeoutId) clearTimeout(timeoutId)
+    }
+}
+
+/**
+ * 主流量采集任务
+ */
+export async function runTrafficJob(): Promise<void> {
+    console.log('[Traffic] Starting traffic collection job...')
+    const startTime = Date.now()
+
+    try {
+        // 使用超时包装整个任务
+        await withTimeout(
+            executeTrafficJob(startTime),
+            JOB_TIMEOUT_MS,
+            `[Traffic] Job timeout after ${JOB_TIMEOUT_MS}ms`
+        )
+    } catch (error) {
+        const duration = Date.now() - startTime
+        if (error instanceof Error && error.message.includes('timeout')) {
+            console.error(`[Traffic] Job timed out after ${duration}ms`)
+        } else {
+            console.error('[Traffic] Job failed:', error)
+        }
+        throw error
+    }
+}
+
+/**
+ * 执行流量采集任务（实际逻辑）
+ * 高可用优化：按宿主机分批处理，控制并发
+ */
+async function executeTrafficJob(startTime: number): Promise<void> {
+    const instances = await trafficDb.getRunningInstancesForTraffic()
+    console.log(`[Traffic] Found ${instances.length} running instances`)
+
+    if (instances.length === 0) return
+
+    // 创建实例映射表（用于后续查找）
+    const instanceMap = new Map<number, typeof instances[0]>()
+    for (const instance of instances) {
+        instanceMap.set(instance.id, instance)
+    }
+
+    // 按主机分组
+    const instancesByHost = new Map<number, typeof instances>()
+    for (const instance of instances) {
+        if (instance.host.status !== 'online') continue
+
+        const hostInstances = instancesByHost.get(instance.host.id) || []
+        hostInstances.push(instance)
+        instancesByHost.set(instance.host.id, hostInstances)
+    }
+
+    // 收集流量数据
+    const deltas: TrafficDelta[] = []
+    // 性能统计
+    let successCount = 0
+    let errorCount = 0
+
+    // 定义单个宿主机的采集函数
+    async function collectHostTraffic(hostId: number, hostInstances: typeof instances): Promise<{
+        deltas: TrafficDelta[]
+        success: number
+        error: number
+    }> {
+        const host = hostInstances[0].host
+        const client = await getHostClient({
+            id: hostId,
+            url: host.url,
+            certPath: host.certPath,
+            keyPath: host.keyPath
+        })
+
+        if (!client) {
+            return { deltas: [], success: 0, error: hostInstances.length }
+        }
+
+        // 每宿主机使用独立的并发限制
+        const hostLimit = pLimit(CONCURRENCY_PER_HOST)
+        
+        // 并发采集该主机上的所有实例
+        const results = await Promise.all(
+            hostInstances.map(instance =>
+                hostLimit(() => collectInstanceTraffic(instance, client))
+            )
+        )
+
+        const hostDeltas: TrafficDelta[] = []
+        let hostSuccess = 0
+        let hostError = 0
+
+        for (const delta of results) {
+            if (delta) {
+                hostDeltas.push(delta)
+                hostSuccess++
+            } else {
+                hostError++
+            }
+        }
+
+        return { deltas: hostDeltas, success: hostSuccess, error: hostError }
+    }
+
+    // 并行处理多个宿主机（限制并发数）
+    const hostLimit = pLimit(HOST_CONCURRENCY)
+    const hostEntries = Array.from(instancesByHost.entries())
+    
+    const hostResults = await Promise.all(
+        hostEntries.map(([hostId, hostInstances]) =>
+            hostLimit(() => collectHostTraffic(hostId, hostInstances))
+        )
+    )
+
+    // 汇总所有宿主机的结果
+    for (const result of hostResults) {
+        deltas.push(...result.deltas)
+        successCount += result.success
+        errorCount += result.error
+    }
+
+    // 优化限速检查：检查有流量更新的实例以及当前处于限速状态的实例
+    // 在内存中计算更新后的用量，避免重新查询数据库
+    // 需要检查的实例：1) 有流量更新的实例 2) 当前处于限速状态的实例（可能因为配额调整而需要恢复）
+    const instancesToCheckForThrottle = new Set<number>()
+    
+    // 添加有流量更新的实例
+    for (const delta of deltas) {
+        instancesToCheckForThrottle.add(delta.instanceId)
+    }
+    
+    // 添加当前处于限速状态的实例（可能需要恢复）
+    for (const instance of instances) {
+        if (instance.trafficStatus === 'LIMITED' || (instance.user.quota?.trafficStatus === 'LIMITED')) {
+            instancesToCheckForThrottle.add(instance.id)
+        }
+    }
+
+    if (instancesToCheckForThrottle.size > 0) {
+        // 计算每个实例和用户更新后的用量（在内存中）
+        const instanceUpdatedUsage = new Map<number, bigint>()
+        const userUpdatedUsage = new Map<number, bigint>()
+
+        // 初始化用量（使用原始值）
+        for (const instance of instances) {
+            instanceUpdatedUsage.set(instance.id, instance.monthlyTrafficUsed)
+            if (instance.user.quota) {
+                const currentUserUsage = userUpdatedUsage.get(instance.userId) ?? instance.user.quota.monthlyTrafficUsed
+                userUpdatedUsage.set(instance.userId, currentUserUsage)
+            }
+        }
+
+        // 累加更新量
+        for (const delta of deltas) {
+            if (delta.totalDelta > 0n) {
+                const instance = instanceMap.get(delta.instanceId)
+                if (!instance) continue
+
+                // 更新实例用量
+                const currentInstanceUsage = instanceUpdatedUsage.get(delta.instanceId) ?? 0n
+                instanceUpdatedUsage.set(delta.instanceId, currentInstanceUsage + delta.totalDelta)
+
+                // 更新用户用量
+                const currentUserUsage = userUpdatedUsage.get(instance.userId) ?? 0n
+                userUpdatedUsage.set(instance.userId, currentUserUsage + delta.totalDelta)
+            }
+        }
+
+        // 构建用于限速检查的实例列表
+        const instancesToCheck = Array.from(instancesToCheckForThrottle)
+            .map(instanceId => instanceMap.get(instanceId))
+            .filter((instance): instance is NonNullable<typeof instance> => {
+                if (!instance || instance.host.status !== 'online') return false
+                return true
+            })
+            .map(instance => {
+                const updatedInstanceUsage = instanceUpdatedUsage.get(instance.id) ?? instance.monthlyTrafficUsed
+                const updatedUserUsage = instance.user.quota
+                    ? (userUpdatedUsage.get(instance.userId) ?? instance.user.quota.monthlyTrafficUsed)
+                    : 0n
+
+                // 构建更新后的实例对象（用于限速检查）
+                return {
+                    ...instance,
+                    monthlyTrafficUsed: updatedInstanceUsage,
+                    user: {
+                        ...instance.user,
+                        quota: instance.user.quota ? {
+                            ...instance.user.quota,
+                            monthlyTrafficUsed: updatedUserUsage
+                        } : null
+                    }
+                }
+            })
+
+        await reconcileTrafficState(instancesToCheck)
+    }
+
+    const duration = Date.now() - startTime
+    
+    // 输出详细的性能统计
+    console.log(`[Traffic] Job completed in ${duration}ms - instances: ${deltas.length}, success: ${successCount}, errors: ${errorCount}`)
+    
+    // 输出连接池状态（调试用）
+    if (process.env.DEBUG_TRAFFIC === 'true') {
+        const poolStatus = getPoolStatus()
+        console.log(`[Traffic] Connection pool status:`, Object.fromEntries(poolStatus))
+    }
+}
+
+/**
+ * 月度重置任务（用户级别）
+ * 每月1号重置所有用户的月度流量统计
+ * 注：实例级别流量改由 runDailyHostTrafficResetJob 按节点重置日重置
+ */
+export async function runMonthlyUserTrafficResetJob(): Promise<void> {
+    console.log('[Traffic] Starting monthly user traffic reset job...')
+
+    try {
+        // 只重置用户级别的月度用量（保持自然月）
+        await trafficDb.resetAllUserMonthlyTraffic()
+        console.log('[Traffic] Monthly user traffic reset completed')
+    } catch (error) {
+        console.error('[Traffic] Monthly user traffic reset failed:', error)
+    }
+}
+
+/**
+ * 每日节点流量重置任务
+ * 根据各节点的 trafficResetDay 配置，重置该节点下所有实例的流量
+ */
+export async function runDailyHostTrafficResetJob(): Promise<void> {
+    const today = new Date().getDate()
+    console.log(`[Traffic] Starting daily host traffic reset check (today is day ${today})...`)
+
+    try {
+        // 查找今天需要重置的节点
+        const { prisma } = await import('../db/prisma.js')
+        const hostsToReset = await prisma.host.findMany({
+            where: { trafficResetDay: today },
+            select: { id: true, name: true }
+        })
+
+        if (hostsToReset.length === 0) {
+            console.log('[Traffic] No hosts need traffic reset today')
+            return
+        }
+
+        console.log(`[Traffic] Found ${hostsToReset.length} hosts to reset: ${hostsToReset.map(h => h.name).join(', ')}`)
+
+        // 重置这些节点下所有实例的流量
+        const hostIds = hostsToReset.map(h => h.id)
+        await trafficDb.resetHostInstancesMonthlyTraffic(hostIds)
+
+        const instances = await trafficDb.getRunningInstancesForTraffic()
+        const instancesToReconcile = instances.filter(i => hostIds.includes(i.host.id))
+        await reconcileTrafficState(instancesToReconcile)
+
+        console.log(`[Traffic] Daily host traffic reset completed for ${hostsToReset.length} hosts`)
+    } catch (error) {
+        console.error('[Traffic] Daily host traffic reset failed:', error)
+    }
+}
+
+/**
+ * 保留旧的月度重置函数名稱（兼容性）
+ * @deprecated 使用 runMonthlyUserTrafficResetJob 和 runDailyHostTrafficResetJob 代替
+ */
+export async function runMonthlyResetJob(): Promise<void> {
+    // 兼容旧代码：调用用户级别重置
+    await runMonthlyUserTrafficResetJob()
+}
+
+/**
+ * 清理旧数据任务
+ * 清理周期改3天，确保完整周期的流量历史数据
+ */
+export async function runCleanupJob(): Promise<void> {
+    console.log('[Traffic] Starting cleanup job...')
+
+    try {
+        // 清理周期改3天，支持最大重置日28号的完整周期
+        const deleted = await trafficDb.cleanOldDailyTraffic(35)
+        console.log(`[Traffic] Cleaned up ${deleted} old daily traffic records`)
+    } catch (error) {
+        console.error('[Traffic] Cleanup failed:', error)
+    }
+}
+
+/**
+ * 清理旧通知日志
+ */
+export async function runNotificationCleanupJob(): Promise<void> {
+    console.log('[Traffic] Starting notification log cleanup job...')
+
+    try {
+        const { cleanOldNotificationLogs } = await import('../db/notifications.js')
+        const deleted = await cleanOldNotificationLogs(30)
+        console.log(`[Traffic] Cleaned up ${deleted} old notification logs`)
+    } catch (error) {
+        console.error('[Traffic] Notification log cleanup failed:', error)
+    }
+}
+
+/**
+ * 综合清理任务（过期 Token、验证码、分布式锁、操作验证记录）
+ */
+export async function runSystemCleanupJob(): Promise<void> {
+    console.log('[System] Starting system cleanup job...')
+
+    try {
+        // 清理过期的 Refresh Token
+        const { cleanupExpiredRefreshTokens } = await import('../lib/security.js')
+        const tokensDeleted = await cleanupExpiredRefreshTokens()
+        if (tokensDeleted > 0) {
+            console.log(`[System] Cleaned up ${tokensDeleted} expired refresh tokens`)
+        }
+
+        // 清理过期的邮箱验证码
+        const { cleanupExpiredCodes } = await import('../db/email-verification.js')
+        const codesDeleted = await cleanupExpiredCodes()
+        if (codesDeleted > 0) {
+            console.log(`[System] Cleaned up ${codesDeleted} expired email verification codes`)
+        }
+
+        // 清理过期的分布式锁
+        const { cleanupExpiredLocks } = await import('../lib/distributed-lock.js')
+        const locksDeleted = await cleanupExpiredLocks()
+        if (locksDeleted > 0) {
+            console.log(`[System] Cleaned up ${locksDeleted} expired distributed locks`)
+        }
+
+        // 清理过期的操作验证记录
+        const { cleanupExpiredVerifications } = await import('../lib/operation-verification.js')
+        const verificationsDeleted = await cleanupExpiredVerifications()
+        if (verificationsDeleted > 0) {
+            console.log(`[System] Cleaned up ${verificationsDeleted} expired operation verifications`)
+        }
+
+        // 清理过期的 Token 失效标记
+        const { cleanupExpiredTokenInvalidations } = await import('../lib/security.js')
+        const tokenInvalidationsDeleted = await cleanupExpiredTokenInvalidations()
+        if (tokenInvalidationsDeleted > 0) {
+            console.log(`[System] Cleaned up ${tokenInvalidationsDeleted} expired token invalidations`)
+        }
+
+        // 清理旧的操作日志（90天前）
+        const { cleanOldLogs } = await import('../db/logs.js')
+        const logsDeleted = await cleanOldLogs(90)
+        if (logsDeleted > 0) {
+            console.log(`[System] Cleaned up ${logsDeleted} old operation logs`)
+        }
+
+        console.log('[System] System cleanup job completed')
+    } catch (error) {
+        console.error('[System] System cleanup failed:', error)
+    }
+}
+
+/**
+ * 启动流量调度器
+ */
+export function startTrafficScheduler(): void {
+    // 每 3 分钟采集流量
+    schedule('*/3 * * * *', () => {
+        runTrafficJob().catch(console.error)
+    })
+
+    // 每月 1 日 00:05 重置用户级别流量
+    schedule('5 0 1 * *', () => {
+        runMonthlyUserTrafficResetJob().catch(console.error)
+    })
+
+    // 每天 00:05 检查并重置需要重置的节点实例流量
+    schedule('5 0 * * *', () => {
+        runDailyHostTrafficResetJob().catch(console.error)
+    })
+
+    // 每天 03:00 清理旧数据
+    schedule('0 3 * * *', () => {
+        runCleanupJob().catch(console.error)
+    })
+
+    // 每天 03:30 清理旧通知日志
+    schedule('30 3 * * *', () => {
+        runNotificationCleanupJob().catch(console.error)
+    })
+
+    // 每天 04:00 清理过期的 Token、验证码、分布式锁、操作验证记录
+    schedule('0 4 * * *', () => {
+        runSystemCleanupJob().catch(console.error)
+    })
+
+    console.log('[Traffic] Scheduler started')
+    console.log('[Traffic] - Traffic collection: every 3 minutes')
+    console.log('[Traffic] - User traffic reset: 1st of each month at 00:05')
+    console.log('[Traffic] - Host instance traffic reset: daily at 00:05 (per host resetDay)')
+    console.log('[Traffic] - Data cleanup: daily at 03:00 (retention: 35 days)')
+}
diff --git a/server/src/services/traffic-utils.ts b/server/src/services/traffic-utils.ts
new file mode 100644
index 0000000..8ddfae3
--- /dev/null
+++ b/server/src/services/traffic-utils.ts
@@ -0,0 +1,176 @@
+/**
+ * 流量统计工具函数
+ * 包含增量计算、格式化等纯函数
+ */
+
+/**
+ * 计算流量增量
+ * 计数器归零或统计口径变化时只重建基线，不追补当前原始值。
+ * 这样会少计一次采样窗口，但能避免把历史累计值误算进本期配额。
+ */
+export function calculateIncrement(current: bigint, last: bigint): bigint {
+    if (current < last) {
+        return 0n
+    }
+    return current - last
+}
+
+/**
+ * 计算有效流量限额
+ * 基础限额 + 额外配额
+ */
+export function getEffectiveLimit(limit: bigint | null, extraQuota: bigint): bigint | null {
+    if (limit === null) return null
+    return limit + extraQuota
+}
+
+/**
+ * 检查是否超过限额
+ */
+export function isOverLimit(used: bigint, limit: bigint | null): boolean {
+    if (limit === null) return false
+    return used >= limit
+}
+
+/**
+ * 检查是否达到预警阈值 (80%)
+ */
+export function isWarningThreshold(used: bigint, limit: bigint | null): boolean {
+    if (limit === null) return false
+    return used >= (limit * 80n) / 100n
+}
+
+/**
+ * 检查预警是否在当月已发送
+ */
+export function isWarningSentThisMonth(sentAt: Date | null): boolean {
+    if (!sentAt) return false
+    const now = new Date()
+    return sentAt.getMonth() === now.getMonth() && sentAt.getFullYear() === now.getFullYear()
+}
+
+/**
+ * 计算用户当前应有的流量状态
+ */
+export function calculateUserTrafficStatus(used: bigint, limit: bigint | null): 'NORMAL' | 'WARNING' | 'LIMITED' {
+    if (isOverLimit(used, limit)) {
+        return 'LIMITED'
+    }
+    if (isWarningThreshold(used, limit)) {
+        return 'WARNING'
+    }
+    return 'NORMAL'
+}
+
+/**
+ * 计算实例当前应有的流量状态
+ */
+export function calculateInstanceTrafficStatus(used: bigint, limit: bigint | null): 'NORMAL' | 'LIMITED' {
+    return isOverLimit(used, limit) ? 'LIMITED' : 'NORMAL'
+}
+
+/**
+ * 格式化字节数为人类可读格式
+ */
+export function formatBytes(bytes: bigint): string {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB']
+    let value = Number(bytes)
+    let unitIndex = 0
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024
+        unitIndex++
+    }
+
+    return `${value.toFixed(2)} ${units[unitIndex]}`
+}
+
+/**
+ * 解析字节字符串为 BigInt
+ * 支持格式: "100GB", "1.5TB", "500MB" 等
+ */
+export function parseBytes(str: string): bigint {
+    const match = str.match(/^([\d.]+)\s*(B|KB|MB|GB|TB)$/i)
+    if (!match) {
+        throw new Error(`Invalid byte string: ${str}`)
+    }
+
+    const value = parseFloat(match[1])
+    const unit = match[2].toUpperCase()
+
+    const multipliers: Record<string, bigint> = {
+        'B': 1n,
+        'KB': 1024n,
+        'MB': 1024n * 1024n,
+        'GB': 1024n * 1024n * 1024n,
+        'TB': 1024n * 1024n * 1024n * 1024n
+    }
+
+    return BigInt(Math.floor(value * Number(multipliers[unit])))
+}
+
+/**
+ * 计算百分比
+ * 注意: 先转换为 Number 再计算,避免 BigInt 整数除法精度丢失
+ * 例如: 160MB / 257GB 用 BigInt 整数除法会得到 0,而非 0.061%
+ */
+export function calculatePercentage(used: bigint, limit: bigint | null): number {
+    if (limit === null || limit === 0n) return 0
+    // 先转换为浮点数再计算百分比,避免整数除法导致的精度丢失
+    const percentage = (Number(used) / Number(limit)) * 100
+    return Math.min(100, percentage)
+}
+
+/**
+ * 计算流量统计周期
+ * 根据节点的重置日计算当前周期的起止日期
+ * 
+ * @param resetDay 重置日（1-28）
+ * @param referenceDate 参考日期（默认当前时间）
+ * @returns 周期起止日期
+ */
+export function getTrafficPeriod(resetDay: number, referenceDate: Date = new Date()): {
+    periodStart: Date
+    periodEnd: Date
+} {
+    // 限制 resetDay 在 1-28 范围内
+    const day = Math.max(1, Math.min(28, resetDay))
+    
+    const year = referenceDate.getFullYear()
+    const month = referenceDate.getMonth()
+    const currentDay = referenceDate.getDate()
+    
+    let periodStart: Date
+    let periodEnd: Date
+    
+    if (currentDay >= day) {
+        // 当前日期 >= 重置日：周期为本月resetDay ~ 下月resetDay
+        periodStart = new Date(year, month, day, 0, 0, 0, 0)
+        periodEnd = new Date(year, month + 1, day, 0, 0, 0, 0)
+    } else {
+        // 当前日期 < 重置日：周期为上月resetDay ~ 本月resetDay
+        periodStart = new Date(year, month - 1, day, 0, 0, 0, 0)
+        periodEnd = new Date(year, month, day, 0, 0, 0, 0)
+    }
+    
+    return { periodStart, periodEnd }
+}
+
+/**
+ * 检查今天是否是指定的重置日
+ */
+export function isTodayResetDay(resetDay: number): boolean {
+    const today = new Date().getDate()
+    return today === resetDay
+}
+
+/**
+ * 将 Date 对象格式化为本地日期字符串 (YYYY-MM-DD)
+ * 避免 toISOString() 导致的 UTC 时区偏移问题
+ */
+export function formatLocalDate(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
diff --git a/server/src/services/vip-benefits.ts b/server/src/services/vip-benefits.ts
new file mode 100644
index 0000000..538e20a
--- /dev/null
+++ b/server/src/services/vip-benefits.ts
@@ -0,0 +1,733 @@
+import { Prisma, type VipBenefitClaim, type VipBenefitClaimStatus, type VipBenefitReward } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import {
+  MAX_VIP_LEVEL,
+  calculateUserVipLevelByMetric,
+  getUserVipMetric,
+  getUserVipStats,
+  getVipBadgeStyleForLevel,
+  getVipRules,
+  type UserVipMetric,
+  type UserVipStats,
+  type VipBadgeStyle
+} from './vip-levels.js'
+
+type DbClient = Prisma.TransactionClient | typeof prisma
+
+export type VipBenefitRewardTypeValue = 'balance' | 'points' | 'instance'
+export type VipBenefitRewardState = 'claimable' | 'claimed' | 'locked' | 'blocked'
+
+export interface VipBenefitRewardInput {
+  level?: number
+  type?: VipBenefitRewardTypeValue
+  title?: string
+  description?: string | null
+  claimLimit?: number
+  sortOrder?: number
+  enabled?: boolean
+  config?: Record<string, unknown> | null
+}
+
+export interface VipBenefitRewardConfig {
+  amount?: number
+  packageId?: number | null
+  packageName?: string | null
+  planId?: number | null
+  planName?: string | null
+  days?: number
+  quantity?: number
+}
+
+export interface VipBenefitClaimView {
+  id: number
+  rewardId: number
+  level: number
+  status: VipBenefitClaimStatus
+  claimNo: number
+  snapshot: Record<string, unknown>
+  deliveredAt: string | null
+  createdAt: string
+}
+
+export interface VipBenefitRewardView {
+  id: number
+  level: number
+  type: VipBenefitRewardTypeValue
+  title: string
+  description: string | null
+  claimLimit: number
+  sortOrder: number
+  enabled: boolean
+  config: VipBenefitRewardConfig
+  createdAt: string
+  updatedAt: string
+  claimedCount: number
+  remainingClaims: number
+  state: VipBenefitRewardState
+  blockedByLevel: number | null
+  claims: VipBenefitClaimView[]
+}
+
+export interface VipBenefitAmountSummary {
+  balanceAmount: number
+  pointsAmount: number
+  instanceQuantity: number
+}
+
+export interface VipBenefitOverview {
+  currentLevel: number
+  userVipMetric: UserVipMetric
+  userStats: UserVipStats
+  userVipBadgeStyle: VipBadgeStyle | null
+  rewards: VipBenefitRewardView[]
+  summary: {
+    totalRewards: number
+    unlockedRewards: number
+    claimableRewards: number
+    claimedRewards: number
+    lockedRewards: number
+    blockedRewards: number
+    pendingRewards: number
+    entitlement: VipBenefitAmountSummary
+    remaining: VipBenefitAmountSummary
+  }
+}
+
+const REWARD_TYPES = new Set<VipBenefitRewardTypeValue>(['balance', 'points', 'instance'])
+const MAX_MONEY_AMOUNT = 99999999.99
+const MAX_POINTS_AMOUNT = 1000000000
+const MAX_CLAIM_LIMIT = 100
+const MAX_SORT_ORDER = 1000000
+const MAX_INSTANCE_DAYS = 3650
+const MAX_INSTANCE_QUANTITY = 10
+const MAX_TITLE_LENGTH = 80
+const MAX_DESCRIPTION_LENGTH = 300
+const MAX_BULK_CLAIMS = 1000
+
+export class VipBenefitError extends Error {
+  constructor(
+    public readonly code: string,
+    message: string,
+    public readonly statusCode = 400
+  ) {
+    super(message)
+  }
+}
+
+function toNumber(value: unknown): number {
+  if (value === null || value === undefined) return 0
+  const numberValue = Number(value)
+  return Number.isFinite(numberValue) ? numberValue : 0
+}
+
+function roundMoney(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function getRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {}
+}
+
+function normalizeLevel(value: unknown): number {
+  const level = Number(value)
+  if (!Number.isInteger(level) || level < 1 || level > MAX_VIP_LEVEL) {
+    throw new VipBenefitError('INVALID_LEVEL', `VIP level must be between 1 and ${MAX_VIP_LEVEL}`)
+  }
+  return level
+}
+
+function normalizeRewardType(value: unknown): VipBenefitRewardTypeValue {
+  if (typeof value === 'string' && REWARD_TYPES.has(value as VipBenefitRewardTypeValue)) {
+    return value as VipBenefitRewardTypeValue
+  }
+  throw new VipBenefitError('INVALID_REWARD_TYPE', 'Invalid VIP benefit reward type')
+}
+
+function normalizeTitle(value: unknown): string {
+  if (typeof value !== 'string') {
+    throw new VipBenefitError('INVALID_TITLE', 'Reward title is required')
+  }
+  const title = value.trim()
+  if (!title) {
+    throw new VipBenefitError('INVALID_TITLE', 'Reward title is required')
+  }
+  if (title.length > MAX_TITLE_LENGTH) {
+    throw new VipBenefitError('INVALID_TITLE', `Reward title cannot exceed ${MAX_TITLE_LENGTH} characters`)
+  }
+  return title
+}
+
+function normalizeDescription(value: unknown): string | null {
+  if (value === null || value === undefined) return null
+  if (typeof value !== 'string') return null
+  const description = value.trim()
+  if (!description) return null
+  return description.slice(0, MAX_DESCRIPTION_LENGTH)
+}
+
+function normalizePositiveInteger(value: unknown, field: string, max: number): number {
+  const parsed = Number(value)
+  if (!Number.isInteger(parsed) || parsed <= 0 || parsed > max) {
+    throw new VipBenefitError('INVALID_NUMBER', `${field} must be an integer between 1 and ${max}`)
+  }
+  return parsed
+}
+
+function normalizeOptionalPositiveInteger(value: unknown, fallback: number, field: string, max: number): number {
+  if (value === null || value === undefined || value === '') return fallback
+  return normalizePositiveInteger(value, field, max)
+}
+
+function normalizeMoney(value: unknown, field: string): number {
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed) || parsed <= 0 || parsed > MAX_MONEY_AMOUNT) {
+    throw new VipBenefitError('INVALID_AMOUNT', `${field} must be between 0.01 and ${MAX_MONEY_AMOUNT}`)
+  }
+  return roundMoney(parsed)
+}
+
+function normalizeSortOrder(value: unknown): number {
+  const parsed = Number(value ?? 0)
+  if (!Number.isInteger(parsed) || parsed < 0 || parsed > MAX_SORT_ORDER) {
+    throw new VipBenefitError('INVALID_SORT_ORDER', `Sort order must be an integer between 0 and ${MAX_SORT_ORDER}`)
+  }
+  return parsed
+}
+
+function normalizeLabel(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed ? trimmed.slice(0, 100) : null
+}
+
+function normalizeRewardConfig(type: VipBenefitRewardTypeValue, value: unknown): VipBenefitRewardConfig {
+  const config = getRecord(value)
+  if (type === 'balance') {
+    return { amount: normalizeMoney(config.amount, 'Balance reward amount') }
+  }
+  if (type === 'points') {
+    return { amount: normalizePositiveInteger(config.amount, 'Points reward amount', MAX_POINTS_AMOUNT) }
+  }
+
+  return {
+    packageId: normalizePositiveInteger(config.packageId, 'Package ID', 2147483647),
+    packageName: normalizeLabel(config.packageName),
+    planId: normalizePositiveInteger(config.planId, 'Plan ID', 2147483647),
+    planName: normalizeLabel(config.planName),
+    days: normalizeOptionalPositiveInteger(config.days, 30, 'Instance reward days', MAX_INSTANCE_DAYS),
+    quantity: normalizeOptionalPositiveInteger(config.quantity, 1, 'Instance reward quantity', MAX_INSTANCE_QUANTITY)
+  }
+}
+
+function normalizeStoredRewardConfig(type: VipBenefitRewardTypeValue, value: unknown): VipBenefitRewardConfig {
+  const config = getRecord(value)
+  if (type === 'balance') {
+    return { amount: roundMoney(Math.max(0, toNumber(config.amount))) }
+  }
+  if (type === 'points') {
+    return { amount: Math.max(0, Math.floor(toNumber(config.amount))) }
+  }
+  return {
+    packageId: Number.isInteger(Number(config.packageId)) ? Number(config.packageId) : null,
+    packageName: normalizeLabel(config.packageName),
+    planId: Number.isInteger(Number(config.planId)) ? Number(config.planId) : null,
+    planName: normalizeLabel(config.planName),
+    days: Math.max(1, Math.min(MAX_INSTANCE_DAYS, Math.floor(toNumber(config.days) || 30))),
+    quantity: Math.max(1, Math.min(MAX_INSTANCE_QUANTITY, Math.floor(toNumber(config.quantity) || 1)))
+  }
+}
+
+async function validateInstanceConfig(config: VipBenefitRewardConfig, client: DbClient = prisma): Promise<VipBenefitRewardConfig> {
+  const packageId = config.packageId
+  const planId = config.planId
+  if (!packageId || !planId) {
+    throw new VipBenefitError('INVALID_INSTANCE_REWARD', 'Instance reward requires a package and plan')
+  }
+
+  const [pkg, plan] = await Promise.all([
+    client.package.findFirst({
+      where: {
+        id: packageId,
+        active: true
+      },
+      select: {
+        id: true,
+        name: true
+      }
+    }),
+    client.packagePlan.findFirst({
+      where: {
+        id: planId,
+        packageId,
+        isActive: true
+      },
+      select: {
+        id: true,
+        name: true
+      }
+    })
+  ])
+
+  if (!pkg) {
+    throw new VipBenefitError('INVALID_INSTANCE_REWARD', 'Selected package does not exist or is disabled')
+  }
+  if (!plan) {
+    throw new VipBenefitError('INVALID_INSTANCE_REWARD', 'Selected plan does not exist, is disabled, or does not belong to the package')
+  }
+
+  return {
+    ...config,
+    packageId,
+    packageName: config.packageName || pkg.name,
+    planId,
+    planName: config.planName || plan.name
+  }
+}
+
+async function normalizeRewardData(
+  input: VipBenefitRewardInput,
+  base?: VipBenefitReward
+): Promise<{
+  level: number
+  type: VipBenefitRewardTypeValue
+  title: string
+  description: string | null
+  claimLimit: number
+  sortOrder: number
+  enabled: boolean
+  config: VipBenefitRewardConfig
+}> {
+  const type = normalizeRewardType(input.type ?? base?.type)
+  const rawConfig = input.config !== undefined ? input.config : base?.config
+  let config = normalizeRewardConfig(type, rawConfig)
+  if (type === 'instance') {
+    config = await validateInstanceConfig(config)
+  }
+
+  return {
+    level: normalizeLevel(input.level ?? base?.level),
+    type,
+    title: normalizeTitle(input.title ?? base?.title),
+    description: normalizeDescription(input.description ?? base?.description),
+    claimLimit: normalizeOptionalPositiveInteger(input.claimLimit ?? base?.claimLimit, 1, 'Claim limit', MAX_CLAIM_LIMIT),
+    sortOrder: normalizeSortOrder(input.sortOrder ?? base?.sortOrder ?? 0),
+    enabled: input.enabled === undefined ? (base?.enabled ?? true) : input.enabled === true,
+    config
+  }
+}
+
+function claimToView(claim: VipBenefitClaim): VipBenefitClaimView {
+  return {
+    id: claim.id,
+    rewardId: claim.rewardId,
+    level: claim.level,
+    status: claim.status,
+    claimNo: claim.claimNo,
+    snapshot: getRecord(claim.snapshot),
+    deliveredAt: claim.deliveredAt ? claim.deliveredAt.toISOString() : null,
+    createdAt: claim.createdAt.toISOString()
+  }
+}
+
+function rewardToAdminView(reward: VipBenefitReward): VipBenefitRewardView {
+  return {
+    id: reward.id,
+    level: reward.level,
+    type: reward.type as VipBenefitRewardTypeValue,
+    title: reward.title,
+    description: reward.description,
+    claimLimit: reward.claimLimit,
+    sortOrder: reward.sortOrder,
+    enabled: reward.enabled,
+    config: normalizeStoredRewardConfig(reward.type as VipBenefitRewardTypeValue, reward.config),
+    createdAt: reward.createdAt.toISOString(),
+    updatedAt: reward.updatedAt.toISOString(),
+    claimedCount: 0,
+    remainingClaims: reward.claimLimit,
+    state: 'locked',
+    blockedByLevel: null,
+    claims: []
+  }
+}
+
+function addRewardAmount(summary: VipBenefitAmountSummary, reward: VipBenefitRewardView, multiplier: number): void {
+  if (multiplier <= 0) return
+  const amount = toNumber(reward.config.amount)
+  if (reward.type === 'balance') {
+    summary.balanceAmount = roundMoney(summary.balanceAmount + amount * multiplier)
+  } else if (reward.type === 'points') {
+    summary.pointsAmount += Math.floor(amount) * multiplier
+  } else if (reward.type === 'instance') {
+    summary.instanceQuantity += Math.max(1, Math.floor(toNumber(reward.config.quantity) || 1)) * multiplier
+  }
+}
+
+async function getCurrentUserVip(userId: number, client: DbClient = prisma): Promise<{
+  level: number
+  metric: UserVipMetric
+  stats: UserVipStats
+  badgeStyle: VipBadgeStyle | null
+}> {
+  const metric = await getUserVipMetric()
+  const [rules, stats] = await Promise.all([
+    getVipRules('user', client),
+    getUserVipStats(userId, client)
+  ])
+  const level = calculateUserVipLevelByMetric(rules, stats, metric)
+  return {
+    level,
+    metric,
+    stats,
+    badgeStyle: getVipBadgeStyleForLevel(rules, 'user', level)
+  }
+}
+
+export async function listAdminVipBenefitRewards(): Promise<VipBenefitRewardView[]> {
+  const rewards = await prisma.vipBenefitReward.findMany({
+    orderBy: [
+      { level: 'asc' },
+      { sortOrder: 'asc' },
+      { id: 'asc' }
+    ]
+  })
+  return rewards.map(rewardToAdminView)
+}
+
+export async function createVipBenefitReward(input: VipBenefitRewardInput): Promise<VipBenefitRewardView> {
+  const data = await normalizeRewardData(input)
+  const reward = await prisma.vipBenefitReward.create({
+    data: {
+      ...data,
+      config: data.config as Prisma.InputJsonObject
+    }
+  })
+  return rewardToAdminView(reward)
+}
+
+export async function updateVipBenefitReward(id: number, input: VipBenefitRewardInput): Promise<VipBenefitRewardView> {
+  const existing = await prisma.vipBenefitReward.findUnique({ where: { id } })
+  if (!existing) {
+    throw new VipBenefitError('REWARD_NOT_FOUND', 'VIP benefit reward not found', 404)
+  }
+
+  const data = await normalizeRewardData(input, existing)
+  const reward = await prisma.vipBenefitReward.update({
+    where: { id },
+    data: {
+      ...data,
+      config: data.config as Prisma.InputJsonObject
+    }
+  })
+  return rewardToAdminView(reward)
+}
+
+export async function deleteVipBenefitReward(id: number): Promise<void> {
+  try {
+    await prisma.vipBenefitReward.delete({ where: { id } })
+  } catch (error: any) {
+    if (error?.code === 'P2025') {
+      throw new VipBenefitError('REWARD_NOT_FOUND', 'VIP benefit reward not found', 404)
+    }
+    throw error
+  }
+}
+
+export async function getVipBenefitOverview(userId: number): Promise<VipBenefitOverview> {
+  const [vip, rewards, claims] = await Promise.all([
+    getCurrentUserVip(userId),
+    prisma.vipBenefitReward.findMany({
+      where: { enabled: true },
+      orderBy: [
+        { level: 'asc' },
+        { sortOrder: 'asc' },
+        { id: 'asc' }
+      ]
+    }),
+    prisma.vipBenefitClaim.findMany({
+      where: { userId },
+      orderBy: [
+        { level: 'asc' },
+        { rewardId: 'asc' },
+        { claimNo: 'asc' }
+      ]
+    })
+  ])
+
+  const claimsByReward = new Map<number, VipBenefitClaim[]>()
+  for (const claim of claims) {
+    const list = claimsByReward.get(claim.rewardId) || []
+    list.push(claim)
+    claimsByReward.set(claim.rewardId, list)
+  }
+
+  const outstandingLevels = new Set<number>()
+  const baseViews = rewards.map((reward) => {
+    const rewardClaims = claimsByReward.get(reward.id) || []
+    const claimedCount = rewardClaims.length
+    const remainingClaims = Math.max(0, reward.claimLimit - claimedCount)
+    if (reward.level <= vip.level && remainingClaims > 0) {
+      outstandingLevels.add(reward.level)
+    }
+    return {
+      reward,
+      claimedCount,
+      remainingClaims,
+      claims: rewardClaims
+    }
+  })
+
+  const rewardViews: VipBenefitRewardView[] = baseViews.map((item) => {
+    const type = item.reward.type as VipBenefitRewardTypeValue
+    const lowerOutstanding = Array.from(outstandingLevels)
+      .filter(level => level < item.reward.level)
+      .sort((a, b) => a - b)[0] ?? null
+    const state: VipBenefitRewardState = item.remainingClaims <= 0
+      ? 'claimed'
+      : item.reward.level > vip.level
+        ? 'locked'
+        : lowerOutstanding
+          ? 'blocked'
+          : 'claimable'
+
+    return {
+      id: item.reward.id,
+      level: item.reward.level,
+      type,
+      title: item.reward.title,
+      description: item.reward.description,
+      claimLimit: item.reward.claimLimit,
+      sortOrder: item.reward.sortOrder,
+      enabled: item.reward.enabled,
+      config: normalizeStoredRewardConfig(type, item.reward.config),
+      createdAt: item.reward.createdAt.toISOString(),
+      updatedAt: item.reward.updatedAt.toISOString(),
+      claimedCount: item.claimedCount,
+      remainingClaims: item.remainingClaims,
+      state,
+      blockedByLevel: state === 'blocked' ? lowerOutstanding : null,
+      claims: item.claims.map(claimToView)
+    }
+  })
+
+  const entitlement: VipBenefitAmountSummary = { balanceAmount: 0, pointsAmount: 0, instanceQuantity: 0 }
+  const remaining: VipBenefitAmountSummary = { balanceAmount: 0, pointsAmount: 0, instanceQuantity: 0 }
+  for (const reward of rewardViews) {
+    if (reward.level <= vip.level) {
+      addRewardAmount(entitlement, reward, reward.claimLimit)
+      addRewardAmount(remaining, reward, reward.remainingClaims)
+    }
+  }
+
+  return {
+    currentLevel: vip.level,
+    userVipMetric: vip.metric,
+    userStats: vip.stats,
+    userVipBadgeStyle: vip.badgeStyle,
+    rewards: rewardViews,
+    summary: {
+      totalRewards: rewardViews.length,
+      unlockedRewards: rewardViews.filter(reward => reward.level <= vip.level).length,
+      claimableRewards: rewardViews.filter(reward => reward.state === 'claimable').length,
+      claimedRewards: rewardViews.filter(reward => reward.state === 'claimed').length,
+      lockedRewards: rewardViews.filter(reward => reward.state === 'locked').length,
+      blockedRewards: rewardViews.filter(reward => reward.state === 'blocked').length,
+      pendingRewards: claims.filter(claim => claim.status === 'pending').length,
+      entitlement,
+      remaining
+    }
+  }
+}
+
+function buildClaimSnapshot(reward: VipBenefitReward, config: VipBenefitRewardConfig): Prisma.InputJsonObject {
+  return {
+    rewardId: reward.id,
+    level: reward.level,
+    type: reward.type,
+    title: reward.title,
+    description: reward.description,
+    claimLimit: reward.claimLimit,
+    config: config as Prisma.InputJsonObject
+  }
+}
+
+function getDeliveryStatus(type: VipBenefitRewardTypeValue): VipBenefitClaimStatus {
+  return type === 'instance' ? 'pending' : 'delivered'
+}
+
+export async function claimVipBenefitReward(userId: number, rewardId: number): Promise<{
+  claim: VipBenefitClaimView
+  overview: VipBenefitOverview
+}> {
+  const parsedRewardId = Number(rewardId)
+  if (!Number.isInteger(parsedRewardId) || parsedRewardId <= 0) {
+    throw new VipBenefitError('INVALID_REWARD_ID', 'Invalid VIP benefit reward ID')
+  }
+
+  let createdClaim: VipBenefitClaim | null = null
+  try {
+    createdClaim = await prisma.$transaction(async (tx) => {
+      const vip = await getCurrentUserVip(userId, tx)
+      const reward = await tx.vipBenefitReward.findFirst({
+        where: {
+          id: parsedRewardId,
+          enabled: true
+        }
+      })
+
+      if (!reward) {
+        throw new VipBenefitError('REWARD_NOT_FOUND', 'VIP benefit reward not found', 404)
+      }
+      if (reward.level > vip.level) {
+        throw new VipBenefitError('VIP_LEVEL_REQUIRED', `VIP${reward.level} is required to claim this reward`, 403)
+      }
+
+      const lowerRewards = await tx.vipBenefitReward.findMany({
+        where: {
+          enabled: true,
+          level: {
+            lt: reward.level,
+            lte: vip.level
+          }
+        },
+        orderBy: [
+          { level: 'asc' },
+          { sortOrder: 'asc' },
+          { id: 'asc' }
+        ]
+      })
+
+      const rewardIdsToCheck = [...lowerRewards.map(item => item.id), reward.id]
+      const relevantClaims = await tx.vipBenefitClaim.findMany({
+        where: {
+          userId,
+          rewardId: { in: rewardIdsToCheck }
+        },
+        select: {
+          rewardId: true
+        }
+      })
+      const claimCounts = new Map<number, number>()
+      for (const claim of relevantClaims) {
+        claimCounts.set(claim.rewardId, (claimCounts.get(claim.rewardId) || 0) + 1)
+      }
+
+      const blockingReward = lowerRewards.find(item => (claimCounts.get(item.id) || 0) < item.claimLimit)
+      if (blockingReward) {
+        throw new VipBenefitError(
+          'LOWER_LEVEL_REWARD_REQUIRED',
+          `Please claim all VIP${blockingReward.level} rewards first`,
+          409
+        )
+      }
+
+      const existingCount = claimCounts.get(reward.id) || 0
+      if (existingCount >= reward.claimLimit) {
+        throw new VipBenefitError('CLAIM_LIMIT_REACHED', 'This VIP benefit reward has already been fully claimed', 409)
+      }
+
+      const type = reward.type as VipBenefitRewardTypeValue
+      const config = normalizeStoredRewardConfig(type, reward.config)
+      const claim = await tx.vipBenefitClaim.create({
+        data: {
+          userId,
+          rewardId: reward.id,
+          level: reward.level,
+          status: getDeliveryStatus(type),
+          claimNo: existingCount + 1,
+          snapshot: buildClaimSnapshot(reward, config),
+          deliveredAt: type === 'instance' ? null : new Date()
+        }
+      })
+
+      if (type === 'balance') {
+        const amount = normalizeMoney(config.amount, 'Balance reward amount')
+        const user = await tx.user.findUnique({
+          where: { id: userId },
+          select: { balance: true }
+        })
+        if (!user) {
+          throw new VipBenefitError('USER_NOT_FOUND', 'User not found', 404)
+        }
+        const balanceBefore = toNumber(user.balance)
+        const balanceAfter = roundMoney(balanceBefore + amount)
+        await tx.user.update({
+          where: { id: userId },
+          data: { balance: balanceAfter }
+        })
+        await tx.balanceLog.create({
+          data: {
+            userId,
+            type: 'gift',
+            amount,
+            balanceBefore,
+            balanceAfter,
+            remark: `VIP benefit: ${reward.title}`
+          }
+        })
+      } else if (type === 'points') {
+        const amount = normalizePositiveInteger(config.amount, 'Points reward amount', MAX_POINTS_AMOUNT)
+        const userPoints = await tx.userPoints.upsert({
+          where: { userId },
+          update: {},
+          create: { userId }
+        })
+        const updatedPoints = await tx.userPoints.update({
+          where: { userId },
+          data: {
+            points: { increment: amount },
+            totalEarned: { increment: amount }
+          }
+        })
+        await tx.pointsLog.create({
+          data: {
+            userId,
+            type: 'vip_benefit',
+            amount,
+            pointsBefore: userPoints.points,
+            pointsAfter: updatedPoints.points,
+            relatedId: claim.id,
+            remark: `VIP benefit: ${reward.title}`
+          }
+        })
+      }
+
+      return claim
+    })
+  } catch (error: any) {
+    if (error?.code === 'P2002') {
+      throw new VipBenefitError('CLAIM_CONFLICT', 'This VIP benefit reward was already claimed, please refresh and try again', 409)
+    }
+    throw error
+  }
+
+  return {
+    claim: claimToView(createdClaim),
+    overview: await getVipBenefitOverview(userId)
+  }
+}
+
+export async function claimAllAvailableVipBenefitRewards(userId: number): Promise<{
+  claims: VipBenefitClaimView[]
+  overview: VipBenefitOverview
+}> {
+  const claims: VipBenefitClaimView[] = []
+  let overview = await getVipBenefitOverview(userId)
+
+  for (let attempt = 0; attempt < MAX_BULK_CLAIMS; attempt++) {
+    const nextReward = overview.rewards
+      .filter(reward => reward.state === 'claimable')
+      .sort((a, b) => a.level - b.level || a.sortOrder - b.sortOrder || a.id - b.id)[0]
+
+    if (!nextReward) {
+      return { claims, overview }
+    }
+
+    const result = await claimVipBenefitReward(userId, nextReward.id)
+    claims.push(result.claim)
+    overview = result.overview
+  }
+
+  throw new VipBenefitError('BULK_CLAIM_LIMIT_EXCEEDED', 'Too many VIP benefit rewards to claim at once', 409)
+}
diff --git a/server/src/services/vip-levels.ts b/server/src/services/vip-levels.ts
new file mode 100644
index 0000000..cd61345
--- /dev/null
+++ b/server/src/services/vip-levels.ts
@@ -0,0 +1,777 @@
+import { Prisma, type VipLevelConditionMode, type VipLevelRule, type VipLevelRuleType } from '@prisma/client'
+import { prisma } from '../db/prisma.js'
+import { getUsersTotalConsumeMap } from '../db/balance.js'
+import { getSystemConfig } from '../db/system-config.js'
+import { invalidateCachedConfig } from '../lib/config-cache.js'
+
+export const MAX_VIP_LEVEL = 10
+const MAX_MONEY_THRESHOLD = 99999999.99
+const MAX_INSTANCE_THRESHOLD = 1000000
+const MAX_BENEFIT_POINTS = 1000000000
+const MAX_BENEFIT_INSTANCE_DAYS = 3650
+const MAX_BENEFIT_INSTANCE_QUANTITY = 10
+const HEX_COLOR_RE = /^#[0-9a-fA-F]{6}$/
+
+export type VipRuleType = VipLevelRuleType
+export type VipConditionMode = VipLevelConditionMode
+export type UserVipMetric = 'totalRecharge' | 'totalConsume'
+
+export interface VipRuleInput {
+  level: number
+  enabled?: boolean
+  conditionMode?: VipConditionMode
+  userMetric?: UserVipMetric
+  minRecharge?: number | null
+  minConsume?: number | null
+  minHostingIncome?: number | null
+  minHostingInstances?: number | null
+  benefits?: Record<string, unknown> | null
+}
+
+export interface VipBadgeStyle {
+  backgroundColor: string
+  textColor: string
+}
+
+export interface VipBenefitHallConfig {
+  balance: {
+    enabled: boolean
+    amount: number
+  }
+  points: {
+    enabled: boolean
+    amount: number
+  }
+  instance: {
+    enabled: boolean
+    packageId: number | null
+    packageName: string | null
+    planId: number | null
+    planName: string | null
+    days: number
+    quantity: number
+  }
+}
+
+interface VipBenefitInstanceRef {
+  level: number
+  packageId: number
+  planId: number
+}
+
+export interface NormalizedVipRule {
+  id?: number
+  type: VipRuleType
+  level: number
+  enabled: boolean
+  conditionMode: VipConditionMode
+  minRecharge: number | null
+  minConsume: number | null
+  minHostingIncome: number | null
+  minHostingInstances: number | null
+  benefits: Record<string, unknown>
+  badgeStyle: VipBadgeStyle
+}
+
+export interface UserVipStats {
+  totalRecharge: number
+  totalConsume: number
+}
+
+export interface HostingVipStats {
+  totalHostingIncome: number
+  instanceCount: number
+}
+
+export type VipProgressMetric = 'totalRecharge' | 'totalConsume' | 'totalHostingIncome' | 'instanceCount'
+
+export interface VipProgressCondition {
+  metric: VipProgressMetric
+  current: number
+  target: number
+  remaining: number
+  matched: boolean
+  progress: number
+}
+
+export interface VipLevelProgress {
+  currentLevel: number
+  nextLevel: number | null
+  conditionMode: VipConditionMode | null
+  userMetric?: UserVipMetric | null
+  progress: number
+  isMaxLevel: boolean
+  conditions: VipProgressCondition[]
+}
+
+export interface VipOverview {
+  userVipLevel: number
+  hostingVipLevel: number
+  userVipBadgeStyle: VipBadgeStyle | null
+  hostingVipBadgeStyle: VipBadgeStyle | null
+  userVipMetric: UserVipMetric
+  userStats: UserVipStats
+  hostingStats: HostingVipStats
+  userVipProgress: VipLevelProgress
+  hostingVipProgress: VipLevelProgress
+}
+
+type DbClient = Prisma.TransactionClient | typeof prisma
+const USER_VIP_METRIC_CONFIG_KEY = 'user_vip_metric'
+
+function toNumber(value: unknown): number {
+  if (value === null || value === undefined) return 0
+  if (typeof value === 'number') return Number.isFinite(value) ? value : 0
+  if (typeof value === 'bigint') return Number(value)
+  return Number.parseFloat(String(value)) || 0
+}
+
+function nullableMoney(value: unknown): number | null {
+  if (value === null || value === undefined || value === '') return null
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed) || parsed < 0 || parsed > MAX_MONEY_THRESHOLD) {
+    throw new Error(`Money threshold must be between 0 and ${MAX_MONEY_THRESHOLD}`)
+  }
+  return Math.round(parsed * 100) / 100
+}
+
+function nullableCount(value: unknown): number | null {
+  if (value === null || value === undefined || value === '') return null
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed) || parsed < 0 || parsed > MAX_INSTANCE_THRESHOLD) {
+    throw new Error(`Instance threshold must be between 0 and ${MAX_INSTANCE_THRESHOLD}`)
+  }
+  if (!Number.isInteger(parsed)) {
+    throw new Error('Instance threshold must be an integer')
+  }
+  return parsed
+}
+
+function hasThreshold(value: number | null): boolean {
+  return value !== null && value > 0
+}
+
+function roundAmount(value: number): number {
+  return Math.round(value * 100) / 100
+}
+
+function toProgressPercent(current: number, target: number): number {
+  if (!Number.isFinite(current) || !Number.isFinite(target) || target <= 0) return 0
+  return Math.max(0, Math.min(100, Math.round((current / target) * 100)))
+}
+
+function normalizeUserVipMetric(value: unknown): UserVipMetric {
+  return value === 'totalConsume' ? 'totalConsume' : 'totalRecharge'
+}
+
+export async function getUserVipMetric(): Promise<UserVipMetric> {
+  return normalizeUserVipMetric(await getSystemConfig(USER_VIP_METRIC_CONFIG_KEY))
+}
+
+export async function updateUserVipMetric(value: unknown): Promise<UserVipMetric> {
+  const metric = normalizeUserVipMetric(value)
+  await prisma.systemConfig.upsert({
+    where: { key: USER_VIP_METRIC_CONFIG_KEY },
+    create: {
+      key: USER_VIP_METRIC_CONFIG_KEY,
+      value: metric,
+      type: 'string',
+      label: '用户 VIP 统计口径',
+      description: '用户 VIP 等级全局计算口径：totalRecharge=累计充值，totalConsume=累计消费'
+    },
+    update: { value: metric }
+  })
+  invalidateCachedConfig(USER_VIP_METRIC_CONFIG_KEY)
+  return metric
+}
+
+function normalizeBenefits(value: unknown): Record<string, unknown> {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return value as Record<string, unknown>
+  }
+  return {}
+}
+
+function getRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {}
+}
+
+export function getDefaultVipBadgeStyle(level: number): VipBadgeStyle {
+  const styles: VipBadgeStyle[] = [
+    { backgroundColor: '#FEF3C7', textColor: '#92400E' },
+    { backgroundColor: '#D1FAE5', textColor: '#047857' },
+    { backgroundColor: '#DBEAFE', textColor: '#1D4ED8' },
+    { backgroundColor: '#EDE9FE', textColor: '#6D28D9' },
+    { backgroundColor: '#FFEDD5', textColor: '#C2410C' },
+    { backgroundColor: '#FCE7F3', textColor: '#BE185D' },
+    { backgroundColor: '#FFE4E6', textColor: '#BE123C' },
+    { backgroundColor: '#CFFAFE', textColor: '#0E7490' },
+    { backgroundColor: '#FAE8FF', textColor: '#A21CAF' },
+    { backgroundColor: '#FEF9C3', textColor: '#A16207' }
+  ]
+  return styles[(Math.max(1, Math.floor(level)) - 1) % styles.length]
+}
+
+function normalizeHexColor(value: unknown, fallback: string): string {
+  return typeof value === 'string' && HEX_COLOR_RE.test(value) ? value : fallback
+}
+
+function normalizeBenefitMoney(value: unknown): number {
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed) || parsed <= 0) return 0
+  return Math.min(MAX_MONEY_THRESHOLD, Math.round(parsed * 100) / 100)
+}
+
+function normalizeBenefitInteger(value: unknown, max: number): number {
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed) || parsed <= 0) return 0
+  return Math.min(max, Math.floor(parsed))
+}
+
+function normalizeBenefitId(value: unknown): number | null {
+  const parsed = Number(value)
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null
+}
+
+function normalizeBenefitLabel(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed ? trimmed.slice(0, 100) : null
+}
+
+function normalizeBenefitHallConfig(value: unknown, strict = false): VipBenefitHallConfig {
+  const raw = getRecord(value)
+  const balance = getRecord(raw.balance)
+  const points = getRecord(raw.points)
+  const instance = getRecord(raw.instance)
+
+  const balanceAmount = normalizeBenefitMoney(balance.amount)
+  const pointsAmount = normalizeBenefitInteger(points.amount, MAX_BENEFIT_POINTS)
+  const packageId = normalizeBenefitId(instance.packageId)
+  const planId = normalizeBenefitId(instance.planId)
+  const days = normalizeBenefitInteger(instance.days, MAX_BENEFIT_INSTANCE_DAYS) || 30
+  const quantity = normalizeBenefitInteger(instance.quantity, MAX_BENEFIT_INSTANCE_QUANTITY) || 1
+
+  const balanceEnabled = balance.enabled === true
+  const pointsEnabled = points.enabled === true
+  const instanceEnabled = instance.enabled === true
+
+  if (strict) {
+    if (balanceEnabled && balanceAmount <= 0) {
+      throw new Error('VIP benefit balance amount must be greater than 0')
+    }
+    if (pointsEnabled && pointsAmount <= 0) {
+      throw new Error('VIP benefit points amount must be a positive integer')
+    }
+    if (instanceEnabled && (!packageId || !planId)) {
+      throw new Error('VIP benefit instance requires a package and plan')
+    }
+    if (instanceEnabled && normalizeBenefitInteger(instance.days, MAX_BENEFIT_INSTANCE_DAYS) <= 0) {
+      throw new Error('VIP benefit instance days must be a positive integer')
+    }
+    if (instanceEnabled && normalizeBenefitInteger(instance.quantity, MAX_BENEFIT_INSTANCE_QUANTITY) <= 0) {
+      throw new Error('VIP benefit instance quantity must be a positive integer')
+    }
+  }
+
+  return {
+    balance: {
+      enabled: balanceEnabled && balanceAmount > 0,
+      amount: balanceAmount
+    },
+    points: {
+      enabled: pointsEnabled && pointsAmount > 0,
+      amount: pointsAmount
+    },
+    instance: {
+      enabled: instanceEnabled && !!packageId && !!planId,
+      packageId,
+      packageName: normalizeBenefitLabel(instance.packageName),
+      planId,
+      planName: normalizeBenefitLabel(instance.planName),
+      days,
+      quantity
+    }
+  }
+}
+
+function collectBenefitInstanceRefs(rules: NormalizedVipRule[]): VipBenefitInstanceRef[] {
+  const refs: VipBenefitInstanceRef[] = []
+  for (const rule of rules) {
+    const benefitHall = normalizeBenefitHallConfig((rule.benefits as Record<string, unknown>).benefitHall)
+    if (benefitHall.instance.enabled && benefitHall.instance.packageId && benefitHall.instance.planId) {
+      refs.push({
+        level: rule.level,
+        packageId: benefitHall.instance.packageId,
+        planId: benefitHall.instance.planId
+      })
+    }
+  }
+  return refs
+}
+
+async function validateBenefitInstanceRefs(refs: VipBenefitInstanceRef[]): Promise<void> {
+  if (refs.length === 0) return
+
+  const packageIds = Array.from(new Set(refs.map(ref => ref.packageId)))
+  const planIds = Array.from(new Set(refs.map(ref => ref.planId)))
+
+  const [packages, plans] = await Promise.all([
+    prisma.package.findMany({
+      where: {
+        id: { in: packageIds },
+        active: true
+      },
+      select: { id: true }
+    }),
+    prisma.packagePlan.findMany({
+      where: {
+        id: { in: planIds },
+        isActive: true
+      },
+      select: {
+        id: true,
+        packageId: true
+      }
+    })
+  ])
+
+  const existingPackageIds = new Set(packages.map(pkg => pkg.id))
+  const activePlanPackageMap = new Map(plans.map(plan => [plan.id, plan.packageId]))
+
+  for (const ref of refs) {
+    if (!existingPackageIds.has(ref.packageId)) {
+      throw new Error(`VIP${ref.level} benefit package does not exist or is disabled`)
+    }
+    if (activePlanPackageMap.get(ref.planId) !== ref.packageId) {
+      throw new Error(`VIP${ref.level} benefit plan does not exist, is disabled, or does not belong to the selected package`)
+    }
+  }
+}
+
+export function normalizeVipBadgeStyle(level: number, value: unknown): VipBadgeStyle {
+  const fallback = getDefaultVipBadgeStyle(level)
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return fallback
+  }
+
+  const style = value as Record<string, unknown>
+  return {
+    backgroundColor: normalizeHexColor(style.backgroundColor, fallback.backgroundColor),
+    textColor: normalizeHexColor(style.textColor, fallback.textColor)
+  }
+}
+
+function sanitizeBenefits(level: number, benefits: unknown, strict = false): Record<string, unknown> {
+  const normalized = normalizeBenefits(benefits)
+  return {
+    ...normalized,
+    badgeStyle: normalizeVipBadgeStyle(level, normalized.badgeStyle),
+    benefitHall: normalizeBenefitHallConfig(normalized.benefitHall, strict)
+  }
+}
+
+export function getVipBadgeStyleForLevel(rules: NormalizedVipRule[], type: VipRuleType, level: number): VipBadgeStyle | null {
+  if (!level) return null
+  const rule = rules.find(item => item.type === type && item.level === level)
+  return rule?.badgeStyle || getDefaultVipBadgeStyle(level)
+}
+
+export function normalizeVipRule(rule: VipLevelRule): NormalizedVipRule {
+  const benefits = sanitizeBenefits(rule.level, rule.benefits)
+  return {
+    id: rule.id,
+    type: rule.type,
+    level: rule.level,
+    enabled: rule.enabled,
+    conditionMode: rule.conditionMode,
+    minRecharge: rule.minRecharge === null ? null : toNumber(rule.minRecharge),
+    minConsume: rule.minConsume === null ? null : toNumber(rule.minConsume),
+    minHostingIncome: rule.minHostingIncome === null ? null : toNumber(rule.minHostingIncome),
+    minHostingInstances: rule.minHostingInstances,
+    benefits,
+    badgeStyle: normalizeVipBadgeStyle(rule.level, benefits.badgeStyle)
+  }
+}
+
+export function sanitizeVipRuleInput(type: VipRuleType, input: VipRuleInput, userMetric: UserVipMetric = 'totalRecharge'): NormalizedVipRule {
+  const level = Number(input.level)
+  if (!Number.isInteger(level) || level < 1 || level > MAX_VIP_LEVEL) {
+    throw new Error(`VIP level must be between 1 and ${MAX_VIP_LEVEL}`)
+  }
+
+  const conditionMode = input.conditionMode === 'all' ? 'all' : 'any'
+  const enabled = input.enabled !== false
+  const normalized: NormalizedVipRule = {
+    type,
+    level,
+    enabled,
+    conditionMode: type === 'user' ? 'any' : conditionMode,
+    minRecharge: type === 'user' && userMetric === 'totalRecharge' ? nullableMoney(input.minRecharge) : null,
+    minConsume: type === 'user' && userMetric === 'totalConsume' ? nullableMoney(input.minConsume) : null,
+    minHostingIncome: type === 'hosting' ? nullableMoney(input.minHostingIncome) : null,
+    minHostingInstances: type === 'hosting' ? nullableCount(input.minHostingInstances) : null,
+    benefits: sanitizeBenefits(level, input.benefits, true),
+    badgeStyle: getDefaultVipBadgeStyle(level)
+  }
+  normalized.badgeStyle = normalizeVipBadgeStyle(level, normalized.benefits.badgeStyle)
+
+  if (enabled && !hasActiveCondition(type, normalized)) {
+    throw new Error(`VIP${level} requires at least one condition`)
+  }
+
+  return normalized
+}
+
+export function hasActiveCondition(type: VipRuleType, rule: Pick<NormalizedVipRule, 'minRecharge' | 'minConsume' | 'minHostingIncome' | 'minHostingInstances'>): boolean {
+  if (type === 'user') {
+    return hasThreshold(rule.minRecharge) || hasThreshold(rule.minConsume)
+  }
+  return hasThreshold(rule.minHostingIncome) || hasThreshold(rule.minHostingInstances)
+}
+
+function getRuleChecks(type: VipRuleType, rule: NormalizedVipRule, stats: UserVipStats | HostingVipStats): boolean[] {
+  if (type === 'user') {
+    const userStats = stats as UserVipStats
+    return [
+      hasThreshold(rule.minRecharge) ? userStats.totalRecharge >= rule.minRecharge! : null,
+      hasThreshold(rule.minConsume) ? userStats.totalConsume >= rule.minConsume! : null
+    ].filter((value): value is boolean => value !== null)
+  }
+
+  const hostingStats = stats as HostingVipStats
+  return [
+    hasThreshold(rule.minHostingIncome) ? hostingStats.totalHostingIncome >= rule.minHostingIncome! : null,
+    hasThreshold(rule.minHostingInstances) ? hostingStats.instanceCount >= rule.minHostingInstances! : null
+  ].filter((value): value is boolean => value !== null)
+}
+
+function getUserRuleChecks(rule: NormalizedVipRule, stats: UserVipStats, userMetric: UserVipMetric): boolean[] {
+  return [
+    userMetric === 'totalRecharge' && hasThreshold(rule.minRecharge) ? stats.totalRecharge >= rule.minRecharge! : null,
+    userMetric === 'totalConsume' && hasThreshold(rule.minConsume) ? stats.totalConsume >= rule.minConsume! : null
+  ].filter((value): value is boolean => value !== null)
+}
+
+function hasUserMetricCondition(rule: NormalizedVipRule, userMetric: UserVipMetric): boolean {
+  return userMetric === 'totalRecharge' ? hasThreshold(rule.minRecharge) : hasThreshold(rule.minConsume)
+}
+
+export function isVipRuleMatched(type: VipRuleType, rule: NormalizedVipRule, stats: UserVipStats | HostingVipStats): boolean {
+  if (!rule.enabled || !hasActiveCondition(type, rule)) return false
+  const checks = getRuleChecks(type, rule, stats)
+  if (checks.length === 0) return false
+  return rule.conditionMode === 'all'
+    ? checks.every(Boolean)
+    : checks.some(Boolean)
+}
+
+export function isUserVipRuleMatched(rule: NormalizedVipRule, stats: UserVipStats, userMetric: UserVipMetric): boolean {
+  if (!rule.enabled || rule.type !== 'user' || !hasUserMetricCondition(rule, userMetric)) return false
+  const checks = getUserRuleChecks(rule, stats, userMetric)
+  return checks.length > 0 && checks.some(Boolean)
+}
+
+export function calculateVipLevel(type: VipRuleType, rules: NormalizedVipRule[], stats: UserVipStats | HostingVipStats): number {
+  const matchedRules = rules
+    .filter(rule => rule.type === type && isVipRuleMatched(type, rule, stats))
+    .sort((a, b) => b.level - a.level)
+
+  return matchedRules[0]?.level || 0
+}
+
+export function calculateUserVipLevelByMetric(rules: NormalizedVipRule[], stats: UserVipStats, userMetric: UserVipMetric): number {
+  const matchedRules = rules
+    .filter(rule => isUserVipRuleMatched(rule, stats, userMetric))
+    .sort((a, b) => b.level - a.level)
+
+  return matchedRules[0]?.level || 0
+}
+
+function buildVipProgressCondition(metric: VipProgressMetric, current: number, target: number): VipProgressCondition {
+  const normalizedCurrent = roundAmount(Math.max(current, 0))
+  const normalizedTarget = roundAmount(Math.max(target, 0))
+  return {
+    metric,
+    current: normalizedCurrent,
+    target: normalizedTarget,
+    remaining: roundAmount(Math.max(normalizedTarget - normalizedCurrent, 0)),
+    matched: normalizedCurrent >= normalizedTarget,
+    progress: toProgressPercent(normalizedCurrent, normalizedTarget)
+  }
+}
+
+function getVipProgressConditions(
+  type: VipRuleType,
+  rule: NormalizedVipRule,
+  stats: UserVipStats | HostingVipStats,
+  userMetric: UserVipMetric = 'totalRecharge'
+): VipProgressCondition[] {
+  if (type === 'user') {
+    const userStats = stats as UserVipStats
+    return [
+      userMetric === 'totalRecharge' && hasThreshold(rule.minRecharge)
+        ? buildVipProgressCondition('totalRecharge', userStats.totalRecharge, rule.minRecharge!)
+        : null,
+      userMetric === 'totalConsume' && hasThreshold(rule.minConsume)
+        ? buildVipProgressCondition('totalConsume', userStats.totalConsume, rule.minConsume!)
+        : null
+    ].filter((condition): condition is VipProgressCondition => condition !== null)
+  }
+
+  const hostingStats = stats as HostingVipStats
+  return [
+    hasThreshold(rule.minHostingIncome)
+      ? buildVipProgressCondition('totalHostingIncome', hostingStats.totalHostingIncome, rule.minHostingIncome!)
+      : null,
+    hasThreshold(rule.minHostingInstances)
+      ? buildVipProgressCondition('instanceCount', hostingStats.instanceCount, rule.minHostingInstances!)
+      : null
+  ].filter((condition): condition is VipProgressCondition => condition !== null)
+}
+
+export function calculateVipProgress(
+  type: VipRuleType,
+  rules: NormalizedVipRule[],
+  currentLevel: number,
+  stats: UserVipStats | HostingVipStats,
+  userMetric: UserVipMetric = 'totalRecharge'
+): VipLevelProgress {
+  const nextRule = rules
+    .filter(rule => {
+      if (rule.type !== type || !rule.enabled || rule.level <= currentLevel) return false
+      return type === 'user' ? hasUserMetricCondition(rule, userMetric) : hasActiveCondition(type, rule)
+    })
+    .sort((a, b) => a.level - b.level)[0]
+
+  if (!nextRule) {
+    return {
+      currentLevel,
+      nextLevel: null,
+      conditionMode: null,
+      userMetric: type === 'user' ? userMetric : null,
+      progress: currentLevel > 0 ? 100 : 0,
+      isMaxLevel: currentLevel > 0,
+      conditions: []
+    }
+  }
+
+  const conditions = getVipProgressConditions(type, nextRule, stats, userMetric)
+  const conditionProgressValues = conditions.map(condition => condition.progress)
+  const progress = conditionProgressValues.length === 0
+    ? 0
+    : nextRule.conditionMode === 'all'
+      ? Math.min(...conditionProgressValues)
+      : Math.max(...conditionProgressValues)
+
+  return {
+    currentLevel,
+    nextLevel: nextRule.level,
+    conditionMode: nextRule.conditionMode,
+    userMetric: type === 'user' ? userMetric : null,
+    progress,
+    isMaxLevel: false,
+    conditions
+  }
+}
+
+export async function getVipRules(type: VipRuleType, client: DbClient = prisma): Promise<NormalizedVipRule[]> {
+  const rules = await client.vipLevelRule.findMany({
+    where: { type },
+    orderBy: { level: 'asc' }
+  })
+  return rules.map(normalizeVipRule)
+}
+
+export async function replaceVipRules(type: VipRuleType, inputs: VipRuleInput[], userMetric?: UserVipMetric): Promise<NormalizedVipRule[]> {
+  if (inputs.length > MAX_VIP_LEVEL) {
+    throw new Error(`At most ${MAX_VIP_LEVEL} VIP rules can be saved`)
+  }
+
+  const byLevel = new Map<number, NormalizedVipRule>()
+  const metricToSave = type === 'user' ? userMetric : undefined
+  const effectiveUserMetric = type === 'user' ? (metricToSave || await getUserVipMetric()) : 'totalRecharge'
+  for (const input of inputs) {
+    const rule = sanitizeVipRuleInput(type, input, effectiveUserMetric)
+    byLevel.set(rule.level, rule)
+  }
+
+  const normalizedRules = Array.from(byLevel.values()).sort((a, b) => a.level - b.level)
+  await validateBenefitInstanceRefs(collectBenefitInstanceRefs(normalizedRules))
+
+  await prisma.$transaction(async (tx) => {
+    if (metricToSave) {
+      await tx.systemConfig.upsert({
+        where: { key: USER_VIP_METRIC_CONFIG_KEY },
+        create: {
+          key: USER_VIP_METRIC_CONFIG_KEY,
+          value: metricToSave,
+          type: 'string',
+          label: '用户 VIP 统计口径',
+          description: '用户 VIP 等级全局计算口径：totalRecharge=累计充值，totalConsume=累计消费'
+        },
+        update: { value: metricToSave }
+      })
+    }
+
+    if (normalizedRules.length === 0) {
+      await tx.vipLevelRule.deleteMany({ where: { type } })
+      return
+    }
+
+    await tx.vipLevelRule.deleteMany({
+      where: {
+        type,
+        level: { notIn: normalizedRules.map(rule => rule.level) }
+      }
+    })
+
+    for (const rule of normalizedRules) {
+      await tx.vipLevelRule.upsert({
+        where: {
+          type_level: {
+            type,
+            level: rule.level
+          }
+        },
+        create: {
+          type,
+          level: rule.level,
+          enabled: rule.enabled,
+          conditionMode: rule.conditionMode,
+          minRecharge: rule.minRecharge,
+          minConsume: rule.minConsume,
+          minHostingIncome: rule.minHostingIncome,
+          minHostingInstances: rule.minHostingInstances,
+          benefits: rule.benefits as Prisma.InputJsonObject
+        },
+        update: {
+          enabled: rule.enabled,
+          conditionMode: rule.conditionMode,
+          minRecharge: rule.minRecharge,
+          minConsume: rule.minConsume,
+          minHostingIncome: rule.minHostingIncome,
+          minHostingInstances: rule.minHostingInstances,
+          benefits: rule.benefits as Prisma.InputJsonObject
+        }
+      })
+    }
+  })
+
+  if (metricToSave) {
+    invalidateCachedConfig(USER_VIP_METRIC_CONFIG_KEY)
+  }
+
+  return getVipRules(type)
+}
+
+export async function getUserVipStats(userId: number, client: DbClient = prisma): Promise<UserVipStats> {
+  const [consumeMap, rechargeResult] = await Promise.all([
+    getUsersTotalConsumeMap([userId], client),
+    client.rechargeRecord.aggregate({
+      where: { userId, status: 'completed' },
+      _sum: { amount: true }
+    })
+  ])
+
+  return {
+    totalConsume: consumeMap.get(userId) || 0,
+    totalRecharge: toNumber(rechargeResult._sum.amount)
+  }
+}
+
+export async function getHostingVipStats(userId: number, client: DbClient = prisma): Promise<HostingVipStats> {
+  const [incomeResult, instanceCount] = await Promise.all([
+    client.hostingBalanceLog.aggregate({
+      where: { userId, type: 'income' },
+      _sum: { amount: true }
+    }),
+    client.instance.count({
+      where: {
+        host: { userId },
+        status: { not: 'deleted' }
+      }
+    })
+  ])
+
+  return {
+    totalHostingIncome: toNumber(incomeResult._sum.amount),
+    instanceCount
+  }
+}
+
+export async function calculateUserVipLevel(userId: number): Promise<{ level: number; stats: UserVipStats }> {
+  const [rules, stats, userMetric] = await Promise.all([
+    getVipRules('user'),
+    getUserVipStats(userId),
+    getUserVipMetric()
+  ])
+  return {
+    level: calculateUserVipLevelByMetric(rules, stats, userMetric),
+    stats
+  }
+}
+
+export async function calculateHostingVipLevel(userId: number): Promise<{ level: number; stats: HostingVipStats }> {
+  const [rules, stats] = await Promise.all([
+    getVipRules('hosting'),
+    getHostingVipStats(userId)
+  ])
+  return {
+    level: calculateVipLevel('hosting', rules, stats),
+    stats
+  }
+}
+
+export async function getVipOverview(userId: number): Promise<VipOverview> {
+  const [userRules, hostingRules, userStats, hostingStats, userVipMetric] = await Promise.all([
+    getVipRules('user'),
+    getVipRules('hosting'),
+    getUserVipStats(userId),
+    getHostingVipStats(userId),
+    getUserVipMetric()
+  ])
+
+  const userVipLevel = calculateUserVipLevelByMetric(userRules, userStats, userVipMetric)
+  const hostingVipLevel = calculateVipLevel('hosting', hostingRules, hostingStats)
+
+  return {
+    userVipLevel,
+    hostingVipLevel,
+    userVipBadgeStyle: getVipBadgeStyleForLevel(userRules, 'user', userVipLevel),
+    hostingVipBadgeStyle: getVipBadgeStyleForLevel(hostingRules, 'hosting', hostingVipLevel),
+    userVipMetric,
+    userStats,
+    hostingStats,
+    userVipProgress: calculateVipProgress('user', userRules, userVipLevel, userStats, userVipMetric),
+    hostingVipProgress: calculateVipProgress('hosting', hostingRules, hostingVipLevel, hostingStats)
+  }
+}
+
+export function buildHostingVipSql(rules: NormalizedVipRule[]): Prisma.Sql {
+  const orderedRules = rules
+    .filter(rule => rule.enabled && hasActiveCondition('hosting', rule))
+    .sort((a, b) => b.level - a.level)
+
+  if (orderedRules.length === 0) {
+    return Prisma.sql`"id" * 0`
+  }
+
+  const cases = orderedRules.map((rule) => {
+    const conditions: Prisma.Sql[] = []
+    if (hasThreshold(rule.minHostingIncome)) {
+      conditions.push(Prisma.sql`"totalHostingIncome" >= ${rule.minHostingIncome}`)
+    }
+    if (hasThreshold(rule.minHostingInstances)) {
+      conditions.push(Prisma.sql`"instanceCount" >= ${rule.minHostingInstances}`)
+    }
+
+    const conditionSql = rule.conditionMode === 'all'
+      ? Prisma.join(conditions, ' AND ')
+      : Prisma.join(conditions, ' OR ')
+
+    return Prisma.sql`WHEN ${conditionSql} THEN ${rule.level}`
+  })
+
+  return Prisma.sql`CASE ${Prisma.join(cases, ' ')} ELSE 0 END`
+}
diff --git a/server/src/storage/factory.ts b/server/src/storage/factory.ts
new file mode 100644
index 0000000..d53cbdc
--- /dev/null
+++ b/server/src/storage/factory.ts
@@ -0,0 +1,70 @@
+/**
+ * 存储适配器工厂
+ */
+
+import type { StorageConfig } from '@prisma/client'
+import { decryptSensitiveData } from '../lib/security.js'
+import type { IStorageProvider, StorageConfigData } from './types.js'
+import { WebDavProvider } from './providers/WebDavProvider.js'
+import { FtpProvider } from './providers/FtpProvider.js'
+import { SftpProvider } from './providers/SftpProvider.js'
+
+export class StorageFactory {
+    /**
+     * 根据存储配置创建对应的适配器实例
+     */
+    static create(config: StorageConfig): IStorageProvider {
+        // 解密密码
+        const decryptedPassword = config.password
+            ? decryptSensitiveData(config.password)
+            : null
+
+        const secureConfig: StorageConfigData = {
+            type: config.type,
+            host: config.host,
+            port: config.port,
+            username: config.username,
+            password: decryptedPassword,
+            basePath: config.basePath,
+            extra: config.extra as Record<string, unknown> | null
+        }
+
+        switch (config.type) {
+            case 'WEBDAV':
+                return new WebDavProvider(secureConfig)
+            case 'FTP':
+                return new FtpProvider(secureConfig)
+            case 'SFTP':
+                return new SftpProvider(secureConfig)
+            case 'S3':
+                throw new Error('S3 存储暂未实现，敬请期待')
+            default:
+                throw new Error(`未知的存储类型: ${config.type}`)
+        }
+    }
+
+    /**
+     * 测试存储配置连接（不需要保存到数据库）
+     */
+    static async testConnection(config: StorageConfigData): Promise<void> {
+        let provider: IStorageProvider
+
+        switch (config.type) {
+            case 'WEBDAV':
+                provider = new WebDavProvider(config)
+                break
+            case 'FTP':
+                provider = new FtpProvider(config)
+                break
+            case 'SFTP':
+                provider = new SftpProvider(config)
+                break
+            case 'S3':
+                throw new Error('S3 存储暂未实现，敬请期待')
+            default:
+                throw new Error(`未知的存储类型: ${config.type}`)
+        }
+
+        await provider.testConnection()
+    }
+}
diff --git a/server/src/storage/index.ts b/server/src/storage/index.ts
new file mode 100644
index 0000000..ad78a62
--- /dev/null
+++ b/server/src/storage/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 存储模块导出
+ */
+
+export * from './types.js'
+export * from './factory.js'
+export { WebDavProvider } from './providers/WebDavProvider.js'
+export { FtpProvider } from './providers/FtpProvider.js'
+export { SftpProvider } from './providers/SftpProvider.js'
diff --git a/server/src/storage/providers/FtpProvider.ts b/server/src/storage/providers/FtpProvider.ts
new file mode 100644
index 0000000..8c965dd
--- /dev/null
+++ b/server/src/storage/providers/FtpProvider.ts
@@ -0,0 +1,98 @@
+/**
+ * FTP 存储适配器
+ */
+
+import * as ftp from 'basic-ftp'
+import { Readable } from 'stream'
+import type { IStorageProvider, StorageConfigData } from '../types.js'
+import { assertSafeStorageTarget } from '../../lib/outbound-security.js'
+
+// FTP 超时配置（6小时，适合大型备份）
+const FTP_TIMEOUT = 6 * 60 * 60 * 1000
+
+export class FtpProvider implements IStorageProvider {
+    private config: StorageConfigData
+    private basePath: string
+
+    constructor(config: StorageConfigData) {
+        this.config = config
+        this.basePath = config.basePath?.endsWith('/')
+            ? config.basePath
+            : `${config.basePath || ''}/`
+    }
+
+    private async getClient(): Promise<ftp.Client> {
+        await assertSafeStorageTarget('FTP', this.config.host)
+        const client = new ftp.Client(FTP_TIMEOUT)
+        client.ftp.verbose = false
+
+        await client.access({
+            host: this.config.host.replace(/^ftp:\/\//, ''),
+            port: this.config.port || 21,
+            user: this.config.username || 'anonymous',
+            password: this.config.password || '',
+            secure: false  // 普通 FTP
+        })
+
+        return client
+    }
+
+    async uploadStream(fileStream: Readable, filename: string): Promise<void> {
+        const client = await this.getClient()
+
+        try {
+            // 确保目录存在
+            if (this.basePath && this.basePath !== '/') {
+                await client.ensureDir(this.basePath)
+            }
+
+            // 上传文件
+            const remotePath = this.basePath + filename
+            await client.uploadFrom(fileStream, remotePath)
+        } finally {
+            client.close()
+        }
+    }
+
+    async testConnection(): Promise<void> {
+        const client = await this.getClient()
+
+        try {
+            // 尝试列出目录来测试连接
+            await client.list('/')
+        } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            throw new Error(`FTP 连接测试失败: ${message}`)
+        } finally {
+            client.close()
+        }
+    }
+
+    async deleteFile(filename: string): Promise<void> {
+        const client = await this.getClient()
+
+        try {
+            const remotePath = this.basePath + filename
+            await client.remove(remotePath)
+        } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            throw new Error(`删除文件失败: ${message}`)
+        } finally {
+            client.close()
+        }
+    }
+
+    async listFiles(path?: string): Promise<string[]> {
+        const client = await this.getClient()
+
+        try {
+            const targetPath = path || this.basePath
+            const list = await client.list(targetPath)
+            return list.map(item => item.name)
+        } catch {
+            return []
+        } finally {
+            client.close()
+        }
+    }
+}
diff --git a/server/src/storage/providers/SftpProvider.ts b/server/src/storage/providers/SftpProvider.ts
new file mode 100644
index 0000000..7498c25
--- /dev/null
+++ b/server/src/storage/providers/SftpProvider.ts
@@ -0,0 +1,104 @@
+/**
+ * SFTP 存储适配器
+ */
+
+import SftpClient from 'ssh2-sftp-client'
+import { Readable } from 'stream'
+import type { IStorageProvider, StorageConfigData } from '../types.js'
+import { assertSafeStorageTarget } from '../../lib/outbound-security.js'
+
+// SFTP 超时配置（6小时，适合大型备份）
+const SFTP_TIMEOUT = 6 * 60 * 60 * 1000
+
+export class SftpProvider implements IStorageProvider {
+    private config: StorageConfigData
+    private basePath: string
+
+    constructor(config: StorageConfigData) {
+        this.config = config
+        this.basePath = config.basePath?.endsWith('/')
+            ? config.basePath
+            : `${config.basePath || ''}/`
+    }
+
+    private async getClient(): Promise<SftpClient> {
+        await assertSafeStorageTarget('SFTP', this.config.host)
+        const client = new SftpClient()
+
+        await client.connect({
+            host: this.config.host.replace(/^sftp:\/\//, ''),
+            port: this.config.port || 22,
+            username: this.config.username || '',
+            password: this.config.password || '',
+            // 大文件上传需要更长的超时时间
+            readyTimeout: SFTP_TIMEOUT,
+            retries: 3,
+            retry_minTimeout: 2000
+        })
+
+        return client
+    }
+
+    async uploadStream(fileStream: Readable, filename: string): Promise<void> {
+        const client = await this.getClient()
+
+        try {
+            // 确保目录存在
+            if (this.basePath && this.basePath !== '/') {
+                try {
+                    await client.mkdir(this.basePath, true)
+                } catch {
+                    // 目录可能已存在
+                }
+            }
+
+            // 上传文件
+            const remotePath = this.basePath + filename
+            await client.put(fileStream, remotePath)
+        } finally {
+            await client.end()
+        }
+    }
+
+    async testConnection(): Promise<void> {
+        const client = await this.getClient()
+
+        try {
+            // 尝试列出根目录来测试连接
+            await client.list('/')
+        } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            throw new Error(`SFTP 连接测试失败: ${message}`)
+        } finally {
+            await client.end()
+        }
+    }
+
+    async deleteFile(filename: string): Promise<void> {
+        const client = await this.getClient()
+
+        try {
+            const remotePath = this.basePath + filename
+            await client.delete(remotePath)
+        } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            throw new Error(`删除文件失败: ${message}`)
+        } finally {
+            await client.end()
+        }
+    }
+
+    async listFiles(path?: string): Promise<string[]> {
+        const client = await this.getClient()
+
+        try {
+            const targetPath = path || this.basePath
+            const list = await client.list(targetPath)
+            return list.map(item => item.name)
+        } catch {
+            return []
+        } finally {
+            await client.end()
+        }
+    }
+}
diff --git a/server/src/storage/providers/WebDavProvider.ts b/server/src/storage/providers/WebDavProvider.ts
new file mode 100644
index 0000000..7ea5091
--- /dev/null
+++ b/server/src/storage/providers/WebDavProvider.ts
@@ -0,0 +1,97 @@
+/**
+ * WebDAV 存储适配器
+ */
+
+import { createClient, WebDAVClient } from 'webdav'
+import { Readable } from 'stream'
+import type { IStorageProvider, StorageConfigData } from '../types.js'
+import { assertSafeStorageTarget } from '../../lib/outbound-security.js'
+
+export class WebDavProvider implements IStorageProvider {
+    private client: WebDAVClient
+    private basePath: string
+    private rawHost: string
+
+    constructor(config: StorageConfigData) {
+        // 构建 WebDAV URL
+        const port = config.port ? `:${config.port}` : ''
+        const baseUrl = config.host.includes('://')
+            ? `${config.host}${port}`
+            : `https://${config.host}${port}`
+
+        this.rawHost = config.host
+
+        this.basePath = config.basePath?.endsWith('/')
+            ? config.basePath
+            : `${config.basePath || ''}/`
+
+        this.client = createClient(baseUrl, {
+            username: config.username || undefined,
+            password: config.password || undefined,
+            // 大文件上传需要更长的超时时间
+            maxBodyLength: Infinity,
+            maxContentLength: Infinity
+        })
+    }
+
+    async uploadStream(fileStream: Readable, filename: string): Promise<void> {
+        await assertSafeStorageTarget('WEBDAV', this.rawHost)
+        const remotePath = this.basePath + filename
+
+        // 确保目录存在
+        try {
+            const dirExists = await this.client.exists(this.basePath)
+            if (!dirExists) {
+                await this.client.createDirectory(this.basePath, { recursive: true })
+            }
+        } catch {
+            // 忽略目录创建错误，可能已存在
+        }
+
+        // 使用 putFileContents 的流模式
+        const writeStream = this.client.createWriteStream(remotePath)
+
+        return new Promise((resolve, reject) => {
+            fileStream.pipe(writeStream)
+            writeStream.on('finish', resolve)
+            writeStream.on('error', reject)
+            fileStream.on('error', reject)
+        })
+    }
+
+    async testConnection(): Promise<void> {
+        try {
+            await assertSafeStorageTarget('WEBDAV', this.rawHost)
+            // 尝试获取根目录内容来测试连接
+            await this.client.getDirectoryContents('/')
+        } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            throw new Error(`WebDAV 连接测试失败: ${message}`)
+        }
+    }
+
+    async deleteFile(filename: string): Promise<void> {
+        await assertSafeStorageTarget('WEBDAV', this.rawHost)
+        const remotePath = this.basePath + filename
+        try {
+            await this.client.deleteFile(remotePath)
+        } catch (err) {
+            const message = err instanceof Error ? err.message : String(err)
+            throw new Error(`删除文件失败: ${message}`)
+        }
+    }
+
+    async listFiles(path?: string): Promise<string[]> {
+        await assertSafeStorageTarget('WEBDAV', this.rawHost)
+        const targetPath = path || this.basePath
+        try {
+            const contents = await this.client.getDirectoryContents(targetPath)
+            if (Array.isArray(contents)) {
+                return contents.map(item => item.basename)
+            }
+            return []
+        } catch {
+            return []
+        }
+    }
+}
diff --git a/server/src/storage/types.ts b/server/src/storage/types.ts
new file mode 100644
index 0000000..d5572b4
--- /dev/null
+++ b/server/src/storage/types.ts
@@ -0,0 +1,51 @@
+/**
+ * 存储适配器接口定义
+ */
+
+import { Readable } from 'stream'
+
+export interface IStorageProvider {
+    /**
+     * 上传流到远程存储
+     * @param fileStream 文件流
+     * @param filename 远程文件名
+     */
+    uploadStream(fileStream: Readable, filename: string): Promise<void>
+
+    /**
+     * 测试连接
+     */
+    testConnection(): Promise<void>
+
+    /**
+     * 删除文件（用于回滚）
+     * @param filename 远程文件名
+     */
+    deleteFile(filename: string): Promise<void>
+
+    /**
+     * 列出目录文件（可选）
+     * @param path 目录路径
+     */
+    listFiles?(path?: string): Promise<string[]>
+}
+
+export interface StorageConfigData {
+    type: 'S3' | 'WEBDAV' | 'FTP' | 'SFTP'
+    host: string
+    port?: number | null
+    username?: string | null
+    password?: string | null  // 已解密的密码
+    basePath?: string | null
+    extra?: Record<string, unknown> | null
+}
+
+// S3 扩展配置（预留）
+export interface S3ExtraConfig {
+    bucket: string
+    region: string
+    accessKeyId: string
+    secretAccessKey: string  // 已解密
+    endpoint?: string  // 自定义端点（如 MinIO）
+    forcePathStyle?: boolean
+}
diff --git a/server/src/types/api.ts b/server/src/types/api.ts
new file mode 100644
index 0000000..75ae8da
--- /dev/null
+++ b/server/src/types/api.ts
@@ -0,0 +1,324 @@
+/**
+ * API 请求/响应类型定义
+ */
+
+import type { User, Instance, Host, Package } from './database.js'
+
+// ==================== 认证相关 ====================
+
+export interface LoginRequest {
+  username: string
+  password: string
+}
+
+export interface LoginResponse {
+  token: string
+  user: {
+    id: number
+    username: string
+    email: string
+    role: 'admin' | 'user'
+    avatarStyle?: string
+    avatarBadgeId?: string | null
+  }
+}
+
+export interface RegisterRequest {
+  username: string
+  email: string
+  password: string
+  inviteCode?: string
+}
+
+export interface RegisterResponse {
+  token: string
+  user: {
+    id: number
+    username: string
+    email: string
+    role: 'admin' | 'user'
+    avatarStyle?: string
+    avatarBadgeId?: string | null
+  }
+}
+
+// ==================== 用户相关 ====================
+
+export interface CreateUserRequest {
+  username: string
+  email: string
+  password: string
+  role?: 'admin' | 'user'
+}
+
+export interface UpdateUserRequest {
+  email?: string
+  role?: 'admin' | 'user'
+  status?: 'active' | 'banned'
+  emailCode?: string
+}
+
+// ==================== 实例相关 ====================
+
+export interface CreateInstanceRequest {
+  name: string
+  packageId: number
+  planId?: number  // 付费方案ID（付费套餐必填）
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+  hostId: number
+  sshKeyId: number
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+}
+
+export interface UpdateInstanceRequest {
+  name?: string
+  cpu?: number
+  memory?: number
+  disk?: number
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+}
+
+export interface InstanceWithDetails extends Instance {
+  user?: Pick<User, 'id' | 'username' | 'email'>
+  host?: Pick<Host, 'id' | 'name' | 'location'>
+  package?: Pick<Package, 'id' | 'name'>
+}
+
+// ==================== 节点相关 ====================
+
+export interface CreateHostRequest {
+  name: string
+  url: string
+  location?: string
+  countryCode?: string
+  tags?: string[]
+  certPath?: string
+  keyPath?: string
+  natConfig?: {
+    publicIp?: string
+    publicIpv6?: string
+    bindIp?: string
+    bindIpv6?: string
+    portRangeStart?: number
+    portRangeEnd?: number
+  }
+  ipAddress?: string
+  storageDriver?: 'zfs' | 'lvm'
+  storageType?: 'loop' | 'disk'
+  storagePath?: string
+  storageSize?: number
+  ipv6Mode?: number
+  ipv6Subnet?: string
+  ipv6Gateway?: string
+  ipv6ParentInterface?: string
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+}
+
+export interface UpdateHostRequest {
+  name?: string
+  url?: string
+  location?: string
+  countryCode?: string
+  status?: 'online' | 'offline' | 'maintenance'
+  certPath?: string
+  keyPath?: string
+  cpuAllowanceMax?: number
+  memoryMax?: number
+  instanceType?: 'container' | 'vm' | 'both'
+  ipv6ParentInterface?: string
+  ipv6Subnet?: string
+  trafficResetDay?: number  // 流量重置日（1-28�?
+  notifyPurchase?: boolean
+  notifyRenew?: boolean
+  notifyDestroy?: boolean
+  transferEnabled?: boolean
+  enableResourcePool?: boolean
+  announcement?: string | null
+  probeUrl?: string | null
+  natConfig?: {
+    publicIp?: string
+    publicIpv6?: string
+    bindIp?: string
+    bindIpv6?: string
+    portRangeStart?: number | null
+    portRangeEnd?: number | null
+  }
+}
+// ==================== 套餐相关 ====================
+
+export interface CreatePackageRequest {
+  name: string
+  description?: string
+  cpuMax: number
+  memoryMax: number
+  diskMax: number
+  bandwidthMax?: number
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'  // 实例类型
+  hostIds?: number[]
+  hostStoragePools?: Record<string, string | null>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  // 套餐资源限制
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  monthlyTrafficLimit?: string | null
+  // 存储 I/O 限制
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  // 网络限制
+  limitsIngress?: string
+  limitsEgress?: string
+  // 进程与调�?
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  // 启动配置
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  // 全局共享配置
+  globalShared?: boolean
+  globalQuotaMultiplier?: number | null  // 配额倍数限制，如 0.5, 1.0, 1.5, 2.0，null 表示无限制（1x�?
+  globalMaxInstances?: number | null  // 全局共享的最大实例数，null 表示无限�?
+  // 实例操作权限
+  allowInstanceDeletion?: boolean  // 是否允许用户删除实例
+}
+
+export interface UpdatePackageRequest {
+  name?: string
+  description?: string
+  cpuMax?: number
+  memoryMax?: number
+  diskMax?: number
+  bandwidthMax?: number
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instanceType?: 'container' | 'vm'  // 实例类型
+  hostIds?: number[]
+  hostStoragePools?: Record<string, string | null>
+  privileged?: boolean
+  nested?: boolean
+  active?: boolean
+  // 套餐资源限制
+  portLimit?: number
+  snapshotLimit?: number
+  backupLimit?: number
+  siteLimit?: number
+  monthlyTrafficLimit?: string | null
+  // 存储 I/O 限制
+  ioLimitMode?: 'throughput' | 'iops'
+  limitsRead?: string
+  limitsWrite?: string
+  limitsReadIops?: number
+  limitsWriteIops?: number
+  // 网络限制
+  limitsIngress?: string
+  limitsEgress?: string
+  // 进程与调�?
+  limitsProcesses?: number
+  limitsCpuPriority?: number
+  // 启动配置
+  bootAutostart?: boolean
+  bootAutostartPriority?: number
+  bootAutostartDelay?: number
+  bootHostShutdownTimeout?: number
+  // 全局共享配置
+  globalShared?: boolean
+  globalQuotaMultiplier?: number | null  // 配额倍数限制，如 0.5, 1.0, 1.5, 2.0，null 表示无限制（1x�?
+  globalMaxInstances?: number | null  // 全局共享的最大实例数，null 表示无限�?
+  // 实例操作权限
+  allowInstanceDeletion?: boolean  // 是否允许用户删除实例
+}
+
+export interface InstanceConfig {
+  limits_read: string
+  limits_write: string
+  limits_read_iops: number
+  limits_write_iops: number
+  limits_ingress: string
+  limits_egress: string
+  limits_processes: number
+  limits_cpu_priority: number
+  boot_autostart: boolean
+  boot_autostart_priority: number
+  boot_autostart_delay: number
+  boot_host_shutdown_timeout: number
+}
+
+export interface InstanceSwapConfig {
+  available: boolean
+  enabled: boolean
+  sizeMb: number
+  kind: 'container' | 'vm'
+  requiresRunning: boolean
+}
+
+export interface InstanceConfigResponse {
+  config: InstanceConfig
+  overrides: Record<keyof InstanceConfig, boolean>
+  packageDefaults: InstanceConfig
+  ioLimitMode: 'throughput' | 'iops'
+  swap: InstanceSwapConfig
+}
+
+// 实例配置覆盖请求
+export interface UpdateInstanceConfigRequest {
+  limitsRead?: string | null
+  limitsWrite?: string | null
+  limitsReadIops?: number | null
+  limitsWriteIops?: number | null
+  limitsIngress?: string | null
+  limitsEgress?: string | null
+  limitsProcesses?: number | null
+  limitsCpuPriority?: number | null
+  bootAutostart?: boolean | null
+  bootAutostartPriority?: number | null
+  bootAutostartDelay?: number | null
+  bootHostShutdownTimeout?: number | null
+}
+
+// ==================== 快照/备份 ====================
+
+export interface CreateSnapshotRequest {
+  name: string
+  description?: string
+}
+
+export interface CreateBackupRequest {
+  name: string
+  description?: string
+}
+
+// ==================== 通用响应 ====================
+
+export interface ApiResponse<T = unknown> {
+  success: boolean
+  data?: T
+  error?: string
+  message?: string
+}
+
+export interface PaginatedResponse<T> {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
diff --git a/server/src/types/database.ts b/server/src/types/database.ts
new file mode 100644
index 0000000..d290c08
--- /dev/null
+++ b/server/src/types/database.ts
@@ -0,0 +1,395 @@
+/**
+ * 数据库行类型定义
+ * 对应 SQLite 数据库中的表结构
+ */
+
+// ==================== 用户相关 ====================
+
+export interface User {
+  id: number
+  username: string
+  email: string | null
+  password_hash: string
+  role: 'admin' | 'user'
+  status: 'active' | 'banned'
+  ban_reason: string | null  // 封禁原因
+  avatar_style: string
+  avatar_badge_id?: string | null
+  has_created_host_before?: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface UserQuota {
+  id: number
+  user_id: number
+  // 新配额系统：控制用户可拥有的资源数量
+  // 默认值为 0，表示功能未开放，需要管理员授权才能使用
+  // 注意：不再限制实例配额，用户可以创建无限数量的实例
+  host_limit: number      // 宿主机数量上限（0 = 未授权）
+  host_used: number       // 已使用宿主机数量
+  friend_limit: number    // 好友数量上限（0 = 未授权）
+  friend_used: number     // 已使用好友数量
+  package_limit: number   // 套餐数量上限（0 = 未授权）
+  package_used: number    // 已使用套餐数量
+  // 流量配额
+  monthly_traffic_limit: bigint | null
+  monthly_traffic_used: bigint
+  extra_traffic_quota: bigint
+  traffic_status: TrafficStatus
+}
+
+export interface InviteCode {
+  id: number
+  code: string
+  created_by: number
+  used_by: number | null
+  used_at: string | null
+  expires_at: string | null
+  cost_snapshot?: unknown
+  created_at: string
+}
+
+export interface SshKey {
+  id: number
+  user_id: number
+  name: string
+  public_key: string
+  fingerprint: string
+  created_at: string
+}
+
+// ==================== 节点相关 ====================
+
+export interface Host {
+  id: number
+  user_id?: number  // 节点所有者
+  name: string
+  url: string
+  location: string | null
+  country_code: string
+  architecture?: 'x86_64' | 'aarch64'
+  status: 'online' | 'offline' | 'maintenance'
+  cert_path: string | null
+  key_path: string | null
+  nat_public_ip: string | null
+  nat_public_ipv6?: string | null
+  nat_bind_ip?: string | null
+  nat_bind_ipv6?: string | null
+  nat_port_start: number | null
+  nat_port_end: number | null
+  cpu_used: number
+  memory_used: number
+  disk_total?: number   // 计算值，来自 storage_size * 1024
+  disk_used: number
+  ip_address?: string | null
+  storage_driver?: string
+  storage_type?: string
+  storage_path?: string | null
+  storage_size?: number
+  ipv6_mode?: number
+  ipv6_subnet?: string | null
+  ipv6_gateway?: string | null
+  ipv6_parent_interface?: string | null
+  enable_api?: boolean
+  sysctl_config?: string | null
+  cpu_allowance_max?: number
+  memory_max?: number
+  instance_type?: 'container' | 'vm' | 'both'
+  nat_ports_used_count?: number
+  tags?: string[]
+  // Caddy 反代配置
+  caddy_enabled?: boolean
+  caddy_username?: string | null
+  caddy_password?: string | null
+  caddy_port?: number
+  // 转移控制
+  transfer_enabled?: boolean
+  // 流量配置
+  traffic_reset_day?: number  // 流量重置日（1-28），默认1号
+  // 节点通知设置
+  notify_purchase?: boolean
+  notify_renew?: boolean
+  notify_destroy?: boolean
+  // 资源池玩法
+  enable_resource_pool?: boolean  // 是否参与资源池玩法
+  // 节点公告
+  announcement?: string | null
+  // 探针地址
+  probe_url?: string | null
+  created_at: string
+  updated_at: string
+}
+
+// ==================== 套餐相关 ====================
+
+export interface Package {
+  id: number
+  user_id?: number  // 套餐所有者
+  name: string
+  description: string | null
+  cpu_max: number
+  memory_max: number
+  disk_max: number
+  bandwidth_max: number | null
+  network_mode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  instance_type: 'container' | 'vm' | 'both'  // 实例类型 (套餐实际不会使用 both)
+  privileged: number
+  nested: number
+  active: number
+  // 套餐资源限制
+  port_limit: number        // 端口映射数上限
+  snapshot_limit: number    // 快照数上限
+  backup_limit: number      // 备份数上限
+  site_limit: number        // 反代站点数上限
+  monthly_traffic_limit: string | null  // BigInt as string
+  // 存储 I/O 限制
+  io_limit_mode: string     // "throughput" | "iops" - IO限制模式
+  limits_read: string       // 磁盘读取吞吐限制
+  limits_write: string      // 磁盘写入吞吐限制
+  limits_read_iops: number  // 磁盘读取 IOPS
+  limits_write_iops: number // 磁盘写入 IOPS
+  // 网络限制
+  limits_ingress: string    // 网络入站带宽
+  limits_egress: string     // 网络出站带宽
+  // 进程与调度
+  limits_processes: number  // 进程数限制
+  limits_cpu_priority: number // CPU 调度优先级 (0-10)
+  // 启动配置
+  boot_autostart: boolean   // 开机自启
+  boot_autostart_priority: number // 启动优先级 (0-100)
+  boot_autostart_delay: number    // 启动延迟 (5-600秒)
+  boot_host_shutdown_timeout: number // 关机超时 (30-600秒)
+  // 全局共享配置（可选字段，仅当有值时存在）
+  global_shared?: boolean
+  global_quota_multiplier?: number | null
+  global_max_instances?: number | null
+  required_package_id?: number | null
+  required_package_name?: string | null
+  // 实例操作权限
+  allow_instance_deletion?: boolean  // 是否允许用户删除实例
+  host_storage_pools?: Record<string, string | null>
+  // 补货/释放通知渠道 ID（绑定的全局渠道或私有渠道）
+  release_channel_id?: number | null
+  created_at: string
+}
+
+// ==================== 实例相关 ====================
+
+export type InstanceStatus = 'creating' | 'running' | 'stopped' | 'suspended' | 'error' | 'deleted'
+
+export interface Instance {
+  id: number
+  incus_id: string
+  name: string
+  user_id: number
+  host_id: number
+  package_id: number | null
+  package_plan_id: number | null  // 套餐方案 ID：null 表示免费实例
+  display_order?: number
+  storage_pool_name?: string | null
+  image: string
+  status: InstanceStatus
+  cpu: number
+  memory: number
+  disk: number
+  ipv4: string | null
+  ipv6: string | null
+  network_mode: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  ssh_port: number | null
+  root_password: string | null
+  port_limit: number | null
+  snapshot_limit: number | null
+  backup_limit: number | null
+  site_limit: number | null
+  swap_enabled: boolean
+  swap_size: number | null
+  monthly_traffic_limit: string | null  // BigInt as string (Bytes)
+  // 存储 I/O 限制 (null = 继承套餐)
+  limits_read: string | null
+  limits_write: string | null
+  limits_read_iops: number | null
+  limits_write_iops: number | null
+  // 网络限制
+  limits_ingress: string | null
+  limits_egress: string | null
+  // 进程与调度
+  limits_processes: number | null
+  limits_cpu_priority: number | null
+  // 启动配置
+  boot_autostart: boolean | null
+  boot_autostart_priority: number | null
+  boot_autostart_delay: number | null
+  boot_host_shutdown_timeout: number | null
+  // 计费与封停相关字段
+  expires_at: string | null        // 到期时间，null 表示免费实例（永不到期）
+  suspended_at: string | null      // 封停时间
+  suspended_by: number | null      // 封停操作者 ID，null 表示系统自动封停
+  suspend_reason: string | null    // 封停原因
+  icon_badge_id?: string | null
+  cloud_init_state?: string | null
+  cloud_init_source?: string | null
+  cloud_init_last_checked_at?: string | null
+  cloud_init_completed_at?: string | null
+  cloud_init_manual_completed_at?: string | null
+  cloud_init_manual_completed_by?: number | null
+  created_at: string
+  updated_at: string
+}
+
+export interface PortMapping {
+  id: number
+  instance_id: number
+  host_id: number
+  protocol: 'tcp' | 'udp'
+  public_port: number
+  private_port: number
+  remark: string | null
+  created_at: string
+}
+
+// ==================== 快照/备份 ====================
+
+export interface Snapshot {
+  id: number
+  instance_id: number
+  incus_name: string
+  name: string
+  description: string | null
+  stateful: number
+  size: number
+  created_at: string
+}
+
+export interface Backup {
+  id: number
+  instance_id: number
+  incus_name: string
+  name: string
+  description: string | null
+  size: number
+  status: 'creating' | 'ready' | 'error' | 'deleted'
+  created_at: string
+  expires_at: string | null
+}
+
+export interface BackupPolicy {
+  id: number
+  instance_id: number
+  enabled: number
+  interval_hours: number
+  retention_count: number
+  last_run_at: string | null
+  next_run_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface SnapshotPolicy {
+  id: number
+  instance_id: number
+  enabled: number
+  interval_hours: number
+  retention_count: number
+  last_run_at: string | null
+  next_run_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+// ==================== 通知相关 ====================
+
+export interface NotificationChannel {
+  id: number
+  user_id: number
+  type: 'telegram' | 'discord' | 'email' | 'webhook'
+  name: string
+  config: string
+  enabled: number
+  created_at: string
+}
+
+export interface NotificationLog {
+  id: number
+  channel_id: number
+  event_type: string
+  message: string
+  status: 'pending' | 'sent' | 'failed'
+  error: string | null
+  created_at: string
+}
+
+// ==================== OAuth 相关 ====================
+
+export interface OAuthConfig {
+  id: number
+  provider: 'github' | 'google'
+  client_id: string
+  client_secret: string
+  enabled: number
+  created_at: string
+  updated_at: string
+}
+
+export interface UserOAuthBinding {
+  id: number
+  user_id: number
+  provider: 'github' | 'google'
+  provider_user_id: string
+  provider_username: string | null
+  provider_email: string | null
+  provider_avatar: string | null
+  access_token: string | null
+  refresh_token: string | null
+  created_at: string
+  updated_at: string
+}
+
+// ==================== 帮助文档 ====================
+
+export interface HelpArticle {
+  id: number
+  title: string
+  slug: string
+  content: string
+  category: string
+  sort_order: number
+  published: number
+  pinned: number  // 是否置顶（0 = 否，1 = 是）
+  created_by: number | null
+  created_at: string
+  updated_at: string
+}
+
+// ==================== 日志 ====================
+
+export interface Log {
+  id: number
+  user_id: number | null
+  instance_id: number | null
+  module: string
+  action: string
+  content: string
+  result: string
+  created_at: string
+}
+
+// ==================== 流量统计 ====================
+
+export type TrafficStatus = 'NORMAL' | 'WARNING' | 'LIMITED'
+
+export interface TrafficSnapshot {
+  id: number
+  instance_id: number
+  rx_raw: bigint
+  tx_raw: bigint
+  updated_at: string
+}
+
+export interface DailyTraffic {
+  id: number
+  instance_id: number
+  date: string
+  rx_total: bigint
+  tx_total: bigint
+}
diff --git a/server/src/types/fastify.d.ts b/server/src/types/fastify.d.ts
new file mode 100644
index 0000000..261e258
--- /dev/null
+++ b/server/src/types/fastify.d.ts
@@ -0,0 +1,46 @@
+/**
+ * Fastify 类型扩展
+ */
+
+import type { FastifyRequest, FastifyReply, FastifyInstance } from 'fastify'
+import type { JwtSignPayload } from '@fastify/jwt'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    authenticate: (request: FastifyRequest, reply: FastifyReply) => Promise<void>
+    requireAdmin: (request: FastifyRequest, reply: FastifyReply) => Promise<void>
+    authenticateAdmin: (request: FastifyRequest, reply: FastifyReply) => Promise<void>
+    authenticateUser: (request: FastifyRequest, reply: FastifyReply) => Promise<void>
+  }
+
+  interface FastifyRequest {
+    user: {
+      id: number
+      username: string
+      role: 'admin' | 'user'
+      sid?: string
+      iat?: number
+      exp?: number
+    }
+  }
+}
+
+declare module '@fastify/jwt' {
+  interface FastifyJWT {
+    payload: {
+      id: number
+      username: string
+      role: 'admin' | 'user'
+      sid?: string  // 会话标识，用于会话级别的 token 失效
+    }
+    user: {
+      id: number
+      username: string
+      role: 'admin' | 'user'
+      sid?: string
+      iat?: number
+      exp?: number
+    }
+  }
+}
+
diff --git a/server/src/types/incus.ts b/server/src/types/incus.ts
new file mode 100644
index 0000000..24cb13d
--- /dev/null
+++ b/server/src/types/incus.ts
@@ -0,0 +1,246 @@
+/**
+ * Incus API 类型定义
+ */
+
+export interface IncusClientOptions {
+  url: string
+  certPath: string | null
+  keyPath: string | null
+}
+
+export interface IncusApiResponse<T = unknown> {
+  type: 'sync' | 'async' | 'error'
+  status?: string
+  status_code?: number
+  operation?: string
+  metadata?: T
+  error?: string
+  err?: string
+}
+
+export interface IncusOperation {
+  id: string
+  class: string
+  description?: string
+  created_at: string
+  updated_at: string
+  status: 'Pending' | 'Running' | 'Cancelling' | 'Cancelled' | 'Success' | 'Failure'
+  status_code: number
+  may_cancel?: boolean
+  location?: string
+  resources?: Record<string, unknown>
+  metadata?: Record<string, unknown>
+  err?: string
+  error?: string
+}
+
+export interface IncusInstance {
+  name: string
+  type: 'container' | 'virtual-machine'
+  status: 'Running' | 'Stopped' | 'Frozen' | 'Error' | 'Starting' | 'Stopping'
+  status_code: number
+  state?: {
+    status: string
+    network?: Record<string, {
+      addresses?: Array<{
+        family: 'inet' | 'inet6'
+        address: string
+        netmask?: string
+        scope?: string
+      }>
+    }>
+  }
+  config?: Record<string, string>
+  devices?: Record<string, Record<string, unknown>>
+  expanded_config?: Record<string, string>
+  expanded_devices?: Record<string, Record<string, unknown>>
+}
+
+export interface IncusImage {
+  fingerprint: string
+  filename: string
+  size: number
+  architecture: string
+  created_at: string
+  expires_at: string
+  last_used_at: string
+  uploaded_at: string
+  auto_update: boolean
+  properties?: Record<string, string>
+  aliases?: Array<{ name: string; description: string; target: string }>
+  update_source?: {
+    alias: string
+    certificate: string
+    protocol: string
+    server: string
+  }
+}
+
+export interface IncusImageAlias {
+  name: string
+  description: string
+  target: string
+}
+
+export interface IncusSnapshot {
+  name: string
+  created_at: string
+  stateful: boolean
+  expires_at?: string
+}
+
+export interface IncusBackup {
+  name: string
+  created_at: string
+  expires_at?: string
+  instance_only: boolean
+  optimized_storage: boolean
+  compression_algorithm: string
+}
+
+export interface IncusNetwork {
+  name: string
+  type: string
+  used_by?: string[]
+  config?: Record<string, string>
+}
+
+export interface IncusStoragePool {
+  name: string
+  driver: string
+  status?: string
+  description?: string
+  used_by?: string[]
+  config?: Record<string, string>
+}
+
+export interface IncusServerInfo {
+  api_version: string
+  auth: string
+  auth_methods: string[]
+  config?: Record<string, unknown>
+  environment?: {
+    addresses: string[]
+    architectures: string[]
+    certificate: string
+    driver: string
+    driver_version: string
+    kernel: string
+    kernel_architecture: string
+    kernel_version: string
+    server: string
+    server_pid: number
+    server_version: string
+    storage: string
+    storage_version: string
+  }
+}
+
+export interface IncusResources {
+  cpu?: {
+    total: number
+    sockets: Array<{
+      name: string
+      socket: number
+      vendor: string
+      product: string
+      frequency: number
+      frequency_minimum: number
+      frequency_turbo: number
+    }>
+  }
+  memory?: {
+    total: number
+    used: number
+  }
+  storage?: {
+    pools: Array<{
+      name: string
+      driver: string
+      space?: {
+        used: number
+        total: number
+      }
+    }>
+  }
+}
+
+/**
+ * IPv6 配置结构 (用于双网卡 routed 模式)
+ */
+export interface IPv6Config {
+  /** 主 IP (必须) */
+  primaryIp: string
+  /** 额外 IP 列表 */
+  extraIps?: string[]
+  /** 网段 CIDR (如 "2a01:4f9:c012:e7:aaaa::/112") */
+  subnet?: string
+}
+
+export interface BuildInstanceConfigOptions {
+  name: string
+  image: string
+  cpu: number
+  memory: number
+  disk: number
+  swapEnabled?: boolean
+  swapSize?: number | null
+  networkMode?: 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat'
+  sshKey?: string
+  password?: string
+  nested?: boolean
+  privileged?: boolean
+  cloudInitConfig?: {
+    'user.user-data': string
+    'user.network-config'?: string
+  }
+  // 实例类型: container(容器) 或 vm(虚拟机)
+  instanceType?: 'container' | 'vm'
+  // 存储池名称 (用于 root device)
+  storagePool?: string | null
+  // IP 地址配置 (新双网卡架构)
+  ipv4Address?: string | null     // 内网 IPv4 地址 (随机分配)
+  // IPv6 静态地址配置 (旧方式，保持向后兼容)
+  ipv6Address?: string | null      // 静态 IPv6 地址 (已弃用，使用 ipv6Config)
+  ipv6Gateway?: string | null      // IPv6 网关 (已弃用)
+  networkBridge?: string | null    // NAT 网桥名称 (默认 incusbr0)
+  // IPv6 Routed 模式配置 (新双网卡架构)
+  ipv6Config?: IPv6Config | null   // IPv6 配置 (用于 eth1 routed 模式)
+  hostInterface?: string | null    // 宿主机物理网卡名 (用于 routed 模式)
+  // Advanced configuration options
+  limitsRead?: string | null       // e.g., "100MB"
+  limitsWrite?: string | null      // e.g., "100MB"
+  limitsReadIops?: number | null   // e.g., 500
+  limitsWriteIops?: number | null  // e.g., 500
+  limitsIngress?: string | null    // e.g., "300Mbit"
+  limitsEgress?: string | null     // e.g., "300Mbit"
+  limitsProcesses?: number | null  // e.g., 500
+  limitsCpuPriority?: number | null // 0-10
+  bootAutostart?: boolean | null
+  bootAutostartPriority?: number | null // 0-100
+  bootAutostartDelay?: number | null    // 5-600 seconds
+  bootHostShutdownTimeout?: number | null // 30-600 seconds
+}
+
+export interface PullImageOptions {
+  server?: string
+  protocol?: string
+  autoUpdate?: boolean
+  isPublic?: boolean
+}
+
+export interface CreateBackupOptions {
+  instanceOnly?: boolean
+  optimizedStorage?: boolean
+  compression?: string
+}
+
+export interface ExecOptions {
+  'wait-for-websocket'?: boolean
+  interactive?: boolean
+  environment?: Record<string, string>
+  cwd?: string
+  user?: number
+  group?: number
+}
+
diff --git a/server/src/workers/backupUploadWorker.ts b/server/src/workers/backupUploadWorker.ts
new file mode 100644
index 0000000..5cd965f
--- /dev/null
+++ b/server/src/workers/backupUploadWorker.ts
@@ -0,0 +1,418 @@
+/**
+ * 备份上传任务队列调度器
+ * 确保同一台宿主机同一时间只有一个高 IO 任务在执行
+ */
+
+import { prisma } from '../db/prisma.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import { getBackupExportStream } from '../lib/incus/incus-backups.js'
+import { StorageFactory } from '../storage/factory.js'
+import { sendNotification } from '../lib/notifier.js'
+import { createLog } from '../db/logs.js'
+import { Readable } from 'stream'
+import {
+    HOST_TASK_CLAIM_LOCK_NAMESPACE,
+    INSTANCE_OPERATION_LOCK_NAMESPACE,
+    tryAdvisoryTransactionLock
+} from '../db/advisory-locks.js'
+import { createWorkerDbBackoff } from './db-failure-backoff.js'
+
+// Worker 轮询间隔 (5 秒)
+const POLL_INTERVAL = 5000
+
+// 上传任务超时时间 (30 分钟)
+const UPLOAD_TIMEOUT = 30 * 60 * 1000
+
+// 最大重试次数
+const MAX_RETRY_COUNT = 2
+
+// 重试延迟（毫秒）
+const RETRY_DELAY = 30000
+
+// 超时检查间隔 (1 分钟)
+const TIMEOUT_CHECK_INTERVAL = 60000
+
+let workerInterval: ReturnType<typeof setInterval> | null = null
+let timeoutCheckInterval: ReturnType<typeof setInterval> | null = null
+const dbBackoff = createWorkerDbBackoff('UploadWorker')
+
+/**
+ * 服务启动时清理僵尸任务
+ */
+export async function cleanupStaleUploadTasks(): Promise<void> {
+    const result = await prisma.backupUploadTask.updateMany({
+        where: { status: 'PROCESSING' },
+        data: {
+            status: 'FAILED',
+            error: '系统重启，任务中断',
+            finishedAt: new Date()
+        }
+    })
+    if (result.count > 0) {
+        console.log(`[UploadWorker] 清理了 ${result.count} 个僵尸任务`)
+    }
+}
+
+/**
+ * 运行时检查并清理超时的任务
+ */
+async function cleanupTimeoutUploadTasks(): Promise<void> {
+    if (dbBackoff.shouldSkip()) return
+    const timeoutThreshold = new Date(Date.now() - UPLOAD_TIMEOUT)
+    
+    const result = await prisma.backupUploadTask.updateMany({
+        where: {
+            status: 'PROCESSING',
+            startedAt: { lt: timeoutThreshold }
+        },
+        data: {
+            status: 'FAILED',
+            error: '任务执行超时 (30 分钟)',
+            finishedAt: new Date()
+        }
+    })
+    
+    if (result.count > 0) {
+        console.log(`[UploadWorker] 清理了 ${result.count} 个超时任务`)
+    }
+}
+
+/**
+ * 检查队列并执行任务
+ */
+async function processQueue(): Promise<void> {
+    if (dbBackoff.shouldSkip()) return
+    try {
+        // 1. 获取所有有 PENDING 任务的宿主机 ID (去重)
+        const hostsWithPendingTasks = await prisma.backupUploadTask.groupBy({
+            by: ['hostId'],
+            where: { status: 'PENDING' }
+        })
+
+        for (const group of hostsWithPendingTasks) {
+            const hostId = group.hostId
+
+            // 使用事务原子操作：检查锁 + 获取任务 + 标记为 PROCESSING
+            const claimedTask = await claimNextUploadTask(hostId)
+            
+            if (claimedTask) {
+                // 执行任务 (不 await，让它异步跑)
+                executeUploadTask(claimedTask.id).catch(err => {
+                    console.error(`[UploadWorker] Task ${claimedTask.id} execution error:`, err)
+                })
+            }
+        }
+    } catch (err) {
+        console.error('[UploadWorker] Queue processing error:', err)
+        dbBackoff.arm(err)
+    }
+}
+
+/**
+ * 原子操作：获取并锁定下一个上传任务
+ * 使用事务确保检查锁和获取任务是原子的，防止竞态条件
+ */
+async function claimNextUploadTask(hostId: number) {
+        return await prisma.$transaction(async (tx) => {
+            const locked = await tryAdvisoryTransactionLock(tx, HOST_TASK_CLAIM_LOCK_NAMESPACE, hostId)
+            if (!locked) return null
+
+            // 1. 检查是否有正在执行的上传任务
+            const runningUploadTask = await tx.backupUploadTask.findFirst({
+                where: { hostId, status: 'PROCESSING' }
+            })
+            if (runningUploadTask) return null
+
+            // 2. 检查是否有正在执行的恢复任务（共享锁）
+            const runningRestoreTask = await tx.restoreTask.findFirst({
+                where: { hostId, status: 'PROCESSING' }
+            })
+            if (runningRestoreTask) return null
+
+            // 3. 检查是否有正在执行的实例任务（共享锁）
+            const runningInstanceTask = await tx.instanceTask.findFirst({
+                where: { hostId, status: 'PROCESSING' }
+            })
+            if (runningInstanceTask) return null
+
+            // 4. 获取最早的 PENDING 任务
+            const taskToRun = await tx.backupUploadTask.findFirst({
+                where: { hostId, status: 'PENDING' },
+                orderBy: { createdAt: 'asc' }
+            })
+            if (!taskToRun) return null
+
+            const instanceOperationLocked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, taskToRun.instanceId)
+            if (!instanceOperationLocked) return null
+
+            const instance = await tx.instance.findUnique({
+                where: { id: taskToRun.instanceId },
+                select: { status: true }
+            })
+            if (!instance || instance.status === 'deleted') return null
+
+            // 5. 原子标记为 PROCESSING
+            const claimedTask = await tx.backupUploadTask.update({
+                where: { id: taskToRun.id },
+                data: { status: 'PROCESSING', startedAt: new Date() }
+            })
+
+            return claimedTask
+        })
+}
+
+/**
+ * 检查错误是否可重试
+ * 网络超时、连接失败等临时性错误可以重试
+ */
+function isRetryableError(error: Error): boolean {
+    const message = error.message.toLowerCase()
+    return (
+        message.includes('timeout') ||
+        message.includes('econnreset') ||
+        message.includes('econnrefused') ||
+        message.includes('enotfound') ||
+        message.includes('socket hang up') ||
+        message.includes('network') ||
+        message.includes('connection')
+    )
+}
+
+/**
+ * 更新上传任务进度
+ */
+async function updateUploadProgress(taskId: number, progress: string): Promise<void> {
+    await prisma.backupUploadTask.update({
+        where: { id: taskId },
+        data: { progress }
+    })
+}
+
+/**
+ * 执行单个上传任务
+ * 注意：任务已在 claimNextUploadTask 中标记为 PROCESSING
+ */
+async function executeUploadTask(taskId: number): Promise<void> {
+    const startTime = Date.now()
+    
+    // 获取任务信息（已在事务中标记为 PROCESSING）
+    const task = await prisma.backupUploadTask.findUnique({
+        where: { id: taskId }
+    })
+
+    if (!task) {
+        console.error(`[UploadWorker] Task ${taskId} not found`)
+        return
+    }
+
+    console.log(`[UploadWorker] 开始执行任务 ${taskId}`)
+    
+    const checkTimeout = () => {
+        if (Date.now() - startTime > UPLOAD_TIMEOUT) {
+            throw new Error('上传操作超时 (30 分钟)')
+        }
+    }
+
+    let remoteFileName: string | null = null
+    let provider: ReturnType<typeof StorageFactory.create> | null = null
+
+    try {
+        // 2. 获取相关数据
+        const [instance, backup, host, storageConfig, user] = await Promise.all([
+            prisma.instance.findUnique({ where: { id: task.instanceId } }),
+            prisma.backup.findUnique({ where: { id: task.backupId } }),
+            prisma.host.findUnique({ where: { id: task.hostId } }),
+            prisma.storageConfig.findUnique({ where: { id: task.storageConfigId } }),
+            prisma.user.findUnique({ where: { id: task.userId }, select: { username: true } })
+        ])
+
+        if (!instance) throw new Error('实例不存在')
+        if (instance.status === 'deleted') throw new Error('实例已删除，任务取消')
+        if (!backup) throw new Error('备份不存在')
+        if (!host) throw new Error('宿主机不存在')
+        if (!storageConfig) throw new Error('存储配置不存在')
+
+        // 更新进度: 准备中
+        await updateUploadProgress(taskId, 'preparing')
+
+        // 3. 创建 Incus 客户端
+        const client = await getIncusClient({
+            id: host.id,
+            url: host.url,
+            certPath: host.certPath,
+            keyPath: host.keyPath
+        })
+
+        // 4. 创建存储适配器
+        provider = StorageFactory.create(storageConfig)
+
+        // 5. 生成远程文件名
+        const dateStr = new Date().toISOString()
+            .replace(/[-:]/g, '')
+            .replace('T', '-')
+            .slice(0, 15)
+        const userName = user?.username || 'unknown'
+        // 使用实例的 incusId 作为标识（保证是 ASCII），备份名通常也是 ASCII
+        remoteFileName = `${userName}-${instance.incusId}-${backup.incusName}-${dateStr}.tar.gz`
+            .replace(/[^a-zA-Z0-9\-_.]/g, '_')  // 清理特殊字符
+
+        console.log(`[UploadWorker] Task ${taskId}: 开始上传 ${remoteFileName} 到 ${storageConfig.name}`)
+
+        // 更新进度: 上传中
+        await updateUploadProgress(taskId, 'uploading')
+
+        // 6. 获取备份导出流
+        const { stream, contentLength } = await getBackupExportStream(
+            client,
+            instance.incusId,
+            backup.incusName
+        )
+
+        // 7. 转换为 Node.js 流
+        const nodeStream = Readable.fromWeb(stream as import('stream/web').ReadableStream)
+
+        // 8. 流式上传到远程存储
+        checkTimeout()
+        await provider.uploadStream(nodeStream, remoteFileName)
+        checkTimeout()
+
+        // 更新进度: 完成中
+        await updateUploadProgress(taskId, 'finalizing')
+
+        // 9. 标记成功
+        await prisma.backupUploadTask.update({
+            where: { id: taskId },
+            data: {
+                status: 'COMPLETED',
+                remoteFileName,
+                fileSize: contentLength ? BigInt(contentLength) : null,
+                finishedAt: new Date()
+            }
+        })
+
+        console.log(`[UploadWorker] Task ${taskId}: 上传完成`)
+
+        // 发送通知
+        await sendNotification(task.userId, 'backup_uploaded', {
+            instanceName: instance.name,
+            backupName: backup.name,
+            storageName: storageConfig.name,
+            fileName: remoteFileName,
+            hostName: host.name
+        })
+
+        await createLog(
+            task.userId,
+            'backup',
+            'backup.upload',
+            `Successfully uploaded backup "${backup.name}" to "${storageConfig.name}"`,
+            'success',
+            { instanceId: task.instanceId }
+        )
+
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        console.error(`[UploadWorker] Task ${taskId} failed:`, errorMessage)
+
+        // 尝试清理已上传的文件
+        if (provider && remoteFileName) {
+            try {
+                await provider.deleteFile(remoteFileName)
+                console.log(`[UploadWorker] Task ${taskId}: 已清理远程文件 ${remoteFileName}`)
+            } catch (cleanupErr) {
+                console.warn(`[UploadWorker] Task ${taskId}: 清理远程文件失败:`, cleanupErr)
+            }
+        }
+
+        // 检查是否可以重试
+        const canRetry = err instanceof Error && isRetryableError(err) && task.retryCount < MAX_RETRY_COUNT
+        
+        if (canRetry) {
+            // 重试：增加重试计数，重置为 PENDING 等待下一轮执行
+            console.log(`[UploadWorker] Task ${taskId}: 可重试错误，将在 ${RETRY_DELAY / 1000} 秒后重试 (第 ${task.retryCount + 1}/${MAX_RETRY_COUNT} 次)`)
+            
+            await prisma.backupUploadTask.update({
+                where: { id: taskId },
+                data: {
+                    status: 'PENDING',
+                    retryCount: task.retryCount + 1,
+                    progress: null,
+                    startedAt: null
+                }
+            })
+            
+            // 记录重试日志
+            await createLog(
+                task.userId,
+                'backup',
+                'backup.upload',
+                `Retrying upload (attempt ${task.retryCount + 1}/${MAX_RETRY_COUNT}): ${errorMessage}`,
+                'info',
+                { instanceId: task.instanceId }
+            )
+        } else {
+            // 最终失败
+            await prisma.backupUploadTask.update({
+                where: { id: taskId },
+                data: {
+                    status: 'FAILED',
+                    error: errorMessage,
+                    finishedAt: new Date()
+                }
+            })
+
+            await createLog(
+                task.userId,
+                'backup',
+                'backup.upload',
+                `Failed to upload backup: ${errorMessage}`,
+                'failed',
+                { instanceId: task.instanceId }
+            )
+        }
+    }
+}
+
+/**
+ * 启动备份上传 Worker
+ */
+export function startBackupUploadWorker(): void {
+    if (workerInterval) {
+        console.warn('[UploadWorker] Worker 已在运行')
+        return
+    }
+    console.log('[UploadWorker] 启动备份上传调度器')
+    workerInterval = setInterval(() => {
+        processQueue().catch(err => {
+            console.error('[UploadWorker] 队列处理错误:', err)
+            dbBackoff.arm(err)
+        })
+    }, POLL_INTERVAL)
+    
+    // 启动超时检查定时器
+    if (!timeoutCheckInterval) {
+        timeoutCheckInterval = setInterval(() => {
+            cleanupTimeoutUploadTasks().catch(err => {
+                console.error('[UploadWorker] 超时检查错误:', err)
+                dbBackoff.arm(err)
+            })
+        }, TIMEOUT_CHECK_INTERVAL)
+        console.log('[UploadWorker] 启动超时任务检查器')
+    }
+}
+
+/**
+ * 停止备份上传 Worker
+ */
+export function stopBackupUploadWorker(): void {
+    if (workerInterval) {
+        clearInterval(workerInterval)
+        workerInterval = null
+        console.log('[UploadWorker] 备份上传调度器已停止')
+    }
+    if (timeoutCheckInterval) {
+        clearInterval(timeoutCheckInterval)
+        timeoutCheckInterval = null
+        console.log('[UploadWorker] 超时任务检查器已停止')
+    }
+}
diff --git a/server/src/workers/db-failure-backoff.ts b/server/src/workers/db-failure-backoff.ts
new file mode 100644
index 0000000..42dc9b8
--- /dev/null
+++ b/server/src/workers/db-failure-backoff.ts
@@ -0,0 +1,48 @@
+import { Prisma } from '@prisma/client'
+
+function parsePositiveInt(value: string | undefined, fallback: number): number {
+  const parsed = Number.parseInt(value || '', 10)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback
+}
+
+const DEFAULT_BACKOFF_MS = parsePositiveInt(process.env.DB_WORKER_BACKOFF_MS, 15000)
+
+export function isTransientDatabaseError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false
+
+  const prismaError = error as Error & { code?: string }
+  if (
+    prismaError instanceof Prisma.PrismaClientKnownRequestError &&
+    (prismaError.code === 'P2028' || prismaError.code === 'P2034' || prismaError.code === 'P1001')
+  ) {
+    return true
+  }
+
+  const message = error.message.toLowerCase()
+  return (
+    message.includes('timeout exceeded when trying to connect') ||
+    message.includes('unable to start a transaction in the given time') ||
+    message.includes('too many clients') ||
+    message.includes('remaining connection slots are reserved') ||
+    message.includes('connection terminated unexpectedly') ||
+    message.includes('terminating connection due to administrator command')
+  )
+}
+
+export function createWorkerDbBackoff(label: string, backoffMs: number = DEFAULT_BACKOFF_MS) {
+  let backoffUntil = 0
+
+  return {
+    shouldSkip(): boolean {
+      return Date.now() < backoffUntil
+    },
+    arm(error: unknown): void {
+      if (!isTransientDatabaseError(error)) return
+      backoffUntil = Date.now() + backoffMs
+      console.warn(`[${label}] Database backoff armed for ${backoffMs}ms`)
+    },
+    reset(): void {
+      backoffUntil = 0
+    }
+  }
+}
diff --git a/server/src/workers/hostNotificationEmailWorker.ts b/server/src/workers/hostNotificationEmailWorker.ts
new file mode 100644
index 0000000..c071527
--- /dev/null
+++ b/server/src/workers/hostNotificationEmailWorker.ts
@@ -0,0 +1,109 @@
+import {
+  claimNextHostNotificationEmailTask,
+  cleanupStaleHostNotificationEmailTasks,
+  cleanupTimeoutHostNotificationEmailTasks,
+  retryOrFailHostNotificationEmailTask,
+  markHostNotificationEmailTaskSent
+} from '../db/host-notification-email-tasks.js'
+import { sendHostAnnouncementEmail } from '../lib/mailer.js'
+import type { HostNotificationEmailTask } from '@prisma/client'
+import { createWorkerDbBackoff } from './db-failure-backoff.js'
+
+const POLL_INTERVAL = 5000
+const TIMEOUT_CHECK_INTERVAL = 60 * 1000
+
+let workerInterval: ReturnType<typeof setInterval> | null = null
+let timeoutCheckInterval: ReturnType<typeof setInterval> | null = null
+let isProcessing = false
+const dbBackoff = createWorkerDbBackoff('HostNotifyEmailWorker')
+
+async function processQueue(): Promise<void> {
+  if (isProcessing) return
+  if (dbBackoff.shouldSkip()) return
+  isProcessing = true
+  let currentTask: HostNotificationEmailTask | null = null
+
+  try {
+    currentTask = await claimNextHostNotificationEmailTask()
+    if (!currentTask) return
+
+    console.log(`[HostNotifyEmailWorker] Sending queued email task ${currentTask.id} to ${currentTask.email}`)
+
+    const result = await sendHostAnnouncementEmail(currentTask.email, {
+      username: currentTask.username,
+      hostName: currentTask.hostName,
+      title: currentTask.title,
+      content: currentTask.content
+    })
+
+    if (result.success) {
+      await markHostNotificationEmailTaskSent(currentTask.id)
+      console.log(`[HostNotifyEmailWorker] Task ${currentTask.id} sent successfully`)
+      return
+    }
+
+    const errorMessage = result.error || 'Unknown email error'
+    await retryOrFailHostNotificationEmailTask(currentTask.id, currentTask.retryCount, errorMessage)
+    console.error(`[HostNotifyEmailWorker] Task ${currentTask.id} failed: ${errorMessage}`)
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    console.error('[HostNotifyEmailWorker] Queue processing error:', error)
+    dbBackoff.arm(error)
+
+    if (currentTask) {
+      try {
+        await retryOrFailHostNotificationEmailTask(currentTask.id, currentTask.retryCount, errorMessage)
+      } catch (retryError) {
+        console.error(`[HostNotifyEmailWorker] Failed to recover task ${currentTask.id}:`, retryError)
+      }
+    }
+  } finally {
+    isProcessing = false
+  }
+}
+
+export {
+  cleanupStaleHostNotificationEmailTasks,
+  cleanupTimeoutHostNotificationEmailTasks
+}
+
+export function startHostNotificationEmailWorker(): void {
+  if (workerInterval) {
+    console.warn('[HostNotifyEmailWorker] Worker already running')
+    return
+  }
+
+  console.log('[HostNotifyEmailWorker] Starting worker')
+  workerInterval = setInterval(() => {
+    processQueue().catch(err => {
+      console.error('[HostNotifyEmailWorker] Worker tick failed:', err)
+    })
+  }, POLL_INTERVAL)
+  timeoutCheckInterval = setInterval(() => {
+    if (dbBackoff.shouldSkip()) return
+    cleanupTimeoutHostNotificationEmailTasks().then(count => {
+      if (count > 0) {
+        console.warn(`[HostNotifyEmailWorker] Requeued ${count} timed-out task(s)`)
+      }
+    }).catch(err => {
+      console.error('[HostNotifyEmailWorker] Timeout cleanup failed:', err)
+      dbBackoff.arm(err)
+    })
+  }, TIMEOUT_CHECK_INTERVAL)
+
+  processQueue().catch(err => {
+    console.error('[HostNotifyEmailWorker] Initial queue processing failed:', err)
+  })
+}
+
+export function stopHostNotificationEmailWorker(): void {
+  if (!workerInterval) return
+
+  clearInterval(workerInterval)
+  workerInterval = null
+  if (timeoutCheckInterval) {
+    clearInterval(timeoutCheckInterval)
+    timeoutCheckInterval = null
+  }
+  console.log('[HostNotifyEmailWorker] Worker stopped')
+}
diff --git a/server/src/workers/instanceTaskWorker.ts b/server/src/workers/instanceTaskWorker.ts
new file mode 100644
index 0000000..baf83fd
--- /dev/null
+++ b/server/src/workers/instanceTaskWorker.ts
@@ -0,0 +1,2595 @@
+/**
+ * 实例操作任务队列调度器
+ * 确保同一台宿主机同一时间只有一个实例操作任务在执行
+ * 
+ * 高可用优化:
+ * - 批量查询所有待处理任务，减少数据库查询次数
+ * - 轻量任务（start/stop/restart）每宿主机并行执行
+ * - 性能监控日志
+ * - 使用统一连接池管理
+ */
+
+import { prisma } from '../db/prisma.js'
+import { InstanceTaskType } from '@prisma/client'
+import { getIncusClient, getInstance, updateInstance, deleteInstance, createInstance } from '../lib/incus/index.js'
+import {
+  startInstance,
+  stopInstance,
+  restartInstance,
+  rebuildInstance,
+  getInstanceState
+} from '../lib/incus/incus-instances.js'
+import { listSnapshots, deleteSnapshot as deleteIncusSnapshot } from '../lib/incus/incus-snapshots.js'
+import { sendNotification } from '../lib/notifier.js'
+import { createLog } from '../db/logs.js'
+import * as db from '../db/index.js'
+import { updateInstanceTaskProgress, updateInstanceTaskStatus } from '../db/instance-tasks.js'
+import { closeInstanceSessions } from '../lib/terminal-proxy.js'
+import { generateIncusConfig, generateRandomPassword } from '../lib/incus-config-generator.js'
+import { encryptSensitiveData, decryptSensitiveData } from '../lib/security.js'
+import { generateVmNicMacs } from '../lib/vm-network-identifiers.js'
+import { customAlphabet } from 'nanoid'
+import { generateRandomIPv4, generateRandomIPv6 } from '../lib/ip-calculator.js'
+import pLimit from 'p-limit'
+import { updateClientResponseTime, recordClientError } from '../lib/incus/incus-pool.js'
+import { getCommandsByIds, mergeCommandContents, getImageDistroFromAlias } from '../db/custom-init-commands.js'
+import { collectTrafficForRunningInstance } from '../services/instance-traffic-collector.js'
+import {
+  HOST_TASK_CLAIM_LOCK_NAMESPACE,
+  INSTANCE_OPERATION_LOCK_NAMESPACE,
+  tryAdvisoryTransactionLock
+} from '../db/advisory-locks.js'
+import { createWorkerDbBackoff } from './db-failure-backoff.js'
+
+import { resetInstanceCloudInitState } from '../lib/cloud-init-status.js'
+import { resolveIncusSwapValue } from '../lib/instance-swap.js'
+import { selectBindableIpv4ListenAddress } from '../lib/network-address.js'
+import { getSystemImageAvailabilityForHost } from '../db/images.js'
+import { createCaddyClient } from '../lib/caddy-client.js'
+import { resolveInstanceTrafficLimitForHost } from '../lib/traffic-multiplier.js'
+import { calculateInstanceTrafficStatus } from '../services/traffic-utils.js'
+
+// 任务超时时间：轻量任务保持短超时，重建/克隆/改节点等重任务允许更长执行窗口
+const LIGHT_TASK_TIMEOUT = 5 * 60 * 1000
+const HEAVY_TASK_TIMEOUT = 30 * 60 * 1000
+
+// Worker 轮询间隔 (3 秒)
+const POLL_INTERVAL = 3000
+
+// 超时检查间隔 (1 分钟)
+const TIMEOUT_CHECK_INTERVAL = 60000
+
+// 每宿主机轻量任务并发数
+const LIGHT_TASK_CONCURRENCY = 5
+
+// 轻量任务类型（可并行执行）
+const LIGHT_TASK_NAMES = new Set(['start', 'stop', 'restart'])
+
+// 重量任务类型（需串行执行）
+const HEAVY_TASK_NAMES = new Set(['rebuild', 'clone', 'recreate', 'change_host'])
+
+// 重量任务类型数组（用于 Prisma 查询）
+const HEAVY_TASK_TYPES: InstanceTaskType[] = ['rebuild', 'clone', 'recreate', 'change_host' as InstanceTaskType]
+const ALPINE_BUSY_UPDATE_CANCEL_AFTER_MS = 10_000
+
+let workerInterval: ReturnType<typeof setInterval> | null = null
+let timeoutCheckInterval: ReturnType<typeof setInterval> | null = null
+const dbBackoff = createWorkerDbBackoff('InstanceTaskWorker')
+
+function isAlpineImageAlias(imageAlias?: string | null): boolean {
+  return typeof imageAlias === 'string' && imageAlias.toLowerCase().includes('alpine')
+}
+
+/**
+ * 从实例状态中提取 IPv4 地址
+ */
+function extractIPv4(state: { network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }> }): string | null {
+  if (!state.network) return null
+  for (const [iface, info] of Object.entries(state.network)) {
+    if (iface === 'lo') continue
+    const addrs = info.addresses || []
+    for (const addr of addrs) {
+      if (addr.family === 'inet' && addr.scope === 'global') {
+        return addr.address
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * 从实例状态中提取 IPv6 地址
+ * 排除 ULA (fd00::/8, fc00::/7) 和 link-local (fe80::/10) 地址
+ * 仅返回真正的全球可路由 IPv6 地址
+ */
+function extractIPv6(state: { network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }> }): string | null {
+  if (!state.network) return null
+  for (const [iface, info] of Object.entries(state.network)) {
+    if (iface === 'lo') continue
+    const addrs = info.addresses || []
+    for (const addr of addrs) {
+      if (addr.family === 'inet6' && addr.scope === 'global') {
+        const ip = addr.address.toLowerCase()
+        // 排除 ULA (fc00::/7 = fc/fd) 和 link-local (fe80::/10)
+        if (ip.startsWith('fd') || ip.startsWith('fc') || ip.startsWith('fe80:')) {
+          continue
+        }
+        return addr.address
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * 服务启动时清理僵尸任务
+ */
+export async function cleanupStaleTasks(): Promise<void> {
+  const result = await prisma.instanceTask.updateMany({
+    where: { status: 'PROCESSING' },
+    data: {
+      status: 'FAILED',
+      error: '系统重启，任务中断',
+      finishedAt: new Date()
+    }
+  })
+  if (result.count > 0) {
+    console.log(`[InstanceTaskWorker] 清理了 ${result.count} 个僵尸任务`)
+  }
+}
+
+/**
+ * 运行时检查并清理超时的任务
+ */
+async function cleanupTimeoutTasks(): Promise<void> {
+  if (dbBackoff.shouldSkip()) return
+  const lightTimeoutThreshold = new Date(Date.now() - LIGHT_TASK_TIMEOUT)
+  const heavyTimeoutThreshold = new Date(Date.now() - HEAVY_TASK_TIMEOUT)
+
+  const result = await prisma.instanceTask.updateMany({
+    where: {
+      status: 'PROCESSING',
+      OR: [
+        {
+          taskType: { in: HEAVY_TASK_TYPES },
+          startedAt: { lt: heavyTimeoutThreshold }
+        },
+        {
+          taskType: { notIn: HEAVY_TASK_TYPES },
+          startedAt: { lt: lightTimeoutThreshold }
+        }
+      ]
+    },
+    data: {
+      status: 'FAILED',
+      error: '任务执行超时',
+      finishedAt: new Date()
+    }
+  })
+
+  if (result.count > 0) {
+    console.log(`[InstanceTaskWorker] 清理了 ${result.count} 个超时任务`)
+  }
+}
+
+/**
+ * 检查队列并执行任务
+ * 高可用优化：批量查询 + 轻量任务并行
+ */
+async function processQueue(): Promise<void> {
+  if (dbBackoff.shouldSkip()) return
+  const startTime = Date.now()
+
+  try {
+    // 批量获取所有待处理任务（一次查询）
+    const pendingTasks = await prisma.instanceTask.findMany({
+      where: { status: 'PENDING' },
+      orderBy: { createdAt: 'asc' },
+      select: { id: true, hostId: true, taskType: true }
+    })
+
+    if (pendingTasks.length === 0) return
+
+    // 按宿主机分组
+    const tasksByHost = new Map<number, typeof pendingTasks>()
+    for (const task of pendingTasks) {
+      const hostTasks = tasksByHost.get(task.hostId) || []
+      hostTasks.push(task)
+      tasksByHost.set(task.hostId, hostTasks)
+    }
+
+    // 并行处理每个宿主机的任务
+    const hostPromises = Array.from(tasksByHost.entries()).map(
+      async ([hostId, tasks]) => processHostTasks(hostId, tasks)
+    )
+
+    await Promise.allSettled(hostPromises)
+
+    const duration = Date.now() - startTime
+    if (duration > 100) { // 只记录耗时超过 100ms 的轮询
+      console.log(`[InstanceTaskWorker] Queue processed in ${duration}ms, pending: ${pendingTasks.length}`)
+    }
+  } catch (err) {
+    console.error('[InstanceTaskWorker] Queue processing error:', err)
+    dbBackoff.arm(err)
+  }
+}
+
+/**
+ * 处理单个宿主机的任务队列
+ * 轻量任务可并行，重量任务串行
+ */
+async function processHostTasks(
+  hostId: number,
+  tasks: Array<{ id: number; hostId: number; taskType: string }>
+): Promise<void> {
+  // 分离轻量任务和重量任务
+  const lightTasks = tasks.filter(t => LIGHT_TASK_NAMES.has(t.taskType))
+  const heavyTasks = tasks.filter(t => HEAVY_TASK_NAMES.has(t.taskType))
+
+  // 检查是否有正在执行的重量任务
+  const runningHeavyTask = await prisma.instanceTask.findFirst({
+    where: {
+      hostId,
+      status: 'PROCESSING',
+      taskType: { in: HEAVY_TASK_TYPES }
+    }
+  })
+
+  if (runningHeavyTask) {
+    // 有重量任务在执行，跳过该宿主机
+    return
+  }
+
+  // 优先处理轻量任务（并行）
+  if (lightTasks.length > 0) {
+    const limit = pLimit(LIGHT_TASK_CONCURRENCY)
+    const claimedLightTasks: number[] = []
+
+    // 尝试获取多个轻量任务
+    for (const task of lightTasks.slice(0, LIGHT_TASK_CONCURRENCY)) {
+      const claimed = await claimLightTask(hostId, task.id)
+      if (claimed) {
+        claimedLightTasks.push(claimed.id)
+      }
+    }
+
+    // 并行执行轻量任务
+    if (claimedLightTasks.length > 0) {
+      await Promise.allSettled(
+        claimedLightTasks.map(taskId =>
+          limit(() => executeTask(taskId).catch(err => {
+            console.error(`[InstanceTaskWorker] Light task ${taskId} error:`, err)
+          }))
+        )
+      )
+    }
+  }
+
+  // 处理重量任务（串行，需要独占锁）
+  // 注意：如果没有待处理的轻量任务，或者轻量任务已全部被处理，则处理重量任务
+  if (heavyTasks.length > 0) {
+    // 检查是否有正在执行的任何任务
+    const runningAnyTask = await prisma.instanceTask.findFirst({
+      where: { hostId, status: 'PROCESSING' }
+    })
+
+    if (!runningAnyTask) {
+      // 没有任务在执行，可以处理重量任务
+      const claimedTask = await claimNextTask(hostId)
+      if (claimedTask) {
+        // 重量任务异步执行
+        executeTask(claimedTask.id).catch(err => {
+          console.error(`[InstanceTaskWorker] Heavy task ${claimedTask.id} error:`, err)
+        })
+      }
+    }
+  }
+}
+
+/**
+ * 获取轻量任务（简化版锁检查）
+ */
+async function claimLightTask(hostId: number, taskId: number) {
+  return prisma.$transaction(async (tx) => {
+    const locked = await tryAdvisoryTransactionLock(tx, HOST_TASK_CLAIM_LOCK_NAMESPACE, hostId)
+    if (!locked) return null
+
+    // 检查是否有正在执行的重量任务
+    const runningHeavyTask = await tx.instanceTask.findFirst({
+      where: {
+        hostId,
+        status: 'PROCESSING',
+        taskType: { in: HEAVY_TASK_TYPES }
+      }
+    })
+    if (runningHeavyTask) return null
+
+    // 检查是否有正在执行的恢复任务（共享锁）
+    const runningRestoreTask = await tx.restoreTask.findFirst({
+      where: { hostId, status: 'PROCESSING' }
+    })
+    if (runningRestoreTask) return null
+
+    // 检查是否有正在执行的上传任务（共享锁）
+    const runningUploadTask = await tx.backupUploadTask.findFirst({
+      where: { hostId, status: 'PROCESSING' }
+    })
+    if (runningUploadTask) return null
+
+    // 检查任务是否仍然是 PENDING
+    const task = await tx.instanceTask.findUnique({
+      where: { id: taskId }
+    })
+    if (!task || task.status !== 'PENDING') return null
+
+    const instanceOperationLocked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, task.instanceId)
+    if (!instanceOperationLocked) return null
+
+    const instance = await tx.instance.findUnique({
+      where: { id: task.instanceId },
+      select: { status: true }
+    })
+    if (!instance || instance.status === 'deleted') return null
+
+    // 标记为 PROCESSING
+    return await tx.instanceTask.update({
+      where: { id: taskId },
+      data: { status: 'PROCESSING', startedAt: new Date() }
+    })
+  })
+}
+
+/**
+ * 原子操作：获取并锁定下一个任务
+ */
+async function claimNextTask(hostId: number) {
+  return prisma.$transaction(async (tx) => {
+    const locked = await tryAdvisoryTransactionLock(tx, HOST_TASK_CLAIM_LOCK_NAMESPACE, hostId)
+    if (!locked) return null
+
+    // 检查是否有正在执行的实例任务
+    const runningTask = await tx.instanceTask.findFirst({
+      where: { hostId, status: 'PROCESSING' }
+    })
+    if (runningTask) return null
+
+    // 检查是否有正在执行的恢复任务（共享锁）
+    const runningRestoreTask = await tx.restoreTask.findFirst({
+      where: { hostId, status: 'PROCESSING' }
+    })
+    if (runningRestoreTask) return null
+
+    // 检查是否有正在执行的上传任务（共享锁）
+    const runningUploadTask = await tx.backupUploadTask.findFirst({
+      where: { hostId, status: 'PROCESSING' }
+    })
+    if (runningUploadTask) return null
+
+    // 获取最早的 PENDING 任务
+    const taskToRun = await tx.instanceTask.findFirst({
+      where: { hostId, status: 'PENDING' },
+      orderBy: { createdAt: 'asc' }
+    })
+    if (!taskToRun) return null
+
+    const instanceOperationLocked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, taskToRun.instanceId)
+    if (!instanceOperationLocked) return null
+
+    const instance = await tx.instance.findUnique({
+      where: { id: taskToRun.instanceId },
+      select: { status: true }
+    })
+    if (!instance || instance.status === 'deleted') return null
+
+    // 原子标记为 PROCESSING
+    const claimedTask = await tx.instanceTask.update({
+      where: { id: taskToRun.id },
+      data: { status: 'PROCESSING', startedAt: new Date() }
+    })
+
+    return claimedTask
+  })
+}
+
+/**
+ * 执行单个任务（带性能监控）
+ */
+async function executeTask(taskId: number): Promise<void> {
+  const taskStartTime = Date.now()
+
+  const task = await prisma.instanceTask.findUnique({
+    where: { id: taskId }
+  })
+
+  if (!task) {
+    console.error(`[InstanceTaskWorker] Task ${taskId} not found`)
+    return
+  }
+
+  console.log(`[InstanceTaskWorker] 开始执行任务 ${taskId} (${task.taskType})`)
+
+  try {
+    const instance = await db.getInstanceById(task.instanceId)
+    if (!instance) throw new Error('实例不存在')
+    if (instance.status === 'deleted') {
+      throw new Error('实例已删除，任务取消')
+    }
+
+    const earliestActiveTask = await prisma.instanceTask.findFirst({
+      where: {
+        instanceId: task.instanceId,
+        status: { in: ['PENDING', 'PROCESSING'] }
+      },
+      orderBy: [
+        { createdAt: 'asc' },
+        { id: 'asc' }
+      ]
+    })
+    if (earliestActiveTask && earliestActiveTask.id !== task.id) {
+      throw new Error(`实例已有更早的任务正在执行: ${earliestActiveTask.taskType}`)
+    }
+
+    const host = await db.getHostById(task.hostId)
+    if (!host) throw new Error('宿主机不存在')
+
+    const clientStartTime = Date.now()
+    const client = await getIncusClient(host)
+    const clientDuration = Date.now() - clientStartTime
+
+    // 记录连接池响应时间
+    updateClientResponseTime(host.id, clientDuration)
+
+    switch (task.taskType) {
+      case 'start':
+        await executeStartTask(task, instance, host, client)
+        break
+      case 'stop':
+        await executeStopTask(task, instance, host, client)
+        break
+      case 'restart':
+        await executeRestartTask(task, instance, host, client)
+        break
+      case 'rebuild':
+        await executeRebuildTask(task, instance, host, client)
+        break
+      case 'clone':
+        await executeCloneTask(task, instance, host, client)
+        break
+      case 'recreate':
+        await executeRecreateTask(task, instance, host, client)
+        break
+      case 'change_host':
+        await executeChangeHostTask(task, instance, host, client)
+        break
+      default:
+        throw new Error(`未知任务类型: ${task.taskType}`)
+    }
+
+    // 任务完成
+    await updateInstanceTaskStatus(taskId, 'COMPLETED', {
+      finishedAt: new Date()
+    })
+
+    const taskDuration = Date.now() - taskStartTime
+    console.log(`[InstanceTaskWorker] 任务 ${taskId} (${task.taskType}) 完成，耗时 ${taskDuration}ms`)
+
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : String(err)
+    console.error(`[InstanceTaskWorker] 任务 ${taskId} 失败:`, errorMessage)
+
+    await updateInstanceTaskStatus(taskId, 'FAILED', {
+      error: errorMessage,
+      finishedAt: new Date()
+    })
+
+    // 记录连接池错误
+    recordClientError(task.hostId)
+
+    const taskDuration = Date.now() - taskStartTime
+    console.error(`[InstanceTaskWorker] 任务 ${taskId} (${task.taskType}) 失败，耗时 ${taskDuration}ms: ${errorMessage}`)
+
+    // 发送失败通知并记录日志
+    try {
+      const instance = await db.getInstanceById(task.instanceId)
+      const host = await db.getHostById(task.hostId)
+
+      // 记录失败日志
+      await createLog(
+        task.userId,
+        'instance',
+        `instance.${task.taskType}`,
+        `Failed to ${task.taskType} instance "${instance?.name || task.instanceId}": ${errorMessage}`,
+        'failed',
+        { instanceId: task.instanceId }
+      )
+
+      await sendNotification(task.userId, 'instance_task_failed', {
+        instanceName: instance?.name || `实例 #${task.instanceId}`,
+        hostName: host?.name || '未知',
+        taskType: task.taskType,
+        error: errorMessage
+      })
+    } catch (notifyErr) {
+      console.error('[InstanceTaskWorker] 发送失败通知/记录日志失败:', notifyErr)
+    }
+  }
+}
+
+/**
+ * 判断错误是否为 "实例已经是目标状态"
+ * Incus 返回类似 "The container is already running" 或 "The instance is already stopped"
+ * 也可能返回 "container is not running" 或 "instance is not running" 等变体
+ */
+function isAlreadyInStateError(error: Error, targetState: 'running' | 'stopped'): boolean {
+  const msg = error.message.toLowerCase()
+  if (targetState === 'running') {
+    // 匹配: "already running", "already started", "is running"
+    return msg.includes('already running') || msg.includes('already started') ||
+      (msg.includes('is running') && !msg.includes('not running'))
+  }
+  if (targetState === 'stopped') {
+    // 匹配: "already stopped", "not running", "is not running", "isn't running"
+    return msg.includes('already stopped') || msg.includes('not running') ||
+      msg.includes('is stopped') || msg.includes("isn't running")
+  }
+  return false
+}
+
+/**
+ * 执行启动任务
+ */
+async function executeStartTask(
+  task: { id: number; userId: number; instanceId: number },
+  instance: { incus_id: string; name: string; network_mode: string },
+  host: { name: string },
+  client: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  await updateInstanceTaskProgress(task.id, 'starting')
+
+  try {
+    await startInstance(client, instance.incus_id)
+  } catch (err) {
+    if (err instanceof Error && err.message.includes('file exists')) {
+      const startDevices = (await getInstance(client, instance.incus_id) as any).devices
+      if (startDevices?.eth1) {
+        console.warn(`[Start] IPv6 路由残留，尝试暂移 eth1 后启动...`)
+        const savedEth1 = { ...startDevices.eth1 }
+        const devicesWithoutEth1 = { ...startDevices }
+        delete devicesWithoutEth1.eth1
+        await updateInstance(client, instance.incus_id, { devices: devicesWithoutEth1 })
+        await startInstance(client, instance.incus_id)
+        // 实例启动后恢复 eth1（Incus 会热插入并添加新的路由）
+        await new Promise(r => setTimeout(r, 3000))
+        await updateInstance(client, instance.incus_id, { devices: { ...devicesWithoutEth1, eth1: savedEth1 } })
+        console.log(`[Start] eth1 已恢复，IPv6 路由重新建立`)
+      }
+    }
+    if (err instanceof Error && isAlreadyInStateError(err, 'running')) {
+      console.log(`[Start] 实例 ${instance.incus_id} 已经是运行状态，自动修正数据库`)
+      // 获取实际状态并更新数据库
+      const state = await getInstanceState(client, instance.incus_id) as {
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }
+      const ipv4 = extractIPv4(state)
+      const ipv6 = extractIPv6(state)
+      await db.updateInstanceStatus(task.instanceId, 'running', { ipv4, ipv6 })
+      const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+      await reconcileTrafficStateForInstanceIds([task.instanceId])
+
+      // 发送通知（状态已同步）
+      await sendNotification(task.userId, 'instance_started', {
+        instanceName: instance.name,
+        hostName: host.name,
+        ipv4: ipv4 || undefined,
+        ipv6: ipv6 || undefined
+      })
+
+      await createLog(task.userId, 'instance', 'instance.start', `Instance "${instance.name}" already running, synced status [host: ${host.name}]`, 'success', { instanceId: task.instanceId })
+      return // 任务成功完成
+    }
+    throw err // 其他错误继续抛出
+  }
+
+  // 等待网络初始化
+  let ipv4: string | null = null
+  let ipv6: string | null = null
+  // 根据实例类型动态调整等待窗口：VM 启动慢，需要更长的等待时间
+  const incusInst = await getInstance(client, instance.incus_id) as { type?: string }
+  const isVM = incusInst.type === 'virtual-machine'
+  const maxAttempts = isVM ? 60 : 30    // VM: 60×3s=180s, 容器: 30×2s=60s
+  const pollInterval = isVM ? 3000 : 2000
+  // 根据网络模式判断是否需要等待 IPv6
+  const needsIPv6 = ['nat_ipv6', 'ipv6_only'].includes(instance.network_mode)
+
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    await new Promise(resolve => setTimeout(resolve, pollInterval))
+
+    try {
+      const state = await getInstanceState(client, instance.incus_id) as {
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }
+      ipv4 = extractIPv4(state)
+      ipv6 = extractIPv6(state)
+
+      // NAT 模式只需要 IPv4，nat_ipv6 模式需要 IPv4 和 IPv6
+      if (needsIPv6) {
+        if (ipv4 && ipv6) {
+          console.log(`[Start] IP 获取成功: IPv4=${ipv4}, IPv6=${ipv6}`)
+          break
+        }
+      } else {
+        if (ipv4) {
+          console.log(`[Start] IP 获取成功: IPv4=${ipv4} (NAT 模式，无 IPv6)`)
+          break
+        }
+      }
+      console.log(`[Start] 等待网络初始化 (attempt ${attempt + 1}): IPv4=${ipv4}, IPv6=${ipv6}`)
+    } catch (_err) {
+      // 继续重试
+    }
+  }
+
+  await db.updateInstanceStatus(task.instanceId, 'running', { ipv4, ipv6 })
+  const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+  await reconcileTrafficStateForInstanceIds([task.instanceId])
+
+  await sendNotification(task.userId, 'instance_started', {
+    instanceName: instance.name,
+    hostName: host.name,
+    ipv4: ipv4 || undefined,
+    ipv6: ipv6 || undefined
+  })
+
+  await createLog(task.userId, 'instance', 'instance.start', `Started instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: task.instanceId })
+}
+
+/**
+ * 执行停止任务
+ */
+async function executeStopTask(
+  task: { id: number; userId: number; instanceId: number },
+  instance: { incus_id: string; name: string; image?: string | null },
+  host: { name: string },
+  client: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  await updateInstanceTaskProgress(task.id, 'stopping')
+
+  const collectResult = await collectTrafficForRunningInstance(task.instanceId)
+  if (!collectResult.success) {
+    console.warn(`[Stop] 实例 ${task.instanceId} 关机前即时采集流量失败: ${collectResult.error}`)
+  }
+
+  // 关闭该实例的所有终端连接
+  const closedSessions = closeInstanceSessions(task.instanceId, 'Instance is stopping')
+  if (closedSessions > 0) {
+    console.log(`[Stop] Closed ${closedSessions} terminal session(s) for instance ${task.instanceId}`)
+  }
+
+  try {
+    const allowCancelBusyUpdate = isAlpineImageAlias(instance.image)
+    await stopInstance(client, instance.incus_id, true, {
+      allowCancelBusyUpdate,
+      busyUpdateCancelAfterMs: allowCancelBusyUpdate ? ALPINE_BUSY_UPDATE_CANCEL_AFTER_MS : undefined
+    })
+  } catch (err) {
+    // 如果 Incus 返回 "已经是停止状态"，自动修正数据库状态
+    if (err instanceof Error && isAlreadyInStateError(err, 'stopped')) {
+      console.log(`[Stop] 实例 ${instance.incus_id} 已经是停止状态，自动修正数据库`)
+      await db.updateInstanceStatus(task.instanceId, 'stopped')
+
+      // 发送通知（状态已同步）
+      await sendNotification(task.userId, 'instance_stopped', {
+        instanceName: instance.name,
+        hostName: host.name
+      })
+
+      await createLog(task.userId, 'instance', 'instance.stop', `Instance "${instance.name}" already stopped, synced status [host: ${host.name}]`, 'success', { instanceId: task.instanceId })
+      return // 任务成功完成
+    }
+    throw err // 其他错误继续抛出
+  }
+  await db.updateInstanceStatus(task.instanceId, 'stopped')
+
+  await sendNotification(task.userId, 'instance_stopped', {
+    instanceName: instance.name,
+    hostName: host.name
+  })
+
+  await createLog(task.userId, 'instance', 'instance.stop', `Stopped instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: task.instanceId })
+}
+
+/**
+ * 执行重启任务
+ */
+async function executeRestartTask(
+  task: { id: number; userId: number; instanceId: number },
+  instance: { incus_id: string; name: string; network_mode: string },
+  host: { name: string },
+  client: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  await updateInstanceTaskProgress(task.id, 'restarting')
+
+  const collectResult = await collectTrafficForRunningInstance(task.instanceId)
+  if (!collectResult.success) {
+    console.warn(`[Restart] 实例 ${task.instanceId} 重启前即时采集流量失败: ${collectResult.error}`)
+  }
+
+  // 关闭该实例的所有终端连接
+  const closedSessions = closeInstanceSessions(task.instanceId, 'Instance is restarting')
+  if (closedSessions > 0) {
+    console.log(`[Restart] Closed ${closedSessions} terminal session(s) for instance ${task.instanceId}`)
+  }
+
+  try {
+    await restartInstance(client, instance.incus_id, true)
+  } catch (err) {
+    // 重启失败时，检查当前状态
+    // 如果实例是停止状态，则执行启动；如果是运行状态，继续重启流程
+    if (err instanceof Error) {
+      // 如果实例是停止状态无法重启，尝试启动它
+      if (isAlreadyInStateError(err, 'stopped')) {
+        console.log(`[Restart] 实例 ${instance.incus_id} 处于停止状态，尝试启动`)
+        try {
+          await startInstance(client, instance.incus_id)
+          // 继续等待网络初始化的流程
+        } catch (startErr) {
+          if (startErr instanceof Error && startErr.message.includes('file exists')) {
+            const restartDevices = (await getInstance(client, instance.incus_id) as any).devices
+            if (restartDevices?.eth1) {
+              console.warn(`[Restart] IPv6 路由残留，尝试暂移 eth1 后启动...`)
+              const savedEth1 = { ...restartDevices.eth1 }
+              const devicesWithoutEth1 = { ...restartDevices }
+              delete devicesWithoutEth1.eth1
+              await updateInstance(client, instance.incus_id, { devices: devicesWithoutEth1 })
+              await startInstance(client, instance.incus_id)
+              await new Promise(r => setTimeout(r, 3000))
+              await updateInstance(client, instance.incus_id, { devices: { ...devicesWithoutEth1, eth1: savedEth1 } })
+              console.log(`[Restart] eth1 已恢复，IPv6 路由重新建立`)
+            }
+          }
+          // 如果启动时发现已经是运行状态（极端边界情况），也视为成功
+          if (startErr instanceof Error && isAlreadyInStateError(startErr, 'running')) {
+            console.log(`[Restart] 实例 ${instance.incus_id} 已经是运行状态`)
+            // 继续等待网络初始化的流程
+          } else {
+            throw startErr
+          }
+        }
+      } else {
+        throw err // 其他错误继续抛出
+      }
+    } else {
+      throw err
+    }
+  }
+
+  // 等待网络初始化
+  let ipv4: string | null = null
+  let ipv6: string | null = null
+  // 根据实例类型动态调整等待窗口
+  const incusInstRestart = await getInstance(client, instance.incus_id) as { type?: string }
+  const isVMRestart = incusInstRestart.type === 'virtual-machine'
+  const maxAttemptsRestart = isVMRestart ? 60 : 30
+  const pollIntervalRestart = isVMRestart ? 3000 : 2000
+  // 根据网络模式判断是否需要等待 IPv6
+  const needsIPv6 = ['nat_ipv6', 'ipv6_only'].includes(instance.network_mode)
+
+  for (let attempt = 0; attempt < maxAttemptsRestart; attempt++) {
+    await new Promise(resolve => setTimeout(resolve, pollIntervalRestart))
+
+    try {
+      const state = await getInstanceState(client, instance.incus_id) as {
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }
+      ipv4 = extractIPv4(state)
+      ipv6 = extractIPv6(state)
+
+      // NAT 模式只需要 IPv4，nat_ipv6 模式需要 IPv4 和 IPv6
+      if (needsIPv6) {
+        if (ipv4 && ipv6) {
+          console.log(`[Restart] IP 获取成功: IPv4=${ipv4}, IPv6=${ipv6}`)
+          break
+        }
+      } else {
+        if (ipv4) {
+          console.log(`[Restart] IP 获取成功: IPv4=${ipv4} (NAT 模式，无 IPv6)`)
+          break
+        }
+      }
+      console.log(`[Restart] 等待网络初始化 (attempt ${attempt + 1}): IPv4=${ipv4}, IPv6=${ipv6}`)
+    } catch (_err) {
+      // 继续重试
+    }
+  }
+
+  await db.updateInstanceStatus(task.instanceId, 'running', { ipv4, ipv6 })
+
+  await sendNotification(task.userId, 'instance_restarted', {
+    instanceName: instance.name,
+    hostName: host.name,
+    ipv4: ipv4 || undefined,
+    ipv6: ipv6 || undefined
+  })
+
+  await createLog(task.userId, 'instance', 'instance.restart', `Restarted instance "${instance.name}" [host: ${host.name}]`, 'success', { instanceId: task.instanceId })
+}
+
+/**
+ * 执行重装任务
+ */
+async function executeRebuildTask(
+  task: { id: number; userId: number; instanceId: number; imageAlias: string | null; sshKeyId: number | null; customInitCommandIds?: string | null },
+  instance: { incus_id: string; name: string; user_id: number; image: string; network_mode: string; ipv4?: string | null; ipv6?: string | null; host_id: number; swap_enabled?: boolean; swap_size?: number | null },
+  host: { name: string },
+  client: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  const imageAlias = task.imageAlias
+  if (!imageAlias) throw new Error('未指定重装镜像')
+  const allowCancelBusyUpdate = isAlpineImageAlias(instance.image) || isAlpineImageAlias(imageAlias)
+
+  // 关闭该实例的所有终端连接
+  const closedSessions = closeInstanceSessions(task.instanceId, 'Instance is being rebuilt')
+  if (closedSessions > 0) {
+    console.log(`[Rebuild] Closed ${closedSessions} terminal session(s) for instance ${task.instanceId}`)
+  }
+
+  const collectResult = await collectTrafficForRunningInstance(task.instanceId)
+  if (!collectResult.success) {
+    console.warn(`[Rebuild] 实例 ${task.instanceId} 重装前即时采集流量失败: ${collectResult.error}`)
+  }
+
+  // 确保实例已停止
+  await updateInstanceTaskProgress(task.id, 'stopping')
+  try {
+    const incusState = await getInstanceState(client, instance.incus_id) as { status?: string }
+    if (incusState.status === 'Running') {
+      await stopInstance(client, instance.incus_id, true, {
+        allowCancelBusyUpdate,
+        busyUpdateCancelAfterMs: allowCancelBusyUpdate ? ALPINE_BUSY_UPDATE_CANCEL_AFTER_MS : undefined
+      })
+    }
+  } catch (_err) {
+    // 继续执行
+  }
+
+  // 重装后 cloud-init 会重新运行，必须清空旧的检测状态与手动完成标记。
+  await resetInstanceCloudInitState(task.instanceId)
+
+  // 删除所有快照
+  await updateInstanceTaskProgress(task.id, 'deleting_snapshots')
+  try {
+    const snapshots = await listSnapshots(client, instance.incus_id) as unknown[]
+    if (snapshots && snapshots.length > 0) {
+      for (const snapshot of snapshots) {
+        const snapshotName = typeof snapshot === 'string'
+          ? snapshot.split('/').pop()
+          : (snapshot as { name?: string }).name
+        if (snapshotName) {
+          await deleteIncusSnapshot(client, instance.incus_id, snapshotName)
+        }
+      }
+    }
+    // 清理数据库中的快照记录
+    await prisma.snapshot.deleteMany({ where: { instanceId: task.instanceId } })
+  } catch (_err) {
+    console.warn('[InstanceTaskWorker] 删除快照失败，继续执行')
+  }
+
+  // 执行重装
+  await updateInstanceTaskProgress(task.id, 'rebuilding')
+
+  // 获取 SSH 密钥：优先使用任务指定的 sshKeyId，否则取用户第一个密钥
+  let sshKey: string | undefined
+  if (task.sshKeyId) {
+    const keyRecord = await db.getSSHKeyById(task.sshKeyId)
+    if (keyRecord && keyRecord.user_id === instance.user_id) {
+      sshKey = keyRecord.public_key
+    }
+  }
+  if (!sshKey) {
+    // 回退：取用户第一个密钥
+    const userSshKeys = await db.getSSHKeysByUserId(instance.user_id)
+    sshKey = userSshKeys && userSshKeys.length > 0 ? userSshKeys[0].public_key : undefined
+  }
+
+  // SSH key is optional; password login still remains available when no key is present.
+  if (!sshKey) {
+    console.warn(`[Rebuild] Instance ${task.instanceId} has no SSH key; continuing without injecting authorized_keys`)
+  }
+
+  // 处理自定义初始化命令
+  let extraShellCommands: string | undefined
+  if (task.customInitCommandIds) {
+    try {
+      const commandIds = JSON.parse(task.customInitCommandIds) as number[]
+      if (commandIds.length > 0) {
+        const commands = await getCommandsByIds(commandIds)
+        // 二次验证：过滤掉不属于实例用户或已禁用的命令（防止任务排队期间命令被删除/禁用）
+        const validCmds = commands.filter(cmd =>
+          cmd.userId === instance.user_id && cmd.enabled
+        )
+        // 筛选适配当前发行版的命令
+        const imageDistro = getImageDistroFromAlias(imageAlias)
+        const compatibleCmds = validCmds.filter(cmd => {
+          return cmd.distros.includes('all') || cmd.distros.includes(imageDistro)
+        })
+        if (compatibleCmds.length > 0) {
+          extraShellCommands = mergeCommandContents(compatibleCmds)
+          console.log(`[Rebuild] 应用 ${compatibleCmds.length} 条自定义初始化命令`)
+        }
+      }
+    } catch (err) {
+      console.warn('[Rebuild] 解析自定义初始化命令失败:', err)
+    }
+  }
+
+  const newPassword = generateRandomPassword(16)
+
+  // 获取实例类型 (container 或 virtual-machine)
+  const incusInstance = await getInstance(client, instance.incus_id)
+  const instanceType = incusInstance.type // 'container' | 'virtual-machine'
+
+  // 生成 cloud-init 配置（用于注入 SSH 密钥和密码）
+  // 容器类型也传入 network 参数以正确配置 eth0/eth1 静态 IP
+  let { configPayload } = generateIncusConfig({
+    instanceName: instance.name,
+    imageAlias,
+    rootPassword: newPassword,
+    sshKey,
+    networkMode: instance.network_mode as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+    type: instanceType,
+    network: instanceType !== 'virtual-machine' && instance.ipv4 ? {
+      ipAddress: `${instance.ipv4}/22`,
+      gateway: '10.10.0.1',
+      dns: ['10.10.0.1'],
+      ipv6Address: instance.ipv6 ? `${instance.ipv6}/128` : undefined,
+      ipv6Gateway: instance.ipv6 ? 'fe80::1' : undefined
+    } : undefined,
+    extraShellCommands
+  })
+
+  // VM 需要在 cloud-init 的 network-config 中配置网络
+  // 使用实例现有的 IP 地址重新生成 network-config
+  if (instanceType === 'virtual-machine') {
+    const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+    // 获取 IPv6 网关（从宿主机配置）
+    const hostInfo = await db.getHostById(instance.host_id)
+    const vmResult = generateVmConfig({
+      instanceName: instance.name,
+      instanceIdSeed: instance.incus_id,
+      imageAlias,
+      rootPassword: newPassword,
+      sshKey,
+      network: instance.ipv4 ? {
+        ipAddress: `${instance.ipv4}/22`,
+        gateway: '10.10.0.1',  // NAT 网关 (与 incusbr0 一致)
+        dns: ['10.10.0.1'],
+        ipv6Address: instance.ipv6 ? `${instance.ipv6}` : undefined,
+        ipv6Gateway: instance.ipv6 ? (hostInfo?.ipv6_gateway || undefined) : undefined
+      } : undefined,
+      extraShellCommands
+    })
+    configPayload = vmResult.configPayload
+    console.log(`[Rebuild] VM network-config 已更新: IPv4=${instance.ipv4 || 'dhcp'}, IPv6=${instance.ipv6 || 'none'}`)
+  } else {
+    console.log(`[Rebuild] Container network-config 已更新: IPv4=${instance.ipv4 || 'dhcp'}, IPv6=${instance.ipv6 || 'none'}`)
+  }
+
+  // 关键修复：如果在首次创建时网络模式使用了双栈/纯IPv6新架构（需要 eth1），
+  // 在重装时必须同样注入标准的双网卡 user.network-config 配置。
+  // 注意：此处强制覆盖仅对容器 (container) 生效，因为 KVM (virtual-machine) 的配置已经在前面精确包含了 match MAC 和正确拓扑，强制覆写会导致丢网络！
+  if (instanceType === 'container' && instance.ipv4) {
+    const { hasIpv6Support, generateCloudInitNetworkConfig } = await import('../lib/network-payload-builder.js')
+    if (hasIpv6Support(instance.network_mode as any) && instance.ipv6) {
+      console.log(`[Rebuild] (Container) 检测到 IPv6 Routed 网络模式，强制覆盖应用标准双栈 user.network-config...`)
+      configPayload['user.network-config'] = generateCloudInitNetworkConfig({
+        ipv4Address: instance.ipv4,
+        ipv6List: [instance.ipv6]
+      })
+    }
+  }
+
+  // 关键修复：在 rebuild 之前先更新实例的 cloud-init 配置
+  // Incus rebuild API 不会覆盖现有 config，只会使用新镜像替换 rootfs
+  // 所以必须先更新 config，让 rebuild 后的新系统能读取到正确的 cloud-init 配置
+  // VM 关闭 UEFI 安全启动（允许用户 DD 系统等操作）
+  const rebuildConfig: Record<string, string> = { ...configPayload }
+
+  // 关键修复：清除旧的云初始化缓存键和残留系统属性（防止 Alpine <-> Debian 等跨发行版重装时 vendor-data 不兼容导致 cloud-init 崩溃）
+  try {
+    const { getImageAlias, getImage } = await import('../lib/incus/incus-images.js')
+    const aliasInfo = await getImageAlias(client, imageAlias)
+    const newImage = await getImage(client, aliasInfo.target)
+
+    // 把当前实例里所有旧的 'image.*'、'user.vendor-data'、'volatile.cloud-init.*'清空
+    const currentConfig = (incusInstance as any).config || {}
+    for (const key of Object.keys(currentConfig)) {
+      if (
+        key.startsWith('image.') ||
+        key === 'user.vendor-data' ||
+        key.startsWith('volatile.cloud-init.')
+      ) {
+        rebuildConfig[key] = '' // 空字符串代表由于我们使用 PATCH(updateInstance) 告知 Incus 删除这些键
+      }
+    }
+
+    // 重新注入新镜像自带的属性
+    if (newImage.properties) {
+      for (const [key, value] of Object.entries(newImage.properties)) {
+        if (typeof value === 'string') {
+          rebuildConfig[`image.${key}`] = value
+        }
+      }
+    }
+  } catch (err) {
+    console.warn('[Rebuild] 同步新镜像属性失败，将仅通过清理确保兼容性:', err)
+  }
+
+  // 必须重新涵盖刚才我们自己生成的合法 cloud-init 配置，防意外把自己的核心产出冲掉
+  for (const [k, v] of Object.entries(configPayload)) {
+    rebuildConfig[k] = v as string
+  }
+
+  let rebuildDevices: Record<string, Record<string, string>> | undefined
+  if (instanceType === 'virtual-machine') {
+    rebuildConfig['security.secureboot'] = 'false'
+    const vmNicMacs = generateVmNicMacs(instance.incus_id)
+    const currentDevices = ((incusInstance as unknown as { devices?: Record<string, Record<string, string>> }).devices) || {}
+    rebuildDevices = { ...currentDevices }
+
+    if (rebuildDevices.eth0) {
+      rebuildDevices.eth0 = {
+        ...rebuildDevices.eth0,
+        hwaddr: rebuildDevices.eth0.hwaddr || vmNicMacs.eth0
+      }
+    }
+
+    if (rebuildDevices.eth1) {
+      rebuildDevices.eth1 = {
+        ...rebuildDevices.eth1,
+        hwaddr: rebuildDevices.eth1.hwaddr || vmNicMacs.eth1
+      }
+    }
+  }
+
+  console.log(`[Rebuild] 更新实例 ${instance.incus_id} 的 cloud-init 配置...`)
+  const rebuildUpdates: { config: Record<string, string>; devices?: Record<string, Record<string, string>> } = {
+    config: rebuildConfig
+  }
+  if (rebuildDevices) {
+    rebuildUpdates.devices = rebuildDevices
+  }
+  await updateInstance(client, instance.incus_id, rebuildUpdates)
+
+  // 执行重装（不再传递 config，因为已经在上面更新了）
+  console.log(`[Rebuild] 开始重装实例 ${instance.incus_id}，镜像: ${imageAlias}`)
+  await rebuildInstance(client, instance.incus_id, { alias: imageAlias }, undefined, {
+    allowCancelBusyUpdate,
+    busyUpdateCancelAfterMs: allowCancelBusyUpdate ? ALPINE_BUSY_UPDATE_CANCEL_AFTER_MS : undefined
+  })
+
+  await prisma.trafficSnapshot.deleteMany({ where: { instanceId: task.instanceId } })
+
+  // 更新数据库记录
+  await prisma.instance.update({
+    where: { id: task.instanceId },
+    data: {
+      image: imageAlias,
+      rootPassword: encryptSensitiveData(newPassword)
+    }
+  })
+
+  // 启动实例（带 IPv6 路由冲突自动回退：stop 后内核路由可能残留）
+  await updateInstanceTaskProgress(task.id, 'starting')
+  try {
+    await startInstance(client, instance.incus_id)
+  } catch (startErr) {
+    // IPv6 routed 模式下，force stop 后内核 host route 可能残留
+    // 导致 startInstance 报 "file exists"，需暂移 eth1 再恢复
+    if (startErr instanceof Error && startErr.message.includes('file exists') && rebuildDevices?.eth1) {
+      console.warn(`[Rebuild] IPv6 路由残留，尝试暂移 eth1 后启动...`)
+      const savedEth1 = { ...rebuildDevices.eth1 }
+      const devicesWithoutEth1 = { ...rebuildDevices }
+      delete devicesWithoutEth1.eth1
+      await updateInstance(client, instance.incus_id, { devices: devicesWithoutEth1 })
+      await startInstance(client, instance.incus_id)
+      // 实例启动后恢复 eth1（Incus 会热插入并添加新的路由）
+      await new Promise(r => setTimeout(r, 3000))
+      await updateInstance(client, instance.incus_id, { devices: { ...devicesWithoutEth1, eth1: savedEth1 } })
+      console.log(`[Rebuild] eth1 已恢复，IPv6 路由重新建立`)
+    } else {
+      throw startErr
+    }
+  }
+
+  // 等待网络初始化
+  let ipv4: string | null = null
+  let ipv6: string | null = null
+  // VM 启动慢，需要更长的等待时间
+  const isVMRebuild = instanceType === 'virtual-machine'
+  const maxAttempts = isVMRebuild ? 60 : 30    // VM: 60×3s=180s, 容器: 30×2s=60s
+  const pollIntervalRebuild = isVMRebuild ? 3000 : 2000
+  // 根据网络模式判断是否需要等待 IPv6
+  const needsIPv6 = ['nat_ipv6', 'ipv6_only'].includes(instance.network_mode)
+
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    await new Promise(resolve => setTimeout(resolve, pollIntervalRebuild))
+    try {
+      const state = await getInstanceState(client, instance.incus_id) as {
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }
+      ipv4 = extractIPv4(state)
+      ipv6 = extractIPv6(state)
+      // NAT 模式只需要 IPv4，nat_ipv6 模式需要 IPv4 和 IPv6
+      if (needsIPv6) {
+        if (ipv4 && ipv6) {
+          console.log(`[Rebuild] IP 获取成功: IPv4=${ipv4}, IPv6=${ipv6}`)
+          break
+        }
+      } else {
+        if (ipv4) {
+          console.log(`[Rebuild] IP 获取成功: IPv4=${ipv4} (NAT 模式，无 IPv6)`)
+          break
+        }
+      }
+      console.log(`[Rebuild] 等待网络初始化 (attempt ${attempt + 1}): IPv4=${ipv4}, IPv6=${ipv6}`)
+    } catch (_err) {
+      // 继续重试
+    }
+  }
+
+  await db.updateInstanceStatus(task.instanceId, 'running', { ipv4, ipv6 })
+  const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+  await reconcileTrafficStateForInstanceIds([task.instanceId])
+
+  await sendNotification(task.userId, 'instance_rebuilt', {
+    instanceName: instance.name,
+    hostName: host.name,
+    newImage: imageAlias
+  })
+
+  await createLog(task.userId, 'instance', 'instance.rebuild', `Rebuilt instance "${instance.name}" with image ${imageAlias}`, 'success', { instanceId: task.instanceId })
+}
+
+/**
+ * 执行重建任务
+ * 重建会创建新的 Incus 实例替换旧实例，保留所有计费字段
+ * 与重装的区别：不限制实例状态，且会删除旧实例并创建新实例
+ */
+async function executeRecreateTask(
+  task: { id: number; userId: number; instanceId: number; imageAlias: string | null; sshKeyId: number | null; customInitCommandIds: string | null },
+  instance: {
+    id: number; incus_id: string; name: string; user_id: number; image: string; ipv4: string | null; ipv6: string | null;
+    cpu: number; memory: number; disk: number; network_mode: string; ssh_port: number | null;
+    root_password: string | null; package_id: number | null; host_id: number;
+    port_limit: number | null; snapshot_limit: number | null; backup_limit: number | null; site_limit: number | null;
+    swap_enabled?: boolean; swap_size?: number | null;
+    limits_read?: string | null; limits_write?: string | null; limits_read_iops?: number | null; limits_write_iops?: number | null;
+    limits_ingress?: string | null; limits_egress?: string | null; limits_processes?: number | null; limits_cpu_priority?: number | null;
+    boot_autostart?: boolean | null; boot_autostart_priority?: number | null; boot_autostart_delay?: number | null;
+    boot_host_shutdown_timeout?: number | null;
+  },
+  host: { id: number; name: string; nat_public_ip?: string | null; ip_address?: string | null; ipv6_gateway?: string | null; ipv6_parent_interface?: string | null },
+  client: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  const imageAlias = task.imageAlias || instance.image
+  const oldIncusId = instance.incus_id
+  const allowCancelBusyUpdate = isAlpineImageAlias(instance.image) || isAlpineImageAlias(imageAlias)
+
+  const collectResult = await collectTrafficForRunningInstance(task.instanceId)
+  if (!collectResult.success) {
+    console.warn(`[Recreate] 实例 ${task.instanceId} 重建前即时采集流量失败: ${collectResult.error}`)
+  }
+
+  // 1. 强制停止旧实例（如果正在运行）
+  await updateInstanceTaskProgress(task.id, 'stopping')
+  console.log(`[Recreate] 停止旧实例 ${oldIncusId}...`)
+  try {
+    await stopInstance(client, oldIncusId, false, {
+      allowCancelBusyUpdate,
+      busyUpdateCancelAfterMs: allowCancelBusyUpdate ? ALPINE_BUSY_UPDATE_CANCEL_AFTER_MS : undefined
+    })
+    // 等待停止完成
+    for (let i = 0; i < 30; i++) {
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      try {
+        const state = await getInstanceState(client, oldIncusId) as { status: string }
+        if (state.status.toLowerCase() === 'stopped') break
+      } catch { /* ignore */ }
+    }
+  } catch (err) {
+    // 实例可能已经停止或不存在，继续执行
+    console.warn(`[Recreate] 停止旧实例异常，继续执行:`, err)
+  }
+
+  // 重建会生成全新的系统实例，旧 cloud-init 状态不能继续复用。
+  await resetInstanceCloudInitState(task.instanceId)
+
+  // 2. 删除旧实例的快照
+  await updateInstanceTaskProgress(task.id, 'cleaning_snapshots')
+  try {
+    const snapshots = await listSnapshots(client, oldIncusId) as unknown[]
+    if (snapshots && snapshots.length > 0) {
+      console.log(`[Recreate] 删除 ${snapshots.length} 个快照...`)
+      for (const snapshot of snapshots) {
+        const snapshotName = typeof snapshot === 'string'
+          ? snapshot.split('/').pop()
+          : (snapshot as { name?: string }).name
+        if (snapshotName) {
+          await deleteIncusSnapshot(client, oldIncusId, snapshotName)
+        }
+      }
+    }
+    await prisma.snapshot.deleteMany({ where: { instanceId: task.instanceId } })
+  } catch (_err) {
+    console.warn('[Recreate] 删除快照失败，继续执行')
+  }
+
+  // 3. 删除端口映射、备份、反代站点等关联数据（重建不保留任何数据）
+  try {
+    const deletedPorts = await prisma.portMapping.deleteMany({ where: { instanceId: task.instanceId } })
+    if (deletedPorts.count > 0) {
+      console.log(`[Recreate] 删除 ${deletedPorts.count} 个端口映射记录`)
+    }
+    const deletedBackups = await prisma.backup.deleteMany({ where: { instanceId: task.instanceId } })
+    if (deletedBackups.count > 0) {
+      console.log(`[Recreate] 删除 ${deletedBackups.count} 个备份记录`)
+    }
+    // 删除反代站点
+    const deletedSites = await prisma.proxySite.deleteMany({ where: { instanceId: task.instanceId } })
+    if (deletedSites.count > 0) {
+      console.log(`[Recreate] 删除 ${deletedSites.count} 个反代站点记录`)
+    }
+    // 删除备份策略
+    const deletedBackupPolicy = await prisma.backupPolicy.deleteMany({ where: { instanceId: task.instanceId } })
+    if (deletedBackupPolicy.count > 0) {
+      console.log(`[Recreate] 删除备份策略记录`)
+    }
+    // 删除快照策略
+    const deletedSnapshotPolicy = await prisma.snapshotPolicy.deleteMany({ where: { instanceId: task.instanceId } })
+    if (deletedSnapshotPolicy.count > 0) {
+      console.log(`[Recreate] 删除快照策略记录`)
+    }
+    // 删除流量统计基准（新实例应该重新统计）
+    const deletedTrafficSnapshot = await prisma.trafficSnapshot.deleteMany({ where: { instanceId: task.instanceId } })
+    if (deletedTrafficSnapshot.count > 0) {
+      console.log(`[Recreate] 删除流量统计基准记录`)
+    }
+  } catch (err) {
+    console.warn('[Recreate] 删除关联数据失败，继续执行:', err)
+  }
+
+  // 4. 获取实例类型
+  let instanceType: 'container' | 'virtual-machine' = 'container'
+  let pkg: Awaited<ReturnType<typeof db.getPackageById>> | null = null
+  if (instance.package_id) {
+    pkg = await db.getPackageById(instance.package_id)
+    if (pkg?.instance_type === 'vm') {
+      instanceType = 'virtual-machine'
+    }
+  }
+
+  // 5. 获取 SSH 密钥
+  let sshKey: string | undefined
+  if (task.sshKeyId) {
+    const keyRecord = await db.getSSHKeyById(task.sshKeyId)
+    if (keyRecord && keyRecord.user_id === instance.user_id) {
+      sshKey = keyRecord.public_key
+    }
+  }
+  if (!sshKey) {
+    const userSshKeys = await db.getSSHKeysByUserId(instance.user_id)
+    sshKey = userSshKeys && userSshKeys.length > 0 ? userSshKeys[0].public_key : undefined
+  }
+  if (!sshKey) {
+    console.warn(`[Recreate] Instance ${task.instanceId} has no SSH key; continuing without injecting authorized_keys`)
+  }
+
+  // 6. 处理自定义初始化命令
+  let extraShellCommands: string | undefined
+  if (task.customInitCommandIds) {
+    try {
+      const commandIds = JSON.parse(task.customInitCommandIds) as number[]
+      if (commandIds.length > 0) {
+        const commands = await getCommandsByIds(commandIds)
+        const validCmds = commands.filter(cmd => cmd.userId === instance.user_id && cmd.enabled)
+        const imageDistro = getImageDistroFromAlias(imageAlias)
+        const compatibleCmds = validCmds.filter(cmd =>
+          cmd.distros.includes('all') || cmd.distros.includes(imageDistro)
+        )
+        if (compatibleCmds.length > 0) {
+          extraShellCommands = mergeCommandContents(compatibleCmds)
+          console.log(`[Recreate] 应用 ${compatibleCmds.length} 条自定义初始化命令`)
+        }
+      }
+    } catch (err) {
+      console.warn('[Recreate] 解析自定义初始化命令失败:', err)
+    }
+  }
+
+  // 7. 分配新的随机内网 IPv4 地址（避免 IP 冲突）
+  await updateInstanceTaskProgress(task.id, 'creating')
+  const { generateRandomIPv4 } = await import('../lib/ip-calculator.js')
+  let newIPv4: string | null = null
+  try {
+    let attempts = 0
+    const maxAttempts = 50
+    while (attempts < maxAttempts) {
+      newIPv4 = generateRandomIPv4()
+      // 内网 IPv4 只需在同一宿主机内唯一
+      const exists = await db.isIpAddressExistsOnHost(newIPv4, host.id)
+      if (!exists) {
+        console.log(`[Recreate] 分配新的随机 IPv4: ${newIPv4} (尝试次数: ${attempts + 1})`)
+        break
+      }
+      attempts++
+      newIPv4 = null
+    }
+    if (!newIPv4) {
+      throw new Error('IPv4 地址池已耗尽，无法分配新地址')
+    }
+  } catch (err) {
+    console.error('[Recreate] IPv4 分配失败:', err)
+    throw new Error(`IPv4 分配失败: ${err instanceof Error ? err.message : String(err)}`)
+  }
+
+  // 8. 生成新密码和 cloud-init 配置
+  // 容器类型也传入 network 参数以正确配置 eth0/eth1 静态 IP
+  const newPassword = generateRandomPassword(16)
+  let { configPayload } = generateIncusConfig({
+    instanceName: instance.name,
+    imageAlias,
+    rootPassword: newPassword,
+    sshKey,
+    networkMode: instance.network_mode as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+    type: instanceType,
+    network: instanceType !== 'virtual-machine' ? {
+      ipAddress: `${newIPv4}/22`,
+      gateway: '10.10.0.1',
+      dns: ['10.10.0.1'],
+      ipv6Address: instance.ipv6 ? `${instance.ipv6}/128` : undefined,
+      ipv6Gateway: instance.ipv6 ? 'fe80::1' : undefined
+    } : undefined,
+    extraShellCommands
+  })
+
+  // 9. 生成新 Incus ID
+  const shortId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)()
+  const newIncusId = `u${task.userId}-${shortId}`
+  console.log(`[Recreate] 新实例 ID: ${newIncusId}`)
+
+  // VM 需要 network-config（使用新分配的 IP）
+  if (instanceType === 'virtual-machine') {
+    const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+    const vmResult = generateVmConfig({
+      instanceName: instance.name,
+      instanceIdSeed: newIncusId,
+      imageAlias,
+      rootPassword: newPassword,
+      sshKey,
+      network: {
+        ipAddress: `${newIPv4}/22`,
+        gateway: '10.10.0.1',
+        dns: ['10.10.0.1'],
+        ipv6Address: instance.ipv6 ? `${instance.ipv6}` : undefined,
+        ipv6Gateway: instance.ipv6 ? (host.ipv6_gateway || undefined) : undefined
+      },
+      extraShellCommands
+    })
+    configPayload = vmResult.configPayload
+    console.log(`[Recreate] VM network-config 已更新: IPv4=${newIPv4}, IPv6=${instance.ipv6 || 'none'}`)
+  } else {
+    console.log(`[Recreate] Container network-config 已更新: IPv4=${newIPv4}, IPv6=${instance.ipv6 || 'none'}`)
+  }
+
+  // 10. 选择存储池
+  let storagePool = await db.resolveStoragePoolForExistingInstance(task.instanceId, host.id, { packageId: instance.package_id })
+  if (!storagePool) storagePool = 'default'
+
+  // 11. 构建实例配置（使用新分配的 IPv4）
+  const { buildInstanceConfig } = await import('../lib/incus/incus-instances.js')
+  const ipv6Config = instance.ipv6 ? { primaryIp: instance.ipv6 } : null
+
+  // 根据 ioLimitMode 选择性传入 IO 限制参数
+  const ioMode = (pkg as any)?.io_limit_mode || (pkg as any)?.ioLimitMode || 'throughput'
+
+  const incusConfig = buildInstanceConfig({
+    name: newIncusId,
+    image: imageAlias,
+    cpu: instance.cpu,
+    memory: instance.memory,
+    disk: instance.disk,
+    sshKey: '',
+    password: '',
+    cloudInitConfig: configPayload as { 'user.user-data': string; 'user.network-config'?: string } | undefined,
+    networkMode: (instance.network_mode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+    nested: pkg?.nested ? true : false,
+    privileged: pkg?.privileged ? true : false,
+    instanceType: instanceType === 'virtual-machine' ? 'vm' : 'container',
+    storagePool,
+    ipv4Address: newIPv4,
+    ipv6Config,
+    hostInterface: host.ipv6_parent_interface || 'eth0',
+    ipv6Address: instance.ipv6,
+    ipv6Gateway: host.ipv6_gateway,
+    limitsRead: ioMode === 'throughput' ? instance.limits_read : null,
+    limitsWrite: ioMode === 'throughput' ? instance.limits_write : null,
+    limitsReadIops: ioMode === 'iops' ? instance.limits_read_iops : null,
+    limitsWriteIops: ioMode === 'iops' ? instance.limits_write_iops : null,
+    limitsIngress: instance.limits_ingress,
+    limitsEgress: instance.limits_egress,
+    limitsProcesses: instance.limits_processes,
+    limitsCpuPriority: instance.limits_cpu_priority,
+    bootAutostart: instance.boot_autostart,
+    bootAutostartPriority: instance.boot_autostart_priority,
+    bootAutostartDelay: instance.boot_autostart_delay,
+    bootHostShutdownTimeout: instance.boot_host_shutdown_timeout
+  })
+
+  // 12. 删除旧 Incus 实例（如果还存在）
+  await updateInstanceTaskProgress(task.id, 'deleting_old')
+  console.log(`[Recreate] 删除旧实例 ${oldIncusId}（如果存在）...`)
+  try {
+    await deleteInstance(client, oldIncusId)
+    console.log(`[Recreate] 旧实例 ${oldIncusId} 删除成功`)
+  } catch (err) {
+    // 检查是否是实例不存在的错误
+    const errMsg = err instanceof Error ? err.message : String(err)
+    if (errMsg.includes('not found') || errMsg.includes('Instance not found')) {
+      console.log(`[Recreate] 旧实例 ${oldIncusId} 已不存在，继续执行`)
+    } else {
+      // 其他错误则抛出，不继续执行
+      console.error(`[Recreate] 删除旧实例失败:`, err)
+      throw new Error(`删除旧实例失败: ${errMsg}`)
+    }
+  }
+
+  // 12. 创建新实例
+  console.log(`[Recreate] 创建新实例 ${newIncusId}...`)
+  await createInstance(client, incusConfig)
+
+  if (instanceType === 'container') {
+    await updateInstance(client, newIncusId, {
+      config: {
+        'limits.memory.swap': resolveIncusSwapValue(instance.swap_enabled === true, instance.swap_size)
+      }
+    })
+  }
+
+  // 13. 启动新实例
+  await updateInstanceTaskProgress(task.id, 'starting')
+  console.log(`[Recreate] 启动新实例 ${newIncusId}...`)
+  await startInstance(client, newIncusId)
+
+  // 14. 等待网络初始化
+  let actualIpv6: string | null = null
+  const needsIPv6 = ['nat_ipv6', 'ipv6_only'].includes(instance.network_mode)
+  for (let attempt = 0; attempt < 30; attempt++) {
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    try {
+      const state = await getInstanceState(client, newIncusId) as {
+        network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+      }
+      const stateIpv4 = extractIPv4(state)
+      actualIpv6 = extractIPv6(state)
+      if (needsIPv6) {
+        if (stateIpv4 && actualIpv6) {
+          console.log(`[Recreate] IP 确认成功: IPv4=${stateIpv4}, IPv6=${actualIpv6}`)
+          break
+        }
+      } else {
+        if (stateIpv4) {
+          console.log(`[Recreate] IP 确认成功: IPv4=${stateIpv4}`)
+          break
+        }
+      }
+    } catch { /* ignore */ }
+  }
+
+  // 15. 更新数据库（使用新分配的 IP）
+  await updateInstanceTaskProgress(task.id, 'updating_database')
+
+  // 更新 IpAddress 表（删除旧的 IPv4 记录，创建新的）
+  if (instance.ipv4 && instance.ipv4 !== newIPv4) {
+    // 删除旧的 IPv4 地址记录
+    await prisma.ipAddress.deleteMany({
+      where: {
+        instanceId: task.instanceId,
+        type: 'inet4',
+        address: instance.ipv4
+      }
+    })
+    console.log(`[Recreate] 删除旧 IPv4 记录: ${instance.ipv4}`)
+  }
+
+  // 创建新的 IPv4 地址记录
+  await db.createIpAddress({
+    address: newIPv4,
+    type: 'inet4',
+    isPrimary: true,
+    device: 'eth0',
+    instanceId: task.instanceId
+  })
+  console.log(`[Recreate] 创建新 IPv4 记录: ${newIPv4}`)
+
+  // 更新 Instance 表
+  await prisma.instance.update({
+    where: { id: task.instanceId },
+    data: {
+      incusId: newIncusId,
+      image: imageAlias,
+      rootPassword: encryptSensitiveData(newPassword),
+      status: 'running',
+      ipv4: newIPv4,  // 使用新分配的 IP
+      ipv6: actualIpv6 || instance.ipv6,  // IPv6 可能从网络获取或保留旧值
+      storagePoolName: storagePool
+      // 保留计费字段：packagePlanId, billingPrice, billingCycle, expiresAt, autoRenew 等
+    }
+  })
+
+  // 同步流量限速状态
+  const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+  await reconcileTrafficStateForInstanceIds([task.instanceId])
+
+  console.log(`[Recreate] 重建完成: ${oldIncusId} -> ${newIncusId}, 新 IP: ${newIPv4}`)
+
+  await sendNotification(task.userId, 'instance_rebuilt', {
+    instanceName: instance.name,
+    hostName: host.name,
+    newImage: imageAlias
+  })
+
+  await createLog(task.userId, 'instance', 'instance.recreate', `Recreated instance "${instance.name}" with image ${imageAlias} (${oldIncusId} -> ${newIncusId})`, 'success', { instanceId: task.instanceId })
+}
+
+/**
+ * 执行改节点任务
+ * 在目标节点创建新 Incus 实例，成功切换数据库后再清理源节点旧实例。
+ */
+async function executeChangeHostTask(
+  task: { id: number; userId: number; instanceId: number; targetHostId: number | null; sshKeyId: number | null },
+  instance: {
+    id: number; incus_id: string; name: string; user_id: number; image: string; ipv4: string | null; ipv6: string | null;
+    cpu: number; memory: number; disk: number; network_mode: string; root_password: string | null; package_id: number | null; host_id: number; status: string;
+    swap_enabled?: boolean; swap_size?: number | null; storage_pool_name?: string | null;
+    package_plan_id?: number | null;
+    limits_read?: string | null; limits_write?: string | null; limits_read_iops?: number | null; limits_write_iops?: number | null;
+    limits_ingress?: string | null; limits_egress?: string | null; limits_processes?: number | null; limits_cpu_priority?: number | null;
+    boot_autostart?: boolean | null; boot_autostart_priority?: number | null; boot_autostart_delay?: number | null;
+    boot_host_shutdown_timeout?: number | null;
+  },
+  targetHost: NonNullable<Awaited<ReturnType<typeof db.getHostById>>>,
+  targetClient: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  const targetHostId = task.targetHostId || targetHost.id
+  const sourceHostId = instance.host_id
+  const oldIncusId = instance.incus_id
+  const imageAlias = instance.image
+  let targetResourcesReserved = false
+  let dbSwitched = false
+  let newIncusId = ''
+
+  if (!task.sshKeyId) {
+    throw new Error('改节点失败：请选择 SSH 密钥')
+  }
+  if (targetHostId !== targetHost.id) {
+    throw new Error('任务目标节点与队列节点不一致')
+  }
+  if (targetHostId === sourceHostId) {
+    throw new Error('目标节点不能与当前节点相同')
+  }
+
+  const sourceHost = await db.getHostById(sourceHostId)
+  if (!sourceHost) {
+    throw new Error('源节点不存在')
+  }
+
+  if (!instance.package_id) {
+    throw new Error('该实例没有绑定套餐，无法改节点')
+  }
+
+  const pkg = await db.getPackageById(instance.package_id)
+  if (!pkg) {
+    throw new Error('实例套餐不存在，无法改节点')
+  }
+
+  const packageHostIds = (pkg as { host_ids?: number[] }).host_ids || []
+  if (!packageHostIds.includes(targetHostId)) {
+    throw new Error('目标节点不在该套餐绑定节点中')
+  }
+
+  const packageInstanceType = ((pkg as { instance_type?: 'container' | 'vm' }).instance_type || 'container')
+  const hostInstanceType = targetHost.instance_type || 'container'
+  if (packageInstanceType === 'vm' && hostInstanceType === 'container') {
+    throw new Error('目标节点不支持 KVM 实例')
+  }
+  if (packageInstanceType === 'container' && hostInstanceType === 'vm') {
+    throw new Error('目标节点不支持 LXC 实例')
+  }
+
+  const imageAvailability = await getSystemImageAvailabilityForHost(imageAlias, targetHostId, {
+    instanceType: packageInstanceType,
+    memory: instance.memory
+  })
+  if (!imageAvailability.ok) {
+    throw new Error(`目标节点不可用该镜像: ${imageAvailability.reason}`)
+  }
+
+  const keyRecord = await db.getSSHKeyById(task.sshKeyId)
+  if (!keyRecord || keyRecord.user_id !== instance.user_id) {
+    throw new Error('SSH 密钥不存在或不属于实例所有者')
+  }
+
+  let rootPassword = generateRandomPassword(16)
+  if (instance.root_password) {
+    try {
+      const decrypted = decryptSensitiveData(instance.root_password)
+      if (decrypted) {
+        rootPassword = decrypted
+      }
+    } catch (err) {
+      console.warn(`[ChangeHost] 解密原实例密码失败，将生成新密码:`, err)
+    }
+  }
+
+  try {
+    await updateInstanceTaskProgress(task.id, 'checking_capacity')
+    const reservedHost = await prisma.$transaction(async (tx) => {
+      return db.selectAndReserveHostWithLock(tx, {
+        packageHostIds,
+        cpu: instance.cpu,
+        memory: instance.memory,
+        disk: instance.disk,
+        hostId: targetHostId,
+        ownerId: pkg.user_id || targetHost.user_id,
+        portCount: 0
+      })
+    }, {
+      isolationLevel: 'Serializable',
+      timeout: 15000
+    })
+
+    if (!reservedHost) {
+      throw new Error('目标节点 CPU 或内存容量不足')
+    }
+    targetResourcesReserved = true
+
+    const collectResult = await collectTrafficForRunningInstance(task.instanceId)
+    if (!collectResult.success) {
+      console.warn(`[ChangeHost] 实例 ${task.instanceId} 改节点前即时采集流量失败: ${collectResult.error}`)
+    }
+
+    const closedSessions = closeInstanceSessions(task.instanceId, 'Instance is changing host')
+    if (closedSessions > 0) {
+      console.log(`[ChangeHost] Closed ${closedSessions} terminal session(s) for instance ${task.instanceId}`)
+    }
+
+    await updateInstanceTaskProgress(task.id, 'allocating_network')
+    let staticIPv4: string | null = null
+    for (let attempts = 0; attempts < 50; attempts++) {
+      staticIPv4 = generateRandomIPv4()
+      const exists = await db.isIpAddressExistsOnHost(staticIPv4, targetHostId)
+      if (!exists) break
+      staticIPv4 = null
+    }
+    if (!staticIPv4) {
+      throw new Error('IPv4 地址池已耗尽，无法分配新地址')
+    }
+
+    let staticIPv6: string | null = null
+    const needsRoutedIPv6 = ['nat_ipv6', 'ipv6_only'].includes(instance.network_mode)
+    if (needsRoutedIPv6 && targetHost.ipv6_subnet) {
+      for (let attempts = 0; attempts < 50; attempts++) {
+        staticIPv6 = generateRandomIPv6(targetHost.ipv6_subnet)
+        const exists = await db.isIpAddressExists(staticIPv6)
+        if (!exists) break
+        staticIPv6 = null
+      }
+      if (!staticIPv6) {
+        throw new Error('IPv6 地址池已耗尽，无法分配新地址')
+      }
+    }
+
+    const instanceType = packageInstanceType === 'vm' ? 'virtual-machine' : 'container'
+    const shortId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)()
+    newIncusId = `u${instance.user_id}-${shortId}`
+
+    let { configPayload } = generateIncusConfig({
+      instanceName: instance.name,
+      imageAlias,
+      rootPassword,
+      sshKey: keyRecord.public_key,
+      networkMode: instance.network_mode as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+      type: instanceType,
+      network: {
+        ipAddress: `${staticIPv4}/22`,
+        gateway: '10.10.0.1',
+        dns: ['10.10.0.1'],
+        ipv6Address: staticIPv6 ? `${staticIPv6}/128` : undefined,
+        ipv6Gateway: staticIPv6 ? 'fe80::1' : undefined
+      }
+    })
+
+    if (instanceType === 'virtual-machine') {
+      const { generateVmConfig } = await import('../lib/incus-config-vm.js')
+      const vmResult = generateVmConfig({
+        instanceName: instance.name,
+        instanceIdSeed: newIncusId,
+        imageAlias,
+        rootPassword,
+        sshKey: keyRecord.public_key,
+        network: {
+          ipAddress: `${staticIPv4}/22`,
+          gateway: '10.10.0.1',
+          dns: ['10.10.0.1'],
+          ipv6Address: staticIPv6 ? `${staticIPv6}` : undefined,
+          ipv6Gateway: staticIPv6 ? (targetHost.ipv6_gateway || undefined) : undefined
+        }
+      })
+      configPayload = vmResult.configPayload
+    }
+
+    let storagePool = await db.resolveStoragePoolForNewInstance(targetHostId, { packageId: instance.package_id })
+    if (!storagePool) storagePool = 'default'
+
+    const { buildInstanceConfig } = await import('../lib/incus/incus-instances.js')
+    const ioMode = (pkg as any)?.io_limit_mode || (pkg as any)?.ioLimitMode || 'throughput'
+    const ipv6Config = staticIPv6 ? { primaryIp: staticIPv6 } : null
+
+    const incusConfig = buildInstanceConfig({
+      name: newIncusId,
+      image: imageAlias,
+      cpu: instance.cpu,
+      memory: instance.memory,
+      disk: instance.disk,
+      swapEnabled: instance.swap_enabled === true,
+      swapSize: instance.swap_size ?? null,
+      sshKey: '',
+      password: '',
+      cloudInitConfig: configPayload as { 'user.user-data': string; 'user.network-config'?: string } | undefined,
+      networkMode: (instance.network_mode || 'nat') as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+      nested: Boolean((pkg as any)?.nested),
+      privileged: Boolean((pkg as any)?.privileged),
+      instanceType: packageInstanceType,
+      storagePool,
+      ipv4Address: staticIPv4,
+      ipv6Config,
+      hostInterface: targetHost.ipv6_parent_interface || 'eth0',
+      ipv6Address: staticIPv6,
+      ipv6Gateway: targetHost.ipv6_gateway,
+      limitsRead: ioMode === 'throughput' ? instance.limits_read : null,
+      limitsWrite: ioMode === 'throughput' ? instance.limits_write : null,
+      limitsReadIops: ioMode === 'iops' ? instance.limits_read_iops : null,
+      limitsWriteIops: ioMode === 'iops' ? instance.limits_write_iops : null,
+      limitsIngress: instance.limits_ingress,
+      limitsEgress: instance.limits_egress,
+      limitsProcesses: instance.limits_processes,
+      limitsCpuPriority: instance.limits_cpu_priority,
+      bootAutostart: instance.boot_autostart,
+      bootAutostartPriority: instance.boot_autostart_priority,
+      bootAutostartDelay: instance.boot_autostart_delay,
+      bootHostShutdownTimeout: instance.boot_host_shutdown_timeout
+    })
+
+    await updateInstanceTaskProgress(task.id, 'creating_on_target')
+    console.log(`[ChangeHost] 在目标节点 ${targetHost.name} 创建实例 ${newIncusId}...`)
+    await createInstance(targetClient, incusConfig)
+
+    await updateInstanceTaskProgress(task.id, 'starting_target')
+    await startInstance(targetClient, newIncusId)
+
+    let actualIpv4: string | null = staticIPv4
+    let actualIpv6: string | null = staticIPv6
+    const maxAttempts = instanceType === 'virtual-machine' ? 60 : 30
+    const pollInterval = instanceType === 'virtual-machine' ? 3000 : 2000
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      await new Promise(resolve => setTimeout(resolve, pollInterval))
+      try {
+        const state = await getInstanceState(targetClient, newIncusId) as {
+          network?: Record<string, { addresses?: Array<{ family: string; address: string; scope?: string }> }>
+        }
+        actualIpv4 = extractIPv4(state) || actualIpv4
+        if (needsRoutedIPv6) {
+          actualIpv6 = extractIPv6(state) || actualIpv6
+        }
+        if (needsRoutedIPv6) {
+          if (actualIpv4 && actualIpv6) break
+        } else if (actualIpv4) {
+          break
+        }
+      } catch {
+        // keep waiting
+      }
+    }
+
+    await updateInstanceTaskProgress(task.id, 'switching_database')
+
+    const proxySites = await prisma.proxySite.findMany({
+      where: { instanceId: task.instanceId }
+    })
+    let deletedPortMappingsCount = 0
+    let baseTrafficLimit = pkg.monthly_traffic_limit ? BigInt(pkg.monthly_traffic_limit) : null
+    if (instance.package_plan_id) {
+      const plan = await db.getPlanById(instance.package_plan_id)
+      if (plan && plan.packageId === instance.package_id) {
+        baseTrafficLimit = plan.trafficLimit
+      }
+    }
+
+    await prisma.$transaction(async (tx) => {
+      const monthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(tx as any, {
+        packageId: instance.package_id,
+        hostId: targetHostId,
+        baseTrafficLimit
+      })
+      const currentTraffic = await tx.instance.findUniqueOrThrow({
+        where: { id: task.instanceId },
+        select: { monthlyTrafficUsed: true }
+      })
+
+      const deletedPortMappings = await tx.portMapping.deleteMany({ where: { instanceId: task.instanceId } })
+      deletedPortMappingsCount = deletedPortMappings.count
+      await tx.snapshot.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.backup.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.restoreTask.deleteMany({
+        where: {
+          instanceId: task.instanceId,
+          status: { in: ['COMPLETED', 'FAILED'] }
+        }
+      })
+      await tx.backupUploadTask.deleteMany({
+        where: {
+          instanceId: task.instanceId,
+          status: { in: ['COMPLETED', 'FAILED'] }
+        }
+      })
+      await tx.proxySite.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.backupPolicy.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.snapshotPolicy.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.trafficSnapshot.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.ipAddress.deleteMany({ where: { instanceId: task.instanceId } })
+      await tx.ipv6Subnet.deleteMany({ where: { instanceId: task.instanceId } })
+
+      await tx.instance.update({
+        where: { id: task.instanceId },
+        data: {
+          hostId: targetHostId,
+          incusId: newIncusId,
+          rootPassword: encryptSensitiveData(rootPassword),
+          status: 'running',
+          ipv4: actualIpv4,
+          ipv6: actualIpv6,
+          storagePoolName: storagePool,
+          monthlyTrafficLimit,
+          trafficStatus: calculateInstanceTrafficStatus(currentTraffic.monthlyTrafficUsed, monthlyTrafficLimit),
+          cloudInitState: null,
+          cloudInitSource: null,
+          cloudInitLastCheckedAt: null,
+          cloudInitCompletedAt: null,
+          cloudInitManualCompletedAt: null,
+          cloudInitManualCompletedBy: null
+        }
+      })
+
+      if (actualIpv4) {
+        await tx.ipAddress.create({
+          data: {
+            address: actualIpv4,
+            type: 'inet4',
+            isPrimary: true,
+            isCustom: false,
+            device: 'eth0',
+            hostId: targetHostId,
+            instanceId: task.instanceId
+          }
+        })
+      }
+
+      if (actualIpv6) {
+        await tx.ipAddress.create({
+          data: {
+            address: actualIpv6,
+            type: 'inet6',
+            isPrimary: true,
+            isCustom: false,
+            device: 'eth1',
+            hostId: targetHostId,
+            instanceId: task.instanceId
+          }
+        })
+      }
+    })
+    dbSwitched = true
+
+    if (proxySites.length > 0 && sourceHost.caddy_enabled && sourceHost.caddy_username && sourceHost.caddy_password) {
+      const caddyHost = sourceHost.nat_public_ip || sourceHost.ip_address
+      if (caddyHost) {
+        const caddyClient = createCaddyClient({
+          host: caddyHost,
+          port: sourceHost.caddy_port || 8444,
+          username: sourceHost.caddy_username,
+          password: sourceHost.caddy_password
+        })
+        for (const site of proxySites) {
+          try {
+            await caddyClient.deleteSite(site.domain)
+          } catch (err) {
+            console.warn(`[ChangeHost] 删除 Caddy 站点 ${site.domain} 失败，数据库记录已清理:`, err)
+          }
+        }
+      }
+    }
+
+    await updateInstanceTaskProgress(task.id, 'deleting_old')
+    let sourceClient: Awaited<ReturnType<typeof getIncusClient>> | null = null
+    let sourceInstanceReleased = false
+    try {
+      sourceClient = await getIncusClient(sourceHost)
+      const allowCancelBusyUpdate = isAlpineImageAlias(instance.image)
+      try {
+        await stopInstance(sourceClient, oldIncusId, true, {
+          allowCancelBusyUpdate,
+          busyUpdateCancelAfterMs: allowCancelBusyUpdate ? ALPINE_BUSY_UPDATE_CANCEL_AFTER_MS : undefined
+        })
+      } catch (err) {
+        console.warn(`[ChangeHost] 停止源实例 ${oldIncusId} 失败，继续尝试删除:`, err)
+      }
+      await deleteInstance(sourceClient, oldIncusId)
+      console.log(`[ChangeHost] 源实例 ${oldIncusId} 已删除`)
+      sourceInstanceReleased = true
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : String(err)
+      if (errMsg.includes('not found') || errMsg.includes('Instance not found')) {
+        console.log(`[ChangeHost] 源实例 ${oldIncusId} 已不存在`)
+        sourceInstanceReleased = true
+      } else {
+        console.warn(`[ChangeHost] 源实例 ${oldIncusId} 删除失败，需要人工清理: ${errMsg}`)
+      }
+    }
+
+    try {
+      if (sourceInstanceReleased) {
+        await db.rollbackResources({
+          hostId: sourceHostId,
+          cpu: instance.cpu,
+          memory: instance.memory,
+          disk: instance.disk,
+          portCount: deletedPortMappingsCount
+        })
+
+        const actualSourcePortsUsed = await prisma.portMapping.count({
+          where: {
+            instance: {
+              hostId: sourceHostId,
+              status: { not: 'deleted' }
+            }
+          }
+        })
+        const [sourceResourcesCalculated, targetResourcesCalculated, sourceHostAfterRelease, targetHostCurrent] = await Promise.all([
+          db.calculateHostResourcesFromInstances(sourceHostId),
+          db.calculateHostResourcesFromInstances(targetHostId),
+          prisma.host.findUnique({
+            where: { id: sourceHostId },
+            select: {
+              cpuUsed: true,
+              memoryUsed: true,
+              diskUsed: true,
+              natPortsUsedCount: true
+            }
+          }),
+          prisma.host.findUnique({
+            where: { id: targetHostId },
+            select: {
+              cpuUsed: true,
+              memoryUsed: true,
+              diskUsed: true
+            }
+          })
+        ])
+        const sourceResources = {
+          cpuUsed: Math.max(sourceResourcesCalculated.cpuUsed, sourceHostAfterRelease?.cpuUsed ?? 0),
+          memoryUsed: Math.max(sourceResourcesCalculated.memoryUsed, sourceHostAfterRelease?.memoryUsed ?? 0),
+          diskUsed: Math.max(sourceResourcesCalculated.diskUsed, sourceHostAfterRelease?.diskUsed ?? 0)
+        }
+        const targetResources = {
+          cpuUsed: Math.max(targetResourcesCalculated.cpuUsed, targetHostCurrent?.cpuUsed ?? 0),
+          memoryUsed: Math.max(targetResourcesCalculated.memoryUsed, targetHostCurrent?.memoryUsed ?? 0),
+          diskUsed: Math.max(targetResourcesCalculated.diskUsed, targetHostCurrent?.diskUsed ?? 0)
+        }
+        const sourceNatPortsUsed = Math.max(actualSourcePortsUsed, sourceHostAfterRelease?.natPortsUsedCount ?? 0)
+        await Promise.all([
+          db.updateHostResources(sourceHostId, sourceResources),
+          db.updateHostResources(targetHostId, targetResources),
+          prisma.host.update({
+            where: { id: sourceHostId },
+            data: { natPortsUsedCount: sourceNatPortsUsed }
+          })
+        ])
+      } else {
+        const [targetResourcesCalculated, targetHostCurrent] = await Promise.all([
+          db.calculateHostResourcesFromInstances(targetHostId),
+          prisma.host.findUnique({
+            where: { id: targetHostId },
+            select: {
+              cpuUsed: true,
+              memoryUsed: true,
+              diskUsed: true
+            }
+          })
+        ])
+        const targetResources = {
+          cpuUsed: Math.max(targetResourcesCalculated.cpuUsed, targetHostCurrent?.cpuUsed ?? 0),
+          memoryUsed: Math.max(targetResourcesCalculated.memoryUsed, targetHostCurrent?.memoryUsed ?? 0),
+          diskUsed: Math.max(targetResourcesCalculated.diskUsed, targetHostCurrent?.diskUsed ?? 0)
+        }
+        await db.updateHostResources(targetHostId, targetResources)
+        console.warn(`[ChangeHost] 源实例 ${oldIncusId} 未确认删除，暂不释放源节点 ${sourceHost.name} 的资源占用`)
+      }
+    } catch (err) {
+      console.warn(`[ChangeHost] 更新节点资源失败:`, err)
+    }
+
+    try {
+      const { reconcileTrafficStateForInstanceIds } = await import('../services/traffic-scheduler.js')
+      await reconcileTrafficStateForInstanceIds([task.instanceId])
+    } catch (err) {
+      console.warn(`[ChangeHost] 重算流量调度状态失败:`, err)
+    }
+
+    await sendNotification(instance.user_id, 'instance_host_changed', {
+      instanceName: instance.name,
+      oldHostName: sourceHost.name,
+      newHostName: targetHost.name,
+      ipv4: actualIpv4 || undefined,
+      ipv6: actualIpv6 || undefined
+    })
+
+    await createLog(
+      task.userId,
+      'instance',
+      'instance.change_host',
+      `Changed instance "${instance.name}" host from "${sourceHost.name}" to "${targetHost.name}" (${oldIncusId} -> ${newIncusId})`,
+      'success',
+      { instanceId: task.instanceId }
+    )
+  } catch (err) {
+    if (!dbSwitched) {
+      let targetInstanceReleased = !newIncusId
+      if (newIncusId) {
+        targetInstanceReleased = false
+        try {
+          try {
+            await stopInstance(targetClient, newIncusId, true)
+          } catch {
+            // Instance may not have reached running state; deletion can still proceed.
+          }
+          await deleteInstance(targetClient, newIncusId)
+          targetInstanceReleased = true
+        } catch (cleanupErr) {
+          const cleanupMessage = cleanupErr instanceof Error ? cleanupErr.message : String(cleanupErr)
+          if (cleanupMessage.includes('not found') || cleanupMessage.includes('Instance not found')) {
+            targetInstanceReleased = true
+          } else {
+            console.warn(`[ChangeHost] 清理目标节点新实例 ${newIncusId} 失败:`, cleanupErr)
+          }
+        }
+      }
+      if (targetResourcesReserved) {
+        if (targetInstanceReleased) {
+          try {
+            await db.rollbackResources({
+              hostId: targetHostId,
+              cpu: instance.cpu,
+              memory: instance.memory,
+              disk: instance.disk,
+              portCount: 0
+            })
+          } catch (rollbackErr) {
+            console.warn(`[ChangeHost] 回滚目标节点资源失败:`, rollbackErr)
+          }
+        } else {
+          console.warn(`[ChangeHost] 目标实例 ${newIncusId} 未确认清理，暂不释放目标节点 ${targetHost.name} 的资源预占`)
+        }
+      }
+    }
+    throw err
+  }
+}
+
+/**
+ * 执行克隆任务
+ * 注意：克隆任务比较复杂，需要处理新实例的创建
+ */
+async function executeCloneTask(
+  task: { id: number; userId: number; instanceId: number },
+  sourceInstance: { incus_id: string; name: string; user_id: number; image: string; cpu: number; memory: number; disk: number; network_mode: string; ssh_port: number | null; root_password: string | null; package_id: number | null; package_plan_id?: number | null; host_id: number; port_limit: number | null; snapshot_limit: number | null; backup_limit: number | null; site_limit: number | null; swap_enabled?: boolean; swap_size?: number | null; storage_pool_name?: string | null },
+  host: { id: number; name: string; nat_public_ip?: string | null; ip_address?: string | null; caddy_enabled?: boolean; caddy_username?: string | null; caddy_password?: string | null; caddy_port?: number | null; nat_port_start: number | null; nat_port_end: number | null; nat_ports_used_count?: number; ipv6_subnet?: string | null; ipv6_gateway?: string | null; ipv6_parent_interface?: string | null; cpu_allowance_max?: number; memory_max?: number; instance_type?: 'container' | 'vm' | 'both' },
+  client: Awaited<ReturnType<typeof getIncusClient>>
+): Promise<void> {
+  await updateInstanceTaskProgress(task.id, 'cloning')
+
+  // 生成新实例名称（原名称 + -clone）
+  const newInstanceName = `${sourceInstance.name}-clone`
+  const shortId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 8)()
+  const newIncusId = `u${task.userId}-${shortId}`
+
+  // 获取源实例的端口映射
+  const sourcePortMappings = await db.getPortMappings(task.instanceId)
+
+  // 跟踪资源是否已预占（用于失败时回滚）
+  let resourcesReserved = false
+  let newPortMappingsCount = 0
+
+  try {
+    // 1. 复制实例（使用 Incus copy API）
+    const copyPayload = {
+      name: newIncusId,
+      source: {
+        type: 'copy',
+        source: sourceInstance.incus_id
+      }
+    }
+
+    await client.request('POST', '/1.0/instances', copyPayload, 300000) // 5分钟超时
+
+    // 2. 获取新实例的设备信息，更新端口映射
+    const newInstanceInfo = await getInstance(client, newIncusId) as { devices?: Record<string, { type?: string; listen?: string; connect?: string }> }
+    const devices = newInstanceInfo.devices || {}
+
+    // 查找所有 proxy 设备并更新端口
+    const updatedDevices: Record<string, unknown> = {}
+    const newPortMappings: Array<{ protocol: 'tcp' | 'udp'; publicPort: number; privatePort: number; remark: string | null }> = []
+
+    for (const [deviceName, device] of Object.entries(devices)) {
+      if (device.type === 'proxy' && device.listen) {
+        // 解析 listen 格式：tcp:0.0.0.0:8080
+        const listenMatch = device.listen.match(/^(tcp|udp):(.+):(\d+)$/)
+        if (listenMatch) {
+          const protocol = listenMatch[1] as 'tcp' | 'udp'
+          const connect = device.connect || ''
+
+          // 从源端口映射中找到对应的映射（通过 listen 端口匹配）
+          const listenPort = parseInt(listenMatch[3])
+          const sourceMapping = sourcePortMappings.find(m =>
+            m.protocol === protocol && m.public_port === listenPort
+          )
+
+          // 解析 connect 获取 privatePort
+          const connectMatch = connect.match(/^(tcp|udp):(.+):(\d+)$/)
+          const privatePort = connectMatch ? parseInt(connectMatch[3]) : (sourceMapping?.private_port || 80)
+
+          // 分配新端口
+          const newPublicPort = await db.allocatePort(host.id, protocol)
+          if (!newPublicPort) {
+            throw new Error('No available port for clone operation')
+          }
+
+          // 根据网络模式决定 listen 地址
+          let cloneListenAddr: string
+          const fullHost = await db.getHostById(host.id)
+          const bindableIpv4 = selectBindableIpv4ListenAddress(
+            (fullHost as any)?.nat_bind_ip || null,
+            host.nat_public_ip,
+            fullHost?.url || null,
+            fullHost?.ip_address || null
+          )
+          if (['ipv6_only', 'ipv6_nat'].includes(sourceInstance.network_mode)) {
+            // 纯 IPv6 模式：从数据库获取宿主机的公网 IPv6 地址
+            const hostIpv6 = fullHost?.nat_public_ipv6 || fullHost?.ipv6_gateway || fullHost?.ip_address
+            if (hostIpv6 && hostIpv6.includes(':')) {
+              cloneListenAddr = `[${hostIpv6.replace(/^\[|\]$/g, '')}]`
+            } else {
+              cloneListenAddr = bindableIpv4
+            }
+          } else {
+            cloneListenAddr = bindableIpv4
+          }
+          const cloneConnectAddr = ['ipv6_only', 'ipv6_nat'].includes(sourceInstance.network_mode) ? '[::]' : '0.0.0.0'
+          const proxyConfig: Record<string, string> = {
+            type: 'proxy',
+            listen: `${protocol}:${cloneListenAddr}:${newPublicPort}`,
+            connect: `${protocol}:${cloneConnectAddr}:${privatePort}`
+          }
+          if (!['ipv6_only', 'ipv6_nat'].includes(sourceInstance.network_mode)) {
+            proxyConfig.nat = 'true'
+          }
+          updatedDevices[deviceName] = proxyConfig
+
+          newPortMappings.push({
+            protocol,
+            publicPort: newPublicPort,
+            privatePort,
+            remark: sourceMapping?.remark || null
+          })
+        }
+      } else {
+        // 保留非 proxy 设备
+        updatedDevices[deviceName] = device
+      }
+    }
+
+    // 3. 分配新的 IPv4 地址（克隆实例必须使用新的 IPv4，避免 IP 冲突）
+    let newIPv4: string | null = null
+    try {
+      let attempts = 0
+      const maxAttempts = 50
+
+      while (attempts < maxAttempts) {
+        newIPv4 = generateRandomIPv4()
+        // 内网 IPv4 只需在同一宿主机内唯一（不同宿主机的内网是隔离的）
+        const exists = await db.isIpAddressExistsOnHost(newIPv4, host.id)
+
+        if (!exists) {
+          console.log(`[Clone] 为新实例随机分配 IPv4: ${newIPv4} (尝试次数: ${attempts + 1})`)
+          break
+        }
+
+        attempts++
+        newIPv4 = null
+      }
+
+      if (!newIPv4) {
+        throw new Error('Failed to allocate IPv4 address, pool may be exhausted')
+      }
+
+      // 更新 eth0 设备的 ipv4.address
+      if (updatedDevices['eth0']) {
+        (updatedDevices['eth0'] as Record<string, string>)['ipv4.address'] = newIPv4
+      } else {
+        // 从原设备复制并修改
+        const eth0Device = devices['eth0'] as Record<string, string> | undefined
+        if (eth0Device) {
+          updatedDevices['eth0'] = {
+            ...eth0Device,
+            'ipv4.address': newIPv4
+          }
+        }
+      }
+
+      // NAT 模式使用 connect 0.0.0.0，无需替换为实际 IP
+    } catch (err) {
+      console.error('[Clone] IPv4 分配失败:', err)
+      throw err
+    }
+
+    // 4. 处理 IPv6 地址冲突（dual/ipv6 模式需要分配新 IP）
+    // 新架构: IPv6 在 eth1 (routed 模式)
+    let newIPv6: string | null = null
+
+    // 先计算 IPv6 地址（不创建数据库记录）
+    if (sourceInstance.network_mode !== 'nat' && host.ipv6_subnet) {
+      try {
+        // 随机生成 IPv6 地址，如果地址已存在则重新生成
+        let attempts = 0
+        const maxAttempts = 50
+
+        while (attempts < maxAttempts) {
+          newIPv6 = generateRandomIPv6(host.ipv6_subnet)
+          const exists = await db.isIpAddressExists(newIPv6)
+
+          if (!exists) {
+            console.log(`[Clone] 为新实例随机分配 IPv6: ${newIPv6} (尝试次数: ${attempts + 1})`)
+            break
+          }
+
+          attempts++
+          newIPv6 = null
+        }
+
+        if (!newIPv6) {
+          throw new Error(`无法为新实例找到可用的 IPv6 地址，已尝试 ${maxAttempts} 次随机生成`)
+        }
+
+        // 新架构: 更新 eth1 设备的 IPv6 地址 (routed 模式)
+        if (updatedDevices['eth1']) {
+          (updatedDevices['eth1'] as Record<string, string>)['ipv6.address'] = newIPv6
+        } else {
+          // 如果 eth1 不在 updatedDevices 中，从原设备复制并修改
+          const eth1Device = devices['eth1'] as Record<string, string> | undefined
+          if (eth1Device) {
+            updatedDevices['eth1'] = {
+              ...eth1Device,
+              'ipv6.address': newIPv6
+            }
+          } else {
+            // 创建新的 eth1 设备配置 (routed 模式)
+            updatedDevices['eth1'] = {
+              type: 'nic',
+              nictype: 'routed',
+              parent: host.ipv6_parent_interface || 'eth0',
+              name: 'eth1',
+              'ipv6.address': newIPv6,
+              'security.ipv6_filtering': 'true',
+              'security.mac_filtering': 'true'
+            }
+          }
+        }
+
+        // 生成 cloud-init network-config
+        // 使用新分配的 IPv4 地址和新分配的 IPv6 地址
+        if (newIPv4 && newIPv6) {
+          const { generateCloudInitNetworkConfig } = await import('../lib/network-payload-builder.js')
+          const { generateVmNicMacs } = await import('../lib/vm-network-identifiers.js')
+          const networkConfig = generateCloudInitNetworkConfig({
+            ipv4Address: newIPv4,
+            ipv6List: [newIPv6],
+            nicMacs: generateVmNicMacs(newIncusId)
+          })
+
+          // 更新实例的 cloud-init 配置
+          await updateInstance(client, newIncusId, {
+            config: {
+              'user.network-config': networkConfig
+            }
+          })
+          console.log(`[Clone] 生成 network-config: IPv4=${newIPv4}, IPv6=${newIPv6}`)
+        }
+      } catch (err) {
+        console.warn(`[Clone] IPv6 计算失败:`, err)
+        // 如果 IPv6 计算失败，继续执行但不设置 newIPv6
+        newIPv6 = null
+      }
+    }
+
+    // 4. 更新新实例的设备配置（端口映射 + IPv4 + IPv6）
+    if (Object.keys(updatedDevices).length > 0) {
+      await updateInstance(client, newIncusId, { devices: updatedDevices })
+    }
+
+    // 4.5. 如果只有 IPv4 没有 IPv6（NAT 模式），生成仅 IPv4 的 network-config
+    if (newIPv4 && !newIPv6) {
+      const { generateCloudInitNetworkConfig } = await import('../lib/network-payload-builder.js')
+      const { generateVmNicMacs } = await import('../lib/vm-network-identifiers.js')
+      const networkConfig = generateCloudInitNetworkConfig({
+        ipv4Address: newIPv4,
+        nicMacs: generateVmNicMacs(newIncusId)
+      })
+      await updateInstance(client, newIncusId, {
+        config: {
+          'user.network-config': networkConfig
+        }
+      })
+      console.log(`[Clone] 生成 network-config (NAT 模式): IPv4=${newIPv4}`)
+    }
+
+    // 5. 获取套餐信息
+    const pkg = sourceInstance.package_id ? await db.getPackageById(sourceInstance.package_id) : null
+    if (!pkg) {
+      throw new Error('Package not found for source instance')
+    }
+
+    // 6. 创建数据库记录
+    const snapshotSpecs = {
+      packageId: pkg.id,
+      packageName: pkg.name,
+      cpuMax: pkg.cpu_max,
+      memoryMax: pkg.memory_max,
+      diskMax: pkg.disk_max,
+      networkMode: sourceInstance.network_mode,
+      portLimit: sourceInstance.port_limit || 20,
+      nested: Boolean(pkg.nested),
+      privileged: Boolean(pkg.privileged),
+      nodeSelectors: JSON.parse((pkg as any).node_selectors || '[]'),
+      createdAt: new Date().toISOString()
+    }
+
+    let baseTrafficLimit = pkg.monthly_traffic_limit ? BigInt(pkg.monthly_traffic_limit) : null
+    if (sourceInstance.package_plan_id) {
+      const plan = await db.getPlanById(sourceInstance.package_plan_id)
+      if (plan && plan.packageId === sourceInstance.package_id) {
+        baseTrafficLimit = plan.trafficLimit
+      }
+    }
+    const monthlyTrafficLimit = await resolveInstanceTrafficLimitForHost(prisma as any, {
+      packageId: sourceInstance.package_id,
+      hostId: sourceInstance.host_id,
+      baseTrafficLimit
+    })
+
+    const newInstanceId = await db.createInstance({
+      incusId: newIncusId,
+      name: newInstanceName,
+      userId: task.userId,
+      hostId: sourceInstance.host_id,
+      packageId: sourceInstance.package_id!,
+      storagePoolName: sourceInstance.storage_pool_name ?? null,
+      image: sourceInstance.image,
+      cpu: sourceInstance.cpu,
+      memory: sourceInstance.memory,
+      disk: sourceInstance.disk,
+      networkMode: sourceInstance.network_mode as 'nat' | 'nat_ipv6' | 'nat_ipv6_nat' | 'ipv6_only' | 'ipv6_nat',
+      snapshotSpecs,
+      sshPort: 22,  // SSH 端口固定为 22
+      rootPassword: sourceInstance.root_password, // 复制密码
+      monthlyTrafficLimit,
+      // 复制配额限制
+      portLimit: sourceInstance.port_limit,
+      snapshotLimit: sourceInstance.snapshot_limit,
+      backupLimit: sourceInstance.backup_limit,
+      siteLimit: sourceInstance.site_limit,
+      swapEnabled: sourceInstance.swap_enabled === true,
+      swapSize: sourceInstance.swap_size ?? null
+    })
+
+    // 8. 创建端口映射记录
+    for (const mapping of newPortMappings) {
+      await db.createPortMapping({
+        instanceId: newInstanceId,
+        hostId: sourceInstance.host_id,
+        protocol: mapping.protocol,
+        publicPort: mapping.publicPort,
+        privatePort: mapping.privatePort,
+        remark: mapping.remark || undefined
+      })
+    }
+
+    // 9. 创建 IP 地址记录并更新实例的 ipv4/ipv6 字段
+    // 创建 IPv4 地址记录
+    if (newIPv4) {
+      await db.createIpAddress({
+        address: newIPv4,
+        type: 'inet4',
+        isPrimary: true,
+        device: 'eth0',
+        instanceId: newInstanceId
+      })
+      // 更新实例的 ipv4 字段
+      await prisma.instance.update({
+        where: { id: newInstanceId },
+        data: { ipv4: newIPv4 }
+      })
+      console.log(`[Clone] 新实例 ${newInstanceId} IPv4 已更新: ${newIPv4} (device: eth0)`)
+    }
+
+    // 创建 IPv6 地址记录
+    if (newIPv6) {
+      // 创建 IP 地址记录（实例已创建，可以使用有效的 instanceId）
+      // 新架构: device 为 eth1
+      await db.createIpAddress({
+        address: newIPv6,
+        type: 'inet6',
+        isPrimary: true,
+        device: 'eth1',
+        instanceId: newInstanceId
+      })
+      // 更新实例的 ipv6 字段
+      await prisma.instance.update({
+        where: { id: newInstanceId },
+        data: { ipv6: newIPv6 }
+      })
+      console.log(`[Clone] 新实例 ${newInstanceId} IPv6 已更新: ${newIPv6} (device: eth1)`)
+    }
+
+    // 10. 更新资源使用量
+    newPortMappingsCount = newPortMappings.length
+    await db.reserveResources({
+      hostId: sourceInstance.host_id,
+      cpu: sourceInstance.cpu,
+      memory: sourceInstance.memory,
+      disk: sourceInstance.disk,
+      portCount: newPortMappingsCount
+    })
+    resourcesReserved = true
+
+    // 11. 更新实例状态为 stopped（因为复制后默认是停止状态）
+    await db.updateInstanceStatus(newInstanceId, 'stopped')
+
+    // 更新任务记录，记录新实例ID
+    await prisma.instanceTask.update({
+      where: { id: task.id },
+      data: { newInstanceId }
+    })
+
+    await sendNotification(task.userId, 'instance_cloned', {
+      instanceName: sourceInstance.name,
+      newInstanceName: newInstanceName,
+      hostName: host.name
+    })
+
+    await createLog(
+      task.userId,
+      'instance',
+      'instance.clone',
+      `Cloned instance "${sourceInstance.name}" to "${newInstanceName}" [new instance ID: ${newInstanceId}]`,
+      'success',
+      { instanceId: newInstanceId }
+    )
+  } catch (error) {
+    // 如果创建失败，尝试清理已创建的资源
+
+    // 1. 清理 Incus 中的实例
+    try {
+      await deleteInstance(client, newIncusId)
+      console.log(`[Clone] 已清理失败的 Incus 实例: ${newIncusId}`)
+    } catch (cleanupErr) {
+      console.warn(`[Clone] 清理失败 Incus 实例失败（可能不存在）: ${newIncusId}`, cleanupErr)
+    }
+
+    // 2. 清理数据库中的 Instance 记录（如果已创建）
+    // Instance 删除后会级联删除 PortMapping、IpAddress 等记录
+    try {
+      // 检查是否存在具有该 incusId 的实例记录
+      const existingInstance = await prisma.instance.findFirst({
+        where: { incusId: newIncusId }
+      })
+      if (existingInstance) {
+        await prisma.instance.delete({
+          where: { id: existingInstance.id }
+        })
+        console.log(`[Clone] 已清理失败的 Instance 记录: ${existingInstance.id}`)
+      }
+    } catch (dbCleanupErr) {
+      console.warn(`[Clone] 清理 Instance 记录失败:`, dbCleanupErr)
+    }
+
+    // 3. 回滚已预占的宿主机资源（如果已预占）
+    if (resourcesReserved) {
+      try {
+        await db.rollbackResources({
+          hostId: sourceInstance.host_id,
+          cpu: sourceInstance.cpu,
+          memory: sourceInstance.memory,
+          disk: sourceInstance.disk,
+          portCount: newPortMappingsCount
+        })
+        console.log(`[Clone] 已回滚宿主机资源`)
+      } catch (rollbackErr) {
+        console.error(`[Clone] 回滚资源失败:`, rollbackErr)
+      }
+    }
+
+    throw error
+  }
+}
+
+/**
+ * 启动 Worker
+ */
+export function startInstanceTaskWorker(): void {
+  if (workerInterval) {
+    console.warn('[InstanceTaskWorker] Worker already running')
+    return
+  }
+
+  console.log('[InstanceTaskWorker] 启动 Worker...')
+
+  // 立即清理僵尸任务
+  cleanupStaleTasks().catch(err => {
+    console.error('[InstanceTaskWorker] 清理僵尸任务失败:', err)
+    dbBackoff.arm(err)
+  })
+
+  // 定时处理队列
+  workerInterval = setInterval(() => {
+    processQueue().catch(err => {
+      console.error('[InstanceTaskWorker] 队列处理错误:', err)
+      dbBackoff.arm(err)
+    })
+  }, POLL_INTERVAL)
+
+  // 定时检查超时任务
+  timeoutCheckInterval = setInterval(() => {
+    cleanupTimeoutTasks().catch(err => {
+      console.error('[InstanceTaskWorker] 超时检查错误:', err)
+      dbBackoff.arm(err)
+    })
+  }, TIMEOUT_CHECK_INTERVAL)
+
+  console.log('[InstanceTaskWorker] Worker 已启动')
+}
+
+/**
+ * 停止 Worker
+ */
+export function stopInstanceTaskWorker(): void {
+  if (workerInterval) {
+    clearInterval(workerInterval)
+    workerInterval = null
+  }
+  if (timeoutCheckInterval) {
+    clearInterval(timeoutCheckInterval)
+    timeoutCheckInterval = null
+  }
+  console.log('[InstanceTaskWorker] Worker 已停止')
+}
diff --git a/server/src/workers/restoreTaskWorker.ts b/server/src/workers/restoreTaskWorker.ts
new file mode 100644
index 0000000..9845613
--- /dev/null
+++ b/server/src/workers/restoreTaskWorker.ts
@@ -0,0 +1,536 @@
+/**
+ * 恢复任务队列调度器
+ * 确保同一台宿主机同一时间只有一个恢复任务在执行
+ */
+
+import { prisma } from '../db/prisma.js'
+import { resolveStoragePoolForExistingInstance } from '../db/storage-pools.js'
+import { getIncusClient } from '../lib/incus/index.js'
+import { getBackupExportStream } from '../lib/incus/incus-backups.js'
+import {
+    restoreFromStream,
+    renameInstance
+} from '../lib/incus/incus-restore.js'
+import {
+    stopInstance,
+    startInstance,
+    deleteInstance
+} from '../lib/incus/incus-instances.js'
+import { listBackups, deleteBackup as deleteIncusBackup } from '../lib/incus/incus-backups.js'
+import { listSnapshots, deleteSnapshot as deleteIncusSnapshot } from '../lib/incus/incus-snapshots.js'
+import { sendNotification } from '../lib/notifier.js'
+import { createLog } from '../db/logs.js'
+import { collectTrafficForRunningInstance } from '../services/instance-traffic-collector.js'
+import { Readable } from 'stream'
+import {
+    HOST_TASK_CLAIM_LOCK_NAMESPACE,
+    INSTANCE_OPERATION_LOCK_NAMESPACE,
+    tryAdvisoryTransactionLock
+} from '../db/advisory-locks.js'
+import { createWorkerDbBackoff } from './db-failure-backoff.js'
+
+// 恢复任务超时时间 (10 分钟)
+const RESTORE_TIMEOUT = 10 * 60 * 1000
+
+// Worker 轮询间隔 (5 秒)
+const POLL_INTERVAL = 5000
+
+// 超时检查间隔 (1 分钟)
+const TIMEOUT_CHECK_INTERVAL = 60000
+
+let workerInterval: ReturnType<typeof setInterval> | null = null
+let timeoutCheckInterval: ReturnType<typeof setInterval> | null = null
+const dbBackoff = createWorkerDbBackoff('RestoreWorker')
+
+/**
+ * 服务启动时清理僵尸任务
+ * 把所有 PROCESSING 状态的任务标记为 FAILED
+ */
+export async function cleanupStaleTasks(): Promise<void> {
+    const result = await prisma.restoreTask.updateMany({
+        where: { status: 'PROCESSING' },
+        data: {
+            status: 'FAILED',
+            error: '系统重启，任务中断',
+            finishedAt: new Date()
+        }
+    })
+    if (result.count > 0) {
+        console.log(`[RestoreWorker] 清理了 ${result.count} 个僵尸任务`)
+    }
+}
+
+/**
+ * 运行时检查并清理超时的任务
+ * 每分钟检查一次，将超过超时时间的 PROCESSING 任务标记为 FAILED
+ */
+async function cleanupTimeoutTasks(): Promise<void> {
+    if (dbBackoff.shouldSkip()) return
+    const timeoutThreshold = new Date(Date.now() - RESTORE_TIMEOUT)
+    
+    const result = await prisma.restoreTask.updateMany({
+        where: {
+            status: 'PROCESSING',
+            startedAt: { lt: timeoutThreshold }
+        },
+        data: {
+            status: 'FAILED',
+            error: '任务执行超时 (10 分钟)',
+            finishedAt: new Date()
+        }
+    })
+    
+    if (result.count > 0) {
+        console.log(`[RestoreWorker] 清理了 ${result.count} 个超时任务`)
+    }
+}
+
+/**
+ * 检查队列并执行任务
+ */
+async function processQueue(): Promise<void> {
+    if (dbBackoff.shouldSkip()) return
+    try {
+        // 1. 获取所有有 PENDING 任务的宿主机 ID (去重)
+        const hostsWithPendingTasks = await prisma.restoreTask.groupBy({
+            by: ['hostId'],
+            where: { status: 'PENDING' }
+        })
+
+        for (const group of hostsWithPendingTasks) {
+            const hostId = group.hostId
+
+            // 使用事务原子操作：检查锁 + 获取任务 + 标记为 PROCESSING
+            const claimedTask = await claimNextTask(hostId)
+            
+            if (claimedTask) {
+                // 执行任务 (不 await，让它异步跑)
+                executeRestoreTask(claimedTask.id).catch(err => {
+                    console.error(`[RestoreWorker] Task ${claimedTask.id} execution error:`, err)
+                })
+            }
+        }
+    } catch (err) {
+        console.error('[RestoreWorker] Queue processing error:', err)
+        dbBackoff.arm(err)
+    }
+}
+
+/**
+ * 原子操作：获取并锁定下一个任务
+ * 使用事务确保检查锁和获取任务是原子的，防止竞态条件
+ */
+async function claimNextTask(hostId: number) {
+        return await prisma.$transaction(async (tx) => {
+            const locked = await tryAdvisoryTransactionLock(tx, HOST_TASK_CLAIM_LOCK_NAMESPACE, hostId)
+            if (!locked) return null
+
+            // 1. 检查是否有正在执行的恢复任务
+            const runningRestoreTask = await tx.restoreTask.findFirst({
+                where: { hostId, status: 'PROCESSING' }
+            })
+            if (runningRestoreTask) return null
+
+            // 2. 检查是否有正在执行的上传任务（共享锁）
+            const runningUploadTask = await tx.backupUploadTask.findFirst({
+                where: { hostId, status: 'PROCESSING' }
+            })
+            if (runningUploadTask) return null
+
+            // 3. 检查是否有正在执行的实例任务（共享锁）
+            const runningInstanceTask = await tx.instanceTask.findFirst({
+                where: { hostId, status: 'PROCESSING' }
+            })
+            if (runningInstanceTask) return null
+
+            // 4. 获取最早的 PENDING 任务
+            const taskToRun = await tx.restoreTask.findFirst({
+                where: { hostId, status: 'PENDING' },
+                orderBy: { createdAt: 'asc' }
+            })
+            if (!taskToRun) return null
+
+            const instanceOperationLocked = await tryAdvisoryTransactionLock(tx, INSTANCE_OPERATION_LOCK_NAMESPACE, taskToRun.instanceId)
+            if (!instanceOperationLocked) return null
+
+            const instance = await tx.instance.findUnique({
+                where: { id: taskToRun.instanceId },
+                select: { status: true }
+            })
+            if (!instance || instance.status === 'deleted') return null
+
+            // 5. 原子标记为 PROCESSING
+            const claimedTask = await tx.restoreTask.update({
+                where: { id: taskToRun.id },
+                data: { status: 'PROCESSING', startedAt: new Date() }
+            })
+
+            return claimedTask
+        })
+}
+
+
+/**
+ * 更新任务进度
+ */
+async function updateProgress(taskId: number, progress: string): Promise<void> {
+    await prisma.restoreTask.update({
+        where: { id: taskId },
+        data: { progress }
+    })
+}
+
+
+/**
+ * 执行单个恢复任务
+ * 工作流: 停止原实例 -> 恢复到临时实例 -> 删除原实例 -> 重命名 -> 启动
+ * 注意：任务已在 claimNextTask 中标记为 PROCESSING
+ */
+async function executeRestoreTask(taskId: number): Promise<void> {
+    const startTime = Date.now()
+
+    // 获取任务信息（已在事务中标记为 PROCESSING）
+    const task = await prisma.restoreTask.findUnique({
+        where: { id: taskId }
+    })
+
+    if (!task) {
+        console.error(`[RestoreWorker] Task ${taskId} not found`)
+        return
+    }
+
+    console.log(`[RestoreWorker] 开始执行任务 ${taskId}`)
+
+    try {
+        // 2. 获取相关数据
+        const host = await prisma.host.findUnique({ where: { id: task.hostId } })
+        if (!host) throw new Error('宿主机不存在')
+
+        const instance = await prisma.instance.findUnique({ where: { id: task.instanceId } })
+        if (!instance) throw new Error('实例不存在')
+        if (instance.status === 'deleted') throw new Error('实例已删除，任务取消')
+
+        const backup = task.backupId
+            ? await prisma.backup.findUnique({ where: { id: task.backupId } })
+            : null
+        if (task.backupId && !backup) throw new Error('备份不存在')
+
+        const client = await getIncusClient({
+            id: host.id,
+            url: host.url,
+            certPath: host.certPath,
+            keyPath: host.keyPath
+        })
+
+        const checkTimeout = () => {
+            if (Date.now() - startTime > RESTORE_TIMEOUT) {
+                throw new Error('恢复操作超时 (10 分钟)')
+            }
+        }
+
+        // 3. 停止原实例
+        await updateProgress(taskId, 'stopping')
+        console.log(`[RestoreWorker] Task ${taskId}: 停止原实例 ${task.originalIncusId}`)
+        const collectResult = await collectTrafficForRunningInstance(task.instanceId)
+        if (!collectResult.success) {
+            console.warn(`[RestoreWorker] Task ${taskId}: 恢复前即时采集流量失败: ${collectResult.error}`)
+        }
+        try {
+            await stopInstance(client, task.originalIncusId, true)
+        } catch (err) {
+            console.warn(`[RestoreWorker] Task ${taskId}: 停止实例警告: ${err}`)
+        }
+        checkTimeout()
+
+        // 4. 获取存储池配置
+        // 使用宿主机的系统盘存储池，确保恢复的实例使用正确的存储池
+        const storagePool = await resolveStoragePoolForExistingInstance(task.instanceId, task.hostId, {
+            packageId: instance.packageId
+        })
+        if (!storagePool) {
+            throw new Error('宿主机未配置系统盘存储池，无法恢复实例')
+        }
+        console.log(`[RestoreWorker] Task ${taskId}: 使用存储池 ${storagePool}`)
+
+        // 5. 获取备份流并恢复到临时实例
+        await updateProgress(taskId, 'restoring')
+        if (!backup) {
+            throw new Error('备份记录不存在')
+        }
+        console.log(`[RestoreWorker] Task ${taskId}: 恢复到临时实例 ${task.tempInstanceName}`)
+        const { stream } = await getBackupExportStream(
+            client,
+            task.originalIncusId,
+            backup.incusName
+        )
+        const nodeStream = Readable.fromWeb(stream as import('stream/web').ReadableStream)
+
+        await restoreFromStream({
+            client,
+            backupStream: nodeStream,
+            targetName: task.tempInstanceName!,
+            poolName: storagePool
+        })
+        checkTimeout()
+
+        // 6. 删除原实例在 Incus 中的所有备份和快照
+        await updateProgress(taskId, 'cleaning')
+        console.log(`[RestoreWorker] Task ${taskId}: 清理原实例的备份和快照`)
+        try {
+            // 删除 Incus 中的备份
+            const incusBackups = await listBackups(client, task.originalIncusId)
+            for (const b of incusBackups) {
+                const backupName = b.name
+                if (backupName) {
+                    try {
+                        await deleteIncusBackup(client, task.originalIncusId, backupName)
+                        console.log(`[RestoreWorker] Task ${taskId}: 已删除 Incus 备份 ${backupName}`)
+                    } catch (e) {
+                        console.warn(`[RestoreWorker] Task ${taskId}: 删除 Incus 备份失败: ${e}`)
+                    }
+                }
+            }
+            // 删除 Incus 中的快照
+            const incusSnapshots = await listSnapshots(client, task.originalIncusId)
+            for (const s of incusSnapshots) {
+                const snapshotName = s.name
+                if (snapshotName) {
+                    try {
+                        await deleteIncusSnapshot(client, task.originalIncusId, snapshotName)
+                        console.log(`[RestoreWorker] Task ${taskId}: 已删除 Incus 快照 ${snapshotName}`)
+                    } catch (e) {
+                        console.warn(`[RestoreWorker] Task ${taskId}: 删除 Incus 快照失败: ${e}`)
+                    }
+                }
+            }
+        } catch (e) {
+            console.warn(`[RestoreWorker] Task ${taskId}: 清理备份/快照时出错: ${e}`)
+        }
+
+        // 7. 删除原实例
+        await updateProgress(taskId, 'replacing')
+        console.log(`[RestoreWorker] Task ${taskId}: 删除原实例 ${task.originalIncusId}`)
+        await deleteInstance(client, task.originalIncusId)
+        checkTimeout()
+
+        // 8. 重命名临时实例为原名
+        console.log(`[RestoreWorker] Task ${taskId}: 重命名 ${task.tempInstanceName} -> ${task.originalIncusId}`)
+        await renameInstance(client, task.tempInstanceName!, task.originalIncusId)
+
+        await prisma.trafficSnapshot.deleteMany({ where: { instanceId: task.instanceId } })
+
+        // 9. 启动恢复后的实例
+        await updateProgress(taskId, 'starting')
+        console.log(`[RestoreWorker] Task ${taskId}: 启动实例`)
+        await startInstance(client, task.originalIncusId)
+
+        // 10. 删除数据库中原实例的备份和快照记录（除了用于恢复的那个备份）
+        console.log(`[RestoreWorker] Task ${taskId}: 清理数据库中的备份和快照记录`)
+        await prisma.backup.updateMany({
+            where: {
+                instanceId: task.instanceId,
+                id: { not: task.backupId ?? -1 } // 保留用于恢复的备份
+            },
+            data: { status: 'deleted' }
+        })
+        await prisma.snapshot.deleteMany({
+            where: { instanceId: task.instanceId }
+        })
+
+        // 11. 更新实例名称和恢复来源信息（在标记成功之前，确保原子性）
+        // 名称格式: 原名 | restored:备份名
+        const newInstanceName = `${task.originalInstanceName} | restored:${backup?.name || 'unknown'}`
+        const instanceUpdateResult = await prisma.instance.updateMany({
+            where: {
+                id: task.instanceId,
+                status: { not: 'deleted' }
+            },
+            data: {
+                name: newInstanceName,
+                storagePoolName: storagePool,
+                restoredFrom: {
+                    backupId: task.backupId,
+                    backupName: backup?.name,
+                    restoredAt: new Date().toISOString()
+                }
+            }
+        })
+        if (instanceUpdateResult.count === 0) {
+            throw new Error('实例已删除，恢复结果不再写入')
+        }
+
+        // 12. 标记成功
+        await prisma.restoreTask.update({
+            where: { id: taskId },
+            data: { status: 'COMPLETED', finishedAt: new Date() }
+        })
+
+        console.log(`[RestoreWorker] Task ${taskId}: 恢复完成`)
+
+        // 发送通知
+        await sendNotification(task.userId, 'backup_restored', {
+            instanceName: task.originalInstanceName,
+            backupName: backup?.name || '未知',
+            hostName: host.name
+        })
+
+        await createLog(
+            task.userId,
+            'backup',
+            'backup.restore',
+            `Successfully restored instance "${task.originalInstanceName}" from backup "${backup?.name}"`,
+            'success',
+            { instanceId: task.instanceId }
+        )
+
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err)
+        console.error(`[RestoreWorker] Task ${taskId} failed:`, errorMessage)
+
+        // 尝试清理临时实例
+        if (task.tempInstanceName) {
+            try {
+                const host = await prisma.host.findUnique({ where: { id: task.hostId } })
+                if (host) {
+                    const client = await getIncusClient({
+                        id: host.id,
+                        url: host.url,
+                        certPath: host.certPath,
+                        keyPath: host.keyPath
+                    })
+                    const { instanceExists } = await import('../lib/incus/incus-restore.js')
+                    const tempExists = await instanceExists(client, task.tempInstanceName)
+                    if (tempExists) {
+                        await deleteInstance(client, task.tempInstanceName)
+                        console.log(`[RestoreWorker] Task ${taskId}: 已清理临时实例 ${task.tempInstanceName}`)
+                    }
+                }
+            } catch (cleanupErr) {
+                console.warn(`[RestoreWorker] Task ${taskId}: 清理临时实例失败:`, cleanupErr)
+            }
+        }
+
+        await prisma.restoreTask.update({
+            where: { id: taskId },
+            data: {
+                status: 'FAILED',
+                error: errorMessage,
+                finishedAt: new Date()
+            }
+        })
+
+        await createLog(
+            task.userId,
+            'backup',
+            'backup.restore',
+            `Failed to restore instance "${task.originalInstanceName}": ${errorMessage}`,
+            'failed',
+            { instanceId: task.instanceId }
+        )
+    }
+}
+
+/**
+ * 启动恢复任务 Worker
+ */
+export function startRestoreWorker(): void {
+    if (workerInterval) {
+        console.warn('[RestoreWorker] Worker 已在运行')
+        return
+    }
+    console.log('[RestoreWorker] 启动恢复任务调度器')
+    workerInterval = setInterval(() => {
+        processQueue().catch(err => {
+            console.error('[RestoreWorker] 队列处理错误:', err)
+            dbBackoff.arm(err)
+        })
+    }, POLL_INTERVAL)
+    
+    // 启动超时检查定时器
+    if (!timeoutCheckInterval) {
+        timeoutCheckInterval = setInterval(() => {
+            cleanupTimeoutTasks().catch(err => {
+                console.error('[RestoreWorker] 超时检查错误:', err)
+                dbBackoff.arm(err)
+            })
+        }, TIMEOUT_CHECK_INTERVAL)
+        console.log('[RestoreWorker] 启动超时任务检查器')
+    }
+}
+
+/**
+ * 停止恢复任务 Worker
+ */
+export function stopRestoreWorker(): void {
+    if (workerInterval) {
+        clearInterval(workerInterval)
+        workerInterval = null
+        console.log('[RestoreWorker] 恢复任务调度器已停止')
+    }
+    if (timeoutCheckInterval) {
+        clearInterval(timeoutCheckInterval)
+        timeoutCheckInterval = null
+        console.log('[RestoreWorker] 超时任务检查器已停止')
+    }
+}
+
+/**
+ * 检查实例是否有正在进行的恢复任务
+ */
+export async function hasActiveRestoreTask(instanceId: number): Promise<{ id: number } | null> {
+    return prisma.restoreTask.findFirst({
+        where: {
+            instanceId,
+            status: { in: ['PENDING', 'PROCESSING'] }
+        },
+        select: { id: true }
+    })
+}
+
+/**
+ * 获取任务在队列中的位置
+ * 考虑共享锁：上传任务和恢复任务互斥
+ */
+export async function getQueuePosition(taskId: number): Promise<number> {
+    const task = await prisma.restoreTask.findUnique({
+        where: { id: taskId },
+        select: { hostId: true, createdAt: true, status: true }
+    })
+
+    if (!task || task.status !== 'PENDING') return 0
+
+    // 检查是否有正在执行的恢复任务
+    const processingRestoreTask = await prisma.restoreTask.findFirst({
+        where: {
+            hostId: task.hostId,
+            status: 'PROCESSING'
+        },
+        orderBy: { createdAt: 'asc' }
+    })
+
+    // 检查是否有正在执行的上传任务（共享锁）
+    const processingUploadTask = await prisma.backupUploadTask.findFirst({
+        where: {
+            hostId: task.hostId,
+            status: 'PROCESSING'
+        },
+        orderBy: { createdAt: 'asc' }
+    })
+
+    // 如果有 PROCESSING 任务（恢复或上传），且创建时间早于当前任务，则位置+1
+    const hasProcessingTask =
+        (processingRestoreTask && processingRestoreTask.createdAt < task.createdAt) ||
+        (processingUploadTask && processingUploadTask.createdAt < task.createdAt)
+    const processingCount = hasProcessingTask ? 1 : 0
+
+    // 统计创建时间更早的 PENDING 恢复任务数量
+    const pendingCount = await prisma.restoreTask.count({
+        where: {
+            hostId: task.hostId,
+            status: 'PENDING',
+            createdAt: { lt: task.createdAt }
+        }
+    })
+
+    return processingCount + pendingCount + 1
+}
diff --git a/server/templates/agent-install.sh b/server/templates/agent-install.sh
new file mode 100644
index 0000000..23d0fb3
--- /dev/null
+++ b/server/templates/agent-install.sh
@@ -0,0 +1,375 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SERVICE_NAME="incudal-agent"
+CONFIG_DIR="${INCUDAL_CONFIG_DIR:-/etc/incudal-agent}"
+CONFIG_FILE="${INCUDAL_CONFIG_FILE:-${CONFIG_DIR}/config.yaml}"
+INSTALL_DIR="${INCUDAL_INSTALL_DIR:-/usr/local/bin}"
+BIN_PATH="${INCUDAL_AGENT_BIN:-${INSTALL_DIR}/incudal-agent}"
+SERVICE_FILE="${INCUDAL_SERVICE_FILE:-/etc/systemd/system/${SERVICE_NAME}.service}"
+HEARTBEAT_INTERVAL="${INCUDAL_HEARTBEAT_INTERVAL_SECONDS:-30}"
+REQUEST_TIMEOUT="${INCUDAL_REQUEST_TIMEOUT_SECONDS:-10}"
+DRY_RUN="${INCUDAL_AGENT_DRY_RUN:-0}"
+INSTALL_CONFIG_PATH=""
+
+fail() {
+  echo "error: $*" >&2
+  exit 1
+}
+
+need_env() {
+  local name="$1"
+  if [ -z "${!name:-}" ]; then
+    fail "${name} is required"
+  fi
+}
+
+detect_os() {
+  case "$(uname -s)" in
+    Linux) echo "linux" ;;
+    *) fail "unsupported OS: $(uname -s)" ;;
+  esac
+}
+
+detect_arch() {
+  case "$(uname -m)" in
+    x86_64|amd64) echo "amd64" ;;
+    aarch64|arm64) echo "arm64" ;;
+    *) fail "unsupported architecture: $(uname -m)" ;;
+  esac
+}
+
+run() {
+  if [ "${DRY_RUN}" = "1" ]; then
+    printf '+'
+    printf ' %q' "$@"
+    printf '\n'
+    return 0
+  fi
+  "$@"
+}
+
+write_file() {
+  local path="$1"
+  local mode="$2"
+  local owner="$3"
+  local tmp
+
+  if [ "${DRY_RUN}" = "1" ]; then
+    echo "+ write ${path} mode=${mode} owner=${owner}"
+    sed 's/^/| /'
+    return 0
+  fi
+
+  tmp="$(mktemp)"
+  cat > "${tmp}"
+  install -d -m 0755 "$(dirname "${path}")"
+  install -m "${mode}" -o "${owner%%:*}" -g "${owner##*:}" "${tmp}" "${path}"
+  rm -f "${tmp}"
+}
+
+download_binary_once() {
+  local binary_url="$1"
+  local target="$2"
+  local expected_sha256="${3:-}"
+  local binary_path="${binary_url%%\?*}"
+  binary_path="${binary_path%%#*}"
+
+  if [ "${DRY_RUN}" = "1" ]; then
+    echo "+ download ${binary_url} -> ${target}"
+    if [ -n "${expected_sha256}" ]; then
+      echo "+ verify sha256 ${expected_sha256} ${target}.download"
+    fi
+    return 0
+  fi
+
+  install -d -m 0755 "$(dirname "${target}")"
+  if [[ "${binary_url}" == file://* ]]; then
+    install -m 0644 "${binary_url#file://}" "${target}.download" || return 1
+  else
+    command -v curl >/dev/null 2>&1 || fail "curl is required"
+    curl -fsSL "${binary_url}" -o "${target}.download" || {
+      rm -f "${target}.download"
+      return 1
+    }
+  fi
+
+  if [ -n "${expected_sha256}" ]; then
+    verify_sha256 "${target}.download" "${expected_sha256}" || {
+      rm -f "${target}.download"
+      return 1
+    }
+  fi
+
+  if [[ "${binary_path}" == *.gz ]]; then
+    command -v gzip >/dev/null 2>&1 || {
+      rm -f "${target}.download"
+      return 1
+    }
+    gzip -dc "${target}.download" > "${target}.tmp" || {
+      rm -f "${target}.download" "${target}.tmp"
+      return 1
+    }
+    rm -f "${target}.download"
+  else
+    mv "${target}.download" "${target}.tmp"
+  fi
+  install -m 0755 "${target}.tmp" "${target}"
+  rm -f "${target}.tmp"
+}
+
+download_binary() {
+  local binary_url="$1"
+  local target="$2"
+  local fallback_url="${3:-}"
+  local expected_sha256="${4:-}"
+
+  if download_binary_once "${binary_url}" "${target}" "${expected_sha256}"; then
+    return 0
+  fi
+
+  if [ -n "${fallback_url}" ]; then
+    echo "warning: failed to download ${binary_url}, fallback to ${fallback_url}" >&2
+    download_binary_once "${fallback_url}" "${target}"
+    return $?
+  fi
+
+  return 1
+}
+
+append_query_param() {
+  local url="$1"
+  local key="$2"
+  local value="$3"
+
+  if [[ "${url}" == *\?* ]]; then
+    echo "${url}&${key}=${value}"
+  else
+    echo "${url}?${key}=${value}"
+  fi
+}
+
+sha256_file() {
+  local path="$1"
+
+  if command -v sha256sum >/dev/null 2>&1; then
+    sha256sum "${path}" | awk '{print $1}'
+    return 0
+  fi
+
+  if command -v shasum >/dev/null 2>&1; then
+    shasum -a 256 "${path}" | awk '{print $1}'
+    return 0
+  fi
+
+  fail "sha256sum or shasum is required"
+}
+
+verify_sha256() {
+  local path="$1"
+  local expected="$2"
+  local actual
+
+  actual="$(sha256_file "${path}")"
+  if [ "${actual}" != "${expected}" ]; then
+    echo "warning: sha256 mismatch for ${path}: expected=${expected} actual=${actual}" >&2
+    return 1
+  fi
+}
+
+download_manifest() {
+  local manifest_url="$1"
+  local target="$2"
+
+  if [ "${DRY_RUN}" = "1" ]; then
+    echo "+ download ${manifest_url} -> ${target}"
+    return 0
+  fi
+
+  command -v curl >/dev/null 2>&1 || fail "curl is required"
+  curl -fsSL "${manifest_url}" -o "${target}"
+}
+
+manifest_value() {
+  local manifest_path="$1"
+  local platform="$2"
+  local key="$3"
+
+  awk -v platform="\"${platform}\"" -v key="\"${key}\"" '
+    $0 ~ platform { in_platform=1; next }
+    in_platform && $0 ~ /^[[:space:]]*}/ { exit }
+    in_platform && $0 ~ key {
+      line=$0
+      sub(/^[^:]*:[[:space:]]*/, "", line)
+      sub(/[,\r]*$/, "", line)
+      gsub(/^"|"$/, "", line)
+      print line
+      exit
+    }
+  ' "${manifest_path}"
+}
+
+validate_binary_name() {
+  local name="$1"
+  local os="$2"
+  local arch="$3"
+
+  case "${name}" in
+    "incudal-agent-${os}-${arch}"|"incudal-agent-${os}-${arch}.gz")
+      return 0
+      ;;
+    *)
+      fail "manifest binary name is invalid for ${os}-${arch}: ${name}"
+      ;;
+  esac
+}
+
+install_binary_atomically() {
+  local source="$1"
+  local target="$2"
+  local next="${target}.new"
+
+  if [ "${DRY_RUN}" = "1" ]; then
+    echo "+ install ${source} -> ${target} (atomic replace)"
+    return 0
+  fi
+
+  install -d -m 0755 "$(dirname "${target}")"
+  install -m 0755 "${source}" "${next}"
+  mv -f "${next}" "${target}"
+}
+
+fetch_agent_install_config() {
+  local install_token="${INCUDAL_AGENT_INSTALL_TOKEN:-}"
+  if [ -z "${install_token}" ]; then
+    return 0
+  fi
+
+  local config_url="${PANEL_BASE_URL}/api/agent/install-config/${install_token}"
+  if [ "${DRY_RUN}" = "1" ]; then
+    echo "+ fetch ${config_url}"
+    INCUDAL_AGENT_ID="${INCUDAL_AGENT_ID:-agt_from_install_token}"
+    INCUDAL_AGENT_SECRET="${INCUDAL_AGENT_SECRET:-ias_from_install_token}"
+    return 0
+  fi
+
+  command -v curl >/dev/null 2>&1 || fail "curl is required"
+  INSTALL_CONFIG_PATH="$(mktemp)"
+  curl -fsSL "${config_url}" -o "${INSTALL_CONFIG_PATH}"
+  # shellcheck disable=SC1090
+  . "${INSTALL_CONFIG_PATH}"
+  rm -f "${INSTALL_CONFIG_PATH}"
+  INSTALL_CONFIG_PATH=""
+}
+
+need_env INCUDAL_PANEL_URL
+
+PANEL_BASE_URL="${INCUDAL_PANEL_URL%/}"
+OS="$(detect_os)"
+ARCH="$(detect_arch)"
+DEFAULT_BINARY_BASE_URL="${PANEL_BASE_URL}/api/agent/binary"
+BINARY_BASE_URL="${INCUDAL_AGENT_BINARY_BASE_URL:-${DEFAULT_BINARY_BASE_URL}}"
+BINARY_NAME="incudal-agent-${OS}-${ARCH}"
+BINARY_URL="${INCUDAL_AGENT_BINARY_URL:-}"
+BINARY_EXPECTED_SHA256="${INCUDAL_AGENT_BINARY_SHA256:-}"
+BINARY_FALLBACK_URL=""
+MANIFEST_PATH=""
+MANIFEST_URL="${INCUDAL_AGENT_MANIFEST_URL:-${PANEL_BASE_URL}/api/agent/manifest.json}"
+STAGED_BIN="${BIN_PATH}.download.$$"
+
+cleanup() {
+  rm -f "${STAGED_BIN}" "${STAGED_BIN}.download" "${STAGED_BIN}.tmp" "${BIN_PATH}.new"
+  if [ -n "${INSTALL_CONFIG_PATH:-}" ]; then
+    rm -f "${INSTALL_CONFIG_PATH}"
+  fi
+  if [ -n "${MANIFEST_PATH:-}" ]; then
+    rm -f "${MANIFEST_PATH}"
+  fi
+}
+trap cleanup EXIT
+
+fetch_agent_install_config
+need_env INCUDAL_AGENT_ID
+need_env INCUDAL_AGENT_SECRET
+
+if [ -z "${INCUDAL_AGENT_BINARY_URL:-}" ]; then
+  # Cloudflare 等边缘缓存可能缓存旧二进制；默认面板下载强制按安装批次换 URL。
+  BINARY_CACHE_BUSTER="${INCUDAL_AGENT_BINARY_CACHE_BUSTER:-$(date +%s)}"
+  MANIFEST_URL="$(append_query_param "${MANIFEST_URL}" "v" "${BINARY_CACHE_BUSTER}")"
+  MANIFEST_PATH="${BIN_PATH}.manifest.$$"
+  download_manifest "${MANIFEST_URL}" "${MANIFEST_PATH}"
+
+  if [ "${DRY_RUN}" != "1" ]; then
+    BINARY_NAME="$(manifest_value "${MANIFEST_PATH}" "${OS}-${ARCH}" "name")"
+    BINARY_EXPECTED_SHA256="$(manifest_value "${MANIFEST_PATH}" "${OS}-${ARCH}" "sha256")"
+    if [ -z "${BINARY_NAME}" ] || [ -z "${BINARY_EXPECTED_SHA256}" ]; then
+      fail "agent manifest does not contain ${OS}-${ARCH} binary metadata"
+    fi
+    validate_binary_name "${BINARY_NAME}" "${OS}" "${ARCH}"
+  else
+    BINARY_NAME="${BINARY_NAME}.gz"
+  fi
+
+  BINARY_URL="${BINARY_BASE_URL}/${BINARY_NAME}"
+  BINARY_URL="$(append_query_param "${BINARY_URL}" "v" "${BINARY_CACHE_BUSTER}")"
+elif [ -z "${BINARY_EXPECTED_SHA256}" ]; then
+  echo "warning: INCUDAL_AGENT_BINARY_URL is set without INCUDAL_AGENT_BINARY_SHA256, skip binary checksum verification" >&2
+fi
+
+echo "Installing Incudal Agent"
+echo "  panel: ${INCUDAL_PANEL_URL}"
+echo "  agent: ${INCUDAL_AGENT_ID}"
+echo "  binary: ${BINARY_URL}"
+if [ -n "${BINARY_EXPECTED_SHA256}" ]; then
+  echo "  sha256: ${BINARY_EXPECTED_SHA256}"
+fi
+
+if [ "${DRY_RUN}" != "1" ]; then
+  install -d -m 0755 "$(dirname "${STAGED_BIN}")"
+fi
+
+# 先下载到临时路径，再原子替换，避免覆盖正在运行的二进制时报 Text file busy。
+download_binary "${BINARY_URL}" "${STAGED_BIN}" "${BINARY_FALLBACK_URL}" "${BINARY_EXPECTED_SHA256}"
+install_binary_atomically "${STAGED_BIN}" "${BIN_PATH}"
+
+write_file "${CONFIG_FILE}" 0600 root:root <<EOF_CONFIG
+panel_url: "${INCUDAL_PANEL_URL}"
+agent_id: "${INCUDAL_AGENT_ID}"
+agent_secret: "${INCUDAL_AGENT_SECRET}"
+heartbeat_interval_seconds: ${HEARTBEAT_INTERVAL}
+request_timeout_seconds: ${REQUEST_TIMEOUT}
+EOF_CONFIG
+
+write_file "${SERVICE_FILE}" 0644 root:root <<EOF_SERVICE
+[Unit]
+Description=Incudal Host Agent
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+ExecStart=${BIN_PATH} -config ${CONFIG_FILE}
+Restart=always
+RestartSec=5
+User=root
+NoNewPrivileges=true
+PrivateTmp=true
+ProtectHome=true
+
+[Install]
+WantedBy=multi-user.target
+EOF_SERVICE
+
+if [ "${DRY_RUN}" = "1" ]; then
+  echo "Dry run completed."
+  exit 0
+fi
+
+systemctl daemon-reload
+"${BIN_PATH}" -config "${CONFIG_FILE}" -once
+systemctl enable "${SERVICE_NAME}"
+# 已安装场景下 enable --now 不会重启旧进程；restart 确保升级后立即使用最新二进制和配置。
+systemctl restart "${SERVICE_NAME}"
+systemctl status "${SERVICE_NAME}" --no-pager --lines=20
+
+echo "Incudal Agent installed or upgraded and started."
diff --git a/server/templates/caddy.sh b/server/templates/caddy.sh
new file mode 100644
index 0000000..f4e8795
--- /dev/null
+++ b/server/templates/caddy.sh
@@ -0,0 +1,139 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+log() { echo -e "\033[1;32m[+] $1\033[0m"; }
+warn() { echo -e "\033[1;33m[!] $1\033[0m"; }
+error() { echo -e "\033[1;31m[-] $1\033[0m"; }
+
+CADDY_USER=""
+CADDY_PASS=""
+CADDY_PORT="8444"
+
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --username) CADDY_USER="$2"; shift 2 ;;
+    --password) CADDY_PASS="$2"; shift 2 ;;
+    --port) CADDY_PORT="$2"; shift 2 ;;
+    *) error "Unknown argument: $1"; exit 1 ;;
+  esac
+done
+
+if [[ "$EUID" -ne 0 ]]; then error "Must run as root"; exit 1; fi
+if [[ -z "$CADDY_USER" ]]; then error "Error: --username required"; exit 1; fi
+if [[ -z "$CADDY_PASS" ]]; then error "Error: --password required"; exit 1; fi
+
+if [[ -f /etc/os-release ]]; then
+    source /etc/os-release
+    if [[ "$ID" != "ubuntu" && "$ID" != "debian" ]]; then 
+        error "Only Ubuntu/Debian supported"
+        exit 1
+    fi
+else
+    error "Cannot detect OS"; exit 1
+fi
+
+log "Installing Caddy Web Server & Dependencies..."
+
+export DEBIAN_FRONTEND=noninteractive
+
+apt-get update -qq
+apt-get install -y -qq curl debian-keyring debian-archive-keyring apt-transport-https openssl >/dev/null
+
+if ! command -v caddy &> /dev/null; then
+    curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --yes --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
+    curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list >/dev/null
+    apt-get update -qq
+    apt-get install -y -qq caddy >/dev/null
+    log "Caddy installed successfully"
+else
+    log "Caddy already installed, updating..."
+    apt-get install -y -qq caddy >/dev/null
+fi
+
+systemctl stop caddy || true
+
+log "Generating password hash..."
+PASS_HASH=$(caddy hash-password --plaintext "$CADDY_PASS")
+
+log "Generating self-signed certificate..."
+mkdir -p /etc/caddy
+openssl req -x509 -newkey rsa:2048 \
+    -keyout /etc/caddy/key.pem \
+    -out /etc/caddy/cert.pem \
+    -days 3650 -nodes \
+    -subj "/CN=caddy-admin" \
+    2>/dev/null
+chmod 644 /etc/caddy/cert.pem /etc/caddy/key.pem
+
+log "Configuring Caddy..."
+
+mkdir -p /var/log/caddy
+
+cat > /etc/caddy/Caddyfile <<EOF
+{
+    admin localhost:2019
+}
+
+:${CADDY_PORT} {
+    tls /etc/caddy/cert.pem /etc/caddy/key.pem
+
+    basicauth {
+        ${CADDY_USER} ${PASS_HASH}
+    }
+
+    reverse_proxy localhost:2019 {
+        header_up Host localhost:2019
+    }
+
+    log {
+        output file /var/log/caddy/admin-access.log {
+            roll_size 10mb
+            roll_keep 5
+        }
+    }
+}
+EOF
+
+chown -R caddy:caddy /etc/caddy
+chown -R caddy:caddy /var/log/caddy
+sync
+
+log "Configuring systemd for API persistence (--resume)..."
+mkdir -p /etc/systemd/system/caddy.service.d
+
+cat > /etc/systemd/system/caddy.service.d/override.conf <<EOF
+[Service]
+ExecStart=
+ExecStart=/usr/bin/caddy run --environ --config /etc/caddy/Caddyfile --resume
+EOF
+
+rm -f /var/lib/caddy/.config/caddy/autosave.json
+
+systemctl daemon-reload
+
+log "Starting Caddy service..."
+systemctl enable caddy >/dev/null 2>&1 || true
+systemctl stop caddy 2>/dev/null || true
+sleep 1
+systemctl start caddy
+
+
+sleep 2
+if ! ss -tlnp | grep -q ":${CADDY_PORT}"; then
+    error "Caddy failed to bind to port ${CADDY_PORT}. Last 10 lines of logs:"
+    journalctl -u caddy -n 10 --no-pager
+    exit 1
+fi
+
+log "Caddy installation complete!"
+echo ""
+echo -e "\033[1;36m========================================\033[0m"
+echo -e "\033[1;36m  Caddy Reverse Proxy Ready\033[0m"
+echo -e "\033[1;36m========================================\033[0m"
+echo -e "\033[1;33m  API Port:     ${CADDY_PORT}\033[0m"
+echo -e "\033[1;33m  Username:     ${CADDY_USER}\033[0m"
+echo -e "\033[1;33m  Auth:         Basic Auth + HTTPS\033[0m"
+echo -e "\033[1;33m  Persistence:  API (--resume mode)\033[0m"
+echo -e "\033[1;36m========================================\033[0m"
+echo ""
+echo -e "\033[1;32mPlease return to the panel and confirm the installation.\033[0m"
\ No newline at end of file
diff --git a/server/templates/install.sh b/server/templates/install.sh
new file mode 100644
index 0000000..e4e4469
--- /dev/null
+++ b/server/templates/install.sh
@@ -0,0 +1,2818 @@
+#!/usr/bin/env bash
+# ============================================================================
+# Incudal 节点安装管理脚本
+# 将 Ubuntu / Debian 服务器配置为 Incudal 面板管理的 Incus LXC 容器节点
+#
+# 用法:
+#   交互式: sudo bash Incudal.sh
+#   命令行: sudo bash Incudal.sh --mode nat --token <TOKEN>
+#   卸载:   sudo bash Incudal.sh --uninstall
+#
+# 项目地址: https://incudal.com
+# ============================================================================
+set -euo pipefail
+
+# ========面板动态注入区========
+# 面板在下载时自动注入以下变量，无需手动修改
+INJECT_PANEL_URL=""
+INJECT_TOKEN=""
+INJECT_MODE=""
+INJECT_IPV6_SUBNET=""
+INJECT_IPV6_IFACE=""
+INJECT_AGENT_ID=""
+INJECT_AGENT_SECRET=""
+INJECT_AGENT_INSTALL_TOKEN=""
+INJECT_AGENT_BINARY_URL=""
+INJECT_AGENT_ENABLED="true"
+# ==============================
+
+# ========================== 全局常量 ==========================
+PANEL_URL="${INJECT_PANEL_URL:-}"
+PANEL_URL="${PANEL_URL%/}"
+readonly PANEL_URL
+readonly SCRIPT_VERSION="2.0.0"
+readonly BRIDGE_SUBNET="10.10.0.1/22"
+readonly BRIDGE_NAME="incusbr0"
+readonly PRESEED_FILE="/tmp/.incus-preseed-$$.yaml"
+readonly AGENT_ID="${INJECT_AGENT_ID:-}"
+readonly AGENT_SECRET="${INJECT_AGENT_SECRET:-}"
+readonly AGENT_INSTALL_TOKEN="${INJECT_AGENT_INSTALL_TOKEN:-}"
+readonly AGENT_BINARY_URL="${INJECT_AGENT_BINARY_URL:-}"
+readonly AGENT_ENABLED="${INJECT_AGENT_ENABLED:-true}"
+readonly AGENT_SERVICE_NAME="incudal-agent"
+readonly AGENT_CONFIG_FILE="${INCUDAL_AGENT_CONFIG_FILE:-/etc/incudal-agent/config.yaml}"
+readonly AGENT_BIN_PATH="${INCUDAL_AGENT_BIN:-/usr/local/bin/incudal-agent}"
+
+# ZFS 预编译模块下载地址（GitHub Release）
+# 格式: ${ZFS_PREBUILT_URL}/zfs-modules-<内核版本>.tar.gz
+readonly ZFS_PREBUILT_URL="https://github.com/0xdabiaoge/Incudal-Debian-ZFS/releases/download/Debian-ZFS"
+
+# ========================== 颜色定义 ==========================
+readonly RED='\033[1;31m'
+readonly GREEN='\033[1;32m'
+readonly YELLOW='\033[1;33m'
+readonly BLUE='\033[1;34m'
+readonly CYAN='\033[1;36m'
+readonly BOLD='\033[1m'
+readonly DIM='\033[2m'
+readonly NC='\033[0m'
+
+# ========================== 运行时变量 ==========================
+MODE=""
+TOKEN=""
+OS_ID=""
+OS_VERSION=""
+OS_CODENAME=""
+ARCH=""
+DEFAULT_IFACE=""
+IS_PURE_IPV6="false"
+AGENT_INSTALL_STATUS="未安装"
+AGENT_HEARTBEAT_INTERVAL_SECONDS="30"
+
+# ========================== 工具函数 ==========================
+log()   { echo -e "${GREEN}[✓]${NC} $1"; }
+info()  { echo -e "${BLUE}[i]${NC} $1"; }
+warn()  { echo -e "${YELLOW}[!]${NC} $1"; }
+error() { echo -e "${RED}[✗]${NC} $1"; }
+step()  { echo -e "\n${CYAN}[▶]${NC} ${BOLD}$1${NC}"; }
+
+# 分隔线
+divider() {
+    echo -e "${DIM}────────────────────────────────────────────────────${NC}"
+}
+
+pause_return() {
+    if [[ -t 0 ]]; then
+        echo ""
+        echo -ne "  ${DIM}按回车返回菜单...${NC}"
+        read -r _
+    fi
+}
+
+mask_value() {
+    local value="${1:-}"
+    local length=${#value}
+    if [[ -z "$value" ]]; then
+        echo "-"
+    elif (( length <= 12 )); then
+        echo "${value:0:4}****"
+    else
+        echo "${value:0:8}...${value: -4}"
+    fi
+}
+
+is_http_url() {
+    local value="${1:-}"
+    [[ "$value" =~ ^https?://[^[:space:]]+$ ]]
+}
+
+read_agent_config_value() {
+    local key="$1"
+    if [[ ! -f "$AGENT_CONFIG_FILE" ]]; then
+        return 0
+    fi
+
+    local line=""
+    line=$(grep -E "^[[:space:]]*${key}[[:space:]]*:" "$AGENT_CONFIG_FILE" 2>/dev/null | head -n1 || true)
+    if [[ -z "$line" ]]; then
+        return 0
+    fi
+
+    local value="${line#*:}"
+    value=$(printf '%s' "$value" | sed -E "s/[[:space:]]+#.*$//; s/^[[:space:]]+//; s/[[:space:]]+$//; s/^\"(.*)\"$/\1/; s/^'(.*)'$/\1/")
+    printf '%s\n' "$value"
+}
+
+get_agent_panel_url() {
+    local config_panel_url=""
+    config_panel_url=$(read_agent_config_value "panel_url" || true)
+    if [[ -n "$config_panel_url" ]]; then
+        echo "${config_panel_url%/}"
+        return 0
+    fi
+    if [[ -n "$PANEL_URL" ]]; then
+        echo "${PANEL_URL%/}"
+        return 0
+    fi
+    return 0
+}
+
+extract_agent_install_token() {
+    local input="$1"
+    printf '%s\n' "$input" | grep -Eo 'ait_[A-Za-z0-9_-]{32,}' | head -n1 || true
+}
+
+extract_agent_panel_url() {
+    local input="$1"
+    printf '%s\n' "$input" \
+        | sed -nE "s#.*(https?://[^[:space:]'\\\"]+)/api/agent/install\\.sh.*#\\1#p" \
+        | head -n1 || true
+}
+
+normalize_agent_interval() {
+    local value="${1:-30}"
+    if [[ "$value" =~ ^[0-9]+$ ]] && (( value >= 5 && value <= 3600 )); then
+        echo "$value"
+    else
+        echo "30"
+    fi
+}
+
+prompt_agent_heartbeat_interval() {
+    local default_interval=""
+    default_interval=$(normalize_agent_interval "${1:-30}")
+
+    if [[ ! -t 0 ]]; then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="$default_interval"
+        return 0
+    fi
+
+    echo -ne "  ${BOLD}Agent 上报间隔秒数 [默认 ${default_interval}，范围 5-3600]: ${NC}"
+    local agent_interval=""
+    read -r agent_interval
+
+    if [[ -z "$agent_interval" ]]; then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="$default_interval"
+    elif [[ "$agent_interval" =~ ^[0-9]+$ ]] && (( agent_interval >= 5 && agent_interval <= 3600 )); then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="$agent_interval"
+    else
+        warn "Agent 上报间隔无效，已使用默认 ${default_interval} 秒"
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="$default_interval"
+    fi
+}
+
+show_agent_summary_line() {
+    local label="${DIM}未安装${NC}"
+    if command -v systemctl &>/dev/null && systemctl is-active --quiet "$AGENT_SERVICE_NAME" 2>/dev/null; then
+        label="${GREEN}运行中${NC}"
+    elif [[ -f "$AGENT_CONFIG_FILE" || -x "$AGENT_BIN_PATH" ]]; then
+        label="${YELLOW}已安装（未运行）${NC}"
+    fi
+    echo -e "  Agent    :  ${label}"
+}
+
+# 清理临时文件
+cleanup() {
+    rm -f "$PRESEED_FILE" 2>/dev/null || true
+}
+trap cleanup EXIT
+
+# ========================== 显示横幅 ==========================
+show_banner() {
+    clear 2>/dev/null || true
+    echo ""
+    echo -e "${CYAN}  ╔══════════════════════════════════════════════════╗${NC}"
+    echo -e "${CYAN}  ║                                                  ║${NC}"
+    echo -e "${CYAN}  ║            ${BOLD}Incudal 节点安装管理脚本${NC}${CYAN}              ║${NC}"
+    echo -e "${CYAN}  ║            ${DIM}LXC Container Host Setup${NC}${CYAN}              ║${NC}"
+    echo -e "${CYAN}  ║                                                  ║${NC}"
+    echo -e "${CYAN}  ╚══════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "  ${DIM}版本: ${SCRIPT_VERSION}  |  面板: ${PANEL_URL}${NC}"
+    echo ""
+}
+
+# ========================== 系统检测 ==========================
+detect_system() {
+    # 检测 /etc/os-release 是否存在
+    if [[ ! -f /etc/os-release ]]; then
+        error "无法检测操作系统（/etc/os-release 不存在）"
+        exit 1
+    fi
+
+    source /etc/os-release
+    OS_ID="${ID:-unknown}"
+    OS_VERSION="${VERSION_ID:-unknown}"
+    OS_CODENAME="${VERSION_CODENAME:-unknown}"
+    ARCH=$(dpkg --print-architecture 2>/dev/null || uname -m)
+
+    # 仅支持 Ubuntu 和 Debian
+    if [[ "$OS_ID" != "ubuntu" && "$OS_ID" != "debian" ]]; then
+        error "不支持的操作系统: ${OS_ID}"
+        error "本脚本仅支持 Ubuntu 和 Debian 系统"
+        exit 1
+    fi
+
+    # 版本兼容性检查
+    case "$OS_ID" in
+        ubuntu)
+            # 建议 Ubuntu 22.04+
+            local ubuntu_major="${OS_VERSION%%.*}"
+            if [[ "$ubuntu_major" -lt 22 ]] 2>/dev/null; then
+                warn "Ubuntu 版本较低 (${OS_VERSION})，建议使用 22.04 或 24.04"
+                echo -ne "  是否继续？[y/N]: "
+                read -r confirm
+                [[ "$confirm" =~ ^[yY]$ ]] || exit 0
+            fi
+            ;;
+        debian)
+            # 最低 Debian 11 (Bullseye)
+            local deb_major="${OS_VERSION%%.*}"
+            if [[ "$deb_major" -lt 11 ]] 2>/dev/null; then
+                error "Debian 版本过低 (${OS_VERSION})，最低要求 Debian 11 (Bullseye)"
+                exit 1
+            fi
+            ;;
+    esac
+
+    # 检测默认网络接口
+    DEFAULT_IFACE=$(ip route get 8.8.8.8 2>/dev/null | awk -F'dev ' '{print $2}' | awk '{print $1}' | head -n1 || true)
+    if [[ -z "$DEFAULT_IFACE" ]]; then
+        warn "无法通过默认路由检测网络接口"
+        # 回退：获取第一个非 lo 的 UP 接口
+        DEFAULT_IFACE=$(ip -o link show up 2>/dev/null | awk -F': ' '{print $2}' | grep -v lo | head -n1 || true)
+        if [[ -z "$DEFAULT_IFACE" ]]; then
+            error "未找到可用的网络接口"
+            exit 1
+        fi
+        info "使用备选接口: ${DEFAULT_IFACE}"
+    fi
+
+    # 纯 IPv6 环境检测 (双通道并发)
+    if ! curl -4 -s --connect-timeout 2 1.1.1.1 >/dev/null 2>&1; then
+        if curl -6 -s --connect-timeout 2 "https://[2606:4700:4700::1111]" >/dev/null 2>&1; then
+            IS_PURE_IPV6="true"
+            info "检测到当前服务器为【纯 IPv6 (Pure IPv6)】"
+        fi
+    fi
+}
+
+# ========================== 显示系统信息 ==========================
+show_system_info() {
+    divider
+    echo -e "  ${BOLD}系统信息${NC}"
+    divider
+
+    # 操作系统名称格式化
+    local os_label=""
+    case "$OS_ID" in
+        ubuntu) os_label="Ubuntu" ;;
+        debian) os_label="Debian" ;;
+        *)      os_label="$OS_ID" ;;
+    esac
+
+    echo -e "  操作系统  :  ${GREEN}${os_label} ${OS_VERSION}${NC} (${OS_CODENAME})"
+    echo -e "  系统架构  :  ${GREEN}${ARCH}${NC}"
+    echo -e "  默认接口  :  ${GREEN}${DEFAULT_IFACE}${NC}"
+    echo -e "  主 机 名  :  ${GREEN}$(hostname)${NC}"
+
+    if [[ "$IS_PURE_IPV6" == "true" ]]; then
+        echo -e "  网络环境  :  ${YELLOW}纯 IPv6 (Pure IPv6) - 将启用 WARP 出站接力${NC}"
+    else
+        echo -e "  网络环境  :  ${GREEN}原生 IPv4 可达${NC}"
+    fi
+
+    # 检查 Incus 安装状态
+    if command -v incus &>/dev/null; then
+        local incus_ver
+        incus_ver=$(incus version 2>/dev/null | awk '/Client version/ {print $3}' || echo "未知")
+        [[ -z "$incus_ver" ]] && incus_ver="未知"
+        
+        # 判断服务端是否能连通
+        if ! incus version 2>/dev/null | grep -q -E "Server version: [0-9]"; then
+            echo -e "  Incus     :  ${YELLOW}客户端残留（服务未在运行）${NC} (${incus_ver})"
+        else
+            echo -e "  Incus     :  ${GREEN}已安装并运行${NC} (${incus_ver})"
+        fi
+
+        # 检查网桥
+        if incus network show "$BRIDGE_NAME" &>/dev/null; then
+            echo -e "  网桥状态  :  ${YELLOW}${BRIDGE_NAME} 已存在${NC}"
+        else
+            echo -e "  网桥状态  :  ${DIM}未初始化${NC}"
+        fi
+
+        # 检查面板证书
+        if incus config trust list --format csv 2>/dev/null | grep -q "panel"; then
+            echo -e "  面板证书  :  ${YELLOW}已导入${NC}"
+        else
+            echo -e "  面板证书  :  ${DIM}未导入${NC}"
+        fi
+    else
+        echo -e "  Incus     :  ${DIM}未安装${NC}"
+    fi
+
+    # 检查 RFW 防火墙状态
+    if [[ -f /root/rfw/rfw ]]; then
+        if systemctl is-active --quiet rfw 2>/dev/null; then
+            local rfw_rules="未知"
+            if [[ -f /etc/systemd/system/rfw.service ]]; then
+                local exec_start
+                exec_start=$(grep "^ExecStart=" /etc/systemd/system/rfw.service 2>/dev/null || true)
+                if [[ "$exec_start" =~ "--block-all" ]] && [[ ! "$exec_start" =~ "--block-all-from" ]]; then
+                    rfw_rules="全部阻止"
+                else
+                    rfw_rules=$(echo "$exec_start" | grep -o -- "--block-[a-z0-9-]*" | sed 's/--block-//g' | tr '\n' '/' | sed 's/\/$//')
+                    [[ -z "$rfw_rules" ]] && rfw_rules="无协议过滤"
+                fi
+                
+                local geo="无GeoIP"
+                if [[ "$exec_start" =~ --countries\ ([A-Za-z,]*) ]]; then
+                    geo="黑名单:${BASH_REMATCH[1]}"
+                elif [[ "$exec_start" =~ --allow-only-countries\ ([A-Za-z,]*) ]]; then
+                    geo="白名单:${BASH_REMATCH[1]}"
+                elif [[ "$exec_start" =~ --block-all-from\ ([A-Za-z,]*) ]]; then
+                    geo="黑名单:${BASH_REMATCH[1]}"
+                fi
+                rfw_rules="${rfw_rules} | ${geo}"
+            fi
+            echo -e "  RFW 防火墙:  ${GREEN}运行中${NC} (${rfw_rules})"
+        else
+            echo -e "  RFW 防火墙:  ${YELLOW}已安装（未运行）${NC}"
+        fi
+    else
+        echo -e "  RFW 防火墙:  ${DIM}未安装${NC}"
+    fi
+
+    show_agent_summary_line
+
+    divider
+    echo ""
+}
+
+# ========================== 交互式菜单 ==========================
+show_menu() {
+    echo -e "  ${BOLD}请选择操作：${NC}"
+    echo ""
+    echo -e "    ${CYAN}1)${NC}  安装节点  ${DIM}─  仅 IPv4${NC}"
+    echo -e "    ${CYAN}2)${NC}  安装节点  ${DIM}─  IPv4 + IPv6（自动检测配置）${NC}"
+    echo -e "    ${CYAN}3)${NC}  安装 RFW  ${DIM}─  入站流量屏蔽防火墙${NC}"
+    echo -e "    ${CYAN}4)${NC}  查看系统信息"
+    echo -e "    ${CYAN}7)${NC}  网络模式说明（必看说明）"
+    echo -e "    ${CYAN}8)${NC}  Agent 管理  ${DIM}─  安装 / 更新宿主机 Agent${NC}"
+    echo ""
+    echo -e "    ${RED}5)${NC}  卸载 RFW  ${DIM}─  移除 RFW 防火墙${NC}"
+    echo -e "    ${RED}6)${NC}  卸载节点  ${DIM}─  彻底清理还原系统${NC}"
+    echo -e "    ${CYAN}0)${NC}  退出"
+    echo ""
+    echo -ne "  ${BOLD}请输入选项 [0-8]: ${NC}"
+}
+
+# ========================== 网络模式说明 ==========================
+show_network_mode_help() {
+    echo ""
+    divider
+    echo -e "  ${BOLD}面板支持的网络模式说明${NC}"
+    divider
+    echo ""
+    echo -e "  ${BOLD}节点安装模式（本脚本选择）：${NC}"
+    echo ""
+    echo -e "  ${CYAN}模式 1：仅 IPv4${NC}"
+    echo -e "  节点只启用 IPv4 NAT 网桥，容器通过端口映射访问。"
+    echo -e "  适合没有 IPv6 网段或不需要 IPv6 的场景。"
+    echo ""
+    echo -e "  ${CYAN}模式 2：IPv4 + IPv6${NC}"
+    echo -e "  节点同时启用 IPv4 NAT 和 IPv6 路由转发。"
+    echo -e "  安装后可在面板创建以下任意 IPv6 网络模式的实例。"
+    echo ""
+    echo -e "  ${BOLD}面板实例网络模式（在面板创建实例/套餐时选择）：${NC}"
+    echo ""
+    echo -e "  ${GREEN}IPv4 NAT${NC}"
+    echo -e "  宿主机仅有 IPv4，通过端口映射给容器提供对外服务。"
+    echo -e "  ${DIM}节点要求：模式 1 或 模式 2 均可${NC}"
+    echo ""
+    echo -e "  ${GREEN}IPv4 NAT + IPv6${NC}"
+    echo -e "  宿主机拥有 IPv4 + 独立公网 IPv6 地址（双栈）。"
+    echo -e "  IPv4 通过端口映射，IPv6 根据网段选择独立分配给容器。"
+    echo -e "  ${DIM}节点要求：模式 2 + 配置 IPv6 子网${NC}"
+    echo ""
+    echo -e "  ${GREEN}IPv4 NAT + IPv6 NAT${NC}"
+    echo -e "  宿主机拥有 IPv4 + IPv6（均为 NAT 共享宿主机出口）。"
+    echo -e "  适用于宿主机只有单个 IPv6 地址或者不分配 IPv6 网段，全局共享宿主机的 IPv6。"
+    echo -e "  ${DIM}节点要求：模式 2，无需 IPv6 子网${NC}"
+    echo ""
+    echo -e "  ${GREEN}IPv6 Only${NC}"
+    echo -e "  宿主机仅有独立公网 IPv6（无 IPv4）。"
+    echo -e "  ${DIM}节点要求：模式 2 + 配置 IPv6 子网${NC}"
+    echo ""
+    echo -e "  ${GREEN}IPv6 NAT${NC}"
+    echo -e "  宿主机仅有单个 IPv6（共享宿主机 IPv6 出口，无 IPv4）。"
+    echo -e "  ${DIM}节点要求：模式 2，无需 IPv6 子网${NC}"
+    echo ""
+    echo -e "  ${YELLOW}提示：${NC}本脚本选择模式 2 后，会自动检测宿主机 IPv6，"
+    echo -e "  并帮助计算适合面板使用的 IPv6 子网。安装完成后在面板"
+    echo -e "  「节点管理」中填入子网信息即可。"
+    echo ""
+    divider
+    echo ""
+}
+
+# ========================== 读取 Token ==========================
+read_token() {
+    echo ""
+    divider
+    echo -e "  ${BOLD}请输入面板 Token${NC}"
+    echo -e "  ${DIM}Token 可在面板「节点管理 → 添加节点」中获取${NC}"
+    divider
+    echo ""
+
+    while true; do
+        echo -ne "  ${CYAN}Token: ${NC}"
+        read -r TOKEN
+
+        # 非空检查
+        if [[ -z "$TOKEN" ]]; then
+            warn "Token 不能为空，请重新输入"
+            continue
+        fi
+
+        # 去除首尾空格
+        TOKEN=$(echo "$TOKEN" | xargs)
+
+        # Token 格式校验（宽松匹配：允许较长的数字/字母/短横线组合）
+        if [[ ! "$TOKEN" =~ ^[a-zA-Z0-9_-]{16,}$ ]]; then
+            warn "Token 格式不符合预期（可能不完整或包含非法字符）"
+            echo -e "  ${DIM}说明: Token 通常是一串较长的包含数字和字母的字符串${NC}"
+            echo -ne "  是否仍要使用此 Token？[y/N]: "
+            read -r confirm
+            [[ "$confirm" =~ ^[yY]$ ]] || continue
+        fi
+
+        break
+    done
+}
+
+# ========================== Agent 上报间隔 ==========================
+configure_agent_heartbeat_interval() {
+    if [[ "$AGENT_ENABLED" != "true" || ( -z "$AGENT_INSTALL_TOKEN" && ( -z "$AGENT_ID" || -z "$AGENT_SECRET" ) ) ]]; then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="30"
+        return 0
+    fi
+
+    if [[ ! -t 0 ]]; then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="30"
+        return 0
+    fi
+
+    echo -e "\n${CYAN}==> (可选) Agent 上报间隔${NC}"
+    echo -e "  ${DIM}默认 30 秒；面板宿主机状态卡片会自动跟随此间隔刷新${NC}"
+    echo -ne "  ${BOLD}Agent 上报间隔秒数 [默认 30，范围 5-3600]: ${NC}"
+    local agent_interval=""
+    read -r agent_interval
+
+    if [[ -z "$agent_interval" ]]; then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="30"
+    elif [[ "$agent_interval" =~ ^[0-9]+$ ]] && (( agent_interval >= 5 && agent_interval <= 3600 )); then
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="$agent_interval"
+    else
+        warn "Agent 上报间隔无效，已使用默认 30 秒"
+        AGENT_HEARTBEAT_INTERVAL_SECONDS="30"
+    fi
+}
+
+# ========================== 安装确认 ==========================
+confirm_install() {
+    local mode_label=""
+    case "$MODE" in
+        nat)      mode_label="仅 IPv4" ;;
+        nat_ipv6) mode_label="IPv4 + IPv6" ;;
+    esac
+
+    local os_label=""
+    case "$OS_ID" in
+        ubuntu) os_label="Ubuntu ${OS_VERSION}" ;;
+        debian) os_label="Debian ${OS_VERSION}" ;;
+    esac
+
+    # Token 脱敏显示（仅显示首8位和末4位）
+    local token_masked="${TOKEN:0:8}····${TOKEN: -4}"
+
+    echo ""
+    divider
+    echo -e "  ${BOLD}安装确认${NC}"
+    divider
+    echo -e "  操作系统  :  ${GREEN}${os_label}${NC} (${OS_CODENAME})"
+    echo -e "  网络模式  :  ${GREEN}${mode_label}${NC}"
+    echo -e "  网桥子网  :  ${GREEN}${BRIDGE_SUBNET}${NC}"
+    if [[ -n "${IPV6_SUBNET:-}" ]]; then
+        echo -e "  IPv6 子网 :  ${GREEN}${IPV6_SUBNET}${NC} (${IPV6_IFACE:-auto})"
+    fi
+    echo -e "  通信端口  :  ${GREEN}[::]:${LISTEN_PORT}${NC}"
+    echo -e "  Token     :  ${GREEN}${token_masked}${NC}"
+    if [[ "$AGENT_ENABLED" == "true" && ( -n "$AGENT_INSTALL_TOKEN" || ( -n "$AGENT_ID" && -n "$AGENT_SECRET" ) ) ]]; then
+        echo -e "  Agent     :  ${GREEN}${AGENT_HEARTBEAT_INTERVAL_SECONDS} 秒上报${NC}"
+    fi
+    
+    if [[ "$IS_PURE_IPV6" == "true" ]]; then
+        if [[ "${SKIP_WARP:-false}" == "true" ]]; then
+            echo -e "  IPv4 出站 :  ${YELLOW}已跳过 WARP (保持纯净原生 IPv6)${NC}"
+        else
+            echo -e "  IPv4 出站 :  ${GREEN}Cloudflare WARP 虚拟网络接驳${NC}"
+        fi
+    fi
+    
+    divider
+    echo ""
+    echo -ne "  ${YELLOW}确认开始安装？${NC}[y/N]: "
+    read -r confirm
+    if [[ ! "$confirm" =~ ^[yY]$ ]]; then
+        info "已取消安装"
+        exit 0
+    fi
+}
+
+# ========================== IPv6 子网精准探测模块 ==========================
+
+# 单个 IP 可达性探测
+# 返回: 0=可达, 1=不可达
+probe_single_ip() {
+    local test_ip="$1"
+    local iface="$2"
+
+    # 临时绑定测试 IP
+    if ! ip -6 addr add "${test_ip}/128" dev "$iface" 2>/dev/null; then
+        return 1
+    fi
+
+    # 短暂等待 NDP 生效
+    sleep 0.5
+
+    # 用该 IP 作为源地址 ping 外网（Google DNS IPv6）
+    local ret=1
+    if ping6 -c 1 -W 3 -I "$test_ip" 2001:4860:4860::8888 &>/dev/null; then
+        ret=0
+    fi
+
+    # 无论成功失败，立即清理
+    ip -6 addr del "${test_ip}/128" dev "$iface" 2>/dev/null || true
+    return $ret
+}
+
+# IPv6 子网精准探测主函数
+# 输入: $1=宿主机 IPv6 地址(不含前缀) $2=接口掩码前缀 $3=网卡名
+# 输出全局变量:
+#   PROBE_TYPE:  "full_64" | "small_block" | "single_ip" | "skip"
+#   PROBE_CIDR:  安全 CIDR（如 "2604:a880:2:d1::/64"）  
+#   PROBE_COUNT: 可用地址数量（数字或 "海量"）
+PROBE_TYPE=""
+PROBE_CIDR=""
+PROBE_COUNT="0"
+
+probe_ipv6_subnet() {
+    local host_ip="$1"
+    local host_prefix="$2"
+    local iface="$3"
+
+    PROBE_TYPE=""
+    PROBE_CIDR=""
+    PROBE_COUNT="0"
+
+    # 前缀 > 64 的直接按小段/单 IP 处理（如 /128）
+    if [[ "$host_prefix" -gt 126 ]]; then
+        PROBE_TYPE="single_ip"
+        PROBE_COUNT="0"
+        return 0
+    fi
+
+    # 确保 python3 可用（用于 IPv6 地址偏移计算）
+    if ! command -v python3 &>/dev/null; then
+        export DEBIAN_FRONTEND=noninteractive
+        apt-get update -qq >/dev/null 2>&1 || true
+        apt-get install -y -qq python3 >/dev/null 2>&1 || true
+    fi
+
+    if ! command -v python3 &>/dev/null; then
+        warn "python3 不可用，无法进行精准探测"
+        PROBE_TYPE="skip"
+        return 1
+    fi
+
+    echo -e "  ${CYAN}▶ 第 1 步：远距探测（验证完整 /64 是否可用）...${NC}"
+
+    # ---- 第 1 级：远距探测 ----
+    # 生成一个距离宿主机 IP 尽可能远的同 /64 地址
+    local far_ip
+    far_ip=$(python3 -c "
+import ipaddress
+addr = ipaddress.IPv6Address('${host_ip}')
+# 取 /64 网络前缀
+net = ipaddress.IPv6Network(str(addr) + '/64', strict=False)
+# 用网络地址 + 反转的 host 部分生成远端 IP
+# 如原始 host 部分为 ::19，则远端为 ::ffff:ffff:ffff:fffe
+far = net.network_address + (net.num_addresses - 2)
+# 确保不与宿主机 IP 重合
+if far == addr:
+    far = net.network_address + (net.num_addresses - 3)
+print(str(far))
+" 2>/dev/null)
+
+    if [[ -z "$far_ip" ]]; then
+        PROBE_TYPE="skip"
+        return 1
+    fi
+
+    if probe_single_ip "$far_ip" "$iface"; then
+        echo -e "  ${GREEN}✓ 远距探测通过 → 完整 /64 可用${NC}"
+        # 计算 /64 网络地址
+        local net64
+        net64=$(python3 -c "
+import ipaddress
+net = ipaddress.IPv6Network('${host_ip}/64', strict=False)
+print(str(net))
+" 2>/dev/null)
+        PROBE_TYPE="full_64"
+        PROBE_CIDR="$net64"
+        PROBE_COUNT="海量"
+        return 0
+    fi
+
+    echo -e "  ${YELLOW}✗ 远距探测未通过，非完整 /64${NC}"
+    echo -e "  ${CYAN}▶ 第 2 步：近距探测（验证是否有额外可用 IP）...${NC}"
+
+    # ---- 第 2 级：近距探测 ----
+    local near_ip
+    near_ip=$(python3 -c "
+import ipaddress
+addr = ipaddress.IPv6Address('${host_ip}')
+print(str(addr + 2))
+" 2>/dev/null)
+
+    if [[ -z "$near_ip" ]]; then
+        PROBE_TYPE="skip"
+        return 1
+    fi
+
+    if ! probe_single_ip "$near_ip" "$iface"; then
+        echo -e "  ${YELLOW}✗ 近距探测未通过 → 仅单个 IP 可用${NC}"
+        PROBE_TYPE="single_ip"
+        PROBE_COUNT="0"
+        return 0
+    fi
+
+    echo -e "  ${GREEN}✓ 近距探测通过，存在额外可用 IP${NC}"
+    echo -e "  ${CYAN}▶ 第 3 步：边界收敛（精确定位可用范围）...${NC}"
+
+    # ---- 第 3 级：指数探测 + 二分收敛 ----
+    local last_pass=2
+    local first_fail=0
+    local offset=4
+
+    # 指数递增找到第一个失败的偏移
+    while [[ $offset -le 65536 ]]; do
+        local test_ip_exp
+        test_ip_exp=$(python3 -c "
+import ipaddress
+addr = ipaddress.IPv6Address('${host_ip}')
+print(str(addr + ${offset}))
+" 2>/dev/null)
+        
+        if [[ -z "$test_ip_exp" ]]; then
+            first_fail=$offset
+            break
+        fi
+
+        echo -ne "  测试偏移 +${offset}... "
+        if probe_single_ip "$test_ip_exp" "$iface"; then
+            echo -e "${GREEN}✓${NC}"
+            last_pass=$offset
+            offset=$((offset * 2))
+        else
+            echo -e "${YELLOW}✗${NC}"
+            first_fail=$offset
+            break
+        fi
+    done
+
+    # 如果 65536 都通过了，当作大段处理
+    if [[ $first_fail -eq 0 ]]; then
+        echo -e "  ${GREEN}✓ 可用 IP 数量极大（>65536）${NC}"
+        local net64
+        net64=$(python3 -c "
+import ipaddress
+net = ipaddress.IPv6Network('${host_ip}/64', strict=False)
+print(str(net))
+" 2>/dev/null)
+        PROBE_TYPE="full_64"
+        PROBE_CIDR="$net64"
+        PROBE_COUNT="海量"
+        return 0
+    fi
+
+    # 二分查找精确边界
+    local lo=$last_pass
+    local hi=$first_fail
+
+    while [[ $((hi - lo)) -gt 1 ]]; do
+        local mid=$(( (lo + hi) / 2 ))
+        local test_ip_mid
+        test_ip_mid=$(python3 -c "
+import ipaddress
+addr = ipaddress.IPv6Address('${host_ip}')
+print(str(addr + ${mid}))
+" 2>/dev/null)
+
+        echo -ne "  二分测试 +${mid}... "
+        if probe_single_ip "$test_ip_mid" "$iface"; then
+            echo -e "${GREEN}✓${NC}"
+            lo=$mid
+        else
+            echo -e "${YELLOW}✗${NC}"
+            hi=$mid
+        fi
+    done
+
+    # lo 是最后一个通过的偏移，可用总数 = lo + 1（包含偏移 0 即宿主机本身）
+    # 但宿主机占用 1 个，所以容器可用 = lo
+    local usable_count=$lo
+
+    # 向下取整为最近的安全 CIDR
+    # 找到满足 2^n <= usable_count 的最大 n
+    local cidr_prefix
+    local cidr_count
+    cidr_prefix=$(python3 -c "
+import ipaddress, math
+host = ipaddress.IPv6Address('${host_ip}')
+count = ${usable_count}
+if count <= 0:
+    print('')
+else:
+    # 找到 2^n <= count 的最大 n
+    n = int(math.log2(count)) if count > 0 else 0
+    if n < 1:
+        n = 1
+    prefix_len = 128 - n
+    # 计算对齐的网络地址
+    net = ipaddress.IPv6Network(str(host) + '/' + str(prefix_len), strict=False)
+    # 确保宿主机 IP 在此网络内
+    if host in net:
+        print(str(net) + '|' + str(2**n))
+    else:
+        # 尝试向上偏移一位
+        prefix_len += 1
+        n -= 1
+        net = ipaddress.IPv6Network(str(host) + '/' + str(prefix_len), strict=False)
+        print(str(net) + '|' + str(2**n))
+" 2>/dev/null)
+
+    if [[ -z "$cidr_prefix" || "$cidr_prefix" == "" ]]; then
+        PROBE_TYPE="single_ip"
+        PROBE_COUNT="0"
+        return 0
+    fi
+
+    PROBE_TYPE="small_block"
+    PROBE_CIDR=$(echo "$cidr_prefix" | cut -d'|' -f1)
+    cidr_count=$(echo "$cidr_prefix" | cut -d'|' -f2)
+    PROBE_COUNT="$cidr_count"
+
+    echo -e "  ${GREEN}✓ 检测完成：实际可用约 ${usable_count} 个 IP，安全上报为 ${PROBE_CIDR}（${cidr_count} 个）${NC}"
+    return 0
+}
+
+# ========================== 纯 IPv6 支持功能模块 ==========================
+
+setup_temp_network() {
+    step "临时急救：挂载 DNS64 解析补网..."
+    # 为能够下载 Github 的代码，临时注入公益 DNS64
+    if ! grep -q "2a00:1098:2b::1" /etc/resolv.conf; then
+        # 插入 resolv.conf 顶部
+        sed -i '1i nameserver 2a00:1098:2b::1\nnameserver 2a01:4f8:c2c:123f::1' /etc/resolv.conf
+        info "已临时写入 NAT64 路由节点，恢复对纯 IPv4 站点的访问能力"
+    fi
+}
+
+setup_warp_v4() {
+    step "破壁出击：安装 Cloudflare WARP 提供全局 IPv4 逃生出站隧道..."
+    
+    # 核心修复一：在建隧道前，抓取并物理备份原生态纯净网关参数
+    REAL_V6_IFACE=$(ip -6 route show default 2>/dev/null | grep -v wg | grep -oP 'dev \K\S+' | head -1)
+    REAL_V6_GW=$(ip -6 route show default 2>/dev/null | grep -v wg | grep -oP 'via \K\S+' | head -1)
+    [ -z "$REAL_V6_IFACE" ] && REAL_V6_IFACE=$(ip -o -6 addr show scope global | grep -v wg | awk '{print $2}' | head -1)
+    echo "$REAL_V6_IFACE" > /etc/incudal_v6_iface
+    echo "$REAL_V6_GW" > /etc/incudal_v6_gw
+
+    # 强制不干涉内核锁版本依赖
+    export DEBIAN_FRONTEND=noninteractive
+    apt-get update -qq 2>/dev/null || true
+    if ! apt-get install -y -qq wireguard-tools openresolv >/dev/null 2>&1; then
+        warn "wireguard-tools 安装失败（纯 IPv6 环境 apt 源可能不可达）"
+        warn "尝试仅安装 wireguard-tools..."
+        apt-get install -y -qq wireguard-tools >/dev/null 2>&1 || true
+    fi
+
+    # 检查 wireguard 是否可用
+    if ! command -v wg &>/dev/null; then
+        warn "WireGuard 工具未安装成功，跳过 WARP 配置"
+        warn "容器将仅使用 IPv6 出站，可稍后手动安装 WARP"
+        return 0
+    fi
+
+    local wgcf_url=""
+    if [[ "$ARCH" == "amd64" || "$ARCH" == "x86_64" ]]; then
+        wgcf_url="https://github.com/ViRb3/wgcf/releases/download/v2.2.22/wgcf_2.2.22_linux_amd64"
+    elif [[ "$ARCH" == "arm64" || "$ARCH" == "aarch64" ]]; then
+        wgcf_url="https://github.com/ViRb3/wgcf/releases/download/v2.2.22/wgcf_2.2.22_linux_arm64"
+    else
+        warn "架构不受支持，跳过 WARP 安装"
+        return 0
+    fi
+    
+    info "拉取核心组件 wgcf..."
+    # 纯 IPv6 下 GitHub 可能不可达，多次重试
+    local retry=0
+    local max_retry=3
+    while [[ $retry -lt $max_retry ]]; do
+        if curl -sL --connect-timeout 30 --max-time 120 "$wgcf_url" -o /usr/local/bin/wgcf 2>/dev/null; then
+            # 验证下载是否成功（文件大于 1MB）
+            local fsize
+            fsize=$(stat -c%s /usr/local/bin/wgcf 2>/dev/null || echo "0")
+            if [[ "$fsize" -gt 1048576 ]]; then
+                break
+            fi
+        fi
+        retry=$((retry + 1))
+        if [[ $retry -lt $max_retry ]]; then
+            info "下载失败，${retry}/${max_retry} 次重试中（等待 5s）..."
+            sleep 5
+        fi
+    done
+
+    if [[ ! -f /usr/local/bin/wgcf ]] || [[ $(stat -c%s /usr/local/bin/wgcf 2>/dev/null || echo "0") -lt 1048576 ]]; then
+        warn "wgcf 下载失败（纯 IPv6 环境无法访问 GitHub CDN）"
+        warn "跳过 WARP 配置，容器将仅使用 IPv6 出站"
+        warn "解决方案: 手动下载 wgcf 到 /usr/local/bin/wgcf 后运行安装脚本"
+        rm -f /usr/local/bin/wgcf 2>/dev/null || true
+        return 0
+    fi
+
+    chmod +x /usr/local/bin/wgcf
+
+    mkdir -p /etc/wireguard
+    cd /etc/wireguard || return 0
+
+    if [[ ! -f wgcf-account.toml ]]; then
+        info "底层设备匿名注册申请中..."
+        yes | /usr/local/bin/wgcf register --accept-tos >/dev/null 2>&1 || true
+    fi
+
+    if [[ ! -f wgcf-profile.conf ]]; then
+        info "生成防污染隧道隔离切片..."
+        /usr/local/bin/wgcf generate >/dev/null 2>&1 || true
+    fi
+
+    if [[ -f wgcf-profile.conf ]]; then
+        # 核心切片：剔除接管所有 IPv6，把唯一的源出站权让给宿主机
+        sed -i '/AllowedIPs = ::\/0/d' wgcf-profile.conf
+        # 删除 IPv6 隧道地址，只保留 IPv4 隧道地址（防止 wg-quick 为 IPv6 地址添加路由规则）
+        sed -i 's/Address = \([^,]*\), *fd[0-9a-f:].*$/Address = \1/' wgcf-profile.conf
+        # 核心切片：将服务端入口转换为无缝直连 IPv6，防止断流握手
+        sed -i 's/Endpoint.*engage.cloudflareclient.com/Endpoint = \[2606:4700:d0::a29f:c001\]/g' wgcf-profile.conf
+        # 关键修复：删除 DNS 行，防止 wg-quick 在启停时劫持宿主机 /etc/resolv.conf
+        # 如果不删除，wg-quick down 会将 resolv.conf 回滚到原始的纯 IPv4 DNS（如 GCP 的 169.254.169.254），
+        # 导致宿主机和所有容器的 DNS 解析全部瘫痪
+        sed -i '/^DNS/d' wgcf-profile.conf
+        
+        cp wgcf-profile.conf wg0.conf
+        chmod 600 wg0.conf
+        
+        systemctl enable wg-quick@wg0 >/dev/null 2>&1 || true
+        systemctl start wg-quick@wg0 >/dev/null 2>&1 || true
+        
+        info "内核级网卡 wg0 启动完毕，您的服务器已具备虚拟双栈特性！"
+    else
+        warn "WARP 配置文件未能生成（wgcf register 可能失败）"
+        warn "容器将仅使用 IPv6 出站，可稍后手动配置 WARP"
+    fi
+    
+    # 注入出站控制器
+    cat > /usr/local/bin/incus-warp << 'EOF'
+#!/bin/bash
+if [[ "$1" == "on" ]]; then
+    systemctl start wg-quick@wg0 2>/dev/null
+    echo "🌍 [ON] WARP IPv4 抢救通道已激活。容器支持出海更新包下载。"
+elif [[ "$1" == "off" ]]; then
+    systemctl stop wg-quick@wg0 2>/dev/null
+    # 核心修复二：使用强落地的环境备份读取真实原生网关，拒绝 fe80::1
+    REAL_V6_IFACE=$(cat /etc/incudal_v6_iface 2>/dev/null)
+    REAL_V6_GW=$(cat /etc/incudal_v6_gw 2>/dev/null)
+    [ -z "$REAL_V6_IFACE" ] && REAL_V6_IFACE=$(ip -o -6 addr show scope global | grep -v wg | awk '{print $2}' | head -1)
+    
+    if [ -n "$REAL_V6_IFACE" ] && ! ip -6 route | grep "^default" | grep -v wg > /dev/null 2>&1; then
+        if [ -n "$REAL_V6_GW" ]; then
+            ip -6 route add default via "$REAL_V6_GW" dev "$REAL_V6_IFACE" 2>/dev/null || true
+        else
+            ip -6 route add default dev "$REAL_V6_IFACE" 2>/dev/null || true
+        fi
+    fi
+    # 核心修复三：全面压实纯 DNS64 集群阵列防止 0% 超时现象
+    cat > /etc/resolv.conf <<DNSEOF
+# Incudal WARP-OFF 模式 - 纯 NAT64+DNS64 解析器
+nameserver 2a00:1098:2b::1
+nameserver 2a01:4f8:c2c:123f::1
+nameserver 2001:67c:2b0::4
+DNSEOF
+    echo "🧊 [OFF] WARP IPv4 通道已切断，原生真实 IPv6 路由结构已接管。"
+else
+    echo -e "用法: \033[1;36mincus-warp [on/off]\033[0m"
+    if systemctl is-active wg-quick@wg0 >/dev/null 2>&1; then
+        echo -e "当前出站分流状态: \033[1;32m[ON] IPv6 原生 + IPv4 WARP 接驳\033[0m"
+    else
+        echo -e "当前出站分流状态: \033[1;31m[OFF] 100% 绝对纯净 IPv6 环境回落\033[0m"
+    fi
+fi
+EOF
+    chmod +x /usr/local/bin/incus-warp
+    info "出站调度指令控制台部署成功: 随时键入 incus-warp 操控"
+
+    # 部署 IPv6 路由恢复守护脚本（兜底保险）
+    cat > /usr/local/bin/ipv6-route-guard.sh << 'GUARD_EOF'
+#!/bin/bash
+# IPv6 路由恢复守护脚本 - 由 Incudal 安装脚本自动部署
+# 每 10 秒检测 IPv6 默认路由，丢失则自动恢复
+
+IPV6_IFACE=$(cat /etc/incudal_v6_iface 2>/dev/null)
+IPV6_GATEWAY=$(cat /etc/incudal_v6_gw 2>/dev/null)
+
+if [ -z "$IPV6_IFACE" ]; then
+    IPV6_IFACE=$(ip -6 route show default 2>/dev/null | grep -v wg | grep -oP 'dev \K\S+' | head -1)
+    [ -z "$IPV6_IFACE" ] && IPV6_IFACE=$(ip -o -6 addr show scope global | grep -v wg | awk '{print $2}' | head -1)
+fi
+
+[ -z "$IPV6_IFACE" ] && exit 0
+
+while true; do
+    # 检查是否存在非 WireGuard 接口的 IPv6 默认路由
+    if ! ip -6 route | grep "^default" | grep -v wg > /dev/null 2>&1; then
+        if [ -n "$IPV6_GATEWAY" ]; then
+            ip -6 route add default via "$IPV6_GATEWAY" dev "$IPV6_IFACE" 2>/dev/null
+        else
+            ip -6 route add default dev "$IPV6_IFACE" 2>/dev/null
+        fi
+    fi
+    sleep 10
+done
+GUARD_EOF
+    chmod +x /usr/local/bin/ipv6-route-guard.sh
+
+    # 创建 systemd 服务
+    cat > /etc/systemd/system/ipv6-route-guard.service << 'SVC_EOF'
+[Unit]
+Description=IPv6 Route Guard - Incudal 自动恢复 IPv6 默认路由
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+ExecStart=/usr/local/bin/ipv6-route-guard.sh
+Restart=always
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
+SVC_EOF
+
+    systemctl daemon-reload
+    systemctl enable --now ipv6-route-guard > /dev/null 2>&1 || true
+    info "IPv6 路由守护已部署: 即使 WARP 意外断联，IPv6 也将在 10 秒内自愈"
+}
+
+# ========================== 安装步骤 ==========================
+
+# 步骤 1: 配置内核参数
+setup_kernel() {
+    step "步骤 [1/5]  配置内核参数..."
+
+    # 加载网桥过滤模块
+    echo "br_netfilter" > /etc/modules-load.d/br_netfilter.conf
+    modprobe br_netfilter || true
+
+    # 基础 sysctl 参数 + BBR 拥塞控制 + TCP 缓冲区优化
+    cat > /etc/sysctl.d/99-incus.conf <<EOF
+# Incudal 节点内核参数 - 由安装脚本自动生成
+# ======== 文件系统 ========
+fs.inotify.max_user_instances = 1048576
+fs.file-max = 6815744
+
+# ======== 网桥过滤 ========
+net.bridge.bridge-nf-call-ip6tables = 1
+net.bridge.bridge-nf-call-iptables = 1
+net.bridge.bridge-nf-call-arptables = 1
+
+# ======== IPv4 转发与路由 ========
+net.ipv4.ip_forward = 1
+net.ipv4.conf.all.route_localnet = 1
+net.ipv4.conf.all.forwarding = 1
+net.ipv4.conf.default.forwarding = 1
+
+# ======== BBR 拥塞控制 ========
+net.core.default_qdisc = fq
+net.ipv4.tcp_congestion_control = bbr
+
+# ======== TCP 性能优化 ========
+net.ipv4.tcp_no_metrics_save = 1
+net.ipv4.tcp_ecn = 0
+net.ipv4.tcp_frto = 0
+net.ipv4.tcp_mtu_probing = 0
+net.ipv4.tcp_rfc1337 = 0
+net.ipv4.tcp_sack = 1
+net.ipv4.tcp_fack = 1
+net.ipv4.tcp_window_scaling = 1
+net.ipv4.tcp_adv_win_scale = 1
+net.ipv4.tcp_moderate_rcvbuf = 1
+
+# ======== 网络缓冲区 ========
+net.core.rmem_max = 33554432
+net.core.wmem_max = 33554432
+net.ipv4.tcp_rmem = 4096 87380 33554432
+net.ipv4.tcp_wmem = 4096 16384 33554432
+net.ipv4.udp_rmem_min = 8192
+net.ipv4.udp_wmem_min = 8192
+
+# ======== IPv6 转发（所有模式默认启用） ========
+net.ipv6.conf.all.forwarding = 1
+net.ipv6.conf.default.forwarding = 1
+EOF
+
+    # IPv6 NAT 模式追加代理与路由通告参数
+    if [[ "$MODE" == "nat_ipv6" ]]; then
+        cat >> /etc/sysctl.d/99-incus.conf <<EOF
+
+# IPv6 NAT 模式专用参数
+net.ipv6.conf.all.proxy_ndp = 1
+net.ipv6.conf.all.accept_ra = 2
+net.ipv6.conf.default.accept_ra = 2
+net.ipv6.conf.${DEFAULT_IFACE}.accept_ra = 2
+net.ipv6.conf.${DEFAULT_IFACE}.proxy_ndp = 1
+EOF
+    fi
+
+    sysctl -p >/dev/null 2>&1 || true
+    sysctl --system >/dev/null 2>&1 || true
+
+    # 验证 BBR 是否生效
+    if lsmod | grep -q bbr 2>/dev/null || sysctl net.ipv4.tcp_congestion_control 2>/dev/null | grep -q bbr; then
+        log "BBR 拥塞控制已启用 ✓"
+    else
+        warn "BBR 未能自动加载（内核可能不支持），TCP 将使用默认拥塞算法"
+    fi
+
+    log "内核参数配置完成（含 BBR + TCP 优化）"
+}
+
+# 步骤 2: 安装系统依赖
+install_deps() {
+    step "步骤 [2/5]  安装系统依赖..."
+
+    export DEBIAN_FRONTEND=noninteractive
+    apt-get update -qq 2>/dev/null
+
+    # Debian 系统需要确保 contrib 组件已启用（ZFS 包在 contrib 中）
+    if [[ "$OS_ID" == "debian" ]]; then
+        local contrib_enabled=false
+
+        # 检查 DEB822 格式源文件（Debian 12+）
+        if [[ -f /etc/apt/sources.list.d/debian.sources ]]; then
+            if grep -q "contrib" /etc/apt/sources.list.d/debian.sources 2>/dev/null; then
+                contrib_enabled=true
+            fi
+        fi
+
+        # 检查传统格式源文件
+        if [[ -f /etc/apt/sources.list ]]; then
+            if grep -q "contrib" /etc/apt/sources.list 2>/dev/null; then
+                contrib_enabled=true
+            fi
+        fi
+
+        if [[ "$contrib_enabled" == "false" ]]; then
+            info "Debian 系统：启用 contrib 组件以支持 ZFS..."
+            if [[ -f /etc/apt/sources.list.d/debian.sources ]]; then
+                sed -i 's/Components: main$/Components: main contrib/' \
+                    /etc/apt/sources.list.d/debian.sources 2>/dev/null || true
+            elif [[ -f /etc/apt/sources.list ]]; then
+                sed -i '/^deb.*main/ { /contrib/! s/main/main contrib/ }' \
+                    /etc/apt/sources.list 2>/dev/null || true
+            fi
+            apt-get update -qq 2>/dev/null
+        fi
+    fi
+
+    # 安装基础依赖
+    apt-get install -y -qq curl gpg >/dev/null 2>&1
+
+    # ---- Debian ZFS 安装策略 ----
+    # 优先级: 预编译包(秒级) → DKMS 编译(分钟级) → 跳过(使用 dir 存储池)
+    local debian_zfs_compiled=false
+    if [[ "$OS_ID" == "debian" ]]; then
+        local kernel_ver
+        kernel_ver=$(uname -r)
+
+        # 策略 1: 尝试下载预编译 ZFS 模块包
+        if install_zfs_prebuilt "$kernel_ver"; then
+            debian_zfs_compiled=false  # 预编译模式不需要后续清理编译环境
+            log "系统依赖安装完成（ZFS 预编译模块，秒级部署）"
+        # 策略 2: 询问用户是否进行 DKMS 即时编译
+        else
+            warn "未找到内核 ${kernel_ver} 的预编译 ZFS 模块包"
+            echo ""
+            info "当前内核版本暂无预编译包，可选择 DKMS 即时编译（约 5-10 分钟）"
+            echo -ne "  ${BOLD}是否进行实时编译？${NC}[Y/n]: "
+            read -r dkms_confirm || true
+            if [[ "${dkms_confirm:-}" =~ ^[nN]$ ]]; then
+                warn "已跳过 ZFS 安装，返回主菜单"
+                return 1
+            fi
+            info "开始 DKMS 即时编译..."
+            install_zfs_dkms
+            debian_zfs_compiled=true
+        fi
+    else
+        # Ubuntu: 直接安装（预编译模块随内核提供）
+        if apt-get install -y -qq zfsutils-linux >/dev/null 2>&1; then
+            log "系统依赖安装完成（含 ZFS）"
+        else
+            warn "ZFS 工具安装失败，已跳过（面板可使用 dir/btrfs 存储池）"
+            log "基础依赖安装完成"
+        fi
+    fi
+
+    # Debian DKMS 编译后清理：删除编译工具链以释放资源
+    if [[ "$debian_zfs_compiled" == "true" ]]; then
+        info "ZFS DKMS 编译成功，清理编译环境以释放资源..."
+
+        # 锁定当前内核版本，防止自动更新时 DKMS 在无编译环境下重编译失败
+        local kernel_pkg
+        kernel_pkg=$(dpkg -l | awk '/^ii.*linux-image-[0-9]/ {print $2}' | head -n1 || true)
+        if [[ -n "$kernel_pkg" ]]; then
+            apt-mark hold "$kernel_pkg" >/dev/null 2>&1 || true
+            info "已锁定内核版本: ${kernel_pkg}（防止自动更新导致 ZFS 失效）"
+        fi
+
+        # 卸载编译工具链（gcc、g++、make 等，约 200-500MB）
+        apt-get purge -y -qq build-essential cpp gcc g++ make dpkg-dev >/dev/null 2>&1 || true
+        # 卸载内核头文件（约 100-200MB）
+        apt-get purge -y -qq "linux-headers-$(uname -r)" linux-headers-* >/dev/null 2>&1 || true
+        # 自动清理不再需要的依赖
+        apt-get autoremove -y -qq >/dev/null 2>&1 || true
+        # 清理 APT 下载缓存
+        apt-get clean 2>/dev/null || true
+
+        log "编译环境已清理，磁盘空间已释放"
+        warn "注意：内核版本已锁定，如需更新内核请先重装编译依赖"
+        info "更新内核前请运行: apt install build-essential linux-headers-\$(uname -r)"
+    fi
+}
+
+# ---- Debian ZFS 策略 1: 预编译模块安装 ----
+install_zfs_prebuilt() {
+    local kernel_ver="$1"
+    local prebuilt_url="${ZFS_PREBUILT_URL}/zfs-modules-${kernel_ver}.tar.gz"
+    local tmp_tar="/tmp/zfs-prebuilt-$$.tar.gz"
+    local tmp_dir="/tmp/zfs-prebuilt-$$"
+
+    info "尝试下载预编译 ZFS 模块 (${kernel_ver})..."
+    info "下载地址: ${prebuilt_url}"
+
+    # 下载预编译包
+    if ! curl -sSfL --connect-timeout 10 --max-time 60 \
+        "$prebuilt_url" -o "$tmp_tar" 2>/dev/null; then
+        info "未找到内核 ${kernel_ver} 的预编译包"
+        rm -f "$tmp_tar" 2>/dev/null || true
+        return 1
+    fi
+
+    info "预编译包下载成功，开始安装..."
+
+    # 解压
+    mkdir -p "$tmp_dir"
+    if ! tar -xzf "$tmp_tar" -C "$tmp_dir" 2>/dev/null; then
+        error "预编译包解压失败"
+        rm -rf "$tmp_tar" "$tmp_dir" 2>/dev/null || true
+        return 1
+    fi
+
+    # 读取元数据，获取模块安装路径
+    local pack_dir
+    pack_dir=$(find "$tmp_dir" -name "metadata.txt" -printf '%h\n' 2>/dev/null | head -n1)
+    if [[ -z "$pack_dir" ]]; then
+        error "预编译包格式无效（缺少 metadata.txt）"
+        rm -rf "$tmp_tar" "$tmp_dir" 2>/dev/null || true
+        return 1
+    fi
+
+    # 验证内核版本匹配
+    local pkg_kernel
+    pkg_kernel=$(awk -F= '/^kernel_version=/{print $2}' "$pack_dir/metadata.txt" 2>/dev/null)
+    if [[ "$pkg_kernel" != "$kernel_ver" ]]; then
+        warn "预编译包内核版本不匹配 (包: ${pkg_kernel}, 本机: ${kernel_ver})"
+        rm -rf "$tmp_tar" "$tmp_dir" 2>/dev/null || true
+        return 1
+    fi
+
+    # 获取模块安装路径
+    local module_path
+    module_path=$(awk -F= '/^module_path=/{print $2}' "$pack_dir/metadata.txt" 2>/dev/null)
+    if [[ -z "$module_path" ]]; then
+        module_path="updates/dkms"  # 默认路径
+    fi
+
+    # 复制模块文件到正确位置
+    local target_dir="/lib/modules/${kernel_ver}/${module_path}"
+    mkdir -p "$target_dir"
+    cp "$pack_dir/modules/"*.ko* "$target_dir/" 2>/dev/null
+
+    local ko_count
+    ko_count=$(find "$target_dir" -name "*.ko*" -type f 2>/dev/null | wc -l)
+    info "已安装 ${ko_count} 个内核模块 → ${target_dir}"
+
+    # 更新模块依赖关系
+    depmod -a 2>/dev/null || true
+
+    # 加载 ZFS 模块验证
+    if ! modprobe zfs 2>/dev/null; then
+        error "预编译模块加载失败"
+        rm -rf "$tmp_tar" "$tmp_dir" 2>/dev/null || true
+        return 1
+    fi
+
+    info "ZFS 内核模块加载成功 ✓"
+
+    # 安装 ZFS 用户空间工具（不拉取 DKMS，避免触发编译）
+    info "安装 ZFS 用户空间工具..."
+    apt-get install -y -qq --no-install-recommends zfsutils-linux >/dev/null 2>&1 || {
+        # 如果 --no-install-recommends 不够，强制跳过 dkms
+        apt-get install -y -qq zfsutils-linux >/dev/null 2>&1 || true
+    }
+
+    # 锁定内核版本
+    local kernel_pkg
+    kernel_pkg=$(dpkg -l | awk '/^ii.*linux-image-[0-9]/ {print $2}' | head -n1 || true)
+    if [[ -n "$kernel_pkg" ]]; then
+        apt-mark hold "$kernel_pkg" >/dev/null 2>&1 || true
+        info "已锁定内核版本: ${kernel_pkg}"
+    fi
+
+    # 清理临时文件
+    rm -rf "$tmp_tar" "$tmp_dir" 2>/dev/null || true
+
+    log "ZFS 预编译模块安装成功（内核: ${kernel_ver}）"
+    return 0
+}
+
+# ---- Debian ZFS 策略 2: DKMS 即时编译（回退方案）----
+install_zfs_dkms() {
+    info "安装 DKMS 编译依赖（linux-headers、build-essential）..."
+    
+    # 优先安装通用编译核心工具，防止一处失败导致全部跳过
+    apt-get install -y -qq build-essential dkms >/dev/null 2>&1 || true
+
+    # 尝试安装精确版本内核源码头
+    if ! apt-get install -y -qq "linux-headers-$(uname -r)" >/dev/null 2>&1; then
+        warn "未找到精确的内核头文件 linux-headers-$(uname -r)"
+        info "正尝试拉取架构级通用头文件（linux-headers-amd64）..."
+        apt-get install -y -qq linux-headers-amd64 >/dev/null 2>&1 || {
+            warn "内核头文件均安装失败，ZFS DKMS 编译极可能无法正常进行"
+        }
+    fi
+
+    info "开始 DKMS 编译 ZFS 模块（CPU 将跑满，请耐心等待）..."
+    local start_time=$SECONDS
+
+    if apt-get install -y -qq zfsutils-linux >/dev/null 2>&1; then
+        local elapsed=$(( SECONDS - start_time ))
+        info "编译耗时: ${elapsed} 秒"
+
+        # 验证 ZFS 模块
+        if modprobe zfs 2>/dev/null; then
+            log "ZFS DKMS 编译成功（模块已加载）"
+        else
+            warn "ZFS 工具已安装但内核模块加载失败（DKMS 编译可能不完整）"
+            info "面板仍可使用 dir/btrfs 存储池，ZFS 可稍后手动修复"
+        fi
+    else
+        warn "ZFS 安装失败，已跳过（面板可使用 dir/btrfs 存储池）"
+    fi
+}
+
+# 步骤 3: 安装 Incus
+install_incus() {
+    step "步骤 [3/5]  安装 Incus..."
+
+    # 幂等性：已安装且服务端正常运行则跳过
+    if incus version 2>/dev/null | grep -q -E "Server version: [0-9]"; then
+        local current_ver
+        current_ver=$(incus version 2>/dev/null | awk '/Client version/ {print $3}' || echo "未知")
+        info "Incus 服务已安装并运行（版本: ${current_ver}），跳过安装"
+        return 0
+    fi
+
+    # 导入 Zabbly GPG 密钥
+    mkdir -p /etc/apt/keyrings
+    curl -fsSL https://pkgs.zabbly.com/key.asc \
+        | gpg --yes --dearmor -o /etc/apt/keyrings/zabbly.gpg
+
+    # 添加 Zabbly APT 源（同时支持 Ubuntu 和 Debian）
+    cat > /etc/apt/sources.list.d/zabbly-incus-stable.sources <<SRC
+Enabled: yes
+Types: deb
+URIs: https://pkgs.zabbly.com/incus/stable
+Suites: ${OS_CODENAME}
+Components: main
+Architectures: ${ARCH}
+Signed-By: /etc/apt/keyrings/zabbly.gpg
+SRC
+
+    apt-get update -qq 2>/dev/null
+    apt-get install -y -qq incus >/dev/null
+    log "Incus 安装完成"
+}
+
+# 步骤 4: 初始化 Incus
+init_incus() {
+    step "步骤 [4/5]  初始化 Incus..."
+
+    # 幂等性：网桥已存在则跳过
+    if incus network show "$BRIDGE_NAME" &>/dev/null; then
+        info "网桥 ${BRIDGE_NAME} 已存在，跳过初始化"
+        return 0
+    fi
+
+    # 生成 preseed 配置
+    local ipv6_block
+    if [[ "$MODE" == "nat_ipv6" ]]; then
+        info "面板受控模式 (IPv4 NAT + IPv6 环境): 准备建立内核转发链路"
+        if [[ -n "${IPV6_SUBNET:-}" ]]; then
+            # 有独立子网：routed 模式走 eth1 独立分配 IPv6，但网桥同时启用 IPv6 NAT 作为保底
+            # 这样 nat_ipv6_nat 模式的实例也能在同一节点上通过桥共享 IPv6 出口
+            ipv6_block="ipv6.address: auto\n      ipv6.nat: \"true\"\n      ipv6.dhcp: \"true\""
+            info "▶ [IPv6 配置分支] 独立路由网段 + 网桥 NAT 双通道模式，routed 直通与 NAT 共享可共存。"
+        else
+            # 用户选择单 IP 共享，网桥需要负责分发 ULA (内部 IPv6) 并 NAT 出口
+            ipv6_block="ipv6.address: auto\n      ipv6.nat: \"true\"\n      ipv6.dhcp: \"true\""
+            info "▶ [IPv6 配置分支] 单一公共 IP 模式 (Bridge: Auto+NAT)，已激活内部 IPv6 出站共享代理功能。"
+        fi
+        
+        # [核心修复区] Debian 默认闭合的内核转发
+        sysctl -w net.ipv6.conf.all.forwarding=1 >/dev/null 2>&1 || true
+        sysctl -w net.ipv6.conf.default.forwarding=1 >/dev/null 2>&1 || true
+        sysctl -w net.ipv6.conf.all.proxy_ndp=1 >/dev/null 2>&1 || true
+        sysctl -w net.ipv6.conf.default.proxy_ndp=1 >/dev/null 2>&1 || true
+        
+        # 配置 ndppd (邻居发现)，这是对非直连路由云主机的保底策略
+        if [[ -n "${IPV6_SUBNET:-}" && -n "${IPV6_IFACE:-}" ]]; then
+            export DEBIAN_FRONTEND=noninteractive
+            apt-get install -y -qq ndppd >/dev/null 2>&1 || true
+            cat > /etc/ndppd.conf <<EOF
+proxy ${IPV6_IFACE} {
+    rule ${IPV6_SUBNET} {
+        auto
+    }
+}
+EOF
+            systemctl restart ndppd 2>/dev/null || true
+            systemctl enable ndppd 2>/dev/null || true
+            info "NDPPD 路由代理保活已附加配置"
+        fi
+    else
+        # MODE=nat（仅 IPv4）：检测是否为纯 IPv6 环境
+        if [[ "$IS_PURE_IPV6" == "true" ]]; then
+            # 纯 IPv6 宿主机即使选了"仅 IPv4"，也必须启用桥 IPv6 NAT，否则容器完全断网
+            ipv6_block="ipv6.address: auto\n      ipv6.nat: \"true\"\n      ipv6.dhcp: \"true\""
+            info "▶ [IPv6 自动修正] 检测到纯 IPv6 环境，已自动启用网桥 IPv6 NAT 防止容器断网。"
+        else
+            ipv6_block="ipv6.address: none"
+        fi
+    fi
+
+    # 纯 IPv6 环境：网桥必须强制配置 100% 纯 NAT64 提供商，防止容器内的双栈域名引发 IPv4 DNS 污染死锁超时
+    local dns_block=""
+    if [[ "$IS_PURE_IPV6" == "true" ]]; then
+        dns_block="dns.nameservers: 2a00:1098:2b::1,2a01:4f8:c2c:123f::1,2001:67c:2b0::4"
+        info "纯 IPv6 环境：已为网桥独家配置纯公益 NAT64/DNS64 集群，护航出站"
+    fi
+
+    # 写入文件
+    cat > "$PRESEED_FILE" <<YAML
+config:
+  core.https_address: '[::]:${LISTEN_PORT}'
+networks:
+  - name: ${BRIDGE_NAME}
+    type: bridge
+    config:
+      ipv4.address: ${BRIDGE_SUBNET}
+      ipv4.nat: "true"
+      ipv4.dhcp: "true"
+      $(echo -e "$ipv6_block")
+      ${dns_block:+$dns_block}
+storage_pools: []
+profiles: []
+cluster: null
+YAML
+
+    incus admin init --preseed < "$PRESEED_FILE"
+    log "Incus 初始化完成"
+}
+
+# 步骤 5: 导入面板证书
+import_cert() {
+    step "步骤 [5/5]  导入面板信任证书..."
+
+    # 幂等性：证书已存在则跳过
+    if incus config trust list --format csv 2>/dev/null | grep -q "panel"; then
+        info "面板证书已存在，跳过导入"
+        return 0
+    fi
+
+    local cert_url="${PANEL_URL}/api/hosts/cert/${TOKEN}"
+
+    if ! curl -sSf "$cert_url" \
+        | incus config trust add-certificate - --name panel >/dev/null 2>&1; then
+        error "证书导入失败！请检查："
+        error "  1. Token 是否正确"
+        error "  2. 面板 ${PANEL_URL} 是否可达"
+        error "  3. 网络连接是否正常"
+        exit 1
+    fi
+
+    log "面板证书导入成功"
+}
+
+# 附加步骤：安装宿主机 Agent
+install_incudal_agent() {
+    if [[ "$AGENT_ENABLED" != "true" ]]; then
+        AGENT_INSTALL_STATUS="已跳过"
+        info "宿主机 Agent 自动安装已关闭，跳过"
+        return 0
+    fi
+
+    if [[ -z "$PANEL_URL" || ( -z "$AGENT_INSTALL_TOKEN" && ( -z "$AGENT_ID" || -z "$AGENT_SECRET" ) ) ]]; then
+        AGENT_INSTALL_STATUS="已跳过"
+        warn "未注入 Agent 安装 token 或凭据，跳过宿主机 Agent 安装"
+        return 0
+    fi
+
+    step "附加步骤  安装宿主机 Agent..."
+
+    local agent_install_url="${PANEL_URL}/api/agent/install.sh"
+    if curl -fsSL "$agent_install_url" | \
+        INCUDAL_PANEL_URL="$PANEL_URL" \
+        INCUDAL_AGENT_INSTALL_TOKEN="$AGENT_INSTALL_TOKEN" \
+        INCUDAL_AGENT_ID="$AGENT_ID" \
+        INCUDAL_AGENT_SECRET="$AGENT_SECRET" \
+        INCUDAL_AGENT_BINARY_URL="$AGENT_BINARY_URL" \
+        INCUDAL_HEARTBEAT_INTERVAL_SECONDS="$AGENT_HEARTBEAT_INTERVAL_SECONDS" \
+        bash; then
+        AGENT_INSTALL_STATUS="已安装"
+        log "宿主机 Agent 安装完成"
+    else
+        AGENT_INSTALL_STATUS="安装失败"
+        warn "宿主机 Agent 安装失败，Incus 节点初始化已完成，可稍后在面板重新生成 Agent 安装命令"
+    fi
+
+    return 0
+}
+
+# Agent 独立安装器调用
+run_incudal_agent_installer() {
+    local panel_url="${1%/}"
+    local install_token="${2:-}"
+    local agent_id="${3:-}"
+    local agent_secret="${4:-}"
+    local heartbeat_interval="${5:-30}"
+    local binary_url="${6:-}"
+
+    if [[ -z "$panel_url" ]]; then
+        error "面板地址不能为空"
+        return 1
+    fi
+    if ! is_http_url "$panel_url"; then
+        error "面板地址格式无效: ${panel_url}"
+        return 1
+    fi
+    if [[ -z "$install_token" && ( -z "$agent_id" || -z "$agent_secret" ) ]]; then
+        error "缺少 Agent 安装 token 或本机 Agent 凭据"
+        return 1
+    fi
+
+    heartbeat_interval=$(normalize_agent_interval "$heartbeat_interval")
+    local agent_install_url="${panel_url}/api/agent/install.sh"
+
+    step "安装 / 更新宿主机 Agent..."
+    info "面板地址: ${panel_url}"
+    if [[ -n "$install_token" ]]; then
+        info "安装 token: $(mask_value "$install_token")"
+    else
+        info "Agent ID: $(mask_value "$agent_id")"
+    fi
+
+    if curl -fsSL "$agent_install_url" | \
+        INCUDAL_PANEL_URL="$panel_url" \
+        INCUDAL_AGENT_INSTALL_TOKEN="$install_token" \
+        INCUDAL_AGENT_ID="$agent_id" \
+        INCUDAL_AGENT_SECRET="$agent_secret" \
+        INCUDAL_AGENT_BINARY_URL="$binary_url" \
+        INCUDAL_HEARTBEAT_INTERVAL_SECONDS="$heartbeat_interval" \
+        bash; then
+        log "宿主机 Agent 安装 / 更新完成"
+        return 0
+    fi
+
+    error "宿主机 Agent 安装 / 更新失败"
+    return 1
+}
+
+show_incudal_agent_status() {
+    divider
+    echo -e "  ${BOLD}Agent 状态${NC}"
+    divider
+
+    local panel_url=""
+    local agent_id=""
+    local heartbeat_interval=""
+    panel_url=$(read_agent_config_value "panel_url" || true)
+    agent_id=$(read_agent_config_value "agent_id" || true)
+    heartbeat_interval=$(read_agent_config_value "heartbeat_interval_seconds" || true)
+    heartbeat_interval=$(normalize_agent_interval "${heartbeat_interval:-30}")
+
+    if [[ -f "$AGENT_CONFIG_FILE" ]]; then
+        echo -e "  配置文件  :  ${GREEN}${AGENT_CONFIG_FILE}${NC}"
+        echo -e "  面板地址  :  ${GREEN}${panel_url:-未知}${NC}"
+        echo -e "  Agent ID :  ${GREEN}$(mask_value "$agent_id")${NC}"
+        echo -e "  上报间隔  :  ${GREEN}${heartbeat_interval} 秒${NC}"
+    else
+        echo -e "  配置文件  :  ${DIM}未找到 (${AGENT_CONFIG_FILE})${NC}"
+    fi
+
+    if [[ -x "$AGENT_BIN_PATH" ]]; then
+        echo -e "  二进制    :  ${GREEN}${AGENT_BIN_PATH}${NC}"
+    else
+        echo -e "  二进制    :  ${DIM}未安装 (${AGENT_BIN_PATH})${NC}"
+    fi
+
+    if command -v systemctl &>/dev/null; then
+        if systemctl is-active --quiet "$AGENT_SERVICE_NAME" 2>/dev/null; then
+            echo -e "  服务状态  :  ${GREEN}运行中${NC}"
+        elif systemctl list-unit-files "${AGENT_SERVICE_NAME}.service" --no-legend 2>/dev/null | grep -q "^${AGENT_SERVICE_NAME}.service"; then
+            echo -e "  服务状态  :  ${YELLOW}已安装（未运行）${NC}"
+        else
+            echo -e "  服务状态  :  ${DIM}未安装${NC}"
+        fi
+    else
+        echo -e "  服务状态  :  ${DIM}systemctl 不可用${NC}"
+    fi
+
+    divider
+}
+
+prompt_agent_panel_url() {
+    local default_panel_url="${1:-}"
+    local panel_url=""
+
+    if [[ -t 0 ]]; then
+        if [[ -n "$default_panel_url" ]]; then
+            echo -ne "  ${BOLD}面板地址 [默认 ${default_panel_url}]: ${NC}" >&2
+        else
+            echo -ne "  ${BOLD}面板地址 (例如 https://panel.example.com): ${NC}" >&2
+        fi
+        read -r panel_url
+    fi
+
+    panel_url="${panel_url:-$default_panel_url}"
+    panel_url="${panel_url%/}"
+    if [[ -z "$panel_url" ]]; then
+        echo -e "${RED}[✗]${NC} 无法确定面板地址，请输入完整 https:// 地址" >&2
+        return 1
+    fi
+    if ! is_http_url "$panel_url"; then
+        echo -e "${RED}[✗]${NC} 面板地址格式无效: ${panel_url}" >&2
+        return 1
+    fi
+
+    echo "$panel_url"
+}
+
+update_incudal_agent_from_config() {
+    local panel_url=""
+    local agent_id=""
+    local agent_secret=""
+    local heartbeat_interval=""
+
+    panel_url=$(read_agent_config_value "panel_url" || true)
+    agent_id=$(read_agent_config_value "agent_id" || true)
+    agent_secret=$(read_agent_config_value "agent_secret" || true)
+    heartbeat_interval=$(read_agent_config_value "heartbeat_interval_seconds" || true)
+    heartbeat_interval=$(normalize_agent_interval "${heartbeat_interval:-30}")
+
+    if [[ -z "$panel_url" || -z "$agent_id" || -z "$agent_secret" ]]; then
+        warn "本机没有完整的 Agent 配置，无法直接更新"
+        info "如需补装，请先在面板为该宿主机生成 Agent 安装命令，再选择 token 补装"
+        return 1
+    fi
+
+    prompt_agent_heartbeat_interval "$heartbeat_interval"
+    run_incudal_agent_installer "$panel_url" "" "$agent_id" "$agent_secret" "$AGENT_HEARTBEAT_INTERVAL_SECONDS" "$AGENT_BINARY_URL"
+}
+
+install_incudal_agent_with_token() {
+    echo ""
+    divider
+    echo -e "  ${BOLD}输入 Agent 一次性安装 token${NC}"
+    echo -e "  ${DIM}可粘贴 ait_... token，也可粘贴面板生成的完整 Agent 安装命令。${NC}"
+    divider
+    echo ""
+    echo -ne "  ${CYAN}Token / 命令: ${NC}"
+    local token_input=""
+    read -r token_input
+
+    local install_token=""
+    install_token=$(extract_agent_install_token "$token_input")
+    if [[ -z "$install_token" ]]; then
+        error "未找到 Agent 安装 token。Agent token 应以 ait_ 开头。"
+        return 1
+    fi
+
+    local extracted_panel_url=""
+    local default_panel_url=""
+    extracted_panel_url=$(extract_agent_panel_url "$token_input" || true)
+    default_panel_url="${extracted_panel_url:-$(get_agent_panel_url || true)}"
+
+    local panel_url=""
+    panel_url=$(prompt_agent_panel_url "$default_panel_url") || return 1
+
+    local current_interval=""
+    current_interval=$(read_agent_config_value "heartbeat_interval_seconds" || true)
+    prompt_agent_heartbeat_interval "${current_interval:-30}"
+
+    run_incudal_agent_installer "$panel_url" "$install_token" "" "" "$AGENT_HEARTBEAT_INTERVAL_SECONDS" "$AGENT_BINARY_URL"
+}
+
+show_incudal_agent_logs() {
+    step "查看 Agent 最近日志"
+    if ! command -v journalctl &>/dev/null; then
+        error "journalctl 不可用"
+        return 1
+    fi
+    journalctl -u "$AGENT_SERVICE_NAME" --no-pager -n 80 || true
+}
+
+manage_incudal_agent() {
+    while true; do
+        show_incudal_agent_status
+        echo -e "  ${BOLD}请选择 Agent 操作：${NC}"
+        echo ""
+        echo -e "    ${CYAN}1)${NC}  更新 / 重装已安装 Agent  ${DIM}─  使用本机配置${NC}"
+        echo -e "    ${CYAN}2)${NC}  使用一次性 token 补装 / 重装 Agent"
+        echo -e "    ${CYAN}3)${NC}  查看 Agent 日志"
+        echo -e "    ${CYAN}0)${NC}  返回主菜单"
+        echo ""
+        echo -ne "  ${BOLD}请输入选项 [0-3]: ${NC}"
+        local choice=""
+        read -r choice
+        echo ""
+
+        case "$choice" in
+            1) update_incudal_agent_from_config || true; pause_return ;;
+            2) install_incudal_agent_with_token || true; pause_return ;;
+            3) show_incudal_agent_logs || true; pause_return ;;
+            0) return 0 ;;
+            *) warn "无效选项，请重新选择" ;;
+        esac
+    done
+}
+
+# ========================== 安装结果 ==========================
+show_result() {
+    local mode_label=""
+    case "$MODE" in
+        nat)      mode_label="NAT（仅 IPv4）" ;;
+        nat_ipv6) mode_label="NAT + IPv6" ;;
+    esac
+
+    # 安装 incudal 快捷命令
+    local script_path=""
+    script_path=$(readlink -f "$0" 2>/dev/null || echo "$0")
+    
+    # 管道执行（curl | bash）时，$0 指向 bash 本身，不能直接复制
+    if [[ -f "$script_path" && ! "$script_path" =~ (bash|sh)$ ]]; then
+        # 正常文件执行：直接复制脚本
+        cp -f "$script_path" /usr/local/bin/incudal 2>/dev/null || true
+        chmod +x /usr/local/bin/incudal 2>/dev/null || true
+    elif [[ -f /root/incudal.sh ]]; then
+        # 回退方案 1：检查常见的下载位置
+        cp -f /root/incudal.sh /usr/local/bin/incudal 2>/dev/null || true
+        chmod +x /usr/local/bin/incudal 2>/dev/null || true
+    else
+        # 回退方案 2：创建自下载包装器，运行时从面板拉取最新脚本
+        cat > /usr/local/bin/incudal <<'SHORTCUT'
+#!/bin/bash
+# Incudal 节点管理快捷入口 - 自动下载最新版本
+SCRIPT_CACHE="/root/incudal.sh"
+SCRIPT_URL="https://raw.githubusercontent.com/0xdabiaoge/incudal/main/server/templates/install.sh"
+echo "正在获取最新的节点管理脚本..."
+if curl -sSfL "$SCRIPT_URL" -o "$SCRIPT_CACHE" 2>/dev/null; then
+    chmod +x "$SCRIPT_CACHE"
+    exec bash "$SCRIPT_CACHE" "$@"
+else
+    echo "下载失败。如果本机是纯 IPv6 环境，请确保 WARP 已开启后重试。"
+    echo "或手动从面板获取安装脚本保存到 /root/incudal.sh"
+    exit 1
+fi
+SHORTCUT
+        chmod +x /usr/local/bin/incudal 2>/dev/null || true
+    fi
+
+    echo ""
+    echo -e "${GREEN}  ╔══════════════════════════════════════════════════╗${NC}"
+    echo -e "${GREEN}  ║                                                  ║${NC}"
+    echo -e "${GREEN}  ║           ✓  安装完成                            ║${NC}"
+    echo -e "${GREEN}  ║                                                  ║${NC}"
+    echo -e "${GREEN}  ╚══════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "  网桥名称  :  ${GREEN}${BRIDGE_NAME}${NC}"
+    echo -e "  网桥子网  :  ${GREEN}${BRIDGE_SUBNET}${NC}"
+    echo -e "  API 监听  :  ${GREEN}[::]:${LISTEN_PORT}${NC}"
+    echo -e "  网络模式  :  ${GREEN}${mode_label}${NC}"
+    echo -e "  Agent     :  ${GREEN}${AGENT_INSTALL_STATUS}${NC}"
+    echo -e "  快捷命令  :  ${GREEN}incudal${NC}"
+    echo ""
+    divider
+    echo -e "  ${BOLD}下一步：${NC}请返回 Incudal 面板，点击「验证并连接」按钮完成注册"
+    echo -e "  ${DIM}随时输入 incudal 可重新进入此管理脚本${NC}"
+    divider
+    echo ""
+}
+
+# ========================== RFW 防火墙 ==========================
+
+# RFW 下载地址
+readonly RFW_RELEASE_URL="https://github.com/0xdabiaoge/incudal-rfw/releases/latest/download"
+readonly RFW_INSTALL_DIR="/root/rfw"
+readonly RFW_SERVICE_FILE="/etc/systemd/system/rfw.service"
+
+# RFW 交互式配置规则
+configure_rfw_rules() {
+    RFW_ARGS=""
+    RFW_SUMMARY_RULES=""
+    RFW_SUMMARY_GEO=""
+    RFW_SUMMARY_LOG="关闭"
+
+    echo ""
+    divider
+    echo -e "  ${BOLD}配置 RFW 屏蔽规则${NC}"
+    divider
+    echo ""
+
+    # 1. 协议屏蔽多选
+    echo -e "  ┌─ 协议屏蔽（可多选，输入编号用空格分隔）──────────"
+    echo -e "  │"
+    echo -e "  │   1) 屏蔽邮件发送       ─  SMTP 25/587/465/2525"
+    echo -e "  │   2) 屏蔽 HTTP 入站     ─  明文 HTTP 协议探测"
+    echo -e "  │   3) 屏蔽 SOCKS5 入站   ─  代理协议探测"
+    echo -e "  │   4) 屏蔽全加密流量     ─  SS/V2Ray（严格模式）"
+    echo -e "  │   5) 屏蔽 WireGuard     ─  VPN 协议探测"
+    echo -e "  │   6) 屏蔽 QUIC/HTTP3    ─  QUIC 协议"
+    echo -e "  │   7) 屏蔽所有入站       ─  最激进模式"
+    echo -e "  │"
+    echo -e "  │   A) 全选(1-6)  D) 默认(1-5)  C) 清空"
+    echo -e "  └──────────────────────────────────────────────────"
+    echo ""
+    echo -ne "  ${BOLD}请选择 [默认 D]: ${NC}"
+    read -r rule_choice || true
+    rule_choice=$(echo "${rule_choice:-D}" | tr '[:lower:]' '[:upper:]')
+
+    local selected_rules=()
+    local rule_names=()
+    local block_all=false
+
+    if [[ "$rule_choice" == "A" ]]; then
+        rule_choice="1 2 3 4 5 6"
+    elif [[ "$rule_choice" == "D" ]]; then
+        rule_choice="1 2 3 4 5"
+    elif [[ "$rule_choice" == "C" ]]; then
+        rule_choice=""
+    fi
+
+    for c in $rule_choice; do
+        case "$c" in
+            1) selected_rules+=("--block-email"); rule_names+=("Email") ;;
+            2) selected_rules+=("--block-http"); rule_names+=("HTTP") ;;
+            3) selected_rules+=("--block-socks5"); rule_names+=("SOCKS5") ;;
+            4) selected_rules+=("--block-fet-strict"); rule_names+=("FET-Strict") ;;
+            5) selected_rules+=("--block-wireguard"); rule_names+=("WireGuard") ;;
+            6) selected_rules+=("--block-quic"); rule_names+=("QUIC") ;;
+            7) block_all=true ;;
+        esac
+    done
+
+    if [[ "$block_all" == "true" ]]; then
+        RFW_ARGS+=" --block-all"
+        RFW_SUMMARY_RULES="所有入站"
+    else
+        if [[ ${#selected_rules[@]} -gt 0 ]]; then
+            RFW_ARGS+=" ${selected_rules[*]}"
+            RFW_SUMMARY_RULES=$(IFS=/ ; echo "${rule_names[*]}")
+        else
+            RFW_SUMMARY_RULES="无协议屏蔽"
+        fi
+    fi
+
+    # 2. GeoIP 模式
+    echo ""
+    echo -e "  ┌─ GeoIP 过滤模式 ──────────────────────────────────"
+    echo -e "  │"
+    echo -e "  │   1) 黑名单模式  ─  屏蔽指定国家（推荐）"
+    echo -e "  │   2) 白名单模式  ─  仅允许指定国家"
+    echo -e "  │   3) 不使用 GeoIP ─  全局协议过滤"
+    echo -e "  │"
+    echo -e "  └──────────────────────────────────────────────────"
+    echo ""
+    echo -ne "  ${BOLD}请选择 [默认 1]: ${NC}"
+    read -r geo_choice || true
+    geo_choice=${geo_choice:-1}
+
+    local countries=""
+    if [[ "$geo_choice" == "1" || "$geo_choice" == "2" ]]; then
+        echo -ne "  ${BOLD}请输入国家代码（逗号分隔）[默认 CN]: ${NC}"
+        read -r countries || true
+        countries=${countries:-CN}
+        # 转换为大写并去除多余空格
+        countries=$(echo "$countries" | tr '[:lower:]' '[:upper:]' | tr -d ' ')
+        
+        if [[ "$geo_choice" == "1" ]]; then
+            # 如果选了 block_all，则使用 --block-all-from 作为快捷方式
+            if [[ "$block_all" == "true" ]]; then
+                RFW_ARGS=$(echo "$RFW_ARGS" | sed 's/ --block-all//')
+                RFW_ARGS+=" --block-all-from $countries"
+            else
+                RFW_ARGS+=" --countries $countries"
+            fi
+            RFW_SUMMARY_GEO="黑名单 ($countries)"
+        else
+            RFW_ARGS+=" --allow-only-countries $countries"
+            RFW_SUMMARY_GEO="白名单 ($countries)"
+        fi
+    else
+        RFW_SUMMARY_GEO="不使用 GeoIP"
+    fi
+
+    # 3. 端口日志
+    echo ""
+    echo -e "  ┌─ 其他选项 ──────────────────────────────────────"
+    echo -e "  │"
+    echo -ne "  │   启用端口访问日志？[y/N]: ${NC}"
+    read -r log_choice || true
+    if [[ "${log_choice:-}" =~ ^[yY]$ ]]; then
+        RFW_ARGS+=" --log-port-access"
+        RFW_SUMMARY_LOG="开启"
+    fi
+
+    # 4. 配置确认
+    echo ""
+    echo -e "  ┌─ 配置确认 ──────────────────────────────────────"
+    echo -e "  │  屏蔽规则  :  ${GREEN}${RFW_SUMMARY_RULES}${NC}"
+    echo -e "  │  GeoIP     :  ${GREEN}${RFW_SUMMARY_GEO}${NC}"
+    echo -e "  │  端口日志  :  ${GREEN}${RFW_SUMMARY_LOG}${NC}"
+    echo -e "  │  "
+    echo -e "  │  运行参数  :  ${DIM}${RFW_ARGS}${NC}"
+    echo -e "  └──────────────────────────────────────────────────"
+    echo ""
+    echo -ne "  ${YELLOW}确认安装此配置？${NC}[Y/n]: "
+    read -r confirm || true
+    if [[ "${confirm:-Y}" =~ ^[nN]$ ]]; then
+        info "已取消配置"
+        return 1
+    fi
+    return 0
+}
+
+# 安装 RFW 防火墙
+install_rfw() {
+    echo ""
+    divider
+    echo -e "  ${BOLD}安装 RFW 入站流量屏蔽防火墙${NC}"
+    divider
+    echo ""
+
+    # 检查是否已安装
+    if [[ -f "${RFW_INSTALL_DIR}/rfw" ]] && systemctl is-active --quiet rfw 2>/dev/null; then
+        local rfw_status
+        rfw_status=$(systemctl is-active rfw 2>/dev/null || echo "未知")
+        warn "RFW 已安装且正在运行（状态: ${rfw_status}）"
+        echo -ne "  ${BOLD}是否重新安装？${NC}[y/N]: "
+        read -r reinstall || true
+        if [[ ! "${reinstall:-}" =~ ^[yY]$ ]]; then
+            info "已取消"
+            return 0
+        fi
+        # 先停止旧服务
+        systemctl stop rfw 2>/dev/null || true
+        systemctl disable rfw 2>/dev/null || true
+    fi
+
+    # 检测架构
+    step "检测系统架构..."
+    local arch_suffix=""
+    case "$(uname -m)" in
+        x86_64)
+            arch_suffix="x86_64"
+            ;;
+        aarch64|arm64)
+            arch_suffix="aarch64"
+            ;;
+        *)
+            error "不支持的架构: $(uname -m)（仅支持 x86_64 / aarch64）"
+            return 1
+            ;;
+    esac
+    log "系统架构: $(uname -m) (${arch_suffix})"
+
+    # 选择网络接口
+    step "选择网络接口..."
+    local interfaces=()
+    while IFS= read -r iface; do
+        [[ -z "$iface" ]] && continue
+        interfaces+=("$iface")
+    done < <(ip -o link show | awk -F': ' '{print $2}' | grep -v lo)
+
+    if [[ ${#interfaces[@]} -eq 0 ]]; then
+        error "未找到可用的网络接口"
+        return 1
+    fi
+
+    local selected_interface=""
+
+    if [[ ${#interfaces[@]} -eq 1 ]]; then
+        # 只有一个接口，自动选择
+        selected_interface="${interfaces[0]}"
+        info "自动选择网卡: ${selected_interface}"
+    else
+        echo ""
+        echo -e "  可用的网络接口："
+        local i
+        for i in "${!interfaces[@]}"; do
+            local num=$((i + 1))
+            # 获取该接口的 IP
+            local iface_ip
+            iface_ip=$(ip -4 addr show "${interfaces[$i]}" 2>/dev/null | awk '/inet / {print $2}' | head -n1 || echo "")
+            if [[ -n "$iface_ip" ]]; then
+                echo -e "    ${CYAN}${num})${NC}  ${interfaces[$i]}  ${DIM}(${iface_ip})${NC}"
+            else
+                echo -e "    ${CYAN}${num})${NC}  ${interfaces[$i]}"
+            fi
+        done
+        echo ""
+
+        while true; do
+            echo -ne "  ${BOLD}请选择网卡编号 [1-${#interfaces[@]}]: ${NC}"
+            read -r iface_choice || true
+            if [[ "${iface_choice:-}" =~ ^[0-9]+$ ]] && \
+               [[ "$iface_choice" -ge 1 ]] && \
+               [[ "$iface_choice" -le "${#interfaces[@]}" ]]; then
+                selected_interface="${interfaces[$((iface_choice - 1))]}"
+                break
+            else
+                warn "无效输入，请重新选择"
+            fi
+        done
+    fi
+
+    log "使用网卡: ${selected_interface}"
+
+    # 下载 RFW 二进制文件
+    step "下载 RFW 程序..."
+    mkdir -p "$RFW_INSTALL_DIR"
+
+    local rfw_url="${RFW_RELEASE_URL}/rfw-${arch_suffix}-unknown-linux-musl"
+    local download_ok=false
+    local attempt
+
+    for attempt in 1 2 3; do
+        info "下载 RFW (第 ${attempt} 次)..."
+        if curl -sSfL --connect-timeout 15 --max-time 120 \
+            "$rfw_url" -o "${RFW_INSTALL_DIR}/rfw" 2>/dev/null; then
+            download_ok=true
+            break
+        else
+            warn "第 ${attempt} 次下载失败"
+            [[ "$attempt" -lt 3 ]] && sleep 3
+        fi
+    done
+
+    if [[ "$download_ok" != "true" ]]; then
+        error "RFW 下载失败（已重试 3 次）"
+        error "下载地址: ${rfw_url}"
+        return 1
+    fi
+
+    chmod +x "${RFW_INSTALL_DIR}/rfw"
+    log "RFW 下载完成"
+
+    # 交互式配置 RFW 规则
+    if ! configure_rfw_rules; then
+        return 0
+    fi
+
+    # 创建 systemd 服务
+    step "配置 RFW 服务..."
+
+    cat > "$RFW_SERVICE_FILE" <<EOF
+[Unit]
+Description=RFW Firewall Service
+After=network.target
+
+[Service]
+Type=simple
+User=root
+Environment=RUST_LOG=info
+ExecStart=${RFW_INSTALL_DIR}/rfw --iface ${selected_interface}${RFW_ARGS}
+Restart=always
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+    systemctl daemon-reload
+
+    # 启动服务
+    step "启动 RFW 服务..."
+    systemctl start rfw
+    systemctl enable rfw 2>/dev/null || true
+
+    # 验证
+    sleep 2
+    if systemctl is-active --quiet rfw 2>/dev/null; then
+        echo ""
+        echo -e "${GREEN}  ╔══════════════════════════════════════════════════╗${NC}"
+        echo -e "${GREEN}  ║                                                  ║${NC}"
+        echo -e "${GREEN}  ║           ✓  RFW 防火墙安装完成                  ║${NC}"
+        echo -e "${GREEN}  ║                                                  ║${NC}"
+        echo -e "${GREEN}  ╚══════════════════════════════════════════════════╝${NC}"
+        echo ""
+        echo -e "  监听网卡  :  ${GREEN}${selected_interface}${NC}"
+        echo -e "  服务状态  :  ${GREEN}运行中${NC}"
+        echo -e "  屏蔽规则  :  ${GREEN}${RFW_SUMMARY_RULES}${NC}"
+        echo -e "  GeoIP配置 :  ${GREEN}${RFW_SUMMARY_GEO}${NC}"
+        echo -e "  端口日志  :  ${GREEN}${RFW_SUMMARY_LOG}${NC}"
+        echo ""
+        divider
+        echo -e "  ${DIM}查看日志: journalctl -u rfw -f${NC}"
+        echo -e "  ${DIM}查看状态: systemctl status rfw${NC}"
+        if [[ "$RFW_SUMMARY_LOG" == "开启" ]]; then
+            echo -e "  ${DIM}查看拦截: ${RFW_INSTALL_DIR}/rfw stats${NC}"
+        fi
+        divider
+        echo ""
+    else
+        error "RFW 服务启动失败"
+        error "请运行 journalctl -u rfw -n 20 查看日志"
+    fi
+}
+
+# 卸载 RFW 防火墙
+uninstall_rfw() {
+    echo ""
+
+    # 检查是否安装
+    if [[ ! -f "${RFW_INSTALL_DIR}/rfw" ]] && \
+       ! systemctl list-unit-files 2>/dev/null | grep -q "rfw.service"; then
+        warn "RFW 未安装，无需卸载"
+        return 0
+    fi
+
+    divider
+    echo -e "  ${RED}${BOLD}卸载 RFW 防火墙${NC}"
+    divider
+    echo ""
+    echo -e "  ${RED}将删除以下内容：${NC}"
+    echo -e "    ${RED}•${NC}  RFW 二进制文件 (${RFW_INSTALL_DIR}/)"
+    echo -e "    ${RED}•${NC}  RFW systemd 服务文件"
+    echo ""
+    echo -ne "  ${BOLD}确认卸载 RFW？${NC}[y/N]: "
+    read -r rfw_confirm || true
+    if [[ ! "${rfw_confirm:-}" =~ ^[yY]$ ]]; then
+        info "已取消"
+        return 0
+    fi
+
+    do_rfw_cleanup
+}
+
+# RFW 清理（供独立卸载和主卸载共用）
+do_rfw_cleanup() {
+    info "停止 RFW 服务..."
+    systemctl stop rfw 2>/dev/null || true
+    systemctl disable rfw 2>/dev/null || true
+
+    # 删除服务文件
+    rm -f /etc/systemd/system/rfw.service 2>/dev/null || true
+    rm -f /usr/lib/systemd/system/rfw.service 2>/dev/null || true
+    rm -f /lib/systemd/system/rfw.service 2>/dev/null || true
+
+    # 删除程序目录
+    rm -rf "$RFW_INSTALL_DIR" 2>/dev/null || true
+
+    systemctl daemon-reload 2>/dev/null || true
+
+    log "RFW 防火墙已卸载"
+}
+
+# ========================== 卸载功能 ==========================
+
+# 卸载确认（双重确认，防止误操作）
+confirm_uninstall() {
+    echo ""
+    echo -e "  ${RED}${BOLD}╔══════════════════════════════════════════════════╗${NC}"
+    echo -e "  ${RED}${BOLD}║              ⚠  卸载警告                        ║${NC}"
+    echo -e "  ${RED}${BOLD}╚══════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "  ${RED}此操作将彻底删除以下内容：${NC}"
+    echo ""
+    echo -e "    ${RED}•${NC}  所有 LXC 容器及其数据（不可恢复）"
+    echo -e "    ${RED}•${NC}  所有容器镜像和快照"
+    echo -e "    ${RED}•${NC}  所有存储池及数据"
+    echo -e "    ${RED}•${NC}  网桥 ${BRIDGE_NAME} 及网络配置"
+    echo -e "    ${RED}•${NC}  Incus 软件包及配置"
+    echo -e "    ${RED}•${NC}  Zabbly APT 源和 GPG 密钥"
+    echo -e "    ${RED}•${NC}  本脚本添加的内核参数"
+    echo ""
+    divider
+    echo -ne "  ${RED}${BOLD}确认要彻底卸载 Incus 节点？${NC}[y/N]: "
+    read -r confirm1
+    if [[ ! "$confirm1" =~ ^[yY]$ ]]; then
+        info "已取消卸载"
+        exit 0
+    fi
+
+    echo ""
+    echo -ne "  ${RED}${BOLD}再次确认：所有容器数据将永久丢失！${NC}输入 ${YELLOW}YES${NC} 继续: "
+    read -r confirm2
+    if [[ "$confirm2" != "YES" ]]; then
+        info "已取消卸载（需要输入大写 YES 确认）"
+        exit 0
+    fi
+}
+
+# 执行卸载
+do_uninstall() {
+    confirm_uninstall
+
+    echo ""
+    divider
+    echo -e "  ${BOLD}开始卸载...${NC}"
+    divider
+
+    # ---- 步骤 1: 停止并删除所有容器 ----
+    step "步骤 [1/8]  停止并删除所有容器..."
+    if command -v incus &>/dev/null; then
+        # 获取所有容器列表
+        local containers
+        containers=$(incus list --format csv -c n 2>/dev/null || true)
+        if [[ -n "$containers" ]]; then
+            while IFS= read -r cname; do
+                [[ -z "$cname" ]] && continue
+                info "停止容器: ${cname}"
+                incus stop "$cname" --force 2>/dev/null || true
+                info "删除容器: ${cname}"
+                incus delete "$cname" --force 2>/dev/null || true
+            done <<< "$containers"
+            log "所有容器已删除"
+        else
+            info "无运行中的容器"
+        fi
+    else
+        info "Incus 未安装，跳过容器清理"
+    fi
+
+    # ---- 步骤 2: 删除所有镜像 ----
+    step "步骤 [2/8]  清理容器镜像..."
+    if command -v incus &>/dev/null; then
+        local images
+        images=$(incus image list --format csv -c f 2>/dev/null || true)
+        if [[ -n "$images" ]]; then
+            while IFS= read -r fingerprint; do
+                [[ -z "$fingerprint" ]] && continue
+                incus image delete "$fingerprint" 2>/dev/null || true
+            done <<< "$images"
+            log "所有镜像已删除"
+        else
+            info "无缓存镜像"
+        fi
+    fi
+
+    # ---- 步骤 3: 删除网桥和存储池 ----
+    step "步骤 [3/8]  删除网络和存储池..."
+    if command -v incus &>/dev/null; then
+        # 删除面板信任证书
+        if incus config trust list --format csv 2>/dev/null | grep -q "panel"; then
+            info "移除面板信任证书"
+            incus config trust remove panel 2>/dev/null || true
+        fi
+
+        # 删除自定义 profile（保留 default）
+        local profiles
+        profiles=$(incus profile list --format csv -c n 2>/dev/null | grep -v '^default$' || true)
+        if [[ -n "$profiles" ]]; then
+            while IFS= read -r pname; do
+                [[ -z "$pname" ]] && continue
+                info "删除 Profile: ${pname}"
+                incus profile delete "$pname" 2>/dev/null || true
+            done <<< "$profiles"
+        fi
+
+        # 删除网桥
+        if incus network show "$BRIDGE_NAME" &>/dev/null; then
+            info "删除网桥: ${BRIDGE_NAME}"
+            incus network delete "$BRIDGE_NAME" 2>/dev/null || true
+        fi
+
+        # 删除所有其他托管网络
+        local networks
+        networks=$(incus network list --format csv -c n 2>/dev/null || true)
+        if [[ -n "$networks" ]]; then
+            while IFS= read -r nname; do
+                [[ -z "$nname" ]] && continue
+                info "删除网络: ${nname}"
+                incus network delete "$nname" 2>/dev/null || true
+            done <<< "$networks"
+        fi
+
+        # 删除所有存储池
+        local pools
+        pools=$(incus storage list --format csv -c n 2>/dev/null || true)
+        if [[ -n "$pools" ]]; then
+            while IFS= read -r pool; do
+                [[ -z "$pool" ]] && continue
+                info "删除存储池: ${pool}"
+                # 先删除池中的存储卷
+                local volumes
+                volumes=$(incus storage volume list "$pool" --format csv -c n 2>/dev/null || true)
+                if [[ -n "$volumes" ]]; then
+                    while IFS= read -r vol; do
+                        [[ -z "$vol" ]] && continue
+                        incus storage volume delete "$pool" "$vol" 2>/dev/null || true
+                    done <<< "$volumes"
+                fi
+                incus storage delete "$pool" 2>/dev/null || true
+            done <<< "$pools"
+        fi
+
+        log "网络和存储池已清理"
+    fi
+
+    # ---- 步骤 4: 停止 Incus 服务 ----
+    step "步骤 [4/8]  停止 Incus 服务..."
+    systemctl stop incus.service 2>/dev/null || true
+    systemctl stop incus.socket 2>/dev/null || true
+    systemctl stop incus-user.service 2>/dev/null || true
+    systemctl stop incus-user.socket 2>/dev/null || true
+    systemctl stop incus-startup.service 2>/dev/null || true
+    systemctl disable incus.service 2>/dev/null || true
+    systemctl disable incus.socket 2>/dev/null || true
+    systemctl disable incus-user.service 2>/dev/null || true
+    systemctl disable incus-user.socket 2>/dev/null || true
+    systemctl disable incus-startup.service 2>/dev/null || true
+    log "Incus 服务已停止"
+
+    # ---- 步骤 5: 卸载软件包 ----
+    step "步骤 [5/8]  卸载软件包..."
+    export DEBIAN_FRONTEND=noninteractive
+    
+    # 1. 强制停止服务和进程防卡死
+    systemctl stop incus incus.socket incus-lxcfs incus-startup 2>/dev/null || true
+    systemctl disable incus incus.socket incus-lxcfs incus-startup 2>/dev/null || true
+    pkill -9 -f "incus" 2>/dev/null || true
+
+    # 2. 直接强制尝试卸载所有相关的包（使用正则覆盖包名）
+    apt-get purge -y -qq "^incus.*" lxcfs 2>/dev/null || true
+    
+    # 3. 兜底彻底斩断二进制文件（防止包管理器 Broken 状态导致系统内指令幽灵残留）
+    rm -rf /opt/incus 2>/dev/null || true
+    rm -f /usr/bin/incus* /usr/sbin/incus* /usr/local/bin/incus* 2>/dev/null || true
+    
+    log "Incus 相关软件包及其幽灵残留已强制清除"
+
+    # 清理不再需要的依赖
+    apt-get autoremove -y -qq 2>/dev/null || true
+    log "依赖清理完成"
+
+    # ---- 步骤 6: 清理 APT 源和密钥 ----
+    step "步骤 [6/8]  清理 APT 源和密钥..."
+    local cleaned=false
+
+    if [[ -f /etc/apt/sources.list.d/zabbly-incus-stable.sources ]]; then
+        rm -f /etc/apt/sources.list.d/zabbly-incus-stable.sources
+        info "已删除: zabbly-incus-stable.sources"
+        cleaned=true
+    fi
+
+    if [[ -f /etc/apt/keyrings/zabbly.gpg ]]; then
+        rm -f /etc/apt/keyrings/zabbly.gpg
+        info "已删除: zabbly.gpg"
+        cleaned=true
+    fi
+
+    if [[ "$cleaned" == "true" ]]; then
+        apt-get update -qq 2>/dev/null || true
+        log "APT 源和密钥已清理"
+    else
+        info "APT 源和密钥不存在，跳过"
+    fi
+
+    # ---- 步骤 7: 清理外挂服务（RFW / WARP / 守护进程） ----
+    step "步骤 [7/8]  清理外挂防护与网络代理服务..."
+    
+    # 1. 清理 RFW
+    if [[ -f "${RFW_INSTALL_DIR}/rfw" ]] || \
+       systemctl list-unit-files 2>/dev/null | grep -q "rfw.service"; then
+        do_rfw_cleanup
+    else
+        info "RFW 未安装，跳过"
+    fi
+
+    # 2. 清理 WARP 和 IPv6 路由守护神
+    if ip link show wg0 >/dev/null 2>&1 || [[ -f /usr/local/bin/wgcf ]] || [[ -d /etc/wireguard ]]; then
+        systemctl stop wg-quick@wg0 2>/dev/null || true
+        systemctl disable wg-quick@wg0 2>/dev/null || true
+        rm -rf /etc/wireguard/ 2>/dev/null || true
+        rm -f /usr/local/bin/wgcf 2>/dev/null || true
+        rm -f /usr/local/bin/incus-warp 2>/dev/null || true
+        
+        systemctl stop ipv6-route-guard 2>/dev/null || true
+        systemctl disable ipv6-route-guard 2>/dev/null || true
+        rm -f /etc/systemd/system/ipv6-route-guard.service 2>/dev/null || true
+        rm -f /usr/local/bin/ipv6-route-guard.sh 2>/dev/null || true
+        
+        systemctl daemon-reload
+        info "已清理: Cloudflare WARP 出海通道及路由守护服务"
+    else
+        info "WARP 网络组件未安装，跳过"
+    fi
+
+    # 3. 清除 IPv6 同步守护神服务
+    if systemctl list-unit-files 2>/dev/null | grep -q "incus-v6-guardian.service"; then
+        systemctl stop incus-v6-guardian 2>/dev/null || true
+        systemctl disable incus-v6-guardian 2>/dev/null || true
+        rm -f /etc/systemd/system/incus-v6-guardian.service
+        rm -f /usr/local/bin/incus-v6-guardian.sh
+        systemctl daemon-reload
+        info "已清理: IPv6 双栈同步守护神 (Guardian Daemon)"
+    fi
+
+    # ---- 步骤 8: 清理配置文件和数据目录 ----
+    step "步骤 [8/8]  清理配置和数据文件..."
+
+    # 内核参数配置
+    if [[ -f /etc/sysctl.d/99-incus.conf ]]; then
+        rm -f /etc/sysctl.d/99-incus.conf
+        info "已删除: /etc/sysctl.d/99-incus.conf"
+    fi
+
+    if [[ -f /etc/modules-load.d/br_netfilter.conf ]]; then
+        rm -f /etc/modules-load.d/br_netfilter.conf
+        info "已删除: /etc/modules-load.d/br_netfilter.conf"
+    fi
+
+    # 重新加载 sysctl（移除自定义参数）
+    sysctl --system >/dev/null 2>&1 || true
+
+    # Incus 数据目录
+    if [[ -d /var/lib/incus ]]; then
+        rm -rf /var/lib/incus
+        info "已删除: /var/lib/incus/"
+    fi
+
+    # Incus 日志目录
+    if [[ -d /var/log/incus ]]; then
+        rm -rf /var/log/incus
+        info "已删除: /var/log/incus/"
+    fi
+
+    # Incus 运行时目录
+    if [[ -d /run/incus ]]; then
+        rm -rf /run/incus
+        info "已删除: /run/incus/"
+    fi
+
+    # Incus 用户配置目录
+    if [[ -d /root/.config/incus ]]; then
+        rm -rf /root/.config/incus
+        info "已删除: /root/.config/incus/"
+    fi
+
+    # 用户子 UID/GID 映射（Incus 可能添加的条目）
+    if grep -q "incus" /etc/subuid 2>/dev/null; then
+        sed -i '/incus/d' /etc/subuid 2>/dev/null || true
+        info "已清理: /etc/subuid 中的 incus 条目"
+    fi
+    if grep -q "incus" /etc/subgid 2>/dev/null; then
+        sed -i '/incus/d' /etc/subgid 2>/dev/null || true
+        info "已清理: /etc/subgid 中的 incus 条目"
+    fi
+
+    # 清除安装脚本、日志文件、下载的包缓存等
+    rm -f /root/log.txt /root/zfs-modules-*.tar.gz 2>/dev/null || true
+    local script_path
+    script_path=$(realpath "$0" 2>/dev/null || echo "$0")
+    if [[ -f "$script_path" && ! "$script_path" =~ (bash|sh)$ ]]; then
+        rm -f "$script_path"
+        info "已清理安装脚本自身: $script_path"
+    fi
+
+    log "配置和数据文件清理完成"
+
+    # ---- 卸载完成 ----
+    echo ""
+    echo -e "${GREEN}  ╔══════════════════════════════════════════════════╗${NC}"
+    echo -e "${GREEN}  ║                                                  ║${NC}"
+    echo -e "${GREEN}  ║           ✓  卸载完成                            ║${NC}"
+    echo -e "${GREEN}  ║                                                  ║${NC}"
+    echo -e "${GREEN}  ╚══════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "  已清理的内容："
+    echo -e "    ${GREEN}✓${NC}  所有 LXC 容器和镜像"
+    echo -e "    ${GREEN}✓${NC}  网桥和存储池"
+    echo -e "    ${GREEN}✓${NC}  Incus 服务和软件包"
+    echo -e "    ${GREEN}✓${NC}  APT 源和 GPG 密钥"
+    echo -e "    ${GREEN}✓${NC}  RFW 防火墙"
+    echo -e "    ${GREEN}✓${NC}  内核参数配置"
+    echo -e "    ${GREEN}✓${NC}  数据和日志目录"
+    echo -e "    ${GREEN}✓${NC}  安装脚本自身及缓存"
+    echo ""
+    divider
+    echo -e "  ${DIM}系统已还原。如需重新安装，请再次运行此脚本。${NC}"
+    divider
+    echo ""
+
+    # 删除自身脚本及任何下载的面板脚本残留
+    rm -f "$0" 2>/dev/null || true
+    rm -f incudal-install.sh *.install.sh install.sh incudal.sh 2>/dev/null || true
+    rm -f /root/install.sh /root/incudal.sh 2>/dev/null || true
+}
+
+# -----------------------------------------------------------------------------
+# IPv6 Guardian Daemon (双栈端口同步补丁)
+# -----------------------------------------------------------------------------
+setup_v6_guardian() {
+    log "正在部署 IPv6 双栈端口同步守护进程 (Guardian Daemon)..."
+    
+    local guardian_script="/usr/local/bin/incus-v6-guardian.sh"
+    local guardian_service="/etc/systemd/system/incus-v6-guardian.service"
+    
+    cat > "$guardian_script" << 'EOF'
+#!/bin/bash
+# Incudal - IPv6 Dual-Stack Guardian Daemon
+# 每 15 秒轮询，将新建的单栈 IPv4 端口映射同步生成一份 IPv6 双栈跨协议互通映射。
+export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
+
+while true; do
+  # 防止云服务商 NetworkManager 因网络波动重置内核参数，导致 proxy_ndp 失效
+  if [[ -f /etc/sysctl.d/99-incus.conf ]]; then
+      sysctl -p /etc/sysctl.d/99-incus.conf >/dev/null 2>&1 || true
+  fi
+
+  for c in $(incus list -c n,s --format=csv 2>/dev/null | awk -F, '$2=="RUNNING" {print $1}'); do
+    devices=$(incus config device show "$c" 2>/dev/null) || continue
+    
+    ip_v4=$(incus list "$c" -c 4 --format=csv 2>/dev/null | grep -E -o '[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+' | head -n1 || echo "127.0.0.1")
+
+    # TCP 新增同步
+    v4_tcp_proxies=$(echo "$devices" | awk -F: '/^proxy-tcp-[0-9]+/ {print $1}' | tr -d ' ')
+    for proxy in $v4_tcp_proxies; do
+      port=$(echo "$proxy" | awk -F'-' '{print $3}')
+      if ! echo "$devices" | grep -q "^proxy-v6-tcp-${port}:$"; then
+         original_connect=$(incus config device get "$c" "$proxy" connect 2>/dev/null)
+         target_port=$(echo "$original_connect" | awk -F: '{print $NF}')
+         [[ -z "$target_port" ]] && target_port="$port"
+         incus config device add "$c" proxy-v6-tcp-${port} proxy listen=tcp:[::]:${port} connect=tcp:${ip_v4}:${target_port} >/dev/null 2>&1
+      fi
+    done
+
+    # UDP 新增同步
+    v4_udp_proxies=$(echo "$devices" | awk -F: '/^proxy-udp-[0-9]+/ {print $1}' | tr -d ' ')
+    for proxy in $v4_udp_proxies; do
+      port=$(echo "$proxy" | awk -F'-' '{print $3}')
+      if ! echo "$devices" | grep -q "^proxy-v6-udp-${port}:$"; then
+         original_connect=$(incus config device get "$c" "$proxy" connect 2>/dev/null)
+         target_port=$(echo "$original_connect" | awk -F: '{print $NF}')
+         [[ -z "$target_port" ]] && target_port="$port"
+         incus config device add "$c" proxy-v6-udp-${port} proxy listen=udp:[::]:${port} connect=udp:${ip_v4}:${target_port} >/dev/null 2>&1
+      fi
+    done
+    
+    # TCP 孤儿清理
+    v6_tcp_proxies=$(echo "$devices" | awk -F: '/^proxy-v6-tcp-[0-9]+/ {print $1}' | tr -d ' ')
+    for proxy in $v6_tcp_proxies; do
+      port=$(echo "$proxy" | awk -F'-' '{print $4}')
+      if ! echo "$devices" | grep -q "^proxy-tcp-${port}:$"; then
+         incus config device remove "$c" proxy-v6-tcp-${port} >/dev/null 2>&1
+      fi
+    done
+
+    # UDP 孤儿清理
+    v6_udp_proxies=$(echo "$devices" | awk -F: '/^proxy-v6-udp-[0-9]+/ {print $1}' | tr -d ' ')
+    for proxy in $v6_udp_proxies; do
+      port=$(echo "$proxy" | awk -F'-' '{print $4}')
+      if ! echo "$devices" | grep -q "^proxy-udp-${port}:$"; then
+         incus config device remove "$c" proxy-v6-udp-${port} >/dev/null 2>&1
+      fi
+    done
+  done
+  sleep 15
+done
+EOF
+
+    chmod +x "$guardian_script"
+
+    cat > "$guardian_service" << EOF
+[Unit]
+Description=Incudal IPv6 Dual-Stack Guardian Daemon
+After=network.target
+
+[Service]
+Type=simple
+ExecStart=$guardian_script
+Restart=always
+RestartSec=10
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+    systemctl daemon-reload 2>/dev/null || true
+    systemctl enable incus-v6-guardian 2>/dev/null || true
+    systemctl restart incus-v6-guardian 2>/dev/null || true
+    
+    info "守护神服务已启动：每隔 15 秒自动打通新增容器的反向 IPv6 映射"
+}
+
+# ========================== 主流程入口 ==========================
+main() {
+    # 显示横幅
+    show_banner
+
+    # Root 权限检查
+    if [[ "$EUID" -ne 0 ]]; then
+        error "请以 root 权限运行此脚本"
+        echo -e "  ${DIM}用法: sudo bash $0${NC}"
+        exit 1
+    fi
+
+    # 检测系统环境
+    detect_system
+
+    # ---- 解析命令行参数（兼容非交互模式）----
+    local ACTION="install"   # 默认动作为安装
+    while [[ $# -gt 0 ]]; do
+        case "$1" in
+            --mode)
+                MODE="$2"; shift 2 ;;
+            --token)
+                TOKEN="$2"; shift 2 ;;
+            --ipv6-subnet)
+                IPV6_SUBNET="$2"; shift 2 ;;
+            --ipv6-iface)
+                IPV6_IFACE="$2"; shift 2 ;;
+            --port|-p)
+                LISTEN_PORT="$2"; shift 2 ;;
+            --uninstall)
+                ACTION="uninstall"; shift ;;
+            --agent|--agent-menu)
+                ACTION="agent"; shift ;;
+            --help|-h)
+                echo "用法: $0 [选项]"
+                echo ""
+                echo "选项:"
+                echo "  --mode <nat|nat_ipv6>   网络模式（不指定则交互选择）"
+                echo "  --token <TOKEN>         面板认证 Token"
+                echo "  --ipv6-subnet <CIDR>    IPv6 子网段（例如 2001:db8::/64）"
+                echo "  --ipv6-iface <IFACE>    IPv6 路由父网卡（例如 eth0）"
+                echo "  --port <PORT>           自定义 Incus 运行端口 (默认 8443)"
+                echo "  --uninstall             卸载 Incus 节点并还原系统"
+                echo "  --agent                 打开 Agent 安装 / 更新菜单"
+                echo "  --help, -h              显示帮助信息"
+                echo ""
+                echo "交互模式: sudo bash $0"
+                echo "命令行:   sudo bash $0 --mode nat --token <YOUR_TOKEN> --port 10001"
+                echo "卸载:     sudo bash $0 --uninstall"
+                exit 0
+                ;;
+            *)
+                error "未知参数: $1"
+                echo -e "  ${DIM}使用 --help 查看帮助${NC}"
+                exit 1
+                ;;
+        esac
+    done
+
+    # 如果通过命令行指定了卸载，直接执行
+    if [[ "$ACTION" == "uninstall" ]]; then
+        do_uninstall
+        exit 0
+    fi
+    if [[ "$ACTION" == "agent" ]]; then
+        manage_incudal_agent
+        exit 0
+    fi
+
+    # ---- 交互式流程 ----
+
+    # 如果 stdin 不是终端且缺少参数，给出提示
+    if [[ ! -t 0 ]]; then
+        if [[ -z "$MODE" || -z "$TOKEN" ]]; then
+            error "通过管道执行时，必须提供 --mode 和 --token 参数"
+            echo -e "  ${DIM}示例: curl -sL <URL> | sudo bash -s -- --mode nat --token <TOKEN>${NC}"
+            exit 1
+        fi
+    fi
+
+    # 合并注入变量与 CLI 参数
+    TOKEN="${INJECT_TOKEN:-${TOKEN:-}}"
+    MODE="${INJECT_MODE:-${MODE:-}}"
+    IPV6_SUBNET="${INJECT_IPV6_SUBNET:-${IPV6_SUBNET:-}}"
+    IPV6_IFACE="${INJECT_IPV6_IFACE:-${IPV6_IFACE:-}}"
+
+    # 模式选择（未通过 CLI 或面板注入指定时进入菜单）
+    if [[ -z "$MODE" ]]; then
+        show_system_info
+
+        while true; do
+            show_menu
+            read -r choice
+            echo ""
+
+            case "$choice" in
+                1)  MODE="nat";      break ;;
+                2)
+                    MODE="nat_ipv6"
+                    echo -e "\n${CYAN}正在检测宿主机 IPv6 网络配置...${NC}"
+                    
+                    local detect_iface=""
+                    local detect_ip=""
+                    detect_iface=$(ip -6 route show default 2>/dev/null | awk '/dev/ {for(i=1;i<=NF;i++) if($i=="dev") print $(i+1)}' | head -n1 || true)
+                    if [[ -z "$detect_iface" ]]; then
+                        detect_iface=$(ip route show default 2>/dev/null | awk '/dev/ {for(i=1;i<=NF;i++) if($i=="dev") print $(i+1)}' | head -n1 || true)
+                    fi
+                    
+                    if [[ -n "$detect_iface" ]]; then
+                        detect_ip=$(ip -6 addr show dev "$detect_iface" scope global 2>/dev/null | awk '/inet6/ {print $2}' | grep -vEi "^(fd|fe80)" | head -n1 || true)
+                    fi
+
+                    echo ""
+                    echo -e "  ${CYAN}==> IPv6 实例附加子网配置${NC}"
+                    if [[ -n "$detect_ip" ]]; then
+                        echo -e "  检测到当前服务器分配的 IPv6 全段为: ${GREEN}${detect_ip}${NC}，网卡: ${GREEN}${detect_iface}${NC}。"
+                    else
+                        echo -e "  ${YELLOW}未检测到公网 IPv6 地址${NC}"
+                    fi
+                    echo -e "  ${DIM}若要开启真实 IPv6 入站/出站路由分配，请直接回车采用默认值即可，或手动输入。${NC}"
+                    echo -e "  ${DIM}格式须带有网络前缀长度（例如 2a01:4f9.../64），若不需要额外分发 IPv6 请留空跳过。${NC}"
+                    echo -ne "  ${BOLD}请输入分配给虚拟机的 IPv6 子网 [回车默认: ${detect_ip:-留空}]: ${NC}"
+                    read -r IPV6_SUBNET
+                    if [[ -z "$IPV6_SUBNET" ]]; then
+                        IPV6_SUBNET="$detect_ip"
+                    fi
+
+                    if [[ -n "$IPV6_SUBNET" ]]; then
+                        echo -ne "  ${BOLD}请输入此 IPv6 使用的物理网卡名 [回车默认: ${detect_iface:-无}]: ${NC}"
+                        read -r IPV6_IFACE
+                        if [[ -z "$IPV6_IFACE" ]]; then
+                            IPV6_IFACE="$detect_iface"
+                        fi
+                    fi
+                    break
+                    ;;
+                3)  install_rfw; continue ;;
+                4)  show_system_info; continue ;;
+                5)  uninstall_rfw; continue ;;
+                6)  do_uninstall; exit 0 ;;
+                7)  show_network_mode_help; continue ;;
+                8)  manage_incudal_agent; continue ;;
+                0)  info "再见！"; exit 0 ;;
+                *)  warn "无效选项，请重新选择"; continue ;;
+            esac
+        done
+    fi
+
+    # 模式参数合法性验证
+    if [[ "$MODE" != "nat" && "$MODE" != "nat_ipv6" ]]; then
+        error "--mode 必须为 'nat' 或 'nat_ipv6'"
+        exit 1
+    fi
+
+    # Token 输入（未通过 CLI 指定或面板注入时交互输入）
+    if [[ -z "$TOKEN" ]]; then
+        read_token
+    else
+        local token_masked="${TOKEN:0:8}…${TOKEN: -4}"
+        info "Token 已自动配置: ${token_masked}"
+    fi
+
+    # 端口修改逻辑
+    if [[ -z "${LISTEN_PORT:-}" ]]; then
+        echo -e "\n${CYAN}==> (可选) 自定义通信端口${NC}"
+        echo -e "  ${DIM}默认 8443，若被防火墙屏蔽可改为 10000+ 端口${NC}"
+        echo -ne "  ${BOLD}通信端口 [默认 8443]: ${NC}"
+        read -r USER_PORT
+        if [[ -n "$USER_PORT" && "$USER_PORT" =~ ^[0-9]+$ ]]; then
+            LISTEN_PORT="$USER_PORT"
+        else
+            LISTEN_PORT="8443"
+        fi
+    fi
+
+    configure_agent_heartbeat_interval
+
+    # WARP 询问逻辑（纯 IPv6 专供）
+    if [[ "$IS_PURE_IPV6" == "true" ]]; then
+        if [[ -t 0 ]]; then
+            echo -e "\n${CYAN}==> 检测到系统为【纯 IPv6 出站】环境${NC}"
+            echo -e "  基于预设，脚本将默认请求 Cloudflare WARP 提供 IPv4 虚拟接驳支持。"
+            echo -e "  若您的业务需求须使用纯净原生 IPv6，可选择跳过。"
+            echo -ne "  ${BOLD}是否为目前宿主机接驳安装 WARP IPv4 出站通道？[Y/n]: ${NC}"
+            read -r WARP_CHOICE
+            if [[ "${WARP_CHOICE:-Y}" =~ ^[nN]$ ]]; then
+                SKIP_WARP="true"
+            else
+                SKIP_WARP="false"
+            fi
+        else
+            SKIP_WARP="false"
+        fi
+    else
+        SKIP_WARP="false"
+    fi
+
+    # 安装前确认
+    confirm_install
+
+    # ---- 执行安装 ----
+    echo ""
+    divider
+    echo -e "  ${BOLD}开始安装...${NC}"
+    divider
+
+    if [[ "$IS_PURE_IPV6" == "true" ]]; then
+        setup_temp_network  # 接入临时出海通道
+        if [[ "${SKIP_WARP:-false}" != "true" ]]; then
+            setup_warp_v4     # 搭建底层双规双栈通道
+        else
+            info "用户已选择跳过 WARP 安装，保留原生纯 IPv6 环境出站"
+        fi
+    fi
+
+    setup_kernel      # 1/5 内核参数
+
+    # 2/5 系统依赖（用户可能拒绝 DKMS 编译并返回主菜单）
+    if ! install_deps; then
+        warn "安装已中断，返回主菜单..."
+        echo ""
+        exec "$0"  # 重新启动脚本回到主菜单
+        exit 0
+    fi
+
+    install_incus     # 3/5 安装 Incus
+    init_incus        # 4/5 初始化 Incus
+    import_cert       # 5/5 导入证书
+    
+    # 仅当启用了 IPv6 相关功能时，挂载 IPv6 双栈同步守护神
+    if [[ "$MODE" == "nat_ipv6" ]]; then
+        setup_v6_guardian
+    fi
+
+    install_incudal_agent
+
+    show_result
+}
+
+main "$@"
diff --git a/server/tsconfig.json b/server/tsconfig.json
new file mode 100644
index 0000000..8aa5528
--- /dev/null
+++ b/server/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "drizzle"]
+}
+